alikia2x/aquavox
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

fix: incorrect scrolling behaviour

Browse Source
This commit is contained in:
alikia2x (寒寒) 2024-10-24 05:16:44 +08:00
parent fb36719aad
commit 3ee8361669
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
3 changed files with 6 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "aquavox", "name": "aquavox",
"version": "2.3.1", "version": "2.3.2",
"private": false, "private": false,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",

9
src/lib/components/lyrics/newLyrics.svelte
View File

@ -9,7 +9,8 @@
const viewportHeight = document.documentElement.clientHeight; const viewportHeight = document.documentElement.clientHeight;
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const marginY = viewportWidth > 640 ? 36 : 0 ; const marginY = viewportWidth > 640 ? 36 : 0 ;
const currentLyrictTop = viewportHeight * 0.02; const blurRatio = viewportWidth > 640 ? 1 : 1.4;
const currentLyrictTop = viewportWidth > 640 ? viewportHeight * 0.12 : viewportHeight * 0.05;
const deceleration = 0.95; // Velocity decay factor for inertia const deceleration = 0.95; // Velocity decay factor for inertia
const minVelocity = 0.1; // Minimum velocity to stop inertia const minVelocity = 0.1; // Minimum velocity to stop inertia
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
@ -82,7 +83,7 @@
delay = 0.013 + Math.min(Math.min(currentLyricDuration, 0.1), 0.075 * (i - currentLyricIndex)); delay = 0.013 + Math.min(Math.min(currentLyricDuration, 0.1), 0.075 * (i - currentLyricIndex));
} }
const offset = Math.abs(i - currentLyricIndex); const offset = Math.abs(i - currentLyricIndex);
let blurRadius = Math.min(offset * 1.7, 16); let blurRadius = Math.min(offset * blurRatio, 16);
currentLyricComponent.setBlur(blurRadius); currentLyricComponent.setBlur(blurRadius);
currentLyricComponent.update({ x: 0, y: lyricTopList[i] - relativeOrigin }, delay); currentLyricComponent.update({ x: 0, y: lyricTopList[i] - relativeOrigin }, delay);
} }
@ -110,7 +111,7 @@
currentLyricComponent.setY(currentY - deltaY); currentLyricComponent.setY(currentY - deltaY);
} }
scrolling = true; scrolling = true;
//if (scrollingTimeout) clearTimeout(scrollingTimeout); if (scrollingTimeout) clearTimeout(scrollingTimeout);
scrollingTimeout = setTimeout(() => { scrollingTimeout = setTimeout(() => {
scrolling = false; scrolling = false;
}, 5000); }, 5000);
@ -181,7 +182,7 @@
console.log("computeLayout") console.log("computeLayout")
computeLayout(); computeLayout();
} }
if (Math.abs(lastProgress - progress) > 0) { if (Math.abs(lastProgress - progress) > 0.5) {
scrolling = false; scrolling = false;
} }
if (lastProgress - progress > 0) { if (lastProgress - progress > 0) {

124
src/lib/components/newLyrics.svelte
View File

@ -1,124 +0,0 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import {
LyricPlayer as CoreLyricPlayer,
type LyricLineMouseEvent,
type LyricLine,
type spring
} from '@applemusic-like-lyrics/core';
export let disabled: boolean = false;
export let playing: boolean = true;
export let alignAnchor: 'top' | 'bottom' | 'center' = 'center';
export let alignPosition: number = 0.5;
export let enableSpring: boolean = true;
export let enableBlur: boolean = true;
export let enableScale: boolean = true;
export let hidePassedLines: boolean = false;
export let lyricLines: LyricLine[] = [];
export let currentTime: number = 0;
export let linePosXSpringParams: Partial<spring.SpringParams> = {};
export let linePosYSpringParams: Partial<spring.SpringParams> = {};
export let lineScaleSpringParams: Partial<spring.SpringParams> = {};
export let bottomLine: Node = document.createElement('div');
export let onLyricLineClick: (line: LyricLineMouseEvent) => void = () => {};
export let onLyricLineContextMenu: (line: LyricLineMouseEvent) => void = () => {};
export let lyricPlayer: CoreLyricPlayer;
let className;
export { className as class };
let lyricsElement: HTMLDivElement | null;
let bottomLineElement: HTMLDivElement | null;
let animationCanceled = false;
let animationLastTime = -1;
let lineClickHandler: (e: Event) => void;
let contextMenuHandler: (e: Event) => void;
$: {
if (playing) {
lyricPlayer.resume();
} else {
lyricPlayer.pause();
}
}
const onFrame = (time: number) => {
if (animationCanceled) return;
if (animationLastTime === -1) {
animationLastTime = time;
}
lyricPlayer.update(time - animationLastTime);
animationLastTime = time;
requestAnimationFrame(onFrame);
};
const startAnimation = () => {
animationCanceled = false;
animationLastTime = -1;
requestAnimationFrame(onFrame);
};
const stopAnimation = () => {
animationCanceled = true;
};
$: {
if (!disabled) {
startAnimation();
} else {
stopAnimation();
}
}
$: {
if (lyricsElement) {
lyricsElement.appendChild(lyricPlayer.getElement());
}
if (bottomLineElement) {
lyricPlayer.getBottomLineElement().appendChild(bottomLine);
}
}
$: {
lyricPlayer.setAlignAnchor(alignAnchor);
lyricPlayer.setAlignPosition(alignPosition);
lyricPlayer.setEnableSpring(enableSpring);
lyricPlayer.setEnableScale(enableScale);
lyricPlayer.setEnableBlur(enableBlur);
lyricPlayer.setLinePosXSpringParams(linePosXSpringParams);
lyricPlayer.setLinePosYSpringParams(linePosYSpringParams);
lyricPlayer.setLineScaleSpringParams(lineScaleSpringParams);
lyricPlayer.setHidePassedLines(hidePassedLines);
}
$: {
lyricPlayer.setLyricLines(lyricLines);
lyricPlayer.update();
}
$: {
lyricPlayer.setCurrentTime(currentTime);
}
$: {
lineClickHandler = (e: Event) => onLyricLineClick(e as LyricLineMouseEvent);
lyricPlayer.addEventListener('line-click', lineClickHandler);
}
$: {
contextMenuHandler = (e: Event) => onLyricLineContextMenu(e as LyricLineMouseEvent);
lyricPlayer.addEventListener('line-contextmenu', contextMenuHandler);
}
onDestroy(() => {
animationCanceled = true;
lyricPlayer.dispose();
lyricPlayer.removeEventListener('line-contextmenu', contextMenuHandler);
lyricPlayer.removeEventListener('line-click', lineClickHandler);
});
</script>
<div bind:this={lyricsElement} class={className}></div>
<div bind:this={bottomLineElement}></div>