Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add staff buttons for left/right

Browse Source
This commit is contained in:
Zoe Roux 2022-09-19 19:35:51 +09:00
parent 0ba5a97d2e
commit 9f6cdcdf91
2 changed files with 91 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
front/src/components/horizontal-list.tsx Normal file
View File

@ -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>
)}
</>
);
}

48
front/src/pages/show/[slug].tsx
View File

@ -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,38 +268,7 @@ const ShowStaff = ({ slug }: { slug: string }) => {
if (isError) return <ErrorComponent {...error} />;
return (
<>
<Container
sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between", py: 3 }}
>
<Typography variant="h4" component="h2">
{t("show.staff")}
</Typography>
<Box>
<IconButton>
<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",
}}
>
<HorizontalList title={t("show.staff")} noContent={t("show.staff-none")}>
{(data ? data.pages.flatMap((x) => x.items) : [...Array(20)]).map((x, i) => (
<PersonAvatar
key={x ? x.id : i}
@ -308,9 +276,7 @@ const ShowStaff = ({ slug }: { slug: string }) => {
sx={{ width: { xs: "7rem", lg: "10rem" }, flexShrink: 0, px: 2 }}
/>
))}
</Container>
)}
</>
</HorizontalList>
);
};