mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 13:56:15 -08:00
添加设置样式小工具
This commit is contained in:
Harvey Zack committed
1 parent
6e4087a080
commit
96a6e1eb0e
14 files changed
+113
-109
No files matched your search
@@ -1,11 +1,11 @@
|
||||
.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{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}.artplayer-video-player .art-icon svg{fill:#fff}
|
||||
.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}
|
||||
.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}.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-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-video-player .artplayer-layers .art-layer{position:absolute}
|
||||
.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;cursor:pointer}.artplayer-video-player .artplayer-mask .art-icon-playBig{position:absolute;right:30px;bottom:65px;opacity:.6}
|
||||
.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center}
|
||||
.artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:60;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-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{float:left;font-size:12px;height:36px;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px;padding:7px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-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{line-height:36px;padding:0 10px}.artplayer-video-player.controls-show .artplayer-bottom,.artplayer-video-player:hover .artplayer-bottom{opacity:1;visibilityLine truncated
|
||||
.artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:60;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{position:absolute;z-index:70;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-menu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-menu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-menu span.current,.artplayer-video-player .artplayer-contextmenu .art-menu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-menu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu:last-child{border-bottom:none}
|
||||
.artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:80;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}
|
||||
.artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
|
||||
|
||||
+49
-45
@@ -313,9 +313,13 @@
|
||||
|
||||
return parent.lastElementChild;
|
||||
}
|
||||
function setStyle(element, styles) {
|
||||
function setStyle(element, key, value) {
|
||||
element.style[key] = value;
|
||||
return element;
|
||||
}
|
||||
function setStyles(element, styles) {
|
||||
Object.keys(styles).forEach(function (key) {
|
||||
element.style[key] = styles[key];
|
||||
setStyle(element, key, styles[key]);
|
||||
});
|
||||
return element;
|
||||
}
|
||||
@@ -1334,7 +1338,7 @@
|
||||
this.$pause = append(this.option.$control, icons$1.pause);
|
||||
tooltip(this.$play, i18n.get('Play'));
|
||||
tooltip(this.$pause, i18n.get('Pause'));
|
||||
this.$pause.style.display = 'none';
|
||||
setStyle(this.$pause, 'display', 'none');
|
||||
proxy(this.$play, 'click', function () {
|
||||
player.play();
|
||||
});
|
||||
@@ -1342,12 +1346,12 @@
|
||||
player.pause();
|
||||
});
|
||||
art.on('video:playing', function () {
|
||||
_this.$play.style.display = 'none';
|
||||
_this.$pause.style.display = 'block';
|
||||
setStyle(_this.$play, 'display', 'none');
|
||||
setStyle(_this.$pause, 'display', 'block');
|
||||
});
|
||||
art.on('video:pause', function () {
|
||||
_this.$play.style.display = 'block';
|
||||
_this.$pause.style.display = 'none';
|
||||
setStyle(_this.$play, 'display', 'block');
|
||||
setStyle(_this.$pause, 'display', 'none');
|
||||
});
|
||||
}
|
||||
}]);
|
||||
@@ -1407,7 +1411,7 @@
|
||||
_this.set('played', 1);
|
||||
});
|
||||
proxy(this.option.$control, 'mousemove', function (event) {
|
||||
_this.$tip.style.display = 'block';
|
||||
setStyle(_this.$tip, 'display', 'block');
|
||||
|
||||
if (event.path.indexOf(_this.$highlight) > -1) {
|
||||
_this.showHighlight(event);
|
||||
@@ -1416,7 +1420,7 @@
|
||||
}
|
||||
});
|
||||
proxy(this.option.$control, 'mouseout', function () {
|
||||
_this.$tip.style.display = 'none';
|
||||
setStyle(_this.$tip, 'display', 'none');
|
||||
});
|
||||
proxy(this.option.$control, 'click', function (event) {
|
||||
if (event.target !== _this.$indicator) {
|
||||
@@ -1462,7 +1466,7 @@
|
||||
time = _event$target$dataset.time;
|
||||
this.$tip.innerHTML = text;
|
||||
var left = Number(time) / $video.duration * this.option.$control.clientWidth + event.target.clientWidth / 2 - this.$tip.clientWidth / 2;
|
||||
this.$tip.style.left = "".concat(left, "px");
|
||||
setStyle(this.$tip, 'left', "".concat(left, "px"));
|
||||
}
|
||||
}, {
|
||||
key: "showTime",
|
||||
@@ -1475,11 +1479,11 @@
|
||||
this.$tip.innerHTML = time;
|
||||
|
||||
if (width <= tipWidth / 2) {
|
||||
this.$tip.style.left = 0;
|
||||
setStyle(this.$tip, 'left', 0);
|
||||
} else if (width > this.option.$control.clientWidth - tipWidth / 2) {
|
||||
this.$tip.style.left = "".concat(this.option.$control.clientWidth - tipWidth, "px");
|
||||
setStyle(this.$tip, 'left', "".concat(this.option.$control.clientWidth - tipWidth, "px"));
|
||||
} else {
|
||||
this.$tip.style.left = "".concat(width - tipWidth / 2, "px");
|
||||
setStyle(this.$tip, 'left', "".concat(width - tipWidth / 2, "px"));
|
||||
}
|
||||
}
|
||||
}, {
|
||||
@@ -1518,10 +1522,10 @@
|
||||
}, {
|
||||
key: "set",
|
||||
value: function set(type, percentage) {
|
||||
this["$".concat(type)].style.width = "".concat(percentage * 100, "%");
|
||||
setStyle(this["$".concat(type)], 'width', "".concat(percentage * 100, "%"));
|
||||
|
||||
if (type === 'played') {
|
||||
this.$indicator.style.left = "calc(".concat(percentage * 100, "% - 6.5px)");
|
||||
setStyle(this.$indicator, 'left', "calc(".concat(percentage * 100, "% - 6.5px)"));
|
||||
}
|
||||
}
|
||||
}]);
|
||||
@@ -1550,16 +1554,16 @@
|
||||
this.$subtitleClose = append(this.option.$control, icons$1.subtitleClose);
|
||||
tooltip(this.$subtitle, i18n.get('Hide subtitle'));
|
||||
tooltip(this.$subtitleClose, i18n.get('Show subtitle'));
|
||||
this.$subtitleClose.style.display = 'none';
|
||||
setStyle(this.$subtitleClose, 'display', 'none');
|
||||
proxy(this.$subtitle, 'click', function () {
|
||||
subtitle.hide();
|
||||
_this.$subtitle.style.display = 'none';
|
||||
_this.$subtitleClose.style.display = 'block';
|
||||
setStyle(_this.$subtitle, 'display', 'none');
|
||||
setStyle(_this.$subtitleClose, 'display', 'block');
|
||||
});
|
||||
proxy(this.$subtitleClose, 'click', function () {
|
||||
subtitle.show();
|
||||
_this.$subtitle.style.display = 'block';
|
||||
_this.$subtitleClose.style.display = 'none';
|
||||
setStyle(_this.$subtitle, 'display', 'block');
|
||||
setStyle(_this.$subtitleClose, 'display', 'none');
|
||||
});
|
||||
}
|
||||
}]);
|
||||
@@ -1639,18 +1643,18 @@
|
||||
this.$volumePanel = append(this.option.$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'));
|
||||
this.$volumeClose.style.display = 'none';
|
||||
setStyle(this.$volumeClose, 'display', 'none');
|
||||
var volume = getStorage('volume');
|
||||
this.setVolumeHandle(volume);
|
||||
player.volume(volume);
|
||||
proxy(this.$volume, 'click', function () {
|
||||
_this.$volume.style.display = 'none';
|
||||
_this.$volumeClose.style.display = 'block';
|
||||
setStyle(_this.$volume, 'display', 'none');
|
||||
setStyle(_this.$volumeClose, 'display', 'block');
|
||||
player.volume(0);
|
||||
});
|
||||
proxy(this.$volumeClose, 'click', function () {
|
||||
_this.$volume.style.display = 'block';
|
||||
_this.$volumeClose.style.display = 'none';
|
||||
setStyle(_this.$volume, 'display', 'block');
|
||||
setStyle(_this.$volumeClose, 'display', 'none');
|
||||
player.volume(getStorage('volume'));
|
||||
});
|
||||
proxy(this.option.$control, 'mouseenter', function () {
|
||||
@@ -1686,11 +1690,11 @@
|
||||
_this.setVolumeHandle(percentage);
|
||||
|
||||
if (percentage === 0) {
|
||||
_this.$volume.style.display = 'none';
|
||||
_this.$volumeClose.style.display = 'block';
|
||||
setStyle(_this.$volume, 'display', 'none');
|
||||
setStyle(_this.$volumeClose, 'display', 'block');
|
||||
} else {
|
||||
_this.$volume.style.display = 'block';
|
||||
_this.$volumeClose.style.display = 'none';
|
||||
setStyle(_this.$volume, 'display', 'block');
|
||||
setStyle(_this.$volumeClose, 'display', 'none');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1721,7 +1725,7 @@
|
||||
handleWidth = _this$$volumeHandle$g2.width;
|
||||
|
||||
var width = handleWidth / 2 + (panelWidth - handleWidth) * percentage - handleWidth / 2;
|
||||
this.$volumeHandle.style.left = "".concat(width, "px");
|
||||
setStyle(this.$volumeHandle, 'left', "".concat(width, "px"));
|
||||
}
|
||||
}]);
|
||||
|
||||
@@ -1782,13 +1786,13 @@
|
||||
}
|
||||
|
||||
if (_this.isLoad) {
|
||||
_this.option.$control.style.display = 'block';
|
||||
setStyle(_this.option.$control, 'display', 'block');
|
||||
|
||||
_this.showThumbnails(event);
|
||||
}
|
||||
});
|
||||
proxy($progress, 'mouseout', function () {
|
||||
_this.option.$control.style.display = 'none';
|
||||
setStyle(_this.option.$control, 'display', 'none');
|
||||
});
|
||||
}
|
||||
}, {
|
||||
@@ -1832,17 +1836,17 @@
|
||||
var perIndex = Math.ceil(posWidth / perWidth);
|
||||
var yIndex = Math.ceil(perIndex / column);
|
||||
var xIndex = perIndex % column || column;
|
||||
this.option.$control.style.backgroundImage = "url(".concat(url, ")");
|
||||
this.option.$control.style.height = "".concat(height, "px");
|
||||
this.option.$control.style.width = "".concat(width, "px");
|
||||
this.option.$control.style.backgroundPosition = "-".concat(--xIndex * width, "px -").concat(--yIndex * height, "px");
|
||||
setStyle(this.option.$control, 'backgroundImage', "url(".concat(url, ")"));
|
||||
setStyle(this.option.$control, 'height', "".concat(height, "px"));
|
||||
setStyle(this.option.$control, 'width', "".concat(width, "px"));
|
||||
setStyle(this.option.$control, 'backgroundPosition', "-".concat(--xIndex * width, "px -").concat(--yIndex * height, "px"));
|
||||
|
||||
if (posWidth <= width / 2) {
|
||||
this.option.$control.style.left = 0;
|
||||
setStyle(this.option.$control, 'left', 0);
|
||||
} else if (posWidth > $progress.clientWidth - width / 2) {
|
||||
this.option.$control.style.left = "".concat($progress.clientWidth - width, "px");
|
||||
setStyle(this.option.$control, 'left', "".concat($progress.clientWidth - width, "px"));
|
||||
} else {
|
||||
this.option.$control.style.left = "".concat(posWidth - width / 2, "px");
|
||||
setStyle(this.option.$control, 'left', "".concat(posWidth - width / 2, "px"));
|
||||
}
|
||||
}
|
||||
}]);
|
||||
@@ -1889,7 +1893,7 @@
|
||||
canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
var dataUri = canvas.toDataURL('image/png');
|
||||
var elink = document.createElement('a');
|
||||
elink.style.display = 'none';
|
||||
setStyle(elink, 'display', 'none');
|
||||
elink.href = dataUri;
|
||||
elink.download = "".concat(secondToTime($video.currentTime), ".png");
|
||||
document.body.appendChild(elink);
|
||||
@@ -2041,14 +2045,14 @@
|
||||
|
||||
Object.defineProperty(control, 'hide', {
|
||||
value: function value() {
|
||||
control.option.$control.style.display = 'none';
|
||||
setStyle(control.option.$control, 'display', 'none');
|
||||
|
||||
_this4.art.emit('control:hide', control.option.$control);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(control, 'show', {
|
||||
value: function value() {
|
||||
control.option.$control.style.display = 'block';
|
||||
setStyle(control.option.$control, 'display', 'block');
|
||||
|
||||
_this4.art.emit('control:show', control.option.$control);
|
||||
}
|
||||
@@ -2188,7 +2192,7 @@
|
||||
$menu.setAttribute('data-art-menu-id', id$1);
|
||||
$menu.setAttribute('class', "art-menu art-menu-".concat(item.name || id$1));
|
||||
append($menu, item.html);
|
||||
setStyle($menu, item.style || {});
|
||||
setStyles($menu, item.style || {});
|
||||
|
||||
if (item.click) {
|
||||
proxy($menu, 'click', function (event) {
|
||||
@@ -2403,7 +2407,7 @@
|
||||
_this$art$refs = _this$art.refs,
|
||||
$video = _this$art$refs.$video,
|
||||
$subtitle = _this$art$refs.$subtitle;
|
||||
setStyle($subtitle, subtitle.style || {});
|
||||
setStyles($subtitle, subtitle.style || {});
|
||||
var $track = document.createElement('track');
|
||||
$track.default = true;
|
||||
$track.kind = 'metadata';
|
||||
@@ -2652,7 +2656,7 @@
|
||||
$layer.setAttribute('class', "art-layer art-layer-".concat(option.name || id$2));
|
||||
$layer.style.zIndex = option.index || id$2;
|
||||
append($layer, option.html);
|
||||
setStyle($layer, option.style || {});
|
||||
setStyles($layer, option.style || {});
|
||||
refs.$layers.appendChild($layer);
|
||||
this.art.emit('layers:add', $layer);
|
||||
callback && callback($layer);
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../node_modules/kind-of/index.js","../../node_modules/option-validator/index.js","../../src/scheme/validElement.js","../../src/scheme/index.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../src/icons/index.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/screenshot.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _construct(Parent, args, Class) {\n if (isNativeReflectConstruct()) {\n module.exports = _construct = Reflect.construct;\n } else {\n module.exports = _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n }\n}\n\nmodule.exports = _arrayWithoutHoles;","function _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;","function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\nmodule.exports = _nonIterableSpread;","var arrayWithoutHoles = require(\"./arrayWithoutHoles\");\n\nvar iterableToArray = require(\"./iterableToArray\");\n\nvar nonIterableSpread = require(\"./nonIterableSpread\");\n\nfunction _toConsumableArray(arr) {\n return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();\n}\n\nmodule.exports = _toConsumableArray;","function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n Line truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../node_modules/kind-of/index.js","../../node_modules/option-validator/index.js","../../src/scheme/validElement.js","../../src/scheme/index.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../src/icons/index.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/screenshot.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _construct(Parent, args, Class) {\n if (isNativeReflectConstruct()) {\n module.exports = _construct = Reflect.construct;\n } else {\n module.exports = _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n }\n}\n\nmodule.exports = _arrayWithoutHoles;","function _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;","function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\nmodule.exports = _nonIterableSpread;","var arrayWithoutHoles = require(\"./arrayWithoutHoles\");\n\nvar iterableToArray = require(\"./iterableToArray\");\n\nvar nonIterableSpread = require(\"./nonIterableSpread\");\n\nfunction _toConsumableArray(arr) {\n return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();\n}\n\nmodule.exports = _toConsumableArray;","function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n Line truncated
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
import { append, setStyle } from './utils';
|
||||
import { append, setStyles } from './utils';
|
||||
|
||||
let id = 0;
|
||||
export default class Contextmenu {
|
||||
@@ -93,7 +93,7 @@ export default class Contextmenu {
|
||||
$menu.setAttribute('data-art-menu-id', id);
|
||||
$menu.setAttribute('class', `art-menu art-menu-${item.name || id}`);
|
||||
append($menu, item.html);
|
||||
setStyle($menu, item.style || {});
|
||||
setStyles($menu, item.style || {});
|
||||
if (item.click) {
|
||||
proxy($menu, 'click', event => {
|
||||
event.preventDefault();
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { setStyle } from '../utils';
|
||||
import Danmu from './danmu';
|
||||
import Fullscreen from './fullscreen';
|
||||
import Pip from './pip';
|
||||
@@ -138,14 +139,14 @@ export default class Controls {
|
||||
commonMethod(control) {
|
||||
Object.defineProperty(control, 'hide', {
|
||||
value: () => {
|
||||
control.option.$control.style.display = 'none';
|
||||
setStyle(control.option.$control, 'display', 'none');
|
||||
this.art.emit('control:hide', control.option.$control);
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(control, 'show', {
|
||||
value: () => {
|
||||
control.option.$control.style.display = 'block';
|
||||
setStyle(control.option.$control, 'display', 'block');
|
||||
this.art.emit('control:show', control.option.$control);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { append, tooltip } from '../utils';
|
||||
import { append, tooltip, setStyle } from '../utils';
|
||||
import icons from '../icons';
|
||||
|
||||
export default class PlayAndPause {
|
||||
@@ -12,7 +12,7 @@ export default class PlayAndPause {
|
||||
this.$pause = append(this.option.$control, icons.pause);
|
||||
tooltip(this.$play, i18n.get('Play'));
|
||||
tooltip(this.$pause, i18n.get('Pause'));
|
||||
this.$pause.style.display = 'none';
|
||||
setStyle(this.$pause, 'display', 'none');
|
||||
|
||||
proxy(this.$play, 'click', () => {
|
||||
player.play();
|
||||
@@ -23,13 +23,13 @@ export default class PlayAndPause {
|
||||
});
|
||||
|
||||
art.on('video:playing', () => {
|
||||
this.$play.style.display = 'none';
|
||||
this.$pause.style.display = 'block';
|
||||
setStyle(this.$play, 'display', 'none');
|
||||
setStyle(this.$pause, 'display', 'block');
|
||||
});
|
||||
|
||||
art.on('video:pause', () => {
|
||||
this.$play.style.display = 'block';
|
||||
this.$pause.style.display = 'none';
|
||||
setStyle(this.$play, 'display', 'block');
|
||||
setStyle(this.$pause, 'display', 'none');
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { append, clamp, secondToTime } from '../utils';
|
||||
import { append, clamp, secondToTime, setStyle } from '../utils';
|
||||
|
||||
export default class Progress {
|
||||
constructor(option) {
|
||||
@@ -63,7 +63,7 @@ export default class Progress {
|
||||
});
|
||||
|
||||
proxy(this.option.$control, 'mousemove', event => {
|
||||
this.$tip.style.display = 'block';
|
||||
setStyle(this.$tip, 'display', 'block');
|
||||
if (event.path.indexOf(this.$highlight) > -1) {
|
||||
this.showHighlight(event);
|
||||
} else {
|
||||
@@ -72,7 +72,7 @@ export default class Progress {
|
||||
});
|
||||
|
||||
proxy(this.option.$control, 'mouseout', () => {
|
||||
this.$tip.style.display = 'none';
|
||||
setStyle(this.$tip, 'display', 'none');
|
||||
});
|
||||
|
||||
proxy(this.option.$control, 'click', event => {
|
||||
@@ -112,7 +112,7 @@ export default class Progress {
|
||||
Number(time) / $video.duration * this.option.$control.clientWidth +
|
||||
event.target.clientWidth / 2 -
|
||||
this.$tip.clientWidth / 2;
|
||||
this.$tip.style.left = `${left}px`;
|
||||
setStyle(this.$tip, 'left', `${left}px`);
|
||||
}
|
||||
|
||||
showTime(event) {
|
||||
@@ -120,11 +120,11 @@ export default class Progress {
|
||||
const tipWidth = this.$tip.clientWidth;
|
||||
this.$tip.innerHTML = time;
|
||||
if (width <= tipWidth / 2) {
|
||||
this.$tip.style.left = 0;
|
||||
setStyle(this.$tip, 'left', 0);
|
||||
} else if (width > this.option.$control.clientWidth - tipWidth / 2) {
|
||||
this.$tip.style.left = `${this.option.$control.clientWidth - tipWidth}px`;
|
||||
setStyle(this.$tip, 'left', `${this.option.$control.clientWidth - tipWidth}px`);
|
||||
} else {
|
||||
this.$tip.style.left = `${width - tipWidth / 2}px`;
|
||||
setStyle(this.$tip, 'left', `${width - tipWidth / 2}px`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -151,9 +151,9 @@ export default class Progress {
|
||||
}
|
||||
|
||||
set(type, percentage) {
|
||||
this[`$${type}`].style.width = `${percentage * 100}%`;
|
||||
setStyle(this[`$${type}`], 'width', `${percentage * 100}%`);
|
||||
if (type === 'played') {
|
||||
this.$indicator.style.left = `calc(${percentage * 100}% - 6.5px)`;
|
||||
setStyle(this.$indicator, 'left', `calc(${percentage * 100}% - 6.5px)`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { append, tooltip, secondToTime } from '../utils';
|
||||
import { append, tooltip, secondToTime, setStyle } from '../utils';
|
||||
import icons from '../icons';
|
||||
|
||||
export default class Screenshot {
|
||||
@@ -28,7 +28,7 @@ export default class Screenshot {
|
||||
canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
const dataUri = canvas.toDataURL('image/png');
|
||||
const elink = document.createElement('a');
|
||||
elink.style.display = 'none';
|
||||
setStyle(elink, 'display', 'none');
|
||||
elink.href = dataUri;
|
||||
elink.download = `${secondToTime($video.currentTime)}.png`;
|
||||
document.body.appendChild(elink);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { append, tooltip } from '../utils';
|
||||
import { append, tooltip, setStyle } from '../utils';
|
||||
import icons from '../icons';
|
||||
|
||||
export default class Subtitle {
|
||||
@@ -12,18 +12,18 @@ export default class Subtitle {
|
||||
this.$subtitleClose = append(this.option.$control, icons.subtitleClose);
|
||||
tooltip(this.$subtitle, i18n.get('Hide subtitle'));
|
||||
tooltip(this.$subtitleClose, i18n.get('Show subtitle'));
|
||||
this.$subtitleClose.style.display = 'none';
|
||||
setStyle(this.$subtitleClose, 'display', 'none');
|
||||
|
||||
proxy(this.$subtitle, 'click', () => {
|
||||
subtitle.hide();
|
||||
this.$subtitle.style.display = 'none';
|
||||
this.$subtitleClose.style.display = 'block';
|
||||
setStyle(this.$subtitle, 'display', 'none');
|
||||
setStyle(this.$subtitleClose, 'display', 'block');
|
||||
});
|
||||
|
||||
proxy(this.$subtitleClose, 'click', () => {
|
||||
subtitle.show();
|
||||
this.$subtitle.style.display = 'block';
|
||||
this.$subtitleClose.style.display = 'none';
|
||||
setStyle(this.$subtitle, 'display', 'block');
|
||||
setStyle(this.$subtitleClose, 'display', 'none');
|
||||
});
|
||||
}
|
||||
}
|
||||
+10
-10
@@ -1,4 +1,4 @@
|
||||
import { errorHandle } from '../utils';
|
||||
import { errorHandle, setStyle } from '../utils';
|
||||
|
||||
export default class Thumbnails {
|
||||
constructor(option) {
|
||||
@@ -27,13 +27,13 @@ export default class Thumbnails {
|
||||
}
|
||||
|
||||
if (this.isLoad) {
|
||||
this.option.$control.style.display = 'block';
|
||||
setStyle(this.option.$control, 'display', 'block');
|
||||
this.showThumbnails(event);
|
||||
}
|
||||
});
|
||||
|
||||
proxy($progress, 'mouseout', () => {
|
||||
this.option.$control.style.display = 'none';
|
||||
setStyle(this.option.$control, 'display', 'none');
|
||||
});
|
||||
}
|
||||
|
||||
@@ -63,17 +63,17 @@ export default class Thumbnails {
|
||||
let yIndex = Math.ceil(perIndex / column);
|
||||
let xIndex = perIndex % column || column;
|
||||
|
||||
this.option.$control.style.backgroundImage = `url(${url})`;
|
||||
this.option.$control.style.height = `${height}px`;
|
||||
this.option.$control.style.width = `${width}px`;
|
||||
this.option.$control.style.backgroundPosition = `-${--xIndex * width}px -${--yIndex * height}px`;
|
||||
setStyle(this.option.$control, 'backgroundImage', `url(${url})`);
|
||||
setStyle(this.option.$control, 'height', `${height}px`);
|
||||
setStyle(this.option.$control, 'width', `${width}px`);
|
||||
setStyle(this.option.$control, 'backgroundPosition', `-${--xIndex * width}px -${--yIndex * height}px`);
|
||||
|
||||
if (posWidth <= width / 2) {
|
||||
this.option.$control.style.left = 0;
|
||||
setStyle(this.option.$control, 'left', 0);
|
||||
} else if (posWidth > $progress.clientWidth - width / 2) {
|
||||
this.option.$control.style.left = `${$progress.clientWidth - width}px`;
|
||||
setStyle(this.option.$control, 'left', `${$progress.clientWidth - width}px`);
|
||||
} else {
|
||||
this.option.$control.style.left = `${posWidth - width / 2}px`;
|
||||
setStyle(this.option.$control, 'left', `${posWidth - width / 2}px`);
|
||||
}
|
||||
}
|
||||
}
|
||||
+11
-11
@@ -1,4 +1,4 @@
|
||||
import { append, getStorage, clamp, tooltip } from '../utils';
|
||||
import { append, getStorage, clamp, tooltip, setStyle } from '../utils';
|
||||
import icons from '../icons';
|
||||
|
||||
export default class Volume {
|
||||
@@ -19,21 +19,21 @@ export default class Volume {
|
||||
this.$volumePanel = append(this.option.$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'));
|
||||
this.$volumeClose.style.display = 'none';
|
||||
setStyle(this.$volumeClose, 'display', 'none');
|
||||
|
||||
const volume = getStorage('volume');
|
||||
this.setVolumeHandle(volume);
|
||||
player.volume(volume);
|
||||
|
||||
proxy(this.$volume, 'click', () => {
|
||||
this.$volume.style.display = 'none';
|
||||
this.$volumeClose.style.display = 'block';
|
||||
setStyle(this.$volume, 'display', 'none');
|
||||
setStyle(this.$volumeClose, 'display', 'block');
|
||||
player.volume(0);
|
||||
});
|
||||
|
||||
proxy(this.$volumeClose, 'click', () => {
|
||||
this.$volume.style.display = 'block';
|
||||
this.$volumeClose.style.display = 'none';
|
||||
setStyle(this.$volume, 'display', 'block');
|
||||
setStyle(this.$volumeClose, 'display', 'none');
|
||||
player.volume(getStorage('volume'));
|
||||
});
|
||||
|
||||
@@ -74,11 +74,11 @@ export default class Volume {
|
||||
const percentage = player.volume();
|
||||
this.setVolumeHandle(percentage);
|
||||
if (percentage === 0) {
|
||||
this.$volume.style.display = 'none';
|
||||
this.$volumeClose.style.display = 'block';
|
||||
setStyle(this.$volume, 'display', 'none');
|
||||
setStyle(this.$volumeClose, 'display', 'block');
|
||||
} else {
|
||||
this.$volume.style.display = 'block';
|
||||
this.$volumeClose.style.display = 'none';
|
||||
setStyle(this.$volume, 'display', 'block');
|
||||
setStyle(this.$volumeClose, 'display', 'none');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -95,6 +95,6 @@ export default class Volume {
|
||||
const { width: panelWidth } = this.$volumePanel.getBoundingClientRect();
|
||||
const { width: handleWidth } = this.$volumeHandle.getBoundingClientRect();
|
||||
const width = handleWidth / 2 + (panelWidth - handleWidth) * percentage - handleWidth / 2;
|
||||
this.$volumeHandle.style.left = `${width}px`;
|
||||
setStyle(this.$volumeHandle, 'left', `${width}px`);
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
import { append, setStyle } from './utils';
|
||||
import { append, setStyles } from './utils';
|
||||
|
||||
let id = 0;
|
||||
export default class Layers {
|
||||
@@ -27,7 +27,7 @@ export default class Layers {
|
||||
$layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);
|
||||
$layer.style.zIndex = option.index || id;
|
||||
append($layer, option.html);
|
||||
setStyle($layer, option.style || {});
|
||||
setStyles($layer, option.style || {});
|
||||
refs.$layers.appendChild($layer);
|
||||
this.art.emit('layers:add', $layer);
|
||||
callback && callback($layer);
|
||||
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
import { errorHandle, getExt, setStyle } from './utils';
|
||||
import { errorHandle, getExt, setStyles } from './utils';
|
||||
|
||||
export default class Subtitle {
|
||||
constructor(art) {
|
||||
@@ -18,7 +18,7 @@ export default class Subtitle {
|
||||
refs: { $video, $subtitle }
|
||||
} = this.art;
|
||||
|
||||
setStyle($subtitle, subtitle.style || {});
|
||||
setStyles($subtitle, subtitle.style || {});
|
||||
const $track = document.createElement('track');
|
||||
$track.default = true;
|
||||
$track.kind = 'metadata';
|
||||
|
||||
+7
-8
@@ -44,9 +44,14 @@ export function append(parent, child) {
|
||||
return parent.lastElementChild;
|
||||
}
|
||||
|
||||
export function setStyle(element, styles) {
|
||||
export function setStyle(element, key, value) {
|
||||
element.style[key] = value;
|
||||
return element;
|
||||
}
|
||||
|
||||
export function setStyles(element, styles) {
|
||||
Object.keys(styles).forEach(key => {
|
||||
element.style[key] = styles[key];
|
||||
setStyle(element, key, styles[key]);
|
||||
});
|
||||
return element;
|
||||
}
|
||||
@@ -98,12 +103,6 @@ export function setStorage(key, value) {
|
||||
localStorage.setItem('artplayer_settings', JSON.stringify(storage));
|
||||
}
|
||||
|
||||
export function getType(val) {
|
||||
const { toString } = Object.prototype;
|
||||
const type = toString.call(val).slice(8, -1).toLowerCase().replace(/\s/g, '');
|
||||
return type;
|
||||
}
|
||||
|
||||
export function tooltip(target, msg, pos = 'up') {
|
||||
target.setAttribute('data-balloon', msg);
|
||||
target.setAttribute('data-balloon-pos', pos);
|
||||
|
||||
Reference in new issue
Block a user