Bump version to 5.8.4

Refactor Game Bar actions
Update version
2025-06-29 10:51:44 +02:00 · 2024-10-13 20:00:36 +07:00 · 2024-10-13 19:15:29 +07:00 · 2024-10-13 17:46:48 +07:00 · 2024-10-13 17:32:38 +07:00 · 2024-10-13 17:05:27 +07:00
47 changed files with 1331 additions and 1045 deletions
--- a/build.ts
+++ b/build.ts
@ -55,7 +55,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, '');

@ -76,6 +76,17 @@ const postProcess = (str: string): string => {
    // 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();
+    });
+
    assert(str.includes('/* ADDITIONAL CODE */'));
    assert(str.includes('window.BX_EXPOSED = BxExposed'));
    assert(str.includes('window.BxEvent = BxEvent'));
@ -139,7 +150,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));
    }

--- a/bun.lockb
+++ b/bun.lockb
--- a/dist/better-xcloud.lite.meta.js
+++ b/dist/better-xcloud.lite.meta.js
@ -1,5 +0,0 @@
-// ==UserScript==
-// @name         Better xCloud
-// @namespace    https://github.com/redphx
-// @version      5.8.0
-// ==/UserScript==
--- a/dist/better-xcloud.lite.user.js
+++ b/dist/better-xcloud.lite.user.js
--- a/dist/better-xcloud.meta.js
+++ b/dist/better-xcloud.meta.js
@ -1,5 +1,5 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      5.8.0
+// @version      5.8.4
 // ==/UserScript==
--- a/dist/better-xcloud.user.js
+++ b/dist/better-xcloud.user.js
--- a/package.json
+++ b/package.json
@ -11,7 +11,7 @@
  },
  "devDependencies": {
    "@types/bun": "^1.1.10",
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.7.5",
    "@types/stylus": "^0.48.43",
    "eslint": "^9.12.0",
    "eslint-plugin-compat": "^6.0.1",
--- a/src/assets/css/game-bar.styl
+++ b/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;
            }
--- a/src/assets/css/number-stepper.styl
+++ b/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;
    }

--- a/src/assets/css/stream-stats.styl
+++ b/src/assets/css/stream-stats.styl
@ -91,6 +91,7 @@ div[class^=StreamMenu-module__container] .bx-badges {
    &[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,
@ -106,6 +107,7 @@ div[class^=StreamMenu-module__container] .bx-badges {
    &[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,
--- a/src/assets/svg/eye-slash.svg
+++ b/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>
--- a/src/assets/svg/eye.svg
+++ b/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>
--- a/src/enums/pref-keys.ts
+++ b/src/enums/pref-keys.ts
@ -75,6 +75,7 @@ export enum PrefKey {
    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 +99,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',
 }
--- a/src/index.ts
+++ b/src/index.ts
@ -378,6 +378,10 @@ function waitForRootDialog() {


 function main() {
+    if (getPref(PrefKey.GAME_MSFS2020_FORCE_NATIVE_MKB)) {
+        BX_FLAGS.ForceNativeMkbTitles.push('9PMQDM08SNK9');
+    }
+
    // Monkey patches
    patchRtcPeerConnection();
    patchRtcCodecs();
--- a/src/modules/controller-shortcut.ts
+++ b/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;
    }
--- a/src/modules/game-bar/action-base.ts
+++ b/src/modules/game-bar/action-base.ts
@ -1,6 +1,12 @@
+import { BxEvent } from "@/utils/bx-event";
+
 export abstract class BaseGameBarAction {
    constructor() {}
    reset() {}

+    onClick(e: Event) {
+        BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+    };
+
    abstract render(): HTMLElement;
 }
--- a/src/modules/game-bar/action-microphone.ts
+++ b/src/modules/game-bar/action-microphone.ts
@ -13,29 +13,22 @@ export class MicrophoneAction extends BaseGameBarAction {
    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,
+            $btnDefault,
        );

        this.reset();
@ -43,14 +36,19 @@ export class MicrophoneAction extends BaseGameBarAction {
        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');
        });
    }

+    onClick(e: Event) {
+        super.onClick(e);
+        const enabled = MicrophoneShortcut.toggle(false);
+        this.$content.dataset.activated = enabled.toString();
+    }
+
    render(): HTMLElement {
        return this.$content;
    }
@ -58,6 +56,6 @@ export class MicrophoneAction extends BaseGameBarAction {
    reset(): void {
        this.visible = false;
        this.$content.classList.add('bx-gone');
-        this.$content.setAttribute('data-enabled', 'false');
+        this.$content.dataset.activated = 'false';
    }
 }
--- a/src/modules/game-bar/action-renderer.ts
+++ b/src/modules/game-bar/action-renderer.ts
@ -0,0 +1,47 @@
+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,
+        );
+
+        this.reset();
+    }
+
+    onClick(e: Event) {
+        super.onClick(e);
+        const isVisible = RendererShortcut.toggleVisibility();
+        this.$content.dataset.activated = (!isVisible).toString();
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+
+    reset(): void {
+        this.$content.dataset.activated = 'false';
+    }
+}
--- a/src/modules/game-bar/action-screenshot.ts
+++ b/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,19 +10,19 @@ 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),
        });
    }

