@applemusic-like-lyrics/core 0.0.10 → 0.0.12

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

@@ -5,6 +5,29 @@
  */
 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);
+}
 /**
  * 歌词播放组件，本框架的核心组件
  *
@@ -17,22 +40,36 @@ export declare class LyricPlayer extends EventTarget implements HasElement, Disp
     private processedLines;
     private lyricLinesEl;
     private lyricLinesSize;
+    private lyricLinesIndexes;
     private hotLines;
     private bufferedLines;
     private scrollToIndex;
+    private allowScroll;
+    private scrolledHandler;
+    private isScrolled;
+    private invokedByScrollEvent;
+    private padding;
+    private scrollOffset;
+    private hidePassedLines;
     private resizeObserver;
     private posXSpringParams;
     private posYSpringParams;
     private scaleSpringParams;
     private enableBlur;
+    private enableScale;
     private interludeDots;
     private interludeDotsSize;
+    private bottomLine;
     readonly supportPlusLighter: boolean;
     readonly supportMaskImage: boolean;
     private disableSpring;
     private alignAnchor;
+    private alignPosition;
+    private isNonDynamic;
     readonly size: [number, number];
-    readonly pos: [number, number];
+    readonly innerSize: [number, number];
+    private readonly onLineClickedHandler;
+    _getIsNonDynamic(): boolean;
     /**
      * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
      *
@@ -46,6 +83,20 @@ export declare class LyricPlayer extends EventTarget implements HasElement, Disp
      * @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 onPageShow;
     constructor();
@@ -55,15 +106,20 @@ export declare class LyricPlayer extends EventTarget implements HasElement, Disp
      * 否则返回 undefined
      *
      * 这个只允许内部调用
-     * @returns [开始时间,结束时间] 或 undefined 如果不处于间奏区间
+     * @returns [开始时间,结束时间,大概处于的歌词行ID,下一句是否为对唱歌词] 或 undefined 如果不处于间奏区间
      */
-    getCurrentInterlude(): [number, number, number] | undefined;
+    getCurrentInterlude(): [number, number, number, boolean] | undefined;
     /**
      * 重建样式
      *
      * 这个只允许内部调用
      */
     rebuildStyle(): void;
+    /**
+     * 设置是否隐藏已经播放过的歌词行，默认不隐藏
+     * @param hide 是否隐藏已经播放过的歌词行，默认不隐藏
+     */
+    setHidePassedLines(hide: boolean): void;
     /**
      * 设置是否启用歌词行的模糊效果
      * @param enable 是否启用
@@ -74,10 +130,18 @@ export declare class LyricPlayer extends EventTarget implements HasElement, Disp
      * @param lines 歌词数组
      */
     setLyricLines(lines: LyricLine[]): void;
+    /**
+     * 重置用户滚动状态
+     *
+     * 请在用户完成滚动点击跳转歌词时调用本事件再调用 `calcLayout` 以正确滚动到目标位置
+     */
+    resetScroll(): void;
     /**
      * 重新布局定位歌词行的位置，调用完成后再逐帧调用 `update`
      * 函数即可让歌词通过动画移动到目标位置。
      *
+     * 函数有一个 `force` 参数，用于指定是否强制修改布局，也就是不经过动画直接调整元素位置和大小。
+     *
      * 此函数还有一个 `reflow` 参数，用于指定是否需要重新计算布局
      *
      * 因为计算布局必定会导致浏览器重排布局，所以会大幅度影响流畅度和性能，故请只在以下情况下将其​设置为 true：
@@ -86,9 +150,10 @@ export declare class LyricPlayer extends EventTarget implements HasElement, Disp
      * 2. 加载了新的歌词时（不论前后歌词是否完全一样）
      * 3. 用户自行跳转了歌曲播放位置（不论距离远近）
      *
+     * @param force 是否不经过动画直接修改布局定位
      * @param reflow 是否进行重新布局（重新计算每行歌词大小）
      */
