{"version":3,"file":"YouTubeVideoWidget.DR_bW2dP.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/iHiroyLfB8FtpZtYgMtQ/hSfktYZjYOdpHTAE1yVM/YouTubeVideoWidget.js"],"sourcesContent":["// YouTube Latest Video Widget - Shows the latest video from @DesignXstream channel\n// Displays video thumbnail, title, and view count as a nudge to watch\n// YouTube Video Widget - Display a specific YouTube video\n// Paste any YouTube video URL to showcase it\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function YouTubeVideoWidget(props){const{videoUrl,backgroundColor,textColor,accentColor,borderRadius,showViewCount,ctaText,titleFont,ctaFont}=props;const[video,setVideo]=useState(null);const[loading,setLoading]=useState(true);const[error,setError]=useState(false);const[errorMessage,setErrorMessage]=useState(\"\");useEffect(()=>{if(typeof window===\"undefined\")return;async function fetchVideoData(){try{if(!videoUrl){startTransition(()=>{setErrorMessage(\"Please add a YouTube video URL\");setError(true);setLoading(false);});return;}// Extract video ID from URL\nconst videoId=extractVideoId(videoUrl);if(!videoId){throw new Error(\"Invalid YouTube URL\");}// Use oEmbed API (no API key required)\nconst oEmbedResponse=await fetch(`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`);if(!oEmbedResponse.ok){throw new Error(\"Video not found\");}const oEmbedData=await oEmbedResponse.json();startTransition(()=>{setVideo({title:oEmbedData.title,thumbnail:oEmbedData.thumbnail_url,videoId,viewCount:\"\",publishedAt:\"\",authorName:oEmbedData.author_name});setLoading(false);setError(false);});}catch(err){startTransition(()=>{setErrorMessage(err instanceof Error?err.message:\"Unable to load video\");setError(true);setLoading(false);});}}fetchVideoData();},[videoUrl]);function extractVideoId(url){// Handle various YouTube URL formats\nconst patterns=[/(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)([^&\\n?#]+)/,/^([a-zA-Z0-9_-]{11})$/];for(const pattern of patterns){const match=url.match(pattern);if(match)return match[1];}return null;}function formatViewCount(views){const num=parseInt(views);if(num>=1e6){return`${(num/1e6).toFixed(1)}M views`;}else if(num>=1e3){return`${(num/1e3).toFixed(1)}K views`;}return`${num} views`;}function handleClick(){if(video&&typeof window!==\"undefined\"){window.open(`https://www.youtube.com/watch?v=${video.videoId}`,\"_blank\");}}const isFixedWidth=props?.style&&props.style.width===\"100%\";const isFixedHeight=props?.style&&props.style.height===\"100%\";if(loading){return /*#__PURE__*/_jsx(\"div\",{style:{...props.style,position:\"relative\",...isFixedWidth?{}:{minWidth:\"max-content\"},...isFixedHeight?{}:{minHeight:\"max-content\"},backgroundColor,borderRadius,padding:20,display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsx(\"span\",{style:{color:textColor,...titleFont},children:\"Loading latest video...\"})});}if(error||!video){return /*#__PURE__*/_jsxs(\"div\",{style:{...props.style,position:\"relative\",...isFixedWidth?{}:{minWidth:\"max-content\"},...isFixedHeight?{}:{minHeight:\"max-content\"},backgroundColor,borderRadius,padding:20,display:\"flex\",flexDirection:\"column\",alignItems:\"center\",justifyContent:\"center\",gap:8},children:[/*#__PURE__*/_jsx(\"span\",{style:{color:textColor,...titleFont},children:errorMessage||\"Unable to load video\"}),!videoUrl&&/*#__PURE__*/_jsx(\"span\",{style:{color:textColor,opacity:.7,fontSize:\"12px\",textAlign:\"center\"},children:\"Paste a YouTube video URL\"})]});}return /*#__PURE__*/_jsxs(\"div\",{style:{...props.style,position:\"relative\",...isFixedWidth?{}:{minWidth:\"max-content\"},...isFixedHeight?{}:{minHeight:\"max-content\"},backgroundColor,borderRadius,overflow:\"hidden\",cursor:\"pointer\",boxShadow:\"0 4px 12px rgba(0,0,0,0.1)\",transition:\"transform 0.2s ease, box-shadow 0.2s ease\"},onClick:handleClick,onMouseEnter:e=>{e.currentTarget.style.transform=\"translateY(-2px)\";e.currentTarget.style.boxShadow=\"0 6px 16px rgba(0,0,0,0.15)\";},onMouseLeave:e=>{e.currentTarget.style.transform=\"translateY(0)\";e.currentTarget.style.boxShadow=\"0 4px 12px rgba(0,0,0,0.1)\";},children:[/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",paddingBottom:\"56.25%\",backgroundColor:\"#000\"},children:[/*#__PURE__*/_jsx(\"img\",{src:video.thumbnail,alt:video.title,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit:\"cover\"}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"50%\",left:\"50%\",transform:\"translate(-50%, -50%)\",width:60,height:60,backgroundColor:accentColor,borderRadius:\"50%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",opacity:.9},children:/*#__PURE__*/_jsx(\"svg\",{width:\"24\",height:\"24\",viewBox:\"0 0 24 24\",fill:\"none\",style:{marginLeft:2},children:/*#__PURE__*/_jsx(\"path\",{d:\"M8 5v14l11-7z\",fill:\"#fff\"})})})]}),/*#__PURE__*/_jsxs(\"div\",{style:{padding:20},children:[/*#__PURE__*/_jsx(\"h3\",{style:{margin:0,marginBottom:8,color:textColor,...titleFont,display:\"-webkit-box\",WebkitLineClamp:2,WebkitBoxOrient:\"vertical\",overflow:\"hidden\"},children:video.title}),showViewCount&&/*#__PURE__*/_jsx(\"p\",{style:{margin:0,marginBottom:12,color:textColor,opacity:.7,...ctaFont},children:video.viewCount}),showViewCount&&video.authorName&&/*#__PURE__*/_jsx(\"p\",{style:{margin:0,marginBottom:12,color:textColor,opacity:.7,...ctaFont},children:video.authorName}),/*#__PURE__*/_jsx(\"div\",{style:{display:\"inline-block\",padding:\"10px 20px\",backgroundColor:accentColor,color:\"#fff\",borderRadius:6,...ctaFont},children:ctaText})]})]});}addPropertyControls(YouTubeVideoWidget,{videoUrl:{type:ControlType.String,title:\"Video URL\",defaultValue:\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\",placeholder:\"Paste YouTube video URL\",displayTextArea:true},ctaText:{type:ControlType.String,title:\"CTA Text\",defaultValue:\"Watch Now\"},showViewCount:{type:ControlType.Boolean,title:\"Show Channel\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#1a1a1a\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#FFFFFF\"},accentColor:{type:ControlType.Color,title:\"Accent Color\",defaultValue:\"#FF0000\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:12,min:0,max:32,step:1},titleFont:{type:ControlType.Font,title:\"Title Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"18px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"}},ctaFont:{type:ControlType.Font,title:\"CTA Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"YouTubeVideoWidget\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./YouTubeVideoWidget.map"],"mappings":"6MAOG,SAAwB,EAAmB,EAAM,CAAC,GAAK,CAAC,WAAS,kBAAgB,YAAU,cAAY,eAAa,gBAAc,UAAQ,YAAU,WAAS,EAAW,CAAC,EAAM,GAAUA,EAAS,IAAI,EAAO,CAAC,EAAQ,GAAYA,EAAS,EAAI,EAAO,CAAC,EAAM,GAAUA,EAAS,EAAK,EAAO,CAAC,EAAa,GAAiBA,EAAS,EAAE,EAAE,MAAc,CAAC,GAAU,IAAS,OAAY,OAAO,eAAe,GAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAS,CAAC,MAAoB,CAAC,EAAgB,gCAAgC,EAAE,EAAS,EAAI,EAAE,EAAW,EAAK,CAAE,CAAC,EAAE,MAAO,CACpiB,IAAM,EAAQ,EAAe,CAAQ,EAAE,GAAG,CAAC,EAAS,MAAU,MAAM,qBAAqB,EACzF,IAAM,EAAe,MAAM,MAAM,sEAAsE,EAAQ,aAAa,EAAE,GAAG,CAAC,EAAe,GAAI,MAAU,MAAM,iBAAiB,EAAG,IAAM,EAAW,MAAM,EAAe,KAAK,EAAE,MAAoB,CAAC,EAAS,CAAC,MAAM,EAAW,MAAM,UAAU,EAAW,cAAc,UAAQ,UAAU,GAAG,YAAY,GAAG,WAAW,EAAW,WAAW,CAAC,EAAE,EAAW,EAAK,EAAE,EAAS,EAAK,CAAE,CAAC,CAAE,OAAO,EAAI,CAAC,MAAoB,CAAC,EAAgB,aAAe,MAAM,EAAI,QAAQ,sBAAsB,EAAE,EAAS,EAAI,EAAE,EAAW,EAAK,CAAE,CAAC,CAAE,CAAC,CAAC,EAAe,CAAE,EAAE,CAAC,CAAQ,CAAC,EAAE,SAAS,EAAe,EAAI,CACngB,IAAI,IAAM,IAAW,CAAzH,2EAA2E,uBAAqD,EAAE,CAAC,IAAM,EAAM,EAAI,MAAM,CAAO,EAAE,GAAG,EAAM,OAAO,EAAM,EAAG,CAAC,OAAO,IAAK,CAAgM,SAAS,GAAa,CAAI,GAAc,IAAS,QAAa,EAAO,KAAK,mCAAmC,EAAM,UAAU,QAAQ,CAAG,CAAC,IAAM,EAAa,GAAO,OAAO,EAAM,MAAM,QAAQ,OAAa,EAAc,GAAO,OAAO,EAAM,MAAM,SAAS,OAAk9B,OAAx8B,EAA6B,EAAK,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,MAAM,SAAS,WAAW,GAAG,EAAa,CAAC,EAAE,CAAC,SAAS,aAAa,EAAE,GAAG,EAAc,CAAC,EAAE,CAAC,UAAU,aAAa,EAAE,kBAAgB,eAAa,QAAQ,GAAG,QAAQ,OAAO,WAAW,SAAS,eAAe,QAAQ,EAAE,SAAsB,EAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAU,GAAG,CAAS,EAAE,SAAS,yBAAyB,CAAC,CAAC,CAAC,EAAM,GAAO,CAAC,EAA2B,EAAM,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,MAAM,SAAS,WAAW,GAAG,EAAa,CAAC,EAAE,CAAC,SAAS,aAAa,EAAE,GAAG,EAAc,CAAC,EAAE,CAAC,UAAU,aAAa,EAAE,kBAAgB,eAAa,QAAQ,GAAG,QAAQ,OAAO,cAAc,SAAS,WAAW,SAAS,eAAe,SAAS,IAAI,CAAC,EAAE,SAAS,CAAc,EAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAU,GAAG,CAAS,EAAE,SAAS,GAAc,sBAAsB,CAAC,EAAE,CAAC,GAAuB,EAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAU,QAAQ,GAAG,SAAS,OAAO,UAAU,QAAQ,EAAE,SAAS,2BAA2B,CAAC,CAAC,CAAC,CAAC,EAAuB,EAAM,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,MAAM,SAAS,WAAW,GAAG,EAAa,CAAC,EAAE,CAAC,SAAS,aAAa,EAAE,GAAG,EAAc,CAAC,EAAE,CAAC,UAAU,aAAa,EAAE,kBAAgB,eAAa,SAAS,SAAS,OAAO,UAAU,UAAU,6BAA6B,WAAW,2CAA2C,EAAE,QAAQ,EAAY,aAAa,GAAG,CAAC,EAAE,cAAc,MAAM,UAAU,mBAAmB,EAAE,cAAc,MAAM,UAAU,6BAA8B,EAAE,aAAa,GAAG,CAAC,EAAE,cAAc,MAAM,UAAU,gBAAgB,EAAE,cAAc,MAAM,UAAU,4BAA6B,EAAE,SAAS,CAAc,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,cAAc,SAAS,gBAAgB,MAAM,EAAE,SAAS,CAAc,EAAK,MAAM,CAAC,IAAI,EAAM,UAAU,IAAI,EAAM,MAAM,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,UAAU,OAAO,CAAC,CAAC,EAAe,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,MAAM,KAAK,MAAM,UAAU,wBAAwB,MAAM,GAAG,OAAO,GAAG,gBAAgB,EAAY,aAAa,MAAM,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,QAAQ,EAAE,EAAE,SAAsB,EAAK,MAAM,CAAC,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,CAAC,WAAW,CAAC,EAAE,SAAsB,EAAK,OAAO,CAAC,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAe,EAAM,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAc,EAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,aAAa,EAAE,MAAM,EAAU,GAAG,EAAU,QAAQ,cAAc,gBAAgB,EAAE,gBAAgB,WAAW,SAAS,QAAQ,EAAE,SAAS,EAAM,KAAK,CAAC,EAAE,GAA4B,EAAK,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,EAAU,QAAQ,GAAG,GAAG,CAAO,EAAE,SAAS,EAAM,SAAS,CAAC,EAAE,GAAe,EAAM,YAAyB,EAAK,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,EAAU,QAAQ,GAAG,GAAG,CAAO,EAAE,SAAS,EAAM,UAAU,CAAC,EAAe,EAAK,MAAM,CAAC,MAAM,CAAC,QAAQ,eAAe,QAAQ,YAAY,gBAAgB,EAAY,MAAM,OAAO,aAAa,EAAE,GAAG,CAAO,EAAE,SAAS,CAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,qBANnhH,IAAsD,IAAoD,EAM06G,EAAoB,EAAmB,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,8CAA8C,YAAY,0BAA0B,gBAAgB,EAAI,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,WAAW,EAAE,cAAc,CAAC,KAAK,EAAY,QAAQ,MAAM,eAAe,aAAa,GAAK,aAAa,OAAO,cAAc,MAAM,EAAE,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,SAAS,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,aAAa,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,WAAW,cAAc,UAAU,WAAW,OAAO,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAY,KAAK,MAAM,WAAW,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,WAAW,cAAc,UAAU,WAAW,KAAK,CAAC,CAAC,CAAC"}