bugfixes

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[] = [];
 

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="movies">
-    <div class="movie" (click)="openCurrentMovie(movie.id)">
+      @for (movie of movies; track movie) {
-      <img
+      <div class="movie" (click)="openCurrentMovie(movie.id)">
-        src="./../../../../../assets/movies/banner/{{ movie.imgPath }}"
+        <img
-        alt=""
+          src="./../../../../../assets/movies/banner/{{ movie.imgPath }}"
-      />
+          alt=""
+        />
+      </div>
+      }
     </div>
-    }
   </div>
   <div class="category">
     <p>Continue Watching</p>

frontend/src/app/components/home/browse/categories/categories.component.scss

@@ -13,6 +13,10 @@ section {
   }
 }
 
+.movies {
+  display: flex;
+}
+
 .movie {
   width: 213px;
   height: 120px;

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;
+  overflow: hidden;
-  height: 40%;
+  max-height: 145px;
+  height: fit-content;
   margin-bottom: 24px;
-  -ms-overflow-style: none;
+  text-shadow: 1px 1px 2px $black;
-  scrollbar-width: none;
+  position: relative;
-  &::-webkit-scrollbar {
-    width: 0px;
-  }
 }
 
 .movie-banner {

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 + '...';
+    }
+  }
 }