feat: no weeb skin

lovegaoshi · May 2, 2024 · 61de3a8 · 61de3a8
1 parent 04e0ce8
commit 61de3a8
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 15 deletions.
diff --git a/src/components/background/MainBackground.tsx b/src/components/background/MainBackground.tsx
@@ -82,7 +82,11 @@ const MainBackground = ({ children }: { children: React.JSX.Element }) => {
         </>
       );
     default:
-      return <>{children}</>;
+      return (
+        <View style={{ backgroundColor: playerStyle.colors.background }}>
+          {children}
+        </View>
+      );
   }
 };
 

diff --git a/src/components/setting/appearances/NoWeebButton.tsx b/src/components/setting/appearances/NoWeebButton.tsx
@@ -1,6 +1,158 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { ScrollView, StyleSheet, View, TextInput } from 'react-native';
+import { Text } from 'react-native-paper';
 
 import GenericDialog from '@components/dialogs/GenericDialog';
+import { useNoxSetting } from '@stores/useApp';
+import { SettingListItem } from '../useRenderSetting';
 
-import { SettingListItem, RenderSetting } from '../useRenderSetting';
+export default () => {
+  const { t } = useTranslation();
+  const playerStyle = useNoxSetting(state => state.playerStyle);
+  const setPlayerStyle = useNoxSetting(state => state.setPlayerStyle);
+  const [visible, setVisible] = React.useState(false);
+  const [primaryColor, setPrimaryColor] = React.useState('');
+  const [secondaryColor, setSecondaryColor] = React.useState('');
+  const [contrastColor, setContrastColor] = React.useState('');
+  const [backgroundColor, setBackgroundColor] = React.useState('');
+
+  React.useEffect(() => {
+    if (!visible) return;
+    setPrimaryColor(playerStyle.colors.primary);
+    setSecondaryColor(playerStyle.colors.secondary);
+    setContrastColor(playerStyle.customColors.playlistDrawerBackgroundColor);
+    setBackgroundColor(playerStyle.colors.background);
+  }, [visible]);
+
+  const onSubmit = () => {
+    setVisible(false);
+    setPlayerStyle({
+      ...playerStyle,
+      gifs: [],
+      backgroundImages: [],
+      backgroundImagesLandscape: [],
+      customColors: {
+        ...playerStyle.customColors,
+        playlistDrawerBackgroundColor: contrastColor,
+        textInputSelectionColor: contrastColor,
+        progressThumbTintColor: primaryColor,
+        progressMinimumTrackTintColor: primaryColor,
+      },
+      colors: {
+        ...playerStyle.colors,
+        primary: primaryColor,
+        secondary: secondaryColor,
+        background: backgroundColor,
+        onSurface: primaryColor,
+        onSurfaceVariant: primaryColor,
+        text: primaryColor,
+      },
+      bkgrdImg: '',
+      bkgrdImgLandscape: '',
+    });
+  };
+
+  return (
+    <View>
+      <GenericDialog
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onSubmit={onSubmit}
+        title={t('AppearanceSettings.noWeebSkinsDesc')}
+      >
+        <ScrollView>
+          <View style={styles.rowView}>
+            <View
+              style={[
+                {
+                  backgroundColor: primaryColor,
+                },
+                styles.colorBlock,
+              ]}
+            />
+            <View style={styles.colorBlockSpace} />
+            <Text>{t('AppearanceSettings.PrimaryColor')}</Text>
+            <TextInput
+              style={{ color: playerStyle.colors.primary }}
+              value={primaryColor}
+              onChangeText={setPrimaryColor}
+            ></TextInput>
+          </View>
+          <View style={styles.rowView}>
+            <View
+              style={[
+                {
+                  backgroundColor: secondaryColor,
+                },
+                styles.colorBlock,
+              ]}
+            />
+            <View style={styles.colorBlockSpace} />
+            <Text>{t('AppearanceSettings.SecondaryColor')}</Text>
+            <TextInput
+              style={{ color: playerStyle.colors.primary }}
+              value={secondaryColor}
+              onChangeText={setSecondaryColor}
+            ></TextInput>
+          </View>
+          <View style={styles.rowView}>
+            <View
+              style={[
+                {
+                  backgroundColor: contrastColor,
+                },
+                styles.colorBlock,
+              ]}
+            />
+            <View style={styles.colorBlockSpace} />
+            <Text>{t('AppearanceSettings.ContrastColor')}</Text>
+            <TextInput
+              style={{ color: playerStyle.colors.primary }}
+              value={contrastColor}
+              onChangeText={setContrastColor}
+            ></TextInput>
+          </View>
+          <View style={styles.rowView}>
+            <View
+              style={[
+                {
+                  backgroundColor: backgroundColor,
+                },
+                styles.colorBlock,
+              ]}
+            />
+            <View style={styles.colorBlockSpace} />
+            <Text>{t('AppearanceSettings.BackgroundColor')}</Text>
+            <TextInput
+              style={{ color: playerStyle.colors.primary }}
+              value={backgroundColor}
+              onChangeText={setBackgroundColor}
+            ></TextInput>
+          </View>
+        </ScrollView>
+      </GenericDialog>
+      <SettingListItem
+        settingName="noWeebSkins"
+        onPress={() => setVisible(true)}
+        settingCategory="AppearanceSettings"
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  rowView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  colorBlock: {
+    width: 20,
+    height: 20,
+    borderWidth: 1,
+    borderColor: 'white',
+  },
+  colorBlockSpace: {
+    width: 10,
+  },
+});
diff --git a/src/components/setting/appearances/View.tsx b/src/components/setting/appearances/View.tsx
@@ -5,7 +5,8 @@ import { StyleSheet, View, ScrollView } from 'react-native';
 import SkinSettings from './SkinSettings';
 import { SettingListItem, RenderSetting } from '../useRenderSetting';
 import { useNoxSetting } from '@stores/useApp';
