Bump version to 5.8.0

build.sh

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

build.ts

@@ -5,6 +5,8 @@ import { sys } from "typescript";
 // @ts-ignore
 import txtScriptHeader from "./src/assets/header_script.txt" with { type: "text" };
 // @ts-ignore
+import txtScriptHeaderLite from "./src/assets/header_script.lite.txt" with { type: "text" };
+// @ts-ignore
 import txtMetaHeader from "./src/assets/header_meta.txt" with { type: "text" };
 import { assert } from "node:console";
 import { ESLint } from "eslint";
@@ -16,6 +18,8 @@ enum BuildTarget {
     WEBOS = 'webos',
 }
 
+type BuildVariant = 'full' | 'lite';
+
 const postProcess = (str: string): string => {
     // Unescape unicode charaters
     str = unescape((str.replace(/\\u/g, '%u')));
@@ -35,13 +39,42 @@ const postProcess = (str: string): string => {
     // Add ADDITIONAL CODE block
     str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
 
-    // Minify SVG
-    str = str.replaceAll(/= "(<svg.*)";/g, function(match) {
-        match = match.replaceAll(/\\n*\s*/g, '');
-        return match;
+    str = str.replaceAll('(e) => `', 'e => `');
+
+    // Simplify object definitions
+    // {[1]: "a"} => {1: "a"}
+    str = str.replaceAll(/\[(\d+)\]: /g, '$1: ');
+    // {["a"]: 1, ["b-c"]: 2} => {a: 1, "b-c": 2}
+    str = str.replaceAll(/\["([^"]+)"\]: /g, function(match, p1) {
+        if (p1.includes('-') || p1.match(/^\d/)) {
+            p1 = `"${p1}"`;
+        }
+
+        return p1 + ': ';
     });
 
-    str = str.replaceAll('(e) => `', 'e => `');
+    // Minify SVG import code
+    const svgMap = {}
+    str = str.replaceAll(/var ([\w_]+) = ("<svg.*?");\n\n/g, function(match, p1, p2) {
+        // Remove new lines in SVG
+        p2 = p2.replaceAll(/\\n*\s*/g, '');
+
+        svgMap[p1] = p2;
+        return '';
+    });
+
+    for (const name in svgMap) {
+        str = str.replace(`: ${name}`, `: ${svgMap[name]}`);
+    }
+
+    // Collapse empty brackets
+    str = str.replaceAll(/\{[\s\n]+\}/g, '{}');
+
+    // Collapse if/else blocks without curly braces
+    str = str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
+
+    // Remove blank lines
+    str = str.replaceAll(/\n([\s]*)\n/g, "\n");
 
     assert(str.includes('/* ADDITIONAL CODE */'));
     assert(str.includes('window.BX_EXPOSED = BxExposed'));
@@ -51,7 +84,7 @@ const postProcess = (str: string): string => {
     return str;
 }
 
-const build = async (target: BuildTarget, version: string, config: any={}) => {
+const build = async (target: BuildTarget, version: string, variant: BuildVariant, config: any={}) => {
     console.log('-- Target:', target);
     const startTime = performance.now();
 
@@ -59,6 +92,11 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
     if (target !== BuildTarget.ALL) {
         outputScriptName += `.${target}`;
     }
+
+    if (variant !== 'full') {
+        outputScriptName += `.${variant}`;
+    }
+
     let outputMetaName = outputScriptName;
     outputScriptName += '.user.js';
     outputMetaName += '.meta.js';
@@ -74,6 +112,7 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
         },
         define: {
             'Bun.env.BUILD_TARGET': JSON.stringify(target),
+            'Bun.env.BUILD_VARIANT': JSON.stringify(variant),
             'Bun.env.SCRIPT_VERSION': JSON.stringify(version),
         },
     });
@@ -88,7 +127,13 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
     let result = postProcess(await readFile(path, 'utf-8'));
 
     // Replace [[VERSION]] with real value
-    const scriptHeader = txtScriptHeader.replace('[[VERSION]]', version);
+    let scriptHeader: string;
+    if (variant === 'full') {
+        scriptHeader = txtScriptHeader;
+    } else {
+        scriptHeader = txtScriptHeaderLite;
+    }
+    scriptHeader = scriptHeader.replace('[[VERSION]]', version);
 
     // Save to script
     await Bun.write(path, scriptHeader + result);
@@ -119,28 +164,44 @@ const buildTargets = [
 const { values, positionals } = parseArgs({
     args: Bun.argv,
     options: {
-      version: {
-        type: 'string',
+        version: {
+            type: 'string',
+        },
 
-      },
+        variant: {
+            type: 'string',
+            default: 'full',
+        },
     },
     strict: true,
     allowPositionals: true,
-  });
+}) as {
+    values: {
+        version: string,
+        variant: BuildVariant,
+    },
+    positionals: string[],
+};
 
 if (!values['version']) {
     console.log('Missing --version param');
     sys.exit(-1);
 }
 
+if (values['variant'] !== 'full' && values['variant'] !== 'lite') {
+    console.log('--variant param must be either "full" or "lite"');
+    sys.exit(-1);
+}
+
 async function main() {
     const config = {};
-    console.log('Building: ', values['version']);
+    console.log(`Building: VERSION=${values['version']}, VARIANT=${values['variant']}`);
     for (const target of buildTargets) {
-        await build(target, values['version']!!, config);
+        await build(target, values['version']!!, values['variant'], config);
     }
 
-    console.log('\n** Press Enter to build or Esc to exit');
+    console.log('')
+    // console.log('\n** Press Enter to build or Esc to exit');
 }
 
 function onKeyPress(data: any) {
@@ -153,6 +214,9 @@ function onKeyPress(data: any) {
 }
 
 main();
+
+/*
 process.stdin.setRawMode(true);
 process.stdin.resume();
 process.stdin.on('data', onKeyPress);
+*/

dist/better-xcloud.lite.meta.js

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

dist/better-xcloud.meta.js

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

package.json

@@ -2,6 +2,7 @@
   "name": "better-xcloud",
   "module": "src/index.ts",
   "type": "module",
+  "sideEffects": false,
   "browserslist": [
     "Chrome >= 80"
   ],
@@ -9,10 +10,10 @@
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.9",
-    "@types/node": "^22.5.5",
+    "@types/bun": "^1.1.10",
+    "@types/node": "^22.7.4",
     "@types/stylus": "^0.48.43",
-    "eslint": "^9.10.0",
+    "eslint": "^9.12.0",
     "eslint-plugin-compat": "^6.0.1",
     "stylus": "^0.63.0"
   },

src/assets/css/button.styl

@@ -179,15 +179,3 @@ button.bx-inactive {
     opacity: 0.2;
     background: transparent !important;
 }
-
-.bx-button-shortcut {
-    max-width: max-content;
-    margin: 10px 0 0 0;
-    flex: 1 0 auto;
-}
-
-@media (min-width: 568px) and (max-height: 480px) {
-    .bx-button-shortcut {
-        margin: 8px 0 0 10px;
-    }
-}

src/assets/css/misc.styl

@@ -0,0 +1,21 @@
+.bx-product-details-buttons {
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+
+    button {
+        max-width: max-content;
+        margin: 10px 0 0 0;
+        display: flex;
+    }
+}
+
+@media (min-width: 568px) and (max-height: 480px) {
+    .bx-product-details-buttons {
+        flex-direction: column;
+
+        button {
+            margin: 8px 0 0 10px;
+        }
+    }
+}

src/assets/css/stream-stats.styl

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

src/assets/css/styles.styl

@@ -16,3 +16,4 @@
 @import 'game-bar.styl';
 @import 'stream-stats.styl';
 @import 'mkb.styl';
