diff --git a/src/assets/css/stream.styl b/src/assets/css/stream.styl index 0fcd405..b13e362 100644 --- a/src/assets/css/stream.styl +++ b/src/assets/css/stream.styl @@ -53,3 +53,10 @@ div[data-testid=media-container] { align-self: center; background: #000; } + +#gamepass-dialog-root div[class^=Guide-module__guide] { + .bx-button { + overflow: visible; + margin-bottom: 12px; + } +} diff --git a/src/index.ts b/src/index.ts index b1aafee..01486ed 100644 --- a/src/index.ts +++ b/src/index.ts @@ -25,7 +25,7 @@ import { VibrationManager } from "@modules/vibration-manager"; import { overridePreloadState } from "@utils/preload-state"; import { patchAudioContext, patchCanvasContext, patchMeControl, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches"; import { AppInterface, STATES } from "@utils/global"; -import { injectStreamMenuButtons } from "@modules/stream/stream-ui"; +import { injectStreamMenuButtons, setupStreamUiEvents } from "@modules/stream/stream-ui"; import { BxLogger } from "@utils/bx-logger"; import { GameBar } from "./modules/game-bar/game-bar"; import { Screenshot } from "./utils/screenshot"; @@ -281,6 +281,7 @@ function main() { (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance(); BX_FLAGS.PreloadUi && setupStreamUi(); + setupStreamUiEvents(); StreamBadges.setupEvents(); StreamStats.setupEvents(); MkbHandler.setupEvents(); diff --git a/src/modules/stream/stream-badges.ts b/src/modules/stream/stream-badges.ts index 9a9d569..72cb339 100644 --- a/src/modules/stream/stream-badges.ts +++ b/src/modules/stream/stream-badges.ts @@ -340,15 +340,17 @@ export class StreamBadges { window.addEventListener(BxEvent.XCLOUD_GUIDE_SHOWN, async e => { const where = (e as any).where as XcloudGuideWhere; - if (where === XcloudGuideWhere.HOME && STATES.isPlaying) { - const $btnQuit = document.querySelector('#gamepass-dialog-root a[class*=QuitGameButton]'); - if (!$btnQuit) { - return; - } - - // Add badges - $btnQuit.insertAdjacentElement('beforebegin', await StreamBadges.getInstance().render()); + if (where !== XcloudGuideWhere.HOME || !STATES.isPlaying) { + return; } + + const $btnQuit = document.querySelector('#gamepass-dialog-root a[class*=QuitGameButton]'); + if (!$btnQuit) { + return; + } + + // Add badges + $btnQuit.insertAdjacentElement('beforebegin', await StreamBadges.getInstance().render()); }); } } diff --git a/src/modules/stream/stream-ui.ts b/src/modules/stream/stream-ui.ts index 15790b2..92ad4be 100644 --- a/src/modules/stream/stream-ui.ts +++ b/src/modules/stream/stream-ui.ts @@ -1,7 +1,7 @@ import { STATES } from "@utils/global.ts"; -import { createSvgIcon } from "@utils/html.ts"; +import { ButtonStyle, createButton, createSvgIcon } from "@utils/html.ts"; import { BxIcon } from "@utils/bx-icon"; -import { BxEvent } from "@utils/bx-event.ts"; +import { BxEvent, XcloudGuideWhere } from "@utils/bx-event.ts"; import { t } from "@utils/translation.ts"; import { StreamBadges } from "./stream-badges.ts"; import { StreamStats } from "./stream-stats.ts"; @@ -269,3 +269,39 @@ export function showStreamSettings(tabId: string) { $parent.addEventListener('click', onClick); } } + + +export function setupStreamUiEvents() { + window.addEventListener(BxEvent.XCLOUD_GUIDE_SHOWN, async e => { + const where = (e as any).where as XcloudGuideWhere; + + if (where !== XcloudGuideWhere.HOME || !STATES.isPlaying) { + return; + } + + const $btnQuit = document.querySelector('#gamepass-dialog-root a[class*=QuitGameButton]'); + if (!$btnQuit) { + return; + } + + // Add buttons + const $btnReload = createButton({ + label: t('reload-stream'), + style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE, + onClick: e => { + confirm(t('confirm-reload-stream')) && window.location.reload(); + }, + }); + + const $btnHome = createButton({ + label: t('back-to-home'), + style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE, + onClick: e => { + confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31)); + }, + }); + + $btnQuit.insertAdjacentElement('afterend', $btnReload); + $btnReload.insertAdjacentElement('afterend', $btnHome); + }); +}