@applemusic-like-lyrics/core 0.1.1 → 0.1.3

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

@@ -0,0 +1,28 @@
+/**
+ * @fileoverview
+ * 一个播放歌词的组件
+ * @author SteveXMH
+ */
+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;
+    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;
+    setAlbum(albumSource: string | HTMLImageElement | HTMLVideoElement, isVideo?: boolean): Promise<void>;
+    getElement(): HTMLCanvasElement;
+    dispose(): void;
+}

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

@@ -0,0 +1,22 @@
+import { BaseRenderer } from "./base";
+export declare class PixiRenderer extends BaseRenderer {
+    protected canvas: HTMLCanvasElement;
+    private app;
+    private curContainer?;
+    private staticMode;
+    private lastContainer;
+    private onTick;
+    constructor(canvas: HTMLCanvasElement);
+    protected onResize(width: number, height: number): void;
+    setRenderScale(scale: number): void;
+    private rebuildFilters;
+    setStaticMode(enable?: boolean): void;
+    setFPS(fps: number): void;
+    pause(): void;
+    resume(): void;
+    setLowFreqVolume(_volume: number): void;
+    setHasLyric(_hasLyric: boolean): void;
+    setAlbum(albumSource: string | HTMLImageElement | HTMLVideoElement, isVideo?: boolean): Promise<void>;
+    dispose(): void;
+    getElement(): HTMLElement;
+}

package/dist/index.d.ts

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

package/dist/interfaces.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 拥有一个 HTML 元素的接口
+ *
+ * 可以通过 `getElement` 获取这个类所对应的 HTML 元素实例
+ */
+export interface HasElement {
+    /** 获取这个类所对应的 HTML 元素实例 */
+    getElement(): HTMLElement;
+}
+/**
+ * 实现了这个接口的东西需要在使用完毕后
+ *
+ * 手动调用 `dispose` 函数来销毁清除占用资源
+ *
+ * 以免产生泄露
+ */
+export interface Disposable {
+    /**
+     * 销毁实现了该接口的对象实例，释放占用的资源
+     *
+     * 一般情况下，调用本函数后就不可以再调用对象的任何函数了
+     */
+    dispose(): void;
+}
+/** 一个歌词单词 */
+export interface LyricWord {
+    /** 单词的起始时间，单位为毫秒 */
+    startTime: number;
+    /** 单词的结束时间，单位为毫秒 */
+    endTime: number;
+    /** 单词内容 */
+    word: string;
+}
+/** 一行歌词，存储多个单词 */
+export interface LyricLine {
+    /**
+     * 该行的所有单词
+     * 如果是 LyRiC 等只能表达一行歌词的格式，这里就只会有一个单词且通常其始末时间和本结构的 `startTime` 和 `endTime` 相同
+     */
+    words: LyricWord[];
+    /** 该行的翻译歌词，将会显示在主歌词行的下方 */
+    translatedLyric: string;
+    /** 该行的音译歌词，将会显示在翻译歌词行的下方 */
+    romanLyric: string;
+    /** 句子的起始时间，单位为毫秒 */
+    startTime: number;
+    /** 句子的结束时间，单位为毫秒 */
+    endTime: number;
+    /** 该行是否为背景歌词行，当该行歌词的上一句非背景歌词被激活时，这行歌词将会显示出来，注意每个非背景歌词下方只能拥有一个背景歌词 */
+    isBG: boolean;
+    /** 该行是否为对唱歌词行（即歌词行靠右对齐） */
+    isDuet: boolean;
+}

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

@@ -0,0 +1,26 @@
+import { LyricPlayer } from ".";
+import { Disposable, HasElement } from "../interfaces";
+import { Spring } from "../utils/spring";
+export declare class BottomLineEl implements HasElement, Disposable {
+    private lyricPlayer;
+    private element;
+    private left;
+    private top;
+    private delay;
+    lineSize: number[];
+    readonly lineTransforms: {
+        posX: Spring;
+        posY: Spring;
+    };
+    constructor(lyricPlayer: LyricPlayer);
+    measureSize(): [number, number];
+    private lastStyle;
+    show(): void;
+    hide(): void;
+    rebuildStyle(): void;
+    getElement(): HTMLElement;
+    setTransform(left?: number, top?: number, force?: boolean, delay?: number): void;
+    update(delta?: number): void;
+    get isInSight(): boolean;
+    dispose(): void;
+}

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

