📻 Paper Radio — HAM Notebook

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_227":228,"_229":230},"routes/_app.x.$handle.$name",{"_109":108,"_38":57,"_118":99,"_33":119,"_13":14,"_120":-5,"_11":121,"_122":123,"_124":125,"_126":127,"_128":129,"_27":-5,"_130":-5,"_131":-5,"_132":31,"_133":134,"_135":71,"_136":-5,"_137":-5,"_138":139},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_55":56,"_38":57,"_43":58,"_59":-5,"_60":31,"_61":62,"_63":62,"_64":65,"_66":-5,"_19":67,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":75,"_76":77,"_78":-5,"_79":-5,"_80":-5,"_81":-5,"_82":83,"_84":83,"_85":86,"_87":86,"_88":86,"_89":83,"_90":83,"_91":92,"_93":94,"_95":96,"_97":31},"version",5,"changes",[25,26],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","264bc1ca-93e4-419d-b06e-127038116518","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_27":48,"_29":-7,"_30":31,"_32":31,"_33":49,"_35":49},{"_27":28,"_29":-7,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":-5,"_43":44,"_45":14,"_46":47,"_30":31},"previous","deleted",false,"deletedHere","path","frontend/hooks","latestPath","fileId","696e4d09-acee-4d1f-a766-197d62de15ac","name","hooks","fileType","directory","content","createdAt",["D",1777389291731],"branchVersion","branchId","e69b8b70-4314-11f1-8408-42b51c65c3df",{"_36":50,"_38":51,"_40":52,"_42":53,"_43":54,"_45":14,"_46":47,"_30":31},"frontend/hooks/useAudioVisualizer.ts","01219d4a-4315-11f1-bb84-42b51c65c3df","useAudioVisualizer.ts","script","import { useState, useRef, useCallback, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nexport function useAudioVisualizer() {\n const audioRef = useRef(null);\n const analyserRef = useRef(null);\n const contextRef = useRef(null);\n const sourceRef = useRef(null);\n const [freqData, setFreqData] = useState(new Array(32).fill(0));\n const rafRef = useRef(0);\n const [isPlaying, setIsPlaying] = useState(false);\n const [currentUrl, setCurrentUrl] = useState(\"\");\n\n const initAudio = useCallback(() => {\n if (!contextRef.current) {\n contextRef.current = new AudioContext();\n }\n if (!audioRef.current) {\n audioRef.current = new Audio();\n audioRef.current.crossOrigin = \"anonymous\";\n }\n if (!analyserRef.current && contextRef.current) {\n analyserRef.current = contextRef.current.createAnalyser();\n analyserRef.current.fftSize = 64;\n analyserRef.current.smoothingTimeConstant = 0.8;\n }\n if (!sourceRef.current && audioRef.current && contextRef.current && analyserRef.current) {\n sourceRef.current = contextRef.current.createMediaElementSource(audioRef.current);\n sourceRef.current.connect(analyserRef.current);\n analyserRef.current.connect(contextRef.current.destination);\n }\n }, []);\n\n const tick = useCallback(() => {\n if (!analyserRef.current) return;\n const arr = new Uint8Array(analyserRef.current.frequencyBinCount);\n analyserRef.current.getByteFrequencyData(arr);\n setFreqData(Array.from(arr).slice(0, 32));\n rafRef.current = requestAnimationFrame(tick);\n }, []);\n\n const play = useCallback(async (url: string) => {\n initAudio();\n if (!audioRef.current) return;\n \n if (contextRef.current?.state === \"suspended\") {\n await contextRef.current.resume();\n }\n\n audioRef.current.src = url;\n setCurrentUrl(url);\n \n try {\n await audioRef.current.play();\n setIsPlaying(true);\n cancelAnimationFrame(rafRef.current);\n tick();\n } catch (e) {\n console.error(\"Playback failed:\", e);\n setIsPlaying(false);\n }\n }, [initAudio, tick]);\n\n const stop = useCallback(() => {\n if (audioRef.current) {\n audioRef.current.pause();\n audioRef.current.src = \"\";\n }\n cancelAnimationFrame(rafRef.current);\n setIsPlaying(false);\n setCurrentUrl(\"\");\n setFreqData(new Array(32).fill(0));\n }, []);\n\n const togglePlay = useCallback(async (url: string) => {\n if (isPlaying && currentUrl === url) {\n stop();\n } else {\n await play(url);\n }\n }, [isPlaying, currentUrl, play, stop]);\n\n useEffect(() => {\n return () => {\n cancelAnimationFrame(rafRef.current);\n if (audioRef.current) {\n audioRef.current.pause();\n audioRef.current.src = \"\";\n }\n };\n }, []);\n\n return { freqData, isPlaying, currentUrl, togglePlay, stop };\n}\n",["D",1777389291731],"id","e69af57a-4314-11f1-8408-42b51c65c3df","paper-radio",["D",1777389247247],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Internet radio with paper HAM notebook UI and filters","imageUrl","3c8dcd51-6315-4beb-9371-6de4c965b9c8","pinnedFileId","ee229bcc-4314-11f1-9bed-42b51c65c3df","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019dd4a5-eadf-7547-8f4f-cc84801d2dfd","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_109":108,"_117":113},"org",{"_109":108,"_110":111,"_112":113,"_19":67,"_114":115,"_116":31},"branch",{"_13":98,"_38":99,"_55":47,"_100":56,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":57,"_107":108},"isOwned",13,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","maxmillion","handle","displayName","Max Million","avatar","https://lh3.googleusercontent.com/a/ACg8ocLxYdwNzMBGCBsNA2zlokr-wTVxE4vTMGCv3ocUVXGaG-Qoug=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_55":56,"_38":57,"_43":223,"_59":-5,"_60":31,"_61":62,"_63":62,"_64":65,"_66":-5,"_19":67,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":75,"_76":77,"_78":-5,"_79":-5,"_80":-5,"_81":-5,"_82":83,"_84":83,"_85":86,"_87":86,"_88":86,"_89":83,"_90":83,"_91":224,"_93":225,"_95":226,"_97":31},"tree",[175,180,182],"files",[175,176,177,178,179,180,181,182],"counts",{"_165":75,"_166":146,"_167":75,"_168":169,"_170":171},"contents",[140,141,142],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_55":159,"_38":160,"_36":161,"_145":-5,"_46":47,"_45":162,"_147":71,"_43":163,"_13":75,"_40":41,"_42":-5,"_30":31,"_151":-5,"_33":164},{"_55":153,"_38":154,"_36":155,"_145":-5,"_46":47,"_45":156,"_147":71,"_43":157,"_13":75,"_40":41,"_42":-5,"_30":31,"_151":-5,"_33":158},{"_55":143,"_38":144,"_36":69,"_145":-5,"_46":47,"_45":146,"_147":71,"_43":148,"_13":75,"_40":149,"_42":150,"_30":31,"_151":-5,"_33":152},"ee229afa-4314-11f1-9bed-42b51c65c3df","main.ts","parentId",1,"latest",["D",1777389259844],"http","import { Hono } from \"npm:hono@4\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\napp.onError((err) => Promise.reject(err));\n\n// API proxy for radio-browser to avoid CORS issues\napp.get(\"/api/countries\", async (c) => {\n const res = await fetch(\"https://de1.api.radio-browser.info/json/countries?hidebroken=true&order=stationcount&reverse=true&limit=100\");\n return c.json(await res.json());\n});\n\napp.get(\"/api/languages\", async (c) => {\n const res = await fetch(\"https://de1.api.radio-browser.info/json/languages?hidebroken=true&order=stationcount&reverse=true&limit=100\");\n return c.json(await res.json());\n});\n\napp.get(\"/api/tags\", async (c) => {\n const res = await fetch(\"https://de1.api.radio-browser.info/json/tags?hidebroken=true&order=stationcount&reverse=true&limit=100\");\n return c.json(await res.json());\n});\n\napp.get(\"/api/stations\", async (c) => {\n const params = new URLSearchParams();\n const q = c.req.query();\n \n if (q.country) params.set(\"country\", q.country);\n if (q.language) params.set(\"language\", q.language);\n if (q.tag) params.set(\"tag\", q.tag);\n if (q.name) params.set(\"name\", q.name);\n \n params.set(\"hidebroken\", \"true\");\n params.set(\"order\", \"clickcount\");\n params.set(\"reverse\", \"true\");\n params.set(\"limit\", q.limit || \"30\");\n params.set(\"offset\", q.offset || \"0\");\n\n const res = await fetch(`https://de1.api.radio-browser.info/json/stations/search?${params}`);\n return c.json(await res.json());\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\n\n// Serve index\napp.get(\"/*\", (c) => serveFile(\"/frontend/index.html\"));\n\nexport default app.fetch;\n","label",[144],"f9fa156a-4314-11f1-8c72-42b51c65c3df","shared","b0d8bc40-9f49-43f1-afab-0a2f0c35f4dc",4,["D",1777389279735],[154],"f34d8d00-4314-11f1-965f-42b51c65c3df","frontend","cc822499-07ef-4562-ad6b-1154a24a27f1",2,["D",1777389268538],[160],"pulls","branches","forks","envVars",{"_172":75,"_174":75},"connections",{"_172":75,"_173":75},"count","unfilledCount","emptyCount",{"_55":159,"_38":160,"_36":161,"_145":-5,"_46":47,"_45":162,"_147":71,"_43":220,"_13":75,"_40":41,"_42":-5,"_30":31,"_151":-5,"_184":221,"_33":222},{"_55":216,"_38":39,"_36":37,"_145":161,"_46":47,"_45":14,"_147":71,"_43":217,"_13":75,"_40":41,"_42":-5,"_30":31,"_151":-5,"_184":218,"_33":219},{"_55":212,"_38":51,"_36":50,"_145":37,"_46":47,"_45":14,"_147":71,"_43":213,"_13":75,"_40":52,"_42":53,"_30":31,"_151":-5,"_184":214,"_33":215},{"_55":205,"_38":206,"_36":207,"_145":161,"_46":47,"_45":162,"_147":71,"_43":208,"_13":75,"_40":27,"_42":209,"_30":31,"_151":-5,"_184":210,"_33":211},{"_55":197,"_38":198,"_36":199,"_145":161,"_46":47,"_45":200,"_147":71,"_43":201,"_13":75,"_40":52,"_42":202,"_30":31,"_151":-5,"_184":203,"_33":204},{"_55":153,"_38":154,"_36":155,"_145":-5,"_46":47,"_45":156,"_147":71,"_43":194,"_13":75,"_40":41,"_42":-5,"_30":31,"_151":-5,"_184":195,"_33":196},{"_55":187,"_38":188,"_36":189,"_145":155,"_46":47,"_45":156,"_147":71,"_43":190,"_13":75,"_40":52,"_42":191,"_30":31,"_151":-5,"_184":192,"_33":193},{"_55":143,"_38":144,"_36":69,"_145":-5,"_46":47,"_45":146,"_147":71,"_43":183,"_13":75,"_40":149,"_42":150,"_30":31,"_151":-5,"_184":185,"_33":186},["D",1777389259844],"children",[],[144],"f9f9f76a-4314-11f1-8c72-42b51c65c3df","types.ts","f9f9f80a-4314-11f1-8c72-42b51c65c3df",["D",1777389279735],"export interface Station {\n stationuuid: string;\n name: string;\n url: string;\n url_resolved: string;\n homepage: string;\n favicon: string;\n tags: string;\n country: string;\n countrycode: string;\n language: string;\n codec: string;\n bitrate: number;\n clickcount: number;\n votes: number;\n}\n\nexport interface FilterOption {\n name: string;\n stationcount: number;\n}\n\nexport type FilterType = \"country\" | \"language\" | \"tag\";\n\nexport interface Filters {\n country: string;\n language: string;\n tag: string;\n name: string;\n}\n",[],[154,188],["D",1777389279735],[181],[154],"f6794528-4314-11f1-9bed-42b51c65c3df","index.tsx","f67945d2-4314-11f1-9bed-42b51c65c3df",3,["D",1777389273841],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./App.tsx\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[160,198],"f34d6848-4314-11f1-965f-42b51c65c3df","index.html","f34d68f2-4314-11f1-965f-42b51c65c3df",["D",1777389268538],"\n\n\n \n \n 📻 Paper Radio — HAM Notebook\n 📻\">\n \n \n \n \n

\n \n\n\n\n",[],[160,206],"01219ac0-4315-11f1-bb84-42b51c65c3df",["D",1777389291731],[],[160,39,51],"0121b6b8-4315-11f1-bb84-42b51c65c3df",["D",1777389291731],[177],[160,39],["D",1777389268538],[176,178,179],[160],["D",1777389247247],{"_109":108,"_117":113},{"_109":108,"_110":111,"_112":113,"_19":67,"_114":115,"_116":31},{"_13":98,"_38":99,"_55":47,"_100":56,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":57,"_107":108},"ctx",{"_91":-5,"_137":260,"_261":262,"_263":264,"_265":31,"_266":31,"_267":31,"_268":71,"_269":-5,"_270":-7,"_271":-7,"_272":75,"_273":31,"_274":31,"_275":-5,"_276":31,"_277":31,"_278":31,"_279":-5},"ENV",{"_231":232,"_233":234,"_235":99,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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 · v5