Add functionality to mark video as watched on server when viewed

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

@@ -16,6 +16,7 @@
     [screenWidth]="checkScreenWidth()"
     [currentMovie]="currentMovie"
     [favoriteMovies]="favoriteMovies"
+    [watchedMovies]="watchedMovies"
     (playMovie)="playVideo($event)"
     (movieIsUploadedChange)="onMovieIsUploadedChange($event)"
     (moviesChange)="onMoviesChange($event)"

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

@@ -54,7 +54,7 @@
         [imgPath]="'play'"
         [imgReverse]="true"
         [disabled]="!isAnyResolutionUploaded()"
-        (click)="playMovieId(playUrl)"
+        (click)="playMovieId(playUrl, currentMovie[0].id)"
       ></app-btn-large>
       <div class="favorite-img" (click)="toggleLikeMovie(currentMovie[0].id)">
         @if(checkLikeMovies(currentMovie[0].id)) {

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

@@ -27,6 +27,7 @@ export class HeroBannerComponent implements OnChanges {
   @Input() currentMovie: any[] = [];
   @Input() screenWidth: boolean = false;
   @Input() favoriteMovies: any[] = [];
+  @Input() watchedMovies: any[] = [];
   @Output() playMovie = new EventEmitter<string>();
   @Output() movieIsUploadedChange = new EventEmitter<{
     [resolution: string]: boolean;
@@ -100,6 +101,22 @@ export class HeroBannerComponent implements OnChanges {
     this.favoriteMovieChange.emit(this.favoriteMovies);
   }
 
+  toggleWatchedMovie(movieId: number): void {
+    if (this.watchedMovies.includes(movieId)) {
+      this.watchedMovies = this.watchedMovies.filter((id) => id !== movieId);
+    } else {
+      this.watchedMovies.push(movieId);
+    }
+    this.updateWatchedMovies();
+  }
+
+  updateWatchedMovies() {
+    const body = {
+      watched_videos: this.watchedMovies,
+    };
+    this.userService.updateWatchedMovies(body);
+  }
+
   checkLikeMovies(videoId: number) {
     return this.favoriteMovies.includes(videoId);
   }
@@ -120,7 +137,8 @@ export class HeroBannerComponent implements OnChanges {
     this.moviesChange.emit(newMovies);
   }
 
-  playMovieId(videoPath: string) {
+  playMovieId(videoPath: string, videoId: number) {
     this.playMovie.emit(videoPath);
+    this.toggleWatchedMovie(videoId);
   }
 }

frontend/src/app/services/user.service.ts

@@ -23,6 +23,12 @@ export class UserService {
     return lastValueFrom(this.http.put(url, likedMovies, { headers }));
   }
 
+  updateWatchedMovies(watchedMovies: any) {
+    const url = `${environment.baseUrl}/users/watched/${this.currentUserId}/`;
+    const headers = this.getAuthHeaders();
+    return lastValueFrom(this.http.put(url, watchedMovies, { headers }));
+  }
+
   private getAuthHeaders(): HttpHeaders {
     let authToken = localStorage.getItem('authToken');
     if (!authToken) {