Update info-overlay template to read simplified EPG fields and
avoid indexing into arrays for title, icon and description so bindings
are resilient and clearer:
- Use epgProgram?.iconUrl instead of epgProgram?.icon?.[0]?.src
- Use epgProgram?.title instead of epgProgram?.title?.[0]?.value
- Use epgProgram?.desc instead of epgProgram?.desc?.[0]?.value
- Guard description rendering with epgProgram?.desc
Adjust multi-epg header layout and add search UI styles to support
desktop window chrome and draggable regions:
- Add left padding to #epg-navigation for macOS traffic lights, enable
backdrop drag via -webkit-app-region: drag and set z-index to keep
header above content.
- Exclude interactive elements (buttons, search inputs) from drag by
applying -webkit-app-region: no-drag to maintain native interactions.
- Add extensive styles for a channel search container (search input,
icons, clear button, filter count, animations) and scaffold a program
search container.
These changes improve robustness of EPG data rendering and add styled
search controls while ensuring proper window dragging behavior on
desktop builds.
Revamp the Multi-EPG component stylesheet to introduce a polished,
broadcast-control-room inspired dark theme and improved layout
styling.
- Add Google fonts (Outfit, JetBrains Mono) for a clean UI and mono
date display.
- Introduce color variables, gradients and accents for consistent
theming and easier maintenance.
- Rework base container (.parent) with subtle grid overlay and updated
typography.
- Implement a frosted glass navigation bar (#epg-navigation) with
blur, glow, and accessible button styles.
- Add today-date styling using a monospace font and glowing accent.
- Expand channels column width, update background, borders, shadows,
and hover transitions for clearer channel separation.
- Replace many hard-coded colors with variables and add transitions
for smoother interactions.
- Add utility classes for navigation buttons and improved disabled/
hover states.
These changes improve visual hierarchy, accessibility, and maintainabiity
of the EPG UI while setting up a consistent design system for further
enhancements.
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.
Convert channel structures to a consistent and adapt templates
to read new safely.
- Add accessors in EListComponent:
- getChannelName(channel) returns first displayName or ''
- getChannelIcon(channel) returns first icon.src or ''
These helpers make reading channel metadata robust against missing or
differently-shaped data.
- Build channel object with normalized fields in ngOnInit:
- set id, displayName[], url[], icon[] rather than raw name/icon
- ensure fallbacks to empty strings/arrays to avoid undefined values
- Update InfoOverlay template to safely access program fields:
- use epgProgram?.icon?.[0]?.src for image source
- use epgProgram?.title?.[0]?.value and epgProgram?.desc?.[0]?.value
- Fix MultiEpg templates for property access and tracking:
- replace invalid template boolean expressions with safe non-null
assertion where needed ((hourWidth$ | async)! ...)
- use track item.id instead of track $any(item).channel
- call getChannelIcon/getChannelName and render icon/name via helpers
These changes prevent runtime errors when fields are missing or have
array-wrapped values, improve template safety, and standardize channel
data handling across the EPG UI.
4gray