function UploadButtonAndLogic() { const [images, setImages] = React.useState([]); const [isUploading, setIsUploading] = React.useState(false); const [showUploadPopup, setShowUploadPopup] = React.useState(false); const [uploadMessage, setUploadMessage] = React.useState(''); const [deleteMessage, setDeleteMessage] = React.useState(''); const { data: session, status } = useSession(); React.useEffect(()=>{ if (status === "authenticated") { fetchUserImages(); } }, [ status ]); const fetchUserImages = async ()=>{ const response = await fetch('/api/db/myads-users-52', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `user_images` WHERE `user_id` = ?', values: [ session.user.id ] }) }); const data = await response.json(); setImages(data); }; const handleUpload = async (event)=>{ const file = event.target.files[0]; if (!file) return; setIsUploading(true); setUploadMessage(''); const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = async ()=>{ try { const response = await fetch('/api/cloudinary-image-uploader', { method: 'POST', body: JSON.stringify({ imageUrl: reader.result, action: 'upload' }) }); const data = await response.json(); if (data.success) { await saveImageToDatabase(data.result.secure_url, data.result.public_id); setUploadMessage('Upload successful!'); fetchUserImages(); } else { setUploadMessage('Upload failed. Please try again.'); } } catch (error) { setUploadMessage('An error occurred. Please try again.'); } finally{ setIsUploading(false); setShowUploadPopup(false); } }; }; const saveImageToDatabase = async (imageUrl, publicId)=>{ await fetch('/api/db/myads-users-52', { method: 'POST', body: JSON.stringify({ query: 'INSERT INTO `user_images` (`user_id`, `image_url`, `public_id`) VALUES (?, ?, ?)', values: [ session.user.id, imageUrl, publicId ] }) }); }; const handleDelete = async (publicId, id)=>{ setDeleteMessage(''); try { const response = await fetch('/api/cloudinary-image-uploader', { method: 'POST', body: JSON.stringify({ action: 'delete', publicId }) }); const data = await response.json(); if (data.success) { await deleteImageFromDatabase(id); setDeleteMessage('Image deleted successfully!'); fetchUserImages(); } else { setDeleteMessage('Failed to delete image. Please try again.'); } } catch (error) { setDeleteMessage('An error occurred. Please try again.'); } }; const deleteImageFromDatabase = async (id)=>{ await fetch('/api/db/myads-users-52', { method: 'POST', body: JSON.stringify({ query: 'DELETE FROM `user_images` WHERE `id` = ?', values: [ id ] }) }); }; if (status === "loading") { return /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 102, columnNumber: 12 }, __self: this }, "Loading..."); } if (status === "unauthenticated") { return /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 106, columnNumber: 12 }, __self: this }, "Please sign in to view your gallery."); } return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] min-h-screen p-4", __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-2xl mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, "My ads"), images.length < 10 ? /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowUploadPopup(true), className: "bg-black text-white border border-blue-500 px-4 py-2 rounded mb-4", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Upload Image") : /*#__PURE__*/ React.createElement("p", { className: "text-yellow-500 mb-4", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, "You've reached the maximum of 10 uploads. Please delete an image to upload more."), uploadMessage && /*#__PURE__*/ React.createElement("p", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 25 }, __self: this }, uploadMessage), deleteMessage && /*#__PURE__*/ React.createElement("p", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 25 }, __self: this }, deleteMessage), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, images.map((image)=>/*#__PURE__*/ React.createElement("div", { key: image.id, className: "relative", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.image_url, alt: "Gallery image", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(image.public_id, image.id), className: "absolute top-2 right-2 bg-black text-white border border-blue-500 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Delete")))), showUploadPopup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] p-4 rounded border border-blue-500", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, "Upload Image"), /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handleUpload, accept: "image/*", className: "text-white", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }), isUploading && /*#__PURE__*/ React.createElement("p", { className: "text-white mt-2", __source: { fileName: "", lineNumber: 142, columnNumber: 29 }, __self: this }, "Uploading..."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowUploadPopup(false), className: "mt-4 bg-black text-white border border-blue-500 px-4 py-2 rounded", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "Close")))); } function UploadButtonAndLogicStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 158, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UploadButtonAndLogic, { __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this })); } // Import your UploadButtonAndLogic component function MainComponent() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const [isFullscreen, setIsFullscreen] = React.useState(false); const { data: session, status } = useSession(); const [userImages, setUserImages] = React.useState([]); const [internalAds, setInternalAds] = React.useState([]); const [currentImageIndex, setCurrentImageIndex] = React.useState(0); const [allImages, setAllImages] = React.useState([]); const [bannerPosition, setBannerPosition] = React.useState(100); React.useEffect(()=>{ if (status === "authenticated") { fetchImages(); } }, [ status ]); const fetchImages = async ()=>{ try { const userImageUrls = await fetchUserImages(); const internalAdUrls = await fetchInternalAds(); setUserImages(userImageUrls); setInternalAds(internalAdUrls); setAllImages(combineAds(userImageUrls, internalAdUrls)); } catch (error) { console.error("Error fetching images:", error); } }; const fetchUserImages = async ()=>{ const response = await fetch("/api/db/myads-users-52", { method: "POST", body: JSON.stringify({ query: "SELECT `image_url` FROM `user_images` WHERE `user_id` = ?", values: [ session.user.id ] }) }); const data = await response.json(); return Array.isArray(data) ? data.map((item)=>item.image_url) : []; }; const fetchInternalAds = async ()=>{ try { const response = await fetch("/api/db/myads-internal-ads", { method: "POST", body: JSON.stringify({ query: "SELECT `image_url` FROM `user_images`", values: [] }) }); const data = await response.json(); return Array.isArray(data) ? data.map((item)=>item.image_url) : []; } catch (error) { console.error("Error fetching internal ads:", error); return []; } }; const combineAds = (userImages, internalAds)=>{ const combinedImages = []; const totalImages = Math.max(userImages.length, 9); for(let i = 0; i < totalImages; i++){ if (internalAds.length > 0 && i % 10 === 0) { combinedImages.push(internalAds[i / 10 % internalAds.length]); } if (i < userImages.length) { combinedImages.push(userImages[i]); } } // Add any remaining internal ads at the end internalAds.forEach((ad, index)=>{ if (index % 10 === 0) { combinedImages.push(ad); } }); return combinedImages; }; const toggleMenu = ()=>{ setIsMenuOpen(!isMenuOpen); }; const toggleFullscreen = ()=>{ if (!isFullscreen) { if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(); } else if (document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); } setIsFullscreen(true); } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } setIsFullscreen(false); } }; React.useEffect(()=>{ const handleFullscreenChange = ()=>{ if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { setIsFullscreen(false); } }; document.addEventListener("fullscreenchange", handleFullscreenChange); document.addEventListener("mozfullscreenchange", handleFullscreenChange); document.addEventListener("webkitfullscreenchange", handleFullscreenChange); document.addEventListener("msfullscreenchange", handleFullscreenChange); return ()=>{ document.removeEventListener("fullscreenchange", handleFullscreenChange); document.removeEventListener("mozfullscreenchange", handleFullscreenChange); document.removeEventListener("webkitfullscreenchange", handleFullscreenChange); document.removeEventListener("msfullscreenchange", handleFullscreenChange); }; }, []); React.useEffect(()=>{ if (isFullscreen && allImages.length > 0) { const imageInterval = setInterval(()=>{ setCurrentImageIndex((prevIndex)=>(prevIndex + 1) % allImages.length); }, 10000); const bannerInterval = setInterval(()=>{ setBannerPosition((prevPosition)=>prevPosition <= -100 ? 100 : prevPosition - 1); }, 30); // Adjusted for smoother scrolling return ()=>{ clearInterval(imageInterval); clearInterval(bannerInterval); }; } }, [ isFullscreen, allImages ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 169, columnNumber: 5 }, __self: this }, !isFullscreen && /*#__PURE__*/ React.createElement("header", { className: "bg-black text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMenu, className: "text-2xl", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: toggleFullscreen, className: "text-2xl", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-expand", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, "my", /*#__PURE__*/ React.createElement("span", { className: "text-blue-500", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, "Ads"))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-50", __source: { fileName: "", lineNumber: 187, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black text-white p-4 w-64 h-full", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMenu, className: "mb-4 text-2xl", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }), " Close"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 194, columnNumber: 17 }, __self: this }, status === "authenticated" ? /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "block hover:text-blue-500", __source: { fileName: "", lineNumber: 196, columnNumber: 21 }, __self: this }, "Logout") : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "block hover:text-blue-500", __source: { fileName: "", lineNumber: 203, columnNumber: 21 }, __self: this }, "Login")))))), isFullscreen ? /*#__PURE__*/ React.createElement("div", { className: "relative w-screen h-screen bg-black overflow-hidden", __source: { fileName: "", lineNumber: 218, columnNumber: 9 }, __self: this }, allImages.length > 0 && /*#__PURE__*/ React.createElement("img", { src: allImages[currentImageIndex], alt: `Advertisement ${currentImageIndex + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 text-white text-6xl font-bold", __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this }, "my", /*#__PURE__*/ React.createElement("span", { className: "text-blue-500", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, "Ads")), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 h-24 bg-black bg-opacity-70 overflow-hidden", __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-nowrap text-white text-6xl" // Increased font size , style: { transform: `translateX(${bannerPosition}%)` }, __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, "powered by my", /*#__PURE__*/ React.createElement("span", { className: "text-blue-500", __source: { fileName: "", lineNumber: 234, columnNumber: 28 }, __self: this }, "Ads"), ".created.app"))) : /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 240, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(UploadButtonAndLogic, { __source: { fileName: "", lineNumber: 241, columnNumber: 11 }, __self: this }))); }