feat(xtream): search for channels

src/app/portals/live-stream-layout/live-stream-layout.component.html

@@ -7,6 +7,17 @@
 >
     <div class="sidebar">
         <div class="sidebar-content">
+            <div class="search-panel">
+                <mat-form-field class="search-bar">
+                    <mat-icon matPrefix>search</mat-icon>
+                    <input
+                        matInput
+                        type="search"
+                        [placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
+                        [(ngModel)]="searchString"
+                    />
+                </mat-form-field>
+            </div>
             <mat-selection-list [multiple]="false">
                 <cdk-virtual-scroll-viewport
                     [itemSize]="56"
@@ -14,7 +25,8 @@
                 >
                     <mat-list-option
                         *cdkVirtualFor="
-                            let item of channels;
+                            let item of channels
+                                | filterBy: searchString() : 'name';
                             trackBy: trackBy;
                             templateCacheSize: 0
                         "

src/app/portals/live-stream-layout/live-stream-layout.component.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 :host {
     width: 100%;
 }
@@ -34,6 +36,18 @@
 
 .epg { grid-area: epg; }
 
+.search-panel {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -15px;
+}
+
+.search-bar {
+    width: 90%;
+    @include mat.form-field-density(-5);
+}
+
 .epg-content {
     height: 100%;
     overflow-y: auto;
@@ -54,3 +68,11 @@
 mat-list-option {
     width: 320px;
 }
+
+::ng-deep {
+    .search-bar {
+        div {
+            border-radius: 20px;
+        }
+    }
+}

src/app/portals/live-stream-layout/live-stream-layout.component.ts

@@ -6,11 +6,17 @@ import {
     EventEmitter,
     Input,
     Output,
+    signal,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
+import { TranslateModule } from '@ngx-translate/core';
 import { XtreamItem } from '../../../../shared/xtream-item.interface';
 import { VideoPlayer } from '../../settings/settings.interface';
+import { FilterPipe } from '../../shared/pipes/filter.pipe';
 import { EpgItem } from '../../xtream/epg-item.interface';
 import { EpgViewComponent } from '../epg-view/epg-view.component';
 import { WebPlayerViewComponent } from '../web-player-view/web-player-view.component';
@@ -22,11 +28,16 @@ import { WebPlayerViewComponent } from '../web-player-view/web-player-view.compo
     styleUrls: ['./live-stream-layout.component.scss'],
     imports: [
         EpgViewComponent,
+        FilterPipe,
+        FormsModule,
         MatListModule,
+        MatIconModule,
+        MatInputModule,
+        MatFormFieldModule,
         NgIf,
         ScrollingModule,
         WebPlayerViewComponent,
-        FormsModule,
+        TranslateModule,
     ],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -38,6 +49,8 @@ export class LiveStreamLayoutComponent {
 
     @Output() itemClicked = new EventEmitter<XtreamItem>();
 
+    searchString = signal<string>('');
+
     trackBy(_index: number, item: XtreamItem) {
         return item.stream_id;
     }