added 2.0.0 adjustments, fixed download issues

package-lock.json

@@ -5244,7 +5244,8 @@
     "eventemitter3": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
-      "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ=="
+      "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==",
+      "dev": true
     },
     "events": {
       "version": "3.1.0",
@@ -5706,6 +5707,7 @@
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.11.0.tgz",
       "integrity": "sha512-KZm0V+ll8PfBrKwMzdo5D13b1bur9Iq9Zd/RMmAoQQcl2PxxFml8cxXPaaPYVbV0RjNjq1CU7zIzAOqtUPudmA==",
+      "dev": true,
       "requires": {
         "debug": "^3.0.0"
       },
@@ -5714,6 +5716,7 @@
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -6972,6 +6975,7 @@
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
       "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
       "requires": {
         "eventemitter3": "^4.0.0",
         "follow-redirects": "^1.0.0",
@@ -7017,7 +7021,6 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -8520,6 +8523,26 @@
       "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
       "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M="
     },
+    "needle": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.5.0.tgz",
+      "integrity": "sha512-o/qITSDR0JCyCKEQ1/1bnUXMmznxabbwi/Y4WwJElf+evwJNFNwIDMCCt5IigFVxgeGBJESLohGtIS9gEzo1fA==",
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -10606,7 +10629,8 @@
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
+      "dev": true
     },
     "resolve": {
       "version": "1.16.0",
@@ -10756,8 +10780,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sanitize-filename": {
       "version": "1.6.3",
@@ -10771,8 +10794,7 @@
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
     "schema-utils": {
       "version": "2.6.5",

package.json

@@ -23,6 +23,7 @@
     "glob": "^7.1.6",
     "moment": "^2.26.0",
     "ncp": "^2.0.0",
+    "needle": "^2.5.0",
     "rimraf": "^3.0.2",
     "uniqid": "^5.2.0",
     "vue": "^2.6.11",

src/App.vue

@@ -271,6 +271,39 @@
             }
         }
     }
+    input[type='range'] {
+        overflow: hidden;
+        width: 100%;
+        outline: none;
+        -webkit-appearance: none;
+        background-color: #ddd;
+    }
+    input[type='range']::-webkit-slider-runnable-track {
+        height: 10px;
+        -webkit-appearance: none;
+        color: #13bba4;
+        margin-top: -1px;
+    }
+    input[type='range']::-webkit-slider-thumb {
+        width: 10px;
+        -webkit-appearance: none;
+        height: 10px;
+        cursor: ew-resize;
+        background: #000;
+        box-shadow: -800px 0 0 800px rgb(226, 44, 120);
+    }
+    /** FF*/
+    input[type="range"]::-moz-range-progress {
+        background-color: rgb(226, 44, 120); 
+    }
+    input[type="range"]::-moz-range-track {  
+        background-color: #ddd;
+    }
+    /* IE*/
+    input[type="range"]::-ms-fill-lower {
+        background-color: rgb(226, 44, 120); 
+    }
+
     .fade-enter-active, .fade-leave-active {
         transition: opacity .2s;
     }

src/background.js

@@ -2,7 +2,7 @@ const { app, protocol, BrowserWindow, ipcMain, dialog } = require('electron');
 const { createProtocol } = require('vue-cli-plugin-electron-builder/lib');
 const isDevelopment = process.env.NODE_ENV !== 'production';
 const fs = require('fs');
-const http = require('http');
+const https = require('https');
 const path = require('path');
 const uniqid = require('uniqid');
 
