{"version":3,"file":"ImageLoader.BPcDsKbF.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/epKIo68MpVGe03RyBS02/FYbLb8hr5eYFmh81ngNI/ImageLoader.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef}from\"react\";import{addPropertyControls,ControlType,useInView}from\"framer\";import{motion}from\"framer-motion\";/**\n * Lazy Image\n * \n * A component that displays a solid color placeholder until the image is in view.\n * \n * @framerIntrinsicWidth 300\n * @framerIntrinsicHeight 200\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ImageLoader(props){const{image={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Placeholder image\"},placeholderColor=\"#CCCCCC\",objectFit=\"cover\",borderRadius=0,loaderType=\"spinner\",loaderColor=\"#FFFFFF\",loaderBlendMode=\"normal\",loadDelay=0,showOverlay=false,overlayText=\"Image Caption\",overlayPosition=\"bottom\",overlayColor=\"#FFFFFF\",overlayBackgroundColor=\"#000000\",overlayBackgroundOpacity=.5,overlayFont,style}=props;const[isLoaded,setIsLoaded]=useState(false);const[isError,setIsError]=useState(false);const[isLoading,setIsLoading]=useState(false);const ref=useRef(null);const isInView=useInView(ref,{once:true,margin:\"100px\"});useEffect(()=>{if(isInView&&image.src){setIsLoading(true);// Create a timer for the delay\nconst delayTimer=setTimeout(()=>{const img=new Image;img.src=image.src;img.onload=()=>{setIsLoaded(true);setIsLoading(false);};img.onerror=()=>{setIsError(true);setIsLoading(false);};},loadDelay*1e3);return()=>{clearTimeout(delayTimer);};}},[isInView,image.src,loadDelay]);const renderLoader=()=>{if(!isLoading)return null;switch(loaderType){case\"spinner\":return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"50%\",left:\"50%\",transform:\"translate(-50%, -50%)\"},children:/*#__PURE__*/_jsx(motion.div,{style:{width:40,height:40,borderRadius:\"50%\",border:`3px solid ${placeholderColor}`,borderTop:`3px solid ${loaderColor}`,mixBlendMode:loaderBlendMode},animate:{rotate:360},transition:{duration:1,repeat:Infinity,ease:\"linear\"}})});case\"progress\":return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:0,left:0,width:\"100%\",height:4,backgroundColor:`${placeholderColor}80`},children:/*#__PURE__*/_jsx(motion.div,{style:{height:\"100%\",backgroundColor:loaderColor,mixBlendMode:loaderBlendMode},initial:{width:0},animate:{width:\"100%\"},transition:{duration:loadDelay||1.5,ease:\"easeInOut\"}})});case\"pulse\":return /*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundColor:loaderColor,mixBlendMode:loaderBlendMode},initial:{opacity:.2},animate:{opacity:.6},transition:{duration:.8,repeat:Infinity,repeatType:\"reverse\"}});default:return null;}};const renderOverlay=()=>{if(!showOverlay||!overlayText)return null;const positionStyles={top:{top:0,left:0,right:0},center:{top:\"50%\",left:0,right:0,transform:\"translateY(-50%)\"},bottom:{bottom:0,left:0,right:0}};return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",...positionStyles[overlayPosition],padding:\"10px 16px\",backgroundColor:`${overlayBackgroundColor}${Math.round(overlayBackgroundOpacity*255).toString(16).padStart(2,\"0\")}`,color:overlayColor,textAlign:\"center\",width:\"100%\",boxSizing:\"border-box\",...overlayFont},children:overlayText});};// Determine container dimensions\nconst containerStyle={position:\"relative\",width:\"100%\",height:\"100%\",borderRadius:borderRadius,overflow:\"hidden\",backgroundColor:placeholderColor,minWidth:5,minHeight:5,...style};return /*#__PURE__*/_jsxs(\"div\",{ref:ref,style:containerStyle,children:[renderLoader(),isInView&&!isError&&/*#__PURE__*/_jsx(\"img\",{src:image.src,alt:image.alt||\"\",style:{width:\"100%\",height:\"100%\",objectFit:objectFit,opacity:isLoaded?1:0,transition:\"opacity 0.3s ease-in-out\",display:\"block\"}}),isLoaded&&renderOverlay()]});}addPropertyControls(ImageLoader,{image:{type:ControlType.ResponsiveImage,title:\"Image\"},placeholderColor:{type:ControlType.Color,title:\"Placeholder Color\",defaultValue:\"#CCCCCC\"},objectFit:{type:ControlType.Enum,title:\"Object Fit\",options:[\"cover\",\"contain\",\"fill\",\"none\",\"scale-down\"],defaultValue:\"cover\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:0,min:0,max:100,step:1,unit:\"px\"},loaderType:{type:ControlType.Enum,title:\"Loader Type\",options:[\"spinner\",\"progress\",\"pulse\"],defaultValue:\"spinner\",optionTitles:[\"Spinner\",\"Progress Bar\",\"Pulse\"]},loaderColor:{type:ControlType.Color,title:\"Loader Color\",defaultValue:\"#FFFFFF\"},loaderBlendMode:{type:ControlType.Enum,title:\"Blend Mode\",options:[\"normal\",\"multiply\",\"screen\",\"overlay\",\"darken\",\"lighten\",\"color-dodge\",\"color-burn\",\"hard-light\",\"soft-light\",\"difference\",\"exclusion\"],defaultValue:\"normal\"},loadDelay:{type:ControlType.Number,title:\"Load Delay\",defaultValue:0,min:0,max:10,step:.1,unit:\"s\",displayStepper:true},showOverlay:{type:ControlType.Boolean,title:\"Text Overlay\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},overlayText:{type:ControlType.String,title:\"Overlay Text\",defaultValue:\"Image Caption\",placeholder:\"Enter caption or title...\",displayTextArea:true,hidden:({showOverlay})=>!showOverlay},overlayPosition:{type:ControlType.Enum,title:\"Position\",options:[\"top\",\"center\",\"bottom\"],defaultValue:\"bottom\",optionTitles:[\"Top\",\"Center\",\"Bottom\"],displaySegmentedControl:true,hidden:({showOverlay})=>!showOverlay},overlayColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#FFFFFF\",hidden:({showOverlay})=>!showOverlay},overlayBackgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\",hidden:({showOverlay})=>!showOverlay},overlayBackgroundOpacity:{type:ControlType.Number,title:\"BG Opacity\",defaultValue:.5,min:0,max:1,step:.05,hidden:({showOverlay})=>!showOverlay},overlayFont:{type:ControlType.Font,title:\"Text Style\",defaultValue:{fontSize:\"16px\",variant:\"Medium\",lineHeight:1.5,letterSpacing:\"-0.01em\"},controls:\"extended\",defaultFontType:\"sans-serif\",hidden:({showOverlay})=>!showOverlay}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageLoader\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"300\",\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicHeight\":\"200\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageLoader.map"],"mappings":"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"}