Downloads on the home page now show the progress bar

backend/app.js

@@ -1117,6 +1117,7 @@ async function downloadFileByURL_exec(url, type, options, sessionID = null) {
         if (!downloads[session]) downloads[session] = {};
         downloads[session][download_uid] = {
             uid: download_uid,
+            ui_uid: options.ui_uid,
             downloading: true,
             complete: false,
             url: url,
@@ -1231,6 +1232,7 @@ async function downloadFileByURL_normal(url, type, options, sessionID = null) {
         if (!downloads[session]) downloads[session] = {};
         downloads[session][download_uid] = {
             uid: download_uid,
+            ui_uid: options.ui_uid,
             downloading: true,
             complete: false,
             url: url,
@@ -1686,7 +1688,8 @@ app.post('/api/tomp3', async function(req, res) {
         maxBitrate: req.body.maxBitrate,
         customQualityConfiguration: req.body.customQualityConfiguration,
         youtubeUsername: req.body.youtubeUsername,
-        youtubePassword: req.body.youtubePassword
+        youtubePassword: req.body.youtubePassword,
+        ui_uid: req.body.ui_uid
     }
 
     const is_playlist = url.includes('playlist');
@@ -1711,7 +1714,8 @@ app.post('/api/tomp4', async function(req, res) {
         selectedHeight: req.body.selectedHeight,
         customQualityConfiguration: req.body.customQualityConfiguration,
         youtubeUsername: req.body.youtubeUsername,
-        youtubePassword: req.body.youtubePassword
+        youtubePassword: req.body.youtubePassword,
+        ui_uid: req.body.ui_uid
     }
     
     const is_playlist = url.includes('playlist');
@@ -2443,6 +2447,30 @@ app.get('/api/audio/:id', function(req , res){
     res.send({downloads: downloads});
   });
 
+  app.post('/api/download', async (req, res) => {
+    var session_id = req.body.session_id;
+    var download_id = req.body.download_id;
+    let found_download = null;
+
+    // find download
+    if (downloads[session_id] && Object.keys(downloads[session_id])) {
+        let session_downloads = Object.values(downloads[session_id]);
+        for (let i = 0; i < session_downloads.length; i++) {
+            let session_download = session_downloads[i];
+            if (session_download && session_download['ui_uid'] === download_id) {
+                found_download = session_download;
+                break;
+            }
+        }
+    }
+
+    if (found_download) {
+        res.send({download: found_download});
+    } else {
+        res.send({download: null});
+    }
+  });
+
   app.post('/api/clearDownloads', async (req, res) => {
     let success = false;
     var delete_all = req.body.delete_all;

src/app/main/main.component.html

@@ -170,11 +170,11 @@
 <br/>
 <div class="centered big" id="bar_div" *ngIf="current_download && current_download.downloading; else nofile">
     <div class="margined">
-        <div [ngClass]="(determinateProgress && percentDownloaded === 100)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="determinateProgress;else indeterminateprogress">
-            <mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
+        <div [ngClass]="(percentDownloaded > 15 && percentDownloaded === 100)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="current_download.percent_complete && current_download.percent_complete > 15;else indeterminateprogress">
+            <mat-progress-bar style="border-radius: 5px;" mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
             <br/>
         </div>
-        <div *ngIf="determinateProgress && percentDownloaded === 100" class="spinner">
+        <div *ngIf="percentDownloaded === 100" class="spinner">
             <mat-spinner [diameter]="25"></mat-spinner>
         </div>
         <ng-template #indeterminateprogress>

src/app/main/main.component.ts

@@ -284,6 +284,13 @@ export class MainComponent implements OnInit {
         if (youtubeUsername && youtubeUsername !== 'null') { this.youtubeUsername = youtubeUsername };
       }
 
+      // get downloads routine
+      setInterval(() => {
+        if (this.current_download) {
+          this.getCurrentDownload();
+        }
+      }, 500);
+
       return true;
 
     }, error => {
@@ -587,7 +594,7 @@ export class MainComponent implements OnInit {
         }
 
         this.postsService.makeMP3(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
-          customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword).subscribe(posts => {
+          customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, new_download.uid).subscribe(posts => {
           // update download object
           new_download.downloading = false;
           new_download.percent_complete = 100;
@@ -595,6 +602,8 @@ export class MainComponent implements OnInit {
           const is_playlist = !!(posts['file_names']);
           this.path = is_playlist ? posts['file_names'] : posts['audiopathEncoded'];
 
+          this.current_download = null;
+
           if (this.path !== '-1') {
             this.downloadHelperMp3(this.path, posts['uid'], is_playlist, false, new_download);
           }
@@ -627,7 +636,7 @@ export class MainComponent implements OnInit {
         const customQualityConfiguration = this.getSelectedVideoFormat();
 
         this.postsService.makeMP4(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
-          customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword).subscribe(posts => {
+          customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, new_download.uid).subscribe(posts => {
           // update download object
           new_download.downloading = false;
           new_download.percent_complete = 100;
@@ -635,6 +644,8 @@ export class MainComponent implements OnInit {
           const is_playlist = !!(posts['file_names']);
           this.path = is_playlist ? posts['file_names'] : posts['videopathEncoded'];
 
+          this.current_download = null;
+
           if (this.path !== '-1') {
             this.downloadHelperMp4(this.path, posts['uid'], is_playlist, false, new_download);
           }
@@ -1124,4 +1135,21 @@ export class MainComponent implements OnInit {
       }
     });
   }
+
+  getCurrentDownload() {
+    this.postsService.getCurrentDownload(this.postsService.session_id,
+      this.current_download['ui_uid'] ? this.current_download['ui_uid'] : this.current_download['uid']).subscribe(res => {
+      const ui_uid = this.current_download['ui_uid'] ? this.current_download['ui_uid'] : this.current_download['uid'];
+      if (res['download']) {
+        console.log('got new download');
+        if (ui_uid === res['download']['ui_uid']) {
+          this.current_download = res['download'];
+          this.percentDownloaded = this.current_download.percent_complete;
+          console.log(this.percentDownloaded);
+        }
+      } else {
+        console.log('failed to get new download');
+      }
+    });
+  }
 }

src/app/posts.services.ts

@@ -68,25 +68,27 @@ export class PostsService {
     }
 
     // tslint:disable-next-line: max-line-length
-    makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null) {
+    makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null, ui_uid = null) {
         return this.http.post(this.path + 'tomp3', {url: url,
                                                     maxBitrate: selectedQuality,
                                                     customQualityConfiguration: customQualityConfiguration,
                                                     customArgs: customArgs,
                                                     customOutput: customOutput,
                                                     youtubeUsername: youtubeUsername,
-                                                    youtubePassword: youtubePassword}, this.httpOptions);
+                                                    youtubePassword: youtubePassword,
+                                                    ui_uid: ui_uid}, this.httpOptions);
     }
 
     // tslint:disable-next-line: max-line-length
-    makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null) {
+    makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null, ui_uid = null) {
         return this.http.post(this.path + 'tomp4', {url: url,
                                                     selectedHeight: selectedQuality,
                                                     customQualityConfiguration: customQualityConfiguration,
                                                     customArgs: customArgs,
                                                     customOutput: customOutput,
                                                     youtubeUsername: youtubeUsername,
-                                                    youtubePassword: youtubePassword}, this.httpOptions);
+                                                    youtubePassword: youtubePassword,
+                                                    ui_uid: ui_uid}, this.httpOptions);
     }
 
     getFileStatusMp3(name: string) {
@@ -225,6 +227,11 @@ export class PostsService {
         return this.http.get(this.path + 'downloads', this.httpOptions);
     }
 
+    // current download
+    getCurrentDownload(session_id, download_id) {
+        return this.http.post(this.path + 'download', {download_id: download_id, session_id: session_id}, this.httpOptions);
+    }
+
     // clear downloads. download_id is optional, if it exists only 1 download will be cleared
     clearDownloads(delete_all = false, session_id = null, download_id = null) {
         return this.http.post(this.path + 'clearDownloads', {delete_all: delete_all,