swtiched back to 2 sizes for images

siwtched to Image for now to avoid double caching from FastImage

app/components/CoverArt.tsx

@@ -1,15 +1,16 @@
-import { useArtistArtFile, useCoverArtFile } from '@app/hooks/music'
+import { useArtistArtFile, useCoverArtFile } from '@app/hooks/cache'
-import { CacheFile, CacheRequest } from '@app/models/music'
+import { CacheFile, CacheImageSize, CacheRequest } from '@app/models/cache'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
-import { ActivityIndicator, StyleSheet, View, ViewStyle } from 'react-native'
+import { ActivityIndicator, StyleSheet, View, ViewStyle, Image, ImageStyle, ImageSourcePropType } from 'react-native'
-import FastImage, { ImageStyle } from 'react-native-fast-image'
+import FastImage from 'react-native-fast-image'
 
 type BaseProps = {
   style?: ViewStyle
   imageStyle?: ImageStyle
   resizeMode?: keyof typeof FastImage.resizeMode
   round?: boolean
+  size?: CacheImageSize
 }
 
 type ArtistCoverArtProps = BaseProps & {
@@ -22,21 +23,27 @@ type CoverArtProps = BaseProps & {
   coverArt?: string
 }
 
-const Image = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequest } } & BaseProps>(
+const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequest } } & BaseProps>(
   ({ cache, style, imageStyle, resizeMode }) => {
     const [error, setError] = useState(false)
 
-    let source
+    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}` }
+      source = { uri: `file://${cache.file.path}`, cache: 'reload' }
     } else {
       source = require('@res/fallback.png')
     }
 
     return (
       <>
-        <FastImage
+        <Image
           source={source}
+          fadeDuration={150}
           resizeMode={resizeMode || FastImage.resizeMode.contain}
           style={[{ height: style?.height, width: style?.width }, imageStyle]}
           onError={() => setError(true)}
@@ -53,15 +60,15 @@ const Image = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequest }
 )
 
 const ArtistImage = React.memo<ArtistCoverArtProps>(props => {
-  const cache = useArtistArtFile(props.artistId)
+  const cache = useArtistArtFile(props.artistId, props.size)
 
-  return <Image cache={cache} {...props} />
+  return <ImageSource cache={cache} {...props} />
 })
 
 const CoverArtImage = React.memo<CoverArtProps>(props => {
-  const cache = useCoverArtFile(props.coverArt)
+  const cache = useCoverArtFile(props.coverArt, props.size)
 
-  return <Image cache={cache} {...props} />
+  return <ImageSource cache={cache} {...props} />
 })
 
 const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps>(props => {

app/hooks/cache.ts

@@ -0,0 +1,73 @@
+import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
+import { selectCache } from '@app/state/cache'
+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(
+    useCallback(
+      (store: Store) => {
+        const activeServerId = store.settings.activeServer
+        if (!activeServerId) {
+          return
+        }
+
+        return store.cacheFiles[activeServerId][key][id]
+      },
+      [key, id],
+    ),
+  )
+  const request = useStore(
+    useCallback(
+      (store: Store) => {
+        const activeServerId = store.settings.activeServer
+        if (!activeServerId) {
+          return
+        }
+
+        return store.cacheRequests[activeServerId][key][id]
+      },
+      [key, id],
+    ),
+  )
+
+  return { file, request }
+}
+
+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,
+          size: type === 'coverArtThumb' ? '256' : undefined,
+        }),
+      )
+    }
+  }, [cacheItem, client, coverArt, file, type])
+
+  return { file, request }
+}
+
+export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
+  const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
+  const artistInfo = useArtistInfo(artistId)
+  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)
+    }
+  }, [artistId, artistInfo, cacheItem, file, type])
+
+  return { file, request }
+}

app/hooks/music.ts

@@ -1,7 +1,4 @@
-import { CacheItemTypeKey } from '@app/models/music'
-import { selectCache } from '@app/state/cache'
 import { selectMusic } from '@app/state/music'
-import { selectSettings } from '@app/state/settings'
 import { Store, useStore } from '@app/state/store'
 import { useCallback, useEffect } from 'react'
 
@@ -63,62 +60,3 @@ export const useStarred = (id: string, type: string) => {
     ),
   )
 }
