diff --git a/app/components/CoverArt.tsx b/app/components/CoverArt.tsx index ab5dcc0..5260de4 100644 --- a/app/components/CoverArt.tsx +++ b/app/components/CoverArt.tsx @@ -1,5 +1,5 @@ import { useArtistArtFile, useCoverArtFile } from '@app/hooks/cache' -import { CacheFile, CacheRequest } from '@app/models/cache' +import { CacheFile, CacheImageSize, CacheRequest } from '@app/models/cache' import colors from '@app/styles/colors' import React, { useState } from 'react' import { @@ -18,6 +18,7 @@ type BaseProps = { imageStyle?: ImageStyle resizeMode?: ImageResizeMode round?: boolean + size?: CacheImageSize } type ArtistCoverArtProps = BaseProps & { @@ -62,13 +63,13 @@ const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequ ) const ArtistImage = React.memo(props => { - const cache = useArtistArtFile(props.artistId) + const cache = useArtistArtFile(props.artistId, props.size) return }) const CoverArtImage = React.memo(props => { - const cache = useCoverArtFile(props.coverArt) + const cache = useCoverArtFile(props.coverArt, props.size) return }) diff --git a/app/hooks/cache.ts b/app/hooks/cache.ts index 826e758..aa0e7b5 100644 --- a/app/hooks/cache.ts +++ b/app/hooks/cache.ts @@ -1,4 +1,4 @@ -import { CacheItemTypeKey } from '@app/models/cache' +import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache' import { selectCache } from '@app/state/cache' import { selectSettings } from '@app/state/settings' import { Store, useStore, useStoreDeep } from '@app/state/store' @@ -35,15 +35,20 @@ const useFileRequest = (key: CacheItemTypeKey, id: string) => { return { file, request } } -export const useCoverArtFile = (coverArt = '-1') => { - const type: CacheItemTypeKey = 'coverArt' +export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => { + const type: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb' const { file, request } = useFileRequest(type, coverArt) const client = useStore(selectSettings.client) const cacheItem = useStore(selectCache.cacheItem) useEffect(() => { if (!file && client) { - cacheItem(type, coverArt, () => client.getCoverArtUri({ id: coverArt })) + cacheItem(type, coverArt, () => + client.getCoverArtUri({ + id: coverArt, + size: type === 'coverArtThumb' ? '256' : undefined, + }), + ) } // intentionally leaving file out so it doesn't re-render if the request fails // eslint-disable-next-line react-hooks/exhaustive-deps @@ -52,8 +57,8 @@ export const useCoverArtFile = (coverArt = '-1') => { return { file, request } } -export const useArtistArtFile = (artistId: string) => { - const type: CacheItemTypeKey = 'artistArt' +export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => { + const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb' const fetchArtistInfo = useStore(store => store.fetchArtistInfo) const artistInfo = useStoreDeep(store => store.entities.artistInfo[artistId]) const { file, request } = useFileRequest(type, artistId) @@ -65,8 +70,10 @@ export const useArtistArtFile = (artistId: string) => { return } - if (!file && artistInfo.largeImageUrl) { - cacheItem(type, artistId, artistInfo.largeImageUrl) + if (!file && artistInfo) { + cacheItem(type, artistId, async () => { + return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl + }) } // intentionally leaving file out so it doesn't re-render if the request fails // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/app/models/library.ts b/app/models/library.ts index ddc02e4..2143f4c 100644 --- a/app/models/library.ts +++ b/app/models/library.ts @@ -8,6 +8,7 @@ export interface Artist { export interface ArtistInfo { id: string + smallImageUrl?: string largeImageUrl?: string } diff --git a/app/screens/ArtistView.tsx b/app/screens/ArtistView.tsx index 18061b2..39a5dd3 100644 --- a/app/screens/ArtistView.tsx +++ b/app/screens/ArtistView.tsx @@ -150,7 +150,7 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => style={styles.scroll} contentContainerStyle={styles.scrollContent} onScroll={onScroll}> - + {artist.name} diff --git a/app/screens/NowPlayingView.tsx b/app/screens/NowPlayingView.tsx index 6acffab..fa5d604 100644 --- a/app/screens/NowPlayingView.tsx +++ b/app/screens/NowPlayingView.tsx @@ -96,7 +96,7 @@ const SongCoverArt = () => { return ( - + ) } diff --git a/app/screens/SongListView.tsx b/app/screens/SongListView.tsx index 3e0cafb..a696976 100644 --- a/app/screens/SongListView.tsx +++ b/app/screens/SongListView.tsx @@ -50,7 +50,7 @@ const SongListDetails = React.memo<{ songs?: Song[] subtitle?: string }>(({ title, songList, songs, subtitle, type }) => { - const coverArtFile = useCoverArtFile(songList?.coverArt) + const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail') const [headerColor, setHeaderColor] = useState(undefined) const setQueue = useStore(selectTrackPlayer.setQueue) @@ -111,17 +111,17 @@ const SongListDetails = React.memo<{ } ListHeaderComponent={ - + {songList.name} {subtitle ? {subtitle} : <>} - + } /> diff --git a/app/state/library.ts b/app/state/library.ts index a1beb6d..c1d3c46 100644 --- a/app/state/library.ts +++ b/app/state/library.ts @@ -505,6 +505,7 @@ function mapArtist(artist: ArtistID3Element): Artist { function mapArtistInfo(id: string, info: ArtistInfo2Element): ArtistInfo { return { id, + smallImageUrl: info.smallImageUrl, largeImageUrl: info.largeImageUrl, } }