Update ModalEpisodeSelector.tsx

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<Season[]>([]);
+  const [seasonsData, setSeasonsData] = useState<any[]>([]);
   const [selectedSeason, setSelectedSeason] = useState<any>(null);
   const navigate = useNavigate();
 
   const handleSeasonSelect = useCallback(
-    async (season: Season) => {
+    async (season: any) => {
       try {
         const seasonDetails = await get<any>(
           `/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<ShowDetails>(`/tv/${tmdbId}`, {
+        const showDetails = await get<any>(`/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 (
-    <div className="flex flex-row">
-      <div className="sm:w-96 w-96 sm:block cursor-pointer overflow-y-scroll overflow-x-hidden max-h-60 max-w-24">
-        {seasonsData.map((season: Season) => (
+    <div className="flex flex-row relative">
+      <div className="w-24 sm:w-96 cursor-pointer overflow-y-auto overflow-x-hidden max-h-60 z-10">
+        {seasonsData.map((season) => (
           <div
-            key={season.id}
+            key={season.season_number}
             onClick={() => 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({
           </div>
         ))}
       </div>
-      <div className="flex-auto mt-4 cursor-pointer sm:mt-0 sm:ml-4 overflow-y-auto overflow-x-hidden max-h-60 order-1 sm:order-2">
-        <div className="grid grid-cols-3 gap-2">
+      <div className="flex-auto mt-4 sm:mt-0 sm:ml-4 overflow-x-auto overflow-y-hidden sm:overflow-y-auto sm:overflow-x-hidden max-h-60 max-w-[70vw] z-0">
+        <div className="flex sm:grid sm:grid-cols-3 sm:gap-2">
           {selectedSeason ? (
             selectedSeason.episodes.map(
               (episode: {
                 episode_number: number;
                 name: string;
                 still_path: string;
+                show_id: number;
                 id: number;
               }) => (
                 <Flare.Base
-                  key={episode.id}
-                  onClick={() => {
-                    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"
                 >
                   <Flare.Light
                     flareSize={300}
@@ -123,10 +107,9 @@ export function EpisodeSelector({
                     <img
                       src={`https://image.tmdb.org/t/p/w500/${episode.still_path}`}
                       className="w-full h-auto rounded"
-                      alt={episode.name}
                     />
                     <p className="text-center text-[0.95em] mt-2">
-                      {`S${selectedSeason.season_number}E${episode.episode_number}: ${episode.name}`}
+                      {episode.name}
                     </p>
                   </div>
                 </Flare.Base>