From 3c959ff532c1ec2e0a045719d3672142a5c46c2e Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 27 Nov 2023 15:58:39 +0100
Subject: [PATCH] Fix player poster always errored

---
 front/apps/web/src/router.tsx                     |  5 +++++
 front/packages/primitives/src/image/image.web.tsx |  2 +-
 front/packages/ui/src/player/components/hover.tsx | 13 +++++++++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/front/apps/web/src/router.tsx b/front/apps/web/src/router.tsx
index 7a8760ac..2ffe6dad 100644
--- a/front/apps/web/src/router.tsx
+++ b/front/apps/web/src/router.tsx
@@ -34,5 +34,10 @@ export const withRoute = <Props,>(
 
 	const { ...all } = Component;
 	Object.assign(WithUseRoute, { ...all });
+	if ("getFetchUrls" in Component) {
+		const oldGet = Component.getFetchUrls as (obj: object) => object;
+		WithUseRoute.getFetchUrls = (props: object) => oldGet({ ...defaultProps, ...props });
+	}
+
 	return WithUseRoute;
 };
diff --git a/front/packages/primitives/src/image/image.web.tsx b/front/packages/primitives/src/image/image.web.tsx
index cebb2d24..8ca25916 100644
--- a/front/packages/primitives/src/image/image.web.tsx
+++ b/front/packages/primitives/src/image/image.web.tsx
@@ -37,7 +37,7 @@ export const Image = ({
 }: Props & { style?: ImageStyle } & { layout: ImageLayout }) => {
 	const { css } = useYoshiki();
 	const [state, setState] = useState<"loading" | "errored" | "finished">(
-		src ? (typeof window === "undefined" ? "finished" : "loading") : "errored",
+		typeof window === "undefined" ? "finished" : "loading",
 	);
 
 	const border = { borderRadius: 6 } satisfies ViewStyle;
diff --git a/front/packages/ui/src/player/components/hover.tsx b/front/packages/ui/src/player/components/hover.tsx
index 9fe8fb79..80a9805f 100644
--- a/front/packages/ui/src/player/components/hover.tsx
+++ b/front/packages/ui/src/player/components/hover.tsx
@@ -105,7 +105,7 @@ export const Hover = ({
 							props,
 						)}
 					>
-						<VideoPoster poster={poster} alt={showName} />
+						<VideoPoster poster={poster} alt={showName} isLoading={isLoading} />
 						<View
 							{...css({
 								marginLeft: { xs: ts(0.5), sm: ts(3) },
@@ -217,7 +217,15 @@ export const Back = ({
 	);
 };
 
-const VideoPoster = ({ poster, alt }: { poster?: KyooImage | null; alt?: string }) => {
+const VideoPoster = ({
+	poster,
+	alt,
+	isLoading,
+}: {
+	poster?: KyooImage | null;
+	alt?: string;
+	isLoading: boolean;
+}) => {
 	const { css } = useYoshiki();
 
 	return (
@@ -232,6 +240,7 @@ const VideoPoster = ({ poster, alt }: { poster?: KyooImage | null; alt?: string
 				src={poster}
 				quality="low"
 				alt={alt}
+				forcedLoading={isLoading}
 				layout={{ width: percent(100) }}
 				{...(css({ position: "absolute", bottom: 0 }) as { style: ImageStyle })}
 			/>