51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Text, Dimensions, View, StyleSheet } from 'react-native';
|
|
import useCurrentTrack from 'utility/useCurrentTrack';
|
|
import styled from 'styled-components/native';
|
|
import FastImage from 'react-native-fast-image';
|
|
import { colors } from 'components/Colors';
|
|
|
|
const Screen = Dimensions.get('screen');
|
|
|
|
const Artwork = styled(FastImage)`
|
|
border-radius: 10px;
|
|
width: ${Screen.width * 0.8}px;
|
|
height: ${Screen.width * 0.8}px;
|
|
margin: 25px auto;
|
|
`;
|
|
|
|
const styles = StyleSheet.create({
|
|
artist: {
|
|
...colors.text,
|
|
fontWeight: 'bold',
|
|
fontSize: 24,
|
|
marginBottom: 12,
|
|
},
|
|
title: {
|
|
...colors.text,
|
|
fontSize: 18,
|
|
marginBottom: 12,
|
|
textAlign: 'center',
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
}
|
|
});
|
|
|
|
|
|
export default function NowPlaying() {
|
|
const track = useCurrentTrack();
|
|
|
|
return (
|
|
<View style={{ alignItems: 'center' }}>
|
|
<Artwork
|
|
style={colors.imageBackground}
|
|
source={{
|
|
uri: track?.artwork,
|
|
priority: FastImage.priority.high,
|
|
}}
|
|
/>
|
|
<Text style={styles.artist} >{track?.artist}</Text>
|
|
<Text style={styles.title}>{track?.title}</Text>
|
|
</View>
|
|
);
|
|
} |