added loading bar

src/background.js

@@ -163,18 +163,18 @@ function download(url, fileName, cb) {
 
     let request = https.get(url, function(response) {
     
-    var partiallength = 0
-    var totallength = parseInt(response.headers['content-length'], 10);
+    var partiallength = 0 //sets partiallength to 0
+    var totallength = parseInt(response.headers['content-length'], 10); //sets totallength of file
 
         response.on("data", function(chunk) {
-          partiallength += chunk.length
+          partiallength += chunk.length //adds each time
           if (partiallength / totallength != 1) {
-            win.setProgressBar(partiallength / totallength)
+            win.setProgressBar(partiallength / totallength) //sets progress bar to decimal
           }
           else {
-            win.setProgressBar(0)
+            win.setProgressBar(0) //sets progress bar to blank when done
           }
-          ipcMain.emit("downloadProgress", partiallength / totallength)
+          ipcMain.emit("downloadProgress", partiallength / totallength) //emits decimal for download
         });
 
         response.pipe(file);

src/components/Overlays/DownloadOverlay.vue

@@ -11,19 +11,21 @@
 
         <div class="download-list">
             <div class="download-item" v-for="(item,index) in downloadQueue">
+                <div class="download-item-grid">
                 <div class="cover" :style="'background-image: url(' + item.cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'"></div>
-                <div class="meta">
-                    <div class="title">{{ item.title }}</div>
-                    <div class="artist">{{ item.artist }}</div>
-                    <div class="progress-bar" v-if="index == 0"></div>
+                    <div class="meta">
+                        <div class="title">{{ item.title }}</div>
+                        <div class="artist">{{ item.artist }}</div>
+                    </div>
                 </div>
+                <div class="progress-bar" v-if="index == 0" :style="{ width: downloadProgress * 100 + 'px' }"></div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-    import { remote } from 'electron';
+    import { remote, ipcMain } from 'electron';
     const { shell } = remote;
 
     export default {
@@ -99,47 +101,50 @@
             margin-bottom: 25px;
 
             & .download-item {
-                display: grid;
-                grid-template-columns: 50px 1fr;
-                grid-gap: 10px;
                 background: rgba(255,255,255,0.1);
-                margin-bottom: 5px;
+                margin-bottom: 2px;
                 padding: 10px;
                 border-radius: 5px;
 
-                & .cover {
-                    width: 50px;
-                    height: 50px;
-                    background-position: center;
-                    background-size: cover;
-                    border-radius: 5px;
-                }
 
-                & .meta {
-                    align-self: center;
-                    overflow: hidden;
+                & .download-item-grid{
+                    display: grid;
+                    grid-template-columns: 50px 1fr;
+                    grid-gap: 10px;
 
-                    & .title {
-                        font-weight: bold;
-                        overflow: hidden;
-                        white-space: nowrap;
+                    & .cover {
+                        width: 50px;
+                        height: 50px;
+                        background-position: center;
+                        background-size: cover;
+                        border-radius: 5px;
                     }
-                    & .artist {
-                        margin-top: 5px;
-                        opacity: 0.6;
-                        overflow: hidden;
-                        white-space: nowrap;
-                    }
-                    & .progress-bar{
-                        opacity: 1;
-                        color: green;
-                        background: green !important;
+
+                    & .meta {
                         align-self: center;
-                        z-index: 100;
-                        height: 100%;
-                        width: 100%;
+                        overflow: hidden;
+
+                        & .title {
+                            font-weight: bold;
+                            overflow: hidden;
+                            white-space: nowrap;
+                        }
+                        & .artist {
+                            margin-top: 5px;
+                            opacity: 0.6;
+                            overflow: hidden;
+                            white-space: nowrap;
+                        }
                     }
                 }
+
+                & .progress-bar{
+                    border-radius: 5px;
+                    margin-top: 6px;
+                    background: #e22c78;
+                    height: 3px;
+                    width: 100%;
+                }
             }
         }
     }

src/modules/module.api.js

@@ -2,7 +2,7 @@ const axios = require('axios');
 
 class SSAPI {
     constructor(isDev) {
-        if(isDev) {
+        if(!isDev) {
             this.apiBase = "http://localhost/www/spinshare/server/public/index.php/api/";
         } else {
             this.apiBase = "https://spinsha.re/api/";