From b908dd87f6531af0e60cec81260e0c44a1b2c100 Mon Sep 17 00:00:00 2001
From: austinried <4966622+austinried@users.noreply.github.com>
Date: Sun, 4 Jul 2021 10:43:50 +0900
Subject: [PATCH] probably unnecessery image cache optimizations

---
 src/components/NowPlayingLayout.tsx               |  2 +-
 src/components/common/AlbumView.tsx               |  3 ++-
 src/components/common/ImageGradientBackground.tsx | 13 +++++++++----
 src/components/common/ImageGradientScrollView.tsx |  4 ++--
 src/hooks/trackplayer.ts                          |  1 +
 src/models/music.ts                               |  1 +
 src/state/music.ts                                |  1 +
 yarn.lock                                         |  2 +-
 8 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/NowPlayingLayout.tsx b/src/components/NowPlayingLayout.tsx
index 1532871..8987dc8 100644
--- a/src/components/NowPlayingLayout.tsx
+++ b/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 />
diff --git a/src/components/common/AlbumView.tsx b/src/components/common/AlbumView.tsx
index 49c00d0..ba96662 100644
--- a/src/components/common/AlbumView.tsx
+++ b/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,
       }}
diff --git a/src/components/common/ImageGradientBackground.tsx b/src/components/common/ImageGradientBackground.tsx
index ac45364..745c1b9 100644
--- a/src/components/common/ImageGradientBackground.tsx
+++ b/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({
diff --git a/src/components/common/ImageGradientScrollView.tsx b/src/components/common/ImageGradientScrollView.tsx
index 727e623..ebe8ab7 100644
--- a/src/components/common/ImageGradientScrollView.tsx
+++ b/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>
   );
diff --git a/src/hooks/trackplayer.ts b/src/hooks/trackplayer.ts
index b710edf..059b247 100644
--- a/src/hooks/trackplayer.ts
+++ b/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,
   };
 }
diff --git a/src/models/music.ts b/src/models/music.ts
index 371d77a..9d18c1f 100644
--- a/src/models/music.ts
+++ b/src/models/music.ts
@@ -61,6 +61,7 @@ export interface Song {
 
   streamUri: string;
   coverArtUri?: string;
+  coverArtThumbUri?: string;
 }
 
 export type DownloadedSong = {
diff --git a/src/state/music.ts b/src/state/music.ts
index 2695cb1..4a98ad3 100644
--- a/src/state/music.ts
+++ b/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,
   };
 }
 
diff --git a/yarn.lock b/yarn.lock
index 26665e9..d4b8e8a 100644
--- a/yarn.lock
+++ b/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"