diff --git a/package.json b/package.json index 3abd572..ef334f6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aquavox", - "version": "2.9.3", + "version": "2.9.4", "private": false, "module": "index.ts", "type": "module", diff --git a/packages/core/components/import/fileSelector.svelte b/packages/core/components/import/fileSelector.svelte index f5eecd6..22cc9c9 100644 --- a/packages/core/components/import/fileSelector.svelte +++ b/packages/core/components/import/fileSelector.svelte @@ -35,7 +35,7 @@ {#if $fileItems.length > 0} {:else} - + {/if} diff --git a/packages/core/components/import/importIcon.svelte b/packages/core/components/import/importIcon.svelte index cf982d5..c97f9b3 100644 --- a/packages/core/components/import/importIcon.svelte +++ b/packages/core/components/import/importIcon.svelte @@ -1,15 +1,3 @@
- +
diff --git a/packages/core/components/interactiveBox.svelte b/packages/core/components/interactiveBox.svelte index 83fa1a7..c250b6f 100644 --- a/packages/core/components/interactiveBox.svelte +++ b/packages/core/components/interactiveBox.svelte @@ -4,6 +4,7 @@ import userAdjustingProgress from '../state/userAdjustingProgress'; import progressBarSlideValue from '../state/progressBarSlideValue'; import truncate from '../utils/truncate'; + import timestamp from '@core/utils/getCurrentTimestamp'; export let name: string; export let singer: string = ''; @@ -19,7 +20,7 @@ export let hasLyrics: boolean; export let showInteractiveBox: boolean; - export let setShowingInteractiveBox: Function; + export let showingInteractiveBoxUntil: Function; let progressBar: HTMLDivElement; let volumeBar: HTMLDivElement; @@ -29,12 +30,11 @@ let songInfoTopContent: HTMLSpanElement; let userAdjustingVolume = false; let lastTouchClientX = 0; + let mobileDeviceAdjustingProgress = false; - setTimeout(() => { - if (screen.width < 728) { - setShowingInteractiveBox(false); - } - }, 3000); + if (screen.width < 728) { + showingInteractiveBoxUntil(timestamp() + 3000); + } const mql = window.matchMedia('(max-width: 1280px)'); @@ -81,27 +81,44 @@ window.addEventListener("mousemove", (event) => { if ($userAdjustingProgress) { - adjustDisplayProgress(event.offsetX / progressBar.getBoundingClientRect().width); + const x = event.clientX; + const rec = progressBar.getBoundingClientRect(); + adjustDisplayProgress(truncate((x - rec.left) / rec.width,0,1)); } }); window.addEventListener("mouseup", (event) => { if ($userAdjustingProgress) { + const x = event.clientX; + const rec = progressBar.getBoundingClientRect(); userAdjustingProgress.set(false); - adjustProgress(event.offsetX / progressBar.getBoundingClientRect().width); + adjustProgress(truncate((x - rec.left) / rec.width,0,1)); } }); window.addEventListener("touchmove", (event) => { if ($userAdjustingProgress) { - adjustDisplayProgress((event.touches[0].clientX - progressBar.getBoundingClientRect().left) / progressBar.getBoundingClientRect().width); - lastTouchClientX = event.touches[0].clientX; + const x = event.touches[0].clientX; + const rec = progressBar.getBoundingClientRect(); + adjustDisplayProgress(truncate((x - rec.left) / rec.width,0,1)); + lastTouchClientX = x; } }); window.addEventListener("touchend", (event) => { if ($userAdjustingProgress) { - adjustProgress((lastTouchClientX - progressBar.getBoundingClientRect().left) / progressBar.getBoundingClientRect().width); + const x = lastTouchClientX; + const rec = progressBar.getBoundingClientRect(); + adjustProgress(truncate((x - rec.left) / rec.width,0,1)); userAdjustingProgress.set(false); + mobileDeviceAdjustingProgress = false; } }); + + userAdjustingProgress.subscribe(()=> { + showingInteractiveBoxUntil(timestamp() + 5000); + }); + + function handleClick() { + showingInteractiveBoxUntil(timestamp() + 5000); + } {#if showInfoTop} @@ -112,11 +129,11 @@ {/if}
@@ -132,12 +149,12 @@
{/if} -
{ - setShowingInteractiveBox(true); - setTimeout(() => { - setShowingInteractiveBox(false); - }, 5000); - }}>
+ + +
@@ -148,7 +165,7 @@ aria-valuemin="0" aria-valuenow={progress} bind:this={progressBar} - class="progress-bar shadow-md" + class="progress-bar shadow-md {mobileDeviceAdjustingProgress && '!h-[0.7rem]'}" on:keydown on:keyup on:click={(e) => { @@ -159,11 +176,12 @@ }} on:touchstart={() => { userAdjustingProgress.set(true); + mobileDeviceAdjustingProgress = true; }} role="slider" tabindex="0" > -
+
{formatDuration(duration)}
@@ -370,7 +388,7 @@ transition: 0.3s; } - .progress-bar:hover { + .progress-bar:active { height: 0.7rem; } @@ -384,7 +402,7 @@ transition: height 0.3s; } - .progress-bar:hover .bar { + .progress-bar:active .bar { height: 0.7rem; } @@ -410,5 +428,11 @@ .control-btn { transition: 0.1s } + .progress-bar:hover { + height: 0.7rem; + } + .progress-bar:hover .bar { + height: 0.7rem; + } } diff --git a/packages/core/components/lyrics/lyricLine.svelte b/packages/core/components/lyrics/lyricLine.svelte index 9556d2a..f81196a 100644 --- a/packages/core/components/lyrics/lyricLine.svelte +++ b/packages/core/components/lyrics/lyricLine.svelte @@ -134,6 +134,11 @@ }; + export const syncSpringWithDelta = (deltaY: number) => { + const target = positionY + deltaY; + springY!.setPosition(target); + } + export const getInfo = () => { return { x: positionX, diff --git a/packages/core/components/lyrics/newLyrics.svelte b/packages/core/components/lyrics/newLyrics.svelte index 365ab37..457ed72 100644 --- a/packages/core/components/lyrics/newLyrics.svelte +++ b/packages/core/components/lyrics/newLyrics.svelte @@ -116,6 +116,7 @@ scrolling = true; currentLyricComponent.stop(); currentLyricComponent.setY(currentY - deltaY); + currentLyricComponent.syncSpringWithDelta(deltaY); } scrolling = true; if (scrollingTimeout) clearTimeout(scrollingTimeout); @@ -250,23 +251,26 @@ {#if debugMode} - progress: {progress.toFixed(2)}, nextUpdate: {nextUpdate}, scrolling: {scrolling}, current: {currentLyricIndex}, uap: {$userAdjustingProgress} + class="text-white text-lg absolute z-50 px-2 py-0.5 m-2 rounded-3xl bg-white bg-opacity-20 backdrop-blur-lg + right-0 font-mono"> + progress: {progress.toFixed(2)}, nextUpdate: {nextUpdate}, scrolling: {scrolling}, current: {currentLyricIndex}, + uap: {$userAdjustingProgress} {/if} {#if originalLyrics && originalLyrics.scripts}
{#each lyricLines as lyric, i} - + {/each}
{/if} diff --git a/packages/core/utils/formatText.ts b/packages/core/utils/formatText.ts index f234083..06cf862 100644 --- a/packages/core/utils/formatText.ts +++ b/packages/core/utils/formatText.ts @@ -4,8 +4,11 @@ export default function(key: string){ "audio/ogg": "OGG 容器", "audio/flac": "FLAC 无损音频", "audio/aac": "AAC 音频", + "audio/wav": "WAV 音频", + "ttml": "TTML歌词", "lrc": "LRC 歌词" } if (!key) return "未知格式"; + if (!(key in dict)) return key; else return dict[key as keyof typeof dict]; } \ No newline at end of file diff --git a/packages/core/utils/getCurrentTimestamp.ts b/packages/core/utils/getCurrentTimestamp.ts new file mode 100644 index 0000000..fde98b4 --- /dev/null +++ b/packages/core/utils/getCurrentTimestamp.ts @@ -0,0 +1,4 @@ +export default function timestamp() { + const ts = new Date().getTime(); + return ts; +} \ No newline at end of file diff --git a/packages/web/src/app.html b/packages/web/src/app.html index 1b2d7be..876c155 100644 --- a/packages/web/src/app.html +++ b/packages/web/src/app.html @@ -2,12 +2,9 @@ - - - - + AquaVox %sveltekit.head% diff --git a/packages/web/src/routes/+page.svelte b/packages/web/src/routes/+page.svelte index 804fa72..ffe73ba 100644 --- a/packages/web/src/routes/+page.svelte +++ b/packages/web/src/routes/+page.svelte @@ -67,8 +67,15 @@ class="relative my-4 p-4 duration-150 bg-zinc-200 hover:bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600 rounded-lg" > {musicList[id].name}
- {toHumanSize(musicList[id].size)} · - 导入歌词 +
+ {toHumanSize(musicList[id].size)} +
{location.href = `/import/${id}/lyric`;e.stopPropagation();}}> + 导入歌词 +
+
+ {#if musicList[id].coverUrl} diff --git a/packages/web/src/routes/play/[id]/+page.svelte b/packages/web/src/routes/play/[id]/+page.svelte index af33885..59ec353 100644 --- a/packages/web/src/routes/play/[id]/+page.svelte +++ b/packages/web/src/routes/play/[id]/+page.svelte @@ -14,6 +14,7 @@ import progressBarRaw from '@core/state/progressBarRaw'; import { parseTTML, parseLRC } from '@alikia/aqualyrics'; import NewLyrics from '@core/components/lyrics/newLyrics.svelte'; + import timestamp from '@core/utils/getCurrentTimestamp'; const audioId = $page.params.id; let audioPlayer: HTMLAudioElement | null = null; @@ -31,6 +32,7 @@ let hasLyrics: boolean; const coverPath = writable(''); let mainInterval: ReturnType; + let showInteractiveBoxUntil = Infinity; let showInteractiveBox = true; function setMediaSession() { @@ -197,8 +199,8 @@ } } - function setShowingInteractiveBox(showing: boolean) { - showInteractiveBox = showing; + function showingInteractiveBoxUntil(until: number) { + showInteractiveBoxUntil = until; } $: { @@ -224,6 +226,10 @@ $: hasLyrics = !!originalLyrics; + setInterval(() => { + showInteractiveBox = timestamp() < showInteractiveBoxUntil || screen.width > 728; + }, 500); + readDB(); @@ -231,41 +237,45 @@ {name} - AquaVox - - - +
- + + + - + +
diff --git a/packages/web/static/icon.png b/packages/web/static/icon.png deleted file mode 100644 index 4087c65..0000000 Binary files a/packages/web/static/icon.png and /dev/null differ diff --git a/packages/web/static/manifest.json b/packages/web/static/manifest.json deleted file mode 100644 index 350921e..0000000 --- a/packages/web/static/manifest.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "orientation": "portrait", - "name": "AquaVox", - "short_name": "AquaVox", - "start_url": "/", - "display": "standalone", - "background_color": "#000000", - "description": "A readable Hacker News app", - "icons": [ - { - "src": "/icon.png", - "sizes": "192x192", - "type": "image/png" - } - ] -} \ No newline at end of file diff --git a/packages/web/static/pause.svg b/packages/web/static/pause.svg index 4509dde..e7e4534 100644 --- a/packages/web/static/pause.svg +++ b/packages/web/static/pause.svg @@ -1,11 +1 @@ - - - - - - - - - + \ No newline at end of file