mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
Episode selector concept done
This commit is contained in:
parent
79d30cad19
commit
745a5d77b5
2 changed files with 60 additions and 9 deletions
|
@ -1,11 +1,54 @@
|
|||
// We make a episode selector modal component that will be used in the media page to select the episode to play.
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { get } from "@/backend/metadata/tmdb";
|
||||
import { conf } from "@/setup/config";
|
||||
|
||||
// import { get } from "../backend/metadata/tmdb";
|
||||
// (or whatever the relevant path is to backend/metadata/tmdb)
|
||||
// import { conf } from "@/setup/config";
|
||||
interface ModalEpisodeSelectorProps {
|
||||
tmdbId: string;
|
||||
}
|
||||
|
||||
// const data = await get<any>("/tv)/[tmdbID-HERE]/season/[seasonNumber-HERE]", {
|
||||
// api_key: conf().TMDB_READ_API_KEY,
|
||||
// language: "en-US",
|
||||
// });
|
||||
// Then data will return json of the season information including all the episode names. So just call data.episodes to get a json output of all the episode info
|
||||
interface Season {
|
||||
season_number: number;
|
||||
}
|
||||
|
||||
export const EpisodeSelector: React.FC<ModalEpisodeSelectorProps> = ({ tmdbId }) => {
|
||||
const [seasonsData, setSeasonsData] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSeasons = async () => {
|
||||
try {
|
||||
// Fetch TV show details to get seasons list
|
||||
const showDetails = await get<any>(`/tv/${tmdbId}`, {
|
||||
api_key: conf().TMDB_READ_API_KEY,
|
||||
language: "en-US",
|
||||
});
|
||||
|
||||
const seasons = showDetails.seasons as Season[];
|
||||
const seasonsDetailsPromises = seasons.map(season =>
|
||||
get<any>(`/tv/${tmdbId}/season/${season.season_number}`, {
|
||||
api_key: conf().TMDB_READ_API_KEY,
|
||||
language: "en-US",
|
||||
})
|
||||
);
|
||||
|
||||
// Fetch details for all seasons concurrently
|
||||
const seasonsDetails = await Promise.all(seasonsDetailsPromises);
|
||||
setSeasonsData(seasonsDetails);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
fetchSeasons();
|
||||
}, [tmdbId]);
|
||||
|
||||
console.log(seasonsData)
|
||||
return (
|
||||
<div>
|
||||
{seasonsData.map((season, index) => (
|
||||
<div key={index}>
|
||||
Season {season.season_number}: {season.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
|
|||
import { get } from "@/backend/metadata/tmdb";
|
||||
import { conf } from "@/setup/config";
|
||||
import { MediaItem } from "@/utils/mediaTypes";
|
||||
import { EpisodeSelector } from "./ModalEpisodeSelector";
|
||||
|
||||
import { Button } from "../buttons/Button";
|
||||
import { Icon, Icons } from "../Icon";
|
||||
|
@ -256,6 +257,13 @@ export function PopupModal({
|
|||
<div className="relative whitespace-normal font-medium overflow-y-auto max-h-40">
|
||||
{data?.overview}
|
||||
</div>
|
||||
<div>
|
||||
{isTVShow ? (
|
||||
<EpisodeSelector
|
||||
tmdbId={media.id}
|
||||
/>
|
||||
): null}
|
||||
</div>
|
||||
<div className="flex justify-center items-center mt-4 mb-1">
|
||||
<Button
|
||||
theme="purple"
|
||||
|
|
Loading…
Reference in a new issue