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

feat(synced-lyrics): multiple lyric sources (#2383)

Browse Source 
Co-authored-by: JellyBrick <shlee1503@naver.com>
This commit is contained in:
Angelos Bouklis
2024-12-25 00:44:29 +02:00
committed by GitHub
parent 5c9ded8779
commit 533b96d1f6
28 changed files with 1527 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/plugins/synced-lyrics/renderer/renderer.tsx
View File

@ -1,22 +1,93 @@
import { createSignal, Show } from 'solid-js';
import { createEffect, createSignal, onMount, Show } from 'solid-js';
import { LyricsContainer } from './components/LyricsContainer';
import { LyricsPicker } from './components/LyricsPicker';
import { selectors } from './utils';
import type { VideoDetails } from '@/types/video-details';
import type { SyncedLyricsPluginConfig } from '../types';
export const [isVisible, setIsVisible] = createSignal<boolean>(false);
export const [config, setConfig] =
createSignal<SyncedLyricsPluginConfig | null>(null);
export const [playerState, setPlayerState] = createSignal<VideoDetails | null>(
null,
);
createEffect(() => {
if (!config()?.enabled) return;
const root = document.documentElement;
// Set the line effect
switch (config()?.lineEffect) {
case 'scale':
root.style.setProperty(
'--previous-lyrics',
'var(--ytmusic-text-primary)',
);
root.style.setProperty('--current-lyrics', 'var(--ytmusic-text-primary)');
root.style.setProperty('--size-lyrics', '1.2');
root.style.setProperty('--offset-lyrics', '0');
root.style.setProperty('--lyric-width', '83%');
break;
case 'offset':
root.style.setProperty(
'--previous-lyrics',
'var(--ytmusic-text-primary)',
);
root.style.setProperty('--current-lyrics', 'var(--ytmusic-text-primary)');
root.style.setProperty('--size-lyrics', '1');
root.style.setProperty('--offset-lyrics', '5%');
root.style.setProperty('--lyric-width', '100%');
break;
case 'focus':
root.style.setProperty(
'--previous-lyrics',
'var(--ytmusic-text-secondary)',
);
root.style.setProperty('--current-lyrics', 'var(--ytmusic-text-primary)');
root.style.setProperty('--size-lyrics', '1');
root.style.setProperty('--offset-lyrics', '0');
root.style.setProperty('--lyric-width', '100%');
break;
}
});
export const LyricsRenderer = () => {
const [stickyRef, setStickRef] = createSignal<HTMLElement | null>(null);
// prettier-ignore
onMount(() => {
const tab = document.querySelector<HTMLElement>(selectors.body.tabRenderer)!;
const mousemoveListener = (e: MouseEvent) => {
const { top } = tab.getBoundingClientRect();
const { clientHeight: height } = stickyRef()!;
const showPicker = (e.clientY - top - 5) <= height;
if (showPicker) {
// picker visible
stickyRef()!.style.setProperty('--top', '0');
} else {
// picker hidden
stickyRef()!.style.setProperty('--top', '-50%');
}
};
tab.addEventListener('mousemove', mousemoveListener);
return () => tab.removeEventListener('mousemove', mousemoveListener);
});
return (
<Show when={isVisible()}>
<LyricsContainer />
<div class="lyrics-renderer">
<div class="lyrics-renderer-sticky" ref={setStickRef}>
<LyricsPicker />
<div
id="divider"
class="style-scope ytmusic-guide-section-renderer"
style={{ width: '100%', margin: '0' }}
></div>
</div>
<LyricsContainer />
</div>
</Show>
);
};