style(video-player): replace custom player image and enhance styling; add external playback session handling

libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.html

@@ -83,7 +83,7 @@
                 @if (playerSettings.player === 'mpv') {
                     <div class="custom-player">
                         <img
-                            src="./assets/images/custom-player.png"
+                            src="./assets/images/iptvnator-1-mascot.png"
                             alt="external player"
                         />
                         <p>
@@ -104,7 +104,7 @@
                 @if (playerSettings.player === 'vlc') {
                     <div class="custom-player">
                         <img
-                            src="./assets/images/custom-player.png"
+                            src="./assets/images/iptvnator-1-mascot.png"
                             alt="external player"
                         />
                         <p>

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%;

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';
+    }
 }