diff --git a/src/main/features/core/lyrics/netease.ts b/src/main/features/core/lyrics/netease.ts
index ebb8f4a8..e0642910 100644
--- a/src/main/features/core/lyrics/netease.ts
+++ b/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');
diff --git a/src/renderer/features/lyrics/lyric-line.tsx b/src/renderer/features/lyrics/lyric-line.tsx
index 06e3471f..290d3693 100644
--- a/src/renderer/features/lyrics/lyric-line.tsx
+++ b/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 (
-
- {text}
-
+
+ {lines.map((line, index) => (
+ {line}
+ ))}
+
+
);
};