-import SelectDarkMode from './SelectDarkModeButton';
+import SelectDarkModeButton from './SelectDarkModeButton';
+import NoWeebButton from './NoWeebButton';
 
 enum VIEW {
   HOME = 'AppearanceHome',
@@ -49,12 +50,8 @@ const MainView = ({ navigation }: NoxComponent.NavigationProps) => {
             settingCategory: 'AppearanceSettings',
           }}
         />
-        <SelectDarkMode />
-        <SettingListItem
-          settingName="noWeebSkins"
-          onPress={() => console.log('pressed')}
-          settingCategory="GeneralSettings"
-        />
+        <SelectDarkModeButton />
+        <NoWeebButton />
       </ScrollView>
     </View>
   );

diff --git a/src/localization/en/translation.json b/src/localization/en/translation.json
@@ -118,8 +118,6 @@
     "keepForegroundDesc": "enable to waste a LOT of battery",
     "karaokeLyricsName": "Karaoke Lyrics",
     "karaokeLyricsDesc": "Show karaoke style lyrics",
-    "noWeebSkinsName": "Weeb be Gone",
-    "noWeebSkinsDesc": "Turn off weeb skins",
     "biliEditAPIName": "use bilibili edit API",
     "biliEditAPIDesc": "use bilibili edit API when renaming songs",
     "screenAlwaysWakeName": "Lyric screen always on",
@@ -204,6 +202,12 @@
     "ABRepeatDesc": "Update ABRepeat rules from GitHub"
   },
   "AppearanceSettings": {
+    "noWeebSkinsName": "Weeb be Gone",
+    "noWeebSkinsDesc": "Turn off weeb skins",
+    "PrimaryColor": "Primary color",
+    "SecondaryColor": "Secondary color",
+    "ContrastColor": "Contrast color",
+    "BackgroundColor": "Background color",
     "ColorSchemeName": "Select Color Scheme",
     "ColorSchemeDesc": "Current color scheme is {{ scheme }}",
     "wavyProgressBarName": "Wavy Progress Bar",

diff --git a/src/localization/zhcn/translation.json b/src/localization/zhcn/translation.json
@@ -130,8 +130,6 @@
     "keepForegroundDesc": "保持前台服务，贼拉费电",
     "karaokeLyricsName": "逐字歌词",
     "karaokeLyricsDesc": "使用逐字歌词",
-    "noWeebSkinsName": "二次元收收味",
-    "noWeebSkinsDesc": "二次元味儿太冲",
     "biliEditAPIName": "使用b站修改投稿API",
     "biliEditAPIDesc": "更改歌名时，使用b站修改投稿API",
     "screenAlwaysWakeName": "歌词界面常亮",
@@ -194,6 +192,12 @@
     "FeatureNotImplemented": "功能孩妹实现"
   },
   "AppearanceSettings": {
+    "noWeebSkinsName": "二次元收收味",
+    "noWeebSkinsDesc": "二次元味儿太冲",
+    "PrimaryColor": "主题颜色",
+    "SecondaryColor": "辅助颜色",
+    "ContrastColor": "对比颜色",
+    "BackgroundColor": "背景颜色",
     "ColorSchemeName": "选择皮肤主题",
     "ColorSchemeDesc": "当前皮肤主题是{{ scheme }}",
     "wavyProgressBarName": "波浪形播放进度条",

diff --git a/src/utils/mediafetch/mainbackgroundfetch.ts b/src/utils/mediafetch/mainbackgroundfetch.ts
@@ -14,7 +14,8 @@ export enum RESOLVE_TYPE {
   image = 'image',
 }
 
-export default async (backgroundImage: string | NoxTheme.backgroundImage) => {
+export default async (backgroundImage?: string | NoxTheme.backgroundImage) => {
+  if (!backgroundImage) return { type: RESOLVE_TYPE.image, identifier: '' };
   if (typeof backgroundImage === 'string') {
     return { type: RESOLVE_TYPE.image, identifier: backgroundImage };
   }