Translation Display Normalization (#982)

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

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import isElectron from 'is-electron';
-import { Fragment, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import styles from './synchronized-lyrics.module.css';
 
@@ -338,25 +338,18 @@ export const SynchronizedLyrics = ({
                 />
             )}
             {lyrics.map(([time, text], idx) => (
-                <Fragment key={idx}>
                 <LyricLine
                     alignment={settings.alignment}
                     className="lyric-line synchronized"
                     fontSize={settings.fontSize}
                     id={`lyric-${idx}`}
+                    key={idx}
                     onClick={() => handleSeek(time / 1000)}
-                        text={text}
+                    text={
+                        text +
+                        (translatedLyrics ? `_BREAK_${translatedLyrics.split('\n')[idx]}` : '')
+                    }
                 />
-                    {translatedLyrics && (
-                        <LyricLine
-                            alignment={settings.alignment}
-                            className="lyric-line synchronized translation"
-                            fontSize={settings.fontSize * 0.8}
-                            onClick={() => handleSeek(time / 1000)}
-                            text={translatedLyrics.split('\n')[idx]}
-                        />
-                    )}
-                </Fragment>
             ))}
         </div>
     );

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

@@ -50,23 +50,14 @@ export const UnsynchronizedLyrics = ({
                 />
             )}
             {lines.map((text, idx) => (
-                <div key={idx}>
                 <LyricLine
                     alignment={settings.alignment}
                     className="lyric-line unsynchronized"
                     fontSize={settings.fontSizeUnsync}
                     id={`lyric-${idx}`}
-                        text={text}
+                    key={idx}
+                    text={text + (translatedLines[idx] ? `_BREAK_${translatedLines[idx]}` : '')}
                 />
-                    {translatedLines[idx] && (
-                        <LyricLine
-                            alignment={settings.alignment}
-                            className="lyric-line unsynchronized translation"
-                            fontSize={settings.fontSizeUnsync * 0.8}
-                            text={translatedLines[idx]}
-                        />
-                    )}
-                </div>
             ))}
         </div>
     );