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 staff list scroll behaviors

Browse Source
This commit is contained in:
Zoe Roux 2022-12-14 13:50:51 +09:00
parent a12f78761d
commit b951ef5ce4
5 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
front/packages/primitives/src/avatar.tsx
View File

@ -36,15 +36,15 @@ export const Avatar = ({
size?: number; size?: number;
isLoading?: boolean; isLoading?: boolean;
} & Stylable) => { } & Stylable) => {
const { css } = useYoshiki(); const { css, theme } = useYoshiki();
if (isLoading) return <Skeleton variant="round" {...css({ width: size, height: size })} />; if (isLoading) return <Skeleton variant="round" {...css({ width: size, height: size })} />;
return ( return (
<View {...css({ borderRadius: size / 2, width: size, height: size }, props)}> <View {...css({ borderRadius: size / 2, width: size, height: size, overflow: "hidden" }, props)}>
{src ? ( {src ? (
<Image src={src} alt={alt} layout={{ width: size, height: size }} /> <Image src={src} alt={alt} layout={{ width: size, height: size }} />
) : ( ) : (
<Icon icon="account-circle" size={size} /> <Icon icon="account-circle" size={size} color={theme.overlay0} />
)} )}
</View> </View>
); );

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

@ -22,7 +22,6 @@ import { Movie, QueryIdentifier, Show, getDisplayDate, Genre, Studio } from "@ky
import { import {
Container, Container,
H1, H1,
Main,
ImageBackground, ImageBackground,
Skeleton, Skeleton,
Poster, Poster,
@ -39,10 +38,9 @@ import {
A, A,
ts, ts,
} from "@kyoo/primitives"; } from "@kyoo/primitives";
import { ScrollView } from "moti";
import { Fragment } from "react"; import { Fragment } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { StyleSheet, View } from "react-native"; import { View } from "react-native";
import { import {
Theme, Theme,
md, md,
@ -57,7 +55,6 @@ import {
Stylable, Stylable,
} from "yoshiki/native"; } from "yoshiki/native";
import { Fetch } from "../fetch"; import { Fetch } from "../fetch";
import { Navbar } from "../navbar";
const TitleLine = ({ const TitleLine = ({
isLoading, isLoading,
@ -283,7 +280,7 @@ export const Header = ({ query, slug }: { query: QueryIdentifier<Show | Movie>;
return ( return (
<Fetch query={query}> <Fetch query={query}>
{({ isLoading, ...data }) => ( {({ isLoading, ...data }) => (
<ScrollView> <>
<Head title={data?.name} description={data?.overview} /> <Head title={data?.name} description={data?.overview} />
<ImageBackground <ImageBackground
src={data?.thumbnail} src={data?.thumbnail}
@ -321,7 +318,7 @@ export const Header = ({ query, slug }: { query: QueryIdentifier<Show | Movie>;
genres={data?.genres} genres={data?.genres}
{...css({ paddingTop: { xs: 0, md: ts(2) } })} {...css({ paddingTop: { xs: 0, md: ts(2) } })}
/> />
</ScrollView> </>
)} )}
</Fetch> </Fetch>
); );

8
front/packages/ui/src/details/index.tsx
View File

@ -19,6 +19,8 @@
*/ */
import { Movie, MovieP, QueryIdentifier, QueryPage } from "@kyoo/models"; import { Movie, MovieP, QueryIdentifier, QueryPage } from "@kyoo/models";
import { Platform, ScrollView } from "react-native";
import { useYoshiki } from "yoshiki/native";
import { TransparentLayout } from "../layout"; import { TransparentLayout } from "../layout";
import { Header } from "./header"; import { Header } from "./header";
import { Staff } from "./staff"; import { Staff } from "./staff";
@ -32,11 +34,13 @@ const query = (slug: string): QueryIdentifier<Movie> => ({
}); });
export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => { export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
const { css } = useYoshiki();
return ( return (
<> <ScrollView {...css(Platform.OS === "web" && { overflow: "overlay" as any })}>
<Header slug={slug} query={query(slug)} /> <Header slug={slug} query={query(slug)} />
<Staff slug={slug} /> <Staff slug={slug} />
</> </ScrollView>
); );
}; };

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

@ -32,7 +32,7 @@ export const Staff = ({ slug }: { slug: string }) => {
<InfiniteFetch <InfiniteFetch
query={Staff.query(slug)} query={Staff.query(slug)}
horizontal horizontal
layout={{ numColumns: 0, size: PersonAvatar.width }} layout={{ numColumns: 1, size: PersonAvatar.width }}
placeholderCount={20} placeholderCount={20}
> >
{/* <HorizontalList title={t("show.staff")} noContent={t("show.staff-none")}> */} {/* <HorizontalList title={t("show.staff")} noContent={t("show.staff-none")}> */}

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

@ -60,7 +60,7 @@ const InfiniteScroll = ({
{ {
display: "flex", display: "flex",
alignItems: "flex-start", alignItems: "flex-start",
overflow: "overlay", overflow: "auto",
}, },
layout == "vertical" && { layout == "vertical" && {
flexDirection: "column", flexDirection: "column",