refactor: Enhance Stalker Live Stream Layout and EPG components

- Refactored StalkerLiveStreamLayoutComponent to improve channel selection and playback handling.
- Introduced new methods for building external playback headers and handling cross-origin streams.
- Updated EPG preview logic to use a more structured approach with EpgProgram type.
- Improved styling for channel list items, including hover effects and active states.
- Enhanced EPG view with a more responsive layout and improved item display.
- Updated video player components to ensure proper sizing and overflow handling.
- Added fallback handling for channel logos and improved action button visibility.

apps/web/src/app/stalker/stalker-live-stream-layout/stalker-live-stream-layout.component.html

@@ -46,61 +46,27 @@
             </div> -->
             <div #scrollContainer class="channels-list">
                 @for (item of itvChannels(); track item.id ?? $index) {
-                    <div
-                        class="channel-item"
-                        [class.active]="stalkerStore.selectedItem()?.id === item.id"
-                        (click)="playChannel(item)"
-                    >
-                        <img
-                            class="stream-icon"
-                            [src]="item.logo"
-                            (error)="
-                                $event.target.src =
-                                    './assets/images/default-poster.png'
-                            "
-                            alt=""
-                        />
-                        <div class="channel-info">
-                            <span class="title">{{
-                                item.o_name || item.name
-                            }}</span>
-                            @if (currentPrograms.get(item.id)) {
-                                <div class="program-info">
-                                    <div class="current-program">
-                                        {{ currentPrograms.get(item.id) }}
-                                    </div>
-                                    @if (currentProgramsProgress.has(item.id)) {
-                                        <div class="progress-container">
-                                            <span>{{
-                                                programTimings.get(item.id)?.start
-                                                    | date: 'HH:mm'
-                                            }}</span>
-                                            <div class="progress-bar">
-                                                <div
-                                                    class="progress"
-                                                    [style.width.%]="
-                                                        currentProgramsProgress.get(item.id)
-                                                    "
-                                                ></div>
-                                            </div>
-                                            <span>{{
-                                                programTimings.get(item.id)?.end
-                                                    | date: 'HH:mm'
-                                            }}</span>
-                                        </div>
-                                    }
-                                </div>
-                            }
-                        </div>
-                        <button
-                            class="favorite-btn"
-                            (click)="toggleFavorite(item); $event.stopPropagation()"
-                        >
-                            <mat-icon>{{
-                                favorites.get(item.id) ? 'star' : 'star_outline'
-                            }}</mat-icon>
-                        </button>
-                    </div>
+                    <app-channel-list-item
+                        [name]="item.o_name || item.name"
+                        [logo]="item.logo"
+                        [selected]="isSelectedChannel(item)"
+                        [epgProgram]="
+                            epgPreviewPrograms.get(normalizeStalkerEntityId(item.id)) ??
+                            null
+                        "
+                        [progressPercentage]="
+                            currentProgramsProgress.get(
+                                normalizeStalkerEntityId(item.id)
+                            ) ?? 0
+                        "
+                        [showFavoriteButton]="true"
+                        [showProgramInfoButton]="false"
+                        [isFavorite]="
+                            favorites.get(normalizeStalkerEntityId(item.id)) ?? false
+                        "
+                        (clicked)="playChannel(item)"
+                        (favoriteToggled)="toggleFavorite(item)"
+                    />
                 }
 
                 @if (isLoadingMore()) {

apps/web/src/app/stalker/stalker-live-stream-layout/stalker-live-stream-layout.component.scss

@@ -33,23 +33,38 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    min-height: 0;
 }
 
 .video-player {
-    flex: 1;
-    height: 50%;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
 }
 
 .epg {
-    flex: 1;
-    height: 50%;
+    flex: 1 1 0;
+    min-height: 0;
     overflow: hidden;
 }
 
