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);
+  }
 }

src/icons/pause.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="width: 36px; height: 22px" viewBox="0 0 22 22">
+<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%" viewBox="0 0 22 22">
     <path d="M7 3a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zM15 3a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2z"></path>
 </svg>

src/icons/play.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="width: 36px; height: 22px" viewBox="0 0 22 22">
+<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%" viewBox="0 0 22 22">
   <path d="M17.982 9.275L8.06 3.27A2.013 2.013 0 0 0 5 4.994v12.011a2.017 2.017 0 0 0 3.06 1.725l9.922-6.005a2.017 2.017 0 0 0 0-3.45z"></path>
 </svg>

src/icons/volume-close.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="width: 36px; height: 22px" viewBox="0 0 22 22">
+<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%" viewBox="0 0 22 22">
     <path d="M15 11a3.998 3.998 0 0 0-2-3.465v2.636l1.865 1.865A4.02 4.02 0 0 0 15 11z"></path>
     <path d="M13.583 5.583A5.998 5.998 0 0 1 17 11a6 6 0 0 1-.585 2.587l1.477 1.477a8.001 8.001 0 0 0-3.446-11.286 1 1 0 0 0-.863 1.805zM18.778 18.778l-2.121-2.121-1.414-1.414-1.415-1.415L13 13l-2-2-3.889-3.889-3.889-3.889a.999.999 0 1 0-1.414 1.414L5.172 8H5a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1l4.188 3.35a.5.5 0 0 0 .812-.39v-3.131l2.587 2.587-.01.005a1 1 0 0 0 .86 1.806c.215-.102.424-.214.627-.333l2.3 2.3a1.001 1.001 0 0 0 1.414-1.416zM11 5.04a.5.5 0 0 0-.813-.39L8.682 5.854 11 8.172V5.04z"></path>
 </svg>

src/icons/volume.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="width: 36px; height: 22px" viewBox="0 0 22 22">
+<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%" viewBox="0 0 22 22">
     <path d="M10.188 4.65L6 8H5a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1l4.188 3.35a.5.5 0 0 0 .812-.39V5.04a.498.498 0 0 0-.812-.39zM14.446 3.778a1 1 0 0 0-.862 1.804 6.002 6.002 0 0 1-.007 10.838 1 1 0 0 0 .86 1.806A8.001 8.001 0 0 0 19 11a8.001 8.001 0 0 0-4.554-7.222z"></path><path d="M15 11a3.998 3.998 0 0 0-2-3.465v6.93A3.998 3.998 0 0 0 15 11z"></path>
 </svg>

src/style/index.scss

@@ -113,7 +113,7 @@
         right: 0;
         bottom: 0;
         height: 100px;
-        padding: 55px 10px 0;
+        padding: 60px 10px 0;
         opacity: 0;
         visibility: hidden;
         transition: all .2s ease-in-out;
@@ -233,14 +233,64 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            height: 40px;
+            height: 36px;
 
             .art-control {
                 float: left;
                 font-size: 12px;
-                height: 22px;
-                line-height: 22px;
+                height: 36px;
+                line-height: 36px;
                 cursor: pointer;
+                .art-icon {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    float: left;
+                    height: 36px;
+                    width: 36px;
+                    padding: 7px;
+                }
+            }
+
+            .art-control-volume {
+                .art-volume-panel {
+                    position: relative;
+                    float: left;
+                    width: 0;
+                    height: 100%;
+                    transition: margin .2s cubic-bezier(0.4,0.0,1,1),width .2s cubic-bezier(0.4,0.0,1,1);
+                    overflow: hidden;
+                    .art-volume-slider-handle {
+                        position: absolute;
+                        top: 50%;
+                        left: 0;
+                        width: 12px;
+                        height: 12px;
+                        border-radius: 12px;
+                        margin-top: -6px;
+                        background: #fff;
+
+                        &::before {
+                            left: -94px;
+                            background: #fff;
+                        }
+
+                        &::after {
+                            left: 6px;
+                            background: rgba(255,255,255,.2);
+                        }
+
+                        &::before, &::after {
+                            content: '';
+                            position: absolute;
+                            display: block;
+                            top: 50%;
+                            height: 3px;
+                            margin-top: -2px;
+                            width: 100px
+                        }
+                    }
+                }
             }
 
             .art-control-time {

src/utils/index.js

@@ -41,7 +41,7 @@ export function append(parent, child) {
   } else {
     parent.insertAdjacentHTML('beforeend', child);
   }
-  return child;
+  return parent.lastElementChild;
 }
 
 export function setStyle(element, styles) {