Bump version to 6.6.2

Fix "ignoreNewsSection" patch
Fix "patchPollGamepads" patch
2025-06-06 23:57:19 +02:00 · 2025-06-06 07:30:46 +07:00 · 2025-06-06 07:29:53 +07:00 · 2025-06-06 07:27:34 +07:00 · 2025-06-06 07:25:11 +07:00 · 2025-05-31 11:30:21 +07:00
72 changed files with 2987 additions and 2315 deletions
--- a/.github/workflows/stale.yaml
+++ b/.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'
--- a/build.sh
+++ b/build.sh
@ -5,8 +5,8 @@ build_all () {
    printf "\033c"

    # Build all variants
-    bun build.ts --version $1 --variant full --meta
    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
--- a/bun.lock
+++ b/bun.lock
@ -3,10 +3,11 @@
  "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.10.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-gFHJ+xBOo4G3WRlR1e/3G8A6/KZAH6zcE/hkLRCZTi/B9avAG365QhFA8uOGzTMqgTghpn7/fSnscW++dpMSAw=="],
+    "@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.19.0", "", {}, "sha512-rbq9/g38qjfqFLOVPvwjIvFFdNziEC5S65jmjPw5r6A//QH+W91akh9irMwjDN8zKUTak6W9EsAv4m/7Wnw0UQ=="],
+    "@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.5", "", { "dependencies": { "@eslint/core": "^0.10.0", "levn": "^0.4.1" } }, "sha512-lB05FkqEdUg2AA0xEbUz0SnkXT1LcCTa438W4IWTUh4hdOnVbQyOJ81OrDXsJk/LSiJHubgGEFoR5EHq1NsH1A=="],
+    "@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.2.0", "", { "dependencies": { "bun-types": "1.2.0" } }, "sha512-5N1JqdahfpBlAv4wy6svEYcd/YfO2GNrbL95JOmFx8nkE6dbK4R0oSE5SpBA4vBRqgrOUAXF8Dpiz+gi7r80SA=="],
+    "@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.10", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-X47y/mPNzxviAGY5TcYPtYL8JsY3kAq2n8fMmKoRCxq/c4v4pyGNCzM2R6+M5/umG4ZfHuT+sgqDYqWc9rJ6ww=="],
+    "@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.2.0", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-KEaJxyZfbV/c4eyG0vyehDpYmBGreNiQbZIqvVHJwZ4BmeuWlNZ7EAzMN2Zcd7ailmS/tGVW0BgYbGf+lGEpWw=="],
+    "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.19.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.19.0", "@eslint/core": "^0.10.0", "@eslint/eslintrc": "^3.2.0", "@eslint/js": "9.19.0", "@eslint/plugin-kit": "^0.2.5", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.1", "@types/estree": "^1.0.6", "@types/json-schema": "^7.0.15", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.2.0", "eslint-visitor-keys": "^4.2.0", "espree": "^10.3.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-ug92j0LepKlbbEv6hD911THhoRHmbdXt2gX+VDABAW/Ir7D3nqKdv5Pf5vtlyY6HQMTEP2skXY43ueqTCWssEA=="],
+    "eslint": ["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,8 +279,6 @@

    "@types/stylus/@types/node": ["@types/node@22.5.5", "", { "dependencies": { "undici-types": "~6.19.2" } }, "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA=="],

-    "@types/ws/@types/node": ["@types/node@20.14.2", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q=="],
-
    "ast-metadata-inferer/@mdn/browser-compat-data": ["@mdn/browser-compat-data@5.6.26", "", {}, "sha512-7NdgdOR7lkzrN70zGSULmrcvKyi/aJjpTJRCbuy8IZuHiLkPTvsr10jW0MJgWzK2l2wTmhdQvegTw6yNU5AVNQ=="],

    "foreground-child/cross-spawn": ["cross-spawn@7.0.3", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w=="],
@ -298,8 +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=="],
-
    "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=="],
--- a/dist/better-xcloud.meta.js
+++ b/dist/better-xcloud.meta.js
@ -1,5 +1,5 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      6.3.0
+// @version      6.6.2
 // ==/UserScript==
--- a/dist/better-xcloud.pretty.user.js
+++ b/dist/better-xcloud.pretty.user.js
--- a/dist/better-xcloud.user.js
+++ b/dist/better-xcloud.user.js
--- a/package.json
+++ b/package.json
@ -10,10 +10,11 @@
    "build": "build.ts"
  },
  "devDependencies": {
-    "@types/bun": "^1.2.0",
-    "@types/node": "^22.10.10",
+    "@types/bun": "^1.2.15",
+    "@types/node": "^22.15.24",
    "@types/stylus": "^0.48.43",
-    "eslint": "^9.19.0",
+    "@webgpu/types": "^0.1.61",
+    "eslint": "^9.27.0",
    "eslint-plugin-compat": "^6.0.2",
    "stylus": "^0.64.0"
  },
--- a/scripts/custom-flags.user.js
+++ b/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:
--- a/src/assets/css/root.styl
+++ b/src/assets/css/root.styl
@ -51,7 +51,7 @@ button_color(name, normal, hover, active, disabled)
 }

 /* 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 {
--- a/src/assets/css/settings-dialog.styl
+++ b/src/assets/css/settings-dialog.styl
@ -155,7 +155,6 @@
    display: flex;
    gap: 10px;
    padding: 16px 10px;
-    margin: 0;
    background: #2a2a2a;
    border-bottom: 1px solid #343434;

@ -203,6 +202,10 @@
            }
        }
    }
+
+    &.bx-settings-important-row {
+        background: #733b00;
+    }
 }

 .bx-settings-dialog-note {
@ -305,6 +308,7 @@
            border-left: 4px solid orange !important;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
+            padding-left: 6px !important;
        }
    }
 }
--- a/src/assets/css/stream.styl
+++ b/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;
 }

--- a/src/assets/header_script.txt
+++ b/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
--- a/src/enums/game-pass-gallery.ts
+++ b/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',
 }
--- a/src/enums/pref-keys.ts
+++ b/src/enums/pref-keys.ts
@ -1,5 +1,5 @@
 import type { BaseSettingsStorage } from "@/utils/settings-storages/base-settings-storage";
-import type { BlockFeature, CodecProfile, DeviceVibrationMode, GameBarPosition, LoadingScreenRocket, NativeMkbMode, StreamPlayerType, StreamResolution, StreamStat, StreamStatPosition, StreamVideoProcessing, TouchControllerMode, TouchControllerStyleCustom, TouchControllerStyleStandard, UiLayout, UiSection, VideoPosition, VideoPowerPreference, VideoRatio } from "./pref-values"
+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',
@ -74,11 +74,11 @@ export const enum GlobalPref {
    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_ENABLED = 'xhome.enabled',
    REMOTE_PLAY_STREAM_RESOLUTION = 'xhome.video.resolution',

    GAME_FORTNITE_FORCE_CONSOLE = 'game.fortnite.forceConsole',
@ -98,7 +98,6 @@ export type GlobalPrefTypeMap = {
    [GlobalPref.MKB_HIDE_IDLE_CURSOR]: boolean;
    [GlobalPref.NATIVE_MKB_FORCED_GAMES]: string[];
    [GlobalPref.NATIVE_MKB_MODE]: NativeMkbMode;
-    [GlobalPref.REMOTE_PLAY_ENABLED]: boolean;
    [GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION]: StreamResolution;
    [GlobalPref.SCREENSHOT_APPLY_FILTERS]: boolean;
    [GlobalPref.SERVER_BYPASS_RESTRICTION]: string;
@ -126,6 +125,7 @@ export type GlobalPrefTypeMap = {
    [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;
@ -156,6 +156,7 @@ export const enum StreamPref {
    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',
@ -205,6 +206,7 @@ export type StreamPrefTypeMap = {
    [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;
@ -230,7 +232,6 @@ export const ALL_PREFS: {
        GlobalPref.MKB_HIDE_IDLE_CURSOR,
        GlobalPref.NATIVE_MKB_FORCED_GAMES,
        GlobalPref.NATIVE_MKB_MODE,
-        GlobalPref.REMOTE_PLAY_ENABLED,
        GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION,
        GlobalPref.SCREENSHOT_APPLY_FILTERS,
        GlobalPref.SERVER_BYPASS_RESTRICTION,
@ -258,6 +259,7 @@ export const ALL_PREFS: {
        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,
@ -294,6 +296,7 @@ export const ALL_PREFS: {
        StreamPref.VIDEO_POSITION,
        StreamPref.VIDEO_POWER_PREFERENCE,
        StreamPref.VIDEO_PROCESSING,
+        StreamPref.VIDEO_PROCESSING_MODE,
        StreamPref.VIDEO_RATIO,
        StreamPref.VIDEO_SATURATION,
        StreamPref.VIDEO_SHARPNESS,
--- a/src/enums/pref-values.ts
+++ b/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',
 }
--- a/src/index.ts
+++ b/src/index.ts
@ -33,12 +33,9 @@ import { GameTile } from "./modules/ui/game-tile";
 import { ProductDetailsPage } from "./modules/ui/product-details";
 import { NavigationDialogManager } from "./modules/ui/dialog/navigation-dialog";
 import { GlobalPref, StreamPref } from "./enums/pref-keys";
-import { SettingsDialog } from "./modules/ui/dialog/settings-dialog";
-import { StreamUiHandler } from "./modules/stream/stream-ui";
 import { UserAgent } from "./utils/user-agent";
 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";
@ -47,6 +44,9 @@ 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();

@ -147,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(() => {
@ -173,7 +179,7 @@ document.addEventListener('readystatechange', e => {
        }
    } 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
@ -197,26 +203,14 @@ 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';
    }
@ -246,7 +240,6 @@ BxEventBus.Stream.on('state.playing', payload => {
    }

    STATES.isPlaying = true;
-    StreamUiHandler.observe();

    if (isFullVersion()) {
        const gameBar = GameBar.getInstance();
@ -270,14 +263,42 @@ BxEventBus.Stream.on('state.playing', payload => {
        }
    }

-
    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') {
@ -308,7 +329,7 @@ BxEventBus.Stream.on('dataChannelCreated', payload => {
        let newId: number = parseInt(json.titleid, 16);

        // Get titleSlug for Remote Play
-        if (STATES.remotePlay.isPlaying) {
+        if (window.location.pathname.includes('/play/consoles/launch/')) {
            currentStream.titleSlug = 'remote-play';
            if (json.focused) {
                const productTitle = await XboxApi.getProductTitle(newId);
@ -337,6 +358,7 @@ function unload() {
        return;
    }

+    BxLogger.warning('Unloading');
    if (isFullVersion()) {
        KeyboardShortcutHandler.getInstance().stop();

@ -348,7 +370,7 @@ function unload() {
    }

    // Destroy StreamPlayer
-    STATES.currentStream.streamPlayer?.destroy();
+    STATES.currentStream.streamPlayerManager?.destroy();

    STATES.isPlaying = false;
    STATES.currentStream = {};
@ -406,17 +428,16 @@ function main() {
        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();
@ -427,11 +448,6 @@ function main() {
        Patcher.init();
        disablePwa();

-        // Preload Remote Play
-        if (getGlobalPref(GlobalPref.REMOTE_PLAY_ENABLED)) {
-            RemotePlayManager.detect();
-        }
-
        if (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL) {
            TouchController.setup();
        }
--- a/src/macros/build.ts
+++ b/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);
+};
--- a/src/modules/loading-screen.ts
+++ b/src/modules/loading-screen.ts
@ -35,7 +35,9 @@ 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 (getGlobalPref(GlobalPref.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE) {
            LoadingScreen.hideRocket();
--- a/src/modules/patcher/patcher-utils.ts
+++ b/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;
+        }
+    }
 }
--- a/src/modules/patcher/patcher.ts
+++ b/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 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=!';
@ -93,14 +93,14 @@ const PATCHES = {
        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;
        }
@ -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;
    },

@ -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 (getGlobalPref(GlobalPref.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) {
@ -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;
    },

@ -644,13 +632,12 @@ true` + text;
    },

    exposeInputChannel(str: string) {
-        let index = str.indexOf('this.flushData=');
-        if (index < 0) {
+        let text = '()(this,"flushData",(';
+        if (!str.includes(text)) {
            return false;
        }

-        const newCode = 'window.BX_EXPOSED.inputChannel = this,';
-        str = PatcherUtils.insertAt(str, index, newCode);
+        str = str.replace(text, '()(window.BX_EXPOSED.inputChannel = this, "flushData", (');
        return str;
    },

@ -701,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;
@ -715,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;
@ -732,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;
        }
@ -762,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"),');
@ -781,12 +772,13 @@ 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;
        }

@ -796,6 +788,8 @@ true` + text;
        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) {
@ -803,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){';
@ -911,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;
@ -922,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)) {
@ -958,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)) {
@ -1012,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;
    },

@ -1031,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,
        });

@ -1113,96 +1110,242 @@ ${subsVar} = subs;

        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 && getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
        'enableNativeMkb',
        'disableAbsoluteMouse',
-    ] : []),
+    ] : []) as PatchArray,

    'exposeReactCreateComponent',
-    'gameCardCustomIcons',
-    // 'gameCardPassTitle',

-    ...(getGlobalPref(GlobalPref.UI_IMAGE_QUALITY) < 90 ? [
-        'setImageQuality',
-    ] : []),
+    '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',
-    getGlobalPref(GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME) && 'patchSetCurrentFocus',

    getGlobalPref(GlobalPref.UI_LAYOUT) !== UiLayout.DEFAULT && 'websiteLayout',
    getGlobalPref(GlobalPref.GAME_FORTNITE_FORCE_CONSOLE) && 'forceFortniteConsole',

    ...(STATES.userAgent.capabilities.touch ? [
        'disableTouchContextMenu',
-    ] : []),
+    ] : []) as PatchArray,

    ...(getGlobalPref(GlobalPref.BLOCK_TRACKING) ? [
        'disableAiTrack',
-        'disableTelemetry',
+        // 'disableTelemetry',

        'blockWebRtcStatsCollector',
        'disableIndexDbLogging',

        'disableTelemetryProvider',
-    ] : []),
+    ] : []) as PatchArray,

-    ...(getGlobalPref(GlobalPref.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.NEWS) && 'ignoreNewsSection',
-    hideSections.includes(UiSection.FRIENDS) && 'ignorePlayWithFriendsSection',
-    hideSections.includes(UiSection.ALL_GAMES) && 'ignoreAllGamesSection',
+    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',

-    ...(getGlobalPref(GlobalPref.UI_IMAGE_QUALITY) < 90 ? [
-        'setBackgroundImageQuality',
-    ] : []),
+    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',
-    ] : []),
+    ] : []) as PatchArray,
 ]);

 // Only when playing
@ -1216,6 +1359,8 @@ let STREAM_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([

    'alwaysShowStreamHud',

+    'injectStreamMenuUseEffect',
+
    // 'exposeEventTarget',

    // Patch volume control for normal stream
@ -1232,24 +1377,22 @@ let STREAM_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
        (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF || getGlobalPref(GlobalPref.TOUCH_CONTROLLER_AUTO_OFF)) && 'disableTakRenderer',
        getGlobalPref(GlobalPref.TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
        (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.OFF && (getGlobalPref(GlobalPref.MKB_ENABLED) || getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON)) && 'patchBabylonRendererClass',
-    ] : []),
-
-    BX_FLAGS.EnableXcloudLogging && 'enableConsoleLogging',
+    ] : []) as PatchArray,

    'patchPollGamepads',

    getGlobalPref(GlobalPref.STREAM_COMBINE_SOURCES) && 'streamCombineSources',

-    ...(getGlobalPref(GlobalPref.REMOTE_PLAY_ENABLED) ? [
+    ...(!getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.REMOTE_PLAY) ? [
+        'remotePlayPostStreamRedirectUrl',
        'patchRemotePlayMkb',
-        'remotePlayConnectMode',
-    ] : []),
+    ] : []) as PatchArray,

    // Native MKB
    ...(AppInterface && getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
        'patchMouseAndKeyboardEnabled',
        'disableNativeRequestPointerLock',
-    ] : []),
+    ] : []) as PatchArray,
 ]);

 let PRODUCT_DETAIL_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
@ -1262,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,
    };

@ -1344,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];
@ -1366,18 +1511,20 @@ 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);
@ -1422,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');
@ -1441,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;
    }

@ -1472,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());
--- a/src/modules/patcher/patches/src/create-portal.ts
+++ b/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', {});
+}
--- a/src/modules/patcher/patches/src/game-card-icons.ts
+++ b/src/modules/patcher/patches/src/game-card-icons.ts
@ -1,8 +1,8 @@
 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();
--- a/src/modules/patcher/patches/src/remote-play-keep-alive.ts
+++ b/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;
--- a/src/modules/patcher/patches/src/stream-hud.ts
+++ b/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 });
+});
--- a/src/modules/player/base-canvas-player.ts
+++ b/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;
+}
--- a/src/modules/player/base-stream-player.ts
+++ b/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;
+}
--- a/src/modules/player/video/video-player.ts
+++ b/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(' ');
+    }
+}
--- a/src/modules/player/webgl2-player.ts
+++ b/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 { StreamPref } from "@/enums/pref-keys";
-import { getStreamPref } from "@/utils/pref-utils";
-
-
-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', getStreamPref(StreamPref.VIDEO_POWER_PREFERENCE));
-
-        const gl = this.$canvas.getContext('webgl2', {
-            isBx: true,
-            antialias: true,
-            alpha: false,
-            powerPreference: getStreamPref(StreamPref.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;
-    }
-}
--- a/src/modules/player/webgl2/shaders/clarity-boost.fs
+++ b/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;
--- a/src/modules/player/webgl2/shaders/clarity-boost.vert
+++ b/src/modules/player/webgl2/shaders/clarity-boost.vert
--- a/src/modules/player/webgl2/webgl2-player.ts
+++ b/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();
+    }
+}
--- a/src/modules/player/webgpu/shaders/clarity-boost.wgsl
+++ b/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);
+}
--- a/src/modules/player/webgpu/webgpu-player.ts
+++ b/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.');
+    }
+}
--- a/src/modules/remote-play-manager.ts
+++ b/src/modules/remote-play-manager.ts
@ -8,6 +8,7 @@ import { HeaderSection } from "./ui/header";
 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 (getGlobalPref(GlobalPref.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 {
@ -189,12 +195,7 @@ export class RemotePlayManager {
            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 (!getGlobalPref(GlobalPref.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;
    }
--- a/src/modules/settings-manager.ts
+++ b/src/modules/settings-manager.ts
@ -3,7 +3,7 @@ import { limitVideoPlayerFps, onChangeVideoPlayerType, updateVideoPlayer } from
 import { StreamStats } from "./stream/stream-stats";
 import { SoundShortcut } from "./shortcuts/sound-shortcut";
 import { STATES } from "@/utils/global";
-import { getGamePref, getStreamPref, hasGamePref, isStreamPref, setGameIdPref } from "@/utils/pref-utils";
+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";
@ -18,7 +18,7 @@ import { EmulatedMkbHandler } from "./mkb/mkb-handler";
 type SettingType = Partial<{
    hidden: true;
    onChange: () => void;
-    alwaysTriggerOnChange: boolean;  // Always trigger onChange(), not just when playing
+    onChangeUi: () => void;
    $element: HTMLElement;
 }>;

@ -67,28 +67,25 @@ export class SettingsManager {
            },
        },
        [StreamPref.VIDEO_PLAYER_TYPE]: {
-            onChange: () => {
-                onChangeVideoPlayerType();
-
-                if (STATES.isPlaying) {
-                    updateVideoPlayer();
-                }
-            },
-            alwaysTriggerOnChange: true,
+            onChange: updateVideoPlayer,
+            onChangeUi: onChangeVideoPlayerType,
        },
        [StreamPref.VIDEO_POWER_PREFERENCE]: {
            onChange: () => {
-                const streamPlayer = STATES.currentStream.streamPlayer;
+                const streamPlayer = STATES.currentStream.streamPlayerManager;
                if (!streamPlayer) {
                    return;
                }

-                streamPlayer.reloadPlayer();
                updateVideoPlayer();
            },
        },
        [StreamPref.VIDEO_PROCESSING]: {
            onChange: updateVideoPlayer,
+            onChangeUi: onChangeVideoPlayerType,
+        },
+        [StreamPref.VIDEO_PROCESSING_MODE]: {
+            onChange: updateVideoPlayer,
        },
        [StreamPref.VIDEO_SHARPNESS]: {
            onChange: updateVideoPlayer,
@ -127,8 +124,9 @@ export class SettingsManager {
        [StreamPref.STATS_QUICK_GLANCE_ENABLED]: {
            onChange: () => {
                const value = getStreamPref(StreamPref.STATS_QUICK_GLANCE_ENABLED);
-                const streamStats = StreamStats.getInstance();
-                value ? streamStats.quickGlanceSetup() : streamStats.quickGlanceStop();
+                if (!value) {
+                    StreamStats.getInstance().stop(true);
+                }
            },
        },
        [StreamPref.STATS_POSITION]: {
@ -177,11 +175,21 @@ export class SettingsManager {
        this.renderStreamSettingsSelection();
    }

-    private updateStreamElement(key: StreamPref, onChanges?: Set<SettingType['onChange']>) {
+    private updateStreamElement(key: StreamPref, onChanges?: Set<SettingType['onChange']>, onChangeUis?: Set<SettingType['onChangeUi']>) {
        const info = this.SETTINGS[key];

-        // Add event
-        if (info.onChange && (STATES.isPlaying || info.alwaysTriggerOnChange)) {
+        // 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);
@ -198,7 +206,6 @@ export class SettingsManager {
        }

        const value = getGamePref(this.targetGameId, key, true)!;
-
        if ('setValue' in $elm) {
            ($elm as any).setValue(value);
        } else {
@ -218,6 +225,7 @@ export class SettingsManager {

        // 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;

@ -227,21 +235,20 @@ export class SettingsManager {
                continue;
            }

-            const oldValue = getGamePref(oldGameId, key, true, true);
-            const newValue = getGamePref(this.targetGameId, key, true, true);
+            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);
+            this.updateStreamElement(key, onChanges, onChangeUis);
        }

-        // BxLogger.warning('Settings Manager', onChanges);
-        onChanges.forEach(onChange => {
-            onChange && onChange();
-        });
+        // 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);
@ -311,10 +318,15 @@ export class SettingsManager {

        BxEventBus.Stream.on('xboxTitleId.changed', async ({ id }) => {
            this.playingGameId = id;
-            setGameIdPref(id);
-            const $optGroup = $select.querySelector('optgroup')!;
+
+            // 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();
            }
@ -325,13 +337,12 @@ export class SettingsManager {
                $optGroup.appendChild(CE('option', {
                    value: id,
                }, title));
-
-                $select.value = id.toString();
-            } else {
-                $select.value = '-1';
            }

-            BxEventBus.Stream.emit('gameSettings.switched', { id });
+            // Activate custom settings
+
+            $select.value = selectedId.toString();
+            BxEventBus.Stream.emit('gameSettings.switched', { id: selectedId });
        });
    }

--- a/src/modules/stream-player-manager.ts
+++ b/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();
+    }
+}
--- a/src/modules/stream-player.ts
+++ b/src/modules/stream-player.ts
@ -1,297 +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 { GlobalPref, StreamPref } from "@/enums/pref-keys";
-import { getGlobalPref } from "@/utils/pref-utils";
-import { BX_FLAGS } from "@/utils/bx-flags";
-import { StreamPlayerType, StreamVideoProcessing, VideoPosition } from "@/enums/pref-values";
-import { getStreamPref } from "@/utils/pref-utils";
-
-
-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 = getStreamPref(StreamPref.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 = 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;
-
-        // $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() && getGlobalPref(GlobalPref.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();
-    }
-}
--- a/src/modules/stream/stream-settings-utils.ts
+++ b/src/modules/stream/stream-settings-utils.ts
@ -4,9 +4,11 @@ import { StreamPref } from "@/enums/pref-keys";
 import { StreamVideoProcessing, StreamPlayerType } from "@/enums/pref-values";
 import { getStreamPref, setStreamPref } from "@/utils/pref-utils";
 import { SettingsManager } from "../settings-manager";
+import type { StreamPlayerOptions } from "@/types/stream";

 export function onChangeVideoPlayerType() {
    const playerType = getStreamPref(StreamPref.VIDEO_PLAYER_TYPE);
+    const processing = getStreamPref(StreamPref.VIDEO_PROCESSING);
    const settingsManager = SettingsManager.getInstance();
    if (!settingsManager.hasElement(StreamPref.VIDEO_PROCESSING)) {
        return;
@ -15,15 +17,14 @@ export function onChangeVideoPlayerType() {
    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;
        setStreamPref(StreamPref.VIDEO_PROCESSING, StreamVideoProcessing.USM, 'direct');
@ -33,42 +34,50 @@ export function onChangeVideoPlayerType() {
        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);
+    $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(getStreamPref(StreamPref.VIDEO_MAX_FPS));
-
    const options = {
        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(getStreamPref(StreamPref.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);
--- a/src/modules/stream/stream-stats.ts
+++ b/src/modules/stream/stream-stats.ts
@ -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) => {
@ -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);
            }
--- a/src/modules/stream/stream-ui.ts
+++ b/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;
    }
 }
--- a/src/modules/touch-controller.ts
+++ b/src/modules/touch-controller.ts
@ -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) => {
--- a/src/modules/ui/dialog/remote-play-dialog.ts
+++ b/src/modules/ui/dialog/remote-play-dialog.ts
@ -44,14 +44,14 @@ export class RemotePlayDialog extends NavigationDialog {
        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');
+            $settingNote.textContent = `✅ ${t('xbox-360-games')} ${value === StreamResolution.DIM_1080P_HQ ? '❌' : '✅'} ${t('xbox-apps')}`;
            setGlobalPref(GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION, value, 'ui');
        });

--- a/src/modules/ui/dialog/settings-dialog.ts
+++ b/src/modules/ui/dialog/settings-dialog.ts
@ -191,7 +191,6 @@ export class SettingsDialog extends NavigationDialog {
            },
            GlobalPref.SERVER_BYPASS_RESTRICTION,
            GlobalPref.UI_CONTROLLER_FRIENDLY,
-            GlobalPref.REMOTE_PLAY_ENABLED,
        ],
    }, {
        group: 'server',
@ -272,6 +271,7 @@ export class SettingsDialog extends NavigationDialog {
        label: t('ui'),
        items: [
            GlobalPref.UI_LAYOUT,
+            GlobalPref.UI_THEME,
            GlobalPref.UI_IMAGE_QUALITY,
            GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME,
            GlobalPref.UI_CONTROLLER_SHOW_STATUS,
@ -452,6 +452,7 @@ export class SettingsDialog extends NavigationDialog {
            StreamPref.VIDEO_MAX_FPS,
            StreamPref.VIDEO_POWER_PREFERENCE,
            StreamPref.VIDEO_PROCESSING,
+            StreamPref.VIDEO_PROCESSING_MODE,
            StreamPref.VIDEO_RATIO,
            StreamPref.VIDEO_POSITION,
            StreamPref.VIDEO_SHARPNESS,
@ -948,6 +949,11 @@ export class SettingsDialog extends NavigationDialog {
        }
        $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);
    }
@ -1310,8 +1316,7 @@ export class SettingsDialog extends NavigationDialog {
        }

        // Delete settings
-        const gameSettings = STORAGE.Stream.getGameSettings(targetGameId);
-        const deleted = gameSettings?.deleteSetting(pref);
+        const deleted = STORAGE.Stream.deleteSettingByGame(targetGameId, pref);
        if (deleted) {
            BxEventBus.Stream.emit('setting.changed', {
                storageKey: `${StorageKey.STREAM}.${targetGameId}`,
--- a/src/modules/ui/guide-menu.ts
+++ b/src/modules/ui/guide-menu.ts
@ -1,11 +1,7 @@
-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 { getGlobalPref } from "@/utils/pref-utils";
@ -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 });
-            }
-        }
-    }
 }
--- a/src/modules/ui/header.ts
+++ b/src/modules/ui/header.ts
@ -1,7 +1,7 @@
 import { isFullVersion } from "@macros/build" with { type: "macro" };

-import { SCRIPT_VERSION } from "@utils/global";
-import { createButton, ButtonStyle, CE, isElementVisible } from "@utils/html";
+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";
@ -10,6 +10,8 @@ import { SettingsDialog } from "./dialog/settings-dialog";
 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;
@ -20,9 +22,6 @@ export class HeaderSection {
    private $btnSettings: HTMLElement;
    private $buttonsWrapper: HTMLElement;

-    private observer?: MutationObserver;
-    private timeoutId?: number | null;
-
    constructor() {
        BxLogger.info(this.LOG_TAG, 'constructor()');

@ -38,76 +37,63 @@ export class HeaderSection {
            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,
-            getGlobalPref(GlobalPref.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 = getGlobalPref(GlobalPref.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();
-    }
 }
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@ -26,7 +26,6 @@ declare global {
            touchLayoutManager: any;
        }>;

-        BX_REMOTE_PLAY_CONFIG: BxStates.remotePlay.config;
        BX_STREAM_SETTINGS: StreamSettingsData;

        BX_FETCH: typeof window['fetch'];
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@ -22,58 +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 | null;
-        gameSpecificSettings: boolean;
-
-        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,

@ -88,7 +36,7 @@ type XcloudTitleInfo = {
        hasMkbSupport: boolean;
    };

-    product: {
+    productInfo: {
        title: string;
        heroImageUrl: string;
        titledHeroImageUrl: string;
@ -106,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;
@ -119,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;
@ -179,7 +135,7 @@ type XboxAchievement = {
    }
 };

-type OsName = 'windows' | 'tizen' | 'android';
+type OsName = 'windows' | 'tizen' | 'webOS' | 'xboxOS' | 'android';

 type XcloudGamepad = {
    GamepadIndex: number;
@ -222,6 +178,8 @@ type BxFlags = {
    EnableXcloudLogging: boolean;
    SafariWorkaround: boolean;

+    EnableWebGPURenderer: boolean;
+
    ForceNativeMkbTitles: string[];
    FeatureGates: { [key: string]: boolean } | null,

--- a/src/types/states.d.ts
+++ b/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;
+}
--- a/src/types/stream.d.ts
+++ b/src/types/stream.d.ts
@ -1,7 +1,10 @@
-type StreamPlayerOptions = Partial<{
-    processing: string,
+import type { StreamVideoProcessing, StreamVideoProcessingMode } from "@/enums/pref-values";
+
+type StreamPlayerOptions = {
+    processing: StreamVideoProcessing,
+    processingMode: StreamVideoProcessingMode,
    sharpness: number,
    saturation: number,
    contrast: number,
    brightness: number,
-}>;
+};
--- a/src/utils/bx-event-bus.ts
+++ b/src/utils/bx-event-bus.ts
@ -7,9 +7,10 @@ import type { SpeakerState } from "@/modules/shortcuts/sound-shortcut";

 type EventCallback<T = any> = (payload: T) => void;

-type ScriptEvents = {
-    'xcloud.server.ready': {};
-    'xcloud.server.unavailable': {};
+export type ScriptEvents = {
+    'xcloud.server': {
+        status: 'ready' | 'unavailable' | 'signed-out',
+    };

    'dialog.shown': {};
    'dialog.dismissed': {};
@ -32,14 +33,22 @@ type ScriptEvents = {
    'list.localCoOp.updated': {
        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': {};

    'xboxTitleId.changed': {
        id: number;
@ -63,6 +72,9 @@ type StreamEvents = {
    // Inside patch
    'microphone.state.changed': { state: MicrophoneState };

+    'ui.streamHud.rendered': { expanded: boolean },
+    'ui.streamMenu.rendered': {},
+
    dataChannelCreated: { dataChannel: RTCDataChannel };
 };

--- a/src/utils/bx-event.ts
+++ b/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';

--- a/src/utils/bx-exposed.ts
+++ b/src/utils/bx-exposed.ts
@ -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;
@ -234,6 +242,7 @@ export const BxExposed = {

    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);
+    }
 };
--- a/src/utils/bx-flags.ts
+++ b/src/utils/bx-flags.ts
@ -8,6 +8,8 @@ const DEFAULT_FLAGS: BxFlags = {
    EnableXcloudLogging: false,
    SafariWorkaround: true,

+    EnableWebGPURenderer: false,
+
    ForceNativeMkbTitles: [],
    FeatureGates: null,

--- a/src/utils/css.ts
+++ b/src/utils/css.ts
@ -1,8 +1,9 @@
 import { CE } from "@utils/html";
 import { compressCss, isLiteVersion, renderStylus } from "@macros/build" with { type: "macro" };
-import { BlockFeature, UiSection } from "@/enums/pref-values";
+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() {
@ -14,8 +15,8 @@ export function addCss() {

    if (isLiteVersion()) {
        // Hide Controller icon in Game tiles
-        selectorToHide.push('div[class*=SupportedInputsBadge] svg:first-of-type');
-        selectorToHide.push('div[class*=SupportedInputsBadge]:not(:has(:nth-child(2)))');
+        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
@ -24,7 +25,7 @@ export function addCss() {
    }

    // Hide BYOG section
-    if (getGlobalPref(GlobalPref.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___]');
    }

@ -44,6 +45,21 @@ 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 (getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.FRIENDS)) {
        selectorToHide.push('#gamepass-dialog-root div[class^=AchievementsPreview-module__container] + button[class*=HomeLandingPage-module__button]');
@ -53,12 +69,31 @@ export function addCss() {
        css += selectorToHide.join(',') + '{ display: none; }';
    }

+    // Change site's background
+    if (getGlobalPref(GlobalPref.UI_THEME) === UiTheme.DARK_OLED) {
+        css += compressCss(`
+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__gameTitleInnerWrapper],
-div[class*=GameCard-module__card],
-div[class*=ScrollArrows-module] {
+/*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;
 }
 `);
@ -67,32 +102,32 @@ div[class*=ScrollArrows-module] {
    // Hide the top-left dots icon while playing
    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;
 }
 `);
@ -100,7 +135,7 @@ div[class*=StreamMenu-module__menu] {
    // Simplify Stream's 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;
 }
@ -113,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;
--- a/src/utils/feature-gates.ts
+++ b/src/utils/feature-gates.ts
@ -9,6 +9,9 @@ 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
--- a/src/utils/global.ts
+++ b/src/utils/global.ts
@ -1,3 +1,4 @@
+import type { BxStates } from "@/types/states";
 import { UserAgent } from "./user-agent";

 export const SCRIPT_VERSION = Bun.env.SCRIPT_VERSION!;
--- a/src/utils/history.ts
+++ b/src/utils/history.ts
@ -1,9 +1,5 @@
-import { isFullVersion } from "@macros/build" with { type: "macro" };
-
 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";

@ -27,15 +23,9 @@ export function onHistoryChanged(e: PopStateEvent) {
        return;
    }

-    if (isFullVersion()) {
-        window.setTimeout(RemotePlayManager.detect, 10);
-    }
-
    // Hide Navigation dialog
    NavigationDialogManager.getInstance().hide();

    LoadingScreen.reset();
-    window.setTimeout(HeaderSection.watchHeader, 2000);
-
    BxEventBus.Stream.emit('state.stopped', {});
 }
--- a/src/utils/monkey-patches.ts
+++ b/src/utils/monkey-patches.ts
@ -2,12 +2,13 @@ import { BxEvent } from "@utils/bx-event";
 import { STATES } from "@utils/global";
 import { BxLogger } from "@utils/bx-logger";
 import { patchSdpBitrate, setCodecPreferences } from "./sdp";
-import { StreamPlayer } from "@/modules/stream-player";
+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 = getGlobalPref(GlobalPref.UI_SKIP_SPLASH_VIDEO);
@ -21,12 +22,19 @@ export function patchVideoApi() {

        const playerOptions = {
            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, getStreamPref(StreamPref.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 });
        }

@ -231,6 +239,7 @@ export function patchCanvasContext() {
            }
        }

+        // @ts-ignore
        return nativeGetContext.apply(this, [contextType, contextAttributes]);
    }
 }
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@ -49,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) {
@ -294,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';
--- a/src/utils/root-dialog-observer.ts
+++ b/src/utils/root-dialog-observer.ts
@ -1,112 +0,0 @@
-import { GuideMenu } from "@/modules/ui/guide-menu";
-import { BX_FLAGS } from "./bx-flags";
-import { BxLogger } from "./bx-logger";
-import { BxIcon } from "./bx-icon";
-import { AppInterface } from "./global";
-import { createButton, ButtonStyle } from "./html";
-import { t } from "./translation";
-import { parseDetailsPath } from "./utils";
-import { BxEventBus } from "./bx-event-bus";
-
-
-export class RootDialogObserver {
-    private static $btnShortcut = AppInterface && createButton({
-        icon: BxIcon.CREATE_SHORTCUT,
-        label: t('create-shortcut'),
-        style: ButtonStyle.FOCUSABLE | ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.NORMAL_CASE | ButtonStyle.NORMAL_LINK,
-        onClick: e => {
-            window.BX_EXPOSED.dialogRoutes?.closeAll();
-
-            const $btn = (e.target as HTMLElement).closest('button');
-            AppInterface.createShortcut($btn?.dataset.path);
-        },
-    });
-
-    private static $btnWallpaper = AppInterface && createButton({
-        icon: BxIcon.DOWNLOAD,
-        label: t('wallpaper'),
-        style: ButtonStyle.FOCUSABLE | ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.NORMAL_CASE | ButtonStyle.NORMAL_LINK,
-        onClick: e => {
-            window.BX_EXPOSED.dialogRoutes?.closeAll();
-
-            const $btn = (e.target as HTMLElement).closest('button');
-            const details = parseDetailsPath($btn!.dataset.path!);
-            details && AppInterface.downloadWallpapers(details.titleSlug, details.productId);
-        },
-    });
-
-    private static handleGameCardMenu($root: HTMLElement) {
-        const $detail = $root.querySelector('a[href^="/play/"]') as HTMLAnchorElement;
-        if (!$detail) {
-            return;
-        }
-
-        const path = $detail.getAttribute('href')!;
-        RootDialogObserver.$btnShortcut.dataset.path = path;
-        RootDialogObserver.$btnWallpaper.dataset.path = path;
-
-        $root.append(RootDialogObserver.$btnShortcut, RootDialogObserver.$btnWallpaper);
-    }
-
-    private static handleAddedElement($root: HTMLElement, $addedElm: HTMLElement): boolean {
-        if (AppInterface && $addedElm.className.startsWith('SlideSheet-module__container')) {
-            // Game card's context menu
-            const $gameCardMenu = $addedElm.querySelector<HTMLElement>('div[class^=MruContextMenu],div[class^=GameCardContextMenu]');
-            if ($gameCardMenu) {
-                RootDialogObserver.handleGameCardMenu($gameCardMenu);
-                return true;
-            }
-        } else if ($root.querySelector('div[class*=GuideDialog]')) {
-            // Guide menu
-            GuideMenu.getInstance().observe($addedElm);
-            return true;
-        }
-
-        return false;
-    }
-
-    private static observe($root: HTMLElement) {
-        let beingShown = false;
-
-        const observer = new MutationObserver(mutationList => {
-            for (const mutation of mutationList) {
-                if (mutation.type !== 'childList') {
-                    continue;
-                }
-
-                BX_FLAGS.Debug && BxLogger.warning('RootDialog', 'added', mutation.addedNodes);
-                if (mutation.addedNodes.length === 1) {
-                    const $addedElm = mutation.addedNodes[0];
-                    if ($addedElm instanceof HTMLElement) {
-                        RootDialogObserver.handleAddedElement($root, $addedElm);
-                    }
-                }
-
-                const shown = !!($root.firstElementChild && $root.firstElementChild.childElementCount > 0);
-                if (shown !== beingShown) {
-                    beingShown = shown;
-                    BxEventBus.Script.emit(shown ? 'dialog.shown' : 'dialog.dismissed', {});
-                }
-            }
-        });
-        observer.observe($root, { subtree: true, childList: true });
-    }
-
-    public static waitForRootDialog() {
-        const observer = new MutationObserver(mutationList => {
-            for (const mutation of mutationList) {
-                if (mutation.type !== 'childList') {
-                    continue;
-                }
-
-                const $target = mutation.target as HTMLElement;
-                if ($target.id && $target.id === 'gamepass-dialog-root') {
-                    observer.disconnect();
-                    RootDialogObserver.observe($target);
-                    break;
-                }
-            };
-        });
-        observer.observe(document.documentElement, { subtree: true, childList: true });
-    }
-}
--- a/src/utils/screenshot-manager.ts
+++ b/src/utils/screenshot-manager.ts
@ -2,8 +2,8 @@ import { AppInterface, STATES } from "./global";
 import { CE } from "./html";
 import { GlobalPref } from "@/enums/pref-keys";
 import { BxLogger } from "./bx-logger";
-import { StreamPlayerType } from "@/enums/pref-values";
 import { getGlobalPref } from "@/utils/pref-utils";
+import { StreamPlayerElement } from "@/modules/player/base-stream-player";


 export class ScreenshotManager {
@ -42,36 +42,36 @@ export class ScreenshotManager {

    takeScreenshot(callback?: any) {
        const currentStream = STATES.currentStream;
-        const streamPlayer = currentStream.streamPlayer;
+        const streamPlayerManager = currentStream.streamPlayerManager;
        const $canvas = this.$canvas;
-        if (!streamPlayer || !$canvas) {
+        if (!streamPlayerManager || !$canvas) {
            return;
        }

        let $player;
        if (getGlobalPref(GlobalPref.SCREENSHOT_APPLY_FILTERS)) {
-            $player = streamPlayer.getPlayerElement();
+            $player = streamPlayerManager.getPlayerElement();
        } else {
-            $player = streamPlayer.getPlayerElement(StreamPlayerType.VIDEO);
+            $player = streamPlayerManager.getPlayerElement(StreamPlayerElement.VIDEO);
        }

        if (!$player || !$player.isConnected) {
            return;
        }

+        const canvasContext = this.canvasContext;
+        if ($player instanceof HTMLCanvasElement) {
+            streamPlayerManager.getCanvasPlayer()?.updateFrame();
+        }
+        canvasContext.drawImage($player, 0, 0);
+
+        // Play animation
        const $gameStream = $player.closest('#game-stream');
        if ($gameStream) {
            $gameStream.addEventListener('animationend', this.onAnimationEnd, { once: true });
            $gameStream.classList.add('bx-taking-screenshot');
        }

-        const canvasContext = this.canvasContext;
-
-        if ($player instanceof HTMLCanvasElement) {
-            streamPlayer.getWebGL2Player().forceDrawFrame();
-        }
-        canvasContext.drawImage($player, 0, 0, $canvas.width, $canvas.height);
-
        // Get data URL and pass to parent app
        if (AppInterface) {
            const data = $canvas.toDataURL('image/png').split(';base64,')[1];
--- a/src/utils/settings-storages/base-settings-storage.ts
+++ b/src/utils/settings-storages/base-settings-storage.ts
@ -28,7 +28,10 @@ export class BaseSettingsStorage<T extends AnyPref> {
            }
            */

