分离部分工具函数

.eslintrc

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

docs/lab/js/artplayer.js

@@ -387,7 +387,6 @@
   module.exports = _wrapNativeSuper;
   });
 
-  var instances = [];
   var ArtPlayerError =
   /*#__PURE__*/
   function (_Error) {
@@ -417,20 +416,7 @@
       throw new ArtPlayerError(msg);
     }
   }
-  function clamp(num, a, b) {
-    return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
-  }
-  function getExt(url) {
-    if (url.includes('?')) {
-      return getExt(url.split('?')[0]);
-    }
 
-    if (url.includes('#')) {
-      return getExt(url.split('#')[0]);
-    }
-
-    return url.trim().toLowerCase().split('.').pop();
-  }
   function append(parent, child) {
     if (child instanceof Element) {
       parent.appendChild(child);
@@ -470,27 +456,6 @@
     var value = window.getComputedStyle(element, null).getPropertyValue(key);
     return numberType ? parseFloat(value) : value;
   }
-  function secondToTime(second) {
-    var add0 = function add0(num) {
-      return num < 10 ? "0".concat(num) : String(num);
-    };
-
-    var hour = Math.floor(second / 3600);
-    var min = Math.floor((second - hour * 3600) / 60);
-    var sec = Math.floor(second - hour * 3600 - min * 60);
-    return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
-  }
-  function tooltip(target, msg) {
-    var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'up';
-    target.setAttribute('data-balloon', msg);
-    target.setAttribute('data-balloon-pos', pos);
-  }
-  function sleep() {
-    var ms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return new Promise(function (resolve) {
-      return setTimeout(resolve, ms);
-    });
-  }
   function sublings(target) {
     return Array.from(target.parentElement.children).filter(function (item) {
       return item !== target;
@@ -502,6 +467,51 @@
     });
     target.classList.add(className);
   }
+  function tooltip(target, msg) {
+    var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'up';
+    target.setAttribute('data-balloon', msg);
+    target.setAttribute('data-balloon-pos', pos);
+  }
+
+  function srtToVtt(srtText) {
+    return 'WEBVTT \r\n\r\n'.concat(srtText.replace(/\{\\([ibu])\}/g, '</$1>').replace(/\{\\([ibu])1\}/g, '<$1>').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'));
+  }
+  function vttToBlob(vttText) {
+    return URL.createObjectURL(new Blob([vttText], {
+      type: 'text/vtt'
+    }));
+  }
+
+  function clamp(num, a, b) {
+    return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
+  }
+  function getExt(url) {
+    if (url.includes('?')) {
+      return getExt(url.split('?')[0]);
+    }
+
+    if (url.includes('#')) {
+      return getExt(url.split('#')[0]);
+    }
+
+    return url.trim().toLowerCase().split('.').pop();
+  }
+  function secondToTime(second) {
+    var add0 = function add0(num) {
+      return num < 10 ? "0".concat(num) : String(num);
+    };
+
+    var hour = Math.floor(second / 3600);
+    var min = Math.floor((second - hour * 3600) / 60);
+    var sec = Math.floor(second - hour * 3600 - min * 60);
+    return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
+  }
+  function sleep() {
+    var ms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    return new Promise(function (resolve) {
+      return setTimeout(resolve, ms);
+    });
+  }
   function debounce(func, wait, context) {
     var timeout;
 
@@ -525,36 +535,25 @@
 
     return fn;
   }
-  function show(target, display) {
-    target.classList.remove('art-hide');
-
-    if (display) {
-      target.style.display = display;
-    }
-  }
-  function hide(target) {
-    target.classList.add('art-hide');
-  }
 
   var utils = /*#__PURE__*/Object.freeze({
-    instances: instances,
-    ArtPlayerError: ArtPlayerError,
-    errorHandle: errorHandle,
     clamp: clamp,
     getExt: getExt,
+    secondToTime: secondToTime,
+    sleep: sleep,
+    debounce: debounce,
+    ArtPlayerError: ArtPlayerError,
+    errorHandle: errorHandle,
     append: append,
     insertByIndex: insertByIndex,
     setStyle: setStyle,
     setStyles: setStyles,
     getStyle: getStyle,
-    secondToTime: secondToTime,
-    tooltip: tooltip,
-    sleep: sleep,
     sublings: sublings,
     inverseClass: inverseClass,
-    debounce: debounce,
+    tooltip: tooltip,
-    show: show,
+    srtToVtt: srtToVtt,
-    hide: hide
+    vttToBlob: vttToBlob
   });
 
   function validElement(paths, value, type) {
@@ -3110,40 +3109,14 @@
     flipMix(art, this);
   };
 
-  function commonMethod(art, option, $element, title) {
+  function component(art, parent, target, component, callback, title) {
-    Object.defineProperty(option, '$ref', {
-      get: function get() {
-        return $element;
-      }
-    });
-    Object.defineProperty(option, 'hide', {
-      value: function value() {
-        setStyle($element, 'display', 'none');
-        art.emit("".concat(title, ":hide"), $element);
-      }
-    });
-    Object.defineProperty(option, 'show', {
-      value: function value() {
-        setStyle($element, 'display', 'block');
-        art.emit("".concat(title, ":show"), $element);
-      }
-    });
-  }
-
-  function componentMethod(art, parent, target, component, callback, title) {
-    var proxy = art.events.proxy;
     var option = typeof component === 'function' ? component(art) : component;
 
     if (!option.disable) {
-      if (parent.id === undefined) {
-        parent.id = 0;
-      }
-
       parent.id += 1;
       var name = option.name || "".concat(title).concat(parent.id);
       var $element = document.createElement('div');
       $element.classList.value = "art-".concat(title, " art-").concat(title, "-").concat(name);
-      insertByIndex(target, $element, option.index || parent.id);
 
       if (option.html) {
         append($element, option.html);
@@ -3154,13 +3127,32 @@
       }
 
       if (option.click) {
-        proxy($element, 'click', function (event) {
+        art.events.proxy($element, 'click', function (event) {
           event.preventDefault();
           option.click.call(parent, event);
           art.emit("".concat(title, ":click"), $element);
         });
       }
 
+      Object.defineProperty(option, '$ref', {
+        get: function get() {
+          return $element;
+        }
+      });
+      Object.defineProperty(option, 'hide', {
+        value: function value() {
+          setStyle($element, 'display', 'none');
+          art.emit("".concat(title, ":hide"), $element);
+        }
+      });
+      Object.defineProperty(option, 'show', {
+        value: function value() {
+          setStyle($element, 'display', 'block');
+          art.emit("".concat(title, ":show"), $element);
+        }
+      });
+      insertByIndex(target, $element, option.index || parent.id);
+
       if (option.mounted) {
         option.mounted($element);
       }
@@ -3169,7 +3161,6 @@
         callback($element);
       }
 
-      commonMethod(art, option, $element, title);
       parent[name] = option;
       art.emit("".concat(title, ":add"), option);
     }
@@ -3933,7 +3924,7 @@
         }
 
         if (parent) {
-          componentMethod(this.art, this, parent, option, callback, 'control');
+          component(this.art, this, parent, option, callback, 'control');
         }
       }
     }, {
@@ -4107,7 +4098,7 @@
       key: "add",
       value: function add(item, callback) {
         var $contextmenu = this.art.refs.$contextmenu;
-        componentMethod(this.art, this, $contextmenu, item, callback, 'contextmenu');
+        component(this.art, this, $contextmenu, item, callback, 'contextmenu');
       }
     }, {
       key: "setPos",
@@ -4144,14 +4135,14 @@
       }
     }, {
       key: "hide",
-      value: function hide$$1() {
+      value: function hide() {
         var $contextmenu = this.art.refs.$contextmenu;
         setStyle($contextmenu, 'display', 'none');
         this.art.emit('contextmenu:hide', $contextmenu);
       }
     }, {
       key: "show",
-      value: function show$$1() {
+      value: function show() {
         var $contextmenu = this.art.refs.$contextmenu;
         setStyle($contextmenu, 'display', 'block');
         this.art.emit('contextmenu:show', $contextmenu);
@@ -4192,14 +4183,14 @@
       }
     }, {
       key: "show",
-      value: function show$$1() {
+      value: function show() {
         var _this$art$refs2 = this.art.refs,
             $info = _this$art$refs2.$info,
             $infoPanel = _this$art$refs2.$infoPanel;
         setStyle($info, 'display', 'block');
 
         if (!$infoPanel.innerHTML) {
-          append($infoPanel, this.creatInfo());
+          append($infoPanel, Info.creatInfo());
           this.getHeader();
         }
 
@@ -4207,20 +4198,6 @@
         this.loop();
         this.art.emit('info:show', $info);
       }
-    }, {
-      key: "creatInfo",
-      value: function creatInfo() {
-        var infoHtml = [];
-        infoHtml.push("\n          <div class=\"art-info-item \">\n            <div class=\"art-info-title\">Player version:</div>\n            <div class=\"art-info-content\">1.0.3</div>\n          </div>\n        ");
-        infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">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        ");
-        infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video volume:</div>\n            <div class=\"art-info-content\" data-video=\"volume\"></div>\n          </div>\n        ");
-        infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video time:</div>\n            <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n          </div>\n        ");
-        infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video duration:</div>\n            <div class=\"art-info-content\" data-video=\"duration\"></div>\n          </div>\n        ");
-        infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video resolution:</div>\n            <div class=\"art-info-content\">\n              <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n            </div>\n          </div>\n        ");
-        return infoHtml.join('');
-      }
     }, {
       key: "getHeader",
       value: function getHeader() {
@@ -4271,12 +4248,26 @@
       }
     }, {
       key: "hide",
-      value: function hide$$1() {
+      value: function hide() {
         var $info = this.art.refs.$info;
         setStyle($info, 'display', 'none');
         clearTimeout(this.timer);
         this.art.emit('info:hide', $info);
       }
+    }], [{
+      key: "creatInfo",
+      value: function creatInfo() {
+        var infoHtml = [];
+        infoHtml.push("\n          <div class=\"art-info-item \">\n            <div class=\"art-info-title\">Player version:</div>\n            <div class=\"art-info-content\">1.0.3</div>\n          </div>\n        ");
+        infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">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        ");
+        infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video volume:</div>\n            <div class=\"art-info-content\" data-video=\"volume\"></div>\n          </div>\n        ");
+        infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video time:</div>\n            <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n          </div>\n        ");
+        infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video duration:</div>\n            <div class=\"art-info-content\" data-video=\"duration\"></div>\n          </div>\n        ");
+        infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video resolution:</div>\n            <div class=\"art-info-content\">\n              <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n            </div>\n          </div>\n        ");
+        return infoHtml.join('');
+      }
     }]);
 
     return Info;
