{"version":3,"file":"FullScreenButton.DA4I0OT5.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/qmZJG24QfWORgyYAQ6Qe/h4smvTYURLj6BwP4v8I8/FullScreenButton.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useState,useRef}from\"react\";import{addPropertyControls,ControlType,Frame}from\"framer\";export default function FullScreenButton(props){const buttonRef=useRef(null);const[showButton,setShowButton]=useState(true)// Estado para mostrar u ocultar el botón\n;useEffect(()=>{const videoElement=document.querySelector(\"video\");if(!videoElement){console.warn(\"No se encontr\\xf3 el video en la p\\xe1gina.\");return;}const handleFullScreen1=()=>{if(videoElement.requestFullscreen){videoElement.requestFullscreen();}else if(videoElement.webkitRequestFullscreen){// Safari Desktop\nvideoElement.webkitRequestFullscreen();}else if(videoElement.webkitEnterFullscreen){// Safari en iOS\nvideoElement.webkitEnterFullscreen();}else if(videoElement.mozRequestFullScreen){// Firefox\nvideoElement.mozRequestFullScreen();}else if(videoElement.msRequestFullscreen){// Internet Explorer\nvideoElement.msRequestFullscreen();}else{console.warn(\"Fullscreen API no soportada en este navegador.\");}};// 🔹 Asegurar que el video SIEMPRE tenga controles activos en Safari\nvideoElement.setAttribute(\"controls\",\"true\");// 🔹 Mostrar el botón cuando el usuario interactúa con la pantalla\nconst showControls=()=>setShowButton(true);const hideControls=()=>setShowButton(false);videoElement.addEventListener(\"mousemove\",showControls)// Mostrar al mover el mouse\n;videoElement.addEventListener(\"touchstart\",showControls)// Mostrar al tocar la pantalla en móvil\n;videoElement.addEventListener(\"mouseleave\",hideControls)// Ocultar si el cursor sale del video\n;videoElement.addEventListener(\"ended\",showControls)// Mostrar el botón si el video termina\n;return()=>{videoElement.removeEventListener(\"mousemove\",showControls);videoElement.removeEventListener(\"touchstart\",showControls);videoElement.removeEventListener(\"mouseleave\",hideControls);videoElement.removeEventListener(\"ended\",showControls);};},[]);return /*#__PURE__*/_jsx(Frame,{ref:buttonRef,width:150,height:50,background:\"rgba(0,0,0,0.5)\",borderRadius:8,style:{display:showButton?\"flex\":\"none\",alignItems:\"center\",justifyContent:\"center\",fontSize:\"18px\",fontWeight:\"bold\",color:\"white\",cursor:\"pointer\",transition:\"opacity 0.3s ease\"},onClick:()=>{const videoElement=document.querySelector(\"video\");if(videoElement){handleFullScreen();}},children:props.buttonText||\"⛶ Full Screen\"});}// 🔹 Agregamos controles para que Framer lo reconozca en el editor\naddPropertyControls(FullScreenButton,{buttonText:{type:ControlType.String,title:\"Button Text\",defaultValue:\"⛶ Full Screen\"},buttonColor:{type:ControlType.Color,title:\"Button Color\",defaultValue:\"black\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FullScreenButton\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FullScreenButton.map"],"mappings":"6RAAkJ,SAAwB,EAAiB,EAAM,CAAC,IAAM,EAAUA,EAAO,MAAW,CAAC,EAAW,EAAc,CAACC,EAAS,IAWV,OAV7P,MAAc,CAAC,IAAM,EAAa,SAAS,cAAc,SAAS,GAAG,CAAC,EAAa,CAAC,QAAQ,KAAK,yCAA+C,MAAQ,CAKzJ,EAAa,aAAa,WAAW,QACrC,IAAM,MAAiB,EAAc,IAAY,MAAiB,EAAc,IAI/E,OAJsF,EAAa,iBAAiB,YAAY,GAChI,EAAa,iBAAiB,aAAa,GAC3C,EAAa,iBAAiB,aAAa,GAC3C,EAAa,iBAAiB,QAAQ,OAC5B,CAAC,EAAa,oBAAoB,YAAY,GAAc,EAAa,oBAAoB,aAAa,GAAc,EAAa,oBAAoB,aAAa,GAAc,EAAa,oBAAoB,QAAQ,EAAe,CAAE,EAAC,EAAE,EAAsB,EAAK,EAAM,CAAC,IAAI,EAAU,MAAM,IAAI,OAAO,GAAG,WAAW,kBAAkB,aAAa,EAAE,MAAM,CAAC,QAAQ,EAAW,OAAO,OAAO,WAAW,SAAS,eAAe,SAAS,SAAS,OAAO,WAAW,OAAO,MAAM,QAAQ,OAAO,UAAU,WAAW,oBAAoB,CAAC,YAAY,CAAC,IAAM,EAAa,SAAS,cAAc,SAAY,GAAc,kBAAqB,EAAC,SAAS,EAAM,YAAY,gBAAgB,CAAG,2BACtrB,EAAoB,EAAiB,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,gBAAgB,CAAC,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,QAAQ,CAAC"}