Danmuku (#759)

* chore: Bump artplayer-plugin-danmuku version to 5.1.0

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Refactor getDanmuTop function to handle additional cases

* chore: Refactor getDanmuTop function to handle additional cases

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Refactor danmuku plugin to always create a new Setting instance

* Refactor danmuku plugin to always create a new Setting instance

* Refactor danmuku plugin to always create a new Setting instance

* Update danmuku.js

* Update danmuku.js

* Refactor danmuku plugin to include a new Setting instance

* Refactor danmuku plugin to include a new Setting instance

* Refactor danmuku plugin styles for better alignment and spacing

* Refactor danmuku plugin styles for better alignment and spacing

* Refactor danmuku plugin styles for better alignment and spacing

* Refactor danmuku plugin styles for better alignment and spacing

* Refactor danmuku plugin styles for better alignment and spacing

* chore: Update package.json files

* Refactor danmuku plugin to remove unnecessary whitespace in the setting template

* chore: Remove ESLint configuration files and update npm dependencies

* chore: Update ESLint configuration to disable console warnings and fix unused variable warnings

* chore: Update ESLint configuration to fix quotes rule

* Update package.json

* Update package.json

* Update setting.js

* chore: Compress CSS code in build script

* chore: Update build script to compress JavaScript code

* chore: Update build script to compress JavaScript code

* chore: Refactor setting.js to improve code organization and remove unused variables

* chore: Add isHover flag to Control component for better control hiding behavior

* chore: Update Control component to use $bottom instead of $controls for better control hiding behavior

* Update package.json

* Update package.json

* Update package.json

* chore: Update lerna.json to use independent versioning and yarn as npm client

* refactor: Update Danmuku class to support configurable modes and visibility

* refactor: Update Danmuku styles for better visibility and configurability

* feat: Update font weight in Danmuku styles for better readability

* refactor: Update Danmuku class to support configurable modes and visibility

* refactor: Add opacity, area, font, and speed sliders to Danmuku settings

* refactor: Initialize sliders for opacity, area, font, and speed in Danmuku settings

* feat: Add slider UI for opacity, area, and speed in Danmuku settings

* feat: Update slider styles in Danmuku settings for better visibility and configurability

* refactor: Improve Danmuku settings UI for better visibility and configurability

* refactor: Improve Danmuku settings UI for better visibility and configurability

* refactor: Update slider styles in Danmuku settings for better visibility and configurability

* refactor: Update margin slider initialization in Danmuku settings

* refactor: Update slider styles and initialization in Danmuku settings

* refactor: Update Danmuku class to support configurable visibility

* refactor: Update Danmuku class to support configurable visibility

* refactor: Update Danmuku class to support configurable visibility

* refactor: Update Danmuku class to support configurable visibility

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Improve Danmuku settings UI for better visibility and configurability

* add lock

* refactor: Add lock and unlock methods to Danmuku settings

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* Update artplayer-plugin-danmuku.d.ts

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings event listeners

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

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

@@ -1,10 +1,10 @@
-# Danmuku
+# 弹幕库
 
-## Demo
+## 演示
 
-👉 [View Full Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
+👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
 
-## Installation
+## 安装
 
 ::: code-group
 
@@ -40,34 +40,116 @@ https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
 
 :::
 
-## Option
+## 弹幕结构
+
+每一个弹幕是一个对象，多个弹幕组成的数组就是弹幕源，通常只需要`text`就可以发送一个弹幕，其余都是非必要参数
 
 ```js
 {
-    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
-    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
-    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
-    fontSize: 25, // 字体大小，支持数字和百分比
-    color: '#FFFFFF', // 默认字体颜色
-    mode: 0, // 默认模式，0-滚动，1-静止
-    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
-    antiOverlap: true, // 是否防重叠
-    useWorker: true, // 是否使用 web worker
-    synchronousPlayback: false, // 是否同步到播放速度
-    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
-    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
-    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
-    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
-    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
-    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
-    heatmap: true, // 是否开启弹幕热度图, 默认为 false
-    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
-    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
-    mount: document.querySelector('.artplayer-danmuku'),
+    text: '', // 弹幕文本
+    time: 10, // 弹幕时间, 默认为当前播放器时间
+    mode: 0, // 弹幕模式: 0: 滚动(默认)，1: 顶部，2: 底部
+    color: '#FFFFFF', // 弹幕颜色，默认为白色
+    border: false, // 弹幕是否有描边, 默认为 false
+    style: {}, // 弹幕自定义样式, 默认为空对象
+    escape: true, // 弹幕文本是否转义, 默认为 true
 }
 ```
 
-## Using Danmuku Array
+## 全部选项
+
+只有`danmuku`是必须的参数，其余都是非必填
+
+```js
+{
+    danmuku: [], // 弹幕源
+    speed: 5, // 弹幕持续时间，范围在[1 ~ 10]
+    margin: [10, '25%'], // 弹幕上下边距，支持像素数字和百分比
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    color: '#FFFFFF', // 默认弹幕颜色，可以被单独弹幕项覆盖
+    mode: 0, // 默认弹幕模式: 0: 滚动，1: 顶部，2: 底部
+    modes: [0, 1, 2], // 弹幕可见的模式
+    fontSize: 25, // 弹幕字体大小，支持像素数字和百分比
+    antiOverlap: true, // 弹幕是否防重叠
+    synchronousPlayback: false, // 是否同步播放速度
+    mount: undefined, // 弹幕发射器挂载点, 默认为播放器控制栏中部
+    heatmap: false, // 是否开启热力图
+    points: [], // 热力图数据
+    filter: () => true, // 弹幕载入前的过滤器，只支持返回布尔值
+    beforeEmit: () => true, // 弹幕发送前的过滤器，支持返回 Promise
+    beforeVisible: () => true, // 弹幕显示前的过滤器，支持返回 Promise
+    visible: true, // 弹幕层是否可见
+    maxLength: 200, // 弹幕输入框最大长度, 范围在[1 ~ 1000]
+    lockTime: 5, // 输入框锁定时间，范围在[1 ~ 60]
+    theme: 'dark', // 弹幕主题，支持 dark 和 light，只在自定义挂载时生效
+}
+```
+
+## 生命周期
+
+来自用户输入的弹幕: 
+
+`beforeEmit -> filter -> beforeVisible -> artplayerPluginDanmuku:visible`
+
+来自服务器的弹幕: 
+
+`filter -> beforeVisible -> artplayerPluginDanmuku:visible`
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+// 保存到数据库
+function saveDanmu(danmu) {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            resolve(true);
+        }, 1000);
+    })
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+
+            // 这是用户在输入框输入弹幕文本，然后点击发送按钮后触发的函数
+            // 你可以对弹幕做合法校验，或者做存库处理
+            // 当返回true后才表示把弹幕加入到弹幕队列
+            async beforeEmit(danmu) {
+               const isDirty = (/fuck/i).test(danmu.text);
+               if (isDirty) return false;
+               const state = await saveDanmu(danmu);
+               return state;
+            },
+
+            // 这里是所有弹幕的过滤器，包含来自服务端的和来自用户输入的
+            // 你可以对弹幕做合法校验
+            // 当返回true后才表示把弹幕加入到弹幕队列
+            filter(danmu) {
+                return danmu.text.length <= 200;
+            },
+
+            // 这是弹幕即将显示的时触发的函数
+            // 你可以对弹幕做合法校验
+            // 当返回true后才表示可以马上发送到播放器里
+            async beforeVisible(danmu) {
+               return true;
+            },
+        }),
+    ],
+});
+
+// 弹幕已经出现在播放器里，你可以访问到弹幕的dom元素里
+art.on('artplayerPluginDanmuku:visible', danmu => {
+    danmu.$ref.innerHTML = 'ଘ(੭ˊᵕˋ)੭: ' + danmu.$ref.innerHTML;
+})
+```
+
+## 使用弹幕数组
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -77,31 +159,11 @@ https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
-    setting: true,
     plugins: [
         artplayerPluginDanmuku({
-            // Danmuku array
             danmuku: [
                 {
-                    text: '111', // Danmuku text
-                    time: 1, // Send time, in seconds
-                    color: '#fff', // Danmuku local color
-                    border: false, // Whether to display outline
-                    mode: 0, // Danmuku mode: 0 for scrolling, 1 for stationary
-                },
-                {
-                    text: '222',
-                    time: 2,
-                    color: 'red',
-                    border: true,
-                    mode: 0,
-                },
-                {
-                    text: '333',
-                    time: 3,
-                    color: 'green',
-                    border: false,
-                    mode: 1,
+                    text: '使用数组',
                 },
             ],
         }),
@@ -109,7 +171,9 @@ var art = new Artplayer({
 });
 ```
 
