feat(xtream): lazy loading in live-stream layout

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>

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;
 }

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[];

src/app/xtream/detail-view.scss

@@ -2,6 +2,12 @@
     width: 100%;
 }
 
+.details {
+    h2 {
+        word-wrap: break-word;
+    }
+}
+
 .container {
     display: grid;
     grid-gap: 10px;