marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-07 08:07:18 +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; left: 0;
z-index: 1; z-index: 1;
background: #0000008c; background: #0000008c;
display: none; display: flex;
border-radius: 0 0 4px 0; border-radius: 4px 0 4px 0;
align-items: center; align-items: center;
padding: 4px 8px; padding: 4px 8px;
a[class^=BaseItem-module__container]:focus &,
button[class^=BaseItem-module__container]:focus & {
display: flex;
}
svg { svg {
width: 14px; width: 14px;
height: 16px; height: 16px;
@ -190,6 +185,7 @@ div[class*=SupportedInputsBadge] {
line-height: 16px; line-height: 16px;
font-size: 12px; font-size: 12px;
font-weight: bold; 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 { BxEvent } from "@/utils/bx-event";
import { BxIcon } from "@/utils/bx-icon"; 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"; import { XcloudApi } from "@/utils/xcloud-api";
export class GameTile { export class GameTile {
@ -23,6 +23,11 @@ export class GameTile {
} }
static async #showWaitTime($elm: HTMLElement, productId: string) { static async #showWaitTime($elm: HTMLElement, productId: string) {
if (($elm as any).hasWaitTime) {
return;
}
($elm as any).hasWaitTime = true;
let totalWaitTime; let totalWaitTime;
const api = XcloudApi.getInstance(); 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'}, const $div = CE('div', {'class': 'bx-game-tile-wait-time'},
createSvgIcon(BxIcon.PLAYTIME), createSvgIcon(BxIcon.PLAYTIME),
CE('span', {}, GameTile.#secondsToHms(totalWaitTime)), 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 && clearTimeout(GameTile.#timeout);
GameTile.#timeout = window.setTimeout(async () => { 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() { static setup() {
window.addEventListener(BxEvent.NAVIGATION_FOCUS_CHANGED, e => { window.addEventListener(BxEvent.NAVIGATION_FOCUS_CHANGED, e => {
let productId;
const $elm = (e as any).element; 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);
}
}); });
} }
} }

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_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'; export const XCLOUD_ROUTER_HISTORY_READY = 'bx-xcloud-router-history-ready';