@uimaxbai/am-lyrics 1.2.3 → 1.2.4

package/dist/src/react.js

@@ -322,7 +322,7 @@ class GoogleService {
     }
 }
 
-const VERSION = '1.2.3';
+const VERSION = '1.2.4';
 const INSTRUMENTAL_THRESHOLD_MS = 7000; // Show dots for gaps >= 7s
 const FETCH_TIMEOUT_MS = 8000; // Timeout for all lyrics fetch requests
 const SEEK_THRESHOLD_MS = 500;
@@ -1912,7 +1912,8 @@ let AmLyrics$1 = class AmLyrics extends i {
                                 preActiveLineIndex = i;
                                 nextLineEl.classList.add('pre-active');
                                 this.clearPreActiveClasses(i);
-                                this.focusLine(nextLineEl);
+                                const slowScrollDuration = Math.max(SCROLL_ANIMATION_DURATION_MS, timeUntilStart);
+                                this.focusLine(nextLineEl, false, slowScrollDuration, !!currentGap);
                             }
                             break;
                         }
@@ -2106,18 +2107,19 @@ let AmLyrics$1 = class AmLyrics extends i {
         }
         return candidateIndex;
     }
-    focusLine(lineElement, forceScroll = false) {
+    focusLine(lineElement, forceScroll = false, scrollDuration = undefined, skipScroll = false) {
         const primaryChanged = lineElement !== this.currentPrimaryActiveLine;
         if (primaryChanged) {
             this.lastPrimaryActiveLine = this.currentPrimaryActiveLine;
             this.currentPrimaryActiveLine = lineElement;
         }
         this.updatePositionClasses(lineElement);
-        if ((forceScroll || primaryChanged) &&
+        if (!skipScroll &&
+            (forceScroll || primaryChanged) &&
             this.autoScroll &&
             !this.isUserScrolling &&
             !this.isClickSeeking) {
-            this.scrollToActiveLineYouLy(lineElement, forceScroll);
+            this.scrollToActiveLineYouLy(lineElement, forceScroll, scrollDuration);
         }
     }
     handleUserScroll() {
@@ -2490,7 +2492,7 @@ let AmLyrics$1 = class AmLyrics extends i {
     /**
      * Animate scroll with staggered delay for smooth YouLyPlus-style scrolling
      */
-    animateScrollYouLy(newTranslateY, forceScroll = false) {
+    animateScrollYouLy(newTranslateY, forceScroll = false, scrollDuration = undefined) {
         if (!this.lyricsContainer)
             return;
         const parent = this.lyricsContainer;
@@ -2571,11 +2573,12 @@ let AmLyrics$1 = class AmLyrics extends i {
             if (i >= referenceIndex)
                 delayCounter += 1;
             const delay = i >= referenceIndex ? (delayCounter - 1) * delayIncrement : 0;
+            const duration = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
             line.style.setProperty('--scroll-delta', `${delta}px`);
             line.style.setProperty('--lyrics-line-delay', `${delay}ms`);
-            line.style.setProperty('--scroll-duration', `${SCROLL_ANIMATION_DURATION_MS}ms`);
+            line.style.setProperty('--scroll-duration', `${duration}ms`);
             newAnimatingLines.push(line);
-            const lineDuration = SCROLL_ANIMATION_DURATION_MS + delay;
+            const lineDuration = duration + delay;
             if (lineDuration > maxAnimationDuration) {
                 maxAnimationDuration = lineDuration;
             }
@@ -2590,13 +2593,13 @@ let AmLyrics$1 = class AmLyrics extends i {
             animatingLines.push(line);
         }
         animState.isAnimating = true;
-        const BASE_DURATION = SCROLL_ANIMATION_DURATION_MS;
+        const BASE_DURATION = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
         this.scrollUnlockTimeout = setTimeout(() => {
             animState.isAnimating = false;
             if (animState.pendingUpdate !== null) {
                 const pendingValue = animState.pendingUpdate;
                 animState.pendingUpdate = null;
-                this.animateScrollYouLy(pendingValue, false);
+                this.animateScrollYouLy(pendingValue, false, scrollDuration);
             }
         }, BASE_DURATION);
         this.scrollAnimationTimeout = setTimeout(() => {
@@ -2657,7 +2660,7 @@ let AmLyrics$1 = class AmLyrics extends i {
     /**
      * Scroll to active line with YouLyPlus-style animation
      */
-    scrollToActiveLineYouLy(activeLine, forceScroll = false) {
+    scrollToActiveLineYouLy(activeLine, forceScroll = false, scrollDuration = undefined) {
         if (!activeLine || !this.lyricsContainer)
             return;
         const paddingTop = this.getScrollPaddingTop();
@@ -2685,10 +2688,11 @@ let AmLyrics$1 = class AmLyrics extends i {
             clearTimeout(this.userScrollTimeoutId);
             this.userScrollTimeoutId = undefined;
         }
+        const duration = scrollDuration ?? SCROLL_ANIMATION_DURATION_MS;
         setTimeout(() => {
             this.isProgrammaticScroll = false;
-        }, SCROLL_ANIMATION_DURATION_MS + 160);
-        this.animateScrollYouLy(targetTranslateY, forceScroll);
+        }, duration + 160);
+        this.animateScrollYouLy(targetTranslateY, forceScroll, scrollDuration);
     }
     /**
      * Update syllable highlight animation - apply CSS wipe animation
@@ -3324,13 +3328,13 @@ let AmLyrics$1 = class AmLyrics extends i {
                             }
                             else {
                                 isGrowableVW =
-                                    combinedDuration >= 900 && combinedDuration >= wordLen * 300;
+                                    combinedDuration >= 850 && combinedDuration >= wordLen * 200;
                             }
                         }
                         // Glow requirement (more strict)
                         const isGlowingVW = isGrowableVW &&
-                            combinedDuration >= 1200 &&
-                            combinedDuration >= combinedText.length * 300;
+                            combinedDuration >= 1000 &&
+                            combinedDuration >= combinedText.length * 250;
                         let charOff = 0;
                         for (let gi = vwStart; gi <= vwEnd; gi += 1) {
                             groupGrowable[gi] = isGrowableVW;
@@ -3900,14 +3904,16 @@ AmLyrics$1.styles = i$3 `
 
     .background-vocal-container {
       max-height: 0;
-      padding-top: 0.2em;
+      padding-top: 0;
+      transform: translateY(-0.5em) scale(0.95);
       overflow: visible;
       opacity: 0;
       font-size: var(--lyplus-font-size-subtext);
       transition:
-        max-height 350ms cubic-bezier(0.33, 1, 0.68, 1),
-        opacity 300ms ease-out,
-        padding 350ms cubic-bezier(0.33, 1, 0.68, 1);
+        max-height 450ms cubic-bezier(0.33, 1, 0.68, 1),
+        opacity 400ms ease-out,
+        transform 450ms cubic-bezier(0.33, 1, 0.68, 1),
+        padding 450ms cubic-bezier(0.33, 1, 0.68, 1);
       margin: 0;
     }
 
@@ -3915,11 +3921,14 @@ AmLyrics$1.styles = i$3 `
     .lyrics-line.pre-active .background-vocal-container {
       max-height: 4em;
       opacity: 1;
+      padding-top: 0.2em;
+      transform: translateY(0) scale(1);
       transition:
-        max-height 350ms cubic-bezier(0.22, 1, 0.36, 1),
-        opacity 300ms ease-out,
-        padding 350ms cubic-bezier(0.22, 1, 0.36, 1);
-      will-change: max-height, opacity, padding;
+        max-height 450ms cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 400ms ease-out,
+        transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
+        padding 450ms cubic-bezier(0.22, 1, 0.36, 1);
+      will-change: max-height, opacity, padding, transform;
     }
 
     /* --- Line States & Modifiers --- */
@@ -4251,49 +4260,35 @@ AmLyrics$1.styles = i$3 `
        INSTRUMENTAL GAP STYLES
        ========================================================================== */
     .lyrics-gap {
-      max-height: 0;
-      padding: 0 var(--lyplus-padding-gap);
-      overflow: hidden;
+      max-height: 1.6em;
+      padding: var(--lyplus-padding-gap);
+      overflow: visible;
       opacity: 0;
       box-sizing: content-box;
       background-clip: unset;
       transform-origin: top;
       transition:
-        padding 220ms cubic-bezier(0.33, 1, 0.68, 1),
-        max-height 220ms cubic-bezier(0.33, 1, 0.68, 1),
         opacity 160ms ease-out,
         transform var(--scroll-duration, 280ms) var(--lyrics-line-delay, 0ms);
     }
 
     .lyrics-gap.active {
-      max-height: 1.6em;
-      padding: var(--lyplus-padding-gap);
       opacity: 1;
-      overflow: visible;
       transition:
-        padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
-        max-height 220ms cubic-bezier(0.22, 1, 0.36, 1),
         opacity 160ms ease-out,
         transform var(--scroll-duration, 280ms);
-      will-change: max-height, opacity, padding;
+      will-change: opacity;
     }
 
     /* Exiting state: quickly collapse width and height so dots don't distort page, or remove max-height transition */
     .lyrics-gap.gap-exiting {
-      max-height: 0;
-      padding: 0 var(--lyplus-padding-gap);
-      opacity: 0;
-      overflow: visible;
-      transition:
-        padding var(--gap-exit-duration, 360ms) cubic-bezier(0.33, 1, 0.68, 1),
-        max-height var(--gap-exit-duration, 360ms)
-          cubic-bezier(0.33, 1, 0.68, 1),
-        opacity 160ms ease-out,
-        transform var(--scroll-duration, 280ms);
+      opacity: 1;
+      transition: transform var(--scroll-duration, 280ms);
     }
 
     .lyrics-gap .main-vocal-container {
       transform: translateY(-25%) scale(1) translateZ(0);
+      transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
     }
 
     /* Jump animation plays during exit */