diff --git a/app/components/ArtistArt.tsx b/app/components/ArtistArt.tsx index 31287f7..286c729 100644 --- a/app/components/ArtistArt.tsx +++ b/app/components/ArtistArt.tsx @@ -19,6 +19,7 @@ interface ArtistArtXUpProps extends ArtistArtSizeProps { interface ArtistArtProps extends ArtistArtSizeProps { id: string + round?: boolean } const PlaceholderContainer: React.FC = ({ height, width, children }) => { @@ -135,9 +136,11 @@ const NoneUp = React.memo(({ height, width }) => ( )) -const ArtistArt = React.memo(({ id, height, width }) => { +const ArtistArt = React.memo(({ id, height, width, round }) => { const artistArt = useAtomValue(artistArtAtomFamily(id)) + round = round === undefined ? true : round + const Placeholder = () => { const none = @@ -163,7 +166,7 @@ const ArtistArt = React.memo(({ id, height, width }) => { } return ( - + = ({ id }) => { const artist = useAtomValue(artistInfoAtomFamily(id)) - const layout = useLayout() + const setQueue = useSetQueue() + const albumsLayout = useLayout() + const coverLayout = useLayout() - const size = layout.width / 2 - styles.container.paddingHorizontal / 2 + const albumSize = albumsLayout.width / 2 - styles.container.paddingHorizontal / 2 if (!artist) { return <> } + const TopSongs = () => ( + <> + Top Songs + {artist.topSongs.map(s => ( + setQueue(artist.topSongs, `Top Songs: ${artist.name}`, s.id)} + /> + ))} + + ) + + const ArtistCoverFallback = () => ( + + + + ) + return ( - - + {artist.name} - Top Songs - {artist.topSongs.map(s => ( - - ))} + {artist.topSongs.length > 0 ? : <>} Albums - + {artist.albums.map(a => ( - + ))} @@ -84,7 +113,7 @@ const ArtistView: React.FC<{ ) } -const artistImageHeight = 280 +const artistCoverHeight = 280 const styles = StyleSheet.create({ scroll: { @@ -99,18 +128,19 @@ const styles = StyleSheet.create({ }, titleContainer: { width: '100%', - height: artistImageHeight, + height: artistCoverHeight, justifyContent: 'flex-end', }, title: { fontFamily: font.bold, fontSize: 44, color: colors.text.primary, - textAlign: 'left', + textAlign: 'center', textShadowColor: 'black', textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 16, paddingHorizontal: 10, + marginBottom: 10, }, header: { fontFamily: font.bold, @@ -119,10 +149,10 @@ const styles = StyleSheet.create({ marginTop: 20, marginBottom: 14, }, - artistImage: { + artistCover: { position: 'absolute', width: '100%', - height: artistImageHeight, + height: artistCoverHeight, }, albums: { width: '100%',