bugfixes

- fixed image path for RNTP notification
- fixed overwhelming number of promises/requests generated when scrolling through artists (could still delay loading those further...)
- fixed spinner not spinning while artistInfo is fetched for image url

app/components/CoverArt.tsx

@@ -27,11 +27,6 @@ const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequ
   ({ cache, style, imageStyle, resizeMode }) => {
     const [error, setError] = useState(false)
 
-    if (error) {
-      console.log('error!')
-      console.log(cache?.file?.path)
-    }
-
     let source: ImageSourcePropType
     if (!error && cache?.file && !cache?.request?.promise) {
       source = { uri: `file://${cache.file.path}`, cache: 'reload' }
@@ -62,7 +57,7 @@ const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequ
 const ArtistImage = React.memo<ArtistCoverArtProps>(props => {
   const cache = useArtistArtFile(props.artistId, props.size)
 
-  return <ImageSource cache={cache} {...props} />
+  return <ImageSource cache={cache} {...props} imageStyle={{ ...styles.artistImage, ...props.imageStyle }} />
 })
 
 const CoverArtImage = React.memo<CoverArtProps>(props => {
@@ -100,6 +95,9 @@ const styles = StyleSheet.create({
     width: '100%',
     position: 'absolute',
   },
+  artistImage: {
+    backgroundColor: 'rgba(81, 28, 99, 0.4)',
+  },
 })
 
 export default CoverArt

app/hooks/cache.ts

@@ -1,9 +1,10 @@
 import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
+import { ArtistInfo } from '@app/models/music'
 import { selectCache } from '@app/state/cache'
+import { selectMusic } from '@app/state/music'
 import { selectSettings } from '@app/state/settings'
 import { useStore, Store } from '@app/state/store'
 import { useCallback, useEffect } from 'react'
-import { useArtistInfo } from './music'
 
 const useFileRequest = (key: CacheItemTypeKey, id: string) => {
   const file = useStore(
@@ -51,23 +52,37 @@ export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbna
         }),
       )
     }
-  }, [cacheItem, client, coverArt, file, type])
+    // intentionally leaving file out so it doesn't re-render if the request fails
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cacheItem, client, coverArt, type])
 
   return { file, request }
 }
 
 export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
   const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
-  const artistInfo = useArtistInfo(artistId)
+  const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo)
   const { file, request } = useFileRequest(type, artistId)
   const cacheItem = useStore(selectCache.cacheItem)
 
   useEffect(() => {
-    const url = type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
-    if (!file && artistInfo && url) {
-      cacheItem(type, artistId, url)
+    if (!file) {
+      cacheItem(type, artistId, async () => {
+        let artistInfo: ArtistInfo | undefined
+        const cachedArtistInfo = useStore.getState().artistInfo[artistId]
+
+        if (cachedArtistInfo) {
+          artistInfo = cachedArtistInfo
+        } else {
+          artistInfo = await fetchArtistInfo(artistId)
+        }
+
+        return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
+      })
     }
-  }, [artistId, artistInfo, cacheItem, file, type])
+    // intentionally leaving file out so it doesn't re-render if the request fails
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [artistId, cacheItem, fetchArtistInfo, type])
 
   return { file, request }
 }

app/screens/LibraryAlbums.tsx

@@ -70,11 +70,6 @@ const AlbumsList = () => {
         overScrollMode="never"
         onEndReached={fetchNextPage}
         onEndReachedThreshold={6}
-        // getItemLayout={(_data, index) => ({
-        //   length: height,
-        //   offset: height * Math.floor(index / 3),
-        //   index,
-        // })}
       />
     </View>
   )

app/screens/SearchResultsView.tsx

@@ -57,7 +57,7 @@ const SearchResultsView: React.FC<{
         }),
       [fetchSearchResults, query, type],
     ),
