leon
93 lines
2.1 KiB
JavaScript
93 lines
2.1 KiB
JavaScript
import { Image as ExpoImage } from 'expo-image'
|
|
import React from 'react'
|
|
import { StyleSheet, Text, View } from 'react-native'
|
|
import { img } from '../assets'
|
|
import { FONT_FAMILY } from '../styles/Fonts'
|
|
|
|
const MusiclandPlaybackCover = ({
|
|
artistName,
|
|
profilePictureURL,
|
|
coverUrl,
|
|
style,
|
|
}) => {
|
|
const displayName =
|
|
typeof artistName === 'string' && artistName.trim() ? artistName.trim() : 'MusicLand'
|
|
|
|
return (
|
|
<View style={[styles.container, style]}>
|
|
<ExpoImage
|
|
source={coverUrl ? { uri: coverUrl } : img.musiclandPlaybackCover}
|
|
contentFit="cover"
|
|
cachePolicy="memory-disk"
|
|
priority="high"
|
|
style={StyleSheet.absoluteFillObject}
|
|
/>
|
|
{!coverUrl && profilePictureURL ? (
|
|
<ExpoImage
|
|
source={{ uri: profilePictureURL }}
|
|
contentFit="cover"
|
|
cachePolicy="memory-disk"
|
|
style={styles.profilePicture}
|
|
/>
|
|
) : null}
|
|
{!coverUrl ? (
|
|
<>
|
|
<Text
|
|
adjustsFontSizeToFit
|
|
minimumFontScale={0.55}
|
|
numberOfLines={1}
|
|
style={styles.artistName}
|
|
>
|
|
{displayName}
|
|
</Text>
|
|
<Text style={styles.playbacker}>PLAYBACKER</Text>
|
|
</>
|
|
) : null}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: '100%',
|
|
aspectRatio: 1,
|
|
borderRadius: 20,
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
},
|
|
profilePicture: {
|
|
position: 'absolute',
|
|
width: '31.25%',
|
|
aspectRatio: 1,
|
|
left: '34.375%',
|
|
top: '39.84375%',
|
|
borderRadius: 999,
|
|
},
|
|
artistName: {
|
|
position: 'absolute',
|
|
top: '76.5%',
|
|
left: '16%',
|
|
width: '68%',
|
|
color: '#FFFFFF',
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
fontSize: 21,
|
|
lineHeight: 26,
|
|
letterSpacing: 1.2,
|
|
textAlign: 'center',
|
|
},
|
|
playbacker: {
|
|
position: 'absolute',
|
|
bottom: '3%',
|
|
left: '10%',
|
|
width: '80%',
|
|
color: '#FFFFFF',
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
fontSize: 20,
|
|
lineHeight: 25,
|
|
letterSpacing: 1.4,
|
|
textAlign: 'center',
|
|
},
|
|
})
|
|
|
|
export default React.memo(MusiclandPlaybackCover)
|