[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_168":169,"_170":171},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_107":85,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":25,"_124":125,"_126":49,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",6,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","973b52ca-2783-11f0-b46e-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n/**\n * CameraSDK - A configurable webcam component that can be imported into other vals\n */\nexport const CameraView = ({ \n size = 100,\n defaultCorner = 'bottom-right',\n zoom = 1,\n margin = 20,\n showSource = false,\n mirrored = true\n}) => {\n const videoRef = useRef(null);\n const containerRef = useRef(null);\n const [error, setError] = useState(null);\n const [corner, setCorner] = useState(defaultCorner);\n\n // Setup camera\n useEffect(() => {\n if (typeof navigator === 'undefined' || !navigator.mediaDevices) {\n setError(\"MediaDevices API not available in this environment\");\n return;\n }\n \n async function setupCamera() {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n video: { \n facingMode: \"user\",\n ...(zoom !== 1 && { advanced: [{ zoom: zoom }] })\n },\n audio: false\n });\n \n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n videoRef.current.style.transform = '';\n \n // Apply digital zoom\n if (zoom !== 1) {\n videoRef.current.style.transform = `scale(${zoom})`;\n videoRef.current.style.transformOrigin = 'center';\n }\n \n // Apply mirroring\n if (mirrored) {\n const currentTransform = videoRef.current.style.transform || '';\n videoRef.current.style.transform = `${currentTransform} scaleX(-1)`;\n }\n }\n } catch (error) {\n console.error(\"Error accessing the camera:\", error);\n setError(\"Failed to access the camera. Please ensure you've granted the necessary permissions.\");\n }\n }\n \n setupCamera();\n\n // Cleanup function to stop the camera when component unmounts\n return () => {\n if (videoRef.current && videoRef.current.srcObject) {\n videoRef.current.srcObject.getTracks().forEach(track => track.stop());\n }\n };\n }, [zoom, mirrored]);\n\n // Move to next corner on click\n const moveToNextCorner = () => {\n const corners = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];\n const currentIndex = corners.indexOf(corner);\n const nextIndex = (currentIndex + 1) % corners.length;\n setCorner(corners[nextIndex]);\n };\n\n // Get position styles based on the current corner\n const getContainerStyle = () => {\n const style = {\n width: size,\n height: size,\n position: 'fixed',\n zIndex: 9999,\n cursor: 'pointer'\n };\n\n // Apply corner-specific positioning\n if (corner === 'top-left') {\n style.top = `${margin}px`;\n style.left = `${margin}px`;\n } else if (corner === 'top-right') {\n style.top = `${margin}px`;\n style.right = `${margin}px`;\n } else if (corner === 'bottom-left') {\n style.bottom = `${margin}px`;\n style.left = `${margin}px`;\n } else { // bottom-right\n style.bottom = `${margin}px`;\n style.right = `${margin}px`;\n }\n\n return style;\n };\n\n return (\n <>\n

\n {error ? (\n

{error}

\n ) : (\n

\n \n {showSource && (\n \n Camera by dcm31\n \n )}\n \n \n \n );\n};\n\n/**\n * Initialize the camera and mount it to a DOM node or to the document body if no target is specified\n */\nexport function initCamera({\n size = 100,\n defaultCorner = 'bottom-right',\n zoom = 1,\n margin = 20,\n showSource = false,\n mirrored = true,\n target = null\n} = {}) {\n // Early return if we're in a server-side environment\n if (typeof document === 'undefined' || typeof window === 'undefined') {\n console.warn('initCamera was called in a server-side environment');\n return () => {};\n }\n \n // Create container if target is not provided\n let container;\n let shouldRemoveContainer = false;\n \n if (target) {\n if (typeof target === 'string') {\n container = document.querySelector(target);\n if (!container) {\n console.error(`Target element \"${target}\" not found`);\n return () => {};\n }\n } else if (target instanceof HTMLElement) {\n container = target;\n } else {\n console.error('Target must be a CSS selector string or HTMLElement');\n return () => {};\n }\n } else {\n // Create container and append to body\n container = document.createElement('div');\n container.id = 'dcm31-camera-root';\n document.body.appendChild(container);\n shouldRemoveContainer = true;\n }\n \n // Render the camera\n const root = createRoot(container);\n root.render(\n \n );\n \n // Return function to clean up\n return function destroyCamera() {\n root.unmount();\n if (shouldRemoveContainer && container.parentNode) {\n container.parentNode.removeChild(container);\n }\n };\n}\n\n// New component for iframe demo\nconst IframeDemo = ({ valUrl, config }) => {\n const iframeRef = useRef(null);\n\n useEffect(() => {\n if (iframeRef.current) {\n const iframe = iframeRef.current;\n iframe.onload = () => {\n const message = {\n type: 'initCamera',\n config: config\n };\n iframe.contentWindow.postMessage(JSON.stringify(message), '*');\n };\n }\n }, [valUrl, config]);\n\n return (\n

\n \n

\n );\n};\n\n// Demo content for the standalone version\nconst DemoContent = () => {\n const [showMessage, setShowMessage] = useState(false);\n const [size, setSize] = useState(150);\n const [zoom, setZoom] = useState(1);\n const [corner, setCorner] = useState('bottom-right');\n const [margin, setMargin] = useState(20);\n const [showSource, setShowSource] = useState(true);\n const [mirrored, setMirrored] = useState(true);\n \n const [cameraVisible, setCameraVisible] = useState(true);\n const destroyCameraRef = useRef(null);\n\n const [valUrl, setValUrl] = useState('');\n const [isDemoMode, setIsDemoMode] = useState(false);\n \n useEffect(() => {\n return () => {\n if (destroyCameraRef.current) {\n destroyCameraRef.current();\n }\n };\n }, []);\n \n const updateCamera = () => {\n if (destroyCameraRef.current) {\n destroyCameraRef.current();\n }\n \n if (cameraVisible) {\n destroyCameraRef.current = initCamera({\n size,\n zoom,\n defaultCorner: corner,\n margin,\n showSource,\n mirrored\n });\n }\n };\n \n useEffect(() => {\n updateCamera();\n }, [size, zoom, corner, margin, showSource, mirrored, cameraVisible]);\n \n const copyToClipboard = (text) => {\n navigator.clipboard.writeText(text).then(() => {\n setShowMessage(true);\n setTimeout(() => {\n setShowMessage(false);\n }, 2000);\n }).catch(err => {\n console.error('Failed to copy: ', err);\n });\n };\n \n const quickStartCode = `import { initCamera } from \"https://esm.town/v/dcm31/demoCamera\";\n\n// Add a floating camera to your val\nconst destroyCamera = initCamera({\n size: ${size},\n zoom: ${zoom},\n defaultCorner: '${corner}',\n margin: ${margin},\n showSource: ${showSource},\n mirrored: ${mirrored}\n});\n\n// Optional: Call destroyCamera() when you want to remove it`;\n\n const handleDemoClick = () => {\n if (valUrl) {\n setIsDemoMode(true);\n }\n };\n\n const config = {\n size,\n zoom,\n defaultCorner: corner,\n margin,\n showSource,\n mirrored\n };\n\n if (isDemoMode) {\n return ;\n }\n\n return (\n

Camera SDK

A floating webcam component that you can easily add to any val. Click to move to the next corner.

\n \n

🚀 Demo Any Val

\n setValUrl(e.target.value)}\n placeholder=\"Enter Val URL\"\n />\n \n

