add moveOnFullscreen to danmuku

packages/artplayer-document/docs/en/Plugins/danmuku.mdx

@@ -89,6 +89,7 @@ var art = new Artplayer({
             maxLength: 100, // The maximum number of words that can be input can be input box
             minWidth: 150, // At the at least width of the input box
             maxWidth: 400, // Maximum width in the input box
+            moveOnFullscreen: true, // Whether to automatically move the input box in the control bar when the fullscreen
             // mount: document.querySelector('.your-danmu-input'), // Custom barrage input box position
         }),
     ],

packages/artplayer-document/docs/zh-cn/Plugins/danmuku.mdx

@@ -89,6 +89,7 @@ var art = new Artplayer({
             maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
             minWidth: 150, // 输入框最少宽度，范围在[0 ~ 500]，超出则隐藏，填 0 则永不隐藏
             maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则 100% 宽度
+            moveOnFullscreen: true, // 自定义挂载输入框时，当全屏状态下是否自动把输入框移动到控制栏里
 
             // mount 选项用于自定义弹幕输入框的挂载位置，默认挂载在播放器控制栏中间
             // 但在移动端下控制栏宽度不足，所以最好自己决定弹幕输入框放在那里

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

@@ -60,6 +60,8 @@ export default class Danmuku {
             maxLength: 100,
             minWidth: 0,
             maxWidth: 0,
+            moveOnFullscreen: true,
+            mount: undefined,
         };
     }
 
@@ -80,6 +82,8 @@ export default class Danmuku {
             maxLength: 'number',
             minWidth: 'number',
             maxWidth: 'number',
+            moveOnFullscreen: 'boolean',
+            mount: '?htmldivelement',
         };
     }
 

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

@@ -25,12 +25,7 @@ export default function setting(art, danmuku) {
     const $danmuOff = getIcon(danmuOff, 'danmu-off');
     const $danmuConfig = getIcon(danmuConfig, 'danmu-config');
     const $danmuStyle = getIcon(danmuStyle, 'danmu-config');
-
-    let $control = $controlsCenter;
-
-    if (option.mount instanceof Element) {
-        $control = option.mount;
-    }
+    const $control = option.mount || $controlsCenter;
 
     function addEmitter() {
         const colors = [
@@ -131,12 +126,28 @@ export default function setting(art, danmuku) {
             art.emit('artplayerPluginDanmuku:emit', danmu);
         }
 
-        function resize() {
+        function onResize() {
             if (option.minWidth) {
                 setStyle($emitter, 'display', $control.clientWidth < option.minWidth ? 'none' : null);
             }
         }
 
+        function onFullscreen(state) {
+            if (option.moveOnFullscreen && $control !== $controlsCenter) {
+                if (state) {
+                    append($controlsCenter, $emitter);
+                } else {
+                    append($control, $emitter);
+                }
+            }
+        }
+
+        function onDestroy() {
+            if ($control !== $controlsCenter) {
+                $control.removeChild($emitter);
+            }
+        }
+
         art.proxy($send, 'click', onSend);
 
         art.proxy($input, 'keypress', (event) => {
@@ -162,14 +173,11 @@ export default function setting(art, danmuku) {
             }
         });
 
-        resize();
-        art.on('resize', resize);
-
-        art.on('destroy', () => {
-            if ($control !== $controlsCenter) {
-                $control.removeChild($emitter);
-            }
-        });
+        onResize();
+        art.on('resize', onResize);
+        art.on('fullscreen', onFullscreen);
+        art.on('fullscreenWeb', onFullscreen);
+        art.on('destroy', onDestroy);
     }
 
     function addControl() {