feature: tap the lyric line to go to corresponding progress

package.json

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

src/lib/components/interactiveBox.svelte

@@ -24,7 +24,6 @@
     let isInfoTopOverflowing = false;
     let songInfoTopContainer: HTMLDivElement;
     let songInfoTopContent: HTMLSpanElement;
-    let lastTouchProgress: number;
     let userAdjustingVolume = false;
 
     const mql = window.matchMedia('(max-width: 1280px)');

src/lib/components/lyrics.svelte

@@ -11,6 +11,7 @@
     export let lyrics: string[];
     export let originalLyrics: LrcJsonData;
     export let progress: number;
+    export let player: HTMLAudioElement | null;
 
     // Local state and variables
     let getLyricIndex: Function;
@@ -289,6 +290,12 @@
         }
     });
 
+    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} />
@@ -317,7 +324,7 @@
         on:scroll={scrollHandler}
     >
         {#each lyrics as lyric, i}
-            <div bind:this={_refs[i]} class="relative h-fit text-shadow-lg">
+            <div bind:this={_refs[i]} class="relative h-fit text-shadow-lg" on:click={() => {lyricClick(i)}}>
                 {#if debugMode && refs[i] && refs[i].style !== undefined}
                     <span class="previous-lyric !text-lg !absolute !-translate-y-12">{i} &nbsp;
                         {originalLyrics.scripts[i].start} ~ {originalLyrics.scripts[i].end}
@@ -325,7 +332,7 @@
                         top: {Math.round(refs[i].getBoundingClientRect().top)}px
                     </span>
                 {/if}
-                <p class={`${getClass(i, progress)}`}>
+                <p class={`${getClass(i, progress)} hover:bg-[rgba(200,200,200,0.2)] pl-2 rounded-lg duration-300 cursor-pointer `}>
                     {lyric}
                 </p>
                 {#if originalLyrics.scripts[i].translation && showTranslation}
@@ -397,26 +404,6 @@
         top: 1rem;
     }
 
-    @media (min-width: 768px) {
-        .current-lyric {
-            font-size: 3rem;
-            line-height: 4rem;
-            margin: 2.4rem 0;
-        }
-
-        .after-lyric {
-            font-size: 3rem;
-            line-height: 3.3rem;
-            margin: 2.4rem 0;
-        }
-
-        .previous-lyric {
-            font-size: 3em;
-            line-height: 3.3rem;
-            margin: 2.4rem 0;
-        }
-    }
-
     @media (min-width: 1024px) {
         .current-lyric {
             font-size: var(--lyric-desktop-font-size);

src/routes/play/[id]/+page.svelte

@@ -202,14 +202,23 @@
     {hasLyrics}
 />
 
-<Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress}/>
+<Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress} player={audioPlayer}/>
 
 <audio
     bind:this={audioPlayer}
     controls
     style="display: none"
+    on:play={() => {
+        if (audioPlayer===null) return;
+        paused = audioPlayer.paused;
+    }}
+    on:pause={() => {
+        if (audioPlayer===null) return;
+        paused = audioPlayer.paused;
+    }}
     on:ended={() => {
         paused = true;
+        if (audioPlayer == null) return;
         audioPlayer.pause();
     }}
 ></audio>