+.video-player > app-web-player-view {
+    flex: 1;
+    min-height: 0;
+}
+
 .epg-content {
     height: 100%;
-    overflow-y: auto;
-    padding-bottom: 20px;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.epg-content > app-epg-view {
+    flex: 1;
+    min-height: 0;
 }
 
 .no-channel-selected {
@@ -62,7 +77,6 @@
     gap: 10px;
 }
 
-// Channel list
 .search-panel {
     padding: 8px 12px;
     flex-shrink: 0;
@@ -91,125 +105,10 @@
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: 4px 0;
-}
-
-.channel-item {
-    display: flex;
-    align-items: center;
-    padding: 8px;
-    margin: 2px 4px;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    min-height: 48px;
-    box-sizing: border-box;
-    gap: 8px;
-    width: calc(100% - 8px);
-    min-width: 0;
-    overflow: hidden;
-
-    &:hover {
-        background-color: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
-
-        .title {
-            color: var(--mat-sys-primary);
-        }
-    }
-
-    &.active {
-        background-color: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent);
-
-        .title {
-            color: var(--mat-sys-primary);
-        }
-    }
-}
-
-.stream-icon {
-    width: 32px;
-    height: 32px;
-    border-radius: 4px;
-    object-fit: cover;
-    flex-shrink: 0;
-    background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent);
-}
-
-.channel-info {
-    flex: 1 1 0;
-    min-width: 0;
-    max-width: 100%;
+    padding: 4px 8px 12px;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-
-    .title {
-        font-weight: 600;
-        font-size: 14px;
-        transition: color 0.2s ease;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .current-program {
-        font-size: 12px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        opacity: 0.8;
-    }
-
-    .progress-container {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 11px;
-        opacity: 0.6;
-
-        span {
-            flex-shrink: 0;
-        }
-
-        .progress-bar {
-            flex: 1;
-            height: 3px;
-            background: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent);
-            border-radius: 2px;
-            overflow: hidden;
-            min-width: 20px;
-
-            .progress {
-                height: 100%;
-                background: var(--mat-sys-primary);
-                transition: width 1s linear;
-            }
-        }
-    }
-}
-
-.favorite-btn {
-    background: none;
-    border: none;
-    padding: 8px;
-    cursor: pointer;
-    color: inherit;
-    opacity: 0.6;
-    transition: opacity 0.2s ease;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-        opacity: 1;
-    }
-
-    mat-icon {
-        font-size: 20px;
-        width: 20px;
-        height: 20px;
-    }
+    gap: 2px;
 }
 
 .loading-indicator {
@@ -224,43 +123,9 @@
     padding: 8px 0;
 }
 
