Merge pull request #18 from nikandlv/development

Wavesurfer drive layer and player layout

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>
@@ -8,15 +8,22 @@
         <div class="visualizer">
             <div id="visualizer"></div>
         </div>
+        <div class="control-buttons">
+            <div class="play-pause-button" @click="togglePlay">
+                <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>
 </template>
 
 <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 +34,51 @@ export default {
       height: 64,
       responsive: true
     })
-    wavesurfer.load('/static/demo/music.mp3')
-    wavesurfer.on('ready', function () {
-      // wavesurfer.play()
+    this.wavesurfer.load('/static/demo/music.mp3')
+  },
+  data () {
+    return {
+      playingStatus: false
+    }
+  },
+  methods: {
+    onArtworkLoad () {
+      let img = this.$el.getElementsByTagName('img')[0]
+      color(img.src, (_, color) => {
+        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()
+    },
+    skip (offset) {
+      this.wavesurfer.skip(offset)
+    },
+    getVolume () {
+      this.wavesurfer.getVolume()
+    },
+    setVolume (volume) {
+      this.wavesurfer.setVolume(volume)
+    },
+    togglePlay () {
+      this.wavesurfer.playPause()
+      this.playingStatus = this.isPlaying()
+    }
   }
 }
 </script>
@@ -40,11 +88,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