From fd7cb3a8dc4aa0a963a67ac47932510aa5123429 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Tue, 20 Aug 2024 19:51:46 +0200
Subject: [PATCH] only the videos that have been uploaded in the resolution are
 playable

---
 .../components/home/browse/browse.component.html | 16 ++++++++++------
 .../components/home/browse/browse.component.scss | 11 +++++++++++
 .../components/home/browse/browse.component.ts   |  3 ++-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index a903b4c..9f5c636 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/frontend/src/app/components/home/browse/browse.component.html
@@ -23,9 +23,10 @@
         <button
           [ngClass]="{
             'resolution-btn': true,
-            active: currentResolution === '480p'
+            active: currentResolution === '480p',
+            'not-available': !movieIsUploaded['480']
           }"
-          [disabled]="currentResolution === '480p'"
+          [disabled]="!movieIsUploaded['480'] || currentResolution === '480p'"
           (click)="changeResolution('480p')"
         >
           480p
@@ -33,9 +34,10 @@
         <button
           [ngClass]="{
             'resolution-btn': true,
-            active: currentResolution === '720p'
+            active: currentResolution === '720p',
+            'not-available': !movieIsUploaded['720']
           }"
-          [disabled]="currentResolution === '720p'"
+          [disabled]="!movieIsUploaded['720'] || currentResolution === '720p'"
           (click)="changeResolution('720p')"
         >
           720p
@@ -43,14 +45,16 @@
         <button
           [ngClass]="{
             'resolution-btn': true,
-            active: currentResolution === '1080p'
+            active: currentResolution === '1080p',
+            'not-available': !movieIsUploaded['1080']
           }"
-          [disabled]="currentResolution === '1080p'"
+          [disabled]="!movieIsUploaded['1080'] || currentResolution === '1080p'"
           (click)="changeResolution('1080p')"
         >
           1080p
         </button>
       </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 4583e1a..44e4a3d 100644
--- a/frontend/src/app/components/home/browse/browse.component.scss
+++ b/frontend/src/app/components/home/browse/browse.component.scss
@@ -107,6 +107,7 @@ section {
 
 .resolution-btn.active {
   background-color: $blue;
+  cursor: default;
 }
 
 .resolution-btn:disabled {
@@ -122,3 +123,13 @@ section {
   outline: none;
   box-shadow: 0 0 0 3px rgba(38, 143, 255, 0.5);
 }
+
+.not-available {
+  opacity: 0.5;
+  background-color: $gray;
+}
+
+.not-available:not(.active):hover {
+  background-color: $gray;
+  transform: scale(1);
+}
diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts
index 2ca4127..b51fac4 100644
--- a/frontend/src/app/components/home/browse/browse.component.ts
+++ b/frontend/src/app/components/home/browse/browse.component.ts
@@ -60,7 +60,7 @@ export class BrowseComponent implements OnInit {
   }
 
   changeResolution(resolution: '480p' | '720p' | '1080p') {
-    if (this.videoPlayer) {
+    if (this.videoPlayer && this.movieIsUploaded[resolution.replace('p', '')]) {
       this.videoPlayer.switchResolution(resolution);
       this.currentResolution = resolution;
     }
@@ -75,6 +75,7 @@ export class BrowseComponent implements OnInit {
   }
 
   playVideo(videoPath: string) {
+    this.currentResolution = '720p';
     this.playMovie = videoPath;
   }