bugfix

src/controls/danmu.js

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

src/controls/fullscreen.js

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

src/controls/index.js

@@ -1,5 +1,4 @@
 import { secondToTime, clamp } from '../utils';
-import validControl from '../verification/control';
 import Danmu from './danmu';
 import Fullscreen from './fullscreen';
 import Pip from './pip';
@@ -25,100 +24,84 @@ export default class Controls {
   }
 
   init() {
-    this.add({
-      control: Progress,
+    this.add(new Progress({
       disable: false,
       position: 'top',
       index: 10
-    });
+    }));
 
-    this.add({
-      control: Thumbnails,
+    this.add(new Thumbnails({
       disable: !this.art.option.thumbnails.url,
       position: 'top',
       index: 20
-    });
+    }));
 
-    this.add({
-      control: PlayAndPause,
+    this.add(new PlayAndPause({
       disable: false,
       position: 'left',
       index: 10
-    });
+    }));
 
-    this.add({
-      control: Volume,
+    this.add(new Volume({
       disable: false,
-      tooltip: 'Volume',
       position: 'left',
       index: 20
-    });
+    }));
 
-    this.add({
-      control: Time,
+    this.add(new Time({
       disable: false,
-      tooltip: 'Volume',
       position: 'left',
       index: 30
-    });
+    }));
 
-    this.add({
-      control: Danmu,
+    this.add(new Danmu({
       disable: false,
-      tooltip: 'Danmu',
       position: 'right',
       index: 10
-    });
+    }));
 
-    this.add({
-      control: Subtitle,
+    this.add(new Subtitle({
       disable: false,
-      tooltip: 'Subtitle',
       position: 'right',
       index: 20
-    });
+    }));
 
-    this.add({
-      control: Setting,
+    this.add(new Setting({
       disable: false,
-      tooltip: 'Setting',
       position: 'right',
       index: 30
-    });
+    }));
 
-    this.add({
-      control: Pip,
+    this.add(new Pip({
       disable: false,
-      tooltip: 'Pip',
       position: 'right',
       index: 40
-    });
+    }));
 
-    this.add({
-      control: Fullscreen,
+    this.add(new Fullscreen({
       disable: false,
-      tooltip: 'Fullscreen',
       position: 'right',
       index: 50
-    });
+    }));
 
-    this.art.option.controls.forEach(item => {
+    this.art.option.controls.filter(item => !item.disable).forEach(item => {
       this.add(item);
     });
   }
 
-  add(option) {
-    validControl(option);
+  add(control) {
+    const { option } = control;
     if (!option.disable) {
       id++;
-      const name = option.control.name.toLowerCase() || `control${id}`;
+      const 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);
-      option.ref = $control;
-      this.commonMethod(option);
-      this[name] = new option.control(this.art, option);
+      option.$control = $control;
+      this.commonMethod(control);
       this.$map[option.position].push($control);
+      control.apply(this.art);
+      this[name] = control;
     }
   }
 
@@ -148,23 +131,22 @@ export default class Controls {
     });
   }
 
