display & save favorite movies

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

@@ -14,9 +14,11 @@
     "
     [screenWidth]="checkScreenWidth()"
     [currentMovie]="currentMovie"
+    [favoriteMovies]="favoriteMovies"
     (playMovie)="playVideo($event)"
     (movieIsUploadedChange)="onMovieIsUploadedChange($event)"
     (moviesChange)="onMoviesChange($event)"
+    (favoriteMovieChange)="onFavoriteMovieChange($event)"
   ></app-hero-banner>
   <!-- Spacer -->
   <div *ngIf="!this.checkScreenWidth()" class="spacer"></div>
@@ -28,6 +30,7 @@
     "
     [movies]="movies"
     [currentMovie]="currentMovie[0]?.id"
+    [favoriteMovies]="favoriteMovies"
     (currentMovieId)="currentMovieId($event)"
   ></app-categories>
   } @else {

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

@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 import { VideoPlayerComponent } from './video-player/video-player.component';
 import { BtnSmallComponent } from '../../../shared/components/buttons/btn-small/btn-small.component';
 import { UploadMovieComponent } from './upload-movie/upload-movie.component';
+import { UserService } from '../../../services/user.service';
 
 @Component({
   selector: 'app-browse',
@@ -27,6 +28,7 @@ import { UploadMovieComponent } from './upload-movie/upload-movie.component';
 export class BrowseComponent implements OnInit {
   @ViewChild(VideoPlayerComponent) videoPlayer!: VideoPlayerComponent;
   movies: any[] = [];
+  favoriteMovies: number[] = [];
   currentMovie: any[] = [];
   playMovie: string = '';
   isWideScreen: boolean = false;
@@ -40,16 +42,34 @@ export class BrowseComponent implements OnInit {
 
   constructor(
     private authService: AuthService,
-    private movieService: MovieService
+    private movieService: MovieService,
+    public userService: UserService
   ) {}
 
   async ngOnInit() {
+    this.loadLikedMovies();
     await this.loadAllMovies();
     if (this.checkScreenWidth()) {
       this.currentMovie.length === 0 ? this.loadRandomMovie() : null;
     }
   }
 
+  async loadLikedMovies() {
+    try {
+      const likedMovies = await this.userService.getLikedMovies();
+      this.favoriteMovies = likedMovies.liked_videos;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  updateLikeMovies() {
+    const body = {
+      liked_videos: this.favoriteMovies,
+    };
+    this.userService.updateLikedMovies(body);
+  }
+
   onMoviesChange(updatedMovies: any[]) {
     if (this.checkScreenWidth()) {
       this.loadRandomMovie();
@@ -66,6 +86,11 @@ export class BrowseComponent implements OnInit {
     this.movieIsUploaded = newStatus;
   }
 
+  onFavoriteMovieChange(favoriteMovies: any) {
+    this.favoriteMovies = favoriteMovies;
+    this.updateLikeMovies();
+  }
+
   changeResolution(resolution: '480p' | '720p' | '1080p') {
     if (this.videoPlayer && this.movieIsUploaded[resolution.replace('p', '')]) {
       this.videoPlayer.switchResolution(resolution);

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

@@ -3,19 +3,12 @@
   <div *ngIf="recentMovies().length > 0" class="category">
     <p>Added in the last 7 days</p>
     <div class="movies">
-      <!-- Filme hier einfügen -->
+      <!-- Load movies -->
       @for (movie of recentMovies(); track movie) {
       <div class="movie" (click)="openCurrentMovie(movie.id)">
         <img
           [ngClass]="{ selected: movie.id === currentMovie }"
-          src="{{
-            environmentBaseUrl +
-              '/media/thumbnails/' +
-              movie.id +
-              '/' +
-              movie.file_name +
-              '_480p.jpg'
-          }}"
+          [src]="getThumbnailUrl(movie.id, movie.file_name)"
           alt=""
         />
       </div>
@@ -28,6 +21,32 @@
     </div>
   </div>
 
+  <!-- Column for favorites -->
+  <div *ngIf="favoriteMovies.length > 0" class="category">
+    <p>Favorites</p>
+    <div class="movies">
+      <!-- Load movies -->
+      @for (favorite of favoriteMovies; track favorite) {
+      <!-- Filter movies -->
+      @for (movie of movies; track movie) {
+      <!-- If movie favorite -->
+      @if (movie.id === favorite) {
+      <div class="movie" (click)="openCurrentMovie(movie.id)">
+        <img
+          [ngClass]="{ selected: movie.id === currentMovie }"
+          [src]="getThumbnailUrl(movie.id, movie.file_name)"
+          alt=""
+        />
+      </div>
+      } } }
+      <!-- Buttons for scrolling -->
+      <div class="scroll-buttons">
+        <button class="scroll-left" (click)="scrollLeft($event)"></button>
+        <button class="scroll-right" (click)="scrollRight($event)"></button>
+      </div>
+    </div>
+  </div>
+
   <!-- Genre columns -->
   @for (filmGenre of filmGenres; track filmGenre) {
   <!-- Movie available in genre -->
@@ -35,18 +54,12 @@
   <div class="category">
     <p>{{ filmGenre.name }}</p>
     <div class="movies">
+      <!-- Load movies -->
       @for (movie of allMovies(filmGenre.code); track movie) {
       <div class="movie" (click)="openCurrentMovie(movie.id)">
         <img
           [ngClass]="{ selected: movie.id === currentMovie }"
-          src="{{
-            environmentBaseUrl +
-              '/media/thumbnails/' +
-              movie.id +
-              '/' +
-              movie.file_name +
-              '_480p.jpg'
-          }}"
+          [src]="getThumbnailUrl(movie.id, movie.file_name)"
           alt=""
         />
       </div>

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

@@ -18,6 +18,7 @@ import { environment } from '../../../../environments/environment';
 export class CategoriesComponent {
   @Input() movies: any[] = [];
   @Input() currentMovie: number = 0;
+  @Input() favoriteMovies: any[] = [];
   @Output() currentMovieId = new EventEmitter<number>();
 
   environmentBaseUrl: string = environment.baseUrl;
@@ -67,6 +68,10 @@ export class CategoriesComponent {
     });
   }
 
+  getThumbnailUrl(movieId: number, fileName: string): string {
+    return `${environment.baseUrl}/media/thumbnails/${movieId}/${fileName}_480p.jpg`;
+  }
+
   // Category scroll
 
   @HostListener('window:resize')

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

@@ -23,13 +23,14 @@ import { UserService } from '../../../../services/user.service';
 export class HeroBannerComponent {
   @Input() currentMovie: any[] = [];
   @Input() screenWidth: boolean = false;
+  @Input() favoriteMovies: any[] = [];
   @Output() playMovie = new EventEmitter<string>();
   @Output() movieIsUploadedChange = new EventEmitter<{
     [resolution: string]: boolean;
   }>();
   @Output() moviesChange = new EventEmitter<any[]>();
+  @Output() favoriteMovieChange = new EventEmitter<any[]>();
 
-  currentUserLikedMovies: number[] = [];
   environmentBaseUrl: string = environment.baseUrl;
   movieIsUploaded: { [resolution: string]: boolean } = {
     '480': false,
@@ -42,39 +43,17 @@ export class HeroBannerComponent {
     public userService: UserService
   ) {}
 
-  ngOnInit() {
-    this.loadLikedMovies();
+  toggleLikeMovie(movieId: number): void {
+    if (this.favoriteMovies.includes(movieId)) {
+      this.favoriteMovies = this.favoriteMovies.filter((id) => id !== movieId);
+    } else {
+      this.favoriteMovies.push(movieId);
+    }
+    this.favoriteMovieChange.emit(this.favoriteMovies);
   }
 
   checkLikeMovies(videoId: number) {
-    return this.currentUserLikedMovies.includes(videoId);
-  }
-
-  async loadLikedMovies() {
-    try {
-      const likedMovies = await this.userService.getLikedMovies();
-      this.currentUserLikedMovies = likedMovies.liked_videos;
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  toggleLikeMovie(movieId: number): void {
-    if (this.currentUserLikedMovies.includes(movieId)) {
-      this.currentUserLikedMovies = this.currentUserLikedMovies.filter(
-        (id) => id !== movieId
-      );
-    } else {
-      this.currentUserLikedMovies.push(movieId);
-    }
-    this.updateLikeMovies();
-  }
-
-  updateLikeMovies() {
-    const body = {
-      liked_videos: this.currentUserLikedMovies,
-    };
-    this.userService.updateLikedMovies(body);
+    return this.favoriteMovies.includes(videoId);
   }
 
   ngOnChanges(changes: SimpleChanges) {