From 90dca91f6d7382b98c5370b2db86303b5ed77273 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Fri, 13 Sep 2024 20:53:06 +0200
Subject: [PATCH] Implement video watched status display in frontend

---
 backend/videoflix/users/serializer.py         |  2 +-
 .../home/browse/browse.component.html         |  1 +
 .../home/browse/browse.component.ts           | 10 +++---
 .../categories/categories.component.html      | 19 +++++++----
 .../categories/categories.component.scss      | 34 ++++++++++++++-----
 .../browse/categories/categories.component.ts |  1 +
 frontend/src/app/services/user.service.ts     |  2 +-
 7 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/backend/videoflix/users/serializer.py b/backend/videoflix/users/serializer.py
index d008966..6b3ea0f 100644
--- a/backend/videoflix/users/serializer.py
+++ b/backend/videoflix/users/serializer.py
@@ -4,7 +4,7 @@ from .models import CustomUser
 class UserSerializer(serializers.ModelSerializer):
   class Meta:
     model = CustomUser
-    fields = ["id", "username", "email", "liked_videos"]
+    fields = ["id", "username", "email", "liked_videos", "watched_videos"]
     
 
 class LikedVideosSerializer(serializers.ModelSerializer):
diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index 4e3ce09..d128ea6 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/frontend/src/app/components/home/browse/browse.component.html
@@ -33,6 +33,7 @@
     [movies]="movies"
     [currentMovie]="currentMovie[0]?.id"
     [favoriteMovies]="favoriteMovies"
+    [watchedMovies]="watchedMovies"
     (currentMovieId)="currentMovieId($event)"
   ></app-categories>
   } @else {
diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts
index 457aa93..c5e7adb 100644
--- a/frontend/src/app/components/home/browse/browse.component.ts
+++ b/frontend/src/app/components/home/browse/browse.component.ts
@@ -28,6 +28,7 @@ export class BrowseComponent implements OnInit {
   @ViewChild(VideoPlayerComponent) videoPlayer!: VideoPlayerComponent;
   movies: any[] = [];
   favoriteMovies: number[] = [];
+  watchedMovies: number[] = [];
   currentMovie: any[] = [];
   playMovie: string = '';
   isLoading: boolean = true;
@@ -46,17 +47,18 @@ export class BrowseComponent implements OnInit {
   ) {}
 
   async ngOnInit() {
-    this.loadLikedMovies();
+    this.loadLikedAndWatchedMovies();
     await this.loadAllMovies();
     if (this.checkScreenWidth()) {
       this.currentMovie.length === 0 ? this.loadRandomMovie() : null;
     }
   }
 
-  async loadLikedMovies() {
+  async loadLikedAndWatchedMovies() {
     try {
-      const likedMovies = await this.userService.getLikedMovies();
-      this.favoriteMovies = likedMovies.liked_videos;
+      const userData = await this.userService.getLikedAndWatchedMovies();
+      this.favoriteMovies = userData.liked_videos;
+      this.watchedMovies = userData.watched_videos;
     } catch (error) {
       console.error(error);
     }
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 8c924e5..c0d4b58 100644
--- a/frontend/src/app/components/home/browse/categories/categories.component.html
+++ b/frontend/src/app/components/home/browse/categories/categories.component.html
@@ -46,7 +46,6 @@
       </div>
     </div>
   </div>
-
   <!-- Genre columns -->
   @for (filmGenre of filmGenres; track filmGenre) {
   <!-- Movie available in genre -->
@@ -56,12 +55,20 @@
     <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]="getThumbnailUrl(movie.id, movie.file_name)"
-          alt=""
-        />
+        <div class="banner">
+          <img
+            [ngClass]="{ selected: movie.id === currentMovie }"
+            [src]="getThumbnailUrl(movie.id, movie.file_name)"
+            alt=""
+          />
+        </div>
+        @if (watchedMovies.includes(movie.id)) {
+        <div class="watched">
+          <img src="./../../../../../assets/img/open-eye.svg" alt="" />
+        </div>
+        }
       </div>
       }
       <!-- Buttons for scrolling -->
diff --git a/frontend/src/app/components/home/browse/categories/categories.component.scss b/frontend/src/app/components/home/browse/categories/categories.component.scss
index 44f54a3..5562631 100644
--- a/frontend/src/app/components/home/browse/categories/categories.component.scss
+++ b/frontend/src/app/components/home/browse/categories/categories.component.scss
@@ -19,18 +19,34 @@ section {
 // Movies
 
 .movie {
+  position: relative;
   width: 213px;
   height: 120px;
   padding: 6px;
-  img {
-    width: 213px;
-    height: 120px;
-    transition: scale 300ms ease-in-out;
-    border: 2px solid rgba($black, 0);
-    cursor: pointer;
-    &:hover {
-      scale: 1.02;
-      border: 2px solid $blue;
+  .banner {
+    img {
+      width: 213px;
+      height: 120px;
+      transition: scale 300ms ease-in-out;
+      border: 2px solid rgba($black, 0);
+      cursor: pointer;
+      &:hover {
+        scale: 1.02;
+        border: 2px solid $blue;
+      }
+    }
+  }
+  .watched {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    z-index: 2;
+    img {
+      width: 24px;
+      height: auto;
+      filter: brightness(0) saturate(100%) invert(100%) sepia(28%) saturate(1%)
+        hue-rotate(288deg) brightness(101%) contrast(101%)
+        drop-shadow(0 0 5px rgba(38, 143, 255, 1));
     }
   }
 }
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 c055af6..0fbd051 100644
--- a/frontend/src/app/components/home/browse/categories/categories.component.ts
+++ b/frontend/src/app/components/home/browse/categories/categories.component.ts
@@ -20,6 +20,7 @@ export class CategoriesComponent implements AfterViewInit {
   @Input() movies: any[] = [];
   @Input() currentMovie: number = 0;
   @Input() favoriteMovies: any[] = [];
+  @Input() watchedMovies: any[] = [];
   @Output() currentMovieId = new EventEmitter<number>();
 
   environmentBaseUrl: string = environment.baseUrl;
diff --git a/frontend/src/app/services/user.service.ts b/frontend/src/app/services/user.service.ts
index 8b3beba..5fc14e8 100644
--- a/frontend/src/app/services/user.service.ts
+++ b/frontend/src/app/services/user.service.ts
@@ -11,7 +11,7 @@ export class UserService {
 
   constructor(private http: HttpClient) {}
 
-  async getLikedMovies(): Promise<any> {
+  async getLikedAndWatchedMovies(): Promise<any> {
     const url = environment.baseUrl + `/users/${this.currentUserId}/`;
     const headers = this.getAuthHeaders();
     return lastValueFrom(this.http.get(url, { headers }));