@applemusic-like-lyrics/core 0.0.15 → 0.1.0

package/dist/bg-render/base.d.ts

@@ -0,0 +1,108 @@
+import { Disposable, HasElement } from "../interfaces";
+export declare abstract class AbstractBaseRenderer implements Disposable, HasElement {
+    /**
+     * 修改背景的流动速度，数字越大越快，默认为 2
+     * @param speed 背景的流动速度，默认为 2
+     */
+    abstract setFlowSpeed(speed: number): void;
+    /**
+     * 修改背景的渲染比例，默认是 0.5
+     *
+     * 一般情况下这个程度既没有明显瑕疵也不会特别吃性能
+     * @param scale 背景的渲染比例
+     */
+    abstract setRenderScale(scale: number): void;
+    /**
+     * 是否启用静态模式，即图片在更换后就会保持静止状态并禁用更新，以节省性能
+     * @param enable 是否启用静态模式
+     */
+    abstract setStaticMode(enable: boolean): void;
+    /**
+     * 修改背景动画帧率，默认是 30 FPS
+     *
+     * 如果设置成 0 则会停止动画
+     * @param fps 目标帧率，默认 30 FPS
+     */
+    abstract setFPS(fps: number): void;
+    /**
+     * 暂停背景动画，画面即便是更新了图片也不会发生变化
+     */
+    abstract pause(): void;
+    /**
+     * 恢复播放背景动画
+     */
+    abstract resume(): void;
+    /**
+     * 设置背景专辑图片，图片材质加载并设置完成后会返回
+     * @param albumUrl 图片的目标链接
+     */
+    abstract setAlbumImage(albumUrl: string): Promise<void>;
+    /**
+     * 设置低频的音量大小，范围在 80hz-120hz 之间为宜，取值范围在 [0.0-1.0] 之间
+     *
+     * 部分渲染器会根据音量大小调整背景效果（例如根据鼓点跳动）
+     *
+     * 如果无法获取到类似的数据，请传入 1.0 作为默认值，或不做任何处理（默认值即 1.0）
+     * @param volume 低频的音量大小，范围在 50hz-120hz 之间为宜，取值范围在 [0.0-1.0] 之间
+     */
+    abstract setLowFreqVolume(volume: number): void;
+    /**
+     * 设置背景是否根据“是否有歌词”这个特征调整自身效果，例如有歌词时会变得更加活跃
+     *
+     * 部分渲染器会根据这个特征调整自身效果
+     *
+     * 如果不确定是否需要赋值或无法知晓是否包含歌词，请传入 true 或不做任何处理（默认值为 true）
+     *
+     * @param hasLyric 是否有歌词，如不确定是否需要赋值，请传入 true 或不做任何处理（默认值为 true）
+     */
+    abstract setHasLyric(hasLyric: boolean): void;
+    abstract dispose(): void;
+    abstract getElement(): HTMLElement;
+}
+export declare abstract class BaseRenderer extends AbstractBaseRenderer {
+    protected canvas: HTMLCanvasElement;
+    private observer;
+    protected flowSpeed: number;
+    protected currerntRenderScale: number;
+    constructor(canvas: HTMLCanvasElement);
+    setRenderScale(scale: number): void;
+    /**
+     * 当画板元素大小发生变化时此函数会被调用
+     * 可以在此处重设和渲染器相关的尺寸设置
+     * 考虑到初始化的时候元素不一定在文档中或出于某些特殊样式状态，尺寸长宽有可能会为 0，请注意进行特判处理
+     * @param width 画板元素实际的物理像素宽度，有可能为 0
+     * @param height 画板元素实际的物理像素高度，有可能为 0
+     */
+    protected onResize(width: number, height: number): void;
+    /**
+     * 修改背景的流动速度，数字越大越快，默认为 2
+     * @param speed 背景的流动速度，默认为 2
+     */
+    setFlowSpeed(speed: number): void;
+    /**
+     * 是否启用静态模式，即图片在更换后就会保持静止状态并禁用更新，以节省性能
+     * @param enable 是否启用静态模式
+     */
+    abstract setStaticMode(enable: boolean): void;
+    /**
+     * 修改背景动画帧率，默认是 30 FPS
+     *
+     * 如果设置成 0 则会停止动画
+     * @param fps 目标帧率，默认 30 FPS
+     */
+    abstract setFPS(fps: number): void;
+    /**
+     * 暂停背景动画，画面即便是更新了图片也不会发生变化
+     */
+    abstract pause(): void;
+    /**
+     * 恢复播放背景动画
+     */
+    abstract resume(): void;
+    /**
+     * 设置背景专辑图片，图片材质加载并设置完成后会返回
+     * @param albumUrl 图片的目标链接
+     */
+    abstract setAlbumImage(albumUrl: string): Promise<void>;
+    dispose(): void;
+}

