@uimaxbai/am-lyrics 1.5.3 → 1.5.4

package/dist/src/react.js

@@ -322,7 +322,7 @@ class GoogleService {
     }
 }
 
-const VERSION = '1.5.3';
+const VERSION = '1.5.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;
@@ -2422,7 +2422,9 @@ let AmLyrics$1 = class AmLyrics extends i {
                     lineIsRTL = true;
                 const hasHyphen = combinedText.includes('-');
                 const wordLen = combinedText.length;
-                let isGrowableVW = !isCJK && !isRTL && !hasHyphen && wordLen > 0 && wordLen <= 7;
+                const canAnimateByChar = !isCJK && !isRTL && !hasHyphen && wordLen > 0;
+                const isLineSynced = line.isWordSynced === false || line.text.some(s => s.lineSynced);
+                let isGrowableVW = canAnimateByChar && wordLen > 0 && wordLen <= 7;
                 if (isGrowableVW) {
                     if (wordLen < 3) {
                         isGrowableVW =
@@ -2433,9 +2435,14 @@ let AmLyrics$1 = class AmLyrics extends i {
                             combinedDuration >= 850 && combinedDuration >= wordLen * 190;
                     }
                 }
-                const isLineSynced = line.isWordSynced === false || line.text.some(s => s.lineSynced);
+                const hasCharRiseDuration = combinedDuration >= Math.max(700, wordLen * 85);
+                const hasLongShortWordDuration = wordLen >= 4 && combinedDuration >= Math.max(1300, wordLen * 260);
+                const isCharRiseVW = canAnimateByChar &&
+                    !isLineSynced &&
+                    !isGrowableVW &&
+                    ((wordLen >= 8 && hasCharRiseDuration) ||
+                        (wordLen < 8 && hasLongShortWordDuration));
                 const isGlowingVW = isGrowableVW && !isLineSynced;
-                const isCharRiseVW = !isGrowableVW && !isLineSynced && !isCJK && !isRTL && wordLen >= 8;
                 let charOff = 0;
                 for (let gi = vwStart; gi <= vwEnd; gi += 1) {
                     groupGrowable[gi] = isGrowableVW;
@@ -3340,12 +3347,24 @@ let AmLyrics$1 = class AmLyrics extends i {
         const isRTL = classList.contains('rtl-text');
         const charSpans = Array.from(syllable.querySelectorAll('span.char'));
         const wordElement = syllable.parentElement?.parentElement; // syllable-wrap -> word
-        const allWordCharSpans = wordElement
-            ? Array.from(wordElement.querySelectorAll('span.char'))
-            : [];
+        const virtualWordId = wordElement?.dataset
+            .virtualWordId;
+        let wordElements = [];
+        if (virtualWordId && wordElement?.parentElement) {
+            wordElements = Array.from(wordElement.parentElement.querySelectorAll('.lyrics-word')).filter(el => el.dataset.virtualWordId === virtualWordId);
+        }
+        else if (wordElement) {
+            wordElements = [wordElement];
+        }
+        const allWordCharSpans = wordElements.flatMap(word => Array.from(word.querySelectorAll('span.char')));
         const isGrowable = wordElement?.classList.contains('growable');
         const isCharRise = wordElement?.classList.contains('char-rise');
         const isFirstSyllable = syllable.getAttribute('data-syllable-index') === '0';
+        const syllableStartMs = parseFloat(syllable.getAttribute('data-start-time') || '0');
+        const virtualWordStartMs = parseFloat(wordElement?.dataset.virtualWordStart || '');
+        const isFirstInVirtualWord = isFirstSyllable &&
+            (!Number.isFinite(virtualWordStartMs) ||
+                Math.abs(syllableStartMs - virtualWordStartMs) < 0.5);
         const isFirstInContainer = isFirstSyllable; // Simplified
         const isGap = syllable.closest('.lyrics-gap') !== null;
         // Get duration from data attribute
@@ -3357,7 +3376,7 @@ let AmLyrics$1 = class AmLyrics extends i {
         const charAnimationsMap = new Map();
         const styleUpdates = [];
         // Step 1: Grow Pass
-        if (isGrowable && isFirstSyllable && allWordCharSpans.length > 0) {
+        if (isGrowable && isFirstInVirtualWord && allWordCharSpans.length > 0) {
             const finalDuration = wordDurationMs;
             const baseDelayPerChar = finalDuration * 0.09;
             const growDurationMs = finalDuration * 1.5;
@@ -3391,7 +3410,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                 });
             });
         }
-        if (isCharRise && isFirstSyllable && allWordCharSpans.length > 0) {
+        if (isCharRise && isFirstInVirtualWord && allWordCharSpans.length > 0) {
             const finalDuration = Math.max(wordDurationMs, syllableDurationMs);
             const baseDelayPerChar = finalDuration * 0.09;
             const riseDurationMs = finalDuration * 1.5;
@@ -3423,14 +3442,15 @@ let AmLyrics$1 = class AmLyrics extends i {
                         existingAnimation.includes('rise-char'))) {
                     animationParts.push(existingAnimation.split(',')[0].trim());
                 }
-                if (charIndex > 0) {
+                if (charIndex > 0 && wipeDelay > 0 && wipeDuration > 0) {
                     const arrivalTime = (span.dataset.preWipeArrival
                         ? parseFloat(span.dataset.preWipeArrival)
                         : syllableDurationMs * startPct) - elapsedTimeMs;
-                    const constantDuration = parseFloat(span.dataset.preWipeDuration || '100');
-                    const animDelay = arrivalTime - constantDuration;
-                    if (constantDuration > 0) {
-                        animationParts.push(`pre-wipe-char ${constantDuration}ms linear ${animDelay}ms forwards`);
+                    const measuredPreWipeDuration = parseFloat(span.dataset.preWipeDuration || '100');
+                    const preWipeDuration = Math.min(measuredPreWipeDuration, wipeDuration * 0.9, syllableDurationMs * 0.08, arrivalTime);
+                    const animDelay = arrivalTime - preWipeDuration;
+                    if (preWipeDuration >= 16) {
+                        animationParts.push(`pre-wipe-char ${preWipeDuration}ms linear ${animDelay}ms none`);
                     }
                 }
                 if (wipeDuration > 0) {
@@ -4008,6 +4028,8 @@ let AmLyrics$1 = class AmLyrics extends i {
                 const vwFullText = lineData?.vwFullText ?? [];
                 const vwFullDuration = lineData?.vwFullDuration ?? [];
                 const vwCharOffset = lineData?.vwCharOffset ?? [];
+                const vwStartMs = lineData?.vwStartMs ?? [];
+                const vwEndMs = lineData?.vwEndMs ?? [];
                 const lineIsRTL = lineData?.lineIsRTL ?? false;
                 // Create main vocals using YouLyPlus syllable structure
                 const mainVocalElement = b `<p
@@ -4027,6 +4049,13 @@ let AmLyrics$1 = class AmLyrics extends i {
                     const groupCharOffset = isAnimatedByChar
                         ? vwCharOffset[groupIdx]
                         : 0;
+                    const virtualWordId = isAnimatedByChar
+                        ? `${lineIndex}:${vwStartMs[groupIdx]}:${vwEndMs[groupIdx]}`
+                        : '';
+                    const virtualWordStart = isAnimatedByChar
+                        ? vwStartMs[groupIdx]
+                        : '';
+                    const virtualWordEnd = isAnimatedByChar ? vwEndMs[groupIdx] : '';
                     let sylCharAccumulator = 0;
                     const groupText = group.map(s => s.text).join('');
                     const shouldAllowBreak = groupText.trim().length >= 16 ||
@@ -4043,6 +4072,9 @@ let AmLyrics$1 = class AmLyrics extends i {
                         : ''}${isGlowing ? ' glowing' : ''}${shouldAllowBreak
                         ? ' allow-break'
                         : ''}"
+              data-virtual-word-id="${virtualWordId}"
+              data-virtual-word-start="${virtualWordStart}"
+              data-virtual-word-end="${virtualWordEnd}"
               style="--rise-duration: ${riseDuration}s"
               >${group.map((syllable, sylIdx) => {
                         const startTimeMs = syllable.timestamp;
@@ -4601,17 +4633,15 @@ AmLyrics$1.styles = i$3 `
 
     .background-vocal-container {
       max-height: 0;
-      overflow: visible;
+      overflow: hidden;
       opacity: 0;
       font-size: var(--lyplus-font-size-subtext);
       line-height: 1.15;
       color: color-mix(in srgb, var(--lyplus-text-secondary) 80%, transparent);
-      /* Fast exit (0.25 s) so bg vocals collapse quickly and feel snappy.
-         The scroll takes ~0.4 s; finishing the collapse first prevents
-         the container from trailing behind the motion. */
       transition:
-        max-height 250ms cubic-bezier(0.41, 0, 0.12, 0.99),
-        opacity 250ms cubic-bezier(0.41, 0, 0.12, 0.99);
+        max-height var(--scroll-duration, 400ms)
+          cubic-bezier(0.41, 0, 0.12, 0.99),
+        opacity var(--scroll-duration, 400ms) cubic-bezier(0.41, 0, 0.12, 0.99);
       margin: 0;
       pointer-events: none;
     }
@@ -4620,7 +4650,8 @@ AmLyrics$1.styles = i$3 `
       display: block;
       padding-top: 0;
       padding-bottom: 0;
-      transition: padding-top 250ms cubic-bezier(0.41, 0, 0.12, 0.99);
+      transition: padding-top var(--scroll-duration, 400ms)
+        cubic-bezier(0.41, 0, 0.12, 0.99);
     }
 
     .lyrics-line.singer-right .background-vocal-container,
@@ -4635,16 +4666,11 @@ AmLyrics$1.styles = i$3 `
     .lyrics-line.bg-expanded .background-vocal-container {
       max-height: 4em;
       opacity: 1;
-      /* Slower entry (0.6 s) so bg vocals expand smoothly. */
-      transition:
-        max-height 0.6s ease,
-        opacity 0.6s ease;
       will-change: max-height, opacity;
     }
 
     .lyrics-line.bg-expanded .background-vocal-wrap {
       padding-top: 0.26em;
-      transition: padding-top 0.6s ease;
     }
 
     /* --- Line States & Modifiers --- */