From ce57f633d5e7694a8e08b9c21e820b797a894343 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sat, 3 Aug 2024 13:44:54 +0200
Subject: [PATCH] bugfixes

---
 .../components/home/browse/browse.component.ts |  9 +++++++++
 .../categories/categories.component.html       | 16 +++++++++-------
 .../categories/categories.component.scss       |  4 ++++
 .../hero-banner/hero-banner.component.scss     | 15 +++++++--------
 .../hero-banner/hero-banner.component.ts       | 18 +++++++++++++++++-
 5 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts
index 6bf21e3..18dbce7 100644
--- a/frontend/src/app/components/home/browse/browse.component.ts
+++ b/frontend/src/app/components/home/browse/browse.component.ts
@@ -21,6 +21,15 @@ export class BrowseComponent implements OnInit {
       imgPath: 'galaxy.png',
       videoPath: 'galaxy.mp4',
     },
+    {
+      id: 2,
+      title: 'Star Trek',
+      description:
+        'Join Captain Kirk and the crew of the starship USS Enterprise as they embark on thrilling adventures across the universe. "Star Trek" is a legendary sci-fi saga that explores the final frontier, filled with action, exploration, and unforgettable encounters with alien species. This epic journey showcases the spirit of discovery and the unwavering courage of the Starfleet members as they confront the unknown and protect the galaxy from various threats.',
+      category: 'sci-fi',
+      imgPath: 'star-trek.png',
+      videoPath: 'star-trek.mp4',
+    },
   ];
   currentMovie: any[] = [];
 
diff --git a/frontend/src/app/components/home/browse/categories/categories.component.html b/frontend/src/app/components/home/browse/categories/categories.component.html
index 0f55cc2..1006b28 100644
--- a/frontend/src/app/components/home/browse/categories/categories.component.html
+++ b/frontend/src/app/components/home/browse/categories/categories.component.html
@@ -1,14 +1,16 @@
 <section class="hide-scrollbar">
   <div class="category">
     <p>New Releases</p>
-    @for (movie of movies; track movie) {
-    <div class="movie" (click)="openCurrentMovie(movie.id)">
-      <img
-        src="./../../../../../assets/movies/banner/{{ movie.imgPath }}"
-        alt=""
-      />
+    <div class="movies">
+      @for (movie of movies; track movie) {
+      <div class="movie" (click)="openCurrentMovie(movie.id)">
+        <img
+          src="./../../../../../assets/movies/banner/{{ movie.imgPath }}"
+          alt=""
+        />
+      </div>
+      }
     </div>
-    }
   </div>
   <div class="category">
     <p>Continue Watching</p>
diff --git a/frontend/src/app/components/home/browse/categories/categories.component.scss b/frontend/src/app/components/home/browse/categories/categories.component.scss
index 857a9be..82a1f0c 100644
--- a/frontend/src/app/components/home/browse/categories/categories.component.scss
+++ b/frontend/src/app/components/home/browse/categories/categories.component.scss
@@ -13,6 +13,10 @@ section {
   }
 }
 
+.movies {
+  display: flex;
+}
+
 .movie {
   width: 213px;
   height: 120px;
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 784114f..644b945 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
@@ -27,19 +27,18 @@ section {
 .title {
   font-size: 5vw;
   font-weight: 700;
+  text-shadow: 1px 1px 2px $black;
 }
 
 .description {
-  font-size: 1.2vw;
+  font-size: 18px;
   font-weight: 400;
-  overflow: scroll;
-  height: 40%;
+  overflow: hidden;
+  max-height: 145px;
+  height: fit-content;
   margin-bottom: 24px;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    width: 0px;
-  }
+  text-shadow: 1px 1px 2px $black;
+  position: relative;
 }
 
 .movie-banner {
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 f45c2b6..bdc3d3f 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
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, ElementRef, Input } from '@angular/core';
 import { BtnLargeComponent } from '../../../../shared/components/btn-large/btn-large.component';
 
 @Component({
@@ -12,7 +12,23 @@ import { BtnLargeComponent } from '../../../../shared/components/btn-large/btn-l
 export class HeroBannerComponent {
   @Input() currentMovie: any[] = [];
 
+  constructor(private el: ElementRef) {}
+
+  ngAfterViewInit() {
+    this.truncateText();
+  }
   getImagePath(): string {
     return `./../../../../../assets/movies/banner/${this.currentMovie[0]?.imgPath}`;
   }
+
+  truncateText() {
+    const descriptionEl = this.el.nativeElement.querySelector('.description');
+    const maxHeight = descriptionEl.offsetHeight;
+    let text = descriptionEl.innerText;
+
+    while (descriptionEl.scrollHeight > maxHeight) {
+      text = text.slice(0, -1);
+      descriptionEl.innerText = text + '...';
+    }
+  }
 }