mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-16 22:26:16 -08:00
4gray
5cf96d7112
Add a transient channel number overlay to the video player UI so users see the numeric channel feedback when entering or changing channels. - Insert conditional overlay markup in the video-player template that renders when showChannelNumberOverlay is true and displays the channelNumberInput value. - Add styles for .channel-number-overlay and .channel-number-display to center the overlay, style the numeric display (large bold font, dark translucent background, rounded corners, shadow) and include a brief scale-in animation. - Keep overlay pointer-events disabled so it doesn't block player input. This improves user experience by giving clear visual confirmation of channel changes.
122 lines
5.0 KiB
HTML
122 lines
5.0 KiB
HTML
<mat-drawer-container class="main-container">
|
|
<!-- sidebar content -->
|
|
<mat-drawer #drawer mode="side" opened disableClose class="mat-drawer">
|
|
@defer {
|
|
<app-sidebar [channels]="(channels$ | async)!" />
|
|
} @loading {
|
|
<p>Loading...</p>
|
|
} @placeholder {
|
|
<p>Loading...</p>
|
|
}
|
|
</mat-drawer>
|
|
<mat-drawer-content class="drawer-content">
|
|
@if (activeChannel$ | async; as activeChannel) {
|
|
<!-- toolbar with drawer icon -->
|
|
<app-toolbar
|
|
(toggleLeftDrawerClicked)="drawer.toggle()"
|
|
(toggleRightDrawerClicked)="drawerRight.toggle()"
|
|
(multiEpgClicked)="openMultiEpgView()"
|
|
(infoOverlayClicked)="toggleInfoOverlay()"
|
|
[activeChannel]="activeChannel"
|
|
[isLeftDrawerOpened]="drawer.opened"
|
|
(settingsClicked)="openSettings()"
|
|
/>
|
|
@if (activeChannel.radio === 'true') {
|
|
<app-audio-player
|
|
[url]="activeChannel.url"
|
|
[icon]="activeChannel?.tvg?.logo!"
|
|
/>
|
|
} @else {
|
|
<!-- video.js player -->
|
|
@if (playerSettings.player === 'videojs') {
|
|
<app-vjs-player
|
|
[options]="{
|
|
sources: [
|
|
{
|
|
src:
|
|
activeChannel.url +
|
|
activeChannel.epgParams,
|
|
type: 'application/x-mpegURL',
|
|
},
|
|
],
|
|
}"
|
|
[volume]="volume"
|
|
[class.hide-captions]="!playerSettings.showCaptions"
|
|
/>
|
|
}
|
|
<!-- default html player component -->
|
|
@if (playerSettings.player === 'html5') {
|
|
<app-html-video-player
|
|
[channel]="activeChannel"
|
|
[volume]="volume"
|
|
[showCaptions]="playerSettings.showCaptions!"
|
|
/>
|
|
}
|
|
<!-- Add ArtPlayer component -->
|
|
@if (playerSettings.player === 'artplayer') {
|
|
<app-art-player
|
|
[channel]="activeChannel"
|
|
[volume]="volume"
|
|
[showCaptions]="playerSettings.showCaptions!"
|
|
/>
|
|
}
|
|
@if (playerSettings.player === 'mpv') {
|
|
<div class="custom-player">
|
|
<img
|
|
src="./assets/images/custom-player.png"
|
|
alt="external player"
|
|
/>
|
|
<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>
|
|
}
|
|
@if (playerSettings.player === 'vlc') {
|
|
<div class="custom-player">
|
|
<img
|
|
src="./assets/images/custom-player.png"
|
|
alt="external player"
|
|
/>
|
|
<p>
|
|
The channel is played in a separate window in VLC
|
|
player. Please make sure that this player is
|
|
installed in your system and the correct path is
|
|
defined in the app settings.
|
|
</p>
|
|
</div>
|
|
}
|
|
<!-- channel overlay -->
|
|
<app-info-overlay
|
|
[channel]="activeChannel"
|
|
[epgProgram]="(epgProgram$ | async)!"
|
|
/>
|
|
|
|
<!-- channel number overlay -->
|
|
@if (showChannelNumberOverlay) {
|
|
<div class="channel-number-overlay">
|
|
<div class="channel-number-display">
|
|
{{ channelNumberInput }}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
}
|
|
</mat-drawer-content>
|
|
<!-- right sidebar content -->
|
|
<mat-drawer position="end" #drawerRight mode="side" disableClose>
|
|
@if (isDesktop) {
|
|
<app-epg-list />
|
|
}
|
|
</mat-drawer>
|
|
</mat-drawer-container>
|