Added video previews when hovering over a file card

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

@@ -51,8 +51,10 @@
     <mat-card [matTooltip]="null" (click)="navigateToFile($event)" 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="!loading && file_obj.thumbnailURL" class="img-div">
-                <div style="position: relative">
+                <div [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" style="position: relative">
-                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailPath ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
+                    <img *ngIf="!(elevated && !is_playlist)" [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailPath ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
+                    <video *ngIf="elevated && !is_playlist" autoplay loop muted [muted]="true" [ngClass]="{'video-small': card_size === 'small', 'video': card_size === 'medium', 'video-large': card_size === 'large'}" [src]="streamURL">
+                    </video>
                     <div class="duration-time">
                         {{file_length}}
                     </div>

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

@@ -51,6 +51,30 @@
   object-fit: cover;
 }
 
+.video-large {
+  width: 300px;
+  height: 167.5px;
+  object-fit: cover;
+  position: absolute;
+  top: 0px;
+}
+
+.video {
+  width: 200px;
+  height: 112.5px;
+  object-fit: cover;
+  position: absolute;
+  top: 0px;
+}
+
+.video-small {
+  width: 150px;
+  height: 84.5px;
+  object-fit: cover;
+  position: absolute;
+  top: 0px;
+}
+
 .example-full-width-height {
   width: 100%;
   height: 100%

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

@@ -35,6 +35,8 @@ export class UnifiedFileCardComponent implements OnInit {
   // optional vars
   thumbnailBlobURL = null;
 
+  streamURL = null;
+
   // input/output
   @Input() loading = true;
   @Input() theme = null;
@@ -78,6 +80,8 @@ export class UnifiedFileCardComponent implements OnInit {
       const bloburl = URL.createObjectURL(blob);
       this.thumbnailBlobURL = this.sanitizer.bypassSecurityTrustUrl(bloburl);*/
     }
+
+    this.streamURL = this.generateStreamURL();
   }
 
   emitDeleteFile(blacklistMode = false) {
@@ -128,6 +132,23 @@ export class UnifiedFileCardComponent implements OnInit {
     this.contextMenu.openMenu();
   }
 
+  generateStreamURL() {
+    let baseLocation = 'stream/';
+    let fullLocation = this.baseStreamPath + baseLocation + `?test=test&uid=${this.file_obj['uid']}`;
+
+    if (this.jwtString) {
+      fullLocation += `&jwt=${this.jwtString}`;
+    }
+
+    if (this.file_obj['sub_id']) {
+      fullLocation += `&sub_id=${this.file_obj['sub_id']}`;
+    }
+
+    fullLocation += '&t=,10';
+
+    return fullLocation;
+  }
+
 }
 
 function fancyTimeFormat(time) {