Added ability to delete files in the recent videos component w/ archive support

src/app/components/recent-videos/recent-videos.component.html

@@ -1,8 +1,8 @@
 <div>
     <div class="container">
         <div class="row justify-content-center">
-            <div *ngFor="let file of files" [ngClass]="[ card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
+            <div *ngFor="let file of files; let i = index" [ngClass]="[ card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
-                <app-unified-file-card [card_size]="card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" (deleteFile)="deleteFile($event)"></app-unified-file-card>
+                <app-unified-file-card [index]="i" [card_size]="card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" (deleteFile)="deleteFile($event)"></app-unified-file-card>
             </div>
         </div>
     </div>

src/app/components/recent-videos/recent-videos.component.ts

@@ -110,24 +110,23 @@ export class RecentVideosComponent implements OnInit {
 
   // deleting
 
-  deleteAndRedownload(file) {
+  deleteFile(args) {
-    const sub = this.postsService.getSubscriptionByID(file.sub_id);
+    const file = args.file;
-    this.postsService.deleteSubscriptionFile(sub, file.id, false, file.uid).subscribe(res => {
+    const index = args.index;
-      this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
+    const blacklistMode = args.blacklistMode;
-    });
+
+    if (file.sub_id) {
+      this.deleteSubscriptionFile(file, index, blacklistMode);
+    } else {
+      this.deleteNormalFile(file, index, blacklistMode);
+    }
   }
 
-  deleteForever(file) {
+  deleteNormalFile(file, index, blacklistMode = false) {
-    const sub = this.postsService.getSubscriptionByID(file.sub_id);
-    this.postsService.deleteSubscriptionFile(sub, file.id, true, file.uid).subscribe(res => {
-      this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
-    });
-  }
-
-  deleteNormalFile(file, blacklistMode = false) {
     this.postsService.deleteFile(file.uid, file.isAudio, blacklistMode).subscribe(result => {
       if (result) {
         this.postsService.openSnackBar('Delete success!', 'OK.');
+        this.files.splice(index, 1);
       } else {
         this.postsService.openSnackBar('Delete failed!', 'OK.');
       }
@@ -136,6 +135,30 @@ export class RecentVideosComponent implements OnInit {
     });
   }
 
+  deleteSubscriptionFile(file, index, blacklistMode = false) {
+    if (blacklistMode) {
+      this.deleteForever(file, index);
+    } else {
+      this.deleteAndRedownload(file, index);
+    }
+  }
+
+  deleteAndRedownload(file, index) {
+    const sub = this.postsService.getSubscriptionByID(file.sub_id);
+    this.postsService.deleteSubscriptionFile(sub, file.id, false, file.uid).subscribe(res => {
+      this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
+      this.files.splice(index, 1);
+    });
+  }
+
+  deleteForever(file, index) {
+    const sub = this.postsService.getSubscriptionByID(file.sub_id);
+    this.postsService.deleteSubscriptionFile(sub, file.id, true, file.uid).subscribe(res => {
+      this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
+      this.files.splice(index, 1);
+    });
+  }
+
   // sorting and filtering
 
   sortFiles(a, b) {

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

@@ -5,14 +5,14 @@
         <button (click)="openFileInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
         <button (click)="navigateToSubscription()" mat-menu-item *ngIf="file_obj.sub_id"><mat-icon>{{file_obj.isAudio ? 'library_music' : 'video_library'}}</mat-icon>&nbsp;<ng-container i18n="Go to subscription menu item">Go to subscription</ng-container></button>
         <mat-divider></mat-divider>
-        <button *ngIf="file_obj.sub_id" (click)="deleteFile()" mat-menu-item>
+        <button *ngIf="file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item>
             <mat-icon>restore</mat-icon><ng-container i18n="Delete and redownload subscription video button">Delete and redownload</ng-container>
         </button>
-        <button *ngIf="file_obj.sub_id && use_youtubedl_archive" (click)="deleteFile(true)" mat-menu-item>
+        <button *ngIf="file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item>
             <mat-icon>delete_forever</mat-icon><ng-container i18n="Delete forever subscription video button">Delete forever</ng-container>
         </button>
-        <button *ngIf="!file_obj.sub_id" (click)="deleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
+        <button *ngIf="!file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
-        <button *ngIf="!file_obj.sub_id && use_youtubedl_archive" (click)="deleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
+        <button *ngIf="!file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
     </mat-menu>
     <mat-card [matTooltip]="null" (click)="navigateToFile()" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
         <div style="padding:5px">

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

@@ -19,8 +19,10 @@ export class UnifiedFileCardComponent implements OnInit {
   @Input() file_obj = null;
   @Input() card_size = 'medium';
   @Input() use_youtubedl_archive = false;
+  @Input() index: number;
   @Output() goToFile = new EventEmitter<any>();
   @Output() goToSubscription = new EventEmitter<any>();
+  @Output() deleteFile = new EventEmitter<any>();
 
   /*
     Planned sizes:
@@ -35,10 +37,12 @@ export class UnifiedFileCardComponent implements OnInit {
     this.file_length = fancyTimeFormat(this.file_obj.duration);
   }
 
-  deleteFile(blacklistMode = false) {
+  emitDeleteFile(blacklistMode = false) {
-    if (this.file_obj.sub_id) {
+    this.deleteFile.emit({
-
+      file: this.file_obj,
-    }
+      index: this.index,
+      blacklistMode: blacklistMode
+    });
   }
 
   navigateToFile() {