{"version":3,"file":"AmbientVideo.DeFPgpcE.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/QMKJ7xRUZ5jtycBY1P7r/OJhlrtu9JpdUpGnJg57v/AmbientVideo.js"],"sourcesContent":["// Ambient Mode Glow Effect - A video component with dynamic glow based on video content\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */function AmbientVideo(props){const{videoFile=\"https://framerusercontent.com/assets/MLWPbW1dUQawJLhhun3dBwpgJak.mp4\",poster,autoplay=true,muted=true,loop=true,controls=true,glowIntensity=.6,glowBlur=40,glowSpread=20,borderRadius=12}=props;const videoRef=useRef(null);const canvasRef=useRef(null);const[glowColor,setGlowColor]=useState(\"rgba(100, 100, 100, 0.3)\");const isStatic=useIsStaticRenderer();useEffect(()=>{if(isStatic)return;if(!videoRef.current||!canvasRef.current)return;const video=videoRef.current;const canvas=canvasRef.current;const ctx=canvas.getContext(\"2d\");if(!ctx)return;let intervalId;const extractColorFromFrame=()=>{if(video.readyState<2)return null;try{canvas.width=1;canvas.height=1;ctx.drawImage(video,0,0,1,1);const imageData=ctx.getImageData(0,0,1,1);const[r,g,b]=imageData.data;return`rgba(${r}, ${g}, ${b}, ${glowIntensity})`;}catch(error){return null;}};const updateGlowColor=()=>{if(video.readyState<2)return;const newColor=extractColorFromFrame();if(newColor){startTransition(()=>{setGlowColor(newColor);});}};const startGlowUpdates=()=>{// Clear any existing interval\nif(intervalId){clearInterval(intervalId);}// Start immediate extraction\nupdateGlowColor();// Continue extracting at regular intervals\nintervalId=setInterval(updateGlowColor,50);};const stopGlowUpdates=()=>{if(intervalId){clearInterval(intervalId);intervalId=0;}};// Start glow updates as soon as video can play\nconst handleCanPlay=()=>{startGlowUpdates();};const handlePlay=()=>{startGlowUpdates();};const handlePause=()=>{stopGlowUpdates();};const handleEnded=()=>{stopGlowUpdates();};// Add event listeners\nvideo.addEventListener(\"canplay\",handleCanPlay);video.addEventListener(\"loadedmetadata\",handleCanPlay);video.addEventListener(\"play\",handlePlay);video.addEventListener(\"pause\",handlePause);video.addEventListener(\"ended\",handleEnded);// If video is already ready, start immediately\nif(video.readyState>=3){startGlowUpdates();}return()=>{stopGlowUpdates();video.removeEventListener(\"canplay\",handleCanPlay);video.removeEventListener(\"loadedmetadata\",handleCanPlay);video.removeEventListener(\"play\",handlePlay);video.removeEventListener(\"pause\",handlePause);video.removeEventListener(\"ended\",handleEnded);};},[glowIntensity,isStatic]);const outerContainerStyle={width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"};const innerContainerStyle={position:\"relative\",width:\"100%\",height:\"100%\",borderRadius,overflow:\"visible\"};const videoStyle={position:\"relative\",width:\"100%\",height:\"100%\",objectFit:\"cover\",borderRadius,zIndex:1,display:\"block\",boxShadow:`0 0 ${glowBlur}px ${glowSpread}px ${glowColor}`,transition:\"box-shadow 0.4s ease-in-out\"};return /*#__PURE__*/_jsxs(\"div\",{style:outerContainerStyle,children:[/*#__PURE__*/_jsx(\"div\",{style:innerContainerStyle,children:/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:videoFile,poster:poster?.src||undefined,autoPlay:autoplay&&!isStatic,muted:muted,loop:loop,controls:controls,style:videoStyle,playsInline:true,crossOrigin:\"anonymous\"})}),/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{display:\"none\"},width:1,height:1})]});}export default AmbientVideo;addPropertyControls(AmbientVideo,{videoFile:{type:ControlType.File,title:\"Video File\",allowedFileTypes:[\"mp4\",\"webm\",\"mov\"]},poster:{type:ControlType.ResponsiveImage,title:\"Poster Image\"},autoplay:{type:ControlType.Boolean,title:\"Autoplay\",defaultValue:true},muted:{type:ControlType.Boolean,title:\"Muted\",defaultValue:true},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:true},controls:{type:ControlType.Boolean,title:\"Show Controls\",defaultValue:true},glowIntensity:{type:ControlType.Number,title:\"Glow Intensity\",defaultValue:.6,min:0,max:1,step:.1},glowBlur:{type:ControlType.Number,title:\"Glow Blur\",defaultValue:50,min:10,max:100,step:5,unit:\"px\"},glowSpread:{type:ControlType.Number,title:\"Glow Spread\",defaultValue:20,min:0,max:50,step:5,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:12,min:0,max:50,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AmbientVideo\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AmbientVideo.map"],"mappings":"yMAIG,SAAS,EAAa,EAAM,CAAC,GAAK,CAAC,YAAU,uEAAuE,SAAO,WAAS,GAAK,QAAM,GAAK,OAAK,GAAK,WAAS,GAAK,gBAAc,GAAG,WAAS,GAAG,aAAW,GAAG,eAAa,IAAI,EAAY,EAASA,EAAO,IAAI,EAAQ,EAAUA,EAAO,IAAI,EAAO,CAAC,EAAU,GAAcC,EAAS,0BAA0B,EAAQ,EAAS,EAAoB,EAAE,MAAc,CAAoB,GAAhB,GAAmB,CAAC,EAAS,SAAS,CAAC,EAAU,QAAQ,OAAO,IAAM,EAAM,EAAS,QAAc,EAAO,EAAU,QAAc,EAAI,EAAO,WAAW,IAAI,EAAE,GAAG,CAAC,EAAI,OAAO,IAAI,EAAiB,MAA0B,CAAC,GAAG,EAAM,WAAW,EAAE,OAAO,KAAK,GAAG,CAAC,EAAO,MAAM,EAAE,EAAO,OAAO,EAAE,EAAI,UAAU,EAAM,EAAE,EAAE,EAAE,CAAC,EAA4C,GAAK,CAAC,EAAE,EAAE,GAApC,EAAI,aAAa,EAAE,EAAE,EAAE,CAAwB,CAAC,CAAC,KAAK,MAAM,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAc,EAAG,MAAa,CAAC,OAAO,IAAK,CAAC,EAAQ,MAAoB,CAAC,GAAG,EAAM,WAAW,EAAE,OAAO,IAAM,EAAS,EAAsB,EAAK,GAAU,MAAoB,CAAC,EAAa,CAAQ,CAAE,CAAC,CAAG,EAAQ,MAAqB,CAC7iC,GAAY,cAAc,CAAU,EACvC,EAAgB,EAChB,EAAW,YAAY,EAAgB,EAAE,CAAE,EAAQ,MAAoB,CAAC,AAAyC,KAA1B,cAAc,CAAU,EAAa,EAAG,EACzH,MAAkB,CAAC,EAAiB,CAAE,EAAQ,MAAe,CAAC,EAAiB,CAAE,EAAQ,MAAgB,CAAC,EAAgB,CAAE,EAAQ,MAAgB,CAAC,EAAgB,CAAE,EAEjI,OAD5C,EAAM,iBAAiB,UAAU,CAAa,EAAE,EAAM,iBAAiB,iBAAiB,CAAa,EAAE,EAAM,iBAAiB,OAAO,CAAU,EAAE,EAAM,iBAAiB,QAAQ,CAAW,EAAE,EAAM,iBAAiB,QAAQ,CAAW,EACpO,EAAM,YAAY,GAAG,EAAiB,MAAa,CAAC,EAAgB,EAAE,EAAM,oBAAoB,UAAU,CAAa,EAAE,EAAM,oBAAoB,iBAAiB,CAAa,EAAE,EAAM,oBAAoB,OAAO,CAAU,EAAE,EAAM,oBAAoB,QAAQ,CAAW,EAAE,EAAM,oBAAoB,QAAQ,CAAW,CAAE,CAAE,EAAE,CAAC,EAAc,CAAQ,CAAC,EAAE,IAAM,EAAoB,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,WAAW,SAAS,eAAe,QAAQ,EAAQ,EAAoB,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,eAAa,SAAS,SAAS,EAAQ,EAAW,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,UAAU,QAAQ,eAAa,OAAO,EAAE,QAAQ,QAAQ,UAAU,OAAO,EAAS,KAAK,EAAW,KAAK,IAAY,WAAW,6BAA6B,EAAE,OAAoB,EAAM,MAAM,CAAC,MAAM,EAAoB,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,EAAoB,SAAsB,EAAK,QAAQ,CAAC,IAAI,EAAS,IAAI,EAAU,OAAO,GAAQ,KAAK,IAAA,GAAU,SAAS,GAAU,CAAC,EAAe,QAAW,OAAc,WAAS,MAAM,EAAW,YAAY,GAAK,YAAY,WAAW,CAAC,CAAC,CAAC,EAAe,EAAK,SAAS,CAAC,IAAI,EAAU,MAAM,CAAC,QAAQ,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,iBATjpC,IAA6D,IAAwE,EASyiC,EAAoB,EAAa,CAAC,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,aAAa,iBAAiB,CAAC,MAAM,OAAO,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,EAAY,gBAAgB,MAAM,cAAc,EAAE,SAAS,CAAC,KAAK,EAAY,QAAQ,MAAM,WAAW,aAAa,EAAI,EAAE,MAAM,CAAC,KAAK,EAAY,QAAQ,MAAM,QAAQ,aAAa,EAAI,EAAE,KAAK,CAAC,KAAK,EAAY,QAAQ,MAAM,OAAO,aAAa,EAAI,EAAE,SAAS,CAAC,KAAK,EAAY,QAAQ,MAAM,gBAAgB,aAAa,EAAI,EAAE,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,aAAa,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,GAAG,IAAI,GAAG,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,EAAE,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC"}