package/dist/bg-render/eplor-renderer.d.ts

@@ -0,0 +1,55 @@
+import { BaseRenderer } from "./base";
+export declare class EplorRenderer extends BaseRenderer {
+    protected canvas: HTMLCanvasElement;
+    private hasLyric;
+    private hasLyricValue;
+    private maxFPS;
+    private lastTickTime;
+    private lastFrameTime;
+    private _lowFreqVolume;
+    private paused;
+    private staticMode;
+    private gl;
+    private reduceImageSizeCanvas;
+    private tickHandle;
+    private sprites;
+    private ampTransition;
+    private playTime;
+    private frameTime;
+    private IllIlllIlIIlllI;
+    private onTick;
+    private mainProgram;
+    private blendProgram;
+    private copyProgram;
+    private noiseProgram;
+    private static readonly rawVertexBuffer;
+    private static readonly rawIndexBuffer;
+    private vertexBuffer;
+    private indexBuffer;
+    private noiseTexture;
+    private fb;
+    private historyFrameBuffer;
+    constructor(canvas: HTMLCanvasElement);
+    private _currentSize;
+    private _targetSize;
+    private renderSize;
+    private pixelSize;
+    protected onResize(width: number, height: number): void;
+    private checkResize;
+    private requestTick;
+    private drawScreen;
+    private bindDefaultFrameBuffer;
+    private onRedraw;
+    private copyFrameBuffer;
+    private setupGL;
+    setLowFreqVolume(volume: number): void;
+    setStaticMode(enable: boolean): void;
+    setFPS(fps: number): void;
+    pause(): void;
+    resume(): void;
+    private loadImage;
+    setAlbumImage(albumUrl: string): Promise<void>;
+    setHasLyric(hasLyric: boolean): void;
+    getElement(): HTMLElement;
+    dispose(): void;
+}

package/dist/bg-render/index.d.ts

@@ -3,11 +3,26 @@
  * 一个播放歌词的组件
  * @author SteveXMH
  */
