You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.2 KiB
70 lines
2.2 KiB
import AirDateBadge from '@app/components/AirDateBadge';
|
|
import LoadingSpinner from '@app/components/Common/LoadingSpinner';
|
|
import type { SeasonWithEpisodes } from '@server/models/Tv';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import useSWR from 'swr';
|
|
|
|
const messages = defineMessages({
|
|
somethingwentwrong: 'Something went wrong while retrieving season data.',
|
|
noepisodes: 'Episode list unavailable.',
|
|
});
|
|
|
|
type SeasonProps = {
|
|
seasonNumber: number;
|
|
tvId: number;
|
|
};
|
|
|
|
const Season = ({ seasonNumber, tvId }: SeasonProps) => {
|
|
const intl = useIntl();
|
|
const { data, error } = useSWR<SeasonWithEpisodes>(
|
|
`/api/v1/tv/${tvId}/season/${seasonNumber}`
|
|
);
|
|
|
|
if (!data && !error) {
|
|
return <LoadingSpinner />;
|
|
}
|
|
|
|
if (!data) {
|
|
return <div>{intl.formatMessage(messages.somethingwentwrong)}</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col justify-center divide-y divide-gray-700">
|
|
{data.episodes.length === 0 ? (
|
|
<p>{intl.formatMessage(messages.noepisodes)}</p>
|
|
) : (
|
|
data.episodes
|
|
.slice()
|
|
.reverse()
|
|
.map((episode) => {
|
|
return (
|
|
<div
|
|
className="flex flex-col space-y-4 py-4 xl:flex-row xl:space-y-4 xl:space-x-4"
|
|
key={`season-${seasonNumber}-episode-${episode.episodeNumber}`}
|
|
>
|
|
<div className="flex-1">
|
|
<div className="flex flex-col space-y-2 xl:flex-row xl:items-center xl:space-y-0 xl:space-x-2">
|
|
<h3 className="text-lg">{episode.name}</h3>
|
|
{episode.airDate && (
|
|
<AirDateBadge airDate={episode.airDate} />
|
|
)}
|
|
</div>
|
|
{episode.overview && <p>{episode.overview}</p>}
|
|
</div>
|
|
{episode.stillPath && (
|
|
<img
|
|
className="h-auto w-full rounded-lg xl:h-32 xl:w-auto"
|
|
src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
|
|
alt=""
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Season;
|