From f345ebd82c1b9442de84abe0e088fdbc9ca3570e Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Wed, 24 Jul 2019 21:10:41 +0430
Subject: [PATCH] Changed MusicBox to circular shape and made the visualizer
 responsive

---
 src/renderer/components/MusicBox.vue |  3 ++-
 src/renderer/layouts/PlayerBar.vue   | 11 +++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/MusicBox.vue b/src/renderer/components/MusicBox.vue
index 13bc03d..6657e14 100644
--- a/src/renderer/components/MusicBox.vue
+++ b/src/renderer/components/MusicBox.vue
@@ -26,7 +26,7 @@ export default {
 div.music-box
     width: 140px
     img
-        border-radius: 4px
+        border-radius: 100%
         width: 100%
         height: auto
         box-shadow: 0px 10px 60px -2px rgba(0,0,0,0.60)
@@ -36,6 +36,7 @@ div.music-box
         white-space: nowrap
         overflow: hidden
         margin: 0.5rem 0
+        text-align: center
         &.title
             font-size: .9rem
         &.artist
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 5a27d73..a7a7be4 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <section>
+    <section class="player">
         <img class="artwork" src="/static/demo/artwork.jpg" />
         <div>
             <p class="title">Perfidia</p>
@@ -24,7 +24,8 @@ export default {
       barHeight: 1,
       barGap: null,
       autoCenter: true,
-      height: 64
+      height: 64,
+      responsive: true
     })
     wavesurfer.load('/static/demo/music.mp3')
     wavesurfer.on('ready', function () {
@@ -34,8 +35,8 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
-section
+<style lang="sass">
+section.player
     display: flex
     align-items: center
     border-top: 1px solid rgba(0,0,0,0.1)
@@ -52,4 +53,6 @@ section
     .visualizer
         flex-grow: 1
         height: 64px
+        wave
+            overflow-x: hidden !important
 </style>