function MainComponent() { const [searchResults, setSearchResults] = React.useState([]); const [selectedVideo, setSelectedVideo] = React.useState(null); const [loading, setLoading] = React.useState(false); const [videoSrc, setVideoSrc] = React.useState(''); const handleSearch = async (event)=>{ event.preventDefault(); const query = event.target.query.value; setLoading(true); fetch(`/integrations/google-search/search?q=${encodeURIComponent(query + ' site:youtube.com')}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setSearchResults(data.items.filter((item)=>item.displayLink.includes('youtube.com'))); setLoading(false); }); }; const handleSelectVideo = (link)=>{ setSelectedVideo(link); setLoading(true); const videoId = link.split('v=')[1]; fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: `https://www.youtube.com/watch?v=${videoId}`, return_text: false }) }).then((response)=>response.text()).then((data)=>{ const regex = /"url":"(https[^"]+\.mp4)"/; const mp4Link = data.match(regex)[1].replace(/\\u0026/g, '&'); setVideoSrc(mp4Link); setLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f9f9f9]", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-[#333] mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Youtube Video Finder"), /*#__PURE__*/ React.createElement("form", { className: "flex w-full max-w-[500px]", onSubmit: handleSearch, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "query", placeholder: "Search for videos", className: "flex-1 p-4 border-2 border-r-0 border-[#ddd] focus:outline-none", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-8 bg-[#FF0000] text-white border-2 border-[#FF0000] hover:bg-[#E90000]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Search"))), loading ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Loading...") : selectedVideo ? /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedVideo(null), className: "my-4 bg-[#ddd] p-2", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Back to results"), /*#__PURE__*/ React.createElement("video", { width: "560", height: "315", controls: true, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: videoSrc, type: "video/mp4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }))) : /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px]", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-[#ddd]", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, searchResults.map((video, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex p-4 hover:bg-[#f1f1f1]", onClick: ()=>handleSelectVideo(video.link), __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://i.ytimg.com/vi/${video.link.split('/').pop().split('?v=')[1]}/default.jpg`, alt: `Thumbnail for ${video.title}`, className: "w-[168px] h-[94px]", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, video.displayLink), /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, video.snippet))))))); }