Bump version to 5.7.6

dist/better-xcloud.meta.js

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

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/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/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,
@@ -154,6 +156,43 @@ 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
+                const $selects = $dialog.querySelectorAll('.bx-select:not([data-calculated]) select');
+                $selects.forEach($select => {
+                    const rect = $select.getBoundingClientRect();
+                    const $parent = $select.parentElement! as HTMLElement;
+                    $parent.dataset.calculated = 'true';
+
+                    let $label;
+                    let width = Math.ceil(rect.width);
+
+                    if (($select as HTMLSelectElement).multiple) {
+                        $label = $parent.querySelector('.bx-select-value') as HTMLElement;
+                        width += 15;  // Add checkbox's width
+                    } else {
+                        $label = $parent.querySelector('div') as HTMLElement;
+                    }
+
+                    // Set min-width
+                    $label.style.minWidth = width + 'px';
+                });
+            });
+            observer.observe(this.$container, {childList: 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);

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

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