From a151fe299e490abe21f2b361a702f192804086ac Mon Sep 17 00:00:00 2001
From: austinried <4966622+austinried@users.noreply.github.com>
Date: Sat, 3 Jul 2021 22:59:38 +0900
Subject: [PATCH] gradient working better now/in album view

title bar now also uses gradient color
---
 src/components/NowPlayingLayout.tsx           | 66 ++-----------------
 src/components/common/AlbumView.tsx           |  7 +-
 .../common/ImageGradientBackground.tsx        | 65 ++++++++++++++++++
 .../common/ImageGradientScrollView.tsx        | 30 +++++++++
 4 files changed, 103 insertions(+), 65 deletions(-)
 create mode 100644 src/components/common/ImageGradientBackground.tsx
 create mode 100644 src/components/common/ImageGradientScrollView.tsx

diff --git a/src/components/NowPlayingLayout.tsx b/src/components/NowPlayingLayout.tsx
index 51cf6ad..1532871 100644
--- a/src/components/NowPlayingLayout.tsx
+++ b/src/components/NowPlayingLayout.tsx
@@ -1,13 +1,11 @@
 import { useAtomValue } from 'jotai/utils';
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, View, StatusBar, useWindowDimensions } from 'react-native';
+import React from 'react';
+import { StatusBar, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import { currentQueueNameAtom, currentTrackAtom } from '../state/trackplayer';
-import colors from '../styles/colors';
 import text from '../styles/text';
 import CoverArt from './common/CoverArt';
-import GradientBackground from './common/GradientBackground';
-import ImageColors from 'react-native-image-colors';
+import ImageGradientBackground from './common/ImageGradientBackground';
 
 const NowPlayingHeader = () => {
   const queueName = useAtomValue(currentQueueNameAtom);
@@ -106,61 +104,8 @@ const infoStyles = StyleSheet.create({
   },
 });
 
-interface AndroidImageColors {
-  dominant?: string;
-  average?: string;
-  vibrant?: string;
-  darkVibrant?: string;
-  lightVibrant?: string;
-  darkMuted?: string;
-  lightMuted?: string;
-  muted?: string;
-  platform: 'android';
-}
-
-interface IOSImageColors {
-  background: string;
-  primary: string;
-  secondary: string;
-  detail: string;
-  quality: Config['quality'];
-  platform: 'ios';
-}
-
-interface Config {
-  fallback?: string;
-  pixelSpacing?: number;
-  quality?: 'lowest' | 'low' | 'high' | 'highest';
-  cache?: boolean;
-  key?: string;
-}
-
-declare type ImageColorsResult = AndroidImageColors | IOSImageColors;
-
 const NowPlayingLayout = () => {
   const track = useAtomValue(currentTrackAtom);
-  const [imageColors, setImageColors] = useState<ImageColorsResult | undefined>(undefined);
-  const ica = imageColors as AndroidImageColors;
-
-  useEffect(() => {
-    async function getColors() {
-      if (track?.artwork === undefined) {
-        return;
-      }
-
-      const cachedResult = ImageColors.cache.getItem(track.artwork as string);
-      if (cachedResult) {
-        setImageColors(cachedResult);
-        return;
-      }
-
-      const result = await ImageColors.getColors(track.artwork as string, {
-        cache: true,
-      });
-      setImageColors(result);
-    }
-    getColors();
-  }, [track]);
 
   return (
     <View
@@ -168,10 +113,7 @@ const NowPlayingLayout = () => {
         flex: 1,
         paddingTop: StatusBar.currentHeight,
       }}>
-      <GradientBackground
-        colors={[ica ? (ica.muted as string) : colors.gradient.high, colors.gradient.low]}
-        locations={[0.1, 1.0]}
-      />
+      <ImageGradientBackground imageUri={track?.artwork as string} />
       <NowPlayingHeader />
       <SongCoverArt />
       <SongInfo />
diff --git a/src/components/common/AlbumView.tsx b/src/components/common/AlbumView.tsx
index 53c04ef..49c00d0 100644
--- a/src/components/common/AlbumView.tsx
+++ b/src/components/common/AlbumView.tsx
@@ -18,7 +18,7 @@ import text from '../../styles/text';
 import AlbumArt from './AlbumArt';
 import Button from './Button';
 import GradientBackground from './GradientBackground';
-import GradientScrollView from './GradientScrollView';
+import ImageGradientScrollView from './ImageGradientScrollView';
 
 const SongItem: React.FC<{
   id: string;
@@ -102,7 +102,8 @@ const AlbumDetails: React.FC<{
   }
 
   return (
-    <GradientScrollView
+    <ImageGradientScrollView
+      imageUri={album.coverArtUri}
       style={{
         flex: 1,
       }}
@@ -166,7 +167,7 @@ const AlbumDetails: React.FC<{
             />
           ))}
       </View>
-    </GradientScrollView>
+    </ImageGradientScrollView>
   );
 };
 
