{"version":3,"file":"NativeClickToPlayVideo.DhECO2L3.mjs","names":["useState","useRef","useMemo","useCallback"],"sources":["https:/framerusercontent.com/modules/l4rF2ue0BJwdpp1ew7uN/Ly2ngYsFQynYnxJACem7/NativeClickToPlayVideo.js"],"sourcesContent":["// User request: Create a new Framer code component named NativeClickToPlayVideo with a native HTML video, editable cover overlay, gesture-based unmuted play, and cover hide only after successful playback.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useCallback,useMemo,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function NativeClickToPlayVideo(props){const{videoFile=\"https://framerusercontent.com/assets/MLWPbW1dUQawJLhhun3dBwpgJak.mp4\",videoUrl,coverImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1 - Blue\"},objectFit,showControls,loop,cornerRadius,backgroundColor,playButtonColor}=props;const isStatic=useIsStaticRenderer();const[isCoverVisible,setIsCoverVisible]=useState(true);const videoRef=useRef(null);const source=useMemo(()=>{const file=(videoFile??\"\").trim();if(file)return file;return(videoUrl??\"\").trim();},[videoFile,videoUrl]);const forceAudioOn=useCallback(video=>{video.muted=false;video.defaultMuted=false;video.volume=1;video.playsInline=true;video.removeAttribute(\"muted\");video.removeAttribute(\"autoplay\");},[]);const handleGesturePlay=useCallback(async()=>{if(isStatic)return;if(typeof document===\"undefined\")return;const video=videoRef.current;if(!video)return;try{forceAudioOn(video);await video.play();forceAudioOn(video);startTransition(()=>{setIsCoverVisible(false);});}catch(_error){// Keep cover visible so the user can try again.\n}},[forceAudioOn,isStatic]);const coverStyle=useMemo(()=>({position:\"absolute\",inset:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",cursor:\"pointer\",opacity:isCoverVisible?1:0,pointerEvents:isCoverVisible?\"auto\":\"none\",transition:\"opacity 0.25s ease\",overflow:\"hidden\",borderRadius:cornerRadius}),[cornerRadius,isCoverVisible]);return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",background:backgroundColor,borderRadius:cornerRadius,overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:source,controls:showControls,loop:loop,playsInline:true,muted:false,autoPlay:false,preload:\"metadata\",style:{width:\"100%\",height:\"100%\",objectFit,display:\"block\",background:backgroundColor}}),/*#__PURE__*/_jsxs(\"div\",{role:\"button\",\"aria-label\":\"Play video\",tabIndex:0,style:coverStyle,onPointerDown:handleGesturePlay,onClick:handleGesturePlay,onTouchStart:handleGesturePlay,children:[coverImage?.src?/*#__PURE__*/_jsx(\"img\",{...coverImage,alt:coverImage.alt??\"Video cover image\",style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit}}):null,/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":true,style:{position:\"relative\",width:0,height:0,borderTop:\"12px solid transparent\",borderBottom:\"12px solid transparent\",borderLeft:`18px solid ${playButtonColor}`,transform:\"translateX(-6px)\",pointerEvents:\"none\"}})]})]});}addPropertyControls(NativeClickToPlayVideo,{videoFile:{type:ControlType.File,title:\"Video File\",allowedFileTypes:[\"mp4\",\"webm\",\"mov\"]},videoUrl:{type:ControlType.String,title:\"Video URL\",defaultValue:\"\",placeholder:\"https://...\"},coverImage:{type:ControlType.ResponsiveImage,title:\"Cover Image\"},objectFit:{type:ControlType.Enum,title:\"Fit\",options:[\"cover\",\"contain\",\"fill\"],optionTitles:[\"Cover\",\"Contain\",\"Fill\"],defaultValue:\"cover\"},showControls:{type:ControlType.Boolean,title:\"Controls\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},cornerRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:16,min:0,max:80,step:1,unit:\"px\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"rgba(0,0,0,0)\"},playButtonColor:{type:ControlType.Color,title:\"Play Color\",defaultValue:\"#FFFFFF\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"NativeClickToPlayVideo\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./NativeClickToPlayVideo.map"],"mappings":"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"}