Lyrics Translation and Romaji (Fulfill #732) [Translation Part]

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",

src/i18n/locales/en.json

@@ -109,6 +109,7 @@
         "trackNumber": "track",
         "trackGain": "track gain",
         "trackPeak": "track peak",
+        "translation": "translation",
         "unknown": "unknown",
         "version": "version",
         "year": "year",
@@ -355,7 +356,8 @@
             },
             "lyrics": "lyrics",
             "related": "related",
-            "upNext": "up next"
+            "upNext": "up next",
+            "visualizer": "visualizer"
         },
         "genreList": {
             "showAlbums": "show $t(entity.genre_one) $t(entity.album_other)",
@@ -456,6 +458,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",
@@ -640,6 +644,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)",

src/renderer/features/lyrics/lyrics-actions.tsx

@@ -19,6 +19,7 @@ interface LyricsActionsProps {
     onRemoveLyric: () => void;
     onResetLyric: () => void;
     onSearchOverride: (params: LyricsOverride) => void;
+    onTranslateLyric: () => void;
     setIndex: (idx: number) => void;
 }
 
@@ -28,6 +29,7 @@ export const LyricsActions = ({
     onRemoveLyric,
     onResetLyric,
     onSearchOverride,
+    onTranslateLyric,
     setIndex,
 }: LyricsActionsProps) => {
     const { t } = useTranslation();
@@ -120,7 +122,6 @@ export const LyricsActions = ({
                 {isDesktop && sources.length ? (
                     <Button
                         uppercase
-                        color="red"
                         disabled={isActionsDisabled}
                         variant="subtle"
                         onClick={onRemoveLyric}
@@ -129,6 +130,19 @@ export const LyricsActions = ({
                     </Button>
                 ) : null}
             </Box>
+
+            <Box style={{ position: 'absolute', right: 0, top: -50 }}>
+                {isDesktop && sources.length ? (
+                    <Button
+                        uppercase
+                        disabled={isActionsDisabled}
+                        variant="subtle"
+                        onClick={onTranslateLyric}
+                    >
+                        {t('common.translation', { postProcess: 'sentenceCase' })}
+                    </Button>
+                ) : null}
+            </Box>
         </Box>
     );
 };

src/renderer/features/lyrics/lyrics.tsx

@@ -5,14 +5,15 @@ 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';
 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,7 +85,10 @@ const ScrollContainer = styled(motion.div)`
 
 export const Lyrics = () => {
     const currentSong = useCurrentSong();
+    const lyricsSettings = useLyricsSettings();
     const [index, setIndex] = useState(0);
+    const [translatedLyrics, setTranslatedLyrics] = useState<string | null>(null);
+    const [showTranslation, setShowTranslation] = useState(false);
 
     const { data, isInitialLoading } = useSongLyricsBySong(
         {
@@ -96,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);
     }, []);
@@ -123,6 +140,26 @@ export const Lyrics = () => {
         );
     }, [currentSong?.id, currentSong?.serverId]);
 
+    const handleOnTranslateLyric = useCallback(async () => {
+        if (translatedLyrics) {
+            setShowTranslation(!showTranslation);
+            return;
+        }
+        if (!lyrics) return;
+        const originalLyrics = Array.isArray(lyrics.lyrics)
+            ? lyrics.lyrics.map(([, line]) => line).join('\n')
+            : lyrics.lyrics;
+        const { apiKey, apiProvider, targetLanguage } = lyricsSettings;
+        const TranslatedText: string | null = await translateLyrics(
+            originalLyrics,
+            apiKey,
+            apiProvider,
+            targetLanguage,
+        );
+        setTranslatedLyrics(TranslatedText);
+        setShowTranslation(true);
+    }, [lyrics, lyricsSettings, translatedLyrics, showTranslation]);
+
     const { isInitialLoading: isOverrideLoading } = useSongLyricsByRemoteId({
         options: {
             enabled: !!override,
@@ -150,19 +187,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() }));
@@ -203,10 +227,14 @@ export const Lyrics = () => {
                                 transition={{ duration: 0.5 }}
                             >
                                 {synced ? (
-                                    <SynchronizedLyrics {...(lyrics as SynchronizedLyricsProps)} />
+                                    <SynchronizedLyrics
+                                        {...(lyrics as SynchronizedLyricsProps)}
+                                        translatedLyrics={showTranslation ? translatedLyrics : null}
+                                    />
                                 ) : (
                                     <UnsynchronizedLyrics
                                         {...(lyrics as UnsynchronizedLyricsProps)}
+                                        translatedLyrics={showTranslation ? translatedLyrics : null}
                                     />
                                 )}
                             </ScrollContainer>
@@ -221,6 +249,7 @@ export const Lyrics = () => {
                         onRemoveLyric={handleOnRemoveLyric}
                         onResetLyric={handleOnResetLyric}
                         onSearchOverride={handleOnSearchOverride}
+                        onTranslateLyric={handleOnTranslateLyric}
                     />
                 </ActionsContainer>
             </LyricsContainer>

src/renderer/features/lyrics/queries/lyric-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;
+};

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,25 @@ 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 * 0.8}
+                            text={translatedLyrics.split('\n')[idx]}
+                            onClick={() => handleSeek(time / 1000)}
+                        />
+                    )}
+                </div>
             ))}
         </SynchronizedLyricsContainer>
     );