{"version":3,"file":"VideoInView.CsXCSsat.mjs","names":["useRef","__esmMin","p","c","init_jsx_runtime","ce","init_npm_react_18_3_1","de","useInView","init_framer_motion_DhsWWWsN","init_framer_D6uXRwWs","addPropertyControls","useIsStaticRenderer","ControlType","VideoInView","props","containerRef","videoRef","isStatic","inView","threshold","video","volume","replay","startTime","played","file","aspectRatio","radius","fit","borderWidth","borderColor","init_VideoInView"],"sources":["https:/framerusercontent.com/modules/rEtPTbEtmCAIRn9ghqY8/KRyccqwglyn6yNgfPRgB/VideoInView.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useEffect,useRef}from\"react\";import{useInView}from\"framer-motion\";/**\n * Video In View\n *\n * Plays the video when it scrolls into the viewport and pauses when it leaves.\n * Threshold controls how much of the video must be visible before playing\n * (0.5 = the video's centre line reaches the viewport).\n *\n * @framerIntrinsicWidth 320\n * @framerIntrinsicHeight 568\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function VideoInView(props){const{file=\"https://framerusercontent.com/assets/MLWPbW1dUQawJLhhun3dBwpgJak.mp4\",threshold=.5,loop=true,muted=true,volume=25,fit=\"cover\",radius=\"0px\",background=\"rgba(0,0,0,0)\",startTime=0,replay=false,aspectRatio=0,borderWidth=0,borderColor=\"#EEEEEF\"}=props;const containerRef=useRef(null);const videoRef=useRef(null);const isStatic=useIsStaticRenderer();const inView=useInView(containerRef,{amount:threshold});useEffect(()=>{if(isStatic)return;const video=videoRef.current;if(!video)return;video.volume=Math.min(1,Math.max(0,volume/100));if(inView){if(replay)video.currentTime=startTime;const played=video.play();if(played&&typeof played.catch===\"function\"){played.catch(()=>{});}}else{video.pause();}},[inView,isStatic,volume,replay,startTime]);useEffect(()=>{const video=videoRef.current;if(!video||!startTime)return;video.currentTime=startTime;},[startTime,file]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{...props.style,position:\"relative\",overflow:\"hidden\",...aspectRatio>0?{aspectRatio:String(aspectRatio)}:{},borderRadius:radius,background},children:[/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:file,loop:loop,muted:muted,playsInline:true,preload:\"metadata\",style:{width:\"100%\",height:\"100%\",objectFit:fit,display:\"block\"}}),borderWidth>0&&/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",inset:0,boxSizing:\"border-box\",border:`${borderWidth}px solid ${borderColor}`,borderRadius:radius,pointerEvents:\"none\"}})]});}addPropertyControls(VideoInView,{borderWidth:{type:ControlType.Number,title:\"Border\",defaultValue:0,min:0,max:20,step:1,unit:\"px\",description:\"Inside border drawn on top of the video.\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#EEEEEF\",hidden:props=>!props.borderWidth},aspectRatio:{type:ControlType.Number,title:\"Aspect Ratio\",defaultValue:0,min:0,max:4,step:.01,description:\"Width / height (e.g. 1.72 for 16:9.3). 0 = use the layout height.\"},file:{type:ControlType.File,title:\"Video\",allowedFileTypes:[\"mp4\",\"webm\",\"mov\"]},threshold:{type:ControlType.Number,title:\"Play At\",defaultValue:.5,min:0,max:1,step:.05,description:\"How much of the video must be visible before it plays. 0.5 = centre line.\"},replay:{type:ControlType.Boolean,title:\"Replay\",defaultValue:false,description:\"Restart from the beginning each time it enters view.\"},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:true},muted:{type:ControlType.Boolean,title:\"Muted\",defaultValue:true},volume:{type:ControlType.Number,title:\"Volume\",defaultValue:25,min:0,max:100,step:1,hidden:props=>props.muted!==false},fit:{type:ControlType.Enum,title:\"Fit\",defaultValue:\"cover\",options:[\"cover\",\"contain\",\"fill\"],optionTitles:[\"Cover\",\"Contain\",\"Fill\"]},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"0px\"},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"rgba(0,0,0,0)\"},startTime:{type:ControlType.Number,title:\"Start At\",defaultValue:0,min:0,max:600,step:.5,unit:\"s\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"VideoInView\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"568\",\"framerIntrinsicWidth\":\"320\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./VideoInView.map"],"mappings":"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"}