Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix infinite scroll behavior of details page

Browse Source
This commit is contained in:
Zoe Roux 2023-06-10 01:35:01 +09:00
parent 5d377654aa
commit 039c644453
4 changed files with 74 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
front/packages/ui/src/details/header.tsx
View File

@ -169,14 +169,16 @@ const TitleLine = ({
})}
{...tooltip(t("show.play"))}
/>
{trailerUrl && <IconButton
icon={Theaters}
as={Link}
href={trailerUrl}
target="_blank"
color={{ xs: theme.user.contrast, md: theme.colors.white }}
{...tooltip(t("show.trailer"))}
/>}
{trailerUrl && (
<IconButton
icon={Theaters}
as={Link}
href={trailerUrl}
target="_blank"
color={{ xs: theme.user.contrast, md: theme.colors.white }}
{...tooltip(t("show.trailer"))}
/>
)}
</View>
</View>
</View>
@ -249,7 +251,7 @@ const Description = ({
{t("show.genre")}:{" "}
{(isLoading ? [...Array(3)] : genres!).map((genre, i) => (
<Fragment key={genre?.slug ?? i.toString()}>
<P>{i !== 0 && ", "}</P>
<P {...css({ m: 0 })}>{i !== 0 && ", "}</P>
{isLoading ? (
<Skeleton {...css({ width: rem(5) })} />
) : (

2
front/packages/ui/src/details/season.tsx
View File

@ -41,7 +41,7 @@ export const EpisodeList = ({
return (
<InfiniteFetch
query={EpisodeList.query(slug, season)}
placeholderCount={15}
placeholderCount={10}
layout={EpisodeLine.layout}
empty={t("show.episode-none")}
divider

66
front/packages/ui/src/details/show.tsx
View File

@ -26,6 +26,7 @@ import { EpisodeList } from "./season";
import { Header } from "./header";
import Svg, { Path, SvgProps } from "react-native-svg";
import { Container, SwitchVariant } from "@kyoo/primitives";
import { forwardRef } from "react";
const SvgWave = (props: SvgProps) => {
const { css } = useYoshiki();
@ -52,38 +53,41 @@ const query = (slug: string): QueryIdentifier<Show> => ({
export const ShowDetails: QueryPage<{ slug: string; season: string }> = ({ slug, season }) => {
const { css, theme } = useYoshiki();
const ShowHeader = ({ children, ...props }: ViewProps) => (
<View
{...css(
[
{ bg: (theme) => theme.background },
Platform.OS === "web" && {
flexGrow: 1,
flexShrink: 1,
// @ts-ignore Web only property
overflow: "auto" as any,
// @ts-ignore Web only property
overflowX: "hidden",
// @ts-ignore Web only property
overflowY: "overlay",
},
],
props,
)}
>
{/* TODO: Remove the slug quickfix for the play button */}
<Header slug={`${slug}-s1e1`} query={query(slug)} />
{/* <Staff slug={slug} /> */}
<SvgWave
fill={theme.variant.background}
{...css({ flexShrink: 0, flexGrow: 1, display: "flex" })}
/>
{/* <SeasonTab slug={slug} season={season} /> */}
<View {...css({ bg: theme.variant.background })}>
<Container>{children}</Container>
const ShowHeader = forwardRef<View, ViewProps>(function _ShowHeader({ children, ...props }, ref) {
return (
<View
ref={ref}
{...css(
[
{ bg: (theme) => theme.background },
Platform.OS === "web" && {
flexGrow: 1,
flexShrink: 1,
// @ts-ignore Web only property
overflow: "auto" as any,
// @ts-ignore Web only property
overflowX: "hidden",
// @ts-ignore Web only property
overflowY: "overlay",
},
],
props,
)}
>
{/* TODO: Remove the slug quickfix for the play button */}
<Header slug={`${slug}-s1e1`} query={query(slug)} />
{/* <Staff slug={slug} /> */}
<SvgWave
fill={theme.variant.background}
{...css({ flexShrink: 0, flexGrow: 1, display: "flex" })}
/>
{/* <SeasonTab slug={slug} season={season} /> */}
<View {...css({ bg: theme.variant.background })}>
<Container>{children}</Container>
</View>
</View>
</View>
);
);
});
return (
<SwitchVariant>

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

@ -20,7 +20,7 @@
import { Page, QueryIdentifier, useInfiniteFetch } from "@kyoo/models";
import { HR } from "@kyoo/primitives";
import { ComponentType, Fragment, ReactElement, useMemo, useRef } from "react";
import { ComponentType, Fragment, isValidElement, ReactElement, useMemo, useRef } from "react";
import { Stylable, useYoshiki } from "yoshiki";
import { EmptyView, ErrorView, Layout, WithLoading } from "./fetch";
@ -31,6 +31,7 @@ const InfiniteScroll = ({
loadMore,
hasMore = true,
isFetching,
Header,
...props
}: {
children?: ReactElement | (ReactElement | null)[] | null;
@ -39,23 +40,25 @@ const InfiniteScroll = ({
loadMore: () => void;
hasMore: boolean;
isFetching: boolean;
Header: ComponentType<{ children: JSX.Element }> | ReactElement | undefined;
} & Stylable) => {
const ref = useRef<HTMLDivElement>(null);
const { css } = useYoshiki();
return (
<div
ref={ref}
onScroll={() => {
if (!ref.current || !hasMore || isFetching) return;
const scroll =
layout === "horizontal"
? ref.current.scrollWidth - ref.current.scrollLeft
: ref.current.scrollHeight - ref.current.scrollTop;
const offset = layout === "horizontal" ? ref.current.offsetWidth : ref.current.offsetHeight;
const onScroll = () => {
if (!ref.current || !hasMore || isFetching) return;
const scroll =
layout === "horizontal"
? ref.current.scrollWidth - ref.current.scrollLeft
: ref.current.scrollHeight - ref.current.scrollTop;
const offset = layout === "horizontal" ? ref.current.offsetWidth : ref.current.offsetHeight;
if (scroll <= offset * 1.2) loadMore();
}}
if (scroll <= offset * 1.2) loadMore();
};
const scrollProps = { ref, onScroll };
const list = (props: object) => (
<div
{...css(
[
{
@ -84,6 +87,15 @@ const InfiniteScroll = ({
{hasMore && isFetching && loader}
</div>
);
if (!Header) return list({ ...scrollProps, ...props });
if (!isValidElement(Header)) return <Header {...scrollProps}>{list(props)}</Header>;
return (
<>
{Header}
{list({ ...scrollProps, ...props })}
</>
);
};
export const InfiniteFetch = <Data,>({
@ -125,7 +137,7 @@ export const InfiniteFetch = <Data,>({
return <EmptyView message={empty} />;
}
const list = (
return (
<InfiniteScroll
layout={grid ? "grid" : horizontal ? "horizontal" : "vertical"}
loadMore={fetchNextPage}
@ -137,6 +149,7 @@ export const InfiniteFetch = <Data,>({
{children({ isLoading: true } as any, i)}
</Fragment>
))}
Header={Header}
{...props}
>
{items?.map((item, i) => (
@ -147,7 +160,6 @@ export const InfiniteFetch = <Data,>({
))}
</InfiniteScroll>
);
return addHeader(Header, list);
};
const addHeader = (