From db7a30166f6ef24de84f6a4a6c456ee8a879c049 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Fri, 26 Jul 2019 17:21:36 +0430
Subject: [PATCH] Fixed top rated carousel

---
 src/renderer/layouts/HomePage.vue  |  4 ++--
 src/renderer/layouts/PlayerBar.vue | 23 ++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index e31d356..352bb74 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -132,12 +132,12 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
+<style lang="sass">
 section.page
   padding: 1rem 2.5rem
   overflow-x: hidden
   .VueCarousel-wrapper
-    overflow: unset
+     overflow: unset
 
   .middle-row
     display: flex
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 6cc2340..e56b64c 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -45,14 +45,34 @@ export default {
     this.wavesurfer.on('ready', () => {
       this.duration = formatSeconds(this.getDuration())
     })
+    let currentWidth = 0
+    let hoverStatus = false
+    let hoverWidth = '0px'
+    let isSeek = false
     this.wavesurfer.on('audioprocess', (amount) => {
+      currentWidth = progressWave.style.width
+      if (hoverStatus && !isSeek) {
+        progressWave.style.width = hoverWidth
+      }
+      isSeek = false
       progress.innerHTML = formatSeconds(amount)
     })
     let waves = this.wavesurfer.container.getElementsByTagName('wave')
     let progressWave = waves[1]
     let mainWave = waves[0]
+    mainWave.addEventListener('mouseenter', (e) => {
+      hoverStatus = true
+    })
     mainWave.addEventListener('mousemove', (e) => {
-      progressWave.style.width = e.offsetX + 'px'
+      hoverWidth = e.offsetX + 'px'
+      progressWave.style.width = hoverWidth
+    })
+    mainWave.addEventListener('mouseout', (e) => {
+      hoverStatus = false
+      progressWave.style.width = currentWidth
+    })
+    this.wavesurfer.on('seek', (amount) => {
+      isSeek = true
     })
   },
   data () {
@@ -126,4 +146,5 @@ section.player
         wave
             overflow-x: hidden !important
             cursor: pointer
+            transition: width 200ms ease
 </style>