iptvnator/src/app/player/components/epg-list/epg-list.component.html

<ng-container *ngIf="channel; else noEpg">
    <!-- channel info panel -->
    <div fxFlex="120px" id="channel-info" color="primary" fxLayout="column">
        <div fxFlex="79px" fxLayout="row" fxLayoutGap="10px">
            <div
                fxFlex="60px"
                class="channel-icon"
                fxLayoutAlign="center center"
            >
                <img *ngIf="channel?.icon" [src]="channel.icon" width="48" />
            </div>
            <div fxFlex="100" fxFlexAlign="center">
                <div class="channel-name">
                    {{ channel?.name[0]?.value }}
                </div>
                <div class="program-name">
                    {{
                        playingNow
                            ? playingNow.title[0]?.value
                            : ('EPG.LIVE_STREAM' | translate)
                    }}
                </div>
            </div>
        </div>
        <mat-divider></mat-divider>
        <div fxFlex="40px" fxLayout="row" id="date-navigator">
            <button
                fxFlex="40px"
                mat-icon-button
                (click)="changeDate('prev')"
                [matTooltip]="'EPG.PREVIOUS_DAY' | translate"
            >
                <mat-icon>chevron_left</mat-icon>
            </button>
            <span
                class="selected-date"
                fxFlex="100"
                fxLayoutAlign="center center"
            >
                {{ dateToday | momentDate: 'YYYYMMDD':'MMMM Do, dddd' }}</span
            >
            <button
                fxFlex="40px"
                mat-icon-button
                (click)="changeDate('next')"
                [matTooltip]="'EPG.NEXT_DAY' | translate"
            >
                <mat-icon>chevron_right</mat-icon>
            </button>
        </div>
    </div>
    <mat-divider></mat-divider>

    <!-- program list -->
    <mat-selection-list
        fxFlex
        [multiple]="false"
        *ngIf="timeshiftUntil$ | async as timeshiftUntil"
    >
        <ng-container *ngIf="items?.length > 0; else epgNotAvailable">
            <ng-container *ngFor="let item of items">
                <mat-list-item
                    *ngIf="
                        item.start < timeshiftUntil || item.start >= timeNow;
                        else timeshiftItem
                    "
                >
                    <div matLine>
                        <app-epg-list-item
                            [timeshiftUntil]="timeshiftUntil"
                            [timeNow]="timeNow"
                            [item]="item"
                        ></app-epg-list-item>
                    </div>
                    <p matLine>{{ item?.title[0]?.value }}</p>
                </mat-list-item>
                <ng-template #timeshiftItem>
                    <mat-list-option
                        [value]="item"
                        [class.active]="
                            timeNow >= item.start && timeNow <= item.stop
                        "
                        (click)="
                            setEpgProgram(
                                item,
                                timeNow >= item.start && timeNow <= item.stop,
                                item.start > timeshiftUntil
                            )
                        "
                    >
                        <div matLine>
                            <app-epg-list-item
                                [timeshiftUntil]="timeshiftUntil"
                                [timeNow]="timeNow"
                                [item]="item"
                            ></app-epg-list-item>
                        </div>
                        <p matLine>{{ item?.title[0]?.value }}</p>
                    </mat-list-option>
                </ng-template>
            </ng-container>
        </ng-container>
        <ng-template #epgNotAvailable>
            <mat-list-option>{{
                'EPG.EPG_NOT_AVAILABLE_DATE' | translate
            }}</mat-list-option>
        </ng-template>
    </mat-selection-list>
</ng-container>

<ng-template #noEpg>
    <mat-list>
        <mat-list-item>
            {{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_TITLE' | translate }}<br />
            {{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION' | translate }}
        </mat-list-item>
    </mat-list>
</ng-template>