-
-const useFileRequest = (key: CacheItemTypeKey, id: string) => {
-  const file = useStore(
-    useCallback(
-      (store: Store) => {
-        const activeServerId = store.settings.activeServer
-        if (!activeServerId) {
-          return
-        }
-
-        return store.cacheFiles[activeServerId][key][id]
-      },
-      [key, id],
-    ),
-  )
-  const request = useStore(
-    useCallback(
-      (store: Store) => {
-        const activeServerId = store.settings.activeServer
-        if (!activeServerId) {
-          return
-        }
-
-        return store.cacheRequests[activeServerId][key][id]
-      },
-      [key, id],
-    ),
-  )
-
-  return { file, request }
-}
-
-export const useCoverArtFile = (coverArt: string = '-1') => {
-  const { file, request } = useFileRequest('coverArt', coverArt)
-  const client = useStore(selectSettings.client)
-  const cacheItem = useStore(selectCache.cacheItem)
-
-  useEffect(() => {
-    if (!file && client) {
-      cacheItem('coverArt', coverArt, () => client.getCoverArtUri({ id: coverArt }))
-    }
-  }, [cacheItem, client, coverArt, file])
-
-  return { file, request }
-}
-
-export const useArtistArtFile = (artistId: string) => {
-  const artistInfo = useArtistInfo(artistId)
-  const { file, request } = useFileRequest('artistArt', artistId)
-  const cacheItem = useStore(selectCache.cacheItem)
-
-  useEffect(() => {
-    if (!file && artistInfo && artistInfo.largeImageUrl) {
-      cacheItem('artistArt', artistId, artistInfo.largeImageUrl)
-    }
-  }, [artistId, artistInfo, artistInfo?.largeImageUrl, cacheItem, file])
-
-  return { file, request }
-}

app/models/cache.ts

@@ -0,0 +1,39 @@
+import { Album, PlaylistListItem, Artist, Song } from './music'
+
+export enum CacheItemType {
+  coverArt = 'coverArt',
+  coverArtThumb = 'coverArtThumb',
+  artistArt = 'artistArt',
+  artistArtThumb = 'artistArtThumb',
+  song = 'song',
+}
+
+export type CacheItemTypeKey = keyof typeof CacheItemType
+
+export type CacheImageSize = 'thumbnail' | 'original'
+
+export type CacheFile = {
+  path: string
+  date: number
+  permanent: boolean
+}
+
+export type CacheRequest = {
+  progress: number
+  promise?: Promise<void>
+}
+
+export type DownloadedAlbum = Album & {
+  songs: string[]
+}
+
+export type DownloadedPlaylist = PlaylistListItem & {
+  songs: string[]
+}
+
+export type DownloadedArtist = Artist & {
+  topSongs: string[]
+  albums: string[]
+}
+
+export type DownloadedSong = Song

app/models/music.ts

