lyrics translation i18n

jeffvli · Sep 23, 2024 · 9c0190a · 9c0190a
1 parent 75116c7
commit 9c0190a
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,