artplayer-plugin-danmuku - npm Package Compare versions

Comparing version 4.3.0 to 4.3.12

dist/artplayer-plugin-danmuku.js

 /*!
- * artplayer-plugin-danmuku.js v4.3.0
- * Github: https://github.com/zhw2590582/ArtPlayer#readme
+ * artplayer-plugin-danmuku.js v4.3.12
+ * Github: https://github.com/zhw2590582/ArtPlayer
  * (c) 2017-2022 Harvey Zack
  * Released under the MIT License.
  */
-
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).artplayerPluginDanmuku=e()}(this,(function(){"use strict";function t(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function e(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var n={"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 r(t,e,n){return t.filter((function(t){return t.$state===e})).map(n)}function i(t,e){var n=t.getBoundingClientRect();return e?n[e]:n}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,i,a=[],o=!0,s=!1;try{for(n=n.call(t);!(o=(r=n.next()).done)&&(a.push(r.value),!e||a.length!==e);o=!0);}catch(t){s=!0,i=t}finally{try{o||null==n.return||n.return()}finally{if(s)throw i}}return a}}(t,e)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(t){switch(t){case 1:case 2:case 3:default:return 0;case 4:case 5:return 1}}function u(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&&e.length?e.map((function(t){var e=o(t.match(/<d p="(.+)">(.+)<\/d>/),3),n=e[1],r=e[2],i=n.split(",");return 8===i.length&&r.trim()?{text:r,time:Number(i[0]),mode:s(Number(i[1])),fontSize:Number(i[2]),color:"#".concat(Number(i[3]).toString(16)),timestamp:Number(i[4]),pool:Number(i[5]),userID:i[6],rowID:Number(i[7])}:null})):[]}(t)}))}function l(t,e){var n=o(t.option.margin,2),r=n[0],a=n[1],s=i(t.art.template.$player),u=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)<=s.height-a})).map((function(t){var e=i(t.$ref),n=e.width,r=e.height,a=e.top-s.top,o=e.left-s.left;return{top:a,left:o,height:r,width:n,right:s.width-o-n}})).sort((function(t,e){return t.top-e.top}));return 0===u.length?r:(u.unshift({top:0,left:0,right:0,height:r,width:s.width}),u.push({top:s.height-a,left:0,right:0,height:a,width:s.width}),function(t){for(var e=0,n={},r=0;r<t.length;r+=1){var i=t[r];n[i.top]?n[i.top].push(i):n[i.top]=[i]}for(var a=Object.keys(n),s=0,u=1;u<t.length;u+=1){var l=t[u],f=t[u-1],c=f.top+f.height,h=l.top-c;h>s&&(e=c,s=h)}if(0===e)for(var p=0,m=0;m<a.length;m+=1){for(var d=t[0].width,y=a[m],g=n[y],b=0;b<g.length;b+=1){var $=g[b];$.right<d&&(d=$.right)}d>p&&(p=d,e=o(g,1)[0].top)}if(0===e){var v=a.filter((function(t,e){return 0!==e&&e!==a.length-1})).sort((function(t,e){return n[t].length-n[e].length}));e=o(v,1)[0]}return e}(u))}function f(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?f(Object(r),!0).forEach((function(n){t(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var h=function(){function t(e,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),e.i18n.update(n),this.art=e,this.queue=[],this.option={},this.config(r),this.isStop=!1,this.isHide=!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)),this.load()}var a,o,s;return a=t,o=[{key:"load",value:function(){var t=this;return"function"==typeof this.option.danmuku?this.option.danmuku().then((function(e){t.queue=[],t.$danmuku.innerText="",e.forEach(t.emit.bind(t)),t.art.emit("artplayerPluginDanmuku:loaded")})):"string"==typeof this.option.danmuku?u(this.option.danmuku).then((function(e){t.queue=[],t.$danmuku.innerText="",e.forEach(t.emit.bind(t)),t.art.emit("artplayerPluginDanmuku:loaded")})):(this.queue=[],this.$danmuku.innerText="",this.option.danmuku.forEach(this.emit.bind(this)),this.art.emit("artplayerPluginDanmuku:loaded")),this}},{key:"config",value:function(e){var n=this.art.constructor,r=n.utils.clamp,i=n.validator;return this.option=Object.assign({},t.option,this.option,e),i(this.option,t.scheme),this.option.speed=r(this.option.speed,1,10),this.option.maxlength=r(this.option.maxlength,10,100),this.option.margin[0]=r(this.option.margin[0],0,100),this.option.margin[1]=r(this.option.margin[1],0,100),this.option.opacity=r(this.option.opacity,0,1),this.option.fontSize=r(this.option.fontSize,12,30),this.art.emit("artplayerPluginDanmuku:config",this.option),this}},{key:"continue",value:function(){return r(this.queue,"stop",(function(t){t.$state="emit",t.$lastStartTime=Date.now(),0===t.mode&&(t.$ref.style.transform="translateX(".concat(-t.$restWidth,"px) translateY(0px) translateZ(0px)"),t.$ref.style.transition="transform ".concat(t.$restTime,"s linear 0s"))})),this}},{key:"suspend",value:function(){var t=this.art.template.$player;return r(this.queue,"emit",(function(e){if(e.$state="stop",0===e.mode){var n=i(t),r=n.left,a=n.width-(i(e.$ref).left-r)+5;e.$ref.style.transform="translateX(".concat(-a,"px) translateY(0px) translateZ(0px)"),e.$ref.style.transition="transform 0s linear 0s"}})),this}},{key:"resize",value:function(){var t=i(this.art.template.$player,"width");return r(this.queue,"wait",(function(e){e.$ref&&(e.$ref.style.border="none",e.$ref.style.left="".concat(t,"px"),e.$ref.style.marginLeft="0px",e.$ref.style.transform="translateX(0px) translateY(0px) translateZ(0px)",e.$ref.style.transition="transform 0s linear 0s")})),this}},{key:"update",value:function(){var t=this,e=this.art.template.$player;return this.animationFrameTimer=window.requestAnimationFrame((function(){if(t.art.playing&&!t.isHide){var n=i(e,"width");r(t.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(n,"px"),t.$ref.style.marginLeft="0px",t.$ref.style.transform="translateX(0px) translateY(0px) translateZ(0px)",t.$ref.style.transition="transform 0s linear 0s")})),t.queue.filter((function(e){return t.art.currentTime+.1>=e.time&&e.time>=t.art.currentTime-.1&&"wait"===e.$state})).forEach((function(e){e.$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 r=document.createElement("div");return r.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    ',r}(t.queue),t.$danmuku.appendChild(e.$ref),e.$ref.style.opacity=t.option.opacity,e.$ref.style.fontSize="".concat(t.option.fontSize,"px"),e.$ref.innerText=e.text,e.$ref.style.color=e.color||"#fff",e.$ref.style.border=e.border?"1px solid ".concat(e.color||"#fff"):"none",e.$restTime=t.option.synchronousPlayback&&t.art.playbackRate?t.option.speed/Number(t.art.playbackRate):t.option.speed,e.$lastStartTime=Date.now();var r=i(e.$ref,"width"),a=l(t,e);switch(e.$state="emit",e.mode){case 0:e.$restWidth=n+r+5,e.$ref.style.left="".concat(n,"px"),e.$ref.style.top="".concat(a,"px"),e.$ref.style.transform="translateX(".concat(-e.$restWidth,"px) translateY(0px) translateZ(0px)"),e.$ref.style.transition="transform ".concat(e.$restTime,"s linear 0s");break;case 1:e.$ref.style.top="".concat(a,"px"),e.$ref.style.left="50%",e.$ref.style.marginLeft="-".concat(r/2,"px")}}))}t.isStop||t.update()})),this}},{key:"stop",value:function(){return this.isStop=!0,this.suspend(),window.cancelAnimationFrame(this.animationFrameTimer),this.art.emit("artplayerPluginDanmuku:stop"),this}},{key:"start",value:function(){return this.isStop=!1,this.continue(),this.update(),this.art.emit("artplayerPluginDanmuku:start"),this}},{key:"show",value:function(){return this.isHide=!1,this.$danmuku.style.display="block",this.art.emit("artplayerPluginDanmuku:show"),this}},{key:"hide",value:function(){return this.isHide=!0,this.$danmuku.style.display="none",this.art.emit("artplayerPluginDanmuku:hide"),this}},{key:"emit",value:function(t){var e=this.art,n=e.notice,r=e.i18n,i=this.art.constructor,a=i.utils.clamp;return(0,i.validator)(t,{text:"string",mode:"number|undefined",color:"string|undefined",time:"number|undefined",border:"boolean|undefined"}),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),this):(t.time?t.time=a(t.time,0,1/0):t.time=this.art.currentTime+.5,this.queue.push(c(c({mode:0},t),{},{$state:"wait",$ref:null,$restTime:0,$lastStartTime:0,$restWidth:0})),this):(n.show=r.get("Danmu text cannot be empty"),this)}}],s=[{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"}}}],o&&e(a.prototype,o),s&&e(a,s),t}();return function(t){return function(e){var n=new h(e,t);return{name:"artplayerPluginDanmuku",emit:n.emit.bind(n),config:n.config.bind(n),hide:n.hide.bind(n),show:n.show.bind(n),get isHide(){return n.isHide}}}}}));
+!function(t,e,i,r,n){var s="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},a="function"==typeof s.parcelRequire93cf&&s.parcelRequire93cf,o=a.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(e,i){if(!o[e]){if(!t[e]){var r="function"==typeof s.parcelRequire93cf&&s.parcelRequire93cf;if(!i&&r)return r(e,!0);if(a)return a(e,!0);if(l&&"string"==typeof e)return l(e);var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}h.resolve=function(i){var r=t[e][1][i];return null!=r?r:i},h.cache={};var f=o[e]=new u.Module(e);t[e][0].call(f.exports,h,f,f.exports,this)}return o[e].exports;function h(t){var e=h.resolve(t);return!1===e?{}:u(e)}}u.isParcelRequire=!0,u.Module=function(t){this.id=t,this.bundle=u,this.exports={}},u.modules=t,u.cache=o,u.parent=a,u.register=function(e,i){t[e]=[function(t,e){e.exports=i},{}]},Object.defineProperty(u,"root",{get:function(){return s.parcelRequire93cf}}),s.parcelRequire93cf=u;for(var f=0;f<e.length;f++)u(e[f]);var h=u(i);"object"==typeof exports&&"undefined"!=typeof module?module.exports=h:"function"==typeof define&&define.amd&&define((function(){return h}))}({E13ST:[function(t,e,i){var r=t("@parcel/transformer-js/src/esmodule-helpers.js");r.defineInteropFlag(i);var n=t("./danmuku"),s=r.interopDefault(n);function a(t){return e=>{const i=new s.default(e,t);return{name:"artplayerPluginDanmuku",emit:i.emit.bind(i),config:i.config.bind(i),hide:i.hide.bind(i),show:i.show.bind(i),get isHide(){return i.isHide}}}}i.default=a,window.artplayerPluginDanmuku=a},{"./danmuku":"8Gtnh","@parcel/transformer-js/src/esmodule-helpers.js":"b7MJY"}],"8Gtnh":[function(t,e,i){var r=t("@parcel/transformer-js/src/esmodule-helpers.js");r.defineInteropFlag(i);var n=t("./i18n"),s=r.interopDefault(n),a=t("./bilibili"),o=t("./getDanmuTop"),l=r.interopDefault(o);class u{constructor(t,e){t.i18n.update(s.default),this.art=t,this.utils=t.constructor.utils,this.validator=t.constructor.validator,this.queue=[],this.option={},this.config(e),this.isStop=!1,this.isHide=!1,this.animationFrameTimer=null,this.$danmuku=t.template.$danmuku,t.on("video:play",this.start.bind(this)),t.on("video:playing",this.start.bind(this)),t.on("video:pause",this.stop.bind(this)),t.on("video:waiting",this.stop.bind(this)),t.on("resize",this.resize.bind(this)),t.on("destroy",this.stop.bind(this)),t.on("fullscreen",this.reset.bind(this)),t.on("fullscreenWeb",this.reset.bind(this)),this.load()}static get option(){return{danmuku:[],speed:5,margin:[10,100],opacity:1,fontSize:25,filter:()=>!0,synchronousPlayback:!1}}static get scheme(){return{danmuku:"array|function|string",speed:"number",margin:"array",opacity:"number",fontSize:"number",filter:"function",synchronousPlayback:"boolean"}}get isRotate(){return this.art.plugins.autoOrientation&&this.art.plugins.autoOrientation.state}get marginTop(){const{clamp:t}=this.utils,{$player:e}=this.art.template,i=this.option.margin[0];if("number"==typeof i)return t(i,0,e.clientHeight);if("string"==typeof i&&i.endsWith("%")){const r=parseFloat(i)/100;return t(e.clientHeight*r,0,e.clientHeight)}return u.option.margin[0]}get marginBottom(){const{clamp:t}=this.utils,{$player:e}=this.art.template,i=this.option.margin[1];if("number"==typeof i)return t(i,0,e.clientHeight);if("string"==typeof i&&i.endsWith("%")){const r=parseFloat(i)/100;return t(e.clientHeight*r,0,e.clientHeight)}return u.option.margin[1]}filter(t,e){return this.queue.filter((e=>e.$state===t)).map(e)}getRect(t,e){const i=t.getBoundingClientRect(),r=i.bottom,n=i.height,s=i.left,a=i.right,o=i.top,l=i.width,u=i.x,f=i.y,h={bottom:r,height:n,left:s,right:a,top:o,width:l,x:u,y:f};return this.isRotate&&(h.bottom=s,h.left=o,h.top=a,h.right=r,h.height=l,h.width=n,h.x=f,h.y=u),e?h[e]:h}getDanmuRef(){const t=this.queue.find((t=>t.$ref&&"wait"===t.$state));if(t){const{$ref:e}=t;return t.$ref=null,e}const e=document.createElement("div");return e.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        ',e}async load(){this.queue=[],this.$danmuku.innerText="";let t=[];try{t="function"==typeof this.option.danmuku?await this.option.danmuku():"function"==typeof this.option.danmuku.then?await this.option.danmuku:"string"==typeof this.option.danmuku?await a.bilibiliDanmuParseFromUrl(this.option.danmuku):this.option.danmuku,this.utils.errorHandle(Array.isArray(t),"Danmuku need return an array as result"),this.art.emit("artplayerPluginDanmuku:loaded",t),t.forEach(this.emit.bind(this))}catch(t){throw this.art.emit("artplayerPluginDanmuku:error",t),t}return this}config(t){const{clamp:e}=this.utils;return this.option=Object.assign({},u.option,this.option,t),this.validator(this.option,u.scheme),this.option.speed=e(this.option.speed,1,10),this.option.opacity=e(this.option.opacity,0,1),this.option.fontSize=e(this.option.fontSize,12,100),this.art.emit("artplayerPluginDanmuku:config",this.option),this}continue(){const{$player:t}=this.art.template,e=this.getRect(t,"width");return this.filter("stop",(t=>{switch(t.$state="emit",t.$ref.dataset.state="emit",t.$lastStartTime=Date.now(),t.mode){case 0:{const i=this.getRect(t.$ref,"width"),r=e+i;t.$ref.style.transform=`translateX(${-r}px) translateY(0px) translateZ(0px)`,t.$ref.style.transition=`transform ${t.$restTime}s linear 0s`;break}}})),this}suspend(){const{$player:t}=this.art.template;return this.filter("emit",(e=>{switch(e.$state="stop",e.$ref.dataset.state="stop",e.mode){case 0:{const{left:i,width:r}=this.getRect(t),{left:n}=this.getRect(e.$ref),s=r-(n-i);e.$ref.style.transform=`translateX(${-s}px) translateY(0px) translateZ(0px)`,e.$ref.style.transition="transform 0s linear 0s";break}}})),this}resize(){const{$player:t}=this.art.template,{width:e}=this.getRect(t);return this.filter("wait",(t=>{t.$ref&&(t.$ref.style.border="none",t.$ref.style.left=`${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")})),this}reset(){const{$player:t}=this.art.template,{width:e}=this.getRect(t);this.filter("emit",(t=>{t.$ref&&(t.$state="wait",t.$ref.dataset.state="wait",t.$ref.style.border="none",t.$ref.style.visibility="hidden",t.$ref.style.left=`${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")}))}update(){const{$player:t}=this.art.template;return this.animationFrameTimer=window.requestAnimationFrame((()=>{if(this.art.playing&&!this.isHide){const e=this.getRect(t,"width");this.filter("emit",(t=>{const i=(Date.now()-t.$lastStartTime)/1e3;t.$emitTime+=i,t.$restTime-=i,t.$lastStartTime=Date.now(),t.$restTime<=0&&(t.$state="wait",t.$ref.dataset.state="wait",t.$ref.style.border="none",t.$ref.style.visibility="hidden",t.$ref.style.left=`${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")})),this.queue.filter((t=>this.art.currentTime+.1>=t.time&&t.time>=this.art.currentTime-.1&&"wait"===t.$state)).forEach((t=>{t.$ref=this.getDanmuRef(this.queue),this.$danmuku.appendChild(t.$ref),t.$ref.style.visibility="visible",t.$ref.style.opacity=this.option.opacity,t.$ref.style.fontSize=`${this.option.fontSize}px`,t.$ref.innerText=t.text,t.$ref.style.color=t.color||"#fff",t.$ref.style.border=t.border?`1px solid ${t.color||"#fff"}`:"none",t.$restTime=this.option.synchronousPlayback&&this.art.playbackRate?this.option.speed/Number(this.art.playbackRate):this.option.speed;const i=this.getRect(t.$ref,"width"),r=l.default(this,t);switch(t.$state="emit",t.$ref.dataset.state="emit",t.$lastStartTime=Date.now(),t.mode){case 0:{t.$ref.style.left=`${e}px`,t.$ref.style.top=`${r}px`;const n=e+i;t.$ref.style.transform=`translateX(${-n}px) translateY(0px) translateZ(0px)`,t.$ref.style.transition=`transform ${t.$restTime}s linear 0s`;break}case 1:t.$ref.style.top=`${r}px`,t.$ref.style.left="50%",t.$ref.style.marginLeft=`-${i/2}px`}}))}this.isStop||this.update()})),this}stop(){return this.isStop=!0,this.suspend(),window.cancelAnimationFrame(this.animationFrameTimer),this.art.emit("artplayerPluginDanmuku:stop"),this}start(){return this.isStop=!1,this.continue(),this.update(),this.art.emit("artplayerPluginDanmuku:start"),this}show(){return this.isHide=!1,this.$danmuku.style.display="block",this.art.emit("artplayerPluginDanmuku:show"),this}hide(){return this.isHide=!0,this.$danmuku.style.display="none",this.art.emit("artplayerPluginDanmuku:hide"),this}emit(t){return this.validator(t,{text:"string",mode:"number|undefined",color:"string|undefined",time:"number|undefined",border:"boolean|undefined"}),this.option.filter(t)&&t.text.trim()?(t.time?t.time=this.utils.clamp(t.time,0,1/0):t.time=this.art.currentTime+.5,this.queue.push({mode:0,...t,$state:"wait",$ref:null,$emitTime:0,$restTime:0,$lastStartTime:0}),this):this}}i.default=u},{"./i18n":"hcE1f","./bilibili":"KnwDr","./getDanmuTop":"2Abxf","@parcel/transformer-js/src/esmodule-helpers.js":"b7MJY"}],hcE1f:[function(t,e,i){t("@parcel/transformer-js/src/esmodule-helpers.js").defineInteropFlag(i),i.default={"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":"彈幕速度同步播放倍數"}}},{"@parcel/transformer-js/src/esmodule-helpers.js":"b7MJY"}],b7MJY:[function(t,e,i){i.interopDefault=function(t){return t&&t.__esModule?t:{default:t}},i.defineInteropFlag=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.exportAll=function(t,e){return Object.keys(t).forEach((function(i){"default"===i||"__esModule"===i||e.hasOwnProperty(i)||Object.defineProperty(e,i,{enumerable:!0,get:function(){return t[i]}})})),e},i.export=function(t,e,i){Object.defineProperty(t,e,{enumerable:!0,get:i})}},{}],KnwDr:[function(t,e,i){var r=t("@parcel/transformer-js/src/esmodule-helpers.js");function n(t){switch(t){case 1:case 2:case 3:default:return 0;case 4:case 5:return 1}}function s(t){if("string"!=typeof t)return[];const e=t.match(/<d([\S ]*?>[\S ]*?)<\/d>/gi);return e&&e.length?e.map((t=>{const[,e,i]=t.match(/<d p="(.+)">(.+)<\/d>/),r=e.split(",");return 8===r.length&&i.trim()?{text:i,time:Number(r[0]),mode:n(Number(r[1])),fontSize:Number(r[2]),color:`#${Number(r[3]).toString(16)}`,timestamp:Number(r[4]),pool:Number(r[5]),userID:r[6],rowID:Number(r[7])}:null})):[]}function a(t){return fetch(t).then((t=>t.text())).then((t=>s(t)))}r.defineInteropFlag(i),r.export(i,"getMode",(()=>n)),r.export(i,"bilibiliDanmuParseFromXml",(()=>s)),r.export(i,"bilibiliDanmuParseFromUrl",(()=>a))},{"@parcel/transformer-js/src/esmodule-helpers.js":"b7MJY"}],"2Abxf":[function(t,e,i){t("@parcel/transformer-js/src/esmodule-helpers.js").defineInteropFlag(i),i.default=function(t,e){const{$player:i}=t.art.template,r=t.queue.filter((r=>r.mode===e.mode&&"emit"===r.$state&&r.$ref&&r.$ref.style.fontSize===e.$ref.style.fontSize&&r.$ref.offsetTop<=i.clientHeight-t.marginBottom)).map((t=>({top:t.$ref.offsetTop,left:t.$ref.offsetLeft,height:t.$ref.clientHeight,width:t.$ref.clientWidth,right:i.clientWidth-t.$ref.offsetLeft-t.$ref.clientWidth}))).sort(((t,e)=>t.top-e.top));return 0===r.length?t.marginTop:(r.unshift({top:0,left:0,right:0,height:t.marginTop,width:i.clientWidth}),r.push({top:i.clientHeight-t.marginBottom,left:0,right:0,height:t.marginBottom,width:i.clientWidth}),function(t){for(let e=1;e<t.length;e+=1){const i=t[e],r=t[e-1],n=r.top+r.height;if(i.top-n>=t[1].height)return n}const e=[];for(let i=1;i<t.length-1;i+=1){const r=t[i];if(e.length){const t=e[e.length-1];t[0].top===r.top?t.push(r):e.push([r])}else e.push([r])}return e.sort(((t,e)=>{const i=Math.min(...e.map((t=>t.right))),r=Math.min(...t.map((t=>t.right)));return i*e.length-r*t.length})),e[0][0].top}(r))}},{"@parcel/transformer-js/src/esmodule-helpers.js":"b7MJY"}]},["E13ST"],"E13ST");

package.json

 {
+  "license": "MIT",
+  "version": "4.3.12",
   "name": "artplayer-plugin-danmuku",
-  "version": "4.3.0",
-  "expose": "artplayerPluginDanmuku",
   "description": "Danmuku plugin for ArtPlayer",
   "main": "dist/artplayer-plugin-danmuku.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
+  "author": "Harvey Zack <[e-mail]>",
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "homepage": "https://artPlayer.org",
   "repository": {
@@ -14,13 +14,10 @@ "type": "git",
   },
+  "bugs": {
+    "url": "https://github.com/zhw2590582/ArtPlayer/issues"
+  },
   "keywords": [
+    "html5",
     "video",
     "player"
-  ],
-  "author": "Harvey Zack <[e-mail]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/zhw2590582/ArtPlayer/issues"
-  },
-  "homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
-  "gitHead": "5ea211ef738351668e4acace326af4ff6947e2ee"
-}
+  ]
+}

README.md

@@ -7,85 +7,10 @@ # artplayer-plugin-danmuku
 
-[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku) from Github Pages
+[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
 
-## Install
-
-Install with `npm`
-
-```bash
-$ npm install artplayer-plugin-danmuku
-```
-
-Or install with `yarn`
-
-```bash
-$ yarn add artplayer-plugin-danmuku
-```
-
-```js
-import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';
-```
-
-Or umd builds are also available
-
-```html
-<script src="artplayer-plugin-danmuku.js"></script>
-```
-
-Will expose the global variable to `window.artplayerPluginDanmuku`.
-
 ## Usage
 
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'path/to/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: [
-                {
-                    text: '666', // Danmu text
-                    time: 5, // Video time
-                    color: '#fff', // Danmu color
-                    border: false, // Danmu border
-                    mode: 0, // Danmu mode: 0-scroll or 1-static
-                },
-            ], // Can be an array or return the promised function or danmuku xml url
-            speed: 5, // Animation time
-            opacity: 1, // Opacity
-            color: '#fff', // Font color
-            size: 25, // Font size
-            maxlength: 50, // The maximum number of words in the danmu
-            margin: [10, 20], // Margin top and margin bottom
-            synchronousPlayback: false, // Synchronous playback speed
-        }),
-    ],
-});
+[https://artplayer.org/document/en/Plugins/danmuku](https://artplayer.org/document/en/Plugins/danmuku)
 
-// Send a new danmu
-art.plugins.artplayerPluginDanmuku.emit({
-    text: '666', // Danmu text
-    time: 5, // Video time
-    color: '#fff', // Danmu color
-    size: 25, // Danmu size
-    border: false, // Danmu border
-    mode: 0, // Danmu mode: 0-scroll or 1-static
-});
-
-// Hide the danmu
-art.plugins.artplayerPluginDanmuku.hide();
-
-// Show the danmu
-art.plugins.artplayerPluginDanmuku.show();
-
-// Returns whether to hide the danmu
-art.plugins.artplayerPluginDanmuku.isHide;
-
-// Config danmu dynamically
-art.plugins.artplayerPluginDanmuku.config({
-    // option
-});
-```
-
 ## License
 
-MIT © [Harvey Zack](https://sleepy.im/)
+MIT © Harvey Zack

src/danmuku.js

 import i18n from './i18n';
-import { filter, getRect, getDanmuRef } from './utils';
 import { bilibiliDanmuParseFromUrl } from './bilibili';
@@ -10,2 +9,5 @@ import getDanmuTop from './getDanmuTop';
         this.art = art;
+        this.utils = art.constructor.utils;
+        this.validator = art.constructor.validator;
+
         this.queue = [];
@@ -18,2 +20,3 @@ this.option = {};
         this.$danmuku = art.template.$danmuku;
+
         art.on('video:play', this.start.bind(this));
@@ -25,2 +28,5 @@ art.on('video:playing', this.start.bind(this));
         art.on('destroy', this.stop.bind(this));
+        art.on('fullscreen', this.reset.bind(this));
+        art.on('fullscreenWeb', this.reset.bind(this));
+
         this.load();
@@ -33,6 +39,6 @@ }
             speed: 5,
-            maxlength: 50,
             margin: [10, 100],
             opacity: 1,
             fontSize: 25,
+            filter: () => true,
             synchronousPlayback: false,
@@ -46,6 +52,6 @@ };
             speed: 'number',
-            maxlength: 'number',
             margin: 'array',
             opacity: 'number',
             fontSize: 'number',
+            filter: 'function',
             synchronousPlayback: 'boolean',
@@ -55,23 +61,134 @@ };
 
-    load() {
-        if (typeof this.option.danmuku === 'function') {
-            this.option.danmuku().then((danmus) => {
-                this.queue = [];
-                this.$danmuku.innerText = '';
-                danmus.forEach(this.emit.bind(this));
-                this.art.emit('artplayerPluginDanmuku:loaded');
-            });
-        } else if (typeof this.option.danmuku === 'string') {
-            bilibiliDanmuParseFromUrl(this.option.danmuku).then((danmus) => {
-                this.queue = [];
-                this.$danmuku.innerText = '';
-                danmus.forEach(this.emit.bind(this));
-                this.art.emit('artplayerPluginDanmuku:loaded');
-            });
-        } else {
-            this.queue = [];
-            this.$danmuku.innerText = '';
-            this.option.danmuku.forEach(this.emit.bind(this));
-            this.art.emit('artplayerPluginDanmuku:loaded');
+    get isRotate() {
+        return this.art.plugins.autoOrientation && this.art.plugins.autoOrientation.state;
+    }
+
+    get marginTop() {
+        const { clamp } = this.utils;
+        const { $player } = this.art.template;
+        const value = this.option.margin[0];
+
+        if (typeof value === 'number') {
+            return clamp(value, 0, $player.clientHeight);
         }
+
+        if (typeof value === 'string' && value.endsWith('%')) {
+            const ratio = parseFloat(value) / 100;
+            return clamp($player.clientHeight * ratio, 0, $player.clientHeight);
+        }
+
+        return Danmuku.option.margin[0];
+    }
+
+    get marginBottom() {
+        const { clamp } = this.utils;
+        const { $player } = this.art.template;
+        const value = this.option.margin[1];
+
+        if (typeof value === 'number') {
+            return clamp(value, 0, $player.clientHeight);
+        }
+
+        if (typeof value === 'string' && value.endsWith('%')) {
+            const ratio = parseFloat(value) / 100;
+            return clamp($player.clientHeight * ratio, 0, $player.clientHeight);
+        }
+
+        return Danmuku.option.margin[1];
+    }
+
+    filter(state, callback) {
+        return this.queue.filter((danmu) => danmu.$state === state).map(callback);
+    }
+
+    getRect(ref, key) {
+        const rect = ref.getBoundingClientRect();
+
+        const bottom = rect.bottom;
+        const height = rect.height;
+        const left = rect.left;
+        const right = rect.right;
+        const top = rect.top;
+        const width = rect.width;
+        const x = rect.x;
+        const y = rect.y;
+
+        const result = {
+            bottom,
+            height,
+            left,
+            right,
+            top,
+            width,
+            x,
+            y,
+        };
+
+        if (this.isRotate) {
+            result.bottom = left;
+            result.left = top;
+            result.top = right;
+            result.right = bottom;
+            result.height = width;
+            result.width = height;
+            result.x = y;
+            result.y = x;
+        }
+
+        return key ? result[key] : result;
+    }
+
+    getDanmuRef() {
+        const result = this.queue.find((danmu) => {
+            return danmu.$ref && danmu.$state === 'wait';
+        });
+
+        if (result) {
+            const { $ref } = result;
+            result.$ref = null;
+            return $ref;
+        }
+
+        const $ref = document.createElement('div');
+        $ref.style.cssText = `
+            user-select: none;
+            position: absolute;
+            white-space: pre;
+            pointer-events: none;
+            perspective: 500px;
+            display: inline-block;
+            will-change: transform;
+            font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;
+            font-weight: normal;
+            line-height: 1.125;
+            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;
+        `;
+
+        return $ref;
+    }
+
+    async load() {
+        this.queue = [];
+        this.$danmuku.innerText = '';
+        let danmus = [];
+
+        try {
+            if (typeof this.option.danmuku === 'function') {
+                danmus = await this.option.danmuku();
+            } else if (typeof this.option.danmuku.then === 'function') {
+                danmus = await this.option.danmuku;
+            } else if (typeof this.option.danmuku === 'string') {
+                danmus = await bilibiliDanmuParseFromUrl(this.option.danmuku);
+            } else {
+                danmus = this.option.danmuku;
+            }
+
+            this.utils.errorHandle(Array.isArray(danmus), 'Danmuku need return an array as result');
+            this.art.emit('artplayerPluginDanmuku:loaded', danmus);
+            danmus.forEach(this.emit.bind(this));
+        } catch (error) {
+            this.art.emit('artplayerPluginDanmuku:error', error);
+            throw error;
+        }
+
         return this;
@@ -81,15 +198,13 @@ }
     config(option) {
-        const {
-            utils: { clamp },
-            validator,
-        } = this.art.constructor;
+        const { clamp } = this.utils;
+
         this.option = Object.assign({}, Danmuku.option, this.option, option);
-        validator(this.option, Danmuku.scheme);
+        this.validator(this.option, Danmuku.scheme);
+
         this.option.speed = clamp(this.option.speed, 1, 10);
-        this.option.maxlength = clamp(this.option.maxlength, 10, 100);
-        this.option.margin[0] = clamp(this.option.margin[0], 0, 100);
-        this.option.margin[1] = clamp(this.option.margin[1], 0, 100);
         this.option.opacity = clamp(this.option.opacity, 0, 1);
-        this.option.fontSize = clamp(this.option.fontSize, 12, 30);
+        this.option.fontSize = clamp(this.option.fontSize, 12, 100);
+
         this.art.emit('artplayerPluginDanmuku:config', this.option);
+
         return this;
@@ -99,10 +214,17 @@ }
     continue() {
-        filter(this.queue, 'stop', (danmu) => {
+        const { $player } = this.art.template;
+        const playerWidth = this.getRect($player, 'width');
+
+        this.filter('stop', (danmu) => {
             danmu.$state = 'emit';
+            danmu.$ref.dataset.state = 'emit';
             danmu.$lastStartTime = Date.now();
             switch (danmu.mode) {
-                case 0:
-                    danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
+                case 0: {
+                    const danmuWidth = this.getRect(danmu.$ref, 'width');
+                    const translateX = playerWidth + danmuWidth;
+                    danmu.$ref.style.transform = `translateX(${-translateX}px) translateY(0px) translateZ(0px)`;
                     danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
                     break;
+                }
                 default:
@@ -112,2 +234,3 @@ break;
         });
+
         return this;
@@ -118,9 +241,11 @@ }
         const { $player } = this.art.template;
-        filter(this.queue, 'emit', (danmu) => {
+
+        this.filter('emit', (danmu) => {
             danmu.$state = 'stop';
+            danmu.$ref.dataset.state = 'stop';
             switch (danmu.mode) {
                 case 0: {
-                    const { left: playerLeft, width: playerWidth } = getRect($player);
-                    const { left: danmuLeft } = getRect(danmu.$ref);
-                    const translateX = playerWidth - (danmuLeft - playerLeft) + 5;
+                    const { left: playerLeft, width: playerWidth } = this.getRect($player);
+                    const { left: danmuLeft } = this.getRect(danmu.$ref);
+                    const translateX = playerWidth - (danmuLeft - playerLeft);
                     danmu.$ref.style.transform = `translateX(${-translateX}px) translateY(0px) translateZ(0px)`;
@@ -134,2 +259,3 @@ danmu.$ref.style.transition = 'transform 0s linear 0s';
         });
+
         return this;
@@ -140,7 +266,8 @@ }
         const { $player } = this.art.template;
-        const danmuLeft = getRect($player, 'width');
-        filter(this.queue, 'wait', (danmu) => {
+        const { width: playerWidth } = this.getRect($player);
+
+        this.filter('wait', (danmu) => {
             if (danmu.$ref) {
                 danmu.$ref.style.border = 'none';
-                danmu.$ref.style.left = `${danmuLeft}px`;
+                danmu.$ref.style.left = `${playerWidth}px`;
                 danmu.$ref.style.marginLeft = '0px';
@@ -151,5 +278,24 @@ danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
         });
+
         return this;
     }
 
+    reset() {
+        const { $player } = this.art.template;
+        const { width: playerWidth } = this.getRect($player);
+
+        this.filter('emit', (danmu) => {
+            if (danmu.$ref) {
+                danmu.$state = 'wait';
+                danmu.$ref.dataset.state = 'wait';
+                danmu.$ref.style.border = 'none';
+                danmu.$ref.style.visibility = 'hidden';
+                danmu.$ref.style.left = `${playerWidth}px`;
+                danmu.$ref.style.marginLeft = '0px';
+                danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
+                danmu.$ref.style.transition = 'transform 0s linear 0s';
+            }
+        });
+    }
+
     update() {
@@ -159,11 +305,15 @@ const { $player } = this.art.template;
             if (this.art.playing && !this.isHide) {
-                const danmuLeft = getRect($player, 'width');
+                const playerWidth = this.getRect($player, 'width');
 
-                filter(this.queue, 'emit', (danmu) => {
-                    danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
+                this.filter('emit', (danmu) => {
+                    const time = (Date.now() - danmu.$lastStartTime) / 1000;
+                    danmu.$emitTime += time;
+                    danmu.$restTime -= time;
                     danmu.$lastStartTime = Date.now();
                     if (danmu.$restTime <= 0) {
                         danmu.$state = 'wait';
+                        danmu.$ref.dataset.state = 'wait';
                         danmu.$ref.style.border = 'none';
-                        danmu.$ref.style.left = `${danmuLeft}px`;
+                        danmu.$ref.style.visibility = 'hidden';
+                        danmu.$ref.style.left = `${playerWidth}px`;
                         danmu.$ref.style.marginLeft = '0px';
@@ -183,4 +333,5 @@ danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
                     .forEach((danmu) => {
-                        danmu.$ref = getDanmuRef(this.queue);
+                        danmu.$ref = this.getDanmuRef(this.queue);
                         this.$danmuku.appendChild(danmu.$ref);
+                        danmu.$ref.style.visibility = 'visible';
                         danmu.$ref.style.opacity = this.option.opacity;
@@ -195,12 +346,13 @@ danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
                                 : this.option.speed;
-                        danmu.$lastStartTime = Date.now();
-                        const danmuWidth = getRect(danmu.$ref, 'width');
+                        const danmuWidth = this.getRect(danmu.$ref, 'width');
                         const danmuTop = getDanmuTop(this, danmu);
                         danmu.$state = 'emit';
+                        danmu.$ref.dataset.state = 'emit';
+                        danmu.$lastStartTime = Date.now();
                         switch (danmu.mode) {
                             case 0: {
-                                danmu.$restWidth = danmuLeft + danmuWidth + 5;
-                                danmu.$ref.style.left = `${danmuLeft}px`;
+                                danmu.$ref.style.left = `${playerWidth}px`;
                                 danmu.$ref.style.top = `${danmuTop}px`;
-                                danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
+                                const translateX = playerWidth + danmuWidth;
+                                danmu.$ref.style.transform = `translateX(${-translateX}px) translateY(0px) translateZ(0px)`;
                                 danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
@@ -258,10 +410,3 @@ break;
     emit(danmu) {
-        const { notice, i18n } = this.art;
-
-        const {
-            utils: { clamp },
-            validator,
-        } = this.art.constructor;
-
-        validator(danmu, {
+        this.validator(danmu, {
             text: 'string',
@@ -274,14 +419,7 @@ mode: 'number|undefined',
 
-        if (!danmu.text.trim()) {
-            notice.show = i18n.get('Danmu text cannot be empty');
-            return this;
-        }
+        if (!this.option.filter(danmu)) return this;
+        if (!danmu.text.trim()) return this;
 
-        if (danmu.text.length > this.option.maxlength) {
-            notice.show = `${i18n.get('The length of the danmu does not exceed')} ${this.option.maxlength}`;
-            return this;
-        }
-
         if (danmu.time) {
-            danmu.time = clamp(danmu.time, 0, Infinity);
+            danmu.time = this.utils.clamp(danmu.time, 0, Infinity);
         } else {
@@ -296,8 +434,9 @@ danmu.time = this.art.currentTime + 0.5;
             $ref: null,
+            $emitTime: 0,
             $restTime: 0,
             $lastStartTime: 0,
-            $restWidth: 0,
         });
+
         return this;
     }
 }

src/getDanmuTop.js

@@ -1,67 +0,44 @@
-import { getRect } from './utils';
-
 function calculatedTop(danmus) {
-    let top = 0;
-    const topMap = {};
-    for (let index = 0; index < danmus.length; index += 1) {
-        const item = danmus[index];
-        if (topMap[item.top]) {
-            topMap[item.top].push(item);
-        } else {
-            topMap[item.top] = [item];
-        }
-    }
-    const topMapKeys = Object.keys(topMap);
-
-    let maxDiff = 0;
+    // 方法1：两两对比，只要找到间隔能塞进一条弹幕的高度的，则马上插入
     for (let index = 1; index < danmus.length; index += 1) {
         const item = danmus[index];
         const prev = danmus[index - 1];
-        const prevTop = prev.top + prev.height;
-        const diff = item.top - prevTop;
-        if (diff > maxDiff) {
-            top = prevTop;
-            maxDiff = diff;
+        const prevBottom = prev.top + prev.height;
+        const diff = item.top - prevBottom;
+        if (diff >= danmus[1].height) {
+            return prevBottom;
         }
     }
 
-    if (top === 0) {
-        let maxRight = 0;
-        for (let index = 0; index < topMapKeys.length; index += 1) {
-            let minRight = danmus[0].width;
-            const topKey = topMapKeys[index];
-            const danmuArr = topMap[topKey];
-            for (let index = 0; index < danmuArr.length; index += 1) {
-                const danmu = danmuArr[index];
-                if (danmu.right < minRight) {
-                    minRight = danmu.right;
-                }
+    // 方法2：找出所有弹幕的右侧最多空白的的位置插入
+    const topMap = [];
+    for (let index = 1; index < danmus.length - 1; index += 1) {
+        const item = danmus[index];
+        if (topMap.length) {
+            const last = topMap[topMap.length - 1];
+            if (last[0].top === item.top) {
+                last.push(item);
+            } else {
+                topMap.push([item]);
             }
-
-            if (minRight > maxRight) {
-                maxRight = minRight;
-                [{ top }] = danmuArr;
-            }
+        } else {
+            topMap.push([item]);
         }
     }
 
-    if (top === 0) {
-        [top] = topMapKeys
-            .filter((item, index) => {
-                return index !== 0 && index !== topMapKeys.length - 1;
-            })
-            .sort((prev, next) => {
-                return topMap[prev].length - topMap[next].length;
-            });
-    }
+    topMap.sort((prev, next) => {
+        const nextMinRight = Math.min(...next.map((item) => item.right));
+        const prevMinRight = Math.min(...prev.map((item) => item.right));
+        return nextMinRight * next.length - prevMinRight * prev.length;
+    });
 
-    return top;
+    return topMap[0][0].top;
 }
 
 export default function getDanmuTop(ins, danmu) {
-    const [marginTop, marginBottom] = ins.option.margin;
-    const playerData = getRect(ins.art.template.$player);
+    const { $player } = ins.art.template;
+
     const danmus = ins.queue
-        .filter(
-            item =>
+        .filter((item) => {
+            return (
                 item.mode === danmu.mode &&
@@ -71,16 +48,18 @@ item.$state === 'emit' &&
                 item.$ref.style.fontSize === danmu.$ref.style.fontSize &&
-                parseFloat(item.$ref.style.top) <= playerData.height - marginBottom,
-        )
-        .map(item => {
-            const danmuData = getRect(item.$ref);
-            const { width, height } = danmuData;
-            const top = danmuData.top - playerData.top;
-            const left = danmuData.left - playerData.left;
-            const right = playerData.width - left - width;
-            return { top, left, height, width, right };
+                item.$ref.offsetTop <= $player.clientHeight - ins.marginBottom
+            );
         })
+        .map((item) => {
+            return {
+                top: item.$ref.offsetTop,
+                left: item.$ref.offsetLeft,
+                height: item.$ref.clientHeight,
+                width: item.$ref.clientWidth,
+                right: $player.clientWidth - item.$ref.offsetLeft - item.$ref.clientWidth,
+            };
+        })
         .sort((prev, next) => prev.top - next.top);
 
     if (danmus.length === 0) {
-        return marginTop;
+        return ins.marginTop;
     }
@@ -92,12 +71,12 @@
         right: 0,
-        height: marginTop,
-        width: playerData.width,
+        height: ins.marginTop,
+        width: $player.clientWidth,
     });
 
     danmus.push({
-        top: playerData.height - marginBottom,
+        top: $player.clientHeight - ins.marginBottom,
         left: 0,
         right: 0,
-        height: marginBottom,
-        width: playerData.width,
+        height: ins.marginBottom,
+        width: $player.clientWidth,
     });
@@ -104,0 +83,0 @@

src/index.js

@@ -18,1 +18,3 @@ import Danmuku from './danmuku';
 }
+
+window['artplayerPluginDanmuku'] = artplayerPluginDanmuku;

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11727386

increased by37216.28%

Number of package files

15

increased by66.67%

Lines of code

520

increased by2.36%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

16

decreased by-82.42%

No dependency changes