alikia2x/aquavox
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

improve: fine-tune lyric effect

Browse Source
This commit is contained in:
alikia2x 2024-08-02 03:16:01 +08:00
parent d19b230809
commit bd0b93a258
3 changed files with 42 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "aquavox", "name": "aquavox",
"version": "2.0.0", "version": "2.0.1",
"private": false, "private": false,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",

82
src/lib/components/newLyrics.svelte
View File

@ -20,12 +20,20 @@
export let linePosXSpringParams: Partial<spring.SpringParams> = {}; export let linePosXSpringParams: Partial<spring.SpringParams> = {};
export let linePosYSpringParams: Partial<spring.SpringParams> = {}; export let linePosYSpringParams: Partial<spring.SpringParams> = {};
export let lineScaleSpringParams: Partial<spring.SpringParams> = {}; export let lineScaleSpringParams: Partial<spring.SpringParams> = {};
export let bottomLine: any = null; export let bottomLine: Node = document.createElement('div');
export let onLyricLineClick: (line: LyricLineMouseEvent) => void = () => {}; export let onLyricLineClick: (line: LyricLineMouseEvent) => void = () => {};
export let onLyricLineContextMenu: (line: LyricLineMouseEvent) => void = () => {}; export let onLyricLineContextMenu: (line: LyricLineMouseEvent) => void = () => {};
export let lyricPlayer: CoreLyricPlayer; export let lyricPlayer: CoreLyricPlayer;
let wrapperEl: HTMLDivElement | null; let className;
export { className as class };
let lyricsElement: HTMLDivElement | null;
let bottomLineElement: HTMLDivElement | null;
let animationCanceled = false;
let animationLastTime = -1;
let lineClickHandler: (e: Event) => void;
let contextMenuHandler: (e: Event) => void;
$: { $: {
if (playing) { if (playing) {
@ -35,9 +43,6 @@
} }
} }
let animationCanceled = false;
let animationLastTime = -1;
const onFrame = (time: number) => { const onFrame = (time: number) => {
if (animationCanceled) return; if (animationCanceled) return;
if (animationLastTime === -1) { if (animationLastTime === -1) {
@ -58,7 +63,6 @@
animationCanceled = true; animationCanceled = true;
}; };
// Monitor changes to `disabled`
$: { $: {
if (!disabled) { if (!disabled) {
startAnimation(); startAnimation();
@ -68,23 +72,24 @@
} }
$: { $: {
if (playing) { if (lyricsElement) {
lyricPlayer.resume(); lyricsElement.appendChild(lyricPlayer.getElement());
} else { }
lyricPlayer.pause(); if (bottomLineElement) {
lyricPlayer.getBottomLineElement().appendChild(bottomLine);
} }
} }
$: { $: {
if (lyricPlayer && wrapperEl) { lyricPlayer.setAlignAnchor(alignAnchor);
wrapperEl.appendChild(lyricPlayer.getElement()); lyricPlayer.setAlignPosition(alignPosition);
} lyricPlayer.setEnableSpring(enableSpring);
} lyricPlayer.setEnableScale(enableScale);
lyricPlayer.setEnableBlur(enableBlur);
$: { lyricPlayer.setLinePosXSpringParams(linePosXSpringParams);
if (alignAnchor !== undefined) { lyricPlayer.setLinePosYSpringParams(linePosYSpringParams);
lyricPlayer.setAlignAnchor(alignAnchor); lyricPlayer.setLineScaleSpringParams(lineScaleSpringParams);
} lyricPlayer.setHidePassedLines(hidePassedLines);
} }
$: { $: {
@ -92,41 +97,28 @@
lyricPlayer.update(); lyricPlayer.update();
} }
$: {
lyricPlayer.setAlignPosition(alignPosition);
}
$: {
lyricPlayer.setEnableSpring(enableSpring);
}
$: {
lyricPlayer.setEnableScale(enableScale);
}
$: {
lyricPlayer.setEnableBlur(enableBlur);
}
$: { $: {
lyricPlayer.setCurrentTime(currentTime); lyricPlayer.setCurrentTime(currentTime);
} }
$: { $: {
const handler = (e: Event) => onLyricLineClick(e as LyricLineMouseEvent); lineClickHandler = (e: Event) => onLyricLineClick(e as LyricLineMouseEvent);
lyricPlayer.addEventListener('line-click', handler); lyricPlayer.addEventListener('line-click', lineClickHandler);
}
$: {
contextMenuHandler = (e: Event) => onLyricLineContextMenu(e as LyricLineMouseEvent);
lyricPlayer.addEventListener('line-contextmenu', contextMenuHandler);
} }
// Clean up on component unmount
onDestroy(() => { onDestroy(() => {
animationCanceled = true; animationCanceled = true;
lyricPlayer.dispose(); lyricPlayer.dispose();
lyricPlayer.removeEventListener('line-contextmenu', contextMenuHandler);
lyricPlayer.removeEventListener('line-click', lineClickHandler);
}); });
</script> </script>
<div <div bind:this={lyricsElement} class={className}></div>
bind:this={wrapperEl}
class="absolute top-[6.5rem] md:top-36 xl:top-0 w-screen xl:w-[52vw] px-6 md:px-12 lg:px-[7.5rem] xl:left-[45vw] <div bind:this={bottomLineElement}></div>
xl:px-[3vw] h-[calc(100vh-17rem)] xl:h-screen font-sans
text-left no-scrollbar overflow-y-auto z-[1] pt-16 font-semibold mix-blend-plus-lighter"
></div>

4
src/routes/play/[id]/+page.svelte
View File

@ -234,6 +234,10 @@
currentTime={Math.round(currentProgress * 1000)} currentTime={Math.round(currentProgress * 1000)}
playing={!paused} playing={!paused}
{onLyricLineClick} {onLyricLineClick}
alignPosition={0.3}
class="absolute top-[6.5rem] md:top-36 xl:top-0 w-screen xl:w-[52vw] px-6 md:px-12 lg:px-[7.5rem] xl:left-[45vw]
xl:px-[3vw] h-[calc(100vh-17rem)] xl:h-screen font-sans
text-left no-scrollbar overflow-y-auto z-[1] font-semibold mix-blend-plus-lighter"
/> />
<audio <audio