Refactor header.ts

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();

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);
             });

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,21 +7,9 @@ import { RemotePlay } from "@modules/remote-play";
 import { t } from "@utils/translation";
 import { setupSettingsUi } from "./global-settings";
 
-
-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'],
+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,
@@ -29,13 +17,10 @@ function injectSettingsButton($parent?: HTMLElement) {
             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,28 +32,45 @@ function injectSettingsButton($parent?: HTMLElement) {
         },
     });
 
+    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
-    $headerFragment.appendChild($settingsBtn);
-    $parent.appendChild($headerFragment);
-}
+        $parent.appendChild(HeaderSection.#$buttonsWrapper);
+    }
 
-
-export function checkHeader() {
+    static 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);
+            HeaderSection.#injectSettingsButton($rightHeader as HTMLElement);
+        }
     }
-}
 
+    static showRemotePlayButton() {
+        HeaderSection.#$remotePlayBtn.classList.remove('bx-gone');
+    }
 
-export function watchHeader() {
+    static watchHeader() {
         const $header = document.querySelector('#PageContent header');
         if (!$header) {
             return;
@@ -77,9 +79,10 @@ export function watchHeader() {
         let timeout: number | null;
         const observer = new MutationObserver(mutationList => {
             timeout && clearTimeout(timeout);
-        timeout = window.setTimeout(checkHeader, 2000);
+            timeout = window.setTimeout(HeaderSection.checkHeader, 2000);
         });
         observer.observe($header, {subtree: true, childList: true});
 
-    checkHeader();
+        HeaderSection.checkHeader();
+    }
 }

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);
 }

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;