refactor: minor code improvements

src/app/home/home.component.ts

@@ -66,6 +66,8 @@ export class HomeComponent {
         },
     ];
 
+    listeners = [];
+
     /**
      * Creates an instanceof HomeComponent
      * @param channelStore channels store
@@ -95,11 +97,13 @@ export class HomeComponent {
                     this.ngZone.run(() => command.execute(response))
                 );
             } else {
-                this.electronService.listenOn(command.id, (response) => {
+                const cb = (response) => {
                     if (response.data.type === command.id) {
                         command.execute(response.data);
                     }
-                });
+                };
+                this.electronService.listenOn(command.id, cb);
+                this.listeners.push(cb);
             }
         });
     }
@@ -177,8 +181,14 @@ export class HomeComponent {
      * Remove ipcRenderer listeners after component destroy
      */
     ngOnDestroy(): void {
-        this.commandsList.forEach((command) =>
-            this.electronService.removeAllListeners(command.id)
-        );
+        if (this.electronService.isElectron) {
+            this.commandsList.forEach((command) =>
+                this.electronService.removeAllListeners(command.id)
+            );
+        } else {
+            this.listeners.forEach((listener) => {
+                window.removeEventListener('message', listener);
+            });
+        }
     }
 }

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

@@ -89,7 +89,7 @@
     </mat-tab>
 
     <mat-tab
-        *ngIf="playlistId !== 'GLOBAL_FAVORITES'"
+        *ngIf="(playlistId$ | async) !== 'GLOBAL_FAVORITES'"
         [label]="'CHANNELS.FAVORITES' | translate"
     >
         <mat-nav-list

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

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import * as _ from 'lodash';
-import { Observable } from 'rxjs';
+import { map, Observable, skipWhile } from 'rxjs';
 import { Channel } from '../../../../../shared/channel.interface';
 import { ChannelQuery, ChannelStore } from '../../../state';
 
@@ -33,10 +33,10 @@ export class ChannelListContainerComponent {
     }
 
     /** Object with channels sorted by groups */
-    groupedChannels: { [key: string]: Channel[] };
+    groupedChannels!: { [key: string]: Channel[] };
 
     /** Selected channel */
-    selected: Channel;
+    selected!: Channel;
 
     /** List with favorited channels */
     favorites$: Observable<Channel[]> = this.channelQuery.select((store) =>
@@ -62,21 +62,21 @@ export class ChannelListContainerComponent {
     }
 
     /** ID of the current playlist */
-    playlistId: string;
+    playlistId$ = this.channelQuery.select().pipe(
+        skipWhile(
+            (store) => store.playlistId === '' || store.playlistId === undefined
+        ),
+        map((data) => data.playlistId)
+    );
 
     /**
      * Creates an instance of ChannelListContainerComponent
-     * @param channelQuery akita's channel query
-     * @param channelStore akita's channel store
-     * @param snackBar service to push snackbar notifications
      */
     constructor(
         private channelQuery: ChannelQuery,
         private channelStore: ChannelStore,
         private snackBar: MatSnackBar
-    ) {
-        this.playlistId = this.channelQuery.getValue().playlistId;
-    }
+    ) {}
 
     /**
      * Sets clicked channel as selected and emits them to the parent component

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

@@ -19,11 +19,17 @@
                     </button>
                     <div class="playlist-info">
                         <div class="name">
-                            {{
-                                sidebarView === 'CHANNELS'
-                                    ? playlistTitle
-                                    : 'My Playlists'
-                            }}
+                            <ng-container
+                                *ngIf="
+                                    sidebarView === 'CHANNELS';
+                                    else allPlaylists
+                                "
+                            >
+                                {{ playlistTitle$ | async }}
+                            </ng-container>
+                            <ng-template #allPlaylists>
+                                My Playlists
+                            </ng-template>
                         </div>
                         <div class="channels-count">
                             {{
@@ -74,7 +80,7 @@
                     <mat-icon>menu</mat-icon>
                 </button>
                 <button
-                    *ngIf="playlistId !== 'GLOBAL_FAVORITES'"
+                    *ngIf="(playlistId$ | async) !== 'GLOBAL_FAVORITES'"
                     mat-icon-button
                     (click)="addToFavorites(activeChannel)"
                     [matTooltip]="'TOP_MENU.TOGGLE_FAVORITE_FLAG' | translate"
@@ -129,6 +135,7 @@
     </mat-drawer-content>
     <!-- right sidebar content -->
     <mat-drawer
+        *ngIf="isElectron"
         position="end"
         #drawerRight
         mode="side"

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

@@ -1,15 +1,11 @@
-import { Component, NgZone, OnInit, ViewChild } from '@angular/core';
+import { Component, NgZone, OnDestroy, 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 { filter, map, Observable, skipWhile } from 'rxjs';
 import { Channel } from '../../../../../shared/channel.interface';
-import {
-    PLAYLIST_GET_ALL,
-    PLAYLIST_GET_BY_ID,
-    PLAYLIST_PARSE_RESPONSE,
-} from '../../../../../shared/ipc-commands';
+import { PLAYLIST_PARSE_RESPONSE } from '../../../../../shared/ipc-commands';
 import { Playlist } from '../../../../../shared/playlist.interface';
 import { DataService } from '../../../services/data.service';
 import { Settings, VideoPlayer } from '../../../settings/settings.interface';
@@ -25,7 +21,7 @@ type SidebarView = 'CHANNELS' | 'PLAYLISTS';
     templateUrl: './video-player.component.html',
     styleUrls: ['./video-player.component.scss'],
 })
-export class VideoPlayerComponent implements OnInit {
+export class VideoPlayerComponent implements OnInit, OnDestroy {
     /** Active selected channel */
     activeChannel$: Observable<Channel> = this.channelQuery
         .select((state) => state.active)