Enter a Val URL and click \"Demo\" to see it with the camera. Refresh the page to return to this view.

\n\n

⚙️ Live Demo Configuration

\n \n Size: {size}px\n setSize(Number(e.target.value))} \n />\n \n

\n \n

\n \n Zoom: {zoom.toFixed(1)}x\n setZoom(Number(e.target.value))} \n />\n \n

\n \n

\n \n Corner:\n \n \n

\n \n

\n \n Margin: {margin}px\n setMargin(Number(e.target.value))} \n />\n \n

\n \n

\n \n setMirrored(e.target.checked)} \n />\n Mirror Camera\n \n

\n \n

\n \n setShowSource(e.target.checked)} \n />\n Show Source Link\n \n

\n \n

\n \n setCameraVisible(e.target.checked)} \n />\n Camera Visible\n \n

\n \n

✨ Quickstart

{quickStartCode}

\n \n {showMessage && Copied to clipboard!}\n

\n \n

Try it now! The camera should be visible in the bottom-right corner. Click it to cycle through corners.

\n );\n};\n\n// App component for the standalone demo\nfunction App() {\n return ;\n}\n\n// Client-side rendering function\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Run client-side rendering if in browser\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side rendering function for the standalone demo\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n dcm31's Camera SDK Demo\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\n// Styles for the camera component - isolated with dcm31-camera prefix to avoid conflicts\nconst cameraStyles = `\n@keyframes dcm31CameraMorphBlob {\n 0% {\n border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n }\n 50% {\n border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;\n }\n 100% {\n border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n }\n}\n\n@keyframes dcm31CameraSlowPulse {\n 0%, 100% {\n border-color: rgba(216, 191, 216, 0.8);\n }\n 50% {\n border-color: rgba(230, 210, 230, 1);\n }\n}\n\n@keyframes dcm31CameraSparkle {\n 0%, 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n}\n\n.dcm31-camera-container {\n overflow: hidden;\n background: #fff;\n animation: \n dcm31CameraMorphBlob 8s ease-in-out infinite,\n dcm31CameraSlowPulse 6s ease-in-out infinite;\n user-select: none;\n border: 4px solid rgba(216, 191, 216, 0.8);\n box-sizing: border-box;\n}\n\n.dcm31-camera-container::before {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border-radius: inherit;\n background: \n radial-gradient(circle at 10% 10%, gold 0%, transparent 10%),\n radial-gradient(circle at 90% 10%, gold 0%, transparent 10%),\n radial-gradient(circle at 10% 90%, gold 0%, transparent 10%),\n radial-gradient(circle at 90% 90%, gold 0%, transparent 10%),\n radial-gradient(circle at 20% 50%, gold 0%, transparent 10%),\n radial-gradient(circle at 80% 50%, gold 0%, transparent 10%),\n radial-gradient(circle at 50% 20%, gold 0%, transparent 10%),\n radial-gradient(circle at 50% 80%, gold 0%, transparent 10%);\n background-size: 300% 300%;\n animation: dcm31CameraSparkle 4s linear infinite;\n z-index: 1;\n pointer-events: none;\n mask-image: linear-gradient(to right, black 4px, transparent 4px),\n linear-gradient(to left, black 4px, transparent 4px),\n linear-gradient(to bottom, black 4px, transparent 4px),\n linear-gradient(to top, black 4px, transparent 4px);\n mask-size: 100% 100%;\n mask-repeat: no-repeat;\n mask-position: 0 0, 100% 0, 0 100%, 0 0;\n mask-composite: intersect;\n}\n\n.dcm31-camera-container video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.dcm31-camera-error {\n background-color: rgba(255, 235, 238, 0.9);\n color: #c62828;\n padding: 10px;\n font-size: 12px;\n text-align: center;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 90%;\n border-radius: 8px;\n}\n`;","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n/**\n * CameraSDK - A configurable webcam component that can be imported into other vals\n */\nexport const CameraView = ({ \n size = 100,\n defaultCorner = 'bottom-right',\n zoom = 1,\n margin = 20,\n showSource = false,\n mirrored = true,\n ringColor = 'rgba(216, 191, 216, 0.8)',\n mode = 'corner-cycle'\n}) => {\n const videoRef = useRef(null);\n const containerRef = useRef(null);\n const [error, setError] = useState(null);\n const [corner, setCorner] = useState(defaultCorner);\n const [isFullScreen, setIsFullScreen] = useState(false);\n\n // Setup camera\n useEffect(() => {\n if (typeof navigator === 'undefined' || !navigator.mediaDevices) {\n setError(\"MediaDevices API not available in this environment\");\n return;\n }\n \n async function setupCamera() {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n video: { \n facingMode: \"user\",\n ...(zoom !== 1 && { advanced: [{ zoom: zoom }] })\n },\n audio: false\n });\n \n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n videoRef.current.style.transform = '';\n \n // Apply digital zoom\n if (zoom !== 1) {\n videoRef.current.style.transform = `scale(${zoom})`;\n videoRef.current.style.transformOrigin = 'center';\n }\n \n // Apply mirroring\n if (mirrored) {\n const currentTransform = videoRef.current.style.transform || '';\n videoRef.current.style.transform = `${currentTransform} scaleX(-1)`;\n }\n }\n } catch (error) {\n console.error(\"Error accessing the camera:\", error);\n setError(\"Failed to access the camera. Please ensure you've granted the necessary permissions.\");\n }\n }\n \n setupCamera();\n\n // Cleanup function to stop the camera when component unmounts\n return () => {\n if (videoRef.current && videoRef.current.srcObject) {\n videoRef.current.srcObject.getTracks().forEach(track => track.stop());\n }\n };\n }, [zoom, mirrored]);\n\n // Move to next corner on click\n const moveToNextCorner = () => {\n const corners = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];\n const currentIndex = corners.indexOf(corner);\n const nextIndex = (currentIndex + 1) % corners.length;\n setCorner(corners[nextIndex]);\n };\n\n // Toggle full-screen mode\n const toggleFullScreen = () => {\n setIsFullScreen(!isFullScreen);\n };\n\n // Handle click based on mode\n const handleClick = () => {\n if (mode === 'corner-cycle') {\n moveToNextCorner();\n } else if (mode === 'full-screen-toggle') {\n toggleFullScreen();\n }\n };\n\n // Get position styles based on the current corner and full-screen state\n const getContainerStyle = () => {\n if (isFullScreen) {\n return {\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100vw',\n height: '100vh',\n zIndex: 9999,\n cursor: 'pointer'\n };\n }\n\n const style = {\n width: size,\n height: size,\n position: 'fixed',\n zIndex: 9999,\n cursor: 'pointer'\n };\n\n // Apply corner-specific positioning\n if (corner === 'top-left') {\n style.top = `${margin}px`;\n style.left = `${margin}px`;\n } else if (corner === 'top-right') {\n style.top = `${margin}px`;\n style.right = `${margin}px`;\n } else if (corner === 'bottom-left') {\n style.bottom = `${margin}px`;\n style.left = `${margin}px`;\n } else { // bottom-right\n style.bottom = `${margin}px`;\n style.right = `${margin}px`;\n }\n\n return style;\n };\n\n return (\n <>\n

