From 6b94fcbdd6c9707b807c7c056fe27d40bb2f0a3d Mon Sep 17 00:00:00 2001 From: 4gray Date: Sat, 10 Jan 2026 15:19:37 +0100 Subject: [PATCH] feat(ui): use playlist-switcher in all modules --- .../favorites-layout.component.html | 9 +-- .../favorites-layout.component.ts | 5 +- .../recently-viewed.component.html | 4 +- .../recently-viewed.component.ts | 2 + .../stalker-favorites.component.html | 2 + .../stalker-favorites.component.ts | 2 + .../stalker-main-container.component.html | 9 +-- .../stalker-main-container.component.ts | 6 +- .../favorites/favorites.component.html | 2 + .../favorites/favorites.component.ts | 1 + .../live-stream-layout.component.html | 9 +-- .../live-stream-layout.component.ts | 3 + apps/web/src/app/xtream-tauri/sidebar.scss | 5 ++ .../xtream-main-container.component.html | 9 +-- .../xtream-main-container.component.ts | 9 +-- .../sidebar/sidebar.component.html | 62 +++++-------------- .../sidebar/sidebar.component.scss | 36 ++--------- .../video-player/sidebar/sidebar.component.ts | 36 ++++------- 18 files changed, 86 insertions(+), 125 deletions(-) diff --git a/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html b/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html index a12776367..53630e466 100644 --- a/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html +++ b/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html @@ -1,9 +1,10 @@
- -

{{ 'PORTALS.ALL_CATEGORIES' | translate }}

