From 08a96244f3147dec800a86c2497286fe4bd9ed52 Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Fri, 13 Sep 2024 23:40:18 +0800
Subject: [PATCH 01/17] 	modified:   package.json 	modified:  
 src/i18n/locales/en.json 	modified:  
 src/renderer/features/lyrics/lyrics-actions.tsx 	modified:  
 src/renderer/features/lyrics/lyrics.tsx 	modified:  
 src/renderer/features/player/components/visualizer.tsx

---
 package.json                                  |  2 +-
 src/i18n/locales/en.json                      |  2 ++
 .../features/lyrics/lyrics-actions.tsx        | 31 ++++++++++++++++++-
 src/renderer/features/lyrics/lyrics.tsx       | 19 +++++++++++-
 .../features/player/components/visualizer.tsx |  4 +--
 5 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 17153a39c..c7a1c2984 100644
--- a/package.json
+++ b/package.json
@@ -309,8 +309,8 @@
         "@tanstack/react-query-persist-client": "^4.32.1",
         "@ts-rest/core": "^3.23.0",
         "@xhayper/discord-rpc": "^1.0.24",
-        "auto-text-size": "^0.2.3",
         "audiomotion-analyzer": "^4.5.0",
+        "auto-text-size": "^0.2.3",
         "axios": "^1.6.0",
         "clsx": "^2.0.0",
         "cmdk": "^0.2.0",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 1e759751d..d316b0ce2 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -95,6 +95,7 @@
         "resetToDefault": "reset to default",
         "restartRequired": "restart required",
         "right": "right",
+        "romaji": "romaji",
         "save": "save",
         "saveAndReplace": "save and replace",
         "saveAs": "save as",
@@ -109,6 +110,7 @@
         "trackNumber": "track",
         "trackGain": "track gain",
         "trackPeak": "track peak",
+        "translation": "translation",
         "unknown": "unknown",
         "version": "version",
         "year": "year",
diff --git a/src/renderer/features/lyrics/lyrics-actions.tsx b/src/renderer/features/lyrics/lyrics-actions.tsx
index b9edc7088..4b7a7ea62 100644
--- a/src/renderer/features/lyrics/lyrics-actions.tsx
+++ b/src/renderer/features/lyrics/lyrics-actions.tsx
@@ -18,7 +18,9 @@ interface LyricsActionsProps {
 
     onRemoveLyric: () => void;
     onResetLyric: () => void;
+    onRomajiLyric: () => void;
     onSearchOverride: (params: LyricsOverride) => void;
+    onTranslationLyric: () => void;
     setIndex: (idx: number) => void;
 }
 
