初始化设置窗口

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;