Revert "use only original/large imges for covers/artist"

This reverts commit c9aea9065c.

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<ArtistCoverArtProps>(props => {
-  const cache = useArtistArtFile(props.artistId)
+  const cache = useArtistArtFile(props.artistId, props.size)
 
   return <ImageSource cache={cache} {...props} imageStyle={{ ...styles.artistImage, ...props.imageStyle }} />
 })
 
 const CoverArtImage = React.memo<CoverArtProps>(props => {
-  const cache = useCoverArtFile(props.coverArt)
+  const cache = useCoverArtFile(props.coverArt, props.size)
 
   return <ImageSource cache={cache} {...props} />
 })

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') => {
+export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => {
-  const type: CacheItemTypeKey = 'coverArt'
+  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) => {
+export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
-  const type: CacheItemTypeKey = 'artistArt'
+  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) {
+    if (!file && artistInfo) {
-      cacheItem(type, artistId, artistInfo.largeImageUrl)
+      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

app/models/library.ts

@@ -8,6 +8,7 @@ export interface Artist {
 
 export interface ArtistInfo {
   id: string
+  smallImageUrl?: string
   largeImageUrl?: string
 }
 

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}>
-        <CoverArt type="artist" artistId={artist.id} style={styles.artistCover} resizeMode={'cover'} />
+        <CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode={'cover'} />
         <View style={styles.titleContainer}>
           <Text style={styles.title}>{artist.name}</Text>
         </View>

app/screens/NowPlayingView.tsx

@@ -96,7 +96,7 @@ const SongCoverArt = () => {
 
   return (
     <View style={coverArtStyles.container}>
-      <CoverArt type="cover" coverArt={track?.coverArt} style={coverArtStyles.image} />
+      <CoverArt type="cover" size="original" coverArt={track?.coverArt} style={coverArtStyles.image} />
     </View>
   )
 }

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<string | undefined>(undefined)
   const setQueue = useStore(selectTrackPlayer.setQueue)
 
@@ -111,17 +111,17 @@ const SongListDetails = React.memo<{
         }
         ListHeaderComponent={
           <View style={styles.content}>
-            <CoverArt type="cover" coverArt={songList.coverArt} style={styles.cover} />
+            <CoverArt type="cover" size="original" coverArt={songList.coverArt} style={styles.cover} />
             <Text style={styles.title}>{songList.name}</Text>
             {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
-            <ListPlayerControls
+              <ListPlayerControls
-              style={styles.controls}
+                style={styles.controls}
-              songs={_songs}
+                songs={_songs}
-              typeName={typeName}
+                typeName={typeName}
-              queueName={songList.name}
+                queueName={songList.name}
-              queueContextId={songList.id}
+                queueContextId={songList.id}
-              queueContextType={type}
+                queueContextType={type}
-            />
+              />
           </View>
         }
       />

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,
   }
 }