@uimaxbai/am-lyrics 0.4.3 → 0.4.5

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,0BAwIX;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;IAqB1B,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,eAAe;IA4HvB,MAAM;CA2JP"}
+{"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"}

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.3';
+const VERSION = '0.4.5';
 const INSTRUMENTAL_THRESHOLD_MS = 3000; // Show ellipsis for gaps >= 3s
 class AmLyrics extends i {
     constructor() {
@@ -388,7 +388,10 @@ class AmLyrics extends i {
             const lineTop = activeLineElement.offsetTop;
             const lineHeight = activeLineElement.clientHeight;
             const top = lineTop - containerHeight / 2 + lineHeight / 2;
-            this.lyricsContainer.scrollTo({ top, behavior: 'smooth' });
+            // Use requestAnimationFrame for smoother iOS performance
+            requestAnimationFrame(() => {
+                this.lyricsContainer?.scrollTo({ top, behavior: 'smooth' });
+            });
         }
     }
     scrollToInstrumental(insertBeforeIndex) {
@@ -400,7 +403,10 @@ class AmLyrics extends i {
             const lineTop = target.offsetTop;
             const lineHeight = target.clientHeight;
             const top = lineTop - containerHeight / 2 + lineHeight / 2;
-            this.lyricsContainer.scrollTo({ top, behavior: 'smooth' });
+            // Use requestAnimationFrame for smoother iOS performance
+            requestAnimationFrame(() => {
+                this.lyricsContainer?.scrollTo({ top, behavior: 'smooth' });
+            });
         }
     }
     animateProgress() {
@@ -513,7 +519,10 @@ class AmLyrics extends i {
         if (this.fontFamily) {
             this.style.fontFamily = this.fontFamily;
         }
+        // Set both old internal CSS variables (for backward compatibility)
+        // and new public CSS variables (which take precedence)
         this.style.setProperty('--hover-background-color', this.hoverBackgroundColor);
+        this.style.setProperty('--highlight-color', this.highlightColor);
         const renderContent = () => {
             if (this.isLoading) {
                 return x `<div class="loading-indicator">Loading...</div>`;
@@ -578,7 +587,7 @@ class AmLyrics extends i {
                         ? '0'
                         : '.5ch'}; --transition-style: ${isLineActive
                         ? 'all'
-                        : 'color'}; --highlight-color: ${this.highlightColor}"
+                        : 'color'}"
                   data-text="${syllable.text}${syllable.part ? ' ' : ''}"
                   >${syllable.text}</span
                 >`;
@@ -611,7 +620,7 @@ class AmLyrics extends i {
                             ? '0'
                             : '.5ch'}; --transition-style: ${isLineActive
                             ? 'all'
-                            : 'color'}; --highlight-color: ${this.highlightColor}"
+                            : 'color'}"
                       data-text="${syllable.text}"
                       >${syllable.text}</span
                     >`;
@@ -656,9 +665,11 @@ AmLyrics.styles = i$3 `
       padding: 20px;
       border-radius: 8px;
       background-color: transparent;
-      height: 300px; /* Example height */
+      width: 100%;
+      height: 100%;
       overflow-y: auto;
       scroll-behavior: smooth;
+      -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
     }
 
     .lyrics-line {
@@ -671,10 +682,15 @@ AmLyrics.styles = i$3 `
       position: relative;
       font-size: 2em; /* Increased font size */
       color: #888; /* Default text color to gray */
+      word-wrap: break-word;
+      overflow-wrap: break-word;
     }
 
     .lyrics-line:hover {
-      background-color: var(--hover-background-color, #f0f0f0);
+      background-color: var(
+        --am-lyrics-hover-background,
+        var(--hover-background-color, #f0f0f0)
+      );
     }
 
     .opposite-turn {
@@ -697,11 +713,15 @@ AmLyrics.styles = i$3 `
       top: 0;
       left: 0;
       width: var(--line-progress, 0%);
-      color: var(--highlight-color, #000); /* Highlight color to black */
+      color: var(
+        --am-lyrics-highlight-color,
+        var(--highlight-color, #000)
+      ); /* CSS variable takes precedence */
       overflow: hidden;
       /* Spring animation */
       /* transition: width 0.05s ; */
-      white-space: nowrap;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
       transition: var(--transition-style, all) 0.05s
         cubic-bezier(0.25, 0.1, 0.25, 1.5);
     }