refactor: replace "any" with specific types in several components

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

@@ -22,8 +22,8 @@ import { GenreService } from '../../../services/genre.service';
 export class CategoriesComponent implements AfterViewInit {
   @Input() videos: Video[] = [];
   @Input() currentVideo: Video | null = null;
-  @Input() favoriteVideos: any[] = [];
-  @Input() watchedVideos: any[] = [];
+  @Input() favoriteVideos: number[] = [];
+  @Input() watchedVideos: number[] = [];
 
   @Output() currentVideoId = new EventEmitter<number>();
 
@@ -74,8 +74,9 @@ export class CategoriesComponent implements AfterViewInit {
    * @returns An array of favorite videos
    */
   getFavoriteVideos(): Video[] {
-    return this.videos.filter((video) =>
-      this.favoriteVideos.includes(video.id)
+    return this.videos.filter(
+      (video) =>
+        video.id !== undefined && this.favoriteVideos.includes(video.id)
     );
   }
 

frontend/src/app/components/home/categories/video-list/video-list.component.html

@@ -9,9 +9,11 @@
         alt=""
       />
     </div>
-    <div *ngIf="watchedVideos.includes(video.id)" class="watched">
+    @if (getWatchedVideos()) {
+    <div class="watched">
       <img src="./assets/img/open-eye.svg" alt="" />
     </div>
+    }
   </div>
   }
 

frontend/src/app/components/home/categories/video-list/video-list.component.ts

@@ -13,7 +13,7 @@ import { Video } from '../../../../interfaces/video.interface';
 export class VideoListComponent {
   @Input() videos: Video[] = [];
   @Input() currentVideo: Video | null = null;
-  @Input() watchedVideos: any[] = [];
+  @Input() watchedVideos: number[] = [];
   @Input() videoCategory: string = '';
 
   @Output() currentVideoId = new EventEmitter<number>();
@@ -29,6 +29,16 @@ export class VideoListComponent {
     return `${environment.baseUrl}/media/thumbnails/${id}/${fileName}_480p.jpg`;
   }
 
+  /**
+   * Filters and returns all watched videos.
+   * @returns An array of watched videos.
+   */
+  getWatchedVideos(): Video[] {
+    return this.videos.filter(
+      (video) => video.id !== undefined && this.watchedVideos.includes(video.id)
+    );
+  }
+
   /**
    * Set the current video based on the given videoId and emit the videoId.
    * @param videoId The id of the video to set as the current video.

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

@@ -38,9 +38,9 @@ export class HeroBannerComponent implements OnChanges {
     [resolution: string]: boolean;
   }>();
   @Output() refreshChange = new EventEmitter<Video[]>();
-  @Output() videosChange = new EventEmitter<any[]>();
-  @Output() favoriteVideoChange = new EventEmitter<any[]>();
-  @Output() watchedVideoChange = new EventEmitter<any[]>();
+  @Output() videosChange = new EventEmitter<Video[]>();
+  @Output() favoriteVideoChange = new EventEmitter<number[]>();
+  @Output() watchedVideoChange = new EventEmitter<number[]>();
 
   isVideoLoaded: boolean = false;
   previewClipUrl: string = '';

frontend/src/app/components/home/upload-video/upload-video.component.ts

@@ -7,7 +7,11 @@ import { VideoService } from '../../../services/video.service';
 import { LoadingDialogComponent } from '../../../shared/components/loading-dialog/loading-dialog.component';
 import { Video } from '../../../interfaces/video.interface';
 import { GenreService } from '../../../services/genre.service';
-import { HttpEvent, HttpEventType } from '@angular/common/http';
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpEventType,
+} from '@angular/common/http';
 
 @Component({
   selector: 'app-upload-video',
@@ -144,8 +148,12 @@ export class UploadVideoComponent {
    * Handles upload errors and resets UI state.
    * @param err - The error from the upload observable
    */
-  private handleUploadError(err: any): void {
-    this.errorService.handleError(err);
+  private handleUploadError(err: unknown): void {
+    if (err instanceof HttpErrorResponse) {
+      this.errorService.handleError(err);
+    } else {
+      console.error('An unknown error occurred during upload:', err);
+    }
     this.uploadProgress = null;
     this.videoData.send = false;
   }