mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-08-05 08:40:04 -04:00
Fix episodes box size on android
This commit is contained in:
parent
bf68f6b52c
commit
445f193dbb
@ -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);
|
||||||
|
@ -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);
|
||||||
|
@ -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" })}
|
||||||
/>
|
/>
|
||||||
|
@ -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" })}
|
||||||
/>
|
/>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user