Download manager is now per user

Replaced multi download mode with autoplay checkbox

src/app/components/downloads/downloads.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="downloads">
+<div *ngIf="downloads && downloads.length > 0">
     <div class="mat-elevation-z8">
         <mat-table [dataSource]="dataSource">
       
@@ -63,4 +63,8 @@
                        aria-label="Select page of downloads">
         </mat-paginator>
       </div>
+</div>
+
+<div *ngIf="(!downloads || downloads.length === 0) && downloads_retrieved">
+  <h4 style="text-align: center; margin-top: 10px;" i18n="No downloads label">No downloads available!</h4>
 </div>

src/app/components/downloads/downloads.component.ts

@@ -54,6 +54,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
 
   displayedColumns: string[] = ['date', 'title', 'stage', 'progress', 'actions'];
   dataSource = null; // new MatTableDataSource<Download>();
+  downloads_retrieved = false;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
@@ -93,10 +94,12 @@ export class DownloadsComponent implements OnInit, OnDestroy {
 
   getCurrentDownloads(): void {
     this.postsService.getCurrentDownloads().subscribe(res => {
+      this.downloads_retrieved = true;
       if (res['downloads'] !== null 
         && res['downloads'] !== undefined
         && JSON.stringify(this.downloads) !== JSON.stringify(res['downloads'])) {
-          this.downloads = res['downloads'];
+          this.downloads = this.combineDownloads(this.downloads, res['downloads']);
+          // this.downloads = res['downloads'];
           this.downloads.sort(this.sort_downloads);
           this.dataSource = new MatTableDataSource<Download>(this.downloads);
           this.dataSource.paginator = this.paginator;
@@ -114,7 +117,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     });
   }
 
-  pauseDownload(download_uid) {
+  pauseDownload(download_uid: string): void {
     this.postsService.pauseDownload(download_uid).subscribe(res => {
       if (!res['success']) {
         this.postsService.openSnackBar('Failed to pause download! See server logs for more info.');
@@ -122,7 +125,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     });
   }
 
-  resumeDownload(download_uid) {
+  resumeDownload(download_uid: string): void {
     this.postsService.resumeDownload(download_uid).subscribe(res => {
       if (!res['success']) {
         this.postsService.openSnackBar('Failed to resume download! See server logs for more info.');
@@ -130,7 +133,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     });
   }
 
-  restartDownload(download_uid) {
+  restartDownload(download_uid: string): void {
     this.postsService.restartDownload(download_uid).subscribe(res => {
       if (!res['success']) {
         this.postsService.openSnackBar('Failed to restart download! See server logs for more info.');
@@ -138,7 +141,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     });
   }
 
-  cancelDownload(download_uid) {
+  cancelDownload(download_uid: string): void {
     this.postsService.cancelDownload(download_uid).subscribe(res => {
       if (!res['success']) {
         this.postsService.openSnackBar('Failed to cancel download! See server logs for more info.');
@@ -146,7 +149,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     });
   }
 
-  clearDownload(download_uid) {
+  clearDownload(download_uid: string): void {
     this.postsService.clearDownload(download_uid).subscribe(res => {
       if (!res['success']) {
         this.postsService.openSnackBar('Failed to pause download! See server logs for more info.');
@@ -154,7 +157,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     });
   }
 
-  watchContent(download) {
+  watchContent(download): void {
     const container = download['container'];
     localStorage.setItem('player_navigator', this.router.url.split(';')[0]);
     const is_playlist = container['uids']; // hacky, TODO: fix
@@ -165,6 +168,26 @@ export class DownloadsComponent implements OnInit, OnDestroy {
     }
   }
 
+  combineDownloads(downloads_old, downloads_new) {
+    // only keeps downloads that exist in the new set
+    downloads_old = downloads_old.filter(download_old => downloads_new.some(download_new => download_new.uid === download_old.uid));
+
+    // add downloads from the new set that the old one doesn't have
+    const downloads_to_add = downloads_new.filter(download_new => !downloads_old.some(download_old => download_new.uid === download_old.uid));
+    downloads_old.push(...downloads_to_add);
+    downloads_old.forEach(download_old => {
+      const download_new = downloads_new.find(download_to_check => download_old.uid === download_to_check.uid);
+      Object.keys(download_new).forEach(key => {
+        download_old[key] = download_new[key];
+      });
+  
+      Object.keys(download_old).forEach(key => {
+        if (!download_new[key]) delete download_old[key];
+      });
+    });
+
+    return downloads_old;
+  }
 }
 
 export interface Download {

src/app/main/main.component.html

@@ -65,9 +65,9 @@
                         Only Audio
                     </ng-container>
                 </mat-checkbox>
-                <mat-checkbox *ngIf="allowMultiDownloadMode" [disabled]="current_download" (change)="multiDownloadModeChanged($event)" [(ngModel)]="multiDownloadMode" style="float: right; margin-top: -12px">
-                    <ng-container i18n="Multi-download Mode checkbox">
-                        Multi-download Mode
+                <mat-checkbox *ngIf="allowAutoplay" (change)="autoplayChanged($event)" [(ngModel)]="autoplay" style="float: right; margin-top: -12px">
+                    <ng-container i18n="Autoplay checkbox">
+                        Autoplay
                     </ng-container>
                 </mat-checkbox>
                 
@@ -169,18 +169,6 @@
         </mat-expansion-panel>
     </form>
 </div>
-<div *ngIf="multiDownloadMode && downloads.length > 0 && !current_download" style="margin-top: 15px;" class="big demo-basic">
-    <mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
-        <div class="container">
-            <div *ngFor="let download of downloads; let i = index;" class="row">
-                <ng-container *ngIf="current_download !== download && download['downloading']">
-                    <app-download-item style="width: 100%" [download]="download" [queueNumber]="i+1" (cancelDownload)="cancelDownload($event)"></app-download-item>
-                    <mat-divider style="position: relative" *ngIf="i !== downloads.length - 1"></mat-divider>
-                </ng-container>
-            </div>
-        </div>
-    </mat-card>
-</div>
 <br/>
 <div class="centered big" id="bar_div" *ngIf="current_download; else nofile">
     <div class="margined">

src/app/main/main.component.ts

@@ -46,7 +46,7 @@ export class MainComponent implements OnInit {
   determinateProgress = false;
   downloadingfile = false;
   audioOnly: boolean;
-  multiDownloadMode = false;
+  autoplay = false;
   customArgsEnabled = false;
   customArgs = null;
   customOutputEnabled = false;
@@ -68,7 +68,7 @@ export class MainComponent implements OnInit {
   fileManagerEnabled = false;
   allowQualitySelect = false;
   downloadOnlyMode = false;
-  allowMultiDownloadMode = false;
+  allowAutoplay = false;
   audioFolderPath;
   videoFolderPath;
   use_youtubedl_archive = false;
@@ -232,7 +232,7 @@ export class MainComponent implements OnInit {
     this.fileManagerEnabled = this.postsService.config['Extra']['file_manager_enabled']
                               && this.postsService.hasPermission('filemanager');
     this.downloadOnlyMode = this.postsService.config['Extra']['download_only_mode'];
-    this.allowMultiDownloadMode = this.postsService.config['Extra']['allow_multi_download_mode'];
+    this.allowAutoplay = this.postsService.config['Extra']['allow_autoplay'];
     this.audioFolderPath = this.postsService.config['Downloader']['path-audio'];
     this.videoFolderPath = this.postsService.config['Downloader']['path-video'];
     this.use_youtubedl_archive = this.postsService.config['Downloader']['use_youtubedl_archive'];
@@ -314,8 +314,8 @@ export class MainComponent implements OnInit {
       this.audioOnly = localStorage.getItem('audioOnly') === 'true';
     }
 
-    if (localStorage.getItem('multiDownloadMode') !== null) {
-      this.multiDownloadMode = localStorage.getItem('multiDownloadMode') === 'true';
+    if (localStorage.getItem('autoplay') !== null) {
+      this.autoplay = localStorage.getItem('autoplay') === 'true';
     }
 
     // check if params exist
@@ -374,10 +374,9 @@ export class MainComponent implements OnInit {
   }
 
   // download helpers
-
   downloadHelper(container, type, is_playlist = false, force_view = false, navigate_mode = false) {
     this.downloadingfile = false;
-    if (this.multiDownloadMode && !this.downloadOnlyMode && !navigate_mode) {
+    if (!this.autoplay && !this.downloadOnlyMode && !navigate_mode) {
       // do nothing
       this.reloadRecentVideos();
     } else {
@@ -398,9 +397,6 @@ export class MainComponent implements OnInit {
         }
       }
     }
-
-    // // remove download from current downloads
-    // this.removeDownloadFromCurrentDownloads(new_download);
   }
 
   // download click handler
@@ -432,8 +428,6 @@ export class MainComponent implements OnInit {
     }
 
     const type = this.audioOnly ? 'audio' : 'video';
-    // this.downloads.push(new_download);
-    // if (!this.current_download && !this.multiDownloadMode) { this.current_download = new_download };
     this.downloadingfile = true;
 
     const customQualityConfiguration = type === 'audio' ? this.getSelectedAudioFormat() : this.getSelectedVideoFormat();
@@ -449,22 +443,17 @@ export class MainComponent implements OnInit {
 
     this.postsService.downloadFile(this.url, type, (this.selectedQuality === '' ? null : this.selectedQuality),
       customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, cropFileSettings).subscribe(res => {
-        console.log(res);
         this.current_download = res['download'];
         this.downloadingfile = true;
     }, error => { // can't access server
       this.downloadingfile = false;
       this.current_download = null;
-      // new_download['downloading'] = false;
-      // // removes download from list of downloads
-      // const downloads_index = this.downloads.indexOf(new_download);
-      // if (downloads_index !== -1) {
-      //   this.downloads.splice(downloads_index)
-      // }
       this.openSnackBar('Download failed!', 'OK.');
     });
 
-    if (this.multiDownloadMode) {
+    if (!this.autoplay) {
+        const download_queued_message = $localize`Download for ${this.url}:url has been queued!`;
+        this.postsService.openSnackBar(download_queued_message);
         this.url = '';
         this.downloadingfile = false;
     }
@@ -755,8 +744,8 @@ export class MainComponent implements OnInit {
     localStorage.setItem('audioOnly', new_val.checked.toString());
   }
 
-  multiDownloadModeChanged(new_val) {
-    localStorage.setItem('multiDownloadMode', new_val.checked.toString());
+  autoplayChanged(new_val) {
+    localStorage.setItem('autoplay', new_val.checked.toString());
   }
 
   customArgsEnabledChanged(new_val) {

src/app/settings/settings.component.html

@@ -225,7 +225,7 @@
                         <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['download_only_mode']"><ng-container i18n="Download only mode setting">Download only mode</ng-container></mat-checkbox>
                     </div>
                     <div class="col-12">
-                        <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_multi_download_mode']"><ng-container i18n="Allow multi-download mode setting">Allow multi-download mode</ng-container></mat-checkbox>
+                        <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_autoplay']"><ng-container i18n="Allow autoplay setting">Allow autoplay</ng-container></mat-checkbox>
                     </div>
                 </div>
             </div>