{"version":3,"file":"LoopVideo.Biq6_i69.mjs","names":["useState","useRef","shown"],"sources":["https:/framerusercontent.com/modules/IqBRRZKKMwNPq6uVzC54/Txd418zihUr1NmkKbzTp/LoopVideo.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useEffect,useRef,useState}from\"react\";const DEFAULT_SRC=\"https://d2ol7oe51mr4n9.cloudfront.net/user_3FMPqLZy3N0UPmCIAVAvDMjs76h/319ebca4-068e-461f-b826-422f9073086c.mp4\";/**\n * Loop Video — autoplaying, muted background video that fills its frame.\n * With `smooth` on, two stacked copies crossfade at the loop point so the\n * restart is invisible instead of a hard cut; off = native loop.\n *\n * `srcUrl` (string) overrides the File control — File controls can't be set\n * via the plugin. `srcUrlMobile` + `mobileMax` serve a portrait cut at and\n * below the given viewport width.\n *\n * PERFORMANCE (2026-09-28, PageSpeed pass):\n * - ONE download per device. The desktop and mobile cuts are \n * elements with media queries, so the browser picks the right file when it\n * loads. Before, the server HTML always carried the desktop URL and phones\n * swapped to the mobile cut after hydration, downloading BOTH (6.6 MB on\n * the home hero). Crossing mobileMax later (rotation, resize) re-picks.\n * - `deferLoad` (default on): the video starts once the page has loaded AND\n * painted its first content, plus a second and an idle beat (never later\n * than 6 s), instead of competing with the fonts, scripts and first paint\n * for bandwidth, then fades in on its first frame. Set `poster` to show a\n * still before that.\n * - With `smooth`, the crossfade copy starts loading only once the first copy\n * can play through (the same file, so it then comes from cache) instead of\n * both copies downloading the same video at once.\n * - Save-Data: the video is skipped (poster only).\n * - `poster` / `posterMobile`: a still (ideally the cut's first frame) is\n * server-rendered as a BEHIND the video, with the same mobileMax\n * switch, so the hero shows the opening frame with the page instead of a\n * flat colour while the deferred video waits, and the video fades in over\n * the matching frame. framerusercontent posters get a 512/1024/2048 srcset\n * (WebP/AVIF). Note: Chrome ignores a full-viewport image (and video) as a\n * Largest Contentful Paint candidate - it treats it as background - so a\n * full-bleed poster improves what people see, not the LCP number.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicWidth 640\n * @framerIntrinsicHeight 540\n * @framerDisableUnlink\n */// Resolves once the page has loaded AND painted its first content, plus\n// AFTER_PAINT ms and an idle beat, or after MAX_WAIT ms at the latest. One\n// promise shared by every instance on the page.\n//\n// The load event alone was not enough (measured live, 2026-09-28): in\n// Lighthouse's run it can land just BEFORE the first paint, so the video\n// request started 10-120 ms ahead of it and the whole file (3 MB on home,\n// 16-18 MB on /about and /corporate) was counted into the simulated LCP.\n// Requests that start after the first paint are left out of it.\nconst MAX_WAIT=6e3;const AFTER_PAINT=1e3;let pageReady=null;function firstPaintTime(){try{const e=performance.getEntriesByName(\"first-contentful-paint\")[0];return e?e.startTime:-1;}catch(e){return 0;}}function whenPageReady(){if(pageReady)return pageReady;pageReady=new Promise(resolve=>{if(typeof window===\"undefined\")return resolve();let started=false;const go=()=>{if(started)return;started=true;const ric=window.requestIdleCallback;if(typeof ric===\"function\")ric(()=>resolve(),{timeout:800});else setTimeout(resolve,200);};let loaded=document.readyState===\"complete\";let painted=firstPaintTime();const check=()=>{if(!loaded||painted<0)return;setTimeout(go,Math.max(0,painted+AFTER_PAINT-performance.now()));};if(!loaded)window.addEventListener(\"load\",()=>{loaded=true;check();},{once:true});if(painted<0){// Browsers without paint timing fall back to the load event alone.\nconst types=typeof PerformanceObserver!==\"undefined\"&&PerformanceObserver.supportedEntryTypes||[];if(types.indexOf(\"paint\")===-1)painted=0;else{try{const po=new PerformanceObserver(()=>{const t=firstPaintTime();if(t<0)return;painted=t;po.disconnect();check();});po.observe({type:\"paint\",buffered:true});}catch(e){painted=0;}}}check();setTimeout(go,MAX_WAIT);});return pageReady;}function frSrcSet(url){if(!/^https:\\/\\/framerusercontent\\.com\\/images\\//.test(url))return undefined;const clean=url.split(\"?\")[0];return[512,1024,2048].map(w=>`${clean}?scale-down-to=${w} ${w}w`).join(\", \");}function saveData(){const c=typeof navigator!==\"undefined\"?navigator.connection:null;return!!(c&&c.saveData);}export default function LoopVideo(props){const{src,srcUrl=\"\",srcUrlMobile=\"\",mobileMax=810,fit=\"cover\",radius=0,smooth=true,fade=1,poster=\"\",posterMobile=\"\",deferLoad=true}=props;const isStatic=useIsStaticRenderer();const desktopSrc=(srcUrl||\"\").trim()||src||DEFAULT_SRC;const mobileSrc=(srcUrlMobile||\"\").trim();const posterUrl=(poster||\"\").trim();const posterMobileUrl=(posterMobile||\"\").trim();const immediate=isStatic||!deferLoad;const[armed,setArmed]=useState(immediate);const[armedB,setArmedB]=useState(immediate);const[playing,setPlaying]=useState(isStatic);const a=useRef(null);const b=useRef(null);const st=useRef({active:0,switching:false,armedB:immediate});st.current.armedB=armedB;// 1. Attach the sources once the page has loaded (unless Save-Data).\nuseEffect(()=>{if(armed||saveData())return;let alive=true;whenPageReady().then(()=>{if(alive)setArmed(true);});return()=>{alive=false;};},[armed]);// 2. Start playback and fade in on the first frame.\nuseEffect(()=>{if(!armed||isStatic)return;const v=a.current;if(!v)return;const on=()=>setPlaying(true);v.addEventListener(\"playing\",on);const p=v.play();if(p&&p.catch)p.catch(()=>{});return()=>v.removeEventListener(\"playing\",on);},[armed,isStatic]);// 3. Re-pick the cut when the viewport crosses mobileMax.\nuseEffect(()=>{if(!armed||isStatic||!mobileSrc||typeof window===\"undefined\"||!window.matchMedia)return;const mq=window.matchMedia(`(max-width: ${mobileMax}px)`);const repick=()=>{const s=st.current;s.active=0;s.switching=false;const va=a.current,vb=b.current;if(vb){try{vb.pause();if(st.current.armedB)vb.load();}catch(e){}vb.style.opacity=\"0\";}if(va){va.style.opacity=\"1\";try{va.load();}catch(e){}const p=va.play();if(p&&p.catch)p.catch(()=>{});}};mq.addEventListener?mq.addEventListener(\"change\",repick):mq.addListener(repick);return()=>{mq.removeEventListener?mq.removeEventListener(\"change\",repick):mq.removeListener(repick);};},[armed,isStatic,mobileSrc,mobileMax]);// 4. Smooth loop: crossfade to the second copy just before the end.\nuseEffect(()=>{if(isStatic||!smooth||!armed)return;const vids=[a.current,b.current];if(!vids[0]||!vids[1])return;const s=st.current;s.active=0;s.switching=false;vids[0].style.opacity=\"1\";vids[1].style.opacity=\"0\";const armSecond=()=>setArmedB(true);vids[0].addEventListener(\"canplaythrough\",armSecond,{once:true});const fallback=setTimeout(armSecond,8e3);const tick=()=>{const cur=vids[s.active],nxt=vids[1-s.active];if(!cur||!nxt||s.switching)return;if(cur.duration&&cur.duration-cur.currentTime<=Math.max(.3,fade)){// Crossfade copy not ready yet: loop the current one with a cut.\nif(!s.armedB||nxt.readyState<2){if(cur.ended||cur.duration-cur.currentTime<.08){try{cur.currentTime=0;}catch(e){}const p=cur.play();if(p&&p.catch)p.catch(()=>{});}return;}s.switching=true;try{nxt.currentTime=0;}catch(e){}const p=nxt.play();if(p&&p.catch)p.catch(()=>{});nxt.style.opacity=\"1\";cur.style.opacity=\"0\";setTimeout(()=>{cur.pause();s.active=1-s.active;s.switching=false;},Math.max(.3,fade)*1e3);}};const id=setInterval(tick,100);return()=>{clearInterval(id);clearTimeout(fallback);vids[0]&&vids[0].removeEventListener(\"canplaythrough\",armSecond);};},[isStatic,smooth,armed,fade]);// Desktop cut first with a media query, portrait cut as the fallback: a\n// browser that ignores `media` still gets the desktop file (today's\n// behaviour), every current browser gets the right one.\nconst sources=on=>!on?null:mobileSrc?[/*#__PURE__*/_jsx(\"source\",{src:desktopSrc,media:`(min-width: ${mobileMax+.02}px)`},\"d\"),/*#__PURE__*/_jsx(\"source\",{src:mobileSrc},\"m\")]:[/*#__PURE__*/_jsx(\"source\",{src:desktopSrc},\"d\")];const outer={position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",borderRadius:radius,...props.style};const shown=playing;const reveal={position:\"absolute\",inset:0,opacity:shown?1:0,transition:isStatic?\"none\":\"opacity .6s ease\"};const base={width:\"100%\",height:\"100%\",objectFit:fit,display:\"block\"};// A