Add rating and runtime to shows/movies pages

front/packages/primitives/src/icons.tsx

@@ -26,6 +26,7 @@ import { px, Theme, useYoshiki } from "yoshiki/native";
 import { PressableFeedback } from "./links";
 import { alpha } from "./themes";
 import { Breakpoint, ts, useBreakpointValue } from "./utils";
+import { P } from "./text";
 
 declare module "react" {
 	function forwardRef<T, P = {}>(
@@ -124,3 +125,8 @@ export const IconFab = <AsProps = PressableProps,>(
 		/>
 	);
 };
+
+export const DottedSeparator = () => {
+	const { css } = useYoshiki();
+	return <P {...css({ mX: ts(1) })}>{String.fromCharCode(0x2022)}</P>;
+};

front/packages/primitives/src/skeleton.web.tsx

@@ -59,9 +59,6 @@ export const Skeleton = ({
 		<View
 			{...css(
 				[
-					{
-						position: "relative",
-					},
 					lines === 1 && { overflow: "hidden", borderRadius: px(6) },
 					(variant === "text" || variant === "header") &&
 						lines === 1 && [

front/packages/ui/src/components/rating.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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 { Icon, P, Skeleton, ts } from "@kyoo/primitives";
+import { View } from "react-native";
+import Star from "@material-symbols/svg-400/rounded/star-fill.svg";
+import { rem, useYoshiki } from "yoshiki/native";
+
+export const Rating = ({ rating }: { rating?: number }) => {
+	const { css } = useYoshiki();
+
+	return (
+		<View {...css({ flexDirection: "row", alignItems: "center" })}>
+			<Icon icon={Star} {...css({ marginRight: ts(0.5) })} />
+			<Skeleton {...css({ width: rem(2) })}>
+				{rating !== undefined && <P>{rating ? rating / 10 : "??"} / 10</P>}
+			</Skeleton>
+		</View>
+	);
+};

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

@@ -39,6 +39,12 @@ export const episodeDisplayNumber = (
 	return def;
 };
 
+export const displayRuntime = (runtime: number) => {
+	if (runtime < 60)
+		return `${runtime}min`;
+	return `${Math.floor(runtime / 60)}h${runtime % 60}`;
+}
+
 export const EpisodeBox = ({
 	name,
 	overview,
@@ -124,6 +130,7 @@ export const EpisodeLine = ({
 	episodeNumber,
 	seasonNumber,
 	releaseDate,
+	runtime,
 	...props
 }: WithLoading<{
 	slug: string;
@@ -135,6 +142,7 @@ export const EpisodeLine = ({
 	episodeNumber: number | null;
 	seasonNumber: number | null;
 	releaseDate: Date | null;
+	runtime: number | null;
 	id: number;
 }> &
 	Stylable) => {
@@ -182,13 +190,23 @@ export const EpisodeLine = ({
 				{...(css(["poster", { flexShrink: 0, m: ts(1) }]) as { style: ImageStyle })}
 			/>
 			<View {...css({ flexGrow: 1, flexShrink: 1, m: ts(1) })}>
-				<Skeleton>
-					{isLoading || (
-						<H6 aria-level={undefined} {...css("title")}>
-							{name ?? t("show.episodeNoMetadata")}
-						</H6>
-					)}
-				</Skeleton>
+				<View
+					{...css({
+						flexGrow: 1,
+						flexShrink: 1,
+						flexDirection: "row",
+						justifyContent: "space-between",
+					})}
+				>
+					<Skeleton>
+						{isLoading || (
+							<H6 aria-level={undefined} {...css("title")}>
+								{name ?? t("show.episodeNoMetadata")}
+							</H6>
+						)}
+					</Skeleton>
+					{isLoading || (runtime && <Skeleton>{isLoading || <SubP>{displayRuntime(runtime)}</SubP>}</Skeleton>)}
+				</View>
 				<Skeleton>{isLoading || <P numberOfLines={3}>{overview}</P>}</Skeleton>
 			</View>
 		</Link>

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

@@ -46,6 +46,7 @@ import {
 	A,
 	ts,
 	Chip,
+	DottedSeparator,
 } from "@kyoo/primitives";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
@@ -66,6 +67,8 @@ import {
 import { Fetch } from "../fetch";
 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";
 
 const TitleLine = ({
 	isLoading,
@@ -73,6 +76,8 @@ const TitleLine = ({
 	name,
 	tagline,
 	date,
+	rating,
+	runtime,
 	poster,
 	studio,
 	trailerUrl,
@@ -84,6 +89,8 @@ const TitleLine = ({
 	name?: string;
 	tagline?: string | null;
 	date?: string | null;
+	rating?: number;
+	runtime?: number | null;
 	poster?: KyooImage | null;
 	studio?: Studio | null;
 	trailerUrl?: string | null;
@@ -191,7 +198,7 @@ const TitleLine = ({
 							)}
 						</Skeleton>
 					)}
-					<View {...css({ flexDirection: "row" })}>
+					<View {...css({ flexDirection: "row", alignItems: "center" })}>
 						{playHref !== null && (
 							<IconFab
 								icon={PlayArrow}
@@ -215,6 +222,14 @@ const TitleLine = ({
 								{...tooltip(t("show.trailer"))}
 							/>
 						)}
+						<DottedSeparator />
+						<Rating rating={rating} />
+						{runtime && (
+							<>
+								<DottedSeparator />
+								<P>{displayRuntime(runtime)}</P>
+							</>
+						)}
 					</View>
 				</View>
 			</View>
@@ -372,6 +387,8 @@ export const Header = ({
 							name={data?.name}
 							tagline={data?.tagline}
 							date={data ? getDisplayDate(data as any) : undefined}
+							rating={data?.rating}
+							runtime={"runtime" in data ? data.runtime : null}
 							poster={data?.poster}
 							trailerUrl={data?.trailer}
 							studio={data?.studio}