@applemusic-like-lyrics/react-full 0.4.1 → 0.5.0

package/dist/amll-react-framework.mjs

@@ -1,13 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import React, { forwardRef, memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import classnames from "classnames";
+import classNames from "classnames";
 import { AnimatePresence, LayoutGroup, animate, motion, useAnimationFrame, useMotionTemplate, useMotionValue, useSpring, useTransform } from "framer-motion";
 import { Squircle } from "corner-smoothing";
-import { BackgroundRender, LyricPlayer, MeshGradientRenderer, PixiRenderer } from "@applemusic-like-lyrics/react";
+import { DomLyricPlayer, IsolationRenderer, MeshGradientRenderer, PixiRenderer } from "@applemusic-like-lyrics/core";
+import { BackgroundRender, LyricPlayer } from "@applemusic-like-lyrics/react";
 import structuredClone from "@ungap/structured-clone";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import { DomLyricPlayer, MeshGradientRenderer as MeshGradientRenderer$1, PixiRenderer as PixiRenderer$1 } from "@applemusic-like-lyrics/core";
 import { atomWithStorage } from "jotai/utils";
 //#region src/components/AudioFFTVisualizer/index.tsx
 globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
@@ -296,7 +296,7 @@ const AudioQualityTag = memo(forwardRef((t0, ref) => {
 	const t1 = onClick && index_module_default$10.clickable;
 	let t2;
 	if ($[7] !== className || $[8] !== t1) {
-		t2 = classnames(className, index_module_default$10.audioQualityTag, t1);
+		t2 = classNames(className, index_module_default$10.audioQualityTag, t1);
 		$[7] = className;
 		$[8] = t1;
 		$[9] = t2;
@@ -368,7 +368,7 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 		return inst;
 	}
 };
-const INITIAL_INSET = 12 / 2;
+const INITIAL_INSET = 6;
 const MAX_BOUNCE_DISTANCE = 12;
 const BouncingSlider = ({ className, style, value, min, max, isPlaying = false, onChange, onAfterChange, onBeforeChange, onSeeking, beforeIcon, afterIcon, changeOnDrag = false }) => {
 	const containerRef = useRef(null);
@@ -469,7 +469,7 @@ const BouncingSlider = ({ className, style, value, min, max, isPlaying = false,
 	};
 	return /* @__PURE__ */ jsxs(motion.div, {
 		ref: containerRef,
-		className: classnames(index_module_default$9.nowPlayingSlider, className),
+		className: classNames(index_module_default$9.nowPlayingSlider, className),
 		style: {
 			...style,
 			x: bounceXSpring
@@ -561,7 +561,7 @@ const ControlThumb = (t0) => {
 	const onMouseMove = t2;
 	let t3;
 	if ($[6] !== className) {
-		t3 = classnames(index_module_default$8.controlThumb, className);
+		t3 = classNames(index_module_default$8.controlThumb, className);
 		$[6] = className;
 		$[7] = t3;
 	} else t3 = $[7];
@@ -735,7 +735,7 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 * 一个专辑图组件
 */
 const Cover = forwardRef((t0, ref) => {
-	const $ = c(33);
+	const $ = c(36);
 	let className;
 	let coverIsVideo;
 	let coverUrl;
@@ -766,7 +766,7 @@ const Cover = forwardRef((t0, ref) => {
 	const t1 = musicPaused && index_module_default$7.musicPaused;
 	let t2;
 	if ($[8] !== className || $[9] !== t1) {
-		t2 = classnames(index_module_default$7.cover, t1, className);
+		t2 = classNames(index_module_default$7.cover, t1, className);
 		$[8] = className;
 		$[9] = t1;
 		$[10] = t2;
@@ -778,8 +778,10 @@ const Cover = forwardRef((t0, ref) => {
 	if ($[11] !== coverVideoPaused) {
 		t3 = () => {
 			const videoEl = videoRef.current;
-			if (videoEl) if (coverVideoPaused) videoEl.pause();
-			else videoEl.play();
+			if (videoEl) {
+				if (coverVideoPaused) videoEl.pause();
+				else videoEl.play();
+			}
 		};
 		t4 = [coverVideoPaused];
 		$[11] = coverVideoPaused;
@@ -817,34 +819,41 @@ const Cover = forwardRef((t0, ref) => {
 		t6 = $[15];
 	}
 	useLayoutEffect(t5, t6);
-	const t7 = pauseShrinkAspect ?? .75;
-	let t8;
-	if ($[16] !== t7) {
-		t8 = { "--scale-level": t7 };
-		$[16] = t7;
-		$[17] = t8;
-	} else t8 = $[17];
-	const t9 = t8;
-	let t10;
-	if ($[18] !== ref) {
-		t10 = (node) => {
+	let t7;
+	if ($[16] !== coverUrl) {
+		t7 = coverUrl?.startsWith("http://") || coverUrl?.startsWith("https://");
+		$[16] = coverUrl;
+		$[17] = t7;
+	} else t7 = $[17];
+	const isRemoteUrl = t7;
+	const t8 = pauseShrinkAspect ?? .75;
+	let t9;
+	if ($[18] !== t8) {
+		t9 = { "--scale-level": t8 };
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	const t10 = t9;
+	let t11;
+	if ($[20] !== ref) {
+		t11 = (node) => {
 			frameRef.current = node;
 			if (typeof ref === "function") ref(node);
 			else if (ref) ref.current = node;
 		};
-		$[18] = ref;
-		$[19] = t10;
-	} else t10 = $[19];
-	let t11;
-	if ($[20] !== coverIsVideo || $[21] !== coverUrl || $[22] !== pauseShrinkAspect) {
-		t11 = coverIsVideo ? /* @__PURE__ */ jsx("video", {
+		$[20] = ref;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== coverIsVideo || $[23] !== coverUrl || $[24] !== isRemoteUrl || $[25] !== pauseShrinkAspect) {
+		t12 = coverIsVideo ? /* @__PURE__ */ jsx("video", {
 			className: index_module_default$7.coverInner,
 			src: coverUrl,
 			autoPlay: true,
 			loop: true,
 			muted: true,
 			playsInline: true,
-			crossOrigin: "anonymous",
+			crossOrigin: isRemoteUrl ? "anonymous" : void 0,
 			ref: videoRef
 		}) : /* @__PURE__ */ jsx("div", {
 			className: index_module_default$7.coverInner,
@@ -853,40 +862,41 @@ const Cover = forwardRef((t0, ref) => {
 				"--scale-level": pauseShrinkAspect ?? .75
 			}
 		});
-		$[20] = coverIsVideo;
-		$[21] = coverUrl;
-		$[22] = pauseShrinkAspect;
-		$[23] = t11;
-	} else t11 = $[23];
-	let t12;
-	if ($[24] !== cornerRadius || $[25] !== t11) {
-		t12 = /* @__PURE__ */ jsx(Squircle, {
+		$[22] = coverIsVideo;
+		$[23] = coverUrl;
+		$[24] = isRemoteUrl;
+		$[25] = pauseShrinkAspect;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== cornerRadius || $[28] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Squircle, {
 			cornerRadius,
 			cornerSmoothing: .7,
 			className: index_module_default$7.coverInner,
-			children: t11
+			children: t12
 		});
-		$[24] = cornerRadius;
-		$[25] = t11;
-		$[26] = t12;
-	} else t12 = $[26];
-	let t13;
-	if ($[27] !== clsNames || $[28] !== rest || $[29] !== t10 || $[30] !== t12 || $[31] !== t9) {
-		t13 = /* @__PURE__ */ jsx("div", {
+		$[27] = cornerRadius;
+		$[28] = t12;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== clsNames || $[31] !== rest || $[32] !== t10 || $[33] !== t11 || $[34] !== t13) {
+		t14 = /* @__PURE__ */ jsx("div", {
 			className: clsNames,
-			style: t9,
-			ref: t10,
+			style: t10,
+			ref: t11,
 			...rest,
-			children: t12
+			children: t13
 		});
-		$[27] = clsNames;
-		$[28] = rest;
-		$[29] = t10;
-		$[30] = t12;
-		$[31] = t9;
-		$[32] = t13;
-	} else t13 = $[32];
-	return t13;
+		$[30] = clsNames;
+		$[31] = rest;
+		$[32] = t10;
+		$[33] = t11;
+		$[34] = t13;
+		$[35] = t14;
+	} else t14 = $[35];
+	return t14;
 });
 //#endregion
 //#region src/components/MediaButton/index.module.css
@@ -954,7 +964,7 @@ const MediaButton = memo((t0) => {
 	const handleAnimationEnd = t3;
 	let t4;
 	if ($[11] !== className || $[12] !== isAnimating) {
-		t4 = classnames(index_module_default$6.mediaButton, { [index_module_default$6.animate]: isAnimating }, className);
+		t4 = classNames(index_module_default$6.mediaButton, { [index_module_default$6.animate]: isAnimating }, className);
 		$[11] = className;
 		$[12] = isAnimating;
 		$[13] = t4;
@@ -1027,7 +1037,7 @@ const MenuButton = memo((t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = classnames(index_module_default$5.menuButton, className);
+		t1 = classNames(index_module_default$5.menuButton, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -1126,7 +1136,7 @@ const TextMarquee = memo((t0) => {
 	const onMouseLeave = t3;
 	let t4;
 	if ($[7] !== className) {
-		t4 = classnames(index_module_default$4.textMarquee, className);
+		t4 = classNames(index_module_default$4.textMarquee, className);
 		$[7] = className;
 		$[8] = t4;
 	} else t4 = $[8];
@@ -1208,7 +1218,7 @@ const MusicInfo = memo((t0) => {
 	}
 	let t1;
 	if ($[7] !== className) {
-		t1 = classnames(index_module_default$3.musicInfo, className);
+		t1 = classNames(index_module_default$3.musicInfo, className);
 		$[7] = className;
 		$[8] = t1;
 	} else t1 = $[8];
@@ -1350,7 +1360,7 @@ const HorizontalLayout = (t0) => {
 	const t2 = !asChild && hideLyric && horizontal_module_default.hideLyric;
 	let t3;
 	if ($[10] !== className || $[11] !== t1 || $[12] !== t2) {
-		t3 = classnames(className, t1, t2);
+		t3 = classNames(className, t1, t2);
 		$[10] = className;
 		$[11] = t1;
 		$[12] = t2;
@@ -1486,7 +1496,11 @@ const VerticalLayout = ({ thumbSlot, coverSlot, smallControlsSlot, bigControlsSl
 		const targetCover = hideLyric_0 ? phonyBigCoverRef.current : phonySmallCoverRef.current;
 		if (!targetCover || !rootEl) return;
 		const immerseCover_0 = immerseCoverRef.current;
-		while (getComputedStyle(rootEl).display === "contents") rootEl = rootEl.parentElement;
+		while (getComputedStyle(rootEl).display === "contents") {
+			const parentEl = rootEl.parentElement;
+			if (!parentEl) return;
+			rootEl = parentEl;
+		}
 		const rootB = rootEl.getBoundingClientRect();
 		const targetCoverB = targetCover.getBoundingClientRect();
 		if (immerseCover_0) {
@@ -1525,13 +1539,14 @@ const VerticalLayout = ({ thumbSlot, coverSlot, smallControlsSlot, bigControlsSl
 		});
 		obz.observe(phonyBigCoverEl);
 		obz.observe(phonySmallCoverEl);
-		setCurrentCoverStyle(calcCoverLayout(hideLyricRef.current));
+		const init = calcCoverLayout(hideLyricRef.current);
+		setCurrentCoverStyle(init);
 		return () => {
 			obz.disconnect();
 		};
 	}, [calcCoverLayout]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: classnames(className, !asChild && vertical_module_default.verticalLayout, !asChild && hideLyric && vertical_module_default.hideLyric),
+		className: classNames(className, !asChild && vertical_module_default.verticalLayout, !asChild && hideLyric && vertical_module_default.hideLyric),
 		ref: rootRef,
 		...rest,
 		children: [
@@ -1567,7 +1582,7 @@ const VerticalLayout = ({ thumbSlot, coverSlot, smallControlsSlot, bigControlsSl
 				})]
 			}),
 			currentCoverStyle && /* @__PURE__ */ jsx(motion.div, {
-				className: classnames(vertical_module_default.coverFrame, immerseCover && vertical_module_default.immerseCover),
+				className: classNames(vertical_module_default.coverFrame, immerseCover && vertical_module_default.immerseCover),
 				animate: currentCoverStyle,
 				initial: false,
 				transition: {
@@ -2005,7 +2020,7 @@ const ToggleIconButton = memo((t0) => {
 	}
 	let t1;
 	if ($[6] !== className) {
-		t1 = classnames(className, index_module_default$2.toggleIconButton);
+		t1 = classNames(className, index_module_default$2.toggleIconButton);
 		$[6] = className;
 		$[7] = t1;
 	} else t1 = $[7];
@@ -2676,22 +2691,59 @@ const showVolumeControlAtom = globalThis.jotaiAtomCache.get("/home/runner/work/a
 showVolumeControlAtom.debugLabel = "showVolumeControlAtom";
 const showBottomControlAtom = globalThis.jotaiAtomCache.get("/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/react-full/src/states/configAtoms.ts/showBottomControlAtom", atomWithStorage("amll-react-full.showBottomControl", true));
 showBottomControlAtom.debugLabel = "showBottomControlAtom";
-const getInitialBackgroundRenderer = () => {
-	switch (localStorage.getItem("amll-react-full.lyricBackgroundRenderer")) {
-		case "pixi": return { renderer: PixiRenderer$1 };
-		case "css-bg": return { renderer: "css-bg" };
-		default: return { renderer: MeshGradientRenderer$1 };
+const CSS_BACKGROUND_RENDERER_ID = "css-bg";
+const DEFAULT_BACKGROUND_RENDERER_ID = "mesh";
+/**
+* 所有可选的背景渲染器。
+*
+* `"css-bg"` 不在表内，因为它不是渲染器，而是固定的纯色 CSS 背景
+*/
+const BACKGROUND_RENDERERS = {
+	mesh: {
+		renderer: MeshGradientRenderer,
+		isSupported: () => MeshGradientRenderer.isSupported()
+	},
+	pixi: {
+		renderer: PixiRenderer,
+		isSupported: () => PixiRenderer.isSupported()
+	},
+	isolation: {
+		renderer: IsolationRenderer,
+		isSupported: () => IsolationRenderer.isSupported()
 	}
 };
+/** 背景渲染器配置在 localStorage 中的键名。 */
+const LYRIC_BACKGROUND_RENDERER_STORAGE_KEY = "amll-react-full.lyricBackgroundRenderer";
+/**
+* 把字符串标识解析成渲染器
+*
+* 如果传入的渲染器标识在当前环境不支持，则会依次回退到 Mesh 渲染器和 CSS 背景
+*/
+const resolveBackgroundRenderer = (id) => {
+	if (id === "css-bg") return CSS_BACKGROUND_RENDERER_ID;
+	const entry = BACKGROUND_RENDERERS[id];
+	if (entry?.isSupported()) return entry.renderer;
+	const fallback = BACKGROUND_RENDERERS[DEFAULT_BACKGROUND_RENDERER_ID];
+	if (fallback?.isSupported()) return fallback.renderer;
+	return CSS_BACKGROUND_RENDERER_ID;
+};
+const getInitialBackgroundRenderer = () => ({ renderer: resolveBackgroundRenderer(localStorage.getItem("amll-react-full.lyricBackgroundRenderer") ?? "mesh") });
 /**
 * 配置所使用的歌词背景渲染器
 */
 const lyricBackgroundRendererAtom = globalThis.jotaiAtomCache.get("/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/react-full/src/states/configAtoms.ts/lyricBackgroundRendererAtom", atom(getInitialBackgroundRenderer()));
 /**
+* Isolation 背景渲染器的专属选项
+*
+* 仅在背景渲染器为 Isolation 时生效
+*/
+lyricBackgroundRendererAtom.debugLabel = "lyricBackgroundRendererAtom";
+const isolationRendererOptionsAtom = globalThis.jotaiAtomCache.get("/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/react-full/src/states/configAtoms.ts/isolationRendererOptionsAtom", atomWithStorage("amll-react-full.isolationRendererOptions", { ...IsolationRenderer.defaultOptions }));
+/**
 * 当背景渲染器设置为纯色或CSS背景时，使用此值
 * @default "#111111"
 */
-lyricBackgroundRendererAtom.debugLabel = "lyricBackgroundRendererAtom";
+isolationRendererOptionsAtom.debugLabel = "isolationRendererOptionsAtom";
 const cssBackgroundPropertyAtom = globalThis.jotaiAtomCache.get("/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/react-full/src/states/configAtoms.ts/cssBackgroundPropertyAtom", atomWithStorage("amll-player.cssBackgroundProperty", "#111111"));
 /**
 * 调节背景的最大渲染帧率，较低的值可以提升性能
@@ -2927,6 +2979,10 @@ var index_module_default = {
 };
 //#endregion
 //#region src/components/PrebuiltLyricPlayer/index.tsx
+/**
+* @fileoverview
+* 已经部署好所有组件的歌词播放器组件，在正确设置所有的 Jotai 状态后可以开箱即用
+*/
 globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 	cache: /* @__PURE__ */ new Map(),
 	get(name, inst) {
@@ -3522,7 +3578,7 @@ const PrebuiltMusicControls = (t0) => {
 	const fftData = useAtomValue(fftDataAtom);
 	let t1;
 	if ($[4] !== className) {
-		t1 = classnames(index_module_default.controls, className);
+		t1 = classNames(index_module_default.controls, className);
 		$[4] = className;
 		$[5] = t1;
 	} else t1 = $[5];
@@ -3565,7 +3621,7 @@ const PrebuiltMusicControls = (t0) => {
 * 已经部署好所有组件的歌词播放器组件，在正确设置所有的 Jotai 状态后可以开箱即用
 */
 const PrebuiltLyricPlayer = (t0) => {
-	const $ = c(67);
+	const $ = c(74);
 	let bottomLineSlot;
 	let className;
 	let optimizeOptions;
@@ -3600,12 +3656,44 @@ const PrebuiltLyricPlayer = (t0) => {
 	const coverElRef = useRef(null);
 	const [layoutEl, setLayoutEl] = useState(null);
 	const backgroundRenderer = useAtomValue(lyricBackgroundRendererAtom);
-	const showBottomControl = useAtomValue(showBottomControlAtom);
-	const cssBackgroundProperty = useAtomValue(cssBackgroundPropertyAtom);
 	let t1;
+	bb0: {
+		const configured = backgroundRenderer.renderer;
+		if (typeof configured === "string") {
+			let t2;
+			if ($[5] !== configured) {
+				t2 = resolveBackgroundRenderer(configured);
+				$[5] = configured;
+				$[6] = t2;
+			} else t2 = $[6];
+			t1 = t2;
+			break bb0;
+		}
+		let t2;
+		if ($[7] !== configured) {
+			t2 = configured ?? resolveBackgroundRenderer("mesh");
+			$[7] = configured;
+			$[8] = t2;
+		} else t2 = $[8];
+		t1 = t2;
+	}
+	const resolvedBackgroundRenderer = t1;
+	const isolationRendererOptions = useAtomValue(isolationRendererOptionsAtom);
 	let t2;
-	if ($[5] !== isVertical || $[6] !== layoutEl) {
-		t1 = () => {
+	if ($[9] !== isolationRendererOptions) {
+		t2 = (renderer) => {
+			if (renderer instanceof IsolationRenderer) renderer.setOptions(isolationRendererOptions);
+		};
+		$[9] = isolationRendererOptions;
+		$[10] = t2;
+	} else t2 = $[10];
+	const configureBackgroundRenderer = t2;
+	const showBottomControl = useAtomValue(showBottomControlAtom);
+	const cssBackgroundProperty = useAtomValue(cssBackgroundPropertyAtom);
+	let t3;
+	let t4;
+	if ($[11] !== isVertical || $[12] !== layoutEl) {
+		t3 = () => {
 			if (!isVertical && coverElRef.current && layoutEl) {
 				const obz = new ResizeObserver(() => {
 					if (!(coverElRef.current && layoutEl)) return;
@@ -3623,59 +3711,59 @@ const PrebuiltLyricPlayer = (t0) => {
 				setAlignAnchor("top");
 			}
 		};
-		t2 = [isVertical, layoutEl];
-		$[5] = isVertical;
-		$[6] = layoutEl;
-		$[7] = t1;
-		$[8] = t2;
+		t4 = [isVertical, layoutEl];
+		$[11] = isVertical;
+		$[12] = layoutEl;
+		$[13] = t3;
+		$[14] = t4;
 	} else {
-		t1 = $[7];
-		t2 = $[8];
+		t3 = $[13];
+		t4 = $[14];
 	}
-	useLayoutEffect(t1, t2);
+	useLayoutEffect(t3, t4);
 	const verticalImmerseCover = hideLyricView && (verticalCoverLayout === "auto" ? musicCoverIsVideo && isVertical : verticalCoverLayout === "force-immersive");
-	let t3;
-	if ($[9] !== className) {
-		t3 = classnames(index_module_default.autoLyricLayout, className);
-		$[9] = className;
-		$[10] = t3;
-	} else t3 = $[10];
-	const t4 = !musicIsPlaying && !musicCoverIsVideo && verticalImmerseCover;
 	let t5;
-	if ($[11] !== musicCover || $[12] !== musicCoverIsVideo || $[13] !== t4) {
-		t5 = /* @__PURE__ */ jsx(Cover, {
+	if ($[15] !== className) {
+		t5 = classNames(index_module_default.autoLyricLayout, className);
+		$[15] = className;
+		$[16] = t5;
+	} else t5 = $[16];
+	const t6 = !musicIsPlaying && !musicCoverIsVideo && verticalImmerseCover;
+	let t7;
+	if ($[17] !== musicCover || $[18] !== musicCoverIsVideo || $[19] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Cover, {
 			coverUrl: musicCover,
 			coverIsVideo: musicCoverIsVideo,
 			ref: coverElRef,
-			musicPaused: t4
+			musicPaused: t6
 		});
-		$[11] = musicCover;
-		$[12] = musicCoverIsVideo;
-		$[13] = t4;
-		$[14] = t5;
-	} else t5 = $[14];
-	let t6;
-	if ($[15] !== onClickControlThumb) {
-		t6 = /* @__PURE__ */ jsx(ControlThumb, { onClick: onClickControlThumb });
-		$[15] = onClickControlThumb;
-		$[16] = t6;
-	} else t6 = $[16];
-	const t7 = hideLyricView && index_module_default.hideLyric;
+		$[17] = musicCover;
+		$[18] = musicCoverIsVideo;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
 	let t8;
-	if ($[17] !== t7) {
-		t8 = classnames(index_module_default.smallMusicInfo, t7);
-		$[17] = t7;
-		$[18] = t8;
-	} else t8 = $[18];
-	let t9;
-	if ($[19] !== t8) {
-		t9 = /* @__PURE__ */ jsx(PrebuiltMusicInfo, { className: t8 });
-		$[19] = t8;
-		$[20] = t9;
-	} else t9 = $[20];
+	if ($[21] !== onClickControlThumb) {
+		t8 = /* @__PURE__ */ jsx(ControlThumb, { onClick: onClickControlThumb });
+		$[21] = onClickControlThumb;
+		$[22] = t8;
+	} else t8 = $[22];
+	const t9 = hideLyricView && index_module_default.hideLyric;
 	let t10;
-	if ($[21] !== backgroundRenderer.renderer || $[22] !== cssBackgroundProperty || $[23] !== isLyricPageOpened || $[24] !== lowFreqVolume || $[25] !== lyricBackgroundFPS || $[26] !== lyricBackgroundRenderScale || $[27] !== lyricBackgroundStaticMode || $[28] !== musicCover || $[29] !== musicCoverIsVideo) {
-		t10 = typeof backgroundRenderer.renderer === "string" && backgroundRenderer.renderer === "css-bg" ? /* @__PURE__ */ jsx("div", { style: {
+	if ($[23] !== t9) {
+		t10 = classNames(index_module_default.smallMusicInfo, t9);
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t10) {
+		t11 = /* @__PURE__ */ jsx(PrebuiltMusicInfo, { className: t10 });
+		$[25] = t10;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== configureBackgroundRenderer || $[28] !== cssBackgroundProperty || $[29] !== isLyricPageOpened || $[30] !== lowFreqVolume || $[31] !== lyricBackgroundFPS || $[32] !== lyricBackgroundRenderScale || $[33] !== lyricBackgroundStaticMode || $[34] !== musicCover || $[35] !== musicCoverIsVideo || $[36] !== resolvedBackgroundRenderer) {
+		t12 = resolvedBackgroundRenderer === "css-bg" ? /* @__PURE__ */ jsx("div", { style: {
 			zIndex: -1,
 			width: "100%",
 			height: "100%",
@@ -3689,48 +3777,50 @@ const PrebuiltLyricPlayer = (t0) => {
 			lowFreqVolume,
 			renderScale: lyricBackgroundRenderScale,
 			fps: lyricBackgroundFPS,
-			renderer: typeof backgroundRenderer.renderer === "string" ? backgroundRenderer.renderer === "pixi" ? PixiRenderer : MeshGradientRenderer : backgroundRenderer.renderer,
+			renderer: resolvedBackgroundRenderer,
 			staticMode: lyricBackgroundStaticMode || !isLyricPageOpened,
+			configureRenderer: configureBackgroundRenderer,
 			style: { zIndex: -1 }
 		});
-		$[21] = backgroundRenderer.renderer;
-		$[22] = cssBackgroundProperty;
-		$[23] = isLyricPageOpened;
-		$[24] = lowFreqVolume;
-		$[25] = lyricBackgroundFPS;
-		$[26] = lyricBackgroundRenderScale;
-		$[27] = lyricBackgroundStaticMode;
-		$[28] = musicCover;
-		$[29] = musicCoverIsVideo;
-		$[30] = t10;
-	} else t10 = $[30];
-	const t11 = hideLyricView && index_module_default.hideLyric;
-	let t12;
-	if ($[31] !== t11) {
-		t12 = classnames(index_module_default.bigMusicInfo, t11);
-		$[31] = t11;
-		$[32] = t12;
-	} else t12 = $[32];
-	let t13;
-	if ($[33] !== t12) {
-		t13 = /* @__PURE__ */ jsx(PrebuiltMusicInfo, { className: t12 });
-		$[33] = t12;
-		$[34] = t13;
-	} else t13 = $[34];
+		$[27] = configureBackgroundRenderer;
+		$[28] = cssBackgroundProperty;
+		$[29] = isLyricPageOpened;
+		$[30] = lowFreqVolume;
+		$[31] = lyricBackgroundFPS;
+		$[32] = lyricBackgroundRenderScale;
+		$[33] = lyricBackgroundStaticMode;
+		$[34] = musicCover;
+		$[35] = musicCoverIsVideo;
+		$[36] = resolvedBackgroundRenderer;
+		$[37] = t12;
+	} else t12 = $[37];
+	const t13 = hideLyricView && index_module_default.hideLyric;
 	let t14;
+	if ($[38] !== t13) {
+		t14 = classNames(index_module_default.bigMusicInfo, t13);
+		$[38] = t13;
+		$[39] = t14;
+	} else t14 = $[39];
 	let t15;
-	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = /* @__PURE__ */ jsx(PrebuiltProgressBar, {});
-		t15 = /* @__PURE__ */ jsx(PrebuiltMusicControls, { className: index_module_default.bigControls });
-		$[35] = t14;
-		$[36] = t15;
+	if ($[40] !== t14) {
+		t15 = /* @__PURE__ */ jsx(PrebuiltMusicInfo, { className: t14 });
+		$[40] = t14;
+		$[41] = t15;
+	} else t15 = $[41];
+	let t16;
+	let t17;
+	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(PrebuiltProgressBar, {});
+		t17 = /* @__PURE__ */ jsx(PrebuiltMusicControls, { className: index_module_default.bigControls });
+		$[42] = t16;
+		$[43] = t17;
 	} else {
-		t14 = $[35];
-		t15 = $[36];
+		t16 = $[42];
+		t17 = $[43];
 	}
-	let t16;
-	if ($[37] !== hideLyricView || $[38] !== setHideLyricView || $[39] !== showBottomControl) {
-		t16 = showBottomControl && /* @__PURE__ */ jsxs("div", {
+	let t18;
+	if ($[44] !== hideLyricView || $[45] !== setHideLyricView || $[46] !== showBottomControl) {
+		t18 = showBottomControl && /* @__PURE__ */ jsxs("div", {
 			style: {
 				display: "flex",
 				justifyContent: "space-evenly"
@@ -3745,32 +3835,32 @@ const PrebuiltLyricPlayer = (t0) => {
 				/* @__PURE__ */ jsx(PrebuiltToggleIconButton, { type: "playlist" })
 			]
 		});
-		$[37] = hideLyricView;
-		$[38] = setHideLyricView;
-		$[39] = showBottomControl;
-		$[40] = t16;
-	} else t16 = $[40];
-	let t17;
-	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = /* @__PURE__ */ jsx(PrebuiltVolumeControl, { className: index_module_default.bigVolumeControl });
-		$[41] = t17;
-	} else t17 = $[41];
-	let t18;
-	if ($[42] !== t13 || $[43] !== t16) {
-		t18 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t13,
-			t14,
+		$[44] = hideLyricView;
+		$[45] = setHideLyricView;
+		$[46] = showBottomControl;
+		$[47] = t18;
+	} else t18 = $[47];
+	let t19;
+	if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(PrebuiltVolumeControl, { className: index_module_default.bigVolumeControl });
+		$[48] = t19;
+	} else t19 = $[48];
+	let t20;
+	if ($[49] !== t15 || $[50] !== t18) {
+		t20 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t15,
 			t16,
-			t17
+			t17,
+			t18,
+			t19
 		] });
-		$[42] = t13;
-		$[43] = t16;
-		$[44] = t18;
-	} else t18 = $[44];
-	let t19;
-	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = /* @__PURE__ */ jsxs(Fragment, { children: [
+		$[49] = t15;
+		$[50] = t18;
+		$[51] = t20;
+	} else t20 = $[51];
+	let t21;
+	if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(PrebuiltMusicInfo, { className: index_module_default.horizontalControls }),
 			/* @__PURE__ */ jsx(PrebuiltProgressBar, {}),
 			/* @__PURE__ */ jsx(PrebuiltMusicControls, {
@@ -3779,11 +3869,11 @@ const PrebuiltLyricPlayer = (t0) => {
 			}),
 			/* @__PURE__ */ jsx(PrebuiltVolumeControl, {})
 		] });
-		$[45] = t19;
-	} else t19 = $[45];
-	let t20;
-	if ($[46] !== hideLyricView || $[47] !== setHideLyricView || $[48] !== showBottomControl) {
-		t20 = showBottomControl && /* @__PURE__ */ jsxs(Fragment, { children: [
+		$[52] = t21;
+	} else t21 = $[52];
+	let t22;
+	if ($[53] !== hideLyricView || $[54] !== setHideLyricView || $[55] !== showBottomControl) {
+		t22 = showBottomControl && /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(PrebuiltToggleIconButton, { type: "playlist" }),
 			/* @__PURE__ */ jsx(PrebuiltToggleIconButton, {
 				type: "lyrics",
@@ -3793,57 +3883,57 @@ const PrebuiltLyricPlayer = (t0) => {
 			/* @__PURE__ */ jsx("div", { style: { flex: "1" } }),
 			/* @__PURE__ */ jsx(PrebuiltToggleIconButton, { type: "airplay" })
 		] });
-		$[46] = hideLyricView;
-		$[47] = setHideLyricView;
-		$[48] = showBottomControl;
-		$[49] = t20;
-	} else t20 = $[49];
-	let t21;
-	if ($[50] !== alignAnchor || $[51] !== alignPosition || $[52] !== bottomLineSlot || $[53] !== optimizeOptions) {
-		t21 = /* @__PURE__ */ jsx(PrebuiltCoreLyricPlayer, {
+		$[53] = hideLyricView;
+		$[54] = setHideLyricView;
+		$[55] = showBottomControl;
+		$[56] = t22;
+	} else t22 = $[56];
+	let t23;
+	if ($[57] !== alignAnchor || $[58] !== alignPosition || $[59] !== bottomLineSlot || $[60] !== optimizeOptions) {
+		t23 = /* @__PURE__ */ jsx(PrebuiltCoreLyricPlayer, {
 			alignPosition,
 			alignAnchor,
 			bottomLine: bottomLineSlot,
 			optimizeOptions
 		});
-		$[50] = alignAnchor;
-		$[51] = alignPosition;
-		$[52] = bottomLineSlot;
-		$[53] = optimizeOptions;
-		$[54] = t21;
-	} else t21 = $[54];
-	let t22;
-	if ($[55] !== hideLyricView || $[56] !== rest || $[57] !== t10 || $[58] !== t18 || $[59] !== t20 || $[60] !== t21 || $[61] !== t3 || $[62] !== t5 || $[63] !== t6 || $[64] !== t9 || $[65] !== verticalImmerseCover) {
-		t22 = /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AutoLyricLayout, {
+		$[57] = alignAnchor;
+		$[58] = alignPosition;
+		$[59] = bottomLineSlot;
+		$[60] = optimizeOptions;
+		$[61] = t23;
+	} else t23 = $[61];
+	let t24;
+	if ($[62] !== hideLyricView || $[63] !== rest || $[64] !== t11 || $[65] !== t12 || $[66] !== t20 || $[67] !== t22 || $[68] !== t23 || $[69] !== t5 || $[70] !== t7 || $[71] !== t8 || $[72] !== verticalImmerseCover) {
+		t24 = /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AutoLyricLayout, {
 			onElementMounted: setLayoutEl,
-			className: t3,
+			className: t5,
 			onLayoutChange: setIsVertical,
 			verticalImmerseCover,
-			coverSlot: t5,
-			thumbSlot: t6,
-			smallControlsSlot: t9,
-			backgroundSlot: t10,
-			bigControlsSlot: t18,
-			controlsSlot: t19,
-			horizontalBottomControls: t20,
-			lyricSlot: t21,
+			coverSlot: t7,
+			thumbSlot: t8,
+			smallControlsSlot: t11,
+			backgroundSlot: t12,
+			bigControlsSlot: t20,
+			controlsSlot: t21,
+			horizontalBottomControls: t22,
+			lyricSlot: t23,
 			hideLyric: hideLyricView,
 			...rest
 		}) });
-		$[55] = hideLyricView;
-		$[56] = rest;
-		$[57] = t10;
-		$[58] = t18;
-		$[59] = t20;
-		$[60] = t21;
-		$[61] = t3;
-		$[62] = t5;
-		$[63] = t6;
-		$[64] = t9;
-		$[65] = verticalImmerseCover;
-		$[66] = t22;
-	} else t22 = $[66];
-	return t22;
+		$[62] = hideLyricView;
+		$[63] = rest;
+		$[64] = t11;
+		$[65] = t12;
+		$[66] = t20;
+		$[67] = t22;
+		$[68] = t23;
+		$[69] = t5;
+		$[70] = t7;
+		$[71] = t8;
+		$[72] = verticalImmerseCover;
+		$[73] = t24;
+	} else t24 = $[73];
+	return t24;
 };
 function _temp(v) {
 	return v.name;
@@ -3859,6 +3949,6 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 	}
 };
 //#endregion
-export { AudioFFTVisualizer, AudioQualityTag, AudioQualityType, AutoLyricLayout, BouncingSlider, ControlThumb, Cover, HorizontalLayout, LyricPlayerImplementation, LyricSizePreset, MediaButton, MenuButton, MusicInfo, PlayerControlsType, PrebuiltLyricPlayer, PrebuiltToggleIconButton, PrebuiltToggleIconButtonType, RepeatMode, TextMarquee, ToggleIconButton, VerticalCoverLayout, VerticalLayout, VolumeControl, cssBackgroundPropertyAtom, cycleRepeatModeActionAtom, enableLyricLineBlurEffectAtom, enableLyricLineScaleEffectAtom, enableLyricLineSpringAnimationAtom, enableLyricRomanLineAtom, enableLyricSwapTransRomanLineAtom, enableLyricTranslationLineAtom, fftDataAtom, fftDataRangeAtom, hideLyricViewAtom, isLyricPageOpenedAtom, isRepeatEnabledAtom, isShuffleActiveAtom, isShuffleEnabledAtom, lowFreqVolumeAtom, lyricBackgroundFPSAtom, lyricBackgroundRenderScaleAtom, lyricBackgroundRendererAtom, lyricBackgroundStaticModeAtom, lyricFontFamilyAtom, lyricFontWeightAtom, lyricLetterSpacingAtom, lyricPlayerImplementationAtom, lyricSizePresetAtom, lyricWordFadeWidthAtom, musicAlbumNameAtom, musicArtistsAtom, musicCoverAtom, musicCoverIsVideoAtom, musicDurationAtom, musicIdAtom, musicLyricLinesAtom, musicNameAtom, musicPlayingAtom, musicPlayingPositionAtom, musicQualityAtom, musicQualityTagAtom, musicVolumeAtom, onChangeVolumeAtom, onClickAudioQualityTagAtom, onClickControlThumbAtom, onCycleRepeatModeAtom, onLyricLineClickAtom, onLyricLineContextMenuAtom, onPlayOrResumeAtom, onRequestNextSongAtom, onRequestOpenMenuAtom, onRequestPrevSongAtom, onSeekPositionAtom, onToggleShuffleAtom, playerControlsTypeAtom, repeatModeAtom, showBottomControlAtom, showMusicAlbumAtom, showMusicArtistsAtom, showMusicNameAtom, showRemainingTimeAtom, showVolumeControlAtom, toDuration, toggleShuffleActionAtom, verticalCoverLayoutAtom };
+export { AudioFFTVisualizer, AudioQualityTag, AudioQualityType, AutoLyricLayout, BACKGROUND_RENDERERS, BouncingSlider, CSS_BACKGROUND_RENDERER_ID, ControlThumb, Cover, DEFAULT_BACKGROUND_RENDERER_ID, HorizontalLayout, LYRIC_BACKGROUND_RENDERER_STORAGE_KEY, LyricPlayerImplementation, LyricSizePreset, MediaButton, MenuButton, MusicInfo, PlayerControlsType, PrebuiltLyricPlayer, PrebuiltToggleIconButton, PrebuiltToggleIconButtonType, RepeatMode, TextMarquee, ToggleIconButton, VerticalCoverLayout, VerticalLayout, VolumeControl, cssBackgroundPropertyAtom, cycleRepeatModeActionAtom, enableLyricLineBlurEffectAtom, enableLyricLineScaleEffectAtom, enableLyricLineSpringAnimationAtom, enableLyricRomanLineAtom, enableLyricSwapTransRomanLineAtom, enableLyricTranslationLineAtom, fftDataAtom, fftDataRangeAtom, hideLyricViewAtom, isLyricPageOpenedAtom, isRepeatEnabledAtom, isShuffleActiveAtom, isShuffleEnabledAtom, isolationRendererOptionsAtom, lowFreqVolumeAtom, lyricBackgroundFPSAtom, lyricBackgroundRenderScaleAtom, lyricBackgroundRendererAtom, lyricBackgroundStaticModeAtom, lyricFontFamilyAtom, lyricFontWeightAtom, lyricLetterSpacingAtom, lyricPlayerImplementationAtom, lyricSizePresetAtom, lyricWordFadeWidthAtom, musicAlbumNameAtom, musicArtistsAtom, musicCoverAtom, musicCoverIsVideoAtom, musicDurationAtom, musicIdAtom, musicLyricLinesAtom, musicNameAtom, musicPlayingAtom, musicPlayingPositionAtom, musicQualityAtom, musicQualityTagAtom, musicVolumeAtom, onChangeVolumeAtom, onClickAudioQualityTagAtom, onClickControlThumbAtom, onCycleRepeatModeAtom, onLyricLineClickAtom, onLyricLineContextMenuAtom, onPlayOrResumeAtom, onRequestNextSongAtom, onRequestOpenMenuAtom, onRequestPrevSongAtom, onSeekPositionAtom, onToggleShuffleAtom, playerControlsTypeAtom, repeatModeAtom, resolveBackgroundRenderer, showBottomControlAtom, showMusicAlbumAtom, showMusicArtistsAtom, showMusicNameAtom, showRemainingTimeAtom, showVolumeControlAtom, toDuration, toggleShuffleActionAtom, verticalCoverLayoutAtom };
 
 //# sourceMappingURL=amll-react-framework.mjs.map