update netease translation lyric line handling (#979)

- lyric should be appended to the original lyric line with a custom splitter
- the custom splitter is now handled in LyricLine

src/main/features/core/lyrics/netease.ts

@@ -201,25 +201,23 @@ function mergeLyrics(original: string | undefined, translated: string | undefine
         return original;
     }
 
-    // Iterate through each line of the original LRC. If a translation exists for
-    // the same timestamp, insert it as a new, fully-formatted LRC line.
-    const finalLines = original.split('\n').flatMap((line) => {
+    // Iterate through each line of the original LRC. If a translation exists for the same timestamp, append the translated text after the original text.
+    const finalLines = original.split('\n').map((line) => {
         const match = line.match(lrcLineRegex);
 
         if (match) {
             const timestamp = match[1];
+            const originalText = match[2].trim();
             const translatedText = translatedMap.get(timestamp);
 
-            if (translatedText) {
-                // Return an array containing both the original line and the new translated line.
-                // flatMap will flatten this into the final array of lines.
-                const translatedLine = `[${timestamp}]${translatedText}`;
-                return [line, translatedLine];
+            if (translatedText && originalText) {
+                // Append and add a break delimiter to separate the original and translated text
+                return [`[${timestamp}]${originalText}`, translatedText].join('_BREAK_');
             }
         }
 
-        // If no match or no translation is found, return only the original line.
-        return [line];
+        // If no match or no translation is found, return the original line unchanged.
+        return line;
     });
 
     return finalLines.join('\n');

src/renderer/features/lyrics/lyric-line.tsx

@@ -3,7 +3,8 @@ import { ComponentPropsWithoutRef } from 'react';
 
 import styles from './lyric-line.module.css';
 
-import { TextTitle } from '/@/shared/components/text-title/text-title';
+import { Box } from '/@/shared/components/box/box';
+import { Stack } from '/@/shared/components/stack/stack';
 
 interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
     alignment: 'center' | 'left' | 'right';
@@ -12,8 +13,10 @@ interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
 }
 
 export const LyricLine = ({ alignment, className, fontSize, text, ...props }: LyricLineProps) => {
+    const lines = text.split('_BREAK_');
+
     return (
-        <TextTitle
+        <Box
             className={clsx(styles.lyricLine, className)}
             style={{
                 fontSize,
@@ -21,7 +24,11 @@ export const LyricLine = ({ alignment, className, fontSize, text, ...props }: Ly
             }}
             {...props}
         >
-            {text}
-        </TextTitle>
+            <Stack gap={0}>
+                {lines.map((line, index) => (
+                    <span key={index}>{line}</span>
+                ))}
+            </Stack>
+        </Box>
     );
 };