From f95ac9c34ec9e39e422c95b2ee277de51b61d7c9 Mon Sep 17 00:00:00 2001 From: 4gray Date: Fri, 30 Jan 2026 20:39:18 +0100 Subject: [PATCH] refactor: refactor existing vod-details component and implement VOD details route component - Added `VodDetailsRouteComponent` to handle VOD details with route parameters. - Refactored existing `VodDetailsComponent` to use a unified structure for Xtream and Stalker portals. - Enhanced VOD details display with normalized metadata and improved playback position handling. - Integrated resizable sidebar functionality in main container and live stream layout components. - Updated routing to use the new VOD details route component. - Improved favorite toggling and download handling in VOD details. - Adjusted styles for responsive sidebar and grid layouts. --- .../database/playback-position.events.ts | 12 + .../video-player/video-player.component.html | 16 +- .../video-player/video-player.component.scss | 15 +- .../video-player/video-player.component.ts | 2 + .../favorites-layout.component.html | 9 +- .../favorites-layout.component.ts | 3 +- .../stalker-serial-details.interface.ts | 18 +- .../models/stalker-vod-details.interface.ts | 23 +- .../recently-viewed.component.html | 43 +- .../recently-viewed.component.ts | 96 ++++- .../stalker-favorites.component.html | 36 +- .../stalker-favorites.component.ts | 66 ++- .../stalker-main-container.component.html | 9 +- .../stalker-main-container.component.ts | 6 +- .../stalker-search.component.html | 21 +- .../stalker-search.component.ts | 46 ++- .../stalker-series-view.component.ts | 149 +++++-- apps/web/src/app/stalker/stalker.store.ts | 26 +- .../category-content-view.component.html | 22 +- .../category-content-view.component.ts | 55 +++ .../downloads/downloads.component.scss | 6 +- .../live-stream-layout.component.html | 11 +- .../live-stream-layout.component.scss | 24 +- .../live-stream-layout.component.ts | 20 +- .../portal-channels-list.component.html | 35 +- .../portal-channels-list.component.scss | 313 ++++++++------ .../portal-channels-list.component.ts | 10 +- .../season-container.component.html | 287 +++++++++---- .../season-container.component.scss | 259 ++++++++++++ .../season-container.component.ts | 130 ++++-- apps/web/src/app/xtream-tauri/sidebar.scss | 5 + ....html => vod-details-route.component.html} | 0 ...nent.ts => vod-details-route.component.ts} | 16 +- .../xtream-main-container.component.html | 9 +- .../xtream-main-container.component.ts | 3 +- .../xtream-shell/xtream-shell.component.ts | 33 +- .../web/src/app/xtream-tauri/xtream.routes.ts | 6 +- .../vod-details/vod-details.component.html | 92 +++-- .../vod-details/vod-details.component.ts | 387 +++++++----------- .../xtream-main-container.component.html | 7 +- .../xtream/xtream-main-container.component.ts | 36 ++ apps/web/src/styles.scss | 1 + .../live-stream-layout.component.html | 9 +- .../live-stream-layout.component.scss | 21 +- .../live-stream-layout.component.ts | 2 + 45 files changed, 1670 insertions(+), 725 deletions(-) rename apps/web/src/app/xtream-tauri/vod-details/{vod-details.component.html => vod-details-route.component.html} (100%) rename apps/web/src/app/xtream-tauri/vod-details/{vod-details.component.ts => vod-details-route.component.ts} (93%) diff --git a/apps/electron-backend/src/app/events/database/playback-position.events.ts b/apps/electron-backend/src/app/events/database/playback-position.events.ts index 423458de0..8e85e2d92 100644 --- a/apps/electron-backend/src/app/events/database/playback-position.events.ts +++ b/apps/electron-backend/src/app/events/database/playback-position.events.ts @@ -117,6 +117,9 @@ ipcMain.handle( 'DB_GET_SERIES_PLAYBACK_POSITIONS', async (event, playlistId: string, seriesXtreamId: number) => { try { + console.log( + `[DatabaseEvents] Getting series playback positions: playlistId=${playlistId}, seriesXtreamId=${seriesXtreamId}` + ); const db = await getDatabase(); const result = await db .select() @@ -132,6 +135,15 @@ ipcMain.handle( ) ); + console.log( + `[DatabaseEvents] Found ${result.length} positions for series ${seriesXtreamId}:`, + result.map((r) => ({ + contentXtreamId: r.contentXtreamId, + seriesXtreamId: r.seriesXtreamId, + position: r.positionSeconds, + })) + ); + return result; } catch (error) { console.error('Error getting series playback positions:', error); diff --git a/apps/web/src/app/home/video-player/video-player.component.html b/apps/web/src/app/home/video-player/video-player.component.html index 5926a7050..66f90c69e 100644 --- a/apps/web/src/app/home/video-player/video-player.component.html +++ b/apps/web/src/app/home/video-player/video-player.component.html @@ -1,6 +1,18 @@ - + - + @defer { } @loading { diff --git a/apps/web/src/app/home/video-player/video-player.component.scss b/apps/web/src/app/home/video-player/video-player.component.scss index c876706e4..4d7ad9be5 100644 --- a/apps/web/src/app/home/video-player/video-player.component.scss +++ b/apps/web/src/app/home/video-player/video-player.component.scss @@ -4,6 +4,7 @@ bottom: 0; left: 0; right: 0; + overflow: hidden; // Prevent horizontal scrollbar from resize handle } .mat-drawer-content { @@ -13,8 +14,18 @@ } .mat-drawer { - width: 400px; - min-width: 400px; + // Width is controlled by appResizable directive + // Default: 350px, min: 200px, max: 600px + overflow-x: hidden !important; // Hide horizontal scrollbar + + .resize-handle--right { + right: 0; + } +} + +// Ensure mat-drawer inner container fills the drawer width +::ng-deep .mat-drawer-inner-container { + width: 100% !important; } .custom-player { diff --git a/apps/web/src/app/home/video-player/video-player.component.ts b/apps/web/src/app/home/video-player/video-player.component.ts index da9cc285e..cc8f40a3c 100644 --- a/apps/web/src/app/home/video-player/video-player.component.ts +++ b/apps/web/src/app/home/video-player/video-player.component.ts @@ -23,6 +23,7 @@ import { HtmlVideoPlayerComponent, InfoOverlayComponent, MultiEpgContainerComponent, + ResizableDirective, SidebarComponent, ToolbarComponent, VjsPlayerComponent, @@ -64,6 +65,7 @@ import { SettingsComponent } from '../../settings/settings.component'; HtmlVideoPlayerComponent, InfoOverlayComponent, MatSidenavModule, + ResizableDirective, RouterLink, SidebarComponent, ToolbarComponent, diff --git a/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html b/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html index 53630e466..fab280587 100644 --- a/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html +++ b/apps/web/src/app/shared/components/favorites-layout/favorites-layout.component.html @@ -1,4 +1,11 @@ -
+
- arrow_back - {{ 'SETTINGS.BACK_TO_HOME' | translate }} - @switch (itemDetails.category_id) { @case ('vod') { - + @if (itemDetails.series?.length > 0) { + + + } @else if (itemDetails.is_series === true) { + + + } @else if (vodDetailsItem) { + + + } } @case ('series') { - + } } } @else { diff --git a/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.ts b/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.ts index 8b2ce32d5..778fe8fcb 100644 --- a/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.ts +++ b/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.ts @@ -1,9 +1,12 @@ import { Component, computed, inject, signal } from '@angular/core'; import { rxResource } from '@angular/core/rxjs-interop'; -import { MatButton } from '@angular/material/button'; -import { MatIcon } from '@angular/material/icon'; -import { TranslatePipe, TranslateService } from '@ngx-translate/core'; +import { TranslateService } from '@ngx-translate/core'; import { PlaylistsService } from 'services'; +import { + VodDetailsItem, + StalkerVodDetails, + createStalkerVodItem, +} from 'shared-interfaces'; import { FavoritesLayoutComponent } from '../../shared/components/favorites-layout/favorites-layout.component'; import { VodDetailsComponent } from '../../xtream/vod-details/vod-details.component'; import { StalkerSeriesViewComponent } from '../stalker-series-view/stalker-series-view.component'; @@ -14,10 +17,7 @@ import { StalkerStore } from '../stalker.store'; templateUrl: './recently-viewed.component.html', imports: [ FavoritesLayoutComponent, - MatButton, - MatIcon, StalkerSeriesViewComponent, - TranslatePipe, VodDetailsComponent, ], styles: [ @@ -42,6 +42,7 @@ export class RecentlyViewedComponent { private readonly translate = inject(TranslateService); itemDetails: any = null; + vodDetailsItem: VodDetailsItem | null = null; readonly currentPlaylist = this.stalkerStore.currentPlaylist; @@ -133,6 +134,27 @@ export class RecentlyViewedComponent { this.createLinkToPlayVodItv(item.cmd, item.name, item.logo); break; case 'vod': + // Normalize the item to ensure is_series flag is properly set + const normalizedItem = this.normalizeRecentItem(item); + this.itemDetails = normalizedItem; + this.stalkerStore.setSelectedItem(normalizedItem); + + // Check if this VOD item is actually a series (Ministra is_series=1) + const isVodSeries = + normalizedItem.is_series === true || + normalizedItem.series?.length > 0; + + if (isVodSeries) { + // VOD series - will be rendered as series view + this.vodDetailsItem = null; + } else { + // Regular VOD - create VodDetailsItem for the component + this.vodDetailsItem = createStalkerVodItem( + normalizedItem as StalkerVodDetails, + this.currentPlaylist()?._id ?? '' + ); + } + break; case 'series': this.itemDetails = item; this.stalkerStore.setSelectedItem(item); @@ -142,6 +164,40 @@ export class RecentlyViewedComponent { } } + /** Handle play from vod-details component */ + onVodPlay(item: VodDetailsItem): void { + if (item.type === 'stalker') { + this.createLinkToPlayVodItv( + item.cmd, + item.data.info?.name, + item.data.info?.movie_image + ); + } + } + + /** Handle favorite toggle from vod-details component */ + onVodFavoriteToggled(event: { item: VodDetailsItem; isFavorite: boolean }): void { + if (event.item.type === 'stalker') { + if (event.isFavorite) { + this.removeFromFavorites(event.item.data.id); + } else { + this.addToFavorites({ + ...event.item.data, + category_id: 'vod', + title: event.item.data.info?.name, + cover: event.item.data.info?.movie_image, + added_at: new Date().toISOString(), + }); + } + } + } + + /** Handle back from vod-details component */ + onVodBack(): void { + this.itemDetails = null; + this.vodDetailsItem = null; + } + async createLinkToPlayVodItv( cmd?: string, title?: string, @@ -158,4 +214,32 @@ export class RecentlyViewedComponent { removeFromFavorites(favoriteId: string) { this.stalkerStore.removeFromFavorites(favoriteId); } + + /** + * Normalize recent item to ensure is_series flag is properly set + * and all required fields are present for the series view + */ + private normalizeRecentItem(item: any): any { + // Normalize is_series to boolean true (can be 1, "1", or true) + const rawIsSeries = item.is_series; + const normalizedIsSeries = + rawIsSeries === true || + rawIsSeries === 1 || + rawIsSeries === '1'; + + // Ensure info object exists + const info = item.info || { + name: item.name || item.title || 'Unknown', + movie_image: item.cover || item.screenshot_uri || item.logo, + description: item.description, + }; + + return { + ...item, + info: info, + is_series: normalizedIsSeries ? true : undefined, + // Preserve video_id for season fetching + video_id: item.video_id, + }; + } } diff --git a/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.html b/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.html index 6f88784e7..5e26b7692 100644 --- a/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.html +++ b/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.html @@ -1,17 +1,31 @@ @if (itemDetails) { @switch (itemDetails.category_id) { @case ('vod') { - + @if (itemDetails.details?.series?.length > 0) { + + + } @else if ( + itemDetails.details?.is_series === true || + itemDetails.details?.is_series === 1 || + itemDetails.details?.is_series === '1' + ) { + + + } @else if (vodDetailsItem) { + + + } } @case ('series') { diff --git a/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.ts b/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.ts index aca1b8216..ca0ee8013 100644 --- a/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.ts +++ b/apps/web/src/app/stalker/stalker-favorites/stalker-favorites.component.ts @@ -1,9 +1,12 @@ import { Component, computed, inject, signal } from '@angular/core'; import { rxResource } from '@angular/core/rxjs-interop'; -import { MatButton } from '@angular/material/button'; -import { MatIcon } from '@angular/material/icon'; -import { TranslatePipe, TranslateService } from '@ngx-translate/core'; +import { TranslateService } from '@ngx-translate/core'; import { PlaylistsService } from 'services'; +import { + VodDetailsItem, + StalkerVodDetails, + createStalkerVodItem, +} from 'shared-interfaces'; import { FavoritesLayoutComponent } from '../../shared/components/favorites-layout/favorites-layout.component'; import { VodDetailsComponent } from '../../xtream/vod-details/vod-details.component'; import { StalkerSeriesViewComponent } from '../stalker-series-view/stalker-series-view.component'; @@ -39,6 +42,7 @@ export class StalkerFavoritesComponent { private readonly translate = inject(TranslateService); itemDetails: any = null; + vodDetailsItem: VodDetailsItem | null = null; readonly currentPlaylist = this.stalkerStore.currentPlaylist; @@ -136,6 +140,26 @@ export class StalkerFavoritesComponent { this.itemDetails = normalizedItem; this.stalkerStore.setSelectedItem(normalizedItem.details); this.stalkerStore.setSelectedContentType('vod'); + + // Check if this VOD item is actually a series (Ministra is_series=1) + const isVodSeries = + normalizedItem.details?.is_series === true || + normalizedItem.details?.is_series === 1 || + normalizedItem.details?.is_series === '1' || + item.is_series === true || + item.is_series === 1 || + item.is_series === '1'; + + if (isVodSeries || normalizedItem.details?.series?.length > 0) { + // VOD series - will be rendered as series view + this.vodDetailsItem = null; + } else { + // Regular VOD - create VodDetailsItem for the component + this.vodDetailsItem = createStalkerVodItem( + normalizedItem.details as StalkerVodDetails, + this.currentPlaylist()?._id ?? '' + ); + } break; case 'series': this.itemDetails = normalizedItem; @@ -147,6 +171,30 @@ export class StalkerFavoritesComponent { } } + /** Handle play from vod-details component */ + onVodPlay(item: VodDetailsItem): void { + if (item.type === 'stalker') { + this.createLinkToPlayVodItv( + item.cmd, + item.data.info?.name, + item.data.info?.movie_image + ); + } + } + + /** Handle favorite toggle from vod-details component */ + onVodFavoriteToggled(event: { item: VodDetailsItem; isFavorite: boolean }): void { + if (event.isFavorite && event.item.type === 'stalker') { + this.removeFromFavorites({ id: event.item.data.id }); + } + } + + /** Handle back from vod-details component */ + onVodBack(): void { + this.itemDetails = null; + this.vodDetailsItem = null; + } + private normalizeFavoriteItem(item: any): any { if (item.details && item.details.info) { return item; @@ -169,6 +217,14 @@ export class StalkerFavoritesComponent { [item.cover, item.screenshot_uri].filter(Boolean), }; + // Normalize is_series to boolean true (can be 1, "1", or true) + const rawIsSeries = + item.is_series || source.is_series; + const normalizedIsSeries = + rawIsSeries === true || + rawIsSeries === 1 || + rawIsSeries === '1'; + return { ...item, details: { @@ -177,7 +233,9 @@ export class StalkerFavoritesComponent { cmd: item.cmd || source.cmd, id: item.stream_id || item.id || source.id, series: item.series || source.series, - is_series: item.is_series || source.is_series, + is_series: normalizedIsSeries ? true : undefined, + // Preserve video_id for season fetching + video_id: item.video_id || source.video_id, }, }; } diff --git a/apps/web/src/app/stalker/stalker-main-container.component.html b/apps/web/src/app/stalker/stalker-main-container.component.html index c1309723a..c962d1ea3 100644 --- a/apps/web/src/app/stalker/stalker-main-container.component.html +++ b/apps/web/src/app/stalker/stalker-main-container.component.html @@ -1,4 +1,11 @@ -
+
@let isItvCategorySelected = stalkerStore.selectedCategoryId() && diff --git a/apps/web/src/app/stalker/stalker-main-container.component.ts b/apps/web/src/app/stalker/stalker-main-container.component.ts index d38e5d1f9..0e0235bc9 100644 --- a/apps/web/src/app/stalker/stalker-main-container.component.ts +++ b/apps/web/src/app/stalker/stalker-main-container.component.ts @@ -8,7 +8,7 @@ import { AfterViewInit, OnDestroy, } from '@angular/core'; -import { MatButton, MatIconButton } from '@angular/material/button'; +import { MatIconButton } from '@angular/material/button'; import { MatIcon } from '@angular/material/icon'; import { MatListModule } from '@angular/material/list'; import { MatPaginatorModule } from '@angular/material/paginator'; @@ -18,7 +18,7 @@ import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { TranslatePipe } from '@ngx-translate/core'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { PlaylistsService } from 'services'; -import { PlaylistSwitcherComponent } from 'components'; +import { PlaylistSwitcherComponent, ResizableDirective } from 'components'; import { CategoryViewComponent } from '../xtream-tauri/category-view/category-view.component'; import { PlaylistErrorViewComponent } from '../xtream/playlist-error-view/playlist-error-view.component'; import { StalkerStore } from './stalker.store'; @@ -33,7 +33,6 @@ import { StalkerStore } from './stalker.store'; ], imports: [ CategoryViewComponent, - MatButton, MatIcon, MatIconButton, MatListModule, @@ -42,6 +41,7 @@ import { StalkerStore } from './stalker.store'; NgxSkeletonLoaderModule, PlaylistErrorViewComponent, PlaylistSwitcherComponent, + ResizableDirective, RouterOutlet, TranslatePipe, ], diff --git a/apps/web/src/app/stalker/stalker-search/stalker-search.component.html b/apps/web/src/app/stalker/stalker-search/stalker-search.component.html index e9a606599..1f0efa395 100644 --- a/apps/web/src/app/stalker/stalker-search/stalker-search.component.html +++ b/apps/web/src/app/stalker/stalker-search/stalker-search.component.html @@ -1,19 +1,14 @@ @if (itemDetails) { @switch (selectedFilterType()) { @case ('vod') { - + @if (vodDetailsItem) { + + } } @case ('series') { diff --git a/apps/web/src/app/stalker/stalker-search/stalker-search.component.ts b/apps/web/src/app/stalker/stalker-search/stalker-search.component.ts index b000851b0..c5772a4f6 100644 --- a/apps/web/src/app/stalker/stalker-search/stalker-search.component.ts +++ b/apps/web/src/app/stalker/stalker-search/stalker-search.component.ts @@ -10,6 +10,9 @@ import { Playlist, STALKER_REQUEST, StalkerPortalActions, + VodDetailsItem, + StalkerVodDetails, + createStalkerVodItem, } from 'shared-interfaces'; import { SearchFormComponent } from '../../shared/components/search-form/search-form.component'; import { SearchResultItemComponent } from '../../shared/components/search-result-item/search-result-item.component'; @@ -82,7 +85,8 @@ export class StalkerSearchComponent { readonly selectedFilterType = signal('vod'); - itemDetails = null; + itemDetails: any = null; + vodDetailsItem: VodDetailsItem | null = null; readonly searchResultsResource = resource({ params: () => ({ @@ -153,6 +157,12 @@ export class StalkerSearchComponent { switch (this.selectedFilterType()) { case 'vod': this.stalkerStore.setSelectedContentType('vod'); + // Create VodDetailsItem for the component + const playlist = this.currentPlaylist(); + this.vodDetailsItem = createStalkerVodItem( + this.itemDetails as StalkerVodDetails, + playlist?._id ?? '' + ); break; case 'series': this.stalkerStore.setSelectedContentType('series'); @@ -162,6 +172,40 @@ export class StalkerSearchComponent { } } + /** Handle play from vod-details component */ + onVodPlay(item: VodDetailsItem): void { + if (item.type === 'stalker') { + this.createLinkToPlayVodItv( + item.cmd, + item.data.info?.name, + item.data.info?.movie_image + ); + } + } + + /** Handle favorite toggle from vod-details component */ + onVodFavoriteToggled(event: { item: VodDetailsItem; isFavorite: boolean }): void { + if (event.item.type === 'stalker') { + if (event.isFavorite) { + this.removeFromFavorites(event.item.data.id); + } else { + this.addToFavorites({ + ...event.item.data, + category_id: 'vod', + title: event.item.data.info?.name, + cover: event.item.data.info?.movie_image, + added_at: new Date().toISOString(), + }); + } + } + } + + /** Handle back from vod-details component */ + onVodBack(): void { + this.itemDetails = null; + this.vodDetailsItem = null; + } + onFiltersChange(event: { vod: boolean; live: boolean; series: boolean }) { const selectedFilter = Object.keys(event).find((key) => event[key]); if (selectedFilter) { diff --git a/apps/web/src/app/stalker/stalker-series-view/stalker-series-view.component.ts b/apps/web/src/app/stalker/stalker-series-view/stalker-series-view.component.ts index 9b3b0fa9a..c775dd33e 100644 --- a/apps/web/src/app/stalker/stalker-series-view/stalker-series-view.component.ts +++ b/apps/web/src/app/stalker/stalker-series-view/stalker-series-view.component.ts @@ -13,6 +13,7 @@ import { ContentHeroComponent } from 'components'; import { StalkerStore } from '../stalker.store'; import { SeasonContainerComponent } from '../../xtream-tauri/season-container/season-container.component'; import { XtreamSerieEpisode } from 'shared-interfaces'; +import { XtreamStore } from '../../xtream-tauri/stores/xtream.store'; /** * VOD series season with episodes loaded dynamically @@ -57,6 +58,7 @@ interface StalkerSeriesSeason { }) export class StalkerSeriesViewComponent { readonly stalkerStore = inject(StalkerStore); + private readonly xtreamStore = inject(XtreamStore); readonly backClicked = output(); /** @@ -74,10 +76,15 @@ export class StalkerSeriesViewComponent { /** * Indicates if this is a VOD series item (Ministra is_series=1) + * Note: is_series can be true, 1, or "1" depending on the source */ readonly isVodSeries = computed(() => { const item = this.displayItem(); - return item?.is_series === true; + return ( + item?.is_series === true || + item?.is_series === 1 || + item?.is_series === '1' + ); }); /** @@ -95,7 +102,11 @@ export class StalkerSeriesViewComponent { // Effect to load VOD series seasons when a VOD series item is selected effect(() => { const item = this.displayItem(); - if (item?.is_series === true) { + const isSeries = + item?.is_series === true || + item?.is_series === 1 || + item?.is_series === '1'; + if (isSeries) { // Get seasons from the resource const seasons = this.stalkerStore.getVodSeriesSeasonsResource(); if (seasons && seasons.length > 0) { @@ -118,6 +129,22 @@ export class StalkerSeriesViewComponent { this.vodSeriesSeasons.set([]); } }); + + // Effect to load playback positions for Stalker series + effect(() => { + const item = this.displayItem(); + const playlist = this.stalkerStore.currentPlaylist(); + if (item && playlist?._id) { + const seriesId = Number(item.id); + console.log( + `[StalkerSeriesView] Loading positions for series: id=${item.id}, seriesId=${seriesId}, is_series=${item.is_series}` + ); + if (!isNaN(seriesId)) { + // Load playback positions from the XtreamStore (works for any playlist type) + this.xtreamStore.loadSeriesPositions(playlist._id, seriesId); + } + } + }); } /** @@ -149,6 +176,42 @@ export class StalkerSeriesViewComponent { return this.vodWithSeries() || this.selectedItem(); }); + /** + * Simple hash function to generate consistent numeric IDs from strings + */ + private hashString(str: string): number { + let hash = 0; + for (let i = 0; i < str.length; i++) { + const char = str.charCodeAt(i); + hash = (hash << 5) - hash + char; + hash = hash & hash; // Convert to 32-bit integer + } + return Math.abs(hash); + } + + /** + * Generate a unique episode ID for Stalker episodes. + * For VOD series: ALWAYS hash with season + episode number because + * the API returns the same ID (series/movie ID) for all episodes. + * For regular series: hash the cmd + episode number + */ + private generateEpisodeId( + episodeId: any, + episodeNum: number, + seasonKey: string, + isVodSeries: boolean + ): number { + if (isVodSeries) { + // For VOD series, ALWAYS create unique ID from season + episode number + // The API-provided ep.id is the same for all episodes (it's the series ID) + return this.hashString(`vod_${seasonKey}_${episodeNum}`); + } else { + // For regular series, create unique ID from cmd + episode number + const cmd = String(episodeId || ''); + return this.hashString(`${cmd}_ep_${episodeNum}`); + } + } + /** * Adapts both Regular and VOD series data into the format expected by SeasonContainerComponent. * Record where string is season number/name. @@ -164,13 +227,13 @@ export class StalkerSeriesViewComponent { season.season_number || season.name || season.id; // Map existing episodes or empty array mapped[seasonKey] = (season.episodes || []).map( - (ep) => - ({ - episode_num: - ep.series_number || ep.episode_num || 0, + (ep) => { + const episodeNum = ep.series_number || ep.episode_num || 0; + return { + episode_num: episodeNum, title: ep.name || - `Episode ${ep.series_number || ep.episode_num}`, + `Episode ${episodeNum}`, container_extension: 'mpg', info: { movie_image: @@ -181,9 +244,13 @@ export class StalkerSeriesViewComponent { ? `${ep.duration} min` : '', }, - id: ep.id, + // Use unique ID for watched status tracking + id: this.generateEpisodeId(ep.id, episodeNum, seasonKey, true), + // Store original API id for playback + originalId: ep.id, custom_sid: 'vod-series', // marker - }) as unknown as XtreamSerieEpisode + } as unknown as XtreamSerieEpisode; + } ); }); } else { @@ -201,7 +268,10 @@ export class StalkerSeriesViewComponent { this.displayItem().info.movie_image, }, custom_sid: 'regular-series', // marker - id: season.cmd, // Store cmd in id for playEpisodeClicked + // Use unique ID for watched status tracking + id: this.generateEpisodeId(season.cmd, epNum, seasonKey, false), + // Store cmd for playback + originalCmd: season.cmd, }) as unknown as XtreamSerieEpisode ); }); @@ -290,32 +360,49 @@ export class StalkerSeriesViewComponent { * Handles episode click from the container */ onEpisodeClicked(episode: XtreamSerieEpisode) { - if (episode.custom_sid === 'vod-series') { - // It's a VOD series episode - // We reconstructed the episode object, but playVodSeriesEpisode expects the raw object - // or at least { id, name, series_number } + if ((episode as any).custom_sid === 'vod-series') { + // It's a VOD series episode (is_series=1 mode) + // Use originalId for playback URL, but use generated id for tracking this.playVodSeriesEpisode({ - id: episode.id, + originalId: (episode as any).originalId, // For constructing playback URL + trackingId: episode.id, // The generated unique ID for position tracking name: episode.title, series_number: episode.episode_num, }); } else { - // Regular series - // episode.id contains the 'cmd' from mapping - this.playEpisodeClicked(episode.episode_num, episode.id); + // Regular series or vclub mode (VOD with embedded series array) + // Use originalCmd for playback, episode.id for tracking + const trackingId = Number(episode.id); + this.playEpisodeClicked( + episode.episode_num, + (episode as any).originalCmd, + trackingId + ); } } /** - * Play episode - handles both regular series and VOD series + * Play episode - handles regular series and vclub mode */ - playEpisodeClicked(episodeNum: any, cmd?: string) { + playEpisodeClicked(episodeNum: any, cmd?: string, trackingId?: number) { const item = this.displayItem(); + console.log( + `[StalkerSeriesView] playEpisodeClicked: episodeNum=${episodeNum}, cmd=${cmd}, trackingId=${trackingId}, seriesId=${item.id}` + ); + + // Get playback position from XtreamStore if available + const position = trackingId + ? this.xtreamStore.playbackPositions().get(`episode_${trackingId}`) + : undefined; + const startTime = position?.positionSeconds; + this.stalkerStore.createLinkToPlayVod( cmd, item.info.name, item.info.movie_image, - episodeNum + episodeNum, + trackingId, // unique episode ID for playback tracking + startTime ); } @@ -324,13 +411,29 @@ export class StalkerSeriesViewComponent { */ playVodSeriesEpisode(episode: any) { const item = this.displayItem(); - const cmd = `/media/file_${episode.id}.mpg`; + // Use originalId for playback URL (this is what the Stalker API expects) + const cmd = `/media/file_${episode.originalId}.mpg`; const episodeName = episode.name || `Episode ${episode.series_number}`; + // Use trackingId (generated unique ID) for playback position tracking + const trackingId = Number(episode.trackingId); + + console.log( + `[StalkerSeriesView] playVodSeriesEpisode: originalId=${episode.originalId}, trackingId=${trackingId}, seriesId=${item.id}, episodeName=${episodeName}` + ); + + // Get playback position from XtreamStore if available + const position = this.xtreamStore + .playbackPositions() + .get(`episode_${trackingId}`); + const startTime = position?.positionSeconds; this.stalkerStore.createLinkToPlayVod( cmd, `${item.info.name} - ${episodeName}`, - item.info.movie_image + item.info.movie_image, + episode.series_number, // episode number for API + trackingId, // unique episode ID for playback tracking + startTime ); } diff --git a/apps/web/src/app/stalker/stalker.store.ts b/apps/web/src/app/stalker/stalker.store.ts index 14ee7d84e..62b551a14 100644 --- a/apps/web/src/app/stalker/stalker.store.ts +++ b/apps/web/src/app/stalker/stalker.store.ts @@ -891,11 +891,22 @@ export const StalkerStore = signalStore( return null; }, + /** + * Play VOD or episode content + * @param cmd The media command/path + * @param title Display title + * @param thumbnail Thumbnail URL + * @param episodeNum Episode number (for series param in API) + * @param episodeId Optional episode ID for playback tracking (defaults to item.id) + * @param startTime Optional start time in seconds for resume playback + */ async createLinkToPlayVod( cmd?: string, title?: string, thumbnail?: string, - episode?: number + episodeNum?: number, + episodeId?: number, + startTime?: number ) { try { const item = this.selectedItem(); @@ -919,7 +930,7 @@ export const StalkerStore = signalStore( this.currentPlaylist().portalUrl, this.currentPlaylist().macAddress, cmdToUse, - episode + episodeNum ); this.addToRecentlyViewed({ ...item, @@ -929,11 +940,13 @@ export const StalkerStore = signalStore( title, }); const playlist = this.currentPlaylist(); + const isEpisode = episodeNum !== undefined || episodeId !== undefined; const contentInfo = { playlistId: playlist._id, - contentXtreamId: Number(item.id), - contentType: episode ? 'episode' : 'vod', - seriesXtreamId: episode ? Number(item.id) : undefined, // For Stalker VOD series, use item.id as series ID + // For episodes, use episodeId if provided, otherwise fall back to item.id + contentXtreamId: isEpisode && episodeId ? episodeId : Number(item.id), + contentType: isEpisode ? 'episode' : 'vod', + seriesXtreamId: isEpisode ? Number(item.id) : undefined, }; playerService.openPlayer( @@ -945,7 +958,8 @@ export const StalkerStore = signalStore( playlist?.userAgent, playlist?.referrer, playlist?.origin, - contentInfo + contentInfo, + startTime ); } catch (error) { console.error( diff --git a/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.html b/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.html index ad6a0c3a1..bf8a3cb3a 100644 --- a/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.html +++ b/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.html @@ -8,20 +8,14 @@ } @else { - + @if (vodDetailsItem()) { + + } } } @else if (contentType() === 'series') { diff --git a/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.ts b/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.ts index 1e22c8497..9c174a711 100644 --- a/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.ts +++ b/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.ts @@ -3,6 +3,11 @@ import { PageEvent } from '@angular/material/paginator'; import { ActivatedRoute, Router } from '@angular/router'; import { Store } from '@ngrx/store'; import { TranslatePipe } from '@ngx-translate/core'; +import { + VodDetailsItem, + StalkerVodDetails, + createStalkerVodItem, +} from 'shared-interfaces'; import { GridListComponent } from '../../shared/components/grid-list/grid-list.component'; import { StalkerSeriesViewComponent } from '../../stalker/stalker-series-view/stalker-series-view.component'; import { StalkerStore } from '../../stalker/stalker.store'; @@ -81,6 +86,20 @@ export class CategoryContentViewComponent implements OnInit { readonly totalPages = this.store.getTotalPages; readonly bigStore = inject(Store); + /** Computed VodDetailsItem for the vod-details component */ + readonly vodDetailsItem = computed(() => { + const item = this.selectedItem(); + if (!item || !this.isStalker) return null; + // Access currentPlaylist from the store (type-safe since we're in stalker mode) + const stalkerStore = this.store as unknown as { + currentPlaylist: () => { _id: string } | null; + }; + return createStalkerVodItem( + item as StalkerVodDetails, + stalkerStore.currentPlaylist()?._id ?? '' + ); + }); + seasons = []; ngOnInit() { @@ -184,4 +203,40 @@ export class CategoryContentViewComponent implements OnInit { console.debug('Remove from favorites', favoriteId); this.store.removeFromFavorites(favoriteId); } + + /** Handle play from vod-details component */ + onVodPlay(item: VodDetailsItem): void { + if (item.type === 'stalker') { + this.createLinkToPlayVod( + item.cmd, + item.data.info?.name, + item.data.info?.movie_image + ); + } + } + + /** Handle favorite toggle from vod-details component */ + onVodFavoriteToggled(event: { + item: VodDetailsItem; + isFavorite: boolean; + }): void { + if (event.item.type === 'stalker') { + if (event.isFavorite) { + this.removeFromFavorites(event.item.data.id); + } else { + this.addToFavorites({ + ...event.item.data, + category_id: 'vod', + title: event.item.data.info?.name, + cover: event.item.data.info?.movie_image, + added_at: new Date().toISOString(), + }); + } + } + } + + /** Handle back from vod-details component */ + onVodBack(): void { + this.store.setSelectedItem(null); + } } diff --git a/apps/web/src/app/xtream-tauri/downloads/downloads.component.scss b/apps/web/src/app/xtream-tauri/downloads/downloads.component.scss index 7d4ce8fa4..b3266881d 100644 --- a/apps/web/src/app/xtream-tauri/downloads/downloads.component.scss +++ b/apps/web/src/app/xtream-tauri/downloads/downloads.component.scss @@ -1,7 +1,11 @@ +:host { + width: 100%; +} + .downloads { display: flex; flex-direction: column; - height: 100%; + height: calc(100vh - 20px); padding: 1rem; overflow: hidden; diff --git a/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.html b/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.html index 58873ecc3..b0c7b31b0 100644 --- a/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.html +++ b/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.html @@ -1,13 +1,20 @@ @let isEmbeddedPlayer = player() === 'videojs' || player() === 'html5' || player() === 'artplayer'; -
+
@if (selectedCategoryId()) { -

{{ 'HOME.PLAYLISTS.CHANNELS' | translate }}

+

{{ selectedCategoryInfo()?.name }} ({{ selectedCategoryInfo()?.count }})

} @else { { + const categoryId = this.selectedCategoryId(); + if (!categoryId) return null; + + const categories = this.categories(); + const category = categories?.find( + (c: any) => (c.category_id ?? c.id) === categoryId + ); + const count = this.categoryItemCounts()?.get(categoryId) ?? 0; + + return { + name: category?.category_name ?? category?.name ?? 'Channels', + count, + }; + }); + readonly player = this.settingsStore.player; streamUrl: string; favorites = new Map(); diff --git a/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.html b/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.html index dae9bce5e..2e1adf225 100644 --- a/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.html +++ b/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.html @@ -11,32 +11,28 @@
- +
- channel icon -
+
{{ item.title }}
@if (currentPrograms.get(item.xtream_id)) {
@@ -53,9 +49,7 @@
@@ -78,16 +72,13 @@ }
- +
- +
diff --git a/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.scss b/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.scss index 3f8bc72ce..799014407 100644 --- a/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.scss +++ b/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.scss @@ -1,70 +1,176 @@ @use '@angular/material' as mat; -mat-nav-list { +:host { + display: block; + height: 100%; width: 100%; overflow: hidden; - display: block; + container-type: inline-size; } -mat-list-item { - width: 370px !important; +.channels-list { + display: flex; + flex-direction: column; + height: calc(100% - 56px); // Account for search panel + overflow: hidden; + width: 100%; } .scroll-viewport-portals { - min-height: calc(100vh - 114px) !important; + height: 100%; width: 100%; padding: 4px 0; -} -.title { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: calc(100%); // Account for avatar and favorite button - min-width: 0; - flex: 1; -} - -mat-list-item { - width: 325px; - min-width: 0; // Prevents flex items from overflowing - box-sizing: border-box; - height: 80px !important; - transition: background-color 0.2s ease; - border-radius: 4px; - margin: 2px 8px; - - ::ng-deep .mdc-list-item__content { - overflow: hidden; - flex: 1; + // Ensure the virtual scroll content respects parent width + ::ng-deep .cdk-virtual-scroll-content-wrapper { + width: 100% !important; + max-width: 100% !important; + contain: layout style; } +} + +.channel-item { + display: flex; + align-items: center; + padding: 8px; + margin: 2px 4px; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.2s ease; + height: 64px; + box-sizing: border-box; + gap: 8px; + // Critical: use margin-based calc and ensure it doesn't overflow + width: calc(100% - 8px); + min-width: 0; // Allow shrinking below content size + overflow: hidden; &:hover { - z-index: 1; background-color: rgba(255, 255, 255, 0.1); - .channel-info { - .title { - color: #1db954; - } + + .title { + color: #1db954; } } - &.mat-mdc-list-item-active { + &.active { background-color: rgba(29, 185, 84, 0.2); - .channel-info .title { + + .title { color: #1db954; } } } -.search-bar { - width: 90%; - @include mat.form-field-density(-5); +.stream-icon { + width: 48px; + height: 48px; + border-radius: 4px; + object-fit: cover; + flex-shrink: 0; + background: rgba(255, 255, 255, 0.05); +} + +.channel-info { + flex: 1 1 0; // grow, shrink, basis=0 forces it to shrink + min-width: 0; // Critical for text truncation in flex + max-width: 100%; + display: flex; + flex-direction: column; + gap: 4px; + 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: rgba(255, 255, 255, 0.1); + border-radius: 2px; + overflow: hidden; + min-width: 20px; + + .progress { + height: 100%; + background: #1db954; + transition: width 1s linear; + } + } + } + + .no-epg-placeholder { + opacity: 0.5; + + .placeholder-bar { + height: 10px; + width: 60%; + background: rgba(255, 255, 255, 0.1); + border-radius: 2px; + margin: 2px 0; + } + } +} + +.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; + } } .search-panel { - display: flex; - justify-content: center; + padding: 8px 12px; + flex-shrink: 0; + height: 56px; + box-sizing: border-box; +} + +.search-bar { + width: 100%; + @include mat.form-field-density(-5); } ::ng-deep { @@ -79,111 +185,54 @@ mat-list-item { } } -.stream-icon { - background: none; - border-radius: 4px; - width: 48px; - height: 48px; - object-fit: cover; - margin-right: 16px; -} - -.channel-info { - display: flex; - flex-direction: column; - width: 100%; - gap: 4px; - - .title { - font-weight: 600; // Slightly bolder - font-size: 14px; - transition: color 0.2s ease; - width: 100%; - position: relative; - overflow: hidden; - - &:hover { - overflow: visible; - text-overflow: clip; - animation: marquee 6s linear infinite; - } - } - - .current-program { - font-size: 12px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - line-height: 1.2; - margin-top: 2px; - - &:hover { - overflow: visible; - text-overflow: clip; - animation: marquee 6s linear infinite; - } - } - - .program-info { - display: flex; - flex-direction: column; +// Container queries for responsive behavior +@container (max-width: 350px) { + .channel-item { gap: 6px; + padding: 6px; + } + + .stream-icon { + width: 40px; + height: 40px; + } + + .favorite-btn { + padding: 4px; + + mat-icon { + font-size: 18px; + width: 18px; + height: 18px; + } } .progress-container { - display: flex; - align-items: center; - gap: 8px; - font-size: 11px; - opacity: 0.6; - padding: 0 2px; - - .progress-bar { - flex: 1; - height: 3px; - background: rgba(255, 255, 255, 0.1); - opacity: 0.6; - border-radius: 2px; - overflow: hidden; - - .progress { - height: 100%; - background: #1db954; - transition: width 1s linear; - } - } + display: none !important; } .no-epg-placeholder { - opacity: 0.7; - .placeholder-bar { - height: 10px; - width: 60%; - background: rgba(255, 255, 255, 0.1); - border-radius: 2px; - margin: 4px 0; - } - - .progress-container { - opacity: 0.5; - - .progress-bar { - background: rgba(255, 255, 255, 0.05); - } - } + display: none !important; } } -@keyframes marquee { - 0% { - transform: translateX(0); +@container (max-width: 300px) { + .stream-icon { + width: 32px; + height: 32px; } - 100% { - transform: translateX(calc(-100%)); + + .favorite-btn { + display: none; } } -// Override Material styles to allow animation -::ng-deep .mdc-list-item__primary-text { - overflow: visible !important; +@container (max-width: 260px) { + .stream-icon { + display: none; + } + + .channel-item { + height: 48px; + } } diff --git a/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.ts b/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.ts index 0729ff577..ecbd28058 100644 --- a/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.ts +++ b/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.ts @@ -14,13 +14,9 @@ import { ViewChild, } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { MatIconButton } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIcon } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; -import { MatListModule } from '@angular/material/list'; -import { MatTooltipModule } from '@angular/material/tooltip'; import { ActivatedRoute } from '@angular/router'; import { FilterPipe } from '@iptvnator/pipes'; import { TranslatePipe } from '@ngx-translate/core'; @@ -46,14 +42,10 @@ interface EpgProgram { FilterPipe, FormsModule, MatFormFieldModule, - ScrollingModule, - MatCardModule, MatIcon, - MatIconButton, - MatListModule, MatInputModule, + ScrollingModule, TranslatePipe, - MatTooltipModule, ], }) export class PortalChannelsListComponent implements AfterViewInit { diff --git a/apps/web/src/app/xtream-tauri/season-container/season-container.component.html b/apps/web/src/app/xtream-tauri/season-container/season-container.component.html index 9fd303649..6a0bed5a6 100644 --- a/apps/web/src/app/xtream-tauri/season-container/season-container.component.html +++ b/apps/web/src/app/xtream-tauri/season-container/season-container.component.html @@ -1,11 +1,29 @@
-

Seasons and Episodes

+
+

Seasons and Episodes

+ @if (selectedSeason) { + + } +
@if (selectedSeason) { - +
+ + + grid_view + + + view_list + + +
}
@@ -45,64 +63,197 @@ }
} @else { - -
- @for (episode of seasons()[selectedSeason]; track $index) { - @let episodeInfo = getEpisodeInfo(episode); -
-
- @if (episodeInfo?.movie_image) { - Episode thumbnail - } @else { -
- play_circle_outline -
- } - @if (getEpisodeProgress(episode) > 0) { - - @if (getEpisodePositionText(episode); as time) { -
- {{ time }} + @if (viewMode() === 'grid') { + +
+ @for (episode of seasons()[selectedSeason]; track $index) { + @let episodeInfo = getEpisodeInfo(episode); +
+
+ @if (episodeInfo?.movie_image) { + Episode thumbnail + } @else { +
+ play_circle_outline
} - } - -
+ @if (getEpisodeProgress(episode) > 0) { + + @if (getEpisodePositionText(episode); as time) { +
+ {{ time }} +
+ } + } + +
+ @if (isElectron()) { + @if (isEpisodeDownloaded(episode)) { + + } @else if (isEpisodeDownloading(episode)) { + + } @else { + + } + } + +
+
+
+ play_arrow +
+
+
+ {{ episode.episode_num }} +
+
+
+

+ {{ episode.episode_num }}. {{ episode.title }} +

+ @if (episodeInfo?.plot) { +

+ {{ episodeInfo.plot }} +

+ } + @if (episodeInfo?.duration) { + + {{ episodeInfo.duration }} + + } +
+
+ } +
+ } @else { + +
+ @for (episode of seasons()[selectedSeason]; track $index) { + @let episodeInfo = getEpisodeInfo(episode); +
+
+ {{ episode.episode_num }} +
+
+
+

+ {{ episode.title }} + @if (isEpisodeWatched(episode)) { + check_circle + } +

+
+ @if (episodeInfo?.duration) { + + {{ episodeInfo.duration }} + + } + @if (getEpisodePositionText(episode); as time) { + + {{ time }} + + } +
+
+ @if (episodeInfo?.plot) { +

+ {{ episodeInfo.plot }} +

+ } + @if (getEpisodeProgress(episode) > 0) { +
+
+
+ } +
+
+ @if (isElectron()) { @if (isEpisodeDownloaded(episode)) { } @else if (isEpisodeDownloading(episode)) {
-
-
- play_arrow -
-
-
- {{ episode.episode_num }} -
-
-
-

- {{ episode.episode_num }}. {{ episode.title }} -

- @if (episodeInfo?.plot) { -

- {{ episodeInfo.plot }} -

- } - @if (episodeInfo?.duration) { - - {{ episodeInfo.duration }} - - } -
-
- } -
+ + } +
+ } }
diff --git a/apps/web/src/app/xtream-tauri/season-container/season-container.component.scss b/apps/web/src/app/xtream-tauri/season-container/season-container.component.scss index 1c894561c..5fd0d7658 100644 --- a/apps/web/src/app/xtream-tauri/season-container/season-container.component.scss +++ b/apps/web/src/app/xtream-tauri/season-container/season-container.component.scss @@ -9,6 +9,14 @@ justify-content: space-between; margin-bottom: 20px; min-height: 32px; + gap: 16px; + + &__left { + display: flex; + align-items: center; + gap: 16px; + flex: 1; + } .section-title { font-size: 1.25rem; @@ -44,6 +52,56 @@ height: 18px; } } + + .view-toggle { + mat-button-toggle-group { + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 6px; + overflow: hidden; + background: rgba(255, 255, 255, 0.03); + + ::ng-deep { + .mat-button-toggle { + background: transparent; + + .mat-button-toggle-button { + padding: 0 8px; + height: 32px; + } + + mat-icon { + font-size: 18px; + width: 18px; + height: 18px; + color: var(--text-secondary); + } + + &.mat-button-toggle-checked { + background: rgba(255, 255, 255, 0.1); + + mat-icon { + color: var(--accent-color); + } + } + + &:hover:not(.mat-button-toggle-checked) { + background: rgba(255, 255, 255, 0.05); + } + } + + .mat-button-toggle-appearance-standard { + .mat-button-toggle-label-content { + line-height: 32px; + padding: 0; + } + } + + .mat-button-toggle + .mat-button-toggle { + border-left: 1px solid rgba(255, 255, 255, 0.1); + } + } + } + } } .loading-container { @@ -426,3 +484,204 @@ border-radius: 10px; } } + +// Episodes List View +.episodes-list { + display: flex; + flex-direction: column; + gap: 2px; + width: 100%; +} + +.episode-list-item { + display: flex; + align-items: center; + gap: 16px; + padding: 12px 16px; + background: rgba(255, 255, 255, 0.02); + border-radius: 6px; + cursor: pointer; + transition: all 0.15s ease; + border: 1px solid transparent; + + &:hover { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.08); + + .episode-list-item__actions { + opacity: 1; + } + } + + &--watched { + opacity: 0.6; + + &:hover { + opacity: 1; + } + } + + &--in-progress { + border-color: rgba(229, 9, 20, 0.4); + background: rgba(229, 9, 20, 0.05); + + &:hover { + border-color: rgba(229, 9, 20, 0.6); + background: rgba(229, 9, 20, 0.08); + } + } + + &__number { + display: flex; + align-items: center; + justify-content: center; + min-width: 36px; + height: 36px; + background: rgba(255, 255, 255, 0.06); + border-radius: 6px; + font-size: 0.875rem; + font-weight: 600; + color: var(--text-secondary); + flex-shrink: 0; + } + + &__content { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 4px; + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + } + + &__title { + margin: 0; + font-size: 0.9375rem; + font-weight: 500; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: flex; + align-items: center; + gap: 6px; + + .watched-icon { + font-size: 16px; + width: 16px; + height: 16px; + color: #46d369; + } + } + + &__meta { + display: flex; + align-items: center; + gap: 12px; + flex-shrink: 0; + } + + &__duration { + font-size: 0.75rem; + color: var(--text-muted); + padding: 2px 8px; + background: rgba(255, 255, 255, 0.06); + border-radius: 10px; + } + + &__progress-text { + font-size: 0.75rem; + font-weight: 500; + color: #e50914; + padding: 2px 8px; + background: rgba(229, 9, 20, 0.15); + border-radius: 10px; + } + + &__description { + margin: 0; + font-size: 0.8125rem; + color: var(--text-secondary); + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + } + + &__progress-bar { + height: 3px; + background: rgba(255, 255, 255, 0.1); + border-radius: 2px; + overflow: hidden; + margin-top: 4px; + } + + &__progress-fill { + height: 100%; + background: #e50914; + border-radius: 2px; + transition: width 0.3s ease; + } + + &__actions { + display: flex; + align-items: center; + gap: 4px; + opacity: 0; + transition: opacity 0.15s ease; + + .action-btn { + width: 36px; + height: 36px; + color: var(--text-secondary); + transition: all 0.15s ease; + + mat-icon { + font-size: 20px; + width: 20px; + height: 20px; + } + + &:hover { + color: var(--text-primary); + background: rgba(255, 255, 255, 0.1); + } + + &.play-btn { + color: var(--accent-color); + + &:hover { + background: rgba(var(--accent-color-rgb), 0.15); + } + } + + &--success { + color: #46d369; + + &:hover { + background: rgba(70, 211, 105, 0.15); + } + } + + &:disabled { + color: var(--text-muted); + cursor: not-allowed; + opacity: 0.5; + } + } + } + + // Always show actions on touch devices + @media (hover: none) { + .episode-list-item__actions { + opacity: 1; + } + } +} diff --git a/apps/web/src/app/xtream-tauri/season-container/season-container.component.ts b/apps/web/src/app/xtream-tauri/season-container/season-container.component.ts index 43c2257f5..0fbfbb222 100644 --- a/apps/web/src/app/xtream-tauri/season-container/season-container.component.ts +++ b/apps/web/src/app/xtream-tauri/season-container/season-container.component.ts @@ -1,6 +1,7 @@ import { KeyValuePipe } from '@angular/common'; -import { Component, EventEmitter, Output, input, inject } from '@angular/core'; +import { Component, EventEmitter, Output, input, inject, signal, OnInit } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; import { MatIcon } from '@angular/material/icon'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatTooltipModule } from '@angular/material/tooltip'; @@ -12,6 +13,9 @@ import { ProgressCapsuleComponent } from '../shared/progress-capsule/progress-ca import { WatchedBadgeComponent } from '../shared/watched-badge/watched-badge.component'; import { DownloadsService } from '../../services/downloads.service'; +type EpisodeViewMode = 'grid' | 'list'; +const EPISODE_VIEW_MODE_KEY = 'iptvnator_episode_view_mode'; + @Component({ selector: 'app-season-container', templateUrl: './season-container.component.html', @@ -19,6 +23,7 @@ import { DownloadsService } from '../../services/downloads.service'; imports: [ KeyValuePipe, MatButtonModule, + MatButtonToggleModule, MatIcon, MatProgressSpinnerModule, MatTooltipModule, @@ -27,7 +32,7 @@ import { DownloadsService } from '../../services/downloads.service'; WatchedBadgeComponent, ], }) -export class SeasonContainerComponent { +export class SeasonContainerComponent implements OnInit { private readonly xtreamStore = inject(XtreamStore); private readonly stalkerStore = inject(StalkerStore); private readonly downloadsService = inject(DownloadsService); @@ -39,6 +44,23 @@ export class SeasonContainerComponent { readonly isElectron = this.downloadsService.isAvailable; + /** Current view mode for episodes (grid or list) */ + readonly viewMode = signal('grid'); + + ngOnInit() { + // Load saved view mode preference + const savedMode = localStorage.getItem(EPISODE_VIEW_MODE_KEY) as EpisodeViewMode; + if (savedMode === 'grid' || savedMode === 'list') { + this.viewMode.set(savedMode); + } + } + + /** Toggle between grid and list view modes */ + setViewMode(mode: EpisodeViewMode) { + this.viewMode.set(mode); + localStorage.setItem(EPISODE_VIEW_MODE_KEY, mode); + } + /** * Detect if episode is from Stalker portal based on custom_sid marker */ @@ -60,27 +82,62 @@ export class SeasonContainerComponent { return this.xtreamStore.currentPlaylist()?.id; } + /** + * Get the content ID for playback position lookup. + * For Stalker VOD series, use the generated unique ID (episode.id). + * The API-provided originalId is the same for all episodes (it's the series ID), + * so we use the hash-generated ID which is unique per episode. + * For Xtream episodes, use episode.id directly. + */ + private getEpisodeContentId(episode: XtreamSerieEpisode): number { + const customSid = (episode as any).custom_sid; + + if (customSid === 'vod-series') { + // For vod-series, use the generated unique ID (episode.id) + // NOT originalId, which is the same for all episodes (series ID) + return Number(episode.id); + } + + if (customSid === 'regular-series') { + // For regular-series, the hashed id is used for tracking + // (regular series don't have individual episode IDs from API) + return Number(episode.id); + } + + // For xtream (non-Stalker), use episode.id directly + return Number(episode.id); + } + /** * Get a stable numeric ID for an episode (used for downloads tracking) - * For regular-series, episode.id contains cmd string, so we extract ID from it - * For vod-series and xtream, episode.id is already numeric + * For Stalker episodes, use originalCmd/originalId; for Xtream use episode.id */ private getEpisodeDownloadId(episode: XtreamSerieEpisode): number { const customSid = (episode as any).custom_sid; if (customSid === 'regular-series') { - // For regular-series, episode.id is cmd like "/media/file_123.mpg" - // Extract the numeric part if possible - const cmd = episode.id as unknown as string; - const match = cmd?.match(/file_(\d+)/); - if (match) { - return Number(match[1]); + // For regular-series, use originalCmd (like "/media/file_123.mpg") + const cmd = (episode as any).originalCmd as string; + if (cmd) { + const match = cmd.match(/file_(\d+)/); + if (match) { + return Number(match[1]); + } + // Fallback: hash the cmd string to get a consistent number + return this.hashString(cmd); } - // Fallback: hash the cmd string to get a consistent number - return this.hashString(cmd || ''); + // Final fallback: use the hashed id + return Number(episode.id); } - // For vod-series and xtream, use the numeric id directly + if (customSid === 'vod-series') { + // For vod-series, use originalId from the API + const originalId = (episode as any).originalId; + const numId = Number(originalId); + return isNaN(numId) ? this.hashString(String(originalId)) : numId; + } + + // For xtream (non-Stalker), use the numeric id directly const numId = Number(episode.id); return isNaN(numId) ? this.hashString(String(episode.id)) : numId; } @@ -118,10 +175,23 @@ export class SeasonContainerComponent { toggleWatched(event: Event, episode: XtreamSerieEpisode) { event.stopPropagation(); - const playlistId = this.xtreamStore.currentPlaylist().id; + const playlistId = this.getPlaylistId(episode); + if (!playlistId) { + console.warn('[SeasonContainer] Cannot toggle watched: no playlist ID'); + return; + } + + // For Stalker episodes, we need to use the content ID that matches + // what the player uses (originalId for vod-series) + const contentId = this.getEpisodeContentId(episode); + const episodeWithCorrectId = { + ...episode, + id: String(contentId), + } as XtreamSerieEpisode; + this.xtreamStore.toggleEpisodeWatched( playlistId, - episode, + episodeWithCorrectId, this.seriesId() ); } @@ -140,26 +210,33 @@ export class SeasonContainerComponent { } isEpisodeWatched(episode: XtreamSerieEpisode) { - return this.xtreamStore.isWatched(Number(episode.id), 'episode'); + const contentId = this.getEpisodeContentId(episode); + return this.xtreamStore.isWatched(contentId, 'episode'); } isEpisodeInProgress(episode: XtreamSerieEpisode) { - return this.xtreamStore.isInProgress(Number(episode.id), 'episode'); + const contentId = this.getEpisodeContentId(episode); + const inProgress = this.xtreamStore.isInProgress(contentId, 'episode'); + if (inProgress) { + console.log( + `[SeasonContainer] Episode ${episode.title} (contentId=${contentId}, originalId=${(episode as any).originalId}) is IN PROGRESS` + ); + } + return inProgress; } getEpisodeProgress(episode: XtreamSerieEpisode) { - return this.xtreamStore.getProgressPercent( - Number(episode.id), - 'episode' - ); + const contentId = this.getEpisodeContentId(episode); + return this.xtreamStore.getProgressPercent(contentId, 'episode'); } getEpisodePositionText(episode: XtreamSerieEpisode): string | null { if (this.isEpisodeWatched(episode)) return null; + const contentId = this.getEpisodeContentId(episode); const position = this.xtreamStore .playbackPositions() - .get(`episode_${episode.id}`); + .get(`episode_${contentId}`); if (!position || !position.positionSeconds) return null; let seconds = position.positionSeconds; @@ -258,11 +335,12 @@ export class SeasonContainerComponent { let cmd: string; if (customSid === 'vod-series') { - // VOD series episode - construct the cmd using episode id - cmd = `/media/file_${episode.id}.mpg`; + // VOD series episode - use originalId for the cmd + const originalId = (episode as any).originalId; + cmd = `/media/file_${originalId}.mpg`; } else { - // Regular series - episode.id contains the cmd - cmd = episode.id as unknown as string; + // Regular series - use originalCmd for the cmd + cmd = (episode as any).originalCmd as string; } // Resolve the actual stream URL via Stalker API diff --git a/apps/web/src/app/xtream-tauri/sidebar.scss b/apps/web/src/app/xtream-tauri/sidebar.scss index d1aab229c..51e13ef90 100644 --- a/apps/web/src/app/xtream-tauri/sidebar.scss +++ b/apps/web/src/app/xtream-tauri/sidebar.scss @@ -1,8 +1,13 @@ .sidebar { + // Width is controlled by the resizable directive + // Default fallback if directive not applied width: 400px; + min-width: 250px; + max-width: 600px; border-right: 1px solid #333; display: flex; flex-direction: column; + flex-shrink: 0; // Prevent sidebar from shrinking .sidebar-header { padding: 16px; diff --git a/apps/web/src/app/xtream-tauri/vod-details/vod-details.component.html b/apps/web/src/app/xtream-tauri/vod-details/vod-details-route.component.html similarity index 100% rename from apps/web/src/app/xtream-tauri/vod-details/vod-details.component.html rename to apps/web/src/app/xtream-tauri/vod-details/vod-details-route.component.html diff --git a/apps/web/src/app/xtream-tauri/vod-details/vod-details.component.ts b/apps/web/src/app/xtream-tauri/vod-details/vod-details-route.component.ts similarity index 93% rename from apps/web/src/app/xtream-tauri/vod-details/vod-details.component.ts rename to apps/web/src/app/xtream-tauri/vod-details/vod-details-route.component.ts index bd54924af..b31b0ef4c 100644 --- a/apps/web/src/app/xtream-tauri/vod-details/vod-details.component.ts +++ b/apps/web/src/app/xtream-tauri/vod-details/vod-details-route.component.ts @@ -9,10 +9,20 @@ import { XtreamVodDetails } from 'shared-interfaces'; import { DownloadsService } from '../../services/downloads.service'; import { SettingsStore } from '../../services/settings-store.service'; import { XtreamStore } from '../stores/xtream.store'; -import { SafePipe } from './safe.pipe'; +import { SafePipe } from '@iptvnator/pipes'; +/** + * Route-based VOD details container for Xtream. + * + * This is a "smart" component that: + * - Reads route params (vodId, categoryId) + * - Fetches data via XtreamStore + * - Manages playback and favorites + * + * Used for route-based navigation: /xtreams/:id/vod/:categoryId/:vodId + */ @Component({ - templateUrl: './vod-details.component.html', + templateUrl: './vod-details-route.component.html', styleUrls: ['../detail-view.scss'], imports: [ ContentHeroComponent, @@ -23,7 +33,7 @@ import { SafePipe } from './safe.pipe'; MatProgressSpinnerModule, ], }) -export class VodDetailsComponent implements OnInit, OnDestroy { +export class VodDetailsRouteComponent implements OnInit, OnDestroy { private location = inject(Location); private settingsStore = inject(SettingsStore); private route = inject(ActivatedRoute); diff --git a/apps/web/src/app/xtream-tauri/xtream-main-container.component.html b/apps/web/src/app/xtream-tauri/xtream-main-container.component.html index 4831086df..51b9e9d1b 100644 --- a/apps/web/src/app/xtream-tauri/xtream-main-container.component.html +++ b/apps/web/src/app/xtream-tauri/xtream-main-container.component.html @@ -1,4 +1,11 @@ -
+
{ const newPlaylistId = params['id']; - // Skip if playlist ID hasn't changed (after first load) - if (!this.isFirstLoad && this.currentPlaylistId === newPlaylistId) { + // Skip if playlist ID hasn't changed + if (this.currentPlaylistId === newPlaylistId) { return; } - if (this.isFirstLoad) { - // First load - just set the playlist ID without resetting - this.xtreamStore.setPlaylistId(newPlaylistId); - this.isFirstLoad = false; - } else { - // Switching to a different playlist - reset and set new ID - this.xtreamStore.resetStore(newPlaylistId); - } + // Always reset the store when playlist changes to prevent stale data + // from previous sessions showing up (the store is a singleton) + this.xtreamStore.resetStore(newPlaylistId); this.currentPlaylistId = newPlaylistId; this.store.dispatch( @@ -83,13 +77,16 @@ export class XtreamShellComponent { await this.xtreamStore.checkPortalStatus(); }); - effect( - () => { - if (this.xtreamStore.currentPlaylist() !== null) { - this.xtreamStore.initializeContent(); - } - }, - ); + effect(() => { + const playlist = this.xtreamStore.currentPlaylist(); + const playlistId = this.xtreamStore.playlistId(); + + // Only initialize content when playlist is loaded AND matches the current playlistId + // This prevents stale data from a previous session from being used + if (playlist !== null && playlist.id === playlistId) { + this.xtreamStore.initializeContent(); + } + }); } handleCategoryClick(category: 'vod' | 'live' | 'series') { diff --git a/apps/web/src/app/xtream-tauri/xtream.routes.ts b/apps/web/src/app/xtream-tauri/xtream.routes.ts index c337c358b..771c8312d 100644 --- a/apps/web/src/app/xtream-tauri/xtream.routes.ts +++ b/apps/web/src/app/xtream-tauri/xtream.routes.ts @@ -53,9 +53,9 @@ export const xtreamRoutes: Route[] = [ { path: ':categoryId/:vodId', loadComponent: () => - import('./vod-details/vod-details.component').then( - (c) => c.VodDetailsComponent - ), + import( + './vod-details/vod-details-route.component' + ).then((c) => c.VodDetailsRouteComponent), }, ], }, diff --git a/apps/web/src/app/xtream/vod-details/vod-details.component.html b/apps/web/src/app/xtream/vod-details/vod-details.component.html index 6828b3410..b77ad7283 100644 --- a/apps/web/src/app/xtream/vod-details/vod-details.component.html +++ b/apps/web/src/app/xtream/vod-details/vod-details.component.html @@ -1,65 +1,77 @@ +@let meta = normalizedMeta(); + - @if (item.info?.releasedate) { - {{ - item.info.releasedate | slice: 0 : 4 - }} + @if (meta.year) { + {{ meta.year }} } - @if (item.info?.genre) { - {{ item.info.genre }} + @if (meta.genre) { + {{ meta.genre }} } - @if (item.info?.duration) { - {{ item.info.duration }} + @if (meta.duration) { + {{ meta.duration }} } - @if (item.info?.rating_imdb) { + @if (meta.ratingImdb) { - ⭐ {{ item.info.rating_imdb }} + ⭐ {{ meta.ratingImdb }} } - @if (item.info?.country) { - {{ item.info.country }} + @if (meta.country) { + {{ meta.country }} } - @if (item.info?.actors) { + @if (meta.actors) {
{{ 'XTREAM.ACTORS' | translate }} - {{ item.info.actors }} + {{ meta.actors }}
} - @if (item.info?.director) { + @if (meta.director) {
{{ 'XTREAM.DIRECTOR' | translate }} - {{ item.info.director }} + {{ meta.director }}
} - @if (item.info?.rating_kinopoisk) { + @if (meta.ratingKinopoisk) {
- {{ - 'XTREAM.KINOPOISK_RATING' | translate - }} - {{ item.info.rating_kinopoisk }} + {{ 'XTREAM.KINOPOISK_RATING' | translate }} + {{ meta.ratingKinopoisk }}
} - - @if (!isFavorite) { + + @if (hasPlaybackPosition()) { + + + } @else { + + } + + + @if (!isFavorite()) { } - @if (isElectron) { - @if (isDownloaded) { + + + @if (isElectron()) { + @if (isDownloaded()) { - } @else if (isDownloading) { + } @else if (isDownloading()) { } @else { - @@ -93,16 +107,13 @@ } - - @if (item.info?.youtube_trailer) { + + @if (meta.youtubeTrailer) {

{{ 'XTREAM.YOUTUBE_TRAILER' | translate }}