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-20 17:54:10 -04:00 committed by GitHub
parent 3c214ce461
commit 590bcf7ef1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 39 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,16 +9,25 @@ 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<any[]>([]);
const [seasonsData, setSeasonsData] = useState<Season[]>([]);
const [selectedSeason, setSelectedSeason] = useState<any>(null);
const navigate = useNavigate();
const handleSeasonSelect = useCallback(
async (season: any) => {
async (season: Season) => {
try {
const seasonDetails = await get<any>(
`/tv/${tmdbId}/season/${season.season_number}`,
@ -27,7 +36,11 @@ export function EpisodeSelector({
language: "en-US",
},
);
setSelectedSeason(seasonDetails);
setSelectedSeason({
...seasonDetails,
season_number: season.season_number,
id: season.id,
});
} catch (err) {
console.error(err);
}
@ -38,16 +51,18 @@ export function EpisodeSelector({
useEffect(() => {
const fetchSeasons = async () => {
try {
const showDetails = await get<any>(`/tv/${tmdbId}`, {
const showDetails = await get<ShowDetails>(`/tv/${tmdbId}`, {
api_key: conf().TMDB_READ_API_KEY,
language: "en-US",
});
setSeasonsData(showDetails.seasons);
if (showDetails.seasons[0] === 0) {
// Default to first season
const regularSeasons = showDetails.seasons.filter(
(season: Season) => season.season_number > 0,
);
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);
@ -59,13 +74,12 @@ export function EpisodeSelector({
return (
<div className="flex flex-row">
<div className="sm:w-96 w-96 sm:block cursor-pointer overflow-y-scroll overflow-x-hidden max-h-60 max-w-24">
{seasonsData.map((season) => (
{seasonsData.map((season: Season) => (
<div
key={season.season_number}
key={season.id}
onClick={() => handleSeasonSelect(season)}
className={`cursor-pointer p-1 text-center rounded transition-transform duration-200 ${
selectedSeason &&
season.season_number === selectedSeason.season_number
selectedSeason && season.id === selectedSeason.id
? "bg-search-background"
: "hover:bg-search-background hover:scale-95"
}`}
@ -84,24 +98,29 @@ export function EpisodeSelector({
episode_number: number;
name: string;
still_path: string;
show_id: number;
id: number;
}) => (
<div
key={episode.episode_number}
onClick={() =>
navigate(
`/media/tmdb-tv-${tmdbId}-${mediaTitle}/${episode.show_id}/${episode.id}`,
)
}
key={episode.id}
onClick={() => {
const url = `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${selectedSeason.id}/${episode.id}`;
// eslint-disable-next-line no-console
console.log(`Navigating to: ${url}`);
// eslint-disable-next-line no-console
console.log(
`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"
>
<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">
{episode.name}
{`S${selectedSeason.season_number}E${episode.episode_number}: ${episode.name}`}
</p>
</div>
),