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; 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<any[]>([]); const [seasonsData, setSeasonsData] = useState<Season[]>([]);
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: any) => { async (season: Season) => {
try { try {
const seasonDetails = await get<any>( const seasonDetails = await get<any>(
`/tv/${tmdbId}/season/${season.season_number}`, `/tv/${tmdbId}/season/${season.season_number}`,
@ -27,7 +36,11 @@ export function EpisodeSelector({
language: "en-US", language: "en-US",
}, },
); );
setSelectedSeason(seasonDetails); setSelectedSeason({
...seasonDetails,
season_number: season.season_number,
id: season.id,
});
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
@ -38,16 +51,18 @@ export function EpisodeSelector({
useEffect(() => { useEffect(() => {
const fetchSeasons = async () => { const fetchSeasons = async () => {
try { try {
const showDetails = await get<any>(`/tv/${tmdbId}`, { const showDetails = await get<ShowDetails>(`/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);
if (showDetails.seasons[0] === 0) { const regularSeasons = showDetails.seasons.filter(
// Default to first season (season: Season) => season.season_number > 0,
);
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);
@ -59,13 +74,12 @@ export function EpisodeSelector({
return ( return (
<div className="flex flex-row"> <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"> <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 <div
key={season.season_number} key={season.id}
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 && selectedSeason && season.id === selectedSeason.id
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"
}`} }`}
@ -84,24 +98,29 @@ export function EpisodeSelector({
episode_number: number; episode_number: number;
name: string; name: string;
still_path: string; still_path: string;
show_id: number;
id: number; id: number;
}) => ( }) => (
<div <div
key={episode.episode_number} key={episode.id}
onClick={() => onClick={() => {
navigate( const url = `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${selectedSeason.id}/${episode.id}`;
`/media/tmdb-tv-${tmdbId}-${mediaTitle}/${episode.show_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" 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 <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">
{episode.name} {`S${selectedSeason.season_number}E${episode.episode_number}: ${episode.name}`}
</p> </p>
</div> </div>
), ),