{"version":3,"file":"Video_Embed_Code.F8_xThPy.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/0wTOr0OsjQjo3HJOxp5y/Fc1eUNc5BTmDiixlUKia/Video_Embed_Code.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * ScrollVideo — Scroll-triggered video component for Framer\n * v5 — Improved mobile autoplay reliability\n *\n * Changes from v4:\n * - Added touchstart/click/scroll listener to unlock playback on iOS Safari\n * - Added document visibility change handler to resume playback after tab switch\n * - Added retry logic for play() failures with exponential backoff\n * - Added autoPlay attribute for browsers that support it natively\n * - Added x5-playsinline for Android WebView compatibility\n * - Changed preload to \"auto\" for all loaded videos\n */export default function ScrollVideo(props){const{videoFile,videoUrl,posterFile,posterUrl,aspectRatio,borderRadius,objectFit,playbackThreshold,loop,showOverlay,overlayColor,overlayOpacity,maxWidth,eagerLoad}=props;const containerRef=useRef(null);const videoRef=useRef(null);const isVisibleRef=useRef(false);const hasInteractedRef=useRef(false);const retryTimerRef=useRef(null);const[shouldLoad,setShouldLoad]=useState(eagerLoad);const resolvedVideoSrc=videoFile||videoUrl||\"\";const resolvedPosterSrc=posterFile||posterUrl||\"\";const attemptPlay=(retryCount=0)=>{const video=videoRef.current;if(!video)return;if(!video.paused)return;const playPromise=video.play();if(playPromise!==undefined){playPromise.catch(()=>{// Retry with backoff for mobile browsers that need interaction first\nif(retryCount<3){const delay=Math.pow(2,retryCount)*200;retryTimerRef.current=setTimeout(()=>{if(isVisibleRef.current){attemptPlay(retryCount+1);}},delay);}});}};// Global touch/click/scroll listener to unlock video playback on iOS\nuseEffect(()=>{const unlockPlayback=()=>{if(hasInteractedRef.current)return;hasInteractedRef.current=true;const video=videoRef.current;if(video&&isVisibleRef.current){attemptPlay();}};document.addEventListener(\"touchstart\",unlockPlayback,{once:true,passive:true});document.addEventListener(\"click\",unlockPlayback,{once:true,passive:true});document.addEventListener(\"scroll\",unlockPlayback,{once:true,passive:true});return()=>{document.removeEventListener(\"touchstart\",unlockPlayback);document.removeEventListener(\"click\",unlockPlayback);document.removeEventListener(\"scroll\",unlockPlayback);};},[]);// Resume playback when tab/app comes back to foreground\nuseEffect(()=>{const handleVisibilityChange=()=>{if(document.visibilityState===\"visible\"&&isVisibleRef.current){attemptPlay();}};document.addEventListener(\"visibilitychange\",handleVisibilityChange);return()=>document.removeEventListener(\"visibilitychange\",handleVisibilityChange);},[]);// Observer 1: Pre-fetch — starts loading video when within 600px of viewport\nuseEffect(()=>{if(eagerLoad){setShouldLoad(true);return;}const container=containerRef.current;if(!container)return;const prefetchObserver=new IntersectionObserver(([entry])=>{if(entry.isIntersecting){setShouldLoad(true);prefetchObserver.disconnect();}},{rootMargin:\"600px 0px\"});prefetchObserver.observe(container);return()=>prefetchObserver.disconnect();},[eagerLoad]);// Observer 2: Play/pause — controls playback based on actual visibility\nuseEffect(()=>{const container=containerRef.current;if(!container)return;const playObserver=new IntersectionObserver(([entry])=>{isVisibleRef.current=entry.isIntersecting;if(entry.isIntersecting){attemptPlay();}else{if(retryTimerRef.current){clearTimeout(retryTimerRef.current);}const video=videoRef.current;if(video&&!video.paused){video.pause();}}},{threshold:playbackThreshold});playObserver.observe(container);return()=>playObserver.disconnect();},[playbackThreshold]);// Cleanup retry timer on unmount\nuseEffect(()=>{return()=>{if(retryTimerRef.current){clearTimeout(retryTimerRef.current);}};},[]);const handleLoadedData=()=>{if(isVisibleRef.current){attemptPlay();}};const getAspectPadding=()=>{if(!aspectRatio||!aspectRatio.includes(\":\"))return\"56.25%\";const parts=aspectRatio.split(\":\");const w=parseFloat(parts[0]);const h=parseFloat(parts[1]);if(!w||!h)return\"56.25%\";return`${h/w*100}%`;};if(!resolvedVideoSrc){return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",maxWidth:maxWidth||\"100%\",margin:\"0 auto\",position:\"relative\",borderRadius:borderRadius,overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{paddingBottom:getAspectPadding()}}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",top:0,left:0,right:0,bottom:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background:\"#f0f2f5\",fontFamily:\"'Golos Text', sans-serif\",fontSize:\"clamp(13px, 1.3vw, 15px)\",color:\"#8892a4\",flexDirection:\"column\",gap:\"8px\"},children:[/*#__PURE__*/_jsx(\"svg\",{width:\"40\",height:\"40\",viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"#8892a4\",strokeWidth:\"1.5\",strokeLinecap:\"round\",strokeLinejoin:\"round\",children:/*#__PURE__*/_jsx(\"polygon\",{points:\"5 3 19 12 5 21 5 3\"})}),/*#__PURE__*/_jsx(\"span\",{children:\"Upload a video in the right panel\"})]})]});}return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",maxWidth:maxWidth||\"100%\",margin:\"0 auto\",position:\"relative\",borderRadius:borderRadius,overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{paddingBottom:getAspectPadding()}}),shouldLoad&&/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:resolvedVideoSrc,poster:resolvedPosterSrc||undefined,muted:true,autoPlay:true,playsInline:true,// @ts-ignore — needed for older iOS WebView\n\"webkit-playsinline\":\"\",// @ts-ignore — needed for Android WebView (WeChat, etc.)\n\"x5-playsinline\":\"\",loop:loop,preload:\"auto\",onLoadedData:handleLoadedData,onCanPlay:handleLoadedData,onCanPlayThrough:handleLoadedData,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit:objectFit,display:\"block\"}}),!shouldLoad&&resolvedPosterSrc&&/*#__PURE__*/_jsx(\"img\",{src:resolvedPosterSrc,alt:\"\",style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit:objectFit,display:\"block\"}}),showOverlay&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,right:0,bottom:0,background:overlayColor,opacity:overlayOpacity,pointerEvents:\"none\"}})]});}ScrollVideo.defaultProps={videoFile:\"\",videoUrl:\"\",posterFile:\"\",posterUrl:\"\",aspectRatio:\"16:9\",borderRadius:\"20px\",objectFit:\"cover\",playbackThreshold:.25,loop:true,showOverlay:false,overlayColor:\"#000000\",overlayOpacity:.3,maxWidth:\"100%\",eagerLoad:false};addPropertyControls(ScrollVideo,{videoFile:{type:ControlType.File,title:\"Video File\",allowedFileTypes:[\"mp4\",\"webm\",\"mov\"]},videoUrl:{type:ControlType.String,title:\"Video URL (fallback)\",placeholder:\"https://cdn.example.com/video.mp4\"},posterFile:{type:ControlType.File,title:\"Poster Image\",allowedFileTypes:[\"png\",\"jpg\",\"jpeg\",\"webp\"]},posterUrl:{type:ControlType.String,title:\"Poster URL (fallback)\",placeholder:\"https://cdn.example.com/poster.jpg\"},eagerLoad:{type:ControlType.Boolean,title:\"Eager Load\",enabledTitle:\"Yes\",disabledTitle:\"No\",description:\"ON for above-fold videos (loads immediately). OFF for below-fold (loads when near viewport).\"},aspectRatio:{type:ControlType.Enum,title:\"Aspect Ratio\",options:[\"16:9\",\"4:3\",\"1:1\",\"9:16\",\"21:9\"],optionTitles:[\"16:9 (Widescreen)\",\"4:3 (Standard)\",\"1:1 (Square)\",\"9:16 (Vertical)\",\"21:9 (Ultrawide)\"]},borderRadius:{type:ControlType.String,title:\"Border Radius\"},objectFit:{type:ControlType.Enum,title:\"Video Fit\",options:[\"cover\",\"contain\",\"fill\"],optionTitles:[\"Cover (crop to fill)\",\"Contain (show all)\",\"Fill (stretch)\"]},playbackThreshold:{type:ControlType.Number,title:\"Play Threshold\",min:.05,max:1,step:.05,displayStepper:true},loop:{type:ControlType.Boolean,title:\"Loop Video\",enabledTitle:\"Yes\",disabledTitle:\"No\"},maxWidth:{type:ControlType.String,title:\"Max Width\",placeholder:\"100% or 800px\"},showOverlay:{type:ControlType.Boolean,title:\"Show Overlay\",enabledTitle:\"Yes\",disabledTitle:\"No\"},overlayColor:{type:ControlType.Color,title:\"Overlay Color\",hidden:props=>!props.showOverlay},overlayOpacity:{type:ControlType.Number,title:\"Overlay Opacity\",min:0,max:1,step:.05,hidden:props=>!props.showOverlay}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollVideo\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Video_Embed_Code.map"],"mappings":"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"}