Merge branch 'vue-rewrite-download-progree' into 'vue-rewrite'

Vue rewrite download progress

See merge request spinshare/client!32

src/background.js

@@ -161,9 +161,26 @@ ipcMain.on("getDeeplink", (event) => {
 function download(url, fileName, cb) {
     let dest = path.join(app.getPath('temp'), fileName + ".zip");
     let file = fs.createWriteStream(dest);
+    var partiallength = 0 //sets partiallength to 0
+
     if(new URL(url).protocol == "https:") {
       let request = https.get(url, function(response) {
           response.pipe(file);
+
+          var totallength = parseInt(response.headers['content-length'], 10); //sets totallength of file
+          response.on("data", function(chunk) {
+            partiallength += chunk.length //adds each time
+            let decimallength = partiallength / totallength
+            if (decimallength != 1) {
+              win.setProgressBar(decimallength) //sets progress bar to decimal
+              win.webContents.send("downloadProgress", decimallength)
+            }
+            else {
+              win.setProgressBar(0) //sets progress bar to blank when done
+              win.webContents.send("downloadProgress", 0)
+            }
+          });
+
           file.on('finish', function() {
               file.close(cb(null, dest)); // async call of the callback
           });
@@ -171,9 +188,25 @@ function download(url, fileName, cb) {
           fs.unlink(dest); // Delete the file async. (But we don't check the result)
           if (cb) cb(err.message, dest);
       });
+
     } else {
       let request = http.get(url, function(response) {
           response.pipe(file);
+
+          var totallength = parseInt(response.headers['content-length'], 10); //sets totallength of file
+          response.on("data", function(chunk) {
+            partiallength += chunk.length //adds each time
+            let decimallength = partiallength / totallength
+            if (decimallength != 1) {
+              win.setProgressBar(decimallength) //sets progress bar to decimal
+              win.webContents.send("downloadProgress", decimallength)
+            }
+            else {
+              win.setProgressBar(0) //sets progress bar to blank when done
+              win.webContents.send("downloadProgress", 0)
+            }
+          });
+          
           file.on('finish', function() {
               file.close(cb(null, dest)); // async call of the callback
           });

src/components/Overlays/DownloadOverlay.vue

@@ -10,19 +10,22 @@
         </header>
 
         <div class="download-list">
-            <div class="download-item" v-for="item in downloadQueue">
+            <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>
                 </div>
+                <div class="progress-bar" v-if="index == 0" :style="{ width: downloadProgress * 100 + '%' }"></div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-    import { remote } from 'electron';
+    import { remote, ipcRenderer } from 'electron';
     const { shell } = remote;
 
     export default {
@@ -30,11 +33,17 @@
         props: [
             'downloadQueue'
         ],
+        mounted: function(){
+            ipcRenderer.on('downloadProgress', (event, data) => {
+                this.$data.downloadProgress = data
+            });
+        },
         data: function() {
             return {
                 showUpdateOverlay: false,
                 showDownloadManager: false,
-                isUpdateAvailable: false
+                isUpdateAvailable: false,
+                downloadProgress: 0
             }
         },
         methods: {
@@ -46,6 +55,7 @@
 </script>
 
 <style scoped lang="less">
+
     .download-overlay {
         position: fixed;
         z-index: 10;
@@ -90,14 +100,17 @@
             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;
 
+
+                & .download-item-grid{
+                    display: grid;
+                    grid-template-columns: 50px 1fr;
+                    grid-gap: 10px;
+
                     & .cover {
                         width: 50px;
                         height: 50px;
@@ -123,6 +136,15 @@
                         }
                     }
                 }
+
+                & .progress-bar{
+                    border-radius: 5px;
+                    margin-top: 6px;
+                    background: #e22c78;
+                    height: 3px;
+                    width: 100%;
+                }
+            }
         }
     }
 </style>