Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add episodes SSR

Browse Source
This commit is contained in:
Zoe Roux 2022-09-19 18:45:21 +09:00
parent 23cc667692
commit 0ba5a97d2e
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
front/src/pages/show/[slug].tsx
View File

@ -40,9 +40,8 @@ import { Image, Poster } from "~/components/poster";
import { Episode, EpisodeP, Page, Season, Show, ShowP } from "~/models"; import { Episode, EpisodeP, Page, Season, Show, ShowP } from "~/models";
import { QueryIdentifier, QueryPage, useFetch, useInfiniteFetch } from "~/utils/query"; import { QueryIdentifier, QueryPage, useFetch, useInfiniteFetch } from "~/utils/query";
import { getDisplayDate } from "~/models/utils"; import { getDisplayDate } from "~/models/utils";
import { useScroll } from "~/utils/hooks/use-scroll";
import { withRoute } from "~/utils/router"; import { withRoute } from "~/utils/router";
import { Container, containerPadding } from "~/components/container"; import { Container } from "~/components/container";
import { makeTitle } from "~/utils/utils"; import { makeTitle } from "~/utils/utils";
import { Link } from "~/utils/link"; import { Link } from "~/utils/link";
import { Studio } from "~/models/resources/studio"; import { Studio } from "~/models/resources/studio";
@ -50,8 +49,9 @@ import { Paged, Person, PersonP } from "~/models";
import { PersonAvatar } from "~/components/person"; import { PersonAvatar } from "~/components/person";
import { ErrorComponent, ErrorPage } from "~/components/errors"; import { ErrorComponent, ErrorPage } from "~/components/errors";
import { useState } from "react"; import { useState } from "react";
import { EpisodeBox, EpisodeLine } from "~/components/episode"; import { EpisodeLine } from "~/components/episode";
import InfiniteScroll from "react-infinite-scroll-component"; import InfiniteScroll from "react-infinite-scroll-component";
import { useRouter } from "next/router";
const StudioText = ({ const StudioText = ({
studio, studio,
@ -356,7 +356,9 @@ const EpisodeGrid = ({ slug, season }: { slug: string; season: number }) => {
}; };
const SeasonTab = ({ slug, seasons, sx }: { slug: string; seasons?: Season[]; sx?: SxProps }) => { const SeasonTab = ({ slug, seasons, sx }: { slug: string; seasons?: Season[]; sx?: SxProps }) => {
const [season, setSeason] = useState(1); const router = useRouter();
const seasonQuery = typeof router.query.season === "string" ? parseInt(router.query.season) : NaN;
const [season, setSeason] = useState(isNaN(seasonQuery) ? 1 : seasonQuery);
// TODO: handle absolute number only shows (without seasons) // TODO: handle absolute number only shows (without seasons)
return ( return (
@ -364,7 +366,16 @@ const SeasonTab = ({ slug, seasons, sx }: { slug: string; seasons?: Season[]; sx
<Box sx={{ borderBottom: 1, borderColor: "divider", width: "100%" }}> <Box sx={{ borderBottom: 1, borderColor: "divider", width: "100%" }}>
<Tabs value={season} onChange={(_, i) => setSeason(i)} aria-label="List of seasons"> <Tabs value={season} onChange={(_, i) => setSeason(i)} aria-label="List of seasons">
{seasons {seasons
? seasons.map((x) => <Tab key={x.seasonNumber} label={x.name} value={x.seasonNumber} />) ? seasons.map((x) => (
<Tab
key={x.seasonNumber}
label={x.name}
value={x.seasonNumber}
component={Link}
to={`/show/${slug}?season=${x.seasonNumber}`}
shallow
/>
))
: [...Array(3)].map((_, i) => ( : [...Array(3)].map((_, i) => (
<Tab key={i} label={<Skeleton width="5rem" />} value={i + 1} disabled /> <Tab key={i} label={<Skeleton width="5rem" />} value={i + 1} disabled />
))} ))}
@ -401,10 +412,10 @@ const ShowDetails: QueryPage<{ slug: string }> = ({ slug }) => {
); );
}; };
ShowDetails.getFetchUrls = ({ slug, seasonNumber = 1 }) => [ ShowDetails.getFetchUrls = ({ slug, season = 1 }) => [
query(slug), query(slug),
staffQuery(slug), staffQuery(slug),
episodesQuery(slug, seasonNumber), episodesQuery(slug, season),
]; ];
export default withRoute(ShowDetails); export default withRoute(ShowDetails);

7
front/src/utils/link.tsx
View File

@ -36,10 +36,11 @@ export const ButtonLink = forwardRef<ButtonRef, ButtonLinkProps>(NextButton);
type LinkRef = HTMLAnchorElement; type LinkRef = HTMLAnchorElement;
type LinkProps = Omit<MLinkProps, "href"> & type LinkProps = Omit<MLinkProps, "href"> &
Pick<NLinkProps, "href" | "as" | "prefetch" | "locale">; Pick<NLinkProps, "as" | "prefetch" | "locale" | "shallow"> &
({ to: NLinkProps["href"], href?: undefined } | { href: NLinkProps["href"], to?: undefined });
const NextLink = ({ href, as, prefetch, locale, ...props }: LinkProps, ref: Ref<LinkRef>) => ( const NextLink = ({ href, to, as, prefetch, locale, shallow, ...props }: LinkProps, ref: Ref<LinkRef>) => (
<NLink href={href} as={as} prefetch={prefetch} locale={locale} passHref> <NLink href={href ?? to} as={as} prefetch={prefetch} locale={locale} shallow={shallow} passHref>
<MLink ref={ref} {...props} /> <MLink ref={ref} {...props} />
</NLink> </NLink>
); );