update danmuku.js

packages/artplayer-plugin-danmuku/src/img/danmu-style.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <path d="M17 16H5c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1zM6.96 15c.39 0 .74-.24.89-.6l.65-1.6h5l.66 1.6c.15.36.5.6.89.6.69 0 1.15-.71.88-1.34l-3.88-8.97C11.87 4.27 11.46 4 11 4s-.87.27-1.05.69l-3.88 8.97c-.27.63.2 1.34.89 1.34zM11 5.98L12.87 11H9.13L11 5.98z"></path>
+</svg>

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

@@ -1,9 +1,16 @@
+import style from 'bundle-text:./style.less';
 import danmuOn from 'bundle-text:./img/danmu-on.svg';
 import danmuOff from 'bundle-text:./img/danmu-off.svg';
 import danmuConfig from 'bundle-text:./img/danmu-config.svg';
+import danmuStyle from 'bundle-text:./img/danmu-style.svg';
 
 export default function setting(art, danmuku) {
-    const { addClass, append, setStyle, tooltip } = art.constructor.utils;
+    const {
+        template: { $controlsCenter },
+        constructor: {
+            utils: { removeClass, addClass, append, setStyle, tooltip, query },
+        },
+    } = art;
 
     function getIcon(svg, key) {
         const icon = document.createElement('i');
@@ -18,8 +25,66 @@ 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');
 
-    art.on('ready', () => {
+    function addEmitter() {
+        const $emitter = append(
+            $controlsCenter,
+            `
+            <div class="art-danmuku-emitter">
+                <div class="art-danmuku-style"></div>
+                <input class="art-danmuku-input" maxlength="100" placeholder="发个弹幕见证当下" />
+                <div class="art-danmuku-send">发送</div>
+            </div>
+            `,
+        );
+
+        const $style = query('.art-danmuku-style', $emitter);
+        const $input = query('.art-danmuku-input', $emitter);
+        const $send = query('.art-danmuku-send', $emitter);
+
+        let timer = null;
+        append($style, $danmuStyle);
+
+        function countdown(time) {
+            if (time === 0) {
+                timer = null;
+                $send.innerText = '发送';
+                removeClass($send, 'art-disabled');
+            } else {
+                $send.innerText = time;
+                timer = setTimeout(() => countdown(time - 1), 1000);
+            }
+        }
+
+        function onSend() {
+            const text = $input.value.trim();
+            if (!text || timer) return;
+
+            const danmu = {
+                text,
+                mode: 0,
+                color: '#ffffff',
+                border: true,
+            };
+
+            countdown(5);
+            $input.value = '';
+            danmuku.emit(danmu);
+            addClass($send, 'art-disabled');
+            art.emit('artplayerPluginDanmuku:emit', danmu);
+        }
+
+        art.proxy($send, 'click', onSend);
+        art.proxy($input, 'keypress', (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                onSend();
+            }
+        });
+    }
+
+    function addControl() {
         art.controls.add({
             position: 'right',
             name: 'danmuku',
@@ -43,7 +108,9 @@ export default function setting(art, danmuku) {
                 setStyle($danmuOff, 'display', 'none');
             },
         });
+    }
 
+    function addSetting() {
         art.setting.add({
             name: 'danmuku',
             html: '弹幕设置',
@@ -214,5 +281,20 @@ export default function setting(art, danmuku) {
                 },
             ],
         });
+    }
+
+    art.on('ready', () => {
+        addEmitter();
+        addControl();
+        addSetting();
     });
 }
+
+if (typeof document !== 'undefined') {
+    if (!document.getElementById('artplayer-plugin-danmuku')) {
+        const $style = document.createElement('style');
+        $style.id = 'artplayer-plugin-danmuku';
+        $style.textContent = style;
+        document.head.appendChild($style);
+    }
+}

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

@@ -0,0 +1,62 @@
+.art-danmuku-emitter {
+    position: relative;
+    display: flex;
+    height: 30px;
+    width: 100%;
+    font-size: 12px;
+    line-height: 1;
+    max-width: 400px;
+    border-radius: 3px;
+    color: #ffffff;
+    background-color: rgb(255 255 255 / 30%);
+
+    .art-danmuku-style {
+        display: flex;
+        width: 30px;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        .art-icon {
+            opacity: 0.75;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+
+    .art-danmuku-input {
+        flex: 1;
+        display: flex;
+        padding: 0 10px 0 0;
+        border: none;
+        outline: none;
+        color: #ffffff;
+        background-color: transparent;
+
+        &::placeholder, &::-webkit-input-placeholder {
+            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;
+        }
+    }
+}