Bump version to 5.8.6

build.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+build_all () {
+    # Clear screen
+    printf "\033c"
+
+    # Build all variants
+    bun build.ts --version $1 --variant full
+    bun build.ts --version $1 --variant lite
+
+    # Wait for key
+    read -p ">> Press Enter to build again..."
+    build_all $1
+}
+
+build_all $1

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')));
@@ -55,7 +57,7 @@ const postProcess = (str: string): string => {
 
     // Minify SVG import code
     const svgMap = {}
-    str = str.replaceAll(/var ([\w_]+) = ("<svg.*?");\n\n/g, function(match, p1, p2) {
+    str = str.replaceAll(/var ([\w_]+) = ("<svg.*?");\n\n/g, (match, p1, p2) => {
         // Remove new lines in SVG
         p2 = p2.replaceAll(/\\n*\s*/g, '');
 
@@ -70,11 +72,33 @@ const postProcess = (str: string): string => {
     // Collapse empty brackets
     str = str.replaceAll(/\{[\s\n]+\}/g, '{}');
 
+    // Remove blank lines
+    str = str.replaceAll(/\n([\s]*)\n/g, "\n");
+
+    // Minify WebGL shaders & JS strings
+    // Replace "\n     " with "\n"
+    str = str.replaceAll(/\\n+\s*/g, '\\n');
+    // Remove comment line
+    str = str.replaceAll(/\\n\/\/.*?(?=\\n)/g, '');
+
+    // Replace ${"time".toUpperCase()} with "TIME"
+    str = str.replaceAll(/\$\{"([^"]+)"\.toUpperCase\(\)\}/g, (match, p1) => {
+        return p1.toUpperCase();
+    });
+
+    // Replace " (e) =>" to " e =>"
+    // str = str.replaceAll(/ \(([^\s,.$()]+)\) =>/g, ' $1 =>');
+
+    // Set indent to 1 space
+    if (MINIFY_SYNTAX) {
         // Collapse if/else blocks without curly braces
         str = str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
 
-    // Remove blank lines
-    str = str.replaceAll(/\n([\s]*)\n/g, "\n");
+        str = str.replaceAll(/\n(\s+)/g, (match, p1) => {
+            const len = p1.length / 2;
+            return '\n' + ' '.repeat(len);
+        });
+    }
 
     assert(str.includes('/* ADDITIONAL CODE */'));
     assert(str.includes('window.BX_EXPOSED = BxExposed'));
@@ -108,7 +132,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),
@@ -139,7 +163,7 @@ const build = async (target: BuildTarget, version: string, variant: BuildVariant
     await Bun.write(path, scriptHeader + result);
 
     // Create meta file (don't build if it's beta version)
-    if (!version.includes('beta')) {
+    if (!version.includes('beta') && variant === 'full') {
         await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
     }
 
@@ -200,7 +224,8 @@ async function main() {
         await build(target, values['version']!!, values['variant'], config);
     }
 
-    console.log('\n** Press Enter to build or Esc to exit');
+    console.log('')
+    // console.log('\n** Press Enter to build or Esc to exit');
 }
 
 function onKeyPress(data: any) {
@@ -213,6 +238,9 @@ function onKeyPress(data: any) {
 }
 
 main();
+
+/*
 process.stdin.setRawMode(true);
 process.stdin.resume();
 process.stdin.on('data', onKeyPress);
+*/

dist/better-xcloud.lite.meta.js

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

dist/better-xcloud.meta.js

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

package.json

@@ -10,14 +10,14 @@
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.9",
-    "@types/node": "^22.5.5",
+    "@types/bun": "^1.1.11",
+    "@types/node": "^22.7.6",
     "@types/stylus": "^0.48.43",
-    "eslint": "^9.10.0",
+    "eslint": "^9.12.0",
     "eslint-plugin-compat": "^6.0.1",
     "stylus": "^0.63.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/css/stream-stats.styl

@@ -71,7 +71,9 @@ div[class^=StreamMenu-module__container] .bx-badges {
 
 /* STATS BAR */
 .bx-stats-bar {
-    display: block;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
     user-select: none;
     -webkit-user-select: none;
     position: fixed;
@@ -84,22 +86,34 @@ div[class^=StreamMenu-module__container] .bx-badges {
     z-index: var(--bx-stats-bar-z-index);
     text-wrap: nowrap;
 
+    &[data-stats*="[time]"] > .bx-stat-time,
+    &[data-stats*="[play]"] > .bx-stat-play,
+    &[data-stats*="[batt]"] > .bx-stat-batt,
     &[data-stats*="[fps]"] > .bx-stat-fps,
     &[data-stats*="[ping]"] > .bx-stat-ping,
+    &[data-stats*="[jit]"] > .bx-stat-jit,
     &[data-stats*="[btr]"] > .bx-stat-btr,
     &[data-stats*="[dt]"] > .bx-stat-dt,
     &[data-stats*="[pl]"] > .bx-stat-pl,
-    &[data-stats*="[fl]"] > .bx-stat-fl {
-        display: inline-block;
+    &[data-stats*="[fl]"] > .bx-stat-fl,
+    &[data-stats*="[dl]"] > .bx-stat-dl,
+    &[data-stats*="[ul]"] > .bx-stat-ul {
+        display: inline-flex;
+        align-items: baseline;
     }
 
+    &[data-stats$="[time]"] > .bx-stat-time,
+    &[data-stats$="[play]"] > .bx-stat-play,
+    &[data-stats$="[batt]"] > .bx-stat-batt,
     &[data-stats$="[fps]"] > .bx-stat-fps,
     &[data-stats$="[ping]"] > .bx-stat-ping,
+    &[data-stats$="[jit]"] > .bx-stat-jit,
     &[data-stats$="[btr]"] > .bx-stat-btr,
     &[data-stats$="[dt]"] > .bx-stat-dt,
     &[data-stats$="[pl]"] > .bx-stat-pl,
-    &[data-stats$="[fl]"] > .bx-stat-fl {
-        margin-right: 0;
+    &[data-stats$="[fl]"] > .bx-stat-fl,
+    &[data-stats$="[dl]"] > .bx-stat-dl,
+    &[data-stats$="[ul]"] > .bx-stat-ul {
         border-right: none;
     }
 
@@ -137,7 +151,6 @@ div[class^=StreamMenu-module__container] .bx-badges {
 
     > div {
         display: none;
-        margin-right: 8px;
         border-right: 1px solid #fff;
         padding-right: 8px;
     }
@@ -145,7 +158,7 @@ div[class^=StreamMenu-module__container] .bx-badges {
     label {
         margin: 0 8px 0 0;
         font-family: var(--bx-title-font);
-        font-size: inherit;
+        font-size: 70%;
         font-weight: bold;
         vertical-align: middle;
         cursor: help;

src/assets/css/web-components.styl

@@ -64,6 +64,7 @@
         input {
             margin: 0 4px;
             accent-color: var(--bx-primary-button-color);
+            pointer-events: none;
         }
 
         &:hover,

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

@@ -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',
@@ -98,4 +98,5 @@ export enum PrefKey {
     REMOTE_PLAY_RESOLUTION = 'xhome_resolution',
 
     GAME_FORTNITE_FORCE_CONSOLE = 'game_fortnite_force_console',
+    GAME_MSFS2020_FORCE_NATIVE_MKB = 'game_msfs2020_force_native_mkb',
 }

src/index.ts

@@ -41,6 +41,8 @@ import { SettingsNavigationDialog } from "./modules/ui/dialog/settings-dialog";
 import { StreamUiHandler } from "./modules/stream/stream-ui";
 import { UserAgent } from "./utils/user-agent";
 import { XboxApi } from "./utils/xbox-api";
+import { StreamStatsCollector } from "./utils/stream-stats-collector";
+import { RootDialogObserver } from "./utils/root-dialog-observer";
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
@@ -308,7 +310,8 @@ function unload() {
     window.BX_EXPOSED.stopTakRendering = false;
 
     NavigationDialogManager.getInstance().hide();
-    StreamStats.getInstance().onStoppedPlaying();
+    StreamStats.getInstance().destroy();
+    StreamBadges.getInstance().destroy();
 
     if (isFullVersion()) {
         MouseCursorHider.stop();
@@ -327,56 +330,11 @@ isFullVersion() && window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
 });
 
 
-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');
+    }
+
     // Monkey patches
     patchRtcPeerConnection();
     patchRtcCodecs();
@@ -392,13 +350,14 @@ function main() {
         disableAdobeAudienceManager();
     }
 
-    waitForRootDialog();
+    RootDialogObserver.waitForRootDialog();
 
     // Setup UI
     addCss();
     Toast.setup();
 
     GuideMenu.addEventListeners();
+    StreamStatsCollector.setupEvents();
     StreamBadges.setupEvents();
     StreamStats.setupEvents();
 

src/modules/controller-shortcut.ts

@@ -38,37 +38,37 @@ 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;
@@ -80,17 +80,17 @@ export class ControllerShortcut {
                 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();
@@ -134,8 +134,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 +147,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 +157,19 @@ 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));
+        window.localStorage.setItem(ControllerShortcut.STORAGE_KEY, JSON.stringify(ControllerShortcut.ACTIONS));
 
-        console.log(ControllerShortcut.#ACTIONS);
+        console.log(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 +205,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 +224,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 +340,7 @@ export class ControllerShortcut {
         );
 
         $selectProfile.addEventListener('input', e => {
-            ControllerShortcut.#switchProfile($selectProfile.value);
+            ControllerShortcut.switchProfile($selectProfile.value);
         });
 
         const onActionChanged = (e: Event) => {
@@ -361,7 +361,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 +387,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 +412,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/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,4 +1,3 @@
-import { BxEvent } from "@utils/bx-event";
 import { BxIcon } from "@utils/bx-icon";
 import { createButton, ButtonStyle } from "@utils/html";
 import { BaseGameBarAction } from "./action-base";
@@ -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);
+        Screenshot.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.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,34 +7,29 @@ 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";
 
 
 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 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() {
         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'}),
@@ -45,6 +40,7 @@ export class GameBar {
             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 +72,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 +81,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
+            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.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,22 +121,11 @@ 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
     reset() {
-        for (const action of this.actions) {
-            action.reset();
-        }
+        this.actions.forEach(action => action.reset());
     }
 }

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

@@ -124,14 +124,8 @@ 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());
 
     #CURRENT_PRESET_DATA = MkbPreset.convert(MkbPreset.DEFAULT_PRESET);
 

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

@@ -23,6 +23,8 @@ type XcloudInputSink = {
 
 export class NativeMkbHandler extends MkbHandler {
     private static instance: NativeMkbHandler;
+    public static getInstance = () => NativeMkbHandler.instance ?? (NativeMkbHandler.instance = new NativeMkbHandler());
+
     #pointerClient: PointerClient | undefined;
     #enabled: boolean = false;
 
@@ -37,14 +39,6 @@ export class NativeMkbHandler extends MkbHandler {
 
     #$message?: HTMLElement;
 
-    public static getInstance(): NativeMkbHandler {
-        if (!NativeMkbHandler.instance) {
-            NativeMkbHandler.instance = new NativeMkbHandler();
-        }
-
-        return NativeMkbHandler.instance;
-    }
-
     #onKeyboardEvent(e: KeyboardEvent) {
         if (e.type === 'keyup' && e.code === 'F8') {
             e.preventDefault();

src/modules/mkb/pointer-client.ts

@@ -15,45 +15,39 @@ 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());
 
-        return PointerClient.instance;
-    }
-
-    #socket: WebSocket | undefined | null;
-    #mkbHandler: MkbHandler | undefined;
+    private socket: WebSocket | undefined | null;
+    private 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) => {
+        this.socket.addEventListener('open', (event) => {
             BxLogger.info(LOG_TAG, 'connected')
         });
 
         // Error
-        this.#socket.addEventListener('error', (event) => {
+        this.socket.addEventListener('error', (event) => {
             BxLogger.error(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 +78,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 +88,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 +102,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 +112,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

@@ -211,7 +211,8 @@ const PATCHES = {
 
         // Block gamepad stats collecting
         if (getPref(PrefKey.BLOCK_TRACKING)) {
-            codeBlock = codeBlock.replaceAll('this.inputPollingIntervalStats.addValue', '');
+            codeBlock = codeBlock.replace('this.inputPollingIntervalStats.addValue', '');
+            codeBlock = codeBlock.replace('this.inputPollingDurationStats.addValue', '');
         }
 
         // Map the Share button on Xbox Series controller with the capturing screenshot feature
@@ -631,12 +632,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;
     },
 
@@ -950,7 +951,20 @@ 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;
+    },
 };
 
 let PATCH_ORDERS: PatchArray = [
@@ -989,6 +1003,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',

src/modules/player/shaders/clarity_boost.fs

@@ -1,51 +1,64 @@
-const int FILTER_UNSHARP_MASKING = 1;
-const int FILTER_CAS = 2;
+#version 300 es
 
-precision highp float;
+precision mediump float;
 uniform sampler2D data;
 uniform vec2 iResolution;
 
+const int FILTER_UNSHARP_MASKING = 1;
+// const int FILTER_CAS = 2;
+
+// constrast = 0.8
+const float CAS_CONTRAST_PEAK = 0.8 * -3.0 + 8.0;
+
+// Luminosity factor
+const vec3 LUMINOSITY_FACTOR = vec3(0.2126, 0.7152, 0.0722);
+
 uniform int filterId;
 uniform float sharpenFactor;
 uniform float brightness;
 uniform float contrast;
 uniform float saturation;
 
-vec3 textureAt(sampler2D tex, vec2 coord) {
-    return texture2D(tex, coord / iResolution.xy).rgb;
-}
+out vec4 fragColor;
+
+vec3 clarityBoost(sampler2D tex, vec2 coord, vec3 e) {
+    vec2 texelSize = 1.0 / iResolution.xy;
 
-vec3 clarityBoost(sampler2D tex, vec2 coord)
-{
     // 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 = textureAt(tex, coord + vec2(-1, 1));
-    vec3 b = textureAt(tex, coord + vec2(0, 1));
-    vec3 c = textureAt(tex, coord + vec2(1, 1));
+    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 = textureAt(tex, coord + vec2(-1, 0));
-    vec3 e = textureAt(tex, coord);
-    vec3 f = textureAt(tex, coord + vec2(1, 0));
+    vec3 d = texture(tex, coord + texelSize * vec2(-1, 0)).rgb;
+    vec3 f = texture(tex, coord + texelSize * vec2(1, 0)).rgb;
 
-    vec3 g = textureAt(tex, coord + vec2(-1, -1));
-    vec3 h = textureAt(tex, coord + vec2(0, -1));
-    vec3 i = textureAt(tex, coord + vec2(1, -1));
+    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) {
+    // 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;
+    }
+
+    // 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);
+    minRgb += min(min(a, c), min(g, i));
 
     vec3 maxRgb = max(max(max(d, e), max(f, b)), h);
-        vec3 maxRgb2 = max(max(a, c), max(g, i));
-        maxRgb += max(maxRgb, maxRgb2);
+    maxRgb += max(max(a, c), max(g, i));
 
     // Smooth minimum distance to signal limit divided by smooth max.
     vec3 reciprocalMaxRgb = 1.0 / maxRgb;
@@ -54,68 +67,34 @@ vec3 clarityBoost(sampler2D tex, vec2 coord)
     // Shaping amount of sharpening.
     amplifyRgb = inversesqrt(amplifyRgb);
 
-        float contrast = 0.8;
-        float peak = -3.0 * contrast + 8.0;
-        vec3 weightRgb = -(1.0 / (amplifyRgb * peak));
-
+    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 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 * 1.0 + b * 2.0 + c * 1.0 +
-            d * 2.0 + e * 4.0 + f * 2.0 +
-            g * 1.0 + h * 2.0 + i * 1.0) / 16.0;
-
-        // Return edge detection
-        return e + (e - gaussianBlur) * sharpenFactor / 3.0;
-    }
-
-    return e;
-}
-
-vec3 adjustBrightness(vec3 color) {
-    return (1.0 + brightness) * color;
-}
-
-vec3 adjustContrast(vec3 color) {
-    return 0.5 + (1.0 + contrast) * (color - 0.5);
-}
-
-vec3 adjustSaturation(vec3 color) {
-    const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
-    vec3 grayscale = vec3(dot(color, luminosityFactor));
-
-    return mix(grayscale, color, 1.0 + saturation);
+    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, gl_FragCoord.xy);
-    } else {
-        color = textureAt(data, gl_FragCoord.xy);
-    }
+    // Clarity boost
+    color = sharpenFactor > 0.0 ? clarityBoost(data, uv, color) : color;
 
-    if (saturation != 0.0) {
-        color = adjustSaturation(color);
-    }
+    // Saturation
+    color = saturation != 1.0 ? mix(vec3(dot(color, LUMINOSITY_FACTOR)), color, saturation) : color;
 
-    if (contrast != 0.0) {
-        color = adjustContrast(color);
-    }
+    // Contrast
+    color = contrast * (color - 0.5) + 0.5;
 
-    if (brightness != 0.0) {
-        color = adjustBrightness(color);
-    }
+    // Brightness
+    color = brightness * color;
 
-    gl_FragColor = vec4(color, 1.0);
+    fragColor = vec4(color, 1.0);
 }

src/modules/player/shaders/clarity_boost.vert

@@ -1,5 +1,7 @@
-attribute vec2 position;
+#version 300 es
+
+in vec4 position;
 
 void main() {
-    gl_Position = vec4(position, 0, 1);
+    gl_Position = position;
 }

src/modules/player/webgl2-player.ts

@@ -5,19 +5,19 @@ import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 
-const LOG_TAG = 'WebGL2Player';
-
 export class WebGL2Player {
-    #$video: HTMLVideoElement;
-    #$canvas: HTMLCanvasElement;
+    private readonly LOG_TAG = 'WebGL2Player';
 
-    #gl: WebGL2RenderingContext | null = null;
-    #resources: Array<any> = [];
-    #program: WebGLProgram | null = null;
+    private $video: HTMLVideoElement;
+    private $canvas: HTMLCanvasElement;
 
-    #stopped: boolean = false;
+    private gl: WebGL2RenderingContext | null = null;
+    private resources: Array<any> = [];
+    private program: WebGLProgram | null = null;
 
-    #options = {
+    private stopped: boolean = false;
+
+    private options = {
         filterId: 1,
         sharpenFactor: 0,
         brightness: 0.0,
@@ -25,112 +25,133 @@ export class WebGL2Player {
         saturation: 0.0,
     };
 
-    #animFrameId: number | null = null;
+    private targetFps = 60;
+    private frameInterval = 0;
+    private lastFrameTime = 0;
+
+    private animFrameId: number | null = null;
 
     constructor($video: HTMLVideoElement) {
-        BxLogger.info(LOG_TAG, 'Initialize');
-        this.#$video = $video;
+        BxLogger.info(this.LOG_TAG, 'Initialize');
+        this.$video = $video;
 
         const $canvas = document.createElement('canvas');
         $canvas.width = $video.videoWidth;
         $canvas.height = $video.videoHeight;
-        this.#$canvas = $canvas;
+        this.$canvas = $canvas;
 
-        this.#setupShaders();
-        this.#setupRendering();
+        this.setupShaders();
+        this.setupRendering();
 
         $video.insertAdjacentElement('afterend', $canvas);
     }
 
     setFilter(filterId: number, update = true) {
-        this.#options.filterId = filterId;
+        this.options.filterId = filterId;
         update && this.updateCanvas();
     }
 
     setSharpness(sharpness: number, update = true) {
-        this.#options.sharpenFactor = sharpness;
+        this.options.sharpenFactor = sharpness;
         update && this.updateCanvas();
     }
 
     setBrightness(brightness: number, update = true) {
-        this.#options.brightness = (brightness - 100) / 100;
+        this.options.brightness = 1 + (brightness - 100) / 100;
         update && this.updateCanvas();
     }
 
     setContrast(contrast: number, update = true) {
-        this.#options.contrast = (contrast - 100) / 100;
+        this.options.contrast = 1 + (contrast - 100) / 100;
         update && this.updateCanvas();
     }
 
     setSaturation(saturation: number, update = true) {
-        this.#options.saturation = (saturation - 100) / 100;
+        this.options.saturation = 1 + (saturation - 100) / 100;
         update && this.updateCanvas();
     }
 
+    setTargetFps(target: number) {
+        this.targetFps = target;
+        this.lastFrameTime = 0;
+        this.frameInterval = target ? Math.floor(1000 / target) : 0;
+    }
+
     getCanvas() {
-        return this.#$canvas;
+        return this.$canvas;
     }
 
     updateCanvas() {
-        const gl = this.#gl!;
-        const program = this.#program!;
+        const gl = this.gl!;
+        const program = this.program!;
 
-        gl.uniform2f(gl.getUniformLocation(program, 'iResolution'), this.#$canvas.width, this.#$canvas.height);
+        gl.uniform2f(gl.getUniformLocation(program, 'iResolution'), this.$canvas.width, this.$canvas.height);
 
-        gl.uniform1i(gl.getUniformLocation(program, 'filterId'), this.#options.filterId);
-        gl.uniform1f(gl.getUniformLocation(program, 'sharpenFactor'), this.#options.sharpenFactor);
-        gl.uniform1f(gl.getUniformLocation(program, 'brightness'), this.#options.brightness);
-        gl.uniform1f(gl.getUniformLocation(program, 'contrast'), this.#options.contrast);
-        gl.uniform1f(gl.getUniformLocation(program, 'saturation'), this.#options.saturation);
+        gl.uniform1i(gl.getUniformLocation(program, 'filterId'), this.options.filterId);
+        gl.uniform1f(gl.getUniformLocation(program, 'sharpenFactor'), this.options.sharpenFactor);
+        gl.uniform1f(gl.getUniformLocation(program, 'brightness'), this.options.brightness);
+        gl.uniform1f(gl.getUniformLocation(program, 'contrast'), this.options.contrast);
+        gl.uniform1f(gl.getUniformLocation(program, 'saturation'), this.options.saturation);
     }
 
-    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);
     }
 
-    #setupRendering() {
+    private setupRendering() {
         let animate: any;
 
         if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
-            const $video = this.#$video;
+            const $video = this.$video;
             animate = () => {
-                if (this.#stopped) {
-                    return;
-                }
-
+                if (!this.stopped) {
                     this.drawFrame();
-                this.#animFrameId = $video.requestVideoFrameCallback(animate);
+                    this.animFrameId = $video.requestVideoFrameCallback(animate);
+                }
             }
 
-            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.#animFrameId = requestAnimationFrame(animate);
+                    this.animFrameId = requestAnimationFrame(animate);
                 }
             }
 
-    #setupShaders() {
-        BxLogger.info(LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
+            this.animFrameId = requestAnimationFrame(animate);
+        }
+    }
 
-        const gl = this.#$canvas.getContext('webgl', {
+    private setupShaders() {
+        BxLogger.info(this.LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
+
+        const gl = this.$canvas.getContext('webgl2', {
             isBx: true,
             antialias: true,
             alpha: false,
             powerPreference: getPref(PrefKey.VIDEO_POWER_PREFERENCE),
         }) as WebGL2RenderingContext;
-        this.#gl = gl;
+        this.gl = gl;
 
         gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferWidth);
 
@@ -145,7 +166,7 @@ export class WebGL2Player {
 
         // Create and link program
         const program = gl.createProgram()!;
-        this.#program = program;
+        this.program = program;
 
         gl.attachShader(program, vShader);
         gl.attachShader(program, fShader);
@@ -162,24 +183,17 @@ export class WebGL2Player {
 
         // Vertices: A screen-filling quad made from two triangles
         const buffer = gl.createBuffer();
-        this.#resources.push(buffer);
+        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);
 
         // Texture to contain the video data
         const texture = gl.createTexture();
-        this.#resources.push(texture);
+        this.resources.push(texture);
 
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
@@ -197,40 +211,40 @@ export class WebGL2Player {
 
     resume() {
         this.stop();
-        this.#stopped = false;
-        BxLogger.info(LOG_TAG, 'Resume');
+        this.stopped = false;
+        BxLogger.info(this.LOG_TAG, 'Resume');
 
-        this.#$canvas.classList.remove('bx-gone');
-        this.#setupRendering();
+        this.$canvas.classList.remove('bx-gone');
+        this.setupRendering();
     }
 
     stop() {
-        BxLogger.info(LOG_TAG, 'Stop');
-        this.#$canvas.classList.add('bx-gone');
+        BxLogger.info(this.LOG_TAG, 'Stop');
+        this.$canvas.classList.add('bx-gone');
 
-        this.#stopped = true;
-        if (this.#animFrameId) {
+        this.stopped = true;
+        if (this.animFrameId) {
             if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
-                this.#$video.cancelVideoFrameCallback(this.#animFrameId);
+                this.$video.cancelVideoFrameCallback(this.animFrameId);
             } else {
-                cancelAnimationFrame(this.#animFrameId);
+                cancelAnimationFrame(this.animFrameId);
             }
 
-            this.#animFrameId = null;
+            this.animFrameId = null;
         }
     }
 
     destroy() {
-        BxLogger.info(LOG_TAG, 'Destroy');
+        BxLogger.info(this.LOG_TAG, 'Destroy');
         this.stop();
 
-        const gl = this.#gl;
+        const gl = this.gl;
         if (gl) {
             gl.getExtension('WEBGL_lose_context')?.loseContext();
-
-            for (const resource of this.#resources) {
-                if (resource instanceof WebGLProgram) {
             gl.useProgram(null);
+
+            for (const resource of this.resources) {
+                if (resource instanceof WebGLProgram) {
                     gl.deleteProgram(resource);
                 } else if (resource instanceof WebGLShader) {
                     gl.deleteShader(resource);
@@ -241,14 +255,14 @@ export class WebGL2Player {
                 }
             }
 
-            this.#gl = null;
+            this.gl = null;
         }
 
-        if (this.#$canvas.isConnected) {
-            this.#$canvas.parentElement?.removeChild(this.#$canvas);
+        if (this.$canvas.isConnected) {
+            this.$canvas.parentElement?.removeChild(this.$canvas);
         }
 
-        this.#$canvas.width = 1;
-        this.#$canvas.height = 1;
+        this.$canvas.width = 1;
+        this.$canvas.height = 1;
     }
 }

src/modules/remote-play-manager.ts

@@ -37,13 +37,7 @@ 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 isInitialized = false;
 

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/stream-player.ts

@@ -7,6 +7,7 @@ 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,
@@ -17,35 +18,35 @@ export type StreamPlayerOptions = Partial<{
 }>;
 
 export class StreamPlayer {
-    #$video: HTMLVideoElement;
-    #playerType: StreamPlayerType = StreamPlayerType.VIDEO;
+    private $video: HTMLVideoElement;
+    private playerType: StreamPlayerType = StreamPlayerType.VIDEO;
 
-    #options: StreamPlayerOptions = {};
+    private options: StreamPlayerOptions = {};
 
-    #webGL2Player: WebGL2Player | null = null;
+    private webGL2Player: WebGL2Player | null = null;
 
-    #$videoCss: HTMLStyleElement | null = null;
-    #$usmMatrix: SVGFEConvolveMatrixElement | null = null;
+    private $videoCss: HTMLStyleElement | null = null;
+    private $usmMatrix: SVGFEConvolveMatrixElement | null = null;
 
     constructor($video: HTMLVideoElement, type: StreamPlayerType, options: StreamPlayerOptions) {
-        this.#setupVideoElements();
+        this.setupVideoElements();
 
-        this.#$video = $video;
-        this.#options = options || {};
+        this.$video = $video;
+        this.options = options || {};
         this.setPlayerType(type);
     }
 
-    #setupVideoElements() {
-        this.#$videoCss = document.getElementById('bx-video-css') as HTMLStyleElement;
-        if (this.#$videoCss) {
-            this.#$usmMatrix = this.#$videoCss.querySelector('#bx-filter-usm-matrix') as any;
+    private setupVideoElements() {
+        this.$videoCss = document.getElementById('bx-video-css') as HTMLStyleElement;
+        if (this.$videoCss) {
+            this.$usmMatrix = this.$videoCss.querySelector('#bx-filter-usm-matrix') as any;
             return;
         }
 
         const $fragment = document.createDocumentFragment();
 
-        this.#$videoCss = CE<HTMLStyleElement>('style', {id: 'bx-video-css'});
-        $fragment.appendChild(this.#$videoCss);
+        this.$videoCss = CE<HTMLStyleElement>('style', {id: 'bx-video-css'});
+        $fragment.appendChild(this.$videoCss);
 
         // Setup SVG filters
         const $svg = CE('svg', {
@@ -56,7 +57,7 @@ export class StreamPlayer {
             CE('filter', {
                     id: 'bx-filter-usm',
                     xmlns: 'http://www.w3.org/2000/svg',
-                }, this.#$usmMatrix = CE('feConvolveMatrix', {
+                }, this.$usmMatrix = CE('feConvolveMatrix', {
                     id: 'bx-filter-usm-matrix',
                     order: '3',
                     xmlns: 'http://www.w3.org/2000/svg',
@@ -67,29 +68,29 @@ export class StreamPlayer {
         document.documentElement.appendChild($fragment);
     }
 
-    #getVideoPlayerFilterStyle() {
+    private getVideoPlayerFilterStyle() {
         const filters = [];
 
-        const sharpness = this.#options.sharpness || 0;
-        if (this.#options.processing === StreamVideoProcessing.USM && sharpness != 0) {
+        const sharpness = this.options.sharpness || 0;
+        if (this.options.processing === StreamVideoProcessing.USM && sharpness != 0) {
             const level = (7 - ((sharpness / 2) - 1) * 0.5).toFixed(1); // 5, 5.5, 6, 6.5, 7
             const matrix = `0 -1 0 -1 ${level} -1 0 -1 0`;
-            this.#$usmMatrix?.setAttributeNS(null, 'kernelMatrix', matrix);
+            this.$usmMatrix?.setAttributeNS(null, 'kernelMatrix', matrix);
 
             filters.push(`url(#bx-filter-usm)`);
         }
 
-        const saturation = this.#options.saturation || 100;
+        const saturation = this.options.saturation || 100;
         if (saturation != 100) {
             filters.push(`saturate(${saturation}%)`);
         }
 
-        const contrast =  this.#options.contrast || 100;
+        const contrast =  this.options.contrast || 100;
         if (contrast != 100) {
             filters.push(`contrast(${contrast}%)`);
         }
 
-        const brightness = this.#options.brightness || 100;
+        const brightness = this.options.brightness || 100;
         if (brightness != 100) {
             filters.push(`brightness(${brightness}%)`);
         }
@@ -97,14 +98,14 @@ export class StreamPlayer {
         return filters.join(' ');
     }
 
-    #resizePlayer() {
+    private resizePlayer() {
         const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
-        const $video = this.#$video;
+        const $video = this.$video;
         const isNativeTouchGame = STATES.currentStream.titleInfo?.details.hasNativeTouchSupport;
 
         let $webGL2Canvas;
-        if (this.#playerType == StreamPlayerType.WEBGL2) {
-            $webGL2Canvas = this.#webGL2Player?.getCanvas()!;
+        if (this.playerType == StreamPlayerType.WEBGL2) {
+            $webGL2Canvas = this.webGL2Player?.getCanvas()!;
         }
 
         let targetWidth;
@@ -166,67 +167,69 @@ export class StreamPlayer {
         }
 
         // Update video dimensions
-        if (isNativeTouchGame && this.#playerType == StreamPlayerType.WEBGL2) {
+        if (isNativeTouchGame && this.playerType == StreamPlayerType.WEBGL2) {
             window.BX_EXPOSED.streamSession.updateDimensions();
         }
     }
 
     setPlayerType(type: StreamPlayerType, refreshPlayer: boolean = false) {
-        if (this.#playerType !== type) {
+        if (this.playerType !== type) {
+            const videoClass = BX_FLAGS.DeviceInfo.deviceType === 'android-tv' ? 'bx-pixel' : 'bx-gone';
+
             // Switch from Video -> WebGL2
             if (type === StreamPlayerType.WEBGL2) {
                 // Initialize WebGL2 player
-                if (!this.#webGL2Player) {
-                    this.#webGL2Player = new WebGL2Player(this.#$video);
+                if (!this.webGL2Player) {
+                    this.webGL2Player = new WebGL2Player(this.$video);
                 } else {
-                    this.#webGL2Player.resume();
+                    this.webGL2Player.resume();
                 }
 
-                this.#$videoCss!.textContent = '';
+                this.$videoCss!.textContent = '';
 
-                this.#$video.classList.add('bx-pixel');
+                this.$video.classList.add(videoClass);
             } else {
                 // Cleanup WebGL2 Player
-                this.#webGL2Player?.stop();
+                this.webGL2Player?.stop();
 
-                this.#$video.classList.remove('bx-pixel');
+                this.$video.classList.remove(videoClass);
             }
         }
 
-        this.#playerType = type;
+        this.playerType = type;
         refreshPlayer && this.refreshPlayer();
     }
 
     setOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
-        this.#options = options;
+        this.options = options;
         refreshPlayer && this.refreshPlayer();
     }
 
     updateOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
-        this.#options = Object.assign(this.#options, options);
+        this.options = Object.assign(this.options, options);
         refreshPlayer && this.refreshPlayer();
     }
 
     getPlayerElement(playerType?: StreamPlayerType) {
         if (typeof playerType === 'undefined') {
-            playerType = this.#playerType;
+            playerType = this.playerType;
         }
 
         if (playerType === StreamPlayerType.WEBGL2) {
-            return this.#webGL2Player?.getCanvas();
+            return this.webGL2Player?.getCanvas();
         }
 
-        return this.#$video;
+        return this.$video;
     }
 
     getWebGL2Player() {
-        return this.#webGL2Player;
+        return this.webGL2Player;
     }
 
     refreshPlayer() {
-        if (this.#playerType === StreamPlayerType.WEBGL2) {
-            const options = this.#options;
-            const webGL2Player = this.#webGL2Player!;
+        if (this.playerType === StreamPlayerType.WEBGL2) {
+            const options = this.options;
+            const webGL2Player = this.webGL2Player!;
 
             if (options.processing === StreamVideoProcessing.USM) {
                 webGL2Player.setFilter(1);
@@ -241,7 +244,7 @@ export class StreamPlayer {
             webGL2Player.setContrast(options.contrast || 100);
             webGL2Player.setBrightness(options.brightness || 100);
         } else {
-            let filters = this.#getVideoPlayerFilterStyle();
+            let filters = this.getVideoPlayerFilterStyle();
             let videoCss = '';
             if (filters) {
                 videoCss += `filter: ${filters} !important;`;
@@ -257,26 +260,26 @@ export class StreamPlayer {
                 css = `#game-stream video { ${videoCss} }`;
             }
 
-            this.#$videoCss!.textContent = css;
+            this.$videoCss!.textContent = css;
         }
 
-        this.#resizePlayer();
+        this.resizePlayer();
     }
 
     reloadPlayer() {
-        this.#cleanUpWebGL2Player();
+        this.cleanUpWebGL2Player();
 
-        this.#playerType = StreamPlayerType.VIDEO;
+        this.playerType = StreamPlayerType.VIDEO;
         this.setPlayerType(StreamPlayerType.WEBGL2, false);
     }
 
-    #cleanUpWebGL2Player() {
+    private cleanUpWebGL2Player() {
         // Clean up WebGL2 Player
-        this.#webGL2Player?.destroy();
-        this.#webGL2Player = null;
+        this.webGL2Player?.destroy();
+        this.webGL2Player = null;
     }
 
     destroy() {
-        this.#cleanUpWebGL2Player();
+        this.cleanUpWebGL2Player();
     }
 }

src/modules/stream/stream-badges.ts

@@ -2,128 +2,148 @@ import { isLiteVersion } from "@macros/build" with {type: "macro"};
 
 import { t } from "@utils/translation";
 import { BxEvent } from "@utils/bx-event";
-import { CE, createSvgIcon } from "@utils/html";
+import { CE, createSvgIcon, humanFileSize } from "@utils/html";
 import { STATES } from "@utils/global";
 import { BxLogger } from "@/utils/bx-logger";
 import { BxIcon } from "@/utils/bx-icon";
 import { GuideMenuTab } from "../ui/guide-menu";
+import { StreamStat, StreamStatsCollector } from "@/utils/stream-stats-collector";
+
+
+type StreamBadgeInfo = {
+    name: string,
+    $element?: HTMLElement,
+    icon: typeof BxIcon,
+    color: string,
+};
+
+type StreamServerInfo = {
+    server?: {
+        region?: string,
+    },
+
+    video?: {
+        width: number,
+        height: number,
+        codec: string,
+        profile?: string,
+    },
+
+    audio?: {
+        codec: string,
+        bitrate: number,
+    },
+};
 
 enum StreamBadge {
     PLAYTIME = 'playtime',
     BATTERY = 'battery',
-    DOWNLOAD = 'in',
-    UPLOAD = 'out',
+    DOWNLOAD = 'download',
+    UPLOAD = 'upload',
 
     SERVER = 'server',
     VIDEO = 'video',
     AUDIO = 'audio',
 }
 
-const StreamBadgeIcon: Partial<{[key in StreamBadge]: any}> = {
-    [StreamBadge.PLAYTIME]: BxIcon.PLAYTIME,
-    [StreamBadge.VIDEO]: BxIcon.DISPLAY,
-    [StreamBadge.BATTERY]: BxIcon.BATTERY,
-    [StreamBadge.DOWNLOAD]: BxIcon.DOWNLOAD,
-    [StreamBadge.UPLOAD]: BxIcon.UPLOAD,
-    [StreamBadge.SERVER]: BxIcon.SERVER,
-    [StreamBadge.AUDIO]: BxIcon.AUDIO,
-}
 
 export class StreamBadges {
     private static instance: StreamBadges;
-    public static getInstance(): StreamBadges {
-        if (!StreamBadges.instance) {
-            StreamBadges.instance = new StreamBadges();
-        }
+    public static getInstance = () => StreamBadges.instance ?? (StreamBadges.instance = new StreamBadges());
 
-        return StreamBadges.instance;
-    }
+    private serverInfo: StreamServerInfo = {};
 
-    #ipv6 = false;
-    #resolution?: {width: number, height: number} | null = null;
-    #video?: {codec: string, profile?: string | null} | null = null;
-    #audio?: {codec: string, bitrate: number} | null = null;
-    #region = '';
+    private badges: Record<StreamBadge, StreamBadgeInfo> = {
+        [StreamBadge.PLAYTIME]: {
+            name: t('playtime'),
+            icon: BxIcon.PLAYTIME,
+            color: '#ff004d',
+        },
+        [StreamBadge.BATTERY]: {
+            name: t('battery'),
+            icon: BxIcon.BATTERY,
+            color: '#00b543',
+        },
+        [StreamBadge.DOWNLOAD]: {
+            name: t('download'),
+            icon: BxIcon.DOWNLOAD,
+            color: '#29adff',
+        },
+        [StreamBadge.UPLOAD]: {
+            name: t('upload'),
+            icon: BxIcon.UPLOAD,
+            color: '#ff77a8',
+        },
+        [StreamBadge.SERVER]: {
+            name: t('server'),
+            icon: BxIcon.SERVER,
+            color: '#ff6c24',
+        },
+        [StreamBadge.VIDEO]: {
+            name: t('video'),
+            icon: BxIcon.DISPLAY,
+            color: '#742f29',
+        },
+        [StreamBadge.AUDIO]: {
+            name: t('audio'),
+            icon: BxIcon.AUDIO,
+            color: '#5f574f',
+        },
+    };
 
-    startBatteryLevel = 100;
-    startTimestamp = 0;
+    private $container: HTMLElement | undefined;
 
-    #$container: HTMLElement | undefined;
-    #cachedDoms: Partial<{[key in StreamBadge]: HTMLElement}> = {};
-
-    #interval?: number | null;
-    readonly #REFRESH_INTERVAL = 3000;
+    private intervalId?: number | null;
+    private readonly REFRESH_INTERVAL = 3 * 1000;
 
     setRegion(region: string) {
-        this.#region = region;
+        this.serverInfo.server = {
+            region: region,
+        };
     }
 
-    #renderBadge(name: StreamBadge, value: string, color: string) {
+    renderBadge(name: StreamBadge, value: string) {
+        const badgeInfo = this.badges[name];
+
         let $badge;
-        if (this.#cachedDoms[name]) {
-            $badge = this.#cachedDoms[name]!;
+        if (badgeInfo.$element) {
+            $badge = badgeInfo.$element;
             $badge.lastElementChild!.textContent = value;
             return $badge;
         }
 
-        $badge = CE('div', {'class': 'bx-badge', 'title': t(`badge-${name}`)},
-            CE('span', {'class': 'bx-badge-name'}, createSvgIcon(StreamBadgeIcon[name])),
-            CE('span', {'class': 'bx-badge-value', 'style': `background-color: ${color}`}, value),
+        $badge = CE('div', {class: 'bx-badge', title: badgeInfo.name},
+            CE('span', {class: 'bx-badge-name'}, createSvgIcon(badgeInfo.icon)),
+            CE('span', {class: 'bx-badge-value', style: `background-color: ${badgeInfo.color}`}, value),
         );
 
         if (name === StreamBadge.BATTERY) {
             $badge.classList.add('bx-badge-battery');
         }
 
-        this.#cachedDoms[name] = $badge;
+        this.badges[name].$element = $badge;
         return $badge;
     }
 
-    async #updateBadges(forceUpdate = false) {
-        if (!this.#$container || (!forceUpdate && !this.#$container.isConnected)) {
-            this.#stop();
+    private async updateBadges(forceUpdate = false) {
+        if (!this.$container || (!forceUpdate && !this.$container.isConnected)) {
+            this.stop();
             return;
         }
 
-        // Playtime
-        let now = +new Date;
-        const diffSeconds = Math.ceil((now - this.startTimestamp) / 1000);
-        const playtime = this.#secondsToHm(diffSeconds);
+        const statsCollector = StreamStatsCollector.getInstance();
+        await statsCollector.collect();
 
-        // Battery
-        let batteryLevel = '100%';
-        let batteryLevelInt = 100;
-        let isCharging = false;
-        if (STATES.browser.capabilities.batteryApi) {
-            try {
-                const bm = await (navigator as NavigatorBattery).getBattery();
-                isCharging = bm.charging;
-                batteryLevelInt = Math.round(bm.level * 100);
-                batteryLevel = `${batteryLevelInt}%`;
-
-                if (batteryLevelInt != this.startBatteryLevel) {
-                    const diffLevel = Math.round(batteryLevelInt - this.startBatteryLevel);
-                    const sign = diffLevel > 0 ? '+' : '';
-                    batteryLevel += ` (${sign}${diffLevel}%)`;
-                }
-            } catch(e) {}
-        }
-
-        const stats = await STATES.currentStream.peerConnection?.getStats()!;
-        let totalIn = 0;
-        let totalOut = 0;
-        stats.forEach(stat => {
-            if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
-                totalIn += stat.bytesReceived;
-                totalOut += stat.bytesSent;
-            }
-        });
+        const play = statsCollector.getStat(StreamStat.PLAYTIME);
+        const batt = statsCollector.getStat(StreamStat.BATTERY);
+        const dl = statsCollector.getStat(StreamStat.DOWNLOAD);
+        const ul = statsCollector.getStat(StreamStat.UPLOAD);
 
         const badges = {
-            [StreamBadge.DOWNLOAD]: totalIn ? this.#humanFileSize(totalIn) : null,
-            [StreamBadge.UPLOAD]: totalOut ? this.#humanFileSize(totalOut) : null,
-            [StreamBadge.PLAYTIME]: playtime,
-            [StreamBadge.BATTERY]: batteryLevel,
+            [StreamBadge.DOWNLOAD]: dl.toString(),
+            [StreamBadge.UPLOAD]: ul.toString(),
+            [StreamBadge.PLAYTIME]: play.toString(),
+            [StreamBadge.BATTERY]: batt.toString(),
         };
 
         let name: keyof typeof badges;
@@ -133,97 +153,49 @@ export class StreamBadges {
                 continue;
             }
 
-            const $elm = this.#cachedDoms[name]!;
-            $elm && ($elm.lastElementChild!.textContent = value);
+            const $elm = this.badges[name].$element;
+            if (!$elm) {
+                continue;
+            }
+
+            $elm.lastElementChild!.textContent = value;
 
             if (name === StreamBadge.BATTERY) {
-                if (this.startBatteryLevel === 100 && batteryLevelInt === 100) {
+                if (batt.current === 100 && batt.start === 100) {
                     // Hide battery badge when the battery is 100%
                     $elm.classList.add('bx-gone');
                 } else {
                     // Show charging status
-                    $elm.dataset.charging = isCharging.toString()
+                    $elm.dataset.charging = batt.isCharging.toString();
                     $elm.classList.remove('bx-gone');
                 }
             }
         }
     }
 
-    async #start() {
-        await this.#updateBadges(true);
-        this.#stop();
-        this.#interval = window.setInterval(this.#updateBadges.bind(this), this.#REFRESH_INTERVAL);
+    private async start() {
+        await this.updateBadges(true);
+        this.stop();
+        this.intervalId = window.setInterval(this.updateBadges.bind(this), this.REFRESH_INTERVAL);
     }
 
-    #stop() {
-        this.#interval && clearInterval(this.#interval);
-        this.#interval = null;
+    private stop() {
+        this.intervalId && clearInterval(this.intervalId);
+        this.intervalId = null;
     }
 
-    #secondsToHm(seconds: number) {
-        let h = Math.floor(seconds / 3600);
-        let m = Math.floor(seconds % 3600 / 60) + 1;
-
-        if (m === 60) {
-            h += 1;
-            m = 0;
-        }
-
-        const output = [];
-        h > 0 && output.push(`${h}h`);
-        m > 0 && output.push(`${m}m`);
-
-        return output.join(' ');
-    }
-
-    // https://stackoverflow.com/a/20732091
-    #humanFileSize(size: number) {
-        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-
-        const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
-        return (size / Math.pow(1024, i)).toFixed(2) + ' ' + units[i];
+    destroy() {
+        this.serverInfo = {};
+        delete this.$container;
     }
 
     async render() {
-        if (this.#$container) {
-            this.#start();
-            return this.#$container;
+        if (this.$container) {
+            this.start();
+            return this.$container;
         }
 
-        await this.#getServerStats();
-
-        // Video
-        let video = '';
-        if (this.#resolution) {
-            video = `${this.#resolution.height}p`;
-        }
-
-        if (this.#video) {
-            video && (video += '/');
-            video += this.#video.codec;
-            if (this.#video.profile) {
-                const profile = this.#video.profile;
-
-                let quality = profile;
-                if (profile.startsWith('4d')) {
-                    quality = t('visual-quality-high');
-                } else if (profile.startsWith('42e')) {
-                    quality = t('visual-quality-normal');
-                } else if (profile.startsWith('420')) {
-                    quality = t('visual-quality-low');
-                }
-
-                video += ` (${quality})`;
-            }
-        }
-
-        // Audio
-        let audio;
-        if (this.#audio) {
-            audio = this.#audio.codec;
-            const bitrate = this.#audio.bitrate / 1000;
-            audio += ` (${bitrate} kHz)`;
-        }
+        await this.getServerStats();
 
         // Battery
         let batteryLevel = '';
@@ -231,46 +203,50 @@ export class StreamBadges {
             batteryLevel = '100%';
         }
 
-        // Server + Region
-        let server = this.#region;
-        server += '@' + (this.#ipv6 ? 'IPv6' : 'IPv4');
-
         const BADGES = [
-            [StreamBadge.PLAYTIME, '1m', '#ff004d'],
-            [StreamBadge.BATTERY, batteryLevel, '#00b543'],
-            [StreamBadge.DOWNLOAD, this.#humanFileSize(0), '#29adff'],
-            [StreamBadge.UPLOAD, this.#humanFileSize(0), '#ff77a8'],
-            [StreamBadge.SERVER, server, '#ff6c24'],
-            video ? [StreamBadge.VIDEO, video, '#742f29'] : null,
-            audio ? [StreamBadge.AUDIO, audio, '#5f574f'] : null,
+            [StreamBadge.PLAYTIME, '1m'],
+            [StreamBadge.BATTERY, batteryLevel],
+            [StreamBadge.DOWNLOAD, humanFileSize(0)],
+            [StreamBadge.UPLOAD, humanFileSize(0)],
+            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'});
+        const $container = CE('div', {class: 'bx-badges'});
         BADGES.forEach(item => {
             if (!item) {
                 return;
             }
 
-            const $badge = this.#renderBadge(...(item as [StreamBadge, string, string]));
+            let $badge: HTMLElement;
+            if (!(item instanceof HTMLElement)) {
+                $badge = this.renderBadge(...(item as [StreamBadge, string]));
+            } else {
+                $badge = item;
+            }
+
             $container.appendChild($badge);
         });
 
-        this.#$container = $container;
-        await this.#start();
+        this.$container = $container;
+        await this.start();
 
         return $container;
     }
 
-    async #getServerStats() {
+    private async getServerStats() {
         const stats = await STATES.currentStream.peerConnection!.getStats();
 
-        const allVideoCodecs: {[index: string]: RTCBasicStat} = {};
+        const allVideoCodecs: Record<string, RTCBasicStat> = {};
         let videoCodecId;
+        let videoWidth = 0;
+        let videoHeight = 0;
 
-        const allAudioCodecs: {[index: string]: RTCBasicStat} = {};
+        const allAudioCodecs: Record<string, RTCBasicStat> = {};
         let audioCodecId;
 
-        const allCandidates: {[index: string]: string} = {};
+        const allCandidates: Record<string, string> = {};
         let candidateId;
 
         stats.forEach((stat: RTCBasicStat) => {
@@ -287,6 +263,8 @@ export class StreamBadges {
                 // Get the codecId of the video/audio track currently being used
                 if (stat.kind === 'video') {
                     videoCodecId = stat.codecId;
+                    videoWidth = stat.frameWidth;
+                    videoHeight = stat.frameHeight;
                 } else if (stat.kind === 'audio') {
                     audioCodecId = stat.codecId;
                 }
@@ -300,53 +278,75 @@ export class StreamBadges {
         // Get video codec from codecId
         if (videoCodecId) {
             const videoStat = allVideoCodecs[videoCodecId];
-            const video: any = {
+            const video: StreamServerInfo['video'] = {
+                width: videoWidth,
+                height: videoHeight,
                 codec: videoStat.mimeType.substring(6),
             };
 
             if (video.codec === 'H264') {
                 const match = /profile-level-id=([0-9a-f]{6})/.exec(videoStat.sdpFmtpLine);
-                video.profile = match ? match[1] : null;
+                match && (video.profile = match[1]);
             }
 
-            this.#video = video;
+            let text = videoHeight + 'p';
+            text && (text += '/');
+            text += video.codec;
+            if (video.profile) {
+                const profile = video.profile;
+
+                let quality = profile;
+                if (profile.startsWith('4d')) {
+                    quality = t('visual-quality-high');
+                } else if (profile.startsWith('42e')) {
+                    quality = t('visual-quality-normal');
+                } else if (profile.startsWith('420')) {
+                    quality = t('visual-quality-low');
+                }
+
+                text += ` (${quality})`;
+            }
+
+            // Render badge
+            this.badges.video.$element = this.renderBadge(StreamBadge.VIDEO, text);
+
+            this.serverInfo.video = video;
         }
 
         // Get audio codec from codecId
         if (audioCodecId) {
             const audioStat = allAudioCodecs[audioCodecId];
-            this.#audio = {
+            const audio: StreamServerInfo['audio'] = {
                 codec: audioStat.mimeType.substring(6),
                 bitrate: audioStat.clockRate,
-            }
+            };
+
+            const bitrate = audio.bitrate / 1000;
+            const text = `${audio.codec} (${bitrate} kHz)`;
+            this.badges.audio.$element = this.renderBadge(StreamBadge.AUDIO, text);
+
+            this.serverInfo.audio = audio;
         }
 
         // Get server type
         if (candidateId) {
             BxLogger.info('candidate', candidateId, allCandidates);
-            this.#ipv6 = allCandidates[candidateId].includes(':');
+
+            // Server + Region
+            let text = '';
+            const isIpv6 = allCandidates[candidateId].includes(':');
+
+            const server = this.serverInfo.server;
+            if (server && server.region) {
+                text += server.region;
+            }
+
+            text += '@' + (isIpv6 ? 'IPv6' : 'IPv4');
+            this.badges.server.$element = this.renderBadge(StreamBadge.SERVER, text);
         }
     }
 
     static setupEvents() {
-        window.addEventListener(BxEvent.STREAM_PLAYING, e => {
-            const $video = (e as any).$video;
-            const streamBadges = StreamBadges.getInstance();
-
-            streamBadges.#resolution = {
-                width: $video.videoWidth,
-                height: $video.videoHeight,
-            };
-            streamBadges.startTimestamp = +new Date;
-
-            // Get battery level
-            try {
-                STATES.browser.capabilities.batteryApi && (navigator as NavigatorBattery).getBattery().then(bm => {
-                    streamBadges.startBatteryLevel = Math.round(bm.level * 100);
-                });
-            } catch(e) {}
-        });
-
         // Since the Lite version doesn't have the "..." button on System menu
         // we need to display Stream badges in the Guide menu instead
         isLiteVersion() && window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, async e => {

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

@@ -4,92 +4,120 @@ import { t } from "@utils/translation"
 import { STATES } from "@utils/global"
 import { PrefKey } from "@/enums/pref-keys"
 import { getPref } from "@/utils/settings-storages/global-settings-storage"
+import { StreamStat, StreamStatsCollector, type StreamStatGrade } from "@/utils/stream-stats-collector"
 
-export enum StreamStat {
-    PING = 'ping',
-    FPS = 'fps',
-    BITRATE = 'btr',
-    DECODE_TIME = 'dt',
-    PACKETS_LOST = 'pl',
-    FRAMES_LOST = 'fl',
-};
 
 export class StreamStats {
     private static instance: StreamStats;
-    public static getInstance(): StreamStats {
-        if (!StreamStats.instance) {
-            StreamStats.instance = new StreamStats();
-        }
+    public static getInstance = () => StreamStats.instance ?? (StreamStats.instance = new StreamStats());
 
-        return StreamStats.instance;
-    }
+    private intervalId?: number | null;
+    private readonly REFRESH_INTERVAL = 1 * 1000;
 
-    #timeoutId?: number | null;
-    readonly #updateInterval = 1000;
+    private stats = {
+        [StreamStat.CLOCK]: {
+            name: t('clock'),
+            $element: CE('span'),
+        },
+        [StreamStat.PLAYTIME]: {
+            name: t('playtime'),
+            $element: CE('span'),
+        },
+        [StreamStat.BATTERY]: {
+            name: t('battery'),
+            $element: CE('span'),
+        },
+        [StreamStat.PING]: {
+            name: t('stat-ping'),
+            $element: CE('span'),
+        },
+        [StreamStat.JITTER]: {
+            name: t('jitter'),
+            $element: CE('span'),
+        },
+        [StreamStat.FPS]: {
+            name: t('stat-fps'),
+            $element: CE('span'),
+        },
+        [StreamStat.BITRATE]: {
+            name: t('stat-bitrate'),
+            $element: CE('span'),
+        },
+        [StreamStat.DECODE_TIME]: {
+            name: t('stat-decode-time'),
+            $element: CE('span'),
+        },
+        [StreamStat.PACKETS_LOST]: {
+            name: t('stat-packets-lost'),
+            $element: CE('span'),
+        },
+        [StreamStat.FRAMES_LOST]: {
+            name: t('stat-frames-lost'),
+            $element: CE('span'),
+        },
+        [StreamStat.DOWNLOAD]: {
+            name: t('downloaded'),
+            $element: CE('span'),
+        },
+        [StreamStat.UPLOAD]: {
+            name: t('uploaded'),
+            $element: CE('span'),
+        },
+    };
 
-    #$container: HTMLElement | undefined;
-    #$fps: HTMLElement | undefined;
-    #$ping: HTMLElement | undefined;
-    #$dt: HTMLElement | undefined;
-    #$pl: HTMLElement | undefined;
-    #$fl: HTMLElement | undefined;
-    #$br: HTMLElement | undefined;
+    private $container!: HTMLElement;
 
-    #lastVideoStat?: RTCBasicStat | null;
-
-    #quickGlanceObserver?: MutationObserver | null;
+    quickGlanceObserver?: MutationObserver | null;
 
     constructor() {
-        this.#render();
+        this.render();
     }
 
-    start(glancing=false) {
+    async start(glancing=false) {
         if (!this.isHidden() || (glancing && this.isGlancing())) {
             return;
         }
 
-        if (this.#$container) {
-            this.#$container.classList.remove('bx-gone');
-            this.#$container.dataset.display = glancing ? 'glancing' : 'fixed';
+        this.intervalId && clearInterval(this.intervalId);
+        await this.update(true);
+
+        this.$container.classList.remove('bx-gone');
+        this.$container.dataset.display = glancing ? 'glancing' : 'fixed';
+
+        this.intervalId = window.setInterval(this.update.bind(this), this.REFRESH_INTERVAL);
     }
 
-        this.#timeoutId = window.setTimeout(this.#update.bind(this), this.#updateInterval);
-    }
-
-    stop(glancing=false) {
+    async stop(glancing=false) {
         if (glancing && !this.isGlancing()) {
             return;
         }
 
-        this.#timeoutId && clearTimeout(this.#timeoutId);
-        this.#timeoutId = null;
-        this.#lastVideoStat = null;
+        this.intervalId && clearInterval(this.intervalId);
+        this.intervalId = null;
 
-        if (this.#$container) {
-            this.#$container.removeAttribute('data-display');
-            this.#$container.classList.add('bx-gone');
-        }
+        this.$container.removeAttribute('data-display');
+        this.$container.classList.add('bx-gone');
     }
 
-    toggle() {
+    async toggle() {
         if (this.isGlancing()) {
-            this.#$container && (this.#$container.dataset.display = 'fixed');
+            this.$container && (this.$container.dataset.display = 'fixed');
         } else {
-            this.isHidden() ? this.start() : this.stop();
+            this.isHidden() ? await this.start() : await this.stop();
         }
     }
 
-    onStoppedPlaying() {
+    destroy() {
         this.stop();
         this.quickGlanceStop();
         this.hideSettingsUi();
     }
 
-    isHidden = () => this.#$container && this.#$container.classList.contains('bx-gone');
-    isGlancing = () => this.#$container && this.#$container.dataset.display === 'glancing';
+    isHidden = () => this.$container.classList.contains('bx-gone');
+    isGlancing = () => this.$container.dataset.display === 'glancing';
 
     quickGlanceSetup() {
-        if (!STATES.isPlaying || this.#quickGlanceObserver) {
+        if (!STATES.isPlaying || this.quickGlanceObserver) {
             return;
         }
 
@@ -98,9 +126,13 @@ export class StreamStats {
             return;
         }
 
-        this.#quickGlanceObserver = new MutationObserver((mutationList, observer) => {
-            for (let record of mutationList) {
-                if (record.attributeName && record.attributeName === 'aria-expanded') {
+        this.quickGlanceObserver = new MutationObserver((mutationList, observer) => {
+            for (const record of mutationList) {
+                const $target = record.target as HTMLElement;
+                if (!$target.className || !$target.className.startsWith('GripHandle')) {
+                    continue;
+                }
+
                 const expanded = (record.target as HTMLElement).ariaExpanded;
                 if (expanded === 'true') {
                     this.isHidden() && this.start(true);
@@ -108,10 +140,9 @@ export class StreamStats {
                     this.stop(true);
                 }
             }
-            }
         });
 
-        this.#quickGlanceObserver.observe($uiContainer, {
+        this.quickGlanceObserver.observe($uiContainer, {
             attributes: true,
             attributeFilter: ['aria-expanded'],
             subtree: true,
@@ -119,98 +150,52 @@ export class StreamStats {
     }
 
     quickGlanceStop() {
-        this.#quickGlanceObserver && this.#quickGlanceObserver.disconnect();
-        this.#quickGlanceObserver = null;
+        this.quickGlanceObserver && this.quickGlanceObserver.disconnect();
+        this.quickGlanceObserver = null;
     }
 
-    async #update() {
-        if (this.isHidden() || !STATES.currentStream.peerConnection) {
-            this.onStoppedPlaying();
+    private async update(forceUpdate=false) {
+        if ((!forceUpdate && this.isHidden()) || !STATES.currentStream.peerConnection) {
+            this.destroy();
             return;
         }
 
-        this.#timeoutId = null;
-        const startTime = performance.now();
-
         const PREF_STATS_CONDITIONAL_FORMATTING = getPref(PrefKey.STATS_CONDITIONAL_FORMATTING);
+        let grade: StreamStatGrade = '';
 
-        const stats = await STATES.currentStream.peerConnection.getStats();
-        let grade = '';
+        // Collect stats
+        const statsCollector = StreamStatsCollector.getInstance();
+        await statsCollector.collect();
 
-        stats.forEach(stat => {
-            if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
-                // FPS
-                this.#$fps!.textContent = stat.framesPerSecond || 0;
+        let statKey: keyof typeof this.stats;
+        for (statKey in this.stats) {
+            grade = '';
 
-                // Packets Lost
-                const packetsLost = Math.max(0, stat.packetsLost);  // packetsLost can be negative, but we don't care about that
-                const packetsReceived = stat.packetsReceived;
-                const packetsLostPercentage = (packetsLost * 100 / ((packetsLost + packetsReceived) || 1)).toFixed(2);
-                this.#$pl!.textContent = packetsLostPercentage === '0.00' ? packetsLost.toString() : `${packetsLost} (${packetsLostPercentage}%)`;
+            const stat = this.stats[statKey];
+            const value = statsCollector.getStat(statKey);
+            const $element = stat.$element;
+            $element.textContent = value.toString();
 
-                // Frames dropped
-                const framesDropped = stat.framesDropped;
-                const framesReceived = stat.framesReceived;
-                const framesDroppedPercentage = (framesDropped * 100 / ((framesDropped + framesReceived) || 1)).toFixed(2);
-                this.#$fl!.textContent = framesDroppedPercentage === '0.00' ? framesDropped : `${framesDropped} (${framesDroppedPercentage}%)`;
-
-                if (!this.#lastVideoStat) {
-                    this.#lastVideoStat = stat;
-                    return;
+            // Get stat's grade
+            if (PREF_STATS_CONDITIONAL_FORMATTING && 'grades' in value) {
+                grade = statsCollector.calculateGrade(value.current, value.grades);
             }
 
-                const lastStat = this.#lastVideoStat;
-                // Bitrate
-                const timeDiff = stat.timestamp - lastStat.timestamp;
-                const bitrate = 8 * (stat.bytesReceived - lastStat.bytesReceived) / timeDiff / 1000;
-                this.#$br!.textContent = `${bitrate.toFixed(2)} Mbps`;
-
-                // Decode time
-                const totalDecodeTimeDiff = stat.totalDecodeTime - lastStat.totalDecodeTime;
-                const framesDecodedDiff = stat.framesDecoded - lastStat.framesDecoded;
-                const currentDecodeTime = totalDecodeTimeDiff / framesDecodedDiff * 1000;
-
-                if (isNaN(currentDecodeTime)) {
-                    this.#$dt!.textContent = '??ms';
-                } else {
-                    this.#$dt!.textContent = `${currentDecodeTime.toFixed(2)}ms`;
-                }
-
-                if (PREF_STATS_CONDITIONAL_FORMATTING) {
-                    grade = (currentDecodeTime > 12) ? 'bad' : (currentDecodeTime > 9) ? 'ok' : (currentDecodeTime > 6) ? 'good' : '';
-                    this.#$dt!.dataset.grade = grade;
-                }
-
-                this.#lastVideoStat = stat;
-            } else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
-                // Round Trip Time
-                const roundTripTime = !!stat.currentRoundTripTime ? stat.currentRoundTripTime * 1000 : -1;
-                this.#$ping!.textContent = roundTripTime === -1 ? '???' : roundTripTime.toString();
-
-                if (PREF_STATS_CONDITIONAL_FORMATTING) {
-                    grade = (roundTripTime > 100) ? 'bad' : (roundTripTime > 75) ? 'ok' : (roundTripTime > 40) ? 'good' : '';
-                    this.#$ping!.dataset.grade = grade;
+            if ($element.dataset.grade !== grade) {
+                $element.dataset.grade = grade;
             }
         }
-        });
-
-        const lapsedTime = performance.now() - startTime;
-        this.#timeoutId = window.setTimeout(this.#update.bind(this), this.#updateInterval - lapsedTime);
     }
 
     refreshStyles() {
         const PREF_ITEMS = getPref(PrefKey.STATS_ITEMS);
-        const PREF_POSITION = getPref(PrefKey.STATS_POSITION);
-        const PREF_TRANSPARENT = getPref(PrefKey.STATS_TRANSPARENT);
-        const PREF_OPACITY = getPref(PrefKey.STATS_OPACITY);
-        const PREF_TEXT_SIZE = getPref(PrefKey.STATS_TEXT_SIZE);
 
-        const $container = this.#$container!;
+        const $container = this.$container;
         $container.dataset.stats = '[' + PREF_ITEMS.join('][') + ']';
-        $container.dataset.position = PREF_POSITION;
-        $container.dataset.transparent = PREF_TRANSPARENT;
-        $container.style.opacity = PREF_OPACITY + '%';
-        $container.style.fontSize = PREF_TEXT_SIZE;
+        $container.dataset.position = getPref(PrefKey.STATS_POSITION);
+        $container.dataset.transparent = getPref(PrefKey.STATS_TRANSPARENT);
+        $container.style.opacity = getPref(PrefKey.STATS_OPACITY) + '%';
+        $container.style.fontSize = getPref(PrefKey.STATS_TEXT_SIZE);
     }
 
     hideSettingsUi() {
@@ -219,34 +204,25 @@ export class StreamStats {
         }
     }
 
-    #render() {
-        const stats = {
-            [StreamStat.PING]: [t('stat-ping'), this.#$ping = CE('span', {}, '0')],
-            [StreamStat.FPS]: [t('stat-fps'), this.#$fps = CE('span', {}, '0')],
-            [StreamStat.BITRATE]: [t('stat-bitrate'), this.#$br = CE('span', {}, '0 Mbps')],
-            [StreamStat.DECODE_TIME]: [t('stat-decode-time'), this.#$dt = CE('span', {}, '0ms')],
-            [StreamStat.PACKETS_LOST]: [t('stat-packets-lost'), this.#$pl = CE('span', {}, '0')],
-            [StreamStat.FRAMES_LOST]: [t('stat-frames-lost'), this.#$fl = CE('span', {}, '0')],
-        };
+    private async render() {
+        this.$container = CE('div', {class: 'bx-stats-bar bx-gone'});
 
-        const $barFragment = document.createDocumentFragment();
-        let statKey: keyof typeof stats;
-        for (statKey in stats) {
+        let statKey: keyof typeof this.stats;
+        for (statKey in this.stats) {
+            const stat = this.stats[statKey];
             const $div = CE('div', {
-                    'class': `bx-stat-${statKey}`,
-                    title: stats[statKey][0]
+                class: `bx-stat-${statKey}`,
+                title: stat.name,
             },
                 CE('label', {}, statKey.toUpperCase()),
-                stats[statKey][1],
+                stat.$element,
             );
 
-            $barFragment.appendChild($div);
+            this.$container.appendChild($div);
         }
 
-        this.#$container = CE('div', {'class': 'bx-stats-bar bx-gone'}, $barFragment);
         this.refreshStyles();
-
-        document.documentElement.appendChild(this.#$container!);
+        document.documentElement.appendChild(this.$container);
     }
 
     static setupEvents() {
@@ -255,8 +231,8 @@ export class StreamStats {
             const PREF_STATS_SHOW_WHEN_PLAYING = getPref(PrefKey.STATS_SHOW_WHEN_PLAYING);
 
             const streamStats = StreamStats.getInstance();
-            // Setup Stat's Quick Glance mode
 
+            // Setup Stat's Quick Glance mode
             if (PREF_STATS_SHOW_WHEN_PLAYING) {
                 streamStats.start();
             } else if (PREF_STATS_QUICK_GLANCE) {

src/modules/stream/stream-ui.ts

@@ -135,12 +135,6 @@ export class StreamUiHandler {
     }
 
     private static handleSystemMenu($streamHud: HTMLElement) {
-        // Grip handle
-        const $gripHandle = $streamHud.querySelector('button[class^=GripHandle]') as HTMLElement;
-        if (!$gripHandle) {
-            return;
-        }
-
         // Get the last button
         const $orgButton = $streamHud.querySelector('div[class^=HUDButton]') as HTMLElement;
         if (!$orgButton) {
@@ -148,14 +142,14 @@ export class StreamUiHandler {
         }
 
         const hideGripHandle = () => {
-            if (!$gripHandle) {
-                return;
+            // Grip handle
+            const $gripHandle = document.querySelector('#StreamHud button[class^=GripHandle]') as HTMLElement;
+            if ($gripHandle && $gripHandle.ariaExpanded === 'true') {
+                $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
+                $gripHandle.click();
+                $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
+                $gripHandle.click();
             }
-
-            $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
-            $gripHandle.click();
-            $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
-            $gripHandle.click();
         }
 
         // Create Stream Settings button
@@ -178,12 +172,12 @@ export class StreamUiHandler {
         let $btnStreamStats = StreamUiHandler.$btnStreamStats;
         if (typeof $btnStreamStats === 'undefined') {
             $btnStreamStats = StreamUiHandler.cloneStreamHudButton($orgButton, t('stream-stats'), BxIcon.STREAM_STATS);
-            $btnStreamStats?.addEventListener('click', e => {
+            $btnStreamStats?.addEventListener('click', async (e) => {
                 hideGripHandle();
                 e.preventDefault();
 
                 // Toggle Stream Stats
-                streamStats.toggle();
+                await streamStats.toggle();
 
                 const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
                 $btnStreamStats!.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);

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

@@ -88,12 +88,7 @@ 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 static readonly GAMEPAD_POLLING_INTERVAL = 50;
     private static readonly GAMEPAD_KEYS = [

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

@@ -11,12 +11,7 @@ import { BxEvent } from "@/utils/bx-event";
 
 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 STATE_LABELS: Record<RemotePlayConsoleState, string> = {
         [RemotePlayConsoleState.ON]: t('powered-on'),

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";
@@ -37,6 +37,7 @@ type SettingTabContentItem = Partial<{
     content: HTMLElement | (() => HTMLElement);
     options: {[key: string]: string};
     unsupported: boolean;
+    unsupportedNote: string;
     onChange: (e: any, value: number) => void;
     onCreated: (setting: SettingTabContentItem, $control: any) => void;
     params: any;
@@ -46,8 +47,8 @@ type SettingTabContentItem = Partial<{
 type SettingTabContent = {
     group: 'general' | 'server' | 'stream' | 'game-bar' | 'co-op' | 'mkb' | 'touch-control' | 'loading-screen' | 'ui' | 'other' | 'advanced' | 'footer' | 'audio' | 'video' | 'controller' | 'native-mkb' | 'stats' | 'controller-shortcuts';
     label?: string;
-    note?: string | Text | null;
     unsupported?: boolean;
+    unsupportedNote?: string | Text | null;
     helpUrl?: string;
     content?: any;
     items?: Array<SettingTabContentItem | PrefKey | (($parent: HTMLElement) => void) | false>;
@@ -63,12 +64,7 @@ type SettingTab = {
 
 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());
 
     $container!: HTMLElement;
     private $tabs!: HTMLElement;
@@ -220,8 +216,14 @@ export class SettingsNavigationDialog extends NavigationDialog {
         requiredVariants: 'full',
         group: 'mkb',
         label: t('mouse-and-keyboard'),
+        unsupportedNote: !STATES.userAgent.capabilities.mkb ? CE('a', {
+            href: 'https://github.com/redphx/better-xcloud/issues/206#issuecomment-1920475657',
+            target: '_blank',
+        }, '⚠️ ' + t('browser-unsupported-feature')) : null,
+        unsupported: !STATES.userAgent.capabilities.mkb,
         items: [
             PrefKey.NATIVE_MKB_ENABLED,
+            PrefKey.GAME_MSFS2020_FORCE_NATIVE_MKB,
             PrefKey.MKB_ENABLED,
             PrefKey.MKB_HIDE_IDLE_CURSOR,
         ],
@@ -229,8 +231,8 @@ export class SettingsNavigationDialog extends NavigationDialog {
         requiredVariants: 'full',
         group: 'touch-control',
         label: t('touch-controller'),
-        note: !STATES.userAgent.capabilities.touch ? '⚠️ ' + t('device-unsupported-touch') : null,
         unsupported: !STATES.userAgent.capabilities.touch,
+        unsupportedNote: !STATES.userAgent.capabilities.touch ? '⚠️ ' + t('device-unsupported-touch') : null,
         items: [
             PrefKey.STREAM_TOUCH_CONTROLLER,
             PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF,
@@ -244,7 +246,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,
@@ -400,6 +401,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: () => {
@@ -516,17 +522,17 @@ export class SettingsNavigationDialog extends NavigationDialog {
         requiredVariants: 'full',
         group: 'native-mkb',
         label: t('native-mkb'),
-        items: [isFullVersion() && {
+        items: isFullVersion() ? [{
             pref: PrefKey.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY,
             onChange: (e: any, value: number) => {
                 NativeMkbHandler.getInstance().setVerticalScrollMultiplier(value / 100);
             },
-        }, isFullVersion() && {
+        }, {
             pref: PrefKey.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY,
             onChange: (e: any, value: number) => {
                 NativeMkbHandler.getInstance().setHorizontalScrollMultiplier(value / 100);
             },
-        }],
+        }] : [],
     }];
 
     private readonly TAB_SHORTCUTS_ITEMS: Array<SettingTabContent | false> = [{
@@ -1132,6 +1138,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
 
         let label = prefDefinition?.label || setting.label;
         let note = prefDefinition?.note || setting.note;
+        let unsupportedNote = prefDefinition?.unsupportedNote || setting.unsupportedNote;
         const experimental = prefDefinition?.experimental || setting.experimental;
 
         if (settingTabContent.label && setting.pref) {
@@ -1151,6 +1158,13 @@ export class SettingsNavigationDialog extends NavigationDialog {
             }
         }
 
+        let $note;
+        if (unsupportedNote) {
+            $note = CE('div', {class: 'bx-settings-dialog-note'}, unsupportedNote);
+        } else if (note) {
+            $note = CE('div', {class: 'bx-settings-dialog-note'}, note);
+        }
+
         let $label;
 
         const $row = CE('label', {
@@ -1163,7 +1177,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
         },
             $label = CE('span', {class: 'bx-settings-label'},
                 label,
-                note ? CE('div', {class: 'bx-settings-dialog-note'}, note) : prefDefinition?.unsupported && CE('div', {class: 'bx-settings-dialog-note'}, t('browser-unsupported-feature')),
+                $note,
             ),
             !prefDefinition?.unsupported && $control,
         );
@@ -1334,13 +1348,8 @@ export class SettingsNavigationDialog extends NavigationDialog {
                 }
 
                 // Add note
-                if (settingTabContent.note) {
-                    let $note;
-                    if (typeof settingTabContent.note === 'string') {
-                        $note = CE('b', {class: 'bx-note-unsupported'}, settingTabContent.note);
-                    } else {
-                        $note = settingTabContent.note;
-                    }
+                if (settingTabContent.unsupportedNote) {
+                    const $note = CE('b', {class: 'bx-note-unsupported'}, settingTabContent.unsupportedNote);
 
                     $tabContent.appendChild($note);
                 }

src/modules/ui/fullscreen-text.ts

@@ -2,12 +2,7 @@ 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());
 
     $text: HTMLElement;
 

src/modules/ui/game-tile.ts

@@ -1,27 +1,11 @@
 import { BxEvent } from "@/utils/bx-event";
 import { BxIcon } from "@/utils/bx-icon";
-import { CE, createSvgIcon, getReactProps, isElementVisible } from "@/utils/html";
+import { CE, createSvgIcon, getReactProps, isElementVisible, secondsToHms } from "@/utils/html";
 import { XcloudApi } from "@/utils/xcloud-api";
 
 export class GameTile {
     static #timeout: number | null;
 
-    static #secondsToHms(seconds: number) {
-        let h = Math.floor(seconds / 3600);
-        seconds %= 3600;
-        let m = Math.floor(seconds / 60);
-        let s = seconds % 60;
-
-        const output = [];
-        h > 0 && output.push(`${h}h`);
-        m > 0 && output.push(`${m}m`);
-        if (s > 0 || output.length === 0) {
-            output.push(`${s}s`);
-        }
-
-        return output.join(' ');
-    }
-
     static async #showWaitTime($elm: HTMLElement, productId: string) {
         if (($elm as any).hasWaitTime) {
             return;
@@ -42,7 +26,7 @@ export class GameTile {
         if (typeof totalWaitTime === 'number' && isElementVisible($elm)) {
             const $div = CE('div', {'class': 'bx-game-tile-wait-time'},
                 createSvgIcon(BxIcon.PLAYTIME),
-                CE('span', {}, GameTile.#secondsToHms(totalWaitTime)),
+                CE('span', {}, secondsToHms(totalWaitTime)),
             );
             $elm.insertAdjacentElement('afterbegin', $div);
         }

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

@@ -46,6 +46,7 @@ type BxStates = {
         isTv: boolean;
         capabilities: {
             touch: boolean;
+            mkb: boolean;
         };
     };
 

src/types/preferences.d.ts

@@ -3,7 +3,8 @@ export type PreferenceSetting = {
     optionsGroup?: string;
     options?: {[index: string]: string};
     multipleOptions?: {[index: string]: string};
-    unsupported?: string | boolean;
+    unsupported?: boolean;
+    unsupported_note?: string | HTMLElement;
     note?: string | HTMLElement;
     type?: SettingElementType;
     ready?: (setting: PreferenceSetting) => void;

src/types/setting-definition.d.ts

@@ -20,7 +20,8 @@ export type SettingDefinition = {
     label: string;
     note: string | HTMLElement;
     experimental: boolean;
-    unsupported: string | boolean;
+    unsupported: boolean;
+    unsupportedNote: string | HTMLElement;
     suggest: PartialRecord<SuggestedSettingCategory, any>,
     ready: (setting: SettingDefinition) => void;
     type: SettingElementType,

src/types/stream-stats.d.ts

@@ -3,6 +3,8 @@ type RTCBasicStat = {
     bytesReceived: number,
     clockRate: number,
     codecId: string,
+    frameWidth: number,
+    frameHeight: number,
     framesDecoded: number,
     id: string,
     kind: string,

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

@@ -5,22 +5,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) {
+        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/global.ts

@@ -13,6 +13,7 @@ const isTv = userAgent.includes('smart-tv') || userAgent.includes('smarttv') ||
 const isVr = window.navigator.userAgent.includes('VR') && window.navigator.userAgent.includes('OculusBrowser');
 const browserHasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 const userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport;
+const supportMkb = AppInterface || !userAgent.match(/(android|iphone|ipad)/);
 
 export const STATES: BxStates = {
     supportedRegion: true,
@@ -35,6 +36,7 @@ export const STATES: BxStates = {
         isTv: isTv,
         capabilities: {
             touch: userAgentHasTouchSupport,
+            mkb: supportMkb,
         }
     },
 

src/utils/html.ts

@@ -101,16 +101,14 @@ 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;
@@ -181,9 +179,47 @@ export function clearFocus() {
     }
 }
 
-
 export function clearDataSet($elm: HTMLElement) {
     Object.keys($elm.dataset).forEach(key => {
         delete $elm.dataset[key];
     });
 }
+
+// https://stackoverflow.com/a/20732091
+const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
+export function humanFileSize(size: number) {
+    const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
+    return (size / Math.pow(1024, i)).toFixed(2) + ' ' + FILE_SIZE_UNITS[i];
+}
+
+export function secondsToHm(seconds: number) {
+    let h = Math.floor(seconds / 3600);
+    let m = Math.floor(seconds % 3600 / 60) + 1;
+
+    if (m === 60) {
+        h += 1;
+        m = 0;
+    }
+
+    const output = [];
+    h > 0 && output.push(`${h}h`);
+    m > 0 && output.push(`${m}m`);
+
+    return output.join(' ');
+}
+
+export function secondsToHms(seconds: number) {
+    let h = Math.floor(seconds / 3600);
+    seconds %= 3600;
+    let m = Math.floor(seconds / 60);
+    let s = seconds % 60;
+
+    const output = [];
+    h > 0 && output.push(`${h}h`);
+    m > 0 && output.push(`${m}m`);
+    if (s > 0 || output.length === 0) {
+        output.push(`${s}s`);
+    }
+
+    return output.join(' ');
+}

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.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.ts

@@ -64,7 +64,7 @@ export class Screenshot {
         const canvasContext = Screenshot.#canvasContext;
 
         if ($player instanceof HTMLCanvasElement) {
-            streamPlayer.getWebGL2Player().drawFrame();
+            streamPlayer.getWebGL2Player().drawFrame(true);
         }
         canvasContext.drawImage($player, 0, 0, $canvas.width, $canvas.height);
 

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

@@ -3,7 +3,6 @@ import { PrefKey, StorageKey } from "@/enums/pref-keys";
 import { StreamPlayerType, StreamVideoProcessing } from "@/enums/stream-player";
 import { UiSection } from "@/enums/ui-sections";
 import { UserAgentProfile } from "@/enums/user-agent";
-import { StreamStat } from "@/modules/stream/stream-stats";
 import { type SettingDefinition, type SettingDefinitions } from "@/types/setting-definition";
 import { BX_FLAGS } from "../bx-flags";
 import { STATES, AppInterface, STORAGE } from "../global";
@@ -12,6 +11,7 @@ import { t, SUPPORTED_LANGUAGES } from "../translation";
 import { UserAgent } from "../user-agent";
 import { BaseSettingsStore as BaseSettingsStorage } from "./base-settings-storage";
 import { SettingElementType } from "../setting-element";
+import { StreamStat } from "../stream-stats-collector";
 
 
 export const enum StreamResolution {
@@ -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'),
@@ -96,7 +100,7 @@ function getSupportedCodecProfiles() {
 }
 
 export class GlobalSettingsStorage extends BaseSettingsStorage {
-    private static readonly DEFINITIONS: SettingDefinitions = {
+    private static readonly DEFINITIONS = {
         [PrefKey.LAST_UPDATE_CHECK]: {
             default: 0,
         },
@@ -182,7 +186,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
 
                 if (keys.length <= 1) { // Unsupported
                     setting.unsupported = true;
-                    setting.note = '⚠️ ' + t('browser-unsupported-feature');
+                    setting.unsupportedNote = '⚠️ ' + t('browser-unsupported-feature');
                 }
 
                 setting.suggest = {
@@ -323,12 +327,12 @@ 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]: {
@@ -393,10 +397,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             requiredVariants: 'full',
             label: t('enable-mkb'),
             default: false,
-            unsupported: ((): string | boolean => {
-                const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
-                return !AppInterface && userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
-            })(),
+            unsupported: !STATES.userAgent.capabilities.mkb,
             ready: (setting: SettingDefinition) => {
                 let note;
                 let url;
@@ -408,7 +409,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                     url = 'https://better-xcloud.github.io/mouse-and-keyboard/#disclaimer';
                 }
 
-                setting.note = CE('a', {
+                setting.unsupportedNote = CE('a', {
                         href: url,
                         target: '_blank',
                     }, '⚠️ ' + note);
@@ -532,12 +533,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'),
@@ -619,6 +614,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,
@@ -634,7 +644,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             },
             suggest: {
                 lowest: 0,
-                highest: 4,
+                highest: 2,
             },
         },
         [PrefKey.VIDEO_RATIO]: {
@@ -713,16 +723,29 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             label: t('stats'),
             default: [StreamStat.PING, StreamStat.FPS, StreamStat.BITRATE, StreamStat.DECODE_TIME, StreamStat.PACKETS_LOST, StreamStat.FRAMES_LOST],
             multipleOptions: {
+                [StreamStat.CLOCK]: `${StreamStat.CLOCK.toUpperCase()}: ${t('clock')}`,
+                [StreamStat.PLAYTIME]: `${StreamStat.PLAYTIME.toUpperCase()}: ${t('playtime')}`,
+                [StreamStat.BATTERY]: `${StreamStat.BATTERY.toUpperCase()}: ${t('battery')}`,
                 [StreamStat.PING]: `${StreamStat.PING.toUpperCase()}: ${t('stat-ping')}`,
+                [StreamStat.JITTER]: `${StreamStat.JITTER.toUpperCase()}: ${t('jitter')}`,
                 [StreamStat.FPS]: `${StreamStat.FPS.toUpperCase()}: ${t('stat-fps')}`,
                 [StreamStat.BITRATE]: `${StreamStat.BITRATE.toUpperCase()}: ${t('stat-bitrate')}`,
                 [StreamStat.DECODE_TIME]: `${StreamStat.DECODE_TIME.toUpperCase()}: ${t('stat-decode-time')}`,
                 [StreamStat.PACKETS_LOST]: `${StreamStat.PACKETS_LOST.toUpperCase()}: ${t('stat-packets-lost')}`,
                 [StreamStat.FRAMES_LOST]: `${StreamStat.FRAMES_LOST.toUpperCase()}: ${t('stat-frames-lost')}`,
+                [StreamStat.DOWNLOAD]: `${StreamStat.DOWNLOAD.toUpperCase()}: ${t('downloaded')}`,
+                [StreamStat.UPLOAD]: `${StreamStat.UPLOAD.toUpperCase()}: ${t('uploaded')}`,
             },
             params: {
                 size: 6,
             },
+            ready: setting => {
+                // Remove Battery option in unsupported browser
+                const multipleOptions = (setting as any).multipleOptions;
+                if (!STATES.browser.capabilities.batteryApi) {
+                    delete multipleOptions[StreamStat.BATTERY];
+                }
+            },
         },
         [PrefKey.STATS_SHOW_WHEN_PLAYING]: {
             label: t('show-stats-on-startup'),
@@ -792,7 +815,14 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             default: false,
             note: t('fortnite-allow-stw-mode'),
         },
-    };
+
+        [PrefKey.GAME_MSFS2020_FORCE_NATIVE_MKB]: {
+            requiredVariants: 'full',
+            label: '✈️ ' + t('msfs2020-force-native-mkb'),
+            default: false,
+            note: t('may-not-work-properly'),
+        },
+    } satisfies SettingDefinitions;
 
     constructor() {
         super(StorageKey.GLOBAL, GlobalSettingsStorage.DEFINITIONS);

src/utils/stream-stats-collector.ts

@@ -0,0 +1,326 @@
+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";
+
+export enum StreamStat {
+    PING = 'ping',
+    JITTER = 'jit',
+    FPS = 'fps',
+    BITRATE = 'btr',
+    DECODE_TIME = 'dt',
+    PACKETS_LOST = 'pl',
+    FRAMES_LOST = 'fl',
+    DOWNLOAD = 'dl',
+    UPLOAD = 'ul',
+    PLAYTIME = 'play',
+    BATTERY = 'batt',
+    CLOCK = 'time',
+};
+
+export type StreamStatGrade = '' | 'bad' | 'ok' | 'good';
+
+type CurrentStats = {
+    [StreamStat.PING]: {
+        current: number;
+        grades: [number, number, number];
+        toString: () => string;
+    };
+
+    [StreamStat.JITTER]: {
+        current: number;
+        grades: [number, number, number];
+        toString: () => string;
+    };
+
+    [StreamStat.FPS]: {
+        current: number;
+        toString: () => string;
+    };
+
+    [StreamStat.BITRATE]: {
+        current: number;
+        toString: () => string;
+    };
+
+    [StreamStat.FRAMES_LOST]: {
+        received: number;
+        dropped: number;
+        toString: () => string;
+    };
+
+    [StreamStat.PACKETS_LOST]: {
+        received: number;
+        dropped: number;
+        toString: () => string;
+    };
+
+    [StreamStat.DECODE_TIME]: {
+        current: number;
+        total: number;
+        grades: [number, number, number];
+        toString: () => string;
+    };
+
+    [StreamStat.DOWNLOAD]: {
+        total: number;
+        toString: () => string;
+    };
+
+    [StreamStat.UPLOAD]: {
+        total: number;
+        toString: () => string;
+    };
+
+    [StreamStat.PLAYTIME]: {
+        seconds: number;
+        startTime: number;
+        toString: () => string;
+    };
+
+    [StreamStat.BATTERY]: {
+        current: number;
+        start: number;
+        isCharging: boolean;
+        toString: () => string;
+    },
+
+    [StreamStat.CLOCK]: {
+        toString: () => string;
+    },
+};
+
+
+export class StreamStatsCollector {
+    private static instance: StreamStatsCollector;
+    public static getInstance = () => StreamStatsCollector.instance ?? (StreamStatsCollector.instance = new StreamStatsCollector());
+
+    // Collect in background - 60 seconds
+    static readonly INTERVAL_BACKGROUND = 60 * 1000;
+
+    public calculateGrade(value: number, grades: [number, number, number]): StreamStatGrade {
+        return (value > grades[2]) ? 'bad' : (value > grades[1]) ? 'ok' : (value > grades[0]) ? 'good' : '';
+    }
+
+    private currentStats: CurrentStats = {
+        [StreamStat.PING]: {
+            current: -1,
+            grades: [40, 75, 100],
+            toString() {
+                return this.current === -1 ? '???' : this.current.toString();
+            },
+        },
+
+        [StreamStat.JITTER]: {
+            current: 0,
+            grades: [30, 40, 60],
+            toString() {
+                return `${this.current.toFixed(2)}ms`;
+            },
+        },
+
+        [StreamStat.FPS]: {
+            current: 0,
+            toString() {
+                const maxFps = getPref(PrefKey.VIDEO_MAX_FPS);
+                return maxFps < 60 ? `${maxFps}/${this.current}` : this.current.toString();
+            },
+        },
+
+        [StreamStat.BITRATE]: {
+            current: 0,
+            toString() {
+                return `${this.current.toFixed(2)} Mbps`;
+            },
+        },
+
+        [StreamStat.FRAMES_LOST]: {
+            received: 0,
+            dropped: 0,
+            toString() {
+                const framesDroppedPercentage = (this.dropped * 100 / ((this.dropped + this.received) || 1)).toFixed(2);
+                return framesDroppedPercentage === '0.00' ? this.dropped.toString() : `${this.dropped} (${framesDroppedPercentage}%)`;
+            },
+        },
+
+        [StreamStat.PACKETS_LOST]: {
+            received: 0,
+            dropped: 0,
+            toString() {
+                const packetsLostPercentage = (this.dropped * 100 / ((this.dropped + this.received) || 1)).toFixed(2);
+                return packetsLostPercentage === '0.00' ? this.dropped.toString() : `${this.dropped} (${packetsLostPercentage}%)`;
+            },
+        },
+
+        [StreamStat.DECODE_TIME]: {
+            current: 0,
+            total: 0,
+            grades: [6, 9, 12],
+            toString() {
+                return isNaN(this.current) ? '??ms' : `${this.current.toFixed(2)}ms`;
+            },
+        },
+
+        [StreamStat.DOWNLOAD]: {
+            total: 0,
+            toString() {
+                return humanFileSize(this.total);
+            },
+        },
+
+        [StreamStat.UPLOAD]: {
+            total: 0,
+            toString() {
+                return humanFileSize(this.total);
+            },
+        },
+
+        [StreamStat.PLAYTIME]: {
+            seconds: 0,
+            startTime: 0,
+            toString() {
+                return secondsToHm(this.seconds);
+            },
+        },
+
+        [StreamStat.BATTERY]: {
+            current: 100,
+            start: 100,
+            isCharging: false,
+            toString() {
+                let text = `${this.current}%`;
+
+                if (this.current !== this.start) {
+                    const diffLevel = Math.round(this.current - this.start);
+                    const sign = diffLevel > 0 ? '+' : '';
+                    text += ` (${sign}${diffLevel}%)`;
+                }
+
+                return text;
+            },
+        },
+
+        [StreamStat.CLOCK]: {
+            toString() {
+                return new Date().toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute:'2-digit',
+                    hour12: false,
+                });
+            }
+        },
+    };
+
+    private lastVideoStat?: RTCInboundRtpStreamStats | null;
+
+    async collect() {
+        const stats = await STATES.currentStream.peerConnection?.getStats();
+        if (!stats) {
+            return;
+        }
+
+        stats.forEach(stat => {
+            if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
+                // FPS
+                const fps = this.currentStats[StreamStat.FPS];
+                fps.current = stat.framesPerSecond || 0;
+
+                // Packets Lost
+                // packetsLost can be negative, but we don't care about that
+                const pl = this.currentStats[StreamStat.PACKETS_LOST];
+                pl.dropped = Math.max(0, stat.packetsLost);
+                pl.received = stat.packetsReceived;
+
+                // Frames lost
+                const fl = this.currentStats[StreamStat.FRAMES_LOST];
+                fl.dropped = stat.framesDropped;
+                fl.received = stat.framesReceived;
+
+                if (!this.lastVideoStat) {
+                    this.lastVideoStat = stat;
+                    return;
+                }
+
+                const lastStat = this.lastVideoStat;
+
+                // Jitter
+                const jit = this.currentStats[StreamStat.JITTER];
+                const bufferDelayDiff = (stat as RTCInboundRtpStreamStats).jitterBufferDelay! - lastStat.jitterBufferDelay!;
+                const emittedCountDiff = (stat as RTCInboundRtpStreamStats).jitterBufferEmittedCount! - lastStat.jitterBufferEmittedCount!;
+                if (emittedCountDiff > 0) {
+                    jit.current = bufferDelayDiff / emittedCountDiff * 1000;
+                }
+
+                // Bitrate
+                const btr = this.currentStats[StreamStat.BITRATE];
+                const timeDiff = stat.timestamp - lastStat.timestamp;
+                btr.current = 8 * (stat.bytesReceived - lastStat.bytesReceived!) / timeDiff / 1000;
+
+                // Decode time
+                const dt = this.currentStats[StreamStat.DECODE_TIME];
+                dt.total = stat.totalDecodeTime - lastStat.totalDecodeTime!;
+                const framesDecodedDiff = stat.framesDecoded - lastStat.framesDecoded!;
+                dt.current = dt.total / framesDecodedDiff * 1000;
+
+                this.lastVideoStat = stat;
+            } else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
+                // Round Trip Time
+                const ping = this.currentStats[StreamStat.PING];
+                ping.current = stat.currentRoundTripTime ? stat.currentRoundTripTime * 1000 : -1;
+
+                // Download
+                const dl = this.currentStats[StreamStat.DOWNLOAD];
+                dl.total = stat.bytesReceived;
+
+                // Upload
+                const ul = this.currentStats[StreamStat.UPLOAD];
+                ul.total = stat.bytesSent;
+            }
+        });
+
+        // Battery
+        let batteryLevel = 100;
+        let isCharging = false;
+        if (STATES.browser.capabilities.batteryApi) {
+            try {
+                const bm = await (navigator as NavigatorBattery).getBattery();
+                isCharging = bm.charging;
+                batteryLevel = Math.round(bm.level * 100);
+            } catch(e) {}
+        }
+
+        const battery = this.currentStats[StreamStat.BATTERY];
+        battery.current = batteryLevel;
+        battery.isCharging = isCharging;
+
+        // Playtime
+        const playTime = this.currentStats[StreamStat.PLAYTIME];
+        const now = +new Date;
+        playTime.seconds = Math.ceil((now - playTime.startTime) / 1000);
+    }
+
+    getStat<T extends StreamStat>(kind: T): CurrentStats[T] {
+        return this.currentStats[kind];
+    }
+
+    reset() {
+        const playTime = this.currentStats[StreamStat.PLAYTIME];
+        playTime.seconds = 0;
+        playTime.startTime = +new Date;
+
+        // Get battery level
+        try {
+            STATES.browser.capabilities.batteryApi && (navigator as NavigatorBattery).getBattery().then(bm => {
+                this.currentStats[StreamStat.BATTERY].start = Math.round(bm.level * 100);
+            });
+        } catch(e) {}
+    }
+
+    static setupEvents() {
+        window.addEventListener(BxEvent.STREAM_PLAYING, e => {
+            const statsCollector = StreamStatsCollector.getInstance();
+            statsCollector.reset();
+        });
+    }
+}

src/utils/toast.ts

@@ -6,14 +6,14 @@ 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 $wrapper: HTMLElement;
+    private static $msg: HTMLElement;
+    private static $status: HTMLElement;
+    private static stack: Array<[string, string, ToastOptions]> = [];
+    private static isShowing = false;
 
-    static #timeout?: number | null;
-    static #DURATION = 3000;
+    private static timeout?: number | null;
+    private static DURATION = 3000;
 
     static show(msg: string, status?: string, options: Partial<ToastOptions> = {}) {
         options = options || {};
@@ -21,69 +21,70 @@ export class Toast {
         const args = Array.from(arguments) as [string, string, ToastOptions];
         if (options.instant) {
             // Clear stack
-            Toast.#stack = [args];
-            Toast.#showNext();
+            Toast.stack = [args];
+            Toast.showNext();
         } else {
-            Toast.#stack.push(args);
-            !Toast.#isShowing && Toast.#showNext();
+            Toast.stack.push(args);
+            !Toast.isShowing && Toast.showNext();
         }
     }
 
-    static #showNext() {
-        if (!Toast.#stack.length) {
-            Toast.#isShowing = false;
+    private static showNext() {
+        if (!Toast.stack.length) {
+            Toast.isShowing = false;
             return;
         }
 
-        Toast.#isShowing = true;
+        Toast.isShowing = true;
 
-        Toast.#timeout && clearTimeout(Toast.#timeout);
-        Toast.#timeout = window.setTimeout(Toast.#hide, Toast.#DURATION);
+        Toast.timeout && clearTimeout(Toast.timeout);
+        Toast.timeout = window.setTimeout(Toast.hide, Toast.DURATION);
 
         // Get values from item
-        const [msg, status, options] = Toast.#stack.shift()!;
+        const [msg, status, options] = Toast.stack.shift()!;
 
         if (options && options.html) {
-            Toast.#$msg.innerHTML = msg;
+            Toast.$msg.innerHTML = msg;
         } else {
-            Toast.#$msg.textContent = msg;
+            Toast.$msg.textContent = msg;
         }
 
         if (status) {
-            Toast.#$status.classList.remove('bx-gone');
-            Toast.#$status.textContent = status;
+            Toast.$status.classList.remove('bx-gone');
+            Toast.$status.textContent = status;
         } else {
-            Toast.#$status.classList.add('bx-gone');
+            Toast.$status.classList.add('bx-gone');
         }
 
-        const classList = Toast.#$wrapper.classList;
+        const classList = Toast.$wrapper.classList;
         classList.remove('bx-offscreen', 'bx-hide');
         classList.add('bx-show');
     }
 
-    static #hide() {
-        Toast.#timeout = null;
+    private static hide() {
+        Toast.timeout = null;
 
-        const classList = Toast.#$wrapper.classList;
+        const classList = Toast.$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'}));
+        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'}),
+        );
 
-        Toast.#$wrapper.addEventListener('transitionend', e => {
-            const classList = Toast.#$wrapper.classList;
+        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();
+                Toast.showNext();
             }
         });
 
-        document.documentElement.appendChild(Toast.#$wrapper);
+        document.documentElement.appendChild(Toast.$wrapper);
     }
 }

src/utils/translation.ts

@@ -40,13 +40,7 @@ const Texts = {
     "auto": "Auto",
     "back-to-home": "Back to home",
     "back-to-home-confirm": "Do you want to go back to the home page (without disconnecting)?",
-    "badge-audio": "Audio",
-    "badge-battery": "Battery",
-    "badge-in": "In",
-    "badge-out": "Out",
-    "badge-playtime": "Playtime",
-    "badge-server": "Server",
-    "badge-video": "Video",
+    "battery": "Battery",
     "battery-saving": "Battery saving",
     "better-xcloud": "Better xCloud",
     "bitrate-audio-maximum": "Maximum audio bitrate",
@@ -63,6 +57,7 @@ const Texts = {
     "clarity-boost": "Clarity boost",
     "clarity-boost-warning": "These settings don't work when the Clarity Boost mode is ON",
     "clear": "Clear",
+    "clock": "Clock",
     "close": "Close",
     "close-app": "Close app",
     "combine-audio-video-streams": "Combine audio & video streams",
@@ -97,10 +92,12 @@ const Texts = {
     "disable-xcloud-analytics": "Disable xCloud analytics",
     "disabled": "Disabled",
     "disconnected": "Disconnected",
+    "download": "Download",
+    "downloaded": "Downloaded",
     "edit": "Edit",
     "enable-controller-shortcuts": "Enable controller shortcuts",
     "enable-local-co-op-support": "Enable local co-op support",
-    "enable-local-co-op-support-note": "Only works if the game doesn't require a different profile",
+    "enable-local-co-op-support-note": "Only works with some games",
     "enable-mic-on-startup": "Enable microphone on game launch",
     "enable-mkb": "Emulate controller with Mouse & Keyboard",
     "enable-quick-glance-mode": "Enable \"Quick Glance\" mode",
@@ -110,7 +107,7 @@ const Texts = {
     "experimental": "Experimental",
     "export": "Export",
     "fast": "Fast",
-    "fortnite-allow-stw-mode": "Allows playing STW mode on mobile",
+    "fortnite-allow-stw-mode": "Allows playing \"Save the World\" mode on mobile",
     "fortnite-force-console-version": "Fortnite: force console version",
     "game-bar": "Game Bar",
     "getting-consoles-list": "Getting the list of consoles...",
@@ -134,6 +131,7 @@ const Texts = {
     "increase": "Increase",
     "install-android": "Better xCloud app for Android",
     "japan": "Japan",
+    "jitter": "Jitter",
     "keyboard-shortcuts": "Keyboard shortcuts",
     "korea": "Korea",
     "language": "Language",
@@ -145,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",
@@ -153,6 +152,7 @@ const Texts = {
     "mkb-disclaimer": "Using this feature when playing online could be viewed as cheating",
     "mouse-and-keyboard": "Mouse & Keyboard",
     "mouse-wheel": "Mouse wheel",
+    "msfs2020-force-native-mkb": "MSFS2020: force native M&KB support",
     "muted": "Muted",
     "name": "Name",
     "native-mkb": "Native Mouse & Keyboard",
@@ -172,7 +172,7 @@ const Texts = {
         (e: any) => `Versão ${e.version} disponível`,
         ,
         (e: any) => `เวอร์ชัน ${e.version} พร้อมใช้งานแล้ว`,
-        ,
+        (e: any) => `${e.version} sayılı yeni sürüm mevcut`,
         (e: any) => `Доступна версія ${e.version}`,
         (e: any) => `Đã có phiên bản ${e.version}`,
         (e: any) => `版本 ${e.version} 可供更新`,
@@ -186,6 +186,7 @@ const Texts = {
     "opacity": "Opacity",
     "other": "Other",
     "playing": "Playing",
+    "playtime": "Playtime",
     "poland": "Poland",
     "position": "Position",
     "powered-off": "Powered off",
@@ -350,6 +351,8 @@ const Texts = {
     "unlimited": "Unlimited",
     "unmuted": "Unmuted",
     "unsharp-masking": "Unsharp masking",
+    "upload": "Upload",
+    "uploaded": "Uploaded",
     "use-mouse-absolute-position": "Use mouse's absolute position",
     "use-this-at-your-own-risk": "Use this at your own risk",
     "user-agent-profile": "User-Agent profile",

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

@@ -3,21 +3,14 @@ import { STATES } from "./global";
 
 export class XcloudApi {
     private static instance: XcloudApi;
+    public static getInstance = () => XcloudApi.instance ?? (XcloudApi.instance = new XcloudApi());
 
-    public static getInstance(): XcloudApi {
-        if (!XcloudApi.instance) {
-            XcloudApi.instance = new XcloudApi();
-        }
-
-        return XcloudApi.instance;
-    }
-
-    #CACHE_TITLES: {[key: string]: XcloudTitleInfo} = {};
-    #CACHE_WAIT_TIME: {[key: string]: XcloudWaitTimeInfo} = {};
+    private CACHE_TITLES: {[key: string]: XcloudTitleInfo} = {};
+    private 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 +38,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 +66,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,7 @@ class XcloudInterceptor {
         return response;
     }
 
-    static async #handlePlay(request: RequestInfo | URL, init?: RequestInit) {
+    private static async handlePlay(request: RequestInfo | URL, init?: RequestInit) {
         const PREF_STREAM_TARGET_RESOLUTION = getPref(PrefKey.STREAM_TARGET_RESOLUTION);
         const PREF_STREAM_PREFERRED_LOCALE = getPref(PrefKey.STREAM_PREFERRED_LOCALE);
 
@@ -129,7 +129,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 +143,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);
         }
@@ -213,13 +213,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,7 +52,7 @@ export class XhomeInterceptor {
         },
     };
 
-    static async #handleLogin(request: Request) {
+    private static async handleLogin(request: Request) {
         try {
             const clone = (request as Request).clone();
 
@@ -74,7 +74,7 @@ export class XhomeInterceptor {
         return NATIVE_FETCH(request);
     }
 
-    static async #handleConfiguration(request: Request | URL) {
+    private static async handleConfiguration(request: Request | URL) {
         const response = await NATIVE_FETCH(request);
 
         const obj = await response.clone().json()
@@ -90,15 +90,15 @@ export class XhomeInterceptor {
 
         const serverDetails = obj.serverDetails;
         if (serverDetails.ipAddress) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipAddress] = processPorts(serverDetails.port);
+            XhomeInterceptor.consoleAddrs[serverDetails.ipAddress] = processPorts(serverDetails.port);
         }
 
         if (serverDetails.ipV4Address) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipV4Address] = processPorts(serverDetails.ipV4Port);
+            XhomeInterceptor.consoleAddrs[serverDetails.ipV4Address] = processPorts(serverDetails.ipV4Port);
         }
 
         if (serverDetails.ipV6Address) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipV6Address] = processPorts(serverDetails.ipV6Port);
+            XhomeInterceptor.consoleAddrs[serverDetails.ipV6Address] = processPorts(serverDetails.ipV6Port);
         }
 
         response.json = () => Promise.resolve(obj);
@@ -107,7 +107,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 +144,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 +163,7 @@ export class XhomeInterceptor {
         return NATIVE_FETCH(request);
     }
 
-    static async #handlePlay(request: RequestInfo | URL) {
+    private static async handlePlay(request: RequestInfo | URL) {
         const clone = (request as Request).clone();
         const body = await clone.json();
 
@@ -216,17 +216,17 @@ export class XhomeInterceptor {
 
         // 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);
+            return XhomeInterceptor.handleTitles(request);
         } else if (url && url.endsWith('/ice') && url.includes('/sessions/') && (request as Request).method === 'GET') {
-            return patchIceCandidates(request, XhomeInterceptor.#consoleAddrs);
+            return patchIceCandidates(request, XhomeInterceptor.consoleAddrs);
         }
 
         return await NATIVE_FETCH(request);