格式化

.eslintrc

@@ -10,6 +10,8 @@
       "jQuery": false
   },
   "rules": {
+      "class-methods-use-this": 0,
+      "no-console": 0,
       "import/no-cycle": 1,
       "no-const-assign": 1,
       "no-shadow": 0,

docs/lab/css/artplayer.css

@@ -1,15 +1,15 @@
 .artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer}
-.artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
 .artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
 .artplayer-video-player .artplayer-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%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
 .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-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-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;line-height:36px;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume Line truncated
 .artplayer-video-player .artplayer-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-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
 .artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
 .artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}
-.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:300px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
 .artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
 .artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
 .artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-icon-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}

docs/lab/js/artplayer.js

@@ -4,6 +4,36 @@
   (factory((global.artplayer = {})));
 }(this, (function (exports) { 'use strict';
 
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) {
+      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+        arr2[i] = arr[i];
+      }
+
+      return arr2;
+    }
+  }
+
+  var arrayWithoutHoles = _arrayWithoutHoles;
+
+  function _iterableToArray(iter) {
+    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+  }
+
+  var iterableToArray = _iterableToArray;
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance");
+  }
+
+  var nonIterableSpread = _nonIterableSpread;
+
+  function _toConsumableArray(arr) {
+    return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();
+  }
+
+  var toConsumableArray = _toConsumableArray;
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -121,73 +151,163 @@
 
   var inherits = _inherits;
 
