Bump version to 5.4.1

Update better-xcloud.user.js
Fix not able to loop around in some cases
2025-06-28 18:31:44 +02:00 · 2024-07-19 18:25:57 +07:00 · 2024-07-19 18:12:35 +07:00 · 2024-07-19 18:08:39 +07:00 · 2024-07-19 18:01:41 +07:00 · 2024-07-19 17:41:52 +07:00
39 changed files with 1964 additions and 317 deletions
--- a/dist/better-xcloud.meta.js
+++ b/dist/better-xcloud.meta.js
@ -1,5 +1,5 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      5.2.0
+// @version      5.4.1
 // ==/UserScript==
--- a/dist/better-xcloud.user.js
+++ b/dist/better-xcloud.user.js
--- a/src/assets/css/button.styl
+++ b/src/assets/css/button.styl
@ -69,7 +69,7 @@
        height: var(--bx-button-height);

        &:not(:only-child) {
-            margin-right: 4px;
+            margin-right: 10px;
        }
    }

@ -83,24 +83,24 @@
        overflow: hidden;
        white-space: nowrap;
    }
+}

-    &.bx-focusable {
-        position: relative;
+.bx-focusable {
+    position: relative;

-        &::after {
-            border: 2px solid transparent;
-            border-radius: 4px;
-        }
+    &::after {
+        border: 2px solid transparent;
+        border-radius: 4px;
+    }

-        &:focus::after {
-            content: '';
-            border-color: white;
-            position: absolute;
-            top: 0;
-            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,13 @@ a.bx-button {
        text-align: center;
    }
 }
+
+button.bx-inactive {
+    pointer-events: none;
+    opacity: 0.2;
+    background: transparent !important;
+}
+
+.bx-button-shortcut {
+    margin-top: 10px;
+}
--- a/src/assets/css/global-settings.styl
+++ b/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;
@ -99,9 +102,14 @@
    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 +136,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 +203,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;
+        }
+    }
+}
--- a/src/assets/css/number-stepper.styl
+++ b/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;
--- a/src/assets/css/root.styl
+++ b/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;
+    }
+}
--- a/src/assets/css/stream-settings.styl
+++ b/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,32 @@
    }
 }

+@media screen and (max-width: 500px) {
+    .bx-stream-settings-tab-contents {
+        width: calc(100vw - 56px);
+    }
+}

 .bx-stream-settings-row {
    display: flex;
    border-bottom: 1px solid #40404080;
-    margin-bottom: 16px;
-    padding-bottom: 16px;
+    padding: 16px 8px;
+    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 +145,10 @@

    input {
        accent-color: var(--bx-primary-button-color);
+
+        &:focus {
+            accent-color: var(--bx-danger-button-color);
+        }
    }

    select:disabled {
@ -143,7 +172,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 +199,10 @@
            width: 100%;
            height: 36px;
            display: block;
-            margin-bottom: 10px;
        }

        .bx-shortcut-note {
+            margin-top: 10px;
            font-size: 14px;
        }

--- a/src/assets/css/web-components.styl
+++ b/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 {
-        display: inline-block;
+    > div, button.bx-select-value {
        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,25 +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);

-        &.bx-inactive {
-            pointer-events: none;
-            opacity: 0.2;
-        }
-
        span {
            line-height: unset;
        }
--- a/src/assets/svg/create-shortcut.svg
+++ b/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>
--- a/src/enums/bypass-servers.ts
+++ b/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',
+}
--- a/src/index.ts
+++ b/src/index.ts
@ -34,6 +34,8 @@ 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
-if (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS)) {
-    document.addEventListener('readystatechange', e => {
-        if (document.readyState === 'interactive') {
-            const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest('div[class*=HomePage-module]') as HTMLElement;
-            $parent && ($parent.style.display = 'none');
-        }
-    })
-}
+document.addEventListener('readystatechange', e => {
+    if (document.readyState !== 'interactive') {
+        return;
+    }
+
+    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;

@ -186,14 +199,13 @@ window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
    BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
 });

