From 8b6afd408e32c0adea74ab025e209414f0735ee5 Mon Sep 17 00:00:00 2001
From: alikia2x <ziwen243@outlook.com>
Date: Fri, 2 Aug 2024 03:16:01 +0800
Subject: [PATCH] improve: fine-tune lyric effect

---
 package.json                        |  2 +-
 src/lib/components/newLyrics.svelte | 82 +++++++++++++----------------
 src/routes/play/[id]/+page.svelte   |  4 ++
 3 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/package.json b/package.json
index 3850db9..c62e9e8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aquavox",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": false,
   "scripts": {
     "dev": "vite dev",
diff --git a/src/lib/components/newLyrics.svelte b/src/lib/components/newLyrics.svelte
index bded294..9942bb1 100644
--- a/src/lib/components/newLyrics.svelte
+++ b/src/lib/components/newLyrics.svelte
@@ -20,12 +20,20 @@
     export let linePosXSpringParams: Partial<spring.SpringParams> = {};
     export let linePosYSpringParams: 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 onLyricLineContextMenu: (line: LyricLineMouseEvent) => void = () => {};
-
     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) {
@@ -35,9 +43,6 @@
         }
     }
 
-    let animationCanceled = false;
-    let animationLastTime = -1;
-
     const onFrame = (time: number) => {
         if (animationCanceled) return;
         if (animationLastTime === -1) {
@@ -58,7 +63,6 @@
         animationCanceled = true;
     };
 
-    // Monitor changes to `disabled`
     $: {
         if (!disabled) {
             startAnimation();
@@ -68,23 +72,24 @@
     }
 
     $: {
-        if (playing) {
-            lyricPlayer.resume();
-        } else {
-            lyricPlayer.pause();
+        if (lyricsElement) {
+            lyricsElement.appendChild(lyricPlayer.getElement());
+        }
+        if (bottomLineElement) {
+            lyricPlayer.getBottomLineElement().appendChild(bottomLine);
         }
     }
 
     $: {
-        if (lyricPlayer && wrapperEl) {
-            wrapperEl.appendChild(lyricPlayer.getElement());
-        }
-    }
-
-    $: {
-        if (alignAnchor !== undefined) {
-            lyricPlayer.setAlignAnchor(alignAnchor);
-        }
+        lyricPlayer.setAlignAnchor(alignAnchor);
+        lyricPlayer.setAlignPosition(alignPosition);
+        lyricPlayer.setEnableSpring(enableSpring);
+        lyricPlayer.setEnableScale(enableScale);
+        lyricPlayer.setEnableBlur(enableBlur);
+        lyricPlayer.setLinePosXSpringParams(linePosXSpringParams);
+        lyricPlayer.setLinePosYSpringParams(linePosYSpringParams);
+        lyricPlayer.setLineScaleSpringParams(lineScaleSpringParams);
+        lyricPlayer.setHidePassedLines(hidePassedLines);
     }
 
     $: {
@@ -92,41 +97,28 @@
         lyricPlayer.update();
     }
 
-    $: {
-        lyricPlayer.setAlignPosition(alignPosition);
-    }
-
-    $: {
-        lyricPlayer.setEnableSpring(enableSpring);
-    }
-
-    $: {
-        lyricPlayer.setEnableScale(enableScale);
-    }
-
-    $: {
-        lyricPlayer.setEnableBlur(enableBlur);
-    }
-
     $: {
         lyricPlayer.setCurrentTime(currentTime);
     }
 
     $: {
-        const handler = (e: Event) => onLyricLineClick(e as LyricLineMouseEvent);
-        lyricPlayer.addEventListener('line-click', handler);
+        lineClickHandler = (e: Event) => onLyricLineClick(e as LyricLineMouseEvent);
+        lyricPlayer.addEventListener('line-click', lineClickHandler);
+    }
+
+    $: {
+        contextMenuHandler = (e: Event) => onLyricLineContextMenu(e as LyricLineMouseEvent);
+        lyricPlayer.addEventListener('line-contextmenu', contextMenuHandler);
     }
 
-    // Clean up on component unmount
     onDestroy(() => {
         animationCanceled = true;
         lyricPlayer.dispose();
+        lyricPlayer.removeEventListener('line-contextmenu', contextMenuHandler);
+        lyricPlayer.removeEventListener('line-click', lineClickHandler);
     });
 </script>
 
-<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]
-        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>
+<div bind:this={lyricsElement} class={className}></div>
+
+<div bind:this={bottomLineElement}></div>
diff --git a/src/routes/play/[id]/+page.svelte b/src/routes/play/[id]/+page.svelte
index 514b51e..a7ab0f2 100644
--- a/src/routes/play/[id]/+page.svelte
+++ b/src/routes/play/[id]/+page.svelte
@@ -234,6 +234,10 @@
     currentTime={Math.round(currentProgress * 1000)}
     playing={!paused}
     {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