-## Using Danmuku XML
+## 使用弹幕 XML
+
+弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -121,14 +185,13 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
     plugins: [
         artplayerPluginDanmuku({
-            // Danmuku XML file, consistent with the danmuku format of the Bilibili website
             danmuku: '/assets/sample/danmuku.xml',
         }),
     ],
 });
 ```
 
-## Using Asynchronous Call
+## 使用异步返回
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -140,21 +203,11 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
     plugins: [
         artplayerPluginDanmuku({
-            // Use Promise to return asynchronously
             danmuku: function () {
-                return new Promise((resolve) => {
-                    return resolve([
+                return new Promise((resovle) => {
+                    return resovle([
                         {
-                            text: '111',
-                            time: 1,
-                        },
-                        {
-                            text: '222',
-                            time: 2,
-                        },
-                        {
-                            text: '333',
-                            time: 3,
+                            text: '使用 Promise 异步返回',
                         },
                     ]);
                 });
@@ -166,7 +219,7 @@ var art = new Artplayer({
 
 ## `hide/show`
 
-Hide or show the bullet comments with the methods `hide` and `show`.
+通过方法 `hide` 和 `show` 进行隐藏或者显示弹幕
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -184,14 +237,14 @@ var art = new Artplayer({
     controls: [
         {
             position: 'right',
-            html: 'Hide Danmuku',
+            html: '隐藏弹幕',
             click: function () {
                 art.plugins.artplayerPluginDanmuku.hide();
             },
         },
         {
             position: 'right',
-            html: 'Show Danmuku',
+            html: '显示弹幕',
             click: function () {
                 art.plugins.artplayerPluginDanmuku.show();
             },
@@ -199,9 +252,10 @@ var art = new Artplayer({
     ],
 });
 ```
