refactor: simplify imports and enhance navigation bar

Remove unused Angular common pipes and streamline imports in the 
`xtream-main-container.component.ts`. Introduce a settings button in the 
navigation bar for improved user access to settings. Update the settings 
retrieval method to use the `SettingsStore` service for better state 
management.

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

@@ -370,33 +370,36 @@ export class StalkerMainContainerComponent implements OnInit {
     }
 
     openPlayer(streamUrl: string) {
-        const player = this.settings()?.player ?? VideoPlayer.VideoJs;
-        if (player === VideoPlayer.MPV) {
-            if (!this.hideExternalInfoDialog())
-                this.dialog.open(ExternalPlayerInfoDialogComponent);
-            this.dataService.sendIpcEvent(OPEN_MPV_PLAYER, {
-                url: streamUrl,
-                mpvPlayerPath: this.settings()?.mpvPlayerPath,
-            });
-        } else if (player === VideoPlayer.VLC) {
-            if (!this.hideExternalInfoDialog())
-                this.dialog.open(ExternalPlayerInfoDialogComponent);
-            this.dataService.sendIpcEvent(OPEN_VLC_PLAYER, {
-                url: streamUrl,
-                vlcPlayerPath: this.settings()?.vlcPlayerPath,
-            });
-        } else {
-            this.dialog.open<PlayerDialogComponent, PlayerDialogData>(
-                PlayerDialogComponent,
-                {
-                    data: {
-                        streamUrl,
-                        title: this.itvTitle,
-                    },
-                    width: '80%',
-                }
-            );
-        }
+        // Get fresh settings directly from storage instead of using signal
+        this.storage.get(STORE_KEY.Settings).subscribe((settings: Settings) => {
+            const player = settings?.player ?? VideoPlayer.VideoJs;
+            if (player === VideoPlayer.MPV) {
+                if (!this.hideExternalInfoDialog())
+                    this.dialog.open(ExternalPlayerInfoDialogComponent);
+                this.dataService.sendIpcEvent(OPEN_MPV_PLAYER, {
+                    url: streamUrl,
+                    mpvPlayerPath: settings?.mpvPlayerPath,
+                });
+            } else if (player === VideoPlayer.VLC) {
+                if (!this.hideExternalInfoDialog())
+                    this.dialog.open(ExternalPlayerInfoDialogComponent);
+                this.dataService.sendIpcEvent(OPEN_VLC_PLAYER, {
+                    url: streamUrl,
+                    vlcPlayerPath: settings?.vlcPlayerPath,
+                });
+            } else {
+                this.dialog.open<PlayerDialogComponent, PlayerDialogData>(
+                    PlayerDialogComponent,
+                    {
+                        data: {
+                            streamUrl,
+                            title: this.itvTitle,
+                        },
+                        width: '80%',
+                    }
+                );
+            }
+        });
     }
 
     categoryClicked(item: { category_name: string; category_id: string }) {

src/app/xtream/navigation-bar/navigation-bar.component.html

@@ -36,6 +36,11 @@
                 'CHANNELS.FAVORITES' | translate
             }}</span>
         </button>
+
+        <button mat-button (click)="openSettings()">
+            <mat-icon>settings</mat-icon>
+            <span class="button-label">{{ 'MENU.SETTINGS' | translate }}</span>
+        </button>
     </div>
 </div>
 <div id="sub-panel">
@@ -59,11 +64,7 @@
                 [matTooltip]="'TOP_MENU.TOGGLE_FAVORITE_FLAG' | translate"
             >
                 <mat-icon>
-                    {{
-                        isFavoriteStream
-                            ? 'star'
-                            : 'star_outline'
-                    }}
+                    {{ isFavoriteStream ? 'star' : 'star_outline' }}
                 </mat-icon>
             </button>
         </div>
@@ -91,9 +92,7 @@
         </div>
     </div>
     <mat-menu #sortPlaylistMenu="matMenu">
-        <section
-            (click)="$event.stopPropagation()"
-        >
+        <section (click)="$event.stopPropagation()">
             <button mat-menu-item (click)="setSortType('date')">
                 <mat-icon>calendar_today</mat-icon>
                 <span>{{ 'CHANNELS.SORT_BY_DATE' | translate }}</span>

src/app/xtream/navigation-bar/navigation-bar.component.ts

@@ -1,26 +1,43 @@
-import { NgFor, NgIf, AsyncPipe } from '@angular/common';
-import { Component, EventEmitter, Input, Output, inject, OnChanges, SimpleChanges } from '@angular/core';
+import { AsyncPipe, NgFor, NgIf } from '@angular/common';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChanges,
+    inject,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterLink } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
-import { Observable, Subject, debounceTime, distinctUntilChanged, map } from 'rxjs';
+import {
+    Observable,
+    Subject,
+    debounceTime,
+    distinctUntilChanged,
+    map,
+} from 'rxjs';
+import { XtreamLiveStream } from '../../../../shared/xtream-live-stream.interface';
 import { PlaylistInfoComponent } from '../../home/recent-playlists/playlist-info/playlist-info.component';
+import { SettingsComponent } from '../../settings/settings.component';
 import { selectCurrentPlaylist } from '../../state/selectors';
