mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-15 05:36:17 -08:00
139 lines
5.5 KiB
HTML
139 lines
5.5 KiB
HTML
<mat-tab-group color="primary" backgroundColor="primary">
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tab-icon">list</mat-icon>
|
|
<div class="tab-title">
|
|
{{ 'CHANNELS.ALL_CHANNELS' | translate }}
|
|
</div>
|
|
</ng-template>
|
|
<mat-list>
|
|
<mat-list-item>
|
|
<input
|
|
class="full-width search-bar"
|
|
type="search"
|
|
#search
|
|
[placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
|
|
[(ngModel)]="searchTerm.name"
|
|
/>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
<mat-divider></mat-divider>
|
|
<mat-nav-list>
|
|
<cdk-virtual-scroll-viewport itemSize="50" class="scroll-viewport">
|
|
<ng-container
|
|
*cdkVirtualFor="
|
|
let channel of _channelList
|
|
| filterBy: searchTerm.name:'name';
|
|
index as i;
|
|
trackBy: trackByFn
|
|
"
|
|
>
|
|
<app-channel-list-item
|
|
[name]="
|
|
i +
|
|
1 +
|
|
'. ' +
|
|
(channel?.name || 'CHANNELS.UNNAMED_CHANNEL'
|
|
| translate)
|
|
"
|
|
[logo]="channel?.tvg?.logo"
|
|
(clicked)="selectChannel(channel)"
|
|
[selected]="selected?.id === channel?.id"
|
|
></app-channel-list-item>
|
|
</ng-container>
|
|
</cdk-virtual-scroll-viewport>
|
|
</mat-nav-list>
|
|
</mat-tab>
|
|
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tab-icon">category</mat-icon>
|
|
<div class="tab-title">
|
|
{{ 'CHANNELS.GROUPS' | translate }}
|
|
</div>
|
|
</ng-template>
|
|
<mat-nav-list id="groups-list">
|
|
<mat-accordion multi>
|
|
<ng-container *ngFor="let groups of groupedChannels | keyvalue">
|
|
<mat-expansion-panel>
|
|
<mat-expansion-panel-header
|
|
*ngIf="groups.value.length > 0"
|
|
>
|
|
{{
|
|
groups.key || ('CHANNELS.UNGROUPED' | translate)
|
|
| titlecase
|
|
}}
|
|
({{ groups.value.length }})
|
|
</mat-expansion-panel-header>
|
|
<ng-template matExpansionPanelContent>
|
|
<ng-container
|
|
*ngFor="let channel of groups.value; index as i"
|
|
>
|
|
<app-channel-list-item
|
|
[name]="
|
|
i +
|
|
1 +
|
|
'. ' +
|
|
(channel?.name ||
|
|
'CHANNELS.UNNAMED_CHANNEL'
|
|
| translate)
|
|
"
|
|
[logo]="channel?.tvg?.logo"
|
|
(clicked)="selectChannel(channel)"
|
|
[selected]="selected?.id === channel.id"
|
|
></app-channel-list-item>
|
|
</ng-container>
|
|
</ng-template>
|
|
</mat-expansion-panel>
|
|
</ng-container>
|
|
</mat-accordion>
|
|
</mat-nav-list>
|
|
</mat-tab>
|
|
|
|
<mat-tab *ngIf="(playlistId$ | async) !== 'GLOBAL_FAVORITES'">
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tab-icon">star</mat-icon>
|
|
<div class="tab-title">
|
|
{{ 'CHANNELS.FAVORITES' | translate }}
|
|
</div>
|
|
</ng-template>
|
|
<mat-nav-list
|
|
cdkDropList
|
|
*ngIf="favorites$ | async as favorites"
|
|
(cdkDropListDropped)="drop($event, favorites)"
|
|
id="favorites-list"
|
|
>
|
|
<ng-container *ngIf="favorites.length > 0; else noFavorites">
|
|
<app-channel-list-item
|
|
*ngFor="let channel of favorites; index as i"
|
|
[name]="
|
|
i +
|
|
1 +
|
|
'. ' +
|
|
(channel?.name || 'CHANNELS.UNNAMED_CHANNEL'
|
|
| translate)
|
|
"
|
|
[isDraggable]="true"
|
|
[logo]="channel?.tvg?.logo"
|
|
(clicked)="selectChannel(channel)"
|
|
[selected]="selected?.id === channel?.id"
|
|
[showFavoriteButton]="true"
|
|
(favoriteToggled)="toggleFavoriteChannel(channel, $event)"
|
|
></app-channel-list-item>
|
|
</ng-container>
|
|
<ng-template #noFavorites>
|
|
<mat-list-item
|
|
><strong>{{
|
|
'CHANNELS.NO_FAVORITES' | translate
|
|
}}</strong></mat-list-item
|
|
>
|
|
<mat-list-item>
|
|
{{
|
|
'CHANNELS.USE_STAR_TO_FAVORITE' | translate
|
|
}}</mat-list-item
|
|
>
|
|
</ng-template>
|
|
</mat-nav-list>
|
|
</mat-tab>
|
|
</mat-tab-group>
|