{"version":3,"file":"HTMLAnimationPlayer.IMYLWgKB.mjs","names":["React.useRef","React.useState","__esmMin","init_ssg_sandbox_shims","window","_e","de","init_jsx_runtime","c","p","init_npm_react_18_3_1","ce","init_framer_BWFVvmND","addPropertyControls","ControlType","HTMLVideoPlayer","props","containerRef","videoRef","htmlContent","setHtmlContent","mediaType","setMediaType","loading","setLoading","error","setError","frameKey","setFrameKey","isInView","setIsInView","playOnView","hasEnteredRef","mediaFile","cleanURL","isHTML","isVideo","cancelled","loadHTML","response","text","previous","err","element","observer","entry","visible","replayOnReEnter","video","loop","duration","interval","backgroundColor","allowHTMLInteraction","videoFit","Placeholder","init_HTMLAnimationPlayer"],"sources":["https:/framerusercontent.com/modules/BnJOFtCllxflqVqnVLmb/q6O7ece2A5IOK9F5cWKd/HTMLAnimationPlayer.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function HTMLVideoPlayer(props){const{mediaFile,duration,loop,playOnView,replayOnReEnter,videoFit,paddingTop,paddingRight,paddingBottom,paddingLeft,borderRadius,backgroundColor,allowHTMLInteraction}=props;const containerRef=React.useRef(null);const videoRef=React.useRef(null);const[htmlContent,setHtmlContent]=React.useState(\"\");const[mediaType,setMediaType]=React.useState(null);const[loading,setLoading]=React.useState(false);const[error,setError]=React.useState(\"\");const[frameKey,setFrameKey]=React.useState(0);const[isInView,setIsInView]=React.useState(!playOnView);const hasEnteredRef=React.useRef(false);/**\n     * --------------------------------------------------------\n     * DETECT FILE TYPE\n     * --------------------------------------------------------\n     */React.useEffect(()=>{if(!mediaFile){setMediaType(null);setHtmlContent(\"\");setError(\"\");return;}const cleanURL=mediaFile.split(\"?\")[0].split(\"#\")[0].toLowerCase();const isHTML=cleanURL.endsWith(\".html\")||cleanURL.endsWith(\".htm\");const isVideo=cleanURL.endsWith(\".mp4\")||cleanURL.endsWith(\".webm\")||cleanURL.endsWith(\".mov\")||cleanURL.endsWith(\".m4v\");setError(\"\");setHtmlContent(\"\");if(isHTML){setMediaType(\"html\");}else if(isVideo){setMediaType(\"video\");}else{setMediaType(null);setError(\"Unsupported file type.\");}},[mediaFile]);/**\n     * --------------------------------------------------------\n     * LOAD HTML AS TEXT\n     * --------------------------------------------------------\n     *\n     * We cannot use the uploaded HTML URL directly in iframe.src\n     * because Framer may serve it as a downloadable attachment.\n     *\n     * Instead:\n     *\n     * HTML URL\n     * ↓\n     * fetch()\n     * ↓\n     * text\n     * ↓\n     * iframe srcDoc\n     *\n     */React.useEffect(()=>{if(!mediaFile||mediaType!==\"html\"){return;}let cancelled=false;async function loadHTML(){try{setLoading(true);setError(\"\");const response=await fetch(mediaFile,{method:\"GET\",cache:\"no-store\"});if(!response.ok){throw new Error(`Could not load HTML (${response.status})`);}const text=await response.text();if(cancelled)return;setHtmlContent(text);setFrameKey(previous=>previous+1);}catch(err){if(cancelled)return;console.error(\"HTML / Video Player:\",err);setHtmlContent(\"\");setError(\"Unable to load this HTML animation.\");}finally{if(!cancelled){setLoading(false);}}}loadHTML();return()=>{cancelled=true;};},[mediaFile,mediaType]);/**\n     * --------------------------------------------------------\n     * VIEWPORT\n     * --------------------------------------------------------\n     */React.useEffect(()=>{if(!playOnView){setIsInView(true);return;}const element=containerRef.current;if(!element)return;const observer=new IntersectionObserver(([entry])=>{const visible=entry.isIntersecting;setIsInView(visible);if(visible){/**\n                     * HTML\n                     *\n                     * Remount iframe when entering viewport.\n                     */if(mediaType===\"html\"){if(!hasEnteredRef.current||replayOnReEnter){setFrameKey(previous=>previous+1);}}/**\n                     * VIDEO\n                     */if(mediaType===\"video\"){const video=videoRef.current;if(video){if(!hasEnteredRef.current||replayOnReEnter){try{video.currentTime=0;}catch{}}video.play().catch(()=>{});}}hasEnteredRef.current=true;}else{/**\n                     * Pause video when it leaves viewport.\n                     */if(mediaType===\"video\"){videoRef.current?.pause();}}},{threshold:.15});observer.observe(element);return()=>{observer.disconnect();};},[playOnView,replayOnReEnter,mediaType,mediaFile]);/**\n     * Reset entry state when media changes.\n     */React.useEffect(()=>{hasEnteredRef.current=false;},[mediaFile]);/**\n     * --------------------------------------------------------\n     * HTML LOOP\n     * --------------------------------------------------------\n     *\n     * Duration only controls HTML animation looping.\n     *\n     * Videos use their actual video duration.\n     */React.useEffect(()=>{if(mediaType!==\"html\")return;if(!htmlContent)return;if(!loop)return;if(!isInView&&playOnView)return;if(duration<=0)return;const interval=window.setInterval(()=>{setFrameKey(previous=>previous+1);},duration*1e3);return()=>{window.clearInterval(interval);};},[mediaType,htmlContent,loop,isInView,playOnView,duration]);/**\n     * --------------------------------------------------------\n     * VIDEO PLAYBACK\n     * --------------------------------------------------------\n     */React.useEffect(()=>{if(mediaType!==\"video\")return;const video=videoRef.current;if(!video)return;if(!playOnView){video.play().catch(()=>{});return;}if(isInView){video.play().catch(()=>{});}else{video.pause();}},[mediaType,mediaFile,isInView,playOnView]);/**\n     * --------------------------------------------------------\n     * RENDER\n     * --------------------------------------------------------\n     */const renderHTML=mediaType===\"html\"&&htmlContent&&(!playOnView||isInView);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",boxSizing:\"border-box\",paddingTop,paddingRight,paddingBottom,paddingLeft,borderRadius,overflow:\"hidden\",background:backgroundColor},children:[renderHTML&&/*#__PURE__*/_jsx(\"iframe\",{srcDoc:htmlContent,title:\"HTML Animation\",scrolling:\"no\",sandbox:\"allow-scripts allow-same-origin\",style:{display:\"block\",width:\"100%\",height:\"100%\",border:\"none\",outline:\"none\",margin:0,padding:0,background:\"transparent\",pointerEvents:allowHTMLInteraction?\"auto\":\"none\"}},frameKey),mediaType===\"video\"&&/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:mediaFile,autoPlay:!playOnView,muted:true,playsInline:true,loop:loop,controls:false,preload:\"auto\",disablePictureInPicture:true,style:{display:\"block\",width:\"100%\",height:\"100%\",objectFit:videoFit,margin:0,padding:0,border:\"none\",outline:\"none\",background:\"transparent\",pointerEvents:\"none\"}},mediaFile),!mediaFile&&/*#__PURE__*/_jsx(Placeholder,{children:\"Upload HTML or Video\"}),mediaType===\"html\"&&loading&&/*#__PURE__*/_jsx(Placeholder,{children:\"Loading animation...\"}),error&&/*#__PURE__*/_jsx(Placeholder,{children:error})]});}/**\n * --------------------------------------------------------\n * PLACEHOLDER\n * --------------------------------------------------------\n */function Placeholder({children}){return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",boxSizing:\"border-box\",padding:20,fontFamily:\"Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif\",fontSize:12,color:\"rgba(100,100,110,0.7)\",textAlign:\"center\",pointerEvents:\"none\"},children:children});}/**\n * --------------------------------------------------------\n * DEFAULT PROPS\n * --------------------------------------------------------\n */HTMLVideoPlayer.defaultProps={mediaFile:\"\",duration:5,loop:true,playOnView:true,replayOnReEnter:true,videoFit:\"contain\",paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0,borderRadius:0,backgroundColor:\"rgba(255,255,255,0)\",allowHTMLInteraction:false};/**\n * --------------------------------------------------------\n * FRAMER PROPERTY CONTROLS\n * --------------------------------------------------------\n */addPropertyControls(HTMLVideoPlayer,{mediaFile:{type:ControlType.File,title:\"Media\",allowedFileTypes:[\"html\",\"htm\",\"mp4\",\"webm\",\"mov\",\"m4v\"]},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\"},duration:{type:ControlType.Number,title:\"HTML Duration\",defaultValue:5,min:.1,max:120,step:.1,unit:\"s\"},playOnView:{type:ControlType.Boolean,title:\"Play On View\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\"},replayOnReEnter:{type:ControlType.Boolean,title:\"Replay On Enter\",defaultValue:true,enabledTitle:\"Yes\",disabledTitle:\"No\",hidden(props){return!props.playOnView;}},videoFit:{type:ControlType.Enum,title:\"Video Fit\",options:[\"contain\",\"cover\",\"fill\"],optionTitles:[\"Contain\",\"Cover\",\"Fill\"],defaultValue:\"contain\"},paddingTop:{type:ControlType.Number,title:\"Padding Top\",defaultValue:0,min:0,max:300,unit:\"px\"},paddingRight:{type:ControlType.Number,title:\"Padding Right\",defaultValue:0,min:0,max:300,unit:\"px\"},paddingBottom:{type:ControlType.Number,title:\"Padding Bottom\",defaultValue:0,min:0,max:300,unit:\"px\"},paddingLeft:{type:ControlType.Number,title:\"Padding Left\",defaultValue:0,min:0,max:300,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:0,min:0,max:200,unit:\"px\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"rgba(255,255,255,0)\"},allowHTMLInteraction:{type:ControlType.Boolean,title:\"HTML Interaction\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HTMLVideoPlayer\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HTMLAnimationPlayer.map"],"mappings":"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"}