Files
iptvnator/apps/electron-backend-e2e/src/remote-control.e2e.ts
T
4grayandClaude Fable 5 1a6af75761 feat(settings): per-section pages with unsaved-changes bar (#1384)
* feat(settings): split settings into per-section pages with an unsaved-changes bar

Replace the single scrolling settings page with routed section pages
(/workspace/settings/:section): the context-panel rail links each section,
only the active section renders, and unknown or capability-gated sections
redirect to General. The shared form lives on the parent component, so
staged edits survive section switches; a floating unsaved-changes bar
(Save/Discard) replaces the always-visible footer Save button. Rail links
navigate with replaceUrl so Back still leaves settings in one step.

Along the way:
- delete the unreachable settings dialog mode and the dead
  AppPortalNavigationActionsService with both of its never-injected DI
  tokens (PORTAL_NAVIGATION_ACTIONS, PLAYLIST_PLAYER_ACTIONS)
- delete the scroll-spy directive and pendingScrollTarget plumbing
- revive the EPG panel's "Open EPG settings" empty-state button as a deep
  link to /workspace/settings/epg; the M3U player now reports
  m3u-needs-setup only when the channel has no programmes and no EPG
  source exists in settings or on the playlist itself
- load TMDB cache stats when the Metadata page opens (the section
  component now only exists while its page is open)
- add SETTINGS.UNSAVED_CHANGES / SETTINGS.DISCARD_CHANGES to all 19 locales

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(settings): confirm before leaving with unsaved changes

Add settingsUnsavedChangesGuard (canDeactivate on the :section route) with
a three-action dialog: save and leave, leave without saving, keep editing.
The guard only intercepts leaving the settings AREA — section switches
share the one settings form and pass unconditionally, so the dialog can
never nag while moving between pages. A failed save cancels the navigation
instead of silently dropping the edits it promised to keep; leaving
without saving also reverts the live theme preview. Save-and-leave is
disabled while the form is invalid, with a hint explaining why.

New SETTINGS.UNSAVED_DIALOG_* keys in all 19 locales.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(settings): stage cover size and EPG view mode; adapt e2e to section pages

Cover size and EPG view mode were the only two controls that persisted
eagerly on click, which made Discard (and leave-without-saving) unable to
revert them: hydrateFromStore() faithfully reloaded the just-persisted
edit. They now stage in the form like every other setting and reach the
store on Save. Review finding by Greptile (P1) and Codex.

E2E suites that walk through settings are updated for one-section-page
rendering (epg, backup-roundtrip, xtream-epg, remote-control) and for the
staged cover size (downloads asserts the dataset after Save); the EPG icon
fallback test saves before leaving settings so the new unsaved-changes
dialog does not block its navigation.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-08-09 09:34:03 +02:00

276 lines
8.5 KiB
TypeScript

import { APIRequestContext, Page } from '@playwright/test';
import { AddressInfo, createServer as createNetServer } from 'net';
import {
channelItemByTitle,
closeElectronApp,
enableRemoteControl,
expect,
goToDashboard,
importM3uPlaylistFromNativeDialog,
launchElectronApp,
openSettings,
openSettingsSection,
saveSettings,
test,
waitForM3uCatalog,
writeTemporaryM3uFile,
} from './electron-test-fixtures';
type RemoteControlStatus = {
channelName?: string;
isLiveView: boolean;
muted?: boolean;
portal: 'm3u' | 'xtream' | 'stalker' | 'unknown';
supportsVolume?: boolean;
volume?: number;
};
test.describe('Electron Remote Control', () => {
test('@remote-control @m3u @electron applies remote volume commands to the selected built-in video player', async ({
dataDir,
request,
}) => {
const remotePort = await reserveFreePort();
const channelName = 'Remote ArtPlayer Channel';
const playlistFile = writeTemporaryM3uFile(
dataDir,
'remote-control-video.m3u',
[
{
groupTitle: 'Remote',
name: channelName,
url: 'https://example.channels/remote-art-player.m3u8',
},
]
);
const app = await launchElectronApp(dataDir);
try {
await openSettings(app.mainWindow);
await openSettingsSection(app.mainWindow, 'playback');
await selectSettingsOption(
app.mainWindow,
'select-video-player',
'artplayer'
);
await enableRemoteControl(app.mainWindow, remotePort);
await saveSettings(app.mainWindow);
await waitForRemoteControlServer(request, remotePort);
await goToDashboard(app.mainWindow);
await importM3uPlaylistFromNativeDialog(app, playlistFile);
await waitForM3uCatalog(app.mainWindow);
await channelItemByTitle(app.mainWindow, channelName)
.first()
.click();
const playerVideo = app.mainWindow
.locator('app-art-player video')
.first();
await expect(playerVideo).toHaveCount(1, { timeout: 20000 });
await waitForRemoteStatus(request, remotePort, (status) => {
return (
status.portal === 'm3u' &&
status.channelName === channelName &&
status.supportsVolume === true &&
roundVolume(status.volume) === 1
);
});
await postRemoteCommand(request, remotePort, '/volume/down');
await waitForRemoteStatus(request, remotePort, (status) => {
return (
status.portal === 'm3u' &&
status.channelName === channelName &&
status.supportsVolume === true &&
roundVolume(status.volume) === 0.9 &&
status.muted === false
);
});
await expect
.poll(() =>
readMediaVolume(app.mainWindow, 'app-art-player video')
)
.toBe(0.9);
} finally {
await closeElectronApp(app);
}
});
test('@remote-control @m3u @electron applies remote volume commands to radio audio playback', async ({
dataDir,
request,
}) => {
const remotePort = await reserveFreePort();
const channelName = 'Remote Radio Channel';
const playlistFile = writeTemporaryM3uFile(
dataDir,
'remote-control-radio.m3u',
[
{
groupTitle: 'Radio',
name: channelName,
radio: true,
url: 'https://example.channels/remote-radio-stream.mp3',
},
]
);
const app = await launchElectronApp(dataDir);
try {
await openSettings(app.mainWindow);
await enableRemoteControl(app.mainWindow, remotePort);
await saveSettings(app.mainWindow);
await waitForRemoteControlServer(request, remotePort);
await goToDashboard(app.mainWindow);
await importM3uPlaylistFromNativeDialog(app, playlistFile);
await waitForM3uCatalog(app.mainWindow);
await channelItemByTitle(app.mainWindow, channelName)
.first()
.click();
const audio = app.mainWindow
.locator('app-audio-player audio')
.first();
await expect(audio).toHaveCount(1, { timeout: 20000 });
await waitForRemoteStatus(request, remotePort, (status) => {
return (
status.portal === 'm3u' &&
status.channelName === channelName &&
status.supportsVolume === true &&
roundVolume(status.volume) === 1
);
});
await postRemoteCommand(request, remotePort, '/volume/down');
await waitForRemoteStatus(request, remotePort, (status) => {
return (
status.portal === 'm3u' &&
status.channelName === channelName &&
status.supportsVolume === true &&
roundVolume(status.volume) === 0.9 &&
status.muted === false
);
});
await expect
.poll(() =>
readMediaVolume(app.mainWindow, 'app-audio-player audio')
)
.toBe(0.9);
} finally {
await closeElectronApp(app);
}
});
});
async function selectSettingsOption(
page: Page,
selectTestId: string,
optionTestId: string
): Promise<void> {
await page.getByTestId(selectTestId).click();
await page.getByTestId(optionTestId).click();
}
async function reserveFreePort(): Promise<number> {
return new Promise((resolve, reject) => {
const server = createNetServer();
server.on('error', reject);
server.listen(0, '127.0.0.1', () => {
const address = server.address() as AddressInfo | null;
if (!address) {
server.close();
reject(new Error('Could not reserve a remote control port.'));
return;
}
server.close(() => resolve(address.port));
});
});
}
async function waitForRemoteControlServer(
request: APIRequestContext,
port: number
): Promise<void> {
await waitForRemoteStatus(
request,
port,
(status) => status.portal === 'unknown' && status.isLiveView === false
);
}
async function waitForRemoteStatus(
request: APIRequestContext,
port: number,
predicate: (status: RemoteControlStatus) => boolean
): Promise<RemoteControlStatus> {
let latestStatus: RemoteControlStatus | null = null;
await expect
.poll(
async () => {
latestStatus = await getRemoteStatus(request, port);
return latestStatus ? predicate(latestStatus) : false;
},
{ timeout: 20000 }
)
.toBe(true);
return latestStatus as RemoteControlStatus;
}
async function getRemoteStatus(
request: APIRequestContext,
port: number
): Promise<RemoteControlStatus | null> {
try {
const response = await request.get(remoteControlUrl(port, '/status'), {
timeout: 1000,
});
if (!response.ok()) {
return null;
}
return (await response.json()) as RemoteControlStatus;
} catch {
return null;
}
}
async function postRemoteCommand(
request: APIRequestContext,
port: number,
path: string
): Promise<void> {
const response = await request.post(remoteControlUrl(port, path), {
data: {},
});
expect(response.ok()).toBe(true);
}
function remoteControlUrl(port: number, path: string): string {
return `http://127.0.0.1:${port}/api/remote-control${path}`;
}
async function readMediaVolume(page: Page, selector: string): Promise<number> {
return page.locator(selector).first().evaluate((element) => {
return Number((element as HTMLMediaElement).volume.toFixed(2));
});
}
function roundVolume(volume: number | undefined): number | null {
if (volume === undefined) {
return null;
}
return Number(volume.toFixed(2));
}