remove/disable download options

app/components/ContextMenu.tsx

@@ -13,7 +13,7 @@ import FastImage from 'react-native-fast-image'
 import { Menu, MenuOption, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu'
 import IconFA from 'react-native-vector-icons/FontAwesome'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
-import IconMat from 'react-native-vector-icons/MaterialIcons'
+// import IconMat from 'react-native-vector-icons/MaterialIcons'
 import CoverArt from './CoverArt'
 import Star from './Star'
 
@@ -200,11 +200,11 @@ const OptionViewAlbum = React.memo<{
   )
 })
 
-const OptionDownload = React.memo<{
-  itemType: string
-}>(({ itemType }) => (
-  <ContextMenuIconTextOption IconComponent={IconMat} name="file-download" size={26} text={`Download ${itemType}`} />
-))
+// const OptionDownload = React.memo<{
+//   itemType: string
+// }>(({ itemType }) => (
+//   <ContextMenuIconTextOption IconComponent={IconMat} name="file-download" size={26} text={`Download ${itemType}`} />
+// ))
 
 export type AlbumContextPressableProps = ContextMenuProps & {
   album: AlbumListItem
@@ -222,7 +222,7 @@ export const AlbumContextPressable: React.FC<AlbumContextPressableProps> = props
         <>
           <OptionStar id={album.id} type={album.itemType} />
           <OptionViewArtist artist={album.artist} artistId={album.artistId} navigation={navigation} />
-          <OptionDownload itemType={album.itemType} />
+          {/* <OptionDownload itemType={album.itemType} /> */}
         </>
       }>
       {children}
@@ -247,7 +247,7 @@ export const SongContextPressable: React.FC<SongContextPressableProps> = props =
           <OptionStar id={song.id} type={song.itemType} />
           <OptionViewArtist artist={song.artist} artistId={song.artistId} navigation={navigation} />
           <OptionViewAlbum album={song.album} albumId={song.albumId} navigation={navigation} />
-          <OptionDownload itemType={song.itemType} />
+          {/* <OptionDownload itemType={song.itemType} /> */}
         </>
       }>
       {children}
@@ -269,7 +269,7 @@ export const ArtistContextPressable: React.FC<ArtistContextPressableProps> = pro
       menuOptions={
         <>
           <OptionStar id={artist.id} type={artist.itemType} />
-          <OptionDownload itemType={artist.itemType} />
+          {/* <OptionDownload itemType={artist.itemType} /> */}
         </>
       }>
       {children}

app/components/ImageGradientBackground.tsx

