diff --git a/src/app/portals/epg-view/epg-view.component.html b/src/app/portals/epg-view/epg-view.component.html
index ab80323b1..0c904885c 100644
--- a/src/app/portals/epg-view/epg-view.component.html
+++ b/src/app/portals/epg-view/epg-view.component.html
@@ -1,20 +1,31 @@
{{ 'EPG.TITLE' | translate }}
@for (item of epgItems; track $index) {
-
+
{{ item.title }}
{{ item.description }}
{{ item.start | date: 'HH:mm' }} -
- {{ item.end | date: 'HH:mm (dd.MM.yyyy)' }}
+ {{ item.stop ?? item.end | date: 'HH:mm (dd.MM.yyyy)' }}
+ @if (isCurrentProgram(item)) {
+
+ }
}
diff --git a/src/app/portals/epg-view/epg-view.component.scss b/src/app/portals/epg-view/epg-view.component.scss
new file mode 100644
index 000000000..710d413a3
--- /dev/null
+++ b/src/app/portals/epg-view/epg-view.component.scss
@@ -0,0 +1,33 @@
+.mat-mdc-list-item.current-program {
+ background-color: rgba(29, 185, 84, 0.2);
+
+ .title {
+ color: #1db954;
+ }
+}
+
+.title {
+ font-weight: bold;
+}
+
+.epg-title {
+ margin: 0;
+ font-size: 1.2rem;
+ font-weight: 500;
+ padding: 16px;
+}
+
+.progress-container {
+ width: 100%;
+ height: 3px;
+ background: rgba(255, 255, 255, 0.1);
+ margin-top: 8px;
+ border-radius: 2px;
+ overflow: hidden;
+
+ .progress {
+ height: 100%;
+ background: #1db954;
+ transition: width 1s linear;
+ }
+}
\ No newline at end of file
diff --git a/src/app/portals/epg-view/epg-view.component.ts b/src/app/portals/epg-view/epg-view.component.ts
index ba0b57d64..6eaec6108 100644
--- a/src/app/portals/epg-view/epg-view.component.ts
+++ b/src/app/portals/epg-view/epg-view.component.ts
@@ -2,7 +2,6 @@ import { DatePipe } from '@angular/common';
import { Component, Input, inject } from '@angular/core';
import { MatIconButton } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
-import { MatDivider } from '@angular/material/divider';
import { MatIcon } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { TranslateModule } from '@ngx-translate/core';
@@ -13,30 +12,33 @@ import { EpgItem } from '../../xtream/epg-item.interface';
standalone: true,
selector: 'app-epg-view',
templateUrl: './epg-view.component.html',
- imports: [
- DatePipe,
- MatIconButton,
- MatDivider,
- MatIcon,
- MatListModule,
- TranslateModule,
- ],
- styles: [
- `
- .epg-title {
- margin: 0;
- font-size: 1.2rem;
- font-weight: 500;
- padding: 16px;
- }
- `,
- ],
+ imports: [DatePipe, MatIconButton, MatIcon, MatListModule, TranslateModule],
+ styleUrls: ['./epg-view.component.scss'],
})
export class EpgViewComponent {
@Input() epgItems: EpgItem[];
dialog = inject(MatDialog);
+ isCurrentProgram(item: EpgItem): boolean {
+ const end = item.stop ?? item.end;
+ const now = new Date().getTime();
+ const start = new Date(item.start).getTime();
+ const stop = new Date(end).getTime();
+ return now >= start && now <= stop;
+ }
+
+ getProgress(item: EpgItem): number {
+ const now = new Date().getTime();
+ const start = new Date(item.start).getTime();
+ const end = new Date(item.stop ?? item.end).getTime();
+
+ const total = end - start;
+ const current = now - start;
+
+ return Math.min(Math.max((current / total) * 100, 0), 100);
+ }
+
showDetails(item: EpgItem) {
this.dialog.open(EpgItemDescriptionComponent, {
data: {