Add fallback image for video loading and error states

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html

@@ -9,6 +9,19 @@
       fullVhBanner: !screenWidth
     }"
   >
+    <!-- Fallback image is displayed before the video is loaded -->
+    <img
+      *ngIf="!isVideoLoaded"
+      [src]="
+        environmentBaseUrl +
+        '/media/thumbnails/' +
+        currentMovie[0]?.id +
+        '/' +
+        currentMovie[0]?.file_name +
+        '_1080p.jpg'
+      "
+      class="fallback-image"
+    />
     <video
       #videoElement
       *ngIf="currentMovie[0]?.file_name"
@@ -25,6 +38,8 @@
       loop
       playsinline
       class="video-banner"
+      (canplay)="onVideoLoad()"
+      (error)="onVideoError()"
     >
       <img
         [src]="
@@ -35,9 +50,11 @@
           currentMovie[0]?.file_name +
           '_1080p.jpg'
         "
+        alt="Fallback image"
       />
     </video>
   </div>
+
   @if (currentMovie.length > 0) {
   <div
     class="content"

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts

@@ -35,6 +35,7 @@ export class HeroBannerComponent implements OnChanges {
   @Output() moviesChange = new EventEmitter<any[]>();
   @Output() favoriteMovieChange = new EventEmitter<any[]>();
 
+  isVideoLoaded: boolean = false;
   environmentBaseUrl: string = environment.baseUrl;
   movieIsUploaded: { [resolution: string]: boolean } = {
     '320': true,
@@ -50,6 +51,14 @@ export class HeroBannerComponent implements OnChanges {
     this.videoSpeed();
   }
 
+  onVideoLoad() {
+    this.isVideoLoaded = true;
+  }
+
+  onVideoError() {
+    this.isVideoLoaded = false;
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (changes['currentMovie'] && this.currentMovie.length > 0) {
       const movieId = this.currentMovie[0]?.id;