mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-12 15:26:16 -08:00
347 lines
11 KiB
JavaScript
347 lines
11 KiB
JavaScript
(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());
|
|
}(this, function () { 'use strict';
|
|
|
|
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 bilibiliDanmuParseFromXml(xmlString) {
|
|
if (typeof xmlString !== 'string') return [];
|
|
var srtList = xmlString.match(/<d([\S ]*?>[\S ]*?)<\/d>/gi);
|
|
return srtList.length ? srtList.map(function (item) {
|
|
var _item$match = item.match(/<d p="(.+)">(.+)<\/d>/),
|
|
_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: attr[6],
|
|
rowID: Number(attr[7])
|
|
} : null;
|
|
}) : [];
|
|
}
|
|
function bilibiliDanmuParseFromAv(av) {
|
|
var corsUrl = 'https://cors-anywhere.herokuapp.com/';
|
|
return fetch("".concat(corsUrl, "https://api.bilibili.com/x/web-interface/view?aid=").concat(av)).then(function (res) {
|
|
return res.json();
|
|
}).then(function (res) {
|
|
if (res.code === 0 && res.data && res.data.cid) {
|
|
return fetch("".concat(corsUrl, "https://api.bilibili.com/x/v1/dm/list.so?oid=").concat(res.data.cid)).then(function (res) {
|
|
return res.text();
|
|
}).then(function (xmlString) {
|
|
return bilibiliDanmuParseFromXml(xmlString);
|
|
});
|
|
}
|
|
|
|
throw new Error("Unable to get data: ".concat(JSON.stringify(res)));
|
|
});
|
|
}
|
|
|
|
function _classCallCheck(instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
}
|
|
|
|
var classCallCheck = _classCallCheck;
|
|
|
|
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 _this = this;
|
|
|
|
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
|
|
classCallCheck(this, Danmuku);
|
|
|
|
this.art = art;
|
|
this.queue = {};
|
|
this.current = [];
|
|
this.layer = {};
|
|
this.isStop = false;
|
|
this.timer = null;
|
|
this.option = Object.assign({}, Danmuku.option, option);
|
|
art.constructor.validator(this.option, Danmuku.scheme);
|
|
|
|
if (typeof this.option.danmus === 'function') {
|
|
this.option.danmus().then(function (danmus) {
|
|
danmus.forEach(_this.emit);
|
|
|
|
_this.init();
|
|
});
|
|
} else {
|
|
this.option.danmus.forEach(this.emit);
|
|
this.init();
|
|
}
|
|
}
|
|
|
|
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.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] : {};
|
|
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);
|
|
// }
|
|
|
|
}
|
|
}, {
|
|
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) {
|
|
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',
|
|
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 this.current.push({
|
|
state: 'active',
|
|
time: Date.now(),
|
|
$ref: append(this.layer.$ref, $ref)
|
|
});
|
|
}
|
|
}, {
|
|
key: "getDanmuTop",
|
|
value: function getDanmuTop(playerHeight, danmuHeight) {
|
|
return 0;
|
|
}
|
|
}, {
|
|
key: "update",
|
|
value: function update() {
|
|
var _this2 = this;
|
|
|
|
var _this$art = this.art,
|
|
$player = _this$art.template.$player,
|
|
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';
|
|
}
|
|
});
|
|
|
|
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) {
|
|
_this2.update();
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "stop",
|
|
value: function stop() {
|
|
this.isStop = true;
|
|
window.cancelAnimationFrame(this.timer);
|
|
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 {
|
|
danmus: [],
|
|
speed: 5,
|
|
opacity: 1,
|
|
color: '#fff',
|
|
size: 14
|
|
};
|
|
}
|
|
}, {
|
|
key: "scheme",
|
|
get: function get() {
|
|
return {
|
|
danmus: 'array|function',
|
|
speed: 'number',
|
|
opacity: 'number',
|
|
color: 'string',
|
|
size: 'number'
|
|
};
|
|
}
|
|
}]);
|
|
|
|
return Danmuku;
|
|
}();
|
|
|
|
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)
|
|
};
|
|
};
|
|
}
|
|
|
|
artplayerPluginDanmu.bilibiliDanmuParseFromXml = bilibiliDanmuParseFromXml;
|
|
artplayerPluginDanmu.bilibiliDanmuParseFromAv = bilibiliDanmuParseFromAv;
|
|
window.artplayerPluginDanmu = artplayerPluginDanmu;
|
|
|
|
return artplayerPluginDanmu;
|
|
|
|
}));
|
|
//# sourceMappingURL=artplayer-plugin-danmu.js.map
|