feat: implement URL probing functionality and enhance time formatting in EPG component

libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html

@@ -34,7 +34,7 @@
                     </div>
                     <div class="epg-timeline">
                         <span class="epg-time">{{
-                            formatTime(program.start)
+                            formatTime(program.start, program.startTimestamp)
                         }}</span>
                         <div class="epg-progress-track">
                             <div
@@ -45,7 +45,7 @@
                             ></div>
                         </div>
                         <span class="epg-time">{{
-                            formatTime(program.stop)
+                            formatTime(program.stop, program.stopTimestamp)
                         }}</span>
                     </div>
                 } @else {

libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts

@@ -0,0 +1,72 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialog } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { EpgProgram } from 'shared-interfaces';
+import { ChannelListItemComponent } from './channel-list-item.component';
+
+describe('ChannelListItemComponent', () => {
+    let fixture: ComponentFixture<ChannelListItemComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                ChannelListItemComponent,
+                NoopAnimationsModule,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: MatDialog,
+                    useValue: {
+                        open: jest.fn(),
+                    },
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ChannelListItemComponent);
+    });
+
+    it('formats preview times from timestamp fields when raw strings are offset', () => {
+        const startTimestamp = Math.floor(
+            Date.parse('2026-04-05T05:30:00.000Z') / 1000
+        );
+        const stopTimestamp = Math.floor(
+            Date.parse('2026-04-05T06:00:00.000Z') / 1000
+        );
+        const program: EpgProgram = {
+            start: '2026-04-05 03:00:00',
+            stop: '2026-04-05 03:30:00',
+            channel: 'channel-1',
+            title: 'Current Show',
+            desc: 'Current description',
+            category: null,
+            startTimestamp,
+            stopTimestamp,
+        };
+
+        fixture.componentRef.setInput('name', 'Cartoon Network');
+        fixture.componentRef.setInput('epgProgram', program);
+        fixture.componentRef.setInput('showProgramInfoButton', false);
+        fixture.detectChanges();
+
+        const times = Array.from(
+            fixture.nativeElement.querySelectorAll('.epg-time'),
+            (element: Element) => element.textContent?.trim() ?? ''
+        );
+
+        expect(times).toEqual([
+            new Date(startTimestamp * 1000).toLocaleTimeString('en-US', {
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false,
+            }),
+            new Date(stopTimestamp * 1000).toLocaleTimeString('en-US', {
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false,
+            }),
+        ]);
+    });
+});

libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts

@@ -64,8 +64,20 @@ export class ChannelListItemComponent {
     /**
      * Formats time for display (HH:mm)
      */
-    formatTime(dateString: string | number): string {
-        const date = new Date(dateString);
+    formatTime(
+        dateString: string | number,
+        timestampSeconds?: number | null
+    ): string {
+        const unixTimestamp = Number(timestampSeconds);
+        const date =
+            Number.isFinite(unixTimestamp) && unixTimestamp > 0
+                ? new Date(unixTimestamp * 1000)
+                : new Date(dateString);
+
+        if (Number.isNaN(date.getTime())) {
+            return '';
+        }
+
         return date.toLocaleTimeString('en-US', {
             hour: '2-digit',
             minute: '2-digit',