@@ -27,7 +29,9 @@ export const LyricsActions = ({
     languages,
     onRemoveLyric,
     onResetLyric,
+    onRomajiLyric,
     onSearchOverride,
+    onTranslationLyric,
     setIndex,
 }: LyricsActionsProps) => {
     const { t } = useTranslation();
@@ -120,7 +124,6 @@ export const LyricsActions = ({
                 {isDesktop && sources.length ? (
                     <Button
                         uppercase
-                        color="red"
                         disabled={isActionsDisabled}
                         variant="subtle"
                         onClick={onRemoveLyric}
@@ -129,6 +132,32 @@ export const LyricsActions = ({
                     </Button>
                 ) : null}
             </Box>
+
+            <Box style={{ position: 'absolute', right: 0, top: -50 }}>
+                {isDesktop && sources.length ? (
+                    <Button
+                        uppercase
+                        disabled={isActionsDisabled}
+                        variant="subtle"
+                        onClick={onTranslationLyric}
+                    >
+                        {t('common.translation', { postProcess: 'sentenceCase' })}
+                    </Button>
+                ) : null}
+            </Box>
+
+            <Box style={{ position: 'absolute', right: 0, top: -100 }}>
+                {isDesktop && sources.length ? (
+                    <Button
+                        uppercase
+                        disabled={isActionsDisabled}
+                        variant="subtle"
+                        onClick={onRomajiLyric}
+                    >
+                        {t('common.romaji', { postProcess: 'sentenceCase' })}
+                    </Button>
+                ) : null}
+            </Box>
         </Box>
     );
 };
diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 1cf276a1d..a796e90cb 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -96,6 +96,9 @@ export const Lyrics = () => {
 
     const [override, setOverride] = useState<LyricsOverride | undefined>(undefined);
 
+    const [isTranslated, setIsTranslated] = useState(false);
+    const [translatedLyrics] = useState<string[] | null>(null);
+
     const handleOnSearchOverride = useCallback((params: LyricsOverride) => {
         setOverride(params);
     }, []);
@@ -123,6 +126,12 @@ export const Lyrics = () => {
         );
     }, [currentSong?.id, currentSong?.serverId]);
 
+    const handleOnRomajiLyric = useCallback(() => {}, []);
+
+    const handleOnTranslationLyric = useCallback(() => {
+        setIsTranslated((prev) => !prev);
+    }, []);
+
     const { isInitialLoading: isOverrideLoading } = useSongLyricsByRemoteId({
         options: {
             enabled: !!override,
@@ -203,10 +212,16 @@ export const Lyrics = () => {
                                 transition={{ duration: 0.5 }}
                             >
                                 {synced ? (
-                                    <SynchronizedLyrics {...(lyrics as SynchronizedLyricsProps)} />
+                                    <SynchronizedLyrics
+                                        {...(lyrics as SynchronizedLyricsProps)}
+                                        isTranslated={isTranslated}
+                                        translatedLyrics={translatedLyrics}
+                                    />
                                 ) : (
                                     <UnsynchronizedLyrics
                                         {...(lyrics as UnsynchronizedLyricsProps)}
+                                        isTranslated={isTranslated}
+                                        translatedLyrics={translatedLyrics}
                                     />
                                 )}
                             </ScrollContainer>
@@ -220,7 +235,9 @@ export const Lyrics = () => {
                         setIndex={setIndex}
                         onRemoveLyric={handleOnRemoveLyric}
                         onResetLyric={handleOnResetLyric}
+                        onRomajiLyric={handleOnRomajiLyric}
                         onSearchOverride={handleOnSearchOverride}
+                        onTranslationLyric={handleOnTranslationLyric}
                     />
                 </ActionsContainer>
             </LyricsContainer>
diff --git a/src/renderer/features/player/components/visualizer.tsx b/src/renderer/features/player/components/visualizer.tsx
index 8709f5a72..3e633eec6 100644
--- a/src/renderer/features/player/components/visualizer.tsx
+++ b/src/renderer/features/player/components/visualizer.tsx
@@ -5,12 +5,12 @@ import styled from 'styled-components';
 import { useSettingsStore } from '/@/renderer/store';
 
 const StyledContainer = styled.div`
-    margin: auto;
     max-width: 100%;
+    margin: auto;
 
     canvas {
-        margin: auto;
         width: 100%;
+        margin: auto;
     }
 `;
 

From f63dc01d1d15b7080734255cc0d08cfdb625dec8 Mon Sep 17 00:00:00 2001
From: ENDzZ <godzmichael@outlook.com>
Date: Sun, 15 Sep 2024 23:56:48 +0800
Subject: [PATCH 02/17] Lyrics Translation Settings Init and Typo Revert

---
 src/renderer/features/lyrics/lyrics.tsx       | 15 +-----
 .../components/playback/lyric-settings.tsx    | 53 +++++++++++++++++++
 src/renderer/store/settings.store.ts          |  8 +++
 3 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index a796e90cb..012db1ec9 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -96,9 +96,6 @@ export const Lyrics = () => {
 
     const [override, setOverride] = useState<LyricsOverride | undefined>(undefined);
 
-    const [isTranslated, setIsTranslated] = useState(false);
-    const [translatedLyrics] = useState<string[] | null>(null);
-
     const handleOnSearchOverride = useCallback((params: LyricsOverride) => {
         setOverride(params);
     }, []);
@@ -128,9 +125,7 @@ export const Lyrics = () => {
 
     const handleOnRomajiLyric = useCallback(() => {}, []);
 
-    const handleOnTranslationLyric = useCallback(() => {
-        setIsTranslated((prev) => !prev);
-    }, []);
+    const handleOnTranslationLyric = useCallback(() => {}, []);
 
     const { isInitialLoading: isOverrideLoading } = useSongLyricsByRemoteId({
         options: {
@@ -212,16 +207,10 @@ export const Lyrics = () => {
                                 transition={{ duration: 0.5 }}
                             >
                                 {synced ? (
-                                    <SynchronizedLyrics
-                                        {...(lyrics as SynchronizedLyricsProps)}
-                                        isTranslated={isTranslated}
-                                        translatedLyrics={translatedLyrics}
-                                    />
+                                    <SynchronizedLyrics {...(lyrics as SynchronizedLyricsProps)} />
                                 ) : (
                                     <UnsynchronizedLyrics
                                         {...(lyrics as UnsynchronizedLyricsProps)}
-                                        isTranslated={isTranslated}
-                                        translatedLyrics={translatedLyrics}
                                     />
                                 )}
                             </ScrollContainer>
diff --git a/src/renderer/features/settings/components/playback/lyric-settings.tsx b/src/renderer/features/settings/components/playback/lyric-settings.tsx
index 157536667..7ff89d854 100644
--- a/src/renderer/features/settings/components/playback/lyric-settings.tsx
+++ b/src/renderer/features/settings/components/playback/lyric-settings.tsx
@@ -8,6 +8,7 @@ import isElectron from 'is-electron';
 import styled from 'styled-components';
 import { LyricSource } from '/@/renderer/api/types';
 import { useTranslation } from 'react-i18next';
+import { TextInput, Select } from '@mantine/core';
 
 const localSettings = isElectron() ? window.electron.localSettings : null;
 
@@ -116,6 +117,58 @@ export const LyricSettings = () => {
             isHidden: !isElectron(),
             title: t('setting.lyricOffset', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <Select
+                    data={['Azure']}
+                    value={settings.apiProvider}
+                    onChange={(value) => {
+                        setSettings({ lyrics: { ...settings, apiProvider: value } });
+                    }}
+                />
+            ),
+            description: t('API provider for translation'),
+            title: t('API Provider'),
+        },
+        {
+            control: (
+                <TextInput
+                    value={settings.apiKey}
+                    onChange={(e) => {
+                        setSettings({ lyrics: { ...settings, apiKey: e.currentTarget.value } });
+                    }}
+                />
+            ),
+            description: t('API Key for translation'),
+            title: t('API Key'),
+        },
+        {
+            control: (
+                <TextInput
+                    value={settings.resourceLocation}
+                    onChange={(e) => {
+                        setSettings({
+                            lyrics: { ...settings, resourceLocation: e.currentTarget.value },
+                        });
+                    }}
+                />
+            ),
+            description: t('Resource location for translation'),
+            title: t('Resource Location'),
+        },
+        {
+            control: (
+                <Select
+                    data={['en', 'zh']}
+                    value={settings.targetLanguage}
+                    onChange={(value) => {
+                        setSettings({ lyrics: { ...settings, targetLanguage: value } });
+                    }}
+                />
+            ),
+            description: t('Target language for translation'),
+            title: t('Target Language'),
+        },
     ];
 
     return (
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index db64decec..f935e298e 100644
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@@ -265,6 +265,8 @@ export interface SettingsState {
     };
     lyrics: {
         alignment: 'left' | 'center' | 'right';
+        apiKey: string | number | readonly string[] | undefined;
+        apiProvider: string | null | undefined;
         delayMs: number;
         fetch: boolean;
         follow: boolean;
@@ -272,9 +274,11 @@ export interface SettingsState {
         fontSizeUnsync: number;
         gap: number;
         gapUnsync: number;
+        resourceLocation: string | number | readonly string[] | undefined;
         showMatch: boolean;
         showProvider: boolean;
         sources: LyricSource[];
+        targetLanguage: string | null | undefined;
     };
     playback: {
         audioDeviceId?: string | null;
@@ -439,6 +443,8 @@ const initialState: SettingsState = {
     },
     lyrics: {
         alignment: 'center',
+        apiKey: undefined,
+        apiProvider: undefined,
         delayMs: 0,
         fetch: false,
         follow: true,
@@ -446,9 +452,11 @@ const initialState: SettingsState = {
         fontSizeUnsync: 20,
         gap: 5,
         gapUnsync: 0,
+        resourceLocation: undefined,
         showMatch: true,
         showProvider: true,
         sources: [],
+        targetLanguage: undefined,
     },
     playback: {
         audioDeviceId: undefined,

From a0f1d566b0fec762f4bd0552f99d19de3316744c Mon Sep 17 00:00:00 2001
From: ENDzZ <godzmichael@outlook.com>
Date: Mon, 16 Sep 2024 21:32:28 +0800
Subject: [PATCH 03/17] Lib Type Add and Default Value

---
 package-lock.json                             | 115 ++++++++++++++++++
 package.json                                  |   3 +
 .../components/playback/lyric-settings.tsx    |  40 ++----
 src/renderer/store/settings.store.ts          |   2 +-
 4 files changed, 132 insertions(+), 28 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c94229aee..e550cd843 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,8 @@
                 "@mantine/modals": "^6.0.17",
                 "@mantine/notifications": "^6.0.17",
                 "@mantine/utils": "^6.0.17",
+                "@sglkc/kuroshiro": "^1.0.1",
+                "@sglkc/kuroshiro-analyzer-kuromoji": "^1.0.1",
                 "@tanstack/react-query": "^4.32.1",
                 "@tanstack/react-query-devtools": "^4.32.1",
                 "@tanstack/react-query-persist-client": "^4.32.1",
@@ -96,6 +98,7 @@
                 "@types/react-window-infinite-loader": "^1.0.6",
                 "@types/styled-components": "^5.1.26",
                 "@types/terser-webpack-plugin": "^5.0.4",
+                "@types/uuid": "^10.0.0",
                 "@types/webpack-bundle-analyzer": "^4.4.1",
                 "@types/webpack-env": "^1.16.3",
                 "@typescript-eslint/eslint-plugin": "^5.47.0",
@@ -4656,6 +4659,47 @@
                 "node": ">=14.0.0"
             }
         },
+        "node_modules/@sglkc/kuromoji": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@sglkc/kuromoji/-/kuromoji-1.1.0.tgz",
+            "integrity": "sha512-uKxXYUM5XNjZw0ia0yMYTI3jHSh/c1gEMNvcvS6J49B4mI+PAq8iRYPTxh2ma0RWm45LyWWrILxCJAIXpi/pww==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "async": "^2.0.1",
+                "doublearray": "0.0.2",
+                "fflate": "^0.8.0"
+            }
+        },
+        "node_modules/@sglkc/kuromoji/node_modules/async": {
+            "version": "2.6.4",
+            "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+            "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+            "license": "MIT",
+            "dependencies": {
+                "lodash": "^4.17.14"
+            }
+        },
+        "node_modules/@sglkc/kuroshiro": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@sglkc/kuroshiro/-/kuroshiro-1.0.1.tgz",
+            "integrity": "sha512-pDjzQa+KHcoKas5i0nf2uxNh0cFZlgsKzvj5AHMkAF7cvKTayN+Rllb/X+S3Gz8MpMk6pV95Uyu90+iyq3w+/A==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.14.0"
+            },
+            "engines": {
+                "node": ">=6.5.0"
+            }
+        },
+        "node_modules/@sglkc/kuroshiro-analyzer-kuromoji": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@sglkc/kuroshiro-analyzer-kuromoji/-/kuroshiro-analyzer-kuromoji-1.0.1.tgz",
+            "integrity": "sha512-qWEhhmru2T6YKhOx1g6BNxxm8K0GIKyd5NY6ynrGH/lLwxNvfv2osh2PAeoSJhjloVrLe7wn/NEp/5+IoRN88A==",
+            "license": "MIT",
+            "dependencies": {
+                "@sglkc/kuromoji": "^1.0.1"
+            }
+        },
         "node_modules/@sindresorhus/is": {
             "version": "4.6.0",
             "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -5518,6 +5562,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/uuid": {
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+            "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/verror": {
             "version": "1.10.10",
             "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.10.tgz",
@@ -9741,6 +9792,12 @@
             "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
             "dev": true
         },
+        "node_modules/doublearray": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/doublearray/-/doublearray-0.0.2.tgz",
+            "integrity": "sha512-aw55FtZzT6AmiamEj2kvmR6BuFqvYgKZUkfQ7teqVRNqD5UE0rw8IeW/3gieHNKQ5sPuDKlljWEn4bzv5+1bHw==",
+            "license": "MIT"
+        },
         "node_modules/duplexer": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -12218,6 +12275,12 @@
                 "pend": "~1.2.0"
             }
         },
+        "node_modules/fflate": {
+            "version": "0.8.2",
+            "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+            "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+            "license": "MIT"
+        },
         "node_modules/file-entry-cache": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -27051,6 +27114,42 @@
             "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
             "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA=="
         },
+        "@sglkc/kuromoji": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@sglkc/kuromoji/-/kuromoji-1.1.0.tgz",
+            "integrity": "sha512-uKxXYUM5XNjZw0ia0yMYTI3jHSh/c1gEMNvcvS6J49B4mI+PAq8iRYPTxh2ma0RWm45LyWWrILxCJAIXpi/pww==",
+            "requires": {
+                "async": "^2.0.1",
+                "doublearray": "0.0.2",
+                "fflate": "^0.8.0"
+            },
+            "dependencies": {
+                "async": {
+                    "version": "2.6.4",
+                    "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+                    "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+                    "requires": {
+                        "lodash": "^4.17.14"
+                    }
+                }
+            }
+        },
+        "@sglkc/kuroshiro": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@sglkc/kuroshiro/-/kuroshiro-1.0.1.tgz",
+            "integrity": "sha512-pDjzQa+KHcoKas5i0nf2uxNh0cFZlgsKzvj5AHMkAF7cvKTayN+Rllb/X+S3Gz8MpMk6pV95Uyu90+iyq3w+/A==",
+            "requires": {
+                "@babel/runtime": "^7.14.0"
+            }
+        },
+        "@sglkc/kuroshiro-analyzer-kuromoji": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@sglkc/kuroshiro-analyzer-kuromoji/-/kuroshiro-analyzer-kuromoji-1.0.1.tgz",
+            "integrity": "sha512-qWEhhmru2T6YKhOx1g6BNxxm8K0GIKyd5NY6ynrGH/lLwxNvfv2osh2PAeoSJhjloVrLe7wn/NEp/5+IoRN88A==",
+            "requires": {
+                "@sglkc/kuromoji": "^1.0.1"
+            }
+        },
         "@sindresorhus/is": {
             "version": "4.6.0",
             "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -27801,6 +27900,12 @@
             "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
             "dev": true
         },
+        "@types/uuid": {
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+            "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+            "dev": true
+        },
         "@types/verror": {
             "version": "1.10.10",
             "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.10.tgz",
@@ -30882,6 +30987,11 @@
             "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
             "dev": true
         },
+        "doublearray": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/doublearray/-/doublearray-0.0.2.tgz",
+            "integrity": "sha512-aw55FtZzT6AmiamEj2kvmR6BuFqvYgKZUkfQ7teqVRNqD5UE0rw8IeW/3gieHNKQ5sPuDKlljWEn4bzv5+1bHw=="
+        },
         "duplexer": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -32688,6 +32798,11 @@
                 "pend": "~1.2.0"
             }
         },
+        "fflate": {
+            "version": "0.8.2",
+            "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+            "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
+        },
         "file-entry-cache": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
diff --git a/package.json b/package.json
index c7a1c2984..06659b000 100644
--- a/package.json
+++ b/package.json
@@ -219,6 +219,7 @@
         "@types/react-window-infinite-loader": "^1.0.6",
         "@types/styled-components": "^5.1.26",
         "@types/terser-webpack-plugin": "^5.0.4",
+        "@types/uuid": "^10.0.0",
         "@types/webpack-bundle-analyzer": "^4.4.1",
         "@types/webpack-env": "^1.16.3",
         "@typescript-eslint/eslint-plugin": "^5.47.0",
@@ -304,6 +305,8 @@
         "@mantine/modals": "^6.0.17",
         "@mantine/notifications": "^6.0.17",
         "@mantine/utils": "^6.0.17",
+        "@sglkc/kuroshiro": "^1.0.1",
+        "@sglkc/kuroshiro-analyzer-kuromoji": "^1.0.1",
         "@tanstack/react-query": "^4.32.1",
         "@tanstack/react-query-devtools": "^4.32.1",
         "@tanstack/react-query-persist-client": "^4.32.1",
diff --git a/src/renderer/features/settings/components/playback/lyric-settings.tsx b/src/renderer/features/settings/components/playback/lyric-settings.tsx
index 7ff89d854..d6fce37a8 100644
--- a/src/renderer/features/settings/components/playback/lyric-settings.tsx
+++ b/src/renderer/features/settings/components/playback/lyric-settings.tsx
@@ -117,6 +117,19 @@ export const LyricSettings = () => {
             isHidden: !isElectron(),
             title: t('setting.lyricOffset', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <Select
+                    data={['en', 'zh']}
+                    value={settings.targetLanguage}
+                    onChange={(value) => {
+                        setSettings({ lyrics: { ...settings, targetLanguage: value } });
+                    }}
+                />
+            ),
+            description: t('Target language for translation'),
+            title: t('Target Language'),
+        },
         {
             control: (
                 <Select
@@ -142,33 +155,6 @@ export const LyricSettings = () => {
             description: t('API Key for translation'),
             title: t('API Key'),
         },
-        {
-            control: (
-                <TextInput
-                    value={settings.resourceLocation}
-                    onChange={(e) => {
-                        setSettings({
-                            lyrics: { ...settings, resourceLocation: e.currentTarget.value },
-                        });
-                    }}
-                />
-            ),
-            description: t('Resource location for translation'),
-            title: t('Resource Location'),
-        },
-        {
-            control: (
-                <Select
-                    data={['en', 'zh']}
-                    value={settings.targetLanguage}
-                    onChange={(value) => {
-                        setSettings({ lyrics: { ...settings, targetLanguage: value } });
-                    }}
-                />
-            ),
-            description: t('Target language for translation'),
-            title: t('Target Language'),
-        },
     ];
 
     return (
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index f935e298e..7a731cf86 100644
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@@ -456,7 +456,7 @@ const initialState: SettingsState = {
         showMatch: true,
         showProvider: true,
         sources: [],
-        targetLanguage: undefined,
+        targetLanguage: 'en',
     },
     playback: {
         audioDeviceId: undefined,

From 814714d42c4b2a18c8be28526267bfef56bb17b7 Mon Sep 17 00:00:00 2001
From: ENDzZ <godzmichael@outlook.com>
Date: Tue, 17 Sep 2024 19:35:38 +0800
Subject: [PATCH 04/17] Init Translation API

---
 package-lock.json                       | 13 ++++----
 src/renderer/features/lyrics/lyrics.tsx | 40 +++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4082e1cd7..dc633ac68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20349,10 +20349,11 @@
             }
         },
         "node_modules/serialize-javascript": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-            "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+            "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
             "dev": true,
+            "license": "BSD-3-Clause",
             "dependencies": {
                 "randombytes": "^2.1.0"
             }
@@ -38468,9 +38469,9 @@
             }
         },
         "serialize-javascript": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-            "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+            "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
             "dev": true,
             "requires": {
                 "randombytes": "^2.1.0"
diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 012db1ec9..f193e4300 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -4,6 +4,8 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RiInformationFill } from 'react-icons/ri';
 import styled from 'styled-components';
+import axios from 'axios';
+import { v4 as uuidv4 } from 'uuid';
 import { useSongLyricsByRemoteId, useSongLyricsBySong } from './queries/lyric-query';
 import { SynchronizedLyrics, SynchronizedLyricsProps } from './synchronized-lyrics';
 import { Spinner, TextTitle } from '/@/renderer/components';
@@ -12,7 +14,7 @@ import {
     UnsynchronizedLyrics,
     UnsynchronizedLyricsProps,
 } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
-import { useCurrentSong, usePlayerStore } from '/@/renderer/store';
+import { useCurrentSong, usePlayerStore, useLyricsSettings } from '/@/renderer/store';
 import { FullLyricsMetadata, LyricSource, LyricsOverride } from '/@/renderer/api/types';
 import { LyricsActions } from '/@/renderer/features/lyrics/lyrics-actions';
 import { queryKeys } from '/@/renderer/api/query-keys';
@@ -84,6 +86,7 @@ const ScrollContainer = styled(motion.div)`
 
 export const Lyrics = () => {
     const currentSong = useCurrentSong();
+    const lyricsSettings = useLyricsSettings();
     const [index, setIndex] = useState(0);
 
     const { data, isInitialLoading } = useSongLyricsBySong(
@@ -123,9 +126,40 @@ export const Lyrics = () => {
         );
     }, [currentSong?.id, currentSong?.serverId]);
 
-    const handleOnRomajiLyric = useCallback(() => {}, []);
+    const handleOnRomajiLyric = useCallback(async () => {}, []);
 
-    const handleOnTranslationLyric = useCallback(() => {}, []);
+    const handleOnTranslationLyric = useCallback(async () => {
+        const { apiKey, targetLanguage } = lyricsSettings;
+        const originalLyrics = data.lyrics;
+        console.log('Original Lyrics:', originalLyrics);
+        const response = await axios({
+            baseURL: 'https://api.cognitive.microsofttranslator.com',
+            data: [
+                {
+                    text: originalLyrics,
+                },
+            ],
+            headers: {
+                'Content-type': 'application/json',
+                'Ocp-Apim-Subscription-Key': apiKey as string,
+                'Ocp-Apim-Subscription-Region': 'global',
+                'X-ClientTraceId': uuidv4().toString(),
+            },
+            method: 'post',
+            params: {
+                'api-version': '3.0',
+                to: targetLanguage,
+            },
+            responseType: 'json',
+            url: '/translate',
+        });
+        const translatedText = response.data[0].translations[0].text;
+        console.log('Translated Lyrics:', translatedText);
+        queryClient.setQueryData(
+            queryKeys.songs.lyrics(currentSong?.serverId, { songId: currentSong?.id }),
+            translatedText,
+        );
+    }, [data, currentSong?.id, currentSong?.serverId, lyricsSettings]);
 
     const { isInitialLoading: isOverrideLoading } = useSongLyricsByRemoteId({
         options: {

From 164138ed00e284a6f4edc4b267d8236f698bc79c Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Tue, 17 Sep 2024 22:01:34 +0800
Subject: [PATCH 05/17] Translation Module Usable

---
 src/renderer/features/lyrics/lyrics.tsx       | 46 ++++++++++---------
 .../features/lyrics/synchronized-lyrics.tsx   | 29 ++++++++----
 .../features/lyrics/unsynchronized-lyrics.tsx | 31 +++++++++----
 3 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index f193e4300..1ca8c9e8b 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -88,6 +88,7 @@ export const Lyrics = () => {
     const currentSong = useCurrentSong();
     const lyricsSettings = useLyricsSettings();
     const [index, setIndex] = useState(0);
+    const [translatedLyrics, setTranslatedLyrics] = useState<string | null>(null);
 
     const { data, isInitialLoading } = useSongLyricsBySong(
         {
@@ -99,6 +100,19 @@ export const Lyrics = () => {
 
     const [override, setOverride] = useState<LyricsOverride | undefined>(undefined);
 
+    const [lyrics, synced] = useMemo(() => {
+        if (Array.isArray(data)) {
+            if (data.length > 0) {
+                const selectedLyric = data[Math.min(index, data.length)];
+                return [selectedLyric, selectedLyric.synced];
+            }
+        } else if (data?.lyrics) {
+            return [data, Array.isArray(data.lyrics)];
+        }
+
+        return [undefined, false];
+    }, [data, index]);
+
     const handleOnSearchOverride = useCallback((params: LyricsOverride) => {
         setOverride(params);
     }, []);
@@ -130,8 +144,10 @@ export const Lyrics = () => {
 
     const handleOnTranslationLyric = useCallback(async () => {
         const { apiKey, targetLanguage } = lyricsSettings;
-        const originalLyrics = data.lyrics;
-        console.log('Original Lyrics:', originalLyrics);
+        if (!lyrics) return;
+        const originalLyrics = Array.isArray(lyrics.lyrics)
+            ? lyrics.lyrics.map(([, line]) => line).join('\n')
+            : lyrics.lyrics;
         const response = await axios({
             baseURL: 'https://api.cognitive.microsofttranslator.com',
             data: [
@@ -154,12 +170,9 @@ export const Lyrics = () => {
             url: '/translate',
         });
         const translatedText = response.data[0].translations[0].text;
+        setTranslatedLyrics(translatedText);
         console.log('Translated Lyrics:', translatedText);
-        queryClient.setQueryData(
-            queryKeys.songs.lyrics(currentSong?.serverId, { songId: currentSong?.id }),
-            translatedText,
-        );
-    }, [data, currentSong?.id, currentSong?.serverId, lyricsSettings]);
+    }, [lyrics, lyricsSettings]);
 
     const { isInitialLoading: isOverrideLoading } = useSongLyricsByRemoteId({
         options: {
@@ -188,19 +201,6 @@ export const Lyrics = () => {
         };
     }, []);
 
-    const [lyrics, synced] = useMemo(() => {
-        if (Array.isArray(data)) {
-            if (data.length > 0) {
-                const selectedLyric = data[Math.min(index, data.length)];
-                return [selectedLyric, selectedLyric.synced];
-            }
-        } else if (data?.lyrics) {
-            return [data, Array.isArray(data.lyrics)];
-        }
-
-        return [undefined, false];
-    }, [data, index]);
-
     const languages = useMemo(() => {
         if (Array.isArray(data)) {
             return data.map((lyric, idx) => ({ label: lyric.lang, value: idx.toString() }));
@@ -241,10 +241,14 @@ export const Lyrics = () => {
                                 transition={{ duration: 0.5 }}
                             >
                                 {synced ? (
-                                    <SynchronizedLyrics {...(lyrics as SynchronizedLyricsProps)} />
+                                    <SynchronizedLyrics
+                                        {...(lyrics as SynchronizedLyricsProps)}
+                                        translatedLyrics={translatedLyrics}
+                                    />
                                 ) : (
                                     <UnsynchronizedLyrics
                                         {...(lyrics as UnsynchronizedLyricsProps)}
+                                        translatedLyrics={translatedLyrics}
                                     />
                                 )}
                             </ScrollContainer>
diff --git a/src/renderer/features/lyrics/synchronized-lyrics.tsx b/src/renderer/features/lyrics/synchronized-lyrics.tsx
index 913d56601..2377aa983 100644
--- a/src/renderer/features/lyrics/synchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/synchronized-lyrics.tsx
@@ -55,6 +55,7 @@ const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
 
 export interface SynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
     lyrics: SynchronizedLyricsArray;
+    translatedLyrics?: string | null;
 }
 
 export const SynchronizedLyrics = ({
@@ -63,6 +64,7 @@ export const SynchronizedLyrics = ({
     name,
     remote,
     source,
+    translatedLyrics,
 }: SynchronizedLyricsProps) => {
     const playersRef = PlayersRef;
     const status = useCurrentStatus();
@@ -364,15 +366,24 @@ export const SynchronizedLyrics = ({
                 />
             )}
             {lyrics.map(([time, text], idx) => (
-                <LyricLine
-                    key={idx}
-                    alignment={settings.alignment}
-                    className="lyric-line synchronized"
-                    fontSize={settings.fontSize}
-                    id={`lyric-${idx}`}
-                    text={text}
-                    onClick={() => handleSeek(time / 1000)}
-                />
+                <div key={idx}>
+                    <LyricLine
+                        alignment={settings.alignment}
+                        className="lyric-line synchronized"
+                        fontSize={settings.fontSize}
+                        id={`lyric-${idx}`}
+                        text={text}
+                        onClick={() => handleSeek(time / 1000)}
+                    />
+                    {translatedLyrics && (
+                        <LyricLine
+                            alignment={settings.alignment}
+                            className="lyric-line synchronized translation"
+                            fontSize={settings.fontSize}
+                            text={translatedLyrics.split('\n')[idx]}
+                        />
+                    )}
+                </div>
             ))}
         </SynchronizedLyricsContainer>
     );
diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index 251f0196a..189436893 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -6,6 +6,7 @@ import { useLyricsSettings } from '/@/renderer/store';
 
 export interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
     lyrics: string;
+    translatedLyrics?: string | null;
 }
 
 const UnsynchronizedLyricsContainer = styled.div<{ $gap: number }>`
@@ -45,12 +46,17 @@ export const UnsynchronizedLyrics = ({
     name,
     remote,
     source,
+    translatedLyrics,
 }: UnsynchronizedLyricsProps) => {
     const settings = useLyricsSettings();
     const lines = useMemo(() => {
         return lyrics.split('\n');
     }, [lyrics]);
 
+    const translatedLines = useMemo(() => {
+        return translatedLyrics ? translatedLyrics.split('\n') : [];
+    }, [translatedLyrics]);
+
     return (
         <UnsynchronizedLyricsContainer
             $gap={settings.gapUnsync}
@@ -73,14 +79,23 @@ export const UnsynchronizedLyrics = ({
                 />
             )}
             {lines.map((text, idx) => (
-                <LyricLine
-                    key={idx}
-                    alignment={settings.alignment}
-                    className="lyric-line unsynchronized"
-                    fontSize={settings.fontSizeUnsync}
-                    id={`lyric-${idx}`}
-                    text={text}
-                />
+                <div key={idx}>
+                    <LyricLine
+                        alignment={settings.alignment}
+                        className="lyric-line unsynchronized"
+                        fontSize={settings.fontSizeUnsync}
+                        id={`lyric-${idx}`}
+                        text={text}
+                    />
+                    {translatedLines[idx] && (
+                        <LyricLine
+                            alignment={settings.alignment}
+                            className="lyric-line unsynchronized translation"
+                            fontSize={settings.fontSizeUnsync}
+                            text={translatedLines[idx]}
+                        />
+                    )}
+                </div>
             ))}
         </UnsynchronizedLyricsContainer>
     );

From 0a245a21b848aabbb4e911fa9940cdac5344096f Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Tue, 17 Sep 2024 22:18:00 +0800
Subject: [PATCH 06/17] Translation Toggle

---
 src/renderer/features/lyrics/lyrics.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 1ca8c9e8b..12ce6a24c 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -89,6 +89,7 @@ export const Lyrics = () => {
     const lyricsSettings = useLyricsSettings();
     const [index, setIndex] = useState(0);
     const [translatedLyrics, setTranslatedLyrics] = useState<string | null>(null);
+    const [showTranslation, setShowTranslation] = useState<boolean>(false);
 
     const { data, isInitialLoading } = useSongLyricsBySong(
         {
@@ -143,6 +144,10 @@ export const Lyrics = () => {
     const handleOnRomajiLyric = useCallback(async () => {}, []);
 
     const handleOnTranslationLyric = useCallback(async () => {
+        if (translatedLyrics) {
+            setShowTranslation(!showTranslation);
+            return;
+        }
         const { apiKey, targetLanguage } = lyricsSettings;
         if (!lyrics) return;
         const originalLyrics = Array.isArray(lyrics.lyrics)
@@ -171,8 +176,8 @@ export const Lyrics = () => {
         });
         const translatedText = response.data[0].translations[0].text;
         setTranslatedLyrics(translatedText);
-        console.log('Translated Lyrics:', translatedText);
-    }, [lyrics, lyricsSettings]);
+        setShowTranslation(true);
+    }, [lyrics, lyricsSettings, translatedLyrics, showTranslation]);
 
     const { isInitialLoading: isOverrideLoading } = useSongLyricsByRemoteId({
         options: {
@@ -243,12 +248,12 @@ export const Lyrics = () => {
                                 {synced ? (
                                     <SynchronizedLyrics
                                         {...(lyrics as SynchronizedLyricsProps)}
-                                        translatedLyrics={translatedLyrics}
+                                        translatedLyrics={showTranslation ? translatedLyrics : null}
                                     />
                                 ) : (
                                     <UnsynchronizedLyrics
                                         {...(lyrics as UnsynchronizedLyricsProps)}
-                                        translatedLyrics={translatedLyrics}
+                                        translatedLyrics={showTranslation ? translatedLyrics : null}
                                     />
                                 )}
                             </ScrollContainer>

From 57e165b4267ac1e1513caa2d7fc7b37ff88fd39f Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Thu, 19 Sep 2024 10:05:25 +0800
Subject: [PATCH 07/17] Romaji Test

---
 .../features/lyrics/lyrics-actions.tsx        | 12 +++----
 src/renderer/features/lyrics/lyrics.tsx       | 32 +++++++++++++++----
 .../features/lyrics/synchronized-lyrics.tsx   | 10 ++++++
 .../features/lyrics/unsynchronized-lyrics.tsx | 14 ++++++++
 4 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/renderer/features/lyrics/lyrics-actions.tsx b/src/renderer/features/lyrics/lyrics-actions.tsx
index 4b7a7ea62..3632ba977 100644
--- a/src/renderer/features/lyrics/lyrics-actions.tsx
+++ b/src/renderer/features/lyrics/lyrics-actions.tsx
@@ -18,9 +18,9 @@ interface LyricsActionsProps {
 
     onRemoveLyric: () => void;
     onResetLyric: () => void;
-    onRomajiLyric: () => void;
+    onRomanizeLyric: () => void;
     onSearchOverride: (params: LyricsOverride) => void;
-    onTranslationLyric: () => void;
+    onTranslateLyric: () => void;
     setIndex: (idx: number) => void;
 }
 
@@ -29,9 +29,9 @@ export const LyricsActions = ({
     languages,
     onRemoveLyric,
     onResetLyric,
-    onRomajiLyric,
+    onRomanizeLyric,
     onSearchOverride,
-    onTranslationLyric,
+    onTranslateLyric,
     setIndex,
 }: LyricsActionsProps) => {
     const { t } = useTranslation();
@@ -139,7 +139,7 @@ export const LyricsActions = ({
                         uppercase
                         disabled={isActionsDisabled}
                         variant="subtle"
-                        onClick={onTranslationLyric}
+                        onClick={onTranslateLyric}
                     >
                         {t('common.translation', { postProcess: 'sentenceCase' })}
                     </Button>
@@ -152,7 +152,7 @@ export const LyricsActions = ({
                         uppercase
                         disabled={isActionsDisabled}
                         variant="subtle"
-                        onClick={onRomajiLyric}
+                        onClick={onRomanizeLyric}
                     >
                         {t('common.romaji', { postProcess: 'sentenceCase' })}
                     </Button>
diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 12ce6a24c..fdd3debd6 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -4,6 +4,8 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RiInformationFill } from 'react-icons/ri';
 import styled from 'styled-components';
+import Kuroshiro from '@sglkc/kuroshiro';
+import KuromojiAnalyzer from '@sglkc/kuroshiro-analyzer-kuromoji';
 import axios from 'axios';
 import { v4 as uuidv4 } from 'uuid';
 import { useSongLyricsByRemoteId, useSongLyricsBySong } from './queries/lyric-query';
@@ -88,6 +90,8 @@ export const Lyrics = () => {
     const currentSong = useCurrentSong();
     const lyricsSettings = useLyricsSettings();
     const [index, setIndex] = useState(0);
+    const [romanizedLyrics, setRomanizedLyrics] = useState<string | null>(null);
+    const [showRomaji, setShowRomaji] = useState<boolean>(false);
     const [translatedLyrics, setTranslatedLyrics] = useState<string | null>(null);
     const [showTranslation, setShowTranslation] = useState<boolean>(false);
 
@@ -141,9 +145,23 @@ export const Lyrics = () => {
         );
     }, [currentSong?.id, currentSong?.serverId]);
 
-    const handleOnRomajiLyric = useCallback(async () => {}, []);
+    const handleOnRomanizeLyric = useCallback(async () => {
+        if (romanizedLyrics) {
+            setShowRomaji(!showRomaji);
+            return;
+        }
+        const kuroshiro = new Kuroshiro();
+        await kuroshiro.init(new KuromojiAnalyzer());
+        if (!lyrics) return;
+        const originalLyrics = Array.isArray(lyrics.lyrics)
+            ? lyrics.lyrics.map(([, line]) => line).join('\n')
+            : lyrics.lyrics;
+        const romanizedText = await kuroshiro.convert(originalLyrics, { to: 'romaji' });
+        setRomanizedLyrics(romanizedText);
+        setShowRomaji(true);
+    }, [lyrics, romanizedLyrics, showRomaji]);
 
-    const handleOnTranslationLyric = useCallback(async () => {
+    const handleOnTranslateLyric = useCallback(async () => {
         if (translatedLyrics) {
             setShowTranslation(!showTranslation);
             return;
@@ -174,8 +192,8 @@ export const Lyrics = () => {
             responseType: 'json',
             url: '/translate',
         });
-        const translatedText = response.data[0].translations[0].text;
-        setTranslatedLyrics(translatedText);
+        const TranslatedText = response.data[0].translations[0].text;
+        setTranslatedLyrics(TranslatedText);
         setShowTranslation(true);
     }, [lyrics, lyricsSettings, translatedLyrics, showTranslation]);
 
@@ -248,11 +266,13 @@ export const Lyrics = () => {
                                 {synced ? (
                                     <SynchronizedLyrics
                                         {...(lyrics as SynchronizedLyricsProps)}
+                                        romanizedLyrics={showRomaji ? romanizedLyrics : null}
                                         translatedLyrics={showTranslation ? translatedLyrics : null}
                                     />
                                 ) : (
                                     <UnsynchronizedLyrics
                                         {...(lyrics as UnsynchronizedLyricsProps)}
+                                        romanizedLyrics={showRomaji ? romanizedLyrics : null}
                                         translatedLyrics={showTranslation ? translatedLyrics : null}
                                     />
                                 )}
@@ -267,9 +287,9 @@ export const Lyrics = () => {
                         setIndex={setIndex}
                         onRemoveLyric={handleOnRemoveLyric}
                         onResetLyric={handleOnResetLyric}
-                        onRomajiLyric={handleOnRomajiLyric}
+                        onRomanizeLyric={handleOnRomanizeLyric}
                         onSearchOverride={handleOnSearchOverride}
-                        onTranslationLyric={handleOnTranslationLyric}
+                        onTranslateLyric={handleOnTranslateLyric}
                     />
                 </ActionsContainer>
             </LyricsContainer>
diff --git a/src/renderer/features/lyrics/synchronized-lyrics.tsx b/src/renderer/features/lyrics/synchronized-lyrics.tsx
index 2377aa983..957d977b9 100644
--- a/src/renderer/features/lyrics/synchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/synchronized-lyrics.tsx
@@ -55,6 +55,7 @@ const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
 
 export interface SynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
     lyrics: SynchronizedLyricsArray;
+    romanizedLyrics?: string | null;
     translatedLyrics?: string | null;
 }
 
@@ -64,6 +65,7 @@ export const SynchronizedLyrics = ({
     name,
     remote,
     source,
+    romanizedLyrics,
     translatedLyrics,
 }: SynchronizedLyricsProps) => {
     const playersRef = PlayersRef;
@@ -375,6 +377,14 @@ export const SynchronizedLyrics = ({
                         text={text}
                         onClick={() => handleSeek(time / 1000)}
                     />
+                    {romanizedLyrics && (
+                        <LyricLine
+                            alignment={settings.alignment}
+                            className="lyric-line synchronized romaji"
+                            fontSize={settings.fontSize}
+                            text={romanizedLyrics.split('\n')[idx]}
+                        />
+                    )}
                     {translatedLyrics && (
                         <LyricLine
                             alignment={settings.alignment}
diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index 189436893..2fd3a534a 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -6,6 +6,7 @@ import { useLyricsSettings } from '/@/renderer/store';
 
 export interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
     lyrics: string;
+    romanizedLyrics?: string | null;
     translatedLyrics?: string | null;
 }
 
@@ -46,6 +47,7 @@ export const UnsynchronizedLyrics = ({
     name,
     remote,
     source,
+    romanizedLyrics,
     translatedLyrics,
 }: UnsynchronizedLyricsProps) => {
     const settings = useLyricsSettings();
@@ -53,6 +55,10 @@ export const UnsynchronizedLyrics = ({
         return lyrics.split('\n');
     }, [lyrics]);
 
+    const romanizedLines = useMemo(() => {
+        return romanizedLyrics ? romanizedLyrics.split('\n') : [];
+    }, [romanizedLyrics]);
+
     const translatedLines = useMemo(() => {
         return translatedLyrics ? translatedLyrics.split('\n') : [];
     }, [translatedLyrics]);
@@ -87,6 +93,14 @@ export const UnsynchronizedLyrics = ({
                         id={`lyric-${idx}`}
                         text={text}
                     />
+                    {romanizedLines[idx] && (
+                        <LyricLine
+                            alignment={settings.alignment}
+                            className="lyric-line unsynchronized romaji"
+                            fontSize={settings.fontSizeUnsync}
+                            text={romanizedLines[idx]}
+                        />
+                    )}
                     {translatedLines[idx] && (
                         <LyricLine
                             alignment={settings.alignment}

From 063b41920bd863b49132f6bcb42881176e7df4df Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Thu, 19 Sep 2024 11:00:57 +0800
Subject: [PATCH 08/17] Trivial Language Config and Font Size Change

---
 src/i18n/locales/en.json                                 | 6 +++++-
 src/renderer/features/lyrics/lyrics.tsx                  | 1 -
 src/renderer/features/lyrics/synchronized-lyrics.tsx     | 6 ++++--
 src/renderer/features/lyrics/unsynchronized-lyrics.tsx   | 4 ++--
 .../player/components/full-screen-player-queue.tsx       | 2 +-
 .../settings/components/playback/lyric-settings.tsx      | 9 +++++----
 6 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index d316b0ce2..fb5293e8c 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -357,7 +357,8 @@
             },
             "lyrics": "lyrics",
             "related": "related",
-            "upNext": "up next"
+            "upNext": "up next",
+            "visualizer": "visualizer"
         },
         "genreList": {
             "showAlbums": "show $t(entity.genre_one) $t(entity.album_other)",
@@ -458,6 +459,8 @@
         "albumBackground_description": "adds a background image for album pages containing the album art",
         "albumBackgroundBlur": "album background image blur size",
         "albumBackgroundBlur_description": "adjusts the amount of blur applied to the album background image",
+        "apiProvider": "api provider",
+        "apiKey": "api key",
         "applicationHotkeys": "application hotkeys",
         "applicationHotkeys_description": "configure application hotkeys. toggle the checkbox to set as a global hotkey (desktop only)",
         "artistConfiguration": "album artist page configuration",
@@ -642,6 +645,7 @@
         "skipPlaylistPage_description": "when navigating to a playlist, go to the playlist song list page instead of the default page",
         "startMinimized": "start minimized",
         "startMinimized_description": "start the application in system tray",
+        "targetLanguage": "target language",
         "theme": "theme",
         "theme_description": "sets the theme to use for the application",
         "themeDark": "theme (dark)",
diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index fdd3debd6..5c3a6cdef 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -181,7 +181,6 @@ export const Lyrics = () => {
             headers: {
                 'Content-type': 'application/json',
                 'Ocp-Apim-Subscription-Key': apiKey as string,
-                'Ocp-Apim-Subscription-Region': 'global',
                 'X-ClientTraceId': uuidv4().toString(),
             },
             method: 'post',
diff --git a/src/renderer/features/lyrics/synchronized-lyrics.tsx b/src/renderer/features/lyrics/synchronized-lyrics.tsx
index 957d977b9..5bcc5160e 100644
--- a/src/renderer/features/lyrics/synchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/synchronized-lyrics.tsx
@@ -381,16 +381,18 @@ export const SynchronizedLyrics = ({
                         <LyricLine
                             alignment={settings.alignment}
                             className="lyric-line synchronized romaji"
-                            fontSize={settings.fontSize}
+                            fontSize={settings.fontSize * 0.8}
                             text={romanizedLyrics.split('\n')[idx]}
+                            onClick={() => handleSeek(time / 1000)}
                         />
                     )}
                     {translatedLyrics && (
                         <LyricLine
                             alignment={settings.alignment}
                             className="lyric-line synchronized translation"
-                            fontSize={settings.fontSize}
+                            fontSize={settings.fontSize * 0.8}
                             text={translatedLyrics.split('\n')[idx]}
+                            onClick={() => handleSeek(time / 1000)}
                         />
                     )}
                 </div>
diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index 2fd3a534a..55314c56a 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -97,7 +97,7 @@ export const UnsynchronizedLyrics = ({
                         <LyricLine
                             alignment={settings.alignment}
                             className="lyric-line unsynchronized romaji"
-                            fontSize={settings.fontSizeUnsync}
+                            fontSize={settings.fontSizeUnsync * 0.8}
                             text={romanizedLines[idx]}
                         />
                     )}
@@ -105,7 +105,7 @@ export const UnsynchronizedLyrics = ({
                         <LyricLine
                             alignment={settings.alignment}
                             className="lyric-line unsynchronized translation"
-                            fontSize={settings.fontSizeUnsync}
+                            fontSize={settings.fontSizeUnsync * 0.8}
                             text={translatedLines[idx]}
                         />
                     )}
diff --git a/src/renderer/features/player/components/full-screen-player-queue.tsx b/src/renderer/features/player/components/full-screen-player-queue.tsx
index 6906477cf..16e072191 100644
--- a/src/renderer/features/player/components/full-screen-player-queue.tsx
+++ b/src/renderer/features/player/components/full-screen-player-queue.tsx
@@ -98,7 +98,7 @@ export const FullScreenPlayerQueue = () => {
             items.push({
                 active: activeTab === 'visualizer',
                 icon: <RiFileTextLine size="1.5rem" />,
-                label: 'Visualizer',
+                label: t('page.fullscreenPlayer.visualizer'),
                 onClick: () => setStore({ activeTab: 'visualizer' }),
             });
         }
diff --git a/src/renderer/features/settings/components/playback/lyric-settings.tsx b/src/renderer/features/settings/components/playback/lyric-settings.tsx
index d6fce37a8..153f13793 100644
--- a/src/renderer/features/settings/components/playback/lyric-settings.tsx
+++ b/src/renderer/features/settings/components/playback/lyric-settings.tsx
@@ -9,6 +9,7 @@ import styled from 'styled-components';
 import { LyricSource } from '/@/renderer/api/types';
 import { useTranslation } from 'react-i18next';
 import { TextInput, Select } from '@mantine/core';
+import { languages } from '/@/i18n/i18n';
 
 const localSettings = isElectron() ? window.electron.localSettings : null;
 
@@ -120,7 +121,7 @@ export const LyricSettings = () => {
         {
             control: (
                 <Select
-                    data={['en', 'zh']}
+                    data={languages}
                     value={settings.targetLanguage}
                     onChange={(value) => {
                         setSettings({ lyrics: { ...settings, targetLanguage: value } });
@@ -128,7 +129,7 @@ export const LyricSettings = () => {
                 />
             ),
             description: t('Target language for translation'),
-            title: t('Target Language'),
+            title: t('setting.targetLanguage', { postProcess: 'sentenceCase' }),
         },
         {
             control: (
@@ -141,7 +142,7 @@ export const LyricSettings = () => {
                 />
             ),
             description: t('API provider for translation'),
-            title: t('API Provider'),
+            title: t('setting.apiProvider', { postProcess: 'sentenceCase' }),
         },
         {
             control: (
@@ -153,7 +154,7 @@ export const LyricSettings = () => {
                 />
             ),
             description: t('API Key for translation'),
-            title: t('API Key'),
+            title: t('setting.apiKey', { postProcess: 'sentenceCase' }),
         },
     ];
 

From 0bc8d843a7eb3e8b00e345add718251e179daa5b Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Thu, 19 Sep 2024 23:04:07 +0800
Subject: [PATCH 09/17] Fallback Fix Dot in Path Error

---
 .erb/configs/webpack.config.renderer.dev.ts | 1 +
 src/renderer/features/lyrics/lyrics.tsx     | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.erb/configs/webpack.config.renderer.dev.ts b/.erb/configs/webpack.config.renderer.dev.ts
index 46e51530d..9474b7fd0 100644
--- a/.erb/configs/webpack.config.renderer.dev.ts
+++ b/.erb/configs/webpack.config.renderer.dev.ts
@@ -163,6 +163,7 @@ const configuration: webpack.Configuration = {
             publicPath: '/',
         },
         historyApiFallback: {
+            disableDotRule: true,
             verbose: true,
         },
         setupMiddlewares(middlewares) {
diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 5c3a6cdef..42f9a2c95 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -150,12 +150,12 @@ export const Lyrics = () => {
             setShowRomaji(!showRomaji);
             return;
         }
-        const kuroshiro = new Kuroshiro();
-        await kuroshiro.init(new KuromojiAnalyzer());
         if (!lyrics) return;
         const originalLyrics = Array.isArray(lyrics.lyrics)
             ? lyrics.lyrics.map(([, line]) => line).join('\n')
             : lyrics.lyrics;
+        const kuroshiro = new Kuroshiro();
+        await kuroshiro.init(new KuromojiAnalyzer());
         const romanizedText = await kuroshiro.convert(originalLyrics, { to: 'romaji' });
         setRomanizedLyrics(romanizedText);
         setShowRomaji(true);
@@ -166,11 +166,11 @@ export const Lyrics = () => {
             setShowTranslation(!showTranslation);
             return;
         }
-        const { apiKey, targetLanguage } = lyricsSettings;
         if (!lyrics) return;
         const originalLyrics = Array.isArray(lyrics.lyrics)
             ? lyrics.lyrics.map(([, line]) => line).join('\n')
             : lyrics.lyrics;
+        const { apiKey, targetLanguage } = lyricsSettings;
         const response = await axios({
             baseURL: 'https://api.cognitive.microsofttranslator.com',
             data: [

From 8d796ae748a6b6f3455b1d983a7ef138f84e916d Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Fri, 20 Sep 2024 01:35:03 +0800
Subject: [PATCH 10/17] Final Lint for Translation Module

---
 release/app/package-lock.json           |  3 ++-
 src/renderer/features/lyrics/lyrics.tsx | 11 +----------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/release/app/package-lock.json b/release/app/package-lock.json
index 2396932a2..b7bcb4af1 100644
--- a/release/app/package-lock.json
+++ b/release/app/package-lock.json
@@ -2311,7 +2311,8 @@
         "ws": {
             "version": "8.18.0",
             "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
-            "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw=="
+            "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+            "requires": {}
         },
         "xml2js": {
             "version": "0.4.23",
diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 42f9a2c95..3d37b7bd2 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -7,7 +7,6 @@ import styled from 'styled-components';
 import Kuroshiro from '@sglkc/kuroshiro';
 import KuromojiAnalyzer from '@sglkc/kuroshiro-analyzer-kuromoji';
 import axios from 'axios';
-import { v4 as uuidv4 } from 'uuid';
 import { useSongLyricsByRemoteId, useSongLyricsBySong } from './queries/lyric-query';
 import { SynchronizedLyrics, SynchronizedLyricsProps } from './synchronized-lyrics';
 import { Spinner, TextTitle } from '/@/renderer/components';
@@ -172,24 +171,16 @@ export const Lyrics = () => {
             : lyrics.lyrics;
         const { apiKey, targetLanguage } = lyricsSettings;
         const response = await axios({
-            baseURL: 'https://api.cognitive.microsofttranslator.com',
             data: [
                 {
                     text: originalLyrics,
                 },
             ],
             headers: {
-                'Content-type': 'application/json',
                 'Ocp-Apim-Subscription-Key': apiKey as string,
-                'X-ClientTraceId': uuidv4().toString(),
             },
             method: 'post',
-            params: {
-                'api-version': '3.0',
-                to: targetLanguage,
-            },
-            responseType: 'json',
-            url: '/translate',
+            url: `https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=${targetLanguage}`,
         });
         const TranslatedText = response.data[0].translations[0].text;
         setTranslatedLyrics(TranslatedText);

From 83b981e97b4ab4be786926191b710dd56d12189b Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Fri, 20 Sep 2024 19:05:07 +0800
Subject: [PATCH 11/17] Add Google Cloud Translation API Support

---
 src/renderer/features/lyrics/lyrics.tsx       | 43 +++++++++++++------
 .../components/playback/lyric-settings.tsx    |  6 +--
 src/renderer/store/settings.store.ts          | 12 +++---
 3 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 3d37b7bd2..5f2b73413 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -169,20 +169,37 @@ export const Lyrics = () => {
         const originalLyrics = Array.isArray(lyrics.lyrics)
             ? lyrics.lyrics.map(([, line]) => line).join('\n')
             : lyrics.lyrics;
-        const { apiKey, targetLanguage } = lyricsSettings;
-        const response = await axios({
-            data: [
-                {
-                    text: originalLyrics,
+        const { apiKey, apiProvider, targetLanguage } = lyricsSettings;
+        let TranslatedText = '';
+        if (apiProvider === 'Microsoft Azure') {
+            const response = await axios({
+                data: [
+                    {
+                        Text: originalLyrics,
+                    },
+                ],
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Ocp-Apim-Subscription-Key': apiKey,
                 },
-            ],
-            headers: {
-                'Ocp-Apim-Subscription-Key': apiKey as string,
-            },
-            method: 'post',
-            url: `https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=${targetLanguage}`,
-        });
-        const TranslatedText = response.data[0].translations[0].text;
+                method: 'post',
+                url: `https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=${targetLanguage as string}`,
+            });
+            TranslatedText = response.data[0].translations[0].text;
+        } else if (apiProvider === 'Google Cloud') {
+            const response = await axios({
+                data: {
+                    format: 'text',
+                    q: originalLyrics,
+                },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                method: 'post',
+                url: `https://translation.googleapis.com/language/translate/v2?target=${targetLanguage as string}&key=${apiKey}`,
+            });
+            TranslatedText = response.data.data.translations[0].translatedText;
+        }
         setTranslatedLyrics(TranslatedText);
         setShowTranslation(true);
     }, [lyrics, lyricsSettings, translatedLyrics, showTranslation]);
diff --git a/src/renderer/features/settings/components/playback/lyric-settings.tsx b/src/renderer/features/settings/components/playback/lyric-settings.tsx
index 153f13793..f7d6a6ca2 100644
--- a/src/renderer/features/settings/components/playback/lyric-settings.tsx
+++ b/src/renderer/features/settings/components/playback/lyric-settings.tsx
@@ -134,14 +134,14 @@ export const LyricSettings = () => {
         {
             control: (
                 <Select
-                    data={['Azure']}
+                    data={['Microsoft Azure', 'Google Cloud']}
                     value={settings.apiProvider}
                     onChange={(value) => {
                         setSettings({ lyrics: { ...settings, apiProvider: value } });
                     }}
                 />
             ),
-            description: t('API provider for translation'),
+            description: t('Api provider for translation'),
             title: t('setting.apiProvider', { postProcess: 'sentenceCase' }),
         },
         {
@@ -153,7 +153,7 @@ export const LyricSettings = () => {
                     }}
                 />
             ),
-            description: t('API Key for translation'),
+            description: t('Api key for translation'),
             title: t('setting.apiKey', { postProcess: 'sentenceCase' }),
         },
     ];
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index 7a731cf86..0c5b17aff 100644
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@@ -265,8 +265,8 @@ export interface SettingsState {
     };
     lyrics: {
         alignment: 'left' | 'center' | 'right';
-        apiKey: string | number | readonly string[] | undefined;
-        apiProvider: string | null | undefined;
+        apiKey: string;
+        apiProvider: string | null;
         delayMs: number;
         fetch: boolean;
         follow: boolean;
@@ -274,11 +274,10 @@ export interface SettingsState {
         fontSizeUnsync: number;
         gap: number;
         gapUnsync: number;
-        resourceLocation: string | number | readonly string[] | undefined;
         showMatch: boolean;
         showProvider: boolean;
         sources: LyricSource[];
-        targetLanguage: string | null | undefined;
+        targetLanguage: string | null;
     };
     playback: {
         audioDeviceId?: string | null;
@@ -443,8 +442,8 @@ const initialState: SettingsState = {
     },
     lyrics: {
         alignment: 'center',
-        apiKey: undefined,
-        apiProvider: undefined,
+        apiKey: '',
+        apiProvider: '',
         delayMs: 0,
         fetch: false,
         follow: true,
@@ -452,7 +451,6 @@ const initialState: SettingsState = {
         fontSizeUnsync: 20,
         gap: 5,
         gapUnsync: 0,
-        resourceLocation: undefined,
         showMatch: true,
         showProvider: true,
         sources: [],

From c6be6ff88bc9e09046d4f8d958bd9d8699d090dd Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Fri, 20 Sep 2024 19:19:01 +0800
Subject: [PATCH 12/17] Clear Unused Libraries

---
 package-lock.json | 14 --------------
 package.json      |  1 -
 2 files changed, 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dc633ac68..2f768139d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -98,7 +98,6 @@
                 "@types/react-window-infinite-loader": "^1.0.6",
                 "@types/styled-components": "^5.1.26",
                 "@types/terser-webpack-plugin": "^5.0.4",
-                "@types/uuid": "^10.0.0",
                 "@types/webpack-bundle-analyzer": "^4.4.1",
                 "@types/webpack-env": "^1.16.3",
                 "@typescript-eslint/eslint-plugin": "^5.47.0",
@@ -5562,13 +5561,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/@types/uuid": {
-            "version": "10.0.0",
-            "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
-            "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/@types/verror": {
             "version": "1.10.10",
             "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.10.tgz",
@@ -27954,12 +27946,6 @@
             "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
             "dev": true
         },
-        "@types/uuid": {
-            "version": "10.0.0",
-            "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
-            "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
-            "dev": true
-        },
         "@types/verror": {
             "version": "1.10.10",
             "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.10.tgz",
diff --git a/package.json b/package.json
index 06659b000..0286ab5e6 100644
--- a/package.json
+++ b/package.json
@@ -219,7 +219,6 @@
         "@types/react-window-infinite-loader": "^1.0.6",
         "@types/styled-components": "^5.1.26",
         "@types/terser-webpack-plugin": "^5.0.4",
-        "@types/uuid": "^10.0.0",
         "@types/webpack-bundle-analyzer": "^4.4.1",
         "@types/webpack-env": "^1.16.3",
         "@typescript-eslint/eslint-plugin": "^5.47.0",

From b50f07dd41482106e374c40801fc593f4b9071d2 Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Fri, 20 Sep 2024 19:30:56 +0800
Subject: [PATCH 13/17] Lint

---
 .../settings/components/playback/lyric-settings.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/renderer/features/settings/components/playback/lyric-settings.tsx b/src/renderer/features/settings/components/playback/lyric-settings.tsx
index f7d6a6ca2..bf4bff4ab 100644
--- a/src/renderer/features/settings/components/playback/lyric-settings.tsx
+++ b/src/renderer/features/settings/components/playback/lyric-settings.tsx
@@ -3,12 +3,18 @@ import {
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
 import { useLyricsSettings, useSettingsStoreActions } from '/@/renderer/store';
-import { MultiSelect, MultiSelectProps, NumberInput, Switch } from '/@/renderer/components';
+import {
+    Select,
+    MultiSelect,
+    MultiSelectProps,
+    TextInput,
+    NumberInput,
+    Switch,
+} from '/@/renderer/components';
 import isElectron from 'is-electron';
 import styled from 'styled-components';
 import { LyricSource } from '/@/renderer/api/types';
 import { useTranslation } from 'react-i18next';
-import { TextInput, Select } from '@mantine/core';
 import { languages } from '/@/i18n/i18n';
 
 const localSettings = isElectron() ? window.electron.localSettings : null;

From 9983a926d7a40d8a8d2c05278a3ed509c1e04ecc Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Fri, 20 Sep 2024 19:35:23 +0800
Subject: [PATCH 14/17] Revert All Romaji Related

---
 .erb/configs/webpack.config.renderer.dev.ts   |   1 -
 package-lock.json                             | 101 ------------------
 package.json                                  |   2 -
 src/i18n/locales/en.json                      |   1 -
 .../features/lyrics/lyrics-actions.tsx        |  15 ---
 src/renderer/features/lyrics/lyrics.tsx       |  23 ----
 .../features/lyrics/synchronized-lyrics.tsx   |  11 --
 .../features/lyrics/unsynchronized-lyrics.tsx |  14 ---
 8 files changed, 168 deletions(-)

diff --git a/.erb/configs/webpack.config.renderer.dev.ts b/.erb/configs/webpack.config.renderer.dev.ts
index 9474b7fd0..46e51530d 100644
--- a/.erb/configs/webpack.config.renderer.dev.ts
+++ b/.erb/configs/webpack.config.renderer.dev.ts
@@ -163,7 +163,6 @@ const configuration: webpack.Configuration = {
             publicPath: '/',
         },
         historyApiFallback: {
-            disableDotRule: true,
             verbose: true,
         },
         setupMiddlewares(middlewares) {
diff --git a/package-lock.json b/package-lock.json
index 2f768139d..5fb22d74f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,8 +23,6 @@
                 "@mantine/modals": "^6.0.17",
                 "@mantine/notifications": "^6.0.17",
                 "@mantine/utils": "^6.0.17",
-                "@sglkc/kuroshiro": "^1.0.1",
-                "@sglkc/kuroshiro-analyzer-kuromoji": "^1.0.1",
                 "@tanstack/react-query": "^4.32.1",
                 "@tanstack/react-query-devtools": "^4.32.1",
                 "@tanstack/react-query-persist-client": "^4.32.1",
@@ -4658,47 +4656,6 @@
                 "node": ">=14.0.0"
             }
         },
-        "node_modules/@sglkc/kuromoji": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/@sglkc/kuromoji/-/kuromoji-1.1.0.tgz",
-            "integrity": "sha512-uKxXYUM5XNjZw0ia0yMYTI3jHSh/c1gEMNvcvS6J49B4mI+PAq8iRYPTxh2ma0RWm45LyWWrILxCJAIXpi/pww==",
-            "license": "Apache-2.0",
-            "dependencies": {
-                "async": "^2.0.1",
-                "doublearray": "0.0.2",
-                "fflate": "^0.8.0"
-            }
-        },
-        "node_modules/@sglkc/kuromoji/node_modules/async": {
-            "version": "2.6.4",
-            "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-            "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-            "license": "MIT",
-            "dependencies": {
-                "lodash": "^4.17.14"
-            }
-        },
-        "node_modules/@sglkc/kuroshiro": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/@sglkc/kuroshiro/-/kuroshiro-1.0.1.tgz",
-            "integrity": "sha512-pDjzQa+KHcoKas5i0nf2uxNh0cFZlgsKzvj5AHMkAF7cvKTayN+Rllb/X+S3Gz8MpMk6pV95Uyu90+iyq3w+/A==",
-            "license": "MIT",
-            "dependencies": {
-                "@babel/runtime": "^7.14.0"
-            },
-            "engines": {
-                "node": ">=6.5.0"
-            }
-        },
-        "node_modules/@sglkc/kuroshiro-analyzer-kuromoji": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/@sglkc/kuroshiro-analyzer-kuromoji/-/kuroshiro-analyzer-kuromoji-1.0.1.tgz",
-            "integrity": "sha512-qWEhhmru2T6YKhOx1g6BNxxm8K0GIKyd5NY6ynrGH/lLwxNvfv2osh2PAeoSJhjloVrLe7wn/NEp/5+IoRN88A==",
-            "license": "MIT",
-            "dependencies": {
-                "@sglkc/kuromoji": "^1.0.1"
-            }
-        },
         "node_modules/@sindresorhus/is": {
             "version": "4.6.0",
             "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -9792,12 +9749,6 @@
             "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
             "dev": true
         },
-        "node_modules/doublearray": {
-            "version": "0.0.2",
-            "resolved": "https://registry.npmjs.org/doublearray/-/doublearray-0.0.2.tgz",
-            "integrity": "sha512-aw55FtZzT6AmiamEj2kvmR6BuFqvYgKZUkfQ7teqVRNqD5UE0rw8IeW/3gieHNKQ5sPuDKlljWEn4bzv5+1bHw==",
-            "license": "MIT"
-        },
         "node_modules/duplexer": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -12279,12 +12230,6 @@
                 "pend": "~1.2.0"
             }
         },
-        "node_modules/fflate": {
-            "version": "0.8.2",
-            "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
-            "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
-            "license": "MIT"
-        },
         "node_modules/file-entry-cache": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -27160,42 +27105,6 @@
             "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
             "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA=="
         },
-        "@sglkc/kuromoji": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/@sglkc/kuromoji/-/kuromoji-1.1.0.tgz",
-            "integrity": "sha512-uKxXYUM5XNjZw0ia0yMYTI3jHSh/c1gEMNvcvS6J49B4mI+PAq8iRYPTxh2ma0RWm45LyWWrILxCJAIXpi/pww==",
-            "requires": {
-                "async": "^2.0.1",
-                "doublearray": "0.0.2",
-                "fflate": "^0.8.0"
-            },
-            "dependencies": {
-                "async": {
-                    "version": "2.6.4",
-                    "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-                    "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-                    "requires": {
-                        "lodash": "^4.17.14"
-                    }
-                }
-            }
-        },
-        "@sglkc/kuroshiro": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/@sglkc/kuroshiro/-/kuroshiro-1.0.1.tgz",
-            "integrity": "sha512-pDjzQa+KHcoKas5i0nf2uxNh0cFZlgsKzvj5AHMkAF7cvKTayN+Rllb/X+S3Gz8MpMk6pV95Uyu90+iyq3w+/A==",
-            "requires": {
-                "@babel/runtime": "^7.14.0"
-            }
-        },
-        "@sglkc/kuroshiro-analyzer-kuromoji": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/@sglkc/kuroshiro-analyzer-kuromoji/-/kuroshiro-analyzer-kuromoji-1.0.1.tgz",
-            "integrity": "sha512-qWEhhmru2T6YKhOx1g6BNxxm8K0GIKyd5NY6ynrGH/lLwxNvfv2osh2PAeoSJhjloVrLe7wn/NEp/5+IoRN88A==",
-            "requires": {
-                "@sglkc/kuromoji": "^1.0.1"
-            }
-        },
         "@sindresorhus/is": {
             "version": "4.6.0",
             "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -31027,11 +30936,6 @@
             "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
             "dev": true
         },
-        "doublearray": {
-            "version": "0.0.2",
-            "resolved": "https://registry.npmjs.org/doublearray/-/doublearray-0.0.2.tgz",
-            "integrity": "sha512-aw55FtZzT6AmiamEj2kvmR6BuFqvYgKZUkfQ7teqVRNqD5UE0rw8IeW/3gieHNKQ5sPuDKlljWEn4bzv5+1bHw=="
-        },
         "duplexer": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -32838,11 +32742,6 @@
                 "pend": "~1.2.0"
             }
         },
-        "fflate": {
-            "version": "0.8.2",
-            "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
-            "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
-        },
         "file-entry-cache": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
diff --git a/package.json b/package.json
index 0286ab5e6..c7a1c2984 100644
--- a/package.json
+++ b/package.json
@@ -304,8 +304,6 @@
         "@mantine/modals": "^6.0.17",
         "@mantine/notifications": "^6.0.17",
         "@mantine/utils": "^6.0.17",
-        "@sglkc/kuroshiro": "^1.0.1",
-        "@sglkc/kuroshiro-analyzer-kuromoji": "^1.0.1",
         "@tanstack/react-query": "^4.32.1",
         "@tanstack/react-query-devtools": "^4.32.1",
         "@tanstack/react-query-persist-client": "^4.32.1",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index fb5293e8c..de403c7c2 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -95,7 +95,6 @@
         "resetToDefault": "reset to default",
         "restartRequired": "restart required",
         "right": "right",
-        "romaji": "romaji",
         "save": "save",
         "saveAndReplace": "save and replace",
         "saveAs": "save as",
diff --git a/src/renderer/features/lyrics/lyrics-actions.tsx b/src/renderer/features/lyrics/lyrics-actions.tsx
index 3632ba977..75d6b3a82 100644
--- a/src/renderer/features/lyrics/lyrics-actions.tsx
+++ b/src/renderer/features/lyrics/lyrics-actions.tsx
@@ -18,7 +18,6 @@ interface LyricsActionsProps {
 
     onRemoveLyric: () => void;
     onResetLyric: () => void;
-    onRomanizeLyric: () => void;
     onSearchOverride: (params: LyricsOverride) => void;
     onTranslateLyric: () => void;
     setIndex: (idx: number) => void;
@@ -29,7 +28,6 @@ export const LyricsActions = ({
     languages,
     onRemoveLyric,
     onResetLyric,
-    onRomanizeLyric,
     onSearchOverride,
     onTranslateLyric,
     setIndex,
@@ -145,19 +143,6 @@ export const LyricsActions = ({
                     </Button>
                 ) : null}
             </Box>
-
-            <Box style={{ position: 'absolute', right: 0, top: -100 }}>
-                {isDesktop && sources.length ? (
-                    <Button
-                        uppercase
-                        disabled={isActionsDisabled}
-                        variant="subtle"
-                        onClick={onRomanizeLyric}
-                    >
-                        {t('common.romaji', { postProcess: 'sentenceCase' })}
-                    </Button>
-                ) : null}
-            </Box>
         </Box>
     );
 };
diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 5f2b73413..7a49f379a 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -4,8 +4,6 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RiInformationFill } from 'react-icons/ri';
 import styled from 'styled-components';
-import Kuroshiro from '@sglkc/kuroshiro';
-import KuromojiAnalyzer from '@sglkc/kuroshiro-analyzer-kuromoji';
 import axios from 'axios';
 import { useSongLyricsByRemoteId, useSongLyricsBySong } from './queries/lyric-query';
 import { SynchronizedLyrics, SynchronizedLyricsProps } from './synchronized-lyrics';
@@ -89,8 +87,6 @@ export const Lyrics = () => {
     const currentSong = useCurrentSong();
     const lyricsSettings = useLyricsSettings();
     const [index, setIndex] = useState(0);
-    const [romanizedLyrics, setRomanizedLyrics] = useState<string | null>(null);
-    const [showRomaji, setShowRomaji] = useState<boolean>(false);
     const [translatedLyrics, setTranslatedLyrics] = useState<string | null>(null);
     const [showTranslation, setShowTranslation] = useState<boolean>(false);
 
@@ -144,22 +140,6 @@ export const Lyrics = () => {
         );
     }, [currentSong?.id, currentSong?.serverId]);
 
-    const handleOnRomanizeLyric = useCallback(async () => {
-        if (romanizedLyrics) {
-            setShowRomaji(!showRomaji);
-            return;
-        }
-        if (!lyrics) return;
-        const originalLyrics = Array.isArray(lyrics.lyrics)
-            ? lyrics.lyrics.map(([, line]) => line).join('\n')
-            : lyrics.lyrics;
-        const kuroshiro = new Kuroshiro();
-        await kuroshiro.init(new KuromojiAnalyzer());
-        const romanizedText = await kuroshiro.convert(originalLyrics, { to: 'romaji' });
-        setRomanizedLyrics(romanizedText);
-        setShowRomaji(true);
-    }, [lyrics, romanizedLyrics, showRomaji]);
-
     const handleOnTranslateLyric = useCallback(async () => {
         if (translatedLyrics) {
             setShowTranslation(!showTranslation);
@@ -273,13 +253,11 @@ export const Lyrics = () => {
                                 {synced ? (
                                     <SynchronizedLyrics
                                         {...(lyrics as SynchronizedLyricsProps)}
-                                        romanizedLyrics={showRomaji ? romanizedLyrics : null}
                                         translatedLyrics={showTranslation ? translatedLyrics : null}
                                     />
                                 ) : (
                                     <UnsynchronizedLyrics
                                         {...(lyrics as UnsynchronizedLyricsProps)}
-                                        romanizedLyrics={showRomaji ? romanizedLyrics : null}
                                         translatedLyrics={showTranslation ? translatedLyrics : null}
                                     />
                                 )}
@@ -294,7 +272,6 @@ export const Lyrics = () => {
                         setIndex={setIndex}
                         onRemoveLyric={handleOnRemoveLyric}
                         onResetLyric={handleOnResetLyric}
-                        onRomanizeLyric={handleOnRomanizeLyric}
                         onSearchOverride={handleOnSearchOverride}
                         onTranslateLyric={handleOnTranslateLyric}
                     />
diff --git a/src/renderer/features/lyrics/synchronized-lyrics.tsx b/src/renderer/features/lyrics/synchronized-lyrics.tsx
index 5bcc5160e..53ee960b4 100644
--- a/src/renderer/features/lyrics/synchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/synchronized-lyrics.tsx
@@ -55,7 +55,6 @@ const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
 
 export interface SynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
     lyrics: SynchronizedLyricsArray;
-    romanizedLyrics?: string | null;
     translatedLyrics?: string | null;
 }
 
@@ -65,7 +64,6 @@ export const SynchronizedLyrics = ({
     name,
     remote,
     source,
-    romanizedLyrics,
     translatedLyrics,
 }: SynchronizedLyricsProps) => {
     const playersRef = PlayersRef;
@@ -377,15 +375,6 @@ export const SynchronizedLyrics = ({
                         text={text}
                         onClick={() => handleSeek(time / 1000)}
                     />
-                    {romanizedLyrics && (
-                        <LyricLine
-                            alignment={settings.alignment}
-                            className="lyric-line synchronized romaji"
-                            fontSize={settings.fontSize * 0.8}
-                            text={romanizedLyrics.split('\n')[idx]}
-                            onClick={() => handleSeek(time / 1000)}
-                        />
-                    )}
                     {translatedLyrics && (
                         <LyricLine
                             alignment={settings.alignment}
diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index 55314c56a..1d94baf26 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -6,7 +6,6 @@ import { useLyricsSettings } from '/@/renderer/store';
 
 export interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
     lyrics: string;
-    romanizedLyrics?: string | null;
     translatedLyrics?: string | null;
 }
 
@@ -47,7 +46,6 @@ export const UnsynchronizedLyrics = ({
     name,
     remote,
     source,
-    romanizedLyrics,
     translatedLyrics,
 }: UnsynchronizedLyricsProps) => {
     const settings = useLyricsSettings();
@@ -55,10 +53,6 @@ export const UnsynchronizedLyrics = ({
         return lyrics.split('\n');
     }, [lyrics]);
 
-    const romanizedLines = useMemo(() => {
-        return romanizedLyrics ? romanizedLyrics.split('\n') : [];
-    }, [romanizedLyrics]);
-
     const translatedLines = useMemo(() => {
         return translatedLyrics ? translatedLyrics.split('\n') : [];
     }, [translatedLyrics]);
@@ -93,14 +87,6 @@ export const UnsynchronizedLyrics = ({
                         id={`lyric-${idx}`}
                         text={text}
                     />
-                    {romanizedLines[idx] && (
-                        <LyricLine
-                            alignment={settings.alignment}
-                            className="lyric-line unsynchronized romaji"
-                            fontSize={settings.fontSizeUnsync * 0.8}
-                            text={romanizedLines[idx]}
-                        />
-                    )}
                     {translatedLines[idx] && (
                         <LyricLine
                             alignment={settings.alignment}

From 930332d483c9e61d31cb0936cacb901ddb58849c Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Sat, 21 Sep 2024 12:48:00 +0800
Subject: [PATCH 15/17] Hide Settings in Web

---
 src/main/features/core/lyrics/translate.ts    | 50 +++++++++++++++++++
 src/renderer/features/lyrics/lyrics.tsx       | 40 +++------------
 .../components/playback/lyric-settings.tsx    |  3 ++
 3 files changed, 61 insertions(+), 32 deletions(-)
 create mode 100644 src/main/features/core/lyrics/translate.ts

diff --git a/src/main/features/core/lyrics/translate.ts b/src/main/features/core/lyrics/translate.ts
new file mode 100644
index 000000000..3e9db0ec1
--- /dev/null
+++ b/src/main/features/core/lyrics/translate.ts
@@ -0,0 +1,50 @@
+import axios from 'axios';
+
+export const translateLyrics = async (
+    originalLyrics: string,
+    apiKey: string,
+    apiProvider: string | null,
+    targetLanguage: string | null,
+) => {
+    let TranslatedText = '';
+    if (apiProvider === 'Microsoft Azure') {
+        try {
+            const response = await axios({
+                data: [
+                    {
+                        Text: originalLyrics,
+                    },
+                ],
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Ocp-Apim-Subscription-Key': apiKey,
+                },
+                method: 'post',
+                url: `https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=${targetLanguage as string}`,
+            });
+            TranslatedText = response.data[0].translations[0].text;
+        } catch (e) {
+            console.error('Microsoft Azure translate request got an error!', e);
+            return null;
+        }
+    } else if (apiProvider === 'Google Cloud') {
+        try {
+            const response = await axios({
+                data: {
+                    format: 'text',
+                    q: originalLyrics,
+                },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                method: 'post',
+                url: `https://translation.googleapis.com/language/translate/v2?target=${targetLanguage as string}&key=${apiKey}`,
+            });
+            TranslatedText = response.data.data.translations[0].translatedText;
+        } catch (e) {
+            console.error('Google Cloud translate request got an error!', e);
+            return null;
+        }
+    }
+    return TranslatedText;
+};
diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 7a49f379a..f606300bc 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -4,7 +4,6 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RiInformationFill } from 'react-icons/ri';
 import styled from 'styled-components';
-import axios from 'axios';
 import { useSongLyricsByRemoteId, useSongLyricsBySong } from './queries/lyric-query';
 import { SynchronizedLyrics, SynchronizedLyricsProps } from './synchronized-lyrics';
 import { Spinner, TextTitle } from '/@/renderer/components';
@@ -18,6 +17,7 @@ import { FullLyricsMetadata, LyricSource, LyricsOverride } from '/@/renderer/api
 import { LyricsActions } from '/@/renderer/features/lyrics/lyrics-actions';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { queryClient } from '/@/renderer/lib/react-query';
+import { translateLyrics } from '/@/main/features/core/lyrics/translate';
 
 const ActionsContainer = styled.div`
     position: absolute;
@@ -88,7 +88,7 @@ export const Lyrics = () => {
     const lyricsSettings = useLyricsSettings();
     const [index, setIndex] = useState(0);
     const [translatedLyrics, setTranslatedLyrics] = useState<string | null>(null);
-    const [showTranslation, setShowTranslation] = useState<boolean>(false);
+    const [showTranslation, setShowTranslation] = useState(false);
 
     const { data, isInitialLoading } = useSongLyricsBySong(
         {
@@ -150,36 +150,12 @@ export const Lyrics = () => {
             ? lyrics.lyrics.map(([, line]) => line).join('\n')
             : lyrics.lyrics;
         const { apiKey, apiProvider, targetLanguage } = lyricsSettings;
-        let TranslatedText = '';
-        if (apiProvider === 'Microsoft Azure') {
-            const response = await axios({
-                data: [
-                    {
-                        Text: originalLyrics,
-                    },
-                ],
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Ocp-Apim-Subscription-Key': apiKey,
-                },
-                method: 'post',
-                url: `https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=${targetLanguage as string}`,
-            });
-            TranslatedText = response.data[0].translations[0].text;
-        } else if (apiProvider === 'Google Cloud') {
-            const response = await axios({
-                data: {
-                    format: 'text',
-                    q: originalLyrics,
-                },
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                method: 'post',
-                url: `https://translation.googleapis.com/language/translate/v2?target=${targetLanguage as string}&key=${apiKey}`,
-            });
-            TranslatedText = response.data.data.translations[0].translatedText;
-        }
+        const TranslatedText: string | null = await translateLyrics(
+            originalLyrics,
+            apiKey,
+            apiProvider,
+            targetLanguage,
+        );
         setTranslatedLyrics(TranslatedText);
         setShowTranslation(true);
     }, [lyrics, lyricsSettings, translatedLyrics, showTranslation]);
diff --git a/src/renderer/features/settings/components/playback/lyric-settings.tsx b/src/renderer/features/settings/components/playback/lyric-settings.tsx
index bf4bff4ab..a23a02bcc 100644
--- a/src/renderer/features/settings/components/playback/lyric-settings.tsx
+++ b/src/renderer/features/settings/components/playback/lyric-settings.tsx
@@ -135,6 +135,7 @@ export const LyricSettings = () => {
                 />
             ),
             description: t('Target language for translation'),
+            isHidden: !isElectron(),
             title: t('setting.targetLanguage', { postProcess: 'sentenceCase' }),
         },
         {
@@ -148,6 +149,7 @@ export const LyricSettings = () => {
                 />
             ),
             description: t('Api provider for translation'),
+            isHidden: !isElectron(),
             title: t('setting.apiProvider', { postProcess: 'sentenceCase' }),
         },
         {
@@ -160,6 +162,7 @@ export const LyricSettings = () => {
                 />
             ),
             description: t('Api key for translation'),
+            isHidden: !isElectron(),
             title: t('setting.apiKey', { postProcess: 'sentenceCase' }),
         },
     ];

From 75116c7c3ef34af78dfdc6614ab08803b6720c09 Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Mon, 23 Sep 2024 15:02:30 +0800
Subject: [PATCH 16/17] Endpoint Scope Note and Implement Directory Change

---
 src/renderer/features/lyrics/lyrics.tsx                         | 2 +-
 .../features/lyrics/queries/lyric-translate.ts}                 | 0
 .../features/settings/components/playback/lyric-settings.tsx    | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/{main/features/core/lyrics/translate.ts => renderer/features/lyrics/queries/lyric-translate.ts} (100%)

diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index f606300bc..4189cf47b 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -5,6 +5,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { RiInformationFill } from 'react-icons/ri';
 import styled from 'styled-components';
 import { useSongLyricsByRemoteId, useSongLyricsBySong } from './queries/lyric-query';
+import { translateLyrics } from './queries/lyric-translate';
 import { SynchronizedLyrics, SynchronizedLyricsProps } from './synchronized-lyrics';
 import { Spinner, TextTitle } from '/@/renderer/components';
 import { ErrorFallback } from '/@/renderer/features/action-required';
@@ -17,7 +18,6 @@ import { FullLyricsMetadata, LyricSource, LyricsOverride } from '/@/renderer/api
 import { LyricsActions } from '/@/renderer/features/lyrics/lyrics-actions';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { queryClient } from '/@/renderer/lib/react-query';
-import { translateLyrics } from '/@/main/features/core/lyrics/translate';
 
 const ActionsContainer = styled.div`
     position: absolute;
diff --git a/src/main/features/core/lyrics/translate.ts b/src/renderer/features/lyrics/queries/lyric-translate.ts
similarity index 100%
rename from src/main/features/core/lyrics/translate.ts
rename to src/renderer/features/lyrics/queries/lyric-translate.ts
diff --git a/src/renderer/features/settings/components/playback/lyric-settings.tsx b/src/renderer/features/settings/components/playback/lyric-settings.tsx
index a23a02bcc..b9bd70eec 100644
--- a/src/renderer/features/settings/components/playback/lyric-settings.tsx
+++ b/src/renderer/features/settings/components/playback/lyric-settings.tsx
@@ -161,7 +161,7 @@ export const LyricSettings = () => {
                     }}
                 />
             ),
-            description: t('Api key for translation'),
+            description: t('Api key for translation (Support global service endpoint only)'),
             isHidden: !isElectron(),
             title: t('setting.apiKey', { postProcess: 'sentenceCase' }),
         },

From 9c0190ae99a8a85359e8449df31b554d45301528 Mon Sep 17 00:00:00 2001
From: DrENDzZ <godzmichael@outlook.com>
Date: Mon, 23 Sep 2024 15:43:31 +0800
Subject: [PATCH 17/17] lyrics translation i18n

---
 src/i18n/locales/en.json                      |  9 +++--
 src/renderer/features/lyrics/lyrics.tsx       |  9 ++---
 .../lyrics/queries/lyric-translate.ts         | 16 ++++-----
 .../components/playback/lyric-settings.tsx    | 35 ++++++++++++-------
 src/renderer/store/settings.store.ts          | 12 +++----
 5 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index de403c7c2..e91b3527a 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -458,8 +458,6 @@
         "albumBackground_description": "adds a background image for album pages containing the album art",
         "albumBackgroundBlur": "album background image blur size",
         "albumBackgroundBlur_description": "adjusts the amount of blur applied to the album background image",
-        "apiProvider": "api provider",
-        "apiKey": "api key",
         "applicationHotkeys": "application hotkeys",
         "applicationHotkeys_description": "configure application hotkeys. toggle the checkbox to set as a global hotkey (desktop only)",
         "artistConfiguration": "album artist page configuration",
@@ -644,7 +642,6 @@
         "skipPlaylistPage_description": "when navigating to a playlist, go to the playlist song list page instead of the default page",
         "startMinimized": "start minimized",
         "startMinimized_description": "start the application in system tray",
-        "targetLanguage": "target language",
         "theme": "theme",
         "theme_description": "sets the theme to use for the application",
         "themeDark": "theme (dark)",
@@ -658,6 +655,12 @@
         "transcodeBitrate_description": "selects the bitrate to transcode. 0 means let the server pick",
         "transcodeFormat": "format to transcode",
         "transcodeFormat_description": "selects the format to transcode. leave empty to let the server decide",
+        "translationApiProvider": "translation api provider",
+        "translationApiProvider_description": "api provider for translation",
+        "translationApiKey": "translation api key",
+        "translationApiKey_description": "api key for translation (Support global service endpoint only)",
+        "translationTargetLanguage": "translation target language",
+        "translationTargetLanguage_description": "target language for translation",
         "trayEnabled": "show tray",
         "trayEnabled_description": "show/hide tray icon/menu. if disabled, also disables minimize/exit to tray",
         "useSystemTheme": "use system theme",
diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 4189cf47b..33d8e32cc 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -149,12 +149,13 @@ export const Lyrics = () => {
         const originalLyrics = Array.isArray(lyrics.lyrics)
             ? lyrics.lyrics.map(([, line]) => line).join('\n')
             : lyrics.lyrics;
-        const { apiKey, apiProvider, targetLanguage } = lyricsSettings;
+        const { translationApiKey, translationApiProvider, translationTargetLanguage } =
+            lyricsSettings;
         const TranslatedText: string | null = await translateLyrics(
             originalLyrics,
-            apiKey,
-            apiProvider,
-            targetLanguage,
+            translationApiKey,
+            translationApiProvider,
+            translationTargetLanguage,
         );
         setTranslatedLyrics(TranslatedText);
         setShowTranslation(true);
diff --git a/src/renderer/features/lyrics/queries/lyric-translate.ts b/src/renderer/features/lyrics/queries/lyric-translate.ts
index 3e9db0ec1..f6d6039b6 100644
--- a/src/renderer/features/lyrics/queries/lyric-translate.ts
+++ b/src/renderer/features/lyrics/queries/lyric-translate.ts
@@ -2,12 +2,12 @@ import axios from 'axios';
 
 export const translateLyrics = async (
     originalLyrics: string,
-    apiKey: string,
-    apiProvider: string | null,
-    targetLanguage: string | null,
+    translationApiKey: string,
+    translationApiProvider: string | null,
+    translationTargetLanguage: string | null,
 ) => {
     let TranslatedText = '';
-    if (apiProvider === 'Microsoft Azure') {
+    if (translationApiProvider === 'Microsoft Azure') {
         try {
             const response = await axios({
                 data: [
@@ -17,17 +17,17 @@ export const translateLyrics = async (
                 ],
                 headers: {
                     'Content-Type': 'application/json',
-                    'Ocp-Apim-Subscription-Key': apiKey,
+                    'Ocp-Apim-Subscription-Key': translationApiKey,
                 },
                 method: 'post',
-                url: `https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=${targetLanguage as string}`,
+                url: `https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=${translationTargetLanguage as string}`,
             });
             TranslatedText = response.data[0].translations[0].text;
         } catch (e) {
             console.error('Microsoft Azure translate request got an error!', e);
             return null;
         }
-    } else if (apiProvider === 'Google Cloud') {
+    } else if (translationApiProvider === 'Google Cloud') {
         try {
             const response = await axios({
                 data: {
@@ -38,7 +38,7 @@ export const translateLyrics = async (
                     'Content-Type': 'application/json',
                 },
                 method: 'post',
-                url: `https://translation.googleapis.com/language/translate/v2?target=${targetLanguage as string}&key=${apiKey}`,
+                url: `https://translation.googleapis.com/language/translate/v2?target=${translationTargetLanguage as string}&key=${translationApiKey}`,
             });
             TranslatedText = response.data.data.translations[0].translatedText;
         } catch (e) {
diff --git a/src/renderer/features/settings/components/playback/lyric-settings.tsx b/src/renderer/features/settings/components/playback/lyric-settings.tsx
index b9bd70eec..7d396f2ef 100644
--- a/src/renderer/features/settings/components/playback/lyric-settings.tsx
+++ b/src/renderer/features/settings/components/playback/lyric-settings.tsx
@@ -128,42 +128,53 @@ export const LyricSettings = () => {
             control: (
                 <Select
                     data={languages}
-                    value={settings.targetLanguage}
+                    value={settings.translationTargetLanguage}
                     onChange={(value) => {
-                        setSettings({ lyrics: { ...settings, targetLanguage: value } });
+                        setSettings({ lyrics: { ...settings, translationTargetLanguage: value } });
                     }}
                 />
             ),
-            description: t('Target language for translation'),
+            description: t('setting.translationTargetLanguage', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
             isHidden: !isElectron(),
-            title: t('setting.targetLanguage', { postProcess: 'sentenceCase' }),
+            title: t('setting.translationTargetLanguage', { postProcess: 'sentenceCase' }),
         },
         {
             control: (
                 <Select
                     data={['Microsoft Azure', 'Google Cloud']}
-                    value={settings.apiProvider}
+                    value={settings.translationApiProvider}
                     onChange={(value) => {
-                        setSettings({ lyrics: { ...settings, apiProvider: value } });
+                        setSettings({ lyrics: { ...settings, translationApiProvider: value } });
                     }}
                 />
             ),
-            description: t('Api provider for translation'),
+            description: t('setting.translationApiProvider', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
             isHidden: !isElectron(),
-            title: t('setting.apiProvider', { postProcess: 'sentenceCase' }),
+            title: t('setting.translationApiProvider', { postProcess: 'sentenceCase' }),
         },
         {
             control: (
                 <TextInput
-                    value={settings.apiKey}
+                    value={settings.translationApiKey}
                     onChange={(e) => {
-                        setSettings({ lyrics: { ...settings, apiKey: e.currentTarget.value } });
+                        setSettings({
+                            lyrics: { ...settings, translationApiKey: e.currentTarget.value },
+                        });
                     }}
                 />
             ),
-            description: t('Api key for translation (Support global service endpoint only)'),
+            description: t('setting.translationApiKey', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
             isHidden: !isElectron(),
-            title: t('setting.apiKey', { postProcess: 'sentenceCase' }),
+            title: t('setting.translationApiKey', { postProcess: 'sentenceCase' }),
         },
     ];
 
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index 0c5b17aff..dc03bda5a 100644
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@@ -265,8 +265,6 @@ export interface SettingsState {
     };
     lyrics: {
         alignment: 'left' | 'center' | 'right';
-        apiKey: string;
-        apiProvider: string | null;
         delayMs: number;
         fetch: boolean;
         follow: boolean;
@@ -277,7 +275,9 @@ export interface SettingsState {
         showMatch: boolean;
         showProvider: boolean;
         sources: LyricSource[];
-        targetLanguage: string | null;
+        translationApiKey: string;
+        translationApiProvider: string | null;
+        translationTargetLanguage: string | null;
     };
     playback: {
         audioDeviceId?: string | null;
@@ -442,8 +442,6 @@ const initialState: SettingsState = {
     },
     lyrics: {
         alignment: 'center',
-        apiKey: '',
-        apiProvider: '',
         delayMs: 0,
         fetch: false,
         follow: true,
@@ -454,7 +452,9 @@ const initialState: SettingsState = {
         showMatch: true,
         showProvider: true,
         sources: [],
-        targetLanguage: 'en',
+        translationApiKey: '',
+        translationApiProvider: '',
+        translationTargetLanguage: 'en',
     },
     playback: {
         audioDeviceId: undefined,