update docs

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

@@ -89,6 +89,8 @@ var art = new Artplayer({
             maxLength: 100, // The maximum number of words that can be input can be input box
             minWidth: 200, // At the at least width of the input box
             maxWidth: 400, // Maximum width in the input box
+            beforeEmit: (danmu) => !!danmu.text.trim(), // Custom verification before the barrage emit
+            mount: undefined, // Customized input box mount position
         }),
     ],
 });

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

@@ -87,8 +87,12 @@ var art = new Artplayer({
             filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数
             lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
             maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
-            minWidth: 200, // 输入框最少宽度，范围在[0 ~ 500]，填 0 则为无限制
+            minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
             maxWidth: 400, // 输入框最大宽度，范围在[minWidth ~ Infinity]，填 0 则为 100% 宽度
+            beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+
+            // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+            // mount: document.querySelector('.artplayer-danmuku'),
         }),
     ],
 });

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

@@ -60,6 +60,8 @@ export default class Danmuku {
             maxLength: 100,
             minWidth: 200,
             maxWidth: 400,
+            mount: undefined,
+            beforeEmit: () => true,
         };
     }
 
@@ -80,6 +82,8 @@ export default class Danmuku {
             maxLength: 'number',
             minWidth: 'number',
             maxWidth: 'number',
+            mount: 'undefined|htmldivelement',
+            beforeEmit: 'function',
         };
     }
 
