style: visualization of channels with timeshift

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>

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;