Add native MKB support for Android app

src/modules/ui/global-settings.ts

@@ -55,7 +55,7 @@ const SETTINGS_UI = {
 
     [t('mouse-and-keyboard')]: {
         items: [
-            PrefKey.NATIVE_MKB_DISABLED,
+            PrefKey.NATIVE_MKB_ENABLED,
             PrefKey.MKB_ENABLED,
             PrefKey.MKB_HIDE_IDLE_CURSOR,
         ],
@@ -375,7 +375,7 @@ export function setupSettingsUi() {
     $btnReload = createButton({
         label: t('settings-reload'),
         classes: ['bx-settings-reload-button'],
-        style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
+        style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH | ButtonStyle.TALL,
         onClick: e => {
             window.location.reload();
             $btnReload.disabled = true;

src/modules/ui/guide-menu.ts

@@ -0,0 +1,80 @@
+import { BxEvent } from "@/utils/bx-event";
+import { AppInterface, STATES } from "@/utils/global";
+import { createButton, ButtonStyle } from "@/utils/html";
+import { t } from "@/utils/translation";
+
+export enum GuideMenuTab {
+    HOME,
+}
+
+export class GuideMenu {
+    static #injectHome($root: HTMLElement) {
+        // Find the last divider
+        const $dividers = $root.querySelectorAll('div[class*=Divider-module__divider]');
+        if (!$dividers) {
+            return;
+        }
+        const $lastDivider = $dividers[$dividers.length - 1];
+
+        // Add "Close app" button
+        if (AppInterface) {
+            const $btnQuit = createButton({
+                label: t('close-app'),
+                style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.DANGER,
+                onClick: e => {
+                    AppInterface.closeApp();
+                },
+            });
+
+            $lastDivider.insertAdjacentElement('afterend', $btnQuit);
+        }
+    }
+
+    static #injectHomePlaying($root: HTMLElement) {
+        const $btnQuit = $root.querySelector('a[class*=QuitGameButton]');
+        if (!$btnQuit) {
+            return;
+        }
+
+        // Add buttons
+        const $btnReload = createButton({
+            label: t('reload-stream'),
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                confirm(t('confirm-reload-stream')) && window.location.reload();
+            },
+        });
+
+        const $btnHome = createButton({
+            label: t('back-to-home'),
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
+            },
+        });
+
+        $btnQuit.insertAdjacentElement('afterend', $btnReload);
+        $btnReload.insertAdjacentElement('afterend', $btnHome);
+
+        // Hide xCloud's Home button
+        const $btnXcloudHome = $root.querySelector('div[class^=HomeButtonWithDivider]') as HTMLElement;
+        $btnXcloudHome && ($btnXcloudHome.style.display = 'none');
+    }
+
+    static async #onShown(e: Event) {
+        const where = (e as any).where as GuideMenuTab;
+
+        if (where === GuideMenuTab.HOME) {
+            const $root = document.querySelector('#gamepass-dialog-root div[role=dialog]') as HTMLElement;
+            if (STATES.isPlaying) {
+                GuideMenu.#injectHomePlaying($root);
+            } else {
+                GuideMenu.#injectHome($root);
+            }
+        }
+    }
+
+    static observe() {
+        window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, GuideMenu.#onShown);
+    }
+}

src/modules/ui/ui.ts

@@ -1,4 +1,4 @@
-import { STATES } from "@utils/global";
+import { AppInterface, STATES } from "@utils/global";
 import { CE, createButton, ButtonStyle, createSvgIcon } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 import { UserAgent } from "@utils/user-agent";
@@ -12,6 +12,7 @@ import { VibrationManager } from "@modules/vibration-manager";
 import { Screenshot } from "@/utils/screenshot";
 import { ControllerShortcut } from "../controller-shortcut";
 import { SoundShortcut } from "../shortcuts/shortcut-sound";
+import { NativeMkbHandler } from "../mkb/native-mkb-handler";
 
 
 export function localRedirect(path: string) {
@@ -72,19 +73,6 @@ function setupStreamSettingsDialog() {
     const isSafari = UserAgent.isSafari();
 
     const SETTINGS_UI = [
-        getPref(PrefKey.MKB_ENABLED) && {
-            icon: BxIcon.MOUSE,
-            group: 'mkb',
-            items: [
-                {
-                    group: 'mkb',
-                    label: t('mouse-and-keyboard'),
-                    help_url: 'https://better-xcloud.github.io/mouse-and-keyboard/',
-                    content: MkbRemapper.INSTANCE.render(),
-                },
-            ],
-        },
-
         {
             icon: BxIcon.DISPLAY,
             group: 'stream',
@@ -241,6 +229,44 @@ function setupStreamSettingsDialog() {
             ],
         },
 
+        getPref(PrefKey.MKB_ENABLED) && {
+            icon: BxIcon.VIRTUAL_CONTROLLER,
+            group: 'mkb',
+            items: [
+                {
+                    group: 'mkb',
+                    label: t('virtual-controller'),
+                    help_url: 'https://better-xcloud.github.io/mouse-and-keyboard/',
+                    content: MkbRemapper.INSTANCE.render(),
+                },
+            ],
+        },
+
+        AppInterface && getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' && {
+            icon: BxIcon.NATIVE_MKB,
+            group: 'native-mkb',
+            items: [
+                {
+                    group: 'native-mkb',
+                    label: t('native-mkb'),
+                    items: [
+                        {
+                            pref: PrefKey.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY,
+                            onChange: (e: any, value: number) => {
+                                NativeMkbHandler.getInstance().setVerticalScrollMultiplier(value / 100);
+                            },
+                        },
+                        {
+                            pref: PrefKey.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY,
+                            onChange: (e: any, value: number) => {
+                                NativeMkbHandler.getInstance().setHorizontalScrollMultiplier(value / 100);
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+
         {
             icon: BxIcon.COMMAND,
             group: 'shortcuts',