[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_180":181,"_182":183},"routes/_app.x.$handle.$name",{"_95":94,"_32":20,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":48,"_121":-5,"_122":-5,"_123":124},"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":56,"_57":48,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",290,"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","utils.ts","latestPath","fileId","7d27cf0e-403c-11f0-8b72-76b3cceeab13","name","fileType","script","content","export interface NDEFRecord {\n recordType: string;\n mediaType?: string;\n data?: string | BufferSource | NDEFRecord[];\n}\n\nexport interface Message {\n sender: string;\n message: string;\n}\n\nexport interface RTCFile {\n data: Uint8Array;\n name: string;\n type: string;\n}","export interface NDEFRecord {\n recordType: string;\n mediaType?: string;\n data?: string | BufferSource | NDEFRecord[];\n}\n\nexport interface Message {\n sender: string;\n message: string;\n}\n\nexport interface 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}","createdAt",["D",1748928963550],"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","fd35d54e-279e-11f0-9d52-569c3dd06744","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",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":60,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":20,"_93":94},"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":176,"_46":-5,"_47":48,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":48,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":177,"_80":178,"_82":179,"_84":25},"tree",[163,164,165],"files",[163,164,165],"counts",{"_152":149,"_153":147,"_154":155,"_156":157,"_158":159},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":144,"_32":145,"_30":146,"_129":-5,"_41":42,"_40":147,"_130":48,"_38":148,"_13":149,"_33":20,"_35":150,"_24":25,"_133":-5,"_27":151},{"_43":135,"_32":136,"_30":56,"_129":-5,"_41":42,"_40":137,"_130":25,"_38":138,"_13":139,"_33":140,"_35":141,"_24":25,"_133":142,"_27":143},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":131,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_27":134},"a39bebfc-403c-11f0-82a1-76b3cceeab13","parentId","latest",["D",1748928963550],5,"label",[28],"a0ec3362-403c-11f0-82a1-76b3cceeab13","main.tsx",289,["D",1748928959040],283,"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\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}","filething",[136],"fd35dd6e-279e-11f0-9d52-569c3dd06744","README.md","fd35de0e-279e-11f0-9d52-569c3dd06744",1,["D",1728921800675],0,"# FileThing\n\nP2P file transfer using WebRTC",[145],"pulls","branches","forks",7,"envVars",{"_160":149,"_162":149},"connections",{"_160":149,"_161":149},"count","unfilledCount","emptyCount",{"_43":144,"_32":145,"_30":146,"_129":-5,"_41":42,"_40":147,"_130":48,"_38":173,"_13":149,"_33":20,"_35":150,"_24":25,"_133":-5,"_167":174,"_27":175},{"_43":135,"_32":136,"_30":56,"_129":-5,"_41":42,"_40":137,"_130":25,"_38":170,"_13":139,"_33":140,"_35":141,"_24":25,"_133":142,"_167":171,"_27":172},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":166,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_167":168,"_27":169},["D",1748928963550],"children",[],[28],["D",1748928959040],[],[136],["D",1728921800675],[],[145],["D",1746222425441],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":60,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":20,"_93":94},"ctx",{"_78":-5,"_122":213,"_214":215,"_216":217,"_218":25,"_219":25,"_220":25,"_221":48,"_222":-5,"_223":-7,"_224":-7,"_225":149,"_226":25,"_227":25,"_228":-5,"_229":25,"_230":25,"_231":25,"_232":-5},"ENV",{"_184":185,"_186":187,"_188":85,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212},"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 · v290