notes on conversion and availability of videos for the user added

frontend/src/app/components/home/browse/browse.component.html

@@ -39,6 +39,7 @@
       <div class="back-button" (click)="closeVideo()">
         <img src="./../../../../assets/img/back.svg" alt="Back" />
       </div>
+      <div class="center">
         <div class="resolution-controls">
           <button
             [ngClass]="{
@@ -68,13 +69,25 @@
               active: currentResolution === '1080p',
               'not-available': !movieIsUploaded['1080']
             }"
-          [disabled]="!movieIsUploaded['1080'] || currentResolution === '1080p'"
+            [disabled]="
+              !movieIsUploaded['1080'] || currentResolution === '1080p'
+            "
             (click)="changeResolution('1080p')"
           >
             1080p
           </button>
         </div>
-
+        <p
+          *ngIf="
+            !movieIsUploaded['360'] ||
+            !movieIsUploaded['720'] ||
+            !movieIsUploaded['1080']
+          "
+        >
+          (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);