添加设置样式小工具

docs/css/artplayer.css

@@ -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}

docs/js/artplayer.js

@@ -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';
+	        setStyle(_this.$play, 'display', 'none');
-	        _this.$pause.style.display = 'block';
+	        setStyle(_this.$pause, 'display', 'block');
 	      });
 	      art.on('video:pause', function () {
-	        _this.$play.style.display = 'block';
+	        setStyle(_this.$play, 'display', 'block');
-	        _this.$pause.style.display = 'none';
+	        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';
+	        setStyle(_this.$subtitle, 'display', 'none');
-	        _this.$subtitleClose.style.display = 'block';
+	        setStyle(_this.$subtitleClose, 'display', 'block');
 	      });
 	      proxy(this.$subtitleClose, 'click', function () {
 	        subtitle.show();
-	        _this.$subtitle.style.display = 'block';
+	        setStyle(_this.$subtitle, 'display', 'block');
-	        _this.$subtitleClose.style.display = 'none';
+	        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';
+	        setStyle(_this.$volume, 'display', 'none');
-	        _this.$volumeClose.style.display = 'block';
+	        setStyle(_this.$volumeClose, 'display', 'block');
 	        player.volume(0);
 	      });
 	      proxy(this.$volumeClose, 'click', function () {
-	        _this.$volume.style.display = 'block';
+	        setStyle(_this.$volume, 'display', 'block');
-	        _this.$volumeClose.style.display = 'none';
+	        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';
+	          setStyle(_this.$volume, 'display', 'none');
-	          _this.$volumeClose.style.display = 'block';
+	          setStyle(_this.$volumeClose, 'display', 'block');
 	        } else {
-	          _this.$volume.style.display = 'block';
+	          setStyle(_this.$volume, 'display', 'block');
-	          _this.$volumeClose.style.display = 'none';
+	          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, ")");
+	      setStyle(this.option.$control, 'backgroundImage', "url(".concat(url, ")"));
-	      this.option.$control.style.height = "".concat(height, "px");
+	      setStyle(this.option.$control, 'height', "".concat(height, "px"));
-	      this.option.$control.style.width = "".concat(width, "px");
+	      setStyle(this.option.$control, 'width', "".concat(width, "px"));
-	      this.option.$control.style.backgroundPosition = "-".concat(--xIndex * width, "px -").concat(--yIndex * height, "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);

docs/js/artplayer.js.map

@@ -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

src/contextmenu.js

@@ -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();

src/controls/index.js

@@ -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);
       }
     });

src/controls/playAndPause.js

@@ -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';
+      setStyle(this.$play, 'display', 'none');
-      this.$pause.style.display = 'block';
+      setStyle(this.$pause, 'display', 'block');
     });
 
     art.on('video:pause', () => {
-      this.$play.style.display = 'block';
+      setStyle(this.$play, 'display', 'block');
-      this.$pause.style.display = 'none';
+      setStyle(this.$pause, 'display', 'none');
     });
   }
 }

src/controls/progress.js

@@ -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)`);
     }
   }
 }

src/controls/screenshot.js

@@ -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);

src/controls/subtitle.js

@@ -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';
+      setStyle(this.$subtitle, 'display', 'none');
-      this.$subtitleClose.style.display = 'block';
+      setStyle(this.$subtitleClose, 'display', 'block');
     });
 
     proxy(this.$subtitleClose, 'click', () => {
       subtitle.show();
-      this.$subtitle.style.display = 'block';
+      setStyle(this.$subtitle, 'display', 'block');
-      this.$subtitleClose.style.display = 'none';
+      setStyle(this.$subtitleClose, 'display', 'none');
     });
   }
 }

src/controls/thumbnails.js

@@ -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})`;
+    setStyle(this.option.$control, 'backgroundImage', `url(${url})`);
-    this.option.$control.style.height = `${height}px`;
+    setStyle(this.option.$control, 'height', `${height}px`);
-    this.option.$control.style.width = `${width}px`;
+    setStyle(this.option.$control, 'width', `${width}px`);
-    this.option.$control.style.backgroundPosition = `-${--xIndex * width}px -${--yIndex * height}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`);
     }
   }
 }

src/controls/volume.js

@@ -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';
+      setStyle(this.$volume, 'display', 'none');
-      this.$volumeClose.style.display = 'block';
+      setStyle(this.$volumeClose, 'display', 'block');
       player.volume(0);
     });
 
     proxy(this.$volumeClose, 'click', () => {
-      this.$volume.style.display = 'block';
+      setStyle(this.$volume, 'display', 'block');
-      this.$volumeClose.style.display = 'none';
+      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';
+        setStyle(this.$volume, 'display', 'none');
-        this.$volumeClose.style.display = 'block';
+        setStyle(this.$volumeClose, 'display', 'block');
       } else {
-        this.$volume.style.display = 'block';
+        setStyle(this.$volume, 'display', 'block');
-        this.$volumeClose.style.display = 'none';
+        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`);
   }
 }

src/layers.js

@@ -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);

src/subtitle.js

@@ -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';

src/utils/index.js

@@ -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);