From 41998ff7a0800368ef64ba184e4bab1b02f509c0 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Fri, 2 Apr 2021 11:01:18 +0200
Subject: [PATCH] feat: show channel logos in the list

This commit closes #28
---
 .../channel-list-container.component.html     | 26 ++++++++++++++++---
 .../channel-list-container.component.scss     | 10 +++++++
 2 files changed, 32 insertions(+), 4 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 0f318adc..3c2e95a3 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
@@ -33,7 +33,13 @@
                     [class.active]="selected?.id === channel.id"
                     (click)="selectChannel(channel)"
                 >
-                    <p matLine>
+                    <img
+                        [src]="channel.tvg.logo"
+                        *ngIf="channel.tvg.logo"
+                        width="48"
+                        onerror="this.style.display='none'"
+                    />
+                    <p matLine class="channel-name">
                         {{
                             i + 1 + '. ' + channel?.name ||
                                 ('CHANNELS.UNNAMED_CHANNEL' | translate)
@@ -65,7 +71,13 @@
                                 [class.active]="selected?.id === channel.id"
                                 (click)="selectChannel(channel)"
                             >
-                                <p matLine>
+                                <img
+                                    [src]="channel.tvg.logo"
+                                    *ngIf="channel.tvg.logo"
+                                    width="48"
+                                    onerror="this.style.display='none'"
+                                />
+                                <p matLine class="channel-name">
                                     {{
                                         i + 1 + '. ' + channel?.name ||
                                             ('CHANNELS.UNNAMED_CHANNEL'
@@ -95,7 +107,13 @@
                     [class.active]="selected?.id === channel.id"
                     (click)="selectChannel(channel)"
                 >
-                    <p matLine>
+                    <img
+                        [src]="channel.tvg.logo"
+                        *ngIf="channel.tvg.logo"
+                        width="48"
+                        onerror="this.style.display='none'"
+                    />
+                    <p matLine class="channel-name">
                         {{
                             i + 1 + '. ' + channel?.name ||
                                 ('CHANNELS.UNNAMED_CHANNEL' | translate)
@@ -107,7 +125,7 @@
                         [matTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
                         (click)="toggleFavoriteChannel(channel, $event)"
                     >
-                        <mat-icon>star</mat-icon>
+                        <mat-icon color="accent">star</mat-icon>
                     </button>
                     <mat-divider></mat-divider>
                 </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 fdcc3082..b4091287 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
@@ -53,3 +53,13 @@
         margin: 5px !important;
     }
 }
+
+.channel-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    font-size: 0.9em;
+    width: 290px;
+}