Skip to content

Commit

Permalink
refactor: simplify imports and enhance navigation bar
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@4gray
4gray committed Nov 28, 2024
1 parent e9a698a commit 25875bf
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 80 deletions.
57 changes: 30 additions & 27 deletions src/app/stalker/stalker-main-container.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down
15 changes: 7 additions & 8 deletions src/app/xtream/navigation-bar/navigation-bar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
69 changes: 53 additions & 16 deletions src/app/xtream/navigation-bar/navigation-bar.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -41,7 +58,7 @@ import { XtreamLiveStream } from '../../../../shared/xtream-live-stream.interfac
MatMenuModule,
MatCheckboxModule,
MatTooltipModule,
AsyncPipe
AsyncPipe,
],
})
export class NavigationBarComponent implements OnChanges {
Expand All @@ -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);
Expand All @@ -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
Expand Down Expand Up @@ -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 {
Expand All @@ -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();
});
}
}
36 changes: 7 additions & 29 deletions src/app/xtream/xtream-main-container.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -112,24 +98,17 @@ type LayoutView =
styleUrls: ['./xtream-main-container.component.scss'],
standalone: true,
imports: [
KeyValuePipe,
MatButtonToggleModule,
NgFor,
NgIf,
CategoryViewComponent,
NgSwitch,
MatButtonModule,
MatCardModule,
MatIconModule,
NavigationBarComponent,
VodDetailsComponent,
CategoryContentViewComponent,
SerialDetailsComponent,
PlayerDialogComponent,
MatProgressSpinnerModule,
AsyncPipe,
ExternalPlayerInfoDialogComponent,
RouterLink,
PlaylistErrorViewComponent,
TranslateModule,
LiveStreamLayoutComponent,
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 25875bf

Please sign in to comment.