From d735bb4de77eff91725e410229e9bee7384eab6a Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Thu, 25 Apr 2019 18:02:10 +0800 Subject: [PATCH] update artplayer-plugin-danmu --- docs/uncompiled/artplayer-plugin-danmu.js | 106 ++++++++++++------ docs/uncompiled/artplayer-plugin-danmu.js.map | 2 +- .../artplayer-plugin-danmu/src/danmuku.js | 94 +++++++++++----- packages/artplayer-plugin-danmu/src/index.js | 1 - 4 files changed, 137 insertions(+), 66 deletions(-) diff --git a/docs/uncompiled/artplayer-plugin-danmu.js b/docs/uncompiled/artplayer-plugin-danmu.js index ebbc8d878..4e1798cf8 100644 --- a/docs/uncompiled/artplayer-plugin-danmu.js +++ b/docs/uncompiled/artplayer-plugin-danmu.js @@ -39,11 +39,14 @@ classCallCheck(this, Danmuku); this.art = art; - this.option = {}; - this.config(option); + this.queue = {}; + this.option = Object.assign({}, Danmuku.option, option); + art.constructor.validator(this.option, Danmuku.scheme); + this.option.danmus.forEach(this.emit); this.current = []; this.layer = {}; this.isStop = false; + this.timer = null; this.init(); } @@ -64,7 +67,7 @@ overflow: 'hidden' } }); - this.art.on('video:timeupdate', this.update.bind(this)); + this.update(); 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)); @@ -72,25 +75,33 @@ } }, { key: "emit", - value: function emit(danmu) { + value: function emit() { + var danmu = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 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); + errorHandle(danmu.text, 'Danmu text cannot be empty'); + errorHandle(danmu.time, 'Danmu time cannot be empty'); + + if (this.queue[danmu.time]) { + this.queue[danmu.time].push(danmu); + } else { + this.queue[danmu.time] = [danmu]; + } // this.art.emit('artplayerPluginDanmu:emit', danmu); + // if (!this.isStop) { + // 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); + // } + } }, { key: "getDanmuItem", @@ -101,7 +112,14 @@ var inactiveItem = this.current.find(function (item) { return item.state === 'inactive'; }); - if (inactiveItem) return inactiveItem; + + if (inactiveItem) { + inactiveItem.time = Date.now(); + inactiveItem.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)'; + inactiveItem.$ref.style.transition = '-webkit-transform 0s linear 0s'; + return inactiveItem; + } + var $ref = document.createElement('div'); setStyles($ref, { userSelect: 'none', @@ -116,10 +134,11 @@ 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 { + return this.current.push({ state: 'active', + time: Date.now(), $ref: append(this.layer.$ref, $ref) - }; + }); } }, { key: "getDanmuTop", @@ -129,18 +148,36 @@ }, { 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); + var _this = this; + + var _this$art = this.art, + $player = _this$art.template.$player, + player = _this$art.player; + this.timer = window.requestAnimationFrame(function () { + _this.current.forEach(function (item) { + if (Date.now() - item.time >= _this.option.speed) { + item.state = 'inactive'; + } + }); + + Object.keys(_this.queue).filter(function (time) { + return player.currentTime + 0.5 >= time && time >= player.currentTime - 0.5; + }).reduce(function (result, key) { + return result.concat(_this.queue[key]); + }, []).forEach(function (item) { + console.log(item); + }); + + if (!_this.isStop && player.playing) { + _this.update(); + } + }); } }, { key: "stop", value: function stop() { this.isStop = true; + window.cancelAnimationFrame(this.timer); this.art.emit('artplayerPluginDanmu:stop'); } }, { @@ -165,7 +202,7 @@ key: "option", get: function get() { return { - danmu: [], + danmus: [], speed: 5, opacity: 1, color: '#fff', @@ -176,7 +213,7 @@ key: "scheme", get: function get() { return { - danmu: { + danmus: { type: 'array', child: { text: 'string', @@ -279,8 +316,7 @@ 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) + show: danmuku.show.bind(danmuku) }; }; } diff --git a/docs/uncompiled/artplayer-plugin-danmu.js.map b/docs/uncompiled/artplayer-plugin-danmu.js.map index ebd355c6d..3c124d398 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":["../../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 +{"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.queue = {};\n this.option = Object.assign({}, Danmuku.option, option);\n art.constructor.validator(this.option, Danmuku.scheme);\n this.option.danmus.forEach(this.emit);\n this.current = [];\n this.layer = {};\n this.isStop = false;\n this.timer = null;\n this.init();\n }\n\n static get option() {\n return {\n danmus: [],\n speed: 5,\n opacity: 1,\n color: '#fff',\n size: 14,\n };\n }\n\n static get scheme() {\n return {\n danmus: {\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.update();\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, 'Danmu text cannot be empty');\n errorHandle(danmu.time, 'Danmu time cannot be empty');\n if (this.queue[danmu.time]) {\n this.queue[danmu.time].push(danmu);\n } else {\n this.queue[danmu.time] = [danmu];\n }\n // this.art.emit('artplayerPluginDanmu:emit', danmu);\n // if (!this.isStop) {\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 -\n // 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\n getDanmuItem() {\n const { setStyles, append } = this.art.constructor.utils;\n const inactiveItem = this.current.find(item => item.state === 'inactive');\n if (inactiveItem) {\n inactiveItem.time = Date.now();\n inactiveItem.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';\n inactiveItem.$ref.style.transition = '-webkit-transform 0s linear 0s';\n return inactiveItem;\n }\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\n return this.current.push({\n state: 'active',\n time: Date.now(),\n $ref: append(this.layer.$ref, $ref),\n });\n }\n\n getDanmuTop(playerHeight, danmuHeight) {\n return 0;\n }\n\n update() {\n const {\n template: { $player },\n player,\n } = this.art;\n this.timer = window.requestAnimationFrame(() => {\n this.current.forEach(item => {\n if (Date.now() - item.time >= this.option.speed) {\n item.state = 'inactive';\n }\n });\n\n Object.keys(this.queue).filter(time => {\n return player.currentTime + 0.5 >= time && time >= player.currentTime - 0.5;\n }).reduce((result, key) => {\n return result.concat(this.queue[key]);\n }, []).forEach(item => {\n console.log(item);\n });\n\n if (!this.isStop && player.playing) {\n this.update();\n }\n });\n }\n\n stop() {\n this.isStop = true;\n window.cancelAnimationFrame(this.timer);\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 };\n };\n}\n\nartplayerPluginDanmu.bilibiliDanmuParse = bilibiliDanmuParse;\nwindow.artplayerPluginDanmu = artplayerPluginDanmu;\nexport default artplayerPluginDanmu;\n"],"names":["Danmuku","art","option","queue","Object","assign","constructor","validator","scheme","danmus","forEach","emit","current","layer","isStop","timer","init","layers","add","name","style","position","left","top","right","bottom","width","height","overflow","update","on","start","bind","stop","danmu","errorHandle","utils","text","time","push","setStyles","append","inactiveItem","find","item","state","Date","now","$ref","transform","transition","document","createElement","userSelect","whiteSpace","pointerEvents","perspective","display","willChange","fontFamily","fontWeight","lineHeight","textShadow","playerHeight","danmuHeight","$player","template","player","window","requestAnimationFrame","speed","keys","filter","currentTime","reduce","result","key","concat","console","log","playing","cancelAnimationFrame","opacity","color","size","type","child","mode","bilibiliDanmuParse","xmlString","regSrt","listReg","RegExp","itemReg","srtList","match","length","map","attrStr","attr","split","trim","Number","toString","timestamp","pool","userID","rowID","artplayerPluginDanmu","danmuku","hide","show"],"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 c7f6f9943..358d6836d 100644 --- a/packages/artplayer-plugin-danmu/src/danmuku.js +++ b/packages/artplayer-plugin-danmu/src/danmuku.js @@ -1,17 +1,20 @@ export default class Danmuku { constructor(art, option = {}) { this.art = art; - this.option = {}; - this.config(option); + this.queue = {}; + this.option = Object.assign({}, Danmuku.option, option); + art.constructor.validator(this.option, Danmuku.scheme); + this.option.danmus.forEach(this.emit); this.current = []; this.layer = {}; this.isStop = false; + this.timer = null; this.init(); } static get option() { return { - danmu: [], + danmus: [], speed: 5, opacity: 1, color: '#fff', @@ -21,7 +24,7 @@ export default class Danmuku { static get scheme() { return { - danmu: { + danmus: { type: 'array', child: { text: 'string', @@ -54,34 +57,49 @@ export default class Danmuku { }, }); - this.art.on('video:timeupdate', this.update.bind(this)); + this.update(); 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) { + emit(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); + errorHandle(danmu.text, 'Danmu text cannot be empty'); + errorHandle(danmu.time, 'Danmu time cannot be empty'); + if (this.queue[danmu.time]) { + this.queue[danmu.time].push(danmu); + } else { + this.queue[danmu.time] = [danmu]; + } + // this.art.emit('artplayerPluginDanmu:emit', danmu); + // if (!this.isStop) { + // 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; + if (inactiveItem) { + inactiveItem.time = Date.now(); + inactiveItem.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)'; + inactiveItem.$ref.style.transition = '-webkit-transform 0s linear 0s'; + return inactiveItem; + } const $ref = document.createElement('div'); setStyles($ref, { userSelect: 'none', @@ -97,10 +115,12 @@ export default class Danmuku { 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 { + + return this.current.push({ state: 'active', + time: Date.now(), $ref: append(this.layer.$ref, $ref), - }; + }); } getDanmuTop(playerHeight, danmuHeight) { @@ -108,18 +128,34 @@ export default class Danmuku { } update() { - if (!this.isStop && this.option.danmu.length) { - // 播放速度 - } - } + const { + template: { $player }, + player, + } = this.art; + this.timer = window.requestAnimationFrame(() => { + this.current.forEach(item => { + if (Date.now() - item.time >= this.option.speed) { + item.state = 'inactive'; + } + }); - config(option) { - this.option = Object.assign({}, Danmuku.option, option); - this.art.constructor.validator(this.option, Danmuku.scheme); + Object.keys(this.queue).filter(time => { + return player.currentTime + 0.5 >= time && time >= player.currentTime - 0.5; + }).reduce((result, key) => { + return result.concat(this.queue[key]); + }, []).forEach(item => { + console.log(item); + }); + + if (!this.isStop && player.playing) { + this.update(); + } + }); } stop() { this.isStop = true; + window.cancelAnimationFrame(this.timer); this.art.emit('artplayerPluginDanmu:stop'); } diff --git a/packages/artplayer-plugin-danmu/src/index.js b/packages/artplayer-plugin-danmu/src/index.js index 70ec76968..6b171b482 100644 --- a/packages/artplayer-plugin-danmu/src/index.js +++ b/packages/artplayer-plugin-danmu/src/index.js @@ -11,7 +11,6 @@ function artplayerPluginDanmu(option) { stop: danmuku.stop.bind(danmuku), hide: danmuku.hide.bind(danmuku), show: danmuku.show.bind(danmuku), - config: danmuku.config.bind(danmuku), }; }; }