core: 修缮部分语法格式，更新 npm 包版本到 0.2.0-alpha.4

react: 更新 npm 包版本到 0.2.0-alpha.4
vue: 更新 npm 包版本到 0.2.0-alpha.4

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applemusic-like-lyrics/core",
-  "version": "0.2.0-alpha.3",
+  "version": "0.2.0-alpha.4",
   "description": "AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件",
   "repository": {
     "url": "https://github.com/Steve-xmh/applemusic-like-lyrics.git",

packages/core/src/bg-render/base.ts

@@ -1,4 +1,4 @@
-import { Disposable, HasElement } from "../interfaces";
+import type { Disposable, HasElement } from "../interfaces.ts";
 
 export abstract class AbstractBaseRenderer implements Disposable, HasElement {
 	/**
@@ -118,27 +118,27 @@ export abstract class BaseRenderer extends AbstractBaseRenderer {
 	 * 是否启用静态模式，即图片在更换后就会保持静止状态并禁用更新，以节省性能
 	 * @param enable 是否启用静态模式
 	 */
-	abstract setStaticMode(enable: boolean): void;
+	abstract override setStaticMode(enable: boolean): void;
 	/**
 	 * 修改背景动画帧率，默认是 30 FPS
 	 *
 	 * 如果设置成 0 则会停止动画
 	 * @param fps 目标帧率，默认 30 FPS
 	 */
-	abstract setFPS(fps: number): void;
+	abstract override setFPS(fps: number): void;
 	/**
 	 * 暂停背景动画，画面即便是更新了图片也不会发生变化
 	 */
-	abstract pause(): void;
+	abstract override pause(): void;
 	/**
 	 * 恢复播放背景动画
 	 */
-	abstract resume(): void;
+	abstract override resume(): void;
 	/**
 	 * 设置背景专辑资源，纹理加载并设置完成后会返回
 	 * @param albumSource 专辑的资源链接，可以是图片或视频链接，抑或是任意 img/video 元素，如果提供字符串链接且为视频则需要指定第二个参数
 	 */
-	abstract setAlbum(
+	abstract override setAlbum(
 		albumSource: string | HTMLImageElement | HTMLVideoElement,
 		isVideo?: boolean,
 	): Promise<void>;

packages/core/src/bg-render/index.ts

@@ -4,10 +4,10 @@
  * @author SteveXMH
  */
 
-export { AbstractBaseRenderer, BaseRenderer } from "./base";
-import { 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";
+import type { AbstractBaseRenderer, BaseRenderer } from "./base.ts";
 
 export class BackgroundRender<Renderer extends BaseRenderer>
 	implements AbstractBaseRenderer
@@ -26,8 +26,8 @@ export class BackgroundRender<Renderer extends BaseRenderer>
 	static new<Renderer extends BaseRenderer>(type: {
 		new (canvas: HTMLCanvasElement): Renderer;
 	}): BackgroundRender<Renderer> {
-		const canvas = document.createElement("canvas");
-		return new BackgroundRender(new type(canvas), canvas);
+		const newCanvas = document.createElement("canvas");
+		return new BackgroundRender(new type(newCanvas), newCanvas);
 	}
 
 	setRenderScale(scale: number): void {

packages/core/src/bg-render/mesh-renderer/index.ts

@@ -6,19 +6,19 @@
  */
 
 import { Mat4, Vec2, Vec3, Vec4 } from "gl-matrix";
-import type { Disposable } from "../../interfaces";
+import type { Disposable } from "../../interfaces.ts";
 import {
 	loadResourceFromElement,
 	loadResourceFromUrl,
-} from "../../utils/resource";
-import { BaseRenderer } from "../base";
+} from "../../utils/resource.ts";
+import { BaseRenderer } from "../base.ts";
 import {
 	blurImage,
 	brightnessImage,
 	contrastImage,
 	saturateImage,
-} from "../img";
-import { CONTROL_POINT_PRESETS } from "./cp-presets";
+} from "../img.ts";
+import { CONTROL_POINT_PRESETS } from "./cp-presets.ts";
 import meshFragShader from "./mesh.frag.glsl?raw";
 import meshVertShader from "./mesh.vert.glsl?raw";
 

packages/core/src/bg-render/pixi-renderer.ts

@@ -1,15 +1,15 @@
-import { Container } from "@pixi/display";
 import { Application } from "@pixi/app";
+import { Texture } from "@pixi/core";
+import { Container } from "@pixi/display";
 import { BlurFilter } from "@pixi/filter-blur";
+import { BulgePinchFilter } from "@pixi/filter-bulge-pinch";
 import { ColorMatrixFilter } from "@pixi/filter-color-matrix";
-import { Texture } from "@pixi/core";
 import { Sprite } from "@pixi/sprite";
-import { BulgePinchFilter } from "@pixi/filter-bulge-pinch";
-import { BaseRenderer } from "./base";
 import {
 	loadResourceFromElement,
 	loadResourceFromUrl,
 } from "../utils/resource";
+import { BaseRenderer } from "./base";
 
 class TimedContainer extends Container {
 	public time = 0;
@@ -87,7 +87,7 @@ export class PixiRenderer extends BaseRenderer {
 			}
 		}
 	};
-	constructor(protected canvas: HTMLCanvasElement) {
+	constructor(protected override canvas: HTMLCanvasElement) {
 		super(canvas);
 		this.app = new Application({
 			view: canvas,
@@ -120,9 +120,9 @@ export class PixiRenderer extends BaseRenderer {
 		c1.brightness(0.6, false);
 		const c2 = new ColorMatrixFilter();
 		c2.contrast(0.3, true);
-		this.app.stage.filters?.forEach((filter) => {
+		for (const filter of this.app.stage.filters ?? []) {
 			filter.destroy();
-		});
+		}
 		this.app.stage.filters = [];
 		this.app.stage.filters.push(new BlurFilter(5, 1));
 		this.app.stage.filters.push(new BlurFilter(10, 1));

packages/core/src/index.ts

@@ -1,4 +1,4 @@
-export * from "./bg-render";
-export type * from "./interfaces";
-export * from "./lyric-player";
-export type * as spring from "./utils/spring";
+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";

packages/core/src/lyric-player/base.ts

@@ -4,13 +4,13 @@ import type {
 	HasElement,
 	LyricLine,
 	LyricWord,
-} from "../interfaces";
+} from "../interfaces.ts";
 import styles from "../styles/lyric-player.module.css";
-import { eqSet } from "../utils/eq-set";
-import { isCJK } from "../utils/is-cjk.js";
-import { Spring, type SpringParams } from "../utils/spring";
-import { BottomLineEl } from "./bottom-line";
-import { InterludeDots } from "./dom/interlude-dots";
+import { eqSet } from "../utils/eq-set.ts";
+import { isCJK } from "../utils/is-cjk.ts";
+import { Spring, type SpringParams } from "../utils/spring.ts";
+import { BottomLineEl } from "./bottom-line.ts";
+import { InterludeDots } from "./dom/interlude-dots.ts";
 
 /**
  * 歌词播放器的基类，已经包含了有关歌词操作和排版的功能，子类需要为其实现对应的显示展示操作

packages/core/src/lyric-player/bottom-line.ts

@@ -1,8 +1,8 @@
-import type { Disposable, HasElement } from "../interfaces";
+import type { Disposable, HasElement } from "../interfaces.ts";
 import styles from "../styles/lyric-player.module.css";
-import { measure } from "../utils/schedule.js";
-import { Spring } from "../utils/spring";
-import type { LyricPlayerBase } from "./base";
+import { measure } from "../utils/schedule.ts";
+import { Spring } from "../utils/spring.ts";
+import type { LyricPlayerBase } from "./base.ts";
 
 export class BottomLineEl implements HasElement, Disposable {
 	private element: HTMLElement = document.createElement("div");

packages/core/src/lyric-player/canvas/index.ts

@@ -1,6 +1,6 @@
-import type { LyricLine } from "../../interfaces";
-import { LyricPlayerBase } from "../base";
-import { CanvasLyricLine } from "./lyric-line";
+import type { LyricLine } from "../../interfaces.ts";
+import { LyricPlayerBase } from "../base.ts";
+import { CanvasLyricLine } from "./lyric-line.ts";
 
 export class CanvasLyricPlayer extends LyricPlayerBase {
 	private canvasElement = document.createElement("canvas");

packages/core/src/lyric-player/canvas/lyric-line.ts

@@ -1,7 +1,7 @@
-import type { CanvasLyricPlayer } from ".";
-import type { LyricLine } from "../../interfaces";
-import { chunkAndSplitLyricWords } from "../../utils/lyric-split-words";
-import { LyricLineBase } from "../base";
+import type { LyricLine } from "../../interfaces.ts";
+import { chunkAndSplitLyricWords } from "../../utils/lyric-split-words.ts";
+import { LyricLineBase } from "../base.ts";
+import type { CanvasLyricPlayer } from "./index.ts";
 import {
 	type TextLayoutConfig,
 	type TextLayoutResult,

packages/core/src/lyric-player/dom-slim/interlude-dots.ts

@@ -1,4 +1,4 @@
-import type { Disposable, HasElement } from "../../interfaces";
+import type { Disposable, HasElement } from "../../interfaces.ts";
 import styles from "../../styles/lyric-player.module.css";
 
 function easeInOutBack(x: number): number {

packages/core/src/lyric-player/dom-slim/lyric-line.ts

@@ -1,5 +1,4 @@
 import bezier from "bezier-easing";
-import type { DomLyricPlayer } from ".";
 import type { LyricLine, LyricWord } from "../../interfaces.ts";
 import { chunkAndSplitLyricWords } from "../../utils/lyric-split-words.ts";
 import {
@@ -11,6 +10,7 @@ import { mutexifyFunction } from "../../utils/mutex.ts";
 import { measure, mutate } from "../../utils/schedule.ts";
 import { LyricLineBase } from "../base.ts";
 import styles from "./index.module.css";
+import type { DomSlimLyricPlayer } from "./index.ts";
 
 interface RealWord extends LyricWord {
 	mainElement: HTMLSpanElement;
@@ -93,7 +93,7 @@ export class LyricLineEl extends LyricLineBase {
 	lineSize: number[] = [0, 0];
 
 	constructor(
-		private lyricPlayer: DomLyricPlayer,
+		private lyricPlayer: DomSlimLyricPlayer,
 		private lyricLine: LyricLine = {
 			words: [],
 			translatedLyric: "",

packages/core/src/lyric-player/dom/index.ts

@@ -4,12 +4,12 @@
  * @author SteveXMH
  */
 
-import type { LyricLine } from "../../interfaces";
+import type { LyricLine } from "../../interfaces.ts";
 import "../../styles/index.css";
 import styles from "../../styles/lyric-player.module.css";
 import { debounce } from "../../utils/debounce.js";
-import { LyricPlayerBase } from "../base";
-import { LyricLineEl, type RawLyricLineMouseEvent } from "./lyric-line";
+import { LyricPlayerBase } from "../base.ts";
+import { LyricLineEl, type RawLyricLineMouseEvent } from "./lyric-line.ts";
 
 /**
  * 歌词行鼠标相关事件，可以获取到歌词行的索引和歌词行元素

packages/core/src/lyric-player/dom/interlude-dots.ts

@@ -1,4 +1,4 @@
-import type { Disposable, HasElement } from "../../interfaces";
+import type { Disposable, HasElement } from "../../interfaces.ts";
 import styles from "../../styles/lyric-player.module.css";
 
 function easeInOutBack(x: number): number {

packages/core/src/lyric-player/dom/lyric-line.ts

@@ -1,12 +1,16 @@
 import bezier from "bezier-easing";
 import type { DomLyricPlayer } from ".";
-import type { LyricLine, LyricWord } from "../../interfaces";
+import type { LyricLine, LyricWord } from "../../interfaces.ts";
 import styles from "../../styles/lyric-player.module.css";
-import { chunkAndSplitLyricWords } from "../../utils/lyric-split-words";
-import { createMatrix4, matrix4ToCSS, scaleMatrix4 } from "../../utils/matrix";
-import { mutexifyFunction } from "../../utils/mutex.js";
-import { measure, mutate } from "../../utils/schedule";
-import { LyricLineBase } from "../base";
+import { chunkAndSplitLyricWords } from "../../utils/lyric-split-words.ts";
+import {
+	createMatrix4,
+	matrix4ToCSS,
+	scaleMatrix4,
+} from "../../utils/matrix.ts";
+import { mutexifyFunction } from "../../utils/mutex.ts";
+import { measure, mutate } from "../../utils/schedule.ts";
+import { LyricLineBase } from "../base.ts";
 
 interface RealWord extends LyricWord {
 	mainElement: HTMLSpanElement;

packages/core/src/utils/lyric-split-words.ts

@@ -1,4 +1,4 @@
-import type { LyricWord } from "../interfaces";
+import type { LyricWord } from "../interfaces.ts";
 
 const CJKEXP = /^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u;
 
@@ -25,12 +25,14 @@ export function chunkAndSplitLyricWords(
 					word: " ",
 					startTime: 0,
 					endTime: 0,
+					obscene: false,
 				});
 			}
 			let charPos = 0;
 			for (const s of splited) {
 				const word: LyricWord = {
 					word: s,
+					obscene: w.obscene,
 					startTime:
 						w.startTime + (charPos / realLength) * (w.endTime - w.startTime),
 					endTime:
@@ -42,6 +44,7 @@ export function chunkAndSplitLyricWords(
 					word: " ",
 					startTime: 0,
 					endTime: 0,
+					obscene: false,
 				});
 				charPos += s.length;
 			}

packages/core/src/utils/spring.ts

@@ -1,4 +1,4 @@
-import { getVelocity } from "./derivative";
+import { getVelocity } from "./derivative.ts";
 
 /** MIT License github.com/pushkine/ */
 export interface SpringParams {

packages/core/src/utils/wa-spring.ts

@@ -1,5 +1,5 @@
-import { Disposable } from "..";
 import bezier from "bezier-easing";
+import type { Disposable } from "../interfaces.ts";
 import { getVelocity } from "./derivative";
 
 export interface SpringParams {
@@ -23,7 +23,7 @@ type CSSStyleKeys = {
  */
 export class WebAnimationSpring extends EventTarget implements Disposable {
 	private currentAnimation: Animation;
-	private targetPosition: number = 0;
+	private targetPosition = 0;
 	private isStatic = true;
 	private params: Partial<SpringParams> = {};
 	private currentSolver: (t: seconds) => number = () => this.targetPosition;
@@ -33,7 +33,7 @@ export class WebAnimationSpring extends EventTarget implements Disposable {
 		private element: HTMLElement,
 		private styleName: CSSStyleKeys,
 		private valueGenerator: (value: number) => string,
-		private currentPosition: number = 0,
+		private currentPosition = 0,
 	) {
 		super();
 		this.targetPosition = currentPosition;
@@ -65,7 +65,7 @@ export class WebAnimationSpring extends EventTarget implements Disposable {
 				},
 			],
 			{
-				duration: Infinity,
+				duration: Number.POSITIVE_INFINITY,
 				id: `wa-spring-static-${this.styleName}`,
 				fill: "both",
 				easing: "cubic-bezier(0.5, 0, 0.5, 1)",
@@ -81,21 +81,18 @@ export class WebAnimationSpring extends EventTarget implements Disposable {
 	}
 
 	getCurrentPosition() {
-		if (this.isStatic || !this.currentAnimation.effect) {
+		if (this.isStatic || !this.currentAnimation.effect)
 			return this.currentPosition;
-		} else {
-			const timing = this.currentAnimation.effect?.getComputedTiming();
-			return this.currentSolver(timing.progress ?? 1);
-		}
+
+		const timing = this.currentAnimation.effect?.getComputedTiming();
+		return this.currentSolver(timing.progress ?? 1);
 	}
 
 	getCurrentVelocity() {
-		if (this.isStatic || !this.currentAnimation.effect) {
-			return 0;
-		} else {
-			const timing = this.currentAnimation.effect?.getComputedTiming();
-			return this.getV(timing.progress ?? 1);
-		}
+		if (this.isStatic || !this.currentAnimation.effect) return 0;
+
+		const timing = this.currentAnimation.effect?.getComputedTiming();
+		return this.getV(timing.progress ?? 1);
 	}
 
 	private onStepFinished() {

packages/react-full/src/components/BouncingSlider/index.module.css

@@ -28,7 +28,7 @@
 		}
 	}
 
-	& > svg{
+	& > svg {
 		opacity: 0.5;
 	}
 }

packages/react-full/src/components/Cover/index.module.css

@@ -11,9 +11,9 @@
 	background-size: cover;
 	/* border-radius: max(2%, 0.7vh); */
 	filter: drop-shadow(
-			var(--base-box-shadow-v-0) 0px var(--base-box-shadow-y-0)
-				var(--base-box-shadow-r-0)
-		);
+		var(--base-box-shadow-v-0) 0px var(--base-box-shadow-y-0)
+			var(--base-box-shadow-r-0)
+	);
 	transform: scale(1);
 	transition: background-image 0.5s linear, filter 0.5s ease, transform 0.5s
 		cubic-bezier(0.3, 0.2, 0.2, 1.4);