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

分离菜单函数

Browse Source
This commit is contained in:
Harvey Zack committed 2018-11-07 14:30:28 +08:00
1 parent faa0a15148
commit 21a5085b55
9 files changed
+92 -85
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
@@ -8,7 +8,7 @@
.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;float:left;font-size:12px;height:36px;line-height:36px;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px;padding:7px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel.art-volume-panel-hover{width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-time{padding:0 10px}.artplayer-video-playeLine truncated
.artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:70;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px}
.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:350px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-x:hidden;overflow-y:auto;width:365px;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 35px 12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}
.artplayer-video-player .artplayer-contextmenu{position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-menu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-menu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-menu span.current,.artplayer-video-player .artplayer-contextmenu .art-menu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-menu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu:last-child{border-bottom:none}
.artplayer-video-player .artplayer-contextmenu{display:none;position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-menu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-menu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-menu span.current,.artplayer-video-player .artplayer-contextmenu .art-menu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-menu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu:last-child{border-bottom:none}
.artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}
.artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
.artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
docs/index.html
+10 -2
View File
@@ -41,9 +41,9 @@
},
contextmenu: [
{
html: '自定义菜单 - 天黑请关灯 Σ(っ °Д °;)っ',
html: '自定义菜单1 - 天亮请关灯 Σ(っ °Д °;)っ',
click: function () {
document.body.classList.toggle('dark');
document.body.classList.remove('dark');
this.hide();
}
}
@@ -83,6 +83,14 @@
]
});
app.contextmenu.add({
html: '自定义菜单2 - 天黑请开灯 Σ(っ °Д °;)っ',
click: function () {
document.body.classList.add('dark');
this.hide();
}
});
app.layers.add({
index: 1,
name: 'your-name',
docs/js/artplayer.js
+36 -37
View File
@@ -316,6 +316,21 @@
return parent.lastElementChild;
}
function insertByIndex(parent, child, index) {
var childs = Array.from(parent.children);
child.dataset.index = index;
var nextChild = childs.find(function (item) {
return Number(item.dataset.index) >= Number(index);
});
if (nextChild) {
nextChild.insertAdjacentElement('beforebegin', child);
} else {
append(parent, child);
}
return child;
}
function setStyle(element, key, value) {
element.style[key] = value;
return element;
@@ -430,6 +445,7 @@
clamp: clamp,
getExt: getExt,
append: append,
insertByIndex: insertByIndex,
setStyle: setStyle,
setStyles: setStyles,
secondToTime: secondToTime,
@@ -666,7 +682,7 @@
classCallCheck(this, Template);
var refs = art.refs;
refs.$container.innerHTML = "\n <div class=\"artplayer-video-player\">\n <video class=\"artplayer-video\"></video>\n <div class=\"artplayer-subtitle\"></div>\n <div class=\"artplayer-layers\"></div>\n <div class=\"artplayer-mask\"></div>\n <div class=\"artplayer-bottom\">\n <div class=\"artplayer-progress\"></div>\n <div class=\"artplayer-controls\">\n <div class=\"artplayer-controls-left\"></div>\n <div class=\"artplayer-controls-right\"></div>\n </div>\n </div>\n <div class=\"artplayer-loading\"></div>\n <div class=\"artplayer-notice\">\n <div class=\"artplayer-notice-inner\"></div>\n </div>\n <div class=\"artplayer-setting\">\n <div class=\"artplayer-setting-inner\">\n <div class=\"artplayer-setting-body\"></div>\n <div class=\"artplayer-setting-close\">\xD7</div>\n </div>\n </div>\n <div class=\"artplayer-info\">\n <div class=\"artplayer-info-panel\"></div>\n <div class=\"artplayer-info-close\">[x]</div>\n </div>\n <div class=\"artplayer-pip-header\">\n <div class=\"artplayer-pip-title\"></div>\n <div class=\"artplayer-pip-close\">\xD7</div>\n </div>\n </div>\n ";
refs.$container.innerHTML = "\n <div class=\"artplayer-video-player\">\n <video class=\"artplayer-video\"></video>\n <div class=\"artplayer-subtitle\"></div>\n <div class=\"artplayer-layers\"></div>\n <div class=\"artplayer-mask\"></div>\n <div class=\"artplayer-bottom\">\n <div class=\"artplayer-progress\"></div>\n <div class=\"artplayer-controls\">\n <div class=\"artplayer-controls-left\"></div>\n <div class=\"artplayer-controls-right\"></div>\n </div>\n </div>\n <div class=\"artplayer-loading\"></div>\n <div class=\"artplayer-notice\">\n <div class=\"artplayer-notice-inner\"></div>\n </div>\n <div class=\"artplayer-setting\">\n <div class=\"artplayer-setting-inner\">\n <div class=\"artplayer-setting-body\"></div>\n <div class=\"artplayer-setting-close\">\xD7</div>\n </div>\n </div>\n <div class=\"artplayer-info\">\n <div class=\"artplayer-info-panel\"></div>\n <div class=\"artplayer-info-close\">[x]</div>\n </div>\n <div class=\"artplayer-pip-header\">\n <div class=\"artplayer-pip-title\"></div>\n <div class=\"artplayer-pip-close\">\xD7</div>\n </div>\n <div class=\"artplayer-contextmenu\"></div>\n </div>\n ";
refs.$player = refs.$container.querySelector('.artplayer-video-player');
refs.$video = refs.$container.querySelector('.artplayer-video');
refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
@@ -690,6 +706,7 @@
refs.$pipHeader = refs.$container.querySelector('.artplayer-pip-header');
refs.$pipTitle = refs.$container.querySelector('.artplayer-pip-title');
refs.$pipClose = refs.$container.querySelector('.artplayer-pip-close');
refs.$contextmenu = refs.$container.querySelector('.artplayer-contextmenu');
};
var i18nMap = {
@@ -3966,13 +3983,12 @@
refs = _this$art.refs,
proxy = _this$art.events.proxy;
option.contextmenu.push(playbackRate, aspectRatio, info, version, close);
option.contextmenu.forEach(function (item) {
_this.add(item);
});
proxy(refs.$player, 'contextmenu', function (event) {
event.preventDefault();
if (!refs.$contextmenu) {
_this.creatMenu();
}
_this.show();
_this.setPos(event);
@@ -3984,23 +4000,17 @@
});
}
}, {
key: "creatMenu",
value: function creatMenu() {
key: "add",
value: function add(item) {
var _this2 = this;
var _this$art2 = this.art,
option = _this$art2.option,
refs = _this$art2.refs,
proxy = _this$art2.events.proxy;
refs.$contextmenu = document.createElement('div');
refs.$contextmenu.classList.add('artplayer-contextmenu');
option.contextmenu.filter(function (item) {
return !item.disable;
}).map(function (item) {
if (!item.disable) {
var _this$art2 = this.art,
refs = _this$art2.refs,
proxy = _this$art2.events.proxy;
id$1++;
var menu = typeof item === 'function' ? item(_this2.art) : item;
var menu = typeof item === 'function' ? item(this.art) : item;
var $menu = document.createElement('div');
$menu.dataset.artMenuId = menu.index || id$1;
$menu.setAttribute('class', "art-menu art-menu-".concat(menu.name || id$1));
append($menu, menu.html);
setStyles($menu, menu.style || {});
@@ -4014,14 +4024,9 @@
});
}
_this2["$".concat(menu.name || id$1)] = $menu;
return $menu;
}).sort(function (a, b) {
return Number(a.dataset.artMenuId) - Number(b.dataset.artMenuId);
}).forEach(function (item) {
append(refs.$contextmenu, item);
});
append(refs.$player, refs.$contextmenu);
this["$".concat(menu.name || id$1)] = $menu;
insertByIndex(refs.$contextmenu, $menu, menu.index || id$1);
}
}
}, {
key: "setPos",
@@ -4058,21 +4063,15 @@
key: "hide",
value: function hide() {
var $contextmenu = this.art.refs.$contextmenu;
if ($contextmenu) {
setStyle($contextmenu, 'display', 'none');
this.art.emit('contextmenu:hide', $contextmenu);
}
setStyle($contextmenu, 'display', 'none');
this.art.emit('contextmenu:hide', $contextmenu);
}
}, {
key: "show",
value: function show() {
var $contextmenu = this.art.refs.$contextmenu;
if ($contextmenu) {
setStyle($contextmenu, 'display', 'block');
this.art.emit('contextmenu:show', $contextmenu);
}
setStyle($contextmenu, 'display', 'block');
this.art.emit('contextmenu:show', $contextmenu);
}
}]);
@@ -4536,7 +4535,7 @@
var $layers = this.art.refs.$layers;
id$2++;
var $layer = document.createElement('div');
$layer.setAttribute('data-art-layer-id', id$2);
$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);
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/contextmenu/index.js
+28 -43
View File
@@ -1,4 +1,4 @@
import { append, setStyles, setStyle } from '../utils';
import { append, insertByIndex, setStyles, setStyle } from '../utils';
import playbackRate from './playbackRate';
import aspectRatio from './aspectRatio';
import info from './info';
@@ -23,11 +23,12 @@ export default class Contextmenu {
close
);
option.contextmenu.forEach(item => {
this.add(item);
});
proxy(refs.$player, 'contextmenu', event => {
event.preventDefault();
if (!refs.$contextmenu) {
this.creatMenu();
}
this.show();
this.setPos(event);
});
@@ -39,37 +40,25 @@ export default class Contextmenu {
});
}
creatMenu() {
const { option, refs, events: { proxy } } = this.art;
refs.$contextmenu = document.createElement('div');
refs.$contextmenu.classList.add('artplayer-contextmenu');
option.contextmenu
.filter(item => !item.disable)
.map(item => {
id++;
const menu = typeof item === 'function' ? item(this.art) : item;
const $menu = document.createElement('div');
$menu.dataset.artMenuId = menu.index || id;
$menu.setAttribute('class', `art-menu art-menu-${menu.name || id}`);
append($menu, menu.html);
setStyles($menu, menu.style || {});
if (menu.click) {
proxy($menu, 'click', event => {
event.preventDefault();
menu.click.call(this, event);
this.art.emit('contextmenu:click', $menu);
});
}
this[`$${menu.name || id}`] = $menu;
return $menu;
})
.sort(
(a, b) =>
Number(a.dataset.artMenuId) - Number(b.dataset.artMenuId)
).forEach(item => {
append(refs.$contextmenu, item);
});
append(refs.$player, refs.$contextmenu);
add(item) {
if (!item.disable) {
const { refs, events: { proxy } } = this.art;
id++;
const menu = typeof item === 'function' ? item(this.art) : item;
const $menu = document.createElement('div');
$menu.setAttribute('class', `art-menu art-menu-${menu.name || id}`);
append($menu, menu.html);
setStyles($menu, menu.style || {});
if (menu.click) {
proxy($menu, 'click', event => {
event.preventDefault();
menu.click.call(this, event);
this.art.emit('contextmenu:click', $menu);
});
}
this[`$${menu.name || id}`] = $menu;
insertByIndex(refs.$contextmenu, $menu, menu.index || id);
}
}
setPos(event) {
@@ -95,17 +84,13 @@ export default class Contextmenu {
hide() {
const { refs: { $contextmenu } } = this.art;
if ($contextmenu) {
setStyle($contextmenu, 'display', 'none');
this.art.emit('contextmenu:hide', $contextmenu);
}
setStyle($contextmenu, 'display', 'none');
this.art.emit('contextmenu:hide', $contextmenu);
}
show() {
const { refs: { $contextmenu } } = this.art;
if ($contextmenu) {
setStyle($contextmenu, 'display', 'block');
this.art.emit('contextmenu:show', $contextmenu);
}
setStyle($contextmenu, 'display', 'block');
this.art.emit('contextmenu:show', $contextmenu);
}
}
src/layers.js
+1 -1
View File
@@ -12,7 +12,7 @@ export default class Layers {
const { refs: { $layers } } = this.art;
id++;
const $layer = document.createElement('div');
$layer.setAttribute('data-art-layer-id', id);
$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);
src/style/contextmenu.scss
+1
View File
@@ -1,5 +1,6 @@
.artplayer-video-player {
.artplayer-contextmenu {
display: none;
position: absolute;
z-index: 110;
left: 0;
src/template.js
+2
View File
@@ -32,6 +32,7 @@ export default class Template {
<div class="artplayer-pip-title"></div>
<div class="artplayer-pip-close">×</div>
</div>
<div class="artplayer-contextmenu"></div>
</div>
`;
refs.$player = refs.$container.querySelector('.artplayer-video-player');
@@ -57,5 +58,6 @@ export default class Template {
refs.$pipHeader = refs.$container.querySelector('.artplayer-pip-header');
refs.$pipTitle = refs.$container.querySelector('.artplayer-pip-title');
refs.$pipClose = refs.$container.querySelector('.artplayer-pip-close');
refs.$contextmenu = refs.$container.querySelector('.artplayer-contextmenu');
}
}
src/utils/index.js
+12
View File
@@ -46,6 +46,18 @@ export function append(parent, child) {
return parent.lastElementChild;
}
export function insertByIndex(parent, child, index) {
const childs = Array.from(parent.children);
child.dataset.index = index;
const nextChild = childs.find(item => Number(item.dataset.index) >= Number(index));
if (nextChild) {
nextChild.insertAdjacentElement('beforebegin', child);
} else {
append(parent, child);
}
return child;
}
export function setStyle(element, key, value) {
element.style[key] = value;
return element;