antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-03-02 20:27:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Xudong Zhou 2024-09-24 11:25:17 +08:00 • committed by GitHub
parent e3946a9413
commit 31492fa9ef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 243 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/renderer/features/lyrics/unsynchronized-lyrics.tsx
View file

@ -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>
);