notes on conversion and availability of videos for the user added

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>

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;
 }

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>
   }

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 {

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);