From 882bb5ad604e9dbabcb6b385323d3437c12501fe Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 4 Feb 2023 22:35:44 +0100
Subject: [PATCH] refactor: extract channel-list-item to own component

---
 .../channel-list-container.component.html     | 113 +++++++-----------
 .../channel-list-container.component.scss     |  23 ----
 .../channel-list-item.component.scss          |  26 ++++
 .../channel-list-item.component.ts            |  37 ++++++
 src/app/player/player.module.ts               |   2 +
 5 files changed, 109 insertions(+), 92 deletions(-)
 create mode 100644 src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.scss
 create mode 100644 src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.ts

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 ba1ccfb41..49a7e83e5 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
@@ -20,32 +20,26 @@
         <mat-divider></mat-divider>
         <mat-nav-list>
             <cdk-virtual-scroll-viewport itemSize="50" class="scroll-viewport">
-                <mat-list-item
+                <ng-container
                     *cdkVirtualFor="
                         let channel of _channelList
                             | filterBy: searchTerm.name:'name';
                         index as i;
                         trackBy: trackByFn
                     "
-                    [class.active]="selected?.id === channel.id"
-                    (click)="selectChannel(channel)"
-                    data-test-id="channel-item"
                 >
-                    <div class="channel-logo" *ngIf="channel.tvg.logo">
-                        <img
-                            [src]="channel.tvg.logo"
-                            width="48"
-                            onerror="this.style.display='none'"
-                        />
-                    </div>
-                    <p matLine class="channel-name">
-                        {{
-                            i + 1 + '. ' + channel?.name ||
-                                ('CHANNELS.UNNAMED_CHANNEL' | translate)
-                        }}
-                    </p>
-                    <mat-divider></mat-divider>
-                </mat-list-item>
+                    <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>
         </mat-nav-list>
     </mat-tab>
@@ -71,30 +65,22 @@
                             ({{ groups.value.length }})
                         </mat-expansion-panel-header>
                         <ng-template matExpansionPanelContent>
-                            <mat-list-item
+                            <ng-container
                                 *ngFor="let channel of groups.value; index as i"
-                                [class.active]="selected?.id === channel.id"
-                                (click)="selectChannel(channel)"
                             >
-                                <div
-                                    class="channel-logo"
-                                    *ngIf="channel.tvg.logo"
-                                >
-                                    <img
-                                        [src]="channel.tvg.logo"
-                                        width="48"
-                                        onerror="this.style.display='none'"
-                                    />
-                                </div>
-                                <p matLine class="channel-name">
-                                    {{
-                                        i + 1 + '. ' + channel?.name ||
-                                            ('CHANNELS.UNNAMED_CHANNEL'
-                                                | translate)
-                                    }}
-                                </p>
-                                <mat-divider></mat-divider>
-                            </mat-list-item>
+                                <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>
                         </ng-template>
                     </mat-expansion-panel>
                 </ng-container>
@@ -114,34 +100,23 @@
             id="favorites-list"
         >
             <ng-container *ngIf="favorites.length > 0; else noFavorites">
-                <mat-list-item
-                    *ngFor="let channel of favorites; index as i"
-                    [class.active]="selected?.id === channel.id"
-                    (click)="selectChannel(channel)"
-                >
-                    <div class="channel-logo" *ngIf="channel.tvg.logo">
-                        <img
-                            [src]="channel.tvg.logo"
-                            width="48"
-                            onerror="this.style.display='none'"
-                        />
-                    </div>
-                    <p matLine class="channel-name">
-                        {{
-                            i + 1 + '. ' + channel?.name ||
-                                ('CHANNELS.UNNAMED_CHANNEL' | translate)
-                        }}
-                    </p>
-                    <button
-                        mat-icon-button
-                        color="primary"
-                        [matTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
-                        (click)="toggleFavoriteChannel(channel, $event)"
-                    >
-                        <mat-icon color="accent">star</mat-icon>
-                    </button>
-                    <mat-divider></mat-divider>
-                </mat-list-item>
+                <ng-container *ngFor="let channel of favorites; index as i">
+                    <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"
+                        [showFavoriteButton]="true"
+                        (favoriteToggled)="
+                            toggleFavoriteChannel(channel, $event)
+                        "
+                    ></app-channel-list-item>
+                </ng-container>
             </ng-container>
             <ng-template #noFavorites>
                 <mat-list-item
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 5e93c37f1..580023649 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
@@ -1,7 +1,3 @@
-.active {
-    background: #ddd;
-}
-
 .mat-list-base {
     padding-top: 0;
 }
@@ -17,11 +13,6 @@
     border-radius: 4px;
 }
 
