diff --git a/package.json b/package.json index eb179b2..3abd572 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aquavox", - "version": "2.9.2", + "version": "2.9.3", "private": false, "module": "index.ts", "type": "module", diff --git a/packages/core/components/cover.svelte b/packages/core/components/cover.svelte index 325788b..bf2e70c 100644 --- a/packages/core/components/cover.svelte +++ b/packages/core/components/cover.svelte @@ -11,7 +11,8 @@ {#if hasLyrics} {:else} 封面 { + if (screen.width < 728) { + setShowingInteractiveBox(false); + } + }, 3000); const mql = window.matchMedia('(max-width: 1280px)'); @@ -68,6 +78,30 @@ $: { showInfoTop = mql.matches && hasLyrics; } + + window.addEventListener("mousemove", (event) => { + if ($userAdjustingProgress) { + adjustDisplayProgress(event.offsetX / progressBar.getBoundingClientRect().width); + } + }); + window.addEventListener("mouseup", (event) => { + if ($userAdjustingProgress) { + userAdjustingProgress.set(false); + adjustProgress(event.offsetX / progressBar.getBoundingClientRect().width); + } + }); + window.addEventListener("touchmove", (event) => { + if ($userAdjustingProgress) { + adjustDisplayProgress((event.touches[0].clientX - progressBar.getBoundingClientRect().left) / progressBar.getBoundingClientRect().width); + lastTouchClientX = event.touches[0].clientX; + } + }); + window.addEventListener("touchend", (event) => { + if ($userAdjustingProgress) { + adjustProgress((lastTouchClientX - progressBar.getBoundingClientRect().left) / progressBar.getBoundingClientRect().width); + userAdjustingProgress.set(false); + } + }); {#if showInfoTop} @@ -78,11 +112,14 @@ {/if}
+ {#if !showInfoTop}
@@ -95,6 +132,13 @@
{/if} +
{ + setShowingInteractiveBox(true); + setTimeout(() => { + setShowingInteractiveBox(false); + }, 5000); + }}>
+
{formatDuration(progress)} @@ -107,23 +151,14 @@ class="progress-bar shadow-md" on:keydown on:keyup + on:click={(e) => { + progressBarOnClick(e); + }} on:mousedown={() => { userAdjustingProgress.set(true); }} - on:mousemove={(e) => { - if ($userAdjustingProgress) { - adjustDisplayProgress(e.offsetX / progressBar.getBoundingClientRect().width); - } - }} - on:mouseup={(e) => { - const offsetX = e.offsetX; - progressBarOnClick(e); - // Q: why it needs delay? - // A: I do not know. - setTimeout(()=> { - userAdjustingProgress.set(false); - progressBarMouseUp(offsetX); - }, 50); + on:touchstart={() => { + userAdjustingProgress.set(true); }} role="slider" tabindex="0" diff --git a/packages/core/components/lyrics/newLyrics.svelte b/packages/core/components/lyrics/newLyrics.svelte index c3539cf..365ab37 100644 --- a/packages/core/components/lyrics/newLyrics.svelte +++ b/packages/core/components/lyrics/newLyrics.svelte @@ -16,10 +16,11 @@ document.body.style.overflow = 'hidden'; // Props - let { originalLyrics, progress, player } : { + let { originalLyrics, progress, player, showInteractiveBox } : { originalLyrics: LyricData, progress: number, - player: HTMLAudioElement | null + player: HTMLAudioElement | null, + showInteractiveBox: boolean } = $props(); // States @@ -195,10 +196,10 @@ lastEventLyricIndex = currentLyricIndex; lastEventProgress = progress; - if (!lyricChanged) return; + if (!lyricChanged || scrolling) return; if (!lyricIndexDeltaTooBig && deltaInRange) { console.log("Event: regular move"); - console.log(new Date().getTime() , lastSeekForward); + console.log(new Date().getTime(), lastSeekForward); computeLayout(); } else if ($userAdjustingProgress) { @@ -257,8 +258,11 @@ {#if originalLyrics && originalLyrics.scripts}
{#each lyricLines as lyric, i} diff --git a/packages/web/src/app.html b/packages/web/src/app.html index 1f4904b..1b2d7be 100644 --- a/packages/web/src/app.html +++ b/packages/web/src/app.html @@ -2,8 +2,12 @@ - + + + + + AquaVox %sveltekit.head% diff --git a/packages/web/src/routes/+page.svelte b/packages/web/src/routes/+page.svelte index 8d5f82f..804fa72 100644 --- a/packages/web/src/routes/+page.svelte +++ b/packages/web/src/routes/+page.svelte @@ -62,7 +62,7 @@ {#each idList as id} -
goto(`/play/${id}`)}> +
location.href = (`/play/${id}`)}>
  • diff --git a/packages/web/src/routes/play/[id]/+page.svelte b/packages/web/src/routes/play/[id]/+page.svelte index 3596af1..af33885 100644 --- a/packages/web/src/routes/play/[id]/+page.svelte +++ b/packages/web/src/routes/play/[id]/+page.svelte @@ -31,6 +31,7 @@ let hasLyrics: boolean; const coverPath = writable(''); let mainInterval: ReturnType; + let showInteractiveBox = true; function setMediaSession() { if ('mediaSession' in navigator === false) return; @@ -196,6 +197,10 @@ } } + function setShowingInteractiveBox(showing: boolean) { + showInteractiveBox = showing; + } + $: { clearInterval(mainInterval); mainInterval = setInterval(() => { @@ -240,9 +245,11 @@ {adjustVolume} {adjustDisplayProgress} {hasLyrics} + {showInteractiveBox} + {setShowingInteractiveBox} /> - +