Fix episodes box size on android

This commit is contained in:
Zoe Roux 2023-12-12 01:07:39 +01:00
parent bf68f6b52c
commit 445f193dbb
4 changed files with 18 additions and 12 deletions

View File

@ -52,7 +52,7 @@ const emulateGap = (
}; };
}; };
export const InfiniteFetchList = <Data, Props, _>({ export const InfiniteFetchList = <Data, Props, _, Kind>({
query, query,
placeholderCount = 2, placeholderCount = 2,
incremental = false, incremental = false,
@ -63,6 +63,7 @@ export const InfiniteFetchList = <Data, Props, _>({
Header, Header,
headerProps, headerProps,
getItemType, getItemType,
getItemSize,
fetchMore = true, fetchMore = true,
nested = false, nested = false,
contentContainerStyle, contentContainerStyle,
@ -81,7 +82,8 @@ export const InfiniteFetchList = <Data, Props, _>({
divider?: boolean | ComponentType; divider?: boolean | ComponentType;
Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement; Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
headerProps?: Props; headerProps?: Props;
getItemType?: (item: WithLoading<Data>, index: number) => string | number; getItemType?: (item: WithLoading<Data>, index: number) => Kind;
getItemSize?: (kind: Kind) => number;
fetchMore?: boolean; fetchMore?: boolean;
nested?: boolean; nested?: boolean;
contentContainerStyle?: ContentStyle; contentContainerStyle?: ContentStyle;
@ -118,7 +120,8 @@ export const InfiniteFetchList = <Data, Props, _>({
style={[ style={[
emulateGap(layout.layout, gap, numColumns, index), emulateGap(layout.layout, gap, numColumns, index),
layout.layout === "horizontal" && { layout.layout === "horizontal" && {
width: size, width:
size * (getItemType && getItemSize ? getItemSize(getItemType(item, index)) : 1),
}, },
]} ]}
> >
@ -144,12 +147,12 @@ export const InfiniteFetchList = <Data, Props, _>({
); );
}; };
export const InfiniteFetch = <Data, Props, _>({ export const InfiniteFetch = <Data, Props, _, Kind>({
query, query,
...props ...props
}: { }: {
query: QueryIdentifier<_, Data>; query: QueryIdentifier<_, Data>;
} & Omit<ComponentProps<typeof InfiniteFetchList<Data, Props, _>>, "query">) => { } & Omit<ComponentProps<typeof InfiniteFetchList<Data, Props, _, Kind>>, "query">) => {
if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch."); if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
const ret = useInfiniteFetch(query); const ret = useInfiniteFetch(query);

View File

@ -139,7 +139,7 @@ const InfiniteScroll = <Props,>({
); );
}; };
export const InfiniteFetchList = <Data, _, HeaderProps>({ export const InfiniteFetchList = <Data, _, HeaderProps, Kind>({
query, query,
incremental = false, incremental = false,
placeholderCount = 2, placeholderCount = 2,
@ -164,7 +164,8 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
divider?: boolean | ComponentType; divider?: boolean | ComponentType;
Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement; Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
headerProps: HeaderProps; headerProps: HeaderProps;
getItemType?: (item: WithLoading<Data>, index: number) => string | number; getItemType?: (item: WithLoading<Data>, index: number) => Kind;
getItemSize?: (kind: Kind) => number
fetchMore?: boolean; fetchMore?: boolean;
contentContainerStyle?: ContentStyle; contentContainerStyle?: ContentStyle;
}): JSX.Element | null => { }): JSX.Element | null => {
@ -204,12 +205,12 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
); );
}; };
export const InfiniteFetch = <Data, Props, _>({ export const InfiniteFetch = <Data, Props, _, Kind>({
query, query,
...props ...props
}: { }: {
query: QueryIdentifier<_, Data>; query: QueryIdentifier<_, Data>;
} & Omit<ComponentProps<typeof InfiniteFetchList<Data, Props, _>>, "query">) => { } & Omit<ComponentProps<typeof InfiniteFetchList<Data, Props, _, Kind>>, "query">) => {
if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch."); if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
const ret = useInfiniteFetch(query); const ret = useInfiniteFetch(query);

View File

@ -19,12 +19,12 @@
*/ */
import { News, NewsKind, NewsP, QueryIdentifier, getDisplayDate } from "@kyoo/models"; import { News, NewsKind, NewsP, QueryIdentifier, getDisplayDate } from "@kyoo/models";
import { useYoshiki } from "yoshiki/native";
import { ItemGrid } from "../browse/grid"; import { ItemGrid } from "../browse/grid";
import { InfiniteFetch } from "../fetch-infinite"; import { InfiniteFetch } from "../fetch-infinite";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Header } from "./genre"; import { Header } from "./genre";
import { EpisodeBox, episodeDisplayNumber } from "../details/episode"; import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
import { useYoshiki } from "yoshiki/native";
export const NewsList = () => { export const NewsList = () => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -39,6 +39,7 @@ export const NewsList = () => {
getItemType={(x, i) => getItemType={(x, i) =>
x.kind === NewsKind.Movie || (x.isLoading && i % 2) ? "movie" : "episode" x.kind === NewsKind.Movie || (x.isLoading && i % 2) ? "movie" : "episode"
} }
getItemSize={(kind) => kind === "episode" ? 2 : 1}
empty={t("home.none")} empty={t("home.none")}
> >
{(x, i) => {(x, i) =>
@ -66,7 +67,7 @@ export const NewsList = () => {
href={x.href} href={x.href}
watchedPercent={x.watchStatus?.watchedPercent || null} watchedPercent={x.watchStatus?.watchedPercent || null}
watchedStatus={x.watchStatus?.status || null} watchedStatus={x.watchStatus?.status || null}
// TODO: support this on mobile too // TODO: Move this into the ItemList (using getItemSize)
// @ts-expect-error This is a web only property // @ts-expect-error This is a web only property
{...css({ gridColumnEnd: "span 2" })} {...css({ gridColumnEnd: "span 2" })}
/> />

View File

@ -52,6 +52,7 @@ export const WatchlistList = () => {
? "episode" ? "episode"
: "item" : "item"
} }
getItemSize={(kind) => kind === "episode" ? 2 : 1}
empty={t("home.none")} empty={t("home.none")}
> >
{(x, i) => { {(x, i) => {
@ -65,7 +66,7 @@ export const WatchlistList = () => {
thumbnail={episode?.thumbnail ?? x.thumbnail} thumbnail={episode?.thumbnail ?? x.thumbnail}
href={episode?.href} href={episode?.href}
watchedPercent={x.watchStatus?.watchedPercent || null} watchedPercent={x.watchStatus?.watchedPercent || null}
// TODO: support this on mobile too // TODO: Move this into the ItemList (using getItemSize)
// @ts-expect-error This is a web only property // @ts-expect-error This is a web only property
{...css({ gridColumnEnd: "span 2" })} {...css({ gridColumnEnd: "span 2" })}
/> />