Bump version to 5.7.7

Update better-xcloud.user.js
Fix buttons layout in product details page
2025-06-28 18:31:44 +02:00 · 2024-09-26 19:50:28 +07:00 · 2024-09-26 19:49:58 +07:00 · 2024-09-26 19:46:30 +07:00 · 2024-09-26 19:22:51 +07:00 · 2024-09-25 20:20:45 +07:00
43 changed files with 2351 additions and 2784 deletions
--- a/build.ts
+++ b/build.ts
@ -35,12 +35,42 @@ const postProcess = (str: string): string => {
    // Add ADDITIONAL CODE block
    str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');

-    // Minify SVG
-    str = str.replaceAll(/= "(<svg.*)";/g, function(match) {
-        match = match.replaceAll(/\\n*\s*/g, '');
-        return match;
+    str = str.replaceAll('(e) => `', 'e => `');
+
+    // Simplify object definitions
+    // {[1]: "a"} => {1: "a"}
+    str = str.replaceAll(/\[(\d+)\]: /g, '$1: ');
+    // {["a"]: 1, ["b-c"]: 2} => {a: 1, "b-c": 2}
+    str = str.replaceAll(/\["([^"]+)"\]: /g, function(match, p1) {
+        if (p1.includes('-') || p1.match(/^\d/)) {
+            p1 = `"${p1}"`;
+        }
+
+        return p1 + ': ';
    });

+    // Minify SVG import code
+    const svgMap = {}
+    str = str.replaceAll(/var ([\w_]+) = ("<svg.*?");\n\n/g, function(match, p1, p2) {
+        // Remove new lines in SVG
+        p2 = p2.replaceAll(/\\n*\s*/g, '');
+
+        svgMap[p1] = p2;
+        return '';
+    });
+
+    for (const name in svgMap) {
+        str = str.replace(`: ${name}`, `: ${svgMap[name]}`);
+    }
+
+    // Collapse empty brackets
+    str = str.replaceAll(/\{[\s\n]+\}/g, '{}');
+
+    // Collapse if/else blocks without curly braces
+    str = str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
+
+    // Remove blank lines
+    str = str.replaceAll(/\n([\s]*)\n/g, "\n");

    assert(str.includes('/* ADDITIONAL CODE */'));
    assert(str.includes('window.BX_EXPOSED = BxExposed'));
--- a/bun.lockb
+++ b/bun.lockb
--- 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.7.1
+// @version      5.7.7
 // ==/UserScript==
--- a/dist/better-xcloud.user.js
+++ b/dist/better-xcloud.user.js
--- a/package.json
+++ b/package.json
@ -9,14 +9,14 @@
    "build": "build.ts"
  },
  "devDependencies": {
-    "@types/bun": "^1.1.8",
-    "@types/node": "^22.5.2",
-    "@types/stylus": "^0.48.42",
-    "eslint": "^9.9.1",
-    "eslint-plugin-compat": "^6.0.0",
+    "@types/bun": "^1.1.9",
+    "@types/node": "^22.5.5",
+    "@types/stylus": "^0.48.43",
+    "eslint": "^9.10.0",
+    "eslint-plugin-compat": "^6.0.1",
    "stylus": "^0.63.0"
  },
  "peerDependencies": {
-    "typescript": "^5.5.4"
+    "typescript": "^5.6.2"
  }
 }
--- a/src/assets/css/button.styl
+++ b/src/assets/css/button.styl
@ -179,15 +179,3 @@ button.bx-inactive {
    opacity: 0.2;
    background: transparent !important;
 }
