\n {\n (e.target as HTMLImageElement).src = `https://placehold.co/${width}x${\n isUploaded ? width : IMAGE_WIDTH\n }/333/eee?text=Error`;\n (e.target as HTMLImageElement).alt = \"Error loading image\";\n }}\n />\n

\n {\n (e.target as HTMLImageElement).style.display = \"none\";\n }}\n />\n

\n {caption &&

{caption}

}\n \n );\n});\n\n// --- Gradient styles ---\n// (Keep gradientStyles as is)\nconst gradientStyles = `\n.gradient-sparrow { background-image: linear-gradient( hsl(359, 70%, 50%), hsl(16, 70%, 55%), hsl(33, 70%, 60%), hsl(45, 70%, 65%), hsl(58, 70%, 70%), hsl(58, 70%, 75%), hsl(58, 70%, 80%), hsl(96, 70%, 75%), hsl(146, 70%, 70%), hsl(183, 70%, 65%), hsl(225, 70%, 60%), hsl(265, 70%, 55%), hsl(303, 70%, 50%) ); }\n.gradient-deer { background-image: linear-gradient( hsl(0, 0%, 10%) 30%, hsl(104, 30%, 80%) 45%, hsl(273, 25%, 30%) 65%, hsl(0, 0%, 5%) 70% ); }\n.gradient-tech { background-image: linear-gradient( 45deg, hsl(180, 100%, 50%), hsl(210, 100%, 60%), hsl(240, 80%, 60%), hsl(280, 80%, 55%), hsl(180, 100%, 50%) ); }\n.gradient-sunset { background-image: linear-gradient(to right, #ff7e5f, #feb47b); }\n.gradient-ocean { background-image: linear-gradient(to right, #00c6ff, #0072ff); }\n.gradient-purple { background-image: linear-gradient(to right, #da22ff, #9733ee); }\n`;\n\n// --- Main App Component ---\nfunction App() {\n const [uploadedImage, setUploadedImage] = useState(null);\n const [selectedTextureUrl, setSelectedTextureUrl] = useState(\n `${BASE_TEXTURE_URL}${patternsData[0].downloadUrl}`,\n );\n const [selectedGradient, setSelectedGradient] = useState(\"gradient-tech\");\n const [isRecording, setIsRecording] = useState(false);\n const [recordProgress, setRecordProgress] = useState(0);\n const uploadedImageRef = useRef(null);\n\n // (Keep baseImages, gradientClasses, patternsToDisplay, handleFileChange as is)\n const baseImages = [\n \"https://maxm-imggenurl.web.val.run/a-futuristic-cyberpunk-landscape-with-neon-lights\",\n \"https://maxm-imggenurl.web.val.run/a-serene-mountain-landscape-with-misty-peaks\",\n \"https://maxm-imggenurl.web.val.run/detailed-close-up-of-a-metallic-robotic-eye-glowing-blue\",\n \"https://maxm-imggenurl.web.val.run/abstract-geometric-pattern-in-pastel-colors\",\n \"https://maxm-imggenurl.web.val.run/bioluminescent-underwater-scene-with-glowing-coral\",\n \"https://maxm-imggenurl.web.val.run/steampunk-cityscape-with-airships-and-gears\",\n ];\n const gradientClasses = [\n \"gradient-sparrow\",\n \"gradient-deer\",\n \"gradient-tech\",\n \"gradient-sunset\",\n \"gradient-ocean\",\n \"gradient-purple\",\n ];\n const patternsToDisplay = patternsData.slice(0, 24);\n const handleFileChange = (event: React.ChangeEvent) => {\n const file = event.target.files?.[0];\n if (file) {\n const reader = new FileReader();\n reader.onloadend = () => {\n setUploadedImage(reader.result as string);\n };\n reader.readAsDataURL(file);\n }\n };\n\n // --- Video Export Implementation (Using dom-to-image-more namespace) ---\n const handleExportVideo = async () => {\n // **MODIFIED:** Add specific logging before the check\n console.log(\"handleExportVideo called. State:\", {\n isRecording,\n hasRef: !!uploadedImageRef.current, // Log if ref exists (true/false)\n hasDomToImage: !!domtoimage, // Log if library object exists (true/false)\n });\n\n // **MODIFIED:** Updated check with specific reasons and logging\n // Check if the library object exists and has the 'toPng' method needed\n const isLibraryReady = domtoimage && typeof domtoimage.toPng === \"function\";\n\n if (isRecording || !uploadedImageRef.current || !isLibraryReady) {\n let reason = \"\";\n if (isRecording) reason = \"Already recording.\";\n else if (!uploadedImageRef.current) reason = \"Target element ref not found.\";\n else if (!isLibraryReady) reason = \"dom-to-image library not loaded or invalid.\"; // More specific\n else reason = \"Unknown check failure.\";\n\n console.warn(`Export prevented: ${reason}`); // More specific warning\n\n // Optional: Add specific alert if library check fails\n if (!isLibraryReady) {\n alert(\"Error: dom-to-image library failed to load or is not valid. Cannot export video.\");\n }\n return; // Stop execution\n }\n\n // If we reach here, the checks passed\n setIsRecording(true);\n setRecordProgress(0);\n\n const targetElement = uploadedImageRef.current; // The perspective-wrapper div\n const shaderElement = targetElement.querySelector(\".shader\") as HTMLElement; // The inner shader div\n\n if (!shaderElement) {\n /* ... error handling ... */\n console.error(\"Shader element not found for recording.\");\n setIsRecording(false); // Ensure state is reset\n return;\n }\n\n // --- Animation & Recording Parameters ---\n const durationSeconds = 5;\n const fps = 20;\n const totalFrames = durationSeconds * fps;\n const videoBitsPerSecond = 2000000;\n\n // --- animateFrame function remains the same ---\n const animateFrame = (frame: number) => {\n const progress = frame / totalFrames;\n const angle = progress * Math.PI * 2 * 2;\n const rotateX = -Math.sin(angle) * (MAX_ROTATION * 0.8);\n const rotateY = Math.cos(angle) * (MAX_ROTATION * 0.8);\n const bgPosX = (Math.cos(angle + Math.PI / 4) + 1) / 2 * 100;\n const bgPosY = (Math.sin(angle + Math.PI / 4) + 1) / 2 * 100;\n shaderElement.style.setProperty(\"--rotate-x\", `${rotateX}deg`);\n shaderElement.style.setProperty(\"--rotate-y\", `${rotateY}deg`);\n shaderElement.style.setProperty(\"--bg-pos-x\", `${bgPosX}%`);\n shaderElement.style.setProperty(\"--bg-pos-y\", `${bgPosY}%`);\n };\n\n // --- Setup Canvas and MediaRecorder ---\n let hiddenCanvas: HTMLCanvasElement | null = null;\n let mediaRecorder: MediaRecorder | null = null;\n let recordedChunks: Blob[] = [];\n let stream: MediaStream | null = null;\n\n try {\n const rect = targetElement.getBoundingClientRect();\n const canvasWidth = rect.width;\n const canvasHeight = rect.height;\n if (canvasWidth <= 0 || canvasHeight <= 0) throw new Error(\"Target element has zero dimensions.\");\n\n hiddenCanvas = document.createElement(\"canvas\");\n hiddenCanvas.width = canvasWidth;\n hiddenCanvas.height = canvasHeight;\n const ctx = hiddenCanvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2D context from canvas.\");\n\n // --- MediaRecorder setup remains the same ---\n stream = hiddenCanvas.captureStream(fps);\n mediaRecorder = new MediaRecorder(stream, {\n mimeType: \"video/webm;codecs=vp9\",\n bitsPerSecond: videoBitsPerSecond,\n });\n mediaRecorder.ondataavailable = (event) => {\n if (event.data.size > 0) recordedChunks.push(event.data);\n };\n mediaRecorder.onstop = () => {\n /* ... (same download logic as before) ... */\n console.log(\"Recording stopped. Processing video...\");\n const blob = new Blob(recordedChunks, { type: \"video/webm\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = \"holographic_tilt_video.webm\";\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n console.log(\"Video download triggered.\");\n recordedChunks = [];\n stream?.getTracks().forEach(track => track.stop());\n hiddenCanvas = null;\n setIsRecording(false);\n setRecordProgress(0);\n if (shaderElement) {\n /* ... (reset styles) ... */\n shaderElement.style.setProperty(\"--rotate-x\", `0deg`);\n shaderElement.style.setProperty(\"--rotate-y\", `0deg`);\n shaderElement.style.setProperty(\"--bg-pos-x\", `50%`);\n shaderElement.style.setProperty(\"--bg-pos-y\", `50%`);\n }\n };\n mediaRecorder.onerror = (event) => {\n /* ... (same error handling as before) ... */\n console.error(\"MediaRecorder Error:\", (event as any).error || event);\n alert(`MediaRecorder Error: ${(event as any).error?.message || \"Unknown error\"}`);\n setIsRecording(false);\n setRecordProgress(0);\n stream?.getTracks().forEach(track => track.stop());\n hiddenCanvas = null;\n if (shaderElement) {\n /* ... (reset styles) ... */\n shaderElement.style.setProperty(\"--rotate-x\", `0deg`);\n shaderElement.style.setProperty(\"--rotate-y\", `0deg`);\n shaderElement.style.setProperty(\"--bg-pos-x\", `50%`);\n shaderElement.style.setProperty(\"--bg-pos-y\", `50%`);\n }\n };\n\n // --- Start Recording ---\n mediaRecorder.start();\n console.log(\"Recording started...\");\n\n // --- Animation Loop (Using dom-to-image namespace) ---\n let currentFrame = 0;\n const recordFrame = () => {\n if (currentFrame >= totalFrames || !isRecording) {\n if (mediaRecorder?.state === \"recording\") mediaRecorder.stop();\n return;\n }\n\n animateFrame(currentFrame);\n setRecordProgress(Math.round((currentFrame / totalFrames) * 100));\n\n // --- Capture Frame using dom-to-image-more ---\n new Promise(async (resolve, reject) => {\n try {\n await new Promise(res => setTimeout(res, 30));\n\n const options = { width: canvasWidth, height: canvasHeight };\n\n // **MODIFIED:** Call using namespace if needed (already correct)\n const dataUrl = await domtoimage.toPng(targetElement, options);\n\n const img = new Image();\n img.onload = () => {\n ctx.clearRect(0, 0, hiddenCanvas!.width, hiddenCanvas!.height);\n ctx.drawImage(img, 0, 0, hiddenCanvas!.width, hiddenCanvas!.height);\n resolve();\n };\n img.onerror = (err) => {\n console.error(\"Failed to load generated image data URL\", err);\n reject(new Error(\"Image loading failed\"));\n };\n img.src = dataUrl;\n } catch (error) {\n console.error(`Error capturing frame ${currentFrame} with dom-to-image:`, error);\n reject(error);\n }\n }).then(() => {\n currentFrame++;\n requestAnimationFrame(recordFrame);\n }).catch((error) => {\n alert(`Error during video generation (frame ${currentFrame}). Check console.`);\n if (mediaRecorder?.state === \"recording\") mediaRecorder.stop();\n });\n };\n\n requestAnimationFrame(recordFrame); // Start the loop\n } catch (error) {\n /* ... (same setup error handling as before) ... */\n console.error(\"Error setting up video recording:\", error);\n alert(\"Failed to initialize video recording. See console for details.\");\n setIsRecording(false);\n setRecordProgress(0);\n stream?.getTracks().forEach(track => track.stop());\n hiddenCanvas = null;\n if (shaderElement) {\n /* ... (reset styles) ... */\n shaderElement.style.setProperty(\"--rotate-x\", `0deg`);\n shaderElement.style.setProperty(\"--rotate-y\", `0deg`);\n shaderElement.style.setProperty(\"--bg-pos-x\", `50%`);\n shaderElement.style.setProperty(\"--bg-pos-y\", `50%`);\n }\n }\n }; // End of handleExportVideo\n\n // --- Render ---\n // (Keep JSX return structure as is, button check slightly adjusted)\n return (\n

