Bump version to 5.8.3

This reverts commit 91ab57fa29.

.github/ISSUE_TEMPLATE/01-bug-report.yml

@@ -4,12 +4,28 @@ title: "[Bug] "
 labels:
   - bug
 body:
-  - type: markdown
+  - type: checkboxes
+    id: checklist
     attributes:
-      value: |
+      label: Checklist
-        Please fill out the following information to help us resolve the issue.
+      options:
-        > [!warning]
+        - label: I will only use English in my report.
-        > Only use English. Any other languages will be deleted.
+          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: checkboxes
+    id: questions
+    attributes:
+      label: Questions
+      options:
+        - label: xCloud officially supports my country/region.
+          required: false
+        - label: "The bug doesn't happen when I disable Better xCloud script."
+          required: false
+        - label: "The bug didn't happen in previous Better xCloud version (name which one)."
+          required: false
   - type: dropdown
     id: device_type
     attributes:
@@ -24,40 +40,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:
+      placeholder: "e.g., Android 14"
-        - 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
     validations:
       required: true
   - type: input
     id: browser_version
     attributes:
-      label: "Browser Version"
+      label: "Android app/Browser Version"
-      description: "What is the version of the browser?"
+      description: "What is the name and version of the browser/Android app?"
-      placeholder: "e.g., 122.0"
+      placeholder: "e.g., Chrome 124.0, Android app 0.15.0"
     validations:
       required: true
   - type: input
@@ -68,12 +72,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
@@ -81,3 +93,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

.github/ISSUE_TEMPLATE/02-feature-request.yml

@@ -14,41 +14,12 @@ body:
     id: device_type
     attributes:
       label: Device
-      description: "Which device are you using?"
+      description: "Which device type is this feature for?"
       options:
+        - All devices
         - Phone/Tablet
-        - Laptop
         - Desktop
         - TV
-        - Other
-      multiple: false
-    validations:
-      required: true
-  - type: dropdown
-    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
     validations:
       required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "files.readonlyInclude": {
+    "dist/**/*": true
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,15 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "typescript",
+      "tsconfig": "tsconfig.json",
+      "option": "watch",
+      "problemMatcher": [
+        "$tsc-watch"
+      ],
+      "group": "build",
+      "label": "tsc: watch - tsconfig.json"
+    }
+  ]
+}

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) 2023 redphx
+Copyright (c) 2023 Advanced Micro Devices, Inc.
 Copyright (c) 2020 Phosphor Icons
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

README.md

