chore: Update danmuku plugin configuration handling and improve performance

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

@@ -18,6 +18,7 @@ export default class Danmuku {
         this.isStop = false; // 是否停止
         this.isHide = false; // 是否隐藏
         this.timer = null; // 定时器
+        this.index = 0; // 弹幕索引
 
         // 弹幕状态池
         this.states = {
@@ -75,6 +76,11 @@ export default class Danmuku {
             maxLength: 200, // 弹幕输入框最大长度, 范围在[1 ~ 1000]
             lockTime: 5, // 输入框锁定时间，范围在[1 ~ 60]
             theme: 'dark', // 弹幕主题，支持 dark 和 light，只在自定义挂载时生效
+            OPACITY: {}, // 不透明度配置项
+            FONT_SIZE: {}, // 弹幕字号配置项
+            MARGIN: {}, // 显示区域配置项
+            SPEED: {}, // 弹幕速度配置项
+            COLOR: [], // 颜色列表配置项
         };
     }
 
@@ -101,6 +107,11 @@ export default class Danmuku {
             maxLength: 'number',
             lockTime: 'number',
             theme: 'string',
+            OPACITY: 'object',
+            FONT_SIZE: 'object',
+            MARGIN: 'object',
+            SPEED: 'object',
+            COLOR: 'array',
         };
     }
 
@@ -190,12 +201,16 @@ export default class Danmuku {
         return $ref;
     }
 
-    // 获取准备好发送的弹幕：有的是ready状态（如之前因为弹幕太多而暂停发送的弹幕），有的是wait状态
+    // 获取准备好发送的弹幕
     get readys() {
         const { currentTime } = this.art;
 
         const result = [];
+
+        // 有的是ready状态：之前因为弹幕太多而暂停发送的弹幕
         this.filter('ready', (danmu) => result.push(danmu));
+
+        // 有的是wait状态：符合时间范围的弹幕
         this.filter('wait', (danmu) => {
             if (currentTime + 0.1 >= danmu.time && danmu.time >= currentTime - 0.1) {
                 result.push(danmu);
@@ -264,6 +279,7 @@ export default class Danmuku {
             this.$danmuku.innerText = ''; // 清空弹幕层
             this.danmus.forEach((danmu) => this.emit(danmu)); // 逐个验证原始弹幕并转换为实际弹幕
             this.art.emit('artplayerPluginDanmuku:loaded', this.queue);
+            console.log('Danmuku loaded:', this.queue);
         } catch (error) {
             this.art.emit('artplayerPluginDanmuku:error', error);
             throw error;
@@ -322,16 +338,21 @@ export default class Danmuku {
         // 自定义弹幕过滤函数
         if (!this.option.filter(danmu)) return this;
 
-        // 转换为wait状态
-        this.setState(danmu, 'wait');
-
-        // 添加到实际弹幕队列
-        this.queue.push({
+        // 添加自定义属性
+        const item = {
             ...danmu,
+            $state: 'wait', // 弹幕初始状态
+            $id: this.index++, // 弹幕唯一标识
             $ref: null, // 弹幕 DOM 节点
             $restTime: 0, // 弹幕剩余时间
             $lastStartTime: 0, // 弹幕上次开始时间
-        });
+        };
+
+        // 转换为wait状态
+        this.setState(item, 'wait');
+
+        // 添加到实际弹幕队列
+        this.queue.push(item);
 
         // 弹幕有四个状态：
         // - wait: 弹幕还未开始显示，没有被添加到 DOM 中
@@ -413,9 +434,7 @@ export default class Danmuku {
     // 设置弹幕状态
     setState(danmu, state) {
         // 从原状态池中删除
-        if (danmu.$state) {
-            this.states[danmu.$state] = this.states[danmu.$state].filter((item) => item !== danmu);
-        }
+        this.states[danmu.$state] = this.states[danmu.$state].filter((item) => item !== danmu);
 
         // 设置新状态
         danmu.$state = state;