From 082c56608bf796ce55cb7e87d8f052e6705cc8ea Mon Sep 17 00:00:00 2001 From: 4gray Date: Wed, 30 Sep 2026 22:52:47 +0200 Subject: [PATCH] fix(ui): destructive confirmations, verb labels and provider icons Confirmations: ConfirmDialogData.confirmLabel is required, so no dialog can fall back to "Yes"/"No"; the dismiss defaults to "Cancel" and `tone: 'destructive'` styles the confirm with .app-destructive-button. Every caller names its action ("Remove playlist", "Clear", "Refresh playlist", "Cancel download" with a "Close" dismiss). The confirm button has the confirm-dialog-confirm test id and drops its no-op color="primary". The no-op `warn` color input becomes .app-destructive-button on the EPG mapping, playlist item, error view, EPG/reset settings, delete-all and source cleanup buttons, and on the unsaved-changes dialog's Discard. Provider icons come from SOURCE_TYPE_ICONS in shared/interfaces (Xtream cloud, Stalker cast, M3U playlist_play / link / description / subject) in the add dialog, auto-import, empty state, playlist switcher, playlist rows, dashboard source rail, command palette, Sources filters and both reset summaries. Stalker no longer borrows the Dashboard icon, and Xtream no longer shares a glyph with M3U URL playlists. The playlist error view removed a playlist through the stale PlaylistActions.removePlaylist: it dropped the playlist from state before the delete ran, swallowed failures, skipped the source activity guard and showed no toast. It now uses PlaylistDeleteActionService like every other removal, commits only a completed delete, toasts and goes home. The unused action and its effect are removed. Co-Authored-By: Claude Opus 5.5 --- .changes/ui-destructive-confirmations.md | 6 + .codex/skills/iptvnator-theme-style/SKILL.md | 4 +- .../src/category-management.e2e.ts | 4 +- .../src/electron-test-fixtures.ts | 8 +- .../src/live-sidebar-collapse.e2e.ts | 5 +- .../xtream-scenario-driver-wiring.spec.ts | 3 +- .../xtream-scenario-driver.spec.ts | 15 +- .../src/performance/xtream-scenario-ui.ts | 5 +- .../electron-backend-e2e/src/providers.e2e.ts | 4 +- apps/electron-backend-e2e/src/recent.e2e.ts | 5 +- .../src/theme-tokens.e2e.ts | 52 ++++++ .../src/xtream-responsiveness.e2e.ts | 2 +- ...delete-all-playlists-dialog.component.html | 6 +- ...s-delete-all-playlists-dialog.component.ts | 7 +- .../settings-epg-section.component.html | 2 +- .../src/app/settings/settings-epg.facade.ts | 2 + .../settings-reset-section.component.html | 17 +- .../settings-reset-section.component.ts | 2 + ...s-unsaved-changes-dialog.component.spec.ts | 10 ++ ...ttings-unsaved-changes-dialog.component.ts | 1 + apps/web/src/m3-theme.scss | 4 +- docs/architecture/iptvnator-ui-guidelines.md | 21 +++ libs/m3u-state/src/lib/actions.ts | 1 - libs/m3u-state/src/lib/effects.ts | 15 -- .../src/lib/reducers/playlist.reducers.ts | 1 - .../add-playlist-dialog.component.ts | 11 +- .../lib/auto-import/auto-import.component.ts | 9 +- .../playlist-switcher.component.ts | 14 +- .../empty-state/empty-state.component.ts | 7 +- .../playlist-item.component.html | 11 +- .../playlist-item/playlist-item.component.ts | 6 +- .../recent-playlists.component.ts | 2 + .../source-cleanup-dialog.component.ts | 1 + .../ui/src/lib/xtream-refresh-flow.service.ts | 1 + .../lib/download-manager-actions.service.ts | 2 + .../lib/recording-manager-actions.service.ts | 1 + .../playlist-error-view.component.html | 6 +- .../playlist-error-view.component.spec.ts | 156 ++++++++++++++++++ .../playlist-error-view.component.ts | 50 +++++- .../unified-collection-clear-action.ts | 2 + .../vod-details-route.component.ts | 6 + libs/shared/interfaces/src/index.ts | 1 + .../src/lib/source-type-icons.util.spec.ts | 43 +++++ .../src/lib/source-type-icons.util.ts | 50 ++++++ .../epg-mapping-dialog.component.html | 6 +- .../confirm-dialog.component.spec.ts | 46 ++++++ .../confirm-dialog.component.ts | 31 +++- .../workspace-dashboard-rails.component.ts | 9 +- .../workspace-shell-command-builders.ts | 7 +- ...rkspace-sources-filters-panel.component.ts | 7 +- 50 files changed, 584 insertions(+), 103 deletions(-) create mode 100644 .changes/ui-destructive-confirmations.md create mode 100644 libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.spec.ts create mode 100644 libs/shared/interfaces/src/lib/source-type-icons.util.spec.ts create mode 100644 libs/shared/interfaces/src/lib/source-type-icons.util.ts diff --git a/.changes/ui-destructive-confirmations.md b/.changes/ui-destructive-confirmations.md new file mode 100644 index 000000000..3a5f8bb0f --- /dev/null +++ b/.changes/ui-destructive-confirmations.md @@ -0,0 +1,6 @@ +--- +type: fix +area: ui +--- + +Removing or clearing data now asks with a named action on a red button instead of "Yes"/"No", and delete buttons are red again. Each source type has one icon everywhere. Deleting a playlist from its error screen now confirms with a message and keeps the playlist if the delete fails. diff --git a/.codex/skills/iptvnator-theme-style/SKILL.md b/.codex/skills/iptvnator-theme-style/SKILL.md index bd52b37b7..a68bced22 100644 --- a/.codex/skills/iptvnator-theme-style/SKILL.md +++ b/.codex/skills/iptvnator-theme-style/SKILL.md @@ -29,8 +29,8 @@ consumers currently use relative `@use` paths to the needed partial. them outside Material components only for roles without an app token. - Set component tokens through `mat.*-overrides()`; retired `--mdc-*` names do nothing and `pnpm run styles:material-tokens:validate` rejects them. -- Destructive buttons use `.app-destructive-button` (`color="warn"` is a no-op - with M3). +- Destructive buttons use `.app-destructive-button` (the `warn` color input is + a no-op with M3); provider icons come from `SOURCE_TYPE_ICONS`. - Local semantic status colors are acceptable. Existing hard-coded layout, selection, and EPG surface colors are migration debt, not precedent. diff --git a/apps/electron-backend-e2e/src/category-management.e2e.ts b/apps/electron-backend-e2e/src/category-management.e2e.ts index 560dc1f33..7f4ae4d8e 100644 --- a/apps/electron-backend-e2e/src/category-management.e2e.ts +++ b/apps/electron-backend-e2e/src/category-management.e2e.ts @@ -551,7 +551,9 @@ async function refreshFromWorkspaceHeader(page: Page): Promise { const dialog = page.locator('mat-dialog-container'); await expect(dialog).toBeVisible(); - await dialog.getByRole('button', { name: 'Yes', exact: true }).click(); + await dialog + .getByRole('button', { name: 'Refresh playlist', exact: true }) + .click(); const refreshOverlay = page.locator('app-workspace-shell-import-overlay'); await expect(refreshOverlay).toBeVisible({ timeout: 5000 }); diff --git a/apps/electron-backend-e2e/src/electron-test-fixtures.ts b/apps/electron-backend-e2e/src/electron-test-fixtures.ts index fa6154625..661cceb0b 100644 --- a/apps/electron-backend-e2e/src/electron-test-fixtures.ts +++ b/apps/electron-backend-e2e/src/electron-test-fixtures.ts @@ -1266,7 +1266,7 @@ export async function clearCurrentUnifiedCollection(page: Page): Promise { const dialog = page.locator('mat-dialog-container').last(); await expect(dialog).toBeVisible(); - await dialog.getByRole('button', { name: /^Yes$/i }).click(); + await dialog.getByRole('button', { name: 'Clear', exact: true }).click(); await expect(dialog).toBeHidden(); } @@ -1664,7 +1664,7 @@ export async function deleteSource(page: Page, title: string): Promise { await expect(row).toBeVisible(); await row.locator('.delete-btn').click(); - await confirmDialog(page); + await confirmDialog(page, 'Remove playlist'); } export async function refreshSource( @@ -1681,7 +1681,7 @@ export async function refreshSource( await row.locator('.refresh-btn').click(); if (confirm) { - await confirmDialog(page); + await confirmDialog(page, 'Refresh playlist'); } } @@ -2098,7 +2098,7 @@ async function openCommandPalette(page: Page): Promise { return dialog; } -async function confirmDialog(page: Page, buttonLabel = 'Yes'): Promise { +async function confirmDialog(page: Page, buttonLabel: string): Promise { const dialog = page.locator('mat-dialog-container'); await expect(dialog).toBeVisible(); diff --git a/apps/electron-backend-e2e/src/live-sidebar-collapse.e2e.ts b/apps/electron-backend-e2e/src/live-sidebar-collapse.e2e.ts index 704a8b920..40084c0a6 100644 --- a/apps/electron-backend-e2e/src/live-sidebar-collapse.e2e.ts +++ b/apps/electron-backend-e2e/src/live-sidebar-collapse.e2e.ts @@ -163,7 +163,10 @@ test.describe('Live channel rail collapse (#1458)', () => { await app.mainWindow .getByRole('button', { name: 'Clear recently viewed Live TV' }) .click(); - await app.mainWindow.getByRole('button', { name: 'Yes' }).click(); + await app.mainWindow + .locator('mat-dialog-container') + .getByRole('button', { name: 'Clear', exact: true }) + .click(); await expect( channelItemByTitle(app.mainWindow, 'Channel Alpha') ).toHaveCount(0); diff --git a/apps/electron-backend-e2e/src/performance/xtream-scenario-driver-wiring.spec.ts b/apps/electron-backend-e2e/src/performance/xtream-scenario-driver-wiring.spec.ts index 2b0543746..31782aebc 100644 --- a/apps/electron-backend-e2e/src/performance/xtream-scenario-driver-wiring.spec.ts +++ b/apps/electron-backend-e2e/src/performance/xtream-scenario-driver-wiring.spec.ts @@ -35,7 +35,8 @@ describe('Xtream scenario driver source wiring', () => { "'app-playlist-item'", "'.refresh-btn'", "'.delete-btn'", - "'Yes'", + "'Refresh playlist'", + "'Remove playlist'", "'.busy-state__message'", "'.action-spinner'", "'.cancel-btn'", diff --git a/apps/electron-backend-e2e/src/performance/xtream-scenario-driver.spec.ts b/apps/electron-backend-e2e/src/performance/xtream-scenario-driver.spec.ts index fdd9df3b2..17e187503 100644 --- a/apps/electron-backend-e2e/src/performance/xtream-scenario-driver.spec.ts +++ b/apps/electron-backend-e2e/src/performance/xtream-scenario-driver.spec.ts @@ -157,10 +157,15 @@ describe('Xtream Playwright scenario driver', () => { }); it('does not require a misleading portal-status badge before refresh or delete', async () => { - for (const [scenarioId, selector] of [ - [XTREAM_SCENARIO_ID.REFRESH_LARGE, '.refresh-btn'], - [XTREAM_SCENARIO_ID.DELETE_LARGE, '.delete-btn'], + for (const [scenarioId, selector, confirmLabel] of [ + [ + XTREAM_SCENARIO_ID.REFRESH_LARGE, + '.refresh-btn', + 'Refresh playlist', + ], + [XTREAM_SCENARIO_ID.DELETE_LARGE, '.delete-btn', 'Remove playlist'], ] as const) { + const confirmClick = `name=${confirmLabel};exact=true`; const fake = new FakePage(); const prepared = await prepareXtreamScenario( fake.asPage(), @@ -168,7 +173,7 @@ describe('Xtream Playwright scenario driver', () => { ); assert.equal(fake.clicksMatching(selector), 1); - assert.equal(fake.clicksMatching('name=Yes;exact=true'), 0); + assert.equal(fake.clicksMatching(confirmClick), 0); const portalReadyIndex = fake.log.findIndex((entry) => entry.includes('[aria-label="Portal status: active"]:visible') ); @@ -179,7 +184,7 @@ describe('Xtream Playwright scenario driver', () => { assert.equal(portalReadyIndex, -1); assert.ok(sourceActionIndex >= 0); await prepared.trigger(); - assert.equal(fake.clicksMatching('name=Yes;exact=true'), 1); + assert.equal(fake.clicksMatching(confirmClick), 1); } }); diff --git a/apps/electron-backend-e2e/src/performance/xtream-scenario-ui.ts b/apps/electron-backend-e2e/src/performance/xtream-scenario-ui.ts index 457ee6554..e2c7b83e0 100644 --- a/apps/electron-backend-e2e/src/performance/xtream-scenario-ui.ts +++ b/apps/electron-backend-e2e/src/performance/xtream-scenario-ui.ts @@ -83,7 +83,10 @@ export async function prepareXtreamSourceActionTrigger( const dialog = page.locator('mat-dialog-container').last(); await dialog.waitFor({ state: 'visible' }); const confirmation = dialog - .getByRole('button', { name: 'Yes', exact: true }) + .getByRole('button', { + name: action === 'refresh' ? 'Refresh playlist' : 'Remove playlist', + exact: true, + }) .last(); await assertTriggerReady(confirmation, `xtream-source-${action}-confirm`); return confirmation; diff --git a/apps/electron-backend-e2e/src/providers.e2e.ts b/apps/electron-backend-e2e/src/providers.e2e.ts index e414cf818..af3ca8cab 100644 --- a/apps/electron-backend-e2e/src/providers.e2e.ts +++ b/apps/electron-backend-e2e/src/providers.e2e.ts @@ -245,7 +245,9 @@ async function refreshRecentXtreamSourceFromDashboard( const dialog = page.locator('mat-dialog-container'); await expect(dialog).toBeVisible(); - await dialog.getByRole('button', { name: 'Yes', exact: true }).click(); + await dialog + .getByRole('button', { name: 'Refresh playlist', exact: true }) + .click(); const refreshOverlay = page.locator('app-workspace-shell-import-overlay'); await expect(refreshOverlay).toBeVisible({ timeout: 5000 }); diff --git a/apps/electron-backend-e2e/src/recent.e2e.ts b/apps/electron-backend-e2e/src/recent.e2e.ts index a82a4f086..98f8fe6d7 100644 --- a/apps/electron-backend-e2e/src/recent.e2e.ts +++ b/apps/electron-backend-e2e/src/recent.e2e.ts @@ -676,7 +676,10 @@ async function clearRecentItems(page: Page, typeLabel: string): Promise { await page .getByRole('button', { name: `Clear recently viewed ${typeLabel}` }) .click(); - await page.getByRole('button', { name: 'Yes' }).click(); + await page + .locator('mat-dialog-container') + .getByRole('button', { name: 'Clear', exact: true }) + .click(); } async function expectUnifiedLiveDetailOpen( diff --git a/apps/electron-backend-e2e/src/theme-tokens.e2e.ts b/apps/electron-backend-e2e/src/theme-tokens.e2e.ts index bcadf0f9d..6782598e9 100644 --- a/apps/electron-backend-e2e/src/theme-tokens.e2e.ts +++ b/apps/electron-backend-e2e/src/theme-tokens.e2e.ts @@ -4,6 +4,7 @@ import { expect, launchElectronApp, openSettings, + openSettingsSection, test, } from './electron-test-fixtures'; import { applyTheme } from './theme-contrast'; @@ -193,4 +194,55 @@ test.describe('Theme tokens', () => { await closeElectronApp(app); } }); + + test('@theme @electron destructive actions name the action and use the error color', async ({ + dataDir, + }) => { + const app = await launchElectronApp(dataDir); + const page = app.mainWindow; + try { + await openSettings(page); + await openSettingsSection(page, 'epg'); + + for (const theme of ['light', 'dark'] as const) { + await applyTheme(page, theme); + const error = await resolveColor(page, 'var(--mat-sys-error)'); + const trigger = page.getByRole('button', { + name: 'Clear EPG data', + exact: true, + }); + // The `warn` color input was a no-op with M3: the trigger + // rendered in the primary color. + await expect + .poll(() => + trigger.evaluate((el) => getComputedStyle(el).color) + ) + .toBe(error); + await trigger.click(); + + const dialog = page.locator('mat-dialog-container'); + await expect(dialog).toBeVisible(); + await expect( + dialog.getByRole('button', { name: 'Yes' }) + ).toHaveCount(0); + const confirm = dialog.getByTestId('confirm-dialog-confirm'); + await expect(confirm).toHaveText('Clear EPG data'); + await expect(confirm).toHaveClass(/app-destructive-button/); + await expect + .poll(() => + confirm.evaluate( + (el) => getComputedStyle(el).backgroundColor + ) + ) + .toBe(error); + + await dialog + .getByRole('button', { name: 'Cancel', exact: true }) + .click(); + await expect(dialog).toBeHidden(); + } + } finally { + await closeElectronApp(app); + } + }); }); diff --git a/apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts b/apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts index 1b25035fc..1490bed99 100644 --- a/apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts +++ b/apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts @@ -292,7 +292,7 @@ test.describe('Electron Xtream Responsiveness', () => { ); await expect(confirmDialog).toBeVisible(); await confirmDialog - .getByRole('button', { name: 'Yes', exact: true }) + .getByRole('button', { name: 'Remove playlist', exact: true }) .click(); await waitForDbOperationEvent(app.mainWindow, { diff --git a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.html b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.html index db5e7c365..f9e84765e 100644 --- a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.html +++ b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.html @@ -49,7 +49,11 @@ - diff --git a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.ts b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.ts index 759812dd1..87dd57aa2 100644 --- a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.ts +++ b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.ts @@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; import { TranslateModule } from '@ngx-translate/core'; +import { SOURCE_TYPE_ICONS } from '@iptvnator/shared/interfaces'; export interface SettingsDeleteAllPlaylistsDialogData { summary: { @@ -48,19 +49,19 @@ export class SettingsDeleteAllPlaylistsDialogComponent { { id: 'm3u', count: this.dialogData.summary.m3u, - icon: 'playlist_play', + icon: SOURCE_TYPE_ICONS.m3u, labelKey: 'HOME.PLAYLIST_TYPES.M3U', }, { id: 'xtream', count: this.dialogData.summary.xtream, - icon: 'cloud', + icon: SOURCE_TYPE_ICONS.xtream, labelKey: 'HOME.PLAYLIST_TYPES.XTREAM', }, { id: 'stalker', count: this.dialogData.summary.stalker, - icon: 'router', + icon: SOURCE_TYPE_ICONS.stalker, labelKey: 'HOME.PLAYLIST_TYPES.STALKER', }, ]); diff --git a/apps/web/src/app/settings/settings-epg-section.component.html b/apps/web/src/app/settings/settings-epg-section.component.html index b82aa1643..523e92004 100644 --- a/apps/web/src/app/settings/settings-epg-section.component.html +++ b/apps/web/src/app/settings/settings-epg-section.component.html @@ -217,7 +217,7 @@ - diff --git a/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.spec.ts b/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.spec.ts new file mode 100644 index 000000000..be17a85f6 --- /dev/null +++ b/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.spec.ts @@ -0,0 +1,156 @@ +import { signal } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { MatDialog } from '@angular/material/dialog'; +import { MatSnackBar } from '@angular/material/snack-bar'; +import { provideRouter, Router } from '@angular/router'; +import { Store } from '@ngrx/store'; +import { TranslateModule } from '@ngx-translate/core'; +import { Observable, of } from 'rxjs'; +import { PlaylistActions } from '@iptvnator/m3u-state'; +import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util'; +import { + DatabaseService, + PlaylistsService, + RuntimeCapabilitiesService, + SourceActivityService, +} from '@iptvnator/services'; +import { PlaylistMeta } from '@iptvnator/shared/interfaces'; +import { ConfirmDialogData, DialogService } from '@iptvnator/ui/components'; +import { PlaylistErrorViewComponent } from './playlist-error-view.component'; + +const XTREAM_PLAYLIST = { + _id: 'xtream-1', + title: 'Portal', + serverUrl: 'http://portal.test', + username: 'user', + password: 'pass', + importDate: '2026-09-30T10:00:00.000Z', +} as PlaylistMeta; + +describe('PlaylistErrorViewComponent removal', () => { + let activity: SourceActivityService; + let busyDuringDelete: boolean[]; + let deleteResult: Observable<{ success: boolean }>; + let playlistsService: { deletePlaylist: jest.Mock }; + let dialogService: { openConfirmDialog: jest.Mock }; + let store: { dispatch: jest.Mock }; + let snackBar: { open: jest.Mock }; + let navigate: jest.SpyInstance; + + function setup(): PlaylistErrorViewComponent { + busyDuringDelete = []; + deleteResult = of({ success: true }); + playlistsService = { + deletePlaylist: jest.fn((id: string) => { + busyDuringDelete.push(activity.isBusy(id)); + return deleteResult; + }), + }; + dialogService = { openConfirmDialog: jest.fn() }; + store = { dispatch: jest.fn() }; + snackBar = { open: jest.fn() }; + + TestBed.configureTestingModule({ + imports: [PlaylistErrorViewComponent, TranslateModule.forRoot()], + providers: [ + { + provide: PlaylistContextFacade, + useValue: { activePlaylist: signal(XTREAM_PLAYLIST) }, + }, + { provide: PlaylistsService, useValue: playlistsService }, + { + provide: DatabaseService, + useValue: { createOperationId: () => 'op-1' }, + }, + { + provide: RuntimeCapabilitiesService, + useValue: { supportsXtreamSqliteDataSource: true }, + }, + { provide: DialogService, useValue: dialogService }, + { provide: MatDialog, useValue: { open: jest.fn() } }, + { provide: MatSnackBar, useValue: snackBar }, + { provide: Store, useValue: store }, + provideRouter([]), + ], + }); + activity = TestBed.inject(SourceActivityService); + navigate = jest + .spyOn(TestBed.inject(Router), 'navigate') + .mockResolvedValue(true); + return TestBed.createComponent(PlaylistErrorViewComponent) + .componentInstance; + } + + function confirmRemoval(component: PlaylistErrorViewComponent) { + component.removeClicked(); + const data = dialogService.openConfirmDialog.mock + .calls[0][0] as ConfirmDialogData; + data.onConfirm(); + return data; + } + + it('asks with a named destructive action', () => { + const component = setup(); + component.removeClicked(); + + expect(dialogService.openConfirmDialog).toHaveBeenCalledWith( + expect.objectContaining({ + confirmLabel: 'HOME.PLAYLISTS.REMOVE', + tone: 'destructive', + }) + ); + }); + + it('removes through the shared delete action: busy source, Xtream cache, commit, toast', async () => { + const component = setup(); + confirmRemoval(component); + + await new Promise((resolve) => setTimeout(resolve)); + + // The worker delete (with an operation id) drops the Xtream cache. + expect(playlistsService.deletePlaylist).toHaveBeenCalledWith( + 'xtream-1', + expect.objectContaining({ operationId: 'op-1' }) + ); + // The source is marked busy while it is deleted, then released. + expect(busyDuringDelete).toEqual([true]); + expect(activity.isBusy('xtream-1')).toBe(false); + expect(store.dispatch).toHaveBeenCalledWith( + PlaylistActions.playlistRemovalCommitted({ + playlistId: 'xtream-1', + }) + ); + expect(snackBar.open).toHaveBeenCalledWith( + 'HOME.PLAYLISTS.REMOVE_DIALOG.SUCCESS', + undefined, + { duration: 2000 } + ); + expect(navigate).toHaveBeenCalledWith(['/']); + }); + + it('keeps the playlist and stays put when the delete fails', async () => { + const component = setup(); + deleteResult = new Observable((subscriber) => + subscriber.error(new Error('worker failed')) + ); + + await component.removePlaylist(XTREAM_PLAYLIST); + + expect(store.dispatch).not.toHaveBeenCalled(); + expect(snackBar.open).not.toHaveBeenCalled(); + expect(navigate).not.toHaveBeenCalled(); + expect(activity.isBusy('xtream-1')).toBe(false); + }); + + it('does not start a second removal while the source is busy', async () => { + const component = setup(); + const release = activity.begin(['xtream-1']); + + component.removeClicked(); + await component.removePlaylist(XTREAM_PLAYLIST); + + expect(dialogService.openConfirmDialog).not.toHaveBeenCalled(); + expect(playlistsService.deletePlaylist).not.toHaveBeenCalled(); + release(); + }); +}); diff --git a/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.ts b/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.ts index aa12df8d7..cae2b8f39 100644 --- a/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.ts +++ b/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.ts @@ -7,13 +7,19 @@ import { import { MatButtonModule } from '@angular/material/button'; import { MatDialog } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; +import { MatSnackBar } from '@angular/material/snack-bar'; import { Router, RouterLink } from '@angular/router'; import { Store } from '@ngrx/store'; import { TranslateModule, TranslateService } from '@ngx-translate/core'; +import { PlaylistActions } from '@iptvnator/m3u-state'; import { PlaylistInfoComponent } from '@iptvnator/playlist/shared/ui'; import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util'; +import { + PlaylistDeleteActionService, + SourceActivityService, +} from '@iptvnator/services'; +import { PlaylistMeta } from '@iptvnator/shared/interfaces'; import { DialogService } from '@iptvnator/ui/components'; -import { PlaylistActions } from '@iptvnator/m3u-state'; @Component({ selector: 'app-playlist-error-view', @@ -25,8 +31,11 @@ import { PlaylistActions } from '@iptvnator/m3u-state'; export class PlaylistErrorViewComponent { private dialog = inject(MatDialog); private dialogService = inject(DialogService); + private readonly activity = inject(SourceActivityService); private readonly playlistContext = inject(PlaylistContextFacade); + private readonly playlistDeleteAction = inject(PlaylistDeleteActionService); private router = inject(Router); + private readonly snackBar = inject(MatSnackBar); private store = inject(Store); private translate = inject(TranslateService); @@ -48,7 +57,10 @@ export class PlaylistErrorViewComponent { removeClicked(): void { const currentPlaylist = this.currentPlaylist(); - if (!currentPlaylist?._id) { + if ( + !currentPlaylist?._id || + this.activity.isBusy(currentPlaylist._id) + ) { return; } @@ -57,12 +69,38 @@ export class PlaylistErrorViewComponent { message: this.translate.instant( 'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE' ), - onConfirm: (): void => this.removePlaylist(currentPlaylist._id), + confirmLabel: this.translate.instant('HOME.PLAYLISTS.REMOVE'), + tone: 'destructive', + onConfirm: (): void => void this.removePlaylist(currentPlaylist), }); } - removePlaylist(playlistId: string): void { - this.store.dispatch(PlaylistActions.removePlaylist({ playlistId })); - this.router.navigate(['/']); + /** + * Same path as every other source removal: the shared delete action marks + * the source busy, lets persistence drop the Xtream cache and cleanups, + * and only a completed delete is committed to the store. + */ + async removePlaylist(playlist: PlaylistMeta): Promise { + if (this.activity.isBusy(playlist._id)) { + return; + } + + const deleted = + await this.playlistDeleteAction.deletePlaylist(playlist); + if (!deleted) { + return; + } + + this.store.dispatch( + PlaylistActions.playlistRemovalCommitted({ + playlistId: playlist._id, + }) + ); + this.snackBar.open( + this.translate.instant('HOME.PLAYLISTS.REMOVE_DIALOG.SUCCESS'), + undefined, + { duration: 2000 } + ); + void this.router.navigate(['/']); } } diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-clear-action.ts b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-clear-action.ts index b86701537..d32f8ce18 100644 --- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-clear-action.ts +++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-clear-action.ts @@ -67,6 +67,8 @@ export function createClearCollectionAction(options: { dialogService.openConfirmDialog({ title: translate.instant(titleKey, { type }), message: translate.instant(messageKey, { type }), + confirmLabel: translate.instant('CLEAR'), + tone: 'destructive', onConfirm: async () => { if (isFavorites) { await clearFavorites(itemsToRemove); diff --git a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.ts b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.ts index 2d17c5b04..10a2e0b68 100644 --- a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.ts +++ b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.ts @@ -747,6 +747,12 @@ export class VodDetailsRouteComponent implements OnInit, OnDestroy { message: this.translateService.instant( 'DOWNLOADS.CANCEL_CONFIRM_MESSAGE' ), + confirmLabel: this.translateService.instant( + 'DOWNLOADS.CANCEL_CONFIRM_TITLE' + ), + // "Cancel" next to "Cancel download" would read as the same action. + cancelLabel: this.translateService.instant('CLOSE'), + tone: 'destructive', onConfirm: () => void this.downloads.cancelActive(), }); } diff --git a/libs/shared/interfaces/src/index.ts b/libs/shared/interfaces/src/index.ts index 29853f3e1..6e8ee1abf 100644 --- a/libs/shared/interfaces/src/index.ts +++ b/libs/shared/interfaces/src/index.ts @@ -47,6 +47,7 @@ export * from './lib/portal-debug.interface'; export * from './lib/playlist-display-label.util'; export * from './lib/portal-playback.interface'; export * from './lib/provider-import-detection.util'; +export * from './lib/source-type-icons.util'; export * from './lib/provider-overview.util'; export * from './lib/random-id.util'; export * from './lib/recording-metadata.interface'; diff --git a/libs/shared/interfaces/src/lib/source-type-icons.util.spec.ts b/libs/shared/interfaces/src/lib/source-type-icons.util.spec.ts new file mode 100644 index 000000000..e5c056835 --- /dev/null +++ b/libs/shared/interfaces/src/lib/source-type-icons.util.spec.ts @@ -0,0 +1,43 @@ +import { + getPlaylistSourceIcon, + resolvePlaylistSourceIconKey, + SOURCE_TYPE_ICONS, +} from './source-type-icons.util'; + +describe('source type icons', () => { + it('never lets one icon stand for two providers', () => { + const byProvider = { + xtream: [SOURCE_TYPE_ICONS.xtream], + stalker: [SOURCE_TYPE_ICONS.stalker], + m3u: [ + SOURCE_TYPE_ICONS.m3u, + SOURCE_TYPE_ICONS['m3u-url'], + SOURCE_TYPE_ICONS['m3u-local'], + SOURCE_TYPE_ICONS['m3u-text'], + ], + }; + const owners = new Map(); + for (const [provider, icons] of Object.entries(byProvider)) { + for (const icon of icons) { + expect(owners.get(icon) ?? provider).toBe(provider); + owners.set(icon, provider); + } + } + }); + + it('does not reuse the Dashboard rail icon for a provider', () => { + expect(Object.values(SOURCE_TYPE_ICONS)).not.toContain('dashboard'); + }); + + it.each([ + [{ macAddress: '00:1A:79:00:00:01', url: 'http://portal' }, 'stalker'], + [{ serverUrl: 'http://xtream' }, 'xtream'], + [{ url: 'http://list.m3u' }, 'm3u-url'], + [{}, 'm3u-local'], + ] as const)('resolves %o to %s', (playlist, expected) => { + expect(resolvePlaylistSourceIconKey(playlist)).toBe(expected); + expect(getPlaylistSourceIcon(playlist)).toBe( + SOURCE_TYPE_ICONS[expected] + ); + }); +}); diff --git a/libs/shared/interfaces/src/lib/source-type-icons.util.ts b/libs/shared/interfaces/src/lib/source-type-icons.util.ts new file mode 100644 index 000000000..90084b579 --- /dev/null +++ b/libs/shared/interfaces/src/lib/source-type-icons.util.ts @@ -0,0 +1,50 @@ +import type { PlaylistMeta } from './playlist-meta.type'; + +/** + * One Material icon ligature per source type, used everywhere a source is + * shown: the add dialog, provider auto-detection, the Sources list and its + * filters, the playlist switcher, dashboard cards, the command palette and + * the reset summaries. A provider must look the same on every screen, and no + * icon may stand for two providers. + * + * `m3u` is the provider family (filters and summaries that count every M3U + * source); the other M3U keys name how a single playlist was added. Stored + * playlists cannot tell a local file from pasted text, so both render as + * `m3u-local`; only the add dialog and auto-detection show `m3u-text`. + */ +export const SOURCE_TYPE_ICONS = { + m3u: 'playlist_play', + 'm3u-url': 'link', + 'm3u-local': 'description', + 'm3u-text': 'subject', + xtream: 'cloud', + stalker: 'cast', +} as const; + +export type SourceTypeIconKey = keyof typeof SOURCE_TYPE_ICONS; + +export type PlaylistSourceIconKey = Extract< + SourceTypeIconKey, + 'm3u-url' | 'm3u-local' | 'xtream' | 'stalker' +>; + +export function resolvePlaylistSourceIconKey( + playlist: Pick +): PlaylistSourceIconKey { + if (playlist.macAddress) { + return 'stalker'; + } + if (playlist.serverUrl) { + return 'xtream'; + } + if (playlist.url) { + return 'm3u-url'; + } + return 'm3u-local'; +} + +export function getPlaylistSourceIcon( + playlist: Pick +): string { + return SOURCE_TYPE_ICONS[resolvePlaylistSourceIconKey(playlist)]; +} diff --git a/libs/ui/components/src/lib/channel-list-container/epg-mapping-dialog/epg-mapping-dialog.component.html b/libs/ui/components/src/lib/channel-list-container/epg-mapping-dialog/epg-mapping-dialog.component.html index e4be4b844..c6a8d16d3 100644 --- a/libs/ui/components/src/lib/channel-list-container/epg-mapping-dialog/epg-mapping-dialog.component.html +++ b/libs/ui/components/src/lib/channel-list-container/epg-mapping-dialog/epg-mapping-dialog.component.html @@ -59,7 +59,11 @@ @if (currentMapping()) { - } diff --git a/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.spec.ts b/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.spec.ts index 5efb3c49e..ed6e0b3f9 100644 --- a/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.spec.ts +++ b/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.spec.ts @@ -52,3 +52,49 @@ describe('ConfirmDialogComponent actions', () => { } ); }); + +describe('ConfirmDialogComponent labels and tone', () => { + async function render(data: Record) { + await TestBed.configureTestingModule({ + imports: [ + ConfirmDialogComponent, + NoopAnimationsModule, + TranslateModule.forRoot(), + ], + providers: [ + { + provide: MAT_DIALOG_DATA, + useValue: { + title: 'Remove playlist', + message: 'Delete it?', + confirmLabel: 'Remove playlist', + onConfirm: jest.fn(), + ...data, + }, + }, + { provide: MatDialogRef, useValue: { close: jest.fn() } }, + ], + }).compileComponents(); + const fixture = TestBed.createComponent(ConfirmDialogComponent); + fixture.detectChanges(); + const buttons = fixture.nativeElement.querySelectorAll( + 'button' + ) as NodeListOf; + return { cancel: buttons[0], confirm: buttons[1] }; + } + + it('names the action instead of answering "Yes", and cancels by default', async () => { + const { cancel, confirm } = await render({}); + + expect(confirm.textContent?.trim()).toBe('Remove playlist'); + // No translations are loaded, so the key is the rendered text. + expect(cancel.textContent?.trim()).toBe('CANCEL'); + expect(confirm.classList).not.toContain('app-destructive-button'); + }); + + it('styles destructive confirmations as destructive', async () => { + const { confirm } = await render({ tone: 'destructive' }); + + expect(confirm.classList).toContain('app-destructive-button'); + }); +}); diff --git a/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.ts b/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.ts index 28278b175..937c06e54 100644 --- a/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.ts +++ b/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.ts @@ -3,12 +3,25 @@ import { MatButtonModule } from '@angular/material/button'; import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; import { TranslateModule } from '@ngx-translate/core'; +/** + * `destructive` renders the confirm action with the app-wide error styling + * (`.app-destructive-button`). Use it whenever confirming removes or discards + * user data; Material's `warn` color input has no effect with the M3 theme. + */ +export type ConfirmDialogTone = 'default' | 'destructive'; + export interface ConfirmDialogData { title: string; message: string; width?: string; - confirmLabel?: string; + /** + * Translated verb that names the action ("Remove playlist", "Clear"). + * Required so a confirmation never falls back to an ambiguous "Yes". + */ + confirmLabel: string; + /** Translated dismiss label; defaults to "Cancel". */ cancelLabel?: string; + tone?: ConfirmDialogTone; /** Run the action in the dialog; only Close/backdrop/Escape dismiss it. */ keepOpenOnConfirm?: boolean; onConfirm: () => void; @@ -27,23 +40,25 @@ export interface ConfirmDialogData { @if (dialogData.keepOpenOnConfirm) { } @else { } @@ -56,4 +71,8 @@ export class ConfirmDialogComponent { constructor() { this.dialogData = this.data; } + + get isDestructive(): boolean { + return this.dialogData.tone === 'destructive'; + } } diff --git a/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.ts b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.ts index d9c15f75b..e00bd6fee 100644 --- a/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.ts +++ b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.ts @@ -9,6 +9,7 @@ import { import { toSignal } from '@angular/core/rxjs-interop'; import { startWith } from 'rxjs'; import { + getPlaylistSourceIcon, isStalkerAccountPlaylist, isXtreamAccountPlaylist, normalizeDashboardRailsSettings, @@ -286,11 +287,7 @@ export class WorkspaceDashboardRailsComponent { playlist.filename || this.t('WORKSPACE.DASHBOARD.UNTITLED_SOURCE'), subtitle: this.data.getPlaylistProvider(playlist), - icon: playlist.serverUrl - ? 'cloud' - : playlist.macAddress - ? 'cast' - : 'folder_open', + icon: getPlaylistSourceIcon(playlist), link: this.data.getPlaylistLink(playlist), actions: buildDashboardSourceActions( playlist, @@ -675,6 +672,8 @@ export class WorkspaceDashboardRailsComponent { message: this.translate.instant( 'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE' ), + confirmLabel: this.translate.instant('HOME.PLAYLISTS.REMOVE'), + tone: 'destructive', onConfirm: () => { void this.removePlaylist(playlist); }, diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/services/helpers/workspace-shell-command-builders.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/services/helpers/workspace-shell-command-builders.ts index ac158001f..6cd624198 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/services/helpers/workspace-shell-command-builders.ts +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/services/helpers/workspace-shell-command-builders.ts @@ -8,6 +8,7 @@ import { WorkspacePortalContext, WorkspaceShellRoute, } from '@iptvnator/workspace/shell/util'; +import { SOURCE_TYPE_ICONS } from '@iptvnator/shared/interfaces'; import { TranslateFn } from './workspace-shell-search-labels'; export interface CommandBuilderActions { @@ -275,7 +276,7 @@ export function getGlobalCommandDefinitions( { id: 'add-playlist-m3u', group: 'global', - icon: 'folder_open', + icon: SOURCE_TYPE_ICONS.m3u, labelKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_M3U_LABEL', descriptionKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_M3U_DESCRIPTION', @@ -286,7 +287,7 @@ export function getGlobalCommandDefinitions( { id: 'add-playlist-xtream', group: 'global', - icon: 'cloud', + icon: SOURCE_TYPE_ICONS.xtream, labelKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_XTREAM_LABEL', descriptionKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_XTREAM_DESCRIPTION', @@ -297,7 +298,7 @@ export function getGlobalCommandDefinitions( { id: 'add-playlist-stalker', group: 'global', - icon: 'cast', + icon: SOURCE_TYPE_ICONS.stalker, labelKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_STALKER_LABEL', descriptionKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_STALKER_DESCRIPTION', diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts index 86e3f2cbb..b11842096 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts +++ b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts @@ -14,6 +14,7 @@ import { } from '@iptvnator/m3u-state'; import { TranslatePipe } from '@ngx-translate/core'; import { WorkspaceShellContextDrawerService } from '@iptvnator/workspace/shell/util'; +import { SOURCE_TYPE_ICONS } from '@iptvnator/shared/interfaces'; type PlaylistFilterId = 'all' | 'm3u' | 'xtream' | 'stalker'; @@ -55,17 +56,17 @@ export class WorkspaceSourcesFiltersPanelComponent { }, { id: 'm3u', - icon: 'playlist_play', + icon: SOURCE_TYPE_ICONS.m3u, translationKey: 'HOME.PLAYLIST_TYPES.M3U', }, { id: 'xtream', - icon: 'cloud', + icon: SOURCE_TYPE_ICONS.xtream, translationKey: 'HOME.PLAYLIST_TYPES.XTREAM', }, { id: 'stalker', - icon: 'router', + icon: SOURCE_TYPE_ICONS.stalker, translationKey: 'HOME.PLAYLIST_TYPES.STALKER', }, ];