a tool for shared writing and social publishing
render thumbhash as image fallback on clients before image is uploaded
+8
-16
+8
-16
components/ImageBlock.tsx
+8
-16
components/ImageBlock.tsx
···
14
14
15
15
let permission = useEntitySetContext().permissions.write;
16
16
17
-
let [ref, { width }] = useMeasure();
18
17
let image = useEntity(props.entityID, "block/image");
19
-
let imageHeight = image?.data.height;
20
-
let imageWidth = image?.data.width;
21
18
if (image?.data.local && image.data.local !== rep?.clientID)
22
19
return (
23
-
<div
24
-
ref={ref}
25
-
style={{
26
-
height:
27
-
imageWidth && imageHeight && width < imageWidth
28
-
? imageHeight * (width / imageWidth)
29
-
: imageHeight,
30
-
width: image?.data.width,
31
-
}}
32
-
className="flex place-items-center justify-center bg-border italic text-tertiary rounded-md min-w-full max-w-full"
33
-
>
34
-
loading...
20
+
<div className="flex place-items-center justify-center bg-border italic text-tertiary rounded-md min-w-full max-w-full">
21
+
<img
22
+
alt={""}
23
+
src={image?.data.fallback}
24
+
height={image?.data.height}
25
+
width={image?.data.width}
26
+
className=""
27
+
/>
35
28
</div>
36
29
);
37
30
38
-
console.log(permission);
39
31
return (
40
32
<div className="relative group/image flex w-full justify-center">
41
33
{permission && (