优化静止弹幕

docs/uncompiled/artplayer-plugin-danmuku.js

@@ -173,6 +173,21 @@
     var result = ref.getBoundingClientRect();
     return key ? result[key] : result;
   }
+  function getDanmuRef(queue) {
+    var result = queue.find(function (danmu) {
+      return danmu.$ref && danmu.$state === 'wait';
+    });
+
+    if (result) {
+      var _$ref = result.$ref;
+      result.$ref = null;
+      return _$ref;
+    }
+
+    var $ref = document.createElement('div');
+    $ref.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    ";
+    return $ref;
+  }
 
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
@@ -366,6 +381,7 @@
       art.on('video:playing', this.start.bind(this));
       art.on('video:pause', this.stop.bind(this));
       art.on('video:waiting', this.stop.bind(this));
+      art.on('resize', this.resize.bind(this));
       art.on('destroy', this.stop.bind(this));
 
       if (typeof this.option.danmuku === 'function') {
@@ -405,7 +421,6 @@
       value: function _continue() {
         filter(this.queue, 'stop', function (danmu) {
           danmu.$state = 'emit';
-          danmu.$lastStartTime = Date.now();
 
           switch (danmu.mode) {
             case 'scroll':
@@ -433,7 +448,6 @@
           var _getRect2 = getRect(danmu.$ref),
               danmuLeft = _getRect2.left;
 
-          danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
           var translateX = playerWidth - (danmuLeft - playerLeft) + 5;
 
           switch (danmu.mode) {
@@ -448,65 +462,33 @@
         });
       }
     }, {
-      key: "getDanmuRef",
-      value: function getDanmuRef() {
+      key: "resize",
+      value: function resize() {
         var $player = this.art.template.$player;
-        var _this$art$constructor2 = this.art.constructor.utils,
-            setStyles = _this$art$constructor2.setStyles,
-            append = _this$art$constructor2.append;
-        var playerLeft = getRect($player, 'left');
-        var waitDanmu = this.queue.find(function (danmu) {
+        var danmuLeft = getRect($player, 'width');
+        filter(this.queue, 'wait', function (danmu) {
           if (danmu.$ref) {
-            var _getRect3 = getRect(danmu.$ref),
-                danmuLeft = _getRect3.left,
-                danmuWidth = _getRect3.width;
-
-            return danmu.$state === 'wait' || danmu.$state === 'emit' && playerLeft > danmuLeft + danmuWidth;
+            danmu.$ref.style.border = 'none';
+            danmu.$ref.style.left = "".concat(danmuLeft, "px");
+            danmu.$ref.style.marginLeft = '0px';
+            danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
+            danmu.$ref.style.transition = 'transform 0s linear 0s';
           }
-
-          return false;
         });
-
-        if (waitDanmu && waitDanmu.$state === 'emit') {
-          waitDanmu.$state = 'wait';
-          waitDanmu.$ref.style.border = 'none';
-          waitDanmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
-          waitDanmu.$ref.style.transition = 'transform 0s linear 0s';
-          this.$danmuku.appendChild(waitDanmu.$ref);
-          return waitDanmu.$ref;
-        }
-
-        var $ref = document.createElement('div');
-        setStyles($ref, {
-          userSelect: 'none',
-          position: 'absolute',
-          whiteSpace: 'pre',
-          pointerEvents: 'none',
-          perspective: '500px',
-          display: 'inline-block',
-          willChange: 'transform',
-          fontFamily: 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif',
-          fontWeight: 'normal',
-          lineHeight: '1.125',
-          textShadow: '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'
-        });
-        append(this.$danmuku, $ref);
-        this.refs.push($ref);
-        return $ref;
       }
     }, {
       key: "getDanmuTop",
-      value: function getDanmuTop$1() {
+      value: function getDanmuTop$1(mode) {
         var $player = this.art.template.$player;
 
-        var _getRect4 = getRect($player),
-            playerLeft = _getRect4.left,
-            playerTop = _getRect4.top,
-            playerHeight = _getRect4.height,
-            playerWidth = _getRect4.width;
+        var _getRect3 = getRect($player),
+            playerLeft = _getRect3.left,
+            playerTop = _getRect3.top,
+            playerHeight = _getRect3.height,
+            playerWidth = _getRect3.width;
 
         var danmus = this.queue.filter(function (danmu) {
-          return danmu.$state === 'emit';
+          return danmu.mode === mode && danmu.$state === 'emit';
         });
 
         if (danmus.length === 0) {
@@ -514,11 +496,11 @@
         }
 
         var danmusBySort = danmus.map(function (danmu) {
-          var _getRect5 = getRect(danmu.$ref),
-              danmuLeft = _getRect5.left,
-              danmuTop = _getRect5.top,
-              danmuWidth = _getRect5.width,
-              danmuHeight = _getRect5.height;
+          var _getRect4 = getRect(danmu.$ref),
+              danmuLeft = _getRect4.left,
+              danmuTop = _getRect4.top,
+              danmuWidth = _getRect4.width,
+              danmuHeight = _getRect4.height;
 
           var top = danmuTop - playerTop;
           var left = danmuLeft - playerLeft;
@@ -559,11 +541,33 @@
             $player = _this$art.template.$player;
         this.animationFrameTimer = window.requestAnimationFrame(function () {
           if (player.playing) {
+            var danmuLeft = getRect($player, 'width');
+            filter(_this2.queue, 'emit', function (danmu) {
+              danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
+              danmu.$lastStartTime = Date.now();
+
+              if (danmu.$restTime <= 0) {
+                danmu.$state = 'wait';
+                danmu.$ref.style.border = 'none';
+                danmu.$ref.style.left = "".concat(danmuLeft, "px");
+                danmu.$ref.style.marginLeft = '0px';
+                danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
+                danmu.$ref.style.transition = 'transform 0s linear 0s';
+              }
+            });
+
             _this2.queue.filter(function (danmu) {
               return player.currentTime + 0.1 >= danmu.time && danmu.time >= player.currentTime - 0.1 && danmu.$state === 'wait';
             }).forEach(function (danmu) {
               danmu.$state = 'emit';
-              danmu.$ref = _this2.getDanmuRef();
+              danmu.$ref = getDanmuRef(_this2.queue);
+
+              _this2.$danmuku.appendChild(danmu.$ref);
+
+              if (!_this2.refs.includes(danmu.$ref)) {
+                _this2.refs.push(danmu.$ref);
+              }
+
               danmu.$ref.style.opacity = _this2.option.opacity;
               danmu.$ref.style.fontSize = "".concat(_this2.option.fontSize, "px");
               danmu.$ref.innerText = danmu.text;
@@ -578,7 +582,6 @@
               switch (danmu.mode) {
                 case 'scroll':
                   {
-                    var danmuLeft = getRect($player, 'width');
                     danmu.$restWidth = danmuLeft + danmuWidth + 5;
                     danmu.$ref.style.left = "".concat(danmuLeft, "px");
                     danmu.$ref.style.top = "".concat(danmuTop, "px");
@@ -698,8 +701,6 @@
         name: 'artplayerPluginDanmuku',
         emit: danmuku.emit.bind(danmuku),
         config: danmuku.config.bind(danmuku),
-        start: danmuku.start.bind(danmuku),
-        stop: danmuku.stop.bind(danmuku),
         hide: danmuku.hide.bind(danmuku),
         show: danmuku.show.bind(danmuku)
       };

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

@@ -1 +1 @@
-{"version":3,"file":"artplayer-plugin-danmuku.js","sources":["../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer-plugin-danmuku/src/i18n.js","../../packages/artplayer-plugin-danmuku/src/setting.js","../../packages/artplayer-plugin-danmuku/src/utils.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer-plugin-danmuku/src/bilibili.js","../../packages/artplayer-plugin-danmuku/src/getDanmuTop.js","../../packages/artplayer-plugin-danmuku/src/danmuku.js","../../packages/artplayer-plugin-danmuku/src/index.js"],"sourcesContent":["function _defineProperty(obj, key, value) {\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value: value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n\n  return obj;\n}\n\nmodule.exports = _defineProperty;","var defineProperty = require(\"./defineProperty\");\n\nfunction _objectSpread(target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments[i] != null ? arguments[i] : {};\n    var ownKeys = Object.keys(source);\n\n    if (typeof Object.getOwnPropertySymbols === 'function') {\n      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {\n        return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n      }));\n    }\n\n    ownKeys.forEach(function (key) {\n      defineProperty(target, key, source[key]);\n    });\n  }\n\n  return target;\n}\n\nmodule.exports = _objectSpread;","function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}\n\nmodule.exports = _createClass;","export default {\n    'zh-cn': {\n        'Danmu opacity': '弹幕透明度',\n        'Danmu speed': '弹幕速度',\n        'Danmu size': '弹幕大小',\n        'Danmu text cannot be empty': '弹幕文本不能为空',\n        'The length of the danmu does not exceed': '弹幕文本字数不能超过',\n    },\n    'zh-tw': {\n        'Danmu opacity': '彈幕透明度',\n        'Danmu speed': '彈幕速度',\n        'Danmu size': '弹幕大小',\n        'Danmu text cannot be empty': '彈幕文本不能為空',\n        'The length of the danmu does not exceed': '彈幕文本字數不能超過',\n    },\n};","export function opacity(art) {\n    const {\n        i18n,\n        events: { proxy },\n    } = art;\n\n    return {\n        name: 'danmuku-opacity',\n        index: 30,\n        html: `\n            <div class=\"art-setting-header\">\n                ${i18n.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        `,\n        mounted: $setting => {\n            const $range = $setting.querySelector('input[type=range]');\n            const $value = $setting.querySelector('.art-value');\n            proxy($range, 'change', () => {\n                const { value } = $range;\n                $value.innerText = Number(value) * 100;\n\n                art.plugins.artplayerPluginDanmuku.config({\n                    opacity: Number(value),\n                });\n\n                art.on('artplayerPluginDanmuku:config', config => {\n                    if ($range.value !== config.opacity) {\n                        $range.value = config.opacity;\n                        $value.innerText = config.opacity * 100;\n                    }\n                });\n            });\n        },\n    };\n}\n\nexport function size(art) {\n    const {\n        i18n,\n        events: { proxy },\n    } = art;\n\n    return {\n        name: 'danmuku-size',\n        index: 50,\n        html: `\n            <div class=\"art-setting-header\">\n                ${i18n.get('Danmu size')}: <span class=\"art-value\">25</span>px\n            </Line truncated
+{"version":3,"file":"artplayer-plugin-danmuku.js","sources":["../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer-plugin-danmuku/src/i18n.js","../../packages/artplayer-plugin-danmuku/src/setting.js","../../packages/artplayer-plugin-danmuku/src/utils.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer-plugin-danmuku/src/bilibili.js","../../packages/artplayer-plugin-danmuku/src/getDanmuTop.js","../../packages/artplayer-plugin-danmuku/src/danmuku.js","../../packages/artplayer-plugin-danmuku/src/index.js"],"sourcesContent":["function _defineProperty(obj, key, value) {\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value: value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n\n  return obj;\n}\n\nmodule.exports = _defineProperty;","var defineProperty = require(\"./defineProperty\");\n\nfunction _objectSpread(target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments[i] != null ? arguments[i] : {};\n    var ownKeys = Object.keys(source);\n\n    if (typeof Object.getOwnPropertySymbols === 'function') {\n      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {\n        return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n      }));\n    }\n\n    ownKeys.forEach(function (key) {\n      defineProperty(target, key, source[key]);\n    });\n  }\n\n  return target;\n}\n\nmodule.exports = _objectSpread;","function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}\n\nmodule.exports = _createClass;","export default {\n    'zh-cn': {\n        'Danmu opacity': '弹幕透明度',\n        'Danmu speed': '弹幕速度',\n        'Danmu size': '弹幕大小',\n        'Danmu text cannot be empty': '弹幕文本不能为空',\n        'The length of the danmu does not exceed': '弹幕文本字数不能超过',\n    },\n    'zh-tw': {\n        'Danmu opacity': '彈幕透明度',\n        'Danmu speed': '彈幕速度',\n        'Danmu size': '弹幕大小',\n        'Danmu text cannot be empty': '彈幕文本不能為空',\n        'The length of the danmu does not exceed': '彈幕文本字數不能超過',\n    },\n};","export function opacity(art) {\n    const {\n        i18n,\n        events: { proxy },\n    } = art;\n\n    return {\n        name: 'danmuku-opacity',\n        index: 30,\n        html: `\n            <div class=\"art-setting-header\">\n                ${i18n.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        `,\n        mounted: $setting => {\n            const $range = $setting.querySelector('input[type=range]');\n            const $value = $setting.querySelector('.art-value');\n            proxy($range, 'change', () => {\n                const { value } = $range;\n                $value.innerText = Number(value) * 100;\n\n                art.plugins.artplayerPluginDanmuku.config({\n                    opacity: Number(value),\n                });\n\n                art.on('artplayerPluginDanmuku:config', config => {\n                    if ($range.value !== config.opacity) {\n                        $range.value = config.opacity;\n                        $value.innerText = config.opacity * 100;\n                    }\n                });\n            });\n        },\n    };\n}\n\nexport function size(art) {\n    const {\n        i18n,\n        events: { proxy },\n    } = art;\n\n    return {\n        name: 'danmuku-size',\n        index: 50,\n        html: `\n            <div class=\"art-setting-header\">\n                ${i18n.get('Danmu size')}: <span class=\"art-value\">25</span>px\n            </Line truncated

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

@@ -1,6 +1,6 @@
 import i18n from './i18n';
 import { opacity, size, speed } from './setting';
-import { filter, getRect } from './utils';
+import { filter, getRect, getDanmuRef } from './utils';
 import { bilibiliDanmuParseFromUrl } from './bilibili';
 import getDanmuTop from './getDanmuTop';
 
@@ -22,6 +22,7 @@ export default class Danmuku {
         art.on('video:playing', this.start.bind(this));
         art.on('video:pause', this.stop.bind(this));
         art.on('video:waiting', this.stop.bind(this));
+        art.on('resize', this.resize.bind(this));
         art.on('destroy', this.stop.bind(this));
         if (typeof this.option.danmuku === 'function') {
             this.option.danmuku().then(danmus => {
@@ -80,7 +81,6 @@ export default class Danmuku {
     continue() {
         filter(this.queue, 'stop', danmu => {
             danmu.$state = 'emit';
-            danmu.$lastStartTime = Date.now();
             switch (danmu.mode) {
                 case 'scroll':
                     danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
@@ -98,7 +98,6 @@ export default class Danmuku {
         filter(this.queue, 'emit', danmu => {
             danmu.$state = 'stop';
             const { left: danmuLeft } = getRect(danmu.$ref);
-            danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
             const translateX = playerWidth - (danmuLeft - playerLeft) + 5;
             switch (danmu.mode) {
                 case 'scroll':
@@ -111,54 +110,24 @@ export default class Danmuku {
         });
     }
 
-    getDanmuRef() {
+    resize() {
         const { $player } = this.art.template;
-        const { setStyles, append } = this.art.constructor.utils;
-        const playerLeft = getRect($player, 'left');
-
-        const waitDanmu = this.queue.find(danmu => {
+        const danmuLeft = getRect($player, 'width');
+        filter(this.queue, 'wait', danmu => {
             if (danmu.$ref) {
-                const { left: danmuLeft, width: danmuWidth } = getRect(danmu.$ref);
-                return danmu.$state === 'wait' || (danmu.$state === 'emit' && playerLeft > danmuLeft + danmuWidth);
+                danmu.$ref.style.border = 'none';
+                danmu.$ref.style.left = `${danmuLeft}px`;
+                danmu.$ref.style.marginLeft = '0px';
+                danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
+                danmu.$ref.style.transition = 'transform 0s linear 0s';
             }
-            return false;
         });
-
-        if (waitDanmu && waitDanmu.$state === 'emit') {
-            waitDanmu.$state = 'wait';
-            waitDanmu.$ref.style.border = 'none';
-            waitDanmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
-            waitDanmu.$ref.style.transition = 'transform 0s linear 0s';
-            this.$danmuku.appendChild(waitDanmu.$ref);
-            return waitDanmu.$ref;
-        }
-
-        const $ref = document.createElement('div');
-
-        setStyles($ref, {
-            userSelect: 'none',
-            position: 'absolute',
-            whiteSpace: 'pre',
-            pointerEvents: 'none',
-            perspective: '500px',
-            display: 'inline-block',
-            willChange: 'transform',
-            fontFamily: 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif',
-            fontWeight: 'normal',
-            lineHeight: '1.125',
-            textShadow:
-                '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',
-        });
-
-        append(this.$danmuku, $ref);
-        this.refs.push($ref);
-        return $ref;
     }
 
-    getDanmuTop() {
+    getDanmuTop(mode) {
         const { $player } = this.art.template;
         const { left: playerLeft, top: playerTop, height: playerHeight, width: playerWidth } = getRect($player);
-        const danmus = this.queue.filter(danmu => danmu.$state === 'emit');
+        const danmus = this.queue.filter(danmu => danmu.mode === mode && danmu.$state === 'emit');
 
         if (danmus.length === 0) {
             return this.option.margin[0];
@@ -208,6 +177,21 @@ export default class Danmuku {
         } = this.art;
         this.animationFrameTimer = window.requestAnimationFrame(() => {
             if (player.playing) {
+                const danmuLeft = getRect($player, 'width');
+
+                filter(this.queue, 'emit', danmu => {
+                    danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
+                    danmu.$lastStartTime = Date.now();
+                    if (danmu.$restTime <= 0) {
+                        danmu.$state = 'wait';
+                        danmu.$ref.style.border = 'none';
+                        danmu.$ref.style.left = `${danmuLeft}px`;
+                        danmu.$ref.style.marginLeft = '0px';
+                        danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
+                        danmu.$ref.style.transition = 'transform 0s linear 0s';
+                    }
+                });
+
                 this.queue
                     .filter(danmu => {
                         return (
@@ -218,7 +202,11 @@ export default class Danmuku {
                     })
                     .forEach(danmu => {
                         danmu.$state = 'emit';
-                        danmu.$ref = this.getDanmuRef();
+                        danmu.$ref = getDanmuRef(this.queue);
+                        this.$danmuku.appendChild(danmu.$ref);
+                        if (!this.refs.includes(danmu.$ref)) {
+                            this.refs.push(danmu.$ref);
+                        }
                         danmu.$ref.style.opacity = this.option.opacity;
                         danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
                         danmu.$ref.innerText = danmu.text;
@@ -230,7 +218,6 @@ export default class Danmuku {
                         const danmuTop = this.getDanmuTop(danmu.mode);
                         switch (danmu.mode) {
                             case 'scroll': {
-                                const danmuLeft = getRect($player, 'width');
                                 danmu.$restWidth = danmuLeft + danmuWidth + 5;
                                 danmu.$ref.style.left = `${danmuLeft}px`;
                                 danmu.$ref.style.top = `${danmuTop}px`;

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

@@ -7,8 +7,6 @@ export default function artplayerPluginDanmuku(option) {
             name: 'artplayerPluginDanmuku',
             emit: danmuku.emit.bind(danmuku),
             config: danmuku.config.bind(danmuku),
-            start: danmuku.start.bind(danmuku),
-            stop: danmuku.stop.bind(danmuku),
             hide: danmuku.hide.bind(danmuku),
             show: danmuku.show.bind(danmuku),
         };

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

@@ -5,4 +5,33 @@ export function filter(queue, state, 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;
 }