分离事件中心

packages/artplayer/src/controls/danmu.js

@@ -1,25 +0,0 @@
-import { append, tooltip, setStyle } from '../utils';
-import icons from '../icons';
-
-export default class Danmu {
-  constructor(option) {
-    this.option = option;
-  }
-
-  apply(art, $control) {
-    const { events: { proxy }, i18n, danmu } = art;
-    this.$danmu = append($control, icons.danmu);
-    tooltip(this.$danmu, i18n.get('Hide danmu'));
-    proxy($control, 'click', () => {
-      if (danmu.isOpen) {
-        danmu.hide();
-        setStyle(this.$danmu, 'opacity', '1');
-        tooltip(this.$danmu, i18n.get('Show danmu'));
-      } else {
-        danmu.show();
-        setStyle(this.$danmu, 'opacity', '0.8');
-        tooltip(this.$danmu, i18n.get('Hide danmu'));
-      }
-    });
-  }
-}

packages/artplayer/src/controls/progress.js

@@ -1,18 +1,16 @@
-import { append, clamp, secondToTime, setStyle } from '../utils';
+import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';
 
 export default class Progress {
   constructor(option) {
     this.option = option;
     this.isDroging = false;
-    this.getLoaded = this.getLoaded.bind(this);
-    this.getPlayed = this.getPlayed.bind(this);
     this.set = this.set.bind(this);
   }
 
   apply(art, $control) {
     this.art = art;
     this.$control = $control;
-    const { option: { highlight, theme }, events: { proxy }, refs: { $video }, player } = art;
+    const { option: { highlight, theme }, events: { proxy }, player } = art;
 
     append(
       $control,
@@ -33,18 +31,19 @@ export default class Progress {
     this.$indicator = $control.querySelector('.art-progress-indicator');
     this.$tip = $control.querySelector('.art-progress-tip');
 
-    this.set('loaded', this.getLoaded());
     highlight.forEach(item => {
-      const left = Number(item.time) / $video.duration;
+      const left = Number(item.time) / player.duration;
       append(this.$highlight, `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>`);
     });
 
+    this.set('loaded', player.loaded);
+
     this.art.on('video:progress', () => {
-      this.set('loaded', this.getLoaded());
+      this.set('loaded', this.loaded);
     });
 
     this.art.on('video:timeupdate', () => {
-      this.set('played', this.getPlayed());
+      this.set('played', this.played);
     });
 
     this.art.on('video:ended', () => {
@@ -94,11 +93,10 @@ export default class Progress {
   }
 
   showHighlight(event) {
-    const { $video } = this.art.refs;
     const { text, time } = event.target.dataset;
     this.$tip.innerHTML = text;
     const left =
-      Number(time) / $video.duration * this.$control.clientWidth +
+      Number(time) / this.art.player.duration * this.$control.clientWidth +
       event.target.clientWidth / 2 -
       this.$tip.clientWidth / 2;
     setStyle(this.$tip, 'left', `${left}px`);
@@ -117,23 +115,11 @@ export default class Progress {
     }
   }
 
-  getPlayed() {
-    const { $video } = this.art.refs;
-    return $video.currentTime / $video.duration;
-  }
-
-  getLoaded() {
-    const { $video } = this.art.refs;
-    return $video.buffered.length
-      ? $video.buffered.end($video.buffered.length - 1) / $video.duration
-      : 0;
-  }
-
   getPosFromEvent(event) {
-    const { $video, $progress } = this.art.refs;
+    const { player, refs: { $progress } } = this.art;
     const { left } = $progress.getBoundingClientRect();
     const width = clamp(event.x - left, 0, $progress.clientWidth);
-    const second = width / $progress.clientWidth * $video.duration;
+    const second = width / $progress.clientWidth * player.duration;
     const time = secondToTime(second);
     const percentage = clamp(width / $progress.clientWidth, 0, 1);
     return { second, time, width, percentage };
@@ -142,7 +128,7 @@ export default class Progress {
   set(type, percentage) {
     setStyle(this[`$${type}`], 'width', `${percentage * 100}%`);
     if (type === 'played') {
-      setStyle(this.$indicator, 'left', `calc(${percentage * 100}% - 6.5px)`);
+      setStyle(this.$indicator, 'left', `calc(${percentage * 100}% - ${getStyle(this.$indicator, 'width') / 2}px)`);
     }
   }
 }

packages/artplayer/src/controls/time.js

@@ -9,7 +9,7 @@ export default class Time {
     $control.innerHTML = '00:00 / 00:00';
 
     function setTime() {
-      $control.innerHTML = `${secondToTime(art.player.currentTime())} / ${secondToTime(art.player.duration())}`;
+      $control.innerHTML = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
     }
 
     art.on('video:canplay', () => {

packages/artplayer/src/controls/volume.js

@@ -1,4 +1,4 @@
-import { append, getStorage, clamp, tooltip, setStyle } from '../utils';
+import { append, clamp, tooltip, setStyle, sleep, getStyle } from '../utils';
 import icons from '../icons';
 
 export default class Volume {
@@ -8,72 +8,15 @@ export default class Volume {
   }
 
   apply(art, $control) {
-    this.art = art;
-    this.$control = $control;
-    this.init();
-  }
-
-  init() {
-    const { events: { proxy }, player, i18n } = this.art;
-    this.$volume = append(this.$control, icons.volume);
-    this.$volumeClose = append(this.$control, icons.volumeClose);
-    this.$volumePanel = append(this.$control, '<div class="art-volume-panel"></div>');
+    const { events: { proxy, hover }, player, i18n, storage } = art;
+    this.$volume = append($control, icons.volume);
+    this.$volumeClose = append($control, icons.volumeClose);
+    this.$volumePanel = append($control, '<div class="art-volume-panel"></div>');
     this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
     tooltip(this.$volume, i18n.get('Mute'));
     setStyle(this.$volumeClose, 'display', 'none');
 
-    const volume = getStorage('volume');
-    this.setVolumeHandle(volume);
-    player.volume(volume);
-
-    proxy(this.$volume, 'click', () => {
-      setStyle(this.$volume, 'display', 'none');
-      setStyle(this.$volumeClose, 'display', 'block');
-      player.volume(0);
-    });
-
-    proxy(this.$volumeClose, 'click', () => {
-      setStyle(this.$volume, 'display', 'block');
-      setStyle(this.$volumeClose, 'display', 'none');
-      player.volume(getStorage('volume'));
-    });
-
-    proxy(this.$control, 'mouseenter', () => {
-      this.$volumePanel.classList.add('art-volume-panel-hover');
-
-      // TODO
-      setTimeout(() => {
-        this.setVolumeHandle(player.volume());
-      }, 200);
-    });
-
-    proxy(this.$control, 'mouseleave', () => {
-      this.$volumePanel.classList.remove('art-volume-panel-hover');
-    });
-
-    proxy(this.$volumePanel, 'click', event => {
-      this.volumeChangeFromEvent(event);
-    });
-
-    proxy(this.$volumeHandle, 'mousedown', () => {
-      this.isDroging = true;
-    });
-
-    proxy(this.$volumeHandle, 'mousemove', event => {
-      if (this.isDroging) {
-        this.volumeChangeFromEvent(event);
-      }
-    });
-
-    proxy(document, 'mouseup', () => {
-      if (this.isDroging) {
-        this.isDroging = false;
-      }
-    });
-
-    this.art.on('video:volumechange', () => {
-      const percentage = player.volume();
-      this.setVolumeHandle(percentage);
+    art.on('volume', percentage => {
       if (percentage === 0) {
         setStyle(this.$volume, 'display', 'none');
         setStyle(this.$volumeClose, 'display', 'block');
@@ -82,19 +25,59 @@ export default class Volume {
         setStyle(this.$volumeClose, 'display', 'none');
       }
     });
+
+    art.on('video:volumechange', () => {
+      this.setVolumeHandle(player.volume);
+    });
+
+    proxy(this.$volume, 'click', () => {
+      player.volume = 0;
+    });
+
+    proxy(this.$volumeClose, 'click', () => {
+      player.volume = storage.get('volume');
+    });
+
+    hover($control, () => {
+      this.$volumePanel.classList.add('art-volume-panel-hover');
+      sleep(200).then(() => {
+        this.setVolumeHandle(player.volume);
+      });
+    }, () => {
+      this.$volumePanel.classList.remove('art-volume-panel-hover');
+    });
+
+    proxy(this.$volumePanel, 'click', event => {
+      player.volume = this.volumeChangeFromEvent(event);
+    });
+
+    proxy(this.$volumeHandle, 'mousedown', () => {
+      this.isDroging = true;
+    });
+
+    proxy(this.$volumeHandle, 'mousemove', event => {
+      if (this.isDroging) {
+        player.volume = this.volumeChangeFromEvent(event);
+      }
+    });
+
+    proxy(document, 'mouseup', () => {
+      if (this.isDroging) {
+        this.isDroging = false;
+      }
+    });
   }
 
   volumeChangeFromEvent(event) {
-    const { player } = this.art;
     const { left: panelLeft, width: panelWidth } = this.$volumePanel.getBoundingClientRect();
     const { width: handleWidth } = this.$volumeHandle.getBoundingClientRect();
     const percentage = clamp(event.x - panelLeft - handleWidth / 2, 0, panelWidth - handleWidth / 2) / (panelWidth - handleWidth);
-    player.volume(percentage);
+    return percentage;
   }
 
   setVolumeHandle(percentage = 0.7) {
-    const { width: panelWidth } = this.$volumePanel.getBoundingClientRect();
-    const { width: handleWidth } = this.$volumeHandle.getBoundingClientRect();
+    const panelWidth = getStyle(this.$volumePanel, 'width');
+    const handleWidth = getStyle(this.$volumeHandle, 'width');
     const width = handleWidth / 2 + (panelWidth - handleWidth) * percentage - handleWidth / 2;
     setStyle(this.$volumeHandle, 'left', `${width}px`);
   }