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

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 * 0.8}
+                            text={translatedLines[idx]}
+                        />
+                    )}
+                </div>
             ))}
         </UnsynchronizedLyricsContainer>
     );