@applemusic-like-lyrics/core 0.0.15 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/amll-core.cjs +61 -0
- package/dist/amll-core.cjs.map +1 -0
- package/dist/amll-core.js.map +1 -1
- package/dist/bg-render/base.d.ts +108 -0
- package/dist/bg-render/eplor-renderer.d.ts +54 -0
- package/dist/utils/derivative.d.ts +2 -0
- package/dist/utils/matrix.d.ts +25 -0
- package/dist/utils/resource.d.ts +4 -0
- package/dist/utils/wa-spring.d.ts +33 -0
- package/package.json +15 -6
- package/dist/amll-core.js +0 -2
- package/dist/amll-core.mjs +0 -1313
- package/dist/amll-core.mjs.map +0 -1
- package/dist/bg-render/index.d.ts +0 -13
- package/dist/bg-render/pixi-renderer.d.ts +0 -52
- package/dist/index.d.ts +0 -4
- package/dist/interfaces.d.ts +0 -53
- package/dist/lyric/ttml.d.ts +0 -2
- package/dist/lyric-player/bottom-line.d.ts +0 -26
- package/dist/lyric-player/index.d.ts +0 -235
- package/dist/lyric-player/interlude-dots.d.ts +0 -22
- package/dist/lyric-player/lyric-line.d.ts +0 -58
- package/dist/utils/eq-set.d.ts +0 -1
- package/dist/utils/spring.d.ts +0 -26
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { Disposable, HasElement } from "../interfaces";
|
|
2
|
+
export declare abstract class AbstractBaseRenderer implements Disposable, HasElement {
|
|
3
|
+
/**
|
|
4
|
+
* 修改背景的流动速度,数字越大越快,默认为 2
|
|
5
|
+
* @param speed 背景的流动速度,默认为 2
|
|
6
|
+
*/
|
|
7
|
+
abstract setFlowSpeed(speed: number): void;
|
|
8
|
+
/**
|
|
9
|
+
* 修改背景的渲染比例,默认是 0.5
|
|
10
|
+
*
|
|
11
|
+
* 一般情况下这个程度既没有明显瑕疵也不会特别吃性能
|
|
12
|
+
* @param scale 背景的渲染比例
|
|
13
|
+
*/
|
|
14
|
+
abstract setRenderScale(scale: number): void;
|
|
15
|
+
/**
|
|
16
|
+
* 是否启用静态模式,即图片在更换后就会保持静止状态并禁用更新,以节省性能
|
|
17
|
+
* @param enable 是否启用静态模式
|
|
18
|
+
*/
|
|
19
|
+
abstract setStaticMode(enable: boolean): void;
|
|
20
|
+
/**
|
|
21
|
+
* 修改背景动画帧率,默认是 30 FPS
|
|
22
|
+
*
|
|
23
|
+
* 如果设置成 0 则会停止动画
|
|
24
|
+
* @param fps 目标帧率,默认 30 FPS
|
|
25
|
+
*/
|
|
26
|
+
abstract setFPS(fps: number): void;
|
|
27
|
+
/**
|
|
28
|
+
* 暂停背景动画,画面即便是更新了图片也不会发生变化
|
|
29
|
+
*/
|
|
30
|
+
abstract pause(): void;
|
|
31
|
+
/**
|
|
32
|
+
* 恢复播放背景动画
|
|
33
|
+
*/
|
|
34
|
+
abstract resume(): void;
|
|
35
|
+
/**
|
|
36
|
+
* 设置背景专辑资源,纹理加载并设置完成后会返回
|
|
37
|
+
* @param albumSource 专辑的资源链接,可以是图片或视频链接,抑或是任意 img/video 元素,如果提供字符串链接且为视频则需要指定第二个参数
|
|
38
|
+
*/
|
|
39
|
+
abstract setAlbum(albumSource: string | HTMLImageElement | HTMLVideoElement, isVideo?: boolean): Promise<void>;
|
|
40
|
+
/**
|
|
41
|
+
* 设置低频的音量大小,范围在 80hz-120hz 之间为宜,取值范围在 [0.0-1.0] 之间
|
|
42
|
+
*
|
|
43
|
+
* 部分渲染器会根据音量大小调整背景效果(例如根据鼓点跳动)
|
|
44
|
+
*
|
|
45
|
+
* 如果无法获取到类似的数据,请传入 1.0 作为默认值,或不做任何处理(默认值即 1.0)
|
|
46
|
+
* @param volume 低频的音量大小,范围在 50hz-120hz 之间为宜,取值范围在 [0.0-1.0] 之间
|
|
47
|
+
*/
|
|
48
|
+
abstract setLowFreqVolume(volume: number): void;
|
|
49
|
+
/**
|
|
50
|
+
* 设置背景是否根据“是否有歌词”这个特征调整自身效果,例如有歌词时会变得更加活跃
|
|
51
|
+
*
|
|
52
|
+
* 部分渲染器会根据这个特征调整自身效果
|
|
53
|
+
*
|
|
54
|
+
* 如果不确定是否需要赋值或无法知晓是否包含歌词,请传入 true 或不做任何处理(默认值为 true)
|
|
55
|
+
*
|
|
56
|
+
* @param hasLyric 是否有歌词,如不确定是否需要赋值,请传入 true 或不做任何处理(默认值为 true)
|
|
57
|
+
*/
|
|
58
|
+
abstract setHasLyric(hasLyric: boolean): void;
|
|
59
|
+
abstract dispose(): void;
|
|
60
|
+
abstract getElement(): HTMLElement;
|
|
61
|
+
}
|
|
62
|
+
export declare abstract class BaseRenderer extends AbstractBaseRenderer {
|
|
63
|
+
protected canvas: HTMLCanvasElement;
|
|
64
|
+
private observer;
|
|
65
|
+
protected flowSpeed: number;
|
|
66
|
+
protected currerntRenderScale: number;
|
|
67
|
+
constructor(canvas: HTMLCanvasElement);
|
|
68
|
+
setRenderScale(scale: number): void;
|
|
69
|
+
/**
|
|
70
|
+
* 当画板元素大小发生变化时此函数会被调用
|
|
71
|
+
* 可以在此处重设和渲染器相关的尺寸设置
|
|
72
|
+
* 考虑到初始化的时候元素不一定在文档中或出于某些特殊样式状态,尺寸长宽有可能会为 0,请注意进行特判处理
|
|
73
|
+
* @param width 画板元素实际的物理像素宽度,有可能为 0
|
|
74
|
+
* @param height 画板元素实际的物理像素高度,有可能为 0
|
|
75
|
+
*/
|
|
76
|
+
protected onResize(width: number, height: number): void;
|
|
77
|
+
/**
|
|
78
|
+
* 修改背景的流动速度,数字越大越快,默认为 2
|
|
79
|
+
* @param speed 背景的流动速度,默认为 2
|
|
80
|
+
*/
|
|
81
|
+
setFlowSpeed(speed: number): void;
|
|
82
|
+
/**
|
|
83
|
+
* 是否启用静态模式,即图片在更换后就会保持静止状态并禁用更新,以节省性能
|
|
84
|
+
* @param enable 是否启用静态模式
|
|
85
|
+
*/
|
|
86
|
+
abstract setStaticMode(enable: boolean): void;
|
|
87
|
+
/**
|
|
88
|
+
* 修改背景动画帧率,默认是 30 FPS
|
|
89
|
+
*
|
|
90
|
+
* 如果设置成 0 则会停止动画
|
|
91
|
+
* @param fps 目标帧率,默认 30 FPS
|
|
92
|
+
*/
|
|
93
|
+
abstract setFPS(fps: number): void;
|
|
94
|
+
/**
|
|
95
|
+
* 暂停背景动画,画面即便是更新了图片也不会发生变化
|
|
96
|
+
*/
|
|
97
|
+
abstract pause(): void;
|
|
98
|
+
/**
|
|
99
|
+
* 恢复播放背景动画
|
|
100
|
+
*/
|
|
101
|
+
abstract resume(): void;
|
|
102
|
+
/**
|
|
103
|
+
* 设置背景专辑资源,纹理加载并设置完成后会返回
|
|
104
|
+
* @param albumSource 专辑的资源链接,可以是图片或视频链接,抑或是任意 img/video 元素,如果提供字符串链接且为视频则需要指定第二个参数
|
|
105
|
+
*/
|
|
106
|
+
abstract setAlbum(albumSource: string | HTMLImageElement | HTMLVideoElement, isVideo?: boolean): Promise<void>;
|
|
107
|
+
dispose(): void;
|
|
108
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { BaseRenderer } from "./base";
|
|
2
|
+
export declare class EplorRenderer extends BaseRenderer {
|
|
3
|
+
protected canvas: HTMLCanvasElement;
|
|
4
|
+
private hasLyric;
|
|
5
|
+
private hasLyricValue;
|
|
6
|
+
private maxFPS;
|
|
7
|
+
private lastTickTime;
|
|
8
|
+
private lastFrameTime;
|
|
9
|
+
private _lowFreqVolume;
|
|
10
|
+
private paused;
|
|
11
|
+
private staticMode;
|
|
12
|
+
private gl;
|
|
13
|
+
private reduceImageSizeCanvas;
|
|
14
|
+
private tickHandle;
|
|
15
|
+
private sprites;
|
|
16
|
+
private ampTransition;
|
|
17
|
+
private playTime;
|
|
18
|
+
private frameTime;
|
|
19
|
+
private IllIlllIlIIlllI;
|
|
20
|
+
private onTick;
|
|
21
|
+
private mainProgram;
|
|
22
|
+
private blendProgram;
|
|
23
|
+
private copyProgram;
|
|
24
|
+
private noiseProgram;
|
|
25
|
+
private static readonly rawVertexBuffer;
|
|
26
|
+
private static readonly rawIndexBuffer;
|
|
27
|
+
private vertexBuffer;
|
|
28
|
+
private indexBuffer;
|
|
29
|
+
private noiseTexture;
|
|
30
|
+
private fb;
|
|
31
|
+
private historyFrameBuffer;
|
|
32
|
+
constructor(canvas: HTMLCanvasElement);
|
|
33
|
+
private _currentSize;
|
|
34
|
+
private _targetSize;
|
|
35
|
+
private renderSize;
|
|
36
|
+
private pixelSize;
|
|
37
|
+
protected onResize(width: number, height: number): void;
|
|
38
|
+
private checkResize;
|
|
39
|
+
private requestTick;
|
|
40
|
+
private drawScreen;
|
|
41
|
+
private bindDefaultFrameBuffer;
|
|
42
|
+
private onRedraw;
|
|
43
|
+
private copyFrameBuffer;
|
|
44
|
+
private setupGL;
|
|
45
|
+
setLowFreqVolume(volume: number): void;
|
|
46
|
+
setStaticMode(enable: boolean): void;
|
|
47
|
+
setFPS(fps: number): void;
|
|
48
|
+
pause(): void;
|
|
49
|
+
resume(): void;
|
|
50
|
+
setAlbum(albumSource: string | HTMLImageElement | HTMLVideoElement, isVideo?: boolean): Promise<void>;
|
|
51
|
+
setHasLyric(hasLyric: boolean): void;
|
|
52
|
+
getElement(): HTMLElement;
|
|
53
|
+
dispose(): void;
|
|
54
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export type Matrix4 = [
|
|
2
|
+
number,
|
|
3
|
+
number,
|
|
4
|
+
number,
|
|
5
|
+
number,
|
|
6
|
+
number,
|
|
7
|
+
number,
|
|
8
|
+
number,
|
|
9
|
+
number,
|
|
10
|
+
number,
|
|
11
|
+
number,
|
|
12
|
+
number,
|
|
13
|
+
number,
|
|
14
|
+
number,
|
|
15
|
+
number,
|
|
16
|
+
number,
|
|
17
|
+
number
|
|
18
|
+
];
|
|
19
|
+
export declare function createMatrix4(): Matrix4;
|
|
20
|
+
export declare function scaleMatrix4(m: Matrix4, scale?: number, origin?: {
|
|
21
|
+
x: number;
|
|
22
|
+
y: number;
|
|
23
|
+
}): Matrix4;
|
|
24
|
+
export declare function translateMatrix4(m: Matrix4, x?: number, y?: number, z?: number): Matrix4;
|
|
25
|
+
export declare function matrix4ToCSS(m: Matrix4, fractionDigits?: number): string;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare function loadImage(imageUrl: string): Promise<HTMLImageElement>;
|
|
2
|
+
export declare function loadVideo(videoUrl: string): Promise<HTMLVideoElement>;
|
|
3
|
+
export declare function loadResourceFromUrl(url: string, isVideo?: boolean): Promise<HTMLImageElement | HTMLVideoElement>;
|
|
4
|
+
export declare function loadResourceFromElement(element: HTMLImageElement | HTMLVideoElement): Promise<HTMLImageElement | HTMLVideoElement>;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Disposable } from "..";
|
|
2
|
+
export interface SpringParams {
|
|
3
|
+
mass: number;
|
|
4
|
+
damping: number;
|
|
5
|
+
stiffness: number;
|
|
6
|
+
}
|
|
7
|
+
type CSSStyleKeys = {
|
|
8
|
+
[Style in keyof CSSStyleDeclaration]: Style extends string ? CSSStyleDeclaration[Style] extends string ? Style : never : never;
|
|
9
|
+
}[keyof CSSStyleDeclaration];
|
|
10
|
+
/**
|
|
11
|
+
* 基于 Web Animation API 的弹簧动画工具类,效果上可能逊于实时演算的版本
|
|
12
|
+
*/
|
|
13
|
+
export declare class WebAnimationSpring extends EventTarget implements Disposable {
|
|
14
|
+
private element;
|
|
15
|
+
private styleName;
|
|
16
|
+
private valueGenerator;
|
|
17
|
+
private currentPosition;
|
|
18
|
+
private currentAnimation;
|
|
19
|
+
private targetPosition;
|
|
20
|
+
private isStatic;
|
|
21
|
+
private params;
|
|
22
|
+
private currentSolver;
|
|
23
|
+
private getV;
|
|
24
|
+
constructor(element: HTMLElement, styleName: CSSStyleKeys, valueGenerator: (value: number) => string, currentPosition?: number);
|
|
25
|
+
makeStatic(): void;
|
|
26
|
+
setTargetPosition(targetPosition: number): void;
|
|
27
|
+
getCurrentPosition(): number;
|
|
28
|
+
getCurrentVelocity(): number;
|
|
29
|
+
private onStepFinished;
|
|
30
|
+
stop(): void;
|
|
31
|
+
dispose(): void;
|
|
32
|
+
}
|
|
33
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applemusic-like-lyrics/core",
|
|
3
3
|
"packageManager": "yarn@3.6.1",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.1.1",
|
|
5
5
|
"description": "AMLL 的纯 JS 核心组件框架,包括歌词显示组件和背景组件等其它可以复用的组件",
|
|
6
6
|
"repository": {
|
|
7
7
|
"url": "https://github.com/Steve-xmh/applemusic-like-lyrics.git",
|
|
@@ -10,36 +10,42 @@
|
|
|
10
10
|
},
|
|
11
11
|
"license": "GPL-3.0",
|
|
12
12
|
"files": [
|
|
13
|
-
"dist"
|
|
13
|
+
"dist/**/*.js",
|
|
14
|
+
"dist/**/*.ts",
|
|
15
|
+
"dist/**/*.cjs",
|
|
16
|
+
"dist/**/*.map"
|
|
14
17
|
],
|
|
15
18
|
"scripts": {
|
|
16
19
|
"build:docs": "typedoc --plugin typedoc-plugin-markdown --out docs src/index.ts",
|
|
17
20
|
"build": "vite build",
|
|
18
21
|
"build:dev": "vite build",
|
|
19
|
-
"fmt": "
|
|
22
|
+
"fmt": "biome format --write ./src",
|
|
20
23
|
"dev": "vite dev"
|
|
21
24
|
},
|
|
25
|
+
"type": "module",
|
|
22
26
|
"main": "./dist/amll-core.cjs",
|
|
23
|
-
"module": "./dist/amll-core.
|
|
27
|
+
"module": "./dist/amll-core.js",
|
|
24
28
|
"typings": "./dist/index.d.ts",
|
|
25
29
|
"exports": {
|
|
26
30
|
".": {
|
|
27
31
|
"types": "./dist/index.d.ts",
|
|
28
|
-
"import": "./dist/amll-core.
|
|
32
|
+
"import": "./dist/amll-core.js",
|
|
29
33
|
"require": "./dist/amll-core.cjs"
|
|
30
34
|
}
|
|
31
35
|
},
|
|
32
36
|
"devDependencies": {
|
|
33
37
|
"@applemusic-like-lyrics/lyric": "^0.0.2",
|
|
38
|
+
"@applemusic-like-lyrics/ttml": "^0.1.1",
|
|
39
|
+
"@biomejs/biome": "1.5.3",
|
|
34
40
|
"@types/stats.js": "^0.17.0",
|
|
35
41
|
"lil-gui": "^0.18.2",
|
|
36
|
-
"rome": "^12.1.3",
|
|
37
42
|
"stats.js": "^0.17.0",
|
|
38
43
|
"typedoc": "^0.25.2",
|
|
39
44
|
"typedoc-plugin-markdown": "^3.16.0",
|
|
40
45
|
"typescript": "^5.2.2",
|
|
41
46
|
"vite": "^4.4.11",
|
|
42
47
|
"vite-plugin-dts": "^3.6.0",
|
|
48
|
+
"vite-plugin-glsl": "^1.2.1",
|
|
43
49
|
"vite-plugin-top-level-await": "^1.3.1",
|
|
44
50
|
"vite-plugin-wasm": "^3.2.2"
|
|
45
51
|
},
|
|
@@ -53,5 +59,8 @@
|
|
|
53
59
|
"@pixi/sprite": "*",
|
|
54
60
|
"jss": "*",
|
|
55
61
|
"jss-preset-default": "*"
|
|
62
|
+
},
|
|
63
|
+
"dependencies": {
|
|
64
|
+
"bezier-easing": "^2.1.0"
|
|
56
65
|
}
|
|
57
66
|
}
|
package/dist/amll-core.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("@pixi/display"),z=require("@pixi/app"),y=require("@pixi/filter-blur"),P=require("@pixi/filter-color-matrix"),D=require("@pixi/core"),S=require("@pixi/sprite"),b=require("@pixi/filter-bulge-pinch"),I=require("jss"),k=require("jss-preset-default");class B extends C.Container{time=0}class F{constructor(e){this.canvas=e;const t=e.getBoundingClientRect();this.canvas.width=t.width*this.currerntRenderScale,this.canvas.height=t.height*this.currerntRenderScale,this.observer=new ResizeObserver(()=>{const i=e.getBoundingClientRect();this.canvas.width=Math.max(1,i.width),this.canvas.height=Math.max(1,i.height),this.app.renderer.resize(this.canvas.width*this.currerntRenderScale,this.canvas.height*this.currerntRenderScale),this.app.ticker.start(),this.rebuildFilters()}),this.observer.observe(e),this.app=new z.Application({view:e,resizeTo:this.canvas,powerPreference:"low-power",backgroundAlpha:0}),this.rebuildFilters(),this.app.ticker.maxFPS=30,this.app.ticker.add(this.onTick),this.app.ticker.start()}observer;app;curContainer;staticMode=!1;lastContainer=new Set;onTick=e=>{for(const t of this.lastContainer)t.alpha=Math.max(0,t.alpha-e/60),t.alpha<=0&&(this.app.stage.removeChild(t),this.lastContainer.delete(t),t.destroy(!0));if(this.curContainer){this.curContainer.alpha=Math.min(1,this.curContainer.alpha+e/60);const[t,i,s,r]=this.curContainer.children,n=Math.max(this.app.screen.width,this.app.screen.height);t.position.set(this.app.screen.width/2,this.app.screen.height/2),i.position.set(this.app.screen.width/2.5,this.app.screen.height/2.5),s.position.set(this.app.screen.width/2,this.app.screen.height/2),r.position.set(this.app.screen.width/2,this.app.screen.height/2),t.width=n*Math.sqrt(2),t.height=t.width,i.width=n*.8,i.height=i.width,s.width=n*.5,s.height=s.width,r.width=n*.25,r.height=r.width,this.curContainer.time+=e*this.flowSpeed,t.rotation+=e/1e3*this.flowSpeed,i.rotation-=e/500*this.flowSpeed,s.rotation+=e/1e3*this.flowSpeed,r.rotation-=e/750*this.flowSpeed,s.x=this.app.screen.width/2+this.app.screen.width/4*Math.cos(this.curContainer.time/1e3*.75),s.y=this.app.screen.height/2+this.app.screen.width/4*Math.cos(this.curContainer.time/1e3*.75),r.x=this.app.screen.width/2+this.app.screen.width/4*.1+Math.cos(this.curContainer.time*.006*.75),r.y=this.app.screen.height/2+this.app.screen.width/4*.1+Math.cos(this.curContainer.time*.006*.75),this.curContainer.alpha>=1&&this.lastContainer.size===0&&this.staticMode&&this.app.ticker.stop()}};flowSpeed=2;currerntRenderScale=.75;setFlowSpeed(e){this.flowSpeed=e}setRenderScale(e){this.currerntRenderScale=e;const t=this.canvas.getBoundingClientRect();this.canvas.width=Math.max(1,t.width),this.canvas.height=Math.max(1,t.height),this.app.renderer.resize(this.canvas.width*this.currerntRenderScale,this.canvas.height*this.currerntRenderScale),this.rebuildFilters()}rebuildFilters(){const e=Math.min(this.canvas.width,this.canvas.height),t=Math.max(this.canvas.width,this.canvas.height),i=new P.ColorMatrixFilter;i.saturate(1.2,!1);const s=new P.ColorMatrixFilter;s.brightness(.6,!1);const r=new P.ColorMatrixFilter;r.contrast(.3,!0),this.app.stage.filters?.forEach(n=>{n.destroy()}),this.app.stage.filters=[],this.app.stage.filters.push(new y.BlurFilter(5,1)),this.app.stage.filters.push(new y.BlurFilter(10,1)),this.app.stage.filters.push(new y.BlurFilter(20,2)),this.app.stage.filters.push(new y.BlurFilter(40,2)),this.app.stage.filters.push(new y.BlurFilter(80,2)),e>768&&this.app.stage.filters.push(new y.BlurFilter(160,4)),e>768*2&&this.app.stage.filters.push(new y.BlurFilter(320,4)),this.app.stage.filters.push(i,s,r),this.app.stage.filters.push(new y.BlurFilter(5,1)),Math.random()>.5?(this.app.stage.filters.push(new b.BulgePinchFilter({radius:(t+e)/2,strength:1,center:[.25,1]})),this.app.stage.filters.push(new b.BulgePinchFilter({radius:(t+e)/2,strength:1,center:[.75,0]}))):(this.app.stage.filters.push(new b.BulgePinchFilter({radius:(t+e)/2,strength:1,center:[.75,1]})),this.app.stage.filters.push(new b.BulgePinchFilter({radius:(t+e)/2,strength:1,center:[.25,0]})))}setStaticMode(e=!1){this.staticMode=e,this.app.ticker.start()}setFPS(e){this.app.ticker.maxFPS=e}pause(){this.app.ticker.stop(),this.app.render()}resume(){this.app.ticker.start()}async setAlbumImage(e){const t=new Image;t.src=e,t.crossOrigin="anonymous";let i=5,s;for(;!s?.baseTexture?.resource?.valid&&i>0;)try{await t.decode(),s=D.Texture.from(t,{resourceOptions:{autoLoad:!1}}),await s.baseTexture.resource.load()}catch(h){console.warn(`failed on loading album image, retrying (${i})`,e,h),s=void 0,i--}if(!s)return;const r=new B,n=new S.Sprite(s),a=new S.Sprite(s),o=new S.Sprite(s),l=new S.Sprite(s);n.anchor.set(.5,.5),a.anchor.set(.5,.5),o.anchor.set(.5,.5),l.anchor.set(.5,.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()}dispose(){this.observer.disconnect(),this.app.ticker.remove(this.onTick),this.app.destroy(!0)}}class A extends F{element;constructor(){const e=document.createElement("canvas");super(e),this.element=e,e.style.pointerEvents="none",e.style.zIndex="-1",e.style.contain="strict"}getElement(){return this.element}dispose(){super.dispose(),this.element.remove()}}const O=(c,e)=>c.size===e.size&&[...c].every(t=>e.has(t));class L{currentPosition=0;targetPosition=0;currentTime=0;params={};currentSolver;getV;getV2;queueParams;queuePosition;constructor(e=0){this.targetPosition=e,this.currentPosition=this.targetPosition,this.currentSolver=()=>this.targetPosition,this.getV=()=>0,this.getV2=()=>0}resetSolver(){const e=this.getV(this.currentTime);this.currentTime=0,this.currentSolver=q(this.currentPosition,e,this.targetPosition,0,this.params),this.getV=x(this.currentSolver),this.getV2=x(this.getV)}arrived(){return Math.abs(this.targetPosition-this.currentPosition)<.01&&this.getV(this.currentTime)<.01&&this.getV2(this.currentTime)<.01&&this.queueParams===void 0&&this.queuePosition===void 0}setPosition(e){this.targetPosition=e,this.currentPosition=e,this.currentSolver=()=>this.targetPosition,this.getV=()=>0,this.getV2=()=>0}update(e=0){this.currentTime+=e,this.currentPosition=this.currentSolver(this.currentTime),this.queueParams&&(this.queueParams.time-=e,this.queueParams.time<=0&&this.updateParams({...this.queueParams})),this.queuePosition&&(this.queuePosition.time-=e,this.queuePosition.time<=0&&this.setTargetPosition(this.queuePosition.position)),this.arrived()&&this.setPosition(this.targetPosition)}updateParams(e,t=0){t>0?this.queueParams={...this.queuePosition??{},...e,time:t}:(this.queuePosition=void 0,this.params={...this.params,...e},this.resetSolver())}setTargetPosition(e,t=0){t>0?this.queuePosition={...this.queuePosition??{},position:e,time:t}:(this.queuePosition=void 0,this.targetPosition=e,this.resetSolver())}getCurrentPosition(){return this.currentPosition}}function q(c,e,t,i=0,s){const r=s?.soft??!1,n=s?.stiffness??100,a=s?.damping??10,o=s?.mass??1,l=t-c;if(r||1<=a/(2*Math.sqrt(n*o))){const h=-Math.sqrt(n/o),u=-h*l-e;return p=>(p-=i,p<0?c:t-(l+p*u)*Math.E**(p*h))}else{const h=Math.sqrt(4*o*n-a**2),u=(a*l-2*o*e)/h,p=.5*h/o,f=-(.5*a)/o;return d=>(d-=i,d<0?c:t-(Math.cos(d*p)*l+Math.sin(d*p)*u)*Math.E**(d*f))}}function $(c){return t=>(c(t+.001)-c(t-.001))/(2*.001)}function x(c){return $(c)}class Y{constructor(e){this.lyricPlayer=e,this.element.setAttribute("class",this.lyricPlayer.style.classes.lyricLine),this.rebuildStyle()}element=document.createElement("div");left=0;top=0;delay=0;lineSize=[0,0];lineTransforms={posX:new L(0),posY:new L(0)};measureSize(){return[this.element.clientWidth,this.element.clientHeight]}lastStyle="";show(){this.rebuildStyle()}hide(){this.rebuildStyle()}rebuildStyle(){let e=`transform:translate(${this.lineTransforms.posX.getCurrentPosition().toFixed(2)}px,${this.lineTransforms.posY.getCurrentPosition().toFixed(2)}px);`;!this.lyricPlayer.getEnableSpring()&&this.isInSight&&(e+=`transition-delay:${this.delay}ms;`),e!==this.lastStyle&&(this.lastStyle=e,this.element.setAttribute("style",e))}getElement(){return this.element}setTransform(e=this.left,t=this.top,i=!1,s=0){this.left=e,this.top=t,this.delay=s*1e3|0,i||!this.lyricPlayer.getEnableSpring()?(i&&this.element.classList.add(this.lyricPlayer.style.classes.tmpDisableTransition),this.lineTransforms.posX.setPosition(e),this.lineTransforms.posY.setPosition(t),this.lyricPlayer.getEnableSpring()?this.rebuildStyle():this.show(),i&&requestAnimationFrame(()=>{this.element.classList.remove(this.lyricPlayer.style.classes.tmpDisableTransition)})):(this.lineTransforms.posX.setTargetPosition(e,s),this.lineTransforms.posY.setTargetPosition(t,s))}update(e=0){this.lyricPlayer.getEnableSpring()&&(this.lineTransforms.posX.update(e),this.lineTransforms.posY.update(e),this.isInSight?this.show():this.hide())}get isInSight(){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];return!(e>r||t>n||i<0||s<0)}dispose(){this.element.remove()}}function _(c){const t=2.5949095;return c<.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}const g=(c,e,t)=>Math.max(c,Math.min(e,t));class R{constructor(e){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)}element=document.createElement("div");dot0=document.createElement("span");dot1=document.createElement("span");dot2=document.createElement("span");left=0;top=0;scale=1;lastStyle="";currentInterlude;currentTime=0;targetBreatheDuration=1500;getElement(){return this.element}setTransform(e=this.left,t=this.top){this.left=e,this.top=t,this.update()}setInterlude(e){this.currentInterlude=e,this.currentTime=e?.[0]??0}update(e=0){this.currentTime+=e;let t="";if(t+=`transform:translate(${this.left.toFixed(2)}px, ${this.top.toFixed(2)}px)`,this.currentInterlude){const i=this.currentInterlude[1]-this.currentInterlude[0],s=this.currentTime-this.currentInterlude[0];if(s<=i){const r=i/Math.ceil(i/this.targetBreatheDuration);let n=1,a=1;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-_((750-(i-s))/750/2)),i-s<375&&(a*=g(0,(i-s)/375,1)),n=Math.max(0,n),t+=` scale(${n})`;const o=g(.25,s*3/i*.75,1),l=g(.25,(s-i/3)*3/i*.75,1),h=g(.25,(s-i/3*2)*3/i*.75,1);this.dot0.style.opacity=`${g(0,Math.max(0,a*o),1)}`,this.dot1.style.opacity=`${g(0,Math.max(0,a*l),1)}`,this.dot2.style.opacity=`${g(0,Math.max(0,a*h),1)}`}else t+=" scale(0)",this.dot0.style.opacity="0",this.dot1.style.opacity="0",this.dot2.style.opacity="0"}else t+=" scale(0)",this.dot0.style.opacity="0",this.dot1.style.opacity="0",this.dot2.style.opacity="0";t+=";",this.lastStyle!==t&&(this.element.setAttribute("style",t),this.lastStyle=t)}dispose(){this.element.remove()}}const W=/^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u;function X(c,e="rgba(0,0,0,0.85)",t="rgba(0,0,0,0.5)"){const i=2+c,s=c/i,r=(1-s)/2;return[`linear-gradient(to right,${e} ${r*100}%,${t} ${(r+s)*100}%)`,s,i]}function H(c,e){let t=[],i=[];const s=[];for(const r of c){const n=e(r);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(""))||W.test(n))&&(t.pop(),i.pop(),i.length===1?s.push(i[0]):i.length>1&&s.push(i),t=[n],i=[r])}return i.length===1?s.push(i[0]):s.push(i),s}function v(c){return c.endTime-c.startTime>=1e3&&c.word.length<=7}class G extends MouseEvent{constructor(e,t){super(t.type,t),this.line=e}}class V extends EventTarget{constructor(e,t={words:[],translatedLyric:"",romanLyric:"",startTime:0,endTime:0,isBG:!1,isDuet:!1}){super(),this.lyricPlayer=e,this.lyricLine=t,this._prevParentEl=e.getElement(),this.element.setAttribute("class",this.lyricPlayer.style.classes.lyricLine),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"));const i=this.element.children[0],s=this.element.children[1],r=this.element.children[2];i.setAttribute("class",this.lyricPlayer.style.classes.lyricMainLine),s.setAttribute("class",this.lyricPlayer.style.classes.lyricSubLine),r.setAttribute("class",this.lyricPlayer.style.classes.lyricSubLine),this.rebuildElement(),this.rebuildStyle()}element=document.createElement("div");left=0;top=0;scale=1;blur=0;delay=0;splittedWords=[];lineSize=[0,0];lineTransforms={posX:new L(0),posY:new L(0),scale:new L(1)};listenersMap=new Map;onMouseEvent=e=>{const t=new G(this,e);for(const i of this.listenersMap.get(e.type)??[])i.call(this,t);if(!this.dispatchEvent(t)||t.defaultPrevented)return e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),!1};addMouseEventListener(e,t,i){if(t){const s=this.listenersMap.get(e)??new Set;s.size===0&&this.element.addEventListener(e,this.onMouseEvent),s.add(t),this.listenersMap.set(e,s)}}removeMouseEventListener(e,t,i){if(t){const s=this.listenersMap.get(e);s&&(s.delete(t),s.size===0&&this.element.removeEventListener(e,this.onMouseEvent))}}isEnabled=!1;enable(){this.isEnabled=!0,this.element.classList.add("active");const e=this.element.children[0];this.splittedWords.forEach(t=>{t.elementAnimations.forEach(i=>{i.currentTime=0,i.playbackRate=1,i.play()})}),e.classList.add("active")}measureSize(){this._hide&&(this._prevParentEl&&this._prevParentEl.appendChild(this.element),this.element.style.display="",this.element.style.visibility="hidden");const e=[this.element.clientWidth,this.element.clientHeight];return this._hide&&(this._prevParentEl&&this.element.remove(),this.element.style.display="none",this.element.style.visibility=""),e}disable(){this.isEnabled=!1,this.element.classList.remove("active");const e=this.element.children[0];this.splittedWords.forEach(t=>{t.elementAnimations.forEach(i=>{i.id==="float-word"&&(i.playbackRate=-1,i.play())})}),e.classList.remove("active")}setLine(e){this.lyricLine=e,this.lyricLine.isBG?this.element.classList.add(this.lyricPlayer.style.classes.lyricBgLine):this.element.classList.remove(this.lyricPlayer.style.classes.lyricBgLine),this.lyricLine.isDuet?this.element.classList.add(this.lyricPlayer.style.classes.lyricDuetLine):this.element.classList.remove(this.lyricPlayer.style.classes.lyricDuetLine),this.rebuildElement(),this.rebuildStyle()}getLine(){return this.lyricLine}_hide=!0;_prevParentEl=null;lastStyle="";show(){this._hide=!1,this._prevParentEl&&(this._prevParentEl.appendChild(this.element),this._prevParentEl=null),this.rebuildStyle()}hide(){this._hide=!0,this.element.parentElement&&(this._prevParentEl=this.element.parentElement,this.element.remove()),this.rebuildStyle()}rebuildStyle(){if(this._hide){this.lastStyle!=="display:none;transform:translate(0,-10000px);"&&(this.lastStyle="display:none;transform:translate(0,-10000px);",this.element.setAttribute("style","display:none;transform:translate(0,-10000px);"));return}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)});`;!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))}rebuildElement(){const e=this.element.children[0],t=this.element.children[1],i=this.element.children[2];if(this.lyricPlayer._getIsNonDynamic()){e.innerText=this.lyricLine.words.map(r=>r.word).join(""),t.innerText=this.lyricLine.translatedLyric,i.innerText=this.lyricLine.romanLyric;return}const s=H(this.lyricLine.words,r=>r.word);e.innerHTML="",this.splittedWords=[];for(const r of s)if(r instanceof Array){const n=r.map(l=>v(l)).reduce((l,h)=>l||h,!1),a=r.reduce((l,h)=>(l.endTime=Math.max(l.endTime,h.endTime),l.startTime=Math.min(l.startTime,h.startTime),l.word+=h.word,l),{word:"",startTime:1/0,endTime:-1/0}),o=document.createElement("span");for(const l of r){const h=document.createElement("span"),u=this.initFloatAnimation(a,h);if(n){h.classList.add("emphasize");const p=[];for(const d of l.word.trim().split("")){const m=document.createElement("span");m.innerText=d,p.push(m),h.appendChild(m)}const f={...l,mainElement:h,subElements:p,elementAnimations:[u],width:0,height:0,shouldEmphasize:n};f.elementAnimations.push(...this.initEmphasizeAnimation(f)),this.splittedWords.push(f)}else h.innerText=l.word,this.splittedWords.push({...l,mainElement:h,subElements:[],elementAnimations:[u],width:0,height:0,shouldEmphasize:n});o.appendChild(h)}a.word.trimStart()!==a.word&&e.appendChild(document.createTextNode(" ")),e.appendChild(o),a.word.trimEnd()!==a.word&&e.appendChild(document.createTextNode(" "))}else if(r.word.trim().length===0)e.appendChild(document.createTextNode(" "));else{const n=v(r),a=document.createElement("span"),o={...r,mainElement:a,subElements:[],elementAnimations:[this.initFloatAnimation(r,a)],width:0,height:0,shouldEmphasize:n};if(n){a.classList.add("emphasize");const l=[];for(const h of r.word.trim().split("")){const u=document.createElement("span");u.innerText=h,l.push(u),a.appendChild(u)}o.subElements=l,o.elementAnimations.push(...this.initEmphasizeAnimation(o))}else a.innerText=r.word.trim();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)}t.innerText=this.lyricLine.translatedLyric,i.innerText=this.lyricLine.romanLyric}initFloatAnimation(e,t){const i=e.startTime-this.lyricLine.startTime,s=Math.max(1e3,e.endTime-e.startTime),r=t.animate([{transform:"translateY(0px)"},{transform:"translateY(-3%)"}],{duration:isFinite(s)?s:0,delay:isFinite(i)?i:0,id:"float-word",composite:"add",fill:"both"});return r.pause(),r}initEmphasizeAnimation(e){const t=e.startTime-this.lyricLine.startTime,i=e.endTime-e.startTime;return e.subElements.map((s,r,n)=>{const a=Math.max(1e3,e.endTime-e.startTime),o=t+i/n.length*r,l=s.animate([{offset:0,transform:"translate3d(0, 0, 0px)",filter:"drop-shadow(0 0 0 var(--amll-lyric-view-color,white))"},{offset:.5,transform:"translate3d(0, -0.02em, 20px)",filter:"drop-shadow(0 0 0.05em var(--amll-lyric-view-color,white))"},{offset:1,transform:"translate3d(0, 0, 0)",filter:"drop-shadow(0 0 0 var(--amll-lyric-view-color,white))"}],{duration:isFinite(a)?a:0,delay:isFinite(o)?o:0,id:"glow-word",iterations:1,composite:"replace",easing:"ease-in-out",fill:"both"});return l.pause(),l})}updateMaskImage(){this._hide&&(this._prevParentEl&&this._prevParentEl.appendChild(this.element),this.element.style.display="",this.element.style.visibility="hidden"),this.splittedWords.forEach(e=>{const t=e.mainElement;if(t){e.width=t.clientWidth,e.height=t.clientHeight;const i=e.height/2,[s,r,n]=X(i/e.width,"rgba(0,0,0,0.85)","rgba(0,0,0,0.25)"),a=`${n*100}% 100%`;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);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`;t.style.maskPosition=l,t.style.webkitMaskPosition=l}}),this._hide&&(this._prevParentEl&&this.element.remove(),this.element.style.display="none",this.element.style.visibility="")}getElement(){return this.element}setTransform(e=this.left,t=this.top,i=this.scale,s=1,r=0,n=!1,a=0){const o=this.isInSight,l=this.lyricPlayer.getEnableSpring();this.left=e,this.top=t,this.scale=i,this.delay=a*1e3|0;const h=this.element.children[0],u=this.element.children[1],p=this.element.children[2];if(h.style.opacity=`${s}`,u.style.opacity=`${s/2}`,p.style.opacity=`${s/2}`,n||!l){if(this.blur=Math.min(32,r),n&&this.element.classList.add(this.lyricPlayer.style.classes.tmpDisableTransition),this.lineTransforms.posX.setPosition(e),this.lineTransforms.posY.setPosition(t),this.lineTransforms.scale.setPosition(i),l)this.rebuildStyle();else{const f=this.isInSight;o||f?this.show():this.hide()}n&&requestAnimationFrame(()=>{this.element.classList.remove(this.lyricPlayer.style.classes.tmpDisableTransition)})}else this.lineTransforms.posX.setTargetPosition(e,a),this.lineTransforms.posY.setTargetPosition(t,a),this.lineTransforms.scale.setTargetPosition(i),this.blur!==Math.min(32,r)&&(this.blur=Math.min(32,r),this.element.style.filter=`blur(${Math.min(32,r)}px)`)}update(e=0){this.lyricPlayer.getEnableSpring()&&(this.lineTransforms.posX.update(e),this.lineTransforms.posY.update(e),this.lineTransforms.scale.update(e),this.isInSight?this.show():this.hide())}_getDebugTargetPos(){return`[位移: ${this.left}, ${this.top}; 缩放: ${this.scale}; 延时: ${this.delay}]`}get isInSight(){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];return!(e>r||i<0||t>n||s<0)}dispose(){this.element.remove()}}const N=I.create(k());class j extends MouseEvent{constructor(e,t,i){super(`line-${i.type}`,i),this.lineIndex=e,this.line=t}}class U extends EventTarget{element=document.createElement("div");currentTime=0;lyricLines=[];processedLines=[];lyricLinesEl=[];lyricLinesSize=new WeakMap;lyricLinesIndexes=new WeakMap;hotLines=new Set;bufferedLines=new Set;scrollToIndex=0;allowScroll=!0;scrolledHandler=0;isScrolled=!1;invokedByScrollEvent=!1;scrollOffset=0;hidePassedLines=!1;resizeObserver=new ResizeObserver(e=>{const t=e[0].contentRect;this.size[0]=t.width,this.size[1]=t.height;const i=getComputedStyle(e[0].target),s=this.element.clientWidth-parseFloat(i.paddingLeft)-parseFloat(i.paddingRight),r=this.element.clientHeight-parseFloat(i.paddingTop)-parseFloat(i.paddingBottom);this.innerSize[0]=s,this.innerSize[1]=r,this.rebuildStyle(),this.calcLayout(!0,!0),this.lyricLinesEl.forEach(n=>n.updateMaskImage())});posXSpringParams={mass:1,damping:10,stiffness:100};posYSpringParams={mass:1,damping:15,stiffness:100};scaleSpringParams={mass:1,damping:20,stiffness:100};emUnit=Math.max(Math.min(innerHeight*.05,innerWidth*.1),12);padding=this.emUnit;enableBlur=!0;enableScale=!0;interludeDots;interludeDotsSize=[0,0];bottomLine;supportPlusLighter=CSS.supports("mix-blend-mode","plus-lighter");supportMaskImage=CSS.supports("mask-image","none");disableSpring=!1;alignAnchor="center";alignPosition=.5;isNonDynamic=!1;scrollBoundary=[0,0];size=[0,0];innerSize=[0,0];onLineClickedHandler=e=>{const t=new j(this.lyricLinesIndexes.get(e.line)??-1,e.line,e);this.dispatchEvent(t)||(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation())};_getIsNonDynamic(){return this.isNonDynamic}setEnableSpring(e=!0){this.disableSpring=!e,e?this.element.classList.remove(this.style.classes.disableSpring):this.element.classList.add(this.style.classes.disableSpring),this.calcLayout(!0)}getEnableSpring(){return!this.disableSpring}setEnableScale(e=!0){this.enableScale=e,this.calcLayout()}getEnableScale(){return this.enableScale}style=N.createStyleSheet({lyricPlayer:{userSelect:"none",fontSize:"var(--amll-lyric-player-font-size,max(min(5vh, 10vw), 12px))",padding:"1em",margin:"-1em",width:"100%",height:"100%",overflow:"hidden",boxSizing:"content-box",maxWidth:"100%",maxHeight:"100%",zIndex:1,color:"var(--amll-lyric-view-color,white)",mixBlendMode:"plus-lighter",contain:"strict","&:hover":{"& $lyricLine":{filter:"unset !important"}}},lyricLine:{position:"absolute",transformOrigin:"left",width:"var(--amll-lyric-player-width,100%)",height:"fit-content",padding:"2vh 1.05em",margin:"0 -1em",contain:"content",willChange:"filter,transform,opacity",transition:"filter 0.25s, background-color 0.25s, box-shadow 0.25s",boxSizing:"content-box",borderRadius:"8px","&:hover":{backgroundColor:"var(--amll-lyric-view-hover-bg-color,#fff1)",boxShadow:"0 0 0 8px var(--amll-lyric-view-hover-bg-color,#fff1)"},"&:active":{boxShadow:"0 0 0 4px var(--amll-lyric-view-hover-bg-color,#fff1)"}},"@media (max-width: 1024px)":{lyricLine:{padding:"1vh 1em"}},lyricDuetLine:{textAlign:"right",transformOrigin:"right"},lyricBgLine:{opacity:0,fontSize:"max(50%, 10px)",transition:"opacity 0.25s","&.active":{transition:"opacity 0.25s 0.25s",opacity:.75}},lyricMainLine:{transition:"opacity 0.3s 0.25s",willChange:"opacity",margin:"-1em",padding:"1em","& span":{display:"inline-block"},"& > span":{whiteSpace:"pre-wrap",maxLines:"1","&.emphasize":{transformStyle:"preserve-3d",perspective:"50vw",padding:"1em",margin:"-1em"}}},lyricSubLine:{fontSize:"max(0.5em, 10px)",transition:"opacity 0.3s 0.25s",opacity:.5},disableSpring:{"& > *":{transition:"filter 0.25s, transform 0.5s, background-color 0.25s, box-shadow 0.25s"}},interludeDots:{height:"clamp(0.5em,1vh,3em)",transformOrigin:"center",width:"fit-content",padding:"2.5% 0",position:"absolute",display:"flex",gap:"0.25em",left:"1em","& > *":{height:"clamp(0.5em,1vh,3em)",display:"inline-block",borderRadius:"50%",aspectRatio:"1 / 1",backgroundColor:"var(--amll-lyric-view-color,white)",marginRight:"4px"},"&.duet":{right:"1em",transformOrigin:"center"}},"@supports (mix-blend-mode: plus-lighter)":{lyricSubLine:{opacity:.3}},tmpDisableTransition:{transition:"none !important"}});onPageShow=()=>{this.calcLayout(!0,!0)};constructor(){super(),this.interludeDots=new R(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);let e=0,t="none",i=0,s=0,r=0,n=Symbol("amll-scroll"),a=0,o=0;this.element.addEventListener("touchstart",l=>{this.beginScrollHandler()&&(l.preventDefault(),e=this.scrollOffset,i=l.touches[0].screenY,a=i,s=Date.now(),r=0)}),this.element.addEventListener("touchmove",l=>{if(this.beginScrollHandler()){l.preventDefault();const h=l.touches[0].screenY,u=h-i,p=h-a,f=p>0?"down":p<0?"up":"none";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)}}),this.element.addEventListener("touchend",l=>{if(this.beginScrollHandler()){l.preventDefault(),i=0;const h=Date.now();if(h-o>100)return this.endScrollHandler();const u=h-s;r=(this.scrollOffset-e)/u*1e3;let p=0;const f=Symbol("amll-scroll");n=f;const d=m=>{p||=m,n===f&&this.beginScrollHandler()&&(this.scrollOffset+=r*(m-p)/1e3,r*=.99,this.limitScrollOffset(),this.calcLayout(!0),Math.abs(r)>1&&!this.scrollBoundary.includes(this.scrollOffset)&&requestAnimationFrame(d),this.endScrollHandler(),p=m)};requestAnimationFrame(d),this.endScrollHandler()}}),this.element.addEventListener("wheel",l=>{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())})}beginScrollHandler(){const e=this.allowScroll;return e&&(this.isScrolled=!0,this.invokedByScrollEvent=!0,clearTimeout(this.scrolledHandler),this.scrolledHandler=setTimeout(()=>{this.isScrolled=!1,this.scrollOffset=0},5e3)),e}endScrollHandler(){this.invokedByScrollEvent=!1}limitScrollOffset(){this.scrollOffset=Math.max(Math.min(this.scrollBoundary[1],this.scrollOffset),this.scrollBoundary[0])}getCurrentInterlude(){if(this.bufferedLines.size>0)return;const e=this.currentTime+20,t=this.scrollToIndex;if(t===0){if(this.processedLines[0]?.startTime&&this.processedLines[0].startTime>e)return[e,this.processedLines[0].startTime,-2,this.processedLines[0].isDuet]}else if(this.processedLines[t]?.endTime&&this.processedLines[t+1]?.startTime&&this.processedLines[t+1].startTime>e&&this.processedLines[t].endTime<e)return[Math.max(this.processedLines[t].endTime,e),this.processedLines[t+1].startTime,t,this.processedLines[t+1].isDuet]}rebuildStyle(){let e="";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)}setHidePassedLines(e){this.hidePassedLines=e,this.calcLayout()}setEnableBlur(e){this.enableBlur!==e&&(this.enableBlur=e,this.calcLayout())}setLyricLines(e){this.lyricLines=e;const t=750;this.processedLines=e.filter(i=>i.words.reduce((s,r)=>s+r.word.trim().length,0)>0).map((i,s,r)=>{if(i.isBG)return{...i};if(s===0)return{...i,startTime:Math.max(i.startTime-t,0)};{const n=r[s-1],a=r[s-2];if(n?.isBG&&a){if(a.endTime<i.startTime)return{...i,startTime:Math.max(a.endTime,i.startTime-t)||i.startTime}}else if(n?.endTime&&n.endTime<i.startTime)return{...i,startTime:Math.max(n?.endTime,i.startTime-t)||i.startTime};return{...i}}}),this.isNonDynamic=!0;for(const i of this.processedLines)if(i.words.length>1){this.isNonDynamic=!1;break}this.processedLines.forEach((i,s,r)=>{const n=r[s+1],a=i.words[i.words.length-1];a&&v(a)&&(n?n.startTime>i.endTime&&(i.endTime=Math.min(i.endTime+1500,n.startTime)):i.endTime=i.endTime+1500)}),this.processedLines.forEach((i,s,r)=>{if(i.isBG)return;const n=r[s+1];n?.isBG&&(n.startTime=Math.min(n.startTime,i.startTime))}),this.lyricLinesEl.forEach(i=>{i.removeMouseEventListener("click",this.onLineClickedHandler),i.removeMouseEventListener("contextmenu",this.onLineClickedHandler),i.dispose()}),this.lyricLinesEl=this.processedLines.map(i=>{const s=new V(this,i);return s.addMouseEventListener("click",this.onLineClickedHandler),s.addMouseEventListener("contextmenu",this.onLineClickedHandler),s}),this.lyricLinesEl.forEach((i,s)=>{this.element.appendChild(i.getElement()),this.lyricLinesIndexes.set(i,s),i.updateMaskImage()}),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)}resetScroll(){this.isScrolled=!1,this.scrollOffset=0,this.invokedByScrollEvent=!1,clearTimeout(this.scrolledHandler),this.scrolledHandler=0}calcLayout(e=!1,t=!1){t&&(this.emUnit=parseFloat(getComputedStyle(this.element).fontSize),this.lyricLinesEl.forEach(d=>{const m=d.measureSize();this.lyricLinesSize.set(d,m),d.lineSize=m}),this.interludeDotsSize[0]=this.interludeDots.getElement().clientWidth,this.interludeDotsSize[1]=this.interludeDots.getElement().clientHeight,this.bottomLine.lineSize=this.bottomLine.measureSize());const i=this.getCurrentInterlude();let s=-this.scrollOffset,r=this.scrollToIndex,n=0;i?(n=i[1]-i[0],n>=5e3&&this.lyricLinesEl[i[2]+1]&&(r=i[2]+1)):this.interludeDots.setInterlude(void 0);const a=this.enableScale?.95:1,o=this.lyricLinesEl.slice(0,r).reduce((d,m)=>d+(m.getLine().isBG?0:this.lyricLinesSize.get(m)?.[1]??0),0);this.scrollBoundary[0]=-o,s-=o,s+=this.size[1]*this.alignPosition;const l=this.lyricLinesEl[r];if(l){const d=this.lyricLinesSize.get(l)?.[1]??0;switch(this.alignAnchor){case"bottom":s-=d;break;case"center":s-=d/2;break}}const h=Math.max(...this.bufferedLines);let u=0,p=.05,f=!1;this.lyricLinesEl.forEach((d,m)=>{const T=this.bufferedLines.has(m),w=T||m>=this.scrollToIndex&&m<h,E=d.getLine();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]);const M=this.hidePassedLines&&m<(i?i[2]+1:this.scrollToIndex)?0:T?1:1/3;d.setTransform(this.padding,s,w?1:a,M,!this.invokedByScrollEvent&&this.enableBlur?w?0:1+(m<this.scrollToIndex?Math.abs(this.scrollToIndex-m):Math.abs(m-Math.max(this.scrollToIndex,h))):0,e,u),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)}),this.scrollBoundary[1]=s+this.scrollOffset-this.size[1]/2,this.bottomLine.setTransform(this.padding,s,e,u)}getCurrentTime(){return this.currentTime}getLyricLines(){return this.lyricLines}getElement(){return this.element}getBottomLineElement(){return this.bottomLine.getElement()}setAlignAnchor(e){this.alignAnchor=e}setAlignPosition(e){this.alignPosition=e}setCurrentTime(e,t=!1){if(this.currentTime=e,this._getIsNonDynamic()||this.element.style.setProperty("--amll-player-time",`${e}`),this.isScrolled)return;const i=new Set,s=new Set,r=new Set;this.hotLines.forEach(n=>{const a=this.processedLines[n];if(a){if(a.isBG)return;const o=this.processedLines[n+1];if(o?.isBG){const l=Math.min(a.startTime,o?.startTime),h=Math.max(a.endTime,o?.endTime);(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()))}else(a.startTime>e||a.endTime<=e)&&(this.hotLines.delete(n),i.add(n),t&&this.lyricLinesEl[n].disable())}else this.hotLines.delete(n),i.add(n),t&&this.lyricLinesEl[n].disable()}),this.processedLines.forEach((n,a,o)=>{!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())))}),this.bufferedLines.forEach(n=>{this.hotLines.has(n)||(s.add(n),t&&this.lyricLinesEl[n].disable())}),t?(this.bufferedLines.size>0?this.scrollToIndex=Math.min(...this.bufferedLines):this.scrollToIndex=this.processedLines.findIndex(n=>n.startTime>=e),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=>{this.bufferedLines.add(n),this.lyricLinesEl[n].enable()}),this.scrollToIndex=Math.min(...this.bufferedLines),this.calcLayout()):r.size===0&&s.size>0?O(s,this.bufferedLines)&&(this.bufferedLines.forEach(n=>{this.hotLines.has(n)||(this.bufferedLines.delete(n),this.lyricLinesEl[n].disable())}),this.calcLayout()):(r.forEach(n=>{this.bufferedLines.add(n),this.lyricLinesEl[n].enable()}),s.forEach(n=>{this.bufferedLines.delete(n),this.lyricLinesEl[n].disable()}),this.bufferedLines.size>0&&(this.scrollToIndex=Math.min(...this.bufferedLines)),this.calcLayout()))}update(e=0){const t=e/1e3;this.interludeDots.update(e),this.bottomLine.update(t),this.lyricLinesEl.forEach(i=>i.update(t))}setLinePosXSpringParams(e){this.posXSpringParams={...this.posXSpringParams,...e},this.bottomLine.lineTransforms.posX.updateParams(this.posXSpringParams),this.lyricLinesEl.forEach(t=>t.lineTransforms.posX.updateParams(this.posXSpringParams))}setLinePosYSpringParams(e){this.posYSpringParams={...this.posYSpringParams,...e},this.bottomLine.lineTransforms.posY.updateParams(this.posYSpringParams),this.lyricLinesEl.forEach(t=>t.lineTransforms.posY.updateParams(this.posYSpringParams))}setLineScaleSpringParams(e){this.scaleSpringParams={...this.scaleSpringParams,...e},this.lyricLinesEl.forEach(t=>t.lineTransforms.scale.updateParams(this.scaleSpringParams))}dispose(){this.element.remove(),this.resizeObserver.disconnect(),this.style.detach(),this.lyricLinesEl.forEach(e=>e.dispose()),window.removeEventListener("pageshow",this.onPageShow),this.bottomLine.dispose(),this.interludeDots.dispose()}}exports.BackgroundRender=A;exports.LyricPlayer=U;
|
|
2
|
-
//# sourceMappingURL=amll-core.js.map
|