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

update artplayer-plugin-danmu

Browse Source
This commit is contained in:
Harvey Zack committed 2019-04-25 18:02:10 +08:00
1 parent 8aac0ba52f
commit d735bb4de7
4 files changed
+137 -66
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-danmu.js
+71 -35
View File
@@ -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)
};
};
}
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/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, Line truncated
{"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 Line truncated
packages/artplayer-plugin-danmu/src/danmuku.js
+65 -29
View File
@@ -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');
}
packages/artplayer-plugin-danmu/src/index.js
-1
View File
@@ -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),
};
};
}