fix(xtream): live channel selection state

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

@@ -7,16 +7,18 @@
 >
     <div class="sidebar">
         <div class="sidebar-content">
-            <mat-selection-list
-                [multiple]="false"
-                [hideSingleSelectionIndicator]="true"
-            >
+            <mat-selection-list [multiple]="false">
                 <cdk-virtual-scroll-viewport
-                    itemSize="56"
+                    [itemSize]="56"
                     class="scroll-viewport-portals"
                 >
                     <mat-list-option
-                        *cdkVirtualFor="let item of channels"
+                        *cdkVirtualFor="
+                            let item of channels;
+                            trackBy: trackBy;
+                            templateCacheSize: 0
+                        "
+                        [value]="item"
                         (click)="itemClicked.emit(item)"
                     >
                         <img

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

@@ -50,3 +50,7 @@
 .no-channel-selected {
     margin: 10px;
 }
+
+mat-list-option {
+    width: 320px;
+}

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

@@ -1,6 +1,13 @@
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { NgIf } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatListModule } from '@angular/material/list';
 import { XtreamItem } from '../../../../shared/xtream-item.interface';
 import { VideoPlayer } from '../../settings/settings.interface';
@@ -19,7 +26,9 @@ import { WebPlayerViewComponent } from '../web-player-view/web-player-view.compo
         NgIf,
         ScrollingModule,
         WebPlayerViewComponent,
+        FormsModule,
     ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LiveStreamLayoutComponent {
     @Input({ required: true }) channels: XtreamItem[];
@@ -28,4 +37,8 @@ export class LiveStreamLayoutComponent {
     @Input() streamUrl: string;
 
     @Output() itemClicked = new EventEmitter<XtreamItem>();
+
+    trackBy(_index: number, item: XtreamItem) {
+        return item.stream_id;
+    }
 }