From 83260dc2dc624ed136ccd6455eca70a8f4a0b340 Mon Sep 17 00:00:00 2001
From: Alikia2x <ziwen243@outlook.com>
Date: Sat, 11 May 2024 17:42:43 +0800
Subject: [PATCH] improve: interactiveBox a11y and style

---
 src/lib/components/background.svelte     |  1 -
 src/lib/components/cover.svelte          |  1 +
 src/lib/components/interactiveBox.svelte | 91 ++++++++++++++++++++----
 src/routes/import/local/+page.svelte     |  2 -
 src/routes/play/[id]/+page.svelte        | 28 +++++---
 5 files changed, 96 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
index f569de8..5bc7a8b 100644
--- a/src/lib/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -20,7 +20,6 @@
                 if (file) {
                     const path = URL.createObjectURL(file as File);
                     processImage(16, 4, 96, path, canvas, (resultImageData: ImageData) => {
-                        console.log(resultImageData);
                         localforage.setItem(
                             `${coverId}-cover-cache`,
                             imageDataToBlob(resultImageData)
diff --git a/src/lib/components/cover.svelte b/src/lib/components/cover.svelte
index c72da9c..d65a8fa 100644
--- a/src/lib/components/cover.svelte
+++ b/src/lib/components/cover.svelte
@@ -13,6 +13,7 @@
 
 <style>
     .cover {
+        user-select: none;
         position: absolute;
         z-index: 1;
         min-height: 35vh;
diff --git a/src/lib/components/interactiveBox.svelte b/src/lib/components/interactiveBox.svelte
index e936c19..6deb336 100644
--- a/src/lib/components/interactiveBox.svelte
+++ b/src/lib/components/interactiveBox.svelte
@@ -7,6 +7,13 @@
     export let progress: number = 0;
     export let paused: boolean;
     export let clickPlay: Function;
+    export let adjustProgress: Function;
+    let onSlide = false;
+    let progressBar: HTMLInputElement;
+
+    function progressBarOnChange(e: any) {
+        adjustProgress(e.target.value / (duration + 0.001));
+    }
 </script>
 
 <div class="interactive-box">
@@ -16,28 +23,52 @@
     </div>
     <div class="progress">
         <div class="time-indicator text-shadow-md time-current">{formatDuration(progress)}</div>
-        <div class="progress-bar shadow-md">
-            <div class="bar" style={`width: ${(progress / (duration + 0.001)) * 100}%;`}></div>
-        </div>
+        <input
+            class="progress-bar shadow-md"
+            bind:this={progressBar}
+            on:change={progressBarOnChange}
+            on:mousedown={() => (onSlide = true)}
+            on:mouseup={() => {
+                setTimeout(() => {
+                    onSlide = false;
+                }, 50);
+            }}
+            type="range"
+            min="0"
+            max={duration - 0.2}
+            step="1"
+            value={onSlide ? progressBar.value : progress}
+        />
+        <!-- <div class="bar" style={`width: ${(progress / (duration + 0.001)) * 100}%;`}></div> -->
         <div class="time-indicator text-shadow-md time-total">{formatDuration(duration)}</div>
     </div>
     <div class="controls">
-        <div style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );" class="control-btn previous">
+        <button
+            style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );"
+            class="control-btn previous"
+        >
             <img class="control-img switch-song-img" src="/previous.svg" alt="上一曲" />
-        </div>
-        <div style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );" class="control-btn play-btn" on:click={() => clickPlay()}>
+        </button>
+        <button
+            style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );"
+            class="control-btn play-btn"
+            on:click={() => clickPlay()}
+        >
             <img class="control-img" src={paused ? '/play.svg' : '/pause.svg'} alt="暂停或播放" />
-        </div>
-        <div style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );" class="control-btn next">
+        </button>
+        <button
+            style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );"
+            class="control-btn next"
+        >
             <img class="control-img switch-song-img" src="/next.svg" alt="下一曲" />
