@applemusic-like-lyrics/react 0.5.2 → 0.6.0

package/dist/amll-react.d.mts

@@ -1,229 +1,242 @@
 import { AbstractBaseRenderer, BaseRenderer, BaseRenderer as BaseRenderer$1, LyricLine, LyricLineMouseEvent, LyricPlayerBase, MaskObsceneWordsMode, MeshGradientRenderer, OptimizeLyricOptions, PixiRenderer, spring } from "@applemusic-like-lyrics/core";
 import { ForwardRefExoticComponent, HTMLProps, RefAttributes } from "react";
 import { createPortal } from "react-dom";
-
 //#region src/bg-render.d.ts
 /**
-* 背景渲染组件的属性
-*/
+ * 背景渲染组件的属性
+ */
 interface BackgroundRenderProps {
   /**
-  * 设置背景专辑资源
-  */
+   * 设置背景专辑资源
+   */
   album?: string | HTMLImageElement | HTMLVideoElement;
   /**
-  * 设置专辑资源是否为视频
-  */
+   * 设置专辑资源是否为视频
+   */
   albumIsVideo?: boolean;
   /**
-  * 设置当前背景动画帧率，如果为 `undefined` 则默认为 `30`
-  */
+   * 设置当前背景动画帧率，如果为 `undefined` 则默认为 `30`
+   */
   fps?: number;
   /**
-  * 设置当前播放状态，如果为 `undefined` 则默认为 `true`
-  */
+   * 设置当前播放状态，如果为 `undefined` 则默认为 `true`
+   */
   playing?: boolean;
   /**
-  * 设置当前动画流动速度，如果为 `undefined` 则默认为 `2`
-  */
+   * 设置当前动画流动速度，如果为 `undefined` 则默认为 `2`
+   */
   flowSpeed?: number;
   /**
-  * 设置背景是否根据“是否有歌词”这个特征调整自身效果，例如有歌词时会变得更加活跃
-  *
-  * 部分渲染器会根据这个特征调整自身效果
-  *
-  * 如果不确定是否需要赋值或无法知晓是否包含歌词，请传入 true 或不做任何处理（默认值为 true）
-  */
+   * 设置背景是否根据“是否有歌词”这个特征调整自身效果，例如有歌词时会变得更加活跃
+   *
+   * 部分渲染器会根据这个特征调整自身效果
+   *
+   * 如果不确定是否需要赋值或无法知晓是否包含歌词，请传入 true 或不做任何处理（默认值为 true）
+   */
   hasLyric?: boolean;
   /**
-  * 设置低频的音量大小，范围在 80hz-120hz 之间为宜，取值范围在 [0.0-1.0] 之间
-  *
-  * 部分渲染器会根据音量大小调整背景效果（例如根据鼓点跳动）
-  *
-  * 如果无法获取到类似的数据，请传入 undefined 或 1.0 作为默认值，或不做任何处理（默认值即 1.0）
-  */
+   * 设置低频的音量大小，范围在 80hz-120hz 之间为宜，取值范围在 [0.0-1.0] 之间
+   *
+   * 部分渲染器会根据音量大小调整背景效果（例如根据鼓点跳动）
+   *
+   * 如果无法获取到类似的数据，请传入 undefined 或 1.0 作为默认值，或不做任何处理（默认值即 1.0）
+   */
   lowFreqVolume?: number;
   /**
-  * 设置当前渲染缩放比例，如果为 `undefined` 则默认为 `0.5`
-  */
+   * 设置当前渲染缩放比例，如果为 `undefined` 则默认为 `0.5`
+   */
   renderScale?: number;
   /**
-  * 是否启用静态模式，即图片在更换后就会保持静止状态并禁用更新，以节省性能
-  * 默认为 `false`
-  */
+   * 是否启用静态模式，即图片在更换后就会保持静止状态并禁用更新，以节省性能
+   * 默认为 `false`
+   */
   staticMode?: boolean;
   /**
-  * 设置渲染器，如果为 `undefined` 则默认为 `PixiRenderer`
-  * 默认渲染器有可能会随着版本更新而更换
-  */
+   * 设置渲染器，如果为 `undefined` 则默认为 `MeshGradientRenderer`
+   * 默认渲染器有可能会随着版本更新而更换
+   */
   renderer?: {
     new (...args: ConstructorParameters<typeof BaseRenderer$1>): BaseRenderer$1;
   };
+  /**
+   * 配置当前渲染器实例。
+   *
+   * 渲染器创建或回调变化后调用，可用于下发特定渲染器才支持的选项。
+   */
+  configureRenderer?: (renderer: BaseRenderer$1) => void;
 }
 /**
-* 背景渲染组件的引用
-*/
+ * 背景渲染组件的引用
+ */
 interface BackgroundRenderRef {
   /**
-  * 背景渲染实例引用
-  */
+   * 背景渲染实例引用
+   */
   bgRender?: AbstractBaseRenderer;
   /**
-  * 将背景渲染实例的元素包裹起来的 DIV 元素实例
-  */
+   * 将背景渲染实例的元素包裹起来的 DIV 元素实例
+   */
   wrapperEl: HTMLDivElement | null;
 }
 /**
-* 流体背景渲染组件，通过提供图片链接可以显示出酷似 Apple Music 的流体背景效果
-*/
+ * 流体背景渲染组件，通过提供图片链接可以显示出酷似 Apple Music 的流体背景效果
+ */
 declare const BackgroundRender: ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement> & BackgroundRenderProps, "ref"> & RefAttributes<BackgroundRenderRef>>;
 //#endregion
 //#region src/lyric-player.d.ts
 /**
-* 歌词播放组件的属性
-*/
+ * 歌词播放组件的属性
+ */
 interface LyricPlayerProps {
   /**
-  * 是否禁用歌词播放组件，默认为 `false`，歌词组件启用后将会开始逐帧更新歌词的动画效果，并对传入的其他参数变更做出反馈。
-  *
-  * 如果禁用了歌词组件动画，你也可以通过引用取得原始渲染组件实例，手动逐帧调用其 `update` 函数来更新动画效果。
-  */
+   * 是否禁用歌词播放组件，默认为 `false`，歌词组件启用后将会开始逐帧更新歌词的动画效果，并对传入的其他参数变更做出反馈。
+   *
+   * 如果禁用了歌词组件动画，你也可以通过引用取得原始渲染组件实例，手动逐帧调用其 `update` 函数来更新动画效果。
+   */
   disabled?: boolean;
   /**
-  * 是否演出部分效果，目前会控制播放间奏点的动画的播放暂停与否，默认为 `true`
-  */
+   * 是否演出部分效果，目前会控制播放间奏点的动画的播放暂停与否，默认为 `true`
+   */
   playing?: boolean;
   /**
-  * 设置歌词行的对齐方式，如果为 `undefined` 则默认为 `center`
-  *
-  * - 设置成 `top` 的话将会向目标歌词行的顶部对齐
-  * - 设置成 `bottom` 的话将会向目标歌词行的底部对齐
-  * - 设置成 `center` 的话将会向目标歌词行的垂直中心对齐
-  */
+   * 设置歌词行的对齐方式，如果为 `undefined` 则默认为 `center`
+   *
+   * - 设置成 `top` 的话将会向目标歌词行的顶部对齐
+   * - 设置成 `bottom` 的话将会向目标歌词行的底部对齐
+   * - 设置成 `center` 的话将会向目标歌词行的垂直中心对齐
+   */
   alignAnchor?: "top" | "bottom" | "center";
   /**
-  * 设置默认的歌词行对齐位置，相对于整个歌词播放组件的大小位置，如果为 `undefined`
-  * 则默认为 `0.5`
-  *
-  * 可以设置一个 `[0.0-1.0]` 之间的任意数字，代表组件高度由上到下的比例位置
-  */
+   * 设置默认的歌词行对齐位置，相对于整个歌词播放组件的大小位置，如果为 `undefined`
+   * 则默认为 `0.5`
+   *
+   * 可以设置一个 `[0.0-1.0]` 之间的任意数字，代表组件高度由上到下的比例位置
+   */
   alignPosition?: number;
   /**
-  * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
-  *
-  * 如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行
-  *
-  * 如果不启用，则会回退到基于 `transition` 的过渡效果，对低性能的机器比较友好，但是效果会比较单一
-  */
+   * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
+   *
+   * 如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行
+   *
+   * 如果不启用，则会回退到基于 `transition` 的过渡效果，对低性能的机器比较友好，但是效果会比较单一
+   */
   enableSpring?: boolean;
   /**
-  * 设置是否启用歌词行的模糊效果，默认为 `true`
-  */
+   * 设置是否启用歌词行的模糊效果，默认为 `true`
+   */
   enableBlur?: boolean;
   /**
-  * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
-  *
-  * 如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行
-  *
-  * 如果不启用，则会回退到基于 `transition` 的过渡效果，对低性能的机器比较友好，但是效果会比较单一
-  */
+   * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
+   *
+   * 如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行
+   *
+   * 如果不启用，则会回退到基于 `transition` 的过渡效果，对低性能的机器比较友好，但是效果会比较单一
+   */
   enableScale?: boolean;
   /**
-  * 设置是否隐藏已经播放过的歌词行，默认不隐藏
-  */
+   * 设置是否隐藏已经播放过的歌词行，默认不隐藏
+   */
   hidePassedLines?: boolean;
   /**
-  * 设置歌词中不雅用语的掩码模式，默认为 `MaskObsceneWordsMode.Disabled`，即不掩码
-  */
+   * 设置歌词中不雅用语的掩码模式，默认为 `MaskObsceneWordsMode.Disabled`，即不掩码
+   */
   maskObsceneWordsMode?: MaskObsceneWordsMode;
   /**
-  * 设置不雅用语掩码使用的字符，默认为 `*`
-  */
+   * 设置不雅用语掩码使用的字符，默认为 `*`
+   */
   maskObsceneWordChar?: string;
   /**
-  * 设置歌词优化选项
-  */
+   * 设置歌词优化选项
+   */
   optimizeOptions?: OptimizeLyricOptions;
   /**
-  * 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
-  */
+   * 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
+   */
   lyricLines?: LyricLine[];
   /**
-  * 设置当前播放进度，单位为毫秒且**必须是整数**，此时将会更新内部的歌词进度信息
-  * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好
-  */
+   * 设置当前播放进度，单位为毫秒且**必须是整数**，此时将会更新内部的歌词进度信息
+   * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好
+   */
   currentTime?: number;
+  /**
+   * 标识本次 {@link currentTime} 变化是否由跳转触发，将强制触发一次重新排版
+   *
+   * 此属性只标注 {@link currentTime} 的变化，本身不会触发推送，
+   * 因此 {@link currentTime} 未变化时改动它不产生任何效果
+   *
+   * @see https://amll.dev/guides/component/seeking
+   */
   isSeeking?: boolean;
   /**
-  * 设置文字动画的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位，默认为 0.5，即一个全角字符的一半宽度
-  *
-  * 如果要模拟 Apple Music for Android 的效果，可以设置为 1
-  *
-  * 如果要模拟 Apple Music for iPad 的效果，可以设置为 0.5
-  *
-  * 如果想要近乎禁用渐变效果，可以设置成非常接近 0 的小数（例如 `0.0001` ），但是**不可以为 0**
-  */
+   * 设置文字动画的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位，默认为 0.5，即一个全角字符的一半宽度
+   *
+   * 如果要模拟 Apple Music for Android 的效果，可以设置为 1
+   *
+   * 如果要模拟 Apple Music for iPad 的效果，可以设置为 0.5
+   *
+   * 如果想要近乎禁用渐变效果，可以设置成非常接近 0 的小数（例如 `0.0001` ），但是**不可以为 0**
+   */
   wordFadeWidth?: number;
   /**
-  * 设置所有歌词行在横坐标上的弹簧属性，包括重量、弹力和阻力。
-  *
-  * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
-  */
+   * 设置所有歌词行在横坐标上的弹簧属性，包括重量、弹力和阻力。
+   *
+   * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+   */
   linePosXSpringParams?: Partial<spring.SpringParams>;
   /**
-  * 设置所有歌词行在​纵坐标上的弹簧属性，包括重量、弹力和阻力。
-  *
-  * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
-  */
+   * 设置所有歌词行在​纵坐标上的弹簧属性，包括重量、弹力和阻力。
+   *
+   * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+   */
   linePosYSpringParams?: Partial<spring.SpringParams>;
   /**
-  * 设置所有歌词行在​缩放大小上的弹簧属性，包括重量、弹力和阻力。
-  *
-  * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
-  */
+   * 设置所有歌词行在​缩放大小上的弹簧属性，包括重量、弹力和阻力。
+   *
+   * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+   */
   lineScaleSpringParams?: Partial<spring.SpringParams>;
   /**
-  * 在一个特殊的底栏元素内加入指定元素，默认是空白的，可以往内部添加任意元素
-  *
-  * 这个元素始终在歌词的底部，可以用于显示歌曲创作者等信息
-  */
+   * 在一个特殊的底栏元素内加入指定元素，默认是空白的，可以往内部添加任意元素
+   *
+   * 这个元素始终在歌词的底部，可以用于显示歌曲创作者等信息
+   */
   bottomLine?: Parameters<typeof createPortal>[0];
   /**
-  * 需要用于创建歌词播放组件的类实例
-  */
+   * 需要用于创建歌词播放组件的类实例
+   */
   lyricPlayer?: {
     new (...args: ConstructorParameters<typeof LyricPlayerBase>): LyricPlayerBase;
   };
   /**
-  * 当某个歌词行被左键点击时触发的事件
-  * @param line 歌词行的事件对象，可以访问到对应的歌词行信息和歌词行索引
-  */
+   * 当某个歌词行被左键点击时触发的事件
+   * @param line 歌词行的事件对象，可以访问到对应的歌词行信息和歌词行索引
+   */
   onLyricLineClick?: (line: LyricLineMouseEvent) => void;
   /**
-  * 当某个歌词行被右键点击时触发的事件
-  * @param line 歌词行的事件对象，可以访问到对应的歌词行信息和歌词行索引
-  */
+   * 当某个歌词行被右键点击时触发的事件
+   * @param line 歌词行的事件对象，可以访问到对应的歌词行信息和歌词行索引
+   */
   onLyricLineContextMenu?: (line: LyricLineMouseEvent) => void;
 }
 /**
-* 歌词播放组件的引用
-*/
+ * 歌词播放组件的引用
+ */
 interface LyricPlayerRef {
   /**
-  * 歌词播放实例
-  */
+   * 歌词播放实例
+   */
   lyricPlayer?: LyricPlayerBase;
   /**
-  * 将歌词播放实例的元素包裹起来的 DIV 元素实例
-  */
+   * 将歌词播放实例的元素包裹起来的 DIV 元素实例
+   */
   wrapperEl: HTMLDivElement | null;
 }
 /**
-* 歌词播放组件，本框架的核心组件
-*
-* 尽可能贴切 Apple Music for iPad 的歌词效果设计，且做了力所能及的优化措施
-*/
+ * 歌词播放组件，本框架的核心组件
+ *
+ * 尽可能贴切 Apple Music for iPad 的歌词效果设计，且做了力所能及的优化措施
+ */
 declare const LyricPlayer: ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement> & LyricPlayerProps, "ref"> & RefAttributes<LyricPlayerRef>>;
 //#endregion
