The loading placeholders for live channel rows were inconsistent and
visibly heavier than the real channel-list-item: each module rendered
its own skeleton with a colored card surface, larger padding/radius,
mismatched logo border-radius, and only a single tiny right-side dot
instead of the real 34×34 action buttons. Stalker had no initial-load
skeleton at all.
Extract a shared app-channel-list-item-skeleton that mirrors
channel-list-item 1:1 (transparent surface, 8/10/8/12 padding, 12px
radius, 44×44 logo with 10px radius, optional EPG progress placeholder,
0–3 button placeholders) plus a thin app-channel-list-skeleton wrapper
that renders N rows with deterministic width variance, and route every
live-tv loading state through it (m3u channel-list-loading-state,
xtream portal-channels-list, stalker live-stream-layout via a derived
isInitialChannelsLoading signal, and the unified favorites/recent
collection page). Drops the bespoke channel-skeleton-shimmer keyframes
in favor of the shared skeleton-shimmer animation.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Entire-Checkpoint: 58a2d50756dd
- Implemented a loading state for channel lists in various components, enhancing user experience during data fetching.
- Added `ChannelListLoadingStateComponent` to display loading skeletons for channels and groups.
- Updated `M3uWorkspaceRouteSession` to manage loading states more effectively when fetching playlists.
- Modified `VideoPlayerComponent`, `SidebarComponent`, and `ChannelListContainerComponent` to utilize the new loading state.
- Enhanced tests to cover new loading behaviors and ensure proper dispatching of loading actions.
feat: enhance EPG list component with channel icon fallback and scrolling behavior
style: update styles for EPG list and playlist item components for improved UI
fix: add selection state to playlist items in recent playlists component
Add a new standalone ContentHero component (template and TS) that
provides a cinematic hero section with backdrop, poster, title,
description, tags/meta/action slots, and a back button event emitter.
The component chooses backdrop or poster as the background, falls back
to a default poster image on load error, and exposes inputs for title,
description, posterUrl, and backdropUrl.
Introduce extensive cinematic styles for the detail view:
- define CSS custom properties for light and dark themes, poster size,
shadows, and color tokens
- implement gradient vignette, layout sizing, and theming via
:host and :host-context(.dark-theme)
- change container sizing behavior to full-height and hide overflow
These changes create a reusable hero UI and themed detail-page styles
to support a Netflix-style streaming detail experience.
Introduce a reusable AddPlaylistMenuComponent that provides a Material
menu with options to add playlists via file, URL, text, Xtream or Stalker
portal. Define a PlaylistType union and expose a playlistTypeSelected
output so parent components can react to the selected import type.
- Add component TypeScript with Angular metadata and required Material
imports.
- Add template with accessible menu items, icons, translation keys and
click handlers that emit the selected PlaylistType.
- Organize menu items with a divider to separate common file/URL/text
options from provider-specific imports.
This adds a focused UI building block for playlist import flows and
standardizes how import type selection is communicated to parent scopes.
Introduce a shared InjectionToken for OverlayRef used by the multi-EPG
overlay component and export it from the components module.
- Add overlay-ref.token.ts defining COMPONENT_OVERLAY_REF to provide
OverlayRef for dynamically created overlay components.
- Replace a locally created InjectionToken with an injected
COMPONENT_OVERLAY_REF in multi-epg-container.component to avoid
token duplication and ensure consistent DI across modules.
- Export the token from libs/ui/components/src/index.ts so other
consumers can import and use the same token.
This reduces duplicated token definitions, fixes DI inconsistencies,
and makes the overlay ref reusable by external components.
4gray