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

Some fix for details page

Browse Source
This commit is contained in:
Zoe Roux 2025-07-08 00:09:58 +02:00
parent 977398c851
commit bf1997facd
No known key found for this signature in database
2 changed files with 100 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/primitives/chip.tsx
View File

@ -20,7 +20,7 @@ export const Chip = ({
size?: "small" | "medium" | "large"; size?: "small" | "medium" | "large";
outline?: boolean; outline?: boolean;
label: string; label: string;
href: string; href: string | null;
replace?: boolean; replace?: boolean;
target?: string; target?: string;
textProps?: TextProps; textProps?: TextProps;

209
front/src/ui/details/header.tsx
View File

@ -22,7 +22,13 @@ import {
} from "yoshiki/native"; } from "yoshiki/native";
import { WatchListInfo } from "~/components/items/watchlist-info"; import { WatchListInfo } from "~/components/items/watchlist-info";
import { Rating } from "~/components/rating"; import { Rating } from "~/components/rating";
import { type Genre, type KImage, Show, type WatchStatusV } from "~/models"; import {
type Genre,
type KImage,
Show,
type Studio,
type WatchStatusV,
} from "~/models";
import { import {
A, A,
Chip, Chip,
@ -159,7 +165,7 @@ export const TitleLine = ({
runtime, runtime,
poster, poster,
trailerUrl, trailerUrl,
// studio, studios,
watchStatus, watchStatus,
...props ...props
}: { }: {
@ -173,7 +179,7 @@ export const TitleLine = ({
runtime: number | null; runtime: number | null;
poster: KImage | null; poster: KImage | null;
trailerUrl: string | null; trailerUrl: string | null;
// studio: Studio; studios: Studio[] | null;
watchStatus: WatchStatusV | null; watchStatus: WatchStatusV | null;
} & Stylable) => { } & Stylable) => {
const { css, theme } = useYoshiki(); const { css, theme } = useYoshiki();
@ -331,57 +337,56 @@ export const TitleLine = ({
</View> </View>
</View> </View>
</View> </View>
{/* <View */} <View
{/* {...css([ */} {...css([
{/* { */} {
{/* paddingTop: { xs: ts(3), sm: ts(8) }, */} paddingTop: { xs: ts(3), sm: ts(8) },
{/* alignSelf: { xs: "flex-start", md: "flex-end" }, */} alignSelf: { xs: "flex-start", md: "flex-end" },
{/* justifyContent: "flex-end", */} justifyContent: "flex-end",
{/* flexDirection: "column", */} flexDirection: "column",
{/* }, */} },
{/* md({ */} md({
{/* position: "absolute", */} position: "absolute",
{/* top: 0, */} top: 0,
{/* bottom: 0, */} bottom: 0,
{/* right: 0, */} right: 0,
{/* width: percent(25), */} width: percent(25),
{/* height: percent(100), */} height: percent(100),
{/* paddingRight: ts(3), */} paddingRight: ts(3),
{/* }) as any, */} }) as any,
{/* ])} */} ])}
{/* > */} >
{/* {studio && ( */} {studios?.map((x) => (
{/* <P */} <P
{/* {...css({ */} key={x.slug}
{/* color: (theme: Theme) => theme.user.paragraph, */} {...css({
{/* display: "flex", */} color: (theme: Theme) => theme.user.paragraph,
{/* })} */} display: "flex",
{/* > */} })}
{/* {t("show.studio")}:{" "} */} >
{/* <A */} {t("show.studio")}:{" "}
{/* href={`/studio/${studio.slug}`} */} <A
{/* {...css({ color: (theme) => theme.user.link })} */} href={`/studio/${x.slug}`}
{/* > */} {...css({ color: (theme) => theme.user.link })}
{/* {studio.name} */} >
{/* </A> */} {x.name}
{/* </P> */} </A>
{/* )} */} </P>
{/* </View> */} ))}
</View>
</Container> </Container>
); );
}; };
const Description = ({ const Description = ({
isLoading, description,
overview,
tags, tags,
genres, genres,
...props ...props
}: { }: {
isLoading: boolean; description: string | null;
overview?: string | null; tags: string[];
tags?: string[]; genres: Genre[];
genres?: Genre[];
} & Stylable) => { } & Stylable) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { css } = useYoshiki(); const { css } = useYoshiki();
@ -401,16 +406,12 @@ const Description = ({
})} })}
> >
{t("show.genre")}:{" "} {t("show.genre")}:{" "}
{(isLoading ? [...Array<Genre>(3)] : genres!).map((genre, i) => ( {genres.map((genre, i) => (
<Fragment key={genre ?? i.toString()}> <Fragment key={genre}>
<P {...css({ m: 0 })}>{i !== 0 && ", "}</P> <P {...(css({ m: 0 }) as any)}>{i !== 0 && ", "}</P>
{isLoading ? ( <A href={`/genres/${genre.toLowerCase()}`}>
<Skeleton {...css({ width: rem(5) })} /> {t(`genres.${genre}`)}
) : ( </A>
<A href={`/genres/${genre.toLowerCase()}`}>
{t(`genres.${genre}`)}
</A>
)}
</Fragment> </Fragment>
))} ))}
</P> </P>
@ -423,13 +424,9 @@ const Description = ({
paddingTop: ts(4), paddingTop: ts(4),
})} })}
> >
<Skeleton lines={4}> <P {...css({ textAlign: "justify" })}>
{isLoading || ( {description ?? t("show.noOverview")}
<P {...css({ textAlign: "justify" })}> </P>
{overview ?? t("show.noOverview")}
</P>
)}
</Skeleton>
<View <View
{...css({ {...css({
flexWrap: "wrap", flexWrap: "wrap",
@ -439,9 +436,9 @@ const Description = ({
})} })}
> >
<P {...css({ marginRight: ts(0.5) })}>{t("show.tags")}:</P> <P {...css({ marginRight: ts(0.5) })}>{t("show.tags")}:</P>
{(isLoading ? [...Array<string>(3)] : tags!).map((tag, i) => ( {tags.map((tag) => (
<Chip <Chip
key={tag ?? i} key={tag}
label={tag && capitalize(tag)} label={tag && capitalize(tag)}
href={`/search?q=${tag}`} href={`/search?q=${tag}`}
size="small" size="small"
@ -461,17 +458,13 @@ const Description = ({
})} })}
> >
<H2>{t("show.genre")}</H2> <H2>{t("show.genre")}</H2>
{isLoading || genres?.length ? ( {genres.length ? (
<UL> <UL>
{(isLoading ? [...Array<Genre>(3)] : genres!).map((genre, i) => ( {genres.map((genre) => (
<LI key={genre ?? i}> <LI key={genre}>
{isLoading ? ( <A href={`/genres/${genre.toLowerCase()}`}>
<Skeleton {...css({ marginBottom: 0 })} /> {t(`genres.${genre}`)}
) : ( </A>
<A href={`/genres/${genre.toLowerCase()}`}>
{t(`genres.${genre}`)}
</A>
)}
</LI> </LI>
))} ))}
</UL> </UL>
@ -530,7 +523,7 @@ export const Header = ({
rating={data.rating} rating={data.rating}
runtime={data.kind === "movie" ? data.runtime : null} runtime={data.kind === "movie" ? data.runtime : null}
poster={data.poster} poster={data.poster}
// studio={data.studio} studios={data.kind !== "collection" ? data.studios : null}
playHref={data.kind !== "collection" ? data.playHref : null} playHref={data.kind !== "collection" ? data.playHref : null}
trailerUrl={data.kind !== "collection" ? data.trailerUrl : null} trailerUrl={data.kind !== "collection" ? data.trailerUrl : null}
watchStatus={ watchStatus={
@ -546,41 +539,37 @@ export const Header = ({
})} })}
/> />
</GradientImageBackground> </GradientImageBackground>
{/* <Description */} <Description
{/* isLoading={isLoading} */} description={data?.description}
{/* overview={data?.overview} */} genres={data?.genres}
{/* genres={data?.genres} */} tags={data?.tags}
{/* tags={data?.tags} */} {...css({ paddingTop: { xs: 0, md: ts(2) } })}
{/* {...css({ paddingTop: { xs: 0, md: ts(2) } })} */} />
{/* /> */} <Container
{/* <Container */} {...css({
{/* {...css({ */} flexWrap: "wrap",
{/* flexWrap: "wrap", */} flexDirection: "row",
{/* flexDirection: "row", */} alignItems: "center",
{/* alignItems: "center", */} marginTop: ts(0.5),
{/* marginTop: ts(0.5), */} })}
{/* })} */} >
{/* > */} <P {...css({ marginRight: ts(0.5), textAlign: "center" })}>
{/* <P {...css({ marginRight: ts(0.5), textAlign: "center" })}> */} {t("show.links")}:
{/* {t("show.links")}: */} </P>
{/* </P> */} {Object.entries(data.externalId!)
{/* {(!isLoading */} .filter(([_, data]) => data.link)
{/* ? Object.entries(data.externalId!).filter( */} .map(([name, data]) => (
{/* ([_, data]) => data.link, */} <Chip
{/* ) */} key={name}
{/* : [...Array(3)].map((_) => [undefined, undefined] as const) */} label={name}
{/* ).map(([name, data], i) => ( */} href={data.link}
{/* <Chip */} target="_blank"
{/* key={name ?? i} */} size="small"
{/* label={name} */} outline
{/* href={data?.link || undefined} */} {...css({ m: ts(0.5) })}
{/* target="_blank" */} />
{/* size="small" */} ))}
{/* outline */} </Container>
{/* {...css({ m: ts(0.5) })} */}
{/* /> */}
{/* ))} */}
{/* </Container> */}
{/* {type === "show" && ( */} {/* {type === "show" && ( */}
{/* <ShowWatchStatusCard {...(data?.watchStatus as any)} /> */} {/* <ShowWatchStatusCard {...(data?.watchStatus as any)} /> */}
{/* )} */} {/* )} */}