add volume

src/controls/playAndPause.js

@@ -25,11 +25,11 @@ export default class PlayAndPause {
 
     this.art.on('video:playing', () => {
       this.$play.style.display = 'none';
-      this.$pause.style.display = 'inline-block';
+      this.$pause.style.display = 'block';
     });
 
     this.art.on('video:pause', () => {
-      this.$play.style.display = 'inline-block';
+      this.$play.style.display = 'block';
       this.$pause.style.display = 'none';
     });
   }

src/controls/volume.js

@@ -1,6 +1,48 @@
+import { append, setStorage, getStorage } from '../utils';
+import icons from '../icons';
+
 export default class Volume {
   constructor(art, option) {
     this.art = art;
     this.option = option;
+    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.$volumeClose.style.display = 'none';
+
+    proxy(this.$volume, 'click', () => {
+      this.$volume.style.display = 'none';
+      this.$volumeClose.style.display = 'block';
+      setStorage('volume', player.volume());
+      player.volume(0);
+    });
+
+    proxy(this.$volumeClose, 'click', () => {
+      this.$volume.style.display = 'block';
+      this.$volumeClose.style.display = 'none';
+      player.volume(getStorage('volume') || 0.7);
+    });
+
+    proxy(this.option.ref, 'mouseenter', () => {
+      console.log('mouseenter');
+    });
+
+    proxy(this.option.ref, 'mouseleave', () => {
+      console.log('mouseleave');
+    });
+
+    this.art.on('video:volumechange', () => {
+      if (player.volume() === 0) {
+        this.$volume.style.display = 'none';
+        this.$volumeClose.style.display = 'block';
+      } else {
+        this.$volume.style.display = 'block';
+        this.$volumeClose.style.display = 'none';
+      }
+    });
   }
 }

src/icons/index.js

@@ -2,12 +2,16 @@ import loading from './loading.svg';
 import playBig from './play-big.svg';
 import play from './play.svg';
 import pause from './pause.svg';
+import volume from './volume.svg';
+import volumeClose from './volume-close.svg';
 
 const icons = {
   loading,
   playBig,
   play,
-  pause
+  pause,
+  volume,
+  volumeClose
 };
 
 function creatDomFromSvg(map) {

src/icons/volume-close.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="width: 36px; height: 22px" 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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="width: 36px; height: 22px" 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/info.js

@@ -96,7 +96,8 @@ export default class Info {
       method: 'HEAD'
     }).then(data => {
       types.forEach(item => {
-        item.innerHTML = data.headers.get(item.dataset.head) || 'unknown';
+        const value = data.headers.get(item.dataset.head);
+        item.innerHTML = value !== undefined ? value : 'unknown';
       });
     }).catch(() => {
       types.forEach(item => {
@@ -110,7 +111,8 @@ export default class Info {
     this.timer = setTimeout(() => {
       const types = Array.from($infoPanel.querySelectorAll('[data-video]'));
       types.forEach(item => {
-        item.innerHTML = $video[item.dataset.video] || 'unknown';
+        const value = $video[item.dataset.video];
+        item.innerHTML = value !== undefined ? value : 'unknown';
       });
       this.loop();
     }, 1000);

src/player.js

@@ -127,12 +127,12 @@ export default class Player {
 
   volume(percentage) {
     const { refs: { $video }, i18n, notice } = this.art;
-    if (percentage) {
+    if (percentage !== undefined) {
       $video.volume = clamp(percentage, 0, 1);
       notice.show(`${i18n.get('Volume')}: ${parseInt($video.volume * 100)}`);
       this.art.emit('volume', $video.volume);
     }
-    return $video.volume;
+    return $video.volume || 0;
   }
 
   currentTime() {

src/style/index.scss

@@ -232,22 +232,19 @@
             pointer-events: all;
             display: flex;
             align-items: center;
+            justify-content: space-between;
             height: 40px;
 
             .art-control {
+                float: left;
+                font-size: 12px;
                 height: 22px;
                 line-height: 22px;
-                float: left;
                 cursor: pointer;
-                font-size: 12px;
             }
 
-            .artplayer-controls-left {
-
-            }
-
-            .artplayer-controls-right {
-                
+            .art-control-time {
+                padding: 0 10px;
             }
         }
     }

src/utils/index.js

@@ -79,3 +79,15 @@ export function deepMerge(...sources) {
   }
   return returnValue;
 }
+
+export function getStorage(key) {
+  const storage = JSON.parse(localStorage.getItem('artplayer_settings')) || {};
+  return key ? storage[key] : storage;
+}
+
+export function setStorage(key, value) {
+  const storage = Object.assign({}, getStorage(), {
+    [key]: value
+  });
+  localStorage.setItem('artplayer_settings', JSON.stringify(storage));
+}