@@ -0,0 +1,250 @@
+/**
+ * @fileoverview
+ * 一个播放歌词的组件
+ * @author SteveXMH
+ */
+import type { Disposable, HasElement, LyricLine } from "../interfaces";
+import { SpringParams } from "../utils/spring";
+import { LyricLineEl } from "./lyric-line";
+/**
+ * 歌词行鼠标相关事件，可以获取到歌词行的索引和歌词行元素
+ */
+export declare class LyricLineMouseEvent extends MouseEvent {
+    /**
+     * 歌词行索引
+     */
+    readonly lineIndex: number;
+    /**
+     * 歌词行元素
+     */
+    readonly line: LyricLineEl;
+    constructor(
+    /**
+     * 歌词行索引
+     */
+    lineIndex: number, 
+    /**
+     * 歌词行元素
+     */
+    line: LyricLineEl, event: MouseEvent);
+}
+export interface LyricLineMouseEventListener {
+    (evt: LyricLineMouseEvent): void;
+}
+/**
+ * 歌词播放组件，本框架的核心组件
+ *
+ * 尽可能贴切 Apple Music for iPad 的歌词效果设计，且做了力所能及的优化措施
+ */
+export declare class LyricPlayer extends EventTarget implements HasElement, Disposable {
+    private element;
+    private currentTime;
+    private lyricLines;
+    private processedLines;
+    private lyricLinesEl;
+    private lyricLinesSize;
+    private lyricLinesIndexes;
+    private hotLines;
+    private bufferedLines;
+    private scrollToIndex;
+    private allowScroll;
+    private scrolledHandler;
+    private isScrolled;
+    private invokedByScrollEvent;
+    private scrollOffset;
+    private hidePassedLines;
+    private resizeObserver;
+    private posXSpringParams;
+    private posYSpringParams;
+    private scaleSpringParams;
+    private emUnit;
+    private padding;
+    private enableBlur;
+    private enableScale;
+    private interludeDots;
+    private interludeDotsSize;
+    private bottomLine;
+    readonly supportPlusLighter: boolean;
+    readonly supportMaskImage: boolean;
+    private disableSpring;
+    private alignAnchor;
+    private alignPosition;
+    private isNonDynamic;
+    private scrollBoundary;
+    readonly size: [number, number];
+    readonly innerSize: [number, number];
+    private readonly onLineClickedHandler;
+    _getIsNonDynamic(): boolean;
+    /**
+     * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
+     *
+     * 如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行
+     *
+     * 如果不启用，则会回退到基于 `transition` 的过渡效果，对低性能的机器比较友好，但是效果会比较单一
+     */
+    setEnableSpring(enable?: boolean): void;
+    /**
+     * 获取当前是否启用了物理弹簧
+     * @returns 是否启用物理弹簧
+     */
+    getEnableSpring(): boolean;
+    /**
+     * 是否启用歌词行缩放效果，默认启用
+     *
+     * 如果启用，非选中的歌词行会轻微缩小以凸显当前播放歌词行效果
+     *
+     * 此效果对性能影响微乎其微，推荐启用
+     * @param enable 是否启用歌词行缩放效果
+     */
+    setEnableScale(enable?: boolean): void;
+    /**
+     * 获取当前是否启用了歌词行缩放效果
+     * @returns 是否启用歌词行缩放效果
+     */
+    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;
+    private limitScrollOffset;
+    /**
+     * 获取当前播放时间里是否处于间奏区间
+     * 如果是则会返回单位为毫秒的始末时间
+     * 否则返回 undefined
+     *
+     * 这个只允许内部调用
+     * @returns [开始时间,结束时间,大概处于的歌词行ID,下一句是否为对唱歌词] 或 undefined 如果不处于间奏区间
+     */
+    getCurrentInterlude(): [number, number, number, boolean] | undefined;
+    /**
+     * 重建样式
+     *
+     * 这个只允许内部调用
+     */
+    rebuildStyle(): void;
+    /**
+     * 设置是否隐藏已经播放过的歌词行，默认不隐藏
+     * @param hide 是否隐藏已经播放过的歌词行，默认不隐藏
+     */
+    setHidePassedLines(hide: boolean): void;
+    /**
+     * 设置是否启用歌词行的模糊效果
+     * @param enable 是否启用
+     */
+    setEnableBlur(enable: boolean): void;
+    /**
+     * 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
+     * @param lines 歌词数组
+     */
+    setLyricLines(lines: LyricLine[]): void;
+    /**
+     * 重置用户滚动状态
+     *
+     * 请在用户完成滚动点击跳转歌词时调用本事件再调用 `calcLayout` 以正确滚动到目标位置
+     */
+    resetScroll(): void;
+    /**
+     * 重新布局定位歌词行的位置，调用完成后再逐帧调用 `update`
+     * 函数即可让歌词通过动画移动到目标位置。
+     *
+     * 函数有一个 `force` 参数，用于指定是否强制修改布局，也就是不经过动画直接调整元素位置和大小。
+     *
+     * 此函数还有一个 `reflow` 参数，用于指定是否需要重新计算布局
+     *
+     * 因为计算布局必定会导致浏览器重排布局，所以会大幅度影响流畅度和性能，故请只在以下情况下将其​设置为 true：
+     *
+     * 1. 歌词页面大小发生改变时（这个组件会自行处理）
+     * 2. 加载了新的歌词时（不论前后歌词是否完全一样）
+     * 3. 用户自行跳转了歌曲播放位置（不论距离远近）
+     *
+     * @param force 是否不经过动画直接修改布局定位
+     * @param reflow 是否进行重新布局（重新计算每行歌词大小）
+     */
+    calcLayout(force?: boolean, reflow?: boolean): void;
+    /**
+     * 获取当前歌词的播放位置
+     *
+     * 一般和最后调用 `setCurrentTime` 给予的参数一样
+     * @returns 当前播放位置
+     */
+    getCurrentTime(): number;
+    /**
+     * 获取当前歌词数组
+     *
+     * 一般和最后调用 `setLyricLines` 给予的参数一样
+     * @returns 当前歌词数组
+     */
+    getLyricLines(): LyricLine[];
+    getElement(): HTMLElement;
+    /**
+     * 获取一个特殊的底栏元素，默认是空白的，可以往内部添加任意元素
+     *
+     * 这个元素始终在歌词的底部，可以用于显示歌曲创作者等信息
+     *
+     * 但是请勿删除该元素，只能在内部存放元素
+     *
+     * @returns 一个元素，可以往内部添加任意元素
+     */
+    getBottomLineElement(): HTMLElement;
+    /**
+     * 设置目标歌词行的对齐方式，默认为 `center`
+     *
+     * - 设置成 `top` 的话将会向目标歌词行的顶部对齐
+     * - 设置成 `bottom` 的话将会向目标歌词行的底部对齐
+     * - 设置成 `center` 的话将会向目标歌词行的垂直中心对齐
+     * @param alignAnchor 歌词行对齐方式，详情见函数说明
+     */
+    setAlignAnchor(alignAnchor: "top" | "bottom" | "center"): void;
+    /**
+     * 设置默认的歌词行对齐位置，相对于整个歌词播放组件的大小位置，默认为 `0.5`
+     * @param alignPosition 一个 `[0.0-1.0]` 之间的任意数字，代表组件高度由上到下的比例位置
+     */
+    setAlignPosition(alignPosition: number): void;
+    /**
+     * 设置当前播放进度，单位为毫秒且**必须是整数**，此时将会更新内部的歌词进度信息
+     * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好
+     *
+     * 调用完成后，可以每帧调用 `update` 函数来执行歌词动画效果
+     * @param time 当前播放进度，单位为毫秒
+     */
+    setCurrentTime(time: number, isSeek?: boolean): void;
+    /**
+     * 暂停部分效果演出，目前会暂停播放间奏点的动画
+     */
+    pause(): void;
+    /**
+     * 恢复部分效果演出，目前会恢复播放间奏点的动画
+     */
+    resume(): void;
+    /**
+     * 更新动画，这个函数应该被逐帧调用或者在以下情况下调用一次：
+     *
+     * 1. 刚刚调用完设置歌词函数的时候
+     * @param delta 距离上一次被调用到现在的时长，单位为毫秒（可为浮点数）
+     */
+    update(delta?: number): void;
+    /**
+     * 设置所有歌词行在横坐标上的弹簧属性，包括重量、弹力和阻力。
+     *
+     * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+     */
+    setLinePosXSpringParams(params: Partial<SpringParams>): void;
+    /**
+     * 设置所有歌词行在​纵坐标上的弹簧属性，包括重量、弹力和阻力。
+     *
+     * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+     */
+    setLinePosYSpringParams(params: Partial<SpringParams>): void;
+    /**
+     * 设置所有歌词行在​缩放大小上的弹簧属性，包括重量、弹力和阻力。
+     *
+     * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+     */
+    setLineScaleSpringParams(params: Partial<SpringParams>): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,26 @@
+import { LyricPlayer } from ".";
+import type { Disposable, HasElement } from "../interfaces";
+export declare class InterludeDots implements HasElement, Disposable {
+    private readonly lyricPlayer;
+    private element;
+    private dot0;
+    private dot1;
+    private dot2;
+    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

@@ -0,0 +1,64 @@
+import { LyricPlayer } from ".";
+import { Disposable, HasElement, LyricLine, LyricWord } from "../interfaces";
+import { Spring } from "../utils/spring";
+export declare function shouldEmphasize(word: LyricWord): boolean;
+export declare class RawLyricLineMouseEvent extends MouseEvent {
+    readonly line: LyricLineEl;
+    constructor(line: LyricLineEl, event: MouseEvent);
+}
+type MouseEventMap = {
+    [evt in keyof HTMLElementEventMap]: HTMLElementEventMap[evt] extends MouseEvent ? evt : never;
+};
+type MouseEventTypes = MouseEventMap[keyof MouseEventMap];
+type MouseEventListener = (this: LyricLineEl, ev: RawLyricLineMouseEvent) => void;
+export declare class LyricLineEl extends EventTarget implements HasElement, Disposable {
+    private lyricPlayer;
+    private lyricLine;
+    private element;
+    private left;
+    private top;
+    private scale;
+    private blur;
+    private delay;
+    private splittedWords;
+    lineSize: number[];
+    readonly lineTransforms: {
+        posX: Spring;
+        posY: Spring;
+        scale: Spring;
+    };
+    constructor(lyricPlayer: LyricPlayer, lyricLine?: LyricLine);
+    private listenersMap;
+    private readonly onMouseEvent;
+    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(maskAnimationTime?: number): void;
+    disable(maskAnimationTime?: number): void;
+    resume(): void;
+    pause(): void;
+    setMaskAnimationState(maskAnimationTime?: number): void;
+    measureSize(): [number, number];
+    setLine(line: LyricLine): void;
+    getLine(): LyricLine;
+    private _hide;
+    private _prevParentEl;
+    private lastStyle;
+    show(): void;
+    hide(): void;
+    rebuildStyle(): void;
+    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;
+    _getDebugTargetPos(): string;
+    get isInSight(): boolean;
+    dispose(): void;
+}
+export {};

package/dist/utils/eq-set.d.ts

@@ -0,0 +1 @@
+export declare const eqSet: <T>(xs: Set<T>, ys: Set<T>) => boolean;

package/dist/utils/spring.d.ts

@@ -0,0 +1,26 @@
+/** MIT License github.com/pushkine/ */
+export interface SpringParams {
+    mass: number;
+    damping: number;
+    stiffness: number;
+    soft: boolean;
+}
+export declare class Spring {
+    private currentPosition;
+    private targetPosition;
+    private currentTime;
+    private params;
+    private currentSolver;
+    private getV;
+    private getV2;
+    private queueParams;
+    private queuePosition;
+    constructor(currentPosition?: number);
+    private resetSolver;
+    arrived(): boolean;
+    setPosition(targetPosition: number): void;
+    update(delta?: number): void;
+    updateParams(params: Partial<SpringParams>, delay?: number): void;
+    setTargetPosition(targetPosition: number, delay?: number): void;
+    getCurrentPosition(): number;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@applemusic-like-lyrics/core",
   "packageManager": "yarn@3.6.1",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件",
   "repository": {
     "url": "https://github.com/Steve-xmh/applemusic-like-lyrics.git",
@@ -62,5 +62,6 @@
   },
   "dependencies": {
     "bezier-easing": "^2.1.0"
-  }
-}
+  },
+  "gitHead": "6d9cb894c6510995d6a30ace7a1814dc333d57d1"
+}