refactor: check timeshift based on tvg-rec prop

src/app/player/components/epg-list/epg-list.component.html

@@ -34,7 +34,7 @@
                 fxFlex="100"
                 fxLayoutAlign="center center"
             >
-                {{ dateToday | momentDate: 'YYYYMMDD':'MMMM Do dddd' }}</span
+                {{ dateToday | momentDate: 'YYYYMMDD':'MMMM Do, dddd' }}</span
             >
             <button
                 fxFlex="40px"
@@ -48,7 +48,11 @@
     </div>
 
     <!-- program list -->
-    <mat-selection-list fxFlex [multiple]="false">
+    <mat-selection-list
+        fxFlex
+        [multiple]="false"
+        *ngIf="timeshiftUntil$ | async as timeshiftUntil"
+    >
         <ng-container *ngIf="items?.length > 0; else epgNotAvailable">
             <mat-list-option
                 *ngFor="let item of items"
@@ -57,7 +61,8 @@
                 (click)="
                     setEpgProgram(
                         item,
-                        timeNow >= item.start && timeNow <= item.stop
+                        timeNow >= item.start && timeNow <= item.stop,
+                        item.start > timeshiftUntil
                     )
                 "
             >
@@ -78,9 +83,13 @@
                         >live</span
                     >
                     <span
-                        *ngIf="item.start < timeNow && item.stop < timeNow"
+                        *ngIf="
+                            item.start < timeNow &&
+                            item.stop < timeNow &&
+                            item.start > timeshiftUntil
+                        "
                         class="rec badge"
-                        matTooltip="Timeshift available, click to play"
+                        matTooltip="Timeshift is available, click to play"
                         >r</span
                     >
                 </div>

src/app/player/components/epg-list/epg-list.component.ts

@@ -4,7 +4,9 @@ import { EpgProgram } from '../../models/epg-program.model';
 import * as moment from 'moment';
 import { ElectronService } from '../../../services/electron.service';
 import { EPG_GET_PROGRAM_DONE } from '../../../shared/ipc-commands';
-import { ChannelStore } from '../../../state';
+import { ChannelQuery, ChannelStore } from '../../../state';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 export interface EpgData {
     channel: EpgChannel;
@@ -37,19 +39,24 @@ export class EpgListComponent {
     /** EPG selected program */
     playingNow: EpgProgram;
 
-    /** Current time as formatted string */
-    timeNow: string;
-
     /** Selected date */
     selectedDate: string;
 
+    /** Current time as formatted string */
+    timeNow: string;
+
+    /** Timeshift availability date, based on tvg-rec value from the channel */
+    timeshiftUntil$: Observable<string>;
+
     /**
      * Creates an instance of EpgListComponent
+     * @param channelQuery
      * @param channelStore
      * @param electronService
      * @param ngZone
      */
     constructor(
+        private channelQuery: ChannelQuery,
         private channelStore: ChannelStore,
         private electronService: ElectronService,
         private ngZone: NgZone
@@ -62,6 +69,21 @@ export class EpgListComponent {
         );
     }
 
+    /**
+     * Subscribe for values from the store on component init
+     */
+    ngOnInit(): void {
+        this.timeshiftUntil$ = this.channelQuery
+            .select((store) => store.active.tvg.rec)
+            .pipe(
+                map((value) =>
+                    moment(Date.now())
+                        .subtract(value, 'days')
+                        .format(DATE_TIME_FORMAT)
+                )
+            );
+    }
+
     /**
      * Handles incoming epg programs for the active channel from the main process
      * @param programs
@@ -134,8 +156,15 @@ export class EpgListComponent {
      * Sets the provided epg program as active and starts to play
      * @param program epg program to set
      * @param isLive live stream flag
+     * @param timeshift timeshift flag
      */
-    setEpgProgram(program: EpgProgram, isLive?: boolean): void {
+    setEpgProgram(
+        program: EpgProgram,
+        isLive?: boolean,
+        timeshift?: boolean
+    ): void {
+        console.log(timeshift);
+        if (!timeshift) return;
         isLive
             ? this.channelStore.resetActiveEpgProgram()
             : this.channelStore.setActiveEpgProgram(program);