probably unnecessery image cache optimizations

src/components/NowPlayingLayout.tsx

@@ -113,7 +113,7 @@ const NowPlayingLayout = () => {
         flex: 1,
         paddingTop: StatusBar.currentHeight,
       }}>
-      <ImageGradientBackground imageUri={track?.artwork as string} />
+      <ImageGradientBackground imageUri={track?.artworkThumb as string} imageKey={`${track?.album}${track?.artist}`} />
       <NowPlayingHeader />
       <SongCoverArt />
       <SongInfo />

src/components/common/AlbumView.tsx

@@ -103,7 +103,8 @@ const AlbumDetails: React.FC<{
 
   return (
     <ImageGradientScrollView
-      imageUri={album.coverArtUri}
+      imageUri={album.coverArtThumbUri}
+      imageKey={`${album.name}${album.artist}`}
       style={{
         flex: 1,
       }}

src/components/common/ImageGradientBackground.tsx

@@ -1,6 +1,7 @@
 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 '../../styles/colors';
@@ -12,7 +13,8 @@ const ImageGradientBackground: React.FC<{
   position?: 'relative' | 'absolute';
   style?: ViewStyle;
   imageUri?: string;
-}> = ({ height, width, position, style, imageUri, children }) => {
+  imageKey?: string;
+}> = ({ height, width, position, style, imageUri, imageKey, children }) => {
   const [highColor, setHighColor] = useState<string>(colors.gradient.high);
   const navigation = useNavigation();
 
@@ -22,13 +24,16 @@ const ImageGradientBackground: React.FC<{
         return;
       }
 
+      const cachedResult = ImageColors.cache.getItem(imageKey ? imageKey : imageUri);
+
       let res: AndroidImageColors;
-      const cachedResult = ImageColors.cache.getItem(imageUri);
       if (cachedResult) {
         res = cachedResult as AndroidImageColors;
       } else {
-        res = (await ImageColors.getColors(imageUri, {
+        const path = await FastImage.getCachePath({ uri: imageUri });
+        res = (await ImageColors.getColors(path ? `file://${path}` : imageUri, {
           cache: true,
+          key: imageKey ? imageKey : imageUri,
         })) as AndroidImageColors;
       }
 
@@ -39,7 +44,7 @@ const ImageGradientBackground: React.FC<{
       }
     }
     getColors();
-  }, [imageUri]);
+  }, [imageUri, imageKey]);
 
   useEffect(() => {
     navigation.setOptions({

src/components/common/ImageGradientScrollView.tsx

@@ -3,7 +3,7 @@ import { LayoutRectangle, ScrollView, ScrollViewProps } from 'react-native';
 import colors from '../../styles/colors';
 import ImageGradientBackground from './ImageGradientBackground';
 
-const ImageGradientScrollView: React.FC<ScrollViewProps & { imageUri?: string }> = props => {
+const ImageGradientScrollView: React.FC<ScrollViewProps & { imageUri?: string; imageKey?: string }> = props => {
   const [layout, setLayout] = useState<LayoutRectangle | undefined>(undefined);
 
   props.style = props.style || {};
@@ -21,7 +21,7 @@ const ImageGradientScrollView: React.FC<ScrollViewProps & { imageUri?: string }>
       onLayout={event => {
         setLayout(event.nativeEvent.layout);
       }}>
-      <ImageGradientBackground height={layout?.height} imageUri={props.imageUri} />
+      <ImageGradientBackground height={layout?.height} imageUri={props.imageUri} imageKey={props.imageKey} />
       {props.children}
     </ScrollView>
   );

src/hooks/trackplayer.ts

@@ -11,6 +11,7 @@ function mapSongToTrack(song: Song, queueName: string): Track {
     artist: song.artist || 'Unknown Artist',
     url: song.streamUri,
     artwork: song.coverArtUri,
+    artworkThumb: song.coverArtThumbUri,
     duration: song.duration,
   };
 }

src/models/music.ts

@@ -61,6 +61,7 @@ export interface Song {
 
   streamUri: string;
   coverArtUri?: string;
+  coverArtThumbUri?: string;
 }
 
 export type DownloadedSong = {

src/state/music.ts

@@ -188,6 +188,7 @@ function mapChildToSong(child: ChildElement, client: SubsonicApiClient): Song {
     ...child,
     streamUri: client.streamUri({ id: child.id }),
     coverArtUri: child.coverArt ? client.getCoverArtUri({ id: child.coverArt }) : undefined,
+    coverArtThumbUri: child.coverArt ? client.getCoverArtUri({ id: child.coverArt, size: '256' }) : undefined,
   };
 }
 

yarn.lock

@@ -5401,7 +5401,7 @@ react-native-codegen@^0.0.6:
 
 "react-native-fast-image@https://github.com/austinried/react-native-fast-image":
   version "8.3.4"
-  resolved "https://github.com/austinried/react-native-fast-image#65b70ba8f21971265c56e4adba4981a9bbb6499a"
+  resolved "https://github.com/austinried/react-native-fast-image#2aa1ec7425e70927e179640fc8eb2a7c268357a3"
 
 react-native-fs@^2.18.0:
   version "2.18.0"