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

add theme

Browse Source
This commit is contained in:
Harvey Zack committed 2018-10-16 13:15:54 +08:00
1 parent ca0c67499b
commit e8e8f7e8e7
9 files changed
+66 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/css/artplayer.css
+1 -1
View File
@@ -1 +1 @@
.artplayer-wrap{position:relative;width:100%;height:100%;text-align:left;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.artplayer-wrap .art-icon svg{fill:#fff}.artplayer-wrap .artplayer-video{z-index:1}.artplayer-wrap .artplayer-layers,.artplayer-wrap .artplayer-video{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-wrap .artplayer-layers{z-index:2}.artplayer-wrap .artplayer-mask{display:none;position:absolute;z-index:3;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;cursor:pointer}.artplayer-wrap .artplayer-mask .art-icon-play{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px;background:#1aafff}.artplayer-wrap .artplayer-contextmenu{position:absolute;z-index:7;left:0;top:0;width:170px;padding:5px 0;background:rgba(0,0,0,.75)}.artplayer-wrap .artplayer-contextmenu a{font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}.artplayer-wrap .artplayer-controls{position:absolute;z-index:4;left:0;right:0;bottom:0;height:100px;opacity:0;visibility:hidden;transition:all .2s ease-in-out;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-wrap.controls-show .artplayer-controls,.artplayer-wrap:hover .artplayer-controls{opacity:1;visibility:visible}.artplayer-wrap .artplayer-loading{display:none;position:absolute;z-index:5;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center}.artplayer-wrap .artplayer-notice{display:none;font-size:13px;position:absolute;z-index:6;left:10px;top:10px;height:30px;line-height:30px;padding:0 10px;color:#fff;background:rgba(0,0,0,.5)}
.artplayer-wrap{position:relative;width:100%;height:100%;text-align:left;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.artplayer-wrap .art-icon svg{fill:#fff}.artplayer-wrap .artplayer-video{z-index:1}.artplayer-wrap .artplayer-layers,.artplayer-wrap .artplayer-video{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-wrap .artplayer-layers{z-index:2}.artplayer-wrap .artplayer-mask{display:none;position:absolute;z-index:3;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;cursor:pointer}.artplayer-wrap .artplayer-mask .art-icon-play{opacity:.8;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px}.artplayer-wrap .artplayer-contextmenu{position:absolute;z-index:7;left:0;top:0;width:170px;padding:5px 0;background:rgba(0,0,0,.75)}.artplayer-wrap .artplayer-contextmenu a{font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}.artplayer-wrap .artplayer-controls{position:absolute;z-index:4;left:0;right:0;bottom:0;height:100px;opacity:0;visibility:hidden;transition:all .2s ease-in-out;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-wrap.controls-show .artplayer-controls,.artplayer-wrap:hover .artplayer-controls{opacity:1;visibility:visible}.artplayer-wrap .artplayer-loading{display:none;position:absolute;z-index:5;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center}.artplayer-wrap .artplayer-notice{display:none;font-size:13px;position:absolute;z-index:6;left:10px;top:10px;height:30px;line-height:30px;padding:0 10px;color:#fff;background:rgba(0,0,0,.5)}
docs/js/artplayer.js
+31 -4
View File
@@ -247,6 +247,7 @@
errorHandle(Array.isArray(option.layers), "'layers' option require 'array' type, but got '".concat(_typeof_1(option.layers), "'."));
errorHandle(Array.isArray(option.contextmenu), "'contextmenu' option require 'array' type, but got '".concat(_typeof_1(option.contextmenu), "'."));
errorHandle(typeof option.loading === 'string', "'loading' option require 'string' type, but got '".concat(_typeof_1(option.loading), "'."));
errorHandle(typeof option.theme === 'string', "'theme' option require 'string' type, but got '".concat(_typeof_1(option.theme), "'."));
}
var mimeCodec = {
@@ -813,9 +814,10 @@
createClass(Events, [{
key: "proxy",
value: function proxy(target, name, callback) {
target.addEventListener(name, callback);
var option = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
target.addEventListener(name, callback, option);
this.destroyEvents.push(function () {
target.removeEventListener(name, callback);
target.removeEventListener(name, callback, option);
});
}
}, {
@@ -852,9 +854,22 @@
this.art = art;
this.add = this.add.bind(this);
this.art.option.layers.forEach(this.add);
this.init();
}
createClass(Layers, [{
key: "init",
value: function init() {
var _this$art = this.art,
refs = _this$art.refs,
proxy = _this$art.events.proxy;
proxy(refs.$layers, 'click', function (event) {
if (event.path[0] === refs.$layers) {
refs.$video.pause();
}
});
}
}, {
key: "add",
value: function add(option, callback) {
var refs = this.art.refs;
@@ -1019,7 +1034,19 @@
createClass(Mask, [{
key: "init",
value: function init() {
this.art.refs.$mask.appendChild(Icons$1.play);
var _this = this;
var _this$art = this.art,
option = _this$art.option,
refs = _this$art.refs,
proxy = _this$art.events.proxy;
Icons$1.play.style.backgroundColor = option.theme;
refs.$mask.appendChild(Icons$1.play);
proxy(refs.$mask, 'click', function () {
refs.$video.play();
_this.hide();
});
}
}, {
key: "show",
@@ -1089,7 +1116,6 @@
this.events.destroy();
this.refs.$container.innerHTML = '';
instances.splice(instances.indexOf(this), 1);
return this;
}
}], [{
key: "use",
@@ -1137,6 +1163,7 @@
layers: [],
contextmenu: [],
loading: '',
theme: '#1aafff',
lang: navigator.language.toLowerCase()
};
}
docs/js/artplayer.js.map
+1 -1
View File
@@ -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","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/utils/verification.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/mse.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmaku.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.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/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n module.exports = _typeof = function _typeof(obj) {\n return _typeof2(obj);\n };\n } else {\n module.exports = _typeof = function _typeof(obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n };\n }\n\n return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n return call;\n }\n\n return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","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 _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function _isNativeFunctioLine 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","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/utils/verification.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/mse.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmaku.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.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/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n module.exports = _typeof = function _typeof(obj) {\n return _typeof2(obj);\n };\n } else {\n module.exports = _typeof = function _typeof(obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n };\n }\n\n return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n return call;\n }\n\n return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","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 _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function _isNativeFunctioLine truncated
src/events.js
+3 -3
View File
@@ -6,10 +6,10 @@ export default class Events {
this.init();
}
proxy(target, name, callback) {
target.addEventListener(name, callback);
proxy(target, name, callback, option = {}) {
target.addEventListener(name, callback, option);
this.destroyEvents.push(() => {
target.removeEventListener(name, callback);
target.removeEventListener(name, callback, option);
});
}
src/index.js
+1 -1
View File
@@ -50,6 +50,7 @@ class Artplayer extends Emitter {
layers: [],
contextmenu: [],
loading: '',
theme: '#1aafff',
lang: navigator.language.toLowerCase()
};
}
@@ -101,7 +102,6 @@ class Artplayer extends Emitter {
this.events.destroy();
this.refs.$container.innerHTML = '';
instances.splice(instances.indexOf(this), 1);
return this;
}
}
src/layers.js
+10
View File
@@ -4,6 +4,16 @@ export default class Layers {
this.art = art;
this.add = this.add.bind(this);
this.art.option.layers.forEach(this.add);
this.init();
}
init() {
const { refs, events: { proxy } } = this.art;
proxy(refs.$layers, 'click', event => {
if (event.path[0] === refs.$layers) {
refs.$video.pause();
}
});
}
add(option, callback) {
src/mask.js
+13 -1
View File
@@ -7,7 +7,19 @@ export default class Mask {
}
init() {
this.art.refs.$mask.appendChild(Icons.play);
const {
option,
refs,
events: { proxy }
} = this.art;
Icons.play.style.backgroundColor = option.theme;
refs.$mask.appendChild(Icons.play);
proxy(refs.$mask, 'click', () => {
refs.$video.play();
this.hide();
});
}
show() {
src/style/index.scss
+1 -1
View File
@@ -51,13 +51,13 @@
cursor: pointer;
.art-icon-play {
opacity: .8;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50px;
background: #1aafff;
}
}
src/utils/verification.js
+5
View File
@@ -70,4 +70,9 @@ export default function verification(option) {
typeof option.loading === 'string',
`'loading' option require 'string' type, but got '${typeof option.loading}'.`
);
errorHandle(
typeof option.theme === 'string',
`'theme' option require 'string' type, but got '${typeof option.theme}'.`
);
}