From 23a18601197c42848e11242178a4b075753144eb Mon Sep 17 00:00:00 2001 From: 4gray <4gray@users.noreply.github.com> Date: Fri, 2 Oct 2026 20:36:16 +0200 Subject: [PATCH] fix(ui): destructive confirmations, verb labels and provider icons (#1783) * 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 * fix(ui): one provider icon per playlist row, imperative Korean remove label A restored Stalker or Xtream playlist can also carry a URL, and the row's independent checks then showed the M3U URL icon next to the provider icon. The row now switches on resolvePlaylistSourceIconKey(), the precedence every other surface uses, so each source shows exactly one icon. HOME.PLAYLISTS.REMOVE now names the confirm button and the row's delete tooltip; in Korean it read "the playlist has been removed". It now says "remove playlist", like every other locale. Co-Authored-By: Claude Opus 5.5 * fix(ui): keep the auto-refresh badge on playlist rows with one provider icon Showing one provider icon per row moved the auto-refresh badge into the M3U branches only, so a restored Stalker playlist with a URL and auto-refresh lost it although the URL is still re-fetched. The row now renders one icon container: the provider icon from the shared precedence, then the badge for any row with a URL or a local M3U, exactly the rows that showed it before. The Xtream portal-status dot, used without source health, keeps that corner. Co-Authored-By: Claude Opus 5.5 * fix(ui): let the playlist row's cancel action render in the error color The row's action buttons set `color: inherit`, and the selected row does so again with more specific selectors. Both beat Material's token-driven icon color, so the .app-destructive-button cancel action kept the row color (selection blue on the active row). Pin the cancel button to --mat-sys-error in both row states. The large-deletion Electron E2E now checks the cancel color in both themes; without this rule it reads rgb(47, 123, 255) instead of the error red. Co-Authored-By: Claude Opus 5.5 * test(ui): give the dialog service spec the now-required confirm labels ConfirmDialogData.confirmLabel became required, and the spec still built confirmations without one. Jest only transpiles, so the suite stayed green, but the "Typecheck Jest spec programs" CI step rejected it. Co-Authored-By: Claude Opus 5.5 --------- 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 | 23 ++- ...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/assets/i18n/ko.json | 2 +- 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 | 119 +++++++------ .../playlist-item.component.scss | 7 + .../playlist-item.component.spec.ts | 37 +++++ .../playlist-item/playlist-item.component.ts | 31 +++- .../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 +++- .../lib/confirm-dialog/dialog.service.spec.ts | 4 + .../workspace-dashboard-rails.component.ts | 9 +- .../workspace-shell-command-builders.ts | 7 +- ...rkspace-sources-filters-panel.component.ts | 7 +- 54 files changed, 730 insertions(+), 161 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..2f0cc03f0 100644 --- a/apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts +++ b/apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts @@ -11,6 +11,7 @@ import { waitForXtreamCatalog, xtreamMockServer, } from './electron-test-fixtures'; +import { applyTheme } from './theme-contrast'; const stressPortalName = 'Stress Xtream Portal'; const stressXtreamUsername = 'stress'; @@ -292,7 +293,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, { @@ -304,7 +305,25 @@ test.describe('Electron Xtream Responsiveness', () => { await expect( playlistRow.locator('.busy-state__message') ).toBeVisible({ timeout: 20000 }); - await expect(playlistRow.locator('.cancel-btn')).toBeVisible(); + const cancel = playlistRow.locator('.cancel-btn'); + await expect(cancel).toBeVisible(); + // The row's action buttons inherit its color; the cancel action + // must still read as destructive on the selected row. + for (const theme of ['light', 'dark'] as const) { + await applyTheme(app.mainWindow, theme); + const error = await app.mainWindow.evaluate(() => { + const probe = document.createElement('div'); + probe.style.color = 'var(--mat-sys-error)'; + document.body.appendChild(probe); + const color = getComputedStyle(probe).color; + probe.remove(); + return color; + }); + expect( + await cancel.evaluate((el) => getComputedStyle(el).color), + `cancel color in ${theme} theme` + ).toBe(error); + } await waitForDbOperationEvent(app.mainWindow, { operation: 'delete-playlist', 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/ui/components/src/lib/confirm-dialog/dialog.service.spec.ts b/libs/ui/components/src/lib/confirm-dialog/dialog.service.spec.ts index 348d3ec79..3dda815f8 100644 --- a/libs/ui/components/src/lib/confirm-dialog/dialog.service.spec.ts +++ b/libs/ui/components/src/lib/confirm-dialog/dialog.service.spec.ts @@ -33,6 +33,7 @@ describe('DialogService', () => { service.openConfirmDialog({ title: 'Remove', message: 'Confirm removal?', + confirmLabel: 'Remove playlist', onConfirm: jest.fn(), }); @@ -57,6 +58,7 @@ describe('DialogService', () => { service.openConfirmDialog({ title: 'Refresh Xtream Playlist', message: 'Confirm refresh?', + confirmLabel: 'Refresh playlist', width: '400px', onConfirm: jest.fn(), }); @@ -78,6 +80,7 @@ describe('DialogService', () => { service.openConfirmDialog({ title: 'Remove', message: 'Confirm removal?', + confirmLabel: 'Remove playlist', onConfirm, }); @@ -89,6 +92,7 @@ describe('DialogService', () => { service.openConfirmDialog({ title: 'Recovery', message: 'Path', + confirmLabel: 'Copy path', keepOpenOnConfirm: true, onConfirm, }); 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', }, ];