forked from 4gray/iptvnator
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: update EPG item description and refactor component
Ref the EPG item to directly display the category and description values instead of accessing the first element of the arrays. Update the EpgListComponent to improve the handling of EPG data and selected date filtering. Change references from Electron to Tauri in the component to reflect the current framework usage.
- Loading branch information
Showing
19 changed files
with
377 additions
and
276 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
187 changes: 87 additions & 100 deletions
187
src/app/player/components/epg-list/epg-list.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,118 +1,105 @@ | ||
@if (channel) { | ||
<!-- channel info panel --> | ||
<div id="channel-header" color="primary"> | ||
<div class="channel-info"> | ||
<div class="channel-icon"> | ||
@if (channel?.icon) { | ||
<img [src]="channel.icon" width="48" /> | ||
} | ||
@let items = filteredItems$ | async; | ||
@let timeshiftUntil = timeshiftUntil$ | async; | ||
|
||
<!-- channel info panel --> | ||
<div id="channel-header" color="primary"> | ||
<div class="channel-info"> | ||
<div class="channel-icon"> | ||
@if (channel?.icon) { | ||
<img [src]="channel.icon" width="48" /> | ||
} | ||
</div> | ||
<div class="channel-details"> | ||
<div class="channel-name"> | ||
{{ channel?.name }} | ||
</div> | ||
<div class="channel-details"> | ||
<div class="channel-name"> | ||
{{ channel?.name[0]?.value }} | ||
</div> | ||
<div class="program-name"> | ||
{{ | ||
playingNow | ||
? playingNow.title[0]?.value | ||
: ('EPG.LIVE_STREAM' | translate) | ||
}} | ||
</div> | ||
<div class="program-name"> | ||
{{ | ||
playingNow | ||
? playingNow.title | ||
: ('EPG.LIVE_STREAM' | translate) | ||
}} | ||
</div> | ||
</div> | ||
<mat-divider /> | ||
<div id="date-navigator"> | ||
<button | ||
class="previous-day" | ||
mat-icon-button | ||
(click)="changeDate('prev')" | ||
[matTooltip]="'EPG.PREVIOUS_DAY' | translate" | ||
> | ||
<mat-icon>chevron_left</mat-icon> | ||
</button> | ||
<span class="selected-date"> | ||
{{ dateToday | momentDate: 'YYYYMMDD' : 'MMMM Do, dddd' }}</span | ||
> | ||
<button | ||
class="next-day" | ||
mat-icon-button | ||
(click)="changeDate('next')" | ||
[matTooltip]="'EPG.NEXT_DAY' | translate" | ||
> | ||
<mat-icon>chevron_right</mat-icon> | ||
</button> | ||
</div> | ||
</div> | ||
<mat-divider /> | ||
|
||
@let timeshiftUntil = timeshiftUntil$ | async; | ||
@if (timeshiftUntil) { | ||
<!-- program list --> | ||
<mat-selection-list | ||
id="program-list" | ||
[multiple]="false" | ||
hideSingleSelectionIndicator="true" | ||
<div id="date-navigator"> | ||
<button | ||
class="previous-day" | ||
mat-icon-button | ||
(click)="changeDate('prev')" | ||
[matTooltip]="'EPG.PREVIOUS_DAY' | translate" | ||
> | ||
<mat-icon>chevron_left</mat-icon> | ||
</button> | ||
<span class="selected-date"> | ||
{{ dateToday | momentDate: 'YYYY-MM-DD' : 'MMMM Do, dddd' }}</span | ||
> | ||
<button | ||
class="next-day" | ||
mat-icon-button | ||
(click)="changeDate('next')" | ||
[matTooltip]="'EPG.NEXT_DAY' | translate" | ||
> | ||
@if (items?.length > 0) { | ||
<ng-container *ngFor="let item of items"> | ||
<mat-icon>chevron_right</mat-icon> | ||
</button> | ||
</div> | ||
</div> | ||
<mat-divider /> | ||
|
||
@if (timeshiftUntil) { | ||
<!-- program list --> | ||
<mat-selection-list | ||
id="program-list" | ||
[multiple]="false" | ||
hideSingleSelectionIndicator="true" | ||
> | ||
@if (items?.length > 0) { | ||
@for (program of items; track program) { | ||
@if ( | ||
program.start < timeshiftUntil || program.start >= timeNow | ||
) { | ||
<mat-list-option> | ||
<div matListItemLine> | ||
<app-epg-list-item | ||
[timeshiftUntil]="timeshiftUntil" | ||
[timeNow]="timeNow" | ||
[item]="program" | ||
/> | ||
</div> | ||
<p matListItemLine>{{ program?.title }}</p> | ||
</mat-list-option> | ||
} @else { | ||
<mat-list-option | ||
*ngIf=" | ||
item.start < timeshiftUntil || | ||
item.start >= timeNow; | ||
else timeshiftItem | ||
[value]="program" | ||
[class.active]=" | ||
timeNow >= program.start && timeNow <= program.stop | ||
" | ||
(click)=" | ||
setEpgProgram( | ||
program, | ||
timeNow >= program.start && | ||
timeNow <= program.stop, | ||
program.start > timeshiftUntil | ||
) | ||
" | ||
> | ||
<div matListItemLine> | ||
<app-epg-list-item | ||
[timeshiftUntil]="timeshiftUntil" | ||
[timeNow]="timeNow" | ||
[item]="item" | ||
[item]="program" | ||
/> | ||
</div> | ||
<p matListItemLine>{{ item?.title[0]?.value }}</p> | ||
<p matListItemLine [innerHTML]="program.title"></p> | ||
</mat-list-option> | ||
<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 matListItemLine> | ||
<app-epg-list-item | ||
[timeshiftUntil]="timeshiftUntil" | ||
[timeNow]="timeNow" | ||
[item]="item" | ||
/> | ||
</div> | ||
<p | ||
matListItemLine | ||
[innerHTML]="item?.title[0]?.value" | ||
></p> | ||
</mat-list-option> | ||
</ng-template> | ||
<mat-divider /> | ||
</ng-container> | ||
} @else { | ||
<p class="epg-not-available"> | ||
{{ 'EPG.EPG_NOT_AVAILABLE_DATE' | translate }} | ||
</p> | ||
} | ||
<mat-divider /> | ||
} | ||
</mat-selection-list> | ||
} | ||
} @else { | ||
<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> | ||
} @else { | ||
<p class="epg-not-available"> | ||
{{ 'EPG.EPG_NOT_AVAILABLE_DATE' | translate }} | ||
</p> | ||
} | ||
</mat-selection-list> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,6 +7,7 @@ | |
left: 0; | ||
bottom: 0; | ||
height: 100%; | ||
overflow-x: hidden; | ||
} | ||
|
||
.active { | ||
|
Oops, something went wrong.