{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/Jb5WDHVEOsn4CW5IIpM1/9lO1tY8ImiUvqNS9GTEk/Video.js"],
  "sourcesContent": ["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/docs/guides/\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useCallback,useEffect,useRef,useState}from\"react\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/docs/guides/auto-sizing\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function Video(props){// This is a React component containing an Example component\n// - Replace <Example /> with your own code\n// - Find inspiration: https://www.framer.com/developers/\nconst[loop,setLoop]=useState(true);const video=useRef(null);const videoLoopStart=4;const loopRef=useRef(loop);// Keep the ref updated whenever loop changes.\nuseEffect(()=>{loopRef.current=loop;},[loop]);const onTimeUpdate=useCallback(e=>{if(loopRef.current){if(e.currentTarget.currentTime==e.currentTarget.duration){e.currentTarget.currentTime=videoLoopStart;e.currentTarget.play();}}},[loop]);return(// <div style={containerStyle}>\n/*#__PURE__*/_jsxs(\"video\",{ref:video,width:\"600\",height:\"600\",muted:true,autoPlay:true,playsInline:true,preload:\"auto\",onTimeUpdate:onTimeUpdate,children:[/*#__PURE__*/_jsx(\"source\",{src:\"https://keel-website-assets.s3.eu-west-2.amazonaws.com/hevc-1200.mov\",type:'video/mp4; codecs=\"hvc1\"'}),/*#__PURE__*/_jsx(\"source\",{src:\"https://keel-website-assets.s3.eu-west-2.amazonaws.com/blocks-1200.webm\",type:\"video/webm\"})]}));}// Styles are written in object syntax\n// Learn more: https://reactjs.org/docs/dom-elements.html#style\nconst containerStyle={height:\"100%\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\"};\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Video\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Video.map"],
  "mappings": "4EAQkB,SAARA,EAAuBC,EAAM,CAGvC,GAAK,CAACC,EAAKC,CAAO,EAAEC,EAAS,EAAI,EAAQC,EAAMC,EAAO,IAAI,EAAQC,EAAe,EAAQC,EAAQF,EAAOJ,CAAI,EAC5GO,EAAU,IAAI,CAACD,EAAQ,QAAQN,CAAK,EAAE,CAACA,CAAI,CAAC,EAAE,IAAMQ,EAAaC,EAAYC,GAAG,CAAIJ,EAAQ,SAAYI,EAAE,cAAc,aAAaA,EAAE,cAAc,WAAUA,EAAE,cAAc,YAAYL,EAAeK,EAAE,cAAc,KAAK,EAAI,EAAE,CAACV,CAAI,CAAC,EAAE,OAChOW,EAAM,QAAQ,CAAC,IAAIR,EAAM,MAAM,MAAM,OAAO,MAAM,MAAM,GAAK,SAAS,GAAK,YAAY,GAAK,QAAQ,OAAO,aAAaK,EAAa,SAAS,CAAcI,EAAK,SAAS,CAAC,IAAI,uEAAuE,KAAK,0BAA0B,CAAC,EAAeA,EAAK,SAAS,CAAC,IAAI,0EAA0E,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,CAAG",
  "names": ["Video", "props", "loop", "setLoop", "ye", "video", "pe", "videoLoopStart", "loopRef", "ue", "onTimeUpdate", "te", "e", "u", "p"]
}