-// Container queries for responsive behavior
 @container (max-width: 350px) {
-    .channel-item {
-        gap: 6px;
-        padding: 6px;
-    }
-
-    .stream-icon {
-        width: 28px;
-        height: 28px;
-    }
-
-    .favorite-btn {
-        padding: 4px;
-
-        mat-icon {
-            font-size: 18px;
-            width: 18px;
-            height: 18px;
-        }
-    }
-}
-
-@container (max-width: 300px) {
-    .stream-icon {
-        width: 24px;
-        height: 24px;
-    }
-
-    .favorite-btn {
-        display: none;
-    }
-}
-
-@container (max-width: 260px) {
-    .stream-icon {
-        display: none;
+    .channels-list {
+        padding-inline: 6px;
     }
 }
 

apps/web/src/app/stalker/stalker-live-stream-layout/stalker-live-stream-layout.component.ts

@@ -11,7 +11,6 @@ import {
     viewChild,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { DatePipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -21,9 +20,13 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { PlaylistSwitcherComponent, ResizableDirective } from 'components';
-import { PlaylistsService } from 'services';
-import { EpgItem } from 'shared-interfaces';
+import {
+    ChannelListItemComponent,
+    PlaylistSwitcherComponent,
+    ResizableDirective,
+} from 'components';
+import { PlaylistsService, StalkerSessionService } from 'services';
+import { EpgItem, EpgProgram, PlaylistMeta } from 'shared-interfaces';
 import { EpgViewComponent, WebPlayerViewComponent } from 'shared-portals';
 import { SettingsStore } from '../../services/settings-store.service';
 import { PlayerService } from '../../services/player.service';
@@ -54,7 +57,7 @@ import {
     ],
     imports: [
         CategoryViewComponent,
-        DatePipe,
+        ChannelListItemComponent,
         EpgViewComponent,
         FormsModule,
         MatButton,
@@ -77,10 +80,14 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
     readonly stalkerStore = inject(StalkerStore);
     private readonly settingsStore = inject(SettingsStore);
     private readonly playlistService = inject(PlaylistsService);
+    private readonly stalkerSession = inject(StalkerSessionService);
     private readonly playerService = inject(PlayerService);
     private readonly snackBar = inject(MatSnackBar);
     private readonly translate = inject(TranslateService);
     private readonly logger = createLogger('StalkerLiveStream');
+    private readonly stalkerMagUserAgent =
+        'Mozilla/5.0 (QtEmbedded; U; Linux; C) AppleWebKit/533.3 (KHTML, like Gecko) MAG250';
+    private readonly stalkerStreamUserAgent = 'KSPlayer';
 
     /** Categories */
     readonly categories = this.stalkerStore.getCategoryResource;
@@ -98,6 +105,8 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
 
     /** Search */
     readonly searchString = signal('');
+    readonly selectedChannelId = this.stalkerStore.selectedItvId;
+    protected readonly normalizeStalkerEntityId = normalizeStalkerEntityId;
 
     /** Player */
     readonly player = this.settingsStore.player;
@@ -111,9 +120,8 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
     private epgChannelId: number | string | null = null;
 
     /** Channel list EPG preview */
-    readonly currentPrograms = new Map<string | number, string>();
+    readonly epgPreviewPrograms = new Map<string | number, EpgProgram>();
     readonly currentProgramsProgress = new Map<string | number, number>();
-    readonly programTimings = new Map<string | number, { start: number; end: number }>();
     private readonly requestedEpgChannels = new Set<string | number>();
     private readonly cdr = inject(ChangeDetectorRef);
     private readonly ngZone = inject(NgZone);
@@ -255,6 +263,13 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
         this.stalkerStore.setSelectedCategory(null);
     }
 
+    isSelectedChannel(item: StalkerItvChannel): boolean {
+        return (
+            this.selectedChannelId() ===
+            this.normalizeStalkerEntityId(item.id)
+        );
+    }
+
     async playChannel(item: StalkerItvChannel) {
         this.stalkerStore.setSelectedItem(item);
 
@@ -275,15 +290,36 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
             if (isEmbeddedPlayer) {
                 this.streamUrl = url;
             } else {
+                const playlist = this.currentPlaylist();
+                const portalOrigin = this.getPortalOrigin(playlist);
+                const crossOriginStream = this.isCrossOriginStream(
+                    playlist,
+                    url
+                );
+                const playbackHeaders =
+                    this.buildExternalPlaybackHeaders(playlist, url);
+                const playbackUserAgent =
+                    playbackHeaders['User-Agent'] ||
+                    playlist?.userAgent ||
+                    this.stalkerMagUserAgent;
+                const playbackReferer = crossOriginStream
+                    ? undefined
+                    : playlist?.referrer || portalOrigin;
+                const playbackOrigin = crossOriginStream
+                    ? undefined
+                    : playlist?.origin || portalOrigin;
                 this.playerService.openPlayer(
                     url,
                     item.o_name || item.name,
                     item.logo,
                     true,
                     true,
-                    this.currentPlaylist()?.userAgent,
-                    this.currentPlaylist()?.referrer,
-                    this.currentPlaylist()?.origin
+                    playbackUserAgent,
+                    playbackReferer,
+                    playbackOrigin,
+                    undefined,
+                    undefined,
+                    playbackHeaders
                 );
             }
 
@@ -404,7 +440,10 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
             if (items.length > 0) {
                 const program = items[0];
                 const id = normalizeStalkerEntityId(channelId);
-                this.currentPrograms.set(id, program.title);
+                this.epgPreviewPrograms.set(
+                    id,
+                    this.toPreviewProgram(program, id)
+                );
 
                 const now = Date.now() / 1000;
                 const start = parseInt(program.start_timestamp, 10);
@@ -414,10 +453,8 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
                     const progress =
                         ((now - start) / (end - start)) * 100;
                     this.currentProgramsProgress.set(id, progress);
-                    this.programTimings.set(id, {
-                        start: start * 1000,
-                        end: end * 1000,
-                    });
+                } else {
+                    this.currentProgramsProgress.delete(id);
                 }
             }
         } catch {
@@ -426,9 +463,8 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
     }
 
     private clearEpgPreviewMaps() {
-        this.currentPrograms.clear();
+        this.epgPreviewPrograms.clear();
         this.currentProgramsProgress.clear();
-        this.programTimings.clear();
         this.requestedEpgChannels.clear();
     }
 
@@ -472,6 +508,105 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
         }
     }
 
