Format code

front/src/components/episode.tsx

@@ -61,7 +61,13 @@ export const EpisodeLine = ({ episode, sx }: { episode?: Episode; sx?: SxProps }
 				<Typography variant="overline" align="center" sx={{ width: "4rem", flexShrink: 0 }}>
 					{episode ? displayNumber(episode) : <Skeleton />}
 				</Typography>
-				<Image img={episode?.thumbnail} alt="" width="18%" aspectRatio="16/9" sx={{ flexShrink: 0 }} />
+				<Image
+					img={episode?.thumbnail}
+					alt=""
+					width="18%"
+					aspectRatio="16/9"
+					sx={{ flexShrink: 0 }}
+				/>
 				{episode ? (
 					<Box sx={{ flexGrow: 1 }}>
 						<Typography variant="h6">{episode.name ?? t("show.episodeNoMetadata")}</Typography>

front/src/components/errors.tsx

@@ -22,7 +22,7 @@ import { Alert, Box, Snackbar, SnackbarCloseReason, Typography, SxProps } from "
 import { SyntheticEvent, useState } from "react";
 import { KyooErrors } from "~/models";
 
-export const ErrorComponent = ({ errors, sx }: { errors: string[], sx?: SxProps }) => {
+export const ErrorComponent = ({ errors, sx }: { errors: string[]; sx?: SxProps }) => {
 	return (
 		<Box
 			sx={{
@@ -32,10 +32,12 @@ export const ErrorComponent = ({ errors, sx }: { errors: string[], sx?: SxProps
 				justifyContent: "center",
 				height: "100%",
 				backgroundColor: "error.light",
-				...sx
+				...sx,
 			}}
 		>
-			<Typography variant="h1" component="h1" sx={{ fontWeight: 500 }}>Error</Typography>
+			<Typography variant="h1" component="h1" sx={{ fontWeight: 500 }}>
+				Error
+			</Typography>
 			{errors.map((x, i) => (
 				<Typography variant="h2" component="h2" key={i}>
 					{x}

front/src/components/horizontal-list.tsx

@@ -24,7 +24,15 @@ import { ReactNode, useRef } from "react";
 import { Container } from "./container";
 import useTranslation from "next-translate/useTranslation";
 
-export const HorizontalList = ({ title, noContent, children }: { title: string, noContent: string, children: ReactNode[] }) => {
+export const HorizontalList = ({
+	title,
+	noContent,
+	children,
+}: {
+	title: string;
+	noContent: string;
+	children: ReactNode[];
+}) => {
 	const { t } = useTranslation("browse");
 	const ref = useRef<HTMLDivElement>(null);
 	const getScrollSize = () => {
@@ -47,12 +55,18 @@ export const HorizontalList = ({ title, noContent, children }: { title: string,
 				</Typography>
 				<Box>
 					<Tooltip title={t("misc.prev-page")}>
-						<IconButton aria-label={t("misc.prev-page")} onClick={() => ref.current?.scrollBy({ left: -getScrollSize(), behavior: "smooth" })}>
+						<IconButton
+							aria-label={t("misc.prev-page")}
+							onClick={() => ref.current?.scrollBy({ left: -getScrollSize(), behavior: "smooth" })}
+						>
 							<ArrowLeft />
 						</IconButton>
 					</Tooltip>
 					<Tooltip title={t("misc.next-page")}>
-						<IconButton aria-label={t("misc.next-page")} onClick={() => ref.current?.scrollBy({ left: getScrollSize(), behavior: "smooth" })}>
+						<IconButton
+							aria-label={t("misc.next-page")}
+							onClick={() => ref.current?.scrollBy({ left: getScrollSize(), behavior: "smooth" })}
+						>
 							<ArrowRight />
 						</IconButton>
 					</Tooltip>
@@ -80,4 +94,4 @@ export const HorizontalList = ({ title, noContent, children }: { title: string,
 			)}
 		</>
 	);
-}
+};

front/src/components/navbar.tsx

@@ -63,7 +63,7 @@ const KyooTitle = (props: { sx: SxProps<Theme> }) => {
 						mr: 2,
 						fontFamily: "monospace",
 						fontWeight: 700,
-						color: "white"
+						color: "white",
 					}}
 				>
 					Kyoo
@@ -112,7 +112,7 @@ export const Navbar = (barProps: AppBarProps) => {
 				</Box>
 				<Tooltip title={t("navbar.login")}>
 					<IconButton sx={{ p: 0 }} href="/auth/login">
-						<Avatar alt={t("navbar.login")}/>
+						<Avatar alt={t("navbar.login")} />
 					</IconButton>
 				</Tooltip>
 			</Toolbar>
@@ -125,4 +125,3 @@ Navbar.query = (): QueryIdentifier<Page<Library>> => ({
 	parser: Paged(LibraryP),
 	path: ["libraries"],
 });
-

front/src/components/person.tsx

@@ -26,11 +26,15 @@ export const PersonAvatar = ({ person, sx }: { person?: Person; sx?: SxProps })
 	if (!person) {
 		return (
 			<Box sx={sx}>
-				<Skeleton variant="circular" sx={{ width: "100%", aspectRatio: "1/1", height: "unset" }}/>
+				<Skeleton variant="circular" sx={{ width: "100%", aspectRatio: "1/1", height: "unset" }} />
-				<Typography align="center"><Skeleton/></Typography>
+				<Typography align="center">
-				<Typography variant="body2" align="center"><Skeleton/></Typography>
+					<Skeleton />
+				</Typography>
+				<Typography variant="body2" align="center">
+					<Skeleton />
+				</Typography>
 			</Box>
-		)
+		);
 	}
 	return (
 		<Link href={`/person/${person.slug}`} color="inherit" sx={sx}>

front/src/models/resources/collection.ts

@@ -21,7 +21,6 @@
 import { z } from "zod";
 import { ImagesP, ResourceP } from "../traits";
 
-
 export const CollectionP = ResourceP.merge(ImagesP).extend({
 	/**
 	 * The title of this collection.

front/src/models/resources/library-item.ts

@@ -38,8 +38,17 @@ export const LibraryItemP = z.preprocess(
 		return x;
 	},
 	z.union([
+		/*
+		 * Either a Show
+		 */
 		ShowP.and(z.object({ type: z.literal(ItemType.Show) })),
+		/*
+		 * Or a Movie
+		 */
 		MovieP.and(z.object({ type: z.literal(ItemType.Movie) })),
+		/*
+		 * Or a Collection
+		 */
 		CollectionP.and(z.object({ type: z.literal(ItemType.Collection) })),
 	]),
 );

front/src/models/utils.ts

@@ -32,8 +32,7 @@ export const getDisplayDate = (data: Show | Movie) => {
 			return startAir.getFullYear().toString();
 		}
 		return startAir.getFullYear() + (endAir ? ` - ${endAir.getFullYear()}` : "");
-	}
+	} else if (airDate) {
-	else if (airDate) {
 		return airDate.getFullYear().toString();
 	}
 };

front/src/pages/_app.tsx

@@ -67,9 +67,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 			</Head>
 			<QueryClientProvider client={queryClient}>
 				<Hydrate state={queryState}>
-					<ThemeProvider theme={defaultTheme}>
+					<ThemeProvider theme={defaultTheme}>{getLayout(<Component {...props} />)}</ThemeProvider>
-						{getLayout(<Component {...props} />)}
-					</ThemeProvider>
 				</Hydrate>
 			</QueryClientProvider>
 		</>

front/src/pages/browse/index.tsx

@@ -247,7 +247,9 @@ const BrowseSettings = ({
 	const router = useRouter();
 	const { t } = useTranslation("browse");
 
-	const switchViewTitle = layout === Layout.Grid ? t("browse.switchToList") : t("browse.switchToGrid");
+	const switchViewTitle = layout === Layout.Grid 
+		? t("browse.switchToList")
+		: t("browse.switchToGrid");
 
 	return (
 		<>

front/src/pages/index.tsx

@@ -18,6 +18,6 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import BrowsePage from "./browse"
+import BrowsePage from "./browse";
 
 export default BrowsePage;

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

@@ -135,7 +135,11 @@ export const ShowHeader = ({ data }: { data?: Show | Movie }) => {
 						{data?.name ?? <Skeleton width="15rem" />}
 					</Typography>
 					{(!data || getDisplayDate(data)) && (
-						<Typography component="p" variant="h5" sx={{ color: { md: "white" }, fontWeight: 300, mb: ".5rem" }}>
+						<Typography
+							component="p"
+							variant="h5"
+							sx={{ color: { md: "white" }, fontWeight: 300, mb: ".5rem" }}
+						>
 							{data != undefined ? (
 								getDisplayDate(data)
 							) : (
@@ -247,7 +251,6 @@ export const ShowHeader = ({ data }: { data?: Show | Movie }) => {
 	);
 };
 
-
 export const ShowStaff = ({ slug }: { slug: string }) => {
 	const { items, isError, error } = useInfiniteFetch(ShowStaff.query(slug));
 	const { t } = useTranslation("browse");
@@ -300,11 +303,6 @@ const MovieDetails: QueryPage<{ slug: string }> = ({ slug }) => {
 	);
 };
 
-
+MovieDetails.getFetchUrls = ({ slug }) => [query(slug), ShowStaff.query(slug), Navbar.query()];
-MovieDetails.getFetchUrls = ({ slug }) => [
-	query(slug),
-	ShowStaff.query(slug),
-	Navbar.query(),
-];
 
 export default withRoute(MovieDetails);

front/src/utils/link.tsx

@@ -19,14 +19,22 @@
  */
 
 import { forwardRef, Ref } from "react";
-import NLink, { LinkProps as NLinkProps} from "next/link";
+import NLink, { LinkProps as NLinkProps } from "next/link";
-import { Button as MButton, ButtonProps, Link as MLink, LinkProps as MLinkProps} from "@mui/material";
+import {
+	Button as MButton,
+	ButtonProps,
+	Link as MLink,
+	LinkProps as MLinkProps,
+} from "@mui/material";
 
 type ButtonRef = HTMLButtonElement;
 type ButtonLinkProps = Omit<ButtonProps, "href"> &
 	Pick<NLinkProps, "href" | "as" | "prefetch" | "locale">;
 
-const NextButton = ({ href, as, prefetch, locale, ...props }: ButtonLinkProps, ref: Ref<ButtonRef>) => (
+const NextButton = (
+	{ href, as, prefetch, locale, ...props }: ButtonLinkProps,
+	ref: Ref<ButtonRef>,
+) => (
 	<NLink href={href} as={as} prefetch={prefetch} locale={locale} passHref>
 		<MButton ref={ref} {...props} />
 	</NLink>
@@ -37,10 +45,21 @@ export const ButtonLink = forwardRef<ButtonRef, ButtonLinkProps>(NextButton);
 type LinkRef = HTMLAnchorElement;
 type LinkProps = Omit<MLinkProps, "href"> &
 	Pick<NLinkProps, "as" | "prefetch" | "locale" | "shallow" | "replace"> &
-	({ to: NLinkProps["href"], href?: undefined } | { href: NLinkProps["href"], to?: undefined });
+	({ to: NLinkProps["href"]; href?: undefined } | { href: NLinkProps["href"]; to?: undefined });
 
-const NextLink = ({ href, to, as, prefetch, locale, shallow, replace, ...props }: LinkProps, ref: Ref<LinkRef>) => (
+const NextLink = (
-	<NLink href={href ?? to} as={as} prefetch={prefetch} locale={locale} shallow={shallow} replace={replace} passHref>
+	{ href, to, as, prefetch, locale, shallow, replace, ...props }: LinkProps,
+	ref: Ref<LinkRef>,
+) => (
+	<NLink
+		href={href ?? to}
+		as={as}
+		prefetch={prefetch}
+		locale={locale}
+		shallow={shallow}
+		replace={replace}
+		passHref
+	>
 		<MLink ref={ref} {...props} />
 	</NLink>
 );

front/src/utils/query.ts

@@ -61,7 +61,7 @@ const queryFn = async <Data>(
 		} catch (e) {
 			data = { errors: [error] } as KyooErrors;
 		}
-		console.log("Invalid response:", data)
+		console.log("Invalid response:", data);
 		throw data as KyooErrors;
 	}
 
@@ -132,7 +132,7 @@ export const useInfiniteFetch = <Data>(query: QueryIdentifier<Data>) => {
 		queryFn: (ctx) => queryFn(Paged(query.parser), ctx),
 		getNextPageParam: (page: Page<Data>) => page?.next || undefined,
 	});
-	return {...ret, items: ret.data?.pages.flatMap((x) => x.items)}
+	return { ...ret, items: ret.data?.pages.flatMap((x) => x.items) };
 };
 
 export const fetchQuery = async (queries: QueryIdentifier[]) => {