-    50,
+    100,
   )
 
   useEffect(() => {
@@ -77,7 +77,8 @@ const SearchResultsView: React.FC<{
       refreshing={refreshing}
       overScrollMode="never"
       onEndReached={fetchNextPage}
-      onEndReachedThreshold={1}
+      removeClippedSubviews={true}
+      onEndReachedThreshold={2}
     />
   )
 }

app/state/cache.ts

@@ -1,4 +1,4 @@
-import { CacheFile, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache'
+import { CacheFile, CacheImageSize, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache'
 import { mkdir, rmdir } from '@app/util/fs'
 import PromiseQueue from '@app/util/PromiseQueue'
 import produce from 'immer'
@@ -6,8 +6,13 @@ import RNFS from 'react-native-fs'
 import { GetState, SetState } from 'zustand'
 import { Store } from './store'
 
-const imageDownloadQueue = new PromiseQueue(50)
-const songDownloadQueue = new PromiseQueue(1)
+const queues: Record<CacheItemTypeKey, PromiseQueue> = {
+  coverArt: new PromiseQueue(5),
+  coverArtThumb: new PromiseQueue(50),
+  artistArt: new PromiseQueue(5),
+  artistArtThumb: new PromiseQueue(50),
+  song: new PromiseQueue(1),
+}
 
 export type CacheDownload = CacheFile & CacheRequest
 
@@ -26,14 +31,18 @@ export type CacheRequestsByServer = Record<string, Record<CacheItemTypeKey, Reco
 // >
 
 export type CacheSlice = {
-  cacheItem: (key: CacheItemTypeKey, itemId: string, url: string | (() => string | Promise<string>)) => Promise<void>
+  cacheItem: (
+    key: CacheItemTypeKey,
+    itemId: string,
+    url: string | (() => string | Promise<string | undefined>),
+  ) => Promise<void>
 
   // cache: DownloadedItemsByServer
   cacheDirs: CacheDirsByServer
   cacheFiles: CacheFilesByServer
   cacheRequests: CacheRequestsByServer
 
-  fetchCoverArtFilePath: (coverArt: string) => Promise<string | undefined>
+  fetchCoverArtFilePath: (coverArt: string, size?: CacheImageSize) => Promise<string | undefined>
 
   createCache: (serverId: string) => Promise<void>
   prepareCache: (serverId: string) => void
@@ -80,44 +89,47 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
     }
 
     const path = `${get().cacheDirs[activeServerId][key]}/${itemId}`
-    const urlResult = typeof url === 'string' ? url : url()
-    const fromUrl = typeof urlResult === 'string' ? urlResult : await urlResult
 
-    const queue = key === 'song' ? songDownloadQueue : imageDownloadQueue
+    const promise = queues[key].enqueue(async () => {
+      const urlResult = typeof url === 'string' ? url : url()
+      const fromUrl = typeof urlResult === 'string' ? urlResult : await urlResult
 
-    const promise = queue.enqueue(() =>
-      RNFS.downloadFile({
-        fromUrl,
-        toFile: path,
-        progressInterval: 100,
-        progress: res => {
-          set(
-            produce<CacheSlice>(state => {
-              state.cacheRequests[activeServerId][key][itemId].progress = Math.max(
-                1,
-                res.bytesWritten / (res.contentLength || 1),
-              )
-            }),
-          )
-        },
-      })
-        .promise.then(() => {
-          set(
-            produce<CacheSlice>(state => {
-              state.cacheRequests[activeServerId][key][itemId].progress = 1
-              delete state.cacheRequests[activeServerId][key][itemId].promise
-            }),
-          )
-        })
-        .catch(() => {
-          set(
-            produce<CacheSlice>(state => {
-              delete state.cacheFiles[activeServerId][key][itemId]
-              delete state.cacheRequests[activeServerId][key][itemId]
-            }),
-          )
-        }),
-    )
+      try {
+        if (!fromUrl) {
+          throw new Error('cannot resolve url for cache request')
+        }
+
+        await RNFS.downloadFile({
+          fromUrl,
+          toFile: path,
+          // progressInterval: 100,
+          // progress: res => {
+          //   set(
+          //     produce<CacheSlice>(state => {
+          //       state.cacheRequests[activeServerId][key][itemId].progress = Math.max(
+          //         1,
+          //         res.bytesWritten / (res.contentLength || 1),
+          //       )
+          //     }),
+          //   )
+          // },
+        }).promise
+
+        set(
+          produce<CacheSlice>(state => {
+            state.cacheRequests[activeServerId][key][itemId].progress = 1
+            delete state.cacheRequests[activeServerId][key][itemId].promise
+          }),
+        )
+      } catch {
+        set(
+          produce<CacheSlice>(state => {
+            delete state.cacheFiles[activeServerId][key][itemId]
+            delete state.cacheRequests[activeServerId][key][itemId]
+          }),
+        )
+      }
+    })
     set(
       produce<Store>(state => {
         state.cacheFiles[activeServerId][key][itemId] = {
@@ -134,7 +146,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
     return await promise
   },
 
-  fetchCoverArtFilePath: async coverArt => {
+  fetchCoverArtFilePath: async (coverArt, size = 'thumbnail') => {
     const client = get().client
     if (!client) {
       return
@@ -151,10 +163,16 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
       if (inProgress.promise) {
         await inProgress.promise
       }
-      return existing.path
+      return `file://${existing.path}`
     }
 
-    await get().cacheItem('coverArt', coverArt, () => client.getCoverArtUri({ id: coverArt }))
+    await get().cacheItem('coverArt', coverArt, () =>
+      client.getCoverArtUri({
+        id: coverArt,
+        size: size === 'thumbnail' ? '256' : undefined,
+      }),
+    )
+
     return `file://${get().cacheFiles[activeServerId].coverArt[coverArt].path}`
   },
 

app/state/trackplayermap.ts

@@ -23,6 +23,8 @@ export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<St
       }
     }
 
+    console.log(artwork)
+
     return {
       id: song.id,
       title: song.title,