update danmuku.js

docs/mobile.html

@@ -119,7 +119,16 @@
             ],
             plugins: [
                 artplayerPluginDanmuku({
-                    danmuku: '/assets/sample/danmuku.xml',
+                    // danmuku: '/assets/sample/danmuku.xml',
+                    danmuku: [
+                        {
+                            text: '666',
+                            time: 1,
+                            color: '#fff',
+                            border: false,
+                            mode: 0,
+                        }
+                    ],
                     speed: 5,
                     maxlength: 50,
                     margin: [10, 50],

docs/uncompiled/artplayer-plugin-danmuku/index.js

@@ -170,7 +170,6 @@ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 var _i18N = require("./i18n");
 var _i18NDefault = parcelHelpers.interopDefault(_i18N);
-var _utils = require("./utils");
 var _bilibili = require("./bilibili");
 var _getDanmuTop = require("./getDanmuTop");
 var _getDanmuTopDefault = parcelHelpers.interopDefault(_getDanmuTop);
@@ -220,6 +219,70 @@ class Danmuku {
             synchronousPlayback: 'boolean'
         };
     }
+    get isRotate() {
+        return this.art.plugins.autoOrientation && this.art.plugins.autoOrientation.state;
+    }
+    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 = '';
@@ -239,8 +302,8 @@ class Danmuku {
         return this;
     }
     config(option) {
-        const { clamp , mergeDeep  } = this.utils;
-        this.option = mergeDeep(Danmuku.option, this.option, option);
+        const { clamp  } = this.utils;
+        this.option = Object.assign({}, Danmuku.option, this.option, option);
         this.validator(this.option, Danmuku.scheme);
         this.option.speed = clamp(this.option.speed, 1, 10);
         this.option.maxlength = clamp(this.option.maxlength, 10, 100);
@@ -252,8 +315,9 @@ class Danmuku {
         return this;
     }
     continue() {
-        _utils.filter(this.queue, 'stop', (danmu)=>{
+        this.filter('stop', (danmu)=>{
             danmu.$state = 'emit';
+            danmu.$ref.dataset.state = 'emit';
             danmu.$lastStartTime = Date.now();
             switch(danmu.mode){
                 case 0:
@@ -268,14 +332,15 @@ class Danmuku {
     }
     suspend() {
         const { $player  } = this.art.template;
-        _utils.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  } = _utils.getRect($player);
-                        const { left: danmuLeft  } = _utils.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)`;
                         danmu.$ref.style.transition = 'transform 0s linear 0s';
                         break;
@@ -288,8 +353,8 @@ class Danmuku {
     }
     resize() {
         const { $player  } = this.art.template;
-        const danmuLeft = _utils.getRect($player, 'width');
-        _utils.filter(this.queue, 'wait', (danmu)=>{
+        const danmuLeft = this.getRect($player, 'width');
+        this.filter('wait', (danmu)=>{
             if (danmu.$ref) {
                 danmu.$ref.style.border = 'none';
                 danmu.$ref.style.left = `${danmuLeft}px`;
@@ -304,12 +369,13 @@ class Danmuku {
         const { $player  } = this.art.template;
         this.animationFrameTimer = window.requestAnimationFrame(()=>{
             if (this.art.playing && !this.isHide) {
-                const danmuLeft = _utils.getRect($player, 'width');
-                _utils.filter(this.queue, 'emit', (danmu)=>{
+                const danmuLeft = this.getRect($player, 'width');
+                this.filter('emit', (danmu)=>{
                     danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
                     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.marginLeft = '0px';
@@ -319,7 +385,8 @@ class Danmuku {
                 });
                 this.queue.filter((danmu)=>this.art.currentTime + 0.1 >= danmu.time && danmu.time >= this.art.currentTime - 0.1 && danmu.$state === 'wait'
                 ).forEach((danmu)=>{
-                    danmu.$ref = _utils.getDanmuRef(this.queue);
+                    danmu.$ref = this.getDanmuRef(this.queue);
+                    danmu.$ref.__danmu__ = danmu;
                     this.$danmuku.appendChild(danmu.$ref);
                     danmu.$ref.style.opacity = this.option.opacity;
                     danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
@@ -328,12 +395,13 @@ class Danmuku {
                     danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color || '#fff'}` : 'none';
                     danmu.$restTime = this.option.synchronousPlayback && this.art.playbackRate ? this.option.speed / Number(this.art.playbackRate) : this.option.speed;
                     danmu.$lastStartTime = Date.now();
-                    const danmuWidth = _utils.getRect(danmu.$ref, 'width');
+                    const danmuWidth = this.getRect(danmu.$ref, 'width');
                     const danmuTop = _getDanmuTopDefault.default(this, danmu);
                     danmu.$state = 'emit';
+                    danmu.$ref.dataset.state = 'emit';
                     switch(danmu.mode){
                         case 0:
-                            danmu.$restWidth = danmuLeft + danmuWidth + 5;
+                            danmu.$restWidth = danmuLeft + danmuWidth;
                             danmu.$ref.style.left = `${danmuLeft}px`;
                             danmu.$ref.style.top = `${danmuTop}px`;
                             danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
@@ -380,24 +448,16 @@ class Danmuku {
         return this;
     }
     emit(danmu) {
-        const { notice , i18n  } = this.art;
-        const { utils: { clamp  } , validator ,  } = this.art.constructor;
-        validator(danmu, {
+        this.validator(danmu, {
             text: 'string',
             mode: 'number|undefined',
             color: 'string|undefined',
             time: 'number|undefined',
             border: 'boolean|undefined'
         });
-        if (!danmu.text.trim()) {
-            notice.show = i18n.get('Danmu text cannot be empty');
-            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);
+        if (!danmu.text.trim()) return this;
+        if (danmu.text.length > this.option.maxlength) return this;
+        if (danmu.time) danmu.time = this.utils.clamp(danmu.time, 0, Infinity);
         else danmu.time = this.art.currentTime + 0.5;
         this.queue.push({
             mode: 0,
@@ -413,7 +473,7 @@ class Danmuku {
 }
 exports.default = Danmuku;
 
-},{"./i18n":"jX6xP","./utils":"9VWnI","./bilibili":"95SuC","./getDanmuTop":"2ouQq","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"jX6xP":[function(require,module,exports) {
+},{"./i18n":"jX6xP","./bilibili":"95SuC","./getDanmuTop":"2ouQq","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"jX6xP":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 exports.default = {
@@ -465,50 +525,7 @@ exports.export = function(dest, destName, get) {
     });
 };
 
-},{}],"9VWnI":[function(require,module,exports) {
-var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
-parcelHelpers.defineInteropFlag(exports);
-parcelHelpers.export(exports, "filter", ()=>filter
-);
-parcelHelpers.export(exports, "getRect", ()=>getRect
-);
-parcelHelpers.export(exports, "getDanmuRef", ()=>getDanmuRef
-);
-function filter(queue, state, callback) {
-    return queue.filter((danmu)=>danmu.$state === state
-    ).map(callback);
-}
-function getRect(ref, key) {
-    const result = ref.getBoundingClientRect();
-    return key ? result[key] : result;
-}
-function getDanmuRef(queue) {
-    const result = 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;
-}
-
-},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"95SuC":[function(require,module,exports) {
+},{}],"95SuC":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "getMode", ()=>getMode
@@ -558,7 +575,6 @@ function bilibiliDanmuParseFromUrl(url) {
 },{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"2ouQq":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
-var _utils = require("./utils");
 function calculatedTop(danmus) {
     let top = 0;
     const topMap = {};
@@ -606,10 +622,10 @@ function calculatedTop(danmus) {
 }
 function getDanmuTop(ins, danmu) {
     const [marginTop, marginBottom] = ins.option.margin;
-    const playerData = _utils.getRect(ins.art.template.$player);
+    const playerData = ins.getRect(ins.art.template.$player);
     const danmus = ins.queue.filter((item)=>item.mode === danmu.mode && item.$state === 'emit' && item.$ref && item.$ref.style.fontSize === danmu.$ref.style.fontSize && parseFloat(item.$ref.style.top) <= playerData.height - marginBottom
     ).map((item)=>{
-        const danmuData = _utils.getRect(item.$ref);
+        const danmuData = ins.getRect(item.$ref);
         const { width , height  } = danmuData;
         const top = danmuData.top - playerData.top;
         const left = danmuData.left - playerData.left;
@@ -642,6 +658,6 @@ function getDanmuTop(ins, danmu) {
 }
 exports.default = getDanmuTop;
 
-},{"./utils":"9VWnI","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}]},["lIf7X"], "lIf7X", "parcelRequire4dc0")
+},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}]},["lIf7X"], "lIf7X", "parcelRequire4dc0")
 
 //# sourceMappingURL=index.js.map

docs/uncompiled/artplayer-plugin-danmuku/index.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA,mCAAgC;;AAEjB,SAAS,sBAAsB,CAAC,MAAM,EAAE;IACnD,OAAO,CAAC,GAAG,GAAK;QACZ,MAAM,OAAO,GAAG,IAAI,uBAAO,CAAC,GAAG,EAAE,MAAM,CAAC,AAAC;QACzC,OAAO;YACH,IAAI,EAAE,wBAAwB;YAC9B,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;YAChC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;YACpC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;YAChC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;YAChC,IAAI,MAAM,IAAG;gBACT,OAAO,OAAO,CAAC,MAAM,CAAC;aACzB;SACJ,CAAC;KACL,CAAC;CACL;kBAduB,sBAAsB;AAgB9C,MAAM,CAAC,wBAAwB,CAAC,GAAG,sBAAsB,CAAC;;;AClB1D;;AAAA,6BAA0B;;AAC1B,+BAAuD;AACvD,qCAAuD;AACvD,2CAAwC;;AAEzB,MAAM,OAAO;IACxB,YAAY,GAAG,EAAE,MAAM,CAAE;QACrB,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,oBAAI,CAAC,CAAC;QACtB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC;QACnC,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,WAAW,CAAC,SAAS,CAAC;QAE3C,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAEtC,GAAG,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5C,GAAG,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/C,GAAG,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5C,GAAG,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9C,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACzC,GAAG,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAExC,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;IAED,WAAW,MAAM,GAAG;QAChB,OAAO;YACH,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,CAAC;YACR,SAAS,EAAE,EAAE;YACb,MAAM,EAAE;AAAC,kBAAE;AAAE,mBAAG;aAAC;YACjB,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,EAAE;YACZ,mBAAmB,EAAE,KAAK;SAC7B,CAAC;KACL;IAED,WAAW,MAAM,GAAG;QAChB,OAAO;YACH,OAAO,EAAE,uBAAuB;YAChC,KAAK,EAAE,QAAQ;YACf,SAAS,EAAE,QAAQ;YACnB,MAAM,EAAE,OAAO;YACf,OAAO,EAAE,QAAQ;YACjB,QAAQ,EAAE,QAAQ;YAClB,mBAAmB,EAAE,SAAS;SACjC,CAAC;KACL;IAED,MAAM,IAAI,GAAG;QACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,EAAE,CAAC;QAC7B,IAAI,MAAM,GAAG,EAAE,AAAC;QAEhB,IAAI;YACA,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,KAAK,UAAU,EACzC,MAAM,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;iBAClC,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,KAAK,UAAU,EACrD,MAAM,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;iBAChC,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,KAAK,QAAQ,EAC9C,MAAM,GAAG,MAAM,mCAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;iBAE9D,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;YAGjC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,wCAAwC,CAAC,CAAC;YACxF,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,+BAA+B,EAAE,MAAM,CAAC,CAAC;YACvD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SACxC,CAAC,OAAO,KAAK,EAAE;YACZ,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC;YACrD,MAAM,KAAK,CAAC;SACf;QAED,OAAO,IAAI,CAAC;KACf;IAED,MAAM,CAAC,MAAM,EAAE;QACX,MAAM,EAAE,KAAK,CAAA,EAAE,SAAS,CAAA,EAAE,GAAG,IAAI,CAAC,KAAK,AAAC;QACxC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC7D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpD,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;QAC9D,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;QAC7D,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;QAC7D,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;QAC5D,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,+BAA+B,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5D,OAAO,IAAI,CAAC;KACf;IAED,QAAQ,GAAG;QACP,aAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,GAAK;YAClC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YACtB,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAClC,OAAQ,KAAK,CAAC,IAAI;gBACd,KAAK,CAAC;oBACF,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,mCAAmC,CAAC,CAAC;oBAClG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;oBACxE,MAAM;gBACV;oBACI,MAAM;aACb;SACJ,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;KACf;IAED,OAAO,GAAG;QACN,MAAM,EAAE,OAAO,CAAA,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,AAAC;QACtC,aAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,GAAK;YAClC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YACtB,OAAQ,KAAK,CAAC,IAAI;gBACd,KAAK,CAAC;oBAAE;wBACJ,MAAM,EAAE,IAAI,EAAE,UAAU,CAAA,EAAE,KAAK,EAAE,WAAW,CAAA,EAAE,GAAG,cAAO,CAAC,OAAO,CAAC,AAAC;wBAClE,MAAM,EAAE,IAAI,EAAE,SAAS,CAAA,EALine truncated
+{"mappings":"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 truncated

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

@@ -1,5 +1,4 @@
 import i18n from './i18n';
-import { filter, getRect, getDanmuRef } from './utils';
 import { bilibiliDanmuParseFromUrl } from './bilibili';
 import getDanmuTop from './getDanmuTop';
 
@@ -52,6 +51,80 @@ export default class Danmuku {
         };
     }
 
+    get isRotate() {
+        return this.art.plugins.autoOrientation && this.art.plugins.autoOrientation.state;
+    }
+
+    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 = '';
@@ -80,9 +153,9 @@ export default class Danmuku {
     }
 
     config(option) {
-        const { clamp, mergeDeep } = this.utils;
+        const { clamp } = this.utils;
 
-        this.option = mergeDeep(Danmuku.option, this.option, option);
+        this.option = Object.assign({}, Danmuku.option, this.option, option);
         this.validator(this.option, Danmuku.scheme);
 
         this.option.speed = clamp(this.option.speed, 1, 10);
@@ -98,8 +171,9 @@ export default class Danmuku {
     }
 
     continue() {
-        filter(this.queue, 'stop', (danmu) => {
+        this.filter('stop', (danmu) => {
             danmu.$state = 'emit';
+            danmu.$ref.dataset.state = 'emit';
             danmu.$lastStartTime = Date.now();
             switch (danmu.mode) {
                 case 0:
@@ -115,13 +189,14 @@ export default class Danmuku {
 
     suspend() {
         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)`;
                     danmu.$ref.style.transition = 'transform 0s linear 0s';
                     break;
@@ -135,8 +210,8 @@ export default class Danmuku {
 
     resize() {
         const { $player } = this.art.template;
-        const danmuLeft = getRect($player, 'width');
-        filter(this.queue, 'wait', (danmu) => {
+        const danmuLeft = this.getRect($player, 'width');
+        this.filter('wait', (danmu) => {
             if (danmu.$ref) {
                 danmu.$ref.style.border = 'none';
                 danmu.$ref.style.left = `${danmuLeft}px`;
@@ -152,13 +227,14 @@ export default class Danmuku {
         const { $player } = this.art.template;
         this.animationFrameTimer = window.requestAnimationFrame(() => {
             if (this.art.playing && !this.isHide) {
-                const danmuLeft = getRect($player, 'width');
+                const danmuLeft = this.getRect($player, 'width');
 
-                filter(this.queue, 'emit', (danmu) => {
+                this.filter('emit', (danmu) => {
                     danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
                     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.marginLeft = '0px';
@@ -175,7 +251,8 @@ export default class Danmuku {
                             danmu.$state === 'wait',
                     )
                     .forEach((danmu) => {
-                        danmu.$ref = getDanmuRef(this.queue);
+                        danmu.$ref = this.getDanmuRef(this.queue);
+                        danmu.$ref.__danmu__ = danmu;
                         this.$danmuku.appendChild(danmu.$ref);
                         danmu.$ref.style.opacity = this.option.opacity;
                         danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
@@ -187,12 +264,13 @@ export default class Danmuku {
                                 ? this.option.speed / Number(this.art.playbackRate)
                                 : 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';
                         switch (danmu.mode) {
                             case 0: {
-                                danmu.$restWidth = danmuLeft + danmuWidth + 5;
+                                danmu.$restWidth = danmuLeft + danmuWidth;
                                 danmu.$ref.style.left = `${danmuLeft}px`;
                                 danmu.$ref.style.top = `${danmuTop}px`;
                                 danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
@@ -248,14 +326,7 @@ export default class Danmuku {
     }
 
     emit(danmu) {
-        const { notice, i18n } = this.art;
-
-        const {
-            utils: { clamp },
-            validator,
-        } = this.art.constructor;
-
-        validator(danmu, {
+        this.validator(danmu, {
             text: 'string',
             mode: 'number|undefined',
             color: 'string|undefined',
@@ -263,18 +334,11 @@ export default class Danmuku {
             border: 'boolean|undefined',
         });
 
-        if (!danmu.text.trim()) {
-            notice.show = i18n.get('Danmu text cannot be empty');
-            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.text.trim()) return this;
+        if (danmu.text.length > 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 {
             danmu.time = this.art.currentTime + 0.5;
         }
@@ -288,6 +352,7 @@ export default class Danmuku {
             $lastStartTime: 0,
             $restWidth: 0,
         });
+
         return this;
     }
 }

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

@@ -1,5 +1,3 @@
-import { getRect } from './utils';
-
 function calculatedTop(danmus) {
     let top = 0;
     const topMap = {};
@@ -60,18 +58,18 @@ function calculatedTop(danmus) {
 
 export default function getDanmuTop(ins, danmu) {
     const [marginTop, marginBottom] = ins.option.margin;
-    const playerData = getRect(ins.art.template.$player);
+    const playerData = ins.getRect(ins.art.template.$player);
     const danmus = ins.queue
         .filter(
-            item =>
+            (item) =>
                 item.mode === danmu.mode &&
                 item.$state === 'emit' &&
                 item.$ref &&
                 item.$ref.style.fontSize === danmu.$ref.style.fontSize &&
                 parseFloat(item.$ref.style.top) <= playerData.height - marginBottom,
         )
-        .map(item => {
-            const danmuData = getRect(item.$ref);
+        .map((item) => {
+            const danmuData = ins.getRect(item.$ref);
             const { width, height } = danmuData;
             const top = danmuData.top - playerData.top;
             const left = danmuData.left - playerData.left;

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

@@ -1,37 +0,0 @@
-export function filter(queue, state, callback) {
-    return queue.filter(danmu => danmu.$state === state).map(callback);
-}
-
-export function getRect(ref, key) {
-    const result = ref.getBoundingClientRect();
-    return key ? result[key] : result;
-}
-
-export function getDanmuRef(queue) {
-    const result = 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;
-}