x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-13 15:56:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

弹幕基本成型

Browse Source
This commit is contained in:
Harvey Zack committed 2019-04-26 17:17:57 +08:00
1 parent 9d730146c0
commit 495ff8625e
5 files changed
+229 -140
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/assets/example/danmu.js
+2
View File
@@ -4,10 +4,12 @@ var art = new Artplayer({
url: url + '/video/you-name.mp4',
autoSize: true,
plugins: [artplayerPluginDanmu({
// 弹幕样本：https://www.bilibili.com/video/av7185185
danmus: () => artplayerPluginDanmu.bilibiliDanmuParseFromAv(7185185),
speed: 5,
opacity: 1,
color: '#fff',
size: 14,
maxlength: 50,
})],
});
docs/uncompiled/artplayer-plugin-danmu.js
+131 -72
View File
@@ -90,6 +90,44 @@
});
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
var defineProperty = _defineProperty;
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
defineProperty(target, key, source[key]);
});
}
return target;
}
var objectSpread = _objectSpread;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
@@ -127,22 +165,26 @@
classCallCheck(this, Danmuku);
this.art = art;
this.queue = {};
this.current = [];
this.layer = {};
this.queue = [];
this.layer = null;
this.isStop = false;
this.timer = null;
this.option = Object.assign({}, Danmuku.option, option);
art.constructor.validator(this.option, Danmuku.scheme);
art.on('video:play', this.start.bind(this));
art.on('video:pause', this.stop.bind(this));
art.on('video:ended', this.stop.bind(this));
art.on('destroy', this.stop.bind(this));
if (typeof this.option.danmus === 'function') {
this.option.danmus().then(function (danmus) {
danmus.forEach(_this.emit);
art.emit('artplayerPluginDanmu:loaded', danmus);
danmus.forEach(_this.addToQueue.bind(_this));
_this.init();
});
} else {
this.option.danmus.forEach(this.emit);
this.option.danmus.forEach(this.addToQueue);
this.init();
}
}
@@ -150,8 +192,7 @@
createClass(Danmuku, [{
key: "init",
value: function init() {
var layers = this.art.layers;
this.layer = layers.add({
this.layer = this.art.layers.add({
name: 'danmu',
style: {
position: 'absolute',
@@ -161,60 +202,70 @@
bottom: 0,
width: '100%',
height: '100%',
overflow: 'hidden'
overflow: 'hidden',
pointerEvents: 'none'
}
});
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));
}
}, {
key: "emit",
value: function emit() {
var danmu = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
value: function emit(danmu) {
var errorHandle = this.art.constructor.utils.errorHandle;
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);
// }
errorHandle(this.layer, 'The danmuku is not ready');
var _this$art$template$$p = this.art.template.$player,
playerWidth = _this$art$template$$p.clientWidth,
playerHeight = _this$art$template$$p.clientHeight;
danmu.$ref.innerText = danmu.text;
danmu.$ref.style.fontSize = "".concat(danmu.size || this.option.size, "px");
var _danmu$$ref = danmu.$ref,
danmuWidth = _danmu$$ref.clientWidth,
danmuHeight = _danmu$$ref.clientHeight;
danmu.$ref.style.opacity = danmu.opacity || this.option.opacity;
danmu.$ref.style.color = danmu.color || this.option.color;
danmu.$ref.style.top = this.getDanmuTop(playerHeight, danmuHeight);
danmu.$ref.style.left = "".concat(playerWidth, "px");
var translateX = -playerWidth - danmuWidth - 10;
danmu.$ref.style.transform = "translateX(".concat(translateX, "px) translateY(0px) translateZ(0px)");
danmu.$ref.style.transition = "-webkit-transform ".concat(danmu.speed || this.option.speed, "s linear 0s");
}
}, {
key: "getDanmuItem",
value: function getDanmuItem() {
key: "addToQueue",
value: function addToQueue(danmu) {
var errorHandle = this.art.constructor.utils.errorHandle;
errorHandle(danmu.text, 'Danmu text cannot be empty');
errorHandle(typeof danmu.time === 'number', 'Danmu time cannot be empty');
errorHandle(danmu.text.length <= this.option.maxlength, "The length of the danmu does not exceed ".concat(this.option.maxlength));
this.queue.push(objectSpread({}, danmu, {
$state: 'wait',
$ref: null,
$emitTime: 0
}));
}
}, {
key: "getDanmuRef",
value: function getDanmuRef() {
var $player = this.art.template.$player;
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';
var playerLeft = $player.getBoundingClientRect().left;
var waitDanmu = this.queue.find(function (danmu) {
if (danmu.$ref) {
var _danmu$$ref$getBoundi = danmu.$ref.getBoundingClientRect(),
left = _danmu$$ref$getBoundi.left,
width = _danmu$$ref$getBoundi.width;
return playerLeft >= left + width;
}
return false;
});
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;
if (waitDanmu) {
waitDanmu.$state = 'wait';
waitDanmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
waitDanmu.$ref.style.transition = '-webkit-transform 0s linear 0s';
return waitDanmu.$ref;
}
var $ref = document.createElement('div');
@@ -231,41 +282,43 @@
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 this.current.push({
state: 'active',
time: Date.now(),
$ref: append(this.layer.$ref, $ref)
});
append(this.layer.$ref, $ref);
return $ref;
}
}, {
key: "getDanmuTop",
value: function getDanmuTop(playerHeight, danmuHeight) {
return 0;
}
}, {
key: "changeState",
value: function changeState(before, after) {
return this.queue.filter(function (danmu) {
return danmu.$state === before;
}).map(function (danmu) {
danmu.$state = after;
return danmu;
});
}
}, {
key: "update",
value: function update() {
var _this2 = this;
var _this$art = this.art,
$player = _this$art.template.$player,
player = _this$art.player;
var player = this.art.player;
this.timer = window.requestAnimationFrame(function () {
_this2.current.forEach(function (item) {
if (Date.now() - item.time >= _this2.option.speed) {
item.state = 'inactive';
}
_this2.queue.filter(function (danmu) {
return player.currentTime + 0.25 >= danmu.time && danmu.time >= player.currentTime - 0.25 && danmu.$state === 'wait';
}).map(function (danmu) {
danmu.$emitTime = Date.now();
danmu.$ref = _this2.getDanmuRef();
danmu.$state = 'emit';
return danmu;
}).forEach(function (danmu) {
_this2.emit(danmu);
});
Object.keys(_this2.queue).filter(function (time) {
return player.currentTime + 0.5 >= time && time >= player.currentTime - 0.5;
}).reduce(function (result, key) {
return result.concat(_this2.queue[key]);
}, []).forEach(function (item) {
console.log(item);
});
if (!_this2.isStop && player.playing) {
if (!_this2.isStop) {
_this2.update();
}
});
@@ -274,6 +327,8 @@
key: "stop",
value: function stop() {
this.isStop = true;
this.changeState('emit', 'stop');
this.changeState('continue', 'stop');
window.cancelAnimationFrame(this.timer);
this.art.emit('artplayerPluginDanmu:stop');
}
@@ -281,6 +336,8 @@
key: "start",
value: function start() {
this.isStop = false;
this.changeState('stop', 'continue');
this.update();
this.art.emit('artplayerPluginDanmu:start');
}
}, {
@@ -303,7 +360,8 @@
speed: 5,
opacity: 1,
color: '#fff',
size: 14
size: 14,
maxlength: 50
};
}
}, {
@@ -314,7 +372,8 @@
speed: 'number',
opacity: 'number',
color: 'string',
size: 'number'
size: 'number',
maxlength: 'number'
};
}
}]);
@@ -327,7 +386,7 @@
var danmuku = new Danmuku(art, option);
return {
name: 'artplayerPluginDanmu',
emit: danmuku.emit.bind(danmuku),
emit: danmuku.addToQueue.bind(danmuku),
start: danmuku.start.bind(danmuku),
stop: danmuku.stop.bind(danmuku),
hide: danmuku.hide.bind(danmuku),
docs/uncompiled/artplayer-plugin-danmu.js.map
+1 -1
View File
@@ -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/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.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 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 fetch(`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`)\n .then(res => res.text())\n .then(xmlString => {\n return bilibiliDanmuParseFromXml(xmlString);\n });\n }\n throw new Error(`Unable to get data: ${JSON.stringify(res)}`);\n });\n}","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.current = [];\n this.layer = {};\n this.isStop = false;\n this.timer = null;\n this.option = Object.assign({}, Danmuku.option, option);\n art.constructor.validator(this.option, Danmuku.scheme);\n if (typeof this.option.danmus === 'function') {\n this.option.danmus().then(danmus => {\n danmus.forEach(this.emit);\n this.init();\n });\n } else {\n this.option.danmus.forEach(this.emit);\n this.init();\n }\n }\n\n static get option() {\n return {\n danmus: [],\n sLine 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/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 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 fetch(`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`)\n .then(res => res.text())\n .then(xmlString => {\n return bilibiliDanmuParseFromXml(xmlString);\n });\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 descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.definePrLine truncated
packages/artplayer-plugin-danmu/src/danmuku.js
+94 -66
View File
@@ -1,20 +1,24 @@
export default class Danmuku {
constructor(art, option = {}) {
this.art = art;
this.queue = {};
this.current = [];
this.layer = {};
this.queue = [];
this.layer = null;
this.isStop = false;
this.timer = null;
this.option = Object.assign({}, Danmuku.option, option);
art.constructor.validator(this.option, Danmuku.scheme);
art.on('video:play', this.start.bind(this));
art.on('video:pause', this.stop.bind(this));
art.on('video:ended', this.stop.bind(this));
art.on('destroy', this.stop.bind(this));
if (typeof this.option.danmus === 'function') {
this.option.danmus().then(danmus => {
danmus.forEach(this.emit);
art.emit('artplayerPluginDanmu:loaded', danmus);
danmus.forEach(this.addToQueue.bind(this));
this.init();
});
} else {
this.option.danmus.forEach(this.emit);
this.option.danmus.forEach(this.addToQueue);
this.init();
}
}
@@ -26,6 +30,7 @@ export default class Danmuku {
opacity: 1,
color: '#fff',
size: 14,
maxlength: 50,
};
}
@@ -36,12 +41,12 @@ export default class Danmuku {
opacity: 'number',
color: 'string',
size: 'number',
maxlength: 'number',
};
}
init() {
const { layers } = this.art;
this.layer = layers.add({
this.layer = this.art.layers.add({
name: 'danmu',
style: {
position: 'absolute',
@@ -52,53 +57,65 @@ export default class Danmuku {
width: '100%',
height: '100%',
overflow: 'hidden',
pointerEvents: 'none',
},
});
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(this.layer, 'The danmuku is not ready');
const { clientWidth: playerWidth, clientHeight: playerHeight } = this.art.template.$player;
danmu.$ref.innerText = danmu.text;
danmu.$ref.style.fontSize = `${danmu.size || this.option.size}px`;
const { clientWidth: danmuWidth, clientHeight: danmuHeight } = danmu.$ref;
danmu.$ref.style.opacity = danmu.opacity || this.option.opacity;
danmu.$ref.style.color = danmu.color || this.option.color;
danmu.$ref.style.top = this.getDanmuTop(playerHeight, danmuHeight);
danmu.$ref.style.left = `${playerWidth}px`;
const translateX = -playerWidth - danmuWidth - 10;
danmu.$ref.style.transform = `translateX(${translateX}px) translateY(0px) translateZ(0px)`;
danmu.$ref.style.transition = `-webkit-transform ${danmu.speed || this.option.speed}s linear 0s`;
}
addToQueue(danmu) {
const { errorHandle } = this.art.constructor.utils;
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);
// }
errorHandle(typeof danmu.time === 'number', 'Danmu time cannot be empty');
errorHandle(
danmu.text.length <= this.option.maxlength,
`The length of the danmu does not exceed ${this.option.maxlength}`,
);
this.queue.push({
...danmu,
$state: 'wait',
$ref: null,
$emitTime: 0,
});
}
getDanmuItem() {
getDanmuRef() {
const { $player } = this.art.template;
const { setStyles, append } = this.art.constructor.utils;
const inactiveItem = this.current.find(item => item.state === 'inactive');
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 playerLeft = $player.getBoundingClientRect().left;
const waitDanmu = this.queue.find(danmu => {
if (danmu.$ref) {
const { left, width } = danmu.$ref.getBoundingClientRect();
return playerLeft >= left + width;
}
return false;
});
if (waitDanmu) {
waitDanmu.$state = 'wait';
waitDanmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
waitDanmu.$ref.style.transition = '-webkit-transform 0s linear 0s';
return waitDanmu.$ref;
}
const $ref = document.createElement('div');
setStyles($ref, {
userSelect: 'none',
position: 'absolute',
@@ -114,38 +131,45 @@ export default class Danmuku {
'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 this.current.push({
state: 'active',
time: Date.now(),
$ref: append(this.layer.$ref, $ref),
});
append(this.layer.$ref, $ref);
return $ref;
}
getDanmuTop(playerHeight, danmuHeight) {
return 0;
}
changeState(before, after) {
return this.queue
.filter(danmu => danmu.$state === before)
.map(danmu => {
danmu.$state = after;
return danmu;
});
}
update() {
const {
template: { $player },
player,
} = this.art;
const { player } = this.art;
this.timer = window.requestAnimationFrame(() => {
this.current.forEach(item => {
if (Date.now() - item.time >= this.option.speed) {
item.state = 'inactive';
}
});
this.queue
.filter(danmu => {
return (
player.currentTime + 0.25 >= danmu.time &&
danmu.time >= player.currentTime - 0.25 &&
danmu.$state === 'wait'
);
})
.map(danmu => {
danmu.$emitTime = Date.now();
danmu.$ref = this.getDanmuRef();
danmu.$state = 'emit';
return danmu;
})
.forEach(danmu => {
this.emit(danmu);
});
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) {
if (!this.isStop) {
this.update();
}
});
@@ -153,12 +177,16 @@ export default class Danmuku {
stop() {
this.isStop = true;
this.changeState('emit', 'stop');
this.changeState('continue', 'stop');
window.cancelAnimationFrame(this.timer);
this.art.emit('artplayerPluginDanmu:stop');
}
start() {
this.isStop = false;
this.changeState('stop', 'continue');
this.update();
this.art.emit('artplayerPluginDanmu:start');
}
packages/artplayer-plugin-danmu/src/index.js
+1 -1
View File
@@ -6,7 +6,7 @@ function artplayerPluginDanmu(option) {
const danmuku = new Danmuku(art, option);
return {
name: 'artplayerPluginDanmu',
emit: danmuku.emit.bind(danmuku),
emit: danmuku.addToQueue.bind(danmuku),
start: danmuku.start.bind(danmuku),
stop: danmuku.stop.bind(danmuku),
hide: danmuku.hide.bind(danmuku),