+    onClick(e: Event): void {
+        super.onClick(e);
+        Screenshot.takeScreenshot();
+    }
+
    render(): HTMLElement {
        return this.$content;
    }
--- a/src/modules/game-bar/action-speaker.ts
+++ b/src/modules/game-bar/action-speaker.ts
@ -11,21 +11,16 @@ 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'],
        });

@ -40,15 +35,20 @@ export class SpeakerAction extends BaseGameBarAction {
            const speakerState = (e as any).speakerState;
            const enabled = speakerState === SpeakerState.ENABLED;

-            this.$content.dataset.enabled = enabled.toString();
+            this.$content.dataset.activated = (!enabled).toString();
        });
    }

+    onClick(e: Event) {
+        super.onClick(e);
+        SoundShortcut.muteUnmute();
+    }
+
    render(): HTMLElement {
        return this.$content;
    }

    reset(): void {
-        this.$content.dataset.enabled = 'true';
+        this.$content.dataset.activated = 'false';
    }
 }
--- a/src/modules/game-bar/action-touch-control.ts
+++ b/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,28 +10,18 @@ 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'],
        });

@ -44,11 +33,17 @@ export class TouchControlAction extends BaseGameBarAction {
        this.reset();
    }

+    onClick(e: Event) {
+        super.onClick(e);
+        const isVisible = TouchController.toggleVisibility();
+        this.$content.dataset.activated = (!isVisible).toString();
+    }
+
    render(): HTMLElement {
        return this.$content;
    }

    reset(): void {
-        this.$content.setAttribute('data-enabled', 'true');
+        this.$content.dataset.activated = 'false';
    }
 }
--- a/src/modules/game-bar/action-true-achievements.ts
+++ b/src/modules/game-bar/action-true-achievements.ts
@ -1,4 +1,3 @@
-import { BxEvent } from "@/utils/bx-event";
 import { BxIcon } from "@/utils/bx-icon";
 import { createButton, ButtonStyle } from "@/utils/html";
 import { t } from "@/utils/translation";
@ -11,19 +10,19 @@ 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),
        });
    }

+    onClick(e: Event) {
+        super.onClick(e);
+        TrueAchievements.open(false);
+    }
+
    render(): HTMLElement {
        return this.$content;
    }
--- a/src/modules/game-bar/game-bar.ts
+++ b/src/modules/game-bar/game-bar.ts
@ -10,6 +10,7 @@ import { PrefKey } from "@/enums/pref-keys";
 import { getPref, StreamTouchController } 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 {
@ -27,7 +28,7 @@ export class GameBar {
    private $gameBar: HTMLElement;
    private $container: HTMLElement;

-    private timeout: number | null = null;
+    private timeoutId: number | null = null;

    private actions: BaseGameBarAction[] = [];

@ -45,6 +46,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(),
        ];
@ -103,15 +105,15 @@ export class GameBar {
    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() {
--- a/src/modules/loading-screen.ts
+++ b/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;
    }
 }
--- a/src/modules/mkb/pointer-client.ts
+++ b/src/modules/mkb/pointer-client.ts
@ -23,37 +23,37 @@ export class 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 +84,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 +94,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 +108,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 +118,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;
    }
 }