-export { BackgroundRender, BackgroundRenderProps, BackgroundRenderRef, BaseRenderer, LyricPlayer, LyricPlayerProps, LyricPlayerRef, MeshGradientRenderer, PixiRenderer };
+export { BackgroundRender, BackgroundRenderProps, BackgroundRenderRef, type BaseRenderer, LyricPlayer, LyricPlayerProps, LyricPlayerRef, MeshGradientRenderer, PixiRenderer };
 //# sourceMappingURL=amll-react.d.mts.map

package/dist/amll-react.mjs

@@ -1,4 +1,4 @@
-import { BackgroundRender as BackgroundRender$1, BaseRenderer, LyricPlayer as LyricPlayer$1, MaskObsceneWordsMode, MeshGradientRenderer, MeshGradientRenderer as MeshGradientRenderer$1, PixiRenderer } from "@applemusic-like-lyrics/core";
+import { BackgroundRender as BackgroundRender$1, BaseRenderer, LayoutReason, LyricPlayer as LyricPlayer$1, MaskObsceneWordsMode, MeshGradientRenderer, MeshGradientRenderer as MeshGradientRenderer$1, PixiRenderer } from "@applemusic-like-lyrics/core";
 import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -6,66 +6,98 @@ import { createPortal } from "react-dom";
 /**
 * 流体背景渲染组件，通过提供图片链接可以显示出酷似 Apple Music 的流体背景效果
 */
