refactor: add dialog for external playback info

src/app/shared/components/external-player-info-dialog/external-player-info-dialog.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { PlayerViewComponent } from '../../../xtream/player-view/player-view.component';
+
+@Component({
+    standalone: true,
+    template: `
+        <h2 mat-dialog-title>Information</h2>
+        <mat-dialog-content class="mat-typography">
+            <app-player-view />
+        </mat-dialog-content>
+        <mat-dialog-actions align="end">
+            <button mat-button mat-dialog-close cdkFocusInitial color="accent">
+                {{ 'CLOSE' | translate }}
+            </button>
+        </mat-dialog-actions>
+    `,
+    imports: [
+        MatButtonModule,
+        MatDialogModule,
+        PlayerViewComponent,
+        TranslateModule,
+    ],
+})
+export class ExternalPlayerInfoDialogComponent {}

src/app/stalker/stalker-main-container.component.ts

@@ -19,6 +19,7 @@ import { StalkerPortalActions } from '../../../shared/stalker-portal-actions.enu
 import { DataService } from '../services/data.service';
 import { PlaylistsService } from '../services/playlists.service';
 import { Settings, VideoPlayer } from '../settings/settings.interface';
+import { ExternalPlayerInfoDialogComponent } from '../shared/components/external-player-info-dialog/external-player-info-dialog.component';
 import { STORE_KEY } from '../shared/enums/store-keys.enum';
 import { selectCurrentPlaylist } from '../state/selectors';
 import { Breadcrumb } from '../xtream/breadcrumb.interface';
@@ -35,16 +36,6 @@ import { StalkerContentTypes } from './stalker-content-types';
 @Component({
     selector: 'app-stalker-main-container',
     templateUrl: './stalker-main-container.component.html',
-    /* styles: [
-        `
-            :host {
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                height: 100%;
-            }
-        `,
-    ], */
     standalone: true,
     imports: [
         AsyncPipe,
@@ -93,10 +84,6 @@ export class StalkerMainContainerComponent implements OnInit {
             contentType: ContentType.VODS,
             label: 'VOD Streams',
         },
-        {
-            contentType: ContentType.FAVORITES,
-            label: 'Favorites',
-        },
     ];
 
     currentCategoryId;
@@ -260,10 +247,12 @@ export class StalkerMainContainerComponent implements OnInit {
     openPlayer(streamUrl: string, title: string) {
         const player = this.settings().player;
         if (player === VideoPlayer.MPV) {
+            this.dialog.open(ExternalPlayerInfoDialogComponent);
             this.dataService.sendIpcEvent(OPEN_MPV_PLAYER, {
                 url: streamUrl,
             });
         } else if (player === VideoPlayer.VLC) {
+            this.dialog.open(ExternalPlayerInfoDialogComponent);
             this.dataService.sendIpcEvent(OPEN_VLC_PLAYER, {
                 url: streamUrl,
             });
@@ -396,7 +385,8 @@ export class StalkerMainContainerComponent implements OnInit {
         if (
             this.currentLayout === 'category_content' &&
             this.searchPhrase !== searchPhrase
-        )
+        ) {
+            this.searchPhrase = searchPhrase;
             this.sendRequest({
                 action: StalkerContentTypes[this.selectedContentType]
                     .getContentAction,
@@ -409,6 +399,7 @@ export class StalkerMainContainerComponent implements OnInit {
                       }
                     : {}),
             });
+        }
     }
 
     handlePageChange(event: PageEvent) {

src/app/xtream/xtream-main-container.component.html

@@ -50,7 +50,5 @@
             [items]="favorites$ | async"
             (itemClicked)="itemClicked($event)"
         />
-
-        <app-player-view *ngIf="currentLayout === 'player'" />
     </ng-template>
 </div>

src/app/xtream/xtream-main-container.component.scss

@@ -1,8 +1,6 @@
 .container {
     height: calc(100vh - 140px);
     overflow-y: auto;
-    display: flex;
-    justify-content: center;
 }
 
 mat-spinner {

src/app/xtream/xtream-main-container.component.ts

@@ -40,7 +40,6 @@ import { CategoryContentViewComponent } from './category-content-view/category-c
 import { CategoryViewComponent } from './category-view/category-view.component';
 import { ContentType } from './content-type.enum';
 import { NavigationBarComponent } from './navigation-bar/navigation-bar.component';
-import { PlayerViewComponent } from './player-view/player-view.component';
 import { VodDetailsComponent } from './vod-details/vod-details.component';
 
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -54,6 +53,7 @@ import {
 } from '../../../shared/xtream-serie-details.interface';
 import { PlaylistsService } from '../services/playlists.service';
 import { Settings, VideoPlayer } from '../settings/settings.interface';
+import { ExternalPlayerInfoDialogComponent } from '../shared/components/external-player-info-dialog/external-player-info-dialog.component';
 import { STORE_KEY } from '../shared/enums/store-keys.enum';
 import { Breadcrumb, PortalActions } from './breadcrumb.interface';
 import { ContentTypeNavigationItem } from './content-type-navigation-item.interface';
@@ -104,12 +104,12 @@ type LayoutView =
         MatIconModule,
         NavigationBarComponent,
         VodDetailsComponent,
-        PlayerViewComponent,
         CategoryContentViewComponent,
         SerialDetailsComponent,
         PlayerDialogComponent,
         MatProgressSpinnerModule,
         AsyncPipe,
+        ExternalPlayerInfoDialogComponent,
     ],
 })
 export class XtreamMainContainerComponent implements OnInit {
@@ -256,19 +256,16 @@ export class XtreamMainContainerComponent implements OnInit {
     ) {
         let action;
 
-        this.items = [];
         if (item.stream_type && item.stream_type === 'movie') {
+            this.items = [];
             action = XtreamCodeActions.GetVodInfo;
             this.breadcrumbs.push({ title: item.name, action });
             this.contentId = item.stream_id;
             this.sendRequest({ action, vod_id: item.stream_id });
         } else if (item.stream_type && item.stream_type === 'live') {
-            this.breadcrumbs.push({
-                title: item.name,
-                action: XtreamCodeActions.GetLiveStreams,
-            });
             this.playLiveStream(item);
         } else if (item.series_id) {
+            this.items = [];
             action = XtreamCodeActions.GetSeriesInfo;
             this.breadcrumbs.push({ title: item.name, action });
             this.contentId = item.series_id;
@@ -285,11 +282,12 @@ export class XtreamMainContainerComponent implements OnInit {
     openPlayer(streamUrl: string, title: string) {
         const player = this.settings().player;
         if (player === VideoPlayer.MPV) {
-            this.currentLayout = 'player';
+            this.dialog.open(ExternalPlayerInfoDialogComponent);
             this.dataService.sendIpcEvent(OPEN_MPV_PLAYER, {
                 url: streamUrl,
             });
         } else if (player === VideoPlayer.VLC) {
+            this.dialog.open(ExternalPlayerInfoDialogComponent);
             this.dataService.sendIpcEvent(OPEN_VLC_PLAYER, {
                 url: streamUrl,
             });