-
{{ displayName() }}
+
+
{{ displayName() }}
+ @if (catchupAvailable()) {
+
history
+
+
{{
+ catchupLabelKey() | translate: { days: catchupDays() }
+ }}
+ }
+
@if (showEpg()) {
@if (epgProgram(); as program) {
@@ -65,23 +82,11 @@
- @if (showProgramInfoButton() && showEpg() && epgProgram(); as program) {
-
- }
@if (showFavoriteButton()) {
}
+ @if (showProgramInfoButton() && showEpg()) {
+
+
+ }
}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
index 75c1faed8..877cd3a65 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
@@ -123,6 +123,13 @@
gap: 3px;
}
+.channel-name-row {
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
.channel-name {
min-width: 0;
overflow: hidden;
@@ -134,6 +141,27 @@
line-height: 1.2;
}
+.catchup-badge {
+ flex-shrink: 0;
+ width: 15px;
+ height: 15px;
+ font-size: 15px;
+ line-height: 15px;
+ opacity: 0.62;
+}
+
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
.epg-title {
min-width: 0;
overflow: hidden;
@@ -208,13 +236,20 @@
.action-buttons {
flex-shrink: 0;
display: flex;
+ flex-direction: column;
align-items: center;
- gap: 2px;
+ justify-content: center;
+ gap: 0;
margin-inline-start: auto;
+ .channel-list-item.compact & {
+ flex-direction: row;
+ gap: 2px;
+ }
+
button {
- width: 32px;
- height: 32px;
+ width: 28px;
+ height: 28px;
/* border-radius: 10px; */
color: inherit;
opacity: 0.76;
@@ -231,9 +266,19 @@
}
mat-icon {
- width: 20px;
- height: 20px;
- font-size: 20px;
+ width: 18px;
+ height: 18px;
+ font-size: 18px;
+ line-height: 18px;
+ }
+
+ /* Material keeps a 48px touch target on icon buttons; stacked 28px
+ buttons would overlap by 20px and the later sibling would steal
+ clicks from the lower third of the button above. Constrain the
+ target to the button bounds. */
+ button ::ng-deep .mat-mdc-button-touch-target {
+ width: 100%;
+ height: 100%;
}
}
@@ -326,3 +371,10 @@
.program-info-button {
padding: 0;
}
+
+/* Reserved slot: keeps the column geometry stable while the row has no
+ programme yet (or none at all), so the star never jumps. */
+.program-info-button.slot-empty {
+ visibility: hidden;
+ pointer-events: none;
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
index 9f1c3cfbc..628f1bace 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
@@ -98,6 +98,76 @@ describe('ChannelListItemComponent', () => {
).toBe(true);
});
+ it('stacks the favorite button above the reserved programme-info slot', () => {
+ const program: EpgProgram = {
+ start: '2026-04-05 05:30:00',
+ stop: '2026-04-05 06:00:00',
+ channel: 'channel-1',
+ title: 'Current Show',
+ desc: 'Current description',
+ category: null,
+ };
+ fixture.componentRef.setInput('name', 'Ordered Channel');
+ fixture.componentRef.setInput('showFavoriteButton', true);
+ fixture.componentRef.setInput('epgProgram', program);
+ fixture.detectChanges();
+
+ const buttons = Array.from(
+ fixture.nativeElement.querySelectorAll('.action-buttons button'),
+ (element: Element) => element.className
+ );
+ expect(buttons).toHaveLength(2);
+ expect(buttons[0]).toContain('favorite-button');
+ expect(buttons[1]).toContain('program-info-button');
+ expect(buttons[1]).not.toContain('slot-empty');
+ });
+
+ it('keeps an inert info slot while the row has no programme', () => {
+ fixture.componentRef.setInput('name', 'No EPG Yet');
+ fixture.componentRef.setInput('showFavoriteButton', true);
+ fixture.detectChanges();
+
+ // The slot must exist (reserving the geometry) but be inert, so the
+ // star above it never shifts when EPG data arrives later.
+ const slot = fixture.nativeElement.querySelector(
+ '.program-info-button'
+ );
+ expect(slot).not.toBeNull();
+ expect(slot.classList.contains('slot-empty')).toBe(true);
+ expect(slot.disabled).toBe(true);
+
+ slot.click();
+ expect(dialog.open).not.toHaveBeenCalled();
+ });
+
+ it('renders the catch-up badge only when catch-up is available', () => {
+ fixture.componentRef.setInput('name', 'Archive Channel');
+ fixture.detectChanges();
+
+ expect(
+ fixture.nativeElement.querySelector(
+ '[data-test-id="catchup-badge"]'
+ )
+ ).toBeNull();
+
+ fixture.componentRef.setInput('catchupAvailable', true);
+ fixture.componentRef.setInput('catchupDays', 7);
+ fixture.detectChanges();
+
+ const badge = fixture.nativeElement.querySelector(
+ '[data-test-id="catchup-badge"]'
+ );
+ expect(badge).not.toBeNull();
+ expect(badge.textContent).toContain('history');
+
+ // The icon is aria-hidden — the status must also exist as
+ // visually-hidden text for assistive technology.
+ const srText = fixture.nativeElement.querySelector(
+ '.channel-name-row .visually-hidden'
+ );
+ expect(srText?.textContent).toContain('CATCHUP_AVAILABLE');
+ });
+
it('shows the generic fallback icon when no logo is available', () => {
fixture.componentRef.setInput('name', 'Channel Without Logo');
fixture.componentRef.setInput('logo', '');
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
index 97f4f9132..1aa9beea3 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
@@ -57,6 +57,15 @@ export class ChannelListItemComponent {
readonly selected = input(false);
readonly showEpg = input(true);
readonly isRadio = input(false);
+ /** Shows the provider catch-up (archive) badge next to the channel name */
+ readonly catchupAvailable = input(false);
+ /** Archive window in days for the badge tooltip; 0 hides the day count */
+ readonly catchupDays = input(0);
+ readonly catchupLabelKey = computed(() =>
+ this.catchupDays() > 0
+ ? 'CHANNELS.CATCHUP_AVAILABLE_DAYS'
+ : 'CHANNELS.CATCHUP_AVAILABLE'
+ );
readonly epgProgram = input