{"version":3,"file":"VideoButton.CPOfYKB5.mjs","names":["useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/geOg5zgoNX0LrPYYROEf/DdeK4Cf1xICnxeR0lYEQ/VideoButton.js"],"sourcesContent":["// Button with YouTube video overlay - fully customizable button that opens a video overlay on click\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState,startTransition}from\"react\";import{createPortal}from\"react-dom\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Video Button with YouTube Overlay\n *\n * @framerIntrinsicWidth 300\n * @framerIntrinsicHeight 80\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function VideoButton(props){const{buttonText=\"Watch Video\",showText=true,youtubeUrl=\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\",showBackground=true,backgroundColor=\"#1F2937\",textColor=\"#FFFFFF\",buttonFont,borderRadius=8,showPlayIcon=true,playIconColor=\"#FFFFFF\",glassBlur=0,glassBorderColor=\"rgba(255, 255, 255, 0.4)\",glassBorderWidth=0,hoverBackground,hoverTextColor,hoverPlayIconColor,overlayBackground=\"rgba(0, 0, 0, 0.9)\",videoWidth=80,videoHeight=60,paddingVertical=20,paddingHorizontal=40,playIconSize=32,iconTextGap=16,style}=props;const[isOpen,setIsOpen]=useState(false);const[isHovered,setIsHovered]=useState(false);const getYouTubeEmbedUrl=url=>{try{const urlObj=new URL(url);let videoId=\"\";if(urlObj.hostname.includes(\"youtube.com\")){videoId=urlObj.searchParams.get(\"v\")||\"\";}else if(urlObj.hostname.includes(\"youtu.be\")){videoId=urlObj.pathname.slice(1);}return videoId?`https://www.youtube.com/embed/${videoId}?autoplay=1`:\"\";}catch{return\"\";}};const embedUrl=getYouTubeEmbedUrl(youtubeUrl);const handleOpen=()=>{startTransition(()=>setIsOpen(true));};const handleClose=()=>{startTransition(()=>setIsOpen(false));};// When no hover colour is configured, fall back to the original\n// scale + fade hover. Dimming an explicitly chosen hover colour would\n// muddy it, so opacity is left alone once any hover colour is set.\nconst hasHoverColor=Boolean(hoverBackground||hoverTextColor||hoverPlayIconColor);const restBackground=showBackground?backgroundColor:\"transparent\";const currentBackground=isHovered&&hoverBackground?hoverBackground:restBackground;const currentTextColor=isHovered&&hoverTextColor?hoverTextColor:textColor;const currentPlayIconColor=isHovered&&hoverPlayIconColor?hoverPlayIconColor:playIconColor;const isFixedWidth=style?.width===\"100%\";const isFixedHeight=style?.height===\"100%\";const canUsePortal=typeof document!==\"undefined\";const overlay=isOpen?/*#__PURE__*/_jsxs(\"div\",{style:{position:\"fixed\",top:0,left:0,width:\"100vw\",height:\"100vh\",backgroundColor:overlayBackground,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",zIndex:2147483647,padding:20},onClick:handleClose,role:\"dialog\",\"aria-modal\":\"true\",\"aria-label\":\"Video overlay\",children:[/*#__PURE__*/_jsx(\"button\",{onClick:handleClose,style:{position:\"fixed\",top:20,right:20,background:\"transparent\",border:\"none\",color:\"#FFFFFF\",fontSize:40,cursor:\"pointer\",padding:8,lineHeight:1,zIndex:2147483647},\"aria-label\":\"Close video\",children:\"\\xd7\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",width:`${videoWidth}%`,maxWidth:\"1200px\",aspectRatio:\"16/9\"},onClick:e=>e.stopPropagation(),children:embedUrl?/*#__PURE__*/_jsx(\"iframe\",{src:embedUrl,style:{width:\"100%\",height:\"100%\",border:\"none\",borderRadius:0},allow:\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\",allowFullScreen:true,title:\"YouTube video player\"}):/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#1F2937\",borderRadius:8,color:\"#FFFFFF\",fontSize:18},children:\"Invalid YouTube URL\"})})]}):null;return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(\"button\",{onClick:handleOpen,style:{...style,position:\"relative\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",gap:iconTextGap,backgroundColor:currentBackground,color:currentTextColor,border:glassBorderWidth&&glassBorderColor?`${glassBorderWidth}px solid ${glassBorderColor}`:\"none\",backdropFilter:glassBlur?`blur(${glassBlur}px)`:undefined,WebkitBackdropFilter:glassBlur?`blur(${glassBlur}px)`:undefined,borderRadius,cursor:\"pointer\",padding:`${paddingVertical}px ${paddingHorizontal}px`,transform:isHovered?\"scale(1.02)\":\"scale(1)\",opacity:isHovered&&!hasHoverColor?.9:1,transition:\"transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease\",...isFixedWidth?{}:{minWidth:\"max-content\"},...isFixedHeight?{}:{minHeight:\"max-content\"},...buttonFont},onMouseEnter:()=>setIsHovered(true),onMouseLeave:()=>setIsHovered(false),\"aria-label\":buttonText?`Open video: ${buttonText}`:\"Play video\",children:[showPlayIcon&&/*#__PURE__*/_jsx(\"svg\",{width:playIconSize,height:playIconSize,viewBox:\"0 0 32 32\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",style:{marginLeft:!showText?playIconSize*.08:0},children:/*#__PURE__*/_jsx(\"path\",{d:\"M10 8L24 16L10 24V8Z\",fill:currentPlayIconColor,style:{transition:\"fill 0.2s ease\"}})}),showText&&buttonText?/*#__PURE__*/_jsx(\"span\",{style:{whiteSpace:\"nowrap\"},children:buttonText}):null]}),canUsePortal?/*#__PURE__*/createPortal(overlay,document.body):overlay]});}addPropertyControls(VideoButton,{buttonText:{type:ControlType.String,title:\"Button Text\",defaultValue:\"Watch Video\",hidden:({showText})=>!showText},showText:{type:ControlType.Boolean,title:\"Show Text\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},youtubeUrl:{type:ControlType.String,title:\"YouTube URL\",defaultValue:\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\",placeholder:\"https://www.youtube.com/watch?v=...\"},showBackground:{type:ControlType.Boolean,title:\"Show Background\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#1F2937\",hidden:({showBackground})=>!showBackground},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#FFFFFF\"},buttonFont:{type:ControlType.Font,title:\"Button Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"24px\",variant:\"Bold\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"}},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:50,step:1,unit:\"px\"},showPlayIcon:{type:ControlType.Boolean,title:\"Show Play Icon\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},playIconColor:{type:ControlType.Color,title:\"Play Icon Color\",defaultValue:\"#FFFFFF\",hidden:({showPlayIcon})=>!showPlayIcon},glassBlur:{type:ControlType.Number,title:\"Glass Blur\",defaultValue:0,min:0,max:40,step:1,unit:\"px\"},glassBorderColor:{type:ControlType.Color,title:\"Glass Border\",defaultValue:\"rgba(255, 255, 255, 0.4)\"},glassBorderWidth:{type:ControlType.Number,title:\"Glass Border Width\",defaultValue:0,min:0,max:8,step:1,unit:\"px\"},hoverBackground:{type:ControlType.Color,title:\"Hover Background\",optional:true},hoverTextColor:{type:ControlType.Color,title:\"Hover Text Color\",optional:true},hoverPlayIconColor:{type:ControlType.Color,title:\"Hover Play Icon Color\",optional:true,hidden:({showPlayIcon})=>!showPlayIcon},overlayBackground:{type:ControlType.Color,title:\"Overlay Background\",defaultValue:\"rgba(0, 0, 0, 0.9)\"},videoWidth:{type:ControlType.Number,title:\"Video Width\",defaultValue:80,min:50,max:100,step:5,unit:\"%\"},videoHeight:{type:ControlType.Number,title:\"Video Height\",defaultValue:60,min:40,max:100,step:5,unit:\"%\"},paddingVertical:{type:ControlType.Number,title:\"Padding Vertical\",defaultValue:20,min:0,max:100,step:1,unit:\"px\"},paddingHorizontal:{type:ControlType.Number,title:\"Padding Horizontal\",defaultValue:40,min:0,max:100,step:1,unit:\"px\"},playIconSize:{type:ControlType.Number,title:\"Play Icon Size\",defaultValue:32,min:16,max:64,step:2,unit:\"px\",hidden:({showPlayIcon})=>!showPlayIcon},iconTextGap:{type:ControlType.Number,title:\"Icon Text Gap\",defaultValue:16,min:0,max:50,step:1,unit:\"px\",hidden:({showPlayIcon})=>!showPlayIcon}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"VideoButton\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"80\",\"framerIntrinsicWidth\":\"300\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./VideoButton.map"],"mappings":"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"}