feat(xtream): add epg support for xtream portals

src/app/portals/epg-view/epg-view.component.html

@@ -0,0 +1,26 @@
+<div mat-subheader>Electronic Program Guide</div>
+<mat-list>
+    @for (item of epgItems; track $index) {
+        <mat-list-item [lines]="3">
+            <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)' }}
+            </div>
+            <span matListItemMeta>
+                <button mat-icon-button (click)="showDetails(item)">
+                    <mat-icon>info</mat-icon>
+                </button>
+            </span>
+        </mat-list-item>
+    }
+
+    @if (epgItems?.length === 0) {
+        <mat-list-item>
+            {{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_TITLE' | translate }}
+        </mat-list-item>
+    }
+</mat-list>

src/app/portals/epg-view/epg-view.component.ts

@@ -0,0 +1,39 @@
+import { DatePipe } from '@angular/common';
+import { Component, Input, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { TranslateModule } from '@ngx-translate/core';
+import { EpgItemDescriptionComponent } from '../../player/components/epg-list/epg-item-description/epg-item-description.component';
+import { EpgItem } from '../../xtream/epg-item.interface';
+
+@Component({
+    standalone: true,
+    selector: 'app-epg-view',
+    templateUrl: './epg-view.component.html',
+    imports: [
+        DatePipe,
+        EpgItemDescriptionComponent,
+        MatButtonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatListModule,
+        TranslateModule,
+    ],
+})
+export class EpgViewComponent {
+    @Input() epgItems: EpgItem[];
+
+    dialog = inject(MatDialog);
+
+    showDetails(item: EpgItem) {
+        this.dialog.open(EpgItemDescriptionComponent, {
+            data: {
+                title: [{ value: item.title, lang: item.lang }],
+                desc: [{ value: item.description }],
+            },
+        });
+    }
+}

src/app/xtream/epg-item.interface.ts

@@ -0,0 +1,12 @@
+export interface EpgItem {
+    id: string;
+    epg_id: string;
+    title: string;
+    lang: string;
+    start: string;
+    end: string;
+    description: string;
+    channel_id: string;
+    start_timestamp: string;
+    stop_timestamp: string;
+}