+// ) : (
+// {t("show.genre-none")}
+// )}
+//
+//
+// );
+// };
+
+const min = Platform.OS === "web"
+ ? (...values: number[]): number => `min(${values.join(", ")})` as unknown as number
+ : (...values: number[]): number => Math.min(...values);
+const max = Platform.OS === "web"
+ ? (...values: number[]): number => `max(${values.join(", ")})` as unknown as number
+ : (...values: number[]): number => Math.max(...values);
+const px = Platform.OS === "web"
+ ? (value: number): number => `${value}px` as unknown as number
+ : (value: number): number => value;
+
+export const ShowHeader = ({
+ query,
+ slug,
+}: {
+ query: QueryIdentifier;
+ slug: string;
+}) => {
+ /* const scroll = useScroll(); */
+ const { css } = useYoshiki();
+ // TODO: tweek the navbar color with the theme.
+
+ return (
+ <>
+
+
+ {({ isLoading, ...data }) => (
+ <>
+ {/* TODO: HEAD element for SEO*/}
+ {/* TODO: Add a shadow on navbar items */}
+ {/* TODO: Put the navbar outside of the scrollbox */}
+
+
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* {t("show.genre")} */}
+ {/* {": "} */}
+ {/* {!data ? ( */}
+ {/* */}
+ {/* ) : data?.genres && data.genres.length ? ( */}
+ {/* data.genres.map((genre, i) => [ */}
+ {/* i > 0 && ", ", */}
+ {/* */}
+ {/* {genre.name} */}
+ {/* , */}
+ {/* ]) */}
+ {/* ) : ( */}
+ {/* t("show.genre-none") */}
+ {/* )} */}
+ {/* */}
+ {/* */}
+
+
+ )}
+
+
+ );
+};
diff --git a/front/packages/ui/src/details/index.tsx b/front/packages/ui/src/details/index.tsx
new file mode 100644
index 00000000..f99e1951
--- /dev/null
+++ b/front/packages/ui/src/details/index.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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 { Movie, MovieP, QueryIdentifier, QueryPage } from "@kyoo/models";
+import { ShowHeader } from "./header";
+
+const query = (slug: string): QueryIdentifier => ({
+ parser: MovieP,
+ path: ["shows", slug],
+ params: {
+ fields: ["genres", "studio"],
+ },
+});
+
+export const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
+ return (
+ <>
+ {/* */}
+ {/* {makeTitle(data?.name)} */}
+ {/* */}
+ {/* */}
+
+ {/* */}
+
+ );
+};
+
+MovieDetails.getFetchUrls = ({ slug }) => [//query(slug),
+ // ShowStaff.query(slug), Navbar.query()
+];
diff --git a/front/packages/ui/src/details/staff.tsx b/front/packages/ui/src/details/staff.tsx
new file mode 100644
index 00000000..1976b648
--- /dev/null
+++ b/front/packages/ui/src/details/staff.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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 {}
+// export const ShowStaff = ({ slug }: { slug: string }) => {
+// const { items, isError, error } = useInfiniteFetch(ShowStaff.query(slug));
+// const { t } = useTranslation("browse");
+
+// // TODO: handle infinite scroll
+
+// if (isError) return ;
+
+// return (
+//
+// {(items ?? [...Array(20)]).map((x, i) => (
+//
+// ))}
+//
+// );
+// };
+
+// ShowStaff.query = (slug: string): QueryIdentifier => ({
+// parser: PersonP,
+// path: ["shows", slug, "people"],
+// infinite: true,
+// });
diff --git a/front/packages/ui/src/fetch.tsx b/front/packages/ui/src/fetch.tsx
index 49f4a074..5718726a 100644
--- a/front/packages/ui/src/fetch.tsx
+++ b/front/packages/ui/src/fetch.tsx
@@ -34,11 +34,11 @@ const isPage = (obj: unknown): obj is Page =>
export const Fetch = ({
query,
- placeholderCount,
+ placeholderCount = 1,
children,
}: {
query: QueryIdentifier;
- placeholderCount: number;
+ placeholderCount?: number;
children: (
item: Data extends Page ? WithLoading : WithLoading,
i: number,
@@ -52,7 +52,9 @@ export const Fetch = ({
<>{[...Array(placeholderCount)].map((_, i) => children({ isLoading: true } as any, i))}
);
if (!isPage