Bump version to 5.6.0

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

@@ -14,41 +14,12 @@ body:
     id: device_type
     attributes:
       label: Device
-      description: "Which device are you using?"
+      description: "Which device type is this feature for?"
       options:
+        - All devices
         - Phone/Tablet
-        - Laptop
         - Desktop
         - TV
-        - Other
-      multiple: false
-    validations:
-      required: true
-  - type: dropdown
-    id: os
-    attributes:
-      label: "Operating System"
-      description: "Which operating system is it running?"
-      options:
-        - Windows
-        - macOS
-        - Linux
-        - Android
-        - iOS/iPadOS
-        - Other
-      multiple: false
-    validations:
-      required: true
-  - type: dropdown
-    id: browser
-    attributes:
-      label: "Browser"
-      description: "Which browser are you using?"
-      options:
-        - Chrome/Edge/Chromium
-        - Kiwi Browser
-        - Safari
-        - Other
       multiple: false
     validations:
       required: true

build.ts

@@ -2,9 +2,12 @@
 import { readFile } from "node:fs/promises";
 import { parseArgs } from "node:util";
 import { sys } from "typescript";
+// @ts-ignore
 import txtScriptHeader from "./src/assets/header_script.txt" with { type: "text" };
+// @ts-ignore
 import txtMetaHeader from "./src/assets/header_meta.txt" with { type: "text" };
 import { assert } from "node:console";