@@ -264,7 +268,7 @@ export default class Danmuku {
 
         this.option.speed = clamp(this.option.speed, 1, 10);
         this.option.opacity = clamp(this.option.opacity, 0, 1);
-        this.option.lockTime = clamp(this.option.lockTime, 0, 60);
+        this.option.lockTime = clamp(Math.floor(this.option.lockTime), 0, 60);
         this.option.maxLength = clamp(this.option.maxLength, 0, 500);
         this.option.minWidth = clamp(this.option.minWidth, 0, 500);
         this.option.maxWidth = clamp(this.option.maxWidth, 0, Infinity);

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

@@ -24,7 +24,7 @@ export default function setting(art, danmuku) {
     const $danmuOn = getIcon(danmuOn, 'danmu-on');
     const $danmuOff = getIcon(danmuOff, 'danmu-off');
     const $danmuConfig = getIcon(danmuConfig, 'danmu-config');
-    const $danmuStyle = getIcon(danmuStyle, 'danmu-config');
+    const $danmuStyle = getIcon(danmuStyle, 'danmu-style');
 
     function addEmitter() {
         const colors = [
@@ -51,22 +51,24 @@ export default function setting(art, danmuku) {
             $controlsCenter,
             `
             <div class="art-danmuku-emitter" style="max-width: ${option.maxWidth ? `${option.maxWidth}px` : '100%'}">
-                <div class="art-danmuku-style">
-                    <div class="art-danmuku-style-panel">
-                        <div class="art-danmuku-style-panel-inner">
-                            <div class="art-danmuku-style-panel-title">模式</div>
-                            <div class="art-danmuku-style-panel-modes">
-                                <div class="art-danmuku-style-panel-mode art-current" data-mode="0">滚动</div>
-                                <div class="art-danmuku-style-panel-mode" data-mode="1">静止</div>
-                            </div>
-                            <div class="art-danmuku-style-panel-title">颜色</div>
-                            <div class="art-danmuku-style-panel-colors">
-                                ${colors.join('')}
+                <div class="art-danmuku-left">
+                    <div class="art-danmuku-style">
+                        <div class="art-danmuku-style-panel">
+                            <div class="art-danmuku-style-panel-inner">
+                                <div class="art-danmuku-style-panel-title">模式</div>
+                                <div class="art-danmuku-style-panel-modes">
+                                    <div class="art-danmuku-style-panel-mode art-current" data-mode="0">滚动</div>
+                                    <div class="art-danmuku-style-panel-mode" data-mode="1">静止</div>
+                                </div>
+                                <div class="art-danmuku-style-panel-title">颜色</div>
+                                <div class="art-danmuku-style-panel-colors">
+                                    ${colors.join('')}
+                                </div>
                             </div>
                         </div>
                     </div>
+                    <input class="art-danmuku-input" maxlength="${option.maxLength}" placeholder="发个弹幕见证当下" />
                 </div>
-                <input class="art-danmuku-input" maxlength="${option.maxLength}" placeholder="发个弹幕见证当下" />
                 <div class="art-danmuku-send">发送</div>
             </div>
             `,
@@ -78,7 +80,7 @@ export default function setting(art, danmuku) {
         const $panel = query('.art-danmuku-style-panel-inner', $emitter);
         const $modes = query('.art-danmuku-style-panel-modes', $emitter);
         const $colors = query('.art-danmuku-style-panel-colors', $emitter);
-        const $layer = append($player, '<div class="art-layer-danmuku-emitter"></div>');
+        const $layer = option.mount || append($player, '<div class="art-layer-danmuku-emitter"></div>');
 
         if (art.option.backdrop) {
             addClass($panel, 'art-backdrop-filter');
@@ -90,7 +92,7 @@ export default function setting(art, danmuku) {
         append($style, $danmuStyle);
 
         function countdown(time) {
-            if (time === 0) {
+            if (time <= 0) {
                 timer = null;
                 $send.innerText = '发送';
                 removeClass($send, 'art-disabled');
@@ -101,30 +103,39 @@ export default function setting(art, danmuku) {
         }
 
         function onSend() {
-            const text = $input.value.trim();
-            if (!text || timer) return;
-
             const danmu = {
-                text,
                 mode,
                 color,
                 border: true,
+                text: $input.value.trim(),
             };
 
-            $input.value = '';
-            danmuku.emit(danmu);
-            addClass($send, 'art-disabled');
-            countdown(option.lockTime);
-            art.emit('artplayerPluginDanmuku:emit', danmu);
+            if (timer === null && option.beforeEmit(danmu)) {
+                $input.value = '';
+                danmuku.emit(danmu);
+                addClass($send, 'art-disabled');
+                countdown(option.lockTime);
+                art.emit('artplayerPluginDanmuku:emit', danmu);
+            }
         }
 
         function onResize() {
             if ($controlsCenter.clientWidth < option.minWidth) {
                 append($layer, $emitter);
                 setStyle($layer, 'display', 'flex');
+                addClass($emitter, 'art-danmuku-mount');
+
+                if (!option.mount) {
+                    setStyle($player, 'marginBottom', '40px');
+                }
             } else {
                 append($controlsCenter, $emitter);
                 setStyle($layer, 'display', 'none');
+                removeClass($emitter, 'art-danmuku-mount');
+
+                if (!option.mount) {
+                    setStyle($player, 'marginBottom', null);
+                }
             }
         }
 

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

@@ -1,16 +1,49 @@
-.art-video-player {
-    .art-danmuku-emitter {
-        position: relative;
+.art-danmuku-emitter {
+    position: relative;
+    display: flex;
+    height: 32px;
+    width: 100%;
+    font-size: 12px;
+    line-height: 1;
+    border-radius: 3px;
+    max-width: 100%;
+    color: #ffffff;
+    font-family: Roboto, Arial, Helvetica, sans-serif;
+    background-color: rgb(255 255 255 / 30%);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    touch-action: manipulation;
+    -ms-high-contrast-adjust: none;
+
+    *, *::before, *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    .art-icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        line-height: 1.5;
+
+        svg {
+            fill: #fff;
+        }
+    }
+
+    @supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
+        .art-backdrop-filter {
+            -webkit-backdrop-filter: saturate(180%) blur(20px);
+            backdrop-filter: saturate(180%) blur(20px);
+            background-color: rgba(0, 0, 0, 0.7) !important;
+        }
+    }
+
+    .art-danmuku-left {
         display: flex;
-        height: 32px;
-        width: 100%;
-        font-size: 12px;
-        line-height: 1;
-        border-radius: 3px;
-        max-width: 100%;
-        color: #ffffff;
-        background-color: rgb(255 255 255 / 30%);
-    
+        flex: 1;
+        border-radius: 3px 0 0 3px;
+
         .art-danmuku-style {
             position: relative;
             display: flex;
@@ -122,52 +155,61 @@
                 color: rgb(255 255 255 / 50%);
             }
         }
-    
-        .art-danmuku-send {
-            display: flex;
-            width: 50px;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            background-color: #00a1d6;
-            border-top-right-radius: 3px;
-            border-bottom-right-radius: 3px;
-    
-            &:hover {
-                background-color: #00b5e5;
-            }
-    
-            &.art-disabled {
-                opacity: 0.5;
-                pointer-events: none;
-            }
+    }
+
+    .art-danmuku-send {
+        display: flex;
+        width: 50px;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        background-color: #00a1d6;
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+
+        &:hover {
+            background-color: #00b5e5;
+        }
+
+        &.art-disabled {
+            opacity: 0.5;
+            pointer-events: none;
         }
     }
 
-    .art-layer-danmuku-emitter {
-        position: absolute;
-        z-index: 999;
-        left: 0;
-        right: 0;
-        bottom: -42px;
-        height: 42px;
-        width: 100%;
-        padding: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #000;
+    &.art-danmuku-mount {
+        max-width: 100% !important;
+
+        .art-danmuku-left {
+            border: 1px solid #dadada;
+            background: #f4f4f4;
 
-        .art-danmuku-emitter {
-            max-width: 100% !important;
-            
             .art-danmuku-style {
                 .art-danmuku-style-panel {
                     left: 0;
                 }
+    
+                .art-icon svg {
+                    fill: #666;
+                }
+            }
+    
+            .art-danmuku-input {
+                color: #000000;
+    
+                &::placeholder, &::-webkit-input-placeholder {
+                    color: rgb(0 0 0 / 50%);
+                }
             }
         }
-
     }
 }
 
+.art-layer-danmuku-emitter {
+    position: absolute;
+    z-index: 99;
+    left: 0;
+    right: 0;
+    bottom: -40px;
+    width: 100%;
+}

packages/artplayer/src/style/artplayer.less

@@ -43,6 +43,7 @@
         justify-content: center;
         align-items: center;
         line-height: 1.5;
+        
         svg {
             fill: #fff;
         }