core: 尝试改善隐藏歌词行的性能，并优化暂停呈现效果

player: 修正部分代码

Author: Steve-xmh

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

@@ -627,7 +627,9 @@ export abstract class LyricPlayerBase
 			.reduce(
 				(acc, el) =>
 					acc +
-					(el.getLine().isBG ? 0 : (this.lyricLinesSize.get(el)?.[1] ?? 0)),
+					(el.getLine().isBG && this.isPlaying
+						? 0
+						: (this.lyricLinesSize.get(el)?.[1] ?? 0)),
 				0,
 			);
 		this.scrollBoundary[0] = -scrollOffset;
@@ -673,8 +675,12 @@ export abstract class LyricPlayerBase
 			let targetOpacity: number;
 
 			if (this.hidePassedLines) {
-				if (i < (interlude ? interlude[2] + 1 : this.scrollToIndex)) {
-					targetOpacity = 0;
+				if (
+					i < (interlude ? interlude[2] + 1 : this.scrollToIndex) &&
+					this.isPlaying
+				) {
+					// 为了避免浏览器优化，这里使用了一个极小但不为零的值（几乎不可见）
+					targetOpacity = 0.00001;
 				} else if (hasBuffered) {
 					targetOpacity = 0.85;
 				} else {
@@ -706,30 +712,33 @@ export abstract class LyricPlayerBase
 
 			const SCALE_ASPECT = this.enableScale ? 97 : 100;
 
+			let targetScale = 100;
+
+			if (!isActive && this.isPlaying) {
+				if (line.isBG) {
+					targetScale = 75;
+				} else {
+					targetScale = SCALE_ASPECT;
+				}
+			}
+
 			lineObj.setTransform(
 				curPos,
-				isActive ? 100 : line.isBG ? 75 : SCALE_ASPECT,
+				targetScale,
 				targetOpacity,
 				window.innerWidth <= 1024 ? blurLevel * 0.8 : blurLevel,
 				force,
 				delay,
 			);
-			if (line.isBG && isActive) {
+			if (line.isBG && (isActive || !this.isPlaying)) {
 				curPos += this.lyricLinesSize.get(lineObj)?.[1] ?? 0;
 			} else if (!line.isBG) {
 				curPos += this.lyricLinesSize.get(lineObj)?.[1] ?? 0;
 			}
 			if (curPos >= 0 && !this.isSeeking) {
 				if (!line.isBG) delay += baseDelay;
-				// if (i >= this.scrollToIndex - 1) baseDelay *= 1.05;
-				// baseDelay = Math.min(baseDelay, 0.055);
-
-				// delay += 0.05;
 
-				// baseDelay = baseDelay > 0.15 ? 0 : baseDelay;
-				// delay = (i - this.scrollToIndex) * 0.06;
 				if (i >= this.scrollToIndex) baseDelay /= 1.05;
-				// baseDelay = Math.max(baseDelay, 0.04);
 			}
 		});
 		this.scrollBoundary[1] = curPos + this.scrollOffset - this.size[1] / 2;
@@ -781,17 +790,26 @@ export abstract class LyricPlayerBase
 			}
 		}
 	}
