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

Cleanup layout and expo's withRoute

Browse Source
This commit is contained in:
Zoe Roux 2022-12-14 01:09:53 +09:00
parent 894cbb3c9d
commit a12f78761d
8 changed files with 212 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
front/apps/mobile/app/movie/[slug].tsx Normal file
View File

@ -0,0 +1,27 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { MovieDetails } from "@kyoo/ui";
import { withRoute } from "../../utils";
export default withRoute(MovieDetails, {
options: { headerTransparent: true, headerStyle: { backgroundColor: "transparent" } },
statusBar: { barStyle: "light-content" },
});

43
front/apps/mobile/utils.tsx Normal file
View File

@ -0,0 +1,43 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { Stack } from "expo-router";
import { ComponentType } from "react";
import { StatusBar, StatusBarProps } from "react-native";
export const withRoute = <Props,>(
Component: ComponentType<Props>,
options?: Parameters<typeof Stack.Screen>[0] & { statusBar?: StatusBarProps },
) => {
const { statusBar, ...routeOptions } = options ?? {};
const WithUseRoute = ({ route, ...props }: Props & { route: any }) => {
return (
<>
{routeOptions && <Stack.Screen {...routeOptions} />}
{statusBar && <StatusBar {...statusBar} />}
<Component {...route.params} {...props} />
</>
);
};
const { ...all } = Component;
Object.assign(WithUseRoute, { ...all });
return WithUseRoute;
};

24
front/packages/primitives/src/utils/index.tsx Normal file
View File

@ -0,0 +1,24 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
export * from "./breakpoints";
export * from "./nojs";
export * from "./head";
export * from "./spacing";

25
front/packages/primitives/src/utils/spacing.tsx Normal file
View File

@ -0,0 +1,25 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { px } from "yoshiki/native";
export const ts = (spacing: number) => {
return px(spacing * 8);
};

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

@ -19,8 +19,7 @@
*/
import { Movie, MovieP, QueryIdentifier, QueryPage } from "@kyoo/models";
import { Navbar } from "../navbar";
import { DefaultLayout } from "../layout";
import { TransparentLayout } from "../layout";
import { Header } from "./header";
import { Staff } from "./staff";
@ -36,7 +35,7 @@ export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
return (
<>
<Header slug={slug} query={query(slug)} />
{/* <Staff slug={slug} /> */}
<Staff slug={slug} />
</>
);
};
@ -44,7 +43,6 @@ export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
MovieDetails.getFetchUrls = ({ slug }) => [
query(slug),
// ShowStaff.query(slug),
Navbar.query(),
];
MovieDetails.getLayout = DefaultLayout;
MovieDetails.getLayout = TransparentLayout;

51
front/packages/ui/src/details/person.tsx Normal file
View File

@ -0,0 +1,51 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { Avatar, Link, P, Skeleton, SubP } from "@kyoo/primitives";
import { Stylable, useYoshiki } from "yoshiki/native";
export const PersonAvatar = ({
slug,
name,
role,
poster,
isLoading,
...props
}: {
isLoading: boolean;
slug?: string;
name?: string;
role?: string;
poster?: string | null;
} & Stylable) => {
const { css } = useYoshiki();
return (
<Link href={slug ? `/person/${slug}` : ""} {...props}>
<Avatar src={poster} alt={name} size={PersonAvatar.width} />
<Skeleton>{isLoading || <P {...css({ textAlign: "center" })}>{name}</P>}</Skeleton>
{(isLoading || role) && (
<Skeleton>{isLoading || <SubP {...css({ textAlign: "center" })}>{role}</SubP>}</Skeleton>
)}
</Link>
);
};
PersonAvatar.width = 300;

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

@ -31,6 +31,7 @@ export const Staff = ({ slug }: { slug: string }) => {
return (
<InfiniteFetch
query={Staff.query(slug)}
horizontal
layout={{ numColumns: 0, size: PersonAvatar.width }}
placeholderCount={20}
>

42
front/packages/ui/src/layout.tsx
View File

@ -20,7 +20,8 @@
import { ReactElement } from "react";
import { Navbar } from "./navbar";
import { useYoshiki } from "yoshiki";
import { useYoshiki } from "yoshiki/native";
import { Main } from "@kyoo/primitives";
export const DefaultLayout = (page: ReactElement) => {
const { css } = useYoshiki();
@ -28,11 +29,44 @@ export const DefaultLayout = (page: ReactElement) => {
return (
<>
<Navbar />
<main id="main" {...css({ display: "flex", flexGrow: 1, flexShrink: 1, overflow: "auto" })}>
<Main
{...css({
display: "flex",
flexGrow: 1,
flexShrink: 1,
})}
>
{page}
</main>
</Main>
</>
);
};
DefaultLayout.getFetchUrls = () => [Navbar.query()];
export const TransparentLayout = (page: ReactElement) => {
const { css } = useYoshiki();
return (
<>
<Navbar
{...css({
bg: "transparent",
position: "absolute",
top: 0,
left: 0,
right: 0,
})}
/>
<Main
{...css({
display: "flex",
flexGrow: 1,
flexShrink: 1,
})}
>
{page}
</Main>
</>
);
};
TransparentLayout.getFetchUrls = () => [Navbar.query()];