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

This commit is contained in:
redphx
2024-08-30 20:04:40 +07:00
parent 339447d29c
commit a095370ab8
3 changed files with 57 additions and 40 deletions

View File

@@ -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) {
($elm as any).hasWaitTime = true;
GameTile.#showWaitTime($elm, productId);
GameTile.#showWaitTime($elm, productId);
}, 500);
}
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 {
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;
}
}
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);
});
}
} catch (e) {}
productId && GameTile.requestWaitTime($elm, productId);
} else {
const productId = GameTile.#findProductId($elm);
productId && GameTile.#requestWaitTime($elm, productId);
}
});
}
}