+
 ## `isHide`
 
-Judge whether the current barrage is hidden or displayed with the `isHide` property.
+通过属性 `isHide` 判断当前弹幕是隐藏或者显示
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -219,14 +273,14 @@ var art = new Artplayer({
     controls: [
         {
             position: 'right',
-            html: 'Hide Barrage',
+            html: '隐藏弹幕',
             click: function (_, event) {
                 if (art.plugins.artplayerPluginDanmuku.isHide) {
                     art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = 'Hide Barrage';
+                    event.target.innerText = '隐藏弹幕';
                 } else {
                     art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = 'Show Barrage';
+                    event.target.innerText = '显示弹幕';
                 }
             },
         },
@@ -236,7 +290,7 @@ var art = new Artplayer({
 
 ## `emit`
 
-Send a real-time danmaku message through the `emit` method
+通过方法 `emit` 发送一条实时弹幕
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -254,9 +308,9 @@ var art = new Artplayer({
     controls: [
         {
             position: 'right',
-            html: 'Send Danmaku',
+            html: '发送弹幕',
             click: function () {
-                var text = prompt('Please enter the danmaku text', 'Danmaku test text');
+                var text = prompt('请输入弹幕文本', '弹幕测试文本');
                 if (!text || !text.trim()) return;
                 var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
                 art.plugins.artplayerPluginDanmuku.emit({
@@ -269,22 +323,10 @@ var art = new Artplayer({
     ],
 });
 ```
+
 ## `config`
 
-Change the barrage configuration in real-time with the `config` method, supported attributes include:
-
--   `danmuku`
--   `speed`
--   `opacity`
--   `fontSize`
--   `color`
--   `mode`
--   `margin`
--   `antiOverlap`
--   `synchronousPlayback`
--   `filter`
--   `lockTime`
--   `beforeEmit`
+通过方法 `config` 实时改变弹幕配置
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -302,7 +344,7 @@ var art = new Artplayer({
     controls: [
         {
             position: 'right',
-            html: 'Danmaku size：<input type="range" min="12" max="50" step="1" value="25">',
+            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
             style: {
                 display: 'flex',
                 alignItems: 'center',
@@ -319,9 +361,10 @@ var art = new Artplayer({
     ],
 });
 ```
+
 ## `load`
 
-The load method can be used to reload the danmu data source or switch to new danmu.
+通过 load 方法可以重载弹幕源，或者切换新弹幕
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -339,14 +382,14 @@ var art = new Artplayer({
     controls: [
         {
             position: 'right',
-            html: 'Reload Danmu',
+            html: '重载弹幕',
             click: function () {
                 art.plugins.artplayerPluginDanmuku.load();
             },
         },
         {
             position: 'right',
-            html: 'Switch Danmu',
+            html: '切换弹幕',
             click: function () {
                 art.plugins.artplayerPluginDanmuku.config({
                     danmuku: '/assets/sample/danmuku-v2.xml',
@@ -357,9 +400,10 @@ var art = new Artplayer({
     ],
 });
 ```
+
 ## `reset`
 
-Used to clear the current displayed barrages
+用于清空当前显示的弹幕
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -369,7 +413,6 @@ Used to clear the current displayed barrages
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
-    setting: true,
     plugins: [
         artplayerPluginDanmuku({
             danmuku: '/assets/sample/danmuku.xml',
@@ -382,9 +425,38 @@ art.on('resize', () => {
 });
 ```
 
+## `mount`
+
+在初始化弹幕插件的时候，是可以指定弹幕发射器的挂载位置的，默认是挂载在控制栏的中部，你也可以把它挂载在播放器以外的地方。
+当播放器全屏的时候，发射器会自动回到控制栏的中部。假如你挂载的地方是亮色的话，建议把 `theme` 设置成 `light`，否则会看不清。
+
+<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
+    ▶ Run Code
+</div>
+
+```js
+var $danmu = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginDanmuku({
+			mount: $danmu,
+            theme: 'dark',
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+// 也可以手动挂载
+// art.plugins.artplayerPluginDanmuku.mount($danmu);
+```
+
 ## `option`
 
-Used to get the current barrage configuration
+用于获取当前弹幕配置
 
 <div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
     ▶ Run Code
@@ -394,7 +466,6 @@ Used to get the current barrage configuration
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
-    setting: true,
     plugins: [
         artplayerPluginDanmuku({
             danmuku: '/assets/sample/danmuku.xml',
@@ -407,13 +478,12 @@ art.on('ready', () => {
 });
 ```
 
-## Event
+## 事件
 
 ```js
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
-    setting: true,
     plugins: [
         artplayerPluginDanmuku({
             danmuku: '/assets/sample/danmuku.xml',
@@ -421,6 +491,10 @@ var art = new Artplayer({
     ],
 });
 
+art.on('artplayerPluginDanmuku:visible', (danmu) => {
+    console.info('显示弹幕', danmu);
+});
+
 art.on('artplayerPluginDanmuku:emit', (danmu) => {
     console.info('新增弹幕', danmu);
 });