Split image backround and gradient image background

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

@@ -22,6 +22,7 @@ import { LinearGradient, type LinearGradientProps } from "expo-linear-gradient";
 import type { ComponentProps, ComponentType, ReactElement, ReactNode } from "react";
 import { type ImageStyle, View, type ViewProps, type ViewStyle } from "react-native";
 import { percent } from "yoshiki/native";
+import { useYoshiki } from "yoshiki/native";
 import { imageBorderRadius } from "../constants";
 import { ContrastArea } from "../themes";
 import type { ImageLayout, Props, YoshikiEnhanced } from "./base-image";
@@ -53,51 +54,50 @@ export const PosterBackground = ({
 	...props
 }: Omit<ComponentProps<typeof ImageBackground>, "layout"> & { style?: ImageStyle } & {
 	layout: YoshikiEnhanced<{ width: ImageStyle["width"] } | { height: ImageStyle["height"] }>;
-}) => (
+}) => {
+	const { css } = useYoshiki();
+
+	return (
 		<ImageBackground
 			alt={alt!}
 			layout={{ aspectRatio: 2 / 3, ...layout }}
-		hideLoad={false}
+			{...css({ borderRadius: imageBorderRadius }, props)}
-		gradient={false}
-		{...props}
 		/>
-);
+	);
+};
+
+type ImageBackgroundProps = {
+	children?: ReactNode;
+	containerStyle?: YoshikiEnhanced<ViewStyle>;
+	imageStyle?: YoshikiEnhanced<ImageStyle>;
+	layout?: ImageLayout;
+	contrast?: "light" | "dark" | "user";
+};
 
 export const ImageBackground = <AsProps = ViewProps>({
 	src,
 	alt,
 	quality,
-	gradient = true,
 	as,
 	children,
 	containerStyle,
 	imageStyle,
-	forcedLoading,
-	hideLoad = true,
-	contrast = "dark",
 	layout,
+	contrast = "dark",
+	imageSibling,
 	...asProps
 }: {
 	as?: ComponentType<AsProps>;
-	gradient?: Partial<LinearGradientProps> | boolean;
+	imageSibling?: ReactElement;
-	children?: ReactNode;
-	containerStyle?: YoshikiEnhanced<ViewStyle>;
-	imageStyle?: YoshikiEnhanced<ImageStyle>;
-	hideLoad?: boolean;
-	contrast?: "light" | "dark" | "user";
-	layout?: ImageLayout;
 } & AsProps &
+	ImageBackgroundProps &
 	Props) => {
 	const Container = as ?? View;
+
 	return (
 		<ContrastArea contrastText mode={contrast}>
-			{({ css, theme }) => (
+			{({ css }) => (
-				<Container
+				<Container {...(css([layout, { overflow: "hidden" }], asProps) as AsProps)}>
-					{...(css(
-						[layout, { borderRadius: imageBorderRadius, overflow: "hidden" }],
-						asProps,
-					) as AsProps)}
-				>
 					<View
 						{...css([
 							{
@@ -112,24 +112,46 @@ export const ImageBackground = <AsProps = ViewProps>({
 							containerStyle,
 						])}
 					>
-						{(src || !hideLoad) && (
+						{src && (
 							<Image
 								src={src}
 								quality={quality}
-								forcedLoading={forcedLoading}
 								alt={alt!}
 								layout={{ width: percent(100), height: percent(100) }}
-								Err={hideLoad ? null : undefined}
 								{...(css([{ borderWidth: 0, borderRadius: 0 }, imageStyle]) as {
 									style: ImageStyle;
 								})}
 							/>
 						)}
-						{gradient && (
+						{imageSibling}
+					</View>
+					{children}
+				</Container>
+			)}
+		</ContrastArea>
+	);
+};
+
+export const GradientImageBackground = <AsProps = ViewProps>({
+	contrast = "dark",
+	gradient,
+	...props
+}: {
+	as?: ComponentType<AsProps>;
+	gradient?: Partial<LinearGradientProps>;
+} & AsProps &
+	ImageBackgroundProps &
+	Props) => {
+	const { css, theme } = useYoshiki();
+
+	return (
+		<ImageBackground
+			contrast={contrast}
+			imageSibling={
 				<LinearGradient
 					start={{ x: 0, y: 0.25 }}
 					end={{ x: 0, y: 1 }}
-								colors={["transparent", theme.darkOverlay]}
+					colors={["transparent", theme[contrast].darkOverlay]}
 					{...css(
 						{
 							position: "absolute",
@@ -141,11 +163,8 @@ export const ImageBackground = <AsProps = ViewProps>({
 						typeof gradient === "object" ? gradient : undefined,
 					)}
 				/>
-						)}
+			}
-					</View>
+			{...(props as any)}
-					{children}
+		/>
-				</Container>
-			)}
-		</ContrastArea>
 	);
 };

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

@@ -20,8 +20,8 @@
 
 import type { KyooImage, WatchStatusV } from "@kyoo/models";
 import {
+	GradientImageBackground,
 	Heading,
-	ImageBackground,
 	Link,
 	P,
 	Poster,
@@ -33,7 +33,6 @@ import {
 } from "@kyoo/primitives";
 import { useState } from "react";
 import { Platform, View } from "react-native";
-import type { Stylable } from "yoshiki";
 import { percent, px, rem, useYoshiki } from "yoshiki/native";
 import { ItemContext } from "../components/context-menus";
 import type { Layout } from "../fetch";
@@ -65,19 +64,13 @@ export const ItemList = ({
 	const [moreOpened, setMoreOpened] = useState(false);
 
 	return (
-		<ImageBackground
+		<GradientImageBackground
 			src={thumbnail}
 			alt={name}
 			quality="medium"
 			as={Link}
 			href={moreOpened ? undefined : href}
 			onLongPress={() => setMoreOpened(true)}
-			containerStyle={{
-				borderRadius: px(imageBorderRadius),
-			}}
-			imageStyle={{
-				borderRadius: px(imageBorderRadius),
-			}}
 			{...css(
 				{
 					alignItems: "center",
@@ -162,7 +155,7 @@ export const ItemList = ({
 			<PosterBackground src={poster} alt="" quality="low" layout={{ height: percent(80) }}>
 				<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
 			</PosterBackground>
-		</ImageBackground>
+		</GradientImageBackground>
 	);
 };
 

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

@@ -27,7 +27,15 @@ import {
 	type QueryPage,
 	getDisplayDate,
 } from "@kyoo/models";
-import { Container, Head, ImageBackground, P, Skeleton, ts, usePageStyle } from "@kyoo/primitives";
+import {
+	Container,
+	GradientImageBackground,
+	Head,
+	P,
+	Skeleton,
+	ts,
+	usePageStyle,
+} from "@kyoo/primitives";
 import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
@@ -50,7 +58,7 @@ const Header = ({ slug }: { slug: string }) => {
 				<>
 					<Head title={data?.name} description={data?.overview} image={data?.thumbnail?.high} />
 
-					<ImageBackground
+					<GradientImageBackground
 						src={data?.thumbnail}
 						quality="high"
 						alt=""
@@ -70,7 +78,7 @@ const Header = ({ slug }: { slug: string }) => {
 							studio={null}
 							{...css(ShowHeader.childStyle)}
 						/>
-					</ImageBackground>
+					</GradientImageBackground>
 
 					<Container
 						{...css({

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

@@ -25,7 +25,16 @@ import {
 	type QueryIdentifier,
 	useInfiniteFetch,
 } from "@kyoo/models";
-import { Container, H2, ImageBackground, Link, P, focusReset, ts } from "@kyoo/primitives";
+import {
+	Container,
+	GradientImageBackground,
+	H2,
+	ImageBackground,
+	Link,
+	P,
+	focusReset,
+	ts,
+} from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
 import { type Theme, useYoshiki } from "yoshiki/native";
 import { ErrorView } from "../errors";
@@ -59,11 +68,15 @@ export const PartOf = ({
 				},
 			})}
 		>
-			<ImageBackground
+			<GradientImageBackground
 				src={thumbnail}
 				alt=""
 				quality="medium"
-				gradient={{ colors: [theme.darkOverlay, theme.darkOverlay] }}
+				gradient={{
+					colors: [theme.darkOverlay, "transparent"],
+					start: { x: 0, y: 0 },
+					end: { x: 1, y: 0 },
+				}}
 				{...css({
 					padding: ts(3),
 				})}
@@ -72,7 +85,7 @@ export const PartOf = ({
 					{t("show.partOf")} {name}
 				</H2>
 				<P {...css({ textAlign: "justify" })}>{overview}</P>
-			</ImageBackground>
+			</GradientImageBackground>
 		</Link>
 	);
 };

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

@@ -30,6 +30,7 @@ import {
 	Skeleton,
 	SubP,
 	focusReset,
+	imageBorderRadius,
 	important,
 	tooltip,
 	ts,
@@ -98,6 +99,7 @@ export const EpisodeBox = ({
 							borderColor: (theme) => theme.background,
 							borderWidth: ts(0.5),
 							borderStyle: "solid",
+							borderRadius: imageBorderRadius,
 						},
 						more: {
 							opacity: 0,
@@ -123,9 +125,8 @@ export const EpisodeBox = ({
 				src={thumbnail}
 				quality="low"
 				alt=""
-				gradient={false}
 				layout={{ width: percent(100), aspectRatio: 16 / 9 }}
-				{...(css("poster") as any)}
+				{...css("poster")}
 			>
 				{(watchedPercent || watchedStatus === WatchStatusV.Completed) && (
 					<ItemProgress watchPercent={watchedPercent ?? 100} />
@@ -254,12 +255,11 @@ export const EpisodeLine = ({
 				src={thumbnail}
 				quality="low"
 				alt=""
-				gradient={false}
 				layout={{
 					width: percent(18),
 					aspectRatio: 16 / 9,
 				}}
-				{...(css({ flexShrink: 0, m: ts(1) }) as { style: ImageStyle })}
+				{...css({ flexShrink: 0, m: ts(1) })}
 			>
 				{(watchedPercent || watchedStatus === WatchStatusV.Completed) && (
 					<>

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

@@ -35,13 +35,13 @@ import {
 	Chip,
 	Container,
 	DottedSeparator,
+	GradientImageBackground,
 	H1,
 	H2,
 	HR,
 	Head,
 	IconButton,
 	IconFab,
-	ImageBackground,
 	LI,
 	Link,
 	Menu,
@@ -509,7 +509,7 @@ export const Header = ({
 			{({ isLoading, ...data }) => (
 				<>
 					<Head title={data?.name} description={data?.overview} image={data?.thumbnail?.high} />
-					<ImageBackground
+					<GradientImageBackground
 						src={data?.thumbnail}
 						quality="high"
 						alt=""
@@ -531,7 +531,7 @@ export const Header = ({
 							watchStatus={data?.watchStatus?.status ?? null}
 							{...css(Header.childStyle)}
 						/>
-					</ImageBackground>
+					</GradientImageBackground>
 					<Description
 						isLoading={isLoading}
 						overview={data?.overview}

front/packages/ui/src/downloads/page.tsx

@@ -86,13 +86,11 @@ const DownloadedItem = ({
 				src={image}
 				quality="low"
 				alt=""
-				gradient={false}
-				hideLoad={false}
 				layout={{
 					width: percent(25),
 					aspectRatio: kind === "episode" ? 16 / 9 : 2 / 3,
 				}}
-				{...(css({ flexShrink: 0, m: ts(1) }) as { style: ImageStyle })}
+				{...css({ flexShrink: 0, m: ts(1) })}
 			>
 				{/* {(watchedPercent || watchedStatus === WatchStatusV.Completed) && ( */}
 				{/* 	<> */}

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

@@ -20,6 +20,7 @@
 
 import { type KyooImage, type LibraryItem, LibraryItemP, type QueryIdentifier } from "@kyoo/models";
 import {
+	GradientImageBackground,
 	H1,
 	H2,
 	IconButton,
@@ -60,7 +61,7 @@ export const Header = ({
 	const { t } = useTranslation();
 
 	return (
-		<ImageBackground
+		<GradientImageBackground
 			src={thumbnail}
 			alt=""
 			quality="high"
@@ -108,7 +109,7 @@ export const Header = ({
 					)}
 				</Skeleton>
 			</View>
-		</ImageBackground>
+		</GradientImageBackground>
 	);
 };