Update better-xcloud.user.js

* Fix games with custom touch control sometimes not showing touch icon

* Create game-bar with screenshot button

* Disable Game bar when opening the Guide

* Remove SCREENSHOT_BUTTON_POSITION pref

* Make the touch control action functional

* Show game bar when the game starts

* Fix 720p/High not working (#387)

* Update icons

* Update game bar's animations

* Reset states of Game bar actions before playing

* Don't show Touch control action on non-touch-supported devices

* Clean up

* Update translations

* Update actions' texts

* Clean up

.github/ISSUE_TEMPLATE/01-bug-report.yml

@@ -9,7 +9,8 @@ body:
       value: |
         Please fill out the following information to help us resolve the issue.
         > [!warning]
-        > Only use English. Any other languages will be deleted.
+        > - Only use English. Any other languages will be deleted.  
+        > - Search first before making a report.  
   - type: dropdown
     id: device_type
     attributes:

dist/better-xcloud.meta.js

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

src/assets/css/button.styl

@@ -71,9 +71,10 @@
 
     span {
         display: inline-block;
-        height: calc(var(--bx-button-height) - 2px);
+        height: var(--bx-button-height);
         line-height: var(--bx-button-height);
         vertical-align: middle;
+        vertical-align: -webkit-baseline-middle;
         color: #fff;
         overflow: hidden;
         white-space: nowrap;

src/assets/css/game-bar.styl

@@ -0,0 +1,118 @@
+#bx-game-bar {
+    z-index: var(--bx-game-bar-z-index);
+    position: fixed;
+    bottom: 0;
+    width: 40px;
+    height: 90px;
+    overflow: visible;
+    cursor: pointer;
+
+    > svg {
+        display: none;
+        pointer-events: none;
+        position: absolute;
+        height: 28px;
+        margin-top: 16px;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            > svg {
+                display: block;
+            }
+        }
+    }
+
+    .bx-game-bar-container {
+        opacity: 0;
+        position absolute;
+        display: flex;
+        overflow: hidden;
+        background: #1a1b1ee8;
+        box-shadow: 0px 0px 6px #1c1c1c;
+        transition: opacity 0.1s ease-in;
+
+        &.bx-show {
+            opacity: 0.9;
+
+            + svg {
+                display: none !important;
+            }
+        }
+
+        &.bx-hide {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        button {
+            width: 60px;
+            height: 60px;
+            border-radius: 0;
+
+            svg {
+                width: 28px;
+                height: 28px;
+                transition: transform 0.08s ease 0s;
+            }
+
+            &:hover {
+                border-radius: 0;
+            }
+
+            &:active {
+                svg {
+                    transform: scale(0.75);
+                }
+            }
+
+            &.bx-activated {
+                background-color: white;
+
+                svg {
+                    filter: invert(1);
+                }
+            }
+        }
+
+        /* Touch controller buttons */
+        div[data-enabled] {
+            button {
+                display: none;
+            }
+        }
+
+        /* Show enabled button */
+        div[data-enabled='true'] {
+            button:first-of-type {
+                display: block;
+            }
+        }
+
+        /* Show enable button */
+        div[data-enabled='false'] {
+            button:last-of-type {
+                display: block;
+            }
+        }
+    }
+
+    &[data-position="bottom-left"] {
+        left: 0;
+        direction: ltr;
+
+        .bx-game-bar-container {
+            border-radius: 0 10px 10px 0;
+        }
+    }
+
+    &[data-position="bottom-right"] {
+        right: 0;
+        direction: rtl;
+
+        .bx-game-bar-container {
+            direction: ltr;
+            border-radius: 10px 0 0 10px;
+        }
+    }
+}

src/assets/css/global-settings.styl

@@ -1,17 +1,6 @@
-.bx-settings-reload-button-wrapper {
-    z-index: var(--bx-reload-button-z-index);
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    text-align: center;
-    background: #000000cf;
-    padding: 10px;
-
-    button {
-        max-width: 450px;
-        margin: 0 !important;
-    }
+.bx-settings-reload-button {
+    margin-top: 10px;
+    height: calc(var(--bx-button-height) * 1.5);
 }
 
 .bx-settings-container {
@@ -98,34 +87,56 @@
 
 .bx-settings-row {
     display: flex;
-    margin-bottom: 8px;
-    padding: 2px 4px;
+    padding: 6px 12px;
+    position: relative;
 
     label {
         flex: 1;
         align-self: center;
         margin-bottom: 0;
-        padding-left: 10px;
     }
 
 
-    &:focus-within {
-        @media (hover: none) {
-            background-color: #242424;
-        }
+    &:hover, &:focus-within {
+        background-color: #242424;
     }
 
     input {
         align-self: center;
         accent-color: var(--bx-primary-button-color);
+
+        &:focus {
+            accent-color: var(--bx-danger-button-color);
+        }
     }
 
-    select:disabled {
-        -webkit-appearance: none;
-        background: transparent;
-        text-align-last: right;
-        border: none;
-        color: #fff;
+    select {
+        &:disabled {
+            -webkit-appearance: none;
+            background: transparent;
+            text-align-last: right;
+            border: none;
+            color: #fff;
+        }
+    }
+
+    input[type=checkbox], select {
+        &:focus {
+            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
+        }
+    }
+
+
+    &:has(input:focus), &:has(select:focus) {
+        &::before {
+            content: ' ';
+            border-radius: 4px;
+            border: 2px solid #fff;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+        }
     }
 }
 
@@ -161,6 +172,10 @@
     &:hover {
         color: #6dd72b;
     }
+
+    &:focus {
+        text-decoration: underline;
+    }
 }
 
 .bx-settings-custom-user-agent {

src/assets/css/number-stepper.styl

@@ -3,7 +3,7 @@
 
     span {
         display: inline-block;
-        width: 40px;
+        min-width: 40px;
         font-family: var(--bx-monospaced-font);
         font-size: 14px;
     }

src/assets/css/root.styl

@@ -20,16 +20,15 @@
     --bx-danger-button-disabled-color: #a26c6c;
 
     --bx-toast-z-index: 9999;
-    --bx-reload-button-z-index: 9200;
     --bx-dialog-z-index: 9101;
     --bx-dialog-overlay-z-index: 9100;
     --bx-remote-play-popup-z-index: 9090;
     --bx-stats-bar-z-index: 9001;
     --bx-stream-settings-z-index: 9000;
     --bx-mkb-pointer-lock-msg-z-index: 8999;
-    --bx-screenshot-z-index: 8888;
-    --bx-touch-controller-bar-z-index: 5555;
+    --bx-game-bar-z-index: 8888;
     --bx-wait-time-box-z-index: 100;
+    --bx-screenshot-animation-z-index: 1;
 }
 
 @font-face {

src/assets/css/stream-actions.styl

@@ -1,46 +0,0 @@
-.bx-screenshot-button {
-    display: none;
-    opacity: 0;
-    position: fixed;
-    bottom: 0;
-    box-sizing: border-box;
-    width: 60px;
-    height: 90px;
-    padding: 16px 16px 46px 16px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    filter: drop-shadow(0 0 2px #000000B0);
-    transition: opacity 0.1s ease-in-out 0s, padding 0.1s ease-in 0s;
-    z-index: var(--bx-screenshot-z-index);
-
-    /* Credit: https://phosphoricons.com */
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMjguMzA4IDUuMDM4aC00LjI2NWwtMi4wOTctMy4xNDVhMS4yMyAxLjIzIDAgMCAwLTEuMDIzLS41NDhoLTkuODQ2YTEuMjMgMS4yMyAwIDAgMC0xLjAyMy41NDhMNy45NTYgNS4wMzhIMy42OTJBMy43MSAzLjcxIDAgMCAwIDAgOC43MzF2MTcuMjMxYTMuNzEgMy43MSAwIDAgMCAzLjY5MiAzLjY5MmgyNC42MTVBMy43MSAzLjcxIDAgMCAwIDMyIDI1Ljk2MlY4LjczMWEzLjcxIDMuNzEgMCAwIDAtMy42OTItMy42OTJ6bS02Ljc2OSAxMS42OTJjMCAzLjAzOS0yLjUgNS41MzgtNS41MzggNS41MzhzLTUuNTM4LTIuNS01LjUzOC01LjUzOCAyLjUtNS41MzggNS41MzgtNS41MzggNS41MzggMi41IDUuNTM4IDUuNTM4eiIvPjwvc3ZnPgo=');
-
-    &[data-showing=true] {
-        opacity: 0.9;
-    }
-
-    &[data-capturing=true] {
-        padding: 8px 8px 38px 8px;
-    }
-}
-
-.bx-screenshot-canvas {
-    display: none;
-}
-
-#bx-touch-controller-bar {
-    display: none;
-    opacity: 0;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 6vh;
-    z-index: var(--bx-touch-controller-bar-z-index);
-
-    &[data-showing=true] {
-        display: block;
-    }
-}

src/assets/css/stream.styl

@@ -19,3 +19,37 @@ body[data-media-type=default] .bx-stream-refresh-button {
 body[data-media-type=tv] .bx-stream-refresh-button {
     top: calc(var(--gds-focus-borderSize) + 80px) !important;
 }
+
+@keyframes bx-anim-taking-screenshot {
+    0% {
+        border: 0px solid #ffffff80;
+    }
+
+    50% {
+        border: 8px solid #ffffff80;
+    }
+
+    100% {
+        border: 0px solid #ffffff80;
+    }
+}
+
+div[data-testid=media-container] {
+    display: flex;
+
+    &.bx-taking-screenshot:before {
+        animation: bx-anim-taking-screenshot 0.5s ease;
+        content: ' ';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: var(--bx-screenshot-animation-z-index);
+    }
+}
+
+
+#game-stream video {
+    margin: auto;
+    align-self: center;
+    background: #000;
+}

src/assets/css/styles.styl

@@ -10,7 +10,7 @@
 
 @import 'stream.styl';
 @import 'number-stepper.styl';
-@import 'stream-actions.styl';
+@import 'game-bar.styl';
 @import 'stream-stats.styl';
 @import 'stream-settings.styl';
 @import 'mkb.styl';

src/assets/css/toast.styl

@@ -23,6 +23,7 @@
 
     &.bx-hide {
         opacity: 0;
+        pointer-events: none;
     }
 }
 

src/assets/svg/camera.svg

@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <g transform="matrix(.150985 0 0 .150985 -3.32603 -2.72209)" fill="none" stroke="#fff" stroke-width="16">
+        <path d="M208 208H48c-8.777 0-16-7.223-16-16V80c0-8.777 7.223-16 16-16h32l16-24h64l16 24h32c8.777 0 16 7.223 16 16v112c0 8.777-7.223 16-16 16z"/>
+        <circle cx="128" cy="132" r="36"/>
+    </g>
+</svg>

src/assets/svg/caret-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" stroke="#fff" fill="#fff" height="100%" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+    <path d="M6.755 1.924l-6 13.649c-.119.27-.119.578 0 .849l6 13.649c.234.533.857.775 1.389.541s.775-.857.541-1.389L2.871 15.997 8.685 2.773c.234-.533-.008-1.155-.541-1.389s-1.155.008-1.389.541z"/>
+</svg>

src/assets/svg/caret-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" stroke="#fff" fill="#fff" height="100%" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+    <path d="M2.685 1.924l6 13.649c.119.27.119.578 0 .849l-6 13.649c-.234.533-.857.775-1.389.541s-.775-.857-.541-1.389l5.813-13.225L.755 2.773c-.234-.533.008-1.155.541-1.389s1.155.008 1.389.541z"/>
+</svg>

src/assets/svg/microphone-slash.svg

@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d="M16 25.125v5.368M5.265 4.728l21.471 23.618m-4.789-5.267c-1.698 1.326-3.793 2.047-5.947 2.047-5.3 0-9.662-4.362-9.662-9.662"/>
+    <path d="M25.662 15.463a9.62 9.62 0 0 1-.978 4.242m-5.64.187c-.895.616-1.957.943-3.043.939-2.945 0-5.368-2.423-5.368-5.368v-4.831m.442-5.896A5.38 5.38 0 0 1 16 1.507c2.945 0 5.368 2.423 5.368 5.368v8.588c0 .188-.01.375-.03.562"/>
+</svg>

src/assets/svg/microphone.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d="M21.368 6.875A5.37 5.37 0 0 0 16 1.507a5.37 5.37 0 0 0-5.368 5.368v8.588A5.37 5.37 0 0 0 16 20.831a5.37 5.37 0 0 0 5.368-5.368V6.875zM16 25.125v5.368m9.662-15.03c0 5.3-4.362 9.662-9.662 9.662s-9.662-4.362-9.662-9.662"/>
+</svg>

src/assets/svg/touch-control-disable.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+    <g fill="none" stroke="#fff">
+        <path d="M6.021 5.021l20 22" stroke-width="2"/>
+        <path d="M8.735 8.559H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h19.34m4.289 0h2.594a.89.89 0 0 0 .889-.888V9.448a.89.89 0 0 0-.889-.889H12.971" stroke-miterlimit="1.5" stroke-width="2.083"/>
+    </g>
+    <path d="M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z"/>
+    <path d="M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z"/>
+    <circle cx="25.345" cy="18.582" r="2.561" fill="none" stroke="#fff" stroke-width="1.78" transform="matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)"/>
+</svg>

src/assets/svg/touch-control-enable.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+    <path d="M30.021 9.448a.89.89 0 0 0-.889-.889H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h26.223a.89.89 0 0 0 .889-.888V9.448z" fill="none" stroke="#fff" stroke-width="2.083"/>
+    <path d="M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z"/>
+    <path d="M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z"/>
+    <circle cx="25.345" cy="18.582" r="2.561" fill="none" stroke="#fff" stroke-width="1.78" transform="matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)"/>
+</svg>

src/index.ts

@@ -11,7 +11,7 @@ import { StreamBadges } from "@modules/stream/stream-badges";
 import { StreamStats } from "@modules/stream/stream-stats";
 import { addCss } from "@utils/css";
 import { Toast } from "@utils/toast";
-import { setupBxUi, updateVideoPlayerCss } from "@modules/ui/ui";
+import { setupStreamUi, updateVideoPlayerCss } from "@modules/ui/ui";
 import { PrefKey, getPref } from "@utils/preferences";
 import { LoadingScreen } from "@modules/loading-screen";
 import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
@@ -27,6 +27,9 @@ import { patchAudioContext, patchCanvasContext, patchMeControl, patchRtcCodecs,
 import { STATES } from "@utils/global";
 import { injectStreamMenuButtons } from "@modules/stream/stream-ui";
 import { BxLogger } from "@utils/bx-logger";
+import { GameBar } from "./modules/game-bar/game-bar";
+import { Screenshot } from "./utils/screenshot";
+
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
@@ -123,9 +126,7 @@ window.addEventListener(BxEvent.STREAM_LOADING, e => {
     }
 
     // Setup UI
-    setupBxUi();
-
-
+    setupStreamUi();
 });
 
 // Setup loading screen
@@ -143,37 +144,22 @@ window.addEventListener(BxEvent.STREAM_STARTING, e => {
 });
 
 window.addEventListener(BxEvent.STREAM_PLAYING, e => {
-    const $video = (e as any).$video;
+    const $video = (e as any).$video as HTMLVideoElement;
     STATES.currentStream.$video = $video;
 
     STATES.isPlaying = true;
     injectStreamMenuButtons();
-    /*
-    if (getPref(Preferences.CONTROLLER_ENABLE_SHORTCUTS)) {
-        GamepadHandler.startPolling();
-    }
-    */
 
-    const PREF_SCREENSHOT_BUTTON_POSITION = getPref(PrefKey.SCREENSHOT_BUTTON_POSITION);
-    STATES.currentStream.$screenshotCanvas!.width = $video.videoWidth;
-    STATES.currentStream.$screenshotCanvas!.height = $video.videoHeight;
+    if (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
+        const gameBar = GameBar.getInstance();
+        gameBar.reset();
+        gameBar.enable();
+        gameBar.showBar();
+    }
+
+    Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight);
+
     updateVideoPlayerCss();
-
-    // Setup screenshot button
-    if (PREF_SCREENSHOT_BUTTON_POSITION !== 'none') {
-        const $btn = document.querySelector('.bx-screenshot-button')! as HTMLElement;
-        $btn.classList.remove('bx-gone');
-        $btn.style.display = 'block';
-
-        if (PREF_SCREENSHOT_BUTTON_POSITION === 'bottom-right') {
-            $btn.style.right = '0';
-        } else {
-            $btn.style.left = '0';
-        }
-    }
-
-    const $touchControllerBar = document.getElementById('bx-touch-controller-bar');
-    $touchControllerBar && $touchControllerBar.classList.remove('bx-gone');
 });
 
 window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
@@ -186,6 +172,8 @@ window.addEventListener(BxEvent.STREAM_STOPPED, e => {
     }
 
     STATES.isPlaying = false;
+    STATES.currentStream = {};
+    window.BX_EXPOSED.shouldShowSensorControls = false;
 
     // Stop MKB listeners
     getPref(PrefKey.MKB_ENABLED) && MkbHandler.INSTANCE.destroy();
@@ -199,13 +187,9 @@ window.addEventListener(BxEvent.STREAM_STOPPED, e => {
     STATES.currentStream.$video = null;
     StreamStats.onStoppedPlaying();
 
-    const $screenshotBtn = document.querySelector('.bx-screenshot-button');
-    if ($screenshotBtn) {
-        $screenshotBtn.removeAttribute('style');
-    }
-
     MouseCursorHider.stop();
     TouchController.reset();
+    GameBar.getInstance().disable();
 });
 
 
@@ -231,7 +215,8 @@ function main() {
     // Setup UI
     addCss();
     Toast.setup();
-    BX_FLAGS.PreloadUi && setupBxUi();
+    (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
+    BX_FLAGS.PreloadUi && setupStreamUi();
 
     StreamBadges.setupEvents();
     StreamStats.setupEvents();

src/modules/dialog.ts

@@ -55,7 +55,7 @@ export class Dialog {
                             }),
                     ),
                 this.$content = CE('div', {'class': 'bx-dialog-content'}, content),
-                !hideCloseButton && ($close = CE('button', {}, t('close'))),
+                !hideCloseButton && ($close = CE('button', {type: 'button'}, t('close'))),
             );
 
         $close && $close.addEventListener('click', e => {

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

@@ -0,0 +1,6 @@
+export abstract class BaseGameBarAction {
+    constructor() {}
+    reset() {}
+
+    abstract render(): HTMLElement;
+}

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

@@ -0,0 +1,78 @@
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { t } from "@utils/translation";
+import { BaseGameBarAction } from "./action-base";
+
+enum MicrophoneState {
+    REQUESTED = 'Requested',
+    ENABLED = 'Enabled',
+    MUTED = 'Muted',
+    NOT_ALLOWED = 'NotAllowed',
+    NOT_FOUND = 'NotFound',
+}
+
+export class MicrophoneAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    visible: boolean = false;
+
+    constructor() {
+        super();
+
+        const onClick = (e: Event) => {
+                BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+                const state = this.$content.getAttribute('data-enabled');
+                const enableMic = state === 'true' ? false : true;
+
+                try {
+                    window.BX_EXPOSED.streamSession.tryEnableChatAsync(enableMic);
+                    this.$content.setAttribute('data-enabled', enableMic.toString());
+                } catch (e) {
+                    console.log(e);
+                }
+            };
+
+        const $btnDefault = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.MICROPHONE,
+            title: t('show-touch-controller'),
+            onClick: onClick,
+            classes: ['bx-activated'],
+        });
+
+        const $btnMuted = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.MICROPHONE_MUTED,
+            title: t('hide-touch-controller'),
+            onClick: onClick,
+        });
+
+        this.$content = CE('div', {},
+            $btnDefault,
+            $btnMuted,
+        );
+
+        this.reset();
+
+        window.addEventListener(BxEvent.MICROPHONE_STATE_CHANGED, e => {
+            const microphoneState = (e as any).microphoneState;
+            const enabled = microphoneState === MicrophoneState.ENABLED;
+
+            this.$content.setAttribute('data-enabled', enabled.toString());
+
+            // Show the button in Game Bar if the mic is enabled
+            this.$content.classList.remove('bx-gone');
+        });
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+
+    reset(): void {
+        this.visible = false;
+        this.$content.classList.add('bx-gone');
+        this.$content.setAttribute('data-enabled', 'false');
+    }
+}

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

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

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

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

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

@@ -0,0 +1,136 @@
+import { CE, createSvgIcon } from "@utils/html";
+import { ScreenshotAction } from "./action-screenshot";
+import { TouchControlAction } from "./action-touch-control";
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import type { BaseGameBarAction } from "./action-base";
+import { STATES } from "@utils/global";
+import { PrefKey, getPref } from "@utils/preferences";
+import { MicrophoneAction } from "./action-microphone";
+
+
+export class GameBar {
+    private static instance: GameBar;
+
+    public static getInstance(): GameBar {
+        if (!GameBar.instance) {
+            GameBar.instance = new GameBar();
+        }
+
+        return GameBar.instance;
+    }
+
+    private static readonly VISIBLE_DURATION = 2000;
+
+    private $gameBar: HTMLElement;
+    private $container: HTMLElement;
+
+    private timeout: number | null = null;
+
+    private actions: BaseGameBarAction[] = [];
+
+    private constructor() {
+        let $container;
+
+        const position = getPref(PrefKey.GAME_BAR_POSITION);
+
+        const $gameBar = CE('div', {id: 'bx-game-bar', class: 'bx-gone', 'data-position': position},
+                $container = CE('div', {class: 'bx-game-bar-container bx-offscreen'}),
+                createSvgIcon(position === 'bottom-left' ? BxIcon.CARET_RIGHT : BxIcon.CARET_LEFT),
+            );
+
+        this.actions = [
+            new ScreenshotAction(),
+            ...(STATES.hasTouchSupport && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off') ? [new TouchControlAction()] : []),
+            new MicrophoneAction(),
+        ];
+
+        // Reverse the action list if Game Bar's position is on the right side
+        if (position === 'bottom-right') {
+            this.actions.reverse();
+        }
+
+        // Render actions
+        for (const action of this.actions) {
+            $container.appendChild(action.render());
+        }
+
+        // Toggle game bar when clicking on the game bar box
+        $gameBar.addEventListener('click', e => {
+            if (e.target !== $gameBar) {
+                return;
+            }
+
+            $container.classList.contains('bx-show') ? this.hideBar() : this.showBar();
+        });
+
+        // Hide game bar after clicking on an action
+        window.addEventListener(BxEvent.GAME_BAR_ACTION_ACTIVATED, this.hideBar.bind(this));
+
+        $container.addEventListener('pointerover', this.clearHideTimeout.bind(this));
+        $container.addEventListener('pointerout', this.beginHideTimeout.bind(this));
+
+        // Add animation when hiding game bar
+        $container.addEventListener('transitionend', e => {
+            const classList = $container.classList;
+            if (classList.contains('bx-hide')) {
+                classList.remove('bx-offscreen', 'bx-hide');
+                classList.add('bx-offscreen');
+            }
+        });
+
+        document.documentElement.appendChild($gameBar);
+        this.$gameBar = $gameBar;
+        this.$container = $container;
+    }
+
+    private beginHideTimeout() {
+        this.clearHideTimeout();
+
+        this.timeout = window.setTimeout(() => {
+                this.timeout = null;
+                this.hideBar();
+            }, GameBar.VISIBLE_DURATION);
+    }
+
+    private clearHideTimeout() {
+        this.timeout && clearTimeout(this.timeout);
+        this.timeout = null;
+    }
+
+    enable() {
+        this.$gameBar && this.$gameBar.classList.remove('bx-gone');
+    }
+
+    disable() {
+        this.hideBar();
+        this.$gameBar && this.$gameBar.classList.add('bx-gone');
+    }
+
+    showBar() {
+        if (!this.$container) {
+            return;
+        }
+
+        this.$container.classList.remove('bx-offscreen', 'bx-hide');
+        this.$container.classList.add('bx-show');
+
+        this.beginHideTimeout();
+    }
+
+    hideBar() {
+        if (!this.$container) {
+            return;
+        }
+
+        this.$container.classList.remove('bx-show');
+        this.$container.classList.add('bx-hide');
+    }
+
+    // Reset all states
+    reset() {
+        for (const action of this.actions) {
+            action.reset();
+        }
+    }
+}

src/modules/mkb/mkb-handler.ts

@@ -285,7 +285,7 @@ export class MkbHandler {
 
         this.#allowStickDecaying = false;
         this.#detectMouseStoppedTimeout && clearTimeout(this.#detectMouseStoppedTimeout);
-        this.#detectMouseStoppedTimeout = window.setTimeout(this.#onMouseStopped.bind(this), 100);
+        this.#detectMouseStoppedTimeout = window.setTimeout(this.#onMouseStopped.bind(this), 10);
 
         const deltaX = e.movementX;
         const deltaY = e.movementY;

src/modules/mkb/mkb-preset.ts

@@ -127,8 +127,8 @@ export class MkbPreset {
             [MkbPresetKey.MOUSE_SENSITIVITY_X]: 50,
             [MkbPresetKey.MOUSE_SENSITIVITY_Y]: 50,
             [MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT]: 20,
-            [MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH]: 18,
-            [MkbPresetKey.MOUSE_STICK_DECAY_MIN]: 6,
+            [MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH]: 100,
+            [MkbPresetKey.MOUSE_STICK_DECAY_MIN]: 10,
         },
     };
 

src/modules/mkb/mkb-remapper.ts

@@ -426,6 +426,7 @@ export class MkbRemapper {
             const $fragment = document.createDocumentFragment();
             for (let i = 0; i < keysPerButton; i++) {
                 $elm = CE('button', {
+                        type: 'button',
                         'data-prompt': buttonPrompt,
                         'data-button-index': buttonIndex,
                         'data-key-slot': i,

src/modules/patcher.ts

@@ -4,6 +4,7 @@ import { getPref, PrefKey } from "@utils/preferences";
 import { VibrationManager } from "@modules/vibration-manager";
 import { BxLogger } from "@utils/bx-logger";
 import { hashCode } from "@utils/utils";
+import { BxEvent } from "@/utils/bx-event";
 
 type PatchArray = (keyof typeof PATCHES)[];
 
@@ -285,7 +286,13 @@ if (window.BX_VIBRATION_INTENSITY && window.BX_VIBRATION_INTENSITY < 1) {
             return false;
         }
 
-        str = str.replace(text, 'window.BX_EXPOSED["touchLayoutManager"] = this,' + text);
+        const newCode = `
+true;
+window.BX_EXPOSED["touchLayoutManager"] = this;
+window.dispatchEvent(new Event("${BxEvent.TOUCH_LAYOUT_MANAGER_READY}"));
+`;
+
+        str = str.replace(text, newCode + text);
         return str;
     },
 
@@ -496,6 +503,63 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});
         str = str.replace(text, newCode);
         return str;
     },
+
+    patchShowSensorControls(str: string) {
+        const text = '{shouldShowSensorControls:';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `{shouldShowSensorControls: (window.BX_EXPOSED && window.BX_EXPOSED.shouldShowSensorControls) ||`;
+
+        str = str.replace(text, newCode);
+        return str;
+    },
+
+    /*
+    exposeEventTarget(str: string) {
+        const text ='this._eventTarget=new EventTarget';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `
+window.BX_EXPOSED.eventTarget = ${text},
+window.dispatchEvent(new Event('${BxEvent.STREAM_EVENT_TARGET_READY}'))
+`;
+
+        str = str.replace(text, newCode);
+        return str;
+    },
+    //*/
+
+    // Class with: connectAsync(), doConnectAsync(), setPlayClient()
+    exposeStreamSession(str: string) {
+        const text =',this._connectionType=';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `;
+window.BX_EXPOSED.streamSession = this;
+
+const orgSetMicrophoneState = this.setMicrophoneState.bind(this);
+this.setMicrophoneState = state => {
+    orgSetMicrophoneState(state);
+
+    const evt = new Event('${BxEvent.MICROPHONE_STATE_CHANGED}');
+    evt.microphoneState = state;
+
+    window.dispatchEvent(evt);
+};
+
+window.dispatchEvent(new Event('${BxEvent.STREAM_SESSION_READY}'))
+
+true` + text;
+
+        str = str.replace(text, newCode);
+        return str;
+    },
 };
 
 let PATCH_ORDERS: PatchArray = [
@@ -503,6 +567,8 @@ let PATCH_ORDERS: PatchArray = [
     'overrideSettings',
     'broadcastPollingMode',
 
+    'exposeStreamSession',
+
     getPref(PrefKey.UI_LAYOUT) !== 'default' && 'websiteLayout',
     getPref(PrefKey.LOCAL_CO_OP_ENABLED) && 'supportLocalCoOp',
     getPref(PrefKey.GAME_FORTNITE_FORCE_CONSOLE) && 'forceFortniteConsole',
@@ -538,12 +604,15 @@ let PLAYING_PATCH_ORDERS: PatchArray = [
     'patchStreamHud',
     'playVibration',
 
+    // 'exposeEventTarget',
+
     // Patch volume control for normal stream
     getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && !getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'patchAudioMediaStream',
     // Patch volume control for combined audio+video stream
     getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'patchCombinedAudioVideoMediaStream',
 
 
+    STATES.hasTouchSupport && getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'patchShowSensorControls',
     STATES.hasTouchSupport && getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'exposeTouchLayoutManager',
     STATES.hasTouchSupport && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off' || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) && 'disableTakRenderer',
     STATES.hasTouchSupport && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',

src/modules/screenshot.ts

@@ -1,100 +0,0 @@
-import { STATES, AppInterface } from "@utils/global";
-import { CE } from "@utils/html";
-
-export function takeScreenshot(callback: any) {
-    const currentStream = STATES.currentStream!;
-    const $video = currentStream.$video;
-    const $canvas = currentStream.$screenshotCanvas;
-    if (!$video || !$canvas) {
-        return;
-    }
-
-    const $canvasContext = $canvas.getContext('2d', {
-        alpha: false,
-        willReadFrequently: false,
-    })!;
-
-    $canvasContext.drawImage($video, 0, 0, $canvas.width, $canvas.height);
-
-    // Get data URL and pass to parent app
-    if (AppInterface) {
-        const data = $canvas.toDataURL('image/png').split(';base64,')[1];
-        AppInterface.saveScreenshot(currentStream.titleId, data);
-
-        // Free screenshot from memory
-        $canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
-
-        callback && callback();
-        return;
-    }
-
-    $canvas && $canvas.toBlob(blob => {
-        // Download screenshot
-        const now = +new Date;
-        const $anchor = CE<HTMLAnchorElement>('a', {
-            'download': `${currentStream.titleId}-${now}.png`,
-            'href': URL.createObjectURL(blob!),
-        });
-        $anchor.click();
-
-        // Free screenshot from memory
-        URL.revokeObjectURL($anchor.href);
-        $canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
-
-        callback && callback();
-    }, 'image/png');
-}
-
-
-export function setupScreenshotButton() {
-    const currentStream = STATES.currentStream!
-    currentStream.$screenshotCanvas = CE('canvas', {'class': 'bx-screenshot-canvas'});
-    document.documentElement.appendChild(currentStream.$screenshotCanvas!);
-
-    const delay = 2000;
-    const $btn = CE('div', {'class': 'bx-screenshot-button', 'data-showing': false});
-
-    let timeout: number | null;
-    const detectDbClick = (e: MouseEvent) => {
-        if (!currentStream.$video) {
-            timeout = null;
-            $btn.style.display = 'none';
-            return;
-        }
-
-        if (timeout) {
-            clearTimeout(timeout);
-            timeout = null;
-            $btn.setAttribute('data-capturing', 'true');
-
-            takeScreenshot(() => {
-                // Hide button
-                $btn.setAttribute('data-showing', 'false');
-                window.setTimeout(() => {
-                    if (!timeout) {
-                        $btn.setAttribute('data-capturing', 'false');
-                    }
-                }, 100);
-            });
-
-            return;
-        }
-
-        const isShowing = $btn.getAttribute('data-showing') === 'true';
-        if (!isShowing) {
-            // Show button
-            $btn.setAttribute('data-showing', 'true');
-            $btn.setAttribute('data-capturing', 'false');
-
-            timeout && clearTimeout(timeout);
-            timeout = window.setTimeout(() => {
-                timeout = null;
-                $btn.setAttribute('data-showing', 'false');
-                $btn.setAttribute('data-capturing', 'false');
-            }, delay);
-        }
-    }
-
-    $btn.addEventListener('mousedown', detectDbClick);
-    document.documentElement.appendChild($btn);
-}

src/modules/stream/stream-ui.ts

@@ -35,7 +35,7 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
         }
     };
 
-    if (STATES.hasTouchSupport) {
+    if (STATES.browserHasTouchSupport) {
         $container.addEventListener('transitionstart', onTransitionStart);
         $container.addEventListener('transitionend', onTransitionEnd);
     }
@@ -120,8 +120,13 @@ export function injectStreamMenuButtons() {
 
                 let $elm: HTMLElement | null = $node as HTMLElement;
 
+                // Ignore SVG elements
+                if ($elm instanceof SVGSVGElement) {
+                    return;
+                }
+
                 // Error Page: .PureErrorPage.ErrorScreen
-                if ($elm.className.includes('PureErrorPage')) {
+                if ($elm.className?.includes('PureErrorPage')) {
                     BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
                     return;
                 }
@@ -133,7 +138,7 @@ export function injectStreamMenuButtons() {
                 }
 
                 // Render badges
-                if ($elm.className.startsWith('StreamMenu-module__container')) {
+                if ($elm.className?.startsWith('StreamMenu-module__container')) {
                     BxEvent.dispatch(window, BxEvent.STREAM_MENU_SHOWN);
 
                     const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]');
@@ -175,7 +180,7 @@ export function injectStreamMenuButtons() {
                     return;
                 }
 
-                if ($elm.className.startsWith('Overlay-module_') || $elm.className.startsWith('InProgressScreen')) {
+                if ($elm.className?.startsWith('Overlay-module_') || $elm.className?.startsWith('InProgressScreen')) {
                     $elm = $elm.querySelector('#StreamHud');
                 }
 

src/modules/touch-controller.ts

@@ -1,5 +1,5 @@
 import { STATES } from "@utils/global";
-import { CE, escapeHtml } from "@utils/html";
+import { escapeHtml } from "@utils/html";
 import { Toast } from "@utils/toast";
 import { BxEvent } from "@utils/bx-event";
 import { BX_FLAGS } from "@utils/bx-flags";
@@ -12,7 +12,11 @@ const LOG_TAG = 'TouchController';
 
 export class TouchController {
     static readonly #EVENT_SHOW_DEFAULT_CONTROLLER = new MessageEvent('message', {
-            data: '{"content":"{\\"layoutId\\":\\"\\"}","target":"/streaming/touchcontrols/showlayoutv2","type":"Message"}',
+            data: JSON.stringify({
+                content: '{"layoutId":""}',
+                target: '/streaming/touchcontrols/showlayoutv2',
+                type: 'Message',
+            }),
             origin: 'better-xcloud',
         });
 
@@ -23,17 +27,17 @@ export class TouchController {
         });
     */
 
-    static #$bar: HTMLElement;
     static #$style: HTMLStyleElement;
 
     static #enable = false;
-    static #showing = false;
     static #dataChannel: RTCDataChannel | null;
 
     static #customLayouts: {[index: string]: any} = {};
     static #baseCustomLayouts: {[index: string]: any} = {};
     static #currentLayoutId: string;
 
+    static #customList: string[];
+
     static enable() {
         TouchController.#enable = true;
     }
@@ -48,37 +52,28 @@ export class TouchController {
 
     static #showDefault() {
         TouchController.#dispatchMessage(TouchController.#EVENT_SHOW_DEFAULT_CONTROLLER);
-        TouchController.#showing = true;
     }
 
     static #show() {
         document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.remove('bx-offscreen');
-        TouchController.#showing = true;
     }
 
     static #hide() {
         document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.add('bx-offscreen');
-        TouchController.#showing = false;
     }
 
-    static #toggleVisibility() {
+    static toggleVisibility(status: boolean) {
         if (!TouchController.#dataChannel) {
             return;
         }
 
-        TouchController.#showing ? TouchController.#hide() : TouchController.#show();
-    }
-
-    static #toggleBar(value: boolean) {
-        TouchController.#$bar && TouchController.#$bar.setAttribute('data-showing', value.toString());
+        status ? TouchController.#hide() : TouchController.#show();
     }
 
     static reset() {
         TouchController.#enable = false;
-        TouchController.#showing = false;
         TouchController.#dataChannel = null;
 
-        TouchController.#$bar && TouchController.#$bar.removeAttribute('data-showing');
         TouchController.#$style && (TouchController.#$style.textContent = '');
     }
 
@@ -148,7 +143,16 @@ export class TouchController {
     }
 
     static loadCustomLayout(xboxTitleId: string, layoutId: string, delay: number=0) {
+        // TODO: fix this
         if (!window.BX_EXPOSED.touchLayoutManager) {
+            const listener = (e: Event) => {
+                window.removeEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener);
+                if (TouchController.#enable) {
+                    TouchController.loadCustomLayout(xboxTitleId, layoutId, 0);
+                }
+            };
+            window.addEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener);
+
             return;
         }
 
@@ -181,6 +185,9 @@ export class TouchController {
         layoutChanged && Toast.show(msg, layout.name, {html: html});
 
         window.setTimeout(() => {
+            // Show gyroscope control in the "More options" dialog if this layout has gyroscope
+            window.BX_EXPOSED.shouldShowSensorControls = JSON.stringify(layout).includes('gyroscope');
+
             window.BX_EXPOSED.touchLayoutManager.changeLayoutForScope({
                 type: 'showLayout',
                 scope: xboxTitleId,
@@ -195,15 +202,19 @@ export class TouchController {
     }
 
     static updateCustomList() {
+        const key = 'better_xcloud_custom_touch_layouts';
+        TouchController.#customList = JSON.parse(window.localStorage.getItem(key) || '[]');
+
         NATIVE_FETCH('https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/touch-layouts/ids.json')
             .then(response => response.json())
             .then(json => {
-                window.localStorage.setItem('better_xcloud_custom_touch_layouts', JSON.stringify(json));
+                TouchController.#customList = json;
+                window.localStorage.setItem(key, JSON.stringify(json));
             });
     }
 
     static getCustomList(): string[] {
-        return JSON.parse(window.localStorage.getItem('better_xcloud_custom_touch_layouts') || '[]');
+        return TouchController.#customList;
     }
 
     static setup() {
@@ -223,32 +234,9 @@ export class TouchController {
             });
         };
 
-        const $fragment = document.createDocumentFragment();
         const $style = document.createElement('style');
-        $fragment.appendChild($style);
+        document.documentElement.appendChild($style);
 
-        const $bar = CE('div', {'id': 'bx-touch-controller-bar'});
-        $fragment.appendChild($bar);
-
-        document.documentElement.appendChild($fragment);
-
-        // Setup double-tap event
-        let clickTimeout: number | null;
-        $bar.addEventListener('mousedown', (e: MouseEvent) => {
-            clickTimeout && clearTimeout(clickTimeout);
-            if (clickTimeout) {
-                // Double-clicked
-                clickTimeout = null;
-                TouchController.#toggleVisibility();
-                return;
-            }
-
-            clickTimeout = window.setTimeout(() => {
-                clickTimeout = null;
-            }, 400);
-        });
-
-        TouchController.#$bar = $bar;
         TouchController.#$style = $style;
 
         const PREF_STYLE_STANDARD = getPref(PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD);
@@ -307,7 +295,6 @@ export class TouchController {
                 try {
                     if (msg.data.includes('/titleinfo')) {
                         const json = JSON.parse(JSON.parse(msg.data).content);
-                        TouchController.#toggleBar(json.focused);
 
                         focused = json.focused;
                         if (!json.focused) {

src/modules/ui/global-settings.ts

@@ -27,18 +27,26 @@ const SETTINGS_UI = {
         items: [
             PrefKey.STREAM_TARGET_RESOLUTION,
             PrefKey.STREAM_CODEC_PROFILE,
-            PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
+
+            PrefKey.BITRATE_VIDEO_MAX,
+
+            PrefKey.AUDIO_ENABLE_VOLUME_CONTROL,
             PrefKey.AUDIO_MIC_ON_PLAYING,
             PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG,
 
-            PrefKey.SCREENSHOT_BUTTON_POSITION,
             PrefKey.SCREENSHOT_APPLY_FILTERS,
 
-            PrefKey.AUDIO_ENABLE_VOLUME_CONTROL,
+            PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
             PrefKey.STREAM_COMBINE_SOURCES,
         ],
     },
 
+    [t('game-bar')]: {
+        items: [
+            PrefKey.GAME_BAR_POSITION,
+        ],
+    },
+
     [t('local-co-op')]: {
         items: [
             PrefKey.LOCAL_CO_OP_ENABLED,
@@ -47,6 +55,7 @@ const SETTINGS_UI = {
 
     [t('mouse-and-keyboard')]: {
         items: [
+            PrefKey.NATIVE_MKB_DISABLED,
             PrefKey.MKB_ENABLED,
             PrefKey.MKB_HIDE_IDLE_CURSOR,
         ],
@@ -75,6 +84,7 @@ const SETTINGS_UI = {
     [t('ui')]: {
         items: [
             PrefKey.UI_LAYOUT,
+            PrefKey.UI_HOME_CONTEXT_MENU_DISABLED,
             PrefKey.STREAM_SIMPLIFY_MENU,
             PrefKey.SKIP_SPLASH_VIDEO,
             !AppInterface && PrefKey.UI_SCROLLBAR_HIDE,
@@ -107,7 +117,7 @@ export function setupSettingsUi() {
     const PREF_PREFERRED_REGION = getPreferredServerRegion();
     const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
 
-    let $reloadBtnWrapper: HTMLButtonElement;
+    let $btnReload: HTMLButtonElement;
 
     // Setup Settings UI
     const $container = CE<HTMLElement>('div', {
@@ -123,7 +133,12 @@ export function setupSettingsUi() {
                     'href': SCRIPT_HOME,
                     'target': '_blank',
                 }, 'Better xCloud ' + SCRIPT_VERSION),
-                createButton({icon: BxIcon.QUESTION, label: t('help'), url: 'https://better-xcloud.github.io/features/'}),
+                createButton({
+                    icon: BxIcon.QUESTION,
+                    style: ButtonStyle.FOCUSABLE,
+                    label: t('help'),
+                    url: 'https://better-xcloud.github.io/features/',
+                }),
             )
         );
     $updateAvailable = CE('a', {
@@ -140,8 +155,20 @@ export function setupSettingsUi() {
         $updateAvailable.classList.remove('bx-gone');
     }
 
-    // Show link to Android app
-    if (!AppInterface) {
+    if (AppInterface) {
+        // Show Android app settings button
+        const $btn = createButton({
+            label: t('android-app-settings'),
+            icon: BxIcon.STREAM_SETTINGS,
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                AppInterface.openAppSettings && AppInterface.openAppSettings();
+            },
+        });
+
+        $wrapper.appendChild($btn);
+    } else {
+        // Show link to Android app
         const userAgent = UserAgent.getDefault().toLowerCase();
         if (userAgent.includes('android')) {
             const $btn = createButton({
@@ -155,22 +182,21 @@ export function setupSettingsUi() {
     }
 
     const onChange = (e: Event) => {
-        if (!$reloadBtnWrapper) {
-            return;
-        }
-
-        $reloadBtnWrapper.classList.remove('bx-gone');
-
         // Clear PatcherCache;
         PatcherCache.clear();
 
+        $btnReload.classList.add('bx-danger');
+
+        // Highlight the Settings button in the Header to remind user to reload the page
+        const $btnHeaderSettings = document.querySelector('.bx-header-settings-button');
+        $btnHeaderSettings && $btnHeaderSettings.classList.add('bx-danger');
+
         if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) {
             // Update locale
             refreshCurrentLocale();
 
-            const $btn = $reloadBtnWrapper.firstElementChild! as HTMLButtonElement;
-            $btn.textContent = t('settings-reloading');
-            $btn.click();
+            $btnReload.textContent = t('settings-reloading');
+            $btnReload.click();
         }
     };
 
@@ -216,40 +242,52 @@ export function setupSettingsUi() {
                 }
             }
 
-            let $control;
+            let $control: any;
             let $inpCustomUserAgent: HTMLInputElement;
-            let labelAttrs = {};
+            let labelAttrs: any = {
+                tabindex: '-1',
+            };
 
             if (settingId === PrefKey.USER_AGENT_PROFILE) {
                 let defaultUserAgent = (window.navigator as any).orgUserAgent || window.navigator.userAgent;
                 $inpCustomUserAgent = CE('input', {
-                    'type': 'text',
-                    'placeholder': defaultUserAgent,
+                    id: `bx_setting_inp_${settingId}`,
+                    type: 'text',
+                    placeholder: defaultUserAgent,
                     'class': 'bx-settings-custom-user-agent',
                 });
                 $inpCustomUserAgent.addEventListener('change', e => {
-                    setPref(PrefKey.USER_AGENT_CUSTOM, (e.target as HTMLInputElement).value.trim());
+                    const profile = $control.value;
+                    const custom = (e.target as HTMLInputElement).value.trim();
+
+                    UserAgent.updateStorage(profile, custom);
                     onChange(e);
                 });
 
                 $control = toPrefElement(PrefKey.USER_AGENT_PROFILE, (e: Event) => {
-                    const value = (e.target as HTMLInputElement).value;
+                    const value = (e.target as HTMLInputElement).value as UserAgentProfile;
                     let isCustom = value === UserAgentProfile.CUSTOM;
                     let userAgent = UserAgent.get(value as UserAgentProfile);
 
+                    UserAgent.updateStorage(value);
+
                     $inpCustomUserAgent.value = userAgent;
                     $inpCustomUserAgent.readOnly = !isCustom;
                     $inpCustomUserAgent.disabled = !isCustom;
 
-                    onChange(e);
+                    !(e.target as HTMLInputElement).disabled && onChange(e);
                 });
             } else if (settingId === PrefKey.SERVER_REGION) {
                 let selectedValue;
 
-                $control = CE<HTMLSelectElement>('select', {id: `bx_setting_${settingId}`});
+                $control = CE<HTMLSelectElement>('select', {
+                        id: `bx_setting_${settingId}`,
+                        title: settingLabel,
+                        tabindex: 0,
+                    });
                 $control.name = $control.id;
 
-                $control.addEventListener('change', e => {
+                $control.addEventListener('change', (e: Event) => {
                     setPref(settingId, (e.target as HTMLSelectElement).value);
                     onChange(e);
                 });
@@ -292,7 +330,12 @@ export function setupSettingsUi() {
                 } else {
                     $control = toPrefElement(settingId, onChange);
                 }
-                labelAttrs = {'for': $control.id, 'tabindex': 0};
+            }
+
+            if (!!$control.id) {
+                labelAttrs['for'] = $control.id;
+            } else {
+                labelAttrs['for'] = `bx_setting_${settingId}`;
             }
 
             // Disable unsupported settings
@@ -300,14 +343,19 @@ export function setupSettingsUi() {
                 ($control as HTMLInputElement).disabled = true;
             }
 
+            // Make disabled control elements un-focusable
+            if ($control.disabled && !!$control.getAttribute('tabindex')) {
+                $control.setAttribute('tabindex', -1);
+            }
+
             const $label = CE('label', labelAttrs, settingLabel);
             if (settingNote) {
                 $label.appendChild(CE('b', {}, settingNote));
             }
             const $elm = CE<HTMLElement>('div', {'class': 'bx-settings-row'},
-                            $label,
-                            $control
-                           );
+                    $label,
+                    $control,
+                );
 
             $wrapper.appendChild($elm);
 
@@ -315,28 +363,35 @@ export function setupSettingsUi() {
             if (settingId === PrefKey.USER_AGENT_PROFILE) {
                 $wrapper.appendChild($inpCustomUserAgent!);
                 // Trigger 'change' event
+                $control.disabled = true;
                 $control.dispatchEvent(new Event('change'));
+                $control.disabled = false;
             }
         }
     }
 
     // Setup Reload button
-    const $reloadBtn = createButton({
+    $btnReload = createButton({
         label: t('settings-reload'),
-        style: ButtonStyle.DANGER | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
+        classes: ['bx-settings-reload-button'],
+        style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
         onClick: e => {
             window.location.reload();
-            $reloadBtn.disabled = true;
-            $reloadBtn.textContent = t('settings-reloading');
+            $btnReload.disabled = true;
+            $btnReload.textContent = t('settings-reloading');
         },
     });
-    $reloadBtn.setAttribute('tabindex', '0');
+    $btnReload.setAttribute('tabindex', '0');
 
-    $reloadBtnWrapper = CE<HTMLButtonElement>('div', {'class': 'bx-settings-reload-button-wrapper bx-gone'}, $reloadBtn);
-    $wrapper.appendChild($reloadBtnWrapper);
+    $wrapper.appendChild($btnReload);
 
     // Donation link
-    const $donationLink = CE('a', {'class': 'bx-donation-link', href: 'https://ko-fi.com/redphx', target: '_blank'}, `❤️ ${t('support-better-xcloud')}`);
+    const $donationLink = CE('a', {
+            'class': 'bx-donation-link',
+            href: 'https://ko-fi.com/redphx',
+            target: '_blank',
+            tabindex: 0,
+        }, `❤️ ${t('support-better-xcloud')}`);
     $wrapper.appendChild($donationLink);
 
     // Show Game Pass app version

src/modules/ui/ui.ts

@@ -5,11 +5,11 @@ import { UserAgent } from "@utils/user-agent";
 import { BxEvent } from "@utils/bx-event";
 import { MkbRemapper } from "@modules/mkb/mkb-remapper";
 import { getPref, PrefKey, toPrefElement } from "@utils/preferences";
-import { setupScreenshotButton } from "@modules/screenshot";
 import { StreamStats } from "@modules/stream/stream-stats";
 import { TouchController } from "@modules/touch-controller";
 import { t } from "@utils/translation";
 import { VibrationManager } from "@modules/vibration-manager";
+import { Screenshot } from "@/utils/screenshot";
 
 
 export function localRedirect(path: string) {
@@ -428,53 +428,76 @@ export function updateVideoPlayerCss() {
 
     // Apply video filters to screenshots
     if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
-        STATES.currentStream.$screenshotCanvas!.getContext('2d')!.filter = filters;
-    }
-
-    const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
-    if (PREF_RATIO && PREF_RATIO !== '16:9') {
-        if (PREF_RATIO.includes(':')) {
-            videoCss += `aspect-ratio: ${PREF_RATIO.replace(':', '/')}; object-fit: unset !important;`;
-
-            const tmp = PREF_RATIO.split(':');
-            const ratio = parseFloat(tmp[0]) / parseFloat(tmp[1]);
-            const maxRatio = window.innerWidth / window.innerHeight;
-            if (ratio < maxRatio) {
-                videoCss += 'width: fit-content !important;'
-            } else {
-                videoCss += 'height: fit-content !important;'
-            }
-        } else {
-            videoCss += `object-fit: ${PREF_RATIO} !important;`;
-        }
+        Screenshot.updateCanvasFilters(filters);
     }
 
     let css = '';
     if (videoCss) {
         css = `
-div[data-testid="media-container"] {
-    display: flex;
-}
-
 #game-stream video {
-    margin: 0 auto;
-    align-self: center;
-    background: #000;
     ${videoCss}
 }
 `;
     }
 
     $elm.textContent = css;
+
+    resizeVideoPlayer();
 }
 
-export function setupBxUi() {
+function resizeVideoPlayer() {
+    const $video = STATES.currentStream.$video;
+    if (!$video || !$video.parentElement) {
+        return;
+    }
+
+    const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
+    if (PREF_RATIO.includes(':')) {
+        const tmp = PREF_RATIO.split(':');
+
+        // Get preferred ratio
+        const videoRatio = parseFloat(tmp[0]) / parseFloat(tmp[1]);
+
+        let width = 0;
+        let height = 0;
+
+        // Get parent's ratio
+        const parentRect = $video.parentElement.getBoundingClientRect();
+        const parentRatio = parentRect.width / parentRect.height;
+
+        // Get target width & height
+        if (parentRatio > videoRatio) {
+            height = parentRect.height;
+            width = height * videoRatio;
+        } else {
+            width = parentRect.width;
+            height = width / videoRatio;
+        }
+
+        // Prevent floating points
+        width = Math.floor(width);
+        height = Math.floor(height);
+
+        // Update size
+        $video.style.width = `${width}px`;
+        $video.style.height = `${height}px`;
+        $video.style.objectFit = 'fill';
+    } else {
+        $video.style.width = '100%';
+        $video.style.height = '100%';
+        $video.style.objectFit = PREF_RATIO;
+    }
+}
+
+
+export function setupStreamUi() {
     // Prevent initializing multiple times
     if (!document.querySelector('.bx-quick-settings-bar')) {
         window.addEventListener('resize', updateVideoPlayerCss);
         setupQuickSettingsBar();
-        setupScreenshotButton();
         StreamStats.render();
+
+        Screenshot.setup();
     }
 
     updateVideoPlayerCss();

src/types/index.d.ts

@@ -27,7 +27,9 @@ type BxStates = {
     isPlaying: boolean;
     appContext: any | null;
     serverRegions: any;
+
     hasTouchSupport: boolean;
+    browserHasTouchSupport: boolean;
 
     currentStream: Partial<{
         titleId: string;
@@ -37,6 +39,7 @@ type BxStates = {
 
         $video: HTMLVideoElement | null;
         $screenshotCanvas: HTMLCanvasElement | null;
+        screenshotCanvasContext: CanvasRenderingContext2D | null;
 
         peerConnection: RTCPeerConnection;
         audioContext: AudioContext | null;

src/types/preferences.d.ts

@@ -5,7 +5,7 @@ export type PreferenceSetting = {
     unsupported?: string | boolean;
     note?: string | HTMLElement;
     type?: SettingElementType;
-    ready?: () => void;
+    ready?: (setting: PreferenceSetting) => void;
     migrate?: (savedPrefs: any, value: any) => {};
     min?: number;
     max?: number;

src/utils/bx-event.ts

@@ -19,7 +19,11 @@ export enum BxEvent {
     STREAM_WEBRTC_CONNECTED = 'bx-stream-webrtc-connected',
     STREAM_WEBRTC_DISCONNECTED = 'bx-stream-webrtc-disconnected',
 
+    // STREAM_EVENT_TARGET_READY = 'bx-stream-event-target-ready',
+    STREAM_SESSION_READY = 'bx-stream-session-ready',
+
     CUSTOM_TOUCH_LAYOUTS_LOADED = 'bx-custom-touch-layouts-loaded',
+    TOUCH_LAYOUT_MANAGER_READY = 'bx-touch-layout-manager-ready',
 
     REMOTE_PLAY_READY = 'bx-remote-play-ready',
     REMOTE_PLAY_FAILED = 'bx-remote-play-failed',
@@ -27,6 +31,13 @@ export enum BxEvent {
     XCLOUD_SERVERS_READY = 'bx-servers-ready',
 
     DATA_CHANNEL_CREATED = 'bx-data-channel-created',
+
+    GAME_BAR_ACTION_ACTIVATED = 'bx-game-bar-action-activated',
+    MICROPHONE_STATE_CHANGED = 'bx-microphone-state-changed',
+}
+
+export enum XcloudEvent {
+    MICROPHONE_STATE_CHANGED = 'microphoneStateChanged',
 }
 
 export namespace BxEvent {

src/utils/bx-exposed.ts

@@ -1,9 +1,10 @@
+import { GameBar } from "@modules/game-bar/game-bar";
 import { BxEvent } from "@utils/bx-event";
 import { STATES } from "@utils/global";
 import { getPref, PrefKey } from "@utils/preferences";
 import { UserAgent } from "@utils/user-agent";
 
-enum InputType {
+export enum InputType {
     CONTROLLER = 'Controller',
     MKB = 'MKB',
     CUSTOM_TOUCH_OVERLAY = 'CustomTouchOverlay',
@@ -13,27 +14,21 @@ enum InputType {
 }
 
 export const BxExposed = {
+    // Enable/disable Game Bar when playing/pausing
     onPollingModeChanged: (mode: 'All' | 'None') => {
+        if (getPref(PrefKey.GAME_BAR_POSITION) === 'off') {
+            return;
+        }
+
+        const gameBar = GameBar.getInstance();
+
         if (!STATES.isPlaying) {
-            return false;
+            gameBar.disable();
+            return;
         }
 
-        const $screenshotBtn = document.querySelector('.bx-screenshot-button');
-        const $touchControllerBar = document.getElementById('bx-touch-controller-bar');
-
-        if (mode !== 'None') {
-            // Hide screenshot button
-            $screenshotBtn && $screenshotBtn.classList.add('bx-gone');
-
-            // Hide touch controller bar
-            $touchControllerBar && $touchControllerBar.classList.add('bx-gone');
-        } else {
-            // Show screenshot button
-            $screenshotBtn && $screenshotBtn.classList.remove('bx-gone');
-
-            // Show touch controller bar
-            $touchControllerBar && $touchControllerBar.classList.remove('bx-gone');
-        }
+        // Toggle Game bar
+        mode !== 'None' ? gameBar.disable() : gameBar.enable();
     },
 
     getTitleInfo: () => STATES.currentStream.titleInfo,
@@ -42,9 +37,17 @@ export const BxExposed = {
         // Clone the object since the original is read-only
         titleInfo = structuredClone(titleInfo);
 
+        let supportedInputTypes = titleInfo.details.supportedInputTypes;
+
+        // Remove native MKB support on mobile browsers or by user's choice
+        if (getPref(PrefKey.NATIVE_MKB_DISABLED) || UserAgent.isMobile()) {
+            supportedInputTypes = supportedInputTypes.filter(i => i !== InputType.MKB);
+        }
+
+        titleInfo.details.hasMkbSupport = supportedInputTypes.includes(InputType.MKB);
+
         if (STATES.hasTouchSupport) {
             let touchControllerAvailability = getPref(PrefKey.STREAM_TOUCH_CONTROLLER);
-            let supportedInputTypes = titleInfo.details.supportedInputTypes;
 
             // Disable touch control when gamepad found
             if (touchControllerAvailability !== 'off' && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
@@ -61,10 +64,7 @@ export const BxExposed = {
                 gamepadFound && (touchControllerAvailability = 'off');
             }
 
-            // Remove MKB support on mobile browsers
-            if (UserAgent.isMobile()) {
-                supportedInputTypes = supportedInputTypes.filter(i => i !== InputType.MKB);
-            }
+
 
             if (touchControllerAvailability === 'off') {
                 // Disable touch on all games (not native touch)
@@ -72,7 +72,6 @@ export const BxExposed = {
             }
 
             // Pre-check supported input types
-            titleInfo.details.hasMkbSupport = supportedInputTypes.includes(InputType.MKB);
             titleInfo.details.hasTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH) ||
                     supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY) ||
                     supportedInputTypes.includes(InputType.GENERIC_TOUCH);
@@ -82,10 +81,10 @@ export const BxExposed = {
                 titleInfo.details.hasFakeTouchSupport = true;
                 supportedInputTypes.push(InputType.GENERIC_TOUCH);
             }
-
-            titleInfo.details.supportedInputTypes = supportedInputTypes;
         }
 
+        titleInfo.details.supportedInputTypes = supportedInputTypes;
+
         // Save this info in STATES
         STATES.currentStream.titleInfo = titleInfo;
         BxEvent.dispatch(window, BxEvent.TITLE_INFO_READY);

src/utils/bx-icon.ts

@@ -11,6 +11,15 @@ import iconRemotePlay from "@assets/svg/remote-play.svg" with { type: "text" };
 import iconStreamSettings from "@assets/svg/stream-settings.svg" with { type: "text" };
 import iconStreamStats from "@assets/svg/stream-stats.svg" with { type: "text" };
 import iconTrash from "@assets/svg/trash.svg" with { type: "text" };
+import iconTouchControlEnable from "@assets/svg/touch-control-enable.svg" with { type: "text" };
+import iconTouchControlDisable from "@assets/svg/touch-control-disable.svg" with { type: "text" };
+
+// Game Bar
+import iconCaretLeft from "@assets/svg/caret-left.svg" with { type: "text" };
+import iconCaretRight from "@assets/svg/caret-right.svg" with { type: "text" };
+import iconCamera from "@assets/svg/camera.svg" with { type: "text" };
+import iconMicrophone from "@assets/svg/microphone.svg" with { type: "text" };
+import iconMicrophoneMuted from "@assets/svg/microphone-slash.svg" with { type: "text" };
 
 export const BxIcon = {
     STREAM_SETTINGS: iconStreamSettings,
@@ -28,5 +37,13 @@ export const BxIcon = {
 
     REMOTE_PLAY: iconRemotePlay,
 
-    // HAND_TAP = '<path d="M6.537 8.906c0-4.216 3.469-7.685 7.685-7.685s7.685 3.469 7.685 7.685M7.719 30.778l-4.333-7.389C3.133 22.944 3 22.44 3 21.928a2.97 2.97 0 0 1 2.956-2.956 2.96 2.96 0 0 1 2.55 1.461l2.761 4.433V8.906a2.97 2.97 0 0 1 2.956-2.956 2.97 2.97 0 0 1 2.956 2.956v8.276a2.97 2.97 0 0 1 2.956-2.956 2.97 2.97 0 0 1 2.956 2.956v2.365a2.97 2.97 0 0 1 2.956-2.956A2.97 2.97 0 0 1 29 19.547v5.32c0 3.547-1.182 5.911-1.182 5.911"/>',
+    // Game Bar
+    CARET_LEFT: iconCaretLeft,
+    CARET_RIGHT: iconCaretRight,
+    SCREENSHOT: iconCamera,
+    TOUCH_CONTROL_ENABLE: iconTouchControlEnable,
+    TOUCH_CONTROL_DISABLE: iconTouchControlDisable,
+
+    MICROPHONE: iconMicrophone,
+    MICROPHONE_MUTED: iconMicrophoneMuted,
 } as const;

src/utils/global.ts

@@ -1,13 +1,24 @@
+import { UserAgent } from "./user-agent";
+
 export const SCRIPT_VERSION = Bun.env.SCRIPT_VERSION;
 export const SCRIPT_HOME = 'https://github.com/redphx/better-xcloud';
 
 export const AppInterface = window.AppInterface;
 
+UserAgent.init();
+const userAgent = window.navigator.userAgent.toLowerCase();
+
+const isTv = userAgent.includes('smart-tv') || userAgent.includes('smarttv') || /\baft.*\b/.test(userAgent);
+const isVr = window.navigator.userAgent.includes('VR') && window.navigator.userAgent.includes('OculusBrowser');
+const browserHasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+const hasTouchSupport = !isTv && !isVr && browserHasTouchSupport;
+
 export const STATES: BxStates = {
     isPlaying: false,
     appContext: {},
     serverRegions: {},
-    hasTouchSupport: ('ontouchstart' in window || navigator.maxTouchPoints > 0),
+    hasTouchSupport: hasTouchSupport,
+    browserHasTouchSupport: browserHasTouchSupport,
 
     currentStream: {},
     remotePlay: {},

src/utils/html.ts

@@ -77,7 +77,7 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
         $btn.href = options.url;
         $btn.target = '_blank';
     } else {
-        $btn = CE('button', {'class': 'bx-button'}) as HTMLButtonElement;
+        $btn = CE('button', {'class': 'bx-button', type: 'button'}) as HTMLButtonElement;
     }
 
     const style = (options.style || 0) as number;

src/utils/monkey-patches.ts

@@ -2,6 +2,7 @@ import { BxEvent } from "@utils/bx-event";
 import { getPref, PrefKey } from "@utils/preferences";
 import { STATES } from "@utils/global";
 import { BxLogger } from "@utils/bx-logger";
+import { patchSdpBitrate } from "./sdp";
 
 export function patchVideoApi() {
     const PREF_SKIP_SPLASH_VIDEO = getPref(PrefKey.SKIP_SPLASH_VIDEO);
@@ -96,6 +97,22 @@ export function patchRtcPeerConnection() {
         return dataChannel;
     }
 
+    const nativeSetLocalDescription = RTCPeerConnection.prototype.setLocalDescription;
+    RTCPeerConnection.prototype.setLocalDescription = function(description?: RTCLocalSessionDescriptionInit): Promise<void> {
+        // set maximum bitrate
+        try {
+            const maxVideoBitrate = getPref(PrefKey.BITRATE_VIDEO_MAX);
+            if (maxVideoBitrate > 0) {
+                arguments[0].sdp = patchSdpBitrate(arguments[0].sdp, maxVideoBitrate * 1000);
+            }
+        } catch (e) {
+            BxLogger.error('setLocalDescription', e);
+        }
+
+        // @ts-ignore
+        return nativeSetLocalDescription.apply(this, arguments);
+    };
+
     const OrgRTCPeerConnection = window.RTCPeerConnection;
     // @ts-ignore
     window.RTCPeerConnection = function() {

src/utils/network.ts

@@ -8,6 +8,8 @@ import { TouchController } from "@modules/touch-controller";
 import { STATES } from "@utils/global";
 import { getPreferredServerRegion } from "@utils/region";
 import { GamePassCloudGallery } from "./gamepass-gallery";
+import { InputType } from "./bx-exposed";
+import { UserAgent } from "./user-agent";
 
 export const NATIVE_FETCH = window.fetch;
 
@@ -188,7 +190,7 @@ class XhomeInterceptor {
         let hasTouchSupport = inputConfigs.supportedTabs.length > 0;
         if (!hasTouchSupport) {
             const supportedInputTypes = inputConfigs.supportedInputTypes;
-            hasTouchSupport = supportedInputTypes.includes('NativeTouch');
+            hasTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH) || supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY);
         }
 
         if (hasTouchSupport) {
@@ -438,6 +440,17 @@ class XcloudInterceptor {
         overrides.inputConfiguration = overrides.inputConfiguration || {};
         overrides.inputConfiguration.enableVibration = true;
 
+        if (getPref(PrefKey.NATIVE_MKB_DISABLED) || UserAgent.isMobile()) {
+            overrides.inputConfiguration = Object.assign(overrides.inputConfiguration, {
+                    enableMouseInput: false,
+                    enableAbsoluteMouse: false,
+                    enableKeyboardInput: false,
+                });
+        }
+
+        overrides.videoConfiguration = overrides.videoConfiguration || {};
+        overrides.videoConfiguration.setCodecPreferences = true;
+
         // Enable touch controller
         if (TouchController.isEnabled()) {
             overrides.inputConfiguration.enableTouchInput = true;
@@ -552,6 +565,29 @@ export function interceptHttpRequests() {
             BxEvent.dispatch(window, BxEvent.STREAM_STARTING);
         }
 
+        // Override experimentals
+        if (url.startsWith('https://emerald.xboxservices.com/xboxcomfd/experimentation')) {
+            try {
+                const response = await NATIVE_FETCH(request, init);
+                const json = await response.json();
+
+                const overrideTreatments: {[key: string]: boolean} = {};
+
+                if (getPref(PrefKey.UI_HOME_CONTEXT_MENU_DISABLED)) {
+                    overrideTreatments['EnableHomeContextMenu'] = false;
+                }
+
+                for (const key in overrideTreatments) {
+                    json.exp.treatments[key] = overrideTreatments[key]
+                }
+
+                response.json = () => Promise.resolve(json);
+                return response;
+            } catch (e) {
+                console.log(e);
+            }
+        }
+
         // Add list of games with custom layouts to the official list
         if (STATES.hasTouchSupport && url.includes('catalog.gamepass.com/sigls/')) {
             const response = await NATIVE_FETCH(request, init);
@@ -570,7 +606,9 @@ export function interceptHttpRequests() {
 
                     const newCustomList = customList.map(item => ({ id: item }));
                     obj.push(...newCustomList);
-                } catch (e) {}
+                } catch (e) {
+                    console.log(e);
+                }
             }
 
             response.json = () => Promise.resolve(obj);

src/utils/preferences.ts

@@ -3,7 +3,7 @@ import { SUPPORTED_LANGUAGES, t } from "@utils/translation";
 import { SettingElement, SettingElementType } from "@utils/settings";
 import { UserAgentProfile } from "@utils/user-agent";
 import { StreamStat } from "@modules/stream/stream-stats";
-import type { PreferenceSettings } from "@/types/preferences";
+import type { PreferenceSetting, PreferenceSettings } from "@/types/preferences";
 import { STATES } from "@utils/global";
 
 export enum PrefKey {
@@ -20,7 +20,6 @@ export enum PrefKey {
     STREAM_CODEC_PROFILE = 'stream_codec_profile',
 
     USER_AGENT_PROFILE = 'user_agent_profile',
-    USER_AGENT_CUSTOM = 'user_agent_custom',
     STREAM_SIMPLIFY_MENU = 'stream_simplify_menu',
 
     STREAM_COMBINE_SOURCES = 'stream_combine_sources',
@@ -33,6 +32,10 @@ export enum PrefKey {
 
     STREAM_DISABLE_FEEDBACK_DIALOG = 'stream_disable_feedback_dialog',
 
+    BITRATE_VIDEO_MAX = 'bitrate_video_max',
+
+    GAME_BAR_POSITION = 'game_bar_position',
+
     LOCAL_CO_OP_ENABLED = 'local_co_op_enabled',
     // LOCAL_CO_OP_SEPARATE_TOUCH_CONTROLLER = 'local_co_op_separate_touch_controller',
 
@@ -41,12 +44,12 @@ export enum PrefKey {
     CONTROLLER_DEVICE_VIBRATION = 'controller_device_vibration',
     CONTROLLER_VIBRATION_INTENSITY = 'controller_vibration_intensity',
 
+    NATIVE_MKB_DISABLED = 'native_mkb_disabled',
     MKB_ENABLED = 'mkb_enabled',
     MKB_HIDE_IDLE_CURSOR = 'mkb_hide_idle_cursor',
     MKB_ABSOLUTE_MOUSE = 'mkb_absolute_mouse',
     MKB_DEFAULT_PRESET_ID = 'mkb_default_preset_id',
 
-    SCREENSHOT_BUTTON_POSITION = 'screenshot_button_position',
     SCREENSHOT_APPLY_FILTERS = 'screenshot_apply_filters',
 
     BLOCK_TRACKING = 'block_tracking',
@@ -62,6 +65,8 @@ export enum PrefKey {
     UI_LAYOUT = 'ui_layout',
     UI_SCROLLBAR_HIDE = 'ui_scrollbar_hide',
 
+    UI_HOME_CONTEXT_MENU_DISABLED = 'ui_home_context_menu_disabled',
+
     VIDEO_CLARITY = 'video_clarity',
     VIDEO_RATIO = 'video_ratio',
     VIDEO_BRIGHTNESS = 'video_brightness',
@@ -208,8 +213,7 @@ export class Preferences {
 
                 return options;
             })(),
-            ready: () => {
-                const setting = Preferences.SETTINGS[PrefKey.STREAM_CODEC_PROFILE]
+            ready: (setting: PreferenceSetting) => {
                 const options: any = setting.options;
                 const keys = Object.keys(options);
 
@@ -227,15 +231,6 @@ export class Preferences {
             default: false,
         },
 
-        [PrefKey.SCREENSHOT_BUTTON_POSITION]: {
-            label: t('screenshot-button-position'),
-            default: 'bottom-left',
-            options: {
-                'bottom-left': t('bottom-left'),
-                'bottom-right': t('bottom-right'),
-                'none': t('disable'),
-            },
-        },
         [PrefKey.SCREENSHOT_APPLY_FILTERS]: {
             label: t('screenshot-apply-filters'),
             default: false,
@@ -266,8 +261,7 @@ export class Preferences {
                 off: t('off'),
             },
             unsupported: !STATES.hasTouchSupport,
-            ready: () => {
-                const setting = Preferences.SETTINGS[PrefKey.STREAM_TOUCH_CONTROLLER];
+            ready: (setting: PreferenceSetting) => {
                 if (setting.unsupported) {
                     setting.default = 'default';
                 }
@@ -325,6 +319,39 @@ export class Preferences {
             default: false,
         },
 
+        [PrefKey.BITRATE_VIDEO_MAX]: {
+            type: SettingElementType.NUMBER_STEPPER,
+            label: t('bitrate-video-maximum'),
+            note: '⚠️ ' + t('unexpected-behavior'),
+            default: 0,
+            min: 0,
+            max: 14,
+            steps: 1,
+            params: {
+                suffix: ' Mb/s',
+                exactTicks: 5,
+                customTextValue: (value: any) => {
+                    value = parseInt(value);
+
+                    if (value === 0) {
+                        return t('unlimited');
+                    }
+
+                    return null;
+                },
+            },
+        },
+
+        [PrefKey.GAME_BAR_POSITION]: {
+            label: t('position'),
+            default: 'bottom-left',
+            options: {
+                'bottom-left': t('bottom-left'),
+                'bottom-right': t('bottom-right'),
+                'off': t('off'),
+            },
+        },
+
         [PrefKey.LOCAL_CO_OP_ENABLED]: {
             label: t('enable-local-co-op-support'),
             default: false,
@@ -374,15 +401,13 @@ export class Preferences {
             label: t('enable-mkb'),
             default: false,
             unsupported: ((): string | boolean => {
-                    const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
-                    return userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
-                })(),
-            ready: () => {
-                const pref = Preferences.SETTINGS[PrefKey.MKB_ENABLED];
-
+                const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
+                return userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
+            })(),
+            ready: (setting: PreferenceSetting) => {
                 let note;
                 let url;
-                if (pref.unsupported) {
+                if (setting.unsupported) {
                     note = t('browser-unsupported-feature');
                     url = 'https://github.com/redphx/better-xcloud/issues/206#issuecomment-1920475657';
                 } else {
@@ -390,13 +415,18 @@ export class Preferences {
                     url = 'https://better-xcloud.github.io/mouse-and-keyboard/#disclaimer';
                 }
 
-                Preferences.SETTINGS[PrefKey.MKB_ENABLED].note = CE('a', {
+                setting.note = CE('a', {
                         href: url,
                         target: '_blank',
                     }, '⚠️ ' + note);
             },
         },
 
+        [PrefKey.NATIVE_MKB_DISABLED]: {
+            label: t('disable-native-mkb'),
+            default: false,
+        },
+
         [PrefKey.MKB_DEFAULT_PRESET_ID]: {
             default: 0,
         },
@@ -442,6 +472,11 @@ export class Preferences {
             default: false,
         },
 
+        [PrefKey.UI_HOME_CONTEXT_MENU_DISABLED]: {
+            label: t('disable-home-context-menu'),
+            default: false,
+        },
+
         [PrefKey.BLOCK_SOCIAL_FEATURES]: {
             label: t('disable-social-features'),
             default: false,
@@ -452,21 +487,19 @@ export class Preferences {
         },
         [PrefKey.USER_AGENT_PROFILE]: {
             label: t('user-agent-profile'),
+            note: '⚠️ ' + t('unexpected-behavior'),
             default: 'default',
             options: {
                 [UserAgentProfile.DEFAULT]: t('default'),
-                [UserAgentProfile.EDGE_WINDOWS]: 'Edge + Windows',
-                [UserAgentProfile.SAFARI_MACOS]: 'Safari + macOS',
-                [UserAgentProfile.SMARTTV]: 'Smart TV',
+                [UserAgentProfile.WINDOWS_EDGE]: 'Edge + Windows',
+                [UserAgentProfile.MACOS_SAFARI]: 'Safari + macOS',
+                [UserAgentProfile.SMARTTV_GENERIC]: 'Smart TV',
                 [UserAgentProfile.SMARTTV_TIZEN]: 'Samsung Smart TV',
                 [UserAgentProfile.VR_OCULUS]: 'Meta Quest VR',
-                [UserAgentProfile.KIWI_V123]: 'Kiwi Browser v123',
+                [UserAgentProfile.ANDROID_KIWI_V123]: 'Kiwi Browser v123',
                 [UserAgentProfile.CUSTOM]: t('custom'),
             },
         },
-        [PrefKey.USER_AGENT_CUSTOM]: {
-            default: '',
-        },
         [PrefKey.VIDEO_CLARITY]: {
             type: SettingElementType.NUMBER_STEPPER,
             default: 0,
@@ -527,7 +560,6 @@ export class Preferences {
         [PrefKey.AUDIO_ENABLE_VOLUME_CONTROL]: {
             label: t('enable-volume-control'),
             default: false,
-            experimental: true,
         },
         [PrefKey.AUDIO_VOLUME]: {
             type: SettingElementType.NUMBER_STEPPER,
@@ -639,7 +671,7 @@ export class Preferences {
 
         for (let settingId in Preferences.SETTINGS) {
             const setting = Preferences.SETTINGS[settingId];
-            setting.ready && setting.ready.call(this);
+            setting.ready && setting.ready.call(this, setting);
 
             if (setting.migrate && settingId in savedPrefs) {
                 setting.migrate.call(this, savedPrefs, savedPrefs[settingId]);
@@ -736,7 +768,6 @@ export class Preferences {
         const setting = Preferences.SETTINGS[key];
         let currentValue = this.get(key);
 
-        let $control;
         let type;
         if ('type' in setting) {
             type = setting.type;
@@ -755,7 +786,7 @@ export class Preferences {
             currentValue = Preferences.SETTINGS[key].default;
         }
 
-        $control = SettingElement.render(type!, key as string, setting, currentValue, (e: any, value: any) => {
+        const $control = SettingElement.render(type!, key as string, setting, currentValue, (e: any, value: any) => {
                 this.set(key, value);
                 onChange && onChange(e, value);
             }, params);

src/utils/preload-state.ts

@@ -1,8 +1,8 @@
 import { STATES } from "@utils/global";
-import { UserAgent } from "@utils/user-agent";
 import { BxLogger } from "./bx-logger";
 import { TouchController } from "@modules/touch-controller";
 import { GamePassCloudGallery } from "./gamepass-gallery";
+import { getPref, PrefKey } from "./preferences";
 
 const LOG_TAG = 'PreloadState';
 
@@ -12,19 +12,14 @@ export function overridePreloadState() {
     Object.defineProperty(window, '__PRELOADED_STATE__', {
         configurable: true,
         get: () => {
-            // @ts-ignore
             return _state;
         },
         set: state => {
             // Override User-Agent
-            const userAgent = UserAgent.spoof();
-            if (userAgent) {
-                try {
-                    // @ts-ignore
-                    state.appContext.requestInfo.userAgent = userAgent;
-                } catch (e) {
-                    BxLogger.error(LOG_TAG, e);
-                }
+            try {
+                state.appContext.requestInfo.userAgent = window.navigator.userAgent;
+            } catch (e) {
+                BxLogger.error(LOG_TAG, e);
             }
 
             // Add list of games with custom layouts to the official list
@@ -47,6 +42,14 @@ export function overridePreloadState() {
                 }
             }
 
+            if (getPref(PrefKey.UI_HOME_CONTEXT_MENU_DISABLED)) {
+                try {
+                    state.experiments.experimentationInfo.data.treatments.EnableHomeContextMenu = false;
+                } catch (e) {
+                    BxLogger.error(LOG_TAG, e);
+                }
+            }
+
             // @ts-ignore
             _state = state;
             STATES.appContext = structuredClone(state.appContext);

src/utils/screenshot.ts

@@ -0,0 +1,77 @@
+import { AppInterface, STATES } from "./global";
+import { CE } from "./html";
+
+
+export class Screenshot {
+    static setup() {
+        const currentStream = STATES.currentStream;
+        if (!currentStream.$screenshotCanvas) {
+            currentStream.$screenshotCanvas = CE<HTMLCanvasElement>('canvas', {'class': 'bx-gone'});
+
+            currentStream.screenshotCanvasContext = currentStream.$screenshotCanvas.getContext('2d', {
+                alpha: false,
+                willReadFrequently: false,
+            });
+        }
+        // document.documentElement.appendChild(currentStream.$screenshotCanvas!);
+    }
+
+    static updateCanvasSize(width: number, height: number) {
+        const $canvas = STATES.currentStream.$screenshotCanvas;
+        if ($canvas) {
+            $canvas.width = width;
+            $canvas.height = height;
+        }
+    }
+
+    static updateCanvasFilters(filters: string) {
+        STATES.currentStream.screenshotCanvasContext && (STATES.currentStream.screenshotCanvasContext.filter = filters);
+    }
+
+    private static onAnimationEnd(e: Event) {
+        (e.target as any).classList.remove('bx-taking-screenshot');
+    }
+
+    static takeScreenshot(callback?: any) {
+        const currentStream = STATES.currentStream;
+        const $video = currentStream.$video;
+        const $canvas = currentStream.$screenshotCanvas;
+        if (!$video || !$canvas) {
+            return;
+        }
+
+        $video.parentElement?.addEventListener('animationend', this.onAnimationEnd);
+        $video.parentElement?.classList.add('bx-taking-screenshot');
+
+        const canvasContext = currentStream.screenshotCanvasContext!;
+        canvasContext.drawImage($video, 0, 0, $canvas.width, $canvas.height);
+
+        // Get data URL and pass to parent app
+        if (AppInterface) {
+            const data = $canvas.toDataURL('image/png').split(';base64,')[1];
+            AppInterface.saveScreenshot(currentStream.titleId, data);
+
+            // Free screenshot from memory
+            canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
+
+            callback && callback();
+            return;
+        }
+
+        $canvas && $canvas.toBlob(blob => {
+                // Download screenshot
+                const now = +new Date;
+                const $anchor = CE<HTMLAnchorElement>('a', {
+                        'download': `${currentStream.titleId}-${now}.png`,
+                        'href': URL.createObjectURL(blob!),
+                    });
+                $anchor.click();
+
+                // Free screenshot from memory
+                URL.revokeObjectURL($anchor.href);
+                canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
+
+                callback && callback();
+            }, 'image/png');
+    }
+}

src/utils/sdp.ts

@@ -0,0 +1,61 @@
+export function patchSdpBitrate(sdp: string, video?: number, audio?: number) {
+    const lines = sdp.split('\n');
+
+    const mediaSet: Set<string> = new Set();
+    !!video && mediaSet.add('video');
+    !!audio && mediaSet.add('audio');
+
+    const bitrate = {
+        video,
+        audio,
+    };
+
+    for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {
+        let media: string = '';
+
+        let line = lines[lineNumber];
+        if (!line.startsWith('m=')) {
+            continue;
+        }
+
+        for (const m of mediaSet) {
+            if (line.startsWith(`m=${m}`)) {
+                media = m;
+                // Remove matched media from set
+                mediaSet.delete(media);
+                break;
+            }
+        }
+
+        // Invalid media, continue looking
+        if (!media) {
+            continue;
+        }
+
+        const bLine = `b=AS:${bitrate[media as keyof typeof bitrate]}`;
+
+        while (lineNumber++, lineNumber < lines.length) {
+            line = lines[lineNumber];
+            // Ignore lines that start with "i=" or "c="
+            if (line.startsWith('i=') || line.startsWith('c=')) {
+                continue;
+            }
+
+            if (line.startsWith('b=AS:')) {
+                // Replace bitrate
+                lines[lineNumber] = bLine;
+                // Stop lookine for "b=AS:" line
+                break;
+            }
+
+            if (line.startsWith('m=')) {
+                // "b=AS:" line not found, add "b" line before "m="
+                lines.splice(lineNumber, 0, bLine);
+                // Stop
+                break;
+            }
+        }
+    }
+
+    return lines.join('\n');
+}

src/utils/settings.ts

@@ -12,6 +12,8 @@ type NumberStepperParams = {
 
     ticks?: number;
     exactTicks?: number;
+
+    customTextValue?: (value: any) => string | null;
 }
 
 export enum SettingElementType {
@@ -24,7 +26,10 @@ export enum SettingElementType {
 
 export class SettingElement {
     static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
-        const $control = CE<HTMLSelectElement>('select') as HTMLSelectElement;
+        const $control = CE<HTMLSelectElement>('select', {
+                title: setting.label,
+                tabindex: 0,
+            }) as HTMLSelectElement;
         for (let value in setting.options) {
             const label = setting.options[value];
 
@@ -48,7 +53,11 @@ export class SettingElement {
     }
 
     static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}) {
-        const $control = CE<HTMLSelectElement>('select', {'multiple': true});
+        const $control = CE<HTMLSelectElement>('select', {
+                title: setting.label,
+                multiple: true,
+                tabindex: 0,
+            });
         if (params && params.size) {
             $control.setAttribute('size', params.size.toString());
         }
@@ -91,7 +100,7 @@ export class SettingElement {
     }
 
     static #renderNumber(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
-        const $control = CE('input', {'type': 'number', 'min': setting.min, 'max': setting.max}) as HTMLInputElement;
+        const $control = CE('input', {'tabindex': 0, 'type': 'number', 'min': setting.min, 'max': setting.max}) as HTMLInputElement;
         $control.value = currentValue;
         onChange && $control.addEventListener('change', (e: Event) => {
             const target = e.target as HTMLInputElement;
@@ -106,7 +115,7 @@ export class SettingElement {
     }
 
     static #renderCheckbox(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
-        const $control = CE('input', {'type': 'checkbox'}) as HTMLInputElement;
+        const $control = CE('input', {'type': 'checkbox', 'tabindex': 0}) as HTMLInputElement;
         $control.checked = currentValue;
 
         onChange && $control.addEventListener('change', e => {
@@ -131,18 +140,49 @@ export class SettingElement {
         const MAX = setting.max!;
         const STEPS = Math.max(setting.steps || 1, 1);
 
+        const renderTextValue = (value: any) => {
+            value = parseInt(value as string);
+
+            let textContent = null;
+            if (options.customTextValue) {
+                textContent = options.customTextValue(value);
+            }
+
+            if (textContent === null) {
+                textContent = value.toString() + options.suffix;
+            }
+
+            return textContent;
+        };
+
         const $wrapper = CE('div', {'class': 'bx-number-stepper'},
-                            $decBtn = CE('button', {'data-type': 'dec'}, '-') as HTMLButtonElement,
-                            $text = CE('span', {}, value + options.suffix) as HTMLSpanElement,
-                            $incBtn = CE('button', {'data-type': 'inc'}, '+') as HTMLButtonElement,
-                           );
+                $decBtn = CE('button', {
+                        'data-type': 'dec',
+                        type: 'button',
+                        tabindex: -1,
+                    }, '-') as HTMLButtonElement,
+                $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
+                $incBtn = CE('button', {
+                        'data-type': 'inc',
+                        type: 'button',
+                        tabindex: -1,
+                    }, '+') as HTMLButtonElement,
+            );
 
         if (!options.disabled && !options.hideSlider) {
-            $range = CE('input', {'type': 'range', 'min': MIN, 'max': MAX, 'value': value, 'step': STEPS}) as HTMLInputElement;
+            $range = CE('input', {
+                    id: `bx_setting_${key}`,
+                    type: 'range',
+                    min: MIN,
+                    max: MAX,
+                    value: value,
+                    step: STEPS,
+                    tabindex: 0,
+                }) as HTMLInputElement;
+
             $range.addEventListener('input', e => {
                 value = parseInt((e.target as HTMLInputElement).value);
-
-                $text.textContent = value + options.suffix;
+                $text.textContent = renderTextValue(value);
                 onChange && onChange(e, value);
             });
             $wrapper.appendChild($range);
@@ -204,7 +244,7 @@ export class SettingElement {
                 value = Math.min(MAX, value + STEPS);
             }
 
-            $text.textContent = value.toString() + options.suffix;
+            $text.textContent = renderTextValue(value);
             $range && ($range.value = value.toString());
 
             isHolding = false;
@@ -237,7 +277,7 @@ export class SettingElement {
 
         // Custom method
         ($wrapper as any).setValue = (value: any) => {
-            $text.textContent = value + options.suffix;
+            $text.textContent = renderTextValue(value);
             $range && ($range.value = value);
         };
 
@@ -266,7 +306,10 @@ export class SettingElement {
         const method = SettingElement.#METHOD_MAP[type];
         // @ts-ignore
         const $control = method(...Array.from(arguments).slice(1)) as HTMLElement;
-        $control.id = `bx_setting_${key}`;
+
+        if (type !== SettingElementType.NUMBER_STEPPER) {
+            $control.id = `bx_setting_${key}`;
+        }
 
         // Add "name" property to "select" elements
         if (type === SettingElementType.OPTIONS || type === SettingElementType.MULTIPLE_OPTIONS) {

src/utils/user-agent.ts

@@ -1,12 +1,15 @@
-import { PrefKey, getPref } from "@utils/preferences";
+type UserAgentConfig = {
+    profile: UserAgentProfile,
+    custom?: string,
+};
 
 export enum UserAgentProfile {
-    EDGE_WINDOWS = 'edge-windows',
-    SAFARI_MACOS = 'safari-macos',
-    SMARTTV = 'smarttv',
+    WINDOWS_EDGE = 'windows-edge',
+    MACOS_SAFARI = 'macos-safari',
+    SMARTTV_GENERIC = 'smarttv-generic',
     SMARTTV_TIZEN = 'smarttv-tizen',
     VR_OCULUS = 'vr-oculus',
-    KIWI_V123 = 'kiwi-v123',
+    ANDROID_KIWI_V123 = 'android-kiwi-v123',
     DEFAULT = 'default',
     CUSTOM = 'custom',
 }
@@ -21,13 +24,40 @@ if (!!(window as any).chrome || window.navigator.userAgent.includes('Chrome')) {
 }
 
 export class UserAgent {
+    static readonly STORAGE_KEY = 'better_xcloud_user_agent';
+    static #config: UserAgentConfig;
+
     static #USER_AGENTS: PartialRecord<UserAgentProfile, string> = {
-        [UserAgentProfile.EDGE_WINDOWS]: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${CHROMIUM_VERSION} Safari/537.36 Edg/${CHROMIUM_VERSION}`,
-        [UserAgentProfile.SAFARI_MACOS]: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.1',
-        [UserAgentProfile.SMARTTV]: window.navigator.userAgent + ' SmartTV',
+        [UserAgentProfile.WINDOWS_EDGE]: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${CHROMIUM_VERSION} Safari/537.36 Edg/${CHROMIUM_VERSION}`,
+        [UserAgentProfile.MACOS_SAFARI]: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.1',
+        [UserAgentProfile.SMARTTV_GENERIC]: window.navigator.userAgent + ' SmartTV',
         [UserAgentProfile.SMARTTV_TIZEN]: `Mozilla/5.0 (SMART-TV; LINUX; Tizen 7.0) AppleWebKit/537.36 (KHTML, like Gecko) ${CHROMIUM_VERSION}/7.0 TV Safari/537.36`,
         [UserAgentProfile.VR_OCULUS]: window.navigator.userAgent + ' OculusBrowser VR',
-        [UserAgentProfile.KIWI_V123]: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.6312.118 Mobile Safari/537.36',
+        [UserAgentProfile.ANDROID_KIWI_V123]: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.6312.118 Mobile Safari/537.36',
+    }
+
+    static init() {
+        UserAgent.#config = JSON.parse(window.localStorage.getItem(UserAgent.STORAGE_KEY)  || '{}') as UserAgentConfig;
+        if (!UserAgent.#config.profile) {
+            UserAgent.#config.profile = UserAgentProfile.DEFAULT;
+        }
+
+        if (!UserAgent.#config.custom) {
+            UserAgent.#config.custom = '';
+        }
+
+        UserAgent.spoof();
+    }
+
+    static updateStorage(profile: UserAgentProfile, custom?: string) {
+        const clonedConfig = structuredClone(UserAgent.#config);
+        clonedConfig.profile = profile;
+
+        if (typeof custom !== 'undefined') {
+            clonedConfig.custom = custom;
+        }
+
+        window.localStorage.setItem(UserAgent.STORAGE_KEY, JSON.stringify(clonedConfig));
     }
 
     static getDefault(): string {
@@ -35,16 +65,22 @@ export class UserAgent {
     }
 
     static get(profile: UserAgentProfile): string {
-        const defaultUserAgent = UserAgent.getDefault();
-        if (profile === UserAgentProfile.CUSTOM) {
-            return getPref(PrefKey.USER_AGENT_CUSTOM);
-        }
+        const defaultUserAgent = window.navigator.userAgent;
 
-        return (UserAgent.#USER_AGENTS as any)[profile] || defaultUserAgent;
+        switch (profile) {
+            case UserAgentProfile.DEFAULT:
+                return defaultUserAgent;
+
+            case UserAgentProfile.CUSTOM:
+                return UserAgent.#config.custom || defaultUserAgent;
+
+            default:
+                return UserAgent.#USER_AGENTS[profile] || defaultUserAgent;
+        }
     }
 
     static isSafari(mobile=false): boolean {
-        const userAgent = (UserAgent.getDefault() || '').toLowerCase();
+        const userAgent = UserAgent.getDefault().toLowerCase();
         let result = userAgent.includes('safari') && !userAgent.includes('chrom');
 
         if (result && mobile) {
@@ -55,21 +91,17 @@ export class UserAgent {
     }
 
     static isMobile(): boolean {
-        const userAgent = (UserAgent.getDefault() || '').toLowerCase();
+        const userAgent = UserAgent.getDefault().toLowerCase();
         return /iphone|ipad|android/.test(userAgent);
     }
 
     static spoof() {
-        let newUserAgent;
-
-        const profile = getPref(PrefKey.USER_AGENT_PROFILE);
+        const profile = UserAgent.#config.profile;
         if (profile === UserAgentProfile.DEFAULT) {
             return;
         }
 
-        if (!newUserAgent) {
-            newUserAgent = UserAgent.get(profile);
-        }
+        const newUserAgent = UserAgent.get(profile);
 
         // Clear data of navigator.userAgentData, force xCloud to detect browser based on navigator.userAgent
         (window.navigator as any).orgUserAgentData = (window.navigator as any).userAgentData;
@@ -80,7 +112,5 @@ export class UserAgent {
         Object.defineProperty(window.navigator, 'userAgent', {
             value: newUserAgent,
         });
-
-        return newUserAgent;
     }
 }

src/utils/utils.ts

@@ -1,5 +1,5 @@
 import { PrefKey, getPref, setPref } from "@utils/preferences";
-import { SCRIPT_VERSION } from "@utils/global";
+import { AppInterface, SCRIPT_VERSION } from "@utils/global";
 import { UserAgent } from "@utils/user-agent";
 
 /**
@@ -38,7 +38,7 @@ export function disablePwa() {
     }
 
     // Check if it's Safari on mobile
-    if (UserAgent.isSafari(true)) {
+    if (!!AppInterface || UserAgent.isSafari(true)) {
         // Disable the PWA prompt
         Object.defineProperty(window.navigator, 'standalone', {
             value: true,