diff --git a/src/components/media/ModalEpisodeSelector.tsx b/src/components/media/ModalEpisodeSelector.tsx index e19b6556..fa3ce58b 100644 --- a/src/components/media/ModalEpisodeSelector.tsx +++ b/src/components/media/ModalEpisodeSelector.tsx @@ -9,16 +9,25 @@ interface ModalEpisodeSelectorProps { mediaTitle: string; } +interface Season { + season_number: number; + id: number; +} + +interface ShowDetails { + seasons: Season[]; +} + export function EpisodeSelector({ tmdbId, mediaTitle, }: ModalEpisodeSelectorProps) { - const [seasonsData, setSeasonsData] = useState([]); + const [seasonsData, setSeasonsData] = useState([]); const [selectedSeason, setSelectedSeason] = useState(null); const navigate = useNavigate(); const handleSeasonSelect = useCallback( - async (season: any) => { + async (season: Season) => { try { const seasonDetails = await get( `/tv/${tmdbId}/season/${season.season_number}`, @@ -27,7 +36,11 @@ export function EpisodeSelector({ language: "en-US", }, ); - setSelectedSeason(seasonDetails); + setSelectedSeason({ + ...seasonDetails, + season_number: season.season_number, + id: season.id, + }); } catch (err) { console.error(err); } @@ -38,16 +51,18 @@ export function EpisodeSelector({ useEffect(() => { const fetchSeasons = async () => { try { - const showDetails = await get(`/tv/${tmdbId}`, { + const showDetails = await get(`/tv/${tmdbId}`, { api_key: conf().TMDB_READ_API_KEY, language: "en-US", }); setSeasonsData(showDetails.seasons); - if (showDetails.seasons[0] === 0) { - // Default to first season + const regularSeasons = showDetails.seasons.filter( + (season: Season) => season.season_number > 0, + ); + if (regularSeasons.length > 0) { + handleSeasonSelect(regularSeasons[0]); + } else if (showDetails.seasons.length > 0) { handleSeasonSelect(showDetails.seasons[0]); - } else { - handleSeasonSelect(showDetails.seasons[1]); } } catch (err) { console.error(err); @@ -59,13 +74,12 @@ export function EpisodeSelector({ return (
- {seasonsData.map((season) => ( + {seasonsData.map((season: Season) => (
handleSeasonSelect(season)} className={`cursor-pointer p-1 text-center rounded transition-transform duration-200 ${ - selectedSeason && - season.season_number === selectedSeason.season_number + selectedSeason && season.id === selectedSeason.id ? "bg-search-background" : "hover:bg-search-background hover:scale-95" }`} @@ -84,24 +98,29 @@ export function EpisodeSelector({ episode_number: number; name: string; still_path: string; - show_id: number; id: number; }) => (
- navigate( - `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${episode.show_id}/${episode.id}`, - ) - } + key={episode.id} + onClick={() => { + const url = `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${selectedSeason.id}/${episode.id}`; + // eslint-disable-next-line no-console + console.log(`Navigating to: ${url}`); + // eslint-disable-next-line no-console + console.log( + `Season ID: ${selectedSeason.id}, Episode ID: ${episode.id}`, + ); + navigate(url); + }} className="bg-mediaCard-hoverBackground rounded p-2 hover:scale-95 transition-transform transition-border-color duration-[0.28s] ease-in-out transform-origin-center" > {episode.name}

- {episode.name} + {`S${selectedSeason.season_number}E${episode.episode_number}: ${episode.name}`}

),