+
([]); readonly favorites = input([]); + readonly playlistSubtitle = input(''); + readonly playlistTitle = input('Playlist'); readonly selectedCategoryId = input('movie'); readonly titleTranslationString = input('CHANNELS.FAVORITES'); diff --git a/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.html b/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.html index 0739e8633..5a2365c84 100644 --- a/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.html +++ b/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.html @@ -31,10 +31,12 @@ } diff --git a/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.ts b/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.ts index d45ef8478..8b2ce32d5 100644 --- a/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.ts +++ b/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.ts @@ -43,6 +43,8 @@ export class RecentlyViewedComponent { itemDetails: any = null; + readonly currentPlaylist = this.stalkerStore.currentPlaylist; + readonly allFavorites = rxResource({ params: () => ({ refreshTimestamp: this.refreshTimestamp(), diff --git a/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.html b/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.html index f9a5c40df..73a4dff49 100644 --- a/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.html +++ b/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.html @@ -29,6 +29,8 @@ ({ refreshTimestamp: this.refreshTimestamp(), diff --git a/apps/web/src/app/stalker/stalker-main-container.component.html b/apps/web/src/app/stalker/stalker-main-container.component.html index 9b8491c4c..865406fd8 100644 --- a/apps/web/src/app/stalker/stalker-main-container.component.html +++ b/apps/web/src/app/stalker/stalker-main-container.component.html @@ -9,10 +9,11 @@

{{ selectedCategoryTitle() }}

} @else { - -

{{ 'PORTALS.ALL_CATEGORIES' | translate }}

+ }
@if (isItvCategorySelected) { diff --git a/apps/web/src/app/stalker/stalker-main-container.component.ts b/apps/web/src/app/stalker/stalker-main-container.component.ts index 5396e8223..bfd934a9d 100644 --- a/apps/web/src/app/stalker/stalker-main-container.component.ts +++ b/apps/web/src/app/stalker/stalker-main-container.component.ts @@ -8,6 +8,7 @@ import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { TranslatePipe } from '@ngx-translate/core'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { PlaylistsService } from 'services'; +import { PlaylistSwitcherComponent } from 'components'; import { CategoryViewComponent } from '../xtream-tauri/category-view/category-view.component'; import { PlaylistErrorViewComponent } from '../xtream/playlist-error-view/playlist-error-view.component'; import { StalkerStore } from './stalker.store'; @@ -27,11 +28,11 @@ import { StalkerStore } from './stalker.store'; MatIconButton, MatListModule, MatPaginatorModule, - /* MpvPlayerBarComponent, */ NgxSkeletonLoaderModule, PlaylistErrorViewComponent, - TranslatePipe, + PlaylistSwitcherComponent, RouterOutlet, + TranslatePipe, ], }) export class StalkerMainContainerComponent { @@ -54,6 +55,7 @@ export class StalkerMainContainerComponent { readonly itvChannels = this.stalkerStore.itvChannels; readonly selectedCategoryTitle = this.stalkerStore.getSelectedCategoryName; + readonly currentPlaylist = this.stalkerStore.currentPlaylist; /** categories */ readonly categories = this.stalkerStore.getCategoryResource; diff --git a/apps/web/src/app/xtream-tauri/favorites/favorites.component.html b/apps/web/src/app/xtream-tauri/favorites/favorites.component.html index 2a130d92b..384cedcfa 100644 --- a/apps/web/src/app/xtream-tauri/favorites/favorites.component.html +++ b/apps/web/src/app/xtream-tauri/favorites/favorites.component.html @@ -1,6 +1,8 @@ ([]); + readonly currentPlaylist = this.xtreamStore.currentPlaylist; readonly series = signal([]); readonly movies = signal([]); diff --git a/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.html b/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.html index cb34a6c50..58873ecc3 100644 --- a/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.html +++ b/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.html @@ -9,10 +9,11 @@

{{ 'HOME.PLAYLISTS.CHANNELS' | translate }}

} @else { - -

{{ 'PORTALS.ALL_CATEGORIES' | translate }}

+ -

{{ 'PORTALS.ALL_CATEGORIES' | translate }}

+ -
-
- @if (sidebarView === 'CHANNELS') { - {{ playlistTitle$ | async }} - } @else { - {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }} - } -
-
- {{ - sidebarView === 'CHANNELS' - ? channels()?.length + - ' ' + - ('HOME.PLAYLISTS.CHANNELS' | translate) - : ('HOME.PLAYLISTS.MY_PLAYLISTS_SUBTITLE' | translate) - }} -
-
- + - @if (sidebarView === 'CHANNELS') { - - } - -@if (sidebarView === 'CHANNELS') { - -} @else { - -} + + + diff --git a/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.scss b/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.scss index 106079930..976c66665 100644 --- a/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.scss +++ b/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.scss @@ -2,45 +2,21 @@ display: flex; align-items: center; padding: 8px; - justify-content: space-between; + gap: 4px; app-region: drag; - .left { - display: flex; - gap: 5px; - } - button { app-region: no-drag; } -} -.playlist-info { - flex: 1; - max-width: 300px; - - .name { - font-size: 1.1em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + .switcher { + flex: 1; + min-width: 0; } - - .channels-count { - font-size: 0.8em; - } -} - -.recent-playlists { - height: calc(100vh - 60px); - overflow: auto; - width: 100%; } @media only screen and (max-width: 480px) { - .playlist-info { - .name { - max-width: 105px; - } + .current-playlist { + padding: 6px; } } diff --git a/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.ts b/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.ts index 6fca98c18..973e08aba 100644 --- a/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.ts +++ b/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.ts @@ -1,15 +1,13 @@ -import { AsyncPipe } from '@angular/common'; -import { Component, inject, input } from '@angular/core'; +import { Component, computed, inject, input } from '@angular/core'; import { MatIconButton } from '@angular/material/button'; import { MatIcon } from '@angular/material/icon'; import { MatTooltip } from '@angular/material/tooltip'; -import { Router, RouterLink } from '@angular/router'; +import { RouterLink } from '@angular/router'; import { Store } from '@ngrx/store'; -import { TranslatePipe } from '@ngx-translate/core'; -import { ChannelActions } from 'm3u-state'; +import { TranslatePipe, TranslateService } from '@ngx-translate/core'; import { selectPlaylistTitle } from 'm3u-state'; -import { Channel, SidebarView } from 'shared-interfaces'; -import { RecentPlaylistsComponent } from '../../recent-playlists/recent-playlists.component'; +import { Channel } from 'shared-interfaces'; +import { PlaylistSwitcherComponent } from '../../playlist-switcher/playlist-switcher.component'; import { ChannelListContainerComponent } from './../../channel-list-container/channel-list-container.component'; @Component({ @@ -17,12 +15,11 @@ import { ChannelListContainerComponent } from './../../channel-list-container/ch templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.scss'], imports: [ - AsyncPipe, ChannelListContainerComponent, MatIcon, MatIconButton, MatTooltip, - RecentPlaylistsComponent, + PlaylistSwitcherComponent, RouterLink, TranslatePipe, ], @@ -30,22 +27,13 @@ import { ChannelListContainerComponent } from './../../channel-list-container/ch export class SidebarComponent { readonly channels = input([]); - private readonly router = inject(Router); private readonly store = inject(Store); + private readonly translate = inject(TranslateService); - readonly playlistTitle$ = this.store.select(selectPlaylistTitle); - sidebarView: SidebarView = 'CHANNELS'; + readonly playlistTitle = this.store.selectSignal(selectPlaylistTitle); - goBack() { - if (this.sidebarView === 'PLAYLISTS') { - this.store.dispatch(ChannelActions.resetActiveChannel()); - this.router.navigate(['/']); - } else { - this.sidebarView = 'PLAYLISTS'; - } - } - - selectPlaylist() { - this.sidebarView = 'CHANNELS'; - } + readonly subtitle = computed(() => { + const count = this.channels()?.length ?? 0; + return `${count} ${this.translate.instant('HOME.PLAYLISTS.CHANNELS')}`; + }); }