mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-14 13:16:16 -08:00
4gray
c34bdf73e1
Update category header and list views to provide clearer context and improve navigation state handling. - Display category name with current page/total pages when viewing a category (non-detail) so users see which page they're on. - Add i18n "PAGE" key and fill "SELECT_CATEGORY" in translations for en/de/ru to support the new page label and existing messaging. - Tidy live-stream layout template formatting and fix filter pipe spacing for consistency. - Change no-channel-selected fallback to use the translated "PORTALS.SELECT_CATEGORY" string. - Preserve category selection state on CategoryContentView init: only set selected category when the route category differs from the current selection to keep paging/scroll position when returning from a detail view. These changes improve UX by making pagination explicit and avoiding unnecessary state resets when navigating between list and detail.
73 lines
2.5 KiB
HTML
73 lines
2.5 KiB
HTML
<div
|
|
[class]="
|
|
player === 'videojs' || player === 'html5'
|
|
? 'itv-container'
|
|
: 'itv-container-epg'
|
|
"
|
|
>
|
|
<div class="sidebar">
|
|
<div class="sidebar-content">
|
|
<div class="search-panel">
|
|
<mat-form-field class="search-bar">
|
|
<mat-icon matPrefix>search</mat-icon>
|
|
<input
|
|
matInput
|
|
type="search"
|
|
[placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
|
|
[(ngModel)]="searchString"
|
|
/>
|
|
</mat-form-field>
|
|
</div>
|
|
<mat-selection-list [multiple]="false">
|
|
<cdk-virtual-scroll-viewport
|
|
[itemSize]="56"
|
|
class="scroll-viewport-portals"
|
|
>
|
|
<mat-list-option
|
|
*cdkVirtualFor="
|
|
let item of channels
|
|
| filterBy: searchString() : 'name';
|
|
trackBy: trackBy;
|
|
templateCacheSize: 0
|
|
"
|
|
[selected]="
|
|
item.stream_id === activeLiveStream?.stream_id
|
|
"
|
|
[value]="item"
|
|
(click)="itemClicked.emit(item)"
|
|
>
|
|
<img
|
|
matListItemAvatar
|
|
class="stream-icon"
|
|
*ngIf="item.stream_icon"
|
|
[src]="item.stream_icon"
|
|
alt="channel icon"
|
|
/>
|
|
<div class="title" matListItemTitle>
|
|
{{ item.name }}
|
|
</div>
|
|
</mat-list-option>
|
|
</cdk-virtual-scroll-viewport>
|
|
</mat-selection-list>
|
|
</div>
|
|
</div>
|
|
@if (player === 'videojs' || player === 'html5') {
|
|
@if (streamUrl) {
|
|
<div class="video-player">
|
|
<app-web-player-view [streamUrl]="streamUrl" />
|
|
</div>
|
|
}
|
|
}
|
|
@if (streamUrl) {
|
|
<div class="epg">
|
|
<div class="epg-content">
|
|
<app-epg-view [epgItems]="epgItems" />
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<div class="no-channel-selected">
|
|
{{ 'PORTALS.SELECT_CATEGORY' | translate }}
|
|
</div>
|
|
}
|
|
</div>
|