Standardized the MusicBox

package-lock.json

@@ -5087,6 +5087,11 @@
         "entities": "^1.1.1"
       }
     },
+    "dom-walk": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
+      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -7837,6 +7842,15 @@
         "is-glob": "^2.0.0"
       }
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "global-dirs": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
@@ -10983,6 +10997,14 @@
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz",
@@ -13032,8 +13054,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
-      "dev": true
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -16686,6 +16707,23 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-carousel": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz",
+      "integrity": "sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==",
+      "requires": {
+        "global": "^4.3.2",
+        "regenerator-runtime": "^0.12.1",
+        "vue": "^2.5.17"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "vue-custom-scrollbar": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/vue-custom-scrollbar/-/vue-custom-scrollbar-1.1.0.tgz",

package.json

@@ -60,6 +60,7 @@
     "dominant-color": "0.0.1",
     "normalize-scss": "^7.0.1",
     "vue": "^2.5.16",
+    "vue-carousel": "^0.18.0",
     "vue-custom-scrollbar": "^1.1.0",
     "vue-electron": "^1.0.6",
     "vue-router": "^3.0.1",

src/renderer/components/MusicBox.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="music-box">
-        <img @load="onLoad" src="/static/demo/artwork-5.png" alt="Artwork">
+        <img @load="onLoad" :src="item.artwork" alt="Artwork">
-        <p class="title">Don't Hide - single</p>
+        <p class="title">{{item.title}}</p>
-        <p class="artist">Mike Perry & Willie Willie Willie</p>
+        <p class="artist">{{item.artist}}</p>
     </div>
 </template>
 
@@ -10,11 +10,12 @@
 import color from 'dominant-color'
 export default {
   name: 'MusicBox',
+  props: ['item'],
   methods: {
     onLoad () {
       let img = this.$el.getElementsByTagName('img')[0]
       color(img.src, {format: 'rgb'}, (_, color) => {
-        img.style['boxShadow'] = `0px 10px 60px 2px rgba(${color[0]},${color[1]},${color[2]},0.60)`
+        img.style['boxShadow'] = `0px 10px 55px 5px rgba(${color[0]},${color[1]},${color[2]},0.60)`
       })
     }
   }

src/renderer/layouts/HomePage.vue

@@ -2,7 +2,7 @@
     <section class="page">
       <ActionBar />
       <div>
-        <MusicBox />
+        <MusicBox v-for="item in top" :key="item.id" :item="item" />
       </div>
     </section>
 </template>
@@ -15,7 +15,26 @@ export default {
   components: { ActionBar, MusicBox },
   data: () => {
     return {
-      top: []
+      top: [
+        {
+          id: 0,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 1,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 2,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
+        }
+      ]
     }
   }
 }