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 { 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 } = {};
@ -28,67 +27,75 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
} }
ngOnDestroy(): void { ngOnDestroy(): void {
if (this.hls) { this.hls?.destroy();
this.hls.destroy();
}
} }
private initializePlayer(): void { private initializePlayer(): void {
this.videoElement = this.elementRef.nativeElement.querySelector( this.videoElement = this.elementRef.nativeElement.querySelector('video');
'video' if (!this.playMovie || !this.videoElement) return;
) 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.resolutionUrls = this.getResolutionUrls();
const defaultUrl = this.resolutionUrls[this.defaultResolution]; const defaultUrl = this.resolutionUrls[this.defaultResolution];
if (Hls.isSupported() && this.videoElement) { if (Hls.isSupported()) {
this.hls = new Hls(); this.initHlsPlayer(defaultUrl);
this.hls.loadSource(defaultUrl);
this.hls.attachMedia(this.videoElement);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.videoElement?.play();
});
} else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) { } else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
this.videoElement.src = defaultUrl; this.initNativePlayer(defaultUrl);
this.videoElement.addEventListener('canplay', () => {
this.videoElement?.play();
});
} }
this.updateScreenDimensions(); 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) { if (this.videoElement) {
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`;
} }
} }
public switchResolution(resolution: string) { public switchResolution(resolution: string): void {
const targetUrl = const targetUrl =
this.resolutionUrls[resolution] || this.resolutionUrls[resolution] ||
this.resolutionUrls[this.defaultResolution]; this.resolutionUrls[this.defaultResolution];
if (targetUrl) { if (targetUrl) {
if (this.hls) { this.hls
this.hls.loadSource(targetUrl); ? this.loadHlsSource(targetUrl)
this.hls.attachMedia(this.videoElement!); : this.loadNativeSource(targetUrl);
} else if (this.videoElement) {
this.videoElement.src = targetUrl;
}
} else { } 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;
}
} }