feat: implement Stalker portal normalization and watchdog functionality in playlists and session services

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

libs/services/src/lib/playlists.service.ts

@@ -102,7 +102,8 @@ export class PlaylistsService {
         playlist: Partial<Playlist> & { _id?: string; id?: string }
     ): Playlist {
         const id = String(playlist._id ?? playlist.id ?? '');
-        return {
+        return this.normalizeStalkerPortalFlags({
+            ...playlist,
             _id: id,
             title: playlist.title ?? '',
             count: Number(playlist.count ?? 0),
@@ -130,6 +131,29 @@ export class PlaylistsService {
             stalkerDeviceId2: playlist.stalkerDeviceId2,
             stalkerSignature1: playlist.stalkerSignature1,
             stalkerSignature2: playlist.stalkerSignature2,
+            isFullStalkerPortal: playlist.isFullStalkerPortal,
+            stalkerToken: playlist.stalkerToken,
+            stalkerAccountInfo: playlist.stalkerAccountInfo,
+        } as Playlist);
+    }
+
+    /**
+     * Full Stalker portals (e.g. Ministra) require handshake/token auth.
+     * Infer the mode from URL when legacy records are missing explicit flag.
+     */
+    private normalizeStalkerPortalFlags(playlist: Playlist): Playlist {
+        if (!playlist?.macAddress || playlist.isFullStalkerPortal !== undefined) {
+            return playlist;
+        }
+
+        const portalUrl = playlist.portalUrl ?? playlist.url ?? '';
+        const isFullPortal =
+            portalUrl.includes('/stalker_portal') ||
+            portalUrl.includes('/server/load.php');
+
+        return {
+            ...playlist,
+            isFullStalkerPortal: isFullPortal,
         };
     }
 
@@ -153,7 +177,7 @@ export class PlaylistsService {
                 const playlists = await window.electron.dbGetAppPlaylists();
                 return (playlists as Playlist[]).map(
                     ({ playlist, items, header, ...rest }) => ({
-                        ...rest,
+                        ...this.normalizeStalkerPortalFlags(rest as Playlist),
                     })
                 );
             });
@@ -162,7 +186,7 @@ export class PlaylistsService {
         return this.dbService.getAll<Playlist>(DbStores.Playlists).pipe(
             map((data) =>
                 data.map(({ playlist, items, header, ...rest }) => ({
-                    ...rest,
+                    ...this.normalizeStalkerPortalFlags(rest as Playlist),
                 }))
             )
         );
@@ -586,7 +610,10 @@ export class PlaylistsService {
         if (this.isElectronStorageAvailable) {
             return this.runOnSqlite(
                 async () =>
-                    (await window.electron.dbGetAppPlaylists()) as Playlist[]
+                    ((await window.electron.dbGetAppPlaylists()) as Playlist[])
+                        .map((playlist) =>
+                            this.normalizeStalkerPortalFlags(playlist)
+                        )
             );
         }
 

libs/services/src/lib/stalker-session.service.ts

@@ -41,6 +41,7 @@ function generateRandom(): string {
  * Constant value for consistency across all sessions
  */
 export const STALKER_SERIAL_NUMBER = 'BEDACD4569BAF';
+const STALKER_WATCHDOG_INTERVAL_MS = 25_000;
 
 export interface StalkerHandshakeResponse {
     js: {
@@ -87,6 +88,10 @@ export class StalkerSessionService {
         string,
         Promise<{ token: string; serialNumber?: string }>
     >();
+    private watchdogIntervals = new Map<string, ReturnType<typeof setInterval>>();
+    private watchdogPlaylists = new Map<string, Playlist>();
+    private watchdogInFlight = new Set<string>();
+    private activeWatchdogPlaylistId: string | null = null;
 
     /**
      * Generates a consistent 64-character device ID from MAC address
@@ -138,6 +143,105 @@ export class StalkerSessionService {
         this.tokenCache.delete(playlistId);
     }
 
+    /**
+     * Sets which playlist should receive periodic watchdog pings.
+     * This keeps some Ministra/Stalker sessions alive for live playback.
+     */
+    setActiveWatchdogPlaylist(playlist?: Playlist | null): void {
+        const nextPlaylistId = playlist?._id ?? null;
+
+        if (
+            this.activeWatchdogPlaylistId &&
+            this.activeWatchdogPlaylistId !== nextPlaylistId
+        ) {
+            this.stopWatchdog(this.activeWatchdogPlaylistId);
+        }
+
+        this.activeWatchdogPlaylistId = nextPlaylistId;
+
+        if (
+            !playlist ||
+            !playlist.isFullStalkerPortal ||
+            !playlist.portalUrl ||
+            !playlist.macAddress
+        ) {
+            if (nextPlaylistId) {
+                this.stopWatchdog(nextPlaylistId);
+            }
+            return;
+        }
+
+        this.startWatchdog(playlist);
+    }
+
+    private startWatchdog(playlist: Playlist): void {
+        const playlistId = playlist._id;
+        this.watchdogPlaylists.set(playlistId, playlist);
+
+        if (this.watchdogIntervals.has(playlistId)) {
+            return;
+        }
+
+        void this.sendWatchdogPing(playlistId, '1');
+
+        const intervalId = setInterval(() => {
+            void this.sendWatchdogPing(playlistId, '0');
+        }, STALKER_WATCHDOG_INTERVAL_MS);
+
+        this.watchdogIntervals.set(playlistId, intervalId);
+    }
+
+    private stopWatchdog(playlistId: string): void {
+        const intervalId = this.watchdogIntervals.get(playlistId);
+        if (intervalId) {
+            clearInterval(intervalId);
+            this.watchdogIntervals.delete(playlistId);
+        }
+        this.watchdogPlaylists.delete(playlistId);
+        this.watchdogInFlight.delete(playlistId);
+    }
+
+    private async sendWatchdogPing(
+        playlistId: string,
+        init: '0' | '1'
+    ): Promise<void> {
+        if (this.watchdogInFlight.has(playlistId)) {
+            return;
+        }
+
+        const playlist = this.watchdogPlaylists.get(playlistId);
+        if (
+            !playlist ||
+            !playlist.portalUrl ||
+            !playlist.macAddress ||
+            !playlist.isFullStalkerPortal
+        ) {
+            this.stopWatchdog(playlistId);
+            return;
+        }
+
+        this.watchdogInFlight.add(playlistId);
+        try {
+            await this.makeAuthenticatedRequest(
+                playlist,
+                {
+                    type: 'watchdog',
+                    action: 'get_events',
+                    event_active_id: '0',
+                    cur_play_type: '0',
+                    init,
+                    JsHttpRequest: '1-xml',
+                },
+                false
+            );
+        } catch (error) {
+            // Keep failures non-fatal; next interval can recover after token refresh.
+            console.warn('[StalkerSession] Watchdog ping failed:', error);
+        } finally {
+            this.watchdogInFlight.delete(playlistId);
+        }
+    }
+
     /**
      * Performs handshake to get a session token for a full stalker portal
      * Returns both the token and the random value for use in subsequent requests
@@ -156,8 +260,6 @@ export class StalkerSessionService {
             JsHttpRequest: '1-xml',
         };
 
-        const fullUrl = `${portalUrl}?type=stb&action=handshake&token=&prehash=${prehash}&JsHttpRequest=1-xml`;
-
         try {
             const response: StalkerHandshakeResponse =
                 await this.dataService.sendIpcEvent(STALKER_REQUEST, {

libs/shared/interfaces/src/lib/playlist-meta.type.ts

@@ -23,6 +23,7 @@ export type PlaylistMeta = Pick<
     | 'macAddress'
     | 'portalUrl'
     | 'recentlyViewed'
+    | 'isFullStalkerPortal'
     | 'stalkerSerialNumber'
     | 'stalkerDeviceId1'
     | 'stalkerDeviceId2'

libs/ui/components/src/index.ts

@@ -2,6 +2,7 @@ export * from './lib/add-playlist-menu/add-playlist-menu.component';
 export * from './lib/art-player/art-player.component';
 export * from './lib/audio-player/audio-player.component';
 export * from './lib/channel-list-container/channel-list-container.component';
+export * from './lib/channel-list-container/channel-list-item/channel-list-item.component';
 export * from './lib/confirm-dialog/confirm-dialog.component';
 export * from './lib/confirm-dialog/dialog.service';
 export * from './lib/content-hero/content-hero.component';

libs/ui/components/src/lib/epg-list/epg-list-item/epg-list-item.component.scss

@@ -3,104 +3,70 @@
     align-items: center;
     gap: 8px;
     width: 100%;
+    min-width: 0;
 }
 
 .time {
-    font-family: 'DM Sans', sans-serif;
-    font-size: 0.7rem;
-    opacity: 0.6;
-    letter-spacing: 0.02em;
+    font-size: 0.76rem;
     line-height: 1;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    font-variant-numeric: tabular-nums;
     white-space: nowrap;
+    opacity: 0.76;
 }
 
 .badge {
-    border-radius: 4px;
-    padding: 3px 8px;
-    color: white;
-    text-transform: uppercase;
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 0.08em;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 40px;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    min-width: 42px;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    line-height: 1.35;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    border: 1px solid transparent;
 }
 
 .live {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-    animation: livePulse 2s ease-in-out infinite;
-    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
-
-    &::after {
-        content: '●';
-        margin-left: 4px;
-        animation: blink 1.5s ease-in-out infinite;
-    }
+    color: #ff8f8f;
+    background: rgba(255, 95, 95, 0.12);
+    border-color: rgba(255, 95, 95, 0.28);
 }
 
 .rec {
-    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
-    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
-
-    &::after {
-        content: '◉';
-        margin-left: 4px;
-    }
+    color: #9abfff;
+    background: color-mix(in srgb, var(--app-selection-color) 14%, transparent);
+    border-color: color-mix(in srgb, var(--app-selection-border) 72%, transparent);
 }
 
 .description-icon {
-    margin-left: auto;
-    cursor: pointer;
-    opacity: 0.6;
-    transition: all 0.2s ease;
-    padding: 4px;
-    border-radius: 4px;
-    display: flex;
+    margin-inline-start: auto;
+    width: 30px;
+    height: 30px;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
+    border-radius: 9px;
+    cursor: pointer;
+    opacity: 0.7;
+    transition:
+        opacity 0.15s ease,
+        background-color 0.15s ease,
+        transform 0.15s ease;
 
     mat-icon {
-        font-size: 18px;
         width: 18px;
         height: 18px;
+        font-size: 18px;
     }
 
     &:hover {
         opacity: 1;
-        background: rgba(0, 0, 0, 0.04);
-    }
-
-    &:active {
-        transform: scale(0.95);
-    }
-}
-
-// Dark theme support
-::ng-deep .dark-theme {
-    .description-icon:hover {
-        background: rgba(255, 255, 255, 0.04);
-    }
-}
-
-// Animations
-@keyframes livePulse {
-    0%, 100% {
-        box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
-    }
-    50% {
-        box-shadow: 0 0 20px rgba(239, 68, 68, 0.8), 0 2px 12px rgba(0, 0, 0, 0.4);
-    }
-}
-
-@keyframes blink {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.3;
+        background: color-mix(in srgb, currentColor 10%, transparent);
+        transform: translateY(-1px);
     }
 }

libs/ui/components/src/lib/epg-list/epg-list.component.html

@@ -4,9 +4,17 @@
 <!-- channel info panel -->
 <div id="channel-header" color="primary">
     <div class="channel-info">
-        <div class="channel-icon">
+        <div class="channel-icon-shell" aria-hidden="true">
+            @if (showChannelIconFallback(channel)) {
+                <mat-icon class="channel-icon-fallback">live_tv</mat-icon>
+            }
             @if (getChannelIcon(channel)) {
-                <img [src]="getChannelIcon(channel)" width="48" alt="icon" />
+                <img
+                    [src]="getChannelIcon(channel)"
+                    width="48"
+                    alt="icon"
+                    (error)="onChannelIconError($event)"
+                />
             }
         </div>
         <div class="channel-details">
@@ -48,13 +56,16 @@
 
 @if (timeshiftUntil) {
     <!-- program list -->
-    <div id="program-list">
+    <div id="program-list" #programList>
         @if (items?.length > 0) {
             @for (program of items; track $index) {
                 @if (
                     program.start < timeshiftUntil || program.start >= timeNow
                 ) {
-                    <div class="program-item">
+                    <div
+                        class="program-item"
+                        [class.current-program]="isProgramPlaying(program)"
+                    >
                         <div class="program-meta">
                             <app-epg-list-item
                                 [timeshiftUntil]="timeshiftUntil"
@@ -79,6 +90,7 @@
                 } @else {
                     <div
                         class="program-item clickable"
+                        [class.current-program]="isProgramPlaying(program)"
                         [class.active]="
                             timeNow >= program.start && timeNow <= program.stop
                         "

libs/ui/components/src/lib/epg-list/epg-list.component.scss

@@ -2,214 +2,254 @@
     display: flex;
     flex-direction: column;
     position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
+    inset: 0;
     height: 100%;
     overflow-x: hidden;
+    background: transparent;
 }
 
-// Header divider
 .header-divider {
     height: 1px;
-    background: rgba(0, 0, 0, 0.12);
+    background: rgba(255, 255, 255, 0.08);
 }
 
-// Dark theme support
-::ng-deep .dark-theme {
-    .header-divider {
-        background: rgba(255, 255, 255, 0.12);
-    }
-}
-
-// Channel header
 #channel-header {
-    flex-direction: column;
-    box-sizing: border-box;
     display: flex;
+    flex-direction: column;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
+        rgba(127, 127, 127, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 
     .channel-info {
-        flex-direction: row;
-        box-sizing: border-box;
         display: flex;
-        padding: 12px;
-        gap: 12px;
-    }
-
-    .channel-icon {
-        overflow: hidden;
-        place-content: center;
         align-items: center;
-        flex-direction: row;
-        box-sizing: border-box;
-        display: flex;
-        flex: 0 0 48px;
-        width: 48px;
-        height: 48px;
-        border-radius: 4px;
-
-        img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-    }
-
-    .channel-details {
-        flex: 1 1 100%;
-        box-sizing: border-box;
-        max-width: 100%;
-        align-self: center;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        min-width: 0;
-    }
-
-    .channel-name {
-        font-family: 'DM Sans', sans-serif;
-        font-weight: 500;
-        font-size: 0.9rem;
-        line-height: 1.3;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .program-name {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-        font-size: 0.8rem;
-        font-weight: 500;
-        opacity: 0.85;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        line-height: 1.2;
+        padding: 14px 16px 12px;
+        gap: 14px;
     }
 }
 
-// Date navigator
+.channel-icon-shell {
+    position: relative;
+    width: 52px;
+    height: 52px;
+    flex-shrink: 0;
+    border-radius: 12px;
+    overflow: hidden;
+    display: grid;
+    place-items: center;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
+        rgba(127, 127, 127, 0.12);
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
+        inset 0 1px 1px rgba(0, 0, 0, 0.15);
+
+    img {
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        padding: 6px;
+        box-sizing: border-box;
+    }
+}
+
+.channel-icon-fallback {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    opacity: 0.46;
+}
+
+.channel-details {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.channel-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 1rem;
+    line-height: 1.2;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+}
+
+.program-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.84rem;
+    line-height: 1.2;
+    opacity: 0.82;
+}
+
 #date-navigator {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px;
+    padding: 8px 10px 10px;
     gap: 8px;
 
     button {
-        transition: all 0.2s ease;
+        border-radius: 10px;
+        opacity: 0.84;
+        transition:
+            opacity 0.15s ease,
+            background-color 0.15s ease,
+            transform 0.15s ease;
+
+        &:hover:not([disabled]) {
+            opacity: 1;
+            background: color-mix(in srgb, currentColor 10%, transparent);
+            transform: translateY(-1px);
+        }
 
         &[disabled] {
             opacity: 0.3;
         }
     }
-
-    .selected-date {
-        flex: 1;
-        font-family: 'DM Sans', sans-serif;
-        font-size: 0.85rem;
-        font-weight: 500;
-        text-align: center;
-        opacity: 0.8;
-    }
 }
 
-// Program list styling
+.selected-date {
+    flex: 1;
+    text-align: center;
+    font-size: 0.83rem;
+    line-height: 1.2;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    opacity: 0.8;
+}
+
 #program-list {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-}
-
-// Program list items
-.program-item {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-    transition: background-color 0.2s ease;
-    position: relative;
-    padding: 10px 12px;
+    padding: 10px 10px 14px;
     display: flex;
     flex-direction: column;
     gap: 6px;
+}
+
+.program-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px 14px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 14px;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
+        rgba(127, 127, 127, 0.045);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.04),
+        0 10px 20px -20px rgba(0, 0, 0, 0.35);
+    transition:
+        background 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.18s ease,
+        transform 0.18s ease;
     cursor: default;
 
     &.clickable {
         cursor: pointer;
 
         &:hover {
-            background-color: rgba(0, 0, 0, 0.04);
+            background:
+                linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
+                rgba(127, 127, 127, 0.065);
+            transform: translateY(-1px);
         }
     }
 
     &.active {
-        background-color: rgba(0, 0, 0, 0.08);
-    }
+        background: linear-gradient(
+            135deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        );
+        border-color: var(--app-selection-border);
+        box-shadow:
+            inset 0 0 0 1px var(--app-selection-border),
+            0 12px 20px -18px var(--app-selection-glow);
 
-    .program-meta {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    .program-title {
-        font-family: 'DM Sans', sans-serif;
-        font-size: 0.9rem;
-        font-weight: 500;
-        line-height: 1.4;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-    }
-
-    .program-progress {
-        margin-top: 4px;
-    }
-}
-
-// Dark theme support
-::ng-deep .dark-theme {
-    .program-item {
-        border-bottom-color: rgba(255, 255, 255, 0.08);
-
-        &.clickable:hover {
-            background-color: rgba(255, 255, 255, 0.04);
-        }
-
-        &.active {
-            background-color: rgba(255, 255, 255, 0.08);
+        .program-title {
+            color: var(--app-selection-color);
         }
     }
 }
 
-// Progress bar (matching channel list)
+.program-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.program-title {
+    font-size: 0.94rem;
+    line-height: 1.4;
+    font-weight: 560;
+    letter-spacing: 0.005em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.program-progress {
+    padding-top: 2px;
+}
+
 .epg-progress-track {
     position: relative;
     width: 100%;
-    height: 3px;
-    background: rgba(128, 128, 128, 0.2);
-    border-radius: 2px;
+    height: 6px;
     overflow: hidden;
+    border-radius: 999px;
+    background-color: rgba(127, 127, 127, 0.28);
+    background-image: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.12),
+        rgba(255, 255, 255, 0)
+    );
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
+        inset 0 1px 1px rgba(0, 0, 0, 0.18);
 }
 
 .epg-progress-fill {
     position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
-    border-radius: 2px;
-    transition: width 0.5s ease-out;
-    box-shadow: 0 0 6px rgba(124, 58, 237, 0.4);
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-radius: inherit;
+    background-color: var(--app-selection-color);
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.18),
+        rgba(255, 255, 255, 0)
+    );
+    box-shadow:
+        0 0 0 1px color-mix(in srgb, var(--app-selection-border) 82%, transparent),
+        0 0 10px -2px var(--app-selection-glow);
+    transition: width 0.35s ease;
 }
 
-// Empty state styling
 .epg-not-available {
-    padding: 24px;
+    margin: auto 10px;
+    padding: 22px;
+    border: 1px dashed rgba(255, 255, 255, 0.12);
+    border-radius: 14px;
     text-align: center;
-    font-family: 'DM Sans', sans-serif;
-    font-size: 0.875rem;
-    opacity: 0.6;
-    font-style: italic;
+    font-size: 0.88rem;
+    opacity: 0.66;
 }

libs/ui/components/src/lib/epg-list/epg-list.component.ts

@@ -1,5 +1,15 @@
 import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    effect,
+    inject,
+    Injector,
+    OnInit,
+    viewChild,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
@@ -44,6 +54,7 @@ export class EpgListComponent implements OnInit {
     private readonly store = inject(Store);
     private readonly epgService = inject(EpgService);
     private readonly cdr = inject(ChangeDetectorRef);
+    private readonly injector = inject(Injector);
 
     /** Channel info in EPG format */
     channel!: EpgChannel;
@@ -62,6 +73,8 @@ export class EpgListComponent implements OnInit {
     /** EPG selected program */
     playingNow!: EpgProgram;
 
+    channelIconFailed = false;
+
     /** Selected date */
     selectedDate!: string;
 
@@ -83,6 +96,7 @@ export class EpgListComponent implements OnInit {
                 url: active?.url ? [active.url] : [],
                 icon: icons,
             };
+            this.channelIconFailed = false;
             return (
                 active?.tvg?.rec || active?.timeshift || active?.catchup?.days
             );
@@ -96,6 +110,8 @@ export class EpgListComponent implements OnInit {
     private readonly selectedDate$ = new BehaviorSubject<string>(
         moment().format(DATE_FORMAT)
     );
+    readonly programList = viewChild<ElementRef<HTMLElement>>('programList');
+    private scrollScheduled = false;
 
     /** Filtered EPG programs based on selected date */
     filteredItems$ = combineLatest([this.items$, this.selectedDate$]).pipe(
@@ -135,10 +151,47 @@ export class EpgListComponent implements OnInit {
         return channel.icon[0]?.src || '';
     }
 
+    showChannelIconFallback(channel: EpgChannel): boolean {
+        return !this.getChannelIcon(channel) || this.channelIconFailed;
+    }
+
+    onChannelIconError(event: Event): void {
+        this.channelIconFailed = true;
+        (event.target as HTMLImageElement | null)?.style.setProperty(
+            'display',
+            'none'
+        );
+        this.cdr.markForCheck();
+    }
+
     /**
      * Subscribe for values from the store on component init
      */
     ngOnInit(): void {
+        effect(
+            (onCleanup) => {
+                const programList = this.programList()?.nativeElement;
+                if (!programList || typeof ResizeObserver === 'undefined') {
+                    return;
+                }
+
+                const resizeObserver = new ResizeObserver((entries) => {
+                    const [entry] = entries;
+                    if (
+                        entry &&
+                        entry.contentRect.height > 0 &&
+                        entry.contentRect.width > 0
+                    ) {
+                        this.scheduleScrollToCurrentProgram();
+                    }
+                });
+
+                resizeObserver.observe(programList);
+                onCleanup(() => resizeObserver.disconnect());
+            },
+            { injector: this.injector }
+        );
+
         this.items$.subscribe((programs) => this.handleEpgData(programs));
         this.dateToday = moment().format(DATE_FORMAT);
         this.selectedDate$.next(this.dateToday);
@@ -167,6 +220,7 @@ export class EpgListComponent implements OnInit {
 
         // Trigger change detection for OnPush strategy
         this.cdr.markForCheck();
+        this.scheduleScrollToCurrentProgram();
     }
 
     /**
@@ -198,6 +252,7 @@ export class EpgListComponent implements OnInit {
 
         this.dateToday = newDate;
         this.selectedDate$.next(newDate);
+        this.scheduleScrollToCurrentProgram();
     }
 
     /**
@@ -274,4 +329,47 @@ export class EpgListComponent implements OnInit {
 
         return isPlaying;
     }
+
+    private scheduleScrollToCurrentProgram(): void {
+        if (this.selectedDate$.value !== moment().format(DATE_FORMAT)) {
+            return;
+        }
+
+        if (this.scrollScheduled) {
+            return;
+        }
+
+        this.scrollScheduled = true;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.scrollScheduled = false;
+                this.scrollCurrentProgramIntoView();
+            });
+        });
+    }
+
+    private scrollCurrentProgramIntoView(): void {
+        const container = this.programList()?.nativeElement;
+        const currentProgram = container?.querySelector<HTMLElement>(
+            '.program-item.current-program'
+        );
+
+        if (!container || !currentProgram) {
+            return;
+        }
+
+        const viewTop = container.scrollTop;
+        const viewBottom = viewTop + container.clientHeight;
+        const itemTop = currentProgram.offsetTop;
+        const itemBottom = itemTop + currentProgram.offsetHeight;
+
+        if (itemTop >= viewTop && itemBottom <= viewBottom) {
+            return;
+        }
+
+        currentProgram.scrollIntoView({
+            block: 'center',
+            inline: 'nearest',
+        });
+    }
 }

libs/ui/components/src/lib/html-video-player/html-video-player.component.scss

@@ -1,12 +1,12 @@
-#video-player {
+:host {
+    display: block;
     width: 100%;
-    height: calc(100vh - 60px);
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
 }
 
-
-@media only screen and (max-width: 599px) {
-    #video-player {
-        width: 100%;
-        height: calc(50vh - 60px) !important;
-    }
-}
+#video-player {
+    width: 100%;
+    height: 100%;
+}

libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.html

@@ -2,6 +2,7 @@
     cdkDrag
     [cdkDragDisabled]="!isDraggable()"
     cdkDragPreviewContainer="parent"
+    [class.selected]="isSelected()"
     (click)="playlistClicked.emit(item._id)"
 >
     @if (isDraggable()) {

libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.scss

@@ -3,10 +3,41 @@ mat-list-item {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: 12px;
     margin: 2px 4px;
+    border: 1px solid transparent;
 
     &:hover {
         background-color: rgba(255, 255, 255, 0.03) !important;
     }
+
+    &.selected {
+        background: linear-gradient(
+            135deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        ) !important;
+        border-color: var(--app-selection-border) !important;
+        color: var(--app-selection-color) !important;
+        box-shadow:
+            inset 0 0 0 1px var(--app-selection-border),
+            0 12px 20px -18px var(--app-selection-glow);
+        transform: translateY(-1px);
+
+        .meta,
+        .upload-type-icon,
+        .drag-icon,
+        .action-buttons button,
+        .action-buttons mat-icon {
+            color: inherit !important;
+        }
+
+        .status-dot {
+            border-color: color-mix(
+                in srgb,
+                var(--app-selection-surface-strong) 85%,
+                transparent
+            );
+        }
+    }
 }
 
 // Light theme hover

libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.ts

@@ -27,6 +27,7 @@ export class PlaylistItemComponent implements OnInit {
     @Input() item!: PlaylistMeta;
     readonly showActions = input(true);
     readonly isDraggable = input(false);
+    readonly isSelected = input(false);
 
     readonly editPlaylistClicked = output<PlaylistMeta>();
     readonly playlistClicked = output<string>();

libs/ui/components/src/lib/recent-playlists/recent-playlists.component.html

@@ -26,6 +26,7 @@
                     ) {
                         <app-playlist-item
                             [item]="item"
+                            [isSelected]="activePlaylistId() === item._id"
                             [showActions]="!sidebarMode()"
                             [isDraggable]="isCustomSortActive()"
                             (editPlaylistClicked)="openInfoDialog($event)"

libs/ui/components/src/lib/recent-playlists/recent-playlists.component.ts

@@ -15,6 +15,7 @@ import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import {
     PlaylistActions,
+    selectActivePlaylistId,
     selectActiveTypeFilters,
     selectAllPlaylistsMeta,
     selectPlaylistsLoadingFlag,
@@ -62,6 +63,7 @@ export class RecentPlaylistsComponent {
     readonly allPlaylistsLoaded = this.store.selectSignal(
         selectPlaylistsLoadingFlag
     );
+    readonly activePlaylistId = this.store.selectSignal(selectActivePlaylistId);
 
     private readonly currentSortOptions = toSignal(
         this.sortService.getSortOptions(),