mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-14 21:26:15 -08:00
refactor: code improvements in video player & channels list component
This commit is contained in:
4gray committed
1 parent
88362d23d8
commit
1772dac236
4 files changed
+116
-75
No files matched your search
+36
-36
@@ -6,42 +6,34 @@
|
||||
{{ '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>
|
||||
<div class="search-panel">
|
||||
<input
|
||||
class="full-width search-bar"
|
||||
type="search"
|
||||
#search
|
||||
[placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
|
||||
[(ngModel)]="searchTerm.name"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
<app-channel-list-item
|
||||
*ngFor="
|
||||
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"
|
||||
></app-channel-list-item>
|
||||
</mat-nav-list>
|
||||
</mat-tab>
|
||||
|
||||
@@ -67,7 +59,11 @@
|
||||
</mat-expansion-panel-header>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<ng-container
|
||||
*ngFor="let channel of groups.value; index as i"
|
||||
*ngFor="
|
||||
let channel of groups.value;
|
||||
index as i;
|
||||
trackBy: trackByFn
|
||||
"
|
||||
>
|
||||
<app-channel-list-item
|
||||
[name]="
|
||||
@@ -105,7 +101,11 @@
|
||||
>
|
||||
<ng-container *ngIf="favorites.length > 0; else noFavorites">
|
||||
<app-channel-list-item
|
||||
*ngFor="let channel of favorites; index as i"
|
||||
*ngFor="
|
||||
let channel of favorites;
|
||||
index as i;
|
||||
trackBy: trackByFn
|
||||
"
|
||||
[name]="
|
||||
i +
|
||||
1 +
|
||||
|
||||
@@ -6,6 +6,10 @@
|
||||
min-height: calc(100vh - 165px);
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 8px;
|
||||
background: #ddd;
|
||||
@@ -13,6 +17,11 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
mat-nav-list {
|
||||
overflow: scroll;
|
||||
max-height: calc(100vh - 193px);
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
.mat-expansion-panel-body {
|
||||
padding: 0 !important;
|
||||
|
||||
@@ -2,51 +2,77 @@
|
||||
<!-- sidebar content -->
|
||||
<mat-drawer #drawer mode="side" opened disableClose>
|
||||
<app-sidebar
|
||||
*ngIf="(channels$ | async) as channels; else noChannels"
|
||||
[channels]="channels" />
|
||||
<ng-template #noChannels>No channels <br /> <button mat-button color="secondary" (click)="navigateHome()">Go back</button></ng-template>
|
||||
*ngIf="channels$ | async as channels; else noChannels"
|
||||
[channels]="channels"
|
||||
/>
|
||||
<ng-template #noChannels
|
||||
>No channels <br />
|
||||
<button mat-button color="secondary" (click)="navigateHome()">
|
||||
Go back
|
||||
</button></ng-template
|
||||
>
|
||||
</mat-drawer>
|
||||
<mat-drawer-content>
|
||||
<ng-container *ngIf="activeChannel$ | async as activeChannel">
|
||||
<!-- toolbar with drawer icon -->
|
||||
<app-toolbar (toggleLeftDrawerClicked)="drawer.toggle()" (toggleRightDrawerClicked)="drawerRight.toggle()"
|
||||
(multiEpgClicked)="openMultiEpgView()" [activeChannel]="activeChannel" />
|
||||
<app-toolbar
|
||||
(toggleLeftDrawerClicked)="drawer.toggle()"
|
||||
(toggleRightDrawerClicked)="drawerRight.toggle()"
|
||||
(multiEpgClicked)="openMultiEpgView()"
|
||||
[activeChannel]="activeChannel"
|
||||
/>
|
||||
|
||||
<!-- video.js player -->
|
||||
<app-vjs-player
|
||||
*ngIf="playerSettings.player === 'videojs'"
|
||||
[options]="{
|
||||
sources: [
|
||||
{
|
||||
src: activeChannel?.url + activeChannel?.epgParams,
|
||||
type: 'application/x-mpegURL'
|
||||
}
|
||||
]
|
||||
}"
|
||||
[class.hide-captions]="!playerSettings.showCaptions"
|
||||
></app-vjs-player>
|
||||
<app-audio-player
|
||||
*ngIf="activeChannel.radio === 'true'; else videoPlayer"
|
||||
[url]="activeChannel.url"
|
||||
[icon]="activeChannel?.tvg?.logo"
|
||||
/>
|
||||
<ng-template #videoPlayer>
|
||||
<!-- video.js player -->
|
||||
<app-vjs-player
|
||||
*ngIf="playerSettings.player === 'videojs'"
|
||||
[options]="{
|
||||
sources: [
|
||||
{
|
||||
src:
|
||||
activeChannel?.url +
|
||||
activeChannel?.epgParams,
|
||||
type: 'application/x-mpegURL'
|
||||
}
|
||||
]
|
||||
}"
|
||||
[class.hide-captions]="!playerSettings.showCaptions"
|
||||
></app-vjs-player>
|
||||
|
||||
<!-- default html player component -->
|
||||
<app-html-video-player
|
||||
*ngIf="playerSettings.player === 'html5'"
|
||||
[channel]="activeChannel"
|
||||
[showCaptions]="playerSettings.showCaptions"
|
||||
/>
|
||||
<div class="mpv-player" *ngIf="playerSettings.player === 'mpv'">
|
||||
<img src="./assets/images/custom-player.png" />
|
||||
<p>
|
||||
The channel is played in a separate window in the MPV
|
||||
player. (<a
|
||||
[routerLink]
|
||||
style="cursor: pointer"
|
||||
(click)="
|
||||
openUrl(
|
||||
'https://github.com/4gray/iptvnator/wiki/What-is-mpv-video-player-and-how-to-install-it-on-different-operating-systems%3F'
|
||||
)
|
||||
"
|
||||
>Installation instructions</a
|
||||
>)
|
||||
</p>
|
||||
</div>
|
||||
<!-- channel overlay -->
|
||||
<app-info-overlay
|
||||
[channel]="activeChannel"
|
||||
[epgProgram]="epgProgram$ | async"
|
||||
></app-info-overlay>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
<!-- default html player component -->
|
||||
<app-html-video-player
|
||||
*ngIf="playerSettings.player === 'html5'"
|
||||
[channel]="activeChannel$ | async"
|
||||
[showCaptions]="playerSettings.showCaptions"
|
||||
>
|
||||
</app-html-video-player>
|
||||
|
||||
<ng-container *ngIf="(activeChannel$ | async) && playerSettings.player === 'mpv'">
|
||||
<div class="mpv-player">
|
||||
<img src="./assets/images/custom-player.png" />
|
||||
<p>The channel is played in a separate window in the MPV player. (<a [routerLink] style="cursor: pointer;" (click)="openUrl('https://github.com/4gray/iptvnator/wiki/What-is-mpv-video-player-and-how-to-install-it-on-different-operating-systems%3F')">Installation instructions</a>)</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- channel overlay -->
|
||||
<app-info-overlay
|
||||
[channel]="activeChannel$ | async"
|
||||
[epgProgram]="epgProgram$ | async"
|
||||
></app-info-overlay>
|
||||
</mat-drawer-content>
|
||||
<!-- right sidebar content -->
|
||||
<mat-drawer position="end" #drawerRight mode="side" disableClose>
|
||||
|
||||
@@ -142,6 +142,12 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
: {}
|
||||
);
|
||||
|
||||
this.store.dispatch(
|
||||
PlaylistActions.setChannels({
|
||||
channels: playlist.playlist.items,
|
||||
})
|
||||
);
|
||||
return playlist.playlist.items;
|
||||
})
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user