fix(playback): suppress diagnostics for embedded mpv (#1038)

* fix(playback): suppress diagnostics for embedded mpv

* chore(playback): clarify selected player effect dependency

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

@@ -1,4 +1,4 @@
-@if (player === 'videojs') {
+@if (selectedPlayer() === 'videojs') {
     <app-vjs-player
         [options]="vjsOptions"
         [volume]="volume()"
@@ -6,7 +6,7 @@
         (timeUpdate)="timeUpdate.emit($event)"
         (playbackIssue)="handlePlaybackIssue($event)"
     />
-} @else if (player === 'html5') {
+} @else if (selectedPlayer() === 'html5') {
     <app-html-video-player
         [channel]="$any(channel)"
         [volume]="volume()"
@@ -15,7 +15,7 @@
         (timeUpdate)="timeUpdate.emit($event)"
         (playbackIssue)="handlePlaybackIssue($event)"
     />
-} @else if (player === 'artplayer') {
+} @else if (selectedPlayer() === 'artplayer') {
     <app-art-player
         [channel]="$any(channel)"
         [volume]="volume()"
@@ -24,7 +24,7 @@
         (timeUpdate)="timeUpdate.emit($event)"
         (playbackIssue)="handlePlaybackIssue($event)"
     />
-} @else if (player === 'embedded-mpv') {
+} @else if (selectedPlayer() === 'embedded-mpv') {
     <app-embedded-mpv-player
         [playback]="resolvedPlayback()"
         [recordingFolder]="recordingFolder()"
@@ -44,7 +44,7 @@
     />
 }
 
-@if (playbackDiagnostic(); as issue) {
+@if (visiblePlaybackDiagnostic(); as issue) {
     <section
         class="web-player-diagnostic"
         data-test-id="playback-diagnostic-banner"

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

@@ -332,6 +332,43 @@ describe('WebPlayerViewComponent', () => {
         expect(player.recordingFolder()).toBe('');
     });
 
+    it('suppresses browser diagnostics while embedded MPV is selected', () => {
+        const requests: unknown[] = [];
+        runtimeCapabilities.supportsManagedExternalPlayers = true;
+        fixture.componentRef.setInput('playerOverride', VideoPlayer.EmbeddedMpv);
+        component.externalFallbackRequested.subscribe((request) =>
+            requests.push(request)
+        );
+
+        fixture.detectChanges();
+        component.handlePlaybackIssue(createUnsupportedCodecDiagnostic());
+        fixture.detectChanges();
+        component.requestExternalFallback('mpv');
+
+        expect(component.playbackDiagnostic()).toBeNull();
+        expect(
+            fixture.debugElement.query(
+                By.directive(StubEmbeddedMpvPlayerComponent)
+            )
+        ).not.toBeNull();
+        expect(
+            fixture.debugElement.query(
+                By.css('[data-test-id="playback-diagnostic-banner"]')
+            )
+        ).toBeNull();
+        expect(
+            fixture.debugElement.query(
+                By.css('[data-test-id="playback-fallback-mpv"]')
+            )
+        ).toBeNull();
+        expect(
+            fixture.debugElement.query(
+                By.css('[data-test-id="playback-fallback-vlc"]')
+            )
+        ).toBeNull();
+        expect(requests).toEqual([]);
+    });
+
     it('passes series navigation to embedded MPV and forwards episode navigation events', () => {
         const events: string[] = [];
         const seriesNavigation = {

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

@@ -90,7 +90,6 @@ export class WebPlayerViewComponent {
     >;
 
     channel!: Channel;
-    player!: VideoPlayer;
     vjsOptions!: {
         isLive: boolean;
         reloadToken: number;
@@ -98,10 +97,15 @@ export class WebPlayerViewComponent {
     };
     readonly reloadToken = signal(0);
     readonly playbackDiagnostic = signal<PlaybackDiagnostic | null>(null);
+    readonly visiblePlaybackDiagnostic = computed(() =>
+        this.selectedPlayer() === VideoPlayer.EmbeddedMpv
+            ? null
+            : this.playbackDiagnostic()
+    );
     readonly canShowExternalFallbackActions = computed(
         () =>
             this.runtime.supportsManagedExternalPlayers &&
-            !!this.playbackDiagnostic()?.externalFallbackRecommended
+            !!this.visiblePlaybackDiagnostic()?.externalFallbackRecommended
     );
     readonly diagnosticHeadlineKey = computed(() =>
         this.canShowExternalFallbackActions()
@@ -133,7 +137,8 @@ export class WebPlayerViewComponent {
 
     constructor() {
         effect(() => {
-            this.player = this.selectedPlayer();
+            // Track player changes so stale browser diagnostics are cleared on switch.
+            this.selectedPlayer();
 
             const playback = this.resolvedPlayback();
             this.playbackDiagnostic.set(null);
@@ -201,11 +206,16 @@ export class WebPlayerViewComponent {
     }
 
     handlePlaybackIssue(issue: PlaybackDiagnostic | null): void {
+        if (this.selectedPlayer() === VideoPlayer.EmbeddedMpv) {
+            this.playbackDiagnostic.set(null);
+            return;
+        }
+
         this.playbackDiagnostic.set(issue);
     }
 
     requestExternalFallback(player: ExternalPlayerName): void {
-        const diagnostic = this.playbackDiagnostic();
+        const diagnostic = this.visiblePlaybackDiagnostic();
         if (!diagnostic) {
             return;
         }