From 16a6e351d4c62ecb39bb8ff4c3991b700b6eaa49 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Wed, 11 Sep 2024 04:56:45 +0200
Subject: [PATCH] Add fallback image for video loading and error states

---
 .../hero-banner/hero-banner.component.html      | 17 +++++++++++++++++
 .../browse/hero-banner/hero-banner.component.ts |  9 +++++++++
 2 files changed, 26 insertions(+)

diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html
index 8296f37..7e15104 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html
+++ b/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"
diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
index 68110b0..b7acb84 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
+++ b/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;