Show the wait time of every games in the "Jump back in" section all at once

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/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,23 +48,19 @@ 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) {
-                ($elm as any).hasWaitTime = true;
             GameTile.#showWaitTime($elm, productId);
-            }
+        }, 500);
-        }, 1000);
     }
 
-    static setup() {
+    static #findProductId($elm: HTMLElement): string | null {
-        window.addEventListener(BxEvent.NAVIGATION_FOCUS_CHANGED, e => {
+        let productId = null;
-            let productId;
+
-            const $elm = (e as any).element;
         try {
             if (($elm.tagName === 'BUTTON' && $elm.className.includes('MruGameCard')) || (($elm.tagName === 'A' && $elm.className.includes('GameCard')))) {
-                    let props = getReactProps($elm.parentElement);
+                let props = getReactProps($elm.parentElement!);
 
                 // When context menu is enabled
                 if (Array.isArray(props.children)) {
@@ -68,7 +69,7 @@ export class GameTile {
                     productId = props.children.props.productId;
                 }
             } else if ($elm.tagName === 'A' && $elm.className.includes('GameItem'))  {
-                    let props = getReactProps($elm.parentElement);
+                let props = getReactProps($elm.parentElement!);
                 props = props.children.props;
                 if (props.location !== 'NonStreamableGameItem') {
                     if ('productId' in props) {
@@ -81,7 +82,27 @@ export class GameTile {
             }
         } catch (e) {}
 
-            productId && GameTile.requestWaitTime($elm, productId);
+        return productId;
+    }
+
+    static setup() {
+        window.addEventListener(BxEvent.NAVIGATION_FOCUS_CHANGED, e => {
+            const $elm = (e as any).element;
+            const className = $elm.className || '';
+            if (className.includes('MruGameCard')) {
+                // Show the wait time of every games in the "Jump back in" section all at once
+                const $ol = $elm.closest('ol');
+                if ($ol && !($ol as any).hasWaitTime) {
+                    ($ol as any).hasWaitTime = true;
+                    $ol.querySelectorAll('button[class*=MruGameCard]').forEach(($elm: HTMLElement) => {
+                        const productId = GameTile.#findProductId($elm);
+                        productId && GameTile.#showWaitTime($elm, productId);
+                    });
+                }
+            } else {
+                const productId = GameTile.#findProductId($elm);
+                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';