{"version":3,"file":"TransparentVideo.C3TPalPr.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/tSmTZgU9e2tCUDij5mCI/rfkoQ286nXjgFuQ0oDZY/TransparentVideo.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useEffect}from\"react\";/**\n * Transparent Video (WebM + HEVC alpha)\n *\n * Source is chosen per-browser, NOT by <source> order, because modern\n * Safari plays WebM but ignores its alpha (renders opaque). So:\n *   - Safari / any iOS browser (all WebKit) -> HEVC mp4 (hvc1)\n *   - Everyone else (Chrome, Firefox, Edge...) -> WebM (reliable VP9 alpha)\n *\n * @framerDisableUnlink\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function TransparentVideo(props){const{webmFile,mp4File,poster,fit,style}=props;const[src,setSrc]=useState(null);useEffect(()=>{const ua=navigator.userAgent;const isIOS=/iphone|ipad|ipod/i.test(ua)||// iPadOS 13+ reports as Mac but has a touch screen\nnavigator.platform===\"MacIntel\"&&navigator.maxTouchPoints>1;const isMacSafari=/safari/i.test(ua)&&!/chrome|chromium|crios|fxios|android|edg|opr/i.test(ua);const useHEVC=isIOS||isMacSafari;// Fall back to the other file if the preferred one is empty\nconst chosen=useHEVC?mp4File||webmFile:webmFile||mp4File;setSrc(chosen||null);},[webmFile,mp4File]);const videoStyle={width:\"100%\",height:\"100%\",objectFit:fit,display:\"block\",...style};// Before we know the browser, show the poster (or nothing) instead of\n// loading a source. This prevents Safari from grabbing the webm.\nif(!src){return poster?/*#__PURE__*/_jsx(\"img\",{src:poster,alt:\"\",style:videoStyle}):/*#__PURE__*/_jsx(\"div\",{style:videoStyle});}return /*#__PURE__*/_jsx(\"video\",{src:src,style:videoStyle,poster:poster||undefined,autoPlay:true,loop:true,muted:true,playsInline:true,preload:\"auto\"},src);}TransparentVideo.defaultProps={webmFile:\"\",mp4File:\"\",poster:\"\",fit:\"contain\"};addPropertyControls(TransparentVideo,{webmFile:{type:ControlType.File,title:\"WebM\",allowedFileTypes:[\"webm\"]},mp4File:{type:ControlType.File,title:\"MP4 (HEVC)\",allowedFileTypes:[\"mp4\",\"mov\"]},poster:{type:ControlType.File,title:\"Poster\",allowedFileTypes:[\"png\",\"jpg\",\"jpeg\",\"webp\"]},fit:{type:ControlType.Enum,title:\"Fit\",options:[\"contain\",\"cover\",\"fill\"],optionTitles:[\"Contain\",\"Cover\",\"Fill\"],defaultValue:\"contain\",displaySegmentedControl:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TransparentVideo\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"* @framerSupportedLayoutWidth any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TransparentVideo.map"],"mappings":"2LAWG,SAAwB,EAAiB,EAAM,CAAC,GAAK,CAAC,WAAS,UAAQ,SAAO,MAAI,SAAO,EAAW,CAAC,EAAI,GAAQA,EAAS,KAAK,CAAC,MAAc,CAAC,IAAM,EAAG,EAAU,UAAgB,EAAM,oBAAoB,KAAK,EAAG,EACvN,EAAU,WAAW,YAAY,EAAU,eAAe,EAAQ,EAAY,UAAU,KAAK,EAAG,EAAE,CAAC,+CAA+C,KAAK,EAAG,CACjG,GADgH,GAAO,EAC3J,GAAS,EAAS,GAAU,IAAuB,KAAK,EAAG,CAAC,EAAS,EAAQ,CAAC,CAAC,IAAM,EAAW,CAAC,MAAM,OAAO,OAAO,OAAO,UAAU,EAAI,QAAQ,QAAQ,GAAG,EAAM,CAEtD,OAA9H,EAAkJ,EAAK,QAAQ,CAAK,MAAI,MAAM,EAAW,OAAO,GAAQ,IAAA,GAAU,SAAS,GAAK,KAAK,GAAK,MAAM,GAAK,YAAY,GAAK,QAAQ,OAAO,CAAC,EAAI,CAA9Q,EAAoB,EAAK,MAAM,CAAC,IAAI,EAAO,IAAI,GAAG,MAAM,EAAW,CAAC,CAAc,EAAK,MAAM,CAAC,MAAM,EAAW,CAAC,sBAfrF,IAAoD,IAAsC,CAe2J,EAAiB,aAAa,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,UAAU,CAAC,EAAoB,EAAiB,CAAC,SAAS,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,iBAAiB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,EAAY,KAAK,MAAM,aAAa,iBAAiB,CAAC,MAAM,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,EAAY,KAAK,MAAM,SAAS,iBAAiB,CAAC,MAAM,MAAM,OAAO,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,EAAY,KAAK,MAAM,MAAM,QAAQ,CAAC,UAAU,QAAQ,OAAO,CAAC,aAAa,CAAC,UAAU,QAAQ,OAAO,CAAC,aAAa,UAAU,wBAAwB,GAAK,CAAC,CAAC"}