add volume change

src/controls/volume.js

@@ -1,10 +1,11 @@
-import { append, setStorage, getStorage } from '../utils';
+import { append, setStorage, getStorage, clamp } from '../utils';
 import icons from '../icons';
 
 export default class Volume {
   constructor(art, option) {
     this.art = art;
     this.option = option;
+    this.isDroging = false;
     this.init();
   }
 
@@ -12,6 +13,8 @@ export default class Volume {
     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.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
     this.$volumeClose.style.display = 'none';
 
     proxy(this.$volume, 'click', () => {
@@ -28,11 +31,31 @@ export default class Volume {
     });
 
     proxy(this.option.ref, 'mouseenter', () => {
-      console.log('mouseenter');
+      this.$volumePanel.style.width = '100px';
     });
 
     proxy(this.option.ref, 'mouseleave', () => {
-      console.log('mouseleave');
+      this.$volumePanel.style.width = '0';
+    });
+
+    proxy(this.$volumePanel, 'click', event => {
+      this.volumeChangeFromEvent(event);
+    });
+
+    proxy(this.$volumeHandle, 'mousedown', () => {
+      this.isDroging = true;
+    });
+
+    proxy(document, 'mousemove', event => {
+      if (this.isDroging) {
+        this.volumeChangeFromEvent(event);
+      }
+    });
+
+    proxy(document, 'mouseup', () => {
+      if (this.isDroging) {
+        this.isDroging = false;
+      }
     });
 
     this.art.on('video:volumechange', () => {
@@ -45,4 +68,14 @@ export default class Volume {
       }
     });
   }
+
+  volumeChangeFromEvent(event) {
+    const { player } = this.art;
+    const volumeHandleWidth = this.$volumeHandle.clientWidth / 2;
+    const { left } = this.$volumePanel.getBoundingClientRect();
+    const width = clamp(event.x - left, volumeHandleWidth, this.$volumePanel.clientWidth - volumeHandleWidth);
+    const percentage = clamp(width / this.$volumePanel.clientWidth, 0, 1);
+    this.$volumeHandle.style.left = `calc(${percentage * 100}% - ${volumeHandleWidth}px)`;
+    player.volume(percentage);
+  }
 }