From 4c6e65be9b0e5bd59736ce064f246233a778cfe5 Mon Sep 17 00:00:00 2001 From: 4gray Date: Sun, 19 Apr 2026 22:31:45 +0200 Subject: [PATCH] feat: implement favorites channel sorting functionality and UI updates Entire-Checkpoint: c6e522b4276c --- .../global-favorites-list.component.html | 4 +- .../global-favorites-list.component.ts | 28 +++- .../unified-collection-page.component.html | 47 ++++++- .../unified-collection-page.component.scss | 13 +- .../unified-collection-page.component.ts | 123 ++++++++++++++++-- .../unified-live-tab.component.html | 66 +++++----- .../unified-live-tab.component.scss | 105 +++++---------- .../unified-live-tab.component.ts | 23 ++-- libs/portal/shared/util/src/index.ts | 1 + .../util/src/lib/favorites-channel-sort.ts | 90 +++++++++++++ 10 files changed, 355 insertions(+), 145 deletions(-) create mode 100644 libs/portal/shared/util/src/lib/favorites-channel-sort.ts 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 17eecd7d8..675ee1fdb 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)) { (null); readonly searchTermInput = input(''); readonly draggable = input(true); + readonly sortMode = input( + DEFAULT_FAVORITES_CHANNEL_SORT_MODE + ); readonly channelSelected = output(); readonly channelsReordered = output(); readonly favoriteToggled = output(); + readonly isCustomSort = computed(() => this.sortMode() === 'custom'); + readonly canDragDrop = computed( + () => this.draggable() && this.isCustomSort() && !this.hasSearchTerm() + ); + readonly hasSearchTerm = computed( () => this.searchTermInput().trim().length > 0 ); @@ -59,7 +72,12 @@ export class GlobalFavoritesListComponent { ? channels.filter((ch) => ch.name.toLowerCase().includes(term)) : channels; - return filtered.map((ch) => { + const sorted = sortFavoriteChannelItems(filtered, this.sortMode(), { + getName: (ch) => ch.name, + getAddedAt: (ch) => ch.addedAt, + }); + + return sorted.map((ch) => { const epgKey = ch.tvgId?.trim() || ch.name?.trim(); const currentEpgProgram = epgKey ? (epgMap.get(epgKey) ?? null) @@ -81,7 +99,7 @@ export class GlobalFavoritesListComponent { } onDrop(event: CdkDragDrop): void { - if (this.hasSearchTerm()) { + if (!this.canDragDrop()) { return; } 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 adbd4f578..b87ddad80 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 @@ -58,6 +58,36 @@
{{ title() | translate }} + @if (showFavSortButton()) { + + + @for (option of favSortOptions; track option.mode) { + + } + + } +
@if (showContentToggle()) { } - @if (mode() === 'recent' && allItems().length > 0) { + @if (currentTypeItems().length > 0) {
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.scss b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.scss index 8ca76c9e3..83f4e68bd 100644 --- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.scss +++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.scss @@ -1,71 +1,42 @@ -:host { - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - overflow: hidden; -} +@use '../../styles/portal-layout' as portal; -.itv-container { - display: grid; - grid-template-columns: auto 1fr 1fr; - grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); - grid-template-areas: - 'sidebar video-player video-player' - 'sidebar epg epg'; - height: 100%; -} +@include portal.live-layout; -.itv-container--radio { - grid-template-columns: auto minmax(0, 1fr); - grid-template-rows: minmax(0, 1fr); - grid-template-areas: 'sidebar video-player'; -} - -.itv-container--external { - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: 1fr; - grid-template-areas: 'sidebar epg'; - height: 100%; - - .epg { - border-top: none; +.sidebar { + > app-global-favorites-list { + flex: 1; + min-height: 0; + overflow: hidden; } } -.full-list { - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - overflow: hidden; -} +.content-container { + background: var(--mat-sys-surface); -.sidebar { - grid-area: sidebar; - width: 360px; - min-width: 250px; - max-width: 600px; - flex-shrink: 0; - position: relative; - border-right: 1px solid var(--mat-sys-outline-variant); - display: flex; - flex-direction: column; - overflow: hidden; + &:has(> app-portal-empty-state) { + align-items: center; + justify-content: center; + } } .video-player { - grid-area: video-player; - min-height: 0; - overflow: hidden; + background: #000; display: flex; flex-direction: column; -} -.video-player--radio { - position: relative; - background: var(--mat-sys-surface); + &--radio { + position: relative; + background: var(--mat-sys-surface); + } + + > app-vjs-player, + > app-html-video-player, + > app-art-player, + > app-audio-player { + flex: 1; + min-height: 0; + display: block; + } } .player-toolbar { @@ -108,20 +79,9 @@ backdrop-filter: blur(12px); } -.video-player > app-vjs-player, -.video-player > app-html-video-player, -.video-player > app-art-player, -.video-player > app-audio-player { - flex: 1; - min-height: 0; - display: block; -} - .epg { - grid-area: epg; - min-height: 0; - overflow: hidden; border-top: 1px solid var(--mat-sys-outline-variant); + background: var(--mat-sys-surface); display: flex; flex-direction: column; } @@ -132,9 +92,10 @@ overflow: hidden; display: flex; flex-direction: column; -} -.epg-content > app-epg-view { - flex: 1; - min-height: 0; + > app-epg-view, + > app-epg-list { + flex: 1; + min-height: 0; + } } diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.ts b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.ts index 369f8cc88..e742fa4b7 100644 --- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.ts +++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.ts @@ -12,8 +12,11 @@ import { import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { TranslatePipe } from '@ngx-translate/core'; import { isM3uCatchupPlaybackSupported } from 'm3u-utils'; import { + DEFAULT_FAVORITES_CHANNEL_SORT_MODE, + FavoritesChannelSortMode, matchesOpenLiveCollectionItem, OpenLiveCollectionItemState, PORTAL_PLAYER, @@ -25,6 +28,7 @@ import { } from '@iptvnator/portal/shared/util'; import { EpgListComponent } from '@iptvnator/ui/epg'; import { GlobalFavoritesListComponent } from '../global-favorites-list/global-favorites-list.component'; +import { PortalEmptyStateComponent } from '../portal-empty-state/portal-empty-state.component'; import { AudioPlayerComponent, ArtPlayerComponent, @@ -51,7 +55,9 @@ import { EpgViewComponent } from 'shared-portals'; MatButtonModule, MatIconModule, MatProgressSpinnerModule, + PortalEmptyStateComponent, ResizableDirective, + TranslatePipe, VjsPlayerComponent, ], }) @@ -60,6 +66,9 @@ export class UnifiedLiveTabComponent { readonly mode = input<'favorites' | 'recent'>('favorites'); readonly searchTerm = input(''); readonly autoOpenItem = input(null); + readonly sortMode = input( + DEFAULT_FAVORITES_CHANNEL_SORT_MODE + ); readonly removeItem = output(); readonly reorderItems = output(); @@ -118,15 +127,6 @@ export class UnifiedLiveTabComponent { readonly shouldUseInlinePlayer = computed(() => { return this.isRadioSelection() || this.isEmbeddedPlayer(); }); - readonly layoutClass = computed(() => { - if (this.isRadioSelection()) { - return 'itv-container itv-container--radio'; - } - - return this.shouldUseInlinePlayer() - ? 'itv-container' - : 'itv-container--external'; - }); readonly activeChannelForOverlay = computed((): Channel | undefined => { const detail = this.activeDetail(); @@ -232,10 +232,9 @@ export class UnifiedLiveTabComponent { const item = this.items().find( (candidate) => candidate.uid === channel.uid ); - if (!item) { - return; + if (item) { + await this.activateItem(item); } - await this.activateItem(item); } onFavoriteToggled(channel: UnifiedFavoriteChannel): void { diff --git a/libs/portal/shared/util/src/index.ts b/libs/portal/shared/util/src/index.ts index 99d5e3fd1..2f17b0643 100644 --- a/libs/portal/shared/util/src/index.ts +++ b/libs/portal/shared/util/src/index.ts @@ -1,5 +1,6 @@ export * from './lib/logger'; export * from './lib/channel-sort'; +export * from './lib/favorites-channel-sort'; export * from './lib/portal-catalog-detail'; export * from './lib/portal-catalog-facade'; export * from './lib/portal-external-playback'; diff --git a/libs/portal/shared/util/src/lib/favorites-channel-sort.ts b/libs/portal/shared/util/src/lib/favorites-channel-sort.ts new file mode 100644 index 000000000..2f946c7ed --- /dev/null +++ b/libs/portal/shared/util/src/lib/favorites-channel-sort.ts @@ -0,0 +1,90 @@ +const FAVORITES_SORT_COLLATOR = new Intl.Collator(undefined, { + numeric: true, + sensitivity: 'base', +}); + +export type FavoritesChannelSortMode = + | 'custom' + | 'name-asc' + | 'name-desc' + | 'date-desc'; + +export const DEFAULT_FAVORITES_CHANNEL_SORT_MODE: FavoritesChannelSortMode = + 'custom'; + +export const FAVORITES_CHANNEL_SORT_STORAGE_KEY = + 'favorites-channel-sort-mode'; + +export function isFavoritesChannelSortMode( + value: unknown +): value is FavoritesChannelSortMode { + return ( + value === 'custom' || + value === 'name-asc' || + value === 'name-desc' || + value === 'date-desc' + ); +} + +export function restoreFavoritesChannelSortMode( + storageKey: string = FAVORITES_CHANNEL_SORT_STORAGE_KEY, + fallback: FavoritesChannelSortMode = DEFAULT_FAVORITES_CHANNEL_SORT_MODE +): FavoritesChannelSortMode { + const storedValue = localStorage.getItem(storageKey); + return isFavoritesChannelSortMode(storedValue) ? storedValue : fallback; +} + +export function persistFavoritesChannelSortMode( + mode: FavoritesChannelSortMode, + storageKey: string = FAVORITES_CHANNEL_SORT_STORAGE_KEY +): void { + localStorage.setItem(storageKey, mode); +} + +export function getFavoritesChannelSortModeTranslationKey( + mode: FavoritesChannelSortMode +): string { + switch (mode) { + case 'name-asc': + return 'WORKSPACE.SORT_NAME_ASC'; + case 'name-desc': + return 'WORKSPACE.SORT_NAME_DESC'; + case 'date-desc': + return 'WORKSPACE.SORT_DATE_DESC'; + default: + return 'WORKSPACE.SORT_CUSTOM'; + } +} + +export function sortFavoriteChannelItems( + items: readonly T[], + mode: FavoritesChannelSortMode, + accessors: { + getName: (item: T) => string | null | undefined; + getAddedAt?: (item: T) => string | null | undefined; + } +): readonly T[] { + if (mode === 'custom') { + return items; + } + + if (mode === 'date-desc') { + const getAddedAt = accessors.getAddedAt; + if (!getAddedAt) { + return items; + } + return [...items].sort((a, b) => { + const timeA = Date.parse(getAddedAt(a) ?? '') || 0; + const timeB = Date.parse(getAddedAt(b) ?? '') || 0; + return timeB - timeA; + }); + } + + return [...items].sort((a, b) => { + const result = FAVORITES_SORT_COLLATOR.compare( + accessors.getName(a) ?? '', + accessors.getName(b) ?? '' + ); + return mode === 'name-asc' ? result : -result; + }); +}