\n Loading...\n

\n \n );\n }\n\n // Show login form if not authenticated\n if (!authenticated) {\n return refetch()} />;\n }\n\n // User is authenticated, show the main app\n return ;\n}\n\nfunction AuthenticatedApp() {\n const [displayBits, setDisplayBits] = useState(\n new Array(28 * 14).fill(0),\n );\n const [statusMessage, setStatusMessage] = useState<\n {\n type: \"success\" | \"error\" | \"info\";\n text: string;\n } | null\n >(null);\n const [isPolling, setIsPolling] = useState(false);\n const [currentContent, setCurrentContent] = useState(null);\n\n // Helper function to decode a frame\n const decodeFrame = (frame: any): number[] => {\n const decoded = atob(frame.data_b64);\n const bytes = new Uint8Array(decoded.length);\n for (let i = 0; i < decoded.length; i++) {\n bytes[i] = decoded.charCodeAt(i);\n }\n\n // Unpack bits (little-endian)\n const bits: number[] = [];\n for (let byteIdx = 0; byteIdx < bytes.length; byteIdx++) {\n for (let bitIdx = 0; bitIdx < 8; bitIdx++) {\n if (bits.length < 28 * 14) {\n bits.push((bytes[byteIdx] >> bitIdx) & 1);\n }\n }\n }\n return bits;\n };\n\n // Animate through frames\n useEffect(() => {\n if (\n !currentContent || !currentContent.frames ||\n currentContent.frames.length === 0\n ) {\n return;\n }\n\n const frames = currentContent.frames;\n const playback = currentContent.playback || {};\n const shouldLoop = playback.loop !== false; // Default to true\n\n let currentFrameIndex = 0;\n let animationTimeout: number;\n\n const showNextFrame = () => {\n if (currentFrameIndex >= frames.length) {\n if (shouldLoop) {\n currentFrameIndex = 0; // Loop back to start\n } else {\n return; // Stop animation\n }\n }\n\n const frame = frames[currentFrameIndex];\n const bits = decodeFrame(frame);\n setDisplayBits(bits);\n\n const duration = frame.duration_ms || 100; // Default 100ms per frame\n currentFrameIndex++;\n\n animationTimeout = globalThis.setTimeout(showNextFrame, duration);\n };\n\n // Start animation\n showNextFrame();\n\n return () => {\n if (animationTimeout) clearTimeout(animationTimeout);\n };\n }, [currentContent]);\n\n // Poll the content endpoint to update display\n useEffect(() => {\n let interval: number;\n\n const pollContent = async () => {\n try {\n const response = await fetch(\"/api/flipdot/content\", {\n headers: {\n \"X-API-Key\": \"local-dev-key\",\n },\n });\n\n if (response.ok) {\n const data = await response.json();\n\n if (data.status === \"updated\" && data.playlist && data.playlist.length > 0) {\n // Use first item from playlist\n setCurrentContent(data.playlist[0]);\n } else if (data.status === \"clear\" || (data.status === \"updated\" && (!data.playlist || data.playlist.length === 0))) {\n setCurrentContent(null);\n setDisplayBits(new Array(28 * 14).fill(0));\n }\n }\n } catch (error) {\n console.error(\"Error polling content:\", error);\n }\n };\n\n if (isPolling) {\n pollContent(); // Initial poll\n interval = globalThis.setInterval(pollContent, 2000); // Poll every 2s\n }\n\n return () => {\n if (interval) clearInterval(interval);\n };\n }, [isPolling]);\n\n // Auto-start polling\n useEffect(() => {\n setIsPolling(true);\n }, []);\n\n const handleSendMessage = async (formData: {\n text: string;\n priority: number;\n duration: number;\n scroll: boolean;\n font: string;\n }) => {\n try {\n const response = await fetch(\"/api/flipdot/text\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-API-Key\": \"local-dev-key\",\n },\n body: JSON.stringify({\n text: formData.text.toUpperCase(),\n priority: formData.priority,\n ttl_ms: formData.duration * 1000,\n scroll: formData.scroll,\n font: formData.font,\n }),\n });\n\n const result = await response.json();\n\n if (response.ok) {\n const typeMsg = result.type === \"scrolling_text\" ? \" (Scrolling)\" : \"\";\n setStatusMessage({\n type: \"success\",\n text: `Message sent! Priority: ${formData.priority}${typeMsg}`,\n });\n } else {\n setStatusMessage({\n type: \"error\",\n text: result.error || \"Failed to send message\",\n });\n }\n } catch (error) {\n setStatusMessage({\n type: \"error\",\n text: \"Network error: \" + (error as Error).message,\n });\n }\n };\n\n const handleClearAll = async () => {\n try {\n const response = await fetch(\"/api/flipdot/clear\", {\n method: \"POST\",\n headers: {\n \"X-API-Key\": \"local-dev-key\",\n },\n });\n\n if (response.ok) {\n setStatusMessage({\n type: \"success\",\n text: \"All messages cleared\",\n });\n setDisplayBits(new Array(28 * 14).fill(0));\n } else {\n const result = await response.json();\n setStatusMessage({\n type: \"error\",\n text: result.error || \"Failed to clear messages\",\n });\n }\n } catch (error) {\n setStatusMessage({\n type: \"error\",\n text: \"Network error: \" + (error as Error).message,\n });\n }\n };\n\n return (\n

\n FlipDot Display Control\n

\n 28×14 Pixel Display Simulator\n

\n\n \n \n

\n setIsPolling(!isPolling)}\n isPolling={isPolling}\n />\n {statusMessage && (\n setStatusMessage(null)}\n />\n )}\n

\n\n \n

\n Content Server v2.0 |{\" \"}\n \n View API\n \n

\n \n \n );\n}\n","deleted","label",[172,154],"frontend","permalink","https://www.val.town/x/drewmcdonald/flipdot/code/frontend/App.tsx","extension","actionData","errors"]