marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-06 07:37:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/css/root.styl
View File

@ -168,16 +168,11 @@ div[class*=SupportedInputsBadge] {
left: 0;
z-index: 1;
background: #0000008c;
display: none;
border-radius: 0 0 4px 0;
display: flex;
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;
}
}

85
src/modules/ui/game-tile.ts
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);
}
});
}
}

2
src/utils/bx-event.ts
View File

@ -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';