From 22dcb8503dc13ecd819659b209dccf39ebf2e8c0 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sun, 4 May 2025 15:09:29 +0200
Subject: [PATCH] feat: add screen resize handling to HomeComponent for
 responsive video selection

---
 .../app/components/home/home.component.html   |  4 ++--
 .../src/app/components/home/home.component.ts | 21 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/home/home.component.html b/frontend/src/app/components/home/home.component.html
index 991d92e..6731a24 100644
--- a/frontend/src/app/components/home/home.component.html
+++ b/frontend/src/app/components/home/home.component.html
@@ -9,7 +9,7 @@
   ></app-header>
   <!-- Hero Banner -->
   <app-hero-banner
-    *ngIf="currentVideo !== null || (isWideScreenView && currentVideo !== null)"
+    *ngIf="currentVideo || (isWideScreenView && currentVideo)"
     [videos]="videos"
     [isWideScreen]="isWideScreenView"
     [currentVideo]="currentVideo"
@@ -25,7 +25,7 @@
   <div *ngIf="!isWideScreenView" class="spacer"></div>
   <!-- Video Categories -->
   <app-categories
-    *ngIf="isWideScreenView || (!isWideScreenView && currentVideo !== null)"
+    *ngIf="isWideScreenView || (!isWideScreenView && !currentVideo)"
     [videos]="videos"
     [currentVideo]="currentVideo"
     [favoriteVideos]="favoriteVideos"
diff --git a/frontend/src/app/components/home/home.component.ts b/frontend/src/app/components/home/home.component.ts
index 29e49fd..91a5747 100644
--- a/frontend/src/app/components/home/home.component.ts
+++ b/frontend/src/app/components/home/home.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
 import { HeaderComponent } from '../../shared/components/header/header.component';
 import { HeroBannerComponent } from './hero-banner/hero-banner.component';
 import { CategoriesComponent } from './categories/categories.component';
@@ -233,4 +233,23 @@ export class HomeComponent implements OnInit {
   toggleUploadVideoOverview(value: boolean): void {
     this.uploadVideoOverview = value;
   }
+
+  /**
+   * Listens for window resize events and triggers the screen size check.
+   *
+   * @param event The resize event triggered when the window is resized.
+   */
+  @HostListener('window:resize', ['$event'])
+  onResize(event: Event): void {
+    this.checkScreenSize();
+  }
+
+  /**
+   * Checks the screen size and selects a random video if wide screen and no video is selected.
+   */
+  private checkScreenSize(): void {
+    if (this.isWideScreenView && !this.currentVideo) {
+      this.selectRandomVideoAsCurrent();
+    }
+  }
 }