feat: accent color

lovegaoshi · May 2, 2024 · 935dae4 · 935dae4
1 parent 61de3a8
commit 935dae4
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "expo-image": "1.10.6",
     "expo-keep-awake": "^12.8.2",
     "expo-secure-store": "~12.8.1",
+    "fast-average-color": "^9.4.0",
     "fflate": "^0.8.2",
     "ffmpeg-kit-react-native": "^6.0.2",
     "he": "^1.2.0",

diff --git a/src/components/background/AccentColorBackground.tsx b/src/components/background/AccentColorBackground.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { FastAverageColor } from 'fast-average-color';
+
+import useActiveTrack from '@hooks/useActiveTrack';
+import { useNoxSetting } from '@stores/useApp';
+
+const fac = new FastAverageColor();
+
+export default ({ children }: { children: React.JSX.Element }) => {
+  const playerStyle = useNoxSetting(state => state.playerStyle);
+  const playerSetting = useNoxSetting(state => state.playerSetting);
+  const [backgroundColor, setBackgroundColor] = useState<string>(
+    playerStyle.colors.background
+  );
+  const { track } = useActiveTrack();
+
+  const getBackgroundColor = async () => {
+    try {
+      if (playerSetting.accentColor) {
+        const color = await fac.getColorAsync(track?.artwork, {
+          algorithm: 'dominant',
+        });
+        setBackgroundColor(color.hex);
+        return;
+      }
+    } catch (e) {
+      console.warn(e);
+    }
+    setBackgroundColor(playerStyle.colors.background);
+  };
+
+  useEffect(() => {
+    getBackgroundColor();
+  }, [track]);
+
+  return <View style={{ backgroundColor }}>{children}</View>;
+};
diff --git a/src/components/background/MainBackground.tsx b/src/components/background/MainBackground.tsx
@@ -2,13 +2,15 @@ import React, { useState } from 'react';
 import { ImageBackground, Dimensions, View, StyleSheet } from 'react-native';
 // import { Video, ResizeMode } from 'expo-av';
 import Video from 'react-native-video';
+
 import { useNoxSetting } from '@stores/useApp';
 import { customReqHeader } from '@utils/BiliFetch';
 import { logger } from '@utils/Logger';
 import { useIsLandscape } from '@hooks/useOrientation';
 import resolveBackgroundImage, {
   RESOLVE_TYPE,
 } from '@utils/mediafetch/mainbackgroundfetch';
+import AccentColorBackground from './AccentColorBackground';
 
 const MainBackground = ({ children }: { children: React.JSX.Element }) => {
   const playerStyle = useNoxSetting(state => state.playerStyle);
@@ -82,11 +84,7 @@ const MainBackground = ({ children }: { children: React.JSX.Element }) => {
         </>
       );
     default:
-      return (
-        <View style={{ backgroundColor: playerStyle.colors.background }}>
-          {children}
-        </View>
-      );
+      return <AccentColorBackground>{children}</AccentColorBackground>;
   }
 };
 

