From 23b967aad748162edd378e04e125aa6d5bbfe0f9 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Thu, 26 Dec 2024 22:20:30 +0100
Subject: [PATCH] feat(xtream): enhance EPG view with current program
 highlighting and progress indicator

---
 .../portals/epg-view/epg-view.component.html  | 15 ++++++-
 .../portals/epg-view/epg-view.component.scss  | 33 +++++++++++++++
 .../portals/epg-view/epg-view.component.ts    | 40 ++++++++++---------
 3 files changed, 67 insertions(+), 21 deletions(-)
 create mode 100644 src/app/portals/epg-view/epg-view.component.scss

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 @@
 <div class="epg-title">{{ 'EPG.TITLE' | translate }}</div>
 <mat-list>
     @for (item of epgItems; track $index) {
-        <mat-list-item [lines]="3">
+        <mat-list-item
+            [lines]="3"
+            [class.current-program]="isCurrentProgram(item)"
+        >
             <div class="title" matListItemTitle>{{ item.title }}</div>
             <div class="description" matListItemLine>
                 {{ item.description }}
             </div>
             <div matListItemLine>
                 {{ item.start | date: 'HH:mm' }} -
-                {{ item.end | date: 'HH:mm (dd.MM.yyyy)' }}
+                {{ item.stop ?? item.end | date: 'HH:mm (dd.MM.yyyy)' }}
             </div>
             <span matListItemMeta>
                 <button mat-icon-button (click)="showDetails(item)">
                     <mat-icon>info</mat-icon>
                 </button>
             </span>
+            @if (isCurrentProgram(item)) {
+                <div class="progress-container">
+                    <div
+                        class="progress"
+                        [style.width.%]="getProgress(item)"
+                    ></div>
+                </div>
+            }
         </mat-list-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: {