// MediaFrame.jsx — embeds a standalone HTML asset (self-contained page with its
// own , styles, and scripts) via a sandboxed iframe. The iframe renders
// at a fixed base size (default 1920×1080, 16:9) and is CSS-scaled to fit the
// parent container, so embedded content lays out at a predictable viewport
// instead of stretching/clipping to whatever the slot happens to be.
// Mirrors MediaImg's "Missing · {src}" fallback.
const { useState: useMF, useEffect: useMFE, useRef: useMFR } = React;
function MediaFrame({ src, title = "", baseWidth = 1920, baseHeight = 1080, style = {} }) {
const [failed, setFailed] = useMF(false);
const [scale, setScale] = useMF(1);
const wrapRef = useMFR(null);
useMFE(() => {
const el = wrapRef.current;
if (!el) return;
const update = () => {
const r = el.getBoundingClientRect();
if (!r.width || !r.height) return;
setScale(Math.min(r.width / baseWidth, r.height / baseHeight));
};
update();
const ro = new ResizeObserver(update);
ro.observe(el);
return () => ro.disconnect();
}, [baseWidth, baseHeight]);
if (failed) {
return (
Missing · {src}
);
}
return (