docs: add comments to functions in VideoPlayerComponent

This commit is contained in:
Chneemann 2025-04-26 22:53:10 +02:00
parent 187c9ed137
commit 189be57023

View file

@ -5,16 +5,25 @@ import Hls from 'hls.js';
@Component({ @Component({
selector: 'app-video-player', selector: 'app-video-player',
standalone: true, standalone: true,
imports: [],
templateUrl: './video-player.component.html', templateUrl: './video-player.component.html',
styleUrls: ['./video-player.component.scss'], styleUrls: ['./video-player.component.scss'],
}) })
export class VideoPlayerComponent implements OnInit, OnDestroy { export class VideoPlayerComponent implements OnInit, OnDestroy {
@Input() playMovie: string = ''; @Input() playMovie: string = '';
private hls: Hls | null = null; private hls: Hls | null = null;
private videoElement: HTMLVideoElement | null = null; private videoElement: HTMLVideoElement | null = null;
private resolutionUrls: { [key: string]: string } = {}; private resolutionUrls: { [key: string]: string } = {};
private defaultResolution: string; private defaultResolution: string;
/**
* Creates a new instance of the VideoPlayerComponent and sets the default
* resolution by fetching it from the ResolutionService.
*
* @param elementRef A reference to the DOM element which hosts the video player.
* @param resolutionService A service which provides the available resolutions.
*/
constructor( constructor(
private elementRef: ElementRef, private elementRef: ElementRef,
private resolutionService: ResolutionService private resolutionService: ResolutionService
@ -22,14 +31,25 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
this.defaultResolution = this.resolutionService.getDefaultResolution(); this.defaultResolution = this.resolutionService.getDefaultResolution();
} }
/**
* Angular lifecycle hook: Called once the component is initialized.
* Initializes the video player with the default resolution.
*/
ngOnInit(): void { ngOnInit(): void {
this.initializePlayer(); this.initializePlayer();
} }
/**
* Angular lifecycle hook: Called once the component is about to be destroyed.
* Cleans up HLS resources.
*/
ngOnDestroy(): void { ngOnDestroy(): void {
this.hls?.destroy(); this.hls?.destroy();
} }
/**
* Initializes the video player and loads the default resolution.
*/
private initializePlayer(): void { private initializePlayer(): void {
this.videoElement = this.elementRef.nativeElement.querySelector('video'); this.videoElement = this.elementRef.nativeElement.querySelector('video');
if (!this.playMovie || !this.videoElement) return; if (!this.playMovie || !this.videoElement) return;
@ -46,6 +66,10 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
this.updateScreenDimensions(); this.updateScreenDimensions();
} }
/**
* Generates a mapping of available resolutions to their respective URLs.
* @returns An object containing resolution-URL pairs.
*/
private getResolutionUrls(): { [key: string]: string } { private getResolutionUrls(): { [key: string]: string } {
return Object.fromEntries( return Object.fromEntries(
this.resolutionService this.resolutionService
@ -54,6 +78,10 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
); );
} }
/**
* Initializes the video player using HLS.js if supported.
* @param url - The URL of the video stream to load.
*/
private initHlsPlayer(url: string): void { private initHlsPlayer(url: string): void {
if (!this.videoElement) return; if (!this.videoElement) return;
this.hls = new Hls(); this.hls = new Hls();
@ -62,6 +90,10 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
this.hls.on(Hls.Events.MANIFEST_PARSED, () => this.videoElement?.play()); this.hls.on(Hls.Events.MANIFEST_PARSED, () => this.videoElement?.play());
} }
/**
* Initializes the native HTML5 video player if HLS is natively supported.
* @param url - The URL of the video stream to load.
*/
private initNativePlayer(url: string): void { private initNativePlayer(url: string): void {
if (!this.videoElement) return; if (!this.videoElement) return;
this.videoElement.src = url; this.videoElement.src = url;
@ -70,13 +102,19 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
); );
} }
/**
* Updates the video element's dimensions to match the window size.
*/
private updateScreenDimensions(): void { private updateScreenDimensions(): void {
if (this.videoElement) { if (!this.videoElement) return;
this.videoElement.style.width = `${window.innerWidth}px`; this.videoElement.style.width = `${window.innerWidth}px`;
this.videoElement.style.height = `${window.innerHeight}px`; this.videoElement.style.height = `${window.innerHeight}px`;
} }
}
/**
* Switches the video resolution to the specified one, or falls back to the default resolution if not available.
* @param resolution - The desired resolution (e.g., '720p', '1080p').
*/
public switchResolution(resolution: string): void { public switchResolution(resolution: string): void {
const targetUrl = const targetUrl =
this.resolutionUrls[resolution] || this.resolutionUrls[resolution] ||
@ -90,12 +128,21 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
} }
} }
/**
* Loads a new video stream source using HLS.js.
* @param url - The URL of the new video stream.
*/
private loadHlsSource(url: string): void { private loadHlsSource(url: string): void {
this.hls?.loadSource(url); this.hls?.loadSource(url);
this.hls?.attachMedia(this.videoElement!); this.hls?.attachMedia(this.videoElement!);
} }
/**
* Loads a new video stream source using the native HTML5 player.
* @param url - The URL of the new video stream.
*/
private loadNativeSource(url: string): void { private loadNativeSource(url: string): void {
if (this.videoElement) this.videoElement.src = url; if (!this.videoElement) return;
this.videoElement.src = url;
} }
} }