@uimaxbai/am-lyrics 0.6.6 → 1.0.1

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.
Files changed (11) hide show
  1. package/README.md +3 -1
  2. package/demo/index.html +8 -25
  3. package/dist/src/AmLyrics.d.ts +67 -1
  4. package/dist/src/AmLyrics.d.ts.map +1 -1
  5. package/dist/src/am-lyrics.js +1993 -408
  6. package/dist/src/am-lyrics.js.map +1 -1
  7. package/dist/src/react.js +1993 -408
  8. package/dist/src/react.js.map +1 -1
  9. package/dist/tsconfig.tsbuildinfo +1 -1
  10. package/package.json +1 -1
  11. package/src/AmLyrics.ts +2271 -464
package/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # \<am-lyrics>
2
2
 
3
+ [![](https://data.jsdelivr.com/v1/package/npm/@uimaxbai/am-lyrics/badge)](https://www.jsdelivr.com/package/npm/@uimaxbai/am-lyrics)
4
+
3
5
  This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
4
6
 
5
7
  ## Installation
@@ -14,7 +16,7 @@ Or, just use the CDN.
14
16
 
15
17
  ```html
16
18
  <script type="module">
17
- import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@latest/dist/src/am-lyrics.min.js';
19
+ import 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics/dist/src/am-lyrics.min.js';
18
20
  </script>
19
21
 
20
22
  <am-lyrics
package/demo/index.html CHANGED
@@ -17,10 +17,12 @@
17
17
 
18
18
  <style>
19
19
  body {
20
- background: #fafafa; /* Any background works out of the box */
20
+ background: #333;
21
+ /* Any background works out of the box */
21
22
  }
22
23
  </style>
23
24
  </head>
25
+
24
26
  <body>
25
27
  <div>
26
28
  <input id="title-input" type="text" placeholder="Song title" />
@@ -35,38 +37,19 @@
35
37
  </div>
36
38
 
37
39
  <am-lyrics
38
- song-title="小苹果"
39
- song-artist="筷子兄弟"
40
+ song-title="Paradise"
41
+ song-artist="Coldplay"
40
42
  song-album=""
41
- song-duration="213000"
43
+ song-duration=""
42
44
  query=""
43
45
  music-id=""
44
46
  isrc=""
45
- highlight-color="#f00"
46
- hover-background-color="#e0e0e0"
47
+ highlight-color="#93c5fd"
48
+ hover-background-color="#aaa"
47
49
  font-family="'Inter', Arial, sans-serif"
48
50
  autoscroll
49
51
  interpolate="false"
50
52
  ></am-lyrics>
51
- <!--
52
- <am-lyrics
53
- song-title="Uptown Funk" // Preferred: provide title for LyricsPlus API
54
- song-artist="Mark Ronson" // Preferred: provide artist for LyricsPlus API
55
- song-album="Uptown Special" // Optional album metadata sent to LyricsPlus
56
- song-duration="269000" // Optional song duration (ms) sent to LyricsPlus
57
- query="Uptown Funk Mark Ronson" // Fallback search string for Apple Music backup API
58
- music-id="" // Use this if you have a specific song ID from Apple Music (almost never)
59
- isrc="" // To be used WITH a query, just to double check if it is correct
60
- duration="" // Playback timer duration (component sync). See JS below
61
- highlight-color="#000" // Color of the highlighted words
62
- hover-background-color="#f0f0f0" // Color of the line when you hover over it
63
- hide-source-footer="false" // Controls whether the footer at the bottom is a larger one or a more compact GitHub link.
64
- font-family="'Inter', sans-serif" // BYOF
65
- autoscroll // Self-explanatory
66
- interpolate // Whether to animate the progress of the words
67
- @line-click=${handleLineClick} // Event listener for line clicks to skip to that part of the song.
68
- ></am-lyrics>
69
- -->
70
53
 
71
54
  <button id="start-button">Start</button>
72
55
  <button id="reset-button">Reset</button>
package/dist/src/AmLyrics.d.ts CHANGED
@@ -21,7 +21,9 @@ export declare class AmLyrics extends LitElement {
21
21
  private toggleTranslation;
22
22
  private applyTranslation;
23
23
  duration?: number;
24
- currentTime: number;
24
+ private _currentTime;
25
+ set currentTime(value: number);
26
+ get currentTime(): number;
25
27
  private isLoading;
26
28
  private lyrics?;
27
29
  private activeLineIndices;
@@ -38,6 +40,19 @@ export declare class AmLyrics extends LitElement {
38
40
  private userScrollTimeoutId?;
39
41
  private isUserScrolling;
40
42
  private isProgrammaticScroll;
43
+ private isClickSeeking;
44
+ private clickSeekTimeout?;
45
+ private cachedLyricsLines;
46
+ private activeLineIds;
47
+ private currentPrimaryActiveLine;
48
+ private lastPrimaryActiveLine;
49
+ private scrollAnimationState;
50
+ private currentScrollOffset;
51
+ private animatingLines;
52
+ private scrollUnlockTimeout?;
53
+ private scrollAnimationTimeout?;
54
+ private lastActiveIndex;
55
+ private visibleLineIds;
41
56
  connectedCallback(): void;
42
57
  disconnectedCallback(): void;
43
58
  private fetchLyrics;
@@ -50,11 +65,27 @@ export declare class AmLyrics extends LitElement {
50
65
  private static convertKPoeLyrics;
51
66
  private static toMilliseconds;
52
67
  firstUpdated(): void;
68
+ /**
69
+ * Handle currentTime changes imperatively, bypassing Lit's render cycle.
70
+ * This prevents the template from re-rendering on every frame, which would
71
+ * reset imperative animation classes (highlight, finished, etc.) set by
72
+ * updateSyllablesForLine.
73
+ */
74
+ private _onTimeChanged;
53
75
  updated(changedProperties: Map<string | number | symbol, unknown>): void;
76
+ private _textWidthCanvas;
77
+ private _textWidthCtx;
78
+ private _getTextWidth;
79
+ private _updateCharTimingData;
54
80
  private static arraysEqual;
55
81
  private handleUserScroll;
56
82
  private findActiveLineIndices;
57
83
  private findInstrumentalGapAt;
84
+ /**
85
+ * Find ALL instrumental gaps in the song, regardless of current time.
86
+ * Used by the template to always render gap elements in the DOM.
87
+ */
88
+ private findAllInstrumentalGaps;
58
89
  private startAnimationFromTime;
59
90
  private updateActiveLineAndWords;
60
91
  private setupAnimations;
@@ -62,6 +93,41 @@ export declare class AmLyrics extends LitElement {
62
93
  private static getBackgroundTextPlacement;
63
94
  private scrollToActiveLine;
64
95
  private scrollToInstrumental;
96
+ /**
97
+ * Get the scroll padding top value from CSS variable
98
+ */
99
+ private getScrollPaddingTop;
100
+ /**
101
+ * Animate scroll with staggered delay for smooth YouLyPlus-style scrolling
102
+ * (Exact copy from YouLyPlus _animateScroll)
103
+ */
104
+ private animateScrollYouLy;
105
+ /**
106
+ * Update position classes for YouLyPlus-style opacity/blur gradients
107
+ */
108
+ private updatePositionClasses;
109
+ /**
110
+ * Scroll to active line with YouLyPlus-style animation
111
+ */
112
+ private scrollToActiveLineYouLy;
113
+ /**
114
+ * Update syllable highlight animation - apply CSS wipe animation
115
+ * (Exact copy from YouLyPlus _updateSyllableAnimation)
116
+ */
117
+ private static updateSyllableAnimation;
118
+ /**
119
+ * Reset syllable animation state
120
+ */
121
+ private static resetSyllable;
122
+ /**
123
+ * Reset all syllables in a line
124
+ */
125
+ private static resetSyllables;
126
+ /**
127
+ * Update syllables based on current time
128
+ * Uses DOM caching and pre-highlight reset for smooth transitions
129
+ */
130
+ private static updateSyllablesForLine;
65
131
  private animateProgress;
66
132
  private generateLRC;
67
133
  private generateTTML;
package/dist/src/AmLyrics.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AmLyrics.d.ts","sourceRoot":"","sources":["../../src/AmLyrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AA4E5C,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BAsUX;IAGF,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,OAAO,CAAC,cAAc,CAAmC;IAGzD,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,cAAc,SAAU;IAGxB,oBAAoB,SAAa;IAGjC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,gBAAgB,CAAS;IAGjC,OAAO,CAAC,eAAe,CAAS;YAElB,kBAAkB;YAKlB,iBAAiB;YAsBjB,iBAAiB;YAKjB,gBAAgB;IAyC9B,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;IAGhE,OAAO,CAAC,YAAY,CAAuB;IAE3C,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,OAAO,CAAC,mBAAmB,CAAC,CAAS;IAGrC,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,oBAAoB,CAAS;IAErC,iBAAiB;IAKjB,oBAAoB;YAUN,WAAW;YAiCX,cAAc;YAoBd,iBAAiB;YASjB,mBAAmB;IAiGjC,OAAO,CAAC,MAAM,CAAC,kBAAkB;mBAkCZ,uBAAuB;mBA6CvB,wBAAwB;IAsE7C,OAAO,CAAC,MAAM,CAAC,iBAAiB;IAqJhC,OAAO,CAAC,MAAM,CAAC,cAAc;IAa7B,YAAY;IAWZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAwFjE,OAAO,CAAC,MAAM,CAAC,WAAW;IAI1B,OAAO,CAAC,gBAAgB;IA0BxB,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;IAkBzC,OAAO,CAAC,kBAAkB;IA2C1B,OAAO,CAAC,oBAAoB;IAsC5B,OAAO,CAAC,eAAe;IA4HvB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,YAAY;IA2DpB,OAAO,CAAC,MAAM,CAAC,kBAAkB;IAUjC,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAYlC,OAAO,CAAC,cAAc;IAuCtB,MAAM;CAgWP"}
1
+ {"version":3,"file":"AmLyrics.d.ts","sourceRoot":"","sources":["../../src/AmLyrics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AA4E5C,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BA4lCX;IAGF,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,OAAO,CAAC,cAAc,CAAmC;IAGzD,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,cAAc,SAAa;IAG3B,oBAAoB,SAA+B;IAGnD,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,gBAAgB,CAAS;IAGjC,OAAO,CAAC,eAAe,CAAS;YAElB,kBAAkB;YAKlB,iBAAiB;YAsBjB,iBAAiB;YAKjB,gBAAgB;IAyC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,OAAO,CAAC,YAAY,CAAK;IAEzB,IACI,WAAW,CAAC,KAAK,EAAE,MAAM,EAM5B;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAGD,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;IAGhE,OAAO,CAAC,YAAY,CAAuB;IAE3C,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,OAAO,CAAC,mBAAmB,CAAC,CAAS;IAGrC,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,oBAAoB,CAAS;IAErC,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,gBAAgB,CAAC,CAAgC;IAGzD,OAAO,CAAC,iBAAiB,CAAqB;IAG9C,OAAO,CAAC,aAAa,CAA0B;IAE/C,OAAO,CAAC,wBAAwB,CAA4B;IAE5D,OAAO,CAAC,qBAAqB,CAA4B;IAGzD,OAAO,CAAC,oBAAoB,CAGZ;IAEhB,OAAO,CAAC,mBAAmB,CAAK;IAEhC,OAAO,CAAC,cAAc,CAAqB;IAE3C,OAAO,CAAC,mBAAmB,CAAC,CAAgC;IAE5D,OAAO,CAAC,sBAAsB,CAAC,CAAgC;IAG/D,OAAO,CAAC,eAAe,CAAK;IAE5B,OAAO,CAAC,cAAc,CAA0B;IAEhD,iBAAiB;IAKjB,oBAAoB;YAUN,WAAW;YAiCX,cAAc;YAoBd,iBAAiB;YASjB,mBAAmB;IAiGjC,OAAO,CAAC,MAAM,CAAC,kBAAkB;mBAkCZ,uBAAuB;mBA6CvB,wBAAwB;IAsE7C,OAAO,CAAC,MAAM,CAAC,iBAAiB;IAqJhC,OAAO,CAAC,MAAM,CAAC,cAAc;IAa7B,YAAY;IAkBZ;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IA2ItB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAwFjE,OAAO,CAAC,gBAAgB,CAAgC;IAExD,OAAO,CAAC,aAAa,CAA8C;IAEnE,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,qBAAqB;IAsE7B,OAAO,CAAC,MAAM,CAAC,WAAW;IAI1B,OAAO,CAAC,gBAAgB;IA2BxB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,qBAAqB;IAiC7B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAgC/B,OAAO,CAAC,sBAAsB;IAgE9B,OAAO,CAAC,wBAAwB;IA0ChC,OAAO,CAAC,eAAe;IA4CvB,OAAO,CAAC,eAAe;IA0EvB,OAAO,CAAC,MAAM,CAAC,0BAA0B;IAkBzC,OAAO,CAAC,kBAAkB;IA2C1B,OAAO,CAAC,oBAAoB;IAyB5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAa3B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IA+I1B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IA+C7B;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAiD/B;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,uBAAuB;IAyJtC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,aAAa;IAwC5B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,cAAc;IAS7B;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,sBAAsB;IAuErC,OAAO,CAAC,eAAe;IA4HvB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,YAAY;IA2DpB,OAAO,CAAC,MAAM,CAAC,kBAAkB;IAUjC,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAYlC,OAAO,CAAC,cAAc;IAuCtB,MAAM;CAwbP"}