{"version":3,"file":"AmbientVideo.B3u8iZfF.mjs","names":["useRef","useState","__esmMin","init_npm_react_18_3_1","init_ssg_sandbox_shims","navigator","window","_e","p","c","init_jsx_runtime","ce","de","init_framer_BL70qLPA","addPropertyControls","RenderTarget","ControlType","AmbientVideo","props","rootRef","videoRef","haltedRef","loadedRef","allowed","setAllowed","near","setNear","shown","setShown","live","posterSrc","srcOf","poster","videoSrc","video","videoUrl","fade","fadeMs","minW","minWidth","inView","playInView","lead","priority","lazyPoster","el","conn","vw","vh","top","probe","io","entries","NEAR_MARGIN","v","halt","onCanPlay","start","stop","PLAY_RATIO","mq","onMq","layer","fit","position","style","radius","alt","EASE","DEMO_POSTER","init_AmbientVideo"],"sources":["https:/framerusercontent.com/modules/iKwn3odp3Cxf4NcSSNql/emUKRjqfZg3lwTvvayr1/AmbientVideo.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * DejaTen ambient video plate. The still renders first. On a hero it is the LCP\n * image (\"Priority image\" on: loading eager, fetchpriority high); on a plate\n * further down the page (\"Priority image\" off) it loads lazily at normal\n * priority, so a band plate never competes with the hero for bandwidth.\n * A short muted mp4 loop fades in over it only when the visitor allows it:\n * no reduced motion, Save-Data off, the plate near the viewport, and (on a\n * narrow screen) not below the fold at mount. The poster stays underneath,\n * so a paused, failed or never-loaded video still shows the still.\n * Canvas, export and thumbnail render the poster only.\n *\n * @framerDisableUnlink\n * @framerIntrinsicWidth 640\n * @framerIntrinsicHeight 640\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */// Product 22, closed view (framer/code/collection-data.json), so the canvas is never blank.\nconst DEMO_POSTER=\"https://framerusercontent.com/images/56oXtSnL4ZXfjNFf0nHsEEKxA7k.webp\";const EASE=\"cubic-bezier(0.2, 0.7, 0.2, 1)\";const NEAR_MARGIN=\"200px\";const PLAY_RATIO=.25;const srcOf=v=>(v&&typeof v===\"object\"?v.src:v)||\"\";export default function AmbientVideo(props){const{poster,video,videoUrl,alt,priority,fit,position,radius,minWidth,fadeMs,playInView,style}=props;const rootRef=useRef(null);const videoRef=useRef(null);const haltedRef=useRef(false);const loadedRef=useRef(false);// Decided once on mount: may this visitor get the video at all.\nconst[allowed,setAllowed]=useState(false);// Create the <video> element only once the plate is near the viewport.\nconst[near,setNear]=useState(false);// Faded in over the poster.\nconst[shown,setShown]=useState(false);const live=RenderTarget.current()===RenderTarget.preview;const posterSrc=srcOf(poster);const videoSrc=srcOf(video)||(videoUrl||\"\").trim();const fade=Math.max(0,fadeMs??600);const minW=minWidth??480;const inView=playInView!==false;// Poster priority. The canvas, exports and thumbnails always load the\n// poster eagerly, so the editor never shows a blank plate.\nconst lead=priority!==false;const lazyPoster=!lead&&live;// 1. The one-time decision.\nuseEffect(()=>{if(!live||!videoSrc)return;const el=rootRef.current;if(!el||typeof window===\"undefined\")return;try{if(window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches)return;const conn=navigator.connection;if(conn&&conn.saveData)return;const vw=window.innerWidth;const vh=window.innerHeight;const top=el.getBoundingClientRect().top;if(vw<minW&&top>=vh)return;const probe=document.createElement(\"video\");if(!probe.canPlayType||!probe.canPlayType(\"video/mp4\"))return;}catch(e){return;}setAllowed(true);},[live,videoSrc,minW]);// 2. Create the element when the plate is within 200px of the viewport.\nuseEffect(()=>{if(!allowed)return;const el=rootRef.current;if(!el)return;if(!inView||!(\"IntersectionObserver\"in window)){setNear(true);return;}const io=new IntersectionObserver(entries=>{if(entries.some(e=>e.isIntersecting)){setNear(true);io.disconnect();}},{rootMargin:NEAR_MARGIN});io.observe(el);return()=>io.disconnect();},[allowed,inView]);// 3. Load and play at 25% visible, pause when it leaves, fade on canplay.\nuseEffect(()=>{if(!near)return;const v=videoRef.current;const el=rootRef.current;if(!v||!el)return;v.muted=true;v.defaultMuted=true;const halt=()=>{haltedRef.current=true;try{v.pause();}catch(e){}setShown(false);};const onCanPlay=()=>{if(!haltedRef.current)setShown(true);};const start=()=>{if(haltedRef.current)return;if(!loadedRef.current){loadedRef.current=true;try{v.load();}catch(e){}}const p=v.play();if(p&&typeof p.catch===\"function\")p.catch(halt);};const stop=()=>{try{v.pause();}catch(e){}};v.addEventListener(\"canplay\",onCanPlay);v.addEventListener(\"error\",halt);let io=null;if(inView&&\"IntersectionObserver\"in window){io=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting&&e.intersectionRatio>=PLAY_RATIO)start();else if(!e.isIntersecting)stop();});},{threshold:[0,PLAY_RATIO]});io.observe(el);}else{start();}// Reduced motion turning on mid-visit: pause and fade out.\nconst mq=window.matchMedia?.(\"(prefers-reduced-motion: reduce)\");const onMq=e=>{if(e.matches)halt();};if(mq){if(mq.addEventListener)mq.addEventListener(\"change\",onMq);else if(mq.addListener)mq.addListener(onMq);}return()=>{io?.disconnect();v.removeEventListener(\"canplay\",onCanPlay);v.removeEventListener(\"error\",halt);if(mq){if(mq.removeEventListener)mq.removeEventListener(\"change\",onMq);else if(mq.removeListener)mq.removeListener(onMq);}stop();};},[near,inView]);const layer={position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:fit===\"contain\"?\"contain\":\"cover\",objectPosition:position||\"50% 50%\",display:\"block\"};return /*#__PURE__*/_jsxs(\"div\",{ref:rootRef,style:{...style,position:\"relative\",overflow:\"hidden\",borderRadius:radius||0,background:\"transparent\"},children:[posterSrc?/*#__PURE__*/_jsx(\"img\",{src:posterSrc,alt:alt||\"\",loading:lazyPoster?\"lazy\":\"eager\",decoding:\"async\",...{fetchPriority:lead?\"high\":\"auto\"},style:layer}):null,live&&allowed&&near&&videoSrc?/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:videoSrc,muted:true,playsInline:true,loop:true,preload:\"none\",disablePictureInPicture:true,\"aria-hidden\":\"true\",tabIndex:-1,style:{...layer,opacity:shown?1:0,transition:`opacity ${fade}ms ${EASE}`,pointerEvents:\"none\"}}):null]});}AmbientVideo.displayName=\"Ambient Video\";AmbientVideo.defaultProps={poster:DEMO_POSTER,video:\"\",videoUrl:\"\",alt:\"\",priority:true,fit:\"cover\",position:\"50% 50%\",radius:0,minWidth:480,fadeMs:600,playInView:true};addPropertyControls(AmbientVideo,{poster:{type:ControlType.Image,title:\"Poster\"},video:{type:ControlType.File,title:\"Video (mp4)\",allowedFileTypes:[\"mp4\"]},videoUrl:{type:ControlType.String,title:\"Video URL\",placeholder:\"framerusercontent .mp4 if no file\",defaultValue:\"\"},alt:{type:ControlType.String,title:\"Alt\",defaultValue:\"\"},priority:{type:ControlType.Boolean,title:\"Priority image\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\",description:\"Yes on a hero plate (loads first). No further down the page: the poster loads lazily.\"},fit:{type:ControlType.Enum,title:\"Fit\",options:[\"cover\",\"contain\"],optionTitles:[\"Cover\",\"Contain\"],defaultValue:\"cover\"},position:{type:ControlType.String,title:\"Position\",defaultValue:\"50% 50%\"},radius:{type:ControlType.Number,title:\"Radius\",min:0,max:200,unit:\"px\",defaultValue:0},minWidth:{type:ControlType.Number,title:\"Min width\",min:0,max:1920,step:10,unit:\"px\",defaultValue:480,description:\"No video below this viewport width when the plate is below the fold.\"},fadeMs:{type:ControlType.Number,title:\"Fade\",min:0,max:3e3,step:50,unit:\"ms\",defaultValue:600},playInView:{type:ControlType.Boolean,title:\"Play in view\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"Always\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AmbientVideo\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AmbientVideo.map"],"mappings":"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"}