\n {error ? (\n

{error}

\n ) : (\n

\n \n {showSource && !isFullScreen && (\n \n Camera by dcm31\n \n )}\n \n \n \n );\n};\n\n/**\n * Initialize the camera and mount it to a DOM node or to the document body if no target is specified\n */\nexport function initCamera({\n size = 100,\n defaultCorner = 'bottom-right',\n zoom = 1,\n margin = 20,\n showSource = false,\n mirrored = true,\n ringColor = 'rgba(216, 191, 216, 0.8)',\n mode = 'corner-cycle',\n target = null\n} = {}) {\n // Early return if we're in a server-side environment\n if (typeof document === 'undefined' || typeof window === 'undefined') {\n console.warn('initCamera was called in a server-side environment');\n return () => {};\n }\n \n // Create container if target is not provided\n let container;\n let shouldRemoveContainer = false;\n \n if (target) {\n if (typeof target === 'string') {\n container = document.querySelector(target);\n if (!container) {\n console.error(`Target element \"${target}\" not found`);\n return () => {};\n }\n } else if (target instanceof HTMLElement) {\n container = target;\n } else {\n console.error('Target must be a CSS selector string or HTMLElement');\n return () => {};\n }\n } else {\n // Create container and append to body\n container = document.createElement('div');\n container.id = 'dcm31-camera-root';\n document.body.appendChild(container);\n shouldRemoveContainer = true;\n }\n \n // Render the camera\n const root = createRoot(container);\n root.render(\n \n );\n \n // Return function to clean up\n return function destroyCamera() {\n root.unmount();\n if (shouldRemoveContainer && container.parentNode) {\n container.parentNode.removeChild(container);\n }\n };\n}\n\n// New component for iframe demo\nconst IframeDemo = ({ valUrl, config }) => {\n const iframeRef = useRef(null);\n\n useEffect(() => {\n if (iframeRef.current) {\n const iframe = iframeRef.current;\n iframe.onload = () => {\n const message = {\n type: 'initCamera',\n config: config\n };\n iframe.contentWindow.postMessage(JSON.stringify(message), '*');\n };\n }\n }, [valUrl, config]);\n\n return (\n

\n \n

\n );\n};\n\n// Demo content for the standalone version\nconst DemoContent = () => {\n const [showMessage, setShowMessage] = useState(false);\n const [size, setSize] = useState(150);\n const [zoom, setZoom] = useState(1);\n const [corner, setCorner] = useState('bottom-right');\n const [margin, setMargin] = useState(20);\n const [showSource, setShowSource] = useState(true);\n const [mirrored, setMirrored] = useState(true);\n const [ringColor, setRingColor] = useState('rgba(216, 191, 216, 0.8)');\n const [mode, setMode] = useState('corner-cycle');\n \n const [cameraVisible, setCameraVisible] = useState(true);\n const destroyCameraRef = useRef(null);\n\n const [valUrl, setValUrl] = useState('');\n const [isDemoMode, setIsDemoMode] = useState(false);\n \n useEffect(() => {\n return () => {\n if (destroyCameraRef.current) {\n destroyCameraRef.current();\n }\n };\n }, []);\n \n const updateCamera = () => {\n if (destroyCameraRef.current) {\n destroyCameraRef.current();\n }\n \n if (cameraVisible) {\n destroyCameraRef.current = initCamera({\n size,\n zoom,\n defaultCorner: corner,\n margin,\n showSource,\n mirrored,\n ringColor,\n mode\n });\n }\n };\n \n useEffect(() => {\n updateCamera();\n }, [size, zoom, corner, margin, showSource, mirrored, ringColor, mode, cameraVisible]);\n \n const copyToClipboard = (text) => {\n navigator.clipboard.writeText(text).then(() => {\n setShowMessage(true);\n setTimeout(() => {\n setShowMessage(false);\n }, 2000);\n }).catch(err => {\n console.error('Failed to copy: ', err);\n });\n };\n \n const quickStartCode = `import { initCamera } from \"https://esm.town/v/dcm31/demoCamera\";\n\n// Add a floating camera to your val\nconst destroyCamera = initCamera({\n size: ${size},\n zoom: ${zoom},\n defaultCorner: '${corner}',\n margin: ${margin},\n showSource: ${showSource},\n mirrored: ${mirrored},\n ringColor: '${ringColor}',\n mode: '${mode}'\n});\n\n// Optional: Call destroyCamera() when you want to remove it`;\n\n const handleDemoClick = () => {\n if (valUrl) {\n setIsDemoMode(true);\n }\n };\n\n const config = {\n size,\n zoom,\n defaultCorner: corner,\n margin,\n showSource,\n mirrored,\n ringColor,\n mode\n };\n\n if (isDemoMode) {\n return ;\n }\n\n return (\n