@@ -8,6 +8,7 @@ export interface Artist {
 
 export interface ArtistInfo extends Artist {
   albums: Album[]
+  smallImageUrl?: string
   largeImageUrl?: string
   topSongs: Song[]
 }
@@ -70,37 +71,3 @@ export type ListableItem = Song | AlbumListItem | Artist | PlaylistListItem
 export type HomeLists = { [key: string]: AlbumListItem[] }
 
 export type StarrableItemType = 'song' | 'album' | 'artist'
-
-export enum CacheItemType {
-  coverArt = 'coverArt',
-  artistArt = 'artistArt',
-  song = 'song',
-}
-
-export type CacheItemTypeKey = keyof typeof CacheItemType
-
-export type CacheFile = {
-  path: string
-  date: number
-  permanent: boolean
-}
-
-export type CacheRequest = {
-  progress: number
-  promise?: Promise<void>
-}
-
-export type DownloadedAlbum = Album & {
-  songs: string[]
-}
-
-export type DownloadedPlaylist = PlaylistListItem & {
-  songs: string[]
-}
-
-export type DownloadedArtist = Artist & {
-  topSongs: string[]
-  albums: string[]
-}
-
-export type DownloadedSong = Song

app/screens/ArtistView.tsx

@@ -118,6 +118,7 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
         onScroll={onScroll}>
         <CoverArt
           type="artist"
+          size="original"
           artistId={artist.id}
           style={styles.artistCover}
           resizeMode={FastImage.resizeMode.cover}

app/screens/LibraryAlbums.tsx

@@ -49,7 +49,7 @@ const AlbumListRenderItem: React.FC<{
 
 const AlbumsList = () => {
   const fetchAlbums = useStore(selectMusic.fetchAlbums)
-  const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 60)
+  const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 300)
 
   const layout = useWindowDimensions()
 
@@ -69,7 +69,8 @@ const AlbumsList = () => {
         onRefresh={refresh}
         overScrollMode="never"
         onEndReached={fetchNextPage}
-        onEndReachedThreshold={1}
+        onEndReachedThreshold={6}
+        disableVirtualization={true}
         getItemLayout={(_data, index) => ({
           length: height,
           offset: height * Math.floor(index / 3),

app/screens/NowPlayingView.tsx

@@ -95,7 +95,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

@@ -4,7 +4,8 @@ import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
 import ListItem from '@app/components/ListItem'
 import ListPlayerControls from '@app/components/ListPlayerControls'
 import NothingHere from '@app/components/NothingHere'
-import { useAlbumWithSongs, useCoverArtFile, usePlaylistWithSongs } from '@app/hooks/music'
+import { useCoverArtFile } from '@app/hooks/cache'
+import { useAlbumWithSongs, usePlaylistWithSongs } from '@app/hooks/music'
 import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
 import { useStore } from '@app/state/store'
 import { selectTrackPlayer } from '@app/state/trackplayer'
@@ -74,7 +75,7 @@ const SongListDetails = React.memo<{
   songList?: AlbumWithSongs | PlaylistWithSongs
   subtitle?: string
 }>(({ songList, subtitle, type }) => {
-  const coverArtFile = useCoverArtFile(songList?.coverArt)
+  const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
 
   if (!songList) {
     return <SongListDetailsFallback />
@@ -83,7 +84,7 @@ const SongListDetails = React.memo<{
   return (
     <ImageGradientScrollView imagePath={coverArtFile?.file?.path} style={styles.container}>
       <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> : <></>}
         {songList.songs.length > 0 ? (

app/state/cache.ts

@@ -1,4 +1,4 @@
-import { CacheFile, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/music'
+import { CacheFile, 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,7 +6,7 @@ import RNFS from 'react-native-fs'
 import { GetState, SetState } from 'zustand'
 import { Store } from './store'
 
-const imageDownloadQueue = new PromiseQueue(20)
+const imageDownloadQueue = new PromiseQueue(50)
 const songDownloadQueue = new PromiseQueue(1)
 
 export type CacheDownload = CacheFile & CacheRequest
@@ -168,7 +168,9 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
         state.cacheFiles[serverId] = {
           song: {},
           coverArt: {},
+          coverArtThumb: {},
           artistArt: {},
+          artistArtThumb: {},
         }
       }),
     )
@@ -183,14 +185,18 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
           state.cacheDirs[serverId] = {
             song: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/song`,
             coverArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArt`,
+            coverArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArtThumb`,
             artistArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArt`,
+            artistArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArtThumb`,
           }
         }
         if (!state.cacheRequests[serverId]) {
           state.cacheRequests[serverId] = {
             song: {},
             coverArt: {},
+            coverArtThumb: {},
             artistArt: {},
+            artistArtThumb: {},
           }
         }
       }),
@@ -257,7 +263,9 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
       set(
         produce<CacheSlice>(state => {
           state.cacheFiles[serverId].coverArt = {}
+          state.cacheFiles[serverId].coverArtThumb = {}
           state.cacheFiles[serverId].artistArt = {}
+          state.cacheFiles[serverId].artistArtThumb = {}
         }),
       )
     }

app/state/musicmap.ts

@@ -79,6 +79,7 @@ export const createMusicMapSlice = (set: SetState<Store>, get: GetState<Store>):
     return {
       ...get().mapArtistID3toArtist(artist),
       albums: mappedAlbums,
+      smallImageUrl: info.smallImageUrl,
       largeImageUrl: info.largeImageUrl,
       topSongs: (await get().mapChildrenToSongs(topSongs)).slice(0, 5),
     }

app/subsonic/api.ts

@@ -120,6 +120,9 @@ export class SubsonicApiClient {
 
     const params = new URLSearchParams()
     for (const key of keys) {
+      if (obj[key] === undefined || obj[key] === null) {
+        continue
+      }
       params.append(key, String(obj[key]))
     }