From f63f0b41ace946c0eea6d62b37866a3367c565f8 Mon Sep 17 00:00:00 2001
From: NoisyBoy-9 <sina.shariati@yahoo.com>
Date: Fri, 26 Jul 2019 18:14:07 +0430
Subject: [PATCH] added dominant color to ListItem component

---
 src/renderer/components/ListItem.vue | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/ListItem.vue b/src/renderer/components/ListItem.vue
index 0f8c9c8..68ed894 100644
--- a/src/renderer/components/ListItem.vue
+++ b/src/renderer/components/ListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <li>
       <div class="song">
-        <img :src="item.artwork" alt="Artwork">  
+        <img @load="onLoad" :src="item.artwork" alt="Artwork">  
         {{item.title}}
       </div>
 
@@ -16,9 +16,21 @@
 </template>
 
 <script>
+import color from 'dominant-color'
 export default {
   name: 'ListItem',
-  props: ['item']
+  props: ['item'],
+
+  methods: {
+    onLoad () {
+      let img = this.$el.getElementsByTagName('img')[0]
+      let list = this.$el.getElementsByTagName('li')[0]
+
+      color(img.src, {format: 'hex'}, (_, color) => {
+        list.style.backgroundColor = `#${color}`
+      })
+    }
+  }
 }
 </script>
 
@@ -34,6 +46,12 @@ li
     display: flex
     align-items: center
     flex: 1 0 50%
+    
+    img
+      width: 4rem
+      height: 4rem
+      margin-right: .6rem
+      border-radius: 50%
 
   div.artist
     display: flex
@@ -46,10 +64,5 @@ li
     justify-content: center
     flex: 1 0 15%
 
-  img
-    width: 4rem
-    height: 4rem
-    margin-right: .6rem
-    border-radius: 10rem
 </style>