Add part of collection card on details page

front/packages/models/src/resources/movie.ts

@@ -24,6 +24,7 @@ import { withImages, ResourceP, imageFn } from "../traits";
 import { Genre } from "./genre";
 import { StudioP } from "./studio";
 import { Status } from "./show";
+import { CollectionP } from "./collection";
 
 export const MovieP = withImages(
 	ResourceP.extend({
@@ -75,7 +76,10 @@ export const MovieP = withImages(
 		 * The studio that made this movie.
 		 */
 		studio: StudioP.optional().nullable(),
-
+		/**
+		 * The collection this movie is part of.
+		 */
+		collections: z.array(CollectionP).optional(),
 		/**
 		 * The links to see a movie or an episode.
 		 */

front/packages/models/src/resources/show.ts

@@ -25,6 +25,7 @@ import { Genre } from "./genre";
 import { SeasonP } from "./season";
 import { StudioP } from "./studio";
 import { BaseEpisodeP } from "./episode.base";
+import { CollectionP } from "./collection";
 
 /**
  * The enum containing show's status.
@@ -86,6 +87,10 @@ export const ShowP = withImages(
 		 * The studio that made this show.
 		 */
 		studio: StudioP.optional().nullable(),
+		/**
+		 * The collection this movie is part of.
+		 */
+		collections: z.array(CollectionP).optional(),
 		/**
 		 * The list of seasons of this show.
 		 */

front/packages/ui/src/details/collection.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 { KyooImage } from "@kyoo/models";
+import { H2, ImageBackground, Link, P, focusReset, ts } from "@kyoo/primitives";
+import { useTranslation } from "react-i18next";
+import { Theme, useYoshiki } from "yoshiki/native";
+
+export const PartOf = ({
+	name,
+	overview,
+	thumbnail,
+	href,
+}: {
+	name: string;
+	overview: string | null;
+	thumbnail: KyooImage | null;
+	href: string;
+}) => {
+	const { css, theme } = useYoshiki("part-of-collection");
+	const { t } = useTranslation();
+
+	return (
+		<Link
+			href={href}
+			{...css({
+				borderRadius: 16,
+				overflow: "hidden",
+				borderWidth: ts(0.5),
+				borderStyle: "solid",
+				borderColor: (theme) => theme.background,
+				fover: {
+					self: { ...focusReset, borderColor: (theme: Theme) => theme.accent },
+					title: { textDecorationLine: "underline" },
+				},
+			})}
+		>
+			<ImageBackground
+				src={thumbnail}
+				alt=""
+				quality="medium"
+				gradient={{ colors: [theme.darkOverlay, theme.darkOverlay] }}
+				{...css({
+					padding: ts(3),
+				})}
+			>
+				<H2 {...css("title")}>
+					{t("show.partOf")} {name}
+				</H2>
+				<P {...css({ textAlign: "justify" })}>{overview}</P>
+			</ImageBackground>
+		</Link>
+	);
+};

front/packages/ui/src/details/header.tsx

@@ -69,6 +69,7 @@ import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
 import Theaters from "@material-symbols/svg-400/rounded/theaters-fill.svg";
 import { Rating } from "../components/rating";
 import { displayRuntime } from "./episode";
+import { PartOf } from "./collection";
 
 export const TitleLine = ({
 	isLoading,
@@ -406,6 +407,19 @@ export const Header = ({
 						tags={data?.tags}
 						{...css({ paddingTop: { xs: 0, md: ts(2) } })}
 					/>
+					{data?.collections && (
+						<Container {...css({ marginY: ts(2) })}>
+							{data.collections.map((x) => (
+								<PartOf
+									key={x.id}
+									name={x.name}
+									overview={x.overview}
+									thumbnail={x.thumbnail}
+									href={x.href}
+								/>
+							))}
+						</Container>
+					)}
 				</>
 			)}
 		</Fetch>

front/packages/ui/src/details/movie.tsx

@@ -28,7 +28,7 @@ const query = (slug: string): QueryIdentifier<Movie> => ({
 	parser: MovieP,
 	path: ["movies", slug],
 	params: {
-		fields: ["studio"],
+		fields: ["studio", "collections"],
 	},
 });
 

front/packages/ui/src/details/show.tsx

@@ -81,7 +81,7 @@ const query = (slug: string): QueryIdentifier<Show> => ({
 	parser: ShowP,
 	path: ["shows", slug],
 	params: {
-		fields: ["studio", "firstEpisode"],
+		fields: ["studio", "firstEpisode", "collections"],
 	},
 });
 

front/packages/ui/src/navbar/index.tsx

@@ -224,7 +224,7 @@ export const Navbar = (props: Stylable) => {
 				props,
 			)}
 		>
-			<View {...css({ flexDirection: "row" })}>
+			<View {...css({ flexDirection: "row", alignItems: "center" })}>
 				<NavbarTitle {...css({ marginX: ts(2) })} />
 				<A
 					href="/browse"

front/translations/en.json

@@ -17,7 +17,8 @@
 		"episode-none": "There is no episodes in this season",
 		"episodeNoMetadata": "No metadata available",
 		"tags": "Tags",
-		"jumpToSeason": "Jump to season"
+		"jumpToSeason": "Jump to season",
+		"partOf": "Part of the"
 	},
 	"browse": {
 		"sortby": "Sort by {{key}}",

front/translations/fr.json

@@ -17,7 +17,8 @@
 		"episode-none": "Il n'y a pas d'épisodes dans cette saison",
 		"episodeNoMetadata": "Aucune metadonnée disponible",
 		"tags": "Tags",
-		"jumpToSeason": "Aller sur une saison"
+		"jumpToSeason": "Aller sur une saison",
+		"partOf": "Fait parti de"
 	},
 	"browse": {
 		"sortby": "Trier par {{key}}",