-window.addEventListener(BxEvent.NAVIGATION_FOCUS_CHANGED, e => {
-    const $elm = (e as any).element;
-    if (($elm.tagName === 'BUTTON' && $elm.className.includes('MruGameCard')) || ($elm.tagName === 'A' && $elm.className.includes('GameCard'))) {
-        console.dir($elm);
+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;
@ -349,8 +361,8 @@ function main() {
        BxLogger.info('startPointerServer', 'Port', STATES.pointerServerPort.toString());
    }

-    // Preload Remote Play
-    getPref(PrefKey.REMOTE_PLAY_ENABLED) && BX_FLAGS.PreloadRemotePlay && RemotePlay.preload();
+    // Show wait time in game card
+    getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && GameTile.setup();
 }

 main();
--- a/src/modules/controller-shortcut.ts
+++ b/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,15 @@ export class ControllerShortcut {
            const $select = ControllerShortcut.#$selectActions[button as GamepadKey]!;
            $select.value = actions[button] || '';

-            BxEvent.dispatch($select, 'change', {
-                    ignoreOnChange: true,
-                });
+            BxEvent.dispatch($select, 'input', {
+                ignoreOnChange: 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 +290,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'}),
-                CE('p', {'class': 'bx-shortcut-note'},
-                    CE('span', {'class': 'bx-prompt'}, PrompFont.HOME),
+                PREF_CONTROLLER_FRIENDLY_UI ? CE('div', {'data-focus-container': 'true'}, BxSelectElement.wrap($selectProfile)) : $selectProfile,
+                CE('p', {class: 'bx-shortcut-note'},
+                    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 +317,51 @@ export class ControllerShortcut {
            const button: unknown = $target.dataset.button;
            const action = $target.value as ShortcutAction;

-            const $fakeSelect = $target.previousElementSibling! as HTMLSelectElement;
-            let fakeText = '---';
-            if (action) {
-                const $selectedOption =  $target.options[$target.selectedIndex];
-                const $optGroup = $selectedOption.parentElement as HTMLOptGroupElement;
-                fakeText = $optGroup.label + ' ❯ ' + $selectedOption.text;
+            if (!PREF_CONTROLLER_FRIENDLY_UI) {
+                const $fakeSelect = $target.previousElementSibling! as HTMLSelectElement;
+                let fakeText = '---';
+                if (action) {
+                    const $selectedOption =  $target.options[$target.selectedIndex];
+                    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'},
-                CE('option', {}, '---'),
-            );
-            $div.appendChild($fakeSelect);
+            if (!PREF_CONTROLLER_FRIENDLY_UI) {
+                const $fakeSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'},
+                    CE('option', {}, '---'),
+                );
+
+                $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);
--- a/src/modules/patcher.ts
+++ b/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";
@ -452,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);
@ -788,6 +799,22 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
        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 = [
@ -803,14 +830,16 @@ let PATCH_ORDERS: PatchArray = [
    'disableStreamGate',
    'overrideSettings',
    'broadcastPollingMode',
+    'patchGamepadPolling',

    'exposeStreamSession',
    'exposeDialogRoutes',

    'enableTvRoutes',
+    AppInterface && 'detectProductDetailsPage',

    'overrideStorageGetSettings',
-    // 'patchSetCurrentlyFocusedInteractable',
+    getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && 'patchSetCurrentlyFocusedInteractable',

    getPref(PrefKey.UI_LAYOUT) !== 'default' && 'websiteLayout',
    getPref(PrefKey.LOCAL_CO_OP_ENABLED) && 'supportLocalCoOp',
--- a/src/modules/patches/controller-shortcuts.js
+++ b/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
--- a/src/modules/player/webgl2-player.ts
+++ b/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;

--- a/src/modules/stream-player.ts
+++ b/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.#webGL2Player?.destroy();
-         this.#webGL2Player = null;
+        this.#cleanUpWebGL2Player();
    }
 }
--- a/src/modules/stream/stream-settings-utils.ts
+++ b/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();
 }

--- a/src/modules/stream/stream-settings.ts
+++ b/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,365 @@ 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();
+                    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]${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'},
-                $tabs = CE('div', {'class': 'bx-stream-settings-tabs'}),
-                $settings = CE('div', {'class': 'bx-stream-settings-tab-contents'}),
+        const $container = CE('div', {class: StreamSettings.MAIN_CLASS + ' bx-gone'},
+                $tabs = CE('div', {class: 'bx-stream-settings-tabs'}),
+                $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 +668,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 +705,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 +751,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 +760,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),
--- a/src/modules/ui/game-tile.ts
+++ b/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);
+        });
+    }
+}
--- a/src/modules/ui/global-settings.ts
+++ b/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,15 +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,
        ],
    },
