diff --git a/package.json b/package.json
index 344f62e..6f4794c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "aquavox",
- "version": "1.10.0",
+ "version": "1.10.1",
"private": false,
"scripts": {
"dev": "vite dev",
diff --git a/src/lib/components/interactiveBox.svelte b/src/lib/components/interactiveBox.svelte
index 4101524..d17dfeb 100644
--- a/src/lib/components/interactiveBox.svelte
+++ b/src/lib/components/interactiveBox.svelte
@@ -2,7 +2,7 @@
import formatDuration from '$lib/formatDuration';
import { onMount } from 'svelte';
import userAdjustingProgress from '$lib/state/userAdjustingProgress';
- import progressBarRaw from '$lib/state/progressBarRaw';
+ import progressBarSlideValue from '$lib/state/progressBarSlideValue';
export let name: string;
export let singer: string = '';
@@ -18,22 +18,39 @@
export let hasLyrics: boolean;
let progressBar: HTMLDivElement;
- let volumeBar: HTMLInputElement;
+ let volumeBar: HTMLDivElement;
let showInfoTop: boolean = false;
let isInfoTopOverflowing = false;
let songInfoTopContainer: HTMLDivElement;
let songInfoTopContent: HTMLSpanElement;
+ let lastTouchProgress: number;
+ let userAdjustingVolume = false;
const mql = window.matchMedia('(max-width: 1280px)');
- function volumeBarOnChange(e: any) {
- adjustVolume(e.target.value);
- localStorage.setItem('volume', e.target.value);
+ function volumeBarOnChange(e: MouseEvent) {
+ const value = e.offsetX / volumeBar.getBoundingClientRect().width;
+ adjustVolume(value);
+ localStorage.setItem('volume', value.toString());
+ }
+
+ function volumeBarChangeTouch(e: TouchEvent) {
+ const value = turncate(
+ e.touches[0].clientX - volumeBar.getBoundingClientRect().x,
+ 0,
+ volumeBar.getBoundingClientRect().width
+ ) / volumeBar.getBoundingClientRect().width;
+ adjustVolume(value);
+ localStorage.setItem('volume', value.toString());
}
function progressBarOnClick(e: MouseEvent) {
adjustProgress(e.offsetX / progressBar.getBoundingClientRect().width);
- progressBarRaw.set(e.offsetX / progressBar.getBoundingClientRect().width * duration);
+ progressBarSlideValue.set((e.offsetX / progressBar.getBoundingClientRect().width) * duration);
+ }
+
+ function turncate(value: number, min: number, max: number) {
+ return Math.min(Math.max(value, min), max);
}
onMount(() => {
@@ -94,6 +111,30 @@
adjustDisplayProgress(e.offsetX / progressBar.getBoundingClientRect().width);
}
}}
+ on:touchstart={(e) => {
+ if (e.cancelable) {
+ e.preventDefault();
+ }
+ userAdjustingProgress.set(true);
+ }}
+ on:touchmove={(e) => {
+ e.preventDefault();
+ userAdjustingProgress.set(true);
+ if ($userAdjustingProgress) {
+ lastTouchProgress =
+ turncate(
+ e.touches[0].clientX - progressBar.getBoundingClientRect().x,
+ 0,
+ progressBar.getBoundingClientRect().width
+ ) / progressBar.getBoundingClientRect().width;
+ adjustDisplayProgress(lastTouchProgress);
+ }
+ }}
+ on:touchend={(e) => {
+ e.preventDefault();
+ userAdjustingProgress.set(false);
+ adjustProgress(lastTouchProgress);
+ }}
on:mouseup={() => {
userAdjustingProgress.set(false);
}}
@@ -127,7 +168,7 @@
-
+ /> -->
+
volumeBarOnChange(e)}
+ bind:this={volumeBar}
+ on:mousedown={() => {
+ userAdjustingVolume = true;
+ }}
+ on:mousemove={(e) => {
+ if (userAdjustingVolume) {
+ volumeBarOnChange(e);
+ }
+ }}
+ on:touchstart={(e) => {
+ if (e.cancelable) {
+ e.preventDefault();
+ }
+ userAdjustingVolume = true;
+ }}
+ on:touchmove={(e) => {
+ e.preventDefault();
+ userAdjustingVolume = true;
+ if (userAdjustingVolume) {
+ volumeBarChangeTouch(e);
+ }
+ }}
+ on:touchend={(e) => {
+ e.preventDefault();
+ userAdjustingVolume = false;
+ }}
+ on:mouseup={() => {
+ userAdjustingVolume = false;
+ }}
+ role="slider"
+ aria-valuemin="0"
+ aria-valuemax="1"
+ aria-valuenow={volume}
+ tabindex="0"
+ on:keydown
+ on:keyup
+ >
+
+
diff --git a/src/lib/components/lyrics.svelte b/src/lib/components/lyrics.svelte
index aac9df8..393184e 100644
--- a/src/lib/components/lyrics.svelte
+++ b/src/lib/components/lyrics.svelte
@@ -3,6 +3,7 @@
import createLyricsSearcher from '$lib/lyrics/lyricSearcher';
import progressBarRaw from '$lib/state/progressBarRaw';
import type { LrcJsonData } from 'lrc-parser-ts';
+ import progressBarSlideValue from '$lib/state/progressBarSlideValue';
export let lyrics: string[];
export let originalLyrics: LrcJsonData;
export let progress: number;
@@ -15,6 +16,7 @@
let lyricsContainer: HTMLDivElement;
let nextUpdate = -1;
let lastAdjustProgress = 0;
+ let localProgress = 0;
let refs: HTMLParagraphElement[] = [];
let _refs: any[] = [];
@@ -94,7 +96,6 @@
const scripts = originalLyrics.scripts;
if (!scripts) return;
if (v) {
- console.log('!');
for (let i = 0; i < scripts.length; i++) {
refs[i].style.filter = `blur(0px)`;
}
@@ -109,10 +110,20 @@
}
});
+ // progressBarRaw is used to detect progress changes at system-level (not in AquaVox)
progressBarRaw.subscribe((progress: number) => {
if ($userAdjustingProgress === false && getLyricIndex) {
- const currentLyric = refs[getLyricIndex(progress)];
- b(currentLyric);
+ if (Math.abs(localProgress - progress) > 0.6) {
+ const currentLyric = refs[getLyricIndex(progress)];
+ b(currentLyric);
+ }
+ localProgress = progress;
+ }
+ });
+
+ // progressBarSlideValue is to detect progress bar sliding event
+ progressBarSlideValue.subscribe((_) => {
+ if ($userAdjustingProgress === false && getLyricIndex) {
lastAdjustProgress = currentPositionIndex;
}
});
@@ -121,7 +132,7 @@
if ($userAdjustingProgress) {
nextUpdate = progress;
} else {
- if (0 < nextUpdate - progress && nextUpdate - progress < 0.05) {
+ if (nextUpdate - progress < 0.05) {
if (
currentPositionIndex >= 0 &&
currentPositionIndex !== currentAnimationIndex &&
@@ -163,9 +174,11 @@
bind:this={lyricsContainer}
>
{#if debugMode}
-
+
LyricIndex: {currentLyricIndex} PositionIndex: {currentPositionIndex} AnimationIndex:{currentAnimationIndex}
- NextUpdate: {Math.floor(nextUpdate / 60)}m {Math.round((nextUpdate % 60) * 100) / 100}s
+ NextUpdate: {nextUpdate}
+ Progress: {progress.toFixed(2)}
+ lastAdjustProgress: {lastAdjustProgress}
{/if}
{#each lyrics as lyric, i}
diff --git a/src/lib/state/progressBarSlideValue.ts b/src/lib/state/progressBarSlideValue.ts
new file mode 100644
index 0000000..ccd863a
--- /dev/null
+++ b/src/lib/state/progressBarSlideValue.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+const progressBarSlideValue = writable(0);
+export default progressBarSlideValue;
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4b975f6..aeef539 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -77,7 +77,7 @@
- AquaVox 1.10.0 · 早期公开预览 · 源代码参见
+ AquaVox 1.10.1 · 早期公开预览 · 源代码参见
GitHub
导入音乐