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

fix: real progress and lyric highlighting inconsistent during interlude

Browse Source
This commit is contained in:
alikia2x (寒寒) 2024-10-27 13:13:38 +08:00
parent 734bce13f6
commit 5af6992632
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
2 changed files with 20 additions and 16 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.2", "version": "2.3.3",
"private": false, "private": false,
"module": "index.ts", "module": "index.ts",
"type": "module", "type": "module",

30
packages/core/components/lyrics/newLyrics.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { LrcJsonData } from '@core/lyrics/type'; import type { LrcJsonData, ScriptItem } from '@core/lyrics/type';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import type { ScriptItem } from '@core/lyrics/type';
import LyricLine from './lyricLine.svelte'; import LyricLine from './lyricLine.svelte';
import createLyricsSearcher from '@core/lyrics/lyricSearcher'; import createLyricsSearcher from '@core/lyrics/lyricSearcher';
@ -10,7 +9,7 @@
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const marginY = viewportWidth > 640 ? 12 : 0; const marginY = viewportWidth > 640 ? 12 : 0;
const blurRatio = viewportWidth > 640 ? 1 : 1.4; const blurRatio = viewportWidth > 640 ? 1 : 1.4;
const currentLyrictTop = viewportWidth > 640 ? viewportHeight * 0.12 : viewportHeight * 0.05; const currentLyricTop = 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';
@ -57,7 +56,7 @@
} }
function initLyricTopList() { function initLyricTopList() {
let cumulativeHeight = currentLyrictTop; let cumulativeHeight = currentLyricTop;
for (let i = 0; i < lyricLines.length; i++) { for (let i = 0; i < lyricLines.length; i++) {
const c = lyricComponents[i]; const c = lyricComponents[i];
lyricElements.push(c.getRef()); lyricElements.push(c.getRef());
@ -73,17 +72,15 @@
if (!originalLyrics.scripts) return; if (!originalLyrics.scripts) return;
const currentLyricDuration = const currentLyricDuration =
originalLyrics.scripts[currentLyricIndex].end - originalLyrics.scripts[currentLyricIndex].start; originalLyrics.scripts[currentLyricIndex].end - originalLyrics.scripts[currentLyricIndex].start;
const relativeOrigin = lyricTopList[currentLyricIndex] - currentLyrictTop; const relativeOrigin = lyricTopList[currentLyricIndex] - currentLyricTop;
for (let i = 0; i < lyricElements.length; i++) { for (let i = 0; i < lyricElements.length; i++) {
const currentLyricComponent = lyricComponents[i]; const currentLyricComponent = lyricComponents[i];
let delay = 0; let delay = 0;
if (i < currentLyricIndex) { if (i < currentLyricIndex) {
delay = 0; delay = 0;
} } else if (i == currentLyricIndex) {
else if (i == currentLyricIndex) {
delay = 0.042; delay = 0.042;
} } else {
else {
delay = Math.min(Math.min(currentLyricDuration, 0.6), 0.067 * (i - currentLyricIndex + 1.2)); delay = Math.min(Math.min(currentLyricDuration, 0.6), 0.067 * (i - currentLyricIndex + 1.2));
} }
const offset = Math.abs(i - currentLyricIndex); const offset = Math.abs(i - currentLyricIndex);
@ -155,6 +152,7 @@
velocityY *= deceleration; // Apply deceleration to velocity velocityY *= deceleration; // Apply deceleration to velocity
inertiaFrame = requestAnimationFrame(inertiaScroll); // Continue scrolling in next frame inertiaFrame = requestAnimationFrame(inertiaScroll); // Continue scrolling in next frame
} }
inertiaScroll(); inertiaScroll();
} }
@ -183,7 +181,6 @@
$: { $: {
if (lyricsContainer && lyricComponents.length > 0) { if (lyricsContainer && lyricComponents.length > 0) {
if (progress >= nextUpdate - 0.5 && !scrolling) { if (progress >= nextUpdate - 0.5 && !scrolling) {
console.log("computeLayout")
computeLayout(); computeLayout();
} }
if (Math.abs(lastProgress - progress) > 0.5) { if (Math.abs(lastProgress - progress) > 0.5) {
@ -198,8 +195,7 @@
const nextStart = originalLyrics.scripts![Math.min(currentLyricIndex + 1, lyricLength - 1)].start; const nextStart = originalLyrics.scripts![Math.min(currentLyricIndex + 1, lyricLength - 1)].start;
if (currentEnd !== nextStart) { if (currentEnd !== nextStart) {
nextUpdate = currentEnd; nextUpdate = currentEnd;
} } else {
else {
nextUpdate = nextStart; nextUpdate = nextStart;
} }
} }
@ -209,7 +205,15 @@
$: { $: {
for (let i = 0; i < lyricElements.length; i++) { for (let i = 0; i < lyricElements.length; i++) {
const isCurrent = i == currentLyricIndex; const s = originalLyrics.scripts![i].start;
const t = originalLyrics.scripts![i].end;
// Explain:
// The `currentLyricIndex` is also used for locating & layout computing,
// so when the current progress is in the interlude between two lyrics,
// `currentLyricIndex` still needs to have a valid value to ensure that
// the style and scrolling position are calculated correctly.
// But in that situation, the “current lyric index” does not exist.
const isCurrent = i == currentLyricIndex && s <= progress && progress <= t;
const currentLyricComponent = lyricComponents[i]; const currentLyricComponent = lyricComponents[i];
currentLyricComponent.setCurrent(isCurrent); currentLyricComponent.setCurrent(isCurrent);
} }