@uimaxbai/am-lyrics 0.4.5 → 0.4.6

package/dist/src/AmLyrics.d.ts

@@ -36,6 +36,7 @@ export declare class AmLyrics extends LitElement {
     private updateActiveLineAndWords;
     private setupAnimations;
     private handleLineClick;
+    private static getBackgroundTextPlacement;
     private scrollToActiveLine;
     private scrollToInstrumental;
     private animateProgress;

package/dist/src/AmLyrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmLyrics.d.ts","sourceRoot":"","sources":["../../src/AmLyrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AA4B5C,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BAmJX;IAGF,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,cAAc,SAAU;IAGxB,oBAAoB,SAAa;IAGjC,gBAAgB,UAAS;IAGzB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,WAAW,SAAK;IAGhB,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,MAAM,CAAC,CAAe;IAG9B,OAAO,CAAC,iBAAiB,CAAgB;IAGzC,OAAO,CAAC,qBAAqB,CAAkC;IAG/D,OAAO,CAAC,2BAA2B,CAAkC;IAGrE,OAAO,CAAC,gBAAgB,CAAkC;IAG1D,OAAO,CAAC,sBAAsB,CAAkC;IAEhE,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAElC,OAAO,CAAC,kBAAkB,CAGZ;IAEd,OAAO,CAAC,wBAAwB,CAGlB;IAGd,OAAO,CAAC,eAAe,CAAC,CAAc;IAEtC,OAAO,CAAC,qBAAqB,CAAuB;IAEpD,iBAAiB;IAKjB,oBAAoB;YAON,WAAW;IAqDzB,YAAY;IAIZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAmDjE,OAAO,CAAC,MAAM,CAAC,WAAW;IAI1B,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,qBAAqB;IAiC7B,OAAO,CAAC,sBAAsB;IA8D9B,OAAO,CAAC,wBAAwB;IAwChC,OAAO,CAAC,eAAe;IA4CvB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,kBAAkB;IAyB1B,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,eAAe;IA4HvB,MAAM;CA+JP"}
+{"version":3,"file":"AmLyrics.d.ts","sourceRoot":"","sources":["../../src/AmLyrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AA4B5C,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BA0KX;IAGF,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,cAAc,SAAU;IAGxB,oBAAoB,SAAa;IAGjC,gBAAgB,UAAS;IAGzB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,WAAW,SAAK;IAGhB,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,MAAM,CAAC,CAAe;IAG9B,OAAO,CAAC,iBAAiB,CAAgB;IAGzC,OAAO,CAAC,qBAAqB,CAAkC;IAG/D,OAAO,CAAC,2BAA2B,CAAkC;IAGrE,OAAO,CAAC,gBAAgB,CAAkC;IAG1D,OAAO,CAAC,sBAAsB,CAAkC;IAEhE,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAElC,OAAO,CAAC,kBAAkB,CAGZ;IAEd,OAAO,CAAC,wBAAwB,CAGlB;IAGd,OAAO,CAAC,eAAe,CAAC,CAAc;IAEtC,OAAO,CAAC,qBAAqB,CAAuB;IAEpD,iBAAiB;IAKjB,oBAAoB;YAON,WAAW;IAqDzB,YAAY;IAIZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAmDjE,OAAO,CAAC,MAAM,CAAC,WAAW;IAI1B,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,qBAAqB;IAiC7B,OAAO,CAAC,sBAAsB;IA8D9B,OAAO,CAAC,wBAAwB;IAwChC,OAAO,CAAC,eAAe;IA4CvB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,MAAM,CAAC,0BAA0B;IAYzC,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,CAAC,oBAAoB;IA8B5B,OAAO,CAAC,eAAe;IA4HvB,MAAM;CAyKP"}

package/dist/src/am-lyrics.js

@@ -78,7 +78,7 @@ const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
  * SPDX-License-Identifier: BSD-3-Clause
  */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
 
-const VERSION = '0.4.5';
+const VERSION = '0.4.6';
 const INSTRUMENTAL_THRESHOLD_MS = 3000; // Show ellipsis for gaps >= 3s
 class AmLyrics extends i {
     constructor() {
@@ -376,6 +376,15 @@ class AmLyrics extends i {
         });
         this.dispatchEvent(event);
     }
+    static getBackgroundTextPlacement(line) {
+        if (!line.backgroundText || line.backgroundText.length === 0 || line.text.length === 0) {
+            return 'after'; // Default to after if no comparison is possible
+        }
+        // Compare the start times of the first syllables
+        const mainTextStartTime = line.text[0].timestamp;
+        const backgroundTextStartTime = line.backgroundText[0].timestamp;
+        return backgroundTextStartTime < mainTextStartTime ? 'before' : 'after';
+    }
     scrollToActiveLine() {
         if (!this.lyricsContainer || this.activeLineIndices.length === 0) {
             return;
@@ -387,7 +396,15 @@ class AmLyrics extends i {
             const containerHeight = this.lyricsContainer.clientHeight;
             const lineTop = activeLineElement.offsetTop;
             const lineHeight = activeLineElement.clientHeight;
-            const top = lineTop - containerHeight / 2 + lineHeight / 2;
+            // Check if the line has background text placed before the main text
+            const hasBackgroundBefore = activeLineElement.querySelector('.background-text.before');
+            // Calculate the offset to center the main text content, accounting for background text placement
+            let offsetAdjustment = 0;
+            if (hasBackgroundBefore) {
+                const backgroundElement = hasBackgroundBefore;
+                offsetAdjustment = backgroundElement.clientHeight / 2; // Adjust to focus on main content
+            }
+            const top = lineTop - containerHeight / 2 + lineHeight / 2 - offsetAdjustment;
             // Use requestAnimationFrame for smoother iOS performance
             requestAnimationFrame(() => {
                 this.lyricsContainer?.scrollTo({ top, behavior: 'smooth' });
@@ -402,7 +419,15 @@ class AmLyrics extends i {
             const containerHeight = this.lyricsContainer.clientHeight;
             const lineTop = target.offsetTop;
             const lineHeight = target.clientHeight;
-            const top = lineTop - containerHeight / 2 + lineHeight / 2;
+            // Check if the target line has background text placed before the main text
+            const hasBackgroundBefore = target.querySelector('.background-text.before');
+            // Calculate the offset to center the main text content, accounting for background text placement
+            let offsetAdjustment = 0;
+            if (hasBackgroundBefore) {
+                const backgroundElement = hasBackgroundBefore;
+                offsetAdjustment = backgroundElement.clientHeight / 2; // Adjust to focus on main content
+            }
+            const top = lineTop - containerHeight / 2 + lineHeight / 2 - offsetAdjustment;
             // Use requestAnimationFrame for smoother iOS performance
             requestAnimationFrame(() => {
                 this.lyricsContainer?.scrollTo({ top, behavior: 'smooth' });
@@ -537,6 +562,74 @@ class AmLyrics extends i {
                     ? line.backgroundText.some(syl => this.currentTime >= syl.timestamp &&
                         this.currentTime <= syl.endtime)
                     : false;
+                const backgroundPlacement = AmLyrics.getBackgroundTextPlacement(line);
+                const shouldShowBackground = line.backgroundText &&
+                    line.backgroundText.length > 0 &&
+                    (isLineActive || bgIsPlayingNow);
+                // Create background text element
+                const backgroundTextElement = shouldShowBackground
+                    ? x `<span class="background-text ${backgroundPlacement}">
+              ${line.backgroundText.map((syllable, wordIndex) => {
+                        const activeBackgroundWordIndex = this.activeBackgroundWordIndices.get(lineIndex) ?? -1;
+                        const isWordActive = isLineActive && wordIndex === activeBackgroundWordIndex;
+                        const isWordPassed = isLineActive &&
+                            (wordIndex < activeBackgroundWordIndex ||
+                                (activeBackgroundWordIndex === -1 &&
+                                    this.currentTime > syllable.endtime));
+                        let progress = 0;
+                        if (isWordActive) {
+                            progress = this.interpolate
+                                ? (this.backgroundWordProgress.get(lineIndex) ?? 0)
+                                : 1;
+                        }
+                        else if (isWordPassed) {
+                            progress = 1;
+                        }
+                        return x `<span
+                  class="progress-text"
+                  style="--line-progress: ${progress *
+                            100}%; margin-right: ${syllable.part
+                            ? '0'
+                            : '.5ch'}; --transition-style: ${isLineActive
+                            ? 'all'
+                            : 'color'}"
+                  data-text="${syllable.text}"
+                  >${syllable.text}</span
+                >`;
+                    })}
+            </span>`
+                    : '';
+                // Create main text element
+                const mainTextElement = x `<span>
+          ${line.text.map((syllable, wordIndex) => {
+                    const activeMainWordIndex = this.activeMainWordIndices.get(lineIndex) ?? -1;
+                    const isWordActive = isLineActive && wordIndex === activeMainWordIndex;
+                    const isWordPassed = isLineActive &&
+                        (wordIndex < activeMainWordIndex ||
+                            (activeMainWordIndex === -1 &&
+                                this.currentTime > syllable.endtime));
+                    let progress = 0;
+                    if (isWordActive) {
+                        progress = this.interpolate
+                            ? (this.mainWordProgress.get(lineIndex) ?? 0)
+                            : 1;
+                    }
+                    else if (isWordPassed) {
+                        progress = 1;
+                    }
+                    return x `<span
+              class="progress-text"
+              style="--line-progress: ${progress *
+                        100}%; margin-right: ${syllable.part
+                        ? '0'
+                        : '.5ch'}; --transition-style: ${isLineActive
+                        ? 'all'
+                        : 'color'}"
+              data-text="${syllable.text}${syllable.part ? ' ' : ''}"
+              >${syllable.text}</span
+            >`;
+                })}
+        </span>`;
                 let maybeInstrumentalBlock = null;
                 if (instrumental && instrumental.insertBeforeIndex === lineIndex) {
                     const remainingSeconds = Math.max(0, Math.ceil((instrumental.gapEnd - this.currentTime) / 1000));
@@ -563,70 +656,9 @@ class AmLyrics extends i {
                     }
                 }}
           >
-            <span>
-              ${line.text.map((syllable, wordIndex) => {
-                    const activeMainWordIndex = this.activeMainWordIndices.get(lineIndex) ?? -1;
-                    const isWordActive = isLineActive && wordIndex === activeMainWordIndex;
-                    const isWordPassed = isLineActive &&
-                        (wordIndex < activeMainWordIndex ||
-                            (activeMainWordIndex === -1 &&
-                                this.currentTime > syllable.endtime));
-                    let progress = 0;
-                    if (isWordActive) {
-                        progress = this.interpolate
-                            ? (this.mainWordProgress.get(lineIndex) ?? 0)
-                            : 1;
-                    }
-                    else if (isWordPassed) {
-                        progress = 1;
-                    }
-                    return x `<span
-                  class="progress-text"
-                  style="--line-progress: ${progress *
-                        100}%; margin-right: ${syllable.part
-                        ? '0'
-                        : '.5ch'}; --transition-style: ${isLineActive
-                        ? 'all'
-                        : 'color'}"
-                  data-text="${syllable.text}${syllable.part ? ' ' : ''}"
-                  >${syllable.text}</span
-                >`;
-                })}
-            </span>
-            ${line.backgroundText &&
-                    line.backgroundText.length > 0 &&
-                    (isLineActive || bgIsPlayingNow)
-                    ? x `<span class="background-text">
-                  ${line.backgroundText.map((syllable, wordIndex) => {
-                        const activeBackgroundWordIndex = this.activeBackgroundWordIndices.get(lineIndex) ?? -1;
-                        const isWordActive = isLineActive && wordIndex === activeBackgroundWordIndex;
-                        const isWordPassed = isLineActive &&
-                            (wordIndex < activeBackgroundWordIndex ||
-                                (activeBackgroundWordIndex === -1 &&
-                                    this.currentTime > syllable.endtime));
-                        let progress = 0;
-                        if (isWordActive) {
-                            progress = this.interpolate
-                                ? (this.backgroundWordProgress.get(lineIndex) ?? 0)
-                                : 1;
-                        }
-                        else if (isWordPassed) {
-                            progress = 1;
-                        }
-                        return x `<span
-                      class="progress-text"
-                      style="--line-progress: ${progress *
-                            100}%; margin-right: ${syllable.part
-                            ? '0'
-                            : '.5ch'}; --transition-style: ${isLineActive
-                            ? 'all'
-                            : 'color'}"
-                      data-text="${syllable.text}"
-                      >${syllable.text}</span
-                    >`;
-                    })}
-                </span>`
-                    : ''}
+            ${backgroundPlacement === 'before' ? backgroundTextElement : ''}
+            ${mainTextElement}
+            ${backgroundPlacement === 'after' ? backgroundTextElement : ''}
           </div>
         `;
             });
@@ -659,6 +691,8 @@ AmLyrics.styles = i$3 `
         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
         Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       background: transparent;
+      height: 100%;
+      overflow: hidden; /* Ensure the host doesn't show scrollbars */
     }
 
     .lyrics-container {
@@ -667,9 +701,11 @@ AmLyrics.styles = i$3 `
       background-color: transparent;
       width: 100%;
       height: 100%;
+      max-height: 100vh; /* Ensure it doesn't exceed viewport height */
       overflow-y: auto;
       scroll-behavior: smooth;
       -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
+      box-sizing: border-box; /* Include padding in height calculation */
     }
 
     .lyrics-line {
@@ -684,6 +720,12 @@ AmLyrics.styles = i$3 `
       color: #888; /* Default text color to gray */
       word-wrap: break-word;
       overflow-wrap: break-word;
+      display: flex;
+      flex-direction: column; /* Allow reordering of main and background text */
+    }
+
+    .lyrics-line > span {
+      flex-shrink: 0; /* Prevent the main text span from shrinking */
     }
 
     .lyrics-line:hover {
@@ -705,6 +747,7 @@ AmLyrics.styles = i$3 `
     .progress-text {
       position: relative;
       display: inline-block;
+      overflow: hidden; /* Hide any overflow from the pseudo-element */
     }
 
     .progress-text::before {
@@ -718,6 +761,7 @@ AmLyrics.styles = i$3 `
         var(--highlight-color, #000)
       ); /* CSS variable takes precedence */
       overflow: hidden;
+      white-space: nowrap; /* Prevent text wrapping in the pseudo-element */
       /* Spring animation */
       /* transition: width 0.05s ; */
       word-wrap: break-word;
@@ -741,7 +785,18 @@ AmLyrics.styles = i$3 `
       color: rgba(136, 136, 136, 0.8);
       font-size: 0.8em; /* a bit smaller than main line */
       font-style: normal; /* no italics */
-      margin: 4px 0 0 0; /* place just below the main line */
+      margin: 4px 0; /* default margin for positioning */
+      flex-shrink: 0; /* Prevent shrinking */
+    }
+
+    .background-text.before {
+      order: -1; /* Place before main text when background starts earlier */
+      margin: 0 0 4px 0; /* place above the main line */
+    }
+
+    .background-text.after {
+      order: 1; /* Place after main text when background starts later */
+      margin: 4px 0 0 0; /* place below the main line */
     }
     .progress-text:last-child {
       margin-right: 0 !important; /* Remove margin for the last word */