full reworked images to download (cache) first

app/components/CoverArt.tsx

@@ -1,146 +1,92 @@
-import { useArtistInfo, useCoverArtUri } from '@app/hooks/music'
+import { useArtistCoverArtFile, useCoverArtFile } from '@app/hooks/music'
+import { DownloadFile } from '@app/state/music'
 import colors from '@app/styles/colors'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { ActivityIndicator, StyleSheet, View, ViewStyle } from 'react-native'
 import FastImage, { ImageStyle } from 'react-native-fast-image'
 
 type BaseProps = {
-  imageSize?: 'thumbnail' | 'original'
   style?: ViewStyle
   imageStyle?: ImageStyle
   resizeMode?: keyof typeof FastImage.resizeMode
   round?: boolean
 }
 
-type BaseImageProps = BaseProps & {
+type ArtistCoverArtProps = BaseProps & {
-  enableLoading: () => void
+  type: 'artist'
-  disableLoading: () => void
-  fallbackError: () => void
-}
-
-type ArtistIdProp = {
   artistId: string
 }
 
-type CoverArtProp = {
+type CoverArtProps = BaseProps & {
+  type: 'cover'
   coverArt?: string
 }
 
-type ArtistIdImageProps = BaseImageProps & ArtistIdProp
+const Image: React.FC<{ file?: DownloadFile } & BaseProps> = ({ file, style, imageStyle, resizeMode }) => {
-type CoverArtImageProps = BaseImageProps & CoverArtProp
+  const [source, setSource] = useState<number | { uri: string }>(
+    file && file.progress === 1 ? { uri: `file://${file.path}` } : require('@res/fallback.png'),
+  )
 
-type CoverArtProps = BaseProps & CoverArtProp & Partial<ArtistIdProp>
-
-const ArtistImageFallback: React.FC<{
-  enableLoading: () => void
-}> = ({ enableLoading }) => {
   useEffect(() => {
-    enableLoading()
+    if (file && file.progress === 1) {
-  }, [enableLoading])
+      setSource({ uri: `file://${file.path}` })
-  return <></>
+    }
+  }, [file])
+
+  return (
+    <>
+      <FastImage
+        source={source}
+        resizeMode={resizeMode || FastImage.resizeMode.contain}
+        style={[{ height: style?.height, width: style?.width }, imageStyle]}
+        onError={() => {
+          setSource(require('@res/fallback.png'))
+        }}
+      />
+      <ActivityIndicator
+        animating={file && file.progress < 1}
+        size="large"
+        color={colors.accent}
+        style={styles.indicator}
+      />
+    </>
+  )
 }
 
-const ArtistImage = React.memo<ArtistIdImageProps>(
+const ArtistImage = React.memo<ArtistCoverArtProps>(props => {
-  ({ artistId, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading, fallbackError }) => {
+  const file = useArtistCoverArtFile(props.artistId)
-    const artistInfo = useArtistInfo(artistId)
 
-    if (!artistInfo) {
+  return <Image file={file} {...props} />
-      return <ArtistImageFallback enableLoading={enableLoading} />
+})
-    }
 
-    const uri = imageSize === 'thumbnail' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
+const CoverArtImage = React.memo<CoverArtProps>(props => {
+  const file = useCoverArtFile(props.coverArt)
 
-    return (
+  return <Image file={file} {...props} />
-      <FastImage
+})
-        source={{ uri }}
-        style={[{ height: style?.height, width: style?.width }, imageStyle]}
-        resizeMode={resizeMode || FastImage.resizeMode.contain}
-        onProgress={enableLoading}
-        onLoadEnd={disableLoading}
-        onError={fallbackError}
-      />
-    )
-  },
-)
 
-const CoverArtImage = React.memo<CoverArtImageProps>(
+const CoverArt: React.FC<CoverArtProps | ArtistCoverArtProps> = props => {
-  ({ coverArt, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading, fallbackError }) => {
+  const viewStyles = [props.style]
-    const coverArtUri = useCoverArtUri()
+  if (props.round) {
-
-    return (
-      <FastImage
-        source={{ uri: coverArtUri(coverArt, imageSize) }}
-        style={[{ height: style?.height, width: style?.width }, imageStyle]}
-        resizeMode={resizeMode || FastImage.resizeMode.contain}
-        onProgress={enableLoading}
-        onLoadEnd={disableLoading}
-        onError={fallbackError}
-      />
-    )
-  },
-)
-
-const CoverArt: React.FC<CoverArtProps> = ({ coverArt, artistId, resizeMode, imageSize, style, imageStyle, round }) => {
-  const [loading, setLoading] = useState(false)
-  const [fallback, setFallback] = useState(false)
-
-  const enableLoading = React.useCallback(() => setLoading(true), [])
-  const disableLoading = React.useCallback(() => setLoading(false), [])
-  const fallbackError = React.useCallback(() => {
-    setFallback(true)
-    setLoading(false)
-  }, [])
-
-  imageSize = imageSize === undefined ? 'thumbnail' : 'original'
-  round = round === undefined ? artistId !== undefined : round
-
-  const viewStyles = [style]
-  if (round) {
     viewStyles.push(styles.round)
   }
 
-  let ImageComponent
+  const coverArtImage = useCallback(() => <CoverArtImage {...(props as CoverArtProps)} />, [props])
-  if (artistId) {
+  const artistImage = useCallback(() => <ArtistImage {...(props as ArtistCoverArtProps)} />, [props])
-    ImageComponent = (
-      <ArtistImage
-        artistId={artistId}
-        imageSize={imageSize}
-        style={style}
-        imageStyle={imageStyle}
-        resizeMode={resizeMode}
-        enableLoading={enableLoading}
-        disableLoading={disableLoading}
-        fallbackError={fallbackError}
-      />
-    )
-  } else {
-    ImageComponent = (
-      <CoverArtImage
-        coverArt={coverArt}
-        imageSize={imageSize}
-        style={style}
-        imageStyle={imageStyle}
-        resizeMode={resizeMode}
-        enableLoading={enableLoading}
-        disableLoading={disableLoading}
-        fallbackError={fallbackError}
-      />
-    )
-  }
 
-  if (fallback) {
+  let ImageComponent
-    ImageComponent = (
+  switch (props.type) {
-      <FastImage
+    case 'artist':
-        source={require('@res/fallback.png')}
+      ImageComponent = artistImage
-        style={[{ height: style?.height, width: style?.width }, imageStyle]}
+      break
-      />
+    default:
-    )
+      ImageComponent = coverArtImage
+      break
   }
 
   return (
     <View style={viewStyles}>
-      {ImageComponent}
+      <ImageComponent />
-      <ActivityIndicator animating={loading} size="large" color={colors.accent} style={styles.indicator} />
     </View>
   )
 }

app/components/ImageGradientBackground.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect, useState } from 'react'
 import { ViewStyle } from 'react-native'
-import FastImage from 'react-native-fast-image'
 import ImageColors from 'react-native-image-colors'
 import { AndroidImageColors } from 'react-native-image-colors/lib/typescript/types'
 import colors from '@app/styles/colors'
@@ -12,28 +11,27 @@ const ImageGradientBackground: React.FC<{
   width?: number | string
   position?: 'relative' | 'absolute'
   style?: ViewStyle
-  imageUri?: string
+  imagePath?: string
-  imageKey?: string
+}> = ({ height, width, position, style, imagePath, children }) => {
-}> = ({ height, width, position, style, imageUri, imageKey, children }) => {
   const [highColor, setHighColor] = useState<string>(colors.gradient.high)
   const navigation = useNavigation()
 
   useEffect(() => {
     async function getColors() {
-      if (imageUri === undefined) {
+      if (imagePath === undefined) {
         return
       }
 
-      const cachedResult = ImageColors.cache.getItem(imageKey ? imageKey : imageUri)
+      const cachedResult = ImageColors.cache.getItem(imagePath)
 
       let res: AndroidImageColors
       if (cachedResult) {
         res = cachedResult as AndroidImageColors
       } else {
-        const path = await FastImage.getCachePath({ uri: imageUri })
+        const path = `file://${imagePath}`
-        res = (await ImageColors.getColors(path ? `file://${path}` : imageUri, {
+        res = (await ImageColors.getColors(path, {
           cache: true,
-          key: imageKey ? imageKey : imageUri,
+          key: imagePath,
         })) as AndroidImageColors
       }
 
@@ -44,7 +42,7 @@ const ImageGradientBackground: React.FC<{
       }
     }
     getColors()
-  }, [imageUri, imageKey])
+  }, [imagePath])
 
   useEffect(() => {
     navigation.setOptions({

app/components/ImageGradientScrollView.tsx

@@ -4,7 +4,7 @@ import dimensions from '@app/styles/dimensions'
 import React from 'react'
 import { ScrollView, ScrollViewProps, useWindowDimensions } from 'react-native'
 
-const ImageGradientScrollView: React.FC<ScrollViewProps & { imageUri?: string; imageKey?: string }> = props => {
+const ImageGradientScrollView: React.FC<ScrollViewProps & { imagePath?: string }> = props => {
   const layout = useWindowDimensions()
 
   const minHeight = layout.height - (dimensions.top() + dimensions.bottom())
@@ -20,7 +20,7 @@ const ImageGradientScrollView: React.FC<ScrollViewProps & { imageUri?: string; i
         },
       ]}
       contentContainerStyle={[{ minHeight }, props.contentContainerStyle]}>
-      <ImageGradientBackground height={minHeight} imageUri={props.imageUri} imageKey={props.imageKey} />
+      <ImageGradientBackground height={minHeight} imagePath={props.imagePath} />
       {props.children}
     </ScrollView>
   )

app/components/ListItem.tsx

@@ -65,7 +65,6 @@ const ListItem: React.FC<{
   showStar = showStar === undefined ? true : showStar
   listStyle = listStyle || 'small'
 
-  const artSource = item.itemType === 'artist' ? { artistId: item.id } : { coverArt: item.coverArt }
   const sizeStyle = listStyle === 'big' ? bigStyles : smallStyles
 
   if (!onPress) {
@@ -148,18 +147,19 @@ const ListItem: React.FC<{
     title = <TitleText title={item.name} />
   }
 
+  const artStyle = { ...styles.art, ...sizeStyle.art }
+  const resizeMode = FastImage.resizeMode.cover
+  let coverArt = <></>
+  if (item.itemType === 'artist') {
+    coverArt = <CoverArt type="artist" artistId={item.id} round={true} style={artStyle} resizeMode={resizeMode} />
+  } else {
+    coverArt = <CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} />
+  }
+
   return (
     <View style={[styles.container, sizeStyle.container]}>
       <PressableComponent>
-        {showArt ? (
+        {showArt ? coverArt : <></>}
-          <CoverArt
-            {...artSource}
-            style={{ ...styles.art, ...sizeStyle.art }}
-            resizeMode={FastImage.resizeMode.cover}
-          />
-        ) : (
-          <></>
-        )}
         <View style={styles.text}>
           {title}
           {subtitle ? (

app/components/NowPlayingBar.tsx

@@ -11,7 +11,7 @@ import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { State } from 'react-native-track-player'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 
-const ProgressBar = () => {
+const ProgressBar = React.memo(() => {
   const { position, duration } = useStore(selectTrackPlayer.progress)
 
   let progress = 0
@@ -25,7 +25,7 @@ const ProgressBar = () => {
       <View style={[progressStyles.right, { flex: 1 - progress }]} />
     </View>
   )
-}
+})
 
 const progressStyles = StyleSheet.create({
   container: {
@@ -40,9 +40,7 @@ const progressStyles = StyleSheet.create({
   },
 })
 
-const NowPlayingBar = () => {
+const Controls = React.memo(() => {
-  const navigation = useNavigation()
-  const track = useStore(selectTrackPlayer.currentTrack)
   const playerState = useStore(selectTrackPlayer.playerState)
   const play = usePlay()
   const pause = usePause()
@@ -61,6 +59,19 @@ const NowPlayingBar = () => {
       break
   }
 
+  return (
+    <View style={styles.controls}>
+      <PressableOpacity onPress={playPauseAction} hitSlop={14}>
+        <IconFA5 name={playPauseIcon} size={28} color="white" />
+      </PressableOpacity>
+    </View>
+  )
+})
+
+const NowPlayingBar = React.memo(() => {
+  const navigation = useNavigation()
+  const track = useStore(selectTrackPlayer.currentTrack)
+
   return (
     <Pressable
       onPress={() => navigation.navigate('now-playing')}
@@ -68,8 +79,9 @@ const NowPlayingBar = () => {
       <ProgressBar />
       <View style={styles.subContainer}>
         <CoverArt
+          type="cover"
           style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
-          coverArt={track?.coverArt || '-1'}
+          coverArt={track?.coverArt}
         />
         <View style={styles.detailsContainer}>
           <Text numberOfLines={1} style={styles.detailsTitle}>
@@ -79,15 +91,11 @@ const NowPlayingBar = () => {
             {track?.artist}
           </Text>
         </View>
-        <View style={styles.controls}>
+        <Controls />
-          <PressableOpacity onPress={playPauseAction} hitSlop={14}>
-            <IconFA5 name={playPauseIcon} size={28} color="white" />
-          </PressableOpacity>
-        </View>
       </View>
     </Pressable>
   )
-}
+})
 
 const styles = StyleSheet.create({
   container: {

app/hooks/music.ts

@@ -1,8 +1,5 @@
 import { selectMusic } from '@app/state/music'
-import { selectSettings } from '@app/state/settings'
 import { Store, useStore } from '@app/state/store'
-import { SubsonicApiClient } from '@app/subsonic/api'
-import { GetCoverArtParams } from '@app/subsonic/params'
 import { useCallback } from 'react'
 
 export const useArtistInfo = (id: string) => {
@@ -11,6 +8,7 @@ export const useArtistInfo = (id: string) => {
 
   if (!artistInfo) {
     fetchArtistInfo(id)
+    return undefined
   }
 
   return artistInfo
@@ -58,21 +56,31 @@ export const useStarred = (id: string, type: string) => {
   )
 }
 
-export const useCoverArtUri = () => {
+export const useCoverArtFile = (coverArt: string = '-1') => {
-  const server = useStore(selectSettings.activeServer)
+  const file = useStore(useCallback((state: Store) => state.cachedCoverArt[coverArt], [coverArt]))
+  const cacheCoverArt = useStore(selectMusic.cacheCoverArt)
 
-  if (!server) {
+  if (!file) {
-    return () => undefined
+    cacheCoverArt(coverArt)
+    return undefined
   }
 
-  const client = new SubsonicApiClient(server)
+  return file
-
+}
-  return (coverArt?: string, size: 'thumbnail' | 'original' = 'thumbnail') => {
+
-    const params: GetCoverArtParams = { id: coverArt || '-1' }
+export const useArtistCoverArtFile = (artistId: string) => {
-    if (size === 'thumbnail') {
+  const artistInfo = useArtistInfo(artistId)
-      params.size = '256'
+  const file = useStore(useCallback((state: Store) => state.cachedArtistArt[artistId], [artistId]))
-    }
+  const cacheArtistArt = useStore(selectMusic.cacheArtistArt)
-
+
-    return client.getCoverArtUri(params)
+  if (!artistInfo) {
-  }
+    return undefined
+  }
+
+  if (!file) {
+    cacheArtistArt(artistId, artistInfo.largeImageUrl)
+    return undefined
+  }
+
+  return file
 }

app/hooks/trackplayer.ts

@@ -1,5 +1,5 @@
-import { useCoverArtUri } from '@app/hooks/music'
 import { Song } from '@app/models/music'
+import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
 import {
   getCurrentTrack,
@@ -191,7 +191,7 @@ export const useSetQueue = () => {
   const getQueueShuffled = useCallback(() => !!useStore.getState().shuffleOrder, [])
   const setQueueContextType = useStore(selectTrackPlayer.setQueueContextType)
   const setQueueContextId = useStore(selectTrackPlayer.setQueueContextId)
-  const coverArtUri = useCoverArtUri()
+  const getCoverArtPath = useStore(selectMusic.getCoverArtPath)
 
   return async (
     songs: Song[],
@@ -211,7 +211,16 @@ export const useSetQueue = () => {
         return
       }
 
-      let queue = songs.map(s => mapSongToTrack(s, coverArtUri))
+      const coverArtPaths: { [coverArt: string]: string } = {}
+      for (const s of songs) {
+        if (!s.coverArt) {
+          continue
+        }
+
+        coverArtPaths[s.coverArt] = await getCoverArtPath(s.coverArt)
+      }
+
+      let queue = songs.map(s => mapSongToTrack(s, coverArtPaths))
 
       if (shuffled) {
         const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack)
@@ -251,12 +260,10 @@ export const useIsPlaying = (contextId: string | undefined, track: number) => {
   const shuffleOrder = useStore(selectTrackPlayer.shuffleOrder)
 
   if (contextId === undefined) {
-    console.log(currentTrackIdx)
     return track === currentTrackIdx
   }
 
   if (shuffleOrder) {
-    console.log('asdf')
     const shuffledTrack = shuffleOrder.findIndex(i => i === track)
     track = shuffledTrack !== undefined ? shuffledTrack : -1
   }
@@ -264,14 +271,14 @@ export const useIsPlaying = (contextId: string | undefined, track: number) => {
   return contextId === queueContextId && track === currentTrackIdx
 }
 
-function mapSongToTrack(song: Song, coverArtUri: (coverArt?: string) => string | undefined): TrackExt {
+function mapSongToTrack(song: Song, coverArtPaths: { [coverArt: string]: string }): TrackExt {
   return {
     id: song.id,
     title: song.title,
     artist: song.artist || 'Unknown Artist',
     album: song.album || 'Unknown Album',
     url: song.streamUri,
-    artwork: coverArtUri(song.coverArt),
+    artwork: song.coverArt ? `file://${coverArtPaths[song.coverArt]}` : require('@res/fallback.png'),
     coverArt: song.coverArt,
     duration: song.duration,
   }

app/models/music.ts

@@ -182,7 +182,7 @@ export function mapChildToSong(child: ChildElement, client: SubsonicApiClient):
   }
 }
 
-export function mapAlbumID3WithSongstoAlbunWithSongs(
+export function mapAlbumID3WithSongstoAlbumWithSongs(
   album: AlbumID3Element,
   songs: ChildElement[],
   client: SubsonicApiClient,

app/screens/ArtistView.tsx

@@ -35,7 +35,12 @@ const AlbumItem = React.memo<{
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
       menuStyle={[styles.albumItem, { width }]}
       triggerOuterWrapperStyle={{ width }}>
-      <CoverArt coverArt={album.coverArt} style={{ height, width }} resizeMode={FastImage.resizeMode.cover} />
+      <CoverArt
+        type="cover"
+        coverArt={album.coverArt}
+        style={{ height, width }}
+        resizeMode={FastImage.resizeMode.cover}
+      />
       <Text style={styles.albumTitle}>{album.name}</Text>
       <Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
     </AlbumContextPressable>
@@ -111,11 +116,10 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
         contentContainerStyle={styles.scrollContent}
         onScroll={onScroll}>
         <CoverArt
+          type="artist"
           artistId={artist.id}
           style={styles.artistCover}
           resizeMode={FastImage.resizeMode.cover}
-          round={false}
-          imageSize="original"
         />
         <View style={styles.titleContainer}>
           <Text style={styles.title}>{artist.name}</Text>

app/screens/Home.tsx

@@ -34,6 +34,7 @@ const AlbumItem = React.memo<{
       triggerWrapperStyle={styles.item}
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
       <CoverArt
+        type="cover"
         coverArt={album.coverArt}
         style={{ height: styles.item.width, width: styles.item.width }}
         resizeMode={FastImage.resizeMode.cover}

app/screens/LibraryAlbums.tsx

@@ -26,6 +26,7 @@ const AlbumItem = React.memo<{
       triggerWrapperStyle={[styles.itemWrapper, { height }]}
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
       <CoverArt
+        type="cover"
         coverArt={album.coverArt}
         style={{ height: size, width: size }}
         resizeMode={FastImage.resizeMode.cover}

app/screens/NowPlayingView.tsx

@@ -107,7 +107,7 @@ const SongCoverArt = () => {
 
   return (
     <View style={coverArtStyles.container}>
-      <CoverArt coverArt={track?.coverArt} style={coverArtStyles.image} imageSize="original" />
+      <CoverArt type="cover" coverArt={track?.coverArt} style={coverArtStyles.image} />
     </View>
   )
 }
@@ -390,9 +390,11 @@ const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
     }
   })
 
+  const imagePath = typeof track?.artwork === 'string' ? track?.artwork.replace('file://', '') : undefined
+
   return (
     <View style={styles.container}>
-      <ImageGradientBackground imageUri={track?.artwork as string} imageKey={`${track?.album}${track?.artist}`} />
+      <ImageGradientBackground imagePath={imagePath} />
       <NowPlayingHeader />
       <View style={styles.content}>
         <SongCoverArt />

app/screens/SongListView.tsx

@@ -4,7 +4,7 @@ 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, useCoverArtUri, usePlaylistWithSongs } from '@app/hooks/music'
+import { useAlbumWithSongs, useCoverArtFile, usePlaylistWithSongs } from '@app/hooks/music'
 import { useSetQueue } from '@app/hooks/trackplayer'
 import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
 import colors from '@app/styles/colors'
@@ -73,16 +73,16 @@ const SongListDetails = React.memo<{
   songList?: AlbumWithSongs | PlaylistWithSongs
   subtitle?: string
 }>(({ songList, subtitle, type }) => {
-  const coverArtUri = useCoverArtUri()
+  const coverArtFile = useCoverArtFile(songList?.coverArt)
 
   if (!songList) {
     return <SongListDetailsFallback />
   }
 
   return (
-    <ImageGradientScrollView imageUri={coverArtUri(songList.coverArt)} style={styles.container}>
+    <ImageGradientScrollView imagePath={coverArtFile?.path} style={styles.container}>
       <View style={styles.content}>
-        <CoverArt coverArt={songList.coverArt} style={styles.cover} imageSize="original" />
+        <CoverArt type="cover" 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/music.ts

@@ -5,7 +5,7 @@ import {
   ArtistInfo,
   HomeLists,
   mapAlbumID3toAlbumListItem,
-  mapAlbumID3WithSongstoAlbunWithSongs,
+  mapAlbumID3WithSongstoAlbumWithSongs,
   mapArtistID3toArtist,
   mapArtistInfo,
   mapChildToSong,
@@ -14,12 +14,24 @@ import {
   PlaylistListItem,
   PlaylistWithSongs,
   SearchResults,
+  Song,
 } from '@app/models/music'
 import { Store } from '@app/state/store'
 import { GetAlbumList2Type, StarParams } from '@app/subsonic/params'
+import PromiseQueue from '@app/util/PromiseQueue'
 import produce from 'immer'
+import RNFS from 'react-native-fs'
 import { GetState, SetState } from 'zustand'
 
+const imageDownloadQueue = new PromiseQueue(5)
+
+export type DownloadFile = {
+  path: string
+  date: number
+  progress: number
+  promise?: Promise<void>
+}
+
 export type MusicSlice = {
   //
   // family-style state
@@ -58,10 +70,42 @@ export type MusicSlice = {
   fetchHomeLists: () => Promise<void>
   clearHomeLists: () => void
 
+  //
+  // downloads
+  //
+  coverArtDir?: string
+  artistArtDir?: string
+  songsDir?: string
+
+  cachedCoverArt: { [coverArt: string]: DownloadFile }
+  downloadedCoverArt: { [coverArt: string]: DownloadFile }
+
+  coverArtRequests: { [coverArt: string]: Promise<void> }
+
+  cacheCoverArt: (coverArt: string) => Promise<void>
+  getCoverArtPath: (coverArt: string) => Promise<string>
+
+  cachedArtistArt: { [artistId: string]: DownloadFile }
+  downloadedArtistArt: { [artistId: string]: DownloadFile }
+
+  cacheArtistArt: (artistId: string, url?: string) => Promise<void>
+
+  cachedSongs: { [id: string]: DownloadFile }
+  downloadedSongs: { [id: string]: DownloadFile }
+
+  //
+  // actions, etc.
+  //
   starredSongs: { [id: string]: boolean }
   starredAlbums: { [id: string]: boolean }
   starredArtists: { [id: string]: boolean }
   starItem: (id: string, type: string, unstar?: boolean) => Promise<void>
+
+  albumCoverArt: { [id: string]: string | undefined }
+  albumCoverArtRequests: { [id: string]: Promise<void> }
+  fetchAlbumCoverArt: (id: string) => Promise<void>
+  getAlbumCoverArt: (id: string | undefined) => Promise<string | undefined>
+  mapSongCoverArtFromAlbum: (songs: Song[]) => Promise<Song[]>
 }
 
 export const selectMusic = {
@@ -91,7 +135,12 @@ export const selectMusic = {
   fetchHomeLists: (store: MusicSlice) => store.fetchHomeLists,
   clearHomeLists: (store: MusicSlice) => store.clearHomeLists,
 
+  cacheCoverArt: (store: MusicSlice) => store.cacheCoverArt,
+  getCoverArtPath: (store: MusicSlice) => store.getCoverArtPath,
+  cacheArtistArt: (store: MusicSlice) => store.cacheArtistArt,
+
   starItem: (store: MusicSlice) => store.starItem,
+  fetchAlbumCoverArt: (store: MusicSlice) => store.fetchAlbumCoverArt,
 }
 
 function reduceStarred(
@@ -129,9 +178,12 @@ export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): Mu
         client,
       )
 
+      artistInfo.topSongs = await get().mapSongCoverArtFromAlbum(artistInfo.topSongs)
+
       set(
         produce<MusicSlice>(state => {
           state.artistInfo[id] = artistInfo
+
           state.starredSongs = reduceStarred(state.starredSongs, artistInfo.topSongs)
           state.starredArtists = reduceStarred(state.starredArtists, [artistInfo])
           state.starredAlbums = reduceStarred(state.starredAlbums, artistInfo.albums)
@@ -153,7 +205,9 @@ export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): Mu
 
     try {
       const response = await client.getAlbum({ id })
-      const album = mapAlbumID3WithSongstoAlbunWithSongs(response.data.album, response.data.songs, client)
+      const album = mapAlbumID3WithSongstoAlbumWithSongs(response.data.album, response.data.songs, client)
+
+      album.songs = await get().mapSongCoverArtFromAlbum(album.songs)
 
       set(
         produce<MusicSlice>(state => {
@@ -180,6 +234,8 @@ export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): Mu
       const response = await client.getPlaylist({ id })
       const playlist = mapPlaylistWithSongs(response.data.playlist, client)
 
+      playlist.songs = await get().mapSongCoverArtFromAlbum(playlist.songs)
+
       set(
         produce<MusicSlice>(state => {
           state.playlistsWithSongs[id] = playlist
@@ -293,12 +349,13 @@ export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): Mu
 
     try {
       const response = await client.search3({ query })
+      const songs = await get().mapSongCoverArtFromAlbum(response.data.songs.map(a => mapChildToSong(a, client)))
       set(
         produce<MusicSlice>(state => {
           state.searchResults = {
             artists: response.data.artists.map(mapArtistID3toArtist),
             albums: response.data.albums.map(mapAlbumID3toAlbumListItem),
-            songs: response.data.songs.map(a => mapChildToSong(a, client)),
+            songs: songs,
           }
           state.starredSongs = reduceStarred(state.starredSongs, state.searchResults.songs)
           state.starredArtists = reduceStarred(state.starredArtists, state.searchResults.artists)
@@ -359,6 +416,110 @@ export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): Mu
     set({ homeLists: {} })
   },
 
+  cachedCoverArt: {},
+  downloadedCoverArt: {},
+
+  coverArtRequests: {},
+
+  cacheCoverArt: async coverArt => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    const path = `${get().coverArtDir}/${coverArt}`
+
+    const existing = get().cachedCoverArt[coverArt]
+    if (existing) {
+      if (existing.promise !== undefined) {
+        return await existing.promise
+      } else {
+        return
+      }
+    }
+
+    const promise = imageDownloadQueue
+      .enqueue<void>(() =>
+        RNFS.downloadFile({
+          fromUrl: client.getCoverArtUri({ id: coverArt }),
+          toFile: path,
+        }).promise.then(() => new Promise(resolve => setTimeout(resolve, 100))),
+      )
+      .then(() => {
+        set(
+          produce<MusicSlice>(state => {
+            state.cachedCoverArt[coverArt].progress = 1
+            delete state.cachedCoverArt[coverArt].promise
+          }),
+        )
+      })
+    set(
+      produce<MusicSlice>(state => {
+        state.cachedCoverArt[coverArt] = {
+          path,
+          date: Date.now(),
+          progress: 0,
+          promise,
+        }
+      }),
+    )
+    return await promise
+  },
+
+  getCoverArtPath: async coverArt => {
+    const existing = get().cachedCoverArt[coverArt]
+    if (existing) {
+      if (existing.promise) {
+        await existing.promise
+      }
+      return existing.path
+    }
+
+    await get().cacheCoverArt(coverArt)
+    return get().cachedCoverArt[coverArt].path
+  },
+
+  cachedArtistArt: {},
+  downloadedArtistArt: {},
+
+  cacheArtistArt: async (artistId, url) => {
+    if (!url) {
+      return
+    }
+
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    const path = `${get().artistArtDir}/${artistId}`
+
+    set(
+      produce<MusicSlice>(state => {
+        state.cachedArtistArt[artistId] = {
+          path,
+          date: Date.now(),
+          progress: 0,
+        }
+      }),
+    )
+    await imageDownloadQueue.enqueue(
+      () =>
+        RNFS.downloadFile({
+          fromUrl: url,
+          toFile: path,
+        }).promise,
+    )
+    set(
+      produce<MusicSlice>(state => {
+        state.cachedArtistArt[artistId].progress = 1
+      }),
+    )
+  },
+
+  cachedSongs: {},
+  downloadedSongs: {},
+
   starredSongs: {},
   starredAlbums: {},
   starredArtists: {},
@@ -418,4 +579,70 @@ export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): Mu
       setStarred(unstar)
     }
   },
+
+  albumCoverArt: {},
+  albumCoverArtRequests: {},
+
+  fetchAlbumCoverArt: async id => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    const inProgress = get().albumCoverArtRequests[id]
+    if (inProgress !== undefined) {
+      return await inProgress
+    }
+
+    const promise = new Promise<void>(async resolve => {
+      try {
+        const response = await client.getAlbum({ id })
+        set(
+          produce<MusicSlice>(state => {
+            state.albumCoverArt[id] = response.data.album.coverArt
+          }),
+        )
+      } finally {
+        resolve()
+      }
+    }).then(() => {
+      set(
+        produce<MusicSlice>(state => {
+          delete state.albumCoverArtRequests[id]
+        }),
+      )
+    })
+    set(
+      produce<MusicSlice>(state => {
+        state.albumCoverArtRequests[id] = promise
+      }),
+    )
+
+    return await promise
+  },
+
+  getAlbumCoverArt: async id => {
+    if (!id) {
+      return
+    }
+
+    const existing = get().albumCoverArt[id]
+    if (existing) {
+      return existing
+    }
+
+    await get().fetchAlbumCoverArt(id)
+    return get().albumCoverArt[id]
+  },
+
+  mapSongCoverArtFromAlbum: async songs => {
+    const mapped: Song[] = []
+    for (const s of songs) {
+      mapped.push({
+        ...s,
+        coverArt: await get().getAlbumCoverArt(s.albumId),
+      })
+    }
+    return mapped
+  },
 })

app/state/settings.ts

@@ -2,13 +2,27 @@ import { AppSettings, Server } from '@app/models/settings'
 import { Store } from '@app/state/store'
 import { SubsonicApiClient } from '@app/subsonic/api'
 import produce from 'immer'
+import RNFS from 'react-native-fs'
 import { GetState, SetState } from 'zustand'
 
+async function mkdir(path: string): Promise<void> {
+  const exists = await RNFS.exists(path)
+  if (exists) {
+    const isDir = (await RNFS.stat(path)).isDirectory()
+    if (!isDir) {
+      throw new Error(`path exists and is not a directory: ${path}`)
+    } else {
+      return
+    }
+  }
+
+  return await RNFS.mkdir(path)
+}
+
 export type SettingsSlice = {
   settings: AppSettings
   client?: SubsonicApiClient
-  createClient: (id?: string) => void
+  setActiveServer: (id: string | undefined, force?: boolean) => Promise<void>
-  setActiveServer: (id?: string) => void
   getActiveServer: () => Server | undefined
   setServers: (servers: Server[]) => void
 }
@@ -20,50 +34,51 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
       lists: ['recent', 'random', 'frequent', 'starred'],
     },
   },
-  createClient: (id?: string) => {
+  setActiveServer: async (id, force) => {
-    if (!id) {
-      set({ client: undefined })
-      return
-    }
-
-    const server = get().getActiveServer()
-    if (!server) {
-      set({ client: undefined })
-      return
-    }
-
-    set({ client: new SubsonicApiClient(server) })
-  },
-  setActiveServer: id => {
     const servers = get().settings.servers
     const currentActiveServerId = get().settings.activeServer
     const newActiveServer = servers.find(s => s.id === id)
 
     if (!newActiveServer) {
+      set({
+        client: undefined,
+        coverArtDir: undefined,
+        artistArtDir: undefined,
+        songsDir: undefined,
+      })
       return
     }
-    if (currentActiveServerId === id) {
+    if (currentActiveServerId === id && !force) {
       return
     }
 
+    const coverArtDir = `${RNFS.DocumentDirectoryPath}/cover-art/${id}`
+    const artistArtDir = `${RNFS.DocumentDirectoryPath}/artist-art/${id}`
+    const songsDir = `${RNFS.DocumentDirectoryPath}/songs/${id}`
+    await mkdir(coverArtDir)
+    await mkdir(artistArtDir)
+    await mkdir(songsDir)
+
     set(
-      produce<SettingsSlice>(state => {
+      produce<Store>(state => {
         state.settings.activeServer = id
         state.client = new SubsonicApiClient(newActiveServer)
+        state.coverArtDir = coverArtDir
+        state.artistArtDir = artistArtDir
+        state.songsDir = songsDir
       }),
     )
   },
   getActiveServer: () => get().settings.servers.find(s => s.id === get().settings.activeServer),
-  setServers: servers =>
+  setServers: servers => {
     set(
       produce<SettingsSlice>(state => {
         state.settings.servers = servers
-        const activeServer = servers.find(s => s.id === state.settings.activeServer)
-        if (activeServer) {
-          state.client = new SubsonicApiClient(activeServer)
-        }
       }),
-    ),
+    )
+    const activeServer = servers.find(s => s.id === get().settings.activeServer)
+    get().setActiveServer(activeServer?.id)
+  },
 })
 
 export const selectSettings = {

app/state/store.ts

@@ -45,8 +45,8 @@ export const useStore = create<Store>(
       getStorage: () => storage,
       whitelist: ['settings'],
       onRehydrateStorage: _preState => {
-        return (postState, _error) => {
+        return async (postState, _error) => {
-          postState?.createClient(postState.settings.activeServer)
+          await postState?.setActiveServer(postState.settings.activeServer, true)
           postState?.setHydrated(true)
         }
       },

app/subsonic/api.ts

@@ -83,7 +83,7 @@ export class SubsonicApiClient {
     }
 
     const url = `${this.address}/rest/${method}?${query}`
-    // console.log(url)
+    console.log(`${method}: ${url}`)
     return url
   }