@@ -62,10 +58,20 @@ export class VideoPlayerComponent implements OnInit {
     @ViewChild('sidenav') sideNav: MatSidenav;
 
     /** ID of the current playlist */
-    playlistId = this.channelQuery.getValue().playlistId;
+    playlistId$ = this.channelQuery.select().pipe(
+        skipWhile(
+            (store) => store.playlistId === '' || store.playlistId === undefined
+        ),
+        map((data) => data.playlistId)
+    );
 
     /** Title of the current playlist */
-    playlistTitle = this.channelQuery.getValue().playlistFilename;
+    playlistTitle$ = this.channelQuery.select().pipe(
+        skipWhile((store) => store.playlistFilename === ''),
+        map((store) => store.playlistFilename)
+    );
+
+    isElectron = this.dataService.isElectron;
 
     /** IPC Renderer commands list with callbacks */
     commandsList = [
@@ -81,12 +87,10 @@ export class VideoPlayerComponent implements OnInit {
     /** Current sidebar view */
     sidebarView: SidebarView = 'CHANNELS';
 
+    listeners = [];
+
     /**
      * Creates an instance of VideoPlayerComponent
-     * @param channelQuery akita's channel query
-     * @param channelStore akita's channel store
-     * @param storage browser storage service
-     * @param snackBar service to push snackbar notifications
      */
     constructor(
         private channelQuery: ChannelQuery,
@@ -96,9 +100,7 @@ export class VideoPlayerComponent implements OnInit {
         private router: Router,
         private snackBar: MatSnackBar,
         private storage: StorageMap
-    ) {
-        this.dataService.sendIpcEvent(PLAYLIST_GET_ALL);
-    }
+    ) {}
 
     /**
      * Sets video player and subscribes to channel list from the store
@@ -118,11 +120,13 @@ export class VideoPlayerComponent implements OnInit {
                     this.ngZone.run(() => command.execute(response))
                 );
             } else {
-                this.dataService.listenOn(command.id, (response) => {
+                const cb = (response) => {
                     if (response.data.type === command.id) {
                         command.execute(response.data);
                     }
-                });
+                };
+                this.dataService.listenOn(command.id, cb);
+                this.listeners.push(cb);
             }
         });
     }
@@ -165,16 +169,6 @@ export class VideoPlayerComponent implements OnInit {
         this.sidebarView = view;
     }
 
-    /**
-     * Requests playlist by id
-     * @param playlistId playlist id
-     */
-    getPlaylist(playlistId: string): void {
-        this.dataService.sendIpcEvent(PLAYLIST_GET_BY_ID, {
-            id: playlistId,
-        });
-    }
-
     /** Navigates back */
     goBack(): void {
         if (this.sidebarView === 'PLAYLISTS') {
@@ -183,4 +177,14 @@ export class VideoPlayerComponent implements OnInit {
             this.sidebarView = 'PLAYLISTS';
         }
     }
+
+    ngOnDestroy() {
+        if (this.dataService.isElectron) {
+            this.dataService.removeAllListeners(PLAYLIST_PARSE_RESPONSE);
+        } else {
+            this.listeners.forEach((listener) =>
+                window.removeEventListener('message', listener)
+            );
+        }
+    }
 }

src/app/state/channel.store.ts

@@ -148,8 +148,8 @@ export class ChannelStore extends EntityStore<ChannelState> {
      */
     setPlaylist(playlist: Playlist): void {
         this.remove();
-        const favorites = playlist.favorites || [];
-        const channels = playlist.playlist.items.map((element) =>
+        const favorites = playlist?.favorites || [];
+        const channels = playlist?.playlist.items.map((element) =>
             createChannel(element)
         );
         this.upsertMany(channels);