import { useState, useMemo, useEffect } from 'react'; export const FetchedImageDrower = () => { const [urlState, setUrlState] = useState(null); const [loading, setLoading] = useState(false); const originalFetchRef = useRef(null); const spinnerStyle = "Default"; const { spinnerColor } = useMemo(() => { const purple = "rgb(188, 21, 177)"; const blue = "#007bff"; return { spinnerColor: spinnerStyle === "Default" ? purple : blue, }; }, [spinnerStyle]); const spinnerStyleInline = { width: 40, height: 40, border: `4px solid ${spinnerColor}`, borderTop: "4px solid transparent", borderRadius: "50%", animation: "spin 1s linear infinite", marginBottom: 12, }; const styleSheet = ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; useEffect(() => { const intervalId = setInterval(() => { if (window.startLoading) setLoading(true); if (window.fetchResult) { setUrlState(window.fetchResult.data.url); const parentChild = document.getElementById("Parent-child"); if (parentChild) parentChild.style.display = "block"; window.fetchResult = undefined; window.startLoading = false; setLoading(false); } }, 100); return () => { clearInterval(intervalId); delete window.fetchResult; delete window.startLoading; }; }, []); const FullscreenIcon = ({ onClick }) => ( ); const DownloadIcon = ({ onClick }) => ( ); const CopyIcon = ({ onClick }) => (

Copy image URL

); const copyToClipboard = (url) => { const input = document.createElement("input"); input.value = url; document.body.appendChild(input); input.select(); input.setSelectionRange(0, 99999); try { document.execCommand("copy"); console.log("Copied:", url); } catch (err) { console.error("Copy failed:", err); } document.body.removeChild(input); }; const downloadImage = async (url) => { try { const response = await fetch(url); const blob = await response.blob(); const blobUrl = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = blobUrl; a.download = "image.jpg"; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(blobUrl); } catch (error) { console.error("issue when try to download image:", error); } }; return (

{loading && (

)}

{/* Fullscreen открывает в новой вкладке */} window.open(urlState, "_blank")} />

copyToClipboard(urlState)} /> downloadImage(urlState)} />

); };