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

分离业务层功能

Browse Source
This commit is contained in:
Harvey Zack committed 2018-11-07 14:55:30 +08:00
1 parent 21a5085b55
commit 365df9924a
5 files changed
+80 -123
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/index.html
+13 -1
View File
@@ -80,6 +80,18 @@
time: 300,
text: '－－终わり－－'
}
],
layers: [
{
index: 1,
name: 'your-name',
html: '<img style="width: 100px" src="./img/your-name.png">',
style: {
'top': '20px',
'left': '20px',
'opacity': '.9'
}
}
]
});
@@ -92,7 +104,7 @@
});
app.layers.add({
index: 1,
index: 2,
name: 'your-name',
html: '<img style="width: 100px" src="./img/your-name.png">',
style: {
docs/js/artplayer.js
+33 -62
View File
@@ -3702,11 +3702,8 @@
classCallCheck(this, Controls);
this.art = art;
this.$map = {};
this.art.on('firstCanplay', function () {
_this.init();
_this.mount();
});
}
@@ -3801,64 +3798,35 @@
var name = option.name || control.constructor.name.toLowerCase() || "control".concat(id);
var $control = document.createElement('div');
$control.setAttribute('class', "art-control art-control-".concat(name));
$control.dataset.controlIndex = option.index || id;
this.commonMethod(control);
(this.$map[option.position] || (this.$map[option.position] = [])).push($control);
this.mount(option.position, $control, option.index || id);
control.apply && control.apply(this.art, $control);
this[name] = control;
}
}
}, {
key: "mount",
value: function mount() {
var _this3 = this;
value: function mount(position, $control, index) {
var _this$art$refs = this.art.refs,
$progress = _this$art$refs.$progress,
$controlsLeft = _this$art$refs.$controlsLeft,
$controlsRight = _this$art$refs.$controlsRight;
Object.keys(this.$map).forEach(function (key) {
_this3.$map[key].sort(function (a, b) {
return Number(a.dataset.controlIndex) - Number(b.dataset.controlIndex);
}).forEach(function ($control) {
switch (key) {
case 'top':
append($progress, $control);
break;
case 'left':
append($controlsLeft, $control);
break;
switch (position) {
case 'top':
insertByIndex($progress, $control, index);
break;
case 'right':
append($controlsRight, $control);
break;
case 'left':
insertByIndex($controlsLeft, $control, index);
break;
default:
break;
}
});
});
}
}, {
key: "commonMethod",
value: function commonMethod(control) {
var _this4 = this;
case 'right':
insertByIndex($controlsRight, $control, index);
break;
Object.defineProperty(control, 'hide', {
value: function value() {
setStyle(control.option.$control, 'display', 'none');
_this4.art.emit('control:hide', control.option.$control);
}
});
Object.defineProperty(control, 'show', {
value: function value() {
setStyle(control.option.$control, 'display', 'block');
_this4.art.emit('control:show', control.option.$control);
}
});
default:
break;
}
}
}, {
key: "show",
@@ -4520,29 +4488,32 @@
/*#__PURE__*/
function () {
function Layers(art) {
var _this = this;
classCallCheck(this, Layers);
this.art = art;
this.add = this.add.bind(this);
this.art.option.layers.filter(function (item) {
return !item.disable;
}).forEach(this.add);
this.art.option.layers.forEach(function (item) {
_this.add(item);
});
}
createClass(Layers, [{
key: "add",
value: function add(option, callback) {
var $layers = this.art.refs.$layers;
id$2++;
var $layer = document.createElement('div');
$layer.dataset.artLayerIndex = option.index || id$2;
$layer.setAttribute('class', "art-layer art-layer-".concat(option.name || id$2));
setStyle($layer, 'z-index', option.index || id$2);
append($layer, option.html);
setStyles($layer, option.style || {});
$layers.appendChild($layer);
this.art.emit('layers:add', $layer);
callback && callback($layer);
value: function add(item, callback) {
if (!item.disable) {
var $layers = this.art.refs.$layers;
id$2++;
var $layer = document.createElement('div');
$layer.setAttribute('class', "art-layer art-layer-".concat(item.name || id$2));
setStyle($layer, 'z-index', item.index || id$2);
append($layer, item.html);
setStyles($layer, item.style || {});
this.art.emit('layers:add', $layer);
callback && callback($layer);
insertByIndex($layers, $layer, item.index || id$2);
}
}
}, {
key: "show",
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/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.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/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../node_modules/option-validator/dist/option-validator.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/mountUrlMix.js","../../src/player/attrInit.js","../../src/player/eventInit.js","../../src/player/playMix.js","../../src/player/pauseMin.js","../../src/player/toggleMix.js","../../src/player/seekMix.js","../../src/player/volumeMix.js","../../src/player/currentTimeMix.js","../../src/player/durationMix.js","../../src/player/switchMix.js","../../src/player/playbackRateMix.js","../../src/player/aspectRatioMix.js","../../src/player/screenshotMix.js","../../node_modules/screenfull/dist/screenfull.js","../../src/player/fullscreenMix.js","../../src/player/fullscreenWebMix.js","../../node_modules/get-size/get-size.js","../../node_modules/ev-emitter/ev-emitter.js","../../node_modules/unipointer/unipointer.js","../../node_modules/unidragger/unidragger.js","../../node_modules/draggabilly/draggabilly.js","../../src/player/pipMix.js","../../src/player/index.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/fullscreen.js","../../src/controls/fullscreenWeb.js","../../src/controls/pip.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/quality.js","../../src/controls/index.js","../../src/contextmenu/playbackRate.js","../../src/contextmenu/aspectRatio.js","../../src/contextmenu/info.js","../../src/contextmenu/version.js","../../src/contextmenu/close.js","../../src/contextmenu/index.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/setting/common.js","../../src/setting/index.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 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","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.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/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../node_modules/option-validator/dist/option-validator.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/mountUrlMix.js","../../src/player/attrInit.js","../../src/player/eventInit.js","../../src/player/playMix.js","../../src/player/pauseMin.js","../../src/player/toggleMix.js","../../src/player/seekMix.js","../../src/player/volumeMix.js","../../src/player/currentTimeMix.js","../../src/player/durationMix.js","../../src/player/switchMix.js","../../src/player/playbackRateMix.js","../../src/player/aspectRatioMix.js","../../src/player/screenshotMix.js","../../node_modules/screenfull/dist/screenfull.js","../../src/player/fullscreenMix.js","../../src/player/fullscreenWebMix.js","../../node_modules/get-size/get-size.js","../../node_modules/ev-emitter/ev-emitter.js","../../node_modules/unipointer/unipointer.js","../../node_modules/unidragger/unidragger.js","../../node_modules/draggabilly/draggabilly.js","../../src/player/pipMix.js","../../src/player/index.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/fullscreen.js","../../src/controls/fullscreenWeb.js","../../src/controls/pip.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/quality.js","../../src/controls/index.js","../../src/contextmenu/playbackRate.js","../../src/contextmenu/aspectRatio.js","../../src/contextmenu/info.js","../../src/contextmenu/version.js","../../src/contextmenu/close.js","../../src/contextmenu/index.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/setting/common.js","../../src/setting/index.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 Line truncated
src/controls/index.js
+16 -45
View File
@@ -1,4 +1,4 @@
import { setStyle, append } from '../utils';
import { insertByIndex } from '../utils';
import Fullscreen from './fullscreen';
import FullscreenWeb from './fullscreenWeb';
import Pip from './pip';
@@ -16,10 +16,8 @@ let id = 0;
export default class Controls {
constructor(art) {
this.art = art;
this.$map = {};
this.art.on('firstCanplay', () => {
this.init();
this.mount();
});
}
@@ -120,54 +118,27 @@ export default class Controls {
const name = option.name || control.constructor.name.toLowerCase() || `control${id}`;
const $control = document.createElement('div');
$control.setAttribute('class', `art-control art-control-${name}`);
$control.dataset.controlIndex = option.index || id;
this.commonMethod(control);
(this.$map[option.position] || (this.$map[option.position] = [])).push($control);
this.mount(option.position, $control, option.index || id);
control.apply && control.apply(this.art, $control);
this[name] = control;
}
}
mount() {
mount(position, $control, index) {
const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
Object.keys(this.$map).forEach(key => {
this.$map[key]
.sort(
(a, b) =>
Number(a.dataset.controlIndex) - Number(b.dataset.controlIndex)
)
.forEach($control => {
switch (key) {
case 'top':
append($progress, $control);
break;
case 'left':
append($controlsLeft, $control);
break;
case 'right':
append($controlsRight, $control);
break;
default:
break;
}
});
});
}
commonMethod(control) {
Object.defineProperty(control, 'hide', {
value: () => {
setStyle(control.option.$control, 'display', 'none');
this.art.emit('control:hide', control.option.$control);
}
});
Object.defineProperty(control, 'show', {
value: () => {
setStyle(control.option.$control, 'display', 'block');
this.art.emit('control:show', control.option.$control);
}
});
switch (position) {
case 'top':
insertByIndex($progress, $control, index);
break;
case 'left':
insertByIndex($controlsLeft, $control, index);
break;
case 'right':
insertByIndex($controlsRight, $control, index);
break;
default:
break;
}
}
show() {
src/layers.js
+17 -14
View File
@@ -1,25 +1,28 @@
import { append, setStyles, setStyle } from './utils';
import { append, setStyles, setStyle, insertByIndex } from './utils';
let id = 0;
export default class Layers {
constructor(art) {
this.art = art;
this.add = this.add.bind(this);
this.art.option.layers.filter(item => !item.disable).forEach(this.add);
this.art.option.layers.forEach(item => {
this.add(item);
});
}
add(option, callback) {
const { refs: { $layers } } = this.art;
id++;
const $layer = document.createElement('div');
$layer.dataset.artLayerIndex = option.index || id;
$layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);
setStyle($layer, 'z-index', option.index || id);
append($layer, option.html);
setStyles($layer, option.style || {});
$layers.appendChild($layer);
this.art.emit('layers:add', $layer);
callback && callback($layer);
add(item, callback) {
if (!item.disable) {
const { refs: { $layers } } = this.art;
id++;
const $layer = document.createElement('div');
$layer.setAttribute('class', `art-layer art-layer-${item.name || id}`);
setStyle($layer, 'z-index', item.index || id);
append($layer, item.html);
setStyles($layer, item.style || {});
this.art.emit('layers:add', $layer);
callback && callback($layer);
insertByIndex($layers, $layer, item.index || id);
}
}
show() {