--- a/src/modules/patcher.ts
+++ b/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
@ -219,8 +220,8 @@ const PATCHES = {
        if (match) {
            const gamepadVar = match[1];
            const newCode = renderString(codeControllerShortcuts, {
-                    gamepadVar,
-                });
+                gamepadVar,
+            });

            codeBlock = codeBlock.replace('this.gamepadTimestamps.set', newCode + 'this.gamepadTimestamps.set');
        }
--- a/src/modules/player/shaders/clarity_boost.fs
+++ b/src/modules/player/shaders/clarity_boost.fs
@ -1,121 +1,100 @@
-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) {
-        // Soft min and max.
-        //  a b c             b
-        //  d e f * 0.5  +  d e f * 0.5
-        //  g h i             h
-        // These are 2.0x bigger (factored out the extra multiply).
-        vec3 minRgb = min(min(min(d, e), min(f, b)), h);
-        vec3 minRgb2 = min(min(a, c), min(g, i));
-        minRgb += min(minRgb, minRgb2);
-
-        vec3 maxRgb = max(max(max(d, e), max(f, b)), h);
-        vec3 maxRgb2 = max(max(a, c), max(g, i));
-        maxRgb += max(maxRgb, maxRgb2);
-
-        // Smooth minimum distance to signal limit divided by smooth max.
-        vec3 reciprocalMaxRgb = 1.0 / maxRgb;
-        vec3 amplifyRgb = clamp(min(minRgb, 2.0 - maxRgb) * reciprocalMaxRgb, 0.0, 1.0);
-
-        // Shaping amount of sharpening.
-        amplifyRgb = inversesqrt(amplifyRgb);
-
-        float contrast = 0.8;
-        float peak = -3.0 * contrast + 8.0;
-        vec3 weightRgb = -(1.0 / (amplifyRgb * peak));
-
-        vec3 reciprocalWeightRgb = 1.0 / (4.0 * weightRgb + 1.0);
-
-        //                0 w 0
-        // Filter shape:  w 1 w
-        //                0 w 0
-        vec3 window = (b + d) + (f + h);
-        vec3 outColor = clamp((window * weightRgb + e) * reciprocalWeightRgb, 0.0, 1.0);
-
-        outColor = mix(e, outColor, sharpenFactor / 2.0);
-
-        return outColor;
-    } else if (filterId == FILTER_UNSHARP_MASKING) {
-        vec3 gaussianBlur = (a * 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;
+    // USM
+    if (filterId == FILTER_UNSHARP_MASKING) {
+        vec3 gaussianBlur = (a + c + g + i) * 1.0 + (b + d + f + h) * 2.0 + e * 4.0;
+        gaussianBlur /= 16.0;

        // Return edge detection
        return e + (e - gaussianBlur) * sharpenFactor / 3.0;
    }

-    return e;
-}
+    // CAS
+    // Soft min and max.
+    //  a b c             b
+    //  d e f * 0.5  +  d e f * 0.5
+    //  g h i             h
+    // These are 2.0x bigger (factored out the extra multiply).
+    vec3 minRgb = min(min(min(d, e), min(f, b)), h);
+    minRgb += min(min(a, c), min(g, i));

-vec3 adjustBrightness(vec3 color) {
-    return (1.0 + brightness) * color;
-}
+    vec3 maxRgb = max(max(max(d, e), max(f, b)), h);
+    maxRgb += max(max(a, c), max(g, i));

-vec3 adjustContrast(vec3 color) {
-    return 0.5 + (1.0 + contrast) * (color - 0.5);
-}
+    // Smooth minimum distance to signal limit divided by smooth max.
+    vec3 reciprocalMaxRgb = 1.0 / maxRgb;
+    vec3 amplifyRgb = clamp(min(minRgb, 2.0 - maxRgb) * reciprocalMaxRgb, 0.0, 1.0);

-vec3 adjustSaturation(vec3 color) {
-    const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
-    vec3 grayscale = vec3(dot(color, luminosityFactor));
+    // Shaping amount of sharpening.
+    amplifyRgb = inversesqrt(amplifyRgb);

-    return mix(grayscale, color, 1.0 + saturation);
+    vec3 weightRgb = -(1.0 / (amplifyRgb * CAS_CONTRAST_PEAK));
+    vec3 reciprocalWeightRgb = 1.0 / (4.0 * weightRgb + 1.0);
+
+    //                0 w 0
+    // Filter shape:  w 1 w
+    //                0 w 0
+    vec3 window = b + d + f + h;
+    vec3 outColor = clamp((window * weightRgb + e) * reciprocalWeightRgb, 0.0, 1.0);
+
+    return mix(e, outColor, sharpenFactor / 2.0);
 }

 void main() {
-    vec3 color;
+    vec2 uv = gl_FragCoord.xy / iResolution.xy;
+    // Get current pixel
+    vec3 color = texture(data, uv).rgb;

-    if (sharpenFactor > 0.0) {
-        color = clarityBoost(data, 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);
 }
--- a/src/modules/player/shaders/clarity_boost.vert
+++ b/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;
 }
--- a/src/modules/player/webgl2-player.ts
+++ b/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,125 @@ export class WebGL2Player {
        saturation: 0.0,
    };

-    #animFrameId: number | null = null;
+    private targetFps = 60;
+    private frameInterval = Math.ceil(1000 / this.targetFps);
+    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.frameInterval = Math.ceil(1000 / target);
+    }
+
    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;