diff --git a/src/components/common/ImageGradientBackground.tsx b/src/components/common/ImageGradientBackground.tsx
new file mode 100644
index 0000000..ac45364
--- /dev/null
+++ b/src/components/common/ImageGradientBackground.tsx
@@ -0,0 +1,65 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useEffect, useState } from 'react';
+import { ViewStyle } from 'react-native';
+import ImageColors from 'react-native-image-colors';
+import { AndroidImageColors } from 'react-native-image-colors/lib/typescript/types';
+import colors from '../../styles/colors';
+import GradientBackground from './GradientBackground';
+
+const ImageGradientBackground: React.FC<{
+  height?: number | string;
+  width?: number | string;
+  position?: 'relative' | 'absolute';
+  style?: ViewStyle;
+  imageUri?: string;
+}> = ({ height, width, position, style, imageUri, children }) => {
+  const [highColor, setHighColor] = useState<string>(colors.gradient.high);
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    async function getColors() {
+      if (imageUri === undefined) {
+        return;
+      }
+
+      let res: AndroidImageColors;
+      const cachedResult = ImageColors.cache.getItem(imageUri);
+      if (cachedResult) {
+        res = cachedResult as AndroidImageColors;
+      } else {
+        res = (await ImageColors.getColors(imageUri, {
+          cache: true,
+        })) as AndroidImageColors;
+      }
+
+      if (res.muted && res.muted !== '#000000') {
+        setHighColor(res.muted);
+      } else if (res.darkMuted && res.darkMuted !== '#000000') {
+        setHighColor(res.darkMuted);
+      }
+    }
+    getColors();
+  }, [imageUri]);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerStyle: {
+        backgroundColor: highColor,
+      },
+    });
+  }, [navigation, highColor]);
+
+  return (
+    <GradientBackground
+      height={height}
+      width={width}
+      position={position}
+      style={style}
+      colors={[highColor, colors.gradient.low]}
+      locations={[0.1, 1.0]}>
+      {children}
+    </GradientBackground>
+  );
+};
+
+export default ImageGradientBackground;
diff --git a/src/components/common/ImageGradientScrollView.tsx b/src/components/common/ImageGradientScrollView.tsx
new file mode 100644
index 0000000..727e623
--- /dev/null
+++ b/src/components/common/ImageGradientScrollView.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+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 [layout, setLayout] = useState<LayoutRectangle | undefined>(undefined);
+
+  props.style = props.style || {};
+  if (typeof props.style === 'object' && props.style !== null) {
+    props.style = {
+      ...props.style,
+      backgroundColor: colors.gradient.low,
+    };
+  }
+
+  return (
+    <ScrollView
+      overScrollMode="never"
+      {...props}
+      onLayout={event => {
+        setLayout(event.nativeEvent.layout);
+      }}>
+      <ImageGradientBackground height={layout?.height} imageUri={props.imageUri} />
+      {props.children}
+    </ScrollView>
+  );
+};
+
+export default ImageGradientScrollView;