From d1417a5c67c167afeac5eaf2ee18e2d140c6838c Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Tue, 13 Aug 2024 16:28:42 +0200
Subject: [PATCH] error caught when database is empty

---
 .../app/components/home/browse/browse.component.html | 12 ++++++++----
 .../app/components/home/browse/browse.component.scss | 11 +++++++++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index 0326a96..73d6eab 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/frontend/src/app/components/home/browse/browse.component.html
@@ -1,4 +1,6 @@
 <section>
+  @if (currentMovie.length < 0) {
+  <!-- If at least one film has been uploaded -->
   @if (playMovie === "") {
   <app-header [browse]="true"></app-header>
   <app-hero-banner
@@ -21,10 +23,12 @@
       </div>
     </div>
     <app-video-player [playMovie]="playMovie"></app-video-player>
-    <!-- <video width="100%" height="100%" controls autoplay>
-      <source src="{{ playMovie }}" type="video/mp4" />
-      Your browser does not support the video tag.
-    </video> -->
+  </div>
+  } } @else {
+  <!-- If the database is empty -->
+  <app-header [browse]="true"></app-header>
+  <div class="error">
+    <h2>Unfortunately there are no films available in the database.</h2>
   </div>
   }
 </section>
diff --git a/frontend/src/app/components/home/browse/browse.component.scss b/frontend/src/app/components/home/browse/browse.component.scss
index c9f5d1d..79d9443 100644
--- a/frontend/src/app/components/home/browse/browse.component.scss
+++ b/frontend/src/app/components/home/browse/browse.component.scss
@@ -67,3 +67,14 @@ section {
   width: 32px;
   height: auto;
 }
+
+.error {
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: 120px;
+  left: 0;
+  right: 0;
+  padding: 24px;
+  text-align: center;
+}