From d008115b26105139ce360dd15ee93da3d62ae018 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Wed, 3 Feb 2021 22:23:33 +0100
Subject: [PATCH] style: visual improvements in epg-list cmp

---
 .../epg-list/epg-list.component.html          | 28 +++++++++++--------
 .../components/epg-list/epg-list.component.ts | 11 ++++++++
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/app/player/components/epg-list/epg-list.component.html b/src/app/player/components/epg-list/epg-list.component.html
index 1ede1420e..66a585c5d 100644
--- a/src/app/player/components/epg-list/epg-list.component.html
+++ b/src/app/player/components/epg-list/epg-list.component.html
@@ -1,16 +1,22 @@
 <ng-container *ngIf="channel; else noEpg">
     <div fxFlex="80px" id="channel-info" fxLayoutAlign="row" fxLayoutGap="10px">
-        <img *ngIf="channel?.icon" [src]="channel.icon" width="48" />
-        <div>
-            <div class="channel-name">{{ channel?.name[0]?.value }}</div>
-            <ng-container>
-                <div class="playing-now">Playing now:</div>
-                <div class="epg-program-name">
-                    {{
-                        playingNow ? playingNow.title[0]?.value : 'Live stream'
-                    }}
-                </div>
-            </ng-container>
+        <div fxLayoutAlign="column" fxLayoutGap="10px">
+            <div fxFlex="48px" fxFlexAlign="center">
+                <img *ngIf="channel?.icon" [src]="channel.icon" width="48" />
+            </div>
+            <div fxFlex="100">
+                <div class="channel-name">{{ channel?.name[0]?.value }}</div>
+                <ng-container>
+                    <div class="playing-now">Playing now:</div>
+                    <div class="epg-program-name">
+                        {{
+                            playingNow
+                                ? playingNow.title[0]?.value
+                                : 'Live stream'
+                        }}
+                    </div>
+                </ng-container>
+            </div>
         </div>
     </div>
     <mat-selection-list fxFlex [multiple]="false">
diff --git a/src/app/player/components/epg-list/epg-list.component.ts b/src/app/player/components/epg-list/epg-list.component.ts
index 8f98a5230..cf7f8e818 100644
--- a/src/app/player/components/epg-list/epg-list.component.ts
+++ b/src/app/player/components/epg-list/epg-list.component.ts
@@ -80,12 +80,23 @@ export class EpgListComponent {
                 .sort((a, b) => {
                     return a.start.localeCompare(b.start);
                 });
+
+            this.setPlayingNow();
         } else {
             this.items = [];
             this.channel = null;
         }
     }
 
+    /**
+     * Sets the playing now variable based on the current time
+     */
+    setPlayingNow(): void {
+        this.playingNow = this.items.find(
+            (item) => this.timeNow >= item.start && this.timeNow <= item.stop
+        );
+    }
+
     /**
      * Sets the provided epg program as active and starts to play
      * @param program