refine double-click setting visibility

apps/web/src/app/settings/settings-playback-section.component.html

@@ -69,7 +69,7 @@
         </div>
     </div>
 
-    @if (isDesktop()) {
+    @if (isDesktop() && isExternalPlayerSelected()) {
         <div
             class="setting-item"
             data-test-id="external-player-double-click-setting"

apps/web/src/app/settings/settings-playback-section.component.spec.ts

@@ -35,6 +35,7 @@ describe('SettingsPlaybackSectionComponent', () => {
     });
 
     it('hides the external-player double-click option outside desktop builds', () => {
+        fixture.componentRef.setInput('form', createForm(VideoPlayer.MPV));
         fixture.componentRef.setInput('isDesktop', false);
         fixture.detectChanges();
 
@@ -48,26 +49,67 @@ describe('SettingsPlaybackSectionComponent', () => {
         );
     });
 
-    it('labels the double-click option as external-player behavior on desktop', () => {
+    it('hides the external-player double-click option for embedded players', () => {
         fixture.componentRef.setInput('isDesktop', true);
         fixture.detectChanges();
 
+        expect(
+            fixture.nativeElement.querySelector(
+                '[data-test-id="external-player-double-click-setting"]'
+            )
+        ).toBeNull();
+    });
+
+    it.each([VideoPlayer.MPV, VideoPlayer.VLC])(
+        'labels the double-click option as external-player behavior on desktop for %s',
+        (player) => {
+            fixture.componentRef.setInput('form', createForm(player));
+            fixture.componentRef.setInput('isDesktop', true);
+            fixture.detectChanges();
+
+            expect(
+                fixture.nativeElement.querySelector(
+                    '[data-test-id="external-player-double-click-setting"]'
+                )
+            ).not.toBeNull();
+            expect(fixture.nativeElement.textContent).toContain(
+                'SETTINGS.OPEN_EXTERNAL_PLAYER_ON_DOUBLE_CLICK'
+            );
+        }
+    );
+
+    it('updates the double-click option visibility when the selected player changes', () => {
+        const form = createForm();
+        fixture.componentRef.setInput('form', form);
+        fixture.componentRef.setInput('isDesktop', true);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector(
+                '[data-test-id="external-player-double-click-setting"]'
+            )
+        ).toBeNull();
+
+        form.controls['player'].setValue(VideoPlayer.MPV);
+        fixture.detectChanges();
+
         expect(
             fixture.nativeElement.querySelector(
                 '[data-test-id="external-player-double-click-setting"]'
             )
         ).not.toBeNull();
-        expect(fixture.nativeElement.textContent).toContain(
-            'SETTINGS.OPEN_EXTERNAL_PLAYER_ON_DOUBLE_CLICK'
-        );
     });
 });
 
-function createForm(): FormGroup {
+function createForm(player = VideoPlayer.VideoJs): FormGroup {
     return new FormGroup({
-        player: new FormControl(VideoPlayer.VideoJs),
+        player: new FormControl(player),
         streamFormat: new FormControl(StreamFormat.M3u8StreamFormat),
         openStreamOnDoubleClick: new FormControl(false),
         showExternalPlaybackBar: new FormControl(true),
+        mpvPlayerPath: new FormControl(''),
+        mpvReuseInstance: new FormControl(false),
+        vlcPlayerPath: new FormControl(''),
+        vlcReuseInstance: new FormControl(false),
     });
 }

apps/web/src/app/settings/settings-playback-section.component.ts

@@ -7,7 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslateModule } from '@ngx-translate/core';
-import { StreamFormat } from 'shared-interfaces';
+import { StreamFormat, VideoPlayer } from 'shared-interfaces';
 import { SettingsPlayerOption } from './settings.models';
 
 @Component({
@@ -32,4 +32,9 @@ export class SettingsPlaybackSectionComponent {
     readonly players = input.required<SettingsPlayerOption[]>();
     readonly streamFormatEnum = input.required<typeof StreamFormat>();
     readonly isDesktop = input(false);
+
+    isExternalPlayerSelected(): boolean {
+        const player = this.form().value.player;
+        return player === VideoPlayer.MPV || player === VideoPlayer.VLC;
+    }
 }