diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 98c4cd4e1..54bd330b6 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -18,7 +18,14 @@ "Bash(npx tsc:*)", "Bash(find:*)", "Bash(xargs sed:*)", - "Skill(frontend-design)" + "Skill(frontend-design)", + "mcp__angular-cli__get_best_practices", + "mcp__nx-mcp__nx_workspace", + "Bash(grep:*)", + "Bash(npx nx lint:*)", + "Bash(npx nx build:*)", + "Bash(npx eslint:*)", + "Bash(npx nx run:*)" ], "deny": [], "ask": [] diff --git a/README.md b/README.md index decbf3e32..c7588e248 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ GitHub Workflow Status Releases Codecov Telegram Bluesky

-Telegram channel for discussions +Telegram channel for discussions | Buy me a coffee | GitHub Sponsors **IPTVnator** is a video player application that provides support for IPTV playlist playback (m3u, m3u8). The application allows users to import playlists using remote URLs or by uploading files from the local file system. Additionally, it supports EPG information in XMLTV format which can be provided via URL. 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..eeeb03b99 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 @@ -8,6 +8,31 @@ import { ipcMain } from 'electron'; import { getDatabase } from '../../database/connection'; import * as schema from '../../database/schema'; +/** + * Ensure playlist exists in SQLite (auto-create if missing) + * This handles legacy playlists that weren't synced to SQLite + */ +async function ensurePlaylistExists( + db: any, + playlistId: string, + playlistType: 'xtream' | 'stalker' | 'm3u-file' | 'm3u-text' | 'm3u-url' = 'stalker' +): Promise { + const existing = await db + .select() + .from(schema.playlists) + .where(eq(schema.playlists.id, playlistId)) + .limit(1); + + if (existing.length === 0) { + // Create a minimal placeholder entry for the playlist + await db.insert(schema.playlists).values({ + id: playlistId, + name: 'Imported Playlist', + type: playlistType, + }); + } +} + /** * Save/update playback position for content */ @@ -15,13 +40,11 @@ ipcMain.handle( 'DB_SAVE_PLAYBACK_POSITION', async (event, playlistId: string, data: any) => { try { - console.log( - '[DatabaseEvents] Saving playback position:', - playlistId, - data - ); const db = await getDatabase(); + // Ensure playlist exists (handles legacy playlists not in SQLite) + await ensurePlaylistExists(db, playlistId, data.playlistType); + // Prepare values const values = { playlistId, @@ -83,9 +106,6 @@ ipcMain.handle( contentType: 'vod' | 'episode' ) => { try { - console.log( - `[DatabaseEvents] Getting playback position: playlistId=${playlistId}, id=${contentXtreamId}, type=${contentType}` - ); const db = await getDatabase(); const result = await db .select() diff --git a/apps/electron-backend/src/app/events/database/playlist.events.ts b/apps/electron-backend/src/app/events/database/playlist.events.ts index bb5f54d71..190fc1050 100644 --- a/apps/electron-backend/src/app/events/database/playlist.events.ts +++ b/apps/electron-backend/src/app/events/database/playlist.events.ts @@ -21,6 +21,8 @@ ipcMain.handle( serverUrl?: string; username?: string; password?: string; + macAddress?: string; + url?: string; type: string; } ) => { @@ -32,6 +34,8 @@ ipcMain.handle( serverUrl: playlist.serverUrl, username: playlist.username, password: playlist.password, + macAddress: playlist.macAddress, + url: playlist.url, // enforce supported types type: playlist.type as | 'xtream' 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 @@ -
+
star{{ rating }}
} - @let title = i.title ?? i.name; + @let title = i.title ?? i.o_name ?? i.name;
{{ title || 'No name' }} diff --git a/apps/web/src/app/stalker/models/stalker-serial-details.interface.ts b/apps/web/src/app/stalker/models/stalker-serial-details.interface.ts index ddd1fd0fc..5bbdaec99 100644 --- a/apps/web/src/app/stalker/models/stalker-serial-details.interface.ts +++ b/apps/web/src/app/stalker/models/stalker-serial-details.interface.ts @@ -1,13 +1,5 @@ -export interface StalkerSerialDetails { - name: string; - description: string; - director: string; - actors: string; - year: string; - genres_str: string; - age: string; - rating_imdb: string; - rating_kinopoisk: string; - screenshot_uri: string; - added: string; -} +/** + * @deprecated Import from 'shared-interfaces' instead. + * This re-export exists for backward compatibility. + */ +export { StalkerSerialDetails } from 'shared-interfaces'; diff --git a/apps/web/src/app/stalker/models/stalker-vod-details.interface.ts b/apps/web/src/app/stalker/models/stalker-vod-details.interface.ts index 347a1d10e..592a786dc 100644 --- a/apps/web/src/app/stalker/models/stalker-vod-details.interface.ts +++ b/apps/web/src/app/stalker/models/stalker-vod-details.interface.ts @@ -1,15 +1,8 @@ -export interface StalkerVodDetails { - id: string; - cmd: string; - info: { - movie_image: string; - description: string; - name: string; - actors: string; - director: string; - releasedate: string; - genre: string; - rating_imdb: string; - rating_kinopoisk: string; - }; -} +/** + * @deprecated Import from 'shared-interfaces' instead. + * This re-export exists for backward compatibility. + */ +export { + StalkerVodDetails, + StalkerVodInfo, +} from 'shared-interfaces'; diff --git a/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.html b/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.html index 5a2365c84..59f146302 100644 --- a/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.html +++ b/apps/web/src/app/stalker/recently-viewed/recently-viewed.component.html @@ -1,30 +1,29 @@ @if (itemDetails) { - @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..290c02be3 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; @@ -130,9 +131,30 @@ export class RecentlyViewedComponent { this.stalkerStore.setSelectedContentType(item.category_id); switch (item.category_id) { case 'itv': - this.createLinkToPlayVodItv(item.cmd, item.name, item.logo); + this.createLinkToPlayVodItv(item.cmd, item.o_name || 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.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(), + }); + } else { + this.removeFromFavorites(event.item.data.id); + } + } + } + + /** Handle back from vod-details component */ + onVodBack(): void { + this.itemDetails = null; + this.vodDetailsItem = null; + } + async createLinkToPlayVodItv( cmd?: string, title?: string, @@ -158,4 +214,33 @@ 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.o_name || item.name || item.title || 'Unknown', + o_name: item.o_name, + 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..95f7b3980 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; @@ -130,12 +134,32 @@ export class StalkerFavoritesComponent { switch (item.category_id) { case 'itv': this.stalkerStore.setSelectedContentType('itv'); - this.createLinkToPlayVodItv(item.cmd, item.name, item.logo); + this.createLinkToPlayVodItv(item.cmd, item.o_name || item.name, item.logo); break; case 'vod': 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; @@ -154,7 +202,8 @@ export class StalkerFavoritesComponent { const source = item.details || item; const info = source.info || { - name: item.name || item.title || 'Unknown', + name: item.o_name || item.name || item.title || 'Unknown', + o_name: item.o_name, movie_image: item.cover || item.screenshot_uri || item.logo, description: item.description, releasedate: item.releasedate || item.year, @@ -169,6 +218,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 +234,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..3bfd43f62 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() && @@ -31,7 +38,7 @@ " alt="logo" /> - {{ item.name }} + {{ item.o_name || item.name }} -

{{ '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..fe1ed9085 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, input, inject, output, 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; } @@ -98,8 +155,8 @@ export class SeasonContainerComponent { return Math.abs(hash); } - @Output() episodeClicked = new EventEmitter(); - @Output() seasonSelected = new EventEmitter(); + readonly episodeClicked = output(); + readonly seasonSelected = output(); selectedSeason: string; @@ -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/stores/features/with-playback-positions.feature.ts b/apps/web/src/app/xtream-tauri/stores/features/with-playback-positions.feature.ts index 8e08294f2..7a103218f 100644 --- a/apps/web/src/app/xtream-tauri/stores/features/with-playback-positions.feature.ts +++ b/apps/web/src/app/xtream-tauri/stores/features/with-playback-positions.feature.ts @@ -130,22 +130,16 @@ export function withPlaybackPositions() { playlistId ); - console.log( - `[withPlaybackPositions] Loaded all positions (${positions.length})` - ); - const positionsMap = new Map(); const seriesMap = new Map(); positions.forEach((pos) => { - // Populate playbackPositions map const key = getPositionKey( pos.contentType, pos.contentXtreamId ); positionsMap.set(key, pos); - // Populate seriesPositions map if ( pos.contentType === 'episode' && pos.seriesXtreamId @@ -157,10 +151,6 @@ export function withPlaybackPositions() { } }); - console.log( - `[withPlaybackPositions] Series map populated: ${seriesMap.size} series` - ); - patchState(store, { playbackPositions: positionsMap, seriesPositions: seriesMap, @@ -174,13 +164,7 @@ export function withPlaybackPositions() { const positions = store .seriesPositions() .get(seriesXtreamId); - - if (positions && positions.length > 0) { - console.log(`[withPlaybackPositions] Series ${seriesXtreamId} HAS progress`); - return true; - } - // console.log(`[withPlaybackPositions] Series ${seriesXtreamId} NO progress`); - return false; + return positions !== undefined && positions.length > 0; }, /** @@ -196,11 +180,6 @@ export function withPlaybackPositions() { 'vod' ); - console.log( - `[withPlaybackPositions] Loaded VOD position for ${vodXtreamId}:`, - position - ); - if (position) { const key = getPositionKey('vod', vodXtreamId); const updated = new Map(store.playbackPositions()); @@ -221,11 +200,6 @@ export function withPlaybackPositions() { seriesXtreamId ); - console.log( - `[withPlaybackPositions] Loaded series positions for ${seriesXtreamId}:`, - positions - ); - const updated = new Map(store.seriesPositions()); updated.set(seriesXtreamId, positions); patchState(store, { seriesPositions: updated }); @@ -255,10 +229,6 @@ export function withPlaybackPositions() { data.contentType, data.contentXtreamId ); - console.log( - `[withPlaybackPositions] Saving position for ${key}:`, - data - ); const updated = new Map(store.playbackPositions()); updated.set(key, data); patchState(store, { playbackPositions: updated }); @@ -373,18 +343,8 @@ export function withPlaybackPositions() { if (window.electron?.onPlaybackPositionUpdate) { unsubscribe = window.electron.onPlaybackPositionUpdate( (data: any) => { - console.log( - '[withPlaybackPositions] Received update:', - data - ); - // Ensure playlistId is present if (data.playlistId) { store.savePosition(data.playlistId, data); - } else { - console.warn( - '[withPlaybackPositions] Missing playlistId in update', - data - ); } } ); diff --git a/apps/web/src/app/xtream-tauri/stores/features/with-selection.feature.ts b/apps/web/src/app/xtream-tauri/stores/features/with-selection.feature.ts index 760e7105b..0a6f509ac 100644 --- a/apps/web/src/app/xtream-tauri/stores/features/with-selection.feature.ts +++ b/apps/web/src/app/xtream-tauri/stores/features/with-selection.feature.ts @@ -278,13 +278,20 @@ export function withSelection() { /** * Set the selected category + * Only resets page to 0 when category actually changes */ setSelectedCategory(categoryId: number | null): void { - patchState(store, { - selectedCategoryId: - categoryId !== null ? Number(categoryId) : null, - page: 0, - }); + const newCategoryId = + categoryId !== null ? Number(categoryId) : null; + const currentCategoryId = store.selectedCategoryId(); + + // Only reset page if category actually changed + if (currentCategoryId !== newCategoryId) { + patchState(store, { + selectedCategoryId: newCategoryId, + page: 0, + }); + } }, /** 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 }}