+        // Limit FPS
+        if (this.targetFps < 60) {
+            const currentTime = performance.now();
+            const timeSinceLastFrame = currentTime - this.lastFrameTime;
+            if (timeSinceLastFrame < this.frameInterval) {
+                return;
+            }
+            this.lastFrameTime = currentTime;
+        }

-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);
+        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.drawFrame();
-                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.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));
+    private setupShaders() {
+        BxLogger.info(this.LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));

-        const gl = this.#$canvas.getContext('webgl', {
+        const gl = this.$canvas.getContext('webgl2', {
            isBx: true,
            antialias: true,
            alpha: false,
            powerPreference: getPref(PrefKey.VIDEO_POWER_PREFERENCE),
        }) as WebGL2RenderingContext;
-        this.#gl = gl;
+        this.gl = gl;

        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferWidth);

@ -145,7 +158,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 +175,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,38 +203,38 @@ 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) {
+            for (const resource of this.resources) {
                if (resource instanceof WebGLProgram) {
                    gl.useProgram(null);
                    gl.deleteProgram(resource);
@ -241,14 +247,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;
    }
 }
--- a/src/modules/shortcuts/shortcut-renderer.ts
+++ b/src/modules/shortcuts/shortcut-renderer.ts
@ -0,0 +1,11 @@
+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');
+        return !$mediaContainer.classList.contains('bx-gone');
+    }
+}
--- a/src/modules/stream-player.ts
+++ b/src/modules/stream-player.ts
@ -17,35 +17,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 +56,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 +67,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 +97,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 +166,67 @@ 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) {
            // 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('bx-pixel');
            } else {
                // Cleanup WebGL2 Player
-                this.#webGL2Player?.stop();
+                this.webGL2Player?.stop();

-                this.#$video.classList.remove('bx-pixel');
+                this.$video.classList.remove('bx-pixel');
            }
        }

-        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 +241,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 +257,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();
    }
 }
--- a/src/modules/stream/stream-badges.ts
+++ b/src/modules/stream/stream-badges.ts
@ -345,7 +345,7 @@ export class StreamBadges {
                    text += server.region;
                }

-                text += '@' + (server ? 'IPv6' : 'IPv4');
+                text += '@' + (server.ipv6 ? 'IPv6' : 'IPv4');
                this.badges.server.$element = this.renderBadge(StreamBadge.SERVER, text);
            }
        }
