Stop using MutationObserver in stream-ui

src/index.ts

@@ -33,7 +33,6 @@ import { GameTile } from "./modules/ui/game-tile";
 import { ProductDetailsPage } from "./modules/ui/product-details";
 import { NavigationDialogManager } from "./modules/ui/dialog/navigation-dialog";
 import { GlobalPref, StreamPref } from "./enums/pref-keys";
-import { StreamUiHandler } from "./modules/stream/stream-ui";
 import { UserAgent } from "./utils/user-agent";
 import { XboxApi } from "./utils/xbox-api";
 import { StreamStatsCollector } from "./utils/stream-stats-collector";
@@ -47,6 +46,7 @@ import { getGlobalPref, getStreamPref } from "./utils/pref-utils";
 import { SettingsManager } from "./modules/settings-manager";
 import { Toast } from "./utils/toast";
 import { WebGPUPlayer } from "./modules/player/webgpu/webgpu-player";
+import { StreamUiHandler } from "./modules/stream/stream-ui";
 
 SettingsManager.getInstance();
 
@@ -234,7 +234,6 @@ BxEventBus.Stream.on('state.playing', payload => {
     }
 
     STATES.isPlaying = true;
-    StreamUiHandler.observe();
 
     if (isFullVersion()) {
         const gameBar = GameBar.getInstance();
@@ -265,6 +264,16 @@ BxEventBus.Script.on('error.rendered', () => {
     BxEventBus.Stream.emit('state.stopped', {});
 });
 
+BxEventBus.Stream.on('ui.streamMenu.rendered', async () => {
+    await StreamUiHandler.handleStreamMenu();
+});
+
+BxEventBus.Stream.on('ui.streamHud.rendered', async () => {
+    const $elm = document.querySelector<HTMLElement>('#StreamHud');
+    $elm && StreamUiHandler.handleSystemMenu($elm);
+});
+
+
 isFullVersion() && window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e => {
     const component = (e as any).component;
     if (component === 'product-detail') {

src/modules/patcher/patcher.ts

@@ -1156,6 +1156,18 @@ ${subsVar} = subs;
         str = PatcherUtils.insertAt(str, index, newCode);
         return str;
     },
+
+    injectStreamMenuUseEffect(str: string) {
+        let index = str.indexOf('"StreamMenu-module__container');
+        index > -1 && (index = PatcherUtils.lastIndexOf(str, 'return', index, 200));
+        if (index < 0) {
+            return false;
+        }
+
+        const newCode = `window.BX_EXPOSED.reactUseEffect(() => window.BxEventBus.Stream.emit('ui.streamMenu.rendered', {}));`;
+        str = PatcherUtils.insertAt(str, index, newCode);
+        return str;
+    },
 };
 
 let PATCH_ORDERS = PatcherUtils.filterPatches([
@@ -1265,6 +1277,8 @@ let STREAM_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
 
     'alwaysShowStreamHud',
 
+    'injectStreamMenuUseEffect',
+
     // 'exposeEventTarget',
 
     // Patch volume control for normal stream

src/modules/stream/stream-ui.ts

@@ -12,7 +12,6 @@ export class StreamUiHandler {
     private static $btnStreamStats: HTMLElement | null | undefined;
     private static $btnRefresh: HTMLElement | null | undefined;
     private static $btnHome: HTMLElement | null | undefined;
-    private static observer: MutationObserver | undefined;
 
     private static cloneStreamHudButton($btnOrg: HTMLElement, label: string, svgIcon: BxIconRaw): HTMLElement | null {
         if (!$btnOrg) {
@@ -100,7 +99,7 @@ export class StreamUiHandler {
         return $btn;
     }
 
-    private static async handleStreamMenu() {
+    static async handleStreamMenu() {
         const $btnCloseHud = document.querySelector<HTMLElement>('button[class*=StreamMenu-module__backButton]');
         if (!$btnCloseHud) {
             return;
@@ -133,13 +132,17 @@ export class StreamUiHandler {
         $menu?.appendChild(await StreamBadges.getInstance().render());
     }
 
-    private static handleSystemMenu($streamHud: HTMLElement) {
+    static handleSystemMenu($streamHud: HTMLElement) {
         // Get the last button
         const $orgButton = $streamHud.querySelector<HTMLElement>('div[class^=HUDButton]');
         if (!$orgButton) {
             return;
         }
 
+        if (StreamUiHandler.$btnStreamSettings && $streamHud.contains(StreamUiHandler.$btnStreamSettings)) {
+            return;
+        }
+
         const hideGripHandle = () => {
             // Grip handle
             const $gripHandle = document.querySelector<HTMLElement>('#StreamHud button[class^=GripHandle]');
@@ -206,60 +209,5 @@ export class StreamUiHandler {
         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 => {
-            let item: MutationRecord;
-            for (item of mutationList) {
-                if (item.type !== 'childList') {
-                    continue;
-                }
-
-                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 || '';
-                    // 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 });
-        StreamUiHandler.observer = observer;
     }
 }

src/utils/bx-event-bus.ts

@@ -69,6 +69,7 @@ type StreamEvents = {
     'microphone.state.changed': { state: MicrophoneState };
 
     'ui.streamHud.rendered': { expanded: boolean },
+    'ui.streamMenu.rendered': {},
 
     dataChannelCreated: { dataChannel: RTCDataChannel };
 };