add danumuku lockTime

CHANGELOG_CN.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - 设置面板支持 range 和 onRange 选项
 - 添加 isAndroid 和 isiOS 工具函数
 - 弹幕库添加 mount 选项，可自定义发送器的挂载位置
+- 弹幕库添加 lockTime 选项，可自定义输入框的锁定时间
 
 ## [4.4.0] - 2022-05-15
 

docs/assets/example/danmuku.js

@@ -21,6 +21,9 @@ var art = new Artplayer({
             useWorker: true, // 是否使用 web worker
             synchronousPlayback: false, // 是否同步到播放速度
             filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数
+            lockTime: 5, // 弹幕输入框的锁定时间，单位秒，范围在[0 ~ 60]
+            // 自定义弹幕输入框的挂载位置，默认挂载在播放器控制栏中间
+            // mount: document.querySelector('.your-danmu-input'),
         }),
     ],
 });

docs/danmuku.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Artplayer.js</title>
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <meta name="keywords" content="artplayer, player, js, html5, video" />
+    <meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player" />
+    <link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="./assets/css/normalize.css">
+    <style>
+        html,
+        body {
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .container {
+            height: 100%;
+            padding: 10px;
+            box-sizing: border-box;
+        }
+
+        .artplayer-app {
+            width: 100%;
+            height: 50%;
+        }
+
+        .tip {
+            text-align: center;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="artplayer-app"></div>
+        <p class="tip"></p>
+    </div>
+    <script src="./assets/js/vconsole.min.js"></script>
+    <script>var vConsole = new VConsole();</script>
+    <script src="./uncompiled/artplayer/index.js"></script>
+    <script src="./uncompiled/artplayer-plugin-danmuku/index.js"></script>
+    <script src="./assets/example/danmuku.js"></script>
+    <script>
+        if (Artplayer.utils.isWechat) {
+            document.querySelector('.tip').textContent = '微信环境需手动触发播放';
+            let isClick = false;
+            document.body.addEventListener('click', () => {
+                if (!isClick) {
+                    isClick = true;
+                    art.play();
+                }
+            });
+        }
+    </script>
+</body>
+
+</html>

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

@@ -56,6 +56,7 @@ export default class Danmuku {
             antiOverlap: true,
             useWorker: true,
             synchronousPlayback: false,
+            lockTime: 5,
         };
     }
 
@@ -72,6 +73,7 @@ export default class Danmuku {
             antiOverlap: 'boolean',
             useWorker: 'boolean',
             synchronousPlayback: 'boolean',
+            lockTime: 'number',
         };
     }
 
@@ -256,6 +258,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);
 
         if (option.fontSize) {
             this.option.fontSize = this.getFontSize(this.option.fontSize);

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

@@ -26,7 +26,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');
-    const $control = danmuku.option.mount || $controlsCenter;
+    const $control = danmuku.option.mount instanceof Element ? danmuku.option.mount : $controlsCenter;
 
     function addEmitter() {
         const colors = [
@@ -113,7 +113,7 @@ export default function setting(art, danmuku) {
             $input.value = '';
             danmuku.emit(danmu);
             addClass($send, 'art-disabled');
-            countdown(danmuku.option.timeout || 5);
+            countdown(danmuku.option.lockTime);
             art.emit('artplayerPluginDanmuku:emit', danmu);
         }
 
@@ -145,6 +145,12 @@ export default function setting(art, danmuku) {
         art.on('resize', () => {
             setStyle($emitter, 'display', $control.clientWidth < 150 ? 'none' : null);
         });
+
+        art.on('destroy', () => {
+            if ($control !== $controlsCenter) {
+                $control.removeChild($emitter);
+            }
+        });
     }
 
     function addControl() {