fix: MediaMetadata not working properly

[codebytere]

Description of Change

Closes #31448.
Closes #30860.

Fixes an issue where MediaMetadata would not show up properly, and also ensures that this works properly in conjuction with globalShortcut handling for media keys. As of this PR: if a video element is played and no global shortcuts are registered, all media key handling works as it should be default. If a global shortcut is registered for a media key, then that takes precedence.

Tested with https://gist.github.com/5ba749964fcd7576b677a3ca93093edd.

Running gist before:

Running gist after:

The global shortcut behavior around media keys can also be verified by adding:

  globalShortcut.register('MediaPlayPause', () => {
    console.log('The global shortkey MediaPlayPause was pressed!')
  })

to the above provided gist and observing that the string is logged to console.

Checklist

• PR description included and stakeholders cc'd
• npm test passes
• PR release notes describe the change in a way relevant to app developers, and are capitalized, punctuated, and past tense.

Release Notes

Notes: Fixed an issue where MediaMetadata did not work properly.

[release-clerk]

Release Notes Persisted

Fixed an issue where MediaMetadata did not work properly.

[trop]

I have automatically backported this PR to "13-x-y", please check out #31532

[trop]

I have automatically backported this PR to "14-x-y", please check out #31533

[trop]

I have automatically backported this PR to "15-x-y", please check out #31534

[trop]

I have automatically backported this PR to "16-x-y", please check out #31535