From 21538b0671b2001fe69c8245542707cf07196310 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sun, 7 Apr 2024 20:59:47 +0200
Subject: [PATCH] feat(xtream): lazy loading in live-stream layout

---
 .../live-stream-layout.component.html                | 12 +++++++++---
 .../live-stream-layout.component.scss                |  1 +
 .../live-stream-layout.component.ts                  |  9 ++++++++-
 src/app/xtream/detail-view.scss                      |  6 ++++++
 4 files changed, 24 insertions(+), 4 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 bf824f283..50ed33350 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
@@ -11,8 +11,14 @@
                 [multiple]="false"
                 [hideSingleSelectionIndicator]="true"
             >
-                @for (item of channels; track $index) {
-                    <mat-list-option (click)="itemClicked.emit(item)">
+                <cdk-virtual-scroll-viewport
+                    itemSize="56"
+                    class="scroll-viewport-portals"
+                >
+                    <mat-list-option
+                        *cdkVirtualFor="let item of channels"
+                        (click)="itemClicked.emit(item)"
+                    >
                         <img
                             matListItemAvatar
                             class="stream-icon"
@@ -23,7 +29,7 @@
                             {{ item.name }}
                         </div>
                     </mat-list-option>
-                }
+                </cdk-virtual-scroll-viewport>
             </mat-selection-list>
         </div>
     </div>
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 dbc660b2a..3136891aa 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
@@ -44,4 +44,5 @@
     height: 100%;
     overflow-y: auto;
     border-right: #111 1px solid;
+    overflow-x: hidden;
 }
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 fc28cddc7..4a39d627d 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,3 +1,4 @@
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatListModule } from '@angular/material/list';
@@ -12,7 +13,13 @@ import { WebPlayerViewComponent } from '../web-player-view/web-player-view.compo
     selector: 'app-live-stream-layout',
     templateUrl: './live-stream-layout.component.html',
     styleUrls: ['./live-stream-layout.component.scss'],
-    imports: [EpgViewComponent, MatListModule, NgIf, WebPlayerViewComponent],
+    imports: [
+        EpgViewComponent,
+        MatListModule,
+        NgIf,
+        ScrollingModule,
+        WebPlayerViewComponent,
+    ],
 })
 export class LiveStreamLayoutComponent {
     @Input({ required: true }) channels: XtreamItem[];
diff --git a/src/app/xtream/detail-view.scss b/src/app/xtream/detail-view.scss
index ca8933691..8bfe05042 100644
--- a/src/app/xtream/detail-view.scss
+++ b/src/app/xtream/detail-view.scss
@@ -2,6 +2,12 @@
     width: 100%;
 }
 
+.details {
+    h2 {
+        word-wrap: break-word;
+    }
+}
+
 .container {
     display: grid;
     grid-gap: 10px;