fluid-lab / gamepad-navigator

GSoC 2020 project
Other
6 stars 10 forks source link

Optional Focus Indicator doesn't work in fullscreen mode. #168

Open duhrer opened 4 months ago

duhrer commented 4 months ago

In #162, an optional focus indicator was added. This uses a layer similar to the modal manager, but unlike the modal manager, the focus indicator is not visible when working with a fullscreen element on a page like this one.

This may be a layering issue, or we may have to look at what we did with the modal manager to make it work in fullscreen mode.

duhrer commented 4 months ago

There is no special logic to the modal manager. My best guess is that because the modal receives focus, it jumps in front of the fullscreen element on its own. We may need to watch the state of fullscreen and move the focus indicator back and forth. This may require more of the DOM manipulation used for #155.

duhrer commented 4 months ago

We may have to live with this, especially with regards to video elements.

I tried wrapping a video element with an overlay element ,which did nothing. I tried inserting the overlay into the video element, which didn't work either. I tried fiddling with the z-index of the overlay and pointer in both scenarios, no difference.

It seems like the modal manager only works because it receives focus and jumps in front of the fullscreen content. In this case, we can't use a similar approach because we want to keep focus where the user intended, i.e. on the play button, timeline, et cetera.

I've seen posts like this one on stackoverflow suggesting simulating fullscreen by changing the width of the element, but there are problems with this approach.

First, you can't request full screen without user input. This means that you'd either need to hijack the initial click on the fullscreen icon, or to prompt the user to confirm that they want to go into fullscreen. If you just resize the video and don't request fullscreen for your container, the browser controls will still be displayed, which is not what the user expects.

Even if you manage to fullscreen your own element and stretch the video to fill it, the browser wouldn't hide the video controls. You might be able to specifically hide the controls, but you're also messing with whatever code sites may have bound to the fullscreenchangeevent.