diff --git a/front/packages/ui/src/home/index.tsx b/front/packages/ui/src/home/index.tsx index 4f9ef0cd..ac909b76 100644 --- a/front/packages/ui/src/home/index.tsx +++ b/front/packages/ui/src/home/index.tsx @@ -25,6 +25,7 @@ import { DefaultLayout } from "../layout"; import { ScrollView, View } from "react-native"; import { GenreGrid } from "./genre"; import { Recommanded } from "./recommanded"; +import { VerticalRecommanded } from "./vertical"; export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => { return ( @@ -50,7 +51,13 @@ export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => { ))} {randomItems - .filter((_, i) => i >= 2) + .filter((_, i) => i >= 2 && i < 6) + .map((x) => ( + + ))} + + {randomItems + .filter((_, i) => i >= 6) .map((x) => ( ))} @@ -66,4 +73,5 @@ HomePage.getFetchUrls = () => [ Header.query(), ...Object.values(Genre).map((x) => GenreGrid.query(x)), Recommanded.query(), + VerticalRecommanded.query(), ]; diff --git a/front/packages/ui/src/home/vertical.tsx b/front/packages/ui/src/home/vertical.tsx new file mode 100644 index 00000000..f791392e --- /dev/null +++ b/front/packages/ui/src/home/vertical.tsx @@ -0,0 +1,72 @@ +/* + * 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 { + ItemKind, + LibraryItem, + LibraryItemP, + QueryIdentifier, + getDisplayDate, +} from "@kyoo/models"; +import { H3, ts } from "@kyoo/primitives"; +import { View } from "react-native"; +import { useYoshiki } from "yoshiki/native"; +import { InfiniteFetch } from "../fetch-infinite"; +import { ItemList } from "../browse/list"; +import { useTranslation } from "react-i18next"; + +export const VerticalRecommanded = () => { + const { t } = useTranslation(); + const { css } = useYoshiki(); + + return ( + +

{t("home.recommanded")}

+ + {(x, i) => ( + + )} + +
+ ); +}; + +VerticalRecommanded.query = (): QueryIdentifier => ({ + parser: LibraryItemP, + infinite: true, + path: ["items"], + params: { + sortBy: "random", + limit: 3, + }, +});