Added ability to download files for recent videos component

Updated styling for unified file card (elevation on hover)

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

@@ -2,7 +2,7 @@
     <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' : '' ]">
-                <app-unified-file-card [card_size]="card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file"></app-unified-file-card>
+                <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>
             </div>
         </div>
     </div>

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

@@ -13,6 +13,7 @@ export class RecentVideosComponent implements OnInit {
   subscription_files_received = false;
   files: any[] = null;
   card_size = 'medium';
+  downloading_content = {'video': {}, 'audio': {}};
 
   constructor(private postsService: PostsService, private router: Router) { }
 
@@ -32,6 +33,8 @@ export class RecentVideosComponent implements OnInit {
     });
   }
 
+  // navigation
+
   goToFile(file) {
     if (this.postsService.config['Extra']['download_only_mode']) {
       this.downloadFile(file);
@@ -57,18 +60,84 @@ export class RecentVideosComponent implements OnInit {
     }
   }
 
+  goToSubscription(file) {
+    this.router.navigate(['/subscription', {id: file.sub_id}]);
+  }
+
+  // downloading
+
   downloadFile(file) {
     if (file.sub_id) {
-
+      this.downloadSubscriptionFile(file);
     } else {
-
+      this.downloadNormalFile(file);
     }
   }
 
-  goToSubscription(file) {
-    this.router.navigate(['/subscription', {id: file.sub_id}]);
+  downloadSubscriptionFile(file) {
+    const type = file.isAudio ? 'audio' : 'video';
+    const ext = type === 'audio' ? '.mp3' : '.mp4'
+    const sub = this.postsService.getSubscriptionByID(file.sub_id);
+    console.log(sub.isPlaylist)
+    this.postsService.downloadFileFromServer(file.id, type, null, null, sub.name, sub.isPlaylist,
+      this.postsService.user ? this.postsService.user.uid : null, null).subscribe(res => {
+          const blob: Blob = res;
+          saveAs(blob, file.id + ext);
+        }, err => {
+          console.log(err);
+      });
+  }
+
+  downloadNormalFile(file) {
+    const type = file.isAudio ? 'audio' : 'video';
+    const ext = type === 'audio' ? '.mp3' : '.mp4'
+    const name = file.id;
+    this.downloading_content[type][name] = true;
+    this.postsService.downloadFileFromServer(name, type).subscribe(res => {
+      this.downloading_content[type][name] = false;
+      const blob: Blob = res;
+      saveAs(blob, decodeURIComponent(name) + ext);
+
+      if (!this.postsService.config.Extra.file_manager_enabled) {
+        // tell server to delete the file once downloaded
+        this.postsService.deleteFile(name, false).subscribe(delRes => {
+          // reload mp4s
+          this.getAllFiles();
+        });
+      }
+    });
+  }
+
+  // deleting
+
+  deleteAndRedownload(file) {
+    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}'`);
+    });
+  }
+
+  deleteForever(file) {
+    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.');
+      } else {
+        this.postsService.openSnackBar('Delete failed!', 'OK.');
+      }
+    }, err => {
+      this.postsService.openSnackBar('Delete failed!', 'OK.');
+    });
+  }
+
+  // sorting and filtering
+
   sortFiles(a, b) {
     // uses the 'registered' flag as the timestamp
     const result = b.registered - a.registered;

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

@@ -1,18 +1,20 @@
-<div style="position: relative; width: fit-content;">
+<div (mouseover)="elevated=true" (mouseout)="elevated=false" style="position: relative; width: fit-content;">
     <div class="download-time"><mat-icon class="audio-video-icon">{{file_obj.isAudio ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate'}}</div>
     <button [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
     <mat-menu #action_menu="matMenu">
         <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>
-        <button (click)="deleteFile()" mat-menu-item>
+        <mat-divider></mat-divider>
+        <button *ngIf="file_obj.sub_id" (click)="deleteFile()" mat-menu-item>
             <mat-icon>restore</mat-icon><ng-container i18n="Delete and redownload subscription video button">Delete and redownload</ng-container>
         </button>
-        <button (click)="deleteFile(true)" mat-menu-item *ngIf="use_youtubedl_archive">
+        <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 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 && 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>
     </mat-menu>
-    <mat-card [matTooltip]="file_obj.title" (click)="navigateToFile()" matRipple class="file-mat-card mat-elevation-z6" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium'}">
-        
+    <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">
             <div *ngIf="file_obj.thumbnailURL" class="img-div">
                 <div style="position: relative">

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

@@ -14,10 +14,11 @@ export class UnifiedFileCardComponent implements OnInit {
   file_length = '';
   file_thumbnail = '';
   type = null;
-  use_youtubedl_archive = false;
+  elevated = false;
 
   @Input() file_obj = null;
   @Input() card_size = 'medium';
+  @Input() use_youtubedl_archive = false;
   @Output() goToFile = new EventEmitter<any>();
   @Output() goToSubscription = new EventEmitter<any>();
 

src/app/main/main.component.html

@@ -1,9 +1,6 @@
 <br/>
 <div class="big demo-basic">
     <mat-card id="card" style="margin-right: 20px; margin-left: 20px;" [ngClass]="(allowAdvancedDownload) ? 'no-border-radius-bottom' : null">
-        <mat-card-title>
-            <ng-container i18n="Youtube downloader home page label">Youtube Downloader</ng-container>
-        </mat-card-title>
         <mat-card-content>
             <div style="position: relative;">
                 <form class="example-form">