diff --git a/apps/web/src/assets/images/custom-player.png b/apps/web/src/assets/images/custom-player.png deleted file mode 100644 index 42c19314b..000000000 Binary files a/apps/web/src/assets/images/custom-player.png and /dev/null differ diff --git a/apps/web/src/assets/images/iptvnator-1-mascot.png b/apps/web/src/assets/images/iptvnator-1-mascot.png new file mode 100644 index 000000000..fd0be9d3a Binary files /dev/null and b/apps/web/src/assets/images/iptvnator-1-mascot.png differ diff --git a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.html b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.html index b44f2af66..11128b410 100644 --- a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.html +++ b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.html @@ -83,7 +83,7 @@ @if (playerSettings.player === 'mpv') {
@@ -104,7 +104,7 @@ @if (playerSettings.player === 'vlc') {
diff --git a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss index 94f024225..65952114a 100644 --- a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss +++ b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss @@ -55,7 +55,29 @@ } .custom-player { - padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + margin: 50px auto 0; + padding: 10px 20px 24px; + text-align: center; + + img { + display: block; + width: min(100%, 460px); + filter: drop-shadow(0 18px 42px rgba(77, 220, 243, 0.16)); + } + + p { + max-width: 56ch; + margin: 0; + color: rgba(255, 255, 255, 0.88); + } + + a { + color: inherit; + } } @media only screen and (max-width: 599px) { @@ -77,21 +99,6 @@ } } -@media (prefers-color-scheme: dark) { - .custom-player { - display: flex; - margin-top: 50px; - flex-direction: column; - align-items: center; - padding: 10px; - - img { - filter: invert(100%); - width: 400px; - } - } -} - .channel-number-overlay { position: fixed; top: 50%; diff --git a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.ts b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.ts index 94ab75a51..72798c767 100644 --- a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.ts +++ b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.ts @@ -52,6 +52,7 @@ import { import { getAdjacentChannelItem, getChannelItemByNumber, + PORTAL_EXTERNAL_PLAYBACK, } from '@iptvnator/portal/shared/util'; import { ArtPlayerComponent, @@ -72,6 +73,7 @@ import { STORE_KEY, Settings, SidebarView, + ExternalPlayerSession, VideoPlayer, } from 'shared-interfaces'; @@ -107,6 +109,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy { private readonly settingsStore = inject(SettingsStore); private readonly storage = inject(StorageMap); private readonly store = inject(Store); + private readonly externalPlayback = inject(PORTAL_EXTERNAL_PLAYBACK); /** Active selected channel */ readonly activeChannel = this.store.selectSignal(selectActive); @@ -160,6 +163,8 @@ export class VideoPlayerComponent implements OnInit, OnDestroy { private routeSubscription?: Subscription; private lastKnownVolume = 1; private lastRecordedRecentKey = ''; + private lastExternalSessionStateKey = + this.getExternalSessionStateKey(this.externalPlayback.activeSession()); /** Info overlay component reference for manual triggering */ readonly infoOverlay = viewChild(InfoOverlayComponent); @@ -241,6 +246,29 @@ export class VideoPlayerComponent implements OnInit, OnDestroy { ); this.clearConsumedRecentChannelState(); }); + + effect(() => { + const player = this.settingsStore.player(); + const session = this.externalPlayback.activeSession(); + const activeChannel = this.activeChannel(); + const sessionStateKey = this.getExternalSessionStateKey(session); + + if (sessionStateKey === this.lastExternalSessionStateKey) { + return; + } + + this.lastExternalSessionStateKey = sessionStateKey; + + if ( + !activeChannel || + !this.isExternalPlayer(player) || + !this.isTerminalExternalSession(session) + ) { + return; + } + + this.store.dispatch(ChannelActions.resetActiveChannel()); + }); } /** @@ -739,4 +767,26 @@ export class VideoPlayerComponent implements OnInit, OnDestroy { }); } } + + private getExternalSessionStateKey( + session: ExternalPlayerSession | null | undefined + ): string | null { + if (!session) { + return null; + } + + return `${session.id}:${session.status}`; + } + + private isExternalPlayer( + player: VideoPlayer | null | undefined + ): player is VideoPlayer.MPV | VideoPlayer.VLC { + return player === VideoPlayer.MPV || player === VideoPlayer.VLC; + } + + private isTerminalExternalSession( + session: ExternalPlayerSession | null | undefined + ): boolean { + return session?.status === 'closed' || session?.status === 'error'; + } }