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

refactor: optimize and improve readability of VideoPlayerComponent code

Browse source
This commit is contained in:
Chneemann 2025-04-26 22:46:11 +02:00
parent 3d4ad193a8
commit 187c9ed137
1 changed files with 46 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
frontend/src/app/components/home/video-player/video-player.component.ts
View file

@ -10,7 +10,6 @@ import Hls from 'hls.js';
})
export class VideoPlayerComponent implements OnInit, OnDestroy {
@Input() playMovie: string = '';
private hls: Hls | null = null;
private videoElement: HTMLVideoElement | null = null;
private resolutionUrls: { [key: string]: string } = {};
@ -28,67 +27,75 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
if (this.hls) {
this.hls.destroy();
}
this.hls?.destroy();
}
private initializePlayer(): void {
this.videoElement = this.elementRef.nativeElement.querySelector(
'video'
) as HTMLVideoElement;
if (!this.playMovie) {
console.error('playMovie is not set.');
return;
}
this.resolutionUrls = Object.fromEntries(
this.resolutionService
.getAvailableResolutions()
.map((res) => [res, `${this.playMovie}_${res}.m3u8`])
);
this.videoElement = this.elementRef.nativeElement.querySelector('video');
if (!this.playMovie || !this.videoElement) return;
this.resolutionUrls = this.getResolutionUrls();
const defaultUrl = this.resolutionUrls[this.defaultResolution];
if (Hls.isSupported() && this.videoElement) {
this.hls = new Hls();
this.hls.loadSource(defaultUrl);
this.hls.attachMedia(this.videoElement);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.videoElement?.play();
});
if (Hls.isSupported()) {
this.initHlsPlayer(defaultUrl);
} else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
this.videoElement.src = defaultUrl;
this.videoElement.addEventListener('canplay', () => {
this.videoElement?.play();
});
this.initNativePlayer(defaultUrl);
}
this.updateScreenDimensions();
}
private updateScreenDimensions() {
private getResolutionUrls(): { [key: string]: string } {
return Object.fromEntries(
this.resolutionService
.getAvailableResolutions()
.map((res) => [res, `${this.playMovie}_${res}.m3u8`])
);
}
private initHlsPlayer(url: string): void {
if (!this.videoElement) return;
this.hls = new Hls();
this.hls.loadSource(url);
this.hls.attachMedia(this.videoElement);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => this.videoElement?.play());
}
private initNativePlayer(url: string): void {
if (!this.videoElement) return;
this.videoElement.src = url;
this.videoElement.addEventListener('canplay', () =>
this.videoElement?.play()
);
}
private updateScreenDimensions(): void {
if (this.videoElement) {
this.videoElement.style.width = `${window.innerWidth}px`;
this.videoElement.style.height = `${window.innerHeight}px`;
}
}
public switchResolution(resolution: string) {
public switchResolution(resolution: string): void {
const targetUrl =
this.resolutionUrls[resolution] ||
this.resolutionUrls[this.defaultResolution];
if (targetUrl) {
if (this.hls) {
this.hls.loadSource(targetUrl);
this.hls.attachMedia(this.videoElement!);
} else if (this.videoElement) {
this.videoElement.src = targetUrl;
}
this.hls
? this.loadHlsSource(targetUrl)
: this.loadNativeSource(targetUrl);
} else {
console.error(`No URL found for resolution '${resolution}' or fallback.`);
console.error(`No URL found for resolution '${resolution}'`);
}
}
private loadHlsSource(url: string): void {
this.hls?.loadSource(url);
this.hls?.attachMedia(this.videoElement!);
}
private loadNativeSource(url: string): void {
if (this.videoElement) this.videoElement.src = url;
}
}