分离组件函数

docs/lab/js/artplayer.js

@@ -4058,6 +4058,67 @@
     return Controls;
   }();
 
+  function commonMethod(art, option, $element, title) {
+    Object.defineProperty(option, '$ref', {
+      get: function get() {
+        return $element;
+      }
+    });
+    Object.defineProperty(option, 'hide', {
+      value: function value() {
+        setStyle($element, 'display', 'none');
+        art.emit("".concat(title, ":hide"), $element);
+      }
+    });
+    Object.defineProperty(option, 'show', {
+      value: function value() {
+        setStyle($element, 'display', 'block');
+        art.emit("".concat(title, ":show"), $element);
+      }
+    });
+  }
+
+  function componentMethod(art, parent, target, component, callback, title) {
+    var proxy = art.events.proxy;
+    var option = typeof component === 'function' ? component(art) : component;
+
+    if (!option.disable) {
+      parent.id += 1;
+      var name = option.name || "".concat(title).concat(parent.id);
+      var $element = document.createElement('div');
+      $element.classList.value = "art-".concat(title, " art-").concat(title, "-").concat(name);
+      insertByIndex(target, $element, option.index || parent.id);
+
+      if (option.html) {
+        append($element, option.html);
+      }
+
+      if (option.style) {
+        setStyles($element, option.style);
+      }
+
+      if (option.click) {
+        proxy($element, 'click', function (event) {
+          event.preventDefault();
+          option.click.call(parent, event);
+          art.emit("".concat(title, ":click"), $element);
+        });
+      }
+
+      if (option.mounted) {
+        option.mounted($element);
+      }
+
+      if (callback) {
+        callback($element);
+      }
+
+      commonMethod(art, option, $element, title);
+      parent[name] = option;
+      art.emit("".concat(title, ":add"), option);
+    }
+  }
+
   function _defineProperty(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -4179,8 +4240,6 @@
     };
   }
 
