\n \n\n\n\n",[],[60,128],"a06daada-4322-11f1-83f1-42b51c65c3df","App.tsx","40386234-4315-11f1-be73-42b51c65c3df",13,["D",1777395142438],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { motion, AnimatePresence } from \"https://esm.sh/framer-motion@11.0.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { Station, Filters } from \"../shared/types.ts\";\nimport { useAudioVisualizer } from \"./hooks/useAudioVisualizer.ts\";\nimport { useFavorites } from \"./hooks/useFavorites.ts\";\nimport { useStations } from \"./hooks/useStations.ts\";\nimport FilterPanel from \"./components/FilterPanel.tsx\";\nimport StationRow from \"./components/StationRow.tsx\";\nimport NowPlaying from \"./components/NowPlaying.tsx\";\nimport Visualizer from \"./components/Visualizer.tsx\";\n\ntype Tab = \"browse\" | \"favorites\";\n\nexport default function App() {\n const [tab, setTab] = useState(\"browse\");\n const [filters, setFilters] = useState({ country: \"\", language: \"\", tag: \"\", name: \"\" });\n const [currentStation, setCurrentStation] = useState(null);\n const { freqData, isPlaying, currentUrl, togglePlay, stop } = useAudioVisualizer();\n const { favorites, toggleFavorite, isFavorite } = useFavorites();\n const { stations, loading, hasMore, search, loadMore } = useStations();\n const scrollRef = useRef(null);\n const sentinelRef = useRef(null);\n\n // Initial load\n useEffect(() => {\n search(filters);\n }, []);\n\n // Filter changes trigger new search\n useEffect(() => {\n search(filters);\n }, [filters, search]);\n\n // Infinite scroll with IntersectionObserver\n useEffect(() => {\n if (tab !== \"browse\" || !sentinelRef.current) return;\n const observer = new IntersectionObserver(\n entries => {\n if (entries[0].isIntersecting && hasMore && !loading) {\n loadMore();\n }\n },\n { root: scrollRef.current, threshold: 0.1 }\n );\n observer.observe(sentinelRef.current);\n return () => observer.disconnect();\n }, [tab, hasMore, loading, loadMore]);\n\n const handlePlay = useCallback(async (station: Station) => {\n setCurrentStation(station);\n await togglePlay(station.url_resolved || station.url);\n }, [togglePlay]);\n\n const handleStop = useCallback(() => {\n stop();\n setCurrentStation(null);\n }, [stop]);\n\n const displayStations = tab === \"favorites\" ? favorites : stations;\n\n return (\n

\n {/* Paper texture background */}\n \n\n {/* Red margin line */}\n \n\n

\n {/* Header */}\n \n

\n 📻 Paper Radio\n

\n Ham Radio Engineer's Log — Internet Edition\n

\n\n {/* Visualizer in header when playing */}\n \n {isPlaying && (\n \n \n \n )}\n \n\n {/* Decorative line */}\n

\n ~~~~~\n

\n \n\n {/* Tabs */}\n

