Fix eager home card video preview streaming

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

@@ -80,8 +80,8 @@
             @if (!hide_image || is_playlist || (file_obj.type === 'audio' || file_obj.isAudio)) {
               <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">
             }
-            @if (elevated && !is_playlist && !(file_obj.type === 'audio' || file_obj.isAudio)) {
-              <video autoplay loop muted [muted]="true" [ngClass]="{'video-small': card_size === 'small', 'video': card_size === 'medium', 'video-large': card_size === 'large'}" [src]="streamURL">
+            @if (hide_image && elevated && !is_playlist && !(file_obj.type === 'audio' || file_obj.isAudio)) {
+              <video autoplay loop muted preload="none" [muted]="true" [ngClass]="{'video-small': card_size === 'small', 'video': card_size === 'medium', 'video-large': card_size === 'large'}" [src]="streamURL">
               </video>
             }
             <div class="duration-time">

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

@@ -38,6 +38,7 @@ export class UnifiedFileCardComponent implements OnInit {
 
   streamURL = null;
   hide_image = false;
+  previewHoverTimeout: ReturnType<typeof setTimeout> = null;
 
   // input/output
   @Input() loading = true;
@@ -87,7 +88,6 @@ export class UnifiedFileCardComponent implements OnInit {
       this.thumbnailBlobURL = `${this.baseStreamPath}thumbnail/${encodeURIComponent(this.file_obj.thumbnailPath)}${authQuery ? '?' + authQuery : ''}`;
     }
 
-    if (this.file_obj) this.streamURL = this.generateStreamURL();
   }
 
   emitDeleteFile(blacklistMode = false) {
@@ -158,14 +158,24 @@ export class UnifiedFileCardComponent implements OnInit {
 
   onMouseOver() {
     this.elevated = true;
-    setTimeout(() => {
+    if (this.previewHoverTimeout) {
+      clearTimeout(this.previewHoverTimeout);
+    }
+    this.previewHoverTimeout = setTimeout(() => {
       if (this.elevated) {
+        if (!this.streamURL && this.file_obj && !this.is_playlist && !(this.file_obj.type === 'audio' || this.file_obj.isAudio)) {
+          this.streamURL = this.generateStreamURL();
+        }
         this.hide_image = true;
       }
     }, 500);
   }
 
   onMouseOut() {
+    if (this.previewHoverTimeout) {
+      clearTimeout(this.previewHoverTimeout);
+      this.previewHoverTimeout = null;
+    }
     this.elevated = false;
     this.hide_image = false;
   }