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,
+ },
+});