{"version":3,"file":"HeroVideoAlt.CtQshcus.mjs","names":["React.useState"],"sources":["https:/framerusercontent.com/modules/Kb1kgT33TI0Ht9DP2NZM/j1DP8f9FwkbDtXlbaYop/HeroVideoAlt.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/* -------------------------------------------------\n   HeroVideo component\n   ------------------------------------------------- */export function HeroVideo({videoUrl,showControls,posterFile}){const[videoID,setVideoID]=React.useState(null);const[origin,setOrigin]=React.useState(\"\");const[showPoster,setShowPoster]=React.useState(true)// true → poster visible\n;/* -------------------------------------------------\n     * 1️⃣  Get the page origin (prevents hydration mismatch)\n     * ------------------------------------------------- */React.useEffect(()=>{setOrigin(window.location.origin);},[]);/* -------------------------------------------------\n     * 2️⃣  Extract YouTube video ID from the supplied URL\n     * ------------------------------------------------- */React.useEffect(()=>{if(!videoUrl)return;try{const parsed=new URL(videoUrl);let id=null;if(parsed.searchParams.get(\"v\")){id=parsed.searchParams.get(\"v\");}else if(parsed.hostname===\"youtu.be\"){id=parsed.pathname.slice(1);}else if(parsed.pathname.includes(\"/shorts/\")){id=parsed.pathname.split(\"/shorts/\")[1];}else if(parsed.pathname.includes(\"/embed/\")){id=parsed.pathname.split(\"/embed/\")[1];}if(id){id=id.split(\"?\")[0].split(\"#\")[0]// strip any extra query/fragment\n;setVideoID(id);}}catch{// invalid URL → keep videoID null (nothing will render)\n}},[videoUrl]);/* -------------------------------------------------\n     * 3️⃣  Nothing to render until we have everything we need\n     * ------------------------------------------------- */if(!videoID||!origin)return null;/* -------------------------------------------------\n     * 4️⃣  Build the YouTube embed URL (identical to your original)\n     * ------------------------------------------------- */const embedUrl=`https://www.youtube.com/embed/${videoID}`+`?autoplay=1`+`&mute=1`+`&controls=${showControls?1:0}`+`&loop=1`+`&playlist=${videoID}`+`&playsinline=1`+`&modestbranding=1`+`&rel=0`+`&enablejsapi=1`+`&origin=${encodeURIComponent(origin)}`;/* -------------------------------------------------\n     * 5️⃣  Merge wrapper styles – add the poster if we have one\n     * ------------------------------------------------- */const wrapperMergedStyle={...wrapperStyle,// When a poster file is supplied **and** we are still in the “showPoster” phase,\n// use it as a CSS background image.\n...posterFile&&showPoster?{backgroundImage:`url(${posterFile})`,backgroundSize:\"cover\",backgroundPosition:\"center\"}:{}};return /*#__PURE__*/_jsx(\"div\",{style:wrapperMergedStyle,children:/*#__PURE__*/_jsx(\"iframe\",{src:embedUrl,style:iframeStyle,frameBorder:\"0\",allow:\"autoplay; fullscreen; picture-in-picture\",allowFullScreen:true,onLoad:()=>setShowPoster(false)},videoID)});}/* -------------------------------------------------\n   Static styles (unchanged from your original version)\n   ------------------------------------------------- */const wrapperStyle={position:\"absolute\",inset:0,overflow:\"hidden\"};/* The iframe keeps the same sizing logic you already had */const iframeStyle={position:\"absolute\",top:\"50%\",left:\"50%\",width:\"177.78vh\",height:\"100vh\",minWidth:\"100%\",minHeight:\"56.25vw\",transform:\"translate(-50%, -50%)\",pointerEvents:\"auto\"};/* -------------------------------------------------\n   Framer property controls (adds the Upload field)\n   ------------------------------------------------- */addPropertyControls(HeroVideo,{videoUrl:{type:ControlType.String,title:\"YouTube URL\",defaultValue:\"\"},showControls:{type:ControlType.Boolean,title:\"Show Controls\",defaultValue:false},/** NEW – lets the designer upload a picture */posterFile:{type:ControlType.Image,title:\"Poster Image\",// If left empty the component works exactly like before.\ndefaultValue:\"\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"HeroVideo\":{\"type\":\"reactComponent\",\"name\":\"HeroVideo\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HeroVideoAlt.map"],"mappings":"gMAEuD,SAAgB,EAAU,CAAC,WAAS,eAAa,cAAY,CAAC,GAAK,CAAC,EAAQ,GAAYA,EAAe,KAAK,CAAM,CAAC,EAAO,GAAWA,EAAe,GAAG,CAAM,CAAC,EAAW,GAAeA,EAAe,GAAK,CASxM,GANA,MAAoB,CAAC,EAAU,EAAO,SAAS,OAAO,EAAG,EAAE,CAAC,CAE5D,MAAoB,CAAK,KAAgB,GAAG,CAAC,IAAM,EAAO,IAAI,IAAI,EAAS,CAAK,EAAG,KAAQ,EAAO,aAAa,IAAI,IAAI,CAAE,EAAG,EAAO,aAAa,IAAI,IAAI,CAAU,EAAO,WAAW,WAAY,EAAG,EAAO,SAAS,MAAM,EAAE,CAAU,EAAO,SAAS,SAAS,WAAW,CAAE,EAAG,EAAO,SAAS,MAAM,WAAW,CAAC,GAAY,EAAO,SAAS,SAAS,UAAU,GAAE,EAAG,EAAO,SAAS,MAAM,UAAU,CAAC,IAAO,IAAI,EAAG,EAAG,MAAM,IAAI,CAAC,GAAG,MAAM,IAAI,CAAC,GACze,EAAW,EAAG,OAAQ,IACpB,CAAC,EAAS,CAAC,CAEgD,CAAC,GAAS,CAAC,EAAO,OAAO,KAE5B,IAAM,EAAS,iCAAiC,EAAA,8BAA+C,EAAa,EAAE,EAAA,mBAA2B,EAAA,6DAAoF,mBAAmB,EAAO,GAI1L,OAAoB,EAAK,MAAM,CAAC,MAFpE,CAAC,GAAG,EAExF,GAAG,GAAY,EAAW,CAAC,gBAAgB,OAAO,EAAW,GAAG,eAAe,QAAQ,mBAAmB,SAAS,CAAC,EAAE,CAAC,CAA0D,SAAsB,EAAK,SAAS,CAAC,IAAI,EAAS,MAAM,EAAY,YAAY,IAAI,MAAM,2CAA2C,gBAAgB,GAAK,WAAW,EAAc,GAAM,CAAC,CAAC,EAAQ,CAAC,CAAC,0BAjB3U,IAA4B,IAAoD,CAmB9D,EAAa,CAAC,SAAS,WAAW,MAAM,EAAE,SAAS,SAAS,CAAmE,EAAY,CAAC,SAAS,WAAW,IAAI,MAAM,KAAK,MAAM,MAAM,WAAW,OAAO,QAAQ,SAAS,OAAO,UAAU,UAAU,UAAU,wBAAwB,cAAc,OAAO,CAEtT,EAAoB,EAAU,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,GAAG,CAAC,aAAa,CAAC,KAAK,EAAY,QAAQ,MAAM,gBAAgB,aAAa,GAAM,CAAgD,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,eACtU,aAAa,GAAG,CAAC,CAAC"}