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

refactor: clean up and improve function logic in VideoListComponent

Browse source
This commit is contained in:
Chneemann 2025-05-14 19:35:54 +02:00
parent 7a277f65b4
commit ee95b0d8c5
2 changed files with 34 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/components/home/categories/categories.component.html
View file

@ -8,7 +8,7 @@
[videos]="recentVideos()" [videos]="recentVideos()"
[currentVideo]="currentVideo" [currentVideo]="currentVideo"
[watchedVideos]="watchedVideos" [watchedVideos]="watchedVideos"
(currentVideoId)="openCurrentVideo($event)" (videoSelected)="openCurrentVideo($event)"
></app-video-list> ></app-video-list>
</div> </div>
} }
@ -21,7 +21,7 @@
[videos]="getFavoriteVideos()" [videos]="getFavoriteVideos()"
[currentVideo]="currentVideo" [currentVideo]="currentVideo"
[watchedVideos]="watchedVideos" [watchedVideos]="watchedVideos"
(currentVideoId)="openCurrentVideo($event)" (videoSelected)="openCurrentVideo($event)"
></app-video-list> ></app-video-list>
</div> </div>
} }
@ -40,7 +40,7 @@
[videos]="getAllVideos(genre.code)" [videos]="getAllVideos(genre.code)"
[currentVideo]="currentVideo" [currentVideo]="currentVideo"
[watchedVideos]="watchedVideos" [watchedVideos]="watchedVideos"
(currentVideoId)="openCurrentVideo($event)" (videoSelected)="openCurrentVideo($event)"
></app-video-list> ></app-video-list>
</div> </div>
} } } @else { } } } @else {

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

@ -14,9 +14,8 @@ export class VideoListComponent {
@Input() videos: Video[] = []; @Input() videos: Video[] = [];
@Input() currentVideo: Video | null = null; @Input() currentVideo: Video | null = null;
@Input() watchedVideos: number[] = []; @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. * 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. * @param fileName The name of the video file.
* @returns The URL of the thumbnail image. * @returns The URL of the thumbnail image.
*/ */
getThumbnailUrl(videoId: number | undefined, fileName: string): string { getThumbnailUrl(videoId: number, fileName: string): string {
const id = videoId ?? 0; return `${environment.baseUrl}/media/thumbnails/${videoId}/${fileName}_480p.jpg`;
return `${environment.baseUrl}/media/thumbnails/${id}/${fileName}_480p.jpg`;
} }
/** /**
* Set the current video based on the given videoId and emit the videoId. * 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 set as the current video. * @param videoId The ID of the video to be marked as current.
*/ */
openCurrentVideo(videoId: number | undefined) { openCurrentVideo(videoId: number): void {
if (videoId !== undefined) { const video = this.videos.find((v) => v.id === videoId);
const video = this.videos.find((v) => v.id === videoId); if (video) {
if (video) { this.currentVideo = video;
this.currentVideo = video; this.videoSelected.emit(video.id);
this.currentVideoId.emit(videoId);
}
} }
} }
/** /**
* Scrolls the video container to the left by a fixed amount when the scroll-left button is clicked. * Scrolls the video container to the left when the left scroll button is clicked.
* @param event The mouse event triggered by clicking the scroll-left button. * @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 button = event.target as HTMLElement;
const container = button const container = button
.closest('.category') .closest('.category')
?.querySelector('.videos') as HTMLElement; ?.querySelector('.videos') as HTMLElement;
if (container) { if (container) {
container.scrollLeft -= 217; container.scrollLeft += offset;
}
}
/**
* 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;
} }
} }
} }