mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-29 16:07:40 +01:00
Code Issues Wiki Activity

Update ModalEpisodeSelector.tsx

Browse source
This commit is contained in:
Abdullah Khan 2024-06-21 00:51:48 -04:00 committed by GitHub
parent 975c9e7d85
commit cd32e52059
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 25 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/media/ModalEpisodeSelector.tsx
View file

@ -10,25 +10,16 @@ interface ModalEpisodeSelectorProps {
mediaTitle: string; mediaTitle: string;
} }
interface Season {
season_number: number;
id: number;
}
interface ShowDetails {
seasons: Season[];
}
export function EpisodeSelector({ export function EpisodeSelector({
tmdbId, tmdbId,
mediaTitle, mediaTitle,
}: ModalEpisodeSelectorProps) { }: ModalEpisodeSelectorProps) {
const [seasonsData, setSeasonsData] = useState<Season[]>([]); const [seasonsData, setSeasonsData] = useState<any[]>([]);
const [selectedSeason, setSelectedSeason] = useState<any>(null); const [selectedSeason, setSelectedSeason] = useState<any>(null);
const navigate = useNavigate(); const navigate = useNavigate();
const handleSeasonSelect = useCallback( const handleSeasonSelect = useCallback(
async (season: Season) => { async (season: any) => {
try { try {
const seasonDetails = await get<any>( const seasonDetails = await get<any>(
`/tv/${tmdbId}/season/${season.season_number}`, `/tv/${tmdbId}/season/${season.season_number}`,
@ -37,11 +28,7 @@ export function EpisodeSelector({
language: "en-US", language: "en-US",
}, },
); );
setSelectedSeason({ setSelectedSeason(seasonDetails);
...seasonDetails,
season_number: season.season_number,
id: season.id,
});
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
@ -52,18 +39,16 @@ export function EpisodeSelector({
useEffect(() => { useEffect(() => {
const fetchSeasons = async () => { const fetchSeasons = async () => {
try { try {
const showDetails = await get<ShowDetails>(`/tv/${tmdbId}`, { const showDetails = await get<any>(`/tv/${tmdbId}`, {
api_key: conf().TMDB_READ_API_KEY, api_key: conf().TMDB_READ_API_KEY,
language: "en-US", language: "en-US",
}); });
setSeasonsData(showDetails.seasons); 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]); handleSeasonSelect(showDetails.seasons[0]);
} else {
handleSeasonSelect(showDetails.seasons[1]);
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err);
@ -73,14 +58,15 @@ export function EpisodeSelector({
}, [handleSeasonSelect, tmdbId]); }, [handleSeasonSelect, tmdbId]);
return ( 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 <div
key={season.id} key={season.season_number}
onClick={() => handleSeasonSelect(season)} onClick={() => handleSeasonSelect(season)}
className={`cursor-pointer p-1 text-center rounded transition-transform duration-200 ${ 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" ? "bg-search-background"
: "hover:bg-search-background hover:scale-95" : "hover:bg-search-background hover:scale-95"
}`} }`}
@ -91,27 +77,25 @@ export function EpisodeSelector({
</div> </div>
))} ))}
</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 ? (
selectedSeason.episodes.map( selectedSeason.episodes.map(
(episode: { (episode: {
episode_number: number; episode_number: number;
name: string; name: string;
still_path: string; still_path: string;
show_id: number;
id: number; id: number;
}) => ( }) => (
<Flare.Base <Flare.Base
key={episode.id} key={episode.episode_number}
onClick={() => { onClick={() =>
const url = `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${selectedSeason.id}/${episode.id}`; navigate(
console.log(`Navigating to: ${url}`); `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${episode.show_id}/${episode.id}`,
console.log( )
`Season ID: ${selectedSeason.id}, Episode ID: ${episode.id}`, }
); 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"
navigate(url);
}}
className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-[0.28s]"
> >
<Flare.Light <Flare.Light
flareSize={300} flareSize={300}
@ -123,10 +107,9 @@ export function EpisodeSelector({
<img <img
src={`https://image.tmdb.org/t/p/w500/${episode.still_path}`} src={`https://image.tmdb.org/t/p/w500/${episode.still_path}`}
className="w-full h-auto rounded" className="w-full h-auto rounded"
alt={episode.name}
/> />
<p className="text-center text-[0.95em] mt-2"> <p className="text-center text-[0.95em] mt-2">
{`S${selectedSeason.season_number}E${episode.episode_number}: ${episode.name}`} {episode.name}
</p> </p>
</div> </div>
</Flare.Base> </Flare.Base>