@applemusic-like-lyrics/core 0.5.1 → 0.5.2

package/dist/amll-core.cjs

@@ -39,6 +39,7 @@ function clamp1(x) {
 	return Math.max(1, x);
 }
 var BaseRenderer = class extends AbstractBaseRenderer {
+	canvas;
 	observer;
 	flowSpeed = 1;
 	currerntRenderScale = .75;
@@ -563,10 +564,10 @@ function generateControlPoints(width, height, variationFraction = randomRange(.4
 }
 //#endregion
 //#region \0raw:/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/core/src/bg-render/mesh-renderer/mesh.frag.glsl
-var mesh_frag_default = "precision highp float;\r\n\r\nvarying vec3 v_color;\r\nvarying vec2 v_uv;\r\nuniform sampler2D u_texture;\r\nuniform float u_time;\r\nuniform float u_volume;\r\nuniform float u_alpha;\r\n\r\n// 预计算常量\r\nconst float INV_255 = 1.0 / 255.0;\r\nconst float HALF_INV_255 = 0.5 / 255.0;\r\nconst float GRADIENT_NOISE_A = 52.9829189;\r\nconst vec2 GRADIENT_NOISE_B = vec2(0.06711056, 0.00583715);\r\n\r\n/* Gradient noise from Jorge Jimenez's presentation: */\r\n/* http://www.iryoku.com/next-generation-post-processing-in-call-of-duty-advanced-warfare */\r\nfloat gradientNoise(in vec2 uv) {\r\n    return fract(GRADIENT_NOISE_A * fract(dot(uv, GRADIENT_NOISE_B)));\r\n}\r\n\r\n// 优化的旋转函数，避免重复计算sin/cos\r\nvec2 rot(vec2 v, float angle) {\r\n    float s = sin(angle);\r\n    float c = cos(angle);\r\n    return vec2(c * v.x - s * v.y, s * v.x + c * v.y);\r\n}\r\n\r\nvoid main() {\r\n    // 合并计算以减少指令数\r\n    float volumeEffect = u_volume * 2.0;\r\n    float timeVolume = u_time + u_volume;\r\n    \r\n    float dither = INV_255 * gradientNoise(gl_FragCoord.xy) - HALF_INV_255;\r\n    vec2 centeredUV = v_uv - vec2(0.2);\r\n    vec2 rotatedUV = rot(centeredUV, timeVolume * 2.0);\r\n    vec2 finalUV = rotatedUV * max(0.001, 1.0 - volumeEffect) + vec2(0.5);\r\n    \r\n    vec4 result = texture2D(u_texture, finalUV);\r\n    \r\n    float alphaVolumeFactor = u_alpha * max(0.5, 1.0 - u_volume * 0.5);\r\n    result.rgb *= v_color * alphaVolumeFactor;\r\n    result.a *= alphaVolumeFactor;\r\n    \r\n    result.rgb += vec3(dither);\r\n    \r\n    float dist = distance(v_uv, vec2(0.5));\r\n    float vignette = smoothstep(0.8, 0.3, dist);\r\n    float mask = 0.6 + vignette * 0.4;\r\n    result.rgb *= mask;\r\n    \r\n    gl_FragColor = result;\r\n}\r\n";
+var mesh_frag_default = "precision mediump float;\n\nvarying vec3 v_color;\nvarying vec2 v_uv;\nuniform sampler2D u_texture;\nuniform float u_volume;\nuniform float u_alpha;\nuniform float u_sinAngle;\nuniform float u_cosAngle;\n\n// 预计算常量\nconst float INV_255 = 1.0 / 255.0;\nconst float HALF_INV_255 = 0.5 / 255.0;\nconst float GRADIENT_NOISE_A = 52.9829189;\nconst vec2 GRADIENT_NOISE_B = vec2(0.06711056, 0.00583715);\n\nfloat gradientNoise(in vec2 uv) {\n    return fract(GRADIENT_NOISE_A * fract(dot(uv, GRADIENT_NOISE_B)));\n}\n\nvoid main() {\n    float volumeEffect = u_volume * 2.0;\n\n    float dither = INV_255 * gradientNoise(gl_FragCoord.xy) - HALF_INV_255;\n\n    vec2 centeredUV = v_uv - vec2(0.2);\n\n    vec2 rotatedUV = vec2(\n        u_cosAngle * centeredUV.x - u_sinAngle * centeredUV.y,\n        u_sinAngle * centeredUV.x + u_cosAngle * centeredUV.y\n    );\n\n    vec2 finalUV = rotatedUV * max(0.001, 1.0 - volumeEffect) + vec2(0.5);\n    \n    vec4 result = texture2D(u_texture, finalUV);\n    \n    float alphaVolumeFactor = u_alpha * max(0.5, 1.0 - u_volume * 0.5);\n    result.rgb *= v_color * alphaVolumeFactor;\n    result.a *= alphaVolumeFactor;\n    \n    result.rgb += vec3(dither);\n    \n    float dist = distance(v_uv, vec2(0.5));\n    float vignette = smoothstep(0.8, 0.3, dist);\n    float mask = 0.6 + vignette * 0.4;\n    result.rgb *= mask;\n    \n    gl_FragColor = result;\n}\n";
 //#endregion
 //#region \0raw:/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/core/src/bg-render/mesh-renderer/mesh.vert.glsl
-var mesh_vert_default = "precision highp float;\n\nattribute vec2 a_pos;\nattribute vec3 a_color;\nattribute vec2 a_uv;\nvarying vec3 v_color;\nvarying vec2 v_uv;\n\nuniform float u_aspect;\n\nvoid main() {\n    v_color = a_color;\n    v_uv = a_uv;\n    vec2 pos = a_pos;\n    if (u_aspect > 1.0) {\n        pos.y *= u_aspect;\n    } else {\n        pos.x /= u_aspect;\n    }\n    gl_Position = vec4(pos, 0.0, 1.0);\n}\n";
+var mesh_vert_default = "precision mediump float;\n\nattribute vec2 a_pos;\nattribute vec3 a_color;\nattribute vec2 a_uv;\nvarying vec3 v_color;\nvarying vec2 v_uv;\n\nuniform float u_aspect;\n\nvoid main() {\n    v_color = a_color;\n    v_uv = a_uv;\n    vec2 pos = a_pos;\n    if (u_aspect > 1.0) {\n        pos.y *= u_aspect;\n    } else {\n        pos.x /= u_aspect;\n    }\n    gl_Position = vec4(pos, 0.0, 1.0);\n}\n";
 //#endregion
 //#region src/bg-render/mesh-renderer/index.ts
 /**
@@ -597,6 +598,7 @@ function easeInOutSine(x) {
 	return -(Math.cos(Math.PI * x) - 1) / 2;
 }
 var GLProgram = class {
+	label;
 	gl;
 	program;
 	vertexShader;
@@ -678,6 +680,10 @@ var GLProgram = class {
 	}
 };
 var Mesh = class {
+	gl;
+	attrPos;
+	attrColor;
+	attrUV;
 	vertexWidth = 0;
 	vertexHeight = 0;
 	vertexBuffer;
@@ -1100,6 +1106,7 @@ var BHPMesh = class extends Mesh {
 	}
 };
 var GLTexture = class {
+	gl;
 	tex;
 	constructor(gl, albumImageData) {
 		this.gl = gl;
@@ -1265,11 +1272,14 @@ var MeshGradientRenderer = class extends BaseRenderer {
 			gl.clear(gl.COLOR_BUFFER_BIT);
 			this.mainProgram.use();
 			gl.activeTexture(gl.TEXTURE0);
-			this.mainProgram.setUniform1f("u_time", tickTime / 1e4);
+			const uTime = tickTime / 1e4;
 			this.mainProgram.setUniform1f("u_aspect", this.manualControl ? 1 : this.canvas.width / this.canvas.height);
 			this.mainProgram.setUniform1i("u_texture", 0);
 			this.mainProgram.setUniform1f("u_volume", this.volume);
 			this.mainProgram.setUniform1f("u_alpha", 1);
+			const angle = (uTime + this.volume) * 2;
+			this.mainProgram.setUniform1f("u_sinAngle", Math.sin(angle));
+			this.mainProgram.setUniform1f("u_cosAngle", Math.cos(angle));
 			state.texture.bind();
 			state.mesh.bind();
 			state.mesh.draw();
@@ -1507,6 +1517,7 @@ var TimedContainer = class extends _pixi_display.Container {
 	time = 0;
 };
 var PixiRenderer = class extends BaseRenderer {
+	canvas;
 	app;
 	curContainer;
 	staticMode = false;
@@ -1736,7 +1747,6 @@ var lyric_player_module_default = {
 	"bgWrapperHidden": "FmKaba_bgWrapperHidden",
 	"bgWrapperTop": "FmKaba_bgWrapperTop",
 	"bottomLine": "FmKaba_bottomLine",
-	"dirty": "FmKaba_dirty",
 	"disableSpring": "FmKaba_disableSpring",
 	"duet": "FmKaba_duet",
 	"emphasize": "FmKaba_emphasize",
@@ -2174,6 +2184,7 @@ function solveSpring(from, velocity, to, delay = 0, params) {
 //#endregion
 //#region src/lyric-player/base/bottom-line.ts
 var BottomLineEl = class {
+	lyricPlayer;
 	element = document.createElement("div");
 	left = 0;
 	top = 0;
@@ -3276,6 +3287,8 @@ var LyricPlayerBase = class extends EventTarget {
 //#endregion
 //#region src/lyric-player/base/group.ts
 var LyricLineGroupBase = class {
+	mainLine;
+	bgLine;
 	posY = new Spring(0);
 	bgSlideY = new Spring(-80);
 	top = 0;
@@ -3359,6 +3372,7 @@ var LyricLineGroupBase = class {
 //#endregion
 //#region src/lyric-player/dom/lyric-group.ts
 var LyricLineGroup = class extends LyricLineGroupBase {
+	lyricPlayer;
 	element;
 	bgWrapper;
 	lastIsActive;
@@ -3608,6 +3622,7 @@ function getMeasurementContext() {
 * 用于平衡歌词行在换行后的各行长度
 */
 var LineBalancer = class {
+	mainElement;
 	isBalancing = false;
 	lastBalancedContainerWidth = -1;
 	constructor(mainElement) {
@@ -3931,13 +3946,9 @@ function generateFadeGradient(width, padding = 0, bright = "rgba(0,0,0,var(--bri
 	const leftPos = (1 - widthInTotal) / 2;
 	return [`linear-gradient(to right,${bright} ${leftPos * 100}%,${dark} ${(leftPos + widthInTotal) * 100}%)`, totalAspect];
 }
-var RawLyricLineMouseEvent = class extends MouseEvent {
-	constructor(line, event) {
-		super(event.type, event);
-		this.line = line;
-	}
-};
 var LyricLineEl = class extends LyricLineBase {
+	lyricPlayer;
+	lyricLine;
 	element = document.createElement("div");
 	splittedWords = [];
 	built = false;
@@ -3978,33 +3989,6 @@ var LyricLineEl = class extends LyricLineBase {
 		if (LyricLineBase.wordSegmenter) this.balancer = new LineBalancer(main);
 		this.rebuildStyle();
 	}
-	listenersMap = /* @__PURE__ */ new Map();
-	onMouseEvent = (e) => {
-		const wrapped = new RawLyricLineMouseEvent(this, e);
-		for (const listener of this.listenersMap.get(e.type) ?? []) listener.call(this, wrapped);
-		if (!this.dispatchEvent(wrapped) || wrapped.defaultPrevented) {
-			e.preventDefault();
-			e.stopPropagation();
-			e.stopImmediatePropagation();
-		}
-	};
-	addMouseEventListener(type, callback, options) {
-		if (callback) {
-			const listeners = this.listenersMap.get(type) ?? /* @__PURE__ */ new Set();
-			if (listeners.size === 0) this.element.addEventListener(type, this.onMouseEvent, options);
-			listeners.add(callback);
-			this.listenersMap.set(type, listeners);
-		}
-	}
-	removeMouseEventListener(type, callback, options) {
-		if (callback) {
-			const listeners = this.listenersMap.get(type);
-			if (listeners) {
-				listeners.delete(callback);
-				if (listeners.size === 0) this.element.removeEventListener(type, this.onMouseEvent, options);
-			}
-		}
-	}
 	areWordsOnSameLine(word1, word2) {
 		if (word1?.mainElement && word2?.mainElement) {
 			const word1el = word1.mainElement;
@@ -4121,7 +4105,7 @@ var LyricLineEl = class extends LyricLineBase {
 		const trans = this.element.children[1];
 		const roman = this.element.children[2];
 		if (this.lyricPlayer._getIsNonDynamic()) {
-			main.innerText = this.lyricLine.words.map((w) => this.lyricPlayer.processObsceneWord(w)).join("");
+			main.textContent = this.lyricLine.words.map((w) => this.lyricPlayer.processObsceneWord(w)).join("");
 			this.setSubLinesText(trans, roman);
 			return;
 		}
@@ -4134,8 +4118,8 @@ var LyricLineEl = class extends LyricLineBase {
 	}
 	/** 设置翻译与音译行文本 */
 	setSubLinesText(trans, roman) {
-		trans.innerText = this.lyricLine.translatedLyric;
-		roman.innerText = this.lyricLine.romanLyric;
+		trans.textContent = this.lyricLine.translatedLyric;
+		roman.textContent = this.lyricLine.romanLyric;
 	}
 	getRubyCharCount(word) {
 		return (word.ruby ?? []).reduce((total, ruby) => total + ruby.word.length, 0);
@@ -4153,7 +4137,7 @@ var LyricLineEl = class extends LyricLineBase {
 			const rubySegments = this.getRubySegments(word);
 			for (const ruby of rubySegments) {
 				const rubyPartEl = document.createElement("span");
-				rubyPartEl.innerText = ruby.word;
+				rubyPartEl.textContent = ruby.word;
 				rubyPartEl.dataset.startTime = String(ruby.startTime);
 				rubyPartEl.dataset.endTime = String(ruby.endTime);
 				rubyWordEl.appendChild(rubyPartEl);
@@ -4170,24 +4154,24 @@ var LyricLineEl = class extends LyricLineBase {
 			const trimmedWord = displayWord.trim();
 			if (LyricLineBase.graphemeSegmenter) for (const { segment } of LyricLineBase.graphemeSegmenter.segment(trimmedWord)) {
 				const charEl = document.createElement("span");
-				charEl.innerText = segment;
+				charEl.textContent = segment;
 				subElements.push(charEl);
 				wordContainer.appendChild(charEl);
 			}
 			else for (const segment of Array.from(trimmedWord)) {
 				const charEl = document.createElement("span");
-				charEl.innerText = segment;
+				charEl.textContent = segment;
 				subElements.push(charEl);
 				wordContainer.appendChild(charEl);
 			}
 		} else if (hasRomanLine) {
 			const wordEl = document.createElement("div");
-			wordEl.innerText = displayWord.trim();
+			wordEl.textContent = displayWord.trim();
 			wordContainer.appendChild(wordEl);
-		} else if (romanWord.length === 0) wordContainer.innerText = displayWord.trim();
+		} else if (romanWord.length === 0) wordContainer.textContent = displayWord.trim();
 		if (hasRomanLine) {
 			const romanWordEl = document.createElement("div");
-			romanWordEl.innerText = romanWord.length > 0 ? romanWord : "\xA0";
+			romanWordEl.textContent = romanWord.length > 0 ? romanWord : "\xA0";
 			romanWordEl.classList.add(lyric_player_module_default.romanWord);
 			wordContainer.appendChild(romanWordEl);
 		}
@@ -4301,7 +4285,7 @@ var LyricLineEl = class extends LyricLineBase {
 			const glow = el.animate(frames, {
 				duration: animateDu,
 				delay: Number.isFinite(wordDe) ? wordDe : 0,
-				id: `emphasize-word-${el.innerText}-${i}`,
+				id: `emphasize-word-${el.textContent}-${i}`,
 				iterations: 1,
 				composite: "replace",
 				fill: "both"
@@ -4587,6 +4571,7 @@ var LyricLineEl = class extends LyricLineBase {
 		this.updateMaskAlphaTargets(currentScale);
 		this.applyAlphaToDom(delta);
 	}
+	/** @internal */
 	_getDebugTargetPos() {
 		return `[位移: ${this.top}; 缩放: ${this.scale}; 延时: ${this.delay}]`;
 	}
@@ -4627,13 +4612,29 @@ var LyricLineEl = class extends LyricLineBase {
 //#endregion
 //#region src/lyric-player/dom/index.ts
 /**
-* 歌词行鼠标相关事件，可以获取到歌词行的索引和歌词行元素
+* 歌词行鼠标相关事件，可以获取到歌词行的索引、主歌词行以及背景歌词行（如果有）元素
 */
 var LyricLineMouseEvent = class extends MouseEvent {
-	constructor(lineIndex, line, event) {
+	lineIndex;
+	line;
+	bgLine;
+	/**
+	* 自定义标志位，用于记录外部是否调用了 `stopPropagation`
+	*/
+	isPropagationStopped = false;
+	constructor(lineIndex, line, bgLine, event) {
 		super(`line-${event.type}`, event);
 		this.lineIndex = lineIndex;
 		this.line = line;
+		this.bgLine = bgLine;
+	}
+	stopPropagation() {
+		this.isPropagationStopped = true;
+		super.stopPropagation();
+	}
+	stopImmediatePropagation() {
+		this.isPropagationStopped = true;
+		super.stopImmediatePropagation();
 	}
 };
 /**
@@ -4642,6 +4643,7 @@ var LyricLineMouseEvent = class extends MouseEvent {
 * 尽可能贴切 Apple Music for iPad 的歌词效果设计，且做了力所能及的优化措施
 */
 var DomLyricPlayer = class extends LyricPlayerBase {
+	abortController = new AbortController();
 	currentLyricGroups = [];
 	onResize() {
 		const computedStyles = getComputedStyle(this.element);
@@ -4651,10 +4653,18 @@ var DomLyricPlayer = class extends LyricPlayerBase {
 	supportPlusLighter = CSS.supports("mix-blend-mode", "plus-lighter");
 	supportMaskImage = CSS.supports("mask-image", "none");
 	innerSize = [0, 0];
-	onLineClickedHandler = (e) => {
-		const evt = new LyricLineMouseEvent(this.lyricLinesIndexes.get(e.line) ?? -1, e.line, e);
-		if (!this.dispatchEvent(evt)) {
-			e.preventDefault();
+	onMouseEventHandler = (e) => {
+		const target = e.target;
+		if (!(target instanceof Element)) return;
+		const groupEl = target.closest(`.${lyric_player_module_default.lyricLineWrapper}`);
+		if (!groupEl) return;
+		const group = this.lyricGroupElementMap.get(groupEl);
+		if (!group) return;
+		const mainLine = group.mainLine;
+		const bgLine = group.bgLine;
+		const evt = new LyricLineMouseEvent(this.lyricLinesIndexes.get(mainLine) ?? -1, mainLine, bgLine, e);
+		if (!this.dispatchEvent(evt) || evt.defaultPrevented) e.preventDefault();
+		if (evt.isPropagationStopped) {
 			e.stopPropagation();
 			e.stopImmediatePropagation();
 		}
@@ -4675,6 +4685,8 @@ var DomLyricPlayer = class extends LyricPlayerBase {
 		this.onResize();
 		this.element.classList.add("amll-lyric-player", "dom");
 		if (this.disableSpring) this.element.classList.add(lyric_player_module_default.disableSpring);
+		this.element.addEventListener("click", this.onMouseEventHandler, { signal: this.abortController.signal });
+		this.element.addEventListener("contextmenu", this.onMouseEventHandler, { signal: this.abortController.signal });
 	}
 	rebuildStyle() {}
 	setWordFadeWidth(value = .5) {
@@ -4694,21 +4706,12 @@ var DomLyricPlayer = class extends LyricPlayerBase {
 		if (this.hasDuetLine) this.element.classList.add(lyric_player_module_default.hasDuetLine);
 		else this.element.classList.remove(lyric_player_module_default.hasDuetLine);
 		if (!this.supportMaskImage) this.element.style.setProperty("--amll-player-time", `${initialTime}`);
-		for (const group of this.currentLyricGroups) {
-			const linesToDispose = [group.mainLine, group.bgLine].filter((line) => !!line);
-			for (const line of linesToDispose) {
-				line.removeMouseEventListener("click", this.onLineClickedHandler);
-				line.removeMouseEventListener("contextmenu", this.onLineClickedHandler);
-			}
-			group.dispose();
-		}
+		for (const group of this.currentLyricGroups) group.dispose();
 		this.currentLyricGroups = [];
 		let currentGroup = null;
 		for (let i = 0; i < this.processedLines.length; i++) {
 			const line = this.processedLines[i];
 			const lineEl = new LyricLineEl(this, line);
-			lineEl.addMouseEventListener("click", this.onLineClickedHandler);
-			lineEl.addMouseEventListener("contextmenu", this.onLineClickedHandler);
 			this.lyricLinesIndexes.set(lineEl, i);
 			if (!line.isBG || !currentGroup) {
 				currentGroup = new LyricLineGroup(this, lineEl);
@@ -4751,6 +4754,7 @@ var DomLyricPlayer = class extends LyricPlayerBase {
 	}
 	dispose() {
 		super.dispose();
+		this.abortController.abort();
 		this.element.remove();
 		for (const group of this.currentLyricGroups) group.dispose();
 		this.bottomLine.dispose();