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

添加样式小工具

Browse Source
This commit is contained in:
Harvey Zack committed 2018-10-30 17:04:32 +08:00
1 parent 96a6e1eb0e
commit 47438ed73f
10 files changed
+56 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/js/artplayer.js
+23 -23
View File
@@ -1150,13 +1150,13 @@
if (ratio.length === 2) {
var rate = Number(ratio[0]) / Number(ratio[1]);
$video.style.width = "".concat(100 / rate, "%");
$video.style.height = '100%';
$video.style.padding = "0 ".concat(($player.clientWidth - $player.clientWidth / rate) / 2, "px");
setStyle($video, 'width', "".concat(100 / rate, "%"));
setStyle($video, 'height', '100%');
setStyle($video, 'padding', "0 ".concat(($player.clientWidth - $player.clientWidth / rate) / 2, "px"));
} else {
$video.style.width = null;
$video.style.height = null;
$video.style.padding = null;
setStyle($video, 'width', null);
setStyle($video, 'height', null);
setStyle($video, 'padding', null);
}
var ratioName = ratio.length === 2 ? "".concat(ratio[0], ":").concat(ratio[1]) : ratio[0];
@@ -2237,8 +2237,8 @@
menuTop = cHeight - mHeight;
}
refs.$contextmenu.style.left = "".concat(menuLeft, "px");
refs.$contextmenu.style.top = "".concat(menuTop, "px");
setStyle(refs.$contextmenu, 'left', "".concat(menuLeft, "px"));
setStyle(refs.$contextmenu, 'top', "".concat(menuTop, "px"));
}
}, {
key: "hide",
@@ -2246,7 +2246,7 @@
var $contextmenu = this.art.refs.$contextmenu;
if ($contextmenu) {
$contextmenu.style.display = 'none';
setStyle($contextmenu, 'display', 'none');
this.art.emit('contextmenu:hide', $contextmenu);
}
}
@@ -2256,7 +2256,7 @@
var $contextmenu = this.art.refs.$contextmenu;
if ($contextmenu) {
$contextmenu.style.display = 'block';
setStyle($contextmenu, 'display', 'block');
this.art.emit('contextmenu:show', $contextmenu);
}
}
@@ -2299,7 +2299,7 @@
var _this$art$refs = this.art.refs,
$info = _this$art$refs.$info,
$infoPanel = _this$art$refs.$infoPanel;
$info.style.display = 'block';
setStyle($info, 'display', 'block');
if (!$infoPanel.innerHTML) {
append($infoPanel, this.creatInfo());
@@ -2372,7 +2372,7 @@
key: "hide",
value: function hide() {
var $info = this.art.refs.$info;
$info.style.display = 'none';
setStyle($info, 'display', 'none');
clearTimeout(this.timer);
this.art.emit('info:hide', $info);
}
@@ -2476,14 +2476,14 @@
key: "show",
value: function show() {
var $subtitle = this.art.refs.$subtitle;
$subtitle.style.display = 'block';
setStyle($subtitle, 'display', 'block');
this.art.emit('subtitle:show', $subtitle);
}
}, {
key: "hide",
value: function hide() {
var $subtitle = this.art.refs.$subtitle;
$subtitle.style.display = 'none';
setStyle($subtitle, 'display', 'none');
this.art.emit('subtitle:hide', $subtitle);
}
}, {
@@ -2654,7 +2654,7 @@
var $layer = document.createElement('div');
$layer.setAttribute('data-art-layer-id', id$2);
$layer.setAttribute('class', "art-layer art-layer-".concat(option.name || id$2));
$layer.style.zIndex = option.index || id$2;
setStyle($layer, 'z-index', option.index || id$2);
append($layer, option.html);
setStyles($layer, option.style || {});
refs.$layers.appendChild($layer);
@@ -2665,14 +2665,14 @@
key: "show",
value: function show() {
var $layers = this.art.refs.$layers;
$layers.style.display = 'block';
setStyle($layers, 'display', 'block');
this.art.emit('layers:show', $layers);
}
}, {
key: "hide",
value: function hide() {
var $layers = this.art.refs.$layers;
$layers.style.display = 'none';
setStyle($layers, 'display', 'none');
this.art.emit('layers:hide', $layers);
}
}]);
@@ -2702,14 +2702,14 @@
key: "hide",
value: function hide() {
var $loading = this.art.refs.$loading;
$loading.style.display = 'none';
setStyle($loading, 'display', 'none');
this.art.emit('loading:hide', $loading);
}
}, {
key: "show",
value: function show() {
var $loading = this.art.refs.$loading;
$loading.style.display = 'flex';
setStyle($loading, 'display', 'flex');
this.art.emit('loading:show', $loading);
}
}]);
@@ -2737,7 +2737,7 @@
var _this$art$refs = this.art.refs,
$notice = _this$art$refs.$notice,
$noticeInner = _this$art$refs.$noticeInner;
$notice.style.display = 'block';
setStyle($notice, 'display', 'block');
$noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
if (autoHide) {
@@ -2753,7 +2753,7 @@
key: "hide",
value: function hide() {
var $notice = this.art.refs.$notice;
$notice.style.display = 'none';
setStyle($notice, 'display', 'none');
this.art.emit('notice:hide', $notice);
}
}]);
@@ -2791,14 +2791,14 @@
key: "show",
value: function show() {
var $mask = this.art.refs.$mask;
$mask.style.display = 'block';
setStyle($mask, 'display', 'block');
this.art.emit('mask:show', $mask);
}
}, {
key: "hide",
value: function hide() {
var $mask = this.art.refs.$mask;
$mask.style.display = 'none';
setStyle($mask, 'display', 'none');
this.art.emit('mask:show', $mask);
}
}]);
docs/js/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../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/inherits.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../node_modules/kind-of/index.js","../../node_modules/option-validator/index.js","../../src/scheme/validElement.js","../../src/scheme/index.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.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","../../src/icons/index.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/screenshot.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _construct(Parent, args, Class) {\n if (isNativeReflectConstruct()) {\n module.exports = _construct = Reflect.construct;\n } else {\n module.exports = _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n }\n}\n\nmodule.exports = _arrayWithoutHoles;","function _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;","function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\nmodule.exports = _nonIterableSpread;","var arrayWithoutHoles = require(\"./arrayWithoutHoles\");\n\nvar iterableToArray = require(\"./iterableToArray\");\n\nvar nonIterableSpread = require(\"./nonIterableSpread\");\n\nfunction _toConsumableArray(arr) {\n return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();\n}\n\nmodule.exports = _toConsumableArray;","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 Line truncated
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../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/inherits.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../node_modules/kind-of/index.js","../../node_modules/option-validator/index.js","../../src/scheme/validElement.js","../../src/scheme/index.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.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","../../src/icons/index.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/screenshot.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _construct(Parent, args, Class) {\n if (isNativeReflectConstruct()) {\n module.exports = _construct = Reflect.construct;\n } else {\n module.exports = _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n }\n}\n\nmodule.exports = _arrayWithoutHoles;","function _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;","function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\nmodule.exports = _nonIterableSpread;","var arrayWithoutHoles = require(\"./arrayWithoutHoles\");\n\nvar iterableToArray = require(\"./iterableToArray\");\n\nvar nonIterableSpread = require(\"./nonIterableSpread\");\n\nfunction _toConsumableArray(arr) {\n return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();\n}\n\nmodule.exports = _toConsumableArray;","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 Line truncated
src/contextmenu.js
+5 -5
View File
@@ -1,4 +1,4 @@
import { append, setStyles } from './utils';
import { append, setStyles, setStyle } from './utils';
let id = 0;
export default class Contextmenu {
@@ -124,14 +124,14 @@ export default class Contextmenu {
menuTop = cHeight - mHeight;
}
refs.$contextmenu.style.left = `${menuLeft}px`;
refs.$contextmenu.style.top = `${menuTop}px`;
setStyle(refs.$contextmenu, 'left', `${menuLeft}px`);
setStyle(refs.$contextmenu, 'top', `${menuTop}px`);
}
hide() {
const { refs: { $contextmenu } } = this.art;
if ($contextmenu) {
$contextmenu.style.display = 'none';
setStyle($contextmenu, 'display', 'none');
this.art.emit('contextmenu:hide', $contextmenu);
}
}
@@ -139,7 +139,7 @@ export default class Contextmenu {
show() {
const { refs: { $contextmenu } } = this.art;
if ($contextmenu) {
$contextmenu.style.display = 'block';
setStyle($contextmenu, 'display', 'block');
this.art.emit('contextmenu:show', $contextmenu);
}
}
src/info.js
+3 -3
View File
@@ -1,4 +1,4 @@
import { append } from './utils';
import { append, setStyle } from './utils';
export default class Info {
constructor(art) {
@@ -15,7 +15,7 @@ export default class Info {
show() {
const { $info, $infoPanel } = this.art.refs;
$info.style.display = 'block';
setStyle($info, 'display', 'block');
if (!$infoPanel.innerHTML) {
append($infoPanel, this.creatInfo());
this.getHeader();
@@ -125,7 +125,7 @@ export default class Info {
hide() {
const { $info } = this.art.refs;
$info.style.display = 'none';
setStyle($info, 'display', 'none');
clearTimeout(this.timer);
this.art.emit('info:hide', $info);
}
src/layers.js
+4 -4
View File
@@ -1,4 +1,4 @@
import { append, setStyles } from './utils';
import { append, setStyles, setStyle } from './utils';
let id = 0;
export default class Layers {
@@ -25,7 +25,7 @@ export default class Layers {
const $layer = document.createElement('div');
$layer.setAttribute('data-art-layer-id', id);
$layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);
$layer.style.zIndex = option.index || id;
setStyle($layer, 'z-index', option.index || id);
append($layer, option.html);
setStyles($layer, option.style || {});
refs.$layers.appendChild($layer);
@@ -35,13 +35,13 @@ export default class Layers {
show() {
const { $layers } = this.art.refs;
$layers.style.display = 'block';
setStyle($layers, 'display', 'block');
this.art.emit('layers:show', $layers);
}
hide() {
const { $layers } = this.art.refs;
$layers.style.display = 'none';
setStyle($layers, 'display', 'none');
this.art.emit('layers:hide', $layers);
}
}
src/loading.js
+3 -3
View File
@@ -1,5 +1,5 @@
import icons from './icons';
import { append } from './utils';
import { append, setStyle } from './utils';
export default class Loading {
constructor(art) {
@@ -14,13 +14,13 @@ export default class Loading {
hide() {
const { $loading } = this.art.refs;
$loading.style.display = 'none';
setStyle($loading, 'display', 'none');
this.art.emit('loading:hide', $loading);
}
show() {
const { $loading } = this.art.refs;
$loading.style.display = 'flex';
setStyle($loading, 'display', 'flex');
this.art.emit('loading:show', $loading);
}
}
src/mask.js
+3 -3
View File
@@ -1,5 +1,5 @@
import icons from './icons';
import { append } from './utils';
import { append, setStyle } from './utils';
export default class Mask {
constructor(art) {
@@ -24,13 +24,13 @@ export default class Mask {
show() {
const { $mask } = this.art.refs;
$mask.style.display = 'block';
setStyle($mask, 'display', 'block');
this.art.emit('mask:show', $mask);
}
hide() {
const { $mask } = this.art.refs;
$mask.style.display = 'none';
setStyle($mask, 'display', 'none');
this.art.emit('mask:show', $mask);
}
}
src/notice.js
+4 -2
View File
@@ -1,3 +1,5 @@
import { setStyle } from './utils';
export default class Notice {
constructor(art) {
this.art = art;
@@ -6,7 +8,7 @@ export default class Notice {
show(msg, autoHide = true, time = 1000) {
const { $notice, $noticeInner } = this.art.refs;
$notice.style.display = 'block';
setStyle($notice, 'display', 'block');
$noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
if (autoHide) {
clearTimeout(this.timer);
@@ -19,7 +21,7 @@ export default class Notice {
hide() {
const { $notice } = this.art.refs;
$notice.style.display = 'none';
setStyle($notice, 'display', 'none');
this.art.emit('notice:hide', $notice);
}
}
src/player.js
+7 -7
View File
@@ -1,4 +1,4 @@
import { clamp, secondToTime, setStorage, sleep } from './utils';
import { clamp, secondToTime, setStorage, sleep, setStyle } from './utils';
import config from './config';
export default class Player {
@@ -178,13 +178,13 @@ export default class Player {
const { refs: { $video, $player }, i18n, notice } = this.art;
if (ratio.length === 2) {
const rate = Number(ratio[0]) / Number(ratio[1]);
$video.style.width = `${100 / rate}%`;
$video.style.height = '100%';
$video.style.padding = `0 ${($player.clientWidth - $player.clientWidth / rate) / 2}px`;
setStyle($video, 'width', `${100 / rate}%`);
setStyle($video, 'height', '100%');
setStyle($video, 'padding', `0 ${($player.clientWidth - $player.clientWidth / rate) / 2}px`);
} else {
$video.style.width = null;
$video.style.height = null;
$video.style.padding = null;
setStyle($video, 'width', null);
setStyle($video, 'height', null);
setStyle($video, 'padding', null);
}
const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : ratio[0];
src/subtitle.js
+3 -3
View File
@@ -1,4 +1,4 @@
import { errorHandle, getExt, setStyles } from './utils';
import { errorHandle, getExt, setStyles, setStyle } from './utils';
export default class Subtitle {
constructor(art) {
@@ -91,13 +91,13 @@ export default class Subtitle {
show() {
const { $subtitle } = this.art.refs;
$subtitle.style.display = 'block';
setStyle($subtitle, 'display', 'block');
this.art.emit('subtitle:show', $subtitle);
}
hide() {
const { $subtitle } = this.art.refs;
$subtitle.style.display = 'none';
setStyle($subtitle, 'display', 'none');
this.art.emit('subtitle:hide', $subtitle);
}