Episode selector concept done

src/components/media/ModalEpisodeSelector.tsx

@@ -1,11 +1,54 @@
-// We make a episode selector modal component that will be used in the media page to select the episode to play.
+import React, { useEffect, useState } from 'react';
+import { get } from "@/backend/metadata/tmdb";
+import { conf } from "@/setup/config";
 
-// import { get } from "../backend/metadata/tmdb";
-//  (or whatever the relevant path is to backend/metadata/tmdb)
-// import { conf } from "@/setup/config";
+interface ModalEpisodeSelectorProps {
+  tmdbId: string;
+}
 
-// const data = await get<any>("/tv)/[tmdbID-HERE]/season/[seasonNumber-HERE]", {
-//           api_key: conf().TMDB_READ_API_KEY,
-//           language: "en-US",
-//         });
-// Then data will return json of the season information including all the episode names. So just call data.episodes to get a json output of all the episode info
+interface Season {
+  season_number: number;
+}
+
+export const EpisodeSelector: React.FC<ModalEpisodeSelectorProps> = ({ tmdbId }) => {
+  const [seasonsData, setSeasonsData] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchSeasons = async () => {
+      try {
+        // Fetch TV show details to get seasons list
+        const showDetails = await get<any>(`/tv/${tmdbId}`, {
+          api_key: conf().TMDB_READ_API_KEY,
+          language: "en-US",
+        });
+
+        const seasons = showDetails.seasons as Season[];
+        const seasonsDetailsPromises = seasons.map(season => 
+          get<any>(`/tv/${tmdbId}/season/${season.season_number}`, {
+            api_key: conf().TMDB_READ_API_KEY,
+            language: "en-US",
+          })
+        );
+
+        // Fetch details for all seasons concurrently
+        const seasonsDetails = await Promise.all(seasonsDetailsPromises);
+        setSeasonsData(seasonsDetails);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    fetchSeasons();
+  }, [tmdbId]);
+
+  console.log(seasonsData)
+  return (
+    <div>
+      {seasonsData.map((season, index) => (
+        <div key={index}>
+          Season {season.season_number}: {season.name}
+        </div>
+      ))}
+    </div>
+  );
+};

src/components/media/PopupModal.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { get } from "@/backend/metadata/tmdb";
 import { conf } from "@/setup/config";
 import { MediaItem } from "@/utils/mediaTypes";
+import { EpisodeSelector } from "./ModalEpisodeSelector";
 
 import { Button } from "../buttons/Button";
 import { Icon, Icons } from "../Icon";
@@ -256,6 +257,13 @@ export function PopupModal({
           <div className="relative whitespace-normal font-medium overflow-y-auto max-h-40">
             {data?.overview}
           </div>
+          <div>
+            {isTVShow ? (
+              <EpisodeSelector
+                tmdbId={media.id}
+              />
+              ): null}
+          </div>
           <div className="flex justify-center items-center mt-4 mb-1">
             <Button
               theme="purple"