fix double-click external playback handling

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

@@ -69,20 +69,32 @@
         </div>
     </div>
 
-    <div class="setting-item">
-        <div class="setting-item__meta">
-            <h4>{{ 'SETTINGS.OPEN_STREAM_ON_DOUBLE_CLICK' | translate }}</h4>
-            <p>
-                {{
-                    'SETTINGS.OPEN_STREAM_ON_DOUBLE_CLICK_DESCRIPTION'
-                        | translate
-                }}
-            </p>
+    @if (isDesktop()) {
+        <div
+            class="setting-item"
+            data-test-id="external-player-double-click-setting"
+        >
+            <div class="setting-item__meta">
+                <h4>
+                    {{
+                        'SETTINGS.OPEN_EXTERNAL_PLAYER_ON_DOUBLE_CLICK'
+                            | translate
+                    }}
+                </h4>
+                <p>
+                    {{
+                        'SETTINGS.OPEN_EXTERNAL_PLAYER_ON_DOUBLE_CLICK_DESCRIPTION'
+                            | translate
+                    }}
+                </p>
+            </div>
+            <div class="setting-item__control setting-item__toggle">
+                <mat-checkbox
+                    formControlName="openStreamOnDoubleClick"
+                ></mat-checkbox>
+            </div>
         </div>
-        <div class="setting-item__control setting-item__toggle">
-            <mat-checkbox formControlName="openStreamOnDoubleClick"></mat-checkbox>
-        </div>
-    </div>
+    }
 
     @if (isDesktop()) {
         <div class="setting-item">

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

@@ -0,0 +1,73 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TranslateModule } from '@ngx-translate/core';
+import { StreamFormat, VideoPlayer } from 'shared-interfaces';
+import { SettingsPlaybackSectionComponent } from './settings-playback-section.component';
+
+describe('SettingsPlaybackSectionComponent', () => {
+    let fixture: ComponentFixture<SettingsPlaybackSectionComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                SettingsPlaybackSectionComponent,
+                NoopAnimationsModule,
+                ReactiveFormsModule,
+                TranslateModule.forRoot(),
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(SettingsPlaybackSectionComponent);
+        fixture.componentRef.setInput('form', createForm());
+        fixture.componentRef.setInput('activeSection', 'playback');
+        fixture.componentRef.setInput('players', [
+            {
+                id: VideoPlayer.VideoJs,
+                labelKey: 'SETTINGS.PLAYER_VIDEOJS',
+            },
+            {
+                id: VideoPlayer.MPV,
+                labelKey: 'SETTINGS.PLAYER_MPV',
+            },
+        ]);
+        fixture.componentRef.setInput('streamFormatEnum', StreamFormat);
+    });
+
+    it('hides the external-player double-click option outside desktop builds', () => {
+        fixture.componentRef.setInput('isDesktop', false);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector(
+                '[data-test-id="external-player-double-click-setting"]'
+            )
+        ).toBeNull();
+        expect(fixture.nativeElement.textContent).not.toContain(
+            'SETTINGS.OPEN_STREAM_ON_DOUBLE_CLICK'
+        );
+    });
+
+    it('labels the double-click option as external-player behavior on desktop', () => {
+        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'
+        );
+    });
+});
+
+function createForm(): FormGroup {
+    return new FormGroup({
+        player: new FormControl(VideoPlayer.VideoJs),
+        streamFormat: new FormControl(StreamFormat.M3u8StreamFormat),
+        openStreamOnDoubleClick: new FormControl(false),
+        showExternalPlaybackBar: new FormControl(true),
+    });
+}

apps/web/src/assets/i18n/en.json

@@ -244,8 +244,8 @@
         "NEW_VERSION_AVAILABLE": "There is a new version available",
         "LATEST_VERSION": "You are using the latest version",
         "STREAM_FORMAT": "Stream Format",
-        "OPEN_STREAM_ON_DOUBLE_CLICK": "Open streams with double-click",
-        "OPEN_STREAM_ON_DOUBLE_CLICK_DESCRIPTION": "Require a double-click on channel rows before playback starts.",
+        "OPEN_EXTERNAL_PLAYER_ON_DOUBLE_CLICK": "Start MPV/VLC with double-click",
+        "OPEN_EXTERNAL_PLAYER_ON_DOUBLE_CLICK_DESCRIPTION": "Require a double-click on channel rows before MPV or VLC playback starts.",
         "LANGUAGE": "Language",
         "SETTINGS_SAVED": "Success! Configuration was saved.",
         "THEME": "Visual theme",