diff --git a/backend/videoflix/users/serializer.py b/backend/videoflix/users/serializer.py index 5e666f8..a3f1b5b 100644 --- a/backend/videoflix/users/serializer.py +++ b/backend/videoflix/users/serializer.py @@ -4,4 +4,4 @@ from .models import CustomUser class UserSerializer(serializers.ModelSerializer): class Meta: model = CustomUser - fields = ["id", "username", "email"] \ No newline at end of file + fields = ["id", "username", "email", "liked_videos"] \ No newline at end of file diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html index 14c5104..8f560bc 100644 --- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html +++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html @@ -58,6 +58,14 @@ ) " > +
+ +
} 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 36b4acf..1570c83 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 @@ -81,9 +81,37 @@ section { bottom: -70px; left: 0; display: flex; + align-items: center; justify-content: left; width: 100%; gap: 12px; + .btn-small { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + background-color: blue; + border-radius: 50%; + cursor: pointer; + &:hover { + background-color: $white; + transition: 300ms ease-in-out; + img { + filter: brightness(0) saturate(100%) invert(18%) sepia(98%) + saturate(7267%) hue-rotate(342deg) brightness(94%) contrast(119%); + } + } + img { + width: 28px; + height: 28px; + } + } +} + +.red { + filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(7267%) + hue-rotate(342deg) brightness(94%) contrast(119%); } .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 1d337c8..c22ddca 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 @@ -11,6 +11,7 @@ import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-lar import { MovieService } from '../../../../services/movie.service'; import { environment } from '../../../../environments/environment'; import { BtnSmallComponent } from '../../../../shared/components/buttons/btn-small/btn-small.component'; +import { UserService } from '../../../../services/user.service'; @Component({ selector: 'app-hero-banner', @@ -28,17 +29,36 @@ export class HeroBannerComponent { }>(); @Output() moviesChange = new EventEmitter(); + currentUserLikedCurrentMovie: boolean = false; environmentBaseUrl: string = environment.baseUrl; movieIsUploaded: { [resolution: string]: boolean } = { '480': false, '720': false, '1080': false, }; - constructor(private el: ElementRef, private movieService: MovieService) {} + constructor( + private el: ElementRef, + private movieService: MovieService, + public userService: UserService + ) {} + + async loadLikedMovies() { + try { + const likedMovies = await this.userService.getLikedMovies(); + this.currentUserLikedCurrentMovie = likedMovies.liked_videos.includes( + this.currentMovie[0].id + ); + } catch (error) { + console.error(error); + } + } + + toggleLikeMovie(movieId: number) {} ngOnChanges(changes: SimpleChanges) { if (changes['currentMovie'] && this.currentMovie.length > 0) { const movieId = this.currentMovie[0]?.id; + this.loadLikedMovies(); if (movieId) { this.movieService .isMovieResolutionUploaded(movieId) diff --git a/frontend/src/app/services/auth.service.ts b/frontend/src/app/services/auth.service.ts index 726bf31..ff4ea20 100644 --- a/frontend/src/app/services/auth.service.ts +++ b/frontend/src/app/services/auth.service.ts @@ -2,6 +2,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { catchError, lastValueFrom, map, Observable, of } from 'rxjs'; import { environment } from '../environments/environment'; +import { UserService } from './user.service'; @Injectable({ providedIn: 'root', @@ -11,7 +12,7 @@ export class AuthService { passwordFieldType: string = 'password'; passwordIcon: string = './../../../assets/img/close-eye.svg'; - constructor(private http: HttpClient) {} + constructor(private http: HttpClient, private userService: UserService) {} togglePasswordVisibility() { this.passwordFieldType = @@ -66,11 +67,18 @@ export class AuthService { checkAuthUser(): Observable { const headers = this.getAuthHeaders(); return this.http.get(`${environment.baseUrl}/auth/`, { headers }).pipe( - map((response) => true), + map((response) => { + this.saveUserId(response); + return true; + }), catchError(() => of(false)) ); } + saveUserId(userId: string): void { + this.userService.currentUserId = userId; + } + async checkAuthUserMail(body: any) { await lastValueFrom(this.http.post(`${environment.baseUrl}/auth/`, body)); } diff --git a/frontend/src/app/services/user.service.ts b/frontend/src/app/services/user.service.ts new file mode 100644 index 0000000..930f632 --- /dev/null +++ b/frontend/src/app/services/user.service.ts @@ -0,0 +1,30 @@ +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { environment } from '../environments/environment'; +import { lastValueFrom } from 'rxjs'; + +@Injectable({ + providedIn: 'root', +}) +export class UserService { + currentUserId: string | null = null; + + constructor(private http: HttpClient) {} + + async getLikedMovies(): Promise { + const url = environment.baseUrl + `/users/${this.currentUserId}/`; + const headers = this.getAuthHeaders(); + + return lastValueFrom(this.http.get(url, { headers })); + } + + private getAuthHeaders(): HttpHeaders { + let authToken = localStorage.getItem('authToken'); + if (!authToken) { + authToken = sessionStorage.getItem('authToken'); + } + return new HttpHeaders({ + Authorization: `Token ${authToken}`, + }); + } +} diff --git a/frontend/src/assets/img/favorite.svg b/frontend/src/assets/img/favorite.svg new file mode 100644 index 0000000..497d684 --- /dev/null +++ b/frontend/src/assets/img/favorite.svg @@ -0,0 +1 @@ + \ No newline at end of file