From bdce41c3ae2c46ca10cb46d91881c9dceae0588c Mon Sep 17 00:00:00 2001 From: gnattu Date: Fri, 17 May 2024 16:08:51 +0800 Subject: [PATCH 1/4] =?UTF-8?q?Don=E2=80=99t=20bind=20to=20keyevents=20of?= =?UTF-8?q?=20media=20keys?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- src/scripts/keyboardNavigation.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js index 6e8e477d7a..7673c4c6f5 100644 --- a/src/scripts/keyboardNavigation.js +++ b/src/scripts/keyboardNavigation.js @@ -167,24 +167,6 @@ export function enable() { case 'Pause': inputManager.handleCommand('pause'); break; - case 'MediaPlayPause': - inputManager.handleCommand('playpause'); - break; - case 'MediaRewind': - inputManager.handleCommand('rewind'); - break; - case 'MediaFastForward': - inputManager.handleCommand('fastforward'); - break; - case 'MediaStop': - inputManager.handleCommand('stop'); - break; - case 'MediaTrackPrevious': - inputManager.handleCommand('previoustrack'); - break; - case 'MediaTrackNext': - inputManager.handleCommand('nexttrack'); - break; default: capture = false; From 68bac17a461acf15e0ce05516955808343e6370f Mon Sep 17 00:00:00 2001 From: gnattu Date: Tue, 21 May 2024 14:13:19 +0800 Subject: [PATCH 2/4] Only bind media keys for TV and browsers not having mediaSession --- src/scripts/keyboardNavigation.js | 38 +++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js index 7673c4c6f5..22f9738cf2 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.indexOf(key) != -1; +} + /** * Returns _true_ if the element is interactive. * @@ -116,6 +131,11 @@ export function enable() { return; } + // Ignore Media Keys for non-TV platform having MediaSession API + if (!layoutManager.tv && isMediaKey(key) && 'mediaSession' in navigator) { + return; + } + let capture = true; switch (key) { @@ -167,6 +187,24 @@ export function enable() { case 'Pause': inputManager.handleCommand('pause'); break; + case 'MediaPlayPause': + inputManager.handleCommand('playpause'); + break; + case 'MediaRewind': + inputManager.handleCommand('rewind'); + break; + case 'MediaFastForward': + inputManager.handleCommand('fastforward'); + break; + case 'MediaStop': + inputManager.handleCommand('stop'); + break; + case 'MediaTrackPrevious': + inputManager.handleCommand('previoustrack'); + break; + case 'MediaTrackNext': + inputManager.handleCommand('nexttrack'); + break; default: capture = false; From 0271ae42c0b6d7a382dd4acdf88be38d0c80c53c Mon Sep 17 00:00:00 2001 From: gnattu Date: Tue, 21 May 2024 17:55:11 +0800 Subject: [PATCH 3/4] Use modern syntax & slight perf improvement --- src/scripts/keyboardNavigation.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js index 22f9738cf2..52eced1fe4 100644 --- a/src/scripts/keyboardNavigation.js +++ b/src/scripts/keyboardNavigation.js @@ -101,7 +101,7 @@ export function isNavigationKey(key) { * @return {boolean} _true_ if key is used for media playback control. */ export function isMediaKey(key) { - return MediaKeys.indexOf(key) != -1; + return MediaKeys.includes(key); } /** @@ -123,6 +123,7 @@ export function isInteractiveElement(element) { } export function enable() { + const hasMediaSession = 'mediaSession' in navigator; window.addEventListener('keydown', function (e) { const key = getKeyName(e); @@ -132,7 +133,7 @@ export function enable() { } // Ignore Media Keys for non-TV platform having MediaSession API - if (!layoutManager.tv && isMediaKey(key) && 'mediaSession' in navigator) { + if (!layoutManager.tv && isMediaKey(key) && hasMediaSession) { return; } From 11e3bf395e921f30d7ac76c5e4487e455d03b678 Mon Sep 17 00:00:00 2001 From: gnattu Date: Tue, 21 May 2024 22:37:35 +0800 Subject: [PATCH 4/4] use browser.tv Co-authored-by: Dmitry Lyzo <56478732+dmitrylyzo@users.noreply.github.com> --- src/scripts/keyboardNavigation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js index 52eced1fe4..ed13e90415 100644 --- a/src/scripts/keyboardNavigation.js +++ b/src/scripts/keyboardNavigation.js @@ -133,7 +133,7 @@ export function enable() { } // Ignore Media Keys for non-TV platform having MediaSession API - if (!layoutManager.tv && isMediaKey(key) && hasMediaSession) { + if (!browser.tv && isMediaKey(key) && hasMediaSession) { return; }