Bump version to 5.4.2

dist/better-xcloud.meta.js

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

src/assets/css/button.styl

@@ -67,10 +67,6 @@
         display: inline-block;
         width: 16px;
         height: var(--bx-button-height);
-
-        &:not(:only-child) {
-            margin-right: 10px;
-        }
     }
 
     span {
@@ -82,6 +78,10 @@
         color: #fff;
         overflow: hidden;
         white-space: nowrap;
+
+        &:not(:only-child) {
+            margin-left: 10px;
+        }
     }
 }
 
@@ -119,5 +119,12 @@ button.bx-inactive {
 }
 
 .bx-button-shortcut {
-    margin-top: 10px;
+    max-width: max-content;
+    margin: 10px 0 0 0;
+}
+
+@media (min-width: 568px) and (max-height: 480px) {
+    .bx-button-shortcut {
+        margin: 8px 0 0 10px;
+    }
 }

src/assets/css/global-settings.styl

@@ -98,6 +98,7 @@
 
 .bx-settings-row {
     display: flex;
+    flex-wrap: wrap;
     padding: 6px 12px;
     position: relative;
 

src/assets/css/stream-settings.styl

@@ -115,6 +115,7 @@
 
 .bx-stream-settings-row {
     display: flex;
+    flex-wrap: wrap;
     border-bottom: 1px solid #40404080;
     padding: 16px 8px;
     border-left: 2px solid transparent;

src/assets/css/web-components.styl

@@ -85,6 +85,7 @@
         font-weight: bold;
         font-size: 12px;
         font-family: var(--bx-monospaced-font);
+        flex-shrink: 0;
 
         span {
             line-height: unset;

src/modules/controller-shortcut.ts

@@ -207,6 +207,7 @@ export class ControllerShortcut {
 
             BxEvent.dispatch($select, 'input', {
                 ignoreOnChange: true,
+                manualTrigger: true,
             });
         }
     }

src/modules/stream/stream-settings.ts

@@ -529,14 +529,18 @@ export class StreamSettings {
                 const $childSetting = $sibling.querySelector('[tabindex="0"]:last-of-type') as HTMLElement;
                 if ($childSetting) {
                     $childSetting.focus();
-                    return;
+
+                    // Only stop when it was focused successfully
+                    if (document.activeElement === $childSetting) {
+                        return;
+                    }
                 }
             }
 
             // If it's the first/last item -> loop around
             // TODO: bugged if pseudo is "first-of-type" and the first setting is disabled
             const pseudo = direction === NavigationDirection.UP ? ':last-of-type' : '';
-            const $target = this.$settings!.querySelector(`div[data-tab-group]:not(.bx-gone) div[data-focus-container]${pseudo} [tabindex="0"]:not(:disabled):last-of-type`);
+            const $target = this.$settings!.querySelector(`div[data-tab-group]:not(.bx-gone) div[data-focus-container]:not(.bx-gone)${pseudo} [tabindex="0"]:not(:disabled):last-of-type`);
             $target && ($target as HTMLElement).focus();
         } else if (direction === NavigationDirection.LEFT || direction === NavigationDirection.RIGHT) {
             // Find all child elements with tabindex

src/modules/ui/global-settings.ts

@@ -177,7 +177,7 @@ export function setupSettingsUi() {
     if (AppInterface) {
         // Show Android app settings button
         topButtons.push(createButton({
-            label: t('android-app-settings'),
+            label: t('app-settings'),
             icon: BxIcon.STREAM_SETTINGS,
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
             onClick: e => {
@@ -465,6 +465,7 @@ export function setupSettingsUi() {
 
         PrefKey.VIDEO_PLAYER_TYPE,
         PrefKey.VIDEO_PROCESSING,
+        PrefKey.VIDEO_POWER_PREFERENCE,
         PrefKey.VIDEO_SHARPNESS,
     ];
 

src/modules/ui/guide-menu.ts

@@ -25,7 +25,7 @@ export class GuideMenu {
         }),
 
         appSettings: createButton({
-            label: t('android-app-settings'),
+            label: t('app-settings'),
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
             onClick: e => {
                 // Close all xCloud's dialogs

src/modules/ui/product-details.ts

@@ -28,7 +28,6 @@ export class ProductDetailsPage {
             // Find action buttons container
             const $container = document.querySelector('div[class*=ActionButtons-module__container]');
             if ($container) {
-                this.$btnShortcut.style.width = $container.getBoundingClientRect().width + 'px';
                 $container.parentElement?.appendChild(ProductDetailsPage.$btnShortcut);
             }
         }, 500);

src/utils/html.ts

@@ -50,7 +50,7 @@ function createElement<T=HTMLElement>(elmName: string, props: {[index: string]:
 
         if (arg instanceof Node) {
             $elm.appendChild(arg);
-        } else if (arg !== null && typeof arg !== 'undefined') {
+        } else if (arg !== null && arg !== false && typeof arg !== 'undefined') {
             $elm.appendChild(document.createTextNode(arg));
         }
     }

src/utils/preferences.ts

@@ -644,8 +644,8 @@ export class Preferences {
             default: 'default',
             options: {
                 'default': t('default'),
-                'high-performance': t('high-performance'),
                 'low-power': t('low-power'),
+                'high-performance': t('high-performance'),
             },
         },
         [PrefKey.VIDEO_SHARPNESS]: {

src/utils/translation.ts

@@ -31,7 +31,7 @@ const Texts = {
     "always-off": "Always off",
     "always-on": "Always on",
     "amd-fidelity-cas": "AMD FidelityFX CAS",
-    "android-app-settings": "Android app settings",
+    "app-settings": "App settings",
     "apply": "Apply",
     "aspect-ratio": "Aspect ratio",
     "aspect-ratio-note": "Don't use with native touch games",

src/web-components/bx-select.ts

@@ -24,6 +24,7 @@ export class BxSelectElement {
         const isMultiple = $select.multiple;
         let $checkBox: HTMLInputElement;
         let $label: HTMLElement;
+        let visibleIndex = $select.selectedIndex;
 
         let $content;
 
@@ -41,7 +42,7 @@ export class BxSelectElement {
             });
 
             $checkBox.addEventListener('input', e => {
-                const $option = getOptionAtIndex($select.selectedIndex);
+                const $option = getOptionAtIndex(visibleIndex);
                 $option && ($option.selected = (e.target as HTMLInputElement).checked);
 
                 $select.dispatchEvent(new Event('input'));
@@ -57,11 +58,13 @@ export class BxSelectElement {
             return options[index];
         }
 
-        const render = () => {
+        const render = (e?: Event) => {
             // console.log('options', this.options, 'selectedIndices', this.selectedIndices, 'selectedOptions', this.selectedOptions);
+            if (e && (e as any).manualTrigger) {
+                visibleIndex = $select.selectedIndex;
+            }
 
-            const visibleIndex = normalizeIndex($select.selectedIndex);
-
+            visibleIndex = normalizeIndex(visibleIndex);
             const $option = getOptionAtIndex(visibleIndex);
             let content = '';
             if ($option) {
@@ -94,10 +97,11 @@ export class BxSelectElement {
             const disableNext = visibleIndex === $select.querySelectorAll('option').length - 1;
 
             $btnPrev.classList.toggle('bx-inactive', disablePrev);
-            // disablePrev && document.activeElement === $btnPrev && $btnNext.focus();
-
             $btnNext.classList.toggle('bx-inactive', disableNext);
-            // disableNext && document.activeElement === $btnNext &&$btnPrev.focus();
+
+            // Focus the other button when reaching the beginning/end
+            disablePrev && !disableNext && document.activeElement === $btnPrev && $btnNext.focus();
+            disableNext && !disablePrev && document.activeElement === $btnNext && $btnPrev.focus();
         }
 
         const normalizeIndex = (index: number): number => {
@@ -107,18 +111,23 @@ export class BxSelectElement {
         const onPrevNext = (e: Event) => {
             const goNext = e.target === $btnNext;
 
-            const currentIndex = $select.selectedIndex;
+            const currentIndex = visibleIndex;
             let newIndex = goNext ? currentIndex + 1 : currentIndex - 1;
             newIndex = normalizeIndex(newIndex);
 
+            visibleIndex = newIndex;
             if (!isMultiple && newIndex !== currentIndex) {
                 $select.selectedIndex = newIndex;
             }
 
-            $select.dispatchEvent(new Event('input'));
+            if (isMultiple) {
+                render();
+            } else {
+                $select.dispatchEvent(new Event('input'));
+            }
         };
 
-        $select.addEventListener('input', e => render());
+        $select.addEventListener('input', render);
         $btnPrev.addEventListener('click', onPrevNext);
         $btnNext.addEventListener('click', onPrevNext);