[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_166":167,"_168":169},"routes/_app.x.$handle.$name",{"_94":93,"_32":20,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":48,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":20,"_38":45,"_46":-5,"_47":48,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":48,"_57":-5,"_58":59,"_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",212,"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","fd35d54e-279e-11f0-9d52-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/preact */\nimport { type ClassValue, clsx } from \"https://esm.sh/clsx\";\nimport { Peer } from \"https://esm.sh/peerjs@1.5.4?bundle-deps\";\nimport { render } from \"https://esm.sh/preact\";\nimport { useEffect, useRef, useState } from \"https://esm.sh/preact/hooks\";\n\ninterface NDEFRecord {\n recordType: string;\n mediaType?: string;\n data?: string | BufferSource | NDEFRecord[];\n};\n\ninterface Message {\n sender: string;\n message: string;\n}\n\ninterface RTCFile {\n data: Uint8Array;\n name: string;\n type: string;\n}\n\nenum Accent {\n Pink = \"[#e91e63]\",\n Blue = \"[#2196f3]\",\n Green = \"[#4caf50]\",\n Red = \"[#f44336]\",\n Purple = \"[#9c27b0]\",\n}\n\nfunction getFileEmote(file: RTCFile) {\n const fileType = file.type.split(\"/\")[0];\n switch (fileType) {\n case \"image\":\n return \"🖼️\";\n case \"audio\":\n return \"🎵\";\n case \"video\":\n return \"🎥\";\n case \"application\":\n return \"📄\";\n default:\n return \"📁\";\n }\n}\n\nconst randomAccent = () => {\n const accents = Object.values(Accent);\n return accents[Math.floor(Math.random() * accents.length)];\n}\n\nfunction App() {\n const [peerId, setPeerId] = useState(\"\");\n const [textToCopy, setTextToCopy] = useState(\"\");\n const [isCopied, setIsCopied] = useState(false);\n const [files, setFiles] = useState([]);\n const [connectedPeers, setConnectedPeers] = useState({});\n const [targetPeerId, setTargetPeerId] = useState(\"\");\n const [message, setMessage] = useState(\"\");\n const [chatHistory, setChatHistory] = useState([]);\n const [accent, setAccent] = useState(randomAccent());\n const [notification, setNotification] = useState(null);\n const [nfcStatus, setNfcStatus] = useState(\"\");\n const peerRef = useRef(null);\n const [qrcode, setQrcode] = useState(\"\");\n const chatEndRef = useRef(null);\n\n const getUrlParameter = (name) => {\n const urlParams = new URLSearchParams(window.location.search);\n return urlParams.get(name);\n };\n\n const getShareableUrl = () => {\n const currentUrl = new URL(window.location.href);\n currentUrl.searchParams.set(\"peer\", peerId);\n return currentUrl.toString();\n };\n\n useEffect(() => {\n peerRef.current = new Peer();\n\n peerRef.current.on(\"open\", async (id) => {\n setPeerId(id);\n console.log(\"My peer ID is: \" + id);\n\n generateQRCode(id);\n\n const peerParam = getUrlParameter(\"peer\");\n if (peerParam) {\n connectToPeer(peerParam);\n }\n });\n\n peerRef.current.on(\"connection\", (conn) => {\n setupConnection(conn);\n });\n\n return () => {\n if (peerRef.current) {\n peerRef.current.destroy();\n }\n };\n }, []);\n\n useEffect(() => {\n chatEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [chatHistory]);\n\n const setupConnection = (conn) => {\n conn.on(\"open\", () => {\n setConnectedPeers((prevPeers) => ({ ...prevPeers, [conn.peer]: conn }));\n showNotification(`Connected to peer: ${conn.peer}`);\n });\n\n conn.on(\"data\", (data) => {\n if (typeof data === \"string\") {\n setChatHistory((prev) => [...prev, { sender: conn.peer, message: data }]);\n showNotification(`New message from ${conn.peer}`);\n } else if (data.type === \"file\") {\n setFiles((prevFiles) => [...prevFiles, data.file]);\n showNotification(`Received file: ${data.file.name}`);\n }\n });\n\n conn.on(\"close\", () => {\n setConnectedPeers((prevPeers) => {\n const newPeers = { ...prevPeers };\n delete newPeers[conn.peer];\n return newPeers;\n });\n showNotification(`Disconnected from peer: ${conn.peer}`);\n });\n };\n\n const generateQRCode = async (id: string) => {\n const qrcode = await (await fetch(`https://loading-generateqr.web.val.run/?peer=${id}`)).json();\n setQrcode(qrcode.base64Image);\n };\n\n const connectToPeer = (targetId = targetPeerId) => {\n if (!targetId || !peerRef.current) return;\n const conn = peerRef.current.connect(targetId);\n setupConnection(conn);\n setTargetPeerId(\"\");\n };\n\n const handleFileUpload = (event) => {\n const file = event.target.files[0];\n if (!file) return;\n\n const reader = new FileReader();\n reader.onload = (e) => {\n const fileData = {\n type: \"file\",\n file: {\n name: file.name,\n type: file.type,\n data: e.target.result,\n },\n };\n setFiles((prevFiles) => [...prevFiles, fileData.file]);\n\n Object.values(connectedPeers).forEach((conn) => {\n conn.send(fileData);\n });\n showNotification(`File sent: ${file.name}`);\n };\n reader.readAsArrayBuffer(file);\n };\n\n const copyShareableUrl = () => {\n if (!confirm(\"Are you sure you want to copy the shareable URL?\")) {\n return;\n }\n try {\n navigator.clipboard.writeText(getShareableUrl());\n } catch (err) {\n showNotification(\"Failed to copy shareable URL\");\n }\n showNotification(\"Shareable URL copied to clipboard\");\n };\n\n const sendMessage = () => {\n if (!message) return;\n Object.values(connectedPeers).forEach((conn) => {\n conn.send(message);\n });\n setChatHistory((prev) => [...prev, { sender: \"You\", message }]);\n setMessage(\"\");\n };\n\n const downloadFile = (file) => {\n const blob = new Blob([file.data], { type: file.type });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = file.name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL (url);\n };\n\n const showNotification = (message: string) => {\n setNotification(message);\n setTimeout(() => setNotification(null), 3000);\n };\n\n const shareNFC = async () => {\n if (!(\"NDEFReader\" in window)) {\n setNfcStatus(\"NFC is not supported on this device\");\n return;\n }\n\n try {\n const ndef = new NDEFReader();\n const shareableUrl = getShareableUrl();\n await ndef.write({\n records: [{\n recordType: \"url\",\n data: shareableUrl,\n }],\n });\n setNfcStatus(\"NFC sharing successful\");\n } catch (error) {\n console.error(error);\n setNfcStatus(\"NFC sharing failed: \" + error.message);\n }\n };\n\n return (\n

\n FileThing\n

\n Your Peer ID {peerId}\n

\n Your Shareable URL{\" \"}\n \n {getShareableUrl()}\n \n

\n \n \n \n

Expand & Collapse Me

\n {qrcode.length > 0 && (\n

\n $\"QR$ \n

\n )}\n \n \n \n

\n setTargetPeerId(e.target.value)}\n placeholder=\"Enter peer ID to connect\"\n className=\"w-full md:w-1/2 p-2 border-0 rounded bg-gray-800 border-gray-700 text-white mb-2 md:mb-0\"\n />\n connectToPeer()}\n className={`w-full md:w-auto mt-2 md:mt-0 md:ml-2 px-4 py-2 bg-${accent} text-white rounded transition-all hover:shadow-lg hover:shadow-pink-500/40`}\n >\n Connect\n \n {\"NDEFReader\" in window &&\n \n Share via NFC\n }\n

\n {nfcStatus &&

{nfcStatus}

}\n

Connected Peers

{peer}

Files

\n \n\n

\n {getFileEmote(file)}{file.name} ({file.type})\n \n downloadFile(file)}\n className=\"px-2 py-1 bg-green-600 text-white rounded hover:bg-green-700 text-sm\"\n >\n Download\n \n

