Safari user activity not updating in fullscreen with svg icons active

[danrossi]

Description

I discovered a strange bug where the user activity is not updating in fullscreen with Safari. When experimentalSvgIcons is enabled the controls stay visible.

When the config is disabled hover out state is updating.

Reduced test case

https://electroteque.org/dev/safaribug/

Steps to reproduce

1. enable experimentalSvgIcons
2. In safari launch fullscreen
3. Hover out user state doesn't update and controls stay visible

Errors

Working example with svg disabled

https://electroteque.org/dev/safaribug/svgoff.html

What version of Video.js are you using?

8.23.4

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Safari

What OS(es) and version(s) does this occur with?

macOS

[danrossi]

It's intermittent depending where the mouse cursor is while in fullscreen. It stays active all the time while in the controlbar area. But Ive managed to get a user inactive state moving it further up the player. Most of the time there is no inactive state called and the controls stay visible in fullscreen after going to fullscreen.

[phloxic]

Hi @danrossi, how's it going?

It's a Safari thing I think. At least for me this is/was never different (FWIW same behaviour as youtube), e.g. on a Powerbook the controlbar hides only when the cursor is moved outside left or right.

It works in Safari native also when you move the mouse below the player (over top shows apple menu), but that's not the point. For iOS you could set playsinline: true. I haven't tried html5.nativeControlsForTouch, but that's probably not what you're looking for either.

[danrossi]

Hi mate how is it going. Its in macOS. There is no user activity state change after going fullscreen. It depends where the cursor is placed I got it working sometimes.

[danrossi]

I forgot to add. It's only happening with the svg icons enabled with experimentalSvgIcons which is needed to override components with custom svg icons.

[phloxic]

Did some more testing.

I get exactly the same behaviour for svg on and off: it the controlbar does not hide when the mouse is at the bottom of the screen, otherwise it hides due to lack of user activity. – I was wrong regarding the youtube player, there it works.

macos 15.7, safari 26.0.1 - and as far as I remember it was always that way with Video.js.

[danrossi]

this is working for me in macOS safari. the user state goes inactive in fullscreen. only if the mouse is out of the controlbar area and in the middle. with svg on, it's like something is interfering capturing a mouse event to begin the inactive timeout.

https://electroteque.org/dev/safaribug/svgoff.html

[danrossi]

Hopefully this fault is fixable. As I've been told the default web font icons don't look as good as the svg icons. So can't revert to that.

[danrossi]

any ideas what the problem might be in the activity tracker. the inactive timer never runs from the looks of it.

[danrossi]

The activity tracker method is the location of the bug. Is this easily fixable to track user activity to hide the controls in fullscreen ?

[phloxic]

@danrossi - I misunderstood the problem, sorry.

Yes, you're right. Perhaps the following helps to find a solution: It starts working again when, after going fullscreen, you do 1 interaction with the controlbar, like hovering in and out, pausing, or changing subtitles. Then move the mouse away, and it works. Also works via tab navigation.

It works right away when going fullscreen if userActions.hotkeys are enabled (fullscreen toggle f by default).

[danrossi]

I found the bug as I got the ok to spend time looking into it for a workaround. When you go to click fullscreen and go fullscreen. There is no controlbar mouseleave event dispatched. So the activity timeout doesn't get set back.

https://github.com/videojs/video.js/blob/main/src/js/player.js#L4436

[danrossi]

if (videojs.browser.IS_SAFARI) {


            player.ready(() => {

                const controlBar =  player.getChild('controlBar');

                //when entering fullscreen dispatch a missing mouseleave event on the controlbar
                player.on("fullscreenchange", () => {
                    if (player.isFullscreen()) {
                        controlBar.trigger("mouseleave");
                    }
                });
            });
       }

[phloxic]

Great, you beat me to it ;-)

To self-document the hack one could tighten the conditional with

if (videojs.browser.IS_SAFARI && player.options().experimentalSvgIcons) {
// ...

to flag it as a workaround. Because we still don't know why this is only needed with SVG icons.

Meanwhile it's a very useful hack.

[danrossi]

There is no mouseleave event dispatched from the controlbar container upon clicking the fullscreen icon to go fullscreen. So the timeout setting doesn't get reset and the activity timer doesn't get called because the timeout is still 0. Cost me a few hours debugging and fixing it. No idea how to make that into a PR. It might be a stylesheet bug preventing the event which could take longer to debug.