--- a/src/modules/stream/stream-settings-utils.ts
+++ b/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,27 @@ 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() {
+    const targetFps = getPref(PrefKey.VIDEO_MAX_FPS);
+    const streamPlayer = STATES.currentStream.streamPlayer;
+    streamPlayer?.getWebGL2Player()?.setTargetFps(targetFps);
+}
+
+
 export function updateVideoPlayer() {
    const streamPlayer = STATES.currentStream.streamPlayer;
    if (!streamPlayer) {
        return;
    }

+    limitVideoPlayerFps();
+
    const options = {
        processing: getPref(PrefKey.VIDEO_PROCESSING),
        sharpness: getPref(PrefKey.VIDEO_SHARPNESS),
@ -60,6 +71,7 @@ export function updateVideoPlayer() {
    streamPlayer.setPlayerType(getPref(PrefKey.VIDEO_PLAYER_TYPE));
    streamPlayer.updateOptions(options);
    streamPlayer.refreshPlayer();
+
 }

 window.addEventListener('resize', updateVideoPlayer);
--- a/src/modules/stream/stream-stats.ts
+++ b/src/modules/stream/stream-stats.ts
@ -37,6 +37,10 @@ export class StreamStats {
            name: t('stat-ping'),
            $element: CE('span'),
        },
+        [StreamStat.JITTER]: {
+            name: t('jitter'),
+            $element: CE('span'),
+        },
        [StreamStat.FPS]: {
            name: t('stat-fps'),
            $element: CE('span'),
@ -58,11 +62,11 @@ export class StreamStats {
            $element: CE('span'),
        },
        [StreamStat.DOWNLOAD]: {
-            name: t('download'),
+            name: t('downloaded'),
            $element: CE('span'),
        },
        [StreamStat.UPLOAD]: {
-            name: t('upload'),
+            name: t('uploaded'),
            $element: CE('span'),
        },
    };
@ -179,10 +183,8 @@ export class StreamStats {
            $element.textContent = value.toString();

            // Get stat's grade
-            if (PREF_STATS_CONDITIONAL_FORMATTING) {
-                if (statKey === StreamStat.PING || statKey === StreamStat.DECODE_TIME) {
-                    grade = (value as any).calculateGrade();
-                }
+            if (PREF_STATS_CONDITIONAL_FORMATTING && 'grades' in value) {
+                grade = statsCollector.calculateGrade(value.current, value.grades);
            }

            if ($element.dataset.grade !== grade) {
--- a/src/modules/touch-controller.ts
+++ b/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() {
--- a/src/modules/ui/dialog/settings-dialog.ts
+++ b/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>;
@ -220,8 +221,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 +236,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,
@ -400,6 +407,9 @@ export class SettingsNavigationDialog extends NavigationDialog {
        items: [{
            pref: PrefKey.VIDEO_PLAYER_TYPE,
            onChange: onChangeVideoPlayerType,
+        }, {
+            pref: PrefKey.VIDEO_MAX_FPS,
+            onChange: limitVideoPlayerFps,
        }, {
            pref: PrefKey.VIDEO_POWER_PREFERENCE,
            onChange: () => {
@ -516,17 +526,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 +1142,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 +1162,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 +1181,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 +1352,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);
                }
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@ -46,6 +46,7 @@ type BxStates = {
        isTv: boolean;
        capabilities: {
            touch: boolean;
+            mkb: boolean;
        };
    };

--- a/src/types/preferences.d.ts
+++ b/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;
--- a/src/types/setting-definition.d.ts
+++ b/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,
--- a/src/utils/bx-icon.ts
+++ b/src/utils/bx-icon.ts
@ -7,6 +7,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 +50,8 @@ export const BxIcon = {
    CONTROLLER: iconController,
    CREATE_SHORTCUT: iconCreateShortcut,
    DISPLAY: iconDisplay,
+    EYE: iconEye,
+    EYE_SLASH: iconEyeSlash,
    HOME: iconHome,
    NATIVE_MKB: iconNativeMkb,
    NEW: iconNew,
--- a/src/utils/bx-logger.ts
+++ b/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);
    }
 }

--- a/src/utils/global.ts
+++ b/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,
        }
    },

--- a/src/utils/settings-storages/global-settings-storage.ts
+++ b/src/utils/settings-storages/global-settings-storage.ts
@ -182,7 +182,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 = {
@ -393,10 +393,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 +405,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);
@ -619,6 +616,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 +646,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
            },
            suggest: {
                lowest: 0,
-                highest: 4,
+                highest: 2,
            },
        },
        [PrefKey.VIDEO_RATIO]: {
@ -717,13 +729,14 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                [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('download')}`,
-                [StreamStat.UPLOAD]: `${StreamStat.UPLOAD.toUpperCase()}: ${t('upload')}`,
+                [StreamStat.DOWNLOAD]: `${StreamStat.DOWNLOAD.toUpperCase()}: ${t('downloaded')}`,
+                [StreamStat.UPLOAD]: `${StreamStat.UPLOAD.toUpperCase()}: ${t('uploaded')}`,
            },
            params: {
                size: 6,
@ -804,6 +817,13 @@ 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() {
--- a/src/utils/stream-stats-collector.ts
+++ b/src/utils/stream-stats-collector.ts
@ -4,6 +4,7 @@ import { humanFileSize, secondsToHm } from "./html";

 export enum StreamStat {
    PING = 'ping',
+    JITTER = 'jit',
    FPS = 'fps',
    BITRATE = 'btr',
    DECODE_TIME = 'dt',
@ -21,7 +22,13 @@ export type StreamStatGrade = '' | 'bad' | 'ok' | 'good';
 type CurrentStats = {
    [StreamStat.PING]: {
        current: number;
-        calculateGrade: () => StreamStatGrade;
+        grades: [number, number, number];
+        toString: () => string;
+    };
+
+    [StreamStat.JITTER]: {
+        current: number;
+        grades: [number, number, number];
        toString: () => string;
    };

@ -50,7 +57,7 @@ type CurrentStats = {
    [StreamStat.DECODE_TIME]: {
        current: number;
        total: number;
-        calculateGrade: () => StreamStatGrade;
+        grades: [number, number, number];
        toString: () => string;
    };

@ -96,17 +103,27 @@ export class 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,
-            calculateGrade() {
-                return (this.current >= 100) ? 'bad' : (this.current > 75) ? 'ok' : (this.current > 40) ? 'good' : '';
-            },
+            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() {
@ -142,9 +159,7 @@ export class StreamStatsCollector {
        [StreamStat.DECODE_TIME]: {
            current: 0,
            total: 0,
-            calculateGrade() {
-                return (this.current > 12) ? 'bad' : (this.current > 9) ? 'ok' : (this.current > 6) ? 'good' : '';
-            },
+            grades: [6, 9, 12],
            toString() {
                return isNaN(this.current) ? '??ms' : `${this.current.toFixed(2)}ms`;
            },
@ -200,12 +215,15 @@ export class StreamStatsCollector {
        },
    };

-    private lastVideoStat?: RTCBasicStat | null;
+    private lastVideoStat?: RTCInboundRtpStreamStats | null;

    async collect() {
        const stats = await STATES.currentStream.peerConnection?.getStats();
+        if (!stats) {
+            return;
+        }

-        stats?.forEach(stat => {
+        stats.forEach(stat => {
            if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
                // FPS
                const fps = this.currentStats[StreamStat.FPS];
@ -229,15 +247,23 @@ export class StreamStatsCollector {

                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;
+                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.total = stat.totalDecodeTime - lastStat.totalDecodeTime!;
+                const framesDecodedDiff = stat.framesDecoded - lastStat.framesDecoded!;
                dt.current = dt.total / framesDecodedDiff * 1000;

                this.lastVideoStat = stat;
--- a/src/utils/toast.ts
+++ b/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);
    }
 }
--- a/src/utils/translation.ts
+++ b/src/utils/translation.ts
@ -93,10 +93,11 @@ const Texts = {
    "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",
@ -106,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...",
@ -130,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",
@ -141,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",
@ -149,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",
@ -348,6 +352,7 @@ const Texts = {
    "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",
--- a/src/utils/xcloud-api.ts
+++ b/src/utils/xcloud-api.ts
@ -3,7 +3,6 @@ import { STATES } from "./global";

 export class XcloudApi {
    private static instance: XcloudApi;
-
    public static getInstance(): XcloudApi {
        if (!XcloudApi.instance) {
            XcloudApi.instance = new XcloudApi();
@ -12,12 +11,12 @@ export class 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 +44,13 @@ export class XcloudApi {
        } catch (e) {
            json = {}
        }
-        this.#CACHE_TITLES[id] = json;
+        this.CACHE_TITLES[id] = json;
        return json;
    }

    async getWaitTime(id: string): Promise<XcloudWaitTimeInfo | null> {
-        if (id in this.#CACHE_WAIT_TIME) {
-            return this.#CACHE_WAIT_TIME[id];
+        if (id in this.CACHE_WAIT_TIME) {
+            return this.CACHE_WAIT_TIME[id];
        }

        const baseUri = STATES.selectedRegion.baseUri;
@ -73,7 +72,7 @@ export class XcloudApi {
            json = {};
        }

-        this.#CACHE_WAIT_TIME[id] = json;
+        this.CACHE_WAIT_TIME[id] = json;
        return json;
    }
 }
Author	SHA1	Message	Date
redphx	741538ebcf	Bump version to 5.8.4	2024-10-13 20:00:36 +07:00
redphx	6d2e04aff1	Refactor Game Bar actions	2024-10-13 19:15:29 +07:00
redphx	f2bc98229f	Update version	2024-10-13 17:46:48 +07:00
redphx	49fb8e2818	Refactor "data-enabled" to "data-activated"	2024-10-13 17:32:38 +07:00
redphx	d012d96675	Add Game Bar action to toggle renderer's visibility	2024-10-13 17:05:27 +07:00
redphx	c129feaf2d	Refactor WebGL2Player	2024-10-13 16:26:33 +07:00
redphx	4f7b23912d	Refactor BxLogger	2024-10-13 16:06:01 +07:00
redphx	e4d73f9e36	Replace "#" with "private"	2024-10-13 10:51:50 +07:00
redphx	2eea9ce8f5	Bump version to 5.8.3	2024-10-12 18:41:41 +07:00
redphx	27abab8473	Change "FPS" unit to "fps"	2024-10-12 18:41:28 +07:00
redphx	0c34173815	Add "Limit video player's FPS" feature	2024-10-12 16:15:51 +07:00
redphx	0164423e45	Test WebGL2 shader	2024-10-12 11:14:55 +07:00
redphx	71dcaf4b07	Optimize Clarity boost shader	2024-10-11 17:11:32 +07:00
redphx	8f49c48e74	Bump version to 5.8.2	2024-10-11 07:11:37 +07:00
redphx	6fa1f73702	Optimize built scripts	2024-10-10 21:43:42 +07:00
redphx	728abced45	Add jitter stat	2024-10-10 21:35:36 +07:00
redphx	411e43ceb0	Disable inputPollingDurationStats	2024-10-10 20:55:57 +07:00
redphx	baa22dbefc	Optimize Clarity Boost shader	2024-10-10 17:28:19 +07:00
redphx	97fb7a114f	Set Sharpness's suggested value to 2	2024-10-09 09:02:52 +07:00
redphx	39b2f814b6	Fix stream badge always show "IPv6" even when connecting to IPv4 server #517	2024-10-09 06:30:09 +07:00
redphx	3d34bb3edf	Bump version to 5.8.1	2024-10-08 20:00:39 +07:00
redphx	ab1c93eb3a	Upgrade bun	2024-10-08 19:59:53 +07:00
redphx	739adfce41	Update translations	2024-10-08 19:55:03 +07:00
redphx	2e77f19006	Update scripts	2024-10-08 07:19:20 +07:00
redphx	8a40d361d9	Add unsupportedNote property	2024-10-08 07:19:09 +07:00
redphx	98fa273b48	Don't render MKB settings on unsupported devices	2024-10-08 07:01:58 +07:00
redphx	1e6527413c	Update scripts	2024-10-07 21:40:09 +07:00
redphx	b9134bc141	Add "MSFS2020: force native MKB support" setting	2024-10-07 21:39:42 +07:00
redphx	336a965653	Update translations	2024-10-07 21:21:37 +07:00