From 17a3e45d5ea9fac745aed1ff582ca2e42ebf65d7 Mon Sep 17 00:00:00 2001
From: Alikia2x <ziwen243@outlook.com>
Date: Sun, 12 May 2024 19:07:32 +0800
Subject: [PATCH] update: responsive ui improvement

---
 src/lib/components/cover.svelte          | 22 ++-------
 src/lib/components/interactiveBox.svelte | 24 +++++-----
 src/lib/components/lyrics.svelte         | 33 ++++++-------
 src/routes/+page.svelte                  | 61 ++++++------------------
 src/routes/play/[id]/+page.svelte        | 29 +++++++++--
 5 files changed, 69 insertions(+), 100 deletions(-)

diff --git a/src/lib/components/cover.svelte b/src/lib/components/cover.svelte
index ce8ceec..ef75185 100644
--- a/src/lib/components/cover.svelte
+++ b/src/lib/components/cover.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import localforage from '$lib/storage';
     import type { Writable } from 'svelte/store';
     export let coverPath: Writable<string>;
     let path: string = '';
@@ -9,21 +8,6 @@
     });
 </script>
 
-<img class="cover" src={path} alt="封面" />
-
-<style>
-    .cover {
-        user-select: none;
-        position: absolute;
-        z-index: 1;
-        width: 55vh;
-        min-width: 27vw;
-        min-height: 27vw;
-        object-fit: cover;
-        left: 10vw;
-        top: 40vh;
-        transform: translate(0, -50%);
-        border-radius: 1rem;
-        box-shadow: 0 0 1rem 0.5rem rgba(0, 0, 0, 0.1);
-    }
-</style>
+<img class="absolute shadow-md select-none z-10 object-cover rounded-2xl max-h-[calc(94vh-18rem)] md:max-h-[calc(94vh-20rem)] xl:w-auto max-w-[90%] md:max-w-[75%] xl:max-w-[37vw]
+ bottom-72 md:bottom-80
+    left-1/2 translate-x-[-50%] xl:left-[25vw]" src={path} alt="封面" />
diff --git a/src/lib/components/interactiveBox.svelte b/src/lib/components/interactiveBox.svelte
index f94b7c6..07bedc7 100644
--- a/src/lib/components/interactiveBox.svelte
+++ b/src/lib/components/interactiveBox.svelte
@@ -9,8 +9,10 @@
     export let volume: number = 1;
     export let clickPlay: Function;
     export let adjustProgress: Function;
+    export let adjustRealProgress: Function;
     export let adjustVolume: Function;
-    let onSlide = false;
+    export let onSlide: boolean;
+    export let setOnSlide: Function;
     let progressBar: HTMLInputElement;
     let volumeBar: HTMLInputElement;
 
@@ -18,12 +20,16 @@
         adjustProgress(e.target.value / (duration + 0.001));
     }
 
+    function progressBarOnInput(e: any) {
+        adjustRealProgress(e.target.value / (duration + 0.001));
+    }
+
     function volumeBarOnChange(e: any) {
         adjustVolume(e.target.value);
     }
 </script>
 
-<div class="interactive-box">
+<div class="absolute select-none bottom-2 h-60 w-[86vw] left-[7vw] lg:w-[76vw] lg:left-[12vw] xl:w-[37vw] xl:left-[7vw]">
     <div class="song-info">
         <span class="song-name text-shadow">{name}</span><br />
         <span class="song-author">{singer}</span>
@@ -34,10 +40,11 @@
             class="progress-bar shadow-md"
             bind:this={progressBar}
             on:change={progressBarOnChange}
-            on:mousedown={() => (onSlide = true)}
+            on:input={progressBarOnInput}
+            on:mousedown={() => setOnSlide(true)}
             on:mouseup={() => {
                 setTimeout(() => {
-                    onSlide = false;
+                    setOnSlide(false);
                 }, 50);
             }}
             type="range"
@@ -195,13 +202,4 @@
     .time-total {
         right: 0;
     }
-    .interactive-box {
-        user-select: none;
-        position: absolute;
-        width: 55vh;
-        min-width: 27vw;
-        top: 69vh;
-        height: 15rem;
-        left: 10vw;
-    }
 </style>
