refactor: extract web-player logic to own components

src/app/portals/web-player-view/web-player-view.component.html

@@ -0,0 +1,5 @@
+@if (player === 'videojs') {
+    <app-vjs-player [options]="vjsOptions" />
+} @else if (player === 'html5') {
+    <app-html-video-player *ngIf="player === 'html5'" [channel]="channel" />
+}

src/app/portals/web-player-view/web-player-view.component.scss

@@ -0,0 +1,3 @@
+app-vjs-player > .video-js {
+    height: 100%;
+}

src/app/portals/web-player-view/web-player-view.component.ts

@@ -0,0 +1,68 @@
+import { NgIf } from '@angular/common';
+import {
+    Component,
+    Signal,
+    ViewEncapsulation,
+    effect,
+    inject,
+    input,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { getExtensionFromUrl } from '../../../../shared/playlist.utils';
+import { HtmlVideoPlayerComponent } from '../../player/components/html-video-player/html-video-player.component';
+import { VjsPlayerComponent } from '../../player/components/vjs-player/vjs-player.component';
+import { Settings, VideoPlayer } from '../../settings/settings.interface';
+import { STORE_KEY } from '../../shared/enums/store-keys.enum';
+
+@Component({
+    standalone: true,
+    selector: 'app-web-player-view',
+    templateUrl: './web-player-view.component.html',
+    styleUrls: ['./web-player-view.component.scss'],
+    imports: [HtmlVideoPlayerComponent, NgIf, VjsPlayerComponent],
+    encapsulation: ViewEncapsulation.None,
+})
+export class WebPlayerViewComponent {
+    storage = inject(StorageMap);
+
+    streamUrl = input.required<string>();
+
+    settings = toSignal(
+        this.storage.get(STORE_KEY.Settings)
+    ) as Signal<Settings>;
+
+    channel: { url: string };
+    player: VideoPlayer;
+    vjsOptions: { sources: { src: string; type: string }[] };
+
+    constructor() {
+        effect(
+            () => {
+                this.player = this.settings().player;
+
+                this.setChannel(this.streamUrl());
+                this.setVjsOptions(this.streamUrl());
+            },
+            { allowSignalWrites: true }
+        );
+    }
+
+    setVjsOptions(streamUrl: string) {
+        const extension = getExtensionFromUrl(streamUrl);
+        const mimeType =
+            extension === 'm3u' || extension === 'm3u8' || extension === 'ts'
+                ? 'application/x-mpegURL'
+                : 'video/mp4';
+
+        this.vjsOptions = {
+            sources: [{ src: streamUrl, type: mimeType }],
+        };
+    }
+
+    setChannel(streamUrl: string) {
+        this.channel = {
+            url: streamUrl,
+        };
+    }
+}

src/app/xtream/player-dialog/player-dialog.component.html

@@ -1,9 +1,4 @@
 <h2 mat-dialog-title>{{ title }}</h2>
-<mat-dialog-content>
-    <app-vjs-player
-        *ngIf="player === 'videojs'"
-        [options]="vjsOptions"
-    ></app-vjs-player>
-    <app-html-video-player *ngIf="player === 'html5'" [channel]="channel">
-    </app-html-video-player>
+<mat-dialog-content class="content">
+    <app-web-player-view [streamUrl]="streamUrl" />
 </mat-dialog-content>

src/app/xtream/player-dialog/player-dialog.component.ts

@@ -1,9 +1,7 @@
 import { NgIf } from '@angular/common';
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { getExtensionFromUrl } from '../../../../shared/playlist.utils';
-import { HtmlVideoPlayerComponent } from '../../player/components/html-video-player/html-video-player.component';
-import { VjsPlayerComponent } from '../../player/components/vjs-player/vjs-player.component';
+import { WebPlayerViewComponent } from '../../portals/web-player-view/web-player-view.component';
 import { VideoPlayer } from '../../settings/settings.interface';
 
 interface DialogData {
@@ -16,14 +14,16 @@ interface DialogData {
     selector: 'app-player-dialog',
     templateUrl: './player-dialog.component.html',
     standalone: true,
-    imports: [
-        HtmlVideoPlayerComponent,
-        MatDialogModule,
-        NgIf,
-        VjsPlayerComponent,
-    ],
+    imports: [MatDialogModule, NgIf, WebPlayerViewComponent],
     styles: `
+        .content {
+            overflow: hidden; 
+                padding: 10px !important;
+        }
+
         mat-dialog-content {
+            
+
             .video-js {
                 height: 500px !important;
             }
@@ -32,26 +32,11 @@ interface DialogData {
     encapsulation: ViewEncapsulation.None,
 })
 export class PlayerDialogComponent {
-    channel = {};
-    vjsOptions = {};
-    player: VideoPlayer;
     title: string;
+    streamUrl: string;
 
     constructor(@Inject(MAT_DIALOG_DATA) data: DialogData) {
-        this.player = data.player;
+        this.streamUrl = data.streamUrl;
         this.title = data.title;
-
-        const extension = getExtensionFromUrl(data.streamUrl);
-        const mimeType =
-            extension === 'm3u' || extension === 'm3u8' || extension === 'ts'
-                ? 'application/x-mpegURL'
-                : 'video/mp4';
-
-        this.vjsOptions = {
-            sources: [{ src: data.streamUrl, type: mimeType }],
-        };
-        this.channel = {
-            url: data.streamUrl,
-        };
     }
 }