Bump version to 5.6.1

build.ts

@@ -85,8 +85,10 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
     // Save to script
     await Bun.write(path, scriptHeader + result);
 
-    // Create meta file
+    // Create meta file (don't build if it's beta version)
-    await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
+    if (!version.includes('beta')) {
+        await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
+    }
 
     // Check with ESLint
     const eslint = new ESLint();

dist/better-xcloud.meta.js

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

package.json

@@ -9,10 +9,10 @@
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.6",
+    "@types/bun": "^1.1.8",
-    "@types/node": "^20.16.1",
+    "@types/node": "^20.16.2",
     "@types/stylus": "^0.48.42",
-    "eslint": "^9.9.0",
+    "eslint": "^9.9.1",
     "eslint-plugin-compat": "^6.0.0",
     "stylus": "^0.63.0"
   },

src/assets/css/root.styl

@@ -168,16 +168,11 @@ div[class*=SupportedInputsBadge] {
     left: 0;
     z-index: 1;
     background: #0000008c;
-    display: none;
+    display: flex;
-    border-radius: 0 0 4px 0;
+    border-radius: 4px 0 4px 0;
     align-items: center;
     padding: 4px 8px;
 
-    a[class^=BaseItem-module__container]:focus &,
-    button[class^=BaseItem-module__container]:focus & {
-        display: flex;
-    }
-
     svg {
         width: 14px;
         height: 16px;
@@ -190,6 +185,7 @@ div[class*=SupportedInputsBadge] {
         line-height: 16px;
         font-size: 12px;
         font-weight: bold;
+        margin-left: 2px;
     }
 }
 

src/assets/css/settings-dialog.styl

@@ -60,11 +60,11 @@
     }
 
     a {
-        color: #5dc21e;
+        color: #1c9d1c;
         text-decoration: none;
 
         &:hover, &:focus {
-            color: #128112;
+            color: #5dc21e;
         }
     }
 }