\n {([\n { key: \"browse\" as Tab, label: \"📡 Browse Stations\", count: null },\n { key: \"favorites\" as Tab, label: \"★ Favourites\", count: favorites.length },\n ]).map(t => (\n setTab(t.key)}\n className={`\n relative px-4 py-2 font-handwritten text-base transition-colors\n ${tab === t.key ? \"text-ink-blue\" : \"text-ink-light hover:text-ink\"}\n `}\n whileTap={{ scale: 0.97 }}\n >\n {t.label}\n {t.count !== null && t.count > 0 && (\n \n {t.count}\n \n )}\n {tab === t.key && (\n \n )}\n \n ))}\n

\n\n {/* Filters (only in browse tab) */}\n \n {tab === \"browse\" && (\n \n \n \n )}\n \n\n {/* Station list */}\n

\n \n \n {displayStations.length === 0 && !loading && (\n

\n {tab === \"favorites\" ? \"No favourites yet\" : \"No stations found\"}\n

\n {tab === \"favorites\"\n ? \"Click the ☆ star next to a station to save it here\"\n : \"Try adjusting your tuning parameters above\"\n }\n

\n {tab === \"favorites\" && (\n

📝

\n )}\n

\n )}\n\n {displayStations.map((station, i) => (\n handlePlay(station)}\n onFavorite={() => toggleFavorite(station)}\n />\n ))}\n \n \n\n {/* Infinite scroll sentinel */}\n {tab === \"browse\" && (\n

\n {loading && (\n \n \n 📡\n \n {\" \"}Scanning frequencies...\n \n )}\n {!hasMore && stations.length > 0 && (\n

\n ── end of log ──\n

\n )}\n

\n\n {/* Footer */}\n

\n Data from Radio Browser API · Built on Val Town\n

\n \n view source\n \n

\n\n {/* Now Playing bar */}\n \n

\n );\n}\n",[],[60,135],["D",1777389291731],[145,146,147],[60,61],{"_36":69,"_13":70,"_39":71,"_41":42,"_43":44,"_45":72,"_47":48,"_49":154,"_17":51,"_52":53,"_54":74,"_56":57,"_58":-5,"_91":155,"_18":156},{"_36":62,"_13":63,"_39":64,"_41":42,"_43":44,"_45":65,"_47":48,"_49":151,"_17":51,"_52":53,"_54":67,"_56":57,"_58":-5,"_91":152,"_18":153},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":148,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_91":149,"_18":150},["D",1777389305999],[],[60,61,38],["D",1777389297293],[],[60,61,63],["D",1777389291731],[],[60,61,70],"0dfd1ab2-4315-11f1-9bed-42b51c65c3df","components","d55debdb-8652-4a81-b22f-5061b2113902",8,["D",1777389313308],[164,165,166,167],[60,158],{"_36":191,"_13":192,"_39":193,"_41":159,"_43":44,"_45":194,"_47":48,"_49":195,"_17":51,"_52":53,"_54":196,"_56":57,"_58":-5,"_91":197,"_18":198},{"_36":183,"_13":184,"_39":185,"_41":159,"_43":44,"_45":186,"_47":48,"_49":187,"_17":51,"_52":53,"_54":188,"_56":57,"_58":-5,"_91":189,"_18":190},{"_36":175,"_13":176,"_39":177,"_41":159,"_43":44,"_45":178,"_47":48,"_49":179,"_17":51,"_52":53,"_54":180,"_56":57,"_58":-5,"_91":181,"_18":182},{"_36":168,"_13":169,"_39":170,"_41":159,"_43":44,"_45":160,"_47":48,"_49":171,"_17":51,"_52":53,"_54":172,"_56":57,"_58":-5,"_91":173,"_18":174},"0dfd0928-4315-11f1-9bed-42b51c65c3df","Visualizer.tsx","0dfd09fa-4315-11f1-9bed-42b51c65c3df",["D",1777389313308],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { motion } from \"https://esm.sh/framer-motion@11.0.3?deps=react@18.2.0,react-dom@18.2.0\";\n\ninterface Props {\n freqData: number[];\n isPlaying: boolean;\n}\n\nexport default function Visualizer({ freqData, isPlaying }: Props) {\n const bars = useMemo(() => freqData.slice(0, 24), [freqData]);\n\n return (\n

\n {bars.map((val, i) => {\n const height = isPlaying ? Math.max(2, (val / 255) * 60) : 2;\n return (\n \n );\n })}\n

\n );\n}\n",[],[60,158,169],"233f5778-4315-11f1-965f-42b51c65c3df","StationRow.tsx","233f585e-4315-11f1-965f-42b51c65c3df",10,["D",1777389348976],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { motion } from \"https://esm.sh/framer-motion@11.0.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { Station } from \"../../shared/types.ts\";\n\ninterface Props {\n station: Station;\n isPlaying: boolean;\n isFavorite: boolean;\n onPlay: () => void;\n onFavorite: () => void;\n index: number;\n}\n\nexport default function StationRow({ station, isPlaying, isFavorite, onPlay, onFavorite, index }: Props) {\n const tags = station.tags ? station.tags.split(\",\").slice(0, 3) : [];\n\n return (\n \n {/* Play indicator */}\n

\n {isPlaying ? (\n \n {[0, 1, 2].map(i => (\n \n ))}\n \n ) : (\n ▶\n )}\n

\n\n {/* Station info */}\n

\n {station.name || \"Unknown Station\"}\n

\n {station.country && (\n {station.country}\n )}\n {station.bitrate > 0 && (\n {station.bitrate}kbps\n )}\n {tags.map(tag => (\n \n {tag.trim()}\n \n ))}\n

\n\n {/* Favorite button */}\n { e.stopPropagation(); onFavorite(); }}\n className=\"flex-shrink-0 text-lg hover:scale-125 transition-transform\"\n whileTap={{ scale: 0.8 }}\n animate={isFavorite ? { rotate: [0, -15, 15, 0] } : {}}\n transition={{ duration: 0.4 }}\n >\n {isFavorite ? \"★\" : \"☆\"}\n \n \n );\n}\n",[],[60,158,176],"2bbb936c-4315-11f1-8af4-42b51c65c3df","NowPlaying.tsx","2bbb940c-4315-11f1-8af4-42b51c65c3df",11,["D",1777389363215],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { motion, AnimatePresence } from \"https://esm.sh/framer-motion@11.0.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { Station } from \"../../shared/types.ts\";\nimport Visualizer from \"./Visualizer.tsx\";\n\ninterface Props {\n station: Station | null;\n isPlaying: boolean;\n freqData: number[];\n onStop: () => void;\n}\n\nexport default function NowPlaying({ station, isPlaying, freqData, onStop }: Props) {\n return (\n \n {station && isPlaying && (\n \n

\n \n {/* Decorative tape strips */}\n

\n\n

\n \n ■\n \n\n

\n \n 📻 {station.name}\n \n

\n {station.country}{station.language ? ` · ${station.language}` : \"\"}{station.bitrate ? ` · ${station.bitrate}kbps` : \"\"}\n

\n\n

\n \n

\n \n )}\n \n );\n}\n",[],[60,158,184],"19c8a0e6-4315-11f1-8c72-42b51c65c3df","FilterPanel.tsx","19c8a1c2-4315-11f1-8c72-42b51c65c3df",9,["D",1777389333086],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { motion, AnimatePresence } from \"https://esm.sh/framer-motion@11.0.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { FilterOption, Filters } from \"../../shared/types.ts\";\n\ninterface Props {\n filters: Filters;\n onFilterChange: (filters: Filters) => void;\n}\n\nfunction FilterSelect({ label, value, options, onChange, icon }: {\n label: string; value: string; options: FilterOption[]; onChange: (v: string) => void; icon: string;\n}) {\n return (\n