+import { ESLint } from "eslint";
 
 enum BuildTarget {
     ALL = 'all',
@@ -24,6 +27,7 @@ const postProcess = (str: string): string => {
 
     // Remove enum's inlining comments
     str = str.replaceAll(/ \/\* [A-Z0-9_]+ \*\//g, '');
+    str = str.replaceAll('/* @__PURE__ */ ', '');
 
     // Remove comments from import
     str = str.replaceAll(/\/\/ src.*\n/g, '');
@@ -80,10 +84,19 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
 
     // Save to script
     await Bun.write(path, scriptHeader + result);
-    console.log(`---- [${target}] done in ${performance.now() - startTime} ms`);
 
     // Create meta file
     await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
+
+    // Check with ESLint
+    const eslint = new ESLint();
+    const results = await eslint.lintFiles([path]);
+    results[0].messages.forEach((msg: any) => {
+        console.error(`${path}#${msg.line}: ${msg.message}`);
+    });
+
+    console.log(`---- [${target}] done in ${performance.now() - startTime} ms`);
+    console.log(`---- [${target}] ${new Date()}`);
 }
 
 const buildTargets = [
@@ -110,9 +123,26 @@ if (!values['version']) {
     sys.exit(-1);
 }
 
-console.log('Building: ', values['version']);
+async function main() {
+    const config = {};
+    console.log('Building: ', values['version']);
+    for (const target of buildTargets) {
+        await build(target, values['version']!!, config);
+    }
 
-const config = {};
+    console.log('\n** Press Enter to build or Esc to exit');
-for (const target of buildTargets) {
-    await build(target, values['version']!!, config);
 }
+
+function onKeyPress(data: any) {
+    const keyCode = data[0];
+    if (keyCode === 13) {  // Enter key
+        main();
+    } else if (keyCode === 27) {  // Esc key
+        process.exit(0);
+    }
+}
+
+main();
+process.stdin.setRawMode(true);
+process.stdin.resume();
+process.stdin.on('data', onKeyPress);

dist/better-xcloud.meta.js

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

eslint.config.mjs

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

package.json

@@ -2,13 +2,18 @@
   "name": "better-xcloud",
   "module": "src/index.ts",
   "type": "module",
+  "browserslist": [
+    "Chrome >= 80"
+  ],
   "bin": {
     "build": "build.ts"
   },
   "devDependencies": {
     "@types/bun": "^1.1.6",
-    "@types/node": "^20.14.12",
+    "@types/node": "^20.16.1",
     "@types/stylus": "^0.48.42",
+    "eslint": "^9.9.0",
+    "eslint-plugin-compat": "^6.0.0",
     "stylus": "^0.63.0"
   },
   "peerDependencies": {

src/assets/css/button.styl

@@ -141,9 +141,8 @@
         border-radius: 10px;
     }
 
-    &:focus-visible::after {
+    &:focus::after {
         offset = -6px;
-
         content: '';
         border-color: white;
         position: absolute;
@@ -153,6 +152,13 @@
         bottom: offset;
     }
 
+    html[data-active-input=touch] &,
+    html[data-active-input=mouse] & {
+        &:focus::after {
+            border-color: transparent !important;
+        }
+    }
+
     &.bx-circular {
         &::after {
             border-radius: var(--bx-button-height);
@@ -177,7 +183,7 @@ button.bx-inactive {
 .bx-button-shortcut {
     max-width: max-content;
     margin: 10px 0 0 0;
-    overflow: hidden;
+    flex: 1 0 auto;
 }
 
 @media (min-width: 568px) and (max-height: 480px) {

src/assets/css/root.styl

@@ -26,20 +26,22 @@ button_color(name, normal, hover, active, disabled)
     button_color('primary', #008746, #04b358, #044e2a, #448262);
     button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
 
-    --bx-toast-z-index: 9999;
+    --bx-fullscreen-text-z-index: 99999;
-    --bx-dialog-z-index: 9101;
+    --bx-toast-z-index: 60000;
-    --bx-dialog-overlay-z-index: 9100;
+    --bx-dialog-z-index: 50000;
-    --bx-stats-bar-z-index: 9010;
-    --bx-mkb-pointer-lock-msg-z-index: 9000;
 
-    --bx-navigation-dialog-z-index: 8999;
+    --bx-dialog-overlay-z-index: 40200;
-    --bx-navigation-dialog-overlay-z-index: 8998;
+    --bx-stats-bar-z-index: 40100;
+    --bx-mkb-pointer-lock-msg-z-index: 40000;
 
-    --bx-remote-play-popup-z-index: 2000;
+    --bx-navigation-dialog-z-index: 30100;
+    --bx-navigation-dialog-overlay-z-index: 30000;
 
-    --bx-game-bar-z-index: 1000;
+    --bx-remote-play-popup-z-index: 20000;
-    --bx-wait-time-box-z-index: 100;
+
-    --bx-screenshot-animation-z-index: 1;
+    --bx-game-bar-z-index: 10000;
+    --bx-screenshot-animation-z-index: 9000;
+    --bx-wait-time-box-z-index: 1000;
 }
 
 @font-face {
@@ -57,7 +59,7 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
 }
 
 /* Remove the "Cloud Gaming" text in header when the screen is too small */
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 640px) {
     header a[href="/play"] {
         display: none;
     }
@@ -190,3 +192,36 @@ div[class*=SupportedInputsBadge] {
         font-weight: bold;
     }
 }
+
+
+.bx-fullscreen-text {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000000cc;
+    z-index: var(--bx-fullscreen-text-z-index);
+    line-height: 100vh;
+    color: #fff;
+    text-align: center;
+    font-weight: 400;
+    font-family: var(--bx-normal-font);
+    font-size: 1.3rem;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+/* Device Code page */
+#root {
+    section[class*=DeviceCodePage-module__page] {
+        margin-left: 20px !important;
+        margin-right: 20px !important;
+        margin-top: 20px !important;
+        max-width: 800px !important;
+    }
+
+    div[class*=DeviceCodePage-module__back] {
+        display: none;
+    }
+}

src/assets/css/settings-dialog.styl

@@ -31,6 +31,42 @@
         font-weight: normal;
         height: var(--bx-button-height);
     }
+
+    input {
+        accent-color: var(--bx-primary-button-color);
+
+        &:focus {
+            accent-color: var(--bx-danger-button-color);
+        }
+    }
+
+    select:disabled {
+        -webkit-appearance: none;
+        background: transparent;
+        text-align-last: right;
+        border: none;
+        color: #fff;
+    }
+
+    select option:disabled {
+        display: none;
+    }
+
+    input[type=checkbox],
+    select {
+        &:focus {
+            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
+        }
+    }
+
+    a {
+        color: #5dc21e;
+        text-decoration: none;
+
+        &:hover, &:focus {
+            color: #128112;
+        }
+    }
 }
 
 .bx-settings-tabs-container {
@@ -245,10 +281,10 @@
 .bx-settings-row {
     display: flex;
     gap: 10px;
-    border-bottom: 1px solid #2c2c2e;
+    padding: 16px 10px;
-    padding: 16px 8px;
     margin: 0;
-    border-left: 2px solid transparent;
+    background: #2a2a2a;
+    border-bottom: 1px solid #343434;
 
     &:hover, &:focus-within {
         background-color: #242424;
@@ -258,16 +294,11 @@
         flex-wrap: wrap;
     }
 
-    input[type=checkbox],
+    /*
-    select {
-        &:focus {
-            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
-        }
-    }
-
     &:has(input:focus), &:has(select:focus), &:has(button:focus) {
         border-left-color: white;
     }
+    */
 
     > span.bx-settings-label {
         font-size: 14px;
@@ -280,26 +311,6 @@
             margin: 0 0 0 auto;
         }
     }
-
-    input {
-        accent-color: var(--bx-primary-button-color);
-
-        &:focus {
-            accent-color: var(--bx-danger-button-color);
-        }
-    }
-
-    select:disabled {
-        -webkit-appearance: none;
-        background: transparent;
-        text-align-last: right;
-        border: none;
-        color: #fff;
-    }
-
-    select option:disabled {
-        display: none;
-    }
 }
 
 .bx-settings-dialog-note {
@@ -333,15 +344,6 @@
     line-height: 20px;
     font-size: 14px;
     margin-top: 10px;
-    color: #5dc21e;
-
-    &:hover {
-        color: #6dd72b;
-    }
-
-    &:focus {
-        text-decoration: underline;
-    }
 }
 
 .bx-debug-info {
@@ -379,3 +381,189 @@
     font-weight: normal;
     color: #828282;
 }
+
+.bx-settings-tab-contents {
+    > div {
+        // Label at the beginning
+        *:not(.bx-settings-row):has(+ .bx-settings-row) + .bx-settings-row:has(+ .bx-settings-row) {
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+        }
+
+        // Label at the end
+        .bx-settings-row:not(:has(+ .bx-settings-row)) {
+            border: none;
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+        }
+
+        // Single label
+        *:not(.bx-settings-row):has(+ .bx-settings-row) + .bx-settings-row:not(:has(+ .bx-settings-row)) {
+            border: none;
+            border-radius: 10px;
+        }
+    }
+}
+
+.bx-suggest-toggler {
+    text-align: left;
+    display: flex;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #003861;
+
+    label {
+        flex: 1;
+        margin-bottom: 0;
+        padding: 10px;
+        background: #004f87;
+    }
+
+    span {
+        display: inline-block;
+        align-self: center;
+        padding: 10px;
+        width: 40px;
+        text-align: center;
+    }
+
+    &:hover, &:focus {
+        cursor: pointer;
+        background: #005da1;
+
+        label {
+            background: #006fbe;
+        }
+    }
+
+    &[bx-open] {
+        span {
+            transform: rotate(90deg);
+        }
+
+        &+ .bx-suggest-box {
+            display: block;
+        }
+    }
+}
+
+.bx-suggest-box {
+    display: none;
+    background: #161616;
+    padding: 10px;
+    box-shadow: 0px 0px 12px #0f0f0f inset;
+    border-radius: 10px;
+}
+
+.bx-suggest-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 10px;
+}
+
+.bx-suggest-note {
+    font-size: 11px;
+    color: #8c8c8c;
+    font-style: italic;
+    font-weight: 100;
+}
+
+.bx-suggest-link {
+    font-size: 12px;
+    display: inline-block;
+    margin-top: 10px;
+}
+
+.bx-suggest-row {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    label {
+        flex: 1;
+        overflow: overlay;
+        border-radius: 4px;
+
+        .bx-suggest-label {
+            background: #323232;
+            padding: 4px 10px;
+            font-size: 12px;
+            text-align: left;
+        }
+
+        .bx-suggest-value {
+            padding: 6px;
+            font-size: 14px;
+
+            &.bx-suggest-change {
+                background-color: var(--bx-warning-color);
+            }
+        }
+    }
+
+    &.bx-suggest-ok {
+        input {
+            visibility: hidden;
+        }
+
+        .bx-suggest-label {
+            background-color: #008114;
+        }
+
+        .bx-suggest-value {
+            background-color: #13a72a;
+        }
+    }
+
+    &.bx-suggest-change {
+        .bx-suggest-label {
+            background-color: #a65e08;
+        }
+
+        .bx-suggest-value {
+            background-color: #d57f18;
+        }
+
+        &:hover {
+            label {
+                cursor: pointer;
+            }
+
+            .bx-suggest-label {
+                background-color: #995707;
+            }
+
+            .bx-suggest-value {
+                background-color: #bd7115;
+            }
+        }
+
+        // Unchecked setting
+        input:not(:checked) + label {
+            opacity: 0.5;
+
+            .bx-suggest-label {
+                background-color: #2a2a2a;
+            }
+
+            .bx-suggest-value {
+                background-color: #393939;
+            }
+        }
+
+        &:hover {
+            input:not(:checked) + label {
+                opacity: 1;
+
+                .bx-suggest-label {
+                    background-color: #202020;
+                }
+
+                .bx-suggest-value {
+                    background-color: #303030;
+                }
+            }
+        }
+    }
+}

src/enums/bypass-servers.ts

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

src/index.ts

@@ -20,9 +20,8 @@ import { RemotePlay } from "@modules/remote-play";
 import { onHistoryChanged, patchHistoryMethod } from "@utils/history";
 import { VibrationManager } from "@modules/vibration-manager";
 import { overridePreloadState } from "@utils/preload-state";
-import { patchAudioContext, patchCanvasContext, patchMeControl, patchPointerLockApi, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
+import { disableAdobeAudienceManager, patchAudioContext, patchCanvasContext, patchMeControl, patchPointerLockApi, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
 import { AppInterface, STATES } from "@utils/global";
-import { injectStreamMenuButtons } from "@modules/stream/stream-ui";
 import { BxLogger } from "@utils/bx-logger";
 import { GameBar } from "./modules/game-bar/game-bar";
 import { Screenshot } from "./utils/screenshot";
@@ -35,7 +34,10 @@ import { GameTile } from "./modules/ui/game-tile";
 import { ProductDetailsPage } from "./modules/ui/product-details";
 import { NavigationDialogManager } from "./modules/ui/dialog/navigation-dialog";
 import { PrefKey } from "./enums/pref-keys";
-import { getPref } from "./utils/settings-storages/global-settings-storage";
+import { getPref, StreamTouchController } from "./utils/settings-storages/global-settings-storage";
+import { compressCss } from "@macros/build" with {type: "macro"};
+import { SettingsNavigationDialog } from "./modules/ui/dialog/settings-dialog";
+import { StreamUiHandler } from "./modules/stream/stream-ui";
 
 
 // Handle login page
@@ -64,7 +66,7 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     window.stop();
 
     // Show the reloading overlay
-    const css = `
+    const css = compressCss(`
 .bx-reload-overlay {
     position: fixed;
     top: 0;
@@ -78,7 +80,7 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     font-family: "Segoe UI", Arial, Helvetica, sans-serif;
     font-size: 1.3rem;
 }
-`;
+`);
     const $fragment = document.createDocumentFragment();
     $fragment.appendChild(CE('style', {}, css));
     $fragment.appendChild(CE('div', {'class': 'bx-reload-overlay'}, t('safari-failed-message')));
@@ -110,14 +112,14 @@ document.addEventListener('readystatechange', e => {
         return;
     }
 
-    STATES.isSignedIn = (window as any).xbcUser?.isSignedIn;
+    STATES.isSignedIn = !!((window as any).xbcUser?.isSignedIn);
 
     if (STATES.isSignedIn) {
         // Preload Remote Play
-        getPref(PrefKey.REMOTE_PLAY_ENABLED) && BX_FLAGS.PreloadRemotePlay && RemotePlay.preload();
+        getPref(PrefKey.REMOTE_PLAY_ENABLED) && RemotePlay.preload();
     } else {
-        // Show Settings button in the header when not signed
+        // Show Settings button in the header when not signed in
-        HeaderSection.watchHeader();
+        window.setTimeout(HeaderSection.watchHeader, 2000);
     }
 
     // Hide "Play with Friends" skeleton section
@@ -144,10 +146,14 @@ window.history.replaceState = patchHistoryMethod('replaceState');
 window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
     STATES.supportedRegion = false;
     window.setTimeout(HeaderSection.watchHeader, 2000);
+
+    // Open Settings dialog on Unsupported page
+    SettingsNavigationDialog.getInstance().show();
 });
 
 window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
-    HeaderSection.watchHeader();
+    STATES.isSignedIn = true;
+    window.setTimeout(HeaderSection.watchHeader, 2000);
 });
 
 window.addEventListener(BxEvent.STREAM_LOADING, e => {
@@ -180,7 +186,7 @@ window.addEventListener(BxEvent.STREAM_STARTING, e => {
 
 window.addEventListener(BxEvent.STREAM_PLAYING, e => {
     STATES.isPlaying = true;
-    injectStreamMenuButtons();
+    StreamUiHandler.observe();
 
     if (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
         const gameBar = GameBar.getInstance();
@@ -313,7 +319,11 @@ function main() {
     AppInterface && patchPointerLockApi();
 
     getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext();
-    getPref(PrefKey.BLOCK_TRACKING) && patchMeControl();
+
+    if (getPref(PrefKey.BLOCK_TRACKING)) {
+        patchMeControl();
+        disableAdobeAudienceManager();
+    }
 
     STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
     overridePreloadState();
@@ -349,7 +359,7 @@ function main() {
         RemotePlay.detect();
     }
 
-    if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
+    if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
         TouchController.setup();
     }
 

src/macros/build.ts

@@ -1,18 +1,19 @@
 import stylus from 'stylus';
 
-import cssStr from "@assets/css/styles.styl" with { type: "text" };
+export const renderStylus = async () => {
+    const file = Bun.file('./src/assets/css/styles.styl');
+    const cssStr = await file.text();
 
-const generatedCss = await (stylus(cssStr, {})
+    const generatedCss = await (stylus(cssStr, {})
-	.set('filename', 'styles.css')
+        .set('filename', 'styles.css')
-	.set('compress', true)
+        .set('compress', true)
-	.include('src/assets/css/'))
+        .include('src/assets/css/'))
-	.render();
+        .render();
 
-export const renderStylus = () => {
     return generatedCss;
 };
 
 
 export const compressCss = async (css: string) => {
-	return await (stylus(css, {}).set('compress', true)).render();
+    return await (stylus(css, {}).set('compress', true)).render();
 };

src/modules/controller-shortcut.ts

@@ -1,7 +1,7 @@
 import { Screenshot } from "@utils/screenshot";
 import { GamepadKey } from "@enums/mkb";
 import { PrompFont } from "@enums/prompt-font";
-import { CE } from "@utils/html";
+import { CE, removeChildElements } from "@utils/html";
 import { t } from "@utils/translation";
 import { EmulatedMkbHandler } from "./mkb/mkb-handler";
 import { StreamStats } from "./stream/stream-stats";
@@ -174,9 +174,7 @@ export class ControllerShortcut {
         const $fragment = document.createDocumentFragment();
 
         // Remove old profiles
-        while ($select.firstElementChild) {
+        removeChildElements($select);
-            $select.firstElementChild.remove();
-        }
 
         const gamepads = navigator.getGamepads();
         let hasGamepad = false;

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

@@ -7,7 +7,7 @@ import type { BaseGameBarAction } from "./action-base";
 import { STATES } from "@utils/global";
 import { MicrophoneAction } from "./action-microphone";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { getPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
 
 
 export class GameBar {
@@ -42,7 +42,7 @@ export class GameBar {
 
         this.actions = [
             new ScreenshotAction(),
-            ...(STATES.userAgent.capabilities.touch && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off') ? [new TouchControlAction()] : []),
+            ...(STATES.userAgent.capabilities.touch && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== StreamTouchController.OFF) ? [new TouchControlAction()] : []),
             new MicrophoneAction(),
         ];
 

src/modules/patcher.ts

@@ -15,13 +15,40 @@ import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "te
 import { FeatureGates } from "@/utils/feature-gates.js";
 import { UiSection } from "@/enums/ui-sections.js";
 import { PrefKey } from "@/enums/pref-keys.js";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { getPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
 import { GamePassCloudGallery } from "@/enums/game-pass-gallery.js";
 
 type PatchArray = (keyof typeof PATCHES)[];
 
-const ENDING_CHUNKS_PATCH_NAME = 'loadingEndingChunks';
+class PatcherUtils {
+    static indexOf(txt: string, searchString: string, startIndex: number, maxRange: number): number {
+        const index = txt.indexOf(searchString, startIndex);
+        if (index < 0 || (maxRange && index - startIndex > maxRange)) {
+            return -1;
+        }
 
+        return index;
+    }
+
+    static lastIndexOf(txt: string, searchString: string, startIndex: number, maxRange: number): number {
+        const index = txt.lastIndexOf(searchString, startIndex);
+        if (index < 0 || (maxRange && startIndex - index > maxRange)) {
+            return -1;
+        }
+
+        return index;
+    }
+
+    static insertAt(txt: string, index: number, insertString: string): string {
+        return txt.substring(0, index) + insertString + txt.substring(index);
+    }
+
+    static replaceWith(txt: string, index: number, fromString: string, toString: string): string {
+        return txt.substring(0, index) + toString + txt.substring(index + fromString.length);
+    }
+}
+
+const ENDING_CHUNKS_PATCH_NAME = 'loadingEndingChunks';
 const LOG_TAG = 'Patcher';
 
 const PATCHES = {
@@ -33,11 +60,11 @@ const PATCHES = {
             return false;
         }
 
-        if (str.substring(0, index + 200).includes('"AppInsightsCore')) {
+        if (PatcherUtils.indexOf(str, '"AppInsightsCore', index, 200) < 0) {
             return false;
         }
 
-        return str.substring(0, index) + '.track=function(e){},!!function(' + str.substring(index + text.length);
+        return PatcherUtils.replaceWith(str, index, text, '.track=function(e){},!!function(');
     },
 
     // Set disableTelemetry() to true
@@ -140,16 +167,6 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
         return str.replace(text, text + newCode);
     },
 
-    // Disable trackEvent() function
-    disableTrackEvent(str: string) {
-        const text = 'this.trackEvent=';
-        if (!str.includes(text)) {
-            return false;
-        }
-
-        return str.replace(text, 'this.trackEvent=e=>{},this.uwuwu=');
-    },
-
     // Block WebRTC stats collector
     blockWebRtcStatsCollector(str: string) {
         const text = 'this.shouldCollectStats=!0';
@@ -375,9 +392,11 @@ if (window.BX_EXPOSED.stopTakRendering) {
             return false;
         }
 
-        let remotePlayCode = '';
+        let autoOffCode = '';
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off' && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.OFF) {
-            remotePlayCode = `
+            autoOffCode = 'return;';
+        } else if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
+            autoOffCode = `
 const gamepads = window.navigator.getGamepads();
 let gamepadFound = false;
 
@@ -395,13 +414,11 @@ if (gamepadFound) {
         }
 
         const newCode = `
-if (!!window.BX_REMOTE_PLAY_CONFIG) {
+${autoOffCode}
-    ${remotePlayCode}
+
-} else {
+const titleInfo = window.BX_EXPOSED.getTitleInfo();
-    const titleInfo = window.BX_EXPOSED.getTitleInfo();
+if (titleInfo && !titleInfo.details.hasTouchSupport && !titleInfo.details.hasFakeTouchSupport) {
-    if (titleInfo && !titleInfo.details.hasTouchSupport && !titleInfo.details.hasFakeTouchSupport) {
+    return;
-        return;
-    }
 }
 `;
 
@@ -433,7 +450,7 @@ e.guideUI = null;
 `;
 
         // Remove the TAK Edit button when the touch controller is disabled
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off') {
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.OFF) {
             newCode += 'e.canShowTakHUD = false;';
         }
 
@@ -726,12 +743,12 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('return', index - 50);
+        index = PatcherUtils.lastIndexOf(str, 'return', index, 50);
         if (index < 0) {
             return false;
         }
 
-        str = str.substring(0, index) + 'return null;' + str.substring(index + 6);
+        str = PatcherUtils.replaceWith(str, index, 'return', 'return null;');
         return str;
     },
 
@@ -742,14 +759,17 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('grid:!0,', index);
+        index = PatcherUtils.indexOf(str, 'grid:!0,', index, 1500);
-        index > -1 && (index = str.indexOf('(0,', index - 70));
-
         if (index < 0) {
             return false;
         }
 
-        str = str.substring(0, index) + 'true ? null :' + str.substring(index);
+        index = PatcherUtils.lastIndexOf(str, '(0,', index, 70);
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, 'true ? null :');
         return str;
     },
 
@@ -760,12 +780,12 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('const ', index - 100);
+        index = PatcherUtils.lastIndexOf(str, 'const ', index, 30);
         if (index < 0) {
             return false;
         }
 
-        str = str.substring(0, index) + 'return null;' + str.substring(index);
+        str = PatcherUtils.insertAt(str, index, 'return null;');
         return str;
     },
 
@@ -776,7 +796,7 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('const[', index - 300);
+        index = PatcherUtils.lastIndexOf(str, 'const[', index, 300);
         if (index < 0) {
             return false;
         }
@@ -784,7 +804,7 @@ true` + text;
         const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS) as UiSection[];
         const siglIds: GamePassCloudGallery[] = [];
 
-        const sections: Partial<Record<UiSection, GamePassCloudGallery>> = {
+        const sections: PartialRecord<UiSection, GamePassCloudGallery> = {
             [UiSection.NATIVE_MKB]: GamePassCloudGallery.NATIVE_MKB,
             [UiSection.MOST_POPULAR]: GamePassCloudGallery.MOST_POPULAR,
         };
@@ -804,7 +824,7 @@ if (e && e.id) {
     }
 }
 `;
-        str = str.substring(0, index) + newCode + str.substring(index);
+        str = PatcherUtils.insertAt(str, index, newCode);
         return str;
     },
 
@@ -872,6 +892,26 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
         str = str.substring(0, index) + 'BxEvent.dispatch(window, BxEvent.XCLOUD_RENDERING_COMPONENT, {component: "product-details"});' + str.substring(index);
         return str;
     },
+
+    detectBrowserRouterReady(str: string) {
+        const text = 'BrowserRouter:()=>';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        let index = str.indexOf('{history:this.history,');
+        if (index < 0) {
+            return false;
+        }
+
+        index = PatcherUtils.lastIndexOf(str, 'return', index, 100);
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, 'window.BxEvent.dispatch(window, window.BxEvent.XCLOUD_ROUTER_HISTORY_READY, {history: this.history});');
+        return str;
+    },
 };
 
 let PATCH_ORDERS: PatchArray = [
@@ -882,6 +922,7 @@ let PATCH_ORDERS: PatchArray = [
         'exposeInputSink',
     ] : []),
 
+    'detectBrowserRouterReady',
     'patchRequestInfoCrash',
 
     'disableStreamGate',
@@ -915,7 +956,6 @@ let PATCH_ORDERS: PatchArray = [
         'disableIndexDbLogging',
 
         'disableTelemetryProvider',
-        'disableTrackEvent',
     ] : []),
 
     ...(getPref(PrefKey.REMOTE_PLAY_ENABLED) ? [
@@ -951,9 +991,9 @@ let PLAYING_PATCH_ORDERS: PatchArray = [
     getPref(PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG) && 'skipFeedbackDialog',
 
     ...(STATES.userAgent.capabilities.touch ? [
-        getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'patchShowSensorControls',
+        getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL && 'patchShowSensorControls',
-        getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'exposeTouchLayoutManager',
+        getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL && 'exposeTouchLayoutManager',
-        (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off' || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF) || !STATES.userAgent.capabilities.touch) && 'disableTakRenderer',
+        (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.OFF || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF) || !STATES.userAgent.capabilities.touch) && 'disableTakRenderer',
         getPref(PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
         'patchBabylonRendererClass',
     ] : []),
@@ -1078,7 +1118,7 @@ export class Patcher {
                     item[1][id] = eval(patchedFuncStr);
                 } catch (e: unknown) {
                     if (e instanceof Error) {
-                        BxLogger.error(LOG_TAG, 'Error', appliedPatches, e.message);
+                        BxLogger.error(LOG_TAG, 'Error', appliedPatches, e.message, patchedFuncStr);
                     }
                 }
             }

src/modules/player/webgl2-player.ts

@@ -124,7 +124,7 @@ export class WebGL2Player {
     #setupShaders() {
         BxLogger.info(LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
 
-        const gl = this.#$canvas.getContext('webgl2', {
+        const gl = this.#$canvas.getContext('webgl', {
             isBx: true,
             antialias: true,
             alpha: false,

src/modules/stream/stream-ui.ts

@@ -8,212 +8,271 @@ import { StreamStats } from "./stream-stats.ts";
 import { SettingsNavigationDialog } from "../ui/dialog/settings-dialog.ts";
 
 
-function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: typeof BxIcon) {
+export class StreamUiHandler {
-    const $container = $orgButton.cloneNode(true) as HTMLElement;
+    private static $btnStreamSettings: HTMLElement | null | undefined;
-    let timeout: number | null;
+    private static $btnStreamStats: HTMLElement | null | undefined;
+    private static $btnRefresh: HTMLElement | null | undefined;
+    private static $btnHome: HTMLElement | null | undefined;
+    private static observer: MutationObserver | undefined;
 
-    const onTransitionStart = (e: TransitionEvent) => {
+    private static cloneStreamHudButton($btnOrg: HTMLElement, label: string, svgIcon: typeof BxIcon): HTMLElement | null {
-        if (e.propertyName !== 'opacity') {
+        if (!$btnOrg) {
+            return null;
+        }
+
+        const $container = $btnOrg.cloneNode(true) as HTMLElement;
+        let timeout: number | null;
+
+        // Prevent touching other button while the bar is showing/hiding
+        if (STATES.browser.capabilities.touch) {
+            const onTransitionStart = (e: TransitionEvent) => {
+                if (e.propertyName !== 'opacity') {
+                    return;
+                }
+
+                timeout && clearTimeout(timeout);
+                (e.target as HTMLElement).style.pointerEvents = 'none';
+            };
+
+            const onTransitionEnd = (e: TransitionEvent) => {
+                if (e.propertyName !== 'opacity') {
+                    return;
+                }
+
+                const $streamHud = (e.target as HTMLElement).closest('#StreamHud') as HTMLElement;
+                if (!$streamHud) {
+                    return;
+                }
+
+                const left = $streamHud.style.left;
+                if (left === '0px') {
+                    const $target = e.target as HTMLElement;
+                    timeout && clearTimeout(timeout);
+                    timeout = window.setTimeout(() => {
+                        $target.style.pointerEvents = 'auto';
+                    }, 100);
+                }
+            };
+
+            $container.addEventListener('transitionstart', onTransitionStart);
+            $container.addEventListener('transitionend', onTransitionEnd);
+        }
+
+        const $button = $container.querySelector('button') as HTMLElement;
+        if (!$button) {
+            return null;
+        }
+        $button.setAttribute('title', label);
+
+        const $orgSvg = $button.querySelector('svg') as SVGElement;
+        if (!$orgSvg) {
+            return null;
+        }
+
+        const $svg = createSvgIcon(svgIcon);
+        $svg.style.fill = 'none';
+        $svg.setAttribute('class', $orgSvg.getAttribute('class') || '');
+        $svg.ariaHidden = 'true';
+
+        $orgSvg.replaceWith($svg);
+        return $container;
+    }
+
+    private static cloneCloseButton($btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any): HTMLElement | null {
+        if (!$btnOrg) {
+            return null;
+        }
+        // Create button from the Close button
+        const $btn = $btnOrg.cloneNode(true) as HTMLElement;
+
+        const $svg = createSvgIcon(icon);
+        // Copy classes
+        $svg.setAttribute('class', $btn.firstElementChild!.getAttribute('class') || '');
+        $svg.style.fill = 'none';
+
+        $btn.classList.add(className);
+        // Remove icon
+        $btn.removeChild($btn.firstElementChild!);
+        // Add icon
+        $btn.appendChild($svg);
+        // Add "click" event listener
+        $btn.addEventListener('click', onChange);
+
+        return $btn;
+    }
+
+    private static async handleStreamMenu() {
+        const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
+        if (!$btnCloseHud) {
             return;
         }
 
-        timeout && clearTimeout(timeout);
+        let $btnRefresh = StreamUiHandler.$btnRefresh;
-        $container.style.pointerEvents = 'none';
+        let $btnHome = StreamUiHandler.$btnHome;
-    };
 
-    const onTransitionEnd = (e: TransitionEvent) => {
+        // Create Refresh button from the Close button
-        if (e.propertyName !== 'opacity') {
+        if (typeof $btnRefresh === 'undefined') {
+            $btnRefresh = StreamUiHandler.cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => {
+                confirm(t('confirm-reload-stream')) && window.location.reload();
+            });
+        }
+
+        if (typeof $btnHome === 'undefined') {
+            $btnHome = StreamUiHandler.cloneCloseButton($btnCloseHud, BxIcon.HOME, 'bx-stream-home-button', () => {
+                confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
+            });
+        }
+
+        // Add to website
+        if ($btnRefresh && $btnHome) {
+            $btnCloseHud.insertAdjacentElement('afterend', $btnRefresh);
+            $btnRefresh.insertAdjacentElement('afterend', $btnHome);
+        }
+
+        // Render stream badges
+        const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
+        $menu?.appendChild(await StreamBadges.getInstance().render());
+    }
+
+    private static handleSystemMenu($streamHud: HTMLElement) {
+        // Grip handle
+        const $gripHandle = $streamHud.querySelector('button[class^=GripHandle]') as HTMLElement;
+        if (!$gripHandle) {
             return;
         }
 
-        const left = document.getElementById('StreamHud')?.style.left;
+        // Get the last button
-        if (left === '0px') {
+        const $orgButton = $streamHud.querySelector('div[class^=HUDButton]') as HTMLElement;
-            timeout && clearTimeout(timeout);
+        if (!$orgButton) {
-            timeout = window.setTimeout(() => {
+            return;
-                    $container.style.pointerEvents = 'auto';
-                }, 100);
         }
-    };
 
-    if (STATES.browser.capabilities.touch) {
+        const hideGripHandle = () => {
-        $container.addEventListener('transitionstart', onTransitionStart);
+            if (!$gripHandle) {
-        $container.addEventListener('transitionend', onTransitionEnd);
-    }
-
-    const $button = $container.querySelector('button')!;
-    $button.setAttribute('title', label);
-
-    const $orgSvg = $button.querySelector('svg')!;
-    const $svg = createSvgIcon(svgIcon);
-    $svg.style.fill = 'none';
-    $svg.setAttribute('class', $orgSvg.getAttribute('class') || '');
-    $svg.ariaHidden = 'true';
-
-    $orgSvg.replaceWith($svg);
-    return $container;
-}
-
-
-function cloneCloseButton($$btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any) {
-    // Create button from the Close button
-    const $btn = $$btnOrg.cloneNode(true) as HTMLElement;
-
-    // Refresh SVG
-    const $svg = createSvgIcon(icon);
-    // Copy classes
-    $svg.setAttribute('class', $btn.firstElementChild!.getAttribute('class') || '');
-    $svg.style.fill = 'none';
-
-    $btn.classList.add(className);
-    // Remove icon
-    $btn.removeChild($btn.firstElementChild!);
-    // Add icon
-    $btn.appendChild($svg);
-    // Add "click" event listener
-    $btn.addEventListener('click', onChange);
-
-    return $btn;
-}
-
-
-export function injectStreamMenuButtons() {
-    const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
-    if (!$screen) {
-        return;
-    }
-
-    if (($screen as any).xObserving) {
-        return;
-    }
-
-    ($screen as any).xObserving = true;
-
-    let $btnStreamSettings: HTMLElement;
-    let $btnStreamStats: HTMLElement;
-    const streamStats = StreamStats.getInstance();
-
-    const observer = new MutationObserver(mutationList => {
-        mutationList.forEach(item => {
-            if (item.type !== 'childList') {
                 return;
             }
 
-            item.addedNodes.forEach(async $node => {
+            $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
-                if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
+            $gripHandle.click();
-                    return;
+            $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
-                }
+            $gripHandle.click();
+        }
 
-                let $elm: HTMLElement | null = $node as HTMLElement;
+        // Create Stream Settings button
+        let $btnStreamSettings = StreamUiHandler.$btnStreamSettings;
+        if (typeof $btnStreamSettings === 'undefined') {
+            $btnStreamSettings = StreamUiHandler.cloneStreamHudButton($orgButton, t('better-xcloud'), BxIcon.BETTER_XCLOUD);
+            $btnStreamSettings?.addEventListener('click', e => {
+                hideGripHandle();
+                e.preventDefault();
 
-                // Ignore SVG elements
+                // Show Stream Settings dialog
-                if ($elm instanceof SVGSVGElement) {
+                SettingsNavigationDialog.getInstance().show();
-                    return;
+            });
-                }
 
-                // Error Page: .PureErrorPage.ErrorScreen
+            StreamUiHandler.$btnStreamSettings = $btnStreamSettings;
-                if ($elm.className?.includes('PureErrorPage')) {
+        }
-                    BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
-                    return;
-                }
 
-                // Render badges
+        // Create Stream Stats button
-                if ($elm.className?.startsWith('StreamMenu-module__container')) {
+        const streamStats = StreamStats.getInstance();
-                    const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
+        let $btnStreamStats = StreamUiHandler.$btnStreamStats;
-                    if (!$btnCloseHud) {
+        if (typeof $btnStreamStats === 'undefined') {
-                        return;
+            $btnStreamStats = StreamUiHandler.cloneStreamHudButton($orgButton, t('stream-stats'), BxIcon.STREAM_STATS);
-                    }
+            $btnStreamStats?.addEventListener('click', e => {
+                hideGripHandle();
+                e.preventDefault();
 
-                    // Create Refresh button from the Close button
+                // Toggle Stream Stats
-                    const $btnRefresh = cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => {
+                streamStats.toggle();
-                        confirm(t('confirm-reload-stream')) && window.location.reload();
-                    });
-
-                    const $btnHome = cloneCloseButton($btnCloseHud, BxIcon.HOME, 'bx-stream-home-button', () => {
-                        confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
-                    });
-
-                    // Add to website
-                    $btnCloseHud.insertAdjacentElement('afterend', $btnRefresh);
-                    $btnRefresh.insertAdjacentElement('afterend', $btnHome);
-
-                    // Render stream badges
-                    const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
-                    $menu?.appendChild(await StreamBadges.getInstance().render());
-
-                    return;
-                }
-
-                if ($elm.className?.startsWith('Overlay-module_') || $elm.className?.startsWith('InProgressScreen')) {
-                    $elm = $elm.querySelector('#StreamHud');
-                }
-
-                if (!$elm || ($elm.id || '') !== 'StreamHud') {
-                    return;
-                }
-
-                // Grip handle
-                const $gripHandle = $elm.querySelector('button[class^=GripHandle]') as HTMLElement;
-
-                const hideGripHandle = () => {
-                    if (!$gripHandle) {
-                        return;
-                    }
-
-                    $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
-                    $gripHandle.click();
-                    $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
-                    $gripHandle.click();
-                }
-
-                // Get the second last button
-                const $orgButton = $elm.querySelector('div[class^=HUDButton]') as HTMLElement;
-                if (!$orgButton) {
-                    return;
-                }
-
-                // Create Stream Settings button
-                if (!$btnStreamSettings) {
-                    $btnStreamSettings = cloneStreamHudButton($orgButton, t('better-xcloud'), BxIcon.BETTER_XCLOUD);
-                    $btnStreamSettings.addEventListener('click', e => {
-                        hideGripHandle();
-                        e.preventDefault();
-
-                        // Show Stream Settings dialog
-                        SettingsNavigationDialog.getInstance().show();
-                    });
-                }
-
-                // Create Stream Stats button
-                if (!$btnStreamStats) {
-                    $btnStreamStats = cloneStreamHudButton($orgButton, t('stream-stats'), BxIcon.STREAM_STATS);
-                    $btnStreamStats.addEventListener('click', e => {
-                        hideGripHandle();
-                        e.preventDefault();
-
-                        // Toggle Stream Stats
-                        streamStats.toggle();
-
-                        const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
-                        $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
-                    });
-                }
 
                 const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
-                $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
+                $btnStreamStats!.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
+            });
 
-                if ($orgButton) {
+            StreamUiHandler.$btnStreamStats = $btnStreamStats;
-                    const $btnParent = $orgButton.parentElement!;
+        }
 
-                    // Insert buttons after Stream Settings button
+        const $btnParent = $orgButton.parentElement!;
-                    $btnParent.insertBefore($btnStreamStats, $btnParent.lastElementChild);
-                    $btnParent.insertBefore($btnStreamSettings, $btnStreamStats);
 
-                    // Move the Dots button to the beginning
+        if ($btnStreamSettings && $btnStreamStats) {
-                    const $dotsButton = $btnParent.lastElementChild!;
+            const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
-                    $dotsButton.parentElement!.insertBefore($dotsButton, $dotsButton.parentElement!.firstElementChild);
+            $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
+
+            // Insert buttons after Stream Settings button
+            $btnParent.insertBefore($btnStreamStats, $btnParent.lastElementChild);
+            $btnParent.insertBefore($btnStreamSettings, $btnStreamStats);
+        }
+
+        // Move the Dots button to the beginning
+        const $dotsButton = $btnParent.lastElementChild!;
+        $dotsButton.parentElement!.insertBefore($dotsButton, $dotsButton.parentElement!.firstElementChild);
+    }
+
+    static reset() {
+        StreamUiHandler.$btnStreamSettings = undefined;
+        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 => {
+            mutationList.forEach(item => {
+                if (item.type !== 'childList') {
+                    return;
                 }
+
+                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')) {
+                        BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
+                        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});
+        observer.observe($screen, {subtree: true, childList: true});
+        StreamUiHandler.observer = observer;
+    }
 }

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

@@ -2,7 +2,7 @@ import { GamepadKey } from "@/enums/mkb";
 import { EmulatedMkbHandler } from "@/modules/mkb/mkb-handler";
 import { BxEvent } from "@/utils/bx-event";
 import { STATES } from "@/utils/global";
-import { CE } from "@/utils/html";
+import { CE, isElementVisible } from "@/utils/html";
 import { setNearby } from "@/utils/navigation-utils";
 
 export enum NavigationDirection {
@@ -519,11 +519,8 @@ export class NavigationDialogManager {
             return null;
         }
 
-        const rect = $elm.getBoundingClientRect();
-        const isVisible = !!rect.width && !!rect.height;
-
         // Ignore hidden element
-        if (!isVisible) {
+        if (!isElementVisible($elm)) {
             return null;
         }
 
@@ -547,7 +544,7 @@ export class NavigationDialogManager {
         const children = Array.from($elm.children);
 
         // Search from right to left if the orientation is horizontal
-        const orientation = ($elm as NavigationElement).nearby?.orientation;
+        const orientation = ($elm as NavigationElement).nearby?.orientation || 'vertical';
         if (orientation === 'horizontal' || (orientation === 'vertical' && direction === NavigationDirection.UP)) {
             children.reverse();
         }

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

@@ -1,5 +1,5 @@
 import { onChangeVideoPlayerType, updateVideoPlayer } from "@/modules/stream/stream-settings-utils";
-import { ButtonStyle, CE, createButton, createSvgIcon } from "@/utils/html";
+import { ButtonStyle, CE, createButton, createSvgIcon, removeChildElements } from "@/utils/html";
 import { NavigationDialog, NavigationDirection } from "./navigation-dialog";
 import { ControllerShortcut } from "@/modules/controller-shortcut";
 import { MkbRemapper } from "@/modules/mkb/mkb-remapper";
@@ -17,13 +17,14 @@ import { setNearby } from "@/utils/navigation-utils";
 import { PatcherCache } from "@/modules/patcher";
 import { UserAgentProfile } from "@/enums/user-agent";
 import { UserAgent } from "@/utils/user-agent";
-import { BX_FLAGS } from "@/utils/bx-flags";
+import { BX_FLAGS, NATIVE_FETCH } from "@/utils/bx-flags";
 import { copyToClipboard } from "@/utils/utils";
 import { GamepadKey } from "@/enums/mkb";
 import { PrefKey, StorageKey } from "@/enums/pref-keys";
-import { getPref, getPrefDefinition, setPref } from "@/utils/settings-storages/global-settings-storage";
+import { ControllerDeviceVibration, getPref, getPrefDefinition, setPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
-import { SettingElement } from "@/utils/setting-element";
+import { SettingElement, type BxHtmlSettingElement } from "@/utils/setting-element";
-import type { SettingDefinition } from "@/types/setting-definition";
+import type { RecommendedSettings, SettingDefinition, SuggestedSettingCategory as SuggestedSettingProfile } from "@/types/setting-definition";
+import { FullscreenText } from "../fullscreen-text";
 
 
 type SettingTabContentItem = Partial<{
@@ -40,8 +41,8 @@ type SettingTabContentItem = Partial<{
 }>
 
 type SettingTabContent = {
-    group: 'general' | 'server' | 'stream' | 'game-bar' | 'co-op' | 'mkb' | 'touch-control' | 'loading-screen' | 'ui' | 'other' | 'advanced' | 'audio' | 'video' | 'controller' | 'native-mkb' | 'stats' | 'controller-shortcuts';
+    group: 'general' | 'server' | 'stream' | 'game-bar' | 'co-op' | 'mkb' | 'touch-control' | 'loading-screen' | 'ui' | 'other' | 'advanced' | 'footer' | 'audio' | 'video' | 'controller' | 'native-mkb' | 'stats' | 'controller-shortcuts';
-    label: string;
+    label?: string;
     note?: string | Text | null;
     unsupported?: boolean;
     helpUrl?: string;
@@ -69,11 +70,21 @@ export class SettingsNavigationDialog extends NavigationDialog {
     private $settings!: HTMLElement;
 
     private $btnReload!: HTMLElement;
-    private $btnGlobalReload!: HTMLElement;
+    private $btnGlobalReload!: HTMLButtonElement;
     private $noteGlobalReload!: HTMLElement;
+    private $btnSuggestion!: HTMLButtonElement;
 
     private renderFullSettings: boolean;
 
+    private suggestedSettings: Record<SuggestedSettingProfile, PartialRecord<PrefKey, any>> = {
+        recommended: {},
+        default: {},
+        lowest: {},
+        highest: {},
+    };
+    private suggestedSettingLabels: PartialRecord<PrefKey, string> = {};
+    private settingElements: PartialRecord<PrefKey, HTMLElement> = {};
+
     private readonly TAB_GLOBAL_ITEMS: Array<SettingTabContent | false> = [{
         group: 'general',
         label: t('better-xcloud'),
@@ -103,6 +114,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
                         style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
                         onClick: e => {
                             AppInterface.openAppSettings && AppInterface.openAppSettings();
+                            this.hide();
                         },
                     }));
                 } else {
@@ -122,11 +134,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
                     classes: ['bx-settings-reload-button', 'bx-gone'],
                     style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
                     onClick: e => {
-                        const $target = (e.target as HTMLButtonElement).closest('button')!;
+                        this.reloadPage();
-                        $target.disabled = true;
-                        $target.firstElementChild!.textContent = t('settings-reloading');
-
-                        window.location.reload();
                     },
                 });
 
@@ -137,6 +145,17 @@ export class SettingsNavigationDialog extends NavigationDialog {
                 }, t('settings-reload-note'));
                 topButtons.push(this.$noteGlobalReload);
 
+                // Suggestion
+                this.$btnSuggestion = CE('div', {
+                    class: 'bx-suggest-toggler bx-focusable',
+                    tabindex: 0,
+                }, CE('label', {}, t('suggest-settings')),
+                    CE('span', {}, '❯'),
+                );
+                this.$btnSuggestion.addEventListener('click', this.renderSuggestions.bind(this));
+
+                topButtons.push(this.$btnSuggestion);
+
                 // Add buttons to parent
                 const $div = CE('div', {
                     class: 'bx-top-buttons',
@@ -178,12 +197,6 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
             PrefKey.STREAM_COMBINE_SOURCES,
         ],
-    }, {
-        group: 'game-bar',
-        label: t('game-bar'),
-        items: [
-            PrefKey.GAME_BAR_POSITION,
-        ],
     }, {
         group: 'co-op',
         label: t('local-co-op'),
@@ -210,14 +223,6 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD,
             PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM,
         ],
-    }, {
-        group: 'loading-screen',
-        label: t('loading-screen'),
-        items: [
-            PrefKey.UI_LOADING_SCREEN_GAME_ART,
-            PrefKey.UI_LOADING_SCREEN_WAIT_TIME,
-            PrefKey.UI_LOADING_SCREEN_ROCKET,
-        ],
     }, {
         group: 'ui',
         label: t('ui'),
@@ -234,6 +239,20 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.BLOCK_SOCIAL_FEATURES,
             PrefKey.UI_HIDE_SECTIONS,
         ],
+    }, {
+        group: 'game-bar',
+        label: t('game-bar'),
+        items: [
+            PrefKey.GAME_BAR_POSITION,
+        ],
+    }, {
+        group: 'loading-screen',
+        label: t('loading-screen'),
+        items: [
+            PrefKey.UI_LOADING_SCREEN_GAME_ART,
+            PrefKey.UI_LOADING_SCREEN_WAIT_TIME,
+            PrefKey.UI_LOADING_SCREEN_ROCKET,
+        ],
     }, {
         group: 'other',
         label: t('other'),
@@ -273,7 +292,10 @@ export class SettingsNavigationDialog extends NavigationDialog {
                     });
                 },
             },
-
+        ],
+    }, {
+        group: 'footer',
+        items: [
             // Donation link
             ($parent) => {
                 $parent.appendChild(CE('a', {
@@ -305,7 +327,10 @@ export class SettingsNavigationDialog extends NavigationDialog {
                         label: 'Debug info',
                         style: ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
                         onClick: e => {
-                            (e.target as HTMLElement).closest('button')?.nextElementSibling?.classList.toggle('bx-gone');
+                            const $pre = (e.target as HTMLElement).closest('button')?.nextElementSibling!;
+
+                            $pre.classList.toggle('bx-gone');
+                            $pre.scrollIntoView();
                         },
                     }),
                     CE('pre', {
@@ -320,7 +345,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
                 );
 
                 $parent.appendChild($debugInfo);
-            }
+            },
         ],
     }];
 
@@ -607,7 +632,298 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }
     }
 
-    onUnmounted(): void {
+    private reloadPage() {
+        this.$btnGlobalReload.disabled = true;
+        this.$btnGlobalReload.firstElementChild!.textContent = t('settings-reloading');
+
+        this.hide();
+        FullscreenText.getInstance().show(t('settings-reloading'));
+        window.location.reload();
+    }
+
+    private async getRecommendedSettings(deviceCode: string): Promise<string | null> {
+        // Get recommended settings from GitHub
+        try {
+            const response = await NATIVE_FETCH(`https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/devices/${deviceCode.toLowerCase()}.json`);
+            const json = (await response.json()) as RecommendedSettings;
+            const recommended: PartialRecord<PrefKey, any> = {};
+
+            // Only supports schema version 1
+            if (json.schema_version !== 1) {
+                return null;
+            }
+
+            const scriptSettings = json.settings.script;
+
+            // Set base settings
+            if (scriptSettings._base) {
+                let base = typeof scriptSettings._base === 'string' ? [scriptSettings._base] : scriptSettings._base;
+                for (const profile of base) {
+                    Object.assign(recommended, this.suggestedSettings[profile]);
+                }
+
+                delete scriptSettings._base;
+            }
+
+            // Override settings
+            let key: Exclude<keyof typeof scriptSettings, '_base'>;
+            // @ts-ignore
+            for (key in scriptSettings) {
+                recommended[key] = scriptSettings[key];
+            }
+
+            // Update device type in BxFlags
+            BX_FLAGS.DeviceInfo.deviceType = json.device_type;
+
+            this.suggestedSettings.recommended = recommended;
+
+            return json.device_name;
+        } catch (e) {}
+
+        return null;
+    }
+
+    private addDefaultSuggestedSetting(prefKey: PrefKey, value: any) {
+        let key: keyof typeof this.suggestedSettings;
+        for (key in this.suggestedSettings) {
+            if (key !== 'default' && !(prefKey in this.suggestedSettings)) {
+                this.suggestedSettings[key][prefKey] = value;
+            }
+        }
+    }
+
+    private generateDefaultSuggestedSettings() {
+        let key: keyof typeof this.suggestedSettings;
+        for (key in this.suggestedSettings) {
+            if (key === 'default') {
+                continue;
+            }
+
+            let prefKey: PrefKey;
+            for (prefKey in this.suggestedSettings[key]) {
+                if (!(prefKey in this.suggestedSettings.default)) {
+                    this.suggestedSettings.default[prefKey] = getPrefDefinition(prefKey).default;
+                }
+            }
+        }
+    }
+
+    private async renderSuggestions(e: Event) {
+        const $btnSuggest = (e.target as HTMLElement).closest('div')!;
+        $btnSuggest.toggleAttribute('bx-open');
+
+        let $content = $btnSuggest.nextElementSibling as HTMLElement;
+        if ($content) {
+            BxEvent.dispatch($content.querySelector('select'), 'input');
+            return;
+        }
+
+        // Get labels
+        for (const settingTab of this.SETTINGS_UI) {
+            if (!settingTab || !settingTab.items) {
+                continue;
+            }
+
+            for (const settingTabContent of settingTab.items) {
+                if (!settingTabContent || !settingTabContent.items) {
+                    continue;
+                }
+
+                for (const setting of settingTabContent.items) {
+                    let prefKey: PrefKey | undefined;
+
+                    if (typeof setting === 'string') {
+                        prefKey = setting;
+                    } else if (typeof setting === 'object') {
+                        prefKey = setting.pref as PrefKey;
+                    }
+
+                    if (prefKey) {
+                        this.suggestedSettingLabels[prefKey] = settingTabContent.label;
+                    }
+                }
+            }
+        }
+
+        // Get recommended settings for Android devices
+        let recommendedDevice: string | null = '';
+
+        if (BX_FLAGS.DeviceInfo.deviceType.includes('android')) {
+            if (BX_FLAGS.DeviceInfo.androidInfo) {
+                const deviceCode = BX_FLAGS.DeviceInfo.androidInfo.board;
+                recommendedDevice = await this.getRecommendedSettings(deviceCode);
+            }
+        }
+        // recommendedDevice = await this.getRecommendedSettings('foster_e');
+
+        const hasRecommendedSettings = Object.keys(this.suggestedSettings.recommended).length > 0;
+
+        // Add some specific setings based on device type
+        const deviceType = BX_FLAGS.DeviceInfo.deviceType;
+        if (deviceType === 'android-handheld') {
+            // Disable touch
+            this.addDefaultSuggestedSetting(PrefKey.STREAM_TOUCH_CONTROLLER, StreamTouchController.OFF);
+            // Enable device vibration
+            this.addDefaultSuggestedSetting(PrefKey.CONTROLLER_DEVICE_VIBRATION, ControllerDeviceVibration.ON);
+        } else if (deviceType === 'android') {
+            // Enable device vibration
+            this.addDefaultSuggestedSetting(PrefKey.CONTROLLER_DEVICE_VIBRATION, ControllerDeviceVibration.AUTO);
+        } else if (deviceType === 'android-tv') {
+            // Disable touch
+            this.addDefaultSuggestedSetting(PrefKey.STREAM_TOUCH_CONTROLLER, StreamTouchController.OFF);
+        }
+
+        // Set value for Default profile
+        this.generateDefaultSuggestedSettings();
+
+        // Start rendering
+        const $suggestedSettings = CE('div', {class: 'bx-suggest-wrapper'});
+        const $select = CE<HTMLSelectElement>('select', {},
+            hasRecommendedSettings && CE('option', {value: 'recommended'}, t('recommended')),
+            !hasRecommendedSettings && CE('option', {value: 'highest'}, t('highest-quality')),
+            CE('option', {value: 'default'}, t('default')),
+            CE('option', {value: 'lowest'}, t('lowest-quality')),
+        );
+        $select.addEventListener('input', e => {
+            const profile = $select.value as SuggestedSettingProfile;
+
+            // Empty children
+            removeChildElements($suggestedSettings);
+            const fragment = document.createDocumentFragment();
+
+            let note: HTMLElement | string | undefined;
+            if (profile === 'recommended') {
+                note = t('recommended-settings-for-device', {device: recommendedDevice});
+            } else if (profile === 'highest') {
+                // Add note for "Highest quality" profile
+                note = '⚠️ ' + t('highest-quality-note');
+            }
+
+            note && fragment.appendChild(CE('div', {class: 'bx-suggest-note'}, note));
+
+            const settings = this.suggestedSettings[profile];
+            let prefKey: PrefKey;
+            for (prefKey in settings) {
+                const currentValue = getPref(prefKey, false);
+                const suggestedValue = settings[prefKey];
+                const currentValueText = STORAGE.Global.getValueText(prefKey, currentValue);
+                const isSameValue = currentValue === suggestedValue;
+
+                let $child: HTMLElement;
+                let $value: HTMLElement | string;
+                if (isSameValue) {
+                    // No changes
+                    $value = currentValueText;
+                } else {
+                    const suggestedValueText = STORAGE.Global.getValueText(prefKey, suggestedValue);
+                    $value = currentValueText + ' ➔ ' + suggestedValueText;
+                }
+
+                let $checkbox: HTMLInputElement;
+                const breadcrumb = this.suggestedSettingLabels[prefKey] + ' ❯ ' + STORAGE.Global.getLabel(prefKey);
+
+                $child = CE('div', {
+                    class: `bx-suggest-row ${isSameValue ? 'bx-suggest-ok' : 'bx-suggest-change'}`,
+                },
+                    $checkbox = CE('input', {
+                        type: 'checkbox',
+                        tabindex: 0,
+                        checked: true,
+                        id: `bx_suggest_${prefKey}`,
+                    }),
+                    CE('label', {
+                        for: `bx_suggest_${prefKey}`,
+                    },
+                        CE('div', {
+                            class: 'bx-suggest-label',
+                        }, breadcrumb),
+                        CE('div', {
+                            class: 'bx-suggest-value',
+                        }, $value),
+                    ),
+                );
+
+                if (isSameValue) {
+                    $checkbox.disabled = true;
+                    $checkbox.checked = true;
+                }
+
+                fragment.appendChild($child);
+            }
+
+            $suggestedSettings.appendChild(fragment);
+        });
+
+        BxEvent.dispatch($select, 'input');
+
+        const onClickApply = () => {
+            const profile = $select.value as SuggestedSettingProfile;
+            const settings = this.suggestedSettings[profile];
+
+            let prefKey: PrefKey;
+            for (prefKey in settings) {
+                const suggestedValue = settings[prefKey];
+                const $checkBox = $content.querySelector(`#bx_suggest_${prefKey}`) as HTMLInputElement;
+                if (!$checkBox.checked || $checkBox.disabled) {
+                    continue;
+                }
+
+                const $control = this.settingElements[prefKey] as HTMLElement;
+
+                // Set value directly if the control element is not available
+                if (!$control) {
+                    setPref(prefKey, suggestedValue);
+                    continue;
+                }
+
+                if ('setValue' in $control) {
+                    ($control as BxHtmlSettingElement).setValue(suggestedValue);
+                } else {
+                    ($control as HTMLInputElement).value = suggestedValue;
+                }
+
+                BxEvent.dispatch($control, 'input', {
+                    manualTrigger: true,
+                });
+            }
+
+            // Refresh suggested settings
+            BxEvent.dispatch($select, 'input');
+        };
+
+        // Apply button
+        const $btnApply = createButton({
+            label: t('apply'),
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: onClickApply,
+        });
+
+        $content = CE('div', {
+            class: 'bx-suggest-box',
+            _nearby: {
+                orientation: 'vertical',
+            }
+        },
+            BxSelectElement.wrap($select),
+            $suggestedSettings,
+            $btnApply,
+
+            BX_FLAGS.DeviceInfo.deviceType.includes('android') && CE('a', {
+                class: 'bx-suggest-link bx-focusable',
+                href: 'https://better-xcloud.github.io/guide/android-webview-tweaks/',
+                target: '_blank',
+                tabindex: 0,
+            }, t('how-to-improve-app-performance')),
+
+            BX_FLAGS.DeviceInfo.deviceType.includes('android') && !hasRecommendedSettings && CE('a', {
+                class: 'bx-suggest-link bx-focusable',
+                href: 'https://github.com/redphx/better-xcloud-devices',
+                target: '_blank',
+                tabindex: 0,
+            }, t('suggest-settings-link')),
+        );
+
+        $btnSuggest?.insertAdjacentElement('afterend', $content);
     }
 
     private renderTab(settingTab: SettingTab) {
@@ -764,6 +1080,8 @@ export class SettingsNavigationDialog extends NavigationDialog {
             if ($control instanceof HTMLSelectElement && getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
                 $control = BxSelectElement.wrap($control);
             }
+
+            pref && (this.settingElements[pref] = $control);
         }
 
         let prefDefinition: SettingDefinition | null = null;
@@ -775,6 +1093,13 @@ export class SettingsNavigationDialog extends NavigationDialog {
         let note = prefDefinition?.note || setting.note;
         const experimental = prefDefinition?.experimental || setting.experimental;
 
+        if (settingTabContent.label && setting.pref) {
+            if (prefDefinition?.suggest) {
+                typeof prefDefinition.suggest.lowest !== 'undefined' && (this.suggestedSettings.lowest[setting.pref] = prefDefinition.suggest.lowest);
+                typeof prefDefinition.suggest.highest !== 'undefined' && (this.suggestedSettings.highest[setting.pref] = prefDefinition.suggest.highest);
+            }
+        }
+
         // Add Experimental text
         if (experimental) {
             label = '🧪 ' + label;
@@ -851,8 +1176,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
                         icon: BxIcon.REFRESH,
                         style: ButtonStyle.FOCUSABLE | ButtonStyle.DROP_SHADOW,
                         onClick: e => {
-                            window.location.reload();
+                            this.reloadPage();
-                            this.dialogManager.hide();
                         },
                     }),
 
@@ -920,8 +1244,8 @@ export class SettingsNavigationDialog extends NavigationDialog {
                 }
 
                 // Don't render other settings in unsupported regions
-                if (!this.renderFullSettings && settingTab.group === 'global' && settingTabContent.group !== 'general') {
+                if (!this.renderFullSettings && settingTab.group === 'global' && settingTabContent.group !== 'general' && settingTabContent.group !== 'footer') {
-                    break;
+                    continue;
                 }
 
                 let label = settingTabContent.label;
@@ -936,21 +1260,23 @@ export class SettingsNavigationDialog extends NavigationDialog {
                     });
                 }
 
-                const $title = CE('h2', {
+                if (label) {
-                    _nearby: {
+                    const $title = CE('h2', {
-                        orientation: 'horizontal',
+                        _nearby: {
-                    }
+                            orientation: 'horizontal',
-                },
+                        }
-                    CE('span', {}, label),
+                    },
-                    settingTabContent.helpUrl && createButton({
+                        CE('span', {}, label),
-                            icon: BxIcon.QUESTION,
+                        settingTabContent.helpUrl && createButton({
-                            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
+                                icon: BxIcon.QUESTION,
-                            url: settingTabContent.helpUrl,
+                                style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
-                            title: t('help'),
+                                url: settingTabContent.helpUrl,
-                        }),
+                                title: t('help'),
-                );
+                            }),
+                    );
 
-                $tabContent.appendChild($title);
+                    $tabContent.appendChild($title);
+                }
 
                 // Add note
                 if (settingTabContent.note) {

src/modules/ui/fullscreen-text.ts

@@ -0,0 +1,33 @@
+import { CE } from "@/utils/html";
+
+export class FullscreenText {
+    private static instance: FullscreenText;
+    public static getInstance(): FullscreenText {
+        if (!FullscreenText.instance) {
+            FullscreenText.instance = new FullscreenText();
+        }
+        return FullscreenText.instance;
+    }
+
+    $text: HTMLElement;
+
+    constructor() {
+        this.$text = CE('div', {
+            class: 'bx-fullscreen-text bx-gone',
+        });
+
+        document.documentElement.appendChild(this.$text);
+    }
+
+    show(msg: string) {
+        document.body.classList.add('bx-no-scroll');
+
+        this.$text.classList.remove('bx-gone');
+        this.$text.textContent = msg;
+    }
+
+    hide() {
+        document.body.classList.remove('bx-no-scroll');
+        this.$text.classList.add('bx-gone');
+    }
+}

src/modules/ui/header.ts

@@ -1,5 +1,5 @@
 import { SCRIPT_VERSION } from "@utils/global";
-import { createButton, ButtonStyle, CE } from "@utils/html";
+import { createButton, ButtonStyle, CE, isElementVisible } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 import { getPreferredServerRegion } from "@utils/region";
 import { RemotePlay } from "@modules/remote-play";
@@ -44,12 +44,16 @@ export class HeaderSection {
         const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
 
         // Setup Settings button
-        const $settingsBtn = HeaderSection.#$settingsBtn;
+        const $btnSettings = HeaderSection.#$settingsBtn;
-        $settingsBtn.querySelector('span')!.textContent = getPreferredServerRegion(true) || t('better-xcloud');
+        if (isElementVisible(HeaderSection.#$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) {
-            $settingsBtn.setAttribute('data-update-available', 'true');
+            $btnSettings.setAttribute('data-update-available', 'true');
         }
 
         // Add the Settings button to the web page
@@ -57,10 +61,12 @@ export class HeaderSection {
     }
 
     static checkHeader() {
-        if (!HeaderSection.#$buttonsWrapper.isConnected) {
+        let $target = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
-            const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
+        if (!$target) {
-            HeaderSection.#injectSettingsButton($rightHeader as HTMLElement);
+            $target = document.querySelector("div[class^=UnsupportedMarketPage-module__buttons]");
         }
+
+        $target && HeaderSection.#injectSettingsButton($target as HTMLElement);
     }
 
     static showRemotePlayButton() {
@@ -68,17 +74,20 @@ export class HeaderSection {
     }
 
     static watchHeader() {
-        const $header = document.querySelector('#PageContent header');
+        const $root = document.querySelector('#PageContent header') || document.querySelector('#root');
-        if (!$header) {
+        if (!$root) {
             return;
         }
 
+        HeaderSection.#timeout && clearTimeout(HeaderSection.#timeout);
+        HeaderSection.#timeout = null;
+
         HeaderSection.#observer && HeaderSection.#observer.disconnect();
         HeaderSection.#observer = new MutationObserver(mutationList => {
             HeaderSection.#timeout && clearTimeout(HeaderSection.#timeout);
             HeaderSection.#timeout = window.setTimeout(HeaderSection.checkHeader, 2000);
         });
-        HeaderSection.#observer.observe($header, {subtree: true, childList: true});
+        HeaderSection.#observer.observe($root, {subtree: true, childList: true});
 
         HeaderSection.checkHeader();
     }

src/modules/ui/product-details.ts

@@ -19,7 +19,7 @@ export class ProductDetailsPage {
     private static shortcutTimeoutId: number | null = null;
 
     static injectShortcutButton() {
-        if (!AppInterface || BX_FLAGS.DeviceInfo!.deviceType !== 'android') {
+        if (!AppInterface || BX_FLAGS.DeviceInfo.deviceType !== 'android') {
             return;
         }
 

src/modules/vibration-manager.ts

@@ -1,7 +1,7 @@
 import { AppInterface } from "@utils/global";
 import { BxEvent } from "@utils/bx-event";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { ControllerDeviceVibration, getPref } from "@/utils/settings-storages/global-settings-storage";
 
 const VIBRATION_DATA_MAP = {
     'gamepadIndex': 8,
@@ -69,9 +69,9 @@ export class VibrationManager {
         const value = getPref(PrefKey.CONTROLLER_DEVICE_VIBRATION);
         let enabled;
 
-        if (value === 'on') {
+        if (value === ControllerDeviceVibration.ON) {
             enabled = true;
-        } else if (value === 'auto') {
+        } else if (value === ControllerDeviceVibration.AUTO) {
             enabled = true;
             const gamepads = window.navigator.getGamepads();
             for (const gamepad of gamepads) {

src/types/index.d.ts

@@ -70,8 +70,6 @@ type BxStates = {
     pointerServerPort: number;
 }
 
-type DualEnum = {[index: string]: number} & {[index: number]: string};
-
 type XcloudTitleInfo = {
     titleId: string,
 

src/types/network.ts

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

src/types/setting-definition.d.ts

@@ -1,19 +1,60 @@
-export type SettingDefinition = {
+import type { PrefKey } from "@/enums/pref-keys";
-    default: any;
+import type { SettingElementType } from "@/utils/setting-element";
-    optionsGroup?: string;
+
-    options?: {[index: string]: string};
+export type SuggestedSettingCategory = 'recommended' | 'lowest' | 'highest' | 'default';
-    multipleOptions?: {[index: string]: string};
+export type RecommendedSettings = {
-    unsupported?: string | boolean;
+    schema_version: 1,
-    note?: string | HTMLElement;
+    device_name: string,
-    type?: SettingElementType;
+    device_type: 'android' | 'android-tv' | 'android-handheld' | 'webos',
-    ready?: (setting: SettingDefinition) => void;
+    settings: {
-    // migrate?: (this: Preferences, savedPrefs: any, value: any) => void;
+        app: any,
-    min?: number;
+        script: {
-    max?: number;
+            _base?: 'lowest' | 'highest',
-    steps?: number;
+        } & PartialRecord<PrefKey, any>,
-    experimental?: boolean;
+    },
-    params?: any;
-    label?: string;
 };
 
+export type SettingDefinition = {
+    default: any;
+} & Partial<{
+    label: string;
+    note: string | HTMLElement;
+    experimental: boolean;
+    unsupported: string | boolean;
+    suggest: PartialRecord<SuggestedSettingCategory, any>,
+    ready: (setting: SettingDefinition) => void;
+    type: SettingElementType,
+    // migrate?: (this: Preferences, savedPrefs: any, value: any) => void;
+}> & (
+    {} | {
+        options: {[index: string]: string};
+        optionsGroup?: string;
+    } | {
+        multipleOptions: {[index: string]: string};
+        params: MultipleOptionsParams;
+    } | {
+        type: SettingElementType.NUMBER_STEPPER;
+        min: number;
+        max: number;
+        params: NumberStepperParams;
+
+        steps?: number;
+    }
+);
+
 export type SettingDefinitions = {[index in PrefKey]: SettingDefinition};
+
+export type MultipleOptionsParams = Partial<{
+    size?: number;
+}>
+
+export type NumberStepperParams = Partial<{
+    suffix: string;
+    disabled: boolean;
+    hideSlider: boolean;
+
+    ticks: number;
+    exactTicks: number;
+
+    customTextValue: (value: any) => string | null;
+}>

src/utils/bx-event.ts

@@ -53,6 +53,8 @@ export namespace BxEvent {
 
     export const XCLOUD_RENDERING_COMPONENT = 'bx-xcloud-rendering-page';
 
+    export const XCLOUD_ROUTER_HISTORY_READY = 'bx-xcloud-router-history-ready';
+
     export function dispatch(target: Element | Window | null, eventName: string, data?: any) {
         if (!target) {
             return;

src/utils/bx-exposed.ts

@@ -5,7 +5,7 @@ import { BxLogger } from "./bx-logger";
 import { BX_FLAGS } from "./bx-flags";
 import { NavigationDialogManager } from "@/modules/ui/dialog/navigation-dialog";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
+import { getPref, StreamTouchController } from "./settings-storages/global-settings-storage";
 
 export enum SupportedInputType {
     CONTROLLER = 'Controller',
@@ -41,7 +41,7 @@ export const BxExposed = {
             let touchControllerAvailability = getPref(PrefKey.STREAM_TOUCH_CONTROLLER);
 
             // Disable touch control when gamepad found
-            if (touchControllerAvailability !== 'off' && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
+            if (touchControllerAvailability !== StreamTouchController.OFF && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
                 const gamepads = window.navigator.getGamepads();
                 let gamepadFound = false;
 
@@ -52,10 +52,10 @@ export const BxExposed = {
                     }
                 }
 
-                gamepadFound && (touchControllerAvailability = 'off');
+                gamepadFound && (touchControllerAvailability = StreamTouchController.OFF);
             }
 
-            if (touchControllerAvailability === 'off') {
+            if (touchControllerAvailability === StreamTouchController.OFF) {
                 // Disable touch on all games (not native touch)
                 supportedInputTypes = supportedInputTypes.filter(i => i !== SupportedInputType.CUSTOM_TOUCH_OVERLAY && i !== SupportedInputType.GENERIC_TOUCH);
                 // Empty TABs
@@ -68,7 +68,7 @@ export const BxExposed = {
                     supportedInputTypes.includes(SupportedInputType.CUSTOM_TOUCH_OVERLAY) ||
                     supportedInputTypes.includes(SupportedInputType.GENERIC_TOUCH);
 
-            if (!titleInfo.details.hasTouchSupport && touchControllerAvailability === 'all') {
+            if (!titleInfo.details.hasTouchSupport && touchControllerAvailability === StreamTouchController.ALL) {
                 // Add generic touch support for non touch-supported games
                 titleInfo.details.hasFakeTouchSupport = true;
                 supportedInputTypes.push(SupportedInputType.GENERIC_TOUCH);
@@ -128,6 +128,18 @@ export const BxExposed = {
             return true;
         }
 
+        const dict = {
+            bubbles: true,
+            cancelable: true,
+            key: 'XF86Back',
+            code: 'XF86Back',
+            keyCode: 4,
+            which: 4,
+        };
+
+        document.body.dispatchEvent(new KeyboardEvent('keydown', dict));
+        document.body.dispatchEvent(new KeyboardEvent('keyup', dict));
+
         return false;
     },
 };

src/utils/bx-flags.ts

@@ -1,26 +1,26 @@
-type BxFlags = Partial<{
+import { BxLogger } from "./bx-logger";
+
+type BxFlags = {
     CheckForUpdate: boolean;
-    PreloadRemotePlay: boolean;
-    PreloadUi: boolean;
     EnableXcloudLogging: boolean;
     SafariWorkaround: boolean;
 
     ForceNativeMkbTitles: string[];
     FeatureGates: {[key: string]: boolean} | null,
 
-    IsSupportedTvBrowser: boolean,
+    DeviceInfo: {
-
+        deviceType: 'android' | 'android-tv' | 'android-handheld' | 'webos' | 'unknown',
-    DeviceInfo: Partial<{
-        deviceType: 'android' | 'android-tv' | 'webos' | 'unknown',
         userAgent?: string,
-    }>,
+
-}>
+        androidInfo?: {
+            board: string,
+        },
+    }
+}
 
 // Setup flags
 const DEFAULT_FLAGS: BxFlags = {
     CheckForUpdate: true,
-    PreloadRemotePlay: true,
-    PreloadUi: false,
     EnableXcloudLogging: false,
     SafariWorkaround: true,
 
@@ -37,8 +37,10 @@ try {
     delete window.BX_FLAGS;
 } catch (e) {}
 
-if (!BX_FLAGS.DeviceInfo!.userAgent) {
+if (!BX_FLAGS.DeviceInfo.userAgent) {
-    BX_FLAGS.DeviceInfo!.userAgent = window.navigator.userAgent;
+    BX_FLAGS.DeviceInfo.userAgent = window.navigator.userAgent;
 }
 
+BxLogger.info('BxFlags', BX_FLAGS);
+
 export const NATIVE_FETCH = window.fetch;

src/utils/css.ts

@@ -6,7 +6,7 @@ import { getPref } from "./settings-storages/global-settings-storage";
 
 
 export function addCss() {
-    const STYLUS_CSS = renderStylus();
+    const STYLUS_CSS = renderStylus() as unknown as string;
     let css = STYLUS_CSS;
 
     const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS);

src/utils/html.ts

@@ -2,8 +2,36 @@ import type { BxIcon } from "@utils/bx-icon";
 import { setNearby } from "./navigation-utils";
 import type { NavigationNearbyElements } from "@/modules/ui/dialog/navigation-dialog";
 
+export enum ButtonStyle {
+    PRIMARY = 1,
+    DANGER = 2,
+    GHOST = 4,
+    FROSTED = 8,
+    DROP_SHADOW = 16,
+    FOCUSABLE = 32,
+    FULL_WIDTH = 64,
+    FULL_HEIGHT = 128,
+    TALL = 256,
+    CIRCULAR = 512,
+    NORMAL_CASE = 1024,
+}
+
+const ButtonStyleClass = {
+    [ButtonStyle.PRIMARY]: 'bx-primary',
+    [ButtonStyle.DANGER]: 'bx-danger',
+    [ButtonStyle.GHOST]: 'bx-ghost',
+    [ButtonStyle.FROSTED]: 'bx-frosted',
+    [ButtonStyle.DROP_SHADOW]: 'bx-drop-shadow',
+    [ButtonStyle.FOCUSABLE]: 'bx-focusable',
+    [ButtonStyle.FULL_WIDTH]: 'bx-full-width',
+    [ButtonStyle.FULL_HEIGHT]: 'bx-full-height',
+    [ButtonStyle.TALL]: 'bx-tall',
+    [ButtonStyle.CIRCULAR]: 'bx-circular',
+    [ButtonStyle.NORMAL_CASE]: 'bx-normal-case',
+}
+
 type BxButton = {
-    style?: number | string | ButtonStyle;
+    style?: ButtonStyle;
     url?: string;
     classes?: string[];
     icon?: typeof BxIcon;
@@ -15,8 +43,6 @@ type BxButton = {
     attributes?: {[key: string]: any},
 }
 
-type ButtonStyle = {[index: string]: number} & {[index: number]: string};
-
 // Quickly create a tree of elements without having to use innerHTML
 type CreateElementOptions = {
     [index: string]: any;
@@ -80,20 +106,7 @@ export const createSvgIcon = (icon: typeof BxIcon) => {
     return svgParser(icon.toString());
 }
 
-export const ButtonStyle: DualEnum = {};
+const ButtonStyleIndices = Object.keys(ButtonStyleClass).map(i => parseInt(i));
-ButtonStyle[ButtonStyle.PRIMARY = 1] = 'bx-primary';
-ButtonStyle[ButtonStyle.DANGER = 2] = 'bx-danger';
-ButtonStyle[ButtonStyle.GHOST = 4] = 'bx-ghost';
-ButtonStyle[ButtonStyle.FROSTED = 8] = 'bx-frosted';
-ButtonStyle[ButtonStyle.DROP_SHADOW = 16] = 'bx-drop-shadow';
-ButtonStyle[ButtonStyle.FOCUSABLE = 32] = 'bx-focusable';
-ButtonStyle[ButtonStyle.FULL_WIDTH = 64] = 'bx-full-width';
-ButtonStyle[ButtonStyle.FULL_HEIGHT = 128] = 'bx-full-height';
-ButtonStyle[ButtonStyle.TALL = 256] = 'bx-tall';
-ButtonStyle[ButtonStyle.CIRCULAR = 512] = 'bx-circular';
-ButtonStyle[ButtonStyle.NORMAL_CASE = 1024] = 'bx-normal-case';
-
-const ButtonStyleIndices = Object.keys(ButtonStyle).splice(0, Object.keys(ButtonStyle).length / 2).map(i => parseInt(i));
 
 export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
     let $btn;
@@ -106,8 +119,8 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
     }
 
     const style = (options.style || 0) as number;
-    style && ButtonStyleIndices.forEach(index => {
+    style && ButtonStyleIndices.forEach((index: keyof typeof ButtonStyleClass) => {
-            (style & index) && $btn.classList.add(ButtonStyle[index] as string);
+            (style & index) && $btn.classList.add(ButtonStyleClass[index] as string);
         });
 
     options.classes && $btn.classList.add(...options.classes);
@@ -146,5 +159,16 @@ export function escapeHtml(html: string): string {
     return $span.innerHTML;
 }
 
+export function isElementVisible($elm: HTMLElement): boolean {
+    const rect = $elm.getBoundingClientRect();
+    return !!rect.width && !!rect.height;
+}
+
 export const CTN = document.createTextNode.bind(document);
 window.BX_CE = createElement;
+
+export function removeChildElements($parent: HTMLElement) {
+    while ($parent.firstElementChild) {
+        $parent.firstElementChild.remove();
+    }
+}

src/utils/monkey-patches.ts

@@ -201,6 +201,14 @@ export function patchMeControl() {
     (window as any).MeControl = new Proxy(MeControl, MeControlHandler);
 }
 
+
+/**
+ * Disable Adobe Audience Manager (AAM)
+ */
+export function disableAdobeAudienceManager() {
+    (window as any).adobe = Object.freeze({});
+}
+
 /**
  * Use power-saving flags for touch control
  */

src/utils/network.ts

@@ -9,6 +9,7 @@ import { XhomeInterceptor } from "./xhome-interceptor";
 import { XcloudInterceptor } from "./xcloud-interceptor";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "./settings-storages/global-settings-storage";
+import type { RemotePlayConsoleAddresses } from "@/types/network";
 
 type RequestType = 'xcloud' | 'xhome';
 
@@ -39,7 +40,7 @@ function clearAllLogs() {
     clearDbLogs('XCloudAppLogs', 'logs');
 }
 
-function updateIceCandidates(candidates: any, options: any) {
+function updateIceCandidates(candidates: any, options: {preferIpv6Server: boolean, consoleAddrs?: RemotePlayConsoleAddresses}) {
     const pattern = new RegExp(/a=candidate:(?<foundation>\d+) (?<component>\d+) UDP (?<priority>\d+) (?<ip>[^\s]+) (?<port>\d+) (?<the_rest>.*)/);
 
     const lst = [];
@@ -83,9 +84,9 @@ function updateIceCandidates(candidates: any, options: any) {
 
     if (options.consoleAddrs) {
         for (const ip in options.consoleAddrs) {
-            const port = options.consoleAddrs[ip];
+            for (const port of options.consoleAddrs[ip]) {
-
+                newCandidates.push(newCandidate(`a=candidate:${newCandidates.length + 1} 1 UDP 1 ${ip} ${port} typ host`));
-            newCandidates.push(newCandidate(`a=candidate:${newCandidates.length + 1} 1 UDP 1 ${ip} ${port} typ host`));
+            }
         }
     }
 
@@ -96,7 +97,7 @@ function updateIceCandidates(candidates: any, options: any) {
 }
 
 
-export async function patchIceCandidates(request: Request, consoleAddrs?: {[index: string]: number}) {
+export async function patchIceCandidates(request: Request, consoleAddrs?: RemotePlayConsoleAddresses) {
     const response = await NATIVE_FETCH(request);
     const text = await response.clone().text();
 

src/utils/setting-element.ts

@@ -3,21 +3,8 @@ import { CE } from "@utils/html";
 import { setNearby } from "./navigation-utils";
 import type { PrefKey } from "@/enums/pref-keys";
 import type { BaseSettingsStore } from "./settings-storages/base-settings-storage";
-
+import { type MultipleOptionsParams, type NumberStepperParams } from "@/types/setting-definition";
-type MultipleOptionsParams = {
+import { BxEvent } from "./bx-event";
-    size?: number;
-}
-
-type NumberStepperParams = {
-    suffix?: string;
-    disabled?: boolean;
-    hideSlider?: boolean;
-
-    ticks?: number;
-    exactTicks?: number;
-
-    customTextValue?: (value: any) => string | null;
-}
 
 export enum SettingElementType {
     OPTIONS = 'options',
@@ -27,16 +14,26 @@ export enum SettingElementType {
     CHECKBOX = 'checkbox',
 }
 
+interface BxBaseSettingElement {
+    setValue: (value: any) => void,
+}
+
+export interface BxHtmlSettingElement extends HTMLElement, BxBaseSettingElement {};
+
+export interface BxSelectSettingElement extends HTMLSelectElement, BxBaseSettingElement {}
+
 export class SettingElement {
-    static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
+    static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any): BxSelectSettingElement {
-        const $control = CE<HTMLSelectElement>('select', {
+        const $control = CE<BxSelectSettingElement>('select', {
                 // title: setting.label,
                 tabindex: 0,
-            }) as HTMLSelectElement;
+            });
 
         let $parent: HTMLElement;
         if (setting.optionsGroup) {
-            $parent = CE('optgroup', {'label': setting.optionsGroup});
+            $parent = CE('optgroup', {
+                label: setting.optionsGroup,
+            });
             $control.appendChild($parent);
         } else {
             $parent = $control;
@@ -58,19 +55,20 @@ export class SettingElement {
         });
 
         // Custom method
-        ($control as any).setValue = (value: any) => {
+        $control.setValue = (value: any) => {
             $control.value = value;
         };
 
         return $control;
     }
 
-    static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}) {
+    static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}): BxSelectSettingElement {
-        const $control = CE<HTMLSelectElement>('select', {
+        const $control = CE<BxSelectSettingElement>('select', {
                 // title: setting.label,
                 multiple: true,
                 tabindex: 0,
             });
+
         if (params && params.size) {
             $control.setAttribute('size', params.size.toString());
         }
@@ -89,7 +87,7 @@ export class SettingElement {
 
                 const $parent = target.parentElement!;
                 $parent.focus();
-                $parent.dispatchEvent(new Event('input'));
+                BxEvent.dispatch($parent, 'input');
             });
 
             $control.appendChild($option);
@@ -114,9 +112,15 @@ export class SettingElement {
     }
 
     static #renderNumber(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
-        const $control = CE('input', {'tabindex': 0, 'type': 'number', 'min': setting.min, 'max': setting.max}) as HTMLInputElement;
+        const $control = CE<HTMLInputElement>('input', {
+            tabindex: 0,
+            type: 'number',
+            min: setting.min,
+            max: setting.max,
+        });
+
         $control.value = currentValue;
-        onChange && $control.addEventListener('change', (e: Event) => {
+        onChange && $control.addEventListener('input', (e: Event) => {
             const target = e.target as HTMLInputElement;
 
             const value = Math.max(setting.min!, Math.min(setting.max!, parseInt(target.value)));
@@ -132,7 +136,7 @@ export class SettingElement {
         const $control = CE('input', {'type': 'checkbox', 'tabindex': 0}) as HTMLInputElement;
         $control.checked = currentValue;
 
-        onChange && $control.addEventListener('change', e => {
+        onChange && $control.addEventListener('input', e => {
             !(e as any).ignoreOnChange && onChange(e, (e.target as HTMLInputElement).checked);
         });
 
@@ -176,77 +180,21 @@ export class SettingElement {
             $btnInc.classList.toggle('bx-inactive', controlValue === MAX);
         }
 
-        const $wrapper = CE('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`},
+        const $wrapper = CE<BxHtmlSettingElement>('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`},
-                $btnDec = CE('button', {
+            $btnDec = CE('button', {
-                        'data-type': 'dec',
+                'data-type': 'dec',
-                        type: 'button',
+                type: 'button',
-                        class: options.hideSlider ? 'bx-focusable' : '',
+                class: options.hideSlider ? 'bx-focusable' : '',
-                        tabindex: options.hideSlider ? 0 : -1,
+                tabindex: options.hideSlider ? 0 : -1,
-                    }, '-') as HTMLButtonElement,
+            }, '-') as HTMLButtonElement,
-                $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
+            $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
-                $btnInc = CE('button', {
+            $btnInc = CE('button', {
-                        'data-type': 'inc',
+                'data-type': 'inc',
-                        type: 'button',
+                type: 'button',
-                        class: options.hideSlider ? 'bx-focusable' : '',
+                class: options.hideSlider ? 'bx-focusable' : '',
-                        tabindex: options.hideSlider ? 0 : -1,
+                tabindex: options.hideSlider ? 0 : -1,
-                    }, '+') as HTMLButtonElement,
+            }, '+') as HTMLButtonElement,
-            );
+        );
-
-        if (options.disabled) {
-            ($wrapper as any).disabled = true;
-        }
-
-        if (!options.disabled && !options.hideSlider) {
-            $range = CE('input', {
-                    id: `bx_setting_${key}`,
-                    type: 'range',
-                    min: MIN,
-                    max: MAX,
-                    value: value,
-                    step: STEPS,
-                    tabindex: 0,
-                }) as HTMLInputElement;
-
-            $range.addEventListener('input', e => {
-                value = parseInt((e.target as HTMLInputElement).value);
-                const valueChanged = controlValue !== value;
-
-                if (!valueChanged) {
-                    return;
-                }
-
-                controlValue = value;
-                updateButtonsVisibility();
-                $text.textContent = renderTextValue(value);
-
-                !(e as any).ignoreOnChange && onChange && onChange(e, value);
-            });
-
-            $wrapper.appendChild($range);
-
-            if (options.ticks || options.exactTicks) {
-                const markersId = `markers-${key}`;
-                const $markers = CE('datalist', {'id': markersId});
-                $range.setAttribute('list', markersId);
-
-                if (options.exactTicks) {
-                    let start = Math.max(Math.floor(MIN / options.exactTicks), 1) * options.exactTicks;
-
-                    if (start === MIN) {
-                        start += options.exactTicks;
-                    }
-
-                    for (let i = start; i < MAX; i += options.exactTicks) {
-                        $markers.appendChild(CE<HTMLOptionElement>('option', {'value': i}));
-                    }
-                } else {
-                    for (let i = MIN + options.ticks!; i < MAX; i += options.ticks!) {
-                        $markers.appendChild(CE<HTMLOptionElement>('option', {'value': i}));
-                    }
-                }
-                $wrapper.appendChild($markers);
-            }
-        }
 
         if (options.disabled) {
             $btnInc.disabled = true;
@@ -254,9 +202,66 @@ export class SettingElement {
 
             $btnDec.disabled = true;
             $btnDec.classList.add('bx-inactive');
+
+            ($wrapper as any).disabled = true;
             return $wrapper;
         }
 
+        $range = CE<HTMLInputElement>('input', {
+            id: `bx_setting_${key}`,
+            type: 'range',
+            min: MIN,
+            max: MAX,
+            value: value,
+            step: STEPS,
+            tabindex: 0,
+        });
+
+        options.hideSlider && $range.classList.add('bx-gone');
+
+        $range.addEventListener('input', e => {
+            value = parseInt((e.target as HTMLInputElement).value);
+            const valueChanged = controlValue !== value;
+
+            if (!valueChanged) {
+                return;
+            }
+
+            controlValue = value;
+            updateButtonsVisibility();
+            $text.textContent = renderTextValue(value);
+
+            !(e as any).ignoreOnChange && onChange && onChange(e, value);
+        });
+
+        $wrapper.addEventListener('input', e => {
+            BxEvent.dispatch($range, 'input');
+        });
+        $wrapper.appendChild($range);
+
+        if (options.ticks || options.exactTicks) {
+            const markersId = `markers-${key}`;
+            const $markers = CE('datalist', {'id': markersId});
+            $range.setAttribute('list', markersId);
+
+            if (options.exactTicks) {
+                let start = Math.max(Math.floor(MIN / options.exactTicks), 1) * options.exactTicks;
+
+                if (start === MIN) {
+                    start += options.exactTicks;
+                }
+
+                for (let i = start; i < MAX; i += options.exactTicks) {
+                    $markers.appendChild(CE<HTMLOptionElement>('option', {'value': i}));
+                }
+            } else {
+                for (let i = MIN + options.ticks!; i < MAX; i += options.ticks!) {
+                    $markers.appendChild(CE<HTMLOptionElement>('option', {'value': i}));
+                }
+            }
+            $wrapper.appendChild($markers);
+        }
+
         updateButtonsVisibility();
 
         let interval: number;
@@ -292,16 +297,14 @@ export class SettingElement {
 
         const onMouseDown = (e: PointerEvent) => {
             e.preventDefault();
-
             isHolding = true;
 
             const args = arguments;
             interval && clearInterval(interval);
             interval = window.setInterval(() => {
-                const event = new Event('click');
+                e.target && BxEvent.dispatch(e.target as HTMLElement, 'click', {
-                (event as any).arguments = args;
+                    arguments: args,
-
+                });
-                e.target?.dispatchEvent(event);
             }, 200);
         };
 
@@ -315,11 +318,9 @@ export class SettingElement {
         const onContextMenu = (e: Event) => e.preventDefault();
 
         // Custom method
-        ($wrapper as any).setValue = (value: any) => {
+        $wrapper.setValue = (value: any) => {
-            controlValue = parseInt(value);
-
             $text.textContent = renderTextValue(value);
-            $range && ($range.value = value);
+            $range.value = value;
         };
 
         $btnDec.addEventListener('click', onClick);
@@ -381,7 +382,11 @@ export class SettingElement {
             type = SettingElementType.CHECKBOX;
         }
 
-        const params = Object.assign(overrideParams, definition.params || {});
+        let params: any = {};
+        if ('params' in definition) {
+            params = Object.assign(overrideParams, definition.params || {});
+        }
+
         if (params.disabled) {
             currentValue = definition.default;
         }

src/utils/settings-storages/base-settings-storage.ts

@@ -1,6 +1,7 @@
 import type { PrefKey } from "@/enums/pref-keys";
-import type { SettingDefinitions } from "@/types/setting-definition";
+import type { NumberStepperParams, SettingDefinitions } from "@/types/setting-definition";
 import { BxEvent } from "../bx-event";
+import { SettingElementType } from "../setting-element";
 
 export class BaseSettingsStore {
     private storage: Storage;
@@ -12,7 +13,8 @@ export class BaseSettingsStore {
         this.storage = window.localStorage;
         this.storageKey = storageKey;
 
-        for (const settingId in definitions) {
+        let settingId: keyof typeof definitions
+        for (settingId in definitions) {
             const setting = definitions[settingId];
 
             /*
@@ -49,14 +51,14 @@ export class BaseSettingsStore {
         return this.definitions[key];
     }
 
-    getSetting(key: PrefKey) {
+    getSetting(key: PrefKey, checkUnsupported = true) {
         if (typeof key === 'undefined') {
             debugger;
             return;
         }
 
         // Return default value if the feature is not supported
-        if (this.definitions[key].unsupported) {
+        if (checkUnsupported && this.definitions[key].unsupported) {
             return this.definitions[key].default;
         }
 
@@ -121,4 +123,30 @@ export class BaseSettingsStore {
 
         return value;
     }
+
+    getLabel(key: PrefKey): string {
+        return this.definitions[key].label || key;
+    }
+
+    getValueText(key: PrefKey, value: any): string {
+        const definition = this.definitions[key];
+        if (definition.type === SettingElementType.NUMBER_STEPPER) {
+            const params = (definition as any).params as NumberStepperParams;
+            if (params.customTextValue) {
+                const text = params.customTextValue(value);
+                if (text) {
+                    return text;
+                }
+            }
+
+            return value.toString();
+        } else if ('options' in definition) {
+            const options = (definition as any).options;
+            if (value in options) {
+                return options[value];
+            }
+        }
+
+        return value.toString();
+    }
 }

src/utils/settings-storages/global-settings-storage.ts

@@ -4,19 +4,43 @@ import { StreamPlayerType, StreamVideoProcessing } from "@/enums/stream-player";
 import { UiSection } from "@/enums/ui-sections";
 import { UserAgentProfile } from "@/enums/user-agent";
 import { StreamStat } from "@/modules/stream/stream-stats";
-import type { PreferenceSetting } from "@/types/preferences";
+import { type SettingDefinition, type SettingDefinitions } from "@/types/setting-definition";
-import type { SettingDefinitions } from "@/types/setting-definition";
 import { BX_FLAGS } from "../bx-flags";
 import { STATES, AppInterface, STORAGE } from "../global";
 import { CE } from "../html";
-import { SettingElementType } from "../setting-element";
 import { t, SUPPORTED_LANGUAGES } from "../translation";
 import { UserAgent } from "../user-agent";
 import { BaseSettingsStore as BaseSettingsStorage } from "./base-settings-storage";
+import { SettingElementType } from "../setting-element";
+
+
+export const enum StreamResolution {
+    DIM_720P = '720p',
+    DIM_1080P = '1080p',
+}
+
+export const enum CodecProfile {
+    DEFAULT = 'default',
+    LOW = 'low',
+    NORMAL = 'normal',
+    HIGH = 'high',
+};
+
+export const enum StreamTouchController {
+    DEFAULT = 'default',
+    ALL = 'all',
+    OFF = 'off',
+}
+
+export const enum ControllerDeviceVibration {
+    ON = 'on',
+    AUTO = 'auto',
+    OFF = 'off',
+}
 
 
 function getSupportedCodecProfiles() {
-    const options: {[index: string]: string} = {
+    const options: PartialRecord<CodecProfile, string> = {
         default: t('default'),
     };
 
@@ -44,27 +68,27 @@ function getSupportedCodecProfiles() {
         }
     }
 
-    if (hasHighCodec) {
+    if (hasLowCodec) {
-        if (!hasLowCodec && !hasNormalCodec) {
+        if (!hasNormalCodec && !hasHighCodec) {
-            options.default = `${t('visual-quality-high')} (${t('default')})`;
+            options[CodecProfile.DEFAULT] = `${t('visual-quality-low')} (${t('default')})`;
         } else {
-            options.high = t('visual-quality-high');
+            options[CodecProfile.LOW] = t('visual-quality-low');
         }
     }
 
     if (hasNormalCodec) {
         if (!hasLowCodec && !hasHighCodec) {
-            options.default = `${t('visual-quality-normal')} (${t('default')})`;
+            options[CodecProfile.DEFAULT] = `${t('visual-quality-normal')} (${t('default')})`;
         } else {
-            options.normal = t('visual-quality-normal');
+            options[CodecProfile.NORMAL] = t('visual-quality-normal');
         }
     }
 
-    if (hasLowCodec) {
+    if (hasHighCodec) {
-        if (!hasNormalCodec && !hasHighCodec) {
+        if (!hasLowCodec && !hasNormalCodec) {
-            options.default = `${t('visual-quality-low')} (${t('default')})`;
+            options[CodecProfile.DEFAULT] = `${t('visual-quality-high')} (${t('default')})`;
         } else {
-            options.low = t('visual-quality-low');
+            options[CodecProfile.HIGH] = t('visual-quality-high');
         }
     }
 
@@ -140,25 +164,31 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             default: 'auto',
             options: {
                 auto: t('default'),
-                '1080p': '1080p',
+                [StreamResolution.DIM_720P]: '720p',
-                '720p': '720p',
+                [StreamResolution.DIM_1080P]: '1080p',
+            },
+            suggest: {
+                lowest: StreamResolution.DIM_720P,
+                highest: StreamResolution.DIM_1080P,
             },
         },
         [PrefKey.STREAM_CODEC_PROFILE]: {
             label: t('visual-quality'),
             default: 'default',
             options: getSupportedCodecProfiles(),
-            ready: (setting: PreferenceSetting) => {
+            ready: (setting: SettingDefinition) => {
-                const options: any = setting.options;
+                const options = (setting as any).options;
                 const keys = Object.keys(options);
 
                 if (keys.length <= 1) { // Unsupported
                     setting.unsupported = true;
                     setting.note = '⚠️ ' + t('browser-unsupported-feature');
-                } else {
-                    // Set default value to the best codec profile
-                    // setting.default = keys[keys.length - 1];
                 }
+
+                setting.suggest = {
+                    lowest: keys.length === 1 ? keys[0] : keys[1],
+                    highest: keys[keys.length - 1],
+                };
             },
         },
         [PrefKey.PREFER_IPV6_SERVER]: {
@@ -189,16 +219,16 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
 
         [PrefKey.STREAM_TOUCH_CONTROLLER]: {
             label: t('tc-availability'),
-            default: 'all',
+            default: StreamTouchController.ALL,
             options: {
-                default: t('default'),
+                [StreamTouchController.DEFAULT]: t('default'),
-                all: t('tc-all-games'),
+                [StreamTouchController.ALL]: t('tc-all-games'),
-                off: t('off'),
+                [StreamTouchController.OFF]: t('off'),
             },
             unsupported: !STATES.userAgent.capabilities.touch,
-            ready: (setting: PreferenceSetting) => {
+            ready: (setting: SettingDefinition) => {
                 if (setting.unsupported) {
-                    setting.default = 'default';
+                    setting.default = StreamTouchController.DEFAULT;
                 }
             },
         },
@@ -274,6 +304,9 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                     }
                 },
             },
+            suggest: {
+                highest: 0,
+            }
         },
 
         [PrefKey.GAME_BAR_POSITION]: {
@@ -318,11 +351,11 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
 
         [PrefKey.CONTROLLER_DEVICE_VIBRATION]: {
             label: t('device-vibration'),
-            default: 'off',
+            default: ControllerDeviceVibration.OFF,
             options: {
-                on: t('on'),
+                [ControllerDeviceVibration.ON]: t('on'),
-                auto: t('device-vibration-not-using-gamepad'),
+                [ControllerDeviceVibration.AUTO]: t('device-vibration-not-using-gamepad'),
-                off: t('off'),
+                [ControllerDeviceVibration.OFF]: t('off'),
             },
         },
 
@@ -346,7 +379,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
                 return !AppInterface && userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
             })(),
-            ready: (setting: PreferenceSetting) => {
+            ready: (setting: SettingDefinition) => {
                 let note;
                 let url;
                 if (setting.unsupported) {
@@ -372,16 +405,15 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 on: t('on'),
                 off: t('off'),
             },
-            ready: (setting: PreferenceSetting) => {
+            ready: (setting: SettingDefinition) => {
                 if (AppInterface) {
-
                 } else if (UserAgent.isMobile()) {
                     setting.unsupported = true;
                     setting.default = 'off';
-                    delete setting.options!['default'];
+                    delete (setting as any).options['default'];
-                    delete setting.options!['on'];
+                    delete (setting as any).options['on'];
                 } else {
-                    delete setting.options!['on'];
+                    delete (setting as any).options['on'];
                 }
             },
         },
@@ -457,7 +489,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
 
         [PrefKey.UI_CONTROLLER_FRIENDLY]: {
             label: t('controller-friendly-ui'),
-            default: BX_FLAGS.DeviceInfo!.deviceType !== 'unknown',
+            default: BX_FLAGS.DeviceInfo.deviceType !== 'unknown',
         },
 
         [PrefKey.UI_LAYOUT]: {
@@ -512,7 +544,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         [PrefKey.USER_AGENT_PROFILE]: {
             label: t('user-agent-profile'),
             note: '⚠️ ' + t('unexpected-behavior'),
-            default: BX_FLAGS.DeviceInfo!.deviceType === 'android-tv' ? UserAgentProfile.VR_OCULUS : 'default',
+            default: (BX_FLAGS.DeviceInfo.deviceType === 'android-tv' || BX_FLAGS.DeviceInfo.deviceType === 'webos') ? UserAgentProfile.VR_OCULUS : 'default',
             options: {
                 [UserAgentProfile.DEFAULT]: t('default'),
                 [UserAgentProfile.WINDOWS_EDGE]: 'Edge + Windows',
@@ -530,6 +562,10 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 [StreamPlayerType.VIDEO]: t('default'),
                 [StreamPlayerType.WEBGL2]: t('webgl2'),
             },
+            suggest: {
+                lowest: StreamPlayerType.VIDEO,
+                highest: StreamPlayerType.WEBGL2,
+            },
         },
         [PrefKey.VIDEO_PROCESSING]: {
             label: t('clarity-boost'),
@@ -538,6 +574,10 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 [StreamVideoProcessing.USM]: t('unsharp-masking'),
                 [StreamVideoProcessing.CAS]: t('amd-fidelity-cas'),
             },
+            suggest: {
+                lowest: StreamVideoProcessing.USM,
+                highest: StreamVideoProcessing.CAS,
+            },
         },
         [PrefKey.VIDEO_POWER_PREFERENCE]: {
             label: t('renderer-configuration'),
@@ -547,6 +587,9 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 'low-power': t('low-power'),
                 'high-performance': t('high-performance'),
             },
+            suggest: {
+                highest: 'low-power',
+            },
         },
         [PrefKey.VIDEO_SHARPNESS]: {
             label: t('sharpness'),
@@ -561,6 +604,10 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                     return value === 0 ? t('off') : value.toString();
                 },
             },
+            suggest: {
+                lowest: 0,
+                highest: 4,
+            },
         },
         [PrefKey.VIDEO_RATIO]: {
             label: t('aspect-ratio'),
@@ -701,10 +748,10 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.REMOTE_PLAY_RESOLUTION]: {
-            default: '1080p',
+            default: StreamResolution.DIM_1080P,
             options: {
-                '1080p': '1080p',
+                [StreamResolution.DIM_1080P]: '1080p',
-                '720p': '720p',
+                [StreamResolution.DIM_720P]: '720p',
             },
         },
 

src/utils/translation.ts

@@ -121,14 +121,18 @@ const Texts = {
     "hide-system-menu-icon": "Hide System menu's icon",
     "hide-touch-controller": "Hide touch controller",
     "high-performance": "High performance",
+    "highest-quality": "Highest quality",
+    "highest-quality-note": "Your device may not be powerful enough to use these settings",
     "horizontal-scroll-sensitivity": "Horizontal scroll sensitivity",
     "horizontal-sensitivity": "Horizontal sensitivity",
+    "how-to-improve-app-performance": "How to improve app's performance",
     "ignore": "Ignore",
     "import": "Import",
     "increase": "Increase",
     "install-android": "Better xCloud app for Android",
     "japan": "Japan",
     "keyboard-shortcuts": "Keyboard shortcuts",
+    "korea": "Korea",
     "language": "Language",
     "large": "Large",
     "layout": "Layout",
@@ -136,6 +140,7 @@ const Texts = {
     "loading-screen": "Loading screen",
     "local-co-op": "Local co-op",
     "low-power": "Low power",
+    "lowest-quality": "Lowest quality",
     "map-mouse-to": "Map mouse to",
     "may-not-work-properly": "May not work properly!",
     "menu": "Menu",
@@ -188,6 +193,28 @@ const Texts = {
     ],
     "press-to-bind": "Press a key or do a mouse click to bind...",
     "prompt-preset-name": "Preset's name:",
+    "recommended": "Recommended",
+    "recommended-settings-for-device": [
+        (e: any) => `Recommended settings for ${e.device}`,
+        ,
+        ,
+        ,
+        ,
+        (e: any) => `Ajustes recomendados para ${e.device}`,
+        ,
+        (e: any) => `Configurazioni consigliate per ${e.device}`,
+        ,
+        (e: any) => `다음 기기에서 권장되는 설정: ${e.device}`,
+        ,
+        ,
+        ,
+        ,
+        ,
+        (e: any) => `Рекомендовані налаштування для ${e.device}`,
+        (e: any) => `Cấu hình được đề xuất cho ${e.device}`,
+        ,
+        ,
+    ],
     "reduce-animations": "Reduce UI animations",
     "region": "Region",
     "reload-page": "Reload page",
@@ -249,6 +276,8 @@ const Texts = {
     "stream-settings": "Stream settings",
     "stream-stats": "Stream stats",
     "stretch": "Stretch",
+    "suggest-settings": "Suggest settings",
+    "suggest-settings-link": "Suggest recommended settings for this device",
     "support-better-xcloud": "Support Better xCloud",
     "swap-buttons": "Swap buttons",
     "take-screenshot": "Take screenshot",
@@ -313,6 +342,7 @@ const Texts = {
     "volume": "Volume",
     "wait-time-countdown": "Countdown",
     "wait-time-estimated": "Estimated finish time",
+    "wallpaper": "Wallpaper",
     "webgl2": "WebGL2",
 };
 

src/utils/user-agent.ts

@@ -36,7 +36,7 @@ export class UserAgent {
     static init() {
         UserAgent.#config = JSON.parse(window.localStorage.getItem(UserAgent.STORAGE_KEY)  || '{}') as UserAgentConfig;
         if (!UserAgent.#config.profile) {
-            UserAgent.#config.profile = UserAgentProfile.DEFAULT;
+            UserAgent.#config.profile = (BX_FLAGS.DeviceInfo.deviceType === 'android-tv' || BX_FLAGS.DeviceInfo.deviceType === 'webos') ? UserAgentProfile.VR_OCULUS : UserAgentProfile.DEFAULT;
         }
 
         if (!UserAgent.#config.custom) {
@@ -120,14 +120,11 @@ export class UserAgent {
 
         let newUserAgent = UserAgent.get(profile);
 
-        // Pretend to be Tizen TV
-        if (BX_FLAGS.IsSupportedTvBrowser) {
-            newUserAgent += ` SmartTV ${SMART_TV_UNIQUE_ID}`;
-        }
-
         // Clear data of navigator.userAgentData, force xCloud to detect browser based on navigator.userAgent
-        (window.navigator as any).orgUserAgentData = (window.navigator as any).userAgentData;
+        if ('userAgentData' in window.navigator) {
-        Object.defineProperty(window.navigator, 'userAgentData', {});
+            (window.navigator as any).orgUserAgentData = (window.navigator as any).userAgentData;
+            Object.defineProperty(window.navigator, 'userAgentData', {});
+        }
 
         // Override navigator.userAgent
         (window.navigator as any).orgUserAgent = window.navigator.userAgent;

src/utils/xcloud-interceptor.ts

@@ -9,7 +9,7 @@ import { patchIceCandidates } from "./network";
 import { getPreferredServerRegion } from "./region";
 import { BypassServerIps } from "@/enums/bypass-servers";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
+import { getPref, StreamResolution, StreamTouchController } from "./settings-storages/global-settings-storage";
 
 export
 class XcloudInterceptor {
@@ -111,7 +111,7 @@ class XcloudInterceptor {
 
         // Force stream's resolution
         if (PREF_STREAM_TARGET_RESOLUTION !== 'auto') {
-            const osName = (PREF_STREAM_TARGET_RESOLUTION === '720p') ? 'android' : 'windows';
+            const osName = (PREF_STREAM_TARGET_RESOLUTION === StreamResolution.DIM_720P) ? 'android' : 'windows';
             body.settings.osName = osName;
         }
 
@@ -147,7 +147,7 @@ class XcloudInterceptor {
         }
 
         // Touch controller for all games
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
             const titleInfo = STATES.currentStream.titleInfo;
             if (titleInfo?.details.hasTouchSupport) {
                 TouchController.disable();

src/utils/xhome-interceptor.ts

@@ -6,10 +6,11 @@ import { NATIVE_FETCH } from "./bx-flags";
 import { STATES } from "./global";
 import { patchIceCandidates } from "./network";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
+import { getPref, StreamResolution, StreamTouchController } from "./settings-storages/global-settings-storage";
+import type { RemotePlayConsoleAddresses } from "@/types/network";
 
 export class XhomeInterceptor {
-    static #consoleAddrs: {[index: string]: number} = {};
+    static #consoleAddrs: RemotePlayConsoleAddresses = {};
 
     static async #handleLogin(request: Request) {
         try {
@@ -39,17 +40,25 @@ export class XhomeInterceptor {
         const obj = await response.clone().json()
         console.log(obj);
 
+        const processPorts = (port: number): number[] => {
+            const ports = new Set<number>();
+            ports.add(port);
+            ports.add(9002);
+
+            return Array.from(ports);
+        };
+
         const serverDetails = obj.serverDetails;
         if (serverDetails.ipAddress) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipAddress] = serverDetails.port;
+            XhomeInterceptor.#consoleAddrs[serverDetails.ipAddress] = processPorts(serverDetails.port);
         }
 
         if (serverDetails.ipV4Address) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipV4Address] = serverDetails.ipV4Port;
+            XhomeInterceptor.#consoleAddrs[serverDetails.ipV4Address] = processPorts(serverDetails.ipV4Port);
         }
 
         if (serverDetails.ipV6Address) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipV6Address] = serverDetails.ipV6Port;
+            XhomeInterceptor.#consoleAddrs[serverDetails.ipV6Address] = processPorts(serverDetails.ipV6Port);
         }
 
         response.json = () => Promise.resolve(obj);
@@ -61,7 +70,7 @@ export class XhomeInterceptor {
     static async #handleInputConfigs(request: Request | URL, opts: {[index: string]: any}) {
         const response = await NATIVE_FETCH(request);
 
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'all') {
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== StreamTouchController.ALL) {
             return response;
         }
 
@@ -141,7 +150,7 @@ export class XhomeInterceptor {
 
         // Patch resolution
         const deviceInfo = RemotePlay.BASE_DEVICE_INFO;
-        if (getPref(PrefKey.REMOTE_PLAY_RESOLUTION) === '720p') {
+        if (getPref(PrefKey.REMOTE_PLAY_RESOLUTION) === StreamResolution.DIM_720P) {
             deviceInfo.dev.os.name = 'android';
         }
 

src/web-components/bx-select.ts

@@ -1,4 +1,6 @@
 import type { NavigationElement } from "@/modules/ui/dialog/navigation-dialog";
+import { BxEvent } from "@/utils/bx-event";
+import type { BxSelectSettingElement } from "@/utils/setting-element";
 import { ButtonStyle, CE, createButton } from "@utils/html";
 
 export class BxSelectElement {
@@ -40,7 +42,7 @@ export class BxSelectElement {
                 const $option = getOptionAtIndex(visibleIndex);
                 $option && ($option.selected = (e.target as HTMLInputElement).checked);
 
-                $select.dispatchEvent(new Event('input'));
+                BxEvent.dispatch($select, 'input');
             });
         } else {
             $content = CE('div', {},
@@ -122,7 +124,7 @@ export class BxSelectElement {
             if (isMultiple) {
                 render();
             } else {
-                $select.dispatchEvent(new Event('input'));
+                BxEvent.dispatch($select, 'input');
             }
         };
 
@@ -178,7 +180,15 @@ export class BxSelectElement {
         $div.dispatchEvent = function() {
             // @ts-ignore
             return $select.dispatchEvent.apply($select, arguments);
-        }
+        };
+
+        ($div as any).setValue = (value: any) => {
+            if ('setValue' in $select) {
+                ($select as BxSelectSettingElement).setValue(value);
+            } else {
+                $select.value = value;
+            }
+        };
 
         return $div;
     }