refactor: code improvements

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

@@ -13,8 +13,9 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { Actions } from '@ngrx/effects';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { TranslatePipe } from '@ngx-translate/core';
-import { MockModule, MockPipes } from 'ng-mocks';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { MockModule, MockPipes, MockProviders } from 'ng-mocks';
+import { NgxIndexedDBService } from 'ngx-indexed-db';
 import { Observable } from 'rxjs';
 import * as MOCKED_PLAYLIST from '../../../../mocks/playlist.json';
 import { DataService } from '../../../services/data.service';
@@ -44,6 +45,7 @@ describe('ChannelListContainerComponent', () => {
                 { provide: DataService, useClass: ElectronServiceStub },
                 provideMockStore(),
                 provideMockActions(actions$),
+                MockProviders(NgxIndexedDBService, TranslateService),
             ],
             imports: [
                 MockModule(MatSnackBarModule),
@@ -73,8 +75,6 @@ describe('ChannelListContainerComponent', () => {
         mockStore.setState({
             playlistState: {
                 channels,
-                favorites: [MOCKED_PLAYLIST.playlist.items[0].url],
-                playlistId: '',
                 active: undefined,
             },
         });
@@ -158,9 +158,10 @@ describe('ChannelListContainerComponent', () => {
             new MouseEvent('click')
         );
         fixture.detectChanges();
-        expect(mockStore.dispatch).toHaveBeenCalledWith(
-            {channel: component._channelList[0], type: expect.stringContaining('favorites')}, 
-        );
+        expect(mockStore.dispatch).toHaveBeenCalledWith({
+            channel: component._channelList[0],
+            type: expect.stringContaining('favorites'),
+        });
         expect(mockStore.dispatch).toHaveBeenCalledTimes(1);
     });
 });

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

@@ -9,12 +9,10 @@ import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { TranslatePipe } from '@ngx-translate/core';
-import { MockComponent, MockModule, MockPipe } from 'ng-mocks';
-import * as MOCKED_PLAYLIST from '../../../../mocks/playlist.json';
+import { MockComponent, MockModule, MockPipe, MockProviders } from 'ng-mocks';
 import { DataService } from '../../../services/data.service';
 import { ElectronServiceStub } from '../../../services/electron.service.stub';
 import { VideoPlayer } from '../../../settings/settings.interface';
-import { createChannel } from '../../../shared/channel.model';
 import { ChannelListContainerComponent } from '../channel-list-container/channel-list-container.component';
 import { EpgListComponent } from '../epg-list/epg-list.component';
 import { HtmlVideoPlayerComponent } from '../html-video-player/html-video-player.component';
@@ -24,7 +22,10 @@ import { VideoPlayerComponent } from './video-player.component';
 
 import { Actions } from '@ngrx/effects';
 import { provideMockActions } from '@ngrx/effects/testing';
-import { Observable } from 'rxjs';
+import { NgxIndexedDBService } from 'ngx-indexed-db';
+import { Observable, of } from 'rxjs';
+import { PlaylistsService } from '../../../services/playlists.service';
+import { initialState } from '../../../state/state';
 
 class MatSnackBarStub {
     open(): void {}
@@ -56,6 +57,7 @@ describe('VideoPlayerComponent', () => {
                     {
                         provide: ActivatedRoute,
                         useValue: {
+                            params: of({ id: '1' }),
                             snapshot: {
                                 queryParams: {
                                     url: 'https://iptvnator/list.m3u',
@@ -65,6 +67,7 @@ describe('VideoPlayerComponent', () => {
                     },
                     provideMockStore(),
                     provideMockActions(actions$),
+                    MockProviders(NgxIndexedDBService, PlaylistsService),
                 ],
                 imports: [
                     MockModule(MatSidenavModule),
@@ -83,34 +86,16 @@ describe('VideoPlayerComponent', () => {
         component = fixture.componentInstance;
         mockStore = TestBed.inject(MockStore);
 
-        // set channels
-        channels = MOCKED_PLAYLIST.playlist.items.map((element) =>
-            createChannel(element)
-        );
-
-        mockStore.setState({ playlistState: {channels} });
-    });
-
-    it('should create and init component', () => {
-        expect(component).toBeTruthy();
-        jest.spyOn(component, 'applySettings');
+        mockStore.setState({
+            playlistState: initialState,
+        });
         fixture.detectChanges();
-        expect(component.applySettings).toHaveBeenCalledTimes(1);
     });
 
     it('should check default component settings', () => {
-        fixture.detectChanges();
         expect(component.playerSettings).toEqual({
             player: VideoPlayer.VideoJs,
             showCaptions: false,
         });
     });
-
-    it('should update store after channel was faved', () => {
-        jest.spyOn(mockStore, 'dispatch');
-        const [firstChannel] = channels;
-        component.addToFavorites(firstChannel);
-        expect(mockStore.dispatch).toHaveBeenCalledTimes(1);
-        expect(mockStore.dispatch).toHaveBeenCalledWith({channel: firstChannel, type: expect.stringContaining('favorite')});
-    });
 });

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

@@ -11,7 +11,13 @@ import {
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { StorageMap } from '@ngx-pwa/local-storage';
-import { filter, Observable, skipWhile, switchMap } from 'rxjs';
+import {
+    combineLatestWith,
+    filter,
+    Observable,
+    skipWhile,
+    switchMap,
+} from 'rxjs';
 import { Channel } from '../../../../../shared/channel.interface';
 import {
     PLAYLIST_PARSE_BY_URL,
@@ -25,6 +31,7 @@ import { STORE_KEY } from '../../../shared/enums/store-keys.enum';
 import * as PlaylistActions from '../../../state/actions';
 import {
     selectActive,
+    selectChannels,
     selectCurrentEpgProgram,
     selectPlaylistTitle,
 } from '../../../state/selectors';
@@ -69,11 +76,19 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         {
             id: PLAYLIST_PARSE_RESPONSE,
             execute: (response: { payload: Playlist }): void => {
-                this.store.dispatch(
-                    PlaylistActions.addPlaylist({
-                        playlist: response.payload,
-                    })
-                );
+                if (response.payload.isTemporary) {
+                    this.store.dispatch(
+                        PlaylistActions.setChannels({
+                            channels: response.payload.playlist.items,
+                        })
+                    );
+                } else {
+                    this.store.dispatch(
+                        PlaylistActions.addPlaylist({
+                            playlist: response.payload,
+                        })
+                    );
+                }
                 this.sidebarView = 'CHANNELS';
             },
         },
@@ -107,11 +122,18 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
         this.getPlaylistUrlAsParam();
 
         this.channels$ = this.activatedRoute.params.pipe(
-            switchMap((params) => {
-                this.store.dispatch(
-                    PlaylistActions.setActivePlaylist({ playlistId: params.id })
-                );
-                return this.playlistsService.getPlaylistChannels(params.id);
+            combineLatestWith(this.activatedRoute.queryParams),
+            switchMap(([params, queryParams]) => {
+                if (params.id) {
+                    this.store.dispatch(
+                        PlaylistActions.setActivePlaylist({
+                            playlistId: params.id,
+                        })
+                    );
+                    return this.playlistsService.getPlaylistChannels(params.id);
+                } else if (queryParams.url) {
+                    return this.store.select(selectChannels);
+                }
             })
         );
     }