@applemusic-like-lyrics/core 0.2.0-alpha.3 → 0.2.0-alpha.5

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

@@ -1,4 +1,4 @@
-import { Disposable, HasElement } from '../interfaces';
+import { Disposable, HasElement } from '../interfaces.ts';
 export declare abstract class AbstractBaseRenderer implements Disposable, HasElement {
     /**
      * 修改背景的流动速度，数字越大越快，默认为 8

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

@@ -1,12 +1,12 @@
-import { AbstractBaseRenderer, BaseRenderer } from './base';
+import { AbstractBaseRenderer, BaseRenderer } from './base.ts';
 /**
  * @fileoverview
  * 一个播放歌词的组件
  * @author SteveXMH
  */
-export { AbstractBaseRenderer, BaseRenderer } from './base';
-export { PixiRenderer } from './pixi-renderer';
-export { MeshGradientRenderer } from './mesh-renderer';
+export { AbstractBaseRenderer, BaseRenderer } from './base.ts';
+export { MeshGradientRenderer } from './mesh-renderer/index.ts';
+export { PixiRenderer } from './pixi-renderer.ts';
 export declare class BackgroundRender<Renderer extends BaseRenderer> implements AbstractBaseRenderer {
     private element;
     private renderer;

package/dist/bg-render/mesh-renderer/cp-generate.d.ts

@@ -0,0 +1,6 @@
+import { ControlPointPreset } from './cp-presets.ts';
+export declare function generateControlPoints(width: number, height: number, variationFraction?: number, // = 0.2,
+normalOffset?: number, // = 0.3,
+blendFactor?: number, smoothIters?: number, // = 3,
+smoothFactor?: number, // = 0.3,
+smoothModifier?: number): ControlPointPreset;

package/dist/bg-render/mesh-renderer/cp-presets.d.ts

@@ -1,17 +1 @@
-interface ControlPointConf {
-    cx: number;
-    cy: number;
-    x: number;
-    y: number;
-    ur: number;
-    vr: number;
-    up: number;
-    vp: number;
-}
-interface ControlPointPreset {
-    width: number;
-    height: number;
-    conf: ControlPointConf[];
-}
-export declare const CONTROL_POINT_PRESETS: readonly [ControlPointPreset, ControlPointPreset, ControlPointPreset, ControlPointPreset, ControlPointPreset, ControlPointPreset];
-export {};
+export declare const CONTROL_POINT_PRESETS: readonly [ControlPointPreset, ControlPointPreset, ControlPointPreset, ControlPointPreset];

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

@@ -1,5 +1,5 @@
 import { Vec2, Vec3 } from 'gl-matrix';
-import { BaseRenderer } from '../base';
+import { BaseRenderer } from '../base.ts';
 declare class ControlPoint {
     color: Vec3;
     location: Vec2;
@@ -25,6 +25,7 @@ export declare class MeshGradientRenderer extends BaseRenderer {
     private gl;
     private lastFrameTime;
     private frameTime;
+    private currentImageData?;
     private lastTickTime;
     private volume;
     private tickHandle;
@@ -32,14 +33,11 @@ export declare class MeshGradientRenderer extends BaseRenderer {
     private paused;
     private staticMode;
     private mainProgram;
-    private blendProgram;
     private manualControl;
     private reduceImageSizeCanvas;
     private targetSize;
     private currentSize;
-    private fullScreenMesh;
-    private drawFrameBuffer;
-    private drawFrameBufferTexture;
+    private isNoCover;
     private meshStates;
     private _disposed;
     setManualControl(enable: boolean): void;
@@ -59,7 +57,7 @@ export declare class MeshGradientRenderer extends BaseRenderer {
     setFPS(fps: number): void;
     pause(): void;
     resume(): void;
-    setAlbum(albumSource: string | HTMLImageElement | HTMLVideoElement, isVideo?: boolean): Promise<void>;
+    setAlbum(albumSource?: string | HTMLImageElement | HTMLVideoElement, isVideo?: boolean): Promise<void>;
     setLowFreqVolume(volume: number): void;
     setHasLyric(_hasLyric: boolean): void;
     dispose(): void;

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

@@ -16,7 +16,7 @@ export declare class PixiRenderer extends BaseRenderer {
     resume(): void;
     setLowFreqVolume(_volume: number): void;
     setHasLyric(_hasLyric: boolean): void;
-    setAlbum(albumSource: string | HTMLImageElement | HTMLVideoElement, isVideo?: boolean): Promise<void>;
+    setAlbum(albumSource?: string | HTMLImageElement | HTMLVideoElement, isVideo?: boolean): Promise<void>;
     dispose(): void;
     getElement(): HTMLElement;
 }

package/dist/canvas-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

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

package/dist/interfaces.d.ts

@@ -30,6 +30,8 @@ export interface LyricWord {
     endTime: number;
     /** 单词内容 */
     word: string;
+    /** 单词内容是否包含冒犯性的不雅用语 */
+    obscene: boolean;
 }
 /** 一行歌词，存储多个单词 */
 export interface LyricLine {

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

@@ -0,0 +1,229 @@
+import { Disposable, HasElement, LyricLine } from '../interfaces.ts';
+import { SpringParams } from '../utils/spring.ts';
+import { BottomLineEl } from './bottom-line.ts';
+import { InterludeDots } from './dom/interlude-dots.ts';
+/**
+ * 歌词播放器的基类，已经包含了有关歌词操作和排版的功能，子类需要为其实现对应的显示展示操作
+ */
+export declare abstract class LyricPlayerBase extends EventTarget implements HasElement, Disposable {
+    protected element: HTMLElement;
+    protected currentTime: number;
+    protected currentLyricLines: LyricLine[];
+    protected processedLines: LyricLine[];
+    protected lyricLinesIndexes: WeakMap<LyricLineBase, number>;
+    protected hotLines: Set<number>;
+    protected bufferedLines: Set<number>;
+    protected isNonDynamic: boolean;
+    protected hasDuetLine: boolean;
+    protected scrollToIndex: number;
+    protected disableSpring: boolean;
+    protected interludeDotsSize: [number, number];
+    protected interludeDots: InterludeDots;
+    protected bottomLine: BottomLineEl;
+    protected enableBlur: boolean;
+    protected enableScale: boolean;
+    protected hidePassedLines: boolean;
+    protected scrollBoundary: number[];
+    protected currentLyricLineObjects: LyricLineBase[];
+    protected isSeeking: boolean;
+    protected lastCurrentTime: number;
+    protected alignAnchor: "top" | "bottom" | "center";
+    protected alignPosition: number;
+    protected scrollOffset: number;
+    readonly size: [number, number];
+    protected allowScroll: boolean;
+    protected isPageVisible: boolean;
+    protected initialLayoutFinished: boolean;
+    protected posXSpringParams: Partial<SpringParams>;
+    protected posYSpringParams: Partial<SpringParams>;
+    protected scaleSpringParams: Partial<SpringParams>;
+    protected scaleForBGSpringParams: Partial<SpringParams>;
+    private onPageShow;
+    private onPageHide;
+    private scrolledHandler;
+    protected isScrolled: boolean;
+    protected wordFadeWidth: number;
+    protected targetAlignIndex: number;
+    constructor();
+    private beginScrollHandler;
+    private endScrollHandler;
+    private limitScrollOffset;
+    /**
+     * 设置文字动画的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位，默认为 0.5，即一个全角字符的一半宽度
+     *
+     * 如果要模拟 Apple Music for Android 的效果，可以设置为 1
+     *
+     * 如果要模拟 Apple Music for iPad 的效果，可以设置为 0.5
+     *
+     * 如果想要近乎禁用渐变效果，可以设置成非常接近 0 的小数（例如 `0.0001` ），但是**不可以为 0**
+     *
+     * @param value 需要设置的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位，默认为 0.5
+     */
+    setWordFadeWidth(value?: number): void;
+    /**
+     * 是否启用歌词行缩放效果，默认启用
+     *
+     * 如果启用，非选中的歌词行会轻微缩小以凸显当前播放歌词行效果
+     *
+     * 此效果对性能影响微乎其微，推荐启用
+     * @param enable 是否启用歌词行缩放效果
+     */
+    setEnableScale(enable?: boolean): void;
+    /**
+     * 获取当前是否启用了歌词行缩放效果
+     * @returns 是否启用歌词行缩放效果
+     */
+    getEnableScale(): boolean;
+    /**
+     * 获取当前文字动画的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位
+     * @returns 当前文字动画的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位
+     */
+    getWordFadeWidth(): number;
+    setIsSeeking(isSeeking: boolean): void;
+    /**
+     * 设置是否隐藏已经播放过的歌词行，默认不隐藏
+     * @param hide 是否隐藏已经播放过的歌词行，默认不隐藏
+     */
+    setHidePassedLines(hide: boolean): void;
+    /**
+     * 设置是否启用歌词行的模糊效果
+     * @param enable 是否启用
+     */
+    setEnableBlur(enable: boolean): void;
+    /**
+     * 设置目标歌词行的对齐方式，默认为 `center`
+     *
+     * - 设置成 `top` 的话将会向目标歌词行的顶部对齐
+     * - 设置成 `bottom` 的话将会向目标歌词行的底部对齐
+     * - 设置成 `center` 的话将会向目标歌词行的垂直中心对齐
+     * @param alignAnchor 歌词行对齐方式，详情见函数说明
+     */
+    setAlignAnchor(alignAnchor: "top" | "bottom" | "center"): void;
+    /**
+     * 设置默认的歌词行对齐位置，相对于整个歌词播放组件的大小位置，默认为 `0.5`
+     * @param alignPosition 一个 `[0.0-1.0]` 之间的任意数字，代表组件高度由上到下的比例位置
+     */
+    setAlignPosition(alignPosition: number): void;
+    /**
+     * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
+     *
+     * 如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行
+     *
+     * 如果不启用，则会回退到基于 `transition` 的过渡效果，对低性能的机器比较友好，但是效果会比较单一
+     */
+    setEnableSpring(enable?: boolean): void;
+    /**
+     * 获取当前是否启用了物理弹簧
+     * @returns 是否启用物理弹簧
+     */
+    getEnableSpring(): boolean;
+    /**
+     * 获取当前播放时间里是否处于间奏区间
+     * 如果是则会返回单位为毫秒的始末时间
+     * 否则返回 undefined
+     *
+     * 这个只允许内部调用
+     * @returns [开始时间,结束时间,大概处于的歌词行ID,下一句是否为对唱歌词] 或 undefined 如果不处于间奏区间
+     */
+    protected getCurrentInterlude(): [number, number, number, boolean] | undefined;
+    /**
+     * 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
+     * @param lines 歌词数组
+     * @param initialTime 初始时间，默认为 0
+     */
+    setLyricLines(lines: LyricLine[], initialTime?: number): void;
+    /**
+     * 设置当前播放进度，单位为毫秒且**必须是整数**，此时将会更新内部的歌词进度信息
+     * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好
+     *
+     * 调用完成后，可以每帧调用 `update` 函数来执行歌词动画效果
+     * @param time 当前播放进度，单位为毫秒
+     */
+    setCurrentTime(time: number, isSeek?: boolean): void;
+    /**
+     * 重新布局定位歌词行的位置，调用完成后再逐帧调用 `update`
+     * 函数即可让歌词通过动画移动到目标位置。
+     *
+     * 函数有一个 `force` 参数，用于指定是否强制修改布局，也就是不经过动画直接调整元素位置和大小。
+     *
+     * 此函数还有一个 `reflow` 参数，用于指定是否需要重新计算布局
+     *
+     * 因为计算布局必定会导致浏览器重排布局，所以会大幅度影响流畅度和性能，故请只在以下情况下将其​设置为 true：
+     *
+     * 1. 歌词页面大小发生改变时（这个组件会自行处理）
+     * 2. 加载了新的歌词时（不论前后歌词是否完全一样）
+     * 3. 用户自行跳转了歌曲播放位置（不论距离远近）
+     *
+     * @param force 是否不经过动画直接修改布局定位
+     * @param reflow 是否进行重新布局（重新计算每行歌词大小）
+     */
+    calcLayout(sync?: boolean): Promise<void>;
+    /**
+     * 设置所有歌词行在横坐标上的弹簧属性，包括重量、弹力和阻力。
+     *
+     * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+     * @deprecated 考虑到横向弹簧效果并不常见，所以这个函数将会在未来的版本中移除
+     */
+    setLinePosXSpringParams(_params?: Partial<SpringParams>): void;
+    /**
+     * 设置所有歌词行在​纵坐标上的弹簧属性，包括重量、弹力和阻力。
+     *
+     * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+     */
+    setLinePosYSpringParams(params?: Partial<SpringParams>): void;
+    /**
+     * 设置所有歌词行在​缩放大小上的弹簧属性，包括重量、弹力和阻力。
+     *
+     * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+     */
+    setLineScaleSpringParams(params?: Partial<SpringParams>): void;
+    protected isPlaying: boolean;
+    /**
+     * 暂停部分效果演出，目前会暂停播放间奏点的动画，且将背景歌词显示出来
+     */
+    pause(): void;
+    /**
+     * 恢复部分效果演出，目前会恢复播放间奏点的动画
+     */
+    resume(): void;
+    /**
+     * 更新动画，这个函数应该被逐帧调用或者在以下情况下调用一次：
+     *
+     * 1. 刚刚调用完设置歌词函数的时候
+     * @param delta 距离上一次被调用到现在的时长，单位为毫秒（可为浮点数）
+     */
+    update(delta?: number): void;
+    protected onResize(): void;
+    /**
+     * 获取一个特殊的底栏元素，默认是空白的，可以往内部添加任意元素
+     *
+     * 这个元素始终在歌词的底部，可以用于显示歌曲创作者等信息
+     *
+     * 但是请勿删除该元素，只能在内部存放元素
+     *
+     * @returns 一个元素，可以往内部添加任意元素
+     */
+    getBottomLineElement(): HTMLElement;
+    /**
+     * 重置用户滚动状态
+     *
+     * 请在用户完成滚动点击跳转歌词时调用本事件再调用 `calcLayout` 以正确滚动到目标位置
+     */
+    resetScroll(): void;
+    /**
+     * 获取当前歌词数组
+     *
+     * 一般和最后调用 `setLyricLines` 给予的参数一样
+     * @returns 当前歌词数组
+     */
+    getLyricLines(): LyricLine[];
+    /**
+     * 获取当前歌词的播放位置
+     *
+     * 一般和最后调用 `setCurrentTime` 给予的参数一样
+     * @returns 当前播放位置
+     */
+    getCurrentTime(): number;
+    getElement(): HTMLElement;
+    dispose(): void;
+}

package/dist/lyric-player/{dom/bottom-line.d.ts → bottom-line.d.ts}

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

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

@@ -0,0 +1,11 @@
+import { LyricLine } from '../../interfaces.ts';
+import { LyricPlayerBase } from '../base.ts';
+import { CanvasLyricLine } from './lyric-line.ts';
+export declare class CanvasLyricPlayer extends LyricPlayerBase {
+    private canvasElement;
+    currentLyricLineObjects: CanvasLyricLine[];
+    constructor();
+    setLyricLines(lines: LyricLine[], initialTime?: number): void;
+    onResize(): void;
+    update(delta?: number): void;
+}

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

@@ -0,0 +1,23 @@
+import { LyricLine } from '../../interfaces.ts';
+import { LyricLineBase } from '../base.ts';
+import { CanvasLyricPlayer } from './index.ts';
+export declare class CanvasLyricLine extends LyricLineBase {
+    private player;
+    private line;
+    constructor(player: CanvasLyricPlayer, line?: LyricLine);
+    getLine(): LyricLine;
+    private lineSize;
+    measureSize(): [number, number];
+    private layoutWords;
+    private translatedLayoutWords;
+    private romanLayoutWords;
+    private lineCanvas;
+    private enabled;
+    enable(): void;
+    disable(): void;
+    resume(): void;
+    pause(): void;
+    setTransform(top?: number, scale?: number, opacity?: number, blur?: number, force?: boolean, delay?: number): void;
+    get isInSight(): boolean;
+    update(delta?: number): void;
+}

package/dist/lyric-player/canvas/text-layout.d.ts

@@ -0,0 +1,39 @@
+export interface TextLayoutResult {
+    text: string;
+    index: number;
+    lineIndex: number;
+    width: number;
+    height: number;
+    x: number;
+}
+export interface TextLayoutConfig {
+    fontSize: number;
+    maxWidth: number;
+    lineHeight: number;
+    /**
+     * 是否统一空格宽度，即不论空白字符有多少个，都只占用一个字符的宽度
+     */
+    uniformSpace: boolean;
+}
+export interface TextLayoutFinalState {
+    x: number;
+    lineIndex: number;
+}
+/**
+ * 对指定文本进行布局，返回每个字符的位置信息
+ * 目前仅可支持普通拉丁字符和 CJK 字符
+ * @param ctx 2D 画板上下文
+ * @param text 文本
+ * @param config 字体大小
+ * @param initialX 初始 X 坐标，对于需要布局多段文本的情况下有所帮助
+ */
+export declare function layoutWord(ctx: CanvasRenderingContext2D, text: string, config: TextLayoutConfig, initialX?: number): Generator<TextLayoutResult, TextLayoutFinalState, void>;
+/**
+ * 对指定文本进行布局，返回每段文字的位置信息
+ * 目前仅可支持普通拉丁字符和 CJK 字符
+ * @param ctx 2D 画板上下文
+ * @param text 文本
+ * @param config 字体大小
+ * @param initialX 初始 X 坐标，对于需要布局多段文本的情况下有所帮助
+ */
+export declare function layoutLine(ctx: CanvasRenderingContext2D, text: string, config: TextLayoutConfig, initialX?: number): Generator<TextLayoutResult, void, void>;