React Holographic Image Tool

Upload an image or move mouse/touch over grid images

\n\n {/* --- Upload Section --- */}\n \n

Upload Your Image

\n \n {uploadedImage && (\n \n {/* --- Controls --- */}\n \n Texture:\n setSelectedTextureUrl(e.target.value)}\n style={{\n padding: \"0.3rem\",\n borderRadius: \"4px\",\n backgroundColor: \"#333\",\n color: \"#eee\",\n border: \"1px solid #555\",\n }}\n disabled={isRecording}\n >\n {patternsData.map(p => (\n \n ))}\n \n Gradient:\n setSelectedGradient(e.target.value)}\n style={{\n padding: \"0.3rem\",\n borderRadius: \"4px\",\n backgroundColor: \"#333\",\n color: \"#eee\",\n border: \"1px solid #555\",\n }}\n disabled={isRecording}\n >\n {gradientClasses.map(g => (\n \n ))}\n \n

\n {/* --- Display Uploaded Image --- */}\n \n {/* --- Export Button --- */}\n

\n {/* **MODIFIED:** Button disabled check uses isLibraryReady */}\n \n {isRecording ? `Recording... ${recordProgress}%` : \"Export Tilt Video\"}\n \n {isRecording && (\n

\n This might take a while and may slow down your browser...\n

\n )}\n {!isRecording && (\n

\n (Note: Video quality may vary due to CSS capture limitations)\n

\n )}\n {/* **MODIFIED:** Error message check uses isLibraryReady */}\n {!(domtoimage && typeof domtoimage.toPng === \"function\") && !isRecording && (\n

\n Error: Capture library failed to load correctly.\n

\n )}\n

\n \n )}\n \n\n {/* --- Grid Container --- */}\n {/* (Keep Grid Container as is) */}\n

Example Grid

\n \n {patternsToDisplay.map((pattern, index) => {\n if (!pattern) return null;\n const fullTextureUrl = `${BASE_TEXTURE_URL}${pattern.downloadUrl}`;\n const baseImageSrc = baseImages[index % baseImages.length];\n const gradientClass = gradientClasses[index % gradientClasses.length];\n return (\n \n );\n })}\n \n\n {/* --- Footer --- */}\n {/* (Keep Footer as is) */}\n \n \n );\n}\n\n// --- Client-side rendering ---\n// (Keep client function as is)\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) createRoot(rootElement).render();\n else console.error(\"Root element not found\");\n}\nif (typeof document !== \"undefined\") { client(); }\n\n// --- Server-side rendering (SSR) ---\n// (Keep server function as is, including all CSS)\nexport async function server(request: Request): Promise {\n return new Response(\n `Interactive Holographic Tool

`,\n { headers: { \"content-type\": \"text/html; charset=utf-8\" } },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/salon/untitled-7077/code/main.tsx","extension","actionData","errors"]