From ee95b0d8c5eed5bd5e250ccadc250b832cc86f1d Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Wed, 14 May 2025 19:35:54 +0200
Subject: [PATCH] refactor: clean up and improve function logic in
 VideoListComponent

---
 .../home/categories/categories.component.html |  6 +-
 .../video-list/video-list.component.ts        | 63 +++++++++----------
 2 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/frontend/src/app/components/home/categories/categories.component.html b/frontend/src/app/components/home/categories/categories.component.html
index 3eda400..90bef8e 100644
--- a/frontend/src/app/components/home/categories/categories.component.html
+++ b/frontend/src/app/components/home/categories/categories.component.html
@@ -8,7 +8,7 @@
       [videos]="recentVideos()"
       [currentVideo]="currentVideo"
       [watchedVideos]="watchedVideos"
-      (currentVideoId)="openCurrentVideo($event)"
+      (videoSelected)="openCurrentVideo($event)"
     ></app-video-list>
   </div>
   }
@@ -21,7 +21,7 @@
       [videos]="getFavoriteVideos()"
       [currentVideo]="currentVideo"
       [watchedVideos]="watchedVideos"
-      (currentVideoId)="openCurrentVideo($event)"
+      (videoSelected)="openCurrentVideo($event)"
     ></app-video-list>
   </div>
   }
@@ -40,7 +40,7 @@
       [videos]="getAllVideos(genre.code)"
       [currentVideo]="currentVideo"
       [watchedVideos]="watchedVideos"
-      (currentVideoId)="openCurrentVideo($event)"
+      (videoSelected)="openCurrentVideo($event)"
     ></app-video-list>
   </div>
   } } } @else {
diff --git a/frontend/src/app/components/home/categories/video-list/video-list.component.ts b/frontend/src/app/components/home/categories/video-list/video-list.component.ts
index e1a8d57..e973f20 100644
--- a/frontend/src/app/components/home/categories/video-list/video-list.component.ts
+++ b/frontend/src/app/components/home/categories/video-list/video-list.component.ts
@@ -14,9 +14,8 @@ export class VideoListComponent {
   @Input() videos: Video[] = [];
   @Input() currentVideo: Video | null = null;
   @Input() watchedVideos: number[] = [];
-  @Input() videoCategory: string = '';
 
-  @Output() currentVideoId = new EventEmitter<number>();
+  @Output() videoSelected = new EventEmitter<number>();
 
   /**
    * Get the URL of the thumbnail image for the given videoId and fileName.
@@ -24,50 +23,50 @@ export class VideoListComponent {
    * @param fileName The name of the video file.
    * @returns The URL of the thumbnail image.
    */
-  getThumbnailUrl(videoId: number | undefined, fileName: string): string {
-    const id = videoId ?? 0;
-    return `${environment.baseUrl}/media/thumbnails/${id}/${fileName}_480p.jpg`;
+  getThumbnailUrl(videoId: number, fileName: string): string {
+    return `${environment.baseUrl}/media/thumbnails/${videoId}/${fileName}_480p.jpg`;
   }
 
   /**
-   * 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.
+   * Sets the given video as the currently active video and emits its ID to the parent component.
+   * @param videoId The ID of the video to be marked as current.
    */
-  openCurrentVideo(videoId: number | undefined) {
-    if (videoId !== undefined) {
-      const video = this.videos.find((v) => v.id === videoId);
-      if (video) {
-        this.currentVideo = video;
-        this.currentVideoId.emit(videoId);
-      }
+  openCurrentVideo(videoId: number): void {
+    const video = this.videos.find((v) => v.id === videoId);
+    if (video) {
+      this.currentVideo = video;
+      this.videoSelected.emit(video.id);
     }
   }
 
   /**
-   * Scrolls the video container to the left by a fixed amount when the scroll-left button is clicked.
-   * @param event The mouse event triggered by clicking the scroll-left button.
+   * Scrolls the video container to the left when the left scroll button is clicked.
+   * @param event Mouse click event from the left scroll button.
    */
-  scrollLeft(event: MouseEvent) {
+  scrollLeft(event: MouseEvent): void {
+    this.scrollContainer(event, -217);
+  }
+
+  /**
+   * Scrolls the video container to the right when the right scroll button is clicked.
+   * @param event Mouse click event from the right scroll button.
+   */
+  scrollRight(event: MouseEvent): void {
+    this.scrollContainer(event, 217);
+  }
+
+  /**
+   * Adjusts the horizontal scroll position of the video container.
+   * @param event Mouse event triggered by the scroll button.
+   * @param offset Amount in pixels to scroll (positive for right, negative for left).
+   */
+  private scrollContainer(event: MouseEvent, offset: number): void {
     const button = event.target as HTMLElement;
     const container = button
       .closest('.category')
       ?.querySelector('.videos') as HTMLElement;
     if (container) {
-      container.scrollLeft -= 217;
-    }
-  }
-
-  /**
-   * Scrolls the video container to the right by a fixed amount when the scroll-right button is clicked.
-   * @param event The mouse event triggered by clicking the scroll-right button.
-   */
-  scrollRight(event: MouseEvent) {
-    const button = event.target as HTMLElement;
-    const container = button
-      .closest('.category')
-      ?.querySelector('.videos') as HTMLElement;
-    if (container) {
-      container.scrollLeft += 217;
+      container.scrollLeft += offset;
     }
   }
 }