diff --git a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.html b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.html
index 60c43862d..c97b18ddb 100644
--- a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.html
+++ b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.html
@@ -1,4 +1,4 @@
-@if (player === 'videojs') {
+@if (selectedPlayer() === 'videojs') {
-} @else if (player === 'html5') {
+} @else if (selectedPlayer() === 'html5') {
-} @else if (player === 'artplayer') {
+} @else if (selectedPlayer() === 'artplayer') {
-} @else if (player === 'embedded-mpv') {
+} @else if (selectedPlayer() === 'embedded-mpv') {
}
-@if (playbackDiagnostic(); as issue) {
+@if (visiblePlaybackDiagnostic(); as issue) {
{
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 = {
diff --git a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts
index 13b0b9af8..2b9d7c5f4 100644
--- a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts
+++ b/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(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;
}