// Shared visual bits for the website kit — placeholder video, section wrapper
// Free sample clip used as a placeholder throughout the demo.
window.NA_PLACEHOLDER_VIDEO = "https://media.w3.org/2010/05/sintel/trailer.mp4";
function VideoTile({ label, tc = "00:00:24:00", ratio = "16 / 9", rush = false, autoplay = false, src }) {
const ref = React.useRef(null);
const [playing, setPlaying] = React.useState(autoplay);
const [muted, setMuted] = React.useState(true);
// Keep the underlying media element's muted property in sync with state.
React.useEffect(() => { if (ref.current) ref.current.muted = muted; }, [muted]);
const toggle = () => {
const v = ref.current; if (!v) return;
if (v.paused) { v.play(); setPlaying(true); } else { v.pause(); setPlaying(false); }
};
const toggleSound = (e) => {
e.stopPropagation();
const v = ref.current; if (!v) return;
const nextMuted = !muted;
v.muted = nextMuted;
setMuted(nextMuted);
// Turning sound on should also make sure the clip is actually playing.
if (!nextMuted && v.paused) { v.play(); setPlaying(true); }
};
return (
{/* subtle top gradient for legibility */}
{!playing && (
)}
{/* Sound on/off toggle — autoplay stays muted (browsers require it); click to hear audio. */}
{rush && (
Rush delivery
)}
{label && (
{label}
{tc}
)}
);
}
function Section({ id, children, style = {} }) {
return (
);
}
// Back-compat alias
window.VideoThumb = VideoTile;
window.VideoTile = VideoTile;
window.Section = Section;