Camera SDK

A floating webcam component that you can easily add to any val. Click to move to the next corner or toggle full-screen mode.

\n \n

🚀 Demo Any Val

\n setValUrl(e.target.value)}\n placeholder=\"Enter Val URL\"\n />\n \n

Enter a Val URL and click \"Demo\" to see it with the camera. Refresh the page to return to this view.

\n\n

⚙️ Live Demo Configuration

\n \n Size: {size}px\n setSize(Number(e.target.value))} \n />\n \n

\n \n

\n \n Zoom: {zoom.toFixed(1)}x\n setZoom(Number(e.target.value))} \n />\n \n

\n \n

\n \n Corner:\n \n \n

\n \n

\n \n Margin: {margin}px\n setMargin(Number(e.target.value))} \n />\n \n

\n \n

\n \n Ring Color:\n setRingColor(e.target.value)} \n />\n \n

\n \n

\n \n Mode:\n \n \n

\n \n

\n \n setMirrored(e.target.checked)} \n />\n Mirror Camera\n \n

\n \n

\n \n setShowSource(e.target.checked)} \n />\n Show Source Link\n \n

\n \n

\n \n setCameraVisible(e.target.checked)} \n />\n Camera Visible\n \n

\n \n

✨ Quickstart

{quickStartCode}

