fix: improve big playlists handling

src/app/home/home.component.ts

@@ -31,7 +31,7 @@ export class HomeComponent {
             id: ERROR,
             execute: (error: { message: string; status: string }) => {
                 //this.isLoading = false;
-                this.showNotification('Error2: ' + error.message);
+                this.showNotification('Error: ' + error.message);
             },
         },
     ];

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

@@ -19,7 +19,7 @@
             <mat-divider></mat-divider>
             <mat-nav-list>
                 <app-channel-list-item
-                    *ngFor="
+                    *rxFor="
                         let channel of _channelList
                             | filterBy: searchTerm.name : 'name';
                         index as i;

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

@@ -13,7 +13,7 @@ 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, TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MockModule, MockPipes, MockProviders } from 'ng-mocks';
 import { NgxIndexedDBService } from 'ngx-indexed-db';
 import { Observable } from 'rxjs';
@@ -38,7 +38,7 @@ describe('ChannelListContainerComponent', () => {
         TestBed.configureTestingModule({
             declarations: [
                 ChannelListContainerComponent,
-                MockPipes(TranslatePipe, FilterPipe),
+                MockPipes(FilterPipe),
             ],
             providers: [
                 { provide: MatSnackBar, useClass: MatSnackBarStub },
@@ -56,6 +56,7 @@ describe('ChannelListContainerComponent', () => {
                 MockModule(MatTabsModule),
                 MockModule(MatTooltipModule),
                 MockModule(MatExpansionModule),
+                MockModule(TranslateModule),
                 FormsModule,
                 RouterTestingModule,
             ],

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

@@ -1,4 +1,5 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CommonModule, TitleCasePipe } from '@angular/common';
 import {
     Component,
     ElementRef,
@@ -6,21 +7,45 @@ import {
     Input,
     ViewChild,
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTabsModule } from '@angular/material/tabs';
 import { Store } from '@ngrx/store';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { RxFor } from '@rx-angular/template/for';
 import * as _ from 'lodash';
 import { map, skipWhile } from 'rxjs';
 import { Channel } from '../../../../../shared/channel.interface';
+import { FilterPipe } from '../../../shared/pipes/filter.pipe';
 import * as PlaylistActions from '../../../state/actions';
 import {
     selectActivePlaylistId,
     selectFavorites,
 } from '../../../state/selectors';
+import { ChannelListItemComponent } from './channel-list-item/channel-list-item.component';
 @Component({
+    standalone: true,
     selector: 'app-channel-list-container',
     templateUrl: './channel-list-container.component.html',
     styleUrls: ['./channel-list-container.component.scss'],
+    imports: [
+        CommonModule,
+        ChannelListItemComponent,
+        MatExpansionModule,
+        MatDividerModule,
+        MatListModule,
+        MatIconModule,
+        MatTabsModule,
+        TranslateModule,
+        TitleCasePipe,
+        FilterPipe,
+        FormsModule,
+        RxFor,
+    ],
 })
 export class ChannelListContainerComponent {
     /**

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

@@ -1,6 +1,15 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
+    standalone: true,
     selector: 'app-channel-list-item',
     styleUrls: ['./channel-list-item.component.scss'],
     template: `<mat-list-item
@@ -40,6 +49,16 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
             </button>
         </mat-list-item>
         <mat-divider></mat-divider>`,
+    imports: [
+        CommonModule,
+        DragDropModule,
+        MatButtonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatListModule,
+        MatTooltipModule,
+        TranslateModule,
+    ],
 })
 export class ChannelListItemComponent {
     @Input() isDraggable = false;

src/app/player/player.module.ts

@@ -22,6 +22,8 @@ const routes: Routes = [{ path: '', component: VideoPlayerComponent }];
 @NgModule({
     imports: [
         AudioPlayerComponent,
+        ChannelListContainerComponent,
+        ChannelListItemComponent,
         CommonModule,
         HtmlVideoPlayerComponent,
         OverlayModule,
@@ -30,8 +32,6 @@ const routes: Routes = [{ path: '', component: VideoPlayerComponent }];
         VjsPlayerComponent,
     ],
     declarations: [
-        ChannelListContainerComponent,
-        ChannelListItemComponent,
         EpgItemDescriptionComponent,
         EpgListComponent,
         EpgListItemComponent,