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-18 21:45:19 -04:00 committed by GitHub
parent 13d836946e
commit d830115f89
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 53 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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]);
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);
}
};
}, [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">
{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 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 ? (
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>
),
)
) : (
<div className="text-center w-full">
Select a season to see episodes
</div>
)}
</div>
</div>
</div>
);