From 9c0190ae99a8a85359e8449df31b554d45301528 Mon Sep 17 00:00:00 2001 From: DrENDzZ Date: Mon, 23 Sep 2024 15:43:31 +0800 Subject: [PATCH] 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 de403c7c..e91b3527 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 4189cf47..33d8e32c 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 3e9db0ec..f6d6039b 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 b9bd70ee..7d396f2e 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: ( { - 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: ( { - 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 0c5b17af..dc03bda5 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,