@applemusic-like-lyrics/core 0.0.12 → 0.0.14
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 +13 -0
- package/dist/amll-core.js +1 -1
- package/dist/amll-core.js.map +1 -1
- package/dist/amll-core.mjs +178 -277
- package/dist/amll-core.mjs.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/lyric-player/index.d.ts +2 -1
- package/dist/lyric-player/lyric-line.d.ts +2 -0
- package/dist/utils/spring.d.ts +1 -0
- package/package.json +1 -4
package/dist/amll-core.mjs
CHANGED
|
@@ -1,124 +1,16 @@
|
|
|
1
1
|
import { Container as C } from "@pixi/display";
|
|
2
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 I } 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 k } from "jss";
|
|
9
9
|
import D from "jss-preset-default";
|
|
10
|
-
|
|
11
|
-
function T(h) {
|
|
12
|
-
const e = k.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 B(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: B
|
|
117
|
-
}, Symbol.toStringTag, { value: "Module" }));
|
|
118
|
-
class O extends C {
|
|
10
|
+
class A extends C {
|
|
119
11
|
time = 0;
|
|
120
12
|
}
|
|
121
|
-
class
|
|
13
|
+
class B {
|
|
122
14
|
constructor(e) {
|
|
123
15
|
this.canvas = e;
|
|
124
16
|
const t = e.getBoundingClientRect();
|
|
@@ -133,7 +25,7 @@ class $ {
|
|
|
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 $ {
|
|
|
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,7 +142,7 @@ class $ {
|
|
|
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 = I.from(t, {
|
|
254
146
|
resourceOptions: {
|
|
255
147
|
autoLoad: !1
|
|
256
148
|
}
|
|
@@ -264,18 +156,18 @@ class $ {
|
|
|
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 A(), n = new S(s), a = new S(s), h = new S(s), l = new S(s);
|
|
160
|
+
n.anchor.set(0.5, 0.5), a.anchor.set(0.5, 0.5), h.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, h.rotation = Math.random() * Math.PI * 2, l.rotation = Math.random() * Math.PI * 2, r.addChild(n, a, h, 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 B {
|
|
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,34 +176,35 @@ class oe extends $ {
|
|
|
284
176
|
super.dispose(), this.element.remove();
|
|
285
177
|
}
|
|
286
178
|
}
|
|
287
|
-
const
|
|
288
|
-
class
|
|
179
|
+
const $ = (o, e) => o.size === e.size && [...o].every((t) => e.has(t));
|
|
180
|
+
class L {
|
|
289
181
|
currentPosition = 0;
|
|
290
182
|
targetPosition = 0;
|
|
291
183
|
currentTime = 0;
|
|
292
184
|
params = {};
|
|
293
185
|
currentSolver;
|
|
294
186
|
getV;
|
|
187
|
+
getV2;
|
|
295
188
|
queueParams;
|
|
296
189
|
queuePosition;
|
|
297
190
|
constructor(e = 0) {
|
|
298
|
-
this.targetPosition = e, this.currentPosition = this.targetPosition, this.currentSolver = () => this.targetPosition, this.getV = () => 0;
|
|
191
|
+
this.targetPosition = e, this.currentPosition = this.targetPosition, this.currentSolver = () => this.targetPosition, this.getV = () => 0, this.getV2 = () => 0;
|
|
299
192
|
}
|
|
300
193
|
resetSolver() {
|
|
301
194
|
const e = this.getV(this.currentTime);
|
|
302
|
-
this.currentTime = 0, this.currentSolver =
|
|
195
|
+
this.currentTime = 0, this.currentSolver = F(
|
|
303
196
|
this.currentPosition,
|
|
304
197
|
e,
|
|
305
198
|
this.targetPosition,
|
|
306
199
|
0,
|
|
307
200
|
this.params
|
|
308
|
-
), this.getV =
|
|
201
|
+
), this.getV = x(this.currentSolver), this.getV2 = x(this.getV);
|
|
309
202
|
}
|
|
310
203
|
arrived() {
|
|
311
|
-
return Math.abs(this.targetPosition - this.currentPosition) < 0.01 && this.getV(this.currentTime) < 0.01 && this.queueParams === void 0 && this.queuePosition === void 0;
|
|
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;
|
|
312
205
|
}
|
|
313
206
|
setPosition(e) {
|
|
314
|
-
this.targetPosition = e, this.currentPosition = e, this.currentSolver = () => this.targetPosition, this.getV = () => 0;
|
|
207
|
+
this.targetPosition = e, this.currentPosition = e, this.currentSolver = () => this.targetPosition, this.getV = () => 0, this.getV2 = () => 0;
|
|
315
208
|
}
|
|
316
209
|
update(e = 0) {
|
|
317
210
|
this.currentTime += e, this.currentPosition = this.currentSolver(this.currentTime), this.queueParams && (this.queueParams.time -= e, this.queueParams.time <= 0 && this.updateParams({
|
|
@@ -320,15 +213,17 @@ class w {
|
|
|
320
213
|
}
|
|
321
214
|
updateParams(e, t = 0) {
|
|
322
215
|
t > 0 ? this.queueParams = {
|
|
216
|
+
...this.queuePosition ?? {},
|
|
323
217
|
...e,
|
|
324
218
|
time: t
|
|
325
|
-
} : (this.params = {
|
|
219
|
+
} : (this.queuePosition = void 0, this.params = {
|
|
326
220
|
...this.params,
|
|
327
221
|
...e
|
|
328
222
|
}, this.resetSolver());
|
|
329
223
|
}
|
|
330
224
|
setTargetPosition(e, t = 0) {
|
|
331
225
|
t > 0 ? this.queuePosition = {
|
|
226
|
+
...this.queuePosition ?? {},
|
|
332
227
|
position: e,
|
|
333
228
|
time: t
|
|
334
229
|
} : (this.queuePosition = void 0, this.targetPosition = e, this.resetSolver());
|
|
@@ -337,25 +232,25 @@ class w {
|
|
|
337
232
|
return this.currentPosition;
|
|
338
233
|
}
|
|
339
234
|
}
|
|
340
|
-
function
|
|
341
|
-
const r = s?.soft ?? !1, n = s?.stiffness ?? 100, a = s?.damping ?? 10,
|
|
342
|
-
if (r || 1 <= a / (2 * Math.sqrt(n *
|
|
343
|
-
const c = -Math.sqrt(n /
|
|
344
|
-
return (u) => (u -= i, u < 0 ?
|
|
235
|
+
function F(o, e, t, i = 0, s) {
|
|
236
|
+
const r = s?.soft ?? !1, n = s?.stiffness ?? 100, a = s?.damping ?? 10, h = s?.mass ?? 1, l = t - o;
|
|
237
|
+
if (r || 1 <= a / (2 * Math.sqrt(n * h))) {
|
|
238
|
+
const c = -Math.sqrt(n / h), p = -c * l - e;
|
|
239
|
+
return (u) => (u -= i, u < 0 ? o : t - (l + u * p) * Math.E ** (u * c));
|
|
345
240
|
} else {
|
|
346
241
|
const c = Math.sqrt(
|
|
347
|
-
4 *
|
|
348
|
-
),
|
|
349
|
-
return (
|
|
242
|
+
4 * h * n - a ** 2
|
|
243
|
+
), p = (a * l - 2 * h * e) / c, u = 0.5 * c / h, f = -(0.5 * a) / h;
|
|
244
|
+
return (d) => (d -= i, d < 0 ? o : t - (Math.cos(d * u) * l + Math.sin(d * u) * p) * Math.E ** (d * f));
|
|
350
245
|
}
|
|
351
246
|
}
|
|
352
|
-
function
|
|
353
|
-
return (t) => (
|
|
247
|
+
function _(o) {
|
|
248
|
+
return (t) => (o(t + 1e-3) - o(t - 1e-3)) / (2 * 1e-3);
|
|
354
249
|
}
|
|
355
|
-
function
|
|
356
|
-
return
|
|
250
|
+
function x(o) {
|
|
251
|
+
return _(o);
|
|
357
252
|
}
|
|
358
|
-
class
|
|
253
|
+
class O {
|
|
359
254
|
constructor(e) {
|
|
360
255
|
this.lyricPlayer = e, this.element.setAttribute(
|
|
361
256
|
"class",
|
|
@@ -369,8 +264,8 @@ class q {
|
|
|
369
264
|
// 由 LyricPlayer 来设置
|
|
370
265
|
lineSize = [0, 0];
|
|
371
266
|
lineTransforms = {
|
|
372
|
-
posX: new
|
|
373
|
-
posY: new
|
|
267
|
+
posX: new L(0),
|
|
268
|
+
posY: new L(0)
|
|
374
269
|
};
|
|
375
270
|
measureSize() {
|
|
376
271
|
return [
|
|
@@ -386,7 +281,7 @@ class q {
|
|
|
386
281
|
this.rebuildStyle();
|
|
387
282
|
}
|
|
388
283
|
rebuildStyle() {
|
|
389
|
-
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);`;
|
|
390
285
|
!this.lyricPlayer.getEnableSpring() && this.isInSight && (e += `transition-delay:${this.delay}ms;`), e !== this.lastStyle && (this.lastStyle = e, this.element.setAttribute("style", e));
|
|
391
286
|
}
|
|
392
287
|
getElement() {
|
|
@@ -412,12 +307,12 @@ class q {
|
|
|
412
307
|
this.element.remove();
|
|
413
308
|
}
|
|
414
309
|
}
|
|
415
|
-
function
|
|
310
|
+
function W(o) {
|
|
416
311
|
const t = 2.5949095;
|
|
417
|
-
return
|
|
312
|
+
return o < 0.5 ? Math.pow(2 * o, 2) * ((t + 1) * 2 * o - t) / 2 : (Math.pow(2 * o - 2, 2) * ((t + 1) * (o * 2 - 2) + t) + 2) / 2;
|
|
418
313
|
}
|
|
419
|
-
const
|
|
420
|
-
class
|
|
314
|
+
const g = (o, e, t) => Math.max(o, Math.min(e, t));
|
|
315
|
+
class q {
|
|
421
316
|
constructor(e) {
|
|
422
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);
|
|
423
318
|
}
|
|
@@ -444,40 +339,42 @@ class Y {
|
|
|
444
339
|
update(e = 0) {
|
|
445
340
|
this.currentTime += e;
|
|
446
341
|
let t = "";
|
|
447
|
-
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) {
|
|
448
345
|
const i = this.currentInterlude[1] - this.currentInterlude[0], s = this.currentTime - this.currentInterlude[0];
|
|
449
346
|
if (s <= i) {
|
|
450
347
|
const r = i / Math.ceil(i / this.targetBreatheDuration);
|
|
451
348
|
let n = 1, a = 1;
|
|
452
|
-
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 -
|
|
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 - W(
|
|
453
350
|
(750 - (i - s)) / 750 / 2
|
|
454
|
-
)), i - s < 375 && (a *=
|
|
351
|
+
)), i - s < 375 && (a *= g(
|
|
455
352
|
0,
|
|
456
353
|
(i - s) / 375,
|
|
457
354
|
1
|
|
458
355
|
)), n = Math.max(0, n), t += ` scale(${n})`;
|
|
459
|
-
const
|
|
356
|
+
const h = g(
|
|
460
357
|
0.25,
|
|
461
358
|
s * 3 / i * 0.75,
|
|
462
359
|
1
|
|
463
|
-
),
|
|
360
|
+
), l = g(
|
|
464
361
|
0.25,
|
|
465
362
|
(s - i / 3) * 3 / i * 0.75,
|
|
466
363
|
1
|
|
467
|
-
), c =
|
|
364
|
+
), c = g(
|
|
468
365
|
0.25,
|
|
469
366
|
(s - i / 3 * 2) * 3 / i * 0.75,
|
|
470
367
|
1
|
|
471
368
|
);
|
|
472
|
-
this.dot0.style.opacity = `${
|
|
369
|
+
this.dot0.style.opacity = `${g(
|
|
473
370
|
0,
|
|
474
|
-
Math.max(0, a *
|
|
371
|
+
Math.max(0, a * h),
|
|
475
372
|
1
|
|
476
|
-
)}`, this.dot1.style.opacity = `${
|
|
373
|
+
)}`, this.dot1.style.opacity = `${g(
|
|
477
374
|
0,
|
|
478
|
-
Math.max(0, a *
|
|
375
|
+
Math.max(0, a * l),
|
|
479
376
|
1
|
|
480
|
-
)}`, this.dot2.style.opacity = `${
|
|
377
|
+
)}`, this.dot2.style.opacity = `${g(
|
|
481
378
|
0,
|
|
482
379
|
Math.max(0, a * c),
|
|
483
380
|
1
|
|
@@ -492,33 +389,33 @@ class Y {
|
|
|
492
389
|
this.element.remove();
|
|
493
390
|
}
|
|
494
391
|
}
|
|
495
|
-
const
|
|
496
|
-
function
|
|
497
|
-
const i = 2 +
|
|
392
|
+
const R = /^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u;
|
|
393
|
+
function Y(o, e = "rgba(0,0,0,1)", t = "rgba(0,0,0,0.5)") {
|
|
394
|
+
const i = 2 + o, s = o / i, r = (1 - s) / 2;
|
|
498
395
|
return [
|
|
499
396
|
`linear-gradient(to right,${e} ${r * 100}%,${t} ${(r + s) * 100}%)`,
|
|
500
397
|
s,
|
|
501
398
|
i
|
|
502
399
|
];
|
|
503
400
|
}
|
|
504
|
-
function
|
|
401
|
+
function X(o, e) {
|
|
505
402
|
let t = [], i = [];
|
|
506
403
|
const s = [];
|
|
507
|
-
for (const r of
|
|
404
|
+
for (const r of o) {
|
|
508
405
|
const n = e(r);
|
|
509
|
-
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]);
|
|
510
407
|
}
|
|
511
408
|
return i.length === 1 ? s.push(i[0]) : s.push(i), s;
|
|
512
409
|
}
|
|
513
|
-
function
|
|
514
|
-
return
|
|
410
|
+
function v(o) {
|
|
411
|
+
return o.endTime - o.startTime >= 1e3 && o.word.length <= 7;
|
|
515
412
|
}
|
|
516
|
-
class
|
|
413
|
+
class G extends MouseEvent {
|
|
517
414
|
constructor(e, t) {
|
|
518
415
|
super(t.type, t), this.line = e;
|
|
519
416
|
}
|
|
520
417
|
}
|
|
521
|
-
class
|
|
418
|
+
class V extends EventTarget {
|
|
522
419
|
// rome-ignore lint/correctness/noUnreachableSuper: <explanation>
|
|
523
420
|
constructor(e, t = {
|
|
524
421
|
words: [],
|
|
@@ -529,7 +426,7 @@ class j extends EventTarget {
|
|
|
529
426
|
isBG: !1,
|
|
530
427
|
isDuet: !1
|
|
531
428
|
}) {
|
|
532
|
-
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(
|
|
533
430
|
"class",
|
|
534
431
|
this.lyricPlayer.style.classes.lyricLine
|
|
535
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"));
|
|
@@ -546,13 +443,13 @@ class j extends EventTarget {
|
|
|
546
443
|
// 由 LyricPlayer 来设置
|
|
547
444
|
lineSize = [0, 0];
|
|
548
445
|
lineTransforms = {
|
|
549
|
-
posX: new
|
|
550
|
-
posY: new
|
|
551
|
-
scale: new
|
|
446
|
+
posX: new L(0),
|
|
447
|
+
posY: new L(0),
|
|
448
|
+
scale: new L(1)
|
|
552
449
|
};
|
|
553
450
|
listenersMap = /* @__PURE__ */ new Map();
|
|
554
451
|
onMouseEvent = (e) => {
|
|
555
|
-
if (!this.dispatchEvent(new
|
|
452
|
+
if (!this.dispatchEvent(new G(this, e)))
|
|
556
453
|
return e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), !1;
|
|
557
454
|
};
|
|
558
455
|
addEventListener(e, t, i) {
|
|
@@ -578,12 +475,12 @@ class j extends EventTarget {
|
|
|
578
475
|
}), e.classList.add("active");
|
|
579
476
|
}
|
|
580
477
|
measureSize() {
|
|
581
|
-
this._hide && (this.element.style.display = "", this.element.style.visibility = "hidden");
|
|
478
|
+
this._hide && (this._prevParentEl && this._prevParentEl.appendChild(this.element), this.element.style.display = "", this.element.style.visibility = "hidden");
|
|
582
479
|
const e = [
|
|
583
480
|
this.element.clientWidth,
|
|
584
481
|
this.element.clientHeight
|
|
585
482
|
];
|
|
586
|
-
return this._hide && (this.element.style.display = "none", this.element.style.visibility = ""), e;
|
|
483
|
+
return this._hide && (this._prevParentEl && this.element.remove(), this.element.style.display = "none", this.element.style.visibility = ""), e;
|
|
587
484
|
}
|
|
588
485
|
disable() {
|
|
589
486
|
this.isEnabled = !1, this.element.classList.remove("active");
|
|
@@ -603,12 +500,13 @@ class j extends EventTarget {
|
|
|
603
500
|
return this.lyricLine;
|
|
604
501
|
}
|
|
605
502
|
_hide = !0;
|
|
503
|
+
_prevParentEl = null;
|
|
606
504
|
lastStyle = "";
|
|
607
505
|
show() {
|
|
608
|
-
this._hide = !1, this.rebuildStyle();
|
|
506
|
+
this._hide = !1, this._prevParentEl && (this._prevParentEl.appendChild(this.element), this._prevParentEl = null), this.rebuildStyle();
|
|
609
507
|
}
|
|
610
508
|
hide() {
|
|
611
|
-
this._hide = !0, this.rebuildStyle();
|
|
509
|
+
this._hide = !0, this.element.parentElement && (this._prevParentEl = this.element.parentElement, this.element.remove()), this.rebuildStyle();
|
|
612
510
|
}
|
|
613
511
|
rebuildStyle() {
|
|
614
512
|
if (this._hide) {
|
|
@@ -618,7 +516,7 @@ class j extends EventTarget {
|
|
|
618
516
|
));
|
|
619
517
|
return;
|
|
620
518
|
}
|
|
621
|
-
let e = `transform:translate(${this.lineTransforms.posX.getCurrentPosition()}px,${this.lineTransforms.posY.getCurrentPosition()}px) scale(${this.lineTransforms.scale.getCurrentPosition()});`;
|
|
519
|
+
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)});`;
|
|
622
520
|
!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));
|
|
623
521
|
}
|
|
624
522
|
rebuildElement() {
|
|
@@ -627,30 +525,31 @@ class j extends EventTarget {
|
|
|
627
525
|
e.innerText = this.lyricLine.words.map((r) => r.word).join(""), t.innerText = this.lyricLine.translatedLyric, i.innerText = this.lyricLine.romanLyric;
|
|
628
526
|
return;
|
|
629
527
|
}
|
|
630
|
-
const s =
|
|
528
|
+
const s = X(this.lyricLine.words, (r) => r.word);
|
|
631
529
|
e.innerHTML = "", this.splittedWords = [];
|
|
632
530
|
for (const r of s)
|
|
633
531
|
if (r instanceof Array) {
|
|
634
|
-
const n = r.map((
|
|
635
|
-
(
|
|
532
|
+
const n = r.map((l) => v(l)).reduce((l, c) => l || c, !1), a = r.reduce(
|
|
533
|
+
(l, c) => (l.endTime = Math.max(l.endTime, c.endTime), l.startTime = Math.min(l.startTime, c.startTime), l.word += c.word, l),
|
|
636
534
|
{ word: "", startTime: 1 / 0, endTime: -1 / 0 }
|
|
637
|
-
),
|
|
638
|
-
for (const
|
|
639
|
-
const c = document.createElement("span"),
|
|
535
|
+
), h = document.createElement("span");
|
|
536
|
+
for (const l of r) {
|
|
537
|
+
const c = document.createElement("span"), p = this.initFloatAnimation(
|
|
640
538
|
a,
|
|
641
539
|
c
|
|
642
540
|
);
|
|
643
541
|
if (n) {
|
|
542
|
+
c.classList.add("emphasize");
|
|
644
543
|
const u = [];
|
|
645
|
-
for (const
|
|
646
|
-
const
|
|
647
|
-
|
|
544
|
+
for (const d of l.word.trim().split("")) {
|
|
545
|
+
const m = document.createElement("span");
|
|
546
|
+
m.innerText = d, u.push(m), c.appendChild(m);
|
|
648
547
|
}
|
|
649
548
|
const f = {
|
|
650
|
-
...
|
|
549
|
+
...l,
|
|
651
550
|
mainElement: c,
|
|
652
551
|
subElements: u,
|
|
653
|
-
elementAnimations: [
|
|
552
|
+
elementAnimations: [p],
|
|
654
553
|
width: 0,
|
|
655
554
|
height: 0,
|
|
656
555
|
shouldEmphasize: n
|
|
@@ -659,22 +558,22 @@ class j extends EventTarget {
|
|
|
659
558
|
...this.initEmphasizeAnimation(f)
|
|
660
559
|
), this.splittedWords.push(f);
|
|
661
560
|
} else
|
|
662
|
-
c.innerText =
|
|
663
|
-
...
|
|
561
|
+
c.innerText = l.word, this.splittedWords.push({
|
|
562
|
+
...l,
|
|
664
563
|
mainElement: c,
|
|
665
564
|
subElements: [],
|
|
666
|
-
elementAnimations: [
|
|
565
|
+
elementAnimations: [p],
|
|
667
566
|
width: 0,
|
|
668
567
|
height: 0,
|
|
669
568
|
shouldEmphasize: n
|
|
670
569
|
});
|
|
671
|
-
|
|
570
|
+
h.appendChild(c);
|
|
672
571
|
}
|
|
673
|
-
a.word.trimStart() !== a.word && e.appendChild(document.createTextNode(" ")), e.appendChild(
|
|
572
|
+
a.word.trimStart() !== a.word && e.appendChild(document.createTextNode(" ")), e.appendChild(h), a.word.trimEnd() !== a.word && e.appendChild(document.createTextNode(" "));
|
|
674
573
|
} else if (r.word.trim().length === 0)
|
|
675
574
|
e.appendChild(document.createTextNode(" "));
|
|
676
575
|
else {
|
|
677
|
-
const n =
|
|
576
|
+
const n = v(r), a = document.createElement("span"), h = {
|
|
678
577
|
...r,
|
|
679
578
|
mainElement: a,
|
|
680
579
|
subElements: [],
|
|
@@ -684,17 +583,18 @@ class j extends EventTarget {
|
|
|
684
583
|
shouldEmphasize: n
|
|
685
584
|
};
|
|
686
585
|
if (n) {
|
|
687
|
-
|
|
586
|
+
a.classList.add("emphasize");
|
|
587
|
+
const l = [];
|
|
688
588
|
for (const c of r.word.trim().split("")) {
|
|
689
|
-
const
|
|
690
|
-
|
|
589
|
+
const p = document.createElement("span");
|
|
590
|
+
p.innerText = c, l.push(p), a.appendChild(p);
|
|
691
591
|
}
|
|
692
|
-
|
|
693
|
-
...this.initEmphasizeAnimation(
|
|
592
|
+
h.subElements = l, h.elementAnimations.push(
|
|
593
|
+
...this.initEmphasizeAnimation(h)
|
|
694
594
|
);
|
|
695
595
|
} else
|
|
696
596
|
a.innerText = r.word.trim();
|
|
697
|
-
r.word.trimStart() !== r.word && e.appendChild(document.createTextNode(" ")), e.appendChild(a), r.word.trimEnd() !== r.word && e.appendChild(document.createTextNode(" ")), this.splittedWords.push(
|
|
597
|
+
r.word.trimStart() !== r.word && e.appendChild(document.createTextNode(" ")), e.appendChild(a), r.word.trimEnd() !== r.word && e.appendChild(document.createTextNode(" ")), this.splittedWords.push(h);
|
|
698
598
|
}
|
|
699
599
|
t.innerText = this.lyricLine.translatedLyric, i.innerText = this.lyricLine.romanLyric;
|
|
700
600
|
}
|
|
@@ -721,7 +621,7 @@ class j extends EventTarget {
|
|
|
721
621
|
initEmphasizeAnimation(e) {
|
|
722
622
|
const t = e.startTime - this.lyricLine.startTime, i = e.endTime - e.startTime;
|
|
723
623
|
return e.subElements.map((s, r, n) => {
|
|
724
|
-
const a = Math.max(1e3, e.endTime - e.startTime),
|
|
624
|
+
const a = Math.max(1e3, e.endTime - e.startTime), h = t + i / n.length * r, l = s.animate(
|
|
725
625
|
[
|
|
726
626
|
{
|
|
727
627
|
offset: 0,
|
|
@@ -730,7 +630,7 @@ class j extends EventTarget {
|
|
|
730
630
|
},
|
|
731
631
|
{
|
|
732
632
|
offset: 0.5,
|
|
733
|
-
transform: "translate3d(0, -
|
|
633
|
+
transform: "translate3d(0, -0.02em, 20px)",
|
|
734
634
|
filter: "drop-shadow(0 0 0.05em var(--amll-lyric-view-color,white))"
|
|
735
635
|
},
|
|
736
636
|
{
|
|
@@ -741,47 +641,48 @@ class j extends EventTarget {
|
|
|
741
641
|
],
|
|
742
642
|
{
|
|
743
643
|
duration: isFinite(a) ? a : 0,
|
|
744
|
-
delay: isFinite(
|
|
644
|
+
delay: isFinite(h) ? h : 0,
|
|
745
645
|
id: "glow-word",
|
|
746
646
|
iterations: 1,
|
|
747
647
|
composite: "replace",
|
|
648
|
+
easing: "ease-in-out",
|
|
748
649
|
fill: "both"
|
|
749
650
|
}
|
|
750
651
|
);
|
|
751
|
-
return
|
|
652
|
+
return l.pause(), l;
|
|
752
653
|
});
|
|
753
654
|
}
|
|
754
655
|
updateMaskImage() {
|
|
755
|
-
this._hide && (this.element.style.display = "", this.element.style.visibility = "hidden"), this.splittedWords.forEach((e) => {
|
|
656
|
+
this._hide && (this._prevParentEl && this._prevParentEl.appendChild(this.element), this.element.style.display = "", this.element.style.visibility = "hidden"), this.splittedWords.forEach((e) => {
|
|
756
657
|
const t = e.mainElement;
|
|
757
658
|
if (t) {
|
|
758
659
|
e.width = t.clientWidth, e.height = t.clientHeight;
|
|
759
|
-
const i = e.height / 2, [s, r, n] =
|
|
660
|
+
const i = e.height / 2, [s, r, n] = Y(
|
|
760
661
|
i / e.width,
|
|
761
662
|
"rgba(0,0,0,1)",
|
|
762
663
|
"rgba(0,0,0,0.25)"
|
|
763
664
|
), a = `${n * 100}% 100%`;
|
|
764
665
|
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);
|
|
765
|
-
const
|
|
766
|
-
t.style.maskPosition =
|
|
666
|
+
const h = e.width + i, l = `clamp(${-h}px,calc(${-h}px + (var(--amll-player-time) - ${e.startTime})*${h / Math.abs(e.endTime - e.startTime)}px),0px) 0px, left top`;
|
|
667
|
+
t.style.maskPosition = l, t.style.webkitMaskPosition = l;
|
|
767
668
|
}
|
|
768
|
-
}), this._hide && (this.element.style.display = "none", this.element.style.visibility = "");
|
|
669
|
+
}), this._hide && (this._prevParentEl && this.element.remove(), this.element.style.display = "none", this.element.style.visibility = "");
|
|
769
670
|
}
|
|
770
671
|
getElement() {
|
|
771
672
|
return this.element;
|
|
772
673
|
}
|
|
773
674
|
setTransform(e = this.left, t = this.top, i = this.scale, s = 1, r = 0, n = !1, a = 0) {
|
|
774
|
-
const
|
|
675
|
+
const h = this.isInSight, l = this.lyricPlayer.getEnableSpring();
|
|
775
676
|
this.left = e, this.top = t, this.scale = i, this.delay = a * 1e3 | 0;
|
|
776
|
-
const c = this.element.children[0],
|
|
777
|
-
if (c.style.opacity = `${s}`,
|
|
677
|
+
const c = this.element.children[0], p = this.element.children[1], u = this.element.children[2];
|
|
678
|
+
if (c.style.opacity = `${s}`, p.style.opacity = `${s / 2}`, u.style.opacity = `${s / 2}`, n || !l) {
|
|
778
679
|
if (this.blur = Math.min(32, r), n && this.element.classList.add(
|
|
779
680
|
this.lyricPlayer.style.classes.tmpDisableTransition
|
|
780
|
-
), this.lineTransforms.posX.setPosition(e), this.lineTransforms.posY.setPosition(t), this.lineTransforms.scale.setPosition(i),
|
|
681
|
+
), this.lineTransforms.posX.setPosition(e), this.lineTransforms.posY.setPosition(t), this.lineTransforms.scale.setPosition(i), l)
|
|
781
682
|
this.rebuildStyle();
|
|
782
683
|
else {
|
|
783
684
|
const f = this.isInSight;
|
|
784
|
-
|
|
685
|
+
h || f ? this.show() : this.hide();
|
|
785
686
|
}
|
|
786
687
|
n && requestAnimationFrame(() => {
|
|
787
688
|
this.element.classList.remove(
|
|
@@ -794,6 +695,9 @@ class j extends EventTarget {
|
|
|
794
695
|
update(e = 0) {
|
|
795
696
|
this.lyricPlayer.getEnableSpring() && (this.lineTransforms.posX.update(e), this.lineTransforms.posY.update(e), this.lineTransforms.scale.update(e), this.isInSight ? this.show() : this.hide());
|
|
796
697
|
}
|
|
698
|
+
_getDebugTargetPos() {
|
|
699
|
+
return `[位移: ${this.left}, ${this.top}; 缩放: ${this.scale}; 延时: ${this.delay}]`;
|
|
700
|
+
}
|
|
797
701
|
get isInSight() {
|
|
798
702
|
const e = this.lineTransforms.posX.getCurrentPosition(), t = this.lineTransforms.posY.getCurrentPosition(), i = e + this.lineSize[0], s = t + this.lineSize[1], r = this.lyricPlayer.size[0], n = this.lyricPlayer.size[1];
|
|
799
703
|
return !(e > r || i < 0 || t > n || s < 0);
|
|
@@ -802,13 +706,13 @@ class j extends EventTarget {
|
|
|
802
706
|
this.element.remove();
|
|
803
707
|
}
|
|
804
708
|
}
|
|
805
|
-
const
|
|
806
|
-
class
|
|
709
|
+
const N = k(D());
|
|
710
|
+
class H extends MouseEvent {
|
|
807
711
|
constructor(e, t, i) {
|
|
808
712
|
super(`line-${i.type}`, i), this.lineIndex = e, this.line = t;
|
|
809
713
|
}
|
|
810
714
|
}
|
|
811
|
-
class
|
|
715
|
+
class ne extends EventTarget {
|
|
812
716
|
element = document.createElement("div");
|
|
813
717
|
currentTime = 0;
|
|
814
718
|
lyricLines = [];
|
|
@@ -823,7 +727,6 @@ class le extends EventTarget {
|
|
|
823
727
|
scrolledHandler = 0;
|
|
824
728
|
isScrolled = !1;
|
|
825
729
|
invokedByScrollEvent = !1;
|
|
826
|
-
padding = 32;
|
|
827
730
|
scrollOffset = 0;
|
|
828
731
|
hidePassedLines = !1;
|
|
829
732
|
resizeObserver = new ResizeObserver((e) => {
|
|
@@ -847,6 +750,8 @@ class le extends EventTarget {
|
|
|
847
750
|
damping: 20,
|
|
848
751
|
stiffness: 100
|
|
849
752
|
};
|
|
753
|
+
emUnit = Math.max(Math.min(innerHeight * 0.05, innerWidth * 0.1), 12);
|
|
754
|
+
padding = this.emUnit;
|
|
850
755
|
enableBlur = !0;
|
|
851
756
|
enableScale = !0;
|
|
852
757
|
interludeDots;
|
|
@@ -861,7 +766,7 @@ class le extends EventTarget {
|
|
|
861
766
|
size = [0, 0];
|
|
862
767
|
innerSize = [0, 0];
|
|
863
768
|
onLineClickedHandler = (e) => {
|
|
864
|
-
const t = new
|
|
769
|
+
const t = new H(
|
|
865
770
|
this.lyricLinesIndexes.get(e.line) ?? -1,
|
|
866
771
|
e.line,
|
|
867
772
|
e
|
|
@@ -906,7 +811,7 @@ class le extends EventTarget {
|
|
|
906
811
|
getEnableScale() {
|
|
907
812
|
return this.enableScale;
|
|
908
813
|
}
|
|
909
|
-
style =
|
|
814
|
+
style = N.createStyleSheet({
|
|
910
815
|
lyricPlayer: {
|
|
911
816
|
userSelect: "none",
|
|
912
817
|
fontSize: "var(--amll-lyric-player-font-size,max(min(5vh, 10vw), 12px))",
|
|
@@ -915,6 +820,7 @@ class le extends EventTarget {
|
|
|
915
820
|
width: "100%",
|
|
916
821
|
height: "100%",
|
|
917
822
|
overflow: "hidden",
|
|
823
|
+
boxSizing: "content-box",
|
|
918
824
|
maxWidth: "100%",
|
|
919
825
|
maxHeight: "100%",
|
|
920
826
|
zIndex: 1,
|
|
@@ -930,19 +836,15 @@ class le extends EventTarget {
|
|
|
930
836
|
lyricLine: {
|
|
931
837
|
position: "absolute",
|
|
932
838
|
transformOrigin: "left",
|
|
933
|
-
maxWidth: "var(--amll-lyric-player-width,100%)",
|
|
934
|
-
minWidth: "var(--amll-lyric-player-width,100%)",
|
|
935
839
|
width: "var(--amll-lyric-player-width,100%)",
|
|
936
|
-
|
|
840
|
+
height: "fit-content",
|
|
841
|
+
padding: "2vh 1.05em",
|
|
842
|
+
margin: "0 -1em",
|
|
937
843
|
contain: "content",
|
|
938
844
|
willChange: "filter,transform,opacity",
|
|
939
845
|
transition: "filter 0.25s, background-color 0.25s, box-shadow 0.25s",
|
|
940
|
-
boxSizing: "
|
|
846
|
+
boxSizing: "content-box",
|
|
941
847
|
borderRadius: "8px",
|
|
942
|
-
"& span": {
|
|
943
|
-
padding: "0.05em",
|
|
944
|
-
margin: "-0.05em"
|
|
945
|
-
},
|
|
946
848
|
"&:hover": {
|
|
947
849
|
backgroundColor: "var(--amll-lyric-view-hover-bg-color,#fff1)",
|
|
948
850
|
boxShadow: "0 0 0 8px var(--amll-lyric-view-hover-bg-color,#fff1)"
|
|
@@ -953,7 +855,7 @@ class le extends EventTarget {
|
|
|
953
855
|
},
|
|
954
856
|
"@media (max-width: 1024px)": {
|
|
955
857
|
lyricLine: {
|
|
956
|
-
padding: "1vh
|
|
858
|
+
padding: "1vh 1em"
|
|
957
859
|
}
|
|
958
860
|
},
|
|
959
861
|
lyricDuetLine: {
|
|
@@ -1034,7 +936,7 @@ class le extends EventTarget {
|
|
|
1034
936
|
this.calcLayout(!0, !0);
|
|
1035
937
|
};
|
|
1036
938
|
constructor() {
|
|
1037
|
-
super(), this.interludeDots = new
|
|
939
|
+
super(), this.interludeDots = new q(this), this.bottomLine = new O(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), this.element.addEventListener("wheel", (e) => {
|
|
1038
940
|
this.allowScroll && (this.isScrolled = !0, clearTimeout(this.scrolledHandler), this.scrolledHandler = setTimeout(() => {
|
|
1039
941
|
this.isScrolled = !1, this.scrollOffset = 0;
|
|
1040
942
|
}, 5e3), this.invokedByScrollEvent = !0, e.deltaMode === e.DOM_DELTA_PIXEL ? (this.scrollOffset += e.deltaY, this.calcLayout(!0)) : (this.scrollOffset += e.deltaY * 50, this.calcLayout(!1)), this.invokedByScrollEvent = !1);
|
|
@@ -1075,7 +977,7 @@ class le extends EventTarget {
|
|
|
1075
977
|
*/
|
|
1076
978
|
rebuildStyle() {
|
|
1077
979
|
let e = "";
|
|
1078
|
-
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;",
|
|
980
|
+
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);
|
|
1079
981
|
}
|
|
1080
982
|
/**
|
|
1081
983
|
* 设置是否隐藏已经播放过的歌词行,默认不隐藏
|
|
@@ -1135,7 +1037,7 @@ class le extends EventTarget {
|
|
|
1135
1037
|
}
|
|
1136
1038
|
this.processedLines.forEach((i, s, r) => {
|
|
1137
1039
|
const n = r[s + 1], a = i.words[i.words.length - 1];
|
|
1138
|
-
a &&
|
|
1040
|
+
a && v(a) && (n ? n.startTime > i.endTime && (i.endTime = Math.min(i.endTime + 1500, n.startTime)) : i.endTime = i.endTime + 1500);
|
|
1139
1041
|
}), this.processedLines.forEach((i, s, r) => {
|
|
1140
1042
|
if (i.isBG)
|
|
1141
1043
|
return;
|
|
@@ -1144,7 +1046,7 @@ class le extends EventTarget {
|
|
|
1144
1046
|
}), this.lyricLinesEl.forEach((i) => {
|
|
1145
1047
|
i.removeEventListener("click", this.onLineClickedHandler), i.removeEventListener("contextmenu", this.onLineClickedHandler), i.dispose();
|
|
1146
1048
|
}), this.lyricLinesEl = this.processedLines.map((i) => {
|
|
1147
|
-
const s = new
|
|
1049
|
+
const s = new V(this, i);
|
|
1148
1050
|
return s.addEventListener("click", this.onLineClickedHandler), s.addEventListener("contextmenu", this.onLineClickedHandler), s;
|
|
1149
1051
|
}), this.lyricLinesEl.forEach((i, s) => {
|
|
1150
1052
|
this.element.appendChild(i.getElement()), this.lyricLinesIndexes.set(i, s), i.updateMaskImage();
|
|
@@ -1176,46 +1078,46 @@ class le extends EventTarget {
|
|
|
1176
1078
|
* @param reflow 是否进行重新布局(重新计算每行歌词大小)
|
|
1177
1079
|
*/
|
|
1178
1080
|
calcLayout(e = !1, t = !1) {
|
|
1179
|
-
t && (this.lyricLinesEl.forEach((
|
|
1180
|
-
const
|
|
1181
|
-
this.lyricLinesSize.set(
|
|
1081
|
+
t && (this.emUnit = parseFloat(getComputedStyle(this.element).fontSize), this.lyricLinesEl.forEach((d) => {
|
|
1082
|
+
const m = d.measureSize();
|
|
1083
|
+
this.lyricLinesSize.set(d, m), d.lineSize = m;
|
|
1182
1084
|
}), this.interludeDotsSize[0] = this.interludeDots.getElement().clientWidth, this.interludeDotsSize[1] = this.interludeDots.getElement().clientHeight, this.bottomLine.lineSize = this.bottomLine.measureSize());
|
|
1183
1085
|
const i = this.getCurrentInterlude();
|
|
1184
1086
|
let s = -this.scrollOffset, r = this.scrollToIndex, n = 0;
|
|
1185
1087
|
i ? (n = i[1] - i[0], n >= 5e3 && this.lyricLinesEl[i[2] + 1] && (r = i[2] + 1)) : this.interludeDots.setInterlude(void 0);
|
|
1186
|
-
const a = this.enableScale ? 0.95 : 1,
|
|
1187
|
-
(
|
|
1088
|
+
const a = this.enableScale ? 0.95 : 1, h = this.lyricLinesEl.slice(0, r).reduce(
|
|
1089
|
+
(d, m) => d + (m.getLine().isBG ? 0 : this.lyricLinesSize.get(m)?.[1] ?? 0),
|
|
1188
1090
|
0
|
|
1189
1091
|
);
|
|
1190
|
-
s -=
|
|
1191
|
-
const
|
|
1192
|
-
if (
|
|
1193
|
-
const
|
|
1092
|
+
s -= h, s += this.size[1] * this.alignPosition;
|
|
1093
|
+
const l = this.lyricLinesEl[r];
|
|
1094
|
+
if (l) {
|
|
1095
|
+
const d = this.lyricLinesSize.get(l)?.[1] ?? 0;
|
|
1194
1096
|
switch (this.alignAnchor) {
|
|
1195
1097
|
case "bottom":
|
|
1196
|
-
s -=
|
|
1098
|
+
s -= d;
|
|
1197
1099
|
break;
|
|
1198
1100
|
case "center":
|
|
1199
|
-
s -=
|
|
1101
|
+
s -= d / 2;
|
|
1200
1102
|
break;
|
|
1201
1103
|
}
|
|
1202
1104
|
}
|
|
1203
1105
|
const c = Math.max(...this.bufferedLines);
|
|
1204
|
-
let
|
|
1205
|
-
this.lyricLinesEl.forEach((
|
|
1206
|
-
const
|
|
1207
|
-
|
|
1208
|
-
const M = this.hidePassedLines &&
|
|
1209
|
-
|
|
1106
|
+
let p = 0, u = 0.05, f = !1;
|
|
1107
|
+
this.lyricLinesEl.forEach((d, m) => {
|
|
1108
|
+
const T = this.bufferedLines.has(m), w = T || m >= this.scrollToIndex && m < c, E = d.getLine();
|
|
1109
|
+
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]);
|
|
1110
|
+
const M = this.hidePassedLines && m < (i ? i[2] + 1 : this.scrollToIndex) ? 0 : T ? 1 : 1 / 3;
|
|
1111
|
+
d.setTransform(
|
|
1210
1112
|
this.padding,
|
|
1211
1113
|
s,
|
|
1212
|
-
|
|
1114
|
+
w ? 1 : a,
|
|
1213
1115
|
M,
|
|
1214
|
-
!this.invokedByScrollEvent && this.enableBlur ?
|
|
1116
|
+
!this.invokedByScrollEvent && this.enableBlur ? w ? 0 : 1 + (m < this.scrollToIndex ? Math.abs(this.scrollToIndex - m) : Math.abs(m - Math.max(this.scrollToIndex, c))) : 0,
|
|
1215
1117
|
e,
|
|
1216
|
-
|
|
1217
|
-
),
|
|
1218
|
-
}), this.bottomLine.setTransform(this.padding, s, e,
|
|
1118
|
+
p
|
|
1119
|
+
), E.isBG && w ? s += this.lyricLinesSize.get(d)?.[1] ?? 0 : E.isBG || (s += this.lyricLinesSize.get(d)?.[1] ?? 0), s >= 0 && (p += u, u /= 1.2);
|
|
1120
|
+
}), this.bottomLine.setTransform(this.padding, s, e, p);
|
|
1219
1121
|
}
|
|
1220
1122
|
/**
|
|
1221
1123
|
* 获取当前歌词的播放位置
|
|
@@ -1276,7 +1178,7 @@ class le extends EventTarget {
|
|
|
1276
1178
|
* @param time 当前播放进度,单位为毫秒
|
|
1277
1179
|
*/
|
|
1278
1180
|
setCurrentTime(e, t = !1) {
|
|
1279
|
-
if (this.currentTime = e, this.element.style.setProperty("--amll-player-time", `${e}`), this.isScrolled)
|
|
1181
|
+
if (this.currentTime = e, this._getIsNonDynamic() || this.element.style.setProperty("--amll-player-time", `${e}`), this.isScrolled)
|
|
1280
1182
|
return;
|
|
1281
1183
|
const i = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set();
|
|
1282
1184
|
this.hotLines.forEach((n) => {
|
|
@@ -1284,29 +1186,29 @@ class le extends EventTarget {
|
|
|
1284
1186
|
if (a) {
|
|
1285
1187
|
if (a.isBG)
|
|
1286
1188
|
return;
|
|
1287
|
-
const
|
|
1288
|
-
if (
|
|
1289
|
-
const
|
|
1290
|
-
(
|
|
1189
|
+
const h = this.processedLines[n + 1];
|
|
1190
|
+
if (h?.isBG) {
|
|
1191
|
+
const l = Math.min(a.startTime, h?.startTime), c = Math.max(a.endTime, h?.endTime);
|
|
1192
|
+
(l > e || c <= 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()));
|
|
1291
1193
|
} else
|
|
1292
1194
|
(a.startTime > e || a.endTime <= e) && (this.hotLines.delete(n), i.add(n), t && this.lyricLinesEl[n].disable());
|
|
1293
1195
|
} else
|
|
1294
1196
|
this.hotLines.delete(n), i.add(n), t && this.lyricLinesEl[n].disable();
|
|
1295
|
-
}), this.processedLines.forEach((n, a,
|
|
1296
|
-
!n.isBG && n.startTime <= e && n.endTime > e && (this.hotLines.has(a) || (this.hotLines.add(a), r.add(a), t && this.lyricLinesEl[a].enable(),
|
|
1197
|
+
}), this.processedLines.forEach((n, a, h) => {
|
|
1198
|
+
!n.isBG && n.startTime <= e && n.endTime > e && (this.hotLines.has(a) || (this.hotLines.add(a), r.add(a), t && this.lyricLinesEl[a].enable(), h[a + 1]?.isBG && (this.hotLines.add(a + 1), r.add(a + 1), t && this.lyricLinesEl[a + 1].enable())));
|
|
1297
1199
|
}), this.bufferedLines.forEach((n) => {
|
|
1298
1200
|
this.hotLines.has(n) || (s.add(n), t && this.lyricLinesEl[n].disable());
|
|
1299
1201
|
}), t ? (this.bufferedLines.size > 0 ? this.scrollToIndex = Math.min(...this.bufferedLines) : this.scrollToIndex = this.processedLines.findIndex(
|
|
1300
1202
|
(n) => n.startTime >= e
|
|
1301
1203
|
), 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) => {
|
|
1302
1204
|
this.bufferedLines.add(n), this.lyricLinesEl[n].enable();
|
|
1303
|
-
}), this.scrollToIndex = Math.min(...this.bufferedLines)) : r.size === 0 && s.size > 0 ?
|
|
1205
|
+
}), this.scrollToIndex = Math.min(...this.bufferedLines), this.calcLayout()) : r.size === 0 && s.size > 0 ? $(s, this.bufferedLines) && (this.bufferedLines.forEach((n) => {
|
|
1304
1206
|
this.hotLines.has(n) || (this.bufferedLines.delete(n), this.lyricLinesEl[n].disable());
|
|
1305
|
-
}) : (r.forEach((n) => {
|
|
1207
|
+
}), this.calcLayout()) : (r.forEach((n) => {
|
|
1306
1208
|
this.bufferedLines.add(n), this.lyricLinesEl[n].enable();
|
|
1307
1209
|
}), s.forEach((n) => {
|
|
1308
1210
|
this.bufferedLines.delete(n), this.lyricLinesEl[n].disable();
|
|
1309
|
-
}), this.bufferedLines.size > 0 && (this.scrollToIndex = Math.min(...this.bufferedLines))
|
|
1211
|
+
}), this.bufferedLines.size > 0 && (this.scrollToIndex = Math.min(...this.bufferedLines)), this.calcLayout()));
|
|
1310
1212
|
}
|
|
1311
1213
|
/**
|
|
1312
1214
|
* 更新动画,这个函数应该被逐帧调用或者在以下情况下调用一次:
|
|
@@ -1362,8 +1264,7 @@ class le extends EventTarget {
|
|
|
1362
1264
|
}
|
|
1363
1265
|
}
|
|
1364
1266
|
export {
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
ae as ttml
|
|
1267
|
+
se as BackgroundRender,
|
|
1268
|
+
ne as LyricPlayer
|
|
1368
1269
|
};
|
|
1369
1270
|
//# sourceMappingURL=amll-core.mjs.map
|