From f4100bb1051e63aef3f0981469253075ee63628f Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Thu, 25 Jul 2019 22:17:28 +0430
Subject: [PATCH] Wave now changes color as the song accent

---
 src/renderer/layouts/PlayerBar.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 6bfd12d..f3c736f 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/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>
@@ -13,10 +13,11 @@
 
 <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 +28,18 @@ export default {
       height: 64,
       responsive: true
     })
-    wavesurfer.load('/static/demo/music.mp3')
-    wavesurfer.on('ready', function () {
+    this.wavesurfer.load('/static/demo/music.mp3')
+    this.wavesurfer.on('ready', function () {
       // wavesurfer.play()
     })
+  },
+  methods: {
+    onArtworkLoad () {
+      let img = this.$el.getElementsByTagName('img')[0]
+      color(img.src, (_, color) => {
+        this.wavesurfer.setProgressColor(`#${color}`)
+      })
+    }
   }
 }
 </script>