From 0c4e7dab116f04f38c2d6c608f9e2ad0849e84f8 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 24 Aug 2024 20:15:39 +0200
Subject: [PATCH] fix(xtream): live channel selection state

---
 .../live-stream-layout.component.html             | 14 ++++++++------
 .../live-stream-layout.component.scss             |  4 ++++
 .../live-stream-layout.component.ts               | 15 ++++++++++++++-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/app/portals/live-stream-layout/live-stream-layout.component.html b/src/app/portals/live-stream-layout/live-stream-layout.component.html
index 0907f3fdc..9317d51ab 100644
--- a/src/app/portals/live-stream-layout/live-stream-layout.component.html
+++ b/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
diff --git a/src/app/portals/live-stream-layout/live-stream-layout.component.scss b/src/app/portals/live-stream-layout/live-stream-layout.component.scss
index 1fb1c9b37..62655efae 100644
--- a/src/app/portals/live-stream-layout/live-stream-layout.component.scss
+++ b/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;
+}
diff --git a/src/app/portals/live-stream-layout/live-stream-layout.component.ts b/src/app/portals/live-stream-layout/live-stream-layout.component.ts
index 4a39d627d..6667c1d43 100644
--- a/src/app/portals/live-stream-layout/live-stream-layout.component.ts
+++ b/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;
+    }
 }