[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_175":176,"_177":178},"routes/_app.x.$handle.$name",{"_100":99,"_32":21,"_108":87,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_21":-5,"_120":121,"_122":123,"_124":25,"_125":126,"_127":52,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_47":48,"_32":21,"_36":49,"_50":-5,"_51":52,"_53":54,"_55":54,"_56":-5,"_57":-5,"_18":58,"_59":43,"_60":52,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",1,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":21,"_34":35,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","55d879f6-2757-11f0-86ff-569c3dd06744","name","fileType","content","# FileThing\n\nP2P file transfer using WebRTC","createdAt",["D",1742664428402],"branchVersion","branchId","55d3541c-2757-11f0-86ff-569c3dd06744",{"_30":43,"_32":42,"_33":44,"_34":45,"_36":46,"_38":14,"_39":40,"_24":25},"main.tsx","55d852f0-2757-11f0-86ff-569c3dd06744","http","/** @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\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\nenum Accent {\n Pink = \"[#e91e63]\",\n Blue = \"[#2196f3]\",\n Green = \"[#4caf50]\",\n Red = \"[#f44336]\",\n Purple = \"[#9c27b0]\",\n}\n\nenum ButtonHover {\n Pink = \"hover:bg-pink-700\",\n Blue = \"hover:bg-blue-700\",\n Green = \"hover:bg-green-700\",\n Red = \"hover:bg-red-700\",\n Purple = \"hover:bg-purple-700\",\n}\n\nconst randomIndex = Math.floor(Math.random() * Object.values(Accent).length);\n\nconst accent = Object.values(Accent)[randomIndex];\nconst buttonHover = Object.values(ButtonHover)[randomIndex];\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 [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 vibrate = () => {\n if (navigator.vibrate) {\n navigator.vibrate(200);\n }\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 vibrate();\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{\" \"}\n \n {peerId}\n \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-auto mt-2 md:mt-0 md:ml-2 px-4 py-2 bg-${accent} text-white rounded transition-all ${buttonHover}`}\n >\n Connect\n \n setShowModal(!showModal)}\n >\n QR Code\n \n {showModal && qrcode.length > 0 && (\n

\n $\"QR$ \n

\n )}\n {showModal && \"NDEFReader\" in window\n && (\n \n Share via NFC\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 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}\nconst manifest = {\n name: \"FileThing\",\n short_name: \"FileThing\",\n description: \"WebRTC file sharing simple instant file transfer\",\n start_url: \"/\",\n display: \"standalone\",\n background_color: \"#ECE9D8\",\n theme_color: \"#3A6EA5\",\n icons: [],\n};\n\nconst serviceWorkerCode = `\nself.addEventListener('install', (event) => {\n // event.waitUntil(\n // caches.open('filething-cache-v1').then((cache) => {\n // return cache.addAll([\n // '/manifest.json',\n // 'https://cdn.tailwindcss.com',\n // ]);\n // })\n // );\n});\n\n// self.addEventListener('fetch', (event) => {\n// event.respondWith(\n// caches.match(event.request).then((response) => {\n// return response || fetch(event.request);\n// })\n// );\n// });\n`;\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname === \"/manifest.json\") {\n return new Response(JSON.stringify(manifest), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname === \"/service-worker.js\") {\n return new Response(serviceWorkerCode, {\n headers: { \"Content-Type\": \"application/javascript\" },\n });\n }\n return new Response(\n `\n \n \n \n \n FileThing\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",["D",1742664428402],"id","55d3039a-2757-11f0-86ff-569c3dd06744",["D",1746191650399],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","345c93c0-e33c-11ef-8162-578ee8459667","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","0e6e95db-f25e-4439-8273-5b605ec174c1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":58,"_104":105,"_106":25},"branch",{"_13":14,"_32":87,"_47":40,"_88":48,"_89":90,"_91":64,"_92":54,"_93":94,"_95":96,"_97":21,"_98":99},"isOwned","main","projectId","forkedBranchId","fd2e41f8-279e-11f0-9d52-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","fd2df752-279e-11f0-9d52-569c3dd06744","forkedProjectOrgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","projectName","userHandle","danielmorgan","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yc2FvenpWbXhyNm9lVlNVQnVkdnViZVlFZEMifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_32":21,"_36":171,"_50":-5,"_51":52,"_53":54,"_55":54,"_56":-5,"_57":-5,"_18":58,"_59":43,"_60":52,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":172,"_82":173,"_84":174,"_86":25},"tree",[162,163],"files",[162,163],"counts",{"_152":64,"_153":14,"_154":64,"_155":156,"_157":158},"contents",[141,142],"upstreamProject",{"_47":94,"_32":21,"_56":-5,"_57":-5,"_53":54,"_80":139},"upstreamBranch",{"_47":90,"_36":132,"_133":134,"_32":87,"_88":94,"_13":135,"_89":-5,"_91":-5,"_136":137,"_50":-5,"_86":25,"_53":54,"_98":138,"_65":96,"_97":21},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746222425441],"updatedAt",["D",1748929326808],303,"lockfileKey","1765010616068-esm.town_v_loading_file@303-main","loading",{"_100":138,"_107":140},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ",{"_47":149,"_32":28,"_30":31,"_144":-5,"_39":40,"_38":14,"_145":52,"_36":150,"_13":64,"_33":21,"_34":35,"_24":25,"_147":-5,"_27":151},{"_47":143,"_32":42,"_30":43,"_144":-5,"_39":40,"_38":14,"_145":52,"_36":146,"_13":64,"_33":44,"_34":45,"_24":25,"_147":-5,"_27":148},"55d8523c-2757-11f0-86ff-569c3dd06744","parentId","latest",["D",1742664428402],"label",[42],"55d8796a-2757-11f0-86ff-569c3dd06744",["D",1742664428402],[28],"pulls","branches","forks","envVars",{"_159":64,"_161":64},"connections",{"_159":64,"_160":64},"count","unfilledCount","emptyCount",{"_47":149,"_32":28,"_30":31,"_144":-5,"_39":40,"_38":14,"_145":52,"_36":168,"_13":64,"_33":21,"_34":35,"_24":25,"_147":-5,"_165":169,"_27":170},{"_47":143,"_32":42,"_30":43,"_144":-5,"_39":40,"_38":14,"_145":52,"_36":164,"_13":64,"_33":44,"_34":45,"_24":25,"_147":-5,"_165":166,"_27":167},["D",1742664428402],"children",[],[42],["D",1742664428402],[],[28],["D",1746191650399],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":58,"_104":105,"_106":25},{"_13":14,"_32":87,"_47":40,"_88":48,"_89":90,"_91":64,"_92":54,"_93":94,"_95":96,"_97":21,"_98":99},"ctx",{"_80":-5,"_129":208,"_209":210,"_211":212,"_213":25,"_214":25,"_215":25,"_216":52,"_217":-5,"_218":-7,"_219":-7,"_220":64,"_221":25,"_222":25,"_223":-5,"_224":25,"_225":25,"_226":25,"_227":-5},"ENV",{"_179":180,"_181":182,"_183":87,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207},"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 · v1