{"version":3,"file":"Image_url.DiYdJqO2.mjs","names":[],"sources":["https:/framerusercontent.com/modules/GTQoF32KZDlmlcyvzXvm/s8WCV7HhdIe8kyEwqeFx/Image_url.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";/**\n * ImageFromURL\n *\n * A simple image/video layer driven by a pasted URL, since Framer's\n * native Image fill only supports Upload/Unsplash, not a direct\n * Link field, for regular design layers.\n *\n * Automatically detects whether the URL points to a video file\n * (based on its extension) and renders a <video> tag instead of\n * <img> when needed.\n *\n * Rotation spins the media inside the frame while the frame itself\n * stays upright (so layout, border and radius are unaffected).\n * The media is resized so it still covers the whole frame at any\n * angle — at 90° / 270° this simply swaps width and height.\n */export default function ImageFromURL(props){const{imageUrl,altText,objectFit,rotation=0,radius,borderWidth,borderColor,autoplay,loop,muted,controls}=props;if(!imageUrl){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#1A1A1A\",color:\"#666\",fontSize:13,fontFamily:\"inherit\",borderRadius:radius,border:`${borderWidth}px solid ${borderColor}`,boxSizing:\"border-box\",textAlign:\"center\",padding:12},children:\"Paste an Image or Video URL →\"});}// Auto-detect video vs image based on the URL's file extension\nconst isVideo=/\\.(mp4|webm|ogg|mov)(\\?.*)?$/i.test(imageUrl);// --- ROTATION MATH ---\n// Size the media box so that, once rotated, it fully covers the frame:\n// width  = frameW·|cos| + frameH·|sin|\n// height = frameW·|sin| + frameH·|cos|\nconst isRotated=rotation%360!==0;const rad=rotation*Math.PI/180;const cos=Math.round(Math.abs(Math.cos(rad))*1e6)/1e6;const sin=Math.round(Math.abs(Math.sin(rad))*1e6)/1e6;// The frame stays upright and clips the media (border + radius live here)\nconst frameStyle={position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",borderRadius:radius,border:`${borderWidth}px solid ${borderColor}`,boxSizing:\"border-box\",containerType:\"size\"};const mediaStyle=isRotated?{position:\"absolute\",top:\"50%\",left:\"50%\",width:`calc(100cqw * ${cos} + 100cqh * ${sin})`,height:`calc(100cqw * ${sin} + 100cqh * ${cos})`,maxWidth:\"none\",transform:`translate(-50%, -50%) rotate(${rotation}deg)`,objectFit:objectFit,display:\"block\"}:{width:\"100%\",height:\"100%\",objectFit:objectFit,display:\"block\"};return /*#__PURE__*/_jsx(\"div\",{style:frameStyle,children:isVideo?/*#__PURE__*/_jsx(\"video\",{src:imageUrl,style:mediaStyle,autoPlay:autoplay,loop:loop,muted:autoplay?true:muted,controls:controls,playsInline:true}):/*#__PURE__*/_jsx(\"img\",{src:imageUrl,alt:altText||\"\",style:mediaStyle})});}addPropertyControls(ImageFromURL,{imageUrl:{type:ControlType.String,title:\"Media URL\",placeholder:\"https://example.com/image-or-video\",defaultValue:\"\"},altText:{type:ControlType.String,title:\"Alt Text\",placeholder:\"Describe image...\",defaultValue:\"\"},objectFit:{type:ControlType.Enum,title:\"Fit\",options:[\"cover\",\"contain\",\"fill\"],optionTitles:[\"Cover\",\"Contain\",\"Fill\"],defaultValue:\"cover\"},rotation:{type:ControlType.Number,title:\"Rotation\",defaultValue:0,min:-180,max:180,step:1,unit:\"\\xb0\"},radius:{type:ControlType.Number,title:\"Radius\",defaultValue:0,min:0,max:100},borderWidth:{type:ControlType.Number,title:\"Border Width\",defaultValue:0,min:0,max:20},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#000000\"},autoplay:{type:ControlType.Boolean,title:\"Autoplay (video)\",defaultValue:true},loop:{type:ControlType.Boolean,title:\"Loop (video)\",defaultValue:true},muted:{type:ControlType.Boolean,title:\"Muted (video)\",defaultValue:true},controls:{type:ControlType.Boolean,title:\"Show Controls (video)\",defaultValue:false}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageFromURL\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Image_url.map"],"mappings":"4JAeG,SAAwB,EAAa,EAAM,CAAC,GAAK,CAAC,WAAS,UAAQ,YAAU,WAAS,EAAE,SAAO,cAAY,cAAY,WAAS,OAAK,QAAM,YAAU,EAAM,GAAG,CAAC,EAAU,OAAoB,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,gBAAgB,UAAU,MAAM,OAAO,SAAS,GAAG,WAAW,UAAU,aAAa,EAAO,OAAO,GAAG,EAAY,WAAW,IAAc,UAAU,aAAa,UAAU,SAAS,QAAQ,EAAE,EAAE,SAAS,+BAA+B,CAAC,EACnhB,IAAM,EAAQ,gCAAgC,KAAK,CAAQ,EAIrD,EAAU,EAAS,KAAM,EAAQ,EAAI,EAAS,KAAK,GAAG,IAAU,EAAI,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,CAAG,CAAC,EAAE,GAAG,EAAE,IAAU,EAAI,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,CAAG,CAAC,EAAE,GAAG,EAAE,IAClK,EAAW,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,aAAa,EAAO,OAAO,GAAG,EAAY,WAAW,IAAc,UAAU,aAAa,cAAc,MAAM,EAAQ,EAAW,EAAU,CAAC,SAAS,WAAW,IAAI,MAAM,KAAK,MAAM,MAAM,iBAAiB,EAAI,cAAc,EAAI,GAAG,OAAO,iBAAiB,EAAI,cAAc,EAAI,GAAG,SAAS,OAAO,UAAU,gCAAgC,EAAS,MAAgB,YAAU,QAAQ,OAAO,EAAE,CAAC,MAAM,OAAO,OAAO,OAAiB,YAAU,QAAQ,OAAO,EAAE,OAAoB,EAAK,MAAM,CAAC,MAAM,EAAW,SAAS,EAAqB,EAAK,QAAQ,CAAC,IAAI,EAAS,MAAM,EAAW,SAAS,EAAc,OAAK,MAAM,EAAS,GAAK,EAAe,WAAS,YAAY,EAAI,CAAC,EAAe,EAAK,MAAM,CAAC,IAAI,EAAS,IAAI,GAAS,GAAG,MAAM,CAAU,CAAC,CAAC,CAAC,CAAE,iBArB/wB,IAAoD,EAqB4tB,EAAoB,EAAa,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,YAAY,qCAAqC,aAAa,EAAE,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,YAAY,oBAAoB,aAAa,EAAE,EAAE,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,MAAM,QAAQ,CAAC,QAAQ,UAAU,MAAM,EAAE,aAAa,CAAC,QAAQ,UAAU,MAAM,EAAE,aAAa,OAAO,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAE,IAAI,KAAK,IAAI,IAAI,KAAK,EAAE,KAAK,GAAM,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,SAAS,EAAE,SAAS,CAAC,KAAK,EAAY,QAAQ,MAAM,mBAAmB,aAAa,EAAI,EAAE,KAAK,CAAC,KAAK,EAAY,QAAQ,MAAM,eAAe,aAAa,EAAI,EAAE,MAAM,CAAC,KAAK,EAAY,QAAQ,MAAM,gBAAgB,aAAa,EAAI,EAAE,SAAS,CAAC,KAAK,EAAY,QAAQ,MAAM,wBAAwB,aAAa,EAAK,CAAC,CAAC"}