As a fan of Hug68's Twitch stream, I've been bothered by his away screen's inaccurate time display - it's an image, so the time was only right once a day(in terms of military time). This is an updated take on http://www.breakyourownnews.com/, with features that help enable a "News" style presentation.
An accurate time display, updated once a minute and in military format.
The "Live", "Breaking News", and the text below are all editable as seen in the demonstration gif above. By clicking/tapping on the text, users are able to change the text. This allows different headlines, statuses, descriptions, and ticker to be set immediately. These rely heavily on the content editable
features of HTML, and I utilized react-simple-contenteditable
from npm.
I'm leveraging CSS's vmin
properties for a consistent presentation in both orientations.
By going to the route /#/greenscreen
, a green screen is the background instead to allow using the visuals as an overlay.
A user would be able to upload an image of their choice. I think it'll work well on the phone, but how the image is sized and centered might be a concern.