\n \n {showMessage && Copied to clipboard!}\n

\n \n

Try it now! The camera should be visible in the {corner} corner. Click it to {mode === 'corner-cycle' ? 'cycle through corners' : 'toggle full-screen mode'}.

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\n// Styles for the camera component - isolated with dcm31-camera prefix to avoid conflicts\nconst cameraStyles = (ringColor) => `\n@keyframes dcm31CameraMorphBlob {\n 0% {\n border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n }\n 50% {\n border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;\n }\n 100% {\n border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n }\n}\n\n@keyframes dcm31CameraSlowPulse {\n 0%, 100% {\n border-color: ${ringColor};\n }\n 50% {\n border-color: ${ringColor.replace(/[\\d.]+\\)$/g, '1)')}; /* Increase opacity for pulse effect */\n }\n}\n\n@keyframes dcm31CameraSparkle {\n 0%, 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n}\n\n.dcm31-camera-container {\n overflow: hidden;\n background: #fff;\n animation: \n dcm31CameraMorphBlob 8s ease-in-out infinite,\n dcm31CameraSlowPulse 6s ease-in-out infinite;\n user-select: none;\n border: 4px solid ${ringColor};\n box-sizing: border-box;\n}\n\n.dcm31-camera-container.full-screen {\n animation: none;\n border: none;\n}\n\n.dcm31-camera-container::before {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border-radius: inherit;\n background: \n radial-gradient(circle at 10% 10%, ${ringColor} 0%, transparent 10%),\n radial-gradient(circle at 90% 10%, ${ringColor} 0%, transparent 10%),\n radial-gradient(circle at 10% 90%, ${ringColor} 0%, transparent 10%),\n radial-gradient(circle at 90% 90%, ${ringColor} 0%, transparent 10%),\n radial-gradient(circle at 20% 50%, ${ringColor} 0%, transparent 10%),\n radial-gradient(circle at 80% 50%, ${ringColor} 0%, transparent 10%),\n radial-gradient(circle at 50% 20%, ${ringColor} 0%, transparent 10%),\n radial-gradient(circle at 50% 80%, ${ringColor} 0%, transparent 10%);\n background-size: 300% 300%;\n animation: dcm31CameraSparkle 4s linear infinite;\n z-index: 1;\n pointer-events: none;\n mask-image: linear-gradient(to right, black 4px, transparent 4px),\n linear-gradient(to left, black 4px, transparent 4px),\n linear-gradient(to bottom, black 4px, transparent 4px),\n linear-gradient(to top, black 4px, transparent 4px);\n mask-size: 100% 100%;\n mask-repeat: no-repeat;\n mask-position: 0 0, 100% 0, 0 100%, 0 0;\n mask-composite: intersect;\n}\n\n.dcm31-camera-container.full-screen::before {\n display: none;\n}\n\n.dcm31-camera-container video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.dcm31-camera-error {\n background-color: rgba(255, 235, 238, 0.9);\n color: #c62828;\n padding: 10px;\n font-size: 12px;\n text-align: center;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 90%;\n border-radius: 8px;\n}\n`;","createdAt",["D",1745190513521],"branchVersion","branchId","97378550-2783-11f0-b46e-569c3dd06744","id","97373690-2783-11f0-b46e-569c3dd06744","instantDemo",["D",1746210657964],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",4,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":55,"_103":104,"_105":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":51,"_92":93,"_94":63,"_95":45,"_96":97},"isOwned",18,"main","projectId","forkedBranchId","a308815e-2783-11f0-b46e-569c3dd06744","forkedBranchVersion",0,"forkedProjectPrivacy","forkedProjectId","a3082e98-2783-11f0-b46e-569c3dd06744","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789588799&sig=a14eb9817176bf9786e020bfe2fb839d300621c44b97fc9c0f1d671ade6ad942","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":164,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":165,"_79":166,"_81":167,"_83":25},"tree",[159],"files",[159],"counts",{"_147":90,"_148":149,"_150":151,"_152":153,"_154":155},"contents",[139],"upstreamProject",{"_43":93,"_32":137,"_53":-5,"_54":-5,"_50":51,"_77":138},"upstreamBranch",{"_43":88,"_38":131,"_132":133,"_32":85,"_86":93,"_13":134,"_87":-5,"_89":-5,"_135":136,"_47":-5,"_83":25,"_50":51,"_96":97,"_62":63,"_95":137},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746210677788],"updatedAt",["D",1743956425641],27,"lockfileKey","1767126160889-esm.town_v_dcm31_demoCamera@27-main","demoCamera",{"_98":97,"_106":102},{"_43":140,"_32":28,"_30":31,"_141":-5,"_41":42,"_40":14,"_142":25,"_38":143,"_13":144,"_33":34,"_35":37,"_24":25,"_145":-5,"_27":146},"975ce980-2783-11f0-b46e-569c3dd06744","parentId","latest",["D",1745190513521],5,"label",[28],"pulls","branches",1,"forks",3,"envVars",{"_156":90,"_158":90},"connections",{"_156":90,"_157":90},"count","unfilledCount","emptyCount",{"_43":140,"_32":28,"_30":31,"_141":-5,"_41":42,"_40":14,"_142":25,"_38":160,"_13":144,"_33":34,"_35":37,"_24":25,"_145":-5,"_161":162,"_27":163},["D",1745190513521],"children",[],[28],["D",1746210657964],{"_98":97,"_106":102},{"_98":97,"_99":100,"_101":102,"_18":55,"_103":104,"_105":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":51,"_92":93,"_94":63,"_95":45,"_96":97},"ctx",{"_77":-5,"_128":201,"_202":203,"_204":205,"_206":25,"_207":25,"_208":25,"_209":49,"_210":-5,"_211":-7,"_212":-7,"_213":90,"_214":25,"_215":25,"_216":-5,"_217":25,"_218":25,"_219":25,"_220":-5},"ENV",{"_172":173,"_174":175,"_176":85,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v6