function MainComponent() { const [url, setUrl] = React.useState(""); const [videoUrl, setVideoUrl] = React.useState(""); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(""); const [copied, setCopied] = React.useState(false); const [downloadStarted, setDownloadStarted] = React.useState(false); // Function to validate Pinterest URL const isValidPinterestUrl = (url)=>{ return url.trim() !== "" && url.includes("pinterest"); }; const handleSubmit = async (e)=>{ e.preventDefault(); // Validate URL before submitting if (!isValidPinterestUrl(url)) { setError("Please enter a valid Pinterest URL"); return; } setLoading(true); setError(""); setVideoUrl(""); setCopied(false); setDownloadStarted(false); try { const response = await fetch("/api/download-pinterest-video", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }) }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || "Failed to fetch video"); } if (data.success && data.videoUrl) { setVideoUrl(data.videoUrl); console.log("Video URL found:", data.videoUrl); } else { setError(data.error || "No video found on this Pinterest page"); } } catch (error) { console.error("Error processing request:", error); setError(error.message || "An error occurred while processing your request"); } finally{ setLoading(false); } }; const copyToClipboard = ()=>{ if (!videoUrl) return; navigator.clipboard.writeText(videoUrl).then(()=>{ setCopied(true); setTimeout(()=>setCopied(false), 2000); }).catch((err)=>{ console.error("Failed to copy:", err); setError("Failed to copy to clipboard"); }); }; const downloadVideo = ()=>{ if (!videoUrl) return; try { setDownloadStarted(true); const a = document.createElement("a"); a.href = videoUrl; a.download = "pinterest-video.mp4"; document.body.appendChild(a); a.click(); document.body.removeChild(a); // Reset download started after a delay setTimeout(()=>setDownloadStarted(false), 2000); } catch (err) { console.error("Download error:", err); setError("Failed to download video. Try copying the link instead."); setDownloadStarted(false); } }; // Function to handle URL paste from clipboard const handlePasteFromClipboard = async ()=>{ try { const clipboardText = await navigator.clipboard.readText(); if (isValidPinterestUrl(clipboardText)) { setUrl(clipboardText); } } catch (err) { console.error("Failed to read clipboard:", err); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center", style: { backgroundColor: "transparent" }, __source: { fileName: "", lineNumber: 109, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-6 rounded-lg shadow-lg", style: { backgroundColor: "rgba(255, 255, 255, 0.8)" }, __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-6 font-roboto", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, "Pinterest Video Downloader"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 relative", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "Paste Pinterest video URL here", className: "w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handlePasteFromClipboard, className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700", title: "Paste from clipboard", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paste", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full bg-[#E60023] hover:bg-[#D50020] text-white font-bold py-2 px-4 rounded-md transition duration-300", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }), " Processing...") : "Download Video")), error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-3 bg-red-100 text-red-700 rounded-md", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, error)), videoUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, "Video Found!"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-md transition duration-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, copied ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 173, columnNumber: 23 }, __self: this }), " Copied!") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy mr-2", __source: { fileName: "", lineNumber: 177, columnNumber: 23 }, __self: this }), " Copy Link")), /*#__PURE__*/ React.createElement("button", { onClick: downloadVideo, className: "flex-1 bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-md transition duration-300 flex items-center justify-center", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this }, downloadStarted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 187, columnNumber: 23 }, __self: this }), " Downloading...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 191, columnNumber: 23 }, __self: this }), " Save Video")))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("video", { controls: true, className: "w-full rounded-md shadow-sm", src: videoUrl, onError: (e)=>{ console.error("Video error:", e); setError("Error loading video preview. Try downloading directly."); }, __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "Your browser does not support the video tag.")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xs text-gray-500", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, 'If the video doesn\'t play, try using the "Save Video" button or copying the link.'))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 223, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 224, columnNumber: 11 }, __self: this }, "Enter a Pinterest video URL to download the video"), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-xs", __source: { fileName: "", lineNumber: 225, columnNumber: 11 }, __self: this }, "Works with Pinterest Pins, Reels, and Stories")))); }