feature: complete lyric features

package.json

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

src/app.css

@@ -29,3 +29,10 @@ h2 {
 .text-shadow-none {
     text-shadow: none;
 }
+
+body,
+html {
+  position: fixed;
+  overflow: hidden;
+  overscroll-behavior: none;
+}

src/lib/components/lyrics/lyricLine.svelte

@@ -4,14 +4,23 @@
     import type { LyricPos } from './type';
     import type { Spring } from '$lib/graphics/spring/spring';
 
+    const viewportWidth = document.documentElement.clientWidth;
+    const scaleCurrentLine = viewportWidth > 640 ? 1.02 : 1.045 ;
+
     export let line: ScriptItem;
     export let index: number;
     export let debugMode: Boolean;
+    export let lyricClick: Function;
+
     let ref: HTMLDivElement;
+    let clickMask: HTMLSpanElement;
 
     let time = 0;
     let positionX: number = 0;
     let positionY: number = 0;
+    let scale = 1;
+    let opacity = 1;
+    let stopped = false;
     let lastPosX: number | undefined = undefined;
     let lastPosY: number | undefined = undefined;
     let lastUpdateY: number | undefined = undefined;
@@ -28,7 +37,7 @@
         time = (new Date().getTime() - lastUpdateY) / 1000;
         springY.update(time);
         positionY = springY.getCurrentPosition();
-        if (!springY.arrived()) {
+        if (!springY.arrived() && !stopped) {
             requestAnimationFrame(updateY);
         }
         lastUpdateY = new Date().getTime();
@@ -66,6 +75,12 @@
 
     export const setCurrent = (isCurrent: boolean) => {
         isCurrentLyric = isCurrent;
+        opacity = isCurrent ? 1 : 0.36;
+        scale = isCurrent ? scaleCurrentLine : 1;
+    };
+
+    export const setBlur = (blur: number) => {
+        ref.style.filter = `blur(${blur}px)`;
     };
 
     export const update = (pos: LyricPos, delay: number = 0) => {
@@ -73,10 +88,11 @@
             lastPosX = pos.x;
             lastPosY = pos.y;
         }
-        springY = createSpring(lastPosY, pos.y, .126, .85, delay);
+        springX!.setTargetPosition(pos.x, delay);
-        springX = createSpring(lastPosX, pos.x, .126, .85, delay);
+        springY!.setTargetPosition(pos.y, delay);
         lastUpdateY = new Date().getTime();
         lastUpdateX = new Date().getTime();
+        stopped = false;
         requestAnimationFrame(updateY);
         requestAnimationFrame(updateX);
         lastPosX = pos.x;
@@ -96,16 +112,51 @@
         lastPosY = pos.y;
         positionX = pos.x;
         positionY = pos.y;
+        springX = createSpring(pos.x, pos.x, 0.126, 0.8);
+        springY = createSpring(pos.y, pos.y, 0.126, 0.8);
+    };
+
+    export const stop = () => {
+        stopped = true;
     };
 
     export const getRef = () => ref;
 </script>
 
-<div style="transform: translateY({positionY}px) translateX({positionX}px);" class="absolute z-50" bind:this={ref}>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    style="transform: translate3d({positionX}px, {positionY}px, 0); scale: {scale}; 
+    transition-property: scale, opacity; transition-duration: 0.5s; transition-timing-function: ease-in-out; opacity: {opacity};
+    transform-origin: center left;"
+    class="absolute z-50 w-full pr-12 lg:pr-16 cursor-default py-5"
+    bind:this={ref}
+    on:touchstart={() => {
+        clickMask.style.backgroundColor = "rgba(255,255,255,.3)";
+    }}
+    on:touchend={() => {
+        clickMask.style.backgroundColor = "transparent";
+    }}
+    on:click={() => {
+        lyricClick(index);
+    }}
+>
+    <span class="absolute w-[calc(100%-2.5rem)] lg:w-[calc(100%-2.75rem)] h-full 
+    -translate-x-2 lg:-translate-x-5 -translate-y-5 rounded-lg duration-300 lg:hover:bg-[rgba(255,255,255,.15)]" bind:this={clickMask}>
+
+    </span>
     {#if debugMode}
-        <span class="text-lg absolute -translate-y-7">Line idx: {index}, duration: {(line.end - line.start).toFixed(3)}</span>
+        <span class="text-lg absolute -translate-y-7">
+            {index}: duration: {(line.end - line.start).toFixed(3)}, {line.start.toFixed(3)}~{line.end.toFixed(3)}
+        </span>
     {/if}
-    <span class={`text-white text-5xl font-semibold text-shadow-lg ${!isCurrentLyric && 'opacity-50'} `}>
+    <span class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold text-shadow-lg mr-4`}>
         {line.text}
     </span>
+    {#if line.translation}
+        <br />
+        <span class={`pl-2 relative text-xl lg:text-2xl top-2 duration-300`}>
+            {line.translation}
+        </span>
+    {/if}
 </div>

src/lib/components/lyrics/newLyrics.svelte

@@ -3,9 +3,17 @@
     import { onMount } from 'svelte';
     import type { ScriptItem } from '$lib/lyrics/type';
     import LyricLine from './lyricLine.svelte';
-    import type { LyricLayout, LyricPos } from './type';
     import createLyricsSearcher from '$lib/lyrics/lyricSearcher';
 
+    // constants
+    const viewportHeight = document.documentElement.clientHeight;
+    const viewportWidth = document.documentElement.clientWidth;
+    const marginY = viewportWidth > 640 ? 36 : 0 ;
+    const currentLyrictTop = viewportHeight * 0.02;
+    const deceleration = 0.95; // Velocity decay factor for inertia
+    const minVelocity = 0.1; // Minimum velocity to stop inertia
+    document.body.style.overflow = 'hidden';
+
     // Props
     export let originalLyrics: LrcJsonData;
     export let progress: number;
@@ -15,19 +23,31 @@
     let lyricLines: ScriptItem[] = [];
     let lyricExists = false;
     let lyricsContainer: HTMLDivElement | null;
-    let lyricLayouts: LyricLayout[] = [];
     let debugMode = false;
+    let nextUpdate = 0;
+    let lastProgress = 0;
     let showTranslation = false;
+    let scrollEventAdded = false;
+    let scrolling = false;
+    let scrollingTimeout: Timer;
+    let lastY: number; // For tracking touch movements
+    let lastTime: number; // For tracking time between touch moves
+    let velocityY = 0; // Vertical scroll velocity
+    let inertiaFrame: number; // For storing the requestAnimationFrame reference
 
     // References to lyric elements
     let lyricElements: HTMLDivElement[] = [];
     let lyricComponents: LyricLine[] = [];
     let lyricTopList: number[] = [];
-    let nextUpdate = 0;
+
-    const marginY = 48;
+    let currentLyricIndex: number;
 
     $: getLyricIndex = createLyricsSearcher(originalLyrics);
 
+    $: {
+        currentLyricIndex = getLyricIndex(progress);
+    }
+
     function initLyricComponents() {
         initLyricTopList();
         for (let i = 0; i < lyricComponents.length; i++) {
@@ -48,31 +68,24 @@
         }
     }
 
-    function computeLayout(progress: number) {
+    function computeLayout() {
         if (!originalLyrics.scripts) return;
-        const currentLyricIndex = getLyricIndex(progress);
         const currentLyricDuration =
             originalLyrics.scripts[currentLyricIndex].end - originalLyrics.scripts[currentLyricIndex].start;
-        const relativeOrigin = lyricTopList[currentLyricIndex];
+        const relativeOrigin = lyricTopList[currentLyricIndex] - currentLyrictTop;
         for (let i = 0; i < lyricElements.length; i++) {
             const currentLyricComponent = lyricComponents[i];
-            lyricLayouts[i] = {
-                blur: 0,
-                scale: 1,
-                pos: {
-                    y: lyricTopList[i] - relativeOrigin,
-                    x: 0
-                }
-            };
             let delay = 0;
             if (i <= currentLyricIndex) {
                 delay = 0;
             } else {
-                delay = 0.013 + Math.min(Math.min(currentLyricDuration, 0.3), 0.075 * (i - currentLyricIndex));
+                delay = 0.013 + Math.min(Math.min(currentLyricDuration, 0.1), 0.075 * (i - currentLyricIndex));
             }
+            const offset = Math.abs(i - currentLyricIndex);
+            let blurRadius = Math.min(offset * 1.7, 16);
+            currentLyricComponent.setBlur(blurRadius);
             currentLyricComponent.update({ x: 0, y: lyricTopList[i] - relativeOrigin }, delay);
         }
-        nextUpdate = originalLyrics.scripts[currentLyricIndex + 1].start;
     }
 
     $: {
@@ -88,9 +101,112 @@
         }
     }
 
+    function handleScroll(deltaY: number) {
+        for (let i = 0; i < lyricElements.length; i++) {
+            const currentLyricComponent = lyricComponents[i];
+            const currentY = currentLyricComponent.getInfo().y;
+            currentLyricComponent.setBlur(0);
+            currentLyricComponent.stop();
+            currentLyricComponent.setY(currentY - deltaY);
+        }
+        scrolling = true;
+        //if (scrollingTimeout) clearTimeout(scrollingTimeout);
+        scrollingTimeout = setTimeout(() => {
+            scrolling = false;
+        }, 5000);
+    }
+
+    // Handle the touch start event
+    function handleTouchStart(event: TouchEvent) {
+        lastY = event.touches[0].clientY;
+    }
+
+    // Handle the touch move event
+    function handleTouchMove(event: TouchEvent) {
+        const currentY = event.touches[0].clientY;
+        const currentTime = Date.now();
+        const deltaY = lastY - currentY; // Calculate vertical swipe distance
+        const deltaTime = currentTime - lastTime;
+
+        // Calculate the scroll velocity (change in Y over time)
+        if (deltaTime > 0) {
+            velocityY = deltaY / deltaTime;
+        }
+
+        handleScroll(deltaY); // Simulate the scroll event
+        lastY = currentY; // Update lastY for the next move event
+        lastTime = currentTime; // Update the lastTime for the next move event
+    }
+
+    // Handle the touch end event
+    function handleTouchEnd() {
+        // Start inertia scrolling based on the velocity
+        function inertiaScroll() {
+            if (Math.abs(velocityY) < minVelocity) {
+                cancelAnimationFrame(inertiaFrame);
+                return;
+            }
+            handleScroll(velocityY * 16); // Multiply by frame time (16ms) to get smooth scroll
+            velocityY *= deceleration; // Apply deceleration to velocity
+            inertiaFrame = requestAnimationFrame(inertiaScroll); // Continue scrolling in next frame
+        }
+        inertiaScroll();
+    }
+
+    $: {
+        if (lyricsContainer && !scrollEventAdded) {
+            // Wheel event for desktop
+            lyricsContainer.addEventListener(
+                'wheel',
+                (e) => {
+                    e.preventDefault();
+                    const deltaY = e.deltaY;
+                    handleScroll(deltaY);
+                },
+                { passive: false }
+            );
+
+            // Touch events for mobile
+            lyricsContainer.addEventListener('touchstart', handleTouchStart, { passive: true });
+            lyricsContainer.addEventListener('touchmove', handleTouchMove, { passive: false });
+            lyricsContainer.addEventListener('touchend', handleTouchEnd, { passive: true });
+
+            scrollEventAdded = true;
+        }
+    }
+
     $: {
         if (lyricsContainer && lyricComponents.length > 0) {
-            if (progress >= nextUpdate) computeLayout(progress);
+            if (progress >= nextUpdate - 0.5 && !scrolling) {
+                console.log("computeLayout")
+                computeLayout();
+            }
+            if (Math.abs(lastProgress - progress) > 0) {
+                scrolling = false;
+            }
+            if (lastProgress - progress > 0) {
+                computeLayout();
+                nextUpdate = progress;
+            } else {
+                const lyricLength = originalLyrics.scripts!.length;
+                const currentEnd = originalLyrics.scripts![currentLyricIndex].end;
+                const nextStart = originalLyrics.scripts![Math.min(currentLyricIndex + 1, lyricLength - 1)].start;
+                if (currentEnd !== nextStart) {
+                    nextUpdate = currentEnd;
+                }
+                else {
+                    nextUpdate = nextStart;
+                }
+            }
+        }
+        lastProgress = progress;
+    }
+
+    $: {
+        for (let i = 0; i < lyricElements.length; i++) {
+            const isCurrent = i == currentLyricIndex;
+            const currentLyricComponent = lyricComponents[i];
+            currentLyricComponent.setCurrent(isCurrent);
         }
     }
 
@@ -102,17 +218,43 @@
             debugMode = localStorage.getItem('debugMode')!.toLowerCase() === 'true';
         }
     });
+
+    // handle KeyDown event
+    function onKeyDown(e: KeyboardEvent) {
+        if (e.altKey && e.shiftKey && (e.metaKey || e.key === 'OS') && e.key === 'Enter') {
+            debugMode = !debugMode;
+            localStorage.setItem('debugMode', debugMode ? 'true' : 'false');
+        } else if (e.key === 't') {
+            showTranslation = !showTranslation;
+            localStorage.setItem('showTranslation', showTranslation ? 'true' : 'false');
+            computeLayout();
+        }
+    }
+
+    function lyricClick(lyricIndex: number) {
+        if (player === null || originalLyrics.scripts === undefined) return;
+        player.currentTime = originalLyrics.scripts[lyricIndex].start;
+        player.play();
+    }
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
+{#if debugMode}
+    <span class="text-lg absolute">
+        progress: {progress.toFixed(2)}, nextUpdate: {nextUpdate}, scrolling: {scrolling}, current: {currentLyricIndex}
+    </span>
+{/if}
+
 {#if originalLyrics && originalLyrics.scripts}
     <div
-        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
+        class="absolute top-[6.5rem] md:top-36 xl:top-0 w-screen xl:w-[52vw] px-6 md:px-12
-        text-left no-scrollbar overflow-y-auto z-[1] pt-16"
+        lg:px-[7.5rem] xl:left-[46vw] xl:px-[3vw] h-[calc(100vh-17rem)] xl:h-screen font-sans
+        text-left no-scrollbar z-[1] pt-16 overflow-hidden"
         bind:this={lyricsContainer}
     >
         {#each lyricLines as lyric, i}
-            <LyricLine line={lyric} index={i} bind:this={lyricComponents[i]} {debugMode} />
+            <LyricLine line={lyric} index={i} bind:this={lyricComponents[i]} {debugMode} {lyricClick} />
         {/each}
-        <div class="relative w-full h-[50rem]"></div>
     </div>
 {/if}

src/lib/components/lyrics/type.d.ts

@@ -1,10 +1,4 @@
 export interface LyricPos {
     x: number;
     y: number;
-}
-
-export interface LyricLayout {
-    pos: LyricPos;
-    blur: number;
-    scale: number;
 }