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

调整组件嵌入规则

Browse Source
This commit is contained in:
Harvey Zack committed 2018-11-22 16:09:56 +08:00
1 parent 88533c1023
commit 8619fa1b8b
22 files changed
+553 -392
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/docs/README.md
+36 -29
View File
@@ -693,7 +693,7 @@ The style object
Click event
### callback
### mounted
- Type: `Function`
- Default: `undefined`
@@ -756,13 +756,6 @@ The unique index, used for the priority level
The dom element
### style
- Type: `Object`
- Default: `{}`
The style object
### click
- Type: `Function`
@@ -770,7 +763,7 @@ The style object
Click event
### callback
### mounted
- Type: `Function`
- Default: `undefined`
@@ -801,14 +794,14 @@ var art = new Artplayer({
- Type: `Array`
- Default: `[]`
Custom controls, The type of controls is an object
Custom controls, The type of controls is an object or function
### option
- Type: `Object`
- Default: `{}`
Instantiated an object property
An object property if instantiated
#### disable
@@ -824,6 +817,13 @@ Whether to disable
The unique name, used for the class name
#### click
- Type: `function`
- Default: `undefined`
Click event
#### index
- Type: `Number`
@@ -838,32 +838,39 @@ The unique index, used for the priority level
The position where the controller appears: top, left, right
### mounted
- Type: `Function`
- Default: `undefined`
Callback after mounted
### html
- Type: `String`、`Element`
- Default: ``
The dom element
[Run Code](/)
```js
function MyController(option) {
this.option = option;
}
MyController.prototype.apply = function(art, dom) {
dom.innerHTML = this.option.name;
};
var url = 'https://blog.zhw-island.com/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
controls: [
new MyController({
name: 'myControllerLeft',
position: 'left',
index: 40
}),
new MyController({
name: 'myControllerRight',
position: 'right',
index: 10
})
function myController(art) {
return {
name: 'myController',
position: 'right',
index: 10,
html: 'myController',
click: function() {
console.log('myController');
}
}
}
]
});
```
docs/lab/js/artplayer.js
+248 -180
View File
@@ -607,8 +607,8 @@
layers: {
type: 'array',
child: {
disable: 'boolean',
type: 'object|function',
disable: 'boolean',
name: 'string',
index: 'number',
html: validElement,
@@ -619,8 +619,8 @@
contextmenu: {
type: 'array',
child: {
disable: 'boolean',
type: 'object|function',
disable: 'boolean',
name: 'string',
index: 'number',
html: validElement,
@@ -639,7 +639,7 @@
controls: {
type: 'array',
child: {
type: 'object',
type: 'object|function',
option: {
type: 'object',
child: {
@@ -3868,6 +3868,7 @@
value: function init() {
var _this2 = this;
var option = this.art.option;
this.add(new Progress({
name: 'progress',
disable: false,
@@ -3876,7 +3877,7 @@
}));
this.add(new Thumbnails({
name: 'thumbnails',
disable: !this.art.option.thumbnails.url,
disable: !option.thumbnails.url,
position: 'top',
index: 20
}));
@@ -3900,72 +3901,94 @@
}));
this.add(new Quality({
name: 'quality',
disable: this.art.option.quality.length === 0,
disable: option.quality.length === 0,
position: 'right',
index: 10
}));
this.add(new Screenshot({
name: 'screenshot',
disable: !this.art.option.screenshot,
disable: !option.screenshot,
position: 'right',
index: 20
}));
this.add(new Subtitle({
name: 'subtitle',
disable: !this.art.option.subtitle.url,
disable: !option.subtitle.url,
position: 'right',
index: 30
}));
this.add(new Setting({
name: 'setting',
disable: !this.art.option.setting,
disable: !option.setting,
position: 'right',
index: 40
}));
this.add(new Pip({
name: 'pip',
disable: !this.art.option.pip,
disable: !option.pip,
position: 'right',
index: 50
}));
this.add(new FullscreenWeb({
name: 'fullscreenWeb',
disable: !this.art.option.fullscreenWeb,
disable: !option.fullscreenWeb,
position: 'right',
index: 60
}));
this.add(new Fullscreen({
name: 'fullscreen',
disable: !this.art.option.fullscreen,
disable: !option.fullscreen,
position: 'right',
index: 70
}));
this.art.option.controls.forEach(function (item) {
option.controls.forEach(function (item) {
_this2.add(item);
});
}
}, {
key: "add",
value: function add(control, callback) {
var option = control.option;
value: function add(item, callback) {
var _this3 = this;
if (option && !option.disable) {
var control = typeof item === 'function' ? item(this.art) : item.option;
if (control && !control.disable) {
var proxy = this.art.events.proxy;
id += 1;
var name = option.name || "control".concat(id);
var name = control.name || "control".concat(id);
var $control = document.createElement('div');
$control.classList.value = "art-control art-control-".concat(name);
this.mount(option.position, $control, option.index || id);
this.commonMethod(control, $control);
if (control.apply) {
control.apply(this.art, $control);
if (control.html) {
append($control, control.html);
}
if (control.click) {
proxy($control, 'click', function (event) {
event.preventDefault();
control.click.call(_this3, event);
_this3.art.emit('control:click', $control);
});
}
if (item.apply) {
item.apply(this.art, $control);
}
this.mount(control.position, $control, control.index || id);
if (control.mounted) {
control.mounted($control);
}
if (callback) {
callback($control);
}
this.commonMethod(control, $control);
this[name] = control;
this.art.emit('control:add', $control);
}
}
}, {
@@ -3996,20 +4019,20 @@
}, {
key: "commonMethod",
value: function commonMethod(control, $control) {
var _this3 = this;
var _this4 = this;
Object.defineProperty(control, 'hide', {
value: function value() {
setStyle($control, 'display', 'none');
_this3.art.emit('control:hide', $control);
_this4.art.emit('control:hide', $control);
}
});
Object.defineProperty(control, 'show', {
value: function value() {
setStyle($control, 'display', 'block');
_this3.art.emit('control:show', $control);
_this4.art.emit('control:show', $control);
}
});
}
@@ -4030,93 +4053,124 @@
return Controls;
}();
function playbackRate(art) {
var option = art.option,
i18n = art.i18n,
player = art.player;
return {
disable: !option.playbackRate,
name: 'playbackRate',
index: 10,
html: "\n ".concat(i18n.get('Play speed'), ":\n <span data-rate=\"0.5\">0.5</span>\n <span data-rate=\"0.75\">0.75</span>\n <span data-rate=\"1\" class=\"normal current\">").concat(i18n.get('Normal'), "</span>\n <span data-rate=\"1.25\">1.25</span>\n <span data-rate=\"1.5\">1.5</span>\n <span data-rate=\"2.0\">2.0</span>\n "),
click: function click(event) {
var target = event.target;
var rate = target.dataset.rate;
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;
}
if (rate) {
player.playbackRate(Number(rate));
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 playbackRate(menuOption) {
return function (art) {
var i18n = art.i18n,
player = art.player;
return objectSpread({}, menuOption, {
html: "\n ".concat(i18n.get('Play speed'), ":\n <span data-rate=\"0.5\">0.5</span>\n <span data-rate=\"0.75\">0.75</span>\n <span data-rate=\"1\" class=\"normal current\">").concat(i18n.get('Normal'), "</span>\n <span data-rate=\"1.25\">1.25</span>\n <span data-rate=\"1.5\">1.5</span>\n <span data-rate=\"2.0\">2.0</span>\n "),
click: function click(event) {
var target = event.target;
var rate = target.dataset.rate;
if (rate) {
player.playbackRate(Number(rate));
art.contextmenu.hide();
}
},
mounted: function mounted($menu) {
art.on('playbackRateChange', function (rate) {
var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
return Number(item.dataset.rate) === rate;
});
inverseClass($current, 'current');
});
}
});
};
}
function aspectRatio(menuOption) {
return function (art) {
var i18n = art.i18n,
player = art.player;
return objectSpread({}, menuOption, {
html: "\n ".concat(i18n.get('Aspect ratio'), ":\n <span data-ratio=\"default\" class=\"default current\">").concat(i18n.get('Default'), "</span>\n <span data-ratio=\"4:3\">4:3</span>\n <span data-ratio=\"16:9\">16:9</span>\n "),
click: function click(event) {
var target = event.target;
var ratio = target.dataset.ratio;
if (ratio) {
player.aspectRatio(ratio.split(':'));
art.contextmenu.hide();
}
},
mounted: function mounted($menu) {
art.on('aspectRatioChange', function (ratio) {
var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
return item.dataset.ratio === ratio.join(':');
});
inverseClass($current, 'current');
});
}
});
};
}
function info(menuOption) {
return function (art) {
return objectSpread({}, menuOption, {
html: art.i18n.get('Video info'),
click: function click() {
art.info.show();
art.contextmenu.hide();
}
},
callback: function callback($menu) {
art.on('playbackRateChange', function (rate) {
var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
return Number(item.dataset.rate) === rate;
});
inverseClass($current, 'current');
});
}
});
};
}
function aspectRatio(art) {
var option = art.option,
i18n = art.i18n,
player = art.player;
return {
disable: !option.aspectRatio,
name: 'aspectRatio',
index: 20,
html: "\n ".concat(i18n.get('Aspect ratio'), ":\n <span data-ratio=\"default\" class=\"default current\">").concat(i18n.get('Default'), "</span>\n <span data-ratio=\"4:3\">4:3</span>\n <span data-ratio=\"16:9\">16:9</span>\n "),
click: function click(event) {
var target = event.target;
var ratio = target.dataset.ratio;
function version(menuOption) {
return objectSpread({}, menuOption, {
html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.3</a>'
});
}
if (ratio) {
player.aspectRatio(ratio.split(':'));
function close(menuOption) {
return function (art) {
return objectSpread({}, menuOption, {
html: art.i18n.get('Close'),
click: function click() {
art.contextmenu.hide();
}
},
callback: function callback($menu) {
art.on('aspectRatioChange', function (ratio) {
var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
return item.dataset.ratio === ratio.join(':');
});
inverseClass($current, 'current');
});
}
};
}
function info(art) {
return {
disable: false,
name: 'info',
index: 30,
html: art.i18n.get('Video info'),
click: function click() {
art.info.show();
art.contextmenu.hide();
}
};
}
var version = {
disable: false,
name: 'version',
index: 40,
html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.3</a>'
};
function close(art) {
return {
disable: false,
name: 'close',
index: 50,
html: art.i18n.get('Close'),
click: function click() {
art.contextmenu.hide();
}
});
};
}
@@ -4148,7 +4202,31 @@
$player = _this$art$refs.$player,
$contextmenu = _this$art$refs.$contextmenu,
proxy = _this$art.events.proxy;
option.contextmenu.push(playbackRate, aspectRatio, info, version, close);
this.add(playbackRate({
disable: !option.playbackRate,
name: 'playbackRate',
index: 10
}));
this.add(aspectRatio({
disable: !option.aspectRatio,
name: 'aspectRatio',
index: 20
}));
this.add(info({
disable: false,
name: 'info',
index: 30
}));
this.add(version({
disable: false,
name: 'version',
index: 40
}));
this.add(close({
disable: false,
name: 'close',
index: 50
}));
option.contextmenu.forEach(function (item) {
_this2.add(item);
});
@@ -4173,15 +4251,17 @@
var menu = typeof item === 'function' ? item(this.art) : item;
if (!menu.disable) {
id$1 += 1;
var _this$art2 = this.art,
$contextmenu = _this$art2.refs.$contextmenu,
proxy = _this$art2.events.proxy;
id$1 += 1;
var name = menu.name || "contextmenu".concat(id$1);
var $menu = document.createElement('div');
$menu.classList.value = "art-contextmenu art-contextmenu-".concat(name);
setStyles($menu, menu.style || {});
append($menu, menu.html);
if (menu.html) {
append($menu, menu.html);
}
if (menu.click) {
proxy($menu, 'click', function (event) {
@@ -4193,16 +4273,16 @@
}
insertByIndex($contextmenu, $menu, menu.index || id$1);
this[name] = $menu;
if (menu.callback) {
menu.callback($menu);
if (menu.mounted) {
menu.mounted($menu);
}
if (callback) {
callback($menu);
}
this[name] = $menu;
this.art.emit('contextmenu:add', $menu);
}
}
@@ -5052,15 +5132,18 @@
var layer = typeof item === 'function' ? item(this.art) : item;
if (!layer.disable) {
id$2 += 1;
var _this$art = this.art,
$layers = _this$art.refs.$layers,
proxy = _this$art.events.proxy;
id$2 += 1;
var name = layer.name || "layer".concat(id$2);
var $layer = document.createElement('div');
$layer.classList.value = "art-layer art-layer-".concat(name);
setStyles($layer, layer.style || {});
append($layer, layer.html);
if (layer.html) {
append($layer, layer.html);
}
if (layer.click) {
proxy($layer, 'click', function (event) {
@@ -5072,16 +5155,16 @@
}
insertByIndex($layers, $layer, layer.index || id$2);
this[name] = $layer;
if (item.callback) {
item.callback($layer);
if (item.mounted) {
item.mounted($layer);
}
if (callback) {
callback($layer);
}
this[name] = $layer;
this.art.emit('layers:add', $layer);
}
}
@@ -5208,45 +5291,31 @@
return Mask;
}();
var Flip =
/*#__PURE__*/
function () {
function Flip(option) {
classCallCheck(this, Flip);
this.option = option;
}
createClass(Flip, [{
key: "apply",
value: function apply(art, $setting) {
var _this = this;
var i18n = art.i18n,
proxy = art.events.proxy,
player = art.player;
this.$header = $setting.querySelector('.art-setting-header');
this.$body = $setting.querySelector('.art-setting-body');
this.$btns = append(this.$body, "\n <div class=\"art-setting-btns\">\n <div class=\"art-setting-btn current\">\n <span data-flip=\"normal\">".concat(i18n.get('Normal'), "</span>\n </div>\n <div class=\"art-setting-btn\">\n <span data-flip=\"horizontal\">").concat(i18n.get('Horizontal'), "</span>\n </div>\n <div class=\"art-setting-btn\">\n <span data-flip=\"vertical\">").concat(i18n.get('Vertical'), "</span>\n </div>\n </div>\n "));
proxy(this.$btns, 'click', function (event) {
function flip(settingOption) {
return function (art) {
var i18n = art.i18n,
player = art.player;
return objectSpread({}, settingOption, {
html: "\n <div class=\"art-setting-btns\">\n <div class=\"art-setting-btn current\">\n <span data-flip=\"normal\">".concat(i18n.get('Normal'), "</span>\n </div>\n <div class=\"art-setting-btn\">\n <span data-flip=\"horizontal\">").concat(i18n.get('Horizontal'), "</span>\n </div>\n <div class=\"art-setting-btn\">\n <span data-flip=\"vertical\">").concat(i18n.get('Vertical'), "</span>\n </div>\n </div>\n "),
click: function click(event) {
var target = event.target;
var flip = target.dataset.flip;
if (flip) {
player.flip(flip);
}
});
art.on('flipChange', function (flip) {
var $current = Array.from(_this.$btns.querySelectorAll('span')).find(function (item) {
return item.dataset.flip === flip;
},
mounted: function mounted($setting) {
art.on('flipChange', function (flip) {
var $current = Array.from($setting.querySelectorAll('span')).find(function (item) {
return item.dataset.flip === flip;
});
inverseClass($current.parentElement, 'current');
});
inverseClass($current.parentElement, 'current');
});
}
}]);
return Flip;
}();
}
});
};
}
var id$3 = 0;
@@ -5280,41 +5349,57 @@
proxy($settingClose, 'click', function () {
_this2.hide();
});
this.add(new Flip({
name: 'flip',
title: 'Flip',
this.add(flip({
disable: false,
title: 'Flip',
name: 'flip',
index: 10
}));
}
}, {
key: "add",
value: function add(setting, callback) {
var option = setting.option;
value: function add(item, callback) {
var _this3 = this;
if (option && !option.disable) {
id$3 += 1;
var setting = typeof item === 'function' ? item(this.art) : item;
if (!setting.disable) {
var _this$art2 = this.art,
refs = _this$art2.refs,
i18n = _this$art2.i18n;
var name = option.name || "setting".concat(id$3);
var title = option.title || name;
i18n = _this$art2.i18n,
$settingBody = _this$art2.refs.$settingBody,
proxy = _this$art2.events.proxy;
id$3 += 1;
var name = setting.name || "setting".concat(id$3);
var title = setting.title || name;
var $setting = document.createElement('div');
$setting.setAttribute('class', "art-setting art-setting-".concat(name));
$setting.classList.value = "art-setting art-setting-".concat(name);
append($setting, "<div class=\"art-setting-header\">".concat(i18n.get(title), "</div>"));
append($setting, '<div class="art-setting-body"></div>');
var $settingInner = append($setting, '<div class="art-setting-body"></div>');
if (setting.apply) {
setting.apply(this.art, $setting);
if (setting.html) {
append($settingInner, setting.html);
}
insertByIndex(refs.$settingBody, $setting, option.index || id$3);
this[name] = $setting;
if ($settingInner.click) {
proxy($settingInner, 'click', function (event) {
event.preventDefault();
setting.click.call(_this3, event);
_this3.art.emit('setting:click', $setting);
});
}
insertByIndex($settingBody, $setting, setting.index || id$3);
if (setting.mounted) {
setting.mounted($settingInner);
}
if (callback) {
callback($setting);
callback($settingInner);
}
this[name] = $setting;
this.art.emit('setting:add', $setting);
}
}
@@ -5348,23 +5433,6 @@
return Setting;
}();
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;
var Storage =
/*#__PURE__*/
function () {
docs/lab/js/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/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","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.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/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.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/switchQualityMix.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/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.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.Line truncated
{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/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","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.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/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.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/switchQualityMix.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/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.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/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/src/contextmenu/playbackRate.js",".Line truncated
docs/lab/js/index.js
+13
View File
@@ -94,6 +94,19 @@ var art = new Artplayer({
time: 300,
text: '－－终わり－－'
}
],
controls: [
function (art) {
return {
name: 'myController',
position: 'right',
index: 1,
html: 'myController',
click: function() {
console.log('click myController');
}
}
}
]
});
packages/artplayer-plugin-danmu/src/contextmenuMix.js
+3
View File
@@ -0,0 +1,3 @@
export default function contextmenuMix(art) {
//
}
packages/artplayer-plugin-danmu/src/controlMix.js
+9
View File
@@ -0,0 +1,9 @@
export default class ControlMix {
constructor(option) {
this.option = option;
}
apply(art, $control) {
//
}
}
packages/artplayer-plugin-danmu/src/i18nMix.js
+3
View File
@@ -0,0 +1,3 @@
export default function i18n(art) {
//
}
packages/artplayer-plugin-danmu/src/index.js
+13 -7
View File
@@ -1,10 +1,16 @@
import './style/index.scss';
import './index.scss';
import i18nMix from './i18nMix';
import contextmenuMix from './contextmenuMix';
import settingMix from './settingMix';
import ControlMix from './controlMix';
class ArtplayerPluginDanmu {
constructor() {
console.log(this);
}
function artplayerPluginDanmu(Artplayer) {
const art = Artplayer.prototype;
i18nMix(art);
contextmenuMix(art);
settingMix(art);
ControlMix(art);
}
window.ArtplayerPluginDanmu = ArtplayerPluginDanmu;
export default ArtplayerPluginDanmu;
window.artplayerPluginDanmu = artplayerPluginDanmu;
export default artplayerPluginDanmu;
packages/artplayer-plugin-danmu/src/style/index.scss → packages/artplayer-plugin-danmu/src/index.scss
View File
File renamed without changes.
packages/artplayer-plugin-danmu/src/settingMix.js
+3
View File
@@ -0,0 +1,3 @@
export default function setting(art) {
//
}
packages/artplayer/src/contextmenu/aspectRatio.js
+28 -28
View File
@@ -1,32 +1,32 @@
import { inverseClass } from '../utils';
export default function aspectRatio(art) {
const { option, i18n, player } = art;
return {
disable: !option.aspectRatio,
name: 'aspectRatio',
index: 20,
html: `
${i18n.get('Aspect ratio')}:
<span data-ratio="default" class="default current">${i18n.get('Default')}</span>
<span data-ratio="4:3">4:3</span>
<span data-ratio="16:9">16:9</span>
`,
click: event => {
const { target } = event;
const { ratio } = target.dataset;
if (ratio) {
player.aspectRatio(ratio.split(':'));
art.contextmenu.hide();
}
},
callback: $menu => {
art.on('aspectRatioChange', ratio => {
const $current = Array.from($menu.querySelectorAll('span')).find(
item => item.dataset.ratio === ratio.join(':'),
);
inverseClass($current, 'current');
});
},
export default function aspectRatio(menuOption) {
return art => {
const { i18n, player } = art;
return {
...menuOption,
html: `
${i18n.get('Aspect ratio')}:
<span data-ratio="default" class="default current">${i18n.get('Default')}</span>
<span data-ratio="4:3">4:3</span>
<span data-ratio="16:9">16:9</span>
`,
click: event => {
const { target } = event;
const { ratio } = target.dataset;
if (ratio) {
player.aspectRatio(ratio.split(':'));
art.contextmenu.hide();
}
},
mounted: $menu => {
art.on('aspectRatioChange', ratio => {
const $current = Array.from($menu.querySelectorAll('span')).find(
item => item.dataset.ratio === ratio.join(':'),
);
inverseClass($current, 'current');
});
},
};
};
}
packages/artplayer/src/contextmenu/close.js
+4 -6
View File
@@ -1,11 +1,9 @@
export default function close(art) {
return {
disable: false,
name: 'close',
index: 50,
export default function close(menuOption) {
return art => ({
...menuOption,
html: art.i18n.get('Close'),
click: () => {
art.contextmenu.hide();
},
};
});
}
packages/artplayer/src/contextmenu/index.js
+37 -8
View File
@@ -1,4 +1,4 @@
import { append, insertByIndex, setStyles, setStyle } from '../utils';
import { append, insertByIndex, setStyle } from '../utils';
import playbackRate from './playbackRate';
import aspectRatio from './aspectRatio';
import info from './info';
@@ -22,7 +22,35 @@ export default class Contextmenu {
events: { proxy },
} = this.art;
option.contextmenu.push(playbackRate, aspectRatio, info, version, close);
this.add(playbackRate({
disable: !option.playbackRate,
name: 'playbackRate',
index: 10,
}));
this.add(aspectRatio({
disable: !option.aspectRatio,
name: 'aspectRatio',
index: 20,
}));
this.add(info({
disable: false,
name: 'info',
index: 30,
}));
this.add(version({
disable: false,
name: 'version',
index: 40,
}));
this.add(close({
disable: false,
name: 'close',
index: 50,
}));
option.contextmenu.forEach(item => {
this.add(item);
@@ -44,16 +72,17 @@ export default class Contextmenu {
add(item, callback) {
const menu = typeof item === 'function' ? item(this.art) : item;
if (!menu.disable) {
id += 1;
const {
refs: { $contextmenu },
events: { proxy },
} = this.art;
id += 1;
const name = menu.name || `contextmenu${id}`;
const $menu = document.createElement('div');
$menu.classList.value = `art-contextmenu art-contextmenu-${name}`;
setStyles($menu, menu.style || {});
append($menu, menu.html);
if (menu.html) {
append($menu, menu.html);
}
if (menu.click) {
proxy($menu, 'click', event => {
event.preventDefault();
@@ -62,13 +91,13 @@ export default class Contextmenu {
});
}
insertByIndex($contextmenu, $menu, menu.index || id);
this[name] = $menu;
if (menu.callback) {
menu.callback($menu);
if (menu.mounted) {
menu.mounted($menu);
}
if (callback) {
callback($menu);
}
this[name] = $menu;
this.art.emit('contextmenu:add', $menu);
}
}
packages/artplayer/src/contextmenu/info.js
+4 -6
View File
@@ -1,12 +1,10 @@
export default function info(art) {
return {
disable: false,
name: 'info',
index: 30,
export default function info(menuOption) {
return art => ({
...menuOption,
html: art.i18n.get('Video info'),
click: () => {
art.info.show();
art.contextmenu.hide();
},
};
});
}
packages/artplayer/src/contextmenu/playbackRate.js
+31 -31
View File
@@ -1,35 +1,35 @@
import { inverseClass } from '../utils';
export default function playbackRate(art) {
const { option, i18n, player } = art;
return {
disable: !option.playbackRate,
name: 'playbackRate',
index: 10,
html: `
${i18n.get('Play speed')}:
<span data-rate="0.5">0.5</span>
<span data-rate="0.75">0.75</span>
<span data-rate="1" class="normal current">${i18n.get('Normal')}</span>
<span data-rate="1.25">1.25</span>
<span data-rate="1.5">1.5</span>
<span data-rate="2.0">2.0</span>
`,
click: event => {
const { target } = event;
const { rate } = target.dataset;
if (rate) {
player.playbackRate(Number(rate));
art.contextmenu.hide();
}
},
callback: $menu => {
art.on('playbackRateChange', rate => {
const $current = Array.from($menu.querySelectorAll('span')).find(
item => Number(item.dataset.rate) === rate,
);
inverseClass($current, 'current');
});
},
export default function playbackRate(menuOption) {
return art => {
const { i18n, player } = art;
return {
...menuOption,
html: `
${i18n.get('Play speed')}:
<span data-rate="0.5">0.5</span>
<span data-rate="0.75">0.75</span>
<span data-rate="1" class="normal current">${i18n.get('Normal')}</span>
<span data-rate="1.25">1.25</span>
<span data-rate="1.5">1.5</span>
<span data-rate="2.0">2.0</span>
`,
click: event => {
const { target } = event;
const { rate } = target.dataset;
if (rate) {
player.playbackRate(Number(rate));
art.contextmenu.hide();
}
},
mounted: $menu => {
art.on('playbackRateChange', rate => {
const $current = Array.from($menu.querySelectorAll('span')).find(
item => Number(item.dataset.rate) === rate,
);
inverseClass($current, 'current');
});
},
};
};
}
packages/artplayer/src/contextmenu/version.js
+6 -6
View File
@@ -1,6 +1,6 @@
export default {
disable: false,
name: 'version',
index: 40,
html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>',
};
export default function version(menuOption) {
return {
...menuOption,
html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>',
};
}
packages/artplayer/src/controls/index.js
+36 -18
View File
@@ -1,4 +1,4 @@
import { insertByIndex, setStyle } from '../utils';
import { insertByIndex, setStyle, append } from '../utils';
import Fullscreen from './fullscreen';
import FullscreenWeb from './fullscreenWeb';
import Pip from './pip';
@@ -23,6 +23,7 @@ export default class Controls {
}
init() {
const { option } = this.art;
this.add(
new Progress({
name: 'progress',
@@ -35,7 +36,7 @@ export default class Controls {
this.add(
new Thumbnails({
name: 'thumbnails',
disable: !this.art.option.thumbnails.url,
disable: !option.thumbnails.url,
position: 'top',
index: 20,
}),
@@ -71,7 +72,7 @@ export default class Controls {
this.add(
new Quality({
name: 'quality',
disable: this.art.option.quality.length === 0,
disable: option.quality.length === 0,
position: 'right',
index: 10,
}),
@@ -80,7 +81,7 @@ export default class Controls {
this.add(
new Screenshot({
name: 'screenshot',
disable: !this.art.option.screenshot,
disable: !option.screenshot,
position: 'right',
index: 20,
}),
@@ -89,7 +90,7 @@ export default class Controls {
this.add(
new Subtitle({
name: 'subtitle',
disable: !this.art.option.subtitle.url,
disable: !option.subtitle.url,
position: 'right',
index: 30,
}),
@@ -98,7 +99,7 @@ export default class Controls {
this.add(
new Setting({
name: 'setting',
disable: !this.art.option.setting,
disable: !option.setting,
position: 'right',
index: 40,
}),
@@ -107,7 +108,7 @@ export default class Controls {
this.add(
new Pip({
name: 'pip',
disable: !this.art.option.pip,
disable: !option.pip,
position: 'right',
index: 50,
}),
@@ -116,7 +117,7 @@ export default class Controls {
this.add(
new FullscreenWeb({
name: 'fullscreenWeb',
disable: !this.art.option.fullscreenWeb,
disable: !option.fullscreenWeb,
position: 'right',
index: 60,
}),
@@ -125,33 +126,50 @@ export default class Controls {
this.add(
new Fullscreen({
name: 'fullscreen',
disable: !this.art.option.fullscreen,
disable: !option.fullscreen,
position: 'right',
index: 70,
}),
);
this.art.option.controls.forEach(item => {
option.controls.forEach(item => {
this.add(item);
});
}
add(control, callback) {
const { option } = control;
if (option && !option.disable) {
add(item, callback) {
const control = typeof item === 'function' ? item(this.art) : item.option;
if (control && !control.disable) {
const {
events: { proxy },
} = this.art;
id += 1;
const name = option.name || `control${id}`;
const name = control.name || `control${id}`;
const $control = document.createElement('div');
$control.classList.value = `art-control art-control-${name}`;
this.mount(option.position, $control, option.index || id);
this.commonMethod(control, $control);
if (control.apply) {
control.apply(this.art, $control);
if (control.html) {
append($control, control.html);
}
if (control.click) {
proxy($control, 'click', event => {
event.preventDefault();
control.click.call(this, event);
this.art.emit('control:click', $control);
});
}
if (item.apply) {
item.apply(this.art, $control);
}
this.mount(control.position, $control, control.index || id);
if (control.mounted) {
control.mounted($control);
}
if (callback) {
callback($control);
}
this.commonMethod(control, $control);
this[name] = control;
this.art.emit('control:add', $control);
}
}
packages/artplayer/src/layers.js
+7 -5
View File
@@ -14,16 +14,18 @@ export default class Layers {
add(item, callback) {
const layer = typeof item === 'function' ? item(this.art) : item;
if (!layer.disable) {
id += 1;
const {
refs: { $layers },
events: { proxy },
} = this.art;
id += 1;
const name = layer.name || `layer${id}`;
const $layer = document.createElement('div');
$layer.classList.value = `art-layer art-layer-${name}`;
setStyles($layer, layer.style || {});
append($layer, layer.html);
if (layer.html) {
append($layer, layer.html);
}
if (layer.click) {
proxy($layer, 'click', event => {
event.preventDefault();
@@ -32,13 +34,13 @@ export default class Layers {
});
}
insertByIndex($layers, $layer, layer.index || id);
this[name] = $layer;
if (item.callback) {
item.callback($layer);
if (item.mounted) {
item.mounted($layer);
}
if (callback) {
callback($layer);
}
this[name] = $layer;
this.art.emit('layers:add', $layer);
}
}
packages/artplayer/src/scheme/index.js
+3 -3
View File
@@ -35,8 +35,8 @@ export default {
layers: {
type: 'array',
child: {
disable: 'boolean',
type: 'object|function',
disable: 'boolean',
name: 'string',
index: 'number',
html: validElement,
@@ -47,8 +47,8 @@ export default {
contextmenu: {
type: 'array',
child: {
disable: 'boolean',
type: 'object|function',
disable: 'boolean',
name: 'string',
index: 'number',
html: validElement,
@@ -67,7 +67,7 @@ export default {
controls: {
type: 'array',
child: {
type: 'object',
type: 'object|function',
option: {
type: 'object',
child: {
packages/artplayer/src/setting/flip.js
+34 -42
View File
@@ -1,46 +1,38 @@
import { append, inverseClass } from '../utils';
import { inverseClass } from '../utils';
export default class Flip {
constructor(option) {
this.option = option;
}
apply(art, $setting) {
const {
i18n,
events: { proxy },
player,
} = art;
this.$header = $setting.querySelector('.art-setting-header');
this.$body = $setting.querySelector('.art-setting-body');
this.$btns = append(
this.$body,
`
<div class="art-setting-btns">
<div class="art-setting-btn current">
<span data-flip="normal">${i18n.get('Normal')}</span>
export default function flip(settingOption) {
return art => {
const { i18n, player } = art;
return {
...settingOption,
html: `
<div class="art-setting-btns">
<div class="art-setting-btn current">
<span data-flip="normal">${i18n.get('Normal')}</span>
</div>
<div class="art-setting-btn">
<span data-flip="horizontal">${i18n.get('Horizontal')}</span>
</div>
<div class="art-setting-btn">
<span data-flip="vertical">${i18n.get('Vertical')}</span>
</div>
</div>
<div class="art-setting-btn">
<span data-flip="horizontal">${i18n.get('Horizontal')}</span>
</div>
<div class="art-setting-btn">
<span data-flip="vertical">${i18n.get('Vertical')}</span>
</div>
</div>
`,
);
proxy(this.$btns, 'click', event => {
const { target } = event;
const { flip } = target.dataset;
if (flip) {
player.flip(flip);
}
});
art.on('flipChange', flip => {
const $current = Array.from(this.$btns.querySelectorAll('span')).find(item => item.dataset.flip === flip);
inverseClass($current.parentElement, 'current');
});
}
click: event => {
const { target } = event;
const { flip } = target.dataset;
if (flip) {
player.flip(flip);
}
},
mounted: $setting => {
art.on('flipChange', flip => {
const $current = Array.from($setting.querySelectorAll('span')).find(
item => item.dataset.flip === flip,
);
inverseClass($current.parentElement, 'current');
});
},
};
};
}
packages/artplayer/src/setting/index.js
+34 -22
View File
@@ -1,5 +1,5 @@
import { setStyle, append, insertByIndex } from '../utils';
import Flip from './flip';
import flip from './flip';
let id = 0;
export default class Setting {
@@ -24,35 +24,47 @@ export default class Setting {
this.hide();
});
this.add(
new Flip({
name: 'flip',
title: 'Flip',
disable: false,
index: 10,
}),
);
this.add(flip({
disable: false,
title: 'Flip',
name: 'flip',
index: 10,
}));
}
add(setting, callback) {
const { option } = setting;
if (option && !option.disable) {
add(item, callback) {
const setting = typeof item === 'function' ? item(this.art) : item;
if (!setting.disable) {
const {
i18n,
refs: { $settingBody },
events: { proxy },
} = this.art;
id += 1;
const { refs, i18n } = this.art;
const name = option.name || `setting${id}`;
const title = option.title || name;
const name = setting.name || `setting${id}`;
const title = setting.title || name;
const $setting = document.createElement('div');
$setting.setAttribute('class', `art-setting art-setting-${name}`);
$setting.classList.value = `art-setting art-setting-${name}`;
append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
append($setting, '<div class="art-setting-body"></div>');
if (setting.apply) {
setting.apply(this.art, $setting);
const $settingInner = append($setting, '<div class="art-setting-body"></div>');
if (setting.html) {
append($settingInner , setting.html);
}
if ($settingInner.click) {
proxy($settingInner, 'click', event => {
event.preventDefault();
setting.click.call(this, event);
this.art.emit('setting:click', $setting);
});
}
insertByIndex($settingBody, $setting, setting.index || id);
if (setting.mounted) {
setting.mounted($settingInner);
}
insertByIndex(refs.$settingBody, $setting, option.index || id);
this[name] = $setting;
if (callback) {
callback($setting);
callback($settingInner);
}
this[name] = $setting;
this.art.emit('setting:add', $setting);
}
}
script/creatPlugin.js
View File
Whitespace-only changes.