From f83406447f7c7f87ab5d1615aad8f03c50393c3d Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 22:05:52 +0430
Subject: [PATCH 1/6] Removed PlayerBar artwork border-radius and changed the
 height of playerbar

---
 src/renderer/layouts/PlayerBar.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index a7a7be4..6bfd12d 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -40,11 +40,10 @@ section.player
     display: flex
     align-items: center
     border-top: 1px solid rgba(0,0,0,0.1)
-    height: 84px
+    height: 5rem
     img.artwork
         height: 100%
         width: auto
-        border-radius: 2px
     p.title,p.artist
         font-size: .8rem
         margin: 8px 10px

From f4100bb1051e63aef3f0981469253075ee63628f Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 22:17:28 +0430
Subject: [PATCH 2/6] Wave now changes color as the song accent

---
 src/renderer/layouts/PlayerBar.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 6bfd12d..f3c736f 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -1,6 +1,6 @@
 <template>
     <section class="player">
-        <img class="artwork" src="/static/demo/artwork.jpg" />
+        <img @load="onArtworkLoad" class="artwork" src="/static/demo/starboy.png" />
         <div>
             <p class="title">Perfidia</p>
             <p class="artist">Nat King Cole</p>
@@ -13,10 +13,11 @@
 
 <script>
 import WaveSurfer from 'wavesurfer.js'
+import color from 'dominant-color'
 export default {
   name: 'PlayerBar',
   mounted () {
-    const wavesurfer = WaveSurfer.create({
+    this.wavesurfer = WaveSurfer.create({
       container: '#visualizer',
       waveColor: '#c3c3c3',
       progressColor: '#336cfb',
@@ -27,10 +28,18 @@ export default {
       height: 64,
       responsive: true
     })
-    wavesurfer.load('/static/demo/music.mp3')
-    wavesurfer.on('ready', function () {
+    this.wavesurfer.load('/static/demo/music.mp3')
+    this.wavesurfer.on('ready', function () {
       // wavesurfer.play()
     })
+  },
+  methods: {
+    onArtworkLoad () {
+      let img = this.$el.getElementsByTagName('img')[0]
+      color(img.src, (_, color) => {
+        this.wavesurfer.setProgressColor(`#${color}`)
+      })
+    }
   }
 }
 </script>

From bf101c1ea921b87459d80600e01ac788a4bdbaba Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 22:43:13 +0430
Subject: [PATCH 3/6] Added play/pause icon functionality with simple button
 style

---
 src/renderer/layouts/PlayerBar.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index f3c736f..98789c7 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -8,6 +8,12 @@
         <div class="visualizer">
             <div id="visualizer"></div>
         </div>
+        <div class="control-buttons">
+            <div class="play-pause-button" @click="togglePlay">
+                <svg v-show="!isPlaying" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
+                <svg v-show="isPlaying" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
+            </div>
+        </div>
     </section>
 </template>
 
@@ -29,9 +35,11 @@ export default {
       responsive: true
     })
     this.wavesurfer.load('/static/demo/music.mp3')
-    this.wavesurfer.on('ready', function () {
-      // wavesurfer.play()
-    })
+  },
+  data () {
+    return {
+      isPlaying: false
+    }
   },
   methods: {
     onArtworkLoad () {
@@ -39,6 +47,14 @@ export default {
       color(img.src, (_, color) => {
         this.wavesurfer.setProgressColor(`#${color}`)
       })
+    },
+    togglePlay () {
+      if (this.isPlaying) {
+        this.wavesurfer.pause()
+      } else {
+        this.wavesurfer.play()
+      }
+      this.isPlaying = typeof this.wavesurfer === 'undefined' ? false : this.wavesurfer.isPlaying()
     }
   }
 }

From d41f96bfee2ceaace6e7ac39d0e97377682f964a Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 22:48:53 +0430
Subject: [PATCH 4/6] Added general layer for wavesurfer

---
 src/renderer/layouts/PlayerBar.vue | 32 +++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 98789c7..e3c97bd 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -10,8 +10,8 @@
         </div>
         <div class="control-buttons">
             <div class="play-pause-button" @click="togglePlay">
-                <svg v-show="!isPlaying" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
-                <svg v-show="isPlaying" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
+                <svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
+                <svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
             </div>
         </div>
     </section>
@@ -38,7 +38,7 @@ export default {
   },
   data () {
     return {
-      isPlaying: false
+      playingStatus: false
     }
   },
   methods: {
@@ -48,13 +48,27 @@ export default {
         this.wavesurfer.setProgressColor(`#${color}`)
       })
     },
+    play () {
+      this.wavesurfer.play()
+    },
+    pause () {
+      this.wavesurfer.pause()
+    },
+    stop () {
+      this.wavesurfer.stop()
+    },
+    toggleMute () {
+      this.wavesurfer.toggleMute()
+    },
+    setPlaybackRate (rate) {
+      this.wavesurfer.setPlaybackRate(rate)
+    },
+    isPlaying () {
+      return typeof this.wavesurfer === 'undefined' ? false : this.wavesurfer.isPlaying()
+    },
     togglePlay () {
-      if (this.isPlaying) {
-        this.wavesurfer.pause()
-      } else {
-        this.wavesurfer.play()
-      }
-      this.isPlaying = typeof this.wavesurfer === 'undefined' ? false : this.wavesurfer.isPlaying()
+      this.wavesurfer.playPause()
+      this.playingStatus = this.isPlaying()
     }
   }
 }

From 3ba4e31bb4213eb21007279d41a75952fc0898e1 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 22:49:57 +0430
Subject: [PATCH 5/6] Added skip function to wavesurfer driver layer

---
 src/renderer/layouts/PlayerBar.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index e3c97bd..6ee6ac4 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -66,6 +66,9 @@ export default {
     isPlaying () {
       return typeof this.wavesurfer === 'undefined' ? false : this.wavesurfer.isPlaying()
     },
+    skip (offset) {
+      this.wavesurfer.skip(offset)
+    }
     togglePlay () {
       this.wavesurfer.playPause()
       this.playingStatus = this.isPlaying()

From a847ca31bcaff1be3a600a591f23b074de9a0a2d Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 22:51:56 +0430
Subject: [PATCH 6/6] Added volume control and added missing semi colon

---
 src/renderer/layouts/PlayerBar.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 6ee6ac4..c624840 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -68,7 +68,13 @@ export default {
     },
     skip (offset) {
       this.wavesurfer.skip(offset)
-    }
+    },
+    getVolume () {
+      this.wavesurfer.getVolume()
+    },
+    setVolume (volume) {
+      this.wavesurfer.setVolume(volume)
+    },
     togglePlay () {
       this.wavesurfer.playPause()
       this.playingStatus = this.isPlaying()