feat: Update danmuku plugin with responsive behavior

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

@@ -64,6 +64,7 @@ export default class Danmuku {
             synchronousPlayback: false, // 是否同步播放速度
             mount: undefined, // 弹幕发射器挂载点, 默认为播放器控制栏中部
             heatmap: false, // 是否开启热力图
+            width: 512, // 当播放器宽度小于此值时，弹幕发射器置于播放器底部
             points: [], // 热力图数据
             filter: () => true, // 弹幕载入前的过滤器，只支持返回布尔值
             beforeEmit: () => true, // 弹幕发送前的过滤器，支持返回 Promise
@@ -96,6 +97,7 @@ export default class Danmuku {
             synchronousPlayback: 'boolean',
             mount: '?htmldivelement|string',
             heatmap: 'object|boolean',
+            width: 'number',
             points: 'array',
             filter: 'function',
             beforeEmit: 'function',

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

@@ -63,6 +63,7 @@ export default class Setting {
 
         this.mount(this.option.mount);
 
+        art.on('resize', () => this.onResize());
         art.on('fullscreen', (state) => this.onFullscreen(state));
         art.on('fullscreenWeb', (state) => this.onFullscreen(state));
 
@@ -306,6 +307,13 @@ export default class Setting {
         return query(selector, $danmuku);
     }
 
+    append(el, target) {
+        const { append } = this.utils;
+        const children = [...el.children];
+        if (children.some((item) => item === target)) return;
+        append(el, target);
+    }
+
     setData(key, value) {
         const { $player } = this.art.template;
         const { $mount } = this.template;
@@ -556,13 +564,15 @@ export default class Setting {
     }
 
     onFullscreen(state) {
+        const { $danmuku, $controlsCenter, $mount } = this.template;
         if (this.outside) {
-            const { $danmuku, $controlsCenter, $mount } = this.template;
             if (state) {
-                $controlsCenter.appendChild($danmuku);
+                this.append($controlsCenter, $danmuku);
             } else {
-                $mount.appendChild($danmuku);
+                this.append($mount, $danmuku);
             }
+        } else {
+            this.append($controlsCenter, $danmuku);
         }
     }
 
@@ -642,6 +652,19 @@ export default class Setting {
         removeClass($send, 'apd-lock');
     }
 
+    onResize() {
+        if (this.outside) return;
+        if (this.art.fullscreen) return;
+        if (this.art.fullscreenWeb) return;
+        const { $player, $controlsCenter } = this.art.template;
+        const { $danmuku } = this.template;
+        if (this.art.width < this.option.width) {
+            this.append($player, $danmuku);
+        } else {
+            this.append($controlsCenter, $danmuku);
+        }
+    }
+
     reset() {
         const { inverseClass, tooltip } = this.utils;
         const { $toggle, $colors } = this.template;
@@ -671,7 +694,7 @@ export default class Setting {
 
     mount(target) {
         const $el = typeof target === 'string' ? document.querySelector(target) : target;
-        $el.appendChild(this.template.$danmuku);
+        this.append($el, this.template.$danmuku);
         this.template.$mount = $el;
         this.reset();
     }

packages/artplayer-plugin-danmuku/src/style.less

@@ -301,6 +301,20 @@
     }
 }
 
+.art-video-player {
+    & > .artplayer-plugin-danmuku {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -40px;
+        padding: 0 10px;
+    }
+
+    &:has(> .artplayer-plugin-danmuku) {
+        margin-bottom: 40px;
+    }
+}
+
 [data-danmuku-emitter='false'] {
     .apd-emitter {
         display: none !important;