split lyrics settings by key (#1389)

src/renderer/features/player/components/full-screen-player.tsx

@@ -22,6 +22,7 @@ import { useFastAverageColor } from '/@/renderer/hooks';
 import {
     useFullScreenPlayerStore,
     useFullScreenPlayerStoreActions,
+    useLyricsDisplaySettings,
     useLyricsSettings,
     usePlayerData,
     usePlayerSong,
@@ -235,19 +236,35 @@ const Controls = ({ isPageHovered }: ControlsProps) => {
     } = useFullScreenPlayerStore();
     const { setStore } = useFullScreenPlayerStoreActions();
     const { setSettings } = useSettingsStoreActions();
-    const lyricConfig = useLyricsSettings();
+    const lyricsSettings = useLyricsSettings();
+    const displaySettings = useLyricsDisplaySettings('default');
+    const lyricConfig = { ...lyricsSettings, ...displaySettings };
 
     const handleToggleFullScreenPlayer = () => {
         setStore({ expanded: !expanded });
     };
 
     const handleLyricsSettings = (property: string, value: any) => {
-        setSettings({
-            lyrics: {
-                ...useSettingsStore.getState().lyrics,
-                [property]: value,
-            },
-        });
+        const displayProperties = ['fontSize', 'fontSizeUnsync', 'gap', 'gapUnsync'];
+        if (displayProperties.includes(property)) {
+            const currentDisplay = useSettingsStore.getState().lyricsDisplay;
+            setSettings({
+                lyricsDisplay: {
+                    ...currentDisplay,
+                    default: {
+                        ...currentDisplay.default,
+                        [property]: value,
+                    },
+                },
+            });
+        } else {
+            setSettings({
+                lyrics: {
+                    ...useSettingsStore.getState().lyrics,
+                    [property]: value,
+                },
+            });
+        }
     };
 
     useHotkeys([['Escape', handleToggleFullScreenPlayer]]);

src/renderer/features/player/components/mobile-fullscreen-player-header.tsx

@@ -5,7 +5,12 @@ import styles from './mobile-fullscreen-player.module.css';
 
 import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
-import { useLyricsSettings, useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
+import {
+    useLyricsDisplaySettings,
+    useLyricsSettings,
+    useSettingsStore,
+    useSettingsStoreActions,
+} from '/@/renderer/store';
 import { useFullScreenPlayerStore, useFullScreenPlayerStoreActions } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Divider } from '/@/shared/components/divider/divider';
@@ -37,15 +42,31 @@ export const MobileFullscreenPlayerHeader = memo(
         } = useFullScreenPlayerStore();
         const { setStore } = useFullScreenPlayerStoreActions();
         const { setSettings } = useSettingsStoreActions();
-        const lyricConfig = useLyricsSettings();
+        const lyricsSettings = useLyricsSettings();
+        const displaySettings = useLyricsDisplaySettings('default');
+        const lyricConfig = { ...lyricsSettings, ...displaySettings };
 
         const handleLyricsSettings = (property: string, value: any) => {
-            setSettings({
-                lyrics: {
-                    ...useSettingsStore.getState().lyrics,
-                    [property]: value,
-                },
-            });
+            const displayProperties = ['fontSize', 'fontSizeUnsync', 'gap', 'gapUnsync'];
+            if (displayProperties.includes(property)) {
+                const currentDisplay = useSettingsStore.getState().lyricsDisplay;
+                setSettings({
+                    lyricsDisplay: {
+                        ...currentDisplay,
+                        default: {
+                            ...currentDisplay.default,
+                            [property]: value,
+                        },
+                    },
+                });
+            } else {
+                setSettings({
+                    lyrics: {
+                        ...useSettingsStore.getState().lyrics,
+                        [property]: value,
+                    },
+                });
+            }
         };
 
         return (

src/renderer/features/player/utils/open-visualizer-settings-modal.ts

@@ -1,5 +1,7 @@
 import { openContextModal } from '@mantine/modals';
 
+import i18n from '/@/i18n/i18n';
+
 export const openVisualizerSettingsModal = () => {
     openContextModal({
         innerProps: {},
@@ -17,7 +19,7 @@ export const openVisualizerSettingsModal = () => {
                 width: '100%',
             },
         },
-        title: 'Visualizer Settings',
+        title: i18n.t('common.setting_other', { postProcess: 'titleCase' }),
         transitionProps: {
             transition: 'pop',
         },