-.channel-logo {
-    max-height: 48px;
-    overflow: hidden;
-}
-
 ::ng-deep {
     .mat-expansion-panel-body {
         padding: 0 !important;
@@ -36,10 +27,6 @@
         .search-bar::placeholder {
             color: #ccc;
         }
-
-        .active {
-            background: #000;
-        }
     }
 
     .mat-tab-label-content {
@@ -57,16 +44,6 @@
     }
 }
 
-.channel-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    font-size: 0.9em;
-    max-width: 290px;
-}
-
 [type='search']::-webkit-search-cancel-button {
     -webkit-appearance: none;
     cursor: pointer;
diff --git a/src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.scss b/src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.scss
new file mode 100644
index 000000000..b4f916cc1
--- /dev/null
+++ b/src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.scss
@@ -0,0 +1,26 @@
+.channel-logo {
+    max-height: 48px;
+    overflow: hidden;
+}
+
+.channel-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    font-size: 0.9em;
+    max-width: 290px;
+}
+
+.active {
+    background: #ddd;
+}
+
+::ng-deep {
+    .dark-theme {
+        .active {
+            background: #000;
+        }
+    }
+}
diff --git a/src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.ts b/src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.ts
new file mode 100644
index 000000000..1682c97aa
--- /dev/null
+++ b/src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.ts
@@ -0,0 +1,37 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'app-channel-list-item',
+    styleUrls: ['./channel-list-item.component.scss'],
+    template: `<mat-list-item
+        [class.active]="selected"
+        (click)="clicked.emit()"
+        data-test-id="channel-item"
+    >
+        <div class="channel-logo" *ngIf="logo">
+            <img [src]="logo" width="48" onerror="this.style.display='none'" />
+        </div>
+        <p matLine class="channel-name">
+            {{ name }}
+        </p>
+        <button
+            *ngIf="showFavoriteButton"
+            mat-icon-button
+            color="primary"
+            [matTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
+            (click)="favoriteToggled.emit($event)"
+        >
+            <mat-icon color="accent">star</mat-icon>
+        </button>
+        <mat-divider></mat-divider
+    ></mat-list-item>`,
+})
+export class ChannelListItemComponent {
+    @Input() logo!: string;
+    @Input() name = '';
+    @Input() showFavoriteButton = false;
+    @Input() selected = false;
+
+    @Output() clicked = new EventEmitter<void>();
+    @Output() favoriteToggled = new EventEmitter();
+}
diff --git a/src/app/player/player.module.ts b/src/app/player/player.module.ts
index ae7114834..f47a1c0d9 100644
--- a/src/app/player/player.module.ts
+++ b/src/app/player/player.module.ts
@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '../shared/shared.module';
 import { ChannelListContainerComponent } from './components/channel-list-container/channel-list-container.component';
+import { ChannelListItemComponent } from './components/channel-list-container/channel-list-item/channel-list-item.component';
 import { EpgItemDescriptionComponent } from './components/epg-list/epg-item-description/epg-item-description.component';
 import { EpgListItemComponent } from './components/epg-list/epg-list-item/epg-list-item.component';
 import { EpgListComponent } from './components/epg-list/epg-list.component';
@@ -24,6 +25,7 @@ const routes: Routes = [{ path: '', component: VideoPlayerComponent }];
     ],
     declarations: [
         ChannelListContainerComponent,
+        ChannelListItemComponent,
         EpgItemDescriptionComponent,
         EpgListComponent,
         EpgListItemComponent,