fixed modal

src/components/media/ModalEpisodeSelector.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { get } from "@/backend/metadata/tmdb";
+import { Flare } from "@/components/utils/Flare";
 import { conf } from "@/setup/config";
 
 interface ModalEpisodeSelectorProps {
@@ -9,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}`,
@@ -36,11 +28,7 @@ export function EpisodeSelector({
             language: "en-US",
           },
         );
-        setSelectedSeason({
+        setSelectedSeason(seasonDetails);
-          ...seasonDetails,
-          season_number: season.season_number,
-          id: season.id,
-        });
       } catch (err) {
         console.error(err);
       }
@@ -51,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(
+        if (showDetails.seasons[0] === 0) {
-          (season: Season) => season.season_number > 0,
+          // Default to first season
-        );
-        if (regularSeasons.length > 0) {
-          handleSeasonSelect(regularSeasons[0]);
-        } else if (showDetails.seasons.length > 0) {
           handleSeasonSelect(showDetails.seasons[0]);
+        } else {
+          handleSeasonSelect(showDetails.seasons[1]);
         }
       } catch (err) {
         console.error(err);
@@ -72,14 +58,15 @@ export function EpisodeSelector({
   }, [handleSeasonSelect, tmdbId]);
 
   return (
-    <div className="flex flex-row">
+    <div className="flex flex-row relative">
-      <div className="sm:w-96 w-96 sm:block cursor-pointer overflow-y-scroll overflow-x-hidden max-h-60 max-w-24">
+      <div className="w-24 sm:w-96 cursor-pointer overflow-y-auto overflow-x-hidden max-h-60 z-10">
-        {seasonsData.map((season: Season) => (
+        {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"
             }`}
@@ -90,39 +77,42 @@ 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="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="grid grid-cols-3 gap-2">
+        <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;
               }) => (
-                <div
+                <Flare.Base
-                  key={episode.id}
+                  key={episode.episode_number}
-                  onClick={() => {
+                  onClick={() =>
-                    const url = `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${selectedSeason.id}/${episode.id}`;
+                    navigate(
-                    // eslint-disable-next-line no-console
+                      `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${episode.show_id}/${episode.id}`,
-                    console.log(`Navigating to: ${url}`);
+                    )
-                    // eslint-disable-next-line no-console
+                  }
-                    console.log(
+                  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"
-                      `Season ID: ${selectedSeason.id}, Episode ID: ${episode.id}`,
-                    );
-                    navigate(url);
-                  }}
-                  className="bg-mediaCard-hoverBackground rounded p-2 hover:scale-95 transition-transform transition-border-color duration-[0.28s] ease-in-out transform-origin-center"
                 >
+                  <Flare.Light
+                    flareSize={300}
+                    cssColorVar="--colors-mediaCard-hoverAccent"
+                    backgroundClass="bg-mediaCard-hoverBackground duration-200"
+                    className="rounded-xl bg-background-main group-hover:opacity-100"
+                  />
+                  <div className="relative z-10">
                     <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>
               ),
             )
           ) : (