{"version":3,"file":"VideoRestartOnClick.bb4ReDZW.mjs","names":["React.useRef","React.useCallback","p"],"sources":["https:/framerusercontent.com/modules/tB2VIb06tcFK0HpQQrau/1I4hzpPnBWWimOEtXffv/VideoRestartOnClick.js"],"sourcesContent":["// Instructions: Create a Framer component that follows the Framer component rules and achieves the user's goal.\n// Goal: create a video component which restart the video on clicking\nimport{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerIntrinsicWidth 640\n * @framerIntrinsicHeight 360\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function VideoRestartOnClick(props){const{videoFile=\"https://framerusercontent.com/assets/MLWPbW1dUQawJLhhun3dBwpgJak.mp4\",muted,loop,showNativeControls,playsInline,restartAlsoPlays,objectFit,backgroundColor,borderRadius,ariaLabel,style}=props;const isStatic=useIsStaticRenderer();const videoRef=React.useRef(null);const onRestart=React.useCallback(async()=>{const el=videoRef.current;if(!el)return;try{el.currentTime=0;if(restartAlsoPlays){const p=el.play();if(p&&typeof p.catch===\"function\")p.catch(()=>{});}}catch{// no-op\n}},[restartAlsoPlays]);const onKeyDown=React.useCallback(e=>{if(e.key===\"Enter\"||e.key===\" \"){e.preventDefault();onRestart();}},[onRestart]);if(isStatic){return /*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",backgroundColor,borderRadius,...style},\"aria-label\":ariaLabel,role:\"img\",children:/*#__PURE__*/_jsx(\"video\",{src:videoFile,muted:true,playsInline:true,preload:\"metadata\",style:{width:\"100%\",height:\"100%\",objectFit,display:\"block\"}})});}return /*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",backgroundColor,borderRadius,cursor:\"pointer\",WebkitTapHighlightColor:\"transparent\",...style},role:\"button\",tabIndex:0,\"aria-label\":ariaLabel,onClick:onRestart,onKeyDown:onKeyDown,children:/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:videoFile,controls:showNativeControls,autoPlay:true,muted:muted,loop:loop,playsInline:playsInline,preload:\"auto\",style:{width:\"100%\",height:\"100%\",objectFit,display:\"block\"}})});}addPropertyControls(VideoRestartOnClick,{videoFile:{type:ControlType.File,title:\"Video\",allowedFileTypes:[\"mp4\",\"webm\",\"mov\"]},muted:{type:ControlType.Boolean,title:\"Muted\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},showNativeControls:{type:ControlType.Boolean,title:\"Native Controls\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},playsInline:{type:ControlType.Boolean,title:\"Plays Inline\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},restartAlsoPlays:{type:ControlType.Boolean,title:\"Restart Plays\",defaultValue:true,enabledTitle:\"Play\",disabledTitle:\"Only seek\"},objectFit:{type:ControlType.Enum,title:\"Fit\",defaultValue:\"contain\",options:[\"contain\",\"fill\",\"none\",\"scale-down\"],optionTitles:[\"Contain\",\"Fill\",\"None\",\"Scale-down\"]},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},borderRadius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"12px\"},ariaLabel:{type:ControlType.String,title:\"ARIA Label\",defaultValue:\"Video. Click to restart.\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"VideoRestartOnClick\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"640\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"360\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./VideoRestartOnClick.map"],"mappings":"yLAQG,SAAwB,EAAoB,EAAM,CAAC,GAAK,CAAC,YAAU,uEAAuE,QAAM,OAAK,qBAAmB,cAAY,mBAAiB,YAAU,kBAAgB,eAAa,YAAU,SAAO,EAAY,EAAS,GAAqB,CAAO,EAASA,EAAa,KAAK,CAAO,EAAUC,EAAkB,SAAS,CAAC,IAAM,EAAG,EAAS,QAAY,KAAU,GAAG,CAAkB,GAAjB,EAAG,YAAY,EAAK,EAAiB,CAAC,IAAMC,EAAE,EAAG,MAAM,CAAIA,GAAG,OAAOA,EAAE,OAAQ,YAAW,EAAE,UAAU,GAAG,OAAQ,IACnhB,CAAC,EAAiB,CAAC,CAAO,EAAUD,EAAkB,GAAG,EAAI,EAAE,MAAM,SAAS,EAAE,MAAM,OAAK,EAAE,gBAAgB,CAAC,GAAW,GAAI,CAAC,EAAU,CAAC,CAAkW,OAA9V,EAA8B,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,kBAAgB,eAAa,GAAG,EAAM,CAAC,aAAa,EAAU,KAAK,MAAM,SAAsB,EAAK,QAAQ,CAAC,IAAI,EAAU,MAAM,GAAK,YAAY,GAAK,QAAQ,WAAW,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,YAAU,QAAQ,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,kBAAgB,eAAa,OAAO,UAAU,wBAAwB,cAAc,GAAG,EAAM,CAAC,KAAK,SAAS,SAAS,EAAE,aAAa,EAAU,QAAQ,EAAoB,YAAU,SAAsB,EAAK,QAAQ,CAAC,IAAI,EAAS,IAAI,EAAU,SAAS,EAAmB,SAAS,GAAW,QAAW,OAAiB,cAAY,QAAQ,OAAO,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,YAAU,QAAQ,QAAQ,CAAC,CAAC,CAAC,CAAC,kBAPr8B,IAA4B,IAAwE,CAOm2B,EAAoB,EAAoB,CAAC,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,QAAQ,iBAAiB,CAAC,MAAM,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,KAAK,EAAY,QAAQ,MAAM,QAAQ,aAAa,GAAK,aAAa,KAAK,cAAc,MAAM,CAAC,KAAK,CAAC,KAAK,EAAY,QAAQ,MAAM,OAAO,aAAa,GAAM,aAAa,KAAK,cAAc,MAAM,CAAC,mBAAmB,CAAC,KAAK,EAAY,QAAQ,MAAM,kBAAkB,aAAa,GAAM,aAAa,OAAO,cAAc,OAAO,CAAC,YAAY,CAAC,KAAK,EAAY,QAAQ,MAAM,eAAe,aAAa,GAAK,aAAa,KAAK,cAAc,MAAM,CAAC,iBAAiB,CAAC,KAAK,EAAY,QAAQ,MAAM,gBAAgB,aAAa,GAAK,aAAa,OAAO,cAAc,YAAY,CAAC,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,MAAM,aAAa,UAAU,QAAQ,CAAC,UAAU,OAAO,OAAO,aAAa,CAAC,aAAa,CAAC,UAAU,OAAO,OAAO,aAAa,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,aAAa,CAAC,KAAK,EAAY,aAAa,MAAM,SAAS,aAAa,OAAO,CAAC,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,aAAa,2BAA2B,CAAC,CAAC"}