// Media placeholder components โ striped SVG for images, pattern with subtle motion for video.
// If `src` is provided, render the real media. Otherwise fall back to the labelled placeholder.
// Tone 0..7 nudges the placeholder fill so 8 cards don't look identical.
function MediaPlaceholder({ kind, tone = 0, src, label, videoAr, controls }) {
if (src) {
if (kind === "youtube") {
// Accept either a full URL or just a video id
const id = src.includes("/") || src.includes("=")
? (src.match(/(?:v=|youtu\.be\/|embed\/)([\w-]{11})/) || [])[1] || src
: src;
return (
);
}
if (kind === "vimeo") {
// Accept full URL or just numeric id (with optional /h-hash for unlisted videos)
const m = String(src).match(/vimeo\.com\/(?:video\/)?(\d+)(?:\/([\w]+))?/);
const id = m ? m[1] : String(src).split("/")[0];
const rawHash = m && m[2] ? m[2] : "";
// Controls mode: full player UI, no autoplay, no background crop.
if (controls) {
const q = rawHash ? `?h=${rawHash}` : "";
return (
);
}
const hash = rawHash ? `&h=${rawHash}` : "";
return (
);
}
window.MediaPlaceholder = MediaPlaceholder;
// Wraps a controls-mode video iframe and adds an explicit fullscreen toggle.
// Uses the Fullscreen API on the wrapper so it works regardless of whether the
// embedded player's own fullscreen button is reachable.
function FullscreenMedia({ children }) {
const ref = React.useRef(null);
const [isFs, setIsFs] = React.useState(false);
const [cssFs, setCssFs] = React.useState(false);
React.useEffect(() => {
const onChange = () => setIsFs(document.fullscreenElement === ref.current);
document.addEventListener("fullscreenchange", onChange);
document.addEventListener("webkitfullscreenchange", onChange);
return () => {
document.removeEventListener("fullscreenchange", onChange);
document.removeEventListener("webkitfullscreenchange", onChange);
};
}, []);
// Esc exits CSS-fallback fullscreen
React.useEffect(() => {
if (!cssFs) return;
const onKey = (e) => { if (e.key === "Escape") setCssFs(false); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [cssFs]);
const active = isFs || cssFs;
const toggle = (e) => {
e.preventDefault();
e.stopPropagation();
const el = ref.current;
if (!el) return;
if (active) {
if (document.fullscreenElement === el || document.webkitFullscreenElement === el) {
(document.exitFullscreen || document.webkitExitFullscreen || (() => {})).call(document);
}
setCssFs(false);
return;
}
const req = el.requestFullscreen || el.webkitRequestFullscreen;
if (req) {
const p = req.call(el);
if (p && p.catch) p.catch(() => setCssFs(true));
} else {
setCssFs(true);
}
};
return (
{children}
);
}
window.FullscreenMedia = FullscreenMedia;
// Robust autoplaying video for iOS Safari.
// React doesn't always set the `muted` IDL property in time; we set it imperatively.
// We also call .play() once metadata is ready, and pause when the element scrolls out of view.
function AutoVideo({ src }) {
const ref = React.useRef(null);
React.useEffect(() => {
const v = ref.current;
if (!v) return;
// CRUCIAL on iOS: set muted as the IDL property, not just the attribute.
v.muted = true;
v.defaultMuted = true;
v.playsInline = true;
const tryPlay = () => {
const p = v.play();
if (p && typeof p.catch === "function") p.catch(() => {});
};
// Try immediately and again on common readiness events.
tryPlay();
v.addEventListener("loadedmetadata", tryPlay);
v.addEventListener("canplay", tryPlay);
// Pause when scrolled offscreen, resume when back โ saves battery on mobile.
let io;
if ("IntersectionObserver" in window) {
io = new IntersectionObserver((entries) => {
for (const e of entries) {
if (e.isIntersecting) tryPlay();
else v.pause();
}
}, { threshold: 0.01 });
io.observe(v);
}
return () => {
v.removeEventListener("loadedmetadata", tryPlay);
v.removeEventListener("canplay", tryPlay);
if (io) io.disconnect();
};
}, [src]);
return (
);
}