Bump version to 5.4.2

This reverts commit 91ab57fa29.

dist/better-xcloud.meta.js

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

src/assets/css/button.styl

@@ -67,10 +67,6 @@
         display: inline-block;
         width: 16px;
         height: var(--bx-button-height);
-
-        &:not(:only-child) {
-            margin-right: 4px;
-        }
     }
 
     span {
@@ -82,25 +78,29 @@
         color: #fff;
         overflow: hidden;
         white-space: nowrap;
+
+        &:not(:only-child) {
+            margin-left: 10px;
+        }
+    }
+}
+
+.bx-focusable {
+    position: relative;
+
+    &::after {
+        border: 2px solid transparent;
+        border-radius: 4px;
     }
 
-    &.bx-focusable {
+    &:focus::after {
-        position: relative;
+        content: '';
-
+        border-color: white;
-        &::after {
+        position: absolute;
-            border: 2px solid transparent;
+        top: 0;
-            border-radius: 4px;
+        left: 0;
-        }
+        right: 0;
-
+        bottom: 0;
-        &:focus::after {
-            content: '';
-            border-color: white;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-        }
     }
 }
 
@@ -111,3 +111,20 @@ a.bx-button {
         text-align: center;
     }
 }
+
+button.bx-inactive {
+    pointer-events: none;
+    opacity: 0.2;
+    background: transparent !important;
+}
+
+.bx-button-shortcut {
+    max-width: max-content;
+    margin: 10px 0 0 0;
+}
+
+@media (min-width: 568px) and (max-height: 480px) {
+    .bx-button-shortcut {
+        margin: 8px 0 0 10px;
+    }
+}

src/assets/css/global-settings.styl

@@ -17,11 +17,13 @@
 }
 
 .bx-settings-wrapper {
-    width: 450px;
+    min-width: 450px;
+    max-width: 600px;
     margin: auto;
     padding: 12px 6px;
 
     @media screen and (max-width: 450px) {
+        min-width: unset;
         width: 100%;
     }
 
@@ -50,6 +52,7 @@
         display: block;
         flex: 1;
         text-transform: none;
+        margin-right: 10px;
 
         span {
             color: #5dc21e !important;
@@ -95,13 +98,19 @@
 
 .bx-settings-row {
     display: flex;
+    flex-wrap: wrap;
     padding: 6px 12px;
     position: relative;
 
     label {
-        flex: 1;
         align-self: center;
-        margin-bottom: 0;
+        margin: 0 4px 0;
+    }
+
+    .bx-setting-control {
+        flex: 1;
+        display: flex;
+        justify-content: right;
     }
 
 
@@ -128,14 +137,19 @@
         }
     }
 
-    input[type=checkbox], select {
+    input[type=checkbox] {
+        cursor: pointer;
+    }
+
+    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) {
+    &:has(input:focus), &:has(select:focus), &:has(button:focus) {
         &::before {
             content: ' ';
             border-radius: 4px;
@@ -190,3 +204,23 @@
     display: block;
     width: 100%;
 }
+
+.bx-debug-info {
+    button {
+        margin-top: 10px;
+    }
+
+    pre {
+        margin-top: 10px;
+        cursor: copy;
+        color: white;
+        padding: 8px;
+        border: 1px solid #2d2d2d;
+        background: #212121;
+        white-space: break-spaces;
+
+        &:hover {
+            background: #272727;
+        }
+    }
+}

src/assets/css/number-stepper.styl

@@ -5,14 +5,15 @@
         display: inline-block;
         min-width: 40px;
         font-family: var(--bx-monospaced-font);
-        font-size: 14px;
+        font-size: 12px;
+        margin: 0 4px;
     }
 
     button {
         border: none;
         width: 24px;
         height: 24px;
-        margin: 0 4px;
+        margin: 0;
         line-height: 24px;
         background-color: var(--bx-default-button-color);
         color: #fff;

src/assets/css/root.styl

@@ -5,7 +5,7 @@
     --bx-monospaced-font: Consolas, "Courier New", Courier, monospace;
     --bx-promptfont-font: promptfont;
 
-    --bx-button-height: 36px;
+    --bx-button-height: 40px;
 
     --bx-default-button-color: #2d3036;
     --bx-default-button-hover-color: #515863;
@@ -105,6 +105,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     font-family: var(--bx-promptfont-font);
 }
 
+.bx-line-through {
+    text-decoration: line-through
+}
+
 select[multiple] {
     overflow: auto;
 }
@@ -132,3 +136,35 @@ div[class*=SupportedInputsBadge] {
         display: none;
     }
 }
+
+
+.bx-game-tile-wait-time {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background: #0000008c;
+    display: none;
+    border-radius: 0 0 4px 0;
+    align-items: center;
+    padding: 4px 8px;
+
+    a[class^=BaseItem-module__container]:focus &,
+    button[class^=BaseItem-module__container]:focus & {
+        display: flex;
+    }
+
+    svg {
+        width: 14px;
+        height: 16px;
+        margin-right: 2px;
+    }
+
+    span {
+        display: inline-block;
+        height: 16px;
+        line-height: 16px;
+        font-size: 12px;
+        font-weight: bold;
+    }
+}

src/assets/css/stream-settings.styl

@@ -1,6 +1,9 @@
 .bx-stream-settings-dialog {
     display: flex;
     position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
     z-index: var(--bx-stream-settings-z-index);
     opacity: 0.98;
     user-select: none;
@@ -22,10 +25,8 @@
 }
 
 .bx-stream-settings-tabs {
-    position: fixed;
-    top: 0;
-    right: 420px;
     display: flex;
+    position: fixed;
     flex-direction: column;
     border-radius: 0 0 0 8px;
     box-shadow: 0px 0px 6px #000;
@@ -49,16 +50,17 @@
             background: #2f2f2f;
             border-color: #484848;
         }
+
+        &:focus {
+            border-color: #fff;
+            outline: none;
+        }
     }
 }
 
 
 .bx-stream-settings-tab-contents {
     flex-direction: column;
-    position: fixed;
-    right: 0;
-    top: 0;
-    bottom: 0;
     padding: 14px 14px 0;
     width: 420px;
     background: #1a1b1e;
@@ -69,14 +71,17 @@
     text-align: center;
     box-shadow: 0px 0px 6px #000;
     overflow: overlay;
+    margin-left: 56px;
+    z-index: 1;
 
-    > div[data-group=mkb] {
+    > div[data-tab-group=mkb] {
         display: flex;
         flex-direction: column;
         height: 100%;
         overflow: hidden;
     }
 
+    &:focus,
     *:focus {
         outline: none !important;
     }
@@ -102,12 +107,33 @@
     }
 }
 
