feat: show channel logos in the list

This commit closes #28
4gray · Apr 2, 2021 · 41998ff · 41998ff
1 parent 99f6fd8
commit 41998ff
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 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
@@ -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
@@ -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;
+}