@ -90,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,
@ -161,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,
@ -202,6 +205,8 @@ export function setupSettingsUi() {
        $wrapper.appendChild($div);
    }

+    let localeSwitchingTimeout: number | null;
+
    const onChange = async (e: Event) => {
        // Clear PatcherCache;
        PatcherCache.clear();
@ -213,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
-            Translations.refreshCurrentLocale();
-            await Translations.updateTranslations();
+            if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                localeSwitchingTimeout && window.clearTimeout(localeSwitchingTimeout);
+                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();
            }
@ -227,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
@ -375,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') {
-                $elm = CE('div', {'class': 'bx-settings-row'},
+            if ($control instanceof HTMLSelectElement && getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                // 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),
                );
            }

@ -438,6 +457,47 @@ export function setupSettingsUi() {
        $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_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
--- a/src/modules/ui/guide-menu.ts
+++ b/src/modules/ui/guide-menu.ts
@ -43,11 +43,18 @@ export class GuideMenu {
            },
        }),

-        reloadStream: createButton({
-            label: t('reload-stream'),
+        reloadPage: createButton({
+            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
-        if (AppInterface) {
-            buttons.push(GuideMenu.#BUTTONS.appSettings);
-            buttons.push(GuideMenu.#BUTTONS.closeApp);
-        }
+        // "App settings" button
+        AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
+
+        // "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
-        buttons.push(GuideMenu.#BUTTONS.reloadStream);
+        // Reload page
+        buttons.push(GuideMenu.#BUTTONS.reloadPage);

        // Back to home
        buttons.push(GuideMenu.#BUTTONS.backToHome);
--- a/src/modules/ui/header.ts
+++ b/src/modules/ui/header.ts
@ -38,6 +38,7 @@ export class HeaderSection {
    );

    static #observer: MutationObserver;
+    static #timeout: number | null;

    static #injectSettingsButton($parent?: HTMLElement) {
        if (!$parent) {
@ -60,9 +61,7 @@ export class HeaderSection {
    }

    static checkHeader() {
-        const $button = document.querySelector('.bx-header-settings-button');
-
-        if (!$button) {
+        if (!HeaderSection.#$buttonsWrapper.isConnected) {
            const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
            HeaderSection.#injectSettingsButton($rightHeader as HTMLElement);
        }
@ -78,12 +77,10 @@ export class HeaderSection {
            return;
        }

-        let timeout: number | null;
-
        HeaderSection.#observer && HeaderSection.#observer.disconnect();
        HeaderSection.#observer = new MutationObserver(mutationList => {
-            timeout && clearTimeout(timeout);
-            timeout = window.setTimeout(HeaderSection.checkHeader, 2000);
+            HeaderSection.#timeout && clearTimeout(HeaderSection.#timeout);
+            HeaderSection.#timeout = window.setTimeout(HeaderSection.checkHeader, 2000);
        });
        HeaderSection.#observer.observe($header, {subtree: true, childList: true});

--- a/src/modules/ui/product-details.ts
+++ b/src/modules/ui/product-details.ts
@ -0,0 +1,36 @@
+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) {
+                this.$btnShortcut.style.width = $container.getBoundingClientRect().width + 'px';
+                $container.parentElement?.appendChild(ProductDetailsPage.$btnShortcut);
+            }
+        }, 500);
+    }
+}
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@ -25,10 +25,13 @@ 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: {
@ -71,6 +74,8 @@ type BxStates = {
 type DualEnum = {[index: string]: number} & {[index: number]: string};

 type XcloudTitleInfo = {
+    titleId: string,
+
    details: {
        productId: string;
        supportedInputTypes: InputType[];
@ -88,6 +93,12 @@ type XcloudTitleInfo = {
    };
 };

+type XcloudWaitTimeInfo = Partial<{
+    estimatedAllocationTimeInSeconds: number,
+    estimatedProvisioningTimeInSeconds: number,
+    estimatedTotalWaitTimeInSeconds: number,
+}>;
+
 declare module '*.js';
 declare module '*.svg';
 declare module '*.styl';
--- a/src/types/preferences.d.ts
+++ b/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;
--- a/src/utils/bx-event.ts
+++ b/src/utils/bx-event.ts
@ -48,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 {
--- a/src/utils/bx-exposed.ts
+++ b/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;
+    },
 };
--- a/src/utils/bx-flags.ts
+++ b/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;
--- a/src/utils/bx-icon.ts
+++ b/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,
--- a/src/utils/feature-gates.ts
+++ b/src/utils/feature-gates.ts
@ -4,6 +4,8 @@ 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
--- a/src/utils/global.ts
+++ b/src/utils/global.ts
@ -14,10 +14,13 @@ const userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport;

 export const STATES: BxStates = {
    supportedRegion: true,
+    serverRegions: {},
+    selectedRegion: {},
+    gsToken: '',
+    isSignedIn: false,

    isPlaying: false,
    appContext: {},
-    serverRegions: {},

    browser: {
        capabilities: {
--- a/src/utils/history.ts
+++ b/src/utils/history.ts
@ -2,6 +2,7 @@ import { BxEvent } from "@utils/bx-event";
 import { LoadingScreen } from "@modules/loading-screen";
 import { RemotePlay } from "@modules/remote-play";
 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,11 +26,17 @@ 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();

--- a/src/utils/html.ts
+++ b/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') {
-            $elm.appendChild(document.createTextNode(arg));
-        } else if (arg) {
+        if (arg instanceof Node) {
            $elm.appendChild(arg);
+        } else if (arg !== null && 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');
--- a/src/utils/preferences.ts
+++ b/src/utils/preferences.ts
@ -1,5 +1,5 @@
 import { CE } from "@utils/html";
-import { SUPPORTED_LANGUAGES, t, ut } 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',
@ -71,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',
@ -125,9 +130,13 @@ export class Preferences {
            default: 'default',
        },
        [PrefKey.SERVER_BYPASS_RESTRICTION]: {
-            label: ut('Bypass region restriction'),
-            note: ut('⚠️ Use this at your own risk'),
-            default: false,
+            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]: {
@ -547,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',
@ -581,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,
@ -592,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',
@ -619,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'),
+                'high-performance': t('high-performance'),
+                'low-power': t('low-power'),
+            },
+        },
        [PrefKey.VIDEO_SHARPNESS]: {
            label: t('sharpness'),
            type: SettingElementType.NUMBER_STEPPER,
@ -626,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();
@ -696,6 +725,7 @@ export class Preferences {
            default: 100,
            min: 0,
            max: 600,
+            steps: 20,
            params: {
                suffix: '%',
                ticks: 100,
@ -754,6 +784,7 @@ export class Preferences {
            default: 80,
            min: 50,
            max: 100,
+            steps: 10,
            params: {
                suffix: '%',
                ticks: 10,
--- a/src/utils/settings.ts
+++ b/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);
-            $btnInc.classList.toggle('bx-hidden', controlValue === MAX);
+            $btnDec.classList.toggle('bx-inactive', controlValue === MIN);
+            $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;
        }

--- a/src/utils/translation.ts
+++ b/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 = {
@ -69,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",
@ -107,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",
@ -114,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",
@ -127,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",
@ -173,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",
@ -212,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",
@ -268,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",
@ -370,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;
        }

--- a/src/utils/xcloud-api.ts
+++ b/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;
+    }
+}
--- a/src/utils/xcloud-interceptor.ts
+++ b/src/utils/xcloud-interceptor.ts
@ -8,12 +8,15 @@ 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) {
-        if (getPref(PrefKey.SERVER_BYPASS_RESTRICTION)) {
-            (request as Request).headers.set('X-Forwarded-For', '9.9.9.9');
+        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);
@ -52,6 +55,10 @@ class XcloudInterceptor {
            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];
@ -72,8 +79,11 @@ class XcloudInterceptor {
            tmp.isDefault = true;

            obj.offeringSettings.regions = [tmp];
+            STATES.selectedRegion = tmp;
        }

+        STATES.gsToken = obj.gsToken;
+
        response.json = () => Promise.resolve(obj);
        return response;
    }
--- a/src/web-components/bx-select.ts
+++ b/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,82 @@ export class BxSelectElement {
        });

        const isMultiple = $select.multiple;
-        let visibleIndex = $select.selectedIndex;
        let $checkBox: HTMLInputElement;
        let $label: HTMLElement;

-        const $content = CE('div', {},
-            $checkBox = CE('input', {type: 'checkbox', id: $select.id + '_checkbox'}),
-            $label = CE('label', {for: $select.id + '_checkbox'}, ''),
-        );
+        let $content;

-        isMultiple && $checkBox.addEventListener('input', e => {
-            const $option = getOptionAtIndex(visibleIndex);
-            $option && ($option.selected = (e.target as HTMLInputElement).checked);
+        if (isMultiple) {
+            $content = CE('button', {
+                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.classList.toggle('bx-gone', !isMultiple);
+            $checkBox.addEventListener('input', e => {
+                const $option = getOptionAtIndex($select.selectedIndex);
+                $option && ($option.selected = (e.target as HTMLInputElement).checked);
+
+                $select.dispatchEvent(new Event('input'));
+            });
+        } else {
+            $content = CE('div', {},
+                $label = CE('label', {for: $select.id + '_checkbox'}, ''),
+            );
+        }

        const getOptionAtIndex = (index: number): HTMLOptionElement | undefined => {
-            return $select.querySelector(`option:nth-of-type(${visibleIndex + 1})`) as HTMLOptionElement;
+            const options = Array.from($select.querySelectorAll('option'));
+            return options[index];
        }

        const render = () => {
            // console.log('options', this.options, 'selectedIndices', this.selectedIndices, 'selectedOptions', this.selectedOptions);

-            visibleIndex = normalizeIndex(visibleIndex);
+            const visibleIndex = normalizeIndex($select.selectedIndex);

            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);
-            $checkBox.classList.toggle('bx-gone', !isMultiple || !content);
+            if (isMultiple) {
+                $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();
+            // disablePrev && document.activeElement === $btnPrev && $btnNext.focus();

            $btnNext.classList.toggle('bx-inactive', disableNext);
-            disableNext && $btnPrev.focus();
+            // disableNext && document.activeElement === $btnNext &&$btnPrev.focus();
        }

        const normalizeIndex = (index: number): number => {
@ -76,11 +107,10 @@ export class BxSelectElement {
        const onPrevNext = (e: Event) => {
            const goNext = e.target === $btnNext;

-            const currentIndex = visibleIndex;
+            const currentIndex = $select.selectedIndex;
            let newIndex = goNext ? currentIndex + 1 : currentIndex - 1;
            newIndex = normalizeIndex(newIndex);

-            visibleIndex = newIndex;
            if (!isMultiple && newIndex !== currentIndex) {
                $select.selectedIndex = newIndex;
            }
@ -94,13 +124,16 @@ export class BxSelectElement {

        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();
Author	SHA1	Message	Date
redphx	6a8eecab06	Bump version to 5.4.1	2024-07-19 18:25:57 +07:00
redphx	640dd2fb5a	Update better-xcloud.user.js	2024-07-19 18:12:35 +07:00
redphx	30bb8cfbeb	Fix not able to loop around in some cases	2024-07-19 18:08:39 +07:00
redphx	42b57a2cf8	Set controller-friendly UI as default on Android TV	2024-07-19 18:01:41 +07:00
redphx	210fdfbabe	Add "GPU configuration" setting	2024-07-19 17:41:52 +07:00
redphx	dbbdc48aab	Add "Create shortcut" button to Product Details page	2024-07-19 16:48:31 +07:00
redphx	66123bc4ef	Fix BxSelect element not showing label correctly (#449 )	2024-07-19 06:54:00 +07:00
redphx	2ecd995e47	Minor updates	2024-07-19 06:24:17 +07:00
redphx	0e03d4dc32	Update better-xcloud.user.js	2024-07-18 20:48:21 +07:00
redphx	5b4088cc81	Show debug info	2024-07-18 20:47:58 +07:00
redphx	1f3e4b8250	Re-arrange buttons in Guide menu	2024-07-18 20:08:59 +07:00
redphx	daf3f72736	Loop around settings	2024-07-18 17:30:34 +07:00
redphx	fbebb12965	Close Stream settings dialog when not clicking on any child elements	2024-07-18 09:20:40 +07:00
redphx	43ef2b7cd0	Update better-xcloud.user.js	2024-07-18 09:06:45 +07:00
redphx	e1eca20792	Fix Stream settings dialog in portrait mode	2024-07-18 09:06:37 +07:00
redphx	c2d8f1fbf7	Disable Fire OS's "Update required" screen	2024-07-18 07:21:35 +07:00
redphx	64be526b2d	Bump version to 5.4.0	2024-07-17 18:13:09 +07:00
redphx	13527b9cf6	Bug fixes	2024-07-17 18:08:41 +07:00
redphx	6999783c07	Update better-xcloud.user.js	2024-07-17 17:56:18 +07:00
redphx	0f88396db8	Allow navigating Stream settings using controller/keyboard all the time	2024-07-17 17:54:06 +07:00
redphx	e73b4dfe78	Support navigating Stream settings using left stick	2024-07-17 17:47:23 +07:00
redphx	0fb83de0ff	Add "Reload page" button to the Guide menu even when not playing	2024-07-17 17:43:57 +07:00
redphx	714276e552	Hide Stream settings when navigating to another pages	2024-07-17 17:40:08 +07:00
redphx	58b83c4eb2	Add BX_EXPOSED.backButtonPressed()	2024-07-17 17:38:59 +07:00
redphx	585ec4a598	Update translations and add support for Traditional Chinese	2024-07-17 17:38:27 +07:00
redphx	816249e9a5	Minor fix	2024-07-17 08:04:19 +07:00
redphx	30421fcdba	Update better-xcloud.user.js	2024-07-17 07:59:09 +07:00
redphx	7f43db03df	Press LB/RB to focus setting tabs	2024-07-17 07:58:51 +07:00
redphx	742fd24b8c	Fix bugs with Clarity boost select box	2024-07-17 07:48:36 +07:00
redphx	2db246e081	Update layout	2024-07-17 07:18:55 +07:00
redphx	d8e87e5c2c	Reduce polling rate	2024-07-17 06:50:13 +07:00
redphx	d7dc6931d6	Only disable buttons in number-stepper when they're at min/max	2024-07-17 06:49:19 +07:00
redphx	44083f2469	Update better-xcloud.user.js	2024-07-16 21:53:04 +07:00
redphx	64568532cb	Allow controlling settings using gamepad	2024-07-16 21:52:44 +07:00
redphx	2a0af5d0ab	Make Controller shortcuts settings controller-friendly	2024-07-16 17:59:21 +07:00
redphx	b66cb448ec	Make Stream settings dialog controller-friendly	2024-07-16 17:08:56 +07:00
redphx	be338f3e34	Update bx-select's layout	2024-07-15 21:18:51 +07:00
redphx	394dc68ece	Add "Controller-friendly UI" option	2024-07-15 20:54:35 +07:00
redphx	66120d6970	Update better-xcloud.user.js	2024-07-15 17:12:22 +07:00
redphx	368a6f726a	Add optionsGroup	2024-07-15 17:10:07 +07:00
redphx	7409956616	Show Settings button in header when not signed in	2024-07-15 17:04:04 +07:00
redphx	d41fd22a47	Update servers	2024-07-15 09:13:23 +07:00
redphx	55a56837c8	Bump version to 5.3.0	2024-07-14 17:53:35 +07:00
redphx	df713136d8	Update better-xcloud.user.js	2024-07-14 17:51:37 +07:00
redphx	29dfdaf72e	Show allocation time instead of total wait time	2024-07-14 17:51:32 +07:00
redphx	04cf66a466	Update better-xcloud.user.js	2024-07-14 16:44:38 +07:00
redphx	1d55026c6d	Add option to show wait time in game card	2024-07-14 16:44:18 +07:00
redphx	fcfecf7ff9	Update global-settings.styl	2024-07-14 09:18:06 +07:00
redphx	5e22bf097a	Optimize checkHeader()	2024-07-14 09:17:12 +07:00
redphx	542079d53e	Update translations	2024-07-13 20:15:36 +07:00