add danmuku colors

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

@@ -73,14 +73,16 @@ var art = new Artplayer({
                     mode: 1,
                 },
             ],
-            speed: 5, // Animation time
-            opacity: 1, // Opacity
-            size: 25, // Font size
-            margin: ['10%', 20], // Margin top and margin bottom
-            antiOverlap: true, // Anti overlap
-            useWorker: true, // Use web worker or not
-            synchronousPlayback: false, // Synchronous playback speed
-            filter: (danmu) => danmu.text.length <= 50, // filter function
+            speed: 5, // The duration of the barrage, in seconds, in the range [1 ~ 10]
+            opacity: 1, // Barrage transparency, the range is [0 ~ 1]
+            fontSize: 25, // Font size, supports numbers and percentages
+            color: '#FFFFFF', // Default font color
+            mode: 0, // Default mode, 0-scroll, 1-still
+            margin: ['2%', 60], // Barrage top and bottom margins, supports numbers and percentages
+            antiOverlap: true, // Whether to prevent overlapping
+            useWorker: true, // whether to use web workers
+            synchronousPlayback: false, // Whether to sync to playback speed
+            filter: (danmu) => danmu.text.length < 50, // Barrage filter function
         }),
     ],
 });

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

@@ -75,12 +75,14 @@ var art = new Artplayer({
             ],
             speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
             opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
-            size: 25, // 字体大小，支持数字和百分比
-            margin: ['10%', 20], // 弹幕上下边距，支持数字和百分比
+            fontSize: 25, // 字体大小，支持数字和百分比
+            color: '#FFFFFF', // 默认字体颜色
+            mode: 0, // 默认模式，0-滚动，1-静止
+            margin: ['2%', 60], // 弹幕上下边距，支持数字和百分比
             antiOverlap: true, // 是否防重叠
             useWorker: true, // 是否使用 web worker
             synchronousPlayback: false, // 是否同步到播放速度
-            filter: (danmu) => danmu.text.length <= 50, // 弹幕过滤函数
+            filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数
         }),
     ],
 });

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

@@ -49,6 +49,8 @@ export default class Danmuku {
             speed: 5,
             margin: ['2%', '25%'],
             opacity: 1,
+            color: '#FFFFFF',
+            mode: 0,
             fontSize: 25,
             filter: () => true,
             antiOverlap: true,
@@ -63,6 +65,8 @@ export default class Danmuku {
             speed: 'number',
             margin: 'array',
             opacity: 'number',
+            color: 'string',
+            mode: 'number',
             fontSize: 'number|string',
             filter: 'function',
             antiOverlap: 'boolean',
@@ -342,8 +346,8 @@ export default class Danmuku {
                     danmu.$ref.style.left = `${clientWidth}px`;
                     danmu.$ref.style.opacity = this.option.opacity;
                     danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
-                    danmu.$ref.style.color = danmu.color || '#fff';
-                    danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color || '#fff'}` : null;
+                    danmu.$ref.style.color = danmu.color;
+                    danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color}` : null;
                     danmu.$ref.style.backgroundColor = danmu.border ? 'rgb(0 0 0 / 50%)' : null;
                     danmu.$ref.style.marginLeft = '0px';
 
@@ -458,7 +462,8 @@ export default class Danmuku {
         }
 
         this.queue.push({
-            mode: 0,
+            mode: this.option.mode,
+            color: this.option.color,
             ...danmu,
             $state: 'wait',
             $ref: null,

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

@@ -28,6 +28,26 @@ export default function setting(art, danmuku) {
     const $danmuStyle = getIcon(danmuStyle, 'danmu-config');
 
     function addEmitter() {
+        const colors = [
+            '#FE0302',
+            '#FF7204',
+            '#FFAA02',
+            '#FFD302',
+            '#FFFF00',
+            '#A0EE00',
+            '#00CD00',
+            '#019899',
+            '#4266BE',
+            '#89D5FF',
+            '#CC0273',
+            '#222222',
+            '#9B9B9B',
+            '#FFFFFF',
+        ].map((item) => {
+            const isCurrent = danmuku.option.color === item ? ' art-current' : '';
+            return `<div class="art-danmuku-style-panel-color${isCurrent}" data-color="${item}" style="background-color:${item}"></div>`;
+        });
+
         const $emitter = append(
             $controlsCenter,
             `
@@ -40,6 +60,9 @@ export default function setting(art, danmuku) {
                             <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>
                 <input class="art-danmuku-input" maxlength="100" placeholder="发个弹幕见证当下" />
@@ -53,13 +76,15 @@ export default function setting(art, danmuku) {
         const $send = query('.art-danmuku-send', $emitter);
         const $panel = query('.art-danmuku-style-panel', $emitter);
         const $modes = query('.art-danmuku-style-panel-modes', $emitter);
+        const $colors = query('.art-danmuku-style-panel-colors', $emitter);
 
         if (art.option.backdrop) {
             addClass($panel, 'art-backdrop-filter');
         }
 
-        let mode = 0;
         let timer = null;
+        let mode = danmuku.option.mode;
+        let color = danmuku.option.color;
         append($style, $danmuStyle);
 
         function countdown(time) {
@@ -80,7 +105,7 @@ export default function setting(art, danmuku) {
             const danmu = {
                 text,
                 mode,
-                color: '#ffffff',
+                color,
                 border: true,
             };
 
@@ -107,6 +132,14 @@ export default function setting(art, danmuku) {
                 inverseClass(event.target, 'art-current');
             }
         });
+
+        art.proxy($colors, 'click', (event) => {
+            const { dataset } = event.target;
+            if (dataset.color) {
+                color = dataset.color;
+                inverseClass(event.target, 'art-current');
+            }
+        });
     }
 
     function addControl() {

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

@@ -21,10 +21,10 @@
             display: none;
             flex-direction: column;
             position: absolute;
-            left: -65px;
+            left: -70px;
             bottom: 29px;
-            width: 150px;
-            padding: 10px 10px 5px;
+            width: 160px;
+            padding: 10px 10px 0;
             border-radius: 3px;
             background-color: rgba(0, 0, 0, 0.9);
 
@@ -35,7 +35,7 @@
             .art-danmuku-style-panel-modes {
                 display: flex;
                 justify-content: space-between;
-                margin-bottom: 20px;
+                margin-bottom: 15px;
 
                 .art-danmuku-style-panel-mode {
                     display: flex;
@@ -52,6 +52,38 @@
                     }
                 }
             }
+
+            .art-danmuku-style-panel-colors {
+                display: flex;
+                gap: 5px;
+                flex-wrap: wrap;
+                margin-bottom: 10px;
+                justify-content: space-between;
+
+                .art-danmuku-style-panel-color {
+                    cursor: pointer;
+                    width: 15px;
+                    height: 15px;
+                    border: 1px solid #fff;
+
+                    &.art-current{
+                        position: relative;
+                        box-shadow: 0 0 2px #fff;
+                        &::before {
+                            content: '';
+                            position: absolute;
+                            width: 100%;
+                            height: 100%;
+                            left: 0;
+                            top: 0;
+                            right: 0;
+                            bottom: 0;
+                            border: 1px solid #000;
+                        }
+                    }
+                }
+
+            }
         }
 
         &:hover .art-danmuku-style-panel{