Translation Module Usable

jeffvli · Sep 17, 2024 · 164138e · 164138e
1 parent 814714d
commit 164138e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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>
     );