customized functions for the back button

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

@@ -2,7 +2,10 @@
   @if (movies.length > 0) {
   <!-- If at least one film has been uploaded -->
   @if (playMovie === "") {
-  <app-header [browse]="true"></app-header>
+  <app-header
+    (moviesChange)="onMoviesChange($event)"
+    [browse]="true"
+  ></app-header>
   <!-- Hero Banner -->
   <app-hero-banner
     *ngIf="
@@ -13,6 +16,7 @@
     [currentMovie]="currentMovie"
     (playMovie)="playVideo($event)"
     (movieIsUploadedChange)="onMovieIsUploadedChange($event)"
+    (moviesChange)="onMoviesChange($event)"
   ></app-hero-banner>
   <!-- Spacer -->
   <div *ngIf="!this.checkScreenWidth()" class="spacer"></div>

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

@@ -39,7 +39,7 @@ section {
   justify-content: space-between;
   align-items: center;
   padding: 24px 48px;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba($black, 0.5);
   z-index: 1001;
   opacity: 0;
   transition: opacity 300ms ease-in-out;
@@ -140,6 +140,12 @@ section {
 
 /*------------- RESPONSIVE -------------*/
 
+@media screen and (max-width: 600px) {
+  .video-header {
+    padding: 12px 24px;
+  }
+}
+
 @media screen and (max-width: 550px) {
   form {
     flex-direction: column;

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

@@ -50,6 +50,14 @@ export class BrowseComponent implements OnInit {
     }
   }
 
+  onMoviesChange(updatedMovies: any[]) {
+    if (this.checkScreenWidth()) {
+      this.loadRandomMovie();
+    } else {
+      this.currentMovie = updatedMovies;
+    }
+  }
+
   checkScreenWidth() {
     return (this.isWideScreen = window.innerWidth > 600);
   }

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html

@@ -41,7 +41,7 @@
         *ngIf="!screenWidth"
         [imgPath]="'back'"
         [imgRadius]="'24px'"
-        (click)="backToCategory()"
+        (click)="backToCategory([])"
       ></app-btn-small>
       <app-btn-large
         [value]="'Play'"

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts

@@ -26,6 +26,7 @@ export class HeroBannerComponent {
   @Output() movieIsUploadedChange = new EventEmitter<{
     [resolution: string]: boolean;
   }>();
+  @Output() moviesChange = new EventEmitter<any[]>();
 
   environmentBaseUrl: string = environment.baseUrl;
   movieIsUploaded: { [resolution: string]: boolean } = {
@@ -57,11 +58,11 @@ export class HeroBannerComponent {
     );
   }
 
+  backToCategory(newMovies: any[]) {
+    this.moviesChange.emit(newMovies);
+  }
+
   playMovieId(videoPath: string) {
     this.playMovie.emit(videoPath);
   }
-
-  backToCategory() {
-    window.location.href = '/browse/';
-  }
 }

frontend/src/app/shared/components/header/header.component.html

@@ -1,6 +1,6 @@
 <header>
   @if (browse) {
-  <div class="logo" (click)="reloadPage()">
+  <div class="logo" (click)="backToOverview([])">
     <img src="./../../../../assets/img/logo_ci.svg" alt="" />
   </div>
   <div class="btn">

frontend/src/app/shared/components/header/header.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { BtnLargeComponent } from '../buttons/btn-large/btn-large.component';
 import { Router, RouterLink } from '@angular/router';
 
@@ -11,11 +11,12 @@ import { Router, RouterLink } from '@angular/router';
 })
 export class HeaderComponent {
   @Input() browse: boolean = false;
+  @Output() moviesChange = new EventEmitter<any[]>();
 
   constructor(private router: Router) {}
 
-  reloadPage() {
+  backToOverview(newMovies: any[]) {
-    window.location.href = '/browse/';
+    this.moviesChange.emit(newMovies);
   }
 
   logout() {