48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
|
import { useEffect, useState } from "react";
|
||
|
|
import type { Attachment } from "../../../types/post";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Resolves each attachment's aspect ratio (width / height). Seeds from
|
||
|
|
* backend-provided width/height when present (no flash), then refines by
|
||
|
|
* loading the image and reading its intrinsic size — so it works even when the
|
||
|
|
* backend omits dimensions. Entries are `undefined` until known.
|
||
|
|
*/
|
||
|
|
export function useImageRatios(
|
||
|
|
attachments: Attachment[],
|
||
|
|
sources: (string | undefined)[],
|
||
|
|
): (number | undefined)[] {
|
||
|
|
const seed = attachments.map((a) =>
|
||
|
|
a.width && a.height ? a.width / a.height : undefined,
|
||
|
|
);
|
||
|
|
const [ratios, setRatios] = useState<(number | undefined)[]>(seed);
|
||
|
|
|
||
|
|
const key = sources.join("|");
|
||
|
|
useEffect(() => {
|
||
|
|
let cancelled = false;
|
||
|
|
setRatios(
|
||
|
|
attachments.map((a) =>
|
||
|
|
a.width && a.height ? a.width / a.height : undefined,
|
||
|
|
),
|
||
|
|
);
|
||
|
|
sources.forEach((src, i) => {
|
||
|
|
if (!src) return;
|
||
|
|
const img = new Image();
|
||
|
|
img.onload = () => {
|
||
|
|
if (cancelled || !img.naturalWidth || !img.naturalHeight) return;
|
||
|
|
setRatios((prev) => {
|
||
|
|
const next = prev.slice();
|
||
|
|
next[i] = img.naturalWidth / img.naturalHeight;
|
||
|
|
return next;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
img.src = src;
|
||
|
|
});
|
||
|
|
return () => {
|
||
|
|
cancelled = true;
|
||
|
|
};
|
||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
|
}, [key]);
|
||
|
|
|
||
|
|
return ratios;
|
||
|
|
}
|