Fix show header colors and poster

front/packages/primitives/src/avatar.tsx

@@ -19,7 +19,7 @@
  */
 
 import { View, ViewStyle } from "react-native";
-import { Image } from "./image";
+import { Image, ImageProps } from "./image";
 import { useYoshiki, px, Stylable } from "yoshiki/native";
 import { Icon } from "./icons";
 import { P } from "./text";
@@ -46,7 +46,8 @@ const stringToColor = (string: string) => {
 export const Avatar = forwardRef<
 	View,
 	{
-		src?: string | null;
+		src?: ImageProps["src"];
+		quality?: ImageProps["quality"];
 		alt?: string;
 		size?: YoshikiStyle<number>;
 		placeholder?: string;
@@ -56,7 +57,18 @@ export const Avatar = forwardRef<
 		as?: ComponentType<{ style?: ViewStyle } & RefAttributes<View>>;
 	} & Stylable
 >(function Avatar(
-	{ src, alt, size = px(24), color, placeholder, isLoading = false, fill = false, as, ...props },
+	{
+		src,
+		quality = "low",
+		alt,
+		size = px(24),
+		color,
+		placeholder,
+		isLoading = false,
+		fill = false,
+		as,
+		...props
+	},
 	ref,
 ) {
 	const { css, theme } = useYoshiki();
@@ -87,7 +99,13 @@ export const Avatar = forwardRef<
 			)}
 		>
 			{src || isLoading ? (
-				<Image src={src} alt={alt} layout={{ width: size, height: size }} />
+				<Image
+					src={src}
+					quality={quality}
+					isLoading={isLoading as any}
+					alt={alt}
+					layout={{ width: size, height: size }}
+				/>
 			) : placeholder ? (
 				<P
 					{...css({

front/packages/primitives/src/image/base-image.tsx

@@ -29,7 +29,7 @@ export type YoshikiEnhanced<Style> = Style extends any
 	}
 	: never;
 
-type WithLoading<T> = (T & { isLoading?: false }) | (Partial<T> & { isLoading: true });
+type WithLoading<T> = (T & { isLoading?: boolean }) | (Partial<T> & { isLoading: true });
 
 export type Props = WithLoading<{
 	src?: KyooImage | null;

front/packages/primitives/src/image/image.tsx

@@ -59,6 +59,7 @@ export const Image = ({
 		);
 	}
 
+	quality ??= "high";
 	return (
 		<View {...css([layout, border], props)}>
 			{state !== "finished" && (
@@ -69,7 +70,10 @@ export const Image = ({
 				/>
 			)}
 			<FastImage
-				source={{ uri: src[quality ?? "high"] }}
+				source={{
+					uri: src[quality],
+					priority: FastImage.priority[quality === "medium" ? "normal" : quality],
+				}}
 				accessibilityLabel={alt}
 				onLoad={() => setState("finished")}
 				onError={() => setState("errored")}

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

@@ -73,7 +73,6 @@ export const Image = ({
 				// To reproduce view's behavior
 				position: "relative",
 				boxSizing: "border-box",
-				borderStyle: "solid",
 				overflow: "hidden",
 
 				// Use a blurhash here to nicely fade the NextImage when it is loaded completly
@@ -82,17 +81,15 @@ export const Image = ({
 				backgroundSize: "cover",
 				backgroundRepeat: "no-repeat",
 				backgroundPosition: "50% 50%",
-
-				// Use the layout's size and display the rounded border
-				width: (layout as any).width,
-				height: (layout as any).height,
-				aspectRatio: (layout as any).aspectRatio,
 			}}
-			// Gather classnames from props (to support parent's hover for example).
-			{...wCss({ ...border, borderRadius: "6px" }, { className: extractClassNames(props) })}
+			{...wCss([layout as any, { ...border, borderRadius: "6px" }], {
+				// Gather classnames from props (to support parent's hover for example).
+				className: extractClassNames(props),
+			})}
 		>
 			<NextImage
 				src={src[quality ?? "high"]}
+				priority={quality === "high"}
 				alt={alt!}
 				fill={true}
 				style={{

front/packages/primitives/src/image/index.tsx

@@ -26,7 +26,7 @@ import { LinearGradient, LinearGradientProps } from "expo-linear-gradient";
 import { ContrastArea, alpha } from "../themes";
 import { percent } from "yoshiki/native";
 
-export { Image };
+export { type Props as ImageProps, Image };
 
 export const Poster = ({
 	alt,

front/packages/ui/src/browse/grid.tsx

@@ -53,6 +53,7 @@ export const ItemGrid = ({
 							poster: {
 								borderColor: theme => theme.background,
 								borderWidth: px(4),
+								borderStyle: "solid",
 							},
 						},
 						fover: {

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

@@ -18,7 +18,15 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Movie, QueryIdentifier, Show, getDisplayDate, Genre, Studio, KyooImage } from "@kyoo/models";
+import {
+	Movie,
+	QueryIdentifier,
+	Show,
+	getDisplayDate,
+	Genre,
+	Studio,
+	KyooImage,
+} from "@kyoo/models";
 import {
 	Container,
 	H1,
@@ -108,7 +116,7 @@ const TitleLine = ({
 						width: { xs: percent(50), md: percent(25) },
 					}}
 					{...css({
-						maxWidth: { xs: px(175), sm: Platform.OS === "web" ? "unset" as any : 99999999 },
+						maxWidth: { xs: px(175), sm: Platform.OS === "web" ? ("unset" as any) : 99999999 },
 						flexShrink: 0,
 					})}
 				/>
@@ -121,18 +129,38 @@ const TitleLine = ({
 						flexGrow: 1,
 					})}
 				>
-					<P {...css({
-						textAlign: { xs: "center", sm: "left" },
-						color: (theme: Theme) => ({ xs: theme.user.heading, md: theme.heading }),
-					})}>
+					<P
+						{...css({
+							textAlign: { xs: "center", sm: "left" },
+						})}
+					>
 						<Skeleton
 							variant="header"
 							{...css({ width: rem(15), height: rem(2.5), marginBottom: rem(1) })}
 						>
 							{isLoading || (
 								<>
-									<H1>{name}</H1>
-									{date && <P {...css({ fontSize: rem(2.5) })}> ({date})</P>}
+									<H1
+										{...css({
+											color: (theme: Theme) => ({ xs: theme.user.heading, md: theme.heading }),
+										})}
+									>
+										{name}
+									</H1>
+									{date && (
+										<P
+											{...css({
+												fontSize: rem(2.5),
+												color: (theme: Theme) => ({
+													xs: theme.user.paragraph,
+													md: theme.paragraph,
+												}),
+											})}
+										>
+											{" "}
+											({date})
+										</P>
+									)}
 								</>
 							)}
 						</Skeleton>
@@ -267,25 +295,23 @@ const Description = ({
 				))}
 			</P>
 
-			<View {...css({
-				flexDirection: "column",
-				flexGrow: 1,
-				flexBasis: { sm: 0 },
-				paddingTop: ts(4),
-			})}>
-				<Skeleton lines={4} >
+			<View
+				{...css({
+					flexDirection: "column",
+					flexGrow: 1,
+					flexBasis: { sm: 0 },
+					paddingTop: ts(4),
+				})}
+			>
+				<Skeleton lines={4}>
 					{isLoading || (
-						<P
-							{...css({ textAlign: "justify", })}
-						>
-							{overview ?? t("show.noOverview")}
-						</P>
+						<P {...css({ textAlign: "justify" })}>{overview ?? t("show.noOverview")}</P>
 					)}
 				</Skeleton>
-				<View {...css({ flexWrap: "wrap", flexDirection: "row", marginTop: ts(.5) })}>
-					<P {...css({ marginRight: ts(.5) })}>{t("show.tags")}:</P>
+				<View {...css({ flexWrap: "wrap", flexDirection: "row", marginTop: ts(0.5) })}>
+					<P {...css({ marginRight: ts(0.5) })}>{t("show.tags")}:</P>
 					{(isLoading ? [...Array<string>(3)] : tags!).map((tag, i) => (
-						<Chip key={tag ?? i} label={tag} size="small" {...css({ m: ts(.5) })} />
+						<Chip key={tag ?? i} label={tag} size="small" {...css({ m: ts(0.5) })} />
 					))}
 				</View>
 			</View>