初始化设置窗口

src/controls/index.js

@@ -1,4 +1,4 @@
-import { setStyle } from '../utils';
+import { setStyle, append } from '../utils';
 import Danmu from './danmu';
 import Fullscreen from './fullscreen';
 import FullscreenWeb from './fullscreen-web';
@@ -26,78 +26,91 @@ export default class Controls {
 
   init() {
     this.add(new Progress({
+      name: 'progress',
       disable: false,
       position: 'top',
       index: 10
     }));
 
     this.add(new Thumbnails({
+      name: 'thumbnails',
       disable: !this.art.option.thumbnails.url,
       position: 'top',
       index: 20
     }));
 
     this.add(new PlayAndPause({
+      name: 'playAndPause',
       disable: false,
       position: 'left',
       index: 10
     }));
 
     this.add(new Volume({
+      name: 'volume',
       disable: false,
       position: 'left',
       index: 20
     }));
 
     this.add(new Time({
+      name: 'time',
       disable: false,
       position: 'left',
       index: 30
     }));
 
     this.add(new Quality({
+      name: 'quality',
       disable: this.art.option.quality.length === 0,
       position: 'right',
       index: 10
     }));
 
     this.add(new Danmu({
+      name: 'danmu',
       disable: false,
       position: 'right',
       index: 20
     }));
 
     this.add(new Screenshot({
+      name: 'screenshot',
       disable: !this.art.option.screenshot,
       position: 'right',
       index: 30
     }));
 
     this.add(new Subtitle({
+      name: 'subtitle',
       disable: !this.art.option.subtitle.url,
       position: 'right',
       index: 40
     }));
 
     this.add(new Setting({
+      name: 'setting',
       disable: !this.art.option.setting,
       position: 'right',
       index: 50
     }));
 
     this.add(new Pip({
+      name: 'pip',
       disable: !this.art.option.pip,
       position: 'right',
       index: 60
     }));
 
     this.add(new FullscreenWeb({
+      name: 'fullscreenWeb',
       disable: !this.art.option.fullscreenWeb,
       position: 'right',
       index: 70
     }));
 
     this.add(new Fullscreen({
+      name: 'fullscreen',
       disable: !this.art.option.fullscreen,
       position: 'right',
       index: 80
@@ -112,10 +125,10 @@ export default class Controls {
     const { option } = control;
     if (option && !option.disable) {
       id++;
-      const name = control.constructor.name.toLowerCase() || `control${id}`;
+      const name = option.name || control.constructor.name.toLowerCase() || `control${id}`;
       const $control = document.createElement('div');
       $control.setAttribute('class', `art-control art-control-${name}`);
-      $control.setAttribute('data-control-index', String(option.index) || id);
+      $control.dataset.controlIndex = option.index || id;
       option.$control = $control;
       this.commonMethod(control);
       (this.$map[option.position] || (this.$map[option.position] = [])).push($control);
@@ -135,13 +148,13 @@ export default class Controls {
         .forEach($control => {
           switch (key) {
             case 'top':
-              $progress.appendChild($control);
+              append($progress, $control);
               break;
             case 'left':
-              $controlsLeft.appendChild($control);
+              append($controlsLeft, $control);
               break;
             case 'right':
-              $controlsRight.appendChild($control);
+              append($controlsRight, $control);
               break;
             default:
               break;

src/i18n.js

@@ -20,6 +20,7 @@ let i18nMap = {
     'Default': '默认',
     'Normal': '正常',
     'Switch': '切换',
+    'Common': '常规',
     'Hide setting': '隐藏设置',
     'Show setting': '显示设置'
   },
@@ -44,6 +45,7 @@ let i18nMap = {
     'Default': '默認',
     'Normal': '正常',
     'Switch': '切換',
+    'Common': '常規',
     'Hide setting': '隱藏設置',
     'Show setting': '顯示設置'
   }

src/setting.js

@@ -1,37 +0,0 @@
-import { setStyle } from './utils';
-
-export default class Setting {
-  constructor(art) {
-    this.art = art;
-    this.isOpen = false;
-    this.init();
-  }
-
-  init() {
-    //
-  }
-
-  add() {
-    //
-  }
-
-  switch(name) {
-    console.log(name);
-  }
-
-  show() {
-    const { refs: { $setting }, i18n, notice } = this.art;
-    setStyle($setting, 'display', 'flex');
-    this.isOpen = 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.isOpen = false;
-    notice.show(i18n.get('Hide setting'));
-    this.art.emit('setting:hide', $setting);
-  }
-}

src/setting/common.js

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

src/setting/index.js

@@ -0,0 +1,75 @@
+import { setStyle, append } from '../utils';
+import Common from './common';
+
+let id = 0;
+export default class Setting {
+  constructor(art) {
+    this.art = art;
+    this.isOpen = false;
+    this.$settings = [];
+    this.art.on('firstCanplay', () => {
+      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>');
+      option.$setting = $setting;
+      this.$settings.push($setting);
+      setting.apply && setting.apply(this.art);
+      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.isOpen = 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.isOpen = false;
+    notice.show(i18n.get('Hide setting'));
+    this.art.emit('setting:hide', $setting);
+  }
+}

src/style/setting.scss

@@ -1,7 +1,6 @@
 .artplayer-video-player {
     .artplayer-setting {
         display: none;
-        font-size: 14px;
         position: absolute;
         z-index: 90;
         left: 0;
@@ -12,13 +11,44 @@
         justify-content: center;
         pointer-events: none;
         .artplayer-setting-inner {
+            position: relative;
             width: 350px;
             height: 250px;
-            padding: 10px;
-            color: #fff;
-            background: rgba(0, 0, 0, 0.6);
+            font-size: 12px;
+            background: rgba(0, 0, 0, 0.8);
             border-radius: 3px;
             pointer-events: all;
+            overflow: hidden;
+            .artplayer-setting-body {
+                overflow-x: hidden;
+                overflow-y: auto;
+                width: 365px;
+                height: 100%;
+                .art-setting {
+                    border-bottom: 1px solid rgba(255,255,255,.1);
+                    padding: 12px 35px 12px 20px;
+                    .art-setting-header {
+                        color: #fff;
+                        margin-bottom: 10px;
+                    }
+                    .art-setting-body {
+                        color: rgba(255, 255, 255, 0.8);
+                    }
+                }
+            }
+            .artplayer-setting-close {
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 20px;
+                height: 20px;
+                line-height: 20px;
+                text-align: center;
+                color: rgba(255, 255, 255, .8);
+                background: rgba(0, 0, 0, .5);
+                font-size: 20px;
+                cursor: pointer;
+            }
         }
     }
 }

src/template.js

@@ -25,7 +25,10 @@ export default class Template {
             <div class="artplayer-notice-inner"></div>
           </div>
           <div class="artplayer-setting">
-            <div class="artplayer-setting-inner"></div>
+            <div class="artplayer-setting-inner">
+              <div class="artplayer-setting-body"></div>
+              <div class="artplayer-setting-close">×</div>
+            </div>
           </div>
           <div class="artplayer-info">
             <div class="artplayer-info-panel"></div>
@@ -49,6 +52,8 @@ export default class Template {
     refs.$mask = refs.$container.querySelector('.artplayer-mask');
     refs.$setting = refs.$container.querySelector('.artplayer-setting');
     refs.$settingInner = refs.$container.querySelector('.artplayer-setting-inner');
+    refs.$settingBody = refs.$container.querySelector('.artplayer-setting-body');
+    refs.$settingClose = refs.$container.querySelector('.artplayer-setting-close');
     refs.$info = refs.$container.querySelector('.artplayer-info');
     refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel');
     refs.$infoClose = refs.$container.querySelector('.artplayer-info-close');