x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-11 02:46:16 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: extract channel-list-item to own component

Browse Source
This commit is contained in:
4gray committed 2023-02-04 22:35:44 +01:00
1 parent 672bf6435c
commit 882bb5ad60
5 files changed
+109 -92
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/player/components/channel-list-container/channel-list-container.component.html
+44 -69
View File
@@ -20,32 +20,26 @@
<mat-divider></mat-divider>
<mat-nav-list>
<cdk-virtual-scroll-viewport itemSize="50" class="scroll-viewport">
<mat-list-item
<ng-container
*cdkVirtualFor="
let channel of _channelList
| filterBy: searchTerm.name:'name';
index as i;
trackBy: trackByFn
"
[class.active]="selected?.id === channel.id"
(click)="selectChannel(channel)"
data-test-id="channel-item"
>
<div class="channel-logo" *ngIf="channel.tvg.logo">
<img
[src]="channel.tvg.logo"
width="48"
onerror="this.style.display='none'"
/>
</div>
<p matLine class="channel-name">
{{
i + 1 + '. ' + channel?.name ||
('CHANNELS.UNNAMED_CHANNEL' | translate)
}}
</p>
<mat-divider></mat-divider>
</mat-list-item>
<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>
@@ -71,30 +65,22 @@
({{ groups.value.length }})
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<mat-list-item
<ng-container
*ngFor="let channel of groups.value; index as i"
[class.active]="selected?.id === channel.id"
(click)="selectChannel(channel)"
>
<div
class="channel-logo"
*ngIf="channel.tvg.logo"
>
<img
[src]="channel.tvg.logo"
width="48"
onerror="this.style.display='none'"
/>
</div>
<p matLine class="channel-name">
{{
i + 1 + '. ' + channel?.name ||
('CHANNELS.UNNAMED_CHANNEL'
| translate)
}}
</p>
<mat-divider></mat-divider>
</mat-list-item>
<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>
@@ -114,34 +100,23 @@
id="favorites-list"
>
<ng-container *ngIf="favorites.length > 0; else noFavorites">
<mat-list-item
*ngFor="let channel of favorites; index as i"
[class.active]="selected?.id === channel.id"
(click)="selectChannel(channel)"
>
<div class="channel-logo" *ngIf="channel.tvg.logo">
<img
[src]="channel.tvg.logo"
width="48"
onerror="this.style.display='none'"
/>
</div>
<p matLine class="channel-name">
{{
i + 1 + '. ' + channel?.name ||
('CHANNELS.UNNAMED_CHANNEL' | translate)
}}
</p>
<button
mat-icon-button
color="primary"
[matTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
(click)="toggleFavoriteChannel(channel, $event)"
>
<mat-icon color="accent">star</mat-icon>
</button>
<mat-divider></mat-divider>
</mat-list-item>
<ng-container *ngFor="let channel of favorites; 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"
[showFavoriteButton]="true"
(favoriteToggled)="
toggleFavoriteChannel(channel, $event)
"
></app-channel-list-item>
</ng-container>
</ng-container>
<ng-template #noFavorites>
<mat-list-item
src/app/player/components/channel-list-container/channel-list-container.component.scss
-23
View File
@@ -1,7 +1,3 @@
.active {
background: #ddd;
}
.mat-list-base {
padding-top: 0;
}
@@ -17,11 +13,6 @@
border-radius: 4px;
}
.channel-logo {
max-height: 48px;
overflow: hidden;
}
::ng-deep {
.mat-expansion-panel-body {
padding: 0 !important;
@@ -36,10 +27,6 @@
.search-bar::placeholder {
color: #ccc;
}
.active {
background: #000;
}
}
.mat-tab-label-content {
@@ -57,16 +44,6 @@
}
}
.channel-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 0.9em;
max-width: 290px;
}
[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
cursor: pointer;
src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.scss
+26
View File
@@ -0,0 +1,26 @@
.channel-logo {
max-height: 48px;
overflow: hidden;
}
.channel-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 0.9em;
max-width: 290px;
}
.active {
background: #ddd;
}
::ng-deep {
.dark-theme {
.active {
background: #000;
}
}
}
src/app/player/components/channel-list-container/channel-list-item/channel-list-item.component.ts
+37
View File
@@ -0,0 +1,37 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-channel-list-item',
styleUrls: ['./channel-list-item.component.scss'],
template: `<mat-list-item
[class.active]="selected"
(click)="clicked.emit()"
data-test-id="channel-item"
>
<div class="channel-logo" *ngIf="logo">
<img [src]="logo" width="48" onerror="this.style.display='none'" />
</div>
<p matLine class="channel-name">
{{ name }}
</p>
<button
*ngIf="showFavoriteButton"
mat-icon-button
color="primary"
[matTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
(click)="favoriteToggled.emit($event)"
>
<mat-icon color="accent">star</mat-icon>
</button>
<mat-divider></mat-divider
></mat-list-item>`,
})
export class ChannelListItemComponent {
@Input() logo!: string;
@Input() name = '';
@Input() showFavoriteButton = false;
@Input() selected = false;
@Output() clicked = new EventEmitter<void>();
@Output() favoriteToggled = new EventEmitter();
}
src/app/player/player.module.ts
+2
View File
@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SharedModule } from '../shared/shared.module';
import { ChannelListContainerComponent } from './components/channel-list-container/channel-list-container.component';
import { ChannelListItemComponent } from './components/channel-list-container/channel-list-item/channel-list-item.component';
import { EpgItemDescriptionComponent } from './components/epg-list/epg-item-description/epg-item-description.component';
import { EpgListItemComponent } from './components/epg-list/epg-list-item/epg-list-item.component';
import { EpgListComponent } from './components/epg-list/epg-list.component';
@@ -24,6 +25,7 @@ const routes: Routes = [{ path: '', component: VideoPlayerComponent }];
],
declarations: [
ChannelListContainerComponent,
ChannelListItemComponent,
EpgItemDescriptionComponent,
EpgListComponent,
EpgListItemComponent,