114 lines
3.5 KiB
TypeScript
Executable File
114 lines
3.5 KiB
TypeScript
Executable File
import React, {Fragment} from 'react';
|
|
import {PageMetaTags} from '@common/http/page-meta-tags';
|
|
import {PageStatus} from '@common/http/page-status';
|
|
import {GetSeasonResponse, useSeason} from '@app/seasons/requests/use-season';
|
|
import {TitlePageHeaderImage} from '@app/titles/pages/title-page/title-page-header-image';
|
|
import {Title} from '@app/titles/models/title';
|
|
import {TitlePoster} from '@app/titles/title-poster/title-poster';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {TitleLink} from '@app/titles/title-link';
|
|
import {SeasonLink} from '@app/seasons/season-link';
|
|
import {useParams} from 'react-router-dom';
|
|
import clsx from 'clsx';
|
|
import {SitePageLayout} from '@app/site-page-layout';
|
|
import {EpisodeListItem} from '@app/seasons/episode-list-item';
|
|
import {useSeasonEpisodes} from '@app/titles/requests/use-season-episodes';
|
|
import {InfiniteScrollSentinel} from '@common/ui/infinite-scroll/infinite-scroll-sentinel';
|
|
|
|
export function SeasonPage() {
|
|
const query = useSeason('seasonPage');
|
|
const content = query.data ? (
|
|
<Fragment>
|
|
<PageMetaTags query={query} />
|
|
<PageContent data={query.data} />
|
|
</Fragment>
|
|
) : (
|
|
<PageStatus query={query} loaderClassName="absolute inset-0 m-auto" />
|
|
);
|
|
|
|
return <SitePageLayout>{content}</SitePageLayout>;
|
|
}
|
|
|
|
interface PageContentProps {
|
|
data: GetSeasonResponse;
|
|
}
|
|
function PageContent({data}: PageContentProps) {
|
|
const {title, season} = data;
|
|
return (
|
|
<div>
|
|
<TitlePageHeaderImage title={title} season={season} />
|
|
<div className="container mx-auto mt-24 px-14 md:mt-40 md:px-24">
|
|
<div className="mb-24 flex items-center gap-12">
|
|
<TitlePoster size="w-70" srcSize="sm" title={title} />
|
|
<div>
|
|
<TitleLink title={title} color="primary" className="text-xl" />
|
|
<div className="text-lg">
|
|
<Trans message="Episode list" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<SeasonList title={title} />
|
|
<EpisodeList data={data} />
|
|
<SeasonList title={title} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface SeasonListProps {
|
|
title: Title;
|
|
}
|
|
function SeasonList({title}: SeasonListProps) {
|
|
const {season} = useParams();
|
|
return (
|
|
<div>
|
|
<div className="mb-4 text-base font-semibold">
|
|
<Trans message="Seasons" />:
|
|
</div>
|
|
<div className="mb-34 flex items-center gap-10">
|
|
{[...new Array(title.seasons_count).keys()].map(index => {
|
|
const number = index + 1;
|
|
const isActive = season === `${number}`;
|
|
return (
|
|
<SeasonLink
|
|
key={number}
|
|
title={title}
|
|
seasonNumber={number}
|
|
className={clsx(
|
|
'flex h-30 w-30 flex-shrink-0 items-center justify-center rounded border text-base',
|
|
isActive
|
|
? 'pointer-events-none bg-primary text-white'
|
|
: 'text-primary'
|
|
)}
|
|
>
|
|
{number}
|
|
</SeasonLink>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface EpisodeListProps {
|
|
data: GetSeasonResponse;
|
|
}
|
|
function EpisodeList({data: {episodes, title}}: EpisodeListProps) {
|
|
const query = useSeasonEpisodes(episodes);
|
|
return (
|
|
<main>
|
|
{query.items.map(episode => (
|
|
<EpisodeListItem
|
|
key={episode.id}
|
|
episode={episode}
|
|
title={title}
|
|
allowRating
|
|
showPlayButton
|
|
className="mb-34"
|
|
/>
|
|
))}
|
|
<InfiniteScrollSentinel query={query} />
|
|
</main>
|
|
);
|
|
}
|