From 5fc3e5b06252a979a1f72a95e119f7cea333c167 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Wed, 28 Aug 2024 15:24:51 +0200 Subject: [PATCH] display & save favorite movies --- .../home/browse/browse.component.html | 3 ++ .../home/browse/browse.component.ts | 27 ++++++++++- .../categories/categories.component.html | 47 ++++++++++++------- .../browse/categories/categories.component.ts | 5 ++ .../hero-banner/hero-banner.component.ts | 41 ++++------------ 5 files changed, 74 insertions(+), 49 deletions(-) diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html index 7116474..7d6f4e1 100644 --- a/frontend/src/app/components/home/browse/browse.component.html +++ b/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)" >
@@ -28,6 +30,7 @@ " [movies]="movies" [currentMovie]="currentMovie[0]?.id" + [favoriteMovies]="favoriteMovies" (currentMovieId)="currentMovieId($event)" > } @else { diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts index 1a16239..e4fe8e9 100644 --- a/frontend/src/app/components/home/browse/browse.component.ts +++ b/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); 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 e998411..6023588 100644 --- a/frontend/src/app/components/home/browse/categories/categories.component.html +++ b/frontend/src/app/components/home/browse/categories/categories.component.html @@ -3,19 +3,12 @@

Added in the last 7 days

- + @for (movie of recentMovies(); track movie) {
@@ -28,6 +21,32 @@
+ +
+

Favorites

+
+ + @for (favorite of favoriteMovies; track favorite) { + + @for (movie of movies; track movie) { + + @if (movie.id === favorite) { +
+ +
+ } } } + +
+ + +
+
+
+ @for (filmGenre of filmGenres; track filmGenre) { @@ -35,18 +54,12 @@

{{ filmGenre.name }}

+ @for (movie of allMovies(filmGenre.code); track movie) {
diff --git a/frontend/src/app/components/home/browse/categories/categories.component.ts b/frontend/src/app/components/home/browse/categories/categories.component.ts index 9440b92..63aeba2 100644 --- a/frontend/src/app/components/home/browse/categories/categories.component.ts +++ b/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(); 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') 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 d19d6c5..05cd5fc 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 @@ -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(); @Output() movieIsUploadedChange = new EventEmitter<{ [resolution: string]: boolean; }>(); @Output() moviesChange = new EventEmitter(); + @Output() favoriteMovieChange = new EventEmitter(); - 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) {