diff --git a/apps/web/src/app/settings/settings-playback-section.component.html b/apps/web/src/app/settings/settings-playback-section.component.html
index 5fe7e5a46..622cd79ae 100644
--- a/apps/web/src/app/settings/settings-playback-section.component.html
+++ b/apps/web/src/app/settings/settings-playback-section.component.html
@@ -69,7 +69,7 @@
- @if (isDesktop()) {
+ @if (isDesktop() && isExternalPlayerSelected()) {
{
});
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),
});
}
diff --git a/apps/web/src/app/settings/settings-playback-section.component.ts b/apps/web/src/app/settings/settings-playback-section.component.ts
index c5b1519ad..5db1a12d4 100644
--- a/apps/web/src/app/settings/settings-playback-section.component.ts
+++ b/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();
readonly streamFormatEnum = input.required();
readonly isDesktop = input(false);
+
+ isExternalPlayerSelected(): boolean {
+ const player = this.form().value.player;
+ return player === VideoPlayer.MPV || player === VideoPlayer.VLC;
+ }
}