-
-.bx-button-shortcut {
-    max-width: max-content;
-    margin: 10px 0 0 0;
-    flex: 1 0 auto;
-}
-
-@media (min-width: 568px) and (max-height: 480px) {
-    .bx-button-shortcut {
-        margin: 8px 0 0 10px;
-    }
-}
--- a/src/assets/css/guide-menu.styl
+++ b/src/assets/css/guide-menu.styl
@ -1,10 +1,40 @@
+.bx-guide-home-achievements-progress {
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+
+    .bx-button {
+        margin-bottom: 0 !important;
+    }
+
+    html[data-xds-platform=tv] & {
+        flex-direction: column;
+    }
+
+    html:not([data-xds-platform=tv]) & {
+        flex-direction: row;
+
+        > button:first-of-type {
+            flex: 1;
+        }
+
+        > button:last-of-type {
+            width: 40px;
+
+            span {
+                display: none;
+            }
+        }
+    }
+}
+
 .bx-guide-home-buttons {
    > div {
        display: flex;
        flex-direction: row;
        gap: 12px;

-        body[data-media-type=tv] & {
+        html[data-xds-platform=tv] & {
            flex-direction: column;

            button {
@ -12,7 +42,7 @@
            }
        }

-        body:not([data-media-type=tv]) & {
+        html:not([data-xds-platform=tv]) & {
            button {
                span {
                    display: none;
--- a/src/assets/css/misc.styl
+++ b/src/assets/css/misc.styl
@ -0,0 +1,21 @@
+.bx-product-details-buttons {
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+
+    button {
+        max-width: max-content;
+        margin: 10px 0 0 0;
+        display: flex;
+    }
+}
+
+@media (min-width: 568px) and (max-height: 480px) {
+    .bx-product-details-buttons {
+        flex-direction: column;
+
+        button {
+            margin: 8px 0 0 10px;
+        }
+    }
+}
--- a/src/assets/css/navigation-dialog.styl
+++ b/src/assets/css/navigation-dialog.styl
@ -1,6 +1,11 @@
 .bx-navigation-dialog {
    position: absolute;
    z-index: var(--bx-navigation-dialog-z-index);
+    font-family: var(--bx-title-font);
+
+    *:focus {
+        outline: none !important;
+    }
 }

 .bx-navigation-dialog-overlay {
--- a/src/assets/css/remote-play.styl
+++ b/src/assets/css/remote-play.styl
@ -1,36 +1,16 @@
-.bx-remote-play-popup {
-    width: 100%;
-    max-width: 1920px;
-    margin: auto;
-    position: relative;
-    height: 0.1px;
-    overflow: visible;
-    z-index: var(--bx-remote-play-popup-z-index);
-}
-
 .bx-remote-play-container {
-    position: absolute;
-    right: 10px;
-    top: 0;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    color: white;
    background: #1a1b1e;
    border-radius: 10px;
    width: 420px;
    max-width: calc(100vw - 20px);
    margin: 0 0 0 auto;
    padding: 20px;
-    box-shadow: #00000080 0px 0px 12px 0px;
-
-    @media (min-width:480px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 32px);
-    }
-
-    @media (min-width:768px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 48px);
-    }
-
-    @media (min-width:1920px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 80px);
-    }

    > .bx-button {
        display: table;
@ -57,14 +37,6 @@
            font-size: 12px;
        }
    }
-
-    span {
-        font-weight: bold;
-        font-size: 18px;
-        display: block;
-        margin-bottom: 8px;
-        text-align: center;
-    }
 }

 .bx-remote-play-resolution {
@ -114,10 +86,15 @@

 .bx-remote-play-power-state {
    color: #888;
-    font-size: 14px;
+    font-size: 12px;
 }

 .bx-remote-play-connect-button {
    min-height: 100%;
    margin: 4px 0;
 }
+
+.bx-remote-play-buttons {
+    display: flex;
+    justify-content: space-between;
+}
--- a/src/assets/css/root.styl
+++ b/src/assets/css/root.styl
@ -37,8 +37,6 @@ button_color(name, normal, hover, active, disabled)
    --bx-navigation-dialog-z-index: 30100;
    --bx-navigation-dialog-overlay-z-index: 30000;

-    --bx-remote-play-popup-z-index: 20000;
-
    --bx-game-bar-z-index: 10000;
    --bx-screenshot-animation-z-index: 9000;
    --bx-wait-time-box-z-index: 1000;
--- a/src/assets/css/settings-dialog.styl
+++ b/src/assets/css/settings-dialog.styl
@ -130,7 +130,6 @@

        &:focus {
            border-color: #fff;
-            outline: none;
        }

        &[data-group=global] {
@ -234,11 +233,6 @@
        }
    }

-    &:focus,
-    *:focus {
-        outline: none !important;
-    }
-
    .bx-top-buttons {
        display: flex;
        flex-direction: column;
@ -306,6 +300,7 @@
        text-align: left;
        align-self: center;
        margin-bottom: 0 !important;
+        flex: 1;

        + * {
            margin: 0 0 0 auto;
--- a/src/assets/css/styles.styl
+++ b/src/assets/css/styles.styl
@ -16,3 +16,4 @@
@import 'game-bar.styl';
@import 'stream-stats.styl';
@import 'mkb.styl';
+@import 'misc.styl';
--- a/src/assets/css/web-components.styl
+++ b/src/assets/css/web-components.styl
@ -4,12 +4,16 @@
    flex: 0 1 auto;

    select {
-        display: none !important;
+        // Render offscreen instead of "display: none" so we could get its size
+        position: absolute !important;
+        top: -9999px !important;
+        left: -9999px !important;
+        visibility: hidden !important;
    }

    > div, button.bx-select-value {
-        min-width: 110px;
-        text-align: center;
+        min-width: 120px;
+        text-align: left;
        margin: 0 8px;
        line-height: 24px;
        vertical-align: middle;
@ -53,7 +57,7 @@

        span {
            flex: 1;
-            text-align: center;
+            text-align: left;
            display: inline-block;
        }

--- a/src/assets/svg/speaker-slash.svg
+++ b/src/assets/svg/speaker-slash.svg
@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' stroke='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M5.462 3.4c-.205-.23-.499-.363-.808-.363-.592 0-1.079.488-1.079 1.08a1.08 1.08 0 0 0 .289.736l4.247 4.672H2.504a2.17 2.17 0 0 0-2.16 2.16v8.637a2.17 2.17 0 0 0 2.16 2.16h6.107l9.426 7.33a1.08 1.08 0 0 0 .662.227c.592 0 1.08-.487 1.08-1.079v-6.601l5.679 6.247a1.08 1.08 0 0 0 .808.363c.592 0 1.08-.487 1.08-1.079a1.08 1.08 0 0 0-.29-.736L5.462 3.4zm-2.958 8.285h5.398v8.637H2.504v-8.637zM17.62 26.752l-7.558-5.878V11.67l7.558 8.313v6.769zm5.668-8.607c1.072-1.218 1.072-3.063 0-4.281a1.08 1.08 0 0 1-.293-.74c0-.592.487-1.079 1.079-1.079a1.08 1.08 0 0 1 .834.393 5.42 5.42 0 0 1 0 7.137 1.08 1.08 0 0 1-.81.365c-.593 0-1.08-.488-1.08-1.08 0-.263.096-.517.27-.715zM12.469 7.888c-.147-.19-.228-.423-.228-.663a1.08 1.08 0 0 1 .417-.853l5.379-4.184a1.08 1.08 0 0 1 .662-.227c.593 0 1.08.488 1.08 1.08v10.105c0 .593-.487 1.08-1.08 1.08s-1.079-.487-1.079-1.08V5.255l-3.636 2.834c-.469.362-1.153.273-1.515-.196v-.005zm19.187 8.115a10.79 10.79 0 0 1-2.749 7.199 1.08 1.08 0 0 1-.793.347c-.593 0-1.08-.487-1.08-1.079 0-.26.094-.511.264-.708 2.918-3.262 2.918-8.253 0-11.516-.184-.2-.287-.461-.287-.733 0-.592.487-1.08 1.08-1.08a1.08 1.08 0 0 1 .816.373 10.78 10.78 0 0 1 2.749 7.197z' fill-rule='nonzero'/>
+</svg>
--- a/src/index.ts
+++ b/src/index.ts
@ -16,7 +16,7 @@ import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
 import { TouchController } from "@modules/touch-controller";
 import { checkForUpdate, disablePwa, productTitleToSlug } from "@utils/utils";
 import { Patcher } from "@modules/patcher";
-import { RemotePlay } from "@modules/remote-play";
+import { RemotePlayManager } from "@/modules/remote-play-manager";
 import { onHistoryChanged, patchHistoryMethod } from "@utils/history";
 import { VibrationManager } from "@modules/vibration-manager";
 import { overridePreloadState } from "@utils/preload-state";
@ -67,8 +67,10 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
    // Stop loading
    window.stop();

-    // Show the reloading overlay
-    const css = compressCss(`
+    // We need to set it to an empty string first to work around Bun's bug
+    // https://github.com/oven-sh/bun/issues/12067
+    let css = '';
+    css += compressCss(`
 .bx-reload-overlay {
    position: fixed;
    top: 0;
@ -115,6 +117,7 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
        }, '🤓 ' + t('how-to-fix'));
    }

+    // Show the reloading overlay
    const $fragment = document.createDocumentFragment();
    $fragment.appendChild(CE('style', {}, css));
    $fragment.appendChild(CE('div',{
@ -157,7 +160,7 @@ document.addEventListener('readystatechange', e => {

    if (STATES.isSignedIn) {
        // Preload Remote Play
-        getPref(PrefKey.REMOTE_PLAY_ENABLED) && RemotePlay.preload();
+        getPref(PrefKey.REMOTE_PLAY_ENABLED) && RemotePlayManager.getInstance().initialize();
    } else {
        // Show Settings button in the header when not signed in
        window.setTimeout(HeaderSection.watchHeader, 2000);
@ -413,7 +416,7 @@ function main() {

    // Preload Remote Play
    if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
-        RemotePlay.detect();
+        RemotePlayManager.detect();
    }

    if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
--- a/src/modules/controller-shortcut.ts
+++ b/src/modules/controller-shortcut.ts
@ -314,6 +314,7 @@ export class ControllerShortcut {
        const $selectProfile = CE<HTMLSelectElement>('select', {class: 'bx-shortcut-profile', autocomplete: 'off'});

        const $profile = PREF_CONTROLLER_FRIENDLY_UI ? BxSelectElement.wrap($selectProfile) : $selectProfile;
+        $profile.classList.add('bx-full-width');

        const $container = CE('div', {
            'data-has-gamepad': 'false',
@ -390,6 +391,8 @@ export class ControllerShortcut {

            if (PREF_CONTROLLER_FRIENDLY_UI) {
                const $bxSelect = BxSelectElement.wrap($select);
+                $bxSelect.classList.add('bx-full-width');
+
                $div.appendChild($bxSelect);
                setNearby($row, {
                    focus: $bxSelect,
--- a/src/modules/game-bar/action-microphone.ts
+++ b/src/modules/game-bar/action-microphone.ts
@ -1,7 +1,6 @@
 import { BxEvent } from "@utils/bx-event";
 import { BxIcon } from "@utils/bx-icon";
 import { createButton, ButtonStyle, CE } from "@utils/html";
-import { t } from "@utils/translation";
 import { BaseGameBarAction } from "./action-base";
 import { MicrophoneShortcut, MicrophoneState } from "../shortcuts/shortcut-microphone";

@ -24,7 +23,6 @@ export class MicrophoneAction extends BaseGameBarAction {
        const $btnDefault = createButton({
            style: ButtonStyle.GHOST,
            icon: BxIcon.MICROPHONE,
-            title: t('show-touch-controller'),
            onClick: onClick,
            classes: ['bx-activated'],
        });
@ -32,7 +30,6 @@ export class MicrophoneAction extends BaseGameBarAction {
        const $btnMuted = createButton({
            style: ButtonStyle.GHOST,
            icon: BxIcon.MICROPHONE_MUTED,
-            title: t('hide-touch-controller'),
            onClick: onClick,
        });

--- a/src/modules/game-bar/action-speaker.ts
+++ b/src/modules/game-bar/action-speaker.ts
@ -0,0 +1,54 @@
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { BaseGameBarAction } from "./action-base";
+import { SoundShortcut, SpeakerState } from "../shortcuts/shortcut-sound";
+
+
+export class SpeakerAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    constructor() {
+        super();
+
+        const onClick = (e: Event) => {
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+            SoundShortcut.muteUnmute();
+        };
+
+        const $btnEnable = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.AUDIO,
+            onClick: onClick,
+        });
+
+        const $btnMuted = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.SPEAKER_MUTED,
+            onClick: onClick,
+            classes: ['bx-activated'],
+        });
+
+        this.$content = CE('div', {},
+            $btnEnable,
+            $btnMuted,
+        );
+
+        this.reset();
+
+        window.addEventListener(BxEvent.SPEAKER_STATE_CHANGED, e => {
+            const speakerState = (e as any).speakerState;
+            const enabled = speakerState === SpeakerState.ENABLED;
+
+            this.$content.dataset.enabled = enabled.toString();
+        });
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+
+    reset(): void {
+        this.$content.dataset.enabled = 'true';
+    }
+}
--- a/src/modules/game-bar/action-touch-control.ts
+++ b/src/modules/game-bar/action-touch-control.ts
@ -26,7 +26,6 @@ export class TouchControlAction extends BaseGameBarAction {
            icon: BxIcon.TOUCH_CONTROL_ENABLE,
            title: t('show-touch-controller'),
            onClick: onClick,
-            classes: ['bx-activated'],
        });

        const $btnDisable = createButton({
@ -34,6 +33,7 @@ export class TouchControlAction extends BaseGameBarAction {
            icon: BxIcon.TOUCH_CONTROL_DISABLE,
            title: t('hide-touch-controller'),
            onClick: onClick,
+            classes: ['bx-activated'],
        });

        this.$content = CE('div', {},
--- a/src/modules/game-bar/game-bar.ts
+++ b/src/modules/game-bar/game-bar.ts
@ -1,4 +1,4 @@
-import { CE, createSvgIcon } from "@utils/html";
+import { CE, clearFocus, createSvgIcon } from "@utils/html";
 import { ScreenshotAction } from "./action-screenshot";
 import { TouchControlAction } from "./action-touch-control";
 import { BxEvent } from "@utils/bx-event";
@ -9,6 +9,7 @@ import { MicrophoneAction } from "./action-microphone";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
 import { TrueAchievementsAction } from "./action-true-achievements";
+import { SpeakerAction } from "./action-speaker";


 export class GameBar {
@ -43,8 +44,9 @@ export class GameBar {
        this.actions = [
            new ScreenshotAction(),
            ...(STATES.userAgent.capabilities.touch && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== StreamTouchController.OFF) ? [new TouchControlAction()] : []),
-            new TrueAchievementsAction(),
+            new SpeakerAction(),
            new MicrophoneAction(),
+            new TrueAchievementsAction(),
        ];

        // Reverse the action list if Game Bar's position is on the right side
@ -76,7 +78,7 @@ export class GameBar {
        $container.addEventListener('transitionend', e => {
            const classList = $container.classList;
            if (classList.contains('bx-hide')) {
-                classList.remove('bx-offscreen', 'bx-hide');
+                classList.remove('bx-hide');
                classList.add('bx-offscreen');
            }
        });
@ -133,6 +135,11 @@ export class GameBar {
    }

    hideBar() {
+        this.clearHideTimeout();
+
+        // Stop focusing Game Bar
+        clearFocus();
+
        if (!this.$container) {
            return;
        }
--- a/src/modules/loading-screen.ts
+++ b/src/modules/loading-screen.ts
@ -44,7 +44,7 @@ export class LoadingScreen {
    static #hideRocket() {
        let $bgStyle = LoadingScreen.#$bgStyle;

-        const css = compressCss(`
+        $bgStyle.textContent! += compressCss(`
 #game-stream div[class*=RocketAnimation-module__container] > svg {
    display: none;
 }
@ -53,7 +53,6 @@ export class LoadingScreen {
    display: none;
 }
 `);
-        $bgStyle.textContent! += css;
    }

    static #setBackground(imageUrl: string) {
@ -63,7 +62,7 @@ export class LoadingScreen {
        // Limit max width to reduce image size
        imageUrl = imageUrl + '?w=1920';

-        const css = compressCss(`
+        $bgStyle.textContent! += compressCss(`
 #game-stream {
    background-color: transparent !important;
    background-position: center center !important;
@ -75,7 +74,6 @@ export class LoadingScreen {
    transition: opacity 0.3s ease-in-out !important;
 }
 `) + `#game-stream {background-image: linear-gradient(#00000033, #000000e6), url(${imageUrl}) !important;}`;
-        $bgStyle.textContent! += css;

        const bg = new Image();
        bg.onload = e => {
--- a/src/modules/patcher.ts
+++ b/src/modules/patcher.ts
@ -54,7 +54,7 @@ const LOG_TAG = 'Patcher';
 const PATCHES = {
    // Disable ApplicationInsights.track() function
    disableAiTrack(str: string) {
-        const text = '.track=function(';
+        let text = '.track=function(';
        const index = str.indexOf(text);
        if (index < 0) {
            return false;
@ -69,7 +69,7 @@ const PATCHES = {

    // Set disableTelemetry() to true
    disableTelemetry(str: string) {
-        const text = '.disableTelemetry=function(){return!1}';
+        let text = '.disableTelemetry=function(){return!1}';
        if (!str.includes(text)) {
            return false;
        }
@ -78,7 +78,7 @@ const PATCHES = {
    },

    disableTelemetryProvider(str: string) {
-        const text = 'this.enableLightweightTelemetry=!';
+        let text = 'this.enableLightweightTelemetry=!';
        if (!str.includes(text)) {
            return false;
        }
@ -99,7 +99,7 @@ const PATCHES = {

    // Disable IndexDB logging
    disableIndexDbLogging(str: string) {
-        const text = ',this.logsDb=new';
+        let text = ',this.logsDb=new';
        if (!str.includes(text)) {
            return false;
        }
@ -111,7 +111,7 @@ const PATCHES = {

    // Set custom website layout
    websiteLayout(str: string) {
-        const text = '?"tv":"default"';
+        let text = '?"tv":"default"';
        if (!str.includes(text)) {
            return false;
        }
@ -131,7 +131,7 @@ const PATCHES = {
    },

    remotePlayKeepAlive(str: string) {
-        const text = 'onServerDisconnectMessage(e){';
+        let text = 'onServerDisconnectMessage(e){';
        if (!str.includes(text)) {
            return false;
        }
@ -143,7 +143,7 @@ const PATCHES = {

    // Enable Remote Play feature
    remotePlayConnectMode(str: string) {
-        const text = 'connectMode:"cloud-connect",';
+        let text = 'connectMode:"cloud-connect",';
        if (!str.includes(text)) {
            return false;
        }
@ -151,25 +151,44 @@ const PATCHES = {
        return str.replace(text, codeRemotePlayEnable);
    },

-    // Disable achievement toast in Remote Play
+    // Remote Play: Disable achievement toast
    remotePlayDisableAchievementToast(str: string) {
-        const text = '.AchievementUnlock:{';
+        let text = '.AchievementUnlock:{';
        if (!str.includes(text)) {
            return false;
        }

-        const newCode = `
-if (!!window.BX_REMOTE_PLAY_CONFIG) {
-    return;
-}
-`;
-
+        const newCode = `if (!!window.BX_REMOTE_PLAY_CONFIG) return;`;
        return str.replace(text, text + newCode);
    },

+    // Remote Play: Prevent adding "Fortnite" to the "Jump back in" list
+    remotePlayRecentlyUsedTitleIds(str: string) {
+        let text = '(e.data.recentlyUsedTitleIds)){';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `if (window.BX_REMOTE_PLAY_CONFIG) return;`;
+        return str.replace(text, text + newCode);
+    },
+
+    // Remote Play: change web page's title
+    /*
+    remotePlayWebTitle(str: string) {
+        let text = '"undefined"!==typeof e&&document.title!==e';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `if (window.BX_REMOTE_PLAY_CONFIG) { e = "${t('remote-play')} - ${t('better-xcloud')}"; }`;
+        return str.replace(text, newCode + text);
+    },
+    */
+
    // Block WebRTC stats collector
    blockWebRtcStatsCollector(str: string) {
-        const text = 'this.shouldCollectStats=!0';
+        let text = 'this.shouldCollectStats=!0';
        if (!str.includes(text)) {
            return false;
        }
@ -210,7 +229,7 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
    },

    enableXcloudLogger(str: string) {
-        const text = 'this.telemetryProvider=e}log(e,t,r){';
+        let text = 'this.telemetryProvider=e}log(e,t,r){';
        if (!str.includes(text)) {
            return false;
        }
@ -226,7 +245,7 @@ logFunc(logTag, '//', logMessage);
    },

    enableConsoleLogging(str: string) {
-        const text = 'static isConsoleLoggingAllowed(){';
+        let text = 'static isConsoleLoggingAllowed(){';
        if (!str.includes(text)) {
            return false;
        }
@ -237,7 +256,7 @@ logFunc(logTag, '//', logMessage);

    // Control controller vibration
    playVibration(str: string) {
-        const text = '}playVibration(e){';
+        let text = '}playVibration(e){';
        if (!str.includes(text)) {
            return false;
        }
@ -278,7 +297,7 @@ logFunc(logTag, '//', logMessage);
    },

    patchUpdateInputConfigurationAsync(str: string) {
-        const text = 'async updateInputConfigurationAsync(e){';
+        let text = 'async updateInputConfigurationAsync(e){';
        if (!str.includes(text)) {
            return false;
        }
@ -291,7 +310,7 @@ logFunc(logTag, '//', logMessage);

    // Add patches that are only needed when start playing
    loadingEndingChunks(str: string) {
-        const text = '"FamilySagaManager"';
+        let text = '"FamilySagaManager"';
        if (!str.includes(text)) {
            return false;
        }
@ -316,7 +335,7 @@ logFunc(logTag, '//', logMessage);
    },

    exposeTouchLayoutManager(str: string) {
-        const text = 'this._perScopeLayoutsStream=new';
+        let text = 'this._perScopeLayoutsStream=new';
        if (!str.includes(text)) {
            return false;
        }
@ -363,7 +382,7 @@ if (window.BX_EXPOSED.stopTakRendering) {
    },

    supportLocalCoOp(str: string) {
-        const text = 'this.gamepadMappingsToSend=[],';
+        let text = 'this.gamepadMappingsToSend=[],';
        if (!str.includes(text)) {
            return false;
        }
@ -375,7 +394,7 @@ if (window.BX_EXPOSED.stopTakRendering) {
    },

    forceFortniteConsole(str: string) {
-        const text = 'sendTouchInputEnabledMessage(e){';
+        let text = 'sendTouchInputEnabledMessage(e){';
        if (!str.includes(text)) {
            return false;
        }
@ -387,7 +406,7 @@ if (window.BX_EXPOSED.stopTakRendering) {
    },

    disableTakRenderer(str: string) {
-        const text = 'const{TakRenderer:';
+        let text = 'const{TakRenderer:';
        if (!str.includes(text)) {
            return false;
        }
@ -427,7 +446,7 @@ if (titleInfo && !titleInfo.details.hasTouchSupport && !titleInfo.details.hasFak
    },

    streamCombineSources(str: string) {
-        const text = 'this.useCombinedAudioVideoStream=!!this.deviceInformation.isTizen';
+        let text = 'this.useCombinedAudioVideoStream=!!this.deviceInformation.isTizen';
        if (!str.includes(text)) {
            return false;
        }
@ -437,7 +456,7 @@ if (titleInfo && !titleInfo.details.hasTouchSupport && !titleInfo.details.hasFak
    },

    patchStreamHud(str: string) {
-        const text = 'let{onCollapse';
+        let text = 'let{onCollapse';
        if (!str.includes(text)) {
            return false;
        }
@ -459,7 +478,7 @@ e.guideUI = null;
    },

    broadcastPollingMode(str: string) {
-        const text = '.setPollingMode=e=>{';
+        let text = '.setPollingMode=e=>{';
        if (!str.includes(text)) {
            return false;
        }
@ -483,7 +502,7 @@ BxEvent.dispatch(window, BxEvent.XCLOUD_POLLING_MODE_CHANGED, {mode: e.toLowerCa
    },

    patchXcloudTitleInfo(str: string) {
-        const text = 'async cloudConnect';
+        let text = 'async cloudConnect';
        let index = str.indexOf(text);
        if (index < 0) {
            return false;
@ -505,7 +524,7 @@ BxLogger.info('patchXcloudTitleInfo', ${titleInfoVar});
    },

    patchRemotePlayMkb(str: string) {
-        const text = 'async homeConsoleConnect';
+        let text = 'async homeConsoleConnect';
        let index = str.indexOf(text);
        if (index < 0) {
            return false;
@ -533,7 +552,7 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});
    },

    patchAudioMediaStream(str: string) {
-        const text = '.srcObject=this.audioMediaStream,';
+        let text = '.srcObject=this.audioMediaStream,';
        if (!str.includes(text)) {
            return false;
        }
@ -545,7 +564,7 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});
    },

    patchCombinedAudioVideoMediaStream(str: string) {
-        const text = '.srcObject=this.combinedAudioVideoStream';
+        let text = '.srcObject=this.combinedAudioVideoStream';
        if (!str.includes(text)) {
            return false;
        }
@ -556,7 +575,7 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});
    },

    patchTouchControlDefaultOpacity(str: string) {
-        const text = 'opacityMultiplier:1';
+        let text = 'opacityMultiplier:1';
        if (!str.includes(text)) {
            return false;
        }
@ -568,7 +587,7 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});
    },

    patchShowSensorControls(str: string) {
-        const text = '{shouldShowSensorControls:';
+        let text = '{shouldShowSensorControls:';
        if (!str.includes(text)) {
            return false;
        }
@ -581,7 +600,7 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});

    /*
    exposeEventTarget(str: string) {
-        const text ='this._eventTarget=new EventTarget';
+        let text ='this._eventTarget=new EventTarget';
        if (!str.includes(text)) {
            return false;
        }
@ -598,7 +617,7 @@ window.dispatchEvent(new Event('${BxEvent.STREAM_EVENT_TARGET_READY}'))

    // Class with: connectAsync(), doConnectAsync(), setPlayClient()
    exposeStreamSession(str: string) {
-        const text =',this._connectionType=';
+        let text =',this._connectionType=';
        if (!str.includes(text)) {
            return false;
        }
@ -612,7 +631,7 @@ true` + text;
    },

    skipFeedbackDialog(str: string) {
-        const text = '&&this.shouldTransitionToFeedback(';
+        let text = '&&this.shouldTransitionToFeedback(';
        if (!str.includes(text)) {
            return false;
        }
@ -622,7 +641,7 @@ true` + text;
    },

    enableNativeMkb(str: string) {
-        const text = 'e.mouseSupported&&e.keyboardSupported&&e.fullscreenSupported;';
+        let text = 'e.mouseSupported&&e.keyboardSupported&&e.fullscreenSupported;';
        if ((!str.includes(text))) {
            return false;
        }
@ -632,7 +651,7 @@ true` + text;
    },

    patchMouseAndKeyboardEnabled(str: string) {
-        const text = 'get mouseAndKeyboardEnabled(){';
+        let text = 'get mouseAndKeyboardEnabled(){';
        if (!str.includes(text)) {
            return false;
        }
@ -642,7 +661,7 @@ true` + text;
    },

    exposeInputSink(str: string) {
-        const text = 'this.controlChannel=null,this.inputChannel=null';
+        let text = 'this.controlChannel=null,this.inputChannel=null';
        if (!str.includes(text)) {
            return false;
        }
@ -654,7 +673,7 @@ true` + text;
    },

    disableNativeRequestPointerLock(str: string) {
-        const text = 'async requestPointerLock(){';
+        let text = 'async requestPointerLock(){';
        if (!str.includes(text)) {
            return false;
        }
@ -665,7 +684,7 @@ true` + text;

    // Fix crashing when RequestInfo.origin is empty
    patchRequestInfoCrash(str: string) {
-        const text = 'if(!e)throw new Error("RequestInfo.origin is falsy");';
+        let text = 'if(!e)throw new Error("RequestInfo.origin is falsy");';
        if (!str.includes(text)) {
            return false;
        }
@ -675,7 +694,7 @@ true` + text;
    },

    exposeDialogRoutes(str: string) {
-        const text = 'return{goBack:function(){';
+        let text = 'return{goBack:function(){';
        if (!str.includes(text)) {
            return false;
        }
@ -830,7 +849,7 @@ if (e && e.id) {

    // Override Storage.getSettings()
    overrideStorageGetSettings(str: string) {
-        const text = '}getSetting(e){';
+        let text = '}getSetting(e){';
        if (!str.includes(text)) {
            return false;
        }
@ -894,7 +913,7 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
    },

    detectBrowserRouterReady(str: string) {
-        const text = 'BrowserRouter:()=>';
+        let text = 'BrowserRouter:()=>';
        if (!str.includes(text)) {
            return false;
        }
@ -912,6 +931,26 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
        str = PatcherUtils.insertAt(str, index, 'window.BxEvent.dispatch(window, window.BxEvent.XCLOUD_ROUTER_HISTORY_READY, {history: this.history});');
        return str;
    },
+
+    // Set Achievements list's filter default to "Locked"
+    guideAchievementsDefaultLocked(str: string) {
+        let index = str.indexOf('FilterButton-module__container');
+        index >= 0 && (index = PatcherUtils.lastIndexOf(str, '.All', index, 150));
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.replaceWith(str, index, '.All', '.Locked');
+
+        index = str.indexOf('"Guide_Achievements_Unlocked_Empty","Guide_Achievements_Locked_Empty"');
+        index >= 0 && (index = PatcherUtils.indexOf(str, '.All', index, 250));
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.replaceWith(str, index, '.All', '.Locked');
+        return str;
+    }
 };

 let PATCH_ORDERS: PatchArray = [
@ -933,6 +972,8 @@ let PATCH_ORDERS: PatchArray = [
    'exposeStreamSession',
    'exposeDialogRoutes',

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

@ -962,6 +1003,7 @@ let PATCH_ORDERS: PatchArray = [
        'remotePlayKeepAlive',
        'remotePlayDirectConnectUrl',
        'remotePlayDisableAchievementToast',
+        'remotePlayRecentlyUsedTitleIds',
        STATES.userAgent.capabilities.touch && 'patchUpdateInputConfigurationAsync',
    ] : []),

--- a/src/modules/remote-play-manager.ts
+++ b/src/modules/remote-play-manager.ts
@ -0,0 +1,232 @@
+import { STATES, AppInterface } from "@utils/global";
+import { Toast } from "@utils/toast";
+import { BxEvent } from "@utils/bx-event";
+import { t } from "@utils/translation";
+import { localRedirect } from "@modules/ui/ui";
+import { BxLogger } from "@utils/bx-logger";
+import { HeaderSection } from "./ui/header";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
+import { RemotePlayNavigationDialog } from "./ui/dialog/remote-play-dialog";
+
+const LOG_TAG = 'RemotePlay';
+
+export const enum RemotePlayConsoleState {
+    ON = 'On',
+    OFF = 'Off',
+    STANDBY = 'ConnectedStandby',
+    UNKNOWN = 'Unknown',
+}
+
+type RemotePlayRegion = {
+    name: string;
+    baseUri: string;
+    isDefault: boolean;
+};
+
+type RemotePlayConsole = {
+    deviceName: string;
+    serverId: string;
+    powerState: RemotePlayConsoleState;
+    consoleType: string;
+    // playPath: string;
+    // outOfHomeWarning: string;
+    // wirelessWarning: string;
+    // isDevKit: string;
+};
+
+export class RemotePlayManager {
+    private static instance: RemotePlayManager;
+    public static getInstance(): RemotePlayManager {
+        if (!this.instance) {
+            this.instance = new RemotePlayManager();
+        }
+
+        return this.instance;
+    }
+
+    private isInitialized = false;
+
+    private XCLOUD_TOKEN!: string;
+    private XHOME_TOKEN!: string;
+
+    private consoles!: Array<RemotePlayConsole>;
+    private regions: Array<RemotePlayRegion> = [];
+
+    initialize() {
+        if (this.isInitialized) {
+            return;
+        }
+
+        this.isInitialized = true;
+
+        this.getXhomeToken(() => {
+            this.getConsolesList(() => {
+                BxLogger.info(LOG_TAG, 'Consoles', this.consoles);
+
+                STATES.supportedRegion && HeaderSection.showRemotePlayButton();
+                BxEvent.dispatch(window, BxEvent.REMOTE_PLAY_READY);
+            });
+        });
+    }
+
+    get xcloudToken() {
+        return this.XCLOUD_TOKEN;
+    }
+
+    set xcloudToken(token: string) {
+        this.XCLOUD_TOKEN = token;
+    }
+
+    get xhomeToken() {
+        return this.XHOME_TOKEN;
+    }
+
+    getConsoles() {
+        return this.consoles;
+    }
+
+
+    private getXhomeToken(callback: any) {
+        if (this.XHOME_TOKEN) {
+            callback();
+            return;
+        }
+
+        let GSSV_TOKEN;
+        try {
+            GSSV_TOKEN = JSON.parse(localStorage.getItem('xboxcom_xbl_user_info')!).tokens['http://gssv.xboxlive.com/'].token;
+        } catch (e) {
+            for (let i = 0; i < localStorage.length; i++){
+                const key = localStorage.key(i)!;
+                if (!key.startsWith('Auth.User.')) {
+                    continue;
+                }
+
+                const json = JSON.parse(localStorage.getItem(key)!);
+                for (const token of json.tokens) {
+                    if (!token.relyingParty.includes('gssv.xboxlive.com')) {
+                        continue;
+                    }
+
+                    GSSV_TOKEN = token.tokenData.token;
+                    break;
+                }
+
+                break;
+            }
+        }
+
+        const request = new Request('https://xhome.gssv-play-prod.xboxlive.com/v2/login/user', {
+            method: 'POST',
+            body: JSON.stringify({
+                offeringId: 'xhome',
+                token: GSSV_TOKEN,
+            }),
+            headers: {
+                'Content-Type': 'application/json; charset=utf-8',
+            },
+        });
+
+        fetch(request).then(resp => resp.json())
+            .then(json => {
+                this.regions = json.offeringSettings.regions;
+                this.XHOME_TOKEN = json.gsToken;
+                callback();
+            });
+    }
+
+    private async getConsolesList(callback: any) {
+        if (this.consoles) {
+            callback();
+            return;
+        }
+
+        const options = {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${this.XHOME_TOKEN}`,
+                },
+            };
+
+        // Test servers one by one
+        for (const region of this.regions) {
+            try {
+                const request = new Request(`${region.baseUri}/v6/servers/home?mr=50`, options);
+                const resp = await fetch(request);
+
+                const json = await resp.json();
+                if (json.results.length === 0) {
+                    continue;
+                }
+
+                this.consoles = json.results;
+
+                // Store working server
+                STATES.remotePlay.server = region.baseUri;
+
+                break;
+            } catch (e) {}
+        }
+
+        // None of the servers worked
+        if (!STATES.remotePlay.server) {
+            this.consoles = [];
+        }
+
+        callback();
+    }
+
+    play(serverId: string, resolution?: string) {
+        if (resolution) {
+            setPref(PrefKey.REMOTE_PLAY_RESOLUTION, resolution);
+        }
+
+        STATES.remotePlay.config = {
+            serverId: serverId,
+        };
+        window.BX_REMOTE_PLAY_CONFIG = STATES.remotePlay.config;
+
+        localRedirect('/launch/fortnite/BT5P2X999VH2#remote-play');
+    }
+
+    togglePopup(force = null) {
+        if (!this.isReady()) {
+            Toast.show(t('getting-consoles-list'));
+            return;
+        }
+
+        if (this.consoles.length === 0) {
+            Toast.show(t('no-consoles-found'), '', {instant: true});
+            return;
+        }
+
+        // Show native dialog in Android app
+        if (AppInterface && AppInterface.showRemotePlayDialog) {
+            AppInterface.showRemotePlayDialog(JSON.stringify(this.consoles));
+            (document.activeElement as HTMLElement).blur();
+            return;
+        }
+
+        RemotePlayNavigationDialog.getInstance().show();
+    }
+
+    static detect() {
+        if (!getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
+            return;
+        }
+
+        STATES.remotePlay.isPlaying = window.location.pathname.includes('/launch/') && window.location.hash.startsWith('#remote-play');
+        if (STATES.remotePlay?.isPlaying) {
+            window.BX_REMOTE_PLAY_CONFIG = STATES.remotePlay.config;
+            // Remove /launch/... from URL
+            window.history.replaceState({origin: 'better-xcloud'}, '', 'https://www.xbox.com/' + location.pathname.substring(1, 6) + '/play');
+        } else {
+            window.BX_REMOTE_PLAY_CONFIG = null;
+        }
+    }
+
+    isReady() {
+        return this.consoles !== null;
+    }
+}
--- a/src/modules/remote-play.ts
+++ b/src/modules/remote-play.ts
@ -1,364 +0,0 @@
-import { STATES, AppInterface } from "@utils/global";
-import { CE, createButton, ButtonStyle } from "@utils/html";
-import { BxIcon } from "@utils/bx-icon";
-import { Toast } from "@utils/toast";
-import { BxEvent } from "@utils/bx-event";
-import { t } from "@utils/translation";
-import { localRedirect } from "@modules/ui/ui";
-import { BxLogger } from "@utils/bx-logger";
-import { HeaderSection } from "./ui/header";
-import { PrefKey } from "@/enums/pref-keys";
-import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
-
-const LOG_TAG = 'RemotePlay';
-
-const enum RemotePlayConsoleState {
-    ON = 'On',
-    OFF = 'Off',
-    STANDBY = 'ConnectedStandby',
-    UNKNOWN = 'Unknown',
-}
-
-type RemotePlayRegion = {
-    name: string;
-    baseUri: string;
-    isDefault: boolean;
-};
-
-type RemotePlayConsole = {
-    deviceName: string;
-    serverId: string;
-    powerState: RemotePlayConsoleState;
-    consoleType: string;
-    // playPath: string;
-    // outOfHomeWarning: string;
-    // wirelessWarning: string;
-    // isDevKit: string;
-};
-
-export class RemotePlay {
-    static XCLOUD_TOKEN: string;
-    static XHOME_TOKEN: string;
-    static #CONSOLES: Array<RemotePlayConsole>;
-    static #REGIONS: Array<RemotePlayRegion>;
-
-    static readonly #STATE_LABELS: {[key in RemotePlayConsoleState]: string} = {
-        [RemotePlayConsoleState.ON]: t('powered-on'),
-        [RemotePlayConsoleState.OFF]: t('powered-off'),
-        [RemotePlayConsoleState.STANDBY]: t('standby'),
-        [RemotePlayConsoleState.UNKNOWN]: t('unknown'),
-    };
-
-    static readonly BASE_DEVICE_INFO = {
-        appInfo: {
-            env: {
-                clientAppId: window.location.host,
-                clientAppType: 'browser',
-                clientAppVersion: '24.17.36',
-                clientSdkVersion: '10.1.14',
-                httpEnvironment: 'prod',
-                sdkInstallId: '',
-            },
-        },
-        dev: {
-            displayInfo: {
-                dimensions: {
-                    widthInPixels: 1920,
-                    heightInPixels: 1080,
-                },
-                pixelDensity: {
-                    dpiX: 1,
-                    dpiY: 1,
-                },
-            },
-            hw: {
-                make: 'Microsoft',
-                model: 'unknown',
-                sdktype: 'web',
-            },
-            os: {
-                name: 'windows',
-                ver: '22631.2715',
-                platform: 'desktop',
-            },
-            browser: {
-                browserName: 'chrome',
-                browserVersion: '125.0',
-            },
-        },
-    };
-
-    static #$content: HTMLElement;
-
-    static #initialize() {
-        if (RemotePlay.#$content) {
-            return;
-        }
-
-        RemotePlay.#$content = CE('div', {}, t('getting-consoles-list'));
-        RemotePlay.#getXhomeToken(() => {
-            RemotePlay.#getConsolesList(() => {
-                BxLogger.info(LOG_TAG, 'Consoles', RemotePlay.#CONSOLES);
-                if (RemotePlay.#CONSOLES && RemotePlay.#CONSOLES.length > 0) {
-                    STATES.supportedRegion && HeaderSection.showRemotePlayButton();
-                }
-
-                RemotePlay.#renderConsoles();
-                BxEvent.dispatch(window, BxEvent.REMOTE_PLAY_READY);
-            });
-        });
-    }
-
-    static #renderConsoles() {
-        const $fragment = CE('div', {'class': 'bx-remote-play-container'});
-
-        if (!RemotePlay.#CONSOLES || RemotePlay.#CONSOLES.length === 0) {
-            $fragment.appendChild(CE('span', {}, t('no-consoles-found')));
-            RemotePlay.#$content = CE('div', {}, $fragment);
-            return;
-        }
-
-        const $settingNote = CE('p', {});
-
-        const resolutions = [1080, 720];
-        const currentResolution = getPref(PrefKey.REMOTE_PLAY_RESOLUTION);
-        const $resolutionGroup = CE('div', {});
-        for (const resolution of resolutions) {
-            const value = `${resolution}p`;
-            const id = `bx_radio_xhome_resolution_${resolution}`;
-
-            const $radio = CE<HTMLInputElement>('input', {
-                'type': 'radio',
-                'value': value,
-                'id': id,
-                'name': 'bx_radio_xhome_resolution',
-            }, value);
-
-            $radio.addEventListener('change', e => {
-                const value = (e.target as HTMLInputElement).value;
-
-                $settingNote.textContent = value === '1080p' ? '✅ ' + t('can-stream-xbox-360-games') : '❌ ' + t('cant-stream-xbox-360-games');
-                setPref(PrefKey.REMOTE_PLAY_RESOLUTION, value);
-            });
-
-            const $label = CE('label', {
-                'for': id,
-                'class': 'bx-remote-play-resolution',
-            }, $radio, `${resolution}p`);
-
-            $resolutionGroup.appendChild($label);
-
-            if (currentResolution === value) {
-                $radio.checked = true;
-                $radio.dispatchEvent(new Event('change'));
-            }
-        }
-
-        const $qualitySettings = CE('div', {'class': 'bx-remote-play-settings'},
-                                    CE('div', {},
-                                       CE('label', {}, t('target-resolution'), $settingNote),
-                                       $resolutionGroup,
-                                      )
-                                   );
-
-        $fragment.appendChild($qualitySettings);
-
-        // Render concoles list
-        for (let con of RemotePlay.#CONSOLES) {
-            const $child = CE('div', {'class': 'bx-remote-play-device-wrapper'},
-                CE('div', {'class': 'bx-remote-play-device-info'},
-                    CE('div', {},
-                        CE('span', {'class': 'bx-remote-play-device-name'}, con.deviceName),
-                        CE('span', {'class': 'bx-remote-play-console-type'}, con.consoleType.replace('Xbox', ''))
-                    ),
-                    CE('div', {'class': 'bx-remote-play-power-state'}, RemotePlay.#STATE_LABELS[con.powerState]),
-                ),
-
-                // Connect button
-                createButton({
-                    classes: ['bx-remote-play-connect-button'],
-                    label: t('console-connect'),
-                    style: ButtonStyle.PRIMARY | ButtonStyle.FOCUSABLE,
-                    onClick: e => {
-                            RemotePlay.play(con.serverId);
-                        },
-                }),
-            );
-
-            $fragment.appendChild($child);
-        }
-
-        // Add Help button
-        $fragment.appendChild(createButton({
-            icon: BxIcon.QUESTION,
-            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
-            url: 'https://better-xcloud.github.io/remote-play',
-            label: t('help'),
-        }));
-
-        RemotePlay.#$content = CE('div', {}, $fragment);
-    }
-
-    static #getXhomeToken(callback: any) {
-        if (RemotePlay.XHOME_TOKEN) {
-            callback();
-            return;
-        }
-
-        let GSSV_TOKEN;
-        try {
-            GSSV_TOKEN = JSON.parse(localStorage.getItem('xboxcom_xbl_user_info')!).tokens['http://gssv.xboxlive.com/'].token;
-        } catch (e) {
-            for (let i = 0; i < localStorage.length; i++){
-                const key = localStorage.key(i)!;
-                if (!key.startsWith('Auth.User.')) {
-                    continue;
-                }
-
-                const json = JSON.parse(localStorage.getItem(key)!);
-                for (const token of json.tokens) {
-                    if (!token.relyingParty.includes('gssv.xboxlive.com')) {
-                        continue;
-                    }
-
-                    GSSV_TOKEN = token.tokenData.token;
-                    break;
-                }
-
-                break;
-            }
-        }
-
-        const request = new Request('https://xhome.gssv-play-prod.xboxlive.com/v2/login/user', {
-                method: 'POST',
-                body: JSON.stringify({
-                    offeringId: 'xhome',
-                    token: GSSV_TOKEN,
-                }),
-                headers: {
-                    'Content-Type': 'application/json; charset=utf-8',
-                },
-            });
-        fetch(request).then(resp => resp.json())
-            .then(json => {
-                RemotePlay.#REGIONS = json.offeringSettings.regions;
-                RemotePlay.XHOME_TOKEN = json.gsToken;
-                callback();
-            });
-    }
-
-    static async #getConsolesList(callback: any) {
-        if (RemotePlay.#CONSOLES) {
-            callback();
-            return;
-        }
-
-        const options = {
-                method: 'GET',
-                headers: {
-                    'Authorization': `Bearer ${RemotePlay.XHOME_TOKEN}`,
-                },
-            };
-
-        // Test servers one by one
-        for (const region of RemotePlay.#REGIONS) {
-            try {
-                const request = new Request(`${region.baseUri}/v6/servers/home?mr=50`, options);
-                const resp = await fetch(request);
-
-                const json = await resp.json();
-                RemotePlay.#CONSOLES = json.results;
-
-                // Store working server
-                STATES.remotePlay.server = region.baseUri;
-
-                callback();
-            } catch (e) {}
-
-            if (RemotePlay.#CONSOLES) {
-                break;
-            }
-        }
-
-        // None of the servers worked
-        if (!STATES.remotePlay.server) {
-            RemotePlay.#CONSOLES = [];
-        }
-    }
-
-    static play(serverId: string, resolution?: string) {
-        if (resolution) {
-            setPref(PrefKey.REMOTE_PLAY_RESOLUTION, resolution);
-        }
-
-        STATES.remotePlay.config = {
-            serverId: serverId,
-        };
-        window.BX_REMOTE_PLAY_CONFIG = STATES.remotePlay.config;
-
-        localRedirect('/launch/fortnite/BT5P2X999VH2#remote-play');
-        RemotePlay.detachPopup();
-    }
-
-    static preload() {
-        RemotePlay.#initialize();
-    }
-
-    static detachPopup() {
-        // Detach popup from body
-        const $popup = document.querySelector('.bx-remote-play-popup');
-        $popup && $popup.remove();
-    }
-
-    static togglePopup(force = null) {
-        if (!getPref(PrefKey.REMOTE_PLAY_ENABLED) || !RemotePlay.isReady()) {
-            Toast.show(t('getting-consoles-list'));
-            return;
-        }
-
-        RemotePlay.#initialize();
-
-        if (AppInterface && AppInterface.showRemotePlayDialog) {
-            AppInterface.showRemotePlayDialog(JSON.stringify(RemotePlay.#CONSOLES));
-            (document.activeElement as HTMLElement).blur();
-            return;
-        }
-
-        if (document.querySelector('.bx-remote-play-popup')) {
-            if (force === false) {
-                RemotePlay.#$content.classList.add('bx-gone');
-            } else {
-                RemotePlay.#$content.classList.toggle('bx-gone');
-            }
-            return;
-        }
-
-        const $header = document.querySelector('#gamepass-root header')!;
-
-        const group = $header.firstElementChild!.getAttribute('data-group')!;
-        RemotePlay.#$content.setAttribute('data-group', group);
-        RemotePlay.#$content.classList.add('bx-remote-play-popup');
-        RemotePlay.#$content.classList.remove('bx-gone');
-
-        $header.insertAdjacentElement('afterend', RemotePlay.#$content);
-    }
-
-    static detect() {
-        if (!getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
-            return;
-        }
-
-        STATES.remotePlay.isPlaying = window.location.pathname.includes('/launch/') && window.location.hash.startsWith('#remote-play');
-        if (STATES.remotePlay?.isPlaying) {
-            window.BX_REMOTE_PLAY_CONFIG = STATES.remotePlay.config;
-            // Remove /launch/... from URL
-            window.history.replaceState({origin: 'better-xcloud'}, '', 'https://www.xbox.com/' + location.pathname.substring(1, 6) + '/play');
-        } else {
-            window.BX_REMOTE_PLAY_CONFIG = null;
-        }
-    }
-
-    static isReady() {
-        return RemotePlay.#CONSOLES !== null && RemotePlay.#CONSOLES.length > 0;
-    }
-}
--- a/src/modules/shortcuts/shortcut-sound.ts
+++ b/src/modules/shortcuts/shortcut-sound.ts
@ -4,6 +4,12 @@ import { Toast } from "@utils/toast";
 import { ceilToNearest, floorToNearest } from "@/utils/utils";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
+import { BxEvent } from "@/utils/bx-event";
+
+export enum SpeakerState {
+    ENABLED,
+    MUTED,
+}

 export class SoundShortcut {
    static adjustGainNodeVolume(amount: number): number {
@ -64,6 +70,10 @@ export class SoundShortcut {

            SoundShortcut.setGainNodeVolume(targetValue);
            Toast.show(`${t('stream')} ❯ ${t('volume')}`, status, {instant: true});
+
+            BxEvent.dispatch(window, BxEvent.SPEAKER_STATE_CHANGED, {
+                speakerState: targetValue === 0 ? SpeakerState.MUTED : SpeakerState.ENABLED,
+            })
            return;
        }

@ -79,6 +89,10 @@ export class SoundShortcut {

            const status = $media.muted ? t('muted') : t('unmuted');
            Toast.show(`${t('stream')} ❯ ${t('volume')}`, status, {instant: true});
+
+            BxEvent.dispatch(window, BxEvent.SPEAKER_STATE_CHANGED, {
+                speakerState: $media.muted ? SpeakerState.MUTED : SpeakerState.ENABLED,
+            })
        }
    }
 }
--- a/src/modules/ui/dialog/navigation-dialog.ts
+++ b/src/modules/ui/dialog/navigation-dialog.ts
@ -1,9 +1,11 @@
 import { GamepadKey } from "@/enums/mkb";
+import { PrefKey } from "@/enums/pref-keys";
 import { EmulatedMkbHandler } from "@/modules/mkb/mkb-handler";
 import { BxEvent } from "@/utils/bx-event";
 import { STATES } from "@/utils/global";
 import { CE, isElementVisible } from "@/utils/html";
 import { setNearby } from "@/utils/navigation-utils";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";

 export enum NavigationDirection {
    UP = 1,
@ -80,7 +82,7 @@ export abstract class NavigationDialog {
    }

    handleGamepad(button: GamepadKey): boolean {
-        return true;
+        return false;
    }
 }

@ -154,6 +156,57 @@ export class NavigationDialogManager {

        // Hide dialog when the Guide menu is shown
        window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, e => this.hide());
+
+        // Calculate minimum width of controller-friendly <select> elements
+        if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+            const observer = new MutationObserver(mutationList => {
+                if (mutationList.length === 0 || mutationList[0].addedNodes.length === 0) {
+                    return;
+                }
+
+                // Get dialog
+                const $dialog = mutationList[0].addedNodes[0];
+                if (!$dialog || !($dialog instanceof HTMLElement)) {
+                    return;
+                }
+
+                // Find un-calculated <select> elements
+                this.calculateSelectBoxes($dialog);
+            });
+            observer.observe(this.$container, {childList: true});
+        }
+    }
+
+    calculateSelectBoxes($root: HTMLElement) {
+        const $selects = $root.querySelectorAll('.bx-select:not([data-calculated]) select');
+        $selects.forEach($select => {
+            const $parent = $select.parentElement! as HTMLElement;
+
+            // Don't apply to select.bx-full-width elements
+            if ($parent.classList.contains('bx-full-width')) {
+                $parent.dataset.calculated = 'true';
+                return;
+            }
+
+            const rect = $select.getBoundingClientRect();
+
+            let $label;
+            let width = Math.ceil(rect.width);
+            if (!width) {
+                return;
+            }
+
+            if (($select as HTMLSelectElement).multiple) {
+                $label = $parent.querySelector('.bx-select-value') as HTMLElement;
+                width += 20;  // Add checkbox's width
+            } else {
+                $label = $parent.querySelector('div') as HTMLElement;
+            }
+
+            // Set min-width
+            $label.style.minWidth = width + 'px';
+            $parent.dataset.calculated = 'true';
+        });
    }

    handleEvent(event: Event) {
--- a/src/modules/ui/dialog/remote-play-dialog.ts
+++ b/src/modules/ui/dialog/remote-play-dialog.ts
@ -0,0 +1,135 @@
+import { ButtonStyle, CE, createButton } from "@/utils/html";
+import { NavigationDialog, type NavigationElement } from "./navigation-dialog";
+import { PrefKey } from "@/enums/pref-keys";
+import { BxIcon } from "@/utils/bx-icon";
+import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
+import { t } from "@/utils/translation";
+import { RemotePlayConsoleState, RemotePlayManager } from "@/modules/remote-play-manager";
+import { BxSelectElement } from "@/web-components/bx-select";
+import { BxEvent } from "@/utils/bx-event";
+
+
+export class RemotePlayNavigationDialog extends NavigationDialog {
+    private static instance: RemotePlayNavigationDialog;
+    public static getInstance(): RemotePlayNavigationDialog {
+        if (!RemotePlayNavigationDialog.instance) {
+            RemotePlayNavigationDialog.instance = new RemotePlayNavigationDialog();
+        }
+        return RemotePlayNavigationDialog.instance;
+    }
+
+    private readonly STATE_LABELS: Record<RemotePlayConsoleState, string> = {
+        [RemotePlayConsoleState.ON]: t('powered-on'),
+        [RemotePlayConsoleState.OFF]: t('powered-off'),
+        [RemotePlayConsoleState.STANDBY]: t('standby'),
+        [RemotePlayConsoleState.UNKNOWN]: t('unknown'),
+    };
+
+    $container!: HTMLElement;
+
+    constructor() {
+        super();
+        this.setupDialog();
+    }
+
+    private setupDialog() {
+        const $fragment = CE('div', {'class': 'bx-remote-play-container'});
+
+        const $settingNote = CE('p', {});
+
+        const currentResolution = getPref(PrefKey.REMOTE_PLAY_RESOLUTION);
+        let $resolutions : HTMLSelectElement | NavigationElement = CE<HTMLSelectElement>('select', {},
+            CE('option', {value: '1080p'}, '1080p'),
+            CE('option', {value: '720p'}, '720p'),
+        );
+
+        if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+            $resolutions = BxSelectElement.wrap($resolutions as HTMLSelectElement);
+        }
+
+        $resolutions.addEventListener('input', (e: Event) => {
+            const value = (e.target as HTMLSelectElement).value;
+
+            $settingNote.textContent = value === '1080p' ? '✅ ' + t('can-stream-xbox-360-games') : '❌ ' + t('cant-stream-xbox-360-games');
+            setPref(PrefKey.REMOTE_PLAY_RESOLUTION, value);
+        });
+
+        ($resolutions as any).value = currentResolution;
+        BxEvent.dispatch($resolutions, 'input', {
+            manualTrigger: true,
+        });
+
+        const $qualitySettings = CE('div', {
+            class: 'bx-remote-play-settings',
+        }, CE('div', {},
+            CE('label', {}, t('target-resolution'), $settingNote),
+            $resolutions,
+        ));
+
+        $fragment.appendChild($qualitySettings);
+
+        // Render consoles list
+        const manager = RemotePlayManager.getInstance();
+        const consoles = manager.getConsoles();
+
+        for (let con of consoles) {
+            const $child = CE('div', {class: 'bx-remote-play-device-wrapper'},
+                CE('div', {class: 'bx-remote-play-device-info'},
+                    CE('div', {},
+                        CE('span', {class: 'bx-remote-play-device-name'}, con.deviceName),
+                        CE('span', {class: 'bx-remote-play-console-type'}, con.consoleType.replace('Xbox', ''))
+                    ),
+                    CE('div', {class: 'bx-remote-play-power-state'}, this.STATE_LABELS[con.powerState]),
+                ),
+
+                // Connect button
+                createButton({
+                    classes: ['bx-remote-play-connect-button'],
+                    label: t('console-connect'),
+                    style: ButtonStyle.PRIMARY | ButtonStyle.FOCUSABLE,
+                    onClick: e => manager.play(con.serverId),
+                }),
+            );
+
+            $fragment.appendChild($child);
+        }
+
+        // Add buttons
+        $fragment.appendChild(
+            CE('div', {
+                class: 'bx-remote-play-buttons',
+                _nearby: {
+                    orientation: 'horizontal',
+                },
+            },
+                createButton({
+                    icon: BxIcon.QUESTION,
+                    style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
+                    url: 'https://better-xcloud.github.io/remote-play',
+                    label: t('help'),
+                }),
+
+                createButton({
+                    style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
+                    label: t('close'),
+                    onClick: e => this.hide(),
+                }),
+            ),
+        );
+
+        this.$container = $fragment;
+    }
+
+    getDialog(): NavigationDialog {
+        return this;
+    }
+
+    getContent(): HTMLElement {
+        return this.$container;
+    }
+
+    focusIfNeeded(): void {
+        const $btnConnect = this.$container.querySelector('.bx-remote-play-device-wrapper button') as HTMLElement;
+        $btnConnect && $btnConnect.focus();
+    }
+}
--- a/src/modules/ui/dialog/settings-dialog.ts
+++ b/src/modules/ui/dialog/settings-dialog.ts
@ -1,5 +1,5 @@
 import { onChangeVideoPlayerType, updateVideoPlayer } from "@/modules/stream/stream-settings-utils";
-import { ButtonStyle, CE, createButton, createSvgIcon, removeChildElements } from "@/utils/html";
+import { ButtonStyle, CE, createButton, createSvgIcon, removeChildElements, type BxButton } from "@/utils/html";
 import { NavigationDialog, NavigationDirection } from "./navigation-dialog";
 import { ControllerShortcut } from "@/modules/controller-shortcut";
 import { MkbRemapper } from "@/modules/mkb/mkb-remapper";
@ -97,12 +97,19 @@ export class SettingsNavigationDialog extends NavigationDialog {

                // "New version available" button
                if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION != SCRIPT_VERSION) {
-                    // Show new version indicator
-                    topButtons.push(createButton({
-                        label: `🌟 Version ${PREF_LATEST_VERSION} available`,
+                    // Show new version button
+                    const opts = {
+                        label: '🌟 ' + t('new-version-available', {version: PREF_LATEST_VERSION}),
                        style: ButtonStyle.PRIMARY | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
-                        url: 'https://github.com/redphx/better-xcloud/releases/latest',
-                    }));
+                    } as BxButton;
+
+                    if (AppInterface && AppInterface.updateLatestScript) {
+                        opts.onClick = e => AppInterface.updateLatestScript();
+                    } else {
+                        opts.url = 'https://github.com/redphx/better-xcloud/releases/latest';
+                    }
+
+                    topButtons.push(createButton(opts));
                }

                // Buttons for Android app
@ -936,6 +943,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
            for (const $child of Array.from(this.$settings.children)) {
                if ($child.getAttribute('data-tab-group') === settingTab.group) {
                    $child.classList.remove('bx-gone');
+
+                    // Calculate size of controller-friendly select boxes
+                    if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                        this.dialogManager.calculateSelectBoxes($child as HTMLElement);
+                    }
                } else {
                    $child.classList.add('bx-gone');
                }
--- a/src/modules/ui/guide-menu.ts
+++ b/src/modules/ui/guide-menu.ts
@ -88,7 +88,6 @@ export class GuideMenu {
        const buttons = [
            GuideMenu.#BUTTONS.scriptSettings,
            [
-                TrueAchievements.$button,
                GuideMenu.#BUTTONS.backToHome,
                GuideMenu.#BUTTONS.reloadPage,
                GuideMenu.#BUTTONS.closeApp,
@ -116,6 +115,11 @@ export class GuideMenu {
    }

    static #injectHome($root: HTMLElement, isPlaying = false) {
+        const $achievementsProgress = $root.querySelector('button[class*=AchievementsButton-module__progressBarContainer]');
+        if ($achievementsProgress) {
+            TrueAchievements.injectAchievementsProgress($achievementsProgress as HTMLElement);
+        }
+
        // Find the element to add buttons to
        let $target: HTMLElement | null = null;
        if (isPlaying) {
@ -157,6 +161,12 @@ export class GuideMenu {

    static observe($addedElm: HTMLElement) {
        const className = $addedElm.className;
+
+        if (className.includes('AchievementsButton-module__progressBarContainer')) {
+            TrueAchievements.injectAchievementsProgress($addedElm);
+            return;
+        }
+
        if (!className.startsWith('NavigationAnimation') &&
                !className.startsWith('DialogRoutes') &&
                !className.startsWith('Dialog-module__container')) {
--- a/src/modules/ui/header.ts
+++ b/src/modules/ui/header.ts
@ -2,7 +2,7 @@ import { SCRIPT_VERSION } from "@utils/global";
 import { createButton, ButtonStyle, CE, isElementVisible } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 import { getPreferredServerRegion } from "@utils/region";
-import { RemotePlay } from "@modules/remote-play";
+import { RemotePlayManager } from "@/modules/remote-play-manager";
 import { t } from "@utils/translation";
 import { SettingsNavigationDialog } from "./dialog/settings-dialog";
 import { PrefKey } from "@/enums/pref-keys";
@ -15,7 +15,7 @@ export class HeaderSection {
        title: t('remote-play'),
        style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR,
        onClick: e => {
-            RemotePlay.togglePopup();
+            RemotePlayManager.getInstance().togglePopup();
        },
    });

--- a/src/modules/ui/product-details.ts
+++ b/src/modules/ui/product-details.ts
@ -1,12 +1,11 @@
 import { BX_FLAGS } from "@/utils/bx-flags";
 import { BxIcon } from "@/utils/bx-icon";
 import { AppInterface } from "@/utils/global";
-import { ButtonStyle, createButton } from "@/utils/html";
+import { ButtonStyle, CE, createButton } from "@/utils/html";
 import { t } from "@/utils/translation";

 export class ProductDetailsPage {
    private static $btnShortcut = AppInterface && createButton({
-        classes: ['bx-button-shortcut'],
        icon: BxIcon.CREATE_SHORTCUT,
        label: t('create-shortcut'),
        style: ButtonStyle.FOCUSABLE,
@ -17,7 +16,6 @@ export class ProductDetailsPage {
    });

    private static $btnWallpaper = AppInterface && createButton({
-        classes: ['bx-button-shortcut'],
        icon: BxIcon.DOWNLOAD,
        label: t('wallpaper'),
        style: ButtonStyle.FOCUSABLE,
@ -48,17 +46,12 @@ export class ProductDetailsPage {
            // Find action buttons container
            const $container = document.querySelector('div[class*=ActionButtons-module__container]');
            if ($container && $container.parentElement) {
-                const fragment = document.createDocumentFragment();
-
-                // Shortcut button
-                if (BX_FLAGS.DeviceInfo.deviceType === 'android') {
-                    fragment.appendChild(ProductDetailsPage.$btnShortcut);
-                }
-
-                // Wallpaper button
-                fragment.appendChild(ProductDetailsPage.$btnWallpaper);
-
-                $container.parentElement.appendChild(fragment);
+                $container.parentElement.appendChild(CE('div', {
+                    class: 'bx-product-details-buttons',
+                },
+                    BX_FLAGS.DeviceInfo.deviceType === 'android' && ProductDetailsPage.$btnShortcut,
+                    ProductDetailsPage.$btnWallpaper,
+                ));
            }
        }, 500);
    }
--- a/src/utils/bx-event.ts
+++ b/src/utils/bx-event.ts
@ -37,6 +37,7 @@ export namespace BxEvent {

    export const GAME_BAR_ACTION_ACTIVATED = 'bx-game-bar-action-activated';
    export const MICROPHONE_STATE_CHANGED = 'bx-microphone-state-changed';
+    export const SPEAKER_STATE_CHANGED = 'bx-speaker-state-changed';

    export const CAPTURE_SCREENSHOT = 'bx-capture-screenshot';

--- a/src/utils/bx-icon.ts
+++ b/src/utils/bx-icon.ts
@ -14,6 +14,7 @@ import iconPower from "@assets/svg/power.svg" with { type: "text" };
 import iconQuestion from "@assets/svg/question.svg" with { type: "text" };
 import iconRefresh from "@assets/svg/refresh.svg" with { type: "text" };
 import iconRemotePlay from "@assets/svg/remote-play.svg" with { type: "text" };
+import iconSpeakerSlash from "@assets/svg/speaker-slash.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 iconTouchControlDisable from "@assets/svg/touch-control-disable.svg" with { type: "text" };
@ -64,6 +65,7 @@ export const BxIcon = {
    CARET_LEFT: iconCaretLeft,
    CARET_RIGHT: iconCaretRight,
    SCREENSHOT: iconCamera,
+    SPEAKER_MUTED: iconSpeakerSlash,
    TOUCH_CONTROL_ENABLE: iconTouchControlEnable,
    TOUCH_CONTROL_DISABLE: iconTouchControlDisable,

--- a/src/utils/history.ts
+++ b/src/utils/history.ts
@ -1,6 +1,6 @@
 import { BxEvent } from "@utils/bx-event";
 import { LoadingScreen } from "@modules/loading-screen";
-import { RemotePlay } from "@modules/remote-play";
+import { RemotePlayManager } from "@/modules/remote-play-manager";
 import { HeaderSection } from "@/modules/ui/header";
 import { NavigationDialogManager } from "@/modules/ui/dialog/navigation-dialog";

@ -24,7 +24,7 @@ export function onHistoryChanged(e: PopStateEvent) {
        return;
    }

-    window.setTimeout(RemotePlay.detect, 10);
+    window.setTimeout(RemotePlayManager.detect, 10);

    // Hide Global settings
    const $settings = document.querySelector('.bx-settings-container');
@ -35,9 +35,6 @@ export function onHistoryChanged(e: PopStateEvent) {
    // Hide Navigation dialog
    NavigationDialogManager.getInstance().hide();

-    // Hide Remote Play popup
-    RemotePlay.detachPopup();
-
    LoadingScreen.reset();
    window.setTimeout(HeaderSection.watchHeader, 2000);

--- a/src/utils/html.ts
+++ b/src/utils/html.ts
@ -32,7 +32,7 @@ const ButtonStyleClass = {
    [ButtonStyle.NORMAL_LINK]: 'bx-normal-link',
 }

-type BxButton = {
+export type BxButton = {
    style?: ButtonStyle;
    url?: string;
    classes?: string[];
@ -163,7 +163,7 @@ export function escapeHtml(html: string): string {

 export function isElementVisible($elm: HTMLElement): boolean {
    const rect = $elm.getBoundingClientRect();
-    return !!rect.width && !!rect.height;
+    return (rect.x >= 0 || rect.y >= 0) && !!rect.width && !!rect.height;
 }

 export const CTN = document.createTextNode.bind(document);
@ -174,3 +174,16 @@ export function removeChildElements($parent: HTMLElement) {
        $parent.firstElementChild.remove();
    }
 }
+
+export function clearFocus() {
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
+}
+
+
+export function clearDataSet($elm: HTMLElement) {
+    Object.keys($elm.dataset).forEach(key => {
+        delete $elm.dataset[key];
+    });
+}
--- a/src/utils/monkey-patches.ts
+++ b/src/utils/monkey-patches.ts
@ -254,6 +254,7 @@ export function patchPointerLockApi() {
    });

    // const nativeRequestPointerLock = HTMLElement.prototype.requestPointerLock;
+    // @ts-ignore
    HTMLElement.prototype.requestPointerLock = function() {
        pointerLockElement = document.documentElement;
        window.dispatchEvent(new Event(BxEvent.POINTER_LOCK_REQUESTED));
--- a/src/utils/settings-storages/global-settings-storage.ts
+++ b/src/utils/settings-storages/global-settings-storage.ts
@ -135,8 +135,8 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                'da-DK': 'dansk',
                'de-DE': 'Deutsch',
                'el-GR': 'Ελληνικά',
-                'en-GB': 'English (United Kingdom)',
-                'en-US': 'English (United States)',
+                'en-GB': 'English (UK)',
+                'en-US': 'English (US)',
                'es-ES': 'español (España)',
                'es-MX': 'español (Latinoamérica)',
                'fi-FI': 'suomi',
@ -584,7 +584,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
            default: 'default',
            options: {
                'default': t('default'),
-                'low-power': t('low-power'),
+                'low-power': t('battery-saving'),
                'high-performance': t('high-performance'),
            },
            suggest: {
--- a/src/utils/translation.ts
+++ b/src/utils/translation.ts
@ -2,7 +2,7 @@ import { NATIVE_FETCH } from "./bx-flags";
 import { BxLogger } from "./bx-logger";

 export const SUPPORTED_LANGUAGES = {
-    'en-US': 'English (United States)',
+    'en-US': 'English (US)',

    'ca-CA': 'Català',
    'da-DK': 'dansk',
@ -47,6 +47,7 @@ const Texts = {
    "badge-playtime": "Playtime",
    "badge-server": "Server",
    "badge-video": "Video",
+    "battery-saving": "Battery saving",
    "better-xcloud": "Better xCloud",
    "bitrate-audio-maximum": "Maximum audio bitrate",
    "bitrate-video-maximum": "Maximum video bitrate",
@ -142,7 +143,6 @@ const Texts = {
    "load-failed-message": "Failed to run Better xCloud",
    "loading-screen": "Loading screen",
    "local-co-op": "Local co-op",
-    "low-power": "Low power",
    "lowest-quality": "Lowest quality",
    "map-mouse-to": "Map mouse to",
    "may-not-work-properly": "May not work properly!",
@ -157,6 +157,27 @@ const Texts = {
    "name": "Name",
    "native-mkb": "Native Mouse & Keyboard",
    "new": "New",
+    "new-version-available": [
+        (e: any) => `Version ${e.version} available`,
+        ,
+        ,
+        (e: any) => `Version ${e.version} verfügbar`,
+        ,
+        (e: any) => `Versión ${e.version} disponible`,
+        (e: any) => `Version ${e.version} disponible`,
+        (e: any) => `Disponibile la versione ${e.version}`,
+        (e: any) => `Ver ${e.version} が利用可能です`,
+        (e: any) => `${e.version} 버전 사용가능`,
+        (e: any) => `Dostępna jest nowa wersja ${e.version}`,
+        (e: any) => `Versão ${e.version} disponível`,
+        ,
+        (e: any) => `เวอร์ชัน ${e.version} พร้อมใช้งานแล้ว`,
+        ,
+        (e: any) => `Доступна версія ${e.version}`,
+        (e: any) => `Đã có phiên bản ${e.version}`,
+        (e: any) => `版本 ${e.version} 可供更新`,
+        (e: any) => `已可更新為 ${e.version} 版`,
+    ],
    "no-consoles-found": "No consoles found",
    "normal": "Normal",
    "off": "Off",
@ -199,7 +220,7 @@ const Texts = {
    "recommended": "Recommended",
    "recommended-settings-for-device": [
        (e: any) => `Recommended settings for ${e.device}`,
-        ,
+        (e: any) => `Configuració recomanada per a ${e.device}`,
        ,
        (e: any) => `Empfohlene Einstellungen für ${e.device}`,
        ,
@ -209,9 +230,9 @@ const Texts = {
        (e: any) => `${e.device} の推奨設定`,
        (e: any) => `다음 기기에서 권장되는 설정: ${e.device}`,
        (e: any) => `Zalecane ustawienia dla ${e.device}`,
-        ,
+        (e: any) => `Configurações recomendadas para ${e.device}`,
        (e: any) => `Рекомендуемые настройки для ${e.device}`,
-        ,
+        (e: any) => `การตั้งค่าที่แนะนำสำหรับ ${e.device}`,
        (e: any) => `${e.device} için önerilen ayarlar`,
        (e: any) => `Рекомендовані налаштування для ${e.device}`,
        (e: any) => `Cấu hình được đề xuất cho ${e.device}`,
--- a/src/utils/true-achievements.ts
+++ b/src/utils/true-achievements.ts
@ -1,6 +1,6 @@
 import { BxIcon } from "./bx-icon";
 import { AppInterface, STATES } from "./global";
-import { ButtonStyle, CE, createButton, getReactProps } from "./html";
+import { ButtonStyle, CE, clearDataSet, createButton, getReactProps } from "./html";
 import { t } from "./translation";

 export class TrueAchievements {
@ -16,7 +16,7 @@ export class TrueAchievements {
        label: t('true-achievements'),
        title: t('true-achievements'),
        icon: BxIcon.TRUE_ACHIEVEMENTS,
-        style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
+        style: ButtonStyle.FOCUSABLE,
        onClick: TrueAchievements.onClick,
    }) as HTMLAnchorElement;

@ -25,18 +25,67 @@ export class TrueAchievements {

        const dataset = TrueAchievements.$link.dataset;
        TrueAchievements.open(true, dataset.xboxTitleId, dataset.id);
+
+        // Close all xCloud's dialogs
+        window.BX_EXPOSED.dialogRoutes.closeAll();
    }

    private static $hiddenLink = CE<HTMLAnchorElement>('a', {
        target: '_blank',
    });

-    private static updateLinks(xboxTitleId?: string, id?: string) {
-        TrueAchievements.$link.dataset.xboxTitleId = xboxTitleId;
-        TrueAchievements.$link.dataset.id = id;
+    private static updateIds(xboxTitleId?: string, id?: string) {
+        const $link = TrueAchievements.$link;
+        const $button = TrueAchievements.$button;

-        TrueAchievements.$button.dataset.xboxTitleId = xboxTitleId;
-        TrueAchievements.$button.dataset.id = id;
+        clearDataSet($link);
+        clearDataSet($button);
+
+        if (xboxTitleId) {
+            $link.dataset.xboxTitleId = xboxTitleId;
+            $button.dataset.xboxTitleId = xboxTitleId;
+        }
+
+        if (id) {
+            $link.dataset.id = id;
+            $button.dataset.id = id;
+        }
+    }
+
+    static injectAchievementsProgress($elm: HTMLElement) {
+        const $parent = $elm.parentElement!;
+
+        // Wrap xCloud's element with our own
+        const $div = CE('div', {
+            class: 'bx-guide-home-achievements-progress',
+        }, $elm);
+
+        // Get xboxTitleId of the game
+        let xboxTitleId: string | number | undefined;
+        try {
+            const $container = $parent.closest('div[class*=AchievementsPreview-module__container]') as HTMLElement;
+            if ($container) {
+                const props = getReactProps($container);
+                xboxTitleId = props.children.props.data.data.xboxTitleId;
+            }
+        } catch (e) {}
+
+        if (!xboxTitleId) {
+            xboxTitleId = TrueAchievements.getStreamXboxTitleId();
+        }
+
+        if (typeof xboxTitleId !== 'undefined') {
+            xboxTitleId = xboxTitleId.toString();
+        }
+        TrueAchievements.updateIds(xboxTitleId);
+
+        if (document.documentElement.dataset.xdsPlatform === 'tv') {
+            $div.appendChild(TrueAchievements.$link);
+        } else {
+            $div.appendChild(TrueAchievements.$button);
+        }
+
+        $parent.appendChild($div);
    }

    static injectAchievementDetailPage($parent: HTMLElement) {
@ -66,15 +115,19 @@ export class TrueAchievements {

            // Found achievement -> add TrueAchievements button
            if (id) {
-                TrueAchievements.updateLinks(xboxTitleId, id);
+                TrueAchievements.updateIds(xboxTitleId, id);
                $parent.appendChild(TrueAchievements.$link);
            }
        } catch (e) {};
    }

+    private static getStreamXboxTitleId() : number | undefined {
+        return STATES.currentStream.xboxTitleId || STATES.currentStream.titleInfo?.details.xboxTitleId;
+    }
+
    static open(override: boolean, xboxTitleId?: number | string, id?: number | string) {
        if (!xboxTitleId || xboxTitleId === 'undefined') {
-            xboxTitleId = STATES.currentStream.xboxTitleId || STATES.currentStream.titleInfo?.details.xboxTitleId;
+            xboxTitleId = TrueAchievements.getStreamXboxTitleId();
        }

        if (AppInterface && AppInterface.openTrueAchievementsLink) {
@ -84,10 +137,10 @@ export class TrueAchievements {

        let url = 'https://www.trueachievements.com';
        if (xboxTitleId) {
-            if (id && id !== 'undefined') {
-                url += `/deeplink/${xboxTitleId}/${id}`;
-            } else {
            url += `/deeplink/${xboxTitleId}`;
+
+            if (id) {
+                url += `/${id}`;
            }
        }

--- a/src/utils/xcloud-interceptor.ts
+++ b/src/utils/xcloud-interceptor.ts
@ -1,5 +1,5 @@
 import { LoadingScreen } from "@modules/loading-screen";
-import { RemotePlay } from "@modules/remote-play";
+import { RemotePlayManager } from "@/modules/remote-play-manager";
 import { StreamBadges } from "@modules/stream/stream-badges";
 import { TouchController } from "@modules/touch-controller";
 import { BxEvent } from "./bx-event";
@ -30,7 +30,7 @@ class XcloudInterceptor {
        const obj = await response.clone().json();

        // Store xCloud token
-        RemotePlay.XCLOUD_TOKEN = obj.gsToken;
+        RemotePlayManager.getInstance().xcloudToken = obj.gsToken;

        // Get server list
        const serverEmojis = {
--- a/src/utils/xhome-interceptor.ts
+++ b/src/utils/xhome-interceptor.ts
@ -1,4 +1,3 @@
-import { RemotePlay } from "@/modules/remote-play";
 import { TouchController } from "@/modules/touch-controller";
 import { BxEvent } from "./bx-event";
 import { SupportedInputType } from "./bx-exposed";
@ -8,10 +7,51 @@ import { patchIceCandidates } from "./network";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref, StreamResolution, StreamTouchController } from "./settings-storages/global-settings-storage";
 import type { RemotePlayConsoleAddresses } from "@/types/network";
+import { RemotePlayManager } from "@/modules/remote-play-manager";

 export class XhomeInterceptor {
    static #consoleAddrs: RemotePlayConsoleAddresses = {};

+    private static readonly BASE_DEVICE_INFO = {
+        appInfo: {
+            env: {
+                clientAppId: window.location.host,
+                clientAppType: 'browser',
+                clientAppVersion: '24.17.36',
+                clientSdkVersion: '10.1.14',
+                httpEnvironment: 'prod',
+                sdkInstallId: '',
+            },
+        },
+
+        dev: {
+            displayInfo: {
+                dimensions: {
+                    widthInPixels: 1920,
+                    heightInPixels: 1080,
+                },
+                pixelDensity: {
+                    dpiX: 1,
+                    dpiY: 1,
+                },
+            },
+            hw: {
+                make: 'Microsoft',
+                model: 'unknown',
+                sdktype: 'web',
+            },
+            os: {
+                name: 'windows',
+                ver: '22631.2715',
+                platform: 'desktop',
+            },
+            browser: {
+                browserName: 'chrome',
+                browserVersion: '125.0',
+            },
+        },
+    };
+
    static async #handleLogin(request: Request) {
        try {
            const clone = (request as Request).clone();
@ -42,7 +82,7 @@ export class XhomeInterceptor {

        const processPorts = (port: number): number[] => {
            const ports = new Set<number>();
-            ports.add(port);
+            port && ports.add(port);
            ports.add(9002);

            return Array.from(ports);
@ -111,7 +151,7 @@ export class XhomeInterceptor {
        for (const pair of (clone.headers as any).entries()) {
            headers[pair[0]] = pair[1];
        }
-        headers.authorization = `Bearer ${RemotePlay.XCLOUD_TOKEN}`;
+        headers.authorization = `Bearer ${RemotePlayManager.getInstance().xcloudToken}`;

        const index = request.url.indexOf('.xboxlive.com');
        request = new Request('https://wus.core.gssv-play-prod' + request.url.substring(index), {
@ -146,10 +186,10 @@ export class XhomeInterceptor {
            headers[pair[0]] = pair[1];
        }
        // Add xHome token to headers
-        headers.authorization = `Bearer ${RemotePlay.XHOME_TOKEN}`;
+        headers.authorization = `Bearer ${RemotePlayManager.getInstance().xhomeToken}`;

        // Patch resolution
-        const deviceInfo = RemotePlay.BASE_DEVICE_INFO;
+        const deviceInfo = XhomeInterceptor.BASE_DEVICE_INFO;
        if (getPref(PrefKey.REMOTE_PLAY_RESOLUTION) === StreamResolution.DIM_720P) {
            deviceInfo.dev.os.name = 'android';
        }
--- a/src/web-components/bx-select.ts
+++ b/src/web-components/bx-select.ts
@ -164,6 +164,10 @@ export class BxSelectElement {
        Object.defineProperty($div, 'value', {
            get() {
                return $select.value;
+            },
+
+            set(value) {
+                ($div as any).setValue(value);
            }
        });
Author	SHA1	Message	Date
redphx	109cd63a7b	Bump version to 5.7.7	2024-09-26 19:50:28 +07:00
redphx	8ea6b7f81a	Update better-xcloud.user.js	2024-09-26 19:49:58 +07:00
redphx	e7c10d43f5	Fix buttons layout in product details page	2024-09-26 19:46:30 +07:00
redphx	2f7a57e084	Update translations	2024-09-26 19:22:51 +07:00
redphx	c99e38b097	Update better-xcloud.user.js	2024-09-25 20:20:45 +07:00
redphx	f6ec6d7c9b	Fix not calculating controller-friendly <select>'s size when switching tab	2024-09-25 20:20:06 +07:00
redphx	e69fa19ef3	Update better-xcloud.user.js	2024-09-25 19:44:33 +07:00
redphx	cc422b31a4	build: collapse if/else blocks without curly braces	2024-09-25 19:43:19 +07:00
redphx	9609d0ae7b	Fix duplicated CSS strings	2024-09-25 19:43:07 +07:00
redphx	506fd71433	Update better-xcloud.user.js	2024-09-25 08:48:57 +07:00
redphx	f40b8cb0b2	build: add more minify steps	2024-09-25 08:47:01 +07:00
redphx	49a6c036a3	Bump version to 5.7.6	2024-09-24 21:13:56 +07:00
redphx	f5a5a79a82	Check offscreen element in isElementVisible()	2024-09-24 20:58:32 +07:00
redphx	7ec449160a	Update better-xcloud.user.js	2024-09-24 19:53:20 +07:00
redphx	fecc5411da	Remote Play dialog: update styles	2024-09-24 19:53:02 +07:00
redphx	f704452171	Remote Play dialog: replace radio buttons with select box	2024-09-24 19:47:55 +07:00
redphx	135193813c	Shorten language names	2024-09-24 19:34:20 +07:00
redphx	bb57f72e64	Calculate minimum width of controller-friendly <select> elements	2024-09-24 19:31:56 +07:00
redphx	69d7cbfffb	Bump version to 5.7.5	2024-09-20 17:46:32 +07:00
redphx	92e6828cb2	Update better-xcloud.user.js	2024-09-20 17:25:12 +07:00
redphx	12ad81e9c7	Update translations	2024-09-20 17:16:32 +07:00
redphx	102e0bd318	Use "let" keyword in Patcher to reduce the size of generated script	2024-09-20 16:53:48 +07:00
redphx	9308963bc2	Remote Play: Prevent adding "Fortnite" to the "Jump back in" list	2024-09-20 16:42:27 +07:00
redphx	c90e013dc1	Upgrade bun	2024-09-20 16:42:03 +07:00
redphx	037927b9be	Fix not able to control Remote Play dialog using controller (#509 )	2024-09-20 07:05:39 +07:00
redphx	dabab9acb1	Bump version to 5.7.4	2024-09-19 19:59:12 +07:00
redphx	a4a52c6bc3	Update better-xcloud.user.js	2024-09-19 19:58:49 +07:00
redphx	eebd7434ea	Remove Close icon in Remote Play dialog	2024-09-19 19:58:45 +07:00
redphx	ec1805f832	Refactor Remote Play	2024-09-19 18:01:27 +07:00
redphx	34f959d5ae	Update better-xcloud.user.js	2024-09-18 20:15:02 +07:00
redphx	784a31ce43	Migrate Remote Play popup to Navigation dialog	2024-09-18 20:14:49 +07:00
redphx	df266d32fc	Update better-xcloud.user.js	2024-09-12 22:03:35 +07:00
redphx	a6ccd6666e	Check next Remote Play server when the console list is empty	2024-09-12 22:03:21 +07:00
redphx	fe609034d6	Remote Play: don't accept candidates with port 0	2024-09-11 08:24:50 +07:00
redphx	97ec29faa0	Upgrade bun	2024-09-11 08:09:27 +07:00
redphx	a34ae75131	Bump version to 5.7.3	2024-09-07 18:36:05 +07:00
redphx	139543aaa5	Update better-xcloud.user.js	2024-09-07 18:29:45 +07:00
redphx	8099115959	Set Achievements list's default filter to "Locked"	2024-09-07 18:15:04 +07:00
redphx	21efa5ffdc	Minor fix in Game Bar	2024-09-07 17:27:23 +07:00
redphx	07ebf3926b	Update script in app when clicking on the "Version x available" button	2024-09-07 16:43:56 +07:00
redphx	714178a82d	Bump version to 5.7.2	2024-09-06 20:55:12 +07:00
redphx	5c2c13e0e6	Update better-xcloud.user.js	2024-09-06 20:52:35 +07:00
redphx	3f423325b9	Add Game Bar action to mute/unmute speaker (#491 )	2024-09-06 20:44:28 +07:00
redphx	870a205ead	Update better-xcloud.user.js	2024-09-06 18:17:39 +07:00
redphx	421af05882	Update TA button's logic & layout in the Guide Menu	2024-09-06 18:07:13 +07:00
redphx	756d105f74	Clear focus on Game Bar after activating it	2024-09-06 17:03:55 +07:00