chore: Optimize configuration updates in Danmuku and Setting classes

packages/artplayer-plugin-danmuku/src/danmuku.js

@@ -257,6 +257,13 @@ export default class Danmuku {
         const { clamp } = this.utils;
         const { $controlsCenter } = this.art.template;
 
+        // 判断配置项是否有变化
+        const changed = Object.keys(option).some(
+            (key) => JSON.stringify(this.option[key]) !== JSON.stringify(option[key]),
+        );
+
+        if (!changed) return this;
+
         this.option = Object.assign({}, Danmuku.option, this.option, option);
         this.validator(this.option, Danmuku.scheme);
 
@@ -269,11 +276,7 @@ export default class Danmuku {
 
         // 重新计算弹幕字体大小，需要重新渲染
         if (option.fontSize) {
-            const fontSize = this.getFontSize(this.option.fontSize);
-            if (fontSize !== this.option.fontSize) {
-                this.option.fontSize = fontSize;
-                this.reset();
-            }
+            this.reset();
         }
 
         // 通过配置项控制弹幕的显示和隐藏
@@ -303,10 +306,12 @@ export default class Danmuku {
     }
 
     // 计算弹幕字体大小
-    getFontSize(fontSize) {
+    get fontSize() {
         const { clamp } = this.utils;
         const { clientHeight } = this.$player;
 
+        const fontSize = this.option.fontSize;
+
         if (typeof fontSize === 'number') {
             return clamp(fontSize, 12, clientHeight);
         }
@@ -433,7 +438,7 @@ export default class Danmuku {
                         // 设置初始弹幕样式
                         danmu.$ref.style.left = `${clientWidth}px`;
                         danmu.$ref.style.opacity = this.option.opacity;
-                        danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
+                        danmu.$ref.style.fontSize = `${this.fontSize}px`;
                         danmu.$ref.style.color = danmu.color;
                         danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color}` : null;
                         danmu.$ref.style.backgroundColor = danmu.border ? 'rgb(0 0 0 / 50%)' : null;

packages/artplayer-plugin-danmuku/src/setting.js

@@ -382,12 +382,9 @@ export default class Setting {
             onChange: (index) => {
                 const { $opacityValue } = this.template;
                 $opacityValue.textContent = `${index}%`;
-                const value = index / 100;
-                if (value !== this.option.opacity) {
-                    this.danmuku.config({
-                        opacity: value,
-                    });
-                }
+                this.danmuku.config({
+                    opacity: index / 100,
+                });
             },
         });
 
@@ -406,12 +403,9 @@ export default class Setting {
                 if (!margin) return;
                 const { $marginValue } = this.template;
                 $marginValue.textContent = margin.name;
-                const value = margin.value;
-                if (value[0] !== this.option.margin[0] || value[1] !== this.option.margin[1]) {
-                    this.danmuku.config({
-                        margin: value,
-                    });
-                }
+                this.danmuku.config({
+                    margin: margin.value,
+                });
             },
         });
 
@@ -422,18 +416,14 @@ export default class Setting {
             container: this.template.$fontSizeSlider,
             findIndex: () => {
                 const { clientHeight } = this.art.template.$player;
-                return Math.round((this.option.fontSize / clientHeight) * 100);
+                return Math.round((this.danmuku.fontSize / clientHeight) * 100);
             },
             onChange: (index) => {
                 const { $fontSizeValue } = this.template;
-                const { clientHeight } = this.art.template.$player;
                 $fontSizeValue.textContent = `${index}%`;
-                const percent = Math.round((this.option.fontSize / clientHeight) * 100);
-                if (index !== percent) {
-                    this.danmuku.config({
-                        fontSize: `${index}%`,
-                    });
-                }
+                this.danmuku.config({
+                    fontSize: `${index}%`,
+                });
             },
         });
 
@@ -450,12 +440,9 @@ export default class Setting {
                 if (!speed) return;
                 const { $speedValue } = this.template;
                 $speedValue.textContent = speed.name;
-                const value = speed.value;
-                if (value !== this.option.speed) {
-                    this.danmuku.config({
-                        speed: value,
-                    });
-                }
+                this.danmuku.config({
+                    speed: speed.value,
+                });
             },
         });
     }