Added download manager to home page if autoplay is disabled

Fixed bug where the UI attempted to generate a preview URL for placeholder file cards

Fixed bug where file renaming was always attempted even when not necessary

backend/downloader.js

@@ -308,7 +308,7 @@ async function downloadQueuedFile(download_uid) {
                     }
 
                     // renames file if necessary due to bug
-                    if (!fs.existsSync(output_json['_filename'] && fs.existsSync(output_json['_filename'] + '.webm'))) {
+                    if (!fs.existsSync(output_json['_filename']) && fs.existsSync(output_json['_filename'] + '.webm')) {
                         try {
                             fs.renameSync(output_json['_filename'] + '.webm', output_json['_filename']);
                             logger.info('Renamed ' + file_name + '.webm to ' + file_name);

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

@@ -1,6 +1,6 @@
 <div [hidden]="!(downloads && downloads.length > 0)">
-    <div class="mat-elevation-z8">
-        <mat-table matSort [dataSource]="dataSource">
+    <div style="overflow: hidden;" [ngClass]="uids ? 'rounded mat-elevation-z2' : 'mat-elevation-z8'">
+        <mat-table style="overflow: hidden" [ngClass]="uids ? 'rounded-top' : null" matSort [dataSource]="dataSource">
       
           <!-- Date Column -->
           <ng-container matColumnDef="date">
@@ -69,22 +69,22 @@
             </mat-cell>
           </ng-container>
       
-            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-header-row [ngClass]="uids ? 'rounded-top' : null" *matHeaderRowDef="displayedColumns"></mat-header-row>
             <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
         </mat-table>
       
-        <mat-paginator [pageSizeOptions]="[5, 10, 20]"
+        <mat-paginator [ngClass]="uids ? 'rounded-bottom' : null" [pageSizeOptions]="[5, 10, 20]"
                        showFirstLastButtons 
                        aria-label="Select page of downloads">
         </mat-paginator>
       </div>
-      <div class="downloads-action-button-div">
+      <div *ngIf="!uids" class="downloads-action-button-div">
         <button [disabled]="!running_download_exists" mat-stroked-button (click)="pauseAllDownloads()"><ng-container i18n="Pause all downloads">Pause all downloads</ng-container></button>
         <button style="margin-left: 10px;" [disabled]="!paused_download_exists" mat-stroked-button (click)="resumeAllDownloads()"><ng-container i18n="Resume all downloads">Resume all downloads</ng-container></button>
         <button color="warn" style="margin-left: 10px;" mat-stroked-button (click)="clearFinishedDownloads()"><ng-container i18n="Clear finished downloads">Clear finished downloads</ng-container></button>
       </div>
 </div>
 
-<div *ngIf="(!downloads || downloads.length === 0) && downloads_retrieved">
+<div *ngIf="(!downloads || downloads.length === 0) && downloads_retrieved && !uids">
   <h4 style="text-align: center; margin-top: 10px;" i18n="No downloads label">No downloads available!</h4>
 </div>

src/app/components/downloads/downloads.component.scss

@@ -17,4 +17,16 @@ mat-header-cell, mat-cell {
 .downloads-action-button-div {
     margin-top: 10px;
     margin-left: 5px;
+}
+
+.rounded-top {
+    border-radius: 16px 16px 0px 0px !important;
+}
+
+.rounded-bottom {
+    border-radius: 0px 0px 16px 16px !important;
+}
+
+.rounded {
+    border-radius: 16px 16px 16px 16px !important;
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, Input } from '@angular/core';
 import { PostsService } from 'app/posts.services';
 import { trigger, transition, animateChild, stagger, query, style, animate } from '@angular/animations';
 import { Router } from '@angular/router';
@@ -39,6 +39,8 @@ import { MatSort } from '@angular/material/sort';
 })
 export class DownloadsComponent implements OnInit, OnDestroy {
 
+  @Input() uids = null;
+
   downloads_check_interval = 1000;
   downloads = [];
   finished_downloads = [];
@@ -100,7 +102,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
   }
 
   getCurrentDownloads(): void {
-    this.postsService.getCurrentDownloads().subscribe(res => {
+    this.postsService.getCurrentDownloads(this.uids).subscribe(res => {
       this.downloads_retrieved = true;
       if (res['downloads'] !== null 
         && res['downloads'] !== undefined

src/app/components/unified-file-card/unified-file-card.component.ts

@@ -82,7 +82,7 @@ export class UnifiedFileCardComponent implements OnInit {
       this.thumbnailBlobURL = this.sanitizer.bypassSecurityTrustUrl(bloburl);*/
     }
 
-    this.streamURL = this.generateStreamURL();
+    if (this.file_obj) this.streamURL = this.generateStreamURL();
   }
 
   emitDeleteFile(blacklistMode = false) {

src/app/main/main.component.html

@@ -170,7 +170,7 @@
     </form>
 </div>
 <br/>
-<div class="centered big" id="bar_div" *ngIf="current_download; else nofile">
+<div class="centered big" id="bar_div" *ngIf="current_download && autoplay">
     <div class="margined">
         <div [ngClass]="(+percentDownloaded > 99)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="current_download.percent_complete && current_download.percent_complete > 1;else indeterminateprogress">
             <mat-progress-bar style="border-radius: 5px;" mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
@@ -185,9 +185,10 @@
     </div>
     <br/>
 </div>
-<ng-template #nofile>
 
-</ng-template>
+<div style="display: flex; justify-content: center;" *ngIf="downloads && downloads.length > 0 && !autoplay">
+    <app-downloads style="width: 80%; margin-bottom: 10px" [uids]="download_uids"></app-downloads>
+</div>
 
 <ng-container *ngIf="cachedFileManagerEnabled || fileManagerEnabled">
     <app-recent-videos #recentVideos></app-recent-videos>

src/app/main/main.component.ts

@@ -95,6 +95,7 @@ export class MainComponent implements OnInit {
   playlist_thumbnails = {};
   downloading_content = {'audio': {}, 'video': {}};
   downloads: Download[] = [];
+  download_uids: string[] = [];
   current_download: Download = null;
 
   urlForm = new FormControl('', [Validators.required]);
@@ -430,7 +431,6 @@ export class MainComponent implements OnInit {
     }
 
     const type = this.audioOnly ? 'audio' : 'video';
-    this.downloadingfile = true;
 
     const customQualityConfiguration = type === 'audio' ? this.getSelectedAudioFormat() : this.getSelectedVideoFormat();
 
@@ -443,10 +443,12 @@ export class MainComponent implements OnInit {
       }
     }
 
+    this.downloadingfile = true;
     this.postsService.downloadFile(this.url, type, (this.selectedQuality === '' ? null : this.selectedQuality),
       customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, cropFileSettings).subscribe(res => {
         this.current_download = res['download'];
-        this.downloadingfile = true;
+        this.downloads.push(res['download']);
+        this.download_uids.push(res['download']['uid']);
     }, error => { // can't access server
       this.downloadingfile = false;
       this.current_download = null;
@@ -454,7 +456,7 @@ export class MainComponent implements OnInit {
     });
 
     if (!this.autoplay) {
-        const download_queued_message = $localize`Download for ${this.url}:url has been queued!`;
+        const download_queued_message = $localize`Download for ${this.url}:url: has been queued!`;
         this.postsService.openSnackBar(download_queued_message);
         this.url = '';
         this.downloadingfile = false;