From 0b9ce5867ca55f71ebe0a0625c127bbcac80714e Mon Sep 17 00:00:00 2001 From: Abdullah Khan <85450222+AbdullahDaGoat@users.noreply.github.com> Date: Fri, 21 Jun 2024 00:29:35 -0400 Subject: [PATCH 1/4] Update ModalEpisodeSelector.tsx From 47d4dee0cec5e08a44e62a975d4f41ac3dfd7c9f Mon Sep 17 00:00:00 2001 From: Abdullah Khan <85450222+AbdullahDaGoat@users.noreply.github.com> Date: Fri, 21 Jun 2024 00:30:16 -0400 Subject: [PATCH 2/4] Update PopupModal.tsx From 975c9e7d851f0fd216949b18bc8dc4d987d98080 Mon Sep 17 00:00:00 2001 From: Abdullah Khan <85450222+AbdullahDaGoat@users.noreply.github.com> Date: Fri, 21 Jun 2024 00:44:42 -0400 Subject: [PATCH 3/4] Flaire --- src/components/media/ModalEpisodeSelector.tsx | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/media/ModalEpisodeSelector.tsx b/src/components/media/ModalEpisodeSelector.tsx index fa3ce58b..c2510f1d 100644 --- a/src/components/media/ModalEpisodeSelector.tsx +++ b/src/components/media/ModalEpisodeSelector.tsx @@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { get } from "@/backend/metadata/tmdb"; +import { Flare } from "@/components/utils/Flare"; import { conf } from "@/setup/config"; interface ModalEpisodeSelectorProps { @@ -100,29 +101,35 @@ export function EpisodeSelector({ still_path: string; id: number; }) => ( -
{ 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" + className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-[0.28s]" > - {episode.name} -

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

-
+
+ {episode.name} +

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

+
+ ), ) ) : ( From cd32e5205957aa47508056c57e6edec920835a6f Mon Sep 17 00:00:00 2001 From: Abdullah Khan <85450222+AbdullahDaGoat@users.noreply.github.com> Date: Fri, 21 Jun 2024 00:51:48 -0400 Subject: [PATCH 4/4] Update ModalEpisodeSelector.tsx --- src/components/media/ModalEpisodeSelector.tsx | 67 +++++++------------ 1 file changed, 25 insertions(+), 42 deletions(-) diff --git a/src/components/media/ModalEpisodeSelector.tsx b/src/components/media/ModalEpisodeSelector.tsx index c2510f1d..c2912cbf 100644 --- a/src/components/media/ModalEpisodeSelector.tsx +++ b/src/components/media/ModalEpisodeSelector.tsx @@ -10,25 +10,16 @@ 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: Season) => { + async (season: any) => { try { const seasonDetails = await get( `/tv/${tmdbId}/season/${season.season_number}`, @@ -37,11 +28,7 @@ export function EpisodeSelector({ language: "en-US", }, ); - setSelectedSeason({ - ...seasonDetails, - season_number: season.season_number, - id: season.id, - }); + setSelectedSeason(seasonDetails); } catch (err) { console.error(err); } @@ -52,18 +39,16 @@ 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); - const regularSeasons = showDetails.seasons.filter( - (season: Season) => season.season_number > 0, - ); - if (regularSeasons.length > 0) { - handleSeasonSelect(regularSeasons[0]); - } else if (showDetails.seasons.length > 0) { + if (showDetails.seasons[0] === 0) { + // Default to first season handleSeasonSelect(showDetails.seasons[0]); + } else { + handleSeasonSelect(showDetails.seasons[1]); } } catch (err) { console.error(err); @@ -73,14 +58,15 @@ export function EpisodeSelector({ }, [handleSeasonSelect, tmdbId]); return ( -
-
- {seasonsData.map((season: Season) => ( +
+
+ {seasonsData.map((season) => (
handleSeasonSelect(season)} className={`cursor-pointer p-1 text-center rounded transition-transform duration-200 ${ - selectedSeason && season.id === selectedSeason.id + selectedSeason && + season.season_number === selectedSeason.season_number ? "bg-search-background" : "hover:bg-search-background hover:scale-95" }`} @@ -91,27 +77,25 @@ export function EpisodeSelector({
))}
-
-
+
+
{selectedSeason ? ( selectedSeason.episodes.map( (episode: { episode_number: number; name: string; still_path: string; + show_id: number; id: number; }) => ( { - const url = `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${selectedSeason.id}/${episode.id}`; - console.log(`Navigating to: ${url}`); - console.log( - `Season ID: ${selectedSeason.id}, Episode ID: ${episode.id}`, - ); - navigate(url); - }} - className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-[0.28s]" + key={episode.episode_number} + onClick={() => + navigate( + `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${episode.show_id}/${episode.id}`, + ) + } + className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-[0.28s] flex-shrink-0 w-48 sm:w-auto mr-2 sm:mr-0" >

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