-  var id$1 = 0;
-
   var Contextmenu =
   /*#__PURE__*/
   function () {
@@ -4189,7 +4248,7 @@
 
       classCallCheck(this, Contextmenu);
 
-      id$1 = 0;
+      this.id = 0;
       this.art = art;
       this.art.on('firstCanplay', function () {
         _this.init();
@@ -4251,46 +4310,8 @@
     }, {
       key: "add",
       value: function add(item, callback) {
-        var _this3 = this;
-
-        var menu = typeof item === 'function' ? item(this.art) : item;
-
-        if (!menu.disable) {
-          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);
-
-          if (menu.html) {
-            append($menu, menu.html);
-          }
-
-          if (menu.click) {
-            proxy($menu, 'click', function (event) {
-              event.preventDefault();
-              menu.click.call(_this3, event);
-
-              _this3.art.emit('contextmenu:click', $menu);
-            });
-          }
-
-          insertByIndex($contextmenu, $menu, menu.index || id$1);
-
-          if (menu.mounted) {
-            menu.mounted($menu);
-          }
-
-          if (callback) {
-            callback($menu);
-          }
-
-          this.commonMethod(menu, $menu);
-          this[name] = menu;
-          this.art.emit('contextmenu:add', menu);
-        }
+        var $contextmenu = this.art.refs.$contextmenu;
+        componentMethod(this.art, this, $contextmenu, item, callback, 'contextmenu');
       }
     }, {
       key: "setPos",
@@ -4325,31 +4346,6 @@
         setStyle($contextmenu, 'left', "".concat(menuLeft, "px"));
         setStyle($contextmenu, 'top', "".concat(menuTop, "px"));
       }
-    }, {
-      key: "commonMethod",
-      value: function commonMethod(menu, $menu) {
-        var _this4 = this;
-
-        Object.defineProperty(menu, '$ref', {
-          get: function get() {
-            return $menu;
-          }
-        });
-        Object.defineProperty(menu, 'hide', {
-          value: function value() {
-            setStyle($menu, 'display', 'none');
-
-            _this4.art.emit('menu:hide', $menu);
-          }
-        });
-        Object.defineProperty(menu, 'show', {
-          value: function value() {
-            setStyle($menu, 'display', 'block');
-
-            _this4.art.emit('menu:show', $menu);
-          }
-        });
-      }
     }, {
       key: "hide",
       value: function hide() {
@@ -5137,8 +5133,6 @@
     return Hotkey;
   }();
 
-  var id$2 = 0;
-
   var Layers =
   /*#__PURE__*/
   function () {
@@ -5147,7 +5141,7 @@
 
       classCallCheck(this, Layers);
 
-      id$2 = 0;
+      this.id = 0;
       this.art = art;
       this.add = this.add.bind(this);
       this.art.option.layers.forEach(function (item) {
@@ -5158,72 +5152,8 @@
     createClass(Layers, [{
       key: "add",
       value: function add(item, callback) {
-        var _this2 = this;
-
-        var layer = typeof item === 'function' ? item(this.art) : item;
-
-        if (!layer.disable) {
-          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 || {});
-
-          if (layer.html) {
-            append($layer, layer.html);
-          }
-
-          if (layer.click) {
-            proxy($layer, 'click', function (event) {
-              event.preventDefault();
-              layer.click.call(_this2, event);
-
-              _this2.art.emit('layers:click', $layer);
-            });
-          }
-
-          insertByIndex($layers, $layer, layer.index || id$2);
-
-          if (item.mounted) {
-            item.mounted($layer);
-          }
-
-          if (callback) {
-            callback($layer);
-          }
-
-          this.commonMethod(layer, $layer);
-          this[name] = layer;
-          this.art.emit('layers:add', layer);
-        }
-      }
-    }, {
-      key: "commonMethod",
-      value: function commonMethod(layer, $layer) {
-        var _this3 = this;
-
-        Object.defineProperty(layer, '$ref', {
-          get: function get() {
-            return $layer;
-          }
-        });
-        Object.defineProperty(layer, 'hide', {
-          value: function value() {
-            setStyle($layer, 'display', 'none');
-
-            _this3.art.emit('layer:hide', $layer);
-          }
-        });
-        Object.defineProperty(layer, 'show', {
-          value: function value() {
-            setStyle($layer, 'display', 'block');
-
-            _this3.art.emit('layer:show', $layer);
-          }
-        });
+        var $layers = this.art.refs.$layers;
+        componentMethod(this.art, this, $layers, item, callback, 'layer');
       }
     }, {
       key: "show",
@@ -5353,7 +5283,7 @@
       var i18n = art.i18n,
           player = art.player;
       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            "),
+        html: "\n                <div class=\"art-setting-header\">".concat(i18n.get(settingOption.title), "</div>\n                <div class=\"art-setting-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                </div>\n            "),
         click: function click(event) {
           var target = event.target;
           var flip = target.dataset.flip;
@@ -5374,8 +5304,6 @@
     };
   }
 
-  var id$3 = 0;
-
   var Setting$1 =
   /*#__PURE__*/
   function () {
@@ -5384,7 +5312,7 @@
 
       classCallCheck(this, Setting);
 
-      id$3 = 0;
+      this.id = 0;
       this.art = art;
       this.state = false;
 
@@ -5416,75 +5344,8 @@
     }, {
       key: "add",
       value: function add(item, callback) {
-        var _this3 = this;
-
-        var setting = typeof item === 'function' ? item(this.art) : item;
-
-        if (!setting.disable) {
-          var _this$art2 = this.art,
-              i18n = _this$art2.i18n,
-              $settingBody = _this$art2.refs.$settingBody,
-              proxy = _this$art2.events.proxy;
-          id$3 += 1;
-          var name = setting.name || "setting".concat(id$3);
-          var title = setting.title || name;
-          var $setting = document.createElement('div');
-          $setting.classList.value = "art-setting art-setting-".concat(name);
-          append($setting, "<div class=\"art-setting-header\">".concat(i18n.get(title), "</div>"));
-          var $settingInner = append($setting, '<div class="art-setting-body"></div>');
-
-          if (setting.html) {
-            append($settingInner, setting.html);
-          }
-
-          if ($settingInner.click) {
-            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($settingInner);
-          }
-
-          this.commonMethod(setting, $setting);
-          this[name] = setting;
-          this.art.emit('setting:add', setting);
-        }
-      }
-    }, {
-      key: "commonMethod",
-      value: function commonMethod(setting, $setting) {
-        var _this4 = this;
-
-        Object.defineProperty(setting, '$ref', {
-          get: function get() {
-            return $setting;
-          }
-        });
-        Object.defineProperty(setting, 'hide', {
-          value: function value() {
-            setStyle($setting, 'display', 'none');
-
-            _this4.art.emit('setting:hide', $setting);
-          }
-        });
-        Object.defineProperty(setting, 'show', {
-          value: function value() {
-            setStyle($setting, 'display', 'block');
-
-            _this4.art.emit('setting:show', $setting);
-          }
-        });
+        var $settingBody = this.art.refs.$settingBody;
+        componentMethod(this.art, this, $settingBody, item, callback, 'setting');
       }
     }, {
       key: "show",
@@ -5558,7 +5419,7 @@
     return Storage;
   }();
 
-  var id$4 = 0;
+  var id$1 = 0;
 
   var Artplayer =
   /*#__PURE__*/
@@ -5615,8 +5476,8 @@
         this.hotkey = new Hotkey(this);
         this.mask = new Mask(this);
         this.setting = new Setting$1(this);
-        id$4 += 1;
-        this.id = id$4;
+        id$1 += 1;
+        this.id = id$1;
         Artplayer.instances.push(this);
       }
     }, {

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/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/src/contextmenu/playbackRate.js",".Line truncated
+{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/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/utils/componentMethod.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../.Line truncated

packages/artplayer/src/contextmenu/index.js

@@ -1,14 +1,14 @@
-import { append, insertByIndex, setStyle } from '../utils';
+import { setStyle } from '../utils';
+import componentMethod from '../utils/componentMethod';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
 import info from './info';
 import version from './version';
 import close from './close';
 
-let id = 0;
 export default class Contextmenu {
     constructor(art) {
-        id = 0;
+        this.id = 0;
         this.art = art;
         this.art.on('firstCanplay', () => {
             this.init();
@@ -70,43 +70,12 @@ export default class Contextmenu {
     }
 
     add(item, callback) {
-        const menu = typeof item === 'function' ? item(this.art) : item;
-        if (!menu.disable) {
-            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}`;
-            if (menu.html) {
-                append($menu, menu.html);
-            }
-            if (menu.click) {
-                proxy($menu, 'click', event => {
-                    event.preventDefault();
-                    menu.click.call(this, event);
-                    this.art.emit('contextmenu:click', $menu);
-                });
-            }
-            insertByIndex($contextmenu, $menu, menu.index || id);
-            if (menu.mounted) {
-                menu.mounted($menu);
-            }
-            if (callback) {
-                callback($menu);
-            }
-            this.commonMethod(menu, $menu);
-            this[name] = menu;
-            this.art.emit('contextmenu:add', menu);
-        }
+        const { $contextmenu } = this.art.refs;
+        componentMethod(this.art, this, $contextmenu, item, callback, 'contextmenu');
     }
 
     setPos(event) {
-        const {
-            refs: { $player, $contextmenu },
-        } = this.art;
+        const { $player, $contextmenu } = this.art.refs;
         const mouseX = event.clientX;
         const mouseY = event.clientY;
         const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
@@ -126,38 +95,14 @@ export default class Contextmenu {
         setStyle($contextmenu, 'top', `${menuTop}px`);
     }
 
-    commonMethod(menu, $menu) {
-        Object.defineProperty(menu, '$ref', {
-            get: () => $menu,
-        });
-
-        Object.defineProperty(menu, 'hide', {
-            value: () => {
-                setStyle($menu, 'display', 'none');
-                this.art.emit('menu:hide', $menu);
-            },
-        });
-
-        Object.defineProperty(menu, 'show', {
-            value: () => {
-                setStyle($menu, 'display', 'block');
-                this.art.emit('menu:show', $menu);
-            },
-        });
-    }
-
     hide() {
-        const {
-            refs: { $contextmenu },
-        } = this.art;
+        const { $contextmenu } = this.art.refs;
         setStyle($contextmenu, 'display', 'none');
         this.art.emit('contextmenu:hide', $contextmenu);
     }
 
     show() {
-        const {
-            refs: { $contextmenu },
-        } = this.art;
+        const { $contextmenu } = this.art.refs;
         setStyle($contextmenu, 'display', 'block');
         this.art.emit('contextmenu:show', $contextmenu);
     }

packages/artplayer/src/layers.js

@@ -1,9 +1,9 @@
-import { append, setStyles, setStyle, insertByIndex } from './utils';
+import { setStyle } from './utils';
+import componentMethod from './utils/componentMethod';
 
-let id = 0;
 export default class Layers {
     constructor(art) {
-        id = 0;
+        this.id = 0;
         this.art = art;
         this.add = this.add.bind(this);
         this.art.option.layers.forEach(item => {
@@ -12,58 +12,8 @@ export default class Layers {
     }
 
     add(item, callback) {
-        const layer = typeof item === 'function' ? item(this.art) : item;
-        if (!layer.disable) {
-            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 || {});
-            if (layer.html) {
-                append($layer, layer.html);
-            }
-            if (layer.click) {
-                proxy($layer, 'click', event => {
-                    event.preventDefault();
-                    layer.click.call(this, event);
-                    this.art.emit('layers:click', $layer);
-                });
-            }
-            insertByIndex($layers, $layer, layer.index || id);
-            if (item.mounted) {
-                item.mounted($layer);
-            }
-            if (callback) {
-                callback($layer);
-            }
-            this.commonMethod(layer, $layer);
-            this[name] = layer;
-            this.art.emit('layers:add', layer);
-        }
-    }
-
-    commonMethod(layer, $layer) {
-        Object.defineProperty(layer, '$ref', {
-            get: () => $layer,
-        });
-
-        Object.defineProperty(layer, 'hide', {
-            value: () => {
-                setStyle($layer, 'display', 'none');
-                this.art.emit('layer:hide', $layer);
-            },
-        });
-
-        Object.defineProperty(layer, 'show', {
-            value: () => {
-                setStyle($layer, 'display', 'block');
-                this.art.emit('layer:show', $layer);
-            },
-        });
+        const { $layers } = this.art.refs;
+        componentMethod(this.art, this, $layers, item, callback, 'layer');
     }
 
     show() {

packages/artplayer/src/setting/flip.js

@@ -6,15 +6,18 @@ export default function flip(settingOption) {
         return {
             ...settingOption,
             html: `
-                <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 class="art-setting-header">${i18n.get(settingOption.title)}</div>
+                <div class="art-setting-body">
+                    <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>
                 </div>
             `,

packages/artplayer/src/setting/index.js

@@ -1,10 +1,10 @@
-import { setStyle, append, insertByIndex } from '../utils';
+import { setStyle } from '../utils';
+import componentMethod from '../utils/componentMethod';
 import flip from './flip';
 
-let id = 0;
 export default class Setting {
     constructor(art) {
-        id = 0;
+        this.id = 0;
         this.art = art;
         this.state = false;
         if (art.option.setting) {
@@ -33,76 +33,19 @@ export default class Setting {
     }
 
     add(item, callback) {
-        const setting = typeof item === 'function' ? item(this.art) : item;
-        if (!setting.disable) {
-            const {
-                i18n,
-                refs: { $settingBody },
-                events: { proxy },
-            } = this.art;
-            id += 1;
-            const name = setting.name || `setting${id}`;
-            const title = setting.title || name;
-            const $setting = document.createElement('div');
-            $setting.classList.value = `art-setting art-setting-${name}`;
-            append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
-            const $settingInner = append($setting, '<div class="art-setting-body"></div>');
-            if (setting.html) {
-                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);
-            }
-            if (callback) {
-                callback($settingInner);
-            }
-            this.commonMethod(setting, $setting);
-            this[name] = setting;
-            this.art.emit('setting:add', setting);
-        }
-    }
-
-    commonMethod(setting, $setting) {
-        Object.defineProperty(setting, '$ref', {
-            get: () => $setting,
-        });
-
-        Object.defineProperty(setting, 'hide', {
-            value: () => {
-                setStyle($setting, 'display', 'none');
-                this.art.emit('setting:hide', $setting);
-            },
-        });
-
-        Object.defineProperty(setting, 'show', {
-            value: () => {
-                setStyle($setting, 'display', 'block');
-                this.art.emit('setting:show', $setting);
-            },
-        });
+        const { $settingBody } = this.art.refs;
+        componentMethod(this.art, this, $settingBody, item, callback, 'setting');
     }
 
     show() {
-        const {
-            refs: { $setting },
-        } = this.art;
+        const { $setting } = this.art.refs;
         setStyle($setting, 'display', 'flex');
         this.state = true;
         this.art.emit('setting:show', $setting);
     }
 
     hide() {
-        const {
-            refs: { $setting },
-        } = this.art;
+        const { $setting } = this.art.refs;
         setStyle($setting, 'display', 'none');
         this.state = false;
         this.art.emit('setting:hide', $setting);

packages/artplayer/src/utils/componentMethod.js

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