+    private getPortalOrigin(
+        playlist: PlaylistMeta | undefined | null
+    ): string | undefined {
+        const portalUrl = playlist?.portalUrl;
+        if (!portalUrl) return undefined;
+        try {
+            return new URL(portalUrl).origin;
+        } catch {
+            return undefined;
+        }
+    }
+
+    private buildExternalPlaybackHeaders(
+        playlist: PlaylistMeta | undefined | null,
+        streamUrl?: string
+    ): Record<string, string> {
+        if (!playlist?.macAddress) {
+            return {};
+        }
+
+        if (this.isCrossOriginStream(playlist, streamUrl)) {
+            return {
+                'User-Agent': this.stalkerStreamUserAgent,
+                Accept: '*/*',
+                Range: 'bytes=0-',
+                Connection: 'keep-alive',
+                'Icy-MetaData': '1',
+            };
+        }
+
+        const cookieParts = [
+            `mac=${playlist.macAddress}`,
+            'stb_lang=en_US@rg=dezzzz',
+            'timezone=Europe/Berlin',
+        ];
+        if (playlist.stalkerSerialNumber) {
+            cookieParts.push(
+                `__cfduid=${playlist.stalkerSerialNumber.toLowerCase()}e030245495acd6ebfc1`
+            );
+        }
+
+        const headers: Record<string, string> = {
+            Cookie: cookieParts.join('; '),
+            'X-User-Agent': this.stalkerMagUserAgent,
+            SN: playlist.stalkerSerialNumber || '',
+        };
+
+        const token = this.stalkerSession.getCachedToken(playlist._id);
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+
+        const origin = this.getPortalOrigin(playlist);
+        if (origin) {
+            headers['Origin'] = origin;
+            headers['Referer'] = origin;
+        }
+
+        return Object.entries(headers).reduce<Record<string, string>>(
+            (acc, [name, value]) => {
+                if (value?.trim()) {
+                    acc[name] = value;
+                }
+                return acc;
+            },
+            {}
+        );
+    }
+
+    private isCrossOriginStream(
+        playlist: PlaylistMeta | undefined | null,
+        streamUrl?: string
+    ): boolean {
+        const portalOrigin = this.getPortalOrigin(playlist);
+        if (!portalOrigin || !streamUrl) {
+            return false;
+        }
+
+        try {
+            return new URL(streamUrl).origin !== portalOrigin;
+        } catch {
+            return false;
+        }
+    }
+
+    private toPreviewProgram(
+        item: EpgItem,
+        channelId: string | number
+    ): EpgProgram {
+        return {
+            start: item.start,
+            stop: item.stop || item.end,
+            channel: String(channelId),
+            title: item.title,
+            desc: item.description || null,
+            category: null,
+        };
+    }
+
     private handleRemoteChannelChange(direction: 'up' | 'down'): void {
         const activeItem = this.stalkerStore.selectedItem();
         if (!activeItem?.id) {

apps/web/src/app/xtream-electron/live-stream-layout/live-stream-layout.component.scss

@@ -39,23 +39,38 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    min-height: 0;
 }
 
 .video-player {
-    flex: 1;
-    height: 50%;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
 }
 
 .epg {
-    flex: 1;
-    height: 50%;
+    flex: 1 1 0;
+    min-height: 0;
     overflow: hidden;
 }
 
+.video-player > app-web-player-view {
+    flex: 1;
+    min-height: 0;
+}
+
 .epg-content {
     height: 100%;
-    overflow-y: auto;
-    padding-bottom: 20px;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.epg-content > app-epg-view {
+    flex: 1;
+    min-height: 0;
 }
 
 .sidebar-header {