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;
+        }
+    }
+}

packages/artplayer/dist/artplayer.js

@@ -4,4 +4,4 @@
  * (c) 2017-2022 Harvey Zack
  * Released under the MIT License.
  */
-!function(e,t,r,o,i){var n="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},a="function"==typeof n.parcelRequireb749&&n.parcelRequireb749,s=a.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function c(t,r){if(!s[t]){if(!e[t]){var o="function"==typeof n.parcelRequireb749&&n.parcelRequireb749;if(!r&&o)return o(t,!0);if(a)return a(t,!0);if(l&&"string"==typeof t)return l(t);var i=new Error("Cannot find module '"+t+"'");throw i.code="MODULE_NOT_FOUND",i}u.resolve=function(r){var o=e[t][1][r];return null!=o?o:r},u.cache={};var p=s[t]=new c.Module(t);e[t][0].call(p.exports,u,p,p.exports,this)}return s[t].exports;function u(e){var t=u.resolve(e);return!1===t?{}:c(t)}}c.isParcelRequire=!0,c.Module=function(e){this.id=e,this.bundle=c,this.exports={}},c.modules=e,c.cache=s,c.parent=a,c.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(c,"root",{get:function(){return n.parcelRequireb749}}),n.parcelRequireb749=c;for(var p=0;p<t.length;p++)c(t[p]);var u=c(r);"object"==typeof exports&&"undefined"!=typeof module?module.exports=u:"function"==typeof define&&define.amd&&define((function(){return u}))}({E13ST:[function(e,t,r){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(r);var i=e("bundle-text:./style/index.less"),n=o.interopDefault(i),a=e("option-validator"),s=o.interopDefault(a),l=e("./utils/emitter"),c=o.interopDefault(l),p=e("./utils"),u=e("./scheme"),d=o.interopDefault(u),f=e("./config"),h=o.interopDefault(f),m=e("./whitelist"),g=o.interopDefault(m),y=e("./template"),v=o.interopDefault(y),b=e("./i18n"),x=o.interopDefault(b),w=e("./player"),j=o.interopDefault(w),k=e("./control"),M=o.interopDefault(k),S=e("./contextmenu"),I=o.interopDefault(S),F=e("./info"),$=o.interopDefault(F),T=e("./subtitle"),E=o.interopDefault(T),C=e("./events"),z=o.interopDefault(C),Y=e("./hotkey"),D=o.interopDefault(Y),P=e("./layer"),R=o.interopDefault(P),O=e("./loading"),A=o.interopDefault(O),L=e("./notice"),H=o.interopDefault(L),_=e("./mask"),N=o.interopDefault(_),J=e("./icons"),V=o.interopDefault(J),q=e("./setting"),W=o.interopDefault(q),B=e("./storage"),U=o.interopDefault(B),Z=e("./plugins"),X=o.interopDefault(Z),G=e("./ads"),Q=o.interopDefault(G),K=e("./mobile"),ee=o.interopDefault(K);let te=0;const re=[];class oe extends c.default{constructor(e,t){super(),this.id=++te;const r=p.mergeDeep(oe.option,e);this.option=s.default(r,d.default),this.isReady=!1,this.isFocus=!1,this.isDestroy=!1,this.whitelist=new g.default(this),this.template=new v.default(this),this.events=new z.default(this),this.whitelist.state?(this.storage=new U.default(this),this.icons=new V.default(this),this.i18n=new x.default(this),this.notice=new H.default(this),this.player=new j.default(this),this.layers=new R.default(this),this.controls=new M.default(this),this.contextmenu=new I.default(this),this.subtitle=new E.default(this),this.ads=new Q.default(this),this.info=new $.default(this),this.loading=new A.default(this),this.hotkey=new D.default(this),this.mask=new N.default(this),this.setting=new W.default(this),this.plugins=new X.default(this)):this.mobile=new ee.default(this),"function"==typeof t&&this.on("ready",(()=>t.call(this))),re.push(this)}static get instances(){return re}static get version(){return"4.3.24"}static get env(){return"production"}static get build(){return"1652445619829"}static get config(){return h.default}static get utils(){return p}static get scheme(){return d.default}static get Emitter(){return c.default}static get validator(){return s.default}static get kindOf(){return s.default.kindOf}static get html(){return v.default.html}static get option(){return{container:"#artplayer",url:"",poster:"",title:"",type:"",theme:"#f00",volume:.7,isLive:!1,muted:!1,autoplay:!1,autoSize:!1,autoMini:!1,loop:!1,flip:!1,playbackRate:!1,aspectRatio:!1,screenshot:!1,setting:!1,hotkey:!0,pip:!1,mutex:!0,backdrop:!0,fullscreen:!1,fullscreenWeb:!1,subtitleOffset:!1,miniProgressBar:!1,useSSR:!1,playsInline:!0,lock:!1,fastForward:!1,autoPlayback:!1,autoOrientation:!1,ads:[],layers:[],contextmenu:[],controls:[],settings:[],quality:[],highlight:[],plugins:[],whitelist:[],thumbnails:{url:"",number:60,column:10},subtitle:{url:"",type:"",style:{},encoding:"utf-8"},moreVideoAttr:{controls:!1,preload:p.isSafari?"auto":"metadata"},icons:{},customType:{},lang:navigator.language.toLowerCase()}}get proxy(){return this.events.proxy}get query(){return this.template.query}destroy(e=!0){this.events.destroy(),this.template.destroy(e),re.splice(re.indexOf(this),1),this.isDestroy=!0,this.emit("destroy")}}if(r.default=oe,oe.NOTICE_TIME=2e3,oe.SETTING_WIDTH=250,oe.SETTING_ITEM_WIDTH=200,oe.SETTING_ITEM_HEIGHT=35,oe.INDICATOR_SIZE=14,oe.INDICATOR_SIZE_ICON=16,oe.INDICATOR_SIZE_MOBILE=18,oe.INDICATOR_SIZE_MOBILE_ICON=20,oe.VOLUME_PANEL_WIDTH=60,oe.VOLUME_HANDLE_WIDTH=12,oe.RESIZE_TIME=500,oeLine truncated
+!function(e,t,r,o,i){var n="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},a="function"==typeof n.parcelRequireb749&&n.parcelRequireb749,s=a.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function c(t,r){if(!s[t]){if(!e[t]){var o="function"==typeof n.parcelRequireb749&&n.parcelRequireb749;if(!r&&o)return o(t,!0);if(a)return a(t,!0);if(l&&"string"==typeof t)return l(t);var i=new Error("Cannot find module '"+t+"'");throw i.code="MODULE_NOT_FOUND",i}u.resolve=function(r){var o=e[t][1][r];return null!=o?o:r},u.cache={};var p=s[t]=new c.Module(t);e[t][0].call(p.exports,u,p,p.exports,this)}return s[t].exports;function u(e){var t=u.resolve(e);return!1===t?{}:c(t)}}c.isParcelRequire=!0,c.Module=function(e){this.id=e,this.bundle=c,this.exports={}},c.modules=e,c.cache=s,c.parent=a,c.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(c,"root",{get:function(){return n.parcelRequireb749}}),n.parcelRequireb749=c;for(var p=0;p<t.length;p++)c(t[p]);var u=c(r);"object"==typeof exports&&"undefined"!=typeof module?module.exports=u:"function"==typeof define&&define.amd&&define((function(){return u}))}({E13ST:[function(e,t,r){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(r);var i=e("bundle-text:./style/index.less"),n=o.interopDefault(i),a=e("option-validator"),s=o.interopDefault(a),l=e("./utils/emitter"),c=o.interopDefault(l),p=e("./utils"),u=e("./scheme"),d=o.interopDefault(u),f=e("./config"),h=o.interopDefault(f),m=e("./whitelist"),g=o.interopDefault(m),y=e("./template"),v=o.interopDefault(y),b=e("./i18n"),x=o.interopDefault(b),w=e("./player"),j=o.interopDefault(w),k=e("./control"),M=o.interopDefault(k),S=e("./contextmenu"),I=o.interopDefault(S),F=e("./info"),$=o.interopDefault(F),T=e("./subtitle"),E=o.interopDefault(T),C=e("./events"),z=o.interopDefault(C),Y=e("./hotkey"),D=o.interopDefault(Y),P=e("./layer"),R=o.interopDefault(P),O=e("./loading"),A=o.interopDefault(O),L=e("./notice"),H=o.interopDefault(L),_=e("./mask"),N=o.interopDefault(_),J=e("./icons"),V=o.interopDefault(J),q=e("./setting"),W=o.interopDefault(q),B=e("./storage"),U=o.interopDefault(B),Z=e("./plugins"),X=o.interopDefault(Z),G=e("./ads"),Q=o.interopDefault(G),K=e("./mobile"),ee=o.interopDefault(K);let te=0;const re=[];class oe extends c.default{constructor(e,t){super(),this.id=++te;const r=p.mergeDeep(oe.option,e);this.option=s.default(r,d.default),this.isReady=!1,this.isFocus=!1,this.isDestroy=!1,this.whitelist=new g.default(this),this.template=new v.default(this),this.events=new z.default(this),this.whitelist.state?(this.storage=new U.default(this),this.icons=new V.default(this),this.i18n=new x.default(this),this.notice=new H.default(this),this.player=new j.default(this),this.layers=new R.default(this),this.controls=new M.default(this),this.contextmenu=new I.default(this),this.subtitle=new E.default(this),this.ads=new Q.default(this),this.info=new $.default(this),this.loading=new A.default(this),this.hotkey=new D.default(this),this.mask=new N.default(this),this.setting=new W.default(this),this.plugins=new X.default(this)):this.mobile=new ee.default(this),"function"==typeof t&&this.on("ready",(()=>t.call(this))),re.push(this)}static get instances(){return re}static get version(){return"4.3.24"}static get env(){return"production"}static get build(){return"1652446842026"}static get config(){return h.default}static get utils(){return p}static get scheme(){return d.default}static get Emitter(){return c.default}static get validator(){return s.default}static get kindOf(){return s.default.kindOf}static get html(){return v.default.html}static get option(){return{container:"#artplayer",url:"",poster:"",title:"",type:"",theme:"#f00",volume:.7,isLive:!1,muted:!1,autoplay:!1,autoSize:!1,autoMini:!1,loop:!1,flip:!1,playbackRate:!1,aspectRatio:!1,screenshot:!1,setting:!1,hotkey:!0,pip:!1,mutex:!0,backdrop:!0,fullscreen:!1,fullscreenWeb:!1,subtitleOffset:!1,miniProgressBar:!1,useSSR:!1,playsInline:!0,lock:!1,fastForward:!1,autoPlayback:!1,autoOrientation:!1,ads:[],layers:[],contextmenu:[],controls:[],settings:[],quality:[],highlight:[],plugins:[],whitelist:[],thumbnails:{url:"",number:60,column:10},subtitle:{url:"",type:"",style:{},encoding:"utf-8"},moreVideoAttr:{controls:!1,preload:p.isSafari?"auto":"metadata"},icons:{},customType:{},lang:navigator.language.toLowerCase()}}get proxy(){return this.events.proxy}get query(){return this.template.query}destroy(e=!0){this.events.destroy(),this.template.destroy(e),re.splice(re.indexOf(this),1),this.isDestroy=!0,this.emit("destroy")}}if(r.default=oe,oe.NOTICE_TIME=2e3,oe.SETTING_WIDTH=250,oe.SETTING_ITEM_WIDTH=200,oe.SETTING_ITEM_HEIGHT=35,oe.INDICATOR_SIZE=14,oe.INDICATOR_SIZE_ICON=16,oe.INDICATOR_SIZE_MOBILE=18,oe.INDICATOR_SIZE_MOBILE_ICON=20,oe.VOLUME_PANEL_WIDTH=60,oe.VOLUME_HANDLE_WIDTH=12,oe.RESIZE_TIME=500,oeLine truncated

packages/artplayer/src/style/bottom.less

@@ -168,6 +168,15 @@
                 display: flex;
             }
 
+            .art-controls-center {
+                flex: 1;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0 10px;
+            }
+
             .art-controls-right {
                 justify-content: flex-end;
             }

packages/artplayer/src/template.js

@@ -46,6 +46,7 @@ export default class Template {
               <div class="art-progress"></div>
               <div class="art-controls">
                 <div class="art-controls-left"></div>
+                <div class="art-controls-center"></div>
                 <div class="art-controls-right"></div>
               </div>
             </div>
@@ -114,6 +115,7 @@ export default class Template {
         this.$progress = this.query('.art-progress');
         this.$controls = this.query('.art-controls');
         this.$controlsLeft = this.query('.art-controls-left');
+        this.$controlsCenter = this.query('.art-controls-center');
         this.$controlsRight = this.query('.art-controls-right');
         this.$layer = this.query('.art-layers');
         this.$loading = this.query('.art-loading');