Skip to content

Commit

Permalink
fix: update EPG item description and refactor component
Browse files Browse the repository at this point in the history
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
4gray committed Nov 28, 2024
1 parent 7c49995 commit 400f97b
Show file tree
Hide file tree
Showing 19 changed files with 377 additions and 276 deletions.
4 changes: 0 additions & 4 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ import * as semver from 'semver';
import { IpcCommand } from '../../shared/ipc-command.class';
import {
AUTO_UPDATE_PLAYLISTS,
EPG_ERROR,
EPG_FETCH_DONE,
ERROR,
OPEN_FILE,
SETTINGS_UPDATE,
Expand Down Expand Up @@ -50,8 +48,6 @@ export class AppComponent {
commandsList = [
new IpcCommand(VIEW_ADD_PLAYLIST, () => this.navigateToRoute('/')),
new IpcCommand(VIEW_SETTINGS, () => this.navigateToRoute('/settings')),
new IpcCommand(EPG_FETCH_DONE, () => this.epgService.onEpgFetchDone()),
new IpcCommand(EPG_ERROR, () => this.epgService.onEpgError()),
new IpcCommand(SHOW_WHATS_NEW, () => this.showWhatsNewDialog()),
new IpcCommand(ERROR, (response: { message: string; status: number }) =>
this.showErrorAsNotification(response)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
import * as _ from 'lodash';
import { map, skipWhile } from 'rxjs';
import { Channel } from '../../../../../shared/channel.interface';
import { EpgService } from '../../../services/epg.service';
import { FilterPipe } from '../../../shared/pipes/filter.pipe';
import * as PlaylistActions from '../../../state/actions';
import {
Expand Down Expand Up @@ -116,7 +117,8 @@ export class ChannelListContainerComponent {
constructor(
private readonly store: Store,
private snackBar: MatSnackBar,
private translateService: TranslateService
private translateService: TranslateService,
private epgService: EpgService
) {}

/**
Expand All @@ -126,6 +128,12 @@ export class ChannelListContainerComponent {
selectChannel(channel: Channel): void {
this.selected = channel;
this.store.dispatch(PlaylistActions.setActiveChannel({ channel }));

const epgChannelId = channel?.tvg?.id || channel?.name;

if (epgChannelId) {
this.epgService.getChannelPrograms(epgChannelId);
}
}

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ <h2 mat-dialog-title>
<div class="subheading-2">
{{ 'EPG.PROGRAM_DIALOG.TITLE' | translate }}
</div>
<p data-test="title">{{ epgProgram.title[0].value }}</p>
<p data-test="title">{{ epgProgram.title }}</p>
<div class="subheading-2" *ngIf="epgProgram.title[0].lang">
{{ 'EPG.PROGRAM_DIALOG.LANGUAGE' | translate }}
</div>
Expand All @@ -16,13 +16,13 @@ <h2 mat-dialog-title>
<div class="subheading-2">
{{ 'EPG.PROGRAM_DIALOG.CATEGORY' | translate }}
</div>
<p data-test="category">{{ epgProgram.category[0].value }}</p>
<p data-test="category">{{ epgProgram.category }}</p>
</ng-container>
<ng-container *ngIf="epgProgram?.desc?.length > 0">
<div class="subheading-2">
{{ 'EPG.PROGRAM_DIALOG.DESCRIPTION' | translate }}
</div>
<p data-test="desc">{{ epgProgram.desc[0].value }}</p>
<p data-test="desc">{{ epgProgram.desc }}</p>
</ng-container>
<ng-container *ngIf="epgProgram?.rating?.length > 0">
<div class="subheading-2">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
>
}

@if (item.desc.length > 0) {
@if (item.desc?.length > 0) {
<span
(click)="$event.stopPropagation(); showDescription(item)"
matListItemMeta
Expand Down
187 changes: 87 additions & 100 deletions src/app/player/components/epg-list/epg-list.component.html
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>
}
1 change: 1 addition & 0 deletions src/app/player/components/epg-list/epg-list.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
left: 0;
bottom: 0;
height: 100%;
overflow-x: hidden;
}

.active {
Expand Down
Loading

0 comments on commit 400f97b

Please sign in to comment.