add more file

src/controls/danmu.js

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

src/controls/fullscreen.js

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

src/controls/highlight.js

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

src/controls/index.js

@@ -1,6 +1,117 @@
+import { append } from '../utils';
+import validControl from '../utils/validControl';
+import Danmu from './danmu';
+import Fullscreen from './fullscreen';
+import Highlight from './highlight';
+import Pip from './pip';
+import PlayAndPause from './playAndPause';
+import Progress from './progress';
+import Screenshot from './screenshot';
+import Subtitle from './subtitle';
+import Time from './time';
+import Volume from './volume';
+import Setting from './setting';
+
+let id = 0;
 export default class Controls {
   constructor(art) {
     this.art = art;
+    this.init();
+  }
+
+  init() {
+    this.progress = new Progress(this.art);
+    this.highlight = new Highlight(this.art);
+    this.screenshot = new Screenshot(this.art);
+
+    this.add({
+      control: PlayAndPause,
+      disable: false,
+      icon: 'PlayAndPause',
+      position: 'left',
+      index: 0
+    });
+
+    this.add({
+      control: Volume,
+      disable: false,
+      icon: 'Volume',
+      position: 'left',
+      index: 10
+    });
+
+    this.add({
+      control: Time,
+      disable: false,
+      icon: 'Time',
+      position: 'left',
+      index: 20
+    });
+
+    this.add({
+      control: Danmu,
+      disable: false,
+      icon: 'Danmu',
+      position: 'right',
+      index: 0
+    });
+
+    this.add({
+      control: Subtitle,
+      disable: false,
+      icon: 'Subtitle',
+      position: 'right',
+      index: 10
+    });
+
+    this.add({
+      control: Setting,
+      disable: false,
+      icon: 'Setting',
+      position: 'right',
+      index: 20
+    });
+
+    this.add({
+      control: Pip,
+      disable: false,
+      icon: 'Pip',
+      position: 'right',
+      index: 30
+    });
+
+    this.add({
+      control: Fullscreen,
+      disable: false,
+      icon: 'Fullscreen',
+      position: 'right',
+      index: 40
+    });
+
+    this.art.option.controls.forEach(item => {
+      this.add(item);
+    });
+  }
+
+  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';
+      };
+    }
   }
 
   show() {

src/controls/pip.js

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

src/controls/playAndPause.js

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

src/controls/progress.js

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

src/controls/screenshot.js

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

src/controls/setting.js

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

src/controls/subtitle.js

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

src/controls/time.js

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

src/controls/volume.js

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

src/index.js

@@ -1,5 +1,5 @@
 import './style/index.scss';
-import verification from './utils/verification';
+import validOption from './utils/validOption';
 import config from './config';
 import Emitter from 'tiny-emitter';
 import Template from './template';
@@ -24,11 +24,11 @@ export const instances = [];
 class Artplayer extends Emitter {
   constructor(option) {
     super();
-    this.art.emit('init:start');
+    this.emit('init:start');
     this.option = Object.assign({}, Artplayer.DEFAULTS, option);
-    verification(this.option);
+    validOption(this.option);
     this.init();
-    this.art.emit('init:end');
+    this.emit('init:end');
   }
 
   static get version() {
@@ -56,6 +56,7 @@ class Artplayer extends Emitter {
       hotkey: true,
       subtitle: '',
       subtitleStyle: {},
+      controls: [],
       lang: navigator.language.toLowerCase()
     };
   }
@@ -92,7 +93,7 @@ class Artplayer extends Emitter {
     this.i18n = new I18n(this);
     this.events = new Events(this);
     this.player = new Player(this);
-    this.mse = new Mse(this);
+    // this.mse = new Mse(this);
     this.layers = new Layers(this);
     this.controls = new Controls(this);
     this.contextmenu = new Contextmenu(this);
@@ -113,7 +114,7 @@ class Artplayer extends Emitter {
     this.events.destroy();
     this.refs.$container.innerHTML = '';
     instances.splice(instances.indexOf(this), 1);
-    this.art.emit('destroy');
+    this.emit('destroy');
   }
 }
 

src/layers.js

@@ -34,13 +34,13 @@ export default class Layers {
   }
 
   show() {
-    const { refs: { $layers } } = this.art;
+    const { $layers } = this.art.refs;
     $layers.style.display = 'block';
     this.art.emit('layers:show', $layers);
   }
 
   hide() {
-    const { refs: { $layers } } = this.art;
+    const { $layers } = this.art.refs;
     $layers.style.display = 'none';
     this.art.emit('layers:hide', $layers);
   }

src/loading.js

@@ -13,13 +13,13 @@ export default class Loading {
   }
 
   hide() {
-    const { refs: { $loading } } = this.art;
+    const { $loading } = this.art.refs;
     $loading.style.display = 'none';
     this.art.emit('loading:hide', $loading);
   }
 
   show() {
-    const { refs: { $loading } } = this.art;
+    const { $loading } = this.art.refs;
     $loading.style.display = 'flex';
     this.art.emit('loading:show', $loading);
   }

src/mask.js

@@ -25,13 +25,13 @@ export default class Mask {
   }
 
   show() {
-    const { refs: { $mask } } = this.art;
+    const { $mask } = this.art.refs;
     $mask.style.display = 'flex';
     this.art.emit('mask:show', $mask);
   }
 
   hide() {
-    const { refs: { $mask } } = this.art;
+    const { $mask } = this.art.refs;
     $mask.style.display = 'none';
     this.art.emit('mask:show', $mask);
   }

src/notice.js

@@ -5,7 +5,7 @@ export default class Notice {
   }
 
   show(msg, autoHide) {
-    const { refs: { $notice } } = this.art;
+    const { $notice } = this.art.refs;
     $notice.style.display = 'block';
     $notice.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
     if (autoHide) {
@@ -18,7 +18,7 @@ export default class Notice {
   }
 
   hide() {
-    const { refs: { $notice } } = this.art;
+    const { $notice } = this.art.refs;
     $notice.style.display = 'none';
     this.art.emit('notice:hide', $notice);
   }

src/player.js

@@ -11,11 +11,12 @@ export default class Player {
   init() {
     const { option } = this.art;
     const { $video } = this.art.refs;
-    $video.controls = false;
+    $video.controls = true;
     $video.poster = option.poster;
     $video.volume = clamp(option.volume, 0, 1);
     $video.autoplay = option.autoplay;
     $video.preload = option.preload;
+    $video.src = option.url;
   }
 
   eventBind() {
@@ -68,14 +69,14 @@ export default class Player {
   }
 
   play() {
-    const { refs: { $video } } = this.art;
+    const { $video } = this.art.refs;
     const promise = $video.play();
     this.art.emit('play', $video);
     return promise;
   }
 
   pause() {
-    const { refs: { $video } } = this.art;
+    const { $video } = this.art.refs;
     $video.pause();
     this.art.emit('pause', $video);
   }
@@ -89,7 +90,7 @@ export default class Player {
   }
 
   seek(time) {
-    const { refs: { $video } } = this.art;
+    const { $video } = this.art.refs;
     let newTime = Math.max(time, 0);
     if ($video.duration) {
       newTime = Math.min(newTime, $video.duration);
@@ -104,11 +105,10 @@ export default class Player {
   }
 
   volume(percentage) {
-    const { refs: { $video } } = this.art;
+    const { $video } = this.art.refs;
     if (percentage) {
       $video.volume = clamp(percentage, 0, 1);
     }
-
     this.art.emit('volume', $video.volume);
   }
 
@@ -129,7 +129,7 @@ export default class Player {
   }
 
   speed(rate) {
-    const { refs: { $video } } = this.art;
+    const { $video } = this.art.refs;
     $video.playbackRate = rate;
     this.art.emit('speed', rate);
   }

src/subtitle.js

@@ -46,19 +46,19 @@ export default class Subtitle {
   }
 
   show() {
-    const { refs: { $subtitle } } = this.art;
+    const { $subtitle } = this.art.refs;
     $subtitle.style.display = 'block';
     this.art.emit('subtitle:show', $subtitle);
   }
 
   hide() {
-    const { refs: { $subtitle } } = this.art;
+    const { $subtitle } = this.art.refs;
     $subtitle.style.display = 'none';
     this.art.emit('subtitle:hide', $subtitle);
   }
 
   switch(url) {
-    const { refs: { $track } } = this.art;
+    const { $track } = this.art.refs;
     errorHandle(
       getExt(url) === 'vtt',
       `'url' option require 'vtt' format, but got '${getExt(url)}'.`

src/template.js

@@ -12,7 +12,13 @@ export default class Template {
           <div class="artplayer-subtitle"></div>
           <div class="artplayer-layers"></div>
           <div class="artplayer-mask"></div>
-          <div class="artplayer-controls"></div>
+          <div class="artplayer-bottom">
+            <div class="artplayer-progress"></div>
+            <div class="artplayer-controls">
+              <div class="artplayer-controls-left"></div>
+              <div class="artplayer-controls-right"></div>
+            </div>
+          </div>
           <div class="artplayer-loading"></div>
           <div class="artplayer-notice"></div>
         </div>
@@ -20,7 +26,11 @@ export default class Template {
     refs.$wrap = refs.$container.querySelector('.artplayer-wrap');
     refs.$video = refs.$container.querySelector('.artplayer-video');
     refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
+    refs.$bottom = refs.$container.querySelector('.artplayer-bottom');
+    refs.$progress = refs.$container.querySelector('.artplayer-progress');
     refs.$controls = refs.$container.querySelector('.artplayer-controls');
+    refs.$controlsLeft = refs.$container.querySelector('.artplayer-controls-left');
+    refs.$controlsRight = refs.$container.querySelector('.artplayer-controls-right');
     refs.$layers = refs.$container.querySelector('.artplayer-layers');
     refs.$loading = refs.$container.querySelector('.artplayer-loading');
     refs.$notice = refs.$container.querySelector('.artplayer-notice');

src/utils/validControl.js

@@ -0,0 +1,28 @@
+import { errorHandle } from '.';
+
+export default function validControl(option) {
+  errorHandle(
+    typeof option.control === 'function',
+    `'control' option require 'function' type, but got '${typeof option.control}'.`
+  );
+
+  errorHandle(
+    typeof option.disable === 'boolean',
+    `'disable' option require 'boolean' type, but got '${typeof option.disable}'.`
+  );
+
+  errorHandle(
+    typeof option.icon === 'string' || option.icon instanceof Element,
+    `'icon' option require 'string' or 'Element' type, but got '${typeof option.icon}'.`
+  );
+
+  errorHandle(
+    ['top', 'left', 'right'].indexOf(option.position) > -1,
+    `'position' option require one of 'top、left、right', but got '${option.position}'.`
+  );
+
+  errorHandle(
+    typeof option.index === 'number',
+    `'index' option require 'number' type, but got '${typeof option.index}'.`
+  );
+}

src/utils/validOption.js

@@ -1,6 +1,6 @@
-import { errorHandle } from './index';
+import { errorHandle } from '.';
 
-export default function verification(option) {
+export default function validOption(option) {
   errorHandle(
     option.container,
     '\'container\' option is required.'
@@ -38,7 +38,7 @@ export default function verification(option) {
 
   errorHandle(
     ['none', 'metadata', 'auto'].indexOf(option.preload) > -1,
-    '\'preload\' option require one of \'none、metadata、auto\'.'
+    `'preload' option require one of 'none、metadata、auto', but got '${option.preload}.`
   );
 
   errorHandle(