@uimaxbai/am-lyrics 1.2.3 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/index.html +2 -2
- package/dist/src/AmLyrics.d.ts.map +1 -1
- package/dist/src/am-lyrics.js +40 -45
- package/dist/src/am-lyrics.js.map +1 -1
- package/dist/src/react.js +40 -45
- package/dist/src/react.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/AmLyrics.ts +58 -46
package/demo/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AmLyrics.d.ts","sourceRoot":"","sources":["../../src/AmLyrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAO,MAAM,KAAK,CAAC;AAsHjD,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"AmLyrics.d.ts","sourceRoot":"","sources":["../../src/AmLyrics.ts"],"names":[],"mappings":"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"}
|
package/dist/src/am-lyrics.js
CHANGED
|
@@ -319,7 +319,7 @@ class GoogleService {
|
|
|
319
319
|
}
|
|
320
320
|
}
|
|
321
321
|
|
|
322
|
-
const VERSION = '1.2.
|
|
322
|
+
const VERSION = '1.2.4';
|
|
323
323
|
const INSTRUMENTAL_THRESHOLD_MS = 7000; // Show dots for gaps >= 7s
|
|
324
324
|
const FETCH_TIMEOUT_MS = 8000; // Timeout for all lyrics fetch requests
|
|
325
325
|
const SEEK_THRESHOLD_MS = 500;
|
|
@@ -1909,7 +1909,8 @@ class AmLyrics extends i {
|
|
|
1909
1909
|
preActiveLineIndex = i;
|
|
1910
1910
|
nextLineEl.classList.add('pre-active');
|
|
1911
1911
|
this.clearPreActiveClasses(i);
|
|
1912
|
-
|
|
1912
|
+
const slowScrollDuration = Math.max(SCROLL_ANIMATION_DURATION_MS, timeUntilStart);
|
|
1913
|
+
this.focusLine(nextLineEl, false, slowScrollDuration, !!currentGap);
|
|
1913
1914
|
}
|
|
1914
1915
|
break;
|
|
1915
1916
|
}
|
|
@@ -2103,18 +2104,19 @@ class AmLyrics extends i {
|
|
|
2103
2104
|
}
|
|
2104
2105
|
return candidateIndex;
|
|
2105
2106
|
}
|
|
2106
|
-
focusLine(lineElement, forceScroll = false) {
|
|
2107
|
+
focusLine(lineElement, forceScroll = false, scrollDuration = undefined, skipScroll = false) {
|
|
2107
2108
|
const primaryChanged = lineElement !== this.currentPrimaryActiveLine;
|
|
2108
2109
|
if (primaryChanged) {
|
|
2109
2110
|
this.lastPrimaryActiveLine = this.currentPrimaryActiveLine;
|
|
2110
2111
|
this.currentPrimaryActiveLine = lineElement;
|
|
2111
2112
|
}
|
|
2112
2113
|
this.updatePositionClasses(lineElement);
|
|
2113
|
-
if (
|
|
2114
|
+
if (!skipScroll &&
|
|
2115
|
+
(forceScroll || primaryChanged) &&
|
|
2114
2116
|
this.autoScroll &&
|
|
2115
2117
|
!this.isUserScrolling &&
|
|
2116
2118
|
!this.isClickSeeking) {
|
|
2117
|
-
this.scrollToActiveLineYouLy(lineElement, forceScroll);
|
|
2119
|
+
this.scrollToActiveLineYouLy(lineElement, forceScroll, scrollDuration);
|
|
2118
2120
|
}
|
|
2119
2121
|
}
|
|
2120
2122
|
handleUserScroll() {
|
|
@@ -2487,7 +2489,7 @@ class AmLyrics extends i {
|
|
|
2487
2489
|
/**
|
|
2488
2490
|
* Animate scroll with staggered delay for smooth YouLyPlus-style scrolling
|
|
2489
2491
|
*/
|
|
2490
|
-
animateScrollYouLy(newTranslateY, forceScroll = false) {
|
|
2492
|
+
animateScrollYouLy(newTranslateY, forceScroll = false, scrollDuration = undefined) {
|
|
2491
2493
|
if (!this.lyricsContainer)
|
|
2492
2494
|
return;
|
|
2493
2495
|
const parent = this.lyricsContainer;
|
|
@@ -2568,11 +2570,12 @@ class AmLyrics extends i {
|
|
|
2568
2570
|
if (i >= referenceIndex)
|
|
2569
2571
|
delayCounter += 1;
|
|
2570
2572
|
const delay = i >= referenceIndex ? (delayCounter - 1) * delayIncrement : 0;
|
|
2573
|
+
const duration = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
|
|
2571
2574
|
line.style.setProperty('--scroll-delta', `${delta}px`);
|
|
2572
2575
|
line.style.setProperty('--lyrics-line-delay', `${delay}ms`);
|
|
2573
|
-
line.style.setProperty('--scroll-duration', `${
|
|
2576
|
+
line.style.setProperty('--scroll-duration', `${duration}ms`);
|
|
2574
2577
|
newAnimatingLines.push(line);
|
|
2575
|
-
const lineDuration =
|
|
2578
|
+
const lineDuration = duration + delay;
|
|
2576
2579
|
if (lineDuration > maxAnimationDuration) {
|
|
2577
2580
|
maxAnimationDuration = lineDuration;
|
|
2578
2581
|
}
|
|
@@ -2587,13 +2590,13 @@ class AmLyrics extends i {
|
|
|
2587
2590
|
animatingLines.push(line);
|
|
2588
2591
|
}
|
|
2589
2592
|
animState.isAnimating = true;
|
|
2590
|
-
const BASE_DURATION = SCROLL_ANIMATION_DURATION_MS;
|
|
2593
|
+
const BASE_DURATION = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
|
|
2591
2594
|
this.scrollUnlockTimeout = setTimeout(() => {
|
|
2592
2595
|
animState.isAnimating = false;
|
|
2593
2596
|
if (animState.pendingUpdate !== null) {
|
|
2594
2597
|
const pendingValue = animState.pendingUpdate;
|
|
2595
2598
|
animState.pendingUpdate = null;
|
|
2596
|
-
this.animateScrollYouLy(pendingValue, false);
|
|
2599
|
+
this.animateScrollYouLy(pendingValue, false, scrollDuration);
|
|
2597
2600
|
}
|
|
2598
2601
|
}, BASE_DURATION);
|
|
2599
2602
|
this.scrollAnimationTimeout = setTimeout(() => {
|
|
@@ -2654,7 +2657,7 @@ class AmLyrics extends i {
|
|
|
2654
2657
|
/**
|
|
2655
2658
|
* Scroll to active line with YouLyPlus-style animation
|
|
2656
2659
|
*/
|
|
2657
|
-
scrollToActiveLineYouLy(activeLine, forceScroll = false) {
|
|
2660
|
+
scrollToActiveLineYouLy(activeLine, forceScroll = false, scrollDuration = undefined) {
|
|
2658
2661
|
if (!activeLine || !this.lyricsContainer)
|
|
2659
2662
|
return;
|
|
2660
2663
|
const paddingTop = this.getScrollPaddingTop();
|
|
@@ -2682,10 +2685,11 @@ class AmLyrics extends i {
|
|
|
2682
2685
|
clearTimeout(this.userScrollTimeoutId);
|
|
2683
2686
|
this.userScrollTimeoutId = undefined;
|
|
2684
2687
|
}
|
|
2688
|
+
const duration = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
|
|
2685
2689
|
setTimeout(() => {
|
|
2686
2690
|
this.isProgrammaticScroll = false;
|
|
2687
|
-
},
|
|
2688
|
-
this.animateScrollYouLy(targetTranslateY, forceScroll);
|
|
2691
|
+
}, duration + 160);
|
|
2692
|
+
this.animateScrollYouLy(targetTranslateY, forceScroll, scrollDuration);
|
|
2689
2693
|
}
|
|
2690
2694
|
/**
|
|
2691
2695
|
* Update syllable highlight animation - apply CSS wipe animation
|
|
@@ -3321,13 +3325,13 @@ class AmLyrics extends i {
|
|
|
3321
3325
|
}
|
|
3322
3326
|
else {
|
|
3323
3327
|
isGrowableVW =
|
|
3324
|
-
combinedDuration >=
|
|
3328
|
+
combinedDuration >= 850 && combinedDuration >= wordLen * 200;
|
|
3325
3329
|
}
|
|
3326
3330
|
}
|
|
3327
3331
|
// Glow requirement (more strict)
|
|
3328
3332
|
const isGlowingVW = isGrowableVW &&
|
|
3329
|
-
combinedDuration >=
|
|
3330
|
-
combinedDuration >= combinedText.length *
|
|
3333
|
+
combinedDuration >= 1000 &&
|
|
3334
|
+
combinedDuration >= combinedText.length * 250;
|
|
3331
3335
|
let charOff = 0;
|
|
3332
3336
|
for (let gi = vwStart; gi <= vwEnd; gi += 1) {
|
|
3333
3337
|
groupGrowable[gi] = isGrowableVW;
|
|
@@ -3897,14 +3901,16 @@ AmLyrics.styles = i$3 `
|
|
|
3897
3901
|
|
|
3898
3902
|
.background-vocal-container {
|
|
3899
3903
|
max-height: 0;
|
|
3900
|
-
padding-top: 0
|
|
3904
|
+
padding-top: 0;
|
|
3905
|
+
transform: translateY(-0.5em) scale(0.95);
|
|
3901
3906
|
overflow: visible;
|
|
3902
3907
|
opacity: 0;
|
|
3903
3908
|
font-size: var(--lyplus-font-size-subtext);
|
|
3904
3909
|
transition:
|
|
3905
|
-
max-height
|
|
3906
|
-
opacity
|
|
3907
|
-
|
|
3910
|
+
max-height 450ms cubic-bezier(0.33, 1, 0.68, 1),
|
|
3911
|
+
opacity 400ms ease-out,
|
|
3912
|
+
transform 450ms cubic-bezier(0.33, 1, 0.68, 1),
|
|
3913
|
+
padding 450ms cubic-bezier(0.33, 1, 0.68, 1);
|
|
3908
3914
|
margin: 0;
|
|
3909
3915
|
}
|
|
3910
3916
|
|
|
@@ -3912,11 +3918,14 @@ AmLyrics.styles = i$3 `
|
|
|
3912
3918
|
.lyrics-line.pre-active .background-vocal-container {
|
|
3913
3919
|
max-height: 4em;
|
|
3914
3920
|
opacity: 1;
|
|
3921
|
+
padding-top: 0.2em;
|
|
3922
|
+
transform: translateY(0) scale(1);
|
|
3915
3923
|
transition:
|
|
3916
|
-
max-height
|
|
3917
|
-
opacity
|
|
3918
|
-
|
|
3919
|
-
|
|
3924
|
+
max-height 450ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
3925
|
+
opacity 400ms ease-out,
|
|
3926
|
+
transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
3927
|
+
padding 450ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
3928
|
+
will-change: max-height, opacity, padding, transform;
|
|
3920
3929
|
}
|
|
3921
3930
|
|
|
3922
3931
|
/* --- Line States & Modifiers --- */
|
|
@@ -4248,49 +4257,35 @@ AmLyrics.styles = i$3 `
|
|
|
4248
4257
|
INSTRUMENTAL GAP STYLES
|
|
4249
4258
|
========================================================================== */
|
|
4250
4259
|
.lyrics-gap {
|
|
4251
|
-
max-height:
|
|
4252
|
-
padding:
|
|
4253
|
-
overflow:
|
|
4260
|
+
max-height: 1.6em;
|
|
4261
|
+
padding: var(--lyplus-padding-gap);
|
|
4262
|
+
overflow: visible;
|
|
4254
4263
|
opacity: 0;
|
|
4255
4264
|
box-sizing: content-box;
|
|
4256
4265
|
background-clip: unset;
|
|
4257
4266
|
transform-origin: top;
|
|
4258
4267
|
transition:
|
|
4259
|
-
padding 220ms cubic-bezier(0.33, 1, 0.68, 1),
|
|
4260
|
-
max-height 220ms cubic-bezier(0.33, 1, 0.68, 1),
|
|
4261
4268
|
opacity 160ms ease-out,
|
|
4262
4269
|
transform var(--scroll-duration, 280ms) var(--lyrics-line-delay, 0ms);
|
|
4263
4270
|
}
|
|
4264
4271
|
|
|
4265
4272
|
.lyrics-gap.active {
|
|
4266
|
-
max-height: 1.6em;
|
|
4267
|
-
padding: var(--lyplus-padding-gap);
|
|
4268
4273
|
opacity: 1;
|
|
4269
|
-
overflow: visible;
|
|
4270
4274
|
transition:
|
|
4271
|
-
padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
4272
|
-
max-height 220ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
4273
4275
|
opacity 160ms ease-out,
|
|
4274
4276
|
transform var(--scroll-duration, 280ms);
|
|
4275
|
-
will-change:
|
|
4277
|
+
will-change: opacity;
|
|
4276
4278
|
}
|
|
4277
4279
|
|
|
4278
4280
|
/* Exiting state: quickly collapse width and height so dots don't distort page, or remove max-height transition */
|
|
4279
4281
|
.lyrics-gap.gap-exiting {
|
|
4280
|
-
|
|
4281
|
-
|
|
4282
|
-
opacity: 0;
|
|
4283
|
-
overflow: visible;
|
|
4284
|
-
transition:
|
|
4285
|
-
padding var(--gap-exit-duration, 360ms) cubic-bezier(0.33, 1, 0.68, 1),
|
|
4286
|
-
max-height var(--gap-exit-duration, 360ms)
|
|
4287
|
-
cubic-bezier(0.33, 1, 0.68, 1),
|
|
4288
|
-
opacity 160ms ease-out,
|
|
4289
|
-
transform var(--scroll-duration, 280ms);
|
|
4282
|
+
opacity: 1;
|
|
4283
|
+
transition: transform var(--scroll-duration, 280ms);
|
|
4290
4284
|
}
|
|
4291
4285
|
|
|
4292
4286
|
.lyrics-gap .main-vocal-container {
|
|
4293
4287
|
transform: translateY(-25%) scale(1) translateZ(0);
|
|
4288
|
+
transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
4294
4289
|
}
|
|
4295
4290
|
|
|
4296
4291
|
/* Jump animation plays during exit */
|