📻 Paper Radio — HAM Notebook

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_241":242,"_243":244},"routes/_app.x.$handle.$name",{"_102":101,"_37":50,"_111":92,"_32":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_26":-5,"_123":-5,"_124":-5,"_125":30,"_126":127,"_128":64,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":30},"version",7,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","264bc1ca-93e4-419d-b06e-127038116518","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/hooks/useStations.ts","latestPath","fileId","09a14ba0-4315-11f1-8c72-42b51c65c3df","name","useStations.ts","fileType","script","content","import { useState, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { Station, Filters } from \"../../shared/types.ts\";\n\nexport function useStations() {\n const [stations, setStations] = useState([]);\n const [loading, setLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const offsetRef = useRef(0);\n const filtersRef = useRef({ country: \"\", language: \"\", tag: \"\", name: \"\" });\n const PAGE_SIZE = 30;\n\n const buildQuery = (filters: Filters, offset: number) => {\n const params = new URLSearchParams();\n if (filters.country) params.set(\"country\", filters.country);\n if (filters.language) params.set(\"language\", filters.language);\n if (filters.tag) params.set(\"tag\", filters.tag);\n if (filters.name) params.set(\"name\", filters.name);\n params.set(\"limit\", String(PAGE_SIZE));\n params.set(\"offset\", String(offset));\n return params.toString();\n };\n\n const search = useCallback(async (filters: Filters) => {\n filtersRef.current = filters;\n offsetRef.current = 0;\n setLoading(true);\n setHasMore(true);\n try {\n const res = await fetch(`/api/stations?${buildQuery(filters, 0)}`);\n const data: Station[] = await res.json();\n setStations(data);\n setHasMore(data.length >= PAGE_SIZE);\n offsetRef.current = data.length;\n } catch (e) {\n console.error(\"Search failed:\", e);\n } finally {\n setLoading(false);\n }\n }, []);\n\n const loadMore = useCallback(async () => {\n if (loading || !hasMore) return;\n setLoading(true);\n try {\n const res = await fetch(`/api/stations?${buildQuery(filtersRef.current, offsetRef.current)}`);\n const data: Station[] = await res.json();\n setStations(prev => [...prev, ...data]);\n setHasMore(data.length >= PAGE_SIZE);\n offsetRef.current += data.length;\n } catch (e) {\n console.error(\"Load more failed:\", e);\n } finally {\n setLoading(false);\n }\n }, [loading, hasMore]);\n\n return { stations, loading, hasMore, search, loadMore };\n}\n","createdAt",["D",1777389305999],"branchVersion","branchId","e69b8b70-4314-11f1-8408-42b51c65c3df","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",{"_102":101,"_110":106},"org",{"_102":101,"_103":104,"_105":106,"_19":60,"_107":108,"_109":30},"branch",{"_13":91,"_37":92,"_48":47,"_93":49,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":50,"_100":101},"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",{"_48":49,"_37":50,"_43":237,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":238,"_86":239,"_88":240,"_90":30},"tree",[169,176,178],"files",[169,170,171,172,173,174,175,176,177,178],"counts",{"_159":68,"_160":139,"_161":68,"_162":163,"_164":165},"contents",[133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":153,"_37":154,"_35":155,"_138":-5,"_46":47,"_45":156,"_140":64,"_43":157,"_13":68,"_39":151,"_41":-5,"_29":30,"_144":-5,"_32":158},{"_48":146,"_37":147,"_35":148,"_138":-5,"_46":47,"_45":149,"_140":64,"_43":150,"_13":68,"_39":151,"_41":-5,"_29":30,"_144":-5,"_32":152},{"_48":136,"_37":137,"_35":62,"_138":-5,"_46":47,"_45":139,"_140":64,"_43":141,"_13":68,"_39":142,"_41":143,"_29":30,"_144":-5,"_32":145},"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",[137],"f9fa156a-4314-11f1-8c72-42b51c65c3df","shared","b0d8bc40-9f49-43f1-afab-0a2f0c35f4dc",4,["D",1777389279735],"directory",[147],"f34d8d00-4314-11f1-965f-42b51c65c3df","frontend","cc822499-07ef-4562-ad6b-1154a24a27f1",2,["D",1777389268538],[154],"pulls","branches","forks","envVars",{"_166":68,"_168":68},"connections",{"_166":68,"_167":68},"count","unfilledCount","emptyCount",{"_48":153,"_37":154,"_35":155,"_138":-5,"_46":47,"_45":156,"_140":64,"_43":234,"_13":68,"_39":151,"_41":-5,"_29":30,"_144":-5,"_180":235,"_32":236},{"_48":230,"_37":213,"_35":209,"_138":155,"_46":47,"_45":225,"_140":64,"_43":231,"_13":68,"_39":151,"_41":-5,"_29":30,"_144":-5,"_180":232,"_32":233},{"_48":222,"_37":223,"_35":224,"_138":209,"_46":47,"_45":225,"_140":64,"_43":226,"_13":68,"_39":40,"_41":227,"_29":30,"_144":-5,"_180":228,"_32":229},{"_48":214,"_37":215,"_35":216,"_138":209,"_46":47,"_45":217,"_140":64,"_43":218,"_13":68,"_39":40,"_41":219,"_29":30,"_144":-5,"_180":220,"_32":221},{"_48":208,"_37":38,"_35":36,"_138":209,"_46":47,"_45":14,"_140":64,"_43":210,"_13":68,"_39":40,"_41":42,"_29":30,"_144":-5,"_180":211,"_32":212},{"_48":201,"_37":202,"_35":203,"_138":155,"_46":47,"_45":156,"_140":64,"_43":204,"_13":68,"_39":26,"_41":205,"_29":30,"_144":-5,"_180":206,"_32":207},{"_48":193,"_37":194,"_35":195,"_138":155,"_46":47,"_45":196,"_140":64,"_43":197,"_13":68,"_39":40,"_41":198,"_29":30,"_144":-5,"_180":199,"_32":200},{"_48":146,"_37":147,"_35":148,"_138":-5,"_46":47,"_45":149,"_140":64,"_43":190,"_13":68,"_39":151,"_41":-5,"_29":30,"_144":-5,"_180":191,"_32":192},{"_48":183,"_37":184,"_35":185,"_138":148,"_46":47,"_45":149,"_140":64,"_43":186,"_13":68,"_39":40,"_41":187,"_29":30,"_144":-5,"_180":188,"_32":189},{"_48":136,"_37":137,"_35":62,"_138":-5,"_46":47,"_45":139,"_140":64,"_43":179,"_13":68,"_39":142,"_41":143,"_29":30,"_144":-5,"_180":181,"_32":182},["D",1777389259844],"children",[],[137],"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",[],[147,184],["D",1777389279735],[177],[147],"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",[],[154,194],"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",[],[154,202],"09a14a9c-4315-11f1-8c72-42b51c65c3df","696e4d09-acee-4d1f-a766-197d62de15ac",["D",1777389305999],[],[154,213,38],"hooks","04706e72-4315-11f1-8aae-42b51c65c3df","useFavorites.ts","04706f1c-4315-11f1-8aae-42b51c65c3df",6,["D",1777389297293],"import { useState, useCallback, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Station } from \"../../shared/types.ts\";\n\nconst STORAGE_KEY = \"paper-radio-favorites\";\n\nexport function useFavorites() {\n const [favorites, setFavorites] = useState(() => {\n try {\n const stored = localStorage.getItem(STORAGE_KEY);\n return stored ? JSON.parse(stored) : [];\n } catch {\n return [];\n }\n });\n\n useEffect(() => {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(favorites));\n }, [favorites]);\n\n const toggleFavorite = useCallback((station: Station) => {\n setFavorites(prev => {\n const exists = prev.find(s => s.stationuuid === station.stationuuid);\n if (exists) return prev.filter(s => s.stationuuid !== station.stationuuid);\n return [...prev, station];\n });\n }, []);\n\n const isFavorite = useCallback((uuid: string) => {\n return favorites.some(s => s.stationuuid === uuid);\n }, [favorites]);\n\n return { favorites, toggleFavorite, isFavorite };\n}\n",[],[154,213,215],"01219ac0-4315-11f1-bb84-42b51c65c3df","useAudioVisualizer.ts","01219d4a-4315-11f1-bb84-42b51c65c3df",5,["D",1777389291731],"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",[],[154,213,223],"0121b6b8-4315-11f1-bb84-42b51c65c3df",["D",1777389291731],[171,172,173],[154,213],["D",1777389268538],[170,174,175],[154],["D",1777389247247],{"_102":101,"_110":106},{"_102":101,"_103":104,"_105":106,"_19":60,"_107":108,"_109":30},{"_13":91,"_37":92,"_48":47,"_93":49,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":50,"_100":101},"ctx",{"_84":-5,"_130":274,"_275":276,"_277":278,"_279":30,"_280":30,"_281":30,"_282":64,"_283":-5,"_284":-7,"_285":-7,"_286":68,"_287":30,"_288":30,"_289":-5,"_290":30,"_291":30,"_292":30,"_293":-5},"ENV",{"_245":246,"_247":248,"_249":92,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273},"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 · v7