-import type { HasElement, Disposable } from "../interfaces";
-import { PixiRenderer } from "./pixi-renderer";
-export declare class BackgroundRender extends PixiRenderer implements HasElement, Disposable {
+export { AbstractBaseRenderer, BaseRenderer } from "./base";
+import { AbstractBaseRenderer, BaseRenderer } from "./base";
+export { PixiRenderer } from "./pixi-renderer";
+export { EplorRenderer } from "./eplor-renderer";
+export declare class BackgroundRender<Renderer extends BaseRenderer> implements AbstractBaseRenderer {
     private element;
-    constructor();
+    private renderer;
+    constructor(renderer: Renderer, canvas: HTMLCanvasElement);
+    static new<Renderer extends BaseRenderer>(type: {
+        new (canvas: HTMLCanvasElement): Renderer;
+    }): BackgroundRender<Renderer>;
+    setRenderScale(scale: number): void;
+    setFlowSpeed(speed: number): void;
+    setStaticMode(enable: boolean): void;
+    setFPS(fps: number): void;
+    pause(): void;
+    resume(): void;
+    setLowFreqVolume(volume: number): void;
+    setHasLyric(hasLyric: boolean): void;
+    setAlbumImage(albumUrl: string): Promise<void>;
     getElement(): HTMLCanvasElement;
     dispose(): void;
 }

package/dist/bg-render/pixi-renderer.d.ts

@@ -1,52 +1,22 @@
-import { Disposable } from "../interfaces";
-export declare class PixiRenderer implements Disposable {
-    private canvas;
-    private observer;
+import { BaseRenderer } from "./base";
+export declare class PixiRenderer extends BaseRenderer {
+    protected canvas: HTMLCanvasElement;
     private app;
     private curContainer?;
     private staticMode;
     private lastContainer;
     private onTick;
-    private flowSpeed;
-    private currerntRenderScale;
     constructor(canvas: HTMLCanvasElement);
-    /**
-     * 修改背景的流动速度，数字越大越快，默认为 2
-     * @param speed 背景的流动速度，默认为 2
-     */
-    setFlowSpeed(speed: number): void;
-    /**
-     * 修改背景的渲染比例，默认是 0.5
-     *
-     * 一般情况下这个程度既没有明显瑕疵也不会特别吃性能
-     * @param scale 背景的渲染比例
-     */
+    protected onResize(width: number, height: number): void;
     setRenderScale(scale: number): void;
     private rebuildFilters;
-    /**
-     * 是否启用静态模式，即图片在更换后就会保持静止状态并禁用更新，以节省性能
-     * @param enable 是否启用静态模式
-     */
     setStaticMode(enable?: boolean): void;
-    /**
-     * 修改背景动画帧率，默认是 30 FPS
-     *
-     * 如果设置成 0 则会停止动画
-     * @param fps 目标帧率，默认 30 FPS
-     */
     setFPS(fps: number): void;
-    /**
-     * 暂停背景动画，画面即便是更新了图片也不会发生变化
-     */
     pause(): void;
-    /**
-     * 恢复播放背景动画
-     */
     resume(): void;
-    /**
-     * 设置背景专辑图片，图片材质加载并设置完成后会返回
-     * @param albumUrl 图片的目标链接
-     */
+    setLowFreqVolume(_volume: number): void;
+    setHasLyric(_hasLyric: boolean): void;
     setAlbumImage(albumUrl: string): Promise<void>;
     dispose(): void;
+    getElement(): HTMLElement;
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export type * from "./interfaces";
 export type * as spring from "./utils/spring";
-export { BackgroundRender } from "./bg-render";
+export * from "./bg-render";
 export { LyricPlayer, type LyricLineMouseEvent } from "./lyric-player";

package/dist/lyric-player/index.d.ts

@@ -28,6 +28,9 @@ export declare class LyricLineMouseEvent extends MouseEvent {
      */
     line: LyricLineEl, event: MouseEvent);
 }
+export interface LyricLineMouseEventListener {
+    (evt: LyricLineMouseEvent): void;
+}
 /**
  * 歌词播放组件，本框架的核心组件
  *
@@ -100,7 +103,11 @@ export declare class LyricPlayer extends EventTarget implements HasElement, Disp
      */
     getEnableScale(): boolean;
     readonly style: import("jss").StyleSheet<"lyricPlayer" | "lyricLine" | "@media (max-width: 1024px)" | "lyricDuetLine" | "lyricBgLine" | "lyricMainLine" | "lyricSubLine" | "disableSpring" | "interludeDots" | "@supports (mix-blend-mode: plus-lighter)" | "tmpDisableTransition">;
+    private _baseFontSize;
+    get baseFontSize(): number;
+    private isPageVisible;
     private onPageShow;
+    private onPageHide;
     constructor();
     private beginScrollHandler;
     private endScrollHandler;
@@ -206,6 +213,14 @@ export declare class LyricPlayer extends EventTarget implements HasElement, Disp
      * @param time 当前播放进度，单位为毫秒
      */
     setCurrentTime(time: number, isSeek?: boolean): void;
+    /**
+     * 暂停部分效果演出，目前会暂停播放间奏点的动画
+     */
+    pause(): void;
+    /**
+     * 恢复部分效果演出，目前会恢复播放间奏点的动画
+     */
+    resume(): void;
     /**
      * 更新动画，这个函数应该被逐帧调用或者在以下情况下调用一次：
      *

package/dist/lyric-player/interlude-dots.d.ts

@@ -9,14 +9,18 @@ export declare class InterludeDots implements HasElement, Disposable {
     private left;
     private top;
     private scale;
+    private playing;
     private lastStyle;
     private currentInterlude?;
     private currentTime;
+    private interludeTime;
     private targetBreatheDuration;
     constructor(lyricPlayer: LyricPlayer);
     getElement(): HTMLElement;
     setTransform(left?: number, top?: number): void;
     setInterlude(interlude?: [number, number]): void;
+    pause(): void;
+    resume(): void;
     update(delta?: number): void;
     dispose(): void;
 }

package/dist/lyric-player/lyric-line.d.ts

@@ -33,9 +33,12 @@ export declare class LyricLineEl extends EventTarget implements HasElement, Disp
     addMouseEventListener(type: MouseEventTypes, callback: MouseEventListener | null, options?: boolean | AddEventListenerOptions | undefined): void;
     removeMouseEventListener(type: MouseEventTypes, callback: MouseEventListener | null, options?: boolean | EventListenerOptions | undefined): void;
     private isEnabled;
-    enable(): void;
+    enable(maskAnimationTime?: number): void;
+    disable(maskAnimationTime?: number): void;
+    resume(): void;
+    pause(): void;
+    setMaskAnimationState(maskAnimationTime?: number): void;
     measureSize(): [number, number];
-    disable(): void;
     setLine(line: LyricLine): void;
     getLine(): LyricLine;
     private _hide;
@@ -47,7 +50,10 @@ export declare class LyricLineEl extends EventTarget implements HasElement, Disp
     rebuildElement(): void;
     private initFloatAnimation;
     private initEmphasizeAnimation;
+    private get totalDuration();
     updateMaskImage(): void;
+    private generateCalcBasedMaskImage;
+    private generateWebAnimationBasedMaskImage;
     getElement(): HTMLElement;
     setTransform(left?: number, top?: number, scale?: number, opacity?: number, blur?: number, force?: boolean, delay?: number): void;
     update(delta?: number): void;

package/dist/utils/derivative.d.ts

@@ -0,0 +1,2 @@
+export declare function derivative(f: (x: number) => number): (x: number) => number;
+export declare function getVelocity(f: (t: number) => number): (t: number) => number;

package/dist/utils/matrix.d.ts

@@ -0,0 +1,25 @@
+export type Matrix4 = [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
+export declare function createMatrix4(): Matrix4;
+export declare function scaleMatrix4(m: Matrix4, scale?: number, origin?: {
+    x: number;
+    y: number;
+}): Matrix4;
+export declare function translateMatrix4(m: Matrix4, x?: number, y?: number, z?: number): Matrix4;
+export declare function matrix4ToCSS(m: Matrix4, fractionDigits?: number): string;

package/dist/utils/wa-spring.d.ts

@@ -0,0 +1,33 @@
+import { Disposable } from "..";
+export interface SpringParams {
+    mass: number;
+    damping: number;
+    stiffness: number;
+}
+type CSSStyleKeys = {
+    [Style in keyof CSSStyleDeclaration]: Style extends string ? CSSStyleDeclaration[Style] extends string ? Style : never : never;
+}[keyof CSSStyleDeclaration];
+/**
+ * 基于 Web Animation API 的弹簧动画工具类，效果上可能逊于实时演算的版本
+ */
+export declare class WebAnimationSpring extends EventTarget implements Disposable {
+    private element;
+    private styleName;
+    private valueGenerator;
+    private currentPosition;
+    private currentAnimation;
+    private targetPosition;
+    private isStatic;
+    private params;
+    private currentSolver;
+    private getV;
+    constructor(element: HTMLElement, styleName: CSSStyleKeys, valueGenerator: (value: number) => string, currentPosition?: number);
+    makeStatic(): void;
+    setTargetPosition(targetPosition: number): void;
+    getCurrentPosition(): number;
+    getCurrentVelocity(): number;
+    private onStepFinished;
+    stop(): void;
+    dispose(): void;
+}
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@applemusic-like-lyrics/core",
   "packageManager": "yarn@3.6.1",
-  "version": "0.0.15",
+  "version": "0.1.0",
   "description": "AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件",
   "repository": {
     "url": "https://github.com/Steve-xmh/applemusic-like-lyrics.git",
@@ -16,30 +16,33 @@
     "build:docs": "typedoc --plugin typedoc-plugin-markdown --out docs src/index.ts",
     "build": "vite build",
     "build:dev": "vite build",
-    "fmt": "rome format --write ./src",
+    "fmt": "biome format --write ./src",
     "dev": "vite dev"
   },
+  "type": "module",
   "main": "./dist/amll-core.cjs",
-  "module": "./dist/amll-core.mjs",
+  "module": "./dist/amll-core.js",
   "typings": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/amll-core.mjs",
+      "import": "./dist/amll-core.js",
       "require": "./dist/amll-core.cjs"
     }
   },
   "devDependencies": {
     "@applemusic-like-lyrics/lyric": "^0.0.2",
+    "@applemusic-like-lyrics/ttml": "^0.1.0",
+    "@biomejs/biome": "1.5.3",
     "@types/stats.js": "^0.17.0",
     "lil-gui": "^0.18.2",
-    "rome": "^12.1.3",
     "stats.js": "^0.17.0",
     "typedoc": "^0.25.2",
     "typedoc-plugin-markdown": "^3.16.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.11",
     "vite-plugin-dts": "^3.6.0",
+    "vite-plugin-glsl": "^1.2.1",
     "vite-plugin-top-level-await": "^1.3.1",
     "vite-plugin-wasm": "^3.2.2"
   },
@@ -53,5 +56,9 @@
     "@pixi/sprite": "*",
     "jss": "*",
     "jss-preset-default": "*"
-  }
+  },
+  "dependencies": {
+    "bezier-easing": "^2.1.0"
+  },
+  "gitHead": "ebb5942fb850b61c676477de96f440c18aa75c07"
 }