-        </div>
+        </button>
     </div>
 </div>
 
 <style>
     .controls {
         position: absolute;
-        top: 9rem;
+        top: 10rem;
         width: 100%;
         left: 50%;
         transform: translate(-50%, 0);
@@ -63,8 +94,7 @@
         height: 2.3rem;
         width: 2.3rem;
         left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-50%, 0);
     }
     .previous {
         left: 50%;
@@ -80,6 +110,7 @@
     }
 
     .song-info {
+        user-select: text;
         position: absolute;
         width: auto;
         left: 50%;
@@ -107,18 +138,47 @@
         height: 2.4rem;
     }
     .progress-bar {
+        -webkit-appearance: none;
+        appearance: none;
         top: 1.8rem;
         position: relative;
         width: 100%;
-        height: 0.3rem;
-        background-color: rgba(255, 255, 255, .5);
+        height: 0.4rem;
+        background-color: rgba(64, 64, 64, 0.5);
+        color: white;
         border-radius: 0.5rem;
+        overflow: hidden;
+        cursor: pointer;
+        transition: 0.3s;
+    }
+    .progress-bar:hover {
+        height: 0.7rem;
+    }
+    .progress-bar::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 0.2rem;
+        height: 0.7rem;
+        background-color: white;
+        box-shadow: -700px 0 0 700px white;
+        cursor: pointer;
+    }
+
+    /* Customize the appearance of the thumb for Firefox */
+    .progress-bar::-moz-range-thumb {
+        appearance: none;
+        width: 0px;
+        height: 0px;
+        background-color: white;
+        box-shadow: -700px 0 0 700px white;
+        cursor: pointer;
+        border: none;
     }
     .bar {
         background-color: white;
         position: absolute;
         content: '';
-        height: 0.3rem;
+        height: 0.4rem;
         display: inline-block;
         border-radius: 1.5rem;
     }
@@ -138,6 +198,7 @@
         right: 0;
     }
     .interactive-box {
+        user-select: none;
         position: absolute;
         width: 34vw;
         top: 70vh;
diff --git a/src/routes/import/local/+page.svelte b/src/routes/import/local/+page.svelte
index 3824717..1f53b2a 100644
--- a/src/routes/import/local/+page.svelte
+++ b/src/routes/import/local/+page.svelte
@@ -41,7 +41,6 @@
             let audioId = uuidv1();
             localforage.setItem(audioId + '-file', file, function (err) {
                 if (err) {
-                    console.error(err);
                     failed.update((prev) => [...prev, file]);
                 } else {
                     if (file.cover === 'N/A') {
@@ -57,7 +56,6 @@
                     let blob = fetch(file.pic).then((r) => {
                         localforage.setItem(audioId + '-cover', r.blob(), function (err) {
                             if (err) {
-                                console.error(err);
                                 failed.update((prev) => [...prev, file]);
                             } else {
                                 success.update((prev) => [...prev, file]);
diff --git a/src/routes/play/[id]/+page.svelte b/src/routes/play/[id]/+page.svelte
index f542549..dc6e5be 100644
--- a/src/routes/play/[id]/+page.svelte
+++ b/src/routes/play/[id]/+page.svelte
@@ -10,6 +10,7 @@
 
     const audioId = $page.params.id;
     let audioPlayer: HTMLAudioElement;
+    let volume = 1;
     let name = '';
     let singer = '';
     let duration = 0;
@@ -91,7 +92,6 @@
 
     $: {
         if (!launched) {
-            console.log('launch?');
             const requirements = ['name', 'file', 'cover'];
             let flag = true;
             for (const r of requirements) {
@@ -99,32 +99,33 @@
                     flag = false;
                 }
             }
-            console.log(prepared, flag);
             if (flag) {
                 launched = true;
-                console.log('launch!');
                 setMediaSession();
                 audioPlayer.play();
             }
         }
     }
 
+    function adjustProgress(progress: number) {
+        if (audioPlayer) {
+            audioPlayer.currentTime = duration * progress;
+            currentProgress = duration * progress;
+        }
+    }
+
     $: {
         clearInterval(mainInterval);
         mainInterval = setInterval(() => {
             if (audioPlayer !== null && audioPlayer.currentTime !== undefined) {
                 currentProgress = audioPlayer.currentTime;
             }
-        }, 500);
+        }, 250);
     }
 
     $: {
         if (audioPlayer) {
             paused = audioPlayer.paused;
-            if (audioPlayer.ended) {
-                paused = true;
-                audioPlayer.pause();
-            }
         }
     }
     readDB();
@@ -139,5 +140,14 @@
     progress={currentProgress}
     clickPlay={playAudio}
     {paused}
+    {adjustProgress}
 />
-<audio bind:this={audioPlayer} controls style="display: none"></audio>
+<audio
+    bind:this={audioPlayer}
+    controls
+    style="display: none"
+    on:ended={() => {
+        paused = true;
+        audioPlayer.pause();
+    }}
+></audio>