refactor: add link to navigate back if playlist is empty

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

@@ -2,8 +2,9 @@
     <!-- sidebar content -->
     <mat-drawer #drawer mode="side" opened disableClose>
         <app-sidebar
-            *ngIf="channels$ | async as channels"
+            *ngIf="(channels$ | async) as channels; else noChannels"
             [channels]="channels" />
+            <ng-template #noChannels>No channels <br /> <button mat-button color="secondary" (click)="navigateHome()">Go back</button></ng-template>
     </mat-drawer>
     <mat-drawer-content>
         <ng-container *ngIf="activeChannel$ | async as activeChannel">

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

@@ -9,7 +9,7 @@ import {
     OnInit,
 } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { Observable, combineLatestWith, filter, map, switchMap } from 'rxjs';
@@ -108,6 +108,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         private ngZone: NgZone,
         private overlay: Overlay,
         private playlistsService: PlaylistsService,
+        private router: Router,
         private snackBar: MatSnackBar,
         private storage: StorageMap,
         private store: Store
@@ -234,4 +235,8 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
     openUrl(url: string) {
         window.open(url, '_blank');
     }
+
+    navigateHome() {
+        this.router.navigate(['/']);
+    }
 }