artplayer-plugin-danmuku - npm Package Compare versions

Comparing version 3.1.8 to 3.1.9

dist/artplayer-plugin-danmuku.js

 /*!
- * artplayer-plugin-danmuku.js v3.1.8
+ * artplayer-plugin-danmuku.js v3.1.9
  * Github: https://github.com/zhw2590582/ArtPlayer#readme
@@ -8,2 +8,2 @@ * (c) 2017-2019 Harvey Zack
 
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).artplayerPluginDanmuku=e()}(this,function(){"use strict";var r=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t};var a=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(t){r(e,t,n[t])})}return e};var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function o(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var t=function(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t},u={"zh-cn":{"Danmu opacity":"弹幕透明度","Danmu speed":"弹幕速度","Danmu size":"弹幕大小","Danmu text cannot be empty":"弹幕文本不能为空","The length of the danmu does not exceed":"弹幕文本字数不能超过"},"zh-tw":{"Danmu opacity":"彈幕透明度","Danmu speed":"彈幕速度","Danmu size":"弹幕大小","Danmu text cannot be empty":"彈幕文本不能為空","The length of the danmu does not exceed":"彈幕文本字數不能超過"}};function s(i){var t=i.i18n,r=i.events.proxy;return{name:"danmuku-opacity",index:30,html:'\n            <div class="art-setting-header">\n                '.concat(t.get("Danmu opacity"),': <span class="art-value">100</span>%\n            </div>\n            <div class="art-setting-range">\n                <input type="range" value="1" min="0.1" max="1" step="0.1">\n            </div>\n        '),mounted:function(t){var e=t.querySelector("input[type=range]"),n=t.querySelector(".art-value");r(e,"change",function(){var t=e.value;n.innerText=100*Number(t),i.plugins.artplayerPluginDanmuku.config({opacity:Number(t)}),i.on("artplayerPluginDanmuku:config",function(t){e.value!==t.opacity&&(e.value=t.opacity,n.innerText=100*t.opacity)})})}}}function l(i){var t=i.i18n,r=i.events.proxy;return{name:"danmuku-size",index:50,html:'\n            <div class="art-setting-header">\n                '.concat(t.get("Danmu size"),': <span class="art-value">25</span>px\n            </div>\n            <div class="art-setting-range">\n                <input type="range" value="25" min="14" max="30" step="1">\n            </div>\n        '),mounted:function(t){var e=t.querySelector("input[type=range]"),n=t.querySelector(".art-value");r(e,"change",function(){var t=e.value;n.innerText=t,i.plugins.artplayerPluginDanmuku.config({fontSize:Number(t)}),i.on("artplayerPluginDanmuku:config",function(t){e.value!==t.fontSize&&(e.value=t.fontSize,n.innerText=t.fontSize)})})}}}function c(i){var t=i.i18n,r=i.events.proxy;return{name:"danmuku-speed",index:40,html:'\n            <div class="art-setting-header">\n                '.concat(t.get("Danmu speed"),': <span class="art-value">5</span>s\n            </div>\n            <div class="art-setting-range">\n                <input type="range" value="5" min="1" max="10" step="1">\n            </div>\n        '),mounted:function(t){var e=t.querySelector("input[type=range]"),n=t.querySelector(".art-value");r(e,"change",function(){var t=e.value;n.innerText=t,i.plugins.artplayerPluginDanmuku.config({speed:Number(t)}),i.on("artplayerPluginDanmuku:config",function(t){e.value!==t.speed&&(e.value=t.speed,n.innerText=t.speed)})})}}}function p(t,e,n){return t.filter(function(t){return t.$state===e}).map(n)}function f(t,e){var n=t.getBoundingClientRect();return e?n[e]:n}var n=function(t){if(Array.isArray(t))return t};var m=function(t,e){var n=[],i=!0,r=!1,a=void 0;try{for(var o,u=t[Symbol.iterator]();!(i=(o=u.next()).done)&&(n.push(o.value),!e||n.length!==e);i=!0);}catch(t){r=!0,a=t}finally{try{i||null==u.return||u.return()}finally{if(r)throw a}}return n};var h=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")};var $=function(t,e){return n(t)||m(t,e)||h()};function d(t){return fetch(t).then(function(t){return t.text()}).then(function(t){return function(t){if("string"!=typeof t)return[];var e=t.match(/<d([\S ]*?>[\S ]*?)<\/d>/gi);return e.length?e.map(function(t){var e=t.match(/<d p="(.+)">(.+)<\/d>/),n=$(e,3),i=n[1],r=n[2],a=i.split(",");return 8===a.length&&r.trim()?{text:r,time:Number(a[0]),mode:function(t){switch(t){case 1:case 2:case 3:return"scroll";case 4:case 5:return"static";default:return null}}(Number(a[1])),fontSize:Number(a[2]),color:"#".concat(Number(a[3]).toString(16)),timestamp:Number(a[4]),pool:Number(a[5]),userID:a[6],rowID:Number(a[7])}:null}):[]}(t)})}function y(t,e){var n=$(t.option.margin,2),i=n[0],r=n[1],o=f(t.art.template.$player),a=t.queue.filter(function(t){return t.mode===e.mode&&"emit"===t.$state&&t.$ref&&t.$ref.style.fontSize===e.$ref.style.fontSize}).map(function(t){var e=f(t.$ref),n=e.width,i=e.height,r=e.top-o.top,a=e.left-o.left;return{top:r,left:a,height:i,width:n,right:o.width-a-n,item:t}}).sort(function(t,e){return t.top-e.top});return 0===a.length?i:(a.unshift({top:0,left:0,right:0,height:i,width:o.width}),a.push({top:o.height-r,left:0,right:0,height:r,width:o.width}),function(t){for(var e=0,n={},i=0;i<t.length;i+=1){var r=t[i];n[r.top]?n[r.top].push(r):n[r.top]=[r]}for(var a=Object.keys(n),o=0,u=1;u<t.length;u+=1){var s=t[u],l=t[u-1],c=l.top+l.height,p=s.top-c;o<p&&(e=c,o=p)}if(0===e)for(var f=0,m=0;m<a.length;m+=1){for(var h=t[0].width,d=a[m],y=n[d],g=0;g<y.length;g+=1){var v=y[g];v.right<h&&(h=v.right)}f<h&&(f=h,e=$(y,1)[0].top)}if(0===e){var x=a.filter(function(t,e){return 0!==e&&e!==a.length-1}).sort(function(t,e){return n[t].length-n[e].length});e=$(x,1)[0]}return e}(a))}var g=function(){function r(e,t){var n=this;i(this,r),e.i18n.update(u),e.setting.add(s),e.setting.add(l),e.setting.add(c),this.art=e,this.queue=[],this.option={},this.config(t),this.isStop=!1,this.animationFrameTimer=null,this.$danmuku=e.template.$danmuku,e.on("video:play",this.start.bind(this)),e.on("video:playing",this.start.bind(this)),e.on("video:pause",this.stop.bind(this)),e.on("video:waiting",this.stop.bind(this)),e.on("resize",this.resize.bind(this)),e.on("destroy",this.stop.bind(this)),"function"==typeof this.option.danmuku?this.option.danmuku().then(function(t){t.forEach(n.emit.bind(n)),e.emit("artplayerPluginDanmuku:loaded")}):"string"==typeof this.option.danmuku?d(this.option.danmuku).then(function(t){t.forEach(n.emit.bind(n)),e.emit("artplayerPluginDanmuku:loaded")}):(this.option.danmuku.forEach(this.emit.bind(this)),e.emit("artplayerPluginDanmuku:loaded"))}return t(r,[{key:"config",value:function(t){var e=this.art.constructor,n=e.utils.clamp,i=e.validator;this.option=Object.assign({},r.option,this.option,t),i(this.option,r.scheme),this.option.speed=n(this.option.speed,1,10),this.option.maxlength=n(this.option.maxlength,10,100),this.option.margin[0]=n(this.option.margin[0],0,100),this.option.margin[1]=n(this.option.margin[1],0,100),this.option.opacity=n(this.option.opacity,0,1),this.option.fontSize=n(this.option.fontSize,12,30),this.art.emit("artplayerPluginDanmuku:config",this.option)}},{key:"continue",value:function(){p(this.queue,"stop",function(t){switch(t.$state="emit",t.$lastStartTime=Date.now(),t.mode){case"scroll":t.$ref.style.transform="translateX(".concat(-t.$restWidth,"px) translateY(0px) translateZ(0px)"),t.$ref.style.transition="transform ".concat(t.$restTime,"s linear 0s")}})}},{key:"suspend",value:function(){var r=this.art.template.$player;p(this.queue,"emit",function(t){switch(t.$state="stop",t.mode){case"scroll":var e=f(r),n=e.left,i=e.width-(f(t.$ref).left-n)+5;t.$ref.style.transform="translateX(".concat(-i,"px) translateY(0px) translateZ(0px)"),t.$ref.style.transition="transform 0s linear 0s"}})}},{key:"resize",value:function(){var e=f(this.art.template.$player,"width");p(this.queue,"wait",function(t){t.$ref&&(t.$ref.style.border="none",t.$ref.style.left="".concat(e,"px"),t.$ref.style.marginLeft="0px",t.$ref.style.transform="translateX(0px) translateY(0px) translateZ(0px)",t.$ref.style.transition="transform 0s linear 0s")})}},{key:"update",value:function(){var r=this,t=this.art,e=t.player,n=t.template.$player;this.animationFrameTimer=window.requestAnimationFrame(function(){if(e.playing){var i=f(n,"width");p(r.queue,"emit",function(t){t.$restTime-=(Date.now()-t.$lastStartTime)/1e3,t.$lastStartTime=Date.now(),t.$restTime<=0&&(t.$state="wait",t.$ref.style.border="none",t.$ref.style.left="".concat(i,"px"),t.$ref.style.marginLeft="0px",t.$ref.style.transform="translateX(0px) translateY(0px) translateZ(0px)",t.$ref.style.transition="transform 0s linear 0s")}),r.queue.filter(function(t){return e.currentTime+.1>=t.time&&t.time>=e.currentTime-.1&&"wait"===t.$state}).forEach(function(t){t.$ref=function(t){var e=t.find(function(t){return t.$ref&&"wait"===t.$state});if(e){var n=e.$ref;return e.$ref=null,n}var i=document.createElement("div");return i.style.cssText='\n        user-select: none;\n        position: absolute;\n        white-space: pre;\n        pointer-events: none;\n        perspective: 500px;\n        display: inline-block;\n        will-change: transform;\n        font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;\n        font-weight: normal;\n        line-height: 1.125;\n        text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;\n    ',i}(r.queue),r.$danmuku.appendChild(t.$ref),t.$ref.style.opacity=r.option.opacity,t.$ref.style.fontSize="".concat(r.option.fontSize,"px"),t.$ref.innerText=t.text,t.$ref.style.color=t.color,t.$ref.style.border=t.border?"1px solid ".concat(t.color):"none",t.$restTime=r.option.speed,t.$lastStartTime=Date.now();var e=f(t.$ref,"width"),n=y(r,t);switch(t.$state="emit",t.mode){case"scroll":t.$restWidth=i+e+5,t.$ref.style.left="".concat(i,"px"),t.$ref.style.top="".concat(n,"px"),t.$ref.style.transform="translateX(".concat(-t.$restWidth,"px) translateY(0px) translateZ(0px)"),t.$ref.style.transition="transform ".concat(t.$restTime,"s linear 0s");break;case"static":t.$ref.style.top="".concat(n,"px"),t.$ref.style.left="50%",t.$ref.style.marginLeft="-".concat(e/2,"px")}})}r.isStop||r.update()})}},{key:"stop",value:function(){this.isStop=!0,this.suspend(),window.cancelAnimationFrame(this.animationFrameTimer),this.art.emit("artplayerPluginDanmuku:stop")}},{key:"start",value:function(){this.isStop=!1,this.continue(),this.update(),this.art.emit("artplayerPluginDanmuku:start")}},{key:"show",value:function(){this.$danmuku.style="block",this.art.emit("artplayerPluginDanmuku:show")}},{key:"hide",value:function(){this.$danmuku.style="none",this.art.emit("artplayerPluginDanmuku:hide")}},{key:"emit",value:function(t){var e=this.art,n=e.notice,i=e.player,r=e.i18n;t.text.trim()?t.text.length>this.option.maxlength?n.show("".concat(r.get("The length of the danmu does not exceed")," ").concat(this.option.maxlength)):("number"!=typeof t.time&&(t.time=i.currentTime),this.queue.push(a({mode:"scroll"},t,{$state:"wait",$ref:null,$restTime:0,$lastStartTime:0,$restWidth:0}))):n.show(r.get("Danmu text cannot be empty"))}}],[{key:"option",get:function(){return{danmuku:[],speed:5,maxlength:50,margin:[10,100],opacity:1,fontSize:25}}},{key:"scheme",get:function(){return{danmuku:"array|function|string",speed:"number",maxlength:"number",margin:"array",opacity:"number",fontSize:"number"}}}]),r}();return function(n){return function(t){var e=new g(t,n);return{name:"artplayerPluginDanmuku",emit:e.emit.bind(e),config:e.config.bind(e),hide:e.hide.bind(e),show:e.show.bind(e)}}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).artplayerPluginDanmuku=e()}(this,function(){"use strict";var a=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t};var r=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(t){a(e,t,n[t])})}return e};var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function o(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var t=function(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t},u={"zh-cn":{"Danmu opacity":"弹幕透明度","Danmu speed":"弹幕速度","Danmu size":"弹幕大小","Danmu text cannot be empty":"弹幕文本不能为空","The length of the danmu does not exceed":"弹幕文本字数不能超过","Danmu speed synchronous playback multiple":"弹幕速度同步播放倍数"},"zh-tw":{"Danmu opacity":"彈幕透明度","Danmu speed":"彈幕速度","Danmu size":"弹幕大小","Danmu text cannot be empty":"彈幕文本不能為空","The length of the danmu does not exceed":"彈幕文本字數不能超過","Danmu speed synchronous playback multiple":"彈幕速度同步播放倍數"}};function s(i){var t=i.i18n,a=i.events.proxy;return{name:"danmuku-opacity",index:10,html:'\n            <div class="art-setting-header">\n                '.concat(t.get("Danmu opacity"),': <span class="art-value">100</span>%\n            </div>\n            <div class="art-setting-range">\n                <input type="range" value="1" min="0.1" max="1" step="0.1">\n            </div>\n        '),mounted:function(t){var e=t.querySelector("input[type=range]"),n=t.querySelector(".art-value");a(e,"change",function(){var t=e.value;n.innerText=100*Number(t),i.plugins.artplayerPluginDanmuku.config({opacity:Number(t)})}),i.on("artplayerPluginDanmuku:config",function(t){e.value!==t.opacity&&(e.value=t.opacity,n.innerText=100*t.opacity)})}}}function l(i){var t=i.i18n,a=i.events.proxy;return{name:"danmuku-size",index:11,html:'\n            <div class="art-setting-header">\n                '.concat(t.get("Danmu size"),': <span class="art-value">25</span>px\n            </div>\n            <div class="art-setting-range">\n                <input type="range" value="25" min="14" max="30" step="1">\n            </div>\n        '),mounted:function(t){var e=t.querySelector("input[type=range]"),n=t.querySelector(".art-value");a(e,"change",function(){var t=e.value;n.innerText=t,i.plugins.artplayerPluginDanmuku.config({fontSize:Number(t)})}),i.on("artplayerPluginDanmuku:config",function(t){e.value!==t.fontSize&&(e.value=t.fontSize,n.innerText=t.fontSize)})}}}function c(i){var t=i.i18n,a=i.events.proxy;return{name:"danmuku-speed",index:12,html:'\n            <div class="art-setting-header">\n                '.concat(t.get("Danmu speed"),': <span class="art-value">5</span>s\n            </div>\n            <div class="art-setting-range">\n                <input type="range" value="5" min="1" max="10" step="1">\n            </div>\n        '),mounted:function(t){var e=t.querySelector("input[type=range]"),n=t.querySelector(".art-value");a(e,"change",function(){var t=e.value;n.innerText=t,i.plugins.artplayerPluginDanmuku.config({speed:Number(t)})}),i.on("artplayerPluginDanmuku:config",function(t){e.value!==t.speed&&(e.value=t.speed,n.innerText=t.speed)})}}}function p(n){var t=n.i18n,i=n.events.proxy;return{name:"danmuku-synchronousPlayback",index:13,html:'\n            <label class="art-setting-checkbox">\n                <input type="checkbox"/>'.concat(t.get("Danmu speed synchronous playback multiple"),"\n            </label>\n        "),mounted:function(t){var e=t.querySelector("input[type=checkbox]");i(e,"change",function(){n.plugins.artplayerPluginDanmuku.config({synchronousPlayback:e.checked})}),n.on("artplayerPluginDanmuku:config",function(t){e.checked!==t.synchronousPlayback&&(e.checked=t.synchronousPlayback)})}}}function n(t,e,n){return t.filter(function(t){return t.$state===e}).map(n)}function f(t,e){var n=t.getBoundingClientRect();return e?n[e]:n}var m=function(t){if(Array.isArray(t))return t};var h=function(t,e){var n=[],i=!0,a=!1,r=void 0;try{for(var o,u=t[Symbol.iterator]();!(i=(o=u.next()).done)&&(n.push(o.value),!e||n.length!==e);i=!0);}catch(t){a=!0,r=t}finally{try{i||null==u.return||u.return()}finally{if(a)throw r}}return n};var d=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")};var x=function(t,e){return m(t)||h(t,e)||d()};function y(t){return fetch(t).then(function(t){return t.text()}).then(function(t){return function(t){if("string"!=typeof t)return[];var e=t.match(/<d([\S ]*?>[\S ]*?)<\/d>/gi);return e.length?e.map(function(t){var e=t.match(/<d p="(.+)">(.+)<\/d>/),n=x(e,3),i=n[1],a=n[2],r=i.split(",");return 8===r.length&&a.trim()?{text:a,time:Number(r[0]),mode:function(t){switch(t){case 1:case 2:case 3:return"scroll";case 4:case 5:return"static";default:return null}}(Number(r[1])),fontSize:Number(r[2]),color:"#".concat(Number(r[3]).toString(16)),timestamp:Number(r[4]),pool:Number(r[5]),userID:r[6],rowID:Number(r[7])}:null}):[]}(t)})}function g(t,e){var n=x(t.option.margin,2),i=n[0],a=n[1],o=f(t.art.template.$player),r=t.queue.filter(function(t){return t.mode===e.mode&&"emit"===t.$state&&t.$ref&&t.$ref.style.fontSize===e.$ref.style.fontSize&&parseFloat(t.$ref.style.top)<=o.height-a}).map(function(t){var e=f(t.$ref),n=e.width,i=e.height,a=e.top-o.top,r=e.left-o.left;return{top:a,left:r,height:i,width:n,right:o.width-r-n}}).sort(function(t,e){return t.top-e.top});return 0===r.length?i:(r.unshift({top:0,left:0,right:0,height:i,width:o.width}),r.push({top:o.height-a,left:0,right:0,height:a,width:o.width}),function(t){for(var e=0,n={},i=0;i<t.length;i+=1){var a=t[i];n[a.top]?n[a.top].push(a):n[a.top]=[a]}for(var r=Object.keys(n),o=0,u=1;u<t.length;u+=1){var s=t[u],l=t[u-1],c=l.top+l.height,p=s.top-c;o<p&&(e=c,o=p)}if(0===e)for(var f=0,m=0;m<r.length;m+=1){for(var h=t[0].width,d=r[m],y=n[d],g=0;g<y.length;g+=1){var v=y[g];v.right<h&&(h=v.right)}f<h&&(f=h,e=x(y,1)[0].top)}if(0===e){var b=r.filter(function(t,e){return 0!==e&&e!==r.length-1}).sort(function(t,e){return n[t].length-n[e].length});e=x(b,1)[0]}return e}(r))}var v=function(){function a(e,t){var n=this;i(this,a),e.i18n.update(u),e.setting.add(s),e.setting.add(l),e.setting.add(c),e.setting.add(p),this.art=e,this.queue=[],this.option={},this.config(t),this.isStop=!1,this.animationFrameTimer=null,this.$danmuku=e.template.$danmuku,e.on("video:play",this.start.bind(this)),e.on("video:playing",this.start.bind(this)),e.on("video:pause",this.stop.bind(this)),e.on("video:waiting",this.stop.bind(this)),e.on("resize",this.resize.bind(this)),e.on("destroy",this.stop.bind(this)),"function"==typeof this.option.danmuku?this.option.danmuku().then(function(t){t.forEach(n.emit.bind(n)),e.emit("artplayerPluginDanmuku:loaded")}):"string"==typeof this.option.danmuku?y(this.option.danmuku).then(function(t){t.forEach(n.emit.bind(n)),e.emit("artplayerPluginDanmuku:loaded")}):(this.option.danmuku.forEach(this.emit.bind(this)),e.emit("artplayerPluginDanmuku:loaded"))}return t(a,[{key:"config",value:function(t){var e=this.art.constructor,n=e.utils.clamp,i=e.validator;this.option=Object.assign({},a.option,this.option,t),i(this.option,a.scheme),this.option.speed=n(this.option.speed,1,10),this.option.maxlength=n(this.option.maxlength,10,100),this.option.margin[0]=n(this.option.margin[0],0,100),this.option.margin[1]=n(this.option.margin[1],0,100),this.option.opacity=n(this.option.opacity,0,1),this.option.fontSize=n(this.option.fontSize,12,30),this.art.emit("artplayerPluginDanmuku:config",this.option)}},{key:"continue",value:function(){n(this.queue,"stop",function(t){switch(t.$state="emit",t.$lastStartTime=Date.now(),t.mode){case"scroll":t.$ref.style.transform="translateX(".concat(-t.$restWidth,"px) translateY(0px) translateZ(0px)"),t.$ref.style.transition="transform ".concat(t.$restTime,"s linear 0s")}})}},{key:"suspend",value:function(){var a=this.art.template.$player;n(this.queue,"emit",function(t){switch(t.$state="stop",t.mode){case"scroll":var e=f(a),n=e.left,i=e.width-(f(t.$ref).left-n)+5;t.$ref.style.transform="translateX(".concat(-i,"px) translateY(0px) translateZ(0px)"),t.$ref.style.transition="transform 0s linear 0s"}})}},{key:"resize",value:function(){var e=f(this.art.template.$player,"width");n(this.queue,"wait",function(t){t.$ref&&(t.$ref.style.border="none",t.$ref.style.left="".concat(e,"px"),t.$ref.style.marginLeft="0px",t.$ref.style.transform="translateX(0px) translateY(0px) translateZ(0px)",t.$ref.style.transition="transform 0s linear 0s")})}},{key:"update",value:function(){var a=this,t=this.art,r=t.player,e=t.template.$player;this.animationFrameTimer=window.requestAnimationFrame(function(){if(r.playing){var i=f(e,"width");n(a.queue,"emit",function(t){t.$restTime-=(Date.now()-t.$lastStartTime)/1e3,t.$lastStartTime=Date.now(),t.$restTime<=0&&(t.$state="wait",t.$ref.style.border="none",t.$ref.style.left="".concat(i,"px"),t.$ref.style.marginLeft="0px",t.$ref.style.transform="translateX(0px) translateY(0px) translateZ(0px)",t.$ref.style.transition="transform 0s linear 0s")}),a.queue.filter(function(t){return r.currentTime+.1>=t.time&&t.time>=r.currentTime-.1&&"wait"===t.$state}).forEach(function(t){t.$ref=function(t){var e=t.find(function(t){return t.$ref&&"wait"===t.$state});if(e){var n=e.$ref;return e.$ref=null,n}var i=document.createElement("div");return i.style.cssText='\n        user-select: none;\n        position: absolute;\n        white-space: pre;\n        pointer-events: none;\n        perspective: 500px;\n        display: inline-block;\n        will-change: transform;\n        font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;\n        font-weight: normal;\n        line-height: 1.125;\n        text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;\n    ',i}(a.queue),a.$danmuku.appendChild(t.$ref),t.$ref.style.opacity=a.option.opacity,t.$ref.style.fontSize="".concat(a.option.fontSize,"px"),t.$ref.innerText=t.text,t.$ref.style.color=t.color,t.$ref.style.border=t.border?"1px solid ".concat(t.color):"none",t.$restTime=a.option.synchronousPlayback&&r.playbackRateState?a.option.speed/Number(r.playbackRateState):a.option.speed,t.$lastStartTime=Date.now();var e=f(t.$ref,"width"),n=g(a,t);switch(t.$state="emit",t.mode){case"scroll":t.$restWidth=i+e+5,t.$ref.style.left="".concat(i,"px"),t.$ref.style.top="".concat(n,"px"),t.$ref.style.transform="translateX(".concat(-t.$restWidth,"px) translateY(0px) translateZ(0px)"),t.$ref.style.transition="transform ".concat(t.$restTime,"s linear 0s");break;case"static":t.$ref.style.top="".concat(n,"px"),t.$ref.style.left="50%",t.$ref.style.marginLeft="-".concat(e/2,"px")}})}a.isStop||a.update()})}},{key:"stop",value:function(){this.isStop=!0,this.suspend(),window.cancelAnimationFrame(this.animationFrameTimer),this.art.emit("artplayerPluginDanmuku:stop")}},{key:"start",value:function(){this.isStop=!1,this.continue(),this.update(),this.art.emit("artplayerPluginDanmuku:start")}},{key:"show",value:function(){this.$danmuku.style="block",this.art.emit("artplayerPluginDanmuku:show")}},{key:"hide",value:function(){this.$danmuku.style="none",this.art.emit("artplayerPluginDanmuku:hide")}},{key:"emit",value:function(t){var e=this.art,n=e.notice,i=e.player,a=e.i18n;t.text.trim()?t.text.length>this.option.maxlength?n.show("".concat(a.get("The length of the danmu does not exceed")," ").concat(this.option.maxlength)):("number"!=typeof t.time&&(t.time=i.currentTime),this.queue.push(r({mode:"scroll"},t,{$state:"wait",$ref:null,$restTime:0,$lastStartTime:0,$restWidth:0}))):n.show(a.get("Danmu text cannot be empty"))}}],[{key:"option",get:function(){return{danmuku:[],speed:5,maxlength:50,margin:[10,100],opacity:1,fontSize:25,synchronousPlayback:!1}}},{key:"scheme",get:function(){return{danmuku:"array|function|string",speed:"number",maxlength:"number",margin:"array",opacity:"number",fontSize:"number",synchronousPlayback:"boolean"}}}]),a}();return function(n){return function(t){var e=new v(t,n);return{name:"artplayerPluginDanmuku",emit:e.emit.bind(e),config:e.config.bind(e),hide:e.hide.bind(e),show:e.show.bind(e)}}}});

package.json

 {
   "name": "artplayer-plugin-danmuku",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "expose": "artplayerPluginDanmuku",
@@ -24,3 +24,3 @@ "description": "Danmuku plugin for ArtPlayer",
   "homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
-  "gitHead": "296a8122d842802bfe5fc500c360ef7e6b0f205d"
+  "gitHead": "af2f30442d8aabda79e331317f1bc1a9213b2e6c"
 }

README.md

@@ -12,3 +12,3 @@ # artplayer-plugin-danmuku
 
-```
+```bash
 $ npm install artplayer-plugin-danmuku
@@ -19,3 +19,3 @@ ```
 
-```
+```bash
 $ yarn add artplayer-plugin-danmuku
@@ -43,3 +43,11 @@ ```
     plugins: [artplayerPluginDanmuku({
-        danmuku: [], // Can be an array or return the promised function or danmuku xml url
+        danmuku: [
+            {
+                text: '666', // Danmu text
+                time: 5, // Video time
+                color: '#fff', // Danmu color
+                border: false, // Danmu border
+                mode: 'scroll', // Danmu mode: scroll or static
+            }
+        ], // Can be an array or return the promised function or danmuku xml url
         speed: 5, // Animation time
@@ -51,2 +59,3 @@ opacity: 1, // Opacity
         margin: [10, 20], // Margin top and margin bottom
+        synchronousPlayback: false, // Synchronous playback speed
     })],
@@ -61,3 +70,4 @@ });
     size: 25, // Danmu size
-    border: false // Danmu border
+    border: false, // Danmu border
+    mode: 'scroll', // Danmu mode: scroll or static
 });
@@ -64,0 +74,0 @@

src/danmuku.js

 import i18n from './i18n';
-import { opacity, size, speed } from './setting';
+import { opacity, size, speed, synchronousPlayback } from './setting';
 import { filter, getRect, getDanmuRef } from './utils';
@@ -13,2 +13,3 @@ import { bilibiliDanmuParseFromUrl } from './bilibili';
         art.setting.add(speed);
+        art.setting.add(synchronousPlayback);
         this.art = art;
@@ -51,2 +52,3 @@ this.queue = [];
             fontSize: 25,
+            synchronousPlayback: false,
         };
@@ -63,2 +65,3 @@ }
             fontSize: 'number',
+            synchronousPlayback: 'boolean',
         };
@@ -154,9 +157,8 @@ }
                 this.queue
-                    .filter(danmu => {
-                        return (
+                    .filter(
+                        danmu =>
                             player.currentTime + 0.1 >= danmu.time &&
                             danmu.time >= player.currentTime - 0.1 &&
-                            danmu.$state === 'wait'
-                        );
-                    })
+                            danmu.$state === 'wait',
+                    )
                     .forEach(danmu => {
@@ -170,3 +172,6 @@ danmu.$ref = getDanmuRef(this.queue);
                         danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color}` : 'none';
-                        danmu.$restTime = this.option.speed;
+                        danmu.$restTime =
+                            this.option.synchronousPlayback && player.playbackRateState
+                                ? this.option.speed / Number(player.playbackRateState)
+                                : this.option.speed;
                         danmu.$lastStartTime = Date.now();
@@ -173,0 +178,0 @@ const danmuWidth = getRect(danmu.$ref, 'width');

src/getDanmuTop.js

@@ -70,3 +70,4 @@ import { getRect } from './utils';
                 item.$ref &&
-                item.$ref.style.fontSize === danmu.$ref.style.fontSize,
+                item.$ref.style.fontSize === danmu.$ref.style.fontSize &&
+                parseFloat(item.$ref.style.top) <= playerData.height - marginBottom,
         )
@@ -79,7 +80,5 @@ .map(item => {
             const right = playerData.width - left - width;
-            return { top, left, height, width, right, item };
+            return { top, left, height, width, right };
         })
-        .sort((prev, next) => {
-            return prev.top - next.top;
-        });
+        .sort((prev, next) => prev.top - next.top);
 
@@ -86,0 +85,0 @@ if (danmus.length === 0) {

src/i18n.js

@@ -8,2 +8,3 @@ export default {
         'The length of the danmu does not exceed': '弹幕文本字数不能超过',
+        'Danmu speed synchronous playback multiple': '弹幕速度同步播放倍数',
     },
@@ -16,3 +17,4 @@ 'zh-tw': {
         'The length of the danmu does not exceed': '彈幕文本字數不能超過',
+        'Danmu speed synchronous playback multiple': '彈幕速度同步播放倍數',
     },
 };

src/setting.js

@@ -9,3 +9,3 @@ export function opacity(art) {
         name: 'danmuku-opacity',
-        index: 30,
+        index: 10,
         html: `
@@ -29,9 +29,9 @@ <div class="art-setting-header">
                 });
+            });
 
-                art.on('artplayerPluginDanmuku:config', config => {
-                    if ($range.value !== config.opacity) {
-                        $range.value = config.opacity;
-                        $value.innerText = config.opacity * 100;
-                    }
-                });
+            art.on('artplayerPluginDanmuku:config', config => {
+                if ($range.value !== config.opacity) {
+                    $range.value = config.opacity;
+                    $value.innerText = config.opacity * 100;
+                }
             });
@@ -50,3 +50,3 @@ },
         name: 'danmuku-size',
-        index: 50,
+        index: 11,
         html: `
@@ -70,9 +70,9 @@ <div class="art-setting-header">
                 });
+            });
 
-                art.on('artplayerPluginDanmuku:config', config => {
-                    if ($range.value !== config.fontSize) {
-                        $range.value = config.fontSize;
-                        $value.innerText = config.fontSize;
-                    }
-                });
+            art.on('artplayerPluginDanmuku:config', config => {
+                if ($range.value !== config.fontSize) {
+                    $range.value = config.fontSize;
+                    $value.innerText = config.fontSize;
+                }
             });
@@ -91,3 +91,3 @@ },
         name: 'danmuku-speed',
-        index: 40,
+        index: 12,
         html: `
@@ -111,12 +111,42 @@ <div class="art-setting-header">
                 });
+            });
 
-                art.on('artplayerPluginDanmuku:config', config => {
-                    if ($range.value !== config.speed) {
-                        $range.value = config.speed;
-                        $value.innerText = config.speed;
-                    }
+            art.on('artplayerPluginDanmuku:config', config => {
+                if ($range.value !== config.speed) {
+                    $range.value = config.speed;
+                    $value.innerText = config.speed;
+                }
+            });
+        },
+    };
+}
+
+export function synchronousPlayback(art) {
+    const {
+        i18n,
+        events: { proxy },
+    } = art;
+    return {
+        name: 'danmuku-synchronousPlayback',
+        index: 13,
+        html: `
+            <label class="art-setting-checkbox">
+                <input type="checkbox"/>${i18n.get('Danmu speed synchronous playback multiple')}
+            </label>
+        `,
+        mounted: $setting => {
+            const $checkbox = $setting.querySelector('input[type=checkbox]');
+            proxy($checkbox, 'change', () => {
+                art.plugins.artplayerPluginDanmuku.config({
+                    synchronousPlayback: $checkbox.checked,
                 });
             });
+
+            art.on('artplayerPluginDanmuku:config', config => {
+                if ($checkbox.checked !== config.synchronousPlayback) {
+                    $checkbox.checked = config.synchronousPlayback;
+                }
+            });
         },
     };
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37947

increased by7.83%

Lines of code

625

increased by6.29%

Number of lines in readme file

85

increased by13.33%

No dependency changes