Bump version to 4.6.2

Update better-xcloud.user.js
Add a Disable button in the MKB dialog
2025-06-29 02:41:44 +02:00 · 2024-05-30 17:24:50 +07:00 · 2024-05-30 17:22:19 +07:00 · 2024-05-30 17:22:06 +07:00 · 2024-05-30 16:46:56 +07:00 · 2024-05-30 16:46:48 +07:00
48 changed files with 4419 additions and 8740 deletions
--- a/.github/ISSUE_TEMPLATE/01-bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/01-bug-report.yml
@ -4,13 +4,19 @@ title: "[Bug] "
 labels:
  - bug
 body:
-  - type: markdown
+  - type: checkboxes
+    id: checklist
    attributes:
-      value: |
-        Please fill out the following information to help us resolve the issue.
-        > [!warning]
-        > - Only use English. Any other languages will be deleted.  
-        > - Search first before making a report.  
+      label: Checklist
+      options:
+        - label: I will only use English in my report.
+          required: true
+        - label: "The bug doesn't happen when I disable Better xCloud script."
+          required: true
+        - label: I have used the search function for [**open and closed issues**](https://github.com/redphx/better-xcloud/issues?q=is%3Aissue) to see if someone else has already submitted the same bug report.
+          required: true
+        - label: I will describe the problem with as much detail as possible.
+          required: true
  - type: dropdown
    id: device_type
    attributes:
@ -25,40 +31,28 @@ body:
      multiple: false
    validations:
      required: true
-  - type: dropdown
+  - type: input
+    id: device_name
+    attributes:
+      label: "Device"
+      description: "Name of the device"
+      placeholder: "e.g., Google Pixel 8"
+    validations:
+      required: true
+  - type: input
    id: os
    attributes:
      label: "Operating System"
      description: "Which operating system is it running?"
-      options:
-        - Windows
-        - macOS
-        - Linux
-        - Android
-        - iOS/iPadOS
-        - Other
-      multiple: false
-    validations:
-      required: true
-  - type: dropdown
-    id: browser
-    attributes:
-      label: "Browser"
-      description: "Which browser are you using?"
-      options:
-        - Chrome/Edge/Chromium
-        - Kiwi Browser
-        - Safari
-        - Other
-      multiple: false
+      placeholder: "e.g., Android 14"
    validations:
      required: true
  - type: input
    id: browser_version
    attributes:
      label: "Browser Version"
-      description: "What is the version of the browser?"
-      placeholder: "e.g., 122.0"
+      description: "What is the name and version of the browser?"
+      placeholder: "e.g., Chrome 124.0"
    validations:
      required: true
  - type: input
@ -69,12 +63,20 @@ body:
      placeholder: "e.g., 3.5.0"
    validations:
      required: true
+  - type: input
+    id: game_list
+    attributes:
+      label: "Game list"
+      description: "Name the game(s) where you saw this bug"
+      placeholder: "e.g., Halo"
+    validations:
+      required: false
  - type: textarea
-    id: repro
+    id: reproduction
    attributes:
      label: "Reproduction Steps"
      description: |
-        How did you trigger this bug? Please provide screenshot/video if possible.
+        How did you trigger this bug?
      placeholder: |
        Example:
        1. Open game X
@ -82,3 +84,11 @@ body:
        3. Error
    validations:
      required: true
+  - type: textarea
+    id: media
+    attributes:
+      label: "Screenshot/video"
+      description: |
+        Please provide screenshot/video if possible.
+    validations:
+      required: false
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -0,0 +1 @@
+blank_issues_enabled: false
--- a/dist/better-xcloud.meta.js
+++ b/dist/better-xcloud.meta.js
@ -1,5 +1,5 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      4.3.0
+// @version      4.6.2
 // ==/UserScript==
--- a/dist/better-xcloud.user.js
+++ b/dist/better-xcloud.user.js
--- a/src/assets/css/button.styl
+++ b/src/assets/css/button.styl
@ -74,7 +74,7 @@
        height: var(--bx-button-height);
        line-height: var(--bx-button-height);
        vertical-align: middle;
-        vertical-align: -webkit-baseline-middle;
+        /* vertical-align: -webkit-baseline-middle; */
        color: #fff;
        overflow: hidden;
        white-space: nowrap;
--- a/src/assets/css/mkb.styl
+++ b/src/assets/css/mkb.styl
@ -16,7 +16,6 @@
 }

 .bx-mkb-pointer-lock-msg {
-    display: flex;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
@ -25,7 +24,7 @@
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: auto;
-    background: #000000e5;
+    background: #000000b3;
    z-index: var(--bx-mkb-pointer-lock-msg-z-index);
    color: #fff;
    text-align: center;
@ -41,16 +40,7 @@
        background: #151515;
    }

-    button {
-        margin-right: 12px;
-        height: 60px;
-    }
-
-    svg {
-        width: 32px;
-    }
-
-    div {
+    > div:first-of-type {
        display: flex;
        flex-direction: column;
        text-align: left;
@ -69,6 +59,26 @@
            font-style: italic;
        }
    }
+
+    > div:last-of-type {
+        display: flex;
+        flex-flow: row;
+        margin-top: 10px;
+
+        button {
+            flex: 1;
+
+            &:first-of-type {
+                margin-right: 5px;
+            }
+
+            &:last-of-type {
+                margin-left: 5px;
+            }
+        }
+
+        button
+    }
 }

 .bx-mkb-preset-tools {
--- a/src/assets/css/root.styl
+++ b/src/assets/css/root.styl
@ -87,6 +87,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
    padding: 0 !important;
 }

+.bx-prompt {
+    font-family: var(--bx-promptfont-font);
+}
+
 /* Hide UI elements */
 #headerArea, #uhfSkipToMain, .uhf-footer {
    display: none;
