Bug: `requestFullscreen` correctly enters fullscreen, but gets stuck

[dylanjha]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player, mux-player-react

Which browsers are you using?

Chrome

Which operating systems are you using?

None

Description

To programmatically enter fullscreen I tried:

document.querySelector('mux-player').requestFullscreen()

This correctly enters fullscreen, but it seems like the player doesn't know we're in fullscreen because the fullscreen button does not change to show me the option to "exit full screen".

The workaround is to dispatch mediaenterfullscreenrequest via the mediaController:

const evt = new CustomEvent("mediaenterfullscreenrequest", { composed: true, bubbles: true })
document.querySelector('mux-player').mediaController.dispatchEvent(evt)

Since Mux Player mirrors the HTML5 video API, I would expect requestFullscreen to work?

Reduced test case

https://stream.new/v/013UuXYvxE6dmA6NQrVHmoxGWAEL7mzly

Steps to reproduce

Use the stream.new link and follow the instructions above by copy/pasting into the console.

Current Behavior

Enters fullscreen, but the player is stuck with no ability to click "exit full screen"

Expected Behavior

It should enter fullscreen and show me the button to exit fullscreen

Errors

No response

What version of the package are you using?

No response

[scmilee]

I've also been running into this issue using mux-player-react and dispatch from useMediaDispatch.

  dispatch({
       type: MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST
  });

results in full screen taking effect but the mediaisfullscreen attribute on the media-controller doesn't get set. If I update my template's fullscreen button to target the media controller, it works but requires two click to exit fullscreen.

    <media-fullscreen-button
        part="bottom fullscreen button"
        disabled="{{disabled}}"
        aria-disabled="{{disabled}}"
        mediacontroller="adept-media-controller"
    >

[scmilee]

In a little test I've done using the node/ref of the mux react player,

         node.addEventListener('fullscreenchange', () => console.log('Fullscreen changed root'));
            const mediaController = node?.shadowRoot
                ?.querySelector('media-theme')
                ?.shadowRoot?.querySelector('media-controller');
            mediaController?.addEventListener('fullscreenchange', () => console.log('Fullscreen changed'));

fullscreen events triggered using dispatch are only picked up by the player, but normal fullscreen toggles using the media chrome button are picked up by both, maybe we have to target the media-controller element when using dispatch?

[luwes]

This issue has been resolved in #1107

[luwes]

@scmilee be sure to use the correct React hook to set the element you want to go fullscreen.

See this example here https://github.com/muxinc/media-chrome/blob/16e43f2a8dd8ce877e54c9243563d095ef9889ca/examples/nextjs-with-typescript/src/app/material-ui-player-chrome/components/PlayerContainer.tsx#L1-L1

Something like this

  const fullscreenRefCallback = useMediaFullscreenRef();
  return (
    <div
      id="fullscreen"
      style={{ width: '100vw', display: 'flex', flexDirection: 'column' }}
      ref={fullscreenRefCallback}
    >