diff --git a/src/app/player/components/epg-list/epg-list-item/epg-list-item.component.html b/src/app/player/components/epg-list/epg-list-item/epg-list-item.component.html
index 80fe02eea..2f30b200e 100644
--- a/src/app/player/components/epg-list/epg-list-item/epg-list-item.component.html
+++ b/src/app/player/components/epg-list/epg-list-item/epg-list-item.component.html
@@ -1,29 +1,28 @@
{{ item.start | momentDate: 'YYYYMMDDHHmm ZZ':'HH:mm' }}
+ >{{ item.start | momentDate: 'YYYYMMDDHHmm ZZ' : 'HH:mm' }}
-
- {{ item.stop | momentDate: 'YYYYMMDDHHmm ZZ':'HH:mm' }}
-= item.start && timeNow <= item.stop"
- class="live badge"
- [matTooltip]="'EPG.LIVE_NOW' | translate"
- >live
- timeshiftUntil
- "
- class="rec badge"
- [matTooltip]="'EPG.TIMESHIFT_AVAILABLE' | translate"
- >r
- 0"
- class="description-icon"
- [matTooltip]="'EPG.PROGRAM_DIALOG.SHOW_PROGRAM_DETAILS' | translate"
- >info
+@if (timeNow >= item.start && timeNow <= item.stop) {
+ live
+}
+
+@if (
+ item.start < timeNow && item.stop < timeNow && item.start > timeshiftUntil
+) {
+ r
+}
+
+@if (item.desc.length > 0) {
+ info
+}
diff --git a/src/app/player/components/epg-list/epg-list-item/epg-list-item.component.ts b/src/app/player/components/epg-list/epg-list-item/epg-list-item.component.ts
index 0a2747d87..a974818a1 100644
--- a/src/app/player/components/epg-list/epg-list-item/epg-list-item.component.ts
+++ b/src/app/player/components/epg-list/epg-list-item/epg-list-item.component.ts
@@ -1,9 +1,15 @@
import { Component, Input } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { MomentDatePipe } from '../../../../shared/pipes/moment-date.pipe';
import { EpgProgram } from '../../../models/epg-program.model';
import { EpgItemDescriptionComponent } from './../epg-item-description/epg-item-description.component';
@Component({
+ standalone: true,
+ imports: [MomentDatePipe, MatIconModule, MatTooltipModule, TranslateModule],
selector: 'app-epg-list-item',
templateUrl: './epg-list-item.component.html',
styleUrls: ['./epg-list-item.component.scss'],
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 38418e5e4..e8c99e12d 100644
--- a/src/app/player/components/epg-list/epg-list.component.html
+++ b/src/app/player/components/epg-list/epg-list.component.html
@@ -1,9 +1,11 @@
-
+@if (channel) {
-
+
-
-
- 0; else epgNotAvailable">
-
- = timeNow;
- else timeshiftItem
- "
- >
-
- {{ item?.title[0]?.value }}
-
-
+ @let timeshiftUntil = timeshiftUntil$ | async;
+ @if (timeshiftUntil) {
+
+
+ @if (items?.length > 0) {
+
= item.start && timeNow <= item.stop
- "
- (click)="
- setEpgProgram(
- item,
- timeNow >= item.start && timeNow <= item.stop,
- item.start > timeshiftUntil
- )
+ *ngIf="
+ item.start < timeshiftUntil ||
+ item.start >= timeNow;
+ else timeshiftItem
"
>
@@ -86,30 +67,52 @@
[timeshiftUntil]="timeshiftUntil"
[timeNow]="timeNow"
[item]="item"
- >
+ />
-
+ {{ item?.title[0]?.value }}
-
-
-
-
-
-
- {{ 'EPG.EPG_NOT_AVAILABLE_DATE' | translate }}
-
-
-
-
-
-
+
+ = item.start && timeNow <= item.stop
+ "
+ (click)="
+ setEpgProgram(
+ item,
+ timeNow >= item.start &&
+ timeNow <= item.stop,
+ item.start > timeshiftUntil
+ )
+ "
+ >
+
+
+
+
+
+
+ } @else {
+
+ {{ 'EPG.EPG_NOT_AVAILABLE_DATE' | translate }}
+
+ }
+
+ }
+} @else {
{{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_TITLE' | translate }}
{{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION' | translate }}
-
+}
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 d2d742c91..69111be17 100644
--- a/src/app/player/components/epg-list/epg-list.component.ts
+++ b/src/app/player/components/epg-list/epg-list.component.ts
@@ -1,10 +1,19 @@
+import { AsyncPipe } from '@angular/common';
import { Component, NgZone } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatTooltipModule } from '@angular/material/tooltip';
import { Store } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
import moment from 'moment';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { EPG_GET_PROGRAM_DONE } from '../../../../../shared/ipc-commands';
import { DataService } from '../../../services/data.service';
+import { MomentDatePipe } from '../../../shared/pipes/moment-date.pipe';
import {
resetActiveEpgProgram,
setActiveEpgProgram,
@@ -13,6 +22,7 @@ import {
import { selectActive } from '../../../state/selectors';
import { EpgChannel } from '../../models/epg-channel.model';
import { EpgProgram } from '../../models/epg-program.model';
+import { EpgListItemComponent } from './epg-list-item/epg-list-item.component';
export interface EpgData {
channel: EpgChannel;
@@ -23,6 +33,19 @@ const DATE_FORMAT = 'YYYYMMDD';
const DATE_TIME_FORMAT = 'YYYYMMDDHHmm ZZ';
@Component({
+ standalone: true,
+ imports: [
+ AsyncPipe,
+ EpgListItemComponent,
+ FormsModule,
+ MatButtonModule,
+ MatDividerModule,
+ MatIconModule,
+ MatListModule,
+ MatTooltipModule,
+ MomentDatePipe,
+ TranslateModule,
+ ],
selector: 'app-epg-list',
templateUrl: './epg-list.component.html',
styleUrls: ['./epg-list.component.scss'],
diff --git a/src/app/player/components/info-overlay/info-overlay.component.html b/src/app/player/components/info-overlay/info-overlay.component.html
index 9dc0a8d0a..224bdc013 100644
--- a/src/app/player/components/info-overlay/info-overlay.component.html
+++ b/src/app/player/components/info-overlay/info-overlay.component.html
@@ -1,35 +1,36 @@
-
-
-
![]()
-
-
-
- {{ epgProgram?.title[0]?.value }} | {{ channel.name }}
+@if (channel && epgProgram) {
+
+
+
-
- {{ epgProgram?.desc[0]?.value }}
-
-
-
-
- {{ start | momentDate: 'YYYYMMDDHHmm ZZ':'HH:mm' }}
- -
- {{ stop | momentDate: 'YYYYMMDDHHmm ZZ':'HH:mm' }}
+
+
+ {{ epgProgram?.title[0]?.value }} | {{ channel.name }}
+
+
+ {{ epgProgram?.desc[0]?.value }}
+
+
+
+
+ {{ start | momentDate: 'YYYYMMDDHHmm ZZ' : 'HH:mm' }}
+ -
+ {{ stop | momentDate: 'YYYYMMDDHHmm ZZ' : 'HH:mm' }}
+
-
+}
diff --git a/src/app/player/components/info-overlay/info-overlay.component.ts b/src/app/player/components/info-overlay/info-overlay.component.ts
index 04d7741b2..1948c7039 100644
--- a/src/app/player/components/info-overlay/info-overlay.component.ts
+++ b/src/app/player/components/info-overlay/info-overlay.component.ts
@@ -1,9 +1,13 @@
+import { NgStyle } from '@angular/common';
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import moment from 'moment';
import { Channel } from '../../../../../shared/channel.interface';
+import { MomentDatePipe } from '../../../shared/pipes/moment-date.pipe';
import { EpgProgram } from '../../models/epg-program.model';
@Component({
+ standalone: true,
+ imports: [MomentDatePipe, NgStyle],
selector: 'app-info-overlay',
templateUrl: './info-overlay.component.html',
styleUrls: ['./info-overlay.component.scss'],
diff --git a/src/app/player/components/multi-epg/multi-epg-container.component.html b/src/app/player/components/multi-epg/multi-epg-container.component.html
index b377a32b4..bd5b49dfb 100644
--- a/src/app/player/components/multi-epg/multi-epg-container.component.html
+++ b/src/app/player/components/multi-epg/multi-epg-container.component.html
@@ -22,7 +22,7 @@
navigate_next
- {{ today | momentDate: 'YYYYMMDD':'MMMM Do, dddd' }}
+ {{ today | momentDate: 'YYYYMMDD' : 'MMMM Do, dddd' }}