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,22 +11,8 @@ export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
   const [seasonsData, setSeasonsData] = useState<any[]>([]);
   const [selectedSeason, setSelectedSeason] = useState<any>(null);
 
-  useEffect(() => {
-    const fetchSeasons = async () => {
-      try {
-        const showDetails = await get<any>(`/tv/${tmdbId}`, {
-          api_key: conf().TMDB_READ_API_KEY,
-          language: "en-US",
-        });
-        setSeasonsData(showDetails.seasons);
-      } catch (err) {
-        console.error(err);
-      }
-    };
-    fetchSeasons();
-  }, [tmdbId]);
-
-  const handleSeasonSelect = async (season: any) => {
+  const handleSeasonSelect = useCallback(
+    async (season: any) => {
       try {
         const seasonDetails = await get<any>(
           `/tv/${tmdbId}/season/${season.season_number}`,
@@ -39,46 +25,69 @@ export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
       } catch (err) {
         console.error(err);
       }
+    },
+    [tmdbId],
+  );
+
+  useEffect(() => {
+    const fetchSeasons = async () => {
+      try {
+        const showDetails = await get<any>(`/tv/${tmdbId}`, {
+          api_key: conf().TMDB_READ_API_KEY,
+          language: "en-US",
+        });
+        setSeasonsData(showDetails.seasons);
+        handleSeasonSelect(showDetails.seasons[0]); // Default to first season
+      } catch (err) {
+        console.error(err);
+      }
     };
+    fetchSeasons();
+  }, [handleSeasonSelect, tmdbId]);
 
   return (
-    <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">
+    <div className="flex flex-row">
+      <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">
+        <div className="grid grid-cols-3 gap-2">
           {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>
+            selectedSeason.episodes.map(
+              (episode: {
+                episode_number: number;
+                name: string;
+                still_path: string;
+              }) => (
+                <div
+                  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"
+                >
+                  <img
+                    src={`https://image.tmdb.org/t/p/w300/${episode.still_path}`}
+                    alt={episode.name}
+                    className="w-full h-auto rounded"
+                  />
+                  <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>
               ),
-              )}
-            </ul>
-          </div>
+            )
           ) : (
-          <div>
-            <p>Select a season to see details</p>
+            <div className="text-center w-full">
+              Select a season to see episodes
             </div>
           )}
         </div>
       </div>
+    </div>
   );
 }