From 1772dac236a8f5d5c1708b4025ba648ab633ba56 Mon Sep 17 00:00:00 2001
From: 4gray <4gray@users.noreply.github.com>
Date: Sun, 20 Aug 2023 20:55:18 +0200
Subject: [PATCH] refactor: code improvements in video player & channels list
 component

---
 .../channel-list-container.component.html     |  72 ++++++------
 .../channel-list-container.component.scss     |   9 ++
 .../video-player/video-player.component.html  | 104 +++++++++++-------
 .../video-player/video-player.component.ts    |   6 +
 4 files changed, 116 insertions(+), 75 deletions(-)

diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.html b/src/app/player/components/channel-list-container/channel-list-container.component.html
index 2859fa2a6..6cd745e44 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.html
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.html
@@ -6,42 +6,34 @@
                 {{ 'CHANNELS.ALL_CHANNELS' | translate }}
             </div>
         </ng-template>
-        <mat-list>
-            <mat-list-item>
-                <input
-                    class="full-width search-bar"
-                    type="search"
-                    #search
-                    [placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
-                    [(ngModel)]="searchTerm.name"
-                />
-            </mat-list-item>
-        </mat-list>
+        <div class="search-panel">
+            <input
+                class="full-width search-bar"
+                type="search"
+                #search
+                [placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
+                [(ngModel)]="searchTerm.name"
+            />
+        </div>
         <mat-divider></mat-divider>
         <mat-nav-list>
-            <cdk-virtual-scroll-viewport itemSize="50" class="scroll-viewport">
-                <ng-container
-                    *cdkVirtualFor="
-                        let channel of _channelList
-                            | filterBy: searchTerm.name:'name';
-                        index as i;
-                        trackBy: trackByFn
-                    "
-                >
-                    <app-channel-list-item
-                        [name]="
-                            i +
-                            1 +
-                            '. ' +
-                            (channel?.name || 'CHANNELS.UNNAMED_CHANNEL'
-                                | translate)
-                        "
-                        [logo]="channel?.tvg?.logo"
-                        (clicked)="selectChannel(channel)"
-                        [selected]="selected?.id === channel?.id"
-                    ></app-channel-list-item>
-                </ng-container>
-            </cdk-virtual-scroll-viewport>
+            <app-channel-list-item
+                *ngFor="
+                    let channel of _channelList
+                        | filterBy: searchTerm.name : 'name';
+                    index as i;
+                    trackBy: trackByFn
+                "
+                [name]="
+                    i +
+                    1 +
+                    '. ' +
+                    (channel?.name || 'CHANNELS.UNNAMED_CHANNEL' | translate)
+                "
+                [logo]="channel?.tvg?.logo"
+                (clicked)="selectChannel(channel)"
+                [selected]="selected?.id === channel?.id"
+            ></app-channel-list-item>
         </mat-nav-list>
     </mat-tab>
 
@@ -67,7 +59,11 @@
                         </mat-expansion-panel-header>
                         <ng-template matExpansionPanelContent>
                             <ng-container
-                                *ngFor="let channel of groups.value; index as i"
+                                *ngFor="
+                                    let channel of groups.value;
+                                    index as i;
+                                    trackBy: trackByFn
+                                "
                             >
                                 <app-channel-list-item
                                     [name]="
@@ -105,7 +101,11 @@
         >
             <ng-container *ngIf="favorites.length > 0; else noFavorites">
                 <app-channel-list-item
-                    *ngFor="let channel of favorites; index as i"
+                    *ngFor="
+                        let channel of favorites;
+                        index as i;
+                        trackBy: trackByFn
+                    "
                     [name]="
                         i +
                         1 +
diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.scss b/src/app/player/components/channel-list-container/channel-list-container.component.scss
index eb0db78d9..88b68eb64 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.scss
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.scss
@@ -6,6 +6,10 @@
     min-height: calc(100vh - 165px);
 }
 
+.search-panel {
+    padding: 10px;
+}
+
 .search-bar {
     padding: 8px;
     background: #ddd;
@@ -13,6 +17,11 @@
     border-radius: 4px;
 }
 
+mat-nav-list {
+    overflow: scroll;
+    max-height: calc(100vh - 193px);
+}
+
 ::ng-deep {
     .mat-expansion-panel-body {
         padding: 0 !important;
diff --git a/src/app/player/components/video-player/video-player.component.html b/src/app/player/components/video-player/video-player.component.html
index da14358be..997df7de7 100644
--- a/src/app/player/components/video-player/video-player.component.html
+++ b/src/app/player/components/video-player/video-player.component.html
@@ -2,51 +2,77 @@
     <!-- sidebar content -->
     <mat-drawer #drawer mode="side" opened disableClose>
         <app-sidebar
-            *ngIf="(channels$ | async) as channels; else noChannels"
-            [channels]="channels" />
-            <ng-template #noChannels>No channels <br /> <button mat-button color="secondary" (click)="navigateHome()">Go back</button></ng-template>
+            *ngIf="channels$ | async as channels; else noChannels"
+            [channels]="channels"
+        />
+        <ng-template #noChannels
+            >No channels <br />
+            <button mat-button color="secondary" (click)="navigateHome()">
+                Go back
+            </button></ng-template
+        >
     </mat-drawer>
     <mat-drawer-content>
         <ng-container *ngIf="activeChannel$ | async as activeChannel">
             <!-- toolbar with drawer icon -->
-            <app-toolbar (toggleLeftDrawerClicked)="drawer.toggle()" (toggleRightDrawerClicked)="drawerRight.toggle()" 
-            (multiEpgClicked)="openMultiEpgView()" [activeChannel]="activeChannel" />
+            <app-toolbar
+                (toggleLeftDrawerClicked)="drawer.toggle()"
+                (toggleRightDrawerClicked)="drawerRight.toggle()"
+                (multiEpgClicked)="openMultiEpgView()"
+                [activeChannel]="activeChannel"
+            />
 
-            <!-- video.js player -->
-            <app-vjs-player
-                *ngIf="playerSettings.player === 'videojs'"
-                [options]="{
-                    sources: [
-                        {
-                            src: activeChannel?.url + activeChannel?.epgParams,
-                            type: 'application/x-mpegURL'
-                        }
-                    ]
-                }"
-                [class.hide-captions]="!playerSettings.showCaptions"
-            ></app-vjs-player>
+            <app-audio-player
+                *ngIf="activeChannel.radio === 'true'; else videoPlayer"
+                [url]="activeChannel.url"
+                [icon]="activeChannel?.tvg?.logo"
+            />
+            <ng-template #videoPlayer>
+                <!-- video.js player -->
+                <app-vjs-player
+                    *ngIf="playerSettings.player === 'videojs'"
+                    [options]="{
+                        sources: [
+                            {
+                                src:
+                                    activeChannel?.url +
+                                    activeChannel?.epgParams,
+                                type: 'application/x-mpegURL'
+                            }
+                        ]
+                    }"
+                    [class.hide-captions]="!playerSettings.showCaptions"
+                ></app-vjs-player>
+
+                <!-- default html player component -->
+                <app-html-video-player
+                    *ngIf="playerSettings.player === 'html5'"
+                    [channel]="activeChannel"
+                    [showCaptions]="playerSettings.showCaptions"
+                />
+                <div class="mpv-player" *ngIf="playerSettings.player === 'mpv'">
+                    <img src="./assets/images/custom-player.png" />
+                    <p>
+                        The channel is played in a separate window in the MPV
+                        player. (<a
+                            [routerLink]
+                            style="cursor: pointer"
+                            (click)="
+                                openUrl(
+                                    'https://github.com/4gray/iptvnator/wiki/What-is-mpv-video-player-and-how-to-install-it-on-different-operating-systems%3F'
+                                )
+                            "
+                            >Installation instructions</a
+                        >)
+                    </p>
+                </div>
+                <!-- channel overlay -->
+                <app-info-overlay
+                    [channel]="activeChannel"
+                    [epgProgram]="epgProgram$ | async"
+                ></app-info-overlay>
+            </ng-template>
         </ng-container>
-
-        <!-- default html player component -->
-        <app-html-video-player
-            *ngIf="playerSettings.player === 'html5'"
-            [channel]="activeChannel$ | async"
-            [showCaptions]="playerSettings.showCaptions"
-        >
-        </app-html-video-player>
-
-        <ng-container *ngIf="(activeChannel$ | async) && playerSettings.player === 'mpv'">
-            <div class="mpv-player">
-                <img src="./assets/images/custom-player.png" />
-                <p>The channel is played in a separate window in the MPV player. (<a [routerLink] style="cursor: pointer;" (click)="openUrl('https://github.com/4gray/iptvnator/wiki/What-is-mpv-video-player-and-how-to-install-it-on-different-operating-systems%3F')">Installation instructions</a>)</p>
-            </div>
-        </ng-container>
-
-        <!-- channel overlay -->
-        <app-info-overlay
-            [channel]="activeChannel$ | async"
-            [epgProgram]="epgProgram$ | async"
-        ></app-info-overlay>
     </mat-drawer-content>
     <!-- right sidebar content -->
     <mat-drawer position="end" #drawerRight mode="side" disableClose>
diff --git a/src/app/player/components/video-player/video-player.component.ts b/src/app/player/components/video-player/video-player.component.ts
index 1447f3df6..cd8b14369 100644
--- a/src/app/player/components/video-player/video-player.component.ts
+++ b/src/app/player/components/video-player/video-player.component.ts
@@ -142,6 +142,12 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
                                     }
                                     : {}
                             );
+
+                            this.store.dispatch(
+                                PlaylistActions.setChannels({
+                                    channels: playlist.playlist.items,
+                                })
+                            );
                             return playlist.playlist.items;
                         })
                     );