function YouTubeUrlInputField({ url, setUrl }) { return /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Enter YouTube URL", className: "mb-4 p-2 border border-gray-300 rounded w-[400px]", name: "youtubeUrl", value: url, onChange: (e)=>setUrl(e.target.value), __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function YouTubeUrlInputFieldStory() { const [url, setUrl] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(YouTubeUrlInputField, { url: url, setUrl: setUrl, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function DownloadButton({ onClick, children }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded w-[400px]", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function DownloadButtonStory() { const handleDownload = ()=>{ // Dummy download handler alert('Download started'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DownloadButton, { onClick: handleDownload, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "Download")); } function MainComponent() { const [url, setUrl] = React.useState(''); const [format, setFormat] = React.useState('mp4'); const embedUrl = url.replace('watch?v=', 'embed/'); const handleDownload = async ()=>{ if (!url) return; const response = await fetch(`/download?url=${encodeURIComponent(url)}&format=${format}`); const blob = await response.blob(); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `video.${format}`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "YouTube Video Downloader"), /*#__PURE__*/ React.createElement(YouTubeUrlInputField, { url: url, setUrl: setUrl, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "mb-4 p-2 border border-gray-300 rounded w-[400px]", name: "format", value: format, onChange: (e)=>setFormat(e.target.value), __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "mp4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "MP4"), /*#__PURE__*/ React.createElement("option", { value: "webm", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "WEBM"), /*#__PURE__*/ React.createElement("option", { value: "mp3", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "MP3 (Audio Only)"), /*#__PURE__*/ React.createElement("option", { value: "mkv", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "MKV")), /*#__PURE__*/ React.createElement(DownloadButton, { onClick: handleDownload, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "Download"), url && /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full flex justify-center", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { className: "w-[400px] h-[225px] border border-gray-300 rounded", src: embedUrl, allowFullScreen: true, title: "Video Preview", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }))); }