mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-08 17:06:15 -08:00
4gray
3d0dd1de52
Add `spellcheck="false"` and `autocomplete="off"` attributes to the search input field in the channel list component. This improves user experience by preventing the browser from suggesting incorrect spellings and previously entered values, ensuring a cleaner and more focused search experience.
158 lines
6.5 KiB
HTML
158 lines
6.5 KiB
HTML
@if (_channelList) {
|
|
<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>
|
|
<div class="search-panel">
|
|
<mat-form-field class="search-bar">
|
|
<input
|
|
matInput
|
|
class="full-width"
|
|
type="search"
|
|
spellcheck="false"
|
|
autocomplete="off"
|
|
#search
|
|
[placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
|
|
[(ngModel)]="searchTerm.name"
|
|
/>
|
|
</mat-form-field>
|
|
</div>
|
|
<mat-nav-list id="all-channels">
|
|
<cdk-virtual-scroll-viewport
|
|
itemSize="50"
|
|
class="scroll-viewport"
|
|
>
|
|
<app-channel-list-item
|
|
*cdkVirtualFor="
|
|
let channel of _channelList
|
|
| filterBy: searchTerm.name : 'name';
|
|
index as i;
|
|
trackBy: trackByFn
|
|
"
|
|
[name]="
|
|
i +
|
|
1 +
|
|
'. ' +
|
|
(channel?.name || 'CHANNELS.UNNAMED_CHANNEL'
|
|
| translate)
|
|
"
|
|
[logo]="channel?.tvg?.logo"
|
|
(clicked)="selectChannel(channel)"
|
|
[selected]="selected?.id === channel?.id"
|
|
/>
|
|
</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;
|
|
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>
|
|
</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;
|
|
trackBy: trackByFn
|
|
"
|
|
[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>
|
|
} @else {
|
|
No channels there
|
|
}
|