@@ -4294,7 +4285,6 @@
       var url = this.art.option.subtitle.url;
 
       if (url) {
-        this.checkExt(url);
         this.init();
       }
     }
@@ -4354,39 +4344,21 @@
           return response.text();
         }).then(function (text) {
           if (/x-subrip/gi.test(type)) {
-            _this2.vttText = _this2.srtToVtt(text);
+            _this2.vttText = srtToVtt(text);
           } else {
             _this2.vttText = text;
           }
 
-          return _this2.vttToBlob(_this2.vttText);
+          return vttToBlob(_this2.vttText);
         }).catch(function (err) {
           notice.show(err);
           console.warn(err);
           throw err;
         });
       }
-    }, {
-      key: "srtToVtt",
-      value: function srtToVtt(text) {
-        return 'WEBVTT \r\n\r\n'.concat(text.replace(/\{\\([ibu])\}/g, '</$1>').replace(/\{\\([ibu])1\}/g, '<$1>').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'));
-      }
-    }, {
-      key: "vttToBlob",
-      value: function vttToBlob(vttText) {
-        return URL.createObjectURL(new Blob([vttText], {
-          type: 'text/vtt'
-        }));
-      }
-    }, {
-      key: "checkExt",
-      value: function checkExt(url) {
-        var ext = getExt(url);
-        errorHandle(ext === 'vtt' || ext === 'srt', "'subtitle.url' option require 'vtt' or 'srt' format, but got '".concat(ext, "'."));
-      }
     }, {
       key: "show",
-      value: function show$$1() {
+      value: function show() {
         var _this$art2 = this.art,
             $subtitle = _this$art2.refs.$subtitle,
             i18n = _this$art2.i18n,
@@ -4398,7 +4370,7 @@
       }
     }, {
       key: "hide",
-      value: function hide$$1() {
+      value: function hide() {
         var _this$art3 = this.art,
             $subtitle = _this$art3.refs.$subtitle,
             i18n = _this$art3.i18n,
@@ -4423,7 +4395,6 @@
         var _this3 = this;
 
         var $track = this.art.refs.$track;
-        this.checkExt(url);
         errorHandle($track, 'You need to initialize the subtitle option first.');
         this.load(url).then(function (data) {
           $track.src = data;
@@ -4949,18 +4920,18 @@
       key: "add",
       value: function add(item, callback) {
         var $layers = this.art.refs.$layers;
-        componentMethod(this.art, this, $layers, item, callback, 'layer');
+        component(this.art, this, $layers, item, callback, 'layer');
       }
     }, {
       key: "show",
-      value: function show$$1() {
+      value: function show() {
         var $layers = this.art.refs.$layers;
         setStyle($layers, 'display', 'block');
         this.art.emit('layers:show', $layers);
       }
     }, {
       key: "hide",
-      value: function hide$$1() {
+      value: function hide() {
         var $layers = this.art.refs.$layers;
         setStyle($layers, 'display', 'none');
         this.art.emit('layers:hide', $layers);
@@ -4983,14 +4954,14 @@
 
     createClass(Loading, [{
       key: "hide",
-      value: function hide$$1() {
+      value: function hide() {
         var $loading = this.art.refs.$loading;
         setStyle($loading, 'display', 'none');
         this.art.emit('loading:hide', $loading);
       }
     }, {
       key: "show",
-      value: function show$$1() {
+      value: function show() {
         var $loading = this.art.refs.$loading;
         setStyle($loading, 'display', 'flex');
         this.art.emit('loading:show', $loading);
@@ -5012,7 +4983,7 @@
 
     createClass(Notice, [{
       key: "show",
-      value: function show$$1(msg) {
+      value: function show(msg) {
         var _this = this;
 
         var autoHide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -5034,7 +5005,7 @@
       }
     }, {
       key: "hide",
-      value: function hide$$1() {
+      value: function hide() {
         var $notice = this.art.refs.$notice;
         setStyle($notice, 'display', 'none');
         this.art.emit('notice:hide', $notice);
@@ -5057,14 +5028,14 @@
 
     createClass(Mask, [{
       key: "show",
-      value: function show$$1() {
+      value: function show() {
         var $mask = this.art.refs.$mask;
         setStyle($mask, 'display', 'flex');
         this.art.emit('mask:show', $mask);
       }
     }, {
       key: "hide",
-      value: function hide$$1() {
+      value: function hide() {
         var $mask = this.art.refs.$mask;
         setStyle($mask, 'display', 'none');
         this.art.emit('mask:show', $mask);
@@ -5141,11 +5112,11 @@
       key: "add",
       value: function add(item, callback) {
         var $settingBody = this.art.refs.$settingBody;
-        componentMethod(this.art, this, $settingBody, item, callback, 'setting');
+        component(this.art, this, $settingBody, item, callback, 'setting');
       }
     }, {
       key: "show",
-      value: function show$$1() {
+      value: function show() {
         var $setting = this.art.refs.$setting;
         setStyle($setting, 'display', 'flex');
         this.state = true;
@@ -5153,7 +5124,7 @@
       }
     }, {
       key: "hide",
-      value: function hide$$1() {
+      value: function hide() {
         var $setting = this.art.refs.$setting;
         setStyle($setting, 'display', 'none');
         this.state = false;

docs/lab/js/artplayer.js.map

@@ -1 +1 @@
-{"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/switchQualityMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/utils/componentMethod.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../.Line 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/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/src/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/switchQualityMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayLine truncated

packages/artplayer/src/contextmenu/index.js

@@ -1,5 +1,5 @@
 import { setStyle } from '../utils';
-import componentMethod from '../utils/componentMethod';
+import component from '../utils/component';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
 import info from './info';
@@ -71,7 +71,7 @@ export default class Contextmenu {
 
     add(item, callback) {
         const { $contextmenu } = this.art.refs;
-        componentMethod(this.art, this, $contextmenu, item, callback, 'contextmenu');
+        component(this.art, this, $contextmenu, item, callback, 'contextmenu');
     }
 
     setPos(event) {

packages/artplayer/src/controls/index.js

@@ -1,4 +1,4 @@
-import componentMethod from '../utils/componentMethod';
+import component from '../utils/component';
 import fullscreen from './fullscreen';
 import fullscreenWeb from './fullscreenWeb';
 import pip from './pip';
@@ -156,7 +156,7 @@ export default class Controls {
         }
 
         if (parent) {
-            componentMethod(this.art, this, parent, option, callback, 'control');
+            component(this.art, this, parent, option, callback, 'control');
         }
     }
 

packages/artplayer/src/info.js

@@ -25,7 +25,7 @@ export default class Info {
         const { $info, $infoPanel } = this.art.refs;
         setStyle($info, 'display', 'block');
         if (!$infoPanel.innerHTML) {
-            append($infoPanel, this.creatInfo());
+            append($infoPanel, Info.creatInfo());
             this.getHeader();
         }
         clearTimeout(this.timer);
@@ -33,7 +33,7 @@ export default class Info {
         this.art.emit('info:show', $info);
     }
 
-    creatInfo() {
+    static creatInfo() {
         const infoHtml = [];
 
         infoHtml.push(`

packages/artplayer/src/layers.js

@@ -1,5 +1,5 @@
 import { setStyle } from './utils';
-import componentMethod from './utils/componentMethod';
+import component from './utils/component';
 
 export default class Layers {
     constructor(art) {
@@ -13,7 +13,7 @@ export default class Layers {
 
     add(item, callback) {
         const { $layers } = this.art.refs;
-        componentMethod(this.art, this, $layers, item, callback, 'layer');
+        component(this.art, this, $layers, item, callback, 'layer');
     }
 
     show() {

packages/artplayer/src/mse.js

@@ -1,123 +0,0 @@
-import { ArtPlayerError, errorHandle, getExt } from './utils';
-import config from './config';
-
-export default class Mse {
-    constructor(art) {
-        this.art = art;
-        this.setMimeCodec();
-        this.init();
-        this.eventBind();
-        this.eventStart();
-        this.repeat = 0;
-        this.maxRepeat = 5;
-    }
-
-    setMimeCodec() {
-        const { option } = this.art;
-        if (!option.type) {
-            const type = getExt(option.url);
-            errorHandle(
-                Object.keys(config.mimeCodec).includes(type),
-                `Can't find video's type '${type}' from '${option.url}'`,
-            );
-            option.type = type;
-        }
-
-        if (!option.mimeCodec) {
-            const mimeCodec = config.mimeCodec[option.type];
-            errorHandle(mimeCodec, `Can't find video's mimeCodec from ${option.type}`);
-            option.mimeCodec = mimeCodec;
-        }
-    }
-
-    init() {
-        const {
-            option,
-            refs: { $video },
-        } = this.art;
-        errorHandle(
-            MediaSource.isTypeSupported(option.mimeCodec),
-            `Unsupported MIME type or codec: ${option.mimeCodec}`,
-        );
-        this.mediaSource = new MediaSource();
-        $video.src = URL.createObjectURL(this.mediaSource);
-        this.art.events.destroyEvents.push(() => {
-            URL.revokeObjectURL($video.src);
-        });
-    }
-
-    eventBind() {
-        const { proxy } = this.art.events;
-        const { mediaSource, sourceBufferList } = config.mse;
-
-        mediaSource.events.forEach(eventName => {
-            proxy(this.mediaSource, eventName, event => {
-                this.art.emit(`mediaSource:${event.type}`, event);
-            });
-        });
-
-        sourceBufferList.events.forEach(eventName => {
-            proxy(this.mediaSource.sourceBuffers, eventName, event => {
-                this.art.emit(`sourceBuffers:${event.type}`, event);
-            });
-            proxy(this.mediaSource.activeSourceBuffers, eventName, event => {
-                this.art.emit(`activeSourceBuffers:${event.type}`, event);
-            });
-        });
-    }
-
-    eventStart() {
-        const { option } = this.art;
-        const { proxy } = this.art.events;
-        const { sourceBuffer } = config.mse;
-
-        this.art.on('mediaSource:sourceopen', () => {
-            this.sourceBuffer = this.mediaSource.addSourceBuffer(option.mimeCodec);
-            sourceBuffer.events.forEach(eventName => {
-                proxy(this.sourceBuffer, eventName, event => {
-                    this.art.emit(`sourceBuffer:${event.type}`, event);
-                });
-            });
-        });
-
-        this.art.on('sourceBuffer:updateend', () => {
-            this.mediaSource.endOfStream();
-        });
-
-        this.fetchUrl();
-    }
-
-    fetchUrl() {
-        const {
-            option: { url },
-            notice,
-            i18n,
-            loading,
-        } = this.art;
-        this.art.emit('player:fetch:start', url);
-        this.request(url)
-            .then(response => {
-                this.sourceBuffer.appendBuffer(response);
-                this.art.emit('player:fetch:success', url);
-            })
-            .catch(err => {
-                this.repeat += 1;
-                if (this.repeat < this.maxRepeat) {
-                    this.fetchUrl();
-                } else {
-                    notice.show(i18n.get('Video load failed'));
-                    console.warn(err);
-                    loading.hide();
-                    this.art.emit('player:fetch:failure', url);
-                }
-            });
-    }
-
-    request(url) {
-        return fetch(url)
-            .then(response => response.arrayBuffer())
-            .catch(err => {
-                throw new ArtPlayerError(err.message);
-            });
-    }
-}

packages/artplayer/src/setting/index.js

@@ -1,5 +1,5 @@
 import { setStyle } from '../utils';
-import componentMethod from '../utils/componentMethod';
+import component from '../utils/component';
 import flip from './flip';
 
 export default class Setting {
@@ -34,7 +34,7 @@ export default class Setting {
 
     add(item, callback) {
         const { $settingBody } = this.art.refs;
-        componentMethod(this.art, this, $settingBody, item, callback, 'setting');
+        component(this.art, this, $settingBody, item, callback, 'setting');
     }
 
     show() {

packages/artplayer/src/subtitle.js

@@ -1,4 +1,5 @@
-import { errorHandle, getExt, setStyles, setStyle } from './utils';
+import { errorHandle, setStyles, setStyle } from './utils';
+import { srtToVtt, vttToBlob } from './utils/subtitle';
 
 export default class Subtitle {
     constructor(art) {
@@ -7,7 +8,6 @@ export default class Subtitle {
         this.vttText = '';
         const { url } = this.art.option.subtitle;
         if (url) {
-            this.checkExt(url);
             this.init();
         }
     }
@@ -55,11 +55,11 @@ export default class Subtitle {
             })
             .then(text => {
                 if (/x-subrip/gi.test(type)) {
-                    this.vttText = this.srtToVtt(text);
+                    this.vttText = srtToVtt(text);
                 } else {
                     this.vttText = text;
                 }
-                return this.vttToBlob(this.vttText);
+                return vttToBlob(this.vttText);
             })
             .catch(err => {
                 notice.show(err);
@@ -68,34 +68,6 @@ export default class Subtitle {
             });
     }
 
-    srtToVtt(text) {
-        return 'WEBVTT \r\n\r\n'.concat(
-            text
-                .replace(/\{\\([ibu])\}/g, '</$1>')
-                .replace(/\{\\([ibu])1\}/g, '<$1>')
-                .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'),
-        );
-    }
-
-    vttToBlob(vttText) {
-        return URL.createObjectURL(
-            new Blob([vttText], {
-                type: 'text/vtt',
-            }),
-        );
-    }
-
-    checkExt(url) {
-        const ext = getExt(url);
-        errorHandle(
-            ext === 'vtt' || ext === 'srt',
-            `'subtitle.url' option require 'vtt' or 'srt' format, but got '${ext}'.`,
-        );
-    }
-
     show() {
         const {
             refs: { $subtitle },
@@ -130,7 +102,6 @@ export default class Subtitle {
 
     switch(url) {
         const { $track } = this.art.refs;
-        this.checkExt(url);
         errorHandle($track, 'You need to initialize the subtitle option first.');
         this.load(url).then(data => {
             $track.src = data;

packages/artplayer/src/utils/component.js

@@ -1,57 +1,57 @@
 import { append, insertByIndex, setStyles, setStyle } from './index';
 
-function commonMethod(art, option, $element, title) {
+export default function component(art, parent, target, component, callback, title) {
-    Object.defineProperty(option, '$ref', {
-        get: () => $element,
-    });
-
-    Object.defineProperty(option, 'hide', {
-        value: () => {
-            setStyle($element, 'display', 'none');
-            art.emit(`${title}:hide`, $element);
-        },
-    });
-
-    Object.defineProperty(option, 'show', {
-        value: () => {
-            setStyle($element, 'display', 'block');
-            art.emit(`${title}:show`, $element);
-        },
-    });
-}
-
-export default function componentMethod(art, parent, target, component, callback, title) {
-    const { proxy } = art.events;
     const option = typeof component === 'function' ? component(art) : component;
     if (!option.disable) {
-        if (parent.id === undefined) {
-            parent.id = 0;
-        }
         parent.id += 1;
         const name = option.name || `${title}${parent.id}`;
         const $element = document.createElement('div');
         $element.classList.value = `art-${title} art-${title}-${name}`;
-        insertByIndex(target, $element, option.index || parent.id);
+
         if (option.html) {
             append($element, option.html);
         }
+
         if (option.style) {
             setStyles($element, option.style);
         }
+
         if (option.click) {
-            proxy($element, 'click', event => {
+            art.events.proxy($element, 'click', event => {
                 event.preventDefault();
                 option.click.call(parent, event);
                 art.emit(`${title}:click`, $element);
             });
         }
+
+        Object.defineProperty(option, '$ref', {
+            get: () => $element,
+        });
+
+        Object.defineProperty(option, 'hide', {
+            value: () => {
+                setStyle($element, 'display', 'none');
+                art.emit(`${title}:hide`, $element);
+            },
+        });
+
+        Object.defineProperty(option, 'show', {
+            value: () => {
+                setStyle($element, 'display', 'block');
+                art.emit(`${title}:show`, $element);
+            },
+        });
+
+        insertByIndex(target, $element, option.index || parent.id);
+
         if (option.mounted) {
             option.mounted($element);
         }
+
         if (callback) {
             callback($element);
         }
-        commonMethod(art, option, $element, title);
+
         parent[name] = option;
         art.emit(`${title}:add`, option);
     }

packages/artplayer/src/utils/dom.js

@@ -0,0 +1,51 @@
+export function append(parent, child) {
+    if (child instanceof Element) {
+        parent.appendChild(child);
+    } else {
+        parent.insertAdjacentHTML('beforeend', child);
+    }
+    return parent.lastElementChild;
+}
+
+export function insertByIndex(parent, child, index) {
+    const childs = Array.from(parent.children);
+    child.dataset.index = index;
+    const nextChild = childs.find(item => Number(item.dataset.index) >= Number(index));
+    if (nextChild) {
+        nextChild.insertAdjacentElement('beforebegin', child);
+    } else {
+        append(parent, child);
+    }
+    return child;
+}
+
+export function setStyle(element, key, value) {
+    element.style[key] = value;
+    return element;
+}
+
+export function setStyles(element, styles) {
+    Object.keys(styles).forEach(key => {
+        setStyle(element, key, styles[key]);
+    });
+    return element;
+}
+
+export function getStyle(element, key, numberType = true) {
+    const value = window.getComputedStyle(element, null).getPropertyValue(key);
+    return numberType ? parseFloat(value) : value;
+}
+
+export function sublings(target) {
+    return Array.from(target.parentElement.children).filter(item => item !== target);
+}
+
+export function inverseClass(target, className) {
+    sublings(target).forEach(item => item.classList.remove(className));
+    target.classList.add(className);
+}
+
+export function tooltip(target, msg, pos = 'up') {
+    target.setAttribute('data-balloon', msg);
+    target.setAttribute('data-balloon-pos', pos);
+}

packages/artplayer/src/utils/error.js

@@ -0,0 +1,16 @@
+export class ArtPlayerError extends Error {
+    constructor(message, context) {
+        super(message);
+        if (typeof Error.captureStackTrace === 'function') {
+            Error.captureStackTrace(this, context || this.constructor);
+        }
+        this.name = 'ArtPlayerError';
+    }
+}
+
+export function errorHandle(condition, msg) {
+    const isFun = typeof condition === 'function';
+    if (isFun ? !isFun() : !condition) {
+        throw new ArtPlayerError(msg);
+    }
+}

packages/artplayer/src/utils/index.js

@@ -1,21 +1,6 @@
-export const instances = [];
+export * from './error';
-
+export * from './dom';
-export class ArtPlayerError extends Error {
+export * from './subtitle';
-    constructor(message, context) {
-        super(message);
-        if (typeof Error.captureStackTrace === 'function') {
-            Error.captureStackTrace(this, context || this.constructor);
-        }
-        this.name = 'ArtPlayerError';
-    }
-}
-
-export function errorHandle(condition, msg) {
-    const isFun = typeof condition === 'function';
-    if (isFun ? !isFun() : !condition) {
-        throw new ArtPlayerError(msg);
-    }
-}
 
 export function clamp(num, a, b) {
     return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
@@ -37,44 +22,6 @@ export function getExt(url) {
         .pop();
 }
 
-export function append(parent, child) {
-    if (child instanceof Element) {
-        parent.appendChild(child);
-    } else {
-        parent.insertAdjacentHTML('beforeend', child);
-    }
-    return parent.lastElementChild;
-}
-
-export function insertByIndex(parent, child, index) {
-    const childs = Array.from(parent.children);
-    child.dataset.index = index;
-    const nextChild = childs.find(item => Number(item.dataset.index) >= Number(index));
-    if (nextChild) {
-        nextChild.insertAdjacentElement('beforebegin', child);
-    } else {
-        append(parent, child);
-    }
-    return child;
-}
-
-export function setStyle(element, key, value) {
-    element.style[key] = value;
-    return element;
-}
-
-export function setStyles(element, styles) {
-    Object.keys(styles).forEach(key => {
-        setStyle(element, key, styles[key]);
-    });
-    return element;
-}
-
-export function getStyle(element, key, numberType = true) {
-    const value = window.getComputedStyle(element, null).getPropertyValue(key);
-    return numberType ? parseFloat(value) : value;
-}
-
 export function secondToTime(second) {
     const add0 = num => (num < 10 ? `0${num}` : String(num));
     const hour = Math.floor(second / 3600);
@@ -83,24 +30,10 @@ export function secondToTime(second) {
     return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
 }
 
-export function tooltip(target, msg, pos = 'up') {
-    target.setAttribute('data-balloon', msg);
-    target.setAttribute('data-balloon-pos', pos);
-}
-
 export function sleep(ms = 0) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-export function sublings(target) {
-    return Array.from(target.parentElement.children).filter(item => item !== target);
-}
-
-export function inverseClass(target, className) {
-    sublings(target).forEach(item => item.classList.remove(className));
-    target.classList.add(className);
-}
-
 export function debounce(func, wait, context) {
     let timeout;
     function fn(...args) {
@@ -118,14 +51,3 @@ export function debounce(func, wait, context) {
 
     return fn;
 }
-
-export function show(target, display) {
-    target.classList.remove('art-hide');
-    if (display) {
-        target.style.display = display;
-    }
-}
-
-export function hide(target) {
-    target.classList.add('art-hide');
-}

packages/artplayer/src/utils/subtitle.js

@@ -0,0 +1,19 @@
+export function srtToVtt(srtText) {
+    return 'WEBVTT \r\n\r\n'.concat(
+        srtText
+            .replace(/\{\\([ibu])\}/g, '</$1>')
+            .replace(/\{\\([ibu])1\}/g, '<$1>')
+            .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'),
+    );
+}
+
+export function vttToBlob(vttText) {
+    return URL.createObjectURL(
+        new Blob([vttText], {
+            type: 'text/vtt',
+        }),
+    );
+}