Bug: Not preventing device sleep

Checklist

• Verified whether your issue exists in the latest version Mux Element(s) release: npm install @mux/[element_name] or yarn @mux/[element_name].
  • (NOTE: If the issue is not occurring in the latest version, we may not resolve it.)
• Confirmed that this issue hasn’t already been filed.

Which Mux Elements/Packages has a bug?

• mux-player

Which browser(s) are you using?

• Chrome
• Edge (“Edgeium”)
• Safari
• Chrome Android

Which operating system(s) are you using?

macOS, Windows, Android

How are you using Mux Elements?

<script> tag

Describe the bug

Whenever a video is playing, it should prevent the device from going to sleep. This should be the default behavior of most browsers with the default HTML video element, so I’m not sure what is changing in Mux Player that disables this. Based on my tests, Media Chrome does not have this problem, it is isolated to Mux Player. It doesn’t happen on every device, but on those that it does, it happens consistently.

Steps To Reproduce

1. Set device sleep or lock delay to something short for easier testing.
2. Start playing a Mux Player video and wait the amount of time for the sleep or lock to potentially activate.

Link to example: https://tmi.mux.com/sessions/opening-remarks (tested this behavior on Mux hosted videos to make sure it wasn’t just on our website, it occurs on the TMI videos as well as in the Mux dashboard)

The current behavior

Device falls asleep when video is playing

The expected behavior

Device stays awake as long as video is playing

[MrSethT]

Here’s the workaround I am using in the meantime for this. (Sorry if this isn’t how sharing of this should be done. If there’s a better place for it, point me to it.)

wakeLock = null;

startWakeLock = function () {
    document.addEventListener('visibilitychange', () => {
        if (wakeLock !== null && document.visibilityState === 'visible') {
            requestWakeLock();
        }
    })
    requestWakeLock();
};

requestWakeLock = async function () {
    // Create a reference for the Wake Lock.
    if (navigator.wakeLock) {// create an async function to request a wake lock
        try {
            wakeLock = await navigator.wakeLock.request('screen');
            console.log('requestWakeLock');
        } catch (err) {
            console.log(err.name);
        }
    }
};

releaseWakeLock = function () {
    if (wakeLock)
        wakeLock.release()
            .then(() => {
                console.log('releaseWakeLock');
                wakeLock = null;
            })
};

//get the mux-player
popupVideo = document.getElementById("vidPopup");
//add event listeners 
popupVideo.addEventListener("play", function () {
    startWakeLock();
});
popupVideo.addEventListener("pause", function () {
    releaseWakeLock();
});

[luwes]

I filed a Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=1348320

Confirmed it’s not an issue on Safari and Firefox.

On Edge it is an issue as well probably because the underlying Chromium.