-  commonMethod(option) {
-    Object.defineProperty(option.control.prototype, 'hide', {
+  commonMethod(control) {
+    Object.defineProperty(control, 'hide', {
       value: () => {
-        option.ref.style.display = 'none';
-        this.art.emit('control:hide', option.ref);
+        control.option.$control.style.display = 'none';
+        this.art.emit('control:hide', control.option.$control);
       }
     });
 
-    Object.defineProperty(option.control.prototype, 'show', {
+    Object.defineProperty(control, 'show', {
       value: () => {
-        option.ref.style.display =
-          option.position === 'top' ? 'block' : 'inline-block';
-        this.art.emit('control:show', option.ref);
+        control.option.$control.style.display = 'block';
+        this.art.emit('control:show', control.option.$control);
       }
     });
 
-    Object.defineProperty(option.control.prototype, 'getPosFromEvent', {
+    Object.defineProperty(control, 'getPosFromEvent', {
       value: event => {
         const { $video, $progress } = this.art.refs;
         const { left } = $progress.getBoundingClientRect();

src/controls/pip.js

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

src/controls/playAndPause.js

@@ -2,17 +2,20 @@ import { append } from '../utils';
 import icons from '../icons';
 
 export default class PlayAndPause {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
     this.init();
   }
 
   init() {
     const { events: { proxy }, player } = this.art;
 
-    this.$play = append(this.option.ref, icons.play);
-    this.$pause = append(this.option.ref, icons.pause);
+    this.$play = append(this.option.$control, icons.play);
+    this.$pause = append(this.option.$control, icons.pause);
     this.$pause.style.display = 'none';
 
     proxy(this.$play, 'click', () => {

src/controls/progress.js

@@ -1,9 +1,12 @@
 import { append } from '../utils';
 
 export default class Progress {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
     this.isDroging = false;
     this.getLoaded = this.getLoaded.bind(this);
     this.getPlayed = this.getPlayed.bind(this);
@@ -20,7 +23,7 @@ export default class Progress {
     } = this.art;
 
     append(
-      this.option.ref,
+      this.option.$control,
       `
         <div class="art-control-progress-inner">
           <div class="art-progress-loaded"></div>
@@ -32,15 +35,15 @@ export default class Progress {
       `
     );
 
-    this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
-    this.$played = this.option.ref.querySelector('.art-progress-played');
-    this.$highlight = this.option.ref.querySelector('.art-progress-highlight');
-    this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
-    this.$tip = this.option.ref.querySelector('.art-progress-tip');
+    this.$loaded = this.option.$control.querySelector('.art-progress-loaded');
+    this.$played = this.option.$control.querySelector('.art-progress-played');
+    this.$highlight = this.option.$control.querySelector('.art-progress-highlight');
+    this.$indicator = this.option.$control.querySelector('.art-progress-indicator');
+    this.$tip = this.option.$control.querySelector('.art-progress-tip');
 
     this.art.on('video:canplay', () => {
       this.set('loaded', this.getLoaded());
-      highlight.forEach(item => {
+      highlight.filter(item => !item.disable).forEach(item => {
         const left = Number(item.time) / $video.duration;
         append(this.$highlight, `
           <span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>
@@ -61,7 +64,7 @@ export default class Progress {
       this.set('played', 1);
     });
 
-    proxy(this.option.ref, 'mousemove', event => {
+    proxy(this.option.$control, 'mousemove', event => {
       this.$tip.style.display = 'block';
       if (event.path.indexOf(this.$highlight) > -1) {
         this.showHighlight(event);
@@ -70,11 +73,11 @@ export default class Progress {
       }
     });
 
-    proxy(this.option.ref, 'mouseout', () => {
+    proxy(this.option.$control, 'mouseout', () => {
       this.$tip.style.display = 'none';
     });
 
-    proxy(this.option.ref, 'click', event => {
+    proxy(this.option.$control, 'click', event => {
       if (event.target !== this.$indicator) {
         const { second, percentage } = this.getPosFromEvent(event);
         this.set('played', percentage);
@@ -108,7 +111,7 @@ export default class Progress {
     const { text, time } = event.target.dataset;
     this.$tip.innerHTML = text;
     const left =
-      Number(time) / $video.duration * this.option.ref.clientWidth +
+      Number(time) / $video.duration * this.option.$control.clientWidth +
       event.target.clientWidth / 2 -
       this.$tip.clientWidth / 2;
     this.$tip.style.left = `${left}px`;
@@ -120,8 +123,8 @@ export default class Progress {
     this.$tip.innerHTML = time;
     if (width <= tipWidth / 2) {
       this.$tip.style.left = 0;
-    } else if (width > this.option.ref.clientWidth - tipWidth / 2) {
-      this.$tip.style.left = `${this.option.ref.clientWidth - tipWidth}px`;
+    } else if (width > this.option.$control.clientWidth - tipWidth / 2) {
+      this.$tip.style.left = `${this.option.$control.clientWidth - tipWidth}px`;
     } else {
       this.$tip.style.left = `${width - tipWidth / 2}px`;
     }

src/controls/setting.js

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

src/controls/subtitle.js

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

src/controls/thumbnails.js

@@ -1,7 +1,10 @@
 export default class Thumbnails {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
     this.init();
   }
 
@@ -12,12 +15,12 @@ export default class Thumbnails {
     } = this.art;
 
     proxy($progress, 'mousemove', event => {
-      this.option.ref.style.display = 'block';
+      this.option.$control.style.display = 'block';
       this.showThumbnails(event);
     });
 
     proxy($progress, 'mouseout', () => {
-      this.option.ref.style.display = 'none';
+      this.option.$control.style.display = 'none';
     });
   }
 
@@ -30,17 +33,17 @@ export default class Thumbnails {
     let yIndex = Math.ceil(perIndex / column);
     let xIndex = perIndex % column || column;
 
-    this.option.ref.style.backgroundImage = `url(${url})`;
-    this.option.ref.style.height = `${height}px`;
-    this.option.ref.style.width = `${width}px`;
-    this.option.ref.style.backgroundPosition = `-${--xIndex * width}px -${--yIndex * height}px`;
+    this.option.$control.style.backgroundImage = `url(${url})`;
+    this.option.$control.style.height = `${height}px`;
+    this.option.$control.style.width = `${width}px`;
+    this.option.$control.style.backgroundPosition = `-${--xIndex * width}px -${--yIndex * height}px`;
 
     if (posWidth <= width / 2) {
-      this.option.ref.style.left = 0;
+      this.option.$control.style.left = 0;
     } else if (posWidth > $progress.clientWidth - width / 2) {
-      this.option.ref.style.left = `${$progress.clientWidth - width}px`;
+      this.option.$control.style.left = `${$progress.clientWidth - width}px`;
     } else {
-      this.option.ref.style.left = `${posWidth - width / 2}px`;
+      this.option.$control.style.left = `${posWidth - width / 2}px`;
     }
   }
 }

src/controls/time.js

@@ -1,25 +1,28 @@
 import { secondToTime } from '../utils';
 
 export default class Time {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
     this.init();
   }
 
   init() {
-    this.option.ref.innerHTML = '00:00 / 00:00';
+    this.option.$control.innerHTML = '00:00 / 00:00';
 
     this.art.on('video:canplay', () => {
-      this.option.ref.innerHTML = this.getTime();
+      this.option.$control.innerHTML = this.getTime();
     });
 
     this.art.on('video:timeupdate', () => {
-      this.option.ref.innerHTML = this.getTime();
+      this.option.$control.innerHTML = this.getTime();
     });
 
     this.art.on('video:seeking', () => {
-      this.option.ref.innerHTML = this.getTime();
+      this.option.$control.innerHTML = this.getTime();
     });
   }
 

src/controls/volume.js

@@ -2,18 +2,21 @@ import { append, setStorage, getStorage, clamp } from '../utils';
 import icons from '../icons';
 
 export default class Volume {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
     this.isDroging = false;
     this.init();
   }
 
   init() {
     const { events: { proxy }, player } = this.art;
-    this.$volume = append(this.option.ref, icons.volume);
-    this.$volumeClose = append(this.option.ref, icons.volumeClose);
-    this.$volumePanel = append(this.option.ref, '<div class="art-volume-panel"></div>');
+    this.$volume = append(this.option.$control, icons.volume);
+    this.$volumeClose = append(this.option.$control, icons.volumeClose);
+    this.$volumePanel = append(this.option.$control, '<div class="art-volume-panel"></div>');
     this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
     this.$volumeClose.style.display = 'none';
 
@@ -31,9 +34,10 @@ export default class Volume {
     proxy(this.$volumeClose, 'click', () => {
       this.$volume.style.display = 'block';
       this.$volumeClose.style.display = 'none';
+      player.volume(getStorage('volume'));
     });
 
-    proxy(this.option.ref, 'mouseenter', () => {
+    proxy(this.option.$control, 'mouseenter', () => {
       this.$volumePanel.classList.add('art-volume-panel-hover');
 
       // TODO
@@ -42,7 +46,7 @@ export default class Volume {
       }, 200);
     });
 
-    proxy(this.option.ref, 'mouseleave', () => {
+    proxy(this.option.$control, 'mouseleave', () => {
       this.$volumePanel.classList.remove('art-volume-panel-hover');
     });