Implement video watched status display in frontend

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):

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 {

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);
     }

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,13 +55,21 @@
     <div class="movies">
       <!-- Load movies -->
       @for (movie of allMovies(filmGenre.code); track movie) {
+
       <div class="movie" (click)="openCurrentMovie(movie.id)">
+        <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 -->
       <div class="scroll-buttons">

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

@@ -19,9 +19,11 @@ section {
 // Movies
 
 .movie {
+  position: relative;
   width: 213px;
   height: 120px;
   padding: 6px;
+  .banner {
     img {
       width: 213px;
       height: 120px;
@@ -33,6 +35,20 @@ section {
         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));
+    }
+  }
 }
 
 .selected {

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;

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 }));