feat: Add parameter to append danmuku library in artplayer-plugin-danmuku

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

@@ -11,7 +11,6 @@ export default class Danmuku {
         this.$player = template.$player; // 播放器容器
 
         this.art = art;
-        this.danmus = []; // 原始弹幕数据
         this.queue = []; // 实际弹幕队列
         this.$refs = []; // 弹幕DOM节点池
         this.isStop = false; // 是否停止
@@ -23,12 +22,7 @@ export default class Danmuku {
         this.option = Danmuku.option;
 
         // 弹幕状态池
-        this.states = {
-            wait: [],
-            ready: [],
-            emit: [],
-            stop: [],
-        };
+        this.states = { wait: [], ready: [], emit: [], stop: [] };
 
         // 初始化配置
         this.config(option);
@@ -265,28 +259,37 @@ export default class Danmuku {
     }
 
     // 加载弹幕
-    async load() {
+    async load(danmuku) {
         const { errorHandle } = this.utils;
 
+        let danmus = [];
+        const target = danmuku || this.option.danmuku;
+
         try {
-            if (typeof this.option.danmuku === 'function') {
-                this.danmus = await this.option.danmuku();
-            } else if (typeof this.option.danmuku.then === 'function') {
-                this.danmus = await this.option.danmuku;
-            } else if (typeof this.option.danmuku === 'string') {
-                this.danmus = await bilibiliDanmuParseFromUrl(this.option.danmuku);
-            } else {
-                this.danmus = this.option.danmuku;
+            if (typeof target === 'function') {
+                danmus = await target(); // 异步函数获取
+            } else if (target instanceof Promise) {
+                danmus = await target; // 从 Promise 对象获取
+            } else if (typeof target === 'string') {
+                danmus = await bilibiliDanmuParseFromUrl(target); // 从B站xml链接解析
+            } else if (Array.isArray(target)) {
+                danmus = [...target]; // 直接传入数组
             }
 
-            errorHandle(Array.isArray(this.danmus), 'Danmuku need return an array as result');
+            errorHandle(Array.isArray(danmus), 'Danmuku need return an array as result');
 
-            this.queue = []; // 清空实际弹幕队列
-            this.$danmuku.innerText = ''; // 清空弹幕层
+            // 假如没有传入弹幕参数，则清空弹幕，否则追加弹幕
+            if (danmuku === undefined) {
+                this.reset(); // 重置弹幕
+                this.queue = []; // 清空弹幕队列
+                this.states = { wait: [], ready: [], emit: [], stop: [] }; // 清空弹幕状态池
+                this.$refs = []; // 清空弹幕DOM节点池
+                this.$danmuku.innerText = ''; // 清空弹幕层
+            }
 
-            // 逐个验证原始弹幕并转换为实际弹幕
-            for (let index = 0; index < this.danmus.length; index++) {
-                const danmu = this.danmus[index];
+            // 逐个验证原始弹幕并转换到弹幕队列
+            for (let index = 0; index < danmus.length; index++) {
+                const danmu = danmus[index];
                 await this.emit(danmu);
             }
 

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

@@ -80,7 +80,7 @@ export default function heatmap(art, danmuku, option) {
                 } else {
                     const gap = art.duration / svg.w;
                     for (let x = 0; x <= svg.w; x += options.sampling) {
-                        const y = danmuku.danmus.filter(
+                        const y = danmuku.queue.filter(
                             ({ time }) => time > x * gap && time <= (x + options.sampling) * gap,
                         ).length;
                         points.push([x, y]);

packages/artplayer-plugin-danmuku/types/artplayer-plugin-danmuku.d.ts

@@ -4,6 +4,7 @@ export = artplayerPluginDanmuku;
 export as namespace artplayerPluginDanmuku;
 
 type Mode = 0 | 1 | 2;
+type Danmuku = Danmu[] | string | (() => Promise<Danmu[]>) | Promise<Danmu[]>;
 
 type Slider = {
     min: number;
@@ -51,7 +52,7 @@ type Option = {
     /**
      * 弹幕数据: 函数，数组，Promise，URL
      */
-    danmuku: Danmu[] | string | (() => Promise<Danmu[]>) | Promise<Danmu[]>;
+    danmuku: Danmuku;
 
     /**
      * 弹幕持续时间，范围在[1 ~ 10]
@@ -192,33 +193,33 @@ type Option = {
     COLOR?: string[];
 };
 
-type Danmuku = {
+type Result = {
     name: 'artplayerPluginDanmuku';
 
     /**
      * 发送一条实时弹幕
      */
-    emit: (danmu: Danmu) => Danmuku;
+    emit: (danmu: Danmu) => Result;
 
     /**
      * 重载弹幕源，或者切换新弹幕
      */
-    load: () => Promise<Danmuku>;
+    load: (danmuku?: Danmuku) => Promise<Result>;
 
     /**
      * 实时改变弹幕配置
      */
-    config: (option: Option) => Danmuku;
+    config: (option: Option) => Result;
 
     /**
      * 隐藏弹幕层
      */
-    hide: () => Danmuku;
+    hide: () => Result;
 
     /**
      * 显示弹幕层
      */
-    show: () => Danmuku;
+    show: () => Result;
 
     /**
      * 挂载弹幕输入框
@@ -228,7 +229,7 @@ type Danmuku = {
     /**
      * 重置弹幕
      */
-    reset: () => Danmuku;
+    reset: () => Result;
 
     /**
      * 弹幕配置
@@ -246,4 +247,4 @@ type Danmuku = {
     isStop: boolean;
 };
 
-declare const artplayerPluginDanmuku: (option: Option) => (art: Artplayer) => Danmuku;
+declare const artplayerPluginDanmuku: (option: Option) => (art: Artplayer) => Result;

packages/artplayer-vitepress/docs/plugin/danmuku.md

@@ -42,7 +42,7 @@ https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
 
 ## 弹幕结构
 
-每一个弹幕是一个对象，多个弹幕组成的数组就是弹幕源，通常只需要`text`就可以发送一个弹幕，其余都是非必要参数
+每一个弹幕是一个对象，多个弹幕组成的数组就是弹幕库，通常只需要`text`就可以发送一个弹幕，其余都是非必要参数
 
 ```js
 {
@@ -371,7 +371,7 @@ var art = new Artplayer({
 
 ## `load`
 
-通过 load 方法可以重载弹幕源，或者切换新弹幕
+通过 load 方法可以重载弹幕库，或者切换新弹幕库，或者追加新的弹幕库
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -384,26 +384,38 @@ var art = new Artplayer({
     plugins: [
         artplayerPluginDanmuku({
             danmuku: '/assets/sample/danmuku.xml',
+            emitter: false,
         }),
     ],
     controls: [
         {
             position: 'right',
-            html: '重载弹幕',
+            html: '重载',
             click: function () {
+                // 重新加载当前弹幕库
                 art.plugins.artplayerPluginDanmuku.load();
             },
         },
         {
             position: 'right',
-            html: '切换弹幕',
+            html: '切换',
             click: function () {
+                // 切换到新的弹幕库
                 art.plugins.artplayerPluginDanmuku.config({
                     danmuku: '/assets/sample/danmuku-v2.xml',
                 });
                 art.plugins.artplayerPluginDanmuku.load();
             },
         },
+        {
+            position: 'right',
+            html: '追加',
+            click: function () {
+                // 追加新的弹幕库，参数类型和option.danmuku
+                const target = '/assets/sample/danmuku.xml'
+                art.plugins.artplayerPluginDanmuku.load(target);
+            },
+        },
     ],
 });
 ```

packages/artplayer-vitepress/docs/public/main.js

@@ -8,7 +8,8 @@
             if (codeElement) {
                 const libs = event.target.dataset.libs || '';
                 const code = encodeURIComponent(codeElement.innerText);
-                const env = 'https://artplayer.org';
+                const isDev = location.hostname === 'localhost';
+                const env = isDev ? 'http://localhost:8082' : 'https://artplayer.org';
                 const url = env + '/?libs=' + libs + '&code=' + code;
                 window.open(url);
             }