组件添加add方法

.eslintrc

@@ -12,6 +12,7 @@
         "no-shadow": 0,
         "no-param-reassign": 0,
         "prefer-object-spread": 0,
+        "prefer-destructuring": 0,
         "import/named": 0
     },
     "parserOptions": {

docs/assets/js/common.js

@@ -11,11 +11,11 @@
     var $popups = document.querySelector('.popups');
     var loaddLib = [];
 
-    // consola.creat({
-    //     target: '.console',
-    //     size: '100%',
-    //     zIndex: 99,
-    // });
+    consola.creat({
+        target: '.console',
+        size: '100%',
+        zIndex: 99,
+    });
 
     var mirror = CodeMirror($codeMirror, {
         lineNumbers: true,

docs/uncompiled/artplayer.js

@@ -2122,6 +2122,41 @@
     proxyPropertys(art, this);
   };
 
+  function _superPropBase(object, property) {
+    while (!Object.prototype.hasOwnProperty.call(object, property)) {
+      object = getPrototypeOf(object);
+      if (object === null) break;
+    }
+
+    return object;
+  }
+
+  var superPropBase = _superPropBase;
+
+  var get = createCommonjsModule(function (module) {
+  function _get(target, property, receiver) {
+    if (typeof Reflect !== "undefined" && Reflect.get) {
+      module.exports = _get = Reflect.get;
+    } else {
+      module.exports = _get = function _get(target, property, receiver) {
+        var base = superPropBase(target, property);
+        if (!base) return;
+        var desc = Object.getOwnPropertyDescriptor(base, property);
+
+        if (desc.get) {
+          return desc.get.call(receiver);
+        }
+
+        return desc.value;
+      };
+    }
+
+    return _get(target, property, receiver || target);
+  }
+
+  module.exports = _get;
+  });
+
   var Component =
   /*#__PURE__*/
   function () {
@@ -2130,9 +2165,8 @@
 
       this.id = 0;
       this.art = art;
-      this.$player = art.template.$player;
+      this.add = this.add.bind(this);
       this.name = this.constructor.name.toLowerCase();
-      this.showClassName = "art-".concat(this.name, "-show");
     }
 
     createClass(Component, [{
@@ -2140,18 +2174,91 @@
       value: function toggle() {
         this.show = !this.show;
       }
+    }, {
+      key: "add",
+      value: function add(getOption, callback) {
+        var _this = this;
+
+        var option = typeof getOption === 'function' ? getOption(this.art) : getOption;
+        if (!this.$parent || option.disable) return {};
+        this.id += 1;
+        var name = option.name || "".concat(this.name).concat(this.id);
+        errorHandle(!hasOwnProperty(this, name), "Cannot add a component that already has the same name: ".concat(name));
+        var $ref = document.createElement('div');
+        $ref.classList.value = "art-".concat(this.name, " art-").concat(this.name, "-").concat(name);
+
+        if (option.html) {
+          append($ref, option.html);
+        }
+
+        if (option.style) {
+          setStyles($ref, option.style);
+        }
+
+        if (option.tooltip) {
+          tooltip($ref, option.tooltip);
+        }
+
+        var childs = Array.from(this.$parent.children);
+        $ref.dataset.index = option.index || this.id;
+        var nextChild = childs.find(function (item) {
+          return Number(item.dataset.index) >= Number($ref.dataset.index);
+        });
+
+        if (nextChild) {
+          nextChild.insertAdjacentElement('beforebegin', $ref);
+        } else {
+          append(this.$parent, $ref);
+        }
+
+        if (option.click) {
+          this.art.events.proxy($ref, 'click', function (event) {
+            event.preventDefault();
+            option.click.call(_this.art, _this, event);
+          });
+        }
+
+        if (option.mounted) {
+          option.mounted($ref, this, this.art);
+        }
+
+        if (callback) {
+          callback($ref, this, this.art);
+        }
+
+        defineProperty(this, name, {
+          value: {
+            get $ref() {
+              return $ref;
+            },
+
+            set show(value) {
+              if (value) {
+                setStyle($ref, 'display', 'block');
+              } else {
+                setStyle($ref, 'display', 'none');
+              }
+            }
+
+          }
+        });
+        this.art.emit("".concat(this.name, ":add"), option);
+        return this[name];
+      }
     }, {
       key: "show",
       get: function get() {
-        return hasClass(this.$player, this.showClassName);
+        return hasClass(this.art.template.$player, "art-".concat(this.name, "-show"));
       },
       set: function set(value) {
         errorHandle(value === false || value === true, 'The show attribute expects a boolean value');
+        var $player = this.art.template.$player;
+        var className = "art-".concat(this.name, "-show");
 
         if (value) {
-          addClass(this.$player, this.showClassName);
+          addClass($player, className);
         } else {
-          removeClass(this.$player, this.showClassName);
+          removeClass($player, className);
         }
 
         this.art.emit("".concat(this.name, ":toggle"), value);
@@ -2161,78 +2268,6 @@
     return Component;
   }();
 
-  function component(art, parent, target, getOption, callback, title) {
-    var option = typeof getOption === 'function' ? getOption(art) : getOption;
-    if (option.disable) return {};
-    var componentID = parent.id;
-    var name = option.name || "".concat(title).concat(componentID);
-    errorHandle(!hasOwnProperty(parent, name), "Cannot create a component that already has the same name: ".concat(title, " -> ").concat(name));
-    var $element = document.createElement('div');
-    $element.classList.value = "art-".concat(title, " art-").concat(title, "-").concat(name);
-
-    if (option.html) {
-      append($element, option.html);
-    }
-
-    if (option.style) {
-      setStyles($element, option.style);
-    }
-
-    if (option.tooltip) {
-      tooltip($element, option.tooltip);
-    }
-
-    var childs = Array.from(target.children);
-    $element.dataset.index = option.index || componentID;
-    var nextChild = childs.find(function (item) {
-      return Number(item.dataset.index) >= Number($element.dataset.index);
-    });
-
-    if (nextChild) {
-      nextChild.insertAdjacentElement('beforebegin', $element);
-    } else {
-      append(target, $element);
-    }
-
-    if (option.click) {
-      art.events.proxy($element, 'click', function (event) {
-        event.preventDefault();
-        option.click.call(art, parent, event);
-      });
-    }
-
-    if (option.mounted) {
-      option.mounted($element, parent, art);
-    }
-
-    if (callback) {
-      callback($element, parent, art);
-    }
-
-    Object.defineProperty(parent, name, {
-      value: {
-        get id() {
-          return componentID;
-        },
-
-        get $ref() {
-          return $element;
-        },
-
-        set show(value) {
-          if (value) {
-            setStyle($element, 'display', 'block');
-          } else {
-            setStyle($element, 'display', 'none');
-          }
-        }
-
-      }
-    });
-    art.emit("".concat(title, ":add"), option);
-    return parent[name];
-  }
-
   function _defineProperty(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -2813,17 +2848,17 @@
     };
   }
 
-  var Controls =
+  var Control =
   /*#__PURE__*/
   function (_Component) {
-    inherits(Controls, _Component);
+    inherits(Control, _Component);
 
-    function Controls(art) {
+    function Control(art) {
       var _this;
 
-      classCallCheck(this, Controls);
+      classCallCheck(this, Control);
 
-      _this = possibleConstructorReturn(this, getPrototypeOf(Controls).call(this, art));
+      _this = possibleConstructorReturn(this, getPrototypeOf(Control).call(this, art));
       art.on('ready', function () {
         var option = art.option;
 
@@ -2918,33 +2953,31 @@
       return _this;
     }
 
-    createClass(Controls, [{
+    createClass(Control, [{
       key: "add",
-      value: function add(item, callback) {
-        var option = typeof item === 'function' ? item(this.art) : item;
+      value: function add(getOption, callback) {
+        var option = typeof getOption === 'function' ? getOption(this.art) : getOption;
+        errorHandle(option.position, 'Controls option.position can not be empty');
         var _this$art$template = this.art.template,
             $progress = _this$art$template.$progress,
             $controlsLeft = _this$art$template.$controlsLeft,
             $controlsRight = _this$art$template.$controlsRight;
-        var parent;
 
         switch (option.position) {
           case 'top':
-            parent = $progress;
+            this.$parent = $progress;
             break;
 
           case 'left':
-            parent = $controlsLeft;
+            this.$parent = $controlsLeft;
             break;
 
           case 'right':
-            parent = $controlsRight;
+            this.$parent = $controlsRight;
             break;
         }
 
-        this.id += 1;
-        errorHandle(option.position, 'Controls option.position can not be empty');
-        var control = component(this.art, this, parent, option, callback, 'control');
+        var control = get(getPrototypeOf(Control.prototype), "add", this).call(this, option, callback);
 
         if (!option.disable && option.position !== 'top' && !(control.$ref.firstElementChild && control.$ref.firstElementChild.tagName === 'I')) {
           addClass(control.$ref, 'art-control-onlyText');
@@ -2954,7 +2987,7 @@
       }
     }]);
 
-    return Controls;
+    return Control;
   }(Component);
 
   function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -3073,6 +3106,7 @@
       classCallCheck(this, Contextmenu);
 
       _this = possibleConstructorReturn(this, getPrototypeOf(Contextmenu).call(this, art));
+      _this.$parent = art.template.$contextmenu;
       art.on('ready', function () {
         var option = art.option,
             _art$template = art.template,
@@ -3155,15 +3189,6 @@
       return _this;
     }
 
-    createClass(Contextmenu, [{
-      key: "add",
-      value: function add(item, callback) {
-        this.id += 1;
-        var $contextmenu = this.art.template.$contextmenu;
-        return component(this.art, this, $contextmenu, item, callback, 'contextmenu');
-      }
-    }]);
-
     return Contextmenu;
   }(Component);
 
@@ -3230,7 +3255,16 @@
           subtitle = art.option.subtitle,
           $subtitle = art.template.$subtitle;
       setStyles($subtitle, subtitle.style);
-      proxy(_this.textTrack, 'cuechange', _this.update.bind(assertThisInitialized(_this)));
+      proxy(_this.textTrack, 'cuechange', function () {
+        $subtitle.innerHTML = '';
+
+        if (_this.activeCue) {
+          $subtitle.innerHTML = _this.activeCue.text.split(/\r?\n/).map(function (item) {
+            return "<p>".concat(item, "</p>");
+          }).join('');
+          art.emit('subtitle:update', _this.activeCue.text);
+        }
+      });
 
       if (subtitle.url) {
         _this.init(subtitle.url);
@@ -3240,19 +3274,6 @@
     }
 
     createClass(Subtitle, [{
-      key: "update",
-      value: function update() {
-        var $subtitle = this.art.template.$subtitle;
-        $subtitle.innerHTML = '';
-
-        if (this.activeCue) {
-          $subtitle.innerHTML = this.activeCue.text.split(/\r?\n/).map(function (item) {
-            return "<p>".concat(item, "</p>");
-          }).join('');
-          this.art.emit('subtitle:update', this.activeCue.text);
-        }
-      }
-    }, {
       key: "switch",
       value: function _switch(url) {
         var _this2 = this;
@@ -3601,38 +3622,27 @@
     return Hotkey;
   }();
 
-  var Layers =
+  var Layer =
   /*#__PURE__*/
   function (_Component) {
-    inherits(Layers, _Component);
+    inherits(Layer, _Component);
 
-    function Layers(art) {
+    function Layer(art) {
       var _this;
 
-      classCallCheck(this, Layers);
+      classCallCheck(this, Layer);
 
-      _this = possibleConstructorReturn(this, getPrototypeOf(Layers).call(this, art));
-      _this.add = _this.add.bind(assertThisInitialized(_this));
-
-      _this.art.on('ready', function () {
-        _this.art.option.layers.forEach(function (item) {
+      _this = possibleConstructorReturn(this, getPrototypeOf(Layer).call(this, art));
+      _this.$parent = art.template.$layers;
+      art.on('ready', function () {
+        art.option.layers.forEach(function (item) {
           _this.add(item);
         });
       });
-
       return _this;
     }
 
-    createClass(Layers, [{
-      key: "add",
-      value: function add(item, callback) {
-        this.id += 1;
-        var $layers = this.art.template.$layers;
-        return component(this.art, this, $layers, item, callback, 'layer');
-      }
-    }]);
-
-    return Layers;
+    return Layer;
   }(Component);
 
   var Loading =
@@ -3877,13 +3887,13 @@
       classCallCheck(this, Setting);
 
       _this = possibleConstructorReturn(this, getPrototypeOf(Setting).call(this, art));
-      var _this$art = _this.art,
-          option = _this$art.option,
-          $setting = _this$art.template.$setting,
-          proxy = _this$art.events.proxy;
+      _this.$parent = art.template.$settingBody;
+      var option = art.option,
+          $setting = art.template.$setting,
+          proxy = art.events.proxy;
 
       if (art.option.setting) {
-        _this.art.on('ready', function () {
+        art.on('ready', function () {
           proxy($setting, 'click', function (e) {
             if (e.target === $setting) {
               _this.show = false;
@@ -3905,24 +3915,14 @@
             name: 'playbackRate'
           }));
         });
-
-        _this.art.on('blur', function () {
-          _this.show = false;
-        });
       }
 
+      art.on('blur', function () {
+        _this.show = false;
+      });
       return _this;
     }
 
-    createClass(Setting, [{
-      key: "add",
-      value: function add(item, callback) {
-        this.id += 1;
-        var $settingBody = this.art.template.$settingBody;
-        return component(this.art, this, $settingBody, item, callback, 'setting');
-      }
-    }]);
-
     return Setting;
   }(Component);
 
@@ -4459,8 +4459,8 @@
         _this.i18n = new I18n(assertThisInitialized(_this));
         _this.notice = new Notice(assertThisInitialized(_this));
         _this.player = new Player(assertThisInitialized(_this));
-        _this.layers = new Layers(assertThisInitialized(_this));
-        _this.controls = new Controls(assertThisInitialized(_this));
+        _this.layers = new Layer(assertThisInitialized(_this));
+        _this.controls = new Control(assertThisInitialized(_this));
         _this.contextmenu = new Contextmenu(assertThisInitialized(_this));
         _this.subtitle = new Subtitle(assertThisInitialized(_this));
         _this.info = new Info(assertThisInitialized(_this));

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/toConsumableArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/dom.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.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/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/components.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/defineProperty.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","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loading.jsLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/toConsumableArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/dom.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.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/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/superPropBase.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/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","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/Line truncated

packages/artplayer/src/contextmenu/index.js

@@ -1,6 +1,5 @@
 import { setStyle } from '../utils';
-import Component from '../utils/components';
-import component from '../utils/component';
+import Component from '../utils/component';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
 import info from './info';
@@ -11,6 +10,8 @@ export default class Contextmenu extends Component {
     constructor(art) {
         super(art);
 
+        this.$parent = art.template.$contextmenu;
+
         art.on('ready', () => {
             const {
                 option,
@@ -65,7 +66,7 @@ export default class Contextmenu extends Component {
             proxy($player, 'contextmenu', event => {
                 event.preventDefault();
                 this.show = true;
-                
+
                 const mouseX = event.clientX;
                 const mouseY = event.clientY;
                 const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
@@ -96,10 +97,4 @@ export default class Contextmenu extends Component {
             this.show = false;
         });
     }
-
-    add(item, callback) {
-        this.id += 1;
-        const { $contextmenu } = this.art.template;
-        return component(this.art, this, $contextmenu, item, callback, 'contextmenu');
-    }
 }

packages/artplayer/src/control/index.js

@@ -1,6 +1,5 @@
 import { errorHandle, addClass } from '../utils';
-import Component from '../utils/components';
-import component from '../utils/component';
+import Component from '../utils/component';
 import fullscreen from './fullscreen';
 import fullscreenWeb from './fullscreenWeb';
 import pip from './pip';
@@ -14,10 +13,10 @@ import thumbnails from './thumbnails';
 import screenshot from './screenshot';
 import quality from './quality';
 
-export default class Controls extends Component {
+export default class Control extends Component {
     constructor(art) {
         super(art);
-
+        
         art.on('ready', () => {
             const { option } = art;
 
@@ -135,27 +134,27 @@ export default class Controls extends Component {
         });
     }
 
-    add(item, callback) {
-        const option = typeof item === 'function' ? item(this.art) : item;
+    add(getOption, callback) {
+        const option = typeof getOption === 'function' ? getOption(this.art) : getOption;
+        errorHandle(option.position, 'Controls option.position can not be empty');
         const { $progress, $controlsLeft, $controlsRight } = this.art.template;
-        let parent;
+
         switch (option.position) {
             case 'top':
-                parent = $progress;
+                this.$parent = $progress;
                 break;
             case 'left':
-                parent = $controlsLeft;
+                this.$parent = $controlsLeft;
                 break;
             case 'right':
-                parent = $controlsRight;
+                this.$parent = $controlsRight;
                 break;
             default:
                 break;
         }
 
-        this.id += 1;
-        errorHandle(option.position, 'Controls option.position can not be empty');
-        const control = component(this.art, this, parent, option, callback, 'control');
+        const control = super.add(option, callback);
+
         if (
             !option.disable &&
             option.position !== 'top' &&
@@ -163,6 +162,7 @@ export default class Controls extends Component {
         ) {
             addClass(control.$ref, 'art-control-onlyText');
         }
+
         return control;
     }
 }

packages/artplayer/src/index.js

@@ -8,13 +8,13 @@ import Whitelist from './whitelist';
 import Template from './template';
 import I18n from './i18n';
 import Player from './player';
-import Controls from './controls';
+import Control from './control';
 import Contextmenu from './contextmenu';
 import Info from './info';
 import Subtitle from './subtitle';
 import Events from './events';
 import Hotkey from './hotkey';
-import Layers from './layers';
+import Layer from './layer';
 import Loading from './loading';
 import Notice from './notice';
 import Mask from './mask';
@@ -40,8 +40,8 @@ class Artplayer extends Emitter {
             this.i18n = new I18n(this);
             this.notice = new Notice(this);
             this.player = new Player(this);
-            this.layers = new Layers(this);
-            this.controls = new Controls(this);
+            this.layers = new Layer(this);
+            this.controls = new Control(this);
             this.contextmenu = new Contextmenu(this);
             this.subtitle = new Subtitle(this);
             this.info = new Info(this);

packages/artplayer/src/info.js

@@ -1,5 +1,5 @@
 import { queryAll } from './utils';
-import Component from './utils/components';
+import Component from './utils/component';
 
 export default class Info extends Component {
     constructor(art) {

packages/artplayer/src/layer.js

@@ -0,0 +1,13 @@
+import Component from './utils/component';
+
+export default class Layer extends Component {
+    constructor(art) {
+        super(art);
+        this.$parent = art.template.$layers;
+        art.on('ready', () => {
+            art.option.layers.forEach(item => {
+                this.add(item);
+            });
+        });
+    }
+}

packages/artplayer/src/layers.js

@@ -1,20 +0,0 @@
-import component from './utils/component';
-import Component from './utils/components';
-
-export default class Layers extends Component {
-    constructor(art) {
-        super(art);
-        this.add = this.add.bind(this);
-        this.art.on('ready', () => {
-            this.art.option.layers.forEach(item => {
-                this.add(item);
-            });
-        });
-    }
-
-    add(item, callback) {
-        this.id += 1;
-        const { $layers } = this.art.template;
-        return component(this.art, this, $layers, item, callback, 'layer');
-    }
-}

packages/artplayer/src/loading.js

@@ -1,5 +1,5 @@
 import { append } from './utils';
-import Component from './utils/components';
+import Component from './utils/component';
 
 export default class Loading extends Component {
     constructor(art) {

packages/artplayer/src/mask.js

@@ -1,5 +1,5 @@
 import { append } from './utils';
-import Component from './utils/components';
+import Component from './utils/component';
 
 export default class Mask extends Component {
     constructor(art) {

packages/artplayer/src/setting/index.js

@@ -1,5 +1,4 @@
-import Component from '../utils/components';
-import component from '../utils/component';
+import Component from '../utils/component';
 import flip from './flip';
 import aspectRatio from './aspectRatio';
 import playbackRate from './playbackRate';
@@ -8,14 +7,16 @@ export default class Setting extends Component {
     constructor(art) {
         super(art);
 
+        this.$parent = art.template.$settingBody;
+
         const {
             option,
             template: { $setting },
             events: { proxy },
-        } = this.art;
+        } = art;
 
         if (art.option.setting) {
-            this.art.on('ready', () => {
+            art.on('ready', () => {
                 proxy($setting, 'click', e => {
                     if (e.target === $setting) {
                         this.show = false;
@@ -43,16 +44,10 @@ export default class Setting extends Component {
                     }),
                 );
             });
-
-            this.art.on('blur', () => {
-                this.show = false;
-            });
         }
-    }
 
-    add(item, callback) {
-        this.id += 1;
-        const { $settingBody } = this.art.template;
-        return component(this.art, this, $settingBody, item, callback, 'setting');
+        art.on('blur', () => {
+            this.show = false;
+        });
     }
 }

packages/artplayer/src/subtitle.js

@@ -1,5 +1,5 @@
 import { setStyles, srtToVtt, vttToBlob, getExt, assToVtt } from './utils';
-import Component from './utils/components';
+import Component from './utils/component';
 
 export default class Subtitle extends Component {
     constructor(art) {
@@ -12,7 +12,17 @@ export default class Subtitle extends Component {
         } = art;
 
         setStyles($subtitle, subtitle.style);
-        proxy(this.textTrack, 'cuechange', this.update.bind(this));
+
+        proxy(this.textTrack, 'cuechange', () => {
+            $subtitle.innerHTML = '';
+            if (this.activeCue) {
+                $subtitle.innerHTML = this.activeCue.text
+                    .split(/\r?\n/)
+                    .map(item => `<p>${item}</p>`)
+                    .join('');
+                art.emit('subtitle:update', this.activeCue.text);
+            }
+        });
 
         if (subtitle.url) {
             this.init(subtitle.url);
@@ -31,18 +41,6 @@ export default class Subtitle extends Component {
         return this.textTrack.activeCues[0];
     }
 
-    update() {
-        const { $subtitle } = this.art.template;
-        $subtitle.innerHTML = '';
-        if (this.activeCue) {
-            $subtitle.innerHTML = this.activeCue.text
-                .split(/\r?\n/)
-                .map(item => `<p>${item}</p>`)
-                .join('');
-            this.art.emit('subtitle:update', this.activeCue.text);
-        }
-    }
-
     switch(url, name = 'unknown') {
         const { i18n, notice } = this.art;
         return this.init(url).then(subUrl => {

packages/artplayer/src/utils/component.js

@@ -1,73 +1,96 @@
-import { append, setStyles, setStyle, tooltip } from './dom';
+import { hasClass, addClass, removeClass, append, setStyle, setStyles, tooltip } from './dom';
+import { hasOwnProperty, defineProperty } from './property';
 import { errorHandle } from './error';
-import { hasOwnProperty } from './property';
 
-export default function component(art, parent, target, getOption, callback, title) {
-    const option = typeof getOption === 'function' ? getOption(art) : getOption;
-    if (option.disable) return {};
-    const componentID = parent.id;
-    const name = option.name || `${title}${componentID}`;
-    errorHandle(
-        !hasOwnProperty(parent, name),
-        `Cannot create a component that already has the same name: ${title} -> ${name}`,
-    );
-    const $element = document.createElement('div');
-    $element.classList.value = `art-${title} art-${title}-${name}`;
-
-    if (option.html) {
-        append($element, option.html);
+export default class Component {
+    constructor(art) {
+        this.id = 0;
+        this.art = art;
+        this.add = this.add.bind(this);
+        this.name = this.constructor.name.toLowerCase();
     }
 
-    if (option.style) {
-        setStyles($element, option.style);
+    get show() {
+        return hasClass(this.art.template.$player, `art-${this.name}-show`);
     }
 
-    if (option.tooltip) {
-        tooltip($element, option.tooltip);
+    set show(value) {
+        errorHandle(value === false || value === true, 'The show attribute expects a boolean value');
+        const { $player } = this.art.template;
+        const className = `art-${this.name}-show`;
+        if (value) {
+            addClass($player, className);
+        } else {
+            removeClass($player, className);
+        }
+        this.art.emit(`${this.name}:toggle`, value);
     }
 
-    const childs = Array.from(target.children);
-    $element.dataset.index = option.index || componentID;
-    const nextChild = childs.find(item => Number(item.dataset.index) >= Number($element.dataset.index));
-    if (nextChild) {
-        nextChild.insertAdjacentElement('beforebegin', $element);
-    } else {
-        append(target, $element);
+    toggle() {
+        this.show = !this.show;
     }
 
-    if (option.click) {
-        art.events.proxy($element, 'click', event => {
-            event.preventDefault();
-            option.click.call(art, parent, event);
+    add(getOption, callback) {
+        const option = typeof getOption === 'function' ? getOption(this.art) : getOption;
+        if (!this.$parent || option.disable) return {};
+        this.id += 1;
+        const name = option.name || `${this.name}${this.id}`;
+        errorHandle(!hasOwnProperty(this, name), `Cannot add a component that already has the same name: ${name}`);
+        const $ref = document.createElement('div');
+        $ref.classList.value = `art-${this.name} art-${this.name}-${name}`;
+
+        if (option.html) {
+            append($ref, option.html);
+        }
+
+        if (option.style) {
+            setStyles($ref, option.style);
+        }
+
+        if (option.tooltip) {
+            tooltip($ref, option.tooltip);
+        }
+
+        const childs = Array.from(this.$parent.children);
+        $ref.dataset.index = option.index || this.id;
+        const nextChild = childs.find(item => Number(item.dataset.index) >= Number($ref.dataset.index));
+        if (nextChild) {
+            nextChild.insertAdjacentElement('beforebegin', $ref);
+        } else {
+            append(this.$parent, $ref);
+        }
+
+        if (option.click) {
+            this.art.events.proxy($ref, 'click', event => {
+                event.preventDefault();
+                option.click.call(this.art, this, event);
+            });
+        }
+
+        if (option.mounted) {
+            option.mounted($ref, this, this.art);
+        }
+
+        if (callback) {
+            callback($ref, this, this.art);
+        }
+
+        defineProperty(this, name, {
+            value: {
+                get $ref() {
+                    return $ref;
+                },
+                set show(value) {
+                    if (value) {
+                        setStyle($ref, 'display', 'block');
+                    } else {
+                        setStyle($ref, 'display', 'none');
+                    }
+                },
+            },
         });
+
+        this.art.emit(`${this.name}:add`, option);
+        return this[name];
     }
-
-    if (option.mounted) {
-        option.mounted($element, parent, art);
-    }
-
-    if (callback) {
-        callback($element, parent, art);
-    }
-
-    Object.defineProperty(parent, name, {
-        value: {
-            get id() {
-                return componentID;
-            },
-            get $ref() {
-                return $element;
-            },
-            set show(value) {
-                if (value) {
-                    setStyle($element, 'display', 'block');
-                } else {
-                    setStyle($element, 'display', 'none');
-                }
-            },
-        },
-    });
-
-    art.emit(`${title}:add`, option);
-    return parent[name];
 }

packages/artplayer/src/utils/components.js

@@ -1,30 +0,0 @@
-import { hasClass, addClass, removeClass } from './dom';
-import { errorHandle } from './error';
-
-export default class Component {
-    constructor(art) {
-        this.id = 0;
-        this.art = art;
-        this.$player = art.template.$player;
-        this.name = this.constructor.name.toLowerCase();
-        this.showClassName = `art-${this.name}-show`;
-    }
-
-    get show() {
-        return hasClass(this.$player, this.showClassName);
-    }
-
-    set show(value) {
-        errorHandle(value === false || value === true, 'The show attribute expects a boolean value');
-        if (value) {
-            addClass(this.$player, this.showClassName);
-        } else {
-            removeClass(this.$player, this.showClassName);
-        }
-        this.art.emit(`${this.name}:toggle`, value);
-    }
-
-    toggle() {
-        this.show = !this.show;
-    }
-}