From dc6dd5f5a2e43753341e2d379b7e41d38a97de26 Mon Sep 17 00:00:00 2001
From: Isaac Abadi <IsaacMGrynsztein@gmail.com>
Date: Sat, 22 Aug 2020 00:47:18 -0400
Subject: [PATCH] Added support for "large" sized cards

---
 .../recent-videos/recent-videos.component.html      |  4 ++--
 .../recent-videos/recent-videos.component.scss      | 10 +++++++++-
 .../unified-file-card.component.html                |  6 +++---
 .../unified-file-card.component.scss                | 13 +++++++++++++
 .../about-dialog/about-dialog.component.html        |  2 +-
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/app/components/recent-videos/recent-videos.component.html b/src/app/components/recent-videos/recent-videos.component.html
index f2a7c0c..5c36084 100644
--- a/src/app/components/recent-videos/recent-videos.component.html
+++ b/src/app/components/recent-videos/recent-videos.component.html
@@ -17,7 +17,7 @@
             </div>
         </div>
         <div class="col-12 order-1 col-sm-4 order-sm-2 d-flex justify-content-center">
-            <h4 style="text-align: center">My videos</h4>
+            <h4 style="text-align: center; position: relative; top: 12px;">My videos</h4>
         </div>
         <div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
             <mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
@@ -30,7 +30,7 @@
 <div>
     <div class="container">
         <div class="row justify-content-center">
-            <div *ngFor="let file of filtered_files; let i = index" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
+            <div *ngFor="let file of filtered_files; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
                 <app-unified-file-card [index]="i" [card_size]="postsService.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>
diff --git a/src/app/components/recent-videos/recent-videos.component.scss b/src/app/components/recent-videos/recent-videos.component.scss
index f695e16..c580895 100644
--- a/src/app/components/recent-videos/recent-videos.component.scss
+++ b/src/app/components/recent-videos/recent-videos.component.scss
@@ -1,4 +1,12 @@
-.file-col {
+.large-col {
+    max-width: 320px;
+}
+
+.medium-col {
+    max-width: 240px;
+}
+
+.small-col {
     max-width: 240px;
 }
 
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 82377f5..79a8437 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
@@ -21,11 +21,11 @@
             <button (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete playlist">Delete</ng-container></button>
         </ng-container>
     </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}">
+    <mat-card [matTooltip]="null" (click)="navigateToFile()" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'large-mat-card': card_size === 'large', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
         <div style="padding:5px">
             <div *ngIf="file_obj.thumbnailURL" class="img-div">
                 <div style="position: relative">
-                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium'}" [src]="file_obj.thumbnailURL" alt="Thumbnail">
+                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailURL" alt="Thumbnail">
                     <div class="duration-time">
                         {{file_length}}
                     </div>
@@ -33,7 +33,7 @@
                 
             </div>
 
-            <span [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }"><strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>      
+            <span [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }">{{card_size === 'large' && file_obj.uploader ? file_obj.uploader + ' - ' : ''}}<strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>      
         </div>
     </mat-card>
 </div>
diff --git a/src/app/components/unified-file-card/unified-file-card.component.scss b/src/app/components/unified-file-card/unified-file-card.component.scss
index 1de9655..e11761f 100644
--- a/src/app/components/unified-file-card/unified-file-card.component.scss
+++ b/src/app/components/unified-file-card/unified-file-card.component.scss
@@ -1,3 +1,10 @@
+.large-mat-card {
+  width: 300px;
+  height: 250px;
+  padding: 0px;
+  cursor: pointer;
+}
+
 .file-mat-card {
     width: 200px;
     height: 200px;
@@ -26,6 +33,12 @@
   justify-content: center;
 }
 
+.image-large {
+  width: 300px;
+  height: 167.5px;
+  object-fit: cover;
+}
+
 .image {
   width: 200px;
   height: 112.5px;
diff --git a/src/app/dialogs/about-dialog/about-dialog.component.html b/src/app/dialogs/about-dialog/about-dialog.component.html
index e0941b4..ddf28f0 100644
--- a/src/app/dialogs/about-dialog/about-dialog.component.html
+++ b/src/app/dialogs/about-dialog/about-dialog.component.html
@@ -40,7 +40,7 @@
             <br/>
             <mat-form-field placeholder="Card size">
                 <mat-select [(ngModel)]="card_size" (selectionChange)="cardSizeOptionChanged($event.value)">
-                    <mat-option value="large" [disabled]="true">
+                    <mat-option value="large">
                         Large
                     </mat-option>
                     <mat-option value="medium">