-            setting.ready && setting.ready.call(this, setting);
+            if (setting.ready) {
+                setting.ready.call(this, setting);
+                delete setting.ready;
+            }
        }
        this.definitions = definitions;

@ -60,7 +63,7 @@ export class BaseSettingsStorage<T extends AnyPref> {
        return this.definitions[key];
    }

-    hasSetting<K extends keyof PrefTypeMap<K>>(key: K): boolean {
+    hasSetting(key: T): boolean {
        return key in this.settings;
    }

@ -193,4 +196,15 @@ export class BaseSettingsStorage<T extends AnyPref> {

        return value.toString();
    }
+
+    deleteSetting(pref: T) {
+        if (this.hasSetting(pref)) {
+            delete this.settings[pref];
+            this.saveSettings();
+
+            return true;
+        }
+
+        return false;
+    }
 }
--- a/src/utils/settings-storages/game-settings-storage.ts
+++ b/src/utils/settings-storages/game-settings-storage.ts
@ -7,14 +7,7 @@ export class GameSettingsStorage extends BaseSettingsStorage<StreamPref> {
        super(`${StorageKey.STREAM}.${id}`, StreamSettingsStorage.DEFINITIONS);
    }

-    deleteSetting(pref: StreamPref) {
-        if (this.hasSetting(pref)) {
-            delete this.settings[pref];
-            this.saveSettings();
-
-            return true;
-        }
-
-        return false;
+    isEmpty() {
+        return Object.keys(this.settings).length === 0;
    }
 }