@@ -5,7 +5,9 @@ Improve Xbox Cloud Gaming (xCloud) experience on [xbox.com/play](https://www.xbo
 > The Android app is in development at [redphx/better-xcloud-android](https://github.com/redphx/better-xcloud-android)
 
 > [!IMPORTANT]
-> I don't accept pull requests at the moment (except PR for custom touch controls)
+> I only accept pull requests for:
+> - Custom touch controls
+> - Bug fixes
 
 **Supported platforms:**  
 - Windows
@@ -21,50 +23,15 @@ If you like this project please give it a 🌟. Thank you 🙏.
 [![Total downloads](https://img.shields.io/github/downloads/redphx/better-xcloud/total?color=%23e15f2c)](https://github.com/redphx/better-xcloud/releases) 
 [![Total stars](https://img.shields.io/github/stars/redphx/better-xcloud?color=%23cca400)](https://github.com/redphx/better-xcloud/stargazers)  
 
+## How to install
+Visit the [home page](https://better-xcloud.github.io) to know how to install Better xCloud on your device.
+
 ## Full documentations
-- For the full details please visit: https://better-xcloud.github.io  
+- For the full details please visit: [**better-xcloud.github.io**](https://better-xcloud.github.io)  
 - [Demo video](https://youtu.be/hyp69Jrb2sQ)
 
 ⚠️ Please DO NOT report **Better xCloud**'s bugs on [/r/xcloud subreddit](https://reddit.com/r/xcloud/). Report bugs in [Issues](https://github.com/redphx/better-xcloud/issues) or [Telegram channel](https://t.me/betterxcloud) instead.
 
-## Table of Contents
-- [**How to install**](#how-to-install)
-- [**Features**](#features)
-- [**Donation**](#donation)
-- [**Acknowledgements**](#acknowledgements)
-- [**Disclaimers**](#disclaimers)
-
-## How to install
-Visit [this page](https://better-xcloud.github.io/browsers) to know how to install Better xCloud on your device.
-
-## Features
-
-<img width="400" alt="Settings UI" src="https://github.com/redphx/better-xcloud/assets/96280/4bec2d62-31df-499c-9aad-2485626b6925">
-<br>
-<img width="400" alt="Remote Play dialog" src="https://github.com/redphx/better-xcloud/assets/96280/daf7f698-a228-4f9c-8f23-9669e061a64c">
-<br>
-<img width="600" alt="Stream HUD" src="https://github.com/redphx/better-xcloud/assets/96280/51bdb96c-79ab-402f-902a-a9e6229973b2">
-<br>
-<img width="600" alt="Stream settings" src="https://github.com/redphx/better-xcloud/assets/96280/ed513cb3-6e6c-4e8e-9e06-c62e71e41c90">
-<br>
-<img width="600" alt="Remapper" src="https://github.com/redphx/better-xcloud/assets/96280/f2e2bc51-f673-4b24-b127-c7169b86462b">
-
-
-&nbsp;  
-  
-**Demo video:** [https://youtu.be/oDr5Eddp55E  ](https://youtu.be/AYb-EUcz72U)  
-- **🔥 Totally free and open-source**
-- **🔥 Allow playing with [Mouse & Keyboard](https://better-xcloud.github.io/mouse-and-keyboard)**
-- **🔥 Enable [Remote Play](https://better-xcloud.github.io/remote-play) support**  
-  > 1080p resolution and can stream Xbox 360 games.  
-- **🔥 [Improve visual quality](https://better-xcloud.github.io/ingame-features/#improve-streams-clarity) of the stream**  
-  > Similar to (but not as good as) the "Clarity Boost" of xCloud on Edge browser. [Demo video](https://youtu.be/ZhW2choAHUs). 
-- **🔥 Show [Stream stats](https://better-xcloud.github.io/stream-stats)**  
-- **🔥 [Screenshot capture](https://better-xcloud.github.io/screenshot-capture)**
-- **🔥 [Touch controller](https://better-xcloud.github.io/features/#touch-controller)**
-  > Enable touch controller support for all games.
-- [And more...](https://better-xcloud.github.io/features/)
-
 ## Donation
 If you think this project is useful and want to support future developments, please consider making a donate via [my Ko-fi page](https://ko-fi.com/redphx).  
 Or you can give this project a star, that's also helpful.  

build.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+build_all () {
+    # Clear screen
+    printf "\033c"
+
+    # Build all variants
+    bun build.ts --version $1 --variant full
+    bun build.ts --version $1 --variant lite
+
+    # Wait for key
+    read -p ">> Press Enter to build again..."
+    build_all $1
+}
+
+build_all $1

build.ts

@@ -2,16 +2,24 @@
 import { readFile } from "node:fs/promises";
 import { parseArgs } from "node:util";
 import { sys } from "typescript";
+// @ts-ignore
 import txtScriptHeader from "./src/assets/header_script.txt" with { type: "text" };
+// @ts-ignore
+import txtScriptHeaderLite from "./src/assets/header_script.lite.txt" with { type: "text" };
+// @ts-ignore
 import txtMetaHeader from "./src/assets/header_meta.txt" with { type: "text" };
+import { assert } from "node:console";
+import { ESLint } from "eslint";
 
 enum BuildTarget {
-	ALL = 'all',
+    ALL = 'all',
-	ANDROID_APP = 'android-app',
+    ANDROID_APP = 'android-app',
-	MOBILE = 'mobile',
+    MOBILE = 'mobile',
-	WEBOS = 'webos',
+    WEBOS = 'webos',
 }
 
+type BuildVariant = 'full' | 'lite';
+
 const postProcess = (str: string): string => {
     // Unescape unicode charaters
     str = unescape((str.replace(/\\u/g, '%u')));
@@ -21,83 +29,205 @@ const postProcess = (str: string): string => {
     // Replace "globalThis." with "var";
     str = str.replaceAll('globalThis.', 'var ');
 
-	// Add ADDITIONAL CODE block
+    // Remove enum's inlining comments
-	str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
+    str = str.replaceAll(/ \/\* [A-Z0-9_]+ \*\//g, '');
+    str = str.replaceAll('/* @__PURE__ */ ', '');
+
+    // Remove comments from import
+    str = str.replaceAll(/\/\/ src.*\n/g, '');
+
+    // Add ADDITIONAL CODE block
+    str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
+
+    str = str.replaceAll('(e) => `', 'e => `');
+
+    // Simplify object definitions
+    // {[1]: "a"} => {1: "a"}
+    str = str.replaceAll(/\[(\d+)\]: /g, '$1: ');
+    // {["a"]: 1, ["b-c"]: 2} => {a: 1, "b-c": 2}
+    str = str.replaceAll(/\["([^"]+)"\]: /g, function(match, p1) {
+        if (p1.includes('-') || p1.match(/^\d/)) {
+            p1 = `"${p1}"`;
+        }
+
+        return p1 + ': ';
+    });
+
+    // Minify SVG import code
+    const svgMap = {}
+    str = str.replaceAll(/var ([\w_]+) = ("<svg.*?");\n\n/g, (match, p1, p2) => {
+        // Remove new lines in SVG
+        p2 = p2.replaceAll(/\\n*\s*/g, '');
+
+        svgMap[p1] = p2;
+        return '';
+    });
+
+    for (const name in svgMap) {
+        str = str.replace(`: ${name}`, `: ${svgMap[name]}`);
+    }
+
+    // Collapse empty brackets
+    str = str.replaceAll(/\{[\s\n]+\}/g, '{}');
+
+    // Collapse if/else blocks without curly braces
+    str = str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
+
+    // Remove blank lines
+    str = str.replaceAll(/\n([\s]*)\n/g, "\n");
+
+    // Minify WebGL shaders & JS strings
+    // Replace "\n     " with "\n"
+    str = str.replaceAll(/\\n+\s*/g, '\\n');
+    // Remove comment line
+    str = str.replaceAll(/\\n\/\/.*?(?=\\n)/g, '');
+
+    // Replace ${"time".toUpperCase()} with "TIME"
+    str = str.replaceAll(/\$\{"([^"]+)"\.toUpperCase\(\)\}/g, (match, p1) => {
+        return p1.toUpperCase();
+    });
+
+    assert(str.includes('/* ADDITIONAL CODE */'));
+    assert(str.includes('window.BX_EXPOSED = BxExposed'));
+    assert(str.includes('window.BxEvent = BxEvent'));
+    assert(str.includes('window.BX_FETCH = window.fetch'));
 
     return str;
 }
 
-const build = async (target: BuildTarget, version: string, config: any={}) => {
+const build = async (target: BuildTarget, version: string, variant: BuildVariant, config: any={}) => {
-	console.log('-- Target:', target);
+    console.log('-- Target:', target);
-	const startTime = performance.now();
+    const startTime = performance.now();
 
-	let outputScriptName = 'better-xcloud';
+    let outputScriptName = 'better-xcloud';
-	if (target !== BuildTarget.ALL) {
+    if (target !== BuildTarget.ALL) {
-		outputScriptName += `.${target}`;
+        outputScriptName += `.${target}`;
-	}
+    }
-	let outputMetaName = outputScriptName;
-	outputScriptName += '.user.js';
-	outputMetaName += '.meta.js';
 
-	const outDir = './dist';
+    if (variant !== 'full') {
+        outputScriptName += `.${variant}`;
+    }
 
-	let output = await Bun.build({
+    let outputMetaName = outputScriptName;
-		entrypoints: ['src/index.ts'],
+    outputScriptName += '.user.js';
-		outdir: outDir,
+    outputMetaName += '.meta.js';
-		naming: outputScriptName,
-		define: {
-			'Bun.env.BUILD_TARGET': JSON.stringify(target),
-			'Bun.env.SCRIPT_VERSION': JSON.stringify(version),
-		},
-	});
 
-	if (!output.success) {
+    const outDir = './dist';
-		console.log(output);
-		process.exit(1);
-	}
 
-	const {path} = output.outputs[0];
+    let output = await Bun.build({
-	// Get generated file
+        entrypoints: ['src/index.ts'],
-	let result = postProcess(await readFile(path, 'utf-8'));
+        outdir: outDir,
+        naming: outputScriptName,
+        minify: {
+            syntax: true,
+        },
+        define: {
+            'Bun.env.BUILD_TARGET': JSON.stringify(target),
+            'Bun.env.BUILD_VARIANT': JSON.stringify(variant),
+            'Bun.env.SCRIPT_VERSION': JSON.stringify(version),
+        },
+    });
 
-	// Replace [[VERSION]] with real value
+    if (!output.success) {
-	const scriptHeader = txtScriptHeader.replace('[[VERSION]]', version);
+        console.log(output);
+        process.exit(1);
+    }
 
-	// Save to script
+    const {path} = output.outputs[0];
-	await Bun.write(path, scriptHeader + result);
+    // Get generated file
-	console.log(`---- [${target}] done in ${performance.now() - startTime} ms`);
+    let result = postProcess(await readFile(path, 'utf-8'));
 
-	// Create meta file
+    // Replace [[VERSION]] with real value
-	await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
+    let scriptHeader: string;
+    if (variant === 'full') {
+        scriptHeader = txtScriptHeader;
+    } else {
+        scriptHeader = txtScriptHeaderLite;
+    }
+    scriptHeader = scriptHeader.replace('[[VERSION]]', version);
+
+    // Save to script
+    await Bun.write(path, scriptHeader + result);
+
+    // Create meta file (don't build if it's beta version)
+    if (!version.includes('beta') && variant === 'full') {
+        await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
+    }
+
+    // Check with ESLint
+    const eslint = new ESLint();
+    const results = await eslint.lintFiles([path]);
+    results[0].messages.forEach((msg: any) => {
+        console.error(`${path}#${msg.line}: ${msg.message}`);
+    });
+
+    console.log(`---- [${target}] done in ${performance.now() - startTime} ms`);
+    console.log(`---- [${target}] ${new Date()}`);
 }
 
 const buildTargets = [
-	BuildTarget.ALL,
+    BuildTarget.ALL,
-	// BuildTarget.ANDROID_APP,
+    // BuildTarget.ANDROID_APP,
-	// BuildTarget.MOBILE,
+    // BuildTarget.MOBILE,
-	// BuildTarget.WEBOS,
+    // BuildTarget.WEBOS,
 ];
 
 const { values, positionals } = parseArgs({
-	args: Bun.argv,
+    args: Bun.argv,
-	options: {
+    options: {
-	  version: {
+        version: {
-		type: 'string',
+            type: 'string',
+        },
 
-	  },
+        variant: {
-	},
+            type: 'string',
-	strict: true,
+            default: 'full',
-	allowPositionals: true,
+        },
-  });
+    },
+    strict: true,
+    allowPositionals: true,
+}) as {
+    values: {
+        version: string,
+        variant: BuildVariant,
+    },
+    positionals: string[],
+};
 
 if (!values['version']) {
-	console.log('Missing --version param');
+    console.log('Missing --version param');
-	sys.exit(-1);
+    sys.exit(-1);
 }
 
-console.log('Building: ', values['version']);
+if (values['variant'] !== 'full' && values['variant'] !== 'lite') {
-
+    console.log('--variant param must be either "full" or "lite"');
-const config = {};
+    sys.exit(-1);
-for (const target of buildTargets) {
-	await build(target, values['version'], config);
 }
+
+async function main() {
+    const config = {};
+    console.log(`Building: VERSION=${values['version']}, VARIANT=${values['variant']}`);
+    for (const target of buildTargets) {
+        await build(target, values['version']!!, values['variant'], config);
+    }
+
+    console.log('')
+    // console.log('\n** Press Enter to build or Esc to exit');
+}
+
+function onKeyPress(data: any) {
+    const keyCode = data[0];
+    if (keyCode === 13) {  // Enter key
+        main();
+    } else if (keyCode === 27) {  // Esc key
+        process.exit(0);
+    }
+}
+
+main();
+
+/*
+process.stdin.setRawMode(true);
+process.stdin.resume();
+process.stdin.on('data', onKeyPress);
+*/

dist/better-xcloud.meta.js

@@ -1,5 +1,5 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      4.0.0
+// @version      5.8.3
 // ==/UserScript==

eslint.config.mjs

@@ -0,0 +1,3 @@
+import compat from "eslint-plugin-compat";
+
+export default [compat.configs['flat/recommended']];

package.json

@@ -2,16 +2,22 @@
   "name": "better-xcloud",
   "module": "src/index.ts",
   "type": "module",
+  "sideEffects": false,
+  "browserslist": [
+    "Chrome >= 80"
+  ],
   "bin": {
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "latest",
+    "@types/bun": "^1.1.10",
-    "@types/node": "^20.12.7",
+    "@types/node": "^22.7.5",
-    "@types/stylus": "^0.48.42",
+    "@types/stylus": "^0.48.43",
+    "eslint": "^9.12.0",
+    "eslint-plugin-compat": "^6.0.1",
     "stylus": "^0.63.0"
   },
   "peerDependencies": {
-    "typescript": "^5.0.0"
+    "typescript": "^5.6.2"
   }
 }

scripts/custom-flags.user.js

@@ -0,0 +1,41 @@
+// ==UserScript==
+// @name         Better xCloud - Custom flags
+// @namespace    https://github.com/redphx
+// @version      1.0.0
+// @description  Customize Better xCloud script
+// @author       redphx
+// @license      MIT
+// @match        https://www.xbox.com/*/play*
+// @run-at       document-start
+// @grant        none
+// ==/UserScript==
+'use strict';
+
+/*
+Make sure this script is being loaded before the Better xCloud script.
+
+How to:
+1. Uninstall Better xCloud script.
+2. Install this script.
+3. Reinstall Better xCloud script. All your settings are still there.
+*/
+
+// Change this to `false` if you want to temporary disable the script
+const enabled = true;
+
+enabled && (window.BX_FLAGS = {
+    /*
+    Add titleId of the game(s) you want to add here.
+    Keep in mind: this method only works with some games.
+
+    Example:
+        - Flight Simulator has this link: /play/games/microsoft-flight-simulator-standard-40th-anniversa/9PMQDM08SNK9
+        - That means its titleId is "9PMQDM08SNK9"
+        - So it becomes:
+            ForceNativeMkbTitles: [
+                "9PMQDM08SNK9",
+            ],
+    */
+    ForceNativeMkbTitles: [
+    ],
+});

src/assets/css/button.styl

@@ -1,5 +1,10 @@
 .bx-button {
-    background-color: var(--bx-default-button-color);
+    --button-rgb: var(--bx-default-button-rgb);
+    --button-hover-rgb: var(--bx-default-button-hover-rgb);
+    --button-active-rgb: var(--bx-default-button-active-rgb);
+    --button-disabled-rgb: var(--bx-default-button-disabled-rgb);
+
+    background-color: unquote('rgb(var(--button-rgb))');
     user-select: none;
     -webkit-user-select: none;
     color: #fff;
@@ -14,87 +19,149 @@
     cursor: pointer;
     overflow: hidden;
 
+    &:not([disabled]):active {
+        background-color: unquote('rgb(var(--button-active-rgb))');
+    }
+
     &:focus {
         outline: none !important;
     }
 
-    &:hover, &.bx-focusable:focus {
+    &:not([disabled]):not(:active) {
-        background-color: var(--bx-default-button-hover-color);
+        &:hover, &.bx-focusable:focus {
+            background-color: unquote('rgb(var(--button-hover-rgb))');
+        }
     }
 
+
     &:disabled {
         cursor: default;
-        background-color: var(--bx-default-button-disabled-color);
+        background-color: unquote('rgb(var(--button-disabled-rgb))');
     }
 
     &.bx-ghost {
         background-color: transparent;
 
-        &:hover, &.bx-focusable:focus {
+        &:not([disabled]):not(:active) {
-            background-color: var(--bx-default-button-hover-color);
+            &:hover, &.bx-focusable:focus {
+                background-color: unquote('rgb(var(--button-hover-rgb))');
+            }
         }
     }
 
     &.bx-primary {
-        background-color: var(--bx-primary-button-color);
+        --button-rgb: var(--bx-primary-button-rgb);
 
-        &:hover, &.bx-focusable:focus {
+        &:not([disabled]):active {
-            background-color: var(--bx-primary-button-hover-color);
+            --button-active-rgb: var(--bx-primary-button-active-rgb);
+        }
+
+        &:not([disabled]):not(:active) {
+            &:hover, &.bx-focusable:focus {
+                --button-hover-rgb: var(--bx-primary-button-hover-rgb);
+            }
         }
 
         &:disabled {
-            background-color: var(--bx-primary-button-disabled-color);
+            --button-disabled-rgb: var(--bx-primary-button-disabled-rgb);
         }
     }
 
     &.bx-danger {
-        background-color: var(--bx-danger-button-color);
+        --button-rgb: var(--bx-danger-button-rgb);
 
-        &:hover, &.bx-focusable:focus {
+        &:not([disabled]):active {
-            background-color: var(--bx-danger-button-hover-color);
+            --button-active-rgb: var(--bx-danger-button-active-rgb);
+        }
+
+        &:not([disabled]):not(:active) {
+            &:hover, &.bx-focusable:focus {
+                --button-hover-rgb: var(--bx-danger-button-hover-rgb);
+            }
         }
 
         &:disabled {
-            background-color: var(--bx-danger-button-disabled-color);
+            --button-disabled-rgb: var(--bx-danger-button-disabled-rgb);
         }
     }
 
+    &.bx-frosted {
+        --button-alpha: 0.2;
+        background-color: unquote('rgba(var(--button-rgb), var(--button-alpha))');
+        backdrop-filter: blur(4px) brightness(1.5);
+
+        &:not([disabled]):not(:active) {
+            &:hover, &.bx-focusable:focus {
+                background-color: unquote('rgba(var(--button-hover-rgb), var(--button-alpha))');
+            }
+        }
+    }
+
+    &.bx-drop-shadow {
+        box-shadow: 0 0 4px #00000080;
+    }
+
+    &.bx-tall {
+        height: calc(var(--bx-button-height) * 1.5) !important;
+    }
+
+    &.bx-circular {
+        border-radius: var(--bx-button-height);
+        height: var(--bx-button-height);
+    }
+
     svg {
         display: inline-block;
         width: 16px;
         height: var(--bx-button-height);
-
-        &:not(:only-child) {
-            margin-right: 4px;
-        }
     }
 
     span {
         display: inline-block;
-        height: calc(var(--bx-button-height) - 2px);
+        /* height: var(--bx-button-height); */
         line-height: var(--bx-button-height);
         vertical-align: middle;
+        /* vertical-align: -webkit-baseline-middle; */
         color: #fff;
         overflow: hidden;
         white-space: nowrap;
+
+        &:not(:only-child) {
+            margin-left: 10px;
+        }
+    }
+}
+
+.bx-focusable {
+    position: relative;
+    overflow: visible;
+
+    &::after {
+        border: 2px solid transparent;
+        border-radius: 10px;
     }
 
-    &.bx-focusable {
+    &:focus::after {
-        position: relative;
+        offset = -6px;
-
+        content: '';
-        &::after {
+        border-color: white;
-            border: 2px solid transparent;
+        position: absolute;
-            border-radius: 4px;
+        top: offset;
-        }
+        left: offset;
+        right: offset;
+        bottom: offset;
+    }
 
+    html[data-active-input=touch] &,
+    html[data-active-input=mouse] & {
         &:focus::after {
-            content: '';
+            border-color: transparent !important;
-            border-color: white;
+        }
-            position: absolute;
+    }
-            top: 0;
+
-            left: 0;
+    &.bx-circular {
-            right: 0;
+        &::after {
-            bottom: 0;
+            border-radius: var(--bx-button-height);
         }
     }
 }
@@ -106,3 +173,9 @@ a.bx-button {
         text-align: center;
     }
 }
+
+button.bx-inactive {
+    pointer-events: none;
+    opacity: 0.2;
+    background: transparent !important;
+}

src/assets/css/game-bar.styl

@@ -0,0 +1,118 @@
+#bx-game-bar {
+    z-index: var(--bx-game-bar-z-index);
+    position: fixed;
+    bottom: 0;
+    width: 40px;
+    height: 90px;
+    overflow: visible;
+    cursor: pointer;
+
+    > svg {
+        display: none;
+        pointer-events: none;
+        position: absolute;
+        height: 28px;
+        margin-top: 16px;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            > svg {
+                display: block;
+            }
+        }
+    }
+
+    .bx-game-bar-container {
+        opacity: 0;
+        position absolute;
+        display: flex;
+        overflow: hidden;
+        background: #1a1b1ee8;
+        box-shadow: 0px 0px 6px #1c1c1c;
+        transition: opacity 0.1s ease-in;
+
+        &.bx-show {
+            opacity: 0.9;
+
+            + svg {
+                display: none !important;
+            }
+        }
+
+        &.bx-hide {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        button {
+            width: 60px;
+            height: 60px;
+            border-radius: 0;
+
+            svg {
+                width: 28px;
+                height: 28px;
+                transition: transform 0.08s ease 0s;
+            }
+
+            &:hover {
+                border-radius: 0;
+            }
+
+            &:active {
+                svg {
+                    transform: scale(0.75);
+                }
+            }
+
+            &.bx-activated {
+                background-color: white;
+
+                svg {
+                    filter: invert(1);
+                }
+            }
+        }
+
+        /* Touch controller buttons */
+        div[data-enabled] {
+            button {
+                display: none;
+            }
+        }
+
+        /* Show enabled button */
+        div[data-enabled='true'] {
+            button:first-of-type {
+                display: block;
+            }
+        }
+
+        /* Show enable button */
+        div[data-enabled='false'] {
+            button:last-of-type {
+                display: block;
+            }
+        }
+    }
+
+    &[data-position="bottom-left"] {
+        left: 0;
+        direction: ltr;
+
+        .bx-game-bar-container {
+            border-radius: 0 10px 10px 0;
+        }
+    }
+
+    &[data-position="bottom-right"] {
+        right: 0;
+        direction: rtl;
+
+        .bx-game-bar-container {
+            direction: ltr;
+            border-radius: 10px 0 0 10px;
+        }
+    }
+}

src/assets/css/global-settings.styl

@@ -1,169 +0,0 @@
-.bx-settings-reload-button-wrapper {
-    z-index: var(--bx-reload-button-z-index);
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    text-align: center;
-    background: #000000cf;
-    padding: 10px;
-
-    button {
-        max-width: 450px;
-        margin: 0 !important;
-    }
-}
-
-.bx-settings-container {
-    background-color: #151515;
-    user-select: none;
-    -webkit-user-select: none;
-    color: #fff;
-    font-family: var(--bx-normal-font);
-}
-
-@media (hover: hover) {
-    .bx-settings-wrapper a.bx-settings-title:hover {
-        color: #83f73a;
-    }
-}
-
-.bx-settings-wrapper {
-    width: 450px;
-    margin: auto;
-    padding: 12px 6px;
-
-    @media screen and (max-width: 450px) {
-        width: 100%;
-    }
-
-    *:focus {
-        outline: none !important;
-    }
-
-    .bx-settings-title-wrapper {
-        display: flex;
-        margin-bottom: 10px;
-        align-items: center;
-    }
-
-    a.bx-settings-title {
-        font-family: var(--bx-title-font);
-        font-size: 1.4rem;
-        text-decoration: none;
-        font-weight: bold;
-        display: block;
-        color: #5dc21e;
-        flex: 1;
-
-        &:focus {
-            color: #83f73a;
-        }
-    }
-
-    .bx-button.bx-primary {
-        margin-top: 8px;
-    }
-
-    a.bx-settings-update {
-        display: block;
-        color: #ff834b;
-        text-decoration: none;
-        margin-bottom: 8px;
-        text-align: center;
-        background: #222;
-        border-radius: 4px;
-        padding: 4px;
-
-        &:hover {
-            @media (hover: hover) {
-                color: #ff9869;
-                text-decoration: underline;
-            }
-        }
-
-        &:focus {
-            color: #ff9869;
-            text-decoration: underline;
-        }
-    }
-}
-
-.bx-settings-group-label {
-    font-weight: bold;
-    display: block;
-    font-size: 1.1rem;
-}
-
-
-.bx-settings-row {
-    display: flex;
-    margin-bottom: 8px;
-    padding: 2px 4px;
-
-    label {
-        flex: 1;
-        align-self: center;
-        margin-bottom: 0;
-        padding-left: 10px;
-    }
-
-
-    &:focus-within {
-        @media (hover: none) {
-            background-color: #242424;
-        }
-    }
-
-    input {
-        align-self: center;
-        accent-color: var(--bx-primary-button-color);
-    }
-
-    select:disabled {
-        -webkit-appearance: none;
-        background: transparent;
-        text-align-last: right;
-        border: none;
-        color: #fff;
-    }
-}
-
-.bx-settings-group-label b, .bx-settings-row label b {
-    display: block;
-    font-size: 12px;
-    font-style: italic;
-    font-weight: normal;
-    color: #828282;
-}
-
-.bx-settings-group-label b {
-    margin-bottom: 8px;
-}
-
-.bx-settings-app-version {
-    margin-top: 10px;
-    text-align: center;
-    color: #747474;
-    font-size: 12px;
-}
-
-.bx-donation-link {
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    height: 20px;
-    line-height: 20px;
-    font-size: 14px;
-    margin-top: 10px;
-    color: #5dc21e;
-
-    &:hover {
-        color: #6dd72b;
-    }
-}
-
-.bx-settings-custom-user-agent {
-    display: block;
-    width: 100%;
-}

src/assets/css/guide-menu.styl

@@ -0,0 +1,65 @@
+.bx-guide-home-achievements-progress {
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+
+    .bx-button {
+        margin-bottom: 0 !important;
+    }
+
+    html[data-xds-platform=tv] & {
+        flex-direction: column;
+    }
+
+    html:not([data-xds-platform=tv]) & {
+        flex-direction: row;
+
+        > button:first-of-type {
+            flex: 1;
+        }
+
+        > button:last-of-type {
+            width: 40px;
+
+            span {
+                display: none;
+            }
+        }
+    }
+}
+
+.bx-guide-home-buttons {
+    > div {
+        display: flex;
+        flex-direction: row;
+        gap: 12px;
+
+        html[data-xds-platform=tv] & {
+            flex-direction: column;
+
+            button {
+                margin-bottom: 0 !important;
+            }
+        }
+
+        html:not([data-xds-platform=tv]) & {
+            button {
+                span {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    &[data-is-playing="true"] {
+        button[data-state='normal'] {
+            display: none;
+        }
+    }
+
+    &[data-is-playing="false"] {
+        button[data-state='playing'] {
+            display: none;
+        }
+    }
+}

src/assets/css/header.styl

@@ -4,7 +4,7 @@
 
     svg {
         width: 24px;
-        height: 46px;
+        height: 24px;
     }
 }
 

src/assets/css/misc.styl

@@ -0,0 +1,21 @@
+.bx-product-details-buttons {
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+
+    button {
+        max-width: max-content;
+        margin: 10px 0 0 0;
+        display: flex;
+    }
+}
+
+@media (min-width: 568px) and (max-height: 480px) {
+    .bx-product-details-buttons {
+        flex-direction: column;
+
+        button {
+            margin: 8px 0 0 10px;
+        }
+    }
+}

src/assets/css/mkb.styl

@@ -16,8 +16,6 @@
 }
 
 .bx-mkb-pointer-lock-msg {
-    display: flex;
-    cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     position: fixed;
@@ -25,7 +23,7 @@
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
     margin: auto;
-    background: #000000e5;
+    background: #151515;
     z-index: var(--bx-mkb-pointer-lock-msg-z-index);
     color: #fff;
     text-align: center;
@@ -36,21 +34,14 @@
     border-radius: 8px;
     align-items: center;
     box-shadow: 0 0 6px #000;
+    min-width: 220px;
+    opacity: 0.9;
 
     &:hover {
-        background: #151515;
+        opacity: 1;
     }
 
-    button {
+    > div:first-of-type {
-        margin-right: 12px;
-        height: 60px;
-    }
-
-    svg {
-        width: 32px;
-    }
-
-    div {
         display: flex;
         flex-direction: column;
         text-align: left;
@@ -61,14 +52,47 @@
 
         &:first-child {
             font-size: 22px;
-            margin-bottom: 8px;
+            margin-bottom: 4px;
+            font-weight: bold;
         }
 
         &:last-child {
-            font-size: 14px;
+            font-size: 12px;
             font-style: italic;
         }
     }
+
+    > div:last-of-type {
+        margin-top: 10px;
+
+        &[data-type='native'] {
+            button {
+                &:first-of-type {
+                    margin-bottom: 8px;
+                }
+            }
+        }
+
+        &[data-type='virtual'] {
+            div {
+                display: flex;
+                flex-flow: row;
+                margin-top: 8px;
+
+                button {
+                    flex: 1;
+
+                    &:first-of-type {
+                        margin-right: 5px;
+                    }
+
+                    &:last-of-type {
+                        margin-left: 5px;
+                    }
+                }
+            }
+        }
+    }
 }
 
 .bx-mkb-preset-tools {

src/assets/css/navigation-dialog.styl

@@ -0,0 +1,23 @@
+.bx-navigation-dialog {
+    position: absolute;
+    z-index: var(--bx-navigation-dialog-z-index);
+    font-family: var(--bx-title-font);
+
+    *:focus {
+        outline: none !important;
+    }
+}
+
+.bx-navigation-dialog-overlay {
+    position: fixed;
+    background: #0b0b0be3;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: var(--bx-navigation-dialog-overlay-z-index);
+
+    &[data-is-playing="true"] {
+        background: transparent;
+    }
+}

src/assets/css/number-stepper.styl

@@ -1,16 +1,19 @@
 .bx-number-stepper {
+    text-align: center;
+
     span {
         display: inline-block;
-        width: 40px;
+        min-width: 40px;
         font-family: var(--bx-monospaced-font);
-        font-size: 14px;
+        font-size: 13px;
+        margin: 0 4px;
     }
 
     button {
         border: none;
         width: 24px;
         height: 24px;
-        margin: 0 4px;
+        margin: 0;
         line-height: 24px;
         background-color: var(--bx-default-button-color);
         color: #fff;
@@ -18,7 +21,6 @@
         font-weight: bold;
         font-size: 14px;
         font-family: var(--bx-monospaced-font);
-        color: #fff;
 
         &:hover {
             @media (hover: hover) {
@@ -35,7 +37,20 @@
         }
     }
 
+    input[type="range"] {
+        display: block;
+        margin: 12px auto 2px;
+        width: 180px;
+        color: #959595 !important;
+    }
+
     input[type=range]:disabled, button:disabled {
         display: none;
     }
+
+    &[data-disabled=true] {
+        input[type=range], button {
+            display: none;
+        }
+    }
 }

src/assets/css/remote-play.styl

@@ -1,36 +1,16 @@
-.bx-remote-play-popup {
-    width: 100%;
-    max-width: 1920px;
-    margin: auto;
-    position: relative;
-    height: 0.1px;
-    overflow: visible;
-    z-index: var(--bx-remote-play-popup-z-index);
-}
-
 .bx-remote-play-container {
-    position: absolute;
+    position: fixed;
-    right: 10px;
+    top: 50%;
-    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    color: white;
     background: #1a1b1e;
     border-radius: 10px;
     width: 420px;
     max-width: calc(100vw - 20px);
     margin: 0 0 0 auto;
     padding: 20px;
-    box-shadow: #00000080 0px 0px 12px 0px;
-
-    @media (min-width:480px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 32px);
-    }
-
-    @media (min-width:768px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 48px);
-    }
-
-    @media (min-width:1920px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 80px);
-    }
 
     > .bx-button {
         display: table;
@@ -57,14 +37,6 @@
             font-size: 12px;
         }
     }
-
-    span {
-        font-weight: bold;
-        font-size: 18px;
-        display: block;
-        margin-bottom: 8px;
-        text-align: center;
-    }
 }
 
 .bx-remote-play-resolution {
@@ -114,10 +86,15 @@
 
 .bx-remote-play-power-state {
     color: #888;
-    font-size: 14px;
+    font-size: 12px;
 }
 
 .bx-remote-play-connect-button {
     min-height: 100%;
     margin: 4px 0;
 }
+
+.bx-remote-play-buttons {
+    display: flex;
+    justify-content: space-between;
+}

src/assets/css/root.styl

@@ -1,3 +1,18 @@
+button_color(name, normal, hover, active, disabled)
+    prefix = unquote('--bx-' + name + '-button');
+    {prefix + '-color'}: normal;
+    {prefix + '-rgb'}: red(normal), green(normal), blue(normal);
+
+    {prefix + '-hover-color'}: hover;
+    {prefix + '-hover-rgb'}: red(hover), green(hover), blue(hover);
+
+    {prefix + '-active-color'}: active;
+    {prefix + '-active-rgb'}: red(active), green(active), blue(active);
+
+    {prefix + '-disabled-color'}: disabled;
+    {prefix + '-disabled-rgb'}: red(disabled), green(disabled), blue(disabled);
+
+
 :root {
     --bx-title-font: Bahnschrift, Arial, Helvetica, sans-serif;
     --bx-title-font-semibold: Bahnschrift Semibold, Arial, Helvetica, sans-serif;
@@ -5,31 +20,26 @@
     --bx-monospaced-font: Consolas, "Courier New", Courier, monospace;
     --bx-promptfont-font: promptfont;
 
-    --bx-button-height: 36px;
+    --bx-button-height: 40px;
 
-    --bx-default-button-color: #2d3036;
+    button_color('default', #2d3036, #515863, #222428, #8e8e8e);
-    --bx-default-button-hover-color: #515863;
+    button_color('primary', #008746, #04b358, #044e2a, #448262);
-    --bx-default-button-disabled-color: #8e8e8e;
+    button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
 
-    --bx-primary-button-color: #008746;
+    --bx-fullscreen-text-z-index: 99999;
-    --bx-primary-button-hover-color: #04b358;
+    --bx-toast-z-index: 60000;
-    --bx-primary-button-disabled-color: #448262;
+    --bx-dialog-z-index: 50000;
 
-    --bx-danger-button-color: #c10404;
+    --bx-dialog-overlay-z-index: 40200;
-    --bx-danger-button-hover-color: #e61d1d;
+    --bx-stats-bar-z-index: 40100;
-    --bx-danger-button-disabled-color: #a26c6c;
+    --bx-mkb-pointer-lock-msg-z-index: 40000;
 
-    --bx-toast-z-index: 9999;
+    --bx-navigation-dialog-z-index: 30100;
-    --bx-reload-button-z-index: 9200;
+    --bx-navigation-dialog-overlay-z-index: 30000;
-    --bx-dialog-z-index: 9101;
+
-    --bx-dialog-overlay-z-index: 9100;
+    --bx-game-bar-z-index: 10000;
-    --bx-remote-play-popup-z-index: 9090;
+    --bx-screenshot-animation-z-index: 9000;
-    --bx-stats-bar-z-index: 9001;
+    --bx-wait-time-box-z-index: 1000;
-    --bx-stream-settings-z-index: 9000;
-    --bx-mkb-pointer-lock-msg-z-index: 8999;
-    --bx-screenshot-z-index: 8888;
-    --bx-touch-controller-bar-z-index: 5555;
-    --bx-wait-time-box-z-index: 100;
 }
 
 @font-face {
@@ -47,7 +57,7 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
 }
 
 /* Remove the "Cloud Gaming" text in header when the screen is too small */
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 640px) {
     header a[href="/play"] {
         display: none;
     }
@@ -65,6 +75,14 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     overflow: hidden !important;
 }
 
+.bx-hide-scroll-bar {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
 .bx-gone {
     display: none !important;
 }
@@ -80,6 +98,19 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     visibility: hidden !important;
 }
 
+.bx-invisible {
+    opacity: 0;
+}
+
+.bx-unclickable {
+    pointer-events: none;
+}
+
+.bx-pixel {
+    width: 1px !important;
+    height: 1px !important;
+}
+
 .bx-no-margin {
     margin: 0 !important;
 }
@@ -88,6 +119,29 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     padding: 0 !important;
 }
 
+.bx-prompt {
+    font-family: var(--bx-promptfont-font);
+}
+
+.bx-line-through {
+    text-decoration: line-through !important;
+}
+
+.bx-normal-case {
+    text-transform: none !important;
+}
+
+.bx-normal-link {
+    text-transform: none !important;
+    text-align: left !important;
+    font-weight: 400 !important;
+    font-family: var(--bx-normal-font) !important;
+}
+
+select[multiple] {
+    overflow: auto;
+}
+
 /* Hide UI elements */
 #headerArea, #uhfSkipToMain, .uhf-footer {
     display: none;
@@ -104,3 +158,71 @@ div[class*=NotFocusedDialog] {
 #game-stream video:not([src]) {
     visibility: hidden;
 }
+
+/* Hide Controller icon in Game tiles */
+div[class*=SupportedInputsBadge] {
+    &:not(:has(:nth-child(2))), svg:first-of-type {
+        display: none;
+    }
+}
+
+
+.bx-game-tile-wait-time {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background: #0000008c;
+    display: flex;
+    border-radius: 4px 0 4px 0;
+    align-items: center;
+    padding: 4px 8px;
+
+    svg {
+        width: 14px;
+        height: 16px;
+        margin-right: 2px;
+    }
+
+    span {
+        display: inline-block;
+        height: 16px;
+        line-height: 16px;
+        font-size: 12px;
+        font-weight: bold;
+        margin-left: 2px;
+    }
+}
+
+
+.bx-fullscreen-text {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000000cc;
+    z-index: var(--bx-fullscreen-text-z-index);
+    line-height: 100vh;
+    color: #fff;
+    text-align: center;
+    font-weight: 400;
+    font-family: var(--bx-normal-font);
+    font-size: 1.3rem;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+/* Device Code page */
+#root {
+    section[class*=DeviceCodePage-module__page] {
+        margin-left: 20px !important;
+        margin-right: 20px !important;
+        margin-top: 20px !important;
+        max-width: 800px !important;
+    }
+
+    div[class*=DeviceCodePage-module__back] {
+        display: none;
+    }
+}

src/assets/css/settings-dialog.styl

@@ -0,0 +1,565 @@
+.bx-settings-dialog {
+    display: flex;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.98;
+    user-select: none;
+    -webkit-user-select: none;
+
+    .bx-focusable {
+        &::after {
+            border-radius: 4px;
+        }
+
+        &:focus::after {
+            offset = 0;
+
+            top: offset;
+            left: offset;
+            right: offset;
+            bottom: offset;
+        }
+    }
+
+    .bx-settings-reload-note {
+        font-size: 0.8rem;
+        display: block;
+        padding: 8px;
+        font-style: italic;
+        font-weight: normal;
+        height: var(--bx-button-height);
+    }
+
+    input {
+        accent-color: var(--bx-primary-button-color);
+
+        &:focus {
+            accent-color: var(--bx-danger-button-color);
+        }
+    }
+
+    select:disabled {
+        -webkit-appearance: none;
+        background: transparent;
+        text-align-last: right;
+        border: none;
+        color: #fff;
+    }
+
+    select option:disabled {
+        display: none;
+    }
+
+    input[type=checkbox],
+    select {
+        &:focus {
+            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
+        }
+    }
+
+    a {
+        color: #1c9d1c;
+        text-decoration: none;
+
+        &:hover, &:focus {
+            color: #5dc21e;
+        }
+    }
+}
+
+.bx-settings-tabs-container {
+    position: fixed;
+    width: 48px;
+    max-height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    > div:last-of-type {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+
+        button {
+            flex-shrink: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            margin-top: 8px;
+            height: unset;
+            padding: 8px 10px;
+
+            svg {
+                size = 16px;
+
+                width: size;
+                height: size;
+            }
+        }
+    }
+}
+
+.bx-settings-tabs {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0 0 0 8px;
+    box-shadow: 0 0 6px #000;
+    overflow: overlay;
+    flex: 1;
+
+    svg {
+        size = 24px;
+        width: size;
+        height: size;
+        padding: 10px;
+        flex-shrink: 0;
+        box-sizing: content-box;
+        background: #131313;
+        cursor: pointer;
+        border-left: 4px solid #1e1e1e;
+
+        &.bx-active {
+            background: #222;
+            border-color: #008746;
+        }
+
+        &:not(.bx-active):hover {
+            background: #2f2f2f;
+            border-color: #484848;
+        }
+
+        &:focus {
+            border-color: #fff;
+        }
+
+        &[data-group=global] {
+            &[data-need-refresh=true] {
+                background: var(--bx-danger-button-color) !important;
+
+                &:hover {
+                    background: var(--bx-danger-button-hover-color) !important;
+                }
+            }
+        }
+    }
+}
+
+
+.bx-settings-tab-contents {
+    tabsWidth = 48px;
+
+    flex-direction: column;
+    padding: 10px;
+    margin-left: tabsWidth;
+    width: 450px;
+    max-width: calc(100vw - tabsWidth);
+    background: #1a1b1e;
+    color: #fff;
+    font-weight: 400;
+    font-size: 16px;
+    font-family: var(--bx-title-font);
+    text-align: center;
+    box-shadow: 0px 0px 6px #000;
+    overflow: overlay;
+    z-index: 1;
+
+    > div[data-tab-group=mkb] {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    > div[data-tab-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;
+        }
+
+        .bx-shortcut-note {
+            margin-top: 10px;
+            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-settings-z-index) + 1);
+                    }
+                }
+            }
+        }
+    }
+
+    .bx-top-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 8px;
+
+        .bx-button {
+            display: block;
+        }
+    }
+
+    h2 {
+        margin: 16px 0 8px 0;
+        display: flex;
+        align-items: center;
+
+        &:first-of-type {
+            margin-top: 0;
+        }
+
+        span {
+            display: inline-block;
+            font-size: 20px;
+            font-weight: bold;
+            text-align: left;
+            flex: 1;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+}
+
+@media (max-width: 500px) {
+    .bx-settings-tab-contents {
+        width: calc(100vw - 48px);
+    }
+}
+
+.bx-settings-row {
+    display: flex;
+    gap: 10px;
+    padding: 16px 10px;
+    margin: 0;
+    background: #2a2a2a;
+    border-bottom: 1px solid #343434;
+
+    &:hover, &:focus-within {
+        background-color: #242424;
+    }
+
+    &:not(:has(> input[type=checkbox])) {
+        flex-wrap: wrap;
+    }
+
+    /*
+    &:has(input:focus), &:has(select:focus), &:has(button:focus) {
+        border-left-color: white;
+    }
+    */
+
+    > span.bx-settings-label {
+        font-size: 14px;
+        display: block;
+        text-align: left;
+        align-self: center;
+        margin-bottom: 0 !important;
+        flex: 1;
+
+        + * {
+            margin: 0 0 0 auto;
+        }
+    }
+}
+
+.bx-settings-dialog-note {
+    display: block;
+    color: #afafb0;
+    font-size: 12px;
+    font-weight: lighter;
+    font-style: italic;
+
+    &:not(:has(a)) {
+        margin-top: 4px;
+    }
+
+    a {
+        display: inline-block;
+        padding: 4px;
+    }
+}
+
+.bx-settings-custom-user-agent {
+    display: block;
+    width: 100%;
+    padding: 6px;
+}
+
+.bx-donation-link {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    height: 20px;
+    line-height: 20px;
+    font-size: 14px;
+    margin-top: 10px;
+}
+
+.bx-debug-info {
+    button {
+        margin-top: 10px;
+    }
+
+    pre {
+        margin-top: 10px;
+        cursor: copy;
+        color: white;
+        padding: 8px;
+        border: 1px solid #2d2d2d;
+        background: #212121;
+        white-space: break-spaces;
+        text-align: left;
+
+        &:hover {
+            background: #272727;
+        }
+    }
+}
+
+.bx-settings-app-version {
+    margin-top: 10px;
+    text-align: center;
+    color: #747474;
+    font-size: 12px;
+}
+
+.bx-note-unsupported {
+    display: block;
+    font-size: 12px;
+    font-style: italic;
+    font-weight: normal;
+    color: #828282;
+}
+
+.bx-settings-tab-contents {
+    > div {
+        // Label at the beginning
+        *:not(.bx-settings-row):has(+ .bx-settings-row) + .bx-settings-row:has(+ .bx-settings-row) {
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+        }
+
+        // Label at the end
+        .bx-settings-row:not(:has(+ .bx-settings-row)) {
+            border: none;
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+        }
+
+        // Single label
+        *:not(.bx-settings-row):has(+ .bx-settings-row) + .bx-settings-row:not(:has(+ .bx-settings-row)) {
+            border: none;
+            border-radius: 10px;
+        }
+    }
+}
+
+.bx-suggest-toggler {
+    text-align: left;
+    display: flex;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #003861;
+
+    label {
+        flex: 1;
+        margin-bottom: 0;
+        padding: 10px;
+        background: #004f87;
+    }
+
+    span {
+        display: inline-block;
+        align-self: center;
+        padding: 10px;
+        width: 40px;
+        text-align: center;
+    }
+
+    &:hover, &:focus {
+        cursor: pointer;
+        background: #005da1;
+
+        label {
+            background: #006fbe;
+        }
+    }
+
+    &[bx-open] {
+        span {
+            transform: rotate(90deg);
+        }
+
+        &+ .bx-suggest-box {
+            display: block;
+        }
+    }
+}
+
+.bx-suggest-box {
+    display: none;
+    background: #161616;
+    padding: 10px;
+    box-shadow: 0px 0px 12px #0f0f0f inset;
+    border-radius: 10px;
+}
+
+.bx-suggest-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 10px;
+}
+
+.bx-suggest-note {
+    font-size: 11px;
+    color: #8c8c8c;
+    font-style: italic;
+    font-weight: 100;
+}
+
+.bx-suggest-link {
+    font-size: 14px;
+    display: inline-block;
+    margin-top: 4px;
+    padding: 4px;
+}
+
+.bx-suggest-row {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    label {
+        flex: 1;
+        overflow: overlay;
+        border-radius: 4px;
+
+        .bx-suggest-label {
+            background: #323232;
+            padding: 4px 10px;
+            font-size: 12px;
+            text-align: left;
+        }
+
+        .bx-suggest-value {
+            padding: 6px;
+            font-size: 14px;
+
+            &.bx-suggest-change {
+                background-color: var(--bx-warning-color);
+            }
+        }
+    }
+
+    &.bx-suggest-ok {
+        input {
+            visibility: hidden;
+        }
+
+        .bx-suggest-label {
+            background-color: #008114;
+        }
+
+        .bx-suggest-value {
+            background-color: #13a72a;
+        }
+    }
+
+    &.bx-suggest-change {
+        .bx-suggest-label {
+            background-color: #a65e08;
+        }
+
+        .bx-suggest-value {
+            background-color: #d57f18;
+        }
+
+        &:hover {
+            label {
+                cursor: pointer;
+            }
+
+            .bx-suggest-label {
+                background-color: #995707;
+            }
+
+            .bx-suggest-value {
+                background-color: #bd7115;
+            }
+        }
+
+        // Unchecked setting
+        input:not(:checked) + label {
+            opacity: 0.5;
+
+            .bx-suggest-label {
+                background-color: #2a2a2a;
+            }
+
+            .bx-suggest-value {
+                background-color: #393939;
+            }
+        }
+
+        &:hover {
+            input:not(:checked) + label {
+                opacity: 1;
+
+                .bx-suggest-label {
+                    background-color: #202020;
+                }
+
+                .bx-suggest-value {
+                    background-color: #303030;
+                }
+            }
+        }
+    }
+}

src/assets/css/stream-actions.styl

@@ -1,46 +0,0 @@
-.bx-screenshot-button {
-    display: none;
-    opacity: 0;
-    position: fixed;
-    bottom: 0;
-    box-sizing: border-box;
-    width: 60px;
-    height: 90px;
-    padding: 16px 16px 46px 16px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    filter: drop-shadow(0 0 2px #000000B0);
-    transition: opacity 0.1s ease-in-out 0s, padding 0.1s ease-in 0s;
-    z-index: var(--bx-screenshot-z-index);
-
-    /* Credit: https://phosphoricons.com */
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMjguMzA4IDUuMDM4aC00LjI2NWwtMi4wOTctMy4xNDVhMS4yMyAxLjIzIDAgMCAwLTEuMDIzLS41NDhoLTkuODQ2YTEuMjMgMS4yMyAwIDAgMC0xLjAyMy41NDhMNy45NTYgNS4wMzhIMy42OTJBMy43MSAzLjcxIDAgMCAwIDAgOC43MzF2MTcuMjMxYTMuNzEgMy43MSAwIDAgMCAzLjY5MiAzLjY5MmgyNC42MTVBMy43MSAzLjcxIDAgMCAwIDMyIDI1Ljk2MlY4LjczMWEzLjcxIDMuNzEgMCAwIDAtMy42OTItMy42OTJ6bS02Ljc2OSAxMS42OTJjMCAzLjAzOS0yLjUgNS41MzgtNS41MzggNS41MzhzLTUuNTM4LTIuNS01LjUzOC01LjUzOCAyLjUtNS41MzggNS41MzgtNS41MzggNS41MzggMi41IDUuNTM4IDUuNTM4eiIvPjwvc3ZnPgo=');
-
-    &[data-showing=true] {
-        opacity: 0.9;
-    }
-
-    &[data-capturing=true] {
-        padding: 8px 8px 38px 8px;
-    }
-}
-
-.bx-screenshot-canvas {
-    display: none;
-}
-
-#bx-touch-controller-bar {
-    display: none;
-    opacity: 0;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 6vh;
-    z-index: var(--bx-touch-controller-bar-z-index);
-
-    &[data-showing=true] {
-        display: block;
-    }
-}

src/assets/css/stream-settings.styl

@@ -1,133 +0,0 @@
-.bx-quick-settings-bar {
-    display: flex;
-    position: fixed;
-    z-index: var(--bx-stream-settings-z-index);
-    opacity: 0.98;
-    user-select: none;
-    -webkit-user-select: none;
-}
-
-.bx-quick-settings-tabs {
-    position: fixed;
-    top: 0;
-    right: 420px;
-    display: flex;
-    flex-direction: column;
-    border-radius: 0 0 0 8px;
-    box-shadow: 0px 0px 6px #000;
-    overflow: clip;
-
-    svg {
-        width: 32px;
-        height: 32px;
-        padding: 10px;
-        box-sizing: content-box;
-        background: #131313;
-        cursor: pointer;
-        border-left: 4px solid #1e1e1e;
-
-        &.bx-active {
-            background: #222;
-            border-color: #008746;
-        }
-
-        &:not(.bx-active):hover {
-            background: #2f2f2f;
-            border-color: #484848;
-        }
-    }
-}
-
-
-.bx-quick-settings-tab-contents {
-    flex-direction: column;
-    position: fixed;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    padding: 14px 14px 0;
-    width: 420px;
-    background: #1a1b1e;
-    color: #fff;
-    font-weight: 400;
-    font-size: 16px;
-    font-family: var(--bx-title-font);
-    text-align: center;
-    box-shadow: 0px 0px 6px #000;
-    overflow: overlay;
-
-    > div[data-group=mkb] {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    *:focus {
-        outline: none !important;
-    }
-
-    h2 {
-        margin-bottom: 8px;
-        display: flex;
-        align-item: center;
-
-        span {
-            display: inline-block;
-            font-size: 24px;
-            font-weight: bold;
-            text-transform: uppercase;
-            text-align: left;
-            flex: 1;
-            height: var(--bx-button-height);
-            line-height: calc(var(--bx-button-height) + 4px);
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-    }
-
-    input[type="range"] {
-        display: block;
-        margin: 12px auto 2px;
-        width: 180px;
-        color: #959595 !important;
-    }
-}
-
-
-.bx-quick-settings-row {
-    display: flex;
-    border-bottom: 1px solid #40404080;
-    margin-bottom: 16px;
-    padding-bottom: 16px;
-
-    label {
-        font-size: 16px;
-        display: block;
-        text-align: left;
-        flex: 1;
-        align-self: center;
-        margin-bottom: 0 !important;
-    }
-
-    input {
-        accent-color: var(--bx-primary-button-color);
-    }
-
-    select:disabled {
-        -webkit-appearance: none;
-        background: transparent;
-        text-align-last: right;
-        border: none;
-    }
-}
-
-.bx-quick-settings-bar-note {
-    display: block;
-    text-align: center;
-    font-size: 12px;
-    font-weight: lighter;
-    font-style: italic;
-    padding-top: 16px;
-}

src/assets/css/stream-stats.styl

@@ -1,6 +1,5 @@
 /* STATS BADGE */
 .bx-badges {
-    position: absolute;
     margin-left: 0px;
     user-select: none;
     -webkit-user-select: none;
@@ -21,26 +20,60 @@
 
 .bx-badge-name {
     background-color: #2d3036;
-    display: inline-block;
-    padding: 2px 8px;
     border-radius: 4px 0 0 4px;
-    text-transform: uppercase;
+
+    svg {
+        width: 16px;
+        height: 16px;
+    }
 }
 
 .bx-badge-value {
     background-color: grey;
-    display: inline-block;
-    padding: 2px 8px;
     border-radius: 0 4px 4px 0;
 }
 
+.bx-badge-name, .bx-badge-value {
+    display: inline-block;
+    padding: 0 8px;
+    /* height: 30px; */
+    line-height: 30px;
+    vertical-align: bottom;
+}
+
 .bx-badge-battery[data-charging=true] span:first-of-type::after {
     content: ' ⚡️';
 }
 
+div[class^=StreamMenu-module__container] .bx-badges {
+    position: absolute;
+    max-width: 500px;
+}
+
+#gamepass-dialog-root .bx-badges {
+    position: fixed;
+    top: 60px;
+    left: 460px;
+    max-width: 500px;
+
+    @media (min-width: 568px) and (max-height: 480px) {
+        position: unset;
+        top: unset;
+        left: unset;
+        margin: 8px 0;
+    }
+
+    @media (min-width: 480px) and (min-height: calc(481px)) {
+
+    }
+}
+
+
 /* STATS BAR */
 .bx-stats-bar {
-    display: block;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
     user-select: none;
     -webkit-user-select: none;
     position: fixed;
@@ -53,22 +86,34 @@
     z-index: var(--bx-stats-bar-z-index);
     text-wrap: nowrap;
 
+    &[data-stats*="[time]"] > .bx-stat-time,
+    &[data-stats*="[play]"] > .bx-stat-play,
+    &[data-stats*="[batt]"] > .bx-stat-batt,
     &[data-stats*="[fps]"] > .bx-stat-fps,
     &[data-stats*="[ping]"] > .bx-stat-ping,
+    &[data-stats*="[jit]"] > .bx-stat-jit,
     &[data-stats*="[btr]"] > .bx-stat-btr,
     &[data-stats*="[dt]"] > .bx-stat-dt,
     &[data-stats*="[pl]"] > .bx-stat-pl,
-    &[data-stats*="[fl]"] > .bx-stat-fl {
+    &[data-stats*="[fl]"] > .bx-stat-fl,
-        display: inline-block;
+    &[data-stats*="[dl]"] > .bx-stat-dl,
+    &[data-stats*="[ul]"] > .bx-stat-ul {
+        display: inline-flex;
+        align-items: baseline;
     }
 
+    &[data-stats$="[time]"] > .bx-stat-time,
+    &[data-stats$="[play]"] > .bx-stat-play,
+    &[data-stats$="[batt]"] > .bx-stat-batt,
     &[data-stats$="[fps]"] > .bx-stat-fps,
     &[data-stats$="[ping]"] > .bx-stat-ping,
+    &[data-stats$="[jit]"] > .bx-stat-jit,
     &[data-stats$="[btr]"] > .bx-stat-btr,
     &[data-stats$="[dt]"] > .bx-stat-dt,
     &[data-stats$="[pl]"] > .bx-stat-pl,
-    &[data-stats$="[fl]"] > .bx-stat-fl {
+    &[data-stats$="[fl]"] > .bx-stat-fl,
-        margin-right: 0;
+    &[data-stats$="[dl]"] > .bx-stat-dl,
+    &[data-stats$="[ul]"] > .bx-stat-ul {
         border-right: none;
     }
 
@@ -106,7 +151,6 @@
 
     > div {
         display: none;
-        margin-right: 8px;
         border-right: 1px solid #fff;
         padding-right: 8px;
     }
@@ -114,7 +158,7 @@
     label {
         margin: 0 8px 0 0;
         font-family: var(--bx-title-font);
-        font-size: inherit;
+        font-size: 70%;
         font-weight: bold;
         vertical-align: middle;
         cursor: help;

src/assets/css/stream.styl

@@ -7,3 +7,76 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
     background-color: #2d2d2d !important;
     color: #000 !important;
 }
+
+.bx-stream-refresh-button {
+    top: calc(env(safe-area-inset-top, 0px) + 10px + 50px) !important;
+}
+
+body[data-media-type=default] .bx-stream-refresh-button {
+    left: calc(env(safe-area-inset-left, 0px) + 11px) !important;
+}
+
+body[data-media-type=tv] .bx-stream-refresh-button {
+    top: calc(var(--gds-focus-borderSize) + 80px) !important;
+}
+
+.bx-stream-home-button {
+    top: calc(env(safe-area-inset-top, 0px) + 10px + 50px * 2) !important;
+}
+
+body[data-media-type=default] .bx-stream-home-button {
+    left: calc(env(safe-area-inset-left, 0px) + 12px) !important;
+}
+
+body[data-media-type=tv] .bx-stream-home-button {
+    top: calc(var(--gds-focus-borderSize) + 80px * 2) !important;
+}
+
+@keyframes bx-anim-taking-screenshot {
+    0% {
+        border: 0px solid #ffffff80;
+    }
+
+    50% {
+        border: 8px solid #ffffff80;
+    }
+
+    100% {
+        border: 0px solid #ffffff80;
+    }
+}
+
+div[data-testid=media-container] {
+    display: flex;
+
+    &.bx-taking-screenshot:before {
+        animation: bx-anim-taking-screenshot 0.5s ease;
+        content: ' ';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: var(--bx-screenshot-animation-z-index);
+    }
+}
+
+
+#game-stream video {
+    margin: auto;
+    align-self: center;
+    background: #000;
+}
+
+#game-stream canvas {
+    position: absolute;
+    align-self: center;
+    margin: auto;
+    left: 0;
+    right: 0;
+}
+
+#gamepass-dialog-root div[class^=Guide-module__guide] {
+    .bx-button {
+        overflow: visible;
+        margin-bottom: 12px;
+    }
+}

src/assets/css/styles.styl

@@ -2,15 +2,18 @@
 
 @import 'button.styl';
 @import 'header.styl';
-@import 'global-settings.styl';
 @import 'dialog.styl';
+@import 'navigation-dialog.styl';
+@import 'settings-dialog.styl';
 @import 'toast.styl';
 @import 'loading-screen.styl';
 @import 'remote-play.styl';
+@import 'web-components.styl';
+@import 'guide-menu.styl';
 
 @import 'stream.styl';
 @import 'number-stepper.styl';
-@import 'stream-actions.styl';
+@import 'game-bar.styl';
 @import 'stream-stats.styl';
-@import 'stream-settings.styl';
 @import 'mkb.styl';
+@import 'misc.styl';

src/assets/css/toast.styl

@@ -23,6 +23,7 @@
 
     &.bx-hide {
         opacity: 0;
+        pointer-events: none;
     }
 }
 

src/assets/css/web-components.styl

@@ -0,0 +1,99 @@
+.bx-select {
+    display: flex;
+    align-items: center;
+    flex: 0 1 auto;
+
+    select {
+        // Render offscreen instead of "display: none" so we could get its size
+        position: absolute !important;
+        top: -9999px !important;
+        left: -9999px !important;
+        visibility: hidden !important;
+    }
+
+    > div, button.bx-select-value {
+        min-width: 120px;
+        text-align: left;
+        margin: 0 8px;
+        line-height: 24px;
+        vertical-align: middle;
+        background: #fff;
+        color: #000;
+        border-radius: 4px;
+        padding: 2px 8px;
+        flex: 1;
+    }
+
+    > div {
+        display: inline-block;
+
+        input {
+            display: inline-block;
+            margin-right: 8px;
+        }
+
+        label {
+            margin-bottom: 0;
+            font-size: 14px;
+            width: 100%;
+
+            span {
+                display: block;
+                font-size: 10px;
+                font-weight: bold;
+                text-align: left;
+                line-height: initial;
+            }
+        }
+    }
+
+    button.bx-select-value {
+        border: none;
+        display: inline-flex;
+        cursor: pointer;
+        min-height: 30px;
+        font-size: 0.9rem;
+        align-items: center;
+
+        span {
+            flex: 1;
+            text-align: left;
+            display: inline-block;
+        }
+
+        input {
+            margin: 0 4px;
+            accent-color: var(--bx-primary-button-color);
+            pointer-events: none;
+        }
+
+        &:hover,
+        &:focus {
+            input {
+                accent-color: var(--bx-danger-button-color);
+            }
+
+            &::after {
+                border-color: #4d4d4d !important;
+            }
+        }
+    }
+
+    button.bx-button {
+        border: none;
+        height: 24px;
+        width: 24px;
+        padding: 0;
+        line-height: 24px;
+        color: #fff;
+        border-radius: 4px;
+        font-weight: bold;
+        font-size: 12px;
+        font-family: var(--bx-monospaced-font);
+        flex-shrink: 0;
+
+        span {
+            line-height: unset;
+        }
+    }
+}

src/assets/header_script.lite.txt

@@ -0,0 +1,13 @@
+// ==UserScript==
+// @name         Better xCloud (Lite)
+// @namespace    https://github.com/redphx
+// @version      [[VERSION]]
+// @description  Improve Xbox Cloud Gaming (xCloud) experience
+// @author       redphx
+// @license      MIT
+// @match        https://www.xbox.com/*/play*
+// @match        https://www.xbox.com/*/auth/msa?*loggedIn*
+// @run-at       document-end
+// @grant        none
+// ==/UserScript==
+"use strict";

src/assets/header_script.txt

@@ -1,5 +1,5 @@
 // ==UserScript==
-// @name         Better xCloud (Beta)
+// @name         Better xCloud
 // @namespace    https://github.com/redphx
 // @version      [[VERSION]]
 // @description  Improve Xbox Cloud Gaming (xCloud) experience
@@ -12,4 +12,4 @@
 // @updateURL    https://raw.githubusercontent.com/redphx/better-xcloud/typescript/dist/better-xcloud.meta.js
 // @downloadURL  https://github.com/redphx/better-xcloud/releases/latest/download/better-xcloud.user.js
 // ==/UserScript==
-'use strict';
+"use strict";

src/assets/svg/battery-full.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke-miterlimit='2' viewBox='0 0 32 32'>
+    <path d='M24.774 6.71H3.097C1.398 6.71 0 8.108 0 9.806v12.387c0 1.699 1.398 3.097 3.097 3.097h21.677c1.699 0 3.097-1.398 3.097-3.097V9.806c0-1.699-1.398-3.097-3.097-3.097zm1.032 15.484a1.04 1.04 0 0 1-1.032 1.032H3.097a1.04 1.04 0 0 1-1.032-1.032V9.806a1.04 1.04 0 0 1 1.032-1.032h21.677a1.04 1.04 0 0 1 1.032 1.032v12.387zm-2.065-10.323v8.258a1.04 1.04 0 0 1-1.032 1.032H5.161a1.04 1.04 0 0 1-1.032-1.032v-8.258a1.04 1.04 0 0 1 1.032-1.032H22.71a1.04 1.04 0 0 1 1.032 1.032zm8.258 0v8.258a1.04 1.04 0 0 1-1.032 1.032 1.04 1.04 0 0 1-1.032-1.032v-8.258a1.04 1.04 0 0 1 1.032-1.032A1.04 1.04 0 0 1 32 11.871z' fill-rule='nonzero'/>
+</svg>

src/assets/svg/better-xcloud.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-miterlimit='2' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M16.001 7.236h-2.328c-.443 0-1.941-.851-2.357-.905-.824-.106-1.684 0-2.489.176a13.04 13.04 0 0 0-3.137 1.14c-.392.275-.677.668-.866 1.104v.03l-3.302 8.963-.015.015c-.288.867-.553 3.75-.5 4.279a4.89 4.89 0 0 0 1.022 2.55c.654.823 3.71 1.364 4.057 1.016l4.462-4.475c.185-.186 1.547-.706 2.01-.706h6.884c.463 0 1.825.52 2.01.706l4.462 4.475c.347.348 3.403-.193 4.057-1.016a4.89 4.89 0 0 0 1.022-2.55c.053-.529-.212-3.412-.5-4.279l-.015-.015-3.302-8.963v-.03c-.189-.436-.474-.829-.866-1.104a13.04 13.04 0 0 0-3.137-1.14c-.805-.176-1.665-.282-2.489-.176-.416.054-1.914.905-2.357.905h-2.328' fill='none' stroke='#fff'/>
+    <path d='M8.172 12.914H6.519c-.235 0-.315.267-.335.452l-.052.578c0 .193.033.384.054.576.023.202.091.511.355.511h1.631l-.001 1.652c0 .234.266.315.452.335l.578.052c.193 0 .384-.033.576-.054.203-.023.511-.091.511-.355V15.03l1.652.001c.234 0 .315-.266.335-.452l.052-.578c-.001-.193-.033-.385-.055-.577-.022-.202-.09-.51-.354-.51h-1.632v-1.652c0-.234-.266-.315-.453-.335l-.577-.052c-.193 0-.385.033-.577.054-.202.023-.51.091-.51.355v1.631m16.546 2.994h-3.487c-.206 0-.413-.043-.604-.121-.177-.072-.339-.183-.476-.316-.149-.144-.259-.315-.341-.504-.156-.361-.172-.788-.032-1.157a1.57 1.57 0 0 1 .459-.641c.106-.089.223-.164.349-.222a1.52 1.52 0 0 1 .423-.123c.167-.024.338-.02.504.012a1.83 1.83 0 0 1 .455-.482 1.62 1.62 0 0 1 .522-.252c.307-.089.651-.09.959-.003a1.75 1.75 0 0 1 1.009.764 1.83 1.83 0 0 1 .251.721c.156 0 .312.031.456.09a1.24 1.24 0 0 1 .372.248c.091.087.165.19.221.302a1.19 1.19 0 0 1-.173 1.299c-.119.132-.276.239-.441.305a1.17 1.17 0 0 1-.426.08z' fill='#fff' stroke='none'/>
+</svg>

src/assets/svg/camera.svg

@@ -0,0 +1,6 @@
+<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'>
+    <g transform='matrix(.150985 0 0 .150985 -3.32603 -2.72209)' fill='none' stroke='#fff' stroke-width='16'>
+        <path d='M208 208H48c-8.777 0-16-7.223-16-16V80c0-8.777 7.223-16 16-16h32l16-24h64l16 24h32c8.777 0 16 7.223 16 16v112c0 8.777-7.223 16-16 16z'/>
+        <circle cx='128' cy='132' r='36'/>
+    </g>
+</svg>

src/assets/svg/caret-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='100%' stroke='#fff' fill='#fff' height='100%' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
+    <path d='M6.755 1.924l-6 13.649c-.119.27-.119.578 0 .849l6 13.649c.234.533.857.775 1.389.541s.775-.857.541-1.389L2.871 15.997 8.685 2.773c.234-.533-.008-1.155-.541-1.389s-1.155.008-1.389.541z'/>
+</svg>

src/assets/svg/caret-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='100%' stroke='#fff' fill='#fff' height='100%' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
+    <path d='M2.685 1.924l6 13.649c.119.27.119.578 0 .849l-6 13.649c-.234.533-.857.775-1.389.541s-.775-.857-.541-1.389l5.813-13.225L.755 2.773c-.234-.533.008-1.155.541-1.389s1.155.008 1.389.541z'/>
+</svg>

src/assets/svg/clock.svg

@@ -0,0 +1,6 @@
+<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'>
+    <g transform='matrix(.150026 0 0 .150026 -3.20332 -3.20332)' fill='none' stroke='#fff' stroke-width='16'>
+        <circle cx='128' cy='128' r='96'/>
+        <path d='M128 72v56h56'/>
+    </g>
+</svg>

src/assets/svg/close.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='M29.928,2.072L2.072,29.928'/>
+    <path d='M29.928,29.928L2.072,2.072'/>
+</svg>

src/assets/svg/cloud.svg

@@ -0,0 +1,3 @@
+<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='M9.773 16c0-5.694 4.685-10.379 10.379-10.379S30.53 10.306 30.53 16s-4.685 10.379-10.379 10.379H8.735c-3.982-.005-7.256-3.283-7.256-7.265s3.28-7.265 7.265-7.265c.606 0 1.21.076 1.797.226' fill='none' stroke='#fff' stroke-width='2.076'/>
+</svg>

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>

src/assets/svg/controller.svg

@@ -0,0 +1,3 @@
+<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='M19.193 12.807h3.193m-13.836 0h4.257'/><path d='M10.678 10.678v4.257'/><path d='M13.061 19.193l-5.602 6.359c-.698.698-1.646 1.09-2.633 1.09-2.044 0-3.725-1.682-3.725-3.725a3.73 3.73 0 0 1 .056-.646l2.177-11.194a6.94 6.94 0 0 1 6.799-5.721h11.722c3.795 0 6.918 3.123 6.918 6.918s-3.123 6.918-6.918 6.918h-8.793z'/><path d='M18.939 19.193l5.602 6.359c.698.698 1.646 1.09 2.633 1.09 2.044 0 3.725-1.682 3.725-3.725a3.73 3.73 0 0 0-.056-.646l-2.177-11.194'/>
+</svg>

src/assets/svg/copy.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 32 32'>
+    <path d='M1.498 6.772h23.73v23.73H1.498zm5.274-5.274h23.73v23.73'/>
+</svg>

src/assets/svg/create-shortcut.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='M13.253 3.639c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V3.639zm0 16.481c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zm16.481 0c0-.758-.615-1.373-1.373-1.373H20.12c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zM19.262 7.76h9.957'/>
+    <path d='M24.24 2.781v9.957'/>
+</svg>

src/assets/svg/cursor-text.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 32 32'>
+    <path d='M16 7.3a5.83 5.83 0 0 1 5.8-5.8h2.9m0 29h-2.9a5.83 5.83 0 0 1-5.8-5.8'/><path d='M7.3 30.5h2.9a5.83 5.83 0 0 0 5.8-5.8V7.3a5.83 5.83 0 0 0-5.8-5.8H7.3'/><path d='M11.65 16h8.7'/>
+</svg>

src/assets/svg/display.svg

@@ -0,0 +1,3 @@
+<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='M1.238 21.119c0 1.928 1.565 3.493 3.493 3.493H27.27c1.928 0 3.493-1.565 3.493-3.493V5.961c0-1.928-1.565-3.493-3.493-3.493H4.731c-1.928 0-3.493 1.565-3.493 3.493v15.158zm19.683 8.413H11.08'/>
+</svg>

src/assets/svg/download.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='M16 19.955V1.5m14.5 18.455v9.227c0 .723-.595 1.318-1.318 1.318H2.818c-.723 0-1.318-.595-1.318-1.318v-9.227'/>
+    <path d='M22.591 13.364L16 19.955l-6.591-6.591'/>
+</svg>

src/assets/svg/home.svg

@@ -0,0 +1,3 @@
+<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='M12.217 30.503V20.414h7.567v10.089h10.089V15.37a1.26 1.26 0 0 0-.369-.892L16.892 1.867a1.26 1.26 0 0 0-1.784 0L2.497 14.478a1.26 1.26 0 0 0-.369.892v15.133h10.089z'/>
+</svg>

src/assets/svg/microphone-slash.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='M16 25.125v5.368M5.265 4.728l21.471 23.618m-4.789-5.267c-1.698 1.326-3.793 2.047-5.947 2.047-5.3 0-9.662-4.362-9.662-9.662'/>
+    <path d='M25.662 15.463a9.62 9.62 0 0 1-.978 4.242m-5.64.187c-.895.616-1.957.943-3.043.939-2.945 0-5.368-2.423-5.368-5.368v-4.831m.442-5.896A5.38 5.38 0 0 1 16 1.507c2.945 0 5.368 2.423 5.368 5.368v8.588c0 .188-.01.375-.03.562'/>
+</svg>

src/assets/svg/microphone.svg

@@ -0,0 +1,3 @@
+<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='M21.368 6.875A5.37 5.37 0 0 0 16 1.507a5.37 5.37 0 0 0-5.368 5.368v8.588A5.37 5.37 0 0 0 16 20.831a5.37 5.37 0 0 0 5.368-5.368V6.875zM16 25.125v5.368m9.662-15.03c0 5.3-4.362 9.662-9.662 9.662s-9.662-4.362-9.662-9.662'/>
+</svg>

src/assets/svg/mouse-settings.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 32 32'>
+    <g transform='matrix(1.10403 0 0 1.10403 -4.17656 -.560429)' fill='none' stroke='#fff'><g stroke-width='1.755'><path d='M24.49 16.255l.01-8.612A6.15 6.15 0 0 0 18.357 1.5h-5.714A6.15 6.15 0 0 0 6.5 7.643v13.715a6.15 6.15 0 0 0 6.143 6.143h5.714'/><path d='M15.5 12.501v-6'/></g><circle cx='48' cy='48' r='15' stroke-width='7.02' transform='matrix(.142357 0 0 .142357 17.667421 16.541885)'/><path d='M24.61 27.545h-.214l-1.711.955c-.666-.224-1.284-.572-1.821-1.025l-.006-1.922-.107-.182-1.701-.969c-.134-.678-.134-1.375 0-2.053l1.7-.966.107-.182.009-1.922c.537-.454 1.154-.803 1.82-1.029l1.708.955h.214l1.708-.955c.666.224 1.284.572 1.821 1.025l.006 1.922.107.182 1.7.968c.134.678.134 1.375 0 2.053l-1.7.966-.107.182-.009 1.922c-.536.455-1.154.804-1.819 1.029l-1.706-.955z' stroke-width='.999'/></g>
+</svg>

src/assets/svg/mouse.svg

@@ -0,0 +1,3 @@
+<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='M26.256 8.185c0-3.863-3.137-7-7-7h-6.512c-3.863 0-7 3.137-7 7v15.629c0 3.863 3.137 7 7 7h6.512c3.863 0 7-3.137 7-7V8.185z'/><path d='M16 13.721V6.883'/>
+</svg>

src/assets/svg/native-mkb.svg

@@ -0,0 +1,10 @@
+<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'>
+    <g stroke-width='2.1'>
+        <path d='m15.817 6h-10.604c-2.215 0-4.013 1.798-4.013 4.013v12.213c0 2.215 1.798 4.013 4.013 4.013h11.21'/>
+        <path d='m5.698 20.617h1.124m-1.124-4.517h7.9m-7.881-4.5h7.9m-2.3 9h2.2'/>
+    </g>
+    <g stroke-width='2.13'>
+        <path d='m30.805 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.4c0 3.919 3.182 7.1 7.1 7.1s7.1-3.181 7.1-7.1z'/>
+        <path d='m23.705 14.715v-4.753'/>
+    </g>
+</svg>

src/assets/svg/new.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 32 32'>
+    <path d='M26.875 30.5H5.125c-.663 0-1.208-.545-1.208-1.208V2.708c0-.663.545-1.208 1.208-1.208h14.5l8.458 8.458v19.333c0 .663-.545 1.208-1.208 1.208z'/><path d='M19.625 1.5v8.458h8.458m-15.708 9.667h7.25'/><path d='M16 16v7.25'/>
+</svg>

src/assets/svg/power.svg

@@ -0,0 +1,3 @@
+<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='M16 2.445v12.91m7.746-11.619C27.631 6.27 30.2 10.37 30.2 15.355c0 7.79-6.41 14.2-14.2 14.2s-14.2-6.41-14.2-14.2c0-4.985 2.569-9.085 6.454-11.619'/>
+</svg>

src/assets/svg/question.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 32 32'>
+    <g transform='matrix(.256867 0 0 .256867 -16.878964 -18.049342)'><circle cx='128' cy='180' r='12' fill='#fff'/><path d='M128 144v-8c17.67 0 32-12.54 32-28s-14.33-28-32-28-32 12.54-32 28v4' fill='none' stroke='#fff' stroke-width='16'/></g>
+</svg>

src/assets/svg/refresh.svg

@@ -0,0 +1,3 @@
+<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='M23.247 12.377h7.247V5.13'/><path d='M23.911 25.663a13.29 13.29 0 0 1-9.119 3.623C7.504 29.286 1.506 23.289 1.506 16S7.504 2.713 14.792 2.713a13.29 13.29 0 0 1 9.395 3.891l6.307 5.772'/>
+</svg>

src/assets/svg/remote-play.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 32 32'>
+    <g transform='matrix(.492308 0 0 .581818 -14.7692 -11.6364)'><clipPath id='A'><path d='M30 20h65v55H30z'/></clipPath><g clip-path='url(#A)'><g transform='matrix(.395211 0 0 .334409 11.913 7.01124)'><g transform='matrix(.555556 0 0 .555556 57.8889 -20.2417)' fill='none' stroke='#fff' stroke-width='13.88'><path d='M200 140.564c-42.045-33.285-101.955-33.285-144 0M168 165c-23.783-17.3-56.217-17.3-80 0'/></g><g transform='matrix(-.555556 0 0 -.555556 200.111 262.393)'><g transform='matrix(1 0 0 1 0 11.5642)'><path d='M200 129c-17.342-13.728-37.723-21.795-58.636-24.198C111.574 101.378 80.703 109.444 56 129' fill='none' stroke='#fff' stroke-width='13.88'/></g><path d='M168 165c-23.783-17.3-56.217-17.3-80 0' fill='none' stroke='#fff' stroke-width='13.88'/></g><g transform='matrix(.75 0 0 .75 32 32)'><path d='M24 72h208v93.881H24z' fill='none' stroke='#fff' stroke-linejoin='miter' stroke-width='9.485'/><circle cx='188' cy='128' r='12' stroke-width='10' transform='matrix(.708333 0 0 .708333 71.8333 12.8333)'/><path d='M24.358 103.5h110' fill='none' stroke='#fff' stroke-linecap='butt' stroke-width='10.282'/></g></g></g></g>
+</svg>

src/assets/svg/speaker-high.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='M8.964 21.417h-6.5a1.09 1.09 0 0 1-1.083-1.083v-8.667a1.09 1.09 0 0 1 1.083-1.083h6.5L18.714 3v26l-9.75-7.583z'/>
+    <path d='M8.964 10.583v10.833m15.167-8.28a4.35 4.35 0 0 1 0 5.728M28.149 9.5a9.79 9.79 0 0 1 0 13'/>
+</svg>

src/assets/svg/speaker-slash.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' stroke='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M5.462 3.4c-.205-.23-.499-.363-.808-.363-.592 0-1.079.488-1.079 1.08a1.08 1.08 0 0 0 .289.736l4.247 4.672H2.504a2.17 2.17 0 0 0-2.16 2.16v8.637a2.17 2.17 0 0 0 2.16 2.16h6.107l9.426 7.33a1.08 1.08 0 0 0 .662.227c.592 0 1.08-.487 1.08-1.079v-6.601l5.679 6.247a1.08 1.08 0 0 0 .808.363c.592 0 1.08-.487 1.08-1.079a1.08 1.08 0 0 0-.29-.736L5.462 3.4zm-2.958 8.285h5.398v8.637H2.504v-8.637zM17.62 26.752l-7.558-5.878V11.67l7.558 8.313v6.769zm5.668-8.607c1.072-1.218 1.072-3.063 0-4.281a1.08 1.08 0 0 1-.293-.74c0-.592.487-1.079 1.079-1.079a1.08 1.08 0 0 1 .834.393 5.42 5.42 0 0 1 0 7.137 1.08 1.08 0 0 1-.81.365c-.593 0-1.08-.488-1.08-1.08 0-.263.096-.517.27-.715zM12.469 7.888c-.147-.19-.228-.423-.228-.663a1.08 1.08 0 0 1 .417-.853l5.379-4.184a1.08 1.08 0 0 1 .662-.227c.593 0 1.08.488 1.08 1.08v10.105c0 .593-.487 1.08-1.08 1.08s-1.079-.487-1.079-1.08V5.255l-3.636 2.834c-.469.362-1.153.273-1.515-.196v-.005zm19.187 8.115a10.79 10.79 0 0 1-2.749 7.199 1.08 1.08 0 0 1-.793.347c-.593 0-1.08-.487-1.08-1.079 0-.26.094-.511.264-.708 2.918-3.262 2.918-8.253 0-11.516-.184-.2-.287-.461-.287-.733 0-.592.487-1.08 1.08-1.08a1.08 1.08 0 0 1 .816.373 10.78 10.78 0 0 1 2.749 7.197z' fill-rule='nonzero'/>
+</svg>

src/assets/svg/stream-settings.svg

@@ -0,0 +1,3 @@
+<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'>
+    <g transform='matrix(.142357 0 0 .142357 -2.22021 -2.22164)' fill='none' stroke='#fff' stroke-width='16'><circle cx='128' cy='128' r='40'/><path d='M130.05 206.11h-4L94 224c-12.477-4.197-24.049-10.711-34.11-19.2l-.12-36c-.71-1.12-1.38-2.25-2-3.41L25.9 147.24a99.16 99.16 0 0 1 0-38.46l31.84-18.1c.65-1.15 1.32-2.29 2-3.41l.16-36C69.951 42.757 81.521 36.218 94 32l32 17.89h4L162 32c12.477 4.197 24.049 10.711 34.11 19.2l.12 36c.71 1.12 1.38 2.25 2 3.41l31.85 18.14a99.16 99.16 0 0 1 0 38.46l-31.84 18.1c-.65 1.15-1.32 2.29-2 3.41l-.16 36A104.59 104.59 0 0 1 162 224l-31.95-17.89z'/></g>
+</svg>

src/assets/svg/stream-stats.svg

@@ -0,0 +1,3 @@
+<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='M1.181 24.55v-3.259c0-8.19 6.576-14.952 14.767-14.98H16c8.13 0 14.819 6.69 14.819 14.819v3.42c0 .625-.515 1.14-1.14 1.14H2.321c-.625 0-1.14-.515-1.14-1.14z'/><path d='M16 6.311v4.56M12.58 25.69l9.12-12.54m4.559 5.7h4.386m-29.266 0H5.74'/>
+</svg>

src/assets/svg/touch-control-disable.svg

@@ -0,0 +1,9 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
+    <g fill='none' stroke='#fff'>
+        <path d='M6.021 5.021l20 22' stroke-width='2'/>
+        <path d='M8.735 8.559H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h19.34m4.289 0h2.594a.89.89 0 0 0 .889-.888V9.448a.89.89 0 0 0-.889-.889H12.971' stroke-miterlimit='1.5' stroke-width='2.083'/>
+    </g>
+    <path d='M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z'/>
+    <path d='M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z'/>
+    <circle cx='25.345' cy='18.582' r='2.561' fill='none' stroke='#fff' stroke-width='1.78' transform='matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)'/>
+</svg>

src/assets/svg/touch-control-enable.svg

@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
+    <path d='M30.021 9.448a.89.89 0 0 0-.889-.889H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h26.223a.89.89 0 0 0 .889-.888V9.448z' fill='none' stroke='#fff' stroke-width='2.083'/>
+    <path d='M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z'/>
+    <path d='M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z'/>
+    <circle cx='25.345' cy='18.582' r='2.561' fill='none' stroke='#fff' stroke-width='1.78' transform='matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)'/>
+</svg>

src/assets/svg/trash.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 0 32 32'>
+    <path d='M29.5 6.182h-27m9.818 7.363v9.818m7.364-9.818v9.818'/><path d='M27.045 6.182V29.5c0 .673-.554 1.227-1.227 1.227H6.182c-.673 0-1.227-.554-1.227-1.227V6.182m17.181 0V3.727a2.47 2.47 0 0 0-2.455-2.455h-7.364a2.47 2.47 0 0 0-2.455 2.455v2.455'/>
+</svg>

src/assets/svg/true-achievements.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' stroke='nons' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M2.497 14.127c.781-6.01 5.542-10.849 11.551-11.708V0C6.634.858.858 6.712 0 14.127h2.497zM17.952 2.419V0C25.366.858 31.142 6.712 32 14.127h-2.497c-.781-6.01-5.542-10.849-11.551-11.708zM2.497 17.873c.781 6.01 5.542 10.849 11.551 11.708V32C6.634 31.142.858 25.288 0 17.873h2.497zm27.006 0H32C31.142 25.288 25.366 31.142 17.952 32v-2.419c6.009-.859 10.77-5.698 11.551-11.708zm-19.2-4.527h2.028a.702.702 0 1 0 0-1.404h-2.107a1.37 1.37 0 0 1-1.326-1.327V9.21a.7.7 0 0 0-.703-.703c-.387 0-.703.316-.703.7v1.408c.079 1.483 1.25 2.731 2.811 2.731zm2.809 7.337h-2.888a1.37 1.37 0 0 1-1.326-1.327v-4.917c0-.387-.316-.703-.7-.703a.7.7 0 0 0-.706.703v4.917a2.77 2.77 0 0 0 2.732 2.732h2.81c.387 0 .702-.316.702-.7.078-.393-.234-.705-.624-.705zM25.6 19.2a.7.7 0 0 0-.702-.702c-.387 0-.703.316-.703.699v.081c0 .702-.546 1.326-1.248 1.326H19.98c-.702-.078-1.248-.624-1.248-1.326v-.312c0-.78.624-1.327 1.326-1.327h2.811a2.77 2.77 0 0 0 2.731-2.732v-.312a2.68 2.68 0 0 0-2.576-2.732h-4.76a.702.702 0 1 0 0 1.405h4.526a1.37 1.37 0 0 1 1.327 1.327v.234c0 .781-.624 1.327-1.327 1.327h-2.81a2.77 2.77 0 0 0-2.731 2.732v.312a2.77 2.77 0 0 0 2.731 2.732h2.967a2.74 2.74 0 0 0 2.575-2.732s.078.078.078 0z'/>
+</svg>

src/assets/svg/upload.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='M16 19.905V1.682m14.318 18.223v9.112a1.31 1.31 0 0 1-1.302 1.302H2.983a1.31 1.31 0 0 1-1.302-1.302v-9.112'/>
+    <path d='M9.492 8.19L16 1.682l6.508 6.508'/>
+</svg>

src/assets/svg/virtual-controller.svg

@@ -0,0 +1,11 @@
+<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'>
+    <g stroke-width='2.06'>
+        <path d='M8.417 13.218h4.124'/>
+        <path d='M10.479 11.155v4.125'/>
+        <path d='M12.787 19.404L7.36 25.565a3.61 3.61 0 0 1-2.551 1.056A3.63 3.63 0 0 1 1.2 23.013c0-.21.018-.42.055-.626l2.108-10.845C3.923 8.356 6.714 6.007 9.949 6h5.192'/>
+    </g>
+    <g stroke-width='2.11'>
+        <path d='M30.8 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.421c0 3.919 3.181 7.1 7.1 7.1s7.1-3.181 7.1-7.1V13.1z'/>
+        <path d='M23.7 14.724V9.966'/>
+    </g>
+</svg>

src/enums/bypass-servers.ts

@@ -0,0 +1,17 @@
+import { t } from "@/utils/translation"
+
+export const BypassServers = {
+    'br': t('brazil'),
+    'jp': t('japan'),
+    'kr': t('korea'),
+    'pl': t('poland'),
+    'us': t('united-states'),
+}
+
+export const BypassServerIps: Record<keyof typeof BypassServers, string> = {
+    'br': '169.150.198.66',
+    'kr': '121.125.60.151',
+    'jp': '138.199.21.239',
+    'pl': '45.134.212.66',
+    'us': '143.244.47.65',
+}

src/enums/game-pass-gallery.ts

@@ -0,0 +1,6 @@
+export enum GamePassCloudGallery {
+    ALL = '29a81209-df6f-41fd-a528-2ae6b91f719c',
+    MOST_POPULAR = 'e7590b22-e299-44db-ae22-25c61405454c',
+    NATIVE_MKB = '8fa264dd-124f-4af3-97e8-596fcdf4b486',
+    TOUCH = '9c86f07a-f3e8-45ad-82a0-a1f759597059',
+}

src/enums/mkb.ts

@@ -0,0 +1,102 @@
+import type { GamepadKeyNameType } from "@/types/mkb";
+import { PrompFont } from "@enums/prompt-font";
+
+export enum GamepadKey {
+    A = 0,
+    B = 1,
+    X = 2,
+    Y = 3,
+    LB = 4,
+    RB = 5,
+    LT = 6,
+    RT = 7,
+    SELECT = 8,
+    START = 9,
+    L3 = 10,
+    R3 = 11,
+    UP = 12,
+    DOWN = 13,
+    LEFT = 14,
+    RIGHT = 15,
+    HOME = 16,
+    SHARE = 17,
+
+    LS_UP = 100,
+    LS_DOWN = 101,
+    LS_LEFT = 102,
+    LS_RIGHT = 103,
+
+    RS_UP = 200,
+    RS_DOWN = 201,
+    RS_LEFT = 202,
+    RS_RIGHT = 203,
+};
+
+
+export const GamepadKeyName: GamepadKeyNameType = {
+    [GamepadKey.A]: ['A', PrompFont.A],
+    [GamepadKey.B]: ['B', PrompFont.B],
+    [GamepadKey.X]: ['X', PrompFont.X],
+    [GamepadKey.Y]: ['Y', PrompFont.Y],
+
+    [GamepadKey.LB]: ['LB', PrompFont.LB],
+    [GamepadKey.RB]: ['RB', PrompFont.RB],
+    [GamepadKey.LT]: ['LT', PrompFont.LT],
+    [GamepadKey.RT]: ['RT', PrompFont.RT],
+
+    [GamepadKey.SELECT]: ['Select', PrompFont.SELECT],
+    [GamepadKey.START]: ['Start', PrompFont.START],
+    [GamepadKey.HOME]: ['Home', PrompFont.HOME],
+
+    [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', 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', 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],
+};
+
+
+export enum GamepadStick {
+    LEFT = 0,
+    RIGHT = 1,
+};
+
+export enum MouseButtonCode {
+    LEFT_CLICK = 'Mouse0',
+    RIGHT_CLICK = 'Mouse2',
+    MIDDLE_CLICK = 'Mouse1',
+};
+
+export enum MouseMapTo {
+    OFF = 0,
+    LS = 1,
+    RS = 2,
+}
+
+
+export enum WheelCode {
+    SCROLL_UP = 'ScrollUp',
+    SCROLL_DOWN = 'ScrollDown',
+    SCROLL_LEFT = 'ScrollLeft',
+    SCROLL_RIGHT = 'ScrollRight',
+};
+
+export enum MkbPresetKey {
+    MOUSE_MAP_TO = 'map_to',
+
+    MOUSE_SENSITIVITY_X = 'sensitivity_x',
+    MOUSE_SENSITIVITY_Y = 'sensitivity_y',
+
+    MOUSE_DEADZONE_COUNTERWEIGHT = 'deadzone_counterweight',
+}

src/enums/pref-keys.ts

@@ -0,0 +1,103 @@
+export enum StorageKey {
+    GLOBAL = 'better_xcloud',
+}
+
+export enum PrefKey {
+    LAST_UPDATE_CHECK = 'version_last_check',
+    LATEST_VERSION = 'version_latest',
+    CURRENT_VERSION = 'version_current',
+
+    BETTER_XCLOUD_LOCALE = 'bx_locale',
+
+    SERVER_REGION = 'server_region',
+    SERVER_BYPASS_RESTRICTION = 'server_bypass_restriction',
+
+    PREFER_IPV6_SERVER = 'prefer_ipv6_server',
+    STREAM_TARGET_RESOLUTION = 'stream_target_resolution',
+    STREAM_PREFERRED_LOCALE = 'stream_preferred_locale',
+    STREAM_CODEC_PROFILE = 'stream_codec_profile',
+
+    USER_AGENT_PROFILE = 'user_agent_profile',
+    STREAM_SIMPLIFY_MENU = 'stream_simplify_menu',
+
+    STREAM_COMBINE_SOURCES = 'stream_combine_sources',
+
+    STREAM_TOUCH_CONTROLLER = 'stream_touch_controller',
+    STREAM_TOUCH_CONTROLLER_AUTO_OFF = 'stream_touch_controller_auto_off',
+    STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY = 'stream_touch_controller_default_opacity',
+    STREAM_TOUCH_CONTROLLER_STYLE_STANDARD = 'stream_touch_controller_style_standard',
+    STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM = 'stream_touch_controller_style_custom',
+
+    STREAM_DISABLE_FEEDBACK_DIALOG = 'stream_disable_feedback_dialog',
+
+    BITRATE_VIDEO_MAX = 'bitrate_video_max',
+
+    GAME_BAR_POSITION = 'game_bar_position',
+
+    LOCAL_CO_OP_ENABLED = 'local_co_op_enabled',
+    // LOCAL_CO_OP_SEPARATE_TOUCH_CONTROLLER = 'local_co_op_separate_touch_controller',
+
+    CONTROLLER_ENABLE_SHORTCUTS = 'controller_enable_shortcuts',
+    CONTROLLER_ENABLE_VIBRATION = 'controller_enable_vibration',
+    CONTROLLER_DEVICE_VIBRATION = 'controller_device_vibration',
+    CONTROLLER_VIBRATION_INTENSITY = 'controller_vibration_intensity',
+    CONTROLLER_SHOW_CONNECTION_STATUS = 'controller_show_connection_status',
+
+    NATIVE_MKB_ENABLED = 'native_mkb_enabled',
+    NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'native_mkb_scroll_x_sensitivity',
+    NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY = 'native_mkb_scroll_y_sensitivity',
+
+    MKB_ENABLED = 'mkb_enabled',
+    MKB_HIDE_IDLE_CURSOR = 'mkb_hide_idle_cursor',
+    MKB_ABSOLUTE_MOUSE = 'mkb_absolute_mouse',
+    MKB_DEFAULT_PRESET_ID = 'mkb_default_preset_id',
+
+    SCREENSHOT_APPLY_FILTERS = 'screenshot_apply_filters',
+
+    BLOCK_TRACKING = 'block_tracking',
+    BLOCK_SOCIAL_FEATURES = 'block_social_features',
+    SKIP_SPLASH_VIDEO = 'skip_splash_video',
+    HIDE_DOTS_ICON = 'hide_dots_icon',
+    REDUCE_ANIMATIONS = 'reduce_animations',
+
+    UI_LOADING_SCREEN_GAME_ART = 'ui_loading_screen_game_art',
+    UI_LOADING_SCREEN_WAIT_TIME = 'ui_loading_screen_wait_time',
+    UI_LOADING_SCREEN_ROCKET = 'ui_loading_screen_rocket',
+
+    UI_CONTROLLER_FRIENDLY = 'ui_controller_friendly',
+    UI_LAYOUT = 'ui_layout',
+    UI_SCROLLBAR_HIDE = 'ui_scrollbar_hide',
+    UI_HIDE_SECTIONS = 'ui_hide_sections',
+
+    UI_HOME_CONTEXT_MENU_DISABLED = 'ui_home_context_menu_disabled',
+    UI_GAME_CARD_SHOW_WAIT_TIME = 'ui_game_card_show_wait_time',
+
+    VIDEO_PLAYER_TYPE = 'video_player_type',
+    VIDEO_PROCESSING = 'video_processing',
+    VIDEO_POWER_PREFERENCE = 'video_power_preference',
+    VIDEO_MAX_FPS = 'video_max_fps',
+    VIDEO_SHARPNESS = 'video_sharpness',
+    VIDEO_RATIO = 'video_ratio',
+    VIDEO_BRIGHTNESS = 'video_brightness',
+    VIDEO_CONTRAST = 'video_contrast',
+    VIDEO_SATURATION = 'video_saturation',
+
+    AUDIO_MIC_ON_PLAYING = 'audio_mic_on_playing',
+    AUDIO_ENABLE_VOLUME_CONTROL = 'audio_enable_volume_control',
+    AUDIO_VOLUME = 'audio_volume',
+
+    STATS_ITEMS = 'stats_items',
+    STATS_SHOW_WHEN_PLAYING = 'stats_show_when_playing',
+    STATS_QUICK_GLANCE = 'stats_quick_glance',
+    STATS_POSITION = 'stats_position',
+    STATS_TEXT_SIZE = 'stats_text_size',
+    STATS_TRANSPARENT = 'stats_transparent',
+    STATS_OPACITY = 'stats_opacity',
+    STATS_CONDITIONAL_FORMATTING = 'stats_conditional_formatting',
+
+    REMOTE_PLAY_ENABLED = 'xhome_enabled',
+    REMOTE_PLAY_RESOLUTION = 'xhome_resolution',
+
+    GAME_FORTNITE_FORCE_CONSOLE = 'game_fortnite_force_console',
+    GAME_MSFS2020_FORCE_NATIVE_MKB = 'game_msfs2020_force_native_mkb',
+}

src/enums/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 = '⇁',
+}

src/enums/stream-player.ts

@@ -0,0 +1,9 @@
+export enum StreamPlayerType {
+    VIDEO = 'default',
+    WEBGL2 = 'webgl2',
+}
+
+export enum StreamVideoProcessing {
+    USM = 'usm',
+    CAS = 'cas',
+}

src/enums/ui-sections.ts

@@ -0,0 +1,8 @@
+export enum UiSection {
+    ALL_GAMES = 'all-games',
+    FRIENDS = 'friends',
+    MOST_POPULAR = 'most-popular',
+    NATIVE_MKB = 'native-mkb',
+    NEWS = 'news',
+    TOUCH = 'touch',
+}

src/enums/user-agent.ts

@@ -0,0 +1,9 @@
+export enum UserAgentProfile {
+    WINDOWS_EDGE = 'windows-edge',
+    MACOS_SAFARI = 'macos-safari',
+    SMART_TV_GENERIC = 'smarttv-generic',
+    SMART_TV_TIZEN = 'smarttv-tizen',
+    VR_OCULUS = 'vr-oculus',
+    DEFAULT = 'default',
+    CUSTOM = 'custom',
+}

src/index.ts

@@ -1,83 +1,147 @@
-import "./utils/global";
+import { compressCss, isFullVersion } from "@macros/build" with {type: "macro"};
-import { BxEvent } from "./utils/bx-event";
+
-import { BX_FLAGS } from "./utils/bx-flags";
+import "@utils/global";
-import { BxExposed } from "./utils/bx-exposed";
+import { BxEvent } from "@utils/bx-event";
-import { t } from "./utils/translation";
+import { BX_FLAGS } from "@utils/bx-flags";
-import { interceptHttpRequests } from "./utils/network";
+import { BxExposed } from "@utils/bx-exposed";
-import { CE } from "./utils/html";
+import { t } from "@utils/translation";
-import { showGamepadToast } from "./utils/gamepad";
+import { interceptHttpRequests } from "@utils/network";
-import { MkbHandler } from "./modules/mkb/mkb-handler";
+import { CE } from "@utils/html";
-import { StreamBadges } from "./modules/stream/stream-badges";
+import { showGamepadToast } from "@utils/gamepad";
-import { StreamStats } from "./modules/stream/stream-stats";
+import { EmulatedMkbHandler } from "@modules/mkb/mkb-handler";
-import { addCss } from "./utils/css";
+import { StreamBadges } from "@modules/stream/stream-badges";
-import { Toast } from "./utils/toast";
+import { StreamStats } from "@modules/stream/stream-stats";
-import { setupBxUi, updateVideoPlayerCss } from "./modules/ui/ui";
+import { addCss, preloadFonts } from "@utils/css";
-import { PrefKey, getPref } from "./utils/preferences";
+import { Toast } from "@utils/toast";
-import { LoadingScreen } from "./modules/loading-screen";
+import { LoadingScreen } from "@modules/loading-screen";
-import { MouseCursorHider } from "./modules/mkb/mouse-cursor-hider";
+import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
-import { TouchController } from "./modules/touch-controller";
+import { TouchController } from "@modules/touch-controller";
-import { watchHeader } from "./modules/ui/header";
+import { checkForUpdate, disablePwa, productTitleToSlug } from "@utils/utils";
-import { checkForUpdate, disablePwa } from "./utils/utils";
+import { Patcher } from "@modules/patcher";
-import { Patcher } from "./modules/patcher";
+import { RemotePlayManager } from "@/modules/remote-play-manager";
-import { RemotePlay } from "./modules/remote-play";
+import { onHistoryChanged, patchHistoryMethod } from "@utils/history";
-import { onHistoryChanged, patchHistoryMethod } from "./utils/history";
+import { VibrationManager } from "@modules/vibration-manager";
-import { VibrationManager } from "./modules/vibration-manager";
+import { overridePreloadState } from "@utils/preload-state";
-import { PreloadedState } from "./utils/titles-info";
+import { disableAdobeAudienceManager, patchAudioContext, patchCanvasContext, patchMeControl, patchPointerLockApi, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
-import { patchAudioContext, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "./utils/monkey-patches";
+import { AppInterface, STATES } from "@utils/global";
-import { STATES } from "./utils/global";
+import { BxLogger } from "@utils/bx-logger";
-import { injectStreamMenuButtons } from "./modules/stream/stream-ui";
+import { GameBar } from "./modules/game-bar/game-bar";
+import { Screenshot } from "./utils/screenshot";
+import { NativeMkbHandler } from "./modules/mkb/native-mkb-handler";
+import { GuideMenu } from "./modules/ui/guide-menu";
+import { updateVideoPlayer } from "./modules/stream/stream-settings-utils";
+import { UiSection } from "./enums/ui-sections";
+import { HeaderSection } from "./modules/ui/header";
+import { GameTile } from "./modules/ui/game-tile";
+import { ProductDetailsPage } from "./modules/ui/product-details";
+import { NavigationDialogManager } from "./modules/ui/dialog/navigation-dialog";
+import { PrefKey } from "./enums/pref-keys";
+import { getPref, StreamTouchController } from "./utils/settings-storages/global-settings-storage";
+import { SettingsNavigationDialog } from "./modules/ui/dialog/settings-dialog";
+import { StreamUiHandler } from "./modules/stream/stream-ui";
+import { UserAgent } from "./utils/user-agent";
+import { XboxApi } from "./utils/xbox-api";
+import { StreamStatsCollector } from "./utils/stream-stats-collector";
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
-    window.addEventListener('load', e => {
+    const nativePushState = window.history['pushState'];
-            window.location.search.includes('loggedIn') && window.setTimeout(() => {
+    window.history['pushState'] = function(...args: any[]) {
-                const location = window.location;
+        const url = args[2];
-                // @ts-ignore
+        if (url && (url.startsWith('/play') || url.substring(6).startsWith('/play'))) {
-                location.pathname.includes('/play') && location.reload(true);
+            console.log('Redirecting to xbox.com/play');
-            }, 2000);
+            window.stop();
-        });
+            window.location.href = 'https://www.xbox.com' + url;
+            return;
+        }
+
+        // @ts-ignore
+        return nativePushState.apply(this, arguments);
+    }
     // Stop processing the script
     throw new Error('[Better xCloud] Refreshing the page after logging in');
 }
 
-console.log(`[Better xCloud] readyState: ${document.readyState}`);
+BxLogger.info('readyState', document.readyState);
 
-if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
+if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     // Stop loading
     window.stop();
 
-    // Show the reloading overlay
+    // We need to set it to an empty string first to work around Bun's bug
-    const css = `
+    // https://github.com/oven-sh/bun/issues/12067
+    let css = '';
+    css += compressCss(`
 .bx-reload-overlay {
     position: fixed;
     top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
     background: #000000cc;
     z-index: 9999;
-    width: 100%;
-    line-height: 100vh;
     color: #fff;
     text-align: center;
     font-weight: 400;
     font-family: "Segoe UI", Arial, Helvetica, sans-serif;
     font-size: 1.3rem;
 }
-`;
+
+.bx-reload-overlay *:focus {
+    outline: none !important;
+}
+
+.bx-reload-overlay > div {
+    margin: 0 auto;
+}
+
+.bx-reload-overlay a {
+    text-decoration: none;
+    display: inline-block;
+    background: #107c10;
+    color: white;
+    border-radius: 4px;
+    padding: 6px;
+}
+`);
+
+    const isSafari = UserAgent.isSafari();
+    let $secondaryAction: HTMLElement;
+    if (isSafari) {
+        $secondaryAction = CE('p', {}, t('settings-reloading'));
+    } else {
+        $secondaryAction = CE('a', {
+            href: 'https://better-xcloud.github.io/troubleshooting',
+            target: '_blank',
+        }, '🤓 ' + t('how-to-fix'));
+    }
+
+    // Show the reloading overlay
     const $fragment = document.createDocumentFragment();
     $fragment.appendChild(CE('style', {}, css));
-    $fragment.appendChild(CE('div', {'class': 'bx-reload-overlay'}, t('safari-failed-message')));
+    $fragment.appendChild(CE('div',{
+        class: 'bx-reload-overlay',
+    },
+        CE('div', {},
+            CE('p', {}, t('load-failed-message')),
+            $secondaryAction,
+        ),
+    ));
 
     document.documentElement.appendChild($fragment);
 
-    // Reload the page
+    // Reload the page if using Safari
     // @ts-ignore
-    window.location.reload(true);
+    isSafari && window.location.reload(true);
 
     // Stop processing the script
     throw new Error('[Better xCloud] Executing workaround for Safari');
 }
 
-// Automatically reload the page when running into the "We are sorry..." error message
 window.addEventListener('load', e => {
+    // Automatically reload the page when running into the "We are sorry..." error message
     window.setTimeout(() => {
         if (document.body.classList.contains('legacyBackground')) {
             // Has error message -> reload page
@@ -88,6 +152,31 @@ window.addEventListener('load', e => {
     }, 3000);
 });
 
+document.addEventListener('readystatechange', e => {
+    if (document.readyState !== 'interactive') {
+        return;
+    }
+
+    STATES.isSignedIn = !!((window as any).xbcUser?.isSignedIn);
+
+    if (STATES.isSignedIn) {
+        // Preload Remote Play
+        getPref(PrefKey.REMOTE_PLAY_ENABLED) && RemotePlayManager.getInstance().initialize();
+    } else {
+        // Show Settings button in the header when not signed in
+        window.setTimeout(HeaderSection.watchHeader, 2000);
+    }
+
+    // Hide "Play with Friends" skeleton section
+    if (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS)) {
+        const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest('div[class*=HomePage-module]') as HTMLElement;
+        $parent && ($parent.style.display = 'none');
+    }
+
+    // Preload fonts
+    preloadFonts();
+})
+
 window.BX_EXPOSED = BxExposed;
 
 // Hide Settings UI when navigate to another page
@@ -99,35 +188,33 @@ window.addEventListener('popstate', onHistoryChanged);
 window.history.pushState = patchHistoryMethod('pushState');
 window.history.replaceState = patchHistoryMethod('replaceState');
 
-window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
+window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
-    // Start rendering UI
+    STATES.supportedRegion = false;
-    if (document.querySelector('div[class^=UnsupportedMarketPage]')) {
+    window.setTimeout(HeaderSection.watchHeader, 2000);
-        window.setTimeout(watchHeader, 2000);
+
-    } else {
+    // Open Settings dialog on Unsupported page
-        watchHeader();
+    const $unsupportedPage = document.querySelector('div[class^=UnsupportedMarketPage-module__container]') as HTMLElement;
+    if ($unsupportedPage) {
+        SettingsNavigationDialog.getInstance().show();
     }
+}, {once: true});
+
+window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
+    STATES.isSignedIn = true;
+    window.setTimeout(HeaderSection.watchHeader, 2000);
 });
 
 window.addEventListener(BxEvent.STREAM_LOADING, e => {
     // Get title ID for screenshot's name
-    if (window.location.pathname.includes('/launch/')) {
+    if (window.location.pathname.includes('/launch/') && STATES.currentStream.titleInfo) {
-        const matches = /\/launch\/(?<title_id>[^\/]+)\/(?<product_id>\w+)/.exec(window.location.pathname);
+        STATES.currentStream.titleSlug = productTitleToSlug(STATES.currentStream.titleInfo.product.title);
-        if (matches?.groups) {
-            STATES.currentStream.titleId = matches.groups.title_id;
-            STATES.currentStream.productId = matches.groups.product_id;
-        }
     } else {
-        STATES.currentStream.titleId = 'remote-play';
+        STATES.currentStream.titleSlug = 'remote-play';
-        STATES.currentStream.productId = '';
     }
-
-    // Setup UI
-    setupBxUi();
-
-    // Setup loading screen
-    getPref(PrefKey.UI_LOADING_SCREEN_GAME_ART) && LoadingScreen.setup();
 });
 
+// Setup loading screen
+getPref(PrefKey.UI_LOADING_SCREEN_GAME_ART) && window.addEventListener(BxEvent.TITLE_INFO_READY, LoadingScreen.setup);
 
 window.addEventListener(BxEvent.STREAM_STARTING, e => {
     // Hide loading screen
@@ -141,110 +228,226 @@ window.addEventListener(BxEvent.STREAM_STARTING, e => {
 });
 
 window.addEventListener(BxEvent.STREAM_PLAYING, e => {
-    const $video = (e as any).$video;
-    STATES.currentStream.$video = $video;
-
     STATES.isPlaying = true;
-    injectStreamMenuButtons();
+    StreamUiHandler.observe();
-    /*
+
-    if (getPref(Preferences.CONTROLLER_ENABLE_SHORTCUTS)) {
+    if (isFullVersion() && getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
-        GamepadHandler.startPolling();
+        const gameBar = GameBar.getInstance();
+        gameBar.reset();
+        gameBar.enable();
+        gameBar.showBar();
     }
-    */
 
-    const PREF_SCREENSHOT_BUTTON_POSITION = getPref(PrefKey.SCREENSHOT_BUTTON_POSITION);
+    if (isFullVersion()) {
-    STATES.currentStream.$screenshotCanvas!.width = $video.videoWidth;
+        const $video = (e as any).$video as HTMLVideoElement;
-    STATES.currentStream.$screenshotCanvas!.height = $video.videoHeight;
+        Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight);
-    updateVideoPlayerCss();
-
-    // Setup screenshot button
-    if (PREF_SCREENSHOT_BUTTON_POSITION !== 'none') {
-        const $btn = document.querySelector('.bx-screenshot-button')! as HTMLElement;
-        $btn.style.display = 'block';
-
-        if (PREF_SCREENSHOT_BUTTON_POSITION === 'bottom-right') {
-            $btn.style.right = '0';
-        } else {
-            $btn.style.left = '0';
-        }
     }
+
+    updateVideoPlayer();
 });
 
 window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
     BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
 });
 
-window.addEventListener(BxEvent.STREAM_STOPPED, e => {
+window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e => {
+    const component = (e as any).component;
+    if (component === 'product-details') {
+        ProductDetailsPage.injectButtons();
+    }
+});
+
+// Detect game change
+window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
+    const dataChannel = (e as any).dataChannel;
+    if (!dataChannel || dataChannel.label !== 'message') {
+        return;
+    }
+
+    dataChannel.addEventListener('message', async (msg: MessageEvent) => {
+        if (msg.origin === 'better-xcloud' || typeof msg.data !== 'string') {
+            return;
+        }
+
+        // Get xboxTitleId from message
+        if (msg.data.includes('/titleinfo')) {
+            const json = JSON.parse(JSON.parse(msg.data).content);
+            const xboxTitleId = parseInt(json.titleid, 16);
+            STATES.currentStream.xboxTitleId = xboxTitleId;
+
+            // Get titleSlug for Remote Play
+            if (STATES.remotePlay.isPlaying) {
+                STATES.currentStream.titleSlug = 'remote-play';
+                if (json.focused) {
+                    const productTitle = await XboxApi.getProductTitle(xboxTitleId);
+                    if (productTitle) {
+                        STATES.currentStream.titleSlug = productTitleToSlug(productTitle);
+                    }
+                }
+            }
+        }
+    });
+});
+
+function unload() {
     if (!STATES.isPlaying) {
         return;
     }
 
+    if (isFullVersion()) {
+        // Stop MKB listeners
+        EmulatedMkbHandler.getInstance().destroy();
+        NativeMkbHandler.getInstance().destroy();
+    }
+
+    // Destroy StreamPlayer
+    STATES.currentStream.streamPlayer?.destroy();
+
     STATES.isPlaying = false;
+    STATES.currentStream = {};
+    window.BX_EXPOSED.shouldShowSensorControls = false;
+    window.BX_EXPOSED.stopTakRendering = false;
 
-    // Stop MKB listeners
+    NavigationDialogManager.getInstance().hide();
-    getPref(PrefKey.MKB_ENABLED) && MkbHandler.INSTANCE.destroy();
+    StreamStats.getInstance().onStoppedPlaying();
 
-    const $quickBar = document.querySelector('.bx-quick-settings-bar');
+    if (isFullVersion()) {
-    if ($quickBar) {
+        MouseCursorHider.stop();
-        $quickBar.classList.add('bx-gone');
+        TouchController.reset();
+        GameBar.getInstance().disable();
     }
+}
 
-    STATES.currentStream.audioGainNode = null;
+window.addEventListener(BxEvent.STREAM_STOPPED, unload);
-    STATES.currentStream.$video = null;
+window.addEventListener('pagehide', e => {
-    StreamStats.onStoppedPlaying();
+    BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
+});
 
-    const $screenshotBtn = document.querySelector('.bx-screenshot-button');
+isFullVersion() && window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
-    if ($screenshotBtn) {
+    Screenshot.takeScreenshot();
-        $screenshotBtn.removeAttribute('style');
-    }
-
-    MouseCursorHider.stop();
-    TouchController.reset();
 });
 
 
+function observeRootDialog($root: HTMLElement) {
+    let beingShown = false;
+
+    const observer = new MutationObserver(mutationList => {
+        for (const mutation of mutationList) {
+            if (mutation.type !== 'childList') {
+                continue;
+            }
+
+            BX_FLAGS.Debug && BxLogger.warning('RootDialog', 'added', mutation.addedNodes);
+            if (mutation.addedNodes.length === 1) {
+                const $addedElm = mutation.addedNodes[0];
+                if ($addedElm instanceof HTMLElement && $addedElm.className) {
+                    // Make sure it's Guide dialog
+                    if ($root.querySelector('div[class*=GuideDialog]')) {
+                        GuideMenu.observe($addedElm);
+                    }
+                }
+            }
+
+            const shown = !!($root.firstElementChild && $root.firstElementChild.childElementCount > 0);
+            if (shown !== beingShown) {
+                beingShown = 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() {
+    if (getPref(PrefKey.GAME_MSFS2020_FORCE_NATIVE_MKB)) {
+        BX_FLAGS.ForceNativeMkbTitles.push('9PMQDM08SNK9');
+    }
+
     // Monkey patches
     patchRtcPeerConnection();
     patchRtcCodecs();
     interceptHttpRequests();
     patchVideoApi();
+    patchCanvasContext();
+    isFullVersion() && AppInterface && patchPointerLockApi();
 
-    if (getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL)) {
+    getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext();
-        patchAudioContext();
+
+    if (getPref(PrefKey.BLOCK_TRACKING)) {
+        patchMeControl();
+        disableAdobeAudienceManager();
     }
 
-    PreloadedState.override();
+    waitForRootDialog();
-
-    VibrationManager.initialSetup();
-
-    // Check for Update
-    BX_FLAGS.CheckForUpdate && checkForUpdate();
 
     // Setup UI
     addCss();
     Toast.setup();
-    BX_FLAGS.PreloadUi && setupBxUi();
 
+    GuideMenu.addEventListeners();
+    StreamStatsCollector.setupEvents();
     StreamBadges.setupEvents();
     StreamStats.setupEvents();
-    MkbHandler.setupEvents();
 
-    Patcher.initialize();
+    if (isFullVersion()) {
+        (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
+        Screenshot.setup();
 
-    disablePwa();
+        STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
+        overridePreloadState();
 
-    // Show a toast when connecting/disconecting controller
+        VibrationManager.initialSetup();
-    window.addEventListener('gamepadconnected', e => showGamepadToast(e.gamepad));
-    window.addEventListener('gamepaddisconnected', e => showGamepadToast(e.gamepad));
 
-    // Preload Remote Play
+        // Check for Update
-    if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
+        BX_FLAGS.CheckForUpdate && checkForUpdate();
-        RemotePlay.detect();
+
+        Patcher.init();
+        disablePwa();
+
+        // Preload Remote Play
+        if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
+            RemotePlayManager.detect();
+        }
+
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
+            TouchController.setup();
+        }
+
+        // Start PointerProviderServer
+        if (getPref(PrefKey.MKB_ENABLED) && AppInterface) {
+            STATES.pointerServerPort = AppInterface.startPointerServer() || 9269;
+            BxLogger.info('startPointerServer', 'Port', STATES.pointerServerPort.toString());
+        }
+
+        // Show wait time in game card
+        getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && GameTile.setup();
+
+        EmulatedMkbHandler.setupEvents();
     }
 
-    if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
+    // Show a toast when connecting/disconecting controller
-        TouchController.setup();
+    if (getPref(PrefKey.CONTROLLER_SHOW_CONNECTION_STATUS)) {
+        window.addEventListener('gamepadconnected', e => showGamepadToast(e.gamepad));
+        window.addEventListener('gamepaddisconnected', e => showGamepadToast(e.gamepad));
     }
 }
 

src/macros/build.ts

@@ -1,13 +1,27 @@
 import stylus from 'stylus';
 
-// @ts-ignore
+export const isFullVersion = () => {
-import cssStr from "../assets/css/styles.styl" with { type: "text" };
+    return Bun.env.BUILD_VARIANT === 'full';
+};
 
-const generatedCss = await (stylus(cssStr, {})
+export const isLiteVersion = () => {
-	.set('filename', 'styles.css')
+    return Bun.env.BUILD_VARIANT === 'lite';
-	.include('src/assets/css/'))
+};
-	.render();
+
+export const renderStylus = async () => {
+    const file = Bun.file('./src/assets/css/styles.styl');
+    const cssStr = await file.text();
+
+    const generatedCss = await (stylus(cssStr, {})
+        .set('filename', 'styles.css')
+        .set('compress', true)
+        .include('src/assets/css/'))
+        .render();
 
-export const renderStylus = () => {
     return generatedCss;
 };
+
+
+export const compressCss = (css: string) => {
+    return (stylus(css, {}).set('compress', true)).render();
+};

src/modules/controller-shortcut.ts

@@ -0,0 +1,426 @@
+import { Screenshot } from "@utils/screenshot";
+import { GamepadKey } from "@enums/mkb";
+import { PrompFont } from "@enums/prompt-font";
+import { CE, removeChildElements } from "@utils/html";
+import { t } from "@utils/translation";
+import { StreamStats } from "./stream/stream-stats";
+import { MicrophoneShortcut } from "./shortcuts/shortcut-microphone";
+import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui";
+import { SoundShortcut } from "./shortcuts/shortcut-sound";
+import { BxEvent } from "@/utils/bx-event";
+import { AppInterface } from "@/utils/global";
+import { BxSelectElement } from "@/web-components/bx-select";
+import { setNearby } from "@/utils/navigation-utils";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { SettingsNavigationDialog } from "./ui/dialog/settings-dialog";
+import { VIRTUAL_GAMEPAD_ID } from "./mkb/mkb-handler";
+
+const enum ShortcutAction {
+    BETTER_XCLOUD_SETTINGS_SHOW = 'bx-settings-show',
+
+    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)[]} | null = null;
+
+    static reset(index: number) {
+        ControllerShortcut.#buttonsCache[index] = [];
+        ControllerShortcut.#buttonsStatus[index] = [];
+    }
+
+    static handle(gamepad: Gamepad): boolean {
+        if (!ControllerShortcut.#ACTIONS) {
+            ControllerShortcut.#ACTIONS = ControllerShortcut.#getActionsFromStorage();
+        }
+
+        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.BETTER_XCLOUD_SETTINGS_SHOW:
+                SettingsNavigationDialog.getInstance().show();
+                break;
+
+            case ShortcutAction.STREAM_SCREENSHOT_CAPTURE:
+                Screenshot.takeScreenshot();
+                break;
+
+            case ShortcutAction.STREAM_STATS_TOGGLE:
+                StreamStats.getInstance().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) {
+        const actions = ControllerShortcut.#ACTIONS!;
+        if (!(profile in actions)) {
+            actions[profile] = [];
+        }
+
+        if (!action) {
+            action = null;
+        }
+
+        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
+        removeChildElements($select);
+
+        const gamepads = navigator.getGamepads();
+        let hasGamepad = false;
+
+        for (const gamepad of gamepads) {
+            if (!gamepad || !gamepad.connected) {
+                continue;
+            }
+
+            // Ignore emulated gamepad
+            if (gamepad.id === VIRTUAL_GAMEPAD_ID) {
+                continue;
+            }
+
+            hasGamepad = true;
+
+            const $option = CE<HTMLOptionElement>('option', {value: gamepad.id}, gamepad.id);
+            $fragment.appendChild($option);
+        }
+
+        $container.dataset.hasGamepad = hasGamepad.toString();
+        if (hasGamepad) {
+            $select.appendChild($fragment);
+
+            $select.selectedIndex = 0;
+            $select.dispatchEvent(new Event('input'));
+        }
+
+    }
+
+    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, 'input', {
+                ignoreOnChange: true,
+                manualTrigger: true,
+            });
+        }
+    }
+
+    static #getActionsFromStorage() {
+        return JSON.parse(window.localStorage.getItem(ControllerShortcut.#STORAGE_KEY) || '{}');
+    }
+
+    static renderSettings() {
+        const PREF_CONTROLLER_FRIENDLY_UI = getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
+
+        // Read actions from localStorage
+        ControllerShortcut.#ACTIONS = ControllerShortcut.#getActionsFromStorage();
+
+        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('better-xcloud')]: {
+                [ShortcutAction.BETTER_XCLOUD_SETTINGS_SHOW]: [t('settings'), t('show')],
+            },
+
+            [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;
+        const $selectProfile = CE<HTMLSelectElement>('select', {class: 'bx-shortcut-profile', autocomplete: 'off'});
+
+        const $profile = PREF_CONTROLLER_FRIENDLY_UI ? BxSelectElement.wrap($selectProfile) : $selectProfile;
+        $profile.classList.add('bx-full-width');
+
+        const $container = CE('div', {
+            'data-has-gamepad': 'false',
+            _nearby: {
+                focus: $profile,
+            },
+        },
+            CE('div', {},
+                CE('p', {class: 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')),
+            ),
+
+            $remap = CE('div', {},
+                CE('div', {
+                    _nearby: {
+                        focus: $profile,
+                    },
+                }, $profile),
+                CE('p', {class: 'bx-shortcut-note'},
+                    CE('span', {class: 'bx-prompt'}, PrompFont.HOME),
+                    ': ' + t('controller-shortcuts-xbox-note'),
+                ),
+            ),
+        );
+
+        $selectProfile.addEventListener('input', 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;
+
+            if (!PREF_CONTROLLER_FRIENDLY_UI) {
+                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'});
+
+            if (!PREF_CONTROLLER_FRIENDLY_UI) {
+                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('input', onActionChanged);
+
+            ControllerShortcut.#$selectActions[button] = $select;
+
+            if (PREF_CONTROLLER_FRIENDLY_UI) {
+                const $bxSelect = BxSelectElement.wrap($select);
+                $bxSelect.classList.add('bx-full-width');
+
+                $div.appendChild($bxSelect);
+                setNearby($row, {
+                    focus: $bxSelect,
+                });
+            } else {
+                $div.appendChild($select);
+                setNearby($row, {
+                    focus: $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;
+    }
+}

src/modules/dialog.ts

@@ -1,20 +1,21 @@
-import { t } from "../utils/translation";
+import { t } from "@utils/translation";
-import { CE, createButton, ButtonStyle, Icon } from "../utils/html";
+import { CE, createButton, ButtonStyle } from "@utils/html";
+import { BxIcon } from "@utils/bx-icon";
 
-type DialogOptions = {
+type DialogOptions = Partial<{
-    title?: string;
+    title: string;
-    className?: string;
+    className: string;
-    content?: string | HTMLElement;
+    content: string | HTMLElement;
-    hideCloseButton?: boolean;
+    hideCloseButton: boolean;
-    onClose?: string;
+    onClose: string;
-    helpUrl?: string;
+    helpUrl: string;
-}
+}>;
 
 export class Dialog {
-    $dialog?: HTMLElement;
+    $dialog: HTMLElement;
-    $title?: HTMLElement;
+    $title: HTMLElement;
-    $content?: HTMLElement;
+    $content: HTMLElement;
-    $overlay?: Element | null;
+    $overlay: HTMLElement;
 
     onClose: any;
 
@@ -29,14 +30,17 @@ export class Dialog {
         } = options;
 
         // Create dialog overlay
-        this.$overlay = document.querySelector('.bx-dialog-overlay');
+        const $overlay = document.querySelector('.bx-dialog-overlay') as HTMLElement;
-        if (!this.$overlay) {
+
+        if (!$overlay) {
             this.$overlay = CE('div', {'class': 'bx-dialog-overlay bx-gone'});
 
             // Disable right click
-            this.$overlay!.addEventListener('contextmenu', e => e.preventDefault());
+            this.$overlay.addEventListener('contextmenu', e => e.preventDefault());
 
-            document.documentElement.appendChild(this.$overlay!);
+            document.documentElement.appendChild(this.$overlay);
+        } else {
+            this.$overlay = $overlay;
         }
 
         let $close;
@@ -44,14 +48,14 @@ export class Dialog {
         this.$dialog = CE('div', {'class': `bx-dialog ${className || ''} bx-gone`},
                 this.$title = CE('h2', {}, CE('b', {}, title),
                         helpUrl && createButton({
-                                icon: Icon.QUESTION,
+                                icon: BxIcon.QUESTION,
                                 style: ButtonStyle.GHOST,
                                 title: t('help'),
                                 url: helpUrl,
                             }),
                     ),
                 this.$content = CE('div', {'class': 'bx-dialog-content'}, content),
-                !hideCloseButton && ($close = CE('button', {}, t('close'))),
+                !hideCloseButton && ($close = CE('button', {type: 'button'}, t('close'))),
             );
 
         $close && $close.addEventListener('click', e => {
@@ -72,19 +76,19 @@ export class Dialog {
         document.activeElement && (document.activeElement as HTMLElement).blur();
 
         if (newOptions && newOptions.title) {
-            this.$title!.querySelector('b')!.textContent = newOptions.title;
+            this.$title.querySelector('b')!.textContent = newOptions.title;
-            this.$title!.classList.remove('bx-gone');
+            this.$title.classList.remove('bx-gone');
         }
 
-        this.$dialog!.classList.remove('bx-gone');
+        this.$dialog.classList.remove('bx-gone');
-        this.$overlay!.classList.remove('bx-gone');
+        this.$overlay.classList.remove('bx-gone');
 
         document.body.classList.add('bx-no-scroll');
     }
 
     hide(e?: any) {
-        this.$dialog!.classList.add('bx-gone');
+        this.$dialog.classList.add('bx-gone');
-        this.$overlay!.classList.add('bx-gone');
+        this.$overlay.classList.add('bx-gone');
 
         document.body.classList.remove('bx-no-scroll');
 
@@ -92,7 +96,7 @@ export class Dialog {
     }
 
     toggle() {
-        this.$dialog!.classList.toggle('bx-gone');
+        this.$dialog.classList.toggle('bx-gone');
-        this.$overlay!.classList.toggle('bx-gone');
+        this.$overlay.classList.toggle('bx-gone');
     }
 }

src/modules/game-bar/action-base.ts

@@ -0,0 +1,6 @@
+export abstract class BaseGameBarAction {
+    constructor() {}
+    reset() {}
+
+    abstract render(): HTMLElement;
+}

src/modules/game-bar/action-microphone.ts

@@ -0,0 +1,63 @@
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { BaseGameBarAction } from "./action-base";
+import { MicrophoneShortcut, MicrophoneState } from "../shortcuts/shortcut-microphone";
+
+
+export class MicrophoneAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    visible: boolean = false;
+
+    constructor() {
+        super();
+
+        const onClick = (e: Event) => {
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+
+            const enabled = MicrophoneShortcut.toggle(false);
+            this.$content.setAttribute('data-enabled', enabled.toString());
+        };
+
+        const $btnDefault = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.MICROPHONE,
+            onClick: onClick,
+            classes: ['bx-activated'],
+        });
+
+        const $btnMuted = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.MICROPHONE_MUTED,
+            onClick: onClick,
+        });
+
+        this.$content = CE('div', {},
+            $btnDefault,
+            $btnMuted,
+        );
+
+        this.reset();
+
+        window.addEventListener(BxEvent.MICROPHONE_STATE_CHANGED, e => {
+            const microphoneState = (e as any).microphoneState;
+            const enabled = microphoneState === MicrophoneState.ENABLED;
+
+            this.$content.setAttribute('data-enabled', enabled.toString());
+
+            // Show the button in Game Bar if the mic is enabled
+            this.$content.classList.remove('bx-gone');
+        });
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+
+    reset(): void {
+        this.visible = false;
+        this.$content.classList.add('bx-gone');
+        this.$content.setAttribute('data-enabled', 'false');
+    }
+}

src/modules/game-bar/action-screenshot.ts

@@ -0,0 +1,30 @@
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle } from "@utils/html";
+import { BaseGameBarAction } from "./action-base";
+import { t } from "@utils/translation";
+import { Screenshot } from "@/utils/screenshot";
+
+export class ScreenshotAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    constructor() {
+        super();
+
+        const onClick = (e: Event) => {
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+            Screenshot.takeScreenshot();
+        };
+
+        this.$content = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.SCREENSHOT,
+            title: t('take-screenshot'),
+            onClick: onClick,
+        });
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+}

src/modules/game-bar/action-speaker.ts

@@ -0,0 +1,54 @@
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { BaseGameBarAction } from "./action-base";
+import { SoundShortcut, SpeakerState } from "../shortcuts/shortcut-sound";
+
+
+export class SpeakerAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    constructor() {
+        super();
+
+        const onClick = (e: Event) => {
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+            SoundShortcut.muteUnmute();
+        };
+
+        const $btnEnable = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.AUDIO,
+            onClick: onClick,
+        });
+
+        const $btnMuted = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.SPEAKER_MUTED,
+            onClick: onClick,
+            classes: ['bx-activated'],
+        });
+
+        this.$content = CE('div', {},
+            $btnEnable,
+            $btnMuted,
+        );
+
+        this.reset();
+
+        window.addEventListener(BxEvent.SPEAKER_STATE_CHANGED, e => {
+            const speakerState = (e as any).speakerState;
+            const enabled = speakerState === SpeakerState.ENABLED;
+
+            this.$content.dataset.enabled = enabled.toString();
+        });
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+
+    reset(): void {
+        this.$content.dataset.enabled = 'true';
+    }
+}

src/modules/game-bar/action-touch-control.ts

@@ -0,0 +1,54 @@
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { TouchController } from "@modules/touch-controller";
+import { BaseGameBarAction } from "./action-base";
+import { t } from "@utils/translation";
+
+export class TouchControlAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    constructor() {
+        super();
+
+        const onClick = (e: Event) => {
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+
+            const $parent = (e as any).target.closest('div[data-enabled]');
+            let enabled = $parent.getAttribute('data-enabled', 'true') === 'true';
+            $parent.setAttribute('data-enabled', (!enabled).toString());
+
+            TouchController.toggleVisibility(enabled);
+        };
+
+        const $btnEnable = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.TOUCH_CONTROL_ENABLE,
+            title: t('show-touch-controller'),
+            onClick: onClick,
+        });
+
+        const $btnDisable = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.TOUCH_CONTROL_DISABLE,
+            title: t('hide-touch-controller'),
+            onClick: onClick,
+            classes: ['bx-activated'],
+        });
+
+        this.$content = CE('div', {},
+            $btnEnable,
+            $btnDisable,
+        );
+
+        this.reset();
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+
+    reset(): void {
+        this.$content.setAttribute('data-enabled', 'true');
+    }
+}

src/modules/game-bar/action-true-achievements.ts

@@ -0,0 +1,30 @@
+import { BxEvent } from "@/utils/bx-event";
+import { BxIcon } from "@/utils/bx-icon";
+import { createButton, ButtonStyle } from "@/utils/html";
+import { t } from "@/utils/translation";
+import { BaseGameBarAction } from "./action-base";
+import { TrueAchievements } from "@/utils/true-achievements";
+
+export class TrueAchievementsAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    constructor() {
+        super();
+
+        const onClick = (e: Event) => {
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+            TrueAchievements.open(false);
+        };
+
+        this.$content = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.TRUE_ACHIEVEMENTS,
+            title: t('true-achievements'),
+            onClick: onClick,
+        });
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+}

src/modules/game-bar/game-bar.ts

@@ -0,0 +1,157 @@
+import { CE, clearFocus, createSvgIcon } from "@utils/html";
+import { ScreenshotAction } from "./action-screenshot";
+import { TouchControlAction } from "./action-touch-control";
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import type { BaseGameBarAction } from "./action-base";
+import { STATES } from "@utils/global";
+import { MicrophoneAction } from "./action-microphone";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
+import { TrueAchievementsAction } from "./action-true-achievements";
+import { SpeakerAction } from "./action-speaker";
+
+
+export class GameBar {
+    private static instance: GameBar;
+    public static getInstance(): GameBar {
+        if (!GameBar.instance) {
+            GameBar.instance = new GameBar();
+        }
+
+        return GameBar.instance;
+    }
+
+    private static readonly VISIBLE_DURATION = 2000;
+
+    private $gameBar: HTMLElement;
+    private $container: HTMLElement;
+
+    private timeout: number | null = null;
+
+    private actions: BaseGameBarAction[] = [];
+
+    private constructor() {
+        let $container;
+
+        const position = getPref(PrefKey.GAME_BAR_POSITION);
+
+        const $gameBar = CE('div', {id: 'bx-game-bar', class: 'bx-gone', 'data-position': position},
+                $container = CE('div', {class: 'bx-game-bar-container bx-offscreen'}),
+                createSvgIcon(position === 'bottom-left' ? BxIcon.CARET_RIGHT : BxIcon.CARET_LEFT),
+            );
+
+        this.actions = [
+            new ScreenshotAction(),
+            ...(STATES.userAgent.capabilities.touch && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== StreamTouchController.OFF) ? [new TouchControlAction()] : []),
+            new SpeakerAction(),
+            new MicrophoneAction(),
+            new TrueAchievementsAction(),
+        ];
+
+        // Reverse the action list if Game Bar's position is on the right side
+        if (position === 'bottom-right') {
+            this.actions.reverse();
+        }
+
+        // Render actions
+        for (const action of this.actions) {
+            $container.appendChild(action.render());
+        }
+
+        // Toggle game bar when clicking on the game bar box
+        $gameBar.addEventListener('click', e => {
+            if (e.target !== $gameBar) {
+                return;
+            }
+
+            $container.classList.contains('bx-show') ? this.hideBar() : this.showBar();
+        });
+
+        // Hide game bar after clicking on an action
+        window.addEventListener(BxEvent.GAME_BAR_ACTION_ACTIVATED, this.hideBar.bind(this));
+
+        $container.addEventListener('pointerover', this.clearHideTimeout.bind(this));
+        $container.addEventListener('pointerout', this.beginHideTimeout.bind(this));
+
+        // Add animation when hiding game bar
+        $container.addEventListener('transitionend', e => {
+            const classList = $container.classList;
+            if (classList.contains('bx-hide')) {
+                classList.remove('bx-hide');
+                classList.add('bx-offscreen');
+            }
+        });
+
+        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() {
+        this.clearHideTimeout();
+
+        this.timeout = window.setTimeout(() => {
+                this.timeout = null;
+                this.hideBar();
+            }, GameBar.VISIBLE_DURATION);
+    }
+
+    private clearHideTimeout() {
+        this.timeout && clearTimeout(this.timeout);
+        this.timeout = null;
+    }
+
+    enable() {
+        this.$gameBar && this.$gameBar.classList.remove('bx-gone');
+    }
+
+    disable() {
+        this.hideBar();
+        this.$gameBar && this.$gameBar.classList.add('bx-gone');
+    }
+
+    showBar() {
+        if (!this.$container) {
+            return;
+        }
+
+        this.$container.classList.remove('bx-offscreen', 'bx-hide' , 'bx-gone');
+        this.$container.classList.add('bx-show');
+
+        this.beginHideTimeout();
+    }
+
+    hideBar() {
+        this.clearHideTimeout();
+
+        // Stop focusing Game Bar
+        clearFocus();
+
+        if (!this.$container) {
+            return;
+        }
+
+        this.$container.classList.remove('bx-show');
+        this.$container.classList.add('bx-hide');
+    }
+
+    // Reset all states
+    reset() {
+        for (const action of this.actions) {
+            action.reset();
+        }
+    }
+}

src/modules/loading-screen.ts

@@ -1,8 +1,10 @@
-import { CE } from "../utils/html";
+import { CE } from "@utils/html";
-import { getPreferredServerRegion } from "../utils/region";
+import { getPreferredServerRegion } from "@utils/region";
-import { TitlesInfo } from "../utils/titles-info";
+import { t } from "@utils/translation";
-import { PrefKey, getPref } from "../utils/preferences";
+import { STATES } from "@utils/global";
-import { t } from "../utils/translation";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { compressCss } from "@macros/build" with {type: "macro"};
 
 export class LoadingScreen {
     static #$bgStyle: HTMLElement;
@@ -21,9 +23,8 @@ export class LoadingScreen {
     }
 
     static setup() {
-        // Get titleId from location
+        const titleInfo = STATES.currentStream.titleInfo;
-        const match = window.location.pathname.match(/\/launch\/[^\/]+\/([\w\d]+)/);
+        if (!titleInfo) {
-        if (!match) {
             return;
         }
 
@@ -33,15 +34,7 @@ export class LoadingScreen {
             LoadingScreen.#$bgStyle = $bgStyle;
         }
 
-        const titleId = match[1];
+        LoadingScreen.#setBackground(titleInfo.product.heroImageUrl || titleInfo.product.titledHeroImageUrl || titleInfo.product.tileImageUrl);
-        const titleInfo = TitlesInfo.get(titleId);
-        if (titleInfo && titleInfo.imageHero) {
-            LoadingScreen.#setBackground(titleInfo.imageHero);
-        } else {
-            TitlesInfo.requestCatalogInfo(titleId, (info: TitleInfo) => {
-                info && info.imageHero && LoadingScreen.#setBackground(info.imageHero);
-            });
-        }
 
         if (getPref(PrefKey.UI_LOADING_SCREEN_ROCKET) === 'hide') {
             LoadingScreen.#hideRocket();
@@ -51,12 +44,15 @@ export class LoadingScreen {
     static #hideRocket() {
         let $bgStyle = LoadingScreen.#$bgStyle;
 
-        const css = `
+        $bgStyle.textContent! += compressCss(`
 #game-stream div[class*=RocketAnimation-module__container] > svg {
     display: none;
 }
-`;
+
-        $bgStyle.textContent += css;
+#game-stream video[class*=RocketAnimationVideo-module__video] {
+    display: none;
+}
+`);
     }
 
     static #setBackground(imageUrl: string) {
@@ -66,9 +62,8 @@ export class LoadingScreen {
         // Limit max width to reduce image size
         imageUrl = imageUrl + '?w=1920';
 
-        const css = `
+        $bgStyle.textContent! += compressCss(`
 #game-stream {
-    background-image: linear-gradient(#00000033, #000000e6), url(${imageUrl}) !important;
     background-color: transparent !important;
     background-position: center center !important;
     background-repeat: no-repeat !important;
@@ -78,16 +73,15 @@ export class LoadingScreen {
 #game-stream rect[width="800"] {
     transition: opacity 0.3s ease-in-out !important;
 }
-`;
+`) + `#game-stream {background-image: linear-gradient(#00000033, #000000e6), url(${imageUrl}) !important;}`;
-        $bgStyle.textContent += css;
 
         const bg = new Image();
         bg.onload = e => {
-            $bgStyle.textContent += `
+            $bgStyle.textContent += compressCss(`
 #game-stream rect[width="800"] {
     opacity: 0 !important;
 }
-`;
+`);
         };
         bg.src = imageUrl;
     }
@@ -114,7 +108,7 @@ export class LoadingScreen {
 
         let $waitTimeBox = LoadingScreen.#$waitTimeBox;
         if (!$waitTimeBox) {
-            $waitTimeBox = CE<HTMLElement>('div', {'class': 'bx-wait-time-box'},
+            $waitTimeBox = CE('div', {'class': 'bx-wait-time-box'},
                                     CE('label', {}, t('server')),
                                     CE('span', {}, getPreferredServerRegion()),
                                     CE('label', {}, t('wait-time-estimated')),
@@ -154,27 +148,27 @@ export class LoadingScreen {
         if (getPref(PrefKey.UI_LOADING_SCREEN_GAME_ART) && LoadingScreen.#$bgStyle) {
             const $rocketBg = document.querySelector('#game-stream rect[width="800"]');
             $rocketBg && $rocketBg.addEventListener('transitionend', e => {
-                LoadingScreen.#$bgStyle.textContent += `
+                LoadingScreen.#$bgStyle.textContent += compressCss(`
 #game-stream {
     background: #000 !important;
 }
-`;
+`);
             });
 
-            LoadingScreen.#$bgStyle.textContent += `
+            LoadingScreen.#$bgStyle.textContent += compressCss(`
 #game-stream rect[width="800"] {
     opacity: 1 !important;
 }
-`;
+`);
         }
 
-        LoadingScreen.reset();
+        setTimeout(LoadingScreen.reset, 2000);
     }
 
     static reset() {
-        LoadingScreen.#$waitTimeBox && LoadingScreen.#$waitTimeBox.classList.add('bx-gone');
         LoadingScreen.#$bgStyle && (LoadingScreen.#$bgStyle.textContent = '');
 
+        LoadingScreen.#$waitTimeBox && LoadingScreen.#$waitTimeBox.classList.add('bx-gone');
         LoadingScreen.#waitTimeInterval && clearInterval(LoadingScreen.#waitTimeInterval);
         LoadingScreen.#waitTimeInterval = null;
     }

src/modules/mkb/base-mkb-handler.ts

@@ -0,0 +1,23 @@
+export abstract class MouseDataProvider {
+    protected mkbHandler: MkbHandler;
+    constructor(handler: MkbHandler) {
+        this.mkbHandler = handler;
+    }
+
+    abstract init(): void;
+    abstract start(): void;
+    abstract stop(): void;
+    abstract destroy(): void;
+}
+
+export abstract class MkbHandler {
+    abstract init(): void;
+    abstract start(): void;
+    abstract stop(): void;
+    abstract destroy(): void;
+    abstract handleMouseMove(data: MkbMouseMove): void;
+    abstract handleMouseClick(data: MkbMouseClick): void;
+    abstract handleMouseWheel(data: MkbMouseWheel): boolean;
+    abstract waitForMouseData(enabled: boolean): void;
+    abstract isEnabled(): boolean;
+}

src/modules/mkb/definitions.ts

@@ -1,100 +0,0 @@
-import type { GamepadKeyNameType } from "../../types/mkb";
-
-export const GamepadKey: DualEnum = {};
-GamepadKey[GamepadKey.A = 0] = 'A';
-GamepadKey[GamepadKey.B = 1] = 'B';
-GamepadKey[GamepadKey.X = 2] = 'X';
-GamepadKey[GamepadKey.Y = 3] = 'Y';
-GamepadKey[GamepadKey.LB = 4] = 'LB';
-GamepadKey[GamepadKey.RB = 5] = 'RB';
-GamepadKey[GamepadKey.LT = 6] = 'LT';
-GamepadKey[GamepadKey.RT = 7] = 'RT';
-GamepadKey[GamepadKey.SELECT = 8] = 'SELECT';
-GamepadKey[GamepadKey.START = 9] = 'START';
-GamepadKey[GamepadKey.L3 = 10] = 'L3';
-GamepadKey[GamepadKey.R3 = 11] = 'R3';
-GamepadKey[GamepadKey.UP = 12] = 'UP';
-GamepadKey[GamepadKey.DOWN = 13] = 'DOWN';
-GamepadKey[GamepadKey.LEFT = 14] = 'LEFT';
-GamepadKey[GamepadKey.RIGHT = 15] = 'RIGHT';
-GamepadKey[GamepadKey.HOME = 16] = 'HOME';
-
-GamepadKey[GamepadKey.LS_UP = 100] = 'LS_UP';
-GamepadKey[GamepadKey.LS_DOWN = 101] = 'LS_DOWN';
-GamepadKey[GamepadKey.LS_LEFT = 102] = 'LS_LEFT';
-GamepadKey[GamepadKey.LS_RIGHT = 103] = 'LS_RIGHT';
-GamepadKey[GamepadKey.RS_UP = 200] = 'RS_UP';
-GamepadKey[GamepadKey.RS_DOWN = 201] = 'RS_DOWN';
-GamepadKey[GamepadKey.RS_LEFT = 202] = 'RS_LEFT';
-GamepadKey[GamepadKey.RS_RIGHT = 203] = 'RS_RIGHT';
-
-
-export const GamepadKeyName: GamepadKeyNameType = {
-    [GamepadKey.A]: ['A', '⇓'],
-    [GamepadKey.B]: ['B', '⇒'],
-    [GamepadKey.X]: ['X', '⇐'],
-    [GamepadKey.Y]: ['Y', '⇑'],
-
-    [GamepadKey.LB]: ['LB', '↘'],
-    [GamepadKey.RB]: ['RB', '↙'],
-    [GamepadKey.LT]: ['LT', '↖'],
-    [GamepadKey.RT]: ['RT', '↗'],
-
-    [GamepadKey.SELECT]: ['Select', '⇺'],
-    [GamepadKey.START]: ['Start', '⇻'],
-    [GamepadKey.HOME]: ['Home', ''],
-
-    [GamepadKey.UP]: ['D-Pad Up', '≻'],
-    [GamepadKey.DOWN]: ['D-Pad Down', '≽'],
-    [GamepadKey.LEFT]: ['D-Pad Left', '≺'],
-    [GamepadKey.RIGHT]: ['D-Pad 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.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', '⇁'],
-};
-
-
-export enum GamepadStick {
-    LEFT = 0,
-    RIGHT = 1,
-};
-
-export enum MouseButtonCode {
-    LEFT_CLICK = 'Mouse0',
-    RIGHT_CLICK = 'Mouse2',
-    MIDDLE_CLICK = 'Mouse1',
-};
-
-export const MouseMapTo: DualEnum = {};
-MouseMapTo[MouseMapTo.OFF = 0] = 'OFF';
-MouseMapTo[MouseMapTo.LS = 1] = 'LS';
-MouseMapTo[MouseMapTo.RS = 2] = 'RS';
-
-
-export enum WheelCode {
-    SCROLL_UP = 'ScrollUp',
-    SCROLL_DOWN = 'ScrollDown',
-    SCROLL_LEFT = 'ScrollLeft',
-    SCROLL_RIGHT = 'ScrollRight',
-};
-
-export enum MkbPresetKey {
-    MOUSE_MAP_TO = 'map_to',
-
-    MOUSE_SENSITIVITY_X = 'sensitivity_x',
-    MOUSE_SENSITIVITY_Y = 'sensitivity_y',
-
-    MOUSE_DEADZONE_COUNTERWEIGHT = 'deadzone_counterweight',
-
-    MOUSE_STICK_DECAY_STRENGTH = 'stick_decay_strength',
-    MOUSE_STICK_DECAY_MIN = 'stick_decay_min',
-}

src/modules/mkb/key-helper.ts

@@ -1,4 +1,4 @@
-import { MouseButtonCode, WheelCode } from "./definitions";
+import { MouseButtonCode, WheelCode } from "@enums/mkb";
 
 export class KeyHelper {
     static #NON_PRINTABLE_KEYS = {
@@ -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) {

src/modules/mkb/mkb-handler.ts

@@ -1,40 +1,146 @@
+import { isFullVersion } from "@macros/build" with {type: "macro"};
+
 import { MkbPreset } from "./mkb-preset";
-import { GamepadKey, MkbPresetKey, GamepadStick, MouseMapTo } from "./definitions";
+import { GamepadKey, MkbPresetKey, GamepadStick, MouseMapTo, WheelCode } from "@enums/mkb";
-import { createButton, Icon, ButtonStyle, CE } from "../../utils/html";
+import { createButton, ButtonStyle, CE } from "@utils/html";
-import { BxEvent } from "../../utils/bx-event";
+import { BxEvent } from "@utils/bx-event";
-import { PrefKey, getPref } from "../../utils/preferences";
+import { Toast } from "@utils/toast";
-import { Toast } from "../../utils/toast";
+import { t } from "@utils/translation";
-import { t } from "../../utils/translation";
+import { LocalDb } from "@utils/local-db";
-import { LocalDb } from "../../utils/local-db";
 import { KeyHelper } from "./key-helper";
-import type { MkbStoredPreset } from "../../types/mkb";
+import type { MkbStoredPreset } from "@/types/mkb";
-import { showStreamSettings } from "../stream/stream-ui";
+import { AppInterface, STATES } from "@utils/global";
+import { UserAgent } from "@utils/user-agent";
+import { BxLogger } from "@utils/bx-logger";
+import { PointerClient } from "./pointer-client";
+import { NativeMkbHandler } from "./native-mkb-handler";
+import { MkbHandler, MouseDataProvider } from "./base-mkb-handler";
+import { SettingsNavigationDialog } from "../ui/dialog/settings-dialog";
+import { NavigationDialogManager } from "../ui/dialog/navigation-dialog";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
+
+const LOG_TAG = 'MkbHandler';
+
+const PointerToMouseButton = {
+    1: 0,
+    2: 2,
+    4: 1,
+}
+
+export const VIRTUAL_GAMEPAD_ID = 'Xbox 360 Controller';
+
+class WebSocketMouseDataProvider extends MouseDataProvider {
+    #pointerClient: PointerClient | undefined
+    #connected = false
+
+    init(): void {
+        this.#pointerClient = PointerClient.getInstance();
+        this.#connected = false;
+        try {
+            this.#pointerClient.start(STATES.pointerServerPort, 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();
+    }
+}
+
+class PointerLockMouseDataProvider extends MouseDataProvider {
+    init(): void {}
+
+    start(): void {
+        window.addEventListener('mousemove', this.#onMouseMoveEvent);
+        window.addEventListener('mousedown', this.#onMouseEvent);
+        window.addEventListener('mouseup', this.#onMouseEvent);
+        window.addEventListener('wheel', this.#onWheelEvent, {passive: false});
+        window.addEventListener('contextmenu', this.#disableContextMenu);
+    }
+
+    stop(): void {
+        document.pointerLockElement && document.exitPointerLock();
+
+        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 {}
+
+    #onMouseMoveEvent = (e: MouseEvent) => {
+        this.mkbHandler.handleMouseMove({
+            movementX: e.movementX,
+            movementY: e.movementY,
+        });
+    }
+
+    #onMouseEvent = (e: MouseEvent) => {
+        e.preventDefault();
+
+        const isMouseDown = e.type === 'mousedown';
+        const data: MkbMouseClick = {
+            mouseButton: e.button,
+            pressed: isMouseDown,
+        };
+
+        this.mkbHandler.handleMouseClick(data);
+    }
+
+    #onWheelEvent = (e: WheelEvent) => {
+        const key = KeyHelper.getKeyFromEvent(e);
+        if (!key) {
+            return;
+        }
+
+        const data: MkbMouseWheel = {
+            vertical: e.deltaY,
+            horizontal: e.deltaX,
+        };
+
+        if (this.mkbHandler.handleMouseWheel(data)) {
+            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
 */
-export class MkbHandler {
+export class EmulatedMkbHandler extends MkbHandler {
-    static #instance: MkbHandler;
+    static #instance: EmulatedMkbHandler;
-    static get INSTANCE() {
+    public static getInstance(): EmulatedMkbHandler {
-        if (!MkbHandler.#instance) {
+        if (!EmulatedMkbHandler.#instance) {
-            MkbHandler.#instance = new MkbHandler();
+            EmulatedMkbHandler.#instance = new EmulatedMkbHandler();
         }
 
-        return MkbHandler.#instance;
+        return EmulatedMkbHandler.#instance;
     }
 
     #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;
 
-    static VIRTUAL_GAMEPAD_ID = 'Xbox 360 Controller';
-
     #VIRTUAL_GAMEPAD = {
-            id: MkbHandler.VIRTUAL_GAMEPAD_ID,
+            id: VIRTUAL_GAMEPAD_ID,
             index: 3,
             connected: false,
             hapticActuators: null,
@@ -49,22 +155,27 @@ 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;
 
-    #STICK_MAP: {[index: keyof typeof GamepadKey]: (number | number[])[]};
+    #escKeyDownTime: number = -1;
-    #LEFT_STICK_X: number[] = [];
+
-    #LEFT_STICK_Y: number[] = [];
+    #STICK_MAP: {[key in GamepadKey]?: [GamepadKey[], number, number]};
-    #RIGHT_STICK_X: number[] = [];
+    #LEFT_STICK_X: GamepadKey[] = [];
-    #RIGHT_STICK_Y: number[] = [];
+    #LEFT_STICK_Y: GamepadKey[] = [];
+    #RIGHT_STICK_X: GamepadKey[] = [];
+    #RIGHT_STICK_Y: GamepadKey[] = [];
 
     constructor() {
+        super();
+
         this.#STICK_MAP = {
             [GamepadKey.LS_LEFT]: [this.#LEFT_STICK_X, 0, -1],
             [GamepadKey.LS_RIGHT]: [this.#LEFT_STICK_X, 0, 1],
@@ -78,6 +189,8 @@ export class MkbHandler {
         };
     }
 
+    isEnabled = () => this.#enabled;
+
     #patchedGetGamepads = () => {
         const gamepads = this.#nativeGetGamepads() || [];
         (gamepads as any)[this.#VIRTUAL_GAMEPAD.index] = this.#VIRTUAL_GAMEPAD;
@@ -95,6 +208,7 @@ export class MkbHandler {
         virtualGamepad.timestamp = performance.now();
     }
 
+    /*
     #getStickAxes(stick: GamepadStick) {
         const virtualGamepad = this.#getVirtualGamepad();
         return {
@@ -102,11 +216,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();
 
@@ -122,11 +235,11 @@ export class MkbHandler {
         gamepad.timestamp = performance.now();
     }
 
-    #pressButton = (buttonIndex: number, pressed: boolean) => {
+    #pressButton = (buttonIndex: GamepadKey, pressed: boolean) => {
         const virtualGamepad = this.#getVirtualGamepad();
 
         if (buttonIndex >= 100) {
-            let [valueArr, axisIndex] = this.#STICK_MAP[buttonIndex];
+            let [valueArr, axisIndex] = this.#STICK_MAP[buttonIndex]!;
             valueArr = valueArr as number[];
             axisIndex = axisIndex as number;
 
@@ -142,7 +255,7 @@ export class MkbHandler {
             let value;
             if (valueArr.length) {
                 // Get value of the last key of the axis
-                value = this.#STICK_MAP[valueArr[valueArr.length - 1]][2] as number;
+                value = this.#STICK_MAP[valueArr[valueArr.length - 1]]![2] as number;
             } else {
                 value = 0;
             }
@@ -160,13 +273,37 @@ export class MkbHandler {
         const isKeyDown = e.type === 'keydown';
 
         // Toggle MKB feature
-        if (isKeyDown && e.code === 'F8') {
+        if (e.code === 'F8') {
-            e.preventDefault();
+            if (!isKeyDown) {
-            this.toggle();
+                e.preventDefault();
+                this.toggle();
+            }
+
             return;
         }
 
-        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[e.code]!;
+        // Hijack the Esc button
+        if (e.code === 'Escape') {
+            e.preventDefault();
+
+            // Hold the Esc for 1 second to disable MKB
+            if (this.#enabled && isKeyDown) {
+                if (this.#escKeyDownTime === -1) {
+                    this.#escKeyDownTime = performance.now();
+                } else if (performance.now() - this.#escKeyDownTime >= 1000) {
+                    this.stop();
+                }
+            } else {
+                this.#escKeyDownTime = -1;
+            }
+            return;
+        }
+
+        if (!this.#isPolling) {
+            return;
+        }
+
+        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[e.code || e.key]!;
         if (typeof buttonIndex === 'undefined') {
             return;
         }
@@ -180,25 +317,30 @@ export class MkbHandler {
         this.#pressButton(buttonIndex, isKeyDown);
     }
 
-    #onMouseEvent = (e: MouseEvent) => {
+    #onMouseStopped = () => {
-        const isMouseDown = e.type === 'mousedown';
+        // Reset stick position
-        const key = KeyHelper.getKeyFromEvent(e);
+        this.#detectMouseStoppedTimeout = null;
-        if (!key) {
-            return;
-        }
 
-        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[key.code]!;
+        const mouseMapTo = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_MAP_TO];
-        if (typeof buttonIndex === 'undefined') {
+        const analog = mouseMapTo === MouseMapTo.LS ? GamepadStick.LEFT : GamepadStick.RIGHT;
-            return;
+        this.#updateStick(analog, 0, 0);
-        }
-
-        e.preventDefault();
-        this.#pressButton(buttonIndex, isMouseDown);
     }
 
-    #onWheelEvent = (e: WheelEvent) => {
+    handleMouseClick = (data: MkbMouseClick) => {
-        const key = KeyHelper.getKeyFromEvent(e);
+        let mouseButton;
-        if (!key) {
+        if (typeof data.mouseButton !== 'undefined') {
+            mouseButton = data.mouseButton;
+        } else if (typeof data.pointerButton !== 'undefined') {
+            mouseButton = PointerToMouseButton[data.pointerButton as keyof typeof PointerToMouseButton];
+        }
+
+        const keyCode = 'Mouse' + mouseButton;
+        const key = {
+            code: keyCode,
+            name: KeyHelper.codeToKeyName(keyCode),
+        };
+
+        if (!key.name) {
             return;
         }
 
@@ -207,7 +349,63 @@ export class MkbHandler {
             return;
         }
 
-        e.preventDefault();
+        this.#pressButton(buttonIndex, data.pressed);
+    }
+
+    handleMouseMove = (data: MkbMouseMove) => {
+        // TODO: optimize this
+        const mouseMapTo = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_MAP_TO];
+        if (mouseMapTo === MouseMapTo.OFF) {
+            // Ignore mouse movements
+            return;
+        }
+
+        this.#detectMouseStoppedTimeout && clearTimeout(this.#detectMouseStoppedTimeout);
+        this.#detectMouseStoppedTimeout = window.setTimeout(this.#onMouseStopped.bind(this), 50);
+
+        const deadzoneCounterweight = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT];
+
+        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) {
+            x *= deadzoneCounterweight / length;
+            y *= deadzoneCounterweight / length;
+        } else if (length > EmulatedMkbHandler.MAXIMUM_STICK_RANGE) {
+            x *= EmulatedMkbHandler.MAXIMUM_STICK_RANGE / length;
+            y *= EmulatedMkbHandler.MAXIMUM_STICK_RANGE / length;
+        }
+
+        const analog = mouseMapTo === MouseMapTo.LS ? GamepadStick.LEFT : GamepadStick.RIGHT;
+        this.#updateStick(analog, x, y);
+    }
+
+    handleMouseWheel = (data: MkbMouseWheel): boolean => {
+        let code = '';
+        if (data.vertical < 0) {
+            code = WheelCode.SCROLL_UP;
+        } else if (data.vertical > 0) {
+            code = WheelCode.SCROLL_DOWN;
+        } else if (data.horizontal < 0) {
+            code = WheelCode.SCROLL_LEFT;
+        } else if (data.horizontal > 0) {
+            code = WheelCode.SCROLL_RIGHT;
+        }
+
+        if (!code) {
+            return false;
+        }
+
+        const key = {
+            code: code,
+            name: KeyHelper.codeToKeyName(code),
+        };
+
+        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[key.code]!;
+        if (typeof buttonIndex === 'undefined') {
+            return false;
+        }
 
         if (this.#prevWheelCode === null || this.#prevWheelCode === key.code) {
             this.#wheelStoppedTimeout && clearTimeout(this.#wheelStoppedTimeout);
@@ -218,93 +416,20 @@ export class MkbHandler {
             this.#prevWheelCode = null;
             this.#pressButton(buttonIndex, false);
         }, 20);
+
+        return true;
     }
 
-    #decayStick = () => {
+    toggle = (force?: boolean) => {
-        if (!this.#allowStickDecaying) {
+        if (typeof force !== 'undefined') {
-            return;
+            this.#enabled = force;
+        } else {
+            this.#enabled = !this.#enabled;
         }
 
-        const mouseMapTo = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_MAP_TO];
-        if (mouseMapTo === MouseMapTo.OFF) {
-            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;
-        }
-
-        if (this.#allowStickDecaying) {
-            this.#updateStick(analog, x, y);
-
-            (x !== 0 || y !== 0) && requestAnimationFrame(this.#decayStick);
-        }
-    }
-
-    #onMouseStopped = () => {
-        this.#allowStickDecaying = true;
-        requestAnimationFrame(this.#decayStick);
-    }
-
-    #onMouseMoveEvent = (e: MouseEvent) => {
-        // TODO: optimize this
-        const mouseMapTo = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_MAP_TO];
-        if (mouseMapTo === MouseMapTo.OFF) {
-            // Ignore mouse movements
-            return;
-        }
-
-        this.#allowStickDecaying = false;
-        this.#detectMouseStoppedTimeout && clearTimeout(this.#detectMouseStoppedTimeout);
-        this.#detectMouseStoppedTimeout = window.setTimeout(this.#onMouseStopped.bind(this), 100);
-
-        const deltaX = e.movementX;
-        const deltaY = e.movementY;
-
-        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 length = this.#vectorLength(x, y);
-        if (length !== 0 && length < deadzoneCounterweight) {
-            x *= deadzoneCounterweight / length;
-            y *= deadzoneCounterweight / length;
-        } else if (length > MkbHandler.MAXIMUM_STICK_RANGE) {
-            x *= MkbHandler.MAXIMUM_STICK_RANGE / length;
-            y *= MkbHandler.MAXIMUM_STICK_RANGE / length;
-        }
-
-        const analog = mouseMapTo === MouseMapTo.LS ? GamepadStick.LEFT : GamepadStick.RIGHT;
-        this.#updateStick(analog, x, y);
-    }
-
-    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);
+            document.body.requestPointerLock();
         } else {
-            this.#waitForPointerLock(false);
             document.pointerLockElement && document.exitPointerLock();
         }
     }
@@ -325,10 +450,87 @@ export class MkbHandler {
         });
     }
 
+    waitForMouseData = (wait: boolean) => {
+        this.#$message && this.#$message.classList.toggle('bx-gone', !wait);
+    }
+
+    #onPollingModeChanged = (e: Event) => {
+        if (!this.#$message) {
+            return;
+        }
+
+        const mode = (e as any).mode;
+        if (mode === 'none') {
+            this.#$message.classList.remove('bx-offscreen');
+        } else {
+            this.#$message.classList.add('bx-offscreen');
+        }
+    }
+
+    #onDialogShown = () => {
+        document.pointerLockElement && document.exitPointerLock();
+    }
+
+    #initMessage = () => {
+        if (!this.#$message) {
+            this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg bx-gone'},
+                CE('div', {},
+                    CE('p', {}, t('virtual-controller')),
+                    CE('p', {}, t('press-key-to-toggle-mkb', {key: 'F8'})),
+                ),
+
+                CE('div', {'data-type': 'virtual'},
+                    createButton({
+                        style: ButtonStyle.PRIMARY | ButtonStyle.TALL | ButtonStyle.FULL_WIDTH,
+                        label: t('activate'),
+                        onClick: ((e: Event) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            this.toggle(true);
+                        }).bind(this),
+                    }),
+
+                    CE('div', {},
+                        createButton({
+                            label: t('ignore'),
+                            style: ButtonStyle.GHOST,
+                            onClick: e => {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                this.toggle(false);
+                                this.waitForMouseData(false);
+                            },
+                        }),
+
+                        createButton({
+                            label: t('edit'),
+                            onClick: e => {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                // Show Settings dialog & focus the MKB tab
+                                const dialog = SettingsNavigationDialog.getInstance();
+                                dialog.focusTab('mkb');
+                                NavigationDialogManager.getInstance().show(dialog);
+                            },
+                        }),
+                    ),
+                ),
+            );
+        }
+
+        if (!this.#$message.isConnected) {
+            document.documentElement.appendChild(this.#$message);
+        }
+    }
+
     #onPointerLockChange = () => {
-        if (this.#enabled && !document.pointerLockElement) {
+        if (document.pointerLockElement) {
+            this.start();
+        } else {
             this.stop();
-            this.#waitForPointerLock(true);
         }
     }
 
@@ -337,90 +539,104 @@ export class MkbHandler {
         this.stop();
     }
 
-    #onActivatePointerLock = () => {
+    #onPointerLockRequested = () => {
-        if (!document.pointerLockElement) {
-            document.body.requestPointerLock();
-        }
-
-        this.#waitForPointerLock(false);
         this.start();
     }
 
-    #waitForPointerLock = (wait: boolean) => {
+    #onPointerLockExited = () => {
-        this.#$message && this.#$message.classList.toggle('bx-gone', !wait);
+        this.#mouseDataProvider?.stop();
     }
 
-    #onStreamMenuShown = () => {
+    handleEvent(event: Event) {
-        this.#enabled && this.#waitForPointerLock(false);
+        switch (event.type) {
-    }
+            case BxEvent.POINTER_LOCK_REQUESTED:
-
+                this.#onPointerLockRequested();
-    #onStreamMenuHidden = () => {
+                break;
-        this.#enabled && this.#waitForPointerLock(true);
+            case BxEvent.POINTER_LOCK_EXITED:
+                this.#onPointerLockExited();
+                break;
+        }
     }
 
     init = () => {
         this.refreshPresetData();
-        this.#enabled = true;
+        this.#enabled = false;
+
+        if (AppInterface) {
+            this.#mouseDataProvider = new WebSocketMouseDataProvider(this);
+        } else {
+            this.#mouseDataProvider = new PointerLockMouseDataProvider(this);
+        }
+        this.#mouseDataProvider.init();
 
         window.addEventListener('keydown', this.#onKeyboardEvent);
+        window.addEventListener('keyup', this.#onKeyboardEvent);
 
-        document.addEventListener('pointerlockchange', this.#onPointerLockChange);
+        window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.#onPollingModeChanged);
-        document.addEventListener('pointerlockerror', this.#onPointerLockError);
+        window.addEventListener(BxEvent.XCLOUD_DIALOG_SHOWN, this.#onDialogShown);
 
-        this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg bx-gone'},
+        if (AppInterface) {
-                createButton({
+            // Android app doesn't support PointerLock API so we need to use a different method
-                    icon: Icon.MOUSE_SETTINGS,
+            window.addEventListener(BxEvent.POINTER_LOCK_REQUESTED, this);
-                    style: ButtonStyle.PRIMARY,
+            window.addEventListener(BxEvent.POINTER_LOCK_EXITED, this);
-                    onClick: e => {
+        } else {
-                        e.preventDefault();
+            document.addEventListener('pointerlockchange', this.#onPointerLockChange);
-                        e.stopPropagation();
+            document.addEventListener('pointerlockerror', this.#onPointerLockError);
+        }
 
-                        showStreamSettings('mkb');
+        this.#initMessage();
-                    },
+        this.#$message?.classList.add('bx-gone');
-                }),
-                CE('div', {},
-                    CE('p', {}, t('mkb-click-to-activate')),
-                    CE('p', {}, t<any>('press-key-to-toggle-mkb')({key: 'F8'})),
-                ),
-            );
 
-        this.#$message.addEventListener('click', this.#onActivatePointerLock);
+        if (AppInterface) {
-        document.documentElement.appendChild(this.#$message);
+            Toast.show(t('press-key-to-toggle-mkb', {key: `<b>F8</b>`}), t('virtual-controller'), {html: true});
-
+            this.waitForMouseData(false);
-        window.addEventListener(BxEvent.STREAM_MENU_SHOWN, this.#onStreamMenuShown);
+        } else {
-        window.addEventListener(BxEvent.STREAM_MENU_HIDDEN, this.#onStreamMenuHidden);
+            this.waitForMouseData(true);
-
+        }
-        this.#waitForPointerLock(true);
     }
 
     destroy = () => {
+        this.#isPolling = false;
         this.#enabled = false;
         this.stop();
 
-        this.#waitForPointerLock(false);
+        this.waitForMouseData(false);
         document.pointerLockElement && document.exitPointerLock();
 
         window.removeEventListener('keydown', this.#onKeyboardEvent);
+        window.removeEventListener('keyup', this.#onKeyboardEvent);
 
-        document.removeEventListener('pointerlockchange', this.#onPointerLockChange);
+        if (AppInterface) {
-        document.removeEventListener('pointerlockerror', this.#onPointerLockError);
+            window.removeEventListener(BxEvent.POINTER_LOCK_REQUESTED, this);
+            window.removeEventListener(BxEvent.POINTER_LOCK_EXITED, this);
+        } else {
+            document.removeEventListener('pointerlockchange', this.#onPointerLockChange);
+            document.removeEventListener('pointerlockerror', this.#onPointerLockError);
+        }
 
-        window.removeEventListener(BxEvent.STREAM_MENU_SHOWN, this.#onStreamMenuShown);
+        window.removeEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.#onPollingModeChanged);
-        window.removeEventListener(BxEvent.STREAM_MENU_HIDDEN, this.#onStreamMenuHidden);
+        window.removeEventListener(BxEvent.XCLOUD_DIALOG_SHOWN, this.#onDialogShown);
+
+        this.#mouseDataProvider?.destroy();
+
+        window.removeEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.#onPollingModeChanged);
     }
 
     start = () => {
-        window.navigator.getGamepads = this.#patchedGetGamepads;
+        if (!this.#enabled) {
+            this.#enabled = true;
+            Toast.show(t('virtual-controller'), t('enabled'), {instant: true});
+        }
+
+        this.#isPolling = true;
+        this.#escKeyDownTime = -1;
 
         this.#resetGamepad();
+        window.navigator.getGamepads = this.#patchedGetGamepads;
 
-        window.addEventListener('keyup', this.#onKeyboardEvent);
+        this.waitForMouseData(false);
 
-        window.addEventListener('mousemove', this.#onMouseMoveEvent);
+        this.#mouseDataProvider?.start();
-        window.addEventListener('mousedown', this.#onMouseEvent);
-        window.addEventListener('mouseup', this.#onMouseEvent);
-        window.addEventListener('wheel', this.#onWheelEvent);
-        window.addEventListener('contextmenu', this.#disableContextMenu);
 
         // Dispatch "gamepadconnected" event
         const virtualGamepad = this.#getVirtualGamepad();
@@ -430,38 +646,48 @@ export class MkbHandler {
         BxEvent.dispatch(window, 'gamepadconnected', {
                 gamepad: virtualGamepad,
             });
+
+        window.BX_EXPOSED.stopTakRendering = true;
+
+        Toast.show(t('virtual-controller'), t('enabled'), {instant: true});
     }
 
     stop = () => {
+        this.#enabled = false;
+        this.#isPolling = false;
+        this.#escKeyDownTime = -1;
 
-        // Dispatch "gamepaddisconnected" event
         const virtualGamepad = this.#getVirtualGamepad();
-        virtualGamepad.connected = false;
+        if (virtualGamepad.connected) {
-        virtualGamepad.timestamp = performance.now();
+            // Dispatch "gamepaddisconnected" event
+            this.#resetGamepad();
 
-        BxEvent.dispatch(window, 'gamepaddisconnected', {
+            virtualGamepad.connected = false;
-                gamepad: virtualGamepad,
+            virtualGamepad.timestamp = performance.now();
-            });
 
-        window.navigator.getGamepads = this.#nativeGetGamepads;
+            BxEvent.dispatch(window, 'gamepaddisconnected', {
+                    gamepad: virtualGamepad,
+                });
 
-        this.#resetGamepad();
+            window.navigator.getGamepads = this.#nativeGetGamepads;
+        }
 
-        window.removeEventListener('keyup', this.#onKeyboardEvent);
+        this.waitForMouseData(true);
+        this.#mouseDataProvider?.stop();
 
-        window.removeEventListener('mousemove', this.#onMouseMoveEvent);
+        // Toast.show(t('virtual-controller'), t('disabled'), {instant: true});
-        window.removeEventListener('mousedown', this.#onMouseEvent);
-        window.removeEventListener('mouseup', this.#onMouseEvent);
-        window.removeEventListener('wheel', this.#onWheelEvent);
-        window.removeEventListener('contextmenu', this.#disableContextMenu);
     }
 
     static setupEvents() {
-        window.addEventListener(BxEvent.STREAM_PLAYING, () => {
+        isFullVersion() && window.addEventListener(BxEvent.STREAM_PLAYING, () => {
-            // Enable MKB
+            if (STATES.currentStream.titleInfo?.details.hasMkbSupport) {
-            if (getPref(PrefKey.MKB_ENABLED)) {
+                // Enable native MKB in Android app
-                console.log('Emulate MKB');
+                if (AppInterface && getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on') {
-                MkbHandler.INSTANCE.init();
+                    AppInterface && NativeMkbHandler.getInstance().init();
+                }
+            } else if (getPref(PrefKey.MKB_ENABLED) && (AppInterface || !UserAgent.isMobile())) {
+                    BxLogger.info(LOG_TAG, 'Emulate MKB');
+                    EmulatedMkbHandler.getInstance().init();
             }
         });
     }

src/modules/mkb/mkb-preset.ts

@@ -1,9 +1,9 @@
-import { t } from "../../utils/translation";
+import { t } from "@utils/translation";
-import { SettingElementType } from "../../utils/settings";
+import { GamepadKey, MouseButtonCode, MouseMapTo, MkbPresetKey } from "@enums/mkb";
-import { GamepadKey, MouseButtonCode, MouseMapTo, MkbPresetKey } from "./definitions";
+import { EmulatedMkbHandler } from "./mkb-handler";
-import { MkbHandler } from "./mkb-handler";
+import type { MkbPresetData, MkbConvertedPresetData } from "@/types/mkb";
-import type { MkbPresetData, MkbConvertedPresetData } from "../../types/mkb";
+import type { PreferenceSettings } from "@/types/preferences";
-import type { PreferenceSettings } from "../../types/preferences";
+import { SettingElementType } from "@/utils/setting-element";
 
 
 export class MkbPreset {
@@ -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_X]: 100,
-            [MkbPresetKey.MOUSE_SENSITIVITY_Y]: 50,
+            [MkbPresetKey.MOUSE_SENSITIVITY_Y]: 100,
             [MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT]: 20,
-            [MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH]: 18,
-            [MkbPresetKey.MOUSE_STICK_DECAY_MIN]: 6,
         },
     };
 
@@ -146,11 +119,9 @@ export class MkbPreset {
 
         // Pre-calculate mouse's sensitivities
         const mouse = obj.mouse;
-        mouse[MkbPresetKey.MOUSE_SENSITIVITY_X] *= MkbHandler.DEFAULT_PANNING_SENSITIVITY;
+        mouse[MkbPresetKey.MOUSE_SENSITIVITY_X] *= EmulatedMkbHandler.DEFAULT_PANNING_SENSITIVITY;
-        mouse[MkbPresetKey.MOUSE_SENSITIVITY_Y] *= MkbHandler.DEFAULT_PANNING_SENSITIVITY;
+        mouse[MkbPresetKey.MOUSE_SENSITIVITY_Y] *= EmulatedMkbHandler.DEFAULT_PANNING_SENSITIVITY;
-        mouse[MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT] *= MkbHandler.DEFAULT_DEADZONE_COUNTERWEIGHT;
+        mouse[MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT] *= EmulatedMkbHandler.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') {

src/modules/mkb/mkb-remapper.ts

@@ -1,16 +1,17 @@
-import { GamepadKey } from "./definitions";
+import { CE, createButton, ButtonStyle } from "@utils/html";
-import { CE, createButton, ButtonStyle } from "../../utils/html";
+import { t } from "@utils/translation";
-import { t } from "../../utils/translation";
+import { Dialog } from "@modules/dialog";
-import { Dialog } from "../dialog";
-import { getPref, setPref, PrefKey } from "../../utils/preferences";
-import { MkbPresetKey, GamepadKeyName } from "./definitions";
 import { KeyHelper } from "./key-helper";
 import { MkbPreset } from "./mkb-preset";
-import { MkbHandler } from "./mkb-handler";
+import { EmulatedMkbHandler } from "./mkb-handler";
-import { LocalDb } from "../../utils/local-db";
+import { LocalDb } from "@utils/local-db";
-import { Icon } from "../../utils/html";
+import { BxIcon } from "@utils/bx-icon";
-import { SettingElement } from "../../utils/settings";
+import type { MkbPresetData, MkbStoredPresets } from "@/types/mkb";
-import type { MkbPresetData, MkbStoredPresets } from "../../types/mkb";
+import { MkbPresetKey, GamepadKey, GamepadKeyName } from "@enums/mkb";
+import { deepClone } from "@utils/global";
+import { SettingElement } from "@/utils/setting-element";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
 
 
 type MkbRemapperElements = {
@@ -258,7 +259,7 @@ export class MkbRemapper {
 
                 defaultPresetId = this.#STATE.currentPresetId;
                 setPref(PrefKey.MKB_DEFAULT_PRESET_ID, defaultPresetId);
-                MkbHandler.INSTANCE.refreshPresetData();
+                EmulatedMkbHandler.getInstance().refreshPresetData();
             } else {
                 defaultPresetId = getPref(PrefKey.MKB_DEFAULT_PRESET_ID);
             }
@@ -292,7 +293,7 @@ export class MkbRemapper {
         this.#$.wrapper!.classList.toggle('bx-editing', this.#STATE.isEditing);
 
         if (this.#STATE.isEditing) {
-            this.#STATE.editingPresetData = structuredClone(this.#getCurrentPreset().data);
+            this.#STATE.editingPresetData = deepClone(this.#getCurrentPreset().data);
         } else {
             this.#STATE.editingPresetData = null;
         }
@@ -317,7 +318,7 @@ export class MkbRemapper {
     render() {
         this.#$.wrapper = CE('div', {'class': 'bx-mkb-settings'});
 
-        this.#$.presetsSelect = CE<HTMLSelectElement>('select', {});
+        this.#$.presetsSelect = CE<HTMLSelectElement>('select', {tabindex: -1});
         this.#$.presetsSelect!.addEventListener('change', e => {
             this.#switchPreset(parseInt((e.target as HTMLSelectElement).value));
         });
@@ -336,80 +337,84 @@ export class MkbRemapper {
         };
 
         const $header = CE('div', {'class': 'bx-mkb-preset-tools'},
-                this.#$.presetsSelect,
+            this.#$.presetsSelect,
-                // Rename button
+            // Rename button
-                createButton({
+            createButton({
-                    title: t('rename'),
+                title: t('rename'),
-                    icon: Icon.CURSOR_TEXT,
+                icon: BxIcon.CURSOR_TEXT,
-                    onClick: e => {
+                tabIndex: -1,
-                        const preset = this.#getCurrentPreset();
+                onClick: e => {
+                    const preset = this.#getCurrentPreset();
 
-                        let newName = promptNewName(preset.name);
+                    let newName = promptNewName(preset.name);
-                        if (!newName || newName === preset.name) {
+                    if (!newName || newName === preset.name) {
+                        return;
+                    }
+
+                    // Update preset with new name
+                    preset.name = newName;
+                    LocalDb.INSTANCE.updatePreset(preset).then(id => this.#refresh());
+                },
+            }),
+
+            // New button
+            createButton({
+                    icon: BxIcon.NEW,
+                    title: t('new'),
+                    tabIndex: -1,
+                    onClick: e => {
+                        let newName = promptNewName('');
+                        if (!newName) {
                             return;
                         }
 
-                        // Update preset with new name
+                        // Create new preset selected name
-                        preset.name = newName;
+                        LocalDb.INSTANCE.newPreset(newName, MkbPreset.DEFAULT_PRESET).then(id => {
-                        LocalDb.INSTANCE.updatePreset(preset).then(id => this.#refresh());
+                            this.#STATE.currentPresetId = id;
+                            this.#refresh();
+                        });
                     },
                 }),
 
-                // New button
+            // Copy button
-                createButton({
+            createButton({
-                      icon: Icon.NEW,
+                icon: BxIcon.COPY,
-                      title: t('new'),
+                title: t('copy'),
-                      onClick: e => {
+                tabIndex: -1,
-                          let newName = promptNewName('');
+                onClick: e => {
-                          if (!newName) {
+                    const preset = this.#getCurrentPreset();
-                              return;
-                          }
 
-                          // Create new preset selected name
+                    let newName = promptNewName(`${preset.name} (2)`);
-                          LocalDb.INSTANCE.newPreset(newName, MkbPreset.DEFAULT_PRESET).then(id => {
+                    if (!newName) {
-                              this.#STATE.currentPresetId = id;
+                        return;
-                              this.#refresh();
+                    }
-                          });
-                      },
-                    }),
 
-                // Copy button
+                    // Create new preset selected name
-                createButton({
+                    LocalDb.INSTANCE.newPreset(newName, preset.data).then(id => {
-                        icon: Icon.COPY,
+                        this.#STATE.currentPresetId = id;
-                        title: t('copy'),
+                        this.#refresh();
-                        onClick: e => {
+                    });
-                            const preset = this.#getCurrentPreset();
+                },
+            }),
 
-                            let newName = promptNewName(`${preset.name} (2)`);
+            // Delete button
-                            if (!newName) {
+            createButton({
-                                return;
+                icon: BxIcon.TRASH,
-                            }
+                style: ButtonStyle.DANGER,
+                title: t('delete'),
+                tabIndex: -1,
+                onClick: e => {
+                    if (!confirm(t('confirm-delete-preset'))) {
+                        return;
+                    }
 
-                            // Create new preset selected name
+                    LocalDb.INSTANCE.deletePreset(this.#STATE.currentPresetId).then(id => {
-                            LocalDb.INSTANCE.newPreset(newName, preset.data).then(id => {
+                        this.#STATE.currentPresetId = 0;
-                                this.#STATE.currentPresetId = id;
+                        this.#refresh();
-                                this.#refresh();
+                    });
-                            });
+                },
-                        },
+            }),
-                    }),
+        );
-
-                // Delete button
-                createButton({
-                        icon: Icon.TRASH,
-                        style: ButtonStyle.DANGER,
-                        title: t('delete'),
-                        onClick: e => {
-                            if (!confirm(t('confirm-delete-preset'))) {
-                                return;
-                            }
-
-                            LocalDb.INSTANCE.deletePreset(this.#STATE.currentPresetId).then(id => {
-                                this.#STATE.currentPresetId = 0;
-                                this.#refresh();
-                            });
-                        },
-                    }),
-            );
 
         this.#$.wrapper!.appendChild($header);
 
@@ -426,10 +431,11 @@ export class MkbRemapper {
             const $fragment = document.createDocumentFragment();
             for (let i = 0; i < keysPerButton; i++) {
                 $elm = CE('button', {
-                        'data-prompt': buttonPrompt,
+                    type: 'button',
-                        'data-button-index': buttonIndex,
+                    'data-prompt': buttonPrompt,
-                        'data-key-slot': i,
+                    'data-button-index': buttonIndex,
-                    }, ' ');
+                    'data-key-slot': i,
+                }, ' ');
 
                 $elm.addEventListener('mouseup', this.#onBindingKey);
                 $elm.addEventListener('contextmenu', this.#onContextMenu);
@@ -439,9 +445,9 @@ export class MkbRemapper {
             }
 
             const $keyRow = CE('div', {'class': 'bx-mkb-key-row'},
-                    CE('label', {'title': buttonName}, buttonPrompt),
+                CE('label', {'title': buttonName}, buttonPrompt),
-                    $fragment,
+                $fragment,
-                );
+            );
 
             $rows.appendChild($keyRow);
         }
@@ -459,10 +465,13 @@ 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('label', {
-                    CE('label', {'for': `bx_setting_${key}`}, setting.label),
+                class: 'bx-settings-row',
-                    $elm = SettingElement.render(setting.type, key, setting, value, onChange, setting.params),
+                for: `bx_setting_${key}`
-                );
+            },
+                CE('span', {class: 'bx-settings-label'}, setting.label),
+                $elm = SettingElement.render(setting.type, key, setting, value, onChange, setting.params),
+            );
 
             $mouseSettings.appendChild($row);
             this.#$.allMouseElements[key as MkbPresetKey] = $elm;
@@ -473,59 +482,63 @@ export class MkbRemapper {
 
         // Render action buttons
         const $actionButtons = CE('div', {'class': 'bx-mkb-action-buttons'},
-                CE('div', {},
+            CE('div', {},
-                   // Edit button
+                // Edit button
-                   createButton({
+                createButton({
-                           label: t('edit'),
+                    label: t('edit'),
-                           onClick: e => this.#toggleEditing(true),
+                    tabIndex: -1,
-                   }),
+                    onClick: e => this.#toggleEditing(true),
+                }),
 
-                   // Activate button
+                // Activate button
-                   this.#$.activateButton = createButton({
+                this.#$.activateButton = createButton({
-                           label: t('activate'),
+                    label: t('activate'),
-                           style: ButtonStyle.PRIMARY,
+                    style: ButtonStyle.PRIMARY,
-                           onClick: e => {
+                    tabIndex: -1,
-                               setPref(PrefKey.MKB_DEFAULT_PRESET_ID, this.#STATE.currentPresetId);
+                    onClick: e => {
-                               MkbHandler.INSTANCE.refreshPresetData();
+                        setPref(PrefKey.MKB_DEFAULT_PRESET_ID, this.#STATE.currentPresetId);
+                        EmulatedMkbHandler.getInstance().refreshPresetData();
 
-                               this.#refresh();
+                        this.#refresh();
-                           },
+                    },
-                       }),
+                }),
-                ),
+            ),
 
-                CE('div', {},
+            CE('div', {},
-                   // Cancel button
+                // Cancel button
-                   createButton({
+                createButton({
-                           label: t('cancel'),
+                    label: t('cancel'),
-                           style: ButtonStyle.GHOST,
+                    style: ButtonStyle.GHOST,
-                           onClick: e => {
+                    tabIndex: -1,
-                               // Restore preset
+                    onClick: e => {
-                               this.#switchPreset(this.#STATE.currentPresetId);
+                        // Restore preset
-                               this.#toggleEditing(false);
+                        this.#switchPreset(this.#STATE.currentPresetId);
-                           },
+                        this.#toggleEditing(false);
-                       }),
+                    },
+                }),
 
-                   // Save button
+                // Save button
-                   createButton({
+                createButton({
-                           label: t('save'),
+                    label: t('save'),
-                           style: ButtonStyle.PRIMARY,
+                    style: ButtonStyle.PRIMARY,
-                           onClick: e => {
+                    tabIndex: -1,
-                               const updatedPreset = structuredClone(this.#getCurrentPreset());
+                    onClick: e => {
-                               updatedPreset.data = this.#STATE.editingPresetData as MkbPresetData;
+                        const updatedPreset = deepClone(this.#getCurrentPreset());
+                        updatedPreset.data = this.#STATE.editingPresetData as MkbPresetData;
 
-                               LocalDb.INSTANCE.updatePreset(updatedPreset).then(id => {
+                        LocalDb.INSTANCE.updatePreset(updatedPreset).then(id => {
-                                   // If this is the default preset => refresh preset data
+                            // If this is the default preset => refresh preset data
-                                   if (id === getPref(PrefKey.MKB_DEFAULT_PRESET_ID)) {
+                            if (id === getPref(PrefKey.MKB_DEFAULT_PRESET_ID)) {
-                                       MkbHandler.INSTANCE.refreshPresetData();
+                                EmulatedMkbHandler.getInstance().refreshPresetData();
-                                   }
+                            }
 
-                                   this.#toggleEditing(false);
+                            this.#toggleEditing(false);
-                                   this.#refresh();
+                            this.#refresh();
-                               });
+                        });
-                           },
+                    },
-                       }),
+                }),
-                ),
+            ),
-            );
+        );
 
         this.#$.wrapper!.appendChild($actionButtons);
 

src/modules/mkb/native-mkb-handler.ts

@@ -0,0 +1,320 @@
+import { Toast } from "@/utils/toast";
+import { PointerClient } from "./pointer-client";
+import { AppInterface, STATES } from "@/utils/global";
+import { MkbHandler } from "./base-mkb-handler";
+import { t } from "@/utils/translation";
+import { BxEvent } from "@/utils/bx-event";
+import { ButtonStyle, CE, createButton } from "@/utils/html";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
+
+type NativeMouseData = {
+    X: number,
+    Y: number,
+    Buttons: number,
+    WheelX: number,
+    WheelY: number,
+    Type? : 0,  // 0: Relative, 1: Absolute
+}
+
+type XcloudInputSink = {
+    onMouseInput: (data: NativeMouseData) => void;
+}
+
+export class NativeMkbHandler extends MkbHandler {
+    private static instance: NativeMkbHandler;
+    #pointerClient: PointerClient | undefined;
+    #enabled: boolean = false;
+
+    #mouseButtonsPressed = 0;
+    #mouseWheelX = 0;
+    #mouseWheelY = 0;
+
+    #mouseVerticalMultiply = 0;
+    #mouseHorizontalMultiply = 0;
+
+    #inputSink: XcloudInputSink | undefined;
+
+    #$message?: HTMLElement;
+
+    public static getInstance(): NativeMkbHandler {
+        if (!NativeMkbHandler.instance) {
+            NativeMkbHandler.instance = new NativeMkbHandler();
+        }
+
+        return NativeMkbHandler.instance;
+    }
+
+    #onKeyboardEvent(e: KeyboardEvent) {
+        if (e.type === 'keyup' && e.code === 'F8') {
+            e.preventDefault();
+            this.toggle();
+            return;
+        }
+    }
+
+    #onPointerLockRequested(e: Event) {
+        AppInterface.requestPointerCapture();
+        this.start();
+    }
+
+    #onPointerLockExited(e: Event) {
+        AppInterface.releasePointerCapture();
+        this.stop();
+    }
+
+    #onPollingModeChanged = (e: Event) => {
+        if (!this.#$message) {
+            return;
+        }
+
+        const mode = (e as any).mode;
+        if (mode === 'none') {
+            this.#$message.classList.remove('bx-offscreen');
+        } else {
+            this.#$message.classList.add('bx-offscreen');
+        }
+    }
+
+    #onDialogShown = () => {
+        document.pointerLockElement && document.exitPointerLock();
+    }
+
+    #initMessage() {
+        if (!this.#$message) {
+            this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg'},
+                CE('div', {},
+                    CE('p', {}, t('native-mkb')),
+                    CE('p', {}, t('press-key-to-toggle-mkb', {key: 'F8'})),
+                ),
+
+                CE('div', {'data-type': 'native'},
+                    createButton({
+                        style: ButtonStyle.PRIMARY | ButtonStyle.FULL_WIDTH | ButtonStyle.TALL,
+                        label: t('activate'),
+                        onClick: ((e: Event) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            this.toggle(true);
+                        }).bind(this),
+                    }),
+
+                    createButton({
+                        style: ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH,
+                        label: t('ignore'),
+                        onClick: e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            this.#$message?.classList.add('bx-gone');
+                        },
+                    }),
+                ),
+            );
+        }
+
+        if (!this.#$message.isConnected) {
+            document.documentElement.appendChild(this.#$message);
+        }
+    }
+
+    handleEvent(event: Event) {
+        switch (event.type) {
+            case 'keyup':
+                this.#onKeyboardEvent(event as KeyboardEvent);
+                break;
+
+            case BxEvent.XCLOUD_DIALOG_SHOWN:
+                this.#onDialogShown();
+                break;
+
+            case BxEvent.POINTER_LOCK_REQUESTED:
+                this.#onPointerLockRequested(event);
+                break;
+            case BxEvent.POINTER_LOCK_EXITED:
+                this.#onPointerLockExited(event);
+                break;
+
+            case BxEvent.XCLOUD_POLLING_MODE_CHANGED:
+                this.#onPollingModeChanged(event);
+                break;
+        }
+    }
+
+    init() {
+        this.#pointerClient = PointerClient.getInstance();
+        this.#inputSink = window.BX_EXPOSED.inputSink;
+
+        // Stop keyboard input at startup
+        this.#updateInputConfigurationAsync(false);
+
+        try {
+            this.#pointerClient.start(STATES.pointerServerPort, this);
+        } catch (e) {
+            Toast.show('Cannot enable Mouse & Keyboard feature');
+        }
+
+        this.#mouseVerticalMultiply = getPref(PrefKey.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY);
+        this.#mouseHorizontalMultiply = getPref(PrefKey.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY);
+
+        window.addEventListener('keyup', this);
+
+        window.addEventListener(BxEvent.XCLOUD_DIALOG_SHOWN, this);
+        window.addEventListener(BxEvent.POINTER_LOCK_REQUESTED, this);
+        window.addEventListener(BxEvent.POINTER_LOCK_EXITED, this);
+        window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this);
+
+        this.#initMessage();
+
+        if (AppInterface) {
+            Toast.show(t('press-key-to-toggle-mkb', {key: `<b>F8</b>`}), t('native-mkb'), {html: true});
+            this.#$message?.classList.add('bx-gone');
+        } else {
+            this.#$message?.classList.remove('bx-gone');
+        }
+    }
+
+    toggle(force?: boolean) {
+        let setEnable: boolean;
+        if (typeof force !== 'undefined') {
+            setEnable = force;
+        } else {
+            setEnable = !this.#enabled;
+        }
+
+        if (setEnable) {
+            document.documentElement.requestPointerLock();
+        } else {
+            document.exitPointerLock();
+        }
+    }
+
+    #updateInputConfigurationAsync(enabled: boolean) {
+        window.BX_EXPOSED.streamSession.updateInputConfigurationAsync({
+            enableKeyboardInput: enabled,
+            enableMouseInput: enabled,
+            enableAbsoluteMouse: false,
+            enableTouchInput: false,
+        });
+    }
+
+    start() {
+        this.#resetMouseInput();
+        this.#enabled = true;
+
+        this.#updateInputConfigurationAsync(true);
+
+        window.BX_EXPOSED.stopTakRendering = true;
+        this.#$message?.classList.add('bx-gone');
+
+        Toast.show(t('native-mkb'), t('enabled'), {instant: true});
+    }
+
+    stop() {
+        this.#resetMouseInput();
+        this.#enabled = false;
+        this.#updateInputConfigurationAsync(false);
+
+        this.#$message?.classList.remove('bx-gone');
+    }
+
+    destroy(): void {
+        this.#pointerClient?.stop();
+        window.removeEventListener('keyup', this);
+
+        window.removeEventListener(BxEvent.XCLOUD_DIALOG_SHOWN, this);
+        window.removeEventListener(BxEvent.POINTER_LOCK_REQUESTED, this);
+        window.removeEventListener(BxEvent.POINTER_LOCK_EXITED, this);
+        window.removeEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this);
+
+        this.#$message?.classList.add('bx-gone');
+    }
+
+    handleMouseMove(data: MkbMouseMove): void {
+        this.#sendMouseInput({
+            X: data.movementX,
+            Y: data.movementY,
+            Buttons: this.#mouseButtonsPressed,
+            WheelX: this.#mouseWheelX,
+            WheelY: this.#mouseWheelY,
+        });
+    }
+
+    handleMouseClick(data: MkbMouseClick): void {
+        const { pointerButton, pressed } = data;
+
+        if (pressed) {
+            this.#mouseButtonsPressed |= pointerButton!;
+        } else {
+            this.#mouseButtonsPressed ^= pointerButton!;
+        }
+        this.#mouseButtonsPressed = Math.max(0, this.#mouseButtonsPressed);
+
+        this.#sendMouseInput({
+            X: 0,
+            Y: 0,
+            Buttons: this.#mouseButtonsPressed,
+            WheelX: this.#mouseWheelX,
+            WheelY: this.#mouseWheelY,
+        });
+    }
+
+    handleMouseWheel(data: MkbMouseWheel): boolean {
+        const { vertical, horizontal } = data;
+
+        this.#mouseWheelX = horizontal;
+        if (this.#mouseHorizontalMultiply && this.#mouseHorizontalMultiply !== 1) {
+            this.#mouseWheelX *= this.#mouseHorizontalMultiply;
+        }
+
+        this.#mouseWheelY = vertical;
+        if (this.#mouseVerticalMultiply && this.#mouseVerticalMultiply !== 1) {
+            this.#mouseWheelY *= this.#mouseVerticalMultiply;
+        }
+
+        this.#sendMouseInput({
+            X: 0,
+            Y: 0,
+            Buttons: this.#mouseButtonsPressed,
+            WheelX: this.#mouseWheelX,
+            WheelY: this.#mouseWheelY,
+        });
+
+        return true;
+    }
+
+    setVerticalScrollMultiplier(vertical: number) {
+        this.#mouseVerticalMultiply = vertical;
+    }
+
+    setHorizontalScrollMultiplier(horizontal: number) {
+        this.#mouseHorizontalMultiply = horizontal;
+    }
+
+    waitForMouseData(enabled: boolean): void {
+    }
+
+    isEnabled(): boolean {
+        return this.#enabled;
+    }
+
+    #sendMouseInput(data: NativeMouseData) {
+        data.Type = 0;  // Relative
+        this.#inputSink?.onMouseInput(data);
+    }
+
+    #resetMouseInput() {
+        this.#mouseButtonsPressed = 0;
+        this.#mouseWheelX = 0;
+        this.#mouseWheelY = 0;
+
+        this.#sendMouseInput({
+            X: 0,
+            Y: 0,
+            Buttons: 0,
+            WheelX: 0,
+            WheelY: 0,
+        });
+    }
+}