Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Migrate from next image to img

Browse Source
This commit is contained in:
Zoe Roux 2024-05-25 02:49:26 +02:00
parent 95086777af
commit 4cc36f4690
No known key found for this signature in database
2 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
front/packages/primitives/src/image/blurhash.web.tsx
View File

@ -276,6 +276,18 @@ const BlurhashDiv = forwardRef<
);
});
export const useRenderType = () => {
const [renderType, setRenderType] = useState<"ssr" | "hydratation" | "client">(
typeof window === "undefined" ? "ssr" : "hydratation",
);
useLayoutEffect(() => {
setRenderType("client");
}, []);
return renderType;
};
export const BlurhashContainer = ({
blurhash,
children,
@ -285,15 +297,7 @@ export const BlurhashContainer = ({
children?: ReactElement | ReactElement[];
}) => {
const { css } = useYoshiki();
const ref = useRef<HTMLCanvasElement & HTMLDivElement>(null);
const [renderType, setRenderType] = useState<"ssr" | "hydratation" | "client">(
typeof window === "undefined" ? "ssr" : "hydratation",
);
useLayoutEffect(() => {
// If the html is empty, it was not SSRed.
if (ref.current?.innerHTML === "") setRenderType("client");
}, []);
const renderType = useRenderType();
return (
<div
@ -307,10 +311,10 @@ export const BlurhashContainer = ({
nativeStyleToCss(props),
)}
>
{renderType === "ssr" && <BlurhashDiv ref={ref} blurhash={blurhash} />}
{renderType === "client" && <BlurhashCanvas ref={ref} blurhash={blurhash} />}
{renderType === "ssr" && <BlurhashDiv blurhash={blurhash} />}
{renderType === "client" && <BlurhashCanvas blurhash={blurhash} />}
{renderType === "hydratation" && (
<div ref={ref} dangerouslySetInnerHTML={{ __html: "" }} suppressHydrationWarning />
<div dangerouslySetInnerHTML={{ __html: "" }} suppressHydrationWarning />
)}
{children}
</div>

23
front/packages/primitives/src/image/image.web.tsx
View File

@ -25,7 +25,7 @@ import { useYoshiki } from "yoshiki/native";
import { imageBorderRadius } from "../constants";
import { Skeleton } from "../skeleton";
import type { ImageLayout, Props } from "./base-image";
import { BlurhashContainer } from "./blurhash.web";
import { BlurhashContainer, useRenderType } from "./blurhash.web";
export const Image = ({
src,
@ -54,18 +54,25 @@ export const Image = ({
return (
<BlurhashContainer blurhash={src.blurhash} {...css([layout, border], props)}>
<NextImage
src={src[quality ?? "high"]}
priority={quality === "high"}
alt={alt!}
fill={true}
<img
style={{
position: "absolute",
inset: 0,
width: "100%",
height: "100%",
color: "transparent",
objectFit: "cover",
opacity: state === "loading" ? 0 : 1,
transition: "opacity .2s ease-out",
}}
// Don't use next's server to reprocess images, they are already optimized by kyoo.
unoptimized={true}
// It's intended to keep `loading` before `src` because React updates
// props in order which causes Safari/Firefox to not lazy load properly.
// See https://github.com/facebook/react/issues/25883
loading={quality === "high" ? "eager" : "lazy"}
decoding="async"
fetchpriority={quality === "high" ? "high" : undefined}
src={src[quality ?? "high"]}
alt={alt!}
onLoad={() => setState("finished")}
onError={() => setState("errored")}
suppressHydrationWarning