Bump version to 6.6.2

.github/workflows/stale.yaml

@@ -0,0 +1,25 @@
+name: 'Mark stale bug issues'
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * *'  # Runs daily at midnight UTC
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - uses: actions/stale@v9
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          stale-issue-message: |
+            This issue has been marked `stale` due to lack of recent activity. If there is no further activity, the issue will be closed in another 30 days.
+          close-issue-message: |
+            This issue has been closed due to inactivity. If you feel this is in error, please reopen the issue or file a new issue with the relevant details.
+          days-before-stale: 60
+          days-before-close: 30
+          stale-issue-label: 'stale'
+          only-issues: true
+          only-labels: 'bug'

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 --pretty
+    bun build.ts --version $1 --variant full --meta
+    # bun build.ts --version $1 --variant lite
 
     # Wait for key
     read -p ">> Press Enter to build again..."

build.ts

@@ -72,7 +72,7 @@ function removeComments(str: string): string {
     return str;
 }
 
-function postProcess(str: string): string {
+function postProcess(str: string, pretty: boolean): string {
     // Unescape unicode charaters
     str = unescape((str.replace(/\\u/g, '%u')));
     // Replace \x00 to normal character
@@ -127,9 +127,17 @@ function postProcess(str: string): string {
     if (MINIFY_SYNTAX) {
         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 === '}') ? '}' : '';
+            }
         });
     }
 
@@ -184,7 +192,9 @@ async function buildPatches() {
       });
 }
 
-async function build(target: BuildTarget, version: string, variant: BuildVariant, config: any={}) {
+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();
 
@@ -198,6 +208,9 @@ async function build(target: BuildTarget, version: string, variant: BuildVariant
     }
 
     let outputMetaName = outputScriptName;
+    if (pretty) {
+        outputScriptName += '.pretty';
+    }
     outputScriptName += '.user.js';
     outputMetaName += '.meta.js';
 
@@ -226,7 +239,7 @@ async function build(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;
@@ -241,7 +254,7 @@ async function build(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));
     }
 
@@ -274,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,
@@ -281,6 +304,8 @@ const { values, positionals } = parseArgs({
     values: {
         version: string,
         variant: BuildVariant,
+        pretty: boolean,
+        meta: boolean,
     },
     positionals: string[],
 };
@@ -299,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

@@ -1,12 +1,13 @@
 {
-  "lockfileVersion": 0,
+  "lockfileVersion": 1,
   "workspaces": {
     "": {
       "devDependencies": {
-        "@types/bun": "^1.1.14",
-        "@types/node": "^22.10.2",
+        "@types/bun": "^1.2.10",
+        "@types/node": "^22.14.1",
         "@types/stylus": "^0.48.43",
-        "eslint": "^9.17.0",
+        "@webgpu/types": "^0.1.60",
+        "eslint": "^9.25.0",
         "eslint-plugin-compat": "^6.0.2",
         "stylus": "^0.64.0",
       },
@@ -22,17 +23,19 @@
 
     "@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/config-array": ["@eslint/config-array@0.20.0", "", { "dependencies": { "@eslint/object-schema": "^2.1.6", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ=="],
 
-    "@eslint/core": ["@eslint/core@0.9.0", "", {}, "sha512-7ATR9F0e4W85D/0w7cU0SNj7qkAexMG+bAHEZOjo9akvGuhHE2m7umzWzfnpa0XAg5Kxc1BWmtPMV67jJ+9VUg=="],
+    "@eslint/config-helpers": ["@eslint/config-helpers@0.2.1", "", {}, "sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw=="],
 
-    "@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/core": ["@eslint/core@0.14.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg=="],
 
-    "@eslint/js": ["@eslint/js@9.17.0", "", {}, "sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w=="],
+    "@eslint/eslintrc": ["@eslint/eslintrc@3.3.1", "", { "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-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ=="],
 
-    "@eslint/object-schema": ["@eslint/object-schema@2.1.4", "", {}, "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ=="],
+    "@eslint/js": ["@eslint/js@9.27.0", "", {}, "sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA=="],
 
-    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.2.3", "", { "dependencies": { "levn": "^0.4.1" } }, "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA=="],
+    "@eslint/object-schema": ["@eslint/object-schema@2.1.6", "", {}, "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA=="],
+
+    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.3.1", "", { "dependencies": { "@eslint/core": "^0.14.0", "levn": "^0.4.1" } }, "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w=="],
 
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
@@ -40,7 +43,7 @@
 
     "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="],
 
-    "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.1", "", {}, "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA=="],
+    "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.2", "", {}, "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ=="],
 
     "@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=="],
 
@@ -48,17 +51,17 @@
 
     "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
 
-    "@types/bun": ["@types/bun@1.1.14", "", { "dependencies": { "bun-types": "1.1.37" } }, "sha512-opVYiFGtO2af0dnWBdZWlioLBoxSdDO5qokaazLhq8XQtGZbY4pY3/JxY8Zdf/hEwGubbp7ErZXoN1+h2yesxA=="],
+    "@types/bun": ["@types/bun@1.2.15", "", { "dependencies": { "bun-types": "1.2.15" } }, "sha512-U1ljPdBEphF0nw1MIk0hI7kPg7dFdPyM7EenHsp6W5loNHl7zqy6JQf/RKCgnUn2KDzUpkBwHPnEJEjII594bA=="],
 
     "@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.2", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ=="],
+    "@types/node": ["@types/node@22.15.24", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-w9CZGm9RDjzTh/D+hFwlBJ3ziUaVw7oufKA3vOFSOZlzmW9AkZnfjPb+DLnrV6qtgL/LNmP0/2zBNCFHL3F0ng=="],
 
     "@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=="],
+    "@webgpu/types": ["@webgpu/types@0.1.61", "", {}, "sha512-w2HbBvH+qO19SB5pJOJFKs533CdZqxl3fcGonqL321VHkW7W/iBo6H8bjDy6pr/+pbMwIu5dnuaAxH7NxBqUrQ=="],
 
     "acorn": ["acorn@8.14.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA=="],
 
@@ -80,7 +83,7 @@
 
     "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.1.37", "", { "dependencies": { "@types/node": "~20.12.8", "@types/ws": "~8.5.10" } }, "sha512-C65lv6eBr3LPJWFZ2gswyrGZ82ljnH8flVE03xeXxKhi2ZGtFiO4isRKTKnitbSqtRAcaqYSR6djt1whI66AbA=="],
+    "bun-types": ["bun-types@1.2.15", "", { "dependencies": { "@types/node": "*" } }, "sha512-NarRIaS+iOaQU1JPfyKhZm4AsUOrwUOqRNHY0XxI8GI8jYxiLXLcdjYMG9UKS+fwWasc1uw1htV9AX24dD+p4w=="],
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
@@ -110,11 +113,11 @@
 
     "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
 
-    "eslint": ["eslint@9.17.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.19.0", "@eslint/core": "^0.9.0", "@eslint/eslintrc": "^3.2.0", "@eslint/js": "9.17.0", "@eslint/plugin-kit": "^0.2.3", "@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-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA=="],
+    "eslint": ["eslint@9.27.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.20.0", "@eslint/config-helpers": "^0.2.1", "@eslint/core": "^0.14.0", "@eslint/eslintrc": "^3.3.1", "@eslint/js": "9.27.0", "@eslint/plugin-kit": "^0.3.1", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@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.3.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-ixRawFQuMB9DZ7fjU3iGGganFDp3+45bPOdaRurcFHSXO1e/sYwUX/FtQZpLZJR6SjMoJH8hR2pPEAfDyCoU2Q=="],
 
     "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-scope": ["eslint-scope@8.3.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ=="],
 
     "eslint-visitor-keys": ["eslint-visitor-keys@4.2.0", "", {}, "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw=="],
 
@@ -252,7 +255,7 @@
 
     "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=="],
+    "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
 
     "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=="],
 
@@ -276,12 +279,8 @@
 
     "@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=="],
 
-    "bun-types/@types/node": ["@types/node@20.12.14", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-scnD59RpYD91xngrQQLGkE+6UrHUPzeKZWhhjBSa3HSkwjbQc38+q3RoIVEwxQGRw3M+j5hpNAM+lgV3cVormg=="],
-
     "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=="],
@@ -300,10 +299,6 @@
 
     "@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=="],
-
-    "bun-types/@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=="],

dist/better-xcloud.meta.js

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

package.json

@@ -10,10 +10,11 @@
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.14",
-    "@types/node": "^22.10.2",
+    "@types/bun": "^1.2.15",
+    "@types/node": "^22.15.24",
     "@types/stylus": "^0.48.43",
-    "eslint": "^9.17.0",
+    "@webgpu/types": "^0.1.61",
+    "eslint": "^9.27.0",
     "eslint-plugin-compat": "^6.0.2",
     "stylus": "^0.64.0"
   },

scripts/custom-flags.user.js

@@ -24,8 +24,12 @@ How to:
 const enabled = true;
 
 enabled && (window.BX_FLAGS = {
+    // Toggle WebGPU Renderer
+    // https://github.com/redphx/better-xcloud/discussions/657
+    EnableWebGPURenderer: false,
+    
     /*
-    Add titleId of the game(s) you want to add here.
+    Add titleId of the game(s) you want to test native M&KB support here.
     Keep in mind: this method only works with some games.
 
     Example:

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 {

src/assets/css/navigation-dialog.styl

@@ -78,7 +78,7 @@
             padding: 0;
             margin: 0;
             flex: 1;
-            font-size: 1.2rem;
+            font-size: 1.5rem;
             font-weight: bold;
         }
 

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: 16px;
-
-    > .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,11 +47,11 @@ 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;
+    unicode-range: U+2196-E011, U+27F6, U+FF31;
 }
 
 /* Fix Stream menu buttons not hiding */
-div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module__hiddenContainer]) {
+#StreamHud div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module__hiddenContainer]) {
     opacity: 0;
     pointer-events: none !important;
     position: absolute;
@@ -60,9 +60,35 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
 }
 
 /* Remove the "Cloud Gaming" text in header when the screen is too small */
+@media screen and (min-width: 641px) and (max-width: 767px) {
+    header {
+        button[class^="ExperienceDropdown-module__toggleButton"],
+        button[class^="XboxButton-module__headerXboxButton"] {
+            margin-right: 10px !important;
+        }
+
+        a[href="/play"],
+        button[class^="ExperienceDropdown-module__toggleButton"] {
+            > div {
+                > div {
+                    font-size: 12px;
+                }
+
+                > svg {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+        }
+    }
+}
+
 @media screen and (max-width: 640px) {
-    header a[href="/play"] {
-        display: none;
+    header {
+        a[href="/play"],
+        button[class^="ExperienceDropdown-module__toggleButton"] {
+            display: none;
+        }
     }
 }
 
@@ -182,16 +208,18 @@ select[multiple], select[multiple]:focus {
     display: none;
 }
 
-div[class*=NotFocusedDialog] {
-    position: absolute !important;
-    top: -9999px !important;
-    left: -9999px !important;
-    width: 0px !important;
-    height: 0px !important;
-}
+#game-stream {
+    div[class^=NotFocusedDialog] {
+        position: absolute !important;
+        top: -9999px !important;
+        left: -9999px !important;
+        width: 0px !important;
+        height: 0px !important;
+    }
 
-#game-stream video:not([src]) {
-    visibility: hidden;
+    video:not([src]) {
+        visibility: hidden;
+    }
 }
 
 .bx-game-tile-wait-time {

src/assets/css/settings-dialog.styl

@@ -98,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;
@@ -112,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;
@@ -164,7 +155,6 @@
     display: flex;
     gap: 10px;
     padding: 16px 10px;
-    margin: 0;
     background: #2a2a2a;
     border-bottom: 1px solid #343434;
 
@@ -212,6 +202,10 @@
             }
         }
     }
+
+    &.bx-settings-important-row {
+        background: #733b00;
+    }
 }
 
 .bx-settings-dialog-note {
@@ -284,7 +278,8 @@
     color: #828282;
 }
 
-.bx-settings-tab-contents {
+.bx-settings-tab-content {
+    padding: 10px;
     border-radius-size = 6px;
 
     > div {
@@ -307,6 +302,15 @@
             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;
+            padding-left: 6px !important;
+        }
+    }
 }
 
 .bx-suggest-toggler {
@@ -533,3 +537,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.styl

@@ -1,4 +1,4 @@
-div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
+#game-stream div[class^=StreamMenu-module__menuContainer] > div[class^=Menu-module] {
     overflow: visible;
 }
 

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/header_script.txt

@@ -7,6 +7,7 @@
 // @license      MIT
 // @match        https://www.xbox.com/*/play*
 // @match        https://www.xbox.com/*/auth/msa?*loggedIn*
+// @exclude      https://www.xbox.com/*/xbox-game-pass/play-day-one
 // @run-at       document-start
 // @grant        none
 // @updateURL    https://raw.githubusercontent.com/redphx/better-xcloud/typescript/dist/better-xcloud.meta.js

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/enums/game-pass-gallery.ts

@@ -1,7 +1,9 @@
 export enum GamePassCloudGallery {
     ALL = '29a81209-df6f-41fd-a528-2ae6b91f719c',
     ALL_WITH_BYGO = 'ce573635-7c18-4d0c-9d68-90b932393470',
+    LEAVING_SOON = '393f05bf-e596-4ef6-9487-6d4fa0eab987',
     MOST_POPULAR = 'e7590b22-e299-44db-ae22-25c61405454c',
     NATIVE_MKB = '8fa264dd-124f-4af3-97e8-596fcdf4b486',
+    RECENTLY_ADDED = '44a55037-770f-4bbf-bde5-a9fa27dba1da',
     TOUCH = '9c86f07a-f3e8-45ad-82a0-a1f759597059',
 }

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,7 +1,9 @@
-import type { BlockFeature, CodecProfile, DeviceVibrationMode, GameBarPosition, LoadingScreenRocket, NativeMkbMode, StreamPlayerType, StreamResolution, StreamStat, StreamStatPosition, StreamVideoProcessing, TouchControllerMode, TouchControllerStyleCustom, TouchControllerStyleStandard, UiLayout, UiSection, VideoPosition, VideoPowerPreference, VideoRatio } from "./pref-values"
+import type { BaseSettingsStorage } from "@/utils/settings-storages/base-settings-storage";
+import type { BlockFeature, CodecProfile, DeviceVibrationMode, GameBarPosition, LoadingScreenRocket, NativeMkbMode, StreamPlayerType, StreamResolution, StreamStat, StreamStatPosition, StreamVideoProcessing, StreamVideoProcessingMode, TouchControllerMode, TouchControllerStyleCustom, TouchControllerStyleStandard, UiLayout, UiSection, UiTheme, VideoPosition, VideoPowerPreference, VideoRatio } from "./pref-values"
 
 export const enum StorageKey {
     GLOBAL = 'BetterXcloud',
+    STREAM = 'BetterXcloud.Stream',
 
     LOCALE = 'BetterXcloud.Locale',
     LOCALE_TRANSLATIONS = 'BetterXcloud.Locale.Translations',
@@ -16,7 +18,7 @@ export const enum StorageKey {
 }
 
 
-export const enum PrefKey {
+export const enum GlobalPref {
     VERSION_LAST_CHECK = 'version.lastCheck',
     VERSION_LATEST = 'version.latest',
     VERSION_CURRENT = 'version.current',
@@ -43,26 +45,11 @@ 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',
 
@@ -87,10 +74,89 @@ export const enum PrefKey {
     UI_HIDE_SYSTEM_MENU_ICON = 'ui.systemMenu.hideHandle',
     UI_REDUCE_ANIMATIONS = 'ui.reduceAnimations',
     UI_IMAGE_QUALITY = 'ui.imageQuality',
+    UI_THEME = 'ui.theme',
+
+    AUDIO_MIC_ON_PLAYING = 'audio.mic.onPlaying',
+    AUDIO_VOLUME_CONTROL_ENABLED = 'audio.volume.booster.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_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.UI_THEME]: UiTheme;
+    [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',
     VIDEO_PROCESSING = 'video.processing',
+    VIDEO_PROCESSING_MODE = 'video.processing.mode',
     VIDEO_SHARPNESS = 'video.processing.sharpness',
     VIDEO_MAX_FPS = 'video.maxFps',
     VIDEO_RATIO = 'video.ratio',
@@ -99,8 +165,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',
@@ -111,85 +175,139 @@ export const enum PrefKey {
     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 PrefTypeMap = {
-    [PrefKey.AUDIO_MIC_ON_PLAYING]: boolean,
-    [PrefKey.AUDIO_VOLUME_CONTROL_ENABLED]: boolean,
-    [PrefKey.AUDIO_VOLUME]: number,
-    [PrefKey.BLOCK_FEATURES]: BlockFeature[],
-    [PrefKey.BLOCK_TRACKING]: boolean,
-    [PrefKey.CONTROLLER_POLLING_RATE]: number,
-    [PrefKey.DEVICE_VIBRATION_INTENSITY]: number,
-    [PrefKey.DEVICE_VIBRATION_MODE]: DeviceVibrationMode,
-    [PrefKey.GAME_BAR_POSITION]: GameBarPosition,
-    [PrefKey.GAME_FORTNITE_FORCE_CONSOLE]: boolean,
-    [PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID]: number,
-    [PrefKey.LOADING_SCREEN_GAME_ART]: boolean,
-    [PrefKey.LOADING_SCREEN_ROCKET]: LoadingScreenRocket,
-    [PrefKey.LOADING_SCREEN_SHOW_WAIT_TIME]: boolean,
-    [PrefKey.LOCAL_CO_OP_ENABLED]: boolean,
-    [PrefKey.MKB_ENABLED]: boolean,
-    [PrefKey.MKB_HIDE_IDLE_CURSOR]: boolean,
-    [PrefKey.MKB_P1_MAPPING_PRESET_ID]: number,
-    [PrefKey.MKB_P1_SLOT]: number,
-    [PrefKey.NATIVE_MKB_FORCED_GAMES]: string[],
-    [PrefKey.NATIVE_MKB_MODE]: NativeMkbMode,
-    [PrefKey.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY]: number,
-    [PrefKey.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY]: number,
-    [PrefKey.REMOTE_PLAY_ENABLED]: boolean,
-    [PrefKey.REMOTE_PLAY_STREAM_RESOLUTION]: StreamResolution,
-    [PrefKey.SCREENSHOT_APPLY_FILTERS]: boolean,
-    [PrefKey.SERVER_BYPASS_RESTRICTION]: string,
-    [PrefKey.SERVER_PREFER_IPV6]: boolean,
-    [PrefKey.SERVER_REGION]: string,
-    [PrefKey.STATS_CONDITIONAL_FORMATTING]: boolean,
-    [PrefKey.STATS_ITEMS]: StreamStat[],
-    [PrefKey.STATS_OPACITY_ALL]: number,
-    [PrefKey.STATS_OPACITY_BACKGROUND]: number,
-    [PrefKey.STATS_POSITION]: StreamStatPosition,
-    [PrefKey.STATS_QUICK_GLANCE_ENABLED]: boolean,
-    [PrefKey.STATS_SHOW_WHEN_PLAYING]: boolean,
-    [PrefKey.STATS_TEXT_SIZE]: string,
-    [PrefKey.STREAM_CODEC_PROFILE]: CodecProfile,
-    [PrefKey.STREAM_COMBINE_SOURCES]: boolean,
-    [PrefKey.STREAM_MAX_VIDEO_BITRATE]: number,
-    [PrefKey.STREAM_PREFERRED_LOCALE]: StreamPreferredLocale,
-    [PrefKey.STREAM_RESOLUTION]: StreamResolution,
-    [PrefKey.TOUCH_CONTROLLER_AUTO_OFF]: boolean,
-    [PrefKey.TOUCH_CONTROLLER_DEFAULT_OPACITY]: number,
-    [PrefKey.TOUCH_CONTROLLER_MODE]: TouchControllerMode,
-    [PrefKey.TOUCH_CONTROLLER_STYLE_CUSTOM]: TouchControllerStyleCustom,
-    [PrefKey.TOUCH_CONTROLLER_STYLE_STANDARD]: TouchControllerStyleStandard,
-    [PrefKey.UI_CONTROLLER_FRIENDLY]: boolean,
-    [PrefKey.UI_CONTROLLER_SHOW_STATUS]: boolean,
-    [PrefKey.UI_DISABLE_FEEDBACK_DIALOG]: boolean,
-    [PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME]: boolean,
-    [PrefKey.UI_HIDE_SECTIONS]: UiSection[],
-    [PrefKey.UI_HIDE_SYSTEM_MENU_ICON]: boolean,
-    [PrefKey.UI_IMAGE_QUALITY]: number,
-    [PrefKey.UI_LAYOUT]: UiLayout,
-    [PrefKey.UI_REDUCE_ANIMATIONS]: boolean,
-    [PrefKey.UI_SCROLLBAR_HIDE]: boolean,
-    [PrefKey.UI_SIMPLIFY_STREAM_MENU]: boolean,
-    [PrefKey.UI_SKIP_SPLASH_VIDEO]: boolean,
-    [PrefKey.VERSION_CURRENT]: string,
-    [PrefKey.VERSION_LAST_CHECK]: number,
-    [PrefKey.VERSION_LATEST]: string,
-    [PrefKey.VIDEO_BRIGHTNESS]: number,
-    [PrefKey.VIDEO_CONTRAST]: number,
-    [PrefKey.VIDEO_MAX_FPS]: number,
-    [PrefKey.VIDEO_PLAYER_TYPE]: StreamPlayerType,
-    [PrefKey.VIDEO_POSITION]: VideoPosition,
-    [PrefKey.VIDEO_POWER_PREFERENCE]: VideoPowerPreference,
-    [PrefKey.VIDEO_PROCESSING]: StreamVideoProcessing,
-    [PrefKey.VIDEO_RATIO]: VideoRatio,
-    [PrefKey.VIDEO_SATURATION]: number,
-    [PrefKey.VIDEO_SHARPNESS]: number,
+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_PROCESSING_MODE]: StreamVideoProcessingMode;
+    [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_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.UI_THEME,
+        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_PROCESSING_MODE,
+        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

@@ -6,6 +6,9 @@ export const enum UiSection {
     NEWS = 'news',
     TOUCH = 'touch',
     BOYG = 'byog',
+    RECENTLY_ADDED = 'recently-added',
+    LEAVING_SOON = 'leaving-soon',
+    GENRES = 'genres',
 }
 
 export const enum GameBarPosition {
@@ -92,10 +95,13 @@ export const enum StreamStatPosition {
 
 export const enum VideoRatio {
     '16:9' = '16:9',
-    '18:9' = '18:9',
-    '21:9' = '21:9',
     '16:10' = '16:10',
+    '18:9' = '18:9',
+    '20:9' = '20:9',
+    '21:9' = '21:9',
+    '3:2' = '3:2',
     '4:3' = '4:3',
+    '5:4' = '5:4',
     FILL = 'fill',
 }
 
@@ -116,6 +122,7 @@ export const enum VideoPowerPreference {
 export const enum StreamPlayerType {
     VIDEO = 'default',
     WEBGL2 = 'webgl2',
+    WEBGPU = 'webgpu',
 }
 
 export const enum StreamVideoProcessing {
@@ -123,10 +130,21 @@ export const enum StreamVideoProcessing {
     CAS = 'cas',
 }
 
+export const enum StreamVideoProcessingMode {
+    QUALITY = 'quality',
+    PERFORMANCE = 'performance',
+}
+
 export const enum BlockFeature {
     CHAT = 'chat',
     FRIENDS = 'friends',
     BYOG = 'byog',
     NOTIFICATIONS_INVITES = 'notifications-invites',
     NOTIFICATIONS_ACHIEVEMENTS = 'notifications-achievements',
+    REMOTE_PLAY = 'remote-play',
+}
+
+export const enum UiTheme {
+    DEFAULT = 'default',
+    DARK_OLED = 'dark-oled',
 }

src/index.ts

@@ -32,19 +32,23 @@ 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 { SettingsDialog } from "./modules/ui/dialog/settings-dialog";
-import { StreamUiHandler } from "./modules/stream/stream-ui";
+import { GlobalPref, StreamPref } from "./enums/pref-keys";
 import { UserAgent } from "./utils/user-agent";
 import { XboxApi } from "./utils/xbox-api";
 import { StreamStatsCollector } from "./utils/stream-stats-collector";
-import { RootDialogObserver } from "./utils/root-dialog-observer";
 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";
+import { WebGPUPlayer } from "./modules/player/webgpu/webgpu-player";
+import { StreamUiHandler } from "./modules/stream/stream-ui";
+import { TrueAchievements } from "./utils/true-achievements";
+
+SettingsManager.getInstance();
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
@@ -143,6 +147,12 @@ if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loa
     throw new Error('[Better xCloud] Executing workaround for Safari');
 }
 
+// Make sure it only run on /play
+if (!window.location.pathname.match(/^\/[a-zA-Z]{2}-[a-zA-Z]{2}\/play/)) {
+    throw new Error('[Better xCloud] Not xCloud page');
+}
+
+
 window.addEventListener('load', e => {
     // Automatically reload the page when running into the "We are sorry..." error message
     window.setTimeout(() => {
@@ -164,14 +174,16 @@ document.addEventListener('readystatechange', e => {
 
     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);
+        // window.setTimeout(HeaderSection.watchHeader, 2000);
     }
 
     // Hide "Play with Friends" skeleton section
-    if (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS) || getPref(PrefKey.BLOCK_FEATURES).includes(BlockFeature.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');
     }
@@ -191,33 +203,21 @@ window.addEventListener('popstate', onHistoryChanged);
 window.history.pushState = patchHistoryMethod('pushState');
 window.history.replaceState = patchHistoryMethod('replaceState');
 
-BxEventBus.Script.once('xcloud.server.unavailable', () => {
-    STATES.supportedRegion = false;
-    window.setTimeout(HeaderSection.watchHeader, 2000);
-
-    // Open Settings dialog on Unsupported page
-    const $unsupportedPage = document.querySelector<HTMLElement>('div[class^=UnsupportedMarketPage-module__container]');
-    if ($unsupportedPage) {
-        SettingsDialog.getInstance().show();
-    }
-});
-
-BxEventBus.Script.on('xcloud.server.ready', () => {
-    STATES.isSignedIn = true;
-    window.setTimeout(HeaderSection.watchHeader, 2000);
+BxEventBus.Script.on('ui.header.rendered', () => {
+    HeaderSection.getInstance().checkHeader();
 });
 
 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);
+        STATES.currentStream.titleSlug = productTitleToSlug(STATES.currentStream.titleInfo.productInfo.title);
     } else {
         STATES.currentStream.titleSlug = 'remote-play';
     }
 });
 
 // Setup loading screen
-getPref(PrefKey.LOADING_SCREEN_GAME_ART) && BxEventBus.Script.on('titleInfo.ready', LoadingScreen.setup);
+getGlobalPref(GlobalPref.LOADING_SCREEN_GAME_ART) && BxEventBus.Script.on('titleInfo.ready', LoadingScreen.setup);
 
 BxEventBus.Stream.on('state.starting', () => {
     // Hide loading screen
@@ -234,11 +234,12 @@ BxEventBus.Stream.on('state.starting', () => {
 });
 
 BxEventBus.Stream.on('state.playing', payload => {
-    window.BX_STREAM_SETTINGS = StreamSettings.settings;
-    StreamSettings.refreshAllSettings();
+    if (isFullVersion()) {
+        window.BX_STREAM_SETTINGS = StreamSettings.settings;
+        StreamSettings.refreshAllSettings();
+    }
 
     STATES.isPlaying = true;
-    StreamUiHandler.observe();
 
     if (isFullVersion()) {
         const gameBar = GameBar.getInstance();
@@ -256,17 +257,48 @@ BxEventBus.Stream.on('state.playing', payload => {
         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();
 });
 
-BxEventBus.Stream.on('state.error', () => {
+BxEventBus.Script.on('ui.error.rendered', () => {
     BxEventBus.Stream.emit('state.stopped', {});
 });
 
+BxEventBus.Script.on('ui.guideHome.rendered', () => {
+    const $root = document.querySelector<HTMLElement>('#gamepass-dialog-root div[role=dialog] div[role=tabpanel] div[class*=HomeLandingPage]');
+    $root && GuideMenu.getInstance().injectHome($root, STATES.isPlaying);
+});
+
+BxEventBus.Script.on('ui.guideAchievementProgress.rendered', () => {
+    const $elm = document.querySelector('#gamepass-dialog-root button[class*=AchievementsButton-module__progressBarContainer]');
+    if ($elm) {
+        TrueAchievements.getInstance().injectAchievementsProgress($elm as HTMLElement);
+    }
+});
+
+BxEventBus.Script.on('ui.guideAchievementDetail.rendered', () => {
+    const $elm = document.querySelector('#gamepass-dialog-root div[class^=AchievementDetailPage-module]');
+    if ($elm) {
+        TrueAchievements.getInstance().injectAchievementDetailPage($elm as HTMLElement);
+    }
+});
+
+BxEventBus.Stream.on('ui.streamMenu.rendered', async () => {
+    await StreamUiHandler.handleStreamMenu();
+});
+
+BxEventBus.Stream.on('ui.streamHud.rendered', async () => {
+    const $elm = document.querySelector<HTMLElement>('#StreamHud');
+    $elm && StreamUiHandler.handleSystemMenu($elm);
+});
+
+
 isFullVersion() && window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e => {
     const component = (e as any).component;
     if (component === 'product-detail') {
@@ -291,20 +323,32 @@ BxEventBus.Stream.on('dataChannelCreated', payload => {
         }
 
         // Get xboxTitleId from message
+        const currentStream = STATES.currentStream;
         const json = JSON.parse(JSON.parse(msg.data).content);
-        const xboxTitleId = parseInt(json.titleid, 16);
-        STATES.currentStream.xboxTitleId = xboxTitleId;
+        const currentId = currentStream.xboxTitleId ?? null;
+        let newId: number = parseInt(json.titleid, 16);
 
         // Get titleSlug for Remote Play
-        if (STATES.remotePlay.isPlaying) {
-            STATES.currentStream.titleSlug = 'remote-play';
+        if (window.location.pathname.includes('/play/consoles/launch/')) {
+            currentStream.titleSlug = 'remote-play';
             if (json.focused) {
-                const productTitle = await XboxApi.getProductTitle(xboxTitleId);
+                const productTitle = await XboxApi.getProductTitle(newId);
                 if (productTitle) {
-                    STATES.currentStream.titleSlug = productTitleToSlug(productTitle);
+                    currentStream.titleSlug = productTitleToSlug(productTitle);
+                } else {
+                    newId = -1;
                 }
+            } else {
+                newId = 0;
             }
         }
+
+        if (currentId !== newId) {
+            currentStream.xboxTitleId = newId;
+            BxEventBus.Stream.emit('xboxTitleId.changed', {
+                id: newId,
+            });
+        }
     });
 });
 
@@ -314,6 +358,7 @@ function unload() {
         return;
     }
 
+    BxLogger.warning('Unloading');
     if (isFullVersion()) {
         KeyboardShortcutHandler.getInstance().stop();
 
@@ -325,7 +370,7 @@ function unload() {
     }
 
     // Destroy StreamPlayer
-    STATES.currentStream.streamPlayer?.destroy();
+    STATES.currentStream.streamPlayerManager?.destroy();
 
     STATES.isPlaying = false;
     STATES.currentStream = {};
@@ -341,6 +386,8 @@ function unload() {
         TouchController.reset();
 
         GameBar.getInstance()?.disable();
+
+        BxEventBus.Stream.emit('xboxTitleId.changed', { id: -1 });
     }
 }
 
@@ -357,9 +404,11 @@ isFullVersion() && window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
 function main() {
     GhPagesUtils.fetchLatestCommit();
 
-    if (getPref(PrefKey.NATIVE_MKB_MODE) !== NativeMkbMode.OFF) {
-        const customList = getPref(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();
@@ -372,24 +421,23 @@ 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();
     }
 
-    RootDialogObserver.waitForRootDialog();
-
     // Setup UI
     addCss();
 
-    GuideMenu.getInstance().addEventListeners();
     StreamStatsCollector.setupEvents();
     StreamBadges.setupEvents();
     StreamStats.setupEvents();
 
     if (isFullVersion()) {
+        WebGPUPlayer.prepare();
+
         STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
 
         DeviceVibrationManager.getInstance();
@@ -400,29 +448,24 @@ function main() {
         Patcher.init();
         disablePwa();
 
-        // Preload Remote Play
-        if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
-            RemotePlayManager.detect();
-        }
-
-        if (getPref(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(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/macros/build.ts

@@ -25,3 +25,17 @@ export const renderStylus = async () => {
 export const compressCss = (css: string) => {
     return (stylus(css, {}).set('compress', true)).render();
 };
+
+export const compressCode = (code: string): string => {
+    return code.split('\n') // Split into lines
+        .map(line => line.startsWith('#') || line.startsWith('@') ? line + '\n' : line.trim()) // Trim spaces, with exceptions for shader files
+        .filter(line => line && !line.startsWith('//')) // Remove empty and commented lines
+        .join(''); // Join into a single line
+};
+
+export const compressCodeFile = async (path: string) => {
+    const file = Bun.file(path);
+    const code = await file.text();
+
+    return compressCode(code);
+};

src/modules/device-vibration-manager.ts

@@ -47,7 +47,7 @@ export class DeviceVibrationManager {
             }
         });
 
-        BxEventBus.Script.on('deviceVibration.updated', () => this.setupDataChannel());
+        BxEventBus.Stream.on('deviceVibration.updated', () => this.setupDataChannel());
     }
 
     private setupDataChannel() {

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

@@ -6,21 +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(PrefKey.GAME_BAR_POSITION) !== GameBarPosition.OFF) {
+            if (getGlobalPref(GlobalPref.GAME_BAR_POSITION) !== GameBarPosition.OFF) {
                 GameBar.instance = new GameBar();
             } else {
                 GameBar.instance = null;
@@ -46,7 +46,7 @@ export class GameBar {
 
         let $container;
 
-        const position = getPref(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' }),
@@ -55,7 +55,7 @@ export class GameBar {
 
         this.actions = [
             new ScreenshotAction(),
-            ...(STATES.userAgent.capabilities.touch && (getPref(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(),

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";
 
@@ -35,9 +35,11 @@ export class LoadingScreen {
             LoadingScreen.$bgStyle = $bgStyle;
         }
 
-        LoadingScreen.setBackground(titleInfo.product.heroImageUrl || titleInfo.product.titledHeroImageUrl || titleInfo.product.tileImageUrl);
+        if (titleInfo.productInfo) {
+            LoadingScreen.setBackground(titleInfo.productInfo.heroImageUrl || titleInfo.productInfo.titledHeroImageUrl || titleInfo.productInfo.tileImageUrl);
+        }
 
-        if (getPref(PrefKey.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE) {
+        if (getGlobalPref(GlobalPref.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE) {
             LoadingScreen.hideRocket();
         }
     }
@@ -63,7 +65,7 @@ export class LoadingScreen {
         // Limit max width to reduce image size
         imageUrl = imageUrl + '?w=1920';
 
-        const imageQuality = getPref(PrefKey.UI_IMAGE_QUALITY);
+        const imageQuality = getGlobalPref(GlobalPref.UI_IMAGE_QUALITY);
         if (imageQuality !== 90) {
             imageUrl += '&q=' + imageQuality;
         }
@@ -94,7 +96,7 @@ export class LoadingScreen {
 
     static setupWaitTime(waitTime: number) {
         // Hide rocket when queing
-        if (getPref(PrefKey.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE_QUEUE) {
+        if (getGlobalPref(GlobalPref.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE_QUEUE) {
             LoadingScreen.hideRocket();
         }
 
@@ -151,7 +153,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,14 +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,
@@ -133,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;
@@ -152,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;
@@ -171,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() {
@@ -205,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]);
     }
 
     /*
@@ -224,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) {
@@ -259,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) => {
@@ -453,7 +453,7 @@ export class EmulatedMkbHandler extends MkbHandler {
 
     refreshPresetData() {
         this.PRESET = window.BX_STREAM_SETTINGS.mkbPreset;
-        this.resetGamepad();
+        this.resetXcloudGamepads();
     }
 
     waitForMouseData(showPopup: boolean) {
@@ -581,11 +581,6 @@ export class EmulatedMkbHandler extends MkbHandler {
         window.removeEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.onPollingModeChanged);
     }
 
-    updateGamepadSlots() {
-        // Set gamepad slot
-        this.VIRTUAL_GAMEPAD.index = getPref(PrefKey.MKB_P1_SLOT) - 1;
-    }
-
     start() {
         if (!this.enabled) {
             this.enabled = true;
@@ -595,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);
@@ -625,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();
@@ -655,7 +650,7 @@ export class EmulatedMkbHandler extends MkbHandler {
             });
 
             if (EmulatedMkbHandler.isAllowed()) {
-                BxEventBus.Script.on('mkb.setting.updated', () => {
+                BxEventBus.Stream.on('mkb.setting.updated', () => {
                     EmulatedMkbHandler.getInstance()?.refreshPresetData();
                 });
             }

src/modules/mkb/mkb-popup.ts

@@ -25,7 +25,7 @@ export class MkbPopup {
     constructor() {
         this.render();
 
-        BxEventBus.Script.on('keyboardShortcuts.updated', () => {
+        BxEventBus.Stream.on('keyboardShortcuts.updated', () => {
             const $newButton = this.createActivateButton();
             this.$btnActivate.replaceWith($newButton);
             this.$btnActivate = $newButton;

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,8 +4,7 @@ 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";
@@ -13,19 +12,7 @@ import { StreamSettings } from "@/utils/stream-settings";
 import { ShortcutAction } from "@/enums/shortcut-actions";
 import { NativeMkbMode } from "@/enums/pref-values";
 import { BxEventBus } from "@/utils/bx-event-bus";
-
-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 { getStreamPref, getGlobalPref } from "@/utils/pref-utils";
 
 export class NativeMkbHandler extends MkbHandler {
     private static instance: NativeMkbHandler | null | undefined;
@@ -43,7 +30,7 @@ export class NativeMkbHandler extends MkbHandler {
     private readonly LOG_TAG = 'NativeMkbHandler';
 
     static isAllowed = () => {
-        return STATES.browser.capabilities.emulatedNativeMkb && getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON;
+        return STATES.browser.capabilities.emulatedNativeMkb && getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON;
     }
 
     private pointerClient: PointerClient | undefined;
@@ -54,7 +41,7 @@ export class NativeMkbHandler extends MkbHandler {
     private mouseVerticalMultiply = 0;
     private mouseHorizontalMultiply = 0;
 
-    private inputSink: XcloudInputSink | undefined;
+    private inputChannel: XcloudInputChannel | undefined;
 
     private popup!: MkbPopup;
 
@@ -114,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);
@@ -125,8 +112,8 @@ 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);
 
@@ -274,7 +261,7 @@ export class NativeMkbHandler extends MkbHandler {
 
     private sendMouseInput(data: NativeMouseData) {
         data.Type = 0;  // Relative
-        this.inputSink?.onMouseInput(data);
+        this.inputChannel?.queueMouseInput(data);
     }
 
     private resetMouseInput() {

src/modules/patcher/patcher-utils.ts

@@ -1,3 +1,4 @@
+import type { ScriptEvents, StreamEvents } from "@/utils/bx-event-bus";
 import type { PatchArray, PatchName, PatchPage } from "./patcher";
 
 export class PatcherUtils {
@@ -35,18 +36,24 @@ export class PatcherUtils {
         return txt.substring(0, index) + toString + txt.substring(index + fromString.length);
     }
 
-    static filterPatches(patches: Array<string | false>): PatchArray {
+    static replaceAfterIndex(txt: string, search: string, replaceWith: string, index: number) {
+        const before = txt.slice(0, index);
+        const after = txt.slice(index).replace(search, replaceWith);
+        return before + after;
+    }
+
+    static filterPatches(patches: Array<PatchName | false>): PatchArray {
         return patches.filter((item): item is PatchName => !!item);
     }
 
     static patchBeforePageLoad(str: string, page: PatchPage): string | false {
-        let text = `chunkName:()=>"${page}-page",`;
-        if (!str.includes(text)) {
+        const index = str.indexOf(`chunkName:()=>"${page}-page",`);
+        if (index < 0) {
             return false;
         }
 
-        str = str.replace('requireAsync(e){', `requireAsync(e){window.BX_EXPOSED.beforePageLoad("${page}");`);
-        str = str.replace('requireSync(e){', `requireSync(e){window.BX_EXPOSED.beforePageLoad("${page}");`);
+        str = PatcherUtils.replaceAfterIndex(str, 'requireAsync(e){', `requireAsync(e){window.BX_EXPOSED.beforePageLoad("${page}");`, index);
+        str = PatcherUtils.replaceAfterIndex(str, 'requireSync(e){', `requireSync(e){window.BX_EXPOSED.beforePageLoad("${page}");`, index);
 
         return str;
     }
@@ -96,4 +103,48 @@ export class PatcherUtils {
 
         return str.substring(start, end);
     }
+
+    static injectUseEffect<T extends 'Stream' | 'Script'>(str: string, index: number, group: T, eventName: T extends 'Stream' ? keyof StreamEvents : keyof ScriptEvents, separator: string = ';') {
+        const newCode = `window.BX_EXPOSED.reactUseEffect(() => window.BxEventBus.${group}.emit('${eventName}', {}), [])${separator}`;
+        str = PatcherUtils.insertAt(str, index, newCode);
+
+        return str;
+    }
+
+    static findAndParseParams(str: string, index: number, maxRange: number) {
+        const substr = str.substring(index, index + maxRange);
+        let startIndex = substr.indexOf('({');
+        if (startIndex < 0) {
+            return false;
+        }
+        startIndex += 1;
+
+        let endIndex = substr.indexOf('})', startIndex);
+        if (endIndex < 0) {
+            return false;
+        }
+        endIndex += 1;
+
+        try {
+            const input = substr.substring(startIndex, endIndex);
+            return PatcherUtils.parseObjectVariables(input);
+        } catch {
+            return null;
+        }
+    }
+
+    static parseObjectVariables(input: string) {
+        try {
+            const pairs = [...input.matchAll(/(\w+)\s*:\s*([a-zA-Z_$][\w$]*)/g)];
+
+            const result: Record<string, string> = {};
+            for (const [_, key, value] of pairs) {
+                result[key] = value;
+            }
+
+            return result;
+        } catch {
+            return null;
+        }
+    }
 }

src/modules/patcher/patcher.ts

@@ -11,16 +11,18 @@ import codeGameCardIcons from "./patches/game-card-icons.js" with { type: "text"
 import codeLocalCoOpEnable from "./patches/local-co-op-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 { PrefKey, StorageKey } from "@/enums/pref-keys.js";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import codeStreamHud from "./patches/stream-hud.js" with { type: "text" };
+import codeCreatePortal from "./patches/create-portal.js" with { type: "text" };
+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 { BlockFeature, NativeMkbMode, TouchControllerMode, UiLayout, UiSection } from "@/enums/pref-values";
 import { PatcherUtils } from "./patcher-utils.js";
 
 export type PatchName = keyof typeof PATCHES;
 export type PatchArray = PatchName[];
-export type PatchPage = 'home' | 'stream' | 'product-detail';
+export type PatchPage = 'home' | 'stream' | 'remote-play-stream' | 'product-detail';
+type PatchFunction = (str: string) => string | false;
 
 const LOG_TAG = 'Patcher';
 
@@ -29,11 +31,7 @@ const PATCHES = {
     disableAiTrack(str: string) {
         let text = '.track=function(';
         const index = str.indexOf(text);
-        if (index < 0) {
-            return false;
-        }
-
-        if (PatcherUtils.indexOf(str, '"AppInsightsCore', index, 200) < 0) {
+        if (index < 0 || PatcherUtils.indexOf(str, '"AppInsightsCore', index, 200) < 0) {
             return false;
         }
 
@@ -41,6 +39,7 @@ const PATCHES = {
     },
 
     // Set disableTelemetry() to true
+    /*
     disableTelemetry(str: string) {
         let text = '.disableTelemetry=function(){return!1}';
         if (!str.includes(text)) {
@@ -49,6 +48,7 @@ const PATCHES = {
 
         return str.replace(text, '.disableTelemetry=function(){return!0}');
     },
+    */
 
     disableTelemetryProvider(str: string) {
         let text = 'this.enableLightweightTelemetry=!';
@@ -89,18 +89,18 @@ const PATCHES = {
             return false;
         }
 
-        const layout = getPref(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}"`);
     },
 
-    // Replace "/direct-connect" with "/play"
-    remotePlayDirectConnectUrl(str: string) {
-        const index = str.indexOf('/direct-connect');
-        if (index < 0) {
+    remotePlayPostStreamRedirectUrl(str: string) {
+        let text = '.RemotePlayRoot.getLink()):';
+        if (!str.includes(text)) {
             return false;
         }
 
-        return str.replace(str.substring(index - 9, index + 15), 'https://www.xbox.com/play');
+        str = str.replace(text, '.Home.getLink()):');
+        return str;
     },
 
     remotePlayKeepAlive(str: string) {
@@ -114,18 +114,6 @@ const PATCHES = {
         return str;
     },
 
-    // Enable Remote Play feature
-    remotePlayConnectMode(str: string) {
-        let text = 'connectMode:"cloud-connect",';
-        if (!str.includes(text)) {
-            return false;
-        }
-
-        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
     remotePlayDisableAchievementToast(str: string) {
         let text = '.AchievementUnlock:{';
@@ -133,33 +121,10 @@ remotePlayServerId: (window.BX_REMOTE_PLAY_CONFIG && window.BX_REMOTE_PLAY_CONFI
             return false;
         }
 
-        const newCode = `if (!!window.BX_REMOTE_PLAY_CONFIG) return;`;
+        const newCode = `if (window.location.pathname.includes('/play/consoles/launch/')) return;`;
         return str.replace(text, text + newCode);
     },
 
-    // Remote Play: Prevent adding "Fortnite" to the "Jump back in" list
-    remotePlayRecentlyUsedTitleIds(str: string) {
-        let text = '(e.data.recentlyUsedTitleIds)){';
-        if (!str.includes(text)) {
-            return false;
-        }
-
-        const newCode = `if (window.BX_REMOTE_PLAY_CONFIG) return;`;
-        return str.replace(text, text + newCode);
-    },
-
-    // Remote Play: change web page's title
-    remotePlayWebTitle(str: string) {
-        let text = 'titleTemplate:void 0,title:';
-        const index = str.indexOf(text);
-        if (index < 0) {
-            return false;
-        }
-
-        str = PatcherUtils.insertAt(str, index + text.length, `!!window.BX_REMOTE_PLAY_CONFIG ? "${t('remote-play')} - Better xCloud" :`);
-        return str;
-    },
-
     // Block WebRTC stats collector
     blockWebRtcStatsCollector(str: string) {
         let text = 'this.shouldCollectStats=!0';
@@ -171,7 +136,7 @@ remotePlayServerId: (window.BX_REMOTE_PLAY_CONFIG && window.BX_REMOTE_PLAY_CONFI
     },
 
     patchPollGamepads(str: string) {
-        const index = str.indexOf('},this.pollGamepads=()=>{');
+        const index = str.indexOf('()(this,"pollGamepads",');
         if (index < 0) {
             return false;
         }
@@ -189,7 +154,7 @@ remotePlayServerId: (window.BX_REMOTE_PLAY_CONFIG && window.BX_REMOTE_PLAY_CONFI
         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', '');
         }
@@ -227,8 +192,11 @@ remotePlayServerId: (window.BX_REMOTE_PLAY_CONFIG && window.BX_REMOTE_PLAY_CONFI
     },
 
     enableXcloudLogger(str: string) {
-        let text = 'this.telemetryProvider=e}log(e,t,r){';
-        if (!str.includes(text)) {
+        let index = str.indexOf('this.telemetryProvider.trackErrorLike');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, '}log(', index, 1500));
+        index > -1 && (index = PatcherUtils.indexOf(str, '{', index, 30, true));
+
+        if (index < 0) {
             return false;
         }
 
@@ -238,7 +206,7 @@ const logFunc = [console.debug, console.log, console.warn, console.error][logLev
 logFunc(logTag, '//', logMessage);
 `;
 
-        str = str.replaceAll(text, text + newCode);
+        str = PatcherUtils.insertAt(str, index, newCode);
         return str;
     },
 
@@ -269,8 +237,12 @@ logFunc(logTag, '//', logMessage);
             return false;
         }
 
-        const constIndex = str.indexOf('const', index - 30);
-        str = str.substring(0, constIndex) + 'e.onClose();return null;' + str.substring(constIndex);
+        const constIndex = PatcherUtils.lastIndexOf(str, 'const[', index, 100);
+        if (constIndex < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, constIndex, 'e();return null;');
         return str;
     },
 
@@ -377,9 +349,9 @@ if (window.BX_EXPOSED.stopTakRendering) {
         }
 
         let autoOffCode = '';
-        if (getPref(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;
@@ -421,25 +393,40 @@ if (titleInfo && !titleInfo.details.hasTouchSupport && !titleInfo.details.hasFak
     },
 
     patchStreamHud(str: string) {
-        let text = 'let{onCollapse';
-        if (!str.includes(text)) {
+        let index = str.indexOf('({onCollapse:');
+        if (index < 0) {
             return false;
         }
 
-        let newCode = `
-// Expose onShowStreamMenu
-window.BX_EXPOSED.showStreamMenu = e.onShowStreamMenu;
-// Restore the "..." button
-e.guideUI = null;
-`;
+        try {
+            const params = PatcherUtils.findAndParseParams(str, index, 1000);
+            if (!params) {
+                return false;
+            }
 
-        // Remove the TAK Edit button when the touch controller is disabled
-        if (getPref(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
-            newCode += 'e.canShowTakHUD = false;';
+            const canShowTakHUDVar = PatcherUtils.getVariableNameAfter(str, PatcherUtils.indexOf(str, 'canShowTakHUD', index, 500, true) + 1);
+            const guideUIVar = PatcherUtils.getVariableNameAfter(str, PatcherUtils.indexOf(str, 'guideUI', index, 500, true) + 1);
+            const onShowStreamMenuVar = PatcherUtils.getVariableNameAfter(str, PatcherUtils.indexOf(str, 'onShowStreamMenu', index, 500, true) + 1);
+            const offsetVar = PatcherUtils.getVariableNameAfter(str, PatcherUtils.indexOf(str, 'offset', index, 500, true) + 1);
+
+            let newCode = renderString(codeStreamHud, {
+                guideUI: guideUIVar,
+                onShowStreamMenu: onShowStreamMenuVar,
+                offset: offsetVar,
+            });
+
+            // Remove the TAK Edit button when the touch controller is disabled
+            if (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
+                newCode += `${canShowTakHUDVar} = false;`;
+            }
+
+            const bracketIndex = PatcherUtils.indexOf(str, '}){', index, 500, true);
+            str = PatcherUtils.insertAt(str, bracketIndex, newCode);
+            return str;
+
+        } catch (e) {
+            return false;
         }
-
-        str = str.replace(text, newCode + text);
-        return str;
     },
 
     broadcastPollingMode(str: string) {
@@ -554,7 +541,7 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});
             return false;
         }
 
-        const opacity = (getPref(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;
@@ -605,12 +592,13 @@ true` + text;
     },
 
     skipFeedbackDialog(str: string) {
-        let text = 'shouldTransitionToFeedback(e){';
-        if (!str.includes(text)) {
+        let index = str.indexOf('}shouldTransitionToFeedback(');
+        index >= 0 && (index = PatcherUtils.indexOf(str, '}){', index, 200, true));
+        if (index < 0) {
             return false;
         }
 
-        str = str.replace(text, text + 'return !1;');
+        str = PatcherUtils.insertAt(str, index, 'return !1;');
         return str;
     },
 
@@ -643,15 +631,13 @@ true` + text;
         return str;
     },
 
-    exposeInputSink(str: string) {
-        let text = 'this.controlChannel=null,this.inputChannel=null';
+    exposeInputChannel(str: string) {
+        let text = '()(this,"flushData",(';
         if (!str.includes(text)) {
             return false;
         }
 
-        const newCode = 'window.BX_EXPOSED.inputSink = this;';
-
-        str = str.replace(text, newCode + text);
+        str = str.replace(text, '()(window.BX_EXPOSED.inputChannel = this, "flushData", (');
         return str;
     },
 
@@ -702,9 +688,9 @@ true` + text;
 
         // Replace *qe*'s return value
         // `return a && r ?` => `return a && r || true ?`
-        index = str.indexOf(`const ${funcName}=e=>{`);
-        index > -1 && (index = str.indexOf('return ', index));
-        index > -1 && (index = str.indexOf('?', index));
+        index = str.indexOf(`const ${funcName}=({children`);
+        index > -1 && (index = PatcherUtils.indexOf(str, 'return ', 300));
+        index > -1 && (index = PatcherUtils.indexOf(str, '?', 100));
 
         if (index < 0) {
             return false;
@@ -716,7 +702,7 @@ true` + text;
 
     // Don't render News section
     ignoreNewsSection(str: string) {
-        let index = str.indexOf('Logger("CarouselRow")');
+        let index = str.indexOf('("CarouselRow"))');
         index > -1 && (index = PatcherUtils.lastIndexOf(str, 'const ', index, 200));
         if (index < 0) {
             return false;
@@ -733,28 +719,20 @@ true` + text;
             return false;
         }
 
-        index = PatcherUtils.lastIndexOf(str, 'return', index, 50);
+        index = PatcherUtils.lastIndexOf(str, '=>', index, 50);
         if (index < 0) {
             return false;
         }
 
-        str = PatcherUtils.replaceWith(str, index, 'return', 'return null;');
+        str = PatcherUtils.replaceWith(str, index, '=>', '=> true ? null :');
         return str;
     },
 
     // Don't render "All Games" sections
     ignoreAllGamesSection(str: string) {
         let index = str.indexOf('className:"AllGamesRow-module__allGamesRowContainer');
-        if (index < 0) {
-            return false;
-        }
-
-        index = PatcherUtils.indexOf(str, 'grid:!0,', index, 1500);
-        if (index < 0) {
-            return false;
-        }
-
-        index = PatcherUtils.lastIndexOf(str, '(0,', index, 70);
+        index > -1 && (index = PatcherUtils.indexOf(str, 'grid:!0,', index, 1500));
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, '(0,', index, 70));
         if (index < 0) {
             return false;
         }
@@ -763,6 +741,18 @@ true` + text;
         return str;
     },
 
+    ignoreByogSection(str: string) {
+        let index = str.indexOf('"ByogRow-module__container');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, 'return', index, 100));
+
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, 'return null;');
+        return str;
+    },
+
     // home-page.js
     ignorePlayWithTouchSection(str: string) {
         let index = str.indexOf('("Play_With_Touch"),');
@@ -782,21 +772,24 @@ true` + text;
     // home-page.js
     ignoreSiglSections(str: string) {
         let index = str.indexOf('SiglRow-module__heroCard___');
+        index >= 0 && (index = PatcherUtils.lastIndexOf(str, 'const[', index, 300));
         if (index < 0) {
             return false;
         }
 
-        index = PatcherUtils.lastIndexOf(str, 'const[', index, 300);
-        if (index < 0) {
+        const params = PatcherUtils.findAndParseParams(str, index - 500, 500);
+        if (!params || !params.id) {
             return false;
         }
 
-        const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS);
+        const PREF_HIDE_SECTIONS = getGlobalPref(GlobalPref.UI_HIDE_SECTIONS);
         const siglIds: GamePassCloudGallery[] = [];
 
         const sections: PartialRecord<UiSection, GamePassCloudGallery> = {
             [UiSection.NATIVE_MKB]: GamePassCloudGallery.NATIVE_MKB,
             [UiSection.MOST_POPULAR]: GamePassCloudGallery.MOST_POPULAR,
+            [UiSection.LEAVING_SOON]: GamePassCloudGallery.LEAVING_SOON,
+            [UiSection.RECENTLY_ADDED]: GamePassCloudGallery.RECENTLY_ADDED,
         };
 
         for (const section of PREF_HIDE_SECTIONS) {
@@ -804,20 +797,24 @@ true` + text;
             galleryId && siglIds.push(galleryId);
         };
 
-        const checkSyntax = siglIds.map(item => `siglId === "${item}"`).join(' || ');
+        const checkSyntax = siglIds.map(item => `${params.id} === "${item}"`).join(' || ');
+        const newCode = `if (${params.id} && (${checkSyntax})) return null;`;
 
-        const newCode = `
-if (e && e.id) {
-    const siglId = e.id;
-    if (${checkSyntax}) {
-        return null;
-    }
-}
-`;
         str = PatcherUtils.insertAt(str, index, newCode);
         return str;
     },
 
+    ignoreGenresSection(str: string) {
+        let index = str.indexOf('="GenresRow"');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, '{', index));
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index + 1, 'return null;');
+        return str;
+    },
+
     // Override Storage.getSettings()
     overrideStorageGetSettings(str: string) {
         let text = '}getSetting(e){';
@@ -912,8 +909,8 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
 
     // Disable long touch activating context menu
     disableTouchContextMenu(str: string) {
-        let index = str.indexOf('"ContextualCardActions-module__container');
-        index >= 0 && (index = str.indexOf('addEventListener("touchstart"', index));
+        let index = str.indexOf('.addEventListener("touchstart",');
+        index >= 0 && (index = PatcherUtils.indexOf(str, '.addEventListener("touchend"', index, 200));
         index >= 0 && (index = PatcherUtils.lastIndexOf(str, 'return ', index, 50));
         if (index < 0) {
             return false;
@@ -923,20 +920,6 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
         return str;
     },
 
-    // Optimize Game slug generator by using cached RegEx
-    optimizeGameSlugGenerator(str: string) {
-        let text = '/[;,/?:@&=+_`~$%#^*()!^\\u2122\\xae\\xa9]/g';
-        if (!str.includes(text)) {
-            return false;
-        }
-
-        str = str.replace(text, 'window.BX_EXPOSED.GameSlugRegexes[0]');
-        str = str.replace('/ {2,}/g', 'window.BX_EXPOSED.GameSlugRegexes[1]');
-        str = str.replace('/ /g', 'window.BX_EXPOSED.GameSlugRegexes[2]');
-
-        return str;
-    },
-
     modifyPreloadedState(str: string) {
         let text = '=window.__PRELOADED_STATE__;';
         if (!str.includes(text)) {
@@ -959,6 +942,10 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
         return PatcherUtils.patchBeforePageLoad(str, 'stream');
     },
 
+    remotePlayStreamPageBeforeLoad(str: string) {
+        return PatcherUtils.patchBeforePageLoad(str, 'remote-play-stream');
+    },
+
     disableAbsoluteMouse(str: string) {
         let text = 'sendAbsoluteMouseCapableMessage(e){';
         if (!str.includes(text)) {
@@ -982,7 +969,7 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
 
         // Find index after {
         index = str.indexOf('{', index) + 1;
-        const blockFeatures = getPref(PrefKey.BLOCK_FEATURES);
+        const blockFeatures = getGlobalPref(GlobalPref.BLOCK_FEATURES);
         const filters = [];
         if (blockFeatures.includes(BlockFeature.NOTIFICATIONS_INVITES)) {
             filters.push('GameInvite', 'PartyInvite');
@@ -1013,9 +1000,14 @@ ${subsVar} = subs;
             return false;
         }
 
-        const newCode = 'window.BX_EXPOSED.reactCreateElement=';
-        str = PatcherUtils.insertAt(str, index - 1, newCode);
+        str = PatcherUtils.insertAt(str, index - 1, 'window.BX_EXPOSED.reactCreateElement=');
 
+        index = PatcherUtils.indexOf(str, '.useEffect=', index);
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index - 1, 'window.BX_EXPOSED.reactUseEffect=');
         return str;
     },
 
@@ -1032,22 +1024,26 @@ ${subsVar} = subs;
         }
 
         // Find function's parameter
-        const arrowIndex = PatcherUtils.lastIndexOf(str, '=>{', initialIndex, 300);
-        if (arrowIndex < 0) {
+        const productIdIndex = PatcherUtils.lastIndexOf(str, ',productId:', initialIndex, 300);
+        if (productIdIndex < 0) {
             return false;
         }
 
-        const paramVar = PatcherUtils.getVariableNameBefore(str, arrowIndex);
+        const params = PatcherUtils.findAndParseParams(str, productIdIndex - 200, 400);
+        if (!params || !params.productId) {
+            return false;
+        }
+
+        const productIdVar = params.productId;
 
         // Find supportedInputIcons and title var names
         const supportedInputIconsVar = PatcherUtils.getVariableNameAfter(str, PatcherUtils.indexOf(str, 'supportedInputIcons:', initialIndex, 100, true));
-
-        if (!paramVar || !supportedInputIconsVar) {
+        if (!supportedInputIconsVar) {
             return false;
         }
 
         const newCode = renderString(codeGameCardIcons, {
-            param: paramVar,
+            productId: productIdVar,
             supportedInputIcons: supportedInputIconsVar,
         });
 
@@ -1098,7 +1094,7 @@ ${subsVar} = subs;
         // Find "return" keyword
         index = PatcherUtils.indexOf(str, 'return', index, 200);
 
-        const newCode = `${paramVar}.set('q', ${getPref(PrefKey.UI_IMAGE_QUALITY)});`;
+        const newCode = `${paramVar}.set('q', ${getGlobalPref(GlobalPref.UI_IMAGE_QUALITY)});`;
         str = PatcherUtils.insertAt(str, index, newCode);
 
         return str;
@@ -1112,102 +1108,250 @@ ${subsVar} = subs;
             return false;
         }
 
-        str = PatcherUtils.insertAt(str, index, `&q=${getPref(PrefKey.UI_IMAGE_QUALITY)}`);
+        str = PatcherUtils.insertAt(str, index, `&q=${getGlobalPref(GlobalPref.UI_IMAGE_QUALITY)}`);
         return str;
-    }
-};
+    },
+
+    injectHeaderUseEffect(str: string) {
+        let index = str.indexOf('className:"Header-module__header');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, 'return', index, 300));
+        if (index < 0) {
+            return false;
+        }
+
+        return PatcherUtils.injectUseEffect(str, index, 'Script', 'ui.header.rendered');
+    },
+
+    injectErrorPageUseEffect(str: string) {
+        let index = str.indexOf('"PureErrorPage-module__container');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, '})=>(0,', index, 200));
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index + 4, '{return ');
+        str = PatcherUtils.injectUseEffect(str, index + 5, 'Script', 'ui.error.rendered');
+        str += '}';
+        return str;
+    },
+
+    injectStreamMenuUseEffect(str: string) {
+        let index = str.indexOf('"StreamMenu-module__container');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, 'return', index, 200));
+        if (index < 0) {
+            return false;
+        }
+
+        return PatcherUtils.injectUseEffect(str, index, 'Stream', 'ui.streamMenu.rendered');
+    },
+
+    injectGuideHomeUseEffect(str: string) {
+        let index = str.indexOf('"HomeLandingPage-module__authenticatedContentContainer');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, 'return', index, 200));
+        if (index < 0) {
+            return false;
+        }
+
+        return PatcherUtils.injectUseEffect(str, index, 'Script', 'ui.guideHome.rendered');
+    },
+
+    injectCreatePortal(str: string) {
+        let index = str.indexOf('.createPortal=function');
+        index > -1 && (index = PatcherUtils.indexOf(str, '{', index, 50, true));
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, codeCreatePortal);
+        return str;
+    },
+
+    injectAchievementsProgressUseEffect(str: string) {
+        let index = str.indexOf('"AchievementsButton-module__progressBarContainer');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, 'return', index, 200));
+        if (index < 0) {
+            return false;
+        }
+
+        return PatcherUtils.injectUseEffect(str, index, 'Script', 'ui.guideAchievementProgress.rendered');
+    },
+
+    injectAchievementsDetailUseEffect(str: string) {
+        let index = str.indexOf('GuideAchievementDetail.useParams()');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, 'const', index, 200));
+        if (index < 0) {
+            return false;
+        }
+
+        return PatcherUtils.injectUseEffect(str, index, 'Script', 'ui.guideAchievementDetail.rendered');
+    },
+
+    patchCustomInputIcon(str: string) {
+        let index = str.indexOf('.MouseAndKeyboard="MouseAndKeyboard"');
+        if (index < 0) {
+            return false;
+        }
+
+        // Get productId
+        const productIdMatch = /const (\w+)=(\w+)=>{/.exec(str.substring(index, index + 200));
+        if (!productIdMatch) {
+            return false;
+        }
+
+        // Define productId variable
+        str = str.replace(productIdMatch[0], productIdMatch[0] + `const productId = ${productIdMatch[2]};`);
+
+        let match = /(\w+)&&(\w+\.push\(\w+\.Touch\))/.exec(str);
+        if (!match) {
+            return false;
+        }
+
+        str = str.replace(match[0], `(${match[1]} || window.BX_EXPOSED.hasCustomTouchControl(productId)) && ${match[2]}`);
+
+        match = /(\w+)&&(\w+\.push\(\w+\.MouseAndKeyboard\))/.exec(str);
+        if (match) {
+            str = str.replace(match[0], `(${match[1]} || window.BX_EXPOSED.hasCustomNativeMkb(productId)) && ${match[2]}`);
+        }
+
+        return str;
+    },
+
+    /*
+    patchBasicGameInfo(str: string) {
+        let index = str.indexOf('.ChildXboxTitleIds,offerings');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, 'return{', index, 1000));
+        if (index < 0) {
+            return false;
+        }
+
+        const varName = PatcherUtils.getVariableNameBefore(str, PatcherUtils.lastIndexOf(str, '=>{', index));
+        if (!varName) {
+            return false;
+        }
+
+        const newCode = `
+const info = ${varName};
+if (info.ProductTitle.includes('Xbox One')) {
+    return {};
+}
+`;
+        str = PatcherUtils.insertAt(str, index, newCode);
+        return str;
+    },
+    */
+} as const satisfies { [key: string]: PatchFunction };
 
 let PATCH_ORDERS = PatcherUtils.filterPatches([
-    ...(AppInterface && getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
+    ...(AppInterface && getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
         'enableNativeMkb',
-        'exposeInputSink',
         'disableAbsoluteMouse',
-    ] : []),
+    ] : []) as PatchArray,
 
     'exposeReactCreateComponent',
-    'gameCardCustomIcons',
-    // 'gameCardPassTitle',
 
-    ...(getPref(PrefKey.UI_IMAGE_QUALITY) < 90 ? [
-        'setImageQuality',
-        'setBackgroundImageQuality',
-    ] : []),
+    'injectCreatePortal',
+
+    'broadcastPollingMode',
+
+    getGlobalPref(GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME) && 'patchSetCurrentFocus',
+
+    'patchGamepadPolling',
 
     'modifyPreloadedState',
 
-    'optimizeGameSlugGenerator',
-
     'detectBrowserRouterReady',
-    'patchRequestInfoCrash',
-
-    'disableStreamGate',
-    'broadcastPollingMode',
-    'patchGamepadPolling',
 
     'exposeStreamSession',
+    'supportLocalCoOp',
+
+    'disableStreamGate',
+
     'exposeDialogRoutes',
 
-    'homePageBeforeLoad',
-    'productDetailPageBeforeLoad',
-    'streamPageBeforeLoad',
+    ...(getGlobalPref(GlobalPref.UI_IMAGE_QUALITY) < 90 ? [
+        'setImageQuality',
+    ] : []) as PatchArray,
 
+    'patchRequestInfoCrash',
+
+    'injectErrorPageUseEffect',
+
+    'streamPageBeforeLoad',
+    'remotePlayStreamPageBeforeLoad',
+
+    'injectGuideHomeUseEffect',
+    'injectAchievementsProgressUseEffect',
+    'injectAchievementsDetailUseEffect',
     'guideAchievementsDefaultLocked',
 
+    'injectHeaderUseEffect',
+
+    'homePageBeforeLoad',
+
+    'patchCustomInputIcon',
+
+    'gameCardCustomIcons',
+    // 'gameCardPassTitle',
+
+    'productDetailPageBeforeLoad',
+
     'enableTvRoutes',
 
-    'supportLocalCoOp',
     'overrideStorageGetSettings',
-    getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && 'patchSetCurrentFocus',
 
-    getPref(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',
-    ] : []),
+    ] : []) as PatchArray,
 
-    ...(getPref(PrefKey.BLOCK_TRACKING) ? [
+    ...(getGlobalPref(GlobalPref.BLOCK_TRACKING) ? [
         'disableAiTrack',
-        'disableTelemetry',
+        // 'disableTelemetry',
 
         'blockWebRtcStatsCollector',
         'disableIndexDbLogging',
 
         'disableTelemetryProvider',
-    ] : []),
+    ] : []) as PatchArray,
 
-    ...(getPref(PrefKey.REMOTE_PLAY_ENABLED) ? [
+    ...(!getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.REMOTE_PLAY) ? [
         'remotePlayKeepAlive',
-        'remotePlayDirectConnectUrl',
         'remotePlayDisableAchievementToast',
-        'remotePlayRecentlyUsedTitleIds',
-        'remotePlayWebTitle',
         STATES.userAgent.capabilities.touch && 'patchUpdateInputConfigurationAsync',
-    ] : []),
+    ] : []) as PatchArray,
 
     ...(BX_FLAGS.EnableXcloudLogging ? [
         'enableConsoleLogging',
         'enableXcloudLogger',
-    ] : []),
+    ] : []) as PatchArray,
+]);
+
+const hideSections = getGlobalPref(GlobalPref.UI_HIDE_SECTIONS);
+let HOME_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
+    hideSections.includes(UiSection.GENRES) && 'ignoreGenresSection',
+    !getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.BYOG) && hideSections.includes(UiSection.BOYG) && 'ignoreByogSection',
+
+    STATES.browser.capabilities.touch && hideSections.includes(UiSection.TOUCH) && 'ignorePlayWithTouchSection',
+
+    getGlobalPref(GlobalPref.UI_IMAGE_QUALITY) < 90 && 'setBackgroundImageQuality',
+
+    hideSections.some(value => [UiSection.NATIVE_MKB, UiSection.MOST_POPULAR].includes(value)) && 'ignoreSiglSections',
+
+    hideSections.includes(UiSection.NEWS) && 'ignoreNewsSection',
+    (getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.FRIENDS) || hideSections.includes(UiSection.FRIENDS)) && 'ignorePlayWithFriendsSection',
+    hideSections.includes(UiSection.ALL_GAMES) && 'ignoreAllGamesSection',
 
     ...(blockSomeNotifications() ? [
         'changeNotificationsSubscription',
-    ] : []),
-]);
-
-const hideSections = getPref(PrefKey.UI_HIDE_SECTIONS);
-let HOME_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
-    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',
+    ] : []) as PatchArray,
 ]);
 
 // Only when playing
-// TODO: check this
-// @ts-ignore
 let STREAM_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
+    'exposeInputChannel',
+
     'patchXcloudTitleInfo',
     'disableGamepadDisconnectedScreen',
     'patchStreamHud',
@@ -1215,40 +1359,40 @@ let STREAM_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
 
     'alwaysShowStreamHud',
 
+    'injectStreamMenuUseEffect',
+
     // '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(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL && 'patchShowSensorControls',
-        getPref(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL && 'exposeTouchLayoutManager',
-        (getPref(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF || getPref(PrefKey.TOUCH_CONTROLLER_AUTO_OFF)) && 'disableTakRenderer',
-        getPref(PrefKey.TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
-        (getPref(PrefKey.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.OFF && (getPref(PrefKey.MKB_ENABLED) || getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON)) && 'patchBabylonRendererClass',
-    ] : []),
-
-    BX_FLAGS.EnableXcloudLogging && 'enableConsoleLogging',
+        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',
+    ] : []) as PatchArray,
 
     'patchPollGamepads',
 
-    getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'streamCombineSources',
+    getGlobalPref(GlobalPref.STREAM_COMBINE_SOURCES) && 'streamCombineSources',
 
-    ...(getPref(PrefKey.REMOTE_PLAY_ENABLED) ? [
+    ...(!getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.REMOTE_PLAY) ? [
+        'remotePlayPostStreamRedirectUrl',
         'patchRemotePlayMkb',
-        'remotePlayConnectMode',
-    ] : []),
+    ] : []) as PatchArray,
 
     // Native MKB
-    ...(AppInterface && getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
+    ...(AppInterface && getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
         'patchMouseAndKeyboardEnabled',
         'disableNativeRequestPointerLock',
-    ] : []),
+    ] : []) as PatchArray,
 ]);
 
 let PRODUCT_DETAIL_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
@@ -1261,6 +1405,7 @@ export class Patcher {
     private static remainingPatches: { [key in PatchPage]: PatchArray } = {
         home: HOME_PAGE_PATCH_ORDERS,
         stream: STREAM_PAGE_PATCH_ORDERS,
+        'remote-play-stream': STREAM_PAGE_PATCH_ORDERS,
         'product-detail': PRODUCT_DETAIL_PAGE_PATCH_ORDERS,
     };
 
@@ -1343,6 +1488,7 @@ export class Patcher {
             let patchedFuncStr = funcStr;
 
             let modified = false;
+            const chunkAppliedPatches = [];
 
             for (let patchIndex = 0; patchIndex < patchesToCheck.length; patchIndex++) {
                 const patchName = patchesToCheck[patchIndex];
@@ -1365,18 +1511,21 @@ export class Patcher {
                 modified = true;
                 patchedFuncStr = tmpStr;
 
-                BxLogger.info(LOG_TAG, `✅ ${patchName}`);
                 appliedPatches.push(patchName);
+                chunkAppliedPatches.push(patchName);
 
                 // Remove patch
                 patchesToCheck.splice(patchIndex, 1);
                 patchIndex--;
                 PATCH_ORDERS = PATCH_ORDERS.filter(item => item != patchName);
-                BxLogger.info(LOG_TAG, 'Remaining patches', PATCH_ORDERS);
             }
 
             // Apply patched functions
             if (modified) {
+                BxLogger.info(LOG_TAG, `✅ [${chunkId}] ${chunkAppliedPatches.join(', ')}`);
+                PATCH_ORDERS.length && BxLogger.info(LOG_TAG, 'Remaining patches', PATCH_ORDERS);
+
+                BX_FLAGS.Debug && console.time(LOG_TAG);
                 try {
                     chunkData[chunkId] = eval(patchedFuncStr);
                 } catch (e: unknown) {
@@ -1384,6 +1533,7 @@ export class Patcher {
                         BxLogger.error(LOG_TAG, 'Error', appliedPatches, e.message, patchedFuncStr);
                     }
                 }
+                BX_FLAGS.Debug && console.timeEnd(LOG_TAG);
             }
 
             // Save to cache
@@ -1419,7 +1569,9 @@ export class PatcherCache {
         BxLogger.info(LOG_TAG, 'Cache', this.CACHE);
 
         const pathName = window.location.pathname;
-        if (pathName.includes('/play/launch/')) {
+        if (pathName.includes('/play/consoles/launch/')) {
+            Patcher.patchPage('remote-play-stream');
+        } else if (pathName.includes('/play/launch/')) {
             Patcher.patchPage('stream');
         } else if (pathName.includes('/play/games/')) {
             Patcher.patchPage('product-detail');
@@ -1438,24 +1590,25 @@ export class PatcherCache {
     /**
      * Get patch's signature
      */
-    private getSignature(): number {
+    private getSignature(): string {
         const scriptVersion = SCRIPT_VERSION;
         const patches = JSON.stringify(ALL_PATCHES);
 
         // Get client.js's hash
-        let webVersion = '';
-        const $link = document.querySelector<HTMLLinkElement>('link[data-chunk="client"][href*="/client."]');
+        let clientHash = '';
+        const $link = document.querySelector<HTMLLinkElement>('link[data-chunk="client"][as="script"][href*="/client."]');
         if ($link) {
             const match = /\/client\.([^\.]+)\.js/.exec($link.href);
-            match && (webVersion = match[1]);
-        } else {
-            // Get version from <meta>
-            // Sometimes this value is missing
-            webVersion = (document.querySelector<HTMLMetaElement>('meta[name=gamepass-app-version]'))?.content ?? '';
+            match && (clientHash = match[1]);
         }
 
+        // Get version from <meta>
+        // Sometimes this value is missing
+        const webVersion = (document.querySelector<HTMLMetaElement>('meta[name=gamepass-app-version]'))?.content ?? '';
+        const webVersionDate = (document.querySelector<HTMLMetaElement>('meta[name=gamepass-app-date]'))?.content ?? '';
+
         // Calculate signature
-        const sig = hashCode(scriptVersion + webVersion + patches)
+        const sig = `${scriptVersion}:${clientHash}:${webVersion}:${webVersionDate}:${hashCode(patches)}`;
         return sig;
     }
 
@@ -1469,7 +1622,7 @@ export class PatcherCache {
         const storedSig = window.localStorage.getItem(this.KEY_SIGNATURE) || 0;
         const currentSig = this.getSignature();
 
-        if (currentSig !== parseInt(storedSig as string)) {
+        if (currentSig !== storedSig) {
             // Save new signature
             BxLogger.warning(LOG_TAG, 'Signature changed');
             window.localStorage.setItem(this.KEY_SIGNATURE, currentSig.toString());

src/modules/patcher/patches/src/create-portal.ts

@@ -0,0 +1,13 @@
+// @ts-ignore
+declare const arguments: any;
+
+const $dom = arguments[1];
+if ($dom && $dom instanceof HTMLElement && $dom.id === 'gamepass-dialog-root') {
+    let showing = false;
+    const $child = $dom.firstElementChild;
+    const $dialog = $child?.firstElementChild;
+    if ($dialog) {
+        showing = !$dialog.className.includes('pageChangeExit');
+    }
+    window.BxEventBus.Script.emit(showing ? 'dialog.shown' : 'dialog.dismissed', {});
+}

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

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

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

@@ -53,6 +53,9 @@ $this$.toggleLocalCoOp = (enable: boolean) => {
             continue;
         }
 
+        // Don't show toast
+        (gamepad as any)._noToast = true;
+
         window.dispatchEvent(new GamepadEvent('gamepaddisconnected', { gamepad }));
         window.dispatchEvent(new GamepadEvent('gamepadconnected', { gamepad }));
     }

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

@@ -3,7 +3,7 @@ declare const e: string;
 
 try {
     const msg = JSON.parse(e);
-    if (msg.reason === 'WarningForBeingIdle' && !window.location.pathname.includes('/launch/')) {
+    if (msg.reason === 'WarningForBeingIdle' && window.location.pathname.includes('/play/consoles/launch/')) {
         $this$.sendKeepAlive();
         // @ts-ignore
         return;

src/modules/patcher/patches/src/stream-hud.ts

@@ -0,0 +1,13 @@
+// @ts-ignore
+declare let $guideUI$: any;
+declare const $onShowStreamMenu$: any;
+declare const $offset$: any;
+
+// Expose onShowStreamMenu
+window.BX_EXPOSED.showStreamMenu = $onShowStreamMenu$;
+// Restore the "..." button
+$guideUI$ = null;
+
+window.BX_EXPOSED.reactUseEffect(() => {
+    window.BxEventBus.Stream.emit('ui.streamHud.rendered', { expanded: $offset$.x === 0 });
+});

src/modules/player/base-canvas-player.ts

@@ -0,0 +1,119 @@
+import { BxLogger } from "@/utils/bx-logger";
+import { BaseStreamPlayer, StreamPlayerElement, StreamPlayerFilter } from "./base-stream-player";
+import { StreamVideoProcessing, type StreamPlayerType } from "@/enums/pref-values";
+
+export abstract class BaseCanvasPlayer extends BaseStreamPlayer {
+    protected $canvas: HTMLCanvasElement;
+
+    protected targetFps = 60;
+    protected frameInterval = 0;
+    protected lastFrameTime = 0;
+    protected animFrameId: number | null = null;
+    protected frameCallback: any;
+    private boundDrawFrame: () => void;
+
+    constructor(playerType: StreamPlayerType, $video: HTMLVideoElement, logTag: string) {
+        super(playerType, StreamPlayerElement.CANVAS, $video, logTag);
+
+        const $canvas = document.createElement('canvas');
+        $canvas.width = $video.videoWidth;
+        $canvas.height = $video.videoHeight;
+        this.$canvas = $canvas;
+
+        $video.insertAdjacentElement('afterend', this.$canvas);
+
+        let frameCallback: any;
+        if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
+            const $video = this.$video;
+            frameCallback = $video.requestVideoFrameCallback.bind($video);
+        } else {
+            frameCallback = requestAnimationFrame;
+        }
+
+        this.frameCallback = frameCallback;
+        this.boundDrawFrame = this.drawFrame.bind(this);
+    }
+
+    async init(): Promise<void> {
+        super.init();
+
+        await this.setupShaders();
+        this.setupRendering();
+    }
+
+    setTargetFps(target: number) {
+        this.targetFps = target;
+        this.lastFrameTime = 0;
+        this.frameInterval = target ? Math.floor(1000 / target) : 0;
+    }
+
+    getCanvas() {
+        return this.$canvas;
+    }
+
+    destroy() {
+        BxLogger.info(this.logTag, 'Destroy');
+
+        this.isStopped = true;
+        if (this.animFrameId) {
+            if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
+                this.$video.cancelVideoFrameCallback(this.animFrameId);
+            } else {
+                cancelAnimationFrame(this.animFrameId);
+            }
+
+            this.animFrameId = null;
+        }
+
+        if (this.$canvas.isConnected) {
+            this.$canvas.remove();
+        }
+
+        this.$canvas.width = 1;
+        this.$canvas.height = 1;
+    }
+
+    toFilterId(processing: StreamVideoProcessing) {
+        return processing === StreamVideoProcessing.CAS ? StreamPlayerFilter.CAS : StreamPlayerFilter.USM;
+    }
+
+    protected shouldDraw() {
+        if (this.targetFps >= 60) {
+            // Always draw
+            return true;
+        } else if (this.targetFps === 0) {
+            // Don't draw when FPS is 0
+            return false;
+        }
+
+        const currentTime = performance.now();
+        const timeSinceLastFrame = currentTime - this.lastFrameTime;
+        if (timeSinceLastFrame < this.frameInterval) {
+            // Skip frame to limit FPS
+            return false;
+        }
+
+        this.lastFrameTime = currentTime;
+        return true;
+    }
+
+    private drawFrame() {
+        if (this.isStopped) {
+            return;
+        }
+
+        this.animFrameId = this.frameCallback(this.boundDrawFrame);
+        if (!this.shouldDraw()) {
+            return;
+        }
+
+        this.updateFrame();
+    }
+
+    protected setupRendering(): void {
+        this.animFrameId = this.frameCallback(this.boundDrawFrame);
+    }
+
+    protected abstract setupShaders(): void;
+    abstract updateFrame(): void;
+}

src/modules/player/base-stream-player.ts

@@ -0,0 +1,48 @@
+import { StreamVideoProcessing, type StreamPlayerType } from "@/enums/pref-values";
+import type { StreamPlayerOptions } from "@/types/stream";
+import { BxLogger } from "@/utils/bx-logger";
+
+export const enum StreamPlayerElement {
+    VIDEO = 'video',
+    CANVAS = 'canvas',
+}
+
+export const enum StreamPlayerFilter {
+    USM = 1,
+    CAS = 2,
+}
+
+export abstract class BaseStreamPlayer {
+    protected logTag: string;
+    protected playerType: StreamPlayerType;
+    protected elementType: StreamPlayerElement;
+    protected $video: HTMLVideoElement;
+
+    protected options: StreamPlayerOptions = {
+        processing: StreamVideoProcessing.USM,
+        sharpness: 0,
+        brightness: 1.0,
+        contrast: 1.0,
+        saturation: 1.0,
+    };
+
+    protected isStopped = false;
+
+    constructor(playerType: StreamPlayerType, elementType: StreamPlayerElement, $video: HTMLVideoElement, logTag: string) {
+        this.playerType = playerType;
+        this.elementType = elementType;
+        this.$video = $video;
+        this.logTag = logTag;
+    }
+
+    init() {
+        BxLogger.info(this.logTag, 'Initialize');
+    }
+
+    updateOptions(newOptions: Partial<StreamPlayerOptions>, refresh=false) {
+        this.options = Object.assign(this.options, newOptions);
+        refresh && this.refreshPlayer();
+    }
+
+    abstract refreshPlayer(): void;
+}

src/modules/player/video/video-player.ts

@@ -0,0 +1,102 @@
+import { CE } from "@/utils/html";
+import { BaseStreamPlayer, StreamPlayerElement } from "../base-stream-player";
+import { StreamPlayerType, StreamVideoProcessing } from "@/enums/pref-values";
+import { GlobalPref } from "@/enums/pref-keys";
+import { getGlobalPref } from "@/utils/pref-utils";
+import { ScreenshotManager } from "@/utils/screenshot-manager";
+
+export class VideoPlayer extends BaseStreamPlayer {
+    private $videoCss!: HTMLStyleElement;
+    private $usmMatrix!: SVGFEConvolveMatrixElement;
+
+    constructor($video: HTMLVideoElement, logTag: string) {
+        super(StreamPlayerType.VIDEO, StreamPlayerElement.VIDEO, $video, logTag);
+    }
+
+    init(): void {
+        super.init();
+
+        // Setup SVG filters
+        const xmlns = 'http://www.w3.org/2000/svg';
+        const $svg = CE('svg', {
+                id: 'bx-video-filters',
+                class: 'bx-gone',
+                xmlns,
+            },
+            CE('defs', { xmlns: 'http://www.w3.org/2000/svg' },
+                CE('filter', {
+                    id: 'bx-filter-usm',
+                    xmlns,
+                }, this.$usmMatrix = CE('feConvolveMatrix', {
+                    id: 'bx-filter-usm-matrix',
+                    order: '3',
+                    xmlns,
+                }) as unknown as SVGFEConvolveMatrixElement),
+            ),
+        );
+
+        this.$videoCss = CE('style', { id: 'bx-video-css' });
+
+        const $fragment = document.createDocumentFragment();
+        $fragment.append(this.$videoCss, $svg);
+        document.documentElement.appendChild($fragment);
+    }
+
+    protected setupRendering(): void {}
+    forceDrawFrame(): void {}
+    updateCanvas(): void {}
+
+    refreshPlayer() {
+        let filters = this.getVideoPlayerFilterStyle();
+        let videoCss = '';
+        if (filters) {
+            videoCss += `filter: ${filters} !important;`;
+        }
+
+        // Apply video filters to screenshots
+        if (getGlobalPref(GlobalPref.SCREENSHOT_APPLY_FILTERS)) {
+            ScreenshotManager.getInstance().updateCanvasFilters(filters);
+        }
+
+        let css = '';
+        if (videoCss) {
+            css = `#game-stream video { ${videoCss} }`;
+        }
+
+        this.$videoCss.textContent = css;
+    }
+
+    clearFilters() {
+        this.$videoCss.textContent = '';
+    }
+
+    private getVideoPlayerFilterStyle() {
+        const filters = [];
+
+        const sharpness = this.options.sharpness || 0;
+        if (this.options.processing === StreamVideoProcessing.USM && sharpness != 0) {
+            const level = (7 - ((sharpness / 2) - 1) * 0.5).toFixed(1); // 5, 5.5, 6, 6.5, 7
+            const matrix = `0 -1 0 -1 ${level} -1 0 -1 0`;
+            this.$usmMatrix?.setAttributeNS(null, 'kernelMatrix', matrix);
+
+            filters.push(`url(#bx-filter-usm)`);
+        }
+
+        const saturation = this.options.saturation || 100;
+        if (saturation != 100) {
+            filters.push(`saturate(${saturation}%)`);
+        }
+
+        const contrast =  this.options.contrast || 100;
+        if (contrast != 100) {
+            filters.push(`contrast(${contrast}%)`);
+        }
+
+        const brightness = this.options.brightness || 100;
+        if (brightness != 100) {
+            filters.push(`brightness(${brightness}%)`);
+        }
+
+        return filters.join(' ');
+    }
+}

src/modules/player/webgl2-player.ts

@@ -1,268 +0,0 @@
-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";
-
-
-export class WebGL2Player {
-    private readonly LOG_TAG = 'WebGL2Player';
-
-    private $video: HTMLVideoElement;
-    private $canvas: HTMLCanvasElement;
-
-    private gl: WebGL2RenderingContext | null = null;
-    private resources: Array<any> = [];
-    private program: WebGLProgram | null = null;
-
-    private stopped: boolean = false;
-
-    private options = {
-        filterId: 1,
-        sharpenFactor: 0,
-        brightness: 0.0,
-        contrast: 0.0,
-        saturation: 0.0,
-    };
-
-    private targetFps = 60;
-    private frameInterval = 0;
-    private lastFrameTime = 0;
-
-    private animFrameId: number | null = null;
-
-    constructor($video: HTMLVideoElement) {
-        BxLogger.info(this.LOG_TAG, 'Initialize');
-        this.$video = $video;
-
-        const $canvas = document.createElement('canvas');
-        $canvas.width = $video.videoWidth;
-        $canvas.height = $video.videoHeight;
-        this.$canvas = $canvas;
-
-        this.setupShaders();
-        this.setupRendering();
-
-        $video.insertAdjacentElement('afterend', $canvas);
-    }
-
-    setFilter(filterId: number, update = true) {
-        this.options.filterId = filterId;
-        update && this.updateCanvas();
-    }
-
-    setSharpness(sharpness: number, update = true) {
-        this.options.sharpenFactor = sharpness;
-        update && this.updateCanvas();
-    }
-
-    setBrightness(brightness: number, update = true) {
-        this.options.brightness = 1 + (brightness - 100) / 100;
-        update && this.updateCanvas();
-    }
-
-    setContrast(contrast: number, update = true) {
-        this.options.contrast = 1 + (contrast - 100) / 100;
-        update && this.updateCanvas();
-    }
-
-    setSaturation(saturation: number, update = true) {
-        this.options.saturation = 1 + (saturation - 100) / 100;
-        update && this.updateCanvas();
-    }
-
-    setTargetFps(target: number) {
-        this.targetFps = target;
-        this.lastFrameTime = 0;
-        this.frameInterval = target ? Math.floor(1000 / target) : 0;
-    }
-
-    getCanvas() {
-        return this.$canvas;
-    }
-
-    updateCanvas() {
-        const gl = this.gl!;
-        const program = this.program!;
-
-        gl.uniform2f(gl.getUniformLocation(program, 'iResolution'), this.$canvas.width, this.$canvas.height);
-
-        gl.uniform1i(gl.getUniformLocation(program, 'filterId'), this.options.filterId);
-        gl.uniform1f(gl.getUniformLocation(program, 'sharpenFactor'), this.options.sharpenFactor);
-        gl.uniform1f(gl.getUniformLocation(program, 'brightness'), this.options.brightness);
-        gl.uniform1f(gl.getUniformLocation(program, 'contrast'), this.options.contrast);
-        gl.uniform1f(gl.getUniformLocation(program, 'saturation'), this.options.saturation);
-    }
-
-    forceDrawFrame() {
-        const gl = this.gl!;
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.$video);
-        gl.drawArrays(gl.TRIANGLES, 0, 6);
-    }
-
-    private setupRendering() {
-        let frameCallback: any;
-        if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
-            const $video = this.$video;
-            frameCallback = $video.requestVideoFrameCallback.bind($video);
-        } else {
-            frameCallback = requestAnimationFrame;
-        }
-
-        let animate = () => {
-            if (this.stopped) {
-                return;
-            }
-
-            this.animFrameId = frameCallback(animate);
-
-            let draw = true;
-
-            // Don't draw when FPS is 0
-            if (this.targetFps === 0) {
-                draw = false;
-            } else if (this.targetFps < 60) {
-                // Limit FPS
-                const currentTime = performance.now();
-                const timeSinceLastFrame = currentTime - this.lastFrameTime;
-                if (timeSinceLastFrame < this.frameInterval) {
-                    draw = false;
-                } else {
-                    this.lastFrameTime = currentTime;
-                }
-            }
-
-            if (draw) {
-                const gl = this.gl!;
-                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.$video);
-                gl.drawArrays(gl.TRIANGLES, 0, 6);
-            }
-        }
-
-        this.animFrameId = frameCallback(animate);
-    }
-
-    private setupShaders() {
-        BxLogger.info(this.LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
-
-        const gl = this.$canvas.getContext('webgl2', {
-            isBx: true,
-            antialias: true,
-            alpha: false,
-            powerPreference: getPref(PrefKey.VIDEO_POWER_PREFERENCE),
-        }) as WebGL2RenderingContext;
-        this.gl = gl;
-
-        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferWidth);
-
-        // Vertex shader: Identity map
-        const vShader = gl.createShader(gl.VERTEX_SHADER)!;
-        gl.shaderSource(vShader, vertClarityBoost);
-        gl.compileShader(vShader);
-
-        const fShader = gl.createShader(gl.FRAGMENT_SHADER)!;
-        gl.shaderSource(fShader, fsClarityBoost);
-        gl.compileShader(fShader);
-
-        // Create and link program
-        const program = gl.createProgram()!;
-        this.program = program;
-
-        gl.attachShader(program, vShader);
-        gl.attachShader(program, fShader);
-        gl.linkProgram(program);
-        gl.useProgram(program);
-
-        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-            console.error(`Link failed: ${gl.getProgramInfoLog(program)}`);
-            console.error(`vs info-log: ${gl.getShaderInfoLog(vShader)}`);
-            console.error(`fs info-log: ${gl.getShaderInfoLog(fShader)}`);
-        }
-
-        this.updateCanvas();
-
-        // Vertices: A screen-filling quad made from two triangles
-        const buffer = gl.createBuffer();
-        this.resources.push(buffer);
-
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1,  1, -1,  1, 1, -1, 1,  1]), gl.STATIC_DRAW);
-
-        gl.enableVertexAttribArray(0);
-        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-
-        // Texture to contain the video data
-        const texture = gl.createTexture();
-        this.resources.push(texture);
-
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-
-        // Bind texture to the "data" argument to the fragment shader
-        gl.uniform1i(gl.getUniformLocation(program, 'data'), 0);
-
-        gl.activeTexture(gl.TEXTURE0);
-        // gl.bindTexture(gl.TEXTURE_2D, texture);
-    }
-
-    resume() {
-        this.stop();
-        this.stopped = false;
-        BxLogger.info(this.LOG_TAG, 'Resume');
-
-        this.$canvas.classList.remove('bx-gone');
-        this.setupRendering();
-    }
-
-    stop() {
-        BxLogger.info(this.LOG_TAG, 'Stop');
-        this.$canvas.classList.add('bx-gone');
-
-        this.stopped = true;
-        if (this.animFrameId) {
-            if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
-                this.$video.cancelVideoFrameCallback(this.animFrameId);
-            } else {
-                cancelAnimationFrame(this.animFrameId);
-            }
-
-            this.animFrameId = null;
-        }
-    }
-
-    destroy() {
-        BxLogger.info(this.LOG_TAG, 'Destroy');
-        this.stop();
-
-        const gl = this.gl;
-        if (gl) {
-            gl.getExtension('WEBGL_lose_context')?.loseContext();
-            gl.useProgram(null);
-
-            for (const resource of this.resources) {
-                if (resource instanceof WebGLProgram) {
-                    gl.deleteProgram(resource);
-                } else if (resource instanceof WebGLShader) {
-                    gl.deleteShader(resource);
-                } else if (resource instanceof WebGLTexture) {
-                    gl.deleteTexture(resource);
-                } else if (resource instanceof WebGLBuffer) {
-                    gl.deleteBuffer(resource);
-                }
-            }
-
-            this.gl = null;
-        }
-
-        if (this.$canvas.isConnected) {
-            this.$canvas.parentElement?.removeChild(this.$canvas);
-        }
-
-        this.$canvas.width = 1;
-        this.$canvas.height = 1;
-    }
-}

src/modules/player/webgl2/shaders/clarity-boost.fs

@@ -5,15 +5,16 @@ uniform sampler2D data;
 uniform vec2 iResolution;
 
 const int FILTER_UNSHARP_MASKING = 1;
-// const int FILTER_CAS = 2;
+const int FILTER_CAS = 2;
 
 // constrast = 0.8
 const float CAS_CONTRAST_PEAK = 0.8 * -3.0 + 8.0;
 
-// Luminosity factor
-const vec3 LUMINOSITY_FACTOR = vec3(0.2126, 0.7152, 0.0722);
+// Luminosity factor: https://www.w3.org/TR/AERT/#color-contrast
+const vec3 LUMINOSITY_FACTOR = vec3(0.299, 0.587, 0.114);
 
 uniform int filterId;
+uniform bool qualityMode;
 uniform float sharpenFactor;
 uniform float brightness;
 uniform float contrast;
@@ -28,16 +29,22 @@ vec3 clarityBoost(sampler2D tex, vec2 coord, vec3 e) {
     // a b c
     // d e f
     // g h i
-    vec3 a = texture(tex, coord + texelSize * vec2(-1, 1)).rgb;
     vec3 b = texture(tex, coord + texelSize * vec2(0, 1)).rgb;
-    vec3 c = texture(tex, coord + texelSize * vec2(1, 1)).rgb;
-
     vec3 d = texture(tex, coord + texelSize * vec2(-1, 0)).rgb;
     vec3 f = texture(tex, coord + texelSize * vec2(1, 0)).rgb;
-
-    vec3 g = texture(tex, coord + texelSize * vec2(-1, -1)).rgb;
     vec3 h = texture(tex, coord + texelSize * vec2(0, -1)).rgb;
-    vec3 i = texture(tex, coord + texelSize * vec2(1, -1)).rgb;
+
+    vec3 a;
+    vec3 c;
+    vec3 g;
+    vec3 i;
+
+    if (filterId == FILTER_UNSHARP_MASKING || qualityMode) {
+        a = texture(tex, coord + texelSize * vec2(-1, 1)).rgb;
+        c = texture(tex, coord + texelSize * vec2(1, 1)).rgb;
+        g = texture(tex, coord + texelSize * vec2(-1, -1)).rgb;
+        i = texture(tex, coord + texelSize * vec2(1, -1)).rgb;
+    }
 
     // USM
     if (filterId == FILTER_UNSHARP_MASKING) {
@@ -55,10 +62,12 @@ vec3 clarityBoost(sampler2D tex, vec2 coord, vec3 e) {
     //  g h i             h
     // These are 2.0x bigger (factored out the extra multiply).
     vec3 minRgb = min(min(min(d, e), min(f, b)), h);
-    minRgb += min(min(a, c), min(g, i));
-
     vec3 maxRgb = max(max(max(d, e), max(f, b)), h);
-    maxRgb += max(max(a, c), max(g, i));
+
+    if (qualityMode) {
+        minRgb += min(min(a, c), min(g, i));
+        maxRgb += max(max(a, c), max(g, i));
+    }
 
     // Smooth minimum distance to signal limit divided by smooth max.
     vec3 reciprocalMaxRgb = 1.0 / maxRgb;
@@ -85,10 +94,12 @@ void main() {
     vec3 color = texture(data, uv).rgb;
 
     // Clarity boost
-    color = sharpenFactor > 0.0 ? clarityBoost(data, uv, color) : color;
+    if (sharpenFactor > 0.0) {
+        color = clarityBoost(data, uv, color);
+    }
 
     // Saturation
-    color = saturation != 1.0 ? mix(vec3(dot(color, LUMINOSITY_FACTOR)), color, saturation) : color;
+    color = mix(vec3(dot(color, LUMINOSITY_FACTOR)), color, saturation);
 
     // Contrast
     color = contrast * (color - 0.5) + 0.5;

src/modules/player/webgl2/webgl2-player.ts

@@ -0,0 +1,142 @@
+import { compressCodeFile } from "@macros/build" with { type: "macro" };
+
+import { StreamPref } from "@/enums/pref-keys";
+import { getStreamPref } from "@/utils/pref-utils";
+import { BaseCanvasPlayer } from "../base-canvas-player";
+import { StreamPlayerType, StreamVideoProcessingMode } from "@/enums/pref-values";
+
+
+export class WebGL2Player extends BaseCanvasPlayer {
+    private gl: WebGL2RenderingContext | null = null;
+    private resources: Array<WebGLBuffer | WebGLTexture | WebGLProgram | WebGLShader> = [];
+    private program: WebGLProgram | null = null;
+
+    constructor($video: HTMLVideoElement) {
+        super(StreamPlayerType.WEBGL2, $video, 'WebGL2Player');
+    }
+
+    private updateCanvas() {
+        console.log('updateCanvas', this.options);
+
+        const gl = this.gl!;
+        const program = this.program!;
+        const filterId = this.toFilterId(this.options.processing);
+
+        gl.uniform2f(gl.getUniformLocation(program, 'iResolution'), this.$canvas.width, this.$canvas.height);
+
+        gl.uniform1i(gl.getUniformLocation(program, 'filterId'), filterId);
+        gl.uniform1i(gl.getUniformLocation(program, 'qualityMode'), this.options.processingMode === StreamVideoProcessingMode.QUALITY ? 1 : 0);
+        gl.uniform1f(gl.getUniformLocation(program, 'sharpenFactor'), this.options.sharpness / (this.options.processingMode === StreamVideoProcessingMode.QUALITY ? 1 : 1.2));
+        gl.uniform1f(gl.getUniformLocation(program, 'brightness'), this.options.brightness / 100);
+        gl.uniform1f(gl.getUniformLocation(program, 'contrast'), this.options.contrast / 100);
+        gl.uniform1f(gl.getUniformLocation(program, 'saturation'), this.options.saturation / 100);
+    }
+
+    updateFrame() {
+        const gl = this.gl!;
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.$video);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+
+    protected async setupShaders(): Promise<void> {
+        const gl = this.$canvas.getContext('webgl2', {
+            isBx: true,
+            antialias: true,
+            alpha: false,
+            depth: false,
+            preserveDrawingBuffer: false,
+            stencil: false,
+            powerPreference: getStreamPref(StreamPref.VIDEO_POWER_PREFERENCE),
+        } as WebGLContextAttributes) as WebGL2RenderingContext;
+        this.gl = gl;
+
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferWidth);
+
+        // Vertex shader: Identity map
+        const vShader = gl.createShader(gl.VERTEX_SHADER)!;
+        gl.shaderSource(vShader, compressCodeFile('./src/modules/player/webgl2/shaders/clarity-boost.vert') as any as string);
+        gl.compileShader(vShader);
+
+        const fShader = gl.createShader(gl.FRAGMENT_SHADER)!;
+        gl.shaderSource(fShader, compressCodeFile('./src/modules/player/webgl2/shaders/clarity-boost.fs') as any as string);
+        gl.compileShader(fShader);
+
+        // Create and link program
+        const program = gl.createProgram()!;
+        this.program = program;
+
+        gl.attachShader(program, vShader);
+        gl.attachShader(program, fShader);
+        gl.linkProgram(program);
+        gl.useProgram(program);
+
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            console.error(`Link failed: ${gl.getProgramInfoLog(program)}`);
+            console.error(`vs info-log: ${gl.getShaderInfoLog(vShader)}`);
+            console.error(`fs info-log: ${gl.getShaderInfoLog(fShader)}`);
+        }
+
+        this.updateCanvas();
+
+        // Vertices: A screen-filling quad made from two triangles
+        const buffer = gl.createBuffer();
+        this.resources.push(buffer);
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            -1.0, -1.0, // Bottom-left
+            3.0, -1.0,  // Bottom-right
+            -1.0, 3.0,  // Top-left
+        ]), gl.STATIC_DRAW);
+
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+
+        // Texture to contain the video data
+        const texture = gl.createTexture();
+        this.resources.push(texture);
+
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+        // Bind texture to the "data" argument to the fragment shader
+        gl.uniform1i(gl.getUniformLocation(program, 'data'), 0);
+
+        gl.activeTexture(gl.TEXTURE0);
+        // gl.bindTexture(gl.TEXTURE_2D, texture);
+    }
+
+    destroy() {
+        super.destroy();
+
+        const gl = this.gl;
+        if (!gl) {
+            return;
+        }
+
+        gl.getExtension('WEBGL_lose_context')?.loseContext();
+        gl.useProgram(null);
+
+        for (const resource of this.resources) {
+            if (resource instanceof WebGLProgram) {
+                gl.deleteProgram(resource);
+            } else if (resource instanceof WebGLShader) {
+                gl.deleteShader(resource);
+            } else if (resource instanceof WebGLTexture) {
+                gl.deleteTexture(resource);
+            } else if (resource instanceof WebGLBuffer) {
+                gl.deleteBuffer(resource);
+            }
+        }
+
+        this.gl = null;
+    }
+
+    refreshPlayer(): void {
+        this.updateCanvas();
+    }
+}

src/modules/player/webgpu/shaders/clarity-boost.wgsl

@@ -0,0 +1,93 @@
+struct Params {
+    filterId: f32,
+    sharpness: f32,
+    brightness: f32,
+    contrast: f32,
+    saturation: f32,
+};
+
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+};
+
+
+@group(0) @binding(0) var ourSampler: sampler;
+@group(0) @binding(1) var ourTexture: texture_external;
+@group(0) @binding(2) var<uniform> ourParams: Params;
+
+
+const FILTER_UNSHARP_MASKING: f32 = 1.0;
+const CAS_CONTRAST_PEAK: f32 = 0.8 * -3.0 + 8.0;
+// Luminosity factor: https://www.w3.org/TR/AERT/#color-contrast
+const LUMINOSITY_FACTOR = vec3(0.299, 0.587, 0.114);
+
+@vertex
+fn vsMain(@location(0) pos: vec2<f32>) -> VertexOutput {
+    var out: VertexOutput;
+    out.position = vec4(pos, 0.0, 1.0);
+    // Flip the Y-coordinate of UVs
+    out.uv = (vec2(pos.x, 1.0 - (pos.y + 1.0)) + vec2(1.0, 1.0)) * 0.5;
+    return out;
+}
+
+
+fn clarityBoost(coord: vec2<f32>, texSize: vec2<f32>, e: vec3<f32>) -> vec3<f32> {
+    let texelSize = 1.0 / texSize;
+
+    // Load 3x3 neighborhood samples
+    let a = textureSampleBaseClampToEdge(ourTexture, ourSampler, coord + texelSize * vec2(-1.0,  1.0)).rgb;
+    let b = textureSampleBaseClampToEdge(ourTexture, ourSampler, coord + texelSize * vec2( 0.0,  1.0)).rgb;
+    let c = textureSampleBaseClampToEdge(ourTexture, ourSampler, coord + texelSize * vec2( 1.0,  1.0)).rgb;
+
+    let d = textureSampleBaseClampToEdge(ourTexture, ourSampler, coord + texelSize * vec2(-1.0,  0.0)).rgb;
+    let f = textureSampleBaseClampToEdge(ourTexture, ourSampler, coord + texelSize * vec2( 1.0,  0.0)).rgb;
+
+    let g = textureSampleBaseClampToEdge(ourTexture, ourSampler, coord + texelSize * vec2(-1.0, -1.0)).rgb;
+    let h = textureSampleBaseClampToEdge(ourTexture, ourSampler, coord + texelSize * vec2( 0.0, -1.0)).rgb;
+    let i = textureSampleBaseClampToEdge(ourTexture, ourSampler, coord + texelSize * vec2( 1.0, -1.0)).rgb;
+
+    // Unsharp Masking (USM)
+    if ourParams.filterId == FILTER_UNSHARP_MASKING {
+        let gaussianBlur = (a + c + g + i) * 1.0 + (b + d + f + h) * 2.0 + e * 4.0;
+        let blurred = gaussianBlur / 16.0;
+        return e + (e - blurred) * (ourParams.sharpness / 3.0);
+    }
+
+    // Contrast Adaptive Sharpening (CAS)
+    let minRgb = min(min(min(d, e), min(f, b)), h) + min(min(a, c), min(g, i));
+    let maxRgb = max(max(max(d, e), max(f, b)), h) + max(max(a, c), max(g, i));
+
+    let reciprocalMaxRgb = 1.0 / maxRgb;
+    var amplifyRgb = clamp(min(minRgb, 2.0 - maxRgb) * reciprocalMaxRgb, vec3(0.0), vec3(1.0));
+    amplifyRgb = 1.0 / sqrt(amplifyRgb);
+
+    let weightRgb = -(1.0 / (amplifyRgb * CAS_CONTRAST_PEAK));
+    let reciprocalWeightRgb = 1.0 / (4.0 * weightRgb + 1.0);
+
+    let window = b + d + f + h;
+    let outColor = clamp((window * weightRgb + e) * reciprocalWeightRgb, vec3(0.0), vec3(1.0));
+
+    return mix(e, outColor, ourParams.sharpness / 2.0);
+}
+
+
+@fragment
+fn fsMain(input: VertexOutput) -> @location(0) vec4<f32> {
+    let texSize = vec2<f32>(textureDimensions(ourTexture));
+    let center = textureSampleBaseClampToEdge(ourTexture, ourSampler, input.uv);
+    var adjustedRgb = clarityBoost(input.uv, texSize, center.rgb);
+
+    // Compute grayscale intensity
+    let gray = dot(adjustedRgb, LUMINOSITY_FACTOR);
+    // Interpolate between grayscale and color
+    adjustedRgb = mix(vec3(gray), adjustedRgb, ourParams.saturation);
+
+    // Adjust contrast
+    adjustedRgb = (adjustedRgb - 0.5) * ourParams.contrast + 0.5;
+
+    // Adjust brightness
+    adjustedRgb *= ourParams.brightness;
+    return vec4(adjustedRgb, 1.0);
+}

src/modules/player/webgpu/webgpu-player.ts

@@ -0,0 +1,188 @@
+import { compressCodeFile } from "@macros/build" with { type: "macro" };
+
+import { BaseCanvasPlayer } from "../base-canvas-player";
+import { StreamPlayerType } from "@/enums/pref-values";
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { BX_FLAGS } from "@/utils/bx-flags";
+
+export class WebGPUPlayer extends BaseCanvasPlayer {
+    static device: GPUDevice;
+
+    context!: GPUCanvasContext | null;
+    pipeline!: GPURenderPipeline | null;
+    sampler!: GPUSampler | null;
+    bindGroup!: GPUBindGroup | null;
+    optionsUpdated: boolean = false;
+    paramsBuffer!: GPUBuffer | null;
+    vertexBuffer!: GPUBuffer | null;
+
+    static async prepare(): Promise<void> {
+        if (!BX_FLAGS.EnableWebGPURenderer || !navigator.gpu) {
+            BxEventBus.Script.emit('webgpu.ready', {});
+            return;
+        }
+
+        try {
+            const adapter = await navigator.gpu.requestAdapter();
+
+            if (adapter) {
+                WebGPUPlayer.device = await adapter.requestDevice();
+                WebGPUPlayer.device?.addEventListener('uncapturederror', e => {
+                    console.error((e as GPUUncapturedErrorEvent).error.message);
+                });
+            }
+        } catch (ex) {
+            alert(ex);
+        }
+
+        BxEventBus.Script.emit('webgpu.ready', {});
+    }
+
+    constructor($video: HTMLVideoElement) {
+        super(StreamPlayerType.WEBGPU, $video, 'WebGPUPlayer');
+    }
+
+    protected setupShaders(): void {
+        this.context = this.$canvas.getContext('webgpu')!;
+        if (!this.context) {
+            alert('Can\'t initiate context');
+            return;
+        }
+
+        const format = navigator.gpu.getPreferredCanvasFormat();
+        this.context.configure({
+            device: WebGPUPlayer.device,
+            format,
+            alphaMode: 'opaque',
+        });
+
+        this.vertexBuffer = WebGPUPlayer.device.createBuffer({
+            label: 'vertex buffer',
+            size: 6 * 4, // 6 floats (2 per vertex)
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: true,
+        });
+
+        const mappedRange = this.vertexBuffer.getMappedRange();
+        new Float32Array(mappedRange).set([
+            -1, 3,  // Vertex 1
+            -1, -1, // Vertex 2
+            3, -1,  // Vertex 3
+        ]);
+        this.vertexBuffer.unmap();
+
+        const shaderModule = WebGPUPlayer.device.createShaderModule({ code: compressCodeFile('./src/modules/player/webgpu/shaders/clarity-boost.wgsl') as any as string });
+        this.pipeline = WebGPUPlayer.device.createRenderPipeline({
+            layout: 'auto',
+            vertex: {
+                module: shaderModule,
+                entryPoint: 'vsMain',
+                buffers: [{
+                    arrayStride: 8,
+                    attributes: [{
+                        format: 'float32x2',
+                        offset: 0,
+                        shaderLocation: 0,
+                    }],
+                }],
+            },
+            fragment: {
+                module: shaderModule,
+                entryPoint: 'fsMain',
+                targets: [{ format }],
+            },
+            primitive: { topology: 'triangle-list' },
+        });
+
+        this.sampler = WebGPUPlayer.device.createSampler({ magFilter: 'linear', minFilter: 'linear' });
+        this.updateCanvas();
+    }
+
+    private prepareUniformBuffer(value: any, classType: any) {
+        const uniform = new classType(value);
+        const uniformBuffer = WebGPUPlayer.device.createBuffer({
+            size: uniform.byteLength,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        });
+
+        WebGPUPlayer.device.queue.writeBuffer(uniformBuffer, 0, uniform);
+        return uniformBuffer;
+    }
+
+    private updateCanvas() {
+        const externalTexture = WebGPUPlayer.device.importExternalTexture({ source: this.$video });
+
+        if (!this.optionsUpdated) {
+            this.paramsBuffer = this.prepareUniformBuffer([
+                this.toFilterId(this.options.processing),
+                this.options.sharpness,
+                this.options.brightness / 100,
+                this.options.contrast / 100,
+                this.options.saturation / 100,
+            ], Float32Array);
+
+            this.optionsUpdated = true;
+        }
+
+        this.bindGroup = WebGPUPlayer.device.createBindGroup({
+            layout: this.pipeline!.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: this.sampler },
+                { binding: 1, resource: externalTexture as any },
+                { binding: 2, resource: { buffer: this.paramsBuffer } },
+            ],
+        });
+    }
+
+    updateFrame(): void {
+        this.updateCanvas();
+
+        const commandEncoder = WebGPUPlayer.device.createCommandEncoder();
+        const passEncoder = commandEncoder.beginRenderPass({
+            colorAttachments: [{
+                view: this.context!.getCurrentTexture().createView(),
+                loadOp: 'clear',
+                storeOp: 'store',
+                clearValue: [0.0, 0.0, 0.0, 1.0],
+            }]
+        });
+
+        passEncoder.setPipeline(this.pipeline!);
+        passEncoder.setBindGroup(0, this.bindGroup);
+        passEncoder.setVertexBuffer(0, this.vertexBuffer);
+        passEncoder.draw(3);
+        passEncoder.end();
+
+        WebGPUPlayer.device.queue.submit([commandEncoder.finish()]);
+    }
+
+    refreshPlayer(): void {
+        this.optionsUpdated = false;
+        this.updateCanvas();
+    }
+
+    destroy(): void {
+        super.destroy();
+
+        this.isStopped = true;
+
+        // Unset GPU resources
+        this.pipeline = null;
+        this.bindGroup = null;
+        this.sampler = null;
+
+        this.paramsBuffer?.destroy();
+        this.paramsBuffer = null;
+
+        this.vertexBuffer?.destroy();
+        this.vertexBuffer = null;
+
+        // Reset the WebGPU context (force garbage collection)
+        if (this.context) {
+            this.context.unconfigure();
+            this.context = null;
+        }
+
+        console.log('WebGPU context successfully freed.');
+    }
+}

src/modules/remote-play-manager.ts

@@ -5,9 +5,10 @@ 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";
+import { BlockFeature } from "@/enums/pref-values";
 
 export const enum RemotePlayConsoleState {
     ON = 'On',
@@ -37,7 +38,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.BLOCK_FEATURES).includes(BlockFeature.REMOTE_PLAY)) {
                 RemotePlayManager.instance = new RemotePlayManager();
             } else {
                 RemotePlayManager.instance = null;
@@ -156,6 +157,11 @@ export class RemotePlayManager {
                 },
             };
 
+        // Start with "isDefault" = true first
+        this.regions.sort((a: RemotePlayRegion, b: RemotePlayRegion) => {
+            return a.isDefault ? -1 : 0;
+        })
+
         // Test servers one by one
         for (const region of this.regions) {
             try {
@@ -186,15 +192,10 @@ 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 = {
-            serverId: serverId,
-        };
-        window.BX_REMOTE_PLAY_CONFIG = STATES.remotePlay.config;
-
-        localRedirect('/launch/fortnite/BT5P2X999VH2#remote-play');
+        localRedirect('/consoles/launch/' + serverId);
     }
 
     togglePopup(force = null) {
@@ -220,21 +221,6 @@ export class RemotePlayManager {
         RemotePlayDialog.getInstance().show();
     }
 
-    static detect() {
-        if (!getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
-            return;
-        }
-
-        STATES.remotePlay.isPlaying = window.location.pathname.includes('/launch/') && window.location.hash.startsWith('#remote-play');
-        if (STATES.remotePlay?.isPlaying) {
-            window.BX_REMOTE_PLAY_CONFIG = STATES.remotePlay.config;
-            // Remove /launch/... from URL
-            window.history.replaceState({origin: 'better-xcloud'}, '', 'https://www.xbox.com/' + location.pathname.substring(1, 6) + '/play');
-        } else {
-            window.BX_REMOTE_PLAY_CONFIG = null;
-        }
-    }
-
     isReady() {
         return this.consoles !== null;
     }

src/modules/settings-manager.ts

@@ -0,0 +1,356 @@
+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;
+    onChangeUi: () => void;
+    $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: updateVideoPlayer,
+            onChangeUi: onChangeVideoPlayerType,
+        },
+        [StreamPref.VIDEO_POWER_PREFERENCE]: {
+            onChange: () => {
+                const streamPlayer = STATES.currentStream.streamPlayerManager;
+                if (!streamPlayer) {
+                    return;
+                }
+
+                updateVideoPlayer();
+            },
+        },
+        [StreamPref.VIDEO_PROCESSING]: {
+            onChange: updateVideoPlayer,
+            onChangeUi: onChangeVideoPlayerType,
+        },
+        [StreamPref.VIDEO_PROCESSING_MODE]: {
+            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);
+                if (!value) {
+                    StreamStats.getInstance().stop(true);
+                }
+            },
+        },
+        [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']>, onChangeUis?: Set<SettingType['onChangeUi']>) {
+        const info = this.SETTINGS[key];
+
+        // Add events
+        if (info.onChangeUi) {
+            if (onChangeUis) {
+                // Save to a Set()
+                onChangeUis.add(info.onChangeUi);
+            } else {
+                // Trigger onChangeUi()
+                info.onChangeUi();
+            }
+        }
+
+        if (info.onChange && STATES.isPlaying) {
+            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 onChangeUis: Set<SettingType['onChangeUi']> = 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);
+            const newValue = getGamePref(this.targetGameId, key, true);
+
+            if (oldValue === newValue) {
+                continue;
+            }
+
+            // Only apply Stream settings
+            this.updateStreamElement(key, onChanges, onChangeUis);
+        }
+
+        // Trigger onChange callbacks
+        onChangeUis.forEach(fn => fn && fn());
+        onChanges.forEach(fn => fn && fn());
+
+        // 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 selectedId = (gameSettings && !gameSettings.isEmpty()) ? 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,7 +1,7 @@
-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 { BxEventBus } from "@/utils/bx-event-bus";
+import { getStreamPref } from "@/utils/pref-utils";
 
 export class RendererShortcut {
     static toggleVisibility() {
@@ -15,7 +15,7 @@ export class RendererShortcut {
         const isVisible = !$mediaContainer.classList.contains('bx-gone');
 
         // Switch FPS
-        limitVideoPlayerFps(isVisible ? getPref(PrefKey.VIDEO_MAX_FPS) : 0);
+        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 = {
@@ -46,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')],
         } : {}),

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 { 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(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(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

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

@@ -7,8 +7,8 @@ export class VirtualControllerShortcut {
             return;
         }
 
-        const released = generateVirtualControllerMapping();
-        const pressed = generateVirtualControllerMapping({
+        const released = generateVirtualControllerMapping(0);
+        const pressed = generateVirtualControllerMapping(0, {
             Nexus: 1,
             VirtualPhysicality: 1024, // Home
         });

src/modules/stream-player-manager.ts

@@ -0,0 +1,191 @@
+import { WebGL2Player } from "./player/webgl2/webgl2-player";
+import { ScreenshotManager } from "@/utils/screenshot-manager";
+import { STATES } from "@/utils/global";
+import { StreamPref } from "@/enums/pref-keys";
+import { BX_FLAGS } from "@/utils/bx-flags";
+import { StreamPlayerType, VideoPosition } from "@/enums/pref-values";
+import { getStreamPref } from "@/utils/pref-utils";
+import type { BaseCanvasPlayer } from "./player/base-canvas-player";
+import { VideoPlayer } from "./player/video/video-player";
+import { StreamPlayerElement } from "./player/base-stream-player";
+import { WebGPUPlayer } from "./player/webgpu/webgpu-player";
+import type { StreamPlayerOptions } from "@/types/stream";
+
+
+export class StreamPlayerManager {
+    private static instance: StreamPlayerManager;
+    public static getInstance = () => StreamPlayerManager.instance ?? (StreamPlayerManager.instance = new StreamPlayerManager());
+
+    private $video!: HTMLVideoElement;
+    private videoPlayer!: VideoPlayer;
+    private canvasPlayer: BaseCanvasPlayer | null | undefined;
+    private playerType: StreamPlayerType = StreamPlayerType.VIDEO;
+
+    private constructor() {}
+
+    setVideoElement($video: HTMLVideoElement) {
+        this.$video = $video;
+        this.videoPlayer = new VideoPlayer($video, 'VideoPlayer');
+        this.videoPlayer.init();
+    }
+
+    resizePlayer() {
+        const PREF_RATIO = getStreamPref(StreamPref.VIDEO_RATIO);
+        const $video = this.$video;
+        const isNativeTouchGame = STATES.currentStream.titleInfo?.details.hasNativeTouchSupport;
+
+        let targetWidth;
+        let targetHeight;
+        let targetObjectFit;
+
+        if (PREF_RATIO.includes(':')) {
+            const tmp = PREF_RATIO.split(':');
+
+            // Get preferred ratio
+            const videoRatio = parseFloat(tmp[0]) / parseFloat(tmp[1]);
+
+            let width = 0;
+            let height = 0;
+
+            // Get parent's ratio
+            const parentRect = $video.parentElement!.getBoundingClientRect();
+            const parentRatio = parentRect.width / parentRect.height;
+
+            // Get target width & height
+            if (parentRatio > videoRatio) {
+                height = parentRect.height;
+                width = height * videoRatio;
+            } else {
+                width = parentRect.width;
+                height = width / videoRatio;
+            }
+
+            // Avoid floating points
+            width = Math.ceil(Math.min(parentRect.width, width));
+            height = Math.ceil(Math.min(parentRect.height, height));
+
+            $video.dataset.width = width.toString();
+            $video.dataset.height = height.toString();
+
+            // Set position
+            const $parent = $video.parentElement!;
+            const position = getStreamPref(StreamPref.VIDEO_POSITION);
+            $parent.style.removeProperty('padding-top');
+
+            $parent.dataset.position = position;
+            if (position === VideoPosition.TOP_HALF || position === VideoPosition.BOTTOM_HALF) {
+                let padding = Math.floor((window.innerHeight - height) / 4);
+                if (padding > 0) {
+                    if (position === VideoPosition.BOTTOM_HALF) {
+                        padding *= 3;
+                    }
+
+                    $parent.style.paddingTop = padding + 'px';
+                }
+            }
+
+            // Update size
+            targetWidth = `${width}px`;
+            targetHeight = `${height}px`;
+            targetObjectFit = PREF_RATIO === '16:9' ? 'contain' : 'fill';
+        } else {
+            targetWidth = '100%';
+            targetHeight = '100%';
+            targetObjectFit = PREF_RATIO;
+
+            $video.dataset.width = window.innerWidth.toString();
+            $video.dataset.height = window.innerHeight.toString();
+        }
+
+        $video.style.width = targetWidth;
+        $video.style.height = targetHeight;
+        $video.style.objectFit = targetObjectFit;
+
+        if (this.canvasPlayer) {
+            const $canvas = this.canvasPlayer.getCanvas();
+            $canvas.style.width = targetWidth;
+            $canvas.style.height = targetHeight;
+            $canvas.style.objectFit = targetObjectFit;
+
+            $video.dispatchEvent(new Event('resize'));
+        }
+
+        // Update video dimensions
+        if (isNativeTouchGame && this.playerType !== StreamPlayerType.VIDEO) {
+            window.BX_EXPOSED.streamSession.updateDimensions();
+        }
+    }
+
+    switchPlayerType(type: StreamPlayerType, refreshPlayer: boolean = false) {
+        if (this.playerType !== type) {
+            const videoClass = BX_FLAGS.DeviceInfo.deviceType === 'android-tv' ? 'bx-pixel' : 'bx-gone';
+
+            // Destroy old player
+            this.cleanUpCanvasPlayer();
+
+            if (type === StreamPlayerType.VIDEO) {
+                // Switch from Canvas -> Video
+                this.$video.classList.remove(videoClass);
+            } else {
+                // Switch from Video -> Canvas
+                if (BX_FLAGS.EnableWebGPURenderer && type === StreamPlayerType.WEBGPU) {
+                    this.canvasPlayer = new WebGPUPlayer(this.$video);
+                } else {
+                    this.canvasPlayer = new WebGL2Player(this.$video);
+                }
+                this.canvasPlayer.init();
+
+                this.videoPlayer.clearFilters();
+                this.$video.classList.add(videoClass);
+            }
+
+            this.playerType = type;
+        }
+
+        refreshPlayer && this.refreshPlayer();
+    }
+
+    updateOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
+        (this.canvasPlayer || this.videoPlayer).updateOptions(options, refreshPlayer);
+    }
+
+    getPlayerElement(elementType?: StreamPlayerElement) {
+        if (typeof elementType === 'undefined') {
+            elementType = this.playerType === StreamPlayerType.VIDEO ? StreamPlayerElement.VIDEO : StreamPlayerElement.CANVAS;
+        }
+
+        if (elementType !== StreamPlayerElement.VIDEO) {
+            return this.canvasPlayer?.getCanvas();
+        }
+
+        return this.$video;
+    }
+
+    getCanvasPlayer() {
+        return this.canvasPlayer;
+    }
+
+    refreshPlayer() {
+        if (this.playerType === StreamPlayerType.VIDEO) {
+            this.videoPlayer.refreshPlayer();
+        } else {
+            ScreenshotManager.getInstance().updateCanvasFilters('none');
+            this.canvasPlayer?.refreshPlayer();
+        }
+
+        this.resizePlayer();
+    }
+
+    getVideoPlayerFilterStyle() {
+        throw new Error("Method not implemented.");
+    }
+
+    private cleanUpCanvasPlayer() {
+        this.canvasPlayer?.destroy();
+        this.canvasPlayer = null;
+    }
+
+    destroy() {
+        this.cleanUpCanvasPlayer();
+    }
+}

src/modules/stream-player.ts

@@ -1,303 +0,0 @@
-import { isFullVersion } from "@macros/build" with { type: "macro" };
-
-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 { BX_FLAGS } from "@/utils/bx-flags";
-import { StreamPlayerType, StreamVideoProcessing, VideoPosition } from "@/enums/pref-values";
-
-export type StreamPlayerOptions = Partial<{
-    processing: string,
-    sharpness: number,
-    saturation: number,
-    contrast: number,
-    brightness: number,
-}>;
-
-export class StreamPlayer {
-    private $video: HTMLVideoElement;
-    private playerType: StreamPlayerType = StreamPlayerType.VIDEO;
-
-    private options: StreamPlayerOptions = {};
-
-    private webGL2Player: WebGL2Player | null = null;
-
-    private $videoCss: HTMLStyleElement | null = null;
-    private $usmMatrix: SVGFEConvolveMatrixElement | null = null;
-
-    constructor($video: HTMLVideoElement, type: StreamPlayerType, options: StreamPlayerOptions) {
-        this.setupVideoElements();
-
-        this.$video = $video;
-        this.options = options || {};
-        this.setPlayerType(type);
-    }
-
-    private setupVideoElements() {
-        this.$videoCss = document.getElementById('bx-video-css') as HTMLStyleElement;
-        if (this.$videoCss) {
-            return;
-        }
-
-        const $fragment = document.createDocumentFragment();
-
-        this.$videoCss = CE('style', { id: 'bx-video-css' });
-        $fragment.appendChild(this.$videoCss);
-
-        // Setup SVG filters
-        const $svg = CE('svg', {
-            id: 'bx-video-filters',
-            xmlns: 'http://www.w3.org/2000/svg',
-            class: 'bx-gone',
-        }, CE('defs', { xmlns: 'http://www.w3.org/2000/svg' },
-            CE('filter', {
-                    id: 'bx-filter-usm',
-                    xmlns: 'http://www.w3.org/2000/svg',
-                }, this.$usmMatrix = CE('feConvolveMatrix', {
-                    id: 'bx-filter-usm-matrix',
-                    order: '3',
-                    xmlns: 'http://www.w3.org/2000/svg',
-                }) as unknown as SVGFEConvolveMatrixElement),
-            ),
-        );
-        $fragment.appendChild($svg);
-        document.documentElement.appendChild($fragment);
-    }
-
-    private getVideoPlayerFilterStyle() {
-        const filters = [];
-
-        const sharpness = this.options.sharpness || 0;
-        if (this.options.processing === StreamVideoProcessing.USM && sharpness != 0) {
-            const level = (7 - ((sharpness / 2) - 1) * 0.5).toFixed(1); // 5, 5.5, 6, 6.5, 7
-            const matrix = `0 -1 0 -1 ${level} -1 0 -1 0`;
-            this.$usmMatrix?.setAttributeNS(null, 'kernelMatrix', matrix);
-
-            filters.push(`url(#bx-filter-usm)`);
-        }
-
-        const saturation = this.options.saturation || 100;
-        if (saturation != 100) {
-            filters.push(`saturate(${saturation}%)`);
-        }
-
-        const contrast =  this.options.contrast || 100;
-        if (contrast != 100) {
-            filters.push(`contrast(${contrast}%)`);
-        }
-
-        const brightness = this.options.brightness || 100;
-        if (brightness != 100) {
-            filters.push(`brightness(${brightness}%)`);
-        }
-
-        return filters.join(' ');
-    }
-
-    private resizePlayer() {
-        const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
-        const $video = this.$video;
-        const isNativeTouchGame = STATES.currentStream.titleInfo?.details.hasNativeTouchSupport;
-
-        let $webGL2Canvas;
-        if (this.playerType == StreamPlayerType.WEBGL2) {
-            $webGL2Canvas = this.webGL2Player?.getCanvas()!;
-        }
-
-        let targetWidth;
-        let targetHeight;
-        let targetObjectFit;
-
-        if (PREF_RATIO.includes(':')) {
-            const tmp = PREF_RATIO.split(':');
-
-            // Get preferred ratio
-            const videoRatio = parseFloat(tmp[0]) / parseFloat(tmp[1]);
-
-            let width = 0;
-            let height = 0;
-
-            // Get parent's ratio
-            const parentRect = $video.parentElement!.getBoundingClientRect();
-            const parentRatio = parentRect.width / parentRect.height;
-
-            // Get target width & height
-            if (parentRatio > videoRatio) {
-                height = parentRect.height;
-                width = height * videoRatio;
-            } else {
-                width = parentRect.width;
-                height = width / videoRatio;
-            }
-
-            // Prevent floating points
-            width = Math.ceil(Math.min(parentRect.width, width));
-            height = Math.ceil(Math.min(parentRect.height, height));
-
-            $video.dataset.width = width.toString();
-            $video.dataset.height = height.toString();
-
-            // Set position
-            const $parent = $video.parentElement!;
-            const position = getPref(PrefKey.VIDEO_POSITION);
-            $parent.style.removeProperty('padding-top');
-
-            $parent.dataset.position = position;
-            if (position === VideoPosition.TOP_HALF || position === VideoPosition.BOTTOM_HALF) {
-                let padding = Math.floor((window.innerHeight - height) / 4);
-                if (padding > 0) {
-                    if (position === VideoPosition.BOTTOM_HALF) {
-                        padding *= 3;
-                    }
-
-                    $parent.style.paddingTop = padding + 'px';
-                }
-            }
-
-            // Update size
-            targetWidth = `${width}px`;
-            targetHeight = `${height}px`;
-            targetObjectFit = PREF_RATIO === '16:9' ? 'contain' : 'fill';
-        } else {
-            targetWidth = '100%';
-            targetHeight = '100%';
-            targetObjectFit = PREF_RATIO;
-
-            $video.dataset.width = window.innerWidth.toString();
-            $video.dataset.height = window.innerHeight.toString();
-        }
-
-        $video.style.width = targetWidth;
-        $video.style.height = targetHeight;
-        $video.style.objectFit = targetObjectFit;
-
-        // $video.style.padding = padding;
-
-        if ($webGL2Canvas) {
-            $webGL2Canvas.style.width = targetWidth;
-            $webGL2Canvas.style.height = targetHeight;
-            $webGL2Canvas.style.objectFit = targetObjectFit;
-
-            $video.dispatchEvent(new Event('resize'));
-        }
-
-        // Update video dimensions
-        if (isNativeTouchGame && this.playerType == StreamPlayerType.WEBGL2) {
-            window.BX_EXPOSED.streamSession.updateDimensions();
-        }
-    }
-
-    setPlayerType(type: StreamPlayerType, refreshPlayer: boolean = false) {
-        if (this.playerType !== type) {
-            const videoClass = BX_FLAGS.DeviceInfo.deviceType === 'android-tv' ? 'bx-pixel' : 'bx-gone';
-
-            // Switch from Video -> WebGL2
-            if (type === StreamPlayerType.WEBGL2) {
-                // Initialize WebGL2 player
-                if (!this.webGL2Player) {
-                    this.webGL2Player = new WebGL2Player(this.$video);
-                } else {
-                    this.webGL2Player.resume();
-                }
-
-                this.$videoCss!.textContent = '';
-
-                this.$video.classList.add(videoClass);
-            } else {
-                // Cleanup WebGL2 Player
-                this.webGL2Player?.stop();
-
-                this.$video.classList.remove(videoClass);
-            }
-        }
-
-        this.playerType = type;
-        refreshPlayer && this.refreshPlayer();
-    }
-
-    setOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
-        this.options = options;
-        refreshPlayer && this.refreshPlayer();
-    }
-
-    updateOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
-        this.options = Object.assign(this.options, options);
-        refreshPlayer && this.refreshPlayer();
-    }
-
-    getPlayerElement(playerType?: StreamPlayerType) {
-        if (typeof playerType === 'undefined') {
-            playerType = this.playerType;
-        }
-
-        if (playerType === StreamPlayerType.WEBGL2) {
-            return this.webGL2Player?.getCanvas();
-        }
-
-        return this.$video;
-    }
-
-    getWebGL2Player() {
-        return this.webGL2Player;
-    }
-
-    refreshPlayer() {
-        if (this.playerType === StreamPlayerType.WEBGL2) {
-            const options = this.options;
-            const webGL2Player = this.webGL2Player!;
-
-            if (options.processing === StreamVideoProcessing.USM) {
-                webGL2Player.setFilter(1);
-            } else {
-                webGL2Player.setFilter(2);
-            }
-
-            isFullVersion() && ScreenshotManager.getInstance().updateCanvasFilters('none');
-
-            webGL2Player.setSharpness(options.sharpness || 0);
-            webGL2Player.setSaturation(options.saturation || 100);
-            webGL2Player.setContrast(options.contrast || 100);
-            webGL2Player.setBrightness(options.brightness || 100);
-        } else {
-            let filters = this.getVideoPlayerFilterStyle();
-            let videoCss = '';
-            if (filters) {
-                videoCss += `filter: ${filters} !important;`;
-            }
-
-            // Apply video filters to screenshots
-            if (isFullVersion() && getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
-                ScreenshotManager.getInstance().updateCanvasFilters(filters);
-            }
-
-            let css = '';
-            if (videoCss) {
-                css = `#game-stream video { ${videoCss} }`;
-            }
-
-            this.$videoCss!.textContent = css;
-        }
-
-        this.resizePlayer();
-    }
-
-    reloadPlayer() {
-        this.cleanUpWebGL2Player();
-
-        this.playerType = StreamPlayerType.VIDEO;
-        this.setPlayerType(StreamPlayerType.WEBGL2, false);
-    }
-
-    private cleanUpWebGL2Player() {
-        // Clean up WebGL2 Player
-        this.webGL2Player?.destroy();
-        this.webGL2Player = null;
-    }
-
-    destroy() {
-        this.cleanUpWebGL2Player();
-    }
-}

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

@@ -1,76 +1,83 @@
 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";
+import type { StreamPlayerOptions } from "@/types/stream";
 
 export function onChangeVideoPlayerType() {
-    const playerType = getPref(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 processing = getStreamPref(StreamPref.VIDEO_PROCESSING);
+    const settingsManager = SettingsManager.getInstance();
+    if (!settingsManager.hasElement(StreamPref.VIDEO_PROCESSING)) {
         return;
     }
 
     let isDisabled = false;
 
+    const $videoProcessing = settingsManager.getElement(StreamPref.VIDEO_PROCESSING) as HTMLSelectElement;
+    const $videoProcessingMode = settingsManager.getElement(StreamPref.VIDEO_PROCESSING_MODE) 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) {
-        $optCas && ($optCas.disabled = false);
-    } else {
+    if (playerType === StreamPlayerType.VIDEO) {
         // 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);
 
         if (UserAgent.isSafari()) {
             isDisabled = true;
         }
+    } else {
+        $optCas && ($optCas.disabled = false);
     }
 
     $videoProcessing.disabled = isDisabled;
     $videoSharpness.dataset.disabled = isDisabled.toString();
 
     // Hide Power Preference setting if renderer isn't WebGL2
+    $videoProcessingMode.closest('.bx-settings-row')!.classList.toggle('bx-gone', !(playerType === StreamPlayerType.WEBGL2 && processing === StreamVideoProcessing.CAS));
     $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();
+    $videoMaxFps.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType === StreamPlayerType.VIDEO);
 }
 
 
 export function limitVideoPlayerFps(targetFps: number) {
-    const streamPlayer = STATES.currentStream.streamPlayer;
-    streamPlayer?.getWebGL2Player()?.setTargetFps(targetFps);
+    const streamPlayer = STATES.currentStream.streamPlayerManager;
+    streamPlayer?.getCanvasPlayer()?.setTargetFps(targetFps);
 }
 
 
 export function updateVideoPlayer() {
-    const streamPlayer = STATES.currentStream.streamPlayer;
-    if (!streamPlayer) {
+    const streamPlayerManager = STATES.currentStream.streamPlayerManager;
+    if (!streamPlayerManager) {
         return;
     }
 
-    limitVideoPlayerFps(getPref(PrefKey.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),
+        processingMode: getStreamPref(StreamPref.VIDEO_PROCESSING_MODE),
+        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.updateOptions(options);
-    streamPlayer.refreshPlayer();
+    streamPlayerManager.switchPlayerType(getStreamPref(StreamPref.VIDEO_PLAYER_TYPE));
+    limitVideoPlayerFps(getStreamPref(StreamPref.VIDEO_MAX_FPS));
+    streamPlayerManager.updateOptions(options);
+    streamPlayerManager.refreshPlayer();
 }
 
-window.addEventListener('resize', updateVideoPlayer);
+function resizeVideoPlayer() {
+    const streamPlayerManager = STATES.currentStream.streamPlayerManager;
+    streamPlayerManager?.resizePlayer();
+}
+
+window.addEventListener('resize', resizeVideoPlayer);

src/modules/stream/stream-stats.ts

@@ -1,12 +1,12 @@
 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 {
@@ -14,6 +14,7 @@ export class StreamStats {
     public static getInstance = () => StreamStats.instance ?? (StreamStats.instance = new StreamStats());
     private readonly LOG_TAG = 'StreamStats';
 
+    private isRunning = false;
     private intervalId?: number | null;
     private readonly REFRESH_INTERVAL = 1 * 1000;
 
@@ -69,19 +70,23 @@ export class StreamStats {
     };
 
     private $container!: HTMLElement;
-
-    quickGlanceObserver?: MutationObserver | null;
+    private boundOnStreamHudStateChanged: typeof this.onStreamHudStateChanged;
 
     private constructor() {
         BxLogger.info(this.LOG_TAG, 'constructor()');
+
+        this.boundOnStreamHudStateChanged = this.onStreamHudStateChanged.bind(this);
+        BxEventBus.Stream.on('ui.streamHud.rendered', this.boundOnStreamHudStateChanged);
+
         this.render();
     }
 
     async start(glancing=false) {
-        if (!this.isHidden() || (glancing && this.isGlancing())) {
+        if (this.isRunning || !this.isHidden() || (glancing && this.isGlancing())) {
             return;
         }
 
+        this.isRunning = true;
         this.intervalId && clearInterval(this.intervalId);
         await this.update(true);
 
@@ -96,6 +101,7 @@ export class StreamStats {
             return;
         }
 
+        this.isRunning = false;
         this.intervalId && clearInterval(this.intervalId);
         this.intervalId = null;
 
@@ -113,49 +119,22 @@ export class StreamStats {
 
     destroy() {
         this.stop();
-        this.quickGlanceStop();
         this.hideSettingsUi();
     }
 
     isHidden = () => this.$container.classList.contains('bx-gone');
     isGlancing = () => this.$container.dataset.display === 'glancing';
 
-    quickGlanceSetup() {
-        if (!STATES.isPlaying || this.quickGlanceObserver) {
+    onStreamHudStateChanged({ expanded }: { expanded: boolean }) {
+        if (!getStreamPref(StreamPref.STATS_QUICK_GLANCE_ENABLED)) {
             return;
         }
 
-        const $uiContainer = document.querySelector('div[data-testid=ui-container]')!;
-        if (!$uiContainer) {
-            return;
+        if (expanded) {
+            this.isHidden() && this.start(true);
+        } else {
+            this.stop(true);
         }
-
-        this.quickGlanceObserver = new MutationObserver((mutationList, observer) => {
-            for (const record of mutationList) {
-                const $target = record.target as HTMLElement;
-                if (!$target.className || !$target.className.startsWith('GripHandle')) {
-                    continue;
-                }
-
-                const expanded = (record.target as HTMLElement).ariaExpanded;
-                if (expanded === 'true') {
-                    this.isHidden() && this.start(true);
-                } else {
-                    this.stop(true);
-                }
-            }
-        });
-
-        this.quickGlanceObserver.observe($uiContainer, {
-            attributes: true,
-            attributeFilter: ['aria-expanded'],
-            subtree: true,
-        });
-    }
-
-    quickGlanceStop() {
-        this.quickGlanceObserver && this.quickGlanceObserver.disconnect();
-        this.quickGlanceObserver = null;
     }
 
     private update = async (forceUpdate=false) => {
@@ -164,7 +143,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,12 +171,12 @@ export class StreamStats {
     }
 
     refreshStyles() {
-        const PREF_ITEMS = getPref(PrefKey.STATS_ITEMS);
-        const PREF_OPACITY_BG = getPref(PrefKey.STATS_OPACITY_BACKGROUND);
+        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.position = getStreamPref(StreamPref.STATS_POSITION);
 
         if (PREF_OPACITY_BG === 0) {
             $container.style.removeProperty('background-color');
@@ -207,12 +186,12 @@ export class StreamStats {
             $container.style.backgroundColor = `rgba(0, 0, 0, ${PREF_OPACITY_BG}%)`;
         }
 
-        $container.style.opacity = getPref(PrefKey.STATS_OPACITY_ALL) + '%';
-        $container.style.fontSize = getPref(PrefKey.STATS_TEXT_SIZE);
+        $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();
         }
     }
@@ -240,8 +219,8 @@ export class StreamStats {
 
     static setupEvents() {
         BxEventBus.Stream.on('state.playing', () => {
-            const PREF_STATS_QUICK_GLANCE = getPref(PrefKey.STATS_QUICK_GLANCE_ENABLED);
-            const PREF_STATS_SHOW_WHEN_PLAYING = getPref(PrefKey.STATS_SHOW_WHEN_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();
 
@@ -249,7 +228,6 @@ export class StreamStats {
             if (PREF_STATS_SHOW_WHEN_PLAYING) {
                 streamStats.start();
             } else if (PREF_STATS_QUICK_GLANCE) {
-                streamStats.quickGlanceSetup();
                 // Show stats bar
                 !PREF_STATS_SHOW_WHEN_PLAYING && streamStats.start(true);
             }

src/modules/stream/stream-ui.ts

@@ -5,7 +5,6 @@ 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 {
@@ -13,7 +12,6 @@ export class StreamUiHandler {
     private static $btnStreamStats: HTMLElement | null | undefined;
     private static $btnRefresh: HTMLElement | null | undefined;
     private static $btnHome: HTMLElement | null | undefined;
-    private static observer: MutationObserver | undefined;
 
     private static cloneStreamHudButton($btnOrg: HTMLElement, label: string, svgIcon: BxIconRaw): HTMLElement | null {
         if (!$btnOrg) {
@@ -101,7 +99,7 @@ export class StreamUiHandler {
         return $btn;
     }
 
-    private static async handleStreamMenu() {
+    static async handleStreamMenu() {
         const $btnCloseHud = document.querySelector<HTMLElement>('button[class*=StreamMenu-module__backButton]');
         if (!$btnCloseHud) {
             return;
@@ -134,13 +132,17 @@ export class StreamUiHandler {
         $menu?.appendChild(await StreamBadges.getInstance().render());
     }
 
-    private static handleSystemMenu($streamHud: HTMLElement) {
+    static handleSystemMenu($streamHud: HTMLElement) {
         // Get the last button
         const $orgButton = $streamHud.querySelector<HTMLElement>('div[class^=HUDButton]');
         if (!$orgButton) {
             return;
         }
 
+        if (StreamUiHandler.$btnStreamSettings && $streamHud.contains(StreamUiHandler.$btnStreamSettings)) {
+            return;
+        }
+
         const hideGripHandle = () => {
             // Grip handle
             const $gripHandle = document.querySelector<HTMLElement>('#StreamHud button[class^=GripHandle]');
@@ -207,67 +209,5 @@ export class StreamUiHandler {
         StreamUiHandler.$btnStreamStats = undefined;
         StreamUiHandler.$btnRefresh = undefined;
         StreamUiHandler.$btnHome = undefined;
-
-        StreamUiHandler.observer && StreamUiHandler.observer.disconnect();
-        StreamUiHandler.observer = undefined;
-    }
-
-    static observe() {
-        StreamUiHandler.reset();
-
-        const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
-        if (!$screen) {
-            return;
-        }
-
-        const observer = new MutationObserver(mutationList => {
-            let item: MutationRecord;
-            for (item of mutationList) {
-                if (item.type !== 'childList') {
-                    continue;
-                }
-
-                item.addedNodes.forEach(async $node => {
-                    if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
-                        return;
-                    }
-
-                    let $elm: HTMLElement | null = $node as HTMLElement;
-
-                    // Ignore non-HTML elements
-                    if (!($elm instanceof HTMLElement)) {
-                        return;
-                    }
-
-                    const className = $elm.className || '';
-
-                    // Error Page: .PureErrorPage.ErrorScreen
-                    if (className.includes('PureErrorPage')) {
-                        BxEventBus.Stream.emit('state.error', {});
-                        return;
-                    }
-
-                    // Render badges
-                    if (className.startsWith('StreamMenu-module__container')) {
-                        StreamUiHandler.handleStreamMenu();
-                        return;
-                    }
-
-                    if (className.startsWith('Overlay-module_') || className.startsWith('InProgressScreen')) {
-                        $elm = $elm.querySelector('#StreamHud');
-                    }
-
-                    if (!$elm || ($elm.id || '') !== 'StreamHud') {
-                        return;
-                    }
-
-                    // Handle System Menu bar
-                    StreamUiHandler.handleSystemMenu($elm);
-                });
-            };
-        });
-
-        observer.observe($screen, { subtree: true, childList: true });
-        StreamUiHandler.observer = observer;
     }
 }

src/modules/touch-controller.ts

@@ -4,8 +4,8 @@ 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";
@@ -209,7 +209,7 @@ export class TouchController {
         }
 
         if (!layoutId) {
-            BxLogger.error(LOG_TAG, 'Invalid layoutId, show default controller');
+            BxLogger.warning(LOG_TAG, 'Invalid layoutId, show default controller');
             TouchController.#enabled && TouchController.#showDefault();
             return;
         }
@@ -267,6 +267,10 @@ export class TouchController {
         return TouchController.#customList;
     }
 
+    static hasCustomControl(productId: string): boolean {
+        return TouchController.#customList?.includes(productId);
+    }
+
     static setup() {
         // Function for testing touch control
         window.testTouchLayout = (layout: any) => {
@@ -289,8 +293,8 @@ export class TouchController {
 
         TouchController.#$style = $style;
 
-        const PREF_STYLE_STANDARD = getPref(PrefKey.TOUCH_CONTROLLER_STYLE_STANDARD);
-        const PREF_STYLE_CUSTOM = getPref(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);
 
         BxEventBus.Stream.on('dataChannelCreated', payload => {
             const { dataChannel } = payload;

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

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with { type: "macro" };
+
 import { GamepadKey } from "@/enums/gamepad";
 import { VIRTUAL_GAMEPAD_ID } from "@/modules/mkb/mkb-handler";
 import { BxEvent } from "@/utils/bx-event";
@@ -641,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/controller-customizations-manager-dialog.ts

@@ -5,8 +5,8 @@ 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 { 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 { BxEvent } from "@/utils/bx-event";
 import { deepClone } from "@/utils/global";
 import { StreamSettings } from "@/utils/stream-settings";
@@ -58,7 +58,7 @@ export class ControllerCustomizationsManagerDialog extends BaseProfileManagerDia
     }
 
     private render() {
-        const isControllerFriendly = getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
+        const isControllerFriendly = getGlobalPref(GlobalPref.UI_CONTROLLER_FRIENDLY);
         const $rows = CE('div', { class: 'bx-buttons-grid' });
 
         const $baseSelect = CE('select', { class: 'bx-full-width' },
@@ -117,7 +117,7 @@ export class ControllerCustomizationsManagerDialog extends BaseProfileManagerDia
         }
 
         // Map nearby elenemts for controller-friendly UI
-        if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+        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 = {
@@ -257,7 +257,7 @@ export class ControllerCustomizationsManagerDialog extends BaseProfileManagerDia
             $label.classList.add('bx-horizontal-shaking');
 
             // Focus select
-            if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+            if (getGlobalPref(GlobalPref.UI_CONTROLLER_FRIENDLY)) {
                 this.dialogManager.focus($select);
             }
         }

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, 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";

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,23 +32,27 @@ 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);
+        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)`),
+            CE('option', { value: StreamResolution.DIM_1080P_HQ }, `1080p (HQ)`),
         );
 
         $resolutions = BxSelectElement.create($resolutions as HTMLSelectElement);
         $resolutions.addEventListener('input', (e: Event) => {
             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);
+            $settingNote.textContent = `✅ ${t('xbox-360-games')} ${value === StreamResolution.DIM_1080P_HQ ? '❌' : '✅'} ${t('xbox-apps')}`;
+            setGlobalPref(GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION, value, 'ui');
         });
 
         ($resolutions as any).value = currentResolution;

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 { 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, type BxIconRaw } from "@/utils/bx-icon";
-import { STATES, AppInterface, deepClone, SCRIPT_VERSION, STORAGE, SCRIPT_VARIANT } from "@/utils/global";
+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,14 +24,14 @@ 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) | HTMLElement;
@@ -43,7 +40,7 @@ type SettingTabSectionItem = Partial<{
     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>;
@@ -59,17 +56,15 @@ type SettingTabSection = {
     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: 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';
@@ -87,17 +82,20 @@ export class SettingsDialog extends NavigationDialog {
     private $btnGlobalReload!: HTMLButtonElement;
     private $noteGlobalReload!: HTMLElement;
     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',
@@ -106,7 +104,7 @@ export class SettingsDialog extends NavigationDialog {
         items: [
             // Top buttons
             ($parent) => {
-                const PREF_LATEST_VERSION = getPref(PrefKey.VERSION_LATEST);
+                const PREF_LATEST_VERSION = getGlobalPref(GlobalPref.VERSION_LATEST);
                 const topButtons = [];
 
                 // "New version available" button
@@ -188,57 +186,56 @@ 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,
         ],
     }, {
         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
@@ -255,13 +252,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
@@ -273,22 +270,23 @@ export class SettingsDialog extends NavigationDialog {
         group: 'ui',
         label: t('ui'),
         items: [
-            PrefKey.UI_LAYOUT,
-            PrefKey.UI_IMAGE_QUALITY,
-            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,
+            GlobalPref.UI_LAYOUT,
+            GlobalPref.UI_THEME,
+            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: PrefKey.BLOCK_FEATURES,
+                pref: GlobalPref.BLOCK_FEATURES,
                 multiLines: true,
             },
         ],
@@ -297,28 +295,28 @@ 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.orgUserAgent || window.navigator.userAgent;
@@ -429,20 +427,17 @@ 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')!;
 
-                BxEventBus.Script.on('setting.changed', payload => {
-                    const { storageKey, settingKey, settingValue } = payload;
-                    if (storageKey === StorageKey.GLOBAL && settingKey === PrefKey.AUDIO_VOLUME) {
-                        $range.value = settingValue;
+                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 });
                     }
                 });
@@ -452,67 +447,35 @@ 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_PROCESSING_MODE,
+            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> = [{
+    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: [{
@@ -564,82 +527,57 @@ export class SettingsDialog extends NavigationDialog {
                 });
             },
         }],
-    }, isFullVersion() && STATES.browser.capabilities.deviceVibration && {
+    },
+
+    STATES.browser.capabilities.deviceVibration && {
         group: 'device',
         label: t('device'),
         items: [{
-            pref: PrefKey.DEVICE_VIBRATION_MODE,
+            pref: StreamPref.DEVICE_VIBRATION_MODE,
             multiLines: true,
             unsupported: !STATES.browser.capabilities.deviceVibration,
-            onChange: () => StreamSettings.refreshControllerSettings(),
         }, {
-            pref: PrefKey.DEVICE_VIBRATION_INTENSITY,
+            pref: StreamPref.DEVICE_VIBRATION_INTENSITY,
             unsupported: !STATES.browser.capabilities.deviceVibration,
-            onChange: () => StreamSettings.refreshControllerSettings(),
         }],
-    }];
+    }] : [];
 
-    private readonly TAB_MKB_ITEMS: (() => Array<SettingTabSection | false>) = () => [
-        isFullVersion() && {
+    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_ALL,
-                onChange: StreamStats.refreshStyles,
-            }, {
-                pref: PrefKey.STATS_OPACITY_BACKGROUND,
-                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,
         ],
     }];
 
@@ -667,7 +605,6 @@ export class SettingsDialog extends NavigationDialog {
             group: 'mkb',
             icon: BxIcon.NATIVE_MKB,
             items: this.TAB_MKB_ITEMS,
-            lazyContent: true,
             requiredVariants: 'full',
         },
 
@@ -682,6 +619,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();
 
@@ -695,13 +634,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 {
@@ -741,21 +684,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[];
@@ -766,12 +694,15 @@ export class SettingsDialog extends NavigationDialog {
 
                 // Calculate size of controller-friendly select boxes
                 calculateSelectBoxes($child as HTMLElement);
-            } else {
+            } 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');
@@ -784,10 +715,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;
     }
 
@@ -802,8 +731,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(PrefKey.SERVER_REGION);
+        let selectedValue = getGlobalPref(GlobalPref.SERVER_REGION);
 
         const continents: Record<ServerContinent, {
             label: string,
@@ -836,7 +771,7 @@ export class SettingsDialog extends NavigationDialog {
         $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);
         });
 
@@ -888,13 +823,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) {
@@ -904,13 +840,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(() => {
@@ -925,8 +861,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;
@@ -942,25 +878,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)) {
@@ -1009,12 +941,19 @@ export class SettingsDialog extends NavigationDialog {
             $note,
             multiLines: setting.multiLines,
             icon: prefDefinition?.labelIcon,
+            onContextMenu: this.boundOnContextMenu,
+            pref: pref,
         });
         if (pref) {
             $row.htmlFor = `bx_setting_${escapeCssSelector(pref)}`;
         }
         $row.dataset.type = settingTabContent.group;
 
+        // Highlight "Bypass region" row
+        if (!STATES.supportedRegion && setting.pref === GlobalPref.SERVER_BYPASS_RESTRICTION) {
+            $row.classList.add('bx-settings-important-row');
+        }
+
         $tabContent.appendChild($row);
         !prefDefinition?.unsupported && setting.onCreated && setting.onCreated(setting, $control);
     }
@@ -1022,7 +961,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) {
@@ -1167,21 +1108,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;
@@ -1197,6 +1148,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];
@@ -1218,11 +1170,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);
         }
@@ -1343,6 +1290,43 @@ 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 deleted = STORAGE.Stream.deleteSettingByGame(targetGameId, 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) {
@@ -1361,6 +1345,9 @@ export class SettingsDialog extends NavigationDialog {
             case 'PageDown':
                 this.jumpToSettingGroup('next');
                 break;
+            case 'KeyQ':
+                this.resetHighlightedSetting();
+                break;
             default:
                 handled = false;
                 break;
@@ -1393,6 +1380,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,16 +1,17 @@
 import { BxEvent } from "@/utils/bx-event";
-import { getUniqueGamepadNames } from "@/utils/gamepad";
+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 { 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;
@@ -26,16 +27,23 @@ export class ControllerExtraSettings extends HTMLElement {
     getCurrentControllerId!: typeof ControllerExtraSettings['getCurrentControllerId'];
     saveSettings!: typeof ControllerExtraSettings['saveSettings'];
     updateCustomizationSummary!: typeof ControllerExtraSettings['updateCustomizationSummary'];
+    setValue!: typeof ControllerExtraSettings['setValue'];
 
     static renderSettings(this: SettingsDialog): HTMLElement {
         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('select', {
             class: 'bx-full-width',
@@ -80,9 +88,7 @@ export class ControllerExtraSettings extends HTMLElement {
                     }),
                 }),
             ),
-            {
-                multiLines: true,
-            },
+            { multiLines: true },
         );
         $rowCustomization.appendChild(
             $container.$summaryCustomization = CE('div'),
@@ -162,7 +168,7 @@ export class ControllerExtraSettings extends HTMLElement {
 
         // Render controller list
         for (const name of this.controllerIds) {
-            const $option = CE('option', { value: name }, name);
+            const $option = CE('option', { value: name }, simplifyGamepadName(name));
             $fragment.appendChild($option);
         }
 
@@ -191,14 +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.$selectCustomization.value = controllerSettings.customizationPresetId.toString();
-
-        // Update summary
-        ControllerExtraSettings.updateCustomizationSummary.call(this);
+        const controllerSetting = STORAGE.Stream.getControllerSetting(this.currentControllerId);
+        ControllerExtraSettings.updateElements.call(this, controllerSetting);
     }
 
     private static getCurrentControllerId(this: ControllerExtraSettings) {
@@ -228,16 +228,30 @@ export class ControllerExtraSettings extends HTMLElement {
             return;
         }
 
-        const data: ControllerSettingsRecord = {
-            id: this.currentControllerId,
-            data: {
-                shortcutPresetId: parseInt(this.$selectShortcuts.value),
-                customizationPresetId: parseInt(this.$selectCustomization.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,11 @@ 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 {
@@ -44,7 +40,7 @@ export class MkbExtraSettings extends HTMLElement {
         }));
 
         $container.append(
-            ...(getPref(PrefKey.MKB_ENABLED) ? [
+            ...(getGlobalPref(GlobalPref.MKB_ENABLED) ? [
                 createSettingRow(
                     t('virtual-controller'),
                     CE('div', {
@@ -63,14 +59,20 @@ export class MkbExtraSettings extends HTMLElement {
                             }),
                         }),
                     ),
-                    { 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,
+                    },
                 ),
             ] : []),
 
@@ -92,13 +94,20 @@ export class MkbExtraSettings extends HTMLElement {
                         }),
                     }),
                 ),
-                { 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(() => {
@@ -111,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(PrefKey.MKB_P1_MAPPING_PRESET_ID));
+        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(PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID), { addOffValue: 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(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(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
@@ -116,10 +116,17 @@ 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 {
@@ -127,8 +134,9 @@ export class SuggestionsSetting {
                 }
 
                 // @ts-ignore
-                const currentValue = getPref(prefKey, false);
-                const currentValueText = STORAGE.Global.getValueText(prefKey, currentValue);
+                const currentValue = storage.getSetting(prefKey, false);
+                // @ts-ignore
+                const currentValueText = storage.getValueText(prefKey, currentValue);
                 const isSameValue = currentValue === suggestedValue;
 
                 let $child: HTMLElement;
@@ -137,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', {
@@ -183,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];
 
@@ -192,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);
                 }
 
@@ -274,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) {
@@ -311,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)) {
@@ -327,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/guide-menu.ts

@@ -1,16 +1,12 @@
-import { isFullVersion } from "@macros/build" with { type: "macro" };
-
-import { BxEvent } from "@/utils/bx-event";
 import { AppInterface, STATES } from "@/utils/global";
 import { createButton, ButtonStyle, CE } from "@/utils/html";
 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 { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { getGlobalPref } from "@/utils/pref-utils";
 import { UiLayout } from "@/enums/pref-values";
-import { PrefKey } from "@/enums/pref-keys";
+import { GlobalPref } from "@/enums/pref-keys";
 
 export enum GuideMenuTab {
     HOME = 'home',
@@ -116,7 +112,7 @@ export class GuideMenu {
         });
 
         // Set TV tag
-        if (STATES.userAgent.isTv || getPref(PrefKey.UI_LAYOUT) === UiLayout.TV) {
+        if (STATES.userAgent.isTv || getGlobalPref(GlobalPref.UI_LAYOUT) === UiLayout.TV) {
             document.body.dataset.bxMediaType = 'tv';
         }
 
@@ -141,11 +137,9 @@ export class GuideMenu {
     }
 
     injectHome($root: HTMLElement, isPlaying = false) {
-        if (isFullVersion()) {
-            const $achievementsProgress = $root.querySelector('button[class*=AchievementsButton-module__progressBarContainer]');
-            if ($achievementsProgress) {
-                TrueAchievements.getInstance().injectAchievementsProgress($achievementsProgress as HTMLElement);
-            }
+        const $buttons = this.renderButtons();
+        if ($root.contains($buttons)) {
+            return;
         }
 
         // Find the element to add buttons to
@@ -169,67 +163,7 @@ export class GuideMenu {
             return false;
         }
 
-        const $buttons = this.renderButtons();
         $buttons.dataset.isPlaying = isPlaying.toString();
         $target.insertAdjacentElement('afterend', $buttons);
     }
-
-    private onShown = async (e: Event) => {
-        const where = (e as any).where as GuideMenuTab;
-
-        if (where === GuideMenuTab.HOME) {
-            const $root = document.querySelector<HTMLElement>('#gamepass-dialog-root div[role=dialog] div[role=tabpanel] div[class*=HomeLandingPage]');
-            $root && this.injectHome($root, STATES.isPlaying);
-        }
-    }
-
-    addEventListeners() {
-        window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, this.onShown);
-    }
-
-    observe($addedElm: HTMLElement) {
-        let className = $addedElm.className;
-
-        // Fix custom buttons disappearing in Guide Menu (#551)
-        if (!className) {
-            className = $addedElm.firstElementChild?.className ?? '';
-        }
-
-        if (!className || className.startsWith('bx-')) {
-            return;
-        }
-
-        // TrueAchievements
-        if (isFullVersion() && className.includes('AchievementsButton-module__progressBarContainer')) {
-            TrueAchievements.getInstance().injectAchievementsProgress($addedElm);
-            return;
-        }
-
-        if (!className.startsWith('NavigationAnimation') &&
-                !className.startsWith('DialogRoutes') &&
-                !className.startsWith('Dialog-module__container')) {
-            return;
-        }
-
-        // Achievement Details page
-        if (isFullVersion()) {
-            const $achievDetailPage = $addedElm.querySelector('div[class*=AchievementDetailPage]');
-            if ($achievDetailPage) {
-                TrueAchievements.getInstance().injectAchievementDetailPage($achievDetailPage as HTMLElement);
-                return;
-            }
-        }
-
-        // Find navigation bar
-        const $selectedTab = $addedElm.querySelector('div[class^=NavigationMenu] button[aria-selected=true');
-        if ($selectedTab) {
-            let $elm: Element | null = $selectedTab;
-            let index;
-            for (index = 0; ($elm = $elm?.previousElementSibling); index++);
-
-            if (index === 0) {
-                BxEvent.dispatch(window, BxEvent.XCLOUD_GUIDE_MENU_SHOWN, { where: GuideMenuTab.HOME });
-            }
-        }
-    }
 }

src/modules/ui/header.ts

@@ -1,107 +1,99 @@
-import { SCRIPT_VERSION } from "@utils/global";
-import { createButton, ButtonStyle, CE, isElementVisible } from "@utils/html";
+import { isFullVersion } from "@macros/build" with { type: "macro" };
+
+import { SCRIPT_VERSION, STATES } from "@utils/global";
+import { createButton, ButtonStyle, CE } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 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";
+import { BxEventBus } from "@/utils/bx-event-bus";
+import { BlockFeature } from "@/enums/pref-values";
 
 export class HeaderSection {
     private static instance: 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;
 
-    private observer?: MutationObserver;
-    private timeoutId?: number | null;
-
     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'],
-            label: '???',
+        let $btnSettings = this.$btnSettings = createButton({
+            classes: ['bx-header-settings-button', 'bx-gone'],
+            label: t('better-xcloud'),
             style: ButtonStyle.FROSTED | ButtonStyle.DROP_SHADOW | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
             onClick: e => SettingsDialog.getInstance().show(),
         });
 
         this.$buttonsWrapper = CE('div', false,
-            getPref(PrefKey.REMOTE_PLAY_ENABLED) ? this.$btnRemotePlay : null,
+            !getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.REMOTE_PLAY) ? this.$btnRemotePlay : null,
             this.$btnSettings,
         );
+
+        BxEventBus.Script.on('xcloud.server', ({status}) => {
+            if (status === 'ready') {
+                STATES.isSignedIn = true;
+
+                // Show server name
+                $btnSettings.querySelector('span')!.textContent = getPreferredServerRegion(true) || t('better-xcloud');
+                const PREF_LATEST_VERSION = getGlobalPref(GlobalPref.VERSION_LATEST);
+                // Show new update status
+                if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) {
+                    $btnSettings.setAttribute('data-update-available', 'true');
+                }
+            } else if (status === 'unavailable') {
+                STATES.supportedRegion = false;
+
+                // Open Settings dialog on Unsupported page
+                const $unsupportedPage = document.querySelector<HTMLElement>('div[class^=UnsupportedMarketPage-module__container]');
+                if ($unsupportedPage) {
+                    SettingsDialog.getInstance().show();
+                }
+            }
+
+            $btnSettings.classList.remove('bx-gone');
+        });
     }
 
-    private injectSettingsButton($parent?: HTMLElement) {
-        if (!$parent) {
+    checkHeader = () => {
+        const $header = document.querySelector('#gamepass-root header[class^=Header-module__header]');
+        if (!$header) {
             return;
         }
 
-        const PREF_LATEST_VERSION = getPref(PrefKey.VERSION_LATEST);
-
-        // Setup Settings button
-        const $btnSettings = this.$btnSettings;
-        if (isElementVisible(this.$buttonsWrapper)) {
-            return;
-        }
-
-        $btnSettings.querySelector('span')!.textContent = getPreferredServerRegion(true) || t('better-xcloud');
-
-        // Show new update status
-        if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) {
-            $btnSettings.setAttribute('data-update-available', 'true');
-        }
-
-        // Add the Settings button to the web page
-        $parent.appendChild(this.$buttonsWrapper);
-    }
-
-    private checkHeader = () => {
-        let $target = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
+        let $target = $header.querySelector('div[class*=EdgewaterHeader-module__rightSectionSpacing], div[class*=RemotePlayHeader-module__rightSectionSpacing]');
         if (!$target) {
             $target = document.querySelector('div[class^=UnsupportedMarketPage-module__buttons]');
         }
 
-        $target && this.injectSettingsButton($target as HTMLElement);
-    }
+        // Add the Settings button to the web page
+        $target?.appendChild(this.$buttonsWrapper);
 
-    private watchHeader() {
-        const $root = document.querySelector('#PageContent header') || document.querySelector('#root');
-        if (!$root) {
-            return;
+        if (!STATES.isSignedIn) {
+            BxEventBus.Script.emit('xcloud.server', { status: 'signed-out' });
         }
-
-        this.timeoutId && clearTimeout(this.timeoutId);
-        this.timeoutId = null;
-
-        this.observer && this.observer.disconnect();
-        this.observer = new MutationObserver(mutationList => {
-            this.timeoutId && clearTimeout(this.timeoutId);
-            this.timeoutId = window.setTimeout(this.checkHeader, 2000);
-        });
-        this.observer.observe($root, { subtree: true, childList: true });
-
-        this.checkHeader();
     }
 
     showRemotePlayButton() {
-        this.$btnRemotePlay.classList.remove('bx-gone');
-    }
-
-    static watchHeader() {
-        HeaderSection.getInstance().watchHeader();
+        this.$btnRemotePlay?.classList.remove('bx-gone');
     }
 }

src/types/db.d.ts

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

src/types/global.d.ts

@@ -1,10 +1,11 @@
 import type { BxExposed } from "@/utils/bx-exposed";
 import type { AllPresets, ControllerShortcutPresetRecord } from "./presets";
-import type { PrefKey } from "@/enums/pref-keys";
+import type { GlobalPref } from "@/enums/pref-keys";
 import type { StreamSettings, type StreamSettingsData } from "@/utils/stream-settings";
 import type { BxEvent } from "@/utils/bx-event";
 import type { BxEventBus } from "@/utils/bx-event-bus";
 import type { BxLogger } from "@/utils/bx-logger";
+import type { XcloudInputChannel } from "@/utils/gamepad";
 
 export {};
 
@@ -20,12 +21,11 @@ declare global {
                 closeAll: () => void;
             };
             showStreamMenu: () => void;
-            inputSink: any;
+            inputChannel: XcloudInputChannel | undefined;
             streamSession: any;
             touchLayoutManager: any;
         }>;
 
-        BX_REMOTE_PLAY_CONFIG: BxStates.remotePlay.config;
         BX_STREAM_SETTINGS: StreamSettingsData;
 
         BX_FETCH: typeof window['fetch'];

src/types/index.d.ts

@@ -22,57 +22,6 @@ type ServerRegion = {
     contintent: ServerContinent;
 };
 
-type BxStates = {
-    supportedRegion: boolean;
-    serverRegions: Record<string, ServerRegion>;
-    selectedRegion: any;
-    gsToken: string;
-    isSignedIn: boolean;
-
-    isPlaying: boolean;
-
-    browser: {
-        capabilities: {
-            touch: boolean;
-            batteryApi: boolean;
-            deviceVibration: boolean;
-            mkb: boolean;
-            emulatedNativeMkb: boolean;
-        };
-    };
-
-    userAgent: {
-        isTv: boolean;
-        capabilities: {
-            touch: boolean;
-            mkb: boolean;
-        };
-    };
-
-    currentStream: Partial<{
-        titleSlug: string;
-        titleInfo: XcloudTitleInfo;
-        xboxTitleId: number;
-
-        streamPlayer: StreamPlayer | null;
-
-        peerConnection: RTCPeerConnection;
-        audioContext: AudioContext | null;
-        audioGainNode: GainNode | null;
-    }>;
-
-    remotePlay: Partial<{
-        isPlaying: boolean;
-        server: string;
-        config: {
-            serverId: string;
-        };
-        titleId?: string;
-    }>;
-
-    pointerServerPort: number;
-}
-
 type XcloudTitleInfo = {
     titleId: string,
 
@@ -87,7 +36,7 @@ type XcloudTitleInfo = {
         hasMkbSupport: boolean;
     };
 
-    product: {
+    productInfo: {
         title: string;
         heroImageUrl: string;
         titledHeroImageUrl: string;
@@ -105,10 +54,12 @@ declare module '*.js' {
   const content: string;
   export default content;
 }
+
 declare module '*.svg' {
   const content: string;
   export default content;
 }
+
 declare module '*.styl' {
   const content: string;
   export default content;
@@ -118,11 +69,17 @@ declare module '*.fs' {
     const content: string;
     export default content;
 }
+
 declare module '*.vert' {
     const content: string;
     export default content;
 }
 
+declare module '*.wgsl' {
+    const content: string;
+    export default content;
+}
+
 type MkbMouseMove = {
     movementX: number;
     movementY: number;
@@ -178,7 +135,7 @@ type XboxAchievement = {
     }
 };
 
-type OsName = 'windows' | 'tizen' | 'android';
+type OsName = 'windows' | 'tizen' | 'webOS' | 'xboxOS' | 'android';
 
 type XcloudGamepad = {
     GamepadIndex: number;
@@ -213,3 +170,28 @@ type XcloudGamepad = {
     RightStickAxes?: any;
     Share?: any;
 };
+
+type BxFlags = {
+    Debug: boolean;
+
+    CheckForUpdate: boolean;
+    EnableXcloudLogging: boolean;
+    SafariWorkaround: boolean;
+
+    EnableWebGPURenderer: boolean;
+
+    ForceNativeMkbTitles: string[];
+    FeatureGates: { [key: string]: boolean } | null,
+
+    DeviceInfo: {
+        deviceType: 'android' | 'android-tv' | 'android-handheld' | 'webos' | 'unknown',
+        userAgent?: string,
+
+        androidInfo?: {
+            manufacturer: string,
+            brand: string,
+            board: string,
+            model: string,
+        },
+    }
+}

src/types/mkb.d.ts

@@ -0,0 +1,140 @@
+type NativeMouseData = {
+    X: number,
+    Y: number,
+    Buttons: number,
+    WheelX: number,
+    WheelY: number,
+    Type?: 0,  // 0: Relative, 1: Absolute
+}
+
+
+type XcloudInputChannel = {
+    sendGamepadInput: (timestamp: number, gamepads: XcloudGamepad[]) => void;
+    queueMouseInput: (data: NativeMouseData) => void;
+}
+
+
+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';
+
+type KeyCodeExcludeModifiers = Exclude<KeyCode,
+    'ShiftLeft'
+    | 'ShiftRight'
+    | 'ControlLeft'
+    | 'ControlRight'
+    | 'AltLeft'
+    | 'AltRight'
+>

src/types/network.d.ts

@@ -0,0 +1,8 @@
+type RemotePlayConsoleAddresses = {
+    [key: string]: number[],
+}
+
+type ForceNativeMkbResponse = {
+    $schemaVersion: number;
+    data: { [key: string]: string };
+}

src/types/network.ts

@@ -1,3 +0,0 @@
-export type RemotePlayConsoleAddresses = {
-    [key: string]: number[],
-}

src/types/preferences.d.ts

@@ -1,4 +1,4 @@
-export type PreferenceSetting = {
+type PreferenceSetting = {
     default: any;
     optionsGroup?: string;
     options?: { [index: string]: string };
@@ -17,4 +17,13 @@ export type PreferenceSetting = {
     label?: string;
 };
 
-export type PreferenceSettings = { [index in PrefKey]: PreferenceSetting };
+type PreferenceSettings = { [index in PrefKey]: PreferenceSetting };
+
+type StreamPreferredLocale = 'default' | string;
+
+type ControllerSetting = {
+    shortcutPresetId: number;
+    customizationPresetId: number;
+}
+
+type ControllerSettings = Record<string, ControllerSetting>;

src/types/prefs.d.ts

@@ -1 +0,0 @@
-type StreamPreferredLocale = 'default' | string;

src/types/setting-definition.d.ts

@@ -1,8 +1,8 @@
-import type { PrefKey } from "@/enums/pref-keys";
+import type { AnyPref, AnySettingsStorage, GlobalPref, StreamPref } from "@/enums/pref-keys";
 import type { SettingElementType } from "@/utils/setting-element";
 
-export type SuggestedSettingProfile = 'recommended' | 'lowest' | 'highest' | 'default';
-export type RecommendedSettings = {
+type SuggestedSettingProfile = 'recommended' | 'lowest' | 'highest' | 'default';
+type RecommendedSettings = {
     schema_version: 2,
     device_name: string,
     device_type: 'android' | 'android-tv' | 'android-handheld' | 'webos',
@@ -10,11 +10,12 @@ export type RecommendedSettings = {
         app: any,
         script: {
             _base?: 'lowest' | 'highest',
-        } & PartialRecord<PrefKey, any>,
+        } & PartialRecord<GlobalPref, any>,
     },
 };
 
-export type SettingAction = 'get' | 'set';
+type SettingAction = 'get' | 'set';
+type SettingActionOrigin = 'direct' | 'ui';
 
 interface BaseSettingDefinition {
     default: any;
@@ -56,15 +57,22 @@ interface NumberStepperSettingDefinition extends BaseSettingDefinition {
     };
 }
 
-export type SettingDefinition = BaseSettingDefinition | OptionsSettingDefinition | MultipleOptionsSettingDefinition | NumberStepperSettingDefinition;
+type SettingDefinition = BaseSettingDefinition | OptionsSettingDefinition | MultipleOptionsSettingDefinition | NumberStepperSettingDefinition;
+type PrefInfo = {
+    storage: AnySettingsStorage,
+    definition: SettingDefinition,
+    // value: unknown,
+};
 
-export type SettingDefinitions = { [index in PrefKey]: SettingDefinition };
+type SettingDefinitions<T extends AnyPref> = {
+    [key in T]: SettingDefinition;
+};
 
-export type MultipleOptionsParams = Partial<{
+type MultipleOptionsParams = Partial<{
     size?: number;
 }>
 
-export type NumberStepperParams = Partial<{
+type NumberStepperParams = Partial<{
     steps: number;
 
     suffix: string;
@@ -78,7 +86,7 @@ export type NumberStepperParams = Partial<{
     reverse: boolean;
 }>
 
-export type DualNumberStepperParams = {
+type DualNumberStepperParams = {
     min: number;
     minDiff: number;
     max: number;

src/types/states.d.ts

@@ -0,0 +1,49 @@
+import type { StreamPlayerManager } from "@/modules/stream-player-manager";
+
+type BxStates = {
+    supportedRegion: boolean;
+    serverRegions: Record<string, ServerRegion>;
+    selectedRegion: any;
+    gsToken: string;
+    isSignedIn: boolean;
+
+    isPlaying: boolean;
+
+    browser: {
+        capabilities: {
+            touch: boolean;
+            batteryApi: boolean;
+            deviceVibration: boolean;
+            mkb: boolean;
+            emulatedNativeMkb: boolean;
+        };
+    };
+
+    userAgent: {
+        isTv: boolean;
+        capabilities: {
+            touch: boolean;
+            mkb: boolean;
+        };
+    };
+
+    currentStream: Partial<{
+        titleSlug: string;
+        titleInfo: XcloudTitleInfo;
+        xboxTitleId: number | null;
+        gameSpecificSettings: boolean;
+
+        streamPlayerManager: StreamPlayerManager | null;
+
+        peerConnection: RTCPeerConnection;
+        audioContext: AudioContext | null;
+        audioGainNode: GainNode | null;
+    }>;
+
+    remotePlay: Partial<{
+        server: string;
+        titleId?: string;
+    }>;
+
+    pointerServerPort: number;
+}

src/types/stream-stats.d.ts

@@ -18,3 +18,6 @@ type RTCBasicStat = {
     totalDecodeTime: number,
     type: string,
 }
+
+
+type StreamStatGrade = '' | 'bad' | 'ok' | 'good';

src/types/stream.d.ts

@@ -0,0 +1,10 @@
+import type { StreamVideoProcessing, StreamVideoProcessingMode } from "@/enums/pref-values";
+
+type StreamPlayerOptions = {
+    processing: StreamVideoProcessing,
+    processingMode: StreamVideoProcessingMode,
+    sharpness: number,
+    saturation: number,
+    contrast: number,
+    brightness: number,
+};

src/utils/bx-event-bus.ts

@@ -1,4 +1,4 @@
-import type { PrefKey, StorageKey } from "@/enums/pref-keys";
+import type { GlobalPref, StorageKey, StreamPref } from "@/enums/pref-keys";
 import { BX_FLAGS } from "./bx-flags";
 import { BxLogger } from "./bx-logger";
 import { AppInterface } from "./global";
@@ -7,23 +7,21 @@ import type { SpeakerState } from "@/modules/shortcuts/sound-shortcut";
 
 type EventCallback<T = any> = (payload: T) => void;
 
-type ScriptEvents = {
-    'xcloud.server.ready': {};
-    'xcloud.server.unavailable': {};
-
-    'dialog.shown': {},
-    'dialog.dismissed': {},
-
-    'titleInfo.ready': {};
-    'setting.changed': {
-        storageKey: StorageKey;
-        settingKey: PrefKey;
-        settingValue: any;
+export type ScriptEvents = {
+    'xcloud.server': {
+        status: 'ready' | 'unavailable' | 'signed-out',
     };
 
-    'mkb.setting.updated': {};
-    'keyboardShortcuts.updated': {};
-    'deviceVibration.updated': {};
+    'dialog.shown': {};
+    'dialog.dismissed': {};
+
+    'titleInfo.ready': {};
+
+    'setting.changed': {
+        storageKey: Omit<StorageKey, StorageKey.STREAM>;
+        settingKey: GlobalPref;
+        // settingValue: any;
+    };
 
     // GH pages
     'list.forcedNativeMkb.updated': {
@@ -33,22 +31,49 @@ type ScriptEvents = {
     };
 
     'list.localCoOp.updated': {
-        ids: Set<string>,
+        ids: Set<string>;
     };
+
+    'webgpu.ready': {},
+
+    'ui.header.rendered': {},
+    'ui.error.rendered': {},
+
+    'ui.guideHome.rendered': {},
+    'ui.guideAchievementProgress.rendered': {},
+    'ui.guideAchievementDetail.rendered': {},
 };
 
-type StreamEvents = {
+export type StreamEvents = {
     'state.loading': {};
     'state.starting': {};
     'state.playing': { $video?: HTMLVideoElement };
     'state.stopped': {};
-    'state.error': {};
 
-    'gameBar.activated': {},
-    'speaker.state.changed': { state: SpeakerState },
-    'video.visibility.changed': { isVisible: boolean },
+    'xboxTitleId.changed': {
+        id: number;
+    };
+    'gameSettings.switched': {
+        id: number;
+    };
+    'setting.changed': {
+        storageKey: StorageKey.STREAM | `${StorageKey.STREAM}.${number}`;
+        settingKey: StreamPref;
+        // settingValue: any;
+    };
+
+    'mkb.setting.updated': {};
+    'keyboardShortcuts.updated': {};
+    'deviceVibration.updated': {};
+
+    'gameBar.activated': {};
+    'speaker.state.changed': { state: SpeakerState };
+    'video.visibility.changed': { isVisible: boolean };
     // Inside patch
-    'microphone.state.changed': { state: MicrophoneState },
+    'microphone.state.changed': { state: MicrophoneState };
+
+    'ui.streamHud.rendered': { expanded: boolean },
+    'ui.streamMenu.rendered': {},
 
     dataChannelCreated: { dataChannel: RTCDataChannel };
 };
@@ -136,7 +161,7 @@ export class BxEventBus<TEvents extends Record<string, any>> {
             }
         }
 
-        BX_FLAGS.Debug && BxLogger.warning('EventBus', 'emit', event, payload);
+        BX_FLAGS.Debug && BxLogger.warning('EventBus', 'emit', `${this.group}.${event as string}`, payload);
     }
 }
 

src/utils/bx-event.ts

@@ -14,6 +14,7 @@ export namespace BxEvent {
     export const TOUCH_LAYOUT_MANAGER_READY = 'bx-touch-layout-manager-ready';
 
     // Inside app
+    // TODO: Use EventBus
     export const REMOTE_PLAY_READY = 'bx-remote-play-ready';
     export const REMOTE_PLAY_FAILED = 'bx-remote-play-failed';
 

src/utils/bx-exposed.ts

@@ -5,14 +5,14 @@ import { deepClone, STATES } from "@utils/global";
 import { BxLogger } from "./bx-logger";
 import { BX_FLAGS } from "./bx-flags";
 import { NavigationDialogManager } from "@/modules/ui/dialog/navigation-dialog";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
+import { GlobalPref } from "@/enums/pref-keys";
 import { GamePassCloudGallery } from "@/enums/game-pass-gallery";
 import { TouchController } from "@/modules/touch-controller";
 import { NativeMkbMode, TouchControllerMode } from "@/enums/pref-values";
 import { Patcher, type PatchPage } from "@/modules/patcher/patcher";
 import { BxEventBus } from "./bx-event-bus";
 import { FeatureGates } from "./feature-gates";
+import { getGlobalPref } from "./pref-utils";
 import { LocalCoOpManager } from "./local-co-op-manager";
 
 export enum SupportedInputType {
@@ -81,6 +81,14 @@ export const BxExposed = {
             BxLogger.error(LOG_TAG, e);
         }
 
+        // Disable header & footer
+        try {
+            state.uhf.headerMode = 'Off';
+            state.uhf.footerMode = 'Off';
+        } catch (e) {
+            BxLogger.error(LOG_TAG, e);
+        }
+
         // Redirect to /en-US/play if visiting from an unsupported region
         try {
             const xCloud = state.xcloud.authentication.authStatusByStrategy.XCloud;
@@ -107,17 +115,17 @@ export const BxExposed = {
         }
 
         // Remove native MKB support on mobile browsers or by user's choice
-        if (getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.OFF) {
+        if (getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.OFF) {
             supportedInputTypes = supportedInputTypes.filter(i => i !== SupportedInputType.MKB);
         }
 
         titleInfo.details.hasMkbSupport = supportedInputTypes.includes(SupportedInputType.MKB);
 
         if (STATES.userAgent.capabilities.touch) {
-            let touchControllerAvailability = getPref(PrefKey.TOUCH_CONTROLLER_MODE);
+            let touchControllerAvailability = getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE);
 
             // Disable touch control when gamepad found
-            if (touchControllerAvailability !== TouchControllerMode.OFF && getPref(PrefKey.TOUCH_CONTROLLER_AUTO_OFF)) {
+            if (touchControllerAvailability !== TouchControllerMode.OFF && getGlobalPref(GlobalPref.TOUCH_CONTROLLER_AUTO_OFF)) {
                 const gamepads = window.navigator.getGamepads();
                 let gamepadFound = false;
 
@@ -232,8 +240,9 @@ export const BxExposed = {
         Patcher.patchPage(page);
     } : () => {},
 
-    localCoOpManager: LocalCoOpManager.getInstance(),
+    localCoOpManager: isFullVersion() ? LocalCoOpManager.getInstance() : null,
     reactCreateElement: function(...args: any[]) {},
+    reactUseEffect: function(...args: any[]) {},
 
     createReactLocalCoOpIcon: isFullVersion() ? (attrs: any): any => {
         const reactCE = window.BX_EXPOSED.reactCreateElement;
@@ -252,4 +261,9 @@ export const BxExposed = {
             ),
         );
     } : () => {},
+
+    hasCustomTouchControl: TouchController.hasCustomControl,
+    hasCustomNativeMkb: (productId: string) => {
+        return BX_FLAGS.ForceNativeMkbTitles?.includes(productId);
+    }
 };

src/utils/bx-flags.ts

@@ -1,28 +1,5 @@
 import { BxLogger } from "./bx-logger";
 
-export type BxFlags = {
-    Debug: boolean;
-
-    CheckForUpdate: boolean;
-    EnableXcloudLogging: boolean;
-    SafariWorkaround: boolean;
-
-    ForceNativeMkbTitles: string[];
-    FeatureGates: { [key: string]: boolean } | null,
-
-    DeviceInfo: {
-        deviceType: 'android' | 'android-tv' | 'android-handheld' | 'webos' | 'unknown',
-        userAgent?: string,
-
-        androidInfo?: {
-            manufacturer: string,
-            brand: string,
-            board: string,
-            model: string,
-        },
-    }
-}
-
 // Setup flags
 const DEFAULT_FLAGS: BxFlags = {
     Debug: false,
@@ -31,6 +8,8 @@ const DEFAULT_FLAGS: BxFlags = {
     EnableXcloudLogging: false,
     SafariWorkaround: true,
 
+    EnableWebGPURenderer: false,
+
     ForceNativeMkbTitles: [],
     FeatureGates: null,
 

src/utils/bx-icon.ts

@@ -9,6 +9,7 @@ import iconCursorText from "@assets/svg/cursor-text.svg" with { type: "text" };
 import iconDisplay from "@assets/svg/display.svg" with { type: "text" };
 import iconEye from "@assets/svg/eye.svg" with { type: "text" };
 import iconEyeSlash from "@assets/svg/eye-slash.svg" with { type: "text" };
+// import iconGlobalRestore from "@assets/svg/global-restore.svg" with { type: "text" };
 import iconHome from "@assets/svg/home.svg" with { type: "text" };
 import iconLocalCoOp from "@assets/svg/local-co-op.svg" with { type: "text" };
 import iconNativeMkb from "@assets/svg/native-mkb.svg" with { type: "text" };
@@ -52,6 +53,7 @@ export const BxIcon = {
     DISPLAY: iconDisplay,
     EYE: iconEye,
     EYE_SLASH: iconEyeSlash,
+    // GLOBAL_RESTORE: iconGlobalRestore,
     HOME: iconHome,
     LOCAL_CO_OP: iconLocalCoOp,
     NATIVE_MKB: iconNativeMkb,

src/utils/css.ts

@@ -1,20 +1,22 @@
 import { CE } from "@utils/html";
 import { compressCss, isLiteVersion, renderStylus } from "@macros/build" with { type: "macro" };
-import { BlockFeature, UiSection } from "@/enums/pref-values";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
+import { BlockFeature, UiSection, UiTheme } from "@/enums/pref-values";
+import { GlobalPref } from "@/enums/pref-keys";
+import { getGlobalPref } from "./pref-utils";
+import { containsAll } from "./utils";
 
 
 export function addCss() {
     const STYLUS_CSS = renderStylus() as unknown as string;
     let css = STYLUS_CSS;
 
-    const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS);
+    const PREF_HIDE_SECTIONS = getGlobalPref(GlobalPref.UI_HIDE_SECTIONS);
     const selectorToHide = [];
 
     if (isLiteVersion()) {
         // Hide Controller icon in Game tiles
-        selectorToHide.push('div[class*=SupportedInputsBadge] svg:first-of-type');
+        selectorToHide.push('div[role=img][class*=SupportedInputsBadge] svg:first-of-type');
+        selectorToHide.push('div[role=img][class*=SupportedInputsBadge]:not(:has(:nth-child(2)))');
     }
 
     // Hide "News" section
@@ -23,7 +25,7 @@ export function addCss() {
     }
 
     // Hide BYOG section
-    if (getPref(PrefKey.BLOCK_FEATURES).includes(BlockFeature.BYOG)) {
+    if (getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.BYOG) || getGlobalPref(GlobalPref.UI_HIDE_SECTIONS).includes(UiSection.BOYG)) {
         selectorToHide.push('#BodyContent > div[class*=ByogRow-module__container___]');
     }
 
@@ -43,8 +45,23 @@ export function addCss() {
         selectorToHide.push('#BodyContent div[class*=HomePage-module__bottomSpacing]:has(a[href="/play/gallery/touch"])');
     }
 
+    // Hide "Recently added" section
+    if (PREF_HIDE_SECTIONS.includes(UiSection.RECENTLY_ADDED)) {
+        selectorToHide.push('#BodyContent div[class*=HomePage-module__bottomSpacing]:has(a[href="/play/gallery/recently-added"])');
+    }
+
+    // Hide "Genres section"
+    if (PREF_HIDE_SECTIONS.includes(UiSection.GENRES)) {
+        selectorToHide.push('#BodyContent div[class*=HomePage-module__genresRow]');
+    }
+
+    // Hide "GamePassPromo"
+    if (containsAll(PREF_HIDE_SECTIONS, [UiSection.RECENTLY_ADDED, UiSection.LEAVING_SOON, UiSection.GENRES, UiSection.ALL_GAMES])) {
+        selectorToHide.push('#BodyContent div[class*=GamePassPromoSection-module__container]');
+    }
+
    // Hide "Start a party" button in the Guide menu
-    if (getPref(PrefKey.BLOCK_FEATURES).includes(BlockFeature.FRIENDS)) {
+    if (getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.FRIENDS)) {
         selectorToHide.push('#gamepass-dialog-root div[class^=AchievementsPreview-module__container] + button[class*=HomeLandingPage-module__button]');
     }
 
@@ -52,54 +69,73 @@ export function addCss() {
         css += selectorToHide.join(',') + '{ display: none; }';
     }
 
-    // Reduce animations
-    if (getPref(PrefKey.UI_REDUCE_ANIMATIONS)) {
+    // Change site's background
+    if (getGlobalPref(GlobalPref.UI_THEME) === UiTheme.DARK_OLED) {
         css += compressCss(`
-div[class*=GameCard-module__gameTitleInnerWrapper],
-div[class*=GameCard-module__card],
-div[class*=ScrollArrows-module] {
+body[data-theme=dark] {
+    --gds-containerSolidAppBackground: #000 !important;
+}
+
+div[aria-hidden=true][class^=BackgroundImageAbsoluteContainer][class*=ProductDetailPage-module__backgroundImageGradient]:after {
+    background: radial-gradient(ellipse 100% 100% at 50% 0, #1515178c 0, #1a1b1ea6 32%, #000000 100%) !important;
+}
+
+a[href="/play/gallery/all-games"][class*=AllGamesRow-module__seeAllCloudGames] {
+    background: none !important;
+}
+`);
+    }
+
+    // Reduce animations
+    if (getGlobalPref(GlobalPref.UI_REDUCE_ANIMATIONS)) {
+        css += compressCss(`
+/*div[class*=GameCard-module__card],*/
+div[class^=GameCard-module__gameTitleInnerWrapper],
+div[class^=ScrollArrows-module],
+div[class^=ContextMenu-module__][class*=Dropdown-module__dropdownWrapper] {
+    animation: none !important;
     transition: none !important;
 }
 `);
     }
 
     // Hide the top-left dots icon while playing
-    if (getPref(PrefKey.UI_HIDE_SYSTEM_MENU_ICON)) {
+    if (getGlobalPref(GlobalPref.UI_HIDE_SYSTEM_MENU_ICON)) {
         css += compressCss(`
-div[class*=Grip-module__container] {
+#StreamHud div[class^=Grip-module__container] {
     visibility: hidden;
 }
 
 @media (hover: hover) {
-    button[class*=GripHandle-module__container]:hover div[class*=Grip-module__container] {
+    #StreamHud button[class^=GripHandle-module__container]:hover div[class^=Grip-module__container] {
         visibility: visible;
     }
 }
 
-button[class*=GripHandle-module__container][aria-expanded=true] div[class*=Grip-module__container] {
+#StreamHud button[class^=GripHandle-module__container][aria-expanded=true] div[class^=Grip-module__container] {
     visibility: visible;
 }
 
-button[class*=GripHandle-module__container][aria-expanded=false] {
+#StreamHud button[class^=GripHandle-module__container][aria-expanded=false] {
     background-color: transparent !important;
 }
 
-div[class*=StreamHUD-module__buttonsContainer] {
+#StreamHud div[class^=StreamHUD-module__buttonsContainer] {
     padding: 0px !important;
 }
 `);
     }
 
     css += compressCss(`
-div[class*=StreamMenu-module__menu] {
+#game-stream div[class*=StreamMenu-module__menu] {
     min-width: 100vw !important;
 }
 `);
 
     // Simplify Stream's menu
-    if (getPref(PrefKey.UI_SIMPLIFY_STREAM_MENU)) {
+    if (getGlobalPref(GlobalPref.UI_SIMPLIFY_STREAM_MENU)) {
         css += compressCss(`
-div[class*=Menu-module__scrollable] {
+#game-stream div[class*=Menu-module__scrollable] {
     --bxStreamMenuItemSize: 80px;
     --streamMenuItemSize: calc(var(--bxStreamMenuItemSize) + 40px) !important;
 }
@@ -112,18 +148,18 @@ body[data-media-type=tv] .bx-badges {
     top: calc(var(--streamMenuItemSize) - 10px) !important;
 }
 
-button[class*=MenuItem-module__container] {
+#game-stream button[class*=MenuItem-module__container] {
     min-width: auto !important;
     min-height: auto !important;
     width: var(--bxStreamMenuItemSize) !important;
     height: var(--bxStreamMenuItemSize) !important;
 }
 
-div[class*=MenuItem-module__label] {
+#game-stream div[class*=MenuItem-module__label] {
     display: none !important;
 }
 
-svg[class*=MenuItem-module__icon] {
+#game-stream svg[class*=MenuItem-module__icon] {
     width: 36px;
     height: 100% !important;
     padding: 0 !important;
@@ -157,7 +193,7 @@ body:not([data-media-type=tv]) div[class*=MenuItem-module__label] {
     }
 
     // Hide scrollbar
-    if (getPref(PrefKey.UI_SCROLLBAR_HIDE)) {
+    if (getGlobalPref(GlobalPref.UI_SCROLLBAR_HIDE)) {
         css += compressCss(`
 html {
     scrollbar-width: none;

src/utils/feature-gates.ts

@@ -1,7 +1,7 @@
-import { PrefKey } from "@/enums/pref-keys";
+import { GlobalPref } from "@/enums/pref-keys";
 import { BX_FLAGS } from "./bx-flags";
-import { getPref } from "./settings-storages/global-settings-storage";
 import { BlockFeature, NativeMkbMode } from "@/enums/pref-values";
+import { getGlobalPref } from "./pref-utils";
 
 export let FeatureGates: { [key: string]: boolean } = {
     PwaPrompt: false,
@@ -9,16 +9,19 @@ export let FeatureGates: { [key: string]: boolean } = {
     EnableUpdateRequiredPage: false,
     ShowForcedUpdateScreen: false,
     EnableTakControlResizing: true,  // Experimenting
+    EnableLazyLoadedHome: false,
+    EnableRemotePlay: !getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.REMOTE_PLAY),
+    EnableConsoles: !getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.REMOTE_PLAY),
 };
 
 // Enable Native Mouse & Keyboard
-const nativeMkbMode = getPref(PrefKey.NATIVE_MKB_MODE);
+const nativeMkbMode = getGlobalPref(GlobalPref.NATIVE_MKB_MODE);
 if (nativeMkbMode !== NativeMkbMode.DEFAULT) {
     FeatureGates.EnableMouseAndKeyboard = nativeMkbMode === NativeMkbMode.ON;
 }
 
 // Disable chat feature
-const blockFeatures = getPref(PrefKey.BLOCK_FEATURES);
+const blockFeatures = getGlobalPref(GlobalPref.BLOCK_FEATURES);
 if (blockFeatures.includes(BlockFeature.CHAT)) {
     FeatureGates.EnableGuideChatTab = false;
 }

src/utils/gamepad.ts

@@ -2,21 +2,27 @@ import { VIRTUAL_GAMEPAD_ID } from "@modules/mkb/mkb-handler";
 import { t } from "@utils/translation";
 import { Toast } from "@utils/toast";
 import { BxLogger } from "@utils/bx-logger";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
-import { GamepadKeyName, type GamepadKey } from "@/enums/gamepad";
+import { GamepadKey, GamepadKeyName } from "@/enums/gamepad";
+import { getStreamPref } from "@/utils/pref-utils";
+import { StreamPref } from "@/enums/pref-keys";
+
 
 // Show a toast when connecting/disconecting controller
 export function showGamepadToast(gamepad: Gamepad) {
-    // Don't show Toast for virtual controller
+    // Don't show toast for virtual controller
     if (gamepad.id === VIRTUAL_GAMEPAD_ID) {
         return;
     }
 
+    // Don't show toast when toggling local co-op feature
+    if ((gamepad as any)._noToast) {
+        return;
+    }
+
     BxLogger.info('Gamepad', gamepad);
     let text = '🎮';
 
-    if (getPref(PrefKey.LOCAL_CO_OP_ENABLED)) {
+    if (getStreamPref(StreamPref.LOCAL_CO_OP_ENABLED)) {
         text += ` #${gamepad.index + 1}`;
     }
 
@@ -35,6 +41,10 @@ export function showGamepadToast(gamepad: Gamepad) {
     Toast.show(text, status, { instant: false });
 }
 
+export function simplifyGamepadName(name: string) {
+    return name.replace(/\s+\(.*Vendor: ([0-9a-f]{4}) Product: ([0-9a-f]{4})\)$/, ' ($1-$2)');
+}
+
 export function getUniqueGamepadNames() {
     const gamepads = window.navigator.getGamepads();
     const names: string[] = [];
@@ -59,9 +69,9 @@ export function hasGamepad() {
     return false;
 }
 
-export function generateVirtualControllerMapping(override: {}={}) {
+export function generateVirtualControllerMapping(index: number, override: Partial<XcloudGamepad>={}) {
     const mapping = {
-        GamepadIndex: 0,
+        GamepadIndex: index,
         A: 0,
         B: 0,
         X: 0,
@@ -95,3 +105,44 @@ export function generateVirtualControllerMapping(override: {}={}) {
 export function getGamepadPrompt(gamepadKey: GamepadKey): string {
     return GamepadKeyName[gamepadKey][1];
 }
+
+const XCLOUD_GAMEPAD_KEY_MAPPING: { [key in GamepadKey]?: keyof XcloudGamepad } = {
+    [GamepadKey.A]: 'A',
+    [GamepadKey.B]: 'B',
+    [GamepadKey.X]: 'X',
+    [GamepadKey.Y]: 'Y',
+
+    [GamepadKey.UP]: 'DPadUp',
+    [GamepadKey.RIGHT]: 'DPadRight',
+    [GamepadKey.DOWN]: 'DPadDown',
+    [GamepadKey.LEFT]: 'DPadLeft',
+
+    [GamepadKey.LB]: 'LeftShoulder',
+    [GamepadKey.RB]: 'RightShoulder',
+    [GamepadKey.LT]: 'LeftTrigger',
+    [GamepadKey.RT]: 'RightTrigger',
+
+    [GamepadKey.L3]: 'LeftThumb',
+    [GamepadKey.R3]: 'RightThumb',
+    [GamepadKey.LS]: 'LeftStickAxes',
+    [GamepadKey.RS]: 'RightStickAxes',
+
+    [GamepadKey.SELECT]: 'View',
+    [GamepadKey.START]: 'Menu',
+    [GamepadKey.HOME]: 'Nexus',
+    [GamepadKey.SHARE]: 'Share',
+
+    [GamepadKey.LS_LEFT]: 'LeftThumbXAxis',
+    [GamepadKey.LS_RIGHT]: 'LeftThumbXAxis',
+    [GamepadKey.LS_UP]: 'LeftThumbYAxis',
+    [GamepadKey.LS_DOWN]: 'LeftThumbYAxis',
+
+    [GamepadKey.RS_LEFT]: 'RightThumbXAxis',
+    [GamepadKey.RS_RIGHT]: 'RightThumbXAxis',
+    [GamepadKey.RS_UP]: 'RightThumbYAxis',
+    [GamepadKey.RS_DOWN]: 'RightThumbYAxis',
+};
+
+export function toXcloudGamepadKey(gamepadKey: GamepadKey) {
+    return XCLOUD_GAMEPAD_KEY_MAPPING[gamepadKey];
+}

src/utils/gh-pages.ts

@@ -4,11 +4,6 @@ import { BxLogger } from "./bx-logger";
 import { BxEventBus } from "./bx-event-bus";
 
 
-export type ForceNativeMkbResponse = {
-    $schemaVersion: number;
-    data: { [key: string]: string };
-}
-
 export class GhPagesUtils {
     static fetchLatestCommit() {
         const url = 'https://api.github.com/repos/redphx/better-xcloud/branches/gh-pages';

src/utils/global.ts

@@ -1,4 +1,4 @@
-import type { BaseSettingsStore } from "./settings-storages/base-settings-storage";
+import type { BxStates } from "@/types/states";
 import { UserAgent } from "./user-agent";
 
 export const SCRIPT_VERSION = Bun.env.SCRIPT_VERSION!;
@@ -47,8 +47,6 @@ export const STATES: BxStates = {
     pointerServerPort: 9269,
 };
 
-export const STORAGE: { [key: string]: BaseSettingsStore } = {};
-
 export function deepClone(obj: any): typeof obj | {} {
     if (!obj) {
         return {};

src/utils/history.ts

@@ -1,7 +1,5 @@
 import { BxEvent } from "@utils/bx-event";
 import { LoadingScreen } from "@modules/loading-screen";
-import { RemotePlayManager } from "@/modules/remote-play-manager";
-import { HeaderSection } from "@/modules/ui/header";
 import { BxEventBus } from "./bx-event-bus";
 import { NavigationDialogManager } from "@/modules/ui/dialog/navigation-dialog";
 
@@ -25,13 +23,9 @@ export function onHistoryChanged(e: PopStateEvent) {
         return;
     }
 
-    window.setTimeout(RemotePlayManager.detect, 10);
-
     // Hide Navigation dialog
     NavigationDialogManager.getInstance().hide();
 
     LoadingScreen.reset();
-    window.setTimeout(HeaderSection.watchHeader, 2000);
-
     BxEventBus.Stream.emit('state.stopped', {});
 }

src/utils/html.ts

@@ -4,6 +4,7 @@ import type { NavigationNearbyElements } from "@/modules/ui/dialog/navigation-di
 import type { PresetRecord, AllPresets } from "@/types/presets";
 import { t } from "./translation";
 import type { BxSelectElement } from "@/web-components/bx-select";
+import type { AnyPref } from "@/enums/pref-keys";
 
 export enum ButtonStyle {
     PRIMARY = 1,
@@ -57,6 +58,8 @@ export type SettingsRowOptions = Partial<{
     icon: BxIconRaw,
     multiLines: boolean;
     $note: HTMLElement;
+    onContextMenu: (e?: Event) => {};
+    pref: AnyPref,
 }>;
 
 // Quickly create a tree of elements without having to use innerHTML
@@ -206,10 +209,12 @@ export function createButton<T=HTMLButtonElement>(options: BxButtonOptions): T {
     return $btn as T;
 }
 
-export function createSettingRow(label: string, $control: HTMLElement | false | undefined, options: SettingsRowOptions={}) {
+export function createSettingRow(label: string, $control: HTMLElement | false | null | undefined, options: SettingsRowOptions={}) {
     let $label: HTMLElement;
 
-    const $row = CE('label', { class: 'bx-settings-row' },
+    const $row = CE('label', {
+            class: 'bx-settings-row',
+        },
         $label = CE('span', { class: 'bx-settings-label' },
             options.icon && createSvgIcon(options.icon),
             label,
@@ -218,6 +223,14 @@ export function createSettingRow(label: string, $control: HTMLElement | false |
         $control,
     );
 
+    if (options.pref) {
+        ($row as any).prefKey = options.pref;
+    }
+
+    if (options.onContextMenu) {
+        $row.addEventListener('contextmenu', options.onContextMenu);
+    }
+
     // Make link inside <label> focusable
     const $link = $label.querySelector('a');
     if ($link) {

src/utils/local-db/controller-settings-table.ts

@@ -1,40 +0,0 @@
-import { BaseLocalTable } from "./base-table";
-import { LocalDb } from "./local-db";
-import { ControllerShortcutDefaultId } from "./controller-shortcuts-table";
-import { deepClone } from "../global";
-import { ControllerCustomizationDefaultPresetId } from "./controller-customizations-table";
-
-export class ControllerSettingsTable extends BaseLocalTable<ControllerSettingsRecord> {
-    private static instance: ControllerSettingsTable;
-    public static getInstance = () => ControllerSettingsTable.instance ?? (ControllerSettingsTable.instance = new ControllerSettingsTable(LocalDb.TABLE_CONTROLLER_SETTINGS));
-
-    static readonly DEFAULT_DATA: ControllerSettingsRecord['data'] = {
-        shortcutPresetId: ControllerShortcutDefaultId.DEFAULT,
-        customizationPresetId: ControllerCustomizationDefaultPresetId.DEFAULT,
-    };
-
-    async getControllerData(id: string): Promise<ControllerSettingsRecord['data']> {
-        const setting = await this.get(id);
-        if (!setting) {
-            return deepClone(ControllerSettingsTable.DEFAULT_DATA);
-        }
-
-        return setting.data;
-    }
-
-    async getControllersData() {
-        const all = await this.getAll();
-        const results:  { [key: string]: ControllerSettingsRecord['data'] } = {};
-
-        for (const key in all) {
-            if (!all[key]) {
-                continue;
-            }
-
-            const settings = Object.assign(all[key].data, ControllerSettingsTable.DEFAULT_DATA);
-            results[key] = settings;
-        }
-
-        return results;
-    }
-}

src/utils/local-db/mkb-mapping-presets-table.ts

@@ -46,7 +46,7 @@ export class MkbMappingPresetsTable extends BasePresetsTable<MkbPresetRecord> {
                     [GamepadKey.A]: ['Space', 'KeyE'],
                     [GamepadKey.X]: ['KeyR'],
                     [GamepadKey.B]: ['KeyC', 'Backspace'],
-                    [GamepadKey.Y]: ['KeyE'],
+                    [GamepadKey.Y]: ['KeyV'],
 
                     [GamepadKey.START]: ['Enter'],
                     [GamepadKey.SELECT]: ['Tab'],

src/utils/monkey-patches.ts

@@ -2,15 +2,16 @@ import { BxEvent } from "@utils/bx-event";
 import { STATES } from "@utils/global";
 import { BxLogger } from "@utils/bx-logger";
 import { patchSdpBitrate, setCodecPreferences } from "./sdp";
-import { StreamPlayer, type StreamPlayerOptions } from "@/modules/stream-player";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref, getPrefDefinition } from "./settings-storages/global-settings-storage";
+import { StreamPlayerManager } from "@/modules/stream-player-manager";
+import { GlobalPref, StreamPref } from "@/enums/pref-keys";
 import { CodecProfile } from "@/enums/pref-values";
 import type { SettingDefinition } from "@/types/setting-definition";
 import { BxEventBus } from "./bx-event-bus";
+import { getGlobalPref, getGlobalPrefDefinition, getStreamPref } from "@/utils/pref-utils";
+import type { StreamPlayerOptions } from "@/types/stream";
 
 export function patchVideoApi() {
-    const PREF_SKIP_SPLASH_VIDEO = getPref(PrefKey.UI_SKIP_SPLASH_VIDEO);
+    const PREF_SKIP_SPLASH_VIDEO = getGlobalPref(GlobalPref.UI_SKIP_SPLASH_VIDEO);
 
     // Show video player when it's ready
     const showFunc = function(this: HTMLVideoElement) {
@@ -20,13 +21,20 @@ export function patchVideoApi() {
         }
 
         const playerOptions = {
-            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),
+            processingMode: getStreamPref(StreamPref.VIDEO_PROCESSING_MODE),
+            sharpness: getStreamPref(StreamPref.VIDEO_SHARPNESS),
+            saturation: getStreamPref(StreamPref.VIDEO_SATURATION),
+            contrast: getStreamPref(StreamPref.VIDEO_CONTRAST),
+            brightness: getStreamPref(StreamPref.VIDEO_BRIGHTNESS),
         } satisfies StreamPlayerOptions;
-        STATES.currentStream.streamPlayer = new StreamPlayer(this, getPref(PrefKey.VIDEO_PLAYER_TYPE), playerOptions);
+
+        const streamPlayerManager= StreamPlayerManager.getInstance();
+        streamPlayerManager.setVideoElement(this);
+        streamPlayerManager.updateOptions(playerOptions, false);
+        streamPlayerManager.switchPlayerType(getStreamPref(StreamPref.VIDEO_PLAYER_TYPE));
+
+        STATES.currentStream.streamPlayerManager = streamPlayerManager;
 
         BxEventBus.Stream.emit('state.playing', {
             $video: this,
@@ -48,9 +56,9 @@ export function patchVideoApi() {
             return nativePlay.apply(this);
         }
 
-        const $parent = this.parentElement!!;
+        const $parent = this.parentElement;
         // Video tag is stream player
-        if (!this.src && $parent.dataset.testid === 'media-container') {
+        if (!this.src && $parent?.dataset.testid === 'media-container') {
             this.addEventListener('loadedmetadata', showFunc, { once: true });
         }
 
@@ -60,7 +68,7 @@ export function patchVideoApi() {
 
 
 export function patchRtcCodecs() {
-    const codecProfile = getPref(PrefKey.STREAM_CODEC_PROFILE);
+    const codecProfile = getGlobalPref(GlobalPref.STREAM_CODEC_PROFILE);
     if (codecProfile === 'default') {
         return;
     }
@@ -80,9 +88,9 @@ export function patchRtcPeerConnection() {
         return dataChannel;
     }
 
-    const maxVideoBitrateDef = getPrefDefinition(PrefKey.STREAM_MAX_VIDEO_BITRATE) as Extract<SettingDefinition, { min: number }>;
-    const maxVideoBitrate = getPref(PrefKey.STREAM_MAX_VIDEO_BITRATE);
-    const codec = getPref(PrefKey.STREAM_CODEC_PROFILE);
+    const maxVideoBitrateDef = getGlobalPrefDefinition(GlobalPref.STREAM_MAX_VIDEO_BITRATE) as Extract<SettingDefinition, { min: number }>;
+    const maxVideoBitrate = getGlobalPref(GlobalPref.STREAM_MAX_VIDEO_BITRATE);
+    const codec = getGlobalPref(GlobalPref.STREAM_CODEC_PROFILE);
 
     if (codec !== CodecProfile.DEFAULT || maxVideoBitrate < maxVideoBitrateDef.max) {
         const nativeSetLocalDescription = RTCPeerConnection.prototype.setLocalDescription;
@@ -113,8 +121,8 @@ export function patchRtcPeerConnection() {
         STATES.currentStream.peerConnection = conn;
 
         conn.addEventListener('connectionstatechange', e => {
-                BxLogger.info('connectionstatechange', conn.connectionState);
-            });
+            BxLogger.info('connectionstatechange', conn.connectionState);
+        });
         return conn;
     }
 }
@@ -134,7 +142,7 @@ export function patchAudioContext() {
 
         ctx.createGain = function() {
             const gainNode = nativeCreateGain.apply(this);
-            gainNode.gain.value = getPref(PrefKey.AUDIO_VOLUME) / 100;
+            gainNode.gain.value = getStreamPref(StreamPref.AUDIO_VOLUME) / 100;
 
             STATES.currentStream.audioGainNode = gainNode;
             return gainNode;
@@ -231,6 +239,7 @@ export function patchCanvasContext() {
             }
         }
 
+        // @ts-ignore
         return nativeGetContext.apply(this, [contextType, contextAttributes]);
     }
 }

src/utils/network.ts

@@ -8,11 +8,10 @@ import { FeatureGates } from "./feature-gates";
 import { BxLogger } from "./bx-logger";
 import { XhomeInterceptor } from "./xhome-interceptor";
 import { XcloudInterceptor } from "./xcloud-interceptor";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
-import type { RemotePlayConsoleAddresses } from "@/types/network";
+import { GlobalPref } from "@/enums/pref-keys";
 import { BlockFeature, StreamResolution } from "@/enums/pref-values";
 import { blockAllNotifications } from "./utils";
+import { getGlobalPref } from "./pref-utils";
 
 type RequestType = 'xcloud' | 'xhome';
 
@@ -50,8 +49,11 @@ function updateIceCandidates(candidates: any, options: { preferIpv6Server: boole
             continue;
         }
 
-        const groups: { [index: string]: string | number } = pattern.exec(item.candidate)!.groups!;
-        lst.push(groups);
+        const match = pattern.exec(item.candidate);
+        if (match && match.groups) {
+            const groups: { [index: string]: string | number } = match.groups;
+            lst.push(groups);
+        }
     }
 
     if (options.preferIpv6Server) {
@@ -107,7 +109,7 @@ export async function patchIceCandidates(request: Request, consoleAddrs?: Remote
     }
 
     const options = {
-        preferIpv6Server: getPref(PrefKey.SERVER_PREFER_IPV6),
+        preferIpv6Server: getGlobalPref(GlobalPref.SERVER_PREFER_IPV6),
         consoleAddrs: consoleAddrs,
     };
 
@@ -125,7 +127,7 @@ export async function patchIceCandidates(request: Request, consoleAddrs?: Remote
 
 export function interceptHttpRequests() {
     let BLOCKED_URLS: string[] = [];
-    if (getPref(PrefKey.BLOCK_TRACKING)) {
+    if (getGlobalPref(GlobalPref.BLOCK_TRACKING)) {
         // Clear Applications Insight buffers
         clearAllLogs();
 
@@ -141,7 +143,7 @@ export function interceptHttpRequests() {
 
     // 'https://notificationinbox.xboxlive.com',
     // 'https://accounts.xboxlive.com/family/memberXuid',
-    const blockFeatures = getPref(PrefKey.BLOCK_FEATURES);
+    const blockFeatures = getGlobalPref(GlobalPref.BLOCK_FEATURES);
     if (blockFeatures.includes(BlockFeature.CHAT)) {
         BLOCKED_URLS.push(
             'https://xblmessaging.xboxlive.com/network/xbox/users/me/inbox',
@@ -221,8 +223,12 @@ export function interceptHttpRequests() {
         }
 
         // Ignore domains
-        const domain = (new URL(url)).hostname;
-        if (IGNORED_DOMAINS.includes(domain)) {
+        try {
+            const domain = (new URL(url)).hostname;
+            if (IGNORED_DOMAINS.includes(domain)) {
+                return NATIVE_FETCH(request, init);
+            }
+        } catch (e) {
             return NATIVE_FETCH(request, init);
         }
 
@@ -291,7 +297,7 @@ export function interceptHttpRequests() {
         }
 
         let requestType: RequestType;
-        if (url.includes('/sessions/home') || url.includes('xhome.') || (STATES.remotePlay.isPlaying && url.endsWith('/inputconfigs'))) {
+        if (url.includes('/sessions/home') || url.includes('xhome.') || (window.location.pathname.includes('/play/consoles/launch/') && url.endsWith('/inputconfigs'))) {
             requestType = 'xhome';
         } else {
             requestType = 'xcloud';

src/utils/pref-utils.ts

@@ -0,0 +1,84 @@
+import { ALL_PREFS, GlobalPref, StorageKey, StreamPref, type AnyPref } from "@/enums/pref-keys";
+import type { PrefInfo, SettingActionOrigin } from "@/types/setting-definition";
+import { GlobalSettingsStorage } from "./settings-storages/global-settings-storage";
+import { StreamSettingsStorage } from "./settings-storages/stream-settings-storage";
+
+// Migrate Stream settings in Global storage to Stream storage
+function migrateStreamSettings() {
+    const storage = window.localStorage;
+    const globalSettings = JSON.parse(storage.getItem(StorageKey.GLOBAL) || '{}');
+    const streamSettings = JSON.parse(storage.getItem(StorageKey.STREAM) || '{}');
+    let modified = false;
+    for (const key in globalSettings) {
+        if (isStreamPref(key as AnyPref)) {
+            // Migration
+            if (!streamSettings.hasOwnProperty(key)) {
+                streamSettings[key] = globalSettings[key];
+            }
+            delete globalSettings[key];
+            modified = true;
+        }
+    }
+
+    if (modified) {
+        storage.setItem(StorageKey.GLOBAL, JSON.stringify(globalSettings));
+        storage.setItem(StorageKey.STREAM, JSON.stringify(streamSettings));
+    }
+}
+
+migrateStreamSettings();
+export const STORAGE = {
+    Global: new GlobalSettingsStorage(),
+    Stream: new StreamSettingsStorage(),
+};
+
+const streamSettingsStorage = STORAGE.Stream;
+export const getStreamPrefDefinition = streamSettingsStorage.getDefinition.bind(streamSettingsStorage);
+export const getStreamPref = streamSettingsStorage.getSetting.bind(streamSettingsStorage);
+export const setStreamPref = streamSettingsStorage.setSetting.bind(streamSettingsStorage);
+export const getGamePref = streamSettingsStorage.getSettingByGame.bind(streamSettingsStorage);
+export const setGamePref = streamSettingsStorage.setSettingByGame.bind(streamSettingsStorage);
+export const setGameIdPref = streamSettingsStorage.setGameId.bind(streamSettingsStorage);
+export const hasGamePref = streamSettingsStorage.hasGameSetting.bind(streamSettingsStorage);
+STORAGE.Stream = streamSettingsStorage;
+
+const globalSettingsStorage = STORAGE.Global;
+export const getGlobalPrefDefinition = globalSettingsStorage.getDefinition.bind(globalSettingsStorage);
+export const getGlobalPref = globalSettingsStorage.getSetting.bind(globalSettingsStorage);
+export const setGlobalPref = globalSettingsStorage.setSetting.bind(globalSettingsStorage);
+
+
+export function isGlobalPref(prefKey: AnyPref): prefKey is GlobalPref {
+    return ALL_PREFS.global.includes(prefKey as GlobalPref);
+}
+
+export function isStreamPref(prefKey: AnyPref): prefKey is StreamPref {
+    return ALL_PREFS.stream.includes(prefKey as StreamPref);
+}
+
+export function getPrefInfo(prefKey: AnyPref): PrefInfo {
+    if (isGlobalPref(prefKey)) {
+        return {
+            storage: STORAGE.Global,
+            definition: getGlobalPrefDefinition(prefKey as GlobalPref),
+            // value: getGlobalPref(prefKey as GlobalPref),
+        }
+    } else if (isStreamPref(prefKey)) {
+        return {
+            storage: STORAGE.Stream,
+            definition: getStreamPrefDefinition(prefKey as StreamPref),
+            // value: getStreamPref(prefKey as StreamPref),
+        }
+    }
+
+    alert('Missing pref definition: ' + prefKey);
+    return {} as PrefInfo;
+}
+
+export function setPref(prefKey: AnyPref, value: any, origin: SettingActionOrigin) {
+    if (isGlobalPref(prefKey)) {
+        setGlobalPref(prefKey as GlobalPref, value, origin);
+    } else if (isStreamPref(prefKey)) {
+        setStreamPref(prefKey as StreamPref, value, origin);
+    }
+}