feat(ui): use playlist-switcher in all modules

libs/ui/components/src/lib/video-player/sidebar/sidebar.component.html

@@ -1,50 +1,18 @@
 <div class="current-playlist">
-    <div class="left">
-        <button
-            mat-icon-button
-            [matTooltip]="'SETTINGS.BACK_TO_HOME' | translate"
-            (click)="goBack()"
-        >
-            <mat-icon>arrow_back_ios</mat-icon>
-        </button>
-        <div class="playlist-info">
-            <div class="name">
-                @if (sidebarView === 'CHANNELS') {
-                    {{ playlistTitle$ | async }}
-                } @else {
-                    {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
-                }
-            </div>
-            <div class="channels-count">
-                {{
-                    sidebarView === 'CHANNELS'
-                        ? channels()?.length +
-                          ' ' +
-                          ('HOME.PLAYLISTS.CHANNELS' | translate)
-                        : ('HOME.PLAYLISTS.MY_PLAYLISTS_SUBTITLE' | translate)
-                }}
-            </div>
-        </div>
-    </div>
+    <button
+        mat-icon-button
+        routerLink="/"
+        [matTooltip]="'SETTINGS.BACK_TO_HOME' | translate"
+        class="home-btn"
+    >
+        <mat-icon>home</mat-icon>
+    </button>
 
-    @if (sidebarView === 'CHANNELS') {
-        <button
-            mat-icon-button
-            routerLink="/"
-            [matTooltip]="
-                'CHANNELS.UPLOAD_OR_SELECT_OTHER_PLAYLIST' | translate
-            "
-        >
-            <mat-icon>playlist_add</mat-icon>
-        </button>
-    }
-</div>
-@if (sidebarView === 'CHANNELS') {
-    <app-channel-list-container [channelList]="channels()" />
-} @else {
-    <app-recent-playlists
-        class="recent-playlists"
-        [sidebarMode]="true"
-        (playlistClicked)="selectPlaylist()"
+    <app-playlist-switcher
+        class="switcher"
+        [currentTitle]="playlistTitle()"
+        [subtitle]="subtitle()"
     />
-}
+</div>
+
+<app-channel-list-container [channelList]="channels()" />

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;
     }
 }

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<Channel[]>([]);
 
-    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')}`;
+    });
 }