refactor: create own component for video player sidebar

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

@@ -0,0 +1,50 @@
+<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">
+                <ng-container
+                    *ngIf="sidebarView === 'CHANNELS'; else allPlaylists"
+                >
+                    {{ playlistTitle$ | async }}
+                </ng-container>
+                <ng-template #allPlaylists>
+                    {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
+                </ng-template>
+            </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"
+>
+</app-channel-list-container>
+<ng-template #playlistsTemplate>
+    <app-recent-playlists
+        class="recent-playlists"
+        [class.electron]="dataService.isElectron"
+        (playlistClicked)="selectPlaylist()"
+    ></app-recent-playlists>
+</ng-template>

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

@@ -0,0 +1,47 @@
+
+#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;
+}
+
+@media only screen and (max-width: 480px) {
+    .playlist-info {
+        .name {
+            max-width: 105px;
+        }
+    }
+}

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

@@ -0,0 +1,40 @@
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Channel } from '../../../../../../shared/channel.interface';
+import { DataService } from '../../../../services/data.service';
+import { selectPlaylistTitle } from '../../../../state/selectors';
+import { SidebarView } from '../video-player.component';
+
+@Component({
+    selector: 'app-sidebar',
+    templateUrl: './sidebar.component.html',
+    styleUrls: ['./sidebar.component.scss'],
+})
+export class SidebarComponent {
+    @Input() channels: Channel[] = [];
+
+    isElectron = this.dataService.isElectron;
+
+    playlistTitle$ = this.store.select(selectPlaylistTitle);
+
+    sidebarView: SidebarView = 'CHANNELS';
+
+    constructor(
+        private dataService: DataService,
+        private router: Router,
+        private store: Store
+    ) {}
+
+    goBack(): void {
+        if (this.sidebarView === 'PLAYLISTS') {
+            this.router.navigate(['/']);
+        } else {
+            this.sidebarView = 'PLAYLISTS';
+        }
+    }
+
+    selectPlaylist() {
+        this.sidebarView = 'CHANNELS';
+    }
+}