Bump version to 5.7.7

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'));

dist/better-xcloud.meta.js

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

package.json

@@ -10,10 +10,10 @@
   },
   "devDependencies": {
     "@types/bun": "^1.1.9",
-    "@types/node": "^22.5.4",
-    "@types/stylus": "^0.48.42",
+    "@types/node": "^22.5.5",
+    "@types/stylus": "^0.48.43",
     "eslint": "^9.10.0",
-    "eslint-plugin-compat": "^6.0.0",
+    "eslint-plugin-compat": "^6.0.1",
     "stylus": "^0.63.0"
   },
   "peerDependencies": {

src/assets/css/button.styl

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

src/assets/css/misc.styl

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

src/assets/css/remote-play.styl

@@ -37,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 {
@@ -94,7 +86,7 @@
 
 .bx-remote-play-power-state {
     color: #888;
-    font-size: 14px;
+    font-size: 12px;
 }
 
 .bx-remote-play-connect-button {

src/assets/css/settings-dialog.styl

@@ -300,6 +300,7 @@
         text-align: left;
         align-self: center;
         margin-bottom: 0 !important;
+        flex: 1;
 
         + * {
             margin: 0 0 0 auto;

src/assets/css/styles.styl

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

src/assets/css/web-components.styl

@@ -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;
         }
 

src/index.ts

@@ -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',{

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,

src/modules/loading-screen.ts

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

src/modules/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;
         }
@@ -984,6 +1003,7 @@ let PATCH_ORDERS: PatchArray = [
         'remotePlayKeepAlive',
         'remotePlayDirectConnectUrl',
         'remotePlayDisableAchievementToast',
+        'remotePlayRecentlyUsedTitleIds',
         STATES.userAgent.capabilities.touch && 'patchUpdateInputConfigurationAsync',
     ] : []),
 

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) {

src/modules/ui/dialog/remote-play-dialog.ts

@@ -1,10 +1,12 @@
 import { ButtonStyle, CE, createButton } from "@/utils/html";
-import { NavigationDialog } from "./navigation-dialog";
+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 {
@@ -35,48 +37,33 @@ export class RemotePlayNavigationDialog extends NavigationDialog {
 
         const $settingNote = CE('p', {});
 
-        const resolutions = [1080, 720];
         const currentResolution = getPref(PrefKey.REMOTE_PLAY_RESOLUTION);
-        const $resolutionGroup = CE('div', {});
+        let $resolutions : HTMLSelectElement | NavigationElement = CE<HTMLSelectElement>('select', {},
+            CE('option', {value: '1080p'}, '1080p'),
+            CE('option', {value: '720p'}, '720p'),
+        );
 
-        const onResolutionChange = (e: Event) => {
-            const value = (e.target as HTMLInputElement).value;
+        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);
-        };
+        });
 
-        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('input', onResolutionChange);
-
-            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('input'));
-            }
-        }
+        ($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),
-            $resolutionGroup,
+            $resolutions,
         ));
 
         $fragment.appendChild($qualitySettings);
@@ -123,9 +110,9 @@ export class RemotePlayNavigationDialog extends NavigationDialog {
                 }),
 
                 createButton({
-                    icon: BxIcon.CLOSE,
                     style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
                     label: t('close'),
+                    onClick: e => this.hide(),
                 }),
             ),
         );

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

@@ -943,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');
                 }

src/modules/ui/product-details.ts

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

src/utils/html.ts

@@ -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);

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',

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',
@@ -161,22 +161,22 @@ const Texts = {
         (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",
@@ -230,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}`,

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);
             }
         });