mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
变更事件名称
This commit is contained in:
Harvey Zack committed
1 parent
4ecdb6b2d9
commit
16586d8d7e
26 files changed
+219
-152
No files matched your search
@@ -4,7 +4,7 @@
|
||||
.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-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-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-icon-playBig{position:absolute;right:30px;bottom:65px;opacity:.6}
|
||||
.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}.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-player .artplayerLine truncated
|
||||
.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 .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}.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-player .artplLine 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-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-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-x:hidden;overflow-y:auto;width:315px;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-setting .art-setting-btns{display:flex}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px;margin-left:-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}
|
||||
|
||||
+124
-85
@@ -991,7 +991,7 @@
|
||||
}
|
||||
|
||||
notice.show(i18n.get('Play'));
|
||||
art.emit('play', $video);
|
||||
art.emit('play');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1004,7 +1004,7 @@
|
||||
value: function value() {
|
||||
$video.pause();
|
||||
notice.show(i18n.get('Pause'));
|
||||
art.emit('pause', $video);
|
||||
art.emit('pause');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1056,7 +1056,7 @@
|
||||
storage.set('volume', $video.volume);
|
||||
}
|
||||
|
||||
art.emit('volume', $video.volume);
|
||||
art.emit('volumeChange', $video.volume);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1128,7 +1128,7 @@
|
||||
$video.playbackRate = newRate;
|
||||
$player.dataset.playbackRate = newRate;
|
||||
notice.show("".concat(i18n.get('Rate'), ": ").concat(newRate === 1 ? i18n.get('Normal') : "".concat(newRate, "x")));
|
||||
art.emit('playbackRate', newRate);
|
||||
art.emit('playbackRateChange', newRate);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'playbackRateRemove', {
|
||||
@@ -1136,6 +1136,7 @@
|
||||
if (player.$playbackRateState) {
|
||||
player.playbackRate(1);
|
||||
delete $player.dataset.playbackRate;
|
||||
art.emit('playbackRateRemove');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1145,6 +1146,7 @@
|
||||
|
||||
if (playbackRate) {
|
||||
player.playbackRate(Number(playbackRate));
|
||||
art.emit('playbackRateReset');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1192,7 +1194,7 @@
|
||||
}
|
||||
|
||||
notice.show("".concat(i18n.get('Aspect ratio'), ": ").concat(ratioName));
|
||||
art.emit('aspectRatio', ratio);
|
||||
art.emit('aspectRatioChange', ratio);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'aspectRatioRemove', {
|
||||
@@ -1202,6 +1204,7 @@
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.aspectRatio;
|
||||
art.emit('aspectRatioRemove');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1211,6 +1214,7 @@
|
||||
|
||||
if (aspectRatio) {
|
||||
player.aspectRatio(aspectRatio.split(':'));
|
||||
art.emit('aspectRatioReset');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1218,10 +1222,10 @@
|
||||
|
||||
function screenshotMix(art, player) {
|
||||
var option = art.option,
|
||||
notice = art.notice;
|
||||
notice = art.notice,
|
||||
$video = art.refs.$video;
|
||||
|
||||
function captureFrame() {
|
||||
var $video = art.refs.$video;
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = $video.videoWidth;
|
||||
canvas.height = $video.videoHeight;
|
||||
@@ -1234,16 +1238,22 @@
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
document.body.removeChild(elink);
|
||||
return dataUri;
|
||||
}
|
||||
|
||||
Object.defineProperty(player, 'screenshot', {
|
||||
value: function value() {
|
||||
var crossOrigin = $video.crossOrigin;
|
||||
|
||||
try {
|
||||
captureFrame();
|
||||
art.emit('screenshot');
|
||||
$video.crossOrigin = 'anonymous';
|
||||
var dataUri = captureFrame();
|
||||
art.emit('screenshot', dataUri);
|
||||
} catch (error) {
|
||||
notice.show(error);
|
||||
console.warn(error);
|
||||
} finally {
|
||||
$video.crossOrigin = crossOrigin;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2882,7 +2892,7 @@
|
||||
player.fullscreenWebExit();
|
||||
player.aspectRatioRemove();
|
||||
player.playbackRateRemove();
|
||||
art.emit('pip', true);
|
||||
art.emit('pipEnabled');
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'pipExit', {
|
||||
@@ -2896,7 +2906,7 @@
|
||||
player.fullscreenWebExit();
|
||||
player.aspectRatioRemove();
|
||||
player.playbackRateRemove();
|
||||
art.emit('pip', false);
|
||||
art.emit('pipExit');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2960,6 +2970,8 @@
|
||||
setStyle($player, 'width', '100%');
|
||||
setStyle($player, 'height', "".concat(_percentage, "%"));
|
||||
}
|
||||
|
||||
art.emit('autoSizeChange');
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'autoSizeRemove', {
|
||||
@@ -2967,6 +2979,7 @@
|
||||
$container.classList.remove('artplayer-auto-size');
|
||||
setStyle($player, 'width', null);
|
||||
setStyle($player, 'height', null);
|
||||
art.emit('autoSizeRemove');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -2978,15 +2991,17 @@
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'flip', {
|
||||
value: function value(dir) {
|
||||
var dirList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(dirList.includes(dir), "The 'angle' need to be one of '[normal, horizontal, vertical]', but got ".concat(dir));
|
||||
art.refs.$player.dataset.flip = dir;
|
||||
value: function value(flip) {
|
||||
var flipList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(flipList.includes(flip), "The 'angle' need to be one of '[normal, horizontal, vertical]', but got ".concat(flip));
|
||||
art.refs.$player.dataset.flip = flip;
|
||||
art.emit('flipChange', flip);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'flipRemove', {
|
||||
value: function value() {
|
||||
delete art.refs.$player.dataset.flip;
|
||||
art.emit('flipRemove');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -3091,7 +3106,20 @@
|
||||
|
||||
var next = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"36\" width=\"36\" viewBox=\"0 0 36 36\">\n <path d=\"M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z\"></path>\n</svg>";
|
||||
|
||||
var icons = {
|
||||
function creatDomFromSvg(map) {
|
||||
var result = {};
|
||||
Object.keys(map).forEach(function (name) {
|
||||
var tmp = document.createElement('div');
|
||||
tmp.innerHTML = "<i class=\"art-icon art-icon-".concat(name, "\">").concat(map[name], "</i>");
|
||||
|
||||
var _tmp$childNodes = slicedToArray(tmp.childNodes, 1);
|
||||
|
||||
result[name] = _tmp$childNodes[0];
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
var icons = creatDomFromSvg({
|
||||
loading: loading,
|
||||
playBig: playBig,
|
||||
play: play,
|
||||
@@ -3106,22 +3134,7 @@
|
||||
pip: pip,
|
||||
prev: prev,
|
||||
next: next
|
||||
};
|
||||
|
||||
function creatDomFromSvg(map) {
|
||||
var result = {};
|
||||
Object.keys(map).forEach(function (name) {
|
||||
var tmp = document.createElement('div');
|
||||
tmp.innerHTML = "<i class=\"art-icon art-icon-".concat(name, "\">").concat(map[name], "</i>");
|
||||
|
||||
var _tmp$childNodes = slicedToArray(tmp.childNodes, 1);
|
||||
|
||||
result[name] = _tmp$childNodes[0];
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
var icons$1 = creatDomFromSvg(icons);
|
||||
});
|
||||
|
||||
var Fullscreen =
|
||||
/*#__PURE__*/
|
||||
@@ -3140,7 +3153,7 @@
|
||||
var proxy = art.events.proxy,
|
||||
i18n = art.i18n,
|
||||
player = art.player;
|
||||
this.$fullscreen = append($control, icons$1.fullscreen);
|
||||
this.$fullscreen = append($control, icons.fullscreen);
|
||||
tooltip(this.$fullscreen, i18n.get('Fullscreen'));
|
||||
proxy($control, 'click', function () {
|
||||
player.fullscreenToggle();
|
||||
@@ -3176,7 +3189,7 @@
|
||||
var proxy = art.events.proxy,
|
||||
i18n = art.i18n,
|
||||
player = art.player;
|
||||
this.$fullscreenWeb = append($control, icons$1.fullscreenWeb);
|
||||
this.$fullscreenWeb = append($control, icons.fullscreenWeb);
|
||||
tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
|
||||
proxy($control, 'click', function () {
|
||||
player.fullscreenWebToggle();
|
||||
@@ -3210,7 +3223,7 @@
|
||||
var proxy = art.events.proxy,
|
||||
i18n = art.i18n,
|
||||
player = art.player;
|
||||
this.$pip = append($control, icons$1.pip);
|
||||
this.$pip = append($control, icons.pip);
|
||||
tooltip(this.$pip, i18n.get('Mini player'));
|
||||
proxy($control, 'click', function () {
|
||||
player.pipEnabled();
|
||||
@@ -3238,8 +3251,8 @@
|
||||
var proxy = art.events.proxy,
|
||||
player = art.player,
|
||||
i18n = art.i18n;
|
||||
this.$play = append($control, icons$1.play);
|
||||
this.$pause = append($control, icons$1.pause);
|
||||
this.$play = append($control, icons.play);
|
||||
this.$pause = append($control, icons.pause);
|
||||
tooltip(this.$play, i18n.get('Play'));
|
||||
tooltip(this.$pause, i18n.get('Pause'));
|
||||
setStyle(this.$pause, 'display', 'none');
|
||||
@@ -3293,8 +3306,8 @@
|
||||
this.$indicator = $control.querySelector('.art-progress-indicator');
|
||||
this.$tip = $control.querySelector('.art-progress-tip');
|
||||
highlight.forEach(function (item) {
|
||||
var left = Number(item.time || 0) / player.duration;
|
||||
append(_this.$highlight, "<span data-text=\"".concat(item.text || '', "\" data-time=\"").concat(item.time || 0, "\" style=\"left: ").concat(left * 100, "%\"></span>"));
|
||||
var left = clamp(item.time, 0, player.duration) / player.duration * 100;
|
||||
append(_this.$highlight, "<span data-text=\"".concat(item.text, "\" data-time=\"").concat(item.time, "\" style=\"left: ").concat(left, "%\"></span>"));
|
||||
});
|
||||
this.set('loaded', player.loaded);
|
||||
this.art.on('video:progress', function () {
|
||||
@@ -3338,7 +3351,7 @@
|
||||
second = _this$getPosFromEvent2.second,
|
||||
percentage = _this$getPosFromEvent2.percentage;
|
||||
|
||||
_this.$indicator.classList.add('show-indicator');
|
||||
_this.$indicator.classList.add('art-show-indicator');
|
||||
|
||||
_this.set('played', percentage);
|
||||
|
||||
@@ -3349,7 +3362,7 @@
|
||||
if (_this.isDroging) {
|
||||
_this.isDroging = false;
|
||||
|
||||
_this.$indicator.classList.remove('show-indicator');
|
||||
_this.$indicator.classList.remove('art-show-indicator');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -3433,17 +3446,17 @@
|
||||
var proxy = art.events.proxy,
|
||||
i18n = art.i18n,
|
||||
subtitle = art.subtitle;
|
||||
this.$subtitle = append($control, icons$1.subtitle);
|
||||
this.$subtitle = append($control, icons.subtitle);
|
||||
tooltip(this.$subtitle, i18n.get('Hide subtitle'));
|
||||
proxy($control, 'click', function () {
|
||||
subtitle.toggle();
|
||||
});
|
||||
art.on('subtitle:show', function () {
|
||||
setStyle(_this.$subtitle, 'opacity', '0.8');
|
||||
setStyle(_this.$subtitle, 'opacity', '1');
|
||||
tooltip(_this.$subtitle, i18n.get('Hide subtitle'));
|
||||
});
|
||||
art.on('subtitle:hide', function () {
|
||||
setStyle(_this.$subtitle, 'opacity', '1');
|
||||
setStyle(_this.$subtitle, 'opacity', '0.8');
|
||||
tooltip(_this.$subtitle, i18n.get('Show subtitle'));
|
||||
});
|
||||
}
|
||||
@@ -3465,7 +3478,11 @@
|
||||
key: "apply",
|
||||
value: function apply(art, $control) {
|
||||
function getTime() {
|
||||
$control.innerHTML = "".concat(secondToTime(art.player.currentTime), " / ").concat(secondToTime(art.player.duration));
|
||||
var newTime = "".concat(secondToTime(art.player.currentTime), " / ").concat(secondToTime(art.player.duration));
|
||||
|
||||
if (newTime !== $control.innerHTML) {
|
||||
$control.innerHTML = newTime;
|
||||
}
|
||||
}
|
||||
|
||||
getTime();
|
||||
@@ -3499,13 +3516,13 @@
|
||||
player = art.player,
|
||||
i18n = art.i18n,
|
||||
storage = art.storage;
|
||||
this.$volume = append($control, icons$1.volume);
|
||||
this.$volumeClose = append($control, icons$1.volumeClose);
|
||||
this.$volume = append($control, icons.volume);
|
||||
this.$volumeClose = append($control, icons.volumeClose);
|
||||
this.$volumePanel = append($control, '<div class="art-volume-panel"></div>');
|
||||
this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
|
||||
tooltip(this.$volume, i18n.get('Mute'));
|
||||
setStyle(this.$volumeClose, 'display', 'none');
|
||||
art.on('volume', function (percentage) {
|
||||
art.on('volumeChange', function (percentage) {
|
||||
if (percentage === 0) {
|
||||
setStyle(_this.$volume, 'display', 'none');
|
||||
setStyle(_this.$volumeClose, 'display', 'flex');
|
||||
@@ -3593,7 +3610,7 @@
|
||||
var proxy = art.events.proxy,
|
||||
i18n = art.i18n,
|
||||
setting = art.setting;
|
||||
this.$setting = append($control, icons$1.setting);
|
||||
this.$setting = append($control, icons.setting);
|
||||
tooltip(this.$setting, i18n.get('Show setting'));
|
||||
proxy($control, 'click', function () {
|
||||
setting.toggle();
|
||||
@@ -3631,13 +3648,14 @@
|
||||
this.art = art;
|
||||
errorHandle(art.controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
|
||||
var $progress = art.refs.$progress,
|
||||
proxy = art.events.proxy;
|
||||
_art$events = art.events,
|
||||
proxy = _art$events.proxy,
|
||||
loadImg = _art$events.loadImg;
|
||||
this.$control = $control;
|
||||
proxy($progress, 'mousemove', function (event) {
|
||||
if (!_this.loading) {
|
||||
_this.loading = true;
|
||||
|
||||
_this.load(_this.art.option.thumbnails.url).then(function () {
|
||||
loadImg(_this.art.option.thumbnails.url).then(function () {
|
||||
_this.isLoad = true;
|
||||
});
|
||||
}
|
||||
@@ -3652,26 +3670,6 @@
|
||||
setStyle($control, 'display', 'none');
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "load",
|
||||
value: function load(url) {
|
||||
var proxy = this.art.events.proxy;
|
||||
return new Promise(function (resolve, reject) {
|
||||
var image = new Image();
|
||||
image.src = url;
|
||||
|
||||
if (image.complete) {
|
||||
return resolve(image);
|
||||
}
|
||||
|
||||
proxy(image, 'load', function () {
|
||||
return resolve(image);
|
||||
});
|
||||
proxy(image, 'error', function () {
|
||||
return reject(image);
|
||||
});
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "showThumbnails",
|
||||
value: function showThumbnails(event) {
|
||||
@@ -3725,7 +3723,7 @@
|
||||
var proxy = art.events.proxy,
|
||||
i18n = art.i18n,
|
||||
player = art.player;
|
||||
this.$screenshot = append($control, icons$1.screenshot);
|
||||
this.$screenshot = append($control, icons.screenshot);
|
||||
tooltip(this.$screenshot, i18n.get('Screenshot'));
|
||||
proxy(this.$screenshot, 'click', function () {
|
||||
player.screenshot();
|
||||
@@ -3766,9 +3764,9 @@
|
||||
}).join('');
|
||||
var $qualitys = append($control, "<div class=\"art-qualitys\">".concat(qualityList, "</div>"));
|
||||
hover($control, function () {
|
||||
$control.classList.add('hover');
|
||||
$control.classList.add('art-quality-hover');
|
||||
}, function () {
|
||||
$control.classList.remove('hover');
|
||||
$control.classList.remove('art-quality-hover');
|
||||
});
|
||||
proxy($qualitys, 'click', function (event) {
|
||||
var index = Number(event.target.dataset.index);
|
||||
@@ -3963,7 +3961,7 @@
|
||||
}
|
||||
},
|
||||
callback: function callback($menu) {
|
||||
art.on('playbackRate', function (rate) {
|
||||
art.on('playbackRateChange', function (rate) {
|
||||
var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
|
||||
return Number(item.dataset.rate) === rate;
|
||||
});
|
||||
@@ -3992,7 +3990,7 @@
|
||||
}
|
||||
},
|
||||
callback: function callback($menu) {
|
||||
art.on('aspectRatio', function (ratio) {
|
||||
art.on('aspectRatioChange', function (ratio) {
|
||||
var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
|
||||
return item.dataset.ratio === ratio.join(':');
|
||||
});
|
||||
@@ -4783,6 +4781,7 @@
|
||||
this.destroyEvents = [];
|
||||
this.proxy = this.proxy.bind(this);
|
||||
this.hover = this.hover.bind(this);
|
||||
this.loadImg = this.loadImg.bind(this);
|
||||
clickInit(art, this);
|
||||
hoverInit(art, this);
|
||||
mousemoveInitInit(art, this);
|
||||
@@ -4815,6 +4814,36 @@
|
||||
this.proxy(target, 'mouseenter', mouseenter);
|
||||
this.proxy(target, 'mouseleave', mouseleave);
|
||||
}
|
||||
}, {
|
||||
key: "loadImg",
|
||||
value: function loadImg(img) {
|
||||
var _this2 = this;
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
var image;
|
||||
|
||||
if (img instanceof HTMLImageElement) {
|
||||
image = img;
|
||||
} else if (typeof img === 'string') {
|
||||
image = new Image();
|
||||
image.src = img;
|
||||
} else {
|
||||
return reject(img);
|
||||
}
|
||||
|
||||
if (image.complete) {
|
||||
return resolve(image);
|
||||
}
|
||||
|
||||
_this2.proxy(image, 'load', function () {
|
||||
return resolve(image);
|
||||
});
|
||||
|
||||
_this2.proxy(image, 'error', function () {
|
||||
return reject(image);
|
||||
});
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "destroy",
|
||||
value: function destroy() {
|
||||
@@ -4858,6 +4887,8 @@
|
||||
var editable = document.activeElement.getAttribute('contenteditable');
|
||||
|
||||
if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {
|
||||
_this2.art.emit('hotkey', event);
|
||||
|
||||
switch (event.keyCode) {
|
||||
case 39:
|
||||
event.preventDefault();
|
||||
@@ -4975,7 +5006,7 @@
|
||||
|
||||
this.art = art;
|
||||
var $loading = art.refs.$loading;
|
||||
append($loading, icons$1.loading);
|
||||
append($loading, icons.loading);
|
||||
}
|
||||
|
||||
createClass(Loading, [{
|
||||
@@ -5049,7 +5080,7 @@
|
||||
|
||||
this.art = art;
|
||||
var $mask = art.refs.$mask;
|
||||
append($mask, icons$1.playBig);
|
||||
append($mask, icons.playBig);
|
||||
}
|
||||
|
||||
createClass(Mask, [{
|
||||
@@ -5083,6 +5114,8 @@
|
||||
createClass(Flip, [{
|
||||
key: "apply",
|
||||
value: function apply(art, $setting) {
|
||||
var _this = this;
|
||||
|
||||
var i18n = art.i18n,
|
||||
proxy = art.events.proxy,
|
||||
player = art.player;
|
||||
@@ -5095,9 +5128,14 @@
|
||||
|
||||
if (flip) {
|
||||
player.flip(flip);
|
||||
inverseClass(target.parentElement, 'current');
|
||||
}
|
||||
});
|
||||
art.on('flipChange', function (flip) {
|
||||
var $current = Array.from(_this.$btns.querySelectorAll('span')).find(function (item) {
|
||||
return item.dataset.flip === flip;
|
||||
});
|
||||
inverseClass($current.parentElement, 'current');
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -5146,13 +5184,13 @@
|
||||
}, {
|
||||
key: "add",
|
||||
value: function add(setting, callback) {
|
||||
var _this$art2 = this.art,
|
||||
refs = _this$art2.refs,
|
||||
i18n = _this$art2.i18n;
|
||||
var option = setting.option;
|
||||
|
||||
if (option && !option.disable) {
|
||||
id$3++;
|
||||
var _this$art2 = this.art,
|
||||
refs = _this$art2.refs,
|
||||
i18n = _this$art2.i18n;
|
||||
var name = option.name || "setting".concat(id$3);
|
||||
var title = option.title || name;
|
||||
var $setting = document.createElement('div');
|
||||
@@ -5160,9 +5198,10 @@
|
||||
append($setting, "<div class=\"art-setting-header\">".concat(i18n.get(title), "</div>"));
|
||||
append($setting, '<div class="art-setting-body"></div>');
|
||||
setting.apply && setting.apply(this.art, $setting);
|
||||
callback && callback($setting);
|
||||
this[name] = $setting;
|
||||
insertByIndex(refs.$settingBody, $setting, option.index || id$3);
|
||||
this[name] = $setting;
|
||||
callback && callback($setting);
|
||||
this.art.emit('setting:add', $setting);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
|
||||
@@ -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/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.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/node_modules/tiny-emitter/index.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../../../packages/artplayer/src/contextmenu/playbackRate.js","../../../packages/artplayer/src/contextmenu/aspectRatio.js","../../../paLine 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/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.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/node_modules/tiny-emitter/index.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../../../packages/artplayer/src/contextmenu/playbackRate.js","../../../packages/artplayer/src/contextmenu/aspectRatio.js","../../../paLine truncated
|
||||
@@ -21,7 +21,7 @@ export default function aspectRatio(art) {
|
||||
}
|
||||
},
|
||||
callback: $menu => {
|
||||
art.on('aspectRatio', ratio => {
|
||||
art.on('aspectRatioChange', ratio => {
|
||||
const $current = Array.from($menu.querySelectorAll('span')).find(
|
||||
item => item.dataset.ratio === ratio.join(':')
|
||||
);
|
||||
|
||||
@@ -24,7 +24,7 @@ export default function playbackRate(art) {
|
||||
}
|
||||
},
|
||||
callback: $menu => {
|
||||
art.on('playbackRate', rate => {
|
||||
art.on('playbackRateChange', rate => {
|
||||
const $current = Array.from($menu.querySelectorAll('span')).find(
|
||||
item => Number(item.dataset.rate) === rate
|
||||
);
|
||||
|
||||
@@ -32,8 +32,8 @@ export default class Progress {
|
||||
this.$tip = $control.querySelector('.art-progress-tip');
|
||||
|
||||
highlight.forEach(item => {
|
||||
const left = Number(item.time || 0) / player.duration;
|
||||
append(this.$highlight, `<span data-text="${item.text || ''}" data-time="${item.time || 0}" style="left: ${left * 100}%"></span>`);
|
||||
const left = clamp(item.time, 0, player.duration) / player.duration * 100;
|
||||
append(this.$highlight, `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`);
|
||||
});
|
||||
|
||||
this.set('loaded', player.loaded);
|
||||
@@ -78,7 +78,7 @@ export default class Progress {
|
||||
proxy(document, 'mousemove', event => {
|
||||
if (this.isDroging) {
|
||||
const { second, percentage } = this.getPosFromEvent(event);
|
||||
this.$indicator.classList.add('show-indicator');
|
||||
this.$indicator.classList.add('art-show-indicator');
|
||||
this.set('played', percentage);
|
||||
player.seek(second);
|
||||
}
|
||||
@@ -87,7 +87,7 @@ export default class Progress {
|
||||
proxy(document, 'mouseup', () => {
|
||||
if (this.isDroging) {
|
||||
this.isDroging = false;
|
||||
this.$indicator.classList.remove('show-indicator');
|
||||
this.$indicator.classList.remove('art-show-indicator');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -15,9 +15,9 @@ export default class Quality {
|
||||
const $qualitys = append($control, `<div class="art-qualitys">${qualityList}</div>`);
|
||||
|
||||
hover($control, () => {
|
||||
$control.classList.add('hover');
|
||||
$control.classList.add('art-quality-hover');
|
||||
}, () => {
|
||||
$control.classList.remove('hover');
|
||||
$control.classList.remove('art-quality-hover');
|
||||
});
|
||||
|
||||
proxy($qualitys, 'click', event => {
|
||||
|
||||
@@ -16,12 +16,12 @@ export default class Subtitle {
|
||||
});
|
||||
|
||||
art.on('subtitle:show', () => {
|
||||
setStyle(this.$subtitle, 'opacity', '0.8');
|
||||
setStyle(this.$subtitle, 'opacity', '1');
|
||||
tooltip(this.$subtitle, i18n.get('Hide subtitle'));
|
||||
});
|
||||
|
||||
art.on('subtitle:hide', () => {
|
||||
setStyle(this.$subtitle, 'opacity', '1');
|
||||
setStyle(this.$subtitle, 'opacity', '0.8');
|
||||
tooltip(this.$subtitle, i18n.get('Show subtitle'));
|
||||
});
|
||||
}
|
||||
|
||||
@@ -10,13 +10,13 @@ export default class Thumbnails {
|
||||
apply(art, $control) {
|
||||
this.art = art;
|
||||
errorHandle(art.controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
|
||||
const { refs: { $progress }, events: { proxy } } = art;
|
||||
const { refs: { $progress }, events: { proxy, loadImg } } = art;
|
||||
this.$control = $control;
|
||||
|
||||
proxy($progress, 'mousemove', event => {
|
||||
if (!this.loading) {
|
||||
this.loading = true;
|
||||
this.load(this.art.option.thumbnails.url).then(() => {
|
||||
loadImg(this.art.option.thumbnails.url).then(() => {
|
||||
this.isLoad = true;
|
||||
});
|
||||
}
|
||||
@@ -32,21 +32,6 @@ export default class Thumbnails {
|
||||
});
|
||||
}
|
||||
|
||||
load(url) {
|
||||
const { proxy } = this.art.events;
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image();
|
||||
image.src = url;
|
||||
|
||||
if (image.complete) {
|
||||
return resolve(image);
|
||||
}
|
||||
|
||||
proxy(image, 'load', () => resolve(image));
|
||||
proxy(image, 'error', () => reject(image));
|
||||
});
|
||||
}
|
||||
|
||||
showThumbnails(event) {
|
||||
const { refs: { $progress }, controls } = this.art;
|
||||
const { width: posWidth } = controls.progress.getPosFromEvent(event);
|
||||
|
||||
@@ -7,7 +7,10 @@ export default class Time {
|
||||
|
||||
apply(art, $control) {
|
||||
function getTime() {
|
||||
$control.innerHTML = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
|
||||
const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
|
||||
if (newTime !== $control.innerHTML) {
|
||||
$control.innerHTML = newTime;
|
||||
}
|
||||
}
|
||||
|
||||
getTime();
|
||||
|
||||
@@ -16,7 +16,7 @@ export default class Volume {
|
||||
tooltip(this.$volume, i18n.get('Mute'));
|
||||
setStyle(this.$volumeClose, 'display', 'none');
|
||||
|
||||
art.on('volume', percentage => {
|
||||
art.on('volumeChange', percentage => {
|
||||
if (percentage === 0) {
|
||||
setStyle(this.$volume, 'display', 'none');
|
||||
setStyle(this.$volumeClose, 'display', 'flex');
|
||||
|
||||
@@ -9,6 +9,7 @@ export default class Events {
|
||||
this.destroyEvents = [];
|
||||
this.proxy = this.proxy.bind(this);
|
||||
this.hover = this.hover.bind(this);
|
||||
this.loadImg = this.loadImg.bind(this);
|
||||
clickInit(art, this);
|
||||
hoverInit(art, this);
|
||||
mousemoveInit(art, this);
|
||||
@@ -33,6 +34,28 @@ export default class Events {
|
||||
this.proxy(target, 'mouseleave', mouseleave);
|
||||
}
|
||||
|
||||
loadImg(img) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let image;
|
||||
|
||||
if (img instanceof HTMLImageElement) {
|
||||
image = img;
|
||||
} else if (typeof img === 'string') {
|
||||
image = new Image();
|
||||
image.src = img;
|
||||
} else {
|
||||
return reject(img);
|
||||
}
|
||||
|
||||
if (image.complete) {
|
||||
return resolve(image);
|
||||
}
|
||||
|
||||
this.proxy(image, 'load', () => resolve(image));
|
||||
this.proxy(image, 'error', () => reject(image));
|
||||
});
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.destroyEvents.forEach(event => event());
|
||||
}
|
||||
|
||||
@@ -10,7 +10,6 @@ export default class Hotkey {
|
||||
|
||||
init() {
|
||||
const { player, events: { proxy } } = this.art;
|
||||
|
||||
proxy(window, 'keydown', event => {
|
||||
if (this.art.isFocus) {
|
||||
const tag = document.activeElement.tagName.toUpperCase();
|
||||
@@ -21,6 +20,7 @@ export default class Hotkey {
|
||||
editable !== '' &&
|
||||
editable !== 'true'
|
||||
) {
|
||||
this.art.emit('hotkey', event);
|
||||
switch (event.keyCode) {
|
||||
case 39:
|
||||
event.preventDefault();
|
||||
|
||||
@@ -13,7 +13,17 @@ import pip from './pip.svg';
|
||||
import prev from './prev.svg';
|
||||
import next from './next.svg';
|
||||
|
||||
const icons = {
|
||||
function creatDomFromSvg(map) {
|
||||
const result = {};
|
||||
Object.keys(map).forEach(name => {
|
||||
const tmp = document.createElement('div');
|
||||
tmp.innerHTML = `<i class="art-icon art-icon-${name}">${map[name]}</i>`;
|
||||
[result[name]] = tmp.childNodes;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
export default creatDomFromSvg({
|
||||
loading,
|
||||
playBig,
|
||||
play,
|
||||
@@ -28,16 +38,4 @@ const icons = {
|
||||
pip,
|
||||
prev,
|
||||
next
|
||||
};
|
||||
|
||||
function creatDomFromSvg(map) {
|
||||
const result = {};
|
||||
Object.keys(map).forEach(name => {
|
||||
const tmp = document.createElement('div');
|
||||
tmp.innerHTML = `<i class="art-icon art-icon-${name}">${map[name]}</i>`;
|
||||
[result[name]] = tmp.childNodes;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
export default creatDomFromSvg(icons);
|
||||
});
|
||||
@@ -35,7 +35,7 @@ export default function aspectRatioMix(art, player) {
|
||||
}
|
||||
|
||||
notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
|
||||
art.emit('aspectRatio', ratio);
|
||||
art.emit('aspectRatioChange', ratio);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -46,6 +46,7 @@ export default function aspectRatioMix(art, player) {
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.aspectRatio;
|
||||
art.emit('aspectRatioRemove');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -55,6 +56,7 @@ export default function aspectRatioMix(art, player) {
|
||||
const { aspectRatio } = $player.dataset;
|
||||
if (aspectRatio) {
|
||||
player.aspectRatio(aspectRatio.split(':'));
|
||||
art.emit('aspectRatioReset');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -23,6 +23,7 @@ export default function resizeMix(art, player) {
|
||||
setStyle($player, 'width', '100%');
|
||||
setStyle($player, 'height', `${percentage}%`);
|
||||
}
|
||||
art.emit('autoSizeChange');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -31,6 +32,7 @@ export default function resizeMix(art, player) {
|
||||
$container.classList.remove('artplayer-auto-size');
|
||||
setStyle($player, 'width', null);
|
||||
setStyle($player, 'height', null);
|
||||
art.emit('autoSizeRemove');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -6,16 +6,18 @@ export default function flipMix(art, player) {
|
||||
});
|
||||
|
||||
Object.defineProperty(player, 'flip', {
|
||||
value: dir => {
|
||||
const dirList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(dirList.includes(dir), `The 'angle' need to be one of '[normal, horizontal, vertical]', but got ${dir}`);
|
||||
art.refs.$player.dataset.flip = dir;
|
||||
value: flip => {
|
||||
const flipList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(flipList.includes(flip), `The 'angle' need to be one of '[normal, horizontal, vertical]', but got ${flip}`);
|
||||
art.refs.$player.dataset.flip = flip;
|
||||
art.emit('flipChange', flip);
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(player, 'flipRemove', {
|
||||
value: () => {
|
||||
delete art.refs.$player.dataset.flip;
|
||||
art.emit('flipRemove');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -5,7 +5,7 @@ export default function pauseMin(art, player) {
|
||||
value: () => {
|
||||
$video.pause();
|
||||
notice.show(i18n.get('Pause'));
|
||||
art.emit('pause', $video);
|
||||
art.emit('pause');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -44,7 +44,7 @@ export default function pipMix(art, player) {
|
||||
player.fullscreenWebExit();
|
||||
player.aspectRatioRemove();
|
||||
player.playbackRateRemove();
|
||||
art.emit('pip', true);
|
||||
art.emit('pipEnabled');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function pipMix(art, player) {
|
||||
player.fullscreenWebExit();
|
||||
player.aspectRatioRemove();
|
||||
player.playbackRateRemove();
|
||||
art.emit('pip', false);
|
||||
art.emit('pipExit');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function playMix(art, player) {
|
||||
}
|
||||
|
||||
notice.show(i18n.get('Play'));
|
||||
art.emit('play', $video);
|
||||
art.emit('play');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -13,7 +13,7 @@ export default function playbackRateMix(art, player) {
|
||||
$video.playbackRate = newRate;
|
||||
$player.dataset.playbackRate = newRate;
|
||||
notice.show(`${i18n.get('Rate')}: ${newRate === 1 ? i18n.get('Normal') : `${newRate}x`}`);
|
||||
art.emit('playbackRate', newRate);
|
||||
art.emit('playbackRateChange', newRate);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -22,6 +22,7 @@ export default function playbackRateMix(art, player) {
|
||||
if (player.$playbackRateState) {
|
||||
player.playbackRate(1);
|
||||
delete $player.dataset.playbackRate;
|
||||
art.emit('playbackRateRemove');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -31,6 +32,7 @@ export default function playbackRateMix(art, player) {
|
||||
const { playbackRate } = $player.dataset;
|
||||
if (playbackRate) {
|
||||
player.playbackRate(Number(playbackRate));
|
||||
art.emit('playbackRateReset');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { setStyle, secondToTime } from '../utils';
|
||||
|
||||
export default function screenshotMix(art, player) {
|
||||
const { option, notice } = art;
|
||||
const { option, notice, refs: { $video } } = art;
|
||||
|
||||
function captureFrame() {
|
||||
const { $video } = art.refs;
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = $video.videoWidth;
|
||||
canvas.height = $video.videoHeight;
|
||||
@@ -17,16 +16,21 @@ export default function screenshotMix(art, player) {
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
document.body.removeChild(elink);
|
||||
return dataUri;
|
||||
}
|
||||
|
||||
Object.defineProperty(player, 'screenshot', {
|
||||
value: () => {
|
||||
const { crossOrigin } = $video;
|
||||
try {
|
||||
captureFrame();
|
||||
art.emit('screenshot');
|
||||
$video.crossOrigin = 'anonymous';
|
||||
const dataUri = captureFrame();
|
||||
art.emit('screenshot', dataUri);
|
||||
} catch (error) {
|
||||
notice.show(error);
|
||||
console.warn(error);
|
||||
} finally {
|
||||
$video.crossOrigin = crossOrigin;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function volumeMix(art, player) {
|
||||
if ($video.volume !== 0) {
|
||||
storage.set('volume', $video.volume);
|
||||
}
|
||||
art.emit('volume', $video.volume);
|
||||
art.emit('volumeChange', $video.volume);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -28,8 +28,14 @@ export default class Flip {
|
||||
const { flip } = target.dataset;
|
||||
if (flip) {
|
||||
player.flip(flip);
|
||||
inverseClass(target.parentElement, 'current');
|
||||
}
|
||||
});
|
||||
|
||||
art.on('flipChange', flip => {
|
||||
const $current = Array.from(this.$btns.querySelectorAll('span')).find(
|
||||
item => item.dataset.flip === flip
|
||||
);
|
||||
inverseClass($current.parentElement, 'current');
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -30,10 +30,10 @@ export default class Setting {
|
||||
}
|
||||
|
||||
add(setting, callback) {
|
||||
const { refs, i18n } = this.art;
|
||||
const { option } = setting;
|
||||
if (option && !option.disable) {
|
||||
id++;
|
||||
const { refs, i18n } = this.art;
|
||||
const name = option.name || `setting${id}`;
|
||||
const title = option.title || name;
|
||||
const $setting = document.createElement('div');
|
||||
@@ -41,9 +41,10 @@ export default class Setting {
|
||||
append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
|
||||
append($setting, '<div class="art-setting-body"></div>');
|
||||
setting.apply && setting.apply(this.art, $setting);
|
||||
callback && callback($setting);
|
||||
this[name] = $setting;
|
||||
insertByIndex(refs.$settingBody, $setting, option.index || id);
|
||||
this[name] = $setting;
|
||||
callback && callback($setting);
|
||||
this.art.emit('setting:add', $setting);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.show-indicator {
|
||||
&.art-show-indicator {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -225,7 +225,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.hover .art-qualitys{
|
||||
&.art-quality-hover .art-qualitys{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user