From 8aac0ba52f95a08f29b0a3ef5826900a496da1ff Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Thu, 25 Apr 2019 16:47:50 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BC=B9=E5=B9=95=E6=8F=92?= =?UTF-8?q?=E4=BB=B6=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/assets/example/danmu.js | 2 +- docs/uncompiled/artplayer-plugin-danmu.js | 339 +++++++++++++++--- docs/uncompiled/artplayer-plugin-danmu.js.map | 2 +- .../artplayer-plugin-danmu/src/danmuku.js | 63 +++- packages/artplayer-plugin-danmu/src/index.js | 12 +- 5 files changed, 336 insertions(+), 82 deletions(-) diff --git a/docs/assets/example/danmu.js b/docs/assets/example/danmu.js index db55e726f..b6ab2dd2b 100644 --- a/docs/assets/example/danmu.js +++ b/docs/assets/example/danmu.js @@ -3,5 +3,5 @@ var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/you-name.mp4', autoSize: true, - plugins: [artplayerPluginDanmu], + plugins: [artplayerPluginDanmu()], }); diff --git a/docs/uncompiled/artplayer-plugin-danmu.js b/docs/uncompiled/artplayer-plugin-danmu.js index 30c52f05a..ebbc8d878 100644 --- a/docs/uncompiled/artplayer-plugin-danmu.js +++ b/docs/uncompiled/artplayer-plugin-danmu.js @@ -1,67 +1,294 @@ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : - typeof define === 'function' && define.amd ? define(factory) : - (global = global || self, global['artplayer-plugin-danmu'] = factory()); + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = global || self, global['artplayer-plugin-danmu'] = factory()); }(this, function () { 'use strict'; - function artplayerPluginDanmu(art) { - var layers = art.layers; - var _art$constructor$util = art.constructor.utils, - append = _art$constructor$util.append, - errorHandle = _art$constructor$util.errorHandle, - setStyles = _art$constructor$util.setStyles; - var layer = layers.add({ - name: 'danmu', - style: { - position: 'absolute', - left: 0, - top: 0, - right: 0, - bottom: 0, - width: '100%', - height: '100%', - overflow: 'hidden' - } - }); - var danmuList = []; + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } - function emit() { - var $danmu = document.createElement('div'); - $danmu.innerText = '23333'; - setStyles($danmu, { - 'user-select': 'none', - 'position': 'absolute', - 'white-space': 'pre', - 'pointer-events': 'none', - 'perspective': '500px', - 'display': 'inline-block', - 'will-change': 'transform', - 'font-size': '25px', - 'color': 'rgb(254, 241, 2)', - 'font-family': 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif', - 'font-weight': 'normal', - 'line-height': '1.125', - 'opacity': '1', - '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', - 'left': '638px', - 'top': '0px', - 'transform': 'translateX(-626.14px) translateY(0px) translateZ(0px)', - 'transition': '-webkit-transform 0s linear 0s' - }); - danmuList.push(append(layer.$ref, $danmu)); - } + var classCallCheck = _classCallCheck; - emit({}); - return { - name: 'artplayerPluginDanmu', - config: function config(option) {}, - emit: function emit() {} - }; + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + + var createClass = _createClass; + + var Danmuku = + /*#__PURE__*/ + function () { + function Danmuku(art) { + var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + classCallCheck(this, Danmuku); + + this.art = art; + this.option = {}; + this.config(option); + this.current = []; + this.layer = {}; + this.isStop = false; + this.init(); } - window.artplayerPluginDanmu = artplayerPluginDanmu; + createClass(Danmuku, [{ + key: "init", + value: function init() { + var layers = this.art.layers; + this.layer = layers.add({ + name: 'danmu', + style: { + position: 'absolute', + left: 0, + top: 0, + right: 0, + bottom: 0, + width: '100%', + height: '100%', + overflow: 'hidden' + } + }); + this.art.on('video:timeupdate', this.update.bind(this)); + this.art.on('video:play', this.start.bind(this)); + this.art.on('video:pause', this.stop.bind(this)); + this.art.on('video:ended', this.stop.bind(this)); + this.art.on('destroy', this.stop.bind(this)); + } + }, { + key: "emit", + value: function emit(danmu) { + var errorHandle = this.art.constructor.utils.errorHandle; + errorHandle(danmu.text.trim(), 'Danmu text cannot be empty'); + var _this$art$template$$p = this.art.template.$player, + playerWidth = _this$art$template$$p.clientWidth, + playerHeight = _this$art$template$$p.clientHeight; + var danmuItem = this.getDanmuItem(); + danmuItem.$ref.innerText = danmu.text; + danmuItem.$ref.style.fontSize = danmu.size || this.option.size; + var _danmuItem$$ref = danmuItem.$ref, + danmuWidth = _danmuItem$$ref.clientWidth, + danmuHeight = _danmuItem$$ref.clientHeight; + danmuItem.$ref.style.opacity = danmu.opacity || this.option.opacity; + danmuItem.$ref.style.color = danmu.color || this.option.color; + danmuItem.$ref.style.top = this.getDanmuTop(playerHeight, danmuHeight); + danmuItem.$ref.style.left = "".concat(playerWidth, "px"); + danmuItem.$ref.style.transform = "translateX(".concat(-playerWidth - danmuWidth, "px) translateY(0px) translateZ(0px)"); + danmuItem.$ref.style.transition = "-webkit-transform ".concat(danmu.speed || this.option.speed, "s linear 0s"); + this.art.emit('artplayerPluginDanmu:emit', danmu); + } + }, { + key: "getDanmuItem", + value: function getDanmuItem() { + var _this$art$constructor = this.art.constructor.utils, + setStyles = _this$art$constructor.setStyles, + append = _this$art$constructor.append; + var inactiveItem = this.current.find(function (item) { + return item.state === 'inactive'; + }); + if (inactiveItem) return inactiveItem; + 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' + }); + return { + state: 'active', + $ref: append(this.layer.$ref, $ref) + }; + } + }, { + key: "getDanmuTop", + value: function getDanmuTop(playerHeight, danmuHeight) { + return 0; + } + }, { + key: "update", + value: function update() { + if (!this.isStop && this.option.danmu.length) ; + } + }, { + key: "config", + value: function config(option) { + this.option = Object.assign({}, Danmuku.option, option); + this.art.constructor.validator(this.option, Danmuku.scheme); + } + }, { + key: "stop", + value: function stop() { + this.isStop = true; + this.art.emit('artplayerPluginDanmu:stop'); + } + }, { + key: "start", + value: function start() { + this.isStop = false; + this.art.emit('artplayerPluginDanmu:start'); + } + }, { + key: "show", + value: function show() { + this.layer.$ref.style = 'none'; + this.art.emit('artplayerPluginDanmu:show'); + } + }, { + key: "hide", + value: function hide() { + this.layer.$ref.style = 'block'; + this.art.emit('artplayerPluginDanmu:hide'); + } + }], [{ + key: "option", + get: function get() { + return { + danmu: [], + speed: 5, + opacity: 1, + color: '#fff', + size: 14 + }; + } + }, { + key: "scheme", + get: function get() { + return { + danmu: { + type: 'array', + child: { + text: 'string', + size: 'number', + time: 'number', + color: 'string', + mode: 'number' + } + }, + speed: 'number', + opacity: 'number', + color: 'string', + size: 'number' + }; + } + }]); - return artplayerPluginDanmu; + return Danmuku; + }(); + + function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; + } + + var arrayWithHoles = _arrayWithHoles; + + function _iterableToArrayLimit(arr, i) { + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; + } + + var iterableToArrayLimit = _iterableToArrayLimit; + + function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance"); + } + + var nonIterableRest = _nonIterableRest; + + function _slicedToArray(arr, i) { + return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest(); + } + + var slicedToArray = _slicedToArray; + + function bilibiliDanmuParse(xmlString) { + if (typeof xmlString !== 'string') return []; + var regSrt = '(.+)'; + var listReg = new RegExp(regSrt, 'gi'); + var itemReg = new RegExp(regSrt, 'i'); + var srtList = xmlString.match(listReg); + return srtList.length ? srtList.map(function (item) { + var _item$match = item.match(itemReg), + _item$match2 = slicedToArray(_item$match, 3), + attrStr = _item$match2[1], + text = _item$match2[2]; + + var attr = attrStr.split(','); + return attr.length === 8 && text.trim() ? { + text: text, + time: Number(attr[0]), + mode: Number(attr[1]), + size: Number(attr[2]), + color: "#".concat(Number(attr[3]).toString(16)), + timestamp: Number(attr[4]), + pool: Number(attr[5]), + userID: Number(attr[6]), + rowID: Number(attr[7]) + } : null; + }) : []; + } + + function artplayerPluginDanmu(option) { + return function (art) { + var danmuku = new Danmuku(art, option); + return { + name: 'artplayerPluginDanmu', + emit: danmuku.emit.bind(danmuku), + start: danmuku.start.bind(danmuku), + stop: danmuku.stop.bind(danmuku), + hide: danmuku.hide.bind(danmuku), + show: danmuku.show.bind(danmuku), + config: danmuku.config.bind(danmuku) + }; + }; + } + + artplayerPluginDanmu.bilibiliDanmuParse = bilibiliDanmuParse; + window.artplayerPluginDanmu = artplayerPluginDanmu; + + return artplayerPluginDanmu; })); //# sourceMappingURL=artplayer-plugin-danmu.js.map diff --git a/docs/uncompiled/artplayer-plugin-danmu.js.map b/docs/uncompiled/artplayer-plugin-danmu.js.map index 25b6d6b88..ebd355c6d 100644 --- a/docs/uncompiled/artplayer-plugin-danmu.js.map +++ b/docs/uncompiled/artplayer-plugin-danmu.js.map @@ -1 +1 @@ -{"version":3,"file":"artplayer-plugin-danmu.js","sources":["../../packages/artplayer-plugin-danmu/src/index.js"],"sourcesContent":["function artplayerPluginDanmu(art) {\n const { layers } = art;\n const {\n utils: { append, errorHandle, setStyles },\n } = art.constructor;\n\n const layer = layers.add({\n name: 'danmu',\n style: {\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n },\n });\n\n const danmuList = [];\n function emit(style = {}) {\n const $danmu = document.createElement('div');\n $danmu.innerText = '23333';\n setStyles($danmu, {\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-size': '25px',\n 'color': 'rgb(254, 241, 2)',\n 'font-family': 'SimHei, \"Microsoft JhengHei\", Arial, Helvetica, sans-serif',\n 'font-weight': 'normal',\n 'line-height': '1.125',\n 'opacity': '1',\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 'left': '638px',\n 'top': '0px',\n 'transform': 'translateX(-626.14px) translateY(0px) translateZ(0px)',\n 'transition': '-webkit-transform 0s linear 0s',\n });\n danmuList.push(append(layer.$ref, $danmu));\n }\n\n emit({\n \n });\n\n return {\n name: 'artplayerPluginDanmu',\n config(option) {},\n emit() {},\n };\n}\n\nwindow.artplayerPluginDanmu = artplayerPluginDanmu;\nexport default artplayerPluginDanmu;\n"],"names":["artplayerPluginDanmu","art","layers","constructor","utils","append","errorHandle","setStyles","layer","add","name","style","position","left","top","right","bottom","width","height","overflow","danmuList","emit","$danmu","document","createElement","innerText","push","$ref","config","option","window"],"mappings":";;;;;;IAAA,SAASA,oBAAT,CAA8BC,GAA9B,EAAmC;IAAA,MACvBC,MADuB,GACZD,GADY,CACvBC,MADuB;IAAA,8BAI3BD,GAAG,CAACE,WAJuB,CAG3BC,KAH2B;IAAA,MAGlBC,MAHkB,yBAGlBA,MAHkB;IAAA,MAGVC,WAHU,yBAGVA,WAHU;IAAA,MAGGC,SAHH,yBAGGA,SAHH;IAM/B,MAAMC,KAAK,GAAGN,MAAM,CAACO,GAAP,CAAW;IACrBC,IAAAA,IAAI,EAAE,OADe;IAErBC,IAAAA,KAAK,EAAE;IACHC,MAAAA,QAAQ,EAAE,UADP;IAEHC,MAAAA,IAAI,EAAE,CAFH;IAGHC,MAAAA,GAAG,EAAE,CAHF;IAIHC,MAAAA,KAAK,EAAE,CAJJ;IAKHC,MAAAA,MAAM,EAAE,CALL;IAMHC,MAAAA,KAAK,EAAE,MANJ;IAOHC,MAAAA,MAAM,EAAE,MAPL;IAQHC,MAAAA,QAAQ,EAAE;IARP;IAFc,GAAX,CAAd;IAcA,MAAMC,SAAS,GAAG,EAAlB;;IACA,WAASC,IAAT,GAA0B;AAAA,IACtB,QAAMC,MAAM,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAf;IACAF,IAAAA,MAAM,CAACG,SAAP,GAAmB,OAAnB;IACAlB,IAAAA,SAAS,CAACe,MAAD,EAAS;IACd,qBAAe,MADD;IAEd,kBAAY,UAFE;IAGd,qBAAe,KAHD;IAId,wBAAkB,MAJJ;IAKd,qBAAe,OALD;IAMd,iBAAW,cANG;IAOd,qBAAe,WAPD;IAQd,mBAAa,MARC;IASd,eAAS,kBATK;IAUd,qBAAe,4DAVD;IAWd,qBAAe,QAXD;IAYd,qBAAe,OAZD;IAad,iBAAW,GAbG;IAcd,qBAAe,0GAdD;IAed,cAAQ,OAfM;IAgBd,aAAO,KAhBO;IAiBd,mBAAa,uDAjBC;IAkBd,oBAAc;IAlBA,KAAT,CAAT;IAoBAF,IAAAA,SAAS,CAACM,IAAV,CAAerB,MAAM,CAACG,KAAK,CAACmB,IAAP,EAAaL,MAAb,CAArB;IACH;;IAEDD,EAAAA,IAAI,CAAC,EAAD,CAAJ;IAIA,SAAO;IACHX,IAAAA,IAAI,EAAE,sBADH;IAEHkB,IAAAA,MAFG,kBAEIC,MAFJ,EAEY,EAFZ;IAGHR,IAAAA,IAHG,kBAGI;IAHJ,GAAP;IAKH;;IAEDS,MAAM,CAAC9B,oBAAP,GAA8BA,oBAA9B;;;;;;;;"} \ No newline at end of file +{"version":3,"file":"artplayer-plugin-danmu.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer-plugin-danmu/src/danmuku.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-danmu/src/bilibiliDanmuParse.js","../../packages/artplayer-plugin-danmu/src/index.js"],"sourcesContent":["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 class Danmuku {\n constructor(art, option = {}) {\n this.art = art;\n this.option = {};\n this.config(option);\n this.current = [];\n this.layer = {};\n this.isStop = false;\n this.init();\n }\n\n static get option() {\n return {\n danmu: [],\n speed: 5,\n opacity: 1,\n color: '#fff',\n size: 14,\n };\n }\n\n static get scheme() {\n return {\n danmu: {\n type: 'array',\n child: {\n text: 'string',\n size: 'number',\n time: 'number',\n color: 'string',\n mode: 'number',\n },\n },\n speed: 'number',\n opacity: 'number',\n color: 'string',\n size: 'number',\n };\n }\n\n init() {\n const { layers } = this.art;\n this.layer = layers.add({\n name: 'danmu',\n style: {\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n },\n });\n\n this.art.on('video:timeupdate', this.update.bind(this));\n this.art.on('video:play', this.start.bind(this));\n this.art.on('video:pause', this.stop.bind(this));\n this.art.on('video:ended', this.stop.bind(this));\n this.art.on('destroy', this.stop.bind(this));\n }\n\n emit(danmu) {\n const { errorHandle } = this.art.constructor.utils;\n errorHandle(danmu.text.trim(), 'Danmu text cannot be empty');\n const { clientWidth: playerWidth, clientHeight: playerHeight } = this.art.template.$player;\n const danmuItem = this.getDanmuItem();\n danmuItem.$ref.innerText = danmu.text;\n danmuItem.$ref.style.fontSize = danmu.size || this.option.size;\n const { clientWidth: danmuWidth, clientHeight: danmuHeight } = danmuItem.$ref;\n danmuItem.$ref.style.opacity = danmu.opacity || this.option.opacity;\n danmuItem.$ref.style.color = danmu.color || this.option.color;\n danmuItem.$ref.style.top = this.getDanmuTop(playerHeight, danmuHeight);\n danmuItem.$ref.style.left = `${playerWidth}px`;\n danmuItem.$ref.style.transform = `translateX(${-playerWidth - danmuWidth}px) translateY(0px) translateZ(0px)`;\n danmuItem.$ref.style.transition = `-webkit-transform ${danmu.speed || this.option.speed}s linear 0s`;\n this.art.emit('artplayerPluginDanmu:emit', danmu);\n }\n\n getDanmuItem() {\n const { setStyles, append } = this.art.constructor.utils;\n const inactiveItem = this.current.find(item => item.state === 'inactive');\n if (inactiveItem) return inactiveItem;\n const $ref = document.createElement('div');\n setStyles($ref, {\n userSelect: 'none',\n position: 'absolute',\n whiteSpace: 'pre',\n pointerEvents: 'none',\n perspective: '500px',\n display: 'inline-block',\n willChange: 'transform',\n fontFamily: 'SimHei, \"Microsoft JhengHei\", Arial, Helvetica, sans-serif',\n fontWeight: 'normal',\n lineHeight: '1.125',\n textShadow:\n '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 });\n return {\n state: 'active',\n $ref: append(this.layer.$ref, $ref),\n };\n }\n\n getDanmuTop(playerHeight, danmuHeight) {\n return 0;\n }\n\n update() {\n if (!this.isStop && this.option.danmu.length) {\n // 播放速度\n }\n }\n\n config(option) {\n this.option = Object.assign({}, Danmuku.option, option);\n this.art.constructor.validator(this.option, Danmuku.scheme);\n }\n\n stop() {\n this.isStop = true;\n this.art.emit('artplayerPluginDanmu:stop');\n }\n\n start() {\n this.isStop = false;\n this.art.emit('artplayerPluginDanmu:start');\n }\n\n show() {\n this.layer.$ref.style = 'none';\n this.art.emit('artplayerPluginDanmu:show');\n }\n\n hide() {\n this.layer.$ref.style = 'block';\n this.art.emit('artplayerPluginDanmu:hide');\n }\n}\n","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 default function bilibiliDanmuParse(xmlString) {\n if (typeof xmlString !== 'string') return [];\n const regSrt = '(.+)';\n const listReg = new RegExp(regSrt, 'gi');\n const itemReg = new RegExp(regSrt, 'i');\n const srtList = xmlString.match(listReg);\n return srtList.length\n ? srtList.map(item => {\n const [, attrStr, text] = item.match(itemReg);\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: Number(attr[6]),\n rowID: Number(attr[7]),\n }\n : null;\n })\n : [];\n}\n","import Danmuku from './danmuku';\nimport bilibiliDanmuParse from './bilibiliDanmuParse';\n\nfunction artplayerPluginDanmu(option) {\n return art => {\n const danmuku = new Danmuku(art, option);\n return {\n name: 'artplayerPluginDanmu',\n emit: danmuku.emit.bind(danmuku),\n start: danmuku.start.bind(danmuku),\n stop: danmuku.stop.bind(danmuku),\n hide: danmuku.hide.bind(danmuku),\n show: danmuku.show.bind(danmuku),\n config: danmuku.config.bind(danmuku),\n };\n };\n}\n\nartplayerPluginDanmu.bilibiliDanmuParse = bilibiliDanmuParse;\nwindow.artplayerPluginDanmu = artplayerPluginDanmu;\nexport default artplayerPluginDanmu;\n"],"names":["Danmuku","art","option","config","current","layer","isStop","init","layers","add","name","style","position","left","top","right","bottom","width","height","overflow","on","update","bind","start","stop","danmu","errorHandle","constructor","utils","text","trim","template","$player","playerWidth","clientWidth","playerHeight","clientHeight","danmuItem","getDanmuItem","$ref","innerText","fontSize","size","danmuWidth","danmuHeight","opacity","color","getDanmuTop","transform","transition","speed","emit","setStyles","append","inactiveItem","find","item","state","document","createElement","userSelect","whiteSpace","pointerEvents","perspective","display","willChange","fontFamily","fontWeight","lineHeight","textShadow","length","Object","assign","validator","scheme","type","child","time","mode","bilibiliDanmuParse","xmlString","regSrt","listReg","RegExp","itemReg","srtList","match","map","attrStr","attr","split","Number","toString","timestamp","pool","userID","rowID","artplayerPluginDanmu","danmuku","hide","show","window"],"mappings":"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"} \ No newline at end of file diff --git a/packages/artplayer-plugin-danmu/src/danmuku.js b/packages/artplayer-plugin-danmu/src/danmuku.js index b8ae63dd6..c7f6f9943 100644 --- a/packages/artplayer-plugin-danmu/src/danmuku.js +++ b/packages/artplayer-plugin-danmu/src/danmuku.js @@ -1,10 +1,10 @@ export default class Danmuku { - constructor(art, option) { + constructor(art, option = {}) { this.art = art; this.option = {}; this.config(option); this.current = []; - this.layer = null; + this.layer = {}; this.isStop = false; this.init(); } @@ -12,7 +12,7 @@ export default class Danmuku { static get option() { return { danmu: [], - speed: 3, + speed: 5, opacity: 1, color: '#fff', size: 14, @@ -53,15 +53,37 @@ export default class Danmuku { overflow: 'hidden', }, }); + + this.art.on('video:timeupdate', this.update.bind(this)); + this.art.on('video:play', this.start.bind(this)); + this.art.on('video:pause', this.stop.bind(this)); + this.art.on('video:ended', this.stop.bind(this)); + this.art.on('destroy', this.stop.bind(this)); } emit(danmu) { - const { errorHandle, setStyles, append } = this.art.constructor.utils; - errorHandle(danmu.text, 'Danmu text cannot be empty'); - errorHandle(danmu.time, 'Danmu time cannot be empty'); - const $danmu = document.createElement('div'); - $danmu.innerText = danmu.text; - setStyles($danmu, { + const { errorHandle } = this.art.constructor.utils; + errorHandle(danmu.text.trim(), 'Danmu text cannot be empty'); + const { clientWidth: playerWidth, clientHeight: playerHeight } = this.art.template.$player; + const danmuItem = this.getDanmuItem(); + danmuItem.$ref.innerText = danmu.text; + danmuItem.$ref.style.fontSize = danmu.size || this.option.size; + const { clientWidth: danmuWidth, clientHeight: danmuHeight } = danmuItem.$ref; + danmuItem.$ref.style.opacity = danmu.opacity || this.option.opacity; + danmuItem.$ref.style.color = danmu.color || this.option.color; + danmuItem.$ref.style.top = this.getDanmuTop(playerHeight, danmuHeight); + danmuItem.$ref.style.left = `${playerWidth}px`; + danmuItem.$ref.style.transform = `translateX(${-playerWidth - danmuWidth}px) translateY(0px) translateZ(0px)`; + danmuItem.$ref.style.transition = `-webkit-transform ${danmu.speed || this.option.speed}s linear 0s`; + this.art.emit('artplayerPluginDanmu:emit', danmu); + } + + getDanmuItem() { + const { setStyles, append } = this.art.constructor.utils; + const inactiveItem = this.current.find(item => item.state === 'inactive'); + if (inactiveItem) return inactiveItem; + const $ref = document.createElement('div'); + setStyles($ref, { userSelect: 'none', position: 'absolute', whiteSpace: 'pre', @@ -69,21 +91,26 @@ export default class Danmuku { perspective: '500px', display: 'inline-block', willChange: 'transform', - fontSize: `${danmu.size || 14}px`, - color: danmu.color || '#fff', fontFamily: 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif', fontWeight: 'normal', lineHeight: '1.125', - opacity: '1', 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', - left: '638px', - top: '0px', - transform: 'translateX(-626.14px) translateY(0px) translateZ(0px)', - transition: '-webkit-transform 0s linear 0s', }); - this.current.push(append(this.layer.$ref, $danmu)); - this.art.emit('artplayerPluginDanmu:emit', danmu); + return { + state: 'active', + $ref: append(this.layer.$ref, $ref), + }; + } + + getDanmuTop(playerHeight, danmuHeight) { + return 0; + } + + update() { + if (!this.isStop && this.option.danmu.length) { + // 播放速度 + } } config(option) { diff --git a/packages/artplayer-plugin-danmu/src/index.js b/packages/artplayer-plugin-danmu/src/index.js index b083e74fd..70ec76968 100644 --- a/packages/artplayer-plugin-danmu/src/index.js +++ b/packages/artplayer-plugin-danmu/src/index.js @@ -6,12 +6,12 @@ function artplayerPluginDanmu(option) { const danmuku = new Danmuku(art, option); return { name: 'artplayerPluginDanmu', - emit: danmuku.emit, - start: danmuku.start, - stop: danmuku.stop, - hide: danmuku.hide, - show: danmuku.show, - config: danmuku.config, + emit: danmuku.emit.bind(danmuku), + start: danmuku.start.bind(danmuku), + stop: danmuku.stop.bind(danmuku), + hide: danmuku.hide.bind(danmuku), + show: danmuku.show.bind(danmuku), + config: danmuku.config.bind(danmuku), }; }; }