@applemusic-like-lyrics/core 0.0.13 → 0.0.15
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.
- package/README.md +9 -0
- package/dist/amll-core.js +1 -1
- package/dist/amll-core.js.map +1 -1
- package/dist/amll-core.mjs +224 -287
- package/dist/amll-core.mjs.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/interfaces.d.ts +9 -7
- package/dist/lyric-player/index.d.ts +4 -0
- package/dist/lyric-player/lyric-line.d.ts +3 -2
- package/package.json +1 -4
package/dist/amll-core.mjs
CHANGED
|
@@ -1,124 +1,16 @@
|
|
|
1
|
-
import { Container as
|
|
2
|
-
import { Application as
|
|
1
|
+
import { Container as C } from "@pixi/display";
|
|
2
|
+
import { Application as z } from "@pixi/app";
|
|
3
3
|
import { BlurFilter as y } from "@pixi/filter-blur";
|
|
4
|
-
import { ColorMatrixFilter as
|
|
5
|
-
import { Texture as
|
|
4
|
+
import { ColorMatrixFilter as P } from "@pixi/filter-color-matrix";
|
|
5
|
+
import { Texture as D } from "@pixi/core";
|
|
6
6
|
import { Sprite as S } from "@pixi/sprite";
|
|
7
|
-
import { BulgePinchFilter as
|
|
8
|
-
import { create as
|
|
7
|
+
import { BulgePinchFilter as b } from "@pixi/filter-bulge-pinch";
|
|
8
|
+
import { create as I } from "jss";
|
|
9
9
|
import k from "jss-preset-default";
|
|
10
|
-
|
|
11
|
-
function T(h) {
|
|
12
|
-
const e = B.exec(h);
|
|
13
|
-
if (e) {
|
|
14
|
-
const t = Number(e.groups?.hour || "0"), i = Number(e.groups?.min || "0"), s = Number(e.groups?.sec.replace(/:/, ".") || "0");
|
|
15
|
-
return Math.floor((t * 3600 + i * 60 + s) * 1e3);
|
|
16
|
-
} else
|
|
17
|
-
throw new TypeError("时间戳字符串解析失败");
|
|
18
|
-
}
|
|
19
|
-
function $(h) {
|
|
20
|
-
const t = new DOMParser().parseFromString(
|
|
21
|
-
h,
|
|
22
|
-
"application/xml"
|
|
23
|
-
);
|
|
24
|
-
let i = "v1";
|
|
25
|
-
for (const r of t.querySelectorAll("ttm\\:agent"))
|
|
26
|
-
if (r.getAttribute("type") === "person") {
|
|
27
|
-
const n = r.getAttribute("xml:id");
|
|
28
|
-
n && (i = n);
|
|
29
|
-
}
|
|
30
|
-
const s = [];
|
|
31
|
-
for (const r of t.querySelectorAll("body p[begin][end]")) {
|
|
32
|
-
const n = {
|
|
33
|
-
words: [],
|
|
34
|
-
startTime: T(r.getAttribute("begin") ?? "0:0"),
|
|
35
|
-
endTime: T(r.getAttribute("end") ?? "0:0"),
|
|
36
|
-
translatedLyric: "",
|
|
37
|
-
romanLyric: "",
|
|
38
|
-
isBG: !1,
|
|
39
|
-
isDuet: r.getAttribute("ttm:agent") !== i
|
|
40
|
-
};
|
|
41
|
-
let a = null;
|
|
42
|
-
for (const l of r.childNodes)
|
|
43
|
-
if (l.nodeType === Node.TEXT_NODE) {
|
|
44
|
-
const o = l.textContent ?? "";
|
|
45
|
-
/^(\s+)$/.test(o) ? n.words.push({
|
|
46
|
-
word: " ",
|
|
47
|
-
startTime: 0,
|
|
48
|
-
endTime: 0
|
|
49
|
-
}) : n.words.push({
|
|
50
|
-
word: o,
|
|
51
|
-
startTime: 0,
|
|
52
|
-
endTime: 0
|
|
53
|
-
});
|
|
54
|
-
} else if (l.nodeType === Node.ELEMENT_NODE) {
|
|
55
|
-
const o = l, c = o.getAttribute("ttm:role");
|
|
56
|
-
if (o.nodeName === "span" && c)
|
|
57
|
-
if (c === "x-bg") {
|
|
58
|
-
const m = {
|
|
59
|
-
words: [],
|
|
60
|
-
startTime: n.startTime,
|
|
61
|
-
endTime: n.endTime,
|
|
62
|
-
translatedLyric: "",
|
|
63
|
-
romanLyric: "",
|
|
64
|
-
isBG: !0,
|
|
65
|
-
isDuet: n.isDuet
|
|
66
|
-
};
|
|
67
|
-
for (const p of o.childNodes)
|
|
68
|
-
if (p.nodeType === Node.TEXT_NODE) {
|
|
69
|
-
const d = p.textContent ?? "";
|
|
70
|
-
/^(\s+)$/.test(d) ? m.words.push({
|
|
71
|
-
word: " ",
|
|
72
|
-
startTime: 0,
|
|
73
|
-
endTime: 0
|
|
74
|
-
}) : m.words.push({
|
|
75
|
-
word: d,
|
|
76
|
-
startTime: 0,
|
|
77
|
-
endTime: 0
|
|
78
|
-
});
|
|
79
|
-
} else if (p.nodeType === Node.ELEMENT_NODE) {
|
|
80
|
-
const d = p, g = d.getAttribute("ttm:role");
|
|
81
|
-
if (d.nodeName === "span" && g)
|
|
82
|
-
g === "x-translation" ? m.translatedLyric = d.innerHTML.trim() : g === "x-roman" && (m.romanLyric = d.innerHTML.trim());
|
|
83
|
-
else if (d.hasAttribute("begin") && d.hasAttribute("end")) {
|
|
84
|
-
const b = {
|
|
85
|
-
word: p.textContent,
|
|
86
|
-
startTime: T(d.getAttribute("begin")),
|
|
87
|
-
endTime: T(d.getAttribute("end"))
|
|
88
|
-
};
|
|
89
|
-
m.words.push(b);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
const u = m.words[0];
|
|
93
|
-
m.startTime = u.startTime, u?.word.startsWith("(") && (u.word = u.word.substring(1));
|
|
94
|
-
const f = m.words[m.words.length - 1];
|
|
95
|
-
m.endTime = f.endTime, f?.word.endsWith(")") && (f.word = f.word.substring(
|
|
96
|
-
0,
|
|
97
|
-
f.word.length - 1
|
|
98
|
-
)), a = m;
|
|
99
|
-
} else
|
|
100
|
-
c === "x-translation" ? n.translatedLyric = o.innerHTML : c === "x-roman" && (n.romanLyric = o.innerHTML);
|
|
101
|
-
else if (o.hasAttribute("begin") && o.hasAttribute("end")) {
|
|
102
|
-
const m = {
|
|
103
|
-
word: l.textContent ?? "",
|
|
104
|
-
startTime: T(o.getAttribute("begin")),
|
|
105
|
-
endTime: T(o.getAttribute("end"))
|
|
106
|
-
};
|
|
107
|
-
n.words.push(m);
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
s.push(n), a && s.push(a);
|
|
111
|
-
}
|
|
112
|
-
return s;
|
|
113
|
-
}
|
|
114
|
-
const ae = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
115
|
-
__proto__: null,
|
|
116
|
-
parseTTML: $
|
|
117
|
-
}, Symbol.toStringTag, { value: "Module" }));
|
|
118
|
-
class O extends z {
|
|
10
|
+
class B extends C {
|
|
119
11
|
time = 0;
|
|
120
12
|
}
|
|
121
|
-
class
|
|
13
|
+
class A {
|
|
122
14
|
constructor(e) {
|
|
123
15
|
this.canvas = e;
|
|
124
16
|
const t = e.getBoundingClientRect();
|
|
@@ -128,12 +20,12 @@ class W {
|
|
|
128
20
|
this.canvas.width * this.currerntRenderScale,
|
|
129
21
|
this.canvas.height * this.currerntRenderScale
|
|
130
22
|
), this.app.ticker.start(), this.rebuildFilters();
|
|
131
|
-
}), this.observer.observe(e), this.app = new
|
|
23
|
+
}), this.observer.observe(e), this.app = new z({
|
|
132
24
|
view: e,
|
|
133
25
|
resizeTo: this.canvas,
|
|
134
26
|
powerPreference: "low-power",
|
|
135
27
|
backgroundAlpha: 0
|
|
136
|
-
}), this.rebuildFilters(), this.app.ticker.add(this.onTick), this.app.ticker.start();
|
|
28
|
+
}), this.rebuildFilters(), this.app.ticker.maxFPS = 30, this.app.ticker.add(this.onTick), this.app.ticker.start();
|
|
137
29
|
}
|
|
138
30
|
observer;
|
|
139
31
|
app;
|
|
@@ -179,33 +71,33 @@ class W {
|
|
|
179
71
|
), this.rebuildFilters();
|
|
180
72
|
}
|
|
181
73
|
rebuildFilters() {
|
|
182
|
-
const e = Math.min(this.canvas.width, this.canvas.height), t = Math.max(this.canvas.width, this.canvas.height), i = new
|
|
74
|
+
const e = Math.min(this.canvas.width, this.canvas.height), t = Math.max(this.canvas.width, this.canvas.height), i = new P();
|
|
183
75
|
i.saturate(1.2, !1);
|
|
184
|
-
const s = new
|
|
76
|
+
const s = new P();
|
|
185
77
|
s.brightness(0.6, !1);
|
|
186
|
-
const r = new
|
|
78
|
+
const r = new P();
|
|
187
79
|
r.contrast(0.3, !0), this.app.stage.filters?.forEach((n) => {
|
|
188
80
|
n.destroy();
|
|
189
81
|
}), this.app.stage.filters = [], this.app.stage.filters.push(new y(5, 1)), this.app.stage.filters.push(new y(10, 1)), this.app.stage.filters.push(new y(20, 2)), this.app.stage.filters.push(new y(40, 2)), this.app.stage.filters.push(new y(80, 2)), e > 768 && this.app.stage.filters.push(new y(160, 4)), e > 768 * 2 && this.app.stage.filters.push(new y(320, 4)), this.app.stage.filters.push(i, s, r), this.app.stage.filters.push(new y(5, 1)), Math.random() > 0.5 ? (this.app.stage.filters.push(
|
|
190
|
-
new
|
|
82
|
+
new b({
|
|
191
83
|
radius: (t + e) / 2,
|
|
192
84
|
strength: 1,
|
|
193
85
|
center: [0.25, 1]
|
|
194
86
|
})
|
|
195
87
|
), this.app.stage.filters.push(
|
|
196
|
-
new
|
|
88
|
+
new b({
|
|
197
89
|
radius: (t + e) / 2,
|
|
198
90
|
strength: 1,
|
|
199
91
|
center: [0.75, 0]
|
|
200
92
|
})
|
|
201
93
|
)) : (this.app.stage.filters.push(
|
|
202
|
-
new
|
|
94
|
+
new b({
|
|
203
95
|
radius: (t + e) / 2,
|
|
204
96
|
strength: 1,
|
|
205
97
|
center: [0.75, 1]
|
|
206
98
|
})
|
|
207
99
|
), this.app.stage.filters.push(
|
|
208
|
-
new
|
|
100
|
+
new b({
|
|
209
101
|
radius: (t + e) / 2,
|
|
210
102
|
strength: 1,
|
|
211
103
|
center: [0.25, 0]
|
|
@@ -250,32 +142,32 @@ class W {
|
|
|
250
142
|
let i = 5, s;
|
|
251
143
|
for (; !s?.baseTexture?.resource?.valid && i > 0; )
|
|
252
144
|
try {
|
|
253
|
-
await t.decode(), s =
|
|
145
|
+
await t.decode(), s = D.from(t, {
|
|
254
146
|
resourceOptions: {
|
|
255
147
|
autoLoad: !1
|
|
256
148
|
}
|
|
257
149
|
}), await s.baseTexture.resource.load();
|
|
258
|
-
} catch (
|
|
150
|
+
} catch (h) {
|
|
259
151
|
console.warn(
|
|
260
152
|
`failed on loading album image, retrying (${i})`,
|
|
261
153
|
e,
|
|
262
|
-
|
|
154
|
+
h
|
|
263
155
|
), s = void 0, i--;
|
|
264
156
|
}
|
|
265
157
|
if (!s)
|
|
266
158
|
return;
|
|
267
|
-
const r = new
|
|
268
|
-
n.anchor.set(0.5, 0.5), a.anchor.set(0.5, 0.5),
|
|
159
|
+
const r = new B(), n = new S(s), a = new S(s), o = new S(s), l = new S(s);
|
|
160
|
+
n.anchor.set(0.5, 0.5), a.anchor.set(0.5, 0.5), o.anchor.set(0.5, 0.5), l.anchor.set(0.5, 0.5), n.rotation = Math.random() * Math.PI * 2, a.rotation = Math.random() * Math.PI * 2, o.rotation = Math.random() * Math.PI * 2, l.rotation = Math.random() * Math.PI * 2, r.addChild(n, a, o, l), this.curContainer && this.lastContainer.add(this.curContainer), this.curContainer = r, this.app.stage.addChild(this.curContainer), this.curContainer.alpha = 0, this.app.ticker.start();
|
|
269
161
|
}
|
|
270
162
|
dispose() {
|
|
271
163
|
this.observer.disconnect(), this.app.ticker.remove(this.onTick), this.app.destroy(!0);
|
|
272
164
|
}
|
|
273
165
|
}
|
|
274
|
-
class
|
|
166
|
+
class se extends A {
|
|
275
167
|
element;
|
|
276
168
|
constructor() {
|
|
277
169
|
const e = document.createElement("canvas");
|
|
278
|
-
super(e), this.element = e, e.style.pointerEvents = "none", e.style.zIndex = "-1";
|
|
170
|
+
super(e), this.element = e, e.style.pointerEvents = "none", e.style.zIndex = "-1", e.style.contain = "strict";
|
|
279
171
|
}
|
|
280
172
|
getElement() {
|
|
281
173
|
return this.element;
|
|
@@ -284,8 +176,8 @@ class oe extends W {
|
|
|
284
176
|
super.dispose(), this.element.remove();
|
|
285
177
|
}
|
|
286
178
|
}
|
|
287
|
-
const
|
|
288
|
-
class
|
|
179
|
+
const O = (c, e) => c.size === e.size && [...c].every((t) => e.has(t));
|
|
180
|
+
class L {
|
|
289
181
|
currentPosition = 0;
|
|
290
182
|
targetPosition = 0;
|
|
291
183
|
currentTime = 0;
|
|
@@ -300,13 +192,13 @@ class w {
|
|
|
300
192
|
}
|
|
301
193
|
resetSolver() {
|
|
302
194
|
const e = this.getV(this.currentTime);
|
|
303
|
-
this.currentTime = 0, this.currentSolver =
|
|
195
|
+
this.currentTime = 0, this.currentSolver = F(
|
|
304
196
|
this.currentPosition,
|
|
305
197
|
e,
|
|
306
198
|
this.targetPosition,
|
|
307
199
|
0,
|
|
308
200
|
this.params
|
|
309
|
-
), this.getV =
|
|
201
|
+
), this.getV = x(this.currentSolver), this.getV2 = x(this.getV);
|
|
310
202
|
}
|
|
311
203
|
arrived() {
|
|
312
204
|
return Math.abs(this.targetPosition - this.currentPosition) < 0.01 && this.getV(this.currentTime) < 0.01 && this.getV2(this.currentTime) < 0.01 && this.queueParams === void 0 && this.queuePosition === void 0;
|
|
@@ -340,25 +232,25 @@ class w {
|
|
|
340
232
|
return this.currentPosition;
|
|
341
233
|
}
|
|
342
234
|
}
|
|
343
|
-
function
|
|
344
|
-
const r = s?.soft ?? !1, n = s?.stiffness ?? 100, a = s?.damping ?? 10,
|
|
345
|
-
if (r || 1 <= a / (2 * Math.sqrt(n *
|
|
346
|
-
const
|
|
347
|
-
return (
|
|
235
|
+
function F(c, e, t, i = 0, s) {
|
|
236
|
+
const r = s?.soft ?? !1, n = s?.stiffness ?? 100, a = s?.damping ?? 10, o = s?.mass ?? 1, l = t - c;
|
|
237
|
+
if (r || 1 <= a / (2 * Math.sqrt(n * o))) {
|
|
238
|
+
const h = -Math.sqrt(n / o), u = -h * l - e;
|
|
239
|
+
return (p) => (p -= i, p < 0 ? c : t - (l + p * u) * Math.E ** (p * h));
|
|
348
240
|
} else {
|
|
349
|
-
const
|
|
350
|
-
4 *
|
|
351
|
-
),
|
|
352
|
-
return (
|
|
241
|
+
const h = Math.sqrt(
|
|
242
|
+
4 * o * n - a ** 2
|
|
243
|
+
), u = (a * l - 2 * o * e) / h, p = 0.5 * h / o, f = -(0.5 * a) / o;
|
|
244
|
+
return (d) => (d -= i, d < 0 ? c : t - (Math.cos(d * p) * l + Math.sin(d * p) * u) * Math.E ** (d * f));
|
|
353
245
|
}
|
|
354
246
|
}
|
|
355
|
-
function
|
|
356
|
-
return (t) => (
|
|
247
|
+
function $(c) {
|
|
248
|
+
return (t) => (c(t + 1e-3) - c(t - 1e-3)) / (2 * 1e-3);
|
|
357
249
|
}
|
|
358
|
-
function
|
|
359
|
-
return
|
|
250
|
+
function x(c) {
|
|
251
|
+
return $(c);
|
|
360
252
|
}
|
|
361
|
-
class
|
|
253
|
+
class Y {
|
|
362
254
|
constructor(e) {
|
|
363
255
|
this.lyricPlayer = e, this.element.setAttribute(
|
|
364
256
|
"class",
|
|
@@ -372,8 +264,8 @@ class R {
|
|
|
372
264
|
// 由 LyricPlayer 来设置
|
|
373
265
|
lineSize = [0, 0];
|
|
374
266
|
lineTransforms = {
|
|
375
|
-
posX: new
|
|
376
|
-
posY: new
|
|
267
|
+
posX: new L(0),
|
|
268
|
+
posY: new L(0)
|
|
377
269
|
};
|
|
378
270
|
measureSize() {
|
|
379
271
|
return [
|
|
@@ -389,7 +281,7 @@ class R {
|
|
|
389
281
|
this.rebuildStyle();
|
|
390
282
|
}
|
|
391
283
|
rebuildStyle() {
|
|
392
|
-
let e = `transform:translate(${this.lineTransforms.posX.getCurrentPosition()}px,${this.lineTransforms.posY.getCurrentPosition()}px);`;
|
|
284
|
+
let e = `transform:translate(${this.lineTransforms.posX.getCurrentPosition().toFixed(2)}px,${this.lineTransforms.posY.getCurrentPosition().toFixed(2)}px);`;
|
|
393
285
|
!this.lyricPlayer.getEnableSpring() && this.isInSight && (e += `transition-delay:${this.delay}ms;`), e !== this.lastStyle && (this.lastStyle = e, this.element.setAttribute("style", e));
|
|
394
286
|
}
|
|
395
287
|
getElement() {
|
|
@@ -415,12 +307,12 @@ class R {
|
|
|
415
307
|
this.element.remove();
|
|
416
308
|
}
|
|
417
309
|
}
|
|
418
|
-
function _(
|
|
310
|
+
function _(c) {
|
|
419
311
|
const t = 2.5949095;
|
|
420
|
-
return
|
|
312
|
+
return c < 0.5 ? Math.pow(2 * c, 2) * ((t + 1) * 2 * c - t) / 2 : (Math.pow(2 * c - 2, 2) * ((t + 1) * (c * 2 - 2) + t) + 2) / 2;
|
|
421
313
|
}
|
|
422
|
-
const
|
|
423
|
-
class
|
|
314
|
+
const g = (c, e, t) => Math.max(c, Math.min(e, t));
|
|
315
|
+
class q {
|
|
424
316
|
constructor(e) {
|
|
425
317
|
this.lyricPlayer = e, this.element.className = this.lyricPlayer.style.classes.interludeDots, this.element.appendChild(this.dot0), this.element.appendChild(this.dot1), this.element.appendChild(this.dot2);
|
|
426
318
|
}
|
|
@@ -447,42 +339,44 @@ class X {
|
|
|
447
339
|
update(e = 0) {
|
|
448
340
|
this.currentTime += e;
|
|
449
341
|
let t = "";
|
|
450
|
-
if (t += `transform:translate(${this.left
|
|
342
|
+
if (t += `transform:translate(${this.left.toFixed(
|
|
343
|
+
2
|
|
344
|
+
)}px, ${this.top.toFixed(2)}px)`, this.currentInterlude) {
|
|
451
345
|
const i = this.currentInterlude[1] - this.currentInterlude[0], s = this.currentTime - this.currentInterlude[0];
|
|
452
346
|
if (s <= i) {
|
|
453
347
|
const r = i / Math.ceil(i / this.targetBreatheDuration);
|
|
454
348
|
let n = 1, a = 1;
|
|
455
349
|
n *= Math.sin(1.5 * Math.PI - s / r * 2) / 10 + 1, s < 1e3 && (n *= 1 - Math.pow((1e3 - s) / 1e3, 2)), s < 500 ? a = 0 : s < 1e3 && (a *= (s - 500) / 500), i - s < 750 && (n *= 1 - _(
|
|
456
350
|
(750 - (i - s)) / 750 / 2
|
|
457
|
-
)), i - s < 375 && (a *=
|
|
351
|
+
)), i - s < 375 && (a *= g(
|
|
458
352
|
0,
|
|
459
353
|
(i - s) / 375,
|
|
460
354
|
1
|
|
461
355
|
)), n = Math.max(0, n), t += ` scale(${n})`;
|
|
462
|
-
const
|
|
356
|
+
const o = g(
|
|
463
357
|
0.25,
|
|
464
358
|
s * 3 / i * 0.75,
|
|
465
359
|
1
|
|
466
|
-
),
|
|
360
|
+
), l = g(
|
|
467
361
|
0.25,
|
|
468
362
|
(s - i / 3) * 3 / i * 0.75,
|
|
469
363
|
1
|
|
470
|
-
),
|
|
364
|
+
), h = g(
|
|
471
365
|
0.25,
|
|
472
366
|
(s - i / 3 * 2) * 3 / i * 0.75,
|
|
473
367
|
1
|
|
474
368
|
);
|
|
475
|
-
this.dot0.style.opacity = `${
|
|
369
|
+
this.dot0.style.opacity = `${g(
|
|
476
370
|
0,
|
|
477
|
-
Math.max(0, a *
|
|
371
|
+
Math.max(0, a * o),
|
|
478
372
|
1
|
|
479
|
-
)}`, this.dot1.style.opacity = `${
|
|
373
|
+
)}`, this.dot1.style.opacity = `${g(
|
|
480
374
|
0,
|
|
481
|
-
Math.max(0, a *
|
|
375
|
+
Math.max(0, a * l),
|
|
482
376
|
1
|
|
483
|
-
)}`, this.dot2.style.opacity = `${
|
|
377
|
+
)}`, this.dot2.style.opacity = `${g(
|
|
484
378
|
0,
|
|
485
|
-
Math.max(0, a *
|
|
379
|
+
Math.max(0, a * h),
|
|
486
380
|
1
|
|
487
381
|
)}`;
|
|
488
382
|
} else
|
|
@@ -495,33 +389,33 @@ class X {
|
|
|
495
389
|
this.element.remove();
|
|
496
390
|
}
|
|
497
391
|
}
|
|
498
|
-
const
|
|
499
|
-
function
|
|
500
|
-
const i = 2 +
|
|
392
|
+
const R = /^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u;
|
|
393
|
+
function W(c, e = "rgba(0,0,0,0.85)", t = "rgba(0,0,0,0.5)") {
|
|
394
|
+
const i = 2 + c, s = c / i, r = (1 - s) / 2;
|
|
501
395
|
return [
|
|
502
396
|
`linear-gradient(to right,${e} ${r * 100}%,${t} ${(r + s) * 100}%)`,
|
|
503
397
|
s,
|
|
504
398
|
i
|
|
505
399
|
];
|
|
506
400
|
}
|
|
507
|
-
function
|
|
401
|
+
function X(c, e) {
|
|
508
402
|
let t = [], i = [];
|
|
509
403
|
const s = [];
|
|
510
|
-
for (const r of
|
|
404
|
+
for (const r of c) {
|
|
511
405
|
const n = e(r);
|
|
512
|
-
t.push(n), i.push(r), n.length > 0 && n.trim().length === 0 ? (t.pop(), i.pop(), i.length === 1 ? s.push(i[0]) : i.length > 1 && s.push(i), s.push(r), t = [], i = []) : (!/^\s*[^\s]*\s*$/.test(t.join("")) ||
|
|
406
|
+
t.push(n), i.push(r), n.length > 0 && n.trim().length === 0 ? (t.pop(), i.pop(), i.length === 1 ? s.push(i[0]) : i.length > 1 && s.push(i), s.push(r), t = [], i = []) : (!/^\s*[^\s]*\s*$/.test(t.join("")) || R.test(n)) && (t.pop(), i.pop(), i.length === 1 ? s.push(i[0]) : i.length > 1 && s.push(i), t = [n], i = [r]);
|
|
513
407
|
}
|
|
514
408
|
return i.length === 1 ? s.push(i[0]) : s.push(i), s;
|
|
515
409
|
}
|
|
516
|
-
function
|
|
517
|
-
return
|
|
410
|
+
function v(c) {
|
|
411
|
+
return c.endTime - c.startTime >= 1e3 && c.word.length <= 7;
|
|
518
412
|
}
|
|
519
413
|
class H extends MouseEvent {
|
|
520
414
|
constructor(e, t) {
|
|
521
415
|
super(t.type, t), this.line = e;
|
|
522
416
|
}
|
|
523
417
|
}
|
|
524
|
-
class
|
|
418
|
+
class G extends EventTarget {
|
|
525
419
|
// rome-ignore lint/correctness/noUnreachableSuper: <explanation>
|
|
526
420
|
constructor(e, t = {
|
|
527
421
|
words: [],
|
|
@@ -532,7 +426,7 @@ class j extends EventTarget {
|
|
|
532
426
|
isBG: !1,
|
|
533
427
|
isDuet: !1
|
|
534
428
|
}) {
|
|
535
|
-
super(), this.lyricPlayer = e, this.lyricLine = t, this.element.setAttribute(
|
|
429
|
+
super(), this.lyricPlayer = e, this.lyricLine = t, this._prevParentEl = e.getElement(), this.element.setAttribute(
|
|
536
430
|
"class",
|
|
537
431
|
this.lyricPlayer.style.classes.lyricLine
|
|
538
432
|
), this.lyricLine.isBG && this.element.classList.add(this.lyricPlayer.style.classes.lyricBgLine), this.lyricLine.isDuet && this.element.classList.add(this.lyricPlayer.style.classes.lyricDuetLine), this.element.appendChild(document.createElement("div")), this.element.appendChild(document.createElement("div")), this.element.appendChild(document.createElement("div"));
|
|
@@ -549,23 +443,26 @@ class j extends EventTarget {
|
|
|
549
443
|
// 由 LyricPlayer 来设置
|
|
550
444
|
lineSize = [0, 0];
|
|
551
445
|
lineTransforms = {
|
|
552
|
-
posX: new
|
|
553
|
-
posY: new
|
|
554
|
-
scale: new
|
|
446
|
+
posX: new L(0),
|
|
447
|
+
posY: new L(0),
|
|
448
|
+
scale: new L(1)
|
|
555
449
|
};
|
|
556
450
|
listenersMap = /* @__PURE__ */ new Map();
|
|
557
451
|
onMouseEvent = (e) => {
|
|
558
|
-
|
|
452
|
+
const t = new H(this, e);
|
|
453
|
+
for (const i of this.listenersMap.get(e.type) ?? [])
|
|
454
|
+
i.call(this, t);
|
|
455
|
+
if (!this.dispatchEvent(t) || t.defaultPrevented)
|
|
559
456
|
return e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), !1;
|
|
560
457
|
};
|
|
561
|
-
|
|
562
|
-
if (
|
|
458
|
+
addMouseEventListener(e, t, i) {
|
|
459
|
+
if (t) {
|
|
563
460
|
const s = this.listenersMap.get(e) ?? /* @__PURE__ */ new Set();
|
|
564
461
|
s.size === 0 && this.element.addEventListener(e, this.onMouseEvent), s.add(t), this.listenersMap.set(e, s);
|
|
565
462
|
}
|
|
566
463
|
}
|
|
567
|
-
|
|
568
|
-
if (
|
|
464
|
+
removeMouseEventListener(e, t, i) {
|
|
465
|
+
if (t) {
|
|
569
466
|
const s = this.listenersMap.get(e);
|
|
570
467
|
s && (s.delete(t), s.size === 0 && this.element.removeEventListener(e, this.onMouseEvent));
|
|
571
468
|
}
|
|
@@ -581,12 +478,12 @@ class j extends EventTarget {
|
|
|
581
478
|
}), e.classList.add("active");
|
|
582
479
|
}
|
|
583
480
|
measureSize() {
|
|
584
|
-
this._hide && (this.element.style.display = "", this.element.style.visibility = "hidden");
|
|
481
|
+
this._hide && (this._prevParentEl && this._prevParentEl.appendChild(this.element), this.element.style.display = "", this.element.style.visibility = "hidden");
|
|
585
482
|
const e = [
|
|
586
483
|
this.element.clientWidth,
|
|
587
484
|
this.element.clientHeight
|
|
588
485
|
];
|
|
589
|
-
return this._hide && (this.element.style.display = "none", this.element.style.visibility = ""), e;
|
|
486
|
+
return this._hide && (this._prevParentEl && this.element.remove(), this.element.style.display = "none", this.element.style.visibility = ""), e;
|
|
590
487
|
}
|
|
591
488
|
disable() {
|
|
592
489
|
this.isEnabled = !1, this.element.classList.remove("active");
|
|
@@ -606,12 +503,13 @@ class j extends EventTarget {
|
|
|
606
503
|
return this.lyricLine;
|
|
607
504
|
}
|
|
608
505
|
_hide = !0;
|
|
506
|
+
_prevParentEl = null;
|
|
609
507
|
lastStyle = "";
|
|
610
508
|
show() {
|
|
611
|
-
this._hide = !1, this.rebuildStyle();
|
|
509
|
+
this._hide = !1, this._prevParentEl && (this._prevParentEl.appendChild(this.element), this._prevParentEl = null), this.rebuildStyle();
|
|
612
510
|
}
|
|
613
511
|
hide() {
|
|
614
|
-
this._hide = !0, this.rebuildStyle();
|
|
512
|
+
this._hide = !0, this.element.parentElement && (this._prevParentEl = this.element.parentElement, this.element.remove()), this.rebuildStyle();
|
|
615
513
|
}
|
|
616
514
|
rebuildStyle() {
|
|
617
515
|
if (this._hide) {
|
|
@@ -621,7 +519,7 @@ class j extends EventTarget {
|
|
|
621
519
|
));
|
|
622
520
|
return;
|
|
623
521
|
}
|
|
624
|
-
let e = `transform:translate(${this.lineTransforms.posX.getCurrentPosition()}px,${this.lineTransforms.posY.getCurrentPosition()}px) scale(${this.lineTransforms.scale.getCurrentPosition()});`;
|
|
522
|
+
let e = `transform:translate(${this.lineTransforms.posX.getCurrentPosition().toFixed(2)}px,${this.lineTransforms.posY.getCurrentPosition().toFixed(2)}px) scale(${this.lineTransforms.scale.getCurrentPosition().toFixed(4)});`;
|
|
625
523
|
!this.lyricPlayer.getEnableSpring() && this.isInSight && (e += `transition-delay:${this.delay}ms;`), e += `filter:blur(${Math.min(32, this.blur)}px);`, e !== this.lastStyle && (this.lastStyle = e, this.element.setAttribute("style", e));
|
|
626
524
|
}
|
|
627
525
|
rebuildElement() {
|
|
@@ -630,31 +528,31 @@ class j extends EventTarget {
|
|
|
630
528
|
e.innerText = this.lyricLine.words.map((r) => r.word).join(""), t.innerText = this.lyricLine.translatedLyric, i.innerText = this.lyricLine.romanLyric;
|
|
631
529
|
return;
|
|
632
530
|
}
|
|
633
|
-
const s =
|
|
531
|
+
const s = X(this.lyricLine.words, (r) => r.word);
|
|
634
532
|
e.innerHTML = "", this.splittedWords = [];
|
|
635
533
|
for (const r of s)
|
|
636
534
|
if (r instanceof Array) {
|
|
637
|
-
const n = r.map((
|
|
638
|
-
(
|
|
535
|
+
const n = r.map((l) => v(l)).reduce((l, h) => l || h, !1), a = r.reduce(
|
|
536
|
+
(l, h) => (l.endTime = Math.max(l.endTime, h.endTime), l.startTime = Math.min(l.startTime, h.startTime), l.word += h.word, l),
|
|
639
537
|
{ word: "", startTime: 1 / 0, endTime: -1 / 0 }
|
|
640
|
-
),
|
|
641
|
-
for (const
|
|
642
|
-
const
|
|
538
|
+
), o = document.createElement("span");
|
|
539
|
+
for (const l of r) {
|
|
540
|
+
const h = document.createElement("span"), u = this.initFloatAnimation(
|
|
643
541
|
a,
|
|
644
|
-
|
|
542
|
+
h
|
|
645
543
|
);
|
|
646
544
|
if (n) {
|
|
647
|
-
|
|
648
|
-
const
|
|
649
|
-
for (const
|
|
650
|
-
const
|
|
651
|
-
|
|
545
|
+
h.classList.add("emphasize");
|
|
546
|
+
const p = [];
|
|
547
|
+
for (const d of l.word.trim().split("")) {
|
|
548
|
+
const m = document.createElement("span");
|
|
549
|
+
m.innerText = d, p.push(m), h.appendChild(m);
|
|
652
550
|
}
|
|
653
551
|
const f = {
|
|
654
|
-
...
|
|
655
|
-
mainElement:
|
|
656
|
-
subElements:
|
|
657
|
-
elementAnimations: [
|
|
552
|
+
...l,
|
|
553
|
+
mainElement: h,
|
|
554
|
+
subElements: p,
|
|
555
|
+
elementAnimations: [u],
|
|
658
556
|
width: 0,
|
|
659
557
|
height: 0,
|
|
660
558
|
shouldEmphasize: n
|
|
@@ -663,22 +561,22 @@ class j extends EventTarget {
|
|
|
663
561
|
...this.initEmphasizeAnimation(f)
|
|
664
562
|
), this.splittedWords.push(f);
|
|
665
563
|
} else
|
|
666
|
-
|
|
667
|
-
...
|
|
668
|
-
mainElement:
|
|
564
|
+
h.innerText = l.word, this.splittedWords.push({
|
|
565
|
+
...l,
|
|
566
|
+
mainElement: h,
|
|
669
567
|
subElements: [],
|
|
670
|
-
elementAnimations: [
|
|
568
|
+
elementAnimations: [u],
|
|
671
569
|
width: 0,
|
|
672
570
|
height: 0,
|
|
673
571
|
shouldEmphasize: n
|
|
674
572
|
});
|
|
675
|
-
|
|
573
|
+
o.appendChild(h);
|
|
676
574
|
}
|
|
677
|
-
a.word.trimStart() !== a.word && e.appendChild(document.createTextNode(" ")), e.appendChild(
|
|
575
|
+
a.word.trimStart() !== a.word && e.appendChild(document.createTextNode(" ")), e.appendChild(o), a.word.trimEnd() !== a.word && e.appendChild(document.createTextNode(" "));
|
|
678
576
|
} else if (r.word.trim().length === 0)
|
|
679
577
|
e.appendChild(document.createTextNode(" "));
|
|
680
578
|
else {
|
|
681
|
-
const n =
|
|
579
|
+
const n = v(r), a = document.createElement("span"), o = {
|
|
682
580
|
...r,
|
|
683
581
|
mainElement: a,
|
|
684
582
|
subElements: [],
|
|
@@ -689,17 +587,17 @@ class j extends EventTarget {
|
|
|
689
587
|
};
|
|
690
588
|
if (n) {
|
|
691
589
|
a.classList.add("emphasize");
|
|
692
|
-
const
|
|
693
|
-
for (const
|
|
694
|
-
const
|
|
695
|
-
|
|
590
|
+
const l = [];
|
|
591
|
+
for (const h of r.word.trim().split("")) {
|
|
592
|
+
const u = document.createElement("span");
|
|
593
|
+
u.innerText = h, l.push(u), a.appendChild(u);
|
|
696
594
|
}
|
|
697
|
-
|
|
698
|
-
...this.initEmphasizeAnimation(
|
|
595
|
+
o.subElements = l, o.elementAnimations.push(
|
|
596
|
+
...this.initEmphasizeAnimation(o)
|
|
699
597
|
);
|
|
700
598
|
} else
|
|
701
599
|
a.innerText = r.word.trim();
|
|
702
|
-
r.word.trimStart() !== r.word && e.appendChild(document.createTextNode(" ")), e.appendChild(a), r.word.trimEnd() !== r.word && e.appendChild(document.createTextNode(" ")), this.splittedWords.push(
|
|
600
|
+
r.word.trimStart() !== r.word && e.appendChild(document.createTextNode(" ")), e.appendChild(a), r.word.trimEnd() !== r.word && e.appendChild(document.createTextNode(" ")), this.splittedWords.push(o);
|
|
703
601
|
}
|
|
704
602
|
t.innerText = this.lyricLine.translatedLyric, i.innerText = this.lyricLine.romanLyric;
|
|
705
603
|
}
|
|
@@ -726,7 +624,7 @@ class j extends EventTarget {
|
|
|
726
624
|
initEmphasizeAnimation(e) {
|
|
727
625
|
const t = e.startTime - this.lyricLine.startTime, i = e.endTime - e.startTime;
|
|
728
626
|
return e.subElements.map((s, r, n) => {
|
|
729
|
-
const a = Math.max(1e3, e.endTime - e.startTime),
|
|
627
|
+
const a = Math.max(1e3, e.endTime - e.startTime), o = t + i / n.length * r, l = s.animate(
|
|
730
628
|
[
|
|
731
629
|
{
|
|
732
630
|
offset: 0,
|
|
@@ -746,7 +644,7 @@ class j extends EventTarget {
|
|
|
746
644
|
],
|
|
747
645
|
{
|
|
748
646
|
duration: isFinite(a) ? a : 0,
|
|
749
|
-
delay: isFinite(
|
|
647
|
+
delay: isFinite(o) ? o : 0,
|
|
750
648
|
id: "glow-word",
|
|
751
649
|
iterations: 1,
|
|
752
650
|
composite: "replace",
|
|
@@ -754,40 +652,40 @@ class j extends EventTarget {
|
|
|
754
652
|
fill: "both"
|
|
755
653
|
}
|
|
756
654
|
);
|
|
757
|
-
return
|
|
655
|
+
return l.pause(), l;
|
|
758
656
|
});
|
|
759
657
|
}
|
|
760
658
|
updateMaskImage() {
|
|
761
|
-
this._hide && (this.element.style.display = "", this.element.style.visibility = "hidden"), this.splittedWords.forEach((e) => {
|
|
659
|
+
this._hide && (this._prevParentEl && this._prevParentEl.appendChild(this.element), this.element.style.display = "", this.element.style.visibility = "hidden"), this.splittedWords.forEach((e) => {
|
|
762
660
|
const t = e.mainElement;
|
|
763
661
|
if (t) {
|
|
764
662
|
e.width = t.clientWidth, e.height = t.clientHeight;
|
|
765
|
-
const i = e.height / 2, [s, r, n] =
|
|
663
|
+
const i = e.height / 2, [s, r, n] = W(
|
|
766
664
|
i / e.width,
|
|
767
|
-
"rgba(0,0,0,
|
|
665
|
+
"rgba(0,0,0,0.85)",
|
|
768
666
|
"rgba(0,0,0,0.25)"
|
|
769
667
|
), a = `${n * 100}% 100%`;
|
|
770
|
-
this.lyricPlayer.supportMaskImage ? (t.style.maskImage = s, t.style.maskOrigin = "left", t.style.maskSize = a) : (t.style.webkitMaskImage = s, t.style.webkitMaskOrigin = "left", t.style.webkitMaskSize = a);
|
|
771
|
-
const
|
|
772
|
-
t.style.maskPosition =
|
|
668
|
+
this.lyricPlayer.supportMaskImage ? (t.style.maskImage = s, t.style.maskRepeat = "no-repeat", t.style.maskOrigin = "left", t.style.maskSize = a) : (t.style.webkitMaskImage = s, t.style.webkitMaskRepeat = "no-repeat", t.style.webkitMaskOrigin = "left", t.style.webkitMaskSize = a);
|
|
669
|
+
const o = e.width + i, l = `clamp(${-o}px,calc(${-o}px + (var(--amll-player-time) - ${e.startTime})*${o / Math.abs(e.endTime - e.startTime)}px),0px) 0px, left top`;
|
|
670
|
+
t.style.maskPosition = l, t.style.webkitMaskPosition = l;
|
|
773
671
|
}
|
|
774
|
-
}), this._hide && (this.element.style.display = "none", this.element.style.visibility = "");
|
|
672
|
+
}), this._hide && (this._prevParentEl && this.element.remove(), this.element.style.display = "none", this.element.style.visibility = "");
|
|
775
673
|
}
|
|
776
674
|
getElement() {
|
|
777
675
|
return this.element;
|
|
778
676
|
}
|
|
779
677
|
setTransform(e = this.left, t = this.top, i = this.scale, s = 1, r = 0, n = !1, a = 0) {
|
|
780
|
-
const
|
|
678
|
+
const o = this.isInSight, l = this.lyricPlayer.getEnableSpring();
|
|
781
679
|
this.left = e, this.top = t, this.scale = i, this.delay = a * 1e3 | 0;
|
|
782
|
-
const
|
|
783
|
-
if (
|
|
680
|
+
const h = this.element.children[0], u = this.element.children[1], p = this.element.children[2];
|
|
681
|
+
if (h.style.opacity = `${s}`, u.style.opacity = `${s / 2}`, p.style.opacity = `${s / 2}`, n || !l) {
|
|
784
682
|
if (this.blur = Math.min(32, r), n && this.element.classList.add(
|
|
785
683
|
this.lyricPlayer.style.classes.tmpDisableTransition
|
|
786
|
-
), this.lineTransforms.posX.setPosition(e), this.lineTransforms.posY.setPosition(t), this.lineTransforms.scale.setPosition(i),
|
|
684
|
+
), this.lineTransforms.posX.setPosition(e), this.lineTransforms.posY.setPosition(t), this.lineTransforms.scale.setPosition(i), l)
|
|
787
685
|
this.rebuildStyle();
|
|
788
686
|
else {
|
|
789
687
|
const f = this.isInSight;
|
|
790
|
-
|
|
688
|
+
o || f ? this.show() : this.hide();
|
|
791
689
|
}
|
|
792
690
|
n && requestAnimationFrame(() => {
|
|
793
691
|
this.element.classList.remove(
|
|
@@ -811,13 +709,13 @@ class j extends EventTarget {
|
|
|
811
709
|
this.element.remove();
|
|
812
710
|
}
|
|
813
711
|
}
|
|
814
|
-
const
|
|
815
|
-
class
|
|
712
|
+
const V = I(k());
|
|
713
|
+
class N extends MouseEvent {
|
|
816
714
|
constructor(e, t, i) {
|
|
817
715
|
super(`line-${i.type}`, i), this.lineIndex = e, this.line = t;
|
|
818
716
|
}
|
|
819
717
|
}
|
|
820
|
-
class
|
|
718
|
+
class ne extends EventTarget {
|
|
821
719
|
element = document.createElement("div");
|
|
822
720
|
currentTime = 0;
|
|
823
721
|
lyricLines = [];
|
|
@@ -868,10 +766,11 @@ class le extends EventTarget {
|
|
|
868
766
|
alignAnchor = "center";
|
|
869
767
|
alignPosition = 0.5;
|
|
870
768
|
isNonDynamic = !1;
|
|
769
|
+
scrollBoundary = [0, 0];
|
|
871
770
|
size = [0, 0];
|
|
872
771
|
innerSize = [0, 0];
|
|
873
772
|
onLineClickedHandler = (e) => {
|
|
874
|
-
const t = new
|
|
773
|
+
const t = new N(
|
|
875
774
|
this.lyricLinesIndexes.get(e.line) ?? -1,
|
|
876
775
|
e.line,
|
|
877
776
|
e
|
|
@@ -916,7 +815,7 @@ class le extends EventTarget {
|
|
|
916
815
|
getEnableScale() {
|
|
917
816
|
return this.enableScale;
|
|
918
817
|
}
|
|
919
|
-
style =
|
|
818
|
+
style = V.createStyleSheet({
|
|
920
819
|
lyricPlayer: {
|
|
921
820
|
userSelect: "none",
|
|
922
821
|
fontSize: "var(--amll-lyric-player-font-size,max(min(5vh, 10vw), 12px))",
|
|
@@ -925,6 +824,7 @@ class le extends EventTarget {
|
|
|
925
824
|
width: "100%",
|
|
926
825
|
height: "100%",
|
|
927
826
|
overflow: "hidden",
|
|
827
|
+
boxSizing: "content-box",
|
|
928
828
|
maxWidth: "100%",
|
|
929
829
|
maxHeight: "100%",
|
|
930
830
|
zIndex: 1,
|
|
@@ -940,9 +840,8 @@ class le extends EventTarget {
|
|
|
940
840
|
lyricLine: {
|
|
941
841
|
position: "absolute",
|
|
942
842
|
transformOrigin: "left",
|
|
943
|
-
maxWidth: "var(--amll-lyric-player-width,100%)",
|
|
944
|
-
minWidth: "var(--amll-lyric-player-width,100%)",
|
|
945
843
|
width: "var(--amll-lyric-player-width,100%)",
|
|
844
|
+
height: "fit-content",
|
|
946
845
|
padding: "2vh 1.05em",
|
|
947
846
|
margin: "0 -1em",
|
|
948
847
|
contain: "content",
|
|
@@ -1041,12 +940,51 @@ class le extends EventTarget {
|
|
|
1041
940
|
this.calcLayout(!0, !0);
|
|
1042
941
|
};
|
|
1043
942
|
constructor() {
|
|
1044
|
-
super(), this.interludeDots = new
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
943
|
+
super(), this.interludeDots = new q(this), this.bottomLine = new Y(this), this.element.setAttribute("class", this.style.classes.lyricPlayer), this.disableSpring && this.element.classList.add(this.style.classes.disableSpring), this.rebuildStyle(), this.resizeObserver.observe(this.element), this.element.appendChild(this.interludeDots.getElement()), this.element.appendChild(this.bottomLine.getElement()), this.style.attach(), this.interludeDots.setTransform(0, 200), window.addEventListener("pageshow", this.onPageShow);
|
|
944
|
+
let e = 0, t = "none", i = 0, s = 0, r = 0, n = Symbol("amll-scroll"), a = 0, o = 0;
|
|
945
|
+
this.element.addEventListener("touchstart", (l) => {
|
|
946
|
+
this.beginScrollHandler() && (l.preventDefault(), e = this.scrollOffset, i = l.touches[0].screenY, a = i, s = Date.now(), r = 0);
|
|
947
|
+
}), this.element.addEventListener("touchmove", (l) => {
|
|
948
|
+
if (this.beginScrollHandler()) {
|
|
949
|
+
l.preventDefault();
|
|
950
|
+
const h = l.touches[0].screenY, u = h - i, p = h - a, f = p > 0 ? "down" : p < 0 ? "up" : "none";
|
|
951
|
+
t !== f ? (t = f, e = this.scrollOffset, i = h, s = Date.now()) : this.scrollOffset = e - u, a = h, o = Date.now(), this.limitScrollOffset(), this.calcLayout(!0);
|
|
952
|
+
}
|
|
953
|
+
}), this.element.addEventListener("touchend", (l) => {
|
|
954
|
+
if (this.beginScrollHandler()) {
|
|
955
|
+
l.preventDefault(), i = 0;
|
|
956
|
+
const h = Date.now();
|
|
957
|
+
if (h - o > 100)
|
|
958
|
+
return this.endScrollHandler();
|
|
959
|
+
const u = h - s;
|
|
960
|
+
r = (this.scrollOffset - e) / u * 1e3;
|
|
961
|
+
let p = 0;
|
|
962
|
+
const f = Symbol("amll-scroll");
|
|
963
|
+
n = f;
|
|
964
|
+
const d = (m) => {
|
|
965
|
+
p ||= m, n === f && this.beginScrollHandler() && (this.scrollOffset += r * (m - p) / 1e3, r *= 0.99, this.limitScrollOffset(), this.calcLayout(!0), Math.abs(r) > 1 && !this.scrollBoundary.includes(this.scrollOffset) && requestAnimationFrame(d), this.endScrollHandler(), p = m);
|
|
966
|
+
};
|
|
967
|
+
requestAnimationFrame(d), this.endScrollHandler();
|
|
968
|
+
}
|
|
969
|
+
}), this.element.addEventListener("wheel", (l) => {
|
|
970
|
+
this.beginScrollHandler() && (l.deltaMode === l.DOM_DELTA_PIXEL ? (this.scrollOffset += l.deltaY, this.limitScrollOffset(), this.calcLayout(!0)) : (this.scrollOffset += l.deltaY * 50, this.limitScrollOffset(), this.calcLayout(!1)), this.endScrollHandler());
|
|
1048
971
|
});
|
|
1049
972
|
}
|
|
973
|
+
beginScrollHandler() {
|
|
974
|
+
const e = this.allowScroll;
|
|
975
|
+
return e && (this.isScrolled = !0, this.invokedByScrollEvent = !0, clearTimeout(this.scrolledHandler), this.scrolledHandler = setTimeout(() => {
|
|
976
|
+
this.isScrolled = !1, this.scrollOffset = 0;
|
|
977
|
+
}, 5e3)), e;
|
|
978
|
+
}
|
|
979
|
+
endScrollHandler() {
|
|
980
|
+
this.invokedByScrollEvent = !1;
|
|
981
|
+
}
|
|
982
|
+
limitScrollOffset() {
|
|
983
|
+
this.scrollOffset = Math.max(
|
|
984
|
+
Math.min(this.scrollBoundary[1], this.scrollOffset),
|
|
985
|
+
this.scrollBoundary[0]
|
|
986
|
+
);
|
|
987
|
+
}
|
|
1050
988
|
/**
|
|
1051
989
|
* 获取当前播放时间里是否处于间奏区间
|
|
1052
990
|
* 如果是则会返回单位为毫秒的始末时间
|
|
@@ -1082,7 +1020,7 @@ class le extends EventTarget {
|
|
|
1082
1020
|
*/
|
|
1083
1021
|
rebuildStyle() {
|
|
1084
1022
|
let e = "";
|
|
1085
|
-
e += "--amll-lyric-player-width:", e += this.innerSize[0] - this.padding * 2, e += "px;", e += "--amll-lyric-player-height:", e += this.innerSize[1] - this.padding * 2, e += "px;",
|
|
1023
|
+
e += "--amll-lyric-player-width:", e += this.innerSize[0] - this.padding * 2, e += "px;", e += "--amll-lyric-player-height:", e += this.innerSize[1] - this.padding * 2, e += "px;", this.element.setAttribute("style", e);
|
|
1086
1024
|
}
|
|
1087
1025
|
/**
|
|
1088
1026
|
* 设置是否隐藏已经播放过的歌词行,默认不隐藏
|
|
@@ -1142,17 +1080,17 @@ class le extends EventTarget {
|
|
|
1142
1080
|
}
|
|
1143
1081
|
this.processedLines.forEach((i, s, r) => {
|
|
1144
1082
|
const n = r[s + 1], a = i.words[i.words.length - 1];
|
|
1145
|
-
a &&
|
|
1083
|
+
a && v(a) && (n ? n.startTime > i.endTime && (i.endTime = Math.min(i.endTime + 1500, n.startTime)) : i.endTime = i.endTime + 1500);
|
|
1146
1084
|
}), this.processedLines.forEach((i, s, r) => {
|
|
1147
1085
|
if (i.isBG)
|
|
1148
1086
|
return;
|
|
1149
1087
|
const n = r[s + 1];
|
|
1150
1088
|
n?.isBG && (n.startTime = Math.min(n.startTime, i.startTime));
|
|
1151
1089
|
}), this.lyricLinesEl.forEach((i) => {
|
|
1152
|
-
i.
|
|
1090
|
+
i.removeMouseEventListener("click", this.onLineClickedHandler), i.removeMouseEventListener("contextmenu", this.onLineClickedHandler), i.dispose();
|
|
1153
1091
|
}), this.lyricLinesEl = this.processedLines.map((i) => {
|
|
1154
|
-
const s = new
|
|
1155
|
-
return s.
|
|
1092
|
+
const s = new G(this, i);
|
|
1093
|
+
return s.addMouseEventListener("click", this.onLineClickedHandler), s.addMouseEventListener("contextmenu", this.onLineClickedHandler), s;
|
|
1156
1094
|
}), this.lyricLinesEl.forEach((i, s) => {
|
|
1157
1095
|
this.element.appendChild(i.getElement()), this.lyricLinesIndexes.set(i, s), i.updateMaskImage();
|
|
1158
1096
|
}), this.interludeDots.setInterlude(void 0), this.hotLines.clear(), this.bufferedLines.clear(), this.setLinePosXSpringParams({}), this.setLinePosYSpringParams({}), this.setLineScaleSpringParams({}), this.setCurrentTime(0, !0), this.calcLayout(!0, !0);
|
|
@@ -1183,46 +1121,46 @@ class le extends EventTarget {
|
|
|
1183
1121
|
* @param reflow 是否进行重新布局(重新计算每行歌词大小)
|
|
1184
1122
|
*/
|
|
1185
1123
|
calcLayout(e = !1, t = !1) {
|
|
1186
|
-
t && (this.emUnit = parseFloat(getComputedStyle(this.element).fontSize), this.lyricLinesEl.forEach((
|
|
1187
|
-
const
|
|
1188
|
-
this.lyricLinesSize.set(
|
|
1124
|
+
t && (this.emUnit = parseFloat(getComputedStyle(this.element).fontSize), this.lyricLinesEl.forEach((d) => {
|
|
1125
|
+
const m = d.measureSize();
|
|
1126
|
+
this.lyricLinesSize.set(d, m), d.lineSize = m;
|
|
1189
1127
|
}), this.interludeDotsSize[0] = this.interludeDots.getElement().clientWidth, this.interludeDotsSize[1] = this.interludeDots.getElement().clientHeight, this.bottomLine.lineSize = this.bottomLine.measureSize());
|
|
1190
1128
|
const i = this.getCurrentInterlude();
|
|
1191
1129
|
let s = -this.scrollOffset, r = this.scrollToIndex, n = 0;
|
|
1192
1130
|
i ? (n = i[1] - i[0], n >= 5e3 && this.lyricLinesEl[i[2] + 1] && (r = i[2] + 1)) : this.interludeDots.setInterlude(void 0);
|
|
1193
|
-
const a = this.enableScale ? 0.95 : 1,
|
|
1194
|
-
(
|
|
1131
|
+
const a = this.enableScale ? 0.95 : 1, o = this.lyricLinesEl.slice(0, r).reduce(
|
|
1132
|
+
(d, m) => d + (m.getLine().isBG ? 0 : this.lyricLinesSize.get(m)?.[1] ?? 0),
|
|
1195
1133
|
0
|
|
1196
1134
|
);
|
|
1197
|
-
s -=
|
|
1198
|
-
const
|
|
1199
|
-
if (
|
|
1200
|
-
const
|
|
1135
|
+
this.scrollBoundary[0] = -o, s -= o, s += this.size[1] * this.alignPosition;
|
|
1136
|
+
const l = this.lyricLinesEl[r];
|
|
1137
|
+
if (l) {
|
|
1138
|
+
const d = this.lyricLinesSize.get(l)?.[1] ?? 0;
|
|
1201
1139
|
switch (this.alignAnchor) {
|
|
1202
1140
|
case "bottom":
|
|
1203
|
-
s -=
|
|
1141
|
+
s -= d;
|
|
1204
1142
|
break;
|
|
1205
1143
|
case "center":
|
|
1206
|
-
s -=
|
|
1144
|
+
s -= d / 2;
|
|
1207
1145
|
break;
|
|
1208
1146
|
}
|
|
1209
1147
|
}
|
|
1210
|
-
const
|
|
1211
|
-
let
|
|
1212
|
-
this.lyricLinesEl.forEach((
|
|
1213
|
-
const
|
|
1214
|
-
|
|
1215
|
-
const
|
|
1216
|
-
|
|
1148
|
+
const h = Math.max(...this.bufferedLines);
|
|
1149
|
+
let u = 0, p = 0.05, f = !1;
|
|
1150
|
+
this.lyricLinesEl.forEach((d, m) => {
|
|
1151
|
+
const T = this.bufferedLines.has(m), w = T || m >= this.scrollToIndex && m < h, E = d.getLine();
|
|
1152
|
+
E.isDuet && this.size[0] - (this.lyricLinesSize.get(d)?.[0] ?? 0), !f && n >= 5e3 && (m === this.scrollToIndex && i?.[2] === -2 || m === this.scrollToIndex + 1) && (f = !0, this.interludeDots.setTransform(this.padding, s), i && this.interludeDots.setInterlude([i[0], i[1]]), s += this.interludeDotsSize[1]);
|
|
1153
|
+
const M = this.hidePassedLines && m < (i ? i[2] + 1 : this.scrollToIndex) ? 0 : T ? 1 : 1 / 3;
|
|
1154
|
+
d.setTransform(
|
|
1217
1155
|
this.padding,
|
|
1218
1156
|
s,
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
!this.invokedByScrollEvent && this.enableBlur ?
|
|
1157
|
+
w ? 1 : a,
|
|
1158
|
+
M,
|
|
1159
|
+
!this.invokedByScrollEvent && this.enableBlur ? w ? 0 : 1 + (m < this.scrollToIndex ? Math.abs(this.scrollToIndex - m) : Math.abs(m - Math.max(this.scrollToIndex, h))) : 0,
|
|
1222
1160
|
e,
|
|
1223
|
-
|
|
1224
|
-
),
|
|
1225
|
-
}), this.bottomLine.setTransform(this.padding, s, e,
|
|
1161
|
+
u
|
|
1162
|
+
), E.isBG && w ? s += this.lyricLinesSize.get(d)?.[1] ?? 0 : E.isBG || (s += this.lyricLinesSize.get(d)?.[1] ?? 0), s >= 0 && (u += p, p /= 1.2);
|
|
1163
|
+
}), this.scrollBoundary[1] = s + this.scrollOffset - this.size[1] / 2, this.bottomLine.setTransform(this.padding, s, e, u);
|
|
1226
1164
|
}
|
|
1227
1165
|
/**
|
|
1228
1166
|
* 获取当前歌词的播放位置
|
|
@@ -1283,7 +1221,7 @@ class le extends EventTarget {
|
|
|
1283
1221
|
* @param time 当前播放进度,单位为毫秒
|
|
1284
1222
|
*/
|
|
1285
1223
|
setCurrentTime(e, t = !1) {
|
|
1286
|
-
if (this.currentTime = e, this.element.style.setProperty("--amll-player-time", `${e}`), this.isScrolled)
|
|
1224
|
+
if (this.currentTime = e, this._getIsNonDynamic() || this.element.style.setProperty("--amll-player-time", `${e}`), this.isScrolled)
|
|
1287
1225
|
return;
|
|
1288
1226
|
const i = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set();
|
|
1289
1227
|
this.hotLines.forEach((n) => {
|
|
@@ -1291,23 +1229,23 @@ class le extends EventTarget {
|
|
|
1291
1229
|
if (a) {
|
|
1292
1230
|
if (a.isBG)
|
|
1293
1231
|
return;
|
|
1294
|
-
const
|
|
1295
|
-
if (
|
|
1296
|
-
const
|
|
1297
|
-
(
|
|
1232
|
+
const o = this.processedLines[n + 1];
|
|
1233
|
+
if (o?.isBG) {
|
|
1234
|
+
const l = Math.min(a.startTime, o?.startTime), h = Math.max(a.endTime, o?.endTime);
|
|
1235
|
+
(l > e || h <= e) && (this.hotLines.delete(n), i.add(n), this.hotLines.delete(n + 1), i.add(n + 1), t && (this.lyricLinesEl[n].disable(), this.lyricLinesEl[n + 1].disable()));
|
|
1298
1236
|
} else
|
|
1299
1237
|
(a.startTime > e || a.endTime <= e) && (this.hotLines.delete(n), i.add(n), t && this.lyricLinesEl[n].disable());
|
|
1300
1238
|
} else
|
|
1301
1239
|
this.hotLines.delete(n), i.add(n), t && this.lyricLinesEl[n].disable();
|
|
1302
|
-
}), this.processedLines.forEach((n, a,
|
|
1303
|
-
!n.isBG && n.startTime <= e && n.endTime > e && (this.hotLines.has(a) || (this.hotLines.add(a), r.add(a), t && this.lyricLinesEl[a].enable(),
|
|
1240
|
+
}), this.processedLines.forEach((n, a, o) => {
|
|
1241
|
+
!n.isBG && n.startTime <= e && n.endTime > e && (this.hotLines.has(a) || (this.hotLines.add(a), r.add(a), t && this.lyricLinesEl[a].enable(), o[a + 1]?.isBG && (this.hotLines.add(a + 1), r.add(a + 1), t && this.lyricLinesEl[a + 1].enable())));
|
|
1304
1242
|
}), this.bufferedLines.forEach((n) => {
|
|
1305
1243
|
this.hotLines.has(n) || (s.add(n), t && this.lyricLinesEl[n].disable());
|
|
1306
1244
|
}), t ? (this.bufferedLines.size > 0 ? this.scrollToIndex = Math.min(...this.bufferedLines) : this.scrollToIndex = this.processedLines.findIndex(
|
|
1307
1245
|
(n) => n.startTime >= e
|
|
1308
1246
|
), this.bufferedLines.clear(), this.hotLines.forEach((n) => this.bufferedLines.add(n)), this.calcLayout(!0)) : (s.size > 0 || r.size > 0) && (s.size === 0 && r.size > 0 ? (r.forEach((n) => {
|
|
1309
1247
|
this.bufferedLines.add(n), this.lyricLinesEl[n].enable();
|
|
1310
|
-
}), this.scrollToIndex = Math.min(...this.bufferedLines), this.calcLayout()) : r.size === 0 && s.size > 0 ?
|
|
1248
|
+
}), this.scrollToIndex = Math.min(...this.bufferedLines), this.calcLayout()) : r.size === 0 && s.size > 0 ? O(s, this.bufferedLines) && (this.bufferedLines.forEach((n) => {
|
|
1311
1249
|
this.hotLines.has(n) || (this.bufferedLines.delete(n), this.lyricLinesEl[n].disable());
|
|
1312
1250
|
}), this.calcLayout()) : (r.forEach((n) => {
|
|
1313
1251
|
this.bufferedLines.add(n), this.lyricLinesEl[n].enable();
|
|
@@ -1369,8 +1307,7 @@ class le extends EventTarget {
|
|
|
1369
1307
|
}
|
|
1370
1308
|
}
|
|
1371
1309
|
export {
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
ae as ttml
|
|
1310
|
+
se as BackgroundRender,
|
|
1311
|
+
ne as LyricPlayer
|
|
1375
1312
|
};
|
|
1376
1313
|
//# sourceMappingURL=amll-core.mjs.map
|