Fix player poster always errored

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;
 };

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;

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 })}
 			/>