mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
调整整体样式
This commit is contained in:
Harvey Zack committed
1 parent
487e865017
commit
fa585e536a
49 files changed
+984
-322
No files matched your search
@@ -31,12 +31,12 @@
|
||||
|
||||
| Project | Description | Demo |
|
||||
| --------------------------------------------------------------------------------------------------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu) | Danmu plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmu.js&example=danmu) |
|
||||
| [artplayer-plugin-danmuku](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmuku) | Danmuku plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku) |
|
||||
| [artplayer-plugin-gif](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-gif) | Gif plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-gif.js&example=gif) |
|
||||
| [artplayer-plugin-backlight](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-backlight) | Backlight plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight) |
|
||||
| [artplayer-plugin-playlist](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-playlist) | Playlist plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist) |
|
||||
| [artplayer-tool-thumbnail](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-thumbnail) | Thumbnail tool for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail) |
|
||||
| [artplayer-tool-github](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-github) | Github api tool for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmu.js&example=github) |
|
||||
| [artplayer-tool-github](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-github) | Github api tool for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=github) |
|
||||
| [artplayer-react](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-react) | React Component for Artplayer | [demo](https://codesandbox.io/s/n74859y9rl) |
|
||||
| [artplayer-vue](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vue) | Vue Component for Artplayer | [demo](https://codesandbox.io/s/6z76lm109n) |
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@ var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/you-name.mp4',
|
||||
autoSize: true,
|
||||
plugins: [artplayerPluginDanmu({
|
||||
danmus: url + '/danmuku/you-name.xml',
|
||||
plugins: [artplayerPluginDanmuku({
|
||||
danmuku: url + '/danmuku/you-name.xml',
|
||||
speed: 5,
|
||||
opacity: 1,
|
||||
color: '#fff',
|
||||
@@ -15,6 +15,6 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
console.info('弹幕加载中...');
|
||||
art.on('artplayerPluginDanmu:loaded', () => {
|
||||
art.on('artplayerPluginDanmuku:loaded', () => {
|
||||
console.info('弹幕准备就绪');
|
||||
});
|
||||
+2
-2
@@ -28,13 +28,13 @@
|
||||
<li class="title">Plugins</li>
|
||||
<li><a href="./?libs=.%2Funcompiled%2Fartplayer-plugin-gif.js&example=gif">artplayer-plugin-gif</a></li>
|
||||
<li><a href="./?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight">artplayer-plugin-backlight</a></li>
|
||||
<li><a href="./?libs=.%2Funcompiled%2Fartplayer-plugin-danmu.js&example=danmu">artplayer-plugin-danmu</a></li>
|
||||
<li><a href="./?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku">artplayer-plugin-danmuku</a></li>
|
||||
<li><a href="./?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist">artplayer-plugin-playlist</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="title">Tools</li>
|
||||
<li><a href="./?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail">artplayer-tool-thumbnail</a></li>
|
||||
<li><a href="./?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmu.js&example=github">artplayer-tool-github</a></li>
|
||||
<li><a href="./?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=github">artplayer-tool-github</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="title">Component</li>
|
||||
|
||||
@@ -243,10 +243,10 @@
|
||||
|
||||
this.art = art;
|
||||
this.queue = [];
|
||||
this.layer = null;
|
||||
this.isStop = false;
|
||||
this.refs = [];
|
||||
this.animationFrameTimer = null;
|
||||
this.$danmuku = art.template.$danmuku;
|
||||
art.i18n.update(Danmuku.i18n);
|
||||
art.on('video:play', this.start.bind(this));
|
||||
art.on('video:playing', this.start.bind(this));
|
||||
@@ -256,21 +256,19 @@
|
||||
art.on('destroy', this.stop.bind(this));
|
||||
this.config(option);
|
||||
|
||||
if (typeof this.option.danmus === 'function') {
|
||||
this.option.danmus().then(function (danmus) {
|
||||
if (typeof this.option.danmuku === 'function') {
|
||||
this.option.danmuku().then(function (danmus) {
|
||||
danmus.forEach(_this.addToQueue.bind(_this));
|
||||
|
||||
_this.init();
|
||||
art.emit('artplayerPluginDanmu:loaded');
|
||||
});
|
||||
} else if (typeof this.option.danmus === 'string') {
|
||||
bilibiliDanmuParseFromUrl(this.option.danmus).then(function (danmus) {
|
||||
} else if (typeof this.option.danmuku === 'string') {
|
||||
bilibiliDanmuParseFromUrl(this.option.danmuku).then(function (danmus) {
|
||||
danmus.forEach(_this.addToQueue.bind(_this));
|
||||
|
||||
_this.init();
|
||||
art.emit('artplayerPluginDanmu:loaded');
|
||||
});
|
||||
} else {
|
||||
this.option.danmus.forEach(this.addToQueue.bind(this));
|
||||
this.init();
|
||||
this.option.danmuku.forEach(this.addToQueue.bind(this));
|
||||
art.emit('artplayerPluginDanmu:loaded');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -289,26 +287,6 @@
|
||||
this.option.margin[0] = clamp(this.option.margin[0], 0, 100);
|
||||
this.option.margin[1] = clamp(this.option.margin[1], 0, 100);
|
||||
}
|
||||
}, {
|
||||
key: "init",
|
||||
value: function init() {
|
||||
this.art.emit('artplayerPluginDanmu:loaded');
|
||||
this.layer = this.art.layers.add({
|
||||
name: 'danmu',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
pointerEvents: 'none',
|
||||
opacity: this.option.opacity
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "emit",
|
||||
value: function emit(danmu) {
|
||||
@@ -423,7 +401,7 @@
|
||||
waitDanmu.$ref.style.border = 'none';
|
||||
waitDanmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
|
||||
waitDanmu.$ref.style.transition = 'transform 0s linear 0s';
|
||||
this.layer.$ref.appendChild(waitDanmu.$ref);
|
||||
this.$danmuku.appendChild(waitDanmu.$ref);
|
||||
return waitDanmu.$ref;
|
||||
}
|
||||
|
||||
@@ -441,7 +419,7 @@
|
||||
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'
|
||||
});
|
||||
append(this.layer.$ref, $ref);
|
||||
append(this.$danmuku, $ref);
|
||||
this.refs.push($ref);
|
||||
return $ref;
|
||||
}
|
||||
@@ -507,7 +485,7 @@
|
||||
|
||||
var player = this.art.player;
|
||||
this.animationFrameTimer = window.requestAnimationFrame(function () {
|
||||
if (_this2.layer && player.playing) {
|
||||
if (player.playing) {
|
||||
_this2.queue.filter(function (danmu) {
|
||||
return player.currentTime + 0.1 >= danmu.time && danmu.time >= player.currentTime - 0.1 && danmu.$state === 'wait';
|
||||
}).forEach(function (danmu) {
|
||||
@@ -549,13 +527,13 @@
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
this.layer.$ref.style = 'none';
|
||||
this.$danmuku.style = 'none';
|
||||
this.art.emit('artplayerPluginDanmu:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
this.layer.$ref.style = 'block';
|
||||
this.$danmuku.style = 'block';
|
||||
this.art.emit('artplayerPluginDanmu:hide');
|
||||
}
|
||||
}], [{
|
||||
@@ -590,7 +568,7 @@
|
||||
key: "option",
|
||||
get: function get() {
|
||||
return {
|
||||
danmus: [],
|
||||
danmuku: [],
|
||||
speed: 5,
|
||||
opacity: 1,
|
||||
color: '#fff',
|
||||
@@ -603,7 +581,7 @@
|
||||
key: "scheme",
|
||||
get: function get() {
|
||||
return {
|
||||
danmus: 'array|function|string',
|
||||
danmuku: 'array|function|string',
|
||||
speed: 'number',
|
||||
opacity: 'number',
|
||||
color: 'string',
|
||||
|
||||
@@ -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/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/getDanmuTop.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 bilibiliDanmuParseFromUrl(url) {\n return fetch(url)\n .then(res => res.text())\n .then(xmlString => {\n return bilibiliDanmuParseFromXml(xmlString);\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 bilibiliDanmuParseFromUrl(`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`);\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 descLine 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/getDanmuTop.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 bilibiliDanmuParseFromUrl(url) {\n return fetch(url)\n .then(res => res.text())\n .then(xmlString => {\n return bilibiliDanmuParseFromXml(xmlString);\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 bilibiliDanmuParseFromUrl(`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`);\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 descLine truncated
|
||||
@@ -0,0 +1,621 @@
|
||||
(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-danmuku'] = 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 bilibiliDanmuParseFromUrl(url) {
|
||||
return fetch(url).then(function (res) {
|
||||
return res.text();
|
||||
}).then(function (xmlString) {
|
||||
return bilibiliDanmuParseFromXml(xmlString);
|
||||
});
|
||||
}
|
||||
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 bilibiliDanmuParseFromUrl("".concat(corsUrl, "https://api.bilibili.com/x/v1/dm/list.so?oid=").concat(res.data.cid));
|
||||
}
|
||||
|
||||
throw new Error("Unable to get data: ".concat(JSON.stringify(res)));
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
function getDanmuTopByDiff(danmus) {
|
||||
var top = 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
return top;
|
||||
}
|
||||
|
||||
function getDanmuTopBySparse(danmus) {
|
||||
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 maxRight = 0;
|
||||
var top = 0;
|
||||
var topMapKeys = Object.keys(topMap);
|
||||
|
||||
for (var _index = 0; _index < topMapKeys.length; _index += 1) {
|
||||
var minRight = danmus[0].width;
|
||||
var topKey = topMapKeys[_index];
|
||||
var danmuArr = topMap[topKey];
|
||||
|
||||
for (var _index2 = 0; _index2 < danmuArr.length; _index2 += 1) {
|
||||
var danmu = danmuArr[_index2];
|
||||
|
||||
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 randomKey = Math.floor(Math.random() * (2 - topMapKeys.length) + topMapKeys.length - 1);
|
||||
top = topMapKeys[randomKey];
|
||||
}
|
||||
|
||||
return top;
|
||||
}
|
||||
|
||||
function getDanmuTop(danmus) {
|
||||
var top = getDanmuTopByDiff(danmus);
|
||||
|
||||
if (top === 0) {
|
||||
top = getDanmuTopBySparse(danmus);
|
||||
}
|
||||
|
||||
return top;
|
||||
}
|
||||
|
||||
var Danmuku =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Danmuku(art, option) {
|
||||
var _this = this;
|
||||
|
||||
classCallCheck(this, Danmuku);
|
||||
|
||||
this.art = art;
|
||||
this.queue = [];
|
||||
this.isStop = false;
|
||||
this.refs = [];
|
||||
this.animationFrameTimer = null;
|
||||
this.$danmuku = art.template.$danmuku;
|
||||
art.i18n.update(Danmuku.i18n);
|
||||
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));
|
||||
this.config(option);
|
||||
|
||||
if (typeof this.option.danmuku === 'function') {
|
||||
this.option.danmuku().then(function (danmus) {
|
||||
danmus.forEach(_this.addToQueue.bind(_this));
|
||||
art.emit('artplayerPluginDanmuku:loaded');
|
||||
});
|
||||
} else if (typeof this.option.danmuku === 'string') {
|
||||
bilibiliDanmuParseFromUrl(this.option.danmuku).then(function (danmus) {
|
||||
danmus.forEach(_this.addToQueue.bind(_this));
|
||||
art.emit('artplayerPluginDanmuku:loaded');
|
||||
});
|
||||
} else {
|
||||
this.option.danmuku.forEach(this.addToQueue.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, option);
|
||||
validator(this.option, Danmuku.scheme);
|
||||
this.option.speed = clamp(this.option.speed, 1, 10);
|
||||
this.option.opacity = clamp(this.option.opacity, 0, 1);
|
||||
this.option.size = clamp(this.option.size, 12, 30);
|
||||
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);
|
||||
}
|
||||
}, {
|
||||
key: "emit",
|
||||
value: function emit(danmu) {
|
||||
var $player = this.art.template.$player;
|
||||
danmu.$ref = this.getDanmuRef();
|
||||
danmu.$ref.innerText = danmu.text;
|
||||
danmu.$ref.style.fontSize = "".concat(danmu.size || this.option.size, "px");
|
||||
var playerWidth = Danmuku.getRect($player, 'width');
|
||||
var danmuWidth = Danmuku.getRect(danmu.$ref, 'width');
|
||||
danmu.$restWidth = playerWidth + danmuWidth + 5;
|
||||
danmu.$restTime = this.option.speed;
|
||||
danmu.$lastStartTime = Date.now();
|
||||
danmu.$ref.style.color = danmu.color || this.option.color;
|
||||
danmu.$ref.style.left = "".concat(playerWidth, "px");
|
||||
danmu.$ref.style.top = "".concat(this.getDanmuTop(), "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");
|
||||
|
||||
if (danmu.border) {
|
||||
danmu.$ref.style.border = "1px solid ".concat(danmu.border);
|
||||
}
|
||||
|
||||
danmu.$state = 'emit';
|
||||
}
|
||||
}, {
|
||||
key: "resize",
|
||||
value: function resize() {
|
||||
var $player = this.art.template.$player;
|
||||
|
||||
var _Danmuku$getRect = Danmuku.getRect($player),
|
||||
playerWidth = _Danmuku$getRect.width;
|
||||
|
||||
this.queue.forEach(function (danmu) {
|
||||
danmu.$state = 'wait';
|
||||
});
|
||||
this.refs.forEach(function ($ref) {
|
||||
$ref.style.left = "".concat(playerWidth, "px");
|
||||
$ref.style.border = 'none';
|
||||
$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
|
||||
$ref.style.transition = 'transform 0s linear 0s';
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "suspend",
|
||||
value: function suspend(danmu) {
|
||||
var $player = this.art.template.$player;
|
||||
|
||||
var _Danmuku$getRect2 = Danmuku.getRect($player),
|
||||
playerLeft = _Danmuku$getRect2.left,
|
||||
playerWidth = _Danmuku$getRect2.width;
|
||||
|
||||
var _Danmuku$getRect3 = Danmuku.getRect(danmu.$ref),
|
||||
danmuLeft = _Danmuku$getRect3.left;
|
||||
|
||||
danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
|
||||
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';
|
||||
danmu.$state = 'stop';
|
||||
}
|
||||
}, {
|
||||
key: "addToQueue",
|
||||
value: function addToQueue(danmu) {
|
||||
var _this$art = this.art,
|
||||
notice = _this$art.notice,
|
||||
player = _this$art.player,
|
||||
i18n = _this$art.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({}, danmu, {
|
||||
$state: 'wait',
|
||||
$ref: null,
|
||||
$restTime: 0,
|
||||
$lastStartTime: 0
|
||||
}));
|
||||
}
|
||||
}, {
|
||||
key: "getDanmuRef",
|
||||
value: function getDanmuRef() {
|
||||
var $player = this.art.template.$player;
|
||||
var _this$art$constructor2 = this.art.constructor.utils,
|
||||
setStyles = _this$art$constructor2.setStyles,
|
||||
append = _this$art$constructor2.append;
|
||||
var playerLeft = Danmuku.getRect($player, 'left');
|
||||
var waitDanmu = this.queue.find(function (danmu) {
|
||||
if (danmu.$ref) {
|
||||
var _Danmuku$getRect4 = Danmuku.getRect(danmu.$ref),
|
||||
danmuLeft = _Danmuku$getRect4.left,
|
||||
danmuWidth = _Danmuku$getRect4.width;
|
||||
|
||||
return danmu.$state === 'emit' && playerLeft > danmuLeft + danmuWidth;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
if (waitDanmu) {
|
||||
waitDanmu.$state = 'wait';
|
||||
waitDanmu.$ref.style.border = 'none';
|
||||
waitDanmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
|
||||
waitDanmu.$ref.style.transition = 'transform 0s linear 0s';
|
||||
this.$danmuku.appendChild(waitDanmu.$ref);
|
||||
return waitDanmu.$ref;
|
||||
}
|
||||
|
||||
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'
|
||||
});
|
||||
append(this.$danmuku, $ref);
|
||||
this.refs.push($ref);
|
||||
return $ref;
|
||||
}
|
||||
}, {
|
||||
key: "getDanmuTop",
|
||||
value: function getDanmuTop$1() {
|
||||
var $player = this.art.template.$player;
|
||||
|
||||
var _Danmuku$getRect5 = Danmuku.getRect($player),
|
||||
playerLeft = _Danmuku$getRect5.left,
|
||||
playerTop = _Danmuku$getRect5.top,
|
||||
playerHeight = _Danmuku$getRect5.height,
|
||||
playerWidth = _Danmuku$getRect5.width;
|
||||
|
||||
var danmus = this.queue.filter(function (danmu) {
|
||||
return danmu.$state === 'emit';
|
||||
});
|
||||
|
||||
if (danmus.length === 0) {
|
||||
return this.option.margin[0];
|
||||
}
|
||||
|
||||
var danmusBySort = danmus.map(function (danmu) {
|
||||
var _Danmuku$getRect6 = Danmuku.getRect(danmu.$ref),
|
||||
danmuLeft = _Danmuku$getRect6.left,
|
||||
danmuTop = _Danmuku$getRect6.top,
|
||||
danmuWidth = _Danmuku$getRect6.width,
|
||||
danmuHeight = _Danmuku$getRect6.height;
|
||||
|
||||
var top = danmuTop - playerTop;
|
||||
var left = danmuLeft - playerLeft;
|
||||
var right = playerWidth - left - danmuWidth;
|
||||
return {
|
||||
top: top,
|
||||
left: left,
|
||||
right: right,
|
||||
height: danmuHeight,
|
||||
width: danmuWidth
|
||||
};
|
||||
}).sort(function (prev, next) {
|
||||
return prev.top - next.top;
|
||||
});
|
||||
danmusBySort.unshift({
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: this.option.margin[0],
|
||||
width: playerWidth
|
||||
});
|
||||
danmusBySort.push({
|
||||
top: playerHeight - this.option.margin[1],
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: this.option.margin[1],
|
||||
width: playerWidth
|
||||
});
|
||||
return getDanmuTop(danmusBySort);
|
||||
}
|
||||
}, {
|
||||
key: "update",
|
||||
value: function update() {
|
||||
var _this2 = this;
|
||||
|
||||
var player = this.art.player;
|
||||
this.animationFrameTimer = window.requestAnimationFrame(function () {
|
||||
if (player.playing) {
|
||||
_this2.queue.filter(function (danmu) {
|
||||
return player.currentTime + 0.1 >= danmu.time && danmu.time >= player.currentTime - 0.1 && danmu.$state === 'wait';
|
||||
}).forEach(function (danmu) {
|
||||
_this2.emit(danmu);
|
||||
});
|
||||
}
|
||||
|
||||
if (!_this2.isStop) {
|
||||
_this2.update();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "stop",
|
||||
value: function stop() {
|
||||
var _this3 = this;
|
||||
|
||||
this.isStop = true;
|
||||
this.queue.filter(function (danmu) {
|
||||
return danmu.$state === 'emit';
|
||||
}).forEach(function (danmu) {
|
||||
_this3.suspend(danmu);
|
||||
});
|
||||
window.cancelAnimationFrame(this.animationFrameTimer);
|
||||
this.art.emit('artplayerPluginDanmu:stop');
|
||||
}
|
||||
}, {
|
||||
key: "start",
|
||||
value: function start() {
|
||||
this.isStop = false;
|
||||
this.queue.filter(function (danmu) {
|
||||
return danmu.$state === 'stop';
|
||||
}).forEach(function (danmu) {
|
||||
Danmuku["continue"](danmu);
|
||||
});
|
||||
this.update();
|
||||
this.art.emit('artplayerPluginDanmu:start');
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
this.$danmuku.style = 'none';
|
||||
this.art.emit('artplayerPluginDanmu:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
this.$danmuku.style = 'block';
|
||||
this.art.emit('artplayerPluginDanmu:hide');
|
||||
}
|
||||
}], [{
|
||||
key: "getRect",
|
||||
value: function getRect(ref, key) {
|
||||
var result = ref.getBoundingClientRect();
|
||||
return key ? result[key] : result;
|
||||
}
|
||||
}, {
|
||||
key: "continue",
|
||||
value: function _continue(danmu) {
|
||||
danmu.$lastStartTime = Date.now();
|
||||
danmu.$ref.style.transform = "translateX(".concat(-danmu.$restWidth, "px) translateY(0px) translateZ(0px)");
|
||||
danmu.$ref.style.transition = "transform ".concat(danmu.$restTime, "s linear 0s");
|
||||
danmu.$state = 'emit';
|
||||
}
|
||||
}, {
|
||||
key: "i18n",
|
||||
get: function get() {
|
||||
return {
|
||||
'zh-cn': {
|
||||
'Danmu text cannot be empty': '弹幕文本不能为空',
|
||||
'The length of the danmu does not exceed': '弹幕文本字数不能超过'
|
||||
},
|
||||
'zh-tw': {
|
||||
'Danmu text cannot be empty': '彈幕文本不能為空',
|
||||
'The length of the danmu does not exceed': '彈幕文本字數不能超過'
|
||||
}
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: "option",
|
||||
get: function get() {
|
||||
return {
|
||||
danmuku: [],
|
||||
speed: 5,
|
||||
opacity: 1,
|
||||
color: '#fff',
|
||||
size: 25,
|
||||
maxlength: 50,
|
||||
margin: [10, 20]
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: "scheme",
|
||||
get: function get() {
|
||||
return {
|
||||
danmuku: 'array|function|string',
|
||||
speed: 'number',
|
||||
opacity: 'number',
|
||||
color: 'string',
|
||||
size: 'number',
|
||||
maxlength: 'number',
|
||||
margin: 'array'
|
||||
};
|
||||
}
|
||||
}]);
|
||||
|
||||
return Danmuku;
|
||||
}();
|
||||
|
||||
function artplayerPluginDanmuku(option) {
|
||||
return function (art) {
|
||||
var danmuku = new Danmuku(art, option);
|
||||
return {
|
||||
name: 'artplayerPluginDanmuku',
|
||||
emit: danmuku.addToQueue.bind(danmuku),
|
||||
config: danmuku.config.bind(danmuku),
|
||||
start: danmuku.start.bind(danmuku),
|
||||
stop: danmuku.stop.bind(danmuku),
|
||||
hide: danmuku.hide.bind(danmuku),
|
||||
show: danmuku.show.bind(danmuku)
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
artplayerPluginDanmuku.bilibiliDanmuParseFromXml = bilibiliDanmuParseFromXml;
|
||||
artplayerPluginDanmuku.bilibiliDanmuParseFromAv = bilibiliDanmuParseFromAv;
|
||||
artplayerPluginDanmuku.bilibiliDanmuParseFromUrl = bilibiliDanmuParseFromUrl;
|
||||
window.artplayerPluginDanmuku = artplayerPluginDanmuku;
|
||||
|
||||
return artplayerPluginDanmuku;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=artplayer-plugin-danmuku.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"artplayer-plugin-danmuku.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-danmuku/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-danmuku/src/getDanmuTop.js","../../packages/artplayer-plugin-danmuku/src/danmuku.js","../../packages/artplayer-plugin-danmuku/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 bilibiliDanmuParseFromUrl(url) {\n return fetch(url)\n .then(res => res.text())\n .then(xmlString => {\n return bilibiliDanmuParseFromXml(xmlString);\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 bilibiliDanmuParseFromUrl(`${corsUrl}https://api.bilibili.com/x/v1/dm/list.so?oid=${res.data.cid}`);\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;Line truncated
|
||||
@@ -1,18 +1,19 @@
|
||||
.artplayer-video-player{position:relative;z-index:10;width:100%;height:100%;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
|
||||
.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer}
|
||||
.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0}
|
||||
.artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
|
||||
.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.artplayer-video-player .artplayer-mask .art-playBig{position:absolute;right:30px;bottom:65px;opacity:.6}
|
||||
.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:60;left:0;top:0;right:0;bottom:0;width:100%;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none}
|
||||
.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700;white-space:nowrap}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:-webkit-box;display:-ms-flexbox;display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;min-width:36px;line-height:36px;text-align:center;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;-webkit-transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handlLine truncated
|
||||
.artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:70;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px}
|
||||
.artplayer-video-player .artplayer-contextmenu{display:none;position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none}
|
||||
.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:absolute;top:0;right:0;bottom:0;width:50%;height:100%;font-size:12px;background:rgba(0,0,0,.8);overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.85)}.artplayer-video-player .artplayer-setting .art-setting-btns{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
|
||||
.artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}
|
||||
.artplayer-video-player{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0 auto;z-index:10;width:100%;height:100%;outline:0;zoom:1;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.artplayer-video-player .art-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
|
||||
.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;cursor:pointer}
|
||||
.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.artplayer-video-player .artplayer-subtitle p{margin:5px 0}.artplayer-video-player.artplayer-subtitle-hide .artplayer-subtitle{display:none}
|
||||
.artplayer-video-player .artplayer-danmuku{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
|
||||
.artplayer-video-player .artplayer-layers{position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}.artplayer-video-player.artplayer-layers-hide .artplayer-layers{display:none}
|
||||
.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:50;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.artplayer-video-player .artplayer-mask .art-state{position:absolute;right:30px;bottom:65px;opacity:.6}.artplayer-video-player.artplayer-mask-show .artplayer-mask{display:-webkit-box;display:-ms-flexbox;display:flex}
|
||||
.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:70;left:0;top:0;right:0;bottom:0;width:100%;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none}.artplayer-video-player.artplayer-loading-show .artplayer-loading{display:-webkit-box;display:-ms-flexbox;display:flex}
|
||||
.artplayer-video-player .artplayer-bottom{position:absolute;z-index:60;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700;white-space:nowrap}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:-webkit-box;display:-ms-flexbox;display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;min-width:36px;line-height:36px;text-align:center;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;-webkit-transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handlLine truncated
|
||||
.artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:80;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px}.artplayer-video-player.artplayer-notice-show .artplayer-notice{display:-webkit-box;display:-ms-flexbox;display:flex}
|
||||
.artplayer-video-player .artplayer-contextmenu{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:120;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none}.artplayer-video-player.artplayer-contextmenu-show .artplayer-contextmenu{display:-webkit-box;display:-ms-flexbox;display:flex}
|
||||
.artplayer-video-player .artplayer-setting{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:90;left:0;top:0;height:100%;width:100%;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:absolute;top:0;right:-50%;bottom:0;width:50%;height:100%;font-size:12px;background:rgba(0,0,0,.8);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.85)}.artplayer-video-player .artplayer-setting .art-setting-btns{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}.artplayer-video-player.artplayer-setting-show .artplayer-setting{opacity:1;visibility:visible;pointer-events:all}.artplayer-video-player.artplayer-setting-show .artplayer-setting .artplayer-setting-inner{right:0}
|
||||
.artplayer-video-player .artplayer-info{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;left:10px;top:10px;z-index:100;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}.artplayer-video-player.artplayer-info-show .artplayer-info{display:-webkit-box;display:-ms-flexbox;display:flex}
|
||||
.artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
|
||||
.artplayer-video-player[data-aspect-ratio] video{-webkit-box-sizing:content-box;box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
|
||||
.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
|
||||
.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;opacity:0;visibility:hidden;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:-webkit-box;display:-ms-flexbox;display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}
|
||||
.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:110;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;opacity:0;visibility:hidden;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:-webkit-box;display:-ms-flexbox;display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}
|
||||
.artplayer-auto-size{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
|
||||
.artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
|
||||
button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;-webkit-transition:all .18s ease-out .18s;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{-webkit-transition:none;transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);tranLine truncated
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sources":["artplayer.scss","video.scss","subtitle.scss","layers.scss","mask.scss","loading.scss","bottom.scss","notice.scss","contextmenu.scss","setting.scss","info.scss","hideCursor.scss","aspectRatio.scss","fullscreenWeb.scss","pip.scss","autoSize.scss","flip.scss","balloon.min.css"],"names":[],"mappings":"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 truncated
|
||||
{"version":3,"sources":["artplayer.scss","video.scss","subtitle.scss","danmuku.scss","layers.scss","mask.scss","loading.scss","bottom.scss","notice.scss","contextmenu.scss","setting.scss","info.scss","hideCursor.scss","aspectRatio.scss","fullscreenWeb.scss","pip.scss","autoSize.scss","flip.scss","balloon.min.css"],"names":[],"mappings":"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 truncated
|
||||
@@ -731,10 +731,11 @@
|
||||
createClass(Template, [{
|
||||
key: "initDesktop",
|
||||
value: function initDesktop() {
|
||||
this.$container.innerHTML = "\n <div class=\"artplayer-video-player\">\n <video class=\"artplayer-video\"></video>\n <div class=\"artplayer-subtitle\"></div>\n <div class=\"artplayer-layers\"></div>\n <div class=\"artplayer-mask\"></div>\n <div class=\"artplayer-bottom\">\n <div class=\"artplayer-progress\"></div>\n <div class=\"artplayer-controls\">\n <div class=\"artplayer-controls-left\"></div>\n <div class=\"artplayer-controls-right\"></div>\n </div>\n </div>\n <div class=\"artplayer-loading\"></div>\n <div class=\"artplayer-notice\">\n <div class=\"artplayer-notice-inner\"></div>\n </div>\n <div class=\"artplayer-setting\">\n <div class=\"artplayer-setting-inner\">\n <div class=\"artplayer-setting-body\"></div>\n </div>\n </div>\n <div class=\"artplayer-info\">\n <div class=\"artplayer-info-panel\"></div>\n <div class=\"artplayer-info-close\">[x]</div>\n </div>\n <div class=\"artplayer-pip-header\">\n <div class=\"artplayer-pip-title\"></div>\n <div class=\"artplayer-pip-close\">\xD7</div>\n </div>\n <div class=\"artplayer-contextmenu\"></div>\n </div>\n ";
|
||||
this.$container.innerHTML = "\n <div class=\"artplayer-video-player\">\n <video class=\"artplayer-video\"></video>\n <div class=\"artplayer-subtitle\"></div>\n <div class=\"artplayer-danmuku\"></div>\n <div class=\"artplayer-layers\"></div>\n <div class=\"artplayer-mask\"></div>\n <div class=\"artplayer-bottom\">\n <div class=\"artplayer-progress\"></div>\n <div class=\"artplayer-controls\">\n <div class=\"artplayer-controls-left\"></div>\n <div class=\"artplayer-controls-right\"></div>\n </div>\n </div>\n <div class=\"artplayer-loading\"></div>\n <div class=\"artplayer-notice\">\n <div class=\"artplayer-notice-inner\"></div>\n </div>\n <div class=\"artplayer-setting\">\n <div class=\"artplayer-setting-inner\">\n <div class=\"artplayer-setting-body\"></div>\n </div>\n </div>\n <div class=\"artplayer-info\">\n <div class=\"artplayer-info-panel\"></div>\n <div class=\"artplayer-info-close\">[x]</div>\n </div>\n <div class=\"artplayer-pip-header\">\n <div class=\"artplayer-pip-title\"></div>\n <div class=\"artplayer-pip-close\">\xD7</div>\n </div>\n <div class=\"artplayer-contextmenu\"></div>\n </div>\n ";
|
||||
this.$player = this.$container.querySelector('.artplayer-video-player');
|
||||
this.$video = this.$container.querySelector('.artplayer-video');
|
||||
this.$subtitle = this.$container.querySelector('.artplayer-subtitle');
|
||||
this.$danmuku = this.$container.querySelector('.artplayer-danmuku');
|
||||
this.$bottom = this.$container.querySelector('.artplayer-bottom');
|
||||
this.$progress = this.$container.querySelector('.artplayer-progress');
|
||||
this.$controls = this.$container.querySelector('.artplayer-controls');
|
||||
@@ -4007,6 +4008,7 @@
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $player = this.art.template.$player;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-controls-show');
|
||||
this.art.emit('controls:show');
|
||||
}
|
||||
@@ -4014,6 +4016,7 @@
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $player = this.art.template.$player;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-controls-show');
|
||||
this.art.emit('controls:hide');
|
||||
}
|
||||
@@ -4215,19 +4218,21 @@
|
||||
setStyle($contextmenu, 'left', "".concat(menuLeft, "px"));
|
||||
setStyle($contextmenu, 'top', "".concat(menuTop, "px"));
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $contextmenu = this.art.template.$contextmenu;
|
||||
setStyle($contextmenu, 'display', 'none');
|
||||
this.art.emit('contextmenu:hide', $contextmenu);
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $contextmenu = this.art.template.$contextmenu;
|
||||
setStyle($contextmenu, 'display', 'block');
|
||||
this.art.emit('contextmenu:show', $contextmenu);
|
||||
var $player = this.art.template.$player;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-contextmenu-show');
|
||||
this.art.emit('contextmenu:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $player = this.art.template.$player;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-contextmenu-show');
|
||||
this.art.emit('contextmenu:hide');
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -4261,22 +4266,6 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var _this$art$template = this.art.template,
|
||||
$info = _this$art$template.$info,
|
||||
$infoPanel = _this$art$template.$infoPanel;
|
||||
setStyle($info, 'display', 'block');
|
||||
|
||||
if (!$infoPanel.innerHTML) {
|
||||
append($infoPanel, this.creatInfo());
|
||||
}
|
||||
|
||||
clearTimeout(this.timer);
|
||||
this.loop();
|
||||
this.art.emit('info:show', $info);
|
||||
}
|
||||
}, {
|
||||
key: "creatInfo",
|
||||
value: function creatInfo() {
|
||||
@@ -4292,9 +4281,9 @@
|
||||
}, {
|
||||
key: "readInfo",
|
||||
value: function readInfo() {
|
||||
var _this$art$template2 = this.art.template,
|
||||
$infoPanel = _this$art$template2.$infoPanel,
|
||||
$video = _this$art$template2.$video;
|
||||
var _this$art$template = this.art.template,
|
||||
$infoPanel = _this$art$template.$infoPanel,
|
||||
$video = _this$art$template.$video;
|
||||
var types = Array.from($infoPanel.querySelectorAll('[data-video]'));
|
||||
types.forEach(function (item) {
|
||||
var value = $video[item.dataset.video];
|
||||
@@ -4318,13 +4307,31 @@
|
||||
_this2.loop();
|
||||
}, 1000);
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var _this$art$template2 = this.art.template,
|
||||
$player = _this$art$template2.$player,
|
||||
$infoPanel = _this$art$template2.$infoPanel;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-info-show');
|
||||
|
||||
if (!$infoPanel.innerHTML) {
|
||||
append($infoPanel, this.creatInfo());
|
||||
}
|
||||
|
||||
clearTimeout(this.timer);
|
||||
this.loop();
|
||||
this.art.emit('info:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $info = this.art.template.$info;
|
||||
setStyle($info, 'display', 'none');
|
||||
var $player = this.art.template.$player;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-info-show');
|
||||
clearTimeout(this.timer);
|
||||
this.art.emit('info:hide', $info);
|
||||
this.art.emit('info:hide');
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -4468,26 +4475,17 @@
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var _this$art2 = this.art,
|
||||
$subtitle = _this$art2.template.$subtitle,
|
||||
i18n = _this$art2.i18n,
|
||||
notice = _this$art2.notice;
|
||||
setStyle($subtitle, 'display', 'block');
|
||||
var $player = this.art.template.$player;
|
||||
this.state = true;
|
||||
notice.show(i18n.get('Show subtitle'));
|
||||
this.art.emit('subtitle:show', $subtitle);
|
||||
$player.classList.remove('artplayer-subtitle-hide');
|
||||
this.art.emit('subtitle:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var _this$art3 = this.art,
|
||||
$subtitle = _this$art3.template.$subtitle,
|
||||
i18n = _this$art3.i18n,
|
||||
notice = _this$art3.notice;
|
||||
setStyle($subtitle, 'display', 'none');
|
||||
var $player = this.art.template.$player;
|
||||
this.state = false;
|
||||
notice.show(i18n.get('Hide subtitle'));
|
||||
this.art.emit('subtitle:hide', $subtitle);
|
||||
$player.classList.add('artplayer-subtitle-hide');
|
||||
}
|
||||
}, {
|
||||
key: "toggle",
|
||||
@@ -4931,7 +4929,7 @@
|
||||
this.art = art;
|
||||
this.keys = {};
|
||||
this.add(27, function () {
|
||||
if (art.isFocus && art.player.fullscreenWebState) {
|
||||
if (art.player.fullscreenWebState) {
|
||||
art.player.fullscreenWebExit();
|
||||
}
|
||||
});
|
||||
@@ -5026,16 +5024,18 @@
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $layers = this.art.template.$layers;
|
||||
setStyle($layers, 'display', 'block');
|
||||
this.art.emit('layers:show', $layers);
|
||||
var $player = this.art.template.$player;
|
||||
this.state = true;
|
||||
$player.classList.remove('artplayer-layers-hide');
|
||||
this.art.emit('layers:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $layers = this.art.template.$layers;
|
||||
setStyle($layers, 'display', 'none');
|
||||
this.art.emit('layers:hide', $layers);
|
||||
var $player = this.art.template.$player;
|
||||
this.state = false;
|
||||
$player.classList.add('artplayer-layers-hide');
|
||||
this.art.emit('layers:hide');
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -5054,18 +5054,20 @@
|
||||
}
|
||||
|
||||
createClass(Loading, [{
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $loading = this.art.template.$loading;
|
||||
setStyle($loading, 'display', 'none');
|
||||
this.art.emit('loading:hide', $loading);
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $loading = this.art.template.$loading;
|
||||
setStyle($loading, 'display', 'flex');
|
||||
this.art.emit('loading:show', $loading);
|
||||
var $player = this.art.template.$player;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-loading-show');
|
||||
this.art.emit('loading:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $player = this.art.template.$player;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-loading-show');
|
||||
this.art.emit('loading:hide');
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -5090,9 +5092,10 @@
|
||||
var autoHide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
||||
var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
|
||||
var _this$art$template = this.art.template,
|
||||
$notice = _this$art$template.$notice,
|
||||
$player = _this$art$template.$player,
|
||||
$noticeInner = _this$art$template.$noticeInner;
|
||||
setStyle($notice, 'display', 'block');
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-notice-show');
|
||||
$noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
|
||||
clearTimeout(this.timer);
|
||||
|
||||
@@ -5102,14 +5105,15 @@
|
||||
}, time);
|
||||
}
|
||||
|
||||
this.art.emit('notice:show', $notice);
|
||||
this.art.emit('notice:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $notice = this.art.template.$notice;
|
||||
setStyle($notice, 'display', 'none');
|
||||
this.art.emit('notice:hide', $notice);
|
||||
var $player = this.art.template.$player;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-notice-show');
|
||||
this.art.emit('notice:hide');
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -5124,23 +5128,25 @@
|
||||
|
||||
this.art = art;
|
||||
var $mask = art.template.$mask;
|
||||
var $playBig = append($mask, '<div class="art-playBig"></div>');
|
||||
append($playBig, art.icons.playBig);
|
||||
var $playBig = append($mask, '<div class="art-state"></div>');
|
||||
append($playBig, art.icons.state);
|
||||
}
|
||||
|
||||
createClass(Mask, [{
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $mask = this.art.template.$mask;
|
||||
setStyle($mask, 'display', 'flex');
|
||||
this.art.emit('mask:show', $mask);
|
||||
var $player = this.art.template.$player;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-mask-show');
|
||||
this.art.emit('mask:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $mask = this.art.template.$mask;
|
||||
setStyle($mask, 'display', 'none');
|
||||
this.art.emit('mask:show', $mask);
|
||||
var $player = this.art.template.$player;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-mask-show');
|
||||
this.art.emit('mask:show');
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -5149,7 +5155,7 @@
|
||||
|
||||
var loading = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50px\" height=\"50px\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\" class=\"uil-default\">\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" fill=\"none\" class=\"bk\"/>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(0 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-1s\" repeatCount=\"indefinite\"/>\n </rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(30 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.9166666666666666s\" repeatCount=\"indefinite\"/>\n </rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(60 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.8333333333333334s\" repeatCount=\"indefinite\"/>\n </rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(90 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.75s\" repeatCount=\"indefinite\"/></rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(120 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.6666666666666666s\" repeatCount=\"indefinite\"/>\n </rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(150 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.5833333333333334s\" repeatCount=\"indefinite\"/>\n </rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(180 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.5s\" repeatCount=\"indefinite\"/></rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(210 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.4166666666666667s\" repeatCount=\"indefinite\"/>\n </rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(240 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.3333333333333333s\" repeatCount=\"indefinite\"/>\n </rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(270 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.25s\" repeatCount=\"indefinite\"/></rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(300 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.16666666666666666s\" repeatCount=\"indefinite\"/>\n </rect>\n <rect x=\"47\" y=\"40\" width=\"6\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"#ffffff\" transform=\"rotate(330 50 50) translate(0 -30)\">\n <animate attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"1s\" begin=\"-0.08333333333333333s\" repeatCount=\"indefinite\"/>\n </rect>\n</svg>";
|
||||
|
||||
var playBig = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"60\" width=\"60\" style=\"filter: drop-shadow(0px 1px 1px black);\" viewBox=\"0 0 24 24\">\n <path d=\"M20,2H4C1.8,2,0,3.8,0,6v12c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V6C24,3.8,22.2,2,20,2z M15.6,12.8L10.5,16 C9.9,16.5,9,16,9,15.2V8.8C9,8,9.9,7.5,10.5,8l5.1,3.2C16.3,11.5,16.3,12.5,15.6,12.8z\"/>\n</svg>";
|
||||
var state = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"60\" width=\"60\" style=\"filter: drop-shadow(0px 1px 1px black);\" viewBox=\"0 0 24 24\">\n <path d=\"M20,2H4C1.8,2,0,3.8,0,6v12c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V6C24,3.8,22.2,2,20,2z M15.6,12.8L10.5,16 C9.9,16.5,9,16,9,15.2V8.8C9,8,9.9,7.5,10.5,8l5.1,3.2C16.3,11.5,16.3,12.5,15.6,12.8z\"/>\n</svg>";
|
||||
|
||||
var play = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"22\" width=\"22\" viewBox=\"0 0 22 22\">\n <path d=\"M17.982 9.275L8.06 3.27A2.013 2.013 0 0 0 5 4.994v12.011a2.017 2.017 0 0 0 3.06 1.725l9.922-6.005a2.017 2.017 0 0 0 0-3.45z\"></path>\n</svg>";
|
||||
|
||||
@@ -5182,7 +5188,7 @@
|
||||
|
||||
var icons = Object.assign({
|
||||
loading: loading,
|
||||
playBig: playBig,
|
||||
state: state,
|
||||
play: play,
|
||||
pause: pause,
|
||||
volume: volume$1,
|
||||
@@ -5283,18 +5289,18 @@
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $setting = this.art.template.$setting;
|
||||
setStyle($setting, 'display', 'flex');
|
||||
var $player = this.art.template.$player;
|
||||
this.state = true;
|
||||
this.art.emit('setting:show', $setting);
|
||||
$player.classList.add('artplayer-setting-show');
|
||||
this.art.emit('setting:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $setting = this.art.template.$setting;
|
||||
setStyle($setting, 'display', 'none');
|
||||
var $player = this.art.template.$player;
|
||||
this.state = false;
|
||||
this.art.emit('setting:hide', $setting);
|
||||
$player.classList.remove('artplayer-setting-show');
|
||||
this.art.emit('setting:hide');
|
||||
}
|
||||
}, {
|
||||
key: "toggle",
|
||||
@@ -5807,10 +5813,7 @@
|
||||
controls: false,
|
||||
preload: 'auto'
|
||||
},
|
||||
icons: {
|
||||
loading: '',
|
||||
playBig: ''
|
||||
},
|
||||
icons: {},
|
||||
customType: {},
|
||||
lang: navigator.language.toLowerCase()
|
||||
};
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/zh-cn.js","../../packages/artplayer/src/i18n/zh-tw.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.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/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/node_modules/resize-observer/lib/ContentRect.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObservation.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObserverEntry.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObserver.js","Line truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/zh-cn.js","../../packages/artplayer/src/i18n/zh-tw.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.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/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/node_modules/resize-observer/lib/ContentRect.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObservation.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObserverEntry.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObserver.js","Line truncated
|
||||
File renamed without changes.
File renamed without changes.
+16
-16
@@ -1,35 +1,35 @@
|
||||
# artplayer-plugin-danmu
|
||||
Danmu plugin for ArtPlayer
|
||||
# artplayer-plugin-danmuku
|
||||
Danmuku plugin for ArtPlayer
|
||||
|
||||
## Demo
|
||||
|
||||
[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmu.js&example=danmu) from Github Pages
|
||||
[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku) from Github Pages
|
||||
|
||||
## Install
|
||||
|
||||
Install with `npm`
|
||||
|
||||
```
|
||||
$ npm install artplayer-plugin-danmu
|
||||
$ npm install artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
Or install with `yarn`
|
||||
|
||||
```
|
||||
$ yarn add artplayer-plugin-danmu
|
||||
$ yarn add artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
```js
|
||||
import artplayerPluginBacklight from 'artplayer-plugin-danmu';
|
||||
import artplayerPluginBacklight from 'artplayer-plugin-danmuku';
|
||||
```
|
||||
|
||||
Or umd builds are also available
|
||||
|
||||
```html
|
||||
<script src="artplayer-plugin-danmu.js"></script>
|
||||
<script src="artplayer-plugin-danmuku.js"></script>
|
||||
```
|
||||
|
||||
Will expose the global variable to `window.artplayerPluginDanmu`.
|
||||
Will expose the global variable to `window.artplayerPluginDanmuku`.
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -37,8 +37,8 @@ Will expose the global variable to `window.artplayerPluginDanmu`.
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4',
|
||||
plugins: [artplayerPluginDanmu({
|
||||
danmus: [], // Can be an array or return the promised function or danmuku xml url
|
||||
plugins: [artplayerPluginDanmuku({
|
||||
danmuku: [], // Can be an array or return the promised function or danmuku xml url
|
||||
speed: 5, // Animation time
|
||||
opacity: 1, // Opacity
|
||||
color: '#fff', // Font color
|
||||
@@ -49,7 +49,7 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
// Send danmu
|
||||
art.plugins.artplayerPluginDanmu.emit({
|
||||
art.plugins.artplayerPluginDanmuku.emit({
|
||||
text: '666', // Danmu text
|
||||
time: 5, // Video time
|
||||
color: '#fff', // Danmu color
|
||||
@@ -58,19 +58,19 @@ art.plugins.artplayerPluginDanmu.emit({
|
||||
});
|
||||
|
||||
// Start danmu
|
||||
art.plugins.artplayerPluginDanmu.start();
|
||||
art.plugins.artplayerPluginDanmuku.start();
|
||||
|
||||
// Stop danmu
|
||||
art.plugins.artplayerPluginDanmu.stop();
|
||||
art.plugins.artplayerPluginDanmuku.stop();
|
||||
|
||||
// Hide danmu
|
||||
art.plugins.artplayerPluginDanmu.hide();
|
||||
art.plugins.artplayerPluginDanmuku.hide();
|
||||
|
||||
// Show danmu
|
||||
art.plugins.artplayerPluginDanmu.show();
|
||||
art.plugins.artplayerPluginDanmuku.show();
|
||||
|
||||
// Config danmu
|
||||
art.plugins.artplayerPluginDanmu.config({
|
||||
art.plugins.artplayerPluginDanmuku.config({
|
||||
// option
|
||||
});
|
||||
```
|
||||
File renamed without changes.
File renamed without changes.
+3
-3
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "artplayer-plugin-danmu",
|
||||
"name": "artplayer-plugin-danmuku",
|
||||
"version": "3.1.7",
|
||||
"description": "Danmu plugin for ArtPlayer",
|
||||
"main": "dist/artplayer-plugin-danmu.js",
|
||||
"description": "Danmuku plugin for ArtPlayer",
|
||||
"main": "dist/artplayer-plugin-danmuku.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
File renamed without changes.
+16
-35
@@ -5,10 +5,10 @@ export default class Danmuku {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.queue = [];
|
||||
this.layer = null;
|
||||
this.isStop = false;
|
||||
this.refs = [];
|
||||
this.animationFrameTimer = null;
|
||||
this.$danmuku = art.template.$danmuku;
|
||||
art.i18n.update(Danmuku.i18n);
|
||||
art.on('video:play', this.start.bind(this));
|
||||
art.on('video:playing', this.start.bind(this));
|
||||
@@ -17,19 +17,19 @@ export default class Danmuku {
|
||||
art.on('resize', this.resize.bind(this));
|
||||
art.on('destroy', this.stop.bind(this));
|
||||
this.config(option);
|
||||
if (typeof this.option.danmus === 'function') {
|
||||
this.option.danmus().then(danmus => {
|
||||
if (typeof this.option.danmuku === 'function') {
|
||||
this.option.danmuku().then(danmus => {
|
||||
danmus.forEach(this.addToQueue.bind(this));
|
||||
this.init();
|
||||
art.emit('artplayerPluginDanmuku:loaded');
|
||||
});
|
||||
} else if (typeof this.option.danmus === 'string') {
|
||||
bilibiliDanmuParseFromUrl(this.option.danmus).then(danmus => {
|
||||
} else if (typeof this.option.danmuku === 'string') {
|
||||
bilibiliDanmuParseFromUrl(this.option.danmuku).then(danmus => {
|
||||
danmus.forEach(this.addToQueue.bind(this));
|
||||
this.init();
|
||||
art.emit('artplayerPluginDanmuku:loaded');
|
||||
});
|
||||
} else {
|
||||
this.option.danmus.forEach(this.addToQueue.bind(this));
|
||||
this.init();
|
||||
this.option.danmuku.forEach(this.addToQueue.bind(this));
|
||||
art.emit('artplayerPluginDanmuku:loaded');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@ export default class Danmuku {
|
||||
|
||||
static get option() {
|
||||
return {
|
||||
danmus: [],
|
||||
danmuku: [],
|
||||
speed: 5,
|
||||
opacity: 1,
|
||||
color: '#fff',
|
||||
@@ -60,7 +60,7 @@ export default class Danmuku {
|
||||
|
||||
static get scheme() {
|
||||
return {
|
||||
danmus: 'array|function|string',
|
||||
danmuku: 'array|function|string',
|
||||
speed: 'number',
|
||||
opacity: 'number',
|
||||
color: 'string',
|
||||
@@ -90,25 +90,6 @@ export default class Danmuku {
|
||||
this.option.margin[1] = clamp(this.option.margin[1], 0, 100);
|
||||
}
|
||||
|
||||
init() {
|
||||
this.art.emit('artplayerPluginDanmu:loaded');
|
||||
this.layer = this.art.layers.add({
|
||||
name: 'danmu',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
pointerEvents: 'none',
|
||||
opacity: this.option.opacity,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
emit(danmu) {
|
||||
const { $player } = this.art.template;
|
||||
danmu.$ref = this.getDanmuRef();
|
||||
@@ -205,7 +186,7 @@ export default class Danmuku {
|
||||
waitDanmu.$ref.style.border = 'none';
|
||||
waitDanmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
|
||||
waitDanmu.$ref.style.transition = 'transform 0s linear 0s';
|
||||
this.layer.$ref.appendChild(waitDanmu.$ref);
|
||||
this.$danmuku.appendChild(waitDanmu.$ref);
|
||||
return waitDanmu.$ref;
|
||||
}
|
||||
|
||||
@@ -226,7 +207,7 @@ 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',
|
||||
});
|
||||
|
||||
append(this.layer.$ref, $ref);
|
||||
append(this.$danmuku, $ref);
|
||||
this.refs.push($ref);
|
||||
return $ref;
|
||||
}
|
||||
@@ -282,7 +263,7 @@ export default class Danmuku {
|
||||
update() {
|
||||
const { player } = this.art;
|
||||
this.animationFrameTimer = window.requestAnimationFrame(() => {
|
||||
if (this.layer && player.playing) {
|
||||
if (player.playing) {
|
||||
this.queue
|
||||
.filter(danmu => {
|
||||
return (
|
||||
@@ -325,12 +306,12 @@ export default class Danmuku {
|
||||
}
|
||||
|
||||
show() {
|
||||
this.layer.$ref.style = 'none';
|
||||
this.$danmuku.style = 'none';
|
||||
this.art.emit('artplayerPluginDanmu:show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.layer.$ref.style = 'block';
|
||||
this.$danmuku.style = 'block';
|
||||
this.art.emit('artplayerPluginDanmu:hide');
|
||||
}
|
||||
}
|
||||
File renamed without changes.
+7
-7
@@ -1,11 +1,11 @@
|
||||
import { bilibiliDanmuParseFromXml, bilibiliDanmuParseFromAv, bilibiliDanmuParseFromUrl } from './bilibiliDanmuParse';
|
||||
import Danmuku from './danmuku';
|
||||
|
||||
function artplayerPluginDanmu(option) {
|
||||
function artplayerPluginDanmuku(option) {
|
||||
return art => {
|
||||
const danmuku = new Danmuku(art, option);
|
||||
return {
|
||||
name: 'artplayerPluginDanmu',
|
||||
name: 'artplayerPluginDanmuku',
|
||||
emit: danmuku.addToQueue.bind(danmuku),
|
||||
config: danmuku.config.bind(danmuku),
|
||||
start: danmuku.start.bind(danmuku),
|
||||
@@ -16,8 +16,8 @@ function artplayerPluginDanmu(option) {
|
||||
};
|
||||
}
|
||||
|
||||
artplayerPluginDanmu.bilibiliDanmuParseFromXml = bilibiliDanmuParseFromXml;
|
||||
artplayerPluginDanmu.bilibiliDanmuParseFromAv = bilibiliDanmuParseFromAv;
|
||||
artplayerPluginDanmu.bilibiliDanmuParseFromUrl = bilibiliDanmuParseFromUrl;
|
||||
window.artplayerPluginDanmu = artplayerPluginDanmu;
|
||||
export default artplayerPluginDanmu;
|
||||
artplayerPluginDanmuku.bilibiliDanmuParseFromXml = bilibiliDanmuParseFromXml;
|
||||
artplayerPluginDanmuku.bilibiliDanmuParseFromAv = bilibiliDanmuParseFromAv;
|
||||
artplayerPluginDanmuku.bilibiliDanmuParseFromUrl = bilibiliDanmuParseFromUrl;
|
||||
window.artplayerPluginDanmuku = artplayerPluginDanmuku;
|
||||
export default artplayerPluginDanmuku;
|
||||
@@ -100,15 +100,17 @@ export default class Contextmenu {
|
||||
setStyle($contextmenu, 'top', `${menuTop}px`);
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $contextmenu } = this.art.template;
|
||||
setStyle($contextmenu, 'display', 'none');
|
||||
this.art.emit('contextmenu:hide', $contextmenu);
|
||||
show() {
|
||||
const { $player } = this.art.template;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-contextmenu-show');
|
||||
this.art.emit('contextmenu:show');
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $contextmenu } = this.art.template;
|
||||
setStyle($contextmenu, 'display', 'block');
|
||||
this.art.emit('contextmenu:show', $contextmenu);
|
||||
hide() {
|
||||
const { $player } = this.art.template;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-contextmenu-show');
|
||||
this.art.emit('contextmenu:hide');
|
||||
}
|
||||
}
|
||||
@@ -163,12 +163,14 @@ export default class Controls {
|
||||
|
||||
show() {
|
||||
const { $player } = this.art.template;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-controls-show');
|
||||
this.art.emit('controls:show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $player } = this.art.template;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-controls-show');
|
||||
this.art.emit('controls:hide');
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ export default class Hotkey {
|
||||
this.keys = {};
|
||||
|
||||
this.add(27, () => {
|
||||
if (art.isFocus && art.player.fullscreenWebState) {
|
||||
if (art.player.fullscreenWebState) {
|
||||
art.player.fullscreenWebExit();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { errorHandle } from '../utils';
|
||||
import loading from './loading.svg';
|
||||
import playBig from './play-big.svg';
|
||||
import state from './state.svg';
|
||||
import play from './play.svg';
|
||||
import pause from './pause.svg';
|
||||
import volume from './volume.svg';
|
||||
@@ -19,7 +19,7 @@ export default class Icons {
|
||||
const icons = Object.assign(
|
||||
{
|
||||
loading,
|
||||
playBig,
|
||||
state,
|
||||
play,
|
||||
pause,
|
||||
volume,
|
||||
|
||||
File renamed without changes.
@@ -110,10 +110,7 @@ class Artplayer extends Emitter {
|
||||
controls: false,
|
||||
preload: 'auto',
|
||||
},
|
||||
icons: {
|
||||
loading: '',
|
||||
playBig: '',
|
||||
},
|
||||
icons: {},
|
||||
customType: {},
|
||||
lang: navigator.language.toLowerCase(),
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { append, setStyle } from './utils';
|
||||
import { append } from './utils';
|
||||
|
||||
export default class Info {
|
||||
constructor(art) {
|
||||
@@ -21,17 +21,6 @@ export default class Info {
|
||||
});
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $info, $infoPanel } = this.art.template;
|
||||
setStyle($info, 'display', 'block');
|
||||
if (!$infoPanel.innerHTML) {
|
||||
append($infoPanel, this.creatInfo());
|
||||
}
|
||||
clearTimeout(this.timer);
|
||||
this.loop();
|
||||
this.art.emit('info:show', $info);
|
||||
}
|
||||
|
||||
creatInfo() {
|
||||
const infoHtml = [];
|
||||
|
||||
@@ -103,10 +92,23 @@ export default class Info {
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $info } = this.art.template;
|
||||
setStyle($info, 'display', 'none');
|
||||
show() {
|
||||
const { $player, $infoPanel } = this.art.template;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-info-show');
|
||||
if (!$infoPanel.innerHTML) {
|
||||
append($infoPanel, this.creatInfo());
|
||||
}
|
||||
clearTimeout(this.timer);
|
||||
this.art.emit('info:hide', $info);
|
||||
this.loop();
|
||||
this.art.emit('info:show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $player } = this.art.template;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-info-show');
|
||||
clearTimeout(this.timer);
|
||||
this.art.emit('info:hide');
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import { setStyle } from './utils';
|
||||
import component from './utils/component';
|
||||
|
||||
export default class Layers {
|
||||
@@ -20,14 +19,16 @@ export default class Layers {
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $layers } = this.art.template;
|
||||
setStyle($layers, 'display', 'block');
|
||||
this.art.emit('layers:show', $layers);
|
||||
const { $player } = this.art.template;
|
||||
this.state = true;
|
||||
$player.classList.remove('artplayer-layers-hide');
|
||||
this.art.emit('layers:show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $layers } = this.art.template;
|
||||
setStyle($layers, 'display', 'none');
|
||||
this.art.emit('layers:hide', $layers);
|
||||
const { $player } = this.art.template;
|
||||
this.state = false;
|
||||
$player.classList.add('artplayer-layers-hide');
|
||||
this.art.emit('layers:hide');
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { append, setStyle } from './utils';
|
||||
import { append } from './utils';
|
||||
|
||||
export default class Loading {
|
||||
constructor(art) {
|
||||
@@ -7,15 +7,17 @@ export default class Loading {
|
||||
append($loading, art.icons.loading);
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $loading } = this.art.template;
|
||||
setStyle($loading, 'display', 'none');
|
||||
this.art.emit('loading:hide', $loading);
|
||||
show() {
|
||||
const { $player } = this.art.template;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-loading-show');
|
||||
this.art.emit('loading:show');
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $loading } = this.art.template;
|
||||
setStyle($loading, 'display', 'flex');
|
||||
this.art.emit('loading:show', $loading);
|
||||
hide() {
|
||||
const { $player } = this.art.template;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-loading-show');
|
||||
this.art.emit('loading:hide');
|
||||
}
|
||||
}
|
||||
@@ -1,22 +1,24 @@
|
||||
import { append, setStyle } from './utils';
|
||||
import { append } from './utils';
|
||||
|
||||
export default class Mask {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
const { $mask } = art.template;
|
||||
const $playBig = append($mask, '<div class="art-playBig"></div>');
|
||||
append($playBig, art.icons.playBig);
|
||||
const $playBig = append($mask, '<div class="art-state"></div>');
|
||||
append($playBig, art.icons.state);
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $mask } = this.art.template;
|
||||
setStyle($mask, 'display', 'flex');
|
||||
this.art.emit('mask:show', $mask);
|
||||
const { $player } = this.art.template;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-mask-show');
|
||||
this.art.emit('mask:show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $mask } = this.art.template;
|
||||
setStyle($mask, 'display', 'none');
|
||||
this.art.emit('mask:show', $mask);
|
||||
const { $player } = this.art.template;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-mask-show');
|
||||
this.art.emit('mask:show');
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
import { setStyle } from './utils';
|
||||
|
||||
export default class Notice {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
@@ -7,8 +5,9 @@ export default class Notice {
|
||||
}
|
||||
|
||||
show(msg, autoHide = true, time = 1000) {
|
||||
const { $notice, $noticeInner } = this.art.template;
|
||||
setStyle($notice, 'display', 'block');
|
||||
const { $player, $noticeInner } = this.art.template;
|
||||
this.state = true;
|
||||
$player.classList.add('artplayer-notice-show');
|
||||
$noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
|
||||
clearTimeout(this.timer);
|
||||
if (autoHide) {
|
||||
@@ -16,12 +15,13 @@ export default class Notice {
|
||||
this.hide();
|
||||
}, time);
|
||||
}
|
||||
this.art.emit('notice:show', $notice);
|
||||
this.art.emit('notice:show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $notice } = this.art.template;
|
||||
setStyle($notice, 'display', 'none');
|
||||
this.art.emit('notice:hide', $notice);
|
||||
const { $player } = this.art.template;
|
||||
this.state = false;
|
||||
$player.classList.remove('artplayer-notice-show');
|
||||
this.art.emit('notice:hide');
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import { setStyle } from '../utils';
|
||||
import component from '../utils/component';
|
||||
import flip from './flip';
|
||||
|
||||
@@ -46,17 +45,17 @@ export default class Setting {
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $setting } = this.art.template;
|
||||
setStyle($setting, 'display', 'flex');
|
||||
const { $player } = this.art.template;
|
||||
this.state = true;
|
||||
this.art.emit('setting:show', $setting);
|
||||
$player.classList.add('artplayer-setting-show');
|
||||
this.art.emit('setting:show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $setting } = this.art.template;
|
||||
setStyle($setting, 'display', 'none');
|
||||
const { $player } = this.art.template;
|
||||
this.state = false;
|
||||
this.art.emit('setting:hide', $setting);
|
||||
$player.classList.remove('artplayer-setting-show');
|
||||
this.art.emit('setting:hide');
|
||||
}
|
||||
|
||||
toggle() {
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
.artplayer-video-player {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: 0;
|
||||
font-family: Roboto,Arial,Helvetica,sans-serif;
|
||||
zoom: 1;
|
||||
font-family: Roboto, Arial, Helvetica, sans-serif;
|
||||
color: #eee;
|
||||
text-align: left;
|
||||
direction: ltr;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
touch-action: manipulation;
|
||||
-ms-high-contrast-adjust: none;
|
||||
|
||||
@@ -22,10 +25,12 @@
|
||||
}
|
||||
|
||||
.art-icon {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1.5;
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
.artplayer-video-player {
|
||||
.artplayer-bottom {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
z-index: 60;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
.artplayer-video-player {
|
||||
.artplayer-contextmenu {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 110;
|
||||
z-index: 120;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-width: 200px;
|
||||
@@ -44,4 +45,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.artplayer-contextmenu-show {
|
||||
.artplayer-contextmenu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.artplayer-video-player {
|
||||
.artplayer-danmuku {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import './artplayer.scss';
|
||||
import './video.scss';
|
||||
import './subtitle.scss';
|
||||
import './danmuku.scss';
|
||||
import './layers.scss';
|
||||
import './mask.scss';
|
||||
import './loading.scss';
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
.artplayer-video-player {
|
||||
.artplayer-info {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
z-index: 90;
|
||||
z-index: 100;
|
||||
width: 350px;
|
||||
min-height: 150px;
|
||||
padding: 10px;
|
||||
@@ -38,4 +39,10 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.artplayer-info-show {
|
||||
.artplayer-info {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
.artplayer-video-player {
|
||||
.artplayer-layers {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
z-index: 40;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -14,4 +14,10 @@
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
&.artplayer-layers-hide {
|
||||
.artplayer-layers {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
.artplayer-loading {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 60;
|
||||
z-index: 70;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -13,4 +13,10 @@
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.artplayer-loading-show {
|
||||
.artplayer-loading {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
.artplayer-mask {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
z-index: 50;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -12,11 +12,17 @@
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
.art-playBig {
|
||||
.art-state {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 65px;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
&.artplayer-mask-show {
|
||||
.artplayer-mask {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
z-index: 70;
|
||||
z-index: 80;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 10px;
|
||||
@@ -17,4 +17,10 @@
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.artplayer-notice-show {
|
||||
.artplayer-notice {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
.artplayer-pip-header {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
z-index: 110;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
@@ -1,30 +1,35 @@
|
||||
.artplayer-video-player {
|
||||
.artplayer-setting {
|
||||
display: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 80;
|
||||
z-index: 90;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
.artplayer-setting-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
right: -50%;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
transition: all .2s ease-in-out;
|
||||
overflow: hidden;
|
||||
.artplayer-setting-body {
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.art-setting {
|
||||
border-bottom: 1px solid rgba(255,255,255,.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 12px 20px 12px 20px;
|
||||
.art-setting-header {
|
||||
color: #fff;
|
||||
@@ -54,7 +59,8 @@
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover, &.current {
|
||||
&:hover,
|
||||
&.current {
|
||||
span {
|
||||
color: #fff;
|
||||
background: #00a1d6;
|
||||
@@ -63,4 +69,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.artplayer-setting-show {
|
||||
.artplayer-setting {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: all;
|
||||
.artplayer-setting-inner {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,12 +7,18 @@
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
|
||||
font-size: 20px;
|
||||
pointer-events: none;
|
||||
text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
|
||||
|
||||
p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.artplayer-subtitle-hide {
|
||||
.artplayer-subtitle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,6 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { setStyles, setStyle, srtToVtt, vttToBlob } from './utils';
|
||||
import { setStyles, srtToVtt, vttToBlob } from './utils';
|
||||
|
||||
export default class Subtitle {
|
||||
constructor(art) {
|
||||
@@ -74,28 +74,16 @@ export default class Subtitle {
|
||||
}
|
||||
|
||||
show() {
|
||||
const {
|
||||
template: { $subtitle },
|
||||
i18n,
|
||||
notice,
|
||||
} = this.art;
|
||||
setStyle($subtitle, 'display', 'block');
|
||||
const { $player } = this.art.template;
|
||||
this.state = true;
|
||||
notice.show(i18n.get('Show subtitle'));
|
||||
this.art.emit('subtitle:show', $subtitle);
|
||||
$player.classList.remove('artplayer-subtitle-hide');
|
||||
this.art.emit('subtitle:show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const {
|
||||
template: { $subtitle },
|
||||
i18n,
|
||||
notice,
|
||||
} = this.art;
|
||||
|
||||
setStyle($subtitle, 'display', 'none');
|
||||
const { $player } = this.art.template;
|
||||
this.state = false;
|
||||
notice.show(i18n.get('Hide subtitle'));
|
||||
this.art.emit('subtitle:hide', $subtitle);
|
||||
$player.classList.add('artplayer-subtitle-hide');
|
||||
}
|
||||
|
||||
toggle() {
|
||||
|
||||
@@ -25,6 +25,7 @@ export default class Template {
|
||||
<div class="artplayer-video-player">
|
||||
<video class="artplayer-video"></video>
|
||||
<div class="artplayer-subtitle"></div>
|
||||
<div class="artplayer-danmuku"></div>
|
||||
<div class="artplayer-layers"></div>
|
||||
<div class="artplayer-mask"></div>
|
||||
<div class="artplayer-bottom">
|
||||
@@ -57,6 +58,7 @@ export default class Template {
|
||||
this.$player = this.$container.querySelector('.artplayer-video-player');
|
||||
this.$video = this.$container.querySelector('.artplayer-video');
|
||||
this.$subtitle = this.$container.querySelector('.artplayer-subtitle');
|
||||
this.$danmuku = this.$container.querySelector('.artplayer-danmuku');
|
||||
this.$bottom = this.$container.querySelector('.artplayer-bottom');
|
||||
this.$progress = this.$container.querySelector('.artplayer-progress');
|
||||
this.$controls = this.$container.querySelector('.artplayer-controls');
|
||||
|
||||
Reference in new issue
Block a user