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] 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()
     }
   }
 }