From 41fee56a493b41231d37373f888a26d9b8b3b9a2 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Thu, 12 Sep 2024 04:38:32 +0200
Subject: [PATCH] Fix: Optimize video & thumbnail load

---
 .../hero-banner/hero-banner.component.html    | 49 +++----------------
 .../hero-banner/hero-banner.component.ts      | 10 ++++
 2 files changed, 16 insertions(+), 43 deletions(-)

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 7e15104..b561043 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
@@ -10,29 +10,12 @@
     }"
   >
     <!-- 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"
-    />
+    <img *ngIf="!isVideoLoaded" [src]="thumbnailUrl" class="fallback-image" />
     <video
       #videoElement
-      *ngIf="currentMovie[0]?.file_name"
-      [src]="
-        environmentBaseUrl +
-        '/media/thumbnails/' +
-        currentMovie[0]?.id +
-        '/' +
-        currentMovie[0]?.file_name +
-        '_video-thumbnail.mp4'
-      "
+      *ngIf="currentMovie[0].id"
+      [src]="videoUrl"
+      poster="{{ thumbnailUrl }}"
       autoplay
       muted
       loop
@@ -40,19 +23,7 @@
       class="video-banner"
       (canplay)="onVideoLoad()"
       (error)="onVideoError()"
-    >
-      <img
-        [src]="
-          environmentBaseUrl +
-          '/media/thumbnails/' +
-          currentMovie[0]?.id +
-          '/' +
-          currentMovie[0]?.file_name +
-          '_1080p.jpg'
-        "
-        alt="Fallback image"
-      />
-    </video>
+    ></video>
   </div>
 
   @if (currentMovie.length > 0) {
@@ -83,15 +54,7 @@
         [imgPath]="'play'"
         [imgReverse]="true"
         [disabled]="!isAnyResolutionUploaded()"
-        (click)="
-          playMovieId(
-            environmentBaseUrl +
-              '/media/videos/' +
-              currentMovie[0]?.id +
-              '/' +
-              currentMovie[0]?.file_name
-          )
-        "
+        (click)="playMovieId(playUrl)"
       ></app-btn-large>
       <div class="favorite-img" (click)="toggleLikeMovie(currentMovie[0].id)">
         @if(checkLikeMovies(currentMovie[0].id)) {
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 b7acb84..6723b0c 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
@@ -36,6 +36,9 @@ export class HeroBannerComponent implements OnChanges {
   @Output() favoriteMovieChange = new EventEmitter<any[]>();
 
   isVideoLoaded: boolean = false;
+  videoUrl: string = '';
+  thumbnailUrl: string = '';
+  playUrl: string = '';
   environmentBaseUrl: string = environment.baseUrl;
   movieIsUploaded: { [resolution: string]: boolean } = {
     '320': true,
@@ -59,6 +62,12 @@ export class HeroBannerComponent implements OnChanges {
     this.isVideoLoaded = false;
   }
 
+  getVideoUrls() {
+    this.playUrl = `${this.environmentBaseUrl}/media/videos/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}`;
+    this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_video-thumbnail.mp4`;
+    this.thumbnailUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_1080p.jpg`;
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (changes['currentMovie'] && this.currentMovie.length > 0) {
       const movieId = this.currentMovie[0]?.id;
@@ -70,6 +79,7 @@ export class HeroBannerComponent implements OnChanges {
             this.movieIsUploadedChange.emit(this.movieIsUploaded);
           });
         setTimeout(() => this.videoSpeed(), 0);
+        this.getVideoUrls();
       }
     }
   }