调整组件嵌入规则

docs/docs/README.md

@@ -693,7 +693,7 @@ The style object
 
 Click event
 
-### callback
+### mounted
 
 - Type: `Function`
 - Default: `undefined`
@@ -756,13 +756,6 @@ The unique index, used for the priority level
 
 The dom element
 
-### style
-
-- Type: `Object`
-- Default: `{}`
-
-The style object
-
 ### click
 
 - Type: `Function`
@@ -770,7 +763,7 @@ The style object
 
 Click event
 
-### callback
+### mounted
 
 - Type: `Function`
 - Default: `undefined`
@@ -801,14 +794,14 @@ var art = new Artplayer({
 - Type: `Array`
 - Default: `[]`
 
-Custom controls, The type of controls is an object
+Custom controls, The type of controls is an object or function
 
 ### option
 
 - Type: `Object`
 - Default: `{}`
 
-Instantiated an object property
+An object property if instantiated 
 
 #### disable
 
@@ -824,6 +817,13 @@ Whether to disable
 
 The unique name, used for the class name
 
+#### click
+
+- Type: `function`
+- Default: `undefined`
+
+Click event
+
 #### index
 
 - Type: `Number`
@@ -838,32 +838,39 @@ The unique index, used for the priority level
 
 The position where the controller appears: top, left, right
 
+### mounted
+
+- Type: `Function`
+- Default: `undefined`
+
+Callback after mounted
+
+### html
+
+- Type: `String`、`Element`
+- Default: ``
+
+The dom element
+
 [Run Code](/)
 
 ```js
-function MyController(option) {
-  this.option = option;
-}
-
-MyController.prototype.apply = function(art, dom) {
-  dom.innerHTML = this.option.name;
-};
-
 var url = 'https://blog.zhw-island.com/assets-cdn';
 var art = new Artplayer({
   container: '.artplayer-app',
   url: url + '/video/one-more-time-one-more-chance-480p.mp4',
   controls: [
-    new MyController({
+    function myController(art) {
-      name: 'myControllerLeft',
+      return {
-      position: 'left',
+        name: 'myController',
-      index: 40
+        position: 'right',
-    }),
+        index: 10,
-    new MyController({
+        html: 'myController',
-      name: 'myControllerRight',
+        click: function() {
-      position: 'right',
+          console.log('myController');
-      index: 10
+        }
-    })
+      }
+    }
   ]
 });
 ```

docs/lab/js/artplayer.js

@@ -607,8 +607,8 @@
     layers: {
       type: 'array',
       child: {
-        disable: 'boolean',
         type: 'object|function',
+        disable: 'boolean',
         name: 'string',
         index: 'number',
         html: validElement,
@@ -619,8 +619,8 @@
     contextmenu: {
       type: 'array',
       child: {
-        disable: 'boolean',
         type: 'object|function',
+        disable: 'boolean',
         name: 'string',
         index: 'number',
         html: validElement,
@@ -639,7 +639,7 @@
     controls: {
       type: 'array',
       child: {
-        type: 'object',
+        type: 'object|function',
         option: {
           type: 'object',
           child: {
@@ -3868,6 +3868,7 @@
       value: function init() {
         var _this2 = this;
 
+        var option = this.art.option;
         this.add(new Progress({
           name: 'progress',
           disable: false,
@@ -3876,7 +3877,7 @@
         }));
         this.add(new Thumbnails({
           name: 'thumbnails',
-          disable: !this.art.option.thumbnails.url,
+          disable: !option.thumbnails.url,
           position: 'top',
           index: 20
         }));
@@ -3900,72 +3901,94 @@
         }));
         this.add(new Quality({
           name: 'quality',
-          disable: this.art.option.quality.length === 0,
+          disable: option.quality.length === 0,
           position: 'right',
           index: 10
         }));
         this.add(new Screenshot({
           name: 'screenshot',
-          disable: !this.art.option.screenshot,
+          disable: !option.screenshot,
           position: 'right',
           index: 20
         }));
         this.add(new Subtitle({
           name: 'subtitle',
-          disable: !this.art.option.subtitle.url,
+          disable: !option.subtitle.url,
           position: 'right',
           index: 30
         }));
         this.add(new Setting({
           name: 'setting',
-          disable: !this.art.option.setting,
+          disable: !option.setting,
           position: 'right',
           index: 40
         }));
         this.add(new Pip({
           name: 'pip',
-          disable: !this.art.option.pip,
+          disable: !option.pip,
           position: 'right',
           index: 50
         }));
         this.add(new FullscreenWeb({
           name: 'fullscreenWeb',
-          disable: !this.art.option.fullscreenWeb,
+          disable: !option.fullscreenWeb,
           position: 'right',
           index: 60
         }));
         this.add(new Fullscreen({
           name: 'fullscreen',
-          disable: !this.art.option.fullscreen,
+          disable: !option.fullscreen,
           position: 'right',
           index: 70
         }));
-        this.art.option.controls.forEach(function (item) {
+        option.controls.forEach(function (item) {
           _this2.add(item);
         });
       }
     }, {
       key: "add",
-      value: function add(control, callback) {
+      value: function add(item, callback) {
-        var option = control.option;
+        var _this3 = this;
 
-        if (option && !option.disable) {
+        var control = typeof item === 'function' ? item(this.art) : item.option;
+
+        if (control && !control.disable) {
+          var proxy = this.art.events.proxy;
           id += 1;
-          var name = option.name || "control".concat(id);
+          var name = control.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);
 
-          if (control.apply) {
+          if (control.html) {
-            control.apply(this.art, $control);
+            append($control, control.html);
+          }
+
+          if (control.click) {
+            proxy($control, 'click', function (event) {
+              event.preventDefault();
+              control.click.call(_this3, event);
+
+              _this3.art.emit('control:click', $control);
+            });
+          }
+
+          if (item.apply) {
+            item.apply(this.art, $control);
+          }
+
+          this.mount(control.position, $control, control.index || id);
+
+          if (control.mounted) {
+            control.mounted($control);
           }
 
           if (callback) {
             callback($control);
           }
 
+          this.commonMethod(control, $control);
           this[name] = control;
+          this.art.emit('control:add', $control);
         }
       }
     }, {
@@ -3996,20 +4019,20 @@
     }, {
       key: "commonMethod",
       value: function commonMethod(control, $control) {
-        var _this3 = this;
+        var _this4 = this;
 
         Object.defineProperty(control, 'hide', {
           value: function value() {
             setStyle($control, 'display', 'none');
 
-            _this3.art.emit('control:hide', $control);
+            _this4.art.emit('control:hide', $control);
           }
         });
         Object.defineProperty(control, 'show', {
           value: function value() {
             setStyle($control, 'display', 'block');
 
-            _this3.art.emit('control:show', $control);
+            _this4.art.emit('control:show', $control);
           }
         });
       }
@@ -4030,93 +4053,124 @@
     return Controls;
   }();
 
-  function playbackRate(art) {
+  function _defineProperty(obj, key, value) {
-    var option = art.option,
+    if (key in obj) {
-        i18n = art.i18n,
+      Object.defineProperty(obj, key, {
-        player = art.player;
+        value: value,
-    return {
+        enumerable: true,
-      disable: !option.playbackRate,
+        configurable: true,
-      name: 'playbackRate',
+        writable: true
-      index: 10,
+      });
-      html: "\n          ".concat(i18n.get('Play speed'), ":\n          <span data-rate=\"0.5\">0.5</span>\n          <span data-rate=\"0.75\">0.75</span>\n          <span data-rate=\"1\" class=\"normal current\">").concat(i18n.get('Normal'), "</span>\n          <span data-rate=\"1.25\">1.25</span>\n          <span data-rate=\"1.5\">1.5</span>\n          <span data-rate=\"2.0\">2.0</span>\n        "),
+    } else {
-      click: function click(event) {
+      obj[key] = value;
-        var target = event.target;
+    }
-        var rate = target.dataset.rate;
 
-        if (rate) {
+    return obj;
-          player.playbackRate(Number(rate));
+  }
+
+  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 target;
+  }
+
+  var objectSpread = _objectSpread;
+
+  function playbackRate(menuOption) {
+    return function (art) {
+      var i18n = art.i18n,
+          player = art.player;
+      return objectSpread({}, menuOption, {
+        html: "\n                ".concat(i18n.get('Play speed'), ":\n                <span data-rate=\"0.5\">0.5</span>\n                <span data-rate=\"0.75\">0.75</span>\n                <span data-rate=\"1\" class=\"normal current\">").concat(i18n.get('Normal'), "</span>\n                <span data-rate=\"1.25\">1.25</span>\n                <span data-rate=\"1.5\">1.5</span>\n                <span data-rate=\"2.0\">2.0</span>\n            "),
+        click: function click(event) {
+          var target = event.target;
+          var rate = target.dataset.rate;
+
+          if (rate) {
+            player.playbackRate(Number(rate));
+            art.contextmenu.hide();
+          }
+        },
+        mounted: function mounted($menu) {
+          art.on('playbackRateChange', function (rate) {
+            var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
+              return Number(item.dataset.rate) === rate;
+            });
+            inverseClass($current, 'current');
+          });
+        }
+      });
+    };
+  }
+
+  function aspectRatio(menuOption) {
+    return function (art) {
+      var i18n = art.i18n,
+          player = art.player;
+      return objectSpread({}, menuOption, {
+        html: "\n                ".concat(i18n.get('Aspect ratio'), ":\n                <span data-ratio=\"default\" class=\"default current\">").concat(i18n.get('Default'), "</span>\n                <span data-ratio=\"4:3\">4:3</span>\n                <span data-ratio=\"16:9\">16:9</span>\n            "),
+        click: function click(event) {
+          var target = event.target;
+          var ratio = target.dataset.ratio;
+
+          if (ratio) {
+            player.aspectRatio(ratio.split(':'));
+            art.contextmenu.hide();
+          }
+        },
+        mounted: function mounted($menu) {
+          art.on('aspectRatioChange', function (ratio) {
+            var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
+              return item.dataset.ratio === ratio.join(':');
+            });
+            inverseClass($current, 'current');
+          });
+        }
+      });
+    };
+  }
+
+  function info(menuOption) {
+    return function (art) {
+      return objectSpread({}, menuOption, {
+        html: art.i18n.get('Video info'),
+        click: function click() {
+          art.info.show();
           art.contextmenu.hide();
         }
-      },
+      });
-      callback: function callback($menu) {
-        art.on('playbackRateChange', function (rate) {
-          var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
-            return Number(item.dataset.rate) === rate;
-          });
-          inverseClass($current, 'current');
-        });
-      }
     };
   }
 
-  function aspectRatio(art) {
+  function version(menuOption) {
-    var option = art.option,
+    return objectSpread({}, menuOption, {
-        i18n = art.i18n,
+      html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.3</a>'
-        player = art.player;
+    });
-    return {
+  }
-      disable: !option.aspectRatio,
-      name: 'aspectRatio',
-      index: 20,
-      html: "\n          ".concat(i18n.get('Aspect ratio'), ":\n          <span data-ratio=\"default\" class=\"default current\">").concat(i18n.get('Default'), "</span>\n          <span data-ratio=\"4:3\">4:3</span>\n          <span data-ratio=\"16:9\">16:9</span>\n        "),
-      click: function click(event) {
-        var target = event.target;
-        var ratio = target.dataset.ratio;
 
-        if (ratio) {
+  function close(menuOption) {
-          player.aspectRatio(ratio.split(':'));
+    return function (art) {
+      return objectSpread({}, menuOption, {
+        html: art.i18n.get('Close'),
+        click: function click() {
           art.contextmenu.hide();
         }
-      },
+      });
-      callback: function callback($menu) {
-        art.on('aspectRatioChange', function (ratio) {
-          var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
-            return item.dataset.ratio === ratio.join(':');
-          });
-          inverseClass($current, 'current');
-        });
-      }
-    };
-  }
-
-  function info(art) {
-    return {
-      disable: false,
-      name: 'info',
-      index: 30,
-      html: art.i18n.get('Video info'),
-      click: function click() {
-        art.info.show();
-        art.contextmenu.hide();
-      }
-    };
-  }
-
-  var version = {
-    disable: false,
-    name: 'version',
-    index: 40,
-    html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.3</a>'
-  };
-
-  function close(art) {
-    return {
-      disable: false,
-      name: 'close',
-      index: 50,
-      html: art.i18n.get('Close'),
-      click: function click() {
-        art.contextmenu.hide();
-      }
     };
   }
 
@@ -4148,7 +4202,31 @@
             $player = _this$art$refs.$player,
             $contextmenu = _this$art$refs.$contextmenu,
             proxy = _this$art.events.proxy;
-        option.contextmenu.push(playbackRate, aspectRatio, info, version, close);
+        this.add(playbackRate({
+          disable: !option.playbackRate,
+          name: 'playbackRate',
+          index: 10
+        }));
+        this.add(aspectRatio({
+          disable: !option.aspectRatio,
+          name: 'aspectRatio',
+          index: 20
+        }));
+        this.add(info({
+          disable: false,
+          name: 'info',
+          index: 30
+        }));
+        this.add(version({
+          disable: false,
+          name: 'version',
+          index: 40
+        }));
+        this.add(close({
+          disable: false,
+          name: 'close',
+          index: 50
+        }));
         option.contextmenu.forEach(function (item) {
           _this2.add(item);
         });
@@ -4173,15 +4251,17 @@
         var menu = typeof item === 'function' ? item(this.art) : item;
 
         if (!menu.disable) {
-          id$1 += 1;
           var _this$art2 = this.art,
               $contextmenu = _this$art2.refs.$contextmenu,
               proxy = _this$art2.events.proxy;
+          id$1 += 1;
           var name = menu.name || "contextmenu".concat(id$1);
           var $menu = document.createElement('div');
           $menu.classList.value = "art-contextmenu art-contextmenu-".concat(name);
-          setStyles($menu, menu.style || {});
+
-          append($menu, menu.html);
+          if (menu.html) {
+            append($menu, menu.html);
+          }
 
           if (menu.click) {
             proxy($menu, 'click', function (event) {
@@ -4193,16 +4273,16 @@
           }
 
           insertByIndex($contextmenu, $menu, menu.index || id$1);
-          this[name] = $menu;
 
-          if (menu.callback) {
+          if (menu.mounted) {
-            menu.callback($menu);
+            menu.mounted($menu);
           }
 
           if (callback) {
             callback($menu);
           }
 
+          this[name] = $menu;
           this.art.emit('contextmenu:add', $menu);
         }
       }
@@ -5052,15 +5132,18 @@
         var layer = typeof item === 'function' ? item(this.art) : item;
 
         if (!layer.disable) {
-          id$2 += 1;
           var _this$art = this.art,
               $layers = _this$art.refs.$layers,
               proxy = _this$art.events.proxy;
+          id$2 += 1;
           var name = layer.name || "layer".concat(id$2);
           var $layer = document.createElement('div');
           $layer.classList.value = "art-layer art-layer-".concat(name);
           setStyles($layer, layer.style || {});
-          append($layer, layer.html);
+
+          if (layer.html) {
+            append($layer, layer.html);
+          }
 
           if (layer.click) {
             proxy($layer, 'click', function (event) {
@@ -5072,16 +5155,16 @@
           }
 
           insertByIndex($layers, $layer, layer.index || id$2);
-          this[name] = $layer;
 
-          if (item.callback) {
+          if (item.mounted) {
-            item.callback($layer);
+            item.mounted($layer);
           }
 
           if (callback) {
             callback($layer);
           }
 
+          this[name] = $layer;
           this.art.emit('layers:add', $layer);
         }
       }
@@ -5208,45 +5291,31 @@
     return Mask;
   }();
 
-  var Flip =
+  function flip(settingOption) {
-  /*#__PURE__*/
+    return function (art) {
-  function () {
+      var i18n = art.i18n,
-    function Flip(option) {
+          player = art.player;
-      classCallCheck(this, Flip);
+      return objectSpread({}, settingOption, {
-
+        html: "\n                <div class=\"art-setting-btns\">\n                    <div class=\"art-setting-btn current\">\n                        <span data-flip=\"normal\">".concat(i18n.get('Normal'), "</span>\n                    </div>\n                    <div class=\"art-setting-btn\">\n                        <span data-flip=\"horizontal\">").concat(i18n.get('Horizontal'), "</span>\n                    </div>\n                    <div class=\"art-setting-btn\">\n                        <span data-flip=\"vertical\">").concat(i18n.get('Vertical'), "</span>\n                    </div>\n                </div>\n            "),
-      this.option = option;
+        click: function click(event) {
-    }
-
-    createClass(Flip, [{
-      key: "apply",
-      value: function apply(art, $setting) {
-        var _this = this;
-
-        var i18n = art.i18n,
-            proxy = art.events.proxy,
-            player = art.player;
-        this.$header = $setting.querySelector('.art-setting-header');
-        this.$body = $setting.querySelector('.art-setting-body');
-        this.$btns = append(this.$body, "\n              <div class=\"art-setting-btns\">\n                <div class=\"art-setting-btn current\">\n                  <span data-flip=\"normal\">".concat(i18n.get('Normal'), "</span>\n                </div>\n                <div class=\"art-setting-btn\">\n                  <span data-flip=\"horizontal\">").concat(i18n.get('Horizontal'), "</span>\n                </div>\n                <div class=\"art-setting-btn\">\n                  <span data-flip=\"vertical\">").concat(i18n.get('Vertical'), "</span>\n                </div>\n              </div>\n            "));
-        proxy(this.$btns, 'click', function (event) {
           var target = event.target;
           var flip = target.dataset.flip;
 
           if (flip) {
             player.flip(flip);
           }
-        });
+        },
-        art.on('flipChange', function (flip) {
+        mounted: function mounted($setting) {
-          var $current = Array.from(_this.$btns.querySelectorAll('span')).find(function (item) {
+          art.on('flipChange', function (flip) {
-            return item.dataset.flip === flip;
+            var $current = Array.from($setting.querySelectorAll('span')).find(function (item) {
+              return item.dataset.flip === flip;
+            });
+            inverseClass($current.parentElement, 'current');
           });
-          inverseClass($current.parentElement, 'current');
+        }
-        });
+      });
-      }
+    };
-    }]);
+  }
-
-    return Flip;
-  }();
 
   var id$3 = 0;
 
@@ -5280,41 +5349,57 @@
         proxy($settingClose, 'click', function () {
           _this2.hide();
         });
-        this.add(new Flip({
+        this.add(flip({
-          name: 'flip',
-          title: 'Flip',
           disable: false,
+          title: 'Flip',
+          name: 'flip',
           index: 10
         }));
       }
     }, {
       key: "add",
-      value: function add(setting, callback) {
+      value: function add(item, callback) {
-        var option = setting.option;
+        var _this3 = this;
 
-        if (option && !option.disable) {
+        var setting = typeof item === 'function' ? item(this.art) : item;
-          id$3 += 1;
+
+        if (!setting.disable) {
           var _this$art2 = this.art,
-              refs = _this$art2.refs,
+              i18n = _this$art2.i18n,
-              i18n = _this$art2.i18n;
+              $settingBody = _this$art2.refs.$settingBody,
-          var name = option.name || "setting".concat(id$3);
+              proxy = _this$art2.events.proxy;
-          var title = option.title || name;
+          id$3 += 1;
+          var name = setting.name || "setting".concat(id$3);
+          var title = setting.title || name;
           var $setting = document.createElement('div');
-          $setting.setAttribute('class', "art-setting art-setting-".concat(name));
+          $setting.classList.value = "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>');
+          var $settingInner = append($setting, '<div class="art-setting-body"></div>');
 
-          if (setting.apply) {
+          if (setting.html) {
-            setting.apply(this.art, $setting);
+            append($settingInner, setting.html);
           }
 
-          insertByIndex(refs.$settingBody, $setting, option.index || id$3);
+          if ($settingInner.click) {
-          this[name] = $setting;
+            proxy($settingInner, 'click', function (event) {
+              event.preventDefault();
+              setting.click.call(_this3, event);
+
+              _this3.art.emit('setting:click', $setting);
+            });
+          }
+
+          insertByIndex($settingBody, $setting, setting.index || id$3);
+
+          if (setting.mounted) {
+            setting.mounted($settingInner);
+          }
 
           if (callback) {
-            callback($setting);
+            callback($settingInner);
           }
 
+          this[name] = $setting;
           this.art.emit('setting:add', $setting);
         }
       }
@@ -5348,23 +5433,6 @@
     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 () {

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/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.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/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/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/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/src/contextmenu/playbackRate.js",".Line truncated

docs/lab/js/index.js

@@ -94,6 +94,19 @@ var art = new Artplayer({
       time: 300,
       text: '－－终わり－－'
     }
+  ],
+  controls: [
+    function (art) {
+      return {
+        name: 'myController',
+        position: 'right',
+        index: 1,
+        html: 'myController',
+        click: function() {
+          console.log('click myController');
+        }
+      }
+    }
   ]
 });
 

packages/artplayer-plugin-danmu/src/contextmenuMix.js

@@ -0,0 +1,3 @@
+export default function contextmenuMix(art) {
+    //
+}

packages/artplayer-plugin-danmu/src/controlMix.js

@@ -0,0 +1,9 @@
+export default class ControlMix {
+    constructor(option) {
+        this.option = option;
+    }
+
+    apply(art, $control) {
+        //
+    }
+}

packages/artplayer-plugin-danmu/src/i18nMix.js

@@ -0,0 +1,3 @@
+export default function i18n(art) {
+    //
+}

packages/artplayer-plugin-danmu/src/index.js

@@ -1,10 +1,16 @@
-import './style/index.scss';
+import './index.scss';
+import i18nMix from './i18nMix';
+import contextmenuMix from './contextmenuMix';
+import settingMix from './settingMix';
+import ControlMix from './controlMix';
 
-class ArtplayerPluginDanmu {
+function artplayerPluginDanmu(Artplayer) {
-    constructor() {
+    const art = Artplayer.prototype;
-        console.log(this);
+    i18nMix(art);
-    }
+    contextmenuMix(art);
+    settingMix(art);
+    ControlMix(art);
 }
 
-window.ArtplayerPluginDanmu = ArtplayerPluginDanmu;
+window.artplayerPluginDanmu = artplayerPluginDanmu;
-export default ArtplayerPluginDanmu;
+export default artplayerPluginDanmu;

packages/artplayer-plugin-danmu/src/settingMix.js

@@ -0,0 +1,3 @@
+export default function setting(art) {
+    //
+}

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -1,32 +1,32 @@
 import { inverseClass } from '../utils';
 
-export default function aspectRatio(art) {
+export default function aspectRatio(menuOption) {
-    const { option, i18n, player } = art;
+    return art => {
-    return {
+        const { i18n, player } = art;
-        disable: !option.aspectRatio,
+        return {
-        name: 'aspectRatio',
+            ...menuOption,
-        index: 20,
+            html: `
-        html: `
+                ${i18n.get('Aspect ratio')}:
-          ${i18n.get('Aspect ratio')}:
+                <span data-ratio="default" class="default current">${i18n.get('Default')}</span>
-          <span data-ratio="default" class="default current">${i18n.get('Default')}</span>
+                <span data-ratio="4:3">4:3</span>
-          <span data-ratio="4:3">4:3</span>
+                <span data-ratio="16:9">16:9</span>
-          <span data-ratio="16:9">16:9</span>
+            `,
-        `,
+            click: event => {
-        click: event => {
+                const { target } = event;
-            const { target } = event;
+                const { ratio } = target.dataset;
-            const { ratio } = target.dataset;
+                if (ratio) {
-            if (ratio) {
+                    player.aspectRatio(ratio.split(':'));
-                player.aspectRatio(ratio.split(':'));
+                    art.contextmenu.hide();
-                art.contextmenu.hide();
+                }
-            }
+            },
-        },
+            mounted: $menu => {
-        callback: $menu => {
+                art.on('aspectRatioChange', ratio => {
-            art.on('aspectRatioChange', ratio => {
+                    const $current = Array.from($menu.querySelectorAll('span')).find(
-                const $current = Array.from($menu.querySelectorAll('span')).find(
+                        item => item.dataset.ratio === ratio.join(':'),
-                    item => item.dataset.ratio === ratio.join(':'),
+                    );
-                );
+                    inverseClass($current, 'current');
-                inverseClass($current, 'current');
+                });
-            });
+            },
-        },
+        };
     };
 }

packages/artplayer/src/contextmenu/close.js

@@ -1,11 +1,9 @@
-export default function close(art) {
+export default function close(menuOption) {
-    return {
+    return art => ({
-        disable: false,
+        ...menuOption,
-        name: 'close',
-        index: 50,
         html: art.i18n.get('Close'),
         click: () => {
             art.contextmenu.hide();
         },
-    };
+    });
 }

packages/artplayer/src/contextmenu/index.js

@@ -1,4 +1,4 @@
-import { append, insertByIndex, setStyles, setStyle } from '../utils';
+import { append, insertByIndex, setStyle } from '../utils';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
 import info from './info';
@@ -22,7 +22,35 @@ export default class Contextmenu {
             events: { proxy },
         } = this.art;
 
-        option.contextmenu.push(playbackRate, aspectRatio, info, version, close);
+        this.add(playbackRate({
+            disable: !option.playbackRate,
+            name: 'playbackRate',
+            index: 10,
+        }));
+
+        this.add(aspectRatio({
+            disable: !option.aspectRatio,
+            name: 'aspectRatio',
+            index: 20,
+        }));
+
+        this.add(info({
+            disable: false,
+            name: 'info',
+            index: 30,
+        }));
+
+        this.add(version({
+            disable: false,
+            name: 'version',
+            index: 40,
+        }));
+
+        this.add(close({
+            disable: false,
+            name: 'close',
+            index: 50,
+        }));
 
         option.contextmenu.forEach(item => {
             this.add(item);
@@ -44,16 +72,17 @@ export default class Contextmenu {
     add(item, callback) {
         const menu = typeof item === 'function' ? item(this.art) : item;
         if (!menu.disable) {
-            id += 1;
             const {
                 refs: { $contextmenu },
                 events: { proxy },
             } = this.art;
+            id += 1;
             const name = menu.name || `contextmenu${id}`;
             const $menu = document.createElement('div');
             $menu.classList.value = `art-contextmenu art-contextmenu-${name}`;
-            setStyles($menu, menu.style || {});
+            if (menu.html) {
-            append($menu, menu.html);
+                append($menu, menu.html);
+            }
             if (menu.click) {
                 proxy($menu, 'click', event => {
                     event.preventDefault();
@@ -62,13 +91,13 @@ export default class Contextmenu {
                 });
             }
             insertByIndex($contextmenu, $menu, menu.index || id);
-            this[name] = $menu;
+            if (menu.mounted) {
-            if (menu.callback) {
+                menu.mounted($menu);
-                menu.callback($menu);
             }
             if (callback) {
                 callback($menu);
             }
+            this[name] = $menu;
             this.art.emit('contextmenu:add', $menu);
         }
     }

packages/artplayer/src/contextmenu/info.js

@@ -1,12 +1,10 @@
-export default function info(art) {
+export default function info(menuOption) {
-    return {
+    return art => ({
-        disable: false,
+        ...menuOption,
-        name: 'info',
-        index: 30,
         html: art.i18n.get('Video info'),
         click: () => {
             art.info.show();
             art.contextmenu.hide();
         },
-    };
+    });
 }

packages/artplayer/src/contextmenu/playbackRate.js

@@ -1,35 +1,35 @@
 import { inverseClass } from '../utils';
 
-export default function playbackRate(art) {
+export default function playbackRate(menuOption) {
-    const { option, i18n, player } = art;
+    return art => {
-    return {
+        const { i18n, player } = art;
-        disable: !option.playbackRate,
+        return {
-        name: 'playbackRate',
+            ...menuOption,
-        index: 10,
+            html: `
-        html: `
+                ${i18n.get('Play speed')}:
-          ${i18n.get('Play speed')}:
+                <span data-rate="0.5">0.5</span>
-          <span data-rate="0.5">0.5</span>
+                <span data-rate="0.75">0.75</span>
-          <span data-rate="0.75">0.75</span>
+                <span data-rate="1" class="normal current">${i18n.get('Normal')}</span>
-          <span data-rate="1" class="normal current">${i18n.get('Normal')}</span>
+                <span data-rate="1.25">1.25</span>
-          <span data-rate="1.25">1.25</span>
+                <span data-rate="1.5">1.5</span>
-          <span data-rate="1.5">1.5</span>
+                <span data-rate="2.0">2.0</span>
-          <span data-rate="2.0">2.0</span>
+            `,
-        `,
+            click: event => {
-        click: event => {
+                const { target } = event;
-            const { target } = event;
+                const { rate } = target.dataset;
-            const { rate } = target.dataset;
+                if (rate) {
-            if (rate) {
+                    player.playbackRate(Number(rate));
-                player.playbackRate(Number(rate));
+                    art.contextmenu.hide();
-                art.contextmenu.hide();
+                }
-            }
+            },
-        },
+            mounted: $menu => {
-        callback: $menu => {
+                art.on('playbackRateChange', rate => {
-            art.on('playbackRateChange', rate => {
+                    const $current = Array.from($menu.querySelectorAll('span')).find(
-                const $current = Array.from($menu.querySelectorAll('span')).find(
+                        item => Number(item.dataset.rate) === rate,
-                    item => Number(item.dataset.rate) === rate,
+                    );
-                );
+                    inverseClass($current, 'current');
-                inverseClass($current, 'current');
+                });
-            });
+            },
-        },
+        };
     };
 }

packages/artplayer/src/contextmenu/version.js

@@ -1,6 +1,6 @@
-export default {
+export default function version(menuOption) {
-    disable: false,
+    return {
-    name: 'version',
+        ...menuOption,
-    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/index.js

@@ -1,4 +1,4 @@
-import { insertByIndex, setStyle } from '../utils';
+import { insertByIndex, setStyle, append } from '../utils';
 import Fullscreen from './fullscreen';
 import FullscreenWeb from './fullscreenWeb';
 import Pip from './pip';
@@ -23,6 +23,7 @@ export default class Controls {
     }
 
     init() {
+        const { option } = this.art;
         this.add(
             new Progress({
                 name: 'progress',
@@ -35,7 +36,7 @@ export default class Controls {
         this.add(
             new Thumbnails({
                 name: 'thumbnails',
-                disable: !this.art.option.thumbnails.url,
+                disable: !option.thumbnails.url,
                 position: 'top',
                 index: 20,
             }),
@@ -71,7 +72,7 @@ export default class Controls {
         this.add(
             new Quality({
                 name: 'quality',
-                disable: this.art.option.quality.length === 0,
+                disable: option.quality.length === 0,
                 position: 'right',
                 index: 10,
             }),
@@ -80,7 +81,7 @@ export default class Controls {
         this.add(
             new Screenshot({
                 name: 'screenshot',
-                disable: !this.art.option.screenshot,
+                disable: !option.screenshot,
                 position: 'right',
                 index: 20,
             }),
@@ -89,7 +90,7 @@ export default class Controls {
         this.add(
             new Subtitle({
                 name: 'subtitle',
-                disable: !this.art.option.subtitle.url,
+                disable: !option.subtitle.url,
                 position: 'right',
                 index: 30,
             }),
@@ -98,7 +99,7 @@ export default class Controls {
         this.add(
             new Setting({
                 name: 'setting',
-                disable: !this.art.option.setting,
+                disable: !option.setting,
                 position: 'right',
                 index: 40,
             }),
@@ -107,7 +108,7 @@ export default class Controls {
         this.add(
             new Pip({
                 name: 'pip',
-                disable: !this.art.option.pip,
+                disable: !option.pip,
                 position: 'right',
                 index: 50,
             }),
@@ -116,7 +117,7 @@ export default class Controls {
         this.add(
             new FullscreenWeb({
                 name: 'fullscreenWeb',
-                disable: !this.art.option.fullscreenWeb,
+                disable: !option.fullscreenWeb,
                 position: 'right',
                 index: 60,
             }),
@@ -125,33 +126,50 @@ export default class Controls {
         this.add(
             new Fullscreen({
                 name: 'fullscreen',
-                disable: !this.art.option.fullscreen,
+                disable: !option.fullscreen,
                 position: 'right',
                 index: 70,
             }),
         );
 
-        this.art.option.controls.forEach(item => {
+        option.controls.forEach(item => {
             this.add(item);
         });
     }
 
-    add(control, callback) {
+    add(item, callback) {
-        const { option } = control;
+        const control = typeof item === 'function' ? item(this.art) : item.option;
-        if (option && !option.disable) {
+        if (control && !control.disable) {
+            const {
+                events: { proxy },
+            } = this.art;
             id += 1;
-            const name = option.name || `control${id}`;
+            const name = control.name || `control${id}`;
             const $control = document.createElement('div');
             $control.classList.value = `art-control art-control-${name}`;
-            this.mount(option.position, $control, option.index || id);
+            if (control.html) {
-            this.commonMethod(control, $control);
+                append($control, control.html);
-            if (control.apply) {
+            }
-                control.apply(this.art, $control);
+            if (control.click) {
+                proxy($control, 'click', event => {
+                    event.preventDefault();
+                    control.click.call(this, event);
+                    this.art.emit('control:click', $control);
+                });
+            }
+            if (item.apply) {
+                item.apply(this.art, $control);
+            }
+            this.mount(control.position, $control, control.index || id);
+            if (control.mounted) {
+                control.mounted($control);
             }
             if (callback) {
                 callback($control);
             }
+            this.commonMethod(control, $control);
             this[name] = control;
+            this.art.emit('control:add', $control);
         }
     }
 

packages/artplayer/src/layers.js

@@ -14,16 +14,18 @@ export default class Layers {
     add(item, callback) {
         const layer = typeof item === 'function' ? item(this.art) : item;
         if (!layer.disable) {
-            id += 1;
             const {
                 refs: { $layers },
                 events: { proxy },
             } = this.art;
+            id += 1;
             const name = layer.name || `layer${id}`;
             const $layer = document.createElement('div');
             $layer.classList.value = `art-layer art-layer-${name}`;
             setStyles($layer, layer.style || {});
-            append($layer, layer.html);
+            if (layer.html) {
+                append($layer, layer.html);
+            }
             if (layer.click) {
                 proxy($layer, 'click', event => {
                     event.preventDefault();
@@ -32,13 +34,13 @@ export default class Layers {
                 });
             }
             insertByIndex($layers, $layer, layer.index || id);
-            this[name] = $layer;
+            if (item.mounted) {
-            if (item.callback) {
+                item.mounted($layer);
-                item.callback($layer);
             }
             if (callback) {
                 callback($layer);
             }
+            this[name] = $layer;
             this.art.emit('layers:add', $layer);
         }
     }

packages/artplayer/src/scheme/index.js

@@ -35,8 +35,8 @@ export default {
     layers: {
         type: 'array',
         child: {
-            disable: 'boolean',
             type: 'object|function',
+            disable: 'boolean',
             name: 'string',
             index: 'number',
             html: validElement,
@@ -47,8 +47,8 @@ export default {
     contextmenu: {
         type: 'array',
         child: {
-            disable: 'boolean',
             type: 'object|function',
+            disable: 'boolean',
             name: 'string',
             index: 'number',
             html: validElement,
@@ -67,7 +67,7 @@ export default {
     controls: {
         type: 'array',
         child: {
-            type: 'object',
+            type: 'object|function',
             option: {
                 type: 'object',
                 child: {

packages/artplayer/src/setting/flip.js

@@ -1,46 +1,38 @@
-import { append, inverseClass } from '../utils';
+import { inverseClass } from '../utils';
 
-export default class Flip {
+export default function flip(settingOption) {
-    constructor(option) {
+    return art => {
-        this.option = option;
+        const { i18n, player } = art;
-    }
+        return {
-
+            ...settingOption,
-    apply(art, $setting) {
+            html: `
-        const {
+                <div class="art-setting-btns">
-            i18n,
+                    <div class="art-setting-btn current">
-            events: { proxy },
+                        <span data-flip="normal">${i18n.get('Normal')}</span>
-            player,
+                    </div>
-        } = art;
+                    <div class="art-setting-btn">
-        this.$header = $setting.querySelector('.art-setting-header');
+                        <span data-flip="horizontal">${i18n.get('Horizontal')}</span>
-        this.$body = $setting.querySelector('.art-setting-body');
+                    </div>
-        this.$btns = append(
+                    <div class="art-setting-btn">
-            this.$body,
+                        <span data-flip="vertical">${i18n.get('Vertical')}</span>
-            `
+                    </div>
-              <div class="art-setting-btns">
-                <div class="art-setting-btn current">
-                  <span data-flip="normal">${i18n.get('Normal')}</span>
                 </div>
-                <div class="art-setting-btn">
-                  <span data-flip="horizontal">${i18n.get('Horizontal')}</span>
-                </div>
-                <div class="art-setting-btn">
-                  <span data-flip="vertical">${i18n.get('Vertical')}</span>
-                </div>
-              </div>
             `,
-        );
+            click: event => {
-
+                const { target } = event;
-        proxy(this.$btns, 'click', event => {
+                const { flip } = target.dataset;
-            const { target } = event;
+                if (flip) {
-            const { flip } = target.dataset;
+                    player.flip(flip);
-            if (flip) {
+                }
-                player.flip(flip);
+            },
-            }
+            mounted: $setting => {
-        });
+                art.on('flipChange', flip => {
-
+                    const $current = Array.from($setting.querySelectorAll('span')).find(
-        art.on('flipChange', flip => {
+                        item => item.dataset.flip === flip,
-            const $current = Array.from(this.$btns.querySelectorAll('span')).find(item => item.dataset.flip === flip);
+                    );
-            inverseClass($current.parentElement, 'current');
+                    inverseClass($current.parentElement, 'current');
-        });
+                });
-    }
+            },
+        };
+    };
 }

packages/artplayer/src/setting/index.js

@@ -1,5 +1,5 @@
 import { setStyle, append, insertByIndex } from '../utils';
-import Flip from './flip';
+import flip from './flip';
 
 let id = 0;
 export default class Setting {
@@ -24,35 +24,47 @@ export default class Setting {
             this.hide();
         });
 
-        this.add(
+        this.add(flip({
-            new Flip({
+            disable: false,
-                name: 'flip',
+            title: 'Flip',
-                title: 'Flip',
+            name: 'flip',
-                disable: false,
+            index: 10,
-                index: 10,
+        }));
-            }),
-        );
     }
 
-    add(setting, callback) {
+    add(item, callback) {
-        const { option } = setting;
+        const setting = typeof item === 'function' ? item(this.art) : item;
-        if (option && !option.disable) {
+        if (!setting.disable) {
+            const {
+                i18n,
+                refs: { $settingBody },
+                events: { proxy },
+            } = this.art;
             id += 1;
-            const { refs, i18n } = this.art;
+            const name = setting.name || `setting${id}`;
-            const name = option.name || `setting${id}`;
+            const title = setting.title || name;
-            const title = option.title || name;
             const $setting = document.createElement('div');
-            $setting.setAttribute('class', `art-setting art-setting-${name}`);
+            $setting.classList.value = `art-setting art-setting-${name}`;
             append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
-            append($setting, '<div class="art-setting-body"></div>');
+            const $settingInner = append($setting, '<div class="art-setting-body"></div>');
-            if (setting.apply) {
+            if (setting.html) {
-                setting.apply(this.art, $setting);
+                append($settingInner , setting.html);
+            }
+            if ($settingInner.click) {
+                proxy($settingInner, 'click', event => {
+                    event.preventDefault();
+                    setting.click.call(this, event);
+                    this.art.emit('setting:click', $setting);
+                });
+            }
+            insertByIndex($settingBody, $setting, setting.index || id);
+            if (setting.mounted) {
+                setting.mounted($settingInner);
             }
-            insertByIndex(refs.$settingBody, $setting, option.index || id);
-            this[name] = $setting;
             if (callback) {
-                callback($setting);
+                callback($settingInner);
             }
+            this[name] = $setting;
             this.art.emit('setting:add', $setting);
         }
     }