bugfix

src/controls/danmu.js

@@ -1,5 +1,6 @@
 export default class Danmu {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/controls/fullscreen.js

@@ -1,5 +1,6 @@
 export default class Fullscreen {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/controls/highlight.js

@@ -1,5 +1,6 @@
 export default class Highlight {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/controls/index.js

@@ -1,5 +1,5 @@
-import { append } from '../utils';
-import validControl from '../utils/validControl';
+import { append, setStyle } from '../utils';
+import validControl from '../verification/control';
 import Danmu from './danmu';
 import Fullscreen from './fullscreen';
 import Highlight from './highlight';
@@ -16,18 +16,45 @@ let id = 0;
 export default class Controls {
   constructor(art) {
     this.art = art;
+    this.$map = {
+      top: [],
+      left: [],
+      right: []
+    };
     this.init();
+    this.mount();
   }
 
   init() {
-    this.progress = new Progress(this.art);
-    this.highlight = new Highlight(this.art);
-    this.screenshot = new Screenshot(this.art);
+    this.add({
+      control: Progress,
+      disable: false,
+      html: 'Progress',
+      position: 'top',
+      index: 0
+    });
+
+    this.add({
+      control: Highlight,
+      disable: false,
+      html: 'Highlight',
+      position: 'top',
+      index: 10
+    });
+
+    this.add({
+      control: Screenshot,
+      disable: false,
+      html: 'Screenshot',
+      position: 'top',
+      index: 20
+    });
 
     this.add({
       control: PlayAndPause,
       disable: false,
-      icon: 'PlayAndPause',
+      html: 'PlayAndPause',
+      tooltip: 'PlayAndPause',
       position: 'left',
       index: 0
     });
@@ -35,7 +62,8 @@ export default class Controls {
     this.add({
       control: Volume,
       disable: false,
-      icon: 'Volume',
+      html: 'Volume',
+      tooltip: 'Volume',
       position: 'left',
       index: 10
     });
@@ -43,7 +71,8 @@ export default class Controls {
     this.add({
       control: Time,
       disable: false,
-      icon: 'Time',
+      html: 'Time',
+      tooltip: 'Volume',
       position: 'left',
       index: 20
     });
@@ -51,7 +80,8 @@ export default class Controls {
     this.add({
       control: Danmu,
       disable: false,
-      icon: 'Danmu',
+      html: 'Danmu',
+      tooltip: 'Danmu',
       position: 'right',
       index: 0
     });
@@ -59,7 +89,8 @@ export default class Controls {
     this.add({
       control: Subtitle,
       disable: false,
-      icon: 'Subtitle',
+      html: 'Subtitle',
+      tooltip: 'Subtitle',
       position: 'right',
       index: 10
     });
@@ -67,7 +98,8 @@ export default class Controls {
     this.add({
       control: Setting,
       disable: false,
-      icon: 'Setting',
+      html: 'Setting',
+      tooltip: 'Setting',
       position: 'right',
       index: 20
     });
@@ -75,7 +107,8 @@ export default class Controls {
     this.add({
       control: Pip,
       disable: false,
-      icon: 'Pip',
+      html: 'Pip',
+      tooltip: 'Pip',
       position: 'right',
       index: 30
     });
@@ -83,7 +116,8 @@ export default class Controls {
     this.add({
       control: Fullscreen,
       disable: false,
-      icon: 'Fullscreen',
+      html: 'Fullscreen',
+      tooltip: 'Fullscreen',
       position: 'right',
       index: 40
     });
@@ -95,25 +129,69 @@ export default class Controls {
 
   add(option) {
     validControl(option);
-    const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
     if (!option.disable) {
       id++;
       const name = option.control.name.toLowerCase() || `control${id}`;
       const $control = document.createElement('div');
       $control.setAttribute('class', `art-control art-control-${name}`);
-      $control.setAttribute('data-control-index', option.index || id);
-      append($control, option.icon);
-      this[name] = new option.control(this.art);
-      this[name].ref = $control;
-      this[name].show = function show() {
-        $control.style.display = 'inline-block';
-      };
-      this[name].hide = function show() {
-        $control.style.display = 'none';
-      };
+      $control.setAttribute('data-control-index', String(option.index) || id);
+      setStyle($control, option.style || {});
+      append($control, option.html);
+      option.ref = $control;
+      this.commonMethod(option);
+      this[name] = new option.control(this.art, option);
+      this.$map[option.position].push($control);
     }
   }
 
+  mount() {
+    const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
+    Object.keys(this.$map).forEach(key => {
+      const $list = this.$map[key].sort(
+        (a, b) =>
+          Number(a.dataset.controlIndex) - Number(b.dataset.controlIndex)
+      );
+
+      $list.forEach($control => {
+        switch (key) {
+          case 'top':
+            $progress.appendChild($control);
+            break;
+          case 'left':
+            $controlsLeft.appendChild($control);
+            break;
+          case 'right':
+            $controlsRight.appendChild($control);
+            break;
+          default:
+            break;
+        }
+      });
+    });
+  }
+
+  commonMethod(option) {
+    Object.defineProperty(option.control.prototype, 'hide', {
+      value: () => {
+        option.ref.style.display = 'none';
+        this.art.emit('control:hide', option.ref);
+      }
+    });
+
+    Object.defineProperty(option.control.prototype, 'show', {
+      value: () => {
+        option.ref.style.display = option.position === 'top' ? 'block' : 'inline-block';
+        this.art.emit('control:show', option.ref);
+      }
+    });
+
+    Object.defineProperty(option.control.prototype, 'addMenu', {
+      value: (menus) => {
+        console.log(menus);
+      }
+    });
+  }
+
   show() {
     const { $wrap } = this.art.refs;
     $wrap.classList.add('controls-show');

src/controls/pip.js

@@ -1,5 +1,6 @@
 export default class Pip {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/controls/playAndPause.js

@@ -1,5 +1,6 @@
 export default class PlayAndPause {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/controls/progress.js

@@ -1,5 +1,6 @@
 export default class Progress {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/controls/screenshot.js

@@ -1,5 +1,6 @@
 export default class Screenshot {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/controls/setting.js

@@ -1,5 +1,6 @@
 export default class Setting {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/controls/subtitle.js

@@ -1,5 +1,6 @@
 export default class Subtitle {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/controls/time.js

@@ -1,5 +1,6 @@
 export default class Time {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/controls/volume.js

@@ -1,5 +1,6 @@
 export default class Volume {
-  constructor(art) {
+  constructor(art, option) {
     this.art = art;
+    this.option = option;
   }
 }

src/index.js

@@ -1,5 +1,6 @@
 import './style/index.scss';
-import validOption from './utils/validOption';
+import 'balloon-css/balloon.min.css';
+import validOption from './verification/player';
 import config from './config';
 import Emitter from 'tiny-emitter';
 import Template from './template';
@@ -41,7 +42,7 @@ class Artplayer extends Emitter {
 
   static get DEFAULTS() {
     return {
-      container: document.querySelector('.artplayer'),
+      container: '.artplayer',
       url: '',
       poster: '',
       volume: 0.7,
@@ -54,8 +55,10 @@ class Artplayer extends Emitter {
       loading: '',
       theme: '#1aafff',
       hotkey: true,
-      subtitle: '',
-      subtitleStyle: {},
+      subtitle: {
+        url: '',
+        style: {}
+      },
       controls: [],
       lang: navigator.language.toLowerCase()
     };

src/subtitle.js

@@ -5,8 +5,8 @@ export default class Subtitle {
     this.art = art;
     if (this.art.option.subtitle) {
       errorHandle(
-        getExt(this.art.option.subtitle) === 'vtt',
-        `'subtitle' option require 'vtt' format, but got '${getExt(this.art.option.subtitle)}'.`
+        getExt(this.art.option.subtitle.url) === 'vtt',
+        `'url' option require 'vtt' format, but got '${getExt(this.art.option.subtitle.url)}'.`
       );
       this.init();
     }
@@ -15,15 +15,15 @@ export default class Subtitle {
   init() {
     const {
       events: { proxy },
-      option: { subtitle, subtitleStyle },
+      option: { subtitle },
       refs: { $video, $subtitle }
     } = this.art;
 
-    setStyle($subtitle, subtitleStyle);
+    setStyle($subtitle, subtitle.style || {});
     const $track = document.createElement('track');
     $track.default = true;
     $track.kind = 'metadata';
-    $track.src = subtitle;
+    $track.src = subtitle.url;
     $video.appendChild($track);
     this.art.refs.$track = $track;
 

src/verification/control.js

@@ -1,4 +1,4 @@
-import { errorHandle } from '.';
+import { errorHandle } from '../utils';
 
 export default function validControl(option) {
   errorHandle(
@@ -12,8 +12,8 @@ export default function validControl(option) {
   );
 
   errorHandle(
-    typeof option.icon === 'string' || option.icon instanceof Element,
-    `'icon' option require 'string' or 'Element' type, but got '${typeof option.icon}'.`
+    typeof option.html === 'string' || option.html instanceof Element,
+    `'html' option require 'string' or 'Element' type, but got '${typeof option.html}'.`
   );
 
   errorHandle(

src/verification/player.js

@@ -1,4 +1,4 @@
-import { errorHandle } from '.';
+import { errorHandle } from '../utils';
 
 export default function validOption(option) {
   errorHandle(
@@ -82,12 +82,12 @@ export default function validOption(option) {
   );
 
   errorHandle(
-    typeof option.subtitle === 'string',
-    `'subtitle' option require 'string' type, but got '${typeof option.subtitle}'.`
+    Object.prototype.toString.call(option.subtitle) === '[object Object]',
+    `'subtitle' option require 'object' type, but got '${typeof option.subtitle}'.`
   );
 
   errorHandle(
-    Object.prototype.toString.call(option.subtitleStyle) === '[object Object]',
-    `'subtitleStyle' option require 'object' type, but got '${typeof option.subtitleStyle}'.`
+    Array.isArray(option.controls),
+    `'controls' option require 'array' type, but got '${typeof option.controls}'.`
   );
 }