From 5bfcf3a0444d4bfecaf541c6cce1e949a0a76b79 Mon Sep 17 00:00:00 2001 From: redphx <96280+redphx@users.noreply.github.com> Date: Sat, 13 Jul 2024 18:00:15 +0700 Subject: [PATCH] Refactor header.ts --- src/index.ts | 9 ++- src/modules/remote-play.ts | 5 ++ src/modules/ui/header.ts | 117 ++++++++++++++++---------------- src/utils/history.ts | 4 +- src/utils/xcloud-interceptor.ts | 3 - 5 files changed, 73 insertions(+), 65 deletions(-) diff --git a/src/index.ts b/src/index.ts index a5f6b82..46e9b20 100644 --- a/src/index.ts +++ b/src/index.ts @@ -16,7 +16,6 @@ import { PrefKey, getPref } from "@utils/preferences"; import { LoadingScreen } from "@modules/loading-screen"; import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider"; import { TouchController } from "@modules/touch-controller"; -import { watchHeader } from "@modules/ui/header"; import { checkForUpdate, disablePwa } from "@utils/utils"; import { Patcher } from "@modules/patcher"; import { RemotePlay } from "@modules/remote-play"; @@ -34,6 +33,7 @@ import { GuideMenu, GuideMenuTab } from "./modules/ui/guide-menu"; import { StreamSettings } from "./modules/stream/stream-settings"; import { updateVideoPlayer } from "./modules/stream/stream-settings-utils"; import { UiSection } from "./enums/ui-sections"; +import { HeaderSection } from "./modules/ui/header"; // Handle login page @@ -127,11 +127,11 @@ window.history.replaceState = patchHistoryMethod('replaceState'); window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => { STATES.supportedRegion = false; - window.setTimeout(watchHeader, 2000); + window.setTimeout(HeaderSection.watchHeader, 2000); }); window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => { - watchHeader(); + HeaderSection.watchHeader(); }); window.addEventListener(BxEvent.STREAM_LOADING, e => { @@ -348,6 +348,9 @@ function main() { STATES.pointerServerPort = AppInterface.startPointerServer() || 9269; BxLogger.info('startPointerServer', 'Port', STATES.pointerServerPort.toString()); } + + // Preload Remote Play + getPref(PrefKey.REMOTE_PLAY_ENABLED) && BX_FLAGS.PreloadRemotePlay && RemotePlay.preload(); } main(); diff --git a/src/modules/remote-play.ts b/src/modules/remote-play.ts index c5c96e7..27c89bd 100644 --- a/src/modules/remote-play.ts +++ b/src/modules/remote-play.ts @@ -7,6 +7,7 @@ import { getPref, PrefKey, setPref } from "@utils/preferences"; import { t } from "@utils/translation"; import { localRedirect } from "@modules/ui/ui"; import { BxLogger } from "@utils/bx-logger"; +import { HeaderSection } from "./ui/header"; const LOG_TAG = 'RemotePlay'; @@ -97,6 +98,10 @@ export class RemotePlay { RemotePlay.#getXhomeToken(() => { RemotePlay.#getConsolesList(() => { BxLogger.info(LOG_TAG, 'Consoles', RemotePlay.#CONSOLES); + if (RemotePlay.#CONSOLES && RemotePlay.#CONSOLES.length > 0) { + STATES.supportedRegion && HeaderSection.showRemotePlayButton(); + } + RemotePlay.#renderConsoles(); BxEvent.dispatch(window, BxEvent.REMOTE_PLAY_READY); }); diff --git a/src/modules/ui/header.ts b/src/modules/ui/header.ts index 4f81dd7..28af3bf 100644 --- a/src/modules/ui/header.ts +++ b/src/modules/ui/header.ts @@ -1,5 +1,5 @@ import { SCRIPT_VERSION } from "@utils/global"; -import { createButton, ButtonStyle } from "@utils/html"; +import { createButton, ButtonStyle, CE } from "@utils/html"; import { BxIcon } from "@utils/bx-icon"; import { getPreferredServerRegion } from "@utils/region"; import { PrefKey, getPref } from "@utils/preferences"; @@ -7,35 +7,20 @@ import { RemotePlay } from "@modules/remote-play"; import { t } from "@utils/translation"; import { setupSettingsUi } from "./global-settings"; +export class HeaderSection { + static #$remotePlayBtn = createButton({ + classes: ['bx-header-remote-play-button', 'bx-gone'], + icon: BxIcon.REMOTE_PLAY, + title: t('remote-play'), + style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE, + onClick: e => { + RemotePlay.togglePopup(); + }, + }); -function injectSettingsButton($parent?: HTMLElement) { - if (!$parent) { - return; - } - - const PREF_PREFERRED_REGION = getPreferredServerRegion(true); - const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION); - - const $headerFragment = document.createDocumentFragment(); - - // Remote Play button - if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) { - const $remotePlayBtn = createButton({ - classes: ['bx-header-remote-play-button'], - icon: BxIcon.REMOTE_PLAY, - title: t('remote-play'), - style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE, - onClick: e => { - RemotePlay.togglePopup(); - }, - }); - $headerFragment.appendChild($remotePlayBtn); - } - - // Setup Settings button - const $settingsBtn = createButton({ + static #$settingsBtn = createButton({ classes: ['bx-header-settings-button'], - label: PREF_PREFERRED_REGION, + label: '???', style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT, onClick: e => { setupSettingsUi(); @@ -47,39 +32,57 @@ function injectSettingsButton($parent?: HTMLElement) { }, }); - // Show new update status - if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) { - $settingsBtn.setAttribute('data-update-available', 'true'); + static #$buttonsWrapper = CE('div', {}, + getPref(PrefKey.REMOTE_PLAY_ENABLED) ? HeaderSection.#$remotePlayBtn : null, + HeaderSection.#$settingsBtn, + ); + + static #injectSettingsButton($parent?: HTMLElement) { + if (!$parent) { + return; + } + + const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION); + + // Setup Settings button + const $settingsBtn = HeaderSection.#$settingsBtn; + $settingsBtn.querySelector('span')!.textContent = getPreferredServerRegion(true); + + // Show new update status + if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) { + $settingsBtn.setAttribute('data-update-available', 'true'); + } + + // Add the Settings button to the web page + $parent.appendChild(HeaderSection.#$buttonsWrapper); } - // Add the Settings button to the web page - $headerFragment.appendChild($settingsBtn); - $parent.appendChild($headerFragment); -} + static checkHeader() { + const $button = document.querySelector('.bx-header-settings-button'); - -export function checkHeader() { - const $button = document.querySelector('.bx-header-settings-button'); - - if (!$button) { - const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]'); - injectSettingsButton($rightHeader as HTMLElement); - } -} - - -export function watchHeader() { - const $header = document.querySelector('#PageContent header'); - if (!$header) { - return; + if (!$button) { + const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]'); + HeaderSection.#injectSettingsButton($rightHeader as HTMLElement); + } } - let timeout: number | null; - const observer = new MutationObserver(mutationList => { - timeout && clearTimeout(timeout); - timeout = window.setTimeout(checkHeader, 2000); - }); - observer.observe($header, {subtree: true, childList: true}); + static showRemotePlayButton() { + HeaderSection.#$remotePlayBtn.classList.remove('bx-gone'); + } - checkHeader(); + static watchHeader() { + const $header = document.querySelector('#PageContent header'); + if (!$header) { + return; + } + + let timeout: number | null; + const observer = new MutationObserver(mutationList => { + timeout && clearTimeout(timeout); + timeout = window.setTimeout(HeaderSection.checkHeader, 2000); + }); + observer.observe($header, {subtree: true, childList: true}); + + HeaderSection.checkHeader(); + } } diff --git a/src/utils/history.ts b/src/utils/history.ts index e1e7694..7d314c4 100644 --- a/src/utils/history.ts +++ b/src/utils/history.ts @@ -1,7 +1,7 @@ import { BxEvent } from "@utils/bx-event"; import { LoadingScreen } from "@modules/loading-screen"; import { RemotePlay } from "@modules/remote-play"; -import { checkHeader } from "@modules/ui/header"; +import { HeaderSection } from "@/modules/ui/header"; export function patchHistoryMethod(type: 'pushState' | 'replaceState') { const orig = window.history[type]; @@ -34,7 +34,7 @@ export function onHistoryChanged(e: PopStateEvent) { RemotePlay.detachPopup(); LoadingScreen.reset(); - window.setTimeout(checkHeader, 2000); + window.setTimeout(HeaderSection.watchHeader, 2000); BxEvent.dispatch(window, BxEvent.STREAM_STOPPED); } diff --git a/src/utils/xcloud-interceptor.ts b/src/utils/xcloud-interceptor.ts index 557769d..2c5b9d8 100644 --- a/src/utils/xcloud-interceptor.ts +++ b/src/utils/xcloud-interceptor.ts @@ -25,9 +25,6 @@ class XcloudInterceptor { const obj = await response.clone().json(); - // Preload Remote Play - getPref(PrefKey.REMOTE_PLAY_ENABLED) && BX_FLAGS.PreloadRemotePlay && RemotePlay.preload(); - // Store xCloud token RemotePlay.XCLOUD_TOKEN = obj.gsToken;