diff --git a/front/locales/en/browse.json b/front/locales/en/browse.json index c45e072f..998c9bb0 100644 --- a/front/locales/en/browse.json +++ b/front/locales/en/browse.json @@ -4,6 +4,7 @@ "trailer": "Play Trailer", "studio": "Studio", "genre": "Genres", - "genre-none": "No genres" + "genre-none": "No genres", + "staff": "Staff" } } diff --git a/front/locales/fr/browse.json b/front/locales/fr/browse.json index 629e4bb4..545bff6d 100644 --- a/front/locales/fr/browse.json +++ b/front/locales/fr/browse.json @@ -4,6 +4,7 @@ "trailer": "Jouer le trailer", "studio": "Studio", "genre": "Genres", - "genre-none": "Aucun genres" + "genre-none": "Aucun genres", + "staff": "Staff" } } diff --git a/front/src/components/episode.tsx b/front/src/components/episode.tsx new file mode 100644 index 00000000..7cd900a8 --- /dev/null +++ b/front/src/components/episode.tsx @@ -0,0 +1,70 @@ +/* + * 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 { Box, Divider, Skeleton, SxProps, Typography } from "@mui/material"; +import { Episode } from "~/models"; +import { Link } from "~/utils/link"; +import { Image } from "./poster"; + +const displayNumber = (episode: Episode) => { + if (episode.seasonNumber && episode.episodeNumber) + return `S${episode.seasonNumber}:E${episode.episodeNumber}`; + if (episode.absoluteNumber) return episode.absoluteNumber.toString(); + return "???"; +}; + +export const EpisodeBox = ({ episode, sx }: { episode?: Episode; sx: SxProps }) => { + return ( + + + {episode?.name ?? } + {episode?.overview ?? } + + ); +}; + +export const EpisodeLine = ({ episode, sx }: { episode?: Episode; sx?: SxProps }) => { + return ( + <> + *": { m: 1 }, + ...sx, + }} + > + + {episode ? displayNumber(episode) : } + + + + {episode?.name ?? } + {episode?.overview ?? } + + + + + ); +}; diff --git a/front/src/components/error-snackbar.tsx b/front/src/components/errors.tsx similarity index 80% rename from front/src/components/error-snackbar.tsx rename to front/src/components/errors.tsx index aaf121b6..fb7b7826 100644 --- a/front/src/components/error-snackbar.tsx +++ b/front/src/components/errors.tsx @@ -18,10 +18,23 @@ * along with Kyoo. If not, see . */ -import { Alert, Snackbar, SnackbarCloseReason } from "@mui/material"; +import { Alert, Snackbar, SnackbarCloseReason, Typography } from "@mui/material"; import { SyntheticEvent, useState } from "react"; import { KyooErrors } from "~/models"; +export const ErrorPage = ({ errors }: { errors: string[] }) => { + return ( + <> + Error + {errors.map((x, i) => ( + + {x} + + ))} + + ); +}; + export const ErrorSnackbar = ({ error }: { error: KyooErrors }) => { const [isOpen, setOpen] = useState(true); const close = (_: Event | SyntheticEvent, reason?: SnackbarCloseReason) => { diff --git a/front/src/components/navbar.tsx b/front/src/components/navbar.tsx index e02486d4..375ba18e 100644 --- a/front/src/components/navbar.tsx +++ b/front/src/components/navbar.tsx @@ -38,7 +38,7 @@ import Image from "next/image"; import { ButtonLink } from "~/utils/link"; import { LibraryP, Paged } from "~/models"; import { useFetch } from "~/utils/query"; -import { ErrorSnackbar } from "./error-snackbar"; +import { ErrorSnackbar } from "./errors"; export const KyooTitle = (props: { sx: SxProps }) => { const { t } = useTranslation("common"); diff --git a/front/src/components/poster.tsx b/front/src/components/poster.tsx index be75cd36..f5b78890 100644 --- a/front/src/components/poster.tsx +++ b/front/src/components/poster.tsx @@ -32,7 +32,7 @@ type ImageOptions = { type ImageProps = { img?: string | null; - alt: string; + alt?: string; } & ImageOptions; type ImagePropsWithLoading = diff --git a/front/src/models/resources/episode.ts b/front/src/models/resources/episode.ts new file mode 100644 index 00000000..a5805f8a --- /dev/null +++ b/front/src/models/resources/episode.ts @@ -0,0 +1,67 @@ +/* + * 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 { z } from "zod"; +import { zdate } from "~/utils/zod"; +import { ImagesP } from "../traits"; +import { ResourceP } from "../traits/resource"; + +export const EpisodeP = z.preprocess( + (x: any) => { + x.name = x.title; + return x; + }, + ResourceP.merge(ImagesP).extend({ + /** + * The season in witch this episode is in. + */ + seasonNumber: z.number().nullable(), + + /** + * The number of this episode in it's season. + */ + episodeNumber: z.number().nullable(), + + /** + * The absolute number of this episode. It's an episode number that is not reset to 1 after a new season. + */ + absoluteNumber: z.number().nullable(), + + /** + * The title of this episode. + */ + name: z.string(), + + /** + * The overview of this episode. + */ + overview: z.string(), + + /** + * The release date of this episode. It can be null if unknown. + */ + releaseDate: zdate(), + }), +); + +/** + * A class to represent a single show's episode. + */ +export type Episode = z.infer; diff --git a/front/src/models/resources/index.ts b/front/src/models/resources/index.ts index 7d43a1e1..9d72b08d 100644 --- a/front/src/models/resources/index.ts +++ b/front/src/models/resources/index.ts @@ -26,3 +26,5 @@ export * from "./collection"; export * from "./genre"; export * from "./person"; export * from "./studio"; +export * from "./episode"; +export * from "./season"; diff --git a/front/src/models/resources/season.ts b/front/src/models/resources/season.ts new file mode 100644 index 00000000..f4878891 --- /dev/null +++ b/front/src/models/resources/season.ts @@ -0,0 +1,61 @@ +/* + * 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 { z } from "zod"; +import { zdate } from "~/utils/zod"; +import { ImagesP } from "../traits"; +import { ResourceP } from "../traits/resource"; + +export const SeasonP = z.preprocess( + (x: any) => { + x.name = x.title; + return x; + }, + ResourceP.merge(ImagesP).extend({ + /** + * The name of this season. + */ + name: z.string(), + /** + * The number of this season. This can be set to 0 to indicate specials. + */ + seasonNumber: z.number(), + + /** + * A quick overview of this season. + */ + overview: z.string(), + + /** + * The starting air date of this season. + */ + startDate: zdate().nullable(), + + /** + * The ending date of this season. + */ + endDate: zdate().nullable(), + }), +); + +/** + * A season of a Show. + */ +export type Season = z.infer; diff --git a/front/src/models/resources/show.ts b/front/src/models/resources/show.ts index 38e92ba4..bac2798e 100644 --- a/front/src/models/resources/show.ts +++ b/front/src/models/resources/show.ts @@ -22,6 +22,7 @@ import { z } from "zod"; import { zdate } from "~/utils/zod"; import { ImagesP, ResourceP } from "../traits"; import { GenreP } from "./genre"; +import { SeasonP } from "./season"; import { StudioP } from "./studio"; /** @@ -72,6 +73,10 @@ export const ShowP = z.preprocess( * The studio that made this show. */ studio: StudioP.optional(), + /** + * The list of seasons of this show. + */ + seasons: z.array(SeasonP).optional(), }), ); diff --git a/front/src/pages/_app.tsx b/front/src/pages/_app.tsx index 3afce30d..46d485c4 100755 --- a/front/src/pages/_app.tsx +++ b/front/src/pages/_app.tsx @@ -56,6 +56,21 @@ const App = ({ Component, pageProps }: AppProps) => { body { margin: 0px; padding: 0px; + background-color: ${defaultTheme.palette.background.default}; + } + + *::-webkit-scrollbar { + height: 6px; + width: 6px; + background: transparent; + } + + *::-webkit-scrollbar-thumb { + background-color: #999; + border-radius: 90px; + } + *:hover::-webkit-scrollbar-thumb { + background-color: rgb(134, 127, 127); } `} diff --git a/front/src/pages/show/[slug].tsx b/front/src/pages/show/[slug].tsx index 88a53822..41ce8592 100644 --- a/front/src/pages/show/[slug].tsx +++ b/front/src/pages/show/[slug].tsx @@ -18,7 +18,7 @@ * along with Kyoo. If not, see . */ -import { LocalMovies, PlayArrow } from "@mui/icons-material"; +import { ArrowLeft, ArrowRight, LocalMovies, PlayArrow } from "@mui/icons-material"; import { alpha, Box, @@ -27,6 +27,8 @@ import { IconButton, Skeleton, SxProps, + Tab, + Tabs, Tooltip, Typography, useTheme, @@ -35,7 +37,7 @@ import useTranslation from "next-translate/useTranslation"; import Head from "next/head"; import { Navbar } from "~/components/navbar"; import { Image, Poster } from "~/components/poster"; -import { Page, Show, ShowP } from "~/models"; +import { Episode, EpisodeP, Page, Season, Show, ShowP } from "~/models"; import { QueryIdentifier, QueryPage, useFetch, useInfiniteFetch } from "~/utils/query"; import { getDisplayDate } from "~/models/utils"; import { useScroll } from "~/utils/hooks/use-scroll"; @@ -47,6 +49,9 @@ import { Studio } from "~/models/resources/studio"; import { Paged, Person, PersonP } from "~/models"; import { PersonAvatar } from "~/components/person"; import { useInView } from "react-intersection-observer"; +import { ErrorPage } from "~/components/errors"; +import { useState } from "react"; +import { EpisodeBox, EpisodeLine } from "~/components/episode"; const StudioText = ({ studio, @@ -84,7 +89,7 @@ const ShowHeader = ({ data }: { data?: Show }) => { { const { ref } = useInView({ onChange: () => !isFetching && hasNextPage && fetchNextPage(), }); + const { t } = useTranslation("browse"); + + // TODO: Unsure that the fetchNextPage is only used when needed (currently called way too mutch) + // TODO: Handle errors /* if (isError) return null; */ return ( <> - - Staff - - - {(data ? data.pages.flatMap((x) => x.items) : [...Array(6)]).map((x) => ( + + + {t("show.staff")} + + + + + + + + + + + + {(data ? data.pages.flatMap((x) => x.items) : [...Array(6)]).map((x, i) => ( @@ -282,18 +301,72 @@ const ShowStaff = ({ slug }: { slug: string }) => { ); }; +const episodesQuery = (slug: string, season: string | number): QueryIdentifier => ({ + parser: EpisodeP, + path: ["shows", slug, "episode"], + params: { + seasonNumber: season, + }, + infinite: true, +}); + +const EpisodeGrid = ({ slug, season }: { slug: string; season: number }) => { + const { data, isError, error, isFetching, hasNextPage, fetchNextPage } = useInfiniteFetch( + episodesQuery(slug, season), + ); + const { ref } = useInView({ + onChange: () => !isFetching && hasNextPage && fetchNextPage(), + }); + + // TODO: Unsure that the fetchNextPage is only used when needed (currently called way too mutch) + // TODO: Handle errors + + /* if (isError) return null; */ + + return ( + + {(data ? data.pages.flatMap((x) => x.items) : [...Array(12)]).map((x, i) => ( + + ))} + {/*
*/} + + ); +}; + +const SeasonTab = ({ slug, seasons, sx }: { slug: string; seasons?: Season[]; sx?: SxProps }) => { + const [season, setSeason] = useState(1); + + // TODO: handle absolute number only shows (without seasons) + return ( + + + setSeason(i)} aria-label="List of seasons"> + {seasons + ? seasons.map((x) => ) + : [...Array(3)].map((_, i) => ( + + + + ))} + + + + + ); +}; + const query = (slug: string): QueryIdentifier => ({ parser: ShowP, path: ["shows", slug], params: { - fields: ["genres", "studio"], + fields: ["genres", "studio", "seasons"], }, }); const ShowDetails: QueryPage<{ slug: string }> = ({ slug }) => { const { data, error } = useFetch(query(slug)); - if (error) return

oups

; + if (error) return ; return ( <> @@ -303,10 +376,15 @@ const ShowDetails: QueryPage<{ slug: string }> = ({ slug }) => { + ); }; -ShowDetails.getFetchUrls = ({ slug }) => [query(slug), staffQuery(slug)]; +ShowDetails.getFetchUrls = ({ slug, seasonNumber = 1 }) => [ + query(slug), + staffQuery(slug), + episodesQuery(slug, seasonNumber), +]; export default withRoute(ShowDetails); diff --git a/front/src/utils/query.ts b/front/src/utils/query.ts index 1fdcc68d..16403213 100644 --- a/front/src/utils/query.ts +++ b/front/src/utils/query.ts @@ -34,8 +34,9 @@ const queryFn = async ( type: z.ZodType, context: QueryFunctionContext, ): Promise => { + let resp; try { - const resp = await fetch( + resp = await fetch( [typeof window === "undefined" ? process.env.KYOO_URL : "/api"] .concat( context.pageParam ? [context.pageParam] : (context.queryKey.filter((x) => x) as string[]), @@ -43,21 +44,37 @@ const queryFn = async ( .join("/") .replace("/?", "?"), ); - if (!resp.ok) { - throw await resp.json(); - } - - const data = await resp.json(); - const parsed = await type.safeParseAsync(data); - if (!parsed.success) { - console.log("Parse error: ", parsed.error); - throw { errors: parsed.error.errors.map((x) => x.message) } as KyooErrors; - } - return parsed.data; } catch (e) { - console.error("Fetch error: ", e); + console.log("Fetch error", e); throw { errors: ["Could not reach Kyoo's server."] } as KyooErrors; } + if (resp.status === 404) { + throw { errors: ["Resource not found."] } as KyooErrors; + } + if (!resp.ok) { + const error = await resp.text(); + let data; + try { + data = JSON.parse(error); + } catch (e) { + data = { errors: [error] }; + } + throw data; + } + + let data; + try { + data = await resp.json(); + } catch (e) { + console.error("Invald json from kyoo", e); + throw { errors: ["Invalid repsonse from kyoo"] }; + } + const parsed = await type.safeParseAsync(data); + if (!parsed.success) { + console.log("Parse error: ", parsed.error); + throw { errors: parsed.error.errors.map((x) => x.message) } as KyooErrors; + } + return parsed.data; }; export const createQueryClient = () =>