-const BackgroundRender = forwardRef(({ album, albumIsVideo, fps, playing, flowSpeed, renderScale, staticMode, lowFreqVolume, hasLyric, renderer, style, ...props }, ref) => {
+const BackgroundRender = forwardRef(({ album, albumIsVideo, fps, playing, flowSpeed, renderScale, staticMode, lowFreqVolume, hasLyric, renderer, configureRenderer, style, ...props }, ref) => {
 	const coreBGRenderRef = useRef(null);
 	const wrapperRef = useRef(null);
-	const lastRendererRef = useRef(null);
+	const configureRendererRef = useRef(configureRenderer);
+	configureRendererRef.current = configureRenderer;
+	const rendererPropsRef = useRef({
+		album,
+		albumIsVideo,
+		fps,
+		playing,
+		flowSpeed,
+		renderScale,
+		staticMode,
+		lowFreqVolume,
+		hasLyric
+	});
+	rendererPropsRef.current = {
+		album,
+		albumIsVideo,
+		fps,
+		playing,
+		flowSpeed,
+		renderScale,
+		staticMode,
+		lowFreqVolume,
+		hasLyric
+	};
 	const curRenderer = renderer ?? MeshGradientRenderer$1;
 	useEffect(() => {
-		if (lastRendererRef.current !== curRenderer || coreBGRenderRef.current === void 0) {
-			lastRendererRef.current = curRenderer;
-			coreBGRenderRef.current?.dispose();
-			coreBGRenderRef.current = BackgroundRender$1.new(curRenderer);
-		}
-	}, [curRenderer]);
+		const rendererInstance = coreBGRenderRef.current?.getRenderer();
+		if (rendererInstance) configureRenderer?.(rendererInstance);
+	}, [configureRenderer]);
 	useEffect(() => {
-		if (curRenderer && album) coreBGRenderRef.current?.setAlbum(album, albumIsVideo);
-	}, [
-		curRenderer,
-		album,
-		albumIsVideo
-	]);
+		if (album) coreBGRenderRef.current?.setAlbum(album, albumIsVideo);
+	}, [album, albumIsVideo]);
 	useEffect(() => {
-		if (curRenderer && fps) coreBGRenderRef.current?.setFPS(fps);
-	}, [curRenderer, fps]);
+		if (fps !== void 0) coreBGRenderRef.current?.setFPS(fps);
+	}, [fps]);
 	useEffect(() => {
-		if (!curRenderer) return;
 		if (playing === void 0) coreBGRenderRef.current?.resume();
 		else if (playing) coreBGRenderRef.current?.resume();
 		else coreBGRenderRef.current?.pause();
-	}, [curRenderer, playing]);
+	}, [playing]);
 	useEffect(() => {
-		if (!curRenderer) return;
-		if (flowSpeed) coreBGRenderRef.current?.setFlowSpeed(flowSpeed);
-	}, [curRenderer, flowSpeed]);
+		if (flowSpeed !== void 0) coreBGRenderRef.current?.setFlowSpeed(flowSpeed);
+	}, [flowSpeed]);
 	useEffect(() => {
-		if (!curRenderer) return;
 		coreBGRenderRef.current?.setStaticMode(staticMode ?? false);
-	}, [curRenderer, staticMode]);
-	useEffect(() => {
-		if (curRenderer && renderScale) coreBGRenderRef.current?.setRenderScale(renderScale ?? .5);
-	}, [curRenderer, renderScale]);
-	useEffect(() => {
-		if (curRenderer && lowFreqVolume) coreBGRenderRef.current?.setLowFreqVolume(lowFreqVolume ?? 1);
-	}, [curRenderer, lowFreqVolume]);
-	useEffect(() => {
-		if (curRenderer && hasLyric !== void 0) coreBGRenderRef.current?.setHasLyric(hasLyric ?? true);
-	}, [curRenderer, hasLyric]);
-	useEffect(() => {
-		if (coreBGRenderRef.current) {
-			const el = coreBGRenderRef.current.getElement();
-			el.style.width = "100%";
-			el.style.height = "100%";
-			el.style.minHeight = "0";
-			el.style.minWidth = "0";
-			el.style.overflow = "hidden";
-			wrapperRef.current?.appendChild(el);
-		}
-	}, [coreBGRenderRef.current]);
+	}, [staticMode]);
+	useEffect(() => {
+		if (renderScale !== void 0) coreBGRenderRef.current?.setRenderScale(renderScale);
+	}, [renderScale]);
+	useEffect(() => {
+		if (lowFreqVolume !== void 0) coreBGRenderRef.current?.setLowFreqVolume(lowFreqVolume);
+	}, [lowFreqVolume]);
+	useEffect(() => {
+		if (hasLyric !== void 0) coreBGRenderRef.current?.setHasLyric(hasLyric);
+	}, [hasLyric]);
+	useEffect(() => {
+		const backgroundRender = BackgroundRender$1.new(curRenderer);
+		coreBGRenderRef.current = backgroundRender;
+		configureRendererRef.current?.(backgroundRender.getRenderer());
+		const current = rendererPropsRef.current;
+		if (current.album) backgroundRender.setAlbum(current.album, current.albumIsVideo);
+		if (current.fps !== void 0) backgroundRender.setFPS(current.fps);
+		if (current.flowSpeed !== void 0) backgroundRender.setFlowSpeed(current.flowSpeed);
+		backgroundRender.setStaticMode(current.staticMode ?? false);
+		if (current.renderScale !== void 0) backgroundRender.setRenderScale(current.renderScale);
+		if (current.lowFreqVolume !== void 0) backgroundRender.setLowFreqVolume(current.lowFreqVolume);
+		if (current.hasLyric !== void 0) backgroundRender.setHasLyric(current.hasLyric);
+		if (current.playing === false) backgroundRender.pause();
+		else backgroundRender.resume();
+		const element = backgroundRender.getElement();
+		element.style.width = "100%";
+		element.style.height = "100%";
+		element.style.minHeight = "0";
+		element.style.minWidth = "0";
+		element.style.overflow = "hidden";
+		wrapperRef.current?.appendChild(element);
+		return () => {
+			backgroundRender.dispose();
+			if (coreBGRenderRef.current === backgroundRender) coreBGRenderRef.current = null;
+		};
+	}, [curRenderer]);
 	useImperativeHandle(ref, () => ({
-		wrapperEl: wrapperRef.current,
-		bgRender: coreBGRenderRef.current
-	}), [wrapperRef.current, coreBGRenderRef.current]);
+		get wrapperEl() {
+			return wrapperRef.current;
+		},
+		get bgRender() {
+			return coreBGRenderRef.current ?? void 0;
+		}
+	}), []);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			display: "contents",
@@ -86,6 +118,7 @@ const LyricPlayer = forwardRef(({ disabled, playing, alignAnchor, alignPosition,
 	const [corePlayer, setCorePlayer] = useState();
 	const wrapperRef = useRef(null);
 	const currentTimeRef = useRef(currentTime);
+	const prevLyricLinesRef = useRef(lyricLines);
 	useLayoutEffect(() => {
 		const newPlayer = new (lyricPlayer ?? LyricPlayer$1)();
 		setCorePlayer(newPlayer);
@@ -96,19 +129,29 @@ const LyricPlayer = forwardRef(({ disabled, playing, alignAnchor, alignPosition,
 		};
 	}, [lyricPlayer]);
 	useLayoutEffect(() => {
-		if (optimizeOptions !== void 0) corePlayer?.setOptimizeOptions(optimizeOptions);
-		if (lyricLines !== void 0) {
-			corePlayer?.setLyricLines(lyricLines, currentTimeRef.current);
-			if (currentTimeRef.current !== void 0) corePlayer?.setCurrentTime(currentTimeRef.current, true);
-			corePlayer?.update();
-		} else {
-			corePlayer?.setLyricLines([]);
-			corePlayer?.update();
-		}
+		if (!corePlayer) return;
+		corePlayer.setLyricProcessConfig({
+			optimizeOptions,
+			maskMode: maskObsceneWordsMode ?? MaskObsceneWordsMode.Disabled,
+			maskChar: maskObsceneWordChar ?? "*"
+		});
+		const lyricLinesChanged = prevLyricLinesRef.current !== lyricLines;
+		prevLyricLinesRef.current = lyricLines;
+		if (lyricLinesChanged || corePlayer.getLyricLines().length === 0) {
+			if (lyricLines !== void 0) {
+				corePlayer.setLyricLines(lyricLines, currentTimeRef.current);
+				corePlayer.update();
+			} else {
+				corePlayer.setLyricLines([]);
+				corePlayer.update();
+			}
+		} else corePlayer.rebuildLyricView(currentTimeRef.current);
 	}, [
 		corePlayer,
 		lyricLines,
-		optimizeOptions
+		optimizeOptions,
+		maskObsceneWordsMode,
+		maskObsceneWordChar
 	]);
 	useEffect(() => {
 		if (!disabled) {
@@ -121,7 +164,7 @@ const LyricPlayer = forwardRef(({ disabled, playing, alignAnchor, alignPosition,
 				lastTime = time;
 				requestAnimationFrame(onFrame);
 			};
-			corePlayer?.calcLayout();
+			corePlayer?.calcLayout(LayoutReason.ConfigChange);
 			requestAnimationFrame(onFrame);
 			return () => {
 				canceled = true;
@@ -129,9 +172,10 @@ const LyricPlayer = forwardRef(({ disabled, playing, alignAnchor, alignPosition,
 		}
 	}, [corePlayer, disabled]);
 	useEffect(() => {
-		if (playing !== void 0) if (playing) corePlayer?.resume();
-		else corePlayer?.pause();
-		else corePlayer?.resume();
+		if (playing !== void 0) {
+			if (playing) corePlayer?.resume();
+			else corePlayer?.pause();
+		} else corePlayer?.resume();
 	}, [corePlayer, playing]);
 	useEffect(() => {
 		if (alignAnchor !== void 0) corePlayer?.setAlignAnchor(alignAnchor);
@@ -161,14 +205,7 @@ const LyricPlayer = forwardRef(({ disabled, playing, alignAnchor, alignPosition,
 			corePlayer?.setCurrentTime(0);
 			currentTimeRef.current = 0;
 		}
-	}, [
-		corePlayer,
-		currentTime,
-		isSeeking
-	]);
-	useEffect(() => {
-		corePlayer?.setIsSeeking(!!isSeeking);
-	}, [corePlayer, isSeeking]);
+	}, [corePlayer, currentTime]);
 	useEffect(() => {
 		corePlayer?.setWordFadeWidth(wordFadeWidth);
 	}, [corePlayer, wordFadeWidth]);
@@ -181,13 +218,6 @@ const LyricPlayer = forwardRef(({ disabled, playing, alignAnchor, alignPosition,
 	useEffect(() => {
 		if (lineScaleSpringParams !== void 0) corePlayer?.setLineScaleSpringParams(lineScaleSpringParams);
 	}, [corePlayer, lineScaleSpringParams]);
-	useEffect(() => {
-		if (maskObsceneWordsMode !== void 0) corePlayer?.setMaskObsceneWords(maskObsceneWordsMode);
-		else corePlayer?.setMaskObsceneWords(MaskObsceneWordsMode.Disabled);
-	}, [corePlayer, maskObsceneWordsMode]);
-	useEffect(() => {
-		if (maskObsceneWordChar !== void 0) corePlayer?.setMaskObsceneWordChar(maskObsceneWordChar);
-	}, [corePlayer, maskObsceneWordChar]);
 	useEffect(() => {
 		if (onLyricLineClick) {
 			const handler = (e) => onLyricLineClick(e);