--- a/src/assets/css/stream-settings.styl
+++ b/src/assets/css/stream-settings.styl
@ -1,4 +1,4 @@
-.bx-quick-settings-bar {
+.bx-stream-settings-dialog {
    display: flex;
    position: fixed;
    z-index: var(--bx-stream-settings-z-index);
@ -7,7 +7,7 @@
    -webkit-user-select: none;
 }

-.bx-quick-settings-tabs {
+.bx-stream-settings-tabs {
    position: fixed;
    top: 0;
    right: 420px;
@ -39,7 +39,7 @@
 }


-.bx-quick-settings-tab-contents {
+.bx-stream-settings-tab-contents {
    flex-direction: column;
    position: fixed;
    right: 0;
@ -89,7 +89,7 @@
 }


-.bx-quick-settings-row {
+.bx-stream-settings-row {
    display: flex;
    border-bottom: 1px solid #40404080;
    margin-bottom: 16px;
@ -116,11 +116,74 @@
    }
 }

-.bx-quick-settings-bar-note {
+.bx-stream-settings-dialog-note {
    display: block;
-    text-align: center;
    font-size: 12px;
    font-weight: lighter;
    font-style: italic;
-    padding-top: 16px;
+}
+
+.bx-stream-settings-tab-contents {
+    div[data-group="shortcuts"] {
+        > div {
+            &[data-has-gamepad=true] {
+                > div:first-of-type {
+                    display: none;
+                }
+
+                > div:last-of-type {
+                    display: block;
+                }
+            }
+
+            &[data-has-gamepad=false] {
+                > div:first-of-type {
+                    display: block;
+                }
+
+                > div:last-of-type {
+                    display: none;
+                }
+            }
+        }
+
+        .bx-shortcut-profile {
+            width: 100%;
+            height: 36px;
+            display: block;
+            margin-bottom: 10px;
+        }
+
+        .bx-shortcut-note {
+            font-size: 14px;
+        }
+
+        .bx-shortcut-row {
+            display: flex;
+            margin-bottom: 10px;
+
+            label.bx-prompt {
+                flex: 1;
+                font-size: 26px;
+                margin-bottom: 0;
+            }
+
+            .bx-shortcut-actions {
+                flex: 2;
+                position: relative;
+
+                select {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+
+                    &:last-of-type {
+                        opacity: 0;
+                        z-index: calc(var(--bx-stream-settings-z-index) + 1);
+                    }
+                }
+            }
+        }
+    }
 }
--- a/src/assets/svg/command.svg
+++ b/src/assets/svg/command.svg
@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d="M25.425 1.5c2.784 0 5.075 2.291 5.075 5.075s-2.291 5.075-5.075 5.075H20.35V6.575c0-2.784 2.291-5.075 5.075-5.075zM11.65 11.65H6.575C3.791 11.65 1.5 9.359 1.5 6.575S3.791 1.5 6.575 1.5s5.075 2.291 5.075 5.075v5.075zm8.7 8.7h5.075c2.784 0 5.075 2.291 5.075 5.075S28.209 30.5 25.425 30.5s-5.075-2.291-5.075-5.075V20.35zM6.575 30.5c-2.784 0-5.075-2.291-5.075-5.075s2.291-5.075 5.075-5.075h5.075v5.075c0 2.784-2.291 5.075-5.075 5.075z"/>
+    <path d="M11.65 11.65h8.7v8.7h-8.7z"/>
+</svg>
--- a/src/index.ts
+++ b/src/index.ts
@ -24,7 +24,7 @@ import { onHistoryChanged, patchHistoryMethod } from "@utils/history";
 import { VibrationManager } from "@modules/vibration-manager";
 import { overridePreloadState } from "@utils/preload-state";
 import { patchAudioContext, patchCanvasContext, patchMeControl, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
-import { STATES } from "@utils/global";
+import { AppInterface, STATES } from "@utils/global";
 import { injectStreamMenuButtons } from "@modules/stream/stream-ui";
 import { BxLogger } from "@utils/bx-logger";
 import { GameBar } from "./modules/game-bar/game-bar";
@ -178,9 +178,9 @@ window.addEventListener(BxEvent.STREAM_STOPPED, e => {
    // Stop MKB listeners
    getPref(PrefKey.MKB_ENABLED) && MkbHandler.INSTANCE.destroy();

-    const $quickBar = document.querySelector('.bx-quick-settings-bar');
-    if ($quickBar) {
-        $quickBar.classList.add('bx-gone');
+    const $streamSettingsDialog = document.querySelector('.bx-stream-settings-dialog');
+    if ($streamSettingsDialog) {
+        $streamSettingsDialog.classList.add('bx-gone');
    }

    STATES.currentStream.audioGainNode = null;
@ -192,8 +192,52 @@ window.addEventListener(BxEvent.STREAM_STOPPED, e => {
    GameBar.getInstance().disable();
 });

+window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
+    Screenshot.takeScreenshot();
+});
+
+
+function observeRootDialog($root: HTMLElement) {
+    let currentShown = false;
+
+    const observer = new MutationObserver(mutationList => {
+        for (const mutation of mutationList) {
+            if (mutation.type !== 'childList') {
+                continue;
+            }
+
+            const shown = ($root.firstElementChild && $root.firstElementChild.childElementCount > 0) || false;
+            if (shown !== currentShown) {
+                currentShown = shown;
+                BxEvent.dispatch(window, shown ? BxEvent.XCLOUD_DIALOG_SHOWN : BxEvent.XCLOUD_DIALOG_DISMISSED);
+            }
+        }
+    });
+    observer.observe($root, {subtree: true, childList: true});
+}
+
+function waitForRootDialog() {
+    const observer = new MutationObserver(mutationList => {
+        for (const mutation of mutationList) {
+            if (mutation.type !== 'childList') {
+                continue;
+            }
+
+            const $target = mutation.target as HTMLElement;
+            if ($target.id && $target.id === 'gamepass-dialog-root') {
+                observer.disconnect();
+                observeRootDialog($target);
+                break;
+            }
+        };
+    });
+    observer.observe(document.documentElement, {subtree: true, childList: true});
+}
+

 function main() {
+    waitForRootDialog();
+
    // Monkey patches
    patchRtcPeerConnection();
    patchRtcCodecs();
@ -238,6 +282,9 @@ function main() {
    if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
        TouchController.setup();
    }
+
+    // Start PointerProviderServer
+    (getPref(PrefKey.MKB_ENABLED)) && AppInterface && AppInterface.startPointerServer();
 }

 main();
--- a/src/modules/controller-shortcut.ts
+++ b/src/modules/controller-shortcut.ts
@ -0,0 +1,369 @@
+import { Screenshot } from "@utils/screenshot";
+import { GamepadKey } from "./mkb/definitions";
+import { PrompFont } from "@utils/prompt-font";
+import { CE } from "@utils/html";
+import { t } from "@utils/translation";
+import { MkbHandler } from "./mkb/mkb-handler";
+import { StreamStats } from "./stream/stream-stats";
+import { MicrophoneShortcut } from "./shortcuts/shortcut-microphone";
+import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui";
+import { PrefKey, getPref } from "@utils/preferences";
+import { SoundShortcut } from "./shortcuts/shortcut-sound";
+import { BxEvent } from "@/utils/bx-event";
+import { AppInterface } from "@/utils/global";
+
+enum ShortcutAction {
+    STREAM_SCREENSHOT_CAPTURE = 'stream-screenshot-capture',
+
+    STREAM_MENU_SHOW = 'stream-menu-show',
+    STREAM_STATS_TOGGLE = 'stream-stats-toggle',
+    STREAM_SOUND_TOGGLE = 'stream-sound-toggle',
+    STREAM_MICROPHONE_TOGGLE = 'stream-microphone-toggle',
+
+    STREAM_VOLUME_INC = 'stream-volume-inc',
+    STREAM_VOLUME_DEC = 'stream-volume-dec',
+
+    DEVICE_SOUND_TOGGLE = 'device-sound-toggle',
+    DEVICE_VOLUME_INC = 'device-volume-inc',
+    DEVICE_VOLUME_DEC = 'device-volume-dec',
+
+    DEVICE_BRIGHTNESS_INC = 'device-brightness-inc',
+    DEVICE_BRIGHTNESS_DEC = 'device-brightness-dec',
+}
+
+export class ControllerShortcut {
+    static readonly #STORAGE_KEY = 'better_xcloud_controller_shortcuts';
+
+    static #buttonsCache: {[key: string]: boolean[]} = {};
+    static #buttonsStatus: {[key: string]: boolean[]} = {};
+
+    static #$selectProfile: HTMLSelectElement;
+    static #$selectActions: Partial<{[key in GamepadKey]: HTMLSelectElement}> = {};
+    static #$container: HTMLElement;
+
+    static #ACTIONS: {[key: string]: (ShortcutAction | null)[]} = {};
+
+    static reset(index: number) {
+        ControllerShortcut.#buttonsCache[index] = [];
+        ControllerShortcut.#buttonsStatus[index] = [];
+    }
+
+    static handle(gamepad: Gamepad): boolean {
+        const gamepadIndex = gamepad.index;
+        const actions = ControllerShortcut.#ACTIONS[gamepad.id];
+        if (!actions) {
+            return false;
+        }
+
+        // Move the buttons status from the previous frame to the cache
+        ControllerShortcut.#buttonsCache[gamepadIndex] = ControllerShortcut.#buttonsStatus[gamepadIndex].slice(0);
+        // Clear the buttons status
+        ControllerShortcut.#buttonsStatus[gamepadIndex] = [];
+
+        const pressed: boolean[] = [];
+        let otherButtonPressed = false;
+
+        gamepad.buttons.forEach((button, index) => {
+            // Only add the newly pressed button to the array (holding doesn't count)
+            if (button.pressed && index !== GamepadKey.HOME) {
+                otherButtonPressed = true;
+                pressed[index] = true;
+
+                // If this is newly pressed button -> run action
+                if (actions[index] && !ControllerShortcut.#buttonsCache[gamepadIndex][index]) {
+                    setTimeout(() => ControllerShortcut.#runAction(actions[index]!), 0);
+                }
+            }
+        });
+
+        ControllerShortcut.#buttonsStatus[gamepadIndex] = pressed;
+        return otherButtonPressed;
+    }
+
+    static #runAction(action: ShortcutAction) {
+        switch (action) {
+            case ShortcutAction.STREAM_SCREENSHOT_CAPTURE:
+                Screenshot.takeScreenshot();
+                break;
+
+            case ShortcutAction.STREAM_STATS_TOGGLE:
+                StreamStats.toggle();
+                break;
+
+            case ShortcutAction.STREAM_MICROPHONE_TOGGLE:
+                MicrophoneShortcut.toggle();
+                break;
+
+            case ShortcutAction.STREAM_MENU_SHOW:
+                StreamUiShortcut.showHideStreamMenu();
+                break;
+
+            case ShortcutAction.STREAM_SOUND_TOGGLE:
+                SoundShortcut.muteUnmute();
+                break;
+
+            case ShortcutAction.STREAM_VOLUME_INC:
+                SoundShortcut.adjustGainNodeVolume(10);
+                break;
+
+            case ShortcutAction.STREAM_VOLUME_DEC:
+                SoundShortcut.adjustGainNodeVolume(-10);
+                break;
+
+            case ShortcutAction.DEVICE_BRIGHTNESS_INC:
+            case ShortcutAction.DEVICE_BRIGHTNESS_DEC:
+            case ShortcutAction.DEVICE_SOUND_TOGGLE:
+            case ShortcutAction.DEVICE_VOLUME_INC:
+            case ShortcutAction.DEVICE_VOLUME_DEC:
+                AppInterface && AppInterface.runShortcut && AppInterface.runShortcut(action);
+                break;
+        }
+    }
+
+    static #updateAction(profile: string, button: GamepadKey, action: ShortcutAction | null) {
+        if (!(profile in ControllerShortcut.#ACTIONS)) {
+            ControllerShortcut.#ACTIONS[profile] = [];
+        }
+
+        if (!action) {
+            action = null;
+        }
+
+        ControllerShortcut.#ACTIONS[profile][button] = action;
+
+        // Remove empty profiles
+        for (const key in ControllerShortcut.#ACTIONS) {
+            let empty = true;
+            for (const value of ControllerShortcut.#ACTIONS[key]) {
+                if (!!value) {
+                    empty = false;
+                    break;
+                }
+            }
+
+            if (empty) {
+                delete ControllerShortcut.#ACTIONS[key];
+            }
+        }
+
+        // Save to storage
+        window.localStorage.setItem(ControllerShortcut.#STORAGE_KEY, JSON.stringify(ControllerShortcut.#ACTIONS));
+
+        console.log(ControllerShortcut.#ACTIONS);
+    }
+
+    static #updateProfileList(e?: GamepadEvent) {
+        const $select = ControllerShortcut.#$selectProfile;
+        const $container = ControllerShortcut.#$container;
+
+        const $fragment = document.createDocumentFragment();
+
+        // Remove old profiles
+        while ($select.firstElementChild) {
+            $select.firstElementChild.remove();
+        }
+
+        const gamepads = navigator.getGamepads();
+        let hasGamepad = false;
+
+        for (const gamepad of gamepads) {
+            if (!gamepad || !gamepad.connected) {
+                continue;
+            }
+
+            // Ignore emulated gamepad
+            if (gamepad.id === MkbHandler.VIRTUAL_GAMEPAD_ID) {
+                continue;
+            }
+
+            hasGamepad = true;
+
+            const $option = CE<HTMLOptionElement>('option', {value: gamepad.id}, gamepad.id);
+            $fragment.appendChild($option);
+        }
+
+        if (hasGamepad) {
+            $select.appendChild($fragment);
+
+            $select.selectedIndex = 0;
+            $select.dispatchEvent(new Event('change'));
+        }
+
+        $container.dataset.hasGamepad = hasGamepad.toString();
+    }
+
+    static #switchProfile(profile: string) {
+        let actions = ControllerShortcut.#ACTIONS[profile];
+        if (!actions) {
+            actions = [];
+        }
+
+        // Reset selects' values
+        let button: any;
+        for (button in ControllerShortcut.#$selectActions) {
+            const $select = ControllerShortcut.#$selectActions[button as GamepadKey]!;
+            $select.value = actions[button] || '';
+
+            BxEvent.dispatch($select, 'change', {
+                    ignoreOnChange: true,
+                });
+        }
+    }
+
+    static renderSettings() {
+        // Read actions from localStorage
+        ControllerShortcut.#ACTIONS = JSON.parse(window.localStorage.getItem(ControllerShortcut.#STORAGE_KEY) || '{}');
+
+        const buttons: Map<GamepadKey, PrompFont> = new Map();
+        buttons.set(GamepadKey.Y, PrompFont.Y);
+        buttons.set(GamepadKey.A, PrompFont.A);
+        buttons.set(GamepadKey.B, PrompFont.B);
+        buttons.set(GamepadKey.X, PrompFont.X);
+
+        buttons.set(GamepadKey.UP, PrompFont.UP);
+        buttons.set(GamepadKey.DOWN, PrompFont.DOWN);
+        buttons.set(GamepadKey.LEFT, PrompFont.LEFT);
+        buttons.set(GamepadKey.RIGHT, PrompFont.RIGHT);
+
+        buttons.set(GamepadKey.SELECT, PrompFont.SELECT);
+        buttons.set(GamepadKey.START, PrompFont.START);
+
+        buttons.set(GamepadKey.LB, PrompFont.LB);
+        buttons.set(GamepadKey.RB, PrompFont.RB);
+
+        buttons.set(GamepadKey.LT, PrompFont.LT);
+        buttons.set(GamepadKey.RT, PrompFont.RT);
+
+        buttons.set(GamepadKey.L3, PrompFont.L3);
+        buttons.set(GamepadKey.R3, PrompFont.R3);
+
+        const actions: {[key: string]: Partial<{[key in ShortcutAction]: string | string[]}>} = {
+            [t('device')]: AppInterface && {
+                [ShortcutAction.DEVICE_SOUND_TOGGLE]: [t('sound'), t('toggle')],
+                [ShortcutAction.DEVICE_VOLUME_INC]: [t('volume'), t('increase')],
+                [ShortcutAction.DEVICE_VOLUME_DEC]: [t('volume'), t('decrease')],
+
+                [ShortcutAction.DEVICE_BRIGHTNESS_INC]: [t('brightness'), t('increase')],
+                [ShortcutAction.DEVICE_BRIGHTNESS_DEC]: [t('brightness'), t('decrease')],
+            },
+
+            [t('stream')]: {
+                [ShortcutAction.STREAM_SCREENSHOT_CAPTURE]: t('take-screenshot'),
+
+                [ShortcutAction.STREAM_SOUND_TOGGLE]: [t('sound'), t('toggle')],
+                [ShortcutAction.STREAM_VOLUME_INC]: getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && [t('volume'), t('increase')],
+                [ShortcutAction.STREAM_VOLUME_DEC]: getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && [t('volume'), t('decrease')],
+
+                [ShortcutAction.STREAM_MENU_SHOW]: [t('menu'), t('show')],
+                [ShortcutAction.STREAM_STATS_TOGGLE]: [t('stats'), t('show-hide')],
+                [ShortcutAction.STREAM_MICROPHONE_TOGGLE]: [t('microphone'), t('toggle')],
+            }
+        };
+
+        const $baseSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'}, CE('option', {value: ''}, '---'));
+        for (const groupLabel in actions) {
+            const items = actions[groupLabel];
+            if (!items) {
+                continue;
+            }
+
+            const $optGroup = CE<HTMLOptGroupElement>('optgroup', {'label': groupLabel});
+
+            for (const action in items) {
+                let label = items[action as keyof typeof items];
+                if (!label) {
+                    continue;
+                }
+
+                if (Array.isArray(label)) {
+                    label = label.join(' ❯ ');
+                }
+
+                const $option = CE<HTMLOptionElement>('option', {value: action}, label);
+                $optGroup.appendChild($option);
+            }
+
+            $baseSelect.appendChild($optGroup);
+        }
+
+        let $remap: HTMLElement;
+        let $selectProfile: HTMLSelectElement;
+
+        const $container = CE('div', {'data-has-gamepad': 'false'},
+            CE('div', {},
+                CE('p', {'class': 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')),
+            ),
+
+            $remap = CE('div', {},
+                $selectProfile = CE('select', {'class': 'bx-shortcut-profile', autocomplete: 'off'}),
+                CE('p', {'class': 'bx-shortcut-note'},
+                    CE('span', {'class': 'bx-prompt'}, PrompFont.HOME),
+                    ': ' + t('controller-shortcuts-xbox-note'),
+                ),
+            ),
+        );
+
+        $selectProfile.addEventListener('change', e => {
+            ControllerShortcut.#switchProfile($selectProfile.value);
+        });
+
+        const onActionChanged = (e: Event) => {
+            const $target = e.target as HTMLSelectElement;
+
+            const profile = $selectProfile.value;
+            const button: unknown = $target.dataset.button;
+            const action = $target.value as ShortcutAction;
+
+            const $fakeSelect = $target.previousElementSibling! as HTMLSelectElement;
+            let fakeText = '---';
+            if (action) {
+                const $selectedOption =  $target.options[$target.selectedIndex];
+                const $optGroup = $selectedOption.parentElement as HTMLOptGroupElement;
+                fakeText = $optGroup.label + ' ❯ ' + $selectedOption.text;
+            }
+            ($fakeSelect.firstElementChild as HTMLOptionElement).text = fakeText;
+
+            !(e as any).ignoreOnChange && ControllerShortcut.#updateAction(profile, button as GamepadKey, action);
+        };
+
+        // @ts-ignore
+        for (const [button, prompt] of buttons) {
+            const $row = CE('div', {'class': 'bx-shortcut-row'});
+
+            const $label = CE('label', {'class': 'bx-prompt'}, `${PrompFont.HOME} + ${prompt}`);
+
+            const $div = CE('div', {'class': 'bx-shortcut-actions'});
+
+            const $fakeSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'},
+                CE('option', {}, '---'),
+            );
+            $div.appendChild($fakeSelect);
+
+            const $select = $baseSelect.cloneNode(true) as HTMLSelectElement;
+            $select.dataset.button = button.toString();
+            $select.addEventListener('change', onActionChanged);
+
+            ControllerShortcut.#$selectActions[button] = $select;
+
+            $div.appendChild($select);
+
+            $row.appendChild($label);
+            $row.appendChild($div);
+
+            $remap.appendChild($row);
+        }
+
+        $container.appendChild($remap);
+
+        ControllerShortcut.#$selectProfile = $selectProfile;
+        ControllerShortcut.#$container = $container;
+
+        // Detect when gamepad connected/disconnect
+        window.addEventListener('gamepadconnected', ControllerShortcut.#updateProfileList);
+        window.addEventListener('gamepaddisconnected', ControllerShortcut.#updateProfileList);
+
+        ControllerShortcut.#updateProfileList();
+
+        return $container;
+    }
+}
--- a/src/modules/game-bar/action-microphone.ts
+++ b/src/modules/game-bar/action-microphone.ts
@ -3,14 +3,8 @@ import { BxIcon } from "@utils/bx-icon";
 import { createButton, ButtonStyle, CE } from "@utils/html";
 import { t } from "@utils/translation";
 import { BaseGameBarAction } from "./action-base";
+import { MicrophoneShortcut, MicrophoneState } from "../shortcuts/shortcut-microphone";

-enum MicrophoneState {
-    REQUESTED = 'Requested',
-    ENABLED = 'Enabled',
-    MUTED = 'Muted',
-    NOT_ALLOWED = 'NotAllowed',
-    NOT_FOUND = 'NotFound',
-}

 export class MicrophoneAction extends BaseGameBarAction {
    $content: HTMLElement;
@ -22,15 +16,9 @@ export class MicrophoneAction extends BaseGameBarAction {

        const onClick = (e: Event) => {
                BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-                const state = this.$content.getAttribute('data-enabled');
-                const enableMic = state === 'true' ? false : true;

-                try {
-                    window.BX_EXPOSED.streamSession.tryEnableChatAsync(enableMic);
-                    this.$content.setAttribute('data-enabled', enableMic.toString());
-                } catch (e) {
-                    console.log(e);
-                }
+                const enabled = MicrophoneShortcut.toggle(false);
+                this.$content.setAttribute('data-enabled', enabled.toString());
            };

        const $btnDefault = createButton({
--- a/src/modules/game-bar/game-bar.ts
+++ b/src/modules/game-bar/game-bar.ts
@ -82,6 +82,18 @@ export class GameBar {
        document.documentElement.appendChild($gameBar);
        this.$gameBar = $gameBar;
        this.$container = $container;
+
+        // Enable/disable Game Bar when playing/pausing
+        getPref(PrefKey.GAME_BAR_POSITION) !== 'off' && window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, ((e: Event) => {
+            if (!STATES.isPlaying) {
+                this.disable();
+                return;
+            }
+
+            // Toggle Game bar
+            const mode = (e as any).mode;
+            mode !== 'None' ? this.disable() : this.enable();
+        }).bind(this));
    }

    private beginHideTimeout() {
--- a/src/modules/loading-screen.ts
+++ b/src/modules/loading-screen.ts
@ -46,6 +46,10 @@ export class LoadingScreen {
 #game-stream div[class*=RocketAnimation-module__container] > svg {
    display: none;
 }
+
+#game-stream video[class*=RocketAnimationVideo-module__video] {
+    display: none;
+}
 `;
        $bgStyle.textContent += css;
    }
@ -163,9 +167,9 @@ export class LoadingScreen {
    }

    static reset() {
-        LoadingScreen.#$waitTimeBox && LoadingScreen.#$waitTimeBox.classList.add('bx-gone');
-        LoadingScreen.#$bgStyle && (LoadingScreen.#$bgStyle.textContent = '');
+        LoadingScreen.#$bgStyle && setTimeout(() => LoadingScreen.#$bgStyle.textContent = '', 2000);

+        LoadingScreen.#$waitTimeBox && LoadingScreen.#$waitTimeBox.classList.add('bx-gone');
        LoadingScreen.#waitTimeInterval && clearInterval(LoadingScreen.#waitTimeInterval);
        LoadingScreen.#waitTimeInterval = null;
    }
--- a/src/modules/mkb/definitions.ts
+++ b/src/modules/mkb/definitions.ts
@ -1,4 +1,5 @@
 import type { GamepadKeyNameType } from "@/types/mkb";
+import { PrompFont } from "@/utils/prompt-font";

 export enum GamepadKey {
    A = 0,
@ -18,6 +19,7 @@ export enum GamepadKey {
    LEFT = 14,
    RIGHT = 15,
    HOME = 16,
+    SHARE = 17,

    LS_UP = 100,
    LS_DOWN = 101,
@ -32,36 +34,36 @@ export enum GamepadKey {


 export const GamepadKeyName: GamepadKeyNameType = {
-    [GamepadKey.A]: ['A', '⇓'],
-    [GamepadKey.B]: ['B', '⇒'],
-    [GamepadKey.X]: ['X', '⇐'],
-    [GamepadKey.Y]: ['Y', '⇑'],
+    [GamepadKey.A]: ['A', PrompFont.A],
+    [GamepadKey.B]: ['B', PrompFont.B],
+    [GamepadKey.X]: ['X', PrompFont.X],
+    [GamepadKey.Y]: ['Y', PrompFont.Y],

-    [GamepadKey.LB]: ['LB', '↘'],
-    [GamepadKey.RB]: ['RB', '↙'],
-    [GamepadKey.LT]: ['LT', '↖'],
-    [GamepadKey.RT]: ['RT', '↗'],
+    [GamepadKey.LB]: ['LB', PrompFont.LB],
+    [GamepadKey.RB]: ['RB', PrompFont.RB],
+    [GamepadKey.LT]: ['LT', PrompFont.LT],
+    [GamepadKey.RT]: ['RT', PrompFont.RT],

-    [GamepadKey.SELECT]: ['Select', '⇺'],
-    [GamepadKey.START]: ['Start', '⇻'],
-    [GamepadKey.HOME]: ['Home', ''],
+    [GamepadKey.SELECT]: ['Select', PrompFont.SELECT],
+    [GamepadKey.START]: ['Start', PrompFont.START],
+    [GamepadKey.HOME]: ['Home', PrompFont.HOME],

-    [GamepadKey.UP]: ['D-Pad Up', '≻'],
-    [GamepadKey.DOWN]: ['D-Pad Down', '≽'],
-    [GamepadKey.LEFT]: ['D-Pad Left', '≺'],
-    [GamepadKey.RIGHT]: ['D-Pad Right', '≼'],
+    [GamepadKey.UP]: ['D-Pad Up', PrompFont.UP],
+    [GamepadKey.DOWN]: ['D-Pad Down', PrompFont.DOWN],
+    [GamepadKey.LEFT]: ['D-Pad Left', PrompFont.LEFT],
+    [GamepadKey.RIGHT]: ['D-Pad Right', PrompFont.RIGHT],

-    [GamepadKey.L3]: ['L3', '↺'],
-    [GamepadKey.LS_UP]: ['Left Stick Up', '↾'],
-    [GamepadKey.LS_DOWN]: ['Left Stick Down', '⇂'],
-    [GamepadKey.LS_LEFT]: ['Left Stick Left', '↼'],
-    [GamepadKey.LS_RIGHT]: ['Left Stick Right', '⇀'],
+    [GamepadKey.L3]: ['L3', PrompFont.L3],
+    [GamepadKey.LS_UP]: ['Left Stick Up', PrompFont.LS_UP],
+    [GamepadKey.LS_DOWN]: ['Left Stick Down', PrompFont.LS_DOWN],
+    [GamepadKey.LS_LEFT]: ['Left Stick Left', PrompFont.LS_LEFT],
+    [GamepadKey.LS_RIGHT]: ['Left Stick Right', PrompFont.LS_RIGHT],

-    [GamepadKey.R3]: ['R3', '↻'],
-    [GamepadKey.RS_UP]: ['Right Stick Up', '↿'],
-    [GamepadKey.RS_DOWN]: ['Right Stick Down', '⇃'],
-    [GamepadKey.RS_LEFT]: ['Right Stick Left', '↽'],
-    [GamepadKey.RS_RIGHT]: ['Right Stick Right', '⇁'],
+    [GamepadKey.R3]: ['R3', PrompFont.R3],
+    [GamepadKey.RS_UP]: ['Right Stick Up', PrompFont.RS_UP],
+    [GamepadKey.RS_DOWN]: ['Right Stick Down', PrompFont.RS_DOWN],
+    [GamepadKey.RS_LEFT]: ['Right Stick Left', PrompFont.RS_LEFT],
+    [GamepadKey.RS_RIGHT]: ['Right Stick Right', PrompFont.RS_RIGHT],
 };


@ -97,7 +99,4 @@ export enum MkbPresetKey {
    MOUSE_SENSITIVITY_Y = 'sensitivity_y',

    MOUSE_DEADZONE_COUNTERWEIGHT = 'deadzone_counterweight',
-
-    MOUSE_STICK_DECAY_STRENGTH = 'stick_decay_strength',
-    MOUSE_STICK_DECAY_MIN = 'stick_decay_min',
 }
--- a/src/modules/mkb/key-helper.ts
+++ b/src/modules/mkb/key-helper.ts
@ -20,7 +20,7 @@ export class KeyHelper {
        let name;

        if (e instanceof KeyboardEvent) {
-            code = e.code;
+            code = e.code || e.key;
        } else if (e instanceof WheelEvent) {
            if (e.deltaY < 0) {
                code = WheelCode.SCROLL_UP;
@ -28,7 +28,7 @@ export class KeyHelper {
                code = WheelCode.SCROLL_DOWN;
            } else if (e.deltaX < 0) {
                code = WheelCode.SCROLL_LEFT;
-            } else {
+            } else if (e.deltaX > 0) {
                code = WheelCode.SCROLL_RIGHT;
            }
        } else if (e instanceof MouseEvent) {
--- a/src/modules/mkb/mkb-handler.ts
+++ b/src/modules/mkb/mkb-handler.ts
@ -9,13 +9,152 @@ import { LocalDb } from "@utils/local-db";
 import { KeyHelper } from "./key-helper";
 import type { MkbStoredPreset } from "@/types/mkb";
 import { showStreamSettings } from "@modules/stream/stream-ui";
-import { STATES } from "@utils/global";
+import { AppInterface, STATES } from "@utils/global";
 import { UserAgent } from "@utils/user-agent";
 import { BxLogger } from "@utils/bx-logger";
 import { BxIcon } from "@utils/bx-icon";
+import { PointerClient } from "./pointer-client";

 const LOG_TAG = 'MkbHandler';

+
+abstract class MouseDataProvider {
+    protected mkbHandler: MkbHandler;
+    constructor(handler: MkbHandler) {
+        this.mkbHandler = handler;
+    }
+
+    abstract init(): void;
+    abstract start(): void;
+    abstract stop(): void;
+    abstract destroy(): void;
+    abstract toggle(enabled: boolean): void;
+}
+
+class WebSocketMouseDataProvider extends MouseDataProvider {
+    #pointerClient: PointerClient | undefined
+    #connected = false
+
+    init(): void {
+        this.#pointerClient = PointerClient.getInstance();
+        this.#connected = false;
+        try {
+            this.#pointerClient.start(this.mkbHandler);
+            this.#connected = true;
+        } catch (e) {
+            Toast.show('Cannot enable Mouse & Keyboard feature');
+        }
+    }
+
+    start(): void {
+        this.#connected && AppInterface.requestPointerCapture();
+    }
+
+    stop(): void {
+        this.#connected && AppInterface.releasePointerCapture();
+    }
+
+    destroy(): void {
+        this.#connected && this.#pointerClient?.stop();
+    }
+
+    toggle(enabled: boolean): void {
+        if (!this.#connected) {
+            enabled = false;
+        }
+
+        enabled ? this.mkbHandler.start() : this.mkbHandler.stop();
+        this.mkbHandler.waitForMouseData(!enabled);
+    }
+}
+
+class PointerLockMouseDataProvider extends MouseDataProvider {
+    init(): void {
+        document.addEventListener('pointerlockchange', this.#onPointerLockChange);
+        document.addEventListener('pointerlockerror', this.#onPointerLockError);
+    }
+
+    start(): void {
+        if (!document.pointerLockElement) {
+            document.body.requestPointerLock();
+        }
+
+        window.addEventListener('mousemove', this.#onMouseMoveEvent);
+        window.addEventListener('mousedown', this.#onMouseEvent);
+        window.addEventListener('mouseup', this.#onMouseEvent);
+        window.addEventListener('wheel', this.#onWheelEvent);
+        window.addEventListener('contextmenu', this.#disableContextMenu);
+    }
+
+    stop(): void {
+        window.removeEventListener('mousemove', this.#onMouseMoveEvent);
+        window.removeEventListener('mousedown', this.#onMouseEvent);
+        window.removeEventListener('mouseup', this.#onMouseEvent);
+        window.removeEventListener('wheel', this.#onWheelEvent);
+        window.removeEventListener('contextmenu', this.#disableContextMenu);
+    }
+
+    destroy(): void {
+        document.removeEventListener('pointerlockchange', this.#onPointerLockChange);
+        document.removeEventListener('pointerlockerror', this.#onPointerLockError);
+    }
+
+    toggle(enabled: boolean): void {
+        enabled ? document.pointerLockElement && this.mkbHandler.start() : this.mkbHandler.stop();
+
+        if (enabled) {
+            !document.pointerLockElement && this.mkbHandler.waitForMouseData(true);
+        } else {
+            this.mkbHandler.waitForMouseData(false);
+            document.pointerLockElement && document.exitPointerLock();
+        }
+    }
+
+    #onPointerLockChange = () => {
+        if (this.mkbHandler.isEnabled() && !document.pointerLockElement) {
+            this.mkbHandler.stop();
+        }
+    }
+
+    #onPointerLockError = (e: Event) => {
+        console.log(e);
+        this.stop();
+    }
+
+    #onMouseMoveEvent = (e: MouseEvent) => {
+        this.mkbHandler.handleMouseMove({
+            movementX: e.movementX,
+            movementY: e.movementY,
+        });
+    }
+
+    #onMouseEvent = (e: MouseEvent) => {
+        e.preventDefault();
+
+        const isMouseDown = e.type === 'mousedown';
+        const key = KeyHelper.getKeyFromEvent(e);
+        const data: MkbMouseClick = {
+            key: key,
+            pressed: isMouseDown
+        };
+
+        this.mkbHandler.handleMouseClick(data);
+    }
+
+    #onWheelEvent = (e: WheelEvent) => {
+        const key = KeyHelper.getKeyFromEvent(e);
+        if (!key) {
+            return;
+        }
+
+        if (this.mkbHandler.handleMouseWheel({key})) {
+            e.preventDefault();
+        }
+    }
+
+    #disableContextMenu = (e: Event) => e.preventDefault();
+}
+
 /*
 This class uses some code from Yuzu emulator to handle mouse's movements
 Source: https://github.com/yuzu-emu/yuzu-mainline/blob/master/src/input_common/drivers/mouse.cpp
@ -33,7 +172,6 @@ export class MkbHandler {
    #CURRENT_PRESET_DATA = MkbPreset.convert(MkbPreset.DEFAULT_PRESET);

    static readonly DEFAULT_PANNING_SENSITIVITY = 0.0010;
-    static readonly DEFAULT_STICK_SENSITIVITY = 0.0006;
    static readonly DEFAULT_DEADZONE_COUNTERWEIGHT = 0.01;
    static readonly MAXIMUM_STICK_RANGE = 1.1;

@ -55,13 +193,13 @@ export class MkbHandler {
    #nativeGetGamepads = window.navigator.getGamepads.bind(window.navigator);

    #enabled = false;
+    #mouseDataProvider: MouseDataProvider | undefined;
    #isPolling = false;

    #prevWheelCode = null;
    #wheelStoppedTimeout?: number | null;

    #detectMouseStoppedTimeout?: number | null;
-    #allowStickDecaying = false;

    #$message?: HTMLElement;

@ -85,6 +223,8 @@ export class MkbHandler {
        };
    }

+    isEnabled = () => this.#enabled;
+
    #patchedGetGamepads = () => {
        const gamepads = this.#nativeGetGamepads() || [];
        (gamepads as any)[this.#VIRTUAL_GAMEPAD.index] = this.#VIRTUAL_GAMEPAD;
@ -102,6 +242,7 @@ export class MkbHandler {
        virtualGamepad.timestamp = performance.now();
    }

+    /*
    #getStickAxes(stick: GamepadStick) {
        const virtualGamepad = this.#getVirtualGamepad();
        return {
@ -109,11 +250,10 @@ export class MkbHandler {
            y: virtualGamepad.axes[stick * 2 + 1],
        };
    }
+    */

    #vectorLength = (x: number, y: number): number => Math.sqrt(x ** 2 + y ** 2);

-    #disableContextMenu = (e: Event) => e.preventDefault();
-
    #resetGamepad = () => {
        const gamepad = this.#getVirtualGamepad();

@ -172,6 +312,10 @@ export class MkbHandler {
                e.preventDefault();
                this.toggle();
                return;
+            } else if (e.code === 'Escape') {
+                e.preventDefault();
+                this.#enabled && this.stop();
+                return;
            }

            if (!this.#isPolling) {
@ -179,7 +323,7 @@ export class MkbHandler {
            }
        }

-        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[e.code]!;
+        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[e.code || e.key]!;
        if (typeof buttonIndex === 'undefined') {
            return;
        }
@ -193,89 +337,29 @@ export class MkbHandler {
        this.#pressButton(buttonIndex, isKeyDown);
    }

-    #onMouseEvent = (e: MouseEvent) => {
-        const isMouseDown = e.type === 'mousedown';
-        const key = KeyHelper.getKeyFromEvent(e);
-        if (!key) {
-            return;
-        }
-
-        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[key.code]!;
-        if (typeof buttonIndex === 'undefined') {
-            return;
-        }
-
-        e.preventDefault();
-        this.#pressButton(buttonIndex, isMouseDown);
-    }
-
-    #onWheelEvent = (e: WheelEvent) => {
-        const key = KeyHelper.getKeyFromEvent(e);
-        if (!key) {
-            return;
-        }
-
-        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[key.code]!;
-        if (typeof buttonIndex === 'undefined') {
-            return;
-        }
-
-        e.preventDefault();
-
-        if (this.#prevWheelCode === null || this.#prevWheelCode === key.code) {
-            this.#wheelStoppedTimeout && clearTimeout(this.#wheelStoppedTimeout);
-            this.#pressButton(buttonIndex, true);
-        }
-
-        this.#wheelStoppedTimeout = window.setTimeout(() => {
-            this.#prevWheelCode = null;
-            this.#pressButton(buttonIndex, false);
-        }, 20);
-    }
-
-    #decayStick = () => {
-        if (!this.#allowStickDecaying) {
-            return;
-        }
+    #onMouseStopped = () => {
+        // Reset stick position
+        this.#detectMouseStoppedTimeout = null;

        const mouseMapTo = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_MAP_TO];
-        if (mouseMapTo === MouseMapTo.OFF) {
+        const analog = mouseMapTo === MouseMapTo.LS ? GamepadStick.LEFT : GamepadStick.RIGHT;
+        this.#updateStick(analog, 0, 0);
+    }
+
+    handleMouseClick = (data: MkbMouseClick) => {
+        if (!data || !data.key) {
            return;
        }

-        const analog = mouseMapTo === MouseMapTo.LS ? GamepadStick.LEFT : GamepadStick.RIGHT;
-
-        let { x, y } = this.#getStickAxes(analog);
-        const length = this.#vectorLength(x, y);
-
-        const clampedLength = Math.min(1.0, length);
-        const decayStrength = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH];
-        const decay = 1 - clampedLength * clampedLength * decayStrength;
-        const minDecay = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_STICK_DECAY_MIN];
-        const clampedDecay = Math.min(1 - minDecay, decay);
-
-        x *= clampedDecay;
-        y *= clampedDecay;
-
-        const deadzoneCounterweight = 20 * MkbHandler.DEFAULT_DEADZONE_COUNTERWEIGHT;
-        if (Math.abs(x) <= deadzoneCounterweight && Math.abs(y) <= deadzoneCounterweight) {
-            x = 0;
-            y = 0;
+        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[data.key.code]!;
+        if (typeof buttonIndex === 'undefined') {
+            return;
        }

-        if (this.#allowStickDecaying) {
-            this.#updateStick(analog, x, y);
-
-            (x !== 0 || y !== 0) && requestAnimationFrame(this.#decayStick);
-        }
+        this.#pressButton(buttonIndex, data.pressed);
    }

-    #onMouseStopped = () => {
-        this.#allowStickDecaying = true;
-        requestAnimationFrame(this.#decayStick);
-    }
-
-    #onMouseMoveEvent = (e: MouseEvent) => {
+    handleMouseMove = (data: MkbMouseMove) => {
        // TODO: optimize this
        const mouseMapTo = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_MAP_TO];
        if (mouseMapTo === MouseMapTo.OFF) {
@ -283,17 +367,13 @@ export class MkbHandler {
            return;
        }

-        this.#allowStickDecaying = false;
        this.#detectMouseStoppedTimeout && clearTimeout(this.#detectMouseStoppedTimeout);
-        this.#detectMouseStoppedTimeout = window.setTimeout(this.#onMouseStopped.bind(this), 10);
-
-        const deltaX = e.movementX;
-        const deltaY = e.movementY;
+        this.#detectMouseStoppedTimeout = window.setTimeout(this.#onMouseStopped.bind(this), 50);

        const deadzoneCounterweight = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT];

-        let x = deltaX * this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_SENSITIVITY_X];
-        let y = deltaY * this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_SENSITIVITY_Y];
+        let x = data.movementX * this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_SENSITIVITY_X];
+        let y = data.movementY * this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_SENSITIVITY_Y];

        let length = this.#vectorLength(x, y);
        if (length !== 0 && length < deadzoneCounterweight) {
@ -308,18 +388,33 @@ export class MkbHandler {
        this.#updateStick(analog, x, y);
    }

+    handleMouseWheel = (data: MkbMouseWheel): boolean => {
+        if (!data || !data.key) {
+            return false;
+        }
+
+        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[data.key.code]!;
+        if (typeof buttonIndex === 'undefined') {
+            return false;
+        }
+
+        if (this.#prevWheelCode === null || this.#prevWheelCode === data.key.code) {
+            this.#wheelStoppedTimeout && clearTimeout(this.#wheelStoppedTimeout);
+            this.#pressButton(buttonIndex, true);
+        }
+
+        this.#wheelStoppedTimeout = window.setTimeout(() => {
+            this.#prevWheelCode = null;
+            this.#pressButton(buttonIndex, false);
+        }, 20);
+
+        return true;
+    }
+
    toggle = () => {
        this.#enabled = !this.#enabled;
-        this.#enabled ? document.pointerLockElement && this.start() : this.stop();
-
        Toast.show(t('mouse-and-keyboard'), t(this.#enabled ? 'enabled' : 'disabled'), {instant: true});
-
-        if (this.#enabled) {
-            !document.pointerLockElement && this.#waitForPointerLock(true);
-        } else {
-            this.#waitForPointerLock(false);
-            document.pointerLockElement && document.exitPointerLock();
-        }
+        this.#mouseDataProvider?.toggle(this.#enabled);
    }

    #getCurrentPreset = (): Promise<MkbStoredPreset> => {
@ -338,72 +433,73 @@ export class MkbHandler {
        });
    }

-    #onPointerLockChange = () => {
-        if (this.#enabled && !document.pointerLockElement) {
-            this.stop();
-            this.#waitForPointerLock(true);
-        }
-    }
-
-    #onPointerLockError = (e: Event) => {
-        console.log(e);
-        this.stop();
-    }
-
-    #onActivatePointerLock = () => {
-        if (!document.pointerLockElement) {
-            document.body.requestPointerLock();
-        }
-
-        this.#waitForPointerLock(false);
-        this.start();
-    }
-
-    #waitForPointerLock = (wait: boolean) => {
+    waitForMouseData = (wait: boolean) => {
        this.#$message && this.#$message.classList.toggle('bx-gone', !wait);
    }

-    #onStreamMenuShown = () => {
-        this.#enabled && this.#waitForPointerLock(false);
-    }
+    #onPollingModeChanged = (e: Event) => {
+        if (!this.#$message) {
+            return;
+        }

-    #onStreamMenuHidden = () => {
-        this.#enabled && this.#waitForPointerLock(true);
+        const mode = (e as any).mode;
+        if (mode === 'None') {
+            this.#$message.classList.remove('bx-offscreen');
+        } else {
+            this.#$message.classList.add('bx-offscreen');
+        }
    }

    init = () => {
        this.refreshPresetData();
        this.#enabled = true;

+        if (AppInterface) {
+            this.#mouseDataProvider = new WebSocketMouseDataProvider(this);
+        } else {
+            this.#mouseDataProvider = new PointerLockMouseDataProvider(this);
+        }
+        this.#mouseDataProvider.init();
+
        window.addEventListener('keydown', this.#onKeyboardEvent);

-        document.addEventListener('pointerlockchange', this.#onPointerLockChange);
-        document.addEventListener('pointerlockerror', this.#onPointerLockError);
-
        this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg bx-gone'},
-                createButton({
-                    icon: BxIcon.MOUSE_SETTINGS,
-                    style: ButtonStyle.PRIMARY,
-                    onClick: e => {
-                        e.preventDefault();
-                        e.stopPropagation();
-
-                        showStreamSettings('mkb');
-                    },
-                }),
                CE('div', {},
                    CE('p', {}, t('mkb-click-to-activate')),
                    CE('p', {}, t('press-key-to-toggle-mkb', {key: 'F8'})),
                ),
+
+                CE('div', {},
+                    createButton({
+                        icon: BxIcon.MOUSE_SETTINGS,
+                        label: t('edit'),
+                        style: ButtonStyle.PRIMARY,
+                        onClick: e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            showStreamSettings('mkb');
+                        },
+                    }),
+
+                    createButton({
+                        label: t('disable'),
+                        onClick: e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            this.toggle();
+                        },
+                    }),
+                ),
            );

-        this.#$message.addEventListener('click', this.#onActivatePointerLock);
+        this.#$message.addEventListener('click', this.start.bind(this));
        document.documentElement.appendChild(this.#$message);

-        window.addEventListener(BxEvent.STREAM_MENU_SHOWN, this.#onStreamMenuShown);
-        window.addEventListener(BxEvent.STREAM_MENU_HIDDEN, this.#onStreamMenuHidden);
+        window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.#onPollingModeChanged);

-        this.#waitForPointerLock(true);
+        this.waitForMouseData(true);
    }

    destroy = () => {
@ -411,31 +507,31 @@ export class MkbHandler {
        this.#enabled = false;
        this.stop();

-        this.#waitForPointerLock(false);
+        this.waitForMouseData(false);
        document.pointerLockElement && document.exitPointerLock();

        window.removeEventListener('keydown', this.#onKeyboardEvent);

-        document.removeEventListener('pointerlockchange', this.#onPointerLockChange);
-        document.removeEventListener('pointerlockerror', this.#onPointerLockError);
+        this.#mouseDataProvider?.destroy();

-        window.removeEventListener(BxEvent.STREAM_MENU_SHOWN, this.#onStreamMenuShown);
-        window.removeEventListener(BxEvent.STREAM_MENU_HIDDEN, this.#onStreamMenuHidden);
+        window.removeEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.#onPollingModeChanged);
    }

    start = () => {
+        if (!this.#enabled) {
+            this.#enabled = true;
+            Toast.show(t('mouse-and-keyboard'), t('enabled'), {instant: true});
+        }
+
        this.#isPolling = true;
-        window.navigator.getGamepads = this.#patchedGetGamepads;

        this.#resetGamepad();
+        window.navigator.getGamepads = this.#patchedGetGamepads;
+
+        this.waitForMouseData(false);

        window.addEventListener('keyup', this.#onKeyboardEvent);
-
-        window.addEventListener('mousemove', this.#onMouseMoveEvent);
-        window.addEventListener('mousedown', this.#onMouseEvent);
-        window.addEventListener('mouseup', this.#onMouseEvent);
-        window.addEventListener('wheel', this.#onWheelEvent);
-        window.addEventListener('contextmenu', this.#disableContextMenu);
+        this.#mouseDataProvider?.start();

        // Dispatch "gamepadconnected" event
        const virtualGamepad = this.#getVirtualGamepad();
@ -451,6 +547,8 @@ export class MkbHandler {
        this.#isPolling = false;

        // Dispatch "gamepaddisconnected" event
+        this.#resetGamepad();
+
        const virtualGamepad = this.#getVirtualGamepad();
        virtualGamepad.connected = false;
        virtualGamepad.timestamp = performance.now();
@ -461,19 +559,14 @@ export class MkbHandler {

        window.navigator.getGamepads = this.#nativeGetGamepads;

-        this.#resetGamepad();
-
        window.removeEventListener('keyup', this.#onKeyboardEvent);

-        window.removeEventListener('mousemove', this.#onMouseMoveEvent);
-        window.removeEventListener('mousedown', this.#onMouseEvent);
-        window.removeEventListener('mouseup', this.#onMouseEvent);
-        window.removeEventListener('wheel', this.#onWheelEvent);
-        window.removeEventListener('contextmenu', this.#disableContextMenu);
+        this.waitForMouseData(true);
+        this.#mouseDataProvider?.stop();
    }

    static setupEvents() {
-        getPref(PrefKey.MKB_ENABLED) && !UserAgent.isMobile() && window.addEventListener(BxEvent.STREAM_PLAYING, () => {
+        getPref(PrefKey.MKB_ENABLED) && (AppInterface || !UserAgent.isMobile()) && window.addEventListener(BxEvent.STREAM_PLAYING, () => {
            // Enable MKB
            if (!STATES.currentStream.titleInfo?.details.hasMkbSupport) {
                BxLogger.info(LOG_TAG, 'Emulate MKB');
--- a/src/modules/mkb/mkb-preset.ts
+++ b/src/modules/mkb/mkb-preset.ts
@ -24,11 +24,11 @@ export class MkbPreset {
            type: SettingElementType.NUMBER_STEPPER,
            default: 50,
            min: 1,
-            max: 200,
+            max: 300,

            params: {
                suffix: '%',
-                exactTicks: 20,
+                exactTicks: 50,
            },
        },

@ -37,11 +37,11 @@ export class MkbPreset {
            type: SettingElementType.NUMBER_STEPPER,
            default: 50,
            min: 1,
-            max: 200,
+            max: 300,

            params: {
                suffix: '%',
-                exactTicks: 20,
+                exactTicks: 50,
            },
        },

@ -50,38 +50,13 @@ export class MkbPreset {
            type: SettingElementType.NUMBER_STEPPER,
            default: 20,
            min: 1,
-            max: 100,
+            max: 50,

            params: {
                suffix: '%',
                exactTicks: 10,
            },
        },
-
-        [MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH]: {
-            label: t('stick-decay-strength'),
-            type: SettingElementType.NUMBER_STEPPER,
-            default: 100,
-            min: 10,
-            max: 100,
-
-            params: {
-                suffix: '%',
-                exactTicks: 10,
-            },
-        },
-
-        [MkbPresetKey.MOUSE_STICK_DECAY_MIN]: {
-            label: t('stick-decay-minimum'),
-            type: SettingElementType.NUMBER_STEPPER,
-            default: 10,
-            min: 1,
-            max: 10,
-
-            params: {
-                suffix: '%',
-            },
-        },
    };

    static DEFAULT_PRESET: MkbPresetData = {
@ -124,11 +99,9 @@ export class MkbPreset {

        'mouse': {
            [MkbPresetKey.MOUSE_MAP_TO]: MouseMapTo[MouseMapTo.RS],
-            [MkbPresetKey.MOUSE_SENSITIVITY_X]: 50,
-            [MkbPresetKey.MOUSE_SENSITIVITY_Y]: 50,
+            [MkbPresetKey.MOUSE_SENSITIVITY_X]: 100,
+            [MkbPresetKey.MOUSE_SENSITIVITY_Y]: 100,
            [MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT]: 20,
-            [MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH]: 100,
-            [MkbPresetKey.MOUSE_STICK_DECAY_MIN]: 10,
        },
    };

@ -149,8 +122,6 @@ export class MkbPreset {
        mouse[MkbPresetKey.MOUSE_SENSITIVITY_X] *= MkbHandler.DEFAULT_PANNING_SENSITIVITY;
        mouse[MkbPresetKey.MOUSE_SENSITIVITY_Y] *= MkbHandler.DEFAULT_PANNING_SENSITIVITY;
        mouse[MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT] *= MkbHandler.DEFAULT_DEADZONE_COUNTERWEIGHT;
-        mouse[MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH] *= 0.01;
-        mouse[MkbPresetKey.MOUSE_STICK_DECAY_MIN] *= 0.01;

        const mouseMapTo = MouseMapTo[mouse[MkbPresetKey.MOUSE_MAP_TO]!];
        if (typeof mouseMapTo !== 'undefined') {
--- a/src/modules/mkb/mkb-remapper.ts
+++ b/src/modules/mkb/mkb-remapper.ts
@ -460,7 +460,7 @@ export class MkbRemapper {
            const onChange = (e: Event, value: any) => {
                (this.#STATE.editingPresetData!.mouse as any)[key] = value;
            };
-            const $row = CE('div', {'class': 'bx-quick-settings-row'},
+            const $row = CE('div', {'class': 'bx-stream-settings-row'},
                    CE('label', {'for': `bx_setting_${key}`}, setting.label),
                    $elm = SettingElement.render(setting.type, key, setting, value, onChange, setting.params),
                );
--- a/src/modules/mkb/pointer-client.ts
+++ b/src/modules/mkb/pointer-client.ts
@ -0,0 +1,152 @@
+import { BxLogger } from "@/utils/bx-logger";
+import type { MkbHandler } from "./mkb-handler";
+import { KeyHelper } from "./key-helper";
+import { WheelCode } from "./definitions";
+import { Toast } from "@/utils/toast";
+
+const LOG_TAG = 'PointerClient';
+
+enum PointerAction {
+    MOVE = 1,
+    BUTTON_PRESS = 2,
+    BUTTON_RELEASE = 3,
+    SCROLL = 4,
+    POINTER_CAPTURE_CHANGED = 5,
+}
+
+const FixedMouseIndex = {
+    1: 0,
+    2: 2,
+    4: 1,
+}
+
+export class PointerClient {
+    static #PORT = 9269;
+
+    private static instance: PointerClient;
+    public static getInstance(): PointerClient {
+        if (!PointerClient.instance) {
+            PointerClient.instance = new PointerClient();
+        }
+
+        return PointerClient.instance;
+    }
+
+    #socket: WebSocket | undefined | null;
+    #mkbHandler: MkbHandler | undefined;
+
+    start(mkbHandler: MkbHandler) {
+        this.#mkbHandler = mkbHandler;
+
+        // Create WebSocket connection.
+        this.#socket = new WebSocket(`ws://localhost:${PointerClient.#PORT}`);
+        this.#socket.binaryType = 'arraybuffer';
+
+        // Connection opened
+        this.#socket.addEventListener('open', (event) => {
+            BxLogger.info(LOG_TAG, 'connected')
+        });
+
+        // Error
+        this.#socket.addEventListener('error', (event) => {
+            BxLogger.error(LOG_TAG, event);
+            Toast.show('Cannot setup mouse');
+        });
+
+        this.#socket.addEventListener('close', (event) => {
+            this.#socket = null;
+        });
+
+        // Listen for messages
+        this.#socket.addEventListener('message', (event) => {
+            const dataView = new DataView(event.data);
+
+            let messageType = dataView.getInt8(0);
+            let offset = Int8Array.BYTES_PER_ELEMENT;
+            switch (messageType) {
+                case PointerAction.MOVE:
+                    this.onMove(dataView, offset);
+                    break;
+
+                case PointerAction.BUTTON_PRESS:
+                case PointerAction.BUTTON_RELEASE:
+                    this.onPress(messageType, dataView, offset);
+                    break;
+
+                case PointerAction.SCROLL:
+                    this.onScroll(dataView, offset);
+                    break;
+
+                case PointerAction.POINTER_CAPTURE_CHANGED:
+                    this.onPointerCaptureChanged(dataView, offset);
+            }
+        });
+    }
+
+    onMove(dataView: DataView, offset: number) {
+        // [X, Y]
+        const x = dataView.getInt16(offset);
+        offset += Int16Array.BYTES_PER_ELEMENT;
+        const y = dataView.getInt16(offset);
+
+        this.#mkbHandler?.handleMouseMove({
+            movementX: x,
+            movementY: y,
+        });
+        // BxLogger.info(LOG_TAG, 'move', x, y);
+    }
+
+    onPress(messageType: PointerAction, dataView: DataView, offset: number) {
+        const buttonIndex = dataView.getInt8(offset);
+        const fixedIndex = FixedMouseIndex[buttonIndex as keyof typeof FixedMouseIndex];
+        const keyCode = 'Mouse' + fixedIndex;
+
+        this.#mkbHandler?.handleMouseClick({
+            key: {
+                code: keyCode,
+                name: KeyHelper.codeToKeyName(keyCode),
+            },
+            pressed: messageType === PointerAction.BUTTON_PRESS,
+        });
+
+        // BxLogger.info(LOG_TAG, 'press', buttonIndex);
+    }
+
+    onScroll(dataView: DataView, offset: number) {
+        // [V_SCROLL, H_SCROLL]
+        const vScroll = dataView.getInt8(offset);
+        offset += Int8Array.BYTES_PER_ELEMENT;
+        const hScroll = dataView.getInt8(offset);
+
+        let code = '';
+        if (vScroll < 0) {
+            code = WheelCode.SCROLL_UP;
+        } else if (vScroll > 0) {
+            code = WheelCode.SCROLL_DOWN;
+        } else if (hScroll < 0) {
+            code = WheelCode.SCROLL_LEFT;
+        } else if (hScroll > 0) {
+            code = WheelCode.SCROLL_RIGHT;
+        }
+
+        code && this.#mkbHandler?.handleMouseWheel({
+            key: {
+                code: code,
+                name: KeyHelper.codeToKeyName(code),
+            },
+        });
+
+        // BxLogger.info(LOG_TAG, 'scroll', vScroll, hScroll);
+    }
+
+    onPointerCaptureChanged(dataView: DataView, offset: number) {
+        const hasCapture = dataView.getInt8(offset) === 1;
+        !hasCapture && this.#mkbHandler?.stop();
+    }
+
+    stop() {
+        try {
+            this.#socket?.close();
+        } catch (e) {}
+    }
+}
--- a/src/modules/patcher.ts
+++ b/src/modules/patcher.ts
@ -3,9 +3,15 @@ import { BX_FLAGS } from "@utils/bx-flags";
 import { getPref, PrefKey } from "@utils/preferences";
 import { VibrationManager } from "@modules/vibration-manager";
 import { BxLogger } from "@utils/bx-logger";
-import { hashCode } from "@utils/utils";
+import { hashCode, renderString } from "@utils/utils";
 import { BxEvent } from "@/utils/bx-event";

+import codeControllerShortcuts from "./patches/controller-shortcuts.js" with { type: "text" };
+import codeLocalCoOpEnable from "./patches/local-co-op-enable.js" with { type: "text" };
+import codeRemotePlayEnable from "./patches/remote-play-enable.js" with { type: "text" };
+import codeRemotePlayKeepAlive from "./patches/remote-play-keep-alive.js" with { type: "text" };
+import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "text" };
+
 type PatchArray = (keyof typeof PATCHES)[];

 const ENDING_CHUNKS_PATCH_NAME = 'loadingEndingChunks';
@ -92,31 +98,24 @@ const PATCHES = {
    },

    remotePlayKeepAlive(str: string) {
-        if (!str.includes('onServerDisconnectMessage(e){')) {
+        const text = 'onServerDisconnectMessage(e){';
+        if (!str.includes(text)) {
            return false;
        }

-        str = str.replace('onServerDisconnectMessage(e){', `onServerDisconnectMessage(e) {
-            const msg = JSON.parse(e);
-            if (msg.reason === 'WarningForBeingIdle' && !window.location.pathname.includes('/launch/')) {
-                try {
-                    this.sendKeepAlive();
-                    return;
-                } catch (ex) { console.log(ex); }
-            }
-        `);
+        str = str.replace(text, text + codeRemotePlayKeepAlive);

        return str;
    },

    // Enable Remote Play feature
    remotePlayConnectMode(str: string) {
-        const text = 'connectMode:"cloud-connect"';
+        const text = 'connectMode:"cloud-connect",';
        if (!str.includes(text)) {
            return false;
        }

-        return str.replace(text, `connectMode:window.BX_REMOTE_PLAY_CONFIG?"xhome-connect":"cloud-connect",remotePlayServerId:(window.BX_REMOTE_PLAY_CONFIG&&window.BX_REMOTE_PLAY_CONFIG.serverId)||''`);
+        return str.replace(text, codeRemotePlayEnable);
    },

    // Disable achievement toast in Remote Play
@ -155,15 +154,36 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
        return str.replace(text, 'this.shouldCollectStats=!1');
    },

-    blockGamepadStatsCollector(str: string) {
-        const text = 'this.inputPollingIntervalStats.addValue';
-        if (!str.includes(text)) {
+    patchPollGamepads(str: string) {
+        const index = str.indexOf('},this.pollGamepads=()=>{');
+        if (index === -1) {
            return false;
        }

-        str = str.replace('this.inputPollingIntervalStats.addValue', '');
-        str = str.replace('this.inputPollingDurationStats.addValue', '');
-        return str;
+        const nextIndex = str.indexOf('setTimeout(this.pollGamepads', index);
+        if (nextIndex === -1) {
+            return false;
+        }
+
+        let codeBlock = str.substring(index, nextIndex);
+
+        // Block gamepad stats collecting
+        if (getPref(PrefKey.BLOCK_TRACKING)) {
+            codeBlock = codeBlock.replaceAll('this.inputPollingIntervalStats.addValue', '');
+        }
+
+        // Map the Share button on Xbox Series controller with the capturing screenshot feature
+        const match = codeBlock.match(/this\.gamepadTimestamps\.set\((\w+)\.index/);
+        if (match) {
+            const gamepadVar = match[1];
+            const newCode = renderString(codeControllerShortcuts, {
+                    gamepadVar,
+                });
+
+            codeBlock = codeBlock.replace('this.gamepadTimestamps.set', newCode + 'this.gamepadTimestamps.set');
+        }
+
+        return str.substring(0, index) + codeBlock + str.substring(nextIndex);
    },

    enableXcloudLogger(str: string) {
@ -193,20 +213,8 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
            return false;
        }

-        const newCode = `
-if (!window.BX_ENABLE_CONTROLLER_VIBRATION) {
-    return void(0);
-}
-if (window.BX_VIBRATION_INTENSITY && window.BX_VIBRATION_INTENSITY < 1) {
-    e.leftMotorPercent = e.leftMotorPercent * window.BX_VIBRATION_INTENSITY;
-    e.rightMotorPercent = e.rightMotorPercent * window.BX_VIBRATION_INTENSITY;
-    e.leftTriggerMotorPercent = e.leftTriggerMotorPercent * window.BX_VIBRATION_INTENSITY;
-    e.rightTriggerMotorPercent = e.rightTriggerMotorPercent * window.BX_VIBRATION_INTENSITY;
-}
-`;
-
        VibrationManager.updateGlobalVars();
-        str = str.replaceAll(text, text + newCode);
+        str = str.replaceAll(text, text + codeVibrationAdjust);
        return str;
    },

@ -302,27 +310,7 @@ window.dispatchEvent(new Event("${BxEvent.TOUCH_LAYOUT_MANAGER_READY}"));
            return false;
        }

-        let patchstr = `
-let match;
-let onGamepadChangedStr = this.onGamepadChanged.toString();
-
-onGamepadChangedStr = onGamepadChangedStr.replaceAll('0', 'arguments[1]');
-eval(\`this.onGamepadChanged = function \${onGamepadChangedStr}\`);
-
-let onGamepadInputStr = this.onGamepadInput.toString();
-
-match = onGamepadInputStr.match(/(\\w+\\.GamepadIndex)/);
-if (match) {
-    const gamepadIndexVar = match[0];
-    onGamepadInputStr = onGamepadInputStr.replace('this.gamepadStates.get(', \`this.gamepadStates.get(\${gamepadIndexVar},\`);
-    eval(\`this.onGamepadInput = function \${onGamepadInputStr}\`);
-    BxLogger.info('supportLocalCoOp', '✅ Successfully patched local co-op support');
-} else {
-    BxLogger.error('supportLocalCoOp', '❌ Unable to patch local co-op support');
-}
-`;
-
-        const newCode = `true; ${patchstr}; true,`;
+        const newCode = `true; ${codeLocalCoOpEnable}; true,`;

        str = str.replace(text, text + newCode);
        return str;
@ -396,13 +384,19 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
            return false;
        }