+	protected isPlaying = true;
 	/**
-	 * 暂停部分效果演出，目前会暂停播放间奏点的动画
+	 * 暂停部分效果演出，目前会暂停播放间奏点的动画，且将背景歌词显示出来
 	 */
 	pause() {
 		this.interludeDots.pause();
+		if (this.isPlaying) {
+			this.isPlaying = false;
+			this.calcLayout();
+		}
 	}
 	/**
 	 * 恢复部分效果演出，目前会恢复播放间奏点的动画
 	 */
 	resume() {
 		this.interludeDots.resume();
+		if (!this.isPlaying) {
+			this.isPlaying = true;
+			this.calcLayout();
+		}
 	}
 	/**
 	 * 更新动画，这个函数应该被逐帧调用或者在以下情况下调用一次：

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

@@ -173,6 +173,7 @@ export class DomLyricPlayer extends LyricPlayerBase {
 
 	override pause() {
 		super.pause();
+		this.element.classList.remove("playing");
 		this.interludeDots.pause();
 		for (const line of this.currentLyricLineObjects) {
 			line.pause();
@@ -181,6 +182,7 @@ export class DomLyricPlayer extends LyricPlayerBase {
 
 	override resume() {
 		super.resume();
+		this.element.classList.add("playing");
 		this.interludeDots.resume();
 		for (const line of this.currentLyricLineObjects) {
 			line.resume();

packages/core/src/styles/lyric-player.module.css

@@ -40,7 +40,7 @@
 }
 
 .lyricBgLine {
-	opacity: 0;
+	opacity: 0.0001;
 	font-size: max(calc(1em * var(--amll-lp-bg-line-scale, 0.7)), 10px);
 	transition: opacity 0.25s, scale 0.5s, filter 0.2s, background-color 0.25s,
 		box-shadow 0.25s;
@@ -68,6 +68,10 @@
 			padding-left: 15%;
 		}
 	}
+
+	&:not(:global(.playing)) > .lyricBgLine {
+		opacity: 0.4;
+	}
 }
 
 .lyricDuetLine {

packages/core/src/utils/flagsets.ts

@@ -0,0 +1,23 @@
+const SAFE_FLAG_CHUNK_SIZE = Number.MAX_SAFE_INTEGER.toString(2).length;
+
+export class FlagSets {
+	private flags: number[] = [];
+
+	add(flag: number) {
+		const chunkIndex = (flag / SAFE_FLAG_CHUNK_SIZE) | 0;
+		const chunkOffset = flag % SAFE_FLAG_CHUNK_SIZE;
+		this.flags[chunkIndex] |= 1 << chunkOffset;
+	}
+
+	delete(flag: number) {
+		const chunkIndex = (flag / SAFE_FLAG_CHUNK_SIZE) | 0;
+		const chunkOffset = flag % SAFE_FLAG_CHUNK_SIZE;
+		this.flags[chunkIndex] &= ~(1 << chunkOffset);
+	}
+
+	has(flag: number) {
+		const chunkIndex = (flag / SAFE_FLAG_CHUNK_SIZE) | 0;
+		const chunkOffset = flag % SAFE_FLAG_CHUNK_SIZE;
+		return (this.flags[chunkIndex] & (1 << chunkOffset)) !== 0;
+	}
+}

packages/player/src/components/ExtensionContext/index.tsx

@@ -54,7 +54,7 @@ const SingleExtensionContext: FC<{
 }> = ({ extensionMeta, waitForDependency, extPromise }) => {
 	const store = useStore();
 	const { i18n } = useTranslation();
-	const cancelRef = useRef<Notify>();
+	const cancelRef = useRef<Notify>(undefined);
 	const setLoadedExtension = useSetAtom(loadedExtensionAtom);
 	useEffect(() => {
 		let canceled = false;

packages/player/src/components/NewPlaylistButton/index.tsx

@@ -1,5 +1,12 @@
 import { PlusIcon } from "@radix-ui/react-icons";
-import { Button, Dialog, Flex, TextField } from "@radix-ui/themes";
+import {
+	Button,
+	Dialog,
+	Flex,
+	Select,
+	Text,
+	TextField,
+} from "@radix-ui/themes";
 import { type FC, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { db } from "../../dexie.ts";
@@ -33,12 +40,26 @@ export const NewPlaylistButton: FC = () => {
 				<Dialog.Title>
 					<Trans i18nKey="newPlaylist.dialog.title">新建歌单</Trans>
 				</Dialog.Title>
-				<TextField.Root
-					placeholder={t("newPlaylist.dialog.namePlaceholder", "歌单名称")}
-					value={name}
-					onChange={(e) => setName(e.currentTarget.value)}
-					autoFocus
-				/>
+				<Flex gap="3" direction="column">
+					<Text>
+						<Trans i18nKey="newPlaylist.dialog.name">歌单名称</Trans>
+					</Text>
+					<TextField.Root
+						placeholder={t("newPlaylist.dialog.namePlaceholder", "歌单名称")}
+						value={name}
+						onChange={(e) => setName(e.currentTarget.value)}
+						autoFocus
+					/>
+					<Select.Root>
+						<Select.Trigger placeholder="歌单管理源" />
+						<Select.Content>
+							<Select.Item value="amll-player:local">本地歌曲源</Select.Item>
+							<Select.Item value="amll-player:android-music">
+								安卓内容提供者 - 音频媒体源
+							</Select.Item>
+						</Select.Content>
+					</Select.Root>
+				</Flex>
 				<Flex gap="3" mt="4" justify="end">
 					<Dialog.Close>
 						<Button type="button" variant="soft" color="gray">