Log inSign up

dominik1

radio-app

Public
Minimalny mobilny odtwarzacz polskich stacji radiowych
demoradioreact
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

📻 Radio PL

Minimalny, mobile-first odtwarzacz polskich stacji radiowych. Klikasz stację — i gra. Jasna, „redakcyjna” szata (bez kiczu). Zbudowany na Val Town (React + Hono).

Otwórz: https://radio-pl.val.run

Stacje

25 stacji, pogrupowanych w lib/stations.ts:

GrupaStacjeFormat
RMFRMF FM, RMF MAXX, RMF Classic, RMF24MP3 (HTTPS)
Polskie RadioJedynka, Dwójka, Trójka, Czwórka, Polskie Radio 24AAC · HLS (hls.js; w Safari natywnie)
NiezależneRadio Nowy Świat, Radio 357MP3 / AAC (HTTPS)
AgoraTOK FM, Radio Złote Przeboje, Radio Pogoda, KISS FMMP3 (HTTPS)
ZPR MediaEska, Eska 2, Eska Rock, VOX FMMP3 (HTTPS)
EurozetRadio ZET, Antyradio, Chillizet, Meloradio, Radio PlusMP3 (HTTPS)
RegionalneRadio LublinMP3 (HTTPS)

Instalacja jako aplikacja

Strona ma manifest PWA (/manifest.webmanifest) i ikony (/icons/*, źródło w lib/icons.ts): w Chrome na Androidzie „Dodaj do ekranu głównego” / „Zainstaluj aplikację” daje ikonę z falami radiowymi i uruchamia odtwarzacz w osobnym oknie, bez paska adresu.

Jak to działa

Rendering mermaid diagram...
  • Odtwarzanie bezpośrednie — strumienie HTTPS grają wprost z serwerów stacji. Wcześniej wszystko szło przez proxy vala (serwer w USA), co dawało zacięcia.
  • Automatyczne wznawianie — przy zerwaniu, ended albo braku postępu przez 10 s odtwarzacz łączy się ponownie (rosnący odstęp, maks. 6 prób). Po 2 nieudanych próbach bezpośrednich przełącza się na proxy.
  • Proxy audio /stream/:id — zapasowe; obsługuje też czysty http:// (bez blokady „mixed content”). User-Agent = VLC, bo serwery SHOUTcast oddają przeglądarkom HTML strony statusu zamiast strumienia.
  • Logotypy /logo/:id — zgrywane raz do blob storage vala; zmiana adresu w lib/stations.ts automatycznie odświeża kopię. Typ obrazka rozpoznawany po zawartości.

Pliki

index.ts              ← Hono: /api/stations, /logo/:id, proxy audio /stream/:id
lib/stations.ts       ← stacje (nazwa, monogram, kolor akcentu, strumień)
frontend/
  root.tsx            ← HTML shell (jasny motyw, Google Fonts)
  index.tsx           ← entrypoint React
  components/App.tsx  ← lista stacji + przyklejona belka odtwarzacza

Remix szablonu react-hono-starter.