polishing episode selector

src/components/media/ModalEpisodeSelector.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
+
 import { get } from "@/backend/metadata/tmdb";
 import { conf } from "@/setup/config";
 
@@ -6,49 +7,78 @@ interface ModalEpisodeSelectorProps {
   tmdbId: string;
 }
 
-interface Season {
-  season_number: number;
-}
-
-export const EpisodeSelector: React.FC<ModalEpisodeSelectorProps> = ({ tmdbId }) => {
+export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
   const [seasonsData, setSeasonsData] = useState<any[]>([]);
+  const [selectedSeason, setSelectedSeason] = useState<any>(null);
 
   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);
+        setSeasonsData(showDetails.seasons);
       } catch (err) {
         console.error(err);
       }
     };
-
     fetchSeasons();
   }, [tmdbId]);
 
-  console.log(seasonsData)
+  const handleSeasonSelect = async (season: any) => {
+    try {
+      const seasonDetails = await get<any>(
+        `/tv/${tmdbId}/season/${season.season_number}`,
+        {
+          api_key: conf().TMDB_READ_API_KEY,
+          language: "en-US",
+        },
+      );
+      setSelectedSeason(seasonDetails);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   return (
-    <div>
-      {seasonsData.map((season, index) => (
-        <div key={index}>
-          Season {season.season_number}: {season.name}
-        </div>
-      ))}
+    <div className="flex p-2 mt-4 bg-mediaCard-hoverBackground rounded max-h-48 overflow-hidden">
+      <div className="flex-none w-20 overflow-y-auto max-h-48">
+        {seasonsData.map((season) => (
+          <div
+            key={season.season_number}
+            onClick={() => handleSeasonSelect(season)}
+            className="cursor-pointer hover:bg-search-background p-1 text-center rounded"
+          >
+            S{season.season_number}
+          </div>
+        ))}
+      </div>
+      <div className="flex-auto p-2 overflow-y-auto max-h-96">
+        {selectedSeason ? (
+          <div>
+            <h2>
+              {selectedSeason.name} - {selectedSeason.episodes.length} episodes
+            </h2>
+            <ul>
+              {selectedSeason.episodes.map(
+                (
+                  episode: { episode_number: number; name: string },
+                  index: number,
+                ) => (
+                  <li key={episode.episode_number}>
+                    {episode.episode_number}. {episode.name}
+                  </li>
+                ),
+              )}
+            </ul>
+          </div>
+        ) : (
+          <div>
+            <p>Select a season to see details</p>
+          </div>
+        )}
+      </div>
     </div>
   );
-};
+}

src/components/media/PopupModal.tsx

@@ -5,8 +5,8 @@ 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 { EpisodeSelector } from "./ModalEpisodeSelector";
 import { Button } from "../buttons/Button";
 import { Icon, Icons } from "../Icon";
 
@@ -154,7 +154,7 @@ export function PopupModal({
     >
       <div
         ref={modalRef}
-        className="rounded-xl p-3 m-8 bg-modal-background flex justify-center items-center transition-opacity duration-100 max-w-full sm:max-w-xl"
+        className="rounded-xl p-3 m-4 sm:m-8 bg-modal-background flex justify-center items-center transition-opacity duration-100 max-w-full sm:max-w-xl w-full sm:w-auto"
         style={{ opacity: style.opacity }}
       >
         <div className="aspect-w-16 aspect-h-9 overflow-y-auto w-full sm:w-auto">
@@ -194,11 +194,9 @@ export function PopupModal({
                       const releaseInfo = mediaInfo?.results?.find(
                         (result: any) => result.iso_3166_1 === "US",
                       );
-                      return releaseInfo && releaseInfo.rating ? (
-                        releaseInfo.rating
-                      ) : (
-                        <Skeleton />
-                      );
+                      return releaseInfo && releaseInfo.rating
+                        ? releaseInfo.rating
+                        : "NR";
                     })()}
                   </span>
                 </div>
@@ -245,25 +243,22 @@ export function PopupModal({
             </div>
             {data?.genres?.length > 0
               ? data.genres.map((genre: { name: string }) => (
-                  <div
-                    key={genre.name}
-                    className="px-2 py-1 bg-mediaCard-hoverBackground rounded hover:bg-search-background cursor-default duration-200 transition-colors"
-                  >
-                    {genre.name}
+                  <div key={genre.name} className="inline-block">
+                    <div className="px-2 py-1 bg-mediaCard-hoverBackground rounded hover:bg-search-background cursor-default duration-200 transition-colors transform hover:scale-110">
+                      {genre.name}
+                    </div>
                   </div>
                 ))
-              : Array.from({ length: 3 }).map((_) => <Skeleton />)}
+              : Array.from({ length: 3 }).map((_) => (
+                  <div className="inline-block">
+                    <Skeleton />
+                  </div>
+                ))}
           </div>
-          <div className="relative whitespace-normal font-medium overflow-y-auto max-h-40">
+          <div className="relative whitespace-normal font-medium overflow-y-auto max-h-32">
             {data?.overview}
           </div>
-          <div>
-            {isTVShow ? (
-              <EpisodeSelector
-                tmdbId={media.id}
-              />
-              ): null}
-          </div>
+          <div>{isTVShow ? <EpisodeSelector tmdbId={media.id} /> : null}</div>
           <div className="flex justify-center items-center mt-4 mb-1">
             <Button
               theme="purple"