From 0ab6535feca9384e0a6c8dd07300a0e8214c748d Mon Sep 17 00:00:00 2001
From: Isaac Abadi <IsaacMGrynsztein@gmail.com>
Date: Sat, 8 Aug 2020 15:59:29 -0400
Subject: [PATCH] Added ability to download files for recent videos component

Updated styling for unified file card (elevation on hover)
---
 .../recent-videos.component.html              |  2 +-
 .../recent-videos/recent-videos.component.ts  | 85 +++++++++++++++++--
 .../unified-file-card.component.html          | 12 +--
 .../unified-file-card.component.ts            |  3 +-
 src/app/main/main.component.html              |  3 -
 5 files changed, 87 insertions(+), 18 deletions(-)

diff --git a/src/app/components/recent-videos/recent-videos.component.html b/src/app/components/recent-videos/recent-videos.component.html
index ad39fa5..88a276b 100644
--- a/src/app/components/recent-videos/recent-videos.component.html
+++ b/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>
diff --git a/src/app/components/recent-videos/recent-videos.component.ts b/src/app/components/recent-videos/recent-videos.component.ts
index dec95fd..9555507 100644
--- a/src/app/components/recent-videos/recent-videos.component.ts
+++ b/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 {
     }
   }
 
-  downloadFile(file) {
-    if (file.sub_id) {
-
-    } else {
-
-    }
-  }
-
   goToSubscription(file) {
     this.router.navigate(['/subscription', {id: file.sub_id}]);
   }
 
+  // downloading
+
+  downloadFile(file) {
+    if (file.sub_id) {
+      this.downloadSubscriptionFile(file);
+    } else {
+      this.downloadNormalFile(file);
+    }
+  }
+
+  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;
diff --git a/src/app/components/unified-file-card/unified-file-card.component.html b/src/app/components/unified-file-card/unified-file-card.component.html
index 862b6ab..e61e082 100644
--- a/src/app/components/unified-file-card/unified-file-card.component.html
+++ b/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">
diff --git a/src/app/components/unified-file-card/unified-file-card.component.ts b/src/app/components/unified-file-card/unified-file-card.component.ts
index ca8e27e..7c27721 100644
--- a/src/app/components/unified-file-card/unified-file-card.component.ts
+++ b/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>();
 
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 63cb3a2..3993de4 100644
--- a/src/app/main/main.component.html
+++ b/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">