From d85ef8989326620371b507ca4e810d89c7b94ef8 Mon Sep 17 00:00:00 2001 From: 4gray Date: Thu, 26 Mar 2026 19:07:01 +0100 Subject: [PATCH] feat: enhance global favorites list and unified collection components with draggable functionality and improved layout Entire-Checkpoint: 56d3e3141f61 --- .../global-favorites-list.component.html | 4 +- .../global-favorites-list.component.ts | 1 + .../unified-collection-page.component.html | 96 +++++++++++-------- .../unified-collection-page.component.scss | 17 ++++ .../unified-collection-page.component.ts | 12 +++ .../unified-live-tab.component.html | 2 + .../workspace-shell-header.component.html | 13 --- .../workspace-shell-header.component.ts | 6 -- .../workspace-shell.component.html | 2 - 9 files changed, 91 insertions(+), 62 deletions(-) diff --git a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html index 94a4ec7f5..17eecd7d8 100644 --- a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html +++ b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html @@ -1,7 +1,7 @@
@if (enrichedChannels().length === 0) { @@ -32,7 +32,7 @@ @for (ch of enrichedChannels(); track trackByUid($index, ch)) { (0); readonly activeUid = input(null); readonly searchTermInput = input(''); + readonly draggable = input(true); readonly channelSelected = output(); readonly channelsReordered = output(); diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.html b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.html index 4c0d73e59..673fa4340 100644 --- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.html +++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.html @@ -1,6 +1,10 @@ @if (isLoading()) {
{{ title() | translate }} +
+ + +
@if (selectedContentType() === 'live') {
@@ -43,50 +47,64 @@
{{ title() | translate }} - @if (showContentToggle()) { +
+ @if (showContentToggle()) { + + @if (hasLive()) { + + {{ 'PORTALS.LIVE_TV' | translate }} + + } + @if (hasMovies()) { + + {{ 'PORTALS.MOVIES' | translate }} + + } + @if (hasSeries()) { + + {{ 'PORTALS.SERIES' | translate }} + + } + + } + - @if (hasLive()) { - - {{ 'PORTALS.LIVE_TV' | translate }} - - } - @if (hasMovies()) { - - {{ 'PORTALS.MOVIES' | translate }} - - } - @if (hasSeries()) { - - {{ 'PORTALS.SERIES' | translate }} - - } + + playlist_play + {{ + 'PORTALS.THIS_PLAYLIST' | translate + }} + + + public + {{ + 'PORTALS.ALL_PLAYLISTS' | translate + }} + - } - - - playlist_play - {{ - 'PORTALS.THIS_PLAYLIST' | translate - }} - - - public - {{ - 'PORTALS.ALL_PLAYLISTS' | translate - }} - - + @if (mode() === 'recent' && allItems().length > 0) { + + } +
@switch (selectedContentType()) { diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss index d5accac09..26bec9df4 100644 --- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss +++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss @@ -39,6 +39,23 @@ margin-right: auto; } +.collection-header-toggles { + display: flex; + align-items: center; + gap: 12px; +} + +.toggle-placeholder { + height: 43px; + width: 120px; + border-radius: 18px; + background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); + + &--scope { + width: 200px; + } +} + .content-toggle, .scope-toggle { .toggle-label { diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.ts b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.ts index 7932e1d3d..3b5336af2 100644 --- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.ts +++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.ts @@ -9,7 +9,9 @@ import { signal, } from '@angular/core'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatIconButton } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; +import { MatTooltip } from '@angular/material/tooltip'; import { ActivatedRoute } from '@angular/router'; import { TranslatePipe } from '@ngx-translate/core'; import { @@ -32,7 +34,9 @@ import { UnifiedGridTabComponent } from './unified-grid-tab.component'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [ MatButtonToggleModule, + MatIconButton, MatIconModule, + MatTooltip, TranslatePipe, UnifiedGridTabComponent, UnifiedLiveTabComponent, @@ -151,6 +155,14 @@ export class UnifiedCollectionPageComponent implements OnInit { ); } + async clearAllRecent(): Promise { + await this.recentData.clearRecentItems( + this.scope(), + this.playlistId() + ); + this.allItems.set([]); + } + async onReorder(items: UnifiedCollectionItem[]): Promise { const nonLive = this.allItems().filter( (i) => i.contentType !== 'live' diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.html b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.html index 1b8350263..0e7e2de2e 100644 --- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.html +++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.html @@ -18,6 +18,7 @@ [progressTick]="progressTick()" [activeUid]="activeUid()" [searchTermInput]="searchTerm()" + [draggable]="mode() === 'favorites'" (channelSelected)="onChannelSelected($event)" (channelsReordered)="onReorder($event)" (favoriteToggled)="onFavoriteToggled($event)" @@ -97,6 +98,7 @@ [progressTick]="progressTick()" [activeUid]="activeUid()" [searchTermInput]="searchTerm()" + [draggable]="mode() === 'favorites'" (channelSelected)="onChannelSelected($event)" (channelsReordered)="onReorder($event)" (favoriteToggled)="onFavoriteToggled($event)" diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html index 00917cd2c..dfd992a4f 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html @@ -101,18 +101,5 @@ download } - @if (headerBulkAction(); as action) { - - - }
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts index ba9de51b5..eed666c2e 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts @@ -16,7 +16,6 @@ import { PlaylistType, } from '@iptvnator/playlist/shared/ui'; import { WorkspaceHeaderAction } from '@iptvnator/portal/shared/util'; -import { WorkspaceHeaderBulkAction } from '../../services/workspace-shell.facade'; @Component({ selector: 'app-workspace-shell-header', @@ -49,7 +48,6 @@ export class WorkspaceShellHeaderComponent { readonly headerShortcut = input(null); readonly isElectron = input(false); readonly isDownloadsView = input(false); - readonly headerBulkAction = input(null); readonly searchChanged = output(); readonly searchSubmitted = output(); @@ -58,7 +56,6 @@ export class WorkspaceShellHeaderComponent { readonly globalFavoritesRequested = output(); readonly headerShortcutRequested = output(); readonly downloadsRequested = output(); - readonly headerBulkActionRequested = output(); readonly playlistInfoRequested = output(); readonly accountInfoRequested = output(); @@ -100,7 +97,4 @@ export class WorkspaceShellHeaderComponent { this.downloadsRequested.emit(); } - onHeaderBulkActionRequested(): void { - this.headerBulkActionRequested.emit(); - } } diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html index d82c90191..e709eb88f 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html @@ -52,7 +52,6 @@ [headerShortcut]="facade.headerShortcut()" [isElectron]="facade.isElectron" [isDownloadsView]="facade.isDownloadsView()" - [headerBulkAction]="facade.headerBulkAction()" (searchChanged)="facade.onSearchInput($event)" (searchSubmitted)="facade.onSearchEnter($event)" (commandPaletteRequested)="facade.openCommandPalette()" @@ -60,7 +59,6 @@ (globalFavoritesRequested)="facade.navigateToGlobalFavorites()" (headerShortcutRequested)="facade.runHeaderShortcut()" (downloadsRequested)="facade.openDownloadsShortcut()" - (headerBulkActionRequested)="facade.runHeaderBulkAction()" (playlistInfoRequested)="facade.openPlaylistInfo()" (accountInfoRequested)="facade.openAccountInfo()" />