Fix touch problem with Stream Menu

dist/better-xcloud.meta.js

@@ -1,5 +1,5 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      5.5.2
+// @version      5.5.3
 // ==/UserScript==

dist/better-xcloud.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      5.5.2
+// @version      5.5.4-beta
 // @description  Improve Xbox Cloud Gaming (xCloud) experience
 // @author       redphx
 // @license      MIT
@@ -120,7 +120,7 @@ function deepClone(obj) {
     return {};
   return JSON.parse(JSON.stringify(obj));
 }
-var SCRIPT_VERSION = "5.5.2", AppInterface = window.AppInterface;
+var SCRIPT_VERSION = "5.5.4-beta", AppInterface = window.AppInterface;
 UserAgent.init();
 var userAgent = window.navigator.userAgent.toLowerCase(), isTv = userAgent.includes("smart-tv") || userAgent.includes("smarttv") || /\baft.*\b/.test(userAgent), isVr = window.navigator.userAgent.includes("VR") && window.navigator.userAgent.includes("OculusBrowser"), browserHasTouchSupport = "ontouchstart" in window || navigator.maxTouchPoints > 0, userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport, STATES = {
   supportedRegion: !0,
@@ -149,7 +149,7 @@ var userAgent = window.navigator.userAgent.toLowerCase(), isTv = userAgent.inclu
 
 var BxEvent;
 ((BxEvent) => {
-  BxEvent.JUMP_BACK_IN_READY = "bx-jump-back-in-ready", BxEvent.POPSTATE = "bx-popstate", BxEvent.TITLE_INFO_READY = "bx-title-info-ready", BxEvent.SETTINGS_CHANGED = "bx-settings-changed", BxEvent.STREAM_LOADING = "bx-stream-loading", BxEvent.STREAM_STARTING = "bx-stream-starting", BxEvent.STREAM_STARTED = "bx-stream-started", BxEvent.STREAM_PLAYING = "bx-stream-playing", BxEvent.STREAM_STOPPED = "bx-stream-stopped", BxEvent.STREAM_ERROR_PAGE = "bx-stream-error-page", BxEvent.STREAM_WEBRTC_CONNECTED = "bx-stream-webrtc-connected", BxEvent.STREAM_WEBRTC_DISCONNECTED = "bx-stream-webrtc-disconnected", BxEvent.STREAM_SESSION_READY = "bx-stream-session-ready", BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED = "bx-custom-touch-layouts-loaded", BxEvent.TOUCH_LAYOUT_MANAGER_READY = "bx-touch-layout-manager-ready", BxEvent.REMOTE_PLAY_READY = "bx-remote-play-ready", BxEvent.REMOTE_PLAY_FAILED = "bx-remote-play-failed", BxEvent.XCLOUD_SERVERS_READY = "bx-servers-ready", BxEvent.XCLOUD_SERVERS_UNAVAILABLE = "bx-servers-unavailable", BxEvent.DATA_CHANNEL_CREATED = "bx-data-channel-created", BxEvent.GAME_BAR_ACTION_ACTIVATED = "bx-game-bar-action-activated", BxEvent.MICROPHONE_STATE_CHANGED = "bx-microphone-state-changed", BxEvent.CAPTURE_SCREENSHOT = "bx-capture-screenshot", BxEvent.POINTER_LOCK_REQUESTED = "bx-pointer-lock-requested", BxEvent.POINTER_LOCK_EXITED = "bx-pointer-lock-exited", BxEvent.NAVIGATION_FOCUS_CHANGED = "bx-nav-focus-changed", BxEvent.XCLOUD_DIALOG_SHOWN = "bx-xcloud-dialog-shown", BxEvent.XCLOUD_DIALOG_DISMISSED = "bx-xcloud-dialog-dismissed", BxEvent.XCLOUD_GUIDE_MENU_SHOWN = "bx-xcloud-guide-menu-shown", BxEvent.XCLOUD_POLLING_MODE_CHANGED = "bx-xcloud-polling-mode-changed", BxEvent.XCLOUD_RENDERING_COMPONENT = "bx-xcloud-rendering-page";
+  BxEvent.JUMP_BACK_IN_READY = "bx-jump-back-in-ready", BxEvent.POPSTATE = "bx-popstate", BxEvent.TITLE_INFO_READY = "bx-title-info-ready", BxEvent.SETTINGS_CHANGED = "bx-settings-changed", BxEvent.STREAM_LOADING = "bx-stream-loading", BxEvent.STREAM_STARTING = "bx-stream-starting", BxEvent.STREAM_STARTED = "bx-stream-started", BxEvent.STREAM_PLAYING = "bx-stream-playing", BxEvent.STREAM_STOPPED = "bx-stream-stopped", BxEvent.STREAM_ERROR_PAGE = "bx-stream-error-page", BxEvent.STREAM_WEBRTC_CONNECTED = "bx-stream-webrtc-connected", BxEvent.STREAM_WEBRTC_DISCONNECTED = "bx-stream-webrtc-disconnected", BxEvent.STREAM_SESSION_READY = "bx-stream-session-ready", BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED = "bx-custom-touch-layouts-loaded", BxEvent.TOUCH_LAYOUT_MANAGER_READY = "bx-touch-layout-manager-ready", BxEvent.REMOTE_PLAY_READY = "bx-remote-play-ready", BxEvent.REMOTE_PLAY_FAILED = "bx-remote-play-failed", BxEvent.XCLOUD_SERVERS_READY = "bx-servers-ready", BxEvent.XCLOUD_SERVERS_UNAVAILABLE = "bx-servers-unavailable", BxEvent.DATA_CHANNEL_CREATED = "bx-data-channel-created", BxEvent.GAME_BAR_ACTION_ACTIVATED = "bx-game-bar-action-activated", BxEvent.MICROPHONE_STATE_CHANGED = "bx-microphone-state-changed", BxEvent.CAPTURE_SCREENSHOT = "bx-capture-screenshot", BxEvent.POINTER_LOCK_REQUESTED = "bx-pointer-lock-requested", BxEvent.POINTER_LOCK_EXITED = "bx-pointer-lock-exited", BxEvent.NAVIGATION_FOCUS_CHANGED = "bx-nav-focus-changed", BxEvent.XCLOUD_DIALOG_SHOWN = "bx-xcloud-dialog-shown", BxEvent.XCLOUD_DIALOG_DISMISSED = "bx-xcloud-dialog-dismissed", BxEvent.XCLOUD_GUIDE_MENU_SHOWN = "bx-xcloud-guide-menu-shown", BxEvent.XCLOUD_POLLING_MODE_CHANGED = "bx-xcloud-polling-mode-changed", BxEvent.XCLOUD_RENDERING_COMPONENT = "bx-xcloud-rendering-page", BxEvent.XCLOUD_ROUTER_HISTORY_READY = "bx-xcloud-router-history-ready";
   function dispatch(target, eventName, data) {
     if (!target)
       return;
@@ -813,6 +813,79 @@ class StreamStats {
   }
 }
 
+class BaseSettingsStore {
+  storage;
+  storageKey;
+  _settings;
+  definitions;
+  constructor(storageKey, definitions) {
+    this.storage = window.localStorage, this.storageKey = storageKey;
+    for (let settingId in definitions) {
+      const setting = definitions[settingId];
+      setting.ready && setting.ready.call(this, setting);
+    }
+    this.definitions = definitions, this._settings = null;
+  }
+  get settings() {
+    if (this._settings)
+      return this._settings;
+    const settings = JSON.parse(this.storage.getItem(this.storageKey) || "{}");
+    return this._settings = settings, settings;
+  }
+  getDefinition(key) {
+    if (!this.definitions[key]) {
+      const error = "Request invalid definition: " + key;
+      throw alert(error), Error(error);
+    }
+    return this.definitions[key];
+  }
+  getSetting(key) {
+    if (typeof key === "undefined") {
+      debugger;
+      return;
+    }
+    if (this.definitions[key].unsupported)
+      return this.definitions[key].default;
+    if (!(key in this.settings))
+      this.settings[key] = this.validateValue(key, null);
+    return this.settings[key];
+  }
+  setSetting(key, value, emitEvent = !1) {
+    return value = this.validateValue(key, value), this.settings[key] = value, this.saveSettings(), emitEvent && BxEvent.dispatch(window, BxEvent.SETTINGS_CHANGED, {
+      storageKey: this.storageKey,
+      settingKey: key,
+      settingValue: value
+    }), value;
+  }
+  saveSettings() {
+    this.storage.setItem(this.storageKey, JSON.stringify(this.settings));
+  }
+  validateValue(key, value) {
+    const def = this.definitions[key];
+    if (!def)
+      return value;
+    if (typeof value === "undefined" || value === null)
+      value = def.default;
+    if ("min" in def)
+      value = Math.max(def.min, value);
+    if ("max" in def)
+      value = Math.min(def.max, value);
+    if ("options" in def && !(value in def.options))
+      value = def.default;
+    else if ("multipleOptions" in def) {
+      if (value.length) {
+        const validOptions = Object.keys(def.multipleOptions);
+        value.forEach((item2, idx) => {
+          validOptions.indexOf(item2) === -1 && value.splice(idx, 1);
+        });
+      }
+      if (!value.length)
+        value = def.default;
+    }
+    return value;
+  }
+}
+
 class SettingElement {
   static #renderOptions(key, setting, currentValue, onChange) {
     const $control = CE("select", {
@@ -985,7 +1058,9 @@ class SettingElement {
       type = "number";
     else
       type = "checkbox";
-    const params = Object.assign(overrideParams, definition.params || {});
+    let params = {};
+    if ("params" in definition)
+      params = Object.assign(overrideParams, definition.params || {});
     if (params.disabled)
       currentValue = definition.default;
     return SettingElement.render(type, key, definition, currentValue, (e, value) => {
@@ -994,79 +1069,6 @@ class SettingElement {
   }
 }
 
-class BaseSettingsStore {
-  storage;
-  storageKey;
-  _settings;
-  definitions;
-  constructor(storageKey, definitions) {
-    this.storage = window.localStorage, this.storageKey = storageKey;
-    for (let settingId in definitions) {
-      const setting = definitions[settingId];
-      setting.ready && setting.ready.call(this, setting);
-    }
-    this.definitions = definitions, this._settings = null;
-  }
-  get settings() {
-    if (this._settings)
-      return this._settings;
-    const settings = JSON.parse(this.storage.getItem(this.storageKey) || "{}");
-    return this._settings = settings, settings;
-  }
-  getDefinition(key) {
-    if (!this.definitions[key]) {
-      const error = "Request invalid definition: " + key;
-      throw alert(error), Error(error);
-    }
-    return this.definitions[key];
-  }
-  getSetting(key) {
-    if (typeof key === "undefined") {
-      debugger;
-      return;
-    }
-    if (this.definitions[key].unsupported)
-      return this.definitions[key].default;
-    if (!(key in this.settings))
-      this.settings[key] = this.validateValue(key, null);
-    return this.settings[key];
-  }
-  setSetting(key, value, emitEvent = !1) {
-    return value = this.validateValue(key, value), this.settings[key] = value, this.saveSettings(), emitEvent && BxEvent.dispatch(window, BxEvent.SETTINGS_CHANGED, {
-      storageKey: this.storageKey,
-      settingKey: key,
-      settingValue: value
-    }), value;
-  }
-  saveSettings() {
-    this.storage.setItem(this.storageKey, JSON.stringify(this.settings));
-  }
-  validateValue(key, value) {
-    const def = this.definitions[key];
-    if (!def)
-      return value;
-    if (typeof value === "undefined" || value === null)
-      value = def.default;
-    if ("min" in def)
-      value = Math.max(def.min, value);
-    if ("max" in def)
-      value = Math.min(def.max, value);
-    if ("options" in def && !(value in def.options))
-      value = def.default;
-    else if ("multipleOptions" in def) {
-      if (value.length) {
-        const validOptions = Object.keys(def.multipleOptions);
-        value.forEach((item2, idx) => {
-          validOptions.indexOf(item2) === -1 && value.splice(idx, 1);
-        });
-      }
-      if (!value.length)
-        value = def.default;
-    }
-    return value;
-  }
-}
-
 function getSupportedCodecProfiles() {
   const options = {
     default: t("default")
@@ -3592,14 +3594,34 @@ if (getPref("block_social_features"))
 if (BX_FLAGS.FeatureGates)
   FeatureGates = Object.assign(BX_FLAGS.FeatureGates, FeatureGates);
 
+class PatcherUtils {
+  static indexOf(txt, searchString, startIndex, maxRange) {
+    const index = txt.indexOf(searchString, startIndex);
+    if (index < 0 || maxRange && index - startIndex > maxRange)
+      return -1;
+    return index;
+  }
+  static lastIndexOf(txt, searchString, startIndex, maxRange) {
+    const index = txt.lastIndexOf(searchString, startIndex);
+    if (index < 0 || maxRange && startIndex - index > maxRange)
+      return -1;
+    return index;
+  }
+  static insertAt(txt, index, insertString) {
+    return txt.substring(0, index) + insertString + txt.substring(index);
+  }
+  static replaceWith(txt, index, fromString, toString) {
+    return txt.substring(0, index) + toString + txt.substring(index + fromString.length);
+  }
+}
 var ENDING_CHUNKS_PATCH_NAME = "loadingEndingChunks", LOG_TAG3 = "Patcher", PATCHES = {
   disableAiTrack(str) {
     const index = str.indexOf(".track=function(");
     if (index < 0)
       return !1;
-    if (str.substring(0, index + 200).includes('"AppInsightsCore'))
+    if (PatcherUtils.indexOf(str, '"AppInsightsCore', index, 200) < 0)
       return !1;
-    return str.substring(0, index) + ".track=function(e){},!!function(" + str.substring(index + ".track=function(".length);
+    return PatcherUtils.replaceWith(str, index, ".track=function(", ".track=function(e){},!!function(");
   },
   disableTelemetry(str) {
     if (!str.includes(".disableTelemetry=function(){return!1}"))
@@ -3953,31 +3975,33 @@ true,this._connectionType=`;
     let index = str.indexOf('location:"PlayWithFriendsRow",');
     if (index < 0)
       return !1;
-    if (index = str.indexOf("return", index - 50), index < 0)
+    if (index = PatcherUtils.lastIndexOf(str, "return", index, 50), index < 0)
       return !1;
-    return str = str.substring(0, index) + "return null;" + str.substring(index + 6), str;
+    return str = PatcherUtils.replaceWith(str, index, "return", "return null;"), str;
   },
   ignoreAllGamesSection(str) {
     let index = str.indexOf('className:"AllGamesRow-module__allGamesRowContainer');
     if (index < 0)
       return !1;
-    if (index = str.indexOf("grid:!0,", index), index > -1 && (index = str.indexOf("(0,", index - 70)), index < 0)
+    if (index = PatcherUtils.indexOf(str, "grid:!0,", index, 1500), index < 0)
       return !1;
-    return str = str.substring(0, index) + "true ? null :" + str.substring(index), str;
+    if (index = PatcherUtils.lastIndexOf(str, "(0,", index, 70), index < 0)
+      return !1;
+    return str = PatcherUtils.insertAt(str, index, "true ? null :"), str;
   },
   ignorePlayWithTouchSection(str) {
     let index = str.indexOf('("Play_With_Touch"),');
     if (index < 0)
       return !1;
-    if (index = str.indexOf("const ", index - 30), index < 0)
+    if (index = PatcherUtils.lastIndexOf(str, "const ", index, 30), index < 0)
       return !1;
-    return str = str.substring(0, index) + "return null;" + str.substring(index), str;
+    return str = PatcherUtils.insertAt(str, index, "return null;"), str;
   },
   ignoreSiglSections(str) {
     let index = str.indexOf("SiglRow-module__heroCard___");
     if (index < 0)
       return !1;
-    if (index = str.indexOf("const[", index - 300), index < 0)
+    if (index = PatcherUtils.lastIndexOf(str, "const[", index, 300), index < 0)
       return !1;
     const PREF_HIDE_SECTIONS = getPref("ui_hide_sections"), siglIds = [], sections = {
       "native-mkb": "8fa264dd-124f-4af3-97e8-596fcdf4b486",
@@ -3995,7 +4019,7 @@ if (e && e.id) {
     }
 }
 `;
-    return str = str.substring(0, index) + newCode + str.substring(index), str;
+    return str = PatcherUtils.insertAt(str, index, newCode), str;
   },
   overrideStorageGetSettings(str) {
     if (!str.includes("}getSetting(e){"))
@@ -4033,6 +4057,16 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
     if (index = str.indexOf("return", index - 40), index < 0)
       return !1;
     return str = str.substring(0, index) + 'BxEvent.dispatch(window, BxEvent.XCLOUD_RENDERING_COMPONENT, {component: "product-details"});' + str.substring(index), str;
+  },
+  detectBrowserRouterReady(str) {
+    if (!str.includes("BrowserRouter:()=>"))
+      return !1;
+    let index = str.indexOf("{history:this.history,");
+    if (index < 0)
+      return !1;
+    if (index = PatcherUtils.lastIndexOf(str, "return", index, 100), index < 0)
+      return !1;
+    return str = PatcherUtils.insertAt(str, index, "window.BxEvent.dispatch(window, window.BxEvent.XCLOUD_ROUTER_HISTORY_READY, {history: this.history});"), str;
   }
 }, PATCH_ORDERS = [
   ...getPref("native_mkb_enabled") === "on" ? [
@@ -4041,6 +4075,7 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
     "disableNativeRequestPointerLock",
     "exposeInputSink"
   ] : [],
+  "detectBrowserRouterReady",
   "patchRequestInfoCrash",
   "disableStreamGate",
   "overrideSettings",
@@ -4150,7 +4185,7 @@ class Patcher {
           item[1][id] = eval(patchedFuncStr);
         } catch (e) {
           if (e instanceof Error)
-            BxLogger.error(LOG_TAG3, "Error", appliedPatches, e.message);
+            BxLogger.error(LOG_TAG3, "Error", appliedPatches, e.message, patchedFuncStr);
         }
       if (appliedPatches.length)
         patchesMap[id] = appliedPatches;
@@ -4325,12 +4360,6 @@ class SettingsNavigationDialog extends NavigationDialog {
       "game_fortnite_force_console",
       "stream_combine_sources"
     ]
-  }, {
-    group: "game-bar",
-    label: t("game-bar"),
-    items: [
-      "game_bar_position"
-    ]
   }, {
     group: "co-op",
     label: t("local-co-op"),
@@ -4357,14 +4386,6 @@ class SettingsNavigationDialog extends NavigationDialog {
       "stream_touch_controller_style_standard",
       "stream_touch_controller_style_custom"
     ]
-  }, {
-    group: "loading-screen",
-    label: t("loading-screen"),
-    items: [
-      "ui_loading_screen_game_art",
-      "ui_loading_screen_wait_time",
-      "ui_loading_screen_rocket"
-    ]
   }, {
     group: "ui",
     label: t("ui"),
@@ -4381,6 +4402,20 @@ class SettingsNavigationDialog extends NavigationDialog {
       "block_social_features",
       "ui_hide_sections"
     ]
+  }, {
+    group: "game-bar",
+    label: t("game-bar"),
+    items: [
+      "game_bar_position"
+    ]
+  }, {
+    group: "loading-screen",
+    label: t("loading-screen"),
+    items: [
+      "ui_loading_screen_game_art",
+      "ui_loading_screen_wait_time",
+      "ui_loading_screen_rocket"
+    ]
   }, {
     group: "other",
     label: t("other"),
@@ -5763,18 +5798,16 @@ class HeaderSection {
     $parent.appendChild(HeaderSection.#$buttonsWrapper);
   }
   static checkHeader() {
-    if (!HeaderSection.#$buttonsWrapper.isConnected) {
-      let $target = document.querySelector("#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]");
-      if (!$target)
-        $target = document.querySelector("div[class^=UnsupportedMarketPage-module__buttons]");
-      $target && HeaderSection.#injectSettingsButton($target);
-    }
+    let $target = document.querySelector("#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]");
+    if (!$target)
+      $target = document.querySelector("div[class^=UnsupportedMarketPage-module__buttons]");
+    $target && HeaderSection.#injectSettingsButton($target);
   }
   static showRemotePlayButton() {
     HeaderSection.#$remotePlayBtn.classList.remove("bx-gone");
   }
   static watchHeader() {
-    let $root = document.querySelector("#PageContent header") || document.querySelector("#root");
+    const $root = document.querySelector("#PageContent header") || document.querySelector("#root");
     if (!$root)
       return;
     HeaderSection.#observer && HeaderSection.#observer.disconnect(), HeaderSection.#observer = new MutationObserver((mutationList) => {
@@ -6944,7 +6977,7 @@ class WebGL2Player {
   }
   #setupShaders() {
     BxLogger.info(LOG_TAG7, "Setting up", getPref("video_power_preference"));
-    const gl = this.#$canvas.getContext("webgl2", {
+    const gl = this.#$canvas.getContext("webgl", {
       isBx: !0,
       antialias: !0,
       alpha: !1,
@@ -7295,100 +7328,6 @@ function patchPointerLockApi() {
   };
 }
 
-function cloneStreamHudButton($orgButton, label, svgIcon) {
-  const $container = $orgButton.cloneNode(!0);
-  let timeout;
-  const onTransitionStart = (e) => {
-    if (e.propertyName !== "opacity")
-      return;
-    timeout && clearTimeout(timeout), $container.style.pointerEvents = "none";
-  }, onTransitionEnd = (e) => {
-    if (e.propertyName !== "opacity")
-      return;
-    if (document.getElementById("StreamHud")?.style.left === "0px")
-      timeout && clearTimeout(timeout), timeout = window.setTimeout(() => {
-        $container.style.pointerEvents = "auto";
-      }, 100);
-  };
-  if (STATES.browser.capabilities.touch)
-    $container.addEventListener("transitionstart", onTransitionStart), $container.addEventListener("transitionend", onTransitionEnd);
-  const $button = $container.querySelector("button");
-  $button.setAttribute("title", label);
-  const $orgSvg = $button.querySelector("svg"), $svg = createSvgIcon(svgIcon);
-  return $svg.style.fill = "none", $svg.setAttribute("class", $orgSvg.getAttribute("class") || ""), $svg.ariaHidden = "true", $orgSvg.replaceWith($svg), $container;
-}
-function cloneCloseButton($$btnOrg, icon, className, onChange) {
-  const $btn = $$btnOrg.cloneNode(!0), $svg = createSvgIcon(icon);
-  return $svg.setAttribute("class", $btn.firstElementChild.getAttribute("class") || ""), $svg.style.fill = "none", $btn.classList.add(className), $btn.removeChild($btn.firstElementChild), $btn.appendChild($svg), $btn.addEventListener("click", onChange), $btn;
-}
-function injectStreamMenuButtons() {
-  const $screen = document.querySelector("#PageContent section[class*=PureScreens]");
-  if (!$screen)
-    return;
-  if ($screen.xObserving)
-    return;
-  $screen.xObserving = !0;
-  let $btnStreamSettings, $btnStreamStats;
-  const streamStats = StreamStats.getInstance();
-  new MutationObserver((mutationList) => {
-    mutationList.forEach((item2) => {
-      if (item2.type !== "childList")
-        return;
-      item2.addedNodes.forEach(async ($node) => {
-        if (!$node || $node.nodeType !== Node.ELEMENT_NODE)
-          return;
-        let $elm = $node;
-        if ($elm instanceof SVGSVGElement)
-          return;
-        if ($elm.className?.includes("PureErrorPage")) {
-          BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
-          return;
-        }
-        if ($elm.className?.startsWith("StreamMenu-module__container")) {
-          const $btnCloseHud = document.querySelector("button[class*=StreamMenu-module__backButton]");
-          if (!$btnCloseHud)
-            return;
-          const $btnRefresh = cloneCloseButton($btnCloseHud, BxIcon.REFRESH, "bx-stream-refresh-button", () => {
-            confirm(t("confirm-reload-stream")) && window.location.reload();
-          }), $btnHome = cloneCloseButton($btnCloseHud, BxIcon.HOME, "bx-stream-home-button", () => {
-            confirm(t("back-to-home-confirm")) && (window.location.href = window.location.href.substring(0, 31));
-          });
-          $btnCloseHud.insertAdjacentElement("afterend", $btnRefresh), $btnRefresh.insertAdjacentElement("afterend", $btnHome), document.querySelector("div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]")?.appendChild(await StreamBadges.getInstance().render());
-          return;
-        }
-        if ($elm.className?.startsWith("Overlay-module_") || $elm.className?.startsWith("InProgressScreen"))
-          $elm = $elm.querySelector("#StreamHud");
-        if (!$elm || ($elm.id || "") !== "StreamHud")
-          return;
-        const $gripHandle = $elm.querySelector("button[class^=GripHandle]"), hideGripHandle = () => {
-          if (!$gripHandle)
-            return;
-          $gripHandle.dispatchEvent(new PointerEvent("pointerdown")), $gripHandle.click(), $gripHandle.dispatchEvent(new PointerEvent("pointerdown")), $gripHandle.click();
-        }, $orgButton = $elm.querySelector("div[class^=HUDButton]");
-        if (!$orgButton)
-          return;
-        if (!$btnStreamSettings)
-          $btnStreamSettings = cloneStreamHudButton($orgButton, t("better-xcloud"), BxIcon.BETTER_XCLOUD), $btnStreamSettings.addEventListener("click", (e) => {
-            hideGripHandle(), e.preventDefault(), SettingsNavigationDialog.getInstance().show();
-          });
-        if (!$btnStreamStats)
-          $btnStreamStats = cloneStreamHudButton($orgButton, t("stream-stats"), BxIcon.STREAM_STATS), $btnStreamStats.addEventListener("click", (e) => {
-            hideGripHandle(), e.preventDefault(), streamStats.toggle();
-            const btnStreamStatsOn2 = !streamStats.isHidden() && !streamStats.isGlancing();
-            $btnStreamStats.classList.toggle("bx-stream-menu-button-on", btnStreamStatsOn2);
-          });
-        const btnStreamStatsOn = !streamStats.isHidden() && !streamStats.isGlancing();
-        if ($btnStreamStats.classList.toggle("bx-stream-menu-button-on", btnStreamStatsOn), $orgButton) {
-          const $btnParent = $orgButton.parentElement;
-          $btnParent.insertBefore($btnStreamStats, $btnParent.lastElementChild), $btnParent.insertBefore($btnStreamSettings, $btnStreamStats);
-          const $dotsButton = $btnParent.lastElementChild;
-          $dotsButton.parentElement.insertBefore($dotsButton, $dotsButton.parentElement.firstElementChild);
-        }
-      });
-    });
-  }).observe($screen, { subtree: !0, childList: !0 });
-}
-
 class BaseGameBarAction {
   constructor() {
   }
@@ -7767,6 +7706,141 @@ class ProductDetailsPage {
   }
 }
 
+class StreamUiHandler {
+  static $btnStreamSettings;
+  static $btnStreamStats;
+  static $btnRefresh;
+  static $btnHome;
+  static observer;
+  static cloneStreamHudButton($btnOrg, label, svgIcon) {
+    if (!$btnOrg)
+      return null;
+    const $container = $btnOrg.cloneNode(!0);
+    let timeout;
+    if (STATES.browser.capabilities.touch) {
+      const onTransitionStart = (e) => {
+        if (e.propertyName !== "opacity")
+          return;
+        timeout && clearTimeout(timeout), e.target.style.pointerEvents = "none";
+      }, onTransitionEnd = (e) => {
+        if (e.propertyName !== "opacity")
+          return;
+        const $streamHud = e.target.closest("#StreamHud");
+        if (!$streamHud)
+          return;
+        if ($streamHud.style.left === "0px") {
+          const $target = e.target;
+          timeout && clearTimeout(timeout), timeout = window.setTimeout(() => {
+            $target.style.pointerEvents = "auto";
+          }, 100);
+        }
+      };
+      $container.addEventListener("transitionstart", onTransitionStart), $container.addEventListener("transitionend", onTransitionEnd);
+    }
+    const $button = $container.querySelector("button");
+    if (!$button)
+      return null;
+    $button.setAttribute("title", label);
+    const $orgSvg = $button.querySelector("svg");
+    if (!$orgSvg)
+      return null;
+    const $svg = createSvgIcon(svgIcon);
+    return $svg.style.fill = "none", $svg.setAttribute("class", $orgSvg.getAttribute("class") || ""), $svg.ariaHidden = "true", $orgSvg.replaceWith($svg), $container;
+  }
+  static cloneCloseButton($btnOrg, icon, className, onChange) {
+    if (!$btnOrg)
+      return null;
+    const $btn = $btnOrg.cloneNode(!0), $svg = createSvgIcon(icon);
+    return $svg.setAttribute("class", $btn.firstElementChild.getAttribute("class") || ""), $svg.style.fill = "none", $btn.classList.add(className), $btn.removeChild($btn.firstElementChild), $btn.appendChild($svg), $btn.addEventListener("click", onChange), $btn;
+  }
+  static async handleStreamMenu() {
+    const $btnCloseHud = document.querySelector("button[class*=StreamMenu-module__backButton]");
+    if (!$btnCloseHud)
+      return;
+    let { $btnRefresh, $btnHome } = StreamUiHandler;
+    if (typeof $btnRefresh === "undefined")
+      $btnRefresh = StreamUiHandler.cloneCloseButton($btnCloseHud, BxIcon.REFRESH, "bx-stream-refresh-button", () => {
+        confirm(t("confirm-reload-stream")) && window.location.reload();
+      });
+    if (typeof $btnHome === "undefined")
+      $btnHome = StreamUiHandler.cloneCloseButton($btnCloseHud, BxIcon.HOME, "bx-stream-home-button", () => {
+        confirm(t("back-to-home-confirm")) && (window.location.href = window.location.href.substring(0, 31));
+      });
+    if ($btnRefresh && $btnHome)
+      $btnCloseHud.insertAdjacentElement("afterend", $btnRefresh), $btnRefresh.insertAdjacentElement("afterend", $btnHome);
+    document.querySelector("div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]")?.appendChild(await StreamBadges.getInstance().render());
+  }
+  static handleSystemMenu($streamHud) {
+    const $gripHandle = $streamHud.querySelector("button[class^=GripHandle]");
+    if (!$gripHandle)
+      return;
+    const $orgButton = $streamHud.querySelector("div[class^=HUDButton]");
+    if (!$orgButton)
+      return;
+    const hideGripHandle = () => {
+      if (!$gripHandle)
+        return;
+      $gripHandle.dispatchEvent(new PointerEvent("pointerdown")), $gripHandle.click(), $gripHandle.dispatchEvent(new PointerEvent("pointerdown")), $gripHandle.click();
+    };
+    let $btnStreamSettings = StreamUiHandler.$btnStreamSettings;
+    if (typeof $btnStreamSettings === "undefined")
+      $btnStreamSettings = StreamUiHandler.cloneStreamHudButton($orgButton, t("better-xcloud"), BxIcon.BETTER_XCLOUD), $btnStreamSettings?.addEventListener("click", (e) => {
+        hideGripHandle(), e.preventDefault(), SettingsNavigationDialog.getInstance().show();
+      }), StreamUiHandler.$btnStreamSettings = $btnStreamSettings;
+    const streamStats = StreamStats.getInstance();
+    let $btnStreamStats = StreamUiHandler.$btnStreamStats;
+    if (typeof $btnStreamStats === "undefined")
+      $btnStreamStats = StreamUiHandler.cloneStreamHudButton($orgButton, t("stream-stats"), BxIcon.STREAM_STATS), $btnStreamStats?.addEventListener("click", (e) => {
+        hideGripHandle(), e.preventDefault(), streamStats.toggle();
+        const btnStreamStatsOn = !streamStats.isHidden() && !streamStats.isGlancing();
+        $btnStreamStats.classList.toggle("bx-stream-menu-button-on", btnStreamStatsOn);
+      }), StreamUiHandler.$btnStreamStats = $btnStreamStats;
+    const $btnParent = $orgButton.parentElement;
+    if ($btnStreamSettings && $btnStreamStats) {
+      const btnStreamStatsOn = !streamStats.isHidden() && !streamStats.isGlancing();
+      $btnStreamStats.classList.toggle("bx-stream-menu-button-on", btnStreamStatsOn), $btnParent.insertBefore($btnStreamStats, $btnParent.lastElementChild), $btnParent.insertBefore($btnStreamSettings, $btnStreamStats);
+    }
+    const $dotsButton = $btnParent.lastElementChild;
+    $dotsButton.parentElement.insertBefore($dotsButton, $dotsButton.parentElement.firstElementChild);
+  }
+  static reset() {
+    StreamUiHandler.$btnStreamSettings = void 0, StreamUiHandler.$btnStreamStats = void 0, StreamUiHandler.$btnRefresh = void 0, StreamUiHandler.$btnHome = void 0, StreamUiHandler.observer && StreamUiHandler.observer.disconnect(), StreamUiHandler.observer = void 0;
+  }
+  static observe() {
+    StreamUiHandler.reset();
+    const $screen = document.querySelector("#PageContent section[class*=PureScreens]");
+    if (!$screen)
+      return;
+    new MutationObserver((mutationList) => {
+      mutationList.forEach((item2) => {
+        if (item2.type !== "childList")
+          return;
+        item2.addedNodes.forEach(async ($node) => {
+          if (!$node || $node.nodeType !== Node.ELEMENT_NODE)
+            return;
+          let $elm = $node;
+          if (!($elm instanceof HTMLElement))
+            return;
+          const className = $elm.className || "";
+          if (className.includes("PureErrorPage")) {
+            BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
+            return;
+          }
+          if (className.startsWith("StreamMenu-module__container")) {
+            StreamUiHandler.handleStreamMenu();
+            return;
+          }
+          if (className.startsWith("Overlay-module_") || className.startsWith("InProgressScreen"))
+            $elm = $elm.querySelector("#StreamHud");
+          if (!$elm || ($elm.id || "") !== "StreamHud")
+            return;
+          StreamUiHandler.handleSystemMenu($elm);
+        });
+      });
+    }).observe($screen, { subtree: !0, childList: !0 });
+  }
+}
+
 function unload() {
   if (!STATES.isPlaying)
     return;
@@ -7889,7 +7963,7 @@ window.addEventListener(BxEvent.STREAM_STARTING, (e) => {
     MouseCursorHider.start(), MouseCursorHider.hide();
 });
 window.addEventListener(BxEvent.STREAM_PLAYING, (e) => {
-  if (STATES.isPlaying = !0, injectStreamMenuButtons(), getPref("game_bar_position") !== "off") {
+  if (STATES.isPlaying = !0, StreamUiHandler.observe(), getPref("game_bar_position") !== "off") {
     const gameBar = GameBar.getInstance();
     gameBar.reset(), gameBar.enable(), gameBar.showBar();
   }

src/index.ts

@@ -22,7 +22,6 @@ import { VibrationManager } from "@modules/vibration-manager";
 import { overridePreloadState } from "@utils/preload-state";
 import { disableAdobeAudienceManager, patchAudioContext, patchCanvasContext, patchMeControl, patchPointerLockApi, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
 import { AppInterface, STATES } from "@utils/global";
-import { injectStreamMenuButtons } from "@modules/stream/stream-ui";
 import { BxLogger } from "@utils/bx-logger";
 import { GameBar } from "./modules/game-bar/game-bar";
 import { Screenshot } from "./utils/screenshot";
@@ -38,6 +37,7 @@ import { PrefKey } from "./enums/pref-keys";
 import { getPref } from "./utils/settings-storages/global-settings-storage";
 import { compressCss } from "@macros/build" with {type: "macro"};
 import { SettingsNavigationDialog } from "./modules/ui/dialog/settings-dialog";
+import { StreamUiHandler } from "./modules/stream/stream-ui";
 
 
 // Handle login page
@@ -186,7 +186,7 @@ window.addEventListener(BxEvent.STREAM_STARTING, e => {
 
 window.addEventListener(BxEvent.STREAM_PLAYING, e => {
     STATES.isPlaying = true;
-    injectStreamMenuButtons();
+    StreamUiHandler.observe();
 
     if (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
         const gameBar = GameBar.getInstance();

src/modules/patcher.ts

@@ -20,8 +20,35 @@ import { GamePassCloudGallery } from "@/enums/game-pass-gallery.js";
 
 type PatchArray = (keyof typeof PATCHES)[];
 
-const ENDING_CHUNKS_PATCH_NAME = 'loadingEndingChunks';
+class PatcherUtils {
+    static indexOf(txt: string, searchString: string, startIndex: number, maxRange: number): number {
+        const index = txt.indexOf(searchString, startIndex);
+        if (index < 0 || (maxRange && index - startIndex > maxRange)) {
+            return -1;
+        }
 
+        return index;
+    }
+
+    static lastIndexOf(txt: string, searchString: string, startIndex: number, maxRange: number): number {
+        const index = txt.lastIndexOf(searchString, startIndex);
+        if (index < 0 || (maxRange && startIndex - index > maxRange)) {
+            return -1;
+        }
+
+        return index;
+    }
+
+    static insertAt(txt: string, index: number, insertString: string): string {
+        return txt.substring(0, index) + insertString + txt.substring(index);
+    }
+
+    static replaceWith(txt: string, index: number, fromString: string, toString: string): string {
+        return txt.substring(0, index) + toString + txt.substring(index + fromString.length);
+    }
+}
+
+const ENDING_CHUNKS_PATCH_NAME = 'loadingEndingChunks';
 const LOG_TAG = 'Patcher';
 
 const PATCHES = {
@@ -33,11 +60,11 @@ const PATCHES = {
             return false;
         }
 
-        if (str.substring(0, index + 200).includes('"AppInsightsCore')) {
+        if (PatcherUtils.indexOf(str, '"AppInsightsCore', index, 200) < 0) {
             return false;
         }
 
-        return str.substring(0, index) + '.track=function(e){},!!function(' + str.substring(index + text.length);
+        return PatcherUtils.replaceWith(str, index, text, '.track=function(e){},!!function(');
     },
 
     // Set disableTelemetry() to true
@@ -716,12 +743,12 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('return', index - 50);
+        index = PatcherUtils.lastIndexOf(str, 'return', index, 50);
         if (index < 0) {
             return false;
         }
 
-        str = str.substring(0, index) + 'return null;' + str.substring(index + 6);
+        str = PatcherUtils.replaceWith(str, index, 'return', 'return null;');
         return str;
     },
 
@@ -732,14 +759,17 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('grid:!0,', index);
-        index > -1 && (index = str.indexOf('(0,', index - 70));
-
+        index = PatcherUtils.indexOf(str, 'grid:!0,', index, 1500);
         if (index < 0) {
             return false;
         }
 
-        str = str.substring(0, index) + 'true ? null :' + str.substring(index);
+        index = PatcherUtils.lastIndexOf(str, '(0,', index, 70);
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, 'true ? null :');
         return str;
     },
 
@@ -750,12 +780,12 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('const ', index - 30);
+        index = PatcherUtils.lastIndexOf(str, 'const ', index, 30);
         if (index < 0) {
             return false;
         }
 
-        str = str.substring(0, index) + 'return null;' + str.substring(index);
+        str = PatcherUtils.insertAt(str, index, 'return null;');
         return str;
     },
 
@@ -766,7 +796,7 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('const[', index - 300);
+        index = PatcherUtils.lastIndexOf(str, 'const[', index, 300);
         if (index < 0) {
             return false;
         }
@@ -794,7 +824,7 @@ if (e && e.id) {
     }
 }
 `;
-        str = str.substring(0, index) + newCode + str.substring(index);
+        str = PatcherUtils.insertAt(str, index, newCode);
         return str;
     },
 
@@ -862,6 +892,26 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
         str = str.substring(0, index) + 'BxEvent.dispatch(window, BxEvent.XCLOUD_RENDERING_COMPONENT, {component: "product-details"});' + str.substring(index);
         return str;
     },
+
+    detectBrowserRouterReady(str: string) {
+        const text = 'BrowserRouter:()=>';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        let index = str.indexOf('{history:this.history,');
+        if (index < 0) {
+            return false;
+        }
+
+        index = PatcherUtils.lastIndexOf(str, 'return', index, 100);
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, 'window.BxEvent.dispatch(window, window.BxEvent.XCLOUD_ROUTER_HISTORY_READY, {history: this.history});');
+        return str;
+    },
 };
 
 let PATCH_ORDERS: PatchArray = [
@@ -872,6 +922,7 @@ let PATCH_ORDERS: PatchArray = [
         'exposeInputSink',
     ] : []),
 
+    'detectBrowserRouterReady',
     'patchRequestInfoCrash',
 
     'disableStreamGate',
@@ -1067,7 +1118,7 @@ export class Patcher {
                     item[1][id] = eval(patchedFuncStr);
                 } catch (e: unknown) {
                     if (e instanceof Error) {
-                        BxLogger.error(LOG_TAG, 'Error', appliedPatches, e.message);
+                        BxLogger.error(LOG_TAG, 'Error', appliedPatches, e.message, patchedFuncStr);
                     }
                 }
             }

src/modules/player/webgl2-player.ts

@@ -124,7 +124,7 @@ export class WebGL2Player {
     #setupShaders() {
         BxLogger.info(LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
 
-        const gl = this.#$canvas.getContext('webgl2', {
+        const gl = this.#$canvas.getContext('webgl', {
             isBx: true,
             antialias: true,
             alpha: false,

src/modules/stream/stream-ui.ts

@@ -8,212 +8,270 @@ import { StreamStats } from "./stream-stats.ts";
 import { SettingsNavigationDialog } from "../ui/dialog/settings-dialog.ts";
 
 
-function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: typeof BxIcon) {
-    const $container = $orgButton.cloneNode(true) as HTMLElement;
-    let timeout: number | null;
+export class StreamUiHandler {
+    private static $btnStreamSettings: HTMLElement | null | undefined;
+    private static $btnStreamStats: HTMLElement | null | undefined;
+    private static $btnRefresh: HTMLElement | null | undefined;
+    private static $btnHome: HTMLElement | null | undefined;
+    private static observer: MutationObserver | undefined;
 
-    const onTransitionStart = (e: TransitionEvent) => {
-        if (e.propertyName !== 'opacity') {
+    private static cloneStreamHudButton($btnOrg: HTMLElement, label: string, svgIcon: typeof BxIcon): HTMLElement | null {
+        if (!$btnOrg) {
+            return null;
+        }
+
+        const $container = $btnOrg.cloneNode(true) as HTMLElement;
+        let timeout: number | null;
+
+        // Prevent touching other button while the bar is showing/hiding
+        if (STATES.browser.capabilities.touch) {
+            const onTransitionStart = (e: TransitionEvent) => {
+                if (e.propertyName !== 'opacity') {
+                    return;
+                }
+
+                timeout && clearTimeout(timeout);
+                (e.target as HTMLElement).style.pointerEvents = 'none';
+            };
+
+            const onTransitionEnd = (e: TransitionEvent) => {
+                if (e.propertyName !== 'opacity') {
+                    return;
+                }
+
+                const $streamHud = (e.target as HTMLElement).closest('#StreamHud') as HTMLElement;
+                if (!$streamHud) {
+                    return;
+                }
+
+                const left = $streamHud.style.left;
+                if (left === '0px') {
+                    const $target = e.target as HTMLElement;
+                    timeout && clearTimeout(timeout);
+                    timeout = window.setTimeout(() => {
+                        $target.style.pointerEvents = 'auto';
+                    }, 100);
+                }
+            };
+
+            $container.addEventListener('transitionstart', onTransitionStart);
+            $container.addEventListener('transitionend', onTransitionEnd);
+        }
+
+        const $button = $container.querySelector('button') as HTMLElement;
+        if (!$button) {
+            return null;
+        }
+        $button.setAttribute('title', label);
+
+        const $orgSvg = $button.querySelector('svg') as SVGElement;
+        if (!$orgSvg) {
+            return null;
+        }
+
+        const $svg = createSvgIcon(svgIcon);
+        $svg.style.fill = 'none';
+        $svg.setAttribute('class', $orgSvg.getAttribute('class') || '');
+        $svg.ariaHidden = 'true';
+
+        $orgSvg.replaceWith($svg);
+        return $container;
+    }
+
+    private static cloneCloseButton($btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any): HTMLElement | null {
+        if (!$btnOrg) {
+            return null;
+        }
+        // Create button from the Close button
+        const $btn = $btnOrg.cloneNode(true) as HTMLElement;
+
+        const $svg = createSvgIcon(icon);
+        // Copy classes
+        $svg.setAttribute('class', $btn.firstElementChild!.getAttribute('class') || '');
+        $svg.style.fill = 'none';
+
+        $btn.classList.add(className);
+        // Remove icon
+        $btn.removeChild($btn.firstElementChild!);
+        // Add icon
+        $btn.appendChild($svg);
+        // Add "click" event listener
+        $btn.addEventListener('click', onChange);
+
+        return $btn;
+    }
+
+    private static async handleStreamMenu() {
+        const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
+        if (!$btnCloseHud) {
             return;
         }
 
-        timeout && clearTimeout(timeout);
-        $container.style.pointerEvents = 'none';
-    };
+        let $btnRefresh = StreamUiHandler.$btnRefresh;
+        let $btnHome = StreamUiHandler.$btnHome;
 
-    const onTransitionEnd = (e: TransitionEvent) => {
-        if (e.propertyName !== 'opacity') {
+        // Create Refresh button from the Close button
+        if (typeof $btnRefresh === 'undefined') {
+            $btnRefresh = StreamUiHandler.cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => {
+                confirm(t('confirm-reload-stream')) && window.location.reload();
+            });
+        }
+
+        if (typeof $btnHome === 'undefined') {
+            $btnHome = StreamUiHandler.cloneCloseButton($btnCloseHud, BxIcon.HOME, 'bx-stream-home-button', () => {
+                confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
+            });
+        }
+
+        // Add to website
+        if ($btnRefresh && $btnHome) {
+            $btnCloseHud.insertAdjacentElement('afterend', $btnRefresh);
+            $btnRefresh.insertAdjacentElement('afterend', $btnHome);
+        }
+
+        // Render stream badges
+        const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
+        $menu?.appendChild(await StreamBadges.getInstance().render());
+    }
+
+    private static handleSystemMenu($streamHud: HTMLElement) {
+        // Grip handle
+        const $gripHandle = $streamHud.querySelector('button[class^=GripHandle]') as HTMLElement;
+        if (!$gripHandle) {
             return;
         }
 
-        const left = document.getElementById('StreamHud')?.style.left;
-        if (left === '0px') {
-            timeout && clearTimeout(timeout);
-            timeout = window.setTimeout(() => {
-                    $container.style.pointerEvents = 'auto';
-                }, 100);
+        // Get the last button
+        const $orgButton = $streamHud.querySelector('div[class^=HUDButton]') as HTMLElement;
+        if (!$orgButton) {
+            return;
         }
-    };
 
-    if (STATES.browser.capabilities.touch) {
-        $container.addEventListener('transitionstart', onTransitionStart);
-        $container.addEventListener('transitionend', onTransitionEnd);
-    }
-
-    const $button = $container.querySelector('button')!;
-    $button.setAttribute('title', label);
-
-    const $orgSvg = $button.querySelector('svg')!;
-    const $svg = createSvgIcon(svgIcon);
-    $svg.style.fill = 'none';
-    $svg.setAttribute('class', $orgSvg.getAttribute('class') || '');
-    $svg.ariaHidden = 'true';
-
-    $orgSvg.replaceWith($svg);
-    return $container;
-}
-
-
-function cloneCloseButton($$btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any) {
-    // Create button from the Close button
-    const $btn = $$btnOrg.cloneNode(true) as HTMLElement;
-
-    // Refresh SVG
-    const $svg = createSvgIcon(icon);
-    // Copy classes
-    $svg.setAttribute('class', $btn.firstElementChild!.getAttribute('class') || '');
-    $svg.style.fill = 'none';
-
-    $btn.classList.add(className);
-    // Remove icon
-    $btn.removeChild($btn.firstElementChild!);
-    // Add icon
-    $btn.appendChild($svg);
-    // Add "click" event listener
-    $btn.addEventListener('click', onChange);
-
-    return $btn;
-}
-
-
-export function injectStreamMenuButtons() {
-    const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
-    if (!$screen) {
-        return;
-    }
-
-    if (($screen as any).xObserving) {
-        return;
-    }
-
-    ($screen as any).xObserving = true;
-
-    let $btnStreamSettings: HTMLElement;
-    let $btnStreamStats: HTMLElement;
-    const streamStats = StreamStats.getInstance();
-
-    const observer = new MutationObserver(mutationList => {
-        mutationList.forEach(item => {
-            if (item.type !== 'childList') {
+        const hideGripHandle = () => {
+            if (!$gripHandle) {
                 return;
             }
 
-            item.addedNodes.forEach(async $node => {
-                if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
-                    return;
-                }
+            $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
+            $gripHandle.click();
+            $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
+            $gripHandle.click();
+        }
 
-                let $elm: HTMLElement | null = $node as HTMLElement;
+        // Create Stream Settings button
+        let $btnStreamSettings = StreamUiHandler.$btnStreamSettings;
+        if (typeof $btnStreamSettings === 'undefined') {
+            $btnStreamSettings = StreamUiHandler.cloneStreamHudButton($orgButton, t('better-xcloud'), BxIcon.BETTER_XCLOUD);
+            $btnStreamSettings?.addEventListener('click', e => {
+                hideGripHandle();
+                e.preventDefault();
 
-                // Ignore SVG elements
-                if ($elm instanceof SVGSVGElement) {
-                    return;
-                }
+                // Show Stream Settings dialog
+                SettingsNavigationDialog.getInstance().show();
+            });
 
-                // Error Page: .PureErrorPage.ErrorScreen
-                if ($elm.className?.includes('PureErrorPage')) {
-                    BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
-                    return;
-                }
+            StreamUiHandler.$btnStreamSettings = $btnStreamSettings;
+        }
 
-                // Render badges
-                if ($elm.className?.startsWith('StreamMenu-module__container')) {
-                    const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
-                    if (!$btnCloseHud) {
-                        return;
-                    }
+        // Create Stream Stats button
+        const streamStats = StreamStats.getInstance();
+        let $btnStreamStats = StreamUiHandler.$btnStreamStats;
+        if (typeof $btnStreamStats === 'undefined') {
+            $btnStreamStats = StreamUiHandler.cloneStreamHudButton($orgButton, t('stream-stats'), BxIcon.STREAM_STATS);
+            $btnStreamStats?.addEventListener('click', e => {
+                hideGripHandle();
+                e.preventDefault();
 
-                    // Create Refresh button from the Close button
-                    const $btnRefresh = cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => {
-                        confirm(t('confirm-reload-stream')) && window.location.reload();
-                    });
-
-                    const $btnHome = cloneCloseButton($btnCloseHud, BxIcon.HOME, 'bx-stream-home-button', () => {
-                        confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
-                    });
-
-                    // Add to website
-                    $btnCloseHud.insertAdjacentElement('afterend', $btnRefresh);
-                    $btnRefresh.insertAdjacentElement('afterend', $btnHome);
-
-                    // Render stream badges
-                    const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
-                    $menu?.appendChild(await StreamBadges.getInstance().render());
-
-                    return;
-                }
-
-                if ($elm.className?.startsWith('Overlay-module_') || $elm.className?.startsWith('InProgressScreen')) {
-                    $elm = $elm.querySelector('#StreamHud');
-                }
-
-                if (!$elm || ($elm.id || '') !== 'StreamHud') {
-                    return;
-                }
-
-                // Grip handle
-                const $gripHandle = $elm.querySelector('button[class^=GripHandle]') as HTMLElement;
-
-                const hideGripHandle = () => {
-                    if (!$gripHandle) {
-                        return;
-                    }
-
-                    $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
-                    $gripHandle.click();
-                    $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
-                    $gripHandle.click();
-                }
-
-                // Get the second last button
-                const $orgButton = $elm.querySelector('div[class^=HUDButton]') as HTMLElement;
-                if (!$orgButton) {
-                    return;
-                }
-
-                // Create Stream Settings button
-                if (!$btnStreamSettings) {
-                    $btnStreamSettings = cloneStreamHudButton($orgButton, t('better-xcloud'), BxIcon.BETTER_XCLOUD);
-                    $btnStreamSettings.addEventListener('click', e => {
-                        hideGripHandle();
-                        e.preventDefault();
-
-                        // Show Stream Settings dialog
-                        SettingsNavigationDialog.getInstance().show();
-                    });
-                }
-
-                // Create Stream Stats button
-                if (!$btnStreamStats) {
-                    $btnStreamStats = cloneStreamHudButton($orgButton, t('stream-stats'), BxIcon.STREAM_STATS);
-                    $btnStreamStats.addEventListener('click', e => {
-                        hideGripHandle();
-                        e.preventDefault();
-
-                        // Toggle Stream Stats
-                        streamStats.toggle();
-
-                        const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
-                        $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
-                    });
-                }
+                // Toggle Stream Stats
+                streamStats.toggle();
 
                 const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
-                $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
+                $btnStreamStats!.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
+            });
 
-                if ($orgButton) {
-                    const $btnParent = $orgButton.parentElement!;
+            StreamUiHandler.$btnStreamStats = $btnStreamStats;
+        }
 
-                    // Insert buttons after Stream Settings button
-                    $btnParent.insertBefore($btnStreamStats, $btnParent.lastElementChild);
-                    $btnParent.insertBefore($btnStreamSettings, $btnStreamStats);
+        const $btnParent = $orgButton.parentElement!;
 
-                    // Move the Dots button to the beginning
-                    const $dotsButton = $btnParent.lastElementChild!;
-                    $dotsButton.parentElement!.insertBefore($dotsButton, $dotsButton.parentElement!.firstElementChild);
+        if ($btnStreamSettings && $btnStreamStats) {
+            const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
+            $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
+
+            // Insert buttons after Stream Settings button
+            $btnParent.insertBefore($btnStreamStats, $btnParent.lastElementChild);
+            $btnParent.insertBefore($btnStreamSettings, $btnStreamStats);
+        }
+
+        // Move the Dots button to the beginning
+        const $dotsButton = $btnParent.lastElementChild!;
+        $dotsButton.parentElement!.insertBefore($dotsButton, $dotsButton.parentElement!.firstElementChild);
+    }
+
+    private static reset() {
+        StreamUiHandler.$btnStreamSettings = undefined;
+        StreamUiHandler.$btnStreamStats = undefined;
+        StreamUiHandler.$btnRefresh = undefined;
+        StreamUiHandler.$btnHome = undefined;
+
+        StreamUiHandler.observer && StreamUiHandler.observer.disconnect();
+        StreamUiHandler.observer = undefined;
+    }
+
+    static observe() {
+        StreamUiHandler.reset();
+
+        const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
+        if (!$screen) {
+            return;
+        }
+
+        const observer = new MutationObserver(mutationList => {
+            mutationList.forEach(item => {
+                if (item.type !== 'childList') {
+                    return;
                 }
+
+                item.addedNodes.forEach(async $node => {
+                    if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
+                        return;
+                    }
+
+                    let $elm: HTMLElement | null = $node as HTMLElement;
+
+                    // Ignore non-HTML elements
+                    if (!($elm instanceof HTMLElement)) {
+                        return;
+                    }
+
+                    const className = $elm.className || '';
+
+                    // Error Page: .PureErrorPage.ErrorScreen
+                    if (className.includes('PureErrorPage')) {
+                        BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
+                        return;
+                    }
+
+                    // Render badges
+                    if (className.startsWith('StreamMenu-module__container')) {
+                        StreamUiHandler.handleStreamMenu();
+                        return;
+                    }
+
+                    if (className.startsWith('Overlay-module_') || className.startsWith('InProgressScreen')) {
+                        $elm = $elm.querySelector('#StreamHud');
+                    }
+
+                    if (!$elm || ($elm.id || '') !== 'StreamHud') {
+                        return;
+                    }
+
+                    // Handle System Menu bar
+                    StreamUiHandler.handleSystemMenu($elm);
+                });
             });
         });
-    });
-    observer.observe($screen, {subtree: true, childList: true});
+
+        observer.observe($screen, {subtree: true, childList: true});
+    }
 }

src/modules/ui/dialog/settings-dialog.ts

@@ -176,12 +176,6 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
             PrefKey.STREAM_COMBINE_SOURCES,
         ],
-    }, {
-        group: 'game-bar',
-        label: t('game-bar'),
-        items: [
-            PrefKey.GAME_BAR_POSITION,
-        ],
     }, {
         group: 'co-op',
         label: t('local-co-op'),
@@ -208,14 +202,6 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD,
             PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM,
         ],
-    }, {
-        group: 'loading-screen',
-        label: t('loading-screen'),
-        items: [
-            PrefKey.UI_LOADING_SCREEN_GAME_ART,
-            PrefKey.UI_LOADING_SCREEN_WAIT_TIME,
-            PrefKey.UI_LOADING_SCREEN_ROCKET,
-        ],
     }, {
         group: 'ui',
         label: t('ui'),
@@ -232,6 +218,20 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.BLOCK_SOCIAL_FEATURES,
             PrefKey.UI_HIDE_SECTIONS,
         ],
+    }, {
+        group: 'game-bar',
+        label: t('game-bar'),
+        items: [
+            PrefKey.GAME_BAR_POSITION,
+        ],
+    }, {
+        group: 'loading-screen',
+        label: t('loading-screen'),
+        items: [
+            PrefKey.UI_LOADING_SCREEN_GAME_ART,
+            PrefKey.UI_LOADING_SCREEN_WAIT_TIME,
+            PrefKey.UI_LOADING_SCREEN_ROCKET,
+        ],
     }, {
         group: 'other',
         label: t('other'),

src/modules/ui/header.ts

@@ -57,13 +57,12 @@ export class HeaderSection {
     }
 
     static checkHeader() {
-        if (!HeaderSection.#$buttonsWrapper.isConnected) {
-            let $target = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
-            if (!$target) {
-                $target = document.querySelector("div[class^=UnsupportedMarketPage-module__buttons]");
-            }
-            $target && HeaderSection.#injectSettingsButton($target as HTMLElement);
+        let $target = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
+        if (!$target) {
+            $target = document.querySelector("div[class^=UnsupportedMarketPage-module__buttons]");
         }
+
+        $target && HeaderSection.#injectSettingsButton($target as HTMLElement);
     }
 
     static showRemotePlayButton() {
@@ -71,7 +70,7 @@ export class HeaderSection {
     }
 
     static watchHeader() {
-        let $root = document.querySelector('#PageContent header') || document.querySelector('#root');
+        const $root = document.querySelector('#PageContent header') || document.querySelector('#root');
         if (!$root) {
             return;
         }

src/types/setting-definition.d.ts

@@ -1,19 +1,42 @@
 export type SettingDefinition = {
     default: any;
-    optionsGroup?: string;
-    options?: {[index: string]: string};
-    multipleOptions?: {[index: string]: string};
-    unsupported?: string | boolean;
-    note?: string | HTMLElement;
-    type?: SettingElementType;
-    ready?: (setting: SettingDefinition) => void;
+} & Partial<{
+    label: string;
+    note: string | HTMLElement;
+    experimental: boolean;
+    unsupported: string | boolean;
+    ready: (setting: SettingDefinition) => void;
     // migrate?: (this: Preferences, savedPrefs: any, value: any) => void;
-    min?: number;
-    max?: number;
-    steps?: number;
-    experimental?: boolean;
-    params?: any;
-    label?: string;
-};
+}> & (
+    {} | {
+        options: {[index: string]: string};
+        optionsGroup?: string;
+    } | {
+        multipleOptions: {[index: string]: string};
+        params: MultipleOptionsParams;
+    } | {
+        type: SettingElementType.NUMBER_STEPPER;
+        min: number;
+        max: number;
+        params: NumberStepperParams;
+
+        steps?: number;
+    }
+);
 
 export type SettingDefinitions = {[index in PrefKey]: SettingDefinition};
+
+export type MultipleOptionsParams = Partial<{
+    size?: number;
+}>
+
+export type NumberStepperParams = Partial<{
+    suffix: string;
+    disabled: boolean;
+    hideSlider: boolean;
+
+    ticks: number;
+    exactTicks: number;
+
+    customTextValue: (value: any) => string | null;
+}>

src/utils/bx-event.ts

@@ -53,6 +53,8 @@ export namespace BxEvent {
 
     export const XCLOUD_RENDERING_COMPONENT = 'bx-xcloud-rendering-page';
 
+    export const XCLOUD_ROUTER_HISTORY_READY = 'bx-xcloud-router-history-ready';
+
     export function dispatch(target: Element | Window | null, eventName: string, data?: any) {
         if (!target) {
             return;

src/utils/css.ts

@@ -6,7 +6,7 @@ import { getPref } from "./settings-storages/global-settings-storage";
 
 
 export function addCss() {
-    const STYLUS_CSS = renderStylus();
+    const STYLUS_CSS = renderStylus() as unknown as string;
     let css = STYLUS_CSS;
 
     const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS);

src/utils/setting-element.ts

@@ -3,21 +3,7 @@ import { CE } from "@utils/html";
 import { setNearby } from "./navigation-utils";
 import type { PrefKey } from "@/enums/pref-keys";
 import type { BaseSettingsStore } from "./settings-storages/base-settings-storage";
-
-type MultipleOptionsParams = {
-    size?: number;
-}
-
-type NumberStepperParams = {
-    suffix?: string;
-    disabled?: boolean;
-    hideSlider?: boolean;
-
-    ticks?: number;
-    exactTicks?: number;
-
-    customTextValue?: (value: any) => string | null;
-}
+import { type MultipleOptionsParams, type NumberStepperParams } from "@/types/setting-definition";
 
 export enum SettingElementType {
     OPTIONS = 'options',
@@ -381,7 +367,11 @@ export class SettingElement {
             type = SettingElementType.CHECKBOX;
         }
 
-        const params = Object.assign(overrideParams, definition.params || {});
+        let params: any = {};
+        if ('params' in definition) {
+            params = Object.assign(overrideParams, definition.params || {});
+        }
+
         if (params.disabled) {
             currentValue = definition.default;
         }

src/utils/settings-storages/global-settings-storage.ts

@@ -5,14 +5,14 @@ import { UiSection } from "@/enums/ui-sections";
 import { UserAgentProfile } from "@/enums/user-agent";
 import { StreamStat } from "@/modules/stream/stream-stats";
 import type { PreferenceSetting } from "@/types/preferences";
-import type { SettingDefinitions } from "@/types/setting-definition";
+import { type SettingDefinitions } from "@/types/setting-definition";
 import { BX_FLAGS } from "../bx-flags";
 import { STATES, AppInterface, STORAGE } from "../global";
 import { CE } from "../html";
-import { SettingElementType } from "../setting-element";
 import { t, SUPPORTED_LANGUAGES } from "../translation";
 import { UserAgent } from "../user-agent";
 import { BaseSettingsStore as BaseSettingsStorage } from "./base-settings-storage";
+import { SettingElementType } from "../setting-element";
 
 
 function getSupportedCodecProfiles() {