mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-06-06 07:37:19 +02:00
Show the wait time of every games in the "Jump back in" section all at once
This commit is contained in:
parent
339447d29c
commit
a095370ab8
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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';
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user