Bump version to 5.9.2

build.ts

@@ -20,6 +20,8 @@ enum BuildTarget {
 
 type BuildVariant = 'full' | 'lite';
 
+const MINIFY_SYNTAX = true;
+
 const postProcess = (str: string): string => {
     // Unescape unicode charaters
     str = unescape((str.replace(/\\u/g, '%u')));
@@ -70,9 +72,6 @@ const postProcess = (str: string): string => {
     // Collapse empty brackets
     str = str.replaceAll(/\{[\s\n]+\}/g, '{}');
 
-    // Collapse if/else blocks without curly braces
-    str = str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
-
     // Remove blank lines
     str = str.replaceAll(/\n([\s]*)\n/g, "\n");
 
@@ -87,6 +86,23 @@ const postProcess = (str: string): string => {
         return p1.toUpperCase();
     });
 
+    // Replace " (e) =>" to " e =>"
+    // str = str.replaceAll(/ \(([^\s,.$()]+)\) =>/g, ' $1 =>');
+
+    // Set indent to 1 space
+    if (MINIFY_SYNTAX) {
+        // Collapse if/else blocks without curly braces
+        str = str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
+
+        str = str.replaceAll(/\n(\s+)/g, (match, p1) => {
+            const len = p1.length / 2;
+            return '\n' + ' '.repeat(len);
+        });
+    }
+
+    // Fix unicode regex in Patcher.optimizeGameSlugGenerator
+    str = str.replaceAll('^\\™', '^\\\\u2122');
+
     assert(str.includes('/* ADDITIONAL CODE */'));
     assert(str.includes('window.BX_EXPOSED = BxExposed'));
     assert(str.includes('window.BxEvent = BxEvent'));
@@ -119,7 +135,7 @@ const build = async (target: BuildTarget, version: string, variant: BuildVariant
         outdir: outDir,
         naming: outputScriptName,
         minify: {
-            syntax: true,
+            syntax: MINIFY_SYNTAX,
         },
         define: {
             'Bun.env.BUILD_TARGET': JSON.stringify(target),

dist/better-xcloud.meta.js

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

package.json

@@ -10,14 +10,14 @@
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.10",
-    "@types/node": "^22.7.5",
+    "@types/bun": "^1.1.11",
+    "@types/node": "^22.7.8",
     "@types/stylus": "^0.48.43",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
     "eslint-plugin-compat": "^6.0.1",
-    "stylus": "^0.63.0"
+    "stylus": "^0.64.0"
   },
   "peerDependencies": {
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   }
 }

src/assets/css/game-bar.styl

@@ -76,21 +76,21 @@
         }
 
         /* Touch controller buttons */
-        div[data-enabled] {
+        div[data-activated] {
             button {
                 display: none;
             }
         }
 
-        /* Show enabled button */
-        div[data-enabled='true'] {
+        /* Show default button */
+        div[data-activated='false'] {
             button:first-of-type {
                 display: block;
             }
         }
 
-        /* Show enable button */
-        div[data-enabled='false'] {
+        /* Show activated button */
+        div[data-activated='true'] {
             button:last-of-type {
                 display: block;
             }

src/assets/css/number-stepper.styl

@@ -5,7 +5,7 @@
         display: inline-block;
         min-width: 40px;
         font-family: var(--bx-monospaced-font);
-        font-size: 12px;
+        font-size: 13px;
         margin: 0 4px;
     }
 

src/assets/svg/eye-slash.svg

@@ -0,0 +1,8 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' stroke='none ' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <clipPath id='A'>
+        <path d='M0 0h32v32H0z'/>
+    </clipPath>
+    <g clip-path='url(#A)'>
+        <path d='M6.123 3.549a1.07 1.07 0 0 0-.798-.359c-.585 0-1.067.482-1.067 1.067 0 .27.102.53.286.727l2.565 2.823C2.267 10.779.184 15.36.092 15.568c-.123.276-.123.591 0 .867.047.105 1.176 2.609 3.687 5.12 3.345 3.344 7.57 5.112 12.221 5.112a16.97 16.97 0 0 0 6.943-1.444l2.933 3.228c.202.228.493.359.798.359.585 0 1.067-.482 1.067-1.067a1.07 1.07 0 0 0-.286-.727L6.123 3.549zm6.31 10.112l5.556 6.114c-.612.322-1.294.49-1.986.49a4.29 4.29 0 0 1-4.267-4.266c0-.831.242-1.643.697-2.338zM16 24.533c-4.104 0-7.689-1.492-10.657-4.433A17.73 17.73 0 0 1 2.267 16c.625-1.172 2.621-4.452 6.313-6.584l2.4 2.633c-.878 1.125-1.356 2.512-1.356 3.939 0 3.511 2.89 6.4 6.4 6.4 1.221 0 2.416-.349 3.444-1.005l1.964 2.16a14.92 14.92 0 0 1-5.432.99zm.8-12.724a1.07 1.07 0 0 1-.867-1.048c0-.585.482-1.067 1.067-1.067a1.12 1.12 0 0 1 .2.019c2.784.54 4.896 2.863 5.169 5.686a1.07 1.07 0 0 1-.962 1.161c-.034.002-.067.002-.1 0a1.07 1.07 0 0 1-1.067-.968 4.29 4.29 0 0 0-3.44-3.783zm15.104 4.626c-.056.125-1.407 3.116-4.448 5.84a1.07 1.07 0 0 1-.724.283c-.585 0-1.067-.482-1.067-1.067a1.07 1.07 0 0 1 .368-.806A17.7 17.7 0 0 0 29.74 16a17.73 17.73 0 0 0-3.083-4.103C23.689 8.959 20.104 7.467 16 7.467a15.82 15.82 0 0 0-2.581.209 1.06 1.06 0 0 1-.186.016 1.07 1.07 0 0 1-1.067-1.066 1.07 1.07 0 0 1 .901-1.054A17.89 17.89 0 0 1 16 5.333c4.651 0 8.876 1.768 12.221 5.114 2.511 2.51 3.64 5.016 3.687 5.121.123.276.123.591 0 .867h-.004z' fill-rule='nonzero'/>
+    </g>
+</svg>

src/assets/svg/eye.svg

@@ -0,0 +1,8 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' stroke='none ' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <clipPath id='A'>
+        <path d='M0 0h32v32H0z'/>
+    </clipPath>
+    <g clip-path='url(#A)'>
+        <path d='M31.908 15.568c-.047-.105-1.176-2.611-3.687-5.121C24.876 7.101 20.651 5.333 16 5.333S7.124 7.101 3.779 10.447c-2.511 2.51-3.646 5.02-3.687 5.121-.123.276-.123.591 0 .867.047.105 1.176 2.609 3.687 5.12 3.345 3.344 7.57 5.112 12.221 5.112s8.876-1.768 12.221-5.112c2.511-2.511 3.64-5.015 3.687-5.12.123-.276.123-.591 0-.867zM16 24.533c-4.104 0-7.689-1.492-10.657-4.433-1.218-1.211-2.254-2.592-3.076-4.1.822-1.508 1.858-2.889 3.076-4.1C8.311 8.959 11.896 7.467 16 7.467s7.689 1.492 10.657 4.433c1.221 1.211 2.259 2.592 3.083 4.1-.961 1.795-5.149 8.533-13.74 8.533zM16 9.6c-3.511 0-6.4 2.889-6.4 6.4s2.889 6.4 6.4 6.4 6.4-2.889 6.4-6.4A6.44 6.44 0 0 0 16 9.6zm0 10.667A4.29 4.29 0 0 1 11.733 16 4.29 4.29 0 0 1 16 11.733 4.29 4.29 0 0 1 20.267 16 4.29 4.29 0 0 1 16 20.267z' fill-rule='nonzero'/>
+    </g>
+</svg>

src/enums/pref-keys.ts

@@ -37,11 +37,11 @@ export enum PrefKey {
     LOCAL_CO_OP_ENABLED = 'local_co_op_enabled',
     // LOCAL_CO_OP_SEPARATE_TOUCH_CONTROLLER = 'local_co_op_separate_touch_controller',
 
-    CONTROLLER_ENABLE_SHORTCUTS = 'controller_enable_shortcuts',
     CONTROLLER_ENABLE_VIBRATION = 'controller_enable_vibration',
     CONTROLLER_DEVICE_VIBRATION = 'controller_device_vibration',
     CONTROLLER_VIBRATION_INTENSITY = 'controller_vibration_intensity',
     CONTROLLER_SHOW_CONNECTION_STATUS = 'controller_show_connection_status',
+    CONTROLLER_POLLING_RATE = 'controller_polling_rate',
 
     NATIVE_MKB_ENABLED = 'native_mkb_enabled',
     NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'native_mkb_scroll_x_sensitivity',
@@ -69,12 +69,12 @@ export enum PrefKey {
     UI_SCROLLBAR_HIDE = 'ui_scrollbar_hide',
     UI_HIDE_SECTIONS = 'ui_hide_sections',
 
-    UI_HOME_CONTEXT_MENU_DISABLED = 'ui_home_context_menu_disabled',
     UI_GAME_CARD_SHOW_WAIT_TIME = 'ui_game_card_show_wait_time',
 
     VIDEO_PLAYER_TYPE = 'video_player_type',
     VIDEO_PROCESSING = 'video_processing',
     VIDEO_POWER_PREFERENCE = 'video_power_preference',
+    VIDEO_MAX_FPS = 'video_max_fps',
     VIDEO_SHARPNESS = 'video_sharpness',
     VIDEO_RATIO = 'video_ratio',
     VIDEO_BRIGHTNESS = 'video_brightness',

src/index.ts

@@ -7,12 +7,11 @@ import { BxExposed } from "@utils/bx-exposed";
 import { t } from "@utils/translation";
 import { interceptHttpRequests } from "@utils/network";
 import { CE } from "@utils/html";
-import { showGamepadToast } from "@utils/gamepad";
+import { showGamepadToast, updatePollingRate } from "@utils/gamepad";
 import { EmulatedMkbHandler } from "@modules/mkb/mkb-handler";
 import { StreamBadges } from "@modules/stream/stream-badges";
 import { StreamStats } from "@modules/stream/stream-stats";
 import { addCss, preloadFonts } from "@utils/css";
-import { Toast } from "@utils/toast";
 import { LoadingScreen } from "@modules/loading-screen";
 import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
 import { TouchController } from "@modules/touch-controller";
@@ -26,7 +25,7 @@ import { disableAdobeAudienceManager, patchAudioContext, patchCanvasContext, pat
 import { AppInterface, STATES } from "@utils/global";
 import { BxLogger } from "@utils/bx-logger";
 import { GameBar } from "./modules/game-bar/game-bar";
-import { Screenshot } from "./utils/screenshot";
+import { ScreenshotManager } from "./utils/screenshot-manager";
 import { NativeMkbHandler } from "./modules/mkb/native-mkb-handler";
 import { GuideMenu } from "./modules/ui/guide-menu";
 import { updateVideoPlayer } from "./modules/stream/stream-settings-utils";
@@ -42,6 +41,7 @@ import { StreamUiHandler } from "./modules/stream/stream-ui";
 import { UserAgent } from "./utils/user-agent";
 import { XboxApi } from "./utils/xbox-api";
 import { StreamStatsCollector } from "./utils/stream-stats-collector";
+import { RootDialogObserver } from "./utils/root-dialog-observer";
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
@@ -169,7 +169,7 @@ document.addEventListener('readystatechange', e => {
 
     // Hide "Play with Friends" skeleton section
     if (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS)) {
-        const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest('div[class*=HomePage-module]') as HTMLElement;
+        const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest<HTMLElement>('div[class*=HomePage-module]');
         $parent && ($parent.style.display = 'none');
     }
 
@@ -193,7 +193,7 @@ window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
     window.setTimeout(HeaderSection.watchHeader, 2000);
 
     // Open Settings dialog on Unsupported page
-    const $unsupportedPage = document.querySelector('div[class^=UnsupportedMarketPage-module__container]') as HTMLElement;
+    const $unsupportedPage = document.querySelector<HTMLElement>('div[class^=UnsupportedMarketPage-module__container]');
     if ($unsupportedPage) {
         SettingsNavigationDialog.getInstance().show();
     }
@@ -240,7 +240,7 @@ window.addEventListener(BxEvent.STREAM_PLAYING, e => {
 
     if (isFullVersion()) {
         const $video = (e as any).$video as HTMLVideoElement;
-        Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight);
+        ScreenshotManager.getInstance().updateCanvasSize($video.videoWidth, $video.videoHeight);
     }
 
     updateVideoPlayer();
@@ -309,12 +309,13 @@ function unload() {
     window.BX_EXPOSED.stopTakRendering = false;
 
     NavigationDialogManager.getInstance().hide();
-    StreamStats.getInstance().onStoppedPlaying();
+    StreamStats.getInstance().destroy();
+    StreamBadges.getInstance().destroy();
 
     if (isFullVersion()) {
         MouseCursorHider.stop();
         TouchController.reset();
-        GameBar.getInstance().disable();
+        (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance().disable();
     }
 }
 
@@ -324,59 +325,10 @@ window.addEventListener('pagehide', e => {
 });
 
 isFullVersion() && window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
-    Screenshot.takeScreenshot();
+    ScreenshotManager.getInstance().takeScreenshot();
 });
 
 
-function observeRootDialog($root: HTMLElement) {
-    let beingShown = false;
-
-    const observer = new MutationObserver(mutationList => {
-        for (const mutation of mutationList) {
-            if (mutation.type !== 'childList') {
-                continue;
-            }
-
-            BX_FLAGS.Debug && BxLogger.warning('RootDialog', 'added', mutation.addedNodes);
-            if (mutation.addedNodes.length === 1) {
-                const $addedElm = mutation.addedNodes[0];
-                if ($addedElm instanceof HTMLElement && $addedElm.className) {
-                    // Make sure it's Guide dialog
-                    if ($root.querySelector('div[class*=GuideDialog]')) {
-                        GuideMenu.observe($addedElm);
-                    }
-                }
-            }
-
-            const shown = !!($root.firstElementChild && $root.firstElementChild.childElementCount > 0);
-            if (shown !== beingShown) {
-                beingShown = shown;
-                BxEvent.dispatch(window, shown ? BxEvent.XCLOUD_DIALOG_SHOWN : BxEvent.XCLOUD_DIALOG_DISMISSED);
-            }
-        }
-    });
-    observer.observe($root, {subtree: true, childList: true});
-}
-
-function waitForRootDialog() {
-    const observer = new MutationObserver(mutationList => {
-        for (const mutation of mutationList) {
-            if (mutation.type !== 'childList') {
-                continue;
-            }
-
-            const $target = mutation.target as HTMLElement;
-            if ($target.id && $target.id === 'gamepass-dialog-root') {
-                observer.disconnect();
-                observeRootDialog($target);
-                break;
-            }
-        };
-    });
-    observer.observe(document.documentElement, {subtree: true, childList: true});
-}
-
-
 function main() {
     if (getPref(PrefKey.GAME_MSFS2020_FORCE_NATIVE_MKB)) {
         BX_FLAGS.ForceNativeMkbTitles.push('9PMQDM08SNK9');
@@ -397,21 +349,18 @@ function main() {
         disableAdobeAudienceManager();
     }
 
-    waitForRootDialog();
+    RootDialogObserver.waitForRootDialog();
 
     // Setup UI
     addCss();
-    Toast.setup();
 
-    GuideMenu.addEventListeners();
+    GuideMenu.getInstance().addEventListeners();
     StreamStatsCollector.setupEvents();
     StreamBadges.setupEvents();
     StreamStats.setupEvents();
 
     if (isFullVersion()) {
-        (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
-        Screenshot.setup();
-
+        updatePollingRate();
         STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
         overridePreloadState();
 

src/modules/controller-shortcut.ts

@@ -1,4 +1,4 @@
-import { Screenshot } from "@utils/screenshot";
+import { ScreenshotManager } from "@/utils/screenshot-manager";
 import { GamepadKey } from "@enums/mkb";
 import { PrompFont } from "@enums/prompt-font";
 import { CE, removeChildElements } from "@utils/html";
@@ -38,66 +38,67 @@ const enum ShortcutAction {
 }
 
 export class ControllerShortcut {
-    static readonly #STORAGE_KEY = 'better_xcloud_controller_shortcuts';
+    private static readonly STORAGE_KEY = 'better_xcloud_controller_shortcuts';
 
-    static #buttonsCache: {[key: string]: boolean[]} = {};
-    static #buttonsStatus: {[key: string]: boolean[]} = {};
+    private static buttonsCache: {[key: string]: boolean[]} = {};
+    private static buttonsStatus: {[key: string]: boolean[]} = {};
 
-    static #$selectProfile: HTMLSelectElement;
-    static #$selectActions: Partial<{[key in GamepadKey]: HTMLSelectElement}> = {};
-    static #$container: HTMLElement;
+    private static $selectProfile: HTMLSelectElement;
+    private static $selectActions: Partial<{[key in GamepadKey]: HTMLSelectElement}> = {};
+    private static $container: HTMLElement;
 
-    static #ACTIONS: {[key: string]: (ShortcutAction | null)[]} | null = null;
+    private static ACTIONS: {[key: string]: (ShortcutAction | null)[]} | null = null;
 
     static reset(index: number) {
-        ControllerShortcut.#buttonsCache[index] = [];
-        ControllerShortcut.#buttonsStatus[index] = [];
+        ControllerShortcut.buttonsCache[index] = [];
+        ControllerShortcut.buttonsStatus[index] = [];
     }
 
     static handle(gamepad: Gamepad): boolean {
-        if (!ControllerShortcut.#ACTIONS) {
-            ControllerShortcut.#ACTIONS = ControllerShortcut.#getActionsFromStorage();
+        if (!ControllerShortcut.ACTIONS) {
+            ControllerShortcut.ACTIONS = ControllerShortcut.getActionsFromStorage();
         }
 
         const gamepadIndex = gamepad.index;
-        const actions = ControllerShortcut.#ACTIONS![gamepad.id];
+        const actions = ControllerShortcut.ACTIONS![gamepad.id];
         if (!actions) {
             return false;
         }
 
         // Move the buttons status from the previous frame to the cache
-        ControllerShortcut.#buttonsCache[gamepadIndex] = ControllerShortcut.#buttonsStatus[gamepadIndex].slice(0);
+        ControllerShortcut.buttonsCache[gamepadIndex] = ControllerShortcut.buttonsStatus[gamepadIndex].slice(0);
         // Clear the buttons status
-        ControllerShortcut.#buttonsStatus[gamepadIndex] = [];
+        ControllerShortcut.buttonsStatus[gamepadIndex] = [];
 
         const pressed: boolean[] = [];
         let otherButtonPressed = false;
 
-        gamepad.buttons.forEach((button, index) => {
+        const entries = gamepad.buttons.entries();
+        for (const [index, button] of entries) {
             // Only add the newly pressed button to the array (holding doesn't count)
             if (button.pressed && index !== GamepadKey.HOME) {
                 otherButtonPressed = true;
                 pressed[index] = true;
 
                 // If this is newly pressed button -> run action
-                if (actions[index] && !ControllerShortcut.#buttonsCache[gamepadIndex][index]) {
-                    setTimeout(() => ControllerShortcut.#runAction(actions[index]!), 0);
+                if (actions[index] && !ControllerShortcut.buttonsCache[gamepadIndex][index]) {
+                    setTimeout(() => ControllerShortcut.runAction(actions[index]!), 0);
                 }
             }
-        });
+        };
 
-        ControllerShortcut.#buttonsStatus[gamepadIndex] = pressed;
+        ControllerShortcut.buttonsStatus[gamepadIndex] = pressed;
         return otherButtonPressed;
     }
 
-    static #runAction(action: ShortcutAction) {
+    private static runAction(action: ShortcutAction) {
         switch (action) {
             case ShortcutAction.BETTER_XCLOUD_SETTINGS_SHOW:
                 SettingsNavigationDialog.getInstance().show();
                 break;
 
             case ShortcutAction.STREAM_SCREENSHOT_CAPTURE:
-                Screenshot.takeScreenshot();
+                ScreenshotManager.getInstance().takeScreenshot();
                 break;
 
             case ShortcutAction.STREAM_STATS_TOGGLE:
@@ -134,8 +135,8 @@ export class ControllerShortcut {
         }
     }
 
-    static #updateAction(profile: string, button: GamepadKey, action: ShortcutAction | null) {
-        const actions = ControllerShortcut.#ACTIONS!;
+    private static updateAction(profile: string, button: GamepadKey, action: ShortcutAction | null) {
+        const actions = ControllerShortcut.ACTIONS!;
         if (!(profile in actions)) {
             actions[profile] = [];
         }
@@ -147,9 +148,9 @@ export class ControllerShortcut {
         actions[profile][button] = action;
 
         // Remove empty profiles
-        for (const key in ControllerShortcut.#ACTIONS) {
+        for (const key in ControllerShortcut.ACTIONS) {
             let empty = true;
-            for (const value of ControllerShortcut.#ACTIONS[key]) {
+            for (const value of ControllerShortcut.ACTIONS[key]) {
                 if (!!value) {
                     empty = false;
                     break;
@@ -157,19 +158,17 @@ export class ControllerShortcut {
             }
 
             if (empty) {
-                delete ControllerShortcut.#ACTIONS[key];
+                delete ControllerShortcut.ACTIONS[key];
             }
         }
 
         // Save to storage
-        window.localStorage.setItem(ControllerShortcut.#STORAGE_KEY, JSON.stringify(ControllerShortcut.#ACTIONS));
-
-        console.log(ControllerShortcut.#ACTIONS);
+        window.localStorage.setItem(ControllerShortcut.STORAGE_KEY, JSON.stringify(ControllerShortcut.ACTIONS));
     }
 
-    static #updateProfileList(e?: GamepadEvent) {
-        const $select = ControllerShortcut.#$selectProfile;
-        const $container = ControllerShortcut.#$container;
+    private static updateProfileList(e?: GamepadEvent) {
+        const $select = ControllerShortcut.$selectProfile;
+        const $container = ControllerShortcut.$container;
 
         const $fragment = document.createDocumentFragment();
 
@@ -205,16 +204,16 @@ export class ControllerShortcut {
 
     }
 
-    static #switchProfile(profile: string) {
-        let actions = ControllerShortcut.#ACTIONS![profile];
+    private static switchProfile(profile: string) {
+        let actions = ControllerShortcut.ACTIONS![profile];
         if (!actions) {
             actions = [];
         }
 
         // Reset selects' values
         let button: any;
-        for (button in ControllerShortcut.#$selectActions) {
-            const $select = ControllerShortcut.#$selectActions[button as GamepadKey]!;
+        for (button in ControllerShortcut.$selectActions) {
+            const $select = ControllerShortcut.$selectActions[button as GamepadKey]!;
             $select.value = actions[button] || '';
 
             BxEvent.dispatch($select, 'input', {
@@ -224,15 +223,15 @@ export class ControllerShortcut {
         }
     }
 
-    static #getActionsFromStorage() {
-        return JSON.parse(window.localStorage.getItem(ControllerShortcut.#STORAGE_KEY) || '{}');
+    private static getActionsFromStorage() {
+        return JSON.parse(window.localStorage.getItem(ControllerShortcut.STORAGE_KEY) || '{}');
     }
 
     static renderSettings() {
         const PREF_CONTROLLER_FRIENDLY_UI = getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
 
         // Read actions from localStorage
-        ControllerShortcut.#ACTIONS = ControllerShortcut.#getActionsFromStorage();
+        ControllerShortcut.ACTIONS = ControllerShortcut.getActionsFromStorage();
 
         const buttons: Map<GamepadKey, PrompFont> = new Map();
         buttons.set(GamepadKey.Y, PrompFont.Y);
@@ -340,7 +339,7 @@ export class ControllerShortcut {
         );
 
         $selectProfile.addEventListener('input', e => {
-            ControllerShortcut.#switchProfile($selectProfile.value);
+            ControllerShortcut.switchProfile($selectProfile.value);
         });
 
         const onActionChanged = (e: Event) => {
@@ -361,7 +360,7 @@ export class ControllerShortcut {
                 ($fakeSelect.firstElementChild as HTMLOptionElement).text = fakeText;
             }
 
-            !(e as any).ignoreOnChange && ControllerShortcut.#updateAction(profile, button as GamepadKey, action);
+            !(e as any).ignoreOnChange && ControllerShortcut.updateAction(profile, button as GamepadKey, action);
         };
 
 
@@ -387,7 +386,7 @@ export class ControllerShortcut {
             $select.dataset.button = button.toString();
             $select.addEventListener('input', onActionChanged);
 
-            ControllerShortcut.#$selectActions[button] = $select;
+            ControllerShortcut.$selectActions[button] = $select;
 
             if (PREF_CONTROLLER_FRIENDLY_UI) {
                 const $bxSelect = BxSelectElement.wrap($select);
@@ -412,14 +411,14 @@ export class ControllerShortcut {
 
         $container.appendChild($remap);
 
-        ControllerShortcut.#$selectProfile = $selectProfile;
-        ControllerShortcut.#$container = $container;
+        ControllerShortcut.$selectProfile = $selectProfile;
+        ControllerShortcut.$container = $container;
 
         // Detect when gamepad connected/disconnect
-        window.addEventListener('gamepadconnected', ControllerShortcut.#updateProfileList);
-        window.addEventListener('gamepaddisconnected', ControllerShortcut.#updateProfileList);
+        window.addEventListener('gamepadconnected', ControllerShortcut.updateProfileList);
+        window.addEventListener('gamepaddisconnected', ControllerShortcut.updateProfileList);
 
-        ControllerShortcut.#updateProfileList();
+        ControllerShortcut.updateProfileList();
 
         return $container;
     }

src/modules/dialog.ts

@@ -30,7 +30,7 @@ export class Dialog {
         } = options;
 
         // Create dialog overlay
-        const $overlay = document.querySelector('.bx-dialog-overlay') as HTMLElement;
+        const $overlay = document.querySelector<HTMLElement>('.bx-dialog-overlay');
 
         if (!$overlay) {
             this.$overlay = CE('div', {'class': 'bx-dialog-overlay bx-gone'});

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

@@ -1,6 +1,16 @@
+import { BxEvent } from "@/utils/bx-event";
+
 export abstract class BaseGameBarAction {
+    abstract $content: HTMLElement;
+
     constructor() {}
     reset() {}
 
-    abstract render(): HTMLElement;
+    onClick(e: Event) {
+        BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+    };
+
+    render(): HTMLElement {
+        return this.$content;
+    };
 }

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

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

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

@@ -0,0 +1,38 @@
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { BaseGameBarAction } from "./action-base";
+import { RendererShortcut } from "../shortcuts/shortcut-renderer";
+
+
+export class RendererAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    constructor() {
+        super();
+
+        const $btnDefault = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.EYE,
+            onClick: this.onClick.bind(this),
+        });
+
+        const $btnActivated = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.EYE_SLASH,
+            onClick: this.onClick.bind(this),
+            classes: ['bx-activated'],
+        });
+
+        this.$content = CE('div', {}, $btnDefault, $btnActivated);
+    }
+
+    onClick(e: Event) {
+        super.onClick(e);
+        const isVisible = RendererShortcut.toggleVisibility();
+        this.$content.dataset.activated = (!isVisible).toString();
+    }
+
+    reset(): void {
+        this.$content.dataset.activated = 'false';
+    }
+}

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

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

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

@@ -11,44 +11,35 @@ export class SpeakerAction extends BaseGameBarAction {
     constructor() {
         super();
 
-        const onClick = (e: Event) => {
-            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-            SoundShortcut.muteUnmute();
-        };
-
         const $btnEnable = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.AUDIO,
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
         });
 
         const $btnMuted = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.SPEAKER_MUTED,
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
             classes: ['bx-activated'],
         });
 
-        this.$content = CE('div', {},
-            $btnEnable,
-            $btnMuted,
-        );
-
-        this.reset();
+        this.$content = CE('div', {}, $btnEnable, $btnMuted);
 
         window.addEventListener(BxEvent.SPEAKER_STATE_CHANGED, e => {
             const speakerState = (e as any).speakerState;
             const enabled = speakerState === SpeakerState.ENABLED;
 
-            this.$content.dataset.enabled = enabled.toString();
+            this.$content.dataset.activated = (!enabled).toString();
         });
     }
 
-    render(): HTMLElement {
-        return this.$content;
+    onClick(e: Event) {
+        super.onClick(e);
+        SoundShortcut.muteUnmute();
     }
 
     reset(): void {
-        this.$content.dataset.enabled = 'true';
+        this.$content.dataset.activated = 'false';
     }
 }

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { CE, clearFocus, createSvgIcon } from "@utils/html";
+import { CE, createSvgIcon } from "@utils/html";
 import { ScreenshotAction } from "./action-screenshot";
 import { TouchControlAction } from "./action-touch-control";
 import { BxEvent } from "@utils/bx-event";
@@ -7,44 +7,44 @@ import type { BaseGameBarAction } from "./action-base";
 import { STATES } from "@utils/global";
 import { MicrophoneAction } from "./action-microphone";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
+import { getPref, StreamTouchController, type GameBarPosition } from "@/utils/settings-storages/global-settings-storage";
 import { TrueAchievementsAction } from "./action-true-achievements";
 import { SpeakerAction } from "./action-speaker";
+import { RendererAction } from "./action-renderer";
+import { BxLogger } from "@/utils/bx-logger";
 
 
 export class GameBar {
     private static instance: GameBar;
-    public static getInstance(): GameBar {
-        if (!GameBar.instance) {
-            GameBar.instance = new GameBar();
-        }
-
-        return GameBar.instance;
-    }
+    public static getInstance = () => GameBar.instance ?? (GameBar.instance = new GameBar());
+    private readonly LOG_TAG = 'GameBar';
 
     private static readonly VISIBLE_DURATION = 2000;
 
     private $gameBar: HTMLElement;
     private $container: HTMLElement;
 
-    private timeout: number | null = null;
+    private timeoutId: number | null = null;
 
     private actions: BaseGameBarAction[] = [];
 
     private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+
         let $container;
 
-        const position = getPref(PrefKey.GAME_BAR_POSITION);
+        const position = getPref(PrefKey.GAME_BAR_POSITION) as GameBarPosition;
 
         const $gameBar = CE('div', {id: 'bx-game-bar', class: 'bx-gone', 'data-position': position},
-                $container = CE('div', {class: 'bx-game-bar-container bx-offscreen'}),
-                createSvgIcon(position === 'bottom-left' ? BxIcon.CARET_RIGHT : BxIcon.CARET_LEFT),
-            );
+            $container = CE('div', {class: 'bx-game-bar-container bx-offscreen'}),
+            createSvgIcon(position === 'bottom-left' ? BxIcon.CARET_RIGHT : BxIcon.CARET_LEFT),
+        );
 
         this.actions = [
             new ScreenshotAction(),
             ...(STATES.userAgent.capabilities.touch && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== StreamTouchController.OFF) ? [new TouchControlAction()] : []),
             new SpeakerAction(),
+            new RendererAction(),
             new MicrophoneAction(),
             new TrueAchievementsAction(),
         ];
@@ -76,11 +76,7 @@ export class GameBar {
 
         // Add animation when hiding game bar
         $container.addEventListener('transitionend', e => {
-            const classList = $container.classList;
-            if (classList.contains('bx-hide')) {
-                classList.remove('bx-hide');
-                classList.add('bx-offscreen');
-            }
+            $container.classList.replace('bx-hide', 'bx-offscreen');
         });
 
         document.documentElement.appendChild($gameBar);
@@ -89,45 +85,38 @@ export class GameBar {
 
         // Enable/disable Game Bar when playing/pausing
         getPref(PrefKey.GAME_BAR_POSITION) !== 'off' && window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, ((e: Event) => {
-            if (!STATES.isPlaying) {
-                this.disable();
-                return;
-            }
-
             // Toggle Game bar
-            const mode = (e as any).mode;
-            mode !== 'none' ? this.disable() : this.enable();
+            if (STATES.isPlaying) {
+                const mode = (e as any).mode;
+                mode !== 'none' ? this.disable() : this.enable();
+            }
         }).bind(this));
     }
 
     private beginHideTimeout() {
         this.clearHideTimeout();
 
-        this.timeout = window.setTimeout(() => {
-                this.timeout = null;
-                this.hideBar();
-            }, GameBar.VISIBLE_DURATION);
+        this.timeoutId = window.setTimeout(() => {
+            this.timeoutId = null;
+            this.hideBar();
+        }, GameBar.VISIBLE_DURATION);
     }
 
     private clearHideTimeout() {
-        this.timeout && clearTimeout(this.timeout);
-        this.timeout = null;
+        this.timeoutId && clearTimeout(this.timeoutId);
+        this.timeoutId = null;
     }
 
     enable() {
-        this.$gameBar && this.$gameBar.classList.remove('bx-gone');
+        this.$gameBar.classList.remove('bx-gone');
     }
 
     disable() {
         this.hideBar();
-        this.$gameBar && this.$gameBar.classList.add('bx-gone');
+        this.$gameBar.classList.add('bx-gone');
     }
 
     showBar() {
-        if (!this.$container) {
-            return;
-        }
-
         this.$container.classList.remove('bx-offscreen', 'bx-hide' , 'bx-gone');
         this.$container.classList.add('bx-show');
 
@@ -136,16 +125,7 @@ export class GameBar {
 
     hideBar() {
         this.clearHideTimeout();
-
-        // Stop focusing Game Bar
-        clearFocus();
-
-        if (!this.$container) {
-            return;
-        }
-
-        this.$container.classList.remove('bx-show');
-        this.$container.classList.add('bx-hide');
+        this.$container.classList.replace('bx-show', 'bx-hide');
     }
 
     // Reset all states

src/modules/loading-screen.ts

@@ -7,13 +7,13 @@ import { getPref } from "@/utils/settings-storages/global-settings-storage";
 import { compressCss } from "@macros/build" with {type: "macro"};
 
 export class LoadingScreen {
-    static #$bgStyle: HTMLElement;
-    static #$waitTimeBox: HTMLElement;
+    private static $bgStyle: HTMLElement;
+    private static $waitTimeBox: HTMLElement;
 
-    static #waitTimeInterval?: number | null = null;
-    static #orgWebTitle: string;
+    private static waitTimeInterval?: number | null = null;
+    private static orgWebTitle: string;
 
-    static #secondsToString(seconds: number) {
+    private static secondsToString(seconds: number) {
         const m = Math.floor(seconds / 60);
         const s = Math.floor(seconds % 60);
 
@@ -28,21 +28,21 @@ export class LoadingScreen {
             return;
         }
 
-        if (!LoadingScreen.#$bgStyle) {
+        if (!LoadingScreen.$bgStyle) {
             const $bgStyle = CE('style');
             document.documentElement.appendChild($bgStyle);
-            LoadingScreen.#$bgStyle = $bgStyle;
+            LoadingScreen.$bgStyle = $bgStyle;
         }
 
-        LoadingScreen.#setBackground(titleInfo.product.heroImageUrl || titleInfo.product.titledHeroImageUrl || titleInfo.product.tileImageUrl);
+        LoadingScreen.setBackground(titleInfo.product.heroImageUrl || titleInfo.product.titledHeroImageUrl || titleInfo.product.tileImageUrl);
 
         if (getPref(PrefKey.UI_LOADING_SCREEN_ROCKET) === 'hide') {
-            LoadingScreen.#hideRocket();
+            LoadingScreen.hideRocket();
         }
     }
 
-    static #hideRocket() {
-        let $bgStyle = LoadingScreen.#$bgStyle;
+    private static hideRocket() {
+        let $bgStyle = LoadingScreen.$bgStyle;
 
         $bgStyle.textContent! += compressCss(`
 #game-stream div[class*=RocketAnimation-module__container] > svg {
@@ -55,9 +55,9 @@ export class LoadingScreen {
 `);
     }
 
-    static #setBackground(imageUrl: string) {
+    private static setBackground(imageUrl: string) {
         // Setup style tag
-        let $bgStyle = LoadingScreen.#$bgStyle;
+        let $bgStyle = LoadingScreen.$bgStyle;
 
         // Limit max width to reduce image size
         imageUrl = imageUrl + '?w=1920';
@@ -89,14 +89,14 @@ export class LoadingScreen {
     static setupWaitTime(waitTime: number) {
         // Hide rocket when queing
         if (getPref(PrefKey.UI_LOADING_SCREEN_ROCKET) === 'hide-queue') {
-            LoadingScreen.#hideRocket();
+            LoadingScreen.hideRocket();
         }
 
         let secondsLeft = waitTime;
         let $countDown;
         let $estimated;
 
-        LoadingScreen.#orgWebTitle = document.title;
+        LoadingScreen.orgWebTitle = document.title;
 
         const endDate = new Date();
         const timeZoneOffsetSeconds = endDate.getTimezoneOffset() * 60;
@@ -104,9 +104,9 @@ export class LoadingScreen {
 
         let endDateStr = endDate.toISOString().slice(0, 19);
         endDateStr = endDateStr.substring(0, 10) + ' ' + endDateStr.substring(11, 19);
-        endDateStr += ` (${LoadingScreen.#secondsToString(waitTime)})`;
+        endDateStr += ` (${LoadingScreen.secondsToString(waitTime)})`;
 
-        let $waitTimeBox = LoadingScreen.#$waitTimeBox;
+        let $waitTimeBox = LoadingScreen.$waitTimeBox;
         if (!$waitTimeBox) {
             $waitTimeBox = CE('div', {'class': 'bx-wait-time-box'},
                                     CE('label', {}, t('server')),
@@ -118,7 +118,7 @@ export class LoadingScreen {
                                    );
 
             document.documentElement.appendChild($waitTimeBox);
-            LoadingScreen.#$waitTimeBox = $waitTimeBox;
+            LoadingScreen.$waitTimeBox = $waitTimeBox;
         } else {
             $waitTimeBox.classList.remove('bx-gone');
             $estimated = $waitTimeBox.querySelector('.bx-wait-time-estimated')!;
@@ -126,36 +126,36 @@ export class LoadingScreen {
         }
 
         $estimated.textContent = endDateStr;
-        $countDown.textContent = LoadingScreen.#secondsToString(secondsLeft);
-        document.title = `[${$countDown.textContent}] ${LoadingScreen.#orgWebTitle}`;
+        $countDown.textContent = LoadingScreen.secondsToString(secondsLeft);
+        document.title = `[${$countDown.textContent}] ${LoadingScreen.orgWebTitle}`;
 
-        LoadingScreen.#waitTimeInterval = window.setInterval(() => {
+        LoadingScreen.waitTimeInterval = window.setInterval(() => {
             secondsLeft--;
-            $countDown.textContent = LoadingScreen.#secondsToString(secondsLeft);
-            document.title = `[${$countDown.textContent}] ${LoadingScreen.#orgWebTitle}`;
+            $countDown.textContent = LoadingScreen.secondsToString(secondsLeft);
+            document.title = `[${$countDown.textContent}] ${LoadingScreen.orgWebTitle}`;
 
             if (secondsLeft <= 0) {
-                LoadingScreen.#waitTimeInterval && clearInterval(LoadingScreen.#waitTimeInterval);
-                LoadingScreen.#waitTimeInterval = null;
+                LoadingScreen.waitTimeInterval && clearInterval(LoadingScreen.waitTimeInterval);
+                LoadingScreen.waitTimeInterval = null;
             }
         }, 1000);
     }
 
     static hide() {
-        LoadingScreen.#orgWebTitle && (document.title = LoadingScreen.#orgWebTitle);
-        LoadingScreen.#$waitTimeBox && LoadingScreen.#$waitTimeBox.classList.add('bx-gone');
+        LoadingScreen.orgWebTitle && (document.title = LoadingScreen.orgWebTitle);
+        LoadingScreen.$waitTimeBox && LoadingScreen.$waitTimeBox.classList.add('bx-gone');
 
-        if (getPref(PrefKey.UI_LOADING_SCREEN_GAME_ART) && LoadingScreen.#$bgStyle) {
+        if (getPref(PrefKey.UI_LOADING_SCREEN_GAME_ART) && LoadingScreen.$bgStyle) {
             const $rocketBg = document.querySelector('#game-stream rect[width="800"]');
             $rocketBg && $rocketBg.addEventListener('transitionend', e => {
-                LoadingScreen.#$bgStyle.textContent += compressCss(`
+                LoadingScreen.$bgStyle.textContent += compressCss(`
 #game-stream {
     background: #000 !important;
 }
 `);
             });
 
-            LoadingScreen.#$bgStyle.textContent += compressCss(`
+            LoadingScreen.$bgStyle.textContent += compressCss(`
 #game-stream rect[width="800"] {
     opacity: 1 !important;
 }
@@ -166,10 +166,10 @@ export class LoadingScreen {
     }
 
     static reset() {
-        LoadingScreen.#$bgStyle && (LoadingScreen.#$bgStyle.textContent = '');
+        LoadingScreen.$bgStyle && (LoadingScreen.$bgStyle.textContent = '');
 
-        LoadingScreen.#$waitTimeBox && LoadingScreen.#$waitTimeBox.classList.add('bx-gone');
-        LoadingScreen.#waitTimeInterval && clearInterval(LoadingScreen.#waitTimeInterval);
-        LoadingScreen.#waitTimeInterval = null;
+        LoadingScreen.$waitTimeBox && LoadingScreen.$waitTimeBox.classList.add('bx-gone');
+        LoadingScreen.waitTimeInterval && clearInterval(LoadingScreen.waitTimeInterval);
+        LoadingScreen.waitTimeInterval = null;
     }
 }

src/modules/mkb/mkb-handler.ts

@@ -6,7 +6,6 @@ import { createButton, ButtonStyle, CE } from "@utils/html";
 import { BxEvent } from "@utils/bx-event";
 import { Toast } from "@utils/toast";
 import { t } from "@utils/translation";
-import { LocalDb } from "@utils/local-db";
 import { KeyHelper } from "./key-helper";
 import type { MkbStoredPreset } from "@/types/mkb";
 import { AppInterface, STATES } from "@utils/global";
@@ -19,8 +18,7 @@ import { SettingsNavigationDialog } from "../ui/dialog/settings-dialog";
 import { NavigationDialogManager } from "../ui/dialog/navigation-dialog";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "@/utils/settings-storages/global-settings-storage";
-
-const LOG_TAG = 'MkbHandler';
+import { MkbPresetsDb } from "@/utils/local-db/mkb-presets-db";
 
 const PointerToMouseButton = {
     1: 0,
@@ -124,14 +122,9 @@ This class uses some code from Yuzu emulator to handle mouse's movements
 Source: https://github.com/yuzu-emu/yuzu-mainline/blob/master/src/input_common/drivers/mouse.cpp
 */
 export class EmulatedMkbHandler extends MkbHandler {
-    static #instance: EmulatedMkbHandler;
-    public static getInstance(): EmulatedMkbHandler {
-        if (!EmulatedMkbHandler.#instance) {
-            EmulatedMkbHandler.#instance = new EmulatedMkbHandler();
-        }
-
-        return EmulatedMkbHandler.#instance;
-    }
+    private static instance: EmulatedMkbHandler;
+    public static getInstance = () => EmulatedMkbHandler.instance ?? (EmulatedMkbHandler.instance = new EmulatedMkbHandler());
+    private static readonly LOG_TAG = 'EmulatedMkbHandler';
 
     #CURRENT_PRESET_DATA = MkbPreset.convert(MkbPreset.DEFAULT_PRESET);
 
@@ -173,8 +166,9 @@ export class EmulatedMkbHandler extends MkbHandler {
     #RIGHT_STICK_X: GamepadKey[] = [];
     #RIGHT_STICK_Y: GamepadKey[] = [];
 
-    constructor() {
+    private constructor() {
         super();
+        BxLogger.info(EmulatedMkbHandler.LOG_TAG, 'constructor()');
 
         this.#STICK_MAP = {
             [GamepadKey.LS_LEFT]: [this.#LEFT_STICK_X, 0, -1],
@@ -437,7 +431,7 @@ export class EmulatedMkbHandler extends MkbHandler {
     #getCurrentPreset = (): Promise<MkbStoredPreset> => {
         return new Promise(resolve => {
             const presetId = getPref(PrefKey.MKB_DEFAULT_PRESET_ID);
-            LocalDb.INSTANCE.getPreset(presetId).then((preset: MkbStoredPreset) => {
+            MkbPresetsDb.getInstance().getPreset(presetId).then((preset: MkbStoredPreset) => {
                 resolve(preset);
             });
         });
@@ -686,7 +680,7 @@ export class EmulatedMkbHandler extends MkbHandler {
                     AppInterface && NativeMkbHandler.getInstance().init();
                 }
             } else if (getPref(PrefKey.MKB_ENABLED) && (AppInterface || !UserAgent.isMobile())) {
-                    BxLogger.info(LOG_TAG, 'Emulate MKB');
+                    BxLogger.info(EmulatedMkbHandler.LOG_TAG, 'Emulate MKB');
                     EmulatedMkbHandler.getInstance().init();
             }
         });

src/modules/mkb/mkb-preset.ts

@@ -130,7 +130,6 @@ export class MkbPreset {
             mouse[MkbPresetKey.MOUSE_MAP_TO] = MkbPreset.MOUSE_SETTINGS[MkbPresetKey.MOUSE_MAP_TO].default;
         }
 
-        console.log(obj);
         return obj;
     }
 }

src/modules/mkb/mkb-remapper.ts

@@ -1,10 +1,9 @@
-import { CE, createButton, ButtonStyle } from "@utils/html";
+import { CE, createButton, ButtonStyle, removeChildElements } from "@utils/html";
 import { t } from "@utils/translation";
 import { Dialog } from "@modules/dialog";
 import { KeyHelper } from "./key-helper";
 import { MkbPreset } from "./mkb-preset";
 import { EmulatedMkbHandler } from "./mkb-handler";
-import { LocalDb } from "@utils/local-db";
 import { BxIcon } from "@utils/bx-icon";
 import type { MkbPresetData, MkbStoredPresets } from "@/types/mkb";
 import { MkbPresetKey, GamepadKey, GamepadKeyName } from "@enums/mkb";
@@ -12,18 +11,10 @@ import { deepClone } from "@utils/global";
 import { SettingElement } from "@/utils/setting-element";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
+import { MkbPresetsDb } from "@/utils/local-db/mkb-presets-db";
+import { BxLogger } from "@/utils/bx-logger";
 
 
-type MkbRemapperElements = {
-    wrapper: HTMLElement | null;
-    presetsSelect: HTMLSelectElement | null;
-    activateButton: HTMLButtonElement | null;
-    currentBindingKey: HTMLElement | null;
-
-    allKeyElements: HTMLElement[];
-    allMouseElements: {[key in MkbPresetKey]?: HTMLElement};
-};
-
 type MkbRemapperStates = {
     currentPresetId: number;
     presets: MkbStoredPresets;
@@ -33,7 +24,7 @@ type MkbRemapperStates = {
 };
 
 export class MkbRemapper {
-    readonly #BUTTON_ORDERS = [
+    private readonly BUTTON_ORDERS = [
         GamepadKey.UP,
         GamepadKey.DOWN,
         GamepadKey.LEFT,
@@ -66,169 +57,170 @@ export class MkbRemapper {
         GamepadKey.RS_RIGHT,
     ];
 
-    static #instance: MkbRemapper;
-    static get INSTANCE() {
-        if (!MkbRemapper.#instance) {
-            MkbRemapper.#instance = new MkbRemapper();
-        }
+    private static instance: MkbRemapper;
+    public static getInstance = () => MkbRemapper.instance ?? (MkbRemapper.instance = new MkbRemapper());
+    private readonly LOG_TAG = 'MkbRemapper';
 
-        return MkbRemapper.#instance;
-    };
-
-    #STATE: MkbRemapperStates = {
+    private states: MkbRemapperStates = {
         currentPresetId: 0,
         presets: {},
-
         editingPresetData: null,
-
         isEditing: false,
     };
 
-    #$: MkbRemapperElements = {
-        wrapper: null,
-        presetsSelect: null,
-        activateButton: null,
+    private $wrapper!: HTMLElement;
+    private $presetsSelect!: HTMLSelectElement;
+    private $activateButton!: HTMLButtonElement;
 
-        currentBindingKey: null,
+    private $currentBindingKey!: HTMLElement;
 
-        allKeyElements: [],
-        allMouseElements: {},
-    };
+    private allKeyElements: HTMLElement[] = [];
+    private allMouseElements: {[key in MkbPresetKey]?: HTMLElement} = {};
 
     bindingDialog: Dialog;
 
-    constructor() {
-        this.#STATE.currentPresetId = getPref(PrefKey.MKB_DEFAULT_PRESET_ID);
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+        this.states.currentPresetId = getPref(PrefKey.MKB_DEFAULT_PRESET_ID);
 
         this.bindingDialog = new Dialog({
             className: 'bx-binding-dialog',
             content: CE('div', {},
-                        CE('p', {}, t('press-to-bind')),
-                        CE('i', {}, t('press-esc-to-cancel')),
-                       ),
+                CE('p', {}, t('press-to-bind')),
+                CE('i', {}, t('press-esc-to-cancel')),
+            ),
             hideCloseButton: true,
         });
     }
 
-    #clearEventListeners = () => {
-        window.removeEventListener('keydown', this.#onKeyDown);
-        window.removeEventListener('mousedown', this.#onMouseDown);
-        window.removeEventListener('wheel', this.#onWheel);
+    private clearEventListeners = () => {
+        window.removeEventListener('keydown', this.onKeyDown);
+        window.removeEventListener('mousedown', this.onMouseDown);
+        window.removeEventListener('wheel', this.onWheel);
     };
 
-    #bindKey = ($elm: HTMLElement, key: any) => {
-        const buttonIndex = parseInt($elm.getAttribute('data-button-index')!);
-        const keySlot = parseInt($elm.getAttribute('data-key-slot')!);
+    private bindKey = ($elm: HTMLElement, key: any) => {
+        const buttonIndex = parseInt($elm.dataset.buttonIndex!);
+        const keySlot = parseInt($elm.dataset.keySlot!);
 
         // Ignore if bind the save key to the same element
-        if ($elm.getAttribute('data-key-code') === key.code) {
+        if ($elm.dataset.keyCode! === key.code) {
             return;
         }
 
         // Unbind duplicated keys
-        for (const $otherElm of this.#$.allKeyElements) {
-            if ($otherElm.getAttribute('data-key-code') === key.code) {
-                this.#unbindKey($otherElm);
+        for (const $otherElm of this.allKeyElements) {
+            if ($otherElm.dataset.keyCode === key.code) {
+                this.unbindKey($otherElm);
             }
         }
 
-        this.#STATE.editingPresetData!.mapping[buttonIndex][keySlot] = key.code;
+        this.states.editingPresetData!.mapping[buttonIndex][keySlot] = key.code;
         $elm.textContent = key.name;
-        $elm.setAttribute('data-key-code', key.code);
+        $elm.dataset.keyCode = key.code;
     }
 
-    #unbindKey = ($elm: HTMLElement) => {
-        const buttonIndex = parseInt($elm.getAttribute('data-button-index')!);
-        const keySlot = parseInt($elm.getAttribute('data-key-slot')!);
+    private unbindKey = ($elm: HTMLElement) => {
+        const buttonIndex = parseInt($elm.dataset.buttonIndex!);
+        const keySlot = parseInt($elm.dataset.keySlot!);
 
         // Remove key from preset
-        this.#STATE.editingPresetData!.mapping[buttonIndex][keySlot] = null;
+        this.states.editingPresetData!.mapping[buttonIndex][keySlot] = null;
         $elm.textContent = '';
-        $elm.removeAttribute('data-key-code');
+        delete $elm.dataset.keyCode;
     }
 
-    #onWheel = (e: WheelEvent) => {
+    private onWheel = (e: WheelEvent) => {
         e.preventDefault();
-        this.#clearEventListeners();
+        this.clearEventListeners();
 
-        this.#bindKey(this.#$.currentBindingKey!, KeyHelper.getKeyFromEvent(e));
+        this.bindKey(this.$currentBindingKey!, KeyHelper.getKeyFromEvent(e));
         window.setTimeout(() => this.bindingDialog.hide(), 200);
     };
 
-    #onMouseDown = (e: MouseEvent) => {
+    private onMouseDown = (e: MouseEvent) => {
         e.preventDefault();
-        this.#clearEventListeners();
+        this.clearEventListeners();
 
-        this.#bindKey(this.#$.currentBindingKey!, KeyHelper.getKeyFromEvent(e));
+        this.bindKey(this.$currentBindingKey!, KeyHelper.getKeyFromEvent(e));
         window.setTimeout(() => this.bindingDialog.hide(), 200);
     };
 
-    #onKeyDown = (e: KeyboardEvent) => {
+    private onKeyDown = (e: KeyboardEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        this.#clearEventListeners();
+        this.clearEventListeners();
 
         if (e.code !== 'Escape') {
-            this.#bindKey(this.#$.currentBindingKey!, KeyHelper.getKeyFromEvent(e));
+            this.bindKey(this.$currentBindingKey!, KeyHelper.getKeyFromEvent(e));
         }
 
         window.setTimeout(() => this.bindingDialog.hide(), 200);
     };
 
-    #onBindingKey = (e: MouseEvent) => {
-        if (!this.#STATE.isEditing || e.button !== 0) {
+    private onBindingKey = (e: MouseEvent) => {
+        if (!this.states.isEditing || e.button !== 0) {
             return;
         }
 
         console.log(e);
 
-        this.#$.currentBindingKey = e.target as HTMLElement;
+        this.$currentBindingKey = e.target as HTMLElement;
 
-        window.addEventListener('keydown', this.#onKeyDown);
-        window.addEventListener('mousedown', this.#onMouseDown);
-        window.addEventListener('wheel', this.#onWheel);
+        window.addEventListener('keydown', this.onKeyDown);
+        window.addEventListener('mousedown', this.onMouseDown);
+        window.addEventListener('wheel', this.onWheel);
 
-        this.bindingDialog.show({title: this.#$.currentBindingKey.getAttribute('data-prompt')!});
+        this.bindingDialog.show({title: this.$currentBindingKey.dataset.prompt!});
     };
 
-    #onContextMenu = (e: Event) => {
+    private onContextMenu = (e: Event) => {
         e.preventDefault();
-        if (!this.#STATE.isEditing) {
+        if (!this.states.isEditing) {
             return;
         }
 
-        this.#unbindKey(e.target as HTMLElement);
+        this.unbindKey(e.target as HTMLElement);
     };
 
-    #getPreset = (presetId: number) => {
-        return this.#STATE.presets[presetId];
+    private getPreset = (presetId: number) => {
+        return this.states.presets[presetId];
     }
 
-    #getCurrentPreset = () => {
-        return this.#getPreset(this.#STATE.currentPresetId);
+    private getCurrentPreset = () => {
+        let preset = this.getPreset(this.states.currentPresetId);
+        if (!preset) {
+            // Get the first preset in the list
+            const firstPresetId = parseInt(Object.keys(this.states.presets)[0]);
+            preset = this.states.presets[firstPresetId];
+            this.states.currentPresetId = firstPresetId;
+            setPref(PrefKey.MKB_DEFAULT_PRESET_ID, firstPresetId);
+        }
+
+        return preset;
     }
 
-    #switchPreset = (presetId: number) => {
-        this.#STATE.currentPresetId = presetId;
-        const presetData = this.#getCurrentPreset().data;
+    private switchPreset = (presetId: number) => {
+        this.states.currentPresetId = presetId;
+        const presetData = this.getCurrentPreset().data;
 
-        for (const $elm of this.#$.allKeyElements) {
-            const buttonIndex = parseInt($elm.getAttribute('data-button-index')!);
-            const keySlot = parseInt($elm.getAttribute('data-key-slot')!);
+        for (const $elm of this.allKeyElements) {
+            const buttonIndex = parseInt($elm.dataset.buttonIndex!);
+            const keySlot = parseInt($elm.dataset.keySlot!);
 
             const buttonKeys = presetData.mapping[buttonIndex];
             if (buttonKeys && buttonKeys[keySlot]) {
                 $elm.textContent = KeyHelper.codeToKeyName(buttonKeys[keySlot]!);
-                $elm.setAttribute('data-key-code', buttonKeys[keySlot]!);
+                $elm.dataset.keyCode = buttonKeys[keySlot]!;
             } else {
                 $elm.textContent = '';
-                $elm.removeAttribute('data-key-code');
+                delete $elm.dataset.keyCode;
             }
         }
 
         let key: MkbPresetKey;
-        for (key in this.#$.allMouseElements) {
-            const $elm = this.#$.allMouseElements[key]!;
+        for (key in this.allMouseElements) {
+            const $elm = this.allMouseElements[key]!;
             let value = presetData.mouse[key];
             if (typeof value === 'undefined') {
                 value = MkbPreset.MOUSE_SETTINGS[key].default;
@@ -238,74 +230,72 @@ export class MkbRemapper {
         }
 
         // Update state of Activate button
-        const activated = getPref(PrefKey.MKB_DEFAULT_PRESET_ID) === this.#STATE.currentPresetId;
-        this.#$.activateButton!.disabled = activated;
-        this.#$.activateButton!.querySelector('span')!.textContent = activated ? t('activated') : t('activate');
+        const activated = getPref(PrefKey.MKB_DEFAULT_PRESET_ID) === this.states.currentPresetId;
+        this.$activateButton.disabled = activated;
+        this.$activateButton.querySelector('span')!.textContent = activated ? t('activated') : t('activate');
     }
 
-    #refresh() {
+    private async refresh() {
         // Clear presets select
-        while (this.#$.presetsSelect!.firstChild) {
-            this.#$.presetsSelect!.removeChild(this.#$.presetsSelect!.firstChild);
+        removeChildElements(this.$presetsSelect);
+
+        const presets = await MkbPresetsDb.getInstance().getPresets();
+
+        this.states.presets = presets;
+        const fragment = document.createDocumentFragment();
+
+        let defaultPresetId;
+        if (this.states.currentPresetId === 0) {
+            this.states.currentPresetId = parseInt(Object.keys(presets)[0]);
+
+            defaultPresetId = this.states.currentPresetId;
+            setPref(PrefKey.MKB_DEFAULT_PRESET_ID, defaultPresetId);
+            EmulatedMkbHandler.getInstance().refreshPresetData();
+        } else {
+            defaultPresetId = getPref(PrefKey.MKB_DEFAULT_PRESET_ID);
         }
 
-        LocalDb.INSTANCE.getPresets().then(presets => {
-            this.#STATE.presets = presets;
-            const $fragment = document.createDocumentFragment();
-
-            let defaultPresetId;
-            if (this.#STATE.currentPresetId === 0) {
-                this.#STATE.currentPresetId = parseInt(Object.keys(presets)[0]);
-
-                defaultPresetId = this.#STATE.currentPresetId;
-                setPref(PrefKey.MKB_DEFAULT_PRESET_ID, defaultPresetId);
-                EmulatedMkbHandler.getInstance().refreshPresetData();
-            } else {
-                defaultPresetId = getPref(PrefKey.MKB_DEFAULT_PRESET_ID);
+        for (let id in presets) {
+            const preset = presets[id];
+            let name = preset.name;
+            if (id === defaultPresetId) {
+                name = `🎮 ` + name;
             }
 
-            for (let id in presets) {
-                const preset = presets[id];
-                let name = preset.name;
-                if (id === defaultPresetId) {
-                    name = `🎮 ` + name;
-                }
+            const $options = CE<HTMLOptionElement>('option', {value: id}, name);
+            $options.selected = parseInt(id) === this.states.currentPresetId;
 
-                const $options = CE<HTMLOptionElement>('option', {value: id}, name);
-                $options.selected = parseInt(id) === this.#STATE.currentPresetId;
+            fragment.appendChild($options);
+        };
 
-                $fragment.appendChild($options);
-            };
+        this.$presetsSelect.appendChild(fragment);
 
-            this.#$.presetsSelect!.appendChild($fragment);
+        // Update state of Activate button
+        const activated = defaultPresetId === this.states.currentPresetId;
+        this.$activateButton.disabled = activated;
+        this.$activateButton.querySelector('span')!.textContent = activated ? t('activated') : t('activate');
 
-            // Update state of Activate button
-            const activated = defaultPresetId === this.#STATE.currentPresetId;
-            this.#$.activateButton!.disabled = activated;
-            this.#$.activateButton!.querySelector('span')!.textContent = activated ? t('activated') : t('activate');
-
-            !this.#STATE.isEditing && this.#switchPreset(this.#STATE.currentPresetId);
-        });
+        !this.states.isEditing && this.switchPreset(this.states.currentPresetId);
     }
 
-    #toggleEditing = (force?: boolean) => {
-        this.#STATE.isEditing = typeof force !== 'undefined' ? force : !this.#STATE.isEditing;
-        this.#$.wrapper!.classList.toggle('bx-editing', this.#STATE.isEditing);
+    private toggleEditing = (force?: boolean) => {
+        this.states.isEditing = typeof force !== 'undefined' ? force : !this.states.isEditing;
+        this.$wrapper.classList.toggle('bx-editing', this.states.isEditing);
 
-        if (this.#STATE.isEditing) {
-            this.#STATE.editingPresetData = deepClone(this.#getCurrentPreset().data);
+        if (this.states.isEditing) {
+            this.states.editingPresetData = deepClone(this.getCurrentPreset().data);
         } else {
-            this.#STATE.editingPresetData = null;
+            this.states.editingPresetData = null;
         }
 
 
-        const childElements = this.#$.wrapper!.querySelectorAll('select, button, input');
+        const childElements = this.$wrapper.querySelectorAll('select, button, input');
         for (const $elm of Array.from(childElements)) {
             if ($elm.parentElement!.parentElement!.classList.contains('bx-mkb-action-buttons')) {
                 continue;
             }
 
-            let disable = !this.#STATE.isEditing;
+            let disable = !this.states.isEditing;
 
             if ($elm.parentElement!.classList.contains('bx-mkb-preset-tools')) {
                 disable = !disable;
@@ -316,14 +306,14 @@ export class MkbRemapper {
     }
 
     render() {
-        this.#$.wrapper = CE('div', {'class': 'bx-mkb-settings'});
+        this.$wrapper = CE('div', {class: 'bx-mkb-settings'});
 
-        this.#$.presetsSelect = CE<HTMLSelectElement>('select', {tabindex: -1});
-        this.#$.presetsSelect!.addEventListener('change', e => {
-            this.#switchPreset(parseInt((e.target as HTMLSelectElement).value));
+        this.$presetsSelect = CE<HTMLSelectElement>('select', {tabindex: -1});
+        this.$presetsSelect.addEventListener('change', e => {
+            this.switchPreset(parseInt((e.target as HTMLSelectElement).value));
         });
 
-        const promptNewName = (value?: string) => {
+        const promptNewName = (value: string) => {
             let newName: string | null = '';
             while (!newName) {
                 newName = prompt(t('prompt-preset-name'), value);
@@ -336,15 +326,15 @@ export class MkbRemapper {
             return newName ? newName : false;
         };
 
-        const $header = CE('div', {'class': 'bx-mkb-preset-tools'},
-            this.#$.presetsSelect,
+        const $header = CE('div', {class: 'bx-mkb-preset-tools'},
+            this.$presetsSelect,
             // Rename button
             createButton({
                 title: t('rename'),
                 icon: BxIcon.CURSOR_TEXT,
                 tabIndex: -1,
-                onClick: e => {
-                    const preset = this.#getCurrentPreset();
+                onClick: async () => {
+                    const preset = this.getCurrentPreset();
 
                     let newName = promptNewName(preset.name);
                     if (!newName || newName === preset.name) {
@@ -353,28 +343,30 @@ export class MkbRemapper {
 
                     // Update preset with new name
                     preset.name = newName;
-                    LocalDb.INSTANCE.updatePreset(preset).then(id => this.#refresh());
+
+                    await MkbPresetsDb.getInstance().updatePreset(preset);
+                    await this.refresh();
                 },
             }),
 
             // New button
             createButton({
-                    icon: BxIcon.NEW,
-                    title: t('new'),
-                    tabIndex: -1,
-                    onClick: e => {
-                        let newName = promptNewName('');
-                        if (!newName) {
-                            return;
-                        }
+                icon: BxIcon.NEW,
+                title: t('new'),
+                tabIndex: -1,
+                onClick: e => {
+                    let newName = promptNewName('');
+                    if (!newName) {
+                        return;
+                    }
 
-                        // Create new preset selected name
-                        LocalDb.INSTANCE.newPreset(newName, MkbPreset.DEFAULT_PRESET).then(id => {
-                            this.#STATE.currentPresetId = id;
-                            this.#refresh();
-                        });
-                    },
-                }),
+                    // Create new preset selected name
+                    MkbPresetsDb.getInstance().newPreset(newName, MkbPreset.DEFAULT_PRESET).then(id => {
+                        this.states.currentPresetId = id;
+                        this.refresh();
+                    });
+                },
+            }),
 
             // Copy button
             createButton({
@@ -382,7 +374,7 @@ export class MkbRemapper {
                 title: t('copy'),
                 tabIndex: -1,
                 onClick: e => {
-                    const preset = this.#getCurrentPreset();
+                    const preset = this.getCurrentPreset();
 
                     let newName = promptNewName(`${preset.name} (2)`);
                     if (!newName) {
@@ -390,9 +382,9 @@ export class MkbRemapper {
                     }
 
                     // Create new preset selected name
-                    LocalDb.INSTANCE.newPreset(newName, preset.data).then(id => {
-                        this.#STATE.currentPresetId = id;
-                        this.#refresh();
+                    MkbPresetsDb.getInstance().newPreset(newName, preset.data).then(id => {
+                        this.states.currentPresetId = id;
+                        this.refresh();
                     });
                 },
             }),
@@ -408,23 +400,23 @@ export class MkbRemapper {
                         return;
                     }
 
-                    LocalDb.INSTANCE.deletePreset(this.#STATE.currentPresetId).then(id => {
-                        this.#STATE.currentPresetId = 0;
-                        this.#refresh();
+                    MkbPresetsDb.getInstance().deletePreset(this.states.currentPresetId).then(id => {
+                        this.states.currentPresetId = 0;
+                        this.refresh();
                     });
                 },
             }),
         );
 
-        this.#$.wrapper!.appendChild($header);
+        this.$wrapper.appendChild($header);
 
-        const $rows = CE('div', {'class': 'bx-mkb-settings-rows'},
-                CE('i', {'class': 'bx-mkb-note'}, t('right-click-to-unbind')),
+        const $rows = CE('div', {class: 'bx-mkb-settings-rows'},
+                CE('i', {class: 'bx-mkb-note'}, t('right-click-to-unbind')),
             );
 
         // Render keys
         const keysPerButton = 2;
-        for (const buttonIndex of this.#BUTTON_ORDERS) {
+        for (const buttonIndex of this.BUTTON_ORDERS) {
             const [buttonName, buttonPrompt] = GamepadKeyName[buttonIndex];
 
             let $elm;
@@ -437,22 +429,22 @@ export class MkbRemapper {
                     'data-key-slot': i,
                 }, ' ');
 
-                $elm.addEventListener('mouseup', this.#onBindingKey);
-                $elm.addEventListener('contextmenu', this.#onContextMenu);
+                $elm.addEventListener('mouseup', this.onBindingKey);
+                $elm.addEventListener('contextmenu', this.onContextMenu);
 
                 $fragment.appendChild($elm);
-                this.#$.allKeyElements.push($elm);
+                this.allKeyElements.push($elm);
             }
 
-            const $keyRow = CE('div', {'class': 'bx-mkb-key-row'},
-                CE('label', {'title': buttonName}, buttonPrompt),
+            const $keyRow = CE('div', {class: 'bx-mkb-key-row'},
+                CE('label', {title: buttonName}, buttonPrompt),
                 $fragment,
             );
 
             $rows.appendChild($keyRow);
         }
 
-        $rows.appendChild(CE('i', {'class': 'bx-mkb-note'}, t('mkb-adjust-ingame-settings')),);
+        $rows.appendChild(CE('i', {class: 'bx-mkb-note'}, t('mkb-adjust-ingame-settings')),);
 
         // Render mouse settings
         const $mouseSettings = document.createDocumentFragment();
@@ -463,7 +455,7 @@ export class MkbRemapper {
 
             let $elm;
             const onChange = (e: Event, value: any) => {
-                (this.#STATE.editingPresetData!.mouse as any)[key] = value;
+                (this.states.editingPresetData!.mouse as any)[key] = value;
             };
             const $row = CE('label', {
                 class: 'bx-settings-row',
@@ -474,32 +466,32 @@ export class MkbRemapper {
             );
 
             $mouseSettings.appendChild($row);
-            this.#$.allMouseElements[key as MkbPresetKey] = $elm;
+            this.allMouseElements[key as MkbPresetKey] = $elm;
         }
 
         $rows.appendChild($mouseSettings);
-        this.#$.wrapper!.appendChild($rows);
+        this.$wrapper.appendChild($rows);
 
         // Render action buttons
-        const $actionButtons = CE('div', {'class': 'bx-mkb-action-buttons'},
+        const $actionButtons = CE('div', {class: 'bx-mkb-action-buttons'},
             CE('div', {},
                 // Edit button
                 createButton({
                     label: t('edit'),
                     tabIndex: -1,
-                    onClick: e => this.#toggleEditing(true),
+                    onClick: e => this.toggleEditing(true),
                 }),
 
                 // Activate button
-                this.#$.activateButton = createButton({
+                this.$activateButton = createButton({
                     label: t('activate'),
                     style: ButtonStyle.PRIMARY,
                     tabIndex: -1,
                     onClick: e => {
-                        setPref(PrefKey.MKB_DEFAULT_PRESET_ID, this.#STATE.currentPresetId);
+                        setPref(PrefKey.MKB_DEFAULT_PRESET_ID, this.states.currentPresetId);
                         EmulatedMkbHandler.getInstance().refreshPresetData();
 
-                        this.#refresh();
+                        this.refresh();
                     },
                 }),
             ),
@@ -512,8 +504,8 @@ export class MkbRemapper {
                     tabIndex: -1,
                     onClick: e => {
                         // Restore preset
-                        this.#switchPreset(this.#STATE.currentPresetId);
-                        this.#toggleEditing(false);
+                        this.switchPreset(this.states.currentPresetId);
+                        this.toggleEditing(false);
                     },
                 }),
 
@@ -523,27 +515,27 @@ export class MkbRemapper {
                     style: ButtonStyle.PRIMARY,
                     tabIndex: -1,
                     onClick: e => {
-                        const updatedPreset = deepClone(this.#getCurrentPreset());
-                        updatedPreset.data = this.#STATE.editingPresetData as MkbPresetData;
+                        const updatedPreset = deepClone(this.getCurrentPreset());
+                        updatedPreset.data = this.states.editingPresetData as MkbPresetData;
 
-                        LocalDb.INSTANCE.updatePreset(updatedPreset).then(id => {
+                        MkbPresetsDb.getInstance().updatePreset(updatedPreset).then(id => {
                             // If this is the default preset => refresh preset data
                             if (id === getPref(PrefKey.MKB_DEFAULT_PRESET_ID)) {
                                 EmulatedMkbHandler.getInstance().refreshPresetData();
                             }
 
-                            this.#toggleEditing(false);
-                            this.#refresh();
+                            this.toggleEditing(false);
+                            this.refresh();
                         });
                     },
                 }),
             ),
         );
 
-        this.#$.wrapper!.appendChild($actionButtons);
+        this.$wrapper.appendChild($actionButtons);
 
-        this.#toggleEditing(false);
-        this.#refresh();
-        return this.#$.wrapper;
+        this.toggleEditing(false);
+        this.refresh();
+        return this.$wrapper;
     }
 }

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

@@ -7,6 +7,7 @@ import { BxEvent } from "@/utils/bx-event";
 import { ButtonStyle, CE, createButton } from "@/utils/html";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { BxLogger } from "@/utils/bx-logger";
 
 type NativeMouseData = {
     X: number,
@@ -23,6 +24,9 @@ type XcloudInputSink = {
 
 export class NativeMkbHandler extends MkbHandler {
     private static instance: NativeMkbHandler;
+    public static getInstance = () => NativeMkbHandler.instance ?? (NativeMkbHandler.instance = new NativeMkbHandler());
+    private readonly LOG_TAG = 'NativeMkbHandler';
+
     #pointerClient: PointerClient | undefined;
     #enabled: boolean = false;
 
@@ -37,12 +41,9 @@ export class NativeMkbHandler extends MkbHandler {
 
     #$message?: HTMLElement;
 
-    public static getInstance(): NativeMkbHandler {
-        if (!NativeMkbHandler.instance) {
-            NativeMkbHandler.instance = new NativeMkbHandler();
-        }
-
-        return NativeMkbHandler.instance;
+    private constructor() {
+        super();
+        BxLogger.info(this.LOG_TAG, 'constructor()');
     }
 
     #onKeyboardEvent(e: KeyboardEvent) {

src/modules/mkb/pointer-client.ts

@@ -2,8 +2,6 @@ import { BxLogger } from "@/utils/bx-logger";
 import { Toast } from "@/utils/toast";
 import type { MkbHandler } from "./base-mkb-handler";
 
-const LOG_TAG = 'PointerClient';
-
 enum PointerAction {
     MOVE = 1,
     BUTTON_PRESS = 2,
@@ -15,45 +13,44 @@ enum PointerAction {
 
 export class PointerClient {
     private static instance: PointerClient;
-    public static getInstance(): PointerClient {
-        if (!PointerClient.instance) {
-            PointerClient.instance = new PointerClient();
-        }
+    public static getInstance = () => PointerClient.instance ?? (PointerClient.instance = new PointerClient());
+    private readonly LOG_TAG = 'PointerClient';
 
-        return PointerClient.instance;
+    private socket: WebSocket | undefined | null;
+    private mkbHandler: MkbHandler | undefined;
+
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
     }
 
-    #socket: WebSocket | undefined | null;
-    #mkbHandler: MkbHandler | undefined;
-
     start(port: number, mkbHandler: MkbHandler) {
         if (!port) {
             throw new Error('PointerServer port is 0');
         }
 
-        this.#mkbHandler = mkbHandler;
+        this.mkbHandler = mkbHandler;
 
         // Create WebSocket connection.
-        this.#socket = new WebSocket(`ws://localhost:${port}`);
-        this.#socket.binaryType = 'arraybuffer';
+        this.socket = new WebSocket(`ws://localhost:${port}`);
+        this.socket.binaryType = 'arraybuffer';
 
         // Connection opened
-        this.#socket.addEventListener('open', (event) => {
-            BxLogger.info(LOG_TAG, 'connected')
+        this.socket.addEventListener('open', (event) => {
+            BxLogger.info(this.LOG_TAG, 'connected')
         });
 
         // Error
-        this.#socket.addEventListener('error', (event) => {
-            BxLogger.error(LOG_TAG, event);
+        this.socket.addEventListener('error', (event) => {
+            BxLogger.error(this.LOG_TAG, event);
             Toast.show('Cannot setup mouse: ' + event);
         });
 
-        this.#socket.addEventListener('close', (event) => {
-            this.#socket = null;
+        this.socket.addEventListener('close', (event) => {
+            this.socket = null;
         });
 
         // Listen for messages
-        this.#socket.addEventListener('message', (event) => {
+        this.socket.addEventListener('message', (event) => {
             const dataView = new DataView(event.data);
 
             let messageType = dataView.getInt8(0);
@@ -84,7 +81,7 @@ export class PointerClient {
         offset += Int16Array.BYTES_PER_ELEMENT;
         const y = dataView.getInt16(offset);
 
-        this.#mkbHandler?.handleMouseMove({
+        this.mkbHandler?.handleMouseMove({
             movementX: x,
             movementY: y,
         });
@@ -94,7 +91,7 @@ export class PointerClient {
     onPress(messageType: PointerAction, dataView: DataView, offset: number) {
         const button = dataView.getUint8(offset);
 
-        this.#mkbHandler?.handleMouseClick({
+        this.mkbHandler?.handleMouseClick({
             pointerButton: button,
             pressed: messageType === PointerAction.BUTTON_PRESS,
         });
@@ -108,7 +105,7 @@ export class PointerClient {
         offset += Int16Array.BYTES_PER_ELEMENT;
         const hScroll = dataView.getInt16(offset);
 
-        this.#mkbHandler?.handleMouseWheel({
+        this.mkbHandler?.handleMouseWheel({
             vertical: vScroll,
             horizontal: hScroll,
         });
@@ -118,13 +115,13 @@ export class PointerClient {
 
     onPointerCaptureChanged(dataView: DataView, offset: number) {
         const hasCapture = dataView.getInt8(offset) === 1;
-        !hasCapture && this.#mkbHandler?.stop();
+        !hasCapture && this.mkbHandler?.stop();
     }
 
     stop() {
         try {
-            this.#socket?.close();
+            this.socket?.close();
         } catch (e) {}
-        this.#socket = null;
+        this.socket = null;
     }
 }

src/modules/patcher.ts

@@ -202,12 +202,17 @@ const PATCHES = {
             return false;
         }
 
-        const nextIndex = str.indexOf('setTimeout(this.pollGamepads', index);
-        if (nextIndex === -1) {
+        const setTimeoutIndex = str.indexOf('setTimeout(this.pollGamepads', index);
+        if (setTimeoutIndex < 0) {
             return false;
         }
 
-        let codeBlock = str.substring(index, nextIndex);
+        let codeBlock = str.substring(index, setTimeoutIndex);
+
+        // Patch polling rate
+        const tmp = str.substring(setTimeoutIndex, setTimeoutIndex + 150);
+        const tmpPatched = tmp.replaceAll('Math.max(0,4-', 'Math.max(0,window.BX_CONTROLLER_POLLING_RATE-');
+        str = PatcherUtils.replaceWith(str, setTimeoutIndex, tmp, tmpPatched);
 
         // Block gamepad stats collecting
         if (getPref(PrefKey.BLOCK_TRACKING)) {
@@ -226,7 +231,8 @@ const PATCHES = {
             codeBlock = codeBlock.replace('this.gamepadTimestamps.set', newCode + 'this.gamepadTimestamps.set');
         }
 
-        return str.substring(0, index) + codeBlock + str.substring(nextIndex);
+        str = str.substring(0, index) + codeBlock + str.substring(setTimeoutIndex);
+        return str;
     },
 
     enableXcloudLogger(str: string) {
@@ -632,12 +638,12 @@ true` + text;
     },
 
     skipFeedbackDialog(str: string) {
-        let text = '&&this.shouldTransitionToFeedback(';
+        let text = 'shouldTransitionToFeedback(e){';
         if (!str.includes(text)) {
             return false;
         }
 
-        str = str.replace(text, '&& false ' + text);
+        str = str.replace(text, text + 'return !1;');
         return str;
     },
 
@@ -829,10 +835,10 @@ true` + text;
             [UiSection.MOST_POPULAR]: GamePassCloudGallery.MOST_POPULAR,
         };
 
-        PREF_HIDE_SECTIONS.forEach(section => {
+        for (const section of PREF_HIDE_SECTIONS) {
             const galleryId = sections[section];
             galleryId && siglIds.push(galleryId);
-        });
+        };
 
         const checkSyntax = siglIds.map(item => `siglId === "${item}"`).join(' || ');
 
@@ -951,7 +957,34 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
 
         str = PatcherUtils.replaceWith(str, index, '.All', '.Locked');
         return str;
-    }
+    },
+
+    // Disable long touch activating context menu
+    disableTouchContextMenu(str: string) {
+        let index = str.indexOf('"ContextualCardActions-module__container');
+        index >= 0 && (index = str.indexOf('addEventListener("touchstart"', index));
+        index >= 0 && (index = PatcherUtils.lastIndexOf(str, 'return ', index, 50));
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.replaceWith(str, index, 'return', 'return () => {};');
+        return str;
+    },
+
+    // Optimize Game slug generator by using cached RegEx
+    optimizeGameSlugGenerator(str: string) {
+        let text = '/[;,/?:@&=+_`~$%#^*()!^\\u2122\\xae\\xa9]/g';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        str = str.replace(text, 'window.BX_EXPOSED.GameSlugRegexes[0]');
+        str = str.replace('/ {2,}/g', 'window.BX_EXPOSED.GameSlugRegexes[1]');
+        str = str.replace('/ /g', 'window.BX_EXPOSED.GameSlugRegexes[2]');
+
+        return str;
+    },
 };
 
 let PATCH_ORDERS: PatchArray = [
@@ -962,6 +995,8 @@ let PATCH_ORDERS: PatchArray = [
         'exposeInputSink',
     ] : []),
 
+    'optimizeGameSlugGenerator',
+
     'detectBrowserRouterReady',
     'patchRequestInfoCrash',
 
@@ -990,6 +1025,10 @@ let PATCH_ORDERS: PatchArray = [
     getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.TOUCH) && 'ignorePlayWithTouchSection',
     (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.NATIVE_MKB) || getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.MOST_POPULAR)) && 'ignoreSiglSections',
 
+    ...(STATES.userAgent.capabilities.touch ? [
+        'disableTouchContextMenu',
+    ] : []),
+
     ...(getPref(PrefKey.BLOCK_TRACKING) ? [
         'disableAiTrack',
         'disableTelemetry',
@@ -1195,7 +1234,7 @@ export class PatcherCache {
      */
     static #getSignature(): number {
         const scriptVersion = SCRIPT_VERSION;
-        const webVersion = (document.querySelector('meta[name=gamepass-app-version]') as HTMLMetaElement)?.content;
+        const webVersion = (document.querySelector<HTMLMetaElement>('meta[name=gamepass-app-version]'))?.content;
         const patches = JSON.stringify(ALL_PATCHES);
 
         // Calculate signature

src/modules/patches/controller-shortcuts.js

@@ -85,7 +85,7 @@ if (btnHome) {
 
             this.inputSink.onGamepadInput(performance.now() - intervalMs, fakeGamepadMappings);
         } else {
-            intervalMs = 4;
+            intervalMs = window.BX_CONTROLLER_POLLING_RATE;
         }
     }
 

src/modules/player/shaders/clarity_boost.fs

@@ -1,12 +1,14 @@
+#version 300 es
+
 precision mediump float;
 uniform sampler2D data;
 uniform vec2 iResolution;
 
 const int FILTER_UNSHARP_MASKING = 1;
-const int FILTER_CAS = 2;
+// const int FILTER_CAS = 2;
 
 // constrast = 0.8
-const float CAS_CONTRAST_PEAK = (-3.0 * 0.8 + 8.0);
+const float CAS_CONTRAST_PEAK = 0.8 * -3.0 + 8.0;
 
 // Luminosity factor
 const vec3 LUMINOSITY_FACTOR = vec3(0.2126, 0.7152, 0.0722);
@@ -17,96 +19,82 @@ uniform float brightness;
 uniform float contrast;
 uniform float saturation;
 
-vec3 clarityBoost(sampler2D tex, vec2 coord) {
+out vec4 fragColor;
+
+vec3 clarityBoost(sampler2D tex, vec2 coord, vec3 e) {
     vec2 texelSize = 1.0 / iResolution.xy;
 
     // Load a collection of samples in a 3x3 neighorhood, where e is the current pixel.
     // a b c
     // d e f
     // g h i
-    vec3 a = texture2D(tex, coord + texelSize * vec2(-1, 1)).rgb;
-    vec3 b = texture2D(tex, coord + texelSize * vec2(0, 1)).rgb;
-    vec3 c = texture2D(tex, coord + texelSize * vec2(1, 1)).rgb;
+    vec3 a = texture(tex, coord + texelSize * vec2(-1, 1)).rgb;
+    vec3 b = texture(tex, coord + texelSize * vec2(0, 1)).rgb;
+    vec3 c = texture(tex, coord + texelSize * vec2(1, 1)).rgb;
 
-    vec3 d = texture2D(tex, coord + texelSize * vec2(-1, 0)).rgb;
-    vec3 e = texture2D(tex, coord).rgb;
-    vec3 f = texture2D(tex, coord + texelSize * vec2(1, 0)).rgb;
+    vec3 d = texture(tex, coord + texelSize * vec2(-1, 0)).rgb;
+    vec3 f = texture(tex, coord + texelSize * vec2(1, 0)).rgb;
 
-    vec3 g = texture2D(tex, coord + texelSize * vec2(-1, -1)).rgb;
-    vec3 h = texture2D(tex, coord + texelSize * vec2(0, -1)).rgb;
-    vec3 i = texture2D(tex, coord + texelSize * vec2(1, -1)).rgb;
+    vec3 g = texture(tex, coord + texelSize * vec2(-1, -1)).rgb;
+    vec3 h = texture(tex, coord + texelSize * vec2(0, -1)).rgb;
+    vec3 i = texture(tex, coord + texelSize * vec2(1, -1)).rgb;
 
-    if (filterId == FILTER_CAS) {
-        // Soft min and max.
-        //  a b c             b
-        //  d e f * 0.5  +  d e f * 0.5
-        //  g h i             h
-        // These are 2.0x bigger (factored out the extra multiply).
-        vec3 minRgb = min(min(min(d, e), min(f, b)), h);
-        vec3 minRgb2 = min(min(a, c), min(g, i));
-        minRgb += min(minRgb, minRgb2);
-
-        vec3 maxRgb = max(max(max(d, e), max(f, b)), h);
-        vec3 maxRgb2 = max(max(a, c), max(g, i));
-        maxRgb += max(maxRgb, maxRgb2);
-
-        // Smooth minimum distance to signal limit divided by smooth max.
-        vec3 reciprocalMaxRgb = 1.0 / maxRgb;
-        vec3 amplifyRgb = clamp(min(minRgb, 2.0 - maxRgb) * reciprocalMaxRgb, 0.0, 1.0);
-
-        // Shaping amount of sharpening.
-        amplifyRgb = inversesqrt(amplifyRgb);
-
-        vec3 weightRgb = -(1.0 / (amplifyRgb * CAS_CONTRAST_PEAK));
-        vec3 reciprocalWeightRgb = 1.0 / (4.0 * weightRgb + 1.0);
-
-        //                0 w 0
-        // Filter shape:  w 1 w
-        //                0 w 0
-        vec3 window = (b + d) + (f + h);
-        vec3 outColor = clamp((window * weightRgb + e) * reciprocalWeightRgb, 0.0, 1.0);
-
-        outColor = mix(e, outColor, sharpenFactor / 2.0);
-
-        return outColor;
-    } else if (filterId == FILTER_UNSHARP_MASKING) {
-        vec3 gaussianBlur = (a + c + g + i) * 1.0 +
-                            (b + d + f + h) * 2.0 +
-                            e * 4.0;
+    // USM
+    if (filterId == FILTER_UNSHARP_MASKING) {
+        vec3 gaussianBlur = (a + c + g + i) * 1.0 + (b + d + f + h) * 2.0 + e * 4.0;
         gaussianBlur /= 16.0;
 
         // Return edge detection
         return e + (e - gaussianBlur) * sharpenFactor / 3.0;
     }
 
-    return e;
+    // CAS
+    // Soft min and max.
+    //  a b c             b
+    //  d e f * 0.5  +  d e f * 0.5
+    //  g h i             h
+    // These are 2.0x bigger (factored out the extra multiply).
+    vec3 minRgb = min(min(min(d, e), min(f, b)), h);
+    minRgb += min(min(a, c), min(g, i));
+
+    vec3 maxRgb = max(max(max(d, e), max(f, b)), h);
+    maxRgb += max(max(a, c), max(g, i));
+
+    // Smooth minimum distance to signal limit divided by smooth max.
+    vec3 reciprocalMaxRgb = 1.0 / maxRgb;
+    vec3 amplifyRgb = clamp(min(minRgb, 2.0 - maxRgb) * reciprocalMaxRgb, 0.0, 1.0);
+
+    // Shaping amount of sharpening.
+    amplifyRgb = inversesqrt(amplifyRgb);
+
+    vec3 weightRgb = -(1.0 / (amplifyRgb * CAS_CONTRAST_PEAK));
+    vec3 reciprocalWeightRgb = 1.0 / (4.0 * weightRgb + 1.0);
+
+    //                0 w 0
+    // Filter shape:  w 1 w
+    //                0 w 0
+    vec3 window = b + d + f + h;
+    vec3 outColor = clamp((window * weightRgb + e) * reciprocalWeightRgb, 0.0, 1.0);
+
+    return mix(e, outColor, sharpenFactor / 2.0);
 }
 
 void main() {
-    vec3 color;
     vec2 uv = gl_FragCoord.xy / iResolution.xy;
+    // Get current pixel
+    vec3 color = texture(data, uv).rgb;
 
-    if (sharpenFactor > 0.0) {
-        color = clarityBoost(data, uv);
-    } else {
-        color = texture2D(data, uv).rgb;
-    }
+    // Clarity boost
+    color = sharpenFactor > 0.0 ? clarityBoost(data, uv, color) : color;
 
     // Saturation
-    if (saturation != 1.0) {
-        vec3 grayscale = vec3(dot(color, LUMINOSITY_FACTOR));
-        color = mix(grayscale, color, saturation);
-    }
+    color = saturation != 1.0 ? mix(vec3(dot(color, LUMINOSITY_FACTOR)), color, saturation) : color;
 
     // Contrast
-    if (contrast != 1.0) {
-        color = 0.5 + contrast * (color - 0.5);
-    }
+    color = contrast * (color - 0.5) + 0.5;
 
     // Brightness
-    if (brightness != 1.0) {
-        color = brightness * color;
-    }
+    color = brightness * color;
 
-    gl_FragColor = vec4(color, 1.0);
+    fragColor = vec4(color, 1.0);
 }

src/modules/player/shaders/clarity_boost.vert

@@ -1,4 +1,6 @@
-attribute vec4 position;
+#version 300 es
+
+in vec4 position;
 
 void main() {
     gl_Position = position;

src/modules/player/webgl2-player.ts

@@ -5,9 +5,9 @@ import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 
-const LOG_TAG = 'WebGL2Player';
-
 export class WebGL2Player {
+    private readonly LOG_TAG = 'WebGL2Player';
+
     private $video: HTMLVideoElement;
     private $canvas: HTMLCanvasElement;
 
@@ -25,10 +25,14 @@ export class WebGL2Player {
         saturation: 0.0,
     };
 
+    private targetFps = 60;
+    private frameInterval = 0;
+    private lastFrameTime = 0;
+
     private animFrameId: number | null = null;
 
     constructor($video: HTMLVideoElement) {
-        BxLogger.info(LOG_TAG, 'Initialize');
+        BxLogger.info(this.LOG_TAG, 'Initialize');
         this.$video = $video;
 
         const $canvas = document.createElement('canvas');
@@ -67,6 +71,12 @@ export class WebGL2Player {
         update && this.updateCanvas();
     }
 
+    setTargetFps(target: number) {
+        this.targetFps = target;
+        this.lastFrameTime = 0;
+        this.frameInterval = target ? Math.floor(1000 / target) : 0;
+    }
+
     getCanvas() {
         return this.$canvas;
     }
@@ -84,11 +94,26 @@ export class WebGL2Player {
         gl.uniform1f(gl.getUniformLocation(program, 'saturation'), this.options.saturation);
     }
 
-    drawFrame() {
-        const gl = this.gl!;
-        const $video = this.$video;
+    drawFrame(force=false) {
+        if (!force) {
+            // Don't draw when FPS is 0
+            if (this.targetFps === 0) {
+                return;
+            }
 
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);
+            // Limit FPS
+            if (this.targetFps < 60) {
+                const currentTime = performance.now();
+                const timeSinceLastFrame = currentTime - this.lastFrameTime;
+                if (timeSinceLastFrame < this.frameInterval) {
+                    return;
+                }
+                this.lastFrameTime = currentTime;
+            }
+        }
+
+        const gl = this.gl!;
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.$video);
         gl.drawArrays(gl.TRIANGLES, 0, 6);
     }
 
@@ -98,23 +123,19 @@ export class WebGL2Player {
         if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
             const $video = this.$video;
             animate = () => {
-                if (this.stopped) {
-                    return;
+                if (!this.stopped) {
+                    this.drawFrame();
+                    this.animFrameId = $video.requestVideoFrameCallback(animate);
                 }
-
-                this.drawFrame();
-                this.animFrameId = $video.requestVideoFrameCallback(animate);
             }
 
             this.animFrameId = $video.requestVideoFrameCallback(animate);
         } else {
             animate = () => {
-                if (this.stopped) {
-                    return;
+                if (!this.stopped) {
+                    this.drawFrame();
+                    this.animFrameId = requestAnimationFrame(animate);
                 }
-
-                this.drawFrame();
-                this.animFrameId = requestAnimationFrame(animate);
             }
 
             this.animFrameId = requestAnimationFrame(animate);
@@ -122,9 +143,9 @@ export class WebGL2Player {
     }
 
     private setupShaders() {
-        BxLogger.info(LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
+        BxLogger.info(this.LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
 
-        const gl = this.$canvas.getContext('webgl', {
+        const gl = this.$canvas.getContext('webgl2', {
             isBx: true,
             antialias: true,
             alpha: false,
@@ -165,14 +186,7 @@ export class WebGL2Player {
         this.resources.push(buffer);
 
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-            -1, -1,
-            1, -1,
-            -1,  1,
-            -1,  1,
-            1, -1,
-            1,  1,
-        ]), gl.STATIC_DRAW);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1,  1, -1,  1, 1, -1, 1,  1]), gl.STATIC_DRAW);
 
         gl.enableVertexAttribArray(0);
         gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
@@ -198,14 +212,14 @@ export class WebGL2Player {
     resume() {
         this.stop();
         this.stopped = false;
-        BxLogger.info(LOG_TAG, 'Resume');
+        BxLogger.info(this.LOG_TAG, 'Resume');
 
         this.$canvas.classList.remove('bx-gone');
         this.setupRendering();
     }
 
     stop() {
-        BxLogger.info(LOG_TAG, 'Stop');
+        BxLogger.info(this.LOG_TAG, 'Stop');
         this.$canvas.classList.add('bx-gone');
 
         this.stopped = true;
@@ -221,16 +235,16 @@ export class WebGL2Player {
     }
 
     destroy() {
-        BxLogger.info(LOG_TAG, 'Destroy');
+        BxLogger.info(this.LOG_TAG, 'Destroy');
         this.stop();
 
         const gl = this.gl;
         if (gl) {
             gl.getExtension('WEBGL_lose_context')?.loseContext();
+            gl.useProgram(null);
 
             for (const resource of this.resources) {
                 if (resource instanceof WebGLProgram) {
-                    gl.useProgram(null);
                     gl.deleteProgram(resource);
                 } else if (resource instanceof WebGLShader) {
                     gl.deleteShader(resource);

src/modules/remote-play-manager.ts

@@ -9,8 +9,6 @@ import { PrefKey } from "@/enums/pref-keys";
 import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
 import { RemotePlayNavigationDialog } from "./ui/dialog/remote-play-dialog";
 
-const LOG_TAG = 'RemotePlay';
-
 export const enum RemotePlayConsoleState {
     ON = 'On',
     OFF = 'Off',
@@ -37,13 +35,8 @@ type RemotePlayConsole = {
 
 export class RemotePlayManager {
     private static instance: RemotePlayManager;
-    public static getInstance(): RemotePlayManager {
-        if (!this.instance) {
-            this.instance = new RemotePlayManager();
-        }
-
-        return this.instance;
-    }
+    public static getInstance = () => RemotePlayManager.instance ?? (RemotePlayManager.instance = new RemotePlayManager());
+    private readonly LOG_TAG = 'RemotePlayManager';
 
     private isInitialized = false;
 
@@ -53,6 +46,10 @@ export class RemotePlayManager {
     private consoles!: Array<RemotePlayConsole>;
     private regions: Array<RemotePlayRegion> = [];
 
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+    }
+
     initialize() {
         if (this.isInitialized) {
             return;
@@ -62,9 +59,9 @@ export class RemotePlayManager {
 
         this.getXhomeToken(() => {
             this.getConsolesList(() => {
-                BxLogger.info(LOG_TAG, 'Consoles', this.consoles);
+                BxLogger.info(this.LOG_TAG, 'Consoles', this.consoles);
 
-                STATES.supportedRegion && HeaderSection.showRemotePlayButton();
+                STATES.supportedRegion && HeaderSection.getInstance().showRemotePlayButton();
                 BxEvent.dispatch(window, BxEvent.REMOTE_PLAY_READY);
             });
         });

src/modules/shortcuts/shortcut-renderer.ts

@@ -0,0 +1,18 @@
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { limitVideoPlayerFps } from "../stream/stream-settings-utils";
+
+export class RendererShortcut {
+    static toggleVisibility(): boolean {
+        const $mediaContainer = document.querySelector('#game-stream div[data-testid="media-container"]');
+        if (!$mediaContainer) {
+            return true;
+        }
+
+        $mediaContainer.classList.toggle('bx-gone');
+        const isShowing = !$mediaContainer.classList.contains('bx-gone');
+        // Switch FPS
+        limitVideoPlayerFps(isShowing ? getPref(PrefKey.VIDEO_MAX_FPS) : 0);
+        return isShowing;
+    }
+}

src/modules/shortcuts/shortcut-sound.ts

@@ -77,13 +77,7 @@ export class SoundShortcut {
             return;
         }
 
-        let $media: HTMLMediaElement;
-
-        $media = document.querySelector('div[data-testid=media-container] audio') as HTMLAudioElement;
-        if (!$media) {
-            $media = document.querySelector('div[data-testid=media-container] video') as HTMLAudioElement;
-        }
-
+        const $media = document.querySelector<HTMLAudioElement>('div[data-testid=media-container] audio') ?? document.querySelector<HTMLAudioElement>('div[data-testid=media-container] video');
         if ($media) {
             $media.muted = !$media.muted;
 

src/modules/stream-player.ts

@@ -2,11 +2,12 @@ import { isFullVersion } from "@macros/build" with {type: "macro"};
 
 import { CE } from "@/utils/html";
 import { WebGL2Player } from "./player/webgl2-player";
-import { Screenshot } from "@/utils/screenshot";
+import { ScreenshotManager } from "@/utils/screenshot-manager";
 import { StreamPlayerType, StreamVideoProcessing } from "@enums/stream-player";
 import { STATES } from "@/utils/global";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { BX_FLAGS } from "@/utils/bx-flags";
 
 export type StreamPlayerOptions = Partial<{
     processing: string,
@@ -173,6 +174,8 @@ export class StreamPlayer {
 
     setPlayerType(type: StreamPlayerType, refreshPlayer: boolean = false) {
         if (this.playerType !== type) {
+            const videoClass = BX_FLAGS.DeviceInfo.deviceType === 'android-tv' ? 'bx-pixel' : 'bx-gone';
+
             // Switch from Video -> WebGL2
             if (type === StreamPlayerType.WEBGL2) {
                 // Initialize WebGL2 player
@@ -184,12 +187,12 @@ export class StreamPlayer {
 
                 this.$videoCss!.textContent = '';
 
-                this.$video.classList.add('bx-pixel');
+                this.$video.classList.add(videoClass);
             } else {
                 // Cleanup WebGL2 Player
                 this.webGL2Player?.stop();
 
-                this.$video.classList.remove('bx-pixel');
+                this.$video.classList.remove(videoClass);
             }
         }
 
@@ -234,7 +237,7 @@ export class StreamPlayer {
                 webGL2Player.setFilter(2);
             }
 
-            isFullVersion() && Screenshot.updateCanvasFilters('none');
+            isFullVersion() && ScreenshotManager.getInstance().updateCanvasFilters('none');
 
             webGL2Player.setSharpness(options.sharpness || 0);
             webGL2Player.setSaturation(options.saturation || 100);
@@ -249,7 +252,7 @@ export class StreamPlayer {
 
             // Apply video filters to screenshots
             if (isFullVersion() && getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
-                Screenshot.updateCanvasFilters(filters);
+                ScreenshotManager.getInstance().updateCanvasFilters(filters);
             }
 
             let css = '';

src/modules/stream/stream-badges.ts

@@ -19,7 +19,6 @@ type StreamBadgeInfo = {
 
 type StreamServerInfo = {
     server?: {
-        ipv6: boolean,
         region?: string,
     },
 
@@ -50,13 +49,8 @@ enum StreamBadge {
 
 export class StreamBadges {
     private static instance: StreamBadges;
-    public static getInstance(): StreamBadges {
-        if (!StreamBadges.instance) {
-            StreamBadges.instance = new StreamBadges();
-        }
-
-        return StreamBadges.instance;
-    }
+    public static getInstance = () => StreamBadges.instance ?? (StreamBadges.instance = new StreamBadges());
+    private readonly LOG_TAG = 'StreamBadges';
 
     private serverInfo: StreamServerInfo = {};
 
@@ -103,10 +97,13 @@ export class StreamBadges {
     private intervalId?: number | null;
     private readonly REFRESH_INTERVAL = 3 * 1000;
 
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+    }
+
     setRegion(region: string) {
         this.serverInfo.server = {
             region: region,
-            ipv6: false,
         };
     }
 
@@ -192,6 +189,11 @@ export class StreamBadges {
         this.intervalId = null;
     }
 
+    destroy() {
+        this.serverInfo = {};
+        delete this.$container;
+    }
+
     async render() {
         if (this.$container) {
             this.start();
@@ -211,15 +213,16 @@ export class StreamBadges {
             [StreamBadge.BATTERY, batteryLevel],
             [StreamBadge.DOWNLOAD, humanFileSize(0)],
             [StreamBadge.UPLOAD, humanFileSize(0)],
-            this.serverInfo.server ? this.badges.server.$element : [StreamBadge.SERVER, '?'],
+            this.badges.server.$element ?? [StreamBadge.SERVER, '?'],
             this.serverInfo.video ? this.badges.video.$element : [StreamBadge.VIDEO, '?'],
             this.serverInfo.audio ? this.badges.audio.$element : [StreamBadge.AUDIO, '?'],
         ];
 
         const $container = CE('div', {class: 'bx-badges'});
-        BADGES.forEach(item => {
+
+        for (const item of BADGES) {
             if (!item) {
-                return;
+                continue;
             }
 
             let $badge: HTMLElement;
@@ -230,7 +233,7 @@ export class StreamBadges {
             }
 
             $container.appendChild($badge);
-        });
+        };
 
         this.$container = $container;
         await this.start();
@@ -336,18 +339,16 @@ export class StreamBadges {
             BxLogger.info('candidate', candidateId, allCandidates);
 
             // Server + Region
+            let text = '';
+            const isIpv6 = allCandidates[candidateId].includes(':');
+
             const server = this.serverInfo.server;
-            if (server) {
-                server.ipv6 = allCandidates[candidateId].includes(':');
-
-                let text = '';
-                if (server.region) {
-                    text += server.region;
-                }
-
-                text += '@' + (server.ipv6 ? 'IPv6' : 'IPv4');
-                this.badges.server.$element = this.renderBadge(StreamBadge.SERVER, text);
+            if (server && server.region) {
+                text += server.region;
             }
+
+            text += '@' + (isIpv6 ? 'IPv6' : 'IPv4');
+            this.badges.server.$element = this.renderBadge(StreamBadge.SERVER, text);
         }
     }
 

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

@@ -7,9 +7,10 @@ import { getPref, setPref } from "@/utils/settings-storages/global-settings-stor
 
 export function onChangeVideoPlayerType() {
     const playerType = getPref(PrefKey.VIDEO_PLAYER_TYPE);
-    const $videoProcessing = document.getElementById('bx_setting_video_processing') as HTMLSelectElement;
-    const $videoSharpness = document.getElementById('bx_setting_video_sharpness') as HTMLElement;
-    const $videoPowerPreference = document.getElementById('bx_setting_video_power_preference') as HTMLElement;
+    const $videoProcessing = document.getElementById(`bx_setting_${PrefKey.VIDEO_PROCESSING}`) as HTMLSelectElement;
+    const $videoSharpness = document.getElementById(`bx_setting_${PrefKey.VIDEO_SHARPNESS}`) as HTMLElement;
+    const $videoPowerPreference = document.getElementById(`bx_setting_${PrefKey.VIDEO_POWER_PREFERENCE}`) as HTMLElement;
+    const $videoMaxFps = document.getElementById(`bx_setting_${PrefKey.VIDEO_MAX_FPS}`) as HTMLElement;
 
     if (!$videoProcessing) {
         return;
@@ -17,7 +18,7 @@ export function onChangeVideoPlayerType() {
 
     let isDisabled = false;
 
-    const $optCas = $videoProcessing.querySelector(`option[value=${StreamVideoProcessing.CAS}]`) as HTMLOptionElement;
+    const $optCas = $videoProcessing.querySelector<HTMLOptionElement>(`option[value=${StreamVideoProcessing.CAS}]`);
 
     if (playerType === StreamPlayerType.WEBGL2) {
         $optCas && ($optCas.disabled = false);
@@ -38,17 +39,26 @@ export function onChangeVideoPlayerType() {
 
     // Hide Power Preference setting if renderer isn't WebGL2
     $videoPowerPreference.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
+    $videoMaxFps.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
 
     updateVideoPlayer();
 }
 
 
+export function limitVideoPlayerFps(targetFps: number) {
+    const streamPlayer = STATES.currentStream.streamPlayer;
+    streamPlayer?.getWebGL2Player()?.setTargetFps(targetFps);
+}
+
+
 export function updateVideoPlayer() {
     const streamPlayer = STATES.currentStream.streamPlayer;
     if (!streamPlayer) {
         return;
     }
 
+    limitVideoPlayerFps(getPref(PrefKey.VIDEO_MAX_FPS));
+
     const options = {
         processing: getPref(PrefKey.VIDEO_PROCESSING),
         sharpness: getPref(PrefKey.VIDEO_SHARPNESS),
@@ -60,6 +70,7 @@ export function updateVideoPlayer() {
     streamPlayer.setPlayerType(getPref(PrefKey.VIDEO_PLAYER_TYPE));
     streamPlayer.updateOptions(options);
     streamPlayer.refreshPlayer();
+
 }
 
 window.addEventListener('resize', updateVideoPlayer);

src/modules/stream/stream-stats.ts

@@ -5,17 +5,13 @@ import { STATES } from "@utils/global"
 import { PrefKey } from "@/enums/pref-keys"
 import { getPref } from "@/utils/settings-storages/global-settings-storage"
 import { StreamStat, StreamStatsCollector, type StreamStatGrade } from "@/utils/stream-stats-collector"
+import { BxLogger } from "@/utils/bx-logger"
 
 
 export class StreamStats {
     private static instance: StreamStats;
-    public static getInstance(): StreamStats {
-        if (!StreamStats.instance) {
-            StreamStats.instance = new StreamStats();
-        }
-
-        return StreamStats.instance;
-    }
+    public static getInstance = () => StreamStats.instance ?? (StreamStats.instance = new StreamStats());
+    private readonly LOG_TAG = 'StreamStats';
 
     private intervalId?: number | null;
     private readonly REFRESH_INTERVAL = 1 * 1000;
@@ -75,7 +71,8 @@ export class StreamStats {
 
     quickGlanceObserver?: MutationObserver | null;
 
-    constructor() {
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
         this.render();
     }
 
@@ -113,7 +110,7 @@ export class StreamStats {
         }
     }
 
-    onStoppedPlaying() {
+    destroy() {
         this.stop();
         this.quickGlanceStop();
         this.hideSettingsUi();
@@ -162,7 +159,7 @@ export class StreamStats {
 
     private async update(forceUpdate=false) {
         if ((!forceUpdate && this.isHidden()) || !STATES.currentStream.peerConnection) {
-            this.onStoppedPlaying();
+            this.destroy();
             return;
         }
 

src/modules/stream/stream-ui.ts

@@ -39,7 +39,7 @@ export class StreamUiHandler {
                     return;
                 }
 
-                const $streamHud = (e.target as HTMLElement).closest('#StreamHud') as HTMLElement;
+                const $streamHud = (e.target as HTMLElement).closest<HTMLElement>('#StreamHud');
                 if (!$streamHud) {
                     return;
                 }
@@ -58,13 +58,13 @@ export class StreamUiHandler {
             $container.addEventListener('transitionend', onTransitionEnd);
         }
 
-        const $button = $container.querySelector('button') as HTMLElement;
+        const $button = $container.querySelector<HTMLButtonElement>('button');
         if (!$button) {
             return null;
         }
         $button.setAttribute('title', label);
 
-        const $orgSvg = $button.querySelector('svg') as SVGElement;
+        const $orgSvg = $button.querySelector<SVGElement>('svg');
         if (!$orgSvg) {
             return null;
         }
@@ -102,7 +102,7 @@ export class StreamUiHandler {
     }
 
     private static async handleStreamMenu() {
-        const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
+        const $btnCloseHud = document.querySelector<HTMLElement>('button[class*=StreamMenu-module__backButton]');
         if (!$btnCloseHud) {
             return;
         }
@@ -136,14 +136,14 @@ export class StreamUiHandler {
 
     private static handleSystemMenu($streamHud: HTMLElement) {
         // Get the last button
-        const $orgButton = $streamHud.querySelector('div[class^=HUDButton]') as HTMLElement;
+        const $orgButton = $streamHud.querySelector<HTMLElement>('div[class^=HUDButton]');
         if (!$orgButton) {
             return;
         }
 
         const hideGripHandle = () => {
             // Grip handle
-            const $gripHandle = document.querySelector('#StreamHud button[class^=GripHandle]') as HTMLElement;
+            const $gripHandle = document.querySelector<HTMLElement>('#StreamHud button[class^=GripHandle]');
             if ($gripHandle && $gripHandle.ariaExpanded === 'true') {
                 $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
                 $gripHandle.click();
@@ -221,9 +221,10 @@ export class StreamUiHandler {
         }
 
         const observer = new MutationObserver(mutationList => {
-            mutationList.forEach(item => {
+            let item: MutationRecord;
+            for (item of mutationList) {
                 if (item.type !== 'childList') {
-                    return;
+                    continue;
                 }
 
                 item.addedNodes.forEach(async $node => {
@@ -263,7 +264,7 @@ export class StreamUiHandler {
                     // Handle System Menu bar
                     StreamUiHandler.handleSystemMenu($elm);
                 });
-            });
+            };
         });
 
         observer.observe($screen, {subtree: true, childList: true});

src/modules/touch-controller.ts

@@ -85,16 +85,24 @@ export class TouchController {
         document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.remove('bx-offscreen');
     }
 
+    /*
     static #hide() {
         document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.add('bx-offscreen');
     }
+    */
 
-    static toggleVisibility(status: boolean) {
+    static toggleVisibility(): boolean {
         if (!TouchController.#dataChannel) {
-            return;
+            return false;
         }
 
-        status ? TouchController.#hide() : TouchController.#show();
+        const $container = document.querySelector('#BabylonCanvasContainer-main')?.parentElement;
+        if (!$container) {
+            return false;
+        }
+
+        $container.classList.toggle('bx-offscreen');
+        return !$container.classList.contains('bx-offscreen');
     }
 
     static reset() {

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

@@ -2,6 +2,7 @@ import { GamepadKey } from "@/enums/mkb";
 import { PrefKey } from "@/enums/pref-keys";
 import { VIRTUAL_GAMEPAD_ID } from "@/modules/mkb/mkb-handler";
 import { BxEvent } from "@/utils/bx-event";
+import { BxLogger } from "@/utils/bx-logger";
 import { STATES } from "@/utils/global";
 import { CE, isElementVisible } from "@/utils/html";
 import { setNearby } from "@/utils/navigation-utils";
@@ -88,12 +89,8 @@ export abstract class NavigationDialog {
 
 export class NavigationDialogManager {
     private static instance: NavigationDialogManager;
-    public static getInstance(): NavigationDialogManager {
-        if (!NavigationDialogManager.instance) {
-            NavigationDialogManager.instance = new NavigationDialogManager();
-        }
-        return NavigationDialogManager.instance;
-    }
+    public static getInstance = () => NavigationDialogManager.instance ?? (NavigationDialogManager.instance = new NavigationDialogManager());
+    private readonly LOG_TAG = 'NavigationDialogManager';
 
     private static readonly GAMEPAD_POLLING_INTERVAL = 50;
     private static readonly GAMEPAD_KEYS = [
@@ -141,7 +138,9 @@ export class NavigationDialogManager {
     private $container: HTMLElement;
     private dialog: NavigationDialog | null = null;
 
-    constructor() {
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+
         this.$overlay = CE('div', {class: 'bx-navigation-dialog-overlay bx-gone'});
         this.$overlay.addEventListener('click', e => {
             e.preventDefault();
@@ -178,8 +177,9 @@ export class NavigationDialogManager {
     }
 
     calculateSelectBoxes($root: HTMLElement) {
-        const $selects = $root.querySelectorAll('.bx-select:not([data-calculated]) select');
-        $selects.forEach($select => {
+        const selects = Array.from($root.querySelectorAll('.bx-select:not([data-calculated]) select'));
+
+        for (const $select of selects) {
             const $parent = $select.parentElement! as HTMLElement;
 
             // Don't apply to select.bx-full-width elements
@@ -190,23 +190,23 @@ export class NavigationDialogManager {
 
             const rect = $select.getBoundingClientRect();
 
-            let $label;
+            let $label: HTMLElement;
             let width = Math.ceil(rect.width);
             if (!width) {
                 return;
             }
 
             if (($select as HTMLSelectElement).multiple) {
-                $label = $parent.querySelector('.bx-select-value') as HTMLElement;
+                $label = $parent.querySelector<HTMLElement>('.bx-select-value')!;
                 width += 20;  // Add checkbox's width
             } else {
-                $label = $parent.querySelector('div') as HTMLElement;
+                $label = $parent.querySelector<HTMLElement>('div')!;
             }
 
             // Set min-width
             $label.style.minWidth = width + 'px';
             $parent.dataset.calculated = 'true';
-        });
+        };
     }
 
     handleEvent(event: Event) {

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

@@ -7,16 +7,13 @@ import { t } from "@/utils/translation";
 import { RemotePlayConsoleState, RemotePlayManager } from "@/modules/remote-play-manager";
 import { BxSelectElement } from "@/web-components/bx-select";
 import { BxEvent } from "@/utils/bx-event";
+import { BxLogger } from "@/utils/bx-logger";
 
 
 export class RemotePlayNavigationDialog extends NavigationDialog {
     private static instance: RemotePlayNavigationDialog;
-    public static getInstance(): RemotePlayNavigationDialog {
-        if (!RemotePlayNavigationDialog.instance) {
-            RemotePlayNavigationDialog.instance = new RemotePlayNavigationDialog();
-        }
-        return RemotePlayNavigationDialog.instance;
-    }
+    public static getInstance = () => RemotePlayNavigationDialog.instance ?? (RemotePlayNavigationDialog.instance = new RemotePlayNavigationDialog());
+    private readonly LOG_TAG = 'RemotePlayNavigationDialog';
 
     private readonly STATE_LABELS: Record<RemotePlayConsoleState, string> = {
         [RemotePlayConsoleState.ON]: t('powered-on'),
@@ -27,8 +24,9 @@ export class RemotePlayNavigationDialog extends NavigationDialog {
 
     $container!: HTMLElement;
 
-    constructor() {
+    private constructor() {
         super();
+        BxLogger.info(this.LOG_TAG, 'constructor()');
         this.setupDialog();
     }
 
@@ -129,7 +127,7 @@ export class RemotePlayNavigationDialog extends NavigationDialog {
     }
 
     focusIfNeeded(): void {
-        const $btnConnect = this.$container.querySelector('.bx-remote-play-device-wrapper button') as HTMLElement;
+        const $btnConnect = this.$container.querySelector<HTMLElement>('.bx-remote-play-device-wrapper button');
         $btnConnect && $btnConnect.focus();
     }
 }

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

@@ -1,6 +1,6 @@
 import { isFullVersion } from "@macros/build" with {type: "macro"};
 
-import { onChangeVideoPlayerType, updateVideoPlayer } from "@/modules/stream/stream-settings-utils";
+import { limitVideoPlayerFps, onChangeVideoPlayerType, updateVideoPlayer } from "@/modules/stream/stream-settings-utils";
 import { ButtonStyle, CE, createButton, createSvgIcon, removeChildElements, type BxButton } from "@/utils/html";
 import { NavigationDialog, NavigationDirection } from "./navigation-dialog";
 import { ControllerShortcut } from "@/modules/controller-shortcut";
@@ -27,12 +27,14 @@ import { ControllerDeviceVibration, getPref, getPrefDefinition, setPref, StreamT
 import { SettingElement, type BxHtmlSettingElement } from "@/utils/setting-element";
 import type { RecommendedSettings, SettingDefinition, SuggestedSettingCategory as SuggestedSettingProfile } from "@/types/setting-definition";
 import { FullscreenText } from "../fullscreen-text";
+import { BxLogger } from "@/utils/bx-logger";
+import { updatePollingRate } from "@/utils/gamepad";
 
 
 type SettingTabContentItem = Partial<{
     pref: PrefKey;
     label: string;
-    note: string;
+    note: string | (() => HTMLElement);
     experimental: string;
     content: HTMLElement | (() => HTMLElement);
     options: {[key: string]: string};
@@ -51,29 +53,29 @@ type SettingTabContent = {
     unsupportedNote?: string | Text | null;
     helpUrl?: string;
     content?: any;
+    lazyContent?: boolean | (() => HTMLElement);
     items?: Array<SettingTabContentItem | PrefKey | (($parent: HTMLElement) => void) | false>;
     requiredVariants?: BuildVariant | Array<BuildVariant>;
 };
 
 type SettingTab = {
     icon: SVGElement;
-    group: 'global';
-    items: Array<SettingTabContent | false>;
+    group: SettingTabGroup,
+    items: Array<SettingTabContent | false> | (() => Array<SettingTabContent | false>);
     requiredVariants?: BuildVariant | Array<BuildVariant>;
+    lazyContent?: boolean;
 };
 
+type SettingTabGroup = 'global' | 'stream' | 'controller' | 'mkb' | 'native-mkb' | 'shortcuts' | 'stats';
+
 export class SettingsNavigationDialog extends NavigationDialog {
     private static instance: SettingsNavigationDialog;
-    public static getInstance(): SettingsNavigationDialog {
-        if (!SettingsNavigationDialog.instance) {
-            SettingsNavigationDialog.instance = new SettingsNavigationDialog();
-        }
-        return SettingsNavigationDialog.instance;
-    }
+    public static getInstance = () => SettingsNavigationDialog.instance ?? (SettingsNavigationDialog.instance = new SettingsNavigationDialog());
+    private readonly LOG_TAG = 'SettingsNavigationDialog';
 
     $container!: HTMLElement;
     private $tabs!: HTMLElement;
-    private $settings!: HTMLElement;
+    private $tabContents!: HTMLElement;
 
     private $btnReload!: HTMLElement;
     private $btnGlobalReload!: HTMLButtonElement;
@@ -251,7 +253,6 @@ export class SettingsNavigationDialog extends NavigationDialog {
         items: [
             PrefKey.UI_LAYOUT,
             PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME,
-            PrefKey.UI_HOME_CONTEXT_MENU_DISABLED,
             PrefKey.CONTROLLER_SHOW_CONNECTION_STATUS,
             PrefKey.STREAM_SIMPLIFY_MENU,
             PrefKey.SKIP_SPLASH_VIDEO,
@@ -332,8 +333,8 @@ export class SettingsNavigationDialog extends NavigationDialog {
             // xCloud version
             ($parent) => {
                 try {
-                    const appVersion = (document.querySelector('meta[name=gamepass-app-version]') as HTMLMetaElement).content;
-                    const appDate = new Date((document.querySelector('meta[name=gamepass-app-date]') as HTMLMetaElement).content).toISOString().substring(0, 10);
+                    const appVersion = document.querySelector<HTMLMetaElement>('meta[name=gamepass-app-version]')!.content;
+                    const appDate = new Date(document.querySelector<HTMLMetaElement>('meta[name=gamepass-app-date]')!.content).toISOString().substring(0, 10);
                     $parent.appendChild(CE('div', {
                         class: 'bx-settings-app-version',
                     }, `xCloud website version ${appVersion} (${appDate})`));
@@ -386,7 +387,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
                 disabled: !getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL),
             },
             onCreated: (setting: SettingTabContentItem, $elm: HTMLElement) => {
-                const $range = $elm.querySelector('input[type=range') as HTMLInputElement;
+                const $range = $elm.querySelector<HTMLInputElement>('input[type=range')!;
                 window.addEventListener(BxEvent.SETTINGS_CHANGED, e => {
                     const { storageKey, settingKey, settingValue } = e as any;
                     if (storageKey !== StorageKey.GLOBAL || settingKey !== PrefKey.AUDIO_VOLUME) {
@@ -407,6 +408,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
         items: [{
             pref: PrefKey.VIDEO_PLAYER_TYPE,
             onChange: onChangeVideoPlayerType,
+        }, {
+            pref: PrefKey.VIDEO_MAX_FPS,
+            onChange: e => {
+                limitVideoPlayerFps(parseInt(e.target.value));
+            },
         }, {
             pref: PrefKey.VIDEO_POWER_PREFERENCE,
             onChange: () => {
@@ -455,6 +461,9 @@ export class SettingsNavigationDialog extends NavigationDialog {
             pref: PrefKey.CONTROLLER_VIBRATION_INTENSITY,
             unsupported: !VibrationManager.supportDeviceVibration(),
             onChange: () => VibrationManager.updateGlobalVars(),
+        }, isFullVersion() && {
+            pref: PrefKey.CONTROLLER_POLLING_RATE,
+            onChange: () => updatePollingRate(),
         }],
     },
 
@@ -512,11 +521,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }],
     }];
 
-    private readonly TAB_VIRTUAL_CONTROLLER_ITEMS: Array<SettingTabContent | false> = [{
+    private readonly TAB_VIRTUAL_CONTROLLER_ITEMS: (() => Array<SettingTabContent | false>) = () => [{
         group: 'mkb',
         label: t('virtual-controller'),
         helpUrl: 'https://better-xcloud.github.io/mouse-and-keyboard/',
-        content: isFullVersion() && MkbRemapper.INSTANCE.render(),
+        content: MkbRemapper.getInstance().render(),
     }];
 
     private readonly TAB_NATIVE_MKB_ITEMS: Array<SettingTabContent | false> = [{
@@ -536,7 +545,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }] : [],
     }];
 
-    private readonly TAB_SHORTCUTS_ITEMS: Array<SettingTabContent | false> = [{
+    private readonly TAB_SHORTCUTS_ITEMS: (() => Array<SettingTabContent | false>) = () => [{
         requiredVariants: 'full',
         group: 'controller-shortcuts',
         label: t('controller-shortcuts'),
@@ -577,56 +586,59 @@ export class SettingsNavigationDialog extends NavigationDialog {
         ],
     }];
 
-    private readonly SETTINGS_UI: Array<SettingTab> = [
-        {
-            icon: BxIcon.HOME,
+    private readonly SETTINGS_UI: Record<SettingTabGroup, SettingTab> = {
+        global: {
             group: 'global',
+            icon: BxIcon.HOME,
             items: this.TAB_GLOBAL_ITEMS,
         },
 
-        {
-            icon: BxIcon.DISPLAY,
+        stream: {
             group: 'stream',
+            icon: BxIcon.DISPLAY,
             items: this.TAB_DISPLAY_ITEMS,
         },
 
-        {
-            icon: BxIcon.CONTROLLER,
+        controller: {
             group: 'controller',
+            icon: BxIcon.CONTROLLER,
             items: this.TAB_CONTROLLER_ITEMS,
             requiredVariants: 'full',
         },
 
-        isFullVersion() && getPref(PrefKey.MKB_ENABLED) && {
-            icon: BxIcon.VIRTUAL_CONTROLLER,
+        mkb: isFullVersion() && getPref(PrefKey.MKB_ENABLED) && {
             group: 'mkb',
+            icon: BxIcon.VIRTUAL_CONTROLLER,
             items: this.TAB_VIRTUAL_CONTROLLER_ITEMS,
+            lazyContent: true,
             requiredVariants: 'full',
         },
 
-        isFullVersion() && AppInterface && getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' && {
-            icon: BxIcon.NATIVE_MKB,
+        'native-mkb': isFullVersion() && AppInterface && getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' && {
             group: 'native-mkb',
+            icon: BxIcon.NATIVE_MKB,
             items: this.TAB_NATIVE_MKB_ITEMS,
             requiredVariants: 'full',
         },
 
-        {
-            icon: BxIcon.COMMAND,
+        shortcuts: {
             group: 'shortcuts',
+            icon: BxIcon.COMMAND,
             items: this.TAB_SHORTCUTS_ITEMS,
+            lazyContent: true,
             requiredVariants: 'full',
         },
 
-        {
-            icon: BxIcon.STREAM_STATS,
+        stats: {
             group: 'stats',
+            icon: BxIcon.STREAM_STATS,
             items: this.TAB_STATS_ITEMS,
         },
-    ];
+    };
 
-    constructor() {
+    private constructor() {
         super();
+        BxLogger.info(this.LOG_TAG, 'constructor()');
 
         this.renderFullSettings = STATES.supportedRegion && STATES.isSignedIn;
         this.setupDialog();
@@ -654,7 +666,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }
 
         // Trigger event
-        const $selectUserAgent = document.querySelector(`#bx_setting_${PrefKey.USER_AGENT_PROFILE}`) as HTMLSelectElement;
+        const $selectUserAgent = document.querySelector<HTMLSelectElement>(`#bx_setting_${PrefKey.USER_AGENT_PROFILE}`);
         if ($selectUserAgent) {
             $selectUserAgent.disabled = true;
             BxEvent.dispatch($selectUserAgent, 'input', {});
@@ -758,8 +770,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }
 
         // Get labels
-        for (const settingTab of this.SETTINGS_UI) {
-            if (!settingTab || !settingTab.items) {
+        let settingTabGroup: keyof typeof this.SETTINGS_UI;
+        for (settingTabGroup in this.SETTINGS_UI) {
+            const settingTab = this.SETTINGS_UI[settingTabGroup];
+
+            if (!settingTab || !settingTab.items || typeof settingTab.items === 'function') {
                 continue;
             }
 
@@ -902,7 +917,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
             let prefKey: PrefKey;
             for (prefKey in settings) {
                 const suggestedValue = settings[prefKey];
-                const $checkBox = $content.querySelector(`#bx_suggest_${prefKey}`) as HTMLInputElement;
+                const $checkBox = $content.querySelector<HTMLInputElement>(`#bx_suggest_${prefKey}`)!;
                 if (!$checkBox.checked || $checkBox.disabled) {
                     continue;
                 }
@@ -962,36 +977,57 @@ export class SettingsNavigationDialog extends NavigationDialog {
             }, t('suggest-settings-link')),
         );
 
-        $btnSuggest?.insertAdjacentElement('afterend', $content);
+        $btnSuggest.insertAdjacentElement('afterend', $content);
+    }
+
+    private onTabClicked(e: Event) {
+        const $svg = (e.target as SVGElement).closest('svg')!;
+
+        // Render tab content lazily
+        if (!!$svg.dataset.lazy) {
+            // Remove attribute
+            delete $svg.dataset.lazy;
+            // Render data
+            const settingTab = this.SETTINGS_UI[$svg.dataset.group as SettingTabGroup];
+
+            const items = (settingTab.items as Function)();
+            const $tabContent = this.renderTabContent.call(this, settingTab, items);
+            this.$tabContents.appendChild($tabContent);
+        }
+
+        // Switch tab
+        let $child: HTMLElement;
+        const children = Array.from(this.$tabContents.children) as HTMLElement[];
+        for ($child of children) {
+            if ($child.dataset.tabGroup === $svg.dataset.group) {
+                // Show tab content
+                $child.classList.remove('bx-gone');
+
+                // Calculate size of controller-friendly select boxes
+                if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                    this.dialogManager.calculateSelectBoxes($child as HTMLElement);
+                }
+            } else {
+                // Hide tab content
+                $child.classList.add('bx-gone');
+            }
+        }
+
+        // Highlight current tab button
+        for (const $child of Array.from(this.$tabs.children)) {
+            $child.classList.remove('bx-active');
+        }
+
+        $svg.classList.add('bx-active');
     }
 
     private renderTab(settingTab: SettingTab) {
         const $svg = createSvgIcon(settingTab.icon as any);
         $svg.dataset.group = settingTab.group;
         $svg.tabIndex = 0;
+        settingTab.lazyContent && ($svg.dataset.lazy = settingTab.lazyContent.toString());
 
-        $svg.addEventListener('click', e => {
-            // Switch tab
-            for (const $child of Array.from(this.$settings.children)) {
-                if ($child.getAttribute('data-tab-group') === settingTab.group) {
-                    $child.classList.remove('bx-gone');
-
-                    // Calculate size of controller-friendly select boxes
-                    if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
-                        this.dialogManager.calculateSelectBoxes($child as HTMLElement);
-                    }
-                } else {
-                    $child.classList.add('bx-gone');
-                }
-            }
-
-            // Highlight current tab button
-            for (const $child of Array.from(this.$tabs.children)) {
-                $child.classList.remove('bx-active');
-            }
-
-            $svg.classList.add('bx-active');
-        });
+        $svg.addEventListener('click', this.onTabClicked.bind(this));
 
         return $svg;
     }
@@ -1138,10 +1174,19 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }
 
         let label = prefDefinition?.label || setting.label;
-        let note = prefDefinition?.note || setting.note;
-        let unsupportedNote = prefDefinition?.unsupportedNote || setting.unsupportedNote;
+        let note: string | undefined | (() => HTMLElement) | HTMLElement = prefDefinition?.note || setting.note;
+        let unsupportedNote: string | undefined | (() => HTMLElement) | HTMLElement = prefDefinition?.unsupportedNote || setting.unsupportedNote;
         const experimental = prefDefinition?.experimental || setting.experimental;
 
+        // Render note lazily
+        if (typeof note === 'function') {
+            note = note();
+        }
+
+        if (typeof unsupportedNote === 'function') {
+            unsupportedNote = unsupportedNote();
+        }
+
         if (settingTabContent.label && setting.pref) {
             if (prefDefinition?.suggest) {
                 typeof prefDefinition.suggest.lowest !== 'undefined' && (this.suggestedSettings.lowest[setting.pref] = prefDefinition.suggest.lowest);
@@ -1196,9 +1241,101 @@ export class SettingsNavigationDialog extends NavigationDialog {
         !prefDefinition?.unsupported && setting.onCreated && setting.onCreated(setting, $control);
     }
 
+    private renderTabContent(settingTab: SettingTab, items: Array<SettingTabContent | false>): HTMLElement {
+        const $tabContent = CE('div', {
+            class: 'bx-gone',
+            'data-tab-group': settingTab.group,
+        });
+
+        for (const settingTabContent of items) {
+            if (!settingTabContent) {
+                continue;
+            }
+
+            if (!this.isSupportedVariant(settingTabContent.requiredVariants)) {
+                continue;
+            }
+
+            // Don't render other settings in unsupported regions
+            if (!this.renderFullSettings && settingTab.group === 'global' && settingTabContent.group !== 'general' && settingTabContent.group !== 'footer') {
+                continue;
+            }
+
+            let label = settingTabContent.label;
+
+            // If label is "Better xCloud" => create a link to Releases page
+            if (label === t('better-xcloud')) {
+                label += ' ' + SCRIPT_VERSION;
+
+                if (SCRIPT_VARIANT === 'lite') {
+                    label += ' (Lite)';
+                }
+
+                label = createButton({
+                    label: label,
+                    url: 'https://github.com/redphx/better-xcloud/releases',
+                    style: ButtonStyle.NORMAL_CASE | ButtonStyle.FROSTED | ButtonStyle.FOCUSABLE,
+                });
+            }
+
+            if (label) {
+                const $title = CE('h2', {
+                    _nearby: {
+                        orientation: 'horizontal',
+                    }
+                },
+                    CE('span', {}, label),
+                    settingTabContent.helpUrl && createButton({
+                            icon: BxIcon.QUESTION,
+                            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
+                            url: settingTabContent.helpUrl,
+                            title: t('help'),
+                        }),
+                );
+
+                $tabContent.appendChild($title);
+            }
+
+            // Add note
+            if (settingTabContent.unsupportedNote) {
+                const $note = CE('b', {class: 'bx-note-unsupported'}, settingTabContent.unsupportedNote);
+
+                $tabContent.appendChild($note);
+            }
+
+            // Don't render settings if this is an unsupported feature
+            if (settingTabContent.unsupported) {
+                continue;
+            }
+
+            // Add content DOM
+            if (settingTabContent.content) {
+                $tabContent.appendChild(settingTabContent.content);
+                continue;
+            }
+
+            // Render list of settings
+            settingTabContent.items = settingTabContent.items || [];
+            for (const setting of settingTabContent.items) {
+                if (setting === false) {
+                    continue;
+                }
+
+                if (typeof setting === 'function') {
+                    setting.apply(this, [$tabContent]);
+                    continue;
+                }
+
+                this.renderSettingRow(settingTab, $tabContent, settingTabContent, setting);
+            }
+        }
+
+        return $tabContent;
+    }
+
     private setupDialog() {
         let $tabs: HTMLElement;
-        let $settings: HTMLElement;
+        let $tabContents: HTMLElement;
 
         const $container = CE('div', {
             class: 'bx-settings-dialog',
@@ -1246,7 +1383,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
                 ),
             ),
 
-            $settings = CE('div', {
+            $tabContents = CE('div', {
                 class: 'bx-settings-tab-contents',
                 _nearby: {
                     orientation: 'vertical',
@@ -1265,7 +1402,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
 
         this.$container = $container;
         this.$tabs = $tabs;
-        this.$settings = $settings;
+        this.$tabContents = $tabContents;
 
         // Close dialog when not clicking on any child elements in the dialog
         $container.addEventListener('click', e => {
@@ -1276,7 +1413,10 @@ export class SettingsNavigationDialog extends NavigationDialog {
             }
         });
 
-        for (const settingTab of this.SETTINGS_UI) {
+        let settingTabGroup: keyof typeof this.SETTINGS_UI
+        for (settingTabGroup in this.SETTINGS_UI) {
+            const settingTab = this.SETTINGS_UI[settingTabGroup];
+
             if (!settingTab) {
                 continue;
             }
@@ -1294,95 +1434,13 @@ export class SettingsNavigationDialog extends NavigationDialog {
             const $svg = this.renderTab(settingTab);
             $tabs.appendChild($svg);
 
-            const $tabContent = CE('div', {
-                class: 'bx-gone',
-                'data-tab-group': settingTab.group,
-            });
-
-            for (const settingTabContent of settingTab.items) {
-                if (settingTabContent === false) {
-                    continue;
-                }
-
-                if (!this.isSupportedVariant(settingTabContent.requiredVariants)) {
-                    continue;
-                }
-
-                // Don't render other settings in unsupported regions
-                if (!this.renderFullSettings && settingTab.group === 'global' && settingTabContent.group !== 'general' && settingTabContent.group !== 'footer') {
-                    continue;
-                }
-
-                let label = settingTabContent.label;
-
-                // If label is "Better xCloud" => create a link to Releases page
-                if (label === t('better-xcloud')) {
-                    label += ' ' + SCRIPT_VERSION;
-
-                    if (SCRIPT_VARIANT === 'lite') {
-                        label += ' (Lite)';
-                    }
-
-                    label = createButton({
-                        label: label,
-                        url: 'https://github.com/redphx/better-xcloud/releases',
-                        style: ButtonStyle.NORMAL_CASE | ButtonStyle.FROSTED | ButtonStyle.FOCUSABLE,
-                    });
-                }
-
-                if (label) {
-                    const $title = CE('h2', {
-                        _nearby: {
-                            orientation: 'horizontal',
-                        }
-                    },
-                        CE('span', {}, label),
-                        settingTabContent.helpUrl && createButton({
-                                icon: BxIcon.QUESTION,
-                                style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
-                                url: settingTabContent.helpUrl,
-                                title: t('help'),
-                            }),
-                    );
-
-                    $tabContent.appendChild($title);
-                }
-
-                // Add note
-                if (settingTabContent.unsupportedNote) {
-                    const $note = CE('b', {class: 'bx-note-unsupported'}, settingTabContent.unsupportedNote);
-
-                    $tabContent.appendChild($note);
-                }
-
-                // Don't render settings if this is an unsupported feature
-                if (settingTabContent.unsupported) {
-                    continue;
-                }
-
-                // Add content DOM
-                if (settingTabContent.content) {
-                    $tabContent.appendChild(settingTabContent.content);
-                    continue;
-                }
-
-                // Render list of settings
-                settingTabContent.items = settingTabContent.items || [];
-                for (const setting of settingTabContent.items) {
-                    if (setting === false) {
-                        continue;
-                    }
-
-                    if (typeof setting === 'function') {
-                        setting.apply(this, [$tabContent]);
-                        continue;
-                    }
-
-                    this.renderSettingRow(settingTab, $tabContent, settingTabContent, setting);
-                }
+            // Don't render lazy tab content
+            if (typeof settingTab.items === 'function') {
+                continue;
             }
 
-            $settings.appendChild($tabContent);
+            const $tabContent = this.renderTabContent.call(this, settingTab, settingTab.items);
+            $tabContents.appendChild($tabContent);
         }
 
         // Select first tab
@@ -1399,13 +1457,13 @@ export class SettingsNavigationDialog extends NavigationDialog {
     }
 
     private focusActiveTab() {
-        const $currentTab = this.$tabs!.querySelector('.bx-active') as HTMLElement;
+        const $currentTab = this.$tabs!.querySelector<HTMLElement>('.bx-active');
         $currentTab && $currentTab.focus();
         return true;
     }
 
     private focusVisibleSetting(type: 'first' | 'last' = 'first'): boolean {
-        const controls = Array.from(this.$settings.querySelectorAll('div[data-tab-group]:not(.bx-gone) > *'));
+        const controls = Array.from(this.$tabContents.querySelectorAll('div[data-tab-group]:not(.bx-gone) > *'));
         if (!controls.length) {
             return false;
         }
@@ -1451,7 +1509,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
     }
 
     private jumpToSettingGroup(direction: 'next' | 'previous'): boolean {
-        const $tabContent = this.$settings.querySelector('div[data-tab-group]:not(.bx-gone)');
+        const $tabContent = this.$tabContents.querySelector('div[data-tab-group]:not(.bx-gone)');
         if (!$tabContent) {
             return false;
         }
@@ -1462,7 +1520,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
             $header = $tabContent.querySelector('h2');
         } else {
             // Find the parent element
-            const $parent = $focusing.closest('[data-tab-group] > *') as HTMLElement;
+            const $parent = $focusing.closest<HTMLElement>('[data-tab-group] > *');
             const siblingProperty = direction === 'next' ? 'nextSibling' : 'previousSibling';
 
             let $tmp = $parent;

src/modules/ui/fullscreen-text.ts

@@ -1,17 +1,15 @@
+import { BxLogger } from "@/utils/bx-logger";
 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;
-    }
+    public static getInstance = () => FullscreenText.instance ?? (FullscreenText.instance = new FullscreenText());
+    private readonly LOG_TAG = 'FullscreenText';
 
     $text: HTMLElement;
 
-    constructor() {
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
         this.$text = CE('div', {
             class: 'bx-fullscreen-text bx-gone',
         });

src/modules/ui/guide-menu.ts

@@ -13,101 +13,104 @@ export enum GuideMenuTab {
 }
 
 export class GuideMenu {
-    static #BUTTONS = {
-        scriptSettings: createButton({
-            label: t('better-xcloud'),
-            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
-            onClick: e => {
-                // Wait until the Guide dialog is closed
-                window.addEventListener(BxEvent.XCLOUD_DIALOG_DISMISSED, e => {
-                    setTimeout(() => SettingsNavigationDialog.getInstance().show(), 50);
-                }, {once: true});
+    private static instance: GuideMenu;
+    public static getInstance = () => GuideMenu.instance ?? (GuideMenu.instance = new GuideMenu());
 
-                // Close all xCloud's dialogs
-                GuideMenu.#closeGuideMenu();
-            },
-        }),
+    private $renderedButtons?: HTMLElement;
 
-        closeApp: AppInterface && createButton({
-            icon: BxIcon.POWER,
-            label: t('close-app'),
-            title: t('close-app'),
-            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.DANGER,
-            onClick: e => {
-                AppInterface.closeApp();
-            },
-
-            attributes: {
-                'data-state': 'normal',
-            },
-        }),
-
-        reloadPage: createButton({
-            icon: BxIcon.REFRESH,
-            label: t('reload-page'),
-            title: t('reload-page'),
-            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
-            onClick: e => {
-                if (STATES.isPlaying) {
-                    confirm(t('confirm-reload-stream')) && window.location.reload();
-                } else {
-                    window.location.reload();
-                }
-
-                // Close all xCloud's dialogs
-                GuideMenu.#closeGuideMenu();
-            },
-        }),
-
-        backToHome: createButton({
-            icon: BxIcon.HOME,
-            label: t('back-to-home'),
-            title: t('back-to-home'),
-            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
-            onClick: e => {
-                confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
-
-                // Close all xCloud's dialogs
-                GuideMenu.#closeGuideMenu();
-            },
-            attributes: {
-                'data-state': 'playing',
-            },
-        }),
-    }
-
-    static #$renderedButtons: HTMLElement;
-
-    static #closeGuideMenu() {
+    closeGuideMenu() {
         if (window.BX_EXPOSED.dialogRoutes) {
             window.BX_EXPOSED.dialogRoutes.closeAll();
             return;
         }
 
         // Use alternative method for Lite version
-        const $btnClose = document.querySelector('#gamepass-dialog-root button[class^=Header-module__closeButton]') as HTMLElement;
+        const $btnClose = document.querySelector<HTMLElement>('#gamepass-dialog-root button[class^=Header-module__closeButton]');
         $btnClose && $btnClose.click();
     }
 
-    static #renderButtons() {
-        if (GuideMenu.#$renderedButtons) {
-            return GuideMenu.#$renderedButtons;
+    private renderButtons() {
+        if (this.$renderedButtons) {
+            return this.$renderedButtons;
         }
 
+        const buttons = {
+            scriptSettings: createButton({
+                label: t('better-xcloud'),
+                style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
+                onClick: (() => {
+                    // Wait until the Guide dialog is closed
+                    window.addEventListener(BxEvent.XCLOUD_DIALOG_DISMISSED, e => {
+                        setTimeout(() => SettingsNavigationDialog.getInstance().show(), 50);
+                    }, {once: true});
+
+                    // Close all xCloud's dialogs
+                    this.closeGuideMenu();
+                }).bind(this),
+            }),
+
+            closeApp: AppInterface && createButton({
+                icon: BxIcon.POWER,
+                label: t('close-app'),
+                title: t('close-app'),
+                style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.DANGER,
+                onClick: e => {
+                    AppInterface.closeApp();
+                },
+
+                attributes: {
+                    'data-state': 'normal',
+                },
+            }),
+
+            reloadPage: createButton({
+                icon: BxIcon.REFRESH,
+                label: t('reload-page'),
+                title: t('reload-page'),
+                style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+                onClick: (() => {
+                    // Close all xCloud's dialogs
+                    this.closeGuideMenu();
+
+                    if (STATES.isPlaying) {
+                        confirm(t('confirm-reload-stream')) && window.location.reload();
+                    } else {
+                        window.location.reload();
+                    }
+                }).bind(this),
+            }),
+
+            backToHome: createButton({
+                icon: BxIcon.HOME,
+                label: t('back-to-home'),
+                title: t('back-to-home'),
+                style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+                onClick: (() => {
+                    // Close all xCloud's dialogs
+                    this.closeGuideMenu();
+
+                    confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
+                }).bind(this),
+                attributes: {
+                    'data-state': 'playing',
+                },
+            }),
+        };
+
+        const buttonsLayout = [
+            buttons.scriptSettings,
+            [
+                buttons.backToHome,
+                buttons.reloadPage,
+                buttons.closeApp,
+            ],
+        ];
+
         const $div = CE('div', {
             class: 'bx-guide-home-buttons',
         });
 
-        const buttons = [
-            GuideMenu.#BUTTONS.scriptSettings,
-            [
-                GuideMenu.#BUTTONS.backToHome,
-                GuideMenu.#BUTTONS.reloadPage,
-                GuideMenu.#BUTTONS.closeApp,
-            ],
-        ];
-
-        for (const $button of buttons) {
+        for (const $button of buttonsLayout) {
             if (!$button) {
                 continue;
             }
@@ -123,15 +126,15 @@ export class GuideMenu {
             }
         }
 
-        GuideMenu.#$renderedButtons = $div;
+        this.$renderedButtons = $div;
         return $div;
     }
 
-    static #injectHome($root: HTMLElement, isPlaying = false) {
+    injectHome($root: HTMLElement, isPlaying = false) {
         if (isFullVersion()) {
             const $achievementsProgress = $root.querySelector('button[class*=AchievementsButton-module__progressBarContainer]');
             if ($achievementsProgress) {
-                TrueAchievements.injectAchievementsProgress($achievementsProgress as HTMLElement);
+                TrueAchievements.getInstance().injectAchievementsProgress($achievementsProgress as HTMLElement);
             }
         }
 
@@ -142,7 +145,7 @@ export class GuideMenu {
             $target = $root.querySelector('a[class*=QuitGameButton]');
 
             // Hide xCloud's Home button
-            const $btnXcloudHome = $root.querySelector('div[class^=HomeButtonWithDivider]') as HTMLElement;
+            const $btnXcloudHome = $root.querySelector<HTMLElement>('div[class^=HomeButtonWithDivider]');
             $btnXcloudHome && ($btnXcloudHome.style.display = 'none');
         } else {
             // Last divider
@@ -156,29 +159,30 @@ export class GuideMenu {
             return false;
         }
 
-        const $buttons = GuideMenu.#renderButtons();
+        const $buttons = this.renderButtons();
         $buttons.dataset.isPlaying = isPlaying.toString();
         $target.insertAdjacentElement('afterend', $buttons);
     }
 
-    static async #onShown(e: Event) {
+    async onShown(e: Event) {
         const where = (e as any).where as GuideMenuTab;
 
         if (where === GuideMenuTab.HOME) {
-            const $root = document.querySelector('#gamepass-dialog-root div[role=dialog] div[role=tabpanel] div[class*=HomeLandingPage]') as HTMLElement;
-            $root && GuideMenu.#injectHome($root, STATES.isPlaying);
+            const $root = document.querySelector<HTMLElement>('#gamepass-dialog-root div[role=dialog] div[role=tabpanel] div[class*=HomeLandingPage]');
+            $root && this.injectHome($root, STATES.isPlaying);
         }
     }
 
-    static addEventListeners() {
-        window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, GuideMenu.#onShown);
+    addEventListeners() {
+        window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, this.onShown.bind(this));
     }
 
-    static observe($addedElm: HTMLElement) {
+    observe($addedElm: HTMLElement) {
         const className = $addedElm.className;
 
+        // TrueAchievements
         if (isFullVersion() && className.includes('AchievementsButton-module__progressBarContainer')) {
-            TrueAchievements.injectAchievementsProgress($addedElm);
+            TrueAchievements.getInstance().injectAchievementsProgress($addedElm);
             return;
         }
 
@@ -192,7 +196,7 @@ export class GuideMenu {
         if (isFullVersion()) {
             const $achievDetailPage = $addedElm.querySelector('div[class*=AchievementDetailPage]');
             if ($achievDetailPage) {
-                TrueAchievements.injectAchievementDetailPage($achievDetailPage as HTMLElement);
+                TrueAchievements.getInstance().injectAchievementDetailPage($achievDetailPage as HTMLElement);
                 return;
             }
         }

src/modules/ui/header.ts

@@ -7,36 +7,45 @@ import { t } from "@utils/translation";
 import { SettingsNavigationDialog } from "./dialog/settings-dialog";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { BxLogger } from "@/utils/bx-logger";
 
 export class HeaderSection {
-    static #$remotePlayBtn = createButton({
-        classes: ['bx-header-remote-play-button', 'bx-gone'],
-        icon: BxIcon.REMOTE_PLAY,
-        title: t('remote-play'),
-        style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR,
-        onClick: e => {
-            RemotePlayManager.getInstance().togglePopup();
-        },
-    });
+    private static instance: HeaderSection;
+    public static getInstance = () => HeaderSection.instance ?? (HeaderSection.instance = new HeaderSection());
+    private readonly LOG_TAG = 'HeaderSection';
 
-    static #$settingsBtn = createButton({
-        classes: ['bx-header-settings-button'],
-        label: '???',
-        style: ButtonStyle.FROSTED | ButtonStyle.DROP_SHADOW | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
-        onClick: e => {
-            SettingsNavigationDialog.getInstance().show();
-        },
-    });
+    private $btnRemotePlay: HTMLElement;
+    private $btnSettings: HTMLElement;
+    private $buttonsWrapper: HTMLElement;
 
-    static #$buttonsWrapper = CE('div', {},
-        getPref(PrefKey.REMOTE_PLAY_ENABLED) ? HeaderSection.#$remotePlayBtn : null,
-        HeaderSection.#$settingsBtn,
-    );
+    private observer?: MutationObserver;
+    private timeoutId?: number | null;
 
-    static #observer: MutationObserver;
-    static #timeout: number | null;
+    constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
 
-    static #injectSettingsButton($parent?: HTMLElement) {
+        this.$btnRemotePlay = createButton({
+            classes: ['bx-header-remote-play-button', 'bx-gone'],
+            icon: BxIcon.REMOTE_PLAY,
+            title: t('remote-play'),
+            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR,
+            onClick: e => RemotePlayManager.getInstance().togglePopup(),
+        });
+
+        this.$btnSettings = createButton({
+            classes: ['bx-header-settings-button'],
+            label: '???',
+            style: ButtonStyle.FROSTED | ButtonStyle.DROP_SHADOW | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
+            onClick: e => SettingsNavigationDialog.getInstance().show(),
+        });
+
+        this.$buttonsWrapper = CE('div', {},
+            getPref(PrefKey.REMOTE_PLAY_ENABLED) ? this.$btnRemotePlay : null,
+            this.$btnSettings,
+        );
+    }
+
+    private injectSettingsButton($parent?: HTMLElement) {
         if (!$parent) {
             return;
         }
@@ -44,8 +53,8 @@ export class HeaderSection {
         const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
 
         // Setup Settings button
-        const $btnSettings = HeaderSection.#$settingsBtn;
-        if (isElementVisible(HeaderSection.#$buttonsWrapper)) {
+        const $btnSettings = this.$btnSettings;
+        if (isElementVisible(this.$buttonsWrapper)) {
             return;
         }
 
@@ -57,38 +66,42 @@ export class HeaderSection {
         }
 
         // Add the Settings button to the web page
-        $parent.appendChild(HeaderSection.#$buttonsWrapper);
+        $parent.appendChild(this.$buttonsWrapper);
     }
 
-    static checkHeader() {
+    private checkHeader() {
         let $target = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
         if (!$target) {
             $target = document.querySelector('div[class^=UnsupportedMarketPage-module__buttons]');
         }
 
-        $target && HeaderSection.#injectSettingsButton($target as HTMLElement);
+        $target && this.injectSettingsButton($target as HTMLElement);
     }
 
-    static showRemotePlayButton() {
-        HeaderSection.#$remotePlayBtn.classList.remove('bx-gone');
-    }
-
-    static watchHeader() {
+    private watchHeader() {
         const $root = document.querySelector('#PageContent header') || document.querySelector('#root');
         if (!$root) {
             return;
         }
 
-        HeaderSection.#timeout && clearTimeout(HeaderSection.#timeout);
-        HeaderSection.#timeout = null;
+        this.timeoutId && clearTimeout(this.timeoutId);
+        this.timeoutId = null;
 
-        HeaderSection.#observer && HeaderSection.#observer.disconnect();
-        HeaderSection.#observer = new MutationObserver(mutationList => {
-            HeaderSection.#timeout && clearTimeout(HeaderSection.#timeout);
-            HeaderSection.#timeout = window.setTimeout(HeaderSection.checkHeader, 2000);
+        this.observer && this.observer.disconnect();
+        this.observer = new MutationObserver(mutationList => {
+            this.timeoutId && clearTimeout(this.timeoutId);
+            this.timeoutId = window.setTimeout(this.checkHeader.bind(this), 2000);
         });
-        HeaderSection.#observer.observe($root, {subtree: true, childList: true});
+        this.observer.observe($root, {subtree: true, childList: true});
 
-        HeaderSection.checkHeader();
+        this.checkHeader();
+    }
+
+    showRemotePlayButton() {
+        this.$btnRemotePlay.classList.remove('bx-gone');
+    }
+
+    static watchHeader() {
+        HeaderSection.getInstance().watchHeader();
     }
 }

src/modules/ui/product-details.ts

@@ -3,6 +3,7 @@ import { BxIcon } from "@/utils/bx-icon";
 import { AppInterface } from "@/utils/global";
 import { ButtonStyle, CE, createButton } from "@/utils/html";
 import { t } from "@/utils/translation";
+import { parseDetailsPath } from "@/utils/utils";
 
 export class ProductDetailsPage {
     private static $btnShortcut = AppInterface && createButton({
@@ -20,17 +21,9 @@ export class ProductDetailsPage {
         label: t('wallpaper'),
         style: ButtonStyle.FOCUSABLE,
         tabIndex: 0,
-        onClick: async e => {
-            try {
-                const matches = /\/games\/(?<titleSlug>[^\/]+)\/(?<productId>\w+)/.exec(window.location.pathname);
-                if (!matches?.groups) {
-                    return;
-                }
-
-                const titleSlug = matches.groups.titleSlug.replaceAll('\%' + '7C', '-');
-                const productId = matches.groups.productId;
-                AppInterface.downloadWallpapers(titleSlug, productId);
-            } catch (e) {}
+        onClick: e => {
+            const details = parseDetailsPath(window.location.pathname);
+            details && AppInterface.downloadWallpapers(details.titleSlug, details.productId);
         },
     });
 

src/types/index.d.ts

@@ -12,6 +12,7 @@ interface Window {
     BX_EXPOSED: any;
 
     BX_VIBRATION_INTENSITY: number;
+    BX_CONTROLLER_POLLING_RATE: number;
     BX_ENABLE_CONTROLLER_VIBRATION: boolean;
     BX_ENABLE_DEVICE_VIBRATION: boolean;
 

src/types/preferences.d.ts

@@ -4,8 +4,8 @@ export type PreferenceSetting = {
     options?: {[index: string]: string};
     multipleOptions?: {[index: string]: string};
     unsupported?: boolean;
-    unsupported_note?: string | HTMLElement;
-    note?: string | HTMLElement;
+    unsupportedNote?: string | (() => HTMLElement);
+    note?: string | (() => HTMLElement);
     type?: SettingElementType;
     ready?: (setting: PreferenceSetting) => void;
     migrate?: (this: Preferences, savedPrefs: any, value: any) => void;

src/types/setting-definition.d.ts

@@ -18,10 +18,10 @@ export type SettingDefinition = {
     default: any;
 } & Partial<{
     label: string;
-    note: string | HTMLElement;
+    note: string | (() => HTMLElement);
     experimental: boolean;
     unsupported: boolean;
-    unsupportedNote: string | HTMLElement;
+    unsupportedNote: string | (() => HTMLElement);
     suggest: PartialRecord<SuggestedSettingCategory, any>,
     ready: (setting: SettingDefinition) => void;
     type: SettingElementType,
@@ -59,4 +59,5 @@ export type NumberStepperParams = Partial<{
     exactTicks: number;
 
     customTextValue: (value: any) => string | null;
+    reverse: boolean;
 }>

src/utils/bx-exposed.ts

@@ -144,4 +144,10 @@ export const BxExposed = {
 
         return false;
     },
+
+    GameSlugRegexes: [
+        /[;,/?:@&=+_`~$%#^*()!^\u2122\xae\xa9]/g,
+        / {2,}/g,
+        / /g,
+    ],
 };

src/utils/bx-icon.ts

@@ -1,3 +1,4 @@
+// Credit: https://phosphoricons.com
 import iconBetterXcloud from "@assets/svg/better-xcloud.svg" with { type: "text" };
 import iconTrueAchievements from "@assets/svg/true-achievements.svg" with { type: "text" };
 import iconClose from "@assets/svg/close.svg" with { type: "text" };
@@ -7,6 +8,8 @@ import iconCopy from "@assets/svg/copy.svg" with { type: "text" };
 import iconCreateShortcut from "@assets/svg/create-shortcut.svg" with { type: "text" };
 import iconCursorText from "@assets/svg/cursor-text.svg" with { type: "text" };
 import iconDisplay from "@assets/svg/display.svg" with { type: "text" };
+import iconEye from "@assets/svg/eye.svg" with { type: "text" };
+import iconEyeSlash from "@assets/svg/eye-slash.svg" with { type: "text" };
 import iconHome from "@assets/svg/home.svg" with { type: "text" };
 import iconNativeMkb from "@assets/svg/native-mkb.svg" with { type: "text" };
 import iconNew from "@assets/svg/new.svg" with { type: "text" };
@@ -48,6 +51,8 @@ export const BxIcon = {
     CONTROLLER: iconController,
     CREATE_SHORTCUT: iconCreateShortcut,
     DISPLAY: iconDisplay,
+    EYE: iconEye,
+    EYE_SLASH: iconEyeSlash,
     HOME: iconHome,
     NATIVE_MKB: iconNativeMkb,
     NEW: iconNew,

src/utils/bx-logger.ts

@@ -1,3 +1,5 @@
+import { BX_FLAGS } from "./bx-flags";
+
 const enum TextColor {
     INFO = '#008746',
     WARNING = '#c1a404',
@@ -5,22 +7,12 @@ const enum TextColor {
 }
 
 export class BxLogger {
-    static #PREFIX = '[BxC]';
+    static info = (tag: string, ...args: any[]) => BxLogger.log(TextColor.INFO, tag, ...args);
+    static warning = (tag: string, ...args: any[]) => BxLogger.log(TextColor.WARNING, tag, ...args);
+    static error = (tag: string, ...args: any[]) => BxLogger.log(TextColor.ERROR, tag, ...args);
 
-    static info(tag: string, ...args: any[]) {
-        BxLogger.#log(TextColor.INFO, tag, ...args);
-    }
-
-    static warning(tag: string, ...args: any[]) {
-        BxLogger.#log(TextColor.WARNING, tag, ...args);
-    }
-
-    static error(tag: string, ...args: any[]) {
-        BxLogger.#log(TextColor.ERROR, tag, ...args);
-    }
-
-    static #log(color: string, tag: string, ...args: any) {
-        console.log(`%c${BxLogger.#PREFIX}`, `color:${color};font-weight:bold;`, tag, '//', ...args);
+    private static log(color: string, tag: string, ...args: any) {
+        BX_FLAGS.Debug && console.log(`%c[BxC]`, `color:${color};font-weight:bold;`, tag, '//', ...args);
     }
 }
 

src/utils/feature-gates.ts

@@ -9,11 +9,6 @@ export let FeatureGates: {[key: string]: boolean} = {
     'ShowForcedUpdateScreen': false,
 };
 
-// Disable context menu in Home page
-if (getPref(PrefKey.UI_HOME_CONTEXT_MENU_DISABLED)) {
-    FeatureGates['EnableHomeContextMenu'] = false;
-}
-
 // Disable chat feature
 if (getPref(PrefKey.BLOCK_SOCIAL_FEATURES)) {
     FeatureGates['EnableGuideChatTab'] = false;

src/utils/gamepad.ts

@@ -33,3 +33,7 @@ export function showGamepadToast(gamepad: Gamepad) {
 
     Toast.show(text, status, {instant: false});
 }
+
+export function updatePollingRate() {
+    window.BX_CONTROLLER_POLLING_RATE = getPref(PrefKey.CONTROLLER_POLLING_RATE);
+}

src/utils/html.ts

@@ -56,6 +56,8 @@ function createElement<T=HTMLElement>(elmName: string, props: CreateElementOptio
     let $elm;
     const hasNs = 'xmlns' in props;
 
+    // console.trace('createElement', elmName, props);
+
     if (hasNs) {
         $elm = document.createElementNS(props.xmlns, elmName);
         delete props.xmlns;
@@ -101,29 +103,30 @@ function createElement<T=HTMLElement>(elmName: string, props: CreateElementOptio
 
 export const CE = createElement;
 
-// Credit: https://phosphoricons.com
-const svgParser = (svg: string) => new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement;
-
-export const createSvgIcon = (icon: typeof BxIcon) => {
-    return svgParser(icon.toString());
+const domParser = new DOMParser();
+export function createSvgIcon(icon: typeof BxIcon) {
+    return domParser.parseFromString(icon.toString(), 'image/svg+xml').documentElement;
 }
 
 const ButtonStyleIndices = Object.keys(ButtonStyleClass).map(i => parseInt(i));
 
-export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
+export function createButton<T=HTMLButtonElement>(options: BxButton): T {
     let $btn;
     if (options.url) {
-        $btn = CE('a', {'class': 'bx-button'}) as HTMLAnchorElement;
+        $btn = CE<HTMLAnchorElement>('a', {'class': 'bx-button'});
         $btn.href = options.url;
         $btn.target = '_blank';
     } else {
-        $btn = CE('button', {'class': 'bx-button', type: 'button'}) as HTMLButtonElement;
+        $btn = CE<HTMLButtonElement>('button', {'class': 'bx-button', type: 'button'});
     }
 
     const style = (options.style || 0) as number;
-    style && ButtonStyleIndices.forEach((index: keyof typeof ButtonStyleClass) => {
+    if (style) {
+        let index: keyof typeof ButtonStyleClass;
+        for (index of ButtonStyleIndices) {
             (style & index) && $btn.classList.add(ButtonStyleClass[index] as string);
-        });
+        }
+    }
 
     options.classes && $btn.classList.add(...options.classes);
 

src/utils/local-db.ts

@@ -1,165 +0,0 @@
-import { MkbPreset } from "@modules/mkb/mkb-preset";
-import { t } from "@utils/translation";
-import type { MkbStoredPreset, MkbStoredPresets } from "@/types/mkb";
-import { PrefKey } from "@/enums/pref-keys";
-import { setPref } from "./settings-storages/global-settings-storage";
-
-export class LocalDb {
-    static #instance: LocalDb;
-    static get INSTANCE() {
-        if (!LocalDb.#instance) {
-            LocalDb.#instance = new LocalDb();
-        }
-
-        return LocalDb.#instance;
-    }
-
-    static readonly DB_NAME = 'BetterXcloud';
-    static readonly DB_VERSION = 1;
-    static readonly TABLE_PRESETS = 'mkb_presets';
-
-    #DB: any;
-
-    #open() {
-        return new Promise<void>((resolve, reject) => {
-            if (this.#DB) {
-                resolve();
-                return;
-            }
-
-            const request = window.indexedDB.open(LocalDb.DB_NAME, LocalDb.DB_VERSION);
-            request.onupgradeneeded = (e: IDBVersionChangeEvent) => {
-                const db = (e.target! as any).result;
-
-                switch (e.oldVersion) {
-                    case 0: {
-                        const presets = db.createObjectStore(LocalDb.TABLE_PRESETS, {keyPath: 'id', autoIncrement: true});
-                        presets.createIndex('name_idx', 'name');
-                        break;
-                    }
-                }
-            };
-
-            request.onerror = e => {
-                console.log(e);
-                alert((e.target as any).error.message);
-                reject && reject();
-            };
-
-            request.onsuccess = e => {
-                this.#DB = (e.target as any).result;
-                resolve();
-            };
-        });
-    }
-
-    #table(name: string, type: string): Promise<IDBObjectStore> {
-        const transaction = this.#DB.transaction(name, type || 'readonly');
-        const table = transaction.objectStore(name);
-
-        return new Promise(resolve => resolve(table));
-    }
-
-    // Convert IndexDB method to Promise
-    #call(method: any) {
-        const table = arguments[1];
-        return new Promise(resolve => {
-            const request = method.call(table, ...Array.from(arguments).slice(2));
-            request.onsuccess = (e: Event) => {
-                resolve([table, (e.target as any).result]);
-            };
-        });
-    }
-
-    #count(table: IDBObjectStore): Promise<[IDBObjectStore, number]> {
-        // @ts-ignore
-        return this.#call(table.count, ...arguments);
-    }
-
-    #add(table: IDBObjectStore, data: any): Promise<[IDBObjectStore, number]> {
-        // @ts-ignore
-        return this.#call(table.add, ...arguments);
-    }
-
-    #put(table: IDBObjectStore, data: any): Promise<[IDBObjectStore, number]> {
-        // @ts-ignore
-        return this.#call(table.put, ...arguments);
-    }
-
-    #delete(table: IDBObjectStore, data: any): Promise<[IDBObjectStore, number]> {
-        // @ts-ignore
-        return this.#call(table.delete, ...arguments);
-    }
-
-    #get(table: IDBObjectStore, id: number): Promise<any> {
-        // @ts-ignore
-        return this.#call(table.get, ...arguments);
-    }
-
-    #getAll(table: IDBObjectStore): Promise<[IDBObjectStore, any]> {
-        // @ts-ignore
-        return this.#call(table.getAll, ...arguments);
-    }
-
-    newPreset(name: string, data: any) {
-        return this.#open()
-            .then(() => this.#table(LocalDb.TABLE_PRESETS, 'readwrite'))
-            .then(table => this.#add(table, {name, data}))
-            .then(([table, id]) => new Promise<number>(resolve => resolve(id)));
-    }
-
-    updatePreset(preset: MkbStoredPreset) {
-        return this.#open()
-            .then(() => this.#table(LocalDb.TABLE_PRESETS, 'readwrite'))
-            .then(table => this.#put(table, preset))
-            .then(([table, id]) => new Promise(resolve => resolve(id)));
-    }
-
-    deletePreset(id: number) {
-        return this.#open()
-            .then(() => this.#table(LocalDb.TABLE_PRESETS, 'readwrite'))
-            .then(table => this.#delete(table, id))
-            .then(([table, id]) => new Promise(resolve => resolve(id)));
-    }
-
-    getPreset(id: number): Promise<MkbStoredPreset> {
-        return this.#open()
-            .then(() => this.#table(LocalDb.TABLE_PRESETS, 'readwrite'))
-            .then(table => this.#get(table, id))
-            .then(([table, preset]) => new Promise(resolve => resolve(preset)));
-    }
-
-    getPresets(): Promise<MkbStoredPresets> {
-        return this.#open()
-            .then(() => this.#table(LocalDb.TABLE_PRESETS, 'readwrite'))
-            .then(table => this.#count(table))
-            .then(([table, count]) => {
-                if (count > 0) {
-                    return new Promise(resolve => {
-                        this.#getAll(table)
-                            .then(([table, items]) => {
-                                const presets: MkbStoredPresets = {};
-                                items.forEach((item: MkbStoredPreset) => (presets[item.id!] = item));
-                                resolve(presets);
-                            });
-                    });
-                }
-
-                // Create "Default" preset when the table is empty
-                const preset: MkbStoredPreset = {
-                    name: t('default'),
-                    data: MkbPreset.DEFAULT_PRESET,
-                }
-
-                return new Promise<MkbStoredPresets>(resolve => {
-                    this.#add(table, preset)
-                        .then(([table, id]) => {
-                            preset.id = id;
-                            setPref(PrefKey.MKB_DEFAULT_PRESET_ID, id);
-
-                            resolve({[id]: preset});
-                        });
-                });
-            });
-    }
-}

src/utils/local-db/local-db.ts

@@ -0,0 +1,79 @@
+export abstract class LocalDb {
+    static readonly DB_NAME = 'BetterXcloud';
+    static readonly DB_VERSION = 2;
+
+    protected db!: IDBDatabase;
+
+    protected open() {
+        return new Promise<void>((resolve, reject) => {
+            if (this.db) {
+                resolve();
+                return;
+            }
+
+            const request = window.indexedDB.open(LocalDb.DB_NAME, LocalDb.DB_VERSION);
+            request.onupgradeneeded = this.onUpgradeNeeded.bind(this);
+
+            request.onerror = e => {
+                console.log(e);
+                alert((e.target as any).error.message);
+                reject && reject();
+            };
+
+            request.onsuccess = e => {
+                this.db = (e.target as any).result;
+                resolve();
+            };
+        });
+    }
+
+    protected abstract onUpgradeNeeded(e: IDBVersionChangeEvent): void;
+
+    protected table(name: string, type: IDBTransactionMode): Promise<IDBObjectStore> {
+        const transaction = this.db.transaction(name, type || 'readonly');
+        const table = transaction.objectStore(name);
+
+        return new Promise(resolve => resolve(table));
+    }
+
+    // Convert IndexDB method to Promise
+    protected call(method: any) {
+        const table = arguments[1];
+        return new Promise(resolve => {
+            const request = method.call(table, ...Array.from(arguments).slice(2));
+            request.onsuccess = (e: Event) => {
+                resolve([table, (e.target as any).result]);
+            };
+        });
+    }
+
+    protected count(table: IDBObjectStore): Promise<[IDBObjectStore, number]> {
+        // @ts-ignore
+        return this.call(table.count, ...arguments);
+    }
+
+    protected add(table: IDBObjectStore, data: any): Promise<[IDBObjectStore, number]> {
+        // @ts-ignore
+        return this.call(table.add, ...arguments);
+    }
+
+    protected put(table: IDBObjectStore, data: any): Promise<[IDBObjectStore, number]> {
+        // @ts-ignore
+        return this.call(table.put, ...arguments);
+    }
+
+    protected delete(table: IDBObjectStore, data: any): Promise<[IDBObjectStore, number]> {
+        // @ts-ignore
+        return this.call(table.delete, ...arguments);
+    }
+
+    protected get(table: IDBObjectStore, id: number): Promise<any> {
+        // @ts-ignore
+        return this.call(table.get, ...arguments);
+    }
+
+    protected getAll(table: IDBObjectStore): Promise<[IDBObjectStore, any]> {
+        // @ts-ignore
+        return this.call(table.getAll, ...arguments);
+    }
+}

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

@@ -0,0 +1,102 @@
+import { PrefKey } from "@/enums/pref-keys";
+import { MkbPreset } from "@/modules/mkb/mkb-preset";
+import type { MkbStoredPreset, MkbStoredPresets } from "@/types/mkb";
+import { setPref } from "../settings-storages/global-settings-storage";
+import { t } from "../translation";
+import { LocalDb } from "./local-db";
+import { BxLogger } from "../bx-logger";
+
+export class MkbPresetsDb extends LocalDb {
+    private static instance: MkbPresetsDb;
+    public static getInstance = () => MkbPresetsDb.instance ?? (MkbPresetsDb.instance = new MkbPresetsDb());
+    private readonly LOG_TAG = 'MkbPresetsDb';
+
+    private readonly TABLE_PRESETS = 'mkb_presets';
+
+    private constructor() {
+        super();
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+    }
+
+    private createTable(db: IDBDatabase) {
+        const presets = db.createObjectStore(this.TABLE_PRESETS, {
+            keyPath: 'id',
+            autoIncrement: true,
+        });
+        presets.createIndex('name_idx', 'name');
+    }
+
+    protected onUpgradeNeeded(e: IDBVersionChangeEvent): void {
+        const db = (e.target! as any).result as IDBDatabase;
+
+        if (db.objectStoreNames.contains('undefined')) {
+            db.deleteObjectStore('undefined');
+        }
+
+        if (!db.objectStoreNames.contains(this.TABLE_PRESETS)) {
+            this.createTable(db);
+        }
+    }
+
+    private async presetsTable() {
+        await this.open();
+        return await this.table(this.TABLE_PRESETS, 'readwrite');
+    }
+
+    async newPreset(name: string, data: any) {
+        const table = await this.presetsTable();
+        const [, id] = await this.add(table, { name, data });
+
+        return id;
+    }
+
+    async updatePreset(preset: MkbStoredPreset) {
+        const table = await this.presetsTable();
+        const [, id] = await this.put(table, preset);
+
+        return id;
+    }
+
+    async deletePreset(id: number) {
+        const table = await this.presetsTable();
+        await this.delete(table, id);
+
+        return id;
+    }
+
+    async getPreset(id: number): Promise<MkbStoredPreset> {
+        const table = await this.presetsTable();
+        const [, preset] = await this.get(table, id);
+
+        return preset;
+    }
+
+    async getPresets(): Promise<MkbStoredPresets> {
+        const table = await this.presetsTable();
+        const [, count] = await this.count(table);
+
+        // Return stored presets
+        if (count > 0) {
+            const [, items] = await this.getAll(table);
+            const presets: MkbStoredPresets = {};
+            items.forEach((item: MkbStoredPreset) => (presets[item.id!] = item));
+
+            return presets;
+        }
+
+        // Create "Default" preset when the table is empty
+        const preset: MkbStoredPreset = {
+            name: t('default'),
+            data: MkbPreset.DEFAULT_PRESET,
+        };
+
+        const [, id] = await this.add(table, preset);
+
+        preset.id = id;
+        setPref(PrefKey.MKB_DEFAULT_PRESET_ID, id);
+
+        return {
+            [id]: preset,
+        };
+    }
+}

src/utils/network.ts

@@ -1,6 +1,5 @@
 import { isFullVersion } from "@macros/build" with {type: "macro"};
 
-import { BxEvent } from "@utils/bx-event";
 import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
 import { TouchController } from "@modules/touch-controller";
 import { STATES } from "@utils/global";
@@ -29,9 +28,7 @@ function clearDbLogs(dbName: string, table: string) {
             const objectStore = db.transaction(table, 'readwrite').objectStore(table);
             const objectStoreRequest = objectStore.clear();
 
-            objectStoreRequest.onsuccess = function() {
-                console.log(`[Better xCloud] Cleared ${dbName}.${table}`);
-            };
+            objectStoreRequest.onsuccess = () => BxLogger.info('clearDbLogs', `Cleared ${dbName}.${table}`);
         } catch (ex) {}
     }
 }
@@ -134,6 +131,7 @@ export function interceptHttpRequests() {
             'https://browser.events.data.microsoft.com',
             'https://dc.services.visualstudio.com',
             'https://2c06dea3f26c40c69b8456d319791fd0@o427368.ingest.sentry.io',
+            'https://mscom.demdex.net',
         ]);
     }
 
@@ -172,29 +170,42 @@ export function interceptHttpRequests() {
     };
 
     let gamepassAllGames: string[] = [];
+    const IGNORED_DOMAINS = [
+        'accounts.xboxlive.com',
+        'chat.xboxlive.com',
+        'notificationinbox.xboxlive.com',
+        'peoplehub.xboxlive.com',
+        'rta.xboxlive.com',
+        'userpresence.xboxlive.com',
+        'xblmessaging.xboxlive.com',
+        'consent.config.office.com',
+
+        'arc.msn.com',
+        'browser.events.data.microsoft.com',
+        'dc.services.visualstudio.com',
+        '2c06dea3f26c40c69b8456d319791fd0@o427368.ingest.sentry.io',
+    ];
 
     (window as any).BX_FETCH = window.fetch = async (request: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
         let url = (typeof request === 'string') ? request : (request as Request).url;
 
         // Check blocked URLs
         for (let blocked of BLOCKED_URLS) {
-            if (!url.startsWith(blocked)) {
-                continue;
+            if (url.startsWith(blocked)) {
+                return new Response('{"acc":1,"webResult":{}}', {
+                    status: 200,
+                    statusText: '200 OK',
+                });
             }
-
-            return new Response('{"acc":1,"webResult":{}}', {
-                status: 200,
-                statusText: '200 OK',
-            });
         }
 
-        if (url.endsWith('/play')) {
-            BxEvent.dispatch(window, BxEvent.STREAM_LOADING);
+        // Ignore URLs
+        const domain = (new URL(url)).hostname;
+        if (IGNORED_DOMAINS.includes(domain)) {
+            return NATIVE_FETCH(request, init);
         }
 
-        if (url.endsWith('/configuration')) {
-            BxEvent.dispatch(window, BxEvent.STREAM_STARTING);
-        }
+        // BxLogger.info('fetch', url);
 
         // Override experimentals
         if (url.startsWith('https://emerald.xboxservices.com/xboxcomfd/experimentation')) {
@@ -212,6 +223,7 @@ export function interceptHttpRequests() {
                 return response;
             } catch (e) {
                 console.log(e);
+                return NATIVE_FETCH(request, init);
             }
         }
 

src/utils/preload-state.ts

@@ -3,8 +3,6 @@ import { BxLogger } from "./bx-logger";
 import { TouchController } from "@modules/touch-controller";
 import { GamePassCloudGallery } from "../enums/game-pass-gallery";
 import { BX_FLAGS } from "./bx-flags";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
 
 const LOG_TAG = 'PreloadState';
 
@@ -50,14 +48,6 @@ export function overridePreloadState() {
                 }
             }
 
-            if (getPref(PrefKey.UI_HOME_CONTEXT_MENU_DISABLED)) {
-                try {
-                    state.experiments.experimentationInfo.data.treatments.EnableHomeContextMenu = false;
-                } catch (e) {
-                    BxLogger.error(LOG_TAG, e);
-                }
-            }
-
             // @ts-ignore
             _state = state;
             STATES.appContext = deepClone(state.appContext);

src/utils/root-dialog-observer.ts

@@ -0,0 +1,114 @@
+import { GuideMenu } from "@/modules/ui/guide-menu";
+import { BxEvent } from "./bx-event";
+import { BX_FLAGS } from "./bx-flags";
+import { BxLogger } from "./bx-logger";
+import { BxIcon } from "./bx-icon";
+import { AppInterface } from "./global";
+import { createButton, ButtonStyle } from "./html";
+import { t } from "./translation";
+import { parseDetailsPath } from "./utils";
+
+
+export class RootDialogObserver {
+    private static $btnShortcut = AppInterface && createButton({
+        icon: BxIcon.CREATE_SHORTCUT,
+        label: t('create-shortcut'),
+        style: ButtonStyle.FOCUSABLE | ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.NORMAL_CASE | ButtonStyle.NORMAL_LINK,
+        tabIndex: 0,
+        onClick: e => {
+            window.BX_EXPOSED.dialogRoutes?.closeAll();
+
+            const $btn = (e.target as HTMLElement).closest('button');
+            AppInterface.createShortcut($btn?.dataset.path);
+        },
+    });
+
+    private static $btnWallpaper = AppInterface && createButton({
+        icon: BxIcon.DOWNLOAD,
+        label: t('wallpaper'),
+        style: ButtonStyle.FOCUSABLE | ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.NORMAL_CASE | ButtonStyle.NORMAL_LINK,
+        tabIndex: 0,
+        onClick: e => {
+            window.BX_EXPOSED.dialogRoutes?.closeAll();
+
+            const $btn = (e.target as HTMLElement).closest('button');
+            const details = parseDetailsPath($btn!.dataset.path!);
+            details && AppInterface.downloadWallpapers(details.titleSlug, details.productId);
+        },
+    });
+
+    private static handleGameCardMenu($root: HTMLElement) {
+        const $detail = $root.querySelector('a[href^="/play/"]') as HTMLAnchorElement;
+        if (!$detail) {
+            return;
+        }
+
+        const path = $detail.getAttribute('href')!;
+        RootDialogObserver.$btnShortcut.dataset.path = path;
+        RootDialogObserver.$btnWallpaper.dataset.path = path;
+
+        $root.append(RootDialogObserver.$btnShortcut, RootDialogObserver.$btnWallpaper);
+    }
+
+    private static handleAddedElement($root: HTMLElement, $addedElm: HTMLElement): boolean {
+        if (AppInterface && $addedElm.className.startsWith('SlideSheet-module__container')) {
+            // Game card's context menu
+            const $gameCardMenu = $addedElm.querySelector<HTMLElement>('div[class^=MruContextMenu],div[class^=GameCardContextMenu]');
+            if ($gameCardMenu) {
+                RootDialogObserver.handleGameCardMenu($gameCardMenu);
+                return true;
+            }
+        } else if ($root.querySelector('div[class*=GuideDialog]')) {
+            // Guide menu
+            GuideMenu.getInstance().observe($addedElm);
+            return true;
+        }
+
+        return false;
+    }
+
+    private static observe($root: HTMLElement) {
+        let beingShown = false;
+
+        const observer = new MutationObserver(mutationList => {
+            for (const mutation of mutationList) {
+                if (mutation.type !== 'childList') {
+                    continue;
+                }
+
+                BX_FLAGS.Debug && BxLogger.warning('RootDialog', 'added', mutation.addedNodes);
+                if (mutation.addedNodes.length === 1) {
+                    const $addedElm = mutation.addedNodes[0];
+                    if ($addedElm instanceof HTMLElement && $addedElm.className) {
+                        RootDialogObserver.handleAddedElement($root, $addedElm);
+                    }
+                }
+
+                const shown = !!($root.firstElementChild && $root.firstElementChild.childElementCount > 0);
+                if (shown !== beingShown) {
+                    beingShown = shown;
+                    BxEvent.dispatch(window, shown ? BxEvent.XCLOUD_DIALOG_SHOWN : BxEvent.XCLOUD_DIALOG_DISMISSED);
+                }
+            }
+        });
+        observer.observe($root, {subtree: true, childList: true});
+    }
+
+    public static waitForRootDialog() {
+        const observer = new MutationObserver(mutationList => {
+            for (const mutation of mutationList) {
+                if (mutation.type !== 'childList') {
+                    continue;
+                }
+
+                const $target = mutation.target as HTMLElement;
+                if ($target.id && $target.id === 'gamepass-dialog-root') {
+                    observer.disconnect();
+                    RootDialogObserver.observe($target);
+                    break;
+                }
+            };
+        });
+        observer.observe(document.documentElement, {subtree: true, childList: true});
+    }
+}

src/utils/screenshot-manager.ts

@@ -0,0 +1,105 @@
+import { StreamPlayerType } from "@enums/stream-player";
+import { AppInterface, STATES } from "./global";
+import { CE } from "./html";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "./settings-storages/global-settings-storage";
+import { BxLogger } from "./bx-logger";
+
+
+export class ScreenshotManager {
+    private static instance: ScreenshotManager;
+    public static getInstance = () => ScreenshotManager.instance ?? (ScreenshotManager.instance = new ScreenshotManager());
+    private readonly LOG_TAG = 'ScreenshotManager';
+
+    private $download: HTMLAnchorElement;
+    private $canvas: HTMLCanvasElement;
+    private canvasContext: CanvasRenderingContext2D;
+
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+
+        this.$download = CE<HTMLAnchorElement>('a');
+
+        this.$canvas = CE<HTMLCanvasElement>('canvas', {'class': 'bx-gone'});
+        this.canvasContext = this.$canvas.getContext('2d', {
+            alpha: false,
+            willReadFrequently: false,
+        })!;
+    }
+
+    updateCanvasSize(width: number, height: number) {
+        this.$canvas.width = width;
+        this.$canvas.height = height;
+    }
+
+    updateCanvasFilters(filters: string) {
+        this.canvasContext.filter = filters;
+    }
+
+    private onAnimationEnd(e: Event) {
+        (e.target as HTMLElement).classList.remove('bx-taking-screenshot');
+    }
+
+    takeScreenshot(callback?: any) {
+        const currentStream = STATES.currentStream;
+        const streamPlayer = currentStream.streamPlayer;
+        const $canvas = this.$canvas;
+        if (!streamPlayer || !$canvas) {
+            return;
+        }
+
+        let $player;
+        if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
+            $player = streamPlayer.getPlayerElement();
+        } else {
+            $player = streamPlayer.getPlayerElement(StreamPlayerType.VIDEO);
+        }
+
+        if (!$player || !$player.isConnected) {
+            return;
+        }
+
+        $player.parentElement!.addEventListener('animationend', this.onAnimationEnd, { once: true });
+        $player.parentElement!.classList.add('bx-taking-screenshot');
+
+        const canvasContext = this.canvasContext;
+
+        if ($player instanceof HTMLCanvasElement) {
+            streamPlayer.getWebGL2Player().drawFrame(true);
+        }
+        canvasContext.drawImage($player, 0, 0, $canvas.width, $canvas.height);
+
+        // Get data URL and pass to parent app
+        if (AppInterface) {
+            const data = $canvas.toDataURL('image/png').split(';base64,')[1];
+            AppInterface.saveScreenshot(currentStream.titleSlug, data);
+
+            // Free screenshot from memory
+            canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
+
+            callback && callback();
+            return;
+        }
+
+        $canvas.toBlob(blob => {
+            if (!blob) {
+                return;
+            }
+
+            // Download screenshot
+            const now = +new Date;
+            const $download = this.$download;
+            $download.download = `${currentStream.titleSlug}-${now}.png`;
+            $download.href = URL.createObjectURL(blob);
+            $download.click();
+
+            // Free screenshot from memory
+            URL.revokeObjectURL($download.href);
+            $download.href = '';
+            $download.download = '';
+            canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
+
+            callback && callback();
+        }, 'image/png');
+    }
+}

src/utils/screenshot.ts

@@ -1,99 +0,0 @@
-import { StreamPlayerType } from "@enums/stream-player";
-import { AppInterface, STATES } from "./global";
-import { CE } from "./html";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
-
-
-export class Screenshot {
-    static #$canvas: HTMLCanvasElement;
-    static #canvasContext: CanvasRenderingContext2D;
-
-    static setup() {
-        if (Screenshot.#$canvas) {
-            return;
-        }
-
-        Screenshot.#$canvas = CE<HTMLCanvasElement>('canvas', {'class': 'bx-gone'});
-
-        Screenshot.#canvasContext = Screenshot.#$canvas.getContext('2d', {
-            alpha: false,
-            willReadFrequently: false,
-        })!;
-    }
-
-    static updateCanvasSize(width: number, height: number) {
-        const $canvas = Screenshot.#$canvas;
-        if ($canvas) {
-            $canvas.width = width;
-            $canvas.height = height;
-        }
-    }
-
-    static updateCanvasFilters(filters: string) {
-        Screenshot.#canvasContext && (Screenshot.#canvasContext.filter = filters);
-    }
-
-    static #onAnimationEnd(e: Event) {
-        const $target = e.target as HTMLElement;
-        $target.classList.remove('bx-taking-screenshot');
-    }
-
-    static takeScreenshot(callback?: any) {
-        const currentStream = STATES.currentStream;
-        const streamPlayer = currentStream.streamPlayer;
-        const $canvas = Screenshot.#$canvas;
-        if (!streamPlayer || !$canvas) {
-            return;
-        }
-
-        let $player;
-        if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
-            $player = streamPlayer.getPlayerElement();
-        } else {
-            $player = streamPlayer.getPlayerElement(StreamPlayerType.VIDEO);
-        }
-
-        if (!$player || !$player.isConnected) {
-            return;
-        }
-
-        $player.parentElement!.addEventListener('animationend', this.#onAnimationEnd, { once: true });
-        $player.parentElement!.classList.add('bx-taking-screenshot');
-
-        const canvasContext = Screenshot.#canvasContext;
-
-        if ($player instanceof HTMLCanvasElement) {
-            streamPlayer.getWebGL2Player().drawFrame();
-        }
-        canvasContext.drawImage($player, 0, 0, $canvas.width, $canvas.height);
-
-        // Get data URL and pass to parent app
-        if (AppInterface) {
-            const data = $canvas.toDataURL('image/png').split(';base64,')[1];
-            AppInterface.saveScreenshot(currentStream.titleSlug, data);
-
-            // Free screenshot from memory
-            canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
-
-            callback && callback();
-            return;
-        }
-
-        $canvas && $canvas.toBlob(blob => {
-                // Download screenshot
-                const now = +new Date;
-                const $anchor = CE<HTMLAnchorElement>('a', {
-                        'download': `${currentStream.titleSlug}-${now}.png`,
-                        'href': URL.createObjectURL(blob!),
-                    });
-                $anchor.click();
-
-                // Free screenshot from memory
-                URL.revokeObjectURL($anchor.href);
-                canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
-
-                callback && callback();
-            }, 'image/png');
-    }
-}

src/utils/setting-element.ts

@@ -160,8 +160,8 @@ export class SettingElement {
 
         let controlValue = value;
 
-        const MIN = setting.min!;
-        const MAX = setting.max!;
+        const MIN = options.reverse ? -setting.max! : setting.min!;
+        const MAX = options.reverse ? -setting.min! : setting.max!;
         const STEPS = Math.max(setting.steps || 1, 1);
 
         const renderTextValue = (value: any) => {
@@ -216,7 +216,7 @@ export class SettingElement {
             type: 'range',
             min: MIN,
             max: MAX,
-            value: value,
+            value: options.reverse ? -value : value,
             step: STEPS,
             tabindex: 0,
         });
@@ -225,13 +225,16 @@ export class SettingElement {
 
         $range.addEventListener('input', e => {
             value = parseInt((e.target as HTMLInputElement).value);
-            const valueChanged = controlValue !== value;
+            if (options.reverse) {
+                value *= -1;
+            }
 
+            const valueChanged = controlValue !== value;
             if (!valueChanged) {
                 return;
             }
 
-            controlValue = value;
+            controlValue = options.reverse ? -value : value;
             updateButtonsVisibility();
             $text.textContent = renderTextValue(value);
 
@@ -245,22 +248,24 @@ export class SettingElement {
 
         if (options.ticks || options.exactTicks) {
             const markersId = `markers-${key}`;
-            const $markers = CE('datalist', {'id': markersId});
+            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;
+                let start = Math.max(Math.floor(setting.min! / options.exactTicks), 1) * options.exactTicks;
 
-                if (start === MIN) {
+                if (start === setting.min!) {
                     start += options.exactTicks;
                 }
 
-                for (let i = start; i < MAX; i += options.exactTicks) {
-                    $markers.appendChild(CE<HTMLOptionElement>('option', {'value': i}));
+                for (let i = start; i < setting.max!; i += options.exactTicks) {
+                    $markers.appendChild(CE<HTMLOptionElement>('option', {
+                        value: options.reverse ? -i : i,
+                    }));
                 }
             } else {
                 for (let i = MIN + options.ticks!; i < MAX; i += options.ticks!) {
-                    $markers.appendChild(CE<HTMLOptionElement>('option', {'value': i}));
+                    $markers.appendChild(CE<HTMLOptionElement>('option', {value: i}));
                 }
             }
             $wrapper.appendChild($markers);
@@ -324,7 +329,7 @@ export class SettingElement {
         // Custom method
         $wrapper.setValue = (value: any) => {
             $text.textContent = renderTextValue(value);
-            $range.value = value;
+            $range.value = options.reverse ? -value : value;
         };
 
         $btnDec.addEventListener('click', onClick);

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

@@ -39,6 +39,10 @@ export const enum ControllerDeviceVibration {
 }
 
 
+export type GameBarPosition = 'bottom-left' | 'bottom-right' | 'off';
+export type GameBarPositionOptions = Record<GameBarPosition, string>;
+
+
 function getSupportedCodecProfiles() {
     const options: PartialRecord<CodecProfile, string> = {
         default: t('default'),
@@ -323,22 +327,22 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         [PrefKey.GAME_BAR_POSITION]: {
             requiredVariants: 'full',
             label: t('position'),
-            default: 'bottom-left',
+            default: 'bottom-left' satisfies GameBarPosition,
             options: {
                 'bottom-left': t('bottom-left'),
                 'bottom-right': t('bottom-right'),
                 'off': t('off'),
-            },
+            } satisfies GameBarPositionOptions,
         },
 
         [PrefKey.LOCAL_CO_OP_ENABLED]: {
             requiredVariants: 'full',
             label: t('enable-local-co-op-support'),
             default: false,
-            note: CE<HTMLAnchorElement>('a', {
-                    href: 'https://github.com/redphx/better-xcloud/discussions/275',
-                    target: '_blank',
-                }, t('enable-local-co-op-support-note')),
+            note: () => CE<HTMLAnchorElement>('a', {
+                href: 'https://github.com/redphx/better-xcloud/discussions/275',
+                target: '_blank',
+            }, t('enable-local-co-op-support-note')),
         },
 
         /*
@@ -353,11 +357,6 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             default: true,
         },
 
-        [PrefKey.CONTROLLER_ENABLE_SHORTCUTS]: {
-            requiredVariants: 'full',
-            default: false,
-        },
-
         [PrefKey.CONTROLLER_ENABLE_VIBRATION]: {
             requiredVariants: 'full',
             label: t('controller-vibration'),
@@ -389,6 +388,30 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             },
         },
 
+        [PrefKey.CONTROLLER_POLLING_RATE]: {
+            requiredVariants: 'full',
+            label: t('polling-rate'),
+            type: SettingElementType.NUMBER_STEPPER,
+            default: 4,
+            min: 4,
+            max: 60,
+            steps: 4,
+            params: {
+                exactTicks: 20,
+                reverse: true,
+                customTextValue(value: any) {
+                    value = parseInt(value);
+
+                    let text = +(1000 / value).toFixed(2) + ' Hz';
+                    if (value === 4) {
+                        text = `${text} (${t('default')})`;
+                    }
+
+                    return text;
+                },
+            },
+        },
+
         [PrefKey.MKB_ENABLED]: {
             requiredVariants: 'full',
             label: t('enable-mkb'),
@@ -405,10 +428,10 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                     url = 'https://better-xcloud.github.io/mouse-and-keyboard/#disclaimer';
                 }
 
-                setting.unsupportedNote = CE('a', {
-                        href: url,
-                        target: '_blank',
-                    }, '⚠️ ' + note);
+                setting.unsupportedNote = () => CE<HTMLAnchorElement>('a', {
+                    href: url,
+                    target: '_blank',
+                }, '⚠️ ' + note);
             },
         },
 
@@ -529,12 +552,6 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             default: false,
         },
 
-        [PrefKey.UI_HOME_CONTEXT_MENU_DISABLED]: {
-            requiredVariants: 'full',
-            label: t('disable-home-context-menu'),
-            default: STATES.browser.capabilities.touch,
-        },
-
         [PrefKey.UI_HIDE_SECTIONS]: {
             requiredVariants: 'full',
             label: t('hide-sections'),
@@ -616,6 +633,21 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 highest: 'low-power',
             },
         },
+        [PrefKey.VIDEO_MAX_FPS]: {
+            label: t('max-fps'),
+            type: SettingElementType.NUMBER_STEPPER,
+            default: 60,
+            min: 10,
+            max: 60,
+            steps: 10,
+            params: {
+                exactTicks: 10,
+                customTextValue: (value: any) => {
+                    value = parseInt(value);
+                    return value === 60 ? t('unlimited') : value + 'fps';
+                },
+            },
+        },
         [PrefKey.VIDEO_SHARPNESS]: {
             label: t('sharpness'),
             type: SettingElementType.NUMBER_STEPPER,

src/utils/stream-stats-collector.ts

@@ -1,6 +1,9 @@
+import { PrefKey } from "@/enums/pref-keys";
 import { BxEvent } from "./bx-event";
 import { STATES } from "./global";
 import { humanFileSize, secondsToHm } from "./html";
+import { getPref } from "./settings-storages/global-settings-storage";
+import { BxLogger } from "./bx-logger";
 
 export enum StreamStat {
     PING = 'ping',
@@ -92,13 +95,8 @@ type CurrentStats = {
 
 export class StreamStatsCollector {
     private static instance: StreamStatsCollector;
-    public static getInstance(): StreamStatsCollector {
-        if (!StreamStatsCollector.instance) {
-            StreamStatsCollector.instance = new StreamStatsCollector();
-        }
-
-        return StreamStatsCollector.instance;
-    }
+    public static getInstance = () => StreamStatsCollector.instance ?? (StreamStatsCollector.instance = new StreamStatsCollector());
+    private readonly LOG_TAG = 'StreamStatsCollector';
 
     // Collect in background - 60 seconds
     static readonly INTERVAL_BACKGROUND = 60 * 1000;
@@ -127,7 +125,8 @@ export class StreamStatsCollector {
         [StreamStat.FPS]: {
             current: 0,
             toString() {
-                return this.current.toString();
+                const maxFps = getPref(PrefKey.VIDEO_MAX_FPS);
+                return maxFps < 60 ? `${maxFps}/${this.current}` : this.current.toString();
             },
         },
 
@@ -217,6 +216,10 @@ export class StreamStatsCollector {
 
     private lastVideoStat?: RTCInboundRtpStreamStats | null;
 
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+    }
+
     async collect() {
         const stats = await STATES.currentStream.peerConnection?.getStats();
         if (!stats) {

src/utils/toast.ts

@@ -1,4 +1,5 @@
 import { CE } from "@utils/html";
+import { BxLogger } from "./bx-logger";
 
 type ToastOptions = {
     instant?: boolean;
@@ -6,84 +7,100 @@ type ToastOptions = {
 }
 
 export class Toast {
-    static #$wrapper: HTMLElement;
-    static #$msg: HTMLElement;
-    static #$status: HTMLElement;
-    static #stack: Array<[string, string, ToastOptions]> = [];
-    static #isShowing = false;
+    private static instance: Toast;
+    public static getInstance = () => Toast.instance ?? (Toast.instance = new Toast());
+    private readonly LOG_TAG = 'Toast';
 
-    static #timeout?: number | null;
-    static #DURATION = 3000;
+    private $wrapper: HTMLElement;
+    private $msg: HTMLElement;
+    private $status: HTMLElement;
 
-    static show(msg: string, status?: string, options: Partial<ToastOptions> = {}) {
+    private stack: Array<[string, string, ToastOptions]> = [];
+    private isShowing = false;
+
+    private timeoutId?: number | null;
+    private DURATION = 3000;
+
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+
+        this.$wrapper = CE('div', {class: 'bx-toast bx-offscreen'},
+            this.$msg = CE('span', {class: 'bx-toast-msg'}),
+            this.$status = CE('span', {class: 'bx-toast-status'}),
+        );
+
+        this.$wrapper.addEventListener('transitionend', e => {
+            const classList = this.$wrapper.classList;
+            if (classList.contains('bx-hide')) {
+                classList.remove('bx-offscreen', 'bx-hide');
+                classList.add('bx-offscreen');
+
+                this.showNext();
+            }
+        });
+
+        document.documentElement.appendChild(this.$wrapper);
+    }
+
+    private show(msg: string, status?: string, options: Partial<ToastOptions> = {}) {
         options = options || {};
 
         const args = Array.from(arguments) as [string, string, ToastOptions];
         if (options.instant) {
             // Clear stack
-            Toast.#stack = [args];
-            Toast.#showNext();
+            this.stack = [args];
+            this.showNext();
         } else {
-            Toast.#stack.push(args);
-            !Toast.#isShowing && Toast.#showNext();
+            this.stack.push(args);
+            !this.isShowing && this.showNext();
         }
     }
 
-    static #showNext() {
-        if (!Toast.#stack.length) {
-            Toast.#isShowing = false;
+    private showNext() {
+        if (!this.stack.length) {
+            this.isShowing = false;
             return;
         }
 
-        Toast.#isShowing = true;
+        this.isShowing = true;
 
-        Toast.#timeout && clearTimeout(Toast.#timeout);
-        Toast.#timeout = window.setTimeout(Toast.#hide, Toast.#DURATION);
+        this.timeoutId && clearTimeout(this.timeoutId);
+        this.timeoutId = window.setTimeout(this.hide.bind(this), this.DURATION);
 
         // Get values from item
-        const [msg, status, options] = Toast.#stack.shift()!;
+        const [msg, status, options] = this.stack.shift()!;
 
         if (options && options.html) {
-            Toast.#$msg.innerHTML = msg;
+            this.$msg.innerHTML = msg;
         } else {
-            Toast.#$msg.textContent = msg;
+            this.$msg.textContent = msg;
         }
 
         if (status) {
-            Toast.#$status.classList.remove('bx-gone');
-            Toast.#$status.textContent = status;
+            this.$status.classList.remove('bx-gone');
+            this.$status.textContent = status;
         } else {
-            Toast.#$status.classList.add('bx-gone');
+            this.$status.classList.add('bx-gone');
         }
 
-        const classList = Toast.#$wrapper.classList;
+        const classList = this.$wrapper.classList;
         classList.remove('bx-offscreen', 'bx-hide');
         classList.add('bx-show');
     }
 
-    static #hide() {
-        Toast.#timeout = null;
+    private hide() {
+        this.timeoutId = null;
 
-        const classList = Toast.#$wrapper.classList;
+        const classList = this.$wrapper.classList;
         classList.remove('bx-show');
         classList.add('bx-hide');
     }
 
-    static setup() {
-        Toast.#$wrapper = CE('div', {'class': 'bx-toast bx-offscreen'},
-                                        Toast.#$msg = CE('span', {'class': 'bx-toast-msg'}),
-                                        Toast.#$status = CE('span', {'class': 'bx-toast-status'}));
+    static show(msg: string, status?: string, options: Partial<ToastOptions> = {}) {
+        Toast.getInstance().show(msg, status, options);
+    }
 
-        Toast.#$wrapper.addEventListener('transitionend', e => {
-            const classList = Toast.#$wrapper.classList;
-            if (classList.contains('bx-hide')) {
-                classList.remove('bx-offscreen', 'bx-hide');
-                classList.add('bx-offscreen');
-
-                Toast.#showNext();
-            }
-        });
-
-        document.documentElement.appendChild(Toast.#$wrapper);
+    static showNext() {
+        Toast.getInstance().showNext();
     }
 }

src/utils/translation.ts

@@ -143,6 +143,7 @@ const Texts = {
     "local-co-op": "Local co-op",
     "lowest-quality": "Lowest quality",
     "map-mouse-to": "Map mouse to",
+    "max-fps": "Max FPS",
     "may-not-work-properly": "May not work properly!",
     "menu": "Menu",
     "microphone": "Microphone",
@@ -161,7 +162,7 @@ const Texts = {
         ,
         ,
         (e: any) => `Version ${e.version} verfügbar`,
-        ,
+        (e: any) => `Versi ${e.version} tersedia`,
         (e: any) => `Versión ${e.version} disponible`,
         (e: any) => `Version ${e.version} disponible`,
         (e: any) => `Disponibile la versione ${e.version}`,
@@ -169,7 +170,7 @@ const Texts = {
         (e: any) => `${e.version} 버전 사용가능`,
         (e: any) => `Dostępna jest nowa wersja ${e.version}`,
         (e: any) => `Versão ${e.version} disponível`,
-        ,
+        (e: any) => `Версия ${e.version} доступна`,
         (e: any) => `เวอร์ชัน ${e.version} พร้อมใช้งานแล้ว`,
         (e: any) => `${e.version} sayılı yeni sürüm mevcut`,
         (e: any) => `Доступна версія ${e.version}`,
@@ -187,6 +188,7 @@ const Texts = {
     "playing": "Playing",
     "playtime": "Playtime",
     "poland": "Poland",
+    "polling-rate": "Polling rate",
     "position": "Position",
     "powered-off": "Powered off",
     "powered-on": "Powered on",
@@ -223,7 +225,7 @@ const Texts = {
         (e: any) => `Configuració recomanada per a ${e.device}`,
         ,
         (e: any) => `Empfohlene Einstellungen für ${e.device}`,
-        ,
+        (e: any) => `Rekomendasi pengaturan untuk ${e.device}`,
         (e: any) => `Ajustes recomendados para ${e.device}`,
         (e: any) => `Paramètres recommandés pour ${e.device}`,
         (e: any) => `Configurazioni consigliate per ${e.device}`,

src/utils/true-achievements.ts

@@ -1,42 +1,55 @@
 import { BxIcon } from "./bx-icon";
+import { BxLogger } from "./bx-logger";
 import { AppInterface, SCRIPT_VARIANT, STATES } from "./global";
 import { ButtonStyle, CE, clearDataSet, createButton, getReactProps } from "./html";
 import { t } from "./translation";
 
 export class TrueAchievements {
-    private static $link = createButton({
-        label: t('true-achievements'),
-        url: '#',
-        icon: BxIcon.TRUE_ACHIEVEMENTS,
-        style: ButtonStyle.FOCUSABLE | ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.NORMAL_LINK,
-        onClick: TrueAchievements.onClick,
-    }) as HTMLAnchorElement;
+    private static instance: TrueAchievements;
+    public static getInstance = () => TrueAchievements.instance ?? (TrueAchievements.instance = new TrueAchievements());
+    private readonly LOG_TAG = 'TrueAchievements';
 
-    static $button = createButton({
-        label: t('true-achievements'),
-        title: t('true-achievements'),
-        icon: BxIcon.TRUE_ACHIEVEMENTS,
-        style: ButtonStyle.FOCUSABLE,
-        onClick: TrueAchievements.onClick,
-    }) as HTMLAnchorElement;
+    private $link: HTMLElement;
+    private $button: HTMLElement;
+    private $hiddenLink: HTMLAnchorElement;
 
-    private static onClick(e: Event) {
+    constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+
+        this.$link = createButton<HTMLAnchorElement>({
+            label: t('true-achievements'),
+            url: '#',
+            icon: BxIcon.TRUE_ACHIEVEMENTS,
+            style: ButtonStyle.FOCUSABLE | ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.NORMAL_LINK,
+            onClick: this.onClick.bind(this),
+        });
+
+        this.$button = createButton<HTMLAnchorElement>({
+            label: t('true-achievements'),
+            title: t('true-achievements'),
+            icon: BxIcon.TRUE_ACHIEVEMENTS,
+            style: ButtonStyle.FOCUSABLE,
+            onClick: this.onClick.bind(this),
+        });
+
+        this.$hiddenLink = CE<HTMLAnchorElement>('a', {
+            target: '_blank',
+        });
+    }
+
+    private onClick(e: Event) {
         e.preventDefault();
 
-        const dataset = TrueAchievements.$link.dataset;
-        TrueAchievements.open(true, dataset.xboxTitleId, dataset.id);
-
         // Close all xCloud's dialogs
         window.BX_EXPOSED.dialogRoutes?.closeAll();
+
+        const dataset = this.$link.dataset;
+        this.open(true, dataset.xboxTitleId, dataset.id);
     }
 
-    private static $hiddenLink = CE<HTMLAnchorElement>('a', {
-        target: '_blank',
-    });
-
-    private static updateIds(xboxTitleId?: string, id?: string) {
-        const $link = TrueAchievements.$link;
-        const $button = TrueAchievements.$button;
+    private updateIds(xboxTitleId?: string, id?: string) {
+        const $link = this.$link;
+        const $button = this.$button;
 
         clearDataSet($link);
         clearDataSet($button);
@@ -52,7 +65,7 @@ export class TrueAchievements {
         }
     }
 
-    static injectAchievementsProgress($elm: HTMLElement) {
+    injectAchievementsProgress($elm: HTMLElement) {
         // Only do this in Full version
         if (SCRIPT_VARIANT !== 'full') {
             return;
@@ -68,7 +81,7 @@ export class TrueAchievements {
         // Get xboxTitleId of the game
         let xboxTitleId: string | number | undefined;
         try {
-            const $container = $parent.closest('div[class*=AchievementsPreview-module__container]') as HTMLElement;
+            const $container = $parent.closest<HTMLElement>('div[class*=AchievementsPreview-module__container]');
             if ($container) {
                 const props = getReactProps($container);
                 xboxTitleId = props.children.props.data.data.xboxTitleId;
@@ -76,24 +89,24 @@ export class TrueAchievements {
         } catch (e) {}
 
         if (!xboxTitleId) {
-            xboxTitleId = TrueAchievements.getStreamXboxTitleId();
+            xboxTitleId = this.getStreamXboxTitleId();
         }
 
         if (typeof xboxTitleId !== 'undefined') {
             xboxTitleId = xboxTitleId.toString();
         }
-        TrueAchievements.updateIds(xboxTitleId);
+        this.updateIds(xboxTitleId);
 
         if (document.documentElement.dataset.xdsPlatform === 'tv') {
-            $div.appendChild(TrueAchievements.$link);
+            $div.appendChild(this.$link);
         } else {
-            $div.appendChild(TrueAchievements.$button);
+            $div.appendChild(this.$button);
         }
 
         $parent.appendChild($div);
     }
 
-    static injectAchievementDetailPage($parent: HTMLElement) {
+    injectAchievementDetailPage($parent: HTMLElement) {
         // Only do this in Full version
         if (SCRIPT_VARIANT !== 'full') {
             return;
@@ -109,7 +122,7 @@ export class TrueAchievements {
             const achievementList: XboxAchievement[] = props.children.props.data.data;
 
             // Get current achievement name
-            const $header = $parent.querySelector('div[class*=AchievementDetailHeader]') as HTMLElement;
+            const $header = $parent.querySelector<HTMLElement>('div[class*=AchievementDetailHeader]')!;
             const achievementName = getReactProps($header).children[0].props.achievementName;
 
             // Find achievement based on name
@@ -125,19 +138,19 @@ export class TrueAchievements {
 
             // Found achievement -> add TrueAchievements button
             if (id) {
-                TrueAchievements.updateIds(xboxTitleId, id);
-                $parent.appendChild(TrueAchievements.$link);
+                this.updateIds(xboxTitleId, id);
+                $parent.appendChild(this.$link);
             }
         } catch (e) {};
     }
 
-    private static getStreamXboxTitleId() : number | undefined {
+    private getStreamXboxTitleId() : number | undefined {
         return STATES.currentStream.xboxTitleId || STATES.currentStream.titleInfo?.details.xboxTitleId;
     }
 
-    static open(override: boolean, xboxTitleId?: number | string, id?: number | string) {
+    open(override: boolean, xboxTitleId?: number | string, id?: number | string) {
         if (!xboxTitleId || xboxTitleId === 'undefined') {
-            xboxTitleId = TrueAchievements.getStreamXboxTitleId();
+            xboxTitleId = this.getStreamXboxTitleId();
         }
 
         if (AppInterface && AppInterface.openTrueAchievementsLink) {
@@ -154,7 +167,7 @@ export class TrueAchievements {
             }
         }
 
-        TrueAchievements.$hiddenLink.href = url;
-        TrueAchievements.$hiddenLink.click();
+        this.$hiddenLink.href = url;
+        this.$hiddenLink.click();
     }
 }

src/utils/user-agent.ts

@@ -28,7 +28,7 @@ export class UserAgent {
     static #USER_AGENTS: PartialRecord<UserAgentProfile, string> = {
         [UserAgentProfile.WINDOWS_EDGE]: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${CHROMIUM_VERSION} Safari/537.36 Edg/${CHROMIUM_VERSION}`,
         [UserAgentProfile.MACOS_SAFARI]: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.1',
-        [UserAgentProfile.SMART_TV_GENERIC]: `${window.navigator.userAgent} SmartTV`,
+        [UserAgentProfile.SMART_TV_GENERIC]: `${window.navigator.userAgent} Smart-TV`,
         [UserAgentProfile.SMART_TV_TIZEN]: `Mozilla/5.0 (SMART-TV; LINUX; Tizen 7.0) AppleWebKit/537.36 (KHTML, like Gecko) ${CHROMIUM_VERSION}/7.0 TV Safari/537.36 ${SMART_TV_UNIQUE_ID}`,
         [UserAgentProfile.VR_OCULUS]: window.navigator.userAgent + ' OculusBrowser VR',
     }

src/utils/utils.ts

@@ -120,3 +120,15 @@ export function productTitleToSlug(title: string): string {
             .replace(/ /g, '-')
             .toLowerCase();
 }
+
+export function parseDetailsPath(path: string) {
+    const matches = /\/games\/(?<titleSlug>[^\/]+)\/(?<productId>\w+)/.exec(path);
+    if (!matches?.groups) {
+        return;
+    }
+
+    const titleSlug = matches.groups.titleSlug.replaceAll('\%' + '7C', '-');
+    const productId = matches.groups.productId;
+
+    return {titleSlug, productId};
+}

src/utils/xcloud-api.ts

@@ -1,23 +1,22 @@
 import { NATIVE_FETCH } from "./bx-flags";
+import { BxLogger } from "./bx-logger";
 import { STATES } from "./global";
 
 export class XcloudApi {
     private static instance: XcloudApi;
+    public static getInstance = () => XcloudApi.instance ?? (XcloudApi.instance = new XcloudApi());
+    private readonly LOG_TAG = 'XcloudApi';
 
-    public static getInstance(): XcloudApi {
-        if (!XcloudApi.instance) {
-            XcloudApi.instance = new XcloudApi();
-        }
+    private CACHE_TITLES: {[key: string]: XcloudTitleInfo} = {};
+    private CACHE_WAIT_TIME: {[key: string]: XcloudWaitTimeInfo} = {};
 
-        return XcloudApi.instance;
+    private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
     }
 
-    #CACHE_TITLES: {[key: string]: XcloudTitleInfo} = {};
-    #CACHE_WAIT_TIME: {[key: string]: XcloudWaitTimeInfo} = {};
-
     async getTitleInfo(id: string): Promise<XcloudTitleInfo | null> {
-        if (id in this.#CACHE_TITLES) {
-            return this.#CACHE_TITLES[id];
+        if (id in this.CACHE_TITLES) {
+            return this.CACHE_TITLES[id];
         }
 
         const baseUri = STATES.selectedRegion.baseUri;
@@ -45,13 +44,13 @@ export class XcloudApi {
         } catch (e) {
             json = {}
         }
-        this.#CACHE_TITLES[id] = json;
+        this.CACHE_TITLES[id] = json;
         return json;
     }
 
     async getWaitTime(id: string): Promise<XcloudWaitTimeInfo | null> {
-        if (id in this.#CACHE_WAIT_TIME) {
-            return this.#CACHE_WAIT_TIME[id];
+        if (id in this.CACHE_WAIT_TIME) {
+            return this.CACHE_WAIT_TIME[id];
         }
 
         const baseUri = STATES.selectedRegion.baseUri;
@@ -73,7 +72,7 @@ export class XcloudApi {
             json = {};
         }
 
-        this.#CACHE_WAIT_TIME[id] = json;
+        this.CACHE_WAIT_TIME[id] = json;
         return json;
     }
 }

src/utils/xcloud-interceptor.ts

@@ -13,9 +13,25 @@ import { BypassServerIps } from "@/enums/bypass-servers";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref, StreamResolution, StreamTouchController } from "./settings-storages/global-settings-storage";
 
-export
-class XcloudInterceptor {
-    static async #handleLogin(request: RequestInfo | URL, init?: RequestInit) {
+export class XcloudInterceptor {
+    private static readonly SERVER_EMOJIS = {
+        AustraliaEast: '🇦🇺',
+        AustraliaSouthEast: '🇦🇺',
+        BrazilSouth: '🇧🇷',
+        EastUS: '🇺🇸',
+        EastUS2: '🇺🇸',
+        JapanEast: '🇯🇵',
+        KoreaCentral: '🇰🇷',
+        MexicoCentral: '🇲🇽',
+        NorthCentralUs: '🇺🇸',
+        SouthCentralUS: '🇺🇸',
+        UKSouth: '🇬🇧',
+        WestEurope: '🇪🇺',
+        WestUS: '🇺🇸',
+        WestUS2: '🇺🇸',
+    };
+
+    private static async handleLogin(request: RequestInfo | URL, init?: RequestInit) {
         const bypassServer = getPref(PrefKey.SERVER_BYPASS_RESTRICTION);
         if (bypassServer !== 'off') {
             const ip = BypassServerIps[bypassServer as keyof typeof BypassServerIps];
@@ -35,24 +51,8 @@ class XcloudInterceptor {
         RemotePlayManager.getInstance().xcloudToken = obj.gsToken;
 
         // Get server list
-        const serverEmojis = {
-            AustraliaEast: '🇦🇺',
-            AustraliaSouthEast: '🇦🇺',
-            BrazilSouth: '🇧🇷',
-            EastUS: '🇺🇸',
-            EastUS2: '🇺🇸',
-            JapanEast: '🇯🇵',
-            KoreaCentral: '🇰🇷',
-            MexicoCentral: '🇲🇽',
-            NorthCentralUs: '🇺🇸',
-            SouthCentralUS: '🇺🇸',
-            UKSouth: '🇬🇧',
-            WestEurope: '🇪🇺',
-            WestUS: '🇺🇸',
-            WestUS2: '🇺🇸',
-        };
-
         const serverRegex = /\/\/(\w+)\./;
+        const serverEmojis = XcloudInterceptor.SERVER_EMOJIS;
 
         for (let region of obj.offeringSettings.regions) {
             const regionName = region.name as keyof typeof serverEmojis;
@@ -91,7 +91,9 @@ class XcloudInterceptor {
         return response;
     }
 
-    static async #handlePlay(request: RequestInfo | URL, init?: RequestInit) {
+    private static async handlePlay(request: RequestInfo | URL, init?: RequestInit) {
+        BxEvent.dispatch(window, BxEvent.STREAM_LOADING);
+
         const PREF_STREAM_TARGET_RESOLUTION = getPref(PrefKey.STREAM_TARGET_RESOLUTION);
         const PREF_STREAM_PREFERRED_LOCALE = getPref(PrefKey.STREAM_PREFERRED_LOCALE);
 
@@ -129,7 +131,7 @@ class XcloudInterceptor {
         return NATIVE_FETCH(newRequest);
     }
 
-    static async #handleWaitTime(request: RequestInfo | URL, init?: RequestInit) {
+    private static async handleWaitTime(request: RequestInfo | URL, init?: RequestInit) {
         const response = await NATIVE_FETCH(request, init);
 
         if (getPref(PrefKey.UI_LOADING_SCREEN_WAIT_TIME)) {
@@ -143,7 +145,7 @@ class XcloudInterceptor {
         return response;
     }
 
-    static async #handleConfiguration(request: RequestInfo | URL, init?: RequestInit) {
+    private static async handleConfiguration(request: RequestInfo | URL, init?: RequestInit) {
         if ((request as Request).method !== 'GET') {
             return NATIVE_FETCH(request, init);
         }
@@ -165,6 +167,8 @@ class XcloudInterceptor {
             return response;
         }
 
+        BxEvent.dispatch(window, BxEvent.STREAM_STARTING);
+
         const obj = JSON.parse(text);
         let overrides = JSON.parse(obj.clientStreamingConfigOverrides || '{}') || {};
 
@@ -213,13 +217,13 @@ class XcloudInterceptor {
 
         // Server list
         if (url.endsWith('/v2/login/user')) {
-            return XcloudInterceptor.#handleLogin(request, init);
+            return XcloudInterceptor.handleLogin(request, init);
         } else if (url.endsWith('/sessions/cloud/play')) {  // Get session
-            return XcloudInterceptor.#handlePlay(request, init);
+            return XcloudInterceptor.handlePlay(request, init);
         } else if (url.includes('xboxlive.com') && url.includes('/waittime/')) {
-            return XcloudInterceptor.#handleWaitTime(request, init);
+            return XcloudInterceptor.handleWaitTime(request, init);
         } else if (url.endsWith('/configuration')) {
-            return XcloudInterceptor.#handleConfiguration(request, init);
+            return XcloudInterceptor.handleConfiguration(request, init);
         } else if (url && url.endsWith('/ice') && url.includes('/sessions/') && (request as Request).method === 'GET') {
             return patchIceCandidates(request as Request);
         }

src/utils/xhome-interceptor.ts

@@ -10,7 +10,7 @@ import type { RemotePlayConsoleAddresses } from "@/types/network";
 import { RemotePlayManager } from "@/modules/remote-play-manager";
 
 export class XhomeInterceptor {
-    static #consoleAddrs: RemotePlayConsoleAddresses = {};
+    private static consoleAddrs: RemotePlayConsoleAddresses = {};
 
     private static readonly BASE_DEVICE_INFO = {
         appInfo: {
@@ -52,10 +52,9 @@ export class XhomeInterceptor {
         },
     };
 
-    static async #handleLogin(request: Request) {
+    private static async handleLogin(request: Request) {
         try {
-            const clone = (request as Request).clone();
-
+            const clone = request.clone();
             const obj = await clone.json();
             obj.offeringId = 'xhome';
 
@@ -74,31 +73,31 @@ export class XhomeInterceptor {
         return NATIVE_FETCH(request);
     }
 
-    static async #handleConfiguration(request: Request | URL) {
+    private static async handleConfiguration(request: Request | URL) {
+        BxEvent.dispatch(window, BxEvent.STREAM_STARTING);
+
         const response = await NATIVE_FETCH(request);
-
-        const obj = await response.clone().json()
-        console.log(obj);
-
-        const processPorts = (port: number): number[] => {
-            const ports = new Set<number>();
-            port && ports.add(port);
-            ports.add(9002);
-
-            return Array.from(ports);
-        };
+        const obj = await response.clone().json();
 
         const serverDetails = obj.serverDetails;
-        if (serverDetails.ipAddress) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipAddress] = processPorts(serverDetails.port);
-        }
+        const pairs = [
+            ['ipAddress', 'port'],
+            ['ipV4Address', 'ipV4Port'],
+            ['ipV6Address', 'ipV6Port'],
+        ];
 
-        if (serverDetails.ipV4Address) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipV4Address] = processPorts(serverDetails.ipV4Port);
-        }
-
-        if (serverDetails.ipV6Address) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipV6Address] = processPorts(serverDetails.ipV6Port);
+        XhomeInterceptor.consoleAddrs = {};
+        for (const pair of pairs) {
+            const [keyAddr, keyPort] = pair;
+            if (serverDetails[keyAddr]) {
+                const port = serverDetails[keyPort];
+                // Add port 9002 to the list of ports
+                const ports = new Set<number>();
+                port && ports.add(port);
+                ports.add(9002);
+                // Save it
+                XhomeInterceptor.consoleAddrs[serverDetails[keyAddr]] = Array.from(ports);
+            }
         }
 
         response.json = () => Promise.resolve(obj);
@@ -107,7 +106,7 @@ export class XhomeInterceptor {
         return response;
     }
 
-    static async #handleInputConfigs(request: Request | URL, opts: {[index: string]: any}) {
+    private static async handleInputConfigs(request: Request | URL, opts: {[index: string]: any}) {
         const response = await NATIVE_FETCH(request);
 
         if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== StreamTouchController.ALL) {
@@ -144,7 +143,7 @@ export class XhomeInterceptor {
         return response;
     }
 
-    static async #handleTitles(request: Request) {
+    private static async handleTitles(request: Request) {
         const clone = request.clone();
 
         const headers: {[index: string]: any} = {};
@@ -163,7 +162,9 @@ export class XhomeInterceptor {
         return NATIVE_FETCH(request);
     }
 
-    static async #handlePlay(request: RequestInfo | URL) {
+    private static async handlePlay(request: RequestInfo | URL) {
+        BxEvent.dispatch(window, BxEvent.STREAM_LOADING);
+
         const clone = (request as Request).clone();
         const body = await clone.json();
 
@@ -196,37 +197,39 @@ export class XhomeInterceptor {
 
         headers['x-ms-device-info'] = JSON.stringify(deviceInfo);
 
-        const opts: {[index: string]: any} = {
+        const opts: Record<string, any> = {
             method: clone.method,
             headers: headers,
         };
 
+        // Copy body
         if (clone.method === 'POST') {
             opts.body = await clone.text();
         }
 
-        let newUrl = request.url;
-        if (!newUrl.includes('/servers/home')) {
-            const index = request.url.indexOf('.xboxlive.com');
-            newUrl = STATES.remotePlay.server + request.url.substring(index + 13);
+        // Replace xCloud domain with xHome domain
+        let url = request.url;
+        if (!url.includes('/servers/home')) {
+            const parsed = new URL(url);
+            url = STATES.remotePlay.server + parsed.pathname;
         }
 
-        request = new Request(newUrl, opts);
-        let url = (typeof request === 'string') ? request : request.url;
+        // Create new Request instance
+        request = new Request(url, opts);
 
         // Get console IP
         if (url.includes('/configuration')) {
-            return XhomeInterceptor.#handleConfiguration(request);
+            return XhomeInterceptor.handleConfiguration(request);
         } else if (url.endsWith('/sessions/home/play')) {
-            return XhomeInterceptor.#handlePlay(request);
+            return XhomeInterceptor.handlePlay(request);
         } else if (url.includes('inputconfigs')) {
-            return XhomeInterceptor.#handleInputConfigs(request, opts);
+            return XhomeInterceptor.handleInputConfigs(request, opts);
         } else if (url.includes('/login/user')) {
-            return XhomeInterceptor.#handleLogin(request);
+            return XhomeInterceptor.handleLogin(request);
         } else if (url.endsWith('/titles')) {
-            return XhomeInterceptor.#handleTitles(request);
-        } else if (url && url.endsWith('/ice') && url.includes('/sessions/') && (request as Request).method === 'GET') {
-            return patchIceCandidates(request, XhomeInterceptor.#consoleAddrs);
+            return XhomeInterceptor.handleTitles(request);
+        } else if (url && url.endsWith('/ice') && url.includes('/sessions/') && request.method === 'GET') {
+            return patchIceCandidates(request, XhomeInterceptor.consoleAddrs);
         }
 
         return await NATIVE_FETCH(request);