{"version":3,"file":"ScrollControlledVideo.C044fFQc.mjs","names":["React.useRef","React.useState","React.useCallback"],"sources":["https:/framerusercontent.com/modules/8mlNN35YMgkZFlfnNZB8/i2ecwc2tjyoSI6Ss2VPF/ScrollControlledVideo.js"],"sourcesContent":["// Created by 584.studio\nimport{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";export default function ScrollControlledVideo(props){const{sourceType,videoFile,videoUrl,scrollSpeed,startAt,endAt,backgroundColor}=props;const isStaticRenderer=useIsStaticRenderer();const containerRef=React.useRef(null);const videoRef=React.useRef(null);const durationRef=React.useRef(0);const frameRef=React.useRef(null);const[autoHeight,setAutoHeight]=React.useState(\"100vh\");const videoSource=sourceType===\"file\"?videoFile:videoUrl;const clamp=(value,min,max)=>{return Math.min(Math.max(value,min),max);};const updateHeight=React.useCallback(()=>{if(isStaticRenderer||typeof window===\"undefined\")return;const duration=durationRef.current;if(!duration||duration<=0){setAutoHeight(\"100vh\");return;}const viewportHeight=window.innerHeight||0;const scrollDistance=duration*scrollSpeed;const calculatedHeight=viewportHeight+scrollDistance;setAutoHeight(`${calculatedHeight}px`);},[isStaticRenderer,scrollSpeed]);const updateVideoTime=React.useCallback(()=>{if(isStaticRenderer||typeof window===\"undefined\")return;const container=containerRef.current;const video=videoRef.current;if(!container||!video||!durationRef.current)return;const rect=container.getBoundingClientRect();const viewportHeight=window.innerHeight;const scrollableDistance=rect.height-viewportHeight;if(scrollableDistance<=0)return;const rawProgress=-rect.top/scrollableDistance;const progress=clamp(rawProgress,0,1);const startTime=durationRef.current*startAt/100;const endTime=durationRef.current*endAt/100;const targetTime=startTime+(endTime-startTime)*progress;if(Math.abs(video.currentTime-targetTime)>.03){video.currentTime=targetTime;}},[isStaticRenderer,startAt,endAt]);React.useEffect(()=>{if(isStaticRenderer||typeof window===\"undefined\")return;const video=videoRef.current;if(!video)return;durationRef.current=0;setAutoHeight(\"100vh\");const handleLoadedMetadata=()=>{durationRef.current=video.duration||0;updateHeight();updateVideoTime();};const handleResize=()=>{updateHeight();updateVideoTime();};const runFrame=()=>{updateVideoTime();frameRef.current=requestAnimationFrame(runFrame);};video.addEventListener(\"loadedmetadata\",handleLoadedMetadata);window.addEventListener(\"resize\",handleResize);frameRef.current=requestAnimationFrame(runFrame);return()=>{video.removeEventListener(\"loadedmetadata\",handleLoadedMetadata);window.removeEventListener(\"resize\",handleResize);if(frameRef.current){cancelAnimationFrame(frameRef.current);frameRef.current=null;}};},[isStaticRenderer,videoSource,updateHeight,updateVideoTime]);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100vw\",height:autoHeight,position:\"relative\",left:\"50%\",right:\"50%\",marginLeft:\"-50vw\",marginRight:\"-50vw\",backgroundColor,overflow:\"visible\"},children:/*#__PURE__*/_jsx(\"div\",{style:{position:\"sticky\",top:0,width:\"100vw\",height:\"100vh\",overflow:\"hidden\",backgroundColor},children:videoSource?/*#__PURE__*/_jsx(\"video\",{ref:isStaticRenderer?undefined:videoRef,src:videoSource,muted:true,playsInline:true,preload:isStaticRenderer?\"metadata\":\"auto\",controls:false,crossOrigin:\"anonymous\",style:{width:\"100vw\",height:\"100vh\",display:\"block\",objectFit:\"cover\",objectPosition:\"center center\"}}):/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100vh\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",fontFamily:\"Inter, sans-serif\",fontSize:14,opacity:.5,color:\"#ffffff\"},children:\"Add a video file or URL\"})})});}ScrollControlledVideo.defaultProps={sourceType:\"file\",videoFile:\"\",videoUrl:\"\",scrollSpeed:500,startAt:0,endAt:100,backgroundColor:\"#000000\"};addPropertyControls(ScrollControlledVideo,{sourceType:{type:ControlType.Enum,title:\"Source\",options:[\"file\",\"url\"],optionTitles:[\"File\",\"URL\"]},videoFile:{type:ControlType.File,title:\"Video File\",allowedFileTypes:[\"mp4\",\"webm\",\"mov\"],hidden:props=>props.sourceType!==\"file\"},videoUrl:{type:ControlType.String,title:\"Video URL\",placeholder:\"https://example.com/video.mp4\",hidden:props=>props.sourceType!==\"url\"},scrollSpeed:{type:ControlType.Number,title:\"Speed\",min:100,max:1500,step:50,defaultValue:500},startAt:{type:ControlType.Number,title:\"Start %\",min:0,max:100,step:1,defaultValue:0},endAt:{type:ControlType.Number,title:\"End %\",min:0,max:100,step:1,defaultValue:100},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollControlledVideo\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollControlledVideo.map"],"mappings":"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"}