Use bigger episodes size in the news list

This commit is contained in:
Zoe Roux 2023-10-30 13:40:57 +01:00
parent 42869cb28f
commit 068e153ae9
3 changed files with 9 additions and 2 deletions

View File

@ -51,7 +51,7 @@ export const InfiniteFetchList = <Data, Props, _>({
divider?: boolean | ComponentType;
Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
headerProps?: Props;
getItemType?: (item: Data, index: number) => string | number;
getItemType?: (item: WithLoading<Data>, index: number) => string | number;
fetchMore?: boolean;
}): JSX.Element | null => {
const { numColumns, size } = useBreakpointMap(layout);

View File

@ -159,7 +159,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
divider?: boolean | ComponentType;
Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
headerProps: HeaderProps;
getItemType?: (item: Data, index: number) => string | number;
getItemType?: (item: WithLoading<Data>, index: number) => string | number;
fetchMore?: boolean;
}): JSX.Element | null => {
const oldItems = useRef<Data[] | undefined>();

View File

@ -41,6 +41,7 @@ import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
export const NewsList = () => {
const { t } = useTranslation();
const { css } = useYoshiki();
return (
<>
@ -48,6 +49,9 @@ export const NewsList = () => {
<InfiniteFetch
query={NewsList.query()}
layout={{ ...ItemGrid.layout, layout: "horizontal" }}
getItemType={(x, i) =>
x.kind === NewsKind.Movie || (x.isLoading && i % 2) ? "movie" : "episode"
}
empty={t("home.none")}
>
{(x, i) =>
@ -69,6 +73,9 @@ export const NewsList = () => {
}
overview={x.name}
thumbnail={x.thumbnail}
// TODO: support this on mobile too
// @ts-expect-error This is a web only property
{...css({ gridColumnEnd: "span 2" })}
/>
)
}