Update ModalEpisodeSelector.tsx

src/components/media/ModalEpisodeSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { get } from "@/backend/metadata/tmdb";
 import { conf } from "@/setup/config";
@@ -11,6 +11,24 @@ export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
   const [seasonsData, setSeasonsData] = useState<any[]>([]);
   const [selectedSeason, setSelectedSeason] = useState<any>(null);
 
+  const handleSeasonSelect = useCallback(
+    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);
+      }
+    },
+    [tmdbId],
+  );
+
   useEffect(() => {
     const fetchSeasons = async () => {
       try {
@@ -19,65 +37,56 @@ export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
           language: "en-US",
         });
         setSeasonsData(showDetails.seasons);
+        handleSeasonSelect(showDetails.seasons[0]); // Default to first season
       } catch (err) {
         console.error(err);
       }
     };
     fetchSeasons();
-  }, [tmdbId]);
+  }, [handleSeasonSelect, tmdbId]);
-
-  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 className="flex p-2 mt-4 bg-mediaCard-hoverBackground rounded max-h-48 overflow-hidden">
+    <div className="flex flex-row">
-      <div className="flex-none w-20 overflow-y-auto max-h-48">
+      <div className="sm:w-96 w-96 sm:block flex-auto overflow-y-scroll overflow-x-hidden max-h-52 scrollbar-track-gray-300">
         {seasonsData.map((season) => (
           <div
             key={season.season_number}
             onClick={() => handleSeasonSelect(season)}
-            className="cursor-pointer hover:bg-search-background p-1 text-center rounded"
+            className="cursor-pointer hover:bg-search-background p-1 text-center rounded hover:scale-95 transition-transform duration-300"
           >
             S{season.season_number}
           </div>
         ))}
       </div>
-      <div className="flex-auto p-2 overflow-y-auto max-h-96">
+      <div className="flex-auto mt-4 sm:mt-0 sm:ml-4 overflow-y-auto overflow-x-hidden max-h-52 order-1 sm:order-2">
-        {selectedSeason ? (
+        <div className="grid grid-cols-3 gap-2">
-          <div>
+          {selectedSeason ? (
-            <h2>
+            selectedSeason.episodes.map(
-              {selectedSeason.name} - {selectedSeason.episodes.length} episodes
+              (episode: {
-            </h2>
+                episode_number: number;
-            <ul>
+                name: string;
-              {selectedSeason.episodes.map(
+                still_path: string;
-                (
+              }) => (
-                  episode: { episode_number: number; name: string },
+                <div
-                  index: number,
+                  key={episode.episode_number}
-                ) => (
+                  className="bg-mediaCard-hoverBackground rounded p-2 hover:scale-95 hover:border-purple-500 hover:border-2 transition-all duration-300 relative"
-                  <li key={episode.episode_number}>
+                >
-                    {episode.episode_number}. {episode.name}
+                  <img
-                  </li>
+                    src={`https://image.tmdb.org/t/p/w300/${episode.still_path}`}
-                ),
+                    alt={episode.name}
-              )}
+                    className="w-full h-auto rounded"
-            </ul>
+                  />
-          </div>
+                  <p className="text-center mt-2">{episode.name}</p>
-        ) : (
+                  <div className="absolute inset-0 opacity-0 hover:opacity-20 transition-opacity duration-300 bg-purple-500 rounded pointer-events-none" />
-          <div>
+                </div>
-            <p>Select a season to see details</p>
+              ),
-          </div>
+            )
-        )}
+          ) : (
+            <div className="text-center w-full">
+              Select a season to see episodes
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );