Merge pull request #6993 from brad1111/uwp-xbox-controller-fix

Use keycodes for UWP controller instead of gamepadtokey.

src/apps/stable/routes/user/settings/index.tsx

@@ -15,6 +15,7 @@ import globalize from 'lib/globalize';
 import browser from 'scripts/browser';
 import Dashboard from 'utils/dashboard';
 import shell from 'scripts/shell';
+import keyboardNavigation from 'scripts/keyboardNavigation';
 
 const UserSettingsPage: FC = () => {
     const { user: currentUser } = useApi();
@@ -46,6 +47,9 @@ const UserSettingsPage: FC = () => {
         );
     }
 
+    // gamepad toggle unavailable on EdgeUWP, and smoothscroll unavailable on non-TV layout
+    const isControlsPageEmpty = !keyboardNavigation.canEnableGamepad() && !layoutManager.tv;
+
     return (
         <Page
             id='myPreferencesMenuPage'
@@ -228,7 +232,7 @@ const UserSettingsPage: FC = () => {
                             </LinkButton>
                         )}
 
-                        {isLoggedInUser && !browser.mobile && (
+                        {isLoggedInUser && !browser.mobile && !isControlsPageEmpty && (
                             <LinkButton
                                 href={`#/mypreferencescontrols?userId=${userId}`}
                                 className='lnkControlsPreferences listItem-border'

src/controllers/user/controls/index.html

@@ -6,7 +6,7 @@
                     ${Controls}
                 </h2>
 
-                <div class="checkboxContainer checkboxContainer-withDescription">
+                <div class="checkboxContainer checkboxContainer-withDescription enableGamepadContainer hide">
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="chkEnableGamepad" />
                         <span>${LabelEnableGamepad}</span>

src/controllers/user/controls/index.js

@@ -3,6 +3,7 @@ import toast from '../../../components/toast/toast';
 import globalize from '../../../lib/globalize';
 import appSettings from '../../../scripts/settings/appSettings';
 import Events from '../../../utils/events.ts';
+import keyboardNavigation from 'scripts/keyboardNavigation';
 
 export default function (view) {
     function submit(e) {
@@ -19,6 +20,7 @@ export default function (view) {
     }
 
     view.addEventListener('viewshow', function () {
+        view.querySelector('.enableGamepadContainer').classList.toggle('hide', !keyboardNavigation.canEnableGamepad());
         view.querySelector('.smoothScrollContainer').classList.toggle('hide', !layoutManager.tv);
 
         view.querySelector('.chkEnableGamepad').checked = appSettings.enableGamepad();

src/elements/emby-select/emby-select.js

@@ -7,8 +7,9 @@ import 'webcomponents.js/webcomponents-lite';
 const EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
 
 function enableNativeMenu() {
+    // WebView 2 creates dropdown that doesn't work with controller.
     if (browser.edgeUwp || browser.xboxOne) {
-        return true;
+        return false;
     }
 
     // Doesn't seem to work at all
@@ -79,7 +80,8 @@ function onMouseDown(e) {
 }
 
 function onKeyDown(e) {
-    if (e.keyCode === 13 && !enableNativeMenu()) {
+    // Xbox controller for UWP WebView2 uses keycode 195 to select.
+    if ((e.keyCode === 13 || e.keyCode === 195) && !enableNativeMenu()) {
         e.preventDefault();
         showActionSheet(this);
     }

src/scripts/browser.js

@@ -290,7 +290,7 @@ browser.hisense = userAgent.toLowerCase().includes('hisense');
 browser.tizen = userAgent.toLowerCase().indexOf('tizen') !== -1 || window.tizen != null;
 browser.vidaa = userAgent.toLowerCase().includes('vidaa');
 browser.web0s = isWeb0s();
-browser.edgeUwp = browser.edge && (userAgent.toLowerCase().indexOf('msapphost') !== -1 || userAgent.toLowerCase().indexOf('webview') !== -1);
+browser.edgeUwp = (browser.edge || browser.edgeChromium) && (userAgent.toLowerCase().indexOf('msapphost') !== -1 || userAgent.toLowerCase().indexOf('webview') !== -1);
 
 if (browser.web0s) {
     browser.web0sVersion = web0sVersion(browser);

src/scripts/keyboardNavigation.js

@@ -20,6 +20,31 @@ const KeyNames = {
     38: 'ArrowUp',
     39: 'ArrowRight',
     40: 'ArrowDown',
+
+    // UWP WebView section start --
+    // Navigation Up/Down/Left/Right is part of TVJS directionalnavigation-1.0.0.0.js
+    // Unsure what this is used for. Media remote?
+    138: 'NavigationUp',
+    139: 'NavigationDown',
+    140: 'NavigationLeft',
+    141: 'NavigationRight',
+    195: 'GamepadA',
+    // Currently Xbox UWP WebView 2 sends code 27 (Escape instead) despite being undocumented
+    // Desktop UWP unchanged
+    196: 'GamepadB',
+    203: 'GamepadDPadUp',
+    204: 'GamepadDPadDown',
+    205: 'GamepadDPadLeft',
+    206: 'GamepadDPadRight',
+    // Currently Xbox UWP WebView 2 sends Arrow keycodes despite being undocumented
+    // Desktop UWP unchanged
+    // Left Thumbstick
+    211: 'GamepadLeftThumbUp',
+    212: 'GamepadLeftThumbDown',
+    214: 'GamepadLeftThumbLeft',
+    213: 'GamepadLeftThumbRight',
+    // End of UWP WebView Section
+
     // MediaRewind (Tizen/WebOS)
     412: 'MediaRewind',
     // MediaStop (Tizen/WebOS)
@@ -40,6 +65,23 @@ const KeyNames = {
     10252: 'MediaPlayPause'
 };
 
+const KeyAliases = {
+    // GamepadA needs special case handling
+    GamepadB: 'Escape',
+    NavigationUp: 'ArrowUp',
+    NavigationDown: 'ArrowDown',
+    NavigationLeft: 'ArrowLeft',
+    NavigationRight: 'ArrowRight',
+    GamepadDPadUp: 'ArrowUp',
+    GamepadDPadDown: 'ArrowDown',
+    GamepadDPadLeft: 'ArrowLeft',
+    GamepadDPadRight: 'ArrowRight',
+    GamepadLeftThumbUp: 'ArrowUp',
+    GamepadLeftThumbDown: 'ArrowDown',
+    GamepadLeftThumbLeft: 'ArrowLeft',
+    GamepadLeftThumbRight: 'ArrowRight'
+};
+
 /**
  * Keys used for keyboard navigation.
  */
@@ -81,7 +123,8 @@ if (!hasFieldKey) {
  * @return {string} Key name.
  */
 export function getKeyName(event) {
-    return KeyNames[event.keyCode] || event.key;
+    const key = KeyNames[event.keyCode] || event.key;
+    return KeyAliases[key] || key;
 }
 
 /**
@@ -166,6 +209,9 @@ export function enable() {
                 inputManager.handleCommand('down');
                 break;
 
+            case 'GamepadA':
+                inputManager.handleCommand('select');
+                break;
             case 'Back':
                 inputManager.handleCommand('back');
                 break;
@@ -230,6 +276,11 @@ export function enable() {
     });
 }
 
+export function canEnableGamepad() {
+    // Not needed for UWP
+    return !browser.edgeUwp;
+}
+
 // Gamepad initialisation. No script is required if no gamepads are present at init time, saving a bit of resources.
 // Whenever the gamepad is connected, we hand all the control of the gamepad to gamepadtokey.js by removing the event handler
 function attachGamepadScript() {
@@ -239,12 +290,13 @@ function attachGamepadScript() {
 }
 
 // No need to check for gamepads manually at load time, the eventhandler will be fired for that
-if (navigator.getGamepads && appSettings.enableGamepad()) {
+if (navigator.getGamepads && appSettings.enableGamepad() && canEnableGamepad()) {
     window.addEventListener('gamepadconnected', attachGamepadScript);
 }
 
 export default {
     enable: enable,
     getKeyName: getKeyName,
-    isNavigationKey: isNavigationKey
+    isNavigationKey,
+    canEnableGamepad
 };