Controls not fading correctly on mobile

[poolodhi]

Have you read the Tutorials?
yes

Have you read the FAQ and checked for duplicate open issues?
yes

What version of Shaka Player are you using?
3.0.4 and 2.5.10

Please ask your question
Is there a way to fade away the controls after some time in shaka player?

Currently, if we hover on seek bar or any other controls on the bottom menu the controls does not fade away after some time.
It only hides if we move the mouse somewhere out. While in mobile view it only fades when we touch somewhere outside.

Can you suggest a way to do so?

[joeyparrish]

For a mouse, the behavior should be:

1. When the mouse enters the video element, show the controls.
2. If the video is paused or ended, the controls stay visible.
3. If the mouse is over any specific control, the controls stay visible.
4. If a menu is open, and another part of the page is clicked, the menu should close.
5. If the mouse is idle for some time, but not over a specific control, and the video is not paused or ended, the controls fade.
6. If the mouse leaves the video element, the controls fade.

For touch screens, the behavior should be:

1. When the video frame is tapped, show the controls.
2. If the video is paused or ended, the controls stay visible.
3. If a menu is open, the controls stay visible.
4. If a menu is open, and another part of the video is tapped, the menu should close.
5. If nothing is touched for some time, but no menus are open, and the video is not paused or ended, the controls fade.

However, there seems to be a small bug on mobile. In my manual testing, I found:

1. If I tap the overflow menu, then tap outside the video element, the menu closes and the controls fade.
2. If I tap the overflow menu, then tap inside the video element, the menu closes (as it should), but the controls do not fade. This is a bug.

Does this help explain how things should work?

I will label this "bug" for now and try to fix the issue I just mentioned. Would this resolve your problem?

[poolodhi]

Thanks for the explanation for all the scenarios.

But does the bug you reported will fix the case when we click on any other item in the controls like seek bar or volume or any other custom controls (other than overflow menu). As in mobile view if we click on the above-mentioned controls, then they do not fade away until clicked somewhere else.
This is a concern for me.

[joeyparrish]

I can reproduce that, yes. Something odd is happening, and I don't understand it yet. For some reason, on mobile, using touch events, the controls panel winds up in a "hover" state according to the browser.

I found a fix for this in the overflow menus, but it is still happening for other controls. I didn't notice the effect on, say, mute when I initially tested it.

[joeyparrish]

Found another solution that works for everything. Once I get the changed through code review, they will be published to GitHub. Thanks!

[poolodhi]

Thanks for the help. Can you reply once its pushed?

[joeyparrish]

The fix has already been pushed to the v3.0.x branch, and we are working to push out v3.0.5 very soon.

[poolodhi]

Just a request we are using 2.5.10 majorly on our application. Is it possible to give a patch release for that version?

[joeyparrish]

The fix has been cherry-picked for both v2.5.17 and v3.0.5.

[joeyparrish]

Both releases are live on GitHub and NPM already. There is an issue with our deployment to Google Hosted Libraries, which has delayed the release announcement email.