{"version":3,"file":"FAVideoModal.DoLS5NJm.mjs","names":["useState","useRef","_Fragment"],"sources":["https:/framerusercontent.com/modules/H3tRmWz33wuGS06iPj2o/P0yWfgZxyrSdSZQgkSj1/FAVideoModal.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{createPortal,flushSync}from\"react-dom\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";// Transparent click layer: place it absolutely over a card (top/right/bottom/left 0).\n// Click opens the video in a full-screen modal (sound on, controls). Esc / backdrop / × closes.\n// Accepts an MP4 (or any file URL), a YouTube link, or a Vimeo link.\n// \"Play button\" shows a centered round play button on top of the layer (for bare video previews).\n// \"Thumbnail\" paints an image (with an optional dark gradient for text contrast) under the play button.\n// Sound on mobile: browsers only allow audible playback that starts from a tap. MP4s are started from the\n// tap itself (sound on). Vimeo/YouTube can't receive the tap across the iframe, so on touch devices they\n// open without autoplay and start with sound when the viewer taps play in the player.\nconst CSS=`\n.fvm-hit{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center}\n.fvm-hit:focus-visible{outline:2px solid #e8d199;outline-offset:-2px;border-radius:inherit}\n.fvm-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}\n.fvm-shade{position:absolute;inset:0;pointer-events:none}\n.fvm-play{position:relative;width:72px;height:72px;border-radius:999px;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 12px 32px -10px rgba(16,14,13,.45);transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s;pointer-events:none}\n.fvm-play svg{width:24px;height:24px;margin-left:4px;fill:#100e0d}\n.fvm-hit:hover .fvm-play{transform:scale(1.08);background:#fff}\n@media (max-width:640px){.fvm-play{width:56px;height:56px}.fvm-play svg{width:20px;height:20px}}\n.fvm-ov{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:56px 24px;background:rgba(16,14,13,.94);animation:fvm-in .25s ease}\n@keyframes fvm-in{from{opacity:0}to{opacity:1}}\n.fvm-box{position:relative;width:min(100%, calc((100vh - 112px) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:fvm-up .3s cubic-bezier(.2,.7,.2,1)}\n@keyframes fvm-up{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}\n.fvm-box video,.fvm-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}\n.fvm-x{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:44px;text-align:center;cursor:pointer;transition:background .2s}\n.fvm-x:hover{background:rgba(255,255,255,.24)}\n@media (max-width:640px){.fvm-ov{padding:64px 0}.fvm-box{border-radius:0;width:100%}}\n`;function embed(url,autoplay){const u=String(url||\"\").trim();const ap=autoplay?\"1\":\"0\";let m=u.match(/(?:youtube\\.com\\/(?:watch\\?v=|embed\\/|shorts\\/)|youtu\\.be\\/)([\\w-]{6,})/);if(m)return{kind:\"iframe\",src:`https://www.youtube.com/embed/${m[1]}?autoplay=${ap}&rel=0&modestbranding=1&playsinline=1`};m=u.match(/vimeo\\.com\\/(?:video\\/)?(\\d+)(?:\\/(\\w+))?/);if(m)return{kind:\"iframe\",src:`https://player.vimeo.com/video/${m[1]}?autoplay=${ap}&muted=0&playsinline=1${m[2]?\"&h=\"+m[2]:\"\"}`};return{kind:\"video\",src:u};}function isTouchDevice(){if(typeof window===\"undefined\"||!window.matchMedia)return false;return window.matchMedia(\"(hover: none) and (pointer: coarse)\").matches;}export default function FAVideoModal(props){const{videoUrl,label,showPlay,thumbnail,thumbPosition,shade,style}=props;const[open,setOpen]=useState(false);const[touch,setTouch]=useState(false);const videoRef=useRef(null);const onCanvas=RenderTarget.current()===RenderTarget.canvas;useEffect(()=>{if(typeof document!==\"undefined\"&&!document.getElementById(\"fvm-css-v4\")){const s=document.createElement(\"style\");s.id=\"fvm-css-v4\";s.textContent=CSS;document.head.appendChild(s);}},[]);useEffect(()=>{if(!open)return;const onKey=e=>{if(e.key===\"Escape\")setOpen(false);};const prev=document.body.style.overflow;document.body.style.overflow=\"hidden\";window.addEventListener(\"keydown\",onKey);return()=>{document.body.style.overflow=prev;window.removeEventListener(\"keydown\",onKey);};},[open]);const has=!!String(videoUrl||\"\").trim();const v=embed(videoUrl,!touch);const thumbSrc=thumbnail?.src||\"\";const s=Math.max(0,Math.min(100,Number(shade)||0))/100;const onOpen=()=>{if(!has||onCanvas)return;// Mount the modal synchronously so an MP4 can be started inside the tap (keeps sound on mobile).\nflushSync(()=>{setTouch(isTouchDevice());setOpen(true);});const el=videoRef.current;if(el){el.muted=false;el.play().catch(()=>{});}};return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",borderRadius:\"inherit\",...style},children:[/*#__PURE__*/_jsx(\"style\",{children:onCanvas?CSS:\"\"}),thumbSrc?/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"img\",{className:\"fvm-thumb\",src:thumbSrc,srcSet:thumbnail?.srcSet,alt:thumbnail?.alt||\"\",style:{objectPosition:thumbPosition||\"center\"}}),s>0?/*#__PURE__*/_jsx(\"div\",{className:\"fvm-shade\",style:{background:`linear-gradient(90deg, rgba(0,0,0,${s}) 0%, rgba(0,0,0,${(s*.55).toFixed(3)}) 45%, rgba(0,0,0,0) 80%)`}}):null]}):null,/*#__PURE__*/_jsx(\"button\",{className:\"fvm-hit\",\"aria-label\":label||\"Play video\",style:{cursor:has?\"pointer\":\"default\"},onClick:onOpen,children:showPlay?/*#__PURE__*/_jsx(\"span\",{className:\"fvm-play\",\"aria-hidden\":\"true\",children:/*#__PURE__*/_jsx(\"svg\",{viewBox:\"0 0 24 24\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M7 4.5v15a1 1 0 0 0 1.52.85l12-7.5a1 1 0 0 0 0-1.7l-12-7.5A1 1 0 0 0 7 4.5z\"})})}):null}),open&&typeof document!==\"undefined\"?/*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(\"div\",{className:\"fvm-ov\",role:\"dialog\",\"aria-modal\":\"true\",\"aria-label\":label||\"Video\",onClick:()=>setOpen(false),children:[/*#__PURE__*/_jsx(\"button\",{className:\"fvm-x\",\"aria-label\":\"Close\",onClick:()=>setOpen(false),children:\"\\xd7\"}),/*#__PURE__*/_jsx(\"div\",{className:\"fvm-box\",onClick:e=>e.stopPropagation(),children:v.kind===\"iframe\"?/*#__PURE__*/_jsx(\"iframe\",{src:v.src,allow:\"autoplay; fullscreen; picture-in-picture\",allowFullScreen:true,title:label||\"Video\"}):/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:v.src,poster:thumbSrc||undefined,controls:true,autoPlay:!touch,playsInline:true})})]}),document.body):null]});}FAVideoModal.defaultProps={videoUrl:\"\",label:\"Play video\",showPlay:false,thumbPosition:\"center\",shade:70};addPropertyControls(FAVideoModal,{videoUrl:{type:ControlType.String,title:\"Video URL\",placeholder:\"MP4, YouTube or Vimeo link\",defaultValue:\"\"},label:{type:ControlType.String,title:\"Label (a11y)\",defaultValue:\"Play video\"},showPlay:{type:ControlType.Boolean,title:\"Play button\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},thumbnail:{type:ControlType.ResponsiveImage,title:\"Thumbnail\"},thumbPosition:{type:ControlType.Enum,title:\"Focus\",options:[\"center\",\"left center\",\"right center\",\"60% center\",\"top center\",\"bottom center\"],optionTitles:[\"Center\",\"Left\",\"Right\",\"Center-right\",\"Top\",\"Bottom\"],defaultValue:\"center\",hidden:p=>!p.thumbnail},shade:{type:ControlType.Number,title:\"Shade\",min:0,max:100,step:5,unit:\"%\",defaultValue:70,hidden:p=>!p.thumbnail}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FAVideoModal\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FAVideoModal.map"],"mappings":"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"}