mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-09 20:26:16 -08:00
724 lines
23 KiB
JavaScript
724 lines
23 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.artplayerPluginDanmuku = factory());
|
|
}(this, function () { 'use strict';
|
|
|
|
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");
|
|
}
|
|
}
|
|
|
|
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 i18n = {
|
|
'zh-cn': {
|
|
'Danmu opacity': '弹幕透明度',
|
|
'Danmu speed': '弹幕速度',
|
|
'Danmu size': '弹幕大小',
|
|
'Danmu text cannot be empty': '弹幕文本不能为空',
|
|
'The length of the danmu does not exceed': '弹幕文本字数不能超过',
|
|
'Danmu speed synchronous playback multiple': '弹幕速度同步播放倍数'
|
|
},
|
|
'zh-tw': {
|
|
'Danmu opacity': '彈幕透明度',
|
|
'Danmu speed': '彈幕速度',
|
|
'Danmu size': '弹幕大小',
|
|
'Danmu text cannot be empty': '彈幕文本不能為空',
|
|
'The length of the danmu does not exceed': '彈幕文本字數不能超過',
|
|
'Danmu speed synchronous playback multiple': '彈幕速度同步播放倍數'
|
|
}
|
|
};
|
|
|
|
function opacity(art) {
|
|
var i18n = art.i18n,
|
|
proxy = art.events.proxy;
|
|
return {
|
|
name: 'danmuku-opacity',
|
|
index: 10,
|
|
html: "\n <div class=\"art-setting-header\">\n ".concat(i18n.get('Danmu opacity'), ": <span class=\"art-value\">100</span>%\n </div>\n <div class=\"art-setting-range\">\n <input type=\"range\" value=\"1\" min=\"0.1\" max=\"1\" step=\"0.1\">\n </div>\n "),
|
|
mounted: function mounted($setting) {
|
|
var $range = $setting.querySelector('input[type=range]');
|
|
var $value = $setting.querySelector('.art-value');
|
|
proxy($range, 'change', function () {
|
|
var value = $range.value;
|
|
$value.innerText = Number(value) * 100;
|
|
art.plugins.artplayerPluginDanmuku.config({
|
|
opacity: Number(value)
|
|
});
|
|
});
|
|
art.on('artplayerPluginDanmuku:config', function (config) {
|
|
if ($range.value !== config.opacity) {
|
|
$range.value = config.opacity;
|
|
$value.innerText = config.opacity * 100;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}
|
|
function size(art) {
|
|
var i18n = art.i18n,
|
|
proxy = art.events.proxy;
|
|
return {
|
|
name: 'danmuku-size',
|
|
index: 11,
|
|
html: "\n <div class=\"art-setting-header\">\n ".concat(i18n.get('Danmu size'), ": <span class=\"art-value\">25</span>px\n </div>\n <div class=\"art-setting-range\">\n <input type=\"range\" value=\"25\" min=\"14\" max=\"30\" step=\"1\">\n </div>\n "),
|
|
mounted: function mounted($setting) {
|
|
var $range = $setting.querySelector('input[type=range]');
|
|
var $value = $setting.querySelector('.art-value');
|
|
proxy($range, 'change', function () {
|
|
var value = $range.value;
|
|
$value.innerText = value;
|
|
art.plugins.artplayerPluginDanmuku.config({
|
|
fontSize: Number(value)
|
|
});
|
|
});
|
|
art.on('artplayerPluginDanmuku:config', function (config) {
|
|
if ($range.value !== config.fontSize) {
|
|
$range.value = config.fontSize;
|
|
$value.innerText = config.fontSize;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}
|
|
function speed(art) {
|
|
var i18n = art.i18n,
|
|
proxy = art.events.proxy;
|
|
return {
|
|
name: 'danmuku-speed',
|
|
index: 12,
|
|
html: "\n <div class=\"art-setting-header\">\n ".concat(i18n.get('Danmu speed'), ": <span class=\"art-value\">5</span>s\n </div>\n <div class=\"art-setting-range\">\n <input type=\"range\" value=\"5\" min=\"1\" max=\"10\" step=\"1\">\n </div>\n "),
|
|
mounted: function mounted($setting) {
|
|
var $range = $setting.querySelector('input[type=range]');
|
|
var $value = $setting.querySelector('.art-value');
|
|
proxy($range, 'change', function () {
|
|
var value = $range.value;
|
|
$value.innerText = value;
|
|
art.plugins.artplayerPluginDanmuku.config({
|
|
speed: Number(value)
|
|
});
|
|
});
|
|
art.on('artplayerPluginDanmuku:config', function (config) {
|
|
if ($range.value !== config.speed) {
|
|
$range.value = config.speed;
|
|
$value.innerText = config.speed;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}
|
|
function synchronousPlayback(art) {
|
|
var i18n = art.i18n,
|
|
proxy = art.events.proxy;
|
|
return {
|
|
name: 'danmuku-synchronousPlayback',
|
|
index: 13,
|
|
html: "\n <label class=\"art-setting-checkbox\">\n <input type=\"checkbox\"/>".concat(i18n.get('Danmu speed synchronous playback multiple'), "\n </label>\n "),
|
|
mounted: function mounted($setting) {
|
|
var $checkbox = $setting.querySelector('input[type=checkbox]');
|
|
proxy($checkbox, 'change', function () {
|
|
art.plugins.artplayerPluginDanmuku.config({
|
|
synchronousPlayback: $checkbox.checked
|
|
});
|
|
});
|
|
art.on('artplayerPluginDanmuku:config', function (config) {
|
|
if ($checkbox.checked !== config.synchronousPlayback) {
|
|
$checkbox.checked = config.synchronousPlayback;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}
|
|
|
|
function filter(queue, state, callback) {
|
|
return queue.filter(function (danmu) {
|
|
return danmu.$state === state;
|
|
}).map(callback);
|
|
}
|
|
function getRect(ref, key) {
|
|
var result = ref.getBoundingClientRect();
|
|
return key ? result[key] : result;
|
|
}
|
|
function getDanmuRef(queue) {
|
|
var result = queue.find(function (danmu) {
|
|
return danmu.$ref && danmu.$state === 'wait';
|
|
});
|
|
|
|
if (result) {
|
|
var _$ref = result.$ref;
|
|
result.$ref = null;
|
|
return _$ref;
|
|
}
|
|
|
|
var $ref = document.createElement('div');
|
|
$ref.style.cssText = "\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-family: SimHei, \"Microsoft JhengHei\", Arial, Helvetica, sans-serif;\n font-weight: normal;\n line-height: 1.125;\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 ";
|
|
return $ref;
|
|
}
|
|
|
|
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 getMode(key) {
|
|
switch (key) {
|
|
case 1:
|
|
case 2:
|
|
case 3:
|
|
return 'scroll';
|
|
|
|
case 4:
|
|
case 5:
|
|
return 'static';
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
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: getMode(Number(attr[1])),
|
|
fontSize: 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 bilibiliDanmuParseFromUrl(url) {
|
|
return fetch(url).then(function (res) {
|
|
return res.text();
|
|
}).then(function (xmlString) {
|
|
return bilibiliDanmuParseFromXml(xmlString);
|
|
});
|
|
}
|
|
|
|
function calculatedTop(danmus) {
|
|
var top = 0;
|
|
var topMap = {};
|
|
|
|
for (var index = 0; index < danmus.length; index += 1) {
|
|
var item = danmus[index];
|
|
|
|
if (topMap[item.top]) {
|
|
topMap[item.top].push(item);
|
|
} else {
|
|
topMap[item.top] = [item];
|
|
}
|
|
}
|
|
|
|
var topMapKeys = Object.keys(topMap);
|
|
var maxDiff = 0;
|
|
|
|
for (var _index = 1; _index < danmus.length; _index += 1) {
|
|
var _item = danmus[_index];
|
|
var prev = danmus[_index - 1];
|
|
var prevTop = prev.top + prev.height;
|
|
var diff = _item.top - prevTop;
|
|
|
|
if (diff > maxDiff) {
|
|
top = prevTop;
|
|
maxDiff = diff;
|
|
}
|
|
}
|
|
|
|
if (top === 0) {
|
|
var maxRight = 0;
|
|
|
|
for (var _index2 = 0; _index2 < topMapKeys.length; _index2 += 1) {
|
|
var minRight = danmus[0].width;
|
|
var topKey = topMapKeys[_index2];
|
|
var danmuArr = topMap[topKey];
|
|
|
|
for (var _index3 = 0; _index3 < danmuArr.length; _index3 += 1) {
|
|
var danmu = danmuArr[_index3];
|
|
|
|
if (danmu.right < minRight) {
|
|
minRight = danmu.right;
|
|
}
|
|
}
|
|
|
|
if (minRight > maxRight) {
|
|
maxRight = minRight;
|
|
|
|
var _danmuArr = slicedToArray(danmuArr, 1);
|
|
|
|
top = _danmuArr[0].top;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (top === 0) {
|
|
var _topMapKeys$filter$so = topMapKeys.filter(function (item, index) {
|
|
return index !== 0 && index !== topMapKeys.length - 1;
|
|
}).sort(function (prev, next) {
|
|
return topMap[prev].length - topMap[next].length;
|
|
});
|
|
|
|
var _topMapKeys$filter$so2 = slicedToArray(_topMapKeys$filter$so, 1);
|
|
|
|
top = _topMapKeys$filter$so2[0];
|
|
}
|
|
|
|
return top;
|
|
}
|
|
|
|
function getDanmuTop(ins, danmu) {
|
|
var _ins$option$margin = slicedToArray(ins.option.margin, 2),
|
|
marginTop = _ins$option$margin[0],
|
|
marginBottom = _ins$option$margin[1];
|
|
|
|
var playerData = getRect(ins.art.template.$player);
|
|
var danmus = ins.queue.filter(function (item) {
|
|
return item.mode === danmu.mode && item.$state === 'emit' && item.$ref && item.$ref.style.fontSize === danmu.$ref.style.fontSize && parseFloat(item.$ref.style.top) <= playerData.height - marginBottom;
|
|
}).map(function (item) {
|
|
var danmuData = getRect(item.$ref);
|
|
var width = danmuData.width,
|
|
height = danmuData.height;
|
|
var top = danmuData.top - playerData.top;
|
|
var left = danmuData.left - playerData.left;
|
|
var right = playerData.width - left - width;
|
|
return {
|
|
top: top,
|
|
left: left,
|
|
height: height,
|
|
width: width,
|
|
right: right
|
|
};
|
|
}).sort(function (prev, next) {
|
|
return prev.top - next.top;
|
|
});
|
|
|
|
if (danmus.length === 0) {
|
|
return marginTop;
|
|
}
|
|
|
|
danmus.unshift({
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: marginTop,
|
|
width: playerData.width
|
|
});
|
|
danmus.push({
|
|
top: playerData.height - marginBottom,
|
|
left: 0,
|
|
right: 0,
|
|
height: marginBottom,
|
|
width: playerData.width
|
|
});
|
|
return calculatedTop(danmus);
|
|
}
|
|
|
|
var Danmuku =
|
|
/*#__PURE__*/
|
|
function () {
|
|
function Danmuku(art, option) {
|
|
var _this = this;
|
|
|
|
classCallCheck(this, Danmuku);
|
|
|
|
art.i18n.update(i18n);
|
|
art.setting.add(opacity);
|
|
art.setting.add(size);
|
|
art.setting.add(speed);
|
|
art.setting.add(synchronousPlayback);
|
|
this.art = art;
|
|
this.queue = [];
|
|
this.option = {};
|
|
this.config(option);
|
|
this.isStop = false;
|
|
this.animationFrameTimer = null;
|
|
this.$danmuku = art.template.$danmuku;
|
|
art.on('video:play', this.start.bind(this));
|
|
art.on('video:playing', this.start.bind(this));
|
|
art.on('video:pause', this.stop.bind(this));
|
|
art.on('video:waiting', this.stop.bind(this));
|
|
art.on('resize', this.resize.bind(this));
|
|
art.on('destroy', this.stop.bind(this));
|
|
|
|
if (typeof this.option.danmuku === 'function') {
|
|
this.option.danmuku().then(function (danmus) {
|
|
danmus.forEach(_this.emit.bind(_this));
|
|
art.emit('artplayerPluginDanmuku:loaded');
|
|
});
|
|
} else if (typeof this.option.danmuku === 'string') {
|
|
bilibiliDanmuParseFromUrl(this.option.danmuku).then(function (danmus) {
|
|
danmus.forEach(_this.emit.bind(_this));
|
|
art.emit('artplayerPluginDanmuku:loaded');
|
|
});
|
|
} else {
|
|
this.option.danmuku.forEach(this.emit.bind(this));
|
|
art.emit('artplayerPluginDanmuku:loaded');
|
|
}
|
|
}
|
|
|
|
createClass(Danmuku, [{
|
|
key: "config",
|
|
value: function config(option) {
|
|
var _this$art$constructor = this.art.constructor,
|
|
clamp = _this$art$constructor.utils.clamp,
|
|
validator = _this$art$constructor.validator;
|
|
this.option = Object.assign({}, Danmuku.option, this.option, option);
|
|
validator(this.option, Danmuku.scheme);
|
|
this.option.speed = clamp(this.option.speed, 1, 10);
|
|
this.option.maxlength = clamp(this.option.maxlength, 10, 100);
|
|
this.option.margin[0] = clamp(this.option.margin[0], 0, 100);
|
|
this.option.margin[1] = clamp(this.option.margin[1], 0, 100);
|
|
this.option.opacity = clamp(this.option.opacity, 0, 1);
|
|
this.option.fontSize = clamp(this.option.fontSize, 12, 30);
|
|
this.art.emit('artplayerPluginDanmuku:config', this.option);
|
|
}
|
|
}, {
|
|
key: "continue",
|
|
value: function _continue() {
|
|
filter(this.queue, 'stop', function (danmu) {
|
|
danmu.$state = 'emit';
|
|
danmu.$lastStartTime = Date.now();
|
|
|
|
switch (danmu.mode) {
|
|
case 'scroll':
|
|
danmu.$ref.style.transform = "translateX(".concat(-danmu.$restWidth, "px) translateY(0px) translateZ(0px)");
|
|
danmu.$ref.style.transition = "transform ".concat(danmu.$restTime, "s linear 0s");
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "suspend",
|
|
value: function suspend() {
|
|
var $player = this.art.template.$player;
|
|
filter(this.queue, 'emit', function (danmu) {
|
|
danmu.$state = 'stop';
|
|
|
|
switch (danmu.mode) {
|
|
case 'scroll':
|
|
{
|
|
var _getRect = getRect($player),
|
|
playerLeft = _getRect.left,
|
|
playerWidth = _getRect.width;
|
|
|
|
var _getRect2 = getRect(danmu.$ref),
|
|
danmuLeft = _getRect2.left;
|
|
|
|
var translateX = playerWidth - (danmuLeft - playerLeft) + 5;
|
|
danmu.$ref.style.transform = "translateX(".concat(-translateX, "px) translateY(0px) translateZ(0px)");
|
|
danmu.$ref.style.transition = 'transform 0s linear 0s';
|
|
break;
|
|
}
|
|
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "resize",
|
|
value: function resize() {
|
|
var $player = this.art.template.$player;
|
|
var danmuLeft = getRect($player, 'width');
|
|
filter(this.queue, 'wait', function (danmu) {
|
|
if (danmu.$ref) {
|
|
danmu.$ref.style.border = 'none';
|
|
danmu.$ref.style.left = "".concat(danmuLeft, "px");
|
|
danmu.$ref.style.marginLeft = '0px';
|
|
danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
|
|
danmu.$ref.style.transition = 'transform 0s linear 0s';
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "update",
|
|
value: function update() {
|
|
var _this2 = this;
|
|
|
|
var _this$art = this.art,
|
|
player = _this$art.player,
|
|
$player = _this$art.template.$player;
|
|
this.animationFrameTimer = window.requestAnimationFrame(function () {
|
|
if (player.playing) {
|
|
var danmuLeft = getRect($player, 'width');
|
|
filter(_this2.queue, 'emit', function (danmu) {
|
|
danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
|
|
danmu.$lastStartTime = Date.now();
|
|
|
|
if (danmu.$restTime <= 0) {
|
|
danmu.$state = 'wait';
|
|
danmu.$ref.style.border = 'none';
|
|
danmu.$ref.style.left = "".concat(danmuLeft, "px");
|
|
danmu.$ref.style.marginLeft = '0px';
|
|
danmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
|
|
danmu.$ref.style.transition = 'transform 0s linear 0s';
|
|
}
|
|
});
|
|
|
|
_this2.queue.filter(function (danmu) {
|
|
return player.currentTime + 0.1 >= danmu.time && danmu.time >= player.currentTime - 0.1 && danmu.$state === 'wait';
|
|
}).forEach(function (danmu) {
|
|
danmu.$ref = getDanmuRef(_this2.queue);
|
|
|
|
_this2.$danmuku.appendChild(danmu.$ref);
|
|
|
|
danmu.$ref.style.opacity = _this2.option.opacity;
|
|
danmu.$ref.style.fontSize = "".concat(_this2.option.fontSize, "px");
|
|
danmu.$ref.innerText = danmu.text;
|
|
danmu.$ref.style.color = danmu.color;
|
|
danmu.$ref.style.border = danmu.border ? "1px solid ".concat(danmu.color) : 'none';
|
|
danmu.$restTime = _this2.option.synchronousPlayback && player.playbackRate ? _this2.option.speed / Number(player.playbackRate) : _this2.option.speed;
|
|
danmu.$lastStartTime = Date.now();
|
|
var danmuWidth = getRect(danmu.$ref, 'width');
|
|
var danmuTop = getDanmuTop(_this2, danmu);
|
|
danmu.$state = 'emit';
|
|
|
|
switch (danmu.mode) {
|
|
case 'scroll':
|
|
{
|
|
danmu.$restWidth = danmuLeft + danmuWidth + 5;
|
|
danmu.$ref.style.left = "".concat(danmuLeft, "px");
|
|
danmu.$ref.style.top = "".concat(danmuTop, "px");
|
|
danmu.$ref.style.transform = "translateX(".concat(-danmu.$restWidth, "px) translateY(0px) translateZ(0px)");
|
|
danmu.$ref.style.transition = "transform ".concat(danmu.$restTime, "s linear 0s");
|
|
break;
|
|
}
|
|
|
|
case 'static':
|
|
danmu.$ref.style.top = "".concat(danmuTop, "px");
|
|
danmu.$ref.style.left = '50%';
|
|
danmu.$ref.style.marginLeft = "-".concat(danmuWidth / 2, "px");
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!_this2.isStop) {
|
|
_this2.update();
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "stop",
|
|
value: function stop() {
|
|
this.isStop = true;
|
|
this.suspend();
|
|
window.cancelAnimationFrame(this.animationFrameTimer);
|
|
this.art.emit('artplayerPluginDanmuku:stop');
|
|
}
|
|
}, {
|
|
key: "start",
|
|
value: function start() {
|
|
this.isStop = false;
|
|
this.continue();
|
|
this.update();
|
|
this.art.emit('artplayerPluginDanmuku:start');
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show() {
|
|
this.$danmuku.style = 'block';
|
|
this.art.emit('artplayerPluginDanmuku:show');
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide() {
|
|
this.$danmuku.style = 'none';
|
|
this.art.emit('artplayerPluginDanmuku:hide');
|
|
}
|
|
}, {
|
|
key: "emit",
|
|
value: function emit(danmu) {
|
|
var _this$art2 = this.art,
|
|
notice = _this$art2.notice,
|
|
player = _this$art2.player,
|
|
i18n = _this$art2.i18n;
|
|
|
|
if (!danmu.text.trim()) {
|
|
notice.show(i18n.get('Danmu text cannot be empty'));
|
|
return;
|
|
}
|
|
|
|
if (danmu.text.length > this.option.maxlength) {
|
|
notice.show("".concat(i18n.get('The length of the danmu does not exceed'), " ").concat(this.option.maxlength));
|
|
return;
|
|
}
|
|
|
|
if (typeof danmu.time !== 'number') {
|
|
danmu.time = player.currentTime;
|
|
}
|
|
|
|
this.queue.push(objectSpread({
|
|
mode: 'scroll'
|
|
}, danmu, {
|
|
$state: 'wait',
|
|
$ref: null,
|
|
$restTime: 0,
|
|
$lastStartTime: 0,
|
|
$restWidth: 0
|
|
}));
|
|
}
|
|
}], [{
|
|
key: "option",
|
|
get: function get() {
|
|
return {
|
|
danmuku: [],
|
|
speed: 5,
|
|
maxlength: 50,
|
|
margin: [10, 100],
|
|
opacity: 1,
|
|
fontSize: 25,
|
|
synchronousPlayback: false
|
|
};
|
|
}
|
|
}, {
|
|
key: "scheme",
|
|
get: function get() {
|
|
return {
|
|
danmuku: 'array|function|string',
|
|
speed: 'number',
|
|
maxlength: 'number',
|
|
margin: 'array',
|
|
opacity: 'number',
|
|
fontSize: 'number',
|
|
synchronousPlayback: 'boolean'
|
|
};
|
|
}
|
|
}]);
|
|
|
|
return Danmuku;
|
|
}();
|
|
|
|
function artplayerPluginDanmuku(option) {
|
|
return function (art) {
|
|
var danmuku = new Danmuku(art, option);
|
|
return {
|
|
name: 'artplayerPluginDanmuku',
|
|
emit: danmuku.emit.bind(danmuku),
|
|
config: danmuku.config.bind(danmuku),
|
|
hide: danmuku.hide.bind(danmuku),
|
|
show: danmuku.show.bind(danmuku)
|
|
};
|
|
};
|
|
}
|
|
|
|
return artplayerPluginDanmuku;
|
|
|
|
}));
|
|
//# sourceMappingURL=artplayer-plugin-danmuku.js.map
|