feat: Update danmuku plugin with responsive behavior

packages/artplayer-plugin-danmuku/package.json

@@ -1,6 +1,6 @@
 {
     "license": "MIT",
-    "version": "5.1.2",
+    "version": "5.1.3",
     "name": "artplayer-plugin-danmuku",
     "types": "types/artplayer-plugin-danmuku.d.ts",
     "description": "Danmuku plugin for ArtPlayer",
@@ -21,4 +21,4 @@
         "video",
         "player"
     ]
-}
+}

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;

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

@@ -122,6 +122,11 @@ type Option = {
               flattening?: number;
           };
 
+    /**
+     * 当播放器宽度小于此值时，弹幕发射器置于播放器底部
+     */
+    width?: number;
+
     /**
      * 热力图数据
      */

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

@@ -73,6 +73,7 @@ https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
     synchronousPlayback: false, // 是否同步播放速度
     mount: undefined, // 弹幕发射器挂载点, 默认为播放器控制栏中部
     heatmap: false, // 是否开启热力图
+    width: 512, // 当播放器宽度小于此值时，弹幕发射器置于播放器底部
     points: [], // 热力图数据
     filter: () => true, // 弹幕载入前的过滤器，只支持返回布尔值
     beforeEmit: () => true, // 弹幕发送前的过滤器，支持返回 Promise

packages/artplayer/src/plugins/autoOrientation.js

@@ -34,6 +34,29 @@ export default function autoOrientation(art) {
         }
     });
 
+    art.on('fullscreen', async (state) => {
+        if (!screen?.orientation?.lock) return;
+
+        const lastOrientation = screen.orientation.type;
+        if (state) {
+            const { videoWidth, videoHeight } = $video;
+            const { clientWidth: viewWidth, clientHeight: viewHeight } = document.documentElement;
+            if (
+                (videoWidth > videoHeight && viewWidth < viewHeight) ||
+                (videoWidth < videoHeight && viewWidth > viewHeight)
+            ) {
+                const oppositeOrientation = lastOrientation.startsWith('portrait') ? 'landscape' : 'portrait';
+                await screen.orientation.lock(oppositeOrientation);
+                addClass($player, 'art-auto-orientation-fullscreen');
+            }
+        } else {
+            if (hasClass($player, 'art-auto-orientation-fullscreen')) {
+                await screen.orientation.lock(lastOrientation);
+                removeClass($player, 'art-auto-orientation-fullscreen');
+            }
+        }
+    });
+
     return {
         name: 'autoOrientation',
         get state() {