style: add navigation panel for playlists view

src/app/home/recent-playlists/recent-playlists.component.scss

@@ -1,3 +1,7 @@
+.mat-list-base {
+    padding-top: 0;
+}
+
 .meta {
     font-size: 12px !important;
     color: #666;

src/app/player/components/channel-list-container/channel-list-container.component.html

@@ -1,29 +1,3 @@
-<div id="playlists-navigation">
-    <div class="current-playlist">
-        <button
-            mat-icon-button
-            (click)="showPlaylists()"
-            matTooltip="Back to playlists overview"
-        >
-            <mat-icon>arrow_back_ios</mat-icon>
-        </button>
-        <div class="playlist-info">
-            <div class="name">{{ playlistMeta?.filename }}</div>
-            <div class="channels-count">{{ playlistMeta?.count }} channels</div>
-        </div>
-
-        <button
-            mat-icon-button
-            routerLink="/"
-            [matTooltip]="
-                'CHANNELS.UPLOAD_OR_SELECT_OTHER_PLAYLIST' | translate
-            "
-        >
-            <mat-icon>playlist_add</mat-icon>
-        </button>
-    </div>
-</div>
-<mat-divider></mat-divider>
 <mat-tab-group color="primary" backgroundColor="primary">
     <mat-tab [label]="'CHANNELS.ALL_CHANNELS' | translate">
         <mat-list>

src/app/player/components/channel-list-container/channel-list-container.component.scss

@@ -78,31 +78,3 @@
     background-size: 10px 10px;
     color: #fff;
 }
-
-#playlists-navigation {
-    background-color: #000;
-    color: #fff;
-
-    .playlist-info {
-        flex: 1;
-        max-width: 300px;
-
-        .name {
-            font-size: 1.1em;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .channels-count {
-            font-size: 0.8em;
-            color: #ccc;
-        }
-    }
-}
-
-.current-playlist {
-    display: flex;
-    align-items: center;
-    padding: 8px;
-}

src/app/player/components/channel-list-container/channel-list-container.component.ts

@@ -1,17 +1,14 @@
 import {
     Component,
     ElementRef,
-    EventEmitter,
     HostListener,
     Input,
-    Output,
     ViewChild,
 } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import * as _ from 'lodash';
 import { Observable } from 'rxjs';
 import { Channel } from '../../../../../shared/channel.interface';