+@media screen and (max-width: 500px) {
+    .bx-stream-settings-tab-contents {
+        width: calc(100vw - 56px);
+    }
+}
 
 .bx-stream-settings-row {
     display: flex;
+    flex-wrap: wrap;
     border-bottom: 1px solid #40404080;
-    margin-bottom: 16px;
+    padding: 16px 8px;
-    padding-bottom: 16px;
+    border-left: 2px solid transparent;
+
+    &:hover, &:focus-within {
+        background-color: #242424;
+    }
+
+    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), &:has(button:focus) {
+        border-left-color: white;
+    }
 
     > label {
         font-size: 16px;
@@ -120,6 +146,10 @@
 
     input {
         accent-color: var(--bx-primary-button-color);
+
+        &:focus {
+            accent-color: var(--bx-danger-button-color);
+        }
     }
 
     select:disabled {
@@ -143,7 +173,7 @@
 }
 
 .bx-stream-settings-tab-contents {
-    div[data-group="shortcuts"] {
+    div[data-tab-group="shortcuts"] {
         > div {
             &[data-has-gamepad=true] {
                 > div:first-of-type {
@@ -170,10 +200,10 @@
             width: 100%;
             height: 36px;
             display: block;
-            margin-bottom: 10px;
         }
 
         .bx-shortcut-note {
+            margin-top: 10px;
             font-size: 14px;
         }
 

src/assets/css/web-components.styl

@@ -1,19 +1,27 @@
 .bx-select {
+    display: flex;
+    align-items: center;
+    flex: 0 1 auto;
+
     select {
-        display: none;
+        display: none !important;
     }
 
-    > div {
+    > div, button.bx-select-value {
-        display: inline-block;
         min-width: 110px;
         text-align: center;
-        margin: 0 10px;
+        margin: 0 8px;
         line-height: 24px;
         vertical-align: middle;
         background: #fff;
         color: #000;
         border-radius: 4px;
-        padding: 2px 4px;
+        padding: 2px 8px;
+        flex: 1;
+    }
+
+    > div {
+        display: inline-block;
 
         input {
             display: inline-block;
@@ -22,24 +30,62 @@
 
         label {
             margin-bottom: 0;
+            font-size: 14px;
+            width: 100%;
+
+            span {
+                display: block;
+                font-size: 10px;
+                font-weight: bold;
+                text-align: left;
+                line-height: initial;
+            }
         }
     }
 
-    button {
+    button.bx-select-value {
+        border: none;
+        display: inline-flex;
+        cursor: pointer;
+        min-height: 30px;
+        font-size: 0.9rem;
+        align-items: center;
+
+        span {
+            flex: 1;
+            text-align: center;
+            display: inline-block;
+        }
+
+        input {
+            margin: 0 4px;
+            accent-color: var(--bx-primary-button-color);
+        }
+
+        &:hover,
+        &:focus {
+            input {
+                accent-color: var(--bx-danger-button-color);
+            }
+
+            &::after {
+                border-color: #4d4d4d !important;
+            }
+        }
+    }
+
+    button.bx-button {
         border: none;
-        width: 24px;
         height: 24px;
+        width: 24px;
+        padding: 0;
         line-height: 24px;
         color: #fff;
         border-radius: 4px;
         font-weight: bold;
-        font-size: 14px;
+        font-size: 12px;
         font-family: var(--bx-monospaced-font);
-
+        flex-shrink: 0;
-        &.bx-inactive {
-            pointer-events: none;
-            opacity: 0.2;
-        }
 
         span {
             line-height: unset;

src/assets/svg/create-shortcut.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="M13.253 3.639c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V3.639zm0 16.481c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zm16.481 0c0-.758-.615-1.373-1.373-1.373H20.12c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zM19.262 7.76h9.957"/>
+    <path d="M24.24 2.781v9.957"/>
+</svg>

src/enums/bypass-servers.ts

@@ -0,0 +1,13 @@
+export const BypassServers = {
+    'br': 'Brazil',
+    'jp': 'Japan',
+    'pl': 'Poland',
+    'us': 'United States',
+}
+
+export const BypassServerIps = {
+    'br': '169.150.198.66',
+    'jp': '138.199.21.239',
+    'pl': '45.134.212.66',
+    'us': '143.244.47.65',
+}

src/index.ts

@@ -16,7 +16,6 @@ import { PrefKey, getPref } from "@utils/preferences";
 import { LoadingScreen } from "@modules/loading-screen";
 import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
 import { TouchController } from "@modules/touch-controller";
-import { watchHeader } from "@modules/ui/header";
 import { checkForUpdate, disablePwa } from "@utils/utils";
 import { Patcher } from "@modules/patcher";
 import { RemotePlay } from "@modules/remote-play";
@@ -34,6 +33,9 @@ import { GuideMenu, GuideMenuTab } from "./modules/ui/guide-menu";
 import { StreamSettings } from "./modules/stream/stream-settings";
 import { updateVideoPlayer } from "./modules/stream/stream-settings-utils";
 import { UiSection } from "./enums/ui-sections";
+import { HeaderSection } from "./modules/ui/header";
+import { GameTile } from "./modules/ui/game-tile";
+import { ProductDetailsPage } from "./modules/ui/product-details";
 
 
 // Handle login page
@@ -91,8 +93,8 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     throw new Error('[Better xCloud] Executing workaround for Safari');
 }
 
-// Automatically reload the page when running into the "We are sorry..." error message
 window.addEventListener('load', e => {
+    // Automatically reload the page when running into the "We are sorry..." error message
     window.setTimeout(() => {
         if (document.body.classList.contains('legacyBackground')) {
             // Has error message -> reload page
@@ -101,18 +103,29 @@ window.addEventListener('load', e => {
             window.location.reload(true);
         }
     }, 3000);
-
 });
 
-// Hide "Play with Friends" skeleton section
+document.addEventListener('readystatechange', e => {
-if (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS)) {
+    if (document.readyState !== 'interactive') {
-    document.addEventListener('readystatechange', e => {
+        return;
-        if (document.readyState === 'interactive') {
+    }
-            const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest('div[class*=HomePage-module]') as HTMLElement;
+
-            $parent && ($parent.style.display = 'none');
+    STATES.isSignedIn = (window as any).xbcUser.isSignedIn;
-        }
+
-    })
+    if (STATES.isSignedIn) {
-}
+        // Preload Remote Play
+        getPref(PrefKey.REMOTE_PLAY_ENABLED) && BX_FLAGS.PreloadRemotePlay && RemotePlay.preload();
+    } else {
+        // Show Settings button in the header when not signed
+        HeaderSection.watchHeader();
+    }
+
+    // Hide "Play with Friends" skeleton section
+    if (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS)) {
+        const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest('div[class*=HomePage-module]') as HTMLElement;
+        $parent && ($parent.style.display = 'none');
+    }
+})
 
 window.BX_EXPOSED = BxExposed;
 
@@ -125,13 +138,13 @@ window.addEventListener('popstate', onHistoryChanged);
 window.history.pushState = patchHistoryMethod('pushState');
 window.history.replaceState = patchHistoryMethod('replaceState');
 
+window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
+    STATES.supportedRegion = false;
+    window.setTimeout(HeaderSection.watchHeader, 2000);
+});
+
 window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
-    // Start rendering UI
+    HeaderSection.watchHeader();
-    if (document.querySelector('div[class^=UnsupportedMarketPage]')) {
-        window.setTimeout(watchHeader, 2000);
-    } else {
-        watchHeader();
-    }
 });
 
 window.addEventListener(BxEvent.STREAM_LOADING, e => {
@@ -186,6 +199,13 @@ window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
     BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
 });
 
+window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e => {
+    const component = (e as any).component;
+    if (component === 'product-details') {
+        ProductDetailsPage.injectShortcutButton();
+    }
+});
+
 function unload() {
     if (!STATES.isPlaying) {
         return;
@@ -340,6 +360,9 @@ function main() {
         STATES.pointerServerPort = AppInterface.startPointerServer() || 9269;
         BxLogger.info('startPointerServer', 'Port', STATES.pointerServerPort.toString());
     }
+
+    // Show wait time in game card
+    getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && GameTile.setup();
 }
 
 main();

src/modules/controller-shortcut.ts

@@ -11,6 +11,7 @@ import { PrefKey, getPref } from "@utils/preferences";
 import { SoundShortcut } from "./shortcuts/shortcut-sound";
 import { BxEvent } from "@/utils/bx-event";
 import { AppInterface } from "@/utils/global";
+import { BxSelectElement } from "@/web-components/bx-select";
 
 enum ShortcutAction {
     STREAM_SCREENSHOT_CAPTURE = 'stream-screenshot-capture',
@@ -182,14 +183,14 @@ export class ControllerShortcut {
             $fragment.appendChild($option);
         }
 
+        $container.dataset.hasGamepad = hasGamepad.toString();
         if (hasGamepad) {
             $select.appendChild($fragment);
 
             $select.selectedIndex = 0;
-            $select.dispatchEvent(new Event('change'));
+            $select.dispatchEvent(new Event('input'));
         }
 
-        $container.dataset.hasGamepad = hasGamepad.toString();
     }
 
     static #switchProfile(profile: string) {
@@ -204,13 +205,16 @@ export class ControllerShortcut {
             const $select = ControllerShortcut.#$selectActions[button as GamepadKey]!;
             $select.value = actions[button] || '';
 
-            BxEvent.dispatch($select, 'change', {
+            BxEvent.dispatch($select, 'input', {
-                    ignoreOnChange: true,
+                ignoreOnChange: true,
-                });
+                manualTrigger: true,
+            });
         }
     }
 
     static renderSettings() {
+        const PREF_CONTROLLER_FRIENDLY_UI = getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
+
         // Read actions from localStorage
         ControllerShortcut.#ACTIONS = JSON.parse(window.localStorage.getItem(ControllerShortcut.#STORAGE_KEY) || '{}');
 
@@ -287,23 +291,23 @@ export class ControllerShortcut {
         }
 
         let $remap: HTMLElement;
-        let $selectProfile: HTMLSelectElement;
+        const $selectProfile = CE<HTMLSelectElement>('select', {class: 'bx-shortcut-profile', autocomplete: 'off'});
 
         const $container = CE('div', {'data-has-gamepad': 'false'},
             CE('div', {},
-                CE('p', {'class': 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')),
+                CE('p', {class: 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')),
             ),
 
             $remap = CE('div', {},
-                $selectProfile = CE('select', {'class': 'bx-shortcut-profile', autocomplete: 'off'}),
+                PREF_CONTROLLER_FRIENDLY_UI ? CE('div', {'data-focus-container': 'true'}, BxSelectElement.wrap($selectProfile)) : $selectProfile,
-                CE('p', {'class': 'bx-shortcut-note'},
+                CE('p', {class: 'bx-shortcut-note'},
-                    CE('span', {'class': 'bx-prompt'}, PrompFont.HOME),
+                    CE('span', {class: 'bx-prompt'}, PrompFont.HOME),
                     ': ' + t('controller-shortcuts-xbox-note'),
                 ),
             ),
         );
 
-        $selectProfile.addEventListener('change', e => {
+        $selectProfile.addEventListener('input', e => {
             ControllerShortcut.#switchProfile($selectProfile.value);
         });
 
@@ -314,38 +318,51 @@ export class ControllerShortcut {
             const button: unknown = $target.dataset.button;
             const action = $target.value as ShortcutAction;
 
-            const $fakeSelect = $target.previousElementSibling! as HTMLSelectElement;
+            if (!PREF_CONTROLLER_FRIENDLY_UI) {
-            let fakeText = '---';
+                const $fakeSelect = $target.previousElementSibling! as HTMLSelectElement;
-            if (action) {
+                let fakeText = '---';
-                const $selectedOption =  $target.options[$target.selectedIndex];
+                if (action) {
-                const $optGroup = $selectedOption.parentElement as HTMLOptGroupElement;
+                    const $selectedOption =  $target.options[$target.selectedIndex];
-                fakeText = $optGroup.label + ' ❯ ' + $selectedOption.text;
+                    const $optGroup = $selectedOption.parentElement as HTMLOptGroupElement;
+                    fakeText = $optGroup.label + ' ❯ ' + $selectedOption.text;
+                }
+                ($fakeSelect.firstElementChild as HTMLOptionElement).text = fakeText;
             }
-            ($fakeSelect.firstElementChild as HTMLOptionElement).text = fakeText;
 
             !(e as any).ignoreOnChange && ControllerShortcut.#updateAction(profile, button as GamepadKey, action);
         };
 
+
         // @ts-ignore
         for (const [button, prompt] of buttons) {
-            const $row = CE('div', {'class': 'bx-shortcut-row'});
+            const $row = CE('div', {
+                class: 'bx-shortcut-row',
+                'data-focus-container': 'true',
+            });
 
-            const $label = CE('label', {'class': 'bx-prompt'}, `${PrompFont.HOME} + ${prompt}`);
+            const $label = CE('label', {class: 'bx-prompt'}, `${PrompFont.HOME} + ${prompt}`);
 
-            const $div = CE('div', {'class': 'bx-shortcut-actions'});
+            const $div = CE('div', {class: 'bx-shortcut-actions'});
 
-            const $fakeSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'},
+            if (!PREF_CONTROLLER_FRIENDLY_UI) {
-                CE('option', {}, '---'),
+                const $fakeSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'},
-            );
+                    CE('option', {}, '---'),
-            $div.appendChild($fakeSelect);
+                );
+
+                $div.appendChild($fakeSelect);
+            }
 
             const $select = $baseSelect.cloneNode(true) as HTMLSelectElement;
             $select.dataset.button = button.toString();
-            $select.addEventListener('change', onActionChanged);
+            $select.addEventListener('input', onActionChanged);
 
             ControllerShortcut.#$selectActions[button] = $select;
 
-            $div.appendChild($select);
+            if (PREF_CONTROLLER_FRIENDLY_UI) {
+                $div.appendChild(BxSelectElement.wrap($select));
+            } else {
+                $div.appendChild($select);
+            }
 
             $row.appendChild($label);
             $row.appendChild($div);

src/modules/patcher.ts

@@ -1,4 +1,4 @@
-import { SCRIPT_VERSION, STATES } from "@utils/global";
+import { AppInterface, SCRIPT_VERSION, STATES } from "@utils/global";
 import { BX_FLAGS } from "@utils/bx-flags";
 import { getPref, PrefKey } from "@utils/preferences";
 import { VibrationManager } from "@modules/vibration-manager";
@@ -9,6 +9,7 @@ import { BxEvent } from "@/utils/bx-event";
 import codeControllerShortcuts from "./patches/controller-shortcuts.js" with { type: "text" };
 import codeExposeStreamSession from "./patches/expose-stream-session.js" with { type: "text" };
 import codeLocalCoOpEnable from "./patches/local-co-op-enable.js" with { type: "text" };
+import codeSetCurrentlyFocusedInteractable from "./patches/set-currently-focused-interactable.js" with { type: "text" };
 import codeRemotePlayEnable from "./patches/remote-play-enable.js" with { type: "text" };
 import codeRemotePlayKeepAlive from "./patches/remote-play-keep-alive.js" with { type: "text" };
 import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "text" };
@@ -451,6 +452,17 @@ BxEvent.dispatch(window, BxEvent.XCLOUD_POLLING_MODE_CHANGED, {mode: e});
         return str;
     },
 
+    patchGamepadPolling(str: string) {
+        let index = str.indexOf('.shouldHandleGamepadInput)())return void');
+        if (index === -1) {
+            return false;
+        }
+
+        index = str.indexOf('{', index - 20) + 1;
+        str = str.substring(0, index) + 'if (window.BX_EXPOSED.disableGamepadPolling) return;' + str.substring(index);
+        return str;
+    },
+
     patchXcloudTitleInfo(str: string) {
         const text = 'async cloudConnect';
         let index = str.indexOf(text);
@@ -775,6 +787,34 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
         str = str.substring(0, commaIndex) + ',true' + str.substring(index);
         return str;
     },
+
+    // 24225.js#4127, 24.17.11
+    patchSetCurrentlyFocusedInteractable(str: string) {
+        let index = str.indexOf('.setCurrentlyFocusedInteractable=(');
+        if (index === -1) {
+            return false;
+        }
+
+        index = str.indexOf('{', index) + 1;
+        str = str.substring(0, index) + codeSetCurrentlyFocusedInteractable + str.substring(index);
+        return str;
+    },
+
+    // product-details-page.js#2388, 24.17.20
+    detectProductDetailsPage(str: string) {
+        let index = str.indexOf('{location:"ProductDetailPage",');
+        if (index === -1) {
+            return false;
+        }
+
+        index = str.indexOf('return', index - 40);
+        if (index === -1) {
+            return false;
+        }
+
+        str = str.substring(0, index) + 'BxEvent.dispatch(window, BxEvent.XCLOUD_RENDERING_COMPONENT, {component: "product-details"});' + str.substring(index);
+        return str;
+    },
 };
 
 let PATCH_ORDERS: PatchArray = [
@@ -790,13 +830,16 @@ let PATCH_ORDERS: PatchArray = [
     'disableStreamGate',
     'overrideSettings',
     'broadcastPollingMode',
+    'patchGamepadPolling',
 
     'exposeStreamSession',
     'exposeDialogRoutes',
 
     'enableTvRoutes',
+    AppInterface && 'detectProductDetailsPage',
 
     'overrideStorageGetSettings',
+    getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && 'patchSetCurrentlyFocusedInteractable',
 
     getPref(PrefKey.UI_LAYOUT) !== 'default' && 'websiteLayout',
     getPref(PrefKey.LOCAL_CO_OP_ENABLED) && 'supportLocalCoOp',
@@ -851,7 +894,7 @@ let PLAYING_PATCH_ORDERS: PatchArray = [
     ...(STATES.userAgent.capabilities.touch ? [
         getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'patchShowSensorControls',
         getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'exposeTouchLayoutManager',
-        (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off' || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) && 'disableTakRenderer',
+        (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off' || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF) || !STATES.userAgent.capabilities.touch) && 'disableTakRenderer',
         getPref(PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
         'patchBabylonRendererClass',
     ] : []),

src/modules/patches/controller-shortcuts.js

@@ -1,3 +1,8 @@
+if (window.BX_EXPOSED.disableGamepadPolling) {
+    this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(50) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, 50);
+    return;
+}
+
 const currentGamepad = ${gamepadVar};
 
 // Share button on XS controller

src/modules/patches/set-currently-focused-interactable.js

@@ -0,0 +1 @@
+e && BxEvent.dispatch(window, BxEvent.NAVIGATION_FOCUS_CHANGED, {element: e});

src/modules/player/webgl2-player.ts

@@ -1,6 +1,7 @@
 import vertClarityBoost from "./shaders/clarity_boost.vert" with { type: "text" };
 import fsClarityBoost from "./shaders/clarity_boost.fs" with { type: "text" };
 import { BxLogger } from "@/utils/bx-logger";
+import { getPref, PrefKey } from "@/utils/preferences";
 
 
 const LOG_TAG = 'WebGL2Player';
@@ -120,11 +121,13 @@ export class WebGL2Player {
     }
 
     #setupShaders() {
+        BxLogger.info(LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
+
         const gl = this.#$canvas.getContext('webgl2', {
             isBx: true,
             antialias: true,
             alpha: false,
-            powerPreference: 'high-performance',
+            powerPreference: getPref(PrefKey.VIDEO_POWER_PREFERENCE),
         }) as WebGL2RenderingContext;
         this.#gl = gl;
 

src/modules/remote-play.ts

@@ -7,6 +7,7 @@ import { getPref, PrefKey, setPref } from "@utils/preferences";
 import { t } from "@utils/translation";
 import { localRedirect } from "@modules/ui/ui";
 import { BxLogger } from "@utils/bx-logger";
+import { HeaderSection } from "./ui/header";
 
 const LOG_TAG = 'RemotePlay';
 
@@ -97,6 +98,10 @@ export class RemotePlay {
         RemotePlay.#getXhomeToken(() => {
             RemotePlay.#getConsolesList(() => {
                 BxLogger.info(LOG_TAG, 'Consoles', RemotePlay.#CONSOLES);
+                if (RemotePlay.#CONSOLES && RemotePlay.#CONSOLES.length > 0) {
+                    STATES.supportedRegion && HeaderSection.showRemotePlayButton();
+                }
+
                 RemotePlay.#renderConsoles();
                 BxEvent.dispatch(window, BxEvent.REMOTE_PLAY_READY);
             });

src/modules/stream-player.ts

@@ -68,7 +68,7 @@ export class StreamPlayer {
         const filters = [];
 
         const sharpness = this.#options.sharpness || 0;
-        if (sharpness != 0) {
+        if (this.#options.processing === StreamVideoProcessing.USM && sharpness != 0) {
             const level = (7 - ((sharpness / 2) - 1) * 0.5).toFixed(1); // 5, 5.5, 6, 6.5, 7
             const matrix = `0 -1 0 -1 ${level} -1 0 -1 0`;
             this.#$usmMatrix?.setAttributeNS(null, 'kernelMatrix', matrix);
@@ -260,9 +260,20 @@ export class StreamPlayer {
         this.#resizePlayer();
     }
 
+    reloadPlayer() {
+        this.#cleanUpWebGL2Player();
+
+        this.#playerType = StreamPlayerType.VIDEO;
+        this.setPlayerType(StreamPlayerType.WEBGL2, false);
+    }
+
+    #cleanUpWebGL2Player() {
+        // Clean up WebGL2 Player
+        this.#webGL2Player?.destroy();
+        this.#webGL2Player = null;
+    }
+
     destroy() {
-         // Cleanup WebGL2 Player
+        this.#cleanUpWebGL2Player();
-         this.#webGL2Player?.destroy();
-         this.#webGL2Player = null;
     }
 }

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

@@ -8,6 +8,7 @@ export function onChangeVideoPlayerType() {
     const playerType = getPref(PrefKey.VIDEO_PLAYER_TYPE);
     const $videoProcessing = document.getElementById('bx_setting_video_processing') as HTMLSelectElement;
     const $videoSharpness = document.getElementById('bx_setting_video_sharpness') as HTMLElement;
+    const $videoPowerPreference = document.getElementById('bx_setting_video_power_preference') as HTMLElement;
 
     let isDisabled = false;
 
@@ -28,6 +29,9 @@ export function onChangeVideoPlayerType() {
     $videoProcessing.disabled = isDisabled;
     $videoSharpness.dataset.disabled = isDisabled.toString();
 
+    // Hide Power Preference setting if renderer isn't WebGL2
+    $videoPowerPreference.closest('.bx-stream-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
+
     updateVideoPlayer();
 }
 

src/modules/stream/stream-settings.ts

@@ -11,9 +11,23 @@ import { SoundShortcut } from "../shortcuts/shortcut-sound";
 import { TouchController } from "../touch-controller";
 import { VibrationManager } from "../vibration-manager";
 import { StreamStats } from "./stream-stats";
-import { BX_FLAGS } from "@/utils/bx-flags";
 import { BxSelectElement } from "@/web-components/bx-select";
 import { onChangeVideoPlayerType, updateVideoPlayer } from "./stream-settings-utils";
+import { GamepadKey } from "@/enums/mkb";
+import { EmulatedMkbHandler } from "../mkb/mkb-handler";
+
+enum NavigationDirection {
+    UP = 1,
+    RIGHT,
+    DOWN,
+    LEFT,
+}
+
+enum FocusContainer {
+    OUTSIDE,
+    TABS,
+    SETTINGS,
+}
 
 export class StreamSettings {
     private static instance: StreamSettings;
@@ -26,7 +40,38 @@ export class StreamSettings {
         return StreamSettings.instance;
     }
 
+    static readonly MAIN_CLASS = 'bx-stream-settings-dialog';
+
+    private static readonly GAMEPAD_POLLING_INTERVAL = 50;
+    private static readonly GAMEPAD_KEYS = [
+        GamepadKey.UP,
+        GamepadKey.DOWN,
+        GamepadKey.LEFT,
+        GamepadKey.RIGHT,
+        GamepadKey.A,
+        GamepadKey.B,
+        GamepadKey.LB,
+        GamepadKey.RB,
+    ];
+
+    private static readonly GAMEPAD_DIRECTION_MAP = {
+        [GamepadKey.UP]: NavigationDirection.UP,
+        [GamepadKey.DOWN]: NavigationDirection.DOWN,
+        [GamepadKey.LEFT]: NavigationDirection.LEFT,
+        [GamepadKey.RIGHT]: NavigationDirection.RIGHT,
+
+        [GamepadKey.LS_UP]: NavigationDirection.UP,
+        [GamepadKey.LS_DOWN]: NavigationDirection.DOWN,
+        [GamepadKey.LS_LEFT]: NavigationDirection.LEFT,
+        [GamepadKey.LS_RIGHT]: NavigationDirection.RIGHT,
+    };
+
+    private gamepadPollingIntervalId: number | null = null;
+    private gamepadLastButtons: Array<GamepadKey | null> = [];
+
     private $container: HTMLElement | undefined;
+    private $tabs: HTMLElement | undefined;
+    private $settings: HTMLElement | undefined;
     private $overlay: HTMLElement | undefined;
 
     readonly SETTINGS_UI = [{
@@ -67,6 +112,17 @@ export class StreamSettings {
             }, {
                 pref: PrefKey.VIDEO_PROCESSING,
                 onChange: updateVideoPlayer,
+            }, {
+                pref: PrefKey.VIDEO_POWER_PREFERENCE,
+                onChange: () => {
+                    const streamPlayer = STATES.currentStream.streamPlayer;
+                    if (!streamPlayer) {
+                        return;
+                    }
+
+                    streamPlayer.reloadPlayer();
+                    updateVideoPlayer();
+                },
             }, {
                 pref: PrefKey.VIDEO_SHARPNESS,
                 onChange: updateVideoPlayer,
@@ -245,44 +301,369 @@ export class StreamSettings {
         window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, e => this.hide());
     }
 
+    isShowing() {
+        return this.$container && !this.$container.classList.contains('bx-gone');
+    }
+
     show(tabId?: string) {
         const $container = this.$container!;
         // Select tab
         if (tabId) {
-            const $tab = $container.querySelector(`.bx-stream-settings-tabs svg[data-group=${tabId}]`);
+            const $tab = $container.querySelector(`.bx-stream-settings-tabs svg[data-tab-group=${tabId}]`);
             $tab && $tab.dispatchEvent(new Event('click'));
         }
 
+        // Show overlay
         this.$overlay!.classList.remove('bx-gone');
         this.$overlay!.dataset.isPlaying = STATES.isPlaying.toString();
 
+        // Show dialog
         $container.classList.remove('bx-gone');
+        // Lock scroll bar
         document.body.classList.add('bx-no-scroll');
 
+        // Focus the first visible setting
+        this.#focusDirection(NavigationDirection.DOWN);
+
+        // Add event listeners
+        $container.addEventListener('keydown', this);
+
+        // Start gamepad polling
+        this.#startGamepadPolling();
+
+        // Disable xCloud's navigation polling
+        (window as any).BX_EXPOSED.disableGamepadPolling = true;
+
         BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_SHOWN);
+
+        // Update video's settings
+        onChangeVideoPlayerType();
     }
 
     hide() {
+        // Hide overlay
         this.$overlay!.classList.add('bx-gone');
+        // Hide dialog
         this.$container!.classList.add('bx-gone');
-
+        // Show scroll bar
         document.body.classList.remove('bx-no-scroll');
 
+        // Remove event listeners
+        this.$container!.removeEventListener('keydown', this);
+
+        // Stop gamepad polling();
+        this.#stopGamepadPolling();
+
+        // Enable xCloud's navigation polling
+        (window as any).BX_EXPOSED.disableGamepadPolling = false;
+
         BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_DISMISSED);
     }
 
+    #focusCurrentTab() {
+        const $currentTab = this.$tabs!.querySelector('.bx-active') as HTMLElement;
+        $currentTab && $currentTab.focus();
+    }
+
+    #pollGamepad() {
+        const gamepads = window.navigator.getGamepads();
+
+        let direction: NavigationDirection | null = null;
+        for (const gamepad of gamepads) {
+            if (!gamepad || !gamepad.connected) {
+                continue;
+            }
+
+            // Ignore virtual controller
+            if (gamepad.id === EmulatedMkbHandler.VIRTUAL_GAMEPAD_ID) {
+                continue;
+            }
+
+            const axes = gamepad.axes;
+            const buttons = gamepad.buttons;
+
+            let lastButton = this.gamepadLastButtons[gamepad.index];
+            let pressedButton: GamepadKey | null = null;
+            let holdingButton: GamepadKey | null = null;
+
+            for (const key of StreamSettings.GAMEPAD_KEYS) {
+                if (typeof lastButton === 'number') {
+                    // Key released
+                    if (lastButton === key && !buttons[key].pressed) {
+                        pressedButton = key;
+                        break;
+                    }
+                } else if (buttons[key].pressed) {
+                    // Key pressed
+                    holdingButton = key;
+                    break;
+                }
+            }
+
+            if (holdingButton === null && pressedButton === null && axes && axes.length >= 2) {
+                // Check sticks
+                // LEFT left-right, LEFT up-down
+
+                if (typeof lastButton === 'number') {
+                    const releasedHorizontal = Math.abs(axes[0]) < 0.1 && (lastButton === GamepadKey.LS_LEFT || lastButton === GamepadKey.LS_RIGHT);
+                    const releasedVertical = Math.abs(axes[1]) < 0.1 && (lastButton === GamepadKey.LS_UP || lastButton === GamepadKey.LS_DOWN);
+
+                    if (releasedHorizontal || releasedVertical) {
+                        pressedButton = lastButton;
+                    }
+                } else {
+                    if (axes[0] < -0.5) {
+                        holdingButton = GamepadKey.LS_LEFT;
+                    } else if (axes[0] > 0.5) {
+                        holdingButton = GamepadKey.LS_RIGHT;
+                    } else if (axes[1] < -0.5) {
+                        holdingButton = GamepadKey.LS_UP;
+                    } else if (axes[1] > 0.5) {
+                        holdingButton = GamepadKey.LS_DOWN;
+                    }
+                }
+            }
+
+            if (holdingButton !== null) {
+                this.gamepadLastButtons[gamepad.index] = holdingButton;
+            }
+
+            if (pressedButton === null) {
+                continue;
+            }
+
+            this.gamepadLastButtons[gamepad.index] = null;
+
+            if (pressedButton === GamepadKey.A) {
+                document.activeElement && document.activeElement.dispatchEvent(new MouseEvent('click'));
+                return;
+            } else if (pressedButton === GamepadKey.B) {
+                this.hide();
+                return;
+            } else if (pressedButton === GamepadKey.LB || pressedButton === GamepadKey.RB) {
+                // Focus setting tabs
+                this.#focusCurrentTab();
+                return;
+            }
+
+            direction = StreamSettings.GAMEPAD_DIRECTION_MAP[pressedButton as keyof typeof StreamSettings.GAMEPAD_DIRECTION_MAP];
+            if (direction) {
+                let handled = false;
+                if (document.activeElement instanceof HTMLInputElement && document.activeElement.type === 'range') {
+                    const $range = document.activeElement;
+                    if (direction === NavigationDirection.LEFT || direction === NavigationDirection.RIGHT) {
+                        $range.value = (parseInt($range.value) + parseInt($range.step) * (direction === NavigationDirection.LEFT ? -1 : 1)).toString();
+                        $range.dispatchEvent(new InputEvent('input'));
+                        handled = true;
+                    }
+                }
+
+                if (!handled) {
+                    this.#focusDirection(direction);
+                }
+            }
+
+            return;
+        }
+    }
+
+    #startGamepadPolling() {
+        this.#stopGamepadPolling();
+
+        this.gamepadPollingIntervalId = window.setInterval(this.#pollGamepad.bind(this), StreamSettings.GAMEPAD_POLLING_INTERVAL);
+    }
+
+    #stopGamepadPolling() {
+        this.gamepadLastButtons = [];
+
+        this.gamepadPollingIntervalId && window.clearInterval(this.gamepadPollingIntervalId);
+        this.gamepadPollingIntervalId = null;
+    }
+
+    #handleTabsNavigation($focusing: HTMLElement, direction: NavigationDirection) {
+        if (direction === NavigationDirection.UP || direction === NavigationDirection.DOWN) {
+            let $sibling = $focusing;
+            const siblingProperty = direction === NavigationDirection.UP ? 'previousElementSibling' : 'nextElementSibling';
+
+            while ($sibling[siblingProperty]) {
+                $sibling = $sibling[siblingProperty] as HTMLElement;
+                $sibling && $sibling.focus();
+                return;
+            }
+
+            // If it's the first/last item -> loop around
+            const pseudo = direction === NavigationDirection.UP ? 'last-of-type' : 'first-of-type';
+            const $target = this.$tabs!.querySelector(`svg:not(.bx-gone):${pseudo}`);
+            $target && ($target as HTMLElement).focus();
+        } else if (direction === NavigationDirection.RIGHT) {
+            this.#focusFirstVisibleSetting();
+        }
+    }
+
+    #handleSettingsNavigation($focusing: HTMLElement, direction: NavigationDirection) {
+        // If current element's tabIndex property is not 0
+        if ($focusing.tabIndex !== 0) {
+            // Find first visible setting
+            const $childSetting = $focusing.querySelector('div[data-tab-group]:not(.bx-gone) [tabindex="0"]:not(a)') as HTMLElement;
+            if ($childSetting) {
+                $childSetting.focus();
+                return;
+            }
+        }
+
+        // Current element is setting -> Find the next one
+        // Find parent
+        let $parent = $focusing.closest('[data-focus-container]');
+
+        if (!$parent) {
+            return;
+        }
+
+        // Find sibling setting
+        let $sibling = $parent;
+        if (direction === NavigationDirection.UP || direction === NavigationDirection.DOWN) {
+            const siblingProperty = direction === NavigationDirection.UP ? 'previousElementSibling' : 'nextElementSibling';
+
+            while ($sibling[siblingProperty]) {
+                $sibling = $sibling[siblingProperty];
+                const $childSetting = $sibling.querySelector('[tabindex="0"]:last-of-type') as HTMLElement;
+                if ($childSetting) {
+                    $childSetting.focus();
+
+                    // Only stop when it was focused successfully
+                    if (document.activeElement === $childSetting) {
+                        return;
+                    }
+                }
+            }
+
+            // If it's the first/last item -> loop around
+            // TODO: bugged if pseudo is "first-of-type" and the first setting is disabled
+            const pseudo = direction === NavigationDirection.UP ? ':last-of-type' : '';
+            const $target = this.$settings!.querySelector(`div[data-tab-group]:not(.bx-gone) div[data-focus-container]:not(.bx-gone)${pseudo} [tabindex="0"]:not(:disabled):last-of-type`);
+            $target && ($target as HTMLElement).focus();
+        } else if (direction === NavigationDirection.LEFT || direction === NavigationDirection.RIGHT) {
+            // Find all child elements with tabindex
+            const children = Array.from($parent.querySelectorAll('[tabindex="0"]'));
+            const index = children.indexOf($focusing);
+            let nextIndex;
+            if (direction === NavigationDirection.LEFT) {
+                nextIndex = index - 1;
+            } else {
+                nextIndex = index + 1;
+            }
+
+            nextIndex = Math.max(-1, Math.min(nextIndex, children.length - 1));
+            if (nextIndex === -1) {
+                // Focus setting tabs
+                const $tab = this.$tabs!.querySelector('svg.bx-active') as HTMLElement;
+                $tab && $tab.focus();
+            } else if (nextIndex !== index) {
+                (children[nextIndex] as HTMLElement).focus();
+            }
+        }
+    }
+
+    #focusFirstVisibleSetting() {
+        // Focus the first visible tab content
+        const $tab = this.$settings!.querySelector('div[data-tab-group]:not(.bx-gone)') as HTMLElement;
+
+        if ($tab) {
+            // Focus on the first focusable setting
+            const $control = $tab.querySelector('[tabindex="0"]:not(a)') as HTMLElement;
+            if ($control) {
+                $control.focus();
+            } else {
+                // Focus tab
+                $tab.focus();
+            }
+        }
+    }
+
+    #focusDirection(direction: NavigationDirection) {
+        const $tabs = this.$tabs!;
+        const $settings = this.$settings!;
+
+        // Get current focused element
+        let $focusing = document.activeElement as HTMLElement;
+
+        let focusContainer = FocusContainer.OUTSIDE;
+        if ($focusing) {
+            if ($settings.contains($focusing)) {
+                focusContainer = FocusContainer.SETTINGS;
+            } else if ($tabs.contains($focusing)) {
+                focusContainer = FocusContainer.TABS;
+            }
+        }
+
+        // If not focusing any element or the focused element is not inside the dialog
+        if (focusContainer === FocusContainer.OUTSIDE) {
+            this.#focusFirstVisibleSetting();
+            return;
+        } else if (focusContainer === FocusContainer.SETTINGS) {
+            this.#handleSettingsNavigation($focusing, direction);
+        } else if (focusContainer === FocusContainer.TABS) {
+            this.#handleTabsNavigation($focusing, direction);
+        }
+    }
+
+    handleEvent(event: Event) {
+        switch (event.type) {
+            case 'keydown':
+                const $target = event.target as HTMLElement;
+                const keyboardEvent = event as KeyboardEvent;
+                const keyCode = keyboardEvent.code || keyboardEvent.key;
+
+                let handled = false;
+
+                if (keyCode === 'ArrowUp' || keyCode === 'ArrowDown') {
+                    handled = true;
+                    this.#focusDirection(keyCode === 'ArrowUp' ? NavigationDirection.UP : NavigationDirection.DOWN);
+                } else if (keyCode === 'ArrowLeft' || keyCode === 'ArrowRight') {
+                    if (($target as any).type !== 'range') {
+                        handled = true;
+                        this.#focusDirection(keyCode === 'ArrowLeft' ? NavigationDirection.LEFT : NavigationDirection.RIGHT);
+                    }
+                } else if (keyCode === 'Enter' || keyCode === 'Space') {
+                    if ($target instanceof SVGElement) {
+                        handled = true;
+                        $target.dispatchEvent(new Event('click'));
+                    }
+                } else if (keyCode === 'Tab') {
+                    handled = true;
+                    this.#focusCurrentTab();
+                } else if (keyCode === 'Escape') {
+                    handled = true;
+                    this.hide();
+                }
+
+                if (handled) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+
+                break;
+        }
+    }
+
     #setupDialog() {
         let $tabs: HTMLElement;
         let $settings: HTMLElement;
 
-        const $overlay = CE('div', {'class': 'bx-stream-settings-overlay bx-gone'});
+        const $overlay = CE('div', {class: 'bx-stream-settings-overlay bx-gone'});
         this.$overlay = $overlay;
 
-        const $container = CE('div', {'class': 'bx-stream-settings-dialog bx-gone'},
+        const $container = CE('div', {class: StreamSettings.MAIN_CLASS + ' bx-gone'},
-                $tabs = CE('div', {'class': 'bx-stream-settings-tabs'}),
+                $tabs = CE('div', {class: 'bx-stream-settings-tabs'}),
-                $settings = CE('div', {'class': 'bx-stream-settings-tab-contents'}),
+                $settings = CE('div', {
+                    class: 'bx-stream-settings-tab-contents',
+                    tabindex: 10,
+                }),
             );
+
         this.$container = $container;
+        this.$tabs = $tabs;
+        this.$settings = $settings;
 
         // Close dialog when clicking on the overlay
         $overlay.addEventListener('click', e => {
@@ -291,16 +672,27 @@ export class StreamSettings {
             this.hide();
         });
 
+        // Close dialog when not clicking on any child elements in the dialog
+        $container.addEventListener('click', e => {
+            if (e.target === $container) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.hide();
+            }
+        });
+
         for (const settingTab of this.SETTINGS_UI) {
             if (!settingTab) {
                 continue;
             }
 
             const $svg = createSvgIcon(settingTab.icon);
+            $svg.tabIndex = 0;
+
             $svg.addEventListener('click', e => {
                 // Switch tab
                 for (const $child of Array.from($settings.children)) {
-                    if ($child.getAttribute('data-group') === settingTab.group) {
+                    if ($child.getAttribute('data-tab-group') === settingTab.group) {
                         $child.classList.remove('bx-gone');
                     } else {
                         $child.classList.add('bx-gone');
@@ -317,20 +709,21 @@ export class StreamSettings {
 
             $tabs.appendChild($svg);
 
-            const $group = CE('div', {'data-group': settingTab.group, 'class': 'bx-gone'});
+            const $group = CE('div', {'data-tab-group': settingTab.group, 'class': 'bx-gone'});
 
             for (const settingGroup of settingTab.items) {
                 if (!settingGroup) {
                     continue;
                 }
 
-                $group.appendChild(CE('h2', {},
+                $group.appendChild(CE('h2', {'data-focus-container': 'true'},
                         CE('span', {}, settingGroup.label),
                         settingGroup.help_url && createButton({
                                 icon: BxIcon.QUESTION,
-                                style: ButtonStyle.GHOST,
+                                style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
                                 url: settingGroup.help_url,
                                 title: t('help'),
+                                tabIndex: 0,
                             }),
                     ));
                 if (settingGroup.note) {
@@ -362,7 +755,8 @@ export class StreamSettings {
                     } else if (!setting.unsupported) {
                         $control = toPrefElement(pref, setting.onChange, setting.params);
 
-                        if ($control instanceof HTMLSelectElement && BX_FLAGS.ScriptUi === 'tv') {
+                        // Replace <select> with controller-friendly one
+                        if ($control instanceof HTMLSelectElement && getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
                             $control = BxSelectElement.wrap($control);
                         }
                     }
@@ -370,7 +764,11 @@ export class StreamSettings {
                     const label = Preferences.SETTINGS[pref as PrefKey]?.label || setting.label;
                     const note = Preferences.SETTINGS[pref as PrefKey]?.note || setting.note;
 
-                    const $content = CE('div', {'class': 'bx-stream-settings-row', 'data-type': settingGroup.group},
+                    const $content = CE('div', {
+                        class: 'bx-stream-settings-row',
+                        'data-type': settingGroup.group,
+                        'data-focus-container': 'true',
+                    },
                         CE('label', {for: `bx_setting_${pref}`},
                             label,
                             note && CE('div', {'class': 'bx-stream-settings-dialog-note'}, note),

src/modules/ui/game-tile.ts

@@ -0,0 +1,87 @@
+import { BxEvent } from "@/utils/bx-event";
+import { BxIcon } from "@/utils/bx-icon";
+import { CE, createSvgIcon, getReactProps } from "@/utils/html";
+import { XcloudApi } from "@/utils/xcloud-api";
+
+export class GameTile {
+    static #timeout: number | null;
+
+    static #secondsToHms(seconds: number) {
+        let h = Math.floor(seconds / 3600);
+        seconds %= 3600;
+        let m = Math.floor(seconds / 60);
+        let s = seconds % 60;
+
+        const output = [];
+        h > 0 && output.push(`${h}h`);
+        m > 0 && output.push(`${m}m`);
+        if (s > 0 || output.length === 0) {
+            output.push(`${s}s`);
+        }
+
+        return output.join(' ');
+    }
+
+    static async #showWaitTime($elm: HTMLElement, productId: string) {
+        let totalWaitTime;
+
+        const api = XcloudApi.getInstance();
+        const info = await api.getTitleInfo(productId);
+        if (info) {
+            const waitTime = await api.getWaitTime(info.titleId);
+            if (waitTime) {
+                totalWaitTime = waitTime.estimatedAllocationTimeInSeconds;
+            }
+        }
+
+        if (typeof totalWaitTime === 'number' && $elm.isConnected) {
+            const $div = CE('div', {'class': 'bx-game-tile-wait-time'},
+                createSvgIcon(BxIcon.PLAYTIME),
+                CE('span', {}, GameTile.#secondsToHms(totalWaitTime)),
+            );
+            $elm.insertAdjacentElement('afterbegin', $div);
+        }
+    }
+
+    static requestWaitTime($elm: HTMLElement, productId: string) {
+        GameTile.#timeout && clearTimeout(GameTile.#timeout);
+        GameTile.#timeout = window.setTimeout(async () => {
+            if (!($elm as any).hasWaitTime) {
+                ($elm as any).hasWaitTime = true;
+                GameTile.#showWaitTime($elm, productId);
+            }
+        }, 1000);
+    }
+
+    static setup() {
+        window.addEventListener(BxEvent.NAVIGATION_FOCUS_CHANGED, e => {
+            let productId;
+            const $elm = (e as any).element;
+            try {
+                if (($elm.tagName === 'BUTTON' && $elm.className.includes('MruGameCard')) || (($elm.tagName === 'A' && $elm.className.includes('GameCard')))) {
+                    let props = getReactProps($elm.parentElement);
+
+                    // When context menu is enabled
+                    if (Array.isArray(props.children)) {
+                        productId = props.children[0].props.productId;
+                    } else {
+                        productId = props.children.props.productId;
+                    }
+                } else if ($elm.tagName === 'A' && $elm.className.includes('GameItem'))  {
+                    let props = getReactProps($elm.parentElement);
+                    props = props.children.props;
+                    if (props.location !== 'NonStreamableGameItem') {
+                        if ('productId' in props) {
+                            productId = props.productId;
+                        } else {
+                            // Search page
+                            productId = props.children.props.productId;
+                        }
+                    }
+                }
+            } catch (e) {}
+
+            productId && GameTile.requestWaitTime($elm, productId);
+        });
+    }
+}

src/modules/ui/global-settings.ts

@@ -1,4 +1,4 @@
-import { STATES, AppInterface, SCRIPT_VERSION } from "@utils/global";
+import { STATES, AppInterface, SCRIPT_VERSION, deepClone } from "@utils/global";
 import { CE, createButton, ButtonStyle } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 import { getPreferredServerRegion } from "@utils/region";
@@ -7,14 +7,17 @@ import { getPref, Preferences, PrefKey, setPref, toPrefElement } from "@utils/pr
 import { t, Translations } from "@utils/translation";
 import { PatcherCache } from "../patcher";
 import { UserAgentProfile } from "@enums/user-agent";
-import { BX_FLAGS } from "@/utils/bx-flags";
 import { BxSelectElement } from "@/web-components/bx-select";
 import { StreamSettings } from "../stream/stream-settings";
+import { BX_FLAGS } from "@/utils/bx-flags";
+import { Toast } from "@/utils/toast";
 
 const SETTINGS_UI = {
     'Better xCloud': {
         items: [
             PrefKey.BETTER_XCLOUD_LOCALE,
+            PrefKey.SERVER_BYPASS_RESTRICTION,
+            PrefKey.UI_CONTROLLER_FRIENDLY,
             PrefKey.REMOTE_PLAY_ENABLED,
         ],
     },
@@ -89,6 +92,7 @@ const SETTINGS_UI = {
         items: [
             PrefKey.UI_LAYOUT,
             PrefKey.UI_HOME_CONTEXT_MENU_DISABLED,
+            PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME,
             PrefKey.CONTROLLER_SHOW_CONNECTION_STATUS,
             PrefKey.STREAM_SIMPLIFY_MENU,
             PrefKey.SKIP_SPLASH_VIDEO,
@@ -160,7 +164,7 @@ export function setupSettingsUi() {
     }
 
     // "Stream settings" button
-    topButtons.push(createButton({
+    (STATES.supportedRegion && STATES.isSignedIn) && topButtons.push(createButton({
         label: t('stream-settings'),
         icon: BxIcon.STREAM_SETTINGS,
         style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
@@ -173,7 +177,7 @@ export function setupSettingsUi() {
     if (AppInterface) {
         // Show Android app settings button
         topButtons.push(createButton({
-            label: t('android-app-settings'),
+            label: t('app-settings'),
             icon: BxIcon.STREAM_SETTINGS,
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
             onClick: e => {
@@ -201,6 +205,8 @@ export function setupSettingsUi() {
         $wrapper.appendChild($div);
     }
 
+    let localeSwitchingTimeout: number | null;
+
     const onChange = async (e: Event) => {
         // Clear PatcherCache;
         PatcherCache.clear();
@@ -212,12 +218,17 @@ export function setupSettingsUi() {
         $btnHeaderSettings && $btnHeaderSettings.classList.add('bx-danger');
 
         if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) {
-            // Update locale
+            if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
-            Translations.refreshCurrentLocale();
+                localeSwitchingTimeout && window.clearTimeout(localeSwitchingTimeout);
-            await Translations.updateTranslations();
+                localeSwitchingTimeout = window.setTimeout(() => {
+                    Translations.refreshCurrentLocale();
+                    Translations.updateTranslations();
+                }, 1000);
+            } else {
+                // Update locale
+                Translations.refreshCurrentLocale();
+                await Translations.updateTranslations();
 
-            // Don't refresh the page on TV
-            if (BX_FLAGS.ScriptUi !== 'tv') {
                 $btnReload.textContent = t('settings-reloading');
                 $btnReload.click();
             }
@@ -226,6 +237,11 @@ export function setupSettingsUi() {
 
     // Render settings
     for (let groupLabel in SETTINGS_UI) {
+        // Don't render other settings when not signed in
+        if (groupLabel !== 'Better xCloud' && (!STATES.supportedRegion || !STATES.isSignedIn)) {
+            continue;
+        }
+
         const $group = CE('span', {'class': 'bx-settings-group-label'}, groupLabel);
 
         // Render note
@@ -260,9 +276,9 @@ export function setupSettingsUi() {
             if (setting.experimental) {
                 settingLabel = '🧪 ' + settingLabel;
                 if (!settingNote) {
-                    settingNote = t('experimental')
+                    settingNote = t('experimental');
                 } else {
-                    settingNote = `${t('experimental')}: ${settingNote}`
+                    settingNote = `${t('experimental')}: ${settingNote}`;
                 }
             }
 
@@ -343,6 +359,8 @@ export function setupSettingsUi() {
                     $control.appendChild($option);
                 }
 
+                $control.disabled = Object.keys(STATES.serverRegions).length === 0;
+
                 // Select preferred region
                 $control.value = selectedValue;
             } else {
@@ -372,22 +390,26 @@ export function setupSettingsUi() {
                 $control.setAttribute('tabindex', -1);
             }
 
-            const $label = CE('label', labelAttrs, settingLabel);
+            const $label = CE<HTMLLabelElement>('label', labelAttrs, settingLabel);
             if (settingNote) {
                 $label.appendChild(CE('b', {}, settingNote));
             }
 
             let $elm: HTMLElement;
 
-            if ($control instanceof HTMLSelectElement && BX_FLAGS.ScriptUi === 'tv') {
+            if ($control instanceof HTMLSelectElement && getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
-                $elm = CE('div', {'class': 'bx-settings-row'},
+                // Controller-friendly <select>
+                $elm = CE('div', {'class': 'bx-settings-row', 'data-group': 0},
                     $label,
-                    BxSelectElement.wrap($control),
+                    CE('div', {class: 'bx-setting-control'}, BxSelectElement.wrap($control)),
                 );
             } else {
-                $elm = CE('div', {'class': 'bx-settings-row'},
+                $elm = CE('div', {'class': 'bx-settings-row', 'data-group': 0},
                     $label,
-                    $control,
+                    $control instanceof HTMLInputElement ? CE('label', {
+                        class: 'bx-setting-control',
+                        for: $label.getAttribute('for'),
+                    }, $control) : CE('div', {class: 'bx-setting-control'}, $control),
                 );
             }
 
@@ -428,6 +450,55 @@ export function setupSettingsUi() {
         }, `❤️ ${t('support-better-xcloud')}`);
     $wrapper.appendChild($donationLink);
 
+    // Show Game Pass app version
+    try {
+        const appVersion = (document.querySelector('meta[name=gamepass-app-version]') as HTMLMetaElement).content;
+        const appDate = new Date((document.querySelector('meta[name=gamepass-app-date]') as HTMLMetaElement).content).toISOString().substring(0, 10);
+        $wrapper.appendChild(CE('div', {'class': 'bx-settings-app-version'}, `xCloud website version ${appVersion} (${appDate})`));
+    } catch (e) {}
+
+    // Show Debug info
+    const debugInfo = deepClone(BX_FLAGS.DeviceInfo);
+    const debugSettings = [
+        PrefKey.STREAM_TARGET_RESOLUTION,
+        PrefKey.STREAM_CODEC_PROFILE,
+
+        PrefKey.VIDEO_PLAYER_TYPE,
+        PrefKey.VIDEO_PROCESSING,
+        PrefKey.VIDEO_POWER_PREFERENCE,
+        PrefKey.VIDEO_SHARPNESS,
+    ];
+
+    debugInfo['settings'] = {};
+    for (const key of debugSettings) {
+        debugInfo['settings'][key] = getPref(key);
+    }
+
+    const $debugInfo = CE('div', {class: 'bx-debug-info'},
+        createButton({
+            label: 'Debug info',
+            style: ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                console.log(e);
+                (e.target as HTMLElement).closest('button')?.nextElementSibling?.classList.toggle('bx-gone');
+            },
+        }),
+        CE('pre', {
+            class: 'bx-gone',
+            on: {
+                click: async (e: Event) => {
+                    try {
+                        await navigator.clipboard.writeText((e.target as HTMLElement).innerText);
+                        Toast.show('Copied to clipboard', '', {instant: true});
+                    } catch (err) {
+                        console.error('Failed to copy: ', err);
+                    }
+                },
+            },
+        }, '```\n' + JSON.stringify(debugInfo, null, '  ') + '\n```'),
+    );
+    $wrapper.appendChild($debugInfo);
+
     $container.appendChild($wrapper);
 
     // Add Settings UI to the web page

src/modules/ui/guide-menu.ts

@@ -25,7 +25,7 @@ export class GuideMenu {
         }),
 
         appSettings: createButton({
-            label: t('android-app-settings'),
+            label: t('app-settings'),
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
             onClick: e => {
                 // Close all xCloud's dialogs
@@ -43,11 +43,18 @@ export class GuideMenu {
             },
         }),
 
-        reloadStream: createButton({
+        reloadPage: createButton({
-            label: t('reload-stream'),
+            label: t('reload-page'),
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
             onClick: e => {
-                confirm(t('confirm-reload-stream')) && window.location.reload();
+                if (STATES.isPlaying) {
+                    confirm(t('confirm-reload-stream')) && window.location.reload();
+                } else {
+                    window.location.reload();
+                }
+
+                // Close all xCloud's dialogs
+                window.BX_EXPOSED.dialogRoutes.closeAll();
             },
         }),
 
@@ -82,11 +89,14 @@ export class GuideMenu {
         // "Stream settings" button
         buttons.push(GuideMenu.#BUTTONS.streamSetting);
 
-        // "App settings" & "Close app" buttons
+        // "App settings" button
-        if (AppInterface) {
+        AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
-            buttons.push(GuideMenu.#BUTTONS.appSettings);
+
-            buttons.push(GuideMenu.#BUTTONS.closeApp);
+        // "Reload page" button
-        }
+        buttons.push(GuideMenu.#BUTTONS.reloadPage);
+
+        // "Close app" buttons
+        AppInterface && buttons.push(GuideMenu.#BUTTONS.closeApp);
 
         const $buttons = GuideMenu.#renderButtons(buttons);
 
@@ -105,8 +115,8 @@ export class GuideMenu {
         buttons.push(GuideMenu.#BUTTONS.streamSetting);
         AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
 
-        // Reload stream
+        // Reload page
-        buttons.push(GuideMenu.#BUTTONS.reloadStream);
+        buttons.push(GuideMenu.#BUTTONS.reloadPage);
 
         // Back to home
         buttons.push(GuideMenu.#BUTTONS.backToHome);

src/modules/ui/header.ts

@@ -1,5 +1,5 @@
 import { SCRIPT_VERSION } from "@utils/global";
-import { createButton, ButtonStyle } from "@utils/html";
+import { createButton, ButtonStyle, CE } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 import { getPreferredServerRegion } from "@utils/region";
 import { PrefKey, getPref } from "@utils/preferences";
@@ -7,35 +7,20 @@ import { RemotePlay } from "@modules/remote-play";
 import { t } from "@utils/translation";
 import { setupSettingsUi } from "./global-settings";
 
+export class HeaderSection {
+    static #$remotePlayBtn = createButton({
+        classes: ['bx-header-remote-play-button', 'bx-gone'],
+        icon: BxIcon.REMOTE_PLAY,
+        title: t('remote-play'),
+        style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
+        onClick: e => {
+            RemotePlay.togglePopup();
+        },
+    });
 
-function injectSettingsButton($parent?: HTMLElement) {
+    static #$settingsBtn = createButton({
-    if (!$parent) {
-        return;
-    }
-
-    const PREF_PREFERRED_REGION = getPreferredServerRegion(true);
-    const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
-
-    const $headerFragment = document.createDocumentFragment();
-
-    // Remote Play button
-    if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
-        const $remotePlayBtn = createButton({
-            classes: ['bx-header-remote-play-button'],
-            icon: BxIcon.REMOTE_PLAY,
-            title: t('remote-play'),
-            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
-            onClick: e => {
-                RemotePlay.togglePopup();
-            },
-        });
-        $headerFragment.appendChild($remotePlayBtn);
-    }
-
-    // Setup Settings button
-    const $settingsBtn = createButton({
         classes: ['bx-header-settings-button'],
-        label: PREF_PREFERRED_REGION,
+        label: '???',
         style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
         onClick: e => {
             setupSettingsUi();
@@ -47,39 +32,58 @@ function injectSettingsButton($parent?: HTMLElement) {
         },
     });
 
-    // Show new update status
+    static #$buttonsWrapper = CE('div', {},
-    if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) {
+        getPref(PrefKey.REMOTE_PLAY_ENABLED) ? HeaderSection.#$remotePlayBtn : null,
-        $settingsBtn.setAttribute('data-update-available', 'true');
+        HeaderSection.#$settingsBtn,
+    );
+
+    static #observer: MutationObserver;
+    static #timeout: number | null;
+
+    static #injectSettingsButton($parent?: HTMLElement) {
+        if (!$parent) {
+            return;
+        }
+
+        const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
+
+        // Setup Settings button
+        const $settingsBtn = HeaderSection.#$settingsBtn;
+        $settingsBtn.querySelector('span')!.textContent = getPreferredServerRegion(true);
+
+        // Show new update status
+        if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) {
+            $settingsBtn.setAttribute('data-update-available', 'true');
+        }
+
+        // Add the Settings button to the web page
+        $parent.appendChild(HeaderSection.#$buttonsWrapper);
     }
 
-    // Add the Settings button to the web page
+    static checkHeader() {
-    $headerFragment.appendChild($settingsBtn);
+        if (!HeaderSection.#$buttonsWrapper.isConnected) {
-    $parent.appendChild($headerFragment);
+            const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
-}
+            HeaderSection.#injectSettingsButton($rightHeader as HTMLElement);
-
+        }
-
-export function checkHeader() {
-    const $button = document.querySelector('.bx-header-settings-button');
-
-    if (!$button) {
-        const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
-        injectSettingsButton($rightHeader as HTMLElement);
-    }
-}
-
-
-export function watchHeader() {
-    const $header = document.querySelector('#PageContent header');
-    if (!$header) {
-        return;
     }
 
-    let timeout: number | null;
+    static showRemotePlayButton() {
-    const observer = new MutationObserver(mutationList => {
+        HeaderSection.#$remotePlayBtn.classList.remove('bx-gone');
-        timeout && clearTimeout(timeout);
+    }
-        timeout = window.setTimeout(checkHeader, 2000);
-    });
-    observer.observe($header, {subtree: true, childList: true});
 
-    checkHeader();
+    static watchHeader() {
+        const $header = document.querySelector('#PageContent header');
+        if (!$header) {
+            return;
+        }
+
+        HeaderSection.#observer && HeaderSection.#observer.disconnect();
+        HeaderSection.#observer = new MutationObserver(mutationList => {
+            HeaderSection.#timeout && clearTimeout(HeaderSection.#timeout);
+            HeaderSection.#timeout = window.setTimeout(HeaderSection.checkHeader, 2000);
+        });
+        HeaderSection.#observer.observe($header, {subtree: true, childList: true});
+
+        HeaderSection.checkHeader();
+    }
 }

src/modules/ui/product-details.ts

@@ -0,0 +1,35 @@
+import { BX_FLAGS } from "@/utils/bx-flags";
+import { BxIcon } from "@/utils/bx-icon";
+import { AppInterface } from "@/utils/global";
+import { ButtonStyle, createButton } from "@/utils/html";
+import { t } from "@/utils/translation";
+
+export class ProductDetailsPage {
+    private static $btnShortcut = createButton({
+        classes: ['bx-button-shortcut'],
+        icon: BxIcon.CREATE_SHORTCUT,
+        label: t('create-shortcut'),
+        style: ButtonStyle.FOCUSABLE,
+        tabIndex: 0,
+        onClick: e => {
+            AppInterface && AppInterface.createShortcut(window.location.pathname.substring(6));
+        },
+    });
+
+    private static shortcutTimeoutId: number | null = null;
+
+    static injectShortcutButton() {
+        if (!AppInterface || BX_FLAGS.DeviceInfo?.deviceType !== 'android') {
+            return;
+        }
+
+        ProductDetailsPage.shortcutTimeoutId && clearTimeout(ProductDetailsPage.shortcutTimeoutId);
+        ProductDetailsPage.shortcutTimeoutId = window.setTimeout(() => {
+            // Find action buttons container
+            const $container = document.querySelector('div[class*=ActionButtons-module__container]');
+            if ($container) {
+                $container.parentElement?.appendChild(ProductDetailsPage.$btnShortcut);
+            }
+        }, 500);
+    }
+}

src/types/index.d.ts

@@ -24,9 +24,14 @@ interface NavigatorBattery extends Navigator {
 }
 
 type BxStates = {
+    supportedRegion: boolean;
+    serverRegions: any;
+    selectedRegion: any;
+    gsToken: string;
+    isSignedIn: boolean;
+
     isPlaying: boolean;
     appContext: any | null;
-    serverRegions: any;
 
     browser: {
         capabilities: {
@@ -69,6 +74,8 @@ type BxStates = {
 type DualEnum = {[index: string]: number} & {[index: number]: string};
 
 type XcloudTitleInfo = {
+    titleId: string,
+
     details: {
         productId: string;
         supportedInputTypes: InputType[];
@@ -86,6 +93,12 @@ type XcloudTitleInfo = {
     };
 };
 
+type XcloudWaitTimeInfo = Partial<{
+    estimatedAllocationTimeInSeconds: number,
+    estimatedProvisioningTimeInSeconds: number,
+    estimatedTotalWaitTimeInSeconds: number,
+}>;
+
 declare module '*.js';
 declare module '*.svg';
 declare module '*.styl';

src/types/preferences.d.ts

@@ -1,5 +1,6 @@
 export type PreferenceSetting = {
     default: any;
+    optionsGroup?: string;
     options?: {[index: string]: string};
     multipleOptions?: {[index: string]: string};
     unsupported?: string | boolean;

src/utils/bx-event.ts

@@ -26,6 +26,7 @@ export enum BxEvent {
     REMOTE_PLAY_FAILED = 'bx-remote-play-failed',
 
     XCLOUD_SERVERS_READY = 'bx-servers-ready',
+    XCLOUD_SERVERS_UNAVAILABLE = 'bx-servers-unavailable',
 
     DATA_CHANNEL_CREATED = 'bx-data-channel-created',
 
@@ -38,6 +39,8 @@ export enum BxEvent {
     POINTER_LOCK_REQUESTED = 'bx-pointer-lock-requested',
     POINTER_LOCK_EXITED = 'bx-pointer-lock-exited',
 
+    NAVIGATION_FOCUS_CHANGED = 'bx-nav-focus-changed',
+
     // xCloud Dialog events
     XCLOUD_DIALOG_SHOWN = 'bx-xcloud-dialog-shown',
     XCLOUD_DIALOG_DISMISSED = 'bx-xcloud-dialog-dismissed',
@@ -45,6 +48,8 @@ export enum BxEvent {
     XCLOUD_GUIDE_MENU_SHOWN = 'bx-xcloud-guide-menu-shown',
 
     XCLOUD_POLLING_MODE_CHANGED = 'bx-xcloud-polling-mode-changed',
+
+    XCLOUD_RENDERING_COMPONENT = 'bx-xcloud-rendering-page',
 }
 
 export enum XcloudEvent {

src/utils/bx-exposed.ts

@@ -4,6 +4,7 @@ import { deepClone, STATES } from "@utils/global";
 import { getPref, PrefKey } from "@utils/preferences";
 import { BxLogger } from "./bx-logger";
 import { BX_FLAGS } from "./bx-flags";
+import { StreamSettings } from "@/modules/stream/stream-settings";
 
 export enum InputType {
     CONTROLLER = 'Controller',
@@ -115,4 +116,16 @@ export const BxExposed = {
             hasCompletedOnboarding: true,
         },
     },
+
+    disableGamepadPolling: false,
+
+    backButtonPressed: () => {
+        const streamSettings = StreamSettings.getInstance();
+        if (streamSettings.isShowing()) {
+            streamSettings.hide();
+            return true;
+        }
+
+        return false;
+    },
 };

src/utils/bx-flags.ts

@@ -10,9 +10,12 @@ type BxFlags = Partial<{
     ForceNativeMkbTitles: string[];
     FeatureGates: {[key: string]: boolean} | null,
 
-    ScriptUi: 'default' | 'tv',
-
     IsSupportedTvBrowser: boolean,
+
+    DeviceInfo: Partial<{
+        deviceType: 'android' | 'android-tv' | 'webos' | 'unknown',
+        userAgent?: string,
+    }>,
 }>
 
 // Setup flags
@@ -28,7 +31,9 @@ const DEFAULT_FLAGS: BxFlags = {
     ForceNativeMkbTitles: [],
     FeatureGates: null,
 
-    ScriptUi: 'default',
+    DeviceInfo: {
+        deviceType: 'unknown',
+    },
 }
 
 export const BX_FLAGS: BxFlags = Object.assign(DEFAULT_FLAGS, window.BX_FLAGS || {});
@@ -36,4 +41,8 @@ try {
     delete window.BX_FLAGS;
 } catch (e) {}
 
+if (!BX_FLAGS.DeviceInfo!.userAgent) {
+    BX_FLAGS.DeviceInfo!.userAgent = window.navigator.userAgent;
+}
+
 export const NATIVE_FETCH = window.fetch;

src/utils/bx-icon.ts

@@ -1,6 +1,7 @@
 import iconCommand from "@assets/svg/command.svg" with { type: "text" };
 import iconController from "@assets/svg/controller.svg" with { type: "text" };
 import iconCopy from "@assets/svg/copy.svg" with { type: "text" };
+import iconCreateShortcut from "@assets/svg/create-shortcut.svg" with { type: "text" };
 import iconCursorText from "@assets/svg/cursor-text.svg" with { type: "text" };
 import iconDisplay from "@assets/svg/display.svg" with { type: "text" };
 import iconHome from "@assets/svg/home.svg" with { type: "text" };
@@ -11,9 +12,9 @@ import iconRefresh from "@assets/svg/refresh.svg" with { type: "text" };
 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" };
+import iconTouchControlEnable from "@assets/svg/touch-control-enable.svg" with { type: "text" };
+import iconTrash from "@assets/svg/trash.svg" with { type: "text" };
 import iconVirtualController from "@assets/svg/virtual-controller.svg" with { type: "text" };
 
 // Game Bar
@@ -37,6 +38,7 @@ export const BxIcon = {
     STREAM_STATS: iconStreamStats,
     COMMAND: iconCommand,
     CONTROLLER: iconController,
+    CREATE_SHORTCUT: iconCreateShortcut,
     DISPLAY: iconDisplay,
     HOME: iconHome,
     NATIVE_MKB: iconNativeMkb,

src/utils/feature-gates.ts

@@ -3,6 +3,9 @@ import { getPref, PrefKey } from "./preferences";
 
 export let FeatureGates: {[key: string]: boolean} = {
     'PwaPrompt': false,
+    'EnableWifiWarnings': false,
+    'EnableUpdateRequiredPage': false,
+    'ShowForcedUpdateScreen': false,
 };
 
 // Disable context menu in Home page

src/utils/global.ts

@@ -13,9 +13,14 @@ const browserHasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoi
 const userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport;
 
 export const STATES: BxStates = {
+    supportedRegion: true,
+    serverRegions: {},
+    selectedRegion: {},
+    gsToken: '',
+    isSignedIn: false,
+
     isPlaying: false,
     appContext: {},
-    serverRegions: {},
 
     browser: {
         capabilities: {

src/utils/history.ts

@@ -1,7 +1,8 @@
 import { BxEvent } from "@utils/bx-event";
 import { LoadingScreen } from "@modules/loading-screen";
 import { RemotePlay } from "@modules/remote-play";
-import { checkHeader } from "@modules/ui/header";
+import { HeaderSection } from "@/modules/ui/header";
+import { StreamSettings } from "@/modules/stream/stream-settings";
 
 export function patchHistoryMethod(type: 'pushState' | 'replaceState') {
     const orig = window.history[type];
@@ -25,16 +26,22 @@ export function onHistoryChanged(e: PopStateEvent) {
 
     window.setTimeout(RemotePlay.detect, 10);
 
+    // Hide Global settings
     const $settings = document.querySelector('.bx-settings-container');
     if ($settings) {
         $settings.classList.add('bx-gone');
     }
 
+    // Hide Stream settings
+    if (document.querySelector('.' + StreamSettings.MAIN_CLASS)) {
+        StreamSettings.getInstance().hide();
+    }
+
     // Hide Remote Play popup
     RemotePlay.detachPopup();
 
     LoadingScreen.reset();
-    window.setTimeout(checkHeader, 2000);
+    window.setTimeout(HeaderSection.watchHeader, 2000);
 
     BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
 }

src/utils/html.ts

@@ -9,6 +9,7 @@ type BxButton = {
     title?: string;
     disabled?: boolean;
     onClick?: EventListener;
+    tabIndex?: number;
     attributes?: {[key: string]: any},
 }
 
@@ -34,18 +35,23 @@ function createElement<T=HTMLElement>(elmName: string, props: {[index: string]:
         if (hasNs) {
             $elm.setAttributeNS(null, key, props[key]);
         } else {
-            $elm.setAttribute(key, props[key]);
+            if (key === 'on') {
+                for (const eventName in props[key]) {
+                    $elm.addEventListener(eventName, props[key][eventName]);
+                }
+            } else {
+                $elm.setAttribute(key, props[key]);
+            }
         }
     }
 
     for (let i = 2, size = arguments.length; i < size; i++) {
         const arg = arguments[i];
-        const argType = typeof arg;
 
-        if (argType === 'string' || argType === 'number') {
+        if (arg instanceof Node) {
-            $elm.appendChild(document.createTextNode(arg));
-        } else if (arg) {
             $elm.appendChild(arg);
+        } else if (arg !== null && arg !== false && typeof arg !== 'undefined') {
+            $elm.appendChild(document.createTextNode(arg));
         }
     }
 
@@ -94,6 +100,7 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
     options.title && $btn.setAttribute('title', options.title);
     options.disabled && (($btn as HTMLButtonElement).disabled = true);
     options.onClick && $btn.addEventListener('click', options.onClick);
+    typeof options.tabIndex === 'number' && ($btn.tabIndex = options.tabIndex!);
 
     for (const key in options.attributes) {
         if (!$btn.hasOwnProperty(key)) {
@@ -104,6 +111,16 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
     return $btn as T;
 }
 
+export function getReactProps($elm: HTMLElement): any | null {
+    for (const key in $elm) {
+        if (key.startsWith('__reactProps')) {
+            return ($elm as any)[key];
+        }
+    }
+
+    return null;
+}
+
 export function escapeHtml(html: string): string {
     const text = document.createTextNode(html);
     const $span = document.createElement('span');

src/utils/network.ts

@@ -1,16 +1,13 @@
 import { BxEvent } from "@utils/bx-event";
 import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
-import { LoadingScreen } from "@modules/loading-screen";
 import { PrefKey, getPref } from "@utils/preferences";
-import { RemotePlay } from "@modules/remote-play";
-import { StreamBadges } from "@modules/stream/stream-badges";
 import { TouchController } from "@modules/touch-controller";
 import { STATES } from "@utils/global";
-import { getPreferredServerRegion } from "@utils/region";
 import { GamePassCloudGallery } from "../enums/game-pass-gallery";
-import { InputType } from "./bx-exposed";
 import { FeatureGates } from "./feature-gates";
 import { BxLogger } from "./bx-logger";
+import { XhomeInterceptor } from "./xhome-interceptor";
+import { XcloudInterceptor } from "./xcloud-interceptor";
 
 enum RequestType {
     XCLOUD = 'xcloud',
@@ -101,7 +98,7 @@ function updateIceCandidates(candidates: any, options: any) {
 }
 
 
-async function patchIceCandidates(request: Request, consoleAddrs?: {[index: string]: number}) {
+export async function patchIceCandidates(request: Request, consoleAddrs?: {[index: string]: number}) {
     const response = await NATIVE_FETCH(request);
     const text = await response.clone().text();
 
@@ -125,383 +122,6 @@ async function patchIceCandidates(request: Request, consoleAddrs?: {[index: stri
     return response;
 }
 
-
-class XhomeInterceptor {
-    static #consoleAddrs: {[index: string]: number} = {};
-
-    static async #handleLogin(request: Request) {
-        try {
-            const clone = (request as Request).clone();
-
-            const obj = await clone.json();
-            obj.offeringId = 'xhome';
-
-            request = new Request('https://xhome.gssv-play-prod.xboxlive.com/v2/login/user', {
-                method: 'POST',
-                body: JSON.stringify(obj),
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            });
-        } catch (e) {
-            alert(e);
-            console.log(e);
-        }
-
-        return NATIVE_FETCH(request);
-    }
-
-    static async #handleConfiguration(request: Request | URL) {
-        const response = await NATIVE_FETCH(request);
-
-        const obj = await response.clone().json()
-        console.log(obj);
-
-        const serverDetails = obj.serverDetails;
-        if (serverDetails.ipAddress) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipAddress] = serverDetails.port;
-        }
-
-        if (serverDetails.ipV4Address) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipV4Address] = serverDetails.ipV4Port;
-        }
-
-        if (serverDetails.ipV6Address) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipV6Address] = serverDetails.ipV6Port;
-        }
-
-        response.json = () => Promise.resolve(obj);
-        response.text = () => Promise.resolve(JSON.stringify(obj));
-
-        return response;
-    }
-
-    static async #handleInputConfigs(request: Request | URL, opts: {[index: string]: any}) {
-        const response = await NATIVE_FETCH(request);
-
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'all') {
-            return response;
-        }
-
-        const obj = await response.clone().json() as any;
-
-        const xboxTitleId = JSON.parse(opts.body).titleIds[0];
-        STATES.currentStream.xboxTitleId = xboxTitleId;
-
-        const inputConfigs = obj[0];
-
-        let hasTouchSupport = inputConfigs.supportedTabs.length > 0;
-        if (!hasTouchSupport) {
-            const supportedInputTypes = inputConfigs.supportedInputTypes;
-            hasTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH) || supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY);
-        }
-
-        if (hasTouchSupport) {
-            TouchController.disable();
-
-            BxEvent.dispatch(window, BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED, {
-                data: null,
-            });
-        } else {
-            TouchController.enable();
-            TouchController.getCustomLayouts(xboxTitleId);
-        }
-
-        response.json = () => Promise.resolve(obj);
-        response.text = () => Promise.resolve(JSON.stringify(obj));
-
-        return response;
-    }
-
-    static async #handleTitles(request: Request) {
-        const clone = request.clone();
-
-        const headers: {[index: string]: any} = {};
-        for (const pair of (clone.headers as any).entries()) {
-            headers[pair[0]] = pair[1];
-        }
-        headers.authorization = `Bearer ${RemotePlay.XCLOUD_TOKEN}`;
-
-        const index = request.url.indexOf('.xboxlive.com');
-        request = new Request('https://wus.core.gssv-play-prod' + request.url.substring(index), {
-            method: clone.method,
-            body: await clone.text(),
-            headers: headers,
-        });
-
-        return NATIVE_FETCH(request);
-    }
-
-    static async #handlePlay(request: RequestInfo | URL) {
-        const clone = (request as Request).clone();
-        const body = await clone.json();
-
-        // body.settings.useIceConnection = true;
-
-        const newRequest = new Request(request, {
-            body: JSON.stringify(body),
-        });
-
-        return NATIVE_FETCH(newRequest);
-    }
-
-    static async handle(request: Request) {
-        TouchController.disable();
-
-        const clone = request.clone();
-
-        const headers: {[index: string]: string} = {};
-        for (const pair of (clone.headers as any).entries()) {
-            headers[pair[0]] = pair[1];
-        }
-        // Add xHome token to headers
-        headers.authorization = `Bearer ${RemotePlay.XHOME_TOKEN}`;
-
-        // Patch resolution
-        const deviceInfo = RemotePlay.BASE_DEVICE_INFO;
-        if (getPref(PrefKey.REMOTE_PLAY_RESOLUTION) === '720p') {
-            deviceInfo.dev.os.name = 'android';
-        }
-
-        headers['x-ms-device-info'] = JSON.stringify(deviceInfo);
-
-        const opts: {[index: string]: any} = {
-            method: clone.method,
-            headers: headers,
-        };
-
-        if (clone.method === 'POST') {
-            opts.body = await clone.text();
-        }
-
-        let newUrl = request.url;
-        if (!newUrl.includes('/servers/home')) {
-            const index = request.url.indexOf('.xboxlive.com');
-            newUrl = STATES.remotePlay.server + request.url.substring(index + 13);
-        }
-
-        request = new Request(newUrl, opts);
-        let url = (typeof request === 'string') ? request : request.url;
-
-        // Get console IP
-        if (url.includes('/configuration')) {
-            return XhomeInterceptor.#handleConfiguration(request);
-        } else if (url.endsWith('/sessions/home/play')) {
-            return XhomeInterceptor.#handlePlay(request);
-        } else if (url.includes('inputconfigs')) {
-            return XhomeInterceptor.#handleInputConfigs(request, opts);
-        } else if (url.includes('/login/user')) {
-            return XhomeInterceptor.#handleLogin(request);
-        } else if (url.endsWith('/titles')) {
-            return XhomeInterceptor.#handleTitles(request);
-        } else if (url && url.endsWith('/ice') && url.includes('/sessions/') && (request as Request).method === 'GET') {
-            return patchIceCandidates(request, XhomeInterceptor.#consoleAddrs);
-        }
-
-        return await NATIVE_FETCH(request);
-    }
-}
-
-
-class XcloudInterceptor {
-    static async #handleLogin(request: RequestInfo | URL, init?: RequestInit) {
-        const response = await NATIVE_FETCH(request, init);
-        const obj = await response.clone().json();
-
-        // Preload Remote Play
-        getPref(PrefKey.REMOTE_PLAY_ENABLED) && BX_FLAGS.PreloadRemotePlay && RemotePlay.preload();
-
-        // Store xCloud token
-        RemotePlay.XCLOUD_TOKEN = obj.gsToken;
-
-        // Get server list
-        const serverEmojis = {
-            AustraliaEast: '🇦🇺',
-            AustraliaSouthEast: '🇦🇺',
-            BrazilSouth: '🇧🇷',
-            EastUS: '🇺🇸',
-            EastUS2: '🇺🇸',
-            JapanEast: '🇯🇵',
-            KoreaCentral: '🇰🇷',
-            MexicoCentral: '🇲🇽',
-            NorthCentralUs: '🇺🇸',
-            SouthCentralUS: '🇺🇸',
-            UKSouth: '🇬🇧',
-            WestEurope: '🇪🇺',
-            WestUS: '🇺🇸',
-            WestUS2: '🇺🇸',
-        };
-
-        const serverRegex = /\/\/(\w+)\./;
-
-        for (let region of obj.offeringSettings.regions) {
-            const regionName = region.name as keyof typeof serverEmojis;
-            let shortName = region.name;
-
-            let match = serverRegex.exec(region.baseUri);
-            if (match) {
-                shortName = match[1];
-                if (serverEmojis[regionName]) {
-                    shortName = serverEmojis[regionName] + ' ' + shortName;
-                }
-            }
-
-            region.shortName = shortName.toUpperCase();
-            STATES.serverRegions[region.name] = Object.assign({}, region);
-        }
-
-        BxEvent.dispatch(window, BxEvent.XCLOUD_SERVERS_READY);
-
-        const preferredRegion = getPreferredServerRegion();
-        if (preferredRegion in STATES.serverRegions) {
-            const tmp = Object.assign({}, STATES.serverRegions[preferredRegion]);
-            tmp.isDefault = true;
-
-            obj.offeringSettings.regions = [tmp];
-        }
-
-        response.json = () => Promise.resolve(obj);
-        return response;
-    }
-
-    static async #handlePlay(request: RequestInfo | URL, init?: RequestInit) {
-        const PREF_STREAM_TARGET_RESOLUTION = getPref(PrefKey.STREAM_TARGET_RESOLUTION);
-        const PREF_STREAM_PREFERRED_LOCALE = getPref(PrefKey.STREAM_PREFERRED_LOCALE);
-
-        const url = (typeof request === 'string') ? request : (request as Request).url;
-        const parsedUrl = new URL(url);
-
-        let badgeRegion: string = parsedUrl.host.split('.', 1)[0];
-        for (let regionName in STATES.serverRegions) {
-            const region = STATES.serverRegions[regionName];
-            if (parsedUrl.origin == region.baseUri) {
-                badgeRegion = regionName;
-                break;
-            }
-        }
-        StreamBadges.getInstance().setRegion(badgeRegion);
-
-        const clone = (request as Request).clone();
-        const body = await clone.json();
-
-        // Force stream's resolution
-        if (PREF_STREAM_TARGET_RESOLUTION !== 'auto') {
-            const osName = (PREF_STREAM_TARGET_RESOLUTION === '720p') ? 'android' : 'windows';
-            body.settings.osName = osName;
-        }
-
-        // Override "locale" value
-        if (PREF_STREAM_PREFERRED_LOCALE !== 'default') {
-            body.settings.locale = PREF_STREAM_PREFERRED_LOCALE;
-        }
-
-        const newRequest = new Request(request, {
-            body: JSON.stringify(body),
-        });
-
-        return NATIVE_FETCH(newRequest);
-    }
-
-    static async #handleWaitTime(request: RequestInfo | URL, init?: RequestInit) {
-        const response = await NATIVE_FETCH(request, init);
-
-        if (getPref(PrefKey.UI_LOADING_SCREEN_WAIT_TIME)) {
-            const json = await response.clone().json();
-            if (json.estimatedAllocationTimeInSeconds > 0) {
-                // Setup wait time overlay
-                LoadingScreen.setupWaitTime(json.estimatedTotalWaitTimeInSeconds);
-            }
-        }
-
-        return response;
-    }
-
-    static async #handleConfiguration(request: RequestInfo | URL, init?: RequestInit) {
-        if ((request as Request).method !== 'GET') {
-            return NATIVE_FETCH(request, init);
-        }
-
-        // Touch controller for all games
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
-            const titleInfo = STATES.currentStream.titleInfo;
-            if (titleInfo?.details.hasTouchSupport) {
-                TouchController.disable();
-            } else {
-                TouchController.enable();
-            }
-        }
-
-        // Intercept configurations
-        const response = await NATIVE_FETCH(request, init);
-        const text = await response.clone().text();
-        if (!text.length) {
-            return response;
-        }
-
-        const obj = JSON.parse(text);
-        let overrides = JSON.parse(obj.clientStreamingConfigOverrides || '{}') || {};
-
-        overrides.inputConfiguration = overrides.inputConfiguration || {};
-        overrides.inputConfiguration.enableVibration = true;
-
-        let overrideMkb: boolean | null = null;
-
-        if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' || (STATES.currentStream.titleInfo && BX_FLAGS.ForceNativeMkbTitles?.includes(STATES.currentStream.titleInfo.details.productId))) {
-            overrideMkb = true;
-        }
-
-        if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'off') {
-            overrideMkb = false;
-        }
-
-        if (overrideMkb !== null) {
-            overrides.inputConfiguration = Object.assign(overrides.inputConfiguration, {
-                enableMouseInput: overrideMkb,
-                enableKeyboardInput: overrideMkb,
-            });
-        }
-
-        // Enable touch controller
-        if (TouchController.isEnabled()) {
-            overrides.inputConfiguration.enableTouchInput = true;
-            overrides.inputConfiguration.maxTouchPoints = 10;
-        }
-
-        // Enable mic
-        if (getPref(PrefKey.AUDIO_MIC_ON_PLAYING)) {
-            overrides.audioConfiguration = overrides.audioConfiguration || {};
-            overrides.audioConfiguration.enableMicrophone = true;
-        }
-
-        obj.clientStreamingConfigOverrides = JSON.stringify(overrides);
-
-        response.json = () => Promise.resolve(obj);
-        response.text = () => Promise.resolve(JSON.stringify(obj));
-
-        return response;
-    }
-
-    static async handle(request: RequestInfo | URL, init?: RequestInit) {
-        let url = (typeof request === 'string') ? request : (request as Request).url;
-
-        // Server list
-        if (url.endsWith('/v2/login/user')) {
-            return XcloudInterceptor.#handleLogin(request, init);
-        } else if (url.endsWith('/sessions/cloud/play')) {  // Get session
-            return XcloudInterceptor.#handlePlay(request, init);
-        } else if (url.includes('xboxlive.com') && url.includes('/waittime/')) {
-            return XcloudInterceptor.#handleWaitTime(request, init);
-        } else if (url.endsWith('/configuration')) {
-            return XcloudInterceptor.#handleConfiguration(request, init);
-        } else if (url && url.endsWith('/ice') && url.includes('/sessions/') && (request as Request).method === 'GET') {
-            return patchIceCandidates(request as Request);
-        }
-
-        return NATIVE_FETCH(request, init);
-    }
-}
-
-
 export function interceptHttpRequests() {
     let BLOCKED_URLS: string[] = [];
     if (getPref(PrefKey.BLOCK_TRACKING)) {

src/utils/preferences.ts

@@ -1,5 +1,5 @@
 import { CE } from "@utils/html";
-import { SUPPORTED_LANGUAGES, t } from "@utils/translation";
+import { SUPPORTED_LANGUAGES, t} from "@utils/translation";
 import { SettingElement, SettingElementType } from "@utils/settings";
 import { UserAgent } from "@utils/user-agent";
 import { StreamStat } from "@modules/stream/stream-stats";
@@ -8,6 +8,8 @@ import { AppInterface, STATES } from "@utils/global";
 import { StreamPlayerType, StreamVideoProcessing } from "@enums/stream-player";
 import { UserAgentProfile } from "@/enums/user-agent";
 import { UiSection } from "@/enums/ui-sections";
+import { BypassServers } from "@/enums/bypass-servers";
+import { BX_FLAGS } from "./bx-flags";
 
 export enum PrefKey {
     LAST_UPDATE_CHECK = 'version_last_check',
@@ -17,6 +19,8 @@ export enum PrefKey {
     BETTER_XCLOUD_LOCALE = 'bx_locale',
 
     SERVER_REGION = 'server_region',
+    SERVER_BYPASS_RESTRICTION = 'server_bypass_restriction',
+
     PREFER_IPV6_SERVER = 'prefer_ipv6_server',
     STREAM_TARGET_RESOLUTION = 'stream_target_resolution',
     STREAM_PREFERRED_LOCALE = 'stream_preferred_locale',
@@ -69,14 +73,17 @@ export enum PrefKey {
     UI_LOADING_SCREEN_WAIT_TIME = 'ui_loading_screen_wait_time',
     UI_LOADING_SCREEN_ROCKET = 'ui_loading_screen_rocket',
 
+    UI_CONTROLLER_FRIENDLY = 'ui_controller_friendly',
     UI_LAYOUT = 'ui_layout',
     UI_SCROLLBAR_HIDE = 'ui_scrollbar_hide',
     UI_HIDE_SECTIONS = 'ui_hide_sections',
 
     UI_HOME_CONTEXT_MENU_DISABLED = 'ui_home_context_menu_disabled',
+    UI_GAME_CARD_SHOW_WAIT_TIME = 'ui_game_card_show_wait_time',
 
     VIDEO_PLAYER_TYPE = 'video_player_type',
     VIDEO_PROCESSING = 'video_processing',
+    VIDEO_POWER_PREFERENCE = 'video_power_preference',
     VIDEO_SHARPNESS = 'video_sharpness',
     VIDEO_RATIO = 'video_ratio',
     VIDEO_BRIGHTNESS = 'video_brightness',
@@ -122,6 +129,16 @@ export class Preferences {
             label: t('region'),
             default: 'default',
         },
+        [PrefKey.SERVER_BYPASS_RESTRICTION]: {
+            label: t('bypass-region-restriction'),
+            note: '⚠️ ' + t('use-this-at-your-own-risk'),
+            default: 'off',
+            optionsGroup: t('region'),
+            options: Object.assign({
+                'off': t('off'),
+            }, BypassServers),
+        },
+
         [PrefKey.STREAM_PREFERRED_LOCALE]: {
             label: t('preferred-game-language'),
             default: 'default',
@@ -539,6 +556,12 @@ export class Preferences {
                 hide: t('rocket-always-hide'),
             },
         },
+
+        [PrefKey.UI_CONTROLLER_FRIENDLY]: {
+            label: t('controller-friendly-ui'),
+            default: !STATES.browser.capabilities.touch || BX_FLAGS.DeviceInfo?.deviceType === "android-tv",
+        },
+
         [PrefKey.UI_LAYOUT]: {
             label: t('layout'),
             default: 'default',
@@ -573,6 +596,11 @@ export class Preferences {
             },
         },
 
+        [PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME]: {
+            label: t('show-wait-time-in-game-card'),
+            default: false,
+        },
+
         [PrefKey.BLOCK_SOCIAL_FEATURES]: {
             label: t('disable-social-features'),
             default: false,
@@ -584,7 +612,7 @@ export class Preferences {
         [PrefKey.USER_AGENT_PROFILE]: {
             label: t('user-agent-profile'),
             note: '⚠️ ' + t('unexpected-behavior'),
-            default: 'default',
+            default: BX_FLAGS.DeviceInfo?.deviceType === 'android-tv' ? UserAgentProfile.VR_OCULUS : 'default',
             options: {
                 [UserAgentProfile.DEFAULT]: t('default'),
                 [UserAgentProfile.WINDOWS_EDGE]: 'Edge + Windows',
@@ -611,6 +639,15 @@ export class Preferences {
                 [StreamVideoProcessing.CAS]: t('amd-fidelity-cas'),
             },
         },
+        [PrefKey.VIDEO_POWER_PREFERENCE]: {
+            label: t('gpu-configuration'),
+            default: 'default',
+            options: {
+                'default': t('default'),
+                'low-power': t('low-power'),
+                'high-performance': t('high-performance'),
+            },
+        },
         [PrefKey.VIDEO_SHARPNESS]: {
             label: t('sharpness'),
             type: SettingElementType.NUMBER_STEPPER,
@@ -618,7 +655,7 @@ export class Preferences {
             min: 0,
             max: 10,
             params: {
-                hideSlider: true,
+                exactTicks: 2,
                 customTextValue: (value: any) => {
                     value = parseInt(value);
                     return value === 0 ? t('off') : value.toString();
@@ -688,6 +725,7 @@ export class Preferences {
             default: 100,
             min: 0,
             max: 600,
+            steps: 20,
             params: {
                 suffix: '%',
                 ticks: 100,
@@ -746,6 +784,7 @@ export class Preferences {
             default: 80,
             min: 50,
             max: 100,
+            steps: 10,
             params: {
                 suffix: '%',
                 ticks: 10,

src/utils/settings.ts

@@ -30,11 +30,20 @@ export class SettingElement {
                 // title: setting.label,
                 tabindex: 0,
             }) as HTMLSelectElement;
+
+        let $parent: HTMLElement;
+        if (setting.optionsGroup) {
+            $parent = CE('optgroup', {'label': setting.optionsGroup});
+            $control.appendChild($parent);
+        } else {
+            $parent = $control;
+        }
+
         for (let value in setting.options) {
             const label = setting.options[value];
 
             const $option = CE<HTMLOptionElement>('option', {value: value}, label);
-            $control.appendChild($option);
+            $parent.appendChild($option);
         }
 
         $control.value = currentValue;
@@ -158,21 +167,23 @@ export class SettingElement {
         };
 
         const updateButtonsVisibility = () => {
-            $btnDec.classList.toggle('bx-hidden', controlValue === MIN);
+            $btnDec.classList.toggle('bx-inactive', controlValue === MIN);
-            $btnInc.classList.toggle('bx-hidden', controlValue === MAX);
+            $btnInc.classList.toggle('bx-inactive', controlValue === MAX);
         }
 
         const $wrapper = CE('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`},
                 $btnDec = CE('button', {
                         'data-type': 'dec',
                         type: 'button',
-                        tabindex: -1,
+                        class: options.hideSlider ? 'bx-focusable' : '',
+                        tabindex: options.hideSlider ? 0 : -1,
                     }, '-') as HTMLButtonElement,
                 $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
                 $btnInc = CE('button', {
                         'data-type': 'inc',
                         type: 'button',
-                        tabindex: -1,
+                        class: options.hideSlider ? 'bx-focusable' : '',
+                        tabindex: options.hideSlider ? 0 : -1,
                     }, '+') as HTMLButtonElement,
             );
 
@@ -189,10 +200,16 @@ export class SettingElement {
 
             $range.addEventListener('input', e => {
                 value = parseInt((e.target as HTMLInputElement).value);
+                const valueChanged = controlValue !== value;
+
+                if (!valueChanged) {
+                    return;
+                }
+
                 controlValue = value;
                 updateButtonsVisibility();
-
                 $text.textContent = renderTextValue(value);
+
                 !(e as any).ignoreOnChange && onChange && onChange(e, value);
             });
             $wrapper.appendChild($range);
@@ -223,10 +240,10 @@ export class SettingElement {
 
         if (options.disabled) {
             $btnInc.disabled = true;
-            $btnInc.classList.add('bx-hidden');
+            $btnInc.classList.add('bx-inactive');
 
             $btnDec.disabled = true;
-            $btnDec.classList.add('bx-hidden');
+            $btnDec.classList.add('bx-inactive');
             return $wrapper;
         }
 

src/utils/translation.ts

@@ -20,6 +20,7 @@ export const SUPPORTED_LANGUAGES = {
     'uk-UA': 'українська',
     'vi-VN': 'Tiếng Việt',
     'zh-CN': '中文(简体)',
+    'zh-TW': '中文(繁體)',
 };
 
 const Texts = {
@@ -30,7 +31,7 @@ const Texts = {
     "always-off": "Always off",
     "always-on": "Always on",
     "amd-fidelity-cas": "AMD FidelityFX CAS",
-    "android-app-settings": "Android app settings",
+    "app-settings": "App settings",
     "apply": "Apply",
     "aspect-ratio": "Aspect ratio",
     "aspect-ratio-note": "Don't use with native touch games",
@@ -51,6 +52,7 @@ const Texts = {
     "bottom-right": "Bottom-right",
     "brightness": "Brightness",
     "browser-unsupported-feature": "Your browser doesn't support this feature",
+    "bypass-region-restriction": "Bypass region restriction",
     "can-stream-xbox-360-games": "Can stream Xbox 360 games",
     "cancel": "Cancel",
     "cant-stream-xbox-360-games": "Can't stream Xbox 360 games",
@@ -68,11 +70,13 @@ const Texts = {
     "console-connect": "Connect",
     "contrast": "Contrast",
     "controller": "Controller",
+    "controller-friendly-ui": "Controller-friendly UI",
     "controller-shortcuts": "Controller shortcuts",
     "controller-shortcuts-connect-note": "Connect a controller to use this feature",
     "controller-shortcuts-xbox-note": "Button to open the Guide menu",
     "controller-vibration": "Controller vibration",
     "copy": "Copy",
+    "create-shortcut": "Create shortcut",
     "custom": "Custom",
     "deadzone-counterweight": "Deadzone counterweight",
     "decrease": "Decrease",
@@ -106,6 +110,7 @@ const Texts = {
     "fortnite-force-console-version": "Fortnite: force console version",
     "game-bar": "Game Bar",
     "getting-consoles-list": "Getting the list of consoles...",
+    "gpu-configuration": "GPU configuration",
     "help": "Help",
     "hide": "Hide",
     "hide-idle-cursor": "Hide mouse cursor on idle",
@@ -113,6 +118,7 @@ const Texts = {
     "hide-sections": "Hide sections",
     "hide-system-menu-icon": "Hide System menu's icon",
     "hide-touch-controller": "Hide touch controller",
+    "high-performance": "High performance",
     "horizontal-scroll-sensitivity": "Horizontal scroll sensitivity",
     "horizontal-sensitivity": "Horizontal sensitivity",
     "ignore": "Ignore",
@@ -126,6 +132,7 @@ const Texts = {
     "left-stick": "Left stick",
     "loading-screen": "Loading screen",
     "local-co-op": "Local co-op",
+    "low-power": "Low power",
     "map-mouse-to": "Map mouse to",
     "may-not-work-properly": "May not work properly!",
     "menu": "Menu",
@@ -172,12 +179,13 @@ const Texts = {
         (e: any) => `Натисніть ${e.key} щоб перемкнути цю функцію`,
         (e: any) => `Nhấn ${e.key} để bật/tắt tính năng này`,
         (e: any) => `按下 ${e.key} 来切换此功能`,
+        (e: any) => `按下 ${e.key} 來啟用此功能`,
     ],
     "press-to-bind": "Press a key or do a mouse click to bind...",
     "prompt-preset-name": "Preset's name:",
     "reduce-animations": "Reduce UI animations",
     "region": "Region",
-    "reload-stream": "Reload stream",
+    "reload-page": "Reload page",
     "remote-play": "Remote Play",
     "rename": "Rename",
     "renderer": "Renderer",
@@ -211,6 +219,7 @@ const Texts = {
     "show-stats-on-startup": "Show stats when starting the game",
     "show-touch-controller": "Show touch controller",
     "show-wait-time": "Show the estimated wait time",
+    "show-wait-time-in-game-card": "Show wait time in game card",
     "simplify-stream-menu": "Simplify Stream's menu",
     "skip-splash-video": "Skip Xbox splash video",
     "slow": "Slow",
@@ -267,6 +276,7 @@ const Texts = {
         (e: any) => `Розташування сенсорного керування від ${e.name}`,
         (e: any) => `Bố cục điều khiển cảm ứng tạo bởi ${e.name}`,
         (e: any) => `由 ${e.name} 提供的虚拟按键样式`,
+        (e: any) => `觸控遊玩佈局由 ${e.name} 提供`,
     ],
     "touch-controller": "Touch controller",
     "transparent-background": "Transparent background",
@@ -277,6 +287,7 @@ const Texts = {
     "unmuted": "Unmuted",
     "unsharp-masking": "Unsharp masking",
     "use-mouse-absolute-position": "Use mouse's absolute position",
+    "use-this-at-your-own-risk": "Use this at your own risk",
     "user-agent-profile": "User-Agent profile",
     "vertical-scroll-sensitivity": "Vertical scroll sensitivity",
     "vertical-sensitivity": "Vertical sensitivity",
@@ -368,6 +379,7 @@ export class Translations {
     static async updateTranslations(async=false) {
         // Don't have to download en-US
         if (Translations.#selectedLocale === Translations.#EN_US) {
+            localStorage.removeItem(Translations.#KEY_TRANSLATIONS);
             return;
         }
 

src/utils/xcloud-api.ts

@@ -0,0 +1,79 @@
+import { NATIVE_FETCH } from "./bx-flags";
+import { STATES } from "./global";
+
+export class XcloudApi {
+    private static instance: XcloudApi;
+
+    public static getInstance(): XcloudApi {
+        if (!XcloudApi.instance) {
+            XcloudApi.instance = new XcloudApi();
+        }
+
+        return XcloudApi.instance;
+    }
+
+    #CACHE_TITLES: {[key: string]: XcloudTitleInfo} = {};
+    #CACHE_WAIT_TIME: {[key: string]: XcloudWaitTimeInfo} = {};
+
+    async getTitleInfo(id: string): Promise<XcloudTitleInfo | null> {
+        if (id in this.#CACHE_TITLES) {
+            return this.#CACHE_TITLES[id];
+        }
+
+        const baseUri = STATES.selectedRegion.baseUri;
+        if (!baseUri || !STATES.gsToken) {
+            return null;
+        }
+
+        let json;
+        try {
+            const response = await NATIVE_FETCH(`${baseUri}/v2/titles`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${STATES.gsToken}`,
+                    'Content-Type': 'application/json',
+                },
+
+                // format the data
+                body: JSON.stringify({
+                    alternateIds: [id],
+                    alternateIdType: 'productId',
+                }),
+            });
+
+            json = (await response.json()).results[0];
+        } catch (e) {
+            json = {}
+        }
+        this.#CACHE_TITLES[id] = json;
+        return json;
+    }
+
+    async getWaitTime(id: string): Promise<XcloudWaitTimeInfo | null> {
+        if (id in this.#CACHE_WAIT_TIME) {
+            return this.#CACHE_WAIT_TIME[id];
+        }
+
+        const baseUri = STATES.selectedRegion.baseUri;
+        if (!baseUri || !STATES.gsToken) {
+            return null;
+        }
+
+        let json;
+        try {
+            const response = await NATIVE_FETCH(`${baseUri}/v1/waittime/${id}`, {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${STATES.gsToken}`,
+                },
+            });
+
+            json = await response.json();
+        } catch (e) {
+            json = {};
+        }
+
+        this.#CACHE_WAIT_TIME[id] = json;
+        return json;
+    }
+}

src/utils/xcloud-interceptor.ts

@@ -0,0 +1,226 @@
+import { LoadingScreen } from "@modules/loading-screen";
+import { RemotePlay } from "@modules/remote-play";
+import { StreamBadges } from "@modules/stream/stream-badges";
+import { TouchController } from "@modules/touch-controller";
+import { BxEvent } from "./bx-event";
+import { NATIVE_FETCH, BX_FLAGS } from "./bx-flags";
+import { STATES } from "./global";
+import { patchIceCandidates } from "./network";
+import { getPref, PrefKey } from "./preferences";
+import { getPreferredServerRegion } from "./region";
+import { BypassServerIps } from "@/enums/bypass-servers";
+
+export
+class XcloudInterceptor {
+    static async #handleLogin(request: RequestInfo | URL, init?: RequestInit) {
+        const bypassServer = getPref(PrefKey.SERVER_BYPASS_RESTRICTION);
+        if (bypassServer !== 'off') {
+            const ip = BypassServerIps[bypassServer as keyof typeof BypassServerIps];
+            ip && (request as Request).headers.set('X-Forwarded-For', ip);
+        }
+
+        const response = await NATIVE_FETCH(request, init);
+        if (response.status !== 200) {
+            // Unsupported region
+            BxEvent.dispatch(window, BxEvent.XCLOUD_SERVERS_UNAVAILABLE);
+            return response;
+        }
+
+        const obj = await response.clone().json();
+
+        // Store xCloud token
+        RemotePlay.XCLOUD_TOKEN = obj.gsToken;
+
+        // Get server list
+        const serverEmojis = {
+            AustraliaEast: '🇦🇺',
+            AustraliaSouthEast: '🇦🇺',
+            BrazilSouth: '🇧🇷',
+            EastUS: '🇺🇸',
+            EastUS2: '🇺🇸',
+            JapanEast: '🇯🇵',
+            KoreaCentral: '🇰🇷',
+            MexicoCentral: '🇲🇽',
+            NorthCentralUs: '🇺🇸',
+            SouthCentralUS: '🇺🇸',
+            UKSouth: '🇬🇧',
+            WestEurope: '🇪🇺',
+            WestUS: '🇺🇸',
+            WestUS2: '🇺🇸',
+        };
+
+        const serverRegex = /\/\/(\w+)\./;
+
+        for (let region of obj.offeringSettings.regions) {
+            const regionName = region.name as keyof typeof serverEmojis;
+            let shortName = region.name;
+
+            if (region.isDefault) {
+                STATES.selectedRegion = Object.assign({}, region);
+            }
+
+            let match = serverRegex.exec(region.baseUri);
+            if (match) {
+                shortName = match[1];
+                if (serverEmojis[regionName]) {
+                    shortName = serverEmojis[regionName] + ' ' + shortName;
+                }
+            }
+
+            region.shortName = shortName.toUpperCase();
+            STATES.serverRegions[region.name] = Object.assign({}, region);
+        }
+
+        BxEvent.dispatch(window, BxEvent.XCLOUD_SERVERS_READY);
+
+        const preferredRegion = getPreferredServerRegion();
+        if (preferredRegion in STATES.serverRegions) {
+            const tmp = Object.assign({}, STATES.serverRegions[preferredRegion]);
+            tmp.isDefault = true;
+
+            obj.offeringSettings.regions = [tmp];
+            STATES.selectedRegion = tmp;
+        }
+
+        STATES.gsToken = obj.gsToken;
+
+        response.json = () => Promise.resolve(obj);
+        return response;
+    }
+
+    static async #handlePlay(request: RequestInfo | URL, init?: RequestInit) {
+        const PREF_STREAM_TARGET_RESOLUTION = getPref(PrefKey.STREAM_TARGET_RESOLUTION);
+        const PREF_STREAM_PREFERRED_LOCALE = getPref(PrefKey.STREAM_PREFERRED_LOCALE);
+
+        const url = (typeof request === 'string') ? request : (request as Request).url;
+        const parsedUrl = new URL(url);
+
+        let badgeRegion: string = parsedUrl.host.split('.', 1)[0];
+        for (let regionName in STATES.serverRegions) {
+            const region = STATES.serverRegions[regionName];
+            if (parsedUrl.origin == region.baseUri) {
+                badgeRegion = regionName;
+                break;
+            }
+        }
+        StreamBadges.getInstance().setRegion(badgeRegion);
+
+        const clone = (request as Request).clone();
+        const body = await clone.json();
+
+        // Force stream's resolution
+        if (PREF_STREAM_TARGET_RESOLUTION !== 'auto') {
+            const osName = (PREF_STREAM_TARGET_RESOLUTION === '720p') ? 'android' : 'windows';
+            body.settings.osName = osName;
+        }
+
+        // Override "locale" value
+        if (PREF_STREAM_PREFERRED_LOCALE !== 'default') {
+            body.settings.locale = PREF_STREAM_PREFERRED_LOCALE;
+        }
+
+        const newRequest = new Request(request, {
+            body: JSON.stringify(body),
+        });
+
+        return NATIVE_FETCH(newRequest);
+    }
+
+    static async #handleWaitTime(request: RequestInfo | URL, init?: RequestInit) {
+        const response = await NATIVE_FETCH(request, init);
+
+        if (getPref(PrefKey.UI_LOADING_SCREEN_WAIT_TIME)) {
+            const json = await response.clone().json();
+            if (json.estimatedAllocationTimeInSeconds > 0) {
+                // Setup wait time overlay
+                LoadingScreen.setupWaitTime(json.estimatedTotalWaitTimeInSeconds);
+            }
+        }
+
+        return response;
+    }
+
+    static async #handleConfiguration(request: RequestInfo | URL, init?: RequestInit) {
+        if ((request as Request).method !== 'GET') {
+            return NATIVE_FETCH(request, init);
+        }
+
+        // Touch controller for all games
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
+            const titleInfo = STATES.currentStream.titleInfo;
+            if (titleInfo?.details.hasTouchSupport) {
+                TouchController.disable();
+            } else {
+                TouchController.enable();
+            }
+        }
+
+        // Intercept configurations
+        const response = await NATIVE_FETCH(request, init);
+        const text = await response.clone().text();
+        if (!text.length) {
+            return response;
+        }
+
+        const obj = JSON.parse(text);
+        let overrides = JSON.parse(obj.clientStreamingConfigOverrides || '{}') || {};
+
+        overrides.inputConfiguration = overrides.inputConfiguration || {};
+        overrides.inputConfiguration.enableVibration = true;
+
+        let overrideMkb: boolean | null = null;
+
+        if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' || (STATES.currentStream.titleInfo && BX_FLAGS.ForceNativeMkbTitles?.includes(STATES.currentStream.titleInfo.details.productId))) {
+            overrideMkb = true;
+        }
+
+        if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'off') {
+            overrideMkb = false;
+        }
+
+        if (overrideMkb !== null) {
+            overrides.inputConfiguration = Object.assign(overrides.inputConfiguration, {
+                enableMouseInput: overrideMkb,
+                enableKeyboardInput: overrideMkb,
+            });
+        }
+
+        // Enable touch controller
+        if (TouchController.isEnabled()) {
+            overrides.inputConfiguration.enableTouchInput = true;
+            overrides.inputConfiguration.maxTouchPoints = 10;
+        }
+
+        // Enable mic
+        if (getPref(PrefKey.AUDIO_MIC_ON_PLAYING)) {
+            overrides.audioConfiguration = overrides.audioConfiguration || {};
+            overrides.audioConfiguration.enableMicrophone = true;
+        }
+
+        obj.clientStreamingConfigOverrides = JSON.stringify(overrides);
+
+        response.json = () => Promise.resolve(obj);
+        response.text = () => Promise.resolve(JSON.stringify(obj));
+
+        return response;
+    }
+
+    static async handle(request: RequestInfo | URL, init?: RequestInit) {
+        let url = (typeof request === 'string') ? request : (request as Request).url;
+
+        // Server list
+        if (url.endsWith('/v2/login/user')) {
+            return XcloudInterceptor.#handleLogin(request, init);
+        } else if (url.endsWith('/sessions/cloud/play')) {  // Get session
+            return XcloudInterceptor.#handlePlay(request, init);
+        } else if (url.includes('xboxlive.com') && url.includes('/waittime/')) {
+            return XcloudInterceptor.#handleWaitTime(request, init);
+        } else if (url.endsWith('/configuration')) {
+            return XcloudInterceptor.#handleConfiguration(request, init);
+        } else if (url && url.endsWith('/ice') && url.includes('/sessions/') && (request as Request).method === 'GET') {
+            return patchIceCandidates(request as Request);
+        }
+
+        return NATIVE_FETCH(request, init);
+    }
+}

src/utils/xhome-interceptor.ts

@@ -0,0 +1,184 @@
+import { RemotePlay } from "@/modules/remote-play";
+import { TouchController } from "@/modules/touch-controller";
+import { BxEvent } from "./bx-event";
+import { InputType } from "./bx-exposed";
+import { NATIVE_FETCH } from "./bx-flags";
+import { STATES } from "./global";
+import { getPref, PrefKey } from "./preferences";
+import { patchIceCandidates } from "./network";
+
+export class XhomeInterceptor {
+    static #consoleAddrs: {[index: string]: number} = {};
+
+    static async #handleLogin(request: Request) {
+        try {
+            const clone = (request as Request).clone();
+
+            const obj = await clone.json();
+            obj.offeringId = 'xhome';
+
+            request = new Request('https://xhome.gssv-play-prod.xboxlive.com/v2/login/user', {
+                method: 'POST',
+                body: JSON.stringify(obj),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+        } catch (e) {
+            alert(e);
+            console.log(e);
+        }
+
+        return NATIVE_FETCH(request);
+    }
+
+    static async #handleConfiguration(request: Request | URL) {
+        const response = await NATIVE_FETCH(request);
+
+        const obj = await response.clone().json()
+        console.log(obj);
+
+        const serverDetails = obj.serverDetails;
+        if (serverDetails.ipAddress) {
+            XhomeInterceptor.#consoleAddrs[serverDetails.ipAddress] = serverDetails.port;
+        }
+
+        if (serverDetails.ipV4Address) {
+            XhomeInterceptor.#consoleAddrs[serverDetails.ipV4Address] = serverDetails.ipV4Port;
+        }
+
+        if (serverDetails.ipV6Address) {
+            XhomeInterceptor.#consoleAddrs[serverDetails.ipV6Address] = serverDetails.ipV6Port;
+        }
+
+        response.json = () => Promise.resolve(obj);
+        response.text = () => Promise.resolve(JSON.stringify(obj));
+
+        return response;
+    }
+
+    static async #handleInputConfigs(request: Request | URL, opts: {[index: string]: any}) {
+        const response = await NATIVE_FETCH(request);
+
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'all') {
+            return response;
+        }
+
+        const obj = await response.clone().json() as any;
+
+        const xboxTitleId = JSON.parse(opts.body).titleIds[0];
+        STATES.currentStream.xboxTitleId = xboxTitleId;
+
+        const inputConfigs = obj[0];
+
+        let hasTouchSupport = inputConfigs.supportedTabs.length > 0;
+        if (!hasTouchSupport) {
+            const supportedInputTypes = inputConfigs.supportedInputTypes;
+            hasTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH) || supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY);
+        }
+
+        if (hasTouchSupport) {
+            TouchController.disable();
+
+            BxEvent.dispatch(window, BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED, {
+                data: null,
+            });
+        } else {
+            TouchController.enable();
+            TouchController.getCustomLayouts(xboxTitleId);
+        }
+
+        response.json = () => Promise.resolve(obj);
+        response.text = () => Promise.resolve(JSON.stringify(obj));
+
+        return response;
+    }
+
+    static async #handleTitles(request: Request) {
+        const clone = request.clone();
+
+        const headers: {[index: string]: any} = {};
+        for (const pair of (clone.headers as any).entries()) {
+            headers[pair[0]] = pair[1];
+        }
+        headers.authorization = `Bearer ${RemotePlay.XCLOUD_TOKEN}`;
+
+        const index = request.url.indexOf('.xboxlive.com');
+        request = new Request('https://wus.core.gssv-play-prod' + request.url.substring(index), {
+            method: clone.method,
+            body: await clone.text(),
+            headers: headers,
+        });
+
+        return NATIVE_FETCH(request);
+    }
+
+    static async #handlePlay(request: RequestInfo | URL) {
+        const clone = (request as Request).clone();
+        const body = await clone.json();
+
+        // body.settings.useIceConnection = true;
+
+        const newRequest = new Request(request, {
+            body: JSON.stringify(body),
+        });
+
+        return NATIVE_FETCH(newRequest);
+    }
+
+    static async handle(request: Request) {
+        TouchController.disable();
+
+        const clone = request.clone();
+
+        const headers: {[index: string]: string} = {};
+        for (const pair of (clone.headers as any).entries()) {
+            headers[pair[0]] = pair[1];
+        }
+        // Add xHome token to headers
+        headers.authorization = `Bearer ${RemotePlay.XHOME_TOKEN}`;
+
+        // Patch resolution
+        const deviceInfo = RemotePlay.BASE_DEVICE_INFO;
+        if (getPref(PrefKey.REMOTE_PLAY_RESOLUTION) === '720p') {
+            deviceInfo.dev.os.name = 'android';
+        }
+
+        headers['x-ms-device-info'] = JSON.stringify(deviceInfo);
+
+        const opts: {[index: string]: any} = {
+            method: clone.method,
+            headers: headers,
+        };
+
+        if (clone.method === 'POST') {
+            opts.body = await clone.text();
+        }
+
+        let newUrl = request.url;
+        if (!newUrl.includes('/servers/home')) {
+            const index = request.url.indexOf('.xboxlive.com');
+            newUrl = STATES.remotePlay.server + request.url.substring(index + 13);
+        }
+
+        request = new Request(newUrl, opts);
+        let url = (typeof request === 'string') ? request : request.url;
+
+        // Get console IP
+        if (url.includes('/configuration')) {
+            return XhomeInterceptor.#handleConfiguration(request);
+        } else if (url.endsWith('/sessions/home/play')) {
+            return XhomeInterceptor.#handlePlay(request);
+        } else if (url.includes('inputconfigs')) {
+            return XhomeInterceptor.#handleInputConfigs(request, opts);
+        } else if (url.includes('/login/user')) {
+            return XhomeInterceptor.#handleLogin(request);
+        } else if (url.endsWith('/titles')) {
+            return XhomeInterceptor.#handleTitles(request);
+        } else if (url && url.endsWith('/ice') && url.includes('/sessions/') && (request as Request).method === 'GET') {
+            return patchIceCandidates(request, XhomeInterceptor.#consoleAddrs);
+        }
+
+        return await NATIVE_FETCH(request);
+    }
+}

src/web-components/bx-select.ts

@@ -2,6 +2,9 @@ import { ButtonStyle, CE, createButton } from "@utils/html";
 
 export class BxSelectElement {
     static wrap($select: HTMLSelectElement) {
+        // Remove "tabindex" attribute from <select>
+        $select.removeAttribute('tabindex');
+
         const $btnPrev = createButton({
             label: '<',
             style: ButtonStyle.FOCUSABLE,
@@ -19,54 +22,86 @@ export class BxSelectElement {
         });
 
         const isMultiple = $select.multiple;
-        let visibleIndex = $select.selectedIndex;
         let $checkBox: HTMLInputElement;
         let $label: HTMLElement;
+        let visibleIndex = $select.selectedIndex;
 
-        const $content = CE('div', {},
+        let $content;
-            $checkBox = CE('input', {type: 'checkbox', id: $select.id + '_checkbox'}),
-            $label = CE('label', {for: $select.id + '_checkbox'}, ''),
-        );
 
-        isMultiple && $checkBox.addEventListener('input', e => {
+        if (isMultiple) {
-            const $option = getOptionAtIndex(visibleIndex);
+            $content = CE('button', {
-            $option && ($option.selected = (e.target as HTMLInputElement).checked);
+                class: 'bx-select-value bx-focusable',
+                tabindex: 0,
+            },
+                $checkBox = CE('input', {type: 'checkbox'}),
+                $label = CE('span', {}, ''),
+            );
 
-            $select.dispatchEvent(new Event('input'));
+            $content.addEventListener('click', e => {
-        });
+                $checkBox.click();
+            });
 
-        // Only show checkbox in "multiple" <select>
+            $checkBox.addEventListener('input', e => {
-        $checkBox.classList.toggle('bx-gone', !isMultiple);
+                const $option = getOptionAtIndex(visibleIndex);
+                $option && ($option.selected = (e.target as HTMLInputElement).checked);
 
-        const getOptionAtIndex = (index: number): HTMLOptionElement | undefined => {
+                $select.dispatchEvent(new Event('input'));
-            return $select.querySelector(`option:nth-of-type(${visibleIndex + 1})`) as HTMLOptionElement;
+            });
+        } else {
+            $content = CE('div', {},
+                $label = CE('label', {for: $select.id + '_checkbox'}, ''),
+            );
         }
 
-        const render = () => {
+        const getOptionAtIndex = (index: number): HTMLOptionElement | undefined => {
+            const options = Array.from($select.querySelectorAll('option'));
+            return options[index];
+        }
+
+        const render = (e?: Event) => {
             // console.log('options', this.options, 'selectedIndices', this.selectedIndices, 'selectedOptions', this.selectedOptions);
+            if (e && (e as any).manualTrigger) {
+                visibleIndex = $select.selectedIndex;
+            }
 
             visibleIndex = normalizeIndex(visibleIndex);
-
             const $option = getOptionAtIndex(visibleIndex);
             let content = '';
             if ($option) {
                 content = $option.textContent || '';
+
+                if (content && $option.parentElement!.tagName === 'OPTGROUP') {
+                    $label.innerHTML = '';
+                    const fragment = document.createDocumentFragment();
+                    fragment.appendChild(CE('span', {}, ($option.parentElement as HTMLOptGroupElement).label));
+                    fragment.appendChild(document.createTextNode(content));
+
+                    $label.appendChild(fragment);
+                } else {
+                    $label.textContent = content;
+                }
+            } else {
+                $label.textContent = content;
             }
 
-            $label.textContent = content;
+            // Add line-through on disabled option
+            $label.classList.toggle('bx-line-through', $option && $option.disabled);
 
             // Hide checkbox when the selection is empty
-            isMultiple && ($checkBox.checked = $option?.selected || false);
+            if (isMultiple) {
-            $checkBox.classList.toggle('bx-gone', !isMultiple || !content);
+                $checkBox.checked = $option?.selected || false;
+                $checkBox.classList.toggle('bx-gone', !content);
+            }
 
             const disablePrev = visibleIndex <= 0;
             const disableNext = visibleIndex === $select.querySelectorAll('option').length - 1;
 
             $btnPrev.classList.toggle('bx-inactive', disablePrev);
-            disablePrev && $btnNext.focus();
-
             $btnNext.classList.toggle('bx-inactive', disableNext);
-            disableNext && $btnPrev.focus();
+
+            // Focus the other button when reaching the beginning/end
+            disablePrev && !disableNext && document.activeElement === $btnPrev && $btnNext.focus();
+            disableNext && !disablePrev && document.activeElement === $btnNext && $btnPrev.focus();
         }
 
         const normalizeIndex = (index: number): number => {
@@ -85,22 +120,29 @@ export class BxSelectElement {
                 $select.selectedIndex = newIndex;
             }
 
-            $select.dispatchEvent(new Event('input'));
+            if (isMultiple) {
+                render();
+            } else {
+                $select.dispatchEvent(new Event('input'));
+            }
         };
 
-        $select.addEventListener('input', e => render());
+        $select.addEventListener('input', render);
         $btnPrev.addEventListener('click', onPrevNext);
         $btnNext.addEventListener('click', onPrevNext);
 
         const observer = new MutationObserver((mutationList, observer) => {
             mutationList.forEach(mutation => {
-                mutation.type === 'childList' && render();
+                if (mutation.type === 'childList' || mutation.type === 'attributes') {
+                    render();
+                }
             });
         });
 
         observer.observe($select, {
             subtree: true,
             childList: true,
+            attributes: true,
         });
 
         render();