From 03105c4fc682371f34346fb134869aaeb1f7546c Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Fri, 30 Aug 2024 09:14:48 +0200
Subject: [PATCH] notes on conversion and availability of videos for the user
 added

---
 .../home/browse/browse.component.html         | 81 +++++++++++--------
 .../home/browse/browse.component.scss         | 11 +++
 .../hero-banner/hero-banner.component.html    |  4 +
 .../hero-banner/hero-banner.component.scss    | 15 ++++
 .../hero-banner/hero-banner.component.ts      |  2 +
 5 files changed, 79 insertions(+), 34 deletions(-)

diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index 7a5eaf9..b732db1 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/frontend/src/app/components/home/browse/browse.component.html
@@ -39,42 +39,55 @@
       <div class="back-button" (click)="closeVideo()">
         <img src="./../../../../assets/img/back.svg" alt="Back" />
       </div>
-      <div class="resolution-controls">
-        <button
-          [ngClass]="{
-            'resolution-btn': true,
-            active: currentResolution === '360p',
-            'not-available': !movieIsUploaded['360']
-          }"
-          [disabled]="!movieIsUploaded['360'] || currentResolution === '360p'"
-          (click)="changeResolution('360p')"
+      <div class="center">
+        <div class="resolution-controls">
+          <button
+            [ngClass]="{
+              'resolution-btn': true,
+              active: currentResolution === '360p',
+              'not-available': !movieIsUploaded['360']
+            }"
+            [disabled]="!movieIsUploaded['360'] || currentResolution === '360p'"
+            (click)="changeResolution('360p')"
+          >
+            360p
+          </button>
+          <button
+            [ngClass]="{
+              'resolution-btn': true,
+              active: currentResolution === '720p',
+              'not-available': !movieIsUploaded['720']
+            }"
+            [disabled]="!movieIsUploaded['720'] || currentResolution === '720p'"
+            (click)="changeResolution('720p')"
+          >
+            720p
+          </button>
+          <button
+            [ngClass]="{
+              'resolution-btn': true,
+              active: currentResolution === '1080p',
+              'not-available': !movieIsUploaded['1080']
+            }"
+            [disabled]="
+              !movieIsUploaded['1080'] || currentResolution === '1080p'
+            "
+            (click)="changeResolution('1080p')"
+          >
+            1080p
+          </button>
+        </div>
+        <p
+          *ngIf="
+            !movieIsUploaded['360'] ||
+            !movieIsUploaded['720'] ||
+            !movieIsUploaded['1080']
+          "
         >
-          360p
-        </button>
-        <button
-          [ngClass]="{
-            'resolution-btn': true,
-            active: currentResolution === '720p',
-            'not-available': !movieIsUploaded['720']
-          }"
-          [disabled]="!movieIsUploaded['720'] || currentResolution === '720p'"
-          (click)="changeResolution('720p')"
-        >
-          720p
-        </button>
-        <button
-          [ngClass]="{
-            'resolution-btn': true,
-            active: currentResolution === '1080p',
-            'not-available': !movieIsUploaded['1080']
-          }"
-          [disabled]="!movieIsUploaded['1080'] || currentResolution === '1080p'"
-          (click)="changeResolution('1080p')"
-        >
-          1080p
-        </button>
+          (If a button cannot be selected, the video will be converted, which
+          may take a few seconds.)
+        </p>
       </div>
-
       <div class="logo">
         <img src="./../../../../assets/img/logo_ci.svg" alt="Logo" />
       </div>
diff --git a/frontend/src/app/components/home/browse/browse.component.scss b/frontend/src/app/components/home/browse/browse.component.scss
index 6c63c1b..ec9a934 100644
--- a/frontend/src/app/components/home/browse/browse.component.scss
+++ b/frontend/src/app/components/home/browse/browse.component.scss
@@ -45,6 +45,17 @@ section {
   transition: opacity 300ms ease-in-out;
 }
 
+.center {
+  display: flex;
+  flex-direction: column;
+  p {
+    font-size: 14px;
+    font-weight: 400;
+    color: $light-blue;
+    text-shadow: 1px 1px 2px $black;
+  }
+}
+
 .spacer {
   margin-top: 120px;
 }
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 43e86ea..66bef79 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
@@ -73,6 +73,10 @@
         />
         }
       </div>
+      <p *ngIf="!isAnyResolutionUploaded()">
+        (The video is being converted)
+        <a (click)="backToCategory(currentMovie)">Refresh</a>
+      </p>
     </div>
   </div>
   }
diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
index 8277bce..97dacda 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
+++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
@@ -104,6 +104,21 @@ section {
       height: 28px;
     }
   }
+  p {
+    position: absolute;
+    bottom: -28px;
+    left: 0;
+    color: $light-blue;
+    text-shadow: 1px 1px 2px $black;
+    a {
+      text-decoration: none;
+      color: $white;
+      cursor: pointer;
+      &:hover {
+        color: $blue;
+      }
+    }
+  }
 }
 
 .filled {
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 75617ec..c25cd21 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
@@ -58,6 +58,8 @@ export class HeroBannerComponent implements OnChanges {
     }
   }
 
+  refreshPage(movieId: number) {}
+
   toggleLikeMovie(movieId: number): void {
     if (this.favoriteMovies.includes(movieId)) {
       this.favoriteMovies = this.favoriteMovies.filter((id) => id !== movieId);