Add staff buttons for left/right

front/src/components/horizontal-list.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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 { ArrowLeft, ArrowRight } from "@mui/icons-material";
+import { Box, IconButton, Typography } from "@mui/material";
+import { ReactNode, useRef } from "react";
+import { Container } from "./container";
+
+export const HorizontalList = ({ title, noContent, children }: { title: string, noContent: string, children: ReactNode[] }) => {
+	const ref = useRef<HTMLDivElement>(null);
+	const getScrollSize = () => {
+		const childSize = ref.current?.children[0].clientWidth;
+		const containerSize = ref.current?.offsetWidth;
+
+		if (!childSize || !containerSize) return childSize || 150;
+		return Math.round(containerSize / childSize) * childSize;
+	};
+
+	// TODO: handle infinite scroll
+
+	return (
+		<>
+			<Container
+				sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between", py: 3 }}
+			>
+				<Typography variant="h4" component="h2">
+					{title}
+				</Typography>
+				<Box>
+					<IconButton onClick={() => ref.current?.scrollBy({ left: -getScrollSize(), behavior: "smooth" })}>
+						<ArrowLeft />
+					</IconButton>
+					<IconButton onClick={() => ref.current?.scrollBy({ left: getScrollSize(), behavior: "smooth" })}>
+						<ArrowRight />
+					</IconButton>
+				</Box>
+			</Container>
+			{children.length == 0 ? (
+				<Box sx={{ display: "flex", justifyContent: "center" }}>
+					<Typography sx={{ py: 3 }}>{noContent}</Typography>
+				</Box>
+			) : (
+				<Container
+					sx={{
+						display: "flex",
+						flexDirection: "row",
+						maxWidth: "100%",
+						overflowY: "auto",
+						pt: 1,
+						pb: 2,
+						overflowX: "visible",
+					}}
+					ref={ref}
+				>
+						{children}
+				</Container>
+			)}
+		</>
+	);
+}

front/src/pages/show/[slug].tsx

@@ -18,9 +18,8 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ArrowLeft, ArrowRight, LocalMovies, PlayArrow } from "@mui/icons-material";
+import { LocalMovies, PlayArrow } from "@mui/icons-material";
 import {
-	alpha,
 	Box,
 	Divider,
 	Fab,
@@ -31,13 +30,12 @@ import {
 	Tabs,
 	Tooltip,
 	Typography,
-	useTheme,
 } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
 import Head from "next/head";
 import { Navbar } from "~/components/navbar";
 import { Image, Poster } from "~/components/poster";
-import { Episode, EpisodeP, Page, Season, Show, ShowP } from "~/models";
+import { Episode, EpisodeP, Season, Show, ShowP } from "~/models";
 import { QueryIdentifier, QueryPage, useFetch, useInfiniteFetch } from "~/utils/query";
 import { getDisplayDate } from "~/models/utils";
 import { withRoute } from "~/utils/router";
@@ -45,13 +43,14 @@ import { Container } from "~/components/container";
 import { makeTitle } from "~/utils/utils";
 import { Link } from "~/utils/link";
 import { Studio } from "~/models/resources/studio";
-import { Paged, Person, PersonP } from "~/models";
+import { Person, PersonP } from "~/models";
 import { PersonAvatar } from "~/components/person";
 import { ErrorComponent, ErrorPage } from "~/components/errors";
 import { useState } from "react";
 import { EpisodeLine } from "~/components/episode";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useRouter } from "next/router";
+import { HorizontalList } from "~/components/horizontal-list";
 
 const StudioText = ({
 	studio,
@@ -261,7 +260,7 @@ const staffQuery = (slug: string): QueryIdentifier<Person> => ({
 });
 
 const ShowStaff = ({ slug }: { slug: string }) => {
-	const { data, isError, error, hasNextPage, fetchNextPage } = useInfiniteFetch(staffQuery(slug));
+	const { data, isError, error } = useInfiniteFetch(staffQuery(slug));
 	const { t } = useTranslation("browse");
 
 	// TODO: handle infinite scroll
@@ -269,48 +268,15 @@ const ShowStaff = ({ slug }: { slug: string }) => {
 	if (isError) return <ErrorComponent {...error} />;
 
 	return (
-		<>
+		<HorizontalList title={t("show.staff")} noContent={t("show.staff-none")}>
-			<Container
+			{(data ? data.pages.flatMap((x) => x.items) : [...Array(20)]).map((x, i) => (
-				sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between", py: 3 }}
+				<PersonAvatar
-			>
+					key={x ? x.id : i}
-				<Typography variant="h4" component="h2">
+					person={x}
-					{t("show.staff")}
+					sx={{ width: { xs: "7rem", lg: "10rem" }, flexShrink: 0, px: 2 }}
-				</Typography>
+				/>
-				<Box>
+			))}
-					<IconButton>
+		</HorizontalList>
-						<ArrowLeft />
-					</IconButton>
-					<IconButton>
-						<ArrowRight />
-					</IconButton>
-				</Box>
-			</Container>
-			{data && data?.pages.at(0)?.count === 0 ? (
-				<Box sx={{ display: "flex", justifyContent: "center" }}>
-					<Typography sx={{ py: 3 }}>{t("show.staff-none")}</Typography>
-				</Box>
-			) : (
-				<Container
-					sx={{
-						display: "flex",
-						flexDirection: "row",
-						maxWidth: "100%",
-						overflowY: "auto",
-						pt: 1,
-						pb: 2,
-						overflowX: "visible",
-					}}
-				>
-					{(data ? data.pages.flatMap((x) => x.items) : [...Array(20)]).map((x, i) => (
-						<PersonAvatar
-							key={x ? x.id : i}
-							person={x}
-							sx={{ width: { xs: "7rem", lg: "10rem" }, flexShrink: 0, px: 2 }}
-						/>
-					))}
-				</Container>
-			)}
-		</>
 	);
 };