Merge pull request #17 from nikandlv/development

PlayerBar update

package-lock.json

@@ -463,6 +463,11 @@
       "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU=",
       "dev": true
     },
+    "abortcontroller-polyfill": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.3.0.tgz",
+      "integrity": "sha512-lbWQgf+eRvku3va8poBlDBO12FigTQr9Zb7NIjXrePrhxWVKdCP2wbDl1tLDaYa18PWTom3UEWwdH13S46I+yA=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -16986,6 +16991,11 @@
         "neo-async": "^2.5.0"
       }
     },
+    "wavesurfer.js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-3.0.0.tgz",
+      "integrity": "sha512-DANu206c6gb9pSUbYFevsSiXMy8+Ri+CNtqm0UsouUdsn9fVQRtYs8uxzBtXK+rUPlIc6FlO54DU8uWeW3lDzw=="
+    },
     "wbuf": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",

package.json

@@ -56,6 +56,7 @@
     }
   },
   "dependencies": {
+    "abortcontroller-polyfill": "^1.3.0",
     "axios": "^0.18.0",
     "dominant-color": "0.0.1",
     "normalize-scss": "^7.0.1",
@@ -66,7 +67,8 @@
     "vue-electron": "^1.0.6",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",
-    "vuex-electron": "^1.0.0"
+    "vuex-electron": "^1.0.0",
+    "wavesurfer.js": "^3.0.0"
   },
   "devDependencies": {
     "ajv": "^6.5.0",

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

src/renderer/layouts/PlayerBar.vue

@@ -1,18 +1,58 @@
 <template>
-    <section>
-        Player
+    <section class="player">
+        <img class="artwork" src="/static/demo/artwork.jpg" />
+        <div>
+            <p class="title">Perfidia</p>
+            <p class="artist">Nat King Cole</p>
+        </div>
+        <div class="visualizer">
+            <div id="visualizer"></div>
+        </div>
     </section>
 </template>
 
 <script>
+import WaveSurfer from 'wavesurfer.js'
 export default {
-  name: 'PlayerBar'
+  name: 'PlayerBar',
+  mounted () {
+    const wavesurfer = WaveSurfer.create({
+      container: '#visualizer',
+      waveColor: '#c3c3c3',
+      progressColor: '#336cfb',
+      barWidth: 2,
+      barHeight: 1,
+      barGap: null,
+      autoCenter: true,
+      height: 64,
+      responsive: true
+    })
+    wavesurfer.load('/static/demo/music.mp3')
+    wavesurfer.on('ready', function () {
+      // wavesurfer.play()
+    })
+  }
 }
 </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)
-    height: 4.5rem
+    height: 84px
+    img.artwork
+        height: 100%
+        width: auto
+        border-radius: 2px
+    p.title,p.artist
+        font-size: .8rem
+        margin: 8px 10px
+    p.artist
+        color: lighten(black,45)
+    .visualizer
+        flex-grow: 1
+        height: 64px
+        wave
+            overflow-x: hidden !important
 </style>

src/renderer/main.js

@@ -1,3 +1,4 @@
+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
 import Vue from 'vue'
 import axios from 'axios'