Don’t bind to keyevents of media keys when browser support mediaSession

[gnattu]

These events are already handled by MediaSession. On some operating systems, like Windows, the browser will send both the MediaSession event and the keydown event to the webpage, causing the event to be handled twice and resulting in issues.

Changes

Remove media key binding in keyboardNavigation

Issues

Fixes #5523

[jellyfin-bot]

Cloudflare Pages deployment

Latest commit	bdce41c
Status	✅ Deployed!
Preview URL	https://0a269a58.jellyfin-web.pages.dev
Type	🔀 Preview

View build logs
View bot logs

[dmitrylyzo]

This needs to be tested on TV with keyboard connected. keyboardNavigation.js is primarily for TV.
Btw, Media* key codes are also come from the remote.

[gnattu]

This needs to be tested on TV with keyboard connected. keyboardNavigation.js is primarily for TV. Btw, Media* key codes are also come from the remote.

If the TVs really work that bad with that then this should be TV only, having both listeners will clearly conflicts with each other.

[dmitrylyzo]

We could do something like this:

const hasMediaSession = 'mediaSession' in navigator;

...

case 'MediaPlayPause':
    if (!hasMediaSession) inputManager.handleCommand('playpause');
    break;

But I have no idea if modern TVs have MediaSession.

[gnattu]

But I have no idea if modern TVs have MediaSession.

Even if they do, is it really reliable is also questionable.

Do we have the double event issue for TV yet? If we don't then probably one of the event handler is not really working for the TVs, but which one is unknown.

[dmitrylyzo]

I'm sure keydown works for Media* keys on Tizen - that's how Samsung recommends handling them.
https://developer.samsung.com/smarttv/develop/api-references/tizen-web-device-api-references/tvinputdevice-api.html

var i, keyCode = {}, supportedKeys;
supportedKeys = tizen.tvinputdevice.getSupportedKeys();
for (i = 0; i < supportedKeys.length; i++) {
    keyCode[supportedKeys[i].name] = supportedKeys[i].code;
}
if(keyCode.hasOwnProperty("ChannelUp")) {
    tizen.tvinputdevice.registerKey("ChannelUp");
}
window.addEventListener("keydown", function(keyEvent) {
    // identify the key by the numeric code from the keyEvent
    if(keyEvent.keyCode === keyCode.ChannelUp) {
        console.log("The CHANNEL UP was pressed");
    }
});

After a quick look, there is no MediaSession API.
https://developer.samsung.com/smarttv/develop/specifications/web-engine-specifications.html

[gnattu]

@GeorgeH005 Can you do me a favor for this as well? Can you test if webOS have MediaSession and is its MediaSession reliable? So that we can have some level of confidence for two major smart TV platforms.

[GeorgeH005]

@gnattu MediaSession does seem to exist in the webOS app runtime. Couldn't test its reliability right now, but I'll try to in the following days. The remote also doesn't have any media keys, so I can't test if they bind to those events or not.

[gnattu]

Updated to make the compatibility better. Now it only binds media keys on TV and browsers not having mediaSession. Should work good enough and cover most use cases.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarCloud