Bump version to 6.3.1

* Replace BxEvent.TITLE_INFO_READY with Event Bus

* Migrate more events

* Migrate stream events to event bus

* Migrate preset events

* Migrate more

* Fix dispatching "input" event twice in Number Stepper

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

@@ -4,6 +4,13 @@ title: "[Bug] "
 labels:
   - bug
 body:
+  - type: markdown
+    attributes:
+      value: |
+        > [!note]
+        > - Use `Discussions` if you want to ask for question.
+        > - Non-English reports will be deleted. No exceptions.
+
   - type: checkboxes
     id: checklist
     attributes:
@@ -15,17 +22,37 @@ body:
           required: true
         - label: I will describe the problem with as much detail as possible.
           required: true
-  - type: checkboxes
-    id: questions
+
+  - type: dropdown
+    id: question_01
     attributes:
-      label: Questions
+      label: xCloud officially supports your country/region
       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
+        - "No"
+        - "Yes"
+    validations:
+      required: true
+
+  - type: dropdown
+    id: question_02
+    attributes:
+      label: "The bug doesn't happen when you disable Better xCloud script"
+      options:
+        - "No"
+        - "Yes"
+    validations:
+      required: true
+
+  - type: dropdown
+    id: question_03
+    attributes:
+      label: "Previous Better xCloud versions didn't have this bug (name which one)"
+      options:
+        - "No"
+        - "Yes"
+    validations:
+      required: true
+
   - type: dropdown
     id: device_type
     attributes:
@@ -40,6 +67,7 @@ body:
       multiple: false
     validations:
       required: true
+
   - type: input
     id: device_name
     attributes:
@@ -48,6 +76,7 @@ body:
       placeholder: "e.g., Google Pixel 8"
     validations:
       required: true
+
   - type: input
     id: os
     attributes:
@@ -56,6 +85,7 @@ body:
       placeholder: "e.g., Android 14"
     validations:
       required: true
+  
   - type: input
     id: browser_version
     attributes:
@@ -64,6 +94,7 @@ body:
       placeholder: "e.g., Chrome 124.0, Android app 0.15.0"
     validations:
       required: true
+  
   - type: input
     id: extension_version
     attributes:
@@ -72,6 +103,7 @@ body:
       placeholder: "e.g., 3.5.0"
     validations:
       required: true
+  
   - type: input
     id: game_list
     attributes:
@@ -80,6 +112,7 @@ body:
       placeholder: "e.g., Halo"
     validations:
       required: false
+  
   - type: textarea
     id: reproduction
     attributes:
@@ -93,6 +126,7 @@ body:
         3. Error
     validations:
       required: true
+
   - type: textarea
     id: media
     attributes:

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

@@ -13,7 +13,7 @@ body:
   - type: dropdown
     id: device_type
     attributes:
-      label: Device
+      label: Device type
       description: "Which device type is this feature for?"
       options:
         - All devices
@@ -23,10 +23,20 @@ body:
       multiple: false
     validations:
       required: true
+
+  - type: input
+    id: device_name
+    attributes:
+      label: "Device"
+      description: "Name of the device"
+      placeholder: "e.g., Google Pixel 8"
+    validations:
+      required: true
+  
   - type: textarea
     id: suggestion
     attributes:
       label: "Suggestion"
-      description: "What do you want to suggest?"
+      description: "What do you want to suggest? Include (mockup) screenshot if possible."
     validations:
       required: true

.gitignore

@@ -1,3 +1,5 @@
+src/modules/patcher/patches/*.js
+
 # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
 
 # Logs

.vscode/settings.json

@@ -1,5 +1,12 @@
 {
   "files.readonlyInclude": {
-    "dist/**/*": true
+    "dist/**/*": true,
+    "src/modules/patcher/patches/controller-customization.js": true,
+    "src/modules/patcher/patches/expose-stream-session.js": true,
+    "src/modules/patcher/patches/game-card-icons.js": true,
+    "src/modules/patcher/patches/local-co-op-enable.js": true,
+    "src/modules/patcher/patches/poll-gamepad.js": true,
+    "src/modules/patcher/patches/remote-play-keep-alive.js": true,
+    "src/modules/patcher/patches/vibration-adjust.js": true
   }
 }

README.md

@@ -1,10 +1,17 @@
-# Better xCloud
-Improve Xbox Cloud Gaming (xCloud) experience on [xbox.com/play](https://www.xbox.com/play). It also allows you to use Remote Play on the xCloud website.  
+<div align="center">
+    <img src="https://raw.githubusercontent.com/redphx/better-xcloud/refs/heads/typescript/resources/logos/better-xcloud.png" width="256"/>  
+    <h1>Better xCloud</h1>
+    <!-- Latest Version Badge -->
+    <a href="https://github.com/redphx/better-xcloud/releases"><img src="https://img.shields.io/github/v/release/redphx/better-xcloud?label=latest" alt="Latest version" /></a>
+    <!-- Total Downloads Badge -->
+    <a href="https://github.com/redphx/better-xcloud/releases"><img src="https://img.shields.io/github/downloads/redphx/better-xcloud/total?color=%23e15f2c" alt="Total downloads" /></a>
+    <!-- Total Stars Badge -->
+    <a href="https://github.com/redphx/better-xcloud/stargazers"><img src="https://img.shields.io/github/stars/redphx/better-xcloud?color=%23cca400" alt="Total stars" /></a>
+</div>
 
-> [!TIP]
-> The Android app is in development at [redphx/better-xcloud-android](https://github.com/redphx/better-xcloud-android)
+### Improve Xbox Cloud Gaming (xCloud) experience on [xbox.com/play](https://www.xbox.com/play). It also allows you to use Remote Play on the xCloud website.  
 
-> [!IMPORTANT]
+> [!IMPORTANT]  
 > I only accept pull requests for:
 > - Custom touch controls
 > - Bug fixes
@@ -13,16 +20,12 @@ Improve Xbox Cloud Gaming (xCloud) experience on [xbox.com/play](https://www.xbo
 - Windows
 - macOS
 - Linux, SteamOS (including Steam Deck)
-- Android, Android TV (including Meta Quest VR Headsets)
+- Android, Android TV (including Meta Quest VR Headsets): [redphx/better-xcloud-android](https://github.com/redphx/better-xcloud-android)
 - iOS, iPadOS
 
 This script makes me spend more time with xCloud, and I hope the same thing happens to you.  
 If you like this project please give it a 🌟. Thank you 🙏.
 
-[![Latest version](https://img.shields.io/github/v/release/redphx/better-xcloud?label=latest)](https://github.com/redphx/better-xcloud/releases) 
-[![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.
 

build.sh

@@ -5,8 +5,9 @@ build_all () {
     printf "\033c"
 
     # Build all variants
-    bun build.ts --version $1 --variant full
-    bun build.ts --version $1 --variant lite
+    bun build.ts --version $1 --variant full --meta
+    bun build.ts --version $1 --variant full --pretty
+    # bun build.ts --version $1 --variant lite
 
     # Wait for key
     read -p ">> Press Enter to build again..."

build.ts

@@ -1,5 +1,5 @@
 #!/usr/bin/env bun
-import { readFile } from "node:fs/promises";
+import { readFile, readdir } from "node:fs/promises";
 import { parseArgs } from "node:util";
 import { sys } from "typescript";
 // @ts-ignore
@@ -56,7 +56,23 @@ function minifyCodeImports(str: string): string {
     return str;
 }
 
-const postProcess = (str: string): string => {
+function minifyIfElse(str: string): string {
+    // Collapse if/else blocks without curly braces
+    return str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
+}
+
+function removeComments(str: string): string {
+    // Remove enum's inlining comments
+    str = str.replaceAll(/ \/\* [A-Z0-9_:]+ \*\//g, '');
+    str = str.replaceAll('/* @__PURE__ */ ', '');
+
+    // Remove comments from import
+    str = str.replaceAll(/\/\/ src.*\n/g, '');
+
+    return str;
+}
+
+function postProcess(str: string, pretty: boolean): string {
     // Unescape unicode charaters
     str = unescape((str.replace(/\\u/g, '%u')));
     // Replace \x00 to normal character
@@ -65,12 +81,7 @@ const postProcess = (str: string): string => {
     // Replace "globalThis." with "var";
     str = str.replaceAll('globalThis.', 'var ');
 
-    // Remove enum's inlining comments
-    str = str.replaceAll(/ \/\* [A-Z0-9_:]+ \*\//g, '');
-    str = str.replaceAll('/* @__PURE__ */ ', '');
-
-    // Remove comments from import
-    str = str.replaceAll(/\/\/ src.*\n/g, '');
+    str = removeComments(str);
 
     // Add ADDITIONAL CODE block
     str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
@@ -105,21 +116,28 @@ const postProcess = (str: string): string => {
     str = str.replaceAll(/\\n\/\/.*?(?=\\n)/g, '');
 
     // Replace ${"time".toUpperCase()} with "TIME"
-    str = str.replaceAll(/\$\{"([^"]+)"\.toUpperCase\(\)\}/g, (match, p1) => {
-        return p1.toUpperCase();
-    });
+    // str = str.replaceAll(/\$\{"([^"]+)"\.toUpperCase\(\)\}/g, (match, p1) => {
+    //    return p1.toUpperCase();
+    // });
 
     // Replace " (e) =>" to " e =>"
     // str = str.replaceAll(/ \(([^\s,.$()]+)\) =>/g, ' $1 =>');
 
     // Set indent to 1 space
     if (MINIFY_SYNTAX) {
-        // Collapse if/else blocks without curly braces
-        str = str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
+        str = minifyIfElse(str);
 
-        str = str.replaceAll(/\n(\s+)/g, (match, p1) => {
-            const len = p1.length / 2;
-            return '\n' + ' '.repeat(len);
+        str = str.replaceAll(/\n(\s+|\})/g, (match, p1) => {
+            if (pretty) {
+                if (p1 === '}') {
+                    return '\n}';
+                } else {
+                    const len = p1.length / 2;
+                    return '\n' + ' '.repeat(len);
+                }
+            } else {
+                return (p1 === '}') ? '}' : '';
+            }
         });
     }
 
@@ -134,7 +152,49 @@ const postProcess = (str: string): string => {
     return str;
 }
 
-const build = async (target: BuildTarget, version: string, variant: BuildVariant, config: any={}) => {
+async function buildPatches() {
+    const inputDir = './src/modules/patcher/patches/src';
+    const outputDir = './src/modules/patcher/patches';
+
+    const files = await readdir(inputDir);
+    const tsFiles = files.filter(file => file.endsWith('.ts'));
+
+    tsFiles.forEach(async file => {
+        // You can perform any operation with each TypeScript file
+        console.log(`Building patch: ${file}`);
+        const filePath = `${inputDir}/${file}`;
+
+        await Bun.build({
+            entrypoints: [filePath],
+            outdir: outputDir,
+            target: 'browser',
+            format: 'esm',
+            minify: {
+                syntax: true,
+                whitespace: true,
+            },
+        });
+
+        const outputFile = `${outputDir}/${file.replace('.ts', '.js')}`;
+
+        let code = await readFile(outputFile, 'utf-8');
+
+        // Replace "$this$" to "this"
+        code = code.replaceAll('$this$', 'this');
+
+        // Minify code
+        code = removeComments(code);
+        code = minifyIfElse(code);
+
+        // Save
+        await Bun.write(outputFile, code);
+        console.log(`Patch built successfully: ${file}`)
+      });
+}
+
+async function build(target: BuildTarget, params: { version: string, variant: BuildVariant, pretty: boolean, meta: boolean }, config: any={}) {
+    const { version, variant, pretty, meta } = params;
+
     console.log('-- Target:', target);
     const startTime = performance.now();
 
@@ -148,11 +208,16 @@ const build = async (target: BuildTarget, version: string, variant: BuildVariant
     }
 
     let outputMetaName = outputScriptName;
+    if (pretty) {
+        outputScriptName += '.pretty';
+    }
     outputScriptName += '.user.js';
     outputMetaName += '.meta.js';
 
     const outDir = './dist';
 
+    await buildPatches();
+
     let output = await Bun.build({
         entrypoints: ['src/index.ts'],
         outdir: outDir,
@@ -174,7 +239,7 @@ const build = async (target: BuildTarget, version: string, variant: BuildVariant
 
     const {path} = output.outputs[0];
     // Get generated file
-    let result = postProcess(await readFile(path, 'utf-8'));
+    let result = postProcess(await readFile(path, 'utf-8'), pretty);
 
     // Replace [[VERSION]] with real value
     let scriptHeader: string;
@@ -189,7 +254,7 @@ const build = async (target: BuildTarget, version: string, variant: BuildVariant
     await Bun.write(path, scriptHeader + result);
 
     // Create meta file (don't build if it's beta version)
-    if (!version.includes('beta') && variant === 'full') {
+    if (meta && !version.includes('beta') && variant === 'full') {
         await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
     }
 
@@ -222,6 +287,16 @@ const { values, positionals } = parseArgs({
             type: 'string',
             default: 'full',
         },
+
+        pretty: {
+            type: 'boolean',
+            default: false,
+        },
+
+        meta: {
+            type: 'boolean',
+            default: false,
+        },
     },
     strict: true,
     allowPositionals: true,
@@ -229,6 +304,8 @@ const { values, positionals } = parseArgs({
     values: {
         version: string,
         variant: BuildVariant,
+        pretty: boolean,
+        meta: boolean,
     },
     positionals: string[],
 };
@@ -247,7 +324,7 @@ 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);
+        await build(target, values, config);
     }
 
     console.log('')

bun.lock

@@ -0,0 +1,311 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "devDependencies": {
+        "@types/bun": "^1.1.14",
+        "@types/node": "^22.10.2",
+        "@types/stylus": "^0.48.43",
+        "eslint": "^9.17.0",
+        "eslint-plugin-compat": "^6.0.2",
+        "stylus": "^0.64.0",
+      },
+      "peerDependencies": {
+        "typescript": "^5.7.2",
+      },
+    },
+  },
+  "packages": {
+    "@adobe/css-tools": ["@adobe/css-tools@4.3.3", "", {}, "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ=="],
+
+    "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.4.0", "", { "dependencies": { "eslint-visitor-keys": "^3.3.0" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA=="],
+
+    "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.1", "", {}, "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ=="],
+
+    "@eslint/config-array": ["@eslint/config-array@0.19.0", "", { "dependencies": { "@eslint/object-schema": "^2.1.4", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-zdHg2FPIFNKPdcHWtiNT+jEFCHYVplAXRDlQDyqy0zGx/q2parwh7brGJSiTxRk/TSMkbM//zt/f5CHgyTyaSQ=="],
+
+    "@eslint/core": ["@eslint/core@0.10.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-gFHJ+xBOo4G3WRlR1e/3G8A6/KZAH6zcE/hkLRCZTi/B9avAG365QhFA8uOGzTMqgTghpn7/fSnscW++dpMSAw=="],
+
+    "@eslint/eslintrc": ["@eslint/eslintrc@3.2.0", "", { "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", "js-yaml": "^4.1.0", "minimatch": "^3.1.2", "strip-json-comments": "^3.1.1" } }, "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w=="],
+
+    "@eslint/js": ["@eslint/js@9.19.0", "", {}, "sha512-rbq9/g38qjfqFLOVPvwjIvFFdNziEC5S65jmjPw5r6A//QH+W91akh9irMwjDN8zKUTak6W9EsAv4m/7Wnw0UQ=="],
+
+    "@eslint/object-schema": ["@eslint/object-schema@2.1.4", "", {}, "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ=="],
+
+    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.2.5", "", { "dependencies": { "@eslint/core": "^0.10.0", "levn": "^0.4.1" } }, "sha512-lB05FkqEdUg2AA0xEbUz0SnkXT1LcCTa438W4IWTUh4hdOnVbQyOJ81OrDXsJk/LSiJHubgGEFoR5EHq1NsH1A=="],
+
+    "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
+
+    "@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
+
+    "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="],
+
+    "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.1", "", {}, "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA=="],
+
+    "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", "strip-ansi": "^7.0.1", "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", "wrap-ansi": "^8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],
+
+    "@mdn/browser-compat-data": ["@mdn/browser-compat-data@5.5.42", "", {}, "sha512-qhHVgb2dxaFNT00Z1upHaDCstUEjjrgtIkrk4tr+YnDSGbTIKncbdydIpSed+RCXz0f6nb4UDD4eKEWokNom6g=="],
+
+    "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
+
+    "@types/bun": ["@types/bun@1.2.0", "", { "dependencies": { "bun-types": "1.2.0" } }, "sha512-5N1JqdahfpBlAv4wy6svEYcd/YfO2GNrbL95JOmFx8nkE6dbK4R0oSE5SpBA4vBRqgrOUAXF8Dpiz+gi7r80SA=="],
+
+    "@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
+
+    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
+
+    "@types/node": ["@types/node@22.10.10", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-X47y/mPNzxviAGY5TcYPtYL8JsY3kAq2n8fMmKoRCxq/c4v4pyGNCzM2R6+M5/umG4ZfHuT+sgqDYqWc9rJ6ww=="],
+
+    "@types/stylus": ["@types/stylus@0.48.43", "", { "dependencies": { "@types/node": "*" } }, "sha512-72dv/zdhuyXWVHUXG2VTPEQdOG+oen95/DNFx2aMFFaY6LoITI6PwEqf5x31JF49kp2w9hvUzkNfTGBIeg61LQ=="],
+
+    "@types/ws": ["@types/ws@8.5.10", "", { "dependencies": { "@types/node": "*" } }, "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A=="],
+
+    "acorn": ["acorn@8.14.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA=="],
+
+    "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
+
+    "ajv": ["ajv@6.12.6", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="],
+
+    "ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
+
+    "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
+    "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
+
+    "ast-metadata-inferer": ["ast-metadata-inferer@0.8.1", "", { "dependencies": { "@mdn/browser-compat-data": "^5.6.19" } }, "sha512-ht3Dm6Zr7SXv6t1Ra6gFo0+kLDglHGrEbYihTkcycrbHw7WCcuhBzPlJYHEsIpycaUwzsJHje+vUcxXUX4ztTA=="],
+
+    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
+
+    "brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
+
+    "browserslist": ["browserslist@4.24.3", "", { "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" }, "bin": { "browserslist": "cli.js" } }, "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA=="],
+
+    "bun-types": ["bun-types@1.2.0", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-KEaJxyZfbV/c4eyG0vyehDpYmBGreNiQbZIqvVHJwZ4BmeuWlNZ7EAzMN2Zcd7ailmS/tGVW0BgYbGf+lGEpWw=="],
+
+    "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
+
+    "caniuse-lite": ["caniuse-lite@1.0.30001690", "", {}, "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w=="],
+
+    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
+    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
+
+    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
+
+    "debug": ["debug@4.3.5", "", { "dependencies": { "ms": "2.1.2" } }, "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg=="],
+
+    "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
+
+    "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
+
+    "electron-to-chromium": ["electron-to-chromium@1.5.75", "", {}, "sha512-Lf3++DumRE/QmweGjU+ZcKqQ+3bKkU/qjaKYhIJKEOhgIO9Xs6IiAQFkfFoj+RhgDk4LUeNsLo6plExHqSyu6Q=="],
+
+    "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
+
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
+
+    "eslint": ["eslint@9.19.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.19.0", "@eslint/core": "^0.10.0", "@eslint/eslintrc": "^3.2.0", "@eslint/js": "9.19.0", "@eslint/plugin-kit": "^0.2.5", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.1", "@types/estree": "^1.0.6", "@types/json-schema": "^7.0.15", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.2.0", "eslint-visitor-keys": "^4.2.0", "espree": "^10.3.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-ug92j0LepKlbbEv6hD911THhoRHmbdXt2gX+VDABAW/Ir7D3nqKdv5Pf5vtlyY6HQMTEP2skXY43ueqTCWssEA=="],
+
+    "eslint-plugin-compat": ["eslint-plugin-compat@6.0.2", "", { "dependencies": { "@mdn/browser-compat-data": "^5.5.35", "ast-metadata-inferer": "^0.8.1", "browserslist": "^4.24.2", "caniuse-lite": "^1.0.30001687", "find-up": "^5.0.0", "globals": "^15.7.0", "lodash.memoize": "^4.1.2", "semver": "^7.6.2" }, "peerDependencies": { "eslint": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0" } }, "sha512-1ME+YfJjmOz1blH0nPZpHgjMGK4kjgEeoYqGCqoBPQ/mGu/dJzdoP0f1C8H2jcWZjzhZjAMccbM/VdXhPORIfA=="],
+
+    "eslint-scope": ["eslint-scope@8.2.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A=="],
+
+    "eslint-visitor-keys": ["eslint-visitor-keys@4.2.0", "", {}, "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw=="],
+
+    "espree": ["espree@10.3.0", "", { "dependencies": { "acorn": "^8.14.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^4.2.0" } }, "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg=="],
+
+    "esquery": ["esquery@1.6.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg=="],
+
+    "esrecurse": ["esrecurse@4.3.0", "", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="],
+
+    "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
+
+    "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
+
+    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
+
+    "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
+
+    "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
+
+    "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
+
+    "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
+
+    "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
+
+    "flatted": ["flatted@3.3.1", "", {}, "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw=="],
+
+    "foreground-child": ["foreground-child@3.3.0", "", { "dependencies": { "cross-spawn": "^7.0.0", "signal-exit": "^4.0.1" } }, "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg=="],
+
+    "glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
+
+    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
+
+    "globals": ["globals@15.8.0", "", {}, "sha512-VZAJ4cewHTExBWDHR6yptdIBlx9YSSZuwojj9Nt5mBRXQzrKakDsVKQ1J63sklLvzAJm0X5+RpO4i3Y2hcOnFw=="],
+
+    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
+
+    "ignore": ["ignore@5.3.1", "", {}, "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw=="],
+
+    "import-fresh": ["import-fresh@3.3.0", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw=="],
+
+    "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
+    "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
+
+    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
+    "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
+    "jackspeak": ["jackspeak@3.4.3", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" }, "optionalDependencies": { "@pkgjs/parseargs": "^0.11.0" } }, "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw=="],
+
+    "js-yaml": ["js-yaml@4.1.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="],
+
+    "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],
+
+    "json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
+
+    "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
+
+    "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
+
+    "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
+
+    "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
+
+    "lodash.memoize": ["lodash.memoize@4.1.2", "", {}, "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="],
+
+    "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
+
+    "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
+
+    "minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
+
+    "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
+
+    "ms": ["ms@2.1.2", "", {}, "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="],
+
+    "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
+
+    "node-releases": ["node-releases@2.0.19", "", {}, "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="],
+
+    "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
+
+    "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
+
+    "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
+
+    "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],
+
+    "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
+
+    "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
+
+    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
+
+    "path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
+
+    "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
+
+    "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
+
+    "sax": ["sax@1.4.1", "", {}, "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg=="],
+
+    "semver": ["semver@7.6.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A=="],
+
+    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
+
+    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
+
+    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
+
+    "source-map": ["source-map@0.7.4", "", {}, "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="],
+
+    "string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],
+
+    "string-width-cjs": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="],
+
+    "strip-ansi-cjs": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
+
+    "stylus": ["stylus@0.64.0", "", { "dependencies": { "@adobe/css-tools": "~4.3.3", "debug": "^4.3.2", "glob": "^10.4.5", "sax": "~1.4.1", "source-map": "^0.7.3" }, "bin": { "stylus": "bin/stylus" } }, "sha512-ZIdT8eUv8tegmqy1tTIdJv9We2DumkNZFdCF5mz/Kpq3OcTaxSuCAYZge6HKK2CmNC02G1eJig2RV7XTw5hQrA=="],
+
+    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+
+    "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
+
+    "typescript": ["typescript@5.7.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg=="],
+
+    "undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+
+    "update-browserslist-db": ["update-browserslist-db@1.1.1", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.0" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A=="],
+
+    "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
+
+    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
+    "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
+
+    "wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
+
+    "wrap-ansi-cjs": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
+    "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
+
+    "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
+
+    "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
+
+    "@humanfs/node/@humanwhocodes/retry": ["@humanwhocodes/retry@0.3.1", "", {}, "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA=="],
+
+    "@types/stylus/@types/node": ["@types/node@22.5.5", "", { "dependencies": { "undici-types": "~6.19.2" } }, "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA=="],
+
+    "@types/ws/@types/node": ["@types/node@20.14.2", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q=="],
+
+    "ast-metadata-inferer/@mdn/browser-compat-data": ["@mdn/browser-compat-data@5.6.26", "", {}, "sha512-7NdgdOR7lkzrN70zGSULmrcvKyi/aJjpTJRCbuy8IZuHiLkPTvsr10jW0MJgWzK2l2wTmhdQvegTw6yNU5AVNQ=="],
+
+    "foreground-child/cross-spawn": ["cross-spawn@7.0.3", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w=="],
+
+    "glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
+
+    "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
+    "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "strip-ansi-cjs/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "wrap-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
+
+    "wrap-ansi-cjs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "@types/stylus/@types/node/undici-types": ["undici-types@6.19.8", "", {}, "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="],
+
+    "@types/ws/@types/node/undici-types": ["undici-types@5.26.5", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
+
+    "glob/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
+
+    "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
+    "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+  }
+}

dist/better-xcloud.meta.js

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

package.json

@@ -10,11 +10,11 @@
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.14",
-    "@types/node": "^22.10.1",
+    "@types/bun": "^1.2.0",
+    "@types/node": "^22.10.10",
     "@types/stylus": "^0.48.43",
-    "eslint": "^9.16.0",
-    "eslint-plugin-compat": "^6.0.1",
+    "eslint": "^9.19.0",
+    "eslint-plugin-compat": "^6.0.2",
     "stylus": "^0.64.0"
   },
   "peerDependencies": {

src/assets/css/button.styl

@@ -37,6 +37,7 @@
     &:disabled {
         cursor: default;
         background-color: unquote('rgb(var(--button-disabled-rgb))');
+        opacity: 0.5;
     }
 
     &.bx-ghost {
@@ -106,7 +107,6 @@
     &.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 {
@@ -145,15 +145,16 @@
         overflow: hidden;
         white-space: nowrap;
 
+        // Text with icon
         &:not(:only-child) {
-            margin-left: 10px;
+            margin-inline-start: 8px;
         }
     }
 
     &.bx-button-multi-lines {
         height: auto;
         text-align: left;
-        padding: 10px 0;
+        padding: 10px;
 
         span {
             line-height: unset;

src/assets/css/controller.styl

@@ -0,0 +1,89 @@
+.bx-controller-customizations-container {
+    .bx-btn-detect {
+        display: block;
+        margin-bottom: 20px;
+
+        &.bx-monospaced {
+            background: none;
+            font-weight: bold;
+            font-size: 12px;
+        }
+    }
+
+    .bx-buttons-grid {
+        display: grid;
+        grid-template-columns: auto auto;
+        column-gap: 20px;
+        row-gap: 10px;
+        margin-bottom: 20px;
+    }
+
+}
+
+.bx-controller-key-row {
+    display: flex;
+    align-items: stretch;
+
+    > label {
+        margin-bottom: 0;
+        font-family: var(--bx-promptfont-font);
+        font-size: 32px;
+        text-align: center;
+        min-width: 50px;
+        flex-shrink: 0;
+        display: flex;
+        align-self: center;
+
+        &::after {
+            content: '❯';
+            margin: 0 12px;
+            font-size: 16px;
+            align-self: center;
+        }
+    }
+
+    .bx-select {
+        width: 100% !important;
+
+        > div {
+            min-width: 50px;
+        }
+
+        label {
+            font-family: var(--bx-promptfont-font), var(--bx-normal-font);
+            font-size: 32px;
+            text-align: center;
+            margin-bottom: 6px;
+            height: 40px;
+            line-height: 40px;
+        }
+    }
+
+    &:hover {
+        > label {
+            color: #ffe64b;
+
+            &::after {
+                color: #fff;
+            }
+        }
+    }
+}
+
+.bx-controller-customization-summary {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    margin-top: 10px;
+
+    span {
+        font-family: var(--bx-promptfont);
+        font-size: 24px;
+        border-radius: 6px;
+        background: #131313;
+        color: #fff;
+        display: inline-block;
+        padding: 2px;
+        text-align: center;
+    }
+}

src/assets/css/guide-menu.styl

@@ -7,11 +7,11 @@
         margin-bottom: 0 !important;
     }
 
-    html[data-xds-platform=tv] & {
+    body[data-bx-media-type=tv] & {
         flex-direction: column;
     }
 
-    html:not([data-xds-platform=tv]) & {
+    body:not([data-bx-media-type=tv]) & {
         flex-direction: row;
 
         > button:first-of-type {
@@ -34,7 +34,7 @@
         flex-direction: row;
         gap: 12px;
 
-        html[data-xds-platform=tv] & {
+        body[data-bx-media-type=tv] & {
             flex-direction: column;
 
             button {
@@ -42,7 +42,7 @@
             }
         }
 
-        html:not([data-xds-platform=tv]) & {
+        body:not([data-bx-media-type=tv]) & {
             button {
                 span {
                     display: none;

src/assets/css/key-binding-dialog.styl

@@ -16,7 +16,7 @@
     margin-right: -50%;
     transform: translate(-50%, -50%);
     min-width: 420px;
-    padding: 20px;
+    padding: 16px;
     border-radius: 8px;
     z-index: var(--bx-key-binding-dialog-z-index);
     background: #1a1b1e;

src/assets/css/misc.styl

@@ -1,3 +1,12 @@
+.bx-product-details-icons {
+    padding: 8px;
+    border-radius: 4px;
+
+    svg {
+        margin-right: 8px;
+    }
+}
+
 .bx-product-details-buttons {
     display: flex;
     gap: 10px;

src/assets/css/navigation-dialog.styl

@@ -17,6 +17,21 @@
         border-radius: 4px;
         padding: 0 5px;
     }
+
+    .bx-focusable {
+        &::after {
+            border-radius: 4px;
+        }
+
+        &:focus::after {
+            offset = 0;
+
+            top: offset;
+            left: offset;
+            right: offset;
+            bottom: offset;
+        }
+    }
 }
 
 .bx-navigation-dialog-overlay {
@@ -42,10 +57,10 @@
     color: white;
     background: #1a1b1e;
     border-radius: 10px;
-    width: 450px;
+    min-width: @css{ min(calc(100vw - 20px), 500px) };
     max-width: calc(100vw - 20px);
     margin: 0 0 0 auto;
-    padding: 20px;
+    padding: 16px;
 
     max-height: 95vh;
     flex-direction: column;
@@ -63,7 +78,7 @@
             padding: 0;
             margin: 0;
             flex: 1;
-            font-size: 1.2rem;
+            font-size: 1.5rem;
             font-weight: bold;
         }
 
@@ -74,11 +89,9 @@
 
     .bx-dialog-content {
         flex: 1;
+        padding: 6px;
         overflow: auto;
         overflow-x: hidden;
-
-        > div {
-        }
     }
 
     .bx-dialog-preset-tools {
@@ -86,10 +99,18 @@
         margin-bottom: 12px;
         gap: 6px;
 
-        select {
-            flex: 1;
+        button {
+            align-self: center;
+            min-height: 50px;
         }
     }
+
+    .bx-default-preset-note {
+        font-size: 12px;
+        font-style: italic;
+        text-align: center;
+        margin-bottom: 10px;
+    }
 }
 
 .bx-centered-dialog,
@@ -157,29 +178,6 @@
                 letter-spacing: 6px;
             }
         }
-
-        .bx-shortcut-actions {
-            flex: 1;
-            position: relative;
-
-            select {
-                width: 100%;
-                height: 100%;
-                min-height: 38px;
-                display: block;
-
-                &:first-of-type {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                }
-
-                &:last-of-type {
-                    opacity: 0;
-                    z-index: calc(var(--bx-settings-z-index) + 1);
-                }
-            }
-        }
     }
 
     select:disabled {
@@ -214,5 +212,6 @@
 
     .bx-settings-row {
         background: none;
+        padding: 10px;
     }
 }

src/assets/css/number-stepper.styl

@@ -10,6 +10,7 @@
             display: inline-block;
             min-width: 40px;
             font-family: var(--bx-monospaced-font);
+            white-space: pre;
             font-size: 13px;
             margin: 0 4px;
         }
@@ -44,7 +45,7 @@
         }
     }
 
-    input[type="range"] {
+    input[type=range] {
         display: block;
         margin: 8px 0 2px auto;
         min-width: 180px;
@@ -62,3 +63,91 @@
         }
     }
 }
+
+
+.bx-dual-number-stepper {
+    > span {
+        display: block;
+        font-family: var(--bx-monospaced-font);
+        font-size: 13px;
+        white-space: pre;
+        margin: 0 4px;
+        text-align: center;
+    }
+
+    > div {
+        input[type=range] {
+            display: block;
+            width: 100%;
+            min-width: 180px;
+            background: transparent;
+            color: #959595 !important;
+            appearance: none;
+            padding: 8px 0;
+
+            range-track() {
+                background: linear-gradient(90deg, #fff var(--from), var(--bx-primary-button-color) var(--from) var(--to), #fff var(--to) 100%);
+                height: 8px;
+                border-radius: 2px;
+            }
+
+            range-track-hover() {
+                background: linear-gradient(90deg, #fff var(--from), #006635 var(--from) var(--to), #fff var(--to) 100%);
+            }
+
+            thumb() {
+                margin-top: -4px;
+                appearance: none;
+                width: 4px;
+                height: 16px;
+                background: #00b85f;
+                border: none;
+                border-radius: 2px;
+            }
+
+            thumb-hover() {
+                background: #fb3232;
+            }
+
+            &::-webkit-slider-runnable-track {
+                range-track()
+            }
+
+            &::-moz-range-track {
+                range-track()
+            }
+
+            &::-webkit-slider-thumb {
+                thumb();
+            }
+
+            &::-moz-range-thumb {
+                thumb();
+            }
+
+            &:hover, &&:active, &:focus {
+                &::-webkit-slider-runnable-track {
+                    range-track-hover();
+                }
+
+                &::-moz-range-track {
+                    range-track-hover();
+                }
+
+                &::-webkit-slider-thumb {
+                    thumb-hover();
+                }
+
+                &::-moz-range-thumb {
+                    thumb-hover();
+                }
+            }
+        }
+    }
+
+    &[data-disabled=true], &[disabled=true] {
+        input[type=range] {
+            display: none;
+        }
+    }
+}

src/assets/css/remote-play.styl

@@ -1,23 +1,3 @@
-.bx-remote-play-container {
-    position: fixed;
-    top: 50%;
-    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;
-
-    > .bx-button {
-        display: table;
-        margin: 0 0 0 auto;
-    }
-}
-
 .bx-remote-play-settings {
     margin-bottom: 12px;
     padding-bottom: 12px;
@@ -29,6 +9,7 @@
 
     label {
         flex: 1;
+        font-size: 14px;
 
         p {
             margin: 4px 0 0;
@@ -63,23 +44,24 @@
 
 .bx-remote-play-device-info {
     flex: 1;
+    align-self: center;
     padding: 4px 0;
 }
 
 .bx-remote-play-device-name {
-    font-size: 20px;
+    font-size: 14px;
     font-weight: bold;
     display: inline-block;
     vertical-align: middle;
 }
 
 .bx-remote-play-console-type {
-    font-size: 12px;
+    font-size: 8px;
     background: #004c87;
     color: #fff;
     display: inline-block;
-    border-radius: 14px;
-    padding: 2px 10px;
+    border-radius: 8px;
+    padding: 2px 6px;
     margin-left: 8px;
     vertical-align: middle;
 }

src/assets/css/root.styl

@@ -25,7 +25,7 @@ button_color(name, normal, hover, active, disabled)
     button_color('default', #2d3036, #515863, #222428, #8e8e8e);
     button_color('primary', #008746, #04b358, #044e2a, #448262);
     button_color('warning', #c16e04, #fa9005, #965603, #a2816c);
-    button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
+    button_color('danger', #c10404, #e61d1d, #a26c6c, #bd8282);
 
     --bx-fullscreen-text-z-index: 9999;
     --bx-toast-z-index: 6000;
@@ -47,6 +47,7 @@ button_color(name, normal, hover, active, disabled)
 @font-face {
     font-family: 'promptfont';
     src: url('https://redphx.github.io/better-xcloud/fonts/promptfont.otf');
+    unicode-range: U+2196-E011, U+27F6, U+FF31;
 }
 
 /* Fix Stream menu buttons not hiding */
@@ -73,6 +74,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     height: 100% !important;
 }
 
+.bx-auto-height {
+    height: auto !important;
+}
+
 .bx-no-scroll {
     overflow: hidden !important;
 }
@@ -125,6 +130,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     font-family: var(--bx-promptfont-font) !important;
 }
 
+.bx-monospaced {
+    font-family: var(--bx-monospaced-font) !important;
+}
+
 .bx-line-through {
     text-decoration: line-through !important;
 }
@@ -140,8 +149,32 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     font-family: var(--bx-normal-font) !important;
 }
 
-select[multiple] {
+.bx-frosted {
+    backdrop-filter: blur(4px) brightness(1.5);
+}
+
+select[multiple], select[multiple]:focus {
     overflow: auto;
+    border: none;
+
+    option {
+        padding: 4px 6px;
+
+        &:checked {
+            color = #1a7bc0;
+            background: color linear-gradient(0deg, color 0%, color 100%);
+
+            &::before {
+                content: '☑️';
+                font-size: 12px;
+                display: inline-block;
+                margin-right: 6px;
+                height: 100%;
+                line-height: 100%;
+                vertical-align: middle;
+            }
+        }
+    }
 }
 
 /* Hide UI elements */
@@ -161,20 +194,12 @@ div[class*=NotFocusedDialog] {
     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;
+    background: rgba(0, 0, 0, 0.5);
     display: flex;
     border-radius: 4px 0 4px 0;
     align-items: center;
@@ -194,6 +219,18 @@ div[class*=SupportedInputsBadge] {
         font-weight: bold;
         margin-left: 2px;
     }
+
+    &[data-duration=short] {
+        background-color: rgba(0, 133, 133, 0.75);
+    }
+
+    &[data-duration=medium] {
+        background-color: rgba(213, 133, 0, 0.75);
+    }
+
+    &[data-duration=long] {
+        background-color: rgba(150, 0, 0, 0.75);
+    }
 }
 
 
@@ -238,3 +275,15 @@ div[class*=SupportedInputsBadge] {
     opacity: 0;
   }
 }
+
+.bx-horizontal-shaking {
+    animation: bx-horizontal-shaking .4s ease-in-out 2;
+}
+
+@keyframes bx-horizontal-shaking {
+    0% { transform: translateX(0) }
+    25% { transform: translateX(5px) }
+    50% { transform: translateX(-5px) }
+    75% { transform: translateX(5px) }
+    100% { transform: translateX(0) }
+}

src/assets/css/settings-dialog.styl

@@ -8,21 +8,6 @@
     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;
@@ -113,10 +98,8 @@
     tabsWidth = 48px;
 
     flex-direction: column;
-    padding: 10px;
     margin-left: tabsWidth;
     width: 450px;
-    max-width: calc(100vw - tabsWidth);
     background: #1a1b1e;
     color: #fff;
     font-weight: 400;
@@ -127,13 +110,6 @@
     overflow: overlay;
     z-index: 1;
 
-    > div[data-tab-group=mkb] {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        overflow: hidden;
-    }
-
     .bx-top-buttons {
         display: flex;
         flex-direction: column;
@@ -205,6 +181,12 @@
         margin-bottom: 0 !important;
         flex: 1;
 
+        svg {
+            width: 20px;
+            height: 20px;
+            margin-inline-end: 8px;
+        }
+
         + * {
             margin: 0 0 0 auto;
         }
@@ -293,7 +275,8 @@
     color: #828282;
 }
 
-.bx-settings-tab-contents {
+.bx-settings-tab-content {
+    padding: 10px;
     border-radius-size = 6px;
 
     > div {
@@ -316,6 +299,14 @@
             border-radius: border-radius-size;
         }
     }
+
+    &:not([data-game-id="-1"]) {
+        .bx-settings-row[data-override=true], .bx-settings-row:has(*[data-override=true]) {
+            border-left: 4px solid orange !important;
+            border-top-left-radius: 0 !important;
+            border-bottom-left-radius: 0 !important;
+        }
+    }
 }
 
 .bx-suggest-toggler {
@@ -324,18 +315,22 @@
     border-radius: 4px;
     overflow: hidden;
     background: #003861;
+    height: 45px;
+    align-items: center;
 
     label {
         flex: 1;
-        padding: 10px;
+        align-content: center;
+        padding: 0 10px;
         background: #004f87;
+        height: 100%;
     }
 
     span {
         display: inline-block;
         align-self: center;
         padding: 10px;
-        width: 40px;
+        width: 45px;
         text-align: center;
     }
 
@@ -538,3 +533,53 @@
         flex: 1;
     }
 }
+
+.bx-stream-settings-selection {
+    margin-bottom: 8px;
+    position: sticky;
+    z-index: 1000;
+    top: 0;
+
+    > div {
+        display: flex;
+        gap: 8px;
+        background: #222222;
+        padding: 10px;
+        border-bottom: 4px solid #353638;
+        box-shadow: 0 0 6px #000;
+        position: relative;
+        z-index: 1;
+
+        .bx-select {
+            flex: 1;
+
+            label {
+                font-weight: bold;
+                font-size: 1.1rem;
+                line-height: initial;
+
+                span {
+                    line-height: initial;
+                }
+            }
+
+            .bx-select-indicators {
+                display: none;
+            }
+        }
+    }
+
+    p {
+        font-family: var(--bx-promptfont-font), var(--bx-normal-font);
+        margin: 0;
+        font-size: 13px;
+        background: #505050f2;
+        height: 25px;
+        line-height: 23px;
+        position: absolute;
+        bottom: -25px;
+        left: 0;
+        right: 0;
+        text-shadow: 0 1px #000;
+    }
+}

src/assets/css/stream-stats.styl

@@ -144,7 +144,7 @@ div[class^=StreamMenu-module__container] .bx-badges {
         border-radius: 0 0 4px 4px;
     }
 
-    &[data-transparent=true] {
+    &[data-shadow=true] {
         background: none;
         filter: drop-shadow(1px 0 0 #000000f0) drop-shadow(-1px 0 0 #000000f0) drop-shadow(0 1px 0 #000000f0) drop-shadow(0 -1px 0 #000000f0);
     }
@@ -165,10 +165,10 @@ div[class^=StreamMenu-module__container] .bx-badges {
     }
 
     span {
-        min-width: 60px;
         display: inline-block;
         text-align: right;
         vertical-align: middle;
+        white-space: pre;
 
         &[data-grade=good] {
             color: #6bffff;
@@ -181,9 +181,5 @@ div[class^=StreamMenu-module__container] .bx-badges {
         &[data-grade=bad] {
             color: #ff5f5f;
         }
-
-        &:first-of-type {
-            min-width: 22px;
-        }
     }
 }

src/assets/css/styles.styl

@@ -16,4 +16,5 @@
 @import 'game-bar.styl';
 @import 'stream-stats.styl';
 @import 'mkb.styl';
+@import 'controller.styl';
 @import 'misc.styl';

src/assets/css/toast.styl

@@ -5,8 +5,8 @@
     left: 50%;
     top: 24px;
     transform: translate(-50%, 0);
-    background: #000000;
-    border-radius: 16px;
+    background: #212121;
+    border-radius: 10px;
     color: white;
     z-index: var(--bx-toast-z-index);
     font-family: var(--bx-normal-font);
@@ -16,9 +16,10 @@
     opacity: 0;
     overflow: clip;
     transition: opacity 0.2s ease-in;
+    box-shadow: 0 0 6px #000;
 
     &.bx-show {
-        opacity: 0.85;
+        opacity: 0.95;
     }
 
     &.bx-hide {
@@ -39,8 +40,8 @@
     font-size: 14px;
     text-transform: uppercase;
     display: inline-block;
-    background: #515863;
+    background: #fff;
     padding: 12px 16px;
-    color: #fff;
+    color: #212121;
     white-space: pre;
 }

src/assets/css/web-components.styl

@@ -4,17 +4,11 @@ select.bx-select {
 
 div.bx-select {
     display: flex;
-    align-items: center;
+    align-items: stretch;
     flex: 0 1 auto;
     gap: 8px;
 
     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;
-
         &:disabled {
             & ~ button {
                 display: none;
@@ -48,7 +42,6 @@ div.bx-select {
 
     > div {
         min-height: 24px;
-        box-sizing: content-box;
 
         input {
             display: inline-block;
@@ -62,14 +55,17 @@ div.bx-select {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+            min-height: 15px;
 
             span {
                 display: block;
                 font-size: 10px;
                 font-weight: bold;
                 text-align: left;
-                line-height: initial;
+                line-height: 20px;
                 white-space: pre;
+                min-height: 15px;
+                align-content: center;
             }
         }
     }
@@ -112,10 +108,9 @@ div.bx-select {
 
     button.bx-button {
         border: none;
-        height: 24px;
         width: 24px;
+        height: auto;
         padding: 0;
-        line-height: 24px;
         color: #fff;
         border-radius: 4px;
         font-weight: bold;
@@ -127,6 +122,68 @@ div.bx-select {
             line-height: unset;
         }
     }
+
+    &[data-controller-friendly=true] {
+        > div {
+            box-sizing: content-box;
+        }
+
+        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;
+        }
+    }
+
+    &[data-controller-friendly=false] {
+        position: relative;
+
+        > div {
+            box-sizing: border-box;
+
+            label {
+                margin-right: 24px;
+            }
+        }
+
+        select {
+            &:disabled {
+                display: none;
+            }
+
+            &:not(:disabled) {
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                display: block;
+
+                opacity: 0;
+                z-index: calc(var(--bx-settings-z-index) + 1);
+
+                &:hover {
+                    + div {
+                        background: #f0f0f0;
+                    }
+                }
+
+                + div {
+                    label {
+                        &::after {
+                            content: '▾';
+                            font-size: 14px;
+                            position: absolute;
+                            right: 8px;
+                            pointer-events: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 .bx-select-indicators {
@@ -141,9 +198,11 @@ div.bx-select {
         flex: 1;
         background: #cfcfcf;
         border-radius: 4px;
+        min-width: 1px;
 
         &[data-highlighted] {
             background: #9c9c9c;
+            min-width: 6px;
         }
 
         &[data-selected] {

src/assets/svg/better-xcloud.svg

@@ -1,4 +1,8 @@
-<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 xmlns='http://www.w3.org/2000/svg' fill='none' stroke='none' fill-rule='evenodd' viewBox='0 0 32 32'>
+    <clipPath id='svg-bx-logo'>
+        <path d='M0 0h32v32H0z'/>
+    </clipPath>
+    <g clip-path='url(#svg-bx-logo)'>
+        <path d='M19.959 18.286l3.959 2.285-3.959 2.286V32L16 29.714v-9.143l3.959-2.285zM16 16V6.857l3.959-2.286 3.959 2.286-3.959 2.286v9.143L16 16zm-3.959-2.286L16 16l-3.959 2.286v9.143l-3.959-2.286V16l3.959-2.286zM8.082 2.286L12.041 0 16 2.286l-3.959 2.285v9.143l-3.959-2.285V2.286zm8.846 19.535c-.171-.098-.309-.018-.309.179s.138.437.309.536.309.018.309-.179-.138-.437-.309-.536zm0-13.714c-.171-.098-.309-.018-.309.179s.138.437.309.535.309.019.309-.178-.138-.437-.309-.536zM9.01 17.25c-.171-.099-.309-.019-.309.179s.138.437.309.535.309.019.309-.178-.138-.437-.309-.536zm0-13.714c-.171-.099-.309-.019-.309.178s.138.437.309.536.309.019.309-.179-.138-.437-.309-.535z' fill='#fff'/>
+    </g>
 </svg>

src/assets/svg/global-restore.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'>
+    <path d='M1.681 16h28.638'/>
+    <path d='M16 30.319C8.145 30.319 1.681 23.855 1.681 16S8.145 1.681 16 1.681 30.319 8.145 30.319 16'/>
+    <path d='M16 30.319S10.034 25.546 10.034 16 16 1.681 16 1.681 21.966 6.454 21.966 16m-.238 8.592l-2.864 2.864 2.864 2.863'/>
+    <path d='M21.728 20.773h5.25a3.36 3.36 0 0 1 3.341 3.341 3.36 3.36 0 0 1-3.341 3.342h-8.114'/>
+</svg>

src/assets/svg/local-co-op.svg

@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'>
+    <g>
+        <path d='M24.272 11.165h-3.294l-3.14 3.564c-.391.391-.922.611-1.476.611a2.1 2.1 0 0 1-2.087-2.088 2.09 2.09 0 0 1 .031-.362l1.22-6.274a3.89 3.89 0 0 1 3.81-3.206h6.57c1.834 0 3.439 1.573 3.833 3.295l1.205 6.185a2.09 2.09 0 0 1 .031.362 2.1 2.1 0 0 1-2.087 2.088c-.554 0-1.085-.22-1.476-.611l-3.14-3.564' fill='none' stroke='#fff' stroke-width='2'/>
+        <circle cx='22.625' cy='5.874' r='.879'/><path d='M11.022 24.415H7.728l-3.14 3.564c-.391.391-.922.611-1.476.611a2.1 2.1 0 0 1-2.087-2.088 2.09 2.09 0 0 1 .031-.362l1.22-6.274a3.89 3.89 0 0 1 3.81-3.206h6.57c1.834 0 3.439 1.573 3.833 3.295l1.205 6.185a2.09 2.09 0 0 1 .031.362 2.1 2.1 0 0 1-2.087 2.088c-.554 0-1.085-.22-1.476-.611l-3.14-3.564' fill='none' stroke='#fff' stroke-width='2'/>
+        <circle cx='9.375' cy='19.124' r='.879'/>
+    </g>
+</svg>

src/assets/svg/pencil-simple-line.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='3' viewBox='0 0 32 32'>
+    <path d='M10.417 30.271H2.97a1.25 1.25 0 0 1-1.241-1.241v-6.933c.001-.329.131-.644.363-.877L21.223 2.09c.481-.481 1.273-.481 1.754 0l6.933 6.928a1.25 1.25 0 0 1 0 1.755L10.417 30.271z'/>
+    <path d='M29.032 30.271H10.417m6.205-23.58l8.687 8.687'/>
+</svg>

src/enums/game-pass-gallery.ts

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

src/enums/gamepad.ts

@@ -24,11 +24,13 @@ export enum GamepadKey {
     LS_DOWN = 101,
     LS_LEFT = 102,
     LS_RIGHT = 103,
+    LS = 104,
 
     RS_UP = 200,
     RS_DOWN = 201,
     RS_LEFT = 202,
     RS_RIGHT = 203,
+    RS = 204,
 };
 
 export const GamepadKeyName: Record<number, [string, PrompFont]> = {
@@ -56,12 +58,16 @@ export const GamepadKeyName: Record<number, [string, PrompFont]> = {
     [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.LS]: ['Left Stick', PrompFont.LS],
 
     [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],
+    [GamepadKey.RS]: ['Right Stick', PrompFont.RS],
+
+    [GamepadKey.SHARE]: ['Screenshot', PrompFont.SHARE],
 };
 
 

src/enums/mkb.ts

@@ -37,131 +37,6 @@ export const enum MkbPresetKey {
 }
 
 
-export type KeyCode =
-  | 'Backspace'
-  | 'Tab'
-  | 'Enter'
-  | 'ShiftLeft'
-  | 'ShiftRight'
-  | 'ControlLeft'
-  | 'ControlRight'
-  | 'AltLeft'
-  | 'AltRight'
-  | 'Pause'
-  | 'CapsLock'
-  | 'Escape'
-  | 'Space'
-  | 'PageUp'
-  | 'PageDown'
-  | 'End'
-  | 'Home'
-  | 'ArrowLeft'
-  | 'ArrowUp'
-  | 'ArrowRight'
-  | 'ArrowDown'
-  | 'PrintScreen'
-  | 'Insert'
-  | 'Delete'
-  | 'Digit0'
-  | 'Digit1'
-  | 'Digit2'
-  | 'Digit3'
-  | 'Digit4'
-  | 'Digit5'
-  | 'Digit6'
-  | 'Digit7'
-  | 'Digit8'
-  | 'Digit9'
-  | 'KeyA'
-  | 'KeyB'
-  | 'KeyC'
-  | 'KeyD'
-  | 'KeyE'
-  | 'KeyF'
-  | 'KeyG'
-  | 'KeyH'
-  | 'KeyI'
-  | 'KeyJ'
-  | 'KeyK'
-  | 'KeyL'
-  | 'KeyM'
-  | 'KeyN'
-  | 'KeyO'
-  | 'KeyP'
-  | 'KeyQ'
-  | 'KeyR'
-  | 'KeyS'
-  | 'KeyT'
-  | 'KeyU'
-  | 'KeyV'
-  | 'KeyW'
-  | 'KeyX'
-  | 'KeyY'
-  | 'KeyZ'
-  | 'MetaLeft'
-  | 'MetaRight'
-  | 'ContextMenu'
-  | 'F1'
-  | 'F2'
-  | 'F3'
-  | 'F4'
-  | 'F5'
-  | 'F6'
-  | 'F7'
-  | 'F8'
-  | 'F9'
-  | 'F10'
-  | 'F11'
-  | 'F12'
-  | 'NumLock'
-  | 'ScrollLock'
-  | 'AudioVolumeMute'
-  | 'AudioVolumeDown'
-  | 'AudioVolumeUp'
-  | 'MediaTrackNext'
-  | 'MediaTrackPrevious'
-  | 'MediaStop'
-  | 'MediaPlayPause'
-  | 'LaunchMail'
-  | 'LaunchMediaPlayer'
-  | 'LaunchApplication1'
-  | 'LaunchApplication2'
-  | 'Semicolon'
-  | 'Equal'
-  | 'Comma'
-  | 'Minus'
-  | 'Period'
-  | 'Slash'
-  | 'Backquote'
-  | 'BracketLeft'
-  | 'Backslash'
-  | 'BracketRight'
-  | 'Quote'
-  | 'Numpad0'
-  | 'Numpad1'
-  | 'Numpad2'
-  | 'Numpad3'
-  | 'Numpad4'
-  | 'Numpad5'
-  | 'Numpad6'
-  | 'Numpad7'
-  | 'Numpad8'
-  | 'Numpad9'
-  | 'NumpadMultiply'
-  | 'NumpadAdd'
-  | 'NumpadSubtract'
-  | 'NumpadDecimal'
-  | 'NumpadDivide';
-
-export type KeyCodeExcludeModifiers = Exclude<KeyCode,
-    'ShiftLeft'
-    | 'ShiftRight'
-    | 'ControlLeft'
-    | 'ControlRight'
-    | 'AltLeft'
-    | 'AltRight'
->
-
 export const enum KeyModifier {
     CTRL = 1,
     ALT = 2,

src/enums/pref-keys.ts

@@ -1,5 +1,9 @@
+import type { BaseSettingsStorage } from "@/utils/settings-storages/base-settings-storage";
+import type { BlockFeature, CodecProfile, DeviceVibrationMode, GameBarPosition, LoadingScreenRocket, NativeMkbMode, StreamPlayerType, StreamResolution, StreamStat, StreamStatPosition, StreamVideoProcessing, TouchControllerMode, TouchControllerStyleCustom, TouchControllerStyleStandard, UiLayout, UiSection, VideoPosition, VideoPowerPreference, VideoRatio } from "./pref-values"
+
 export const enum StorageKey {
     GLOBAL = 'BetterXcloud',
+    STREAM = 'BetterXcloud.Stream',
 
     LOCALE = 'BetterXcloud.Locale',
     LOCALE_TRANSLATIONS = 'BetterXcloud.Locale.Translations',
@@ -10,9 +14,11 @@ export const enum StorageKey {
     GH_PAGES_COMMIT_HASH = 'BetterXcloud.GhPages.CommitHash',
     LIST_CUSTOM_TOUCH_LAYOUTS = 'BetterXcloud.GhPages.CustomTouchLayouts',
     LIST_FORCE_NATIVE_MKB = 'BetterXcloud.GhPages.ForceNativeMkb',
+    LIST_LOCAL_CO_OP = 'BetterXcloud.GhPages.LocalCoOp',
 }
 
-export const enum PrefKey {
+
+export const enum GlobalPref {
     VERSION_LAST_CHECK = 'version.lastCheck',
     VERSION_LATEST = 'version.latest',
     VERSION_CURRENT = 'version.current',
@@ -39,31 +45,16 @@ export const enum PrefKey {
 
     GAME_BAR_POSITION = 'gameBar.position',
 
-    LOCAL_CO_OP_ENABLED = 'localCoOp.enabled',
-
-    DEVICE_VIBRATION_MODE = 'deviceVibration.mode',
-    DEVICE_VIBRATION_INTENSITY = 'deviceVibration.intensity',
-
-    CONTROLLER_POLLING_RATE = 'controller.pollingRate',
-
     NATIVE_MKB_MODE = 'nativeMkb.mode',
     NATIVE_MKB_FORCED_GAMES = 'nativeMkb.forcedGames',
-    NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'nativeMkb.scroll.sensitivityX',
-    NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY = 'nativeMkb.scroll.sensitivityY',
 
     MKB_ENABLED = 'mkb.enabled',
     MKB_HIDE_IDLE_CURSOR = 'mkb.cursor.hideIdle',
-    MKB_P1_MAPPING_PRESET_ID = 'mkb.p1.preset.mappingId',
-    MKB_P1_SLOT = 'mkb.p1.slot',
-    MKB_P2_MAPPING_PRESET_ID = 'mkb.p2.preset.mappingId',
-    MKB_P2_SLOT = 'mkb.p2.slot',
-
-    KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID = 'keyboardShortcuts.preset.inGameId',
 
     SCREENSHOT_APPLY_FILTERS = 'screenshot.applyFilters',
 
     BLOCK_TRACKING = 'block.tracking',
-    BLOCK_SOCIAL_FEATURES = 'block.social',
+    BLOCK_FEATURES = 'block.features',
 
     LOADING_SCREEN_GAME_ART = 'loadingScreen.gameArt.show',
     LOADING_SCREEN_SHOW_WAIT_TIME = 'loadingScreen.waitTime.show',
@@ -73,7 +64,6 @@ export const enum PrefKey {
     UI_LAYOUT = 'ui.layout',
     UI_SCROLLBAR_HIDE = 'ui.hideScrollbar',
     UI_HIDE_SECTIONS = 'ui.hideSections',
-    BYOG_DISABLED = 'feature.byog.disabled',
 
     UI_GAME_CARD_SHOW_WAIT_TIME = 'ui.gameCard.waitTime.show',
     UI_SIMPLIFY_STREAM_MENU = 'ui.streamMenu.simplify',
@@ -83,6 +73,85 @@ export const enum PrefKey {
     UI_SKIP_SPLASH_VIDEO = 'ui.splashVideo.skip',
     UI_HIDE_SYSTEM_MENU_ICON = 'ui.systemMenu.hideHandle',
     UI_REDUCE_ANIMATIONS = 'ui.reduceAnimations',
+    UI_IMAGE_QUALITY = 'ui.imageQuality',
+
+    AUDIO_MIC_ON_PLAYING = 'audio.mic.onPlaying',
+    AUDIO_VOLUME_CONTROL_ENABLED = 'audio.volume.booster.enabled',
+
+    REMOTE_PLAY_ENABLED = 'xhome.enabled',
+    REMOTE_PLAY_STREAM_RESOLUTION = 'xhome.video.resolution',
+
+    GAME_FORTNITE_FORCE_CONSOLE = 'game.fortnite.forceConsole',
+}
+
+export type GlobalPrefTypeMap = {
+    [GlobalPref.AUDIO_MIC_ON_PLAYING]: boolean;
+    [GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED]: boolean;
+    [GlobalPref.BLOCK_FEATURES]: BlockFeature[];
+    [GlobalPref.BLOCK_TRACKING]: boolean;
+    [GlobalPref.GAME_BAR_POSITION]: GameBarPosition;
+    [GlobalPref.GAME_FORTNITE_FORCE_CONSOLE]: boolean;
+    [GlobalPref.LOADING_SCREEN_GAME_ART]: boolean;
+    [GlobalPref.LOADING_SCREEN_ROCKET]: LoadingScreenRocket;
+    [GlobalPref.LOADING_SCREEN_SHOW_WAIT_TIME]: boolean;
+    [GlobalPref.MKB_ENABLED]: boolean;
+    [GlobalPref.MKB_HIDE_IDLE_CURSOR]: boolean;
+    [GlobalPref.NATIVE_MKB_FORCED_GAMES]: string[];
+    [GlobalPref.NATIVE_MKB_MODE]: NativeMkbMode;
+    [GlobalPref.REMOTE_PLAY_ENABLED]: boolean;
+    [GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION]: StreamResolution;
+    [GlobalPref.SCREENSHOT_APPLY_FILTERS]: boolean;
+    [GlobalPref.SERVER_BYPASS_RESTRICTION]: string;
+    [GlobalPref.SERVER_PREFER_IPV6]: boolean;
+    [GlobalPref.SERVER_REGION]: string;
+    [GlobalPref.STREAM_CODEC_PROFILE]: CodecProfile;
+    [GlobalPref.STREAM_COMBINE_SOURCES]: boolean;
+    [GlobalPref.STREAM_MAX_VIDEO_BITRATE]: number;
+    [GlobalPref.STREAM_PREFERRED_LOCALE]: StreamPreferredLocale;
+    [GlobalPref.STREAM_RESOLUTION]: StreamResolution;
+    [GlobalPref.TOUCH_CONTROLLER_AUTO_OFF]: boolean;
+    [GlobalPref.TOUCH_CONTROLLER_DEFAULT_OPACITY]: number;
+    [GlobalPref.TOUCH_CONTROLLER_MODE]: TouchControllerMode;
+    [GlobalPref.TOUCH_CONTROLLER_STYLE_CUSTOM]: TouchControllerStyleCustom;
+    [GlobalPref.TOUCH_CONTROLLER_STYLE_STANDARD]: TouchControllerStyleStandard;
+    [GlobalPref.UI_CONTROLLER_FRIENDLY]: boolean;
+    [GlobalPref.UI_CONTROLLER_SHOW_STATUS]: boolean;
+    [GlobalPref.UI_DISABLE_FEEDBACK_DIALOG]: boolean;
+    [GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME]: boolean;
+    [GlobalPref.UI_HIDE_SECTIONS]: UiSection[];
+    [GlobalPref.UI_HIDE_SYSTEM_MENU_ICON]: boolean;
+    [GlobalPref.UI_IMAGE_QUALITY]: number;
+    [GlobalPref.UI_LAYOUT]: UiLayout;
+    [GlobalPref.UI_REDUCE_ANIMATIONS]: boolean;
+    [GlobalPref.UI_SCROLLBAR_HIDE]: boolean;
+    [GlobalPref.UI_SIMPLIFY_STREAM_MENU]: boolean;
+    [GlobalPref.UI_SKIP_SPLASH_VIDEO]: boolean;
+    [GlobalPref.VERSION_CURRENT]: string;
+    [GlobalPref.VERSION_LAST_CHECK]: number;
+    [GlobalPref.VERSION_LATEST]: string;
+
+    [GlobalPref.SCRIPT_LOCALE]: string;
+    [GlobalPref.USER_AGENT_PROFILE]: string;
+}
+
+export const enum StreamPref {
+    LOCAL_CO_OP_ENABLED = 'localCoOp.enabled',
+
+    DEVICE_VIBRATION_MODE = 'deviceVibration.mode',
+    DEVICE_VIBRATION_INTENSITY = 'deviceVibration.intensity',
+
+    CONTROLLER_POLLING_RATE = 'controller.pollingRate',
+    CONTROLLER_SETTINGS = 'controller.settings',
+
+    NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'nativeMkb.scroll.sensitivityX',
+    NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY = 'nativeMkb.scroll.sensitivityY',
+
+    MKB_P1_MAPPING_PRESET_ID = 'mkb.p1.preset.mappingId',
+    MKB_P1_SLOT = 'mkb.p1.slot',
+    MKB_P2_MAPPING_PRESET_ID = 'mkb.p2.preset.mappingId',
+    MKB_P2_SLOT = 'mkb.p2.slot',
+
+    KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID = 'keyboardShortcuts.preset.inGameId',
 
     VIDEO_PLAYER_TYPE = 'video.player.type',
     VIDEO_POWER_PREFERENCE = 'video.player.powerPreference',
@@ -95,8 +164,6 @@ export const enum PrefKey {
     VIDEO_SATURATION = 'video.saturation',
     VIDEO_POSITION = 'video.position',
 
-    AUDIO_MIC_ON_PLAYING = 'audio.mic.onPlaying',
-    AUDIO_VOLUME_CONTROL_ENABLED = 'audio.volume.booster.enabled',
     AUDIO_VOLUME = 'audio.volume',
 
     STATS_ITEMS = 'stats.items',
@@ -104,12 +171,140 @@ export const enum PrefKey {
     STATS_QUICK_GLANCE_ENABLED = 'stats.quickGlance.enabled',
     STATS_POSITION = 'stats.position',
     STATS_TEXT_SIZE = 'stats.textSize',
-    STATS_TRANSPARENT = 'stats.transparent',
-    STATS_OPACITY = 'stats.opacity',
+    STATS_OPACITY_ALL = 'stats.opacity.all',
+    STATS_OPACITY_BACKGROUND = 'stats.opacity.background',
     STATS_CONDITIONAL_FORMATTING = 'stats.colors',
-
-    REMOTE_PLAY_ENABLED = 'xhome.enabled',
-    REMOTE_PLAY_STREAM_RESOLUTION = 'xhome.video.resolution',
-
-    GAME_FORTNITE_FORCE_CONSOLE = 'game.fortnite.forceConsole',
 }
+
+export type StreamPrefTypeMap = {
+    [StreamPref.AUDIO_VOLUME]: number;
+    [StreamPref.CONTROLLER_POLLING_RATE]: number;
+    [StreamPref.CONTROLLER_SETTINGS]: ControllerSettings;
+    [StreamPref.DEVICE_VIBRATION_INTENSITY]: number;
+    [StreamPref.DEVICE_VIBRATION_MODE]: DeviceVibrationMode;
+    [StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID]: number;
+    [StreamPref.LOCAL_CO_OP_ENABLED]: boolean;
+    [StreamPref.MKB_P1_MAPPING_PRESET_ID]: number;
+    [StreamPref.MKB_P1_SLOT]: number;
+    [StreamPref.MKB_P2_MAPPING_PRESET_ID]: number;
+    [StreamPref.MKB_P2_SLOT]: number;
+    [StreamPref.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY]: number;
+    [StreamPref.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY]: number;
+    [StreamPref.STATS_CONDITIONAL_FORMATTING]: boolean;
+    [StreamPref.STATS_ITEMS]: StreamStat[];
+    [StreamPref.STATS_OPACITY_ALL]: number;
+    [StreamPref.STATS_OPACITY_BACKGROUND]: number;
+    [StreamPref.STATS_POSITION]: StreamStatPosition;
+    [StreamPref.STATS_QUICK_GLANCE_ENABLED]: boolean;
+    [StreamPref.STATS_SHOW_WHEN_PLAYING]: boolean;
+    [StreamPref.STATS_TEXT_SIZE]: string;
+    [StreamPref.VIDEO_BRIGHTNESS]: number;
+    [StreamPref.VIDEO_CONTRAST]: number;
+    [StreamPref.VIDEO_MAX_FPS]: number;
+    [StreamPref.VIDEO_PLAYER_TYPE]: StreamPlayerType;
+    [StreamPref.VIDEO_POSITION]: VideoPosition;
+    [StreamPref.VIDEO_POWER_PREFERENCE]: VideoPowerPreference;
+    [StreamPref.VIDEO_PROCESSING]: StreamVideoProcessing;
+    [StreamPref.VIDEO_RATIO]: VideoRatio;
+    [StreamPref.VIDEO_SATURATION]: number;
+    [StreamPref.VIDEO_SHARPNESS]: number;
+}
+
+export type AllPrefs = GlobalPref | StreamPref;
+
+export const ALL_PREFS: {
+    global: GlobalPref[],
+    stream: StreamPref[],
+} = {
+    global: [
+        GlobalPref.AUDIO_MIC_ON_PLAYING,
+        GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED,
+        GlobalPref.BLOCK_FEATURES,
+        GlobalPref.BLOCK_TRACKING,
+        GlobalPref.GAME_BAR_POSITION,
+        GlobalPref.GAME_FORTNITE_FORCE_CONSOLE,
+        GlobalPref.LOADING_SCREEN_GAME_ART,
+        GlobalPref.LOADING_SCREEN_ROCKET,
+        GlobalPref.LOADING_SCREEN_SHOW_WAIT_TIME,
+        GlobalPref.MKB_ENABLED,
+        GlobalPref.MKB_HIDE_IDLE_CURSOR,
+        GlobalPref.NATIVE_MKB_FORCED_GAMES,
+        GlobalPref.NATIVE_MKB_MODE,
+        GlobalPref.REMOTE_PLAY_ENABLED,
+        GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION,
+        GlobalPref.SCREENSHOT_APPLY_FILTERS,
+        GlobalPref.SERVER_BYPASS_RESTRICTION,
+        GlobalPref.SERVER_PREFER_IPV6,
+        GlobalPref.SERVER_REGION,
+        GlobalPref.STREAM_CODEC_PROFILE,
+        GlobalPref.STREAM_COMBINE_SOURCES,
+        GlobalPref.STREAM_MAX_VIDEO_BITRATE,
+        GlobalPref.STREAM_PREFERRED_LOCALE,
+        GlobalPref.STREAM_RESOLUTION,
+        GlobalPref.TOUCH_CONTROLLER_AUTO_OFF,
+        GlobalPref.TOUCH_CONTROLLER_DEFAULT_OPACITY,
+        GlobalPref.TOUCH_CONTROLLER_MODE,
+        GlobalPref.TOUCH_CONTROLLER_STYLE_CUSTOM,
+        GlobalPref.TOUCH_CONTROLLER_STYLE_STANDARD,
+        GlobalPref.UI_CONTROLLER_FRIENDLY,
+        GlobalPref.UI_CONTROLLER_SHOW_STATUS,
+        GlobalPref.UI_DISABLE_FEEDBACK_DIALOG,
+        GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME,
+        GlobalPref.UI_HIDE_SECTIONS,
+        GlobalPref.UI_HIDE_SYSTEM_MENU_ICON,
+        GlobalPref.UI_IMAGE_QUALITY,
+        GlobalPref.UI_LAYOUT,
+        GlobalPref.UI_REDUCE_ANIMATIONS,
+        GlobalPref.UI_SCROLLBAR_HIDE,
+        GlobalPref.UI_SIMPLIFY_STREAM_MENU,
+        GlobalPref.UI_SKIP_SPLASH_VIDEO,
+        GlobalPref.VERSION_CURRENT,
+        GlobalPref.VERSION_LAST_CHECK,
+        GlobalPref.VERSION_LATEST,
+
+        GlobalPref.SCRIPT_LOCALE,
+        GlobalPref.USER_AGENT_PROFILE,
+    ],
+    stream: [
+        StreamPref.AUDIO_VOLUME,
+        StreamPref.CONTROLLER_POLLING_RATE,
+        StreamPref.CONTROLLER_SETTINGS,
+        StreamPref.DEVICE_VIBRATION_INTENSITY,
+        StreamPref.DEVICE_VIBRATION_MODE,
+        StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID,
+        StreamPref.LOCAL_CO_OP_ENABLED,
+        StreamPref.MKB_P1_MAPPING_PRESET_ID,
+        StreamPref.MKB_P1_SLOT,
+        StreamPref.MKB_P2_MAPPING_PRESET_ID,
+        StreamPref.MKB_P2_SLOT,
+        StreamPref.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY,
+        StreamPref.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY,
+        StreamPref.STATS_CONDITIONAL_FORMATTING,
+        StreamPref.STATS_ITEMS,
+        StreamPref.STATS_OPACITY_ALL,
+        StreamPref.STATS_OPACITY_BACKGROUND,
+        StreamPref.STATS_POSITION,
+        StreamPref.STATS_QUICK_GLANCE_ENABLED,
+        StreamPref.STATS_SHOW_WHEN_PLAYING,
+        StreamPref.STATS_TEXT_SIZE,
+        StreamPref.VIDEO_BRIGHTNESS,
+        StreamPref.VIDEO_CONTRAST,
+        StreamPref.VIDEO_MAX_FPS,
+        StreamPref.VIDEO_PLAYER_TYPE,
+        StreamPref.VIDEO_POSITION,
+        StreamPref.VIDEO_POWER_PREFERENCE,
+        StreamPref.VIDEO_PROCESSING,
+        StreamPref.VIDEO_RATIO,
+        StreamPref.VIDEO_SATURATION,
+        StreamPref.VIDEO_SHARPNESS,
+    ],
+} as const;
+
+export type AnySettingsStorage = BaseSettingsStorage<GlobalPref> | BaseSettingsStorage<StreamPref>;
+export type AnyPref = GlobalPref | StreamPref;
+
+export type PrefTypeMap<Key> = Key extends GlobalPref
+  ? GlobalPrefTypeMap
+  : Key extends StreamPref
+  ? StreamPrefTypeMap
+  : never;

src/enums/pref-values.ts

@@ -84,6 +84,12 @@ export const enum StreamStat {
     CLOCK = 'time',
 };
 
+export const enum StreamStatPosition {
+    TOP_LEFT = 'top-left',
+    TOP_CENTER = 'top-center',
+    TOP_RIGHT = 'top-right',
+}
+
 export const enum VideoRatio {
     '16:9' = '16:9',
     '18:9' = '18:9',
@@ -101,6 +107,12 @@ export const enum VideoPosition {
     BOTTOM_HALF = 'bottom-half',
 }
 
+export const enum VideoPowerPreference {
+    DEFAULT = 'default',
+    LOW_POWER = 'low-power',
+    HIGH_PERFORMANCE = 'high-performance',
+}
+
 export const enum StreamPlayerType {
     VIDEO = 'default',
     WEBGL2 = 'webgl2',
@@ -110,3 +122,11 @@ export const enum StreamVideoProcessing {
     USM = 'usm',
     CAS = 'cas',
 }
+
+export const enum BlockFeature {
+    CHAT = 'chat',
+    FRIENDS = 'friends',
+    BYOG = 'byog',
+    NOTIFICATIONS_INVITES = 'notifications-invites',
+    NOTIFICATIONS_ACHIEVEMENTS = 'notifications-achievements',
+}

src/enums/prompt-font.ts

@@ -18,15 +18,19 @@ export enum PrompFont {
     LEFT = '≺',
     RIGHT = '≼',
 
+    LS = '⇱',
     L3 = '↺',
     LS_UP = '↾',
     LS_DOWN = '⇂',
     LS_LEFT = '↼',
     LS_RIGHT = '⇀',
 
+    RS = '⇲',
     R3 = '↻',
     RS_UP = '↿',
     RS_DOWN = '⇃',
     RS_LEFT = '↽',
     RS_RIGHT = '⇁',
+
+    SHARE = '⇧',
 }

src/enums/shortcut-actions.ts

@@ -1,6 +1,8 @@
 export const enum ShortcutAction {
     BETTER_XCLOUD_SETTINGS_SHOW = 'bx.settings.show',
 
+    CONTROLLER_XBOX_BUTTON_PRESS = 'controller.xbox.press',
+
     STREAM_VIDEO_TOGGLE = 'stream.video.toggle',
     STREAM_SCREENSHOT_CAPTURE = 'stream.screenshot.capture',
 

src/index.ts

@@ -27,13 +27,12 @@ import { ScreenshotManager } from "./utils/screenshot-manager";
 import { NativeMkbHandler } from "./modules/mkb/native-mkb-handler";
 import { GuideMenu } from "./modules/ui/guide-menu";
 import { updateVideoPlayer } from "./modules/stream/stream-settings-utils";
-import { NativeMkbMode, TouchControllerMode, UiSection } from "./enums/pref-values";
+import { BlockFeature, NativeMkbMode, TouchControllerMode, UiSection } from "./enums/pref-values";
 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 } from "./utils/settings-storages/global-settings-storage";
+import { GlobalPref, StreamPref } from "./enums/pref-keys";
 import { SettingsDialog } from "./modules/ui/dialog/settings-dialog";
 import { StreamUiHandler } from "./modules/stream/stream-ui";
 import { UserAgent } from "./utils/user-agent";
@@ -44,6 +43,12 @@ import { StreamSettings } from "./utils/stream-settings";
 import { KeyboardShortcutHandler } from "./modules/mkb/keyboard-shortcut-handler";
 import { GhPagesUtils } from "./utils/gh-pages";
 import { DeviceVibrationManager } from "./modules/device-vibration-manager";
+import { BxEventBus } from "./utils/bx-event-bus";
+import { getGlobalPref, getStreamPref } from "./utils/pref-utils";
+import { SettingsManager } from "./modules/settings-manager";
+import { Toast } from "./utils/toast";
+
+SettingsManager.getInstance();
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
@@ -112,7 +117,7 @@ if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loa
     const isSafari = UserAgent.isSafari();
     let $secondaryAction: HTMLElement;
     if (isSafari) {
-        $secondaryAction = CE('p', {}, t('settings-reloading'));
+        $secondaryAction = CE('p', false, t('settings-reloading'));
     } else {
         $secondaryAction = CE('a', {
             href: 'https://better-xcloud.github.io/troubleshooting',
@@ -122,12 +127,12 @@ if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loa
 
     // Show the reloading overlay
     const $fragment = document.createDocumentFragment();
-    $fragment.appendChild(CE('style', {}, css));
+    $fragment.appendChild(CE('style', false, css));
     $fragment.appendChild(CE('div',{
         class: 'bx-reload-overlay',
     },
-        CE('div', {},
-            CE('p', {}, t('load-failed-message')),
+        CE('div', false,
+            CE('p', false, t('load-failed-message')),
             $secondaryAction,
         ),
     ));
@@ -159,18 +164,20 @@ document.addEventListener('readystatechange', e => {
         return;
     }
 
-    STATES.isSignedIn = !!((window as any).xbcUser?.isSignedIn);
+    STATES.isSignedIn = !!window.xbcUser?.isSignedIn;
 
     if (STATES.isSignedIn) {
         // Preload Remote Play
-        RemotePlayManager.getInstance()?.initialize();
+        if (isFullVersion()) {
+            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<UiSection[]>(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS)) {
+    if (getGlobalPref(GlobalPref.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS) || getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.FRIENDS)) {
         const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest<HTMLElement>('div[class*=HomePage-module]');
         $parent && ($parent.style.display = 'none');
     }
@@ -190,7 +197,7 @@ window.addEventListener('popstate', onHistoryChanged);
 window.history.pushState = patchHistoryMethod('pushState');
 window.history.replaceState = patchHistoryMethod('replaceState');
 
-window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
+BxEventBus.Script.once('xcloud.server.unavailable', () => {
     STATES.supportedRegion = false;
     window.setTimeout(HeaderSection.watchHeader, 2000);
 
@@ -199,14 +206,14 @@ window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
     if ($unsupportedPage) {
         SettingsDialog.getInstance().show();
     }
-}, { once: true });
+});
 
-window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
+BxEventBus.Script.on('xcloud.server.ready', () => {
     STATES.isSignedIn = true;
     window.setTimeout(HeaderSection.watchHeader, 2000);
 });
 
-window.addEventListener(BxEvent.STREAM_LOADING, e => {
+BxEventBus.Stream.on('state.loading', () => {
     // Get title ID for screenshot's name
     if (window.location.pathname.includes('/launch/') && STATES.currentStream.titleInfo) {
         STATES.currentStream.titleSlug = productTitleToSlug(STATES.currentStream.titleInfo.product.title);
@@ -216,9 +223,9 @@ window.addEventListener(BxEvent.STREAM_LOADING, e => {
 });
 
 // Setup loading screen
-getPref(PrefKey.LOADING_SCREEN_GAME_ART) && window.addEventListener(BxEvent.TITLE_INFO_READY, LoadingScreen.setup);
+getGlobalPref(GlobalPref.LOADING_SCREEN_GAME_ART) && BxEventBus.Script.on('titleInfo.ready', LoadingScreen.setup);
 
-window.addEventListener(BxEvent.STREAM_STARTING, e => {
+BxEventBus.Stream.on('state.starting', () => {
     // Hide loading screen
     LoadingScreen.hide();
 
@@ -232,9 +239,11 @@ window.addEventListener(BxEvent.STREAM_STARTING, e => {
     }
 });
 
-window.addEventListener(BxEvent.STREAM_PLAYING, e => {
-    window.BX_STREAM_SETTINGS = StreamSettings.settings;
-    StreamSettings.refreshAllSettings();
+BxEventBus.Stream.on('state.playing', payload => {
+    if (isFullVersion()) {
+        window.BX_STREAM_SETTINGS = StreamSettings.settings;
+        StreamSettings.refreshAllSettings();
+    }
 
     STATES.isPlaying = true;
     StreamUiHandler.observe();
@@ -251,19 +260,21 @@ window.addEventListener(BxEvent.STREAM_PLAYING, e => {
         KeyboardShortcutHandler.getInstance().start();
 
         // Setup screenshot
-        const $video = (e as any).$video as HTMLVideoElement;
+        const $video = payload.$video as HTMLVideoElement;
         ScreenshotManager.getInstance().updateCanvasSize($video.videoWidth, $video.videoHeight);
 
         // Setup local co-op
-        getPref(PrefKey.LOCAL_CO_OP_ENABLED) && BxExposed.toggleLocalCoOp(getPref(PrefKey.LOCAL_CO_OP_ENABLED));
+        if (getStreamPref(StreamPref.LOCAL_CO_OP_ENABLED)) {
+            BxExposed.toggleLocalCoOp(true);
+            Toast.show(t('local-co-op'), t('enabled'));
+        }
     }
 
-
     updateVideoPlayer();
 });
 
-window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
-    BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
+BxEventBus.Stream.on('state.error', () => {
+    BxEventBus.Stream.emit('state.stopped', {});
 });
 
 isFullVersion() && window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e => {
@@ -274,9 +285,9 @@ isFullVersion() && window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e
 });
 
 // Detect game change
-window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
-    const dataChannel = (e as any).dataChannel;
-    if (!dataChannel || dataChannel.label !== 'message') {
+BxEventBus.Stream.on('dataChannelCreated', payload => {
+    const { dataChannel } = payload;
+    if (dataChannel?.label !== 'message') {
         return;
     }
 
@@ -285,26 +296,41 @@ window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
             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;
+        if (!msg.data.includes('/titleinfo')) {
+            return;
+        }
 
-            // 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);
-                    }
+        // Get xboxTitleId from message
+        const currentStream = STATES.currentStream;
+        const json = JSON.parse(JSON.parse(msg.data).content);
+        const currentId = currentStream.xboxTitleId ?? null;
+        let newId: number = parseInt(json.titleid, 16);
+
+        // Get titleSlug for Remote Play
+        if (STATES.remotePlay.isPlaying) {
+            currentStream.titleSlug = 'remote-play';
+            if (json.focused) {
+                const productTitle = await XboxApi.getProductTitle(newId);
+                if (productTitle) {
+                    currentStream.titleSlug = productTitleToSlug(productTitle);
+                } else {
+                    newId = -1;
                 }
+            } else {
+                newId = 0;
             }
         }
+
+        if (currentId !== newId) {
+            currentStream.xboxTitleId = newId;
+            BxEventBus.Stream.emit('xboxTitleId.changed', {
+                id: newId,
+            });
+        }
     });
 });
 
+
 function unload() {
     if (!STATES.isPlaying) {
         return;
@@ -337,12 +363,14 @@ function unload() {
         TouchController.reset();
 
         GameBar.getInstance()?.disable();
+
+        BxEventBus.Stream.emit('xboxTitleId.changed', { id: -1 });
     }
 }
 
-window.addEventListener(BxEvent.STREAM_STOPPED, unload);
+BxEventBus.Stream.on('state.stopped', unload);
 window.addEventListener('pagehide', e => {
-    BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
+    BxEventBus.Stream.emit('state.stopped', {});
 });
 
 isFullVersion() && window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
@@ -353,9 +381,11 @@ isFullVersion() && window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
 function main() {
     GhPagesUtils.fetchLatestCommit();
 
-    if (getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) !== NativeMkbMode.OFF) {
-        const customList = getPref<string[]>(PrefKey.NATIVE_MKB_FORCED_GAMES);
-        BX_FLAGS.ForceNativeMkbTitles.push(...customList);
+    if (isFullVersion()) {
+        if (getGlobalPref(GlobalPref.NATIVE_MKB_MODE) !== NativeMkbMode.OFF) {
+            const customList = getGlobalPref(GlobalPref.NATIVE_MKB_FORCED_GAMES);
+            BX_FLAGS.ForceNativeMkbTitles.push(...customList);
+        }
     }
 
     StreamSettings.setup();
@@ -368,9 +398,9 @@ function main() {
     patchCanvasContext();
     isFullVersion() && AppInterface && patchPointerLockApi();
 
-    getPref(PrefKey.AUDIO_VOLUME_CONTROL_ENABLED) && patchAudioContext();
+    getGlobalPref(GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED) && patchAudioContext();
 
-    if (getPref(PrefKey.BLOCK_TRACKING)) {
+    if (getGlobalPref(GlobalPref.BLOCK_TRACKING)) {
         patchMeControl();
         disableAdobeAudienceManager();
     }
@@ -397,28 +427,28 @@ function main() {
         disablePwa();
 
         // Preload Remote Play
-        if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
+        if (getGlobalPref(GlobalPref.REMOTE_PLAY_ENABLED)) {
             RemotePlayManager.detect();
         }
 
-        if (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL) {
+        if (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL) {
             TouchController.setup();
         }
 
         // Start PointerProviderServer
-        if (AppInterface && (getPref(PrefKey.MKB_ENABLED) || getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON)) {
+        if (AppInterface && (getGlobalPref(GlobalPref.MKB_ENABLED) || getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON)) {
             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();
+        getGlobalPref(GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME) && GameTile.setup();
 
         EmulatedMkbHandler.setupEvents();
     }
 
     // Show a toast when connecting/disconecting controller
-    if (getPref(PrefKey.UI_CONTROLLER_SHOW_STATUS)) {
+    if (getGlobalPref(GlobalPref.UI_CONTROLLER_SHOW_STATUS)) {
         window.addEventListener('gamepadconnected', e => showGamepadToast(e.gamepad));
         window.addEventListener('gamepaddisconnected', e => showGamepadToast(e.gamepad));
     }

src/modules/device-vibration-manager.ts

@@ -1,6 +1,6 @@
 import { AppInterface, STATES } from "@utils/global";
-import { BxEvent } from "@utils/bx-event";
 import { StreamSettings } from "@/utils/stream-settings";
+import { BxEventBus } from "@/utils/bx-event-bus";
 
 const VIBRATION_DATA_MAP = {
     gamepadIndex: 8,
@@ -37,8 +37,8 @@ export class DeviceVibrationManager {
     constructor() {
         this.boundOnMessage = this.onMessage.bind(this);
 
-        window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
-            const dataChannel = (e as any).dataChannel as RTCDataChannel;
+        BxEventBus.Stream.on('dataChannelCreated', payload => {
+            const { dataChannel } = payload;
             if (dataChannel?.label === 'input') {
                 this.reset();
 
@@ -47,9 +47,7 @@ export class DeviceVibrationManager {
             }
         });
 
-        window.addEventListener(BxEvent.DEVICE_VIBRATION_CHANGED, e => {
-            this.setupDataChannel();
-        });
+        BxEventBus.Stream.on('deviceVibration.updated', () => this.setupDataChannel());
     }
 
     private setupDataChannel() {

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

@@ -1,4 +1,4 @@
-import { BxEvent } from "@/utils/bx-event";
+import { BxEventBus } from "@/utils/bx-event-bus";
 
 export abstract class BaseGameBarAction {
     abstract $content: HTMLElement;
@@ -7,7 +7,7 @@ export abstract class BaseGameBarAction {
     reset() {}
 
     onClick(e: Event) {
-        BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+        BxEventBus.Stream.emit('gameBar.activated', {});
     };
 
     render(): HTMLElement {

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

@@ -6,20 +6,21 @@ import { BxIcon } from "@utils/bx-icon";
 import type { BaseGameBarAction } from "./base-action";
 import { STATES } from "@utils/global";
 import { MicrophoneAction } from "./microphone-action";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref } from "@/enums/pref-keys";
 import { TrueAchievementsAction } from "./true-achievements-action";
 import { SpeakerAction } from "./speaker-action";
 import { RendererAction } from "./renderer-action";
 import { BxLogger } from "@/utils/bx-logger";
 import { GameBarPosition, TouchControllerMode } from "@/enums/pref-values";
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { getGlobalPref } from "@/utils/pref-utils";
 
 
 export class GameBar {
     private static instance: GameBar | null | undefined;
     public static getInstance(): typeof GameBar['instance'] {
         if (typeof GameBar.instance === 'undefined') {
-            if (getPref<GameBarPosition>(PrefKey.GAME_BAR_POSITION) !== GameBarPosition.OFF) {
+            if (getGlobalPref(GlobalPref.GAME_BAR_POSITION) !== GameBarPosition.OFF) {
                 GameBar.instance = new GameBar();
             } else {
                 GameBar.instance = null;
@@ -45,7 +46,7 @@ export class GameBar {
 
         let $container;
 
-        const position = getPref<GameBarPosition>(PrefKey.GAME_BAR_POSITION);
+        const position = getGlobalPref(GlobalPref.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' }),
@@ -54,7 +55,7 @@ export class GameBar {
 
         this.actions = [
             new ScreenshotAction(),
-            ...(STATES.userAgent.capabilities.touch && (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.OFF) ? [new TouchControlAction()] : []),
+            ...(STATES.userAgent.capabilities.touch && (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.OFF) ? [new TouchControlAction()] : []),
             new SpeakerAction(),
             new RendererAction(),
             new MicrophoneAction(),
@@ -81,7 +82,7 @@ export class GameBar {
         });
 
         // Hide game bar after clicking on an action
-        window.addEventListener(BxEvent.GAME_BAR_ACTION_ACTIVATED, this.hideBar);
+        BxEventBus.Stream.on('gameBar.activated', this.hideBar);
 
         $container.addEventListener('pointerover', this.clearHideTimeout);
         $container.addEventListener('pointerout', this.beginHideTimeout);

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

@@ -1,8 +1,8 @@
-import { BxEvent } from "@utils/bx-event";
 import { BxIcon } from "@utils/bx-icon";
 import { createButton, ButtonStyle, CE } from "@utils/html";
 import { BaseGameBarAction } from "./base-action";
 import { MicrophoneShortcut, MicrophoneState } from "../shortcuts/microphone-shortcut";
+import { BxEventBus } from "@/utils/bx-event-bus";
 
 
 export class MicrophoneAction extends BaseGameBarAction {
@@ -24,11 +24,10 @@ export class MicrophoneAction extends BaseGameBarAction {
             onClick: this.onClick,
         });
 
-        this.$content = CE('div', {}, $btnMuted, $btnDefault);
+        this.$content = CE('div', false, $btnMuted, $btnDefault);
 
-        window.addEventListener(BxEvent.MICROPHONE_STATE_CHANGED, e => {
-            const microphoneState = (e as any).microphoneState;
-            const enabled = microphoneState === MicrophoneState.ENABLED;
+        BxEventBus.Stream.on('microphone.state.changed', payload => {
+            const enabled = payload.state === MicrophoneState.ENABLED;
             this.$content.dataset.activated = enabled.toString();
 
             // Show the button in Game Bar if the mic is enabled

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

@@ -2,7 +2,7 @@ import { BxIcon } from "@utils/bx-icon";
 import { createButton, ButtonStyle, CE } from "@utils/html";
 import { BaseGameBarAction } from "./base-action";
 import { RendererShortcut } from "../shortcuts/renderer-shortcut";
-import { BxEvent } from "@/utils/bx-event";
+import { BxEventBus } from "@/utils/bx-event-bus";
 
 
 export class RendererAction extends BaseGameBarAction {
@@ -24,11 +24,10 @@ export class RendererAction extends BaseGameBarAction {
             classes: ['bx-activated'],
         });
 
-        this.$content = CE('div', {}, $btnDefault, $btnActivated);
+        this.$content = CE('div', false, $btnDefault, $btnActivated);
 
-        window.addEventListener(BxEvent.VIDEO_VISIBILITY_CHANGED, e => {
-            const isShowing = (e as any).isShowing;
-            this.$content.dataset.activated = (!isShowing).toString();
+        BxEventBus.Stream.on('video.visibility.changed', payload => {
+            this.$content.dataset.activated = (!payload.isVisible).toString();
         });
     }
 

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

@@ -1,8 +1,8 @@
-import { BxEvent } from "@utils/bx-event";
 import { BxIcon } from "@utils/bx-icon";
 import { createButton, ButtonStyle, CE } from "@utils/html";
 import { BaseGameBarAction } from "./base-action";
 import { SoundShortcut, SpeakerState } from "../shortcuts/sound-shortcut";
+import { BxEventBus } from "@/utils/bx-event-bus";
 
 
 export class SpeakerAction extends BaseGameBarAction {
@@ -24,12 +24,10 @@ export class SpeakerAction extends BaseGameBarAction {
             classes: ['bx-activated'],
         });
 
-        this.$content = CE('div', {}, $btnEnable, $btnMuted);
-
-        window.addEventListener(BxEvent.SPEAKER_STATE_CHANGED, e => {
-            const speakerState = (e as any).speakerState;
-            const enabled = speakerState === SpeakerState.ENABLED;
+        this.$content = CE('div', false, $btnEnable, $btnMuted);
 
+        BxEventBus.Stream.on('speaker.state.changed', payload => {
+            const enabled = payload.state === SpeakerState.ENABLED;
             this.$content.dataset.activated = (!enabled).toString();
         });
     }

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

@@ -25,7 +25,7 @@ export class TouchControlAction extends BaseGameBarAction {
             classes: ['bx-activated'],
         });
 
-        this.$content = CE('div', {}, $btnEnable, $btnDisable);
+        this.$content = CE('div', false, $btnEnable, $btnDisable);
     }
 
     onClick = (e: Event) => {

src/modules/loading-screen.ts

@@ -2,8 +2,8 @@ import { CE } from "@utils/html";
 import { getPreferredServerRegion } from "@utils/region";
 import { t } from "@utils/translation";
 import { STATES } from "@utils/global";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref } from "@/enums/pref-keys";
+import { getGlobalPref } from "@/utils/pref-utils";
 import { compressCss } from "@macros/build" with { type: "macro" };
 import { LoadingScreenRocket } from "@/enums/pref-values";
 
@@ -37,7 +37,7 @@ export class LoadingScreen {
 
         LoadingScreen.setBackground(titleInfo.product.heroImageUrl || titleInfo.product.titledHeroImageUrl || titleInfo.product.tileImageUrl);
 
-        if (getPref<LoadingScreenRocket>(PrefKey.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE) {
+        if (getGlobalPref(GlobalPref.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE) {
             LoadingScreen.hideRocket();
         }
     }
@@ -63,6 +63,11 @@ export class LoadingScreen {
         // Limit max width to reduce image size
         imageUrl = imageUrl + '?w=1920';
 
+        const imageQuality = getGlobalPref(GlobalPref.UI_IMAGE_QUALITY);
+        if (imageQuality !== 90) {
+            imageUrl += '&q=' + imageQuality;
+        }
+
         $bgStyle.textContent! += compressCss(`
 #game-stream {
     background-color: transparent !important;
@@ -89,7 +94,7 @@ export class LoadingScreen {
 
     static setupWaitTime(waitTime: number) {
         // Hide rocket when queing
-        if (getPref<LoadingScreenRocket>(PrefKey.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE_QUEUE) {
+        if (getGlobalPref(GlobalPref.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE_QUEUE) {
             LoadingScreen.hideRocket();
         }
 
@@ -110,11 +115,11 @@ export class LoadingScreen {
         let $waitTimeBox = LoadingScreen.$waitTimeBox;
         if (!$waitTimeBox) {
             $waitTimeBox = CE('div', { class: 'bx-wait-time-box' },
-                CE('label', {}, t('server')),
-                CE('span', {}, getPreferredServerRegion()),
-                CE('label', {}, t('wait-time-estimated')),
+                CE('label', false, t('server')),
+                CE('span', false, getPreferredServerRegion()),
+                CE('label', false, t('wait-time-estimated')),
                 $estimated = CE('span', {}),
-                CE('label', {}, t('wait-time-countdown')),
+                CE('label', false, t('wait-time-countdown')),
                 $countDown = CE('span', {}),
             );
 
@@ -146,7 +151,7 @@ export class LoadingScreen {
         LoadingScreen.orgWebTitle && (document.title = LoadingScreen.orgWebTitle);
         LoadingScreen.$waitTimeBox && LoadingScreen.$waitTimeBox.classList.add('bx-gone');
 
-        if (getPref(PrefKey.LOADING_SCREEN_GAME_ART) && LoadingScreen.$bgStyle) {
+        if (getGlobalPref(GlobalPref.LOADING_SCREEN_GAME_ART) && LoadingScreen.$bgStyle) {
             const $rocketBg = document.querySelector('#game-stream rect[width="800"]');
             $rocketBg && $rocketBg.addEventListener('transitionend', e => {
                 LoadingScreen.$bgStyle.textContent += compressCss(`

src/modules/mkb/key-helper.ts

@@ -1,4 +1,4 @@
-import { MouseButtonCode, WheelCode, type KeyCode } from "@/enums/mkb";
+import { MouseButtonCode, WheelCode } from "@/enums/mkb";
 
 export const enum KeyModifier {
     CTRL = 1,

src/modules/mkb/mkb-handler.ts

@@ -11,13 +11,15 @@ 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 { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref, StreamPref } from "@/enums/pref-keys";
+import { getGlobalPref, getStreamPref } from "@/utils/pref-utils";
 import { GamepadKey, GamepadStick } from "@/enums/gamepad";
 import { MkbPopup } from "./mkb-popup";
 import type { MkbConvertedPresetData } from "@/types/presets";
 import { StreamSettings } from "@/utils/stream-settings";
 import { ShortcutAction } from "@/enums/shortcut-actions";
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { generateVirtualControllerMapping, toXcloudGamepadKey } from "@/utils/gamepad";
 
 const PointerToMouseButton = {
     1: 0,
@@ -132,7 +134,7 @@ export class EmulatedMkbHandler extends MkbHandler {
     private static readonly LOG_TAG = 'EmulatedMkbHandler';
 
     static isAllowed() {
-        return getPref(PrefKey.MKB_ENABLED) && (AppInterface || !UserAgent.isMobile());
+        return getGlobalPref(GlobalPref.MKB_ENABLED) && (AppInterface || !UserAgent.isMobile());
     }
 
     private PRESET!: MkbConvertedPresetData | null;
@@ -151,6 +153,8 @@ export class EmulatedMkbHandler extends MkbHandler {
     };
     private nativeGetGamepads: Navigator['getGamepads'];
 
+    private xCloudGamepad: XcloudGamepad = generateVirtualControllerMapping(0);
+
     private initialized = false;
     private enabled = false;
     private mouseDataProvider: MouseDataProvider | undefined;
@@ -170,16 +174,16 @@ export class EmulatedMkbHandler extends MkbHandler {
 
     private popup: MkbPopup;
 
-    private STICK_MAP: { [key in GamepadKey]?: [GamepadKey[], number, number] } = {
-        [GamepadKey.LS_LEFT]: [this.LEFT_STICK_X, 0, -1],
-        [GamepadKey.LS_RIGHT]: [this.LEFT_STICK_X, 0, 1],
-        [GamepadKey.LS_UP]: [this.LEFT_STICK_Y, 1, -1],
-        [GamepadKey.LS_DOWN]: [this.LEFT_STICK_Y, 1, 1],
+    private STICK_MAP: { [key in GamepadKey]?: [GamepadKey[], number] } = {
+        [GamepadKey.LS_LEFT]: [this.LEFT_STICK_X, -1],
+        [GamepadKey.LS_RIGHT]: [this.LEFT_STICK_X, 1],
+        [GamepadKey.LS_UP]: [this.LEFT_STICK_Y, 1],
+        [GamepadKey.LS_DOWN]: [this.LEFT_STICK_Y, -1],
 
-        [GamepadKey.RS_LEFT]: [this.RIGHT_STICK_X, 2, -1],
-        [GamepadKey.RS_RIGHT]: [this.RIGHT_STICK_X, 2, 1],
-        [GamepadKey.RS_UP]: [this.RIGHT_STICK_Y, 3, -1],
-        [GamepadKey.RS_DOWN]: [this.RIGHT_STICK_Y, 3, 1],
+        [GamepadKey.RS_LEFT]: [this.RIGHT_STICK_X, -1],
+        [GamepadKey.RS_RIGHT]: [this.RIGHT_STICK_X, 1],
+        [GamepadKey.RS_UP]: [this.RIGHT_STICK_Y, 1],
+        [GamepadKey.RS_DOWN]: [this.RIGHT_STICK_Y, -1],
     };
 
     private constructor() {
@@ -204,11 +208,16 @@ export class EmulatedMkbHandler extends MkbHandler {
     private getVirtualGamepad = () => this.VIRTUAL_GAMEPAD;
 
     private updateStick(stick: GamepadStick, x: number, y: number) {
-        const virtualGamepad = this.getVirtualGamepad();
-        virtualGamepad.axes[stick * 2] = x;
-        virtualGamepad.axes[stick * 2 + 1] = y;
+        const gamepad = this.xCloudGamepad;
+        if (stick === GamepadStick.LEFT) {
+            gamepad.LeftThumbXAxis = x;
+            gamepad.LeftThumbYAxis = -y;
+        } else {
+            gamepad.RightThumbXAxis = x;
+            gamepad.RightThumbYAxis = -y;
+        }
 
-        virtualGamepad.timestamp = performance.now();
+        window.BX_EXPOSED.inputChannel?.sendGamepadInput(performance.now(), [this.xCloudGamepad]);
     }
 
     /*
@@ -223,29 +232,20 @@ export class EmulatedMkbHandler extends MkbHandler {
 
     private vectorLength = (x: number, y: number): number => Math.sqrt(x ** 2 + y ** 2);
 
-    private resetGamepad() {
-        const gamepad = this.getVirtualGamepad();
+    resetXcloudGamepads() {
+        const index = getStreamPref(StreamPref.MKB_P1_SLOT) - 1;
 
-        // Reset axes
-        gamepad.axes = [0, 0, 0, 0];
-
-        // Reset buttons
-        for (const button of gamepad.buttons) {
-            button.pressed = false;
-            button.value = 0;
-        }
-
-        gamepad.timestamp = performance.now();
+        this.xCloudGamepad = generateVirtualControllerMapping(0, {
+            GamepadIndex: getStreamPref(StreamPref.LOCAL_CO_OP_ENABLED) ? index : 0,
+            Dirty: true,
+        });
+        this.VIRTUAL_GAMEPAD.index = index;
     }
 
     private pressButton(buttonIndex: GamepadKey, pressed: boolean) {
-        const virtualGamepad = this.getVirtualGamepad();
-
+        const xCloudKey = toXcloudGamepadKey(buttonIndex)!;
         if (buttonIndex >= 100) {
-            let [valueArr, axisIndex] = this.STICK_MAP[buttonIndex]!;
-            valueArr = valueArr as number[];
-            axisIndex = axisIndex as number;
-
+            let [valueArr]: [GamepadKey[], number] = this.STICK_MAP[buttonIndex]!;
             // Remove old index of the array
             for (let i = valueArr.length - 1; i >= 0; i--) {
                 if (valueArr[i] === buttonIndex) {
@@ -258,18 +258,19 @@ export class EmulatedMkbHandler extends 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]]![1] as number;
             } else {
                 value = 0;
             }
 
-            virtualGamepad.axes[axisIndex] = value;
+            // @ts-ignore
+            this.xCloudGamepad[xCloudKey] = value;
         } else {
-            virtualGamepad.buttons[buttonIndex].pressed = pressed;
-            virtualGamepad.buttons[buttonIndex].value = pressed ? 1 : 0;
+            // @ts-ignore
+            this.xCloudGamepad[xCloudKey] = pressed ? 1 : 0;
         }
 
-        virtualGamepad.timestamp = performance.now();
+        window.BX_EXPOSED.inputChannel?.sendGamepadInput(performance.now(), [this.xCloudGamepad]);
     }
 
     private onKeyboardEvent = (e: KeyboardEvent) => {
@@ -427,7 +428,7 @@ export class EmulatedMkbHandler extends MkbHandler {
         return true;
     }
 
-    toggle(force?: boolean) {
+    async toggle(force?: boolean) {
         if (!this.initialized) {
             return;
         }
@@ -439,7 +440,12 @@ export class EmulatedMkbHandler extends MkbHandler {
         }
 
         if (this.enabled) {
-            document.body.requestPointerLock();
+            try {
+                await document.body.requestPointerLock({ unadjustedMovement: true });
+            } catch (e) {
+                document.body.requestPointerLock();
+                console.log(e);
+            }
         } else {
             document.pointerLockElement && document.exitPointerLock();
         }
@@ -447,7 +453,7 @@ export class EmulatedMkbHandler extends MkbHandler {
 
     refreshPresetData() {
         this.PRESET = window.BX_STREAM_SETTINGS.mkbPreset;
-        this.resetGamepad();
+        this.resetXcloudGamepads();
     }
 
     waitForMouseData(showPopup: boolean) {
@@ -517,7 +523,7 @@ export class EmulatedMkbHandler extends MkbHandler {
         window.addEventListener('keyup', this.onKeyboardEvent);
 
         window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.onPollingModeChanged);
-        window.addEventListener(BxEvent.XCLOUD_DIALOG_SHOWN, this.onDialogShown);
+        BxEventBus.Script.on('dialog.shown', this.onDialogShown);
 
         if (AppInterface) {
             // Android app doesn't support PointerLock API so we need to use a different method
@@ -554,7 +560,7 @@ export class EmulatedMkbHandler extends MkbHandler {
         this.stop();
 
         this.waitForMouseData(false);
-        document.pointerLockElement && document.exitPointerLock();
+        document.exitPointerLock();
 
         window.removeEventListener('keydown', this.onKeyboardEvent);
         window.removeEventListener('keyup', this.onKeyboardEvent);
@@ -568,18 +574,13 @@ export class EmulatedMkbHandler extends MkbHandler {
         }
 
         window.removeEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.onPollingModeChanged);
-        window.removeEventListener(BxEvent.XCLOUD_DIALOG_SHOWN, this.onDialogShown);
+        BxEventBus.Script.off('dialog.shown', this.onDialogShown);
 
         this.mouseDataProvider?.destroy();
 
         window.removeEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.onPollingModeChanged);
     }
 
-    updateGamepadSlots() {
-        // Set gamepad slot
-        this.VIRTUAL_GAMEPAD.index = getPref<number>(PrefKey.MKB_P1_SLOT) - 1;
-    }
-
     start() {
         if (!this.enabled) {
             this.enabled = true;
@@ -589,8 +590,8 @@ export class EmulatedMkbHandler extends MkbHandler {
         this.isPolling = true;
         this.escKeyDownTime = -1;
 
-        this.resetGamepad();
-        this.updateGamepadSlots();
+        window.BX_EXPOSED.toggleLocalCoOp(getStreamPref(StreamPref.LOCAL_CO_OP_ENABLED));
+        this.resetXcloudGamepads();
         window.navigator.getGamepads = this.patchedGetGamepads;
 
         this.waitForMouseData(false);
@@ -619,7 +620,7 @@ export class EmulatedMkbHandler extends MkbHandler {
         const virtualGamepad = this.getVirtualGamepad();
         if (virtualGamepad.connected) {
             // Dispatch "gamepaddisconnected" event
-            this.resetGamepad();
+            this.resetXcloudGamepads();
 
             virtualGamepad.connected = false;
             virtualGamepad.timestamp = performance.now();
@@ -639,7 +640,7 @@ export class EmulatedMkbHandler extends MkbHandler {
 
     static setupEvents() {
         if (isFullVersion()) {
-            window.addEventListener(BxEvent.STREAM_PLAYING, () => {
+            BxEventBus.Stream.on('state.playing', () => {
                 if (STATES.currentStream.titleInfo?.details.hasMkbSupport) {
                     // Enable native MKB in Android app
                     NativeMkbHandler.getInstance()?.init();
@@ -649,7 +650,7 @@ export class EmulatedMkbHandler extends MkbHandler {
             });
 
             if (EmulatedMkbHandler.isAllowed()) {
-                window.addEventListener(BxEvent.MKB_UPDATED, () => {
+                BxEventBus.Stream.on('mkb.setting.updated', () => {
                     EmulatedMkbHandler.getInstance()?.refreshPresetData();
                 });
             }

src/modules/mkb/mkb-popup.ts

@@ -1,12 +1,13 @@
 import { CE, createButton, ButtonStyle, type BxButtonOptions } from "@/utils/html";
 import { t } from "@/utils/translation";
-import { BxEvent } from "@/utils/bx-event";
 import { ShortcutAction } from "@/enums/shortcut-actions";
 import { SettingsDialog } from "../ui/dialog/settings-dialog";
 import type { MkbHandler } from "./base-mkb-handler";
 import { NativeMkbHandler } from "./native-mkb-handler";
 import { StreamSettings } from "@/utils/stream-settings";
 import { KeyHelper } from "./key-helper";
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { BxIcon } from "@/utils/bx-icon";
 
 type MkbPopupType = 'virtual' | 'native';
 
@@ -24,7 +25,7 @@ export class MkbPopup {
     constructor() {
         this.render();
 
-        window.addEventListener(BxEvent.KEYBOARD_SHORTCUTS_UPDATED, e => {
+        BxEventBus.Stream.on('keyboardShortcuts.updated', () => {
             const $newButton = this.createActivateButton();
             this.$btnActivate.replaceWith($newButton);
             this.$btnActivate = $newButton;
@@ -77,7 +78,7 @@ export class MkbPopup {
             this.$title = CE('p'),
             this.$btnActivate = this.createActivateButton(),
 
-            CE('div', {},
+            CE('div', false,
                 createButton({
                     label: t('ignore'),
                     style: ButtonStyle.GHOST,
@@ -90,6 +91,7 @@ export class MkbPopup {
 
                 createButton({
                     label: t('manage'),
+                    icon: BxIcon.MANAGE,
                     style: ButtonStyle.FOCUSABLE,
                     onClick: () => {
                         const dialog = SettingsDialog.getInstance();

src/modules/mkb/mouse-cursor-hider.ts

@@ -1,11 +1,11 @@
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref } from "@/enums/pref-keys";
+import { getGlobalPref } from "@/utils/pref-utils";
 
 export class MouseCursorHider {
     private static instance: MouseCursorHider | null | undefined;
     public static getInstance(): typeof MouseCursorHider['instance'] {
         if (typeof MouseCursorHider.instance === 'undefined') {
-            if (!getPref(PrefKey.MKB_ENABLED) && getPref(PrefKey.MKB_HIDE_IDLE_CURSOR)) {
+            if (!getGlobalPref(GlobalPref.MKB_ENABLED) && getGlobalPref(GlobalPref.MKB_HIDE_IDLE_CURSOR)) {
                 MouseCursorHider.instance = new MouseCursorHider();
             } else {
                 MouseCursorHider.instance = null;

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

@@ -4,27 +4,15 @@ import { AppInterface, STATES } from "@/utils/global";
 import { MkbHandler } from "./base-mkb-handler";
 import { t } from "@/utils/translation";
 import { BxEvent } from "@/utils/bx-event";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref, StreamPref } from "@/enums/pref-keys";
 import { BxLogger } from "@/utils/bx-logger";
 import { MkbPopup } from "./mkb-popup";
 import { KeyHelper } from "./key-helper";
 import { StreamSettings } from "@/utils/stream-settings";
 import { ShortcutAction } from "@/enums/shortcut-actions";
 import { NativeMkbMode } from "@/enums/pref-values";
-
-type NativeMouseData = {
-    X: number,
-    Y: number,
-    Buttons: number,
-    WheelX: number,
-    WheelY: number,
-    Type?: 0,  // 0: Relative, 1: Absolute
-}
-
-type XcloudInputSink = {
-    onMouseInput: (data: NativeMouseData) => void;
-}
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { getStreamPref, getGlobalPref } from "@/utils/pref-utils";
 
 export class NativeMkbHandler extends MkbHandler {
     private static instance: NativeMkbHandler | null | undefined;
@@ -42,20 +30,18 @@ export class NativeMkbHandler extends MkbHandler {
     private readonly LOG_TAG = 'NativeMkbHandler';
 
     static isAllowed = () => {
-        return STATES.browser.capabilities.emulatedNativeMkb && getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON;
+        return STATES.browser.capabilities.emulatedNativeMkb && getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON;
     }
 
     private pointerClient: PointerClient | undefined;
     private enabled = false;
 
     private mouseButtonsPressed = 0;
-    private mouseWheelX = 0;
-    private mouseWheelY = 0;
 
     private mouseVerticalMultiply = 0;
     private mouseHorizontalMultiply = 0;
 
-    private inputSink: XcloudInputSink | undefined;
+    private inputChannel: XcloudInputChannel | undefined;
 
     private popup!: MkbPopup;
 
@@ -100,10 +86,6 @@ export class NativeMkbHandler extends MkbHandler {
                 this.onKeyboardEvent(event as KeyboardEvent);
                 break;
 
-            case BxEvent.XCLOUD_DIALOG_SHOWN:
-                this.onDialogShown();
-                break;
-
             case BxEvent.POINTER_LOCK_REQUESTED:
                 this.onPointerLockRequested(event);
                 break;
@@ -119,7 +101,7 @@ export class NativeMkbHandler extends MkbHandler {
 
     init() {
         this.pointerClient = PointerClient.getInstance();
-        this.inputSink = window.BX_EXPOSED.inputSink;
+        this.inputChannel = window.BX_EXPOSED.inputChannel;
 
         // Stop keyboard input at startup
         this.updateInputConfigurationAsync(false);
@@ -130,15 +112,15 @@ export class NativeMkbHandler extends MkbHandler {
             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);
+        this.mouseVerticalMultiply = getStreamPref(StreamPref.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY);
+        this.mouseHorizontalMultiply = getStreamPref(StreamPref.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);
+        BxEventBus.Script.on('dialog.shown', this.onDialogShown);
 
         const shortcutKey = StreamSettings.findKeyboardShortcut(ShortcutAction.MKB_TOGGLE);
         if (shortcutKey) {
@@ -199,13 +181,13 @@ export class NativeMkbHandler extends MkbHandler {
 
         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);
+        BxEventBus.Script.off('dialog.shown', this.onDialogShown);
 
         this.waitForMouseData(false);
-        document.pointerLockElement && document.exitPointerLock();
+        document.exitPointerLock();
     }
 
     handleMouseMove(data: MkbMouseMove): void {
@@ -213,8 +195,8 @@ export class NativeMkbHandler extends MkbHandler {
             X: data.movementX,
             Y: data.movementY,
             Buttons: this.mouseButtonsPressed,
-            WheelX: this.mouseWheelX,
-            WheelY: this.mouseWheelY,
+            WheelX: 0,
+            WheelY: 0,
         });
     }
 
@@ -232,30 +214,30 @@ export class NativeMkbHandler extends MkbHandler {
             X: 0,
             Y: 0,
             Buttons: this.mouseButtonsPressed,
-            WheelX: this.mouseWheelX,
-            WheelY: this.mouseWheelY,
+            WheelX: 0,
+            WheelY: 0,
         });
     }
 
     handleMouseWheel(data: MkbMouseWheel): boolean {
         const { vertical, horizontal } = data;
 
-        this.mouseWheelX = horizontal;
+        let mouseWheelX = horizontal;
         if (this.mouseHorizontalMultiply && this.mouseHorizontalMultiply !== 1) {
-            this.mouseWheelX *= this.mouseHorizontalMultiply;
+            mouseWheelX *= this.mouseHorizontalMultiply;
         }
 
-        this.mouseWheelY = vertical;
+        let mouseWheelY = vertical;
         if (this.mouseVerticalMultiply && this.mouseVerticalMultiply !== 1) {
-            this.mouseWheelY *= this.mouseVerticalMultiply;
+            mouseWheelY *= this.mouseVerticalMultiply;
         }
 
         this.sendMouseInput({
             X: 0,
             Y: 0,
             Buttons: this.mouseButtonsPressed,
-            WheelX: this.mouseWheelX,
-            WheelY: this.mouseWheelY,
+            WheelX: mouseWheelX,
+            WheelY: mouseWheelY,
         });
 
         return true;
@@ -279,13 +261,11 @@ export class NativeMkbHandler extends MkbHandler {
 
     private sendMouseInput(data: NativeMouseData) {
         data.Type = 0;  // Relative
-        this.inputSink?.onMouseInput(data);
+        this.inputChannel?.queueMouseInput(data);
     }
 
     private resetMouseInput() {
         this.mouseButtonsPressed = 0;
-        this.mouseWheelX = 0;
-        this.mouseWheelY = 0;
 
         this.sendMouseInput({
             X: 0,

src/modules/mkb/pointer-client.ts

@@ -8,6 +8,7 @@ enum PointerAction {
     BUTTON_RELEASE = 3,
     SCROLL = 4,
     POINTER_CAPTURE_CHANGED = 5,
+    PROTOCOL_VERSION = 127,
 }
 
 
@@ -15,6 +16,7 @@ export class PointerClient {
     private static instance: PointerClient;
     public static getInstance = () => PointerClient.instance ?? (PointerClient.instance = new PointerClient());
     private readonly LOG_TAG = 'PointerClient';
+    private readonly REQUIRED_PROTOCOL_VERSION = 2;
 
     private socket: WebSocket | undefined | null;
     private mkbHandler: MkbHandler | undefined;
@@ -56,6 +58,15 @@ export class PointerClient {
             let messageType = dataView.getInt8(0);
             let offset = Int8Array.BYTES_PER_ELEMENT;
             switch (messageType) {
+                case PointerAction.PROTOCOL_VERSION:
+                    const protocolVersion = this.onProtocolVersion(dataView, offset);
+                    BxLogger.info(this.LOG_TAG, 'Protocol version', protocolVersion);
+
+                    if (protocolVersion !== this.REQUIRED_PROTOCOL_VERSION) {
+                        alert('Required MKB protocol: ' + protocolVersion);
+                        this.stop();
+                    }
+                    break;
                 case PointerAction.MOVE:
                     this.onMove(dataView, offset);
                     break;
@@ -75,6 +86,10 @@ export class PointerClient {
         });
     }
 
+    private onProtocolVersion(dataView: DataView, offset: number) {
+        return dataView.getUint16(offset);
+    }
+
     onMove(dataView: DataView, offset: number) {
         // [X, Y]
         const x = dataView.getInt16(offset);

src/modules/patcher/patcher-utils.ts

@@ -1,22 +1,30 @@
 import type { PatchArray, PatchName, PatchPage } from "./patcher";
 
 export class PatcherUtils {
-    static indexOf(txt: string, searchString: string, startIndex: number, maxRange: number): number {
+    static indexOf(txt: string, searchString: string, startIndex: number, maxRange=0, after=false): number {
+        if (startIndex < 0) {
+            return -1;
+        }
+
         const index = txt.indexOf(searchString, startIndex);
         if (index < 0 || (maxRange && index - startIndex > maxRange)) {
             return -1;
         }
 
-        return index;
+        return after ? index + searchString.length : index;
     }
 
-    static lastIndexOf(txt: string, searchString: string, startIndex: number, maxRange: number): number {
+    static lastIndexOf(txt: string, searchString: string, startIndex: number, maxRange=0, after=false): number {
+        if (startIndex < 0) {
+            return -1;
+        }
+
         const index = txt.lastIndexOf(searchString, startIndex);
         if (index < 0 || (maxRange && startIndex - index > maxRange)) {
             return -1;
         }
 
-        return index;
+        return after ? index + searchString.length : index;
     }
 
     static insertAt(txt: string, index: number, insertString: string): string {
@@ -42,4 +50,50 @@ export class PatcherUtils {
 
         return str;
     }
+
+    private static isVarCharacter(char: string) {
+        const code = char.charCodeAt(0);
+
+        // Check for uppercase letters (A-Z)
+        const isUppercase = code >= 65 && code <= 90;
+
+        // Check for lowercase letters (a-z)
+        const isLowercase = code >= 97 && code <= 122;
+
+        // Check for digits (0-9)
+        const isDigit = code >= 48 && code <= 57;
+
+        // Check for special characters '_' and '$'
+        const isSpecial = char === '_' || char === '$';
+
+        return isUppercase || isLowercase || isDigit || isSpecial;
+    }
+
+    static getVariableNameBefore(str: string, index: number) {
+        if (index < 0) {
+            return null;
+        }
+
+        const end = index;
+        let start = end - 1;
+        while (PatcherUtils.isVarCharacter(str[start])) {
+            start -= 1;
+        }
+
+        return str.substring(start + 1, end);
+    }
+
+    static getVariableNameAfter(str: string, index: number) {
+        if (index < 0) {
+            return null;
+        }
+
+        const start = index;
+        let end = start + 1;
+        while (PatcherUtils.isVarCharacter(str[end])) {
+            end += 1;
+        }
+
+        return str.substring(start, end);
+    }
 }

src/modules/patcher/patcher.ts

@@ -1,22 +1,21 @@
 import { AppInterface, SCRIPT_VERSION, STATES } from "@utils/global";
 import { BX_FLAGS } from "@utils/bx-flags";
 import { BxLogger } from "@utils/bx-logger";
-import { hashCode, renderString } from "@utils/utils";
+import { blockSomeNotifications, hashCode, renderString } from "@utils/utils";
 import { BxEvent } from "@/utils/bx-event";
 
-import codeControllerShortcuts from "./patches/controller-shortcuts.js" with { type: "text" };
+import codeControllerCustomization from "./patches/controller-customization.js" with { type: "text" };
+import codePollGamepad from "./patches/poll-gamepad.js" with { type: "text" };
 import codeExposeStreamSession from "./patches/expose-stream-session.js" with { type: "text" };
+import codeGameCardIcons from "./patches/game-card-icons.js" with { type: "text" };
 import codeLocalCoOpEnable from "./patches/local-co-op-enable.js" with { type: "text" };
-import codeSetCurrentlyFocusedInteractable from "./patches/set-currently-focused-interactable.js" with { type: "text" };
-import codeRemotePlayEnable from "./patches/remote-play-enable.js" with { type: "text" };
 import codeRemotePlayKeepAlive from "./patches/remote-play-keep-alive.js" with { type: "text" };
 import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "text" };
-import { FeatureGates } from "@/utils/feature-gates.js";
-import { PrefKey, StorageKey } from "@/enums/pref-keys.js";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref, StorageKey } from "@/enums/pref-keys.js";
+import { getGlobalPref } from "@/utils/pref-utils.js";
 import { GamePassCloudGallery } from "@/enums/game-pass-gallery";
 import { t } from "@/utils/translation";
-import { NativeMkbMode, TouchControllerMode, UiLayout, UiSection } from "@/enums/pref-values";
+import { BlockFeature, NativeMkbMode, TouchControllerMode, UiLayout, UiSection } from "@/enums/pref-values";
 import { PatcherUtils } from "./patcher-utils.js";
 
 export type PatchName = keyof typeof PATCHES;
@@ -90,7 +89,7 @@ const PATCHES = {
             return false;
         }
 
-        const layout = getPref<UiLayout>(PrefKey.UI_LAYOUT) === UiLayout.TV ? UiLayout.TV : UiLayout.DEFAULT;
+        const layout = getGlobalPref(GlobalPref.UI_LAYOUT) === UiLayout.TV ? UiLayout.TV : UiLayout.DEFAULT;
         return str.replace(text, `?"${layout}":"${layout}"`);
     },
 
@@ -122,7 +121,9 @@ const PATCHES = {
             return false;
         }
 
-        return str.replace(text, codeRemotePlayEnable);
+        const newCode = `connectMode: window.BX_REMOTE_PLAY_CONFIG ? "xhome-connect" : "cloud-connect",
+remotePlayServerId: (window.BX_REMOTE_PLAY_CONFIG && window.BX_REMOTE_PLAY_CONFIG.serverId) || '',`;
+        return str.replace(text, newCode);
     },
 
     // Remote Play: Disable achievement toast
@@ -188,22 +189,39 @@ const PATCHES = {
         str = PatcherUtils.replaceWith(str, setTimeoutIndex, tmp, tmpPatched);
 
         // Block gamepad stats collecting
-        if (getPref(PrefKey.BLOCK_TRACKING)) {
+        if (getGlobalPref(GlobalPref.BLOCK_TRACKING)) {
             codeBlock = codeBlock.replace('this.inputPollingIntervalStats.addValue', '');
             codeBlock = codeBlock.replace('this.inputPollingDurationStats.addValue', '');
         }
 
-        // Map the Share button on Xbox Series controller with the capturing screenshot feature
-        const match = codeBlock.match(/this\.gamepadTimestamps\.set\((\w+)\.index/);
-        if (match) {
-            const gamepadVar = match[1];
-            const newCode = renderString(codeControllerShortcuts, {
-                gamepadVar,
-            });
-
-            codeBlock = codeBlock.replace('this.gamepadTimestamps.set', newCode + 'this.gamepadTimestamps.set');
+        // Controller shortcuts
+        let match = codeBlock.match(/this\.gamepadTimestamps\.set\(([A-Za-z0-9_$]+)\.index/);
+        if (!match) {
+            return false;
         }
 
+        let newCode = renderString(codePollGamepad, {
+            gamepadVar: match[1],
+        });
+        codeBlock = codeBlock.replace('this.gamepadTimestamps.set', newCode + 'this.gamepadTimestamps.set');
+
+        // Controller customization
+        match = codeBlock.match(/let ([A-Za-z0-9_$]+)=this\.gamepadMappings\.find/);
+        if (!match) {
+            return false;
+        }
+
+        const xCloudGamepadVar = match[1];
+        const inputFeedbackManager = PatcherUtils.indexOf(codeBlock, 'this.inputFeedbackManager.onGamepadConnected(', 0, 10000);
+        const backetIndex = PatcherUtils.indexOf(codeBlock, '}', inputFeedbackManager, 100);
+        if (backetIndex < 0) {
+            return false;
+        }
+
+        let customizationCode = ';';  // End previous code line
+        customizationCode += renderString(codeControllerCustomization, { xCloudGamepadVar });
+        codeBlock = PatcherUtils.insertAt(codeBlock, backetIndex, customizationCode);
+
         str = str.substring(0, index) + codeBlock + str.substring(setTimeoutIndex);
         return str;
     },
@@ -245,25 +263,6 @@ logFunc(logTag, '//', logMessage);
         return str;
     },
 
-    // Override website's settings
-    overrideSettings(str: string) {
-        const index = str.indexOf(',EnableStreamGate:');
-        if (index < 0) {
-            return false;
-        }
-
-        // Find the next "},"
-        const endIndex = str.indexOf('},', index);
-
-        let newSettings = JSON.stringify(FeatureGates);
-        newSettings = newSettings.substring(1, newSettings.length - 1);
-
-        const newCode = newSettings;
-
-        str = str.substring(0, endIndex) + ',' + newCode + str.substring(endIndex);
-        return str;
-    },
-
     disableGamepadDisconnectedScreen(str: string) {
         const index = str.indexOf('"GamepadDisconnected_Title",');
         if (index < 0) {
@@ -378,9 +377,9 @@ if (window.BX_EXPOSED.stopTakRendering) {
         }
 
         let autoOffCode = '';
-        if (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
+        if (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
             autoOffCode = 'return;';
-        } else if (getPref(PrefKey.TOUCH_CONTROLLER_AUTO_OFF)) {
+        } else if (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_AUTO_OFF)) {
             autoOffCode = `
 const gamepads = window.navigator.getGamepads();
 let gamepadFound = false;
@@ -435,7 +434,7 @@ e.guideUI = null;
 `;
 
         // Remove the TAK Edit button when the touch controller is disabled
-        if (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
+        if (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
             newCode += 'e.canShowTakHUD = false;';
         }
 
@@ -555,19 +554,19 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});
             return false;
         }
 
-        const opacity = (getPref<TouchControllerDefaultOpacity>(PrefKey.TOUCH_CONTROLLER_DEFAULT_OPACITY) / 100).toFixed(1);
+        const opacity = (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_DEFAULT_OPACITY) / 100).toFixed(1);
         const newCode = `opacityMultiplier: ${opacity}`;
         str = str.replace(text, newCode);
         return str;
     },
 
     patchShowSensorControls(str: string) {
-        let text = '{shouldShowSensorControls:';
+        let text = ',{shouldShowSensorControls:';
         if (!str.includes(text)) {
             return false;
         }
 
-        const newCode = `{shouldShowSensorControls: (window.BX_EXPOSED && window.BX_EXPOSED.shouldShowSensorControls) ||`;
+        const newCode = `,{shouldShowSensorControls: (window.BX_EXPOSED && window.BX_EXPOSED.shouldShowSensorControls) ||`;
 
         str = str.replace(text, newCode);
         return str;
@@ -644,15 +643,14 @@ true` + text;
         return str;
     },
 
-    exposeInputSink(str: string) {
-        let text = 'this.controlChannel=null,this.inputChannel=null';
-        if (!str.includes(text)) {
+    exposeInputChannel(str: string) {
+        let index = str.indexOf('this.flushData=');
+        if (index < 0) {
             return false;
         }
 
-        const newCode = 'window.BX_EXPOSED.inputSink = this;';
-
-        str = str.replace(text, newCode + text);
+        const newCode = 'window.BX_EXPOSED.inputChannel = this,';
+        str = PatcherUtils.insertAt(str, index, newCode);
         return str;
     },
 
@@ -715,6 +713,18 @@ true` + text;
         return str;
     },
 
+    // Don't render News section
+    ignoreNewsSection(str: string) {
+        let index = str.indexOf('Logger("CarouselRow")');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, 'const ', index, 200));
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, 'return null;');
+        return str;
+    },
+
     // Don't render "Play With Friends" sections
     ignorePlayWithFriendsSection(str: string) {
         let index = str.indexOf('location:"PlayWithFriendsRow",');
@@ -780,7 +790,7 @@ true` + text;
             return false;
         }
 
-        const PREF_HIDE_SECTIONS = getPref<UiSection[]>(PrefKey.UI_HIDE_SECTIONS);
+        const PREF_HIDE_SECTIONS = getGlobalPref(GlobalPref.UI_HIDE_SECTIONS);
         const siglIds: GamePassCloudGallery[] = [];
 
         const sections: PartialRecord<UiSection, GamePassCloudGallery> = {
@@ -844,15 +854,15 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
         return str;
     },
 
-    // 24225.js#4127, 24.17.11
-    patchSetCurrentlyFocusedInteractable(str: string) {
-        let index = str.indexOf('.setCurrentlyFocusedInteractable=(');
+    // 49851.js#4083, 27.0.4
+    patchSetCurrentFocus(str: string) {
+        let index = str.indexOf('.setCurrentFocus=(');
         if (index < 0) {
             return false;
         }
 
         index = str.indexOf('{', index) + 1;
-        str = str.substring(0, index) + codeSetCurrentlyFocusedInteractable + str.substring(index);
+        str = PatcherUtils.insertAt(str, index, 'e && BxEvent.dispatch(window, BxEvent.NAVIGATION_FOCUS_CHANGED, { element: e });');
         return str;
     },
 
@@ -956,16 +966,170 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
 
         str = str.replace(text, text + 'return;');
         return str;
+    },
+
+    changeNotificationsSubscription(str: string) {
+        let text = ';buildSubscriptionQueryParamsForNotifications(';
+        let index = str.indexOf(text);
+        if (index < 0) {
+            return false;
+        }
+
+        index += text.length;
+        // Get parameter name
+        const subsVar = str[index];
+
+        // Find index after {
+        index = str.indexOf('{', index) + 1;
+        const blockFeatures = getGlobalPref(GlobalPref.BLOCK_FEATURES);
+        const filters = [];
+        if (blockFeatures.includes(BlockFeature.NOTIFICATIONS_INVITES)) {
+            filters.push('GameInvite', 'PartyInvite');
+        }
+
+        if (blockFeatures.includes(BlockFeature.FRIENDS)) {
+            filters.push('Follower');
+        }
+
+        if (blockFeatures.includes(BlockFeature.NOTIFICATIONS_ACHIEVEMENTS)) {
+            filters.push('AchievementUnlock');
+        }
+
+        const newCode = `
+let subs = ${subsVar};
+subs = subs.filter(val => !${JSON.stringify(filters)}.includes(val));
+${subsVar} = subs;
+`;
+        str = PatcherUtils.insertAt(str, index, newCode);
+        return str;
+    },
+
+    exposeReactCreateComponent(str: string) {
+        let index = str.indexOf('.prototype.isReactComponent={}');
+
+        index > -1 && (index = PatcherUtils.indexOf(str, '.createElement=', index));
+        if (index < 0) {
+            return false;
+        }
+
+        const newCode = 'window.BX_EXPOSED.reactCreateElement=';
+        str = PatcherUtils.insertAt(str, index - 1, newCode);
+
+        return str;
+    },
+
+    // 27.0.6-hotfix.1, 73704.js
+    gameCardCustomIcons(str: string) {
+        let initialIndex = str.indexOf('const{supportedInputIcons:');
+        if (initialIndex < 0) {
+            return false;
+        }
+
+        const returnIndex = PatcherUtils.lastIndexOf(str, 'return ', str.indexOf('SupportedInputsBadge'));
+        if (returnIndex < 0) {
+            return false;
+        }
+
+        // Find function's parameter
+        const arrowIndex = PatcherUtils.lastIndexOf(str, '=>{', initialIndex, 300);
+        if (arrowIndex < 0) {
+            return false;
+        }
+
+        const paramVar = PatcherUtils.getVariableNameBefore(str, arrowIndex);
+
+        // Find supportedInputIcons and title var names
+        const supportedInputIconsVar = PatcherUtils.getVariableNameAfter(str, PatcherUtils.indexOf(str, 'supportedInputIcons:', initialIndex, 100, true));
+
+        if (!paramVar || !supportedInputIconsVar) {
+            return false;
+        }
+
+        const newCode = renderString(codeGameCardIcons, {
+            param: paramVar,
+            supportedInputIcons: supportedInputIconsVar,
+        });
+
+        str = PatcherUtils.insertAt(str, returnIndex, newCode);
+        return str;
+    },
+
+    /*
+    // 27.0.6-hotfix.1, 28444.js
+    gameCardPassTitle(str: string) {
+        // Pass gameTitle info to gameCardCustomIcons()
+        let index = str.indexOf('=["productId","showInputBadges","ownershipBadgeType"');
+        index > -1 && (index = PatcherUtils.indexOf(str, ',gameTitle:', index, 500, true));
+        if (index < 0) {
+            return false;
+        }
+
+        const gameTitleVar = PatcherUtils.getVariableNameAfter(str, index);
+        if (!gameTitleVar) {
+            return false;
+        }
+
+        index = PatcherUtils.indexOf(str, 'return', index);
+        index = PatcherUtils.indexOf(str, 'productId:', index);
+        if (index < 0) {
+            return false;
+        }
+
+        const newCode = `gameTitle: ${gameTitleVar},`;
+        str = PatcherUtils.insertAt(str, index, newCode);
+        return str;
+    },
+    */
+
+    // 27.0.6-hotfix.1, 78831.js
+    setImageQuality(str: string) {
+        let index = str.indexOf('const{size:{width:');
+        index > -1 && (index = PatcherUtils.indexOf(str, '=new URLSearchParams', index, 500));
+        if (index < 0) {
+            return false;
+        }
+
+        const paramVar = PatcherUtils.getVariableNameBefore(str, index);
+        if (!paramVar) {
+            return false;
+        }
+
+        // Find "return" keyword
+        index = PatcherUtils.indexOf(str, 'return', index, 200);
+
+        const newCode = `${paramVar}.set('q', ${getGlobalPref(GlobalPref.UI_IMAGE_QUALITY)});`;
+        str = PatcherUtils.insertAt(str, index, newCode);
+
+        return str;
+    },
+
+    setBackgroundImageQuality(str: string) {
+        let index = str.indexOf('}?w=${');
+        index > -1 && (index = PatcherUtils.indexOf(str, '}', index + 1, 10, true));
+
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, `&q=${getGlobalPref(GlobalPref.UI_IMAGE_QUALITY)}`);
+        return str;
     }
 };
 
 let PATCH_ORDERS = PatcherUtils.filterPatches([
-    ...(AppInterface && getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
+    ...(AppInterface && getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
         'enableNativeMkb',
-        'exposeInputSink',
         'disableAbsoluteMouse',
     ] : []),
 
+    'exposeReactCreateComponent',
+    'gameCardCustomIcons',
+    // 'gameCardPassTitle',
+
+    ...(getGlobalPref(GlobalPref.UI_IMAGE_QUALITY) < 90 ? [
+        'setImageQuality',
+    ] : []),
+
     'modifyPreloadedState',
 
     'optimizeGameSlugGenerator',
@@ -974,7 +1138,6 @@ let PATCH_ORDERS = PatcherUtils.filterPatches([
     'patchRequestInfoCrash',
 
     'disableStreamGate',
-    'overrideSettings',
     'broadcastPollingMode',
     'patchGamepadPolling',
 
@@ -991,16 +1154,16 @@ let PATCH_ORDERS = PatcherUtils.filterPatches([
 
     'supportLocalCoOp',
     'overrideStorageGetSettings',
-    getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && 'patchSetCurrentlyFocusedInteractable',
+    getGlobalPref(GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME) && 'patchSetCurrentFocus',
 
-    getPref<UiLayout>(PrefKey.UI_LAYOUT) !== UiLayout.DEFAULT && 'websiteLayout',
-    getPref(PrefKey.GAME_FORTNITE_FORCE_CONSOLE) && 'forceFortniteConsole',
+    getGlobalPref(GlobalPref.UI_LAYOUT) !== UiLayout.DEFAULT && 'websiteLayout',
+    getGlobalPref(GlobalPref.GAME_FORTNITE_FORCE_CONSOLE) && 'forceFortniteConsole',
 
     ...(STATES.userAgent.capabilities.touch ? [
         'disableTouchContextMenu',
     ] : []),
 
-    ...(getPref(PrefKey.BLOCK_TRACKING) ? [
+    ...(getGlobalPref(GlobalPref.BLOCK_TRACKING) ? [
         'disableAiTrack',
         'disableTelemetry',
 
@@ -1010,7 +1173,7 @@ let PATCH_ORDERS = PatcherUtils.filterPatches([
         'disableTelemetryProvider',
     ] : []),
 
-    ...(getPref(PrefKey.REMOTE_PLAY_ENABLED) ? [
+    ...(getGlobalPref(GlobalPref.REMOTE_PLAY_ENABLED) ? [
         'remotePlayKeepAlive',
         'remotePlayDirectConnectUrl',
         'remotePlayDisableAchievementToast',
@@ -1025,17 +1188,27 @@ let PATCH_ORDERS = PatcherUtils.filterPatches([
     ] : []),
 ]);
 
+const hideSections = getGlobalPref(GlobalPref.UI_HIDE_SECTIONS);
 let HOME_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
-    getPref<UiSection>(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS) && 'ignorePlayWithFriendsSection',
-    getPref<UiSection>(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.ALL_GAMES) && 'ignoreAllGamesSection',
-    STATES.browser.capabilities.touch && getPref<UiSection>(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.TOUCH) && 'ignorePlayWithTouchSection',
-    (getPref<UiSection>(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.NATIVE_MKB) || getPref<UiSection>(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.MOST_POPULAR)) && 'ignoreSiglSections',
+    hideSections.includes(UiSection.NEWS) && 'ignoreNewsSection',
+    hideSections.includes(UiSection.FRIENDS) && 'ignorePlayWithFriendsSection',
+    hideSections.includes(UiSection.ALL_GAMES) && 'ignoreAllGamesSection',
+    STATES.browser.capabilities.touch && hideSections.includes(UiSection.TOUCH) && 'ignorePlayWithTouchSection',
+    hideSections.some(value => [UiSection.NATIVE_MKB, UiSection.MOST_POPULAR].includes(value)) && 'ignoreSiglSections',
+
+    ...(getGlobalPref(GlobalPref.UI_IMAGE_QUALITY) < 90 ? [
+        'setBackgroundImageQuality',
+    ] : []),
+
+    ...(blockSomeNotifications() ? [
+        'changeNotificationsSubscription',
+    ] : []),
 ]);
 
 // Only when playing
-// TODO: check this
-// @ts-ignore
 let STREAM_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
+    'exposeInputChannel',
+
     'patchXcloudTitleInfo',
     'disableGamepadDisconnectedScreen',
     'patchStreamHud',
@@ -1046,41 +1219,41 @@ let STREAM_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
     // 'exposeEventTarget',
 
     // Patch volume control for normal stream
-    getPref(PrefKey.AUDIO_VOLUME_CONTROL_ENABLED) && !getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'patchAudioMediaStream',
+    getGlobalPref(GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED) && !getGlobalPref(GlobalPref.STREAM_COMBINE_SOURCES) && 'patchAudioMediaStream',
     // Patch volume control for combined audio+video stream
-    getPref(PrefKey.AUDIO_VOLUME_CONTROL_ENABLED) && getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'patchCombinedAudioVideoMediaStream',
+    getGlobalPref(GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED) && getGlobalPref(GlobalPref.STREAM_COMBINE_SOURCES) && 'patchCombinedAudioVideoMediaStream',
 
     // Skip feedback dialog
-    getPref(PrefKey.UI_DISABLE_FEEDBACK_DIALOG) && 'skipFeedbackDialog',
+    getGlobalPref(GlobalPref.UI_DISABLE_FEEDBACK_DIALOG) && 'skipFeedbackDialog',
 
     ...(STATES.userAgent.capabilities.touch ? [
-        getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL && 'patchShowSensorControls',
-        getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL && 'exposeTouchLayoutManager',
-        (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF || getPref(PrefKey.TOUCH_CONTROLLER_AUTO_OFF)) && 'disableTakRenderer',
-        getPref<TouchControllerDefaultOpacity>(PrefKey.TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
-        'patchBabylonRendererClass',
+        getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL && 'patchShowSensorControls',
+        getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL && 'exposeTouchLayoutManager',
+        (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF || getGlobalPref(GlobalPref.TOUCH_CONTROLLER_AUTO_OFF)) && 'disableTakRenderer',
+        getGlobalPref(GlobalPref.TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
+        (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.OFF && (getGlobalPref(GlobalPref.MKB_ENABLED) || getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON)) && 'patchBabylonRendererClass',
     ] : []),
 
     BX_FLAGS.EnableXcloudLogging && 'enableConsoleLogging',
 
     'patchPollGamepads',
 
-    getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'streamCombineSources',
+    getGlobalPref(GlobalPref.STREAM_COMBINE_SOURCES) && 'streamCombineSources',
 
-    ...(getPref(PrefKey.REMOTE_PLAY_ENABLED) ? [
+    ...(getGlobalPref(GlobalPref.REMOTE_PLAY_ENABLED) ? [
         'patchRemotePlayMkb',
         'remotePlayConnectMode',
     ] : []),
 
     // Native MKB
-    ...(AppInterface && getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
+    ...(AppInterface && getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
         'patchMouseAndKeyboardEnabled',
         'disableNativeRequestPointerLock',
     ] : []),
 ]);
 
 let PRODUCT_DETAIL_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
-    AppInterface && 'detectProductDetailPage',
+    'detectProductDetailPage',
 ]);
 
 const ALL_PATCHES = [...PATCH_ORDERS, ...HOME_PAGE_PATCH_ORDERS, ...STREAM_PAGE_PATCH_ORDERS, ...PRODUCT_DETAIL_PAGE_PATCH_ORDERS];
@@ -1205,6 +1378,7 @@ export class Patcher {
 
             // Apply patched functions
             if (modified) {
+                BX_FLAGS.Debug && console.time(LOG_TAG);
                 try {
                     chunkData[chunkId] = eval(patchedFuncStr);
                 } catch (e: unknown) {
@@ -1212,6 +1386,7 @@ export class Patcher {
                         BxLogger.error(LOG_TAG, 'Error', appliedPatches, e.message, patchedFuncStr);
                     }
                 }
+                BX_FLAGS.Debug && console.timeEnd(LOG_TAG);
             }
 
             // Save to cache

src/modules/patcher/patches/controller-shortcuts.js

@@ -1,99 +0,0 @@
-if (window.BX_EXPOSED.disableGamepadPolling) {
-    this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(50) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, 50);
-    return;
-}
-
-const currentGamepad = ${gamepadVar};
-
-// Share button on XS controller
-if (currentGamepad.buttons[17] && currentGamepad.buttons[17].pressed) {
-    window.dispatchEvent(new Event(BxEvent.CAPTURE_SCREENSHOT));
-}
-
-const btnHome = currentGamepad.buttons[16];
-if (btnHome) {
-    if (!this.bxHomeStates) {
-        this.bxHomeStates = {};
-    }
-
-    let intervalMs = 0;
-    let hijack = false;
-
-    if (btnHome.pressed) {
-        hijack = true;
-        intervalMs = 16;
-        this.gamepadIsIdle.set(currentGamepad.index, false);
-
-        if (this.bxHomeStates[currentGamepad.index]) {
-            const lastTimestamp = this.bxHomeStates[currentGamepad.index].timestamp;
-
-            if (currentGamepad.timestamp !== lastTimestamp) {
-                this.bxHomeStates[currentGamepad.index].timestamp = currentGamepad.timestamp;
-
-                const handled = window.BX_EXPOSED.handleControllerShortcut(currentGamepad);
-                if (handled) {
-                    this.bxHomeStates[currentGamepad.index].shortcutPressed += 1;
-                }
-            }
-        } else {
-            // First time pressing > save current timestamp
-            window.BX_EXPOSED.resetControllerShortcut(currentGamepad.index);
-            this.bxHomeStates[currentGamepad.index] = {
-                shortcutPressed: 0,
-                timestamp: currentGamepad.timestamp,
-            };
-        }
-    } else if (this.bxHomeStates[currentGamepad.index]) {
-        hijack = true;
-        const info = structuredClone(this.bxHomeStates[currentGamepad.index]);
-
-        // Home button released
-        this.bxHomeStates[currentGamepad.index] = null;
-
-        if (info.shortcutPressed === 0) {
-            const fakeGamepadMappings = [{
-                GamepadIndex: currentGamepad.index,
-                A: 0,
-                B: 0,
-                X: 0,
-                Y: 0,
-                LeftShoulder: 0,
-                RightShoulder: 0,
-                LeftTrigger: 0,
-                RightTrigger: 0,
-                View: 0,
-                Menu: 0,
-                LeftThumb: 0,
-                RightThumb: 0,
-                DPadUp: 0,
-                DPadDown: 0,
-                DPadLeft: 0,
-                DPadRight: 0,
-                Nexus: 1,
-                LeftThumbXAxis: 0,
-                LeftThumbYAxis: 0,
-                RightThumbXAxis: 0,
-                RightThumbYAxis: 0,
-                PhysicalPhysicality: 0,
-                VirtualPhysicality: 0,
-                Dirty: true,
-                Virtual: false,
-            }];
-
-            const isLongPress = (currentGamepad.timestamp - info.timestamp) >= 500;
-            intervalMs = isLongPress ? 500 : 100;
-
-            this.inputSink.onGamepadInput(performance.now() - intervalMs, fakeGamepadMappings);
-        } else {
-            intervalMs = window.BX_STREAM_SETTINGS.controllerPollingRate;
-        }
-    }
-
-    if (hijack && intervalMs) {
-        // Listen to next button press
-        this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(intervalMs) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, intervalMs);
-
-        // Hijack this button
-        return;
-    }
-}

src/modules/patcher/patches/remote-play-enable.js

@@ -1,2 +0,0 @@
-connectMode: window.BX_REMOTE_PLAY_CONFIG ? "xhome-connect" : "cloud-connect",
-remotePlayServerId: (window.BX_REMOTE_PLAY_CONFIG && window.BX_REMOTE_PLAY_CONFIG.serverId) || '',

src/modules/patcher/patches/remote-play-keep-alive.js

@@ -1,7 +0,0 @@
-const msg = JSON.parse(e);
-if (msg.reason === 'WarningForBeingIdle' && !window.location.pathname.includes('/launch/')) {
-    try {
-        this.sendKeepAlive();
-        return;
-    } catch (ex) { console.log(ex); }
-}

src/modules/patcher/patches/set-currently-focused-interactable.js

@@ -1 +0,0 @@
-e && BxEvent.dispatch(window, BxEvent.NAVIGATION_FOCUS_CHANGED, { element: e });

src/modules/patcher/patches/src/controller-customization.ts

@@ -0,0 +1,167 @@
+import { BxEvent as BxEventNamespace } from "@/utils/bx-event";
+
+// "currentGamepad" variable in poll-gamepad.js
+declare const currentGamepad: Gamepad;
+declare const $xCloudGamepadVar$: XcloudGamepad;
+declare const BxEvent: typeof BxEventNamespace;
+
+// Share button on XS controller
+const shareButtonPressed = currentGamepad.buttons[17]?.pressed;
+let shareButtonHandled = false;
+
+const xCloudGamepad: XcloudGamepad = $xCloudGamepadVar$;
+if (currentGamepad.id in window.BX_STREAM_SETTINGS.controllers) {
+    const controller = window.BX_STREAM_SETTINGS.controllers[currentGamepad.id];
+    if (controller?.customization) {
+        const MIN_RANGE = 0.1;
+
+        const { mapping, ranges } = controller.customization;
+        const pressedButtons: PartialRecord<keyof XcloudGamepad, number> = {};
+        const releasedButtons: PartialRecord<keyof XcloudGamepad, number> = {};
+        let isModified = false;
+
+        // Limit left trigger range
+        if (ranges.LeftTrigger) {
+            const [from, to] = ranges.LeftTrigger;
+            xCloudGamepad.LeftTrigger = xCloudGamepad.LeftTrigger > to ? 1 : xCloudGamepad.LeftTrigger;
+            xCloudGamepad.LeftTrigger = xCloudGamepad.LeftTrigger < from ? 0 : xCloudGamepad.LeftTrigger;
+        }
+
+        // Limit right trigger range
+        if (ranges.RightTrigger) {
+            const [from, to] = ranges.RightTrigger;
+            xCloudGamepad.RightTrigger = xCloudGamepad.RightTrigger > to ? 1 : xCloudGamepad.RightTrigger;
+            xCloudGamepad.RightTrigger = xCloudGamepad.RightTrigger < from ? 0 : xCloudGamepad.RightTrigger;
+        }
+
+        // Limit left stick deadzone
+        if (ranges.LeftThumb) {
+            const [from, to] = ranges.LeftThumb;
+
+            const xAxis = xCloudGamepad.LeftThumbXAxis;
+            const yAxis = xCloudGamepad.LeftThumbYAxis;
+
+            const range = Math.abs(Math.sqrt(xAxis * xAxis + yAxis * yAxis));
+            let newRange = range > to ? 1 : range;
+            newRange = newRange < from ? 0 : newRange;
+
+            if (newRange !== range) {
+                xCloudGamepad.LeftThumbXAxis = xAxis * (newRange / range);
+                xCloudGamepad.LeftThumbYAxis = yAxis * (newRange / range);
+            }
+        }
+
+        // Limit right stick deadzone
+        if (ranges.RightThumb) {
+            const [from, to] = ranges.RightThumb;
+
+            const xAxis = xCloudGamepad.RightThumbXAxis;
+            const yAxis = xCloudGamepad.RightThumbYAxis;
+
+            const range = Math.abs(Math.sqrt(xAxis * xAxis + yAxis * yAxis));
+            let newRange = range > to ? 1 : range;
+            newRange = newRange < from ? 0 : newRange;
+
+            if (newRange !== range) {
+                xCloudGamepad.RightThumbXAxis = xAxis * (newRange / range);
+                xCloudGamepad.RightThumbYAxis = yAxis * (newRange / range);
+            }
+        }
+
+        // Handle the Share button
+        if (shareButtonPressed && 'Share' in mapping) {
+            const targetButton = mapping['Share'];
+            if (typeof targetButton === 'string') {
+                pressedButtons[targetButton] = 1;
+            }
+
+            // Don't send capturing request
+            shareButtonHandled = true;
+            delete mapping['Share'];
+        }
+
+        // Handle other buttons
+        let key: keyof typeof mapping;
+        for (key in mapping) {
+            const mappedKey = mapping[key];
+
+            if (key === 'LeftStickAxes' || key === 'RightStickAxes') {
+                let sourceX: keyof XcloudGamepad;
+                let sourceY: keyof XcloudGamepad;
+                let targetX: keyof XcloudGamepad;
+                let targetY: keyof XcloudGamepad;
+
+                if (key === 'LeftStickAxes') {
+                    sourceX = 'LeftThumbXAxis';
+                    sourceY = 'LeftThumbYAxis';
+                    targetX = 'RightThumbXAxis';
+                    targetY = 'RightThumbYAxis';
+                } else {
+                    sourceX = 'RightThumbXAxis';
+                    sourceY = 'RightThumbYAxis';
+                    targetX = 'LeftThumbXAxis';
+                    targetY = 'LeftThumbYAxis';
+                }
+
+                if (typeof mappedKey === 'string') {
+                    // Calculate moved range
+                    const rangeX = xCloudGamepad[sourceX];
+                    const rangeY = xCloudGamepad[sourceY];
+                    const movedRange = Math.abs(Math.sqrt(rangeX * rangeX + rangeY * rangeY));
+                    const moved = movedRange >= MIN_RANGE;
+
+                    // Swap sticks
+                    if (moved) {
+                        pressedButtons[targetX] = rangeX;
+                        pressedButtons[targetY] = rangeY;
+                    }
+                }
+
+                // Unbind original stick
+                releasedButtons[sourceX] = 0;
+                releasedButtons[sourceY] = 0;
+
+                isModified = true;
+            } else if (typeof mappedKey === 'string') {
+                let pressed = false;
+                let value = 0;
+
+                if (key === 'LeftTrigger' || key === 'RightTrigger') {
+                    // Only set pressed state when pressing pass max range
+                    const currentRange = xCloudGamepad[key];
+                    if (mappedKey === 'LeftTrigger' || mappedKey === 'RightTrigger') {
+                        pressed = currentRange >= MIN_RANGE;
+                        value = currentRange;
+                    } else {
+                        pressed = true;
+                        value = currentRange >= 0.9 ? 1 : 0;
+                    }
+                } else if (xCloudGamepad[key]) {
+                    pressed = true;
+                    value = xCloudGamepad[key] as number;
+                }
+
+                if (pressed) {
+                    // Only copy button value when it's being pressed
+                    pressedButtons[mappedKey] = value;
+                    // Unbind original button
+                    releasedButtons[key] = 0;
+
+                    isModified = true;
+                }
+            } else if (mappedKey === false) {
+                // Disable key
+                pressedButtons[key] = 0;
+
+                isModified = true;
+            }
+        }
+
+        isModified && Object.assign(xCloudGamepad, releasedButtons, pressedButtons);
+    }
+}
+
+// Capture screenshot when the Share button is pressed
+if (shareButtonPressed && !shareButtonHandled) {
+    window.dispatchEvent(new Event(BxEvent.CAPTURE_SCREENSHOT));
+}

src/modules/patcher/patches/src/expose-stream-session.ts

@@ -1,19 +1,23 @@
-window.BX_EXPOSED.streamSession = this;
+import type { MicrophoneState } from "@/modules/shortcuts/microphone-shortcut";
+import { BxEvent as BxEventNamespace } from "@/utils/bx-event";
 
-const orgSetMicrophoneState = this.setMicrophoneState.bind(this);
-this.setMicrophoneState = state => {
+declare const $this$: any;
+declare const BxEvent: typeof BxEventNamespace;
+
+const self = $this$;
+window.BX_EXPOSED.streamSession = self;
+
+// Patch setMicrophoneState()
+const orgSetMicrophoneState = self.setMicrophoneState.bind(self);
+self.setMicrophoneState = (state: MicrophoneState) => {
     orgSetMicrophoneState(state);
-
-    const evt = new Event(BxEvent.MICROPHONE_STATE_CHANGED);
-    evt.microphoneState = state;
-
-    window.dispatchEvent(evt);
+    window.BxEventBus.Stream.emit('microphone.state.changed', { state });
 };
 
 window.dispatchEvent(new Event(BxEvent.STREAM_SESSION_READY));
 
 // Patch updateDimensions() to make native touch work correctly with WebGL2
-let updateDimensionsStr = this.updateDimensions.toString();
+let updateDimensionsStr = self.updateDimensions.toString();
 
 if (updateDimensionsStr.startsWith('function ')) {
     updateDimensionsStr = updateDimensionsStr.substring(9);
@@ -23,7 +27,6 @@ if (updateDimensionsStr.startsWith('function ')) {
 const renderTargetVar = updateDimensionsStr.match(/if\((\w+)\){/)[1];
 
 updateDimensionsStr = updateDimensionsStr.replaceAll(renderTargetVar + '.scroll', 'scroll');
-
 updateDimensionsStr = updateDimensionsStr.replace(`if(${renderTargetVar}){`, `
 if (${renderTargetVar}) {
     const scrollWidth = ${renderTargetVar}.dataset.width ? parseInt(${renderTargetVar}.dataset.width) : ${renderTargetVar}.scrollWidth;

src/modules/patcher/patches/src/game-card-icons.ts

@@ -0,0 +1,12 @@
+declare const $supportedInputIcons$: Array<any>;
+declare const $param$: { productId: string };
+
+const supportedInputIcons = $supportedInputIcons$;
+const { productId } = $param$;
+
+// Remove controller icon
+supportedInputIcons.shift();
+
+if (window.BX_EXPOSED.localCoOpManager!.isSupported(productId)) {
+    supportedInputIcons.push(window.BX_EXPOSED.createReactLocalCoOpIcon);
+}

src/modules/patcher/patches/src/local-co-op-enable.ts

@@ -1,9 +1,14 @@
+import { BxLogger as OrgBxLogger } from "@/utils/bx-logger";
+
+declare const BxLogger: typeof OrgBxLogger;
+declare const $this$: any;
+
 // Save the original onGamepadChanged() and onGamepadInput()
-this.orgOnGamepadChanged = this.onGamepadChanged;
-this.orgOnGamepadInput = this.onGamepadInput;
+$this$.orgOnGamepadChanged = $this$.onGamepadChanged;
+$this$.orgOnGamepadInput = $this$.onGamepadInput;
 
 let match;
-let onGamepadChangedStr = this.onGamepadChanged.toString();
+let onGamepadChangedStr = $this$.onGamepadChanged.toString();
 
 // Fix problem with Safari
 if (onGamepadChangedStr.startsWith('function ')) {
@@ -11,9 +16,9 @@ if (onGamepadChangedStr.startsWith('function ')) {
 }
 
 onGamepadChangedStr = onGamepadChangedStr.replaceAll('0', 'arguments[1]');
-eval(`this.patchedOnGamepadChanged = function ${onGamepadChangedStr}`);
+eval(`$this$.patchedOnGamepadChanged = function ${onGamepadChangedStr}`);
 
-let onGamepadInputStr = this.onGamepadInput.toString();
+let onGamepadInputStr = $this$.onGamepadInput.toString();
 // Fix problem with Safari
 if (onGamepadInputStr.startsWith('function ')) {
     onGamepadInputStr = onGamepadInputStr.substring(9);
@@ -22,19 +27,19 @@ if (onGamepadInputStr.startsWith('function ')) {
 match = onGamepadInputStr.match(/(\w+\.GamepadIndex)/);
 if (match) {
     const gamepadIndexVar = match[0];
-    onGamepadInputStr = onGamepadInputStr.replace('this.gamepadStates.get(', `this.gamepadStates.get(${gamepadIndexVar},`);
-    eval(`this.patchedOnGamepadInput = function ${onGamepadInputStr}`);
+    onGamepadInputStr = onGamepadInputStr.replace('$this$.gamepadStates.get(', `$this$.gamepadStates.get(${gamepadIndexVar},`);
+    eval(`$this$.patchedOnGamepadInput = function ${onGamepadInputStr}`);
     BxLogger.info('supportLocalCoOp', '✅ Successfully patched local co-op support');
 } else {
     BxLogger.error('supportLocalCoOp', '❌ Unable to patch local co-op support');
 }
 
 // Add method to switch between patched and original methods
-this.toggleLocalCoOp = enable => {
+$this$.toggleLocalCoOp = (enable: boolean) => {
     BxLogger.info('toggleLocalCoOp', enable ? 'Enabled' : 'Disabled');
 
-    this.onGamepadChanged = enable ? this.patchedOnGamepadChanged : this.orgOnGamepadChanged;
-    this.onGamepadInput = enable ? this.patchedOnGamepadInput : this.orgOnGamepadInput;
+    $this$.onGamepadChanged = enable ? $this$.patchedOnGamepadChanged : $this$.orgOnGamepadChanged;
+    $this$.onGamepadInput = enable ? $this$.patchedOnGamepadInput : $this$.orgOnGamepadInput;
 
     // Reconnect all gamepads
     const gamepads = window.navigator.getGamepads();
@@ -48,10 +53,13 @@ this.toggleLocalCoOp = enable => {
             continue;
         }
 
+        // Don't show toast
+        (gamepad as any)._noToast = true;
+
         window.dispatchEvent(new GamepadEvent('gamepaddisconnected', { gamepad }));
         window.dispatchEvent(new GamepadEvent('gamepadconnected', { gamepad }));
     }
 };
 
 // Expose this method
-window.BX_EXPOSED.toggleLocalCoOp = this.toggleLocalCoOp.bind(this);
+window.BX_EXPOSED.toggleLocalCoOp = $this$.toggleLocalCoOp.bind(this);

src/modules/patcher/patches/src/poll-gamepad.ts

@@ -0,0 +1,98 @@
+type GamepadManager = {
+    pollGamepadssetTimeoutTimerID: number;
+    intervalWorker: any;
+    pollGamepads(pollGamepads: any, arg1: number): any;
+    gamepadIsIdle: any;
+    inputSink: any;
+    inputConfiguration: any;
+
+    bxHomeStates: any;
+};
+
+declare const $gamepadVar$: Gamepad;
+declare const $this$: GamepadManager;
+
+const self = $this$;
+if (window.BX_EXPOSED.disableGamepadPolling) {
+    self.inputConfiguration.useIntervalWorkerThreadForInput && self.intervalWorker ? self.intervalWorker.scheduleTimer(50) : self.pollGamepadssetTimeoutTimerID = window.setTimeout(self.pollGamepads, 50);
+    // @ts-ignore
+    return;
+}
+
+const currentGamepad = $gamepadVar$;
+
+const btnHome = currentGamepad.buttons[16];
+// Controller shortcuts
+if (btnHome) {
+    if (!self.bxHomeStates) {
+        self.bxHomeStates = {};
+    }
+
+    let intervalMs = 0;
+    let hijack = false;
+
+    if (btnHome.pressed) {
+        hijack = true;
+        intervalMs = 16;
+        self.gamepadIsIdle.set(currentGamepad.index, false);
+
+        if (self.bxHomeStates[currentGamepad.index]) {
+            const lastTimestamp = self.bxHomeStates[currentGamepad.index].timestamp;
+
+            if (currentGamepad.timestamp !== lastTimestamp) {
+                self.bxHomeStates[currentGamepad.index].timestamp = currentGamepad.timestamp;
+
+                const handled = window.BX_EXPOSED.handleControllerShortcut(currentGamepad);
+                if (handled) {
+                    self.bxHomeStates[currentGamepad.index].shortcutPressed += 1;
+                }
+            }
+        } else {
+            // First time pressing > save current timestamp
+            window.BX_EXPOSED.resetControllerShortcut(currentGamepad.index);
+            self.bxHomeStates[currentGamepad.index] = {
+                shortcutPressed: 0,
+                timestamp: currentGamepad.timestamp,
+            };
+        }
+    } else if (self.bxHomeStates[currentGamepad.index]) {
+        hijack = true;
+        const info = structuredClone(self.bxHomeStates[currentGamepad.index]);
+
+        // Home button released
+        self.bxHomeStates[currentGamepad.index] = null;
+
+        if (info.shortcutPressed === 0) {
+            const fakeGamepadMappings: XcloudGamepad[] = [{
+                GamepadIndex: currentGamepad.index,
+                A: 0, B: 0, X: 0, Y: 0,
+                LeftShoulder: 0, RightShoulder: 0,
+                LeftTrigger: 0, RightTrigger: 0,
+                View: 0, Menu: 0,
+                LeftThumb: 0, RightThumb: 0,
+                DPadUp: 0, DPadDown: 0, DPadLeft: 0, DPadRight: 0,
+                Nexus: 1,
+                LeftThumbXAxis: 0, LeftThumbYAxis: 0,
+                RightThumbXAxis: 0, RightThumbYAxis: 0,
+                PhysicalPhysicality: 0, VirtualPhysicality: 0,
+                Dirty: true, Virtual: false,
+            }];
+
+            const isLongPress = (currentGamepad.timestamp - info.timestamp) >= 500;
+            intervalMs = isLongPress ? 500 : 100;
+
+            self.inputSink.onGamepadInput(performance.now() - intervalMs, fakeGamepadMappings);
+        } else {
+            intervalMs = window.BX_STREAM_SETTINGS.controllerPollingRate;
+        }
+    }
+
+    if (hijack && intervalMs) {
+        // Listen to next button press
+        self.inputConfiguration.useIntervalWorkerThreadForInput && self.intervalWorker ? self.intervalWorker.scheduleTimer(intervalMs) : self.pollGamepadssetTimeoutTimerID = setTimeout(self.pollGamepads, intervalMs);
+
+        // Hijack this button
+        // @ts-ignore
+        return;
+    }
+}

src/modules/patcher/patches/src/remote-play-keep-alive.ts

@@ -0,0 +1,11 @@
+declare const $this$: any;
+declare const e: string;
+
+try {
+    const msg = JSON.parse(e);
+    if (msg.reason === 'WarningForBeingIdle' && !window.location.pathname.includes('/launch/')) {
+        $this$.sendKeepAlive();
+        // @ts-ignore
+        return;
+    }
+} catch (ex) { console.log(ex); }

src/modules/patcher/patches/src/vibration-adjust.ts

@@ -0,0 +1,26 @@
+declare const e: {
+    gamepad: Gamepad;
+    repeat: number;
+    leftMotorPercent: number;
+    rightMotorPercent: number;
+    leftTriggerMotorPercent: number;
+    rightTriggerMotorPercent: number;
+};
+
+if (e?.gamepad?.connected) {
+    const gamepadSettings = window.BX_STREAM_SETTINGS.controllers[e.gamepad.id];
+    if (gamepadSettings?.customization) {
+        const intensity = gamepadSettings.customization.vibrationIntensity;
+
+        if (intensity <= 0) {
+            e.repeat = 0;
+            // @ts-ignore
+            return;
+        } else if (intensity < 1) {
+            e.leftMotorPercent *= intensity;
+            e.rightMotorPercent *= intensity;
+            e.leftTriggerMotorPercent *= intensity;
+            e.rightTriggerMotorPercent *= intensity;
+        }
+    }
+}

src/modules/patcher/patches/vibration-adjust.js

@@ -1,16 +0,0 @@
-const gamepad = e.gamepad;
-if (gamepad?.connected) {
-    const gamepadSettings = window.BX_STREAM_SETTINGS.controllers[gamepad.id];
-    if (gamepadSettings) {
-        const intensity = gamepadSettings.vibrationIntensity;
-
-        if (intensity === 0) {
-            return void(e.repeat = 0);
-        } else if (intensity < 1) {
-            e.leftMotorPercent *= intensity;
-            e.rightMotorPercent *= intensity;
-            e.leftTriggerMotorPercent *= intensity;
-            e.rightTriggerMotorPercent *= intensity;
-        }
-    }
-}

src/modules/player/webgl2-player.ts

@@ -1,8 +1,8 @@
 import vertClarityBoost from "./shaders/clarity_boost.vert" with { type: "text" };
 import fsClarityBoost from "./shaders/clarity_boost.fs" with { type: "text" };
 import { BxLogger } from "@/utils/bx-logger";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { StreamPref } from "@/enums/pref-keys";
+import { getStreamPref } from "@/utils/pref-utils";
 
 
 export class WebGL2Player {
@@ -143,13 +143,13 @@ export class WebGL2Player {
     }
 
     private setupShaders() {
-        BxLogger.info(this.LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
+        BxLogger.info(this.LOG_TAG, 'Setting up', getStreamPref(StreamPref.VIDEO_POWER_PREFERENCE));
 
         const gl = this.$canvas.getContext('webgl2', {
             isBx: true,
             antialias: true,
             alpha: false,
-            powerPreference: getPref(PrefKey.VIDEO_POWER_PREFERENCE),
+            powerPreference: getStreamPref(StreamPref.VIDEO_POWER_PREFERENCE),
         }) as WebGL2RenderingContext;
         this.gl = gl;
 

src/modules/remote-play-manager.ts

@@ -5,8 +5,8 @@ import { t } from "@utils/translation";
 import { localRedirect } from "@modules/ui/ui";
 import { BxLogger } from "@utils/bx-logger";
 import { HeaderSection } from "./ui/header";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref } from "@/enums/pref-keys";
+import { getGlobalPref, setGlobalPref } from "@/utils/pref-utils";
 import { RemotePlayDialog } from "./ui/dialog/remote-play-dialog";
 
 export const enum RemotePlayConsoleState {
@@ -37,7 +37,7 @@ export class RemotePlayManager {
     private static instance: RemotePlayManager | null | undefined;
     public static getInstance(): typeof RemotePlayManager['instance'] {
         if (typeof RemotePlayManager.instance === 'undefined') {
-            if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
+            if (getGlobalPref(GlobalPref.REMOTE_PLAY_ENABLED)) {
                 RemotePlayManager.instance = new RemotePlayManager();
             } else {
                 RemotePlayManager.instance = null;
@@ -186,7 +186,7 @@ export class RemotePlayManager {
 
     play(serverId: string, resolution?: string) {
         if (resolution) {
-            setPref(PrefKey.REMOTE_PLAY_STREAM_RESOLUTION, resolution);
+            setGlobalPref(GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION, resolution, 'ui');
         }
 
         STATES.remotePlay.config = {
@@ -221,7 +221,7 @@ export class RemotePlayManager {
     }
 
     static detect() {
-        if (!getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
+        if (!getGlobalPref(GlobalPref.REMOTE_PLAY_ENABLED)) {
             return;
         }
 

src/modules/settings-manager.ts

@@ -0,0 +1,350 @@
+import { GlobalPref, StreamPref, type AnyPref } from "@/enums/pref-keys";
+import { limitVideoPlayerFps, onChangeVideoPlayerType, updateVideoPlayer } from "./stream/stream-settings-utils";
+import { StreamStats } from "./stream/stream-stats";
+import { SoundShortcut } from "./shortcuts/sound-shortcut";
+import { STATES } from "@/utils/global";
+import { getGamePref, getStreamPref, hasGamePref, isStreamPref, setGameIdPref, STORAGE } from "@/utils/pref-utils";
+import { BxExposed } from "@/utils/bx-exposed";
+import { StreamSettings } from "@/utils/stream-settings";
+import { NativeMkbHandler } from "./mkb/native-mkb-handler";
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { SettingElement } from "@/utils/setting-element";
+import { CE } from "@/utils/html";
+import { t } from "@/utils/translation";
+import { BxSelectElement } from "@/web-components/bx-select";
+import { XboxApi } from "@/utils/xbox-api";
+import { EmulatedMkbHandler } from "./mkb/mkb-handler";
+
+type SettingType = Partial<{
+    hidden: true;
+    onChange: () => void;
+    alwaysTriggerOnChange: boolean;  // Always trigger onChange(), not just when playing
+    $element: HTMLElement;
+}>;
+
+export class SettingsManager {
+    private static instance: SettingsManager;
+    public static getInstance = () => SettingsManager.instance ?? (SettingsManager.instance = new SettingsManager());
+
+    private $streamSettingsSelection!: HTMLElement;
+    private $tips!: HTMLElement;
+    private playingGameId: number = -1;
+    private targetGameId: number = -1;
+
+    // @ts-ignore
+    private SETTINGS: Record<GlobalPref | StreamPref, SettingType> = {
+        // [GlobalPref.VERSION_LATEST]: { hidden: true },
+        // [GlobalPref.VERSION_LAST_CHECK]: { hidden: true },
+        // [GlobalPref.VERSION_CURRENT]: { hidden: true },
+
+        [StreamPref.LOCAL_CO_OP_ENABLED]: {
+            onChange: () => {
+                BxExposed.toggleLocalCoOp(getStreamPref(StreamPref.LOCAL_CO_OP_ENABLED));
+            },
+        },
+        [StreamPref.DEVICE_VIBRATION_MODE]: {
+            onChange: StreamSettings.refreshControllerSettings,
+        },
+        [StreamPref.DEVICE_VIBRATION_INTENSITY]: {
+            onChange: StreamSettings.refreshControllerSettings,
+        },
+        [StreamPref.CONTROLLER_POLLING_RATE]: {
+            onChange: StreamSettings.refreshControllerSettings,
+        },
+        [StreamPref.CONTROLLER_SETTINGS]: {
+            onChange: StreamSettings.refreshControllerSettings,
+        },
+        [StreamPref.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY]: {
+            onChange: () => {
+                const value = getStreamPref(StreamPref.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY);
+                NativeMkbHandler.getInstance()?.setHorizontalScrollMultiplier(value / 100);
+            },
+        },
+        [StreamPref.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY]: {
+            onChange: () => {
+                const value = getStreamPref(StreamPref.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY);
+                NativeMkbHandler.getInstance()?.setVerticalScrollMultiplier(value / 100);
+            },
+        },
+        [StreamPref.VIDEO_PLAYER_TYPE]: {
+            onChange: () => {
+                onChangeVideoPlayerType();
+
+                if (STATES.isPlaying) {
+                    updateVideoPlayer();
+                }
+            },
+            alwaysTriggerOnChange: true,
+        },
+        [StreamPref.VIDEO_POWER_PREFERENCE]: {
+            onChange: () => {
+                const streamPlayer = STATES.currentStream.streamPlayer;
+                if (!streamPlayer) {
+                    return;
+                }
+
+                streamPlayer.reloadPlayer();
+                updateVideoPlayer();
+            },
+        },
+        [StreamPref.VIDEO_PROCESSING]: {
+            onChange: updateVideoPlayer,
+        },
+        [StreamPref.VIDEO_SHARPNESS]: {
+            onChange: updateVideoPlayer,
+        },
+        [StreamPref.VIDEO_MAX_FPS]: {
+            onChange: () => {
+                const value = getStreamPref(StreamPref.VIDEO_MAX_FPS);
+                limitVideoPlayerFps(value);
+            },
+        },
+        [StreamPref.VIDEO_RATIO]: {
+            onChange: updateVideoPlayer,
+        },
+        [StreamPref.VIDEO_BRIGHTNESS]: {
+            onChange: updateVideoPlayer,
+        },
+        [StreamPref.VIDEO_CONTRAST]: {
+            onChange: updateVideoPlayer,
+        },
+        [StreamPref.VIDEO_SATURATION]: {
+            onChange: updateVideoPlayer,
+        },
+        [StreamPref.VIDEO_POSITION]: {
+            onChange: updateVideoPlayer,
+        },
+        [StreamPref.AUDIO_VOLUME]: {
+            onChange: () => {
+                const value = getStreamPref(StreamPref.AUDIO_VOLUME);
+                SoundShortcut.setGainNodeVolume(value);
+            },
+        },
+
+        [StreamPref.STATS_ITEMS]: {
+            onChange: StreamStats.refreshStyles,
+        },
+        [StreamPref.STATS_QUICK_GLANCE_ENABLED]: {
+            onChange: () => {
+                const value = getStreamPref(StreamPref.STATS_QUICK_GLANCE_ENABLED);
+                const streamStats = StreamStats.getInstance();
+                value ? streamStats.quickGlanceSetup() : streamStats.quickGlanceStop();
+            },
+        },
+        [StreamPref.STATS_POSITION]: {
+            onChange: StreamStats.refreshStyles,
+        },
+        [StreamPref.STATS_TEXT_SIZE]: {
+            onChange: StreamStats.refreshStyles,
+        },
+        [StreamPref.STATS_OPACITY_ALL]: {
+            onChange: StreamStats.refreshStyles,
+        },
+        [StreamPref.STATS_OPACITY_BACKGROUND]: {
+            onChange: StreamStats.refreshStyles,
+        },
+        [StreamPref.STATS_CONDITIONAL_FORMATTING]: {
+            onChange: StreamStats.refreshStyles,
+        },
+
+        [StreamPref.MKB_P1_MAPPING_PRESET_ID]: {
+            onChange: StreamSettings.refreshMkbSettings,
+        },
+
+        [StreamPref.MKB_P1_SLOT]: {
+            onChange: () => {
+                EmulatedMkbHandler.getInstance()?.resetXcloudGamepads();
+            },
+        },
+
+        [StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID]: {
+            onChange: StreamSettings.refreshKeyboardShortcuts,
+        },
+    };
+
+    constructor() {
+        // Trigger onChange event when a setting value is modified
+        BxEventBus.Stream.on('setting.changed', data => {
+            if (isStreamPref(data.settingKey)) {
+                this.updateStreamElement(data.settingKey);
+            }
+        });
+
+        BxEventBus.Stream.on('gameSettings.switched', ({ id }) => {
+            this.switchGameSettings(id);
+        });
+
+        this.renderStreamSettingsSelection();
+    }
+
+    private updateStreamElement(key: StreamPref, onChanges?: Set<SettingType['onChange']>) {
+        const info = this.SETTINGS[key];
+
+        // Add event
+        if (info.onChange && (STATES.isPlaying || info.alwaysTriggerOnChange)) {
+            if (onChanges) {
+                // Save to a Set()
+                onChanges.add(info.onChange);
+            } else {
+                // Trigger onChange()
+                info.onChange();
+            }
+        }
+
+        // Update element
+        const $elm = info.$element;
+        if (!$elm) {
+            return;
+        }
+
+        const value = getGamePref(this.targetGameId, key, true)!;
+
+        if ('setValue' in $elm) {
+            ($elm as any).setValue(value);
+        } else {
+            ($elm as HTMLInputElement).value = value.toString();
+        }
+
+        this.updateDataset($elm, key as StreamPref);
+    }
+
+    private switchGameSettings(id: number) {
+        setGameIdPref(id);
+
+        // Don't re-apply settings if the game is the same
+        if (this.targetGameId === id) {
+            return;
+        }
+
+        // Re-apply all stream settings
+        const onChanges: Set<SettingType['onChange']> = new Set();
+        const oldGameId = this.targetGameId;
+        this.targetGameId = id;
+
+        let key: AnyPref;
+        for (key in this.SETTINGS) {
+            if (!isStreamPref(key)) {
+                continue;
+            }
+
+            const oldValue = getGamePref(oldGameId, key, true, true);
+            const newValue = getGamePref(this.targetGameId, key, true, true);
+
+            if (oldValue === newValue) {
+                continue;
+            }
+
+            // Only apply Stream settings
+            this.updateStreamElement(key, onChanges);
+        }
+
+        // BxLogger.warning('Settings Manager', onChanges);
+        onChanges.forEach(onChange => {
+            onChange && onChange();
+        });
+
+        // Toggle tips if not playing anything
+        this.$tips.classList.toggle('bx-gone', id < 0);
+    }
+
+    setElement(pref: AnyPref, $elm: HTMLElement) {
+        // Set empty object
+        if (!this.SETTINGS[pref]) {
+            this.SETTINGS[pref] = {};
+        }
+
+        this.updateDataset($elm, pref as StreamPref);
+        this.SETTINGS[pref].$element = $elm;
+    }
+
+    getElement(pref: AnyPref, params?: any) {
+        // Set empty object
+        if (!this.SETTINGS[pref]) {
+            this.SETTINGS[pref] = {};
+        }
+
+        let $elm = this.SETTINGS[pref].$element;
+
+        if (!$elm) {
+            // Render element
+            $elm = SettingElement.fromPref(pref, null, params)!;
+            this.SETTINGS[pref].$element = $elm;
+        }
+
+        this.updateDataset($elm, pref as StreamPref);
+        return $elm;
+    }
+
+    hasElement(pref: AnyPref) {
+        return !!this.SETTINGS[pref]?.$element;
+    }
+
+    private updateDataset($elm: HTMLElement, pref: StreamPref) {
+        if (this.targetGameId === this.playingGameId && hasGamePref(this.playingGameId, pref)) {
+            $elm.dataset.override = 'true';
+        } else {
+            delete $elm.dataset['override'];
+        }
+    }
+
+    private renderStreamSettingsSelection() {
+        this.$tips = CE('p', { class: 'bx-gone' }, `⇐ Ｑ ⟶: ${t('reset-highlighted-setting')}`);
+
+        const $select = BxSelectElement.create(CE('select', false,
+            CE('optgroup', { label: t('settings-for') },
+                CE('option', { value: -1 }, t('all-games')),
+            ),
+        ), true);
+        $select.addEventListener('input', e => {
+            const id = parseInt($select.value);
+            // $btn.disabled = id < 0;
+            BxEventBus.Stream.emit('gameSettings.switched', { id });
+        });
+
+        this.$streamSettingsSelection = CE('div', {
+                class: 'bx-stream-settings-selection bx-gone',
+                _nearby: { orientation: 'vertical' },
+            },
+            CE('div', false, $select ),
+            this.$tips,
+        );
+
+        BxEventBus.Stream.on('xboxTitleId.changed', async ({ id }) => {
+            this.playingGameId = id;
+
+            // Only switch to game settings if it's not empty
+            const gameSettings = STORAGE.Stream.getGameSettings(id);
+            const customSettings = gameSettings && !gameSettings.isEmpty();
+            const selectedId = customSettings ? id : -1;
+
+            setGameIdPref(selectedId);
+
+            // Remove every options except the first one (All games)
+            const $optGroup = $select.querySelector('optgroup')!;
+            while ($optGroup.childElementCount > 1) {
+                $optGroup.lastElementChild?.remove();
+            }
+
+            // Add current game to the selection
+            if (id >= 0) {
+                const title = id === 0 ? 'Xbox' : await XboxApi.getProductTitle(id);
+                $optGroup.appendChild(CE('option', {
+                    value: id,
+                }, title));
+            }
+
+            // Activate custom settings
+
+            $select.value = selectedId.toString();
+            BxEventBus.Stream.emit('gameSettings.switched', { id: selectedId });
+        });
+    }
+
+    getStreamSettingsSelection() {
+        return this.$streamSettingsSelection;
+    }
+
+    getTargetGameId() {
+        return this.targetGameId;
+    }
+}

src/modules/shortcuts/renderer-shortcut.ts

@@ -1,21 +1,21 @@
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { StreamPref } from "@/enums/pref-keys";
 import { limitVideoPlayerFps } from "../stream/stream-settings-utils";
-import { BxEvent } from "@/utils/bx-event";
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { getStreamPref } from "@/utils/pref-utils";
 
 export class RendererShortcut {
     static toggleVisibility() {
         const $mediaContainer = document.querySelector('#game-stream div[data-testid="media-container"]');
         if (!$mediaContainer) {
-            BxEvent.dispatch(window, BxEvent.VIDEO_VISIBILITY_CHANGED, { isShowing: true });
+            BxEventBus.Stream.emit('video.visibility.changed', { isVisible: true });
             return;
         }
 
         $mediaContainer.classList.toggle('bx-gone');
-        const isShowing = !$mediaContainer.classList.contains('bx-gone');
+        const isVisible = !$mediaContainer.classList.contains('bx-gone');
 
         // Switch FPS
-        limitVideoPlayerFps(isShowing ? getPref(PrefKey.VIDEO_MAX_FPS) : 0);
-        BxEvent.dispatch(window, BxEvent.VIDEO_VISIBILITY_CHANGED, { isShowing });
+        limitVideoPlayerFps(isVisible ? getStreamPref(StreamPref.VIDEO_MAX_FPS) : 0);
+        BxEventBus.Stream.emit('video.visibility.changed', { isVisible });
     }
 }

src/modules/shortcuts/shortcut-actions.ts

@@ -1,7 +1,7 @@
-import { PrefKey } from "@/enums/pref-keys";
+import { GlobalPref } from "@/enums/pref-keys";
 import { ShortcutAction } from "@/enums/shortcut-actions";
 import { AppInterface, STATES } from "@/utils/global";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { getGlobalPref } from "@/utils/pref-utils";
 import { t } from "@/utils/translation";
 
 type ShortcutActions = {
@@ -16,6 +16,17 @@ export const SHORTCUT_ACTIONS: ShortcutActions = {
         [ShortcutAction.BETTER_XCLOUD_SETTINGS_SHOW]: [t('settings'), t('show')],
     },
 
+    // MKB
+    ...(STATES.browser.capabilities.mkb ? {
+        [t('mouse-and-keyboard')]: {
+            [ShortcutAction.MKB_TOGGLE]: [t('toggle')],
+        },
+    } : {}),
+
+    [t('controller')]: {
+        [ShortcutAction.CONTROLLER_XBOX_BUTTON_PRESS]: [t('button-xbox'), t('press')],
+    },
+
     // Device
     ...(!!AppInterface ? {
         [t('device')]: {
@@ -35,7 +46,7 @@ export const SHORTCUT_ACTIONS: ShortcutActions = {
 
         [ShortcutAction.STREAM_SOUND_TOGGLE]: [t('sound'), t('toggle')],
 
-        ...(getPref(PrefKey.AUDIO_VOLUME_CONTROL_ENABLED) ? {
+        ...(getGlobalPref(GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED) ? {
             [ShortcutAction.STREAM_VOLUME_INC]: [t('volume'), t('increase')],
             [ShortcutAction.STREAM_VOLUME_DEC]: [t('volume'), t('decrease')],
         } : {}),
@@ -45,13 +56,6 @@ export const SHORTCUT_ACTIONS: ShortcutActions = {
         [ShortcutAction.STREAM_MICROPHONE_TOGGLE]: [t('microphone'), t('toggle')],
     },
 
-    // MKB
-    ...(STATES.browser.capabilities.mkb ? {
-        [t('mouse-and-keyboard')]: {
-            [ShortcutAction.MKB_TOGGLE]: [t('toggle')],
-        },
-    } : {}),
-
     // Other
     [t('other')]: {
         [ShortcutAction.TRUE_ACHIEVEMENTS_OPEN]: [t('true-achievements'), t('show')],

src/modules/shortcuts/sound-shortcut.ts

@@ -2,9 +2,10 @@ import { t } from "@utils/translation";
 import { STATES } from "@utils/global";
 import { Toast } from "@utils/toast";
 import { ceilToNearest, floorToNearest } from "@/utils/utils";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
-import { BxEvent } from "@/utils/bx-event";
+import { GlobalPref, StreamPref } from "@/enums/pref-keys";
+import { getGlobalPref } from "@/utils/pref-utils";
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { getStreamPref, setStreamPref } from "@/utils/pref-utils";
 
 export enum SpeakerState {
     ENABLED,
@@ -13,11 +14,11 @@ export enum SpeakerState {
 
 export class SoundShortcut {
     static adjustGainNodeVolume(amount: number): number {
-        if (!getPref(PrefKey.AUDIO_VOLUME_CONTROL_ENABLED)) {
+        if (!getGlobalPref(GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED)) {
             return 0;
         }
 
-        const currentValue = getPref<AudioVolume>(PrefKey.AUDIO_VOLUME);
+        const currentValue = getStreamPref(StreamPref.AUDIO_VOLUME);
         let nearestValue: number;
 
         if (amount > 0) {  // Increase
@@ -33,7 +34,7 @@ export class SoundShortcut {
             newValue = currentValue + amount;
         }
 
-        newValue = setPref(PrefKey.AUDIO_VOLUME, newValue, true);
+        newValue = setStreamPref(StreamPref.AUDIO_VOLUME, newValue, 'direct');
         SoundShortcut.setGainNodeVolume(newValue);
 
         // Show toast
@@ -47,14 +48,14 @@ export class SoundShortcut {
     }
 
     static muteUnmute() {
-        if (getPref(PrefKey.AUDIO_VOLUME_CONTROL_ENABLED) && STATES.currentStream.audioGainNode) {
+        if (getGlobalPref(GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED) && STATES.currentStream.audioGainNode) {
             const gainValue = STATES.currentStream.audioGainNode.gain.value;
-            const settingValue = getPref<AudioVolume>(PrefKey.AUDIO_VOLUME);
+            const settingValue = getStreamPref(StreamPref.AUDIO_VOLUME);
 
             let targetValue: number;
             if (settingValue === 0) {  // settingValue is 0 => set to 100
                 targetValue = 100;
-                setPref(PrefKey.AUDIO_VOLUME, targetValue, true);
+                setStreamPref(StreamPref.AUDIO_VOLUME, targetValue, 'direct');
             } else if (gainValue === 0) {  // is being muted => set to settingValue
                 targetValue = settingValue;
             } else {  // not being muted => mute
@@ -71,8 +72,8 @@ export class SoundShortcut {
             SoundShortcut.setGainNodeVolume(targetValue);
             Toast.show(`${t('stream')} ❯ ${t('volume')}`, status, { instant: true });
 
-            BxEvent.dispatch(window, BxEvent.SPEAKER_STATE_CHANGED, {
-                speakerState: targetValue === 0 ? SpeakerState.MUTED : SpeakerState.ENABLED,
+            BxEventBus.Stream.emit('speaker.state.changed', {
+                state: targetValue === 0 ? SpeakerState.MUTED : SpeakerState.ENABLED,
             });
             return;
         }
@@ -84,9 +85,9 @@ export class SoundShortcut {
             const status = $media.muted ? t('muted') : t('unmuted');
             Toast.show(`${t('stream')} ❯ ${t('volume')}`, status, { instant: true });
 
-            BxEvent.dispatch(window, BxEvent.SPEAKER_STATE_CHANGED, {
-                speakerState: $media.muted ? SpeakerState.MUTED : SpeakerState.ENABLED,
-            })
+            BxEventBus.Stream.emit('speaker.state.changed', {
+                state: $media.muted ? SpeakerState.MUTED : SpeakerState.ENABLED,
+            });
         }
     }
 }

src/modules/shortcuts/virtual-controller-shortcut.ts

@@ -0,0 +1,21 @@
+import { generateVirtualControllerMapping } from "@/utils/gamepad";
+
+export class VirtualControllerShortcut {
+    static pressXboxButton(): void {
+        const streamSession = window.BX_EXPOSED.streamSession;
+        if (!streamSession) {
+            return;
+        }
+
+        const released = generateVirtualControllerMapping(0);
+        const pressed = generateVirtualControllerMapping(0, {
+            Nexus: 1,
+            VirtualPhysicality: 1024, // Home
+        });
+
+        streamSession.onVirtualGamepadInput('systemMenu', performance.now(), [pressed]);
+        setTimeout(() => {
+            streamSession.onVirtualGamepadInput('systemMenu', performance.now(), [released]);
+        }, 100);
+    }
+}

src/modules/stream-player.ts

@@ -4,18 +4,12 @@ import { CE } from "@/utils/html";
 import { WebGL2Player } from "./player/webgl2-player";
 import { ScreenshotManager } from "@/utils/screenshot-manager";
 import { STATES } from "@/utils/global";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref, StreamPref } from "@/enums/pref-keys";
+import { getGlobalPref } from "@/utils/pref-utils";
 import { BX_FLAGS } from "@/utils/bx-flags";
-import { StreamPlayerType, StreamVideoProcessing, VideoPosition, VideoRatio } from "@/enums/pref-values";
+import { StreamPlayerType, StreamVideoProcessing, VideoPosition } from "@/enums/pref-values";
+import { getStreamPref } from "@/utils/pref-utils";
 
-export type StreamPlayerOptions = Partial<{
-    processing: string,
-    sharpness: number,
-    saturation: number,
-    contrast: number,
-    brightness: number,
-}>;
 
 export class StreamPlayer {
     private $video: HTMLVideoElement;
@@ -44,7 +38,7 @@ export class StreamPlayer {
 
         const $fragment = document.createDocumentFragment();
 
-        this.$videoCss = CE<HTMLStyleElement>('style', { id: 'bx-video-css' });
+        this.$videoCss = CE('style', { id: 'bx-video-css' });
         $fragment.appendChild(this.$videoCss);
 
         // Setup SVG filters
@@ -60,7 +54,7 @@ export class StreamPlayer {
                     id: 'bx-filter-usm-matrix',
                     order: '3',
                     xmlns: 'http://www.w3.org/2000/svg',
-                })),
+                }) as unknown as SVGFEConvolveMatrixElement),
             ),
         );
         $fragment.appendChild($svg);
@@ -98,7 +92,7 @@ export class StreamPlayer {
     }
 
     private resizePlayer() {
-        const PREF_RATIO = getPref<VideoRatio>(PrefKey.VIDEO_RATIO);
+        const PREF_RATIO = getStreamPref(StreamPref.VIDEO_RATIO);
         const $video = this.$video;
         const isNativeTouchGame = STATES.currentStream.titleInfo?.details.hasNativeTouchSupport;
 
@@ -142,7 +136,7 @@ export class StreamPlayer {
 
             // Set position
             const $parent = $video.parentElement!;
-            const position = getPref<VideoPosition>(PrefKey.VIDEO_POSITION);
+            const position = getStreamPref(StreamPref.VIDEO_POSITION);
             $parent.style.removeProperty('padding-top');
 
             $parent.dataset.position = position;
@@ -269,7 +263,7 @@ export class StreamPlayer {
             }
 
             // Apply video filters to screenshots
-            if (isFullVersion() && getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
+            if (isFullVersion() && getGlobalPref(GlobalPref.SCREENSHOT_APPLY_FILTERS)) {
                 ScreenshotManager.getInstance().updateCanvasFilters(filters);
             }
 

src/modules/stream/stream-badges.ts

@@ -5,7 +5,7 @@ import { BxEvent } from "@utils/bx-event";
 import { CE, createSvgIcon, humanFileSize } from "@utils/html";
 import { STATES } from "@utils/global";
 import { BxLogger } from "@/utils/bx-logger";
-import { BxIcon } from "@/utils/bx-icon";
+import { BxIcon, type BxIconRaw } from "@/utils/bx-icon";
 import { GuideMenuTab } from "../ui/guide-menu";
 import { StreamStatsCollector } from "@/utils/stream-stats-collector";
 import { StreamStat } from "@/enums/pref-values";
@@ -14,7 +14,7 @@ import { StreamStat } from "@/enums/pref-values";
 type StreamBadgeInfo = {
     name: string,
     $element?: HTMLElement,
-    icon: typeof BxIcon,
+    icon: BxIconRaw,
     color: string,
 };
 
@@ -253,8 +253,9 @@ export class StreamBadges {
         const allAudioCodecs: Record<string, RTCBasicStat> = {};
         let audioCodecId;
 
-        const allCandidates: Record<string, string> = {};
-        let candidateId;
+        const allCandidatePairs: Record<string, string> = {};
+        const allRemoteCandidates: Record<string, string> = {};
+        let candidatePairId;
 
         stats.forEach((stat: RTCBasicStat) => {
             if (stat.type === 'codec') {
@@ -275,10 +276,12 @@ export class StreamBadges {
                 } else if (stat.kind === 'audio') {
                     audioCodecId = stat.codecId;
                 }
-            } else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
-                candidateId = stat.remoteCandidateId;
+            } else if (stat.type === 'transport' && (stat as unknown as RTCTransportStats).selectedCandidatePairId) {
+                candidatePairId = (stat as unknown as RTCTransportStats).selectedCandidatePairId;
+            } else if (stat.type === 'candidate-pair') {
+                allCandidatePairs[stat.id] = (stat as unknown as RTCIceCandidatePairStats).remoteCandidateId;
             } else if (stat.type === 'remote-candidate') {
-                allCandidates[stat.id] = stat.address;
+                allRemoteCandidates[stat.id] = stat.address;
             }
         });
 
@@ -336,12 +339,12 @@ export class StreamBadges {
         }
 
         // Get server type
-        if (candidateId) {
-            BxLogger.info('candidate', candidateId, allCandidates);
+        if (candidatePairId) {
+            BxLogger.info('candidate', candidatePairId, allCandidatePairs);
 
             // Server + Region
             let text = '';
-            const isIpv6 = allCandidates[candidateId].includes(':');
+            const isIpv6 = allRemoteCandidates[allCandidatePairs[candidatePairId]].includes(':');
 
             const server = this.serverInfo.server;
             if (server && server.region) {

src/modules/stream/stream-settings-utils.ts

@@ -1,24 +1,24 @@
 import { STATES } from "@utils/global";
 import { UserAgent } from "@utils/user-agent";
-import type { StreamPlayerOptions } from "../stream-player";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
+import { StreamPref } from "@/enums/pref-keys";
 import { StreamVideoProcessing, StreamPlayerType } from "@/enums/pref-values";
-import { escapeCssSelector } from "@/utils/html";
+import { getStreamPref, setStreamPref } from "@/utils/pref-utils";
+import { SettingsManager } from "../settings-manager";
 
 export function onChangeVideoPlayerType() {
-    const playerType = getPref<StreamPlayerType>(PrefKey.VIDEO_PLAYER_TYPE);
-    const $videoProcessing = document.getElementById(`bx_setting_${escapeCssSelector(PrefKey.VIDEO_PROCESSING)}`) as HTMLSelectElement;
-    const $videoSharpness = document.getElementById(`bx_setting_${escapeCssSelector(PrefKey.VIDEO_SHARPNESS)}`) as HTMLElement;
-    const $videoPowerPreference = document.getElementById(`bx_setting_${escapeCssSelector(PrefKey.VIDEO_POWER_PREFERENCE)}`) as HTMLElement;
-    const $videoMaxFps = document.getElementById(`bx_setting_${escapeCssSelector(PrefKey.VIDEO_MAX_FPS)}`) as HTMLElement;
-
-    if (!$videoProcessing) {
+    const playerType = getStreamPref(StreamPref.VIDEO_PLAYER_TYPE);
+    const settingsManager = SettingsManager.getInstance();
+    if (!settingsManager.hasElement(StreamPref.VIDEO_PROCESSING)) {
         return;
     }
 
     let isDisabled = false;
 
+    const $videoProcessing = settingsManager.getElement(StreamPref.VIDEO_PROCESSING) as HTMLSelectElement;
+    const $videoSharpness = settingsManager.getElement(StreamPref.VIDEO_SHARPNESS);
+    const $videoPowerPreference = settingsManager.getElement(StreamPref.VIDEO_POWER_PREFERENCE);
+    const $videoMaxFps = settingsManager.getElement(StreamPref.VIDEO_MAX_FPS);
+
     const $optCas = $videoProcessing.querySelector<HTMLOptionElement>(`option[value=${StreamVideoProcessing.CAS}]`);
 
     if (playerType === StreamPlayerType.WEBGL2) {
@@ -26,7 +26,7 @@ export function onChangeVideoPlayerType() {
     } else {
         // Only allow USM when player type is Video
         $videoProcessing.value = StreamVideoProcessing.USM;
-        setPref(PrefKey.VIDEO_PROCESSING, StreamVideoProcessing.USM);
+        setStreamPref(StreamPref.VIDEO_PROCESSING, StreamVideoProcessing.USM, 'direct');
 
         $optCas && ($optCas.disabled = true);
 
@@ -41,8 +41,6 @@ export function onChangeVideoPlayerType() {
     // Hide Power Preference setting if renderer isn't WebGL2
     $videoPowerPreference.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
     $videoMaxFps.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
-
-    updateVideoPlayer();
 }
 
 
@@ -58,17 +56,17 @@ export function updateVideoPlayer() {
         return;
     }
 
-    limitVideoPlayerFps(getPref(PrefKey.VIDEO_MAX_FPS));
+    limitVideoPlayerFps(getStreamPref(StreamPref.VIDEO_MAX_FPS));
 
     const options = {
-        processing: getPref(PrefKey.VIDEO_PROCESSING),
-        sharpness: getPref(PrefKey.VIDEO_SHARPNESS),
-        saturation: getPref(PrefKey.VIDEO_SATURATION),
-        contrast: getPref(PrefKey.VIDEO_CONTRAST),
-        brightness: getPref(PrefKey.VIDEO_BRIGHTNESS),
+        processing: getStreamPref(StreamPref.VIDEO_PROCESSING),
+        sharpness: getStreamPref(StreamPref.VIDEO_SHARPNESS),
+        saturation: getStreamPref(StreamPref.VIDEO_SATURATION),
+        contrast: getStreamPref(StreamPref.VIDEO_CONTRAST),
+        brightness: getStreamPref(StreamPref.VIDEO_BRIGHTNESS),
     } satisfies StreamPlayerOptions;
 
-    streamPlayer.setPlayerType(getPref(PrefKey.VIDEO_PLAYER_TYPE));
+    streamPlayer.setPlayerType(getStreamPref(StreamPref.VIDEO_PLAYER_TYPE));
     streamPlayer.updateOptions(options);
     streamPlayer.refreshPlayer();
 }

src/modules/stream/stream-stats.ts

@@ -1,12 +1,12 @@
-import { BxEvent } from "@utils/bx-event"
 import { CE } from "@utils/html"
 import { t } from "@utils/translation"
 import { STATES } from "@utils/global"
-import { PrefKey } from "@/enums/pref-keys"
-import { getPref } from "@/utils/settings-storages/global-settings-storage"
-import { StreamStatsCollector, type StreamStatGrade } from "@/utils/stream-stats-collector"
+import { StreamPref } from "@/enums/pref-keys"
+import { StreamStatsCollector } from "@/utils/stream-stats-collector"
 import { BxLogger } from "@/utils/bx-logger"
 import { StreamStat } from "@/enums/pref-values"
+import { BxEventBus } from "@/utils/bx-event-bus"
+import { getStreamPref } from "@/utils/pref-utils";
 
 
 export class StreamStats {
@@ -164,7 +164,7 @@ export class StreamStats {
             return;
         }
 
-        const PREF_STATS_CONDITIONAL_FORMATTING = getPref(PrefKey.STATS_CONDITIONAL_FORMATTING);
+        const PREF_STATS_CONDITIONAL_FORMATTING = getStreamPref(StreamPref.STATS_CONDITIONAL_FORMATTING);
         let grade: StreamStatGrade = '';
 
         // Collect stats
@@ -192,18 +192,27 @@ export class StreamStats {
     }
 
     refreshStyles() {
-        const PREF_ITEMS = getPref<StreamStat[]>(PrefKey.STATS_ITEMS);
+        const PREF_ITEMS = getStreamPref(StreamPref.STATS_ITEMS);
+        const PREF_OPACITY_BG = getStreamPref(StreamPref.STATS_OPACITY_BACKGROUND);
 
         const $container = this.$container;
         $container.dataset.stats = '[' + PREF_ITEMS.join('][') + ']';
-        $container.dataset.position = getPref(PrefKey.STATS_POSITION);
-        $container.dataset.transparent = getPref(PrefKey.STATS_TRANSPARENT);
-        $container.style.opacity = getPref(PrefKey.STATS_OPACITY) + '%';
-        $container.style.fontSize = getPref(PrefKey.STATS_TEXT_SIZE);
+        $container.dataset.position = getStreamPref(StreamPref.STATS_POSITION);
+
+        if (PREF_OPACITY_BG === 0) {
+            $container.style.removeProperty('background-color');
+            $container.dataset.shadow = 'true';
+        } else {
+            delete $container.dataset.shadow;
+            $container.style.backgroundColor = `rgba(0, 0, 0, ${PREF_OPACITY_BG}%)`;
+        }
+
+        $container.style.opacity = getStreamPref(StreamPref.STATS_OPACITY_ALL) + '%';
+        $container.style.fontSize = getStreamPref(StreamPref.STATS_TEXT_SIZE);
     }
 
     hideSettingsUi() {
-        if (this.isGlancing() && !getPref(PrefKey.STATS_QUICK_GLANCE_ENABLED)) {
+        if (this.isGlancing() && !getStreamPref(StreamPref.STATS_QUICK_GLANCE_ENABLED)) {
             this.stop();
         }
     }
@@ -218,7 +227,7 @@ export class StreamStats {
                 class: `bx-stat-${statKey}`,
                 title: stat.name,
             },
-                CE('label', {}, statKey.toUpperCase()),
+                CE('label', false, statKey.toUpperCase()),
                 stat.$element,
             );
 
@@ -230,9 +239,9 @@ export class StreamStats {
     }
 
     static setupEvents() {
-        window.addEventListener(BxEvent.STREAM_PLAYING, e => {
-            const PREF_STATS_QUICK_GLANCE = getPref(PrefKey.STATS_QUICK_GLANCE_ENABLED);
-            const PREF_STATS_SHOW_WHEN_PLAYING = getPref(PrefKey.STATS_SHOW_WHEN_PLAYING);
+        BxEventBus.Stream.on('state.playing', () => {
+            const PREF_STATS_QUICK_GLANCE = getStreamPref(StreamPref.STATS_QUICK_GLANCE_ENABLED);
+            const PREF_STATS_SHOW_WHEN_PLAYING = getStreamPref(StreamPref.STATS_SHOW_WHEN_PLAYING);
 
             const streamStats = StreamStats.getInstance();
 

src/modules/stream/stream-ui.ts

@@ -1,11 +1,11 @@
 import { STATES } from "@utils/global.ts";
 import { createSvgIcon } from "@utils/html.ts";
-import { BxIcon } from "@utils/bx-icon";
-import { BxEvent } from "@utils/bx-event.ts";
+import { BxIcon, type BxIconRaw } from "@utils/bx-icon";
 import { t } from "@utils/translation.ts";
 import { StreamBadges } from "./stream-badges.ts";
 import { StreamStats } from "./stream-stats.ts";
 import { SettingsDialog } from "../ui/dialog/settings-dialog.ts";
+import { BxEventBus } from "@/utils/bx-event-bus.ts";
 
 
 export class StreamUiHandler {
@@ -15,7 +15,7 @@ export class StreamUiHandler {
     private static $btnHome: HTMLElement | null | undefined;
     private static observer: MutationObserver | undefined;
 
-    private static cloneStreamHudButton($btnOrg: HTMLElement, label: string, svgIcon: typeof BxIcon): HTMLElement | null {
+    private static cloneStreamHudButton($btnOrg: HTMLElement, label: string, svgIcon: BxIconRaw): HTMLElement | null {
         if (!$btnOrg) {
             return null;
         }
@@ -78,7 +78,7 @@ export class StreamUiHandler {
         return $container;
     }
 
-    private static cloneCloseButton($btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any): HTMLElement | null {
+    private static cloneCloseButton($btnOrg: HTMLElement, icon: BxIconRaw, className: string, onChange: any): HTMLElement | null {
         if (!$btnOrg) {
             return null;
         }
@@ -243,7 +243,7 @@ export class StreamUiHandler {
 
                     // Error Page: .PureErrorPage.ErrorScreen
                     if (className.includes('PureErrorPage')) {
-                        BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
+                        BxEventBus.Stream.emit('state.error', {});
                         return;
                     }
 

src/modules/touch-controller.ts

@@ -4,10 +4,11 @@ import { BxEvent } from "@utils/bx-event";
 import { NATIVE_FETCH } from "@utils/bx-flags";
 import { t } from "@utils/translation";
 import { BxLogger } from "@utils/bx-logger";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref } from "@/enums/pref-keys";
+import { getGlobalPref } from "@/utils/pref-utils";
 import { TouchControllerStyleCustom, TouchControllerStyleStandard } from "@/enums/pref-values";
 import { GhPagesUtils } from "@/utils/gh-pages";
+import { BxEventBus } from "@/utils/bx-event-bus";
 
 const LOG_TAG = 'TouchController';
 
@@ -268,7 +269,7 @@ export class TouchController {
 
     static setup() {
         // Function for testing touch control
-        (window as any).testTouchLayout = (layout: any) => {
+        window.testTouchLayout = (layout: any) => {
             const { touchLayoutManager } = window.BX_EXPOSED;
 
             touchLayoutManager && touchLayoutManager.changeLayoutForScope({
@@ -288,12 +289,12 @@ export class TouchController {
 
         TouchController.#$style = $style;
 
-        const PREF_STYLE_STANDARD = getPref<TouchControllerStyleStandard>(PrefKey.TOUCH_CONTROLLER_STYLE_STANDARD);
-        const PREF_STYLE_CUSTOM = getPref<TouchControllerStyleCustom>(PrefKey.TOUCH_CONTROLLER_STYLE_CUSTOM);
+        const PREF_STYLE_STANDARD = getGlobalPref(GlobalPref.TOUCH_CONTROLLER_STYLE_STANDARD);
+        const PREF_STYLE_CUSTOM = getGlobalPref(GlobalPref.TOUCH_CONTROLLER_STYLE_CUSTOM);
 
-        window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
-            const dataChannel = (e as any).dataChannel;
-            if (!dataChannel || dataChannel.label !== 'message') {
+        BxEventBus.Stream.on('dataChannelCreated', payload => {
+            const { dataChannel } = payload;
+            if (dataChannel?.label !== 'message') {
                 return;
             }
 

src/modules/ui/dialog/navigation-dialog.ts

@@ -1,11 +1,13 @@
+import { isFullVersion } from "@macros/build" with { type: "macro" };
+
 import { GamepadKey } from "@/enums/gamepad";
-import { PrefKey } from "@/enums/pref-keys";
 import { VIRTUAL_GAMEPAD_ID } from "@/modules/mkb/mkb-handler";
 import { BxEvent } from "@/utils/bx-event";
+import { BxEventBus } from "@/utils/bx-event-bus";
 import { BxLogger } from "@/utils/bx-logger";
-import { CE, isElementVisible } from "@/utils/html";
+import { calculateSelectBoxes, CE, isElementVisible } from "@/utils/html";
 import { setNearby } from "@/utils/navigation-utils";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { BxNumberStepper } from "@/web-components/bx-number-stepper";
 
 export enum NavigationDirection {
     UP = 1,
@@ -20,10 +22,10 @@ export type NavigationNearbyElements = Partial<{
 
     focus: NavigationElement | (() => boolean),
     loop: ((direction: NavigationDirection) => boolean),
-    [NavigationDirection.UP]: NavigationElement | (() => void) | 'previous' | 'next',
-    [NavigationDirection.DOWN]: NavigationElement | (() => void) | 'previous' | 'next',
-    [NavigationDirection.LEFT]: NavigationElement | (() => void) | 'previous' | 'next',
-    [NavigationDirection.RIGHT]: NavigationElement | (() => void) | 'previous' | 'next',
+    [NavigationDirection.UP]: NavigationElement,
+    [NavigationDirection.DOWN]: NavigationElement,
+    [NavigationDirection.LEFT]: NavigationElement,
+    [NavigationDirection.RIGHT]: NavigationElement,
 }>;
 
 export interface NavigationElement extends HTMLElement {
@@ -106,16 +108,18 @@ export class NavigationDialogManager {
 
     private static readonly GAMEPAD_POLLING_INTERVAL = 50;
     private static readonly GAMEPAD_KEYS = [
-        GamepadKey.UP,
-        GamepadKey.DOWN,
-        GamepadKey.LEFT,
-        GamepadKey.RIGHT,
-        GamepadKey.A,
-        GamepadKey.B,
-        GamepadKey.LB,
-        GamepadKey.RB,
-        GamepadKey.LT,
-        GamepadKey.RT,
+        GamepadKey.A, GamepadKey.B,
+        GamepadKey.X, GamepadKey.Y,
+
+        GamepadKey.UP, GamepadKey.RIGHT,
+        GamepadKey.DOWN, GamepadKey.LEFT,
+
+        GamepadKey.LB, GamepadKey.RB,
+        GamepadKey.LT, GamepadKey.RT,
+
+        GamepadKey.L3, GamepadKey.R3,
+
+        GamepadKey.SELECT, GamepadKey.START,
     ];
 
     private static readonly GAMEPAD_DIRECTION_MAP = {
@@ -171,61 +175,21 @@ export class NavigationDialogManager {
         window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, e => this.hide());
 
         // Calculate minimum width of controller-friendly <select> elements
-        if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
-            const observer = new MutationObserver(mutationList => {
-                if (mutationList.length === 0 || mutationList[0].addedNodes.length === 0) {
-                    return;
-                }
-
-                // Get dialog
-                const $dialog = mutationList[0].addedNodes[0];
-                if (!$dialog || !($dialog instanceof HTMLElement)) {
-                    return;
-                }
-
-                // Find un-calculated <select> elements
-                this.calculateSelectBoxes($dialog);
-            });
-            observer.observe(this.$container, { childList: true });
-        }
-    }
-
-    calculateSelectBoxes($root: HTMLElement) {
-        const selects = Array.from($root.querySelectorAll('.bx-select:not([data-calculated]) select'));
-
-        for (const $select of selects) {
-            const $parent = $select.parentElement! as HTMLElement;
-
-            // Don't apply to select.bx-full-width elements
-            if ($parent.classList.contains('bx-full-width')) {
-                $parent.dataset.calculated = 'true';
+        const observer = new MutationObserver(mutationList => {
+            if (mutationList.length === 0 || mutationList[0].addedNodes.length === 0) {
                 return;
             }
 
-            const rect = $select.getBoundingClientRect();
-
-            let $label: HTMLElement;
-            let width = Math.ceil(rect.width);
-            if (!width) {
+            // Get dialog
+            const $dialog = mutationList[0].addedNodes[0];
+            if (!$dialog || !($dialog instanceof HTMLElement)) {
                 return;
             }
 
-            if (($select as HTMLSelectElement).multiple) {
-                $label = $parent.querySelector<HTMLElement>('.bx-select-value')!;
-                width += 20;  // Add checkbox's width
-            } else {
-                $label = $parent.querySelector<HTMLElement>('div')!;
-            }
-
-            // Reduce width if it has <optgroup>
-            if ($select.querySelector('optgroup')) {
-                width -= 15;
-            }
-
-            // Set min-width
-            $label.style.minWidth = width + 'px';
-            $parent.dataset.calculated = 'true';
-        };
+            // Find un-calculated <select> elements
+            calculateSelectBoxes($dialog);
+        });
+        observer.observe(this.$container, { childList: true });
     }
 
     private updateActiveInput(input: 'keyboard' | 'gamepad' | 'mouse') {
@@ -368,7 +332,7 @@ export class NavigationDialogManager {
                         }
 
                         this.clearGamepadHoldingInterval();
-                    }, 200);
+                    }, 100);
                 }
                 continue;
             }
@@ -417,8 +381,13 @@ export class NavigationDialogManager {
         if (document.activeElement instanceof HTMLInputElement && document.activeElement.type === 'range') {
             const $range = document.activeElement;
             if (direction === NavigationDirection.LEFT || direction === NavigationDirection.RIGHT) {
-                $range.value = (parseInt($range.value) + parseInt($range.step) * (direction === NavigationDirection.LEFT ? -1 : 1)).toString();
-                $range.dispatchEvent(new InputEvent('input'));
+                const $numberStepper = $range.closest('.bx-number-stepper') as BxNumberStepper;
+                if ($numberStepper) {
+                    BxNumberStepper.change.call($numberStepper, direction === NavigationDirection.LEFT ? 'dec' : 'inc');
+                } else {
+                    $range.value = (parseInt($range.value) + parseInt($range.step) * (direction === NavigationDirection.LEFT ? -1 : 1)).toString();
+                    $range.dispatchEvent(new InputEvent('input'));
+                }
                 handled = true;
             }
         }
@@ -439,10 +408,10 @@ export class NavigationDialogManager {
     show(dialog: NavigationDialog, configs={}, clearStack=false) {
         this.clearGamepadHoldingInterval();
 
-        BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_SHOWN);
+        BxEventBus.Script.emit('dialog.shown', {});
 
         // Stop xCloud's navigation polling
-        (window as any).BX_EXPOSED.disableGamepadPolling = true;
+        window.BX_EXPOSED.disableGamepadPolling = true;
 
         // Lock scroll bar
         document.body.classList.add('bx-no-scroll');
@@ -475,11 +444,14 @@ export class NavigationDialogManager {
 
     hide() {
         this.clearGamepadHoldingInterval();
+        if (!this.isShowing()) {
+            return;
+        }
 
         // Unlock scroll bar
         document.body.classList.remove('bx-no-scroll');
 
-        BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_DISMISSED);
+        BxEventBus.Script.emit('dialog.dismissed', {});
 
         // Hide content
         this.$overlay.classList.add('bx-gone');
@@ -504,7 +476,7 @@ export class NavigationDialogManager {
         this.unmountCurrentDialog();
 
         // Enable xCloud's navigation polling
-        (window as any).BX_EXPOSED.disableGamepadPolling = false;
+        window.BX_EXPOSED.disableGamepadPolling = false;
 
         // Show the last dialog in dialogs stack
         if (this.dialogsStack.length) {
@@ -575,6 +547,16 @@ export class NavigationDialogManager {
         const nearby = ($target as NavigationElement).nearby || {};
         const orientation = this.getOrientation($target)!;
 
+        if (nearby[NavigationDirection.UP] && direction === NavigationDirection.UP) {
+            return nearby[NavigationDirection.UP];
+        } else if (nearby[NavigationDirection.DOWN] && direction === NavigationDirection.DOWN) {
+            return nearby[NavigationDirection.DOWN];
+        } else if (nearby[NavigationDirection.LEFT] && direction === NavigationDirection.LEFT) {
+            return nearby[NavigationDirection.LEFT];
+        } else if (nearby[NavigationDirection.RIGHT] && direction === NavigationDirection.RIGHT) {
+            return nearby[NavigationDirection.RIGHT];
+        }
+
         // @ts-ignore
         let siblingProperty = (NavigationDialogManager.SIBLING_PROPERTY_MAP[orientation])[direction];
         if (siblingProperty) {
@@ -661,7 +643,9 @@ export class NavigationDialogManager {
     private startGamepadPolling() {
         this.stopGamepadPolling();
 
-        this.gamepadPollingIntervalId = window.setInterval(this.pollGamepad, NavigationDialogManager.GAMEPAD_POLLING_INTERVAL);
+        if (isFullVersion()) {
+            this.gamepadPollingIntervalId = window.setInterval(this.pollGamepad, NavigationDialogManager.GAMEPAD_POLLING_INTERVAL);
+        }
     }
 
     private stopGamepadPolling() {

src/modules/ui/dialog/profile-manger/base-profile-manager-dialog.ts

@@ -5,6 +5,7 @@ import { t } from "@/utils/translation";
 import type { AllPresets, PresetRecord } from "@/types/presets";
 import type { BasePresetsTable } from "@/utils/local-db/base-presets-table";
 import { BxSelectElement } from "@/web-components/bx-select";
+import { BxEvent } from "@/utils/bx-event";
 
 export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends NavigationDialog {
     $container!: HTMLElement;
@@ -12,17 +13,17 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
     private title: string;
     protected presetsDb: BasePresetsTable<T>;
     protected allPresets!: AllPresets<T>;
-    protected currentPresetId: number = 0;
+    protected currentPresetId: number | null = null;
+    protected activatedPresetId: number | null = null;
 
     private $presets!: HTMLSelectElement;
     private $header!: HTMLElement;
+    private $defaultNote!: HTMLElement;
     protected $content!: HTMLElement;
 
     private $btnRename!: HTMLButtonElement;
     private $btnDelete!: HTMLButtonElement;
 
-    protected abstract readonly BLANK_PRESET_DATA: T['data'];
-
     constructor(title: string, presetsDb: BasePresetsTable<T>) {
         super();
 
@@ -31,20 +32,24 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
     }
 
     protected abstract switchPreset(id: number): void;
+    async renderSummary(presetId: number): Promise<HTMLElement | DocumentFragment | null> {
+        return null;
+    }
 
     protected updateButtonStates() {
-        const isDefaultPreset = this.currentPresetId <= 0;
+        const isDefaultPreset = this.currentPresetId === null || this.currentPresetId <= 0;
         this.$btnRename.disabled = isDefaultPreset;
         this.$btnDelete.disabled = isDefaultPreset;
+        this.$defaultNote.classList.toggle('bx-gone', !isDefaultPreset);
     }
 
     private async renderPresetsList() {
         this.allPresets = await this.presetsDb.getPresets();
-        if (!this.currentPresetId) {
-           this.currentPresetId = this.allPresets.default[0];
+        if (this.currentPresetId === null) {
+            this.currentPresetId = this.allPresets.default[0];
         }
 
-        renderPresetsList<T>(this.$presets, this.allPresets, this.currentPresetId);
+        renderPresetsList<T>(this.$presets, this.allPresets, this.activatedPresetId, { selectedIndicator: true });
     }
 
     private promptNewName(action: string,value='') {
@@ -61,10 +66,12 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
     };
 
     private async renderDialog() {
-        this.$presets = CE<HTMLSelectElement>('select', { tabindex: -1 });
+        this.$presets = CE('select', {
+            class: 'bx-full-width',
+            tabindex: -1,
+        });
 
         const $select = BxSelectElement.create(this.$presets);
-        $select.classList.add('bx-full-width');
         $select.addEventListener('input', e => {
             this.switchPreset(parseInt(($select as HTMLSelectElement).value));
         });
@@ -84,7 +91,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
                 icon: BxIcon.CURSOR_TEXT,
                 style: ButtonStyle.FOCUSABLE,
                 onClick: async () => {
-                    const preset = this.allPresets.data[this.currentPresetId];
+                    const preset = this.allPresets.data[this.currentPresetId!];
 
                     const newName = this.promptNewName(t('rename'), preset.name);
                     if (!newName) {
@@ -109,8 +116,8 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
                         return;
                     }
 
-                    await this.presetsDb.deletePreset(this.currentPresetId);
-                    delete this.allPresets.data[this.currentPresetId];
+                    await this.presetsDb.deletePreset(this.currentPresetId!);
+                    delete this.allPresets.data[this.currentPresetId!];
                     this.currentPresetId = parseInt(Object.keys(this.allPresets.data)[0]);
 
                     await this.refresh();
@@ -121,7 +128,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
             createButton({
                 icon: BxIcon.NEW,
                 title: t('new'),
-                style: ButtonStyle.FOCUSABLE,
+                style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
                 onClick: async (e) => {
                     const newName = this.promptNewName(t('new'));
                     if (!newName) {
@@ -129,7 +136,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
                     }
 
                     // Create new preset selected name
-                    const newId = await this.presetsDb.newPreset(newName, this.BLANK_PRESET_DATA);
+                    const newId = await this.presetsDb.newPreset(newName, this.presetsDb.BLANK_PRESET_DATA);
                     this.currentPresetId = newId;
 
                     await this.refresh();
@@ -140,9 +147,9 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
             createButton({
                 icon: BxIcon.COPY,
                 title: t('copy'),
-                style: ButtonStyle.FOCUSABLE,
+                style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
                 onClick: async (e) => {
-                    const preset = this.allPresets.data[this.currentPresetId];
+                    const preset = this.allPresets.data[this.currentPresetId!];
 
                     const newName = this.promptNewName(t('copy'), `${preset.name} (2)`);
                     if (!newName) {
@@ -161,26 +168,43 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
 
         this.$container = CE('div', { class: 'bx-centered-dialog' },
             CE('div', { class: 'bx-dialog-title' },
-                CE('p', {}, this.title),
+                CE('p', false, this.title),
                 createButton({
                     icon: BxIcon.CLOSE,
                     style: ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR | ButtonStyle.GHOST,
                     onClick: e => this.hide(),
                 }),
             ),
-            $header,
-            CE('div', { class: 'bx-dialog-content bx-hide-scroll-bar' }, this.$content),
+            CE('div', false,
+                $header,
+                this.$defaultNote = CE('div', { class: 'bx-default-preset-note bx-gone' }, t('default-preset-note')),
+            ),
+            CE('div', { class: 'bx-dialog-content' }, this.$content),
         );
     }
 
     async refresh() {
         await this.renderPresetsList();
-        this.switchPreset(this.currentPresetId);
+        this.$presets.value = this.currentPresetId!.toString();
+        BxEvent.dispatch(this.$presets, 'input', { manualTrigger: true });
     }
 
     async onBeforeMount(configs:{ id?: number }={}) {
-        if (configs?.id) {
-            this.currentPresetId = configs.id;
+        await this.renderPresetsList();
+
+        let valid = false;
+        if (typeof configs?.id === 'number') {
+            if (configs.id in this.allPresets.data) {
+                this.currentPresetId = configs.id;
+                this.activatedPresetId = configs.id;
+                valid = true;
+            }
+        }
+
+        // Invalid selected ID => get default ID;
+        if (!valid) {
+            this.currentPresetId = this.allPresets.default[0];
+            this.activatedPresetId = null;
         }
 
         // Select first preset

src/modules/ui/dialog/profile-manger/controller-customizations-manager-dialog.ts

@@ -0,0 +1,413 @@
+import type { ControllerCustomizationPresetData, ControllerCustomizationPresetRecord } from "@/types/presets";
+import { BaseProfileManagerDialog } from "./base-profile-manager-dialog";
+import { ControllerCustomizationsTable } from "@/utils/local-db/controller-customizations-table";
+import { t } from "@/utils/translation";
+import { GamepadKey, GamepadKeyName } from "@/enums/gamepad";
+import { ButtonStyle, CE, createButton, createSettingRow } from "@/utils/html";
+import { BxSelectElement } from "@/web-components/bx-select";
+import { GlobalPref } from "@/enums/pref-keys";
+import { getGlobalPref } from "@/utils/pref-utils";
+import { BxEvent } from "@/utils/bx-event";
+import { deepClone } from "@/utils/global";
+import { StreamSettings } from "@/utils/stream-settings";
+import { BxDualNumberStepper } from "@/web-components/bx-dual-number-stepper";
+import { NavigationDirection, type NavigationElement } from "../navigation-dialog";
+import { setNearby } from "@/utils/navigation-utils";
+import type { DualNumberStepperParams } from "@/types/setting-definition";
+import { BxNumberStepper } from "@/web-components/bx-number-stepper";
+import { getGamepadPrompt } from "@/utils/gamepad";
+
+export class ControllerCustomizationsManagerDialog extends BaseProfileManagerDialog<ControllerCustomizationPresetRecord> {
+    private static instance: ControllerCustomizationsManagerDialog;
+    public static getInstance = () => ControllerCustomizationsManagerDialog.instance ?? (ControllerCustomizationsManagerDialog.instance = new ControllerCustomizationsManagerDialog(t('controller-customization')));
+
+    declare protected $content: HTMLElement;
+    private $vibrationIntensity!: BxNumberStepper;
+    private $leftTriggerRange!: BxDualNumberStepper;
+    private $rightTriggerRange!: BxDualNumberStepper;
+    private $leftStickDeadzone!: BxDualNumberStepper;
+    private $rightStickDeadzone!: BxDualNumberStepper;
+    private $btnDetect!: HTMLButtonElement;
+
+    private selectsMap: PartialRecord<GamepadKey, HTMLSelectElement> = {};
+    private selectsOrder: GamepadKey[] = [];
+
+    private isDetectingButton: boolean = false;
+    private detectIntervalId: number | null = null;
+
+    static readonly BUTTONS_ORDER = [
+        GamepadKey.A, GamepadKey.B,
+        GamepadKey.X, GamepadKey.Y,
+
+        GamepadKey.UP, GamepadKey.RIGHT,
+        GamepadKey.DOWN, GamepadKey.LEFT,
+
+        GamepadKey.LB, GamepadKey.RB,
+        GamepadKey.LT, GamepadKey.RT,
+
+        GamepadKey.L3, GamepadKey.R3,
+        GamepadKey.LS, GamepadKey.RS,
+
+        GamepadKey.SELECT, GamepadKey.START,
+        GamepadKey.SHARE,
+    ];
+
+    constructor(title: string) {
+        super(title, ControllerCustomizationsTable.getInstance());
+        this.render();
+    }
+
+    private render() {
+        const isControllerFriendly = getGlobalPref(GlobalPref.UI_CONTROLLER_FRIENDLY);
+        const $rows = CE('div', { class: 'bx-buttons-grid' });
+
+        const $baseSelect = CE('select', { class: 'bx-full-width' },
+            CE('option', { value: '' }, '---'),
+            CE('option', { value: 'false', _dataset: { label: '🚫' } }, isControllerFriendly ? '🚫' : t('off')),
+        );
+        const $baseButtonSelect = $baseSelect.cloneNode(true);
+        const $baseStickSelect = $baseSelect.cloneNode(true);
+
+        const onButtonChanged = (e: Event) => {
+            // Update preset
+            if (!(e as any).ignoreOnChange) {
+                this.updatePreset();
+            }
+        };
+
+        const boundUpdatePreset = this.updatePreset.bind(this);
+
+        for (const gamepadKey of ControllerCustomizationsManagerDialog.BUTTONS_ORDER) {
+            if (gamepadKey === GamepadKey.SHARE) {
+                continue;
+            }
+
+            const name = GamepadKeyName[gamepadKey][isControllerFriendly ? 1 : 0];
+            const $target = (gamepadKey === GamepadKey.LS || gamepadKey === GamepadKey.RS) ? $baseStickSelect : $baseButtonSelect;
+            $target.appendChild(CE('option', {
+                value: gamepadKey,
+                _dataset: { label: GamepadKeyName[gamepadKey][1] },
+            }, name));
+        }
+
+        for (const gamepadKey of ControllerCustomizationsManagerDialog.BUTTONS_ORDER) {
+            const [buttonName, buttonPrompt] = GamepadKeyName[gamepadKey];
+            const $sourceSelect = (gamepadKey === GamepadKey.LS || gamepadKey === GamepadKey.RS) ? $baseStickSelect : $baseButtonSelect;
+
+            // Remove current button from selection
+            const $clonedSelect = $sourceSelect.cloneNode(true) as HTMLSelectElement;
+            $clonedSelect.querySelector(`option[value="${gamepadKey}"]`)?.remove();
+
+            const $select = BxSelectElement.create($clonedSelect);
+            $select.dataset.index = gamepadKey.toString();
+            $select.addEventListener('input', onButtonChanged);
+
+            this.selectsMap[gamepadKey] = $select;
+            this.selectsOrder.push(gamepadKey);
+
+            const $row = CE('div', {
+                class: 'bx-controller-key-row',
+                _nearby: { orientation: 'horizontal' },
+            },
+                CE('label', { title: buttonName }, buttonPrompt),
+                $select,
+            );
+
+            $rows.append($row);
+        }
+
+        // Map nearby elenemts for controller-friendly UI
+        if (getGlobalPref(GlobalPref.UI_CONTROLLER_FRIENDLY)) {
+            for (let i = 0; i < this.selectsOrder.length; i++) {
+                const $select = this.selectsMap[this.selectsOrder[i] as unknown as GamepadKey] as NavigationElement;
+                const directions = {
+                    [NavigationDirection.UP]: i - 2,
+                    [NavigationDirection.DOWN]: i + 2,
+                    [NavigationDirection.LEFT]: i - 1,
+                    [NavigationDirection.RIGHT]: i + 1,
+                };
+
+                for (const dir in directions) {
+                    const idx = directions[dir as unknown as NavigationDirection];
+                    if (typeof this.selectsOrder[idx] === 'undefined') {
+                        continue;
+                    }
+
+                    const $targetSelect = this.selectsMap[this.selectsOrder[idx] as unknown as GamepadKey];
+                    setNearby($select, {
+                        [dir]: $targetSelect,
+                    });
+                }
+            }
+        }
+
+        const blankSettings = this.presetsDb.BLANK_PRESET_DATA.settings;
+        const params: DualNumberStepperParams = {
+            min: 0,
+            minDiff: 1,
+            max: 100,
+
+            steps: 1,
+        };
+        this.$content = CE('div', { class: 'bx-controller-customizations-container' },
+            // Detect button
+            this.$btnDetect = createButton({
+                label: t('detect-controller-button'),
+                classes: ['bx-btn-detect'],
+                style: ButtonStyle.NORMAL_CASE | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
+                onClick: () => {
+                    this.startDetectingButton();
+                },
+            }),
+
+            // Mapping
+            $rows,
+
+            // Vibration intensity
+            createSettingRow(t('vibration-intensity'),
+                this.$vibrationIntensity = BxNumberStepper.create('controller_vibration_intensity', 50, 0, 100, {
+                    steps: 10,
+                    suffix: '%',
+                    exactTicks: 20,
+                    customTextValue: (value: any) => {
+                        value = parseInt(value);
+                        return value === 0 ? t('off') : value + '%';
+                    },
+                }, boundUpdatePreset),
+            ),
+
+            // Range settings
+            createSettingRow(t('left-trigger-range'),
+                this.$leftTriggerRange = BxDualNumberStepper.create('left-trigger-range', blankSettings.leftTriggerRange!, params, boundUpdatePreset),
+            ),
+
+            createSettingRow(t('right-trigger-range'),
+                this.$rightTriggerRange = BxDualNumberStepper.create('right-trigger-range', blankSettings.rightTriggerRange!, params, boundUpdatePreset),
+            ),
+
+            createSettingRow(t('left-stick-deadzone'),
+                this.$leftStickDeadzone = BxDualNumberStepper.create('left-stick-deadzone', blankSettings.leftStickDeadzone!, params, boundUpdatePreset),
+            ),
+
+            createSettingRow(t('right-stick-deadzone'),
+                this.$rightStickDeadzone = BxDualNumberStepper.create('right-stick-deadzone', blankSettings.rightStickDeadzone!, params, boundUpdatePreset),
+            ),
+        );
+    }
+
+    private startDetectingButton() {
+        this.isDetectingButton = true;
+
+        const { $btnDetect } = this;
+        $btnDetect.classList.add('bx-monospaced', 'bx-blink-me');
+        $btnDetect.disabled = true;
+
+        let count = 4;
+        $btnDetect.textContent = `[${count}] ${t('press-any-button')}`;
+
+        this.detectIntervalId = window.setInterval(() => {
+            count -= 1;
+            if (count === 0) {
+                this.stopDetectingButton();
+
+                // Re-focus the Detect button
+                $btnDetect.focus();
+                return;
+            }
+
+            $btnDetect.textContent = `[${count}] ${t('press-any-button')}`;
+        }, 1000);
+    }
+
+    private stopDetectingButton() {
+        const { $btnDetect } = this;
+        $btnDetect.classList.remove('bx-monospaced', 'bx-blink-me');
+        $btnDetect.textContent = t('detect-controller-button');
+        $btnDetect.disabled = false;
+
+        this.isDetectingButton = false;
+        this.detectIntervalId && window.clearInterval(this.detectIntervalId);
+        this.detectIntervalId = null;
+    }
+
+    async onBeforeMount() {
+        this.stopDetectingButton();
+        super.onBeforeMount(...arguments);
+    }
+
+    onBeforeUnmount(): void {
+        this.stopDetectingButton();
+        StreamSettings.refreshControllerSettings();
+        super.onBeforeUnmount();
+    }
+
+    handleGamepad(button: GamepadKey): boolean {
+        if (!this.isDetectingButton) {
+            return super.handleGamepad(button);
+        }
+
+        if (button in ControllerCustomizationsManagerDialog.BUTTONS_ORDER) {
+            this.stopDetectingButton();
+
+            const $select = this.selectsMap[button]!;
+            const $label = $select.previousElementSibling!;
+            $label.addEventListener('animationend', () => {
+                $label.classList.remove('bx-horizontal-shaking');
+            }, { once: true });
+            $label.classList.add('bx-horizontal-shaking');
+
+            // Focus select
+            if (getGlobalPref(GlobalPref.UI_CONTROLLER_FRIENDLY)) {
+                this.dialogManager.focus($select);
+            }
+        }
+
+        return true;
+    }
+
+    protected switchPreset(id: number): void {
+        const preset = this.allPresets.data[id];
+        if (!preset) {
+            this.currentPresetId = 0;
+            return;
+        }
+
+        const {
+            $btnDetect,
+            $vibrationIntensity,
+            $leftStickDeadzone,
+            $rightStickDeadzone,
+            $leftTriggerRange,
+            $rightTriggerRange,
+            selectsMap,
+        } = this;
+
+        const presetData = preset.data;
+        this.currentPresetId = id;
+        const isDefaultPreset = id <= 0;
+        this.updateButtonStates();
+
+        // Show/hide Detect button
+        $btnDetect.classList.toggle('bx-gone', isDefaultPreset);
+
+        // Set mappings
+        let buttonIndex: unknown;
+        for (buttonIndex in selectsMap) {
+            buttonIndex = buttonIndex as GamepadKey;
+
+            const $select = selectsMap[buttonIndex as GamepadKey];
+            if (!$select) {
+                continue;
+            }
+
+            const mappedButton = presetData.mapping[buttonIndex as GamepadKey];
+
+            $select.value = typeof mappedButton === 'undefined' ? '' : mappedButton.toString();
+            $select.disabled = isDefaultPreset;
+
+            BxEvent.dispatch($select, 'input', {
+                ignoreOnChange: true,
+                manualTrigger: true,
+            });
+        }
+
+        // Add missing settings
+        presetData.settings = Object.assign({}, this.presetsDb.BLANK_PRESET_DATA.settings, presetData.settings);
+
+        // Vibration intensity
+        $vibrationIntensity.value = presetData.settings.vibrationIntensity.toString();
+        $vibrationIntensity.dataset.disabled = isDefaultPreset.toString();
+
+        // Set extra settings
+        $leftStickDeadzone.dataset.disabled = $rightStickDeadzone.dataset.disabled = $leftTriggerRange.dataset.disabled = $rightTriggerRange.dataset.disabled = isDefaultPreset.toString();
+        $leftStickDeadzone.setValue(presetData.settings.leftStickDeadzone);
+        $rightStickDeadzone.setValue(presetData.settings.rightStickDeadzone);
+        $leftTriggerRange.setValue(presetData.settings.leftTriggerRange);
+        $rightTriggerRange.setValue(presetData.settings.rightTriggerRange);
+    }
+
+    private updatePreset() {
+        const newData: ControllerCustomizationPresetData = deepClone(this.presetsDb.BLANK_PRESET_DATA);
+
+        // Set mappings
+        let gamepadKey: unknown;
+        for (gamepadKey in this.selectsMap) {
+            const $select = this.selectsMap[gamepadKey as GamepadKey]!;
+            const value = $select.value;
+            if (!value) {
+                continue;
+            }
+
+            const mapTo = (value === 'false') ? false : parseInt(value);
+            newData.mapping[gamepadKey as GamepadKey] = mapTo;
+        }
+
+        // Set extra settings
+        Object.assign(newData.settings, {
+            vibrationIntensity: parseInt(this.$vibrationIntensity.value),
+
+            leftStickDeadzone: this.$leftStickDeadzone.getValue(),
+            rightStickDeadzone: this.$rightStickDeadzone.getValue(),
+            leftTriggerRange: this.$leftTriggerRange.getValue(),
+            rightTriggerRange: this.$rightTriggerRange.getValue(),
+        } satisfies typeof newData.settings);
+
+        // Update preset
+        const preset = this.allPresets.data[this.currentPresetId!];
+        preset.data = newData;
+        this.presetsDb.updatePreset(preset);
+    }
+
+    async renderSummary(presetId: number) {
+        const preset = await this.presetsDb.getPreset(presetId);
+        if (!preset) {
+            return null;
+        }
+
+        const presetData = preset.data;
+        let $content: HTMLElement | undefined;
+        let showNote = false;
+
+        if (Object.keys(presetData.mapping).length > 0) {
+            $content = CE('div', { class: 'bx-controller-customization-summary'});
+
+            for (const gamepadKey of ControllerCustomizationsManagerDialog.BUTTONS_ORDER) {
+                if (!(gamepadKey in presetData.mapping)) {
+                    continue;
+                }
+
+                const mappedKey = presetData.mapping[gamepadKey]!;
+                $content.append(CE('span', { class: 'bx-prompt' }, getGamepadPrompt(gamepadKey) + ' > ' + (mappedKey === false ? '🚫' : getGamepadPrompt(mappedKey))));
+            }
+
+            showNote = true;
+        }
+
+        // Show note if it has settings other than 'vibrationIntensity'
+        let key: keyof typeof presetData.settings;
+        for (key in presetData.settings) {
+            if (key === 'vibrationIntensity') {
+                continue;
+            }
+
+            const value = presetData.settings[key];
+            // Non-default value
+            if (Array.isArray(value) && (value[0] !== 0 || value[1] !== 100)) {
+                showNote = true;
+                break;
+            }
+        }
+
+        const fragment = document.createDocumentFragment();
+        if (showNote) {
+            const $note = CE('div', { class: 'bx-settings-dialog-note' }, 'ⓘ ' + t('controller-customization-input-latency-note'));
+            fragment.appendChild($note);
+        }
+
+        if ($content) {
+            fragment.appendChild($content);
+        }
+
+        return fragment.childElementCount ? fragment : null;
+    }
+}

src/modules/ui/dialog/profile-manger/controller-shortcuts-manager-dialog.ts

@@ -2,12 +2,10 @@ import { t } from "@/utils/translation";
 import { BaseProfileManagerDialog } from "./base-profile-manager-dialog";
 import { CE } from "@/utils/html";
 import { GamepadKey, GamepadKeyName } from "@/enums/gamepad";
-import { PrefKey } from "@/enums/pref-keys";
 import { PrompFont } from "@/enums/prompt-font";
 import { ShortcutAction } from "@/enums/shortcut-actions";
 import { deepClone } from "@/utils/global";
 import { setNearby } from "@/utils/navigation-utils";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
 import { BxSelectElement } from "@/web-components/bx-select";
 import type { ControllerShortcutPresetData, ControllerShortcutPresetRecord } from "@/types/presets";
 import { ControllerShortcutsTable } from "@/utils/local-db/controller-shortcuts-table";
@@ -21,11 +19,7 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
     // private readonly LOG_TAG = 'ControllerShortcutsManagerDialog';
 
     protected $content: HTMLElement;
-    private selectActions: Partial<Record<GamepadKey, [HTMLSelectElement, HTMLSelectElement | null]>> = {};
-
-    protected readonly BLANK_PRESET_DATA = {
-        mapping: {},
-    };
+    private selectActions: PartialRecord<GamepadKey, HTMLSelectElement> = {};
 
     private readonly BUTTONS_ORDER = [
         GamepadKey.Y, GamepadKey.A, GamepadKey.X, GamepadKey.B,
@@ -39,19 +33,18 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
     constructor(title: string) {
         super(title, ControllerShortcutsTable.getInstance());
 
-        const PREF_CONTROLLER_FRIENDLY_UI = getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
+        const $baseSelect = CE('select', {
+            class: 'bx-full-width',
+            autocomplete: 'off',
+        }, CE('option', { value: '' }, '---'));
 
-        // Read actions from localStorage
-        // ControllerShortcut.ACTIONS = ControllerShortcut.getActionsFromStorage();
-
-        const $baseSelect = CE<HTMLSelectElement>('select', { autocomplete: 'off' }, CE('option', { value: '' }, '---'));
         for (const groupLabel in SHORTCUT_ACTIONS) {
             const items = SHORTCUT_ACTIONS[groupLabel];
             if (!items) {
                 continue;
             }
 
-            const $optGroup = CE<HTMLOptGroupElement>('optgroup', { label: groupLabel });
+            const $optGroup = CE('optgroup', { label: groupLabel });
             for (const action in items) {
                 const crumbs = items[action as keyof typeof items];
                 if (!crumbs) {
@@ -59,7 +52,7 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
                 }
 
                 const label = crumbs.join(' ❯ ');
-                const $option = CE<HTMLOptionElement>('option', { value: action }, label);
+                const $option = CE('option', { value: action }, label);
                 $optGroup.appendChild($option);
             }
 
@@ -71,23 +64,6 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
         });
 
         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;
-            }
-
             // Update preset
             if (!(e as any).ignoreOnChange) {
                 this.updatePreset();
@@ -110,30 +86,18 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
                 },
             });
             const $label = CE('label', { class: 'bx-prompt' }, `${PrompFont.HOME}${prompt}`);
-            const $div = CE('div', { class: 'bx-shortcut-actions' });
-
-            let $fakeSelect: HTMLSelectElement | null = null;
-            if (!PREF_CONTROLLER_FRIENDLY_UI) {
-                $fakeSelect = CE<HTMLSelectElement>('select', { autocomplete: 'off' },
-                    CE('option', {}, '---'),
-                );
-
-                $div.appendChild($fakeSelect);
-            }
 
             const $select = BxSelectElement.create($baseSelect.cloneNode(true) as HTMLSelectElement);
             $select.dataset.button = button.toString();
-            $select.classList.add('bx-full-width');
             $select.addEventListener('input', onActionChanged);
 
-            this.selectActions[button] = [$select, $fakeSelect];
+            this.selectActions[button] = $select;
 
-            $div.appendChild($select);
             setNearby($row, {
                 focus: $select,
             });
 
-            $row.append($label, $div);
+            $row.append($label, $select);
             fragment.appendChild($row);
         }
 
@@ -156,10 +120,9 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
         // Reset selects' values
         let button: unknown;
         for (button in this.selectActions) {
-            const [$select, $fakeSelect] = this.selectActions[button as GamepadKey]!;
+            const $select = this.selectActions[button as GamepadKey]!;
             $select.value = actions.mapping[button as GamepadKey] || '';
             $select.disabled = isDefaultPreset;
-            $fakeSelect && ($fakeSelect.disabled = isDefaultPreset);
 
             BxEvent.dispatch($select, 'input', {
                 ignoreOnChange: true,
@@ -171,12 +134,11 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
     }
 
     private updatePreset() {
-        const newData: ControllerShortcutPresetData = deepClone(this.BLANK_PRESET_DATA);
+        const newData: ControllerShortcutPresetData = deepClone(this.presetsDb.BLANK_PRESET_DATA);
 
         let button: unknown;
         for (button in this.selectActions) {
-            const [$select, _] = this.selectActions[button as GamepadKey]!;
-
+            const $select = this.selectActions[button as GamepadKey]!;
             const action = $select.value;
             if (!action) {
                 continue;
@@ -185,10 +147,13 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
             newData.mapping[button as GamepadKey] = action as ShortcutAction;
         }
 
-        const preset = this.allPresets.data[this.currentPresetId];
+        const preset = this.allPresets.data[this.currentPresetId!];
         preset.data = newData;
         this.presetsDb.updatePreset(preset);
+    }
 
+    onBeforeUnmount() {
         StreamSettings.refreshControllerSettings();
+        super.onBeforeUnmount();
     }
 }

src/modules/ui/dialog/profile-manger/keyboard-shortcuts-manager-dialog.ts

@@ -19,12 +19,9 @@ export class KeyboardShortcutsManagerDialog extends BaseProfileManagerDialog<Key
     // private readonly LOG_TAG = 'KeyboardShortcutsManagerDialog';
 
     protected $content: HTMLElement;
+    private $unbindNote: HTMLElement;
     private readonly allKeyElements: BxKeyBindingButton[] = [];
 
-    protected readonly BLANK_PRESET_DATA: KeyboardShortcutPresetData = {
-        mapping: {},
-    };
-
     constructor(title: string) {
         super(title, KeyboardShortcutsTable.getInstance());
 
@@ -36,7 +33,7 @@ export class KeyboardShortcutsManagerDialog extends BaseProfileManagerDialog<Key
                 continue;
             }
 
-            const $fieldSet = CE<HTMLFieldSetElement>('fieldset', {}, CE('legend', {}, groupLabel));
+            const $fieldSet = CE('fieldset', false, CE('legend', false, groupLabel));
             for (const action in items) {
                 const crumbs = items[action as keyof typeof items];
                 if (!crumbs) {
@@ -65,7 +62,10 @@ export class KeyboardShortcutsManagerDialog extends BaseProfileManagerDialog<Key
             }
         }
 
-        this.$content = CE('div', {}, $rows);
+        this.$content = CE('div', false,
+            this.$unbindNote = CE('i', { class: 'bx-mkb-note' }, t('right-click-to-unbind')),
+            $rows,
+        );
     }
 
     private onKeyChanged = (e: Event) => {
@@ -109,6 +109,9 @@ export class KeyboardShortcutsManagerDialog extends BaseProfileManagerDialog<Key
         const isDefaultPreset = id <= 0;
         this.updateButtonStates();
 
+        // Toggle unbind note
+        this.$unbindNote.classList.toggle('bx-gone', isDefaultPreset);
+
         // Update buttons
         for (const $elm of this.allKeyElements) {
             const { action } = this.parseDataset($elm);
@@ -125,7 +128,7 @@ export class KeyboardShortcutsManagerDialog extends BaseProfileManagerDialog<Key
     }
 
     private savePreset() {
-        const presetData = deepClone(this.BLANK_PRESET_DATA) as KeyboardShortcutPresetData;
+        const presetData = deepClone(this.presetsDb.BLANK_PRESET_DATA) as KeyboardShortcutPresetData;
 
         // Get mapping
         for (const $elm of this.allKeyElements) {
@@ -137,15 +140,19 @@ export class KeyboardShortcutsManagerDialog extends BaseProfileManagerDialog<Key
             }
         }
 
-        const oldPreset = this.allPresets.data[this.currentPresetId];
+        const oldPreset = this.allPresets.data[this.currentPresetId!];
         const newPreset = {
-            id: this.currentPresetId,
+            id: this.currentPresetId!,
             name: oldPreset.name,
             data: presetData,
         };
         this.presetsDb.updatePreset(newPreset);
 
-        this.allPresets.data[this.currentPresetId] = newPreset;
+        this.allPresets.data[this.currentPresetId!] = newPreset;
+    }
+
+    onBeforeUnmount(): void {
         StreamSettings.refreshKeyboardShortcuts();
+        super.onBeforeUnmount();
     }
 }

src/modules/ui/dialog/profile-manger/mkb-mapping-manager-dialog.ts

@@ -4,7 +4,7 @@ import { t } from "@/utils/translation";
 import { MkbMappingPresetsTable } from "@/utils/local-db/mkb-mapping-presets-table";
 import { GamepadKey, GamepadKeyName } from "@/enums/gamepad";
 import { CE, createSettingRow } from "@/utils/html";
-import { MouseMapTo, MkbPresetKey, type KeyCode } from "@/enums/mkb";
+import { MouseMapTo } from "@/enums/mkb";
 import { BxKeyBindingButton, BxKeyBindingButtonFlag } from "@/web-components/bx-key-binding-button";
 import { StreamSettings } from "@/utils/stream-settings";
 import { BxNumberStepper } from "@/web-components/bx-number-stepper";
@@ -33,21 +33,12 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
         GamepadKey.R3, GamepadKey.RS_UP, GamepadKey.RS_DOWN, GamepadKey.RS_LEFT, GamepadKey.RS_RIGHT,
     ];
 
-    protected readonly BLANK_PRESET_DATA: MkbPresetData = {
-        mapping: {},
-        mouse: {
-            [MkbPresetKey.MOUSE_MAP_TO]: MouseMapTo.RS,
-            [MkbPresetKey.MOUSE_SENSITIVITY_X]: 100,
-            [MkbPresetKey.MOUSE_SENSITIVITY_Y]: 100,
-            [MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT]: 20,
-        },
-    };
-
     private readonly allKeyElements: BxKeyBindingButton[] = [];
     private $mouseMapTo!: BxSelectElement;
     private $mouseSensitivityX!: BxNumberStepper;
     private $mouseSensitivityY!: BxNumberStepper;
     private $mouseDeadzone!: BxNumberStepper;
+    private $unbindNote!: HTMLElement;
 
     constructor(title: string) {
         super(title, MkbMappingPresetsTable.getInstance());
@@ -92,8 +83,8 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
     }
 
     private render() {
-        const $rows = CE('div', {},
-            CE('i', { class: 'bx-mkb-note' }, t('right-click-to-unbind')),
+        const $rows = CE('div', false,
+            this.$unbindNote = CE('i', { class: 'bx-mkb-note' }, t('right-click-to-unbind')),
         );
 
         for (const buttonIndex of this.BUTTONS_ORDER) {
@@ -120,9 +111,7 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
 
             const $keyRow = CE('div', {
                 class: 'bx-mkb-key-row',
-                _nearby: {
-                    orientation: 'horizontal',
-                },
+                _nearby: { orientation: 'horizontal' },
             },
                 CE('label', { title: buttonName }, buttonPrompt),
                 $fragment,
@@ -132,7 +121,7 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
         }
 
         const savePreset = () => this.savePreset();
-        const $extraSettings = CE('div', {},
+        const $extraSettings = CE('div', false,
             createSettingRow(
                 t('map-mouse-to'),
                 this.$mouseMapTo = BxSelectElement.create(CE('select', { _on: { input: savePreset } },
@@ -167,7 +156,7 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
             ),
         );
 
-        this.$content = CE('div', {},
+        this.$content = CE('div', false,
             $rows,
             $extraSettings,
         );
@@ -185,6 +174,9 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
         const isDefaultPreset = id <= 0;
         this.updateButtonStates();
 
+        // Toggle unbind note
+        this.$unbindNote.classList.toggle('bx-gone', isDefaultPreset);
+
         // Update buttons
         for (const $elm of this.allKeyElements) {
             const { buttonIndex, keySlot } = this.parseDataset($elm);
@@ -215,7 +207,7 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
     }
 
     private savePreset() {
-        const presetData = deepClone(this.BLANK_PRESET_DATA) as MkbPresetData;
+        const presetData = deepClone(this.presetsDb.BLANK_PRESET_DATA) as MkbPresetData;
 
         // Get mapping
         for (const $elm of this.allKeyElements) {
@@ -240,15 +232,19 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
         mouse.sensitivityY = parseInt(this.$mouseSensitivityY.value);
         mouse.deadzoneCounterweight = parseInt(this.$mouseDeadzone.value);
 
-        const oldPreset = this.allPresets.data[this.currentPresetId];
+        const oldPreset = this.allPresets.data[this.currentPresetId!];
         const newPreset = {
-            id: this.currentPresetId,
+            id: this.currentPresetId!,
             name: oldPreset.name,
             data: presetData,
         };
         this.presetsDb.updatePreset(newPreset);
 
-        this.allPresets.data[this.currentPresetId] = newPreset;
+        this.allPresets.data[this.currentPresetId!] = newPreset;
+    }
+
+    onBeforeUnmount() {
         StreamSettings.refreshMkbSettings();
+        super.onBeforeUnmount();
     }
 }

src/modules/ui/dialog/remote-play-dialog.ts

@@ -1,8 +1,8 @@
 import { ButtonStyle, CE, createButton } from "@/utils/html";
 import { NavigationDialog, type NavigationElement } from "./navigation-dialog";
-import { PrefKey } from "@/enums/pref-keys";
+import { GlobalPref } from "@/enums/pref-keys";
 import { BxIcon } from "@/utils/bx-icon";
-import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
+import { getGlobalPref, setGlobalPref } from "@/utils/pref-utils";
 import { t } from "@/utils/translation";
 import { RemotePlayConsoleState, RemotePlayManager } from "@/modules/remote-play-manager";
 import { BxSelectElement } from "@/web-components/bx-select";
@@ -32,15 +32,19 @@ export class RemotePlayDialog extends NavigationDialog {
     }
 
     private setupDialog() {
-        const $fragment = CE('div', { class: 'bx-remote-play-container' });
+        const $fragment = CE('div', { class: 'bx-centered-dialog' },
+            CE('div', { class: 'bx-dialog-title' },
+                CE('p', false, t('remote-play')),
+            ),
+        );
 
         const $settingNote = CE('p', {});
 
-        const currentResolution = getPref(PrefKey.REMOTE_PLAY_STREAM_RESOLUTION);
-        let $resolutions : HTMLSelectElement | NavigationElement = CE<HTMLSelectElement>('select', {},
+        const currentResolution = getGlobalPref(GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION);
+        let $resolutions : HTMLSelectElement | NavigationElement = CE('select', false,
             CE('option', { value: StreamResolution.DIM_720P }, '720p'),
             CE('option', { value: StreamResolution.DIM_1080P }, '1080p'),
-            // CE('option', { value: StreamResolution.DIM_1080P_HQ }, `1080p (HQ) ${t('experimental')}`),
+            // CE('option', { value: StreamResolution.DIM_1080P_HQ }, `1080p (HQ)`),
         );
 
         $resolutions = BxSelectElement.create($resolutions as HTMLSelectElement);
@@ -48,7 +52,7 @@ export class RemotePlayDialog extends NavigationDialog {
             const value = (e.target as HTMLSelectElement).value;
 
             $settingNote.textContent = value === '1080p' ? '✅ ' + t('can-stream-xbox-360-games') : '❌ ' + t('cant-stream-xbox-360-games');
-            setPref(PrefKey.REMOTE_PLAY_STREAM_RESOLUTION, value);
+            setGlobalPref(GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION, value, 'ui');
         });
 
         ($resolutions as any).value = currentResolution;
@@ -58,8 +62,8 @@ export class RemotePlayDialog extends NavigationDialog {
 
         const $qualitySettings = CE('div', {
             class: 'bx-remote-play-settings',
-        }, CE('div', {},
-            CE('label', {}, t('target-resolution'), $settingNote),
+        }, CE('div', false,
+            CE('label', false, t('target-resolution'), $settingNote),
             $resolutions,
         ));
 
@@ -72,7 +76,7 @@ export class RemotePlayDialog extends NavigationDialog {
         for (let con of consoles) {
             const $child = CE('div', { class: 'bx-remote-play-device-wrapper' },
                 CE('div', { class: 'bx-remote-play-device-info' },
-                    CE('div', {},
+                    CE('div', false,
                         CE('span', { class: 'bx-remote-play-device-name' }, con.deviceName),
                         CE('span', { class: 'bx-remote-play-console-type' }, con.consoleType.replace('Xbox', ''))
                     ),

src/modules/ui/dialog/settings-dialog.ts

@@ -1,14 +1,12 @@
 import { isFullVersion } from "@macros/build" with { type: "macro" };
 
-import { limitVideoPlayerFps, onChangeVideoPlayerType, updateVideoPlayer } from "@/modules/stream/stream-settings-utils";
-import { ButtonStyle, CE, createButton, createSettingRow, createSvgIcon, escapeCssSelector, type BxButtonOptions } from "@/utils/html";
+import { onChangeVideoPlayerType } from "@/modules/stream/stream-settings-utils";
+import { ButtonStyle, calculateSelectBoxes, CE, createButton, createSettingRow, createSvgIcon, escapeCssSelector, type BxButtonOptions } from "@/utils/html";
 import { NavigationDialog, NavigationDirection } from "./navigation-dialog";
-import { SoundShortcut } from "@/modules/shortcuts/sound-shortcut";
-import { StreamStats } from "@/modules/stream/stream-stats";
 import { TouchController } from "@/modules/touch-controller";
 import { BxEvent } from "@/utils/bx-event";
-import { BxIcon } from "@/utils/bx-icon";
-import { STATES, AppInterface, deepClone, SCRIPT_VERSION, STORAGE, SCRIPT_VARIANT } from "@/utils/global";
+import { BxIcon, type BxIconRaw } from "@/utils/bx-icon";
+import { STATES, AppInterface, deepClone, SCRIPT_VERSION, SCRIPT_VARIANT } from "@/utils/global";
 import { t, Translations } from "@/utils/translation";
 import { BxSelectElement } from "@/web-components/bx-select";
 import { setNearby } from "@/utils/navigation-utils";
@@ -17,8 +15,7 @@ import { UserAgentProfile } from "@/enums/user-agent";
 import { UserAgent } from "@/utils/user-agent";
 import { BX_FLAGS } from "@/utils/bx-flags";
 import { clearAllData, copyToClipboard } from "@/utils/utils";
-import { PrefKey, StorageKey } from "@/enums/pref-keys";
-import { getPref, getPrefDefinition, setPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref, StorageKey, StreamPref, type AnyPref } from "@/enums/pref-keys";
 import { SettingElement } from "@/utils/setting-element";
 import type { SettingDefinition, SuggestedSettingProfile } from "@/types/setting-definition";
 import { FullscreenText } from "../fullscreen-text";
@@ -27,22 +24,23 @@ import { GamepadKey } from "@/enums/gamepad";
 import { NativeMkbHandler } from "@/modules/mkb/native-mkb-handler";
 import { ControllerExtraSettings } from "./settings/controller-extra";
 import { SuggestionsSetting } from "./settings/suggestions";
-import { StreamSettings } from "@/utils/stream-settings";
 import { MkbExtraSettings } from "./settings/mkb-extra";
-import { BxExposed } from "@/utils/bx-exposed";
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { getGlobalPref, getPrefInfo, getStreamPref, isStreamPref, setGlobalPref, STORAGE } from "@/utils/pref-utils";
+import { SettingsManager } from "@/modules/settings-manager";
 
 
 type SettingTabSectionItem = Partial<{
-    pref: PrefKey;
+    pref: AnyPref;
     multiLines: boolean;
     label: string;
-    note: string | (() => HTMLElement);
+    note: string | (() => HTMLElement) | HTMLElement;
     experimental: string;
     content: HTMLElement | (() => HTMLElement);
     options: { [key: string]: string };
     unsupported: boolean;
     unsupportedNote: string;
-    onChange: (e: any, value: number) => void;
+    // onChange: (e: any, value: number) => void;
     onCreated: (setting: SettingTabSectionItem, $control: any) => void;
     params: any;
     requiredVariants?: BuildVariant | Array<BuildVariant>;
@@ -55,20 +53,18 @@ type SettingTabSection = {
         | 'stats';
     label?: string;
     unsupported?: boolean;
-    unsupportedNote?: string | Text | null;
+    unsupportedNote?: HTMLElement | string | Text | null;
     helpUrl?: string;
     content?: HTMLElement;
-    lazyContent?: boolean | (() => HTMLElement);
-    items?: Array<SettingTabSectionItem | PrefKey | (($parent: HTMLElement) => void) | false>;
+    items?: Array<SettingTabSectionItem | AnyPref | (($parent: HTMLElement) => void) | false>;
     requiredVariants?: BuildVariant | Array<BuildVariant>;
 };
 
 type SettingTab = {
-    icon: SVGElement;
+    icon: BxIconRaw;
     group: SettingTabGroup,
-    items: Array<SettingTabSection | HTMLElement | false> | (() => Array<SettingTabSection | false>);
+    items: Array<SettingTabSection | HTMLElement | false>;
     requiredVariants?: BuildVariant | Array<BuildVariant>;
-    lazyContent?: boolean;
 };
 
 type SettingTabGroup = 'global' | 'stream' | 'controller' | 'mkb' | 'stats';
@@ -85,18 +81,21 @@ export class SettingsDialog extends NavigationDialog {
     private $btnReload!: HTMLElement;
     private $btnGlobalReload!: HTMLButtonElement;
     private $noteGlobalReload!: HTMLElement;
-    private $btnSuggestion!: HTMLButtonElement;
+    private $btnSuggestion!: HTMLDivElement;
+    private $streamSettingsSelection!: HTMLElement;
 
     private renderFullSettings: boolean;
+    protected boundOnContextMenu: any;
 
-    protected suggestedSettings: Record<SuggestedSettingProfile, PartialRecord<PrefKey, any>> = {
+    protected suggestedSettings: Record<SuggestedSettingProfile, PartialRecord<AnyPref, any>> = {
         recommended: {},
         default: {},
         lowest: {},
         highest: {},
     };
-    protected suggestedSettingLabels: PartialRecord<PrefKey, string> = {};
-    protected settingElements: PartialRecord<PrefKey, HTMLElement> = {};
+    protected settingLabels: PartialRecord<AnyPref, string> = {};
+
+    protected settingsManager: SettingsManager;
 
     private readonly TAB_GLOBAL_ITEMS: Array<SettingTabSection | false> = [{
         group: 'general',
@@ -105,7 +104,7 @@ export class SettingsDialog extends NavigationDialog {
         items: [
             // Top buttons
             ($parent) => {
-                const PREF_LATEST_VERSION = getPref<VersionLatest>(PrefKey.VERSION_LATEST);
+                const PREF_LATEST_VERSION = getGlobalPref(GlobalPref.VERSION_LATEST);
                 const topButtons = [];
 
                 // "New version available" button
@@ -169,8 +168,8 @@ export class SettingsDialog extends NavigationDialog {
                 this.$btnSuggestion = CE('div', {
                     class: 'bx-suggest-toggler bx-focusable',
                     tabindex: 0,
-                }, CE('label', {}, t('suggest-settings')),
-                    CE('span', {}, '❯'),
+                }, CE('label', false, t('suggest-settings')),
+                    CE('span', false, '❯'),
                 );
                 this.$btnSuggestion.addEventListener('click', SuggestionsSetting.renderSuggestions.bind(this));
 
@@ -187,57 +186,57 @@ export class SettingsDialog extends NavigationDialog {
             },
 
             {
-                pref: PrefKey.SCRIPT_LOCALE,
+                pref: GlobalPref.SCRIPT_LOCALE,
                 multiLines: true,
             },
-            PrefKey.SERVER_BYPASS_RESTRICTION,
-            PrefKey.UI_CONTROLLER_FRIENDLY,
-            PrefKey.REMOTE_PLAY_ENABLED,
+            GlobalPref.SERVER_BYPASS_RESTRICTION,
+            GlobalPref.UI_CONTROLLER_FRIENDLY,
+            GlobalPref.REMOTE_PLAY_ENABLED,
         ],
     }, {
         group: 'server',
         label: t('server'),
         items: [
             {
-                pref: PrefKey.SERVER_REGION,
+                pref: GlobalPref.SERVER_REGION,
                 multiLines: true,
             },
             {
-                pref: PrefKey.STREAM_PREFERRED_LOCALE,
+                pref: GlobalPref.STREAM_PREFERRED_LOCALE,
                 multiLines: true,
             },
-            PrefKey.SERVER_PREFER_IPV6,
+            GlobalPref.SERVER_PREFER_IPV6,
         ],
     }, {
         group: 'stream',
         label: t('stream'),
         items: [
-            PrefKey.STREAM_RESOLUTION,
-            PrefKey.STREAM_CODEC_PROFILE,
-            PrefKey.STREAM_MAX_VIDEO_BITRATE,
+            GlobalPref.STREAM_RESOLUTION,
+            GlobalPref.STREAM_CODEC_PROFILE,
+            GlobalPref.STREAM_MAX_VIDEO_BITRATE,
 
-            PrefKey.AUDIO_VOLUME_CONTROL_ENABLED,
+            GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED,
 
-            PrefKey.SCREENSHOT_APPLY_FILTERS,
+            GlobalPref.SCREENSHOT_APPLY_FILTERS,
 
-            PrefKey.AUDIO_MIC_ON_PLAYING,
-            PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
-            PrefKey.STREAM_COMBINE_SOURCES,
+            GlobalPref.AUDIO_MIC_ON_PLAYING,
+            GlobalPref.GAME_FORTNITE_FORCE_CONSOLE,
+            GlobalPref.STREAM_COMBINE_SOURCES,
         ],
     }, {
         requiredVariants: 'full',
         group: 'mkb',
         label: t('mouse-and-keyboard'),
         items: [
-            PrefKey.NATIVE_MKB_MODE,
+            GlobalPref.NATIVE_MKB_MODE,
             {
-                pref: PrefKey.NATIVE_MKB_FORCED_GAMES,
+                pref: GlobalPref.NATIVE_MKB_FORCED_GAMES,
                 multiLines: true,
                 note: CE('a', { href: 'https://github.com/redphx/better-xcloud/discussions/574', target: '_blank' }, t('unofficial-game-list')),
             },
 
-            PrefKey.MKB_ENABLED,
-            PrefKey.MKB_HIDE_IDLE_CURSOR,
+            GlobalPref.MKB_ENABLED,
+            GlobalPref.MKB_HIDE_IDLE_CURSOR,
         ],
 
         // Unsupported
@@ -254,13 +253,13 @@ export class SettingsDialog extends NavigationDialog {
         label: t('touch-controller'),
         items: [
             {
-                pref: PrefKey.TOUCH_CONTROLLER_MODE,
+                pref: GlobalPref.TOUCH_CONTROLLER_MODE,
                 note: CE('a', { href: 'https://github.com/redphx/better-xcloud/discussions/241', target: '_blank' }, t('unofficial-game-list')),
             },
-            PrefKey.TOUCH_CONTROLLER_AUTO_OFF,
-            PrefKey.TOUCH_CONTROLLER_DEFAULT_OPACITY,
-            PrefKey.TOUCH_CONTROLLER_STYLE_STANDARD,
-            PrefKey.TOUCH_CONTROLLER_STYLE_CUSTOM,
+            GlobalPref.TOUCH_CONTROLLER_AUTO_OFF,
+            GlobalPref.TOUCH_CONTROLLER_DEFAULT_OPACITY,
+            GlobalPref.TOUCH_CONTROLLER_STYLE_STANDARD,
+            GlobalPref.TOUCH_CONTROLLER_STYLE_CUSTOM,
         ],
 
         // Unsupported
@@ -272,19 +271,22 @@ export class SettingsDialog extends NavigationDialog {
         group: 'ui',
         label: t('ui'),
         items: [
-            PrefKey.UI_LAYOUT,
-            PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME,
-            PrefKey.UI_CONTROLLER_SHOW_STATUS,
-            PrefKey.UI_SIMPLIFY_STREAM_MENU,
-            PrefKey.UI_SKIP_SPLASH_VIDEO,
-            !AppInterface && PrefKey.UI_SCROLLBAR_HIDE,
-            PrefKey.UI_HIDE_SYSTEM_MENU_ICON,
-            PrefKey.UI_DISABLE_FEEDBACK_DIALOG,
-            PrefKey.UI_REDUCE_ANIMATIONS,
-            PrefKey.BLOCK_SOCIAL_FEATURES,
-            PrefKey.BYOG_DISABLED,
+            GlobalPref.UI_LAYOUT,
+            GlobalPref.UI_IMAGE_QUALITY,
+            GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME,
+            GlobalPref.UI_CONTROLLER_SHOW_STATUS,
+            GlobalPref.UI_SIMPLIFY_STREAM_MENU,
+            GlobalPref.UI_SKIP_SPLASH_VIDEO,
+            !AppInterface && GlobalPref.UI_SCROLLBAR_HIDE,
+            GlobalPref.UI_HIDE_SYSTEM_MENU_ICON,
+            GlobalPref.UI_DISABLE_FEEDBACK_DIALOG,
+            GlobalPref.UI_REDUCE_ANIMATIONS,
             {
-                pref: PrefKey.UI_HIDE_SECTIONS,
+                pref: GlobalPref.UI_HIDE_SECTIONS,
+                multiLines: true,
+            },
+            {
+                pref: GlobalPref.BLOCK_FEATURES,
                 multiLines: true,
             },
         ],
@@ -293,33 +295,33 @@ export class SettingsDialog extends NavigationDialog {
         group: 'game-bar',
         label: t('game-bar'),
         items: [
-            PrefKey.GAME_BAR_POSITION,
+            GlobalPref.GAME_BAR_POSITION,
         ],
     }, {
         group: 'loading-screen',
         label: t('loading-screen'),
         items: [
-            PrefKey.LOADING_SCREEN_GAME_ART,
-            PrefKey.LOADING_SCREEN_SHOW_WAIT_TIME,
-            PrefKey.LOADING_SCREEN_ROCKET,
+            GlobalPref.LOADING_SCREEN_GAME_ART,
+            GlobalPref.LOADING_SCREEN_SHOW_WAIT_TIME,
+            GlobalPref.LOADING_SCREEN_ROCKET,
         ],
     }, {
         group: 'other',
         label: t('other'),
         items: [
-            PrefKey.BLOCK_TRACKING,
+            GlobalPref.BLOCK_TRACKING,
         ],
-    }, {
+    }, isFullVersion() && {
         group: 'advanced',
         label: t('advanced'),
         items: [
             {
-                pref: PrefKey.USER_AGENT_PROFILE,
+                pref: GlobalPref.USER_AGENT_PROFILE,
                 multiLines: true,
                 onCreated: (setting, $control) => {
-                    const defaultUserAgent = (window.navigator as any).orgUserAgent || window.navigator.userAgent;
+                    const defaultUserAgent = window.navigator.orgUserAgent || window.navigator.userAgent;
 
-                    const $inpCustomUserAgent = CE<HTMLInputElement>('input', {
+                    const $inpCustomUserAgent = CE('input', {
                         type: 'text',
                         placeholder: defaultUserAgent,
                         autocomplete: 'off',
@@ -425,25 +427,19 @@ export class SettingsDialog extends NavigationDialog {
         label: t('audio'),
         helpUrl: 'https://better-xcloud.github.io/ingame-features/#audio',
         items: [{
-            pref: PrefKey.AUDIO_VOLUME,
-            onChange: (e: any, value: number) => {
-                SoundShortcut.setGainNodeVolume(value);
-            },
+            pref: StreamPref.AUDIO_VOLUME,
             params: {
-                disabled: !getPref(PrefKey.AUDIO_VOLUME_CONTROL_ENABLED),
+                disabled: !getGlobalPref(GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED),
             },
             onCreated: (setting: SettingTabSectionItem, $elm: HTMLElement) => {
                 const $range = $elm.querySelector<HTMLInputElement>('input[type=range')!;
-                window.addEventListener(BxEvent.SETTINGS_CHANGED, e => {
-                    const { storageKey, settingKey, settingValue } = e as any;
-                    if (storageKey !== StorageKey.GLOBAL || settingKey !== PrefKey.AUDIO_VOLUME) {
-                        return;
-                    }
 
-                    $range.value = settingValue;
-                    BxEvent.dispatch($range, 'input', {
-                        ignoreOnChange: true,
-                    });
+                BxEventBus.Stream.on('setting.changed', payload => {
+                    const { settingKey } = payload;
+                    if (settingKey === StreamPref.AUDIO_VOLUME) {
+                        $range.value = getStreamPref(settingKey).toString();
+                        BxEvent.dispatch($range, 'input', { ignoreOnChange: true });
+                    }
                 });
             },
         }],
@@ -451,87 +447,41 @@ export class SettingsDialog extends NavigationDialog {
         group: 'video',
         label: t('video'),
         helpUrl: 'https://better-xcloud.github.io/ingame-features/#video',
-        items: [{
-            pref: PrefKey.VIDEO_PLAYER_TYPE,
-            onChange: onChangeVideoPlayerType,
-        }, {
-            pref: PrefKey.VIDEO_MAX_FPS,
-            onChange: e => {
-                limitVideoPlayerFps(parseInt(e.target.value));
-            },
-        }, {
-            pref: PrefKey.VIDEO_POWER_PREFERENCE,
-            onChange: () => {
-                const streamPlayer = STATES.currentStream.streamPlayer;
-                if (!streamPlayer) {
-                    return;
-                }
-
-                streamPlayer.reloadPlayer();
-                updateVideoPlayer();
-            },
-        }, {
-            pref: PrefKey.VIDEO_PROCESSING,
-            onChange: updateVideoPlayer,
-        }, {
-            pref: PrefKey.VIDEO_RATIO,
-            onChange: updateVideoPlayer,
-        }, {
-            pref: PrefKey.VIDEO_POSITION,
-            onChange: updateVideoPlayer,
-        }, {
-            pref: PrefKey.VIDEO_SHARPNESS,
-            onChange: updateVideoPlayer,
-        }, {
-            pref: PrefKey.VIDEO_SATURATION,
-            onChange: updateVideoPlayer,
-        }, {
-            pref: PrefKey.VIDEO_CONTRAST,
-            onChange: updateVideoPlayer,
-        }, {
-            pref: PrefKey.VIDEO_BRIGHTNESS,
-            onChange: updateVideoPlayer,
-        }],
+        items: [
+            StreamPref.VIDEO_PLAYER_TYPE,
+            StreamPref.VIDEO_MAX_FPS,
+            StreamPref.VIDEO_POWER_PREFERENCE,
+            StreamPref.VIDEO_PROCESSING,
+            StreamPref.VIDEO_RATIO,
+            StreamPref.VIDEO_POSITION,
+            StreamPref.VIDEO_SHARPNESS,
+            StreamPref.VIDEO_SATURATION,
+            StreamPref.VIDEO_CONTRAST,
+            StreamPref.VIDEO_BRIGHTNESS,
+        ],
     }];
 
-    private readonly TAB_CONTROLLER_ITEMS: Array<SettingTabSection | HTMLElement | false> = [isFullVersion() && STATES.browser.capabilities.deviceVibration && {
-        group: 'device',
-        label: t('device'),
-        items: [{
-            pref: PrefKey.DEVICE_VIBRATION_MODE,
-            multiLines: true,
-            unsupported: !STATES.browser.capabilities.deviceVibration,
-            onChange: () => StreamSettings.refreshControllerSettings(),
-        }, {
-            pref: PrefKey.DEVICE_VIBRATION_INTENSITY,
-            unsupported: !STATES.browser.capabilities.deviceVibration,
-            onChange: () => StreamSettings.refreshControllerSettings(),
-        }],
-    }, {
+    private readonly TAB_CONTROLLER_ITEMS: Array<SettingTabSection | HTMLElement | false> = isFullVersion() ? [{
         group: 'controller',
         label: t('controller'),
         helpUrl: 'https://better-xcloud.github.io/ingame-features/#controller',
         items: [
-        isFullVersion() && {
-            pref: PrefKey.LOCAL_CO_OP_ENABLED,
-            onChange: () => { BxExposed.toggleLocalCoOp(getPref(PrefKey.LOCAL_CO_OP_ENABLED)); },
-        },
-        isFullVersion() && {
-            pref: PrefKey.CONTROLLER_POLLING_RATE,
-            onChange: () => StreamSettings.refreshControllerSettings(),
-        }, isFullVersion() && ($parent => {
-            $parent.appendChild(ControllerExtraSettings.renderSettings.apply(this));
-        })],
+            StreamPref.LOCAL_CO_OP_ENABLED,
+            StreamPref.CONTROLLER_POLLING_RATE,
+            ($parent => {
+                $parent.appendChild(ControllerExtraSettings.renderSettings.apply(this));
+            }),
+        ],
     },
 
-    isFullVersion() && STATES.userAgent.capabilities.touch && {
+    STATES.userAgent.capabilities.touch && {
         group: 'touch-control',
         label: t('touch-controller'),
         items: [{
             label: t('layout'),
             content: CE('select', {
                 disabled: true,
-            }, CE('option', {}, t('default'))),
+            }, CE('option', false, t('default'))),
             onCreated: (setting: SettingTabSectionItem, $elm: HTMLSelectElement) => {
                 $elm.addEventListener('input', e => {
                     TouchController.applyCustomLayout($elm.value, 1000);
@@ -576,69 +526,57 @@ export class SettingsDialog extends NavigationDialog {
                 });
             },
         }],
-    }];
+    },
 
-    private readonly TAB_MKB_ITEMS: (() => Array<SettingTabSection | false>) = () => [
-        isFullVersion() && {
+    STATES.browser.capabilities.deviceVibration && {
+        group: 'device',
+        label: t('device'),
+        items: [{
+            pref: StreamPref.DEVICE_VIBRATION_MODE,
+            multiLines: true,
+            unsupported: !STATES.browser.capabilities.deviceVibration,
+        }, {
+            pref: StreamPref.DEVICE_VIBRATION_INTENSITY,
+            unsupported: !STATES.browser.capabilities.deviceVibration,
+        }],
+    }] : [];
+
+    private readonly TAB_MKB_ITEMS: Array<SettingTabSection | false> = isFullVersion() ? [
+        {
             requiredVariants: 'full',
             group: 'mkb',
             label: t('mouse-and-keyboard'),
             helpUrl: 'https://better-xcloud.github.io/mouse-and-keyboard/',
             items: [
-                isFullVersion() && (($parent: HTMLElement) => {
+                ($parent: HTMLElement) => {
                     $parent.appendChild(MkbExtraSettings.renderSettings.apply(this));
-                })
+                },
             ],
         },
 
-        isFullVersion() && NativeMkbHandler.isAllowed() && {
+        NativeMkbHandler.isAllowed() && {
             requiredVariants: 'full',
             group: 'native-mkb',
             label: t('native-mkb'),
-            items: isFullVersion() ? [{
-                pref: PrefKey.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY,
-                onChange: (e: any, value: number) => {
-                    NativeMkbHandler.getInstance()?.setVerticalScrollMultiplier(value / 100);
-                },
-            }, {
-                pref: PrefKey.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY,
-                onChange: (e: any, value: number) => {
-                    NativeMkbHandler.getInstance()?.setHorizontalScrollMultiplier(value / 100);
-                },
-        }] : [],
-    }];
+            items: [
+                StreamPref.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY,
+                StreamPref.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY,
+            ],
+    }] : [];
 
     private readonly TAB_STATS_ITEMS: Array<SettingTabSection | false> = [{
         group: 'stats',
         label: t('stream-stats'),
         helpUrl: 'https://better-xcloud.github.io/stream-stats/',
-        items: [{
-                pref: PrefKey.STATS_SHOW_WHEN_PLAYING,
-            }, {
-                pref: PrefKey.STATS_QUICK_GLANCE_ENABLED,
-                onChange: (e: InputEvent) => {
-                    const streamStats = StreamStats.getInstance();
-                    (e.target! as HTMLInputElement).checked ? streamStats.quickGlanceSetup() : streamStats.quickGlanceStop();
-                },
-            }, {
-                pref: PrefKey.STATS_ITEMS,
-                onChange: StreamStats.refreshStyles,
-            }, {
-                pref: PrefKey.STATS_POSITION,
-                onChange: StreamStats.refreshStyles,
-            }, {
-                pref: PrefKey.STATS_TEXT_SIZE,
-                onChange: StreamStats.refreshStyles,
-            }, {
-                pref: PrefKey.STATS_OPACITY,
-                onChange: StreamStats.refreshStyles,
-            }, {
-                pref: PrefKey.STATS_TRANSPARENT,
-                onChange: StreamStats.refreshStyles,
-            }, {
-                pref: PrefKey.STATS_CONDITIONAL_FORMATTING,
-                onChange: StreamStats.refreshStyles,
-            },
+        items: [
+            StreamPref.STATS_SHOW_WHEN_PLAYING,
+            StreamPref.STATS_QUICK_GLANCE_ENABLED,
+            StreamPref.STATS_ITEMS,
+            StreamPref.STATS_POSITION,
+            StreamPref.STATS_TEXT_SIZE,
+            StreamPref.STATS_OPACITY_ALL,
+            StreamPref.STATS_OPACITY_BACKGROUND,
+            StreamPref.STATS_CONDITIONAL_FORMATTING,
         ],
     }];
 
@@ -666,7 +604,6 @@ export class SettingsDialog extends NavigationDialog {
             group: 'mkb',
             icon: BxIcon.NATIVE_MKB,
             items: this.TAB_MKB_ITEMS,
-            lazyContent: true,
             requiredVariants: 'full',
         },
 
@@ -681,6 +618,8 @@ export class SettingsDialog extends NavigationDialog {
         super();
         BxLogger.info(this.LOG_TAG, 'constructor()');
 
+        this.boundOnContextMenu = this.onContextMenu.bind(this);
+        this.settingsManager = SettingsManager.getInstance();
         this.renderFullSettings = STATES.supportedRegion && STATES.isSignedIn;
         this.setupDialog();
 
@@ -694,13 +633,17 @@ export class SettingsDialog extends NavigationDialog {
             }
 
             // Trigger event
-            const $selectUserAgent = document.querySelector<HTMLSelectElement>(`#bx_setting_${escapeCssSelector(PrefKey.USER_AGENT_PROFILE)}`);
+            const $selectUserAgent = document.querySelector<HTMLSelectElement>(`#bx_setting_${escapeCssSelector(GlobalPref.USER_AGENT_PROFILE)}`);
             if ($selectUserAgent) {
                 $selectUserAgent.disabled = true;
                 BxEvent.dispatch($selectUserAgent, 'input', {});
                 $selectUserAgent.disabled = false;
             }
         });
+
+        BxEventBus.Stream.on('gameSettings.switched', ({ id }) => {
+            this.$tabContents.dataset.gameId = id.toString();
+        });
     }
 
     getDialog(): NavigationDialog {
@@ -740,21 +683,6 @@ export class SettingsDialog extends NavigationDialog {
     private onTabClicked = (e: Event) => {
         const $svg = (e.target as SVGElement).closest('svg')!;
 
-        // Render tab content lazily
-        if (!!$svg.dataset.lazy) {
-            // Remove attribute
-            delete $svg.dataset.lazy;
-            // Render data
-            const settingTab = this.SETTINGS_UI[$svg.dataset.group as SettingTabGroup];
-            if (!settingTab) {
-                return;
-            }
-
-            const items = (settingTab.items as Function)();
-            const $tabContent = this.renderSettingsSection.call(this, settingTab, items);
-            this.$tabContents.appendChild($tabContent);
-        }
-
         // Switch tab
         let $child: HTMLElement;
         const children = Array.from(this.$tabContents.children) as HTMLElement[];
@@ -764,15 +692,16 @@ export class SettingsDialog extends NavigationDialog {
                 $child.classList.remove('bx-gone');
 
                 // Calculate size of controller-friendly select boxes
-                if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
-                    this.dialogManager.calculateSelectBoxes($child as HTMLElement);
-                }
-            } else {
+                calculateSelectBoxes($child as HTMLElement);
+            } else if ($child.dataset.tabGroup) {
                 // Hide tab content
                 $child.classList.add('bx-gone');
             }
         }
 
+        // Toggle stream settings selection
+        this.$streamSettingsSelection.classList.toggle('bx-gone', $svg.dataset.group === 'global');
+
         // Highlight current tab button
         for (const $child of Array.from(this.$tabs.children)) {
             $child.classList.remove('bx-active');
@@ -785,10 +714,8 @@ export class SettingsDialog extends NavigationDialog {
         const $svg = createSvgIcon(settingTab.icon as any);
         $svg.dataset.group = settingTab.group;
         $svg.tabIndex = 0;
-        settingTab.lazyContent && ($svg.dataset.lazy = settingTab.lazyContent.toString());
 
         $svg.addEventListener('click', this.onTabClicked);
-
         return $svg;
     }
 
@@ -803,8 +730,14 @@ export class SettingsDialog extends NavigationDialog {
         this.$btnGlobalReload.classList.add('bx-danger');
     }
 
+    private onContextMenu(e: Event) {
+        e.preventDefault();
+        const $elm = e.target;
+        $elm instanceof HTMLElement && this.resetHighlightedSetting($elm);
+    }
+
     private renderServerSetting(setting: SettingTabSectionItem): HTMLElement {
-        let selectedValue = getPref<ServerRegionName>(PrefKey.SERVER_REGION);
+        let selectedValue = getGlobalPref(GlobalPref.SERVER_REGION);
 
         const continents: Record<ServerContinent, {
             label: string,
@@ -830,15 +763,14 @@ export class SettingsDialog extends NavigationDialog {
             },
         };
 
-        const $control = CE<HTMLSelectElement>('select', {
+        const $control = CE('select', {
             id: `bx_setting_${escapeCssSelector(setting.pref!)}`,
-            title: setting.label,
             tabindex: 0,
         });
         $control.name = $control.id;
 
         $control.addEventListener('input', (e: Event) => {
-            setPref(setting.pref!, (e.target as HTMLSelectElement).value);
+            setGlobalPref(setting.pref! as GlobalPref, (e.target as HTMLSelectElement).value, 'ui');
             this.onGlobalSettingChanged(e);
         });
 
@@ -859,7 +791,7 @@ export class SettingsDialog extends NavigationDialog {
 
             setting.options[value] = label;
 
-            const $option = CE<HTMLOptionElement>('option', { value }, label);
+            const $option = CE('option', { value }, label);
             const continent = continents[region.contintent];
             if (!continent.children) {
                 continent.children = [];
@@ -890,13 +822,14 @@ export class SettingsDialog extends NavigationDialog {
     }
 
     private renderSettingRow(settingTab: SettingTab, $tabContent: HTMLElement, settingTabContent: SettingTabSection, setting: SettingTabSectionItem | string) {
+        // Convert pref key to object
         if (typeof setting === 'string') {
             setting = {
-                pref: setting as PrefKey,
+                pref: setting as AnyPref,
             } satisfies SettingTabSectionItem;
         }
 
-        const pref = setting.pref;
+        const pref = setting.pref!;
 
         let $control;
         if (setting.content) {
@@ -906,13 +839,13 @@ export class SettingsDialog extends NavigationDialog {
                 $control = setting.content;
             }
         } else if (!setting.unsupported) {
-            if (pref === PrefKey.SERVER_REGION) {
+            if (pref === GlobalPref.SERVER_REGION) {
                 $control = this.renderServerSetting(setting);
-            } else if (pref === PrefKey.SCRIPT_LOCALE) {
-                $control = SettingElement.fromPref(pref, STORAGE.Global, async (e: Event) => {
+            } else if (pref === GlobalPref.SCRIPT_LOCALE) {
+                $control = SettingElement.fromPref(pref, async (e: Event) => {
                     const newLocale = (e.target as HTMLSelectElement).value;
 
-                    if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                    if (getGlobalPref(GlobalPref.UI_CONTROLLER_FRIENDLY)) {
                         let timeoutId = (e.target as any).timeoutId;
                         timeoutId && window.clearTimeout(timeoutId);
                         (e.target as any).timeoutId = window.setTimeout(() => {
@@ -927,8 +860,8 @@ export class SettingsDialog extends NavigationDialog {
 
                     this.onGlobalSettingChanged(e);
                 });
-            } else if (pref === PrefKey.USER_AGENT_PROFILE) {
-                $control = SettingElement.fromPref(PrefKey.USER_AGENT_PROFILE, STORAGE.Global, (e: Event) => {
+            } else if (pref === GlobalPref.USER_AGENT_PROFILE) {
+                $control = SettingElement.fromPref(GlobalPref.USER_AGENT_PROFILE, (e: Event) => {
                     const $target = e.target as HTMLSelectElement;
                     const value = $target.value as UserAgentProfile;
                     let isCustom = value === UserAgentProfile.CUSTOM;
@@ -944,25 +877,21 @@ export class SettingsDialog extends NavigationDialog {
                     !(e.target as HTMLInputElement).disabled && this.onGlobalSettingChanged(e);
                 });
             } else {
-                let onChange = setting.onChange;
-                if (!onChange && settingTab.group === 'global') {
-                    onChange = this.onGlobalSettingChanged;
+                $control = this.settingsManager.getElement(pref, setting.params);
+                if (settingTab.group === 'global') {
+                    $control.addEventListener('input', this.onGlobalSettingChanged);
                 }
-
-                $control = SettingElement.fromPref(pref as PrefKey, STORAGE.Global, onChange, setting.params);
             }
 
             // Replace <select> with controller-friendly one
             if ($control instanceof HTMLSelectElement) {
                 $control = BxSelectElement.create($control);
             }
-
-            pref && (this.settingElements[pref] = $control);
         }
 
         let prefDefinition: SettingDefinition | null = null;
         if (pref) {
-            prefDefinition = getPrefDefinition(pref);
+            prefDefinition = getPrefInfo(pref).definition;
         }
 
         if (prefDefinition && !this.isSupportedVariant(prefDefinition.requiredVariants)) {
@@ -1010,6 +939,9 @@ export class SettingsDialog extends NavigationDialog {
         const $row = createSettingRow(label, !prefDefinition?.unsupported && $control, {
             $note,
             multiLines: setting.multiLines,
+            icon: prefDefinition?.labelIcon,
+            onContextMenu: this.boundOnContextMenu,
+            pref: pref,
         });
         if (pref) {
             $row.htmlFor = `bx_setting_${escapeCssSelector(pref)}`;
@@ -1023,7 +955,9 @@ export class SettingsDialog extends NavigationDialog {
     private renderSettingsSection(settingTab: SettingTab, sections: Array<SettingTabSection | HTMLElement | false>): HTMLElement {
         const $tabContent = CE('div', {
             class: 'bx-gone',
-            'data-tab-group': settingTab.group,
+            _dataset: {
+                tabGroup: settingTab.group,
+            },
         });
 
         for (const section of sections) {
@@ -1069,7 +1003,7 @@ export class SettingsDialog extends NavigationDialog {
                         orientation: 'horizontal',
                     }
                 },
-                    CE('span', {}, label),
+                    CE('span', false, label),
                     section.helpUrl && createButton({
                             icon: BxIcon.QUESTION,
                             style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
@@ -1149,7 +1083,7 @@ export class SettingsDialog extends NavigationDialog {
                         focus: () => this.focusActiveTab(),
                     },
                 }),
-                CE('div', {},
+                CE('div', false,
                     this.$btnReload = createButton({
                         icon: BxIcon.REFRESH,
                         style: ButtonStyle.FOCUSABLE | ButtonStyle.DROP_SHADOW,
@@ -1168,21 +1102,31 @@ export class SettingsDialog extends NavigationDialog {
                 ),
             ),
 
-            $tabContents = CE('div', {
-                class: 'bx-settings-tab-contents',
-                _nearby: {
-                    orientation: 'vertical',
-                    focus: () => this.jumpToSettingGroup('next'),
-                    loop: direction => {
-                        if (direction === NavigationDirection.UP || direction === NavigationDirection.DOWN) {
-                            this.focusVisibleSetting(direction === NavigationDirection.UP ? 'last' : 'first');
-                            return true;
-                        }
+            CE('div', {
+                    class: 'bx-settings-tab-contents',
+                    _nearby: {
+                        orientation: 'vertical',
+                        loop: direction => {
+                            if (direction === NavigationDirection.UP || direction === NavigationDirection.DOWN) {
+                                this.focusVisibleSetting(direction === NavigationDirection.UP ? 'last' : 'first');
+                                return true;
+                            }
 
-                        return false;
-                    },
+                            return false;
+                        },
+                    }
                 },
-            }),
+                // Render global/per-game settings selection
+                this.$streamSettingsSelection = SettingsManager.getInstance().getStreamSettingsSelection(),
+
+                $tabContents = CE('div', {
+                    class: 'bx-settings-tab-content',
+                    _nearby: {
+                        orientation: 'vertical',
+                        focus: () => this.jumpToSettingGroup('next'),
+                    },
+                }),
+            ),
         );
 
         this.$container = $container;
@@ -1198,6 +1142,7 @@ export class SettingsDialog extends NavigationDialog {
             }
         });
 
+        // Render tab contents
         let settingTabGroup: keyof typeof this.SETTINGS_UI
         for (settingTabGroup in this.SETTINGS_UI) {
             const settingTab = this.SETTINGS_UI[settingTabGroup];
@@ -1219,11 +1164,6 @@ export class SettingsDialog extends NavigationDialog {
             const $svg = this.renderTab(settingTab);
             $tabs.appendChild($svg);
 
-            // Don't render lazy tab content
-            if (typeof settingTab.items === 'function') {
-                continue;
-            }
-
             const $tabContent = this.renderSettingsSection.call(this, settingTab, settingTab.items);
             $tabContents.appendChild($tabContent);
         }
@@ -1344,6 +1284,44 @@ export class SettingsDialog extends NavigationDialog {
         return false;
     }
 
+    private resetHighlightedSetting($elm?: HTMLElement) {
+        const targetGameId = SettingsManager.getInstance().getTargetGameId();
+        if (targetGameId < 0) {
+            return;
+        }
+
+        if (!$elm) {
+            // Get focusing element
+            $elm = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
+        }
+
+        const $row = $elm?.closest('div[data-tab-group] > .bx-settings-row');
+        if (!$row) {
+            return;
+        }
+
+        const pref = ($row as any).prefKey;
+        if (!pref) {
+            alert('Pref not found: ' + $row.id);
+        }
+
+        if (!isStreamPref(pref)) {
+            return;
+        }
+
+        // Delete settings
+        const gameSettings = STORAGE.Stream.getGameSettings(targetGameId);
+        const deleted = gameSettings?.deleteSetting(pref);
+        if (deleted) {
+            BxEventBus.Stream.emit('setting.changed', {
+                storageKey: `${StorageKey.STREAM}.${targetGameId}`,
+                settingKey: pref,
+            });
+        }
+
+        return deleted;
+    }
+
     handleKeyPress(key: string): boolean {
         let handled = true;
         switch (key) {
@@ -1362,6 +1340,9 @@ export class SettingsDialog extends NavigationDialog {
             case 'PageDown':
                 this.jumpToSettingGroup('next');
                 break;
+            case 'KeyQ':
+                this.resetHighlightedSetting();
+                break;
             default:
                 handled = false;
                 break;
@@ -1394,6 +1375,9 @@ export class SettingsDialog extends NavigationDialog {
             case GamepadKey.RT:
                 this.jumpToSettingGroup('next');
                 break;
+            case GamepadKey.X:
+                this.resetHighlightedSetting();
+                break;
             default:
                 handled = false;
                 break;

src/modules/ui/dialog/settings/controller-extra.ts

@@ -1,14 +1,17 @@
 import { BxEvent } from "@/utils/bx-event";
-import { getUniqueGamepadNames } from "@/utils/gamepad";
-import { CE, removeChildElements, createButton, ButtonStyle, createSettingRow, renderPresetsList } from "@/utils/html";
+import { getUniqueGamepadNames, simplifyGamepadName } from "@/utils/gamepad";
+import { CE, removeChildElements, createButton, ButtonStyle, createSettingRow, renderPresetsList, calculateSelectBoxes } from "@/utils/html";
 import { t } from "@/utils/translation";
 import { BxSelectElement } from "@/web-components/bx-select";
 import { ControllerShortcutsManagerDialog } from "../profile-manger/controller-shortcuts-manager-dialog";
 import type { SettingsDialog } from "../settings-dialog";
 import { ControllerShortcutsTable } from "@/utils/local-db/controller-shortcuts-table";
-import { BxNumberStepper } from "@/web-components/bx-number-stepper";
-import { ControllerSettingsTable } from "@/utils/local-db/controller-settings-table";
 import { StreamSettings } from "@/utils/stream-settings";
+import { ControllerCustomizationsTable } from "@/utils/local-db/controller-customizations-table";
+import { ControllerCustomizationsManagerDialog } from "../profile-manger/controller-customizations-manager-dialog";
+import { BxIcon } from "@/utils/bx-icon";
+import { getStreamPref, setStreamPref, STORAGE } from "@/utils/pref-utils";
+import { StreamPref } from "@/enums/pref-keys";
 
 export class ControllerExtraSettings extends HTMLElement {
     currentControllerId!: string;
@@ -16,24 +19,34 @@ export class ControllerExtraSettings extends HTMLElement {
 
     $selectControllers!: BxSelectElement;
     $selectShortcuts!: BxSelectElement;
-    $vibrationIntensity!: BxNumberStepper;
+    $selectCustomization!: BxSelectElement;
+    $summaryCustomization!: HTMLElement;
 
-    updateLayout!: () => void;
-    switchController!: (id: string) => void;
-    getCurrentControllerId!: () => string | null;
-    saveSettings!: () => void;
+    updateLayout!: typeof ControllerExtraSettings['updateLayout'];
+    switchController!: typeof ControllerExtraSettings['switchController'];
+    getCurrentControllerId!: typeof ControllerExtraSettings['getCurrentControllerId'];
+    saveSettings!: typeof ControllerExtraSettings['saveSettings'];
+    updateCustomizationSummary!: typeof ControllerExtraSettings['updateCustomizationSummary'];
+    setValue!: typeof ControllerExtraSettings['setValue'];
 
     static renderSettings(this: SettingsDialog): HTMLElement {
-        const $container = CE<ControllerExtraSettings>('label', {
+        const $container = CE('label', {
             class: 'bx-settings-row bx-controller-extra-settings',
-        });
+        }) as unknown as ControllerExtraSettings;
+
+        // Setting up for Settings Manager
+        ($container as any).prefKey = StreamPref.CONTROLLER_SETTINGS;
+        $container.addEventListener('contextmenu', this.boundOnContextMenu);
+        this.settingsManager.setElement(StreamPref.CONTROLLER_SETTINGS, $container);
 
         $container.updateLayout = ControllerExtraSettings.updateLayout.bind($container);
         $container.switchController = ControllerExtraSettings.switchController.bind($container);
         $container.getCurrentControllerId = ControllerExtraSettings.getCurrentControllerId.bind($container);
         $container.saveSettings = ControllerExtraSettings.saveSettings.bind($container);
+        $container.setValue = ControllerExtraSettings.setValue.bind($container);
 
-        const $selectControllers = BxSelectElement.create(CE<HTMLSelectElement>('select', {
+        const $selectControllers = BxSelectElement.create(CE('select', {
+            class: 'bx-full-width',
             autocomplete: 'off',
             _on: {
                 input: (e: Event) => {
@@ -41,43 +54,63 @@ export class ControllerExtraSettings extends HTMLElement {
                 },
             },
         }));
-        $selectControllers.classList.add('bx-full-width');
 
-        const $selectShortcuts = BxSelectElement.create(CE<HTMLSelectElement>('select', {
+        const $selectShortcuts = BxSelectElement.create(CE('select', {
+            autocomplete: 'off',
+            _on: { input: $container.saveSettings },
+        }));
+
+        const $selectCustomization = BxSelectElement.create(CE('select', {
             autocomplete: 'off',
             _on: {
-                input: $container.saveSettings,
+                input: async () => {
+                    // Update summary
+                    ControllerExtraSettings.updateCustomizationSummary.call($container);
+                    // Save settings
+                    $container.saveSettings();
+                },
             },
         }));
 
-        const $vibrationIntensity = BxNumberStepper.create('controller_vibration_intensity', 50, 0, 100, {
-            steps: 10,
-            suffix: '%',
-            exactTicks: 20,
-            customTextValue: (value: any) => {
-                value = parseInt(value);
-                return value === 0 ? t('off') : value + '%';
+        const $rowCustomization = createSettingRow(
+            t('in-game-controller-customization'),
+            CE('div', {
+                class: 'bx-preset-row',
+                _nearby: { orientation: 'horizontal' },
             },
-        }, $container.saveSettings);
+                $selectCustomization,
+                createButton({
+                    title: t('manage'),
+                    icon: BxIcon.MANAGE,
+                    style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY | ButtonStyle.AUTO_HEIGHT,
+                    onClick: () => ControllerCustomizationsManagerDialog.getInstance().show({
+                        id: $container.$selectCustomization.value ? parseInt($container.$selectCustomization.value) : null,
+                    }),
+                }),
+            ),
+            { multiLines: true },
+        );
+        $rowCustomization.appendChild(
+            $container.$summaryCustomization = CE('div'),
+        );
 
         $container.append(
-            CE('span', {}, t('no-controllers-connected')),
+            CE('span', false, t('no-controllers-connected')),
             CE('div', { class: 'bx-controller-extra-wrapper' },
                 $selectControllers,
 
                 CE('div', { class: 'bx-sub-content-box' },
                     createSettingRow(
-                        t('controller-shortcuts-in-game'),
+                        t('in-game-controller-shortcuts'),
                         CE('div', {
                             class: 'bx-preset-row',
-                            _nearby: {
-                                orientation: 'horizontal',
-                            },
+                            _nearby: { orientation: 'horizontal' },
                         },
                             $selectShortcuts,
                             createButton({
-                                label: t('manage'),
-                                style: ButtonStyle.FOCUSABLE,
+                                title: t('manage'),
+                                icon: BxIcon.MANAGE,
+                                style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY | ButtonStyle.AUTO_HEIGHT,
                                 onClick: () => ControllerShortcutsManagerDialog.getInstance().show({
                                     id: parseInt($container.$selectShortcuts.value),
                                 }),
@@ -86,17 +119,14 @@ export class ControllerExtraSettings extends HTMLElement {
                         { multiLines: true },
                     ),
 
-                    createSettingRow(
-                        t('vibration-intensity'),
-                        $vibrationIntensity,
-                    ),
+                    $rowCustomization,
                 ),
             ),
         );
 
         $container.$selectControllers = $selectControllers;
         $container.$selectShortcuts = $selectShortcuts;
-        $container.$vibrationIntensity = $vibrationIntensity;
+        $container.$selectCustomization = $selectCustomization;
 
         $container.updateLayout();
 
@@ -112,7 +142,17 @@ export class ControllerExtraSettings extends HTMLElement {
         return $container;
     }
 
-    private static async updateLayout(this: ControllerExtraSettings, e?: GamepadEvent) {
+    private static async updateCustomizationSummary(this: ControllerExtraSettings) {
+        const presetId = parseInt(this.$selectCustomization.value);
+        const $summaryContent = await ControllerCustomizationsManagerDialog.getInstance().renderSummary(presetId);
+
+        removeChildElements(this.$summaryCustomization);
+        if ($summaryContent) {
+            this.$summaryCustomization.appendChild($summaryContent);
+        }
+    }
+
+    private static async updateLayout(this: ControllerExtraSettings) {
         this.controllerIds = getUniqueGamepadNames();
 
         this.dataset.hasGamepad = (this.controllerIds.length > 0).toString();
@@ -128,7 +168,7 @@ export class ControllerExtraSettings extends HTMLElement {
 
         // Render controller list
         for (const name of this.controllerIds) {
-            const $option = CE<HTMLOptionElement>('option', { value: name }, name);
+            const $option = CE('option', { value: name }, simplifyGamepadName(name));
             $fragment.appendChild($option);
         }
 
@@ -136,14 +176,19 @@ export class ControllerExtraSettings extends HTMLElement {
 
         // Render shortcut presets
         const allShortcutPresets = await ControllerShortcutsTable.getInstance().getPresets();
-        renderPresetsList(this.$selectShortcuts, allShortcutPresets, null, true);
+        renderPresetsList(this.$selectShortcuts, allShortcutPresets, null, { addOffValue: true });
+
+        // Render customization presets
+        const allCustomizationPresets = await ControllerCustomizationsTable.getInstance().getPresets();
+        renderPresetsList(this.$selectCustomization, allCustomizationPresets, null, { addOffValue: true });
 
         for (const name of this.controllerIds) {
-            const $option = CE<HTMLOptionElement>('option', { value: name }, name);
+            const $option = CE('option', { value: name }, name);
             $fragment.appendChild($option);
         }
 
         BxEvent.dispatch(this.$selectControllers, 'input');
+        calculateSelectBoxes(this);
     }
 
     private static async switchController(this: ControllerExtraSettings, id: string) {
@@ -152,11 +197,8 @@ export class ControllerExtraSettings extends HTMLElement {
             return;
         }
 
-        const controllerSettings = await ControllerSettingsTable.getInstance().getControllerData(this.currentControllerId);
-
-        // Update UI
-        this.$selectShortcuts.value = controllerSettings.shortcutPresetId.toString();
-        this.$vibrationIntensity.value = controllerSettings.vibrationIntensity.toString();
+        const controllerSetting = STORAGE.Stream.getControllerSetting(this.currentControllerId);
+        ControllerExtraSettings.updateElements.call(this, controllerSetting);
     }
 
     private static getCurrentControllerId(this: ControllerExtraSettings) {
@@ -186,16 +228,30 @@ export class ControllerExtraSettings extends HTMLElement {
             return;
         }
 
-        const data: ControllerSettingsRecord = {
-            id: this.currentControllerId,
-            data: {
-                shortcutPresetId: parseInt(this.$selectShortcuts.value),
-                vibrationIntensity: parseInt(this.$vibrationIntensity.value),
-            },
+        const controllerSettings = getStreamPref(StreamPref.CONTROLLER_SETTINGS);
+        controllerSettings[this.currentControllerId] = {
+            shortcutPresetId: parseInt(this.$selectShortcuts.value),
+            customizationPresetId: parseInt(this.$selectCustomization.value),
         };
 
-        await ControllerSettingsTable.getInstance().put(data);
-
+        setStreamPref(StreamPref.CONTROLLER_SETTINGS, controllerSettings, 'ui');
         StreamSettings.refreshControllerSettings();
     }
+
+    private static setValue(this: ControllerExtraSettings, value: ControllerSettings) {
+        ControllerExtraSettings.updateElements.call(this, value[this.currentControllerId]);
+    }
+
+    private static updateElements(this: ControllerExtraSettings, controllerSetting: ControllerSetting) {
+        if (!controllerSetting) {
+            return;
+        }
+
+        // Update UI
+        this.$selectShortcuts.value = controllerSetting.shortcutPresetId.toString();
+        this.$selectCustomization.value = controllerSetting.customizationPresetId.toString();
+
+        // Update summary
+        ControllerExtraSettings.updateCustomizationSummary.call(this);
+    }
 }

src/modules/ui/dialog/settings/mkb-extra.ts

@@ -3,15 +3,12 @@ import type { SettingsDialog } from "../settings-dialog";
 import { MkbMappingPresetsTable } from "@/utils/local-db/mkb-mapping-presets-table";
 import { BxSelectElement } from "@/web-components/bx-select";
 import { t } from "@/utils/translation";
-import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
-import { PrefKey } from "@/enums/pref-keys";
-import { StreamSettings } from "@/utils/stream-settings";
+import { getGlobalPref, getStreamPref, setStreamPref } from "@/utils/pref-utils";
+import { GlobalPref, StreamPref } from "@/enums/pref-keys";
 import { MkbMappingManagerDialog } from "../profile-manger/mkb-mapping-manager-dialog";
 import { KeyboardShortcutsManagerDialog } from "../profile-manger/keyboard-shortcuts-manager-dialog";
 import { KeyboardShortcutsTable } from "@/utils/local-db/keyboard-shortcuts-table";
-import { SettingElement } from "@/utils/setting-element";
-import { STORAGE } from "@/utils/global";
-import { EmulatedMkbHandler } from "@/modules/mkb/mkb-handler";
+import { BxIcon } from "@/utils/bx-icon";
 
 export class MkbExtraSettings extends HTMLElement {
     private $mappingPresets!: BxSelectElement;
@@ -28,14 +25,14 @@ export class MkbExtraSettings extends HTMLElement {
         $container.saveMkbSettings = MkbExtraSettings.saveMkbSettings.bind($container);
         $container.saveShortcutsSettings = MkbExtraSettings.saveShortcutsSettings.bind($container);
 
-        const $mappingPresets = BxSelectElement.create(CE<HTMLSelectElement>('select', {
+        const $mappingPresets = BxSelectElement.create(CE('select', {
             autocomplete: 'off',
             _on: {
                 input: $container.saveMkbSettings,
             },
         }));
 
-        const $shortcutsPresets = BxSelectElement.create(CE<HTMLSelectElement>('select', {
+        const $shortcutsPresets = BxSelectElement.create(CE('select', {
             autocomplete: 'off',
             _on: {
                 input: $container.saveShortcutsSettings,
@@ -43,7 +40,7 @@ export class MkbExtraSettings extends HTMLElement {
         }));
 
         $container.append(
-            ...(getPref(PrefKey.MKB_ENABLED) ? [
+            ...(getGlobalPref(GlobalPref.MKB_ENABLED) ? [
                 createSettingRow(
                     t('virtual-controller'),
                     CE('div', {
@@ -54,26 +51,33 @@ export class MkbExtraSettings extends HTMLElement {
                     },
                         $mappingPresets,
                         createButton({
-                            label: t('manage'),
-                            style: ButtonStyle.FOCUSABLE,
+                            title: t('manage'),
+                            icon: BxIcon.MANAGE,
+                            style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY | ButtonStyle.AUTO_HEIGHT,
                             onClick: () => MkbMappingManagerDialog.getInstance().show({
                                 id: parseInt($container.$mappingPresets.value),
                             }),
                         }),
                     ),
-                    { multiLines: true },
+                    {
+                        multiLines: true,
+                        onContextMenu: this.boundOnContextMenu,
+                        pref: StreamPref.MKB_P1_MAPPING_PRESET_ID,
+                    },
                 ),
 
                 createSettingRow(
                     t('virtual-controller-slot'),
-                    SettingElement.fromPref(PrefKey.MKB_P1_SLOT, STORAGE.Global, () => {
-                        EmulatedMkbHandler.getInstance()?.updateGamepadSlots();
-                    }),
+                    this.settingsManager.getElement(StreamPref.MKB_P1_SLOT),
+                    {
+                        onContextMenu: this.boundOnContextMenu,
+                        pref: StreamPref.MKB_P1_SLOT,
+                    },
                 ),
             ] : []),
 
             createSettingRow(
-                t('keyboard-shortcuts-in-game'),
+                t('in-game-keyboard-shortcuts'),
                 CE('div', {
                     class: 'bx-preset-row',
                     _nearby: {
@@ -82,20 +86,28 @@ export class MkbExtraSettings extends HTMLElement {
                 },
                     $shortcutsPresets,
                     createButton({
-                        label: t('manage'),
-                        style: ButtonStyle.FOCUSABLE,
+                        title: t('manage'),
+                        icon: BxIcon.MANAGE,
+                        style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY | ButtonStyle.AUTO_HEIGHT,
                         onClick: () => KeyboardShortcutsManagerDialog.getInstance().show({
                             id: parseInt($container.$shortcutsPresets.value),
                         }),
                     }),
                 ),
-                { multiLines: true },
+                {
+                    multiLines: true,
+                    onContextMenu: this.boundOnContextMenu,
+                    pref: StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID,
+                },
             ),
         );
 
         $container.$mappingPresets = $mappingPresets;
         $container.$shortcutsPresets = $shortcutsPresets;
 
+        this.settingsManager.setElement(StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID, $shortcutsPresets);
+        this.settingsManager.setElement(StreamPref.MKB_P1_MAPPING_PRESET_ID, $mappingPresets);
+
         $container.updateLayout();
         // Refresh layout when parent dialog is shown
         this.onMountedCallbacks.push(() => {
@@ -108,24 +120,20 @@ export class MkbExtraSettings extends HTMLElement {
     private static async updateLayout(this: MkbExtraSettings) {
         // Render shortcut presets
         const mappingPresets = await MkbMappingPresetsTable.getInstance().getPresets();
-        renderPresetsList(this.$mappingPresets, mappingPresets, getPref<MkbPresetId>(PrefKey.MKB_P1_MAPPING_PRESET_ID), false);
+        renderPresetsList(this.$mappingPresets, mappingPresets, getStreamPref(StreamPref.MKB_P1_MAPPING_PRESET_ID));
 
         // Render shortcut presets
         const shortcutsPresets = await KeyboardShortcutsTable.getInstance().getPresets();
-        renderPresetsList(this.$shortcutsPresets, shortcutsPresets, getPref<MkbPresetId>(PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID), true);
+        renderPresetsList(this.$shortcutsPresets, shortcutsPresets, getStreamPref(StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID), { addOffValue: true });
     }
 
     private static async saveMkbSettings(this: MkbExtraSettings) {
         const presetId = parseInt(this.$mappingPresets.value);
-        setPref<MkbPresetId>(PrefKey.MKB_P1_MAPPING_PRESET_ID, presetId);
-
-        StreamSettings.refreshMkbSettings();
+        setStreamPref(StreamPref.MKB_P1_MAPPING_PRESET_ID, presetId, 'ui');
     }
 
     private static async saveShortcutsSettings(this: MkbExtraSettings) {
         const presetId = parseInt(this.$shortcutsPresets.value);
-        setPref<KeyboardShortcutsPresetId>(PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID, presetId);
-
-        StreamSettings.refreshKeyboardShortcuts();
+        setStreamPref(StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID, presetId, 'ui');
     }
 }

src/modules/ui/dialog/settings/suggestions.ts

@@ -1,16 +1,16 @@
-import { PrefKey } from "@/enums/pref-keys";
+import { GlobalPref, StreamPref, type AnyPref } from "@/enums/pref-keys";
 import { BxEvent } from "@/utils/bx-event";
-import { BX_FLAGS, NATIVE_FETCH, type BxFlags } from "@/utils/bx-flags";
-import { STORAGE } from "@/utils/global";
+import { BX_FLAGS, NATIVE_FETCH } from "@/utils/bx-flags";
 import { CE, removeChildElements, createButton, ButtonStyle, escapeCssSelector } from "@/utils/html";
 import type { BxHtmlSettingElement } from "@/utils/setting-element";
-import { getPref, setPref, getPrefDefinition } from "@/utils/settings-storages/global-settings-storage";
 import { t } from "@/utils/translation";
 import { BxSelectElement } from "@/web-components/bx-select";
 import type { SettingsDialog } from "../settings-dialog";
 import type { RecommendedSettings, SuggestedSettingProfile } from "@/types/setting-definition";
 import { DeviceVibrationMode, TouchControllerMode } from "@/enums/pref-values";
 import { GhPagesUtils } from "@/utils/gh-pages";
+import { STORAGE, getPrefInfo, setPref } from "@/utils/pref-utils";
+import { SettingsManager } from "@/modules/settings-manager";
 
 export class SuggestionsSetting {
     static async renderSuggestions(this: SettingsDialog, e: Event) {
@@ -38,16 +38,16 @@ export class SuggestionsSetting {
                 }
 
                 for (const setting of settingTabContent.items) {
-                    let prefKey: PrefKey | undefined;
+                    let prefKey: AnyPref | undefined;
 
                     if (typeof setting === 'string') {
                         prefKey = setting;
                     } else if (typeof setting === 'object') {
-                        prefKey = setting.pref as PrefKey;
+                        prefKey = setting.pref as GlobalPref;
                     }
 
                     if (prefKey) {
-                        this.suggestedSettingLabels[prefKey] = settingTabContent.label;
+                        this.settingLabels[prefKey] = settingTabContent.label;
                     }
                 }
             }
@@ -76,15 +76,15 @@ export class SuggestionsSetting {
         const deviceType = BX_FLAGS.DeviceInfo.deviceType;
         if (deviceType === 'android-handheld') {
             // Disable touch
-            SuggestionsSetting.addDefaultSuggestedSetting.call(this, PrefKey.TOUCH_CONTROLLER_MODE, TouchControllerMode.OFF);
+            SuggestionsSetting.addDefaultSuggestedSetting.call(this, GlobalPref.TOUCH_CONTROLLER_MODE, TouchControllerMode.OFF);
             // Enable device vibration
-            SuggestionsSetting.addDefaultSuggestedSetting.call(this, PrefKey.DEVICE_VIBRATION_MODE, DeviceVibrationMode.ON);
+            SuggestionsSetting.addDefaultSuggestedSetting.call(this, StreamPref.DEVICE_VIBRATION_MODE, DeviceVibrationMode.ON);
         } else if (deviceType === 'android') {
             // Enable device vibration
-            SuggestionsSetting.addDefaultSuggestedSetting.call(this, PrefKey.DEVICE_VIBRATION_MODE, DeviceVibrationMode.AUTO);
+            SuggestionsSetting.addDefaultSuggestedSetting.call(this, StreamPref.DEVICE_VIBRATION_MODE, DeviceVibrationMode.AUTO);
         } else if (deviceType === 'android-tv') {
             // Disable touch
-            SuggestionsSetting.addDefaultSuggestedSetting.call(this, PrefKey.TOUCH_CONTROLLER_MODE, TouchControllerMode.OFF);
+            SuggestionsSetting.addDefaultSuggestedSetting.call(this, GlobalPref.TOUCH_CONTROLLER_MODE, TouchControllerMode.OFF);
         }
 
         // Set value for Default profile
@@ -92,7 +92,7 @@ export class SuggestionsSetting {
 
         // Start rendering
         const $suggestedSettings = CE('div', { class: 'bx-suggest-wrapper' });
-        const $select = CE<HTMLSelectElement>('select', {},
+        const $select = CE('select', false,
             hasRecommendedSettings && CE('option', { value: 'recommended' }, t('recommended')),
             !hasRecommendedSettings && CE('option', { value: 'highest' }, t('highest-quality')),
             CE('option', { value: 'default' }, t('default')),
@@ -116,18 +116,27 @@ export class SuggestionsSetting {
             note && fragment.appendChild(CE('div', { class: 'bx-suggest-note' }, note));
 
             const settings = this.suggestedSettings[profile];
-            let prefKey: PrefKey;
-            for (prefKey in settings) {
+            for (const key in settings) {
+                const { storage, definition } = getPrefInfo(key as AnyPref);
+
+                let prefKey;
+                if (storage === STORAGE.Stream) {
+                    prefKey = key as StreamPref;
+                } else {
+                    prefKey = key as GlobalPref;
+                }
+
                 let suggestedValue;
-                const definition = getPrefDefinition(prefKey);
                 if (definition && definition.transformValue) {
                     suggestedValue = definition.transformValue.get.call(definition, settings[prefKey]);
                 } else {
                     suggestedValue = settings[prefKey];
                 }
 
-                const currentValue = getPref(prefKey, false);
-                const currentValueText = STORAGE.Global.getValueText(prefKey, currentValue);
+                // @ts-ignore
+                const currentValue = storage.getSetting(prefKey, false);
+                // @ts-ignore
+                const currentValueText = storage.getValueText(prefKey, currentValue);
                 const isSameValue = currentValue === suggestedValue;
 
                 let $child: HTMLElement;
@@ -136,12 +145,14 @@ export class SuggestionsSetting {
                     // No changes
                     $value = currentValueText;
                 } else {
-                    const suggestedValueText = STORAGE.Global.getValueText(prefKey, suggestedValue);
+                    // @ts-ignore
+                    const suggestedValueText = storage.getValueText(prefKey, suggestedValue);
                     $value = currentValueText + ' ➔ ' + suggestedValueText;
                 }
 
                 let $checkbox: HTMLInputElement;
-                const breadcrumb = this.suggestedSettingLabels[prefKey] + ' ❯ ' + STORAGE.Global.getLabel(prefKey);
+                // @ts-ignore
+                const breadcrumb = this.settingLabels[prefKey] + ' ❯ ' + storage.getLabel(prefKey);
                 const id = escapeCssSelector(`bx_suggest_${prefKey}`);
 
                 $child = CE('div', {
@@ -182,7 +193,8 @@ export class SuggestionsSetting {
             const profile = $select.value as SuggestedSettingProfile;
             const settings = this.suggestedSettings[profile];
 
-            let prefKey: PrefKey;
+            let prefKey: AnyPref;
+            const settingsManager = SettingsManager.getInstance();
             for (prefKey in settings) {
                 let suggestedValue = settings[prefKey];
 
@@ -191,17 +203,17 @@ export class SuggestionsSetting {
                     continue;
                 }
 
-                const $control = this.settingElements[prefKey] as HTMLElement;
+                const $control = settingsManager.getElement(prefKey);
 
                 // Set value directly if the control element is not available
                 if (!$control) {
-                    setPref(prefKey, suggestedValue);
+                    setPref(prefKey, suggestedValue, 'direct');
                     continue;
                 }
 
                 // Transform value
-                const settingDefinition = getPrefDefinition(prefKey);
-                if (settingDefinition.transformValue) {
+                const { definition: settingDefinition } = getPrefInfo(prefKey);
+                if (settingDefinition?.transformValue) {
                     suggestedValue = settingDefinition.transformValue.get.call(settingDefinition, suggestedValue);
                 }
 
@@ -233,7 +245,7 @@ export class SuggestionsSetting {
                 orientation: 'vertical',
             }
         },
-            BxSelectElement.create($select, true),
+            BxSelectElement.create($select),
             $suggestedSettings,
             $btnApply,
 
@@ -273,7 +285,7 @@ export class SuggestionsSetting {
             const url = GhPagesUtils.getUrl(`devices/${brand}/${board}-${model}.json`);
             const response = await NATIVE_FETCH(url);
             const json = (await response.json()) as RecommendedSettings;
-            const recommended: PartialRecord<PrefKey, any> = {};
+            const recommended: PartialRecord<GlobalPref, any> = {};
 
             // Only supports schema version 2
             if (json.schema_version !== 2) {
@@ -310,7 +322,7 @@ export class SuggestionsSetting {
         return null;
     }
 
-    private static addDefaultSuggestedSetting(this: SettingsDialog, prefKey: PrefKey, value: any) {
+    private static addDefaultSuggestedSetting(this: SettingsDialog, prefKey: AnyPref, value: any) {
         let key: keyof typeof this.suggestedSettings;
         for (key in this.suggestedSettings) {
             if (key !== 'default' && !(prefKey in this.suggestedSettings)) {
@@ -326,10 +338,10 @@ export class SuggestionsSetting {
                 continue;
             }
 
-            let prefKey: PrefKey;
+            let prefKey: AnyPref;
             for (prefKey in this.suggestedSettings[key]) {
                 if (!(prefKey in this.suggestedSettings.default)) {
-                    this.suggestedSettings.default[prefKey] = getPrefDefinition(prefKey).default;
+                    this.suggestedSettings.default[prefKey] = getPrefInfo(prefKey).definition.default;
                 }
             }
         }

src/modules/ui/game-tile.ts

@@ -1,6 +1,6 @@
 import { BxEvent } from "@/utils/bx-event";
 import { BxIcon } from "@/utils/bx-icon";
-import { CE, createSvgIcon, getReactProps, isElementVisible, secondsToHms } from "@/utils/html";
+import { CE, createSvgIcon, getReactProps, isElementVisible, secondsToHm } from "@/utils/html";
 import { XcloudApi } from "@/utils/xcloud-api";
 
 interface GameTimeElement extends HTMLElement {
@@ -30,8 +30,14 @@ export class GameTile {
         if (typeof totalWaitTime === 'number' && isElementVisible($elm)) {
             const $div = CE('div', { class: 'bx-game-tile-wait-time' },
                 createSvgIcon(BxIcon.PLAYTIME),
-                CE('span', {}, secondsToHms(totalWaitTime)),
+                CE('span', false, totalWaitTime < 60 ? totalWaitTime + 's' : secondsToHm(totalWaitTime)),
             );
+
+            const duration = (totalWaitTime >= 15 * 60) ? 'long' : (totalWaitTime >= 10 * 60) ? 'medium' : (totalWaitTime >= 5 * 60 ) ? 'short' : '';
+            if (duration) {
+                $div.dataset.duration = duration;
+            }
+
             $elm.insertAdjacentElement('afterbegin', $div);
         }
     }

src/modules/ui/guide-menu.ts

@@ -7,6 +7,10 @@ import { t } from "@/utils/translation";
 import { SettingsDialog } from "./dialog/settings-dialog";
 import { TrueAchievements } from "@/utils/true-achievements";
 import { BxIcon } from "@/utils/bx-icon";
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { getGlobalPref } from "@/utils/pref-utils";
+import { UiLayout } from "@/enums/pref-values";
+import { GlobalPref } from "@/enums/pref-keys";
 
 export enum GuideMenuTab {
     HOME = 'home',
@@ -37,12 +41,13 @@ export class GuideMenu {
         const buttons = {
             scriptSettings: createButton({
                 label: t('better-xcloud'),
+                icon: BxIcon.BETTER_XCLOUD,
                 style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
                 onClick: () => {
                     // Wait until the Guide dialog is closed
-                    window.addEventListener(BxEvent.XCLOUD_DIALOG_DISMISSED, e => {
+                    BxEventBus.Script.once('dialog.dismissed', () => {
                         setTimeout(() => SettingsDialog.getInstance().show(), 50);
-                    }, { once: true });
+                    });
 
                     // Close all xCloud's dialogs
                     this.closeGuideMenu();
@@ -110,6 +115,11 @@ export class GuideMenu {
             class: 'bx-guide-home-buttons',
         });
 
+        // Set TV tag
+        if (STATES.userAgent.isTv || getGlobalPref(GlobalPref.UI_LAYOUT) === UiLayout.TV) {
+            document.body.dataset.bxMediaType = 'tv';
+        }
+
         for (const $button of buttonsLayout) {
             if (!$button) {
                 continue;

src/modules/ui/header.ts

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with { type: "macro" };
+
 import { SCRIPT_VERSION } from "@utils/global";
 import { createButton, ButtonStyle, CE, isElementVisible } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
@@ -5,8 +7,8 @@ import { getPreferredServerRegion } from "@utils/region";
 import { RemotePlayManager } from "@/modules/remote-play-manager";
 import { t } from "@utils/translation";
 import { SettingsDialog } from "./dialog/settings-dialog";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { GlobalPref } from "@/enums/pref-keys";
+import { getGlobalPref } from "@/utils/pref-utils";
 import { BxLogger } from "@/utils/bx-logger";
 
 export class HeaderSection {
@@ -14,7 +16,7 @@ export class HeaderSection {
     public static getInstance = () => HeaderSection.instance ?? (HeaderSection.instance = new HeaderSection());
     private readonly LOG_TAG = 'HeaderSection';
 
-    private $btnRemotePlay: HTMLElement;
+    private $btnRemotePlay: HTMLElement | null;
     private $btnSettings: HTMLElement;
     private $buttonsWrapper: HTMLElement;
 
@@ -24,13 +26,17 @@ export class HeaderSection {
     constructor() {
         BxLogger.info(this.LOG_TAG, 'constructor()');
 
-        this.$btnRemotePlay = createButton({
-            classes: ['bx-header-remote-play-button', 'bx-gone'],
-            icon: BxIcon.REMOTE_PLAY,
-            title: t('remote-play'),
-            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR,
-            onClick: e => RemotePlayManager.getInstance()?.togglePopup(),
-        });
+        if (isFullVersion()) {
+            this.$btnRemotePlay = createButton({
+                classes: ['bx-header-remote-play-button', 'bx-gone'],
+                icon: BxIcon.REMOTE_PLAY,
+                title: t('remote-play'),
+                style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR,
+                onClick: e => RemotePlayManager.getInstance()?.togglePopup(),
+            });
+        } else {
+            this.$btnRemotePlay = null;
+        }
 
         this.$btnSettings = createButton({
             classes: ['bx-header-settings-button'],
@@ -39,8 +45,8 @@ export class HeaderSection {
             onClick: e => SettingsDialog.getInstance().show(),
         });
 
-        this.$buttonsWrapper = CE('div', {},
-            getPref(PrefKey.REMOTE_PLAY_ENABLED) ? this.$btnRemotePlay : null,
+        this.$buttonsWrapper = CE('div', false,
+            getGlobalPref(GlobalPref.REMOTE_PLAY_ENABLED) ? this.$btnRemotePlay : null,
             this.$btnSettings,
         );
     }
@@ -50,7 +56,7 @@ export class HeaderSection {
             return;
         }
 
-        const PREF_LATEST_VERSION = getPref<VersionLatest>(PrefKey.VERSION_LATEST);
+        const PREF_LATEST_VERSION = getGlobalPref(GlobalPref.VERSION_LATEST);
 
         // Setup Settings button
         const $btnSettings = this.$btnSettings;
@@ -98,7 +104,7 @@ export class HeaderSection {
     }
 
     showRemotePlayButton() {
-        this.$btnRemotePlay.classList.remove('bx-gone');
+        this.$btnRemotePlay?.classList.remove('bx-gone');
     }
 
     static watchHeader() {

src/modules/ui/product-details.ts

@@ -1,7 +1,8 @@
 import { BX_FLAGS } from "@/utils/bx-flags";
 import { BxIcon } from "@/utils/bx-icon";
 import { AppInterface } from "@/utils/global";
-import { ButtonStyle, CE, createButton } from "@/utils/html";
+import { ButtonStyle, CE, createButton, createSvgIcon } from "@/utils/html";
+import { LocalCoOpManager } from "@/utils/local-co-op-manager";
 import { t } from "@/utils/translation";
 import { parseDetailsPath } from "@/utils/utils";
 
@@ -28,21 +29,33 @@ export class ProductDetailsPage {
     private static injectTimeoutId: number | null = null;
 
     static injectButtons() {
-        if (!AppInterface) {
-            return;
-        }
-
         ProductDetailsPage.injectTimeoutId && clearTimeout(ProductDetailsPage.injectTimeoutId);
         ProductDetailsPage.injectTimeoutId = window.setTimeout(() => {
-            // Find action buttons container
-            const $container = document.querySelector('div[class*=ActionButtons-module__container]');
-            if ($container && $container.parentElement) {
-                $container.parentElement.appendChild(CE('div', {
-                    class: 'bx-product-details-buttons',
-                },
-                    ['android-handheld', 'android'].includes(BX_FLAGS.DeviceInfo.deviceType) && ProductDetailsPage.$btnShortcut,
-                    ProductDetailsPage.$btnWallpaper,
-                ));
+            // Inputs
+            const $inputsContainer = document.querySelector<HTMLElement>('div[class*="Header-module__gamePassAndInputsContainer"]');
+            if ($inputsContainer && !$inputsContainer.dataset.bxInjected) {
+                $inputsContainer.dataset.bxInjected = 'true';
+
+                const { productId } = parseDetailsPath(window.location.pathname);
+                if (LocalCoOpManager.getInstance().isSupported(productId || '')) {
+                    $inputsContainer.insertAdjacentElement('afterend', CE('div', {
+                        class: 'bx-product-details-icons bx-frosted',
+                    }, createSvgIcon(BxIcon.LOCAL_CO_OP), t('local-co-op')));
+                }
+            }
+
+            // Inject buttons for Android app
+            if (AppInterface) {
+                // Find action buttons container
+                const $container = document.querySelector('div[class*=ActionButtons-module__container]');
+                if ($container && $container.parentElement) {
+                    $container.parentElement.appendChild(CE('div', {
+                        class: 'bx-product-details-buttons',
+                    },
+                        ['android-handheld', 'android'].includes(BX_FLAGS.DeviceInfo.deviceType) && ProductDetailsPage.$btnShortcut,
+                        ProductDetailsPage.$btnWallpaper,
+                    ));
+                }
             }
         }, 500);
     }

src/modules/ui/ui.ts

@@ -9,7 +9,7 @@ export function localRedirect(path: string) {
         return;
     }
 
-    const $anchor = CE<HTMLAnchorElement>('a', {
+    const $anchor = CE('a', {
             href: url,
             class: 'bx-hidden bx-offscreen',
         }, '');
@@ -24,4 +24,4 @@ export function localRedirect(path: string) {
     $anchor.click();
 }
 
-(window as any).localRedirect = localRedirect;
+window.localRedirect = localRedirect;

src/types/db.d.ts

@@ -2,11 +2,3 @@ interface BaseRecord {
     id: any;
     data: any;
 };
-
-interface ControllerSettingsRecord extends BaseRecord {
-    id: string;
-    data: {
-        vibrationIntensity: number;
-        shortcutPresetId: number;
-    };
-};