From 1a2fb6c89acabb0e39826a779fd1cdae7f3089eb Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Sat, 6 Apr 2024 15:29:40 +0700
Subject: [PATCH] Only init Settings UI when necessary

---
 better-xcloud.user.js | 99 +++++++++++++++++++++++--------------------
 1 file changed, 54 insertions(+), 45 deletions(-)

diff --git a/better-xcloud.user.js b/better-xcloud.user.js
index c855ed2..9cd5df4 100644
--- a/better-xcloud.user.js
+++ b/better-xcloud.user.js
@@ -10367,59 +10367,17 @@ function interceptHttpRequests() {
 }
 
 
-function injectSettingsButton($parent) {
-    if (!$parent) {
+function setupSettingsUi() {
+    // Avoid rendering the Settings multiple times
+    if (document.querySelector('.bx-settings-container')) {
         return;
     }
 
     const PREF_PREFERRED_REGION = getPreferredServerRegion();
     const PREF_LATEST_VERSION = getPref(Preferences.LATEST_VERSION);
 
-    const $headerFragment = document.createDocumentFragment();
     let $reloadBtnWrapper;
 
-    // Remote Play button
-    if (getPref(Preferences.REMOTE_PLAY_ENABLED)) {
-        const $remotePlayBtn = createButton({
-            classes: ['bx-remote-play-button'],
-            icon: Icon.REMOTE_PLAY,
-            title: t('remote-play'),
-            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
-            onClick: e => {
-                RemotePlay.togglePopup();
-            },
-        });
-        $headerFragment.appendChild($remotePlayBtn);
-    }
-
-
-    // Setup Settings button
-    const $settingsBtn = createButton({
-        classes: ['bx-settings-button'],
-        label: PREF_PREFERRED_REGION,
-        style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
-        onClick: e => {
-            const $settings = document.querySelector('.bx-settings-container');
-            $settings.classList.toggle('bx-gone');
-            window.scrollTo(0, 0);
-            document.activeElement && document.activeElement.blur();
-        },
-    });
-
-    // Show new update status
-    if (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);
-
-    // Avoid rendering the Settings multiple times
-    if (document.querySelector('.bx-settings-container')) {
-        return;
-    }
-
     // Setup Settings UI
     const $container = CE('div', {
         'class': 'bx-settings-container bx-gone',
@@ -10713,6 +10671,57 @@ function injectSettingsButton($parent) {
     $pageContent.parentNode.insertBefore($container, $pageContent);
 }
 
+
+function injectSettingsButton($parent) {
+    if (!$parent) {
+        return;
+    }
+
+    const PREF_PREFERRED_REGION = getPreferredServerRegion();
+    const PREF_LATEST_VERSION = getPref(Preferences.LATEST_VERSION);
+
+    const $headerFragment = document.createDocumentFragment();
+
+    // Remote Play button
+    if (getPref(Preferences.REMOTE_PLAY_ENABLED)) {
+        const $remotePlayBtn = createButton({
+            classes: ['bx-remote-play-button'],
+            icon: Icon.REMOTE_PLAY,
+            title: t('remote-play'),
+            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                RemotePlay.togglePopup();
+            },
+        });
+        $headerFragment.appendChild($remotePlayBtn);
+    }
+
+
+    // Setup Settings button
+    const $settingsBtn = createButton({
+        classes: ['bx-settings-button'],
+        label: PREF_PREFERRED_REGION,
+        style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
+        onClick: e => {
+            setupSettingsUi();
+
+            const $settings = document.querySelector('.bx-settings-container');
+            $settings.classList.toggle('bx-gone');
+            window.scrollTo(0, 0);
+            document.activeElement && document.activeElement.blur();
+        },
+    });
+
+    // Show new update status
+    if (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);
+}
+
 function getVideoPlayerFilterStyle() {
     const filters = [];