-        // Restore the "..." button
-        str = str.replace(text, 'e.guideUI = null;' + text);
+        let newCode = `
+// Expose onShowStreamMenu
+window.BX_EXPOSED.showStreamMenu = e.onShowStreamMenu;
+// Restore the "..." button
+e.guideUI = null;
+`;

        // Remove the TAK Edit button when the touch controller is disabled
        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off') {
-            str = str.replace(text, 'e.canShowTakHUD = false;' + text);
+            newCode += 'e.canShowTakHUD = false;';
        }
+
+        str = str.replace(text, newCode + text);
        return str;
    },

@ -413,7 +407,7 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
        }

        const newCode = `
-window.BX_EXPOSED.onPollingModeChanged && window.BX_EXPOSED.onPollingModeChanged(e);
+BxEvent.dispatch(window, BxEvent.XCLOUD_POLLING_MODE_CHANGED, {mode: e});
 `;
        str = str.replace(text, text + newCode);
        return str;
@ -619,7 +613,7 @@ let PLAYING_PATCH_ORDERS: PatchArray = [

    BX_FLAGS.EnableXcloudLogging && 'enableConsoleLogging',

-    getPref(PrefKey.BLOCK_TRACKING) && 'blockGamepadStatsCollector',
+    'patchPollGamepads',

    getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'streamCombineSources',

--- a/src/modules/patches/controller-shortcuts.js
+++ b/src/modules/patches/controller-shortcuts.js
@ -0,0 +1,87 @@
+const currentGamepad = ${gamepadVar};
+
+// Share button on XS controller
+if (currentGamepad.buttons[17] && currentGamepad.buttons[17].pressed) {
+    window.dispatchEvent(new Event(BxEvent.CAPTURE_SCREENSHOT));
+}
+
+const btnHome = currentGamepad.buttons[16];
+if (btnHome) {
+    if (!this.bxHomeStates) {
+        this.bxHomeStates = {};
+    }
+
+    if (btnHome.pressed) {
+        this.gamepadIsIdle.set(currentGamepad.index, false);
+
+        if (this.bxHomeStates[currentGamepad.index]) {
+            const lastTimestamp = this.bxHomeStates[currentGamepad.index].timestamp;
+
+            if (currentGamepad.timestamp !== lastTimestamp) {
+                this.bxHomeStates[currentGamepad.index].timestamp = currentGamepad.timestamp;
+
+                const handled = window.BX_EXPOSED.handleControllerShortcut(currentGamepad);
+                if (handled) {
+                    this.bxHomeStates[currentGamepad.index].shortcutPressed += 1;
+                }
+            }
+        } else {
+            // First time pressing > save current timestamp
+            window.BX_EXPOSED.resetControllerShortcut(currentGamepad.index);
+            this.bxHomeStates[currentGamepad.index] = {
+                shortcutPressed: 0,
+                timestamp: currentGamepad.timestamp,
+            };
+        }
+
+        // Listen to next button press
+        const intervalMs = 16;
+        this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(intervalMs) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, intervalMs);
+
+        // Hijack this button
+        return;
+    } else if (this.bxHomeStates[currentGamepad.index]) {
+        const info = structuredClone(this.bxHomeStates[currentGamepad.index]);
+
+        // Home button released
+        this.bxHomeStates[currentGamepad.index] = null;
+
+        if (info.shortcutPressed === 0) {
+            const fakeGamepadMappings = [{
+                GamepadIndex: currentGamepad.index,
+                A: 0,
+                B: 0,
+                X: 0,
+                Y: 0,
+                LeftShoulder: 0,
+                RightShoulder: 0,
+                LeftTrigger: 0,
+                RightTrigger: 0,
+                View: 0,
+                Menu: 0,
+                LeftThumb: 0,
+                RightThumb: 0,
+                DPadUp: 0,
+                DPadDown: 0,
+                DPadLeft: 0,
+                DPadRight: 0,
+                Nexus: 1,
+                LeftThumbXAxis: 0,
+                LeftThumbYAxis: 0,
+                RightThumbXAxis: 0,
+                RightThumbYAxis: 0,
+                PhysicalPhysicality: 0,
+                VirtualPhysicality: 0,
+                Dirty: true,
+                Virtual: false,
+            }];
+
+            const isLongPress = (currentGamepad.timestamp - info.timestamp) >= 500;
+            const intervalMs = isLongPress ? 500 : 100;
+
+            this.inputSink.onGamepadInput(performance.now() - intervalMs, fakeGamepadMappings);
+            this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(intervalMs) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, intervalMs);
+            return;
+        }
+    }
+}
--- a/src/modules/patches/local-co-op-enable.js
+++ b/src/modules/patches/local-co-op-enable.js
@ -0,0 +1,17 @@
+let match;
+let onGamepadChangedStr = this.onGamepadChanged.toString();
+
+onGamepadChangedStr = onGamepadChangedStr.replaceAll('0', 'arguments[1]');
+eval(`this.onGamepadChanged = function ${onGamepadChangedStr}`);
+
+let onGamepadInputStr = this.onGamepadInput.toString();
+
+match = onGamepadInputStr.match(/(\w+\.GamepadIndex)/);
+if (match) {
+    const gamepadIndexVar = match[0];
+    onGamepadInputStr = onGamepadInputStr.replace('this.gamepadStates.get(', `this.gamepadStates.get(${gamepadIndexVar},`);
+    eval(`this.onGamepadInput = function ${onGamepadInputStr}`);
+    BxLogger.info('supportLocalCoOp', '✅ Successfully patched local co-op support');
+} else {
+    BxLogger.error('supportLocalCoOp', '❌ Unable to patch local co-op support');
+}
--- a/src/modules/patches/remote-play-enable.js
+++ b/src/modules/patches/remote-play-enable.js
@ -0,0 +1,2 @@
+connectMode: window.BX_REMOTE_PLAY_CONFIG ? "xhome-connect" : "cloud-connect",
+remotePlayServerId: (window.BX_REMOTE_PLAY_CONFIG && window.BX_REMOTE_PLAY_CONFIG.serverId) || '',
--- a/src/modules/patches/remote-play-keep-alive.js
+++ b/src/modules/patches/remote-play-keep-alive.js
@ -0,0 +1,7 @@
+const msg = JSON.parse(e);
+if (msg.reason === 'WarningForBeingIdle' && !window.location.pathname.includes('/launch/')) {
+    try {
+        this.sendKeepAlive();
+        return;
+    } catch (ex) { console.log(ex); }
+}
--- a/src/modules/patches/vibration-adjust.js
+++ b/src/modules/patches/vibration-adjust.js
@ -0,0 +1,11 @@
+if (!window.BX_ENABLE_CONTROLLER_VIBRATION) {
+    return void(0);
+}
+
+const intensity = window.BX_VIBRATION_INTENSITY;
+if (intensity && intensity < 1) {
+    e.leftMotorPercent *= intensity;
+    e.rightMotorPercent *= intensity;
+    e.leftTriggerMotorPercent *= intensity;
+    e.rightTriggerMotorPercent *= intensity;
+}
--- a/src/modules/shortcuts/shortcut-microphone.ts
+++ b/src/modules/shortcuts/shortcut-microphone.ts
@ -0,0 +1,33 @@
+import { t } from "@utils/translation";
+import { Toast } from "@utils/toast";
+
+
+export enum MicrophoneState {
+    REQUESTED = 'Requested',
+    ENABLED = 'Enabled',
+    MUTED = 'Muted',
+    NOT_ALLOWED = 'NotAllowed',
+    NOT_FOUND = 'NotFound',
+}
+
+export class MicrophoneShortcut {
+    static toggle(showToast: boolean = true): boolean {
+        if (!window.BX_EXPOSED.streamSession) {
+            return false;
+        }
+
+        const state = window.BX_EXPOSED.streamSession._microphoneState;
+        const enableMic = state === MicrophoneState.ENABLED ? false : true;
+
+        try {
+            window.BX_EXPOSED.streamSession.tryEnableChatAsync(enableMic);
+            showToast && Toast.show(t('microphone'), t(enableMic ? 'unmuted': 'muted'), {instant: true});
+
+            return enableMic;
+        } catch (e) {
+            console.log(e);
+        }
+
+        return false;
+    }
+}
--- a/src/modules/shortcuts/shortcut-sound.ts
+++ b/src/modules/shortcuts/shortcut-sound.ts
@ -0,0 +1,90 @@
+import { t } from "@utils/translation";
+import { STATES } from "@utils/global";
+import { PrefKey, getPref, setPref } from "@utils/preferences";
+import { Toast } from "@utils/toast";
+import { BxEvent } from "@/utils/bx-event";
+import { ceilToNearest, floorToNearest } from "@/utils/utils";
+
+export class SoundShortcut {
+    static adjustGainNodeVolume(amount: number): number {
+        if (!getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL)) {
+            return 0;
+        }
+
+        const currentValue = getPref(PrefKey.AUDIO_VOLUME);
+        let nearestValue: number;
+
+        if (amount > 0) {  // Increase
+            nearestValue = ceilToNearest(currentValue, amount);
+        } else {  // Decrease
+            nearestValue = floorToNearest(currentValue, -1 * amount);
+        }
+
+        let newValue: number;
+        if (currentValue !== nearestValue) {
+            newValue = nearestValue;
+        } else {
+            newValue = currentValue + amount;
+        }
+
+        newValue = setPref(PrefKey.AUDIO_VOLUME, newValue);
+        SoundShortcut.setGainNodeVolume(newValue);
+
+        // Show toast
+        Toast.show(`${t('stream')} ❯ ${t('volume')}`, newValue + '%', {instant: true});
+        BxEvent.dispatch(window, BxEvent.GAINNODE_VOLUME_CHANGED, {
+                volume: newValue,
+            });
+
+        return newValue;
+    }
+
+    static setGainNodeVolume(value: number) {
+        STATES.currentStream.audioGainNode && (STATES.currentStream.audioGainNode.gain.value = value / 100);
+    }
+
+    static muteUnmute() {
+        if (getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && STATES.currentStream.audioGainNode) {
+            const gainValue = STATES.currentStream.audioGainNode.gain.value;
+            const settingValue = getPref(PrefKey.AUDIO_VOLUME);
+
+            let targetValue: number;
+            if (settingValue === 0) {  // settingValue is 0 => set to 100
+                targetValue = 100;
+                setPref(PrefKey.AUDIO_VOLUME, targetValue);
+                BxEvent.dispatch(window, BxEvent.GAINNODE_VOLUME_CHANGED, {
+                        volume: targetValue,
+                    });
+            } else if (gainValue === 0) {  // is being muted => set to settingValue
+                targetValue = settingValue;
+            } else {  // not being muted => mute
+                targetValue = 0;
+            }
+
+            let status: string;
+            if (targetValue === 0) {
+                status = t('muted');
+            } else {
+                status = targetValue + '%';
+            }
+
+            SoundShortcut.setGainNodeVolume(targetValue);
+            Toast.show(`${t('stream')} ❯ ${t('volume')}`, status, {instant: true});
+            return;
+        }
+
+        let $media: HTMLMediaElement;
+
+        $media = document.querySelector('div[data-testid=media-container] audio') as HTMLAudioElement;
+        if (!$media) {
+            $media = document.querySelector('div[data-testid=media-container] video') as HTMLAudioElement;
+        }
+
+        if ($media) {
+            $media.muted = !$media.muted;
+
+            const status = $media.muted ? t('muted') : t('unmuted');
+            Toast.show(`${t('stream')} ❯ ${t('volume')}`, status, {instant: true});
+        }
+    }
+}
--- a/src/modules/shortcuts/shortcut-stream-ui.ts
+++ b/src/modules/shortcuts/shortcut-stream-ui.ts
@ -0,0 +1,6 @@
+export class StreamUiShortcut {
+    static showHideStreamMenu() {
+        // Show menu
+        window.BX_EXPOSED.showStreamMenu && window.BX_EXPOSED.showStreamMenu();
+    }
+}
--- a/src/modules/stream/stream-ui.ts
+++ b/src/modules/stream/stream-ui.ts
@ -66,9 +66,9 @@ export function injectStreamMenuButtons() {

    ($screen as any).xObserving = true;

-    const $quickBar = document.querySelector('.bx-quick-settings-bar')!;
+    const $settingsDialog = document.querySelector('.bx-stream-settings-dialog')!;
    const $parent = $screen.parentElement;
-    const hideQuickBarFunc = (e?: MouseEvent | TouchEvent) => {
+    const hideSettingsFunc = (e?: MouseEvent | TouchEvent) => {
        if (e) {
            const $target = e.target as HTMLElement;
            e.stopPropagation();
@ -76,15 +76,15 @@ export function injectStreamMenuButtons() {
                return;
            }
            if ($target.id === 'MultiTouchSurface') {
-                $target.removeEventListener('touchstart', hideQuickBarFunc);
+                $target.removeEventListener('touchstart', hideSettingsFunc);
            }
        }

-        // Hide Quick settings bar
-        $quickBar.classList.add('bx-gone');
+        // Hide Stream settings dialog
+        $settingsDialog.classList.add('bx-gone');

-        $parent?.removeEventListener('click', hideQuickBarFunc);
-        // $parent.removeEventListener('touchstart', hideQuickBarFunc);
+        $parent?.removeEventListener('click', hideSettingsFunc);
+        // $parent.removeEventListener('touchstart', hideSettingsFunc);
    }

    let $btnStreamSettings: HTMLElement;
@ -105,12 +105,6 @@ export function injectStreamMenuButtons() {
                if (!($node as HTMLElement).className || !($node as HTMLElement).className.startsWith) {
                    return;
                }
-
-                if (($node as HTMLElement).className.startsWith('StreamMenu')) {
-                    if (!document.querySelector('div[class^=PureInStreamConfirmationModal]')) {
-                        BxEvent.dispatch(window, BxEvent.STREAM_MENU_HIDDEN);
-                    }
-                }
            });

            item.addedNodes.forEach(async $node => {
@ -139,16 +133,14 @@ export function injectStreamMenuButtons() {

                // Render badges
                if ($elm.className?.startsWith('StreamMenu-module__container')) {
-                    BxEvent.dispatch(window, BxEvent.STREAM_MENU_SHOWN);
-
                    const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]');
                    if (!$btnCloseHud) {
                        return;
                    }

-                    // Hide Quick bar when closing HUD
+                    // Hide Stream Settings dialog when closing HUD
                    $btnCloseHud && $btnCloseHud.addEventListener('click', e => {
-                        $quickBar.classList.add('bx-gone');
+                        $settingsDialog.classList.add('bx-gone');
                    });

                    // Create Refresh button from the Close button
@ -176,7 +168,7 @@ export function injectStreamMenuButtons() {
                    const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
                    $menu?.appendChild(await StreamBadges.render());

-                    hideQuickBarFunc();
+                    hideSettingsFunc();
                    return;
                }

@ -210,25 +202,25 @@ export function injectStreamMenuButtons() {

                // Create Stream Settings button
                if (!$btnStreamSettings) {
-                    $btnStreamSettings = cloneStreamHudButton($orgButton, t('menu-stream-settings'), BxIcon.STREAM_SETTINGS);
+                    $btnStreamSettings = cloneStreamHudButton($orgButton, t('stream-settings'), BxIcon.STREAM_SETTINGS);
                    $btnStreamSettings.addEventListener('click', e => {
                        hideGripHandle();
                        e.preventDefault();

-                        // Show Quick settings bar
-                        $quickBar.classList.remove('bx-gone');
+                        // Show Stream Settings dialog
+                        $settingsDialog.classList.remove('bx-gone');

-                        $parent?.addEventListener('click', hideQuickBarFunc);
-                        //$parent.addEventListener('touchstart', hideQuickBarFunc);
+                        $parent?.addEventListener('click', hideSettingsFunc);
+                        //$parent.addEventListener('touchstart', hideSettingsFunc);

                        const $touchSurface = document.getElementById('MultiTouchSurface');
-                        $touchSurface && $touchSurface.style.display != 'none' && $touchSurface.addEventListener('touchstart', hideQuickBarFunc);
+                        $touchSurface && $touchSurface.style.display != 'none' && $touchSurface.addEventListener('touchstart', hideSettingsFunc);
                    });
                }

                // Create Stream Stats button
                if (!$btnStreamStats) {
-                    $btnStreamStats = cloneStreamHudButton($orgButton, t('menu-stream-stats'), BxIcon.STREAM_STATS);
+                    $btnStreamStats = cloneStreamHudButton($orgButton, t('stream-stats'), BxIcon.STREAM_STATS);
                    $btnStreamStats.addEventListener('click', e => {
                        hideGripHandle();
                        e.preventDefault();
@ -263,14 +255,14 @@ export function injectStreamMenuButtons() {


 export function showStreamSettings(tabId: string) {
-    const $wrapper = document.querySelector('.bx-quick-settings-bar');
+    const $wrapper = document.querySelector('.bx-stream-settings-dialog');
    if (!$wrapper) {
        return;
    }

    // Select tab
    if (tabId) {
-        const $tab = $wrapper.querySelector(`.bx-quick-settings-tabs svg[data-group=${tabId}]`);
+        const $tab = $wrapper.querySelector(`.bx-stream-settings-tabs svg[data-group=${tabId}]`);
        $tab && $tab.dispatchEvent(new Event('click'));
    }

--- a/src/modules/touch-controller.ts
+++ b/src/modules/touch-controller.ts
@ -2,10 +2,9 @@ import { STATES } from "@utils/global";
 import { escapeHtml } from "@utils/html";
 import { Toast } from "@utils/toast";
 import { BxEvent } from "@utils/bx-event";
-import { BX_FLAGS } from "@utils/bx-flags";
+import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
 import { getPref, PrefKey } from "@utils/preferences";
 import { t } from "@utils/translation";
-import { NATIVE_FETCH } from "@utils/network";
 import { BxLogger } from "@utils/bx-logger";

 const LOG_TAG = 'TouchController';
--- a/src/modules/ui/global-settings.ts
+++ b/src/modules/ui/global-settings.ts
@ -4,7 +4,7 @@ import { BxIcon } from "@utils/bx-icon";
 import { getPreferredServerRegion } from "@utils/region";
 import { UserAgent, UserAgentProfile } from "@utils/user-agent";
 import { getPref, Preferences, PrefKey, setPref, toPrefElement } from "@utils/preferences";
-import { t, refreshCurrentLocale } from "@utils/translation";
+import { t, Translations } from "@utils/translation";
 import { PatcherCache } from "../patcher";

 const SETTINGS_UI = {
@ -181,7 +181,7 @@ export function setupSettingsUi() {
        }
    }

-    const onChange = (e: Event) => {
+    const onChange = async (e: Event) => {
        // Clear PatcherCache;
        PatcherCache.clear();

@ -193,7 +193,8 @@ export function setupSettingsUi() {

        if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) {
            // Update locale
-            refreshCurrentLocale();
+            Translations.refreshCurrentLocale();
+            await Translations.updateTranslations();

            $btnReload.textContent = t('settings-reloading');
            $btnReload.click();
--- a/src/modules/ui/ui.ts
+++ b/src/modules/ui/ui.ts
@ -4,12 +4,14 @@ import { BxIcon } from "@utils/bx-icon";
 import { UserAgent } from "@utils/user-agent";
 import { BxEvent } from "@utils/bx-event";
 import { MkbRemapper } from "@modules/mkb/mkb-remapper";
-import { getPref, PrefKey, toPrefElement } from "@utils/preferences";
+import { getPref, Preferences, PrefKey, toPrefElement } from "@utils/preferences";
 import { StreamStats } from "@modules/stream/stream-stats";
 import { TouchController } from "@modules/touch-controller";
 import { t } from "@utils/translation";
 import { VibrationManager } from "@modules/vibration-manager";
 import { Screenshot } from "@/utils/screenshot";
+import { ControllerShortcut } from "../controller-shortcut";
+import { SoundShortcut } from "../shortcuts/shortcut-sound";


 export function localRedirect(path: string) {
@ -66,7 +68,7 @@ function getVideoPlayerFilterStyle() {
    return filters.join(' ');
 }

-function setupQuickSettingsBar() {
+function setupStreamSettingsDialog() {
    const isSafari = UserAgent.isSafari();

    const SETTINGS_UI = [
@ -94,13 +96,21 @@ function setupQuickSettingsBar() {
                    items: [
                        {
                            pref: PrefKey.AUDIO_VOLUME,
-                            label: t('volume'),
                            onChange: (e: any, value: number) => {
-                                STATES.currentStream.audioGainNode && (STATES.currentStream.audioGainNode.gain.value = value / 100);
+                                SoundShortcut.setGainNodeVolume(value);
                            },
                            params: {
                                disabled: !getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL),
                            },
+                            onMounted: ($elm: HTMLElement) => {
+                                const $range = $elm.querySelector('input[type=range') as HTMLInputElement;
+                                window.addEventListener(BxEvent.GAINNODE_VOLUME_CHANGED, e => {
+                                    $range.value = (e as any).volume;
+                                    BxEvent.dispatch($range, 'input', {
+                                            ignoreOnChange: true,
+                                        });
+                                });
+                            },
                        },
                    ],
                },
@ -112,32 +122,27 @@ function setupQuickSettingsBar() {
                    items: [
                        {
                            pref: PrefKey.VIDEO_RATIO,
-                            label: t('ratio'),
                            onChange: updateVideoPlayerCss,
                        },

                        {
                            pref: PrefKey.VIDEO_CLARITY,
-                            label: t('clarity'),
                            onChange: updateVideoPlayerCss,
                            unsupported: isSafari,
                        },

                        {
                            pref: PrefKey.VIDEO_SATURATION,
-                            label: t('saturation'),
                            onChange: updateVideoPlayerCss,
                        },

                        {
                            pref: PrefKey.VIDEO_CONTRAST,
-                            label: t('contrast'),
                            onChange: updateVideoPlayerCss,
                        },

                        {
                            pref: PrefKey.VIDEO_BRIGHTNESS,
-                            label: t('brightness'),
                            onChange: updateVideoPlayerCss,
                        },
                    ],
@ -156,21 +161,18 @@ function setupQuickSettingsBar() {
                    items: [
                        {
                            pref: PrefKey.CONTROLLER_ENABLE_VIBRATION,
-                            label: t('controller-vibration'),
                            unsupported: !VibrationManager.supportControllerVibration(),
                            onChange: VibrationManager.updateGlobalVars,
                        },

                        {
                            pref: PrefKey.CONTROLLER_DEVICE_VIBRATION,
-                            label: t('device-vibration'),
                            unsupported: !VibrationManager.supportDeviceVibration(),
                            onChange: VibrationManager.updateGlobalVars,
                        },

                        (VibrationManager.supportControllerVibration() || VibrationManager.supportDeviceVibration()) && {
                            pref: PrefKey.CONTROLLER_VIBRATION_INTENSITY,
-                            label: t('vibration-intensity'),
                            unsupported: !VibrationManager.supportDeviceVibration(),
                            onChange: VibrationManager.updateGlobalVars,
                        },
@ -239,54 +241,58 @@ function setupQuickSettingsBar() {
            ],
        },

+        {
+            icon: BxIcon.COMMAND,
+            group: 'shortcuts',
+            items: [
+                {
+                    group: 'shortcuts_controller',
+                    label: t('controller-shortcuts'),
+                    content: ControllerShortcut.renderSettings(),
+                },
+            ],
+        },
+
        {
            icon: BxIcon.STREAM_STATS,
            group: 'stats',
            items: [
                {
                    group: 'stats',
-                    label: t('menu-stream-stats'),
+                    label: t('stream-stats'),
                    help_url: 'https://better-xcloud.github.io/stream-stats/',
                    items: [
                        {
                            pref: PrefKey.STATS_SHOW_WHEN_PLAYING,
-                            label: t('show-stats-on-startup'),
                        },
                        {
                            pref: PrefKey.STATS_QUICK_GLANCE,
-                            label: '👀 ' + t('enable-quick-glance-mode'),
                            onChange: (e: InputEvent) => {
                                (e.target! as HTMLInputElement).checked ? StreamStats.quickGlanceSetup() : StreamStats.quickGlanceStop();
                            },
                        },
                        {
                            pref: PrefKey.STATS_ITEMS,
-                            label: t('stats'),
                            onChange: StreamStats.refreshStyles,
                        },
                        {
                            pref: PrefKey.STATS_POSITION,
-                            label: t('position'),
                            onChange: StreamStats.refreshStyles,
                        },
                        {
                            pref: PrefKey.STATS_TEXT_SIZE,
-                            label: t('text-size'),
                            onChange: StreamStats.refreshStyles,
                        },
                        {
                            pref: PrefKey.STATS_OPACITY,
-                            label: t('opacity'),
                            onChange: StreamStats.refreshStyles,
                        },
                        {
                            pref: PrefKey.STATS_TRANSPARENT,
-                            label: t('transparent-background'),
                            onChange: StreamStats.refreshStyles,
                        },
                        {
                            pref: PrefKey.STATS_CONDITIONAL_FORMATTING,
-                            label: t('conditional-formatting'),
                            onChange: StreamStats.refreshStyles,
                        },
                    ],
@ -298,9 +304,9 @@ function setupQuickSettingsBar() {
    let $tabs: HTMLElement;
    let $settings: HTMLElement;

-    const $wrapper = CE<HTMLElement>('div', {'class': 'bx-quick-settings-bar bx-gone'},
-            $tabs = CE<HTMLElement>('div', {'class': 'bx-quick-settings-tabs'}),
-            $settings = CE<HTMLElement>('div', {'class': 'bx-quick-settings-tab-contents'}),
+    const $wrapper = CE<HTMLElement>('div', {'class': 'bx-stream-settings-dialog bx-gone'},
+            $tabs = CE<HTMLElement>('div', {'class': 'bx-stream-settings-tabs'}),
+            $settings = CE<HTMLElement>('div', {'class': 'bx-stream-settings-tab-contents'}),
        );

    for (const settingTab of SETTINGS_UI) {
@ -375,13 +381,17 @@ function setupQuickSettingsBar() {
                    $control = toPrefElement(pref, setting.onChange, setting.params);
                }

-                const $content = CE<HTMLElement>('div', {'class': 'bx-quick-settings-row', 'data-type': settingGroup.group},
-                            CE('label', {for: `bx_setting_${pref}`},
-                            setting.label,
-                            setting.unsupported && CE<HTMLElement>('div', {'class': 'bx-quick-settings-bar-note'}, t('browser-unsupported-feature')),
-                        ),
-                        !setting.unsupported && $control,
-                    );
+                const label = Preferences.SETTINGS[pref as PrefKey]?.label || setting.label;
+                const note = Preferences.SETTINGS[pref as PrefKey]?.note || setting.note;
+
+                const $content = CE('div', {'class': 'bx-stream-settings-row', 'data-type': settingGroup.group},
+                    CE('label', {for: `bx_setting_${pref}`},
+                        label,
+                        note && CE('div', {'class': 'bx-stream-settings-dialog-note'}, note),
+                        setting.unsupported && CE('div', {'class': 'bx-stream-settings-dialog-note'}, t('browser-unsupported-feature')),
+                    ),
+                    !setting.unsupported && $control,
+                );

                $group.appendChild($content);

@ -475,8 +485,8 @@ function resizeVideoPlayer() {
        }

        // Prevent floating points
-        width = Math.floor(width);
-        height = Math.floor(height);
+        width = Math.min(parentRect.width, Math.ceil(width));
+        height = Math.min(parentRect.height, Math.ceil(height));

        // Update size
        $video.style.width = `${width}px`;
@ -490,11 +500,26 @@ function resizeVideoPlayer() {
 }


+function preloadFonts() {
+    const $link = CE<HTMLLinkElement>('link', {
+            rel: 'preload',
+            href: 'https://redphx.github.io/better-xcloud/fonts/promptfont.otf',
+            as: 'font',
+            type: 'font/otf',
+            crossorigin: '',
+        });
+
+    document.querySelector('head')?.appendChild($link);
+}
+
+
 export function setupStreamUi() {
    // Prevent initializing multiple times
-    if (!document.querySelector('.bx-quick-settings-bar')) {
+    if (!document.querySelector('.bx-stream-settings-dialog')) {
+        preloadFonts();
+
        window.addEventListener('resize', updateVideoPlayerCss);
-        setupQuickSettingsBar();
+        setupStreamSettingsDialog();
        StreamStats.render();

        Screenshot.setup();
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@ -38,8 +38,6 @@ type BxStates = {
        titleInfo: XcloudTitleInfo;

        $video: HTMLVideoElement | null;
-        $screenshotCanvas: HTMLCanvasElement | null;
-        screenshotCanvasContext: CanvasRenderingContext2D | null;

        peerConnection: RTCPeerConnection;
        audioContext: AudioContext | null;
@ -61,6 +59,7 @@ type XcloudTitleInfo = {
    details: {
        productId: string;
        supportedInputTypes: InputType[];
+        supportedTabs: any[];
        hasTouchSupport: boolean;
        hasFakeTouchSupport: boolean;
        hasMkbSupport: boolean;
@ -73,5 +72,26 @@ type XcloudTitleInfo = {
    };
 };

-declare module "*.svg";
-declare module "*.styl";
+declare module '*.js';
+declare module '*.svg';
+declare module '*.styl';
+
+type MkbMouseMove = {
+    movementX: number;
+    movementY: number;
+}
+
+type MkbMouseClick = {
+    key: {
+        code: string;
+        name: string;
+    } | null;
+    pressed: boolean;
+}
+
+type MkbMouseWheel = {
+    key: {
+        code: string;
+        name: string;
+    } | null;
+}
--- a/src/types/preferences.d.ts
+++ b/src/types/preferences.d.ts
@ -6,7 +6,7 @@ export type PreferenceSetting = {
    note?: string | HTMLElement;
    type?: SettingElementType;
    ready?: (setting: PreferenceSetting) => void;
-    migrate?: (savedPrefs: any, value: any) => {};
+    migrate?: (this: Preferences, savedPrefs: any, value: any) => void;
    min?: number;
    max?: number;
    steps?: number;
--- a/src/utils/bx-event.ts
+++ b/src/utils/bx-event.ts
@ -13,9 +13,6 @@ export enum BxEvent {
    STREAM_STOPPED = 'bx-stream-stopped',
    STREAM_ERROR_PAGE = 'bx-stream-error-page',

-    STREAM_MENU_SHOWN = 'bx-stream-menu-shown',
-    STREAM_MENU_HIDDEN = 'bx-stream-menu-hidden',
-
    STREAM_WEBRTC_CONNECTED = 'bx-stream-webrtc-connected',
    STREAM_WEBRTC_DISCONNECTED = 'bx-stream-webrtc-disconnected',

@ -34,6 +31,15 @@ export enum BxEvent {

    GAME_BAR_ACTION_ACTIVATED = 'bx-game-bar-action-activated',
    MICROPHONE_STATE_CHANGED = 'bx-microphone-state-changed',
+
+    CAPTURE_SCREENSHOT = 'bx-capture-screenshot',
+    GAINNODE_VOLUME_CHANGED = 'bx-gainnode-volume-changed',
+
+    // xCloud Dialog events
+    XCLOUD_DIALOG_SHOWN = 'bx-xcloud-dialog-shown',
+    XCLOUD_DIALOG_DISMISSED = 'bx-xcloud-dialog-dismissed',
+
+    XCLOUD_POLLING_MODE_CHANGED = 'bx-xcloud-polling-mode-changed',
 }

 export enum XcloudEvent {
@ -59,3 +65,5 @@ export namespace BxEvent {
        target.dispatchEvent(event);
    }
 }
+
+(window as any).BxEvent = BxEvent;
--- a/src/utils/bx-exposed.ts
+++ b/src/utils/bx-exposed.ts
@ -1,8 +1,9 @@
-import { GameBar } from "@modules/game-bar/game-bar";
+import { ControllerShortcut } from "@/modules/controller-shortcut";
 import { BxEvent } from "@utils/bx-event";
 import { STATES } from "@utils/global";
 import { getPref, PrefKey } from "@utils/preferences";
 import { UserAgent } from "@utils/user-agent";
+import { BxLogger } from "./bx-logger";

 export enum InputType {
    CONTROLLER = 'Controller',
@ -14,23 +15,6 @@ export enum InputType {
 }

 export const BxExposed = {
-    // Enable/disable Game Bar when playing/pausing
-    onPollingModeChanged: (mode: 'All' | 'None') => {
-        if (getPref(PrefKey.GAME_BAR_POSITION) === 'off') {
-            return;
-        }
-
-        const gameBar = GameBar.getInstance();
-
-        if (!STATES.isPlaying) {
-            gameBar.disable();
-            return;
-        }
-
-        // Toggle Game bar
-        mode !== 'None' ? gameBar.disable() : gameBar.enable();
-    },
-
    getTitleInfo: () => STATES.currentStream.titleInfo,

    modifyTitleInfo: (titleInfo: XcloudTitleInfo): XcloudTitleInfo => {
@ -64,11 +48,11 @@ export const BxExposed = {
                gamepadFound && (touchControllerAvailability = 'off');
            }

-
-
            if (touchControllerAvailability === 'off') {
                // Disable touch on all games (not native touch)
                supportedInputTypes = supportedInputTypes.filter(i => i !== InputType.CUSTOM_TOUCH_OVERLAY && i !== InputType.GENERIC_TOUCH);
+                // Empty TABs
+                titleInfo.details.supportedTabs = [];
            }

            // Pre-check supported input types
@ -106,10 +90,18 @@ export const BxExposed = {
            });
        }

-        const audioCtx = STATES.currentStream.audioContext!;
-        const source = audioCtx.createMediaStreamSource(audioStream);
+        try {
+            const audioCtx = STATES.currentStream.audioContext!;
+            const source = audioCtx.createMediaStreamSource(audioStream);

-        const gainNode = audioCtx.createGain();  // call monkey-patched createGain() in BxAudioContext
-        source.connect(gainNode).connect(audioCtx.destination);
-    }
+            const gainNode = audioCtx.createGain();  // call monkey-patched createGain() in BxAudioContext
+            source.connect(gainNode).connect(audioCtx.destination);
+        } catch (e) {
+            BxLogger.error('setupGainNode', e);
+            STATES.currentStream.audioGainNode = null;
+        }
+    },
+
+    handleControllerShortcut: ControllerShortcut.handle,
+    resetControllerShortcut: ControllerShortcut.reset,
 };
--- a/src/utils/bx-flags.ts
+++ b/src/utils/bx-flags.ts
@ -23,3 +23,5 @@ export const BX_FLAGS = Object.assign(DEFAULT_FLAGS, window.BX_FLAGS || {});
 try {
    delete window.BX_FLAGS;
 } catch (e) {}
+
+export const NATIVE_FETCH = window.fetch;
--- a/src/utils/bx-icon.ts
+++ b/src/utils/bx-icon.ts
@ -1,3 +1,4 @@
+import iconCommand from "@assets/svg/command.svg" with { type: "text" };
 import iconController from "@assets/svg/controller.svg" with { type: "text" };
 import iconCopy from "@assets/svg/copy.svg" with { type: "text" };
 import iconCursorText from "@assets/svg/cursor-text.svg" with { type: "text" };
@ -24,6 +25,7 @@ import iconMicrophoneMuted from "@assets/svg/microphone-slash.svg" with { type:
 export const BxIcon = {
    STREAM_SETTINGS: iconStreamSettings,
    STREAM_STATS: iconStreamStats,
+    COMMAND: iconCommand,
    CONTROLLER: iconController,
    DISPLAY: iconDisplay,
    MOUSE: iconMouse,
--- a/src/utils/monkey-patches.ts
+++ b/src/utils/monkey-patches.ts
@ -103,7 +103,7 @@ export function patchRtcPeerConnection() {
        try {
            const maxVideoBitrate = getPref(PrefKey.BITRATE_VIDEO_MAX);
            if (maxVideoBitrate > 0) {
-                arguments[0].sdp = patchSdpBitrate(arguments[0].sdp, maxVideoBitrate * 1000);
+                arguments[0].sdp = patchSdpBitrate(arguments[0].sdp, Math.round(maxVideoBitrate / 1000));
            }
        } catch (e) {
            BxLogger.error('setLocalDescription', e);
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@ -1,5 +1,5 @@
 import { BxEvent } from "@utils/bx-event";
-import { BX_FLAGS } from "@utils/bx-flags";
+import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
 import { LoadingScreen } from "@modules/loading-screen";
 import { PrefKey, getPref } from "@utils/preferences";
 import { RemotePlay } from "@modules/remote-play";
@ -11,8 +11,6 @@ import { GamePassCloudGallery } from "./gamepass-gallery";
 import { InputType } from "./bx-exposed";
 import { UserAgent } from "./user-agent";

-export const NATIVE_FETCH = window.fetch;
-
 enum RequestType {
    XCLOUD = 'xcloud',
    XHOME = 'xhome',
--- a/src/utils/preferences.ts
+++ b/src/utils/preferences.ts
@ -4,7 +4,7 @@ import { SettingElement, SettingElementType } from "@utils/settings";
 import { UserAgentProfile } from "@utils/user-agent";
 import { StreamStat } from "@modules/stream/stream-stats";
 import type { PreferenceSetting, PreferenceSettings } from "@/types/preferences";
-import { STATES } from "@utils/global";
+import { AppInterface, STATES } from "@utils/global";

 export enum PrefKey {
    LAST_UPDATE_CHECK = 'version_last_check',
@ -325,21 +325,32 @@ export class Preferences {
            note: '⚠️ ' + t('unexpected-behavior'),
            default: 0,
            min: 0,
-            max: 14,
-            steps: 1,
+            max: 14 * 1024 * 1000,
+            steps: 100 * 1024,
            params: {
-                suffix: ' Mb/s',
-                exactTicks: 5,
+                exactTicks:  5 * 1024 * 1000,
                customTextValue: (value: any) => {
                    value = parseInt(value);

                    if (value === 0) {
                        return t('unlimited');
+                    } else {
+                        return (value / (1024 * 1000)).toFixed(1) + ' Mb/s';
                    }

                    return null;
                },
            },
+            migrate: function(savedPrefs: any, value: any) {
+                try {
+                    value = parseInt(value);
+                    if (value !== 0 && value < 100) {
+                        value *= 1024 * 1000;
+                    }
+                    this.set(PrefKey.BITRATE_VIDEO_MAX, value, true);
+                    savedPrefs[PrefKey.BITRATE_VIDEO_MAX] = value;
+                } catch (e) {}
+            },
        },

        [PrefKey.GAME_BAR_POSITION]: {
@ -373,10 +384,12 @@ export class Preferences {
        },

        [PrefKey.CONTROLLER_ENABLE_VIBRATION]: {
+            label: t('controller-vibration'),
            default: true,
        },

        [PrefKey.CONTROLLER_DEVICE_VIBRATION]: {
+            label: t('device-vibration'),
            default: 'off',
            options: {
                on: t('on'),
@ -386,6 +399,7 @@ export class Preferences {
        },

        [PrefKey.CONTROLLER_VIBRATION_INTENSITY]: {
+            label: t('vibration-intensity'),
            type: SettingElementType.NUMBER_STEPPER,
            default: 100,
            min: 0,
@ -402,7 +416,7 @@ export class Preferences {
            default: false,
            unsupported: ((): string | boolean => {
                const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
-                return userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
+                return !AppInterface && userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
            })(),
            ready: (setting: PreferenceSetting) => {
                let note;
@ -501,6 +515,7 @@ export class Preferences {
            },
        },
        [PrefKey.VIDEO_CLARITY]: {
+            label: t('clarity'),
            type: SettingElementType.NUMBER_STEPPER,
            default: 0,
            min: 0,
@ -510,6 +525,8 @@ export class Preferences {
            },
        },
        [PrefKey.VIDEO_RATIO]: {
+            label: t('ratio'),
+            note: t('stretch-note'),
            default: '16:9',
            options: {
                '16:9': '16:9',
@ -523,6 +540,7 @@ export class Preferences {
            },
        },
        [PrefKey.VIDEO_SATURATION]: {
+            label: t('saturation'),
            type: SettingElementType.NUMBER_STEPPER,
            default: 100,
            min: 50,
@ -533,6 +551,7 @@ export class Preferences {
            },
        },
        [PrefKey.VIDEO_CONTRAST]: {
+            label: t('contrast'),
            type: SettingElementType.NUMBER_STEPPER,
            default: 100,
            min: 50,
@ -543,6 +562,7 @@ export class Preferences {
            },
        },
        [PrefKey.VIDEO_BRIGHTNESS]: {
+            label: t('brightness'),
            type: SettingElementType.NUMBER_STEPPER,
            default: 100,
            min: 50,
@ -562,6 +582,7 @@ export class Preferences {
            default: false,
        },
        [PrefKey.AUDIO_VOLUME]: {
+            label: t('volume'),
            type: SettingElementType.NUMBER_STEPPER,
            default: 100,
            min: 0,
@ -574,6 +595,7 @@ export class Preferences {


        [PrefKey.STATS_ITEMS]: {
+            label: t('stats'),
            default: [StreamStat.PING, StreamStat.FPS, StreamStat.BITRATE, StreamStat.DECODE_TIME, StreamStat.PACKETS_LOST, StreamStat.FRAMES_LOST],
            multipleOptions: {
                [StreamStat.PING]: `${StreamStat.PING.toUpperCase()}: ${t('stat-ping')}`,
@ -588,12 +610,15 @@ export class Preferences {
            },
        },
        [PrefKey.STATS_SHOW_WHEN_PLAYING]: {
+            label: t('show-stats-on-startup'),
            default: false,
        },
        [PrefKey.STATS_QUICK_GLANCE]: {
+            label: '👀 ' + t('enable-quick-glance-mode'),
            default: true,
        },
        [PrefKey.STATS_POSITION]: {
+            label: t('position'),
            default: 'top-right',
            options: {
                'top-left': t('top-left'),
@ -602,6 +627,7 @@ export class Preferences {
            },
        },
        [PrefKey.STATS_TEXT_SIZE]: {
+            label: t('text-size'),
            default: '0.9rem',
            options: {
                '0.9rem': t('small'),
@ -610,9 +636,11 @@ export class Preferences {
            },
        },
        [PrefKey.STATS_TRANSPARENT]: {
+            label: t('transparent-background'),
            default: false,
        },
        [PrefKey.STATS_OPACITY]: {
+            label: t('opacity'),
            type:  SettingElementType.NUMBER_STEPPER,
            default: 80,
            min: 50,
@ -623,6 +651,7 @@ export class Preferences {
            },
        },
        [PrefKey.STATS_CONDITIONAL_FORMATTING]: {
+            label: t('conditional-formatting'),
            default: false,
        },

@ -671,11 +700,12 @@ export class Preferences {

        for (let settingId in Preferences.SETTINGS) {
            const setting = Preferences.SETTINGS[settingId];
-            setting.ready && setting.ready.call(this, setting);

            if (setting.migrate && settingId in savedPrefs) {
                setting.migrate.call(this, savedPrefs, savedPrefs[settingId]);
            }
+
+            setting.ready && setting.ready.call(this, setting);
        }

        for (let settingId in Preferences.SETTINGS) {
@ -686,7 +716,7 @@ export class Preferences {
                continue;
            }

-            // Ignore deprecated settings
+            // Ignore deprecated/migrated settings
            if (setting.migrate) {
                continue;
            }
@ -753,11 +783,13 @@ export class Preferences {
        return this.#prefs[key];
    }

-    set(key: PrefKey, value: any) {
+    set(key: PrefKey, value: any, skipSave?: boolean): any {
        value = this.#validateValue(key, value);

        this.#prefs[key] = value;
-        this.#updateStorage();
+        !skipSave && this.#updateStorage();
+
+        return value;
    }

    #updateStorage() {
--- a/src/utils/prompt-font.ts
+++ b/src/utils/prompt-font.ts
@ -0,0 +1,32 @@
+export enum PrompFont {
+    A = '⇓',
+    B = '⇒',
+    X = '⇐',
+    Y = '⇑',
+
+    LB = '↘',
+    RB = '↙',
+    LT = '↖',
+    RT = '↗',
+
+    SELECT = '⇺',
+    START = '⇻',
+    HOME = '',
+
+    UP = '≻',
+    DOWN = '≽',
+    LEFT = '≺',
+    RIGHT = '≼',
+
+    L3 = '↺',
+    LS_UP = '↾',
+    LS_DOWN = '⇂',
+    LS_LEFT = '↼',
+    LS_RIGHT = '⇀',
+
+    R3 = '↻',
+    RS_UP = '↿',
+    RS_DOWN = '⇃',
+    RS_LEFT = '↽',
+    RS_RIGHT = '⇁',
+}
--- a/src/utils/screenshot.ts
+++ b/src/utils/screenshot.ts
@ -3,21 +3,24 @@ import { CE } from "./html";


 export class Screenshot {
-    static setup() {
-        const currentStream = STATES.currentStream;
-        if (!currentStream.$screenshotCanvas) {
-            currentStream.$screenshotCanvas = CE<HTMLCanvasElement>('canvas', {'class': 'bx-gone'});
+    static #$canvas: HTMLCanvasElement;
+    static #canvasContext: CanvasRenderingContext2D;

-            currentStream.screenshotCanvasContext = currentStream.$screenshotCanvas.getContext('2d', {
-                alpha: false,
-                willReadFrequently: false,
-            });
+    static setup() {
+        if (Screenshot.#$canvas) {
+            return;
        }
-        // document.documentElement.appendChild(currentStream.$screenshotCanvas!);
+
+        Screenshot.#$canvas = CE<HTMLCanvasElement>('canvas', {'class': 'bx-gone'});
+
+        Screenshot.#canvasContext = Screenshot.#$canvas.getContext('2d', {
+            alpha: false,
+            willReadFrequently: false,
+        })!;
    }

    static updateCanvasSize(width: number, height: number) {
-        const $canvas = STATES.currentStream.$screenshotCanvas;
+        const $canvas = Screenshot.#$canvas;
        if ($canvas) {
            $canvas.width = width;
            $canvas.height = height;
@ -25,7 +28,7 @@ export class Screenshot {
    }

    static updateCanvasFilters(filters: string) {
-        STATES.currentStream.screenshotCanvasContext && (STATES.currentStream.screenshotCanvasContext.filter = filters);
+        Screenshot.#canvasContext.filter = filters;
    }

    private static onAnimationEnd(e: Event) {
@ -35,7 +38,7 @@ export class Screenshot {
    static takeScreenshot(callback?: any) {
        const currentStream = STATES.currentStream;
        const $video = currentStream.$video;
-        const $canvas = currentStream.$screenshotCanvas;
+        const $canvas = Screenshot.#$canvas;
        if (!$video || !$canvas) {
            return;
        }
@ -43,7 +46,7 @@ export class Screenshot {
        $video.parentElement?.addEventListener('animationend', this.onAnimationEnd);
        $video.parentElement?.classList.add('bx-taking-screenshot');

-        const canvasContext = currentStream.screenshotCanvasContext!;
+        const canvasContext = Screenshot.#canvasContext;
        canvasContext.drawImage($video, 0, 0, $canvas.width, $canvas.height);

        // Get data URL and pass to parent app
--- a/src/utils/settings.ts
+++ b/src/utils/settings.ts
@ -183,7 +183,7 @@ export class SettingElement {
            $range.addEventListener('input', e => {
                value = parseInt((e.target as HTMLInputElement).value);
                $text.textContent = renderTextValue(value);
-                onChange && onChange(e, value);
+                !(e as any).ignoreOnChange && onChange && onChange(e, value);
            });
            $wrapper.appendChild($range);

--- a/src/utils/toast.ts
+++ b/src/utils/toast.ts
@ -15,7 +15,7 @@ export class Toast {
    static #timeout?: number | null;
    static #DURATION = 3000;

-    static show(msg: string, status?: string, options: Partial<ToastOptions>={}) {
+    static show(msg: string, status?: string, options: Partial<ToastOptions> = {}) {
        options = options || {};

        const args = Array.from(arguments) as [string, string, ToastOptions];
@ -43,7 +43,7 @@ export class Toast {
        // Get values from item
        const [msg, status, options] = Toast.#stack.shift()!;

-        if (options.html) {
+        if (options && options.html) {
            Toast.#$msg.innerHTML = msg;
        } else {
            Toast.#$msg.textContent = msg;
--- a/src/utils/translation.ts
+++ b/src/utils/translation.ts
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@ -1,6 +1,7 @@
 import { PrefKey, getPref, setPref } from "@utils/preferences";
 import { AppInterface, SCRIPT_VERSION } from "@utils/global";
 import { UserAgent } from "@utils/user-agent";
+import { Translations } from "./translation";

 /**
 * Check for update
@ -25,6 +26,9 @@ export function checkForUpdate() {
            setPref(PrefKey.LATEST_VERSION, json.tag_name.substring(1));
            setPref(PrefKey.CURRENT_VERSION, SCRIPT_VERSION);
        });
+
+    // Update translations
+    Translations.updateTranslations(currentVersion === SCRIPT_VERSION);
 }


@ -61,3 +65,28 @@ export function hashCode(str: string): number {

    return hash;
 }
+
+
+export function renderString(str: string, obj: any){
+    return str.replace(/\$\{.+?\}/g, match => {
+        const key = match.substring(2, match.length - 1);
+        if (key in obj) {
+            return obj[key];
+        }
+
+        return match;
+    });
+}
+
+
+export function ceilToNearest(value: number, interval: number): number {
+    return Math.ceil(value / interval) * interval;
+}
+
+export function floorToNearest(value: number, interval: number): number {
+    return Math.floor(value / interval) * interval;
+}
+
+export function roundToNearest(value: number, interval: number): number {
+    return Math.round(value / interval) * interval;
+}
Author	SHA1	Message	Date
redphx	1f632db6b4	Bump version to 4.6.2	2024-05-30 17:24:50 +07:00
redphx	c07e3297ca	Update better-xcloud.user.js	2024-05-30 17:22:19 +07:00
redphx	5e43915ff7	Add a Disable button in the MKB dialog	2024-05-30 17:22:06 +07:00
redphx	e21375821d	Update better-xcloud.user.js	2024-05-30 16:46:56 +07:00
redphx	6438e533d6	Hide rocket animation in Smart TV profile	2024-05-30 16:46:48 +07:00
redphx	e9671cbe5d	Fix video not being full screen (#415 )	2024-05-30 16:28:05 +07:00
redphx	b99ec65cc9	Update better-xcloud.user.js	2024-05-30 09:34:47 +07:00
redphx	addcf56abf	Minor fix	2024-05-30 09:22:04 +07:00
redphx	db17bda673	Bump version to 4.6.1	2024-05-30 07:09:39 +07:00
redphx	0a60119c3b	Update better-xcloud.user.js	2024-05-30 07:09:14 +07:00
redphx	ef14c78941	Fix settings being reset after refreshing page	2024-05-30 07:04:01 +07:00
redphx	f2dc102996	Update better-xcloud.user.js	2024-05-29 20:19:43 +07:00
redphx	02db103a72	Fix pink border when using Clarity feature in Logitech G Cloud	2024-05-29 20:19:36 +07:00
redphx	f291047b64	Update better-xcloud.user.js	2024-05-29 20:09:22 +07:00
redphx	5866644673	Clear TABs when disabling touch control	2024-05-29 20:09:20 +07:00
redphx	5baad2d89a	Bump version to 4.6.0	2024-05-29 17:41:27 +07:00
redphx	381f3fb679	Update better-xcloud.user.js	2024-05-29 17:29:12 +07:00
redphx	0f48cb891f	Support emulated MKB in Android app commit ad365d4ee854971122f0e8cb9157ed44b3aac0d8 Author: redphx <96280+redphx@users.noreply.github.com> Date: Wed May 29 17:19:57 2024 +0700 Fix not able to reconnect to WebSocket server when switching game commit ca9369318d4cbb831650e8ca631e7997dc7706cb Author: redphx <96280+redphx@users.noreply.github.com> Date: Wed May 29 17:19:23 2024 +0700 Stop emulated MKB when losing pointer capture commit 8cca1a0554c46b8f61455e79d5b16f1dff9a8014 Author: redphx <96280+redphx@users.noreply.github.com> Date: Wed May 29 17:17:42 2024 +0700 Allow fine-tuning maximum video bitrate commit 763d414d560d9d2aa6710fd60e3f80bf43a534d6 Author: redphx <96280+redphx@users.noreply.github.com> Date: Wed May 29 08:13:56 2024 +0700 Update mouse settings commit d65c5ab4e4a33ed8ad13acf0a15c4bb5ace870eb Author: redphx <96280+redphx@users.noreply.github.com> Date: Wed May 29 08:10:49 2024 +0700 Increase MKB dialog's bg opacity commit 3e72f2ad2700737c8148ef47629528954a606578 Author: redphx <96280+redphx@users.noreply.github.com> Date: Wed May 29 08:02:57 2024 +0700 Show/hide MKB dialog properly commit e7786f36508e3aa843604d9886861930bada5d60 Author: redphx <96280+redphx@users.noreply.github.com> Date: Wed May 29 07:47:21 2024 +0700 Fix connecting to WebSocket server when it's not ready commit 512d8c227a057e5c0399bf128bc1c52a88fcf853 Author: redphx <96280+redphx@users.noreply.github.com> Date: Wed May 29 07:18:06 2024 +0700 Fix arrow keys not working in Android app commit 0ce90f47f37d057d5a4fab0003e2bec8960d1eee Author: redphx <96280+redphx@users.noreply.github.com> Date: Tue May 28 17:36:56 2024 +0700 Set mouse's default sensitivities to 50 commit 16eb48660dd44497e16ca22343a880d9a2e53a30 Author: redphx <96280+redphx@users.noreply.github.com> Date: Tue May 28 17:33:37 2024 +0700 Allow emulated MKB feature in Android app commit c3d0e64f8502e19cd4f167fea4cdbdfc2e14b65e Author: redphx <96280+redphx@users.noreply.github.com> Date: Tue May 28 17:32:49 2024 +0700 Remove stick decay settings commit d289d2a0dea61a440c1bc6b9392920b8e6ab6298 Author: redphx <96280+redphx@users.noreply.github.com> Date: Tue May 28 17:21:39 2024 +0700 Remove stick decaying feature commit 76bd001d98bac53f757f4ae793b2850aad055007 Author: redphx <96280+redphx@users.noreply.github.com> Date: Tue May 28 17:21:14 2024 +0700 Update data structure commit c5d3c87da9e6624ebefb288f6d7c8d06dc00916b Author: redphx <96280+redphx@users.noreply.github.com> Date: Tue May 28 08:14:27 2024 +0700 Fix not toggling the MKB feature correctly commit 9615535cf0e4d4372e201aefb6f1231ddbc22536 Author: redphx <96280+redphx@users.noreply.github.com> Date: Mon May 27 20:51:57 2024 +0700 Handle mouse data from the app	2024-05-29 17:28:39 +07:00
redphx	228c2ad008	Update better-xcloud.user.js	2024-05-28 17:48:07 +07:00
redphx	5604664b66	Bump version to 4.5.0	2024-05-26 15:45:29 +07:00
redphx	beb02796b3	Update better-xcloud.user.js	2024-05-26 15:18:06 +07:00
redphx	9041f70dbd	Bug fixes	2024-05-26 15:18:04 +07:00
redphx	c13845ffe1	Update better-xcloud.user.js	2024-05-26 15:10:11 +07:00
redphx	0d0ecca155	Update translations when version changed	2024-05-26 15:05:30 +07:00
redphx	c09bd9be83	Update better-xcloud.user.js	2024-05-26 11:59:53 +07:00
redphx	15a2c67703	Observe root dialog	2024-05-26 11:59:38 +07:00
redphx	9166761780	Rename "Quick Bar" to "Stream Settings dialog"	2024-05-26 11:42:19 +07:00
redphx	ac37fe05bc	Show note for Video Ratio setting	2024-05-26 11:16:52 +07:00
redphx	030791d9c4	Format	2024-05-26 10:54:32 +07:00
redphx	5523be1b7f	Update better-xcloud.user.js	2024-05-26 07:46:13 +07:00
redphx	2a9b070373	Minor optimization for the shortcuts feature	2024-05-26 07:46:09 +07:00
redphx	8ba305af2b	Rearrange shortcut buttons	2024-05-26 07:40:30 +07:00
redphx	29813fbaf2	Update better-xcloud.user.js	2024-05-25 18:55:44 +07:00
redphx	02f33875e4	Add L3 & R3 buttons and rearrange buttons	2024-05-25 18:55:33 +07:00
redphx	474f655707	Update better-xcloud.user.js	2024-05-25 18:10:40 +07:00
redphx	78021020ce	Support device shortcuts	2024-05-25 18:10:22 +07:00
redphx	7c206bd079	Rearrange shortcuts	2024-05-25 15:09:51 +07:00
redphx	298a40d156	Update better-xcloud.user.js	2024-05-25 14:55:46 +07:00
redphx	498123af85	Add notes to Shortcuts UI	2024-05-25 14:55:24 +07:00
redphx	579dc6bf40	Update better-xcloud.user.js	2024-05-25 11:41:10 +07:00
redphx	17e02e5b32	Improve shortcut actions selection box	2024-05-25 11:41:02 +07:00
redphx	bf135d34d1	Update better-xcloud.user.js	2024-05-25 10:29:14 +07:00
redphx	9fec033173	Add shortcut to mute/unmute sound	2024-05-25 10:28:59 +07:00
redphx	78d74cfd23	Set audioGainNode to null when couldn't setup GainNode	2024-05-25 10:09:33 +07:00
redphx	3418cdd666	Update better-xcloud.user.js	2024-05-25 09:55:24 +07:00
redphx	567770c86e	Fix crashing with GainNode when the stream has no sound	2024-05-25 09:55:20 +07:00
redphx	18027ed1c5	Update better-xcloud.user.js	2024-05-25 09:52:25 +07:00
redphx	dcbae39042	Add shortcuts to control stream's volume	2024-05-25 09:50:41 +07:00
redphx	90df5d655f	Move MicrophoneState to shortcut-microphone	2024-05-25 07:51:51 +07:00
redphx	774a822e69	Clean up	2024-05-25 07:44:25 +07:00
redphx	5623f3f02f	Use different arrow symbol in action selection box	2024-05-25 07:43:55 +07:00
redphx	4eda413da6	Update translations	2024-05-25 07:43:32 +07:00
redphx	f5b4bd2f40	Update better-xcloud.user.js	2024-05-24 20:10:29 +07:00
redphx	a702d29f22	Try to fix problem with Dualsense controller	2024-05-24 20:10:23 +07:00
redphx	71576439fd	Update better-xcloud.user.js	2024-05-24 18:11:02 +07:00
redphx	07c1757237	Squashed commit of the following: commit 2faed50e5c2165647e389d794de673038d56241e Author: redphx <96280+redphx@users.noreply.github.com> Date: Fri May 24 18:09:25 2024 +0700 Make shortcuts work with controller commit b8f6c503ba7969de3a232644d3f6b53532a4b7bb Author: redphx <96280+redphx@users.noreply.github.com> Date: Fri May 24 17:01:15 2024 +0700 Update translations commit 6f6c0899e5a09cd5534e06a9e272bf78c74536dc Author: redphx <96280+redphx@users.noreply.github.com> Date: Fri May 24 17:00:50 2024 +0700 Preload PrompFont commit 1bf0f2b9dae77890d35091bed970b942c4d61fbc Author: redphx <96280+redphx@users.noreply.github.com> Date: Fri May 24 07:08:05 2024 +0700 Render Controller shortcuts settings commit 2f24965c73a941be2ebc8a3509dc540a47b4e38d Author: redphx <96280+redphx@users.noreply.github.com> Date: Thu May 23 17:21:55 2024 +0700 Fix not able to capture screenshot after switching games commit 6ac791e2dfb17215ee82d449047d0cd11d185c42 Author: redphx <96280+redphx@users.noreply.github.com> Date: Thu May 23 17:11:19 2024 +0700 Hijack the Home button	2024-05-24 18:10:38 +07:00
redphx	22e29e1d92	Move patchPollGamepads code to external file	2024-05-23 06:55:41 +07:00
redphx	e18e05589a	Move some patch code to external files	2024-05-23 06:22:25 +07:00
redphx	88df490c50	Update better-xcloud.user.js	2024-05-22 18:38:55 +07:00
redphx	e2e2322d94	Minor fixes	2024-05-22 18:38:51 +07:00
redphx	a4a1743062	Update better-xcloud.user.js	2024-05-22 18:23:08 +07:00
redphx	a3600dfd75	Fix not downloading translations when needed	2024-05-22 18:19:27 +07:00
redphx	c4ad50906e	Move foreign translations to external files	2024-05-22 18:10:53 +07:00
redphx	a87b26b077	Create config.yml	2024-05-22 06:50:59 +07:00
redphx	6874d64ceb	Update better-xcloud.user.js	2024-05-21 16:52:06 +07:00
redphx	a376f443ef	Map the Share button on Xbox Series controller with the capturing screenshot feature	2024-05-21 16:51:55 +07:00
redphx	3bfe11280e	Update 01-bug-report.yml	2024-05-21 06:28:44 +07:00
redphx	b6a3e56d9f	Bump version to 4.4.0	2024-05-19 17:58:06 +07:00