+
+import { SettingsStore } from '../../services/settings-store.service';
 import { Breadcrumb } from '../breadcrumb.interface';
 import { ContentTypeNavigationItem } from '../content-type-navigation-item.interface';
 import { ContentType } from '../content-type.enum';
 import { PortalStore } from '../portal.store';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { XtreamLiveStream } from '../../../../shared/xtream-live-stream.interface';
 
 @Component({
     selector: 'app-navigation-bar',
@@ -41,7 +58,7 @@ import { XtreamLiveStream } from '../../../../shared/xtream-live-stream.interfac
         MatMenuModule,
         MatCheckboxModule,
         MatTooltipModule,
-        AsyncPipe
+        AsyncPipe,
     ],
 })
 export class NavigationBarComponent implements OnChanges {
@@ -62,7 +79,7 @@ export class NavigationBarComponent implements OnChanges {
     @Output() searchTextChanged = new EventEmitter<string>();
     @Output() addToFavoritesClicked = new EventEmitter<any>();
     @Output() removeFromFavoritesClicked = new EventEmitter<number>();
-    
+
     ContentTypeEnum = ContentType;
     dialog = inject(MatDialog);
     portalStore = inject(PortalStore);
@@ -72,6 +89,7 @@ export class NavigationBarComponent implements OnChanges {
     currentPlaylist = this.store.selectSignal(selectCurrentPlaylist);
     sortType = this.portalStore.sortType;
     isFavoriteStream = false;
+    settingsStore = inject(SettingsStore);
 
     constructor() {
         this.searchPhraseUpdate
@@ -117,7 +135,7 @@ export class NavigationBarComponent implements OnChanges {
                 name: item.name,
                 stream_id: item.stream_id,
                 cover: item.stream_icon,
-                stream_type: 'live'
+                stream_type: 'live',
             });
             this.isFavoriteStream = true;
         } else {
@@ -128,17 +146,36 @@ export class NavigationBarComponent implements OnChanges {
 
     ngOnChanges(changes: SimpleChanges) {
         if (changes.activeLiveStream && this.activeLiveStream) {
-          this.checkFavorite();
+            this.checkFavorite();
         }
     }
 
     checkFavorite() {
         // if activeLiveStream.stream_id include in favorites return the true
         const activeLiveStream = this.activeLiveStream;
-        this.favoritesLiveStream$.pipe(
-            map(favorites => favorites.some(fav => fav.stream_id === activeLiveStream.stream_id))
-        ).subscribe(isFavorite => {
-            this.isFavoriteStream = isFavorite;
-        });
+        this.favoritesLiveStream$
+            .pipe(
+                map((favorites) =>
+                    favorites.some(
+                        (fav) => fav.stream_id === activeLiveStream.stream_id
+                    )
+                )
+            )
+            .subscribe((isFavorite) => {
+                this.isFavoriteStream = isFavorite;
+            });
+    }
+
+    openSettings(): void {
+        this.dialog
+            .open(SettingsComponent, {
+                width: '1000px',
+                height: '90%',
+                data: { isDialog: true },
+            })
+            .afterClosed()
+            .subscribe(() => {
+                this.settingsStore.loadSettings();
+            });
     }
 }

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

@@ -1,18 +1,5 @@
-import {
-    AsyncPipe,
-    KeyValuePipe,
-    NgFor,
-    NgIf,
-    NgSwitch,
-} from '@angular/common';
-import {
-    Component,
-    NgZone,
-    OnInit,
-    Signal,
-    effect,
-    inject,
-} from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { Component, NgZone, OnInit, effect, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
@@ -42,10 +29,9 @@ import { EpgItem } from './epg-item.interface';
 import { NavigationBarComponent } from './navigation-bar/navigation-bar.component';
 import { VodDetailsComponent } from './vod-details/vod-details.component';
 
-import { toSignal } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { Router, RouterLink } from '@angular/router';
+import { Router } from '@angular/router';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
@@ -56,9 +42,9 @@ import {
 import { LiveStreamLayoutComponent } from '../portals/live-stream-layout/live-stream-layout.component';
 import { DialogService } from '../services/dialog.service';
 import { PlaylistsService } from '../services/playlists.service';
-import { Settings, VideoPlayer } from '../settings/settings.interface';
+import { SettingsStore } from '../services/settings-store.service';
+import { 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 { PlaylistErrorViewComponent } from '../xtream/playlist-error-view/playlist-error-view.component';
 import { Breadcrumb, PortalActions } from './breadcrumb.interface';
 import { ContentTypeNavigationItem } from './content-type-navigation-item.interface';
@@ -112,12 +98,8 @@ type LayoutView =
     styleUrls: ['./xtream-main-container.component.scss'],
     standalone: true,
     imports: [
-        KeyValuePipe,
         MatButtonToggleModule,
-        NgFor,
-        NgIf,
         CategoryViewComponent,
-        NgSwitch,
         MatButtonModule,
         MatCardModule,
         MatIconModule,
@@ -125,11 +107,8 @@ type LayoutView =
         VodDetailsComponent,
         CategoryContentViewComponent,
         SerialDetailsComponent,
-        PlayerDialogComponent,
         MatProgressSpinnerModule,
         AsyncPipe,
-        ExternalPlayerInfoDialogComponent,
-        RouterLink,
         PlaylistErrorViewComponent,
         TranslateModule,
         LiveStreamLayoutComponent,
@@ -143,6 +122,7 @@ export class XtreamMainContainerComponent implements OnInit {
     playlistService = inject(PlaylistsService);
     portalStore = inject(PortalStore);
     router = inject(Router);
+    settingsStore = inject(SettingsStore);
     snackBar = inject(MatSnackBar);
     storage = inject(StorageMap);
     store = inject(Store);
@@ -176,9 +156,7 @@ export class XtreamMainContainerComponent implements OnInit {
     selectedContentType = ContentType.VODS;
     currentLayout: LayoutView = 'category';
     vodDetails!: XtreamVodDetails | XtreamSerieDetails;
-    settings = toSignal(
-        this.storage.get(STORE_KEY.Settings)
-    ) as Signal<Settings>;
+    settings = this.settingsStore.getSettings();
     isLoading = true;
     searchPhrase = this.portalStore.searchPhrase();
     contentId: number;