[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_165":166,"_167":168},"routes/_app.x.$handle.$name",{"_93":92,"_32":20,"_101":83,"_27":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":25,"_116":117,"_118":47,"_119":-5,"_120":-5,"_121":122},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":20,"_37":44,"_45":-5,"_46":47,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":31,"_55":47,"_56":-5,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",231,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_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 [showModal, setShowModal] = useState(false);\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 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`}\n >\n Connect\n \n setShowModal(!showModal)}\n >\n toggle QR Code\n \n {showModal && qrcode.length > 0 && (\n

\n $\"QR$ \n

\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}","createdAt",["D",1731900717219],"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",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":53,"_97":98,"_99":25},"branch",{"_13":58,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":20,"_91":92},"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",{"_42":43,"_32":20,"_37":161,"_45":-5,"_46":47,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":31,"_55":47,"_56":-5,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":162,"_78":163,"_80":164,"_82":25},"tree",[152,153],"files",[152,153],"counts",{"_141":138,"_142":136,"_143":144,"_145":146,"_147":148},"contents",[123,124],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":133,"_32":134,"_30":135,"_126":-5,"_40":41,"_39":136,"_127":47,"_37":137,"_13":138,"_33":20,"_35":139,"_24":25,"_130":-5,"_27":140},{"_42":125,"_32":28,"_30":31,"_126":-5,"_40":41,"_39":14,"_127":25,"_37":128,"_13":129,"_33":34,"_35":36,"_24":25,"_130":131,"_27":132},"02f3ab8c-279f-11f0-9d52-569c3dd06744","parentId","latest",["D",1731900717219],230,"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",[134],"pulls","branches","forks",7,"envVars",{"_149":138,"_151":138},"connections",{"_149":138,"_150":138},"count","unfilledCount","emptyCount",{"_42":133,"_32":134,"_30":135,"_126":-5,"_40":41,"_39":136,"_127":47,"_37":158,"_13":138,"_33":20,"_35":139,"_24":25,"_130":-5,"_155":159,"_27":160},{"_42":125,"_32":28,"_30":31,"_126":-5,"_40":41,"_39":14,"_127":25,"_37":154,"_13":129,"_33":34,"_35":36,"_24":25,"_130":131,"_155":156,"_27":157},["D",1731900717219],"children",[],[28],["D",1728921800675],[],[134],["D",1746222425441],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":53,"_97":98,"_99":25},{"_13":58,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":20,"_91":92},"ctx",{"_76":-5,"_120":198,"_199":200,"_201":202,"_203":25,"_204":25,"_205":25,"_206":47,"_207":-5,"_208":-7,"_209":-7,"_210":138,"_211":25,"_212":25,"_213":-5,"_214":25,"_215":25,"_216":25,"_217":-5},"ENV",{"_169":170,"_171":172,"_173":83,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197},"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 · v231