diff --git a/src/components/dialogs/PortaledInput.tsx b/src/components/dialogs/PortaledInput.tsx
@@ -5,7 +5,7 @@ import { useNoxSetting } from '@stores/useApp';
 
 interface InputProps {
   defaultName: string;
-  handleSubmit: () => void;
+  handleSubmit?: () => void;
   label: string;
   autofocus?: boolean;
   selectTextOnFocus?: boolean;

diff --git a/src/components/playlist/Menu/PlaylistSettingsDialog.tsx b/src/components/playlist/Menu/PlaylistSettingsDialog.tsx
@@ -57,23 +57,20 @@ export default ({
       <Dialog visible={visible} onDismiss={handleClose}>
         <Dialog.Content>
           <PortaledInput
-            handleSubmit={() => undefined}
             ref={nameRef}
             label={'RenameSongDialog.label'}
             defaultName={playlist.title}
             autofocus={false}
             selectTextOnFocus={false}
           />
           <PortaledInput
-            handleSubmit={() => undefined}
             ref={subRef}
             label={'PlaylistSettingsDialog.subscribeUrlLabel'}
             defaultName={playlist.subscribeUrl.join(';')}
             autofocus={false}
             selectTextOnFocus={false}
           />
           <PortaledInput
-            handleSubmit={() => undefined}
             ref={blacklistRef}
             label={'PlaylistSettingsDialog.blacklistedUrlLabel'}
             defaultName={playlist.blacklistedUrl.join(';')}

diff --git a/src/components/playlist/SongList/SongInfo.tsx b/src/components/playlist/SongList/SongInfo.tsx
@@ -27,6 +27,19 @@ interface Props {
   networkCellular?: boolean;
 }
 
+const isItemSolid = (
+  item: NoxMedia.Song,
+  networkCellular = false,
+  dataSaver = false
+) => {
+  if (item.liveStatus === false) return false;
+  if (!networkCellular) return true;
+  if (dataSaver && !NoxCache.noxMediaCache?.peekCache(item)) {
+    return false;
+  }
+  return true;
+};
+
 const SongInfo = ({
   item,
   index,
@@ -72,15 +85,6 @@ const SongInfo = ({
   };
   const checked = selected[getSongIndex()];
 
-  const isItemSolid = () => {
-    if (item.liveStatus === false) return false;
-    if (!networkCellular) return true;
-    if (playerSetting.dataSaver && !NoxCache.noxMediaCache?.peekCache(item)) {
-      return false;
-    }
-    return true;
-  };
-
   return (
     <View
       style={[
@@ -89,7 +93,9 @@ const SongInfo = ({
           backgroundColor: currentPlaying
             ? playerStyle.customColors.playlistDrawerBackgroundColorTransparent
             : 'transparent',
-          opacity: isItemSolid() ? undefined : 0.5,
+          opacity: isItemSolid(item, networkCellular, playerSetting.dataSaver)
+            ? undefined
+            : 0.5,
         },
       ]}
     >
@@ -98,17 +104,17 @@ const SongInfo = ({
         onPress={checking ? toggleCheck : () => playSong(item)}
       >
         <View style={styles.row}>
-          <View style={{ flex: 5 }}>
+          <View style={styles.songDetails}>
             <View style={styles.row}>
               {checking && (
-                <View style={{ flex: 1 }}>
+                <View style={styles.checkBox}>
                   <Checkbox
                     status={checked ? 'checked' : 'unchecked'}
                     onPress={toggleCheck}
                   />
                 </View>
               )}
-              <View style={{ flex: 4.9 }}>
+              <View style={styles.songTitle}>
                 <Text variant="bodyLarge" numberOfLines={3}>{`${String(
                   index + 1
                   // ${' (' + item.source + ')' || ''}
@@ -159,6 +165,13 @@ const styles = StyleSheet.create({
   time: {
     top: 13,
   },
+  songTitle: {
+    flex: 4.9,
+  },
+  checkBox: {
+    flex: 1,
+  },
+  songDetails: { flex: 5 },
 });
 
 export default SongInfo;
diff --git a/src/components/setting/AboutSettings.tsx b/src/components/setting/AboutSettings.tsx
@@ -1,5 +1,5 @@
-import { View, ScrollView } from 'react-native';
-import { Text } from 'react-native-paper';
+import { View, ScrollView, Linking } from 'react-native';
+import { Text, Button } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 
 import { useNoxSetting } from '@stores/useApp';
@@ -46,6 +46,24 @@ export default () => {
         >
           {t('About.About1')}
         </Text>
+        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+          <Button
+            onPress={() =>
+              Linking.openURL(
+                'https://github.com/lovegaoshi/azusa-player-mobile/releases/latest'
+              )
+            }
+          >
+            {'Gayhub'}
+          </Button>
+          <Button
+            onPress={() =>
+              Linking.openURL('https://space.bilibili.com/3493085134719196')
+            }
+          >
+            {'Bilibili'}
+          </Button>
+        </View>
       </ScrollView>
     </View>
   );

diff --git a/src/components/setting/appearances/View.tsx b/src/components/setting/appearances/View.tsx
@@ -50,6 +50,12 @@ const MainView = ({ navigation }: NoxComponent.NavigationProps) => {
             settingCategory: 'AppearanceSettings',
           }}
         />
+        <RenderSetting
+          item={{
+            settingName: 'accentColor',
+            settingCategory: 'AppearanceSettings',
+          }}
+        />
         <SelectDarkModeButton />
         <NoWeebButton />
       </ScrollView>

diff --git a/src/enums/Storage.ts b/src/enums/Storage.ts
@@ -69,7 +69,7 @@ export const DefaultSetting: NoxStorage.PlayerSettingDict = {
   biliEditAPI: false,
   keepForeground: false,
   karaokeLyrics: false,
-  noWeebSkins: false,
+  accentColor: false,
 
   appID: AppID,
   language: undefined,

diff --git a/src/types/storage.d.ts b/src/types/storage.d.ts
@@ -40,7 +40,7 @@ declare global {
       screenAlwaysWake: boolean;
       keepForeground: boolean;
       karaokeLyrics: boolean;
-      noWeebSkins: boolean;
+      accentColor: boolean;
 
       appID: string;
       language?: string;

diff --git a/yarn.lock b/yarn.lock
@@ -5507,6 +5507,7 @@ __metadata:
     expo-image: "npm:1.10.6"
     expo-keep-awake: "npm:^12.8.2"
     expo-secure-store: "npm:~12.8.1"
+    fast-average-color: "npm:^9.4.0"
     fflate: "npm:^0.8.2"
     ffmpeg-kit-react-native: "npm:^6.0.2"
     gts: "npm:^5.3.0"
@@ -8694,6 +8695,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-average-color@npm:^9.4.0":
+  version: 9.4.0
+  resolution: "fast-average-color@npm:9.4.0"
+  checksum: 10c0/9031181113356abe240c52f78e908607e3b47dc0121cec3077b3735823951e40f8d6e14eca50d9941e30bcea60e0ed52e36410a8ded0972a89253c3dbefc966d
+  languageName: node
+  linkType: hard
+
 "fast-base64-decode@npm:^1.0.0":
   version: 1.0.0
   resolution: "fast-base64-decode@npm:1.0.0"