@@ -470,9 +470,10 @@
 }
 
 .bx-suggest-link {
-    font-size: 12px;
+    font-size: 14px;
     display: inline-block;
-    margin-top: 10px;
+    margin-top: 4px;
+    padding: 4px;
 }
 
 .bx-suggest-row {

src/index.ts

@@ -38,6 +38,7 @@ import { getPref, StreamTouchController } from "./utils/settings-storages/global
 import { compressCss } from "@macros/build" with {type: "macro"};
 import { SettingsNavigationDialog } from "./modules/ui/dialog/settings-dialog";
 import { StreamUiHandler } from "./modules/stream/stream-ui";
+import { UserAgent } from "./utils/user-agent";
 
 
 // Handle login page
@@ -70,26 +71,65 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
 .bx-reload-overlay {
     position: fixed;
     top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
     background: #000000cc;
     z-index: 9999;
-    width: 100%;
-    line-height: 100vh;
     color: #fff;
     text-align: center;
     font-weight: 400;
     font-family: "Segoe UI", Arial, Helvetica, sans-serif;
     font-size: 1.3rem;
 }
+
+.bx-reload-overlay *:focus {
+    outline: none !important;
+}
+
+.bx-reload-overlay > div {
+    margin: 0 auto;
+}
+
+.bx-reload-overlay a {
+    text-decoration: none;
+    display: inline-block;
+    background: #107c10;
+    color: white;
+    border-radius: 4px;
+    padding: 6px;
+}
 `);
+
+    const isSafari = UserAgent.isSafari();
+    let $secondaryAction: HTMLElement;
+    if (isSafari) {
+        $secondaryAction = CE('p', {}, t('settings-reloading'));
+    } else {
+        $secondaryAction = CE('a', {
+            href: 'https://better-xcloud.github.io/troubleshooting',
+            target: '_blank',
+        }, '🤓 ' + t('how-to-fix'));
+    }
+
     const $fragment = document.createDocumentFragment();
     $fragment.appendChild(CE('style', {}, css));
-    $fragment.appendChild(CE('div', {'class': 'bx-reload-overlay'}, t('safari-failed-message')));
+    $fragment.appendChild(CE('div',{
+        class: 'bx-reload-overlay',
+    },
+        CE('div', {},
+            CE('p', {}, t('load-failed-message')),
+            $secondaryAction,
+        ),
+    ));
 
     document.documentElement.appendChild($fragment);
 
-    // Reload the page
+    // Reload the page if using Safari
     // @ts-ignore
-    window.location.reload(true);
+    isSafari && window.location.reload(true);
 
     // Stop processing the script
     throw new Error('[Better xCloud] Executing workaround for Safari');

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

@@ -913,7 +913,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
                 href: 'https://better-xcloud.github.io/guide/android-webview-tweaks/',
                 target: '_blank',
                 tabindex: 0,
-            }, t('how-to-improve-app-performance')),
+            }, '🤓 ' + t('how-to-improve-app-performance')),
 
             BX_FLAGS.DeviceInfo.deviceType.includes('android') && !hasRecommendedSettings && CE('a', {
                 class: 'bx-suggest-link bx-focusable',

src/modules/ui/game-tile.ts

@@ -1,6 +1,6 @@
 import { BxEvent } from "@/utils/bx-event";
 import { BxIcon } from "@/utils/bx-icon";
-import { CE, createSvgIcon, getReactProps } from "@/utils/html";
+import { CE, createSvgIcon, getReactProps, isElementVisible } from "@/utils/html";
 import { XcloudApi } from "@/utils/xcloud-api";
 
 export class GameTile {
@@ -23,6 +23,11 @@ export class GameTile {
     }
 
     static async #showWaitTime($elm: HTMLElement, productId: string) {
+        if (($elm as any).hasWaitTime) {
+            return;
+        }
+        ($elm as any).hasWaitTime = true;
+
         let totalWaitTime;
 
         const api = XcloudApi.getInstance();
@@ -34,7 +39,7 @@ export class GameTile {
             }
         }
 
-        if (typeof totalWaitTime === 'number' && $elm.isConnected) {
+        if (typeof totalWaitTime === 'number' && isElementVisible($elm)) {
             const $div = CE('div', {'class': 'bx-game-tile-wait-time'},
                 createSvgIcon(BxIcon.PLAYTIME),
                 CE('span', {}, GameTile.#secondsToHms(totalWaitTime)),
@@ -43,45 +48,61 @@ export class GameTile {
         }
     }
 
-    static requestWaitTime($elm: HTMLElement, productId: string) {
+    static #requestWaitTime($elm: HTMLElement, productId: string) {
         GameTile.#timeout && clearTimeout(GameTile.#timeout);
         GameTile.#timeout = window.setTimeout(async () => {
-            if (!($elm as any).hasWaitTime) {
+            GameTile.#showWaitTime($elm, productId);
-                ($elm as any).hasWaitTime = true;
+        }, 500);
-                GameTile.#showWaitTime($elm, productId);
+    }
+
+    static #findProductId($elm: HTMLElement): string | null {
+        let productId = null;
+
+        try {
+            if (($elm.tagName === 'BUTTON' && $elm.className.includes('MruGameCard')) || (($elm.tagName === 'A' && $elm.className.includes('GameCard')))) {
+                let props = getReactProps($elm.parentElement!);
+
+                // When context menu is enabled
+                if (Array.isArray(props.children)) {
+                    productId = props.children[0].props.productId;
+                } else {
+                    productId = props.children.props.productId;
+                }
+            } else if ($elm.tagName === 'A' && $elm.className.includes('GameItem'))  {
+                let props = getReactProps($elm.parentElement!);
+                props = props.children.props;
+                if (props.location !== 'NonStreamableGameItem') {
+                    if ('productId' in props) {
+                        productId = props.productId;
+                    } else {
+                        // Search page
+                        productId = props.children.props.productId;
+                    }
+                }
             }
-        }, 1000);
+        } catch (e) {}
+
+        return productId;
     }
 
     static setup() {
         window.addEventListener(BxEvent.NAVIGATION_FOCUS_CHANGED, e => {
-            let productId;
             const $elm = (e as any).element;
-            try {
+            const className = $elm.className || '';
-                if (($elm.tagName === 'BUTTON' && $elm.className.includes('MruGameCard')) || (($elm.tagName === 'A' && $elm.className.includes('GameCard')))) {
+            if (className.includes('MruGameCard')) {
-                    let props = getReactProps($elm.parentElement);
+                // Show the wait time of every games in the "Jump back in" section all at once
-
+                const $ol = $elm.closest('ol');
-                    // When context menu is enabled
+                if ($ol && !($ol as any).hasWaitTime) {
-                    if (Array.isArray(props.children)) {
+                    ($ol as any).hasWaitTime = true;
-                        productId = props.children[0].props.productId;
+                    $ol.querySelectorAll('button[class*=MruGameCard]').forEach(($elm: HTMLElement) => {
-                    } else {
+                        const productId = GameTile.#findProductId($elm);
-                        productId = props.children.props.productId;
+                        productId && GameTile.#showWaitTime($elm, productId);
-                    }
+                    });
-                } else if ($elm.tagName === 'A' && $elm.className.includes('GameItem'))  {
-                    let props = getReactProps($elm.parentElement);
-                    props = props.children.props;
-                    if (props.location !== 'NonStreamableGameItem') {
-                        if ('productId' in props) {
-                            productId = props.productId;
-                        } else {
-                            // Search page
-                            productId = props.children.props.productId;
-                        }
-                    }
                 }
-            } catch (e) {}
+            } else {
-
+                const productId = GameTile.#findProductId($elm);
-            productId && GameTile.requestWaitTime($elm, productId);
+                productId && GameTile.#requestWaitTime($elm, productId);
+            }
         });
     }
 }

src/utils/bx-event.ts

@@ -51,7 +51,7 @@ export namespace BxEvent {
 
     export const XCLOUD_POLLING_MODE_CHANGED = 'bx-xcloud-polling-mode-changed';
 
-    export const XCLOUD_RENDERING_COMPONENT = 'bx-xcloud-rendering-page';
+    export const XCLOUD_RENDERING_COMPONENT = 'bx-xcloud-rendering-component';
 
     export const XCLOUD_ROUTER_HISTORY_READY = 'bx-xcloud-router-history-ready';
 

src/utils/translation.ts

@@ -113,6 +113,7 @@ const Texts = {
     "fortnite-force-console-version": "Fortnite: force console version",
     "game-bar": "Game Bar",
     "getting-consoles-list": "Getting the list of consoles...",
+    "guide": "Guide",
     "help": "Help",
     "hide": "Hide",
     "hide-idle-cursor": "Hide mouse cursor on idle",
@@ -125,6 +126,7 @@ const Texts = {
     "highest-quality-note": "Your device may not be powerful enough to use these settings",
     "horizontal-scroll-sensitivity": "Horizontal scroll sensitivity",
     "horizontal-sensitivity": "Horizontal sensitivity",
+    "how-to-fix": "How to fix",
     "how-to-improve-app-performance": "How to improve app's performance",
     "ignore": "Ignore",
     "import": "Import",
@@ -137,6 +139,7 @@ const Texts = {
     "large": "Large",
     "layout": "Layout",
     "left-stick": "Left stick",
+    "load-failed-message": "Failed to run Better xCloud",
     "loading-screen": "Loading screen",
     "local-co-op": "Local co-op",
     "low-power": "Low power",
@@ -198,22 +201,22 @@ const Texts = {
         (e: any) => `Recommended settings for ${e.device}`,
         ,
         ,
-        ,
+        (e: any) => `Empfohlene Einstellungen für ${e.device}`,
         ,
         (e: any) => `Ajustes recomendados para ${e.device}`,
-        ,
+        (e: any) => `Paramètres recommandés pour ${e.device}`,
         (e: any) => `Configurazioni consigliate per ${e.device}`,
-        ,
+        (e: any) => `${e.device} の推奨設定`,
         (e: any) => `다음 기기에서 권장되는 설정: ${e.device}`,
+        (e: any) => `Zalecane ustawienia dla ${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}`,
-        ,
+        (e: any) => `${e.device} 的推荐设置`,
-        ,
+        (e: any) => `${e.device} 推薦的設定`,
     ],
     "reduce-animations": "Reduce UI animations",
     "region": "Region",
@@ -228,7 +231,6 @@ const Texts = {
     "rocket-always-show": "Always show",
     "rocket-animation": "Rocket animation",
     "rocket-hide-queue": "Hide when queuing",
-    "safari-failed-message": "Failed to run Better xCloud. Retrying, please wait...",
     "saturation": "Saturation",
     "save": "Save",
     "screen": "Screen",