弹幕随播放器尺寸变化而调整

docs/uncompiled/artplayer-plugin-danmu.js

@@ -245,12 +245,14 @@
       this.queue = [];
       this.layer = null;
       this.isStop = false;
+      this.refs = [];
       this.animationFrameTimer = null;
       art.i18n.update(Danmuku.i18n);
       art.on('video:play', this.start.bind(this));
       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));
       this.config(option);
 
@@ -331,17 +333,35 @@
 
         danmu.$state = 'emit';
       }
+    }, {
+      key: "resize",
+      value: function resize() {
+        var $player = this.art.template.$player;
+
+        var _Danmuku$getRect = Danmuku.getRect($player),
+            playerWidth = _Danmuku$getRect.width;
+
+        this.queue.forEach(function (danmu) {
+          danmu.$state = 'wait';
+        });
+        this.refs.forEach(function ($ref) {
+          $ref.style.left = "".concat(playerWidth, "px");
+          $ref.style.border = 'none';
+          $ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
+          $ref.style.transition = 'transform 0s linear 0s';
+        });
+      }
     }, {
       key: "suspend",
       value: function suspend(danmu) {
         var $player = this.art.template.$player;
 
-        var _Danmuku$getRect = Danmuku.getRect($player),
-            playerLeft = _Danmuku$getRect.left,
-            playerWidth = _Danmuku$getRect.width;
+        var _Danmuku$getRect2 = Danmuku.getRect($player),
+            playerLeft = _Danmuku$getRect2.left,
+            playerWidth = _Danmuku$getRect2.width;
 
-        var _Danmuku$getRect2 = Danmuku.getRect(danmu.$ref),
-            danmuLeft = _Danmuku$getRect2.left;
+        var _Danmuku$getRect3 = Danmuku.getRect(danmu.$ref),
+            danmuLeft = _Danmuku$getRect3.left;
 
         danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
         var translateX = playerWidth - (danmuLeft - playerLeft) + 5;
@@ -388,9 +408,9 @@
         var playerLeft = Danmuku.getRect($player, 'left');
         var waitDanmu = this.queue.find(function (danmu) {
           if (danmu.$ref) {
-            var _Danmuku$getRect3 = Danmuku.getRect(danmu.$ref),
-                danmuLeft = _Danmuku$getRect3.left,
-                danmuWidth = _Danmuku$getRect3.width;
+            var _Danmuku$getRect4 = Danmuku.getRect(danmu.$ref),
+                danmuLeft = _Danmuku$getRect4.left,
+                danmuWidth = _Danmuku$getRect4.width;
 
             return danmu.$state === 'emit' && playerLeft > danmuLeft + danmuWidth;
           }
@@ -422,6 +442,7 @@
           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.layer.$ref, $ref);
+        this.refs.push($ref);
         return $ref;
       }
     }, {
@@ -429,11 +450,11 @@
       value: function getDanmuTop$1() {
         var $player = this.art.template.$player;
 
-        var _Danmuku$getRect4 = Danmuku.getRect($player),
-            playerLeft = _Danmuku$getRect4.left,
-            playerTop = _Danmuku$getRect4.top,
-            playerHeight = _Danmuku$getRect4.height,
-            playerWidth = _Danmuku$getRect4.width;
+        var _Danmuku$getRect5 = Danmuku.getRect($player),
+            playerLeft = _Danmuku$getRect5.left,
+            playerTop = _Danmuku$getRect5.top,
+            playerHeight = _Danmuku$getRect5.height,
+            playerWidth = _Danmuku$getRect5.width;
 
         var danmus = this.queue.filter(function (danmu) {
           return danmu.$state === 'emit';
@@ -444,11 +465,11 @@
         }
 
         var danmusBySort = danmus.map(function (danmu) {
-          var _Danmuku$getRect5 = Danmuku.getRect(danmu.$ref),
-              danmuLeft = _Danmuku$getRect5.left,
-              danmuTop = _Danmuku$getRect5.top,
-              danmuWidth = _Danmuku$getRect5.width,
-              danmuHeight = _Danmuku$getRect5.height;
+          var _Danmuku$getRect6 = Danmuku.getRect(danmu.$ref),
+              danmuLeft = _Danmuku$getRect6.left,
+              danmuTop = _Danmuku$getRect6.top,
+              danmuWidth = _Danmuku$getRect6.width,
+              danmuHeight = _Danmuku$getRect6.height;
 
           var top = danmuTop - playerTop;
           var left = danmuLeft - playerLeft;

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

@@ -1 +1 @@
-{"version":3,"file":"artplayer-plugin-danmu.js","sources":["../../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-danmu/src/bilibiliDanmuParse.js","../../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-danmu/src/getDanmuTop.js","../../packages/artplayer-plugin-danmu/src/danmuku.js","../../packages/artplayer-plugin-danmu/src/index.js"],"sourcesContent":["function _arrayWithHoles(arr) {\n  if (Array.isArray(arr)) return arr;\n}\n\nmodule.exports = _arrayWithHoles;","function _iterableToArrayLimit(arr, i) {\n  var _arr = [];\n  var _n = true;\n  var _d = false;\n  var _e = undefined;\n\n  try {\n    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {\n      _arr.push(_s.value);\n\n      if (i && _arr.length === i) break;\n    }\n  } catch (err) {\n    _d = true;\n    _e = err;\n  } finally {\n    try {\n      if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n    } finally {\n      if (_d) throw _e;\n    }\n  }\n\n  return _arr;\n}\n\nmodule.exports = _iterableToArrayLimit;","function _nonIterableRest() {\n  throw new TypeError(\"Invalid attempt to destructure non-iterable instance\");\n}\n\nmodule.exports = _nonIterableRest;","var arrayWithHoles = require(\"./arrayWithHoles\");\n\nvar iterableToArrayLimit = require(\"./iterableToArrayLimit\");\n\nvar nonIterableRest = require(\"./nonIterableRest\");\n\nfunction _slicedToArray(arr, i) {\n  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest();\n}\n\nmodule.exports = _slicedToArray;","export function bilibiliDanmuParseFromXml(xmlString) {\n    if (typeof xmlString !== 'string') return [];\n    const srtList = xmlString.match(/<d([\\S ]*?>[\\S ]*?)<\\/d>/gi);\n    return srtList.length\n        ? srtList.map(item => {\n            const [, attrStr, text] = item.match(/<d p=\"(.+)\">(.+)<\\/d>/);\n            const attr = attrStr.split(',');\n            return attr.length === 8 && text.trim()\n                ? {\n                    text,\n                    time: Number(attr[0]),\n                    mode: Number(attr[1]),\n                    size: Number(attr[2]),\n                    color: `#${Number(attr[3]).toString(16)}`,\n                    timestamp: Number(attr[4]),\n                    pool: Number(attr[5]),\n                    userID: attr[6],\n                    rowID: Number(attr[7]),\n                }\n                : null;\n        })\n        : [];\n}\n\nexport function bilibiliDanmuParseFromUrl(url) {\n    return fetch(url)\n        .then(res => res.text())\n        .then(xmlString => {\n            return bilibiliDanmuParseFromXml(xmlString);\n        });\n}\n\nexport function bilibiliDanmuParseFromAv(av) {\n    const corsUrl = 'https://cors-anywhere.herokuapp.com/';\n    return fetch(`${corsUrl}https://api.bilibili.com/x/web-interface/view?aid=${av}`)\n        .then(res => res.json())\n        .then(res => {\n            if (res.code === 0 && res.data && res.data.cid) {\n                return bilibiliDanmuParseFromUrl(`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`);\n            }\n            throw new Error(`Unable to get data: ${JSON.stringify(res)}`);\n        });\n}","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    descLine truncated
+{"version":3,"file":"artplayer-plugin-danmu.js","sources":["../../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-danmu/src/bilibiliDanmuParse.js","../../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-danmu/src/getDanmuTop.js","../../packages/artplayer-plugin-danmu/src/danmuku.js","../../packages/artplayer-plugin-danmu/src/index.js"],"sourcesContent":["function _arrayWithHoles(arr) {\n  if (Array.isArray(arr)) return arr;\n}\n\nmodule.exports = _arrayWithHoles;","function _iterableToArrayLimit(arr, i) {\n  var _arr = [];\n  var _n = true;\n  var _d = false;\n  var _e = undefined;\n\n  try {\n    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {\n      _arr.push(_s.value);\n\n      if (i && _arr.length === i) break;\n    }\n  } catch (err) {\n    _d = true;\n    _e = err;\n  } finally {\n    try {\n      if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n    } finally {\n      if (_d) throw _e;\n    }\n  }\n\n  return _arr;\n}\n\nmodule.exports = _iterableToArrayLimit;","function _nonIterableRest() {\n  throw new TypeError(\"Invalid attempt to destructure non-iterable instance\");\n}\n\nmodule.exports = _nonIterableRest;","var arrayWithHoles = require(\"./arrayWithHoles\");\n\nvar iterableToArrayLimit = require(\"./iterableToArrayLimit\");\n\nvar nonIterableRest = require(\"./nonIterableRest\");\n\nfunction _slicedToArray(arr, i) {\n  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest();\n}\n\nmodule.exports = _slicedToArray;","export function bilibiliDanmuParseFromXml(xmlString) {\n    if (typeof xmlString !== 'string') return [];\n    const srtList = xmlString.match(/<d([\\S ]*?>[\\S ]*?)<\\/d>/gi);\n    return srtList.length\n        ? srtList.map(item => {\n            const [, attrStr, text] = item.match(/<d p=\"(.+)\">(.+)<\\/d>/);\n            const attr = attrStr.split(',');\n            return attr.length === 8 && text.trim()\n                ? {\n                    text,\n                    time: Number(attr[0]),\n                    mode: Number(attr[1]),\n                    size: Number(attr[2]),\n                    color: `#${Number(attr[3]).toString(16)}`,\n                    timestamp: Number(attr[4]),\n                    pool: Number(attr[5]),\n                    userID: attr[6],\n                    rowID: Number(attr[7]),\n                }\n                : null;\n        })\n        : [];\n}\n\nexport function bilibiliDanmuParseFromUrl(url) {\n    return fetch(url)\n        .then(res => res.text())\n        .then(xmlString => {\n            return bilibiliDanmuParseFromXml(xmlString);\n        });\n}\n\nexport function bilibiliDanmuParseFromAv(av) {\n    const corsUrl = 'https://cors-anywhere.herokuapp.com/';\n    return fetch(`${corsUrl}https://api.bilibili.com/x/web-interface/view?aid=${av}`)\n        .then(res => res.json())\n        .then(res => {\n            if (res.code === 0 && res.data && res.data.cid) {\n                return bilibiliDanmuParseFromUrl(`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`);\n            }\n            throw new Error(`Unable to get data: ${JSON.stringify(res)}`);\n        });\n}","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    descLine truncated

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

@@ -7,12 +7,14 @@ export default class Danmuku {
         this.queue = [];
         this.layer = null;
         this.isStop = false;
+        this.refs = [];
         this.animationFrameTimer = null;
         art.i18n.update(Danmuku.i18n);
         art.on('video:play', this.start.bind(this));
         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));
         this.config(option);
         if (typeof this.option.danmus === 'function') {
@@ -135,6 +137,20 @@ export default class Danmuku {
         danmu.$state = 'emit';
     }
 
+    resize() {
+        const { $player } = this.art.template;
+        const { width: playerWidth } = Danmuku.getRect($player);
+        this.queue.forEach(danmu => {
+            danmu.$state = 'wait';
+        });
+        this.refs.forEach($ref => {
+            $ref.style.left = `${playerWidth}px`;
+            $ref.style.border = 'none';
+            $ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
+            $ref.style.transition = 'transform 0s linear 0s';
+        });
+    }
+
     suspend(danmu) {
         const { $player } = this.art.template;
         const { left: playerLeft, width: playerWidth } = Danmuku.getRect($player);
@@ -211,6 +227,7 @@ export default class Danmuku {
         });
 
         append(this.layer.$ref, $ref);
+        this.refs.push($ref);
         return $ref;
     }