-  function _defineProperty(obj, key, value) {
+  function E () {
-    if (key in obj) {
+    // Keep this empty so it's easier to inherit from
-      Object.defineProperty(obj, key, {
+    // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
-        value: value,
+  }
-        enumerable: true,
+
-        configurable: true,
+  E.prototype = {
-        writable: true
+    on: function (name, callback, ctx) {
+      var e = this.e || (this.e = {});
+
+      (e[name] || (e[name] = [])).push({
+        fn: callback,
+        ctx: ctx
       });
+
+      return this;
+    },
+
+    once: function (name, callback, ctx) {
+      var self = this;
+      function listener () {
+        self.off(name, listener);
+        callback.apply(ctx, arguments);
+      }
+      listener._ = callback;
+      return this.on(name, listener, ctx);
+    },
+
+    emit: function (name) {
+      var data = [].slice.call(arguments, 1);
+      var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+      var i = 0;
+      var len = evtArr.length;
+
+      for (i; i < len; i++) {
+        evtArr[i].fn.apply(evtArr[i].ctx, data);
+      }
+
+      return this;
+    },
+
+    off: function (name, callback) {
+      var e = this.e || (this.e = {});
+      var evts = e[name];
+      var liveEvents = [];
+
+      if (evts && callback) {
+        for (var i = 0, len = evts.length; i < len; i++) {
+          if (evts[i].fn !== callback && evts[i].fn._ !== callback)
+            liveEvents.push(evts[i]);
+        }
+      }
+
+      // Remove event from queue to prevent memory leak
+      // Suggested by https://github.com/lazd
+      // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
+
+      (liveEvents.length)
+        ? e[name] = liveEvents
+        : delete e[name];
+
+      return this;
+    }
+  };
+
+  var tinyEmitter = E;
+
+  var optionValidator = createCommonjsModule(function (module, exports) {
+  !function(r,t){module.exports=t();}(commonjsGlobal,function(){function c(r){return (c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r})(r)}var u=Object.prototype.toString,i=function(r){if(void 0===r)return "undefined";if(null===r)return "null";var t,e,n,o,a,i=c(r);if("boolean"===i)return "boolean";if("string"===i)return "string";if("number"===i)return "number";if("symbol"===i)return "symbol";if("function"===i)return "GeneratorFunction"===f(r)?"generatorfunction":"function";if(t=r,Array.isArray?Array.isArray(t):t instanceof Array)return "array";if(function(r){if(r.constructor&&"function"==typeof r.constructor.isBuffer)return r.constructor.isBuffer(r);return !1}(r))return "buffer";if(function(r){try{if("number"==typeof r.length&&"function"==typeof r.callee)return !0}catch(r){if(-1!==r.message.indexOf("callee"))return !0}return !1}(r))return "arguments";if((e=r)instanceof Date||"function"==typeof e.toDateString&&"function"==typeof e.getDate&&"function"==typeof e.setDate)return "date";if((n=r)instanceof Error||"string"==typeof n.message&&n.constructor&&"number"==typeof n.constructor.stackTraceLimit)return "error";if((o=r)instanceof RegExp||"string"==typeof o.flags&&"boolean"==typeof o.ignoreCase&&"boolean"==typeof o.multiline&&"boolean"==typeof o.global)return "regexp";switch(f(r)){case"Symbol":return "symbol";case"Promise":return "promise";case"WeakMap":return "weakmap";case"WeakSet":return "weakset";case"Map":return "map";case"Set":return "set";case"Int8Array":return "int8array";case"Uint8Array":return "uint8array";case"Uint8ClampedArray":return "uint8clampedarray";case"Int16Array":return "int16array";case"Uint16Array":return "uint16array";case"Int32Array":return "int32array";case"Uint32Array":return "uint32array";case"Float32Array":return "float32array";case"Float64Array":return "float64array"}if("function"==typeof(a=r).throw&&"function"==typeof a.return&&"function"==typeof a.next)return "generator";switch(i=u.call(r)){case"[object Object]":return "object";case"[object Map Iterator]":return "mapiterator";case"[object Set Iterator]":return "setiterator";case"[object String Iterator]":return "stringiterator";case"[object Array Iterator]":return "arrayiterator"}return i.slice(8,-1).toLowerCase().replace(/\s/g,"")};function f(r){return r.constructor?r.constructor.name:null}function a(r,t){var e=2<arguments.length&&void 0!==arguments[2]?arguments[2]:["option"];for(var n in y(r,t,e),l(r,t,e),p(r,t,e),t)if(t.hasOwnProperty(n)){var o=r[n],a=t[n],i=e.concat(n);if(s(r,n,a,i))continue;y(o,a,i),l(o,a,i),p(o,a,i);}}function s(r,t,e,n){if(!Object.prototype.hasOwnProperty.call(r,t)){if(!0===e.__required__||!0===e.required)throw new TypeError("'".concat(n.join("."),"' is required"));return !0}}function y(r,t,e){var n;if("string"===i(t)?n=t:"function"===i(t)?t.___validator__=t:t.__type__?n=t.__type__:t.type&&(n=t.type),n&&"string"===i(n)){n=n.trim().toLowerCase();var o=i(r),a=o===n;if(-1<n.indexOf("|"))a=n.split("|").filter(Boolean).some(function(r){return o===r.trim()});if(!a)throw new TypeError("'".concat(e.join("."),"' require '").concat(n,"' type, but got '").concat(o,"'"))}}function l(r,t,e){var n;if(t.___validator__?n=t.___validator__:t.validator&&(n=t.validator),"function"===i(n)){var o=n(e,r,i(r));if(!0!==o)throw new TypeError("The scheme for '".concat(e.join("."),"' validator function require return true, but got '").concat(o,"'"))}}function p(r,t,e){var n;if(t.___child__?n=t.___child__:t.child&&(n=t.child),"object"===i(n)){var o=i(r);"object"===o?a(r,n,e):"array"===o&&r.forEach(function(r,t){a(r,n,e.concat(t));});}}return a.kindOf=i,window.optionValidator=a});
+  });
+
+  var isMergeableObject = function isMergeableObject(value) {
+  	return isNonNullObject(value)
+  		&& !isSpecial(value)
+  };
+
+  function isNonNullObject(value) {
+  	return !!value && typeof value === 'object'
+  }
+
+  function isSpecial(value) {
+  	var stringValue = Object.prototype.toString.call(value);
+
+  	return stringValue === '[object RegExp]'
+  		|| stringValue === '[object Date]'
+  		|| isReactElement(value)
+  }
+
+  // see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
+  var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
+  var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
+
+  function isReactElement(value) {
+  	return value.$$typeof === REACT_ELEMENT_TYPE
+  }
+
+  function emptyTarget(val) {
+  	return Array.isArray(val) ? [] : {}
+  }
+
+  function cloneUnlessOtherwiseSpecified(value, options) {
+  	return (options.clone !== false && options.isMergeableObject(value))
+  		? deepmerge(emptyTarget(value), value, options)
+  		: value
+  }
+
+  function defaultArrayMerge(target, source, options) {
+  	return target.concat(source).map(function(element) {
+  		return cloneUnlessOtherwiseSpecified(element, options)
+  	})
+  }
+
+  function mergeObject(target, source, options) {
+  	var destination = {};
+  	if (options.isMergeableObject(target)) {
+  		Object.keys(target).forEach(function(key) {
+  			destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+  		});
+  	}
+  	Object.keys(source).forEach(function(key) {
+  		if (!options.isMergeableObject(source[key]) || !target[key]) {
+  			destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
   		} else {
-      obj[key] = value;
+  			destination[key] = deepmerge(target[key], source[key], options);
   		}
-
-    return obj;
-  }
-
-  var defineProperty = _defineProperty;
-
-  function _objectSpread(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-      var ownKeys = Object.keys(source);
-
-      if (typeof Object.getOwnPropertySymbols === 'function') {
-        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-        }));
-      }
-
-      ownKeys.forEach(function (key) {
-        defineProperty(target, key, source[key]);
   	});
+  	return destination
   }
 
-    return target;
+  function deepmerge(target, source, options) {
-  }
+  	options = options || {};
+  	options.arrayMerge = options.arrayMerge || defaultArrayMerge;
+  	options.isMergeableObject = options.isMergeableObject || isMergeableObject;
 
-  var objectSpread = _objectSpread;
+  	var sourceIsArray = Array.isArray(source);
+  	var targetIsArray = Array.isArray(target);
+  	var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
 
-  function _arrayWithoutHoles(arr) {
+  	if (!sourceAndTargetTypesMatch) {
-    if (Array.isArray(arr)) {
+  		return cloneUnlessOtherwiseSpecified(source, options)
-      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+  	} else if (sourceIsArray) {
-        arr2[i] = arr[i];
+  		return options.arrayMerge(target, source, options)
-      }
+  	} else {
-
+  		return mergeObject(target, source, options)
-      return arr2;
   	}
   }
 
-  var arrayWithoutHoles = _arrayWithoutHoles;
+  deepmerge.all = function deepmergeAll(array, options) {
-
+  	if (!Array.isArray(array)) {
-  function _iterableToArray(iter) {
+  		throw new Error('first argument should be an array')
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
   	}
 
-  var iterableToArray = _iterableToArray;
+  	return array.reduce(function(prev, next) {
+  		return deepmerge(prev, next, options)
+  	}, {})
+  };
 
-  function _nonIterableSpread() {
+  var deepmerge_1 = deepmerge;
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
-  }
-
-  var nonIterableSpread = _nonIterableSpread;
-
-  function _toConsumableArray(arr) {
-    return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();
-  }
-
-  var toConsumableArray = _toConsumableArray;
 
   function _isNativeFunction(fn) {
     return Function.toString.call(fn).indexOf("[native code]") !== -1;
@@ -360,47 +480,6 @@
     var sec = Math.floor(second - hour * 3600 - min * 60);
     return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
   }
-  function deepMerge() {
-    var isObject = function isObject(value) {
-      return value !== null && _typeof_1(value) === 'object';
-    };
-
-    var returnValue = {};
-
-    for (var _len = arguments.length, sources = new Array(_len), _key = 0; _key < _len; _key++) {
-      sources[_key] = arguments[_key];
-    }
-
-    for (var _i = 0; _i < sources.length; _i++) {
-      var source = sources[_i];
-
-      if (Array.isArray(source)) {
-        if (!Array.isArray(returnValue)) {
-          returnValue = [];
-        }
-
-        returnValue = toConsumableArray(returnValue).concat(toConsumableArray(source));
-      } else if (isObject(source)) {
-        if (source instanceof Element) {
-          return source;
-        }
-
-        for (var key in source) {
-          if (source.hasOwnProperty(key)) {
-            var value = source[key];
-
-            if (isObject(value) && key in returnValue) {
-              value = deepMerge(returnValue[key], value);
-            }
-
-            returnValue = objectSpread({}, returnValue, defineProperty({}, key, value));
-          }
-        }
-      }
-    }
-
-    return returnValue;
-  }
   function tooltip(target, msg) {
     var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'up';
     target.setAttribute('data-balloon', msg);
@@ -427,7 +506,9 @@
     var timeout;
 
     function fn() {
-      var args = arguments;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
       var later = function later() {
         timeout = null;
@@ -457,7 +538,6 @@
     setStyles: setStyles,
     getStyle: getStyle,
     secondToTime: secondToTime,
-    deepMerge: deepMerge,
     tooltip: tooltip,
     sleep: sleep,
     sublings: sublings,
@@ -465,10 +545,6 @@
     debounce: debounce
   });
 
-  var optionValidator = createCommonjsModule(function (module, exports) {
-  !function(r,t){module.exports=t();}(commonjsGlobal,function(){function c(r){return (c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r})(r)}var u=Object.prototype.toString,i=function(r){if(void 0===r)return "undefined";if(null===r)return "null";var t,e,n,o,a,i=c(r);if("boolean"===i)return "boolean";if("string"===i)return "string";if("number"===i)return "number";if("symbol"===i)return "symbol";if("function"===i)return "GeneratorFunction"===f(r)?"generatorfunction":"function";if(t=r,Array.isArray?Array.isArray(t):t instanceof Array)return "array";if(function(r){if(r.constructor&&"function"==typeof r.constructor.isBuffer)return r.constructor.isBuffer(r);return !1}(r))return "buffer";if(function(r){try{if("number"==typeof r.length&&"function"==typeof r.callee)return !0}catch(r){if(-1!==r.message.indexOf("callee"))return !0}return !1}(r))return "arguments";if((e=r)instanceof Date||"function"==typeof e.toDateString&&"function"==typeof e.getDate&&"function"==typeof e.setDate)return "date";if((n=r)instanceof Error||"string"==typeof n.message&&n.constructor&&"number"==typeof n.constructor.stackTraceLimit)return "error";if((o=r)instanceof RegExp||"string"==typeof o.flags&&"boolean"==typeof o.ignoreCase&&"boolean"==typeof o.multiline&&"boolean"==typeof o.global)return "regexp";switch(f(r)){case"Symbol":return "symbol";case"Promise":return "promise";case"WeakMap":return "weakmap";case"WeakSet":return "weakset";case"Map":return "map";case"Set":return "set";case"Int8Array":return "int8array";case"Uint8Array":return "uint8array";case"Uint8ClampedArray":return "uint8clampedarray";case"Int16Array":return "int16array";case"Uint16Array":return "uint16array";case"Int32Array":return "int32array";case"Uint32Array":return "uint32array";case"Float32Array":return "float32array";case"Float64Array":return "float64array"}if("function"==typeof(a=r).throw&&"function"==typeof a.return&&"function"==typeof a.next)return "generator";switch(i=u.call(r)){case"[object Object]":return "object";case"[object Map Iterator]":return "mapiterator";case"[object Set Iterator]":return "setiterator";case"[object String Iterator]":return "stringiterator";case"[object Array Iterator]":return "arrayiterator"}return i.slice(8,-1).toLowerCase().replace(/\s/g,"")};function f(r){return r.constructor?r.constructor.name:null}function a(r,t){var e=2<arguments.length&&void 0!==arguments[2]?arguments[2]:["option"];for(var n in y(r,t,e),l(r,t,e),p(r,t,e),t)if(t.hasOwnProperty(n)){var o=r[n],a=t[n],i=e.concat(n);if(s(r,n,a,i))continue;y(o,a,i),l(o,a,i),p(o,a,i);}}function s(r,t,e,n){if(!Object.prototype.hasOwnProperty.call(r,t)){if(!0===e.__required__||!0===e.required)throw new TypeError("'".concat(n.join("."),"' is required"));return !0}}function y(r,t,e){var n;if("string"===i(t)?n=t:"function"===i(t)?t.___validator__=t:t.__type__?n=t.__type__:t.type&&(n=t.type),n&&"string"===i(n)){n=n.trim().toLowerCase();var o=i(r),a=o===n;if(-1<n.indexOf("|"))a=n.split("|").filter(Boolean).some(function(r){return o===r.trim()});if(!a)throw new TypeError("'".concat(e.join("."),"' require '").concat(n,"' type, but got '").concat(o,"'"))}}function l(r,t,e){var n;if(t.___validator__?n=t.___validator__:t.validator&&(n=t.validator),"function"===i(n)){var o=n(e,r,i(r));if(!0!==o)throw new TypeError("The scheme for '".concat(e.join("."),"' validator function require return true, but got '").concat(o,"'"))}}function p(r,t,e){var n;if(t.___child__?n=t.___child__:t.child&&(n=t.child),"object"===i(n)){var o=i(r);"object"===o?a(r,n,e):"array"===o&&r.forEach(function(r,t){a(r,n,e.concat(t));});}}return a.kindOf=i,window.optionValidator=a});
-  });
-
   function validElement(paths, value, type) {
     if (type === 'string') {
       if (value.trim() === '') {
@@ -640,72 +716,6 @@
     video: video
   };
 
-  function E () {
-    // Keep this empty so it's easier to inherit from
-    // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
-  }
-
-  E.prototype = {
-    on: function (name, callback, ctx) {
-      var e = this.e || (this.e = {});
-
-      (e[name] || (e[name] = [])).push({
-        fn: callback,
-        ctx: ctx
-      });
-
-      return this;
-    },
-
-    once: function (name, callback, ctx) {
-      var self = this;
-      function listener () {
-        self.off(name, listener);
-        callback.apply(ctx, arguments);
-      }
-      listener._ = callback;
-      return this.on(name, listener, ctx);
-    },
-
-    emit: function (name) {
-      var data = [].slice.call(arguments, 1);
-      var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
-      var i = 0;
-      var len = evtArr.length;
-
-      for (i; i < len; i++) {
-        evtArr[i].fn.apply(evtArr[i].ctx, data);
-      }
-
-      return this;
-    },
-
-    off: function (name, callback) {
-      var e = this.e || (this.e = {});
-      var evts = e[name];
-      var liveEvents = [];
-
-      if (evts && callback) {
-        for (var i = 0, len = evts.length; i < len; i++) {
-          if (evts[i].fn !== callback && evts[i].fn._ !== callback)
-            liveEvents.push(evts[i]);
-        }
-      }
-
-      // Remove event from queue to prevent memory leak
-      // Suggested by https://github.com/lazd
-      // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
-
-      (liveEvents.length)
-        ? e[name] = liveEvents
-        : delete e[name];
-
-      return this;
-    }
-  };
-
-  var tinyEmitter = E;
-
   var Template = function Template(art) {
     classCallCheck(this, Template);
 
@@ -741,31 +751,31 @@
     'zh-cn': {
       'About author': '关于作者',
       'Video info': '视频统计信息',
-      'Close': '关闭',
+      Close: '关闭',
       'Video load failed': '视频加载失败',
-      'Volume': '音量',
+      Volume: '音量',
-      'Play': '播放',
+      Play: '播放',
-      'Pause': '暂停',
+      Pause: '暂停',
-      'Rate': '速度',
+      Rate: '速度',
-      'Mute': '静音',
+      Mute: '静音',
-      'Flip': '视频翻转',
+      Flip: '视频翻转',
-      'Horizontal': '水平',
+      Horizontal: '水平',
-      'Vertical': '垂直',
+      Vertical: '垂直',
-      'Reconnect': '重新连接',
+      Reconnect: '重新连接',
       'Hide subtitle': '隐藏字幕',
       'Show subtitle': '显示字幕',
       'Hide danmu': '隐藏弹幕',
       'Show danmu': '显示弹幕',
       'Show setting': '显示设置',
       'Hide setting': '隐藏设置',
-      'Screenshot': '截图',
+      Screenshot: '截图',
       'Play speed': '播放速度',
       'Aspect ratio': '画面比例',
-      'Default': '默认',
+      Default: '默认',
-      'Normal': '正常',
+      Normal: '正常',
       'Switch video': '切换',
       'Switch subtitle': '切换字幕',
-      'Fullscreen': '全屏',
+      Fullscreen: '全屏',
       'Exit fullscreen': '退出全屏',
       'Web fullscreen': '网页全屏',
       'Exit web fullscreen': '退出网页全屏',
@@ -774,31 +784,31 @@
     'zh-tw': {
       'About author': '關於作者',
       'Video info': '影片統計訊息',
-      'Close': '關閉',
+      Close: '關閉',
       'Video load failed': '影片載入失敗',
-      'Volume': '音量',
+      Volume: '音量',
-      'Play': '播放',
+      Play: '播放',
-      'Pause': '暫停',
+      Pause: '暫停',
-      'Rate': '速度',
+      Rate: '速度',
-      'Mute': '靜音',
+      Mute: '靜音',
-      'Flip': '影片翻轉',
+      Flip: '影片翻轉',
-      'Horizontal': '水平',
+      Horizontal: '水平',
-      'Vertical': '垂直',
+      Vertical: '垂直',
-      'Reconnect': '重新連接',
+      Reconnect: '重新連接',
       'Hide subtitle': '隱藏字幕',
       'Show subtitle': '顯示字幕',
       'Show setting': '顯示设置',
       'Hide setting': '隱藏设置',
       'Hide danmu': '隱藏彈幕',
       'Show danmu': '顯示彈幕',
-      'Screenshot': '截圖',
+      Screenshot: '截圖',
       'Play speed': '播放速度',
       'Aspect ratio': '畫面比例',
-      'Default': '默認',
+      Default: '默認',
-      'Normal': '正常',
+      Normal: '正常',
       'Switch video': '切換',
       'Switch subtitle': '切換字幕',
-      'Fullscreen': '全屏',
+      Fullscreen: '全屏',
       'Exit fullscreen': '退出全屏',
       'Web fullscreen': '網頁全屏',
       'Exit web fullscreen': '退出網頁全屏',
@@ -943,7 +953,7 @@
     art.on('video:error', function () {
       if (reconnectTime < maxReconnectTime) {
         sleep(1000).then(function () {
-          reconnectTime++;
+          reconnectTime += 1;
           art.emit('beforeMountUrl', option.url);
           $video.src = player.mountUrl(option.url);
           notice.show("".concat(i18n.get('Reconnect'), ": ").concat(reconnectTime));
@@ -1050,7 +1060,7 @@
       set: function set(percentage) {
         if (percentage !== undefined) {
           $video.volume = clamp(percentage, 0, 1);
-          notice.show("".concat(i18n.get('Volume'), ": ").concat(parseInt($video.volume * 100)));
+          notice.show("".concat(i18n.get('Volume'), ": ").concat(parseInt($video.volume * 100, 10)));
 
           if ($video.volume !== 0) {
             storage.set('volume', $video.volume);
@@ -3701,7 +3711,7 @@
         var _this = this;
 
         this.art = art;
-        errorHandle(art.controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
+        errorHandle(art.controls.progress, "'thumbnails' control dependent on 'progress' control");
         var $progress = art.refs.$progress,
             _art$events = art.events,
             proxy = _art$events.proxy,
@@ -3743,12 +3753,12 @@
             column = _this$art$option$thum.column;
         var perWidth = $progress.clientWidth / number;
         var perIndex = Math.ceil(posWidth / perWidth);
-        var yIndex = Math.ceil(perIndex / column);
+        var yIndex = Math.ceil(perIndex / column) - 1;
-        var xIndex = perIndex % column || column;
+        var xIndex = perIndex % column || column - 1;
         setStyle(this.$control, 'backgroundImage', "url(".concat(url, ")"));
         setStyle(this.$control, 'height', "".concat(height, "px"));
         setStyle(this.$control, 'width', "".concat(width, "px"));
-        setStyle(this.$control, 'backgroundPosition', "-".concat(--xIndex * width, "px -").concat(--yIndex * height, "px"));
+        setStyle(this.$control, 'backgroundPosition', "-".concat(xIndex * width, "px -").concat(yIndex * height, "px"));
 
         if (posWidth <= width / 2) {
           setStyle(this.$control, 'left', 0);
@@ -3945,14 +3955,21 @@
         var option = control.option;
 
         if (option && !option.disable) {
-          id++;
+          id += 1;
           var name = option.name || "control".concat(id);
           var $control = document.createElement('div');
           $control.classList.value = "art-control art-control-".concat(name);
           this.mount(option.position, $control, option.index || id);
           this.commonMethod(control, $control);
-          control.apply && control.apply(this.art, $control);
+
-          callback && callback($control);
+          if (control.apply) {
+            control.apply(this.art, $control);
+          }
+
+          if (callback) {
+            callback($control);
+          }
+
           this[name] = control;
         }
       }
@@ -4093,7 +4110,7 @@
     disable: false,
     name: 'version',
     index: 40,
-    html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.2</a>'
+    html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.3</a>'
   };
 
   function close(art) {
@@ -4161,7 +4178,7 @@
         var menu = typeof item === 'function' ? item(this.art) : item;
 
         if (!menu.disable) {
-          id$1++;
+          id$1 += 1;
           var _this$art2 = this.art,
               $contextmenu = _this$art2.refs.$contextmenu,
               proxy = _this$art2.events.proxy;
@@ -4182,8 +4199,15 @@
 
           insertByIndex($contextmenu, $menu, menu.index || id$1);
           this[name] = $menu;
-          menu.callback && menu.callback($menu);
+
-          callback && callback($menu);
+          if (menu.callback) {
+            menu.callback($menu);
+          }
+
+          if (callback) {
+            callback($menu);
+          }
+
           this.art.emit('contextmenu:add', $menu);
         }
       }
@@ -4289,7 +4313,7 @@
       key: "creatInfo",
       value: function creatInfo() {
         var infoHtml = [];
-        infoHtml.push("\n      <div class=\"art-info-item \">\n        <div class=\"art-info-title\">Player version:</div>\n        <div class=\"art-info-content\">1.0.2</div>\n      </div>\n    ");
+        infoHtml.push("\n          <div class=\"art-info-item \">\n            <div class=\"art-info-title\">Player version:</div>\n            <div class=\"art-info-content\">1.0.3</div>\n          </div>\n        ");
         infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video url:</div>\n            <div class=\"art-info-content\" data-video=\"currentSrc\"></div>\n          </div>\n        ");
         infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video type:</div>\n            <div class=\"art-info-content\" data-head=\"Content-Type\"></div>\n          </div>\n        ");
         infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video size:</div>\n            <div class=\"art-info-content\" data-head=\"Content-length\"></div>\n          </div>\n        ");
@@ -4918,6 +4942,8 @@
           _this2.proxy(image, 'error', function () {
             return reject(image);
           });
+
+          return img;
         });
       }
     }, {
@@ -5029,7 +5055,7 @@
         var layer = typeof item === 'function' ? item(this.art) : item;
 
         if (!layer.disable) {
-          id$2++;
+          id$2 += 1;
           var _this$art = this.art,
               $layers = _this$art.refs.$layers,
               proxy = _this$art.events.proxy;
@@ -5050,8 +5076,15 @@
 
           insertByIndex($layers, $layer, layer.index || id$2);
           this[name] = $layer;
-          item.callback && item.callback($layer);
+
-          callback && callback($layer);
+          if (item.callback) {
+            item.callback($layer);
+          }
+
+          if (callback) {
+            callback($layer);
+          }
+
           this.art.emit('layers:add', $layer);
         }
       }
@@ -5263,7 +5296,7 @@
         var option = setting.option;
 
         if (option && !option.disable) {
-          id$3++;
+          id$3 += 1;
           var _this$art2 = this.art,
               refs = _this$art2.refs,
               i18n = _this$art2.i18n;
@@ -5273,10 +5306,18 @@
           $setting.setAttribute('class', "art-setting art-setting-".concat(name));
           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);
+
+          if (setting.apply) {
+            setting.apply(this.art, $setting);
+          }
+
           insertByIndex(refs.$settingBody, $setting, option.index || id$3);
           this[name] = $setting;
-          callback && callback($setting);
+
+          if (callback) {
+            callback($setting);
+          }
+
           this.art.emit('setting:add', $setting);
         }
       }
@@ -5310,6 +5351,23 @@
     return Setting;
   }();
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  var defineProperty = _defineProperty;
+
   var Storage =
   /*#__PURE__*/
   function () {
@@ -5365,7 +5423,7 @@
       classCallCheck(this, Artplayer);
 
       _this = possibleConstructorReturn(this, getPrototypeOf(Artplayer).call(this));
-      _this.option = deepMerge({}, Artplayer.DEFAULTS, option);
+      _this.option = deepmerge_1(Artplayer.DEFAULTS, option);
       optionValidator(_this.option, scheme);
 
       _this.init();
@@ -5409,7 +5467,8 @@
         this.hotkey = new Hotkey(this);
         this.mask = new Mask(this);
         this.setting = new Setting$1(this);
-        this.id = id$4++;
+        id$4 += 1;
+        this.id = id$4;
         Artplayer.instances.push(this);
       }
     }, {
@@ -5429,14 +5488,18 @@
       }
     }], [{
       key: "use",
-      value: function use(plugin) {
+      value: function use() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        var plugin = args[0];
         var installedPlugins = this.plugins || (this.plugins = []);
 
         if (installedPlugins.indexOf === -1) {
           installedPlugins.push(plugin);
-          var args = Array.from(arguments).slice(1);
           args.unshift(this);
-          plugin.apply(null, args);
+          plugin.apply(void 0, toConsumableArray(args.slice(1)));
           this.prototype.emit('use', plugin);
         }
 
@@ -5445,7 +5508,7 @@
     }, {
       key: "version",
       get: function get() {
-        return '1.0.2';
+        return '1.0.3';
       }
     }, {
       key: "config",

docs/lab/js/artplayer.js.map

@@ -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/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/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/src/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","../../../packages/artplayer/src/contextmenu/info.js","../../../packages/artplayer/src/contextmenu/version.js","..Line truncated

packages/artplayer/package.json

@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "balloon-css": "^0.5.0",
+    "deepmerge": "^2.2.1",
     "draggabilly": "^2.2.0",
     "option-validator": "^1.1.1",
     "resize-observer": "^1.0.0-alpha.1",

packages/artplayer/src/config/index.js

@@ -5,5 +5,5 @@ import video from './video';
 export default {
     mimeCodec,
     mse,
-  video
+    video,
 };

packages/artplayer/src/config/mimeCodec.js

@@ -1,5 +1,5 @@
 export default {
     mp4: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
     webm: 'video/webm; codecs="vorbis, vp8"',
-  ts: 'video/mp2t; codecs="avc1.42E01E, mp4a.40.2"'
+    ts: 'video/mp2t; codecs="avc1.42E01E, mp4a.40.2"',
 };

packages/artplayer/src/config/mse.js

@@ -1,23 +1,14 @@
 export default {
     mediaSource: {
-    propertys: [
+        propertys: ['activeSourceBuffers', 'duration', 'readyState', 'sourceBuffers'],
-      'activeSourceBuffers',
-      'duration',
-      'readyState',
-      'sourceBuffers'
-    ],
         methods: [
             'addSourceBuffer',
             'endOfStream',
             'removeSourceBuffer',
             'clearLiveSeekableRange',
-      'setLiveSeekableRange'
+            'setLiveSeekableRange',
         ],
-    events: [
+        events: ['sourceclose', 'sourceended', 'sourceopen'],
-      'sourceclose',
-      'sourceended',
-      'sourceopen'
-    ]
     },
     sourceBuffer: {
         propertys: [
@@ -30,29 +21,13 @@ export default {
             'textTracks',
             'appendWindowStart',
             'appendWindowEnd',
-      'trackDefaults'
+            'trackDefaults',
         ],
-    methods: [
+        methods: ['appendBuffer', 'appendStream', 'abort', 'remove'],
-      'appendBuffer',
+        events: ['abort', 'error', 'update', 'updateend', 'updatestart'],
-      'appendStream',
-      'abort',
-      'remove'
-    ],
-    events: [
-      'abort',
-      'error',
-      'update',
-      'updateend',
-      'updatestart'
-    ]
     },
     sourceBufferList: {
-    propertys: [
+        propertys: ['length'],
-      'length'
+        events: ['addsourcebuffer', 'removesourcebuffer'],
-    ],
+    },
-    events: [
-      'addsourcebuffer',
-      'removesourcebuffer'
-    ]
-  }
 };

packages/artplayer/src/config/video.js

@@ -28,15 +28,9 @@ export default {
         'startDate',
         'textTracks',
         'videoTracks',
-    'volume'
+        'volume',
-  ],
-  methods: [
-    'addTextTrack',
-    'canPlayType',
-    'load',
-    'play',
-    'pause'
     ],
+    methods: ['addTextTrack', 'canPlayType', 'load', 'play', 'pause'],
     events: [
         'abort',
         'canplay',
@@ -59,6 +53,6 @@ export default {
         'suspend',
         'timeupdate',
         'volumechange',
-    'waiting'
+        'waiting',
-  ]
+    ],
 };

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -23,10 +23,10 @@ export default function aspectRatio(art) {
         callback: $menu => {
             art.on('aspectRatioChange', ratio => {
                 const $current = Array.from($menu.querySelectorAll('span')).find(
-          item => item.dataset.ratio === ratio.join(':')
+                    item => item.dataset.ratio === ratio.join(':'),
                 );
                 inverseClass($current, 'current');
             });
-    }
+        },
     };
 }

packages/artplayer/src/contextmenu/close.js

@@ -6,6 +6,6 @@ export default function close(art) {
         html: art.i18n.get('Close'),
         click: () => {
             art.contextmenu.hide();
-    }
+        },
     };
 }

packages/artplayer/src/contextmenu/index.js

@@ -16,15 +16,13 @@ export default class Contextmenu {
     }
 
     init() {
-    const { option, refs: { $player, $contextmenu }, events: { proxy } } = this.art;
+        const {
+            option,
+            refs: { $player, $contextmenu },
+            events: { proxy },
+        } = this.art;
 
-    option.contextmenu.push(
+        option.contextmenu.push(playbackRate, aspectRatio, info, version, close);
-      playbackRate,
-      aspectRatio,
-      info,
-      version,
-      close
-    );
 
         option.contextmenu.forEach(item => {
             this.add(item);
@@ -46,8 +44,11 @@ export default class Contextmenu {
     add(item, callback) {
         const menu = typeof item === 'function' ? item(this.art) : item;
         if (!menu.disable) {
-      id++;
+            id += 1;
-      const { refs: { $contextmenu }, events: { proxy } } = this.art;
+            const {
+                refs: { $contextmenu },
+                events: { proxy },
+            } = this.art;
             const name = menu.name || `contextmenu${id}`;
             const $menu = document.createElement('div');
             $menu.classList.value = `art-contextmenu art-contextmenu-${name}`;
@@ -62,14 +63,20 @@ export default class Contextmenu {
             }
             insertByIndex($contextmenu, $menu, menu.index || id);
             this[name] = $menu;
-      menu.callback && menu.callback($menu);
+            if (menu.callback) {
-      callback && callback($menu);
+                menu.callback($menu);
+            }
+            if (callback) {
+                callback($menu);
+            }
             this.art.emit('contextmenu:add', $menu);
         }
     }
 
     setPos(event) {
-    const { refs: { $player, $contextmenu } } = this.art;
+        const {
+            refs: { $player, $contextmenu },
+        } = this.art;
         const mouseX = event.clientX;
         const mouseY = event.clientY;
         const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
@@ -90,13 +97,17 @@ export default class Contextmenu {
     }
 
     hide() {
-    const { refs: { $contextmenu } } = this.art;
+        const {
+            refs: { $contextmenu },
+        } = this.art;
         setStyle($contextmenu, 'display', 'none');
         this.art.emit('contextmenu:hide', $contextmenu);
     }
 
     show() {
-    const { refs: { $contextmenu } } = this.art;
+        const {
+            refs: { $contextmenu },
+        } = this.art;
         setStyle($contextmenu, 'display', 'block');
         this.art.emit('contextmenu:show', $contextmenu);
     }

packages/artplayer/src/contextmenu/info.js

@@ -7,6 +7,6 @@ export default function info(art) {
         click: () => {
             art.info.show();
             art.contextmenu.hide();
-    }
+        },
     };
 }

packages/artplayer/src/contextmenu/playbackRate.js

@@ -26,10 +26,10 @@ export default function playbackRate(art) {
         callback: $menu => {
             art.on('playbackRateChange', rate => {
                 const $current = Array.from($menu.querySelectorAll('span')).find(
-          item => Number(item.dataset.rate) === rate
+                    item => Number(item.dataset.rate) === rate,
                 );
                 inverseClass($current, 'current');
             });
-    }
+        },
     };
 }

packages/artplayer/src/contextmenu/version.js

@@ -2,5 +2,5 @@ export default {
     disable: false,
     name: 'version',
     index: 40,
-  html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>'
+    html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>',
 };

packages/artplayer/src/controls/fullscreen.js

@@ -7,7 +7,11 @@ export default class Fullscreen {
     }
 
     apply(art, $control) {
-    const { events: { proxy }, i18n, player } = art;
+        const {
+            events: { proxy },
+            i18n,
+            player,
+        } = art;
         this.$fullscreen = append($control, icons.fullscreen);
         tooltip(this.$fullscreen, i18n.get('Fullscreen'));
 

packages/artplayer/src/controls/fullscreenWeb.js

@@ -7,7 +7,11 @@ export default class FullscreenWeb {
     }
 
     apply(art, $control) {
-    const { events: { proxy }, i18n, player } = art;
+        const {
+            events: { proxy },
+            i18n,
+            player,
+        } = art;
         this.$fullscreenWeb = append($control, icons.fullscreenWeb);
         tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
 

packages/artplayer/src/controls/index.js

@@ -23,89 +23,113 @@ export default class Controls {
     }
 
     init() {
-    this.add(new Progress({
+        this.add(
+            new Progress({
                 name: 'progress',
                 disable: false,
                 position: 'top',
-      index: 10
+                index: 10,
-    }));
+            }),
+        );
 
-    this.add(new Thumbnails({
+        this.add(
+            new Thumbnails({
                 name: 'thumbnails',
                 disable: !this.art.option.thumbnails.url,
                 position: 'top',
-      index: 20
+                index: 20,
-    }));
+            }),
+        );
 
-    this.add(new PlayAndPause({
+        this.add(
+            new PlayAndPause({
                 name: 'playAndPause',
                 disable: false,
                 position: 'left',
-      index: 10
+                index: 10,
-    }));
+            }),
+        );
 
-    this.add(new Volume({
+        this.add(
+            new Volume({
                 name: 'volume',
                 disable: false,
                 position: 'left',
-      index: 20
+                index: 20,
-    }));
+            }),
+        );
 
-    this.add(new Time({
+        this.add(
+            new Time({
                 name: 'time',
                 disable: false,
                 position: 'left',
-      index: 30
+                index: 30,
-    }));
+            }),
+        );
 
-    this.add(new Quality({
+        this.add(
+            new Quality({
                 name: 'quality',
                 disable: this.art.option.quality.length === 0,
                 position: 'right',
-      index: 10
+                index: 10,
-    }));
+            }),
+        );
 
-    this.add(new Screenshot({
+        this.add(
+            new Screenshot({
                 name: 'screenshot',
                 disable: !this.art.option.screenshot,
                 position: 'right',
-      index: 20
+                index: 20,
-    }));
+            }),
+        );
 
-    this.add(new Subtitle({
+        this.add(
+            new Subtitle({
                 name: 'subtitle',
                 disable: !this.art.option.subtitle.url,
                 position: 'right',
-      index: 30
+                index: 30,
-    }));
+            }),
+        );
 
-    this.add(new Setting({
+        this.add(
+            new Setting({
                 name: 'setting',
                 disable: !this.art.option.setting,
                 position: 'right',
-      index: 40
+                index: 40,
-    }));
+            }),
+        );
 
-    this.add(new Pip({
+        this.add(
+            new Pip({
                 name: 'pip',
                 disable: !this.art.option.pip,
                 position: 'right',
-      index: 50
+                index: 50,
-    }));
+            }),
+        );
 
-    this.add(new FullscreenWeb({
+        this.add(
+            new FullscreenWeb({
                 name: 'fullscreenWeb',
                 disable: !this.art.option.fullscreenWeb,
                 position: 'right',
-      index: 60
+                index: 60,
-    }));
+            }),
+        );
 
-    this.add(new Fullscreen({
+        this.add(
+            new Fullscreen({
                 name: 'fullscreen',
                 disable: !this.art.option.fullscreen,
                 position: 'right',
-      index: 70
+                index: 70,
-    }));
+            }),
+        );
 
         this.art.option.controls.forEach(item => {
             this.add(item);
@@ -115,14 +139,18 @@ export default class Controls {
     add(control, callback) {
         const { option } = control;
         if (option && !option.disable) {
-      id++;
+            id += 1;
             const name = option.name || `control${id}`;
             const $control = document.createElement('div');
             $control.classList.value = `art-control art-control-${name}`;
             this.mount(option.position, $control, option.index || id);
             this.commonMethod(control, $control);
-      control.apply && control.apply(this.art, $control);
+            if (control.apply) {
-      callback && callback($control);
+                control.apply(this.art, $control);
+            }
+            if (callback) {
+                callback($control);
+            }
             this[name] = control;
         }
     }
@@ -149,14 +177,14 @@ export default class Controls {
             value: () => {
                 setStyle($control, 'display', 'none');
                 this.art.emit('control:hide', $control);
-      }
+            },
         });
 
         Object.defineProperty(control, 'show', {
             value: () => {
                 setStyle($control, 'display', 'block');
                 this.art.emit('control:show', $control);
-      }
+            },
         });
     }
 

packages/artplayer/src/controls/pip.js

@@ -7,7 +7,11 @@ export default class Pip {
     }
 
     apply(art, $control) {
-    const { events: { proxy }, i18n, player } = art;
+        const {
+            events: { proxy },
+            i18n,
+            player,
+        } = art;
         this.$pip = append($control, icons.pip);
         tooltip(this.$pip, i18n.get('Mini player'));
         proxy($control, 'click', () => {

packages/artplayer/src/controls/playAndPause.js

@@ -7,7 +7,11 @@ export default class PlayAndPause {
     }
 
     apply(art, $control) {
-    const { events: { proxy }, player, i18n } = art;
+        const {
+            events: { proxy },
+            player,
+            i18n,
+        } = art;
         this.$play = append($control, icons.play);
         this.$pause = append($control, icons.pause);
         tooltip(this.$play, i18n.get('Play'));

packages/artplayer/src/controls/progress.js

@@ -10,7 +10,11 @@ export default class Progress {
     apply(art, $control) {
         this.art = art;
         this.$control = $control;
-    const { option: { highlight, theme }, events: { proxy }, player } = art;
+        const {
+            option: { highlight, theme },
+            events: { proxy },
+            player,
+        } = art;
 
         append(
             $control,
@@ -22,7 +26,7 @@ export default class Progress {
                 <div class="art-progress-indicator" style="background: ${theme}"></div>
                 <div class="art-progress-tip art-tip"></div>
               </div>
-      `
+            `,
         );
 
         this.$loaded = $control.querySelector('.art-progress-loaded');
@@ -32,8 +36,11 @@ export default class Progress {
         this.$tip = $control.querySelector('.art-progress-tip');
 
         highlight.forEach(item => {
-      const left = clamp(item.time, 0, player.duration) / player.duration * 100;
+            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>`);
+            append(
+                this.$highlight,
+                `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`,
+            );
         });
 
         this.set('loaded', player.loaded);
@@ -96,7 +103,7 @@ export default class Progress {
         const { text, time } = event.target.dataset;
         this.$tip.innerHTML = text;
         const left =
-      Number(time) / this.art.player.duration * this.$control.clientWidth +
+            (Number(time) / this.art.player.duration) * this.$control.clientWidth +
             event.target.clientWidth / 2 -
             this.$tip.clientWidth / 2;
         setStyle(this.$tip, 'left', `${left}px`);
@@ -116,10 +123,13 @@ export default class Progress {
     }
 
     getPosFromEvent(event) {
-    const { player, refs: { $progress } } = this.art;
+        const {
+            player,
+            refs: { $progress },
+        } = this.art;
         const { left } = $progress.getBoundingClientRect();
         const width = clamp(event.x - left, 0, $progress.clientWidth);
-    const second = width / $progress.clientWidth * player.duration;
+        const second = (width / $progress.clientWidth) * player.duration;
         const time = secondToTime(second);
         const percentage = clamp(width / $progress.clientWidth, 0, 1);
         return { second, time, width, percentage };
@@ -128,7 +138,11 @@ export default class Progress {
     set(type, percentage) {
         setStyle(this[`$${type}`], 'width', `${percentage * 100}%`);
         if (type === 'played') {
-      setStyle(this.$indicator, 'left', `calc(${percentage * 100}% - ${getStyle(this.$indicator, 'width') / 2}px)`);
+            setStyle(
+                this.$indicator,
+                'left',
+                `calc(${percentage * 100}% - ${getStyle(this.$indicator, 'width') / 2}px)`,
+            );
         }
     }
 }

packages/artplayer/src/controls/quality.js

@@ -7,18 +7,28 @@ export default class Quality {
     }
 
     apply(art, $control) {
-    const { option, events: { proxy, hover }, player } = art;
+        const {
+            option,
+            events: { proxy, hover },
+            player,
+        } = art;
         const defaultQuality = option.quality.find(item => item.default) || option.quality[0];
         this.playIndex = option.quality.indexOf(defaultQuality);
         const $qualityName = append($control, `<div class="art-quality-name">${defaultQuality.name}</div>`);
-    const qualityList = option.quality.map((item, index) => `<div class="art-quality-item" data-index="${index}">${item.name}</div>`).join('');
+        const qualityList = option.quality
+            .map((item, index) => `<div class="art-quality-item" data-index="${index}">${item.name}</div>`)
+            .join('');
         const $qualitys = append($control, `<div class="art-qualitys">${qualityList}</div>`);
 
-    hover($control, () => {
+        hover(
+            $control,
+            () => {
                 $control.classList.add('art-quality-hover');
-    }, () => {
+            },
+            () => {
                 $control.classList.remove('art-quality-hover');
-    });
+            },
+        );
 
         proxy($qualitys, 'click', event => {
             const index = Number(event.target.dataset.index);

packages/artplayer/src/controls/screenshot.js

@@ -7,7 +7,11 @@ export default class Screenshot {
     }
 
     apply(art, $control) {
-    const { events: { proxy }, i18n, player } = art;
+        const {
+            events: { proxy },
+            i18n,
+            player,
+        } = art;
         this.$screenshot = append($control, icons.screenshot);
         tooltip(this.$screenshot, i18n.get('Screenshot'));
         proxy(this.$screenshot, 'click', () => {

packages/artplayer/src/controls/setting.js

@@ -7,7 +7,11 @@ export default class Setting {
     }
 
     apply(art, $control) {
-    const { events: { proxy }, i18n, setting } = art;
+        const {
+            events: { proxy },
+            i18n,
+            setting,
+        } = art;
         this.$setting = append($control, icons.setting);
         tooltip(this.$setting, i18n.get('Show setting'));
 

packages/artplayer/src/controls/subtitle.js

@@ -7,7 +7,11 @@ export default class Subtitle {
     }
 
     apply(art, $control) {
-    const { events: { proxy }, i18n, subtitle } = art;
+        const {
+            events: { proxy },
+            i18n,
+            subtitle,
+        } = art;
         this.$subtitle = append($control, icons.subtitle);
         tooltip(this.$subtitle, i18n.get('Hide subtitle'));
 

packages/artplayer/src/controls/thumbnails.js

@@ -9,8 +9,11 @@ export default class Thumbnails {
 
     apply(art, $control) {
         this.art = art;
-    errorHandle(art.controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
+        errorHandle(art.controls.progress, "'thumbnails' control dependent on 'progress' control");
-    const { refs: { $progress }, events: { proxy, loadImg } } = art;
+        const {
+            refs: { $progress },
+            events: { proxy, loadImg },
+        } = art;
         this.$control = $control;
 
         proxy($progress, 'mousemove', event => {
@@ -33,18 +36,21 @@ export default class Thumbnails {
     }
 
     showThumbnails(event) {
-    const { refs: { $progress }, controls } = this.art;
+        const {
+            refs: { $progress },
+            controls,
+        } = this.art;
         const { width: posWidth } = controls.progress.getPosFromEvent(event);
         const { url, height, width, number, column } = this.art.option.thumbnails;
         const perWidth = $progress.clientWidth / number;
         const perIndex = Math.ceil(posWidth / perWidth);
-    let yIndex = Math.ceil(perIndex / column);
+        const yIndex = Math.ceil(perIndex / column) - 1;
-    let xIndex = perIndex % column || column;
+        const xIndex = perIndex % column || column - 1;
 
         setStyle(this.$control, 'backgroundImage', `url(${url})`);
         setStyle(this.$control, 'height', `${height}px`);
         setStyle(this.$control, 'width', `${width}px`);
-    setStyle(this.$control, 'backgroundPosition', `-${--xIndex * width}px -${--yIndex * height}px`);
+        setStyle(this.$control, 'backgroundPosition', `-${xIndex * width}px -${yIndex * height}px`);
 
         if (posWidth <= width / 2) {
             setStyle(this.$control, 'left', 0);

packages/artplayer/src/controls/volume.js

@@ -8,7 +8,12 @@ export default class Volume {
     }
 
     apply(art, $control) {
-    const { events: { proxy, hover }, player, i18n, storage } = art;
+        const {
+            events: { proxy, hover },
+            player,
+            i18n,
+            storage,
+        } = art;
         this.$volume = append($control, icons.volume);
         this.$volumeClose = append($control, icons.volumeClose);
         this.$volumePanel = append($control, '<div class="art-volume-panel"></div>');
@@ -38,14 +43,18 @@ export default class Volume {
             player.volume = storage.get('volume');
         });
 
-    hover($control, () => {
+        hover(
+            $control,
+            () => {
                 this.$volumePanel.classList.add('art-volume-panel-hover');
                 sleep(200).then(() => {
                     this.setVolumeHandle(player.volume);
                 });
-    }, () => {
+            },
+            () => {
                 this.$volumePanel.classList.remove('art-volume-panel-hover');
-    });
+            },
+        );
 
         proxy(this.$volumePanel, 'click', event => {
             player.volume = this.volumeChangeFromEvent(event);
@@ -71,7 +80,8 @@ export default class Volume {
     volumeChangeFromEvent(event) {
         const { left: panelLeft, width: panelWidth } = this.$volumePanel.getBoundingClientRect();
         const { width: handleWidth } = this.$volumeHandle.getBoundingClientRect();
-    const percentage = clamp(event.x - panelLeft - handleWidth / 2, 0, panelWidth - handleWidth / 2) / (panelWidth - handleWidth);
+        const percentage =
+            clamp(event.x - panelLeft - handleWidth / 2, 0, panelWidth - handleWidth / 2) / (panelWidth - handleWidth);
         return percentage;
     }
 

packages/artplayer/src/events/clickInit.js

@@ -1,5 +1,7 @@
 export default function clickInit(art, events) {
-  const { refs: { $player } } = art;
+    const {
+        refs: { $player },
+    } = art;
     events.proxy(document, ['click', 'contextmenu'], event => {
         if (event.composedPath().indexOf($player) > -1) {
             art.isFocus = true;

packages/artplayer/src/events/doubleClickInit.js

@@ -1,5 +1,7 @@
 export default function doubleClickInit(art, events) {
-  const { refs: { $video } } = art;
+    const {
+        refs: { $video },
+    } = art;
     events.proxy($video, 'dblclick', () => {
         art.player.fullscreenToggle();
         art.emit('dblclick');

packages/artplayer/src/events/hoverInit.js

@@ -1,5 +1,7 @@
 export default function hoverInit(art, events) {
-  const { refs: { $player } } = art;
+    const {
+        refs: { $player },
+    } = art;
     events.hover(
         $player,
         () => {
@@ -9,6 +11,6 @@ export default function hoverInit(art, events) {
         () => {
             $player.classList.remove('artplayer-hover');
             art.emit('hoverleave');
-    }
+        },
     );
 }

packages/artplayer/src/events/index.js

@@ -53,6 +53,8 @@ export default class Events {
 
             this.proxy(image, 'load', () => resolve(image));
             this.proxy(image, 'error', () => reject(image));
+
+            return img;
         });
     }
 

packages/artplayer/src/events/mousemoveInit.js

@@ -1,7 +1,9 @@
 import { debounce } from '../utils';
 
 export default function mousemoveInitInit(art, events) {
-  const { refs: { $player } } = art;
+    const {
+        refs: { $player },
+    } = art;
 
     const autoHide = debounce(() => {
         $player.classList.add('artplayer-hide-cursor');

packages/artplayer/src/events/resizeInit.js

@@ -1,16 +1,15 @@
-import { sleep } from '../utils';
 import { ResizeObserver } from 'resize-observer';
+import { sleep } from '../utils';
 
 export default function resizeInit(art, events) {
-  const { option, refs: { $player } } = art;
+    const {
+        option,
+        refs: { $player },
+    } = art;
     const resizeObserver = new ResizeObserver(() => {
         sleep().then(() => {
             if (option.autoSize) {
-        if (
+                if (!art.player.fullscreenState && !art.player.fullscreenWebState && !art.player.pipState) {
-          !art.player.fullscreenState &&
-          !art.player.fullscreenWebState &&
-          !art.player.pipState
-        ) {
                     art.player.autoSize();
                 } else {
                     art.player.autoSizeRemove();

packages/artplayer/src/hotkey.js

@@ -9,17 +9,15 @@ export default class Hotkey {
     }
 
     init() {
-    const { player, events: { proxy } } = this.art;
+        const {
+            player,
+            events: { proxy },
+        } = this.art;
         proxy(window, 'keydown', event => {
             if (this.art.isFocus) {
                 const tag = document.activeElement.tagName.toUpperCase();
                 const editable = document.activeElement.getAttribute('contenteditable');
-        if (
+                if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {
-          tag !== 'INPUT' &&
-          tag !== 'TEXTAREA' &&
-          editable !== '' &&
-          editable !== 'true'
-        ) {
                     this.art.emit('hotkey', event);
                     switch (event.keyCode) {
                         case 39:

packages/artplayer/src/i18n.js

@@ -2,69 +2,69 @@ let i18nMap = {
     'zh-cn': {
         'About author': '关于作者',
         'Video info': '视频统计信息',
-    'Close': '关闭',
+        Close: '关闭',
         'Video load failed': '视频加载失败',
-    'Volume': '音量',
+        Volume: '音量',
-    'Play': '播放',
+        Play: '播放',
-    'Pause': '暂停',
+        Pause: '暂停',
-    'Rate': '速度',
+        Rate: '速度',
-    'Mute': '静音',
+        Mute: '静音',
-    'Flip': '视频翻转',
+        Flip: '视频翻转',
-    'Horizontal': '水平',
+        Horizontal: '水平',
-    'Vertical': '垂直',
+        Vertical: '垂直',
-    'Reconnect': '重新连接',
+        Reconnect: '重新连接',
         'Hide subtitle': '隐藏字幕',
         'Show subtitle': '显示字幕',
         'Hide danmu': '隐藏弹幕',
         'Show danmu': '显示弹幕',
         'Show setting': '显示设置',
         'Hide setting': '隐藏设置',
-    'Screenshot': '截图',
+        Screenshot: '截图',
         'Play speed': '播放速度',
         'Aspect ratio': '画面比例',
-    'Default': '默认',
+        Default: '默认',
-    'Normal': '正常',
+        Normal: '正常',
         'Switch video': '切换',
         'Switch subtitle': '切换字幕',
-    'Fullscreen': '全屏',
+        Fullscreen: '全屏',
         'Exit fullscreen': '退出全屏',
         'Web fullscreen': '网页全屏',
         'Exit web fullscreen': '退出网页全屏',
-    'Mini player': '迷你播放器'
+        'Mini player': '迷你播放器',
     },
     'zh-tw': {
         'About author': '關於作者',
         'Video info': '影片統計訊息',
-    'Close': '關閉',
+        Close: '關閉',
         'Video load failed': '影片載入失敗',
-    'Volume': '音量',
+        Volume: '音量',
-    'Play': '播放',
+        Play: '播放',
-    'Pause': '暫停',
+        Pause: '暫停',
-    'Rate': '速度',
+        Rate: '速度',
-    'Mute': '靜音',
+        Mute: '靜音',
-    'Flip': '影片翻轉',
+        Flip: '影片翻轉',
-    'Horizontal': '水平',
+        Horizontal: '水平',
-    'Vertical': '垂直',
+        Vertical: '垂直',
-    'Reconnect': '重新連接',
+        Reconnect: '重新連接',
         'Hide subtitle': '隱藏字幕',
         'Show subtitle': '顯示字幕',
         'Show setting': '顯示设置',
         'Hide setting': '隱藏设置',
         'Hide danmu': '隱藏彈幕',
         'Show danmu': '顯示彈幕',
-    'Screenshot': '截圖',
+        Screenshot: '截圖',
         'Play speed': '播放速度',
         'Aspect ratio': '畫面比例',
-    'Default': '默認',
+        Default: '默認',
-    'Normal': '正常',
+        Normal: '正常',
         'Switch video': '切換',
         'Switch subtitle': '切換字幕',
-    'Fullscreen': '全屏',
+        Fullscreen: '全屏',
         'Exit fullscreen': '退出全屏',
         'Web fullscreen': '網頁全屏',
         'Exit web fullscreen': '退出網頁全屏',
-    'Mini player': '迷你播放器'
+        'Mini player': '迷你播放器',
-  }
+    },
 };
 
 export default class I18n {

packages/artplayer/src/icons/index.js

@@ -37,5 +37,5 @@ export default creatDomFromSvg({
     fullscreenWeb,
     pip,
     prev,
-  next
+    next,
 });

packages/artplayer/src/index.js

@@ -1,10 +1,11 @@
 import './style';
 import 'balloon-css/balloon.min.css';
-import * as utils from './utils';
+import Emitter from 'tiny-emitter';
 import optionValidator from 'option-validator';
+import merge from 'deepmerge';
+import * as utils from './utils';
 import scheme from './scheme';
 import config from './config';
-import Emitter from 'tiny-emitter';
 import Template from './template';
 import I18n from './i18n';
 import Player from './player';
@@ -25,7 +26,7 @@ let id = 0;
 class Artplayer extends Emitter {
     constructor(option) {
         super();
-    this.option = utils.deepMerge({}, Artplayer.DEFAULTS, option);
+        this.option = merge(Artplayer.DEFAULTS, option);
         optionValidator(this.option, scheme);
         this.init();
     }
@@ -74,27 +75,27 @@ class Artplayer extends Emitter {
                 number: 60,
                 width: 160,
                 height: 90,
-        column: 10
+                column: 10,
             },
             subtitle: {
                 url: '',
-        style: {}
+                style: {},
             },
             moreVideoAttr: {
                 controls: false,
-        preload: 'auto'
+                preload: 'auto',
             },
-      lang: navigator.language.toLowerCase()
+            lang: navigator.language.toLowerCase(),
         };
     }
 
-  static use(plugin) {
+    static use(...args) {
+        const plugin = args[0];
         const installedPlugins = this.plugins || (this.plugins = []);
         if (installedPlugins.indexOf === -1) {
             installedPlugins.push(plugin);
-      const args = Array.from(arguments).slice(1);
             args.unshift(this);
-      plugin.apply(null, args);
+            plugin(...args.slice(1));
             this.prototype.emit('use', plugin);
         }
         return this;
@@ -111,11 +112,7 @@ class Artplayer extends Emitter {
             this.refs.$container = document.querySelector(this.option.container);
         }
 
-    if (
+        if (Artplayer.instances.some(art => art.refs.$container === this.refs.$container)) {
-      Artplayer.instances.some(
-        art => art.refs.$container === this.refs.$container
-      )
-    ) {
             utils.errorHandle(false, 'Cannot mount multiple instances on the same dom element');
         }
 
@@ -135,7 +132,8 @@ class Artplayer extends Emitter {
         this.mask = new Mask(this);
         this.setting = new Setting(this);
 
-    this.id = id++;
+        id += 1;
+        this.id = id;
         Artplayer.instances.push(this);
     }
 
@@ -152,7 +150,7 @@ class Artplayer extends Emitter {
 }
 
 Object.defineProperty(Artplayer, 'instances', {
-  value: []
+    value: [],
 });
 
 window.Artplayer = Artplayer;

packages/artplayer/src/info.js

@@ -7,7 +7,10 @@ export default class Info {
     }
 
     init() {
-    const { refs: { $infoClose, $infoPanel }, events: { proxy } } = this.art;
+        const {
+            refs: { $infoClose, $infoPanel },
+            events: { proxy },
+        } = this.art;
         proxy($infoClose, 'click', () => {
             this.hide();
         });
@@ -102,13 +105,15 @@ export default class Info {
             item.innerHTML = 'loading...';
         });
         fetch(url, {
-      method: 'HEAD'
+            method: 'HEAD',
-    }).then(data => {
+        })
+            .then(data => {
                 types.forEach(item => {
                     const value = data.headers.get(item.dataset.head);
                     item.innerHTML = value !== undefined ? value : 'unknown';
                 });
-    }).catch(() => {
+            })
+            .catch(() => {
                 types.forEach(item => {
                     item.innerHTML = 'unknown';
                 });

packages/artplayer/src/layers.js

@@ -14,8 +14,11 @@ export default class Layers {
     add(item, callback) {
         const layer = typeof item === 'function' ? item(this.art) : item;
         if (!layer.disable) {
-      id++;
+            id += 1;
-      const { refs: { $layers }, events: { proxy } } = this.art;
+            const {
+                refs: { $layers },
+                events: { proxy },
+            } = this.art;
             const name = layer.name || `layer${id}`;
             const $layer = document.createElement('div');
             $layer.classList.value = `art-layer art-layer-${name}`;
@@ -30,8 +33,12 @@ export default class Layers {
             }
             insertByIndex($layers, $layer, layer.index || id);
             this[name] = $layer;
-      item.callback && item.callback($layer);
+            if (item.callback) {
-      callback && callback($layer);
+                item.callback($layer);
+            }
+            if (callback) {
+                callback($layer);
+            }
             this.art.emit('layers:add', $layer);
         }
     }

packages/artplayer/src/loading.js

@@ -4,7 +4,9 @@ import { append, setStyle } from './utils';
 export default class Loading {
     constructor(art) {
         this.art = art;
-    const { refs: { $loading } } = art;
+        const {
+            refs: { $loading },
+        } = art;
         append($loading, icons.loading);
     }
 

packages/artplayer/src/mask.js

@@ -4,7 +4,9 @@ import { append, setStyle } from './utils';
 export default class Mask {
     constructor(art) {
         this.art = art;
-    const { refs: { $mask } } = art;
+        const {
+            refs: { $mask },
+        } = art;
         append($mask, icons.playBig);
     }
 

packages/artplayer/src/mse.js

@@ -1,5 +1,4 @@
-import ArtPlayerError from './utils/ArtPlayerError';
+import { ArtPlayerError, errorHandle, getExt } from './utils';
-import { errorHandle, getExt } from './utils';
 import config from './config';
 
 export default class Mse {
@@ -19,17 +18,14 @@ export default class Mse {
             const type = getExt(option.url);
             errorHandle(
                 Object.keys(config.mimeCodec).includes(type),
-        `Can't find video's type '${type}' from '${option.url}'`
+                `Can't find video's type '${type}' from '${option.url}'`,
             );
             option.type = type;
         }
 
         if (!option.mimeCodec) {
             const mimeCodec = config.mimeCodec[option.type];
-      errorHandle(
+            errorHandle(mimeCodec, `Can't find video's mimeCodec from ${option.type}`);
-        mimeCodec,
-        `Can't find video's mimeCodec from ${option.type}`
-      );
             option.mimeCodec = mimeCodec;
         }
     }
@@ -37,11 +33,11 @@ export default class Mse {
     init() {
         const {
             option,
-      refs: { $video }
+            refs: { $video },
         } = this.art;
         errorHandle(
             MediaSource.isTypeSupported(option.mimeCodec),
-      `Unsupported MIME type or codec: ${option.mimeCodec}`
+            `Unsupported MIME type or codec: ${option.mimeCodec}`,
         );
         this.mediaSource = new MediaSource();
         $video.src = URL.createObjectURL(this.mediaSource);
@@ -92,7 +88,12 @@ export default class Mse {
     }
 
     fetchUrl() {
-    const { option: { url }, notice, i18n, loading } = this.art;
+        const {
+            option: { url },
+            notice,
+            i18n,
+            loading,
+        } = this.art;
         this.art.emit('player:fetch:start', url);
         this.request(url)
             .then(response => {
@@ -100,7 +101,8 @@ export default class Mse {
                 this.art.emit('player:fetch:success', url);
             })
             .catch(err => {
-        if (this.repeat++ < this.maxRepeat) {
+                this.repeat += 1;
+                if (this.repeat < this.maxRepeat) {
                     this.fetchUrl();
                 } else {
                     notice.show(i18n.get('Video load failed'));

packages/artplayer/src/player/aspectRatioMix.js

@@ -1,10 +1,14 @@
 import { setStyle } from '../utils';
 
 export default function aspectRatioMix(art, player) {
-  const { refs: { $video, $player }, i18n, notice } = art;
+    const {
+        refs: { $video, $player },
+        i18n,
+        notice,
+    } = art;
 
     Object.defineProperty(player, 'aspectRatioState', {
-    get: () => $player.dataset.aspectRatio
+        get: () => $player.dataset.aspectRatio,
     });
 
     Object.defineProperty(player, 'aspectRatio', {
@@ -18,7 +22,7 @@ export default function aspectRatioMix(art, player) {
                 const setupRatio = Number(ratio[0]) / Number(ratio[1]);
 
                 if (videoRatio > setupRatio) {
-          const percentage = setupRatio * videoHeight / videoWidth;
+                    const percentage = (setupRatio * videoHeight) / videoWidth;
                     setStyle($video, 'width', `${percentage * 100}%`);
                     setStyle($video, 'height', '100%');
                     setStyle($video, 'padding', `0 ${(clientWidth - clientWidth * percentage) / 2}px`);
@@ -36,7 +40,7 @@ export default function aspectRatioMix(art, player) {
 
             notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
             art.emit('aspectRatioChange', ratio);
-    }
+        },
     });
 
     Object.defineProperty(player, 'aspectRatioRemove', {
@@ -48,7 +52,7 @@ export default function aspectRatioMix(art, player) {
                 delete $player.dataset.aspectRatio;
                 art.emit('aspectRatioRemove');
             }
-    }
+        },
     });
 
     Object.defineProperty(player, 'aspectRatioReset', {
@@ -58,6 +62,6 @@ export default function aspectRatioMix(art, player) {
                 player.aspectRatio(aspectRatio.split(':'));
                 art.emit('aspectRatioReset');
             }
-    }
+        },
     });
 }

packages/artplayer/src/player/attrInit.js

@@ -1,7 +1,10 @@
 import { clamp, sleep } from '../utils';
 
 export default function attrInit(art, player) {
-  const { option, refs: { $video } } = art;
+    const {
+        option,
+        refs: { $video },
+    } = art;
     Object.keys(option.moreVideoAttr).forEach(key => {
         $video[key] = option.moreVideoAttr[key];
     });

packages/artplayer/src/player/autoSizeMix.js

@@ -1,10 +1,12 @@
 import { setStyle } from '../utils';
 
 export default function resizeMix(art, player) {
-  const { refs: { $container, $player, $video } } = art;
+    const {
+        refs: { $container, $player, $video },
+    } = art;
 
     Object.defineProperty(player, 'autoSizeState', {
-    get: () => $container.classList.contains('artplayer-auto-size')
+        get: () => $container.classList.contains('artplayer-auto-size'),
     });
 
     Object.defineProperty(player, 'autoSize', {
@@ -15,16 +17,16 @@ export default function resizeMix(art, player) {
             const containerRatio = width / height;
             $container.classList.add('artplayer-auto-size');
             if (containerRatio > videoRatio) {
-        const percentage = height * videoRatio / width * 100;
+                const percentage = ((height * videoRatio) / width) * 100;
                 setStyle($player, 'width', `${percentage}%`);
                 setStyle($player, 'height', '100%');
             } else {
-        const percentage = width / videoRatio / height * 100;
+                const percentage = (width / videoRatio / height) * 100;
                 setStyle($player, 'width', '100%');
                 setStyle($player, 'height', `${percentage}%`);
             }
             art.emit('autoSizeChange');
-    }
+        },
     });
 
     Object.defineProperty(player, 'autoSizeRemove', {
@@ -33,6 +35,6 @@ export default function resizeMix(art, player) {
             setStyle($player, 'width', null);
             setStyle($player, 'height', null);
             art.emit('autoSizeRemove');
-    }
+        },
     });
 }

packages/artplayer/src/player/currentTimeMix.js

@@ -3,6 +3,6 @@ export default function currentTimeMix(art, player) {
         get: () => art.refs.$video.currentTime || 0,
         set: currentTime => {
             art.refs.$video.currentTime = currentTime;
-    }
+        },
     });
 }

packages/artplayer/src/player/durationMix.js

@@ -1,5 +1,5 @@
 export default function durationMix(art, player) {
     Object.defineProperty(player, 'duration', {
-    get: () => art.refs.$video.duration || 0
+        get: () => art.refs.$video.duration || 0,
     });
 }

packages/artplayer/src/player/eventInit.js

@@ -2,7 +2,13 @@ import config from '../config';
 import { sleep } from '../utils';
 
 export default function eventInit(art, player) {
-  const { option, events: { proxy }, refs: { $player, $video }, i18n, notice } = art;
+    const {
+        option,
+        events: { proxy },
+        refs: { $player, $video },
+        i18n,
+        notice,
+    } = art;
     let firstCanplay = false;
     let reconnectTime = 0;
     const maxReconnectTime = 5;
@@ -73,7 +79,7 @@ export default function eventInit(art, player) {
     art.on('video:error', () => {
         if (reconnectTime < maxReconnectTime) {
             sleep(1000).then(() => {
-        reconnectTime++;
+                reconnectTime += 1;
                 art.emit('beforeMountUrl', option.url);
                 $video.src = player.mountUrl(option.url);
                 notice.show(`${i18n.get('Reconnect')}: ${reconnectTime}`);

packages/artplayer/src/player/flipMix.js

@@ -2,22 +2,25 @@ import { errorHandle } from '../utils';
 
 export default function flipMix(art, player) {
     Object.defineProperty(player, 'flipState', {
-    get: () => art.refs.$player.dataset.flip
+        get: () => art.refs.$player.dataset.flip,
     });
 
     Object.defineProperty(player, 'flip', {
         value: flip => {
             const flipList = ['normal', 'horizontal', 'vertical'];
-      errorHandle(flipList.includes(flip), `The 'angle' need to be one of '[normal, horizontal, vertical]', but got ${flip}`);
+            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');
-    }
+        },
     });
 }

packages/artplayer/src/player/fullscreenMix.js

@@ -1,7 +1,11 @@
 import screenfull from 'screenfull';
 
 export default function fullscreenMix(art, player) {
-  const { notice, events: { destroyEvents }, refs: { $player } } = art;
+    const {
+        notice,
+        events: { destroyEvents },
+        refs: { $player },
+    } = art;
 
     const screenfullChange = () => {
         art.emit('fullscreen', screenfull.isFullscreen);
@@ -19,7 +23,7 @@ export default function fullscreenMix(art, player) {
     });
 
     Object.defineProperty(player, 'fullscreenState', {
-    get: () => screenfull.isFullscreen
+        get: () => screenfull.isFullscreen,
     });
 
     Object.defineProperty(player, 'fullscreenEnabled', {
@@ -30,7 +34,7 @@ export default function fullscreenMix(art, player) {
             $player.classList.add('artplayer-fullscreen');
             screenfull.request($player);
             art.emit('fullscreen:enabled');
-    }
+        },
     });
 
     Object.defineProperty(player, 'fullscreenExit', {
@@ -41,7 +45,7 @@ export default function fullscreenMix(art, player) {
                 screenfull.exit();
                 art.emit('fullscreen:exit');
             }
-    }
+        },
     });
 
     Object.defineProperty(player, 'fullscreenToggle', {
@@ -51,6 +55,6 @@ export default function fullscreenMix(art, player) {
             } else {
                 player.fullscreenEnabled();
             }
-    }
+        },
     });
 }

packages/artplayer/src/player/fullscreenWebMix.js

@@ -1,8 +1,10 @@
 export default function fullscreenWebMix(art, player) {
-  const { refs: { $player } } = art;
+    const {
+        refs: { $player },
+    } = art;
 
     Object.defineProperty(player, 'fullscreenWebState', {
-    get: () => $player.classList.contains('artplayer-web-fullscreen')
+        get: () => $player.classList.contains('artplayer-web-fullscreen'),
     });
 
     Object.defineProperty(player, 'fullscreenWebEnabled', {
@@ -12,7 +14,7 @@ export default function fullscreenWebMix(art, player) {
             }
             $player.classList.add('artplayer-web-fullscreen');
             art.emit('fullscreenWeb:enabled');
-    }
+        },
     });
 
     Object.defineProperty(player, 'fullscreenWebExit', {
@@ -22,7 +24,7 @@ export default function fullscreenWebMix(art, player) {
                 $player.classList.remove('artplayer-web-fullscreen');
                 art.emit('fullscreenWeb:exit');
             }
-    }
+        },
     });
 
     Object.defineProperty(player, 'fullscreenWebToggle', {
@@ -32,6 +34,6 @@ export default function fullscreenWebMix(art, player) {
             } else {
                 player.fullscreenWebEnabled();
             }
-    }
+        },
     });
 }

packages/artplayer/src/player/loadedMix.js

@@ -2,8 +2,7 @@ export default function seekMix(art, player) {
     Object.defineProperty(player, 'loaded', {
         get: () =>
             art.refs.$video.buffered.length
-        ? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) /
+                ? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) / art.refs.$video.duration
-          art.refs.$video.duration
+                : 0,
-        : 0
     });
 }

packages/artplayer/src/player/mountUrlMix.js

@@ -1,6 +1,6 @@
 export default function mountUrlMix(art, player) {
     Object.defineProperty(player, 'mountUrl', {
         writable: true,
-    value: url => url
+        value: url => url,
     });
 }

packages/artplayer/src/player/pauseMin.js

@@ -1,11 +1,15 @@
 export default function pauseMin(art, player) {
-  const { refs: { $video }, i18n, notice } = art;
+    const {
+        refs: { $video },
+        i18n,
+        notice,
+    } = art;
 
     Object.defineProperty(player, 'pause', {
         value: () => {
             $video.pause();
             notice.show(i18n.get('Pause'));
             art.emit('pause');
-    }
+        },
     });
 }

packages/artplayer/src/player/pipMix.js

@@ -5,13 +5,13 @@ function nativePip(art, player) {
     const {
         notice,
         refs: { $video },
-    events: { proxy }
+        events: { proxy },
     } = art;
 
     $video.disablePictureInPicture = false;
 
     Object.defineProperty(player, 'pipState', {
-    get: () => document.pictureInPictureElement
+        get: () => document.pictureInPictureElement,
     });
 
     Object.defineProperty(player, 'pipEnabled', {
@@ -20,7 +20,7 @@ function nativePip(art, player) {
                 notice.show(error, true, 3000);
                 console.warn(error);
             });
-    }
+        },
     });
 
     Object.defineProperty(player, 'pipExit', {
@@ -29,7 +29,7 @@ function nativePip(art, player) {
                 notice.show(error, true, 3000);
                 console.warn(error);
             });
-    }
+        },
     });
 
     Object.defineProperty(player, 'pipToggle', {
@@ -39,7 +39,7 @@ function nativePip(art, player) {
             } else {
                 player.pipEnabled();
             }
-    }
+        },
     });
 
     proxy($video, 'enterpictureinpicture', () => {
@@ -59,13 +59,13 @@ function customPip(art, player) {
         option,
         i18n,
         refs: { $player, $pipClose, $pipTitle },
-    events: { destroyEvents, proxy }
+        events: { destroyEvents, proxy },
     } = art;
     let cachePos = null;
     let draggie = null;
 
     Object.defineProperty(player, 'pipState', {
-    get: () => $player.classList.contains('artplayer-pip')
+        get: () => $player.classList.contains('artplayer-pip'),
     });
 
     Object.defineProperty(player, 'pipEnabled', {
@@ -76,7 +76,7 @@ function customPip(art, player) {
 
             if (!draggie) {
                 draggie = new Draggabilly($player, {
-          handle: '.artplayer-pip-header'
+                    handle: '.artplayer-pip-header',
                 });
 
                 append($pipTitle, option.title || i18n.get('Mini player'));
@@ -99,7 +99,7 @@ function customPip(art, player) {
             player.aspectRatioRemove();
             player.playbackRateRemove();
             art.emit('pipEnabled');
-    }
+        },
     });
 
     Object.defineProperty(player, 'pipExit', {
@@ -115,7 +115,7 @@ function customPip(art, player) {
                 player.playbackRateRemove();
                 art.emit('pipExit');
             }
-    }
+        },
     });
 
     Object.defineProperty(player, 'pipToggle', {
@@ -125,7 +125,7 @@ function customPip(art, player) {
             } else {
                 player.pipEnabled();
             }
-    }
+        },
     });
 }
 

packages/artplayer/src/player/playMix.js

@@ -1,5 +1,10 @@
 export default function playMix(art, player) {
-  const { refs: { $video }, i18n, notice, option: { mutex } } = art;
+    const {
+        refs: { $video },
+        i18n,
+        notice,
+        option: { mutex },
+    } = art;
 
     Object.defineProperty(player, 'play', {
         value: () => {
@@ -12,13 +17,11 @@ export default function playMix(art, player) {
             }
 
             if (mutex) {
-        art.constructor.instances
+                art.constructor.instances.filter(item => item !== art).forEach(item => item.player.pause());
-          .filter(item => item !== art)
-          .forEach(item => item.player.pause());
             }
 
             notice.show(i18n.get('Play'));
             art.emit('play');
-    }
+        },
     });
 }

packages/artplayer/src/player/playbackRateMix.js

@@ -1,10 +1,14 @@
 import { clamp } from '../utils';
 
 export default function playbackRateMix(art, player) {
-  const { refs: { $video, $player }, i18n, notice } = art;
+    const {
+        refs: { $video, $player },
+        i18n,
+        notice,
+    } = art;
 
     Object.defineProperty(player, 'playbackRateState', {
-    get: () => $player.dataset.playbackRate
+        get: () => $player.dataset.playbackRate,
     });
 
     Object.defineProperty(player, 'playbackRate', {
@@ -14,7 +18,7 @@ export default function playbackRateMix(art, player) {
             $player.dataset.playbackRate = newRate;
             notice.show(`${i18n.get('Rate')}: ${newRate === 1 ? i18n.get('Normal') : `${newRate}x`}`);
             art.emit('playbackRateChange', newRate);
-    }
+        },
     });
 
     Object.defineProperty(player, 'playbackRateRemove', {
@@ -24,7 +28,7 @@ export default function playbackRateMix(art, player) {
                 delete $player.dataset.playbackRate;
                 art.emit('playbackRateRemove');
             }
-    }
+        },
     });
 
     Object.defineProperty(player, 'playbackRateReset', {
@@ -34,6 +38,6 @@ export default function playbackRateMix(art, player) {
                 player.playbackRate(Number(playbackRate));
                 art.emit('playbackRateReset');
             }
-    }
+        },
     });
 }

packages/artplayer/src/player/playedMix.js

@@ -1,5 +1,5 @@
 export default function seekMix(art, player) {
     Object.defineProperty(player, 'played', {
-    get: () => art.refs.$video.currentTime / art.refs.$video.duration
+        get: () => art.refs.$video.currentTime / art.refs.$video.duration,
     });
 }

packages/artplayer/src/player/screenshotMix.js

@@ -1,7 +1,11 @@
 import { setStyle, secondToTime } from '../utils';
 
 export default function screenshotMix(art, player) {
-  const { option, notice, refs: { $video } } = art;
+    const {
+        option,
+        notice,
+        refs: { $video },
+    } = art;
 
     function captureFrame() {
         const canvas = document.createElement('canvas');
@@ -32,6 +36,6 @@ export default function screenshotMix(art, player) {
             } finally {
                 $video.crossOrigin = crossOrigin;
             }
-    }
+        },
     });
 }

packages/artplayer/src/player/seekMix.js

@@ -12,6 +12,6 @@ export default function seekMix(art, player) {
             player.currentTime = newTime;
             notice.show(`${secondToTime(newTime)} / ${secondToTime(player.duration)}`);
             art.emit('seek', newTime);
-    }
+        },
     });
 }

packages/artplayer/src/player/switchMix.js

@@ -1,5 +1,11 @@
 export default function switchMix(art, player) {
-  const { refs: { $video }, i18n, notice, isPlaying, option } = art;
+    const {
+        refs: { $video },
+        i18n,
+        notice,
+        isPlaying,
+        option,
+    } = art;
 
     Object.defineProperty(player, 'switch', {
         value: (url, name = 'unknown') => {
@@ -17,6 +23,6 @@ export default function switchMix(art, player) {
                 notice.show(`${i18n.get('Switch video')}: ${name}`);
                 art.emit('switch', url);
             }
-    }
+        },
     });
 }

packages/artplayer/src/player/toggleMix.js

@@ -6,6 +6,6 @@ export default function toggleMix(art, player) {
             } else {
                 player.play();
             }
-    }
+        },
     });
 }

packages/artplayer/src/player/volumeMix.js

@@ -1,25 +1,30 @@
 import { clamp } from '../utils';
 
 export default function volumeMix(art, player) {
-  const { refs: { $video }, i18n, notice, storage } = art;
+    const {
+        refs: { $video },
+        i18n,
+        notice,
+        storage,
+    } = art;
 
     Object.defineProperty(player, 'volume', {
         get: () => $video.volume || 0,
         set: percentage => {
             if (percentage !== undefined) {
                 $video.volume = clamp(percentage, 0, 1);
-        notice.show(`${i18n.get('Volume')}: ${parseInt($video.volume * 100)}`);
+                notice.show(`${i18n.get('Volume')}: ${parseInt($video.volume * 100, 10)}`);
                 if ($video.volume !== 0) {
                     storage.set('volume', $video.volume);
                 }
                 art.emit('volumeChange', $video.volume);
             }
-    }
+        },
     });
 
     Object.defineProperty(player, 'mute', {
         value: () => {
             player.volume = 0;
-    }
+        },
     });
 }

packages/artplayer/src/scheme/index.js

@@ -4,17 +4,17 @@ import validStringEmpty from './validStringEmpty';
 export default {
     container: {
         validator: validElement,
-    required: true
+        required: true,
     },
     url: {
         type: 'string',
         required: true,
-    validator: validStringEmpty
+        validator: validStringEmpty,
     },
     poster: 'string',
     title: 'string',
     type: {
-    type: 'string'
+        type: 'string',
     },
     mimeCodec: 'string',
     theme: 'string',
@@ -40,8 +40,8 @@ export default {
             index: 'number',
             html: validElement,
             style: 'object',
-      click: 'function'
+            click: 'function',
-    }
+        },
     },
     contextmenu: {
         type: 'array',
@@ -52,16 +52,16 @@ export default {
             index: 'number',
             html: validElement,
             style: 'object',
-      click: 'function'
+            click: 'function',
-    }
+        },
     },
     quality: {
         type: 'array',
         child: {
             default: 'boolean',
             name: 'string',
-      url: 'string'
+            url: 'string',
-    }
+        },
     },
     controls: {
         type: 'array',
@@ -73,18 +73,18 @@ export default {
                     disable: 'boolean',
                     name: 'string',
                     index: 'number',
-          position: 'string'
+                    position: 'string',
-        }
+                },
-      }
+            },
-    }
+        },
     },
     highlight: {
         type: 'array',
         child: {
             type: 'object',
             time: 'number',
-      text: 'string'
+            text: 'string',
-    }
+        },
     },
     thumbnails: {
         type: 'object',
@@ -94,17 +94,17 @@ export default {
             number: 'number',
             width: 'number',
             height: 'number',
-      column: 'number'
+            column: 'number',
-    }
+        },
     },
     subtitle: {
         type: 'object',
         child: {
             type: 'object',
             url: 'string',
-      style: 'object'
+            style: 'object',
-    }
+        },
     },
     moreVideoAttr: 'object',
-  lang: 'string'
+    lang: 'string',
 };

packages/artplayer/src/setting/flip.js

@@ -6,10 +6,16 @@ export default class Flip {
     }
 
     apply(art, $setting) {
-    const { i18n, events: { proxy }, player } = art;
+        const {
+            i18n,
+            events: { proxy },
+            player,
+        } = art;
         this.$header = $setting.querySelector('.art-setting-header');
         this.$body = $setting.querySelector('.art-setting-body');
-    this.$btns = append(this.$body, `
+        this.$btns = append(
+            this.$body,
+            `
               <div class="art-setting-btns">
                 <div class="art-setting-btn current">
                   <span data-flip="normal">${i18n.get('Normal')}</span>
@@ -21,7 +27,8 @@ export default class Flip {
                   <span data-flip="vertical">${i18n.get('Vertical')}</span>
                 </div>
               </div>
-    `);
+            `,
+        );
 
         proxy(this.$btns, 'click', event => {
             const { target } = event;
@@ -32,9 +39,7 @@ export default class Flip {
         });
 
         art.on('flipChange', flip => {
-      const $current = Array.from(this.$btns.querySelectorAll('span')).find(
+            const $current = Array.from(this.$btns.querySelectorAll('span')).find(item => item.dataset.flip === flip);
-        item => item.dataset.flip === flip
-      );
             inverseClass($current.parentElement, 'current');
         });
     }

packages/artplayer/src/setting/index.js

@@ -15,24 +15,29 @@ export default class Setting {
     }
 
     init() {
-    const { refs: { $settingClose }, events: { proxy } } = this.art;
+        const {
+            refs: { $settingClose },
+            events: { proxy },
+        } = this.art;
 
         proxy($settingClose, 'click', () => {
             this.hide();
         });
 
-    this.add(new Flip({
+        this.add(
+            new Flip({
                 name: 'flip',
                 title: 'Flip',
                 disable: false,
-      index: 10
+                index: 10,
-    }));
+            }),
+        );
     }
 
     add(setting, callback) {
         const { option } = setting;
         if (option && !option.disable) {
-      id++;
+            id += 1;
             const { refs, i18n } = this.art;
             const name = option.name || `setting${id}`;
             const title = option.title || name;
@@ -40,23 +45,31 @@ export default class Setting {
             $setting.setAttribute('class', `art-setting art-setting-${name}`);
             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);
+            if (setting.apply) {
+                setting.apply(this.art, $setting);
+            }
             insertByIndex(refs.$settingBody, $setting, option.index || id);
             this[name] = $setting;
-      callback && callback($setting);
+            if (callback) {
+                callback($setting);
+            }
             this.art.emit('setting:add', $setting);
         }
     }
 
     show() {
-    const { refs: { $setting } } = this.art;
+        const {
+            refs: { $setting },
+        } = this.art;
         setStyle($setting, 'display', 'flex');
         this.state = true;
         this.art.emit('setting:show', $setting);
     }
 
     hide() {
-    const { refs: { $setting } } = this.art;
+        const {
+            refs: { $setting },
+        } = this.art;
         setStyle($setting, 'display', 'none');
         this.state = false;
         this.art.emit('setting:hide', $setting);

packages/artplayer/src/storage.js

@@ -16,7 +16,7 @@ export default class Storage {
 
     set(key, value) {
         const storage = Object.assign({}, this.get(), {
-      [key]: value
+            [key]: value,
         });
         localStorage.setItem(this.storageName, JSON.stringify(storage));
     }

packages/artplayer/src/subtitle.js

@@ -13,7 +13,11 @@ export default class Subtitle {
     }
 
     init() {
-    const { events: { proxy }, option: { subtitle }, refs: { $video, $subtitle } } = this.art;
+        const {
+            events: { proxy },
+            option: { subtitle },
+            refs: { $video, $subtitle },
+        } = this.art;
         setStyles($subtitle, subtitle.style || {});
         const $track = document.createElement('track');
         $track.default = true;
@@ -50,7 +54,7 @@ export default class Subtitle {
                 return response.text();
             })
             .then(text => {
-        if ((/x-subrip/gi).test(type)) {
+                if (/x-subrip/gi.test(type)) {
                     this.vttText = this.srtToVtt(text);
                 } else {
                     this.vttText = text;
@@ -72,15 +76,15 @@ export default class Subtitle {
                 .replace(/\{([ibu])\}/g, '<$1>')
                 .replace(/\{\/([ibu])\}/g, '</$1>')
                 .replace(/(\d\d:\d\d:\d\d),(\d\d\d)/g, '$1.$2')
-        .concat('\r\n\r\n')
+                .concat('\r\n\r\n'),
         );
     }
 
     vttToBlob(vttText) {
         return URL.createObjectURL(
             new Blob([vttText], {
-        type: 'text/vtt'
+                type: 'text/vtt',
-      })
+            }),
         );
     }
 
@@ -88,12 +92,16 @@ export default class Subtitle {
         const ext = getExt(url);
         errorHandle(
             ext === 'vtt' || ext === 'srt',
-      `'subtitle.url' option require 'vtt' or 'srt' format, but got '${ext}'.`
+            `'subtitle.url' option require 'vtt' or 'srt' format, but got '${ext}'.`,
         );
     }
 
     show() {
-    const { refs: { $subtitle }, i18n, notice } = this.art;
+        const {
+            refs: { $subtitle },
+            i18n,
+            notice,
+        } = this.art;
         setStyle($subtitle, 'display', 'block');
         this.state = true;
         notice.show(i18n.get('Show subtitle'));
@@ -101,7 +109,11 @@ export default class Subtitle {
     }
 
     hide() {
-    const { refs: { $subtitle }, i18n, notice } = this.art;
+        const {
+            refs: { $subtitle },
+            i18n,
+            notice,
+        } = this.art;
         setStyle($subtitle, 'display', 'none');
         this.state = false;
         notice.show(i18n.get('Hide subtitle'));

packages/artplayer/src/utils/index.js

@@ -76,40 +76,13 @@ export function getStyle(element, key, numberType = true) {
 }
 
 export function secondToTime(second) {
-  const add0 = num => num < 10 ? `0${num}` : String(num);
+    const add0 = num => (num < 10 ? `0${num}` : String(num));
     const hour = Math.floor(second / 3600);
     const min = Math.floor((second - hour * 3600) / 60);
     const sec = Math.floor(second - hour * 3600 - min * 60);
     return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
 }
 
-export function deepMerge(...sources) {
-  const isObject = value => value !== null && typeof value === 'object';
-  let returnValue = {};
-  for (const source of sources) {
-    if (Array.isArray(source)) {
-      if (!Array.isArray(returnValue)) {
-        returnValue = [];
-      }
-      returnValue = [...returnValue, ...source];
-    } else if (isObject(source)) {
-      if (source instanceof Element) {
-        return source;
-      }
-      for (const key in source) {
-        if (source.hasOwnProperty(key)) {
-          let value = source[key];
-          if (isObject(value) && key in returnValue) {
-            value = deepMerge(returnValue[key], value);
-          }
-          returnValue = { ...returnValue, [key]: value };
-        }
-      }
-    }
-  }
-  return returnValue;
-}
-
 export function tooltip(target, msg, pos = 'up') {
     target.setAttribute('data-balloon', msg);
     target.setAttribute('data-balloon-pos', pos);
@@ -130,8 +103,7 @@ export function inverseClass(target, className) {
 
 export function debounce(func, wait, context) {
     let timeout;
-  function fn() {
+    function fn(...args) {
-    const args = arguments;
         const later = function later() {
             timeout = null;
             func.apply(context, args);