Chat

\n {chatHistory.map((chat, index) => (\n

\n {chat.sender}:{\" \"}\n {chat.message}\n

\n ))}\n

\n e.key === \"Enter\" && sendMessage()}\n onChange={(e) => setMessage(e.target.value)}\n placeholder=\"Enter message\"\n className=\"flex-grow p-2 border rounded bg-gray-800 border-gray-700 text-white mb-2 md:mb-0 md:mr-2\"\n />\n \n Send\n \n

\n {notification && (\n

\n {notification}\n

\n )}\n

\n );\n}\n\nfunction client() {\n render(, document.getElementById(\"root\")!);\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n FileThing\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","/** @jsxImportSource https://esm.sh/preact */\nimport { type ClassValue, clsx } from \"https://esm.sh/clsx\";\nimport { Peer } from \"https://esm.sh/peerjs@1.5.4?bundle-deps\";\nimport { render } from \"https://esm.sh/preact\";\nimport { useEffect, useRef, useState } from \"https://esm.sh/preact/hooks\";\n\ninterface NDEFRecord {\n recordType: string;\n mediaType?: string;\n data?: string | BufferSource | NDEFRecord[];\n};\n\ninterface Message {\n sender: string;\n message: string;\n}\n\ninterface RTCFile {\n data: Uint8Array;\n name: string;\n type: string;\n}\n\nenum Accent {\n Pink = \"[#e91e63]\",\n Blue = \"[#2196f3]\",\n Green = \"[#4caf50]\",\n Red = \"[#f44336]\",\n Purple = \"[#9c27b0]\",\n}\n\nfunction getFileEmote(file: RTCFile) {\n const fileType = file.type.split(\"/\")[0];\n switch (fileType) {\n case \"image\":\n return \"🖼️\";\n case \"audio\":\n return \"🎵\";\n case \"video\":\n return \"🎥\";\n case \"application\":\n return \"📄\";\n default:\n return \"📁\";\n }\n}\n\nconst randomAccent = () => {\n const accents = Object.values(Accent);\n return accents[Math.floor(Math.random() * accents.length)];\n}\n\nfunction App() {\n const [peerId, setPeerId] = useState(\"\");\n const [textToCopy, setTextToCopy] = useState(\"\");\n const [isCopied, setIsCopied] = useState(false);\n const [files, setFiles] = useState([]);\n const [connectedPeers, setConnectedPeers] = useState({});\n const [targetPeerId, setTargetPeerId] = useState(\"\");\n const [message, setMessage] = useState(\"\");\n const [chatHistory, setChatHistory] = useState([]);\n const [accent, setAccent] = useState(randomAccent());\n const [notification, setNotification] = useState(null);\n const [nfcStatus, setNfcStatus] = useState(\"\");\n const peerRef = useRef(null);\n const [qrcode, setQrcode] = useState(\"\");\n const chatEndRef = useRef(null);\n\n const getUrlParameter = (name) => {\n const urlParams = new URLSearchParams(window.location.search);\n return urlParams.get(name);\n };\n\n const getShareableUrl = () => {\n const currentUrl = new URL(window.location.href);\n currentUrl.searchParams.set(\"peer\", peerId);\n return currentUrl.toString();\n };\n\n useEffect(() => {\n peerRef.current = new Peer();\n\n peerRef.current.on(\"open\", async (id) => {\n setPeerId(id);\n console.log(\"My peer ID is: \" + id);\n\n generateQRCode(id);\n\n const peerParam = getUrlParameter(\"peer\");\n if (peerParam) {\n connectToPeer(peerParam);\n }\n });\n\n peerRef.current.on(\"connection\", (conn) => {\n setupConnection(conn);\n });\n\n return () => {\n if (peerRef.current) {\n peerRef.current.destroy();\n }\n };\n }, []);\n\n useEffect(() => {\n chatEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [chatHistory]);\n\n const setupConnection = (conn) => {\n conn.on(\"open\", () => {\n setConnectedPeers((prevPeers) => ({ ...prevPeers, [conn.peer]: conn }));\n showNotification(`Connected to peer: ${conn.peer}`);\n });\n\n conn.on(\"data\", (data) => {\n if (typeof data === \"string\") {\n setChatHistory((prev) => [...prev, { sender: conn.peer, message: data }]);\n showNotification(`New message from ${conn.peer}`);\n } else if (data.type === \"file\") {\n setFiles((prevFiles) => [...prevFiles, data.file]);\n showNotification(`Received file: ${data.file.name}`);\n }\n });\n\n conn.on(\"close\", () => {\n setConnectedPeers((prevPeers) => {\n const newPeers = { ...prevPeers };\n delete newPeers[conn.peer];\n return newPeers;\n });\n showNotification(`Disconnected from peer: ${conn.peer}`);\n });\n };\n\n const generateQRCode = async (id: string) => {\n const qrcode = await (await fetch(`https://loading-generateqr.web.val.run/?peer=${id}`)).json();\n setQrcode(qrcode.base64Image);\n };\n\n const connectToPeer = (targetId = targetPeerId) => {\n if (!targetId || !peerRef.current) return;\n const conn = peerRef.current.connect(targetId);\n setupConnection(conn);\n setTargetPeerId(\"\");\n };\n\n const handleFileUpload = (event) => {\n const file = event.target.files[0];\n if (!file) return;\n\n const reader = new FileReader();\n reader.onload = (e) => {\n const fileData = {\n type: \"file\",\n file: {\n name: file.name,\n type: file.type,\n data: e.target.result,\n },\n };\n setFiles((prevFiles) => [...prevFiles, fileData.file]);\n\n Object.values(connectedPeers).forEach((conn) => {\n conn.send(fileData);\n });\n showNotification(`File sent: ${file.name}`);\n };\n reader.readAsArrayBuffer(file);\n };\n\n const copyShareableUrl = () => {\n if (!confirm(\"Are you sure you want to copy the shareable URL?\")) {\n return;\n }\n try {\n navigator.clipboard.writeText(getShareableUrl());\n } catch (err) {\n showNotification(\"Failed to copy shareable URL\");\n }\n showNotification(\"Shareable URL copied to clipboard\");\n };\n\n const sendMessage = () => {\n if (!message) return;\n Object.values(connectedPeers).forEach((conn) => {\n conn.send(message);\n });\n setChatHistory((prev) => [...prev, { sender: \"You\", message }]);\n setMessage(\"\");\n };\n\n const downloadFile = (file) => {\n const blob = new Blob([file.data], { type: file.type });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = file.name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL (url);\n };\n\n const showNotification = (message: string) => {\n setNotification(message);\n setTimeout(() => setNotification(null), 3000);\n };\n\n const shareNFC = async () => {\n if (!(\"NDEFReader\" in window)) {\n setNfcStatus(\"NFC is not supported on this device\");\n return;\n }\n\n try {\n const ndef = new NDEFReader();\n const shareableUrl = getShareableUrl();\n await ndef.write({\n records: [{\n recordType: \"url\",\n data: shareableUrl,\n }],\n });\n setNfcStatus(\"NFC sharing successful\");\n } catch (error) {\n console.error(error);\n setNfcStatus(\"NFC sharing failed: \" + error.message);\n }\n };\n\n return (\n

\n FileThing\n

\n Your Peer ID {peerId}\n

\n Your Shareable URL{\" \"}\n \n {getShareableUrl()}\n \n

\n \n \n \n

Expand & Collapse Me

\n {qrcode.length > 0 && (\n

\n $\"QR$ \n

\n )}\n \n \n \n

\n {nfcStatus &&

{nfcStatus}

}\n

Connected Peers

{peer}

Files

\n \n\n

\n {getFileEmote(file)}{file.name} ({file.type})\n \n downloadFile(file)}\n className=\"px-2 py-1 bg-green-600 text-white rounded hover:bg-green-700 text-sm\"\n >\n Download\n \n

Chat

\n {chatHistory.map((chat, index) => (\n

\n {chat.sender}:{\" \"}\n {chat.message}\n

\n ))}\n

\n {notification && (\n

\n {notification}\n

\n )}\n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","createdAt",["D",1731899443570],"branchVersion","branchId","fd2e41f8-279e-11f0-9d52-569c3dd06744","id","fd2df752-279e-11f0-9d52-569c3dd06744",["D",1746222425441],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion",303,"likeCount",13,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":59,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":20,"_92":93},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","loading","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":20,"_38":162,"_46":-5,"_47":48,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":48,"_57":-5,"_58":59,"_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":163,"_79":164,"_81":165,"_83":25},"tree",[153,154],"files",[153,154],"counts",{"_142":139,"_143":137,"_144":145,"_146":147,"_148":149},"contents",[124,125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":134,"_32":135,"_30":136,"_127":-5,"_41":42,"_40":137,"_128":48,"_38":138,"_13":139,"_33":20,"_35":140,"_24":25,"_131":-5,"_27":141},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":129,"_13":130,"_33":34,"_35":37,"_24":25,"_131":132,"_27":133},"026b9b34-279f-11f0-9d52-569c3dd06744","parentId","latest",["D",1731899443570],211,"label","filething",[28],"fd35dd6e-279e-11f0-9d52-569c3dd06744","README.md","fd35de0e-279e-11f0-9d52-569c3dd06744",1,["D",1728921800675],0,"# FileThing\n\nP2P file transfer using WebRTC",[135],"pulls","branches","forks",7,"envVars",{"_150":139,"_152":139},"connections",{"_150":139,"_151":139},"count","unfilledCount","emptyCount",{"_43":134,"_32":135,"_30":136,"_127":-5,"_41":42,"_40":137,"_128":48,"_38":159,"_13":139,"_33":20,"_35":140,"_24":25,"_131":-5,"_156":160,"_27":161},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":155,"_13":130,"_33":34,"_35":37,"_24":25,"_131":132,"_156":157,"_27":158},["D",1731899443570],"children",[],[28],["D",1728921800675],[],[135],["D",1746222425441],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":59,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":20,"_92":93},"ctx",{"_77":-5,"_121":199,"_200":201,"_202":203,"_204":25,"_205":25,"_206":25,"_207":48,"_208":-5,"_209":-7,"_210":-7,"_211":139,"_212":25,"_213":25,"_214":-5,"_215":25,"_216":25,"_217":25,"_218":-5},"ENV",{"_170":171,"_172":173,"_174":84,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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 · v212