50 lines
1.6 KiB
HTML
50 lines
1.6 KiB
HTML
<div class="epg-title">{{ 'EPG.TITLE' | translate }}</div>
|
|
|
|
<div class="epg-list">
|
|
@for (item of epgItems; track $index) {
|
|
<article class="epg-item" [class.current-program]="isCurrentProgram(item)">
|
|
<div class="epg-item__meta">
|
|
<div class="epg-item__time">
|
|
{{ item.start | date: 'HH:mm' }} -
|
|
{{ item.stop ?? item.end | date: 'HH:mm' }}
|
|
</div>
|
|
@if (isCurrentProgram(item)) {
|
|
<span class="epg-item__badge">Live</span>
|
|
}
|
|
<button
|
|
mat-icon-button
|
|
class="epg-item__info"
|
|
(click)="showDetails(item)"
|
|
>
|
|
<mat-icon>info</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="epg-item__title">{{ item.title }}</div>
|
|
|
|
@if (item.description) {
|
|
<div class="epg-item__description">
|
|
{{ item.description }}
|
|
</div>
|
|
}
|
|
|
|
@if (isCurrentProgram(item)) {
|
|
<div class="epg-item__progress">
|
|
<div class="epg-progress-track">
|
|
<div
|
|
class="epg-progress-fill"
|
|
[style.width.%]="getProgress(item)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</article>
|
|
}
|
|
|
|
@if (epgItems?.length === 0) {
|
|
<div class="epg-empty">
|
|
{{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_TITLE' | translate }}
|
|
</div>
|
|
}
|
|
</div>
|