-import { Playlist } from '../../../../../shared/playlist.interface';
 import { ChannelQuery, ChannelStore } from '../../../state';
 
 @Component({
@@ -35,15 +32,6 @@ export class ChannelListContainerComponent {
         this.groupedChannels = _.groupBy(value, 'group.title');
     }
 
-    /** Meta information about current playlist */
-    playlistMeta: Pick<Playlist, 'count' | 'filename'> = {
-        count: this.channelQuery.getValue().playlistCount,
-        filename: this.channelQuery.getValue().playlistFilename,
-    };
-
-    /** Toggles the sidebar view from channels to playlists */
-    @Output() changeView = new EventEmitter<any>();
-
     /** Object with channels sorted by groups */
     groupedChannels: { [key: string]: Channel[] };
 
@@ -118,11 +106,4 @@ export class ChannelListContainerComponent {
     trackByFn(index: number, channel: Channel): string {
         return channel.id;
     }
-
-    /**
-     * Emits event to the parent to toggle to the playlists overview
-     */
-    showPlaylists() {
-        this.changeView.emit('PLAYLISTS');
-    }
 }

src/app/player/components/video-player/video-player.component.html

@@ -8,15 +8,56 @@
         disableClose
     >
         <ng-container *ngIf="channels$ | async as channels">
+            <div id="playlists-navigation">
+                <div class="current-playlist">
+                    <button
+                        mat-icon-button
+                        matTooltip="Back"
+                        (click)="goBack()"
+                    >
+                        <mat-icon>arrow_back_ios</mat-icon>
+                    </button>
+                    <div class="playlist-info">
+                        <div class="name">
+                            {{
+                                sidebarView === 'CHANNELS'
+                                    ? playlistTitle
+                                    : 'My Playlists'
+                            }}
+                        </div>
+                        <div class="channels-count">
+                            {{
+                                sidebarView === 'CHANNELS'
+                                    ? channels.length + ' channels'
+                                    : 'all available playlists'
+                            }}
+                        </div>
+                    </div>
+
+                    <button
+                        mat-icon-button
+                        *ngIf="sidebarView === 'CHANNELS'"
+                        routerLink="/"
+                        [matTooltip]="
+                            'CHANNELS.UPLOAD_OR_SELECT_OTHER_PLAYLIST'
+                                | translate
+                        "
+                    >
+                        <mat-icon>playlist_add</mat-icon>
+                    </button>
+                </div>
+            </div>
+            <mat-divider></mat-divider>
             <app-channel-list-container
                 *ngIf="sidebarView === 'CHANNELS'; else playlistsTemplate"
                 [channelList]="channels"
-                (changeView)="setSidebarView($event)"
             >
             </app-channel-list-container>
             <ng-template #playlistsTemplate>
-                <app-recent-playlists (playlistClicked)="getPlaylist($event)">
-                </app-recent-playlists>
+                <app-recent-playlists
+                    class="recent-playlists"
+                    [class.electron]="dataService.isElectron"
+                ></app-recent-playlists>
             </ng-template>
         </ng-container>
     </mat-drawer>

src/app/player/components/video-player/video-player.component.scss

@@ -19,3 +19,42 @@
 .spacer {
     flex: 1 1 auto;
 }
+
+#playlists-navigation {
+    background-color: #000;
+    color: #fff;
+
+    .current-playlist {
+        display: flex;
+        align-items: center;
+        padding: 8px;
+    }
+
+    .playlist-info {
+        flex: 1;
+        max-width: 300px;
+
+        .name {
+            font-size: 1.1em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .channels-count {
+            font-size: 0.8em;
+            color: #ccc;
+        }
+    }
+}
+
+.recent-playlists {
+    height: calc(100vh - 60px);
+    overflow: auto;
+    width: 100%;
+    display: block;
+}
+
+.electron {
+    height: calc(100vh - 85px) !important;
+}

src/app/player/components/video-player/video-player.component.ts

@@ -1,6 +1,7 @@
 import { Component, NgZone, OnInit, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { filter, Observable } from 'rxjs';
 import { Channel } from '../../../../../shared/channel.interface';
@@ -63,6 +64,9 @@ export class VideoPlayerComponent implements OnInit {
     /** ID of the current playlist */
     playlistId = this.channelQuery.getValue().playlistId;
 
+    /** Title of the current playlist */
+    playlistTitle = this.channelQuery.getValue().playlistFilename;
+
     /** IPC Renderer commands list with callbacks */
     commandsList = [
         {
@@ -87,8 +91,9 @@ export class VideoPlayerComponent implements OnInit {
     constructor(
         private channelQuery: ChannelQuery,
         private channelStore: ChannelStore,
-        private dataService: DataService,
+        public dataService: DataService,
         private ngZone: NgZone,
+        private router: Router,
         private snackBar: MatSnackBar,
         private storage: StorageMap
     ) {
@@ -169,4 +174,13 @@ export class VideoPlayerComponent implements OnInit {
             id: playlistId,
         });
     }
+
+    /** Navigates back */
+    goBack(): void {
+        if (this.sidebarView === 'PLAYLISTS') {
+            this.router.navigate(['/']);
+        } else {
+            this.sidebarView = 'PLAYLISTS';
+        }
+    }
 }

src/app/state/channel.store.ts

@@ -18,6 +18,7 @@ export interface ChannelState extends EntityState<Channel> {
     currentEpgProgram: EpgProgram;
     favorites: string[];
     playlistId: string;
+    playlistFilename: string;
 }
 
 @Injectable({ providedIn: 'root' })
@@ -34,6 +35,7 @@ export class ChannelStore extends EntityStore<ChannelState> {
             epgAvailable: false,
             favorites: [],
             playlistId: '',
+            playlistFilename: '',
         });
     }
 
@@ -157,7 +159,6 @@ export class ChannelStore extends EntityStore<ChannelState> {
             favorites,
             playlistId: playlist._id,
             playlistFilename: playlist.title || playlist.filename,
-            playlistCount: playlist.count,
         }));
     }
 }