\n \n {icon} {label}\n \n onChange(e.target.value)}\n className=\"bg-transparent border-b-2 border-dashed border-ink-light/30 font-typewriter text-ink text-sm py-1 px-0 focus:outline-none focus:border-ink-blue appearance-none cursor-pointer\"\n >\n \n {options.map(o => (\n \n ))}\n \n

\n );\n}\n\nexport default function FilterPanel({ filters, onFilterChange }: Props) {\n const [countries, setCountries] = useState([]);\n const [languages, setLanguages] = useState([]);\n const [tags, setTags] = useState([]);\n const [searchText, setSearchText] = useState(filters.name);\n const [isOpen, setIsOpen] = useState(true);\n\n useEffect(() => {\n Promise.all([\n fetch(\"/api/countries\").then(r => r.json()),\n fetch(\"/api/languages\").then(r => r.json()),\n fetch(\"/api/tags\").then(r => r.json()),\n ]).then(([c, l, t]) => {\n setCountries(c);\n setLanguages(l);\n setTags(t);\n });\n }, []);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n if (searchText !== filters.name) {\n onFilterChange({ ...filters, name: searchText });\n }\n }, 500);\n return () => clearTimeout(timer);\n }, [searchText]);\n\n return (\n \n setIsOpen(!isOpen)}\n className=\"w-full px-4 py-2 flex items-center justify-between font-handwritten text-lg text-ink hover:text-ink-blue transition-colors\"\n >\n ⚙ Tuning Parameters\n \n ▾\n \n \n\n \n {isOpen && (\n \n

\n {/* Search */}\n

\n 🔍 Station Name\n setSearchText(e.target.value)}\n placeholder=\"type to search...\"\n className=\"bg-transparent border-b-2 border-dashed border-ink-light/30 font-typewriter text-ink text-sm py-1 px-0 focus:outline-none focus:border-ink-blue placeholder:text-pencil/50\"\n />\n

\n\n

\n onFilterChange({ ...filters, country: v })}\n />\n onFilterChange({ ...filters, language: v })}\n />\n onFilterChange({ ...filters, tag: v })}\n />\n

\n\n {(filters.country || filters.language || filters.tag || filters.name) && (\n {\n setSearchText(\"\");\n onFilterChange({ country: \"\", language: \"\", tag: \"\", name: \"\" });\n }}\n className=\"font-handwritten text-ink-red text-sm underline decoration-wavy hover:text-ink-red/70 transition-colors\"\n >\n ✕ Clear all filters\n \n )}\n

\n \n )}\n \n \n );\n}\n",[],[60,158,192],"e69af57a-4314-11f1-8408-42b51c65c3df",["D",1777389247247],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Internet radio with paper HAM notebook UI and filters","imageUrl","userId","3c8dcd51-6315-4beb-9371-6de4c965b9c8","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019dd4a5-eadf-7547-8f4f-cc84801d2dfd","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_253":249},"org",{"_11":12,"_246":247,"_248":249,"_209":210,"_250":251,"_252":57},"branch",{"_17":137,"_13":16,"_36":44,"_238":199,"_239":-5,"_240":-5,"_241":-5,"_242":-5,"_243":-5,"_244":14,"_245":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Max Million","avatar","https://lh3.googleusercontent.com/a/ACg8ocLxYdwNzMBGCBsNA2zlokr-wTVxE4vTMGCv3ocUVXGaG-Qoug=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":199,"_13":14,"_49":338,"_201":-5,"_202":57,"_203":204,"_205":204,"_206":207,"_208":-5,"_209":210,"_211":86,"_212":48,"_213":-5,"_214":-5,"_215":51,"_216":217,"_218":-5,"_219":-5,"_220":-5,"_221":-5,"_222":223,"_224":223,"_225":226,"_227":226,"_228":226,"_229":223,"_230":223,"_231":339,"_233":340,"_235":341,"_237":57},[290,303,305],"files",[290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305],"counts",{"_281":51,"_282":87,"_283":51,"_32":284,"_285":286},[275,276,277],{"_36":76,"_43":44,"_39":42,"_13":61,"_54":-5,"_52":77,"_17":51,"_41":78,"_49":273,"_45":72,"_58":-5,"_18":274},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1777389291731],[60,61],{"_36":69,"_13":70,"_39":71,"_41":42,"_43":44,"_45":72,"_47":48,"_49":73,"_17":51,"_52":53,"_54":74,"_56":57,"_58":-5,"_18":280},{"_36":62,"_13":63,"_39":64,"_41":42,"_43":44,"_45":65,"_47":48,"_49":66,"_17":51,"_52":53,"_54":67,"_56":57,"_58":-5,"_18":279},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":278},[60,61,38],[60,61,63],[60,61,70],"pulls","branches","forks",{"_287":51,"_289":51},"connections",{"_287":51,"_288":51},"count","unfilledCount","emptyCount",{"_36":109,"_13":60,"_39":78,"_41":-5,"_43":44,"_45":110,"_47":48,"_49":111,"_17":51,"_52":77,"_54":-5,"_56":57,"_58":-5,"_91":336,"_18":337},{"_36":157,"_13":158,"_39":159,"_41":78,"_43":44,"_45":160,"_47":48,"_49":161,"_17":51,"_52":77,"_54":-5,"_56":57,"_58":-5,"_91":334,"_18":335},{"_36":191,"_13":192,"_39":193,"_41":159,"_43":44,"_45":194,"_47":48,"_49":195,"_17":51,"_52":53,"_54":196,"_56":57,"_58":-5,"_91":332,"_18":333},{"_36":183,"_13":184,"_39":185,"_41":159,"_43":44,"_45":186,"_47":48,"_49":187,"_17":51,"_52":53,"_54":188,"_56":57,"_58":-5,"_91":330,"_18":331},{"_36":175,"_13":176,"_39":177,"_41":159,"_43":44,"_45":178,"_47":48,"_49":179,"_17":51,"_52":53,"_54":180,"_56":57,"_58":-5,"_91":328,"_18":329},{"_36":168,"_13":169,"_39":170,"_41":159,"_43":44,"_45":160,"_47":48,"_49":171,"_17":51,"_52":53,"_54":172,"_56":57,"_58":-5,"_91":326,"_18":327},{"_36":76,"_13":61,"_39":42,"_41":78,"_43":44,"_45":72,"_47":48,"_49":142,"_17":51,"_52":77,"_54":-5,"_56":57,"_58":-5,"_91":324,"_18":325},{"_36":69,"_13":70,"_39":71,"_41":42,"_43":44,"_45":72,"_47":48,"_49":154,"_17":51,"_52":53,"_54":74,"_56":57,"_58":-5,"_91":322,"_18":323},{"_36":62,"_13":63,"_39":64,"_41":42,"_43":44,"_45":65,"_47":48,"_49":151,"_17":51,"_52":53,"_54":67,"_56":57,"_58":-5,"_91":320,"_18":321},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":148,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_91":318,"_18":319},{"_36":134,"_13":135,"_39":136,"_41":78,"_43":44,"_45":137,"_47":48,"_49":138,"_17":87,"_52":53,"_54":139,"_56":57,"_58":-5,"_91":316,"_18":317},{"_36":127,"_13":128,"_39":129,"_41":78,"_43":44,"_45":110,"_47":48,"_49":130,"_17":51,"_52":24,"_54":131,"_56":57,"_58":-5,"_91":314,"_18":315},{"_36":119,"_13":120,"_39":121,"_41":78,"_43":44,"_45":122,"_47":48,"_49":123,"_17":51,"_52":53,"_54":124,"_56":57,"_58":-5,"_91":312,"_18":313},{"_36":94,"_13":95,"_39":96,"_41":-5,"_43":44,"_45":97,"_47":48,"_49":98,"_17":51,"_52":77,"_54":-5,"_56":57,"_58":-5,"_91":310,"_18":311},{"_36":102,"_13":103,"_39":104,"_41":96,"_43":44,"_45":97,"_47":48,"_49":105,"_17":51,"_52":53,"_54":106,"_56":57,"_58":-5,"_91":308,"_18":309},{"_36":84,"_13":85,"_39":86,"_41":-5,"_43":44,"_45":87,"_47":48,"_49":88,"_17":51,"_52":89,"_54":90,"_56":57,"_58":-5,"_91":306,"_18":307},[],[85],[],[95,103],[304],[95],[],[60,120],[],[60,128],[],[60,135],[],[60,61,38],[],[60,61,63],[],[60,61,70],[297,298,299],[60,61],[],[60,158,169],[],[60,158,176],[],[60,158,184],[],[60,158,192],[292,293,294,295],[60,158],[291,296,300,301,302],[60],["D",1777389247247],{"_11":12,"_253":249},{"_11":12,"_246":247,"_248":249,"_209":210,"_250":251,"_252":57},{"_17":137,"_13":16,"_36":44,"_238":199,"_239":-5,"_240":-5,"_241":-5,"_242":-5,"_243":-5,"_244":14,"_245":12},"ctx",{"_231":-5,"_270":375,"_376":377,"_378":379,"_380":57,"_381":57,"_382":57,"_383":48,"_384":-5,"_385":-7,"_386":-7,"_387":51,"_388":57,"_389":57,"_390":-5,"_391":57,"_392":57,"_393":57,"_394":-5},"ENV",{"_346":347,"_348":349,"_350":16,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374},"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"]