@uimaxbai/am-lyrics 1.2.2 → 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 +52 -50
- package/dist/src/am-lyrics.js.map +1 -1
- package/dist/src/react.js +52 -50
- package/dist/src/react.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/AmLyrics.ts +67 -51
package/dist/src/react.js
CHANGED
|
@@ -322,7 +322,7 @@ class GoogleService {
|
|
|
322
322
|
}
|
|
323
323
|
}
|
|
324
324
|
|
|
325
|
-
const VERSION = '1.2.
|
|
325
|
+
const VERSION = '1.2.4';
|
|
326
326
|
const INSTRUMENTAL_THRESHOLD_MS = 7000; // Show dots for gaps >= 7s
|
|
327
327
|
const FETCH_TIMEOUT_MS = 8000; // Timeout for all lyrics fetch requests
|
|
328
328
|
const SEEK_THRESHOLD_MS = 500;
|
|
@@ -540,7 +540,8 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
540
540
|
const isMusicIdOnlyRequest = Boolean(this.musicId) &&
|
|
541
541
|
!this.songTitle &&
|
|
542
542
|
!this.songArtist &&
|
|
543
|
-
!this.query
|
|
543
|
+
!this.query &&
|
|
544
|
+
!this.isrc;
|
|
544
545
|
const collectedSources = [];
|
|
545
546
|
if (resolvedMetadata?.metadata && !isMusicIdOnlyRequest) {
|
|
546
547
|
const title = resolvedMetadata.metadata.title?.trim() || '';
|
|
@@ -757,7 +758,7 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
757
758
|
}
|
|
758
759
|
const appleSong = null;
|
|
759
760
|
let appleId = this.musicId;
|
|
760
|
-
let catalogIsrc;
|
|
761
|
+
let catalogIsrc = this.isrc;
|
|
761
762
|
if (this.query &&
|
|
762
763
|
(!metadata.title || !metadata.artist || !metadata.album)) {
|
|
763
764
|
const parsed = AmLyrics.parseQueryMetadata(this.query);
|
|
@@ -884,9 +885,15 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
884
885
|
return null;
|
|
885
886
|
}
|
|
886
887
|
static async fetchLyricsFromYouLyPlus(title, artist, isrc, metadata = {}) {
|
|
887
|
-
if (!title || !artist)
|
|
888
|
+
if ((!title || !artist) && !isrc)
|
|
888
889
|
return [];
|
|
889
|
-
const params = new URLSearchParams(
|
|
890
|
+
const params = new URLSearchParams();
|
|
891
|
+
if (title)
|
|
892
|
+
params.append('title', title);
|
|
893
|
+
if (artist)
|
|
894
|
+
params.append('artist', artist);
|
|
895
|
+
if (isrc)
|
|
896
|
+
params.append('isrc', isrc);
|
|
890
897
|
if (metadata.album) {
|
|
891
898
|
params.append('album', metadata.album);
|
|
892
899
|
}
|
|
@@ -947,7 +954,7 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
947
954
|
}
|
|
948
955
|
}
|
|
949
956
|
// Second attempt: Fallback to title and artist search if ISRC search failed or was not available
|
|
950
|
-
if (!cacheData) {
|
|
957
|
+
if (!cacheData && title && artist) {
|
|
951
958
|
const cacheParams = new URLSearchParams({
|
|
952
959
|
track: title,
|
|
953
960
|
artist,
|
|
@@ -1905,7 +1912,8 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
1905
1912
|
preActiveLineIndex = i;
|
|
1906
1913
|
nextLineEl.classList.add('pre-active');
|
|
1907
1914
|
this.clearPreActiveClasses(i);
|
|
1908
|
-
|
|
1915
|
+
const slowScrollDuration = Math.max(SCROLL_ANIMATION_DURATION_MS, timeUntilStart);
|
|
1916
|
+
this.focusLine(nextLineEl, false, slowScrollDuration, !!currentGap);
|
|
1909
1917
|
}
|
|
1910
1918
|
break;
|
|
1911
1919
|
}
|
|
@@ -2099,18 +2107,19 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
2099
2107
|
}
|
|
2100
2108
|
return candidateIndex;
|
|
2101
2109
|
}
|
|
2102
|
-
focusLine(lineElement, forceScroll = false) {
|
|
2110
|
+
focusLine(lineElement, forceScroll = false, scrollDuration = undefined, skipScroll = false) {
|
|
2103
2111
|
const primaryChanged = lineElement !== this.currentPrimaryActiveLine;
|
|
2104
2112
|
if (primaryChanged) {
|
|
2105
2113
|
this.lastPrimaryActiveLine = this.currentPrimaryActiveLine;
|
|
2106
2114
|
this.currentPrimaryActiveLine = lineElement;
|
|
2107
2115
|
}
|
|
2108
2116
|
this.updatePositionClasses(lineElement);
|
|
2109
|
-
if (
|
|
2117
|
+
if (!skipScroll &&
|
|
2118
|
+
(forceScroll || primaryChanged) &&
|
|
2110
2119
|
this.autoScroll &&
|
|
2111
2120
|
!this.isUserScrolling &&
|
|
2112
2121
|
!this.isClickSeeking) {
|
|
2113
|
-
this.scrollToActiveLineYouLy(lineElement, forceScroll);
|
|
2122
|
+
this.scrollToActiveLineYouLy(lineElement, forceScroll, scrollDuration);
|
|
2114
2123
|
}
|
|
2115
2124
|
}
|
|
2116
2125
|
handleUserScroll() {
|
|
@@ -2483,7 +2492,7 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
2483
2492
|
/**
|
|
2484
2493
|
* Animate scroll with staggered delay for smooth YouLyPlus-style scrolling
|
|
2485
2494
|
*/
|
|
2486
|
-
animateScrollYouLy(newTranslateY, forceScroll = false) {
|
|
2495
|
+
animateScrollYouLy(newTranslateY, forceScroll = false, scrollDuration = undefined) {
|
|
2487
2496
|
if (!this.lyricsContainer)
|
|
2488
2497
|
return;
|
|
2489
2498
|
const parent = this.lyricsContainer;
|
|
@@ -2564,11 +2573,12 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
2564
2573
|
if (i >= referenceIndex)
|
|
2565
2574
|
delayCounter += 1;
|
|
2566
2575
|
const delay = i >= referenceIndex ? (delayCounter - 1) * delayIncrement : 0;
|
|
2576
|
+
const duration = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
|
|
2567
2577
|
line.style.setProperty('--scroll-delta', `${delta}px`);
|
|
2568
2578
|
line.style.setProperty('--lyrics-line-delay', `${delay}ms`);
|
|
2569
|
-
line.style.setProperty('--scroll-duration', `${
|
|
2579
|
+
line.style.setProperty('--scroll-duration', `${duration}ms`);
|
|
2570
2580
|
newAnimatingLines.push(line);
|
|
2571
|
-
const lineDuration =
|
|
2581
|
+
const lineDuration = duration + delay;
|
|
2572
2582
|
if (lineDuration > maxAnimationDuration) {
|
|
2573
2583
|
maxAnimationDuration = lineDuration;
|
|
2574
2584
|
}
|
|
@@ -2583,13 +2593,13 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
2583
2593
|
animatingLines.push(line);
|
|
2584
2594
|
}
|
|
2585
2595
|
animState.isAnimating = true;
|
|
2586
|
-
const BASE_DURATION = SCROLL_ANIMATION_DURATION_MS;
|
|
2596
|
+
const BASE_DURATION = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
|
|
2587
2597
|
this.scrollUnlockTimeout = setTimeout(() => {
|
|
2588
2598
|
animState.isAnimating = false;
|
|
2589
2599
|
if (animState.pendingUpdate !== null) {
|
|
2590
2600
|
const pendingValue = animState.pendingUpdate;
|
|
2591
2601
|
animState.pendingUpdate = null;
|
|
2592
|
-
this.animateScrollYouLy(pendingValue, false);
|
|
2602
|
+
this.animateScrollYouLy(pendingValue, false, scrollDuration);
|
|
2593
2603
|
}
|
|
2594
2604
|
}, BASE_DURATION);
|
|
2595
2605
|
this.scrollAnimationTimeout = setTimeout(() => {
|
|
@@ -2650,7 +2660,7 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
2650
2660
|
/**
|
|
2651
2661
|
* Scroll to active line with YouLyPlus-style animation
|
|
2652
2662
|
*/
|
|
2653
|
-
scrollToActiveLineYouLy(activeLine, forceScroll = false) {
|
|
2663
|
+
scrollToActiveLineYouLy(activeLine, forceScroll = false, scrollDuration = undefined) {
|
|
2654
2664
|
if (!activeLine || !this.lyricsContainer)
|
|
2655
2665
|
return;
|
|
2656
2666
|
const paddingTop = this.getScrollPaddingTop();
|
|
@@ -2678,10 +2688,11 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
2678
2688
|
clearTimeout(this.userScrollTimeoutId);
|
|
2679
2689
|
this.userScrollTimeoutId = undefined;
|
|
2680
2690
|
}
|
|
2691
|
+
const duration = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
|
|
2681
2692
|
setTimeout(() => {
|
|
2682
2693
|
this.isProgrammaticScroll = false;
|
|
2683
|
-
},
|
|
2684
|
-
this.animateScrollYouLy(targetTranslateY, forceScroll);
|
|
2694
|
+
}, duration + 160);
|
|
2695
|
+
this.animateScrollYouLy(targetTranslateY, forceScroll, scrollDuration);
|
|
2685
2696
|
}
|
|
2686
2697
|
/**
|
|
2687
2698
|
* Update syllable highlight animation - apply CSS wipe animation
|
|
@@ -3317,13 +3328,13 @@ let AmLyrics$1 = class AmLyrics extends i {
|
|
|
3317
3328
|
}
|
|
3318
3329
|
else {
|
|
3319
3330
|
isGrowableVW =
|
|
3320
|
-
combinedDuration >=
|
|
3331
|
+
combinedDuration >= 850 && combinedDuration >= wordLen * 200;
|
|
3321
3332
|
}
|
|
3322
3333
|
}
|
|
3323
3334
|
// Glow requirement (more strict)
|
|
3324
3335
|
const isGlowingVW = isGrowableVW &&
|
|
3325
|
-
combinedDuration >=
|
|
3326
|
-
combinedDuration >= combinedText.length *
|
|
3336
|
+
combinedDuration >= 1000 &&
|
|
3337
|
+
combinedDuration >= combinedText.length * 250;
|
|
3327
3338
|
let charOff = 0;
|
|
3328
3339
|
for (let gi = vwStart; gi <= vwEnd; gi += 1) {
|
|
3329
3340
|
groupGrowable[gi] = isGrowableVW;
|
|
@@ -3893,14 +3904,16 @@ AmLyrics$1.styles = i$3 `
|
|
|
3893
3904
|
|
|
3894
3905
|
.background-vocal-container {
|
|
3895
3906
|
max-height: 0;
|
|
3896
|
-
padding-top: 0
|
|
3907
|
+
padding-top: 0;
|
|
3908
|
+
transform: translateY(-0.5em) scale(0.95);
|
|
3897
3909
|
overflow: visible;
|
|
3898
3910
|
opacity: 0;
|
|
3899
3911
|
font-size: var(--lyplus-font-size-subtext);
|
|
3900
3912
|
transition:
|
|
3901
|
-
max-height
|
|
3902
|
-
opacity
|
|
3903
|
-
|
|
3913
|
+
max-height 450ms cubic-bezier(0.33, 1, 0.68, 1),
|
|
3914
|
+
opacity 400ms ease-out,
|
|
3915
|
+
transform 450ms cubic-bezier(0.33, 1, 0.68, 1),
|
|
3916
|
+
padding 450ms cubic-bezier(0.33, 1, 0.68, 1);
|
|
3904
3917
|
margin: 0;
|
|
3905
3918
|
}
|
|
3906
3919
|
|
|
@@ -3908,11 +3921,14 @@ AmLyrics$1.styles = i$3 `
|
|
|
3908
3921
|
.lyrics-line.pre-active .background-vocal-container {
|
|
3909
3922
|
max-height: 4em;
|
|
3910
3923
|
opacity: 1;
|
|
3924
|
+
padding-top: 0.2em;
|
|
3925
|
+
transform: translateY(0) scale(1);
|
|
3911
3926
|
transition:
|
|
3912
|
-
max-height
|
|
3913
|
-
opacity
|
|
3914
|
-
|
|
3915
|
-
|
|
3927
|
+
max-height 450ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
3928
|
+
opacity 400ms ease-out,
|
|
3929
|
+
transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
3930
|
+
padding 450ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
3931
|
+
will-change: max-height, opacity, padding, transform;
|
|
3916
3932
|
}
|
|
3917
3933
|
|
|
3918
3934
|
/* --- Line States & Modifiers --- */
|
|
@@ -4244,49 +4260,35 @@ AmLyrics$1.styles = i$3 `
|
|
|
4244
4260
|
INSTRUMENTAL GAP STYLES
|
|
4245
4261
|
========================================================================== */
|
|
4246
4262
|
.lyrics-gap {
|
|
4247
|
-
max-height:
|
|
4248
|
-
padding:
|
|
4249
|
-
overflow:
|
|
4263
|
+
max-height: 1.6em;
|
|
4264
|
+
padding: var(--lyplus-padding-gap);
|
|
4265
|
+
overflow: visible;
|
|
4250
4266
|
opacity: 0;
|
|
4251
4267
|
box-sizing: content-box;
|
|
4252
4268
|
background-clip: unset;
|
|
4253
4269
|
transform-origin: top;
|
|
4254
4270
|
transition:
|
|
4255
|
-
padding 220ms cubic-bezier(0.33, 1, 0.68, 1),
|
|
4256
|
-
max-height 220ms cubic-bezier(0.33, 1, 0.68, 1),
|
|
4257
4271
|
opacity 160ms ease-out,
|
|
4258
4272
|
transform var(--scroll-duration, 280ms) var(--lyrics-line-delay, 0ms);
|
|
4259
4273
|
}
|
|
4260
4274
|
|
|
4261
4275
|
.lyrics-gap.active {
|
|
4262
|
-
max-height: 1.6em;
|
|
4263
|
-
padding: var(--lyplus-padding-gap);
|
|
4264
4276
|
opacity: 1;
|
|
4265
|
-
overflow: visible;
|
|
4266
4277
|
transition:
|
|
4267
|
-
padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
4268
|
-
max-height 220ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
4269
4278
|
opacity 160ms ease-out,
|
|
4270
4279
|
transform var(--scroll-duration, 280ms);
|
|
4271
|
-
will-change:
|
|
4280
|
+
will-change: opacity;
|
|
4272
4281
|
}
|
|
4273
4282
|
|
|
4274
4283
|
/* Exiting state: quickly collapse width and height so dots don't distort page, or remove max-height transition */
|
|
4275
4284
|
.lyrics-gap.gap-exiting {
|
|
4276
|
-
|
|
4277
|
-
|
|
4278
|
-
opacity: 0;
|
|
4279
|
-
overflow: visible;
|
|
4280
|
-
transition:
|
|
4281
|
-
padding var(--gap-exit-duration, 360ms) cubic-bezier(0.33, 1, 0.68, 1),
|
|
4282
|
-
max-height var(--gap-exit-duration, 360ms)
|
|
4283
|
-
cubic-bezier(0.33, 1, 0.68, 1),
|
|
4284
|
-
opacity 160ms ease-out,
|
|
4285
|
-
transform var(--scroll-duration, 280ms);
|
|
4285
|
+
opacity: 1;
|
|
4286
|
+
transition: transform var(--scroll-duration, 280ms);
|
|
4286
4287
|
}
|
|
4287
4288
|
|
|
4288
4289
|
.lyrics-gap .main-vocal-container {
|
|
4289
4290
|
transform: translateY(-25%) scale(1) translateZ(0);
|
|
4291
|
+
transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
4290
4292
|
}
|
|
4291
4293
|
|
|
4292
4294
|
/* Jump animation plays during exit */
|