This week I want to
- Make the presenters face only show up in the header when they are talking
- Make the song name and artwork show up when a song is playing
- Make this mobile friendly
- Add this to also work on the Youths Choice player
This week I added some key functionality for the station. I re made the header with a new layout, extra links and a presenter image and song information that intelligently switches based on whether the presenter is talking or playing a song.
Making the presenters face only show up when they are talking, I used some custom CSS and html to recognize whether our playout system (Zetta) is playing a song. If it is it will send over the now playing song’s title and artist this will then override the presenters name, artwork and show times etc by using the CSS class display: none. This also has a new feature called ajax reloading, this feature will allow the now playing song and presenter to dynamically change (so no need to refresh to see the most up to date info)
Making the header mobile friendly, Before this was added the header didn’t look great on mobile it was fine on desktop however as soon as you scaled it down to mobile elements didn’t show up on the screen as they hadn’t been designed to scale down. I used a mix of position absolute and position relative CSS classes in order for it to all show up properly and now it scales down and looks great on mobile!
Working on the Youths Choice player to add the same ajax reload technology and to also show up with who is live or what song is playing. I used similar code to what I used for the mobile header in order to achieve this I also added the play button, a youths choice logo and a small ad space at the bottom to promote shows or school related activities