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

Fix episodes box size on android

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
front/packages/ui/src/fetch-infinite.tsx
View File

@ -52,7 +52,7 @@ const emulateGap = (
};
};
export const InfiniteFetchList = <Data, Props, _>({
export const InfiniteFetchList = <Data, Props, _, Kind>({
query,
placeholderCount = 2,
incremental = false,
@ -63,6 +63,7 @@ export const InfiniteFetchList = <Data, Props, _>({
Header,
headerProps,
getItemType,
getItemSize,
fetchMore = true,
nested = false,
contentContainerStyle,
@ -81,7 +82,8 @@ export const InfiniteFetchList = <Data, Props, _>({
divider?: boolean | ComponentType;
Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
headerProps?: Props;
getItemType?: (item: WithLoading<Data>, index: number) => string | number;
getItemType?: (item: WithLoading<Data>, index: number) => Kind;
getItemSize?: (kind: Kind) => number;
fetchMore?: boolean;
nested?: boolean;
contentContainerStyle?: ContentStyle;
@ -118,7 +120,8 @@ export const InfiniteFetchList = <Data, Props, _>({
style={[
emulateGap(layout.layout, gap, numColumns, index),
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,
...props
}: {
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.");
const ret = useInfiniteFetch(query);

9
front/packages/ui/src/fetch-infinite.web.tsx
View File

@ -139,7 +139,7 @@ const InfiniteScroll = <Props,>({
);
};
export const InfiniteFetchList = <Data, _, HeaderProps>({
export const InfiniteFetchList = <Data, _, HeaderProps, Kind>({
query,
incremental = false,
placeholderCount = 2,
@ -164,7 +164,8 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
divider?: boolean | ComponentType;
Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
headerProps: HeaderProps;
getItemType?: (item: WithLoading<Data>, index: number) => string | number;
getItemType?: (item: WithLoading<Data>, index: number) => Kind;
getItemSize?: (kind: Kind) => number
fetchMore?: boolean;
contentContainerStyle?: ContentStyle;
}): JSX.Element | null => {
@ -204,12 +205,12 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
);
};
export const InfiniteFetch = <Data, Props, _>({
export const InfiniteFetch = <Data, Props, _, Kind>({
query,
...props
}: {
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.");
const ret = useInfiniteFetch(query);

5
front/packages/ui/src/home/news.tsx
View File

@ -19,12 +19,12 @@
*/
import { News, NewsKind, NewsP, QueryIdentifier, getDisplayDate } from "@kyoo/models";
import { useYoshiki } from "yoshiki/native";
import { ItemGrid } from "../browse/grid";
import { InfiniteFetch } from "../fetch-infinite";
import { useTranslation } from "react-i18next";
import { Header } from "./genre";
import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
import { useYoshiki } from "yoshiki/native";
export const NewsList = () => {
const { t } = useTranslation();
@ -39,6 +39,7 @@ export const NewsList = () => {
getItemType={(x, i) =>
x.kind === NewsKind.Movie || (x.isLoading && i % 2) ? "movie" : "episode"
}
getItemSize={(kind) => kind === "episode" ? 2 : 1}
empty={t("home.none")}
>
{(x, i) =>
@ -66,7 +67,7 @@ export const NewsList = () => {
href={x.href}
watchedPercent={x.watchStatus?.watchedPercent || 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
{...css({ gridColumnEnd: "span 2" })}
/>

3
front/packages/ui/src/home/watchlist.tsx
View File

@ -52,6 +52,7 @@ export const WatchlistList = () => {
? "episode"
: "item"
}
getItemSize={(kind) => kind === "episode" ? 2 : 1}
empty={t("home.none")}
>
{(x, i) => {
@ -65,7 +66,7 @@ export const WatchlistList = () => {
thumbnail={episode?.thumbnail ?? x.thumbnail}
href={episode?.href}
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
{...css({ gridColumnEnd: "span 2" })}
/>