Merge pull request #15 from nikandlv/development

Added MusicBox and dependencies for color selection

README.md

@@ -38,4 +38,6 @@ npm run lint
 
 ---
 
+> Jukebox does not use a UI framework, Every component is written for the project
+
 This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).

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",
@@ -5108,6 +5113,15 @@
         "domelementtype": "1"
       }
     },
+    "dominant-color": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/dominant-color/-/dominant-color-0.0.1.tgz",
+      "integrity": "sha1-jRMh7scWNdm1bLdCznU2NFXq1tQ=",
+      "requires": {
+        "imagemagick": "^0.1.3",
+        "rgb-hex": "^1.0.0"
+      }
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -7828,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",
@@ -8849,6 +8872,11 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
+    "imagemagick": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/imagemagick/-/imagemagick-0.1.3.tgz",
+      "integrity": "sha1-dIPOoJO02fLi85aFetyIIbU3xWo="
+    },
     "import-lazy": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
@@ -10969,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",
@@ -13018,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",
@@ -14157,6 +14192,11 @@
       "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
       "dev": true
     },
+    "rgb-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-1.0.0.tgz",
+      "integrity": "sha1-v6+M2c2RZLWibXHrTxWgllMks8E="
+    },
     "rgb2hex": {
       "version": "0.1.9",
       "resolved": "https://registry.npmjs.org/rgb2hex/-/rgb2hex-0.1.9.tgz",
@@ -16667,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

@@ -57,8 +57,10 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "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

@@ -0,0 +1,44 @@
+<template>
+    <div class="music-box">
+        <img @load="onLoad" :src="item.artwork" alt="Artwork">
+        <p class="title">{{item.title}}</p>
+        <p class="artist">{{item.artist}}</p>
+    </div>
+</template>
+
+<script>
+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 55px 5px rgba(${color[0]},${color[1]},${color[2]},0.60)`
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="sass">
+div.music-box
+    width: 150px
+    img
+        border-radius: 4px
+        width: 100%
+        height: auto
+        box-shadow: 0px 10px 60px -2px rgba(0,0,0,0.60)
+        transition: box-shadow 500ms
+    p
+        text-overflow: ellipsis
+        white-space: nowrap
+        overflow: hidden
+        margin: 0.5rem 0
+        &.title
+            font-size: .9rem
+        &.artist
+            font-size: 0.8rem
+            color: lighten(black,50)
+</style>

src/renderer/layouts/ActionBar.vue

@@ -36,8 +36,8 @@ export default {
 <style lang="sass" scoped>
 section.action-bar
   display: flex
-  padding: 1rem 2.5rem
   align-items: center
+  padding-bottom: 1rem
   .search-wrapper
     transition: width 200ms
     transition: margin-top 100ms

src/renderer/layouts/HomePage.vue

@@ -1,18 +1,47 @@
 <template>
-    <section>
+    <section class="page">
       <ActionBar />
-      <p>home</p>
+      <div>
+        <MusicBox v-for="item in top" :key="item.id" :item="item" />
+      </div>
     </section>
 </template>
 
 <script>
 import ActionBar from './ActionBar'
+import MusicBox from '../components/MusicBox'
 export default {
   name: 'HomePage',
-  components: {ActionBar}
+  components: { ActionBar, MusicBox },
+  data: () => {
+    return {
+      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'
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style>
+<style scoped lang="sass">
+section.page
+    padding: 1rem 2.5rem
 
 </style>