--- a/src/utils/settings-storages/global-settings-storage.ts
+++ b/src/utils/settings-storages/global-settings-storage.ts
@ -1,17 +1,16 @@
 import { BypassServers } from "@/enums/bypass-servers";
-import { GlobalPref, StorageKey, type GlobalPrefTypeMap } from "@/enums/pref-keys";
+import { GlobalPref, StorageKey } from "@/enums/pref-keys";
 import { UserAgentProfile } from "@/enums/user-agent";
-import { type SettingDefinition } from "@/types/setting-definition";
+import { type SettingDefinition, type SettingDefinitions } from "@/types/setting-definition";
 import { BX_FLAGS } from "../bx-flags";
 import { STATES, AppInterface } from "../global";
 import { CE } from "../html";
 import { t, SUPPORTED_LANGUAGES } from "../translation";
 import { UserAgent } from "../user-agent";
 import { BaseSettingsStorage } from "./base-settings-storage";
-import { CodecProfile, StreamResolution, TouchControllerMode, TouchControllerStyleStandard, TouchControllerStyleCustom, GameBarPosition, NativeMkbMode, UiLayout, UiSection, BlockFeature } from "@/enums/pref-values";
+import { CodecProfile, StreamResolution, TouchControllerMode, TouchControllerStyleStandard, TouchControllerStyleCustom, GameBarPosition, NativeMkbMode, UiLayout, UiSection, BlockFeature, UiTheme } from "@/enums/pref-values";
 import { GhPagesUtils } from "../gh-pages";
 import { BxEventBus } from "../bx-event-bus";
