修改包管理

packages/artplayer/src/setting/common.js

@@ -0,0 +1,14 @@
+import { append } from '../utils';
+
+export default class Common {
+  constructor(option) {
+    this.option = option;
+  }
+
+  apply(art, $setting) {
+    this.art = art;
+    this.$header = $setting.querySelector('.art-setting-header');
+    this.$body = $setting.querySelector('.art-setting-body');
+    append(this.$body, '———— 先占坑，暂无设置 ————');
+  }
+}

packages/artplayer/src/setting/index.js

@@ -0,0 +1,82 @@
+import { setStyle, append } from '../utils';
+import Common from './common';
+
+let id = 0;
+export default class Setting {
+  constructor(art) {
+    this.art = art;
+    this.state = false;
+    this.$settings = [];
+    if (art.option.setting) {
+      this.init();
+      this.mount();
+    }
+  }
+
+  init() {
+    const { refs: { $settingClose }, events: { proxy } } = this.art;
+
+    proxy($settingClose, 'click', () => {
+      this.hide();
+    });
+
+    this.add(new Common({
+      name: 'common',
+      title: 'Common',
+      disable: false,
+      index: 10
+    }));
+  }
+
+  add(setting) {
+    const { option } = setting;
+    if (option && !option.disable) {
+      id++;
+      const name = option.name || setting.constructor.name.toLowerCase() || `setting${id}`;
+      const title = option.title || name;
+      const $setting = document.createElement('div');
+      $setting.setAttribute('class', `art-setting art-setting-${name}`);
+      $setting.dataset.settingIndex = option.index || id;
+      append($setting, `<div class="art-setting-header">${this.art.i18n.get(title)}</div>`);
+      append($setting, '<div class="art-setting-body"></div>');
+      this.$settings.push($setting);
+      setting.apply && setting.apply(this.art, $setting);
+      this[name] = setting;
+    }
+  }
+
+  mount() {
+    this.$settings
+      .sort(
+        (a, b) =>
+          Number(a.dataset.settingIndex) - Number(b.dataset.settingIndex)
+      )
+      .forEach($setting => {
+        append(this.art.refs.$settingBody, $setting);
+      });
+  }
+
+  show() {
+    const { refs: { $setting }, i18n, notice } = this.art;
+    setStyle($setting, 'display', 'flex');
+    this.state = true;
+    notice.show(i18n.get('Show setting'));
+    this.art.emit('setting:show', $setting);
+  }
+
+  hide() {
+    const { refs: { $setting }, i18n, notice } = this.art;
+    setStyle($setting, 'display', 'none');
+    this.state = false;
+    notice.show(i18n.get('Hide setting'));
+    this.art.emit('setting:hide', $setting);
+  }
+
+  toggle() {
+    if (this.state) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+}