From 3ae84572a4546dc041952650f129d896e89469cb Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 6 Feb 2021 00:39:50 +0100
Subject: [PATCH] style: visualization of channels with timeshift

---
 .../components/epg-list/epg-list.component.html       |  9 ++++++++-
 .../components/epg-list/epg-list.component.scss       | 11 +++++++++--
 2 files changed, 17 insertions(+), 3 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 444eaa278..0af48f55a 100644
--- a/src/app/player/components/epg-list/epg-list.component.html
+++ b/src/app/player/components/epg-list/epg-list.component.html
@@ -73,9 +73,16 @@
                     >
                     <span
                         *ngIf="timeNow >= item.start && timeNow <= item.stop"
-                        class="live-badge"
+                        class="live badge"
+                        matTooltip="Live now"
                         >live</span
                     >
+                    <span
+                        *ngIf="item.start < timeNow && item.stop < timeNow"
+                        class="rec badge"
+                        matTooltip="Timeshift available, click to play"
+                        >r</span
+                    >
                 </div>
                 <p matLine>{{ item?.title[0]?.value }}</p>
                 <mat-divider></mat-divider>
diff --git a/src/app/player/components/epg-list/epg-list.component.scss b/src/app/player/components/epg-list/epg-list.component.scss
index 9dacbad6d..aba256211 100644
--- a/src/app/player/components/epg-list/epg-list.component.scss
+++ b/src/app/player/components/epg-list/epg-list.component.scss
@@ -49,8 +49,7 @@ mat-selection-list {
     overflow: auto;
 }
 
-.live-badge {
-    background-color: red;
+.badge {
     border-radius: 2px;
     padding: 2px 6px;
     color: #fff;
@@ -59,6 +58,14 @@ mat-selection-list {
     font-size: 0.8em;
 }
 
+.live {
+    background-color: red;
+}
+
+.rec {
+    background-color: grey;
+}
+
 #date-navigator {
     border-top: 1px solid #999;