refactor: re-organize command listeners

src/app/app.component.spec.ts

@@ -18,6 +18,7 @@ import { ElectronServiceStub } from './services/electron.service.stub';
 import { SettingsService } from './services/settings.service';
 import { WhatsNewService } from './services/whats-new.service';
 import { WhatsNewServiceStub } from './services/whats-new.service.stub';
+import { Language } from './settings/language.enum';
 import { Theme } from './settings/theme.enum';
 import { STORE_KEY } from './shared/enums/store-keys.enum';
 
@@ -77,7 +78,7 @@ describe('AppComponent', () => {
         const fixture = TestBed.createComponent(AppComponent);
         const app = fixture.debugElement.componentInstance;
         expect(app).toBeTruthy();
-        expect(component.commandsList.length).toEqual(5);
+        expect(component.DEFAULT_LANG).toEqual(Language.ENGLISH);
     });
 
     it('should init component', () => {
@@ -98,7 +99,9 @@ describe('AppComponent', () => {
         it('should set IPC listeners', () => {
             jest.spyOn(electronService, 'listenOn');
             component.setRendererListeners();
-            expect(electronService.listenOn).toHaveBeenCalledTimes(5);
+            expect(electronService.listenOn).toHaveBeenCalledTimes(
+                component.commandsList.length
+            );
         });
 
         it('should remove all ipc listeners on destroy', () => {

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, NgZone } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { ModalWindow } from 'ngx-whats-new/lib/modal-window.interface';
@@ -7,6 +8,7 @@ import { IpcCommand } from '../../shared/ipc-command.class';
 import {
     EPG_ERROR,
     EPG_FETCH_DONE,
+    ERROR,
     OPEN_FILE,
     SHOW_WHATS_NEW,
     VIEW_ADD_PLAYLIST,
@@ -45,6 +47,16 @@ export class AppComponent {
         new IpcCommand(EPG_FETCH_DONE, () => this.epgService.onEpgFetchDone()),
         new IpcCommand(EPG_ERROR, () => this.epgService.onEpgError()),
         new IpcCommand(SHOW_WHATS_NEW, () => this.showWhatsNewDialog()),
+        new IpcCommand(
+            ERROR,
+            (response: { message: string; status: number }) => {
+                this.snackBar.open(
+                    `Error: ${response.status} ${response.message}.`,
+                    null,
+                    { duration: 2000 }
+                );
+            }
+        ),
     ];
 
     /** Default language as fallback */
@@ -58,6 +70,7 @@ export class AppComponent {
         private epgService: EpgService,
         private ngZone: NgZone,
         private router: Router,
+        private snackBar: MatSnackBar,
         private translate: TranslateService,
         private settingsService: SettingsService,
         private whatsNewService: WhatsNewService

src/app/home/home.component.ts

@@ -3,12 +3,10 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { UploadFile } from 'ngx-uploader';
 import {
-    ERROR,
     PLAYLIST_PARSE,
     PLAYLIST_PARSE_BY_URL,
     PLAYLIST_PARSE_RESPONSE,
     PLAYLIST_PARSE_TEXT,
-    PLAYLIST_UPDATE_RESPONSE,
 } from '../../../shared/ipc-commands';
 import { Playlist } from '../../../shared/playlist.interface';
 import { DataService } from '../services/data.service';
@@ -36,20 +34,6 @@ export class HomeComponent {
                 this.navigateToPlayer();
             },
         },
-        {
-            id: ERROR,
-            execute: (response: { message: string; status: number }): void => {
-                this.isLoading = false;
-                this.showNotification(
-                    `Error: ${response.status} ${response.message}.`
-                );
-            },
-        },
-        {
-            id: PLAYLIST_UPDATE_RESPONSE,
-            execute: (response: { message: string }): void =>
-                this.showNotification(response.message),
-        },
     ];
 
     listeners = [];
@@ -69,7 +53,6 @@ export class HomeComponent {
         private router: Router,
         private snackBar: MatSnackBar
     ) {
-        // set all renderer listeners
         this.setRendererListeners();
     }
 

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

@@ -1,5 +1,5 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Component, NgZone } from '@angular/core';
+import { Component, NgZone, OnDestroy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslateService } from '@ngx-translate/core';
@@ -13,6 +13,7 @@ import {
     PLAYLIST_REMOVE_BY_ID_RESPONSE,
     PLAYLIST_UPDATE,
     PLAYLIST_UPDATE_POSITIONS,
+    PLAYLIST_UPDATE_RESPONSE,
 } from './../../../../shared/ipc-commands';
 import { DialogService } from './../../services/dialog.service';
 import { PlaylistMeta } from './../../shared/playlist-meta.type';
@@ -23,7 +24,7 @@ import { PlaylistInfoComponent } from './playlist-info/playlist-info.component';
     templateUrl: './recent-playlists.component.html',
     styleUrls: ['./recent-playlists.component.scss'],
 })
-export class RecentPlaylistsComponent {
+export class RecentPlaylistsComponent implements OnDestroy {
     /** All available playlists */
     playlists: PlaylistMeta[] = [];
 
@@ -41,8 +42,16 @@ export class RecentPlaylistsComponent {
             });
             this.electronService.sendIpcEvent(PLAYLIST_GET_ALL);
         }),
+        new IpcCommand(
+            PLAYLIST_UPDATE_RESPONSE,
+            (response: { message: string }) => {
+                this.snackBar.open(response.message, null, { duration: 2000 });
+            }
+        ),
     ];
 
+    listeners = [];
+
     /**
      * Creates an instance of the component
      * @param dialog angular material dialog reference
@@ -76,11 +85,13 @@ export class RecentPlaylistsComponent {
                     this.ngZone.run(() => command.callback(response))
                 );
             } else {
-                this.electronService.listenOn(command.id, (response) => {
+                const cb = (response) => {
                     if (response.data.type === command.id) {
                         command.callback(response.data);
                     }
-                });
+                };
+                this.electronService.listenOn(command.id, cb);
+                this.listeners.push(cb);
             }
         });
     }
@@ -155,4 +166,19 @@ export class RecentPlaylistsComponent {
             ...(item.url ? { url: item.url } : { filePath: item.filePath }),
         });
     }
+
+    /**
+     * Removes command listeners on component destroy
+     */
+    ngOnDestroy(): void {
+        if (this.electronService.isElectron) {
+            this.commandsList.forEach((command) =>
+                this.electronService.removeAllListeners(command.id)
+            );
+        } else {
+            this.listeners.forEach((listener) => {
+                window.removeEventListener('message', listener);
+            });
+        }
+    }
 }