@@ -18,6 +18,7 @@ const ImageGradientBackground: React.FC<{
 
   useEffect(() => {
     async function getColors() {
+      console.log(`imagePath: ${imagePath}`)
       if (imagePath === undefined) {
         return
       }
@@ -26,6 +27,7 @@ const ImageGradientBackground: React.FC<{
 
       let res: AndroidImageColors
       if (cachedResult) {
+        console.log(`cachedResult: ${JSON.stringify(cachedResult)}`)
         res = cachedResult as AndroidImageColors
       } else {
         const path = `file://${imagePath}`
@@ -33,12 +35,21 @@ const ImageGradientBackground: React.FC<{
           cache: true,
           key: imagePath,
         })) as AndroidImageColors
+        console.log(`res: ${JSON.stringify(res)}`)
       }
 
       if (res.muted && res.muted !== '#000000') {
         setHighColor(res.muted)
       } else if (res.darkMuted && res.darkMuted !== '#000000') {
         setHighColor(res.darkMuted)
+      } else if (res.lightMuted && res.lightMuted !== '#000000') {
+        setHighColor(res.lightMuted)
+      } else if (res.vibrant && res.vibrant !== '#000000') {
+        setHighColor(res.vibrant)
+      } else if (res.darkVibrant && res.darkVibrant !== '#000000') {
+        setHighColor(res.darkVibrant)
+      } else if (res.lightVibrant && res.lightVibrant !== '#000000') {
+        setHighColor(res.lightVibrant)
       }
     }
     getColors()

app/components/ListItem.tsx

@@ -26,12 +26,10 @@ const TitleTextSong = React.memo<{
   return (
     <View style={styles.textLine}>
       <Text style={[styles.title, { color: playing ? colors.accent : colors.text.primary }]}>
-        {playing ? (
+        {playing && (
           <View style={styles.playingIcon}>
             <IconFA5 name="play" size={9} color={colors.accent} />
           </View>
-        ) : (
-          <></>
         )}
         {title}
       </Text>
@@ -159,35 +157,29 @@ const ListItem: React.FC<{
   return (
     <View style={[styles.container, sizeStyle.container]}>
       <PressableComponent>
-        {showArt ? coverArt : <></>}
+        {showArt && coverArt}
         <View style={styles.text}>
           {title}
-          {subtitle ? (
+          {subtitle !== undefined && (
             <View style={styles.textLine}>
-              {starred ? (
+              {false && (
                 <IconMat
                   name="file-download-done"
                   size={17}
                   color={colors.text.secondary}
                   style={styles.downloadedIcon}
                 />
-              ) : (
-                <></>
               )}
               <Text style={styles.subtitle}>{subtitle}</Text>
             </View>
-          ) : (
-            <></>
           )}
         </View>
       </PressableComponent>
       <View style={styles.controls}>
-        {showStar ? (
+        {showStar && (
           <PressableOpacity onPress={toggleStarred} style={styles.controlItem}>
             <Star size={26} starred={starred} />
           </PressableOpacity>
-        ) : (
-          <></>
         )}
       </View>
     </View>

app/components/ListPlayerControls.tsx

@@ -22,7 +22,10 @@ const ListPlayerControls = React.memo<{
   return (
     <View style={[styles.controls, style]}>
       <View style={styles.controlsSide}>
-        <Button buttonStyle={downloaded ? 'highlight' : 'hollow'} onPress={() => setDownloaded(!downloaded)}>
+        <Button
+          disabled={true}
+          buttonStyle={downloaded ? 'highlight' : 'hollow'}
+          onPress={() => setDownloaded(!downloaded)}>
           {downloaded ? (
             <IconMat name="file-download-done" size={26} color={colors.text.primary} />
           ) : (

app/hooks/music.ts

@@ -106,10 +106,6 @@ export const useCoverArtFile = (coverArt: string = '-1') => {
     }
   }, [cacheItem, client, coverArt, file])
 
-  // if (file && request && request.promise !== undefined) {
-  //   return
-  // }
-
   return { file, request }
 }
 
@@ -125,9 +121,5 @@ export const useArtistArtFile = (artistId: string) => {
     }
   }, [artistId, artistInfo, artistInfo?.largeImageUrl, cacheItem, file])
 
-  // if (file && request && request.promise !== undefined) {
-  //   return
-  // }
-
   return { file, request }
 }

app/hooks/trackplayer.ts

@@ -191,7 +191,7 @@ export const useSetQueue = () => {
   const getQueueShuffled = useCallback(() => !!useStore.getState().shuffleOrder, [])
   const setQueueContextType = useStore(selectTrackPlayer.setQueueContextType)
   const setQueueContextId = useStore(selectTrackPlayer.setQueueContextId)
-  const getCoverArtPath = useStore(selectCache.getCoverArtPath)
+  const fetchCoverArtFilePath = useStore(selectCache.fetchCoverArtFilePath)
 
   return async (
     songs: Song[],
@@ -217,7 +217,7 @@ export const useSetQueue = () => {
           continue
         }
 
-        coverArtPaths[s.coverArt] = await getCoverArtPath(s.coverArt)
+        coverArtPaths[s.coverArt] = await fetchCoverArtFilePath(s.coverArt)
       }
 
       let queue = songs.map(s => mapSongToTrack(s, coverArtPaths))

app/state/cache.ts

@@ -5,7 +5,8 @@ import RNFS from 'react-native-fs'
 import { GetState, SetState } from 'zustand'
 import { Store } from './store'
 
-const imageDownloadQueue = new PromiseQueue(10)
+const imageDownloadQueue = new PromiseQueue(20)
+const songDownloadQueue = new PromiseQueue(1)
 
 export type CacheDownload = CacheFile & CacheRequest
 
@@ -13,7 +14,7 @@ export type CacheDirsByServer = Record<string, Record<CacheItemTypeKey, string>>
 export type CacheFilesByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheFile>>>
 export type CacheRequestsByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheRequest>>>
 
-// export type CacheItemsDb = Record<
+// export type DownloadedItemsByServer = Record<
 //   string,
 //   {
 //     songs: { [songId: string]: DownloadedSong }
@@ -26,22 +27,30 @@ export type CacheRequestsByServer = Record<string, Record<CacheItemTypeKey, Reco
 export type CacheSlice = {
   cacheItem: (key: CacheItemTypeKey, itemId: string, url: string | (() => string | Promise<string>)) => Promise<void>
 
-  // cache: CacheItemsDb
+  // cache: DownloadedItemsByServer
   cacheDirs: CacheDirsByServer
   cacheFiles: CacheFilesByServer
   cacheRequests: CacheRequestsByServer
 
-  getCoverArtPath: (coverArt: string) => Promise<string | undefined>
+  fetchCoverArtFilePath: (coverArt: string) => Promise<string | undefined>
 }
 
 export const selectCache = {
   cacheItem: (store: CacheSlice) => store.cacheItem,
-  getCoverArtPath: (store: CacheSlice) => store.getCoverArtPath,
+  fetchCoverArtFilePath: (store: CacheSlice) => store.fetchCoverArtFilePath,
+
+  songCacheDir: (store: Store) => {
+    const activeServerId = store.settings.activeServer
+    if (!activeServerId) {
+      return
+    }
+
+    return store.cacheDirs[activeServerId].song
+  },
 }
 
 export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): CacheSlice => ({
   // cache: {},
-
   cacheDirs: {},
   cacheFiles: {},
   cacheRequests: {},
@@ -58,12 +67,8 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
     }
 
     const inProgress = get().cacheRequests[activeServerId][key][itemId]
-    if (inProgress) {
-      if (inProgress.promise !== undefined) {
-        return await inProgress.promise
-      } else {
-        return
-      }
+    if (inProgress && inProgress.promise !== undefined) {
+      return await inProgress.promise
     }
 
     const existing = get().cacheFiles[activeServerId][key][itemId]
@@ -75,22 +80,41 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
     const urlResult = typeof url === 'string' ? url : url()
     const fromUrl = typeof urlResult === 'string' ? urlResult : await urlResult
 
-    const promise = imageDownloadQueue
-      .enqueue(
-        () =>
-          RNFS.downloadFile({
-            fromUrl,
-            toFile: path,
-          }).promise,
-      )
-      .then(() => {
-        set(
-          produce<CacheSlice>(state => {
-            state.cacheRequests[activeServerId][key][itemId].progress = 1
-            delete state.cacheRequests[activeServerId][key][itemId].promise
-          }),
-        )
+    const queue = key === 'song' ? songDownloadQueue : imageDownloadQueue
+
+    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]
+            }),
+          )
+        }),
+    )
     set(
       produce<Store>(state => {
         state.cacheFiles[activeServerId][key][itemId] = {
@@ -107,7 +131,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
     return await promise
   },
 
-  getCoverArtPath: async coverArt => {
+  fetchCoverArtFilePath: async coverArt => {
     const client = get().client
     if (!client) {
       return
@@ -128,6 +152,6 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
     }
 
     await get().cacheItem('coverArt', coverArt, () => client.getCoverArtUri({ id: coverArt }))
-    return get().cacheFiles[activeServerId].coverArt[coverArt].path
+    return `file://${get().cacheFiles[activeServerId].coverArt[coverArt].path}`
   },
 })