smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-13 03:11:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(synced-lyrics): Better-Lyrics Styling for Synced-Lyrics (#2554)

Browse Source 
Co-authored-by: JellyBrick <shlee1503@naver.com>
This commit is contained in:
KimJammer
2024-12-24 18:15:36 -05:00
committed by GitHub
parent 2bf67b941e
commit 51da259c97
7 changed files with 216 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx
View File

@ -1,4 +1,4 @@
import { createEffect, createMemo } from 'solid-js';
import { createEffect, createMemo, For } from 'solid-js';
import { currentTime } from './LyricsContainer';
@ -32,7 +32,16 @@ export const SyncedLine = ({ line }: SyncedLineProps) => {
return config()?.defaultTextString ?? '';
});
// prettier-ignore
if (!text()) {
return (
<yt-formatted-string
text={{
runs: [{ text: '' }],
}}
/>
);
}
return (
<div
ref={ref}
@ -41,14 +50,33 @@ export const SyncedLine = ({ line }: SyncedLineProps) => {
_ytAPI?.seekTo(line.timeInMs / 1000);
}}
>
<yt-formatted-string
class="text-lyrics description ytmusic-description-shelf-renderer"
text={{
runs: [
{ text: config()?.showTimeCodes ? `[${line.time}]` : '' },
{ text: text() }],
}}
/>
<div class="text-lyrics description ytmusic-description-shelf-renderer">
<yt-formatted-string
text={{
runs: [{ text: config()?.showTimeCodes ? `[${line.time}] ` : '' }],
}}
/>
<For each={text().split(' ')}>
{(word, index) => {
return (
<span
style={{
'transition-delay': `${index() * 0.05}s`,
'animation-delay': `${index() * 0.05}s`,
'--lyrics-duration:': `${line.duration / 1000}s;`,
}}
>
<yt-formatted-string
text={{
runs: [{ text: `${word} ` }],
}}
/>
</span>
);
}}
</For>
</div>
</div>
);
};