mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-09 03:17:46 -08:00
分离template
This commit is contained in:
Harvey Zack committed
1 parent
e96146b19f
commit
3fb41eedf7
39 files changed
+277
-256
No files matched your search
@@ -1,17 +1,17 @@
|
||||
.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
|
||||
.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0}
|
||||
.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer}
|
||||
.artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
|
||||
.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
|
||||
.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-mask .art-playBig{position:absolute;right:30px;bottom:65px;opacity:.6}
|
||||
.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:60;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none}
|
||||
.artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
|
||||
.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-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-contextmenu{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-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none}
|
||||
.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.art-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 .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;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}.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:Line truncated
|
||||
.artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
|
||||
.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}
|
||||
.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:300px;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-y:auto;width:100%;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 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-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
|
||||
.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
|
||||
.artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
|
||||
.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
|
||||
.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{display:flex;align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-icon-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}
|
||||
.artplayer-auto-size{display:flex;align-items:center;justify-content:center}
|
||||
.artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
|
||||
|
||||
+159
-146
@@ -747,36 +747,71 @@
|
||||
});
|
||||
};
|
||||
|
||||
var Template = function Template(art) {
|
||||
classCallCheck(this, Template);
|
||||
var Template =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Template(art) {
|
||||
var _this = this;
|
||||
|
||||
var refs = art.refs;
|
||||
refs.$container.innerHTML = "\n <div class=\"artplayer-video-player\">\n <video data-index=\"10\" class=\"artplayer-video\"></video>\n <div data-index=\"20\" class=\"artplayer-subtitle\"></div>\n <div data-index=\"30\" class=\"artplayer-layers\"></div>\n <div data-index=\"40\" class=\"artplayer-mask\"></div>\n <div data-index=\"50\" 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 data-index=\"60\" class=\"artplayer-loading\"></div>\n <div data-index=\"70\" class=\"artplayer-notice\">\n <div class=\"artplayer-notice-inner\"></div>\n </div>\n <div data-index=\"80\" 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 data-index=\"90\" class=\"artplayer-info\">\n <div class=\"artplayer-info-panel\"></div>\n <div class=\"artplayer-info-close\">[x]</div>\n </div>\n <div data-index=\"100\" class=\"artplayer-pip-header\">\n <div class=\"artplayer-pip-title\"></div>\n <div class=\"artplayer-pip-close\">\xD7</div>\n </div>\n <div data-index=\"110\" 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');
|
||||
refs.$bottom = refs.$container.querySelector('.artplayer-bottom');
|
||||
refs.$progress = refs.$container.querySelector('.artplayer-progress');
|
||||
refs.$controls = refs.$container.querySelector('.artplayer-controls');
|
||||
refs.$controlsLeft = refs.$container.querySelector('.artplayer-controls-left');
|
||||
refs.$controlsRight = refs.$container.querySelector('.artplayer-controls-right');
|
||||
refs.$layers = refs.$container.querySelector('.artplayer-layers');
|
||||
refs.$loading = refs.$container.querySelector('.artplayer-loading');
|
||||
refs.$notice = refs.$container.querySelector('.artplayer-notice');
|
||||
refs.$noticeInner = refs.$container.querySelector('.artplayer-notice-inner');
|
||||
refs.$mask = refs.$container.querySelector('.artplayer-mask');
|
||||
refs.$setting = refs.$container.querySelector('.artplayer-setting');
|
||||
refs.$settingInner = refs.$container.querySelector('.artplayer-setting-inner');
|
||||
refs.$settingBody = refs.$container.querySelector('.artplayer-setting-body');
|
||||
refs.$settingClose = refs.$container.querySelector('.artplayer-setting-close');
|
||||
refs.$info = refs.$container.querySelector('.artplayer-info');
|
||||
refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel');
|
||||
refs.$infoClose = refs.$container.querySelector('.artplayer-info-close');
|
||||
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');
|
||||
};
|
||||
classCallCheck(this, Template);
|
||||
|
||||
if (art.option.container instanceof Element) {
|
||||
this.$container = this.option.container;
|
||||
} else {
|
||||
this.$container = document.querySelector(art.option.container);
|
||||
}
|
||||
|
||||
if (art.constructor.instances.some(function (art) {
|
||||
return art.template.$container === _this.$container;
|
||||
})) {
|
||||
errorHandle(false, 'Cannot mount multiple instances on the same dom element');
|
||||
}
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
createClass(Template, [{
|
||||
key: "init",
|
||||
value: function init() {
|
||||
this.$container.innerHTML = "\n <div class=\"artplayer-video-player\">\n <video data-index=\"10\" class=\"artplayer-video\"></video>\n <div data-index=\"20\" class=\"artplayer-subtitle\"></div>\n <div data-index=\"30\" class=\"artplayer-layers\"></div>\n <div data-index=\"40\" class=\"artplayer-mask\"></div>\n <div data-index=\"50\" 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 data-index=\"60\" class=\"artplayer-loading\"></div>\n <div data-index=\"70\" class=\"artplayer-notice\">\n <div class=\"artplayer-notice-inner\"></div>\n </div>\n <div data-index=\"80\" 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 data-index=\"90\" class=\"artplayer-info\">\n <div class=\"artplayer-info-panel\"></div>\n <div class=\"artplayer-info-close\">[x]</div>\n </div>\n <div data-index=\"100\" class=\"artplayer-pip-header\">\n <div class=\"artplayer-pip-title\"></div>\n <div class=\"artplayer-pip-close\">\xD7</div>\n </div>\n <div data-index=\"110\" class=\"artplayer-contextmenu\"></div>\n </div>\n ";
|
||||
this.$player = this.$container.querySelector('.artplayer-video-player');
|
||||
this.$video = this.$container.querySelector('.artplayer-video');
|
||||
this.$subtitle = this.$container.querySelector('.artplayer-subtitle');
|
||||
this.$bottom = this.$container.querySelector('.artplayer-bottom');
|
||||
this.$progress = this.$container.querySelector('.artplayer-progress');
|
||||
this.$controls = this.$container.querySelector('.artplayer-controls');
|
||||
this.$controlsLeft = this.$container.querySelector('.artplayer-controls-left');
|
||||
this.$controlsRight = this.$container.querySelector('.artplayer-controls-right');
|
||||
this.$layers = this.$container.querySelector('.artplayer-layers');
|
||||
this.$loading = this.$container.querySelector('.artplayer-loading');
|
||||
this.$notice = this.$container.querySelector('.artplayer-notice');
|
||||
this.$noticeInner = this.$container.querySelector('.artplayer-notice-inner');
|
||||
this.$mask = this.$container.querySelector('.artplayer-mask');
|
||||
this.$setting = this.$container.querySelector('.artplayer-setting');
|
||||
this.$settingInner = this.$container.querySelector('.artplayer-setting-inner');
|
||||
this.$settingBody = this.$container.querySelector('.artplayer-setting-body');
|
||||
this.$settingClose = this.$container.querySelector('.artplayer-setting-close');
|
||||
this.$info = this.$container.querySelector('.artplayer-info');
|
||||
this.$infoPanel = this.$container.querySelector('.artplayer-info-panel');
|
||||
this.$infoClose = this.$container.querySelector('.artplayer-info-close');
|
||||
this.$pipHeader = this.$container.querySelector('.artplayer-pip-header');
|
||||
this.$pipTitle = this.$container.querySelector('.artplayer-pip-title');
|
||||
this.$pipClose = this.$container.querySelector('.artplayer-pip-close');
|
||||
this.$contextmenu = this.$container.querySelector('.artplayer-contextmenu');
|
||||
}
|
||||
}, {
|
||||
key: "destroy",
|
||||
value: function destroy(removeHtml) {
|
||||
if (removeHtml) {
|
||||
this.$container.innerHTML = '';
|
||||
} else {
|
||||
this.refs.$player.classList.add('artplayer-destroy');
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
||||
return Template;
|
||||
}();
|
||||
|
||||
var i18nMap = {
|
||||
'zh-cn': {
|
||||
@@ -884,7 +919,7 @@
|
||||
var _art$option = art.option,
|
||||
type = _art$option.type,
|
||||
customType = _art$option.customType,
|
||||
$video = art.refs.$video;
|
||||
$video = art.template.$video;
|
||||
Object.defineProperty(player, 'returnUrl', {
|
||||
writable: true,
|
||||
value: function value(url) {
|
||||
@@ -911,7 +946,7 @@
|
||||
|
||||
function attrInit(art, player) {
|
||||
var option = art.option,
|
||||
$video = art.refs.$video;
|
||||
$video = art.template.$video;
|
||||
Object.keys(option.moreVideoAttr).forEach(function (key) {
|
||||
$video[key] = option.moreVideoAttr[key];
|
||||
});
|
||||
@@ -940,9 +975,9 @@
|
||||
function eventInit(art, player) {
|
||||
var option = art.option,
|
||||
proxy = art.events.proxy,
|
||||
_art$refs = art.refs,
|
||||
$player = _art$refs.$player,
|
||||
$video = _art$refs.$video,
|
||||
_art$template = art.template,
|
||||
$player = _art$template.$player,
|
||||
$video = _art$template.$video,
|
||||
i18n = art.i18n,
|
||||
notice = art.notice;
|
||||
var firstCanplay = false;
|
||||
@@ -1061,7 +1096,7 @@
|
||||
}
|
||||
|
||||
function playMix(art, player) {
|
||||
var $video = art.refs.$video,
|
||||
var $video = art.template.$video,
|
||||
i18n = art.i18n,
|
||||
notice = art.notice,
|
||||
mutex = art.option.mutex;
|
||||
@@ -1091,7 +1126,7 @@
|
||||
}
|
||||
|
||||
function pauseMin(art, player) {
|
||||
var $video = art.refs.$video,
|
||||
var $video = art.template.$video,
|
||||
i18n = art.i18n,
|
||||
notice = art.notice;
|
||||
Object.defineProperty(player, 'pause', {
|
||||
@@ -1133,7 +1168,7 @@
|
||||
}
|
||||
|
||||
function volumeMix(art, player) {
|
||||
var $video = art.refs.$video,
|
||||
var $video = art.template.$video,
|
||||
i18n = art.i18n,
|
||||
notice = art.notice,
|
||||
storage = art.storage;
|
||||
@@ -1168,10 +1203,10 @@
|
||||
function currentTimeMix(art, player) {
|
||||
Object.defineProperty(player, 'currentTime', {
|
||||
get: function get() {
|
||||
return art.refs.$video.currentTime || 0;
|
||||
return art.template.$video.currentTime || 0;
|
||||
},
|
||||
set: function set(currentTime) {
|
||||
art.refs.$video.currentTime = currentTime;
|
||||
art.template.$video.currentTime = currentTime;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1179,7 +1214,7 @@
|
||||
function durationMix(art, player) {
|
||||
Object.defineProperty(player, 'duration', {
|
||||
get: function get() {
|
||||
return art.refs.$video.duration || 0;
|
||||
return art.template.$video.duration || 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1213,9 +1248,9 @@
|
||||
}
|
||||
|
||||
function playbackRateMix(art, player) {
|
||||
var _art$refs = art.refs,
|
||||
$video = _art$refs.$video,
|
||||
$player = _art$refs.$player,
|
||||
var _art$template = art.template,
|
||||
$video = _art$template.$video,
|
||||
$player = _art$template.$player,
|
||||
i18n = art.i18n,
|
||||
notice = art.notice;
|
||||
Object.defineProperty(player, 'playbackRateState', {
|
||||
@@ -1260,9 +1295,9 @@
|
||||
}
|
||||
|
||||
function aspectRatioMix(art, player) {
|
||||
var _art$refs = art.refs,
|
||||
$video = _art$refs.$video,
|
||||
$player = _art$refs.$player,
|
||||
var _art$template = art.template,
|
||||
$video = _art$template.$video,
|
||||
$player = _art$template.$player,
|
||||
i18n = art.i18n,
|
||||
notice = art.notice;
|
||||
Object.defineProperty(player, 'aspectRatioState', {
|
||||
@@ -1335,7 +1370,7 @@
|
||||
function screenshotMix(art, player) {
|
||||
var option = art.option,
|
||||
notice = art.notice,
|
||||
$video = art.refs.$video;
|
||||
$video = art.template.$video;
|
||||
|
||||
function captureFrame() {
|
||||
var canvas = document.createElement('canvas');
|
||||
@@ -1539,7 +1574,7 @@
|
||||
function fullscreenMix(art, player) {
|
||||
var notice = art.notice,
|
||||
destroyEvents = art.events.destroyEvents,
|
||||
$player = art.refs.$player;
|
||||
$player = art.template.$player;
|
||||
|
||||
var screenfullChange = function screenfullChange() {
|
||||
art.emit('fullscreen', screenfull.isFullscreen);
|
||||
@@ -1593,7 +1628,7 @@
|
||||
}
|
||||
|
||||
function fullscreenWebMix(art, player) {
|
||||
var $player = art.refs.$player;
|
||||
var $player = art.template.$player;
|
||||
Object.defineProperty(player, 'fullscreenWebState', {
|
||||
get: function get() {
|
||||
return $player.classList.contains('artplayer-web-fullscreen');
|
||||
@@ -2952,7 +2987,7 @@
|
||||
|
||||
function nativePip(art, player) {
|
||||
var notice = art.notice,
|
||||
$video = art.refs.$video,
|
||||
$video = art.template.$video,
|
||||
proxy = art.events.proxy;
|
||||
$video.disablePictureInPicture = false;
|
||||
Object.defineProperty(player, 'pipState', {
|
||||
@@ -2996,10 +3031,10 @@
|
||||
function customPip(art, player) {
|
||||
var option = art.option,
|
||||
i18n = art.i18n,
|
||||
_art$refs = art.refs,
|
||||
$player = _art$refs.$player,
|
||||
$pipClose = _art$refs.$pipClose,
|
||||
$pipTitle = _art$refs.$pipTitle,
|
||||
_art$template = art.template,
|
||||
$player = _art$template.$player,
|
||||
$pipClose = _art$template.$pipClose,
|
||||
$pipTitle = _art$template.$pipTitle,
|
||||
_art$events = art.events,
|
||||
destroyEvents = _art$events.destroyEvents,
|
||||
proxy = _art$events.proxy;
|
||||
@@ -3078,7 +3113,7 @@
|
||||
function seekMix$1(art, player) {
|
||||
Object.defineProperty(player, 'loaded', {
|
||||
get: function get() {
|
||||
return art.refs.$video.buffered.length ? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) / art.refs.$video.duration : 0;
|
||||
return art.template.$video.buffered.length ? art.template.$video.buffered.end(art.template.$video.buffered.length - 1) / art.template.$video.duration : 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -3086,16 +3121,16 @@
|
||||
function seekMix$2(art, player) {
|
||||
Object.defineProperty(player, 'played', {
|
||||
get: function get() {
|
||||
return art.refs.$video.currentTime / art.refs.$video.duration;
|
||||
return art.template.$video.currentTime / art.template.$video.duration;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function resizeMix(art, player) {
|
||||
var _art$refs = art.refs,
|
||||
$container = _art$refs.$container,
|
||||
$player = _art$refs.$player,
|
||||
$video = _art$refs.$video;
|
||||
var _art$template = art.template,
|
||||
$container = _art$template.$container,
|
||||
$player = _art$template.$player,
|
||||
$video = _art$template.$video;
|
||||
Object.defineProperty(player, 'autoSizeState', {
|
||||
get: function get() {
|
||||
return $container.classList.contains('artplayer-auto-size');
|
||||
@@ -3141,20 +3176,20 @@
|
||||
function flipMix(art, player) {
|
||||
Object.defineProperty(player, 'flipState', {
|
||||
get: function get() {
|
||||
return art.refs.$player.dataset.flip;
|
||||
return art.template.$player.dataset.flip;
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'flip', {
|
||||
value: function value(flip) {
|
||||
var flipList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(flipList.includes(flip), "'flip' only accept ".concat(flipList.toString(), " as parameters"));
|
||||
art.refs.$player.dataset.flip = flip;
|
||||
art.template.$player.dataset.flip = flip;
|
||||
art.emit('flipChange', flip);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'flipRemove', {
|
||||
value: function value() {
|
||||
delete art.refs.$player.dataset.flip;
|
||||
delete art.template.$player.dataset.flip;
|
||||
art.emit('flipRemove');
|
||||
}
|
||||
});
|
||||
@@ -3581,7 +3616,7 @@
|
||||
}
|
||||
|
||||
function getPosFromEvent(art, event) {
|
||||
var $progress = art.refs.$progress,
|
||||
var $progress = art.template.$progress,
|
||||
player = art.player;
|
||||
|
||||
var _$progress$getBoundin = $progress.getBoundingClientRect(),
|
||||
@@ -3866,7 +3901,7 @@
|
||||
return function (art) {
|
||||
return objectSpread({}, controlOption, {
|
||||
mounted: function mounted($control) {
|
||||
var $progress = art.refs.$progress,
|
||||
var $progress = art.template.$progress,
|
||||
_art$events = art.events,
|
||||
proxy = _art$events.proxy,
|
||||
loadImg = _art$events.loadImg;
|
||||
@@ -4074,10 +4109,10 @@
|
||||
key: "add",
|
||||
value: function add(item, callback) {
|
||||
var option = typeof item === 'function' ? item(this.art) : item;
|
||||
var _this$art$refs = this.art.refs,
|
||||
$progress = _this$art$refs.$progress,
|
||||
$controlsLeft = _this$art$refs.$controlsLeft,
|
||||
$controlsRight = _this$art$refs.$controlsRight;
|
||||
var _this$art$template = this.art.template,
|
||||
$progress = _this$art$template.$progress,
|
||||
$controlsLeft = _this$art$template.$controlsLeft,
|
||||
$controlsRight = _this$art$template.$controlsRight;
|
||||
var parent;
|
||||
|
||||
switch (option.position) {
|
||||
@@ -4104,13 +4139,13 @@
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $player = this.art.refs.$player;
|
||||
var $player = this.art.template.$player;
|
||||
$player.classList.add('artplayer-controls-show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $player = this.art.refs.$player;
|
||||
var $player = this.art.template.$player;
|
||||
$player.classList.remove('artplayer-controls-show');
|
||||
}
|
||||
}]);
|
||||
@@ -4186,7 +4221,7 @@
|
||||
|
||||
function version(menuOption) {
|
||||
return objectSpread({}, menuOption, {
|
||||
html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.3</a>'
|
||||
html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.4</a>'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -4223,9 +4258,9 @@
|
||||
|
||||
var _this$art = this.art,
|
||||
option = _this$art.option,
|
||||
_this$art$refs = _this$art.refs,
|
||||
$player = _this$art$refs.$player,
|
||||
$contextmenu = _this$art$refs.$contextmenu,
|
||||
_this$art$template = _this$art.template,
|
||||
$player = _this$art$template.$player,
|
||||
$contextmenu = _this$art$template.$contextmenu,
|
||||
proxy = _this$art.events.proxy;
|
||||
this.add(playbackRate({
|
||||
disable: !option.playbackRate,
|
||||
@@ -4271,15 +4306,15 @@
|
||||
}, {
|
||||
key: "add",
|
||||
value: function add(item, callback) {
|
||||
var $contextmenu = this.art.refs.$contextmenu;
|
||||
var $contextmenu = this.art.template.$contextmenu;
|
||||
component(this.art, this, $contextmenu, item, callback, 'contextmenu');
|
||||
}
|
||||
}, {
|
||||
key: "setPos",
|
||||
value: function setPos(event) {
|
||||
var _this$art$refs2 = this.art.refs,
|
||||
$player = _this$art$refs2.$player,
|
||||
$contextmenu = _this$art$refs2.$contextmenu;
|
||||
var _this$art$template2 = this.art.template,
|
||||
$player = _this$art$template2.$player,
|
||||
$contextmenu = _this$art$template2.$contextmenu;
|
||||
var mouseX = event.clientX;
|
||||
var mouseY = event.clientY;
|
||||
|
||||
@@ -4310,14 +4345,14 @@
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $contextmenu = this.art.refs.$contextmenu;
|
||||
var $contextmenu = this.art.template.$contextmenu;
|
||||
setStyle($contextmenu, 'display', 'none');
|
||||
this.art.emit('contextmenu:hide', $contextmenu);
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $contextmenu = this.art.refs.$contextmenu;
|
||||
var $contextmenu = this.art.template.$contextmenu;
|
||||
setStyle($contextmenu, 'display', 'block');
|
||||
this.art.emit('contextmenu:show', $contextmenu);
|
||||
}
|
||||
@@ -4342,7 +4377,7 @@
|
||||
var _this = this;
|
||||
|
||||
var _this$art = this.art,
|
||||
$infoClose = _this$art.refs.$infoClose,
|
||||
$infoClose = _this$art.template.$infoClose,
|
||||
proxy = _this$art.events.proxy;
|
||||
proxy($infoClose, 'click', function () {
|
||||
_this.hide();
|
||||
@@ -4351,9 +4386,9 @@
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var _this$art$refs = this.art.refs,
|
||||
$info = _this$art$refs.$info,
|
||||
$infoPanel = _this$art$refs.$infoPanel;
|
||||
var _this$art$template = this.art.template,
|
||||
$info = _this$art$template.$info,
|
||||
$infoPanel = _this$art$template.$infoPanel;
|
||||
setStyle($info, 'display', 'block');
|
||||
|
||||
if (!$infoPanel.innerHTML) {
|
||||
@@ -4368,7 +4403,7 @@
|
||||
key: "creatInfo",
|
||||
value: function creatInfo() {
|
||||
var infoHtml = [];
|
||||
infoHtml.push("\n <div class=\"art-info-item \">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">1.0.3</div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item \">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">1.0.4</div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\">".concat(this.art.option.url, "</div>\n </div>\n "));
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n ");
|
||||
@@ -4379,9 +4414,9 @@
|
||||
}, {
|
||||
key: "readInfo",
|
||||
value: function readInfo() {
|
||||
var _this$art$refs2 = this.art.refs,
|
||||
$infoPanel = _this$art$refs2.$infoPanel,
|
||||
$video = _this$art$refs2.$video;
|
||||
var _this$art$template2 = this.art.template,
|
||||
$infoPanel = _this$art$template2.$infoPanel,
|
||||
$video = _this$art$template2.$video;
|
||||
var types = Array.from($infoPanel.querySelectorAll('[data-video]'));
|
||||
types.forEach(function (item) {
|
||||
var value = $video[item.dataset.video];
|
||||
@@ -4403,7 +4438,7 @@
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $info = this.art.refs.$info;
|
||||
var $info = this.art.template.$info;
|
||||
setStyle($info, 'display', 'none');
|
||||
clearTimeout(this.timer);
|
||||
this.art.emit('info:hide', $info);
|
||||
@@ -4436,15 +4471,15 @@
|
||||
var _this$art = this.art,
|
||||
proxy = _this$art.events.proxy,
|
||||
subtitle = _this$art.option.subtitle,
|
||||
_this$art$refs = _this$art.refs,
|
||||
$video = _this$art$refs.$video,
|
||||
$subtitle = _this$art$refs.$subtitle;
|
||||
_this$art$template = _this$art.template,
|
||||
$video = _this$art$template.$video,
|
||||
$subtitle = _this$art$template.$subtitle;
|
||||
setStyles($subtitle, subtitle.style || {});
|
||||
var $track = document.createElement('track');
|
||||
$track.default = true;
|
||||
$track.kind = 'metadata';
|
||||
$video.appendChild($track);
|
||||
this.art.refs.$track = $track;
|
||||
this.art.template.$track = $track;
|
||||
this.load(subtitle.url).then(function (url) {
|
||||
$track.src = url;
|
||||
|
||||
@@ -4501,7 +4536,7 @@
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var _this$art2 = this.art,
|
||||
$subtitle = _this$art2.refs.$subtitle,
|
||||
$subtitle = _this$art2.template.$subtitle,
|
||||
i18n = _this$art2.i18n,
|
||||
notice = _this$art2.notice;
|
||||
setStyle($subtitle, 'display', 'block');
|
||||
@@ -4513,7 +4548,7 @@
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var _this$art3 = this.art,
|
||||
$subtitle = _this$art3.refs.$subtitle,
|
||||
$subtitle = _this$art3.template.$subtitle,
|
||||
i18n = _this$art3.i18n,
|
||||
notice = _this$art3.notice;
|
||||
setStyle($subtitle, 'display', 'none');
|
||||
@@ -4535,7 +4570,7 @@
|
||||
value: function _switch(url) {
|
||||
var _this2 = this;
|
||||
|
||||
var $track = this.art.refs.$track;
|
||||
var $track = this.art.template.$track;
|
||||
errorHandle($track, 'You need to initialize the subtitle option first.');
|
||||
this.load(url).then(function (url) {
|
||||
$track.src = url;
|
||||
@@ -4549,7 +4584,7 @@
|
||||
}();
|
||||
|
||||
function clickInit(art, events) {
|
||||
var $player = art.refs.$player;
|
||||
var $player = art.template.$player;
|
||||
events.proxy(document, ['click', 'contextmenu'], function (event) {
|
||||
if (event.composedPath().indexOf($player) > -1) {
|
||||
art.isFocus = true;
|
||||
@@ -4561,7 +4596,7 @@
|
||||
}
|
||||
|
||||
function hoverInit(art, events) {
|
||||
var $player = art.refs.$player;
|
||||
var $player = art.template.$player;
|
||||
events.hover($player, function () {
|
||||
$player.classList.add('artplayer-hover');
|
||||
art.emit('hoverenter');
|
||||
@@ -4572,9 +4607,9 @@
|
||||
}
|
||||
|
||||
function mousemoveInitInit(art, events) {
|
||||
var _art$refs = art.refs,
|
||||
$player = _art$refs.$player,
|
||||
$video = _art$refs.$video;
|
||||
var _art$template = art.template,
|
||||
$player = _art$template.$player,
|
||||
$video = _art$template.$video;
|
||||
var autoHide = debounce(function () {
|
||||
$player.classList.add('artplayer-hide-cursor');
|
||||
$player.classList.remove('artplayer-hover');
|
||||
@@ -4855,7 +4890,7 @@
|
||||
|
||||
function resizeInit(art, events) {
|
||||
var option = art.option,
|
||||
$player = art.refs.$player;
|
||||
$player = art.template.$player;
|
||||
var resizeObserver = new ResizeObserver_2(function () {
|
||||
sleep().then(function () {
|
||||
if (option.autoSize) {
|
||||
@@ -4877,7 +4912,7 @@
|
||||
}
|
||||
|
||||
function doubleClickInit(art, events) {
|
||||
var $video = art.refs.$video;
|
||||
var $video = art.template.$video;
|
||||
events.proxy($video, 'dblclick', function () {
|
||||
art.player.fullscreenToggle();
|
||||
art.emit('dblclick');
|
||||
@@ -5060,20 +5095,20 @@
|
||||
createClass(Layers, [{
|
||||
key: "add",
|
||||
value: function add(item, callback) {
|
||||
var $layers = this.art.refs.$layers;
|
||||
var $layers = this.art.template.$layers;
|
||||
component(this.art, this, $layers, item, callback, 'layer');
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $layers = this.art.refs.$layers;
|
||||
var $layers = this.art.template.$layers;
|
||||
setStyle($layers, 'display', 'block');
|
||||
this.art.emit('layers:show', $layers);
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $layers = this.art.refs.$layers;
|
||||
var $layers = this.art.template.$layers;
|
||||
setStyle($layers, 'display', 'none');
|
||||
this.art.emit('layers:hide', $layers);
|
||||
}
|
||||
@@ -5090,21 +5125,21 @@
|
||||
|
||||
this.art = art;
|
||||
var option = art.option,
|
||||
$loading = art.refs.$loading;
|
||||
$loading = art.template.$loading;
|
||||
append($loading, option.icons.loading || icons.loading);
|
||||
}
|
||||
|
||||
createClass(Loading, [{
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $loading = this.art.refs.$loading;
|
||||
var $loading = this.art.template.$loading;
|
||||
setStyle($loading, 'display', 'none');
|
||||
this.art.emit('loading:hide', $loading);
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $loading = this.art.refs.$loading;
|
||||
var $loading = this.art.template.$loading;
|
||||
setStyle($loading, 'display', 'flex');
|
||||
this.art.emit('loading:show', $loading);
|
||||
}
|
||||
@@ -5130,9 +5165,9 @@
|
||||
|
||||
var autoHide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
||||
var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
|
||||
var _this$art$refs = this.art.refs,
|
||||
$notice = _this$art$refs.$notice,
|
||||
$noticeInner = _this$art$refs.$noticeInner;
|
||||
var _this$art$template = this.art.template,
|
||||
$notice = _this$art$template.$notice,
|
||||
$noticeInner = _this$art$template.$noticeInner;
|
||||
setStyle($notice, 'display', 'block');
|
||||
$noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
|
||||
|
||||
@@ -5148,7 +5183,7 @@
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $notice = this.art.refs.$notice;
|
||||
var $notice = this.art.template.$notice;
|
||||
setStyle($notice, 'display', 'none');
|
||||
this.art.emit('notice:hide', $notice);
|
||||
}
|
||||
@@ -5165,7 +5200,7 @@
|
||||
|
||||
this.art = art;
|
||||
var option = art.option,
|
||||
$mask = art.refs.$mask;
|
||||
$mask = art.template.$mask;
|
||||
var $playBig = append($mask, '<div class="art-playBig"></div>');
|
||||
append($playBig, option.icons.playBig || icons.playBig);
|
||||
}
|
||||
@@ -5173,14 +5208,14 @@
|
||||
createClass(Mask, [{
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $mask = this.art.refs.$mask;
|
||||
var $mask = this.art.template.$mask;
|
||||
setStyle($mask, 'display', 'flex');
|
||||
this.art.emit('mask:show', $mask);
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $mask = this.art.refs.$mask;
|
||||
var $mask = this.art.template.$mask;
|
||||
setStyle($mask, 'display', 'none');
|
||||
this.art.emit('mask:show', $mask);
|
||||
}
|
||||
@@ -5240,7 +5275,7 @@
|
||||
var _this2 = this;
|
||||
|
||||
var _this$art = this.art,
|
||||
$settingClose = _this$art.refs.$settingClose,
|
||||
$settingClose = _this$art.template.$settingClose,
|
||||
proxy = _this$art.events.proxy;
|
||||
proxy($settingClose, 'click', function () {
|
||||
_this2.hide();
|
||||
@@ -5254,13 +5289,13 @@
|
||||
}, {
|
||||
key: "add",
|
||||
value: function add(item, callback) {
|
||||
var $settingBody = this.art.refs.$settingBody;
|
||||
var $settingBody = this.art.template.$settingBody;
|
||||
component(this.art, this, $settingBody, item, callback, 'setting');
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var $setting = this.art.refs.$setting;
|
||||
var $setting = this.art.template.$setting;
|
||||
setStyle($setting, 'display', 'flex');
|
||||
this.state = true;
|
||||
this.art.emit('setting:show', $setting);
|
||||
@@ -5268,7 +5303,7 @@
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
var $setting = this.art.refs.$setting;
|
||||
var $setting = this.art.template.$setting;
|
||||
setStyle($setting, 'display', 'none');
|
||||
this.state = false;
|
||||
this.art.emit('setting:hide', $setting);
|
||||
@@ -5392,24 +5427,8 @@
|
||||
createClass(Artplayer, [{
|
||||
key: "init",
|
||||
value: function init() {
|
||||
var _this2 = this;
|
||||
|
||||
this.isFocus = false;
|
||||
this.isPlaying = false;
|
||||
this.refs = {};
|
||||
|
||||
if (this.option.container instanceof Element) {
|
||||
this.refs.$container = this.option.container;
|
||||
} else {
|
||||
this.refs.$container = document.querySelector(this.option.container);
|
||||
}
|
||||
|
||||
if (Artplayer.instances.some(function (art) {
|
||||
return art.refs.$container === _this2.refs.$container;
|
||||
})) {
|
||||
errorHandle(false, 'Cannot mount multiple instances on the same dom element');
|
||||
}
|
||||
|
||||
this.whitelist = new Whitelist(this);
|
||||
this.template = new Template(this);
|
||||
this.storage = new Storage(this);
|
||||
@@ -5436,21 +5455,15 @@
|
||||
key: "destroy",
|
||||
value: function destroy() {
|
||||
var removeHtml = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
this.events.destroy();
|
||||
Artplayer.instances.splice(Artplayer.instances.indexOf(this), 1);
|
||||
|
||||
if (removeHtml) {
|
||||
this.refs.$container.innerHTML = '';
|
||||
} else {
|
||||
this.refs.$player.classList.add('artplayer-destroy');
|
||||
}
|
||||
|
||||
this.events.destroy();
|
||||
this.template.destroy(removeHtml);
|
||||
this.emit('destroy');
|
||||
}
|
||||
}], [{
|
||||
key: "version",
|
||||
get: function get() {
|
||||
return '1.0.3';
|
||||
return '1.0.4';
|
||||
}
|
||||
}, {
|
||||
key: "env",
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../../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/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.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/whitelist.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/attachUrlMix.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/src/mse.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.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.jLine truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../../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/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.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/whitelist.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/attachUrlMix.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/src/mse.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.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.jLine truncated
|
||||
@@ -18,7 +18,7 @@ export default class Contextmenu {
|
||||
init() {
|
||||
const {
|
||||
option,
|
||||
refs: { $player, $contextmenu },
|
||||
template: { $player, $contextmenu },
|
||||
events: { proxy },
|
||||
} = this.art;
|
||||
|
||||
@@ -70,12 +70,12 @@ export default class Contextmenu {
|
||||
}
|
||||
|
||||
add(item, callback) {
|
||||
const { $contextmenu } = this.art.refs;
|
||||
const { $contextmenu } = this.art.template;
|
||||
component(this.art, this, $contextmenu, item, callback, 'contextmenu');
|
||||
}
|
||||
|
||||
setPos(event) {
|
||||
const { $player, $contextmenu } = this.art.refs;
|
||||
const { $player, $contextmenu } = this.art.template;
|
||||
const mouseX = event.clientX;
|
||||
const mouseY = event.clientY;
|
||||
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
|
||||
@@ -96,13 +96,13 @@ export default class Contextmenu {
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $contextmenu } = this.art.refs;
|
||||
const { $contextmenu } = this.art.template;
|
||||
setStyle($contextmenu, 'display', 'none');
|
||||
this.art.emit('contextmenu:hide', $contextmenu);
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $contextmenu } = this.art.refs;
|
||||
const { $contextmenu } = this.art.template;
|
||||
setStyle($contextmenu, 'display', 'block');
|
||||
this.art.emit('contextmenu:show', $contextmenu);
|
||||
}
|
||||
|
||||
@@ -139,7 +139,7 @@ export default class Controls {
|
||||
|
||||
add(item, callback) {
|
||||
const option = typeof item === 'function' ? item(this.art) : item;
|
||||
const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
|
||||
const { $progress, $controlsLeft, $controlsRight } = this.art.template;
|
||||
let parent;
|
||||
switch (option.position) {
|
||||
case 'top':
|
||||
@@ -161,12 +161,12 @@ export default class Controls {
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $player } = this.art.refs;
|
||||
const { $player } = this.art.template;
|
||||
$player.classList.add('artplayer-controls-show');
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $player } = this.art.refs;
|
||||
const { $player } = this.art.template;
|
||||
$player.classList.remove('artplayer-controls-show');
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';
|
||||
|
||||
export function getPosFromEvent(art, event) {
|
||||
const {
|
||||
refs: { $progress },
|
||||
template: { $progress },
|
||||
player,
|
||||
} = art;
|
||||
const { left } = $progress.getBoundingClientRect();
|
||||
|
||||
@@ -6,7 +6,7 @@ export default function thumbnails(controlOption) {
|
||||
...controlOption,
|
||||
mounted: $control => {
|
||||
const {
|
||||
refs: { $progress },
|
||||
template: { $progress },
|
||||
events: { proxy, loadImg },
|
||||
} = art;
|
||||
let loading = false;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export default function clickInit(art, events) {
|
||||
const {
|
||||
refs: { $player },
|
||||
template: { $player },
|
||||
} = art;
|
||||
events.proxy(document, ['click', 'contextmenu'], event => {
|
||||
if (event.composedPath().indexOf($player) > -1) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export default function doubleClickInit(art, events) {
|
||||
const {
|
||||
refs: { $video },
|
||||
template: { $video },
|
||||
} = art;
|
||||
events.proxy($video, 'dblclick', () => {
|
||||
art.player.fullscreenToggle();
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export default function hoverInit(art, events) {
|
||||
const {
|
||||
refs: { $player },
|
||||
template: { $player },
|
||||
} = art;
|
||||
events.hover(
|
||||
$player,
|
||||
|
||||
@@ -2,7 +2,7 @@ import { debounce } from '../utils';
|
||||
|
||||
export default function mousemoveInitInit(art, events) {
|
||||
const {
|
||||
refs: { $player, $video },
|
||||
template: { $player, $video },
|
||||
} = art;
|
||||
|
||||
const autoHide = debounce(() => {
|
||||
|
||||
@@ -4,7 +4,7 @@ import { sleep } from '../utils';
|
||||
export default function resizeInit(art, events) {
|
||||
const {
|
||||
option,
|
||||
refs: { $player },
|
||||
template: { $player },
|
||||
} = art;
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
sleep().then(() => {
|
||||
|
||||
@@ -109,18 +109,7 @@ class Artplayer extends Emitter {
|
||||
init() {
|
||||
this.isFocus = false;
|
||||
this.isPlaying = false;
|
||||
this.refs = {};
|
||||
|
||||
if (this.option.container instanceof Element) {
|
||||
this.refs.$container = this.option.container;
|
||||
} else {
|
||||
this.refs.$container = document.querySelector(this.option.container);
|
||||
}
|
||||
|
||||
if (Artplayer.instances.some(art => art.refs.$container === this.refs.$container)) {
|
||||
utils.errorHandle(false, 'Cannot mount multiple instances on the same dom element');
|
||||
}
|
||||
|
||||
|
||||
this.whitelist = new Whitelist(this);
|
||||
this.template = new Template(this);
|
||||
this.storage = new Storage(this);
|
||||
@@ -146,13 +135,9 @@ class Artplayer extends Emitter {
|
||||
}
|
||||
|
||||
destroy(removeHtml = false) {
|
||||
this.events.destroy();
|
||||
Artplayer.instances.splice(Artplayer.instances.indexOf(this), 1);
|
||||
if (removeHtml) {
|
||||
this.refs.$container.innerHTML = '';
|
||||
} else {
|
||||
this.refs.$player.classList.add('artplayer-destroy');
|
||||
}
|
||||
this.events.destroy();
|
||||
this.template.destroy(removeHtml);
|
||||
this.emit('destroy');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ export default class Info {
|
||||
|
||||
init() {
|
||||
const {
|
||||
refs: { $infoClose },
|
||||
template: { $infoClose },
|
||||
events: { proxy },
|
||||
} = this.art;
|
||||
proxy($infoClose, 'click', () => {
|
||||
@@ -17,7 +17,7 @@ export default class Info {
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $info, $infoPanel } = this.art.refs;
|
||||
const { $info, $infoPanel } = this.art.template;
|
||||
setStyle($info, 'display', 'block');
|
||||
if (!$infoPanel.innerHTML) {
|
||||
append($infoPanel, this.creatInfo());
|
||||
@@ -78,7 +78,7 @@ export default class Info {
|
||||
}
|
||||
|
||||
readInfo() {
|
||||
const { $infoPanel, $video } = this.art.refs;
|
||||
const { $infoPanel, $video } = this.art.template;
|
||||
const types = Array.from($infoPanel.querySelectorAll('[data-video]'));
|
||||
types.forEach(item => {
|
||||
const value = $video[item.dataset.video];
|
||||
@@ -95,7 +95,7 @@ export default class Info {
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $info } = this.art.refs;
|
||||
const { $info } = this.art.template;
|
||||
setStyle($info, 'display', 'none');
|
||||
clearTimeout(this.timer);
|
||||
this.art.emit('info:hide', $info);
|
||||
|
||||
@@ -12,18 +12,18 @@ export default class Layers {
|
||||
}
|
||||
|
||||
add(item, callback) {
|
||||
const { $layers } = this.art.refs;
|
||||
const { $layers } = this.art.template;
|
||||
component(this.art, this, $layers, item, callback, 'layer');
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $layers } = this.art.refs;
|
||||
const { $layers } = this.art.template;
|
||||
setStyle($layers, 'display', 'block');
|
||||
this.art.emit('layers:show', $layers);
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $layers } = this.art.refs;
|
||||
const { $layers } = this.art.template;
|
||||
setStyle($layers, 'display', 'none');
|
||||
this.art.emit('layers:hide', $layers);
|
||||
}
|
||||
|
||||
@@ -6,19 +6,19 @@ export default class Loading {
|
||||
this.art = art;
|
||||
const {
|
||||
option,
|
||||
refs: { $loading },
|
||||
template: { $loading },
|
||||
} = art;
|
||||
append($loading, option.icons.loading || icons.loading);
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $loading } = this.art.refs;
|
||||
const { $loading } = this.art.template;
|
||||
setStyle($loading, 'display', 'none');
|
||||
this.art.emit('loading:hide', $loading);
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $loading } = this.art.refs;
|
||||
const { $loading } = this.art.template;
|
||||
setStyle($loading, 'display', 'flex');
|
||||
this.art.emit('loading:show', $loading);
|
||||
}
|
||||
|
||||
@@ -6,20 +6,20 @@ export default class Mask {
|
||||
this.art = art;
|
||||
const {
|
||||
option,
|
||||
refs: { $mask },
|
||||
template: { $mask },
|
||||
} = art;
|
||||
const $playBig = append($mask, '<div class="art-playBig"></div>');
|
||||
append($playBig, option.icons.playBig || icons.playBig);
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $mask } = this.art.refs;
|
||||
const { $mask } = this.art.template;
|
||||
setStyle($mask, 'display', 'flex');
|
||||
this.art.emit('mask:show', $mask);
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $mask } = this.art.refs;
|
||||
const { $mask } = this.art.template;
|
||||
setStyle($mask, 'display', 'none');
|
||||
this.art.emit('mask:show', $mask);
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ export default class Notice {
|
||||
}
|
||||
|
||||
show(msg, autoHide = true, time = 1000) {
|
||||
const { $notice, $noticeInner } = this.art.refs;
|
||||
const { $notice, $noticeInner } = this.art.template;
|
||||
setStyle($notice, 'display', 'block');
|
||||
$noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
|
||||
if (autoHide) {
|
||||
@@ -20,7 +20,7 @@ export default class Notice {
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $notice } = this.art.refs;
|
||||
const { $notice } = this.art.template;
|
||||
setStyle($notice, 'display', 'none');
|
||||
this.art.emit('notice:hide', $notice);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import { setStyle, errorHandle } from '../utils';
|
||||
|
||||
export default function aspectRatioMix(art, player) {
|
||||
const {
|
||||
refs: { $video, $player },
|
||||
template: { $video, $player },
|
||||
i18n,
|
||||
notice,
|
||||
} = art;
|
||||
|
||||
@@ -3,7 +3,7 @@ import { getExt } from '../utils';
|
||||
export default function attachUrlMix(art, player) {
|
||||
const {
|
||||
option: { type, customType },
|
||||
refs: { $video },
|
||||
template: { $video },
|
||||
} = art;
|
||||
|
||||
Object.defineProperty(player, 'returnUrl', {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { clamp, sleep } from '../utils';
|
||||
export default function attrInit(art, player) {
|
||||
const {
|
||||
option,
|
||||
refs: { $video },
|
||||
template: { $video },
|
||||
} = art;
|
||||
Object.keys(option.moreVideoAttr).forEach(key => {
|
||||
$video[key] = option.moreVideoAttr[key];
|
||||
|
||||
@@ -2,7 +2,7 @@ import { setStyle } from '../utils';
|
||||
|
||||
export default function resizeMix(art, player) {
|
||||
const {
|
||||
refs: { $container, $player, $video },
|
||||
template: { $container, $player, $video },
|
||||
} = art;
|
||||
|
||||
Object.defineProperty(player, 'autoSizeState', {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
export default function currentTimeMix(art, player) {
|
||||
Object.defineProperty(player, 'currentTime', {
|
||||
get: () => art.refs.$video.currentTime || 0,
|
||||
get: () => art.template.$video.currentTime || 0,
|
||||
set: currentTime => {
|
||||
art.refs.$video.currentTime = currentTime;
|
||||
art.template.$video.currentTime = currentTime;
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
export default function durationMix(art, player) {
|
||||
Object.defineProperty(player, 'duration', {
|
||||
get: () => art.refs.$video.duration || 0,
|
||||
get: () => art.template.$video.duration || 0,
|
||||
});
|
||||
}
|
||||
@@ -5,7 +5,7 @@ export default function eventInit(art, player) {
|
||||
const {
|
||||
option,
|
||||
events: { proxy },
|
||||
refs: { $player, $video },
|
||||
template: { $player, $video },
|
||||
i18n,
|
||||
notice,
|
||||
} = art;
|
||||
|
||||
@@ -2,21 +2,21 @@ import { errorHandle } from '../utils';
|
||||
|
||||
export default function flipMix(art, player) {
|
||||
Object.defineProperty(player, 'flipState', {
|
||||
get: () => art.refs.$player.dataset.flip,
|
||||
get: () => art.template.$player.dataset.flip,
|
||||
});
|
||||
|
||||
Object.defineProperty(player, 'flip', {
|
||||
value: flip => {
|
||||
const flipList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
|
||||
art.refs.$player.dataset.flip = flip;
|
||||
art.template.$player.dataset.flip = flip;
|
||||
art.emit('flipChange', flip);
|
||||
},
|
||||
});
|
||||
|
||||
Object.defineProperty(player, 'flipRemove', {
|
||||
value: () => {
|
||||
delete art.refs.$player.dataset.flip;
|
||||
delete art.template.$player.dataset.flip;
|
||||
art.emit('flipRemove');
|
||||
},
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@ export default function fullscreenMix(art, player) {
|
||||
const {
|
||||
notice,
|
||||
events: { destroyEvents },
|
||||
refs: { $player },
|
||||
template: { $player },
|
||||
} = art;
|
||||
|
||||
const screenfullChange = () => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export default function fullscreenWebMix(art, player) {
|
||||
const {
|
||||
refs: { $player },
|
||||
template: { $player },
|
||||
} = art;
|
||||
|
||||
Object.defineProperty(player, 'fullscreenWebState', {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
export default function seekMix(art, player) {
|
||||
Object.defineProperty(player, 'loaded', {
|
||||
get: () =>
|
||||
art.refs.$video.buffered.length
|
||||
? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) / art.refs.$video.duration
|
||||
art.template.$video.buffered.length
|
||||
? art.template.$video.buffered.end(art.template.$video.buffered.length - 1) / art.template.$video.duration
|
||||
: 0,
|
||||
});
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
export default function pauseMin(art, player) {
|
||||
const {
|
||||
refs: { $video },
|
||||
template: { $video },
|
||||
i18n,
|
||||
notice,
|
||||
} = art;
|
||||
|
||||
@@ -4,7 +4,7 @@ import { setStyle, append } from '../utils';
|
||||
function nativePip(art, player) {
|
||||
const {
|
||||
notice,
|
||||
refs: { $video },
|
||||
template: { $video },
|
||||
events: { proxy },
|
||||
} = art;
|
||||
|
||||
@@ -54,7 +54,7 @@ function customPip(art, player) {
|
||||
const {
|
||||
option,
|
||||
i18n,
|
||||
refs: { $player, $pipClose, $pipTitle },
|
||||
template: { $player, $pipClose, $pipTitle },
|
||||
events: { destroyEvents, proxy },
|
||||
} = art;
|
||||
let cachePos = null;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export default function playMix(art, player) {
|
||||
const {
|
||||
refs: { $video },
|
||||
template: { $video },
|
||||
i18n,
|
||||
notice,
|
||||
option: { mutex },
|
||||
|
||||
@@ -2,7 +2,7 @@ import { errorHandle } from '../utils';
|
||||
|
||||
export default function playbackRateMix(art, player) {
|
||||
const {
|
||||
refs: { $video, $player },
|
||||
template: { $video, $player },
|
||||
i18n,
|
||||
notice,
|
||||
} = art;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export default function seekMix(art, player) {
|
||||
Object.defineProperty(player, 'played', {
|
||||
get: () => art.refs.$video.currentTime / art.refs.$video.duration,
|
||||
get: () => art.template.$video.currentTime / art.template.$video.duration,
|
||||
});
|
||||
}
|
||||
@@ -4,7 +4,7 @@ export default function screenshotMix(art, player) {
|
||||
const {
|
||||
option,
|
||||
notice,
|
||||
refs: { $video },
|
||||
template: { $video },
|
||||
} = art;
|
||||
|
||||
function captureFrame() {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { clamp } from '../utils';
|
||||
|
||||
export default function volumeMix(art, player) {
|
||||
const {
|
||||
refs: { $video },
|
||||
template: { $video },
|
||||
i18n,
|
||||
notice,
|
||||
storage,
|
||||
|
||||
@@ -16,7 +16,7 @@ export default class Setting {
|
||||
|
||||
init() {
|
||||
const {
|
||||
refs: { $settingClose },
|
||||
template: { $settingClose },
|
||||
events: { proxy },
|
||||
} = this.art;
|
||||
|
||||
@@ -32,19 +32,19 @@ export default class Setting {
|
||||
}
|
||||
|
||||
add(item, callback) {
|
||||
const { $settingBody } = this.art.refs;
|
||||
const { $settingBody } = this.art.template;
|
||||
component(this.art, this, $settingBody, item, callback, 'setting');
|
||||
}
|
||||
|
||||
show() {
|
||||
const { $setting } = this.art.refs;
|
||||
const { $setting } = this.art.template;
|
||||
setStyle($setting, 'display', 'flex');
|
||||
this.state = true;
|
||||
this.art.emit('setting:show', $setting);
|
||||
}
|
||||
|
||||
hide() {
|
||||
const { $setting } = this.art.refs;
|
||||
const { $setting } = this.art.template;
|
||||
setStyle($setting, 'display', 'none');
|
||||
this.state = false;
|
||||
this.art.emit('setting:hide', $setting);
|
||||
|
||||
@@ -15,14 +15,14 @@ export default class Subtitle {
|
||||
const {
|
||||
events: { proxy },
|
||||
option: { subtitle },
|
||||
refs: { $video, $subtitle },
|
||||
template: { $video, $subtitle },
|
||||
} = this.art;
|
||||
setStyles($subtitle, subtitle.style || {});
|
||||
const $track = document.createElement('track');
|
||||
$track.default = true;
|
||||
$track.kind = 'metadata';
|
||||
$video.appendChild($track);
|
||||
this.art.refs.$track = $track;
|
||||
this.art.template.$track = $track;
|
||||
this.load(subtitle.url).then(url => {
|
||||
$track.src = url;
|
||||
this.art.emit('subtitle:load', url);
|
||||
@@ -71,7 +71,7 @@ export default class Subtitle {
|
||||
|
||||
show() {
|
||||
const {
|
||||
refs: { $subtitle },
|
||||
template: { $subtitle },
|
||||
i18n,
|
||||
notice,
|
||||
} = this.art;
|
||||
@@ -83,7 +83,7 @@ export default class Subtitle {
|
||||
|
||||
hide() {
|
||||
const {
|
||||
refs: { $subtitle },
|
||||
template: { $subtitle },
|
||||
i18n,
|
||||
notice,
|
||||
} = this.art;
|
||||
@@ -102,7 +102,7 @@ export default class Subtitle {
|
||||
}
|
||||
|
||||
switch(url) {
|
||||
const { $track } = this.art.refs;
|
||||
const { $track } = this.art.template;
|
||||
errorHandle($track, 'You need to initialize the subtitle option first.');
|
||||
this.load(url).then(url => {
|
||||
$track.src = url;
|
||||
|
||||
@@ -1,7 +1,22 @@
|
||||
import { errorHandle } from './utils';
|
||||
|
||||
export default class Template {
|
||||
constructor(art) {
|
||||
const { refs } = art;
|
||||
refs.$container.innerHTML = `
|
||||
if (art.option.container instanceof Element) {
|
||||
this.$container = this.option.container;
|
||||
} else {
|
||||
this.$container = document.querySelector(art.option.container);
|
||||
}
|
||||
|
||||
if (art.constructor.instances.some(art => art.template.$container === this.$container)) {
|
||||
errorHandle(false, 'Cannot mount multiple instances on the same dom element');
|
||||
}
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.$container.innerHTML = `
|
||||
<div class="artplayer-video-player">
|
||||
<video data-index="10" class="artplayer-video"></video>
|
||||
<div data-index="20" class="artplayer-subtitle"></div>
|
||||
@@ -35,29 +50,37 @@ export default class Template {
|
||||
<div data-index="110" class="artplayer-contextmenu"></div>
|
||||
</div>
|
||||
`;
|
||||
refs.$player = refs.$container.querySelector('.artplayer-video-player');
|
||||
refs.$video = refs.$container.querySelector('.artplayer-video');
|
||||
refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
|
||||
refs.$bottom = refs.$container.querySelector('.artplayer-bottom');
|
||||
refs.$progress = refs.$container.querySelector('.artplayer-progress');
|
||||
refs.$controls = refs.$container.querySelector('.artplayer-controls');
|
||||
refs.$controlsLeft = refs.$container.querySelector('.artplayer-controls-left');
|
||||
refs.$controlsRight = refs.$container.querySelector('.artplayer-controls-right');
|
||||
refs.$layers = refs.$container.querySelector('.artplayer-layers');
|
||||
refs.$loading = refs.$container.querySelector('.artplayer-loading');
|
||||
refs.$notice = refs.$container.querySelector('.artplayer-notice');
|
||||
refs.$noticeInner = refs.$container.querySelector('.artplayer-notice-inner');
|
||||
refs.$mask = refs.$container.querySelector('.artplayer-mask');
|
||||
refs.$setting = refs.$container.querySelector('.artplayer-setting');
|
||||
refs.$settingInner = refs.$container.querySelector('.artplayer-setting-inner');
|
||||
refs.$settingBody = refs.$container.querySelector('.artplayer-setting-body');
|
||||
refs.$settingClose = refs.$container.querySelector('.artplayer-setting-close');
|
||||
refs.$info = refs.$container.querySelector('.artplayer-info');
|
||||
refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel');
|
||||
refs.$infoClose = refs.$container.querySelector('.artplayer-info-close');
|
||||
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');
|
||||
this.$player = this.$container.querySelector('.artplayer-video-player');
|
||||
this.$video = this.$container.querySelector('.artplayer-video');
|
||||
this.$subtitle = this.$container.querySelector('.artplayer-subtitle');
|
||||
this.$bottom = this.$container.querySelector('.artplayer-bottom');
|
||||
this.$progress = this.$container.querySelector('.artplayer-progress');
|
||||
this.$controls = this.$container.querySelector('.artplayer-controls');
|
||||
this.$controlsLeft = this.$container.querySelector('.artplayer-controls-left');
|
||||
this.$controlsRight = this.$container.querySelector('.artplayer-controls-right');
|
||||
this.$layers = this.$container.querySelector('.artplayer-layers');
|
||||
this.$loading = this.$container.querySelector('.artplayer-loading');
|
||||
this.$notice = this.$container.querySelector('.artplayer-notice');
|
||||
this.$noticeInner = this.$container.querySelector('.artplayer-notice-inner');
|
||||
this.$mask = this.$container.querySelector('.artplayer-mask');
|
||||
this.$setting = this.$container.querySelector('.artplayer-setting');
|
||||
this.$settingInner = this.$container.querySelector('.artplayer-setting-inner');
|
||||
this.$settingBody = this.$container.querySelector('.artplayer-setting-body');
|
||||
this.$settingClose = this.$container.querySelector('.artplayer-setting-close');
|
||||
this.$info = this.$container.querySelector('.artplayer-info');
|
||||
this.$infoPanel = this.$container.querySelector('.artplayer-info-panel');
|
||||
this.$infoClose = this.$container.querySelector('.artplayer-info-close');
|
||||
this.$pipHeader = this.$container.querySelector('.artplayer-pip-header');
|
||||
this.$pipTitle = this.$container.querySelector('.artplayer-pip-title');
|
||||
this.$pipClose = this.$container.querySelector('.artplayer-pip-close');
|
||||
this.$contextmenu = this.$container.querySelector('.artplayer-contextmenu');
|
||||
}
|
||||
|
||||
destroy(removeHtml) {
|
||||
if (removeHtml) {
|
||||
this.$container.innerHTML = '';
|
||||
} else {
|
||||
this.refs.$player.classList.add('artplayer-destroy');
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user