@@ -160,7 +160,7 @@ ipcMain.on("getDeeplink", (event) => {
 function download(url, fileName, cb) {
     let dest = path.join(app.getPath('temp'), fileName + ".zip");
     let file = fs.createWriteStream(dest);
-    let request = http.get(url, function(response) {
+    let request = https.get(url, function(response) {
         response.pipe(file);
         file.on('finish', function() {
             file.close(cb(null, dest)); // async call of the callback

src/components/Navigation/Navigation.vue

@@ -107,7 +107,7 @@
                 left: 0px;
                 bottom: 0px;
                 right: 0px;
-                background: linear-gradient(135deg, #fd2f85, #7a34ec);
+                background: rgb(226, 44, 120);
                 opacity: 0;
                 z-index: 0;
             }

src/components/Song/SongItem.vue

@@ -50,7 +50,9 @@
         },
         methods: {
             showContextMenu: function(e) {
-                e.preventDefault();
+                if(e != undefined) {
+                    e.preventDefault();
+                }
 
                 this.$root.$emit('showContextMenu', {
                     x: e.pageX,
@@ -62,14 +64,18 @@
                     ]});
             },
             shortDownload: function(e) {
-                e.preventDefault();
+                if(e != undefined) {
+                    e.preventDefault();
+                }
 
                 if(e.which == 2) {
                     this.download(e);
                 }
             },
             download: function(e) {
-                e.preventDefault();
+                if(e != undefined) {
+                    e.preventDefault();
+                }
 
                 this.$root.$emit('download', {id: this.$props.id, cover: this.$props.cover, title: this.$props.title, artist: this.$props.artist, downloadPath: this.$props.zip});
             }

src/views/SongDetail.vue

 <template>
     <section :class="!apiFinished ? 'section-song-detail-loading' : 'section-song-detail'">
+        <div class="song-detail-background" v-if="apiFinished" :style="'background-image: url(' + cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'">
+            <div class="song-detail-background-cover"></div>
+        </div>
         <div class="song-detail" v-if="apiFinished">
             <div class="song-meta">
                 <div class="cover" :style="'background-image: url(' + cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'"></div>
@@ -222,12 +225,32 @@
         grid-template-columns: 500px 1fr;
         grid-gap: 25px;
         padding: 50px;
+
+        & .song-detail-background {
+            background-position: center;
+            background-size: cover;
+            position: absolute;
+            top: 0px;
+            left: 60px;
+            right: 0px;
+            height: 300px;
+            z-index: -1;
+
+            & .song-detail-background-cover {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                bottom: 0px;
+                right: 0px;
+                background: linear-gradient(180deg, rgba(33,38,41,0.7) 0%, rgba(33,38,41,1) 100%);
+            }
+        }
         
         & .song-detail {
             & .song-meta {
                 display: grid;
                 grid-template-columns: auto 1fr;
-                background: rgba(255,255,255,0.1);
+                background: #383C3F;
                 border-radius: 4px;
                 overflow: hidden;
 
@@ -267,14 +290,15 @@
                 transition: all 0.2s ease-in-out;
                 border-radius: 4px;
                 overflow: hidden;
+                background: #fff;
 
                 & .action, & .action-player {
-                    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
+                    background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
                     width: 25%;
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    color: #fff;
+                    color: #222;
                     text-decoration: none;
                     transition: all 0.2s ease-in-out;
                     cursor: pointer;
@@ -366,33 +390,37 @@
                 }
             }
             & .song-description {
-                background: rgba(255,255,255,0.1);
+                background: #383C3F;
                 border-radius: 4px;
                 margin-top: 25px;
                 display: grid;
-                grid-gap: 0px;
+                grid-gap: 20px;
+                padding: 20px;
 
                 & .text {
                     line-height: 1.5em;
-                    padding: 20px;
                     opacity: 0.7;
                 }
                 & .tags {
-                    padding: 20px;
+                    display: flex;
+                    flex-wrap: wrap;
 
                     & .tag {
+                        display: block;
                         margin-right: 10px;
-                        background: #fff;
-                        color: #000;
-                        border-radius: 50px;
-                        padding: 7px 14px;
+                        margin-bottom: 10px;
+                        color: #fff;
+                        background: rgba(255,255,255,0.2);
+                        padding: 4px 8px;
+                        border-radius: 4px;
                         font-size: 12px;
                         text-decoration: none;
-                        transition: 0.2s ease-in-out opacity;
+                        transition: 0.2s ease-in-out all;
 
                         &:hover {
                             cursor: pointer;
-                            opacity: 0.6;
+                            color: #222;
+                            background: #fff;
                         }
                     }
                 }
@@ -410,27 +438,26 @@
                     padding: 15px 40px;
                     border-top-left-radius: 4px;
                     border-top-right-radius: 4px;
-                    opacity: 0.4;
-                    background: rgba(0,0,0,0.4);
+                    background: #1C2022;
+                    color: rgba(255,255,255,0.4);
                     transition: 0.2s ease-in-out all;
-                    color: #fff;
                     text-decoration: none;
 
                     &:not(.active):hover {
                         cursor: pointer;
-                        opacity: 0.75;
-                    }
-                    &.active {
+                        background: #272c2e;
+                        color: rgba(255,255,255,0.75);
                     }
 
                     &.router-link-exact-active {
-                        opacity: 1;
-                        background: rgba(255,255,255,0.1);
+                    opacity: 1;
+                    color: rgba(255,255,255,1);
+                    background: #383C3F;
                     }
                 }
             }
             & .tab {
-                background: rgba(255,255,255,0.1);
+                background: #383C3F;
                 border-radius: 4px;
                 border-top-left-radius: 0px;
                 padding: 20px;