Webbspelaren blev snabbt mycket mer än en play-knapp.
Jag byggde ut webbspelaren med “nu spelas”, historik, status och mer stationinformation. Historiken begränsades och fick egna filter så stationselement och tom metadata inte skulle förstöra listan.
Det som från början var några rader klientkod blev gradvis en hel frontend till radioplattformen. Jag la till bättre layout, mobilanpassning, omslag, progress, volym, requestflöde, likes och schema.
Färgpaletten som fortfarande används idag växte fram här: nästan svart bakgrund, varmvit text, orange accent och guldtoner. Jag ville att sidan skulle kännas mörk och modern utan att bli ännu en generisk neon-DJ-sida.
Det här drev också backend framåt. Om webben ska visa korrekt historik kan klienten inte behöva gissa vad en “riktig låt” är. Relay 7 Now Playing API fick därför mer ansvar.
Webben blev också en driftpanel
När jag ändå hade realtidsdata började jag använda webben för att upptäcka fel. Om now-playing inte uppdateras men ljudet hörs vet jag att metadata/API-lagret är misstänkt. Om appen ser nytt men webben gammalt är klientcache mer sannolik.
Det här är en anledning till att jag gillar små statusytor. En bra UI-indikator kan vara minst lika användbar som en loggrad när jag snabbt ska förstå vilket lager som lever.
Jag började bygga UI efter driftbehov och inte bara utseende
Webben var först till för lyssnaren, men jag märkte snabbt hur värdefull den var för mig själv. Om “nu spelas” stannar på en gammal låt medan ljudet fortsätter vet jag direkt att audio och metadata har skiljt sig åt. Om historiken uppdateras men omslaget inte gör det kan felet ligga ännu längre ut i kedjan.
Det gjorde att jag började uppskatta små visuella signaler. En statuspunkt, senaste uppdateringstid och ett tydligt fallbackläge kan spara mycket mer tid än en stor logg när jag först ska hitta rätt del.
Jag ville samtidigt inte förvandla publikspelaren till en teknisk dashboard. Därför växte tanken på en separat kontrollvy fram: publiken får det som är relevant för lyssning, jag får de diagnostiska detaljerna i Kontrollcenter.