diff --git a/src/lib/components/lyrics.svelte b/src/lib/components/lyrics.svelte
index 94a42a9..29ab7b2 100644
--- a/src/lib/components/lyrics.svelte
+++ b/src/lib/components/lyrics.svelte
@@ -37,12 +37,8 @@
             for (let i = 0; i < lyrics.length; i++) {
                 const offset = Math.abs(i - currentLyricIndex);
                 const blurRadius = Math.min(offset * 1, 16);
-                const fontSize = i === currentLyricIndex ? '3.5rem' : '3rem';
-                const lineHeight = i === currentLyricIndex ? '4.5rem' : '4rem';
                 if (refs[i]) {
                     refs[i].style.filter = `blur(${blurRadius}px)`;
-                    refs[i].style.fontSize = fontSize;
-                    refs[i].style.lineHeight = lineHeight;
                 }
             }
             if (!found) {
@@ -60,7 +56,10 @@
 </script>
 
 {#if lyrics && originalLyrics}
-    <div class="lyrics" style="overflow-y: auto">
+    <div
+        class="absolute top-0 w-screen xl:w-[52vw] xl:left-[45vw] xl:px-[3vw] h-screen font-sans 
+        text-left scroll-smooth no-scrollbar overflow-y-auto"
+    >
         {#each lyrics as lyric, i}
             <p bind:this={_refs[i]} class={getClass(i, progress)}>
                 {lyric}
@@ -70,27 +69,18 @@
 {/if}
 
 <style>
-    .lyrics {
-        position: absolute;
-        width: 52vw;
-        left: 45vw;
-        padding-left: 3vw;
-        padding-right: 3vw;
-        height: 100vh;
-        font-family: sans-serif;
-        text-align: left;
-        scroll-behavior: smooth;
+    .no-scrollbar {
         scrollbar-width: none;
     }
-    ::-webkit-scrollbar {
+    .no-scrollbar::-webkit-scrollbar {
         width: 0;
     }
     .current-lyric {
         position: relative;
         color: white;
         font-weight: 600;
-        font-size: 3.5rem;
-        line-height: 4.5rem;
+        font-size: 2rem;
+        line-height: 2.5rem;
         top: 1rem;
         transition: 0.2s;
         margin: 2rem 0.3rem;
@@ -117,4 +107,11 @@
         transition: 0.2s;
         margin: 2rem 0rem;
     }
+
+    @media (min-width: 1024px) {
+        .current-lyric {
+            font-size: 3.5rem;
+            line-height: 4.5rem;
+        }
+    }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e880dc4..ed66f23 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,51 +1,18 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import localforage from 'localforage';
-    import Background from '$lib/components/background.svelte';
-    let audioInput: any;
-    let coverInput: any;
-    const audioId = 'd5a2e306-ddea-4fc3-9927-c79dcb3a4071';
+    import localforage from "$lib/storage";
+    let musicList;
 
-    // Initialize IndexedDB
-    localforage.config({
-        driver: localforage.INDEXEDDB,
-        name: 'audioDB'
-    });
-    onMount(() => {
-        // Handle audio input change
-        audioInput.addEventListener('change', function (e: any) {
-            const file: File = e.target.files[0];
-            if (file) {
-                localforage.setItem(audioId + '-file', file);
-            }
-        });
-
-        coverInput.addEventListener('change', function (e: any) {
-            const file = e.target.files[0];
-            if (file) {
-                localforage.setItem(audioId + '-cover', file);
-            }
-        });
-        return () => {
-            ;
-        };
-    });
+    function extractId(key: string) {
+        return key.split('-').pop();
+    }
+    localforage.iterate(function (value, key, iterationNumber) {
+        console.log(extractId(key));
+    })
 </script>
 
-<p>
-    Select Audio File:
-    <input type="file" bind:this={audioInput} />
-</p>
-<p>
-    Select Cover File:
-    <input type="file" bind:this={coverInput} />
-</p>
-<input
-    type="text"
-    placeholder="Input song id"
-    id="audioId"
-    value="d5a2e306-ddea-4fc3-9927-c79dcb3a4071"
-    style="width: 36ch"
-/>
-
-<Background coverId={audioId} />
\ No newline at end of file
+<div
+    class="absolute w-screen md:w-2/3 left-0 md:left-[16.6667%] px-[3%] md:px-0 top-16"
+>
+    <h1>AquaVox</h1>
+    <h2>音乐库</h2>
+</div>
diff --git a/src/routes/play/[id]/+page.svelte b/src/routes/play/[id]/+page.svelte
index 441b3a4..1b47b20 100644
--- a/src/routes/play/[id]/+page.svelte
+++ b/src/routes/play/[id]/+page.svelte
@@ -24,6 +24,7 @@
     let prepared: string[] = [];
     let originalLyrics: Line[];
     let lyricsText: string[] = [];
+    let onAdjustingProgress = false;
     const coverPath = writable('');
     let mainInterval: ReturnType<typeof setInterval>;
 
@@ -131,16 +132,30 @@
         }
     }
 
+    function adjustRealProgress(progress: number) {
+        if (audioPlayer) {
+            currentProgress = duration * progress;
+        }
+    }
+
     function adjustVolume(targetVolume: number) {
         if (audioPlayer) {
             audioPlayer.volume = targetVolume;
         }
     }
 
+    function setOnSlide(value: boolean) {
+        onAdjustingProgress = value;
+    }
+
     $: {
         clearInterval(mainInterval);
         mainInterval = setInterval(() => {
-            if (audioPlayer !== null && audioPlayer.currentTime !== undefined) {
+            if (
+                audioPlayer !== null &&
+                audioPlayer.currentTime !== undefined &&
+                onAdjustingProgress === false
+            ) {
                 currentProgress = audioPlayer.currentTime;
             }
         }, 100);
@@ -156,6 +171,10 @@
     readDB();
 </script>
 
+<svelte:head>
+    <title>{name} - Aquavox</title>
+</svelte:head>
+
 <Background coverId={audioId} />
 <Cover {coverPath} />
 <InteractiveBox
@@ -168,7 +187,13 @@
     {paused}
     {adjustProgress}
     {adjustVolume}
+    {adjustRealProgress}
+    onSlide={onAdjustingProgress}
+    {setOnSlide}
 />
+
+<Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress} />
+
 <audio
     bind:this={audioPlayer}
     controls
@@ -178,5 +203,3 @@
         audioPlayer.pause();
     }}
 ></audio>
-
-<Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress} />