-import { BxIcon } from "../bx-icon";


 function getSupportedCodecProfiles() {
@ -71,7 +70,7 @@ function getSupportedCodecProfiles() {
 }

 export class GlobalSettingsStorage extends BaseSettingsStorage<GlobalPref> {
-    private static readonly DEFINITIONS: Record<keyof GlobalPrefTypeMap, SettingDefinition> = {
+    private static readonly DEFINITIONS: SettingDefinitions<GlobalPref> = {
        [GlobalPref.VERSION_LAST_CHECK]: {
            default: 0,
        },
@ -210,6 +209,14 @@ export class GlobalSettingsStorage extends BaseSettingsStorage<GlobalPref> {
                },
            },
        },
+        [GlobalPref.UI_THEME]: {
+            label: t('theme'),
+            default: UiTheme.DEFAULT,
+            options: {
+                [UiTheme.DEFAULT]: t('default'),
+                [UiTheme.DARK_OLED]: t('oled'),
+            },
+        },

        [GlobalPref.STREAM_COMBINE_SOURCES]: {
            requiredVariants: 'full',
@ -457,8 +464,11 @@ export class GlobalSettingsStorage extends BaseSettingsStorage<GlobalPref> {
                [UiSection.FRIENDS]: t('section-play-with-friends'),
                [UiSection.NATIVE_MKB]: t('section-native-mkb'),
                [UiSection.TOUCH]: t('section-touch'),
-                // [UiSection.BOYG]: t('section-byog'),
                [UiSection.MOST_POPULAR]: t('section-most-popular'),
+                [UiSection.BOYG]: t('stream-your-own-game'),
+                [UiSection.RECENTLY_ADDED]: t('section-recently-added'),
+                [UiSection.LEAVING_SOON]: t('section-leaving-soon'),
+                [UiSection.GENRES]: t('section-genres'),
                [UiSection.ALL_GAMES]: t('section-all-games'),
            },
            params: {
@ -486,6 +496,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage<GlobalPref> {
                [BlockFeature.BYOG]: t('stream-your-own-game'),
                [BlockFeature.NOTIFICATIONS_INVITES]: t('notifications') + ': ' + t('invites'),
                [BlockFeature.NOTIFICATIONS_ACHIEVEMENTS]: t('notifications') + ': ' + t('achievements'),
+                [BlockFeature.REMOTE_PLAY]: t('remote-play'),
            },
        },

@ -514,13 +525,6 @@ export class GlobalSettingsStorage extends BaseSettingsStorage<GlobalPref> {
            default: false,
        },

-        [GlobalPref.REMOTE_PLAY_ENABLED]: {
-            requiredVariants: 'full',
-            label: t('enable-remote-play-feature'),
-            labelIcon: BxIcon.REMOTE_PLAY,
-            default: false,
-        },
-
        [GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION]: {
            requiredVariants: 'full',
            default: StreamResolution.DIM_1080P,
--- a/src/utils/settings-storages/stream-settings-storage.ts
+++ b/src/utils/settings-storages/stream-settings-storage.ts
@ -1,21 +1,23 @@
-import { StreamPref, StorageKey, type StreamPrefTypeMap, type PrefTypeMap } from "@/enums/pref-keys";
-import { DeviceVibrationMode, StreamPlayerType, StreamVideoProcessing, VideoPowerPreference, VideoRatio, VideoPosition, StreamStat, StreamStatPosition } from "@/enums/pref-values";
+import { StreamPref, StorageKey, type PrefTypeMap } from "@/enums/pref-keys";
+import { DeviceVibrationMode, StreamPlayerType, StreamVideoProcessing, VideoPowerPreference, VideoRatio, VideoPosition, StreamStat, StreamStatPosition, StreamVideoProcessingMode } from "@/enums/pref-values";
 import { STATES } from "../global";
 import { KeyboardShortcutDefaultId } from "../local-db/keyboard-shortcuts-table";
 import { MkbMappingDefaultPresetId } from "../local-db/mkb-mapping-presets-table";
 import { t } from "../translation";
 import { BaseSettingsStorage } from "./base-settings-storage";
 import { CE } from "../html";
-import type { SettingActionOrigin, SettingDefinition } from "@/types/setting-definition";
+import type { SettingActionOrigin, SettingDefinitions } from "@/types/setting-definition";
 import { BxIcon } from "../bx-icon";
 import { GameSettingsStorage } from "./game-settings-storage";
 import { BxLogger } from "../bx-logger";
 import { ControllerCustomizationDefaultPresetId } from "../local-db/controller-customizations-table";
 import { ControllerShortcutDefaultId } from "../local-db/controller-shortcuts-table";
+import { BxEventBus } from "../bx-event-bus";
+import { WebGPUPlayer } from "@/modules/player/webgpu/webgpu-player";


 export class StreamSettingsStorage extends BaseSettingsStorage<StreamPref> {
-    static readonly DEFINITIONS: Record<keyof StreamPrefTypeMap, SettingDefinition> = {
+    static readonly DEFINITIONS: SettingDefinitions<StreamPref> = {
        [StreamPref.DEVICE_VIBRATION_MODE]: {
            requiredVariants: 'full',
            label: t('device-vibration'),
@ -132,7 +134,7 @@ export class StreamSettingsStorage extends BaseSettingsStorage<StreamPref> {
            max: 4,
            params: {
                hideSlider: true,
-                customTextValue(value) {
+                customTextValue(value: any) {
                    value = parseInt(value);
                    return (value === 0) ? t('off') : value.toString();
                },
@ -150,11 +152,20 @@ export class StreamSettingsStorage extends BaseSettingsStorage<StreamPref> {
            options: {
                [StreamPlayerType.VIDEO]: t('default'),
                [StreamPlayerType.WEBGL2]: t('webgl2'),
+                [StreamPlayerType.WEBGPU]: `${t('webgpu')} (${t('experimental')})`,
            },
            suggest: {
                lowest: StreamPlayerType.VIDEO,
                highest: StreamPlayerType.WEBGL2,
            },
+            ready: (setting: any) => {
+                BxEventBus.Script.on('webgpu.ready', () => {
+                    if (!WebGPUPlayer.device) {
+                        // Remove WebGPU option on unsupported browsers
+                        delete setting.options[StreamPlayerType.WEBGPU];
+                    }
+                });
+            },
        },
        [StreamPref.VIDEO_PROCESSING]: {
            label: t('clarity-boost'),
@ -168,6 +179,18 @@ export class StreamSettingsStorage extends BaseSettingsStorage<StreamPref> {
                highest: StreamVideoProcessing.CAS,
            },
        },
+        [StreamPref.VIDEO_PROCESSING_MODE]: {
+            label: t('clarity-boost-mode'),
+            default: StreamVideoProcessingMode.PERFORMANCE,
+            options: {
+                [StreamVideoProcessingMode.PERFORMANCE]: t('performance'),
+                [StreamVideoProcessingMode.QUALITY]: t('quality'),
+            },
+            suggest: {
+                lowest: StreamVideoProcessingMode.PERFORMANCE,
+                highest: StreamVideoProcessingMode.QUALITY,
+            },
+        },
        [StreamPref.VIDEO_POWER_PREFERENCE]: {
            label: t('renderer-configuration'),
            default: VideoPowerPreference.DEFAULT,
@ -217,10 +240,13 @@ export class StreamSettingsStorage extends BaseSettingsStorage<StreamPref> {
            default: VideoRatio['16:9'],
            options: {
                [VideoRatio['16:9']]: `16:9 (${t('default')})`,
-                [VideoRatio['18:9']]: '18:9',
-                [VideoRatio['21:9']]: '21:9',
                [VideoRatio['16:10']]: '16:10',
+                [VideoRatio['18:9']]: '18:9',
+                [VideoRatio['20:9']]: '20:9',
+                [VideoRatio['21:9']]: '21:9',
+                [VideoRatio['3:2']]: '3:2',
                [VideoRatio['4:3']]: '4:3',
+                [VideoRatio['5:4']]: '5:4',

                [VideoRatio.FILL]: t('stretch'),
                //'cover': 'Cover',
@ -302,7 +328,7 @@ export class StreamSettingsStorage extends BaseSettingsStorage<StreamPref> {
            params: {
                size: 0,
            },
-            ready: setting => {
+            ready: (setting: any) => {
                // Remove Battery option in unsupported browser
                const multipleOptions = (setting as any).multipleOptions;
                if (!STATES.browser.capabilities.batteryApi) {
@ -398,7 +424,13 @@ export class StreamSettingsStorage extends BaseSettingsStorage<StreamPref> {
    getGameSettings(id: number) {
        if (id > -1) {
            if (!this.gameSettings[id]) {
-                this.gameSettings[id] = new GameSettingsStorage(id);
+                const gameStorage = new GameSettingsStorage(id);
+                this.gameSettings[id] = gameStorage;
+
+                // Remove values same as global's
+                for (const key in gameStorage.settings) {
+                    this.getSettingByGame(id, key);
+                }
            }

            return this.gameSettings[id];
@ -408,20 +440,25 @@ export class StreamSettingsStorage extends BaseSettingsStorage<StreamPref> {
    }

    getSetting<K extends keyof PrefTypeMap<K>>(key: K, checkUnsupported?: boolean): PrefTypeMap<K>[K] {
-        return this.getSettingByGame(this.xboxTitleId, key, true, checkUnsupported)!;
+        return this.getSettingByGame(this.xboxTitleId, key, checkUnsupported)!;
    }

-    getSettingByGame<K extends keyof PrefTypeMap<K>>(id: number, key: K, returnBaseValue: boolean=true, checkUnsupported?: boolean): PrefTypeMap<K>[K] | undefined {
+    getSettingByGame<K extends keyof PrefTypeMap<K>>(id: number, key: K, checkUnsupported?: boolean): PrefTypeMap<K>[K] | undefined {
        const gameSettings = this.getGameSettings(id);
-        if (gameSettings?.hasSetting(key)) {
-            return gameSettings.getSetting(key, checkUnsupported);
+        if (gameSettings?.hasSetting(key as StreamPref)) {
+            let gameValue = gameSettings.getSetting(key, checkUnsupported);
+            const globalValue = super.getSetting(key, checkUnsupported);
+
+            // Remove value if it's the same as global's
+            if (globalValue === gameValue) {
+                this.deleteSettingByGame(id, key as StreamPref);
+                gameValue = globalValue;
+            }
+
+            return gameValue;
        }

-        if (returnBaseValue) {
-            return super.getSetting(key, checkUnsupported);
-        }
-
-        return undefined;
+        return super.getSetting(key, checkUnsupported);
    }

    setSetting<V = any>(key: StreamPref, value: V, origin: SettingActionOrigin): V {
@ -439,6 +476,15 @@ export class StreamSettingsStorage extends BaseSettingsStorage<StreamPref> {
        return super.setSetting(key, value, origin);
    }

+    deleteSettingByGame(id: number, key: StreamPref): boolean {
+        const gameSettings = this.getGameSettings(id);
+        if (gameSettings) {
+            return gameSettings.deleteSetting(key);
+        }
+
+        return false;
+    }
+
    hasGameSetting(id: number, key: StreamPref): boolean {
        const gameSettings = this.getGameSettings(id);
        return !!(gameSettings && gameSettings.hasSetting(key));
--- a/src/utils/stream-settings.ts
+++ b/src/utils/stream-settings.ts
@ -13,7 +13,7 @@ import { ShortcutAction } from "@/enums/shortcut-actions";
 import { KeyHelper } from "@/modules/mkb/key-helper";
 import { BxEventBus } from "./bx-event-bus";
 import { ControllerCustomizationsTable } from "./local-db/controller-customizations-table";
-import { getStreamPref, setStreamPref, STORAGE } from "@/utils/pref-utils";
+import { getStreamPref, STORAGE } from "@/utils/pref-utils";


 export type StreamSettingsData = {
@ -191,7 +191,6 @@ export class StreamSettings {

        settings.mkbPreset = converted;

-        setStreamPref(StreamPref.MKB_P1_MAPPING_PRESET_ID, orgPreset.id, 'direct');
        BxEventBus.Stream.emit('mkb.setting.updated', {});
    }

@ -202,7 +201,6 @@ export class StreamSettings {
        if (presetId === KeyboardShortcutDefaultId.OFF) {
            settings.keyboardShortcuts = null;

-            setStreamPref(StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID, presetId, 'direct');
            BxEventBus.Stream.emit('keyboardShortcuts.updated', {});
            return;
        }
@ -222,7 +220,6 @@ export class StreamSettings {

        settings.keyboardShortcuts = converted;

-        setStreamPref(StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID, orgPreset.id, 'direct');
        BxEventBus.Stream.emit('keyboardShortcuts.updated', {});
    }

--- a/src/utils/translation.ts
+++ b/src/utils/translation.ts
@ -7,6 +7,7 @@ export const SUPPORTED_LANGUAGES = {
    'en-US': 'English (US)',

    'ca-CA': 'Català',
+    'cs-CZ': 'čeština',
    'da-DK': 'dansk',
    'de-DE': 'Deutsch',
    'en-ID': 'Bahasa Indonesia',
@ -60,12 +61,11 @@ const Texts = {
    "browser-unsupported-feature": "Your browser doesn't support this feature",
    "button-xbox": "Xbox button",
    "bypass-region-restriction": "Bypass region restriction",
-    "can-stream-xbox-360-games": "Can stream Xbox 360 games",
    "cancel": "Cancel",
-    "cant-stream-xbox-360-games": "Can't stream Xbox 360 games",
    "center": "Center",
    "chat": "Chat",
    "clarity-boost": "Clarity boost",
+    "clarity-boost-mode": "Clarity boost mode",
    "clarity-boost-warning": "These settings don't work when the Clarity Boost mode is ON",
    "clear": "Clear",
    "clear-data": "Clear data",
@ -198,6 +198,7 @@ const Texts = {
    "new-version-available": [
        (e: any) => `Version ${e.version} available`,
        (e: any) => `Versió ${e.version} disponible`,
+        (e: any) => `Verze ${e.version} dostupná`,
        ,
        (e: any) => `Version ${e.version} verfügbar`,
        (e: any) => `Versi ${e.version} tersedia`,
@ -222,10 +223,12 @@ const Texts = {
    "notifications": "Notifications",
    "off": "Off",
    "official": "Official",
+    "oled": "OLED",
    "on": "On",
    "only-supports-some-games": "Only supports some games",
    "opacity": "Opacity",
    "other": "Other",
+    "performance": "Performance",
    "playing": "Playing",
    "playtime": "Playtime",
    "poland": "Poland",
@ -242,6 +245,7 @@ const Texts = {
    "press-key-to-toggle-mkb": [
        (e: any) => `Press ${e.key} to toggle this feature`,
        (e: any) => `Premeu ${e.key} per alternar aquesta funció`,
+        (e: any) => `Zmáčknete ${e.key} pro přepnutí této funkce`,
        (e: any) => `Tryk på ${e.key} for at slå denne funktion til`,
        (e: any) => `${e.key}: Funktion an-/ausschalten`,
        (e: any) => `Tekan ${e.key} untuk mengaktifkan fitur ini`,
@ -262,11 +266,13 @@ const Texts = {
    ],
    "press-to-bind": "Press a key or do a mouse click to bind...",
    "prompt-preset-name": "Preset's name:",
+    "quality": "Quality",
    "recommended": "Recommended",
    "recommended-settings-for-device": [
        (e: any) => `Recommended settings for ${e.device}`,
        (e: any) => `Configuració recomanada per a ${e.device}`,
        ,
+        ,
        (e: any) => `Empfohlene Einstellungen für ${e.device}`,
        (e: any) => `Rekomendasi pengaturan untuk ${e.device}`,
        (e: any) => `Ajustes recomendados para ${e.device}`,
@ -305,14 +311,18 @@ const Texts = {
    "screen": "Screen",
    "screenshot-apply-filters": "Apply video filters to screenshots",
    "section-all-games": "All games",
+    "section-genres": "Genres",
+    "section-leaving-soon": "Leaving soon",
    "section-most-popular": "Most popular",
    "section-native-mkb": "Play with mouse & keyboard",
    "section-news": "News",
    "section-play-with-friends": "Play with friends",
+    "section-recently-added": "Recently added",
    "section-touch": "Play with touch",
    "separate-touch-controller": "Separate Touch controller & Controller #1",
    "separate-touch-controller-note": "Touch controller is Player 1, Controller #1 is Player 2",
    "server": "Server",
+    "server-list-error": "Can't get the server list",
    "server-locations": "Server locations",
    "settings": "Settings",
    "settings-for": "Settings for",
@ -362,7 +372,9 @@ const Texts = {
    "tc-custom-layout-style": "Custom layout's button style",
    "tc-muted-colors": "Muted colors",
    "tc-standard-layout-style": "Standard layout's button style",
+    "test-controller": "Test controller",
    "text-size": "Text size",
+    "theme": "Theme",
    "toggle": "Toggle",
    "top": "Top",
    "top-center": "Top-center",
@ -373,6 +385,7 @@ const Texts = {
    "touch-control-layout-by": [
        (e: any) => `Touch control layout by ${e.name}`,
        (e: any) => `Format del control tàctil per ${e.name}`,
+        (e: any) => `Rozložení dotykového ovládání ${e.name}`,
        (e: any) => `Touch-kontrol layout af ${e.name}`,
        (e: any) => `Touch-Steuerungslayout von ${e.name}`,
        (e: any) => `Tata letak Sentuhan layar oleh ${e.name}`,
@ -424,6 +437,9 @@ const Texts = {
    "waiting-for-input": "Waiting for input...",
    "wallpaper": "Wallpaper",
    "webgl2": "WebGL2",
+    "webgpu": "WebGPU",
+    "xbox-360-games": "Xbox 360 games",
+    "xbox-apps": "Xbox apps",
 };

 export class Translations {
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@ -16,6 +16,15 @@ export function checkForUpdate() {
        return;
    }

+    // Always check for new version
+    fetch('https://api.github.com/repos/redphx/better-xcloud/releases/latest')
+        .then(response => response.json())
+        .then(json => {
+            // Store the latest version
+            setGlobalPref(GlobalPref.VERSION_LATEST, json.tag_name.substring(1), 'direct');
+            setGlobalPref(GlobalPref.VERSION_CURRENT, SCRIPT_VERSION, 'direct');
+        });
+
    const CHECK_INTERVAL_SECONDS = 2 * 3600; // check every 2 hours

    const currentVersion = getGlobalPref(GlobalPref.VERSION_CURRENT);
@ -28,13 +37,6 @@ export function checkForUpdate() {

    // Start checking
    setGlobalPref(GlobalPref.VERSION_LAST_CHECK, now, 'direct');
-    fetch('https://api.github.com/repos/redphx/better-xcloud/releases/latest')
-        .then(response => response.json())
-        .then(json => {
-            // Store the latest version
-            setGlobalPref(GlobalPref.VERSION_LATEST, json.tag_name.substring(1), 'direct');
-            setGlobalPref(GlobalPref.VERSION_CURRENT, SCRIPT_VERSION, 'direct');
-        });

    // Update translations
    Translations.updateTranslations(currentVersion === SCRIPT_VERSION);
@ -154,9 +156,13 @@ export function clearAllData() {
    alert(t('clear-data-success'));
 }

+export function containsAll(arr: Array<any>, values: Array<any>) {
+    return values.every(val => arr.includes(val));
+}
+
 export function blockAllNotifications() {
    const blockFeatures = getGlobalPref(GlobalPref.BLOCK_FEATURES);
-    const blockAll = [BlockFeature.FRIENDS, BlockFeature.NOTIFICATIONS_ACHIEVEMENTS, BlockFeature.NOTIFICATIONS_INVITES].every(value => blockFeatures.includes(value));
+    const blockAll = containsAll(blockFeatures, [BlockFeature.FRIENDS, BlockFeature.NOTIFICATIONS_ACHIEVEMENTS, BlockFeature.NOTIFICATIONS_INVITES]);
    return blockAll;
 }

--- a/src/utils/xbox-api.ts
+++ b/src/utils/xbox-api.ts
@ -9,17 +9,18 @@ export class XboxApi {
            return XboxApi.CACHED_TITLES[xboxTitleId];
        }

+        let title: string;
        try {
            const url = `https://displaycatalog.mp.microsoft.com/v7.0/products/lookup?market=US&languages=en&value=${xboxTitleId}&alternateId=XboxTitleId&fieldsTemplate=browse`;
            const resp = await NATIVE_FETCH(url);
            const json = await resp.json();

-            const productTitle = json['Products'][0]['LocalizedProperties'][0]['ProductTitle'];
-            XboxApi.CACHED_TITLES[xboxTitleId] = productTitle;
+            title = json['Products'][0]['LocalizedProperties'][0]['ProductTitle'];
+        } catch (e) {
+            title = 'Unknown Game #' + xboxTitleId;
+        }

-            return productTitle;
-        } catch (e) {}
-
-        return;
+        XboxApi.CACHED_TITLES[xboxTitleId] = title;
+        return title;
    }
 }
--- a/src/utils/xcloud-interceptor.ts
+++ b/src/utils/xcloud-interceptor.ts
@ -52,7 +52,7 @@ export class XcloudInterceptor {
        const response = await NATIVE_FETCH(request, init);
        if (response.status !== 200) {
            // Unsupported region
-            BxEventBus.Script.emit('xcloud.server.unavailable', {});
+            BxEventBus.Script.emit('xcloud.server', { status: 'unavailable' });
            return response;
        }

@ -92,8 +92,6 @@ export class XcloudInterceptor {
            STATES.serverRegions[region.name] = Object.assign({}, region);
        }

-        BxEventBus.Script.emit('xcloud.server.ready', {});
-
        const preferredRegion = getPreferredServerRegion();
        if (preferredRegion && preferredRegion in STATES.serverRegions) {
            const tmp = Object.assign({}, STATES.serverRegions[preferredRegion]);
@ -104,6 +102,7 @@ export class XcloudInterceptor {
        }

        STATES.gsToken = obj.gsToken;
+        BxEventBus.Script.emit('xcloud.server', { status: 'ready' });

        response.json = () => Promise.resolve(obj);
        return response;
--- a/src/utils/xhome-interceptor.ts
+++ b/src/utils/xhome-interceptor.ts
@ -95,7 +95,7 @@ export class XhomeInterceptor {
            });
        } else {
            TouchController.enable();
-            TouchController.requestCustomLayouts(xboxTitleId);
+            TouchController.requestCustomLayouts();
        }

        response.json = () => Promise.resolve(obj);
--- a/tsconfig.json
+++ b/tsconfig.json
@ -16,6 +16,9 @@
      "@modules/*": ["./modules/*"],
      "@utils/*": ["./utils/*"],
    },
+
+    "types": ["@types/bun", "@webgpu/types"],
+
    // Enable latest features
    "lib": ["ESNext", "DOM"],
    "target": "ESNext",
Author	SHA1	Message	Date
redphx	f7f01fd27e	Bump version to 6.6.2	2025-06-06 07:30:46 +07:00
redphx	67c2fb125f	Fix "ignoreNewsSection" patch	2025-06-06 07:29:53 +07:00
redphx	fad91d14a6	Fix "patchPollGamepads" patch	2025-06-06 07:27:34 +07:00
redphx	3a3fc77e83	Fix virtual controller stopped working (#731 )	2025-06-06 07:25:11 +07:00
redphx	4bf3bd3bb4	Use findAndParseParams() in "gameCardCustomIcons" patch	2025-05-31 11:30:21 +07:00
redphx	cc33e27bd6	Fix "ignoreSiglSections" patch	2025-05-31 11:16:34 +07:00
redphx	9112853dfc	Update stale.yaml	2025-05-31 09:59:55 +07:00
redphx	368164b567	Create stale.yaml	2025-05-31 09:58:13 +07:00
redphx	ce71c3043e	Bump version to 6.6.1	2025-05-29 21:03:52 +07:00
redphx	3bb138cd05	Fix "injectErrorPageUseEffect" patch (not showing Error page)	2025-05-29 20:59:31 +07:00
redphx	3d6688e1db	Set script version to 6.6.1-beta	2025-05-29 20:56:39 +07:00
redphx	fc354e680c	Upgrade bun	2025-05-29 20:56:25 +07:00
redphx	be51199279	Fix built scripts	2025-05-29 20:54:17 +07:00
redphx	e276d9a2b9	Fix "disableGamepadDisconnectedScreen" patch	2025-05-29 20:51:30 +07:00
redphx	c2f9f129d0	Bump version to 6.6.0	2025-05-29 08:50:09 +07:00
redphx	aa50261726	Update translations	2025-05-29 08:49:52 +07:00
redphx	bb32d97ae8	Fix "disableTouchContextMenu" patch	2025-05-29 08:44:16 +07:00
redphx	3d2abf6b12	Fix "enableTvRoutes" patch	2025-05-29 08:39:06 +07:00
redphx	4c8a49a43a	Fix "injectErrorPageUseEffect" patch	2025-05-29 08:38:41 +07:00
redphx	256f28695e	Fix "injectErrorPageUseEffect" patch	2025-05-29 08:27:20 +07:00
redphx	9e851fbd15	Fix "skipFeedbackDialog" patch	2025-05-29 08:21:36 +07:00
redphx	c829f74dcc	Fix "patchStreamHud" patch	2025-05-29 08:16:29 +07:00
redphx	62cf045f05	Fix "ignorePlayWithFriendsSection" patch	2025-05-29 07:53:13 +07:00
redphx	fdb4e58b5d	Fix "gameCardCustomIcons" patch	2025-05-29 07:47:32 +07:00
redphx	b1407c2447	Update translations	2025-05-29 07:34:25 +07:00
redphx	b5ba6e9600	Fix web's version detection	2025-05-29 07:34:07 +07:00
redphx	a3094d2c9f	Set Performance mode before Quality mode	2025-05-14 17:59:44 +07:00
redphx	3290a36886	Add Clarity boost mode	2025-05-14 17:21:50 +07:00
redphx	e502e49d64	Bump version to 6.5.0	2025-04-26 08:30:53 +07:00
redphx	604cf7094a	Update translations	2025-04-26 08:23:47 +07:00
redphx	3bfa7e5f21	Inject Better xCloud button to Remote Play page's header	2025-04-26 08:22:20 +07:00
redphx	e3789b4fb7	Add webOS and xboxOS to the list of OS names	2025-04-26 07:47:24 +07:00
redphx	0551d909e5	Support new screen ratios: 20:9, 3:2, 5:4	2025-04-21 07:15:51 +07:00
redphx	da6ab51ba0	Refactor Remote Play feature	2025-04-20 20:28:48 +07:00
redphx	4a65221ad0	Upgrade bun	2025-04-20 15:29:25 +07:00
redphx	528c6774fe	Bump version to 6.4.10	2025-04-16 16:43:40 +07:00
redphx	3c8a35d441	Fix "disableTouchContextMenu" patch	2025-04-16 16:42:59 +07:00
redphx	544ededb64	Bump version to 6.4.9	2025-04-15 04:52:46 +07:00
redphx	f4f88f688b	Fix script running on non-xCloud pages (#698 )	2025-04-15 04:52:21 +07:00
redphx	1fb1a64767	Fix Remote Play stopped working with xCloud 29.1.60	2025-04-15 04:39:50 +07:00
redphx	769649a376	Upgrade bun	2025-04-15 04:36:54 +07:00
redphx	057adb62df	Bump version to 6.4.8	2025-03-27 07:36:23 +07:00
redphx	98e8ff4783	Fix header's style in other pages	2025-03-27 07:26:05 +07:00
redphx	f5e1b0a9fa	Upgrade bun	2025-03-27 07:19:50 +07:00
redphx	8ea3503dd3	Update header's style for small screens	2025-03-27 07:19:08 +07:00
redphx	b733d55e9e	Bump version to 6.4.7	2025-03-21 06:37:13 +07:00
redphx	317ac9017b	Fix custom input icons not showing in game card	2025-03-21 06:28:59 +07:00
redphx	b8c62a1f4d	Fix Remote Play's achievement notification	2025-03-21 05:37:38 +07:00
redphx	7332528f72	Remove "enableConsoleLogging" patch from Stream page	2025-03-21 05:29:14 +07:00
redphx	d063500aae	Fix not detecting new xCloud version correctly	2025-03-21 05:26:09 +07:00
redphx	29ff1bc09c	Bump version to 6.4.6	2025-03-11 17:49:46 +07:00
redphx	8998daf14c	Always check for new version	2025-03-11 17:49:15 +07:00
redphx	8bdad8b319	Add Czech translations	2025-03-11 17:43:49 +07:00
redphx	5dd3ebdea1	Fix unable to connect to console using Remote Play in some cases	2025-03-11 17:27:59 +07:00
redphx	55d7796f96	Bump version to 6.4.5	2025-02-21 07:17:23 +07:00
redphx	0b02a758db	Fix custom touch control not working in Remote Play (#674 )	2025-02-21 07:10:54 +07:00
redphx	3b2abbf6bb	Fix video in detail page not playing (#679 )	2025-02-21 06:55:55 +07:00
redphx	43a66db697	Fix patches	2025-02-21 06:46:29 +07:00
redphx	a3130101f4	Bump version to 6.4.4	2025-02-14 09:04:49 +07:00
redphx	3483672554	Fix Remote Play stopped working	2025-02-14 09:04:33 +07:00
redphx	75d7443e0f	Bump version to 6.4.3	2025-02-14 06:25:04 +07:00
redphx	b5d2d0fdec	Enable "1080p (HQ)" setting for Remote Play	2025-02-14 06:24:52 +07:00
redphx	20afe92371	Bump version to 6.4.2	2025-02-14 06:06:01 +07:00
redphx	5738412f71	Fix crashing in LoadingScreen	2025-02-14 06:05:46 +07:00
redphx	d2ee3d2122	Bump version to 6.4.1	2025-02-08 20:21:20 +07:00
redphx	a65fd8233b	Upgrade bun	2025-02-08 20:20:58 +07:00
redphx	1375fb115d	Highlight "Bypass region" row in unsupported regions	2025-02-08 20:11:48 +07:00
redphx	bedf82d363	Minify shaders	2025-02-08 11:05:52 +07:00
redphx	b463e4f014	Define types for Patcher	2025-02-08 09:57:42 +07:00
redphx	2f8c776133	Stop using MutationObserver in root-dialog	2025-02-07 22:02:58 +07:00
redphx	585ee82776	Only call useEffect on mounted	2025-02-07 21:32:18 +07:00
redphx	3c2549178b	Patch createPortal	2025-02-07 21:31:01 +07:00
redphx	2fb2cfb004	Fix starting StreamStats multiple times	2025-02-07 18:21:07 +07:00
redphx	ac20cc51cc	Stop using MutationObserver in stream-ui	2025-02-07 17:31:30 +07:00
redphx	85339f09da	Simplify Patcher's logs	2025-02-07 17:10:18 +07:00
redphx	4b06d9fcff	useEffect() for Error page	2025-02-07 17:01:03 +07:00
redphx	d4c1e8cce3	Bug fixes	2025-02-07 09:00:22 +07:00
redphx	cf1f656ecf	Stop using MutationObserver to track StreamHud's expanded status	2025-02-07 08:43:06 +07:00
redphx	2fd482bb7b	Use a better method to show the Better xCloud button ASAP	2025-02-06 21:23:56 +07:00
redphx	63e5e90443	Bump version to 6.4.0	2025-02-05 20:25:15 +07:00
redphx	9034c173e7	Update translations	2025-02-05 20:22:39 +07:00
redphx	5949e1e411	Disable header & footer	2025-02-05 20:11:24 +07:00
redphx	5ce7ade574	Optimize CSS selectors	2025-02-05 17:29:21 +07:00
redphx	e45537adf0	Add EnableWebGPURenderer flag	2025-02-04 21:17:43 +07:00
redphx	f9c9dc9684	Remove "See All Games" 's background color in OLED theme	2025-02-04 21:07:04 +07:00
redphx	ff9a7962c5	Hide Friends section	2025-02-04 20:54:56 +07:00
redphx	d4f070f6bb	Allow hiding BYOG section	2025-02-04 20:51:50 +07:00
redphx	66b1f92f4c	Disable dropdown's animation	2025-02-04 20:24:46 +07:00
redphx	7a69e7f284	Add OLED theme (#658 )	2025-02-04 20:20:48 +07:00
redphx	664e865b82	Hide WebGPU renderer behind EnableWebGPURenderer flag	2025-02-04 19:29:43 +07:00
redphx	7894dea5ff	Allow hiding "Recently added, "Leaving soon" and "Genres" sections (#658 )	2025-02-03 21:25:38 +07:00
redphx	fd665b6fcd	Add WebGPU renderer (#648 )	2025-02-02 21:37:21 +07:00
redphx	39ecef976c	Optimize WebGL2	2025-02-02 21:12:21 +07:00
redphx	0d5fa0fc96	Optimize WebGPU	2025-02-02 17:57:46 +07:00
redphx	fccd84b7ef	Optimize WebGPU	2025-02-02 12:18:00 +07:00
redphx	eb1c027c30	Optimize WebGPU	2025-02-01 20:56:33 +07:00
redphx	6a211db52e	Test WebGPU	2025-02-01 17:14:31 +07:00
redphx	17dc7996b1	Replace alwaysTriggerOnChange with onChangeUi	2025-01-30 16:39:52 +07:00
redphx	fe418e6918	Automatically reset game setting's value if it has the same value as global's	2025-01-30 16:10:51 +07:00
redphx	96de61c301	Bump version to 6.3.1	2025-01-29 17:31:25 +07:00
redphx	54a3e144a6	Show "Unknown Game" when unable to get game's title	2025-01-29 15:47:29 +07:00
redphx	277a830d99	Fix unable to reset Virtual controller's preset & Keyboard shortcuts' preset	2025-01-29 15:28:04 +07:00
redphx	0ef8fe18ac	Fix calling definition.ready() multiple times	2025-01-29 15:06:34 +07:00
redphx	706665713f	Only switch to game settings if it's not empty (#652 )	2025-01-29 11:15:51 +07:00