{"version":3,"file":"VideoModule.DsN0bNpP.mjs","names":["useState","useRef","_Fragment"],"sources":["https:/framerusercontent.com/modules/Ik0V8VJkIyybgVTJC0IP/tT4JuTXguGt7CUxyADBd/VideoModule.js"],"sourcesContent":["// Video module with custom play button, \"See how it works\" burst element, and custom cover image\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState,useRef,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Video Module\n *\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 450\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function VideoModule(props){const{videoSource=\"upload\",uploadedVideo=\"https://framerusercontent.com/assets/MLWPbW1dUQawJLhhun3dBwpgJak.mp4\",youtubeUrl=\"\",vimeoUrl=\"\",coverImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Video cover\"},showBurst=true,burstText=\"See how\\nit works\",burstColor=\"#5B5FED\",burstTextColor=\"#FFFFFF\",playButtonColor=\"#FFFFFF\",playButtonIconColor=\"#5B5FED\",playButtonSize=100,burstSize=160,burstFont}=props;const[isPlaying,setIsPlaying]=useState(false);const[showCover,setShowCover]=useState(true);const videoRef=useRef(null);const iframeRef=useRef(null);const[isMobile,setIsMobile]=useState(false);useEffect(()=>{if(typeof window!==\"undefined\"){const checkMobile=()=>{startTransition(()=>setIsMobile(window.innerWidth<768));};checkMobile();window.addEventListener(\"resize\",checkMobile);return()=>window.removeEventListener(\"resize\",checkMobile);}},[]);const getEmbedUrl=()=>{if(videoSource===\"youtube\"&&youtubeUrl){const videoId=extractYouTubeId(youtubeUrl);return videoId?`https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1&showinfo=0`:\"\";}if(videoSource===\"vimeo\"&&vimeoUrl){const videoId=extractVimeoId(vimeoUrl);return videoId?`https://player.vimeo.com/video/${videoId}?autoplay=1&byline=0&portrait=0`:\"\";}return\"\";};const extractYouTubeId=url=>{const regExp=/^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|&v=)([^#&?]*).*/;const match=url.match(regExp);return match&&match[2].length===11?match[2]:null;};const extractVimeoId=url=>{const regExp=/vimeo\\.com\\/(\\d+)/;const match=url.match(regExp);return match?match[1]:null;};const handlePlay=()=>{startTransition(()=>{setIsPlaying(true);setShowCover(false);});if(videoSource===\"upload\"&&videoRef.current){videoRef.current.play();}};useEffect(()=>{if(videoSource===\"upload\"&&videoRef.current){const video=videoRef.current;const handleEnded=()=>{startTransition(()=>{setIsPlaying(false);setShowCover(true);});};video.addEventListener(\"ended\",handleEnded);return()=>video.removeEventListener(\"ended\",handleEnded);}},[videoSource]);const embedUrl=getEmbedUrl();return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",borderRadius:16,backgroundColor:\"#000\"},children:[videoSource===\"upload\"?/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:uploadedVideo,style:{width:\"100%\",height:\"100%\",objectFit:\"contain\"},controls:isPlaying}):embedUrl&&/*#__PURE__*/_jsx(\"iframe\",{ref:iframeRef,src:isPlaying?embedUrl:\"\",style:{width:\"100%\",height:\"100%\",border:\"none\",display:isPlaying?\"block\":\"none\"},allow:\"autoplay; fullscreen; picture-in-picture\",allowFullScreen:true,title:\"Video player\"}),showCover&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${coverImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\"},role:\"img\",\"aria-label\":coverImage.alt}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsx(\"button\",{onClick:handlePlay,style:{width:playButtonSize,height:playButtonSize,borderRadius:\"50%\",backgroundColor:playButtonColor,border:\"none\",cursor:\"pointer\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",boxShadow:\"0 8px 24px rgba(0, 0, 0, 0.3)\",transition:\"transform 0.2s ease\",zIndex:2},onMouseEnter:e=>{e.currentTarget.style.transform=\"scale(1.1)\";},onMouseLeave:e=>{e.currentTarget.style.transform=\"scale(1)\";},\"aria-label\":\"Play video\",children:/*#__PURE__*/_jsx(\"svg\",{width:playButtonSize*.4,height:playButtonSize*.4,viewBox:\"0 0 24 24\",fill:playButtonIconColor,children:/*#__PURE__*/_jsx(\"path\",{d:\"M8 5v14l11-7z\"})})})}),showBurst&&/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",bottom:isMobile?20:40,left:isMobile?20:40,width:isMobile?burstSize*.5:burstSize,height:isMobile?burstSize*.5:burstSize,borderRadius:\"50%\",backgroundColor:burstColor,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",boxShadow:\"0 4px 16px rgba(0, 0, 0, 0.2)\",zIndex:3,animation:\"pulse 2s ease-in-out infinite\"},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                                    @keyframes pulse {\n                                        0%, 100% {\n                                            transform: scale(1);\n                                        }\n                                        50% {\n                                            transform: scale(1.05);\n                                        }\n                                    }\n                                    @media (max-width: 768px) {\n                                        .burst-text {\n                                            font-size: 9px !important;\n                                        }\n                                    }\n                                `}),/*#__PURE__*/_jsx(\"span\",{className:\"burst-text\",style:{color:burstTextColor,textAlign:\"center\",whiteSpace:\"pre-line\",...burstFont},children:burstText})]})]})]});}addPropertyControls(VideoModule,{videoSource:{type:ControlType.Enum,title:\"Video Source\",options:[\"upload\",\"youtube\",\"vimeo\"],optionTitles:[\"Upload\",\"YouTube\",\"Vimeo\"],defaultValue:\"upload\",displaySegmentedControl:true},uploadedVideo:{type:ControlType.File,title:\"Video File\",allowedFileTypes:[\"mp4\",\"webm\",\"mov\"],hidden:({videoSource})=>videoSource!==\"upload\"},youtubeUrl:{type:ControlType.String,title:\"YouTube URL\",placeholder:\"https://www.youtube.com/watch?v=...\",hidden:({videoSource})=>videoSource!==\"youtube\"},vimeoUrl:{type:ControlType.String,title:\"Vimeo URL\",placeholder:\"https://vimeo.com/...\",hidden:({videoSource})=>videoSource!==\"vimeo\"},coverImage:{type:ControlType.ResponsiveImage,title:\"Cover Image\"},showBurst:{type:ControlType.Boolean,title:\"Show Burst\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},burstText:{type:ControlType.String,title:\"Burst Text\",defaultValue:\"See how\\nit works\",displayTextArea:true,hidden:({showBurst})=>!showBurst},burstColor:{type:ControlType.Color,title:\"Burst Color\",defaultValue:\"#5B5FED\",hidden:({showBurst})=>!showBurst},burstTextColor:{type:ControlType.Color,title:\"Burst Text Color\",defaultValue:\"#FFFFFF\",hidden:({showBurst})=>!showBurst},burstSize:{type:ControlType.Number,title:\"Burst Size\",defaultValue:160,min:80,max:200,step:10,unit:\"px\",hidden:({showBurst})=>!showBurst},burstFont:{type:ControlType.Font,title:\"Burst Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"},hidden:({showBurst})=>!showBurst},playButtonColor:{type:ControlType.Color,title:\"Play Button Color\",defaultValue:\"#FFFFFF\"},playButtonIconColor:{type:ControlType.Color,title:\"Play Icon Color\",defaultValue:\"#5B5FED\"},playButtonSize:{type:ControlType.Number,title:\"Play Button Size\",defaultValue:120,min:40,max:160,step:10,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"VideoModule\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"450\",\"framerIntrinsicWidth\":\"800\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./VideoModule.map"],"mappings":"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"}