GoogleChromeLabs / react-adaptive-hooks

Deliver experiences best suited to a user's device and network constraints

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ambient Light Events (hear me out...)

wingleung opened this issue · comments

commented

OK, just hear me out on this...

Let's say you have a cosy evening at home, your SO is sitting next to you on the couch watching The Crown on Netflix and the lights are turned off for extra dramatic effects.

However, suddenly you want to check something on your device for whatever reason. Maybe you're frustrated they switched actors in season 3 of The Crown or you want to check something you spent the entire day thinking of.

You turn your device on which is in dark mode to save your eyes (and arguments with you SO) and if you're lucky the site you're visiting automatically picks up the prefers-color-scheme: dark media query and sets the background to a nice and gentle dark tone for smoother reading in dark environments.

And then, you want to play a video and what happens...
alt text

But, what if the web app is intelligent enough to pick up light intensity and stream a more suited video source for dark environment. In comes the useAmbientLightEvents() hook allowing developers to adapt the media assets and others based on surrounding light intensity. You don't want to use dark mode for this because then you'd get the "dark" streams on broad daylight...

dark stream in broad daylight

Let's just say, Ambient Light Events could offer users better experiences than dark mode depending on the use case. Even though support is somewhat limited, only Edge supports it 🙄, I think we could let the big browsers know we might be interested in seeing this in future versions of their browsers. Unless there's a good reason they're not supporting it.

Well at the very least, thanks for hearing me out 😀

disclaimer: this ticket will self-close if it's not gaining traction in 1 week