{"version":3,"file":"InViewVideo.CQGApuKt.mjs","names":["React.useRef","React.useState"],"sources":["https:/framerusercontent.com/modules/BCO1BPgpgoL1Izf8VJim/TvpnqOk7qwfCnCOpSppR/InViewVideo.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerIntrinsicWidth 640\n * @framerIntrinsicHeight 360\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function InViewVideo({source=\"url\",url=\"\",file=\"\",poster,playing=true,loop=true,muted=true,controls=false,volume=25,startTime=0,fit=\"cover\",radius=\"0px\",background=\"transparent\",label=\"Video\",style}){const videoRef=React.useRef(null);const isStatic=useIsStaticRenderer();const src=source===\"upload\"?file:url;const posterSrc=poster?.src||\"\";const[posterDimensions,setPosterDimensions]=React.useState(null);const[videoDimensions,setVideoDimensions]=React.useState(null);const[firstFrame,setFirstFrame]=React.useState(null);const[blocked,setBlocked]=React.useState(false);const allowedRef=React.useRef(false);const attemptRef=React.useRef(null);const providedPosterRatio=poster?.width&&poster?.height&&poster.width>0&&poster.height>0?poster.width/poster.height:null;const loadedPosterRatio=posterSrc&&posterDimensions?.src===posterSrc?posterDimensions.ratio:null;const loadedVideoRatio=src&&videoDimensions?.src===src?videoDimensions.ratio:null;const ratio=providedPosterRatio||loadedPosterRatio||loadedVideoRatio||16/9;const generatedPoster=firstFrame?.src===src?firstFrame.image:undefined;const effectivePoster=posterSrc||generatedPoster;React.useEffect(()=>{if(!posterSrc)return;let disposed=false;const image=new Image;const readDimensions=()=>{if(disposed||image.naturalWidth<=0||image.naturalHeight<=0){return;}setPosterDimensions({src:posterSrc,ratio:image.naturalWidth/image.naturalHeight});};image.onload=readDimensions;image.onerror=()=>{if(!disposed)setPosterDimensions(null);};image.src=posterSrc;if(image.complete)readDimensions();return()=>{disposed=true;image.onload=null;image.onerror=null;};},[posterSrc]);React.useEffect(()=>{setBlocked(false);},[src]);React.useEffect(()=>{const video=videoRef.current;if(!video||!src)return;let disposed=false;let visible=false;let loaded=false;let attempt=0;let pending=false;let userPaused=false;let automaticPause=false;let seekApplied=false;let firstFrameHandled=false;const pause=()=>{allowedRef.current=false;attempt++;if(!video.paused){automaticPause=true;video.pause();}};const play=()=>{if(disposed||isStatic||!allowedRef.current||pending||!video.paused){return;}pending=true;const ticket=++attempt;video.play().then(()=>{if(disposed||!allowedRef.current||isStatic){video.pause();}if(!disposed&&ticket===attempt){setBlocked(false);}}).catch(error=>{if(!disposed&&ticket===attempt&&allowedRef.current&&error?.name===\"NotAllowedError\"){setBlocked(true);}}).finally(()=>{pending=false;if(!disposed&&ticket!==attempt&&allowedRef.current&&playing&&!userPaused&&!video.ended&&!isStatic){play();}});};const loadVideo=()=>{if(loaded||disposed)return;loaded=true;video.src=src;video.load();};const sync=()=>{if(disposed)return;const allowed=!isStatic&&visible&&document.visibilityState===\"visible\";allowedRef.current=allowed;if(!allowed){pause();return;}loadVideo();if(playing&&!userPaused){play();}};const metadata=()=>{if(!disposed&&video.videoWidth>0&&video.videoHeight>0){setVideoDimensions({src,ratio:video.videoWidth/video.videoHeight});}};const applyStartTime=()=>{if(seekApplied||startTime<=0||isStatic)return;seekApplied=true;const end=Number.isFinite(video.duration)?Math.max(0,video.duration-.01):startTime;try{video.currentTime=Math.min(startTime,end);}catch{// Some media cannot be seeked.\n}};const captureFirstFrame=()=>{if(disposed||firstFrameHandled||video.readyState<2){return;}firstFrameHandled=true;if(!posterSrc&&video.videoWidth>0&&video.videoHeight>0){try{const canvas=document.createElement(\"canvas\");const width=Math.min(1280,video.videoWidth);const height=Math.max(1,Math.round(width*(video.videoHeight/video.videoWidth)));canvas.width=width;canvas.height=height;const context=canvas.getContext(\"2d\");if(context){context.drawImage(video,0,0,width,height);setFirstFrame({src,image:canvas.toDataURL(\"image/jpeg\",.85)});}}catch{// If image extraction is unavailable, the native\n// video element still displays its decoded frame.\n}}// Capture the opening frame before seeking to Start Time.\napplyStartTime();};const onPlay=()=>{if(!allowedRef.current||isStatic){pause();}else{userPaused=false;setBlocked(false);}};const onPause=()=>{if(automaticPause){automaticPause=false;}else if(allowedRef.current&&!video.ended){userPaused=true;}};const ready=()=>{captureFirstFrame();if(playing&&!userPaused){play();}};video.muted=muted;video.volume=Math.max(0,Math.min(1,volume/100));video.addEventListener(\"loadedmetadata\",metadata);video.addEventListener(\"loadeddata\",captureFirstFrame);video.addEventListener(\"canplay\",ready);video.addEventListener(\"play\",onPlay);video.addEventListener(\"pause\",onPause);document.addEventListener(\"visibilitychange\",sync);const observer=typeof IntersectionObserver!==\"undefined\"?new IntersectionObserver(([entry])=>{visible=entry.isIntersecting&&entry.intersectionRect.width>0&&entry.intersectionRect.height>0;sync();},{threshold:0}):null;observer?.observe(video);const checkBounds=()=>{const rect=video.getBoundingClientRect();visible=rect.width>0&&rect.height>0&&rect.bottom>0&&rect.right>0&&rect.top<window.innerHeight&&rect.left<window.innerWidth;sync();};if(!observer){window.addEventListener(\"scroll\",checkBounds,{passive:true,capture:true});window.addEventListener(\"resize\",checkBounds);checkBounds();}// Without a poster, load the video so its first frame can appear\n// before playback, including in the Framer canvas.\nif(!posterSrc){loadVideo();}attemptRef.current=()=>{userPaused=false;play();};return()=>{disposed=true;pause();observer?.disconnect();if(!observer){window.removeEventListener(\"scroll\",checkBounds,true);window.removeEventListener(\"resize\",checkBounds);}document.removeEventListener(\"visibilitychange\",sync);video.removeEventListener(\"loadedmetadata\",metadata);video.removeEventListener(\"loadeddata\",captureFirstFrame);video.removeEventListener(\"canplay\",ready);video.removeEventListener(\"play\",onPlay);video.removeEventListener(\"pause\",onPause);attemptRef.current=null;video.removeAttribute(\"src\");video.load();};},[src,posterSrc,isStatic,playing,muted,volume,startTime]);const fixedHeight=style?.height!=null&&style.height!==\"auto\";return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",...style,position:\"relative\",overflow:\"hidden\",borderRadius:radius,background,aspectRatio:fixedHeight?undefined:String(ratio)},children:[/*#__PURE__*/_jsx(\"video\",{ref:videoRef,poster:effectivePoster||undefined,preload:posterSrc?\"none\":\"auto\",playsInline:true,muted:muted,loop:loop,controls:controls||!playing,\"aria-label\":poster?.alt||label,style:{display:\"block\",position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:fit}}),blocked&&!isStatic&&/*#__PURE__*/_jsx(\"button\",{type:\"button\",\"aria-label\":\"Play video\",onClick:()=>attemptRef.current?.(),style:{position:\"absolute\",inset:0,margin:\"auto\",width:112,height:44,border:0,borderRadius:8,background:\"#FFFFFF\",color:\"#111111\",cursor:\"pointer\"},children:\"Play video\"})]});}addPropertyControls(InViewVideo,{source:{type:ControlType.Enum,title:\"Source\",options:[\"url\",\"upload\"],optionTitles:[\"URL\",\"Upload\"],defaultValue:\"url\"},url:{type:ControlType.String,title:\"URL\",defaultValue:\"\",hidden:props=>props.source===\"upload\"},file:{type:ControlType.File,title:\"File\",allowedFileTypes:[\"mp4\",\"webm\",\"mov\"],hidden:props=>props.source!==\"upload\"},poster:{type:ControlType.ResponsiveImage,title:\"Poster\",description:\"Sets the aspect ratio automatically. Leave empty to use the video's first frame.\"},playing:{type:ControlType.Boolean,title:\"Play In View\",defaultValue:true},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:true},muted:{type:ControlType.Boolean,title:\"Muted\",defaultValue:true},controls:{type:ControlType.Boolean,title:\"Controls\",defaultValue:false},volume:{type:ControlType.Number,title:\"Volume\",defaultValue:25,min:0,max:100,unit:\"%\",hidden:props=>Boolean(props.muted)},startTime:{type:ControlType.Number,title:\"Start Time\",defaultValue:0,min:0,unit:\"s\"},fit:{type:ControlType.Enum,title:\"Fit\",options:[\"cover\",\"contain\",\"fill\"],optionTitles:[\"Cover\",\"Contain\",\"Stretch\"],defaultValue:\"cover\"},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"0px\"},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"transparent\"},label:{type:ControlType.String,title:\"Label\",defaultValue:\"Video\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"InViewVideo\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"640\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\",\"framerIntrinsicHeight\":\"360\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./InViewVideo.map"],"mappings":"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"}