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

fix: apply fix from eslint

Browse Source
This commit is contained in:
JellyBrick
2025-07-10 14:14:43 +09:00
parent 2cfc38757a
commit 1da83ff27c
29 changed files with 1654 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/plugins/synced-lyrics/renderer/components/PlainLyrics.tsx
View File

@ -10,11 +10,13 @@ interface PlainLyricsProps {
export const PlainLyrics = (props: PlainLyricsProps) => {
const [romanization, setRomanization] = createSignal('');
createEffect(async () => {
createEffect(() => {
if (!config()?.romanization) return;
const input = canonicalize(props.line);
setRomanization(canonicalize(await romanize(input)));
romanize(input).then((result) => {
setRomanization(canonicalize(result));
});
});
return (

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

@ -1,13 +1,14 @@
import { createEffect, createMemo, For, Show, createSignal } from 'solid-js';
import { VirtualizerHandle } from 'virtua/solid';
import { LineLyrics } from '@/plugins/synced-lyrics/types';
import { config } from '../renderer';
import { _ytAPI } from '..';
import { canonicalize, romanize, simplifyUnicode } from '../utils';
import { VirtualizerHandle } from 'virtua/solid';
import { LineLyrics } from '@/plugins/synced-lyrics/types';
interface SyncedLineProps {
scroller: VirtualizerHandle;
index: number;
@ -27,80 +28,57 @@ export const SyncedLine = (props: SyncedLineProps) => {
const [romanization, setRomanization] = createSignal('');
createEffect(async () => {
createEffect(() => {
if (!config()?.romanization) return;
const input = canonicalize(text());
setRomanization(canonicalize(await romanize(input)));
romanize(input).then((result) => {
setRomanization(canonicalize(result));
});
});
if (!text()) {
return (
<yt-formatted-string
text={{
runs: [{ text: '' }],
}}
/>
);
}
return (
<div
class={`synced-line ${props.status}`}
onClick={() => {
_ytAPI?.seekTo((props.line.timeInMs + 10) / 1000);
}}
>
<div dir="auto" class="description ytmusic-description-shelf-renderer">
<Show
when={text()}
fallback={
<yt-formatted-string
text={{
runs: [
{ text: config()?.showTimeCodes ? `[${props.line.time}] ` : '' },
],
runs: [{ text: '' }],
}}
/>
}
>
<div
class={`synced-line ${props.status}`}
onClick={() => {
_ytAPI?.seekTo((props.line.timeInMs + 10) / 1000);
}}
>
<div dir="auto" class="description ytmusic-description-shelf-renderer">
<yt-formatted-string
text={{
runs: [
{
text: config()?.showTimeCodes ? `[${props.line.time}] ` : '',
},
],
}}
/>
<div
class="text-lyrics"
ref={(div: HTMLDivElement) => {
// TODO: Investigate the animation, even though the duration is properly set, all lines have the same animation duration
div.style.setProperty(
'--lyrics-duration',
`${props.line.duration / 1000}s`,
'important',
);
}}
style={{ 'display': 'flex', 'flex-direction': 'column' }}
>
<span>
<For each={text().split(' ')}>
{(word, index) => {
return (
<span
style={{
'transition-delay': `${index() * 0.05}s`,
'animation-delay': `${index() * 0.05}s`,
}}
>
<yt-formatted-string
text={{
runs: [{ text: `${word} ` }],
}}
/>
</span>
);
}}
</For>
</span>
<Show
when={
config()?.romanization &&
simplifyUnicode(text()) !== simplifyUnicode(romanization())
}
<div
class="text-lyrics"
ref={(div: HTMLDivElement) => {
// TODO: Investigate the animation, even though the duration is properly set, all lines have the same animation duration
div.style.setProperty(
'--lyrics-duration',
`${props.line.duration / 1000}s`,
'important',
);
}}
style={{ 'display': 'flex', 'flex-direction': 'column' }}
>
<span class="romaji">
<For each={romanization().split(' ')}>
<span>
<For each={text().split(' ')}>
{(word, index) => {
return (
<span
@ -119,9 +97,37 @@ export const SyncedLine = (props: SyncedLineProps) => {
}}
</For>
</span>
</Show>
<Show
when={
config()?.romanization &&
simplifyUnicode(text()) !== simplifyUnicode(romanization())
}
>
<span class="romaji">
<For each={romanization().split(' ')}>
{(word, index) => {
return (
<span
style={{
'transition-delay': `${index() * 0.05}s`,
'animation-delay': `${index() * 0.05}s`,
}}
>
<yt-formatted-string
text={{
runs: [{ text: `${word} ` }],
}}
/>
</span>
);
}}
</For>
</span>
</Show>
</div>
</div>
</div>
</div>
</Show>
);
};

4
src/plugins/synced-lyrics/renderer/index.ts
View File

@ -14,7 +14,7 @@ import type { SyncedLyricsPluginConfig } from '../types';
export let _ytAPI: YoutubePlayer | null = null;
export let netFetch: (
url: string,
init?: RequestInit
init?: RequestInit,
) => Promise<[number, string, Record<string, string>]>;
export const renderer = createRenderer<
@ -56,7 +56,7 @@ export const renderer = createRenderer<
if (!this.updateTimestampInterval) {
this.updateTimestampInterval = setInterval(
() => setCurrentTime((_ytAPI?.getCurrentTime() ?? 0) * 1000),
100
100,
);
}

4
src/plugins/synced-lyrics/renderer/utils.tsx
View File

@ -10,11 +10,11 @@ import pinyin from 'tiny-pinyin';
import { lazy } from 'lazy-var';
import { detect } from 'tinyld';
import { waitForElement } from '@/utils/wait-for-element';
import { LyricsRenderer, setIsVisible } from './renderer';
import { detect } from 'tinyld';
export const selectors = {
head: '#tabsContent > .tab-header:nth-of-type(2)',
body: {