From 22eb6bf3f6e48b3a57002f9a420ba85924aa9664 Mon Sep 17 00:00:00 2001
From: gnattu <gnattu@users.noreply.github.com>
Date: Sat, 25 May 2024 11:50:36 -0400
Subject: [PATCH] Backport pull request #5526 from jellyfin-web/release-10.9.z
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Original-merge: 6da3dd7c86a268aa1e109b193a8425af22abe413

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: Joshua M. Boniface <joshua@boniface.me>
---
 src/scripts/keyboardNavigation.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js
index 6e8e477d7a..ed13e90415 100644
--- a/src/scripts/keyboardNavigation.js
+++ b/src/scripts/keyboardNavigation.js
@@ -45,6 +45,11 @@ const KeyNames = {
  */
 const NavigationKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
 
+/**
+ * Keys used for media playback control.
+ */
+const MediaKeys = ['MediaRewind', 'MediaStop', 'MediaPlay', 'MediaFastForward', 'MediaTrackPrevious', 'MediaTrackNext', 'MediaPlayPause'];
+
 /**
  * Elements for which navigation should be constrained.
  */
@@ -89,6 +94,16 @@ export function isNavigationKey(key) {
     return NavigationKeys.indexOf(key) != -1;
 }
 
+/**
+ * Returns _true_ if key is used for media playback control.
+ *
+ * @param {string} key - Key name.
+ * @return {boolean} _true_ if key is used for media playback control.
+ */
+export function isMediaKey(key) {
+    return MediaKeys.includes(key);
+}
+
 /**
  * Returns _true_ if the element is interactive.
  *
@@ -108,6 +123,7 @@ export function isInteractiveElement(element) {
 }
 
 export function enable() {
+    const hasMediaSession = 'mediaSession' in navigator;
     window.addEventListener('keydown', function (e) {
         const key = getKeyName(e);
 
@@ -116,6 +132,11 @@ export function enable() {
             return;
         }
 
+        // Ignore Media Keys for non-TV platform having MediaSession API
+        if (!browser.tv && isMediaKey(key) && hasMediaSession) {
+            return;
+        }
+
         let capture = true;
 
         switch (key) {