Unified file card now supports small and medium size

Duration styling/position updated and added download date time

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

@@ -1,7 +1,5 @@
 <div style="position: relative; width: fit-content;">
-    <div class="duration-time">
-        <ng-container i18n="Video duration label">Length:</ng-container>&nbsp;{{file_length}}
-    </div>
+    <div class="download-time">{{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>
@@ -13,13 +11,20 @@
             <mat-icon>delete_forever</mat-icon><ng-container i18n="Delete forever subscription video button">Delete forever</ng-container>
         </button>
     </mat-menu>
-    <mat-card (click)="navigateToFile()" matRipple class="example-card mat-elevation-z6">
+    <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'}">
+        
         <div style="padding:5px">
             <div *ngIf="file_obj.thumbnailURL" class="img-div">
-                <img class="image" [src]="file_obj.thumbnailURL" alt="Thumbnail">
+                <div style="position: relative">
+                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium'}" [src]="file_obj.thumbnailURL" alt="Thumbnail">
+                    <div class="duration-time">
+                        {{file_length}}
+                    </div>
+                </div>
+                
             </div>
 
-            <span class="max-two-lines"><strong>{{file_title}}</strong></span>      
+            <span [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }"><strong>{{file_obj.title}}</strong></span>      
         </div>
     </mat-card>
 </div>

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

@@ -1,76 +1,112 @@
-.example-card {
+.file-mat-card {
     width: 200px;
     height: 200px;
     padding: 0px;
     cursor: pointer;
-  }
-  
-  .menuButton {
-    right: 0px;
-    top: -1px;
-    position: absolute;
-    z-index: 999;
-    
-  }
-  
-  /* Coerce the <span> icon container away from display:inline */
-  .mat-icon-button .mat-button-wrapper {
-    display: flex;
-    justify-content: center;
-  }
-  
-  .image {
-    width: 200px;
-    height: 112.5px;
-    object-fit: cover;
-  }
-  
-  .example-full-width-height {
-    width: 100%;
-    height: 100%
-  }
-  
-  .centered {
-    margin: 0 auto;
-    top: 50%;
-    left: 50%;
-  }
-  
-  .img-div {
-    max-height: 80px;
-    padding: 0px;
-    margin: 32px 0px 0px -5px;
-    width: calc(100% + 5px + 5px);
-  }
+}
+
+.small-mat-card {
+  width: 150px;
+  height: 150px;
+  padding: 0px;
+  cursor: pointer;
+}
+
+.menuButton {
+  right: 0px;
+  top: -1px;
+  position: absolute;
+  z-index: 999;
   
-  .max-two-lines {
-    display: -webkit-box;
-    display: -moz-box;
-    max-height: 2.4em;
-    line-height: 1.2em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    bottom: 5px;
-    position: absolute;
-  }
+}
 
-  .duration-time {
-    position: absolute;
-    left: 5px;
-    top: 5px;
-    z-index: 99999;
-  }
+/* Coerce the <span> icon container away from display:inline */
+.mat-icon-button .mat-button-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.image {
+  width: 200px;
+  height: 112.5px;
+  object-fit: cover;
+}
+
+.image-small {
+  width: 150px;
+  height: 84.5px;
+  object-fit: cover;
+}
+
+.example-full-width-height {
+  width: 100%;
+  height: 100%
+}
+
+.centered {
+  margin: 0 auto;
+  top: 50%;
+  left: 50%;
+}
+
+.img-div {
+  max-height: 80px;
+  padding: 0px;
+  margin: 32px 0px 0px -5px;
+  width: calc(100% + 5px + 5px);
+}
+
+.max-two-lines {
+  display: -webkit-box;
+  display: -moz-box;
+  max-height: 2.4em;
+  line-height: 1.2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  bottom: 5px;
+  position: absolute;
+}
+
+.max-one-line {
+  display: -webkit-box;
+  display: -moz-box;
+  max-height: 1.2em;
+  line-height: 1.2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  bottom: 5px;
+  position: absolute;
+}
+
+.duration-time {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  z-index: 99999;
+  background: rgba(255,255,255,0.6);
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.download-time {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  z-index: 99999;
+}
+
+@media (max-width: 576px){
   
-  @media (max-width: 576px){
-   
-    .example-card {
-      width: 175px !important;
-    }
+  // .example-card {
+  //   width: 175px !important;
+  // }
 
-    .image {
-        width: 175px;
-    }
-     
-  }
+  // .image {
+  //     width: 175px;
+  // }
+    
+}

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

@@ -17,6 +17,7 @@ export class UnifiedFileCardComponent implements OnInit {
   use_youtubedl_archive = false;
 
   @Input() file_obj = null;
+  @Input() card_size = 'medium';
   @Output() goToFile = new EventEmitter<any>();
   @Output() goToSubscription = new EventEmitter<any>();
 
@@ -59,6 +60,9 @@ export class UnifiedFileCardComponent implements OnInit {
 }
 
 function fancyTimeFormat(time) {
+  if (typeof time === 'string') {
+    return time;
+  }
   // Hours, minutes and seconds
   const hrs = ~~(time / 3600);
   const mins = ~~((time % 3600) / 60);