-    calcLayout(reflow?: boolean): void;
+    calcLayout(force?: boolean, reflow?: boolean): void;
     /**
      * 获取当前歌词的播放位置
      *
@@ -105,14 +170,29 @@ export declare class LyricPlayer extends EventTarget implements HasElement, Disp
     getLyricLines(): LyricLine[];
     getElement(): HTMLElement;
     /**
-     * 设置歌词行的对齐方式，默认为 `top`
+     * 获取一个特殊的底栏元素，默认是空白的，可以往内部添加任意元素
      *
-     * - 设置成 `top` 的话歌词将会向组件顶部对齐
-     * - 设置成 `bottom` 的话歌词将会向组件底部对齐
-     * - 设置成 [0.0-1.0] 之间任意数字的话则会根据当前组件高度从顶部向下位移为对齐位置垂直居中对齐
+     * 这个元素始终在歌词的底部，可以用于显示歌曲创作者等信息
+     *
+     * 但是请勿删除该元素，只能在内部存放元素
+     *
+     * @returns 一个元素，可以往内部添加任意元素
+     */
+    getBottomLineElement(): HTMLElement;
+    /**
+     * 设置目标歌词行的对齐方式，默认为 `center`
+     *
+     * - 设置成 `top` 的话将会向目标歌词行的顶部对齐
+     * - 设置成 `bottom` 的话将会向目标歌词行的底部对齐
+     * - 设置成 `center` 的话将会向目标歌词行的垂直中心对齐
      * @param alignAnchor 歌词行对齐方式，详情见函数说明
      */
-    setAlignAnchor(alignAnchor: "top" | "bottom" | number): void;
+    setAlignAnchor(alignAnchor: "top" | "bottom" | "center"): void;
+    /**
+     * 设置默认的歌词行对齐位置，相对于整个歌词播放组件的大小位置，默认为 `0.5`
+     * @param alignPosition 一个 `[0.0-1.0]` 之间的任意数字，代表组件高度由上到下的比例位置
+     */
+    setAlignPosition(alignPosition: number): void;
     /**
      * 设置当前播放进度，单位为毫秒且**必须是整数**，此时将会更新内部的歌词进度信息
      * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好

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

@@ -2,7 +2,16 @@ 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 LyricLineEl implements HasElement, Disposable {
+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;
@@ -19,6 +28,10 @@ export declare class LyricLineEl implements HasElement, Disposable {
         scale: Spring;
     };
     constructor(lyricPlayer: LyricPlayer, lyricLine?: LyricLine);
+    private listenersMap;
+    private readonly onMouseEvent;
+    addEventListener(type: MouseEventTypes, callback: MouseEventListener | null, options?: boolean | AddEventListenerOptions | undefined): void;
+    removeEventListener(type: MouseEventTypes, callback: MouseEventListener | null, options?: boolean | EventListenerOptions | undefined): void;
     private isEnabled;
     enable(): void;
     measureSize(): [number, number];
@@ -40,3 +53,4 @@ export declare class LyricLineEl implements HasElement, Disposable {
     get isInSight(): boolean;
     dispose(): void;
 }
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@applemusic-like-lyrics/core",
   "packageManager": "yarn@3.6.1",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件",
   "repository": {
     "url": "https://github.com/Steve-xmh/applemusic-like-lyrics.git",
@@ -15,6 +15,7 @@
   "scripts": {
     "build:docs": "typedoc --plugin typedoc-plugin-markdown --out docs src/index.ts",
     "build": "vite build",
+    "build:dev": "vite build",
     "fmt": "rome format --write ./src",
     "dev": "vite dev"
   },
@@ -23,6 +24,7 @@
   "typings": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/amll-core.mjs",
       "require": "./dist/amll-core.cjs"
     }
@@ -33,10 +35,11 @@
     "lil-gui": "^0.18.2",
     "rome": "^12.1.3",
     "stats.js": "^0.17.0",
-    "typedoc": "^0.24.8",
-    "typedoc-plugin-markdown": "^3.15.3",
-    "vite": "^4.4.7",
-    "vite-plugin-dts": "^3.3.1",
+    "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-top-level-await": "^1.3.1",
     "vite-plugin-wasm": "^3.2.2"
   },
@@ -45,9 +48,13 @@
     "@pixi/core": "*",
     "@pixi/display": "*",
     "@pixi/filter-blur": "*",
+    "@pixi/filter-bulge-pinch": "*",
     "@pixi/filter-color-matrix": "*",
     "@pixi/sprite": "*",
     "jss": "*",
     "jss-preset-default": "*"
+  },
+  "dependencies": {
+    "node-vibrant": "^3.2.1-alpha.1"
   }
 }