+@import 'misc.styl';

src/assets/css/web-components.styl

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

src/assets/header_script.lite.txt

@@ -0,0 +1,13 @@
+// ==UserScript==
+// @name         Better xCloud (Lite)
+// @namespace    https://github.com/redphx
+// @version      [[VERSION]]
+// @description  Improve Xbox Cloud Gaming (xCloud) experience
+// @author       redphx
+// @license      MIT
+// @match        https://www.xbox.com/*/play*
+// @match        https://www.xbox.com/*/auth/msa?*loggedIn*
+// @run-at       document-end
+// @grant        none
+// ==/UserScript==
+"use strict";

src/index.ts

@@ -1,3 +1,5 @@
+import { compressCss, isFullVersion } from "@macros/build" with {type: "macro"};
+
 import "@utils/global";
 import { BxEvent } from "@utils/bx-event";
 import { BX_FLAGS } from "@utils/bx-flags";
@@ -35,12 +37,11 @@ import { ProductDetailsPage } from "./modules/ui/product-details";
 import { NavigationDialogManager } from "./modules/ui/dialog/navigation-dialog";
 import { PrefKey } from "./enums/pref-keys";
 import { getPref, StreamTouchController } from "./utils/settings-storages/global-settings-storage";
-import { compressCss } from "@macros/build" with {type: "macro"};
 import { SettingsNavigationDialog } from "./modules/ui/dialog/settings-dialog";
 import { StreamUiHandler } from "./modules/stream/stream-ui";
 import { UserAgent } from "./utils/user-agent";
 import { XboxApi } from "./utils/xbox-api";
-
+import { StreamStatsCollector } from "./utils/stream-stats-collector";
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
@@ -63,12 +64,14 @@ if (window.location.pathname.includes('/auth/msa')) {
 
 BxLogger.info('readyState', document.readyState);
 
-if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
+if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     // Stop loading
     window.stop();
 
-    // Show the reloading overlay
-    const css = compressCss(`
+    // We need to set it to an empty string first to work around Bun's bug
+    // https://github.com/oven-sh/bun/issues/12067
+    let css = '';
+    css += compressCss(`
 .bx-reload-overlay {
     position: fixed;
     top: 0;
@@ -115,6 +118,7 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
         }, '🤓 ' + t('how-to-fix'));
     }
 
+    // Show the reloading overlay
     const $fragment = document.createDocumentFragment();
     $fragment.appendChild(CE('style', {}, css));
     $fragment.appendChild(CE('div',{
@@ -189,8 +193,11 @@ window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
     window.setTimeout(HeaderSection.watchHeader, 2000);
 
     // Open Settings dialog on Unsupported page
-    SettingsNavigationDialog.getInstance().show();
-});
+    const $unsupportedPage = document.querySelector('div[class^=UnsupportedMarketPage-module__container]') as HTMLElement;
+    if ($unsupportedPage) {
+        SettingsNavigationDialog.getInstance().show();
+    }
+}, {once: true});
 
 window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
     STATES.isSignedIn = true;
@@ -224,15 +231,17 @@ window.addEventListener(BxEvent.STREAM_PLAYING, e => {
     STATES.isPlaying = true;
     StreamUiHandler.observe();
 
-    if (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
+    if (isFullVersion() && getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
         const gameBar = GameBar.getInstance();
         gameBar.reset();
         gameBar.enable();
         gameBar.showBar();
     }
 
-    const $video = (e as any).$video as HTMLVideoElement;
-    Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight);
+    if (isFullVersion()) {
+        const $video = (e as any).$video as HTMLVideoElement;
+        Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight);
+    }
 
     updateVideoPlayer();
 });
@@ -285,9 +294,11 @@ function unload() {
         return;
     }
 
-    // Stop MKB listeners
-    EmulatedMkbHandler.getInstance().destroy();
-    NativeMkbHandler.getInstance().destroy();
+    if (isFullVersion()) {
+        // Stop MKB listeners
+        EmulatedMkbHandler.getInstance().destroy();
+        NativeMkbHandler.getInstance().destroy();
+    }
 
     // Destroy StreamPlayer
     STATES.currentStream.streamPlayer?.destroy();
@@ -300,9 +311,11 @@ function unload() {
     NavigationDialogManager.getInstance().hide();
     StreamStats.getInstance().onStoppedPlaying();
 
-    MouseCursorHider.stop();
-    TouchController.reset();
-    GameBar.getInstance().disable();
+    if (isFullVersion()) {
+        MouseCursorHider.stop();
+        TouchController.reset();
+        GameBar.getInstance().disable();
+    }
 }
 
 window.addEventListener(BxEvent.STREAM_STOPPED, unload);
@@ -310,7 +323,7 @@ window.addEventListener('pagehide', e => {
     BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
 });
 
-window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
+isFullVersion() && window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
     Screenshot.takeScreenshot();
 });
 
@@ -365,15 +378,13 @@ function waitForRootDialog() {
 
 
 function main() {
-    waitForRootDialog();
-
     // Monkey patches
     patchRtcPeerConnection();
     patchRtcCodecs();
     interceptHttpRequests();
     patchVideoApi();
     patchCanvasContext();
-    AppInterface && patchPointerLockApi();
+    isFullVersion() && AppInterface && patchPointerLockApi();
 
     getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext();
 
@@ -382,52 +393,58 @@ function main() {
         disableAdobeAudienceManager();
     }
 
-    STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
-    overridePreloadState();
-
-    VibrationManager.initialSetup();
-
-    // Check for Update
-    BX_FLAGS.CheckForUpdate && checkForUpdate();
+    waitForRootDialog();
 
     // Setup UI
     addCss();
     Toast.setup();
-    (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
-    Screenshot.setup();
 
     GuideMenu.addEventListeners();
+    StreamStatsCollector.setupEvents();
     StreamBadges.setupEvents();
     StreamStats.setupEvents();
-    EmulatedMkbHandler.setupEvents();
 
-    Patcher.init();
+    if (isFullVersion()) {
+        (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
+        Screenshot.setup();
 
-    disablePwa();
+        STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
+        overridePreloadState();
+
+        VibrationManager.initialSetup();
+
+        // Check for Update
+        BX_FLAGS.CheckForUpdate && checkForUpdate();
+
+        Patcher.init();
+        disablePwa();
+
+        // Preload Remote Play
+        if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
+            RemotePlayManager.detect();
+        }
+
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
+            TouchController.setup();
+        }
+
+        // Start PointerProviderServer
+        if (getPref(PrefKey.MKB_ENABLED) && AppInterface) {
+            STATES.pointerServerPort = AppInterface.startPointerServer() || 9269;
+            BxLogger.info('startPointerServer', 'Port', STATES.pointerServerPort.toString());
+        }
+
+        // Show wait time in game card
+        getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && GameTile.setup();
+
+        EmulatedMkbHandler.setupEvents();
+    }
 
     // Show a toast when connecting/disconecting controller
     if (getPref(PrefKey.CONTROLLER_SHOW_CONNECTION_STATUS)) {
         window.addEventListener('gamepadconnected', e => showGamepadToast(e.gamepad));
         window.addEventListener('gamepaddisconnected', e => showGamepadToast(e.gamepad));
     }
-
-    // Preload Remote Play
-    if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
-        RemotePlayManager.detect();
-    }
-
-    if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
-        TouchController.setup();
-    }
-
-    // Start PointerProviderServer
-    if (getPref(PrefKey.MKB_ENABLED) && AppInterface) {
-        STATES.pointerServerPort = AppInterface.startPointerServer() || 9269;
-        BxLogger.info('startPointerServer', 'Port', STATES.pointerServerPort.toString());
-    }
-
-    // Show wait time in game card
-    getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && GameTile.setup();
 }
 
 main();

src/macros/build.ts

@@ -1,5 +1,13 @@
 import stylus from 'stylus';
 
+export const isFullVersion = () => {
+    return Bun.env.BUILD_VARIANT === 'full';
+};
+
+export const isLiteVersion = () => {
+    return Bun.env.BUILD_VARIANT === 'lite';
+};
+
 export const renderStylus = async () => {
     const file = Bun.file('./src/assets/css/styles.styl');
     const cssStr = await file.text();

src/modules/controller-shortcut.ts

@@ -3,7 +3,6 @@ import { GamepadKey } from "@enums/mkb";
 import { PrompFont } from "@enums/prompt-font";
 import { CE, removeChildElements } from "@utils/html";
 import { t } from "@utils/translation";
-import { EmulatedMkbHandler } from "./mkb/mkb-handler";
 import { StreamStats } from "./stream/stream-stats";
 import { MicrophoneShortcut } from "./shortcuts/shortcut-microphone";
 import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui";
@@ -15,6 +14,7 @@ import { setNearby } from "@/utils/navigation-utils";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "@/utils/settings-storages/global-settings-storage";
 import { SettingsNavigationDialog } from "./ui/dialog/settings-dialog";
+import { VIRTUAL_GAMEPAD_ID } from "./mkb/mkb-handler";
 
 const enum ShortcutAction {
     BETTER_XCLOUD_SETTINGS_SHOW = 'bx-settings-show',
@@ -185,7 +185,7 @@ export class ControllerShortcut {
             }
 
             // Ignore emulated gamepad
-            if (gamepad.id === EmulatedMkbHandler.VIRTUAL_GAMEPAD_ID) {
+            if (gamepad.id === VIRTUAL_GAMEPAD_ID) {
                 continue;
             }
 
@@ -314,6 +314,7 @@ export class ControllerShortcut {
         const $selectProfile = CE<HTMLSelectElement>('select', {class: 'bx-shortcut-profile', autocomplete: 'off'});
 
         const $profile = PREF_CONTROLLER_FRIENDLY_UI ? BxSelectElement.wrap($selectProfile) : $selectProfile;
+        $profile.classList.add('bx-full-width');
 
         const $container = CE('div', {
             'data-has-gamepad': 'false',
@@ -390,6 +391,8 @@ export class ControllerShortcut {
 
             if (PREF_CONTROLLER_FRIENDLY_UI) {
                 const $bxSelect = BxSelectElement.wrap($select);
+                $bxSelect.classList.add('bx-full-width');
+
                 $div.appendChild($bxSelect);
                 setNearby($row, {
                     focus: $bxSelect,

src/modules/loading-screen.ts

@@ -44,7 +44,7 @@ export class LoadingScreen {
     static #hideRocket() {
         let $bgStyle = LoadingScreen.#$bgStyle;
 
-        const css = compressCss(`
+        $bgStyle.textContent! += compressCss(`
 #game-stream div[class*=RocketAnimation-module__container] > svg {
     display: none;
 }
@@ -53,7 +53,6 @@ export class LoadingScreen {
     display: none;
 }
 `);
-        $bgStyle.textContent! += css;
     }
 
     static #setBackground(imageUrl: string) {
@@ -63,7 +62,7 @@ export class LoadingScreen {
         // Limit max width to reduce image size
         imageUrl = imageUrl + '?w=1920';
 
-        const css = compressCss(`
+        $bgStyle.textContent! += compressCss(`
 #game-stream {
     background-color: transparent !important;
     background-position: center center !important;
@@ -75,7 +74,6 @@ export class LoadingScreen {
     transition: opacity 0.3s ease-in-out !important;
 }
 `) + `#game-stream {background-image: linear-gradient(#00000033, #000000e6), url(${imageUrl}) !important;}`;
-        $bgStyle.textContent! += css;
 
         const bg = new Image();
         bg.onload = e => {

src/modules/mkb/mkb-handler.ts

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with {type: "macro"};
+
 import { MkbPreset } from "./mkb-preset";
 import { GamepadKey, MkbPresetKey, GamepadStick, MouseMapTo, WheelCode } from "@enums/mkb";
 import { createButton, ButtonStyle, CE } from "@utils/html";
@@ -26,6 +28,7 @@ const PointerToMouseButton = {
     4: 1,
 }
 
+export const VIRTUAL_GAMEPAD_ID = 'Xbox 360 Controller';
 
 class WebSocketMouseDataProvider extends MouseDataProvider {
     #pointerClient: PointerClient | undefined
@@ -136,10 +139,8 @@ export class EmulatedMkbHandler extends MkbHandler {
     static readonly DEFAULT_DEADZONE_COUNTERWEIGHT = 0.01;
     static readonly MAXIMUM_STICK_RANGE = 1.1;
 
-    static VIRTUAL_GAMEPAD_ID = 'Xbox 360 Controller';
-
     #VIRTUAL_GAMEPAD = {
-            id: EmulatedMkbHandler.VIRTUAL_GAMEPAD_ID,
+            id: VIRTUAL_GAMEPAD_ID,
             index: 3,
             connected: false,
             hapticActuators: null,
@@ -678,7 +679,7 @@ export class EmulatedMkbHandler extends MkbHandler {
     }
 
     static setupEvents() {
-        window.addEventListener(BxEvent.STREAM_PLAYING, () => {
+        isFullVersion() && window.addEventListener(BxEvent.STREAM_PLAYING, () => {
             if (STATES.currentStream.titleInfo?.details.hasMkbSupport) {
                 // Enable native MKB in Android app
                 if (AppInterface && getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on') {

src/modules/stream-player.ts

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with {type: "macro"};
+
 import { CE } from "@/utils/html";
 import { WebGL2Player } from "./player/webgl2-player";
 import { Screenshot } from "@/utils/screenshot";
@@ -232,7 +234,7 @@ export class StreamPlayer {
                 webGL2Player.setFilter(2);
             }
 
-            Screenshot.updateCanvasFilters('none');
+            isFullVersion() && Screenshot.updateCanvasFilters('none');
 
             webGL2Player.setSharpness(options.sharpness || 0);
             webGL2Player.setSaturation(options.saturation || 100);
@@ -246,7 +248,7 @@ export class StreamPlayer {
             }
 
             // Apply video filters to screenshots
-            if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
+            if (isFullVersion() && getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
                 Screenshot.updateCanvasFilters(filters);
             }
 

src/modules/stream/stream-badges.ts

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

src/modules/stream/stream-stats.ts

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

src/modules/stream/stream-ui.ts

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

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

@@ -1,6 +1,6 @@
 import { GamepadKey } from "@/enums/mkb";
 import { PrefKey } from "@/enums/pref-keys";
-import { EmulatedMkbHandler } from "@/modules/mkb/mkb-handler";
+import { VIRTUAL_GAMEPAD_ID } from "@/modules/mkb/mkb-handler";
 import { BxEvent } from "@/utils/bx-event";
 import { STATES } from "@/utils/global";
 import { CE, isElementVisible } from "@/utils/html";
@@ -171,30 +171,44 @@ export class NavigationDialogManager {
                 }
 
                 // Find un-calculated <select> elements
-                const $selects = $dialog.querySelectorAll('.bx-select:not([data-calculated]) select');
-                $selects.forEach($select => {
-                    const rect = $select.getBoundingClientRect();
-                    const $parent = $select.parentElement! as HTMLElement;
-                    $parent.dataset.calculated = 'true';
-
-                    let $label;
-                    let width = Math.ceil(rect.width);
-
-                    if (($select as HTMLSelectElement).multiple) {
-                        $label = $parent.querySelector('.bx-select-value') as HTMLElement;
-                        width += 15;  // Add checkbox's width
-                    } else {
-                        $label = $parent.querySelector('div') as HTMLElement;
-                    }
-
-                    // Set min-width
-                    $label.style.minWidth = width + 'px';
-                });
+                this.calculateSelectBoxes($dialog);
             });
             observer.observe(this.$container, {childList: true});
         }
     }
 
+    calculateSelectBoxes($root: HTMLElement) {
+        const $selects = $root.querySelectorAll('.bx-select:not([data-calculated]) select');
+        $selects.forEach($select => {
+            const $parent = $select.parentElement! as HTMLElement;
+
+            // Don't apply to select.bx-full-width elements
+            if ($parent.classList.contains('bx-full-width')) {
+                $parent.dataset.calculated = 'true';
+                return;
+            }
+
+            const rect = $select.getBoundingClientRect();
+
+            let $label;
+            let width = Math.ceil(rect.width);
+            if (!width) {
+                return;
+            }
+
+            if (($select as HTMLSelectElement).multiple) {
+                $label = $parent.querySelector('.bx-select-value') as HTMLElement;
+                width += 20;  // Add checkbox's width
+            } else {
+                $label = $parent.querySelector('div') as HTMLElement;
+            }
+
+            // Set min-width
+            $label.style.minWidth = width + 'px';
+            $parent.dataset.calculated = 'true';
+        });
+    }
+
     handleEvent(event: Event) {
         switch (event.type) {
             case 'keydown':
@@ -249,7 +263,7 @@ export class NavigationDialogManager {
             }
 
             // Ignore virtual controller
-            if (gamepad.id === EmulatedMkbHandler.VIRTUAL_GAMEPAD_ID) {
+            if (gamepad.id === VIRTUAL_GAMEPAD_ID) {
                 continue;
             }
 

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

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with {type: "macro"};
+
 import { 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";
@@ -10,7 +12,7 @@ import { TouchController } from "@/modules/touch-controller";
 import { VibrationManager } from "@/modules/vibration-manager";
 import { BxEvent } from "@/utils/bx-event";
 import { BxIcon } from "@/utils/bx-icon";
-import { STATES, AppInterface, deepClone, SCRIPT_VERSION, STORAGE } from "@/utils/global";
+import { STATES, AppInterface, deepClone, SCRIPT_VERSION, STORAGE, SCRIPT_VARIANT } from "@/utils/global";
 import { t, Translations } from "@/utils/translation";
 import { BxSelectElement } from "@/web-components/bx-select";
 import { setNearby } from "@/utils/navigation-utils";
@@ -38,6 +40,7 @@ type SettingTabContentItem = Partial<{
     onChange: (e: any, value: number) => void;
     onCreated: (setting: SettingTabContentItem, $control: any) => void;
     params: any;
+    requiredVariants?: BuildVariant | Array<BuildVariant>;
 }>
 
 type SettingTabContent = {
@@ -48,12 +51,14 @@ type SettingTabContent = {
     helpUrl?: string;
     content?: any;
     items?: Array<SettingTabContentItem | PrefKey | (($parent: HTMLElement) => void) | false>;
+    requiredVariants?: BuildVariant | Array<BuildVariant>;
 };
 
 type SettingTab = {
     icon: SVGElement;
     group: 'global';
     items: Array<SettingTabContent | false>;
+    requiredVariants?: BuildVariant | Array<BuildVariant>;
 };
 
 export class SettingsNavigationDialog extends NavigationDialog {
@@ -205,12 +210,14 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.STREAM_COMBINE_SOURCES,
         ],
     }, {
+        requiredVariants: 'full',
         group: 'co-op',
         label: t('local-co-op'),
         items: [
             PrefKey.LOCAL_CO_OP_ENABLED,
         ],
     }, {
+        requiredVariants: 'full',
         group: 'mkb',
         label: t('mouse-and-keyboard'),
         items: [
@@ -219,6 +226,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.MKB_HIDE_IDLE_CURSOR,
         ],
     }, {
+        requiredVariants: 'full',
         group: 'touch-control',
         label: t('touch-controller'),
         note: !STATES.userAgent.capabilities.touch ? '⚠️ ' + t('device-unsupported-touch') : null,
@@ -247,6 +255,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.UI_HIDE_SECTIONS,
         ],
     }, {
+        requiredVariants: 'full',
         group: 'game-bar',
         label: t('game-bar'),
         items: [
@@ -357,6 +366,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
     }];
 
     private readonly TAB_DISPLAY_ITEMS: Array<SettingTabContent | false> = [{
+        requiredVariants: 'full',
         group: 'audio',
         label: t('audio'),
         helpUrl: 'https://better-xcloud.github.io/ingame-features/#audio',
@@ -441,7 +451,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }],
     },
 
-    STATES.userAgent.capabilities.touch && {
+    isFullVersion() && STATES.userAgent.capabilities.touch && {
         group: 'touch-control',
         label: t('touch-controller'),
         items: [{
@@ -499,18 +509,19 @@ export class SettingsNavigationDialog extends NavigationDialog {
         group: 'mkb',
         label: t('virtual-controller'),
         helpUrl: 'https://better-xcloud.github.io/mouse-and-keyboard/',
-        content: MkbRemapper.INSTANCE.render(),
+        content: isFullVersion() && MkbRemapper.INSTANCE.render(),
     }];
 
     private readonly TAB_NATIVE_MKB_ITEMS: Array<SettingTabContent | false> = [{
+        requiredVariants: 'full',
         group: 'native-mkb',
         label: t('native-mkb'),
-        items: [{
+        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);
@@ -519,9 +530,10 @@ export class SettingsNavigationDialog extends NavigationDialog {
     }];
 
     private readonly TAB_SHORTCUTS_ITEMS: Array<SettingTabContent | false> = [{
+        requiredVariants: 'full',
         group: 'controller-shortcuts',
         label: t('controller-shortcuts'),
-        content: ControllerShortcut.renderSettings(),
+        content: isFullVersion() && ControllerShortcut.renderSettings(),
     }];
 
     private readonly TAB_STATS_ITEMS: Array<SettingTabContent | false> = [{
@@ -575,24 +587,28 @@ export class SettingsNavigationDialog extends NavigationDialog {
             icon: BxIcon.CONTROLLER,
             group: 'controller',
             items: this.TAB_CONTROLLER_ITEMS,
+            requiredVariants: 'full',
         },
 
-        getPref(PrefKey.MKB_ENABLED) && {
+        isFullVersion() && getPref(PrefKey.MKB_ENABLED) && {
             icon: BxIcon.VIRTUAL_CONTROLLER,
             group: 'mkb',
             items: this.TAB_VIRTUAL_CONTROLLER_ITEMS,
+            requiredVariants: 'full',
         },
 
-        AppInterface && getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' && {
+        isFullVersion() && AppInterface && getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' && {
             icon: BxIcon.NATIVE_MKB,
             group: 'native-mkb',
             items: this.TAB_NATIVE_MKB_ITEMS,
+            requiredVariants: 'full',
         },
 
         {
             icon: BxIcon.COMMAND,
             group: 'shortcuts',
             items: this.TAB_SHORTCUTS_ITEMS,
+            requiredVariants: 'full',
         },
 
         {
@@ -715,6 +731,15 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }
     }
 
+    private isSupportedVariant(requiredVariants: BuildVariant | Array<BuildVariant> | undefined) {
+        if (typeof requiredVariants === 'undefined') {
+            return true;
+        }
+
+        requiredVariants = typeof requiredVariants === 'string' ? [requiredVariants] : requiredVariants;
+        return requiredVariants.includes(SCRIPT_VARIANT);
+    }
+
     private async renderSuggestions(e: Event) {
         const $btnSuggest = (e.target as HTMLElement).closest('div')!;
         $btnSuggest.toggleAttribute('bx-open');
@@ -943,6 +968,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
             for (const $child of Array.from(this.$settings.children)) {
                 if ($child.getAttribute('data-tab-group') === settingTab.group) {
                     $child.classList.remove('bx-gone');
+
+                    // Calculate size of controller-friendly select boxes
+                    if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                        this.dialogManager.calculateSelectBoxes($child as HTMLElement);
+                    }
                 } else {
                     $child.classList.add('bx-gone');
                 }
@@ -961,7 +991,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
 
     private onGlobalSettingChanged(e: Event) {
         // Clear PatcherCache;
-        PatcherCache.clear();
+        isFullVersion() && PatcherCache.clear();
 
         this.$btnReload.classList.add('bx-danger');
 
@@ -1096,6 +1126,10 @@ export class SettingsNavigationDialog extends NavigationDialog {
             prefDefinition = getPrefDefinition(pref);
         }
 
+        if (prefDefinition && !this.isSupportedVariant(prefDefinition.requiredVariants)) {
+            return;
+        }
+
         let label = prefDefinition?.label || setting.label;
         let note = prefDefinition?.note || setting.note;
         const experimental = prefDefinition?.experimental || setting.experimental;
@@ -1118,6 +1152,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }
 
         let $label;
+
         const $row = CE('label', {
             class: 'bx-settings-row',
             for: `bx_setting_${pref}`,
@@ -1128,10 +1163,9 @@ export class SettingsNavigationDialog extends NavigationDialog {
         },
             $label = CE('span', {class: 'bx-settings-label'},
                 label,
-                note && CE('div', {class: 'bx-settings-dialog-note'}, note),
-                setting.unsupported && CE('div', {class: 'bx-settings-dialog-note'}, t('browser-unsupported-feature')),
+                note ? CE('div', {class: 'bx-settings-dialog-note'}, note) : prefDefinition?.unsupported && CE('div', {class: 'bx-settings-dialog-note'}, t('browser-unsupported-feature')),
             ),
-            !setting.unsupported && $control,
+            !prefDefinition?.unsupported && $control,
         );
 
         // Make link inside <label> focusable
@@ -1144,7 +1178,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }
 
         $tabContent.appendChild($row);
-        setting.onCreated && setting.onCreated(setting, $control);
+        !prefDefinition?.unsupported && setting.onCreated && setting.onCreated(setting, $control);
     }
 
     private setupDialog() {
@@ -1232,6 +1266,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
                 continue;
             }
 
+            // Don't render unsupported build variant
+            if (!this.isSupportedVariant(settingTab.requiredVariants)) {
+                continue;
+            }
+
             // Don't render other tabs in unsupported regions
             if (settingTab.group !== 'global' && !this.renderFullSettings) {
                 continue;
@@ -1250,6 +1289,10 @@ export class SettingsNavigationDialog extends NavigationDialog {
                     continue;
                 }
 
+                if (!this.isSupportedVariant(settingTabContent.requiredVariants)) {
+                    continue;
+                }
+
                 // Don't render other settings in unsupported regions
                 if (!this.renderFullSettings && settingTab.group === 'global' && settingTabContent.group !== 'general' && settingTabContent.group !== 'footer') {
                     continue;
@@ -1260,6 +1303,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
                 // If label is "Better xCloud" => create a link to Releases page
                 if (label === t('better-xcloud')) {
                     label += ' ' + SCRIPT_VERSION;
+
+                    if (SCRIPT_VARIANT === 'lite') {
+                        label += ' (Lite)';
+                    }
+
                     label = createButton({
                         label: label,
                         url: 'https://github.com/redphx/better-xcloud/releases',

src/modules/ui/game-tile.ts

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

src/modules/ui/guide-menu.ts

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with {type: "macro"};
+
 import { BxEvent } from "@/utils/bx-event";
 import { AppInterface, STATES } from "@/utils/global";
 import { createButton, ButtonStyle, CE } from "@/utils/html";
@@ -22,7 +24,7 @@ export class GuideMenu {
                 }, {once: true});
 
                 // Close all xCloud's dialogs
-                window.BX_EXPOSED.dialogRoutes.closeAll();
+                GuideMenu.#closeGuideMenu();
             },
         }),
 
@@ -53,7 +55,7 @@ export class GuideMenu {
                 }
 
                 // Close all xCloud's dialogs
-                window.BX_EXPOSED.dialogRoutes.closeAll();
+                GuideMenu.#closeGuideMenu();
             },
         }),
 
@@ -66,7 +68,7 @@ export class GuideMenu {
                 confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
 
                 // Close all xCloud's dialogs
-                window.BX_EXPOSED.dialogRoutes.closeAll();
+                GuideMenu.#closeGuideMenu();
             },
             attributes: {
                 'data-state': 'playing',
@@ -76,6 +78,17 @@ export class GuideMenu {
 
     static #$renderedButtons: HTMLElement;
 
+    static #closeGuideMenu() {
+        if (window.BX_EXPOSED.dialogRoutes) {
+            window.BX_EXPOSED.dialogRoutes.closeAll();
+            return;
+        }
+
+        // Use alternative method for Lite version
+        const $btnClose = document.querySelector('#gamepass-dialog-root button[class^=Header-module__closeButton]') as HTMLElement;
+        $btnClose && $btnClose.click();
+    }
+
     static #renderButtons() {
         if (GuideMenu.#$renderedButtons) {
             return GuideMenu.#$renderedButtons;
@@ -115,9 +128,11 @@ export class GuideMenu {
     }
 
     static #injectHome($root: HTMLElement, isPlaying = false) {
-        const $achievementsProgress = $root.querySelector('button[class*=AchievementsButton-module__progressBarContainer]');
-        if ($achievementsProgress) {
-            TrueAchievements.injectAchievementsProgress($achievementsProgress as HTMLElement);
+        if (isFullVersion()) {
+            const $achievementsProgress = $root.querySelector('button[class*=AchievementsButton-module__progressBarContainer]');
+            if ($achievementsProgress) {
+                TrueAchievements.injectAchievementsProgress($achievementsProgress as HTMLElement);
+            }
         }
 
         // Find the element to add buttons to
@@ -162,7 +177,7 @@ export class GuideMenu {
     static observe($addedElm: HTMLElement) {
         const className = $addedElm.className;
 
-        if (className.includes('AchievementsButton-module__progressBarContainer')) {
+        if (isFullVersion() && className.includes('AchievementsButton-module__progressBarContainer')) {
             TrueAchievements.injectAchievementsProgress($addedElm);
             return;
         }
@@ -174,10 +189,12 @@ export class GuideMenu {
         }
 
         // Achievement Details page
-        const $achievDetailPage = $addedElm.querySelector('div[class*=AchievementDetailPage]');
-        if ($achievDetailPage) {
-            TrueAchievements.injectAchievementDetailPage($achievDetailPage as HTMLElement);
-            return;
+        if (isFullVersion()) {
+            const $achievDetailPage = $addedElm.querySelector('div[class*=AchievementDetailPage]');
+            if ($achievDetailPage) {
+                TrueAchievements.injectAchievementDetailPage($achievDetailPage as HTMLElement);
+                return;
+            }
         }
 
         // Find navigation bar

src/modules/ui/header.ts

@@ -63,7 +63,7 @@ export class HeaderSection {
     static checkHeader() {
         let $target = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
         if (!$target) {
-            $target = document.querySelector("div[class^=UnsupportedMarketPage-module__buttons]");
+            $target = document.querySelector('div[class^=UnsupportedMarketPage-module__buttons]');
         }
 
         $target && HeaderSection.#injectSettingsButton($target as HTMLElement);

src/modules/ui/product-details.ts

@@ -1,12 +1,11 @@
 import { BX_FLAGS } from "@/utils/bx-flags";
 import { BxIcon } from "@/utils/bx-icon";
 import { AppInterface } from "@/utils/global";
-import { ButtonStyle, createButton } from "@/utils/html";
+import { ButtonStyle, CE, createButton } from "@/utils/html";
 import { t } from "@/utils/translation";
 
 export class ProductDetailsPage {
     private static $btnShortcut = AppInterface && createButton({
-        classes: ['bx-button-shortcut'],
         icon: BxIcon.CREATE_SHORTCUT,
         label: t('create-shortcut'),
         style: ButtonStyle.FOCUSABLE,
@@ -17,7 +16,6 @@ export class ProductDetailsPage {
     });
 
     private static $btnWallpaper = AppInterface && createButton({
-        classes: ['bx-button-shortcut'],
         icon: BxIcon.DOWNLOAD,
         label: t('wallpaper'),
         style: ButtonStyle.FOCUSABLE,
@@ -48,17 +46,12 @@ export class ProductDetailsPage {
             // Find action buttons container
             const $container = document.querySelector('div[class*=ActionButtons-module__container]');
             if ($container && $container.parentElement) {
-                const fragment = document.createDocumentFragment();
-
-                // Shortcut button
-                if (BX_FLAGS.DeviceInfo.deviceType === 'android') {
-                    fragment.appendChild(ProductDetailsPage.$btnShortcut);
-                }
-
-                // Wallpaper button
-                fragment.appendChild(ProductDetailsPage.$btnWallpaper);
-
-                $container.parentElement.appendChild(fragment);
+                $container.parentElement.appendChild(CE('div', {
+                    class: 'bx-product-details-buttons',
+                },
+                    BX_FLAGS.DeviceInfo.deviceType === 'android' && ProductDetailsPage.$btnShortcut,
+                    ProductDetailsPage.$btnWallpaper,
+                ));
             }
         }, 500);
     }

src/types/index.d.ts

@@ -1,7 +1,9 @@
+type BuildVariant = 'full' | 'lite';
+
 // Get type of an array's element
 type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 
-type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>
+type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;
 
 interface Window {
     AppInterface: any;

src/types/setting-definition.d.ts

@@ -24,6 +24,7 @@ export type SettingDefinition = {
     suggest: PartialRecord<SuggestedSettingCategory, any>,
     ready: (setting: SettingDefinition) => void;
     type: SettingElementType,
+    requiredVariants: BuildVariant | Array<BuildVariant>;
     // migrate?: (this: Preferences, savedPrefs: any, value: any) => void;
 }> & (
     {} | {

src/types/stream-stats.d.ts

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

src/utils/bx-exposed.ts

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with {type: "macro"};
+
 import { ControllerShortcut } from "@/modules/controller-shortcut";
 import { BxEvent } from "@utils/bx-event";
 import { deepClone, STATES } from "@utils/global";
@@ -20,7 +22,7 @@ export type SupportedInputTypeValue = (typeof SupportedInputType)[keyof typeof S
 export const BxExposed = {
     getTitleInfo: () => STATES.currentStream.titleInfo,
 
-    modifyTitleInfo: (titleInfo: XcloudTitleInfo): XcloudTitleInfo => {
+    modifyTitleInfo: isFullVersion() && function(titleInfo: XcloudTitleInfo): XcloudTitleInfo {
         // Clone the object since the original is read-only
         titleInfo = deepClone(titleInfo);
 
@@ -110,8 +112,8 @@ export const BxExposed = {
         }
     },
 
-    handleControllerShortcut: ControllerShortcut.handle,
-    resetControllerShortcut: ControllerShortcut.reset,
+    handleControllerShortcut: isFullVersion() && ControllerShortcut.handle,
+    resetControllerShortcut: isFullVersion() && ControllerShortcut.reset,
 
     overrideSettings: {
         'Tv_settings': {

src/utils/gamepad.ts

@@ -1,4 +1,4 @@
-import { EmulatedMkbHandler } from "@modules/mkb/mkb-handler";
+import { VIRTUAL_GAMEPAD_ID } from "@modules/mkb/mkb-handler";
 import { t } from "@utils/translation";
 import { Toast } from "@utils/toast";
 import { BxLogger } from "@utils/bx-logger";
@@ -8,7 +8,7 @@ import { getPref } from "./settings-storages/global-settings-storage";
 // Show a toast when connecting/disconecting controller
 export function showGamepadToast(gamepad: Gamepad) {
     // Don't show Toast for virtual controller
-    if (gamepad.id === EmulatedMkbHandler.VIRTUAL_GAMEPAD_ID) {
+    if (gamepad.id === VIRTUAL_GAMEPAD_ID) {
         return;
     }
 

src/utils/global.ts

@@ -2,6 +2,7 @@ import type { BaseSettingsStore } from "./settings-storages/base-settings-storag
 import { UserAgent } from "./user-agent";
 
 export const SCRIPT_VERSION = Bun.env.SCRIPT_VERSION!;
+export const SCRIPT_VARIANT = Bun.env.BUILD_VARIANT! as BuildVariant;
 
 export const AppInterface = window.AppInterface;
 

src/utils/html.ts

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

src/utils/network.ts

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with {type: "macro"};
+
 import { BxEvent } from "@utils/bx-event";
 import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
 import { TouchController } from "@modules/touch-controller";
@@ -222,7 +224,7 @@ export function interceptHttpRequests() {
                 for (let i = 1; i < obj.length; i++) {
                     gamepassAllGames.push(obj[i].id);
                 }
-            } else if (url.includes(GamePassCloudGallery.TOUCH)) {
+            } else if (isFullVersion() && url.includes(GamePassCloudGallery.TOUCH)) {
                 try {
                     let customList = TouchController.getCustomList();
 
@@ -262,7 +264,7 @@ export function interceptHttpRequests() {
             requestType = 'xcloud';
         }
 
-        if (requestType === 'xhome') {
+        if (isFullVersion() && requestType === 'xhome') {
             return XhomeInterceptor.handle(request as Request);
         }
 

src/utils/screenshot.ts

@@ -31,7 +31,7 @@ export class Screenshot {
     }
 
     static updateCanvasFilters(filters: string) {
-        Screenshot.#canvasContext.filter = filters;
+        Screenshot.#canvasContext && (Screenshot.#canvasContext.filter = filters);
     }
 
     static #onAnimationEnd(e: Event) {

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

@@ -3,6 +3,7 @@ import type { NumberStepperParams, SettingDefinitions } from "@/types/setting-de
 import { BxEvent } from "../bx-event";
 import { SettingElementType } from "../setting-element";
 import { t } from "../translation";
+import { SCRIPT_VARIANT } from "../global";
 
 export class BaseSettingsStore {
     private storage: Storage;
@@ -18,6 +19,11 @@ export class BaseSettingsStore {
         for (settingId in definitions) {
             const setting = definitions[settingId];
 
+            // Convert requiredVariants to array
+            if (typeof setting.requiredVariants === 'string') {
+                setting.requiredVariants = [setting.requiredVariants];
+            }
+
             /*
             if (setting.migrate && settingId in savedPrefs) {
                 setting.migrate.call(this, savedPrefs, savedPrefs[settingId]);
@@ -58,9 +64,16 @@ export class BaseSettingsStore {
             return;
         }
 
+        const definition = this.definitions[key];
+
+        // Return default value if build variant is different
+        if (definition.requiredVariants && !definition.requiredVariants.includes(SCRIPT_VARIANT)) {
+            return definition.default;
+        }
+
         // Return default value if the feature is not supported
-        if (checkUnsupported && this.definitions[key].unsupported) {
-            return this.definitions[key].default;
+        if (checkUnsupported && definition.unsupported) {
+            return definition.default;
         }
 
         if (!(key in this.settings)) {

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

@@ -3,7 +3,6 @@ import { PrefKey, StorageKey } from "@/enums/pref-keys";
 import { StreamPlayerType, StreamVideoProcessing } from "@/enums/stream-player";
 import { UiSection } from "@/enums/ui-sections";
 import { UserAgentProfile } from "@/enums/user-agent";
-import { StreamStat } from "@/modules/stream/stream-stats";
 import { type SettingDefinition, type SettingDefinitions } from "@/types/setting-definition";
 import { BX_FLAGS } from "../bx-flags";
 import { STATES, AppInterface, STORAGE } from "../global";
@@ -12,6 +11,7 @@ import { t, SUPPORTED_LANGUAGES } from "../translation";
 import { UserAgent } from "../user-agent";
 import { BaseSettingsStore as BaseSettingsStorage } from "./base-settings-storage";
 import { SettingElementType } from "../setting-element";
+import { StreamStat } from "../stream-stats-collector";
 
 
 export const enum StreamResolution {
@@ -96,7 +96,7 @@ function getSupportedCodecProfiles() {
 }
 
 export class GlobalSettingsStorage extends BaseSettingsStorage {
-    private static readonly DEFINITIONS: SettingDefinitions = {
+    private static readonly DEFINITIONS = {
         [PrefKey.LAST_UPDATE_CHECK]: {
             default: 0,
         },
@@ -197,6 +197,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.SCREENSHOT_APPLY_FILTERS]: {
+            requiredVariants: 'full',
             label: t('screenshot-apply-filters'),
             default: false,
         },
@@ -211,6 +212,8 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.STREAM_COMBINE_SOURCES]: {
+            requiredVariants: 'full',
+
             label: t('combine-audio-video-streams'),
             default: false,
             experimental: true,
@@ -218,6 +221,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.STREAM_TOUCH_CONTROLLER]: {
+            requiredVariants: 'full',
             label: t('tc-availability'),
             default: StreamTouchController.ALL,
             options: {
@@ -233,11 +237,13 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             },
         },
         [PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF]: {
+            requiredVariants: 'full',
             label: t('tc-auto-off'),
             default: false,
             unsupported: !STATES.userAgent.capabilities.touch,
         },
         [PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY]: {
+            requiredVariants: 'full',
             type: SettingElementType.NUMBER_STEPPER,
             label: t('tc-default-opacity'),
             default: 100,
@@ -252,6 +258,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             unsupported: !STATES.userAgent.capabilities.touch,
         },
         [PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD]: {
+            requiredVariants: 'full',
             label: t('tc-standard-layout-style'),
             default: 'default',
             options: {
@@ -262,6 +269,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             unsupported: !STATES.userAgent.capabilities.touch,
         },
         [PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM]: {
+            requiredVariants: 'full',
             label: t('tc-custom-layout-style'),
             default: 'default',
             options: {
@@ -276,15 +284,18 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             default: false,
         },
         [PrefKey.MKB_HIDE_IDLE_CURSOR]: {
+            requiredVariants: 'full',
             label: t('hide-idle-cursor'),
             default: false,
         },
         [PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG]: {
+            requiredVariants: 'full',
             label: t('disable-post-stream-feedback-dialog'),
             default: false,
         },
 
         [PrefKey.BITRATE_VIDEO_MAX]: {
+            requiredVariants: 'full',
             type: SettingElementType.NUMBER_STEPPER,
             label: t('bitrate-video-maximum'),
             note: '⚠️ ' + t('unexpected-behavior'),
@@ -306,10 +317,11 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             },
             suggest: {
                 highest: 0,
-            }
+            },
         },
 
         [PrefKey.GAME_BAR_POSITION]: {
+            requiredVariants: 'full',
             label: t('position'),
             default: 'bottom-left',
             options: {
@@ -320,6 +332,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.LOCAL_CO_OP_ENABLED]: {
+            requiredVariants: 'full',
             label: t('enable-local-co-op-support'),
             default: false,
             note: CE<HTMLAnchorElement>('a', {
@@ -341,15 +354,18 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.CONTROLLER_ENABLE_SHORTCUTS]: {
+            requiredVariants: 'full',
             default: false,
         },
 
         [PrefKey.CONTROLLER_ENABLE_VIBRATION]: {
+            requiredVariants: 'full',
             label: t('controller-vibration'),
             default: true,
         },
 
         [PrefKey.CONTROLLER_DEVICE_VIBRATION]: {
+            requiredVariants: 'full',
             label: t('device-vibration'),
             default: ControllerDeviceVibration.OFF,
             options: {
@@ -360,6 +376,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.CONTROLLER_VIBRATION_INTENSITY]: {
+            requiredVariants: 'full',
             label: t('vibration-intensity'),
             type: SettingElementType.NUMBER_STEPPER,
             default: 100,
@@ -373,6 +390,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.MKB_ENABLED]: {
+            requiredVariants: 'full',
             label: t('enable-mkb'),
             default: false,
             unsupported: ((): string | boolean => {
@@ -398,6 +416,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.NATIVE_MKB_ENABLED]: {
+            requiredVariants: 'full',
             label: t('native-mkb'),
             default: 'default',
             options: {
@@ -419,6 +438,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY]: {
+            requiredVariants: 'full',
             label: t('horizontal-scroll-sensitivity'),
             type: SettingElementType.NUMBER_STEPPER,
             default: 0,
@@ -438,6 +458,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY]: {
+            requiredVariants: 'full',
             label: t('vertical-scroll-sensitivity'),
             type: SettingElementType.NUMBER_STEPPER,
             default: 0,
@@ -457,10 +478,12 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.MKB_DEFAULT_PRESET_ID]: {
+            requiredVariants: 'full',
             default: 0,
         },
 
         [PrefKey.MKB_ABSOLUTE_MOUSE]: {
+            requiredVariants: 'full',
             default: false,
         },
 
@@ -470,6 +493,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.UI_LOADING_SCREEN_GAME_ART]: {
+            requiredVariants: 'full',
             label: t('show-game-art'),
             default: true,
         },
@@ -493,6 +517,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.UI_LAYOUT]: {
+            requiredVariants: 'full',
             label: t('layout'),
             default: 'default',
             options: {
@@ -508,11 +533,13 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.UI_HOME_CONTEXT_MENU_DISABLED]: {
+            requiredVariants: 'full',
             label: t('disable-home-context-menu'),
             default: STATES.browser.capabilities.touch,
         },
 
         [PrefKey.UI_HIDE_SECTIONS]: {
+            requiredVariants: 'full',
             label: t('hide-sections'),
             default: [],
             multipleOptions: {
@@ -529,6 +556,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME]: {
+            requiredVariants: 'full',
             label: t('show-wait-time-in-game-card'),
             default: false,
         },
@@ -663,6 +691,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             default: false,
         },
         [PrefKey.AUDIO_ENABLE_VOLUME_CONTROL]: {
+            requiredVariants: 'full',
             label: t('enable-volume-control'),
             default: false,
         },
@@ -684,16 +713,28 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             label: t('stats'),
             default: [StreamStat.PING, StreamStat.FPS, StreamStat.BITRATE, StreamStat.DECODE_TIME, StreamStat.PACKETS_LOST, StreamStat.FRAMES_LOST],
             multipleOptions: {
+                [StreamStat.CLOCK]: `${StreamStat.CLOCK.toUpperCase()}: ${t('clock')}`,
+                [StreamStat.PLAYTIME]: `${StreamStat.PLAYTIME.toUpperCase()}: ${t('playtime')}`,
+                [StreamStat.BATTERY]: `${StreamStat.BATTERY.toUpperCase()}: ${t('battery')}`,
                 [StreamStat.PING]: `${StreamStat.PING.toUpperCase()}: ${t('stat-ping')}`,
                 [StreamStat.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')}`,
             },
             params: {
                 size: 6,
             },
+            ready: setting => {
+                // Remove Battery option in unsupported browser
+                const multipleOptions = (setting as any).multipleOptions;
+                if (!STATES.browser.capabilities.batteryApi) {
+                    delete multipleOptions[StreamStat.BATTERY];
+                }
+            },
         },
         [PrefKey.STATS_SHOW_WHEN_PLAYING]: {
             label: t('show-stats-on-startup'),
@@ -743,11 +784,13 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.REMOTE_PLAY_ENABLED]: {
+            requiredVariants: 'full',
             label: t('enable-remote-play-feature'),
             default: false,
         },
 
         [PrefKey.REMOTE_PLAY_RESOLUTION]: {
+            requiredVariants: 'full',
             default: StreamResolution.DIM_1080P,
             options: {
                 [StreamResolution.DIM_1080P]: '1080p',
@@ -756,11 +799,12 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.GAME_FORTNITE_FORCE_CONSOLE]: {
+            requiredVariants: 'full',
             label: '🎮 ' + t('fortnite-force-console-version'),
             default: false,
             note: t('fortnite-allow-stw-mode'),
         },
-    };
+    } satisfies SettingDefinitions;
 
     constructor() {
         super(StorageKey.GLOBAL, GlobalSettingsStorage.DEFINITIONS);

src/utils/stream-stats-collector.ts

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

src/utils/translation.ts

@@ -40,13 +40,7 @@ const Texts = {
     "auto": "Auto",
     "back-to-home": "Back to home",
     "back-to-home-confirm": "Do you want to go back to the home page (without disconnecting)?",
-    "badge-audio": "Audio",
-    "badge-battery": "Battery",
-    "badge-in": "In",
-    "badge-out": "Out",
-    "badge-playtime": "Playtime",
-    "badge-server": "Server",
-    "badge-video": "Video",
+    "battery": "Battery",
     "battery-saving": "Battery saving",
     "better-xcloud": "Better xCloud",
     "bitrate-audio-maximum": "Maximum audio bitrate",
@@ -63,6 +57,7 @@ const Texts = {
     "clarity-boost": "Clarity boost",
     "clarity-boost-warning": "These settings don't work when the Clarity Boost mode is ON",
     "clear": "Clear",
+    "clock": "Clock",
     "close": "Close",
     "close-app": "Close app",
     "combine-audio-video-streams": "Combine audio & video streams",
@@ -97,6 +92,7 @@ const Texts = {
     "disable-xcloud-analytics": "Disable xCloud analytics",
     "disabled": "Disabled",
     "disconnected": "Disconnected",
+    "download": "Download",
     "edit": "Edit",
     "enable-controller-shortcuts": "Enable controller shortcuts",
     "enable-local-co-op-support": "Enable local co-op support",
@@ -171,8 +167,8 @@ const Texts = {
         (e: any) => `Dostępna jest nowa wersja ${e.version}`,
         (e: any) => `Versão ${e.version} disponível`,
         ,
-        ,
-        ,
+        (e: any) => `เวอร์ชัน ${e.version} พร้อมใช้งานแล้ว`,
+        (e: any) => `${e.version} sayılı yeni sürüm mevcut`,
         (e: any) => `Доступна версія ${e.version}`,
         (e: any) => `Đã có phiên bản ${e.version}`,
         (e: any) => `版本 ${e.version} 可供更新`,
@@ -186,6 +182,7 @@ const Texts = {
     "opacity": "Opacity",
     "other": "Other",
     "playing": "Playing",
+    "playtime": "Playtime",
     "poland": "Poland",
     "position": "Position",
     "powered-off": "Powered off",
@@ -232,7 +229,7 @@ const Texts = {
         (e: any) => `Zalecane ustawienia dla ${e.device}`,
         (e: any) => `Configurações recomendadas para ${e.device}`,
         (e: any) => `Рекомендуемые настройки для ${e.device}`,
-        ,
+        (e: any) => `การตั้งค่าที่แนะนำสำหรับ ${e.device}`,
         (e: any) => `${e.device} için önerilen ayarlar`,
         (e: any) => `Рекомендовані налаштування для ${e.device}`,
         (e: any) => `Cấu hình được đề xuất cho ${e.device}`,
@@ -350,6 +347,7 @@ const Texts = {
     "unlimited": "Unlimited",
     "unmuted": "Unmuted",
     "unsharp-masking": "Unsharp masking",
+    "upload": "Upload",
     "use-mouse-absolute-position": "Use mouse's absolute position",
     "use-this-at-your-own-risk": "Use this at your own risk",
     "user-agent-profile": "User-Agent profile",

src/utils/true-achievements.ts

@@ -1,5 +1,5 @@
 import { BxIcon } from "./bx-icon";
-import { AppInterface, STATES } from "./global";
+import { AppInterface, SCRIPT_VARIANT, STATES } from "./global";
 import { ButtonStyle, CE, clearDataSet, createButton, getReactProps } from "./html";
 import { t } from "./translation";
 
@@ -27,7 +27,7 @@ export class TrueAchievements {
         TrueAchievements.open(true, dataset.xboxTitleId, dataset.id);
 
         // Close all xCloud's dialogs
-        window.BX_EXPOSED.dialogRoutes.closeAll();
+        window.BX_EXPOSED.dialogRoutes?.closeAll();
     }
 
     private static $hiddenLink = CE<HTMLAnchorElement>('a', {
@@ -53,6 +53,11 @@ export class TrueAchievements {
     }
 
     static injectAchievementsProgress($elm: HTMLElement) {
+        // Only do this in Full version
+        if (SCRIPT_VARIANT !== 'full') {
+            return;
+        }
+
         const $parent = $elm.parentElement!;
 
         // Wrap xCloud's element with our own
@@ -89,6 +94,11 @@ export class TrueAchievements {
     }
 
     static injectAchievementDetailPage($parent: HTMLElement) {
+        // Only do this in Full version
+        if (SCRIPT_VARIANT !== 'full') {
+            return;
+        }
+
         const props = getReactProps($parent);
         if (!props) {
             return;

src/utils/xcloud-interceptor.ts

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with {type: "macro"};
+
 import { LoadingScreen } from "@modules/loading-screen";
 import { RemotePlayManager } from "@/modules/remote-play-manager";
 import { StreamBadges } from "@modules/stream/stream-badges";
@@ -147,7 +149,7 @@ class XcloudInterceptor {
         }
 
         // Touch controller for all games
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
+        if (isFullVersion() && getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
             const titleInfo = STATES.currentStream.titleInfo;
             if (titleInfo?.details.hasTouchSupport) {
                 TouchController.disable();
@@ -187,7 +189,7 @@ class XcloudInterceptor {
         }
 
         // Enable touch controller
-        if (TouchController.isEnabled()) {
+        if (isFullVersion() && TouchController.isEnabled()) {
             overrides.inputConfiguration.enableTouchInput = true;
             overrides.inputConfiguration.maxTouchPoints = 10;
         }