diff --git a/front/apps/mobile/app/(app)/_layout.tsx b/front/apps/mobile/app/(app)/_layout.tsx index 7055b15e..36927789 100644 --- a/front/apps/mobile/app/(app)/_layout.tsx +++ b/front/apps/mobile/app/(app)/_layout.tsx @@ -43,12 +43,11 @@ export default function SignGuard() { return ( , headerRight: () => , contentStyle: { backgroundColor: theme.background, - paddingBottom: insets.bottom, paddingLeft: insets.left, paddingRight: insets.right, }, diff --git a/front/packages/primitives/src/utils/index.tsx b/front/packages/primitives/src/utils/index.tsx index a6a952f9..4b11ca3c 100644 --- a/front/packages/primitives/src/utils/index.tsx +++ b/front/packages/primitives/src/utils/index.tsx @@ -24,3 +24,4 @@ export * from "./head"; export * from "./spacing"; export * from "./capitalize"; export * from "./touchonly"; +export * from "./page-style"; diff --git a/front/packages/primitives/src/utils/page-style.tsx b/front/packages/primitives/src/utils/page-style.tsx new file mode 100644 index 00000000..f8ff521a --- /dev/null +++ b/front/packages/primitives/src/utils/page-style.tsx @@ -0,0 +1,26 @@ +/* + * 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 . + */ + +import { useSafeAreaInsets } from "react-native-safe-area-context"; + +export const usePageStyle = () => { + const insets = useSafeAreaInsets(); + return { paddingBottom: insets.bottom } as const; +}; diff --git a/front/packages/primitives/src/utils/page-style.web.tsx b/front/packages/primitives/src/utils/page-style.web.tsx new file mode 100644 index 00000000..de178959 --- /dev/null +++ b/front/packages/primitives/src/utils/page-style.web.tsx @@ -0,0 +1,23 @@ +/* + * 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 . + */ + +export const usePageStyle = () => { + return {} as const; +}; diff --git a/front/packages/ui/src/collection/index.tsx b/front/packages/ui/src/collection/index.tsx index 0cfd8705..1ad8826a 100644 --- a/front/packages/ui/src/collection/index.tsx +++ b/front/packages/ui/src/collection/index.tsx @@ -29,7 +29,7 @@ import { getDisplayDate, } from "@kyoo/models"; import { Header as ShowHeader, TitleLine } from "../details/header"; -import { Container, Head, ImageBackground, P, Skeleton, ts } from "@kyoo/primitives"; +import { Container, Head, ImageBackground, P, Skeleton, ts, usePageStyle } from "@kyoo/primitives"; import { percent, px, useYoshiki } from "yoshiki/native"; import { useTranslation } from "react-i18next"; import { forwardRef } from "react"; @@ -122,6 +122,7 @@ const CollectionHeader = forwardRef(function => ({ parser: LibraryItemP, path: ["collections", slug, "items"], infinite: true, + params: { + fields: ["firstEpisode", "episodesCount", "watchStatus"], + }, }); export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => { - const { css } = useYoshiki(); + const pageStyle = usePageStyle(); return ( = ({ slug }) => { layout={{ ...ItemDetails.layout, numColumns: { xs: 1, md: 2 } }} Header={CollectionHeader} headerProps={{ slug }} - {...css({ padding: { xs: ts(1), sm: ts(8) } })} + contentContainerStyle={pageStyle} > {(x) => ( = ({ slug }) => { genres={"genres" in x ? x.genres : null} href={x.href} playHref={x.kind !== ItemKind.Collection && !x.isLoading ? x.playHref : undefined} + watchStatus={ + !x.isLoading && x.kind !== ItemKind.Collection ? x.watchStatus?.status ?? null : null + } + unseenEpisodesCount={ + x.kind === ItemKind.Show ? x.watchStatus?.unseenEpisodesCount ?? x.episodesCount! : null + } /> )} diff --git a/front/packages/ui/src/details/movie.tsx b/front/packages/ui/src/details/movie.tsx index 840e4739..a4fc31bb 100644 --- a/front/packages/ui/src/details/movie.tsx +++ b/front/packages/ui/src/details/movie.tsx @@ -24,6 +24,7 @@ import { useYoshiki } from "yoshiki/native"; import { DefaultLayout } from "../layout"; import { Header } from "./header"; import { DetailsCollections } from "./collection"; +import { usePageStyle } from "@kyoo/primitives"; const query = (slug: string): QueryIdentifier => ({ parser: MovieP, @@ -35,10 +36,11 @@ const query = (slug: string): QueryIdentifier => ({ export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => { const { css } = useYoshiki(); + const pageStyle = usePageStyle(); return ( = ({ slug }) => { // @ts-ignore Web only property overflowY: "overlay", }, - )} + pageStyle, + ])} >
diff --git a/front/packages/ui/src/details/season.tsx b/front/packages/ui/src/details/season.tsx index 10312dac..d541c336 100644 --- a/front/packages/ui/src/details/season.tsx +++ b/front/packages/ui/src/details/season.tsx @@ -26,7 +26,7 @@ import { SeasonP, useInfiniteFetch, } from "@kyoo/models"; -import { Skeleton, H6, HR, P, ts, Menu, IconButton, tooltip } from "@kyoo/primitives"; +import { Skeleton, H6, HR, P, ts, Menu, IconButton, tooltip, usePageStyle } from "@kyoo/primitives"; import { rem, useYoshiki } from "yoshiki/native"; import { View } from "react-native"; import { InfiniteFetch } from "../fetch-infinite"; @@ -114,6 +114,7 @@ export const EpisodeList = ({ Header: ComponentType; headerProps: Props; }) => { + const pageStyle = usePageStyle(); const { t } = useTranslation(); const { items: seasons, error } = useInfiniteFetch(SeasonHeader.query(slug)); @@ -128,6 +129,7 @@ export const EpisodeList = ({ Header={Header} headerProps={headerProps} getItemType={(item) => (item.firstOfSeason ? "withHeader" : "normal")} + contentContainerStyle={pageStyle} > {(item) => { const sea = item?.firstOfSeason diff --git a/front/packages/ui/src/home/recommanded.tsx b/front/packages/ui/src/home/recommanded.tsx index 7488a10a..e7673ec2 100644 --- a/front/packages/ui/src/home/recommanded.tsx +++ b/front/packages/ui/src/home/recommanded.tsx @@ -31,7 +31,6 @@ import { import { Chip, H3, - Icon, IconFab, imageBorderRadius, Link, diff --git a/front/packages/ui/src/search/index.tsx b/front/packages/ui/src/search/index.tsx index 7c423c5c..48e16e90 100644 --- a/front/packages/ui/src/search/index.tsx +++ b/front/packages/ui/src/search/index.tsx @@ -25,10 +25,11 @@ import { createParam } from "solito"; import { DefaultLayout } from "../layout"; import { InfiniteFetch } from "../fetch-infinite"; import { itemMap } from "../browse"; -import { SearchSort, SortOrd, SortBy, Layout } from "../browse/types"; +import { SearchSort, SortOrd, Layout } from "../browse/types"; import { BrowseSettings } from "../browse/header"; import { ItemGrid } from "../browse/grid"; import { ItemList } from "../browse/list"; +import { usePageStyle } from "@kyoo/primitives"; const { useParam } = createParam<{ sortBy?: string }>(); @@ -48,6 +49,7 @@ const query = ( }); export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => { + const pageStyle = usePageStyle(); const { t } = useTranslation(); const [sort, setSort] = useParam("sortBy"); const sortKey = (sort?.split(":")[0] as SearchSort) || SearchSort.Relevance; @@ -74,6 +76,7 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => { setLayout={setLayout} /> } + contentContainerStyle={pageStyle} > {(item) => }