fix: prevent toggling watched videos, only add once when not already marked

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

@@ -196,10 +196,12 @@ export class HeroBannerComponent implements OnChanges {
       this.favoriteVideos = this.toggleArrayItem(this.favoriteVideos, videoId);
       this.favoriteVideoChange.emit(this.favoriteVideos);
     } else if (statusType === 'watched') {
-      this.watchedVideos = this.toggleArrayItem(this.watchedVideos, videoId);
+      if (!this.watchedVideos.includes(videoId)) {
+        this.watchedVideos = [...this.watchedVideos, videoId];
         this.watchedVideoChange.emit(this.watchedVideos);
       }
     }
+  }
 
   /**
    * Toggles the presence of an item in an array, returning a new array.

frontend/src/app/components/home/home.component.ts

@@ -118,24 +118,6 @@ export class HomeComponent implements OnInit {
     }
   }
 
-  /**
-   * Updates user's liked videos in the backend.
-   */
-  private updateLikedVideos(): void {
-    const body = {
-      liked_videos: this.favoriteVideos,
-    };
-    this.userService.updateLikedVideos(body);
-  }
-
-  /**
-   * Updates user's liked videos in the backend.
-   */
-  private updateWatchedVideos(): void {
-    const body = { watched_videos: this.watchedVideos };
-    this.userService.updateWatchedVideos(body);
-  }
-
   /**
    * Called when favorite videos change.
    */
@@ -145,13 +127,31 @@ export class HomeComponent implements OnInit {
   }
 
   /**
-   * Called when favorite videos change.
+   * Called when watched videos change.
    */
   onWatchedVideoChange(watched: number[]): void {
     this.watchedVideos = watched;
     this.updateWatchedVideos();
   }
 
+  /**
+   * Updates user's watched videos in the backend.
+   */
+  private updateWatchedVideos(): void {
+    const body = { watched_videos: this.watchedVideos };
+    this.userService.updateWatchedVideos(body);
+  }
+
+  /**
+   * Updates user's liked videos in the backend.
+   */
+  private updateLikedVideos(): void {
+    const body = {
+      liked_videos: this.favoriteVideos,
+    };
+    this.userService.updateLikedVideos(body);
+  }
+
   /**
    * Updates current video after refresh.
    */