Chneemann/videoflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add screen resize handling to HomeComponent for responsive video selection

Browse source
This commit is contained in:
Chneemann 2025-05-04 15:09:29 +02:00
parent 22a9925bfe
commit 22dcb8503d
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/components/home/home.component.html
View file

@ -9,7 +9,7 @@
></app-header> ></app-header>
<!-- Hero Banner --> <!-- Hero Banner -->
<app-hero-banner <app-hero-banner
*ngIf="currentVideo !== null || (isWideScreenView && currentVideo !== null)" *ngIf="currentVideo || (isWideScreenView && currentVideo)"
[videos]="videos" [videos]="videos"
[isWideScreen]="isWideScreenView" [isWideScreen]="isWideScreenView"
[currentVideo]="currentVideo" [currentVideo]="currentVideo"
@ -25,7 +25,7 @@
<div *ngIf="!isWideScreenView" class="spacer"></div> <div *ngIf="!isWideScreenView" class="spacer"></div>
<!-- Video Categories --> <!-- Video Categories -->
<app-categories <app-categories
*ngIf="isWideScreenView || (!isWideScreenView && currentVideo !== null)" *ngIf="isWideScreenView || (!isWideScreenView && !currentVideo)"
[videos]="videos" [videos]="videos"
[currentVideo]="currentVideo" [currentVideo]="currentVideo"
[favoriteVideos]="favoriteVideos" [favoriteVideos]="favoriteVideos"

21
frontend/src/app/components/home/home.component.ts
View file

@ -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 { HeaderComponent } from '../../shared/components/header/header.component';
import { HeroBannerComponent } from './hero-banner/hero-banner.component'; import { HeroBannerComponent } from './hero-banner/hero-banner.component';
import { CategoriesComponent } from './categories/categories.component'; import { CategoriesComponent } from './categories/categories.component';
@ -233,4 +233,23 @@ export class HomeComponent implements OnInit {
toggleUploadVideoOverview(value: boolean): void { toggleUploadVideoOverview(value: boolean): void {
this.uploadVideoOverview = value; 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();
}
}
} }