diff --git a/package-lock.json b/package-lock.json index a901790..70b2d57 100644 --- a/package-lock.json +++ b/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=", - "dev": true + "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=" }, "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", diff --git a/package.json b/package.json index f629aa9..df6206a 100644 --- a/package.json +++ b/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", diff --git a/src/renderer/components/MusicBox.vue b/src/renderer/components/MusicBox.vue index 2638c9c..9d9c942 100644 --- a/src/renderer/components/MusicBox.vue +++ b/src/renderer/components/MusicBox.vue @@ -1,8 +1,8 @@ @@ -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)` }) } } diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue index 365e516..c764a7f 100644 --- a/src/renderer/layouts/HomePage.vue +++ b/src/renderer/layouts/HomePage.vue @@ -2,7 +2,7 @@
- +
@@ -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' + } + ] } } } diff --git a/static/demo/clever.jpg b/static/demo/clever.jpg new file mode 100644 index 0000000..e34538f Binary files /dev/null and b/static/demo/clever.jpg differ diff --git a/static/demo/habiba.jpg b/static/demo/habiba.jpg new file mode 100644 index 0000000..bd0c73c Binary files /dev/null and b/static/demo/habiba.jpg differ diff --git a/static/demo/starboy.png b/static/demo/starboy.png new file mode 100644 index 0000000..fd32de2 Binary files /dev/null and b/static/demo/starboy.png differ diff --git a/static/demo/test-drive.png b/static/demo/test-drive.png new file mode 100644 index 0000000..5a07d76 Binary files /dev/null and b/static/demo/test-drive.png differ