[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_111":112,"_113":114},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","dominik1","name","radio-app","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/dominik1/radio-app/code/frontend/components/App.tsx","extension","id","28a2dae7-f738-4693-a028-e163c70705e9","App.tsx","fileId","01a09ba5-f0ae-76c6-beab-4a86dd501ad9","parentId","01a09ba5-f0b0-766b-99ae-00965637a3b3","branchId","26a9cea8-03a5-4dee-ab96-5b9583a81dac","branchVersion",71,"latest",true,"createdAt",["D",1789324968608],"version",15,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// hls.js ładujemy tylko dla stacji HLS (Trójka).\nconst HLS_JS = \"https://esm.sh/hls.js@1.5.20\";\n\n// Ile czekamy bez postępu odtwarzania, zanim połączymy się od nowa\nconst STALL_MS = 10_000;\nconst CONNECT_MS = 15_000;\nconst MAX_ATTEMPTS = 6;\n\ntype Station = {\n id: string;\n name: string;\n desc: string;\n short: string;\n accent: string; // kolor akcentu (hex) — aplikowany subtelnie\n logo: string | null;\n logoV?: string | null; // wersja logo — zmienia się razem ze źródłem, omija cache przeglądarki\n bg?: string | null; // kolor tła kafelka (gdy logo np. białe wymaga tła)\n src?: string | null; // bezpośredni adres HTTPS strumienia (null → tylko przez proxy)\n hls?: boolean;\n};\n\ntype Status = \"idle\" | \"connecting\" | \"playing\" | \"buffering\" | \"paused\";\n\nconst STATUS_LABEL: Record = {\n idle: \"\",\n connecting: \"łączenie…\",\n playing: \"na żywo\",\n buffering: \"buforowanie…\",\n paused: \"pauza\",\n};\n\n// Pulsujące „słupki” jako wskaźnik odtwarzania.\nfunction Bars() {\n return (\n \n {[0, 1, 2].map((i) => (\n \n ))}\n \n );\n}\n\nexport function App() {\n const [stations, setStations] = useState([]);\n const [activeId, setActiveId] = useState(null);\n const [status, setStatus] = useState(\"idle\");\n const [error, setError] = useState(null);\n const [failedLogos, setFailedLogos] = useState>(new Set());\n const audioRef = useRef(null);\n\n // Stan połączenia trzymamy w refach — zdarzenia