{"version":3,"file":"LoopVideo.2tuGSGbb.mjs","names":["useRef","useState","p"],"sources":["https:/framerusercontent.com/modules/JUYsRIeb7WgPZO49coix/gqWdR7eHqpfzP4APxAur/LoopVideo.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useMotionValue,useScroll,useSpring,useTransform}from\"framer-motion\";import{useEffect,useRef,useState}from\"react\";const EASE=[.33,1,.68,1];/**\n * Card media: poster image plus an optional muted looping video, with soft scroll parallax,\n * a gentle zoom inside the frame on hover and an optional cursor label. The frame never scales.\n * Reduced motion keeps the poster still. Bind Video and Poster to CMS fields.\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 500\n */export default function LoopVideo(props){const{video=\"\",poster,hoverPoster,position=\"center top\",playOnHover=false,parallax=8,zoom=1.04,label=\"\",labelFill=\"#F40000\",labelText=\"#FFFFFF\"}=props;const isStatic=useIsStaticRenderer();const root=useRef(null);const ref=useRef(null);const[reduced,setReduced]=useState(false);const[ready,setReady]=useState(false);const[hover,setHover]=useState(false);const[inView,setInView]=useState(false);const[fine,setFine]=useState(false);useEffect(()=>{if(typeof window===\"undefined\")return;const mq=window.matchMedia(\"(prefers-reduced-motion: reduce)\");setReduced(mq.matches);setFine(!!window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches);const on=()=>setReduced(mq.matches);mq.addEventListener?.(\"change\",on);return()=>mq.removeEventListener?.(\"change\",on);},[]);useEffect(()=>{const el=root.current;if(!el||typeof IntersectionObserver===\"undefined\")return;const io=new IntersectionObserver(entries=>setInView(entries[0]?.isIntersecting??false),{threshold:.1});io.observe(el);return()=>io.disconnect();},[]);// Parallax: the media box is taller than the frame by `parallax` percent and travels inside it.\nconst p=isStatic||reduced?0:Math.max(0,Math.min(20,parallax));const{scrollYProgress}=useScroll({target:root,offset:[\"start end\",\"end start\"]});const y=useTransform(scrollYProgress,v=>`${(v-.5)*p/(1+p/100)}%`);// Cursor label follows the pointer, clamped so it never leaves the frame.\nconst mx=useMotionValue(0);const my=useMotionValue(0);const sx=useSpring(mx,{stiffness:380,damping:34,mass:.6});const sy=useSpring(my,{stiffness:380,damping:34,mass:.6});const R=40;function move(e){const el=root.current;if(!el||!label)return;const r=el.getBoundingClientRect();mx.set(Math.min(r.width-R,Math.max(R,e.clientX-r.left))-R);my.set(Math.min(r.height-R,Math.max(R,e.clientY-r.top))-R);}const shouldPlay=!!video&&!reduced&&inView&&(!playOnHover||hover);useEffect(()=>{const el=ref.current;if(el&&el.readyState>=2)setReady(true);},[video,reduced]);useEffect(()=>{const el=ref.current;if(!el)return;if(shouldPlay){const pr=el.play();if(pr&&typeof pr.catch===\"function\")pr.catch(()=>{});}else el.pause();},[shouldPlay]);const pos=position||\"center top\";const fill={position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",objectPosition:pos,display:\"block\"};const showVideo=!isStatic&&!!video&&!reduced;const zoomOn=!isStatic&&!reduced&&fine&&hover&&zoom>1;return /*#__PURE__*/_jsxs(\"div\",{ref:root,style:{...props.style,position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",cursor:label&&fine?\"none\":undefined},onMouseEnter:e=>{setHover(true);move(e);sx.jump(mx.get());sy.jump(my.get());},onMouseLeave:()=>setHover(false),onMouseMove:label?move:undefined,children:[/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",left:0,right:0,top:`${-p/2}%`,height:`${100+p}%`,y:p?y:0},children:/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",inset:0,transformOrigin:pos.endsWith(\"bottom\")?\"50% 100%\":pos.endsWith(\"center\")?\"50% 50%\":\"50% 0%\",transform:zoomOn?`scale(${zoom})`:\"scale(1)\",transition:\"transform .7s cubic-bezier(.33,1,.68,1)\"},children:[poster?.src&&/*#__PURE__*/_jsx(\"img\",{src:poster.src,srcSet:poster.srcSet,sizes:\"(max-width: 810px) 100vw, 50vw\",alt:poster.alt||\"\",loading:\"lazy\",decoding:\"async\",style:fill}),hoverPoster?.src&&!isStatic&&/*#__PURE__*/_jsx(\"img\",{src:hoverPoster.src,srcSet:hoverPoster.srcSet,sizes:\"(max-width: 810px) 100vw, 50vw\",alt:\"\",\"aria-hidden\":\"true\",loading:\"lazy\",decoding:\"async\",style:{...fill,opacity:hover&&fine?1:0,transition:\"opacity .45s cubic-bezier(.33,1,.68,1)\"}}),showVideo&&/*#__PURE__*/_jsx(\"video\",{ref:ref,src:video,muted:true,loop:true,playsInline:true,preload:\"metadata\",\"aria-hidden\":\"true\",onLoadedData:()=>setReady(true),onCanPlay:()=>setReady(true),onPlaying:()=>setReady(true),style:{...fill,opacity:ready&&(!playOnHover||hover)?1:0,transition:\"opacity .6s cubic-bezier(.33,1,.68,1)\"}})]})}),label&&fine&&!isStatic&&/*#__PURE__*/_jsx(motion.div,{\"aria-hidden\":\"true\",initial:false,animate:{opacity:hover?1:0},transition:{duration:.25,ease:EASE},style:{position:\"absolute\",left:0,top:0,x:sx,y:sy,width:R*2,height:R*2,borderRadius:\"50%\",background:labelFill,color:labelText,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",font:'500 13px \"Inter\", \"Inter Placeholder\", system-ui, sans-serif',letterSpacing:\"-0.01em\",pointerEvents:\"none\",zIndex:2},children:label})]});}addPropertyControls(LoopVideo,{video:{type:ControlType.File,title:\"Video\",allowedFileTypes:[\"mp4\",\"webm\",\"mov\"]},poster:{type:ControlType.ResponsiveImage,title:\"Poster\"},hoverPoster:{type:ControlType.ResponsiveImage,title:\"Hover image\"},position:{type:ControlType.Enum,title:\"Focus\",options:[\"center top\",\"center center\",\"center bottom\"],optionTitles:[\"Top\",\"Center\",\"Bottom\"],defaultValue:\"center top\"},playOnHover:{type:ControlType.Boolean,title:\"On hover\",defaultValue:false,description:\"Show and play the video only while hovered.\"},parallax:{type:ControlType.Number,title:\"Parallax\",defaultValue:8,min:0,max:20,step:1,unit:\"%\"},zoom:{type:ControlType.Number,title:\"Hover zoom\",defaultValue:1.04,min:1,max:1.15,step:.01},label:{type:ControlType.String,title:\"Cursor label\",defaultValue:\"\"},labelFill:{type:ControlType.Color,title:\"Label fill\",defaultValue:\"#F40000\",hidden:p=>!p.label},labelText:{type:ControlType.Color,title:\"Label text\",defaultValue:\"#FFFFFF\",hidden:p=>!p.label}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"LoopVideo\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicHeight\":\"500\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LoopVideo.map"],"mappings":"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"}