fix(playback): apply saved player changes to mounted web players

WebPlayerViewComponent resolved the saved engine from a one-shot
StorageMap snapshot taken at mount, so a player switch from the command
palette or settings page confirmed via snackbar and persisted the
setting while an already-mounted Xtream/Stalker player silently kept
the previous engine. The same snapshot also made first play mount the
default Video.js engine and swap to the saved one once the async read
landed.

Resolve the player (and recording folder) from the live SettingsStore
signal instead and drop the snapshot entirely. Precedence is unchanged:
temporary recovery override -> host playerOverride -> saved player ->
Video.js. Hosts passing no override (Xtream/Stalker live layouts, the
portal inline detail player) now track saved changes in place; first
mount reads the already-loaded store, so the default engine no longer
flashes.

Regression coverage (all verified to fail with the fix reverted):
three unit tests on the component and two Xtream live-route e2e tests —
a palette switch reaching the mounted player without a layout remount,
and a MutationObserver engines-ever-seen assertion that the saved
engine mounts first time.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

libs/ui/playback/src/lib/web-player-view/web-player-view.component.spec.ts

@@ -12,9 +12,9 @@ import { By } from '@angular/platform-browser';
 import { VodSourceRowComponent } from '@iptvnator/ui/components';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { TranslateModule } from '@ngx-translate/core';
-import { of, Subject } from 'rxjs';
+import { of } from 'rxjs';
 import { VideoPlayer } from '@iptvnator/shared/interfaces';
-import { RuntimeCapabilitiesService } from '@iptvnator/services';
+import { RuntimeCapabilitiesService, SettingsStore } from '@iptvnator/services';
 import { ErrorDetails, ErrorTypes } from 'hls.js';
 import type { WebPlayerViewComponent as WebPlayerViewComponentInstance } from './web-player-view.component';
 import {
@@ -119,6 +119,7 @@ describe('WebPlayerViewComponent', () => {
     let component: WebPlayerViewComponentInstance;
     const storageMap = {
         get: jest.fn(() => of({ player: VideoPlayer.VideoJs })),
+        set: jest.fn(() => of(undefined)),
     };
     let runtimeCapabilities: { supportsManagedExternalPlayers: boolean };
 
@@ -591,19 +592,7 @@ describe('WebPlayerViewComponent', () => {
         );
     });
 
-    it('renders embedded MPV before settings storage emits', () => {
-        fixture.destroy();
-
-        const pendingSettings = new Subject<unknown>();
-        storageMap.get.mockReturnValue(pendingSettings.asObservable());
-        fixture = TestBed.createComponent(WebPlayerViewComponent);
-        fixture.componentRef.setInput('playbackSessionKey', 'test-session');
-        component = fixture.componentInstance;
-        fixture.componentRef.setInput(
-            'streamUrl',
-            'https://example.com/archive/movie.mkv'
-        );
-        fixture.componentRef.setInput('title', 'Example Movie');
+    it('renders embedded MPV with an empty recording folder fallback', () => {
         fixture.componentRef.setInput(
             'playerOverride',
             VideoPlayer.EmbeddedMpv
@@ -617,6 +606,83 @@ describe('WebPlayerViewComponent', () => {
         expect(player.recordingFolder()).toBe('');
     });
 
+    describe('saved player changes', () => {
+        // The selected engine must come from the live SettingsStore signal.
+        // It used to come from a one-shot StorageMap snapshot taken at mount,
+        // so a saved player change (settings page, command palette) never
+        // reached an already-mounted Xtream/Stalker player.
+        it('switches the mounted engine when the saved player changes', async () => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            expect(
+                fixture.debugElement.query(By.directive(StubVjsPlayerComponent))
+            ).not.toBeNull();
+
+            await TestBed.inject(SettingsStore).updateSettings({
+                player: VideoPlayer.Html5Player,
+            });
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            expect(
+                fixture.debugElement.query(By.directive(StubVjsPlayerComponent))
+            ).toBeNull();
+            expect(
+                fixture.debugElement.query(
+                    By.directive(StubHtmlVideoPlayerComponent)
+                )
+            ).not.toBeNull();
+        });
+
+        it('mounts the engine saved in the settings store on first render', async () => {
+            const settingsStore = TestBed.inject(SettingsStore);
+            await settingsStore.loadSettings();
+            await settingsStore.updateSettings({
+                player: VideoPlayer.ArtPlayer,
+            });
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            expect(
+                fixture.debugElement.query(By.directive(StubArtPlayerComponent))
+            ).not.toBeNull();
+            expect(
+                fixture.debugElement.query(By.directive(StubVjsPlayerComponent))
+            ).toBeNull();
+        });
+
+        it('keeps an explicit playerOverride ahead of the saved player', async () => {
+            fixture.componentRef.setInput(
+                'playerOverride',
+                VideoPlayer.ArtPlayer
+            );
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            await TestBed.inject(SettingsStore).updateSettings({
+                player: VideoPlayer.Html5Player,
+            });
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            expect(
+                fixture.debugElement.query(By.directive(StubArtPlayerComponent))
+            ).not.toBeNull();
+            expect(
+                fixture.debugElement.query(
+                    By.directive(StubHtmlVideoPlayerComponent)
+                )
+            ).toBeNull();
+        });
+    });
+
     it('suppresses browser diagnostics while embedded MPV is selected', () => {
         const requests: unknown[] = [];
         runtimeCapabilities.supportsManagedExternalPlayers = true;

libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts

@@ -1,7 +1,6 @@
 import {
     Component,
     OnDestroy,
-    Signal,
     ViewEncapsulation,
     computed,
     effect,
@@ -11,8 +10,6 @@ import {
     signal,
     untracked,
 } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { StorageMap } from '@ngx-pwa/local-storage';
 import {
     type PlaybackDiagnostic,
     type PlaybackDiagnosticCode,
@@ -22,11 +19,9 @@ import {
 import { PORTAL_EXTERNAL_PLAYBACK } from '@iptvnator/portal/shared/util';
 import { RuntimeCapabilitiesService, SettingsStore } from '@iptvnator/services';
 import {
-    STORE_KEY,
     VideoPlayer,
     type Channel,
     type ResolvedPortalPlayback,
-    type Settings,
     type VodSourceDescriptor,
 } from '@iptvnator/shared/interfaces';
 import { ArtPlayerComponent } from '../art-player/art-player.component';
@@ -91,7 +86,6 @@ function resolveWebPlayerSharedControls(): boolean {
     encapsulation: ViewEncapsulation.None,
 })
 export class WebPlayerViewComponent implements OnDestroy {
-    private readonly storage = inject(StorageMap);
     private readonly runtime = inject(RuntimeCapabilitiesService);
     private readonly settingsStore = inject(SettingsStore);
     private readonly externalPlayback = inject(PORTAL_EXTERNAL_PLAYBACK, {
@@ -130,9 +124,6 @@ export class WebPlayerViewComponent implements OnDestroy {
     readonly previousEpisodeRequested = output<void>();
     readonly nextEpisodeRequested = output<void>();
 
-    readonly settings = toSignal(
-        this.storage.get(STORE_KEY.Settings)
-    ) as Signal<Settings | undefined>;
     readonly showCaptions = computed(
         () => this.settingsStore.showCaptions?.() ?? false
     );
@@ -150,12 +141,15 @@ export class WebPlayerViewComponent implements OnDestroy {
     channel: Channel | undefined;
     vjsOptions: VideoPlayerOptions | undefined;
 
+    // Resolved from the live SettingsStore signal, not a mount-time storage
+    // snapshot: a saved player change (settings page, command palette) must
+    // reach an already-mounted player without a remount.
     readonly selectedPlayer = computed<VideoPlayer>(() => {
         const temporary = this.recoverySession.temporaryPlayerOverride();
         return temporary
             ? toVideoPlayer(temporary)
             : (this.playerOverride() ??
-                  this.settings()?.player ??
+                  this.settingsStore.player?.() ??
                   VideoPlayer.VideoJs);
     });
     private readonly applicationState = createWebPlayerApplicationState({
@@ -208,7 +202,7 @@ export class WebPlayerViewComponent implements OnDestroy {
         isPlaybackExternallyTransferable(this.resolvedPlayback())
     );
     readonly recordingFolder = computed(
-        () => this.settings()?.recordingFolder ?? ''
+        () => this.settingsStore.recordingFolder?.() ?? ''
     );
     get supportsManagedExternalPlayers(): boolean {
         return this.runtime.supportsManagedExternalPlayers;