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;
isLoading?: boolean;
} & Stylable) => {
const { css } = useYoshiki();
const { css, theme } = useYoshiki();
if (isLoading) return <Skeleton variant="round" {...css({ width: size, height: size })} />;
return (
<View {...css({ borderRadius: size / 2, width: size, height: size }, props)}>
<View {...css({ borderRadius: size / 2, width: size, height: size, overflow: "hidden" }, props)}>
{src ? (
<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>
);

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

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

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

@ -19,6 +19,8 @@
*/
import { Movie, MovieP, QueryIdentifier, QueryPage } from "@kyoo/models";
import { Platform, ScrollView } from "react-native";
import { useYoshiki } from "yoshiki/native";
import { TransparentLayout } from "../layout";
import { Header } from "./header";
import { Staff } from "./staff";
@ -32,11 +34,13 @@ const query = (slug: string): QueryIdentifier<Movie> => ({
});
export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
const { css } = useYoshiki();
return (
<>
<ScrollView {...css(Platform.OS === "web" && { overflow: "overlay" as any })}>
<Header slug={slug} query={query(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
query={Staff.query(slug)}
horizontal
layout={{ numColumns: 0, size: PersonAvatar.width }}
layout={{ numColumns: 1, size: PersonAvatar.width }}
placeholderCount={20}
>
{/* <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",
alignItems: "flex-start",
overflow: "overlay",
overflow: "auto",
},
layout == "vertical" && {
flexDirection: "column",