Stop using MutationObserver to track StreamHud's expanded status

src/modules/patcher/patcher.ts

@@ -11,6 +11,7 @@ import codeGameCardIcons from "./patches/game-card-icons.js" with { type: "text"
 import codeLocalCoOpEnable from "./patches/local-co-op-enable.js" with { type: "text" };
 import codeRemotePlayKeepAlive from "./patches/remote-play-keep-alive.js" with { type: "text" };
 import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "text" };
+import codeStreamHud from "./patches/streamhud.js" with { type: "text" };
 import { GlobalPref, StorageKey } from "@/enums/pref-keys.js";
 import { getGlobalPref } from "@/utils/pref-utils.js";
 import { GamePassCloudGallery } from "@/enums/game-pass-gallery";
@@ -426,16 +427,11 @@ if (titleInfo && !titleInfo.details.hasTouchSupport && !titleInfo.details.hasFak
             return false;
         }
 
-        let newCode = `
-// Expose onShowStreamMenu
-window.BX_EXPOSED.showStreamMenu = e.onShowStreamMenu;
-// Restore the "..." button
-e.guideUI = null;
-`;
+        let newCode = codeStreamHud;
 
         // Remove the TAK Edit button when the touch controller is disabled
         if (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
-            newCode += 'e.canShowTakHUD = false;';
+            newCode += 'options.canShowTakHUD = false;';
         }
 
         str = str.replace(text, newCode + text);

src/modules/patcher/patches/src/streamhud.ts

@@ -0,0 +1,13 @@
+// @ts-ignore
+declare const arguments: any;
+
+const options = arguments[0];
+
+// Expose onShowStreamMenu
+window.BX_EXPOSED.showStreamMenu = options.onShowStreamMenu;
+// Restore the "..." button
+options.guideUI = null;
+
+window.BX_EXPOSED.reactUseEffect(() => {
+    window.BxEventBus.Stream.emit('ui.streamHud.expanded', { state: options.offset.x < 0 ? 'collapsed' : 'expanded' });
+});

src/modules/stream/stream-stats.ts

@@ -69,11 +69,12 @@ export class StreamStats {
     };
 
     private $container!: HTMLElement;
-
-    quickGlanceObserver?: MutationObserver | null;
+    private boundOnStreamHudStateChanged: typeof this.onStreamHudStateChanged;
 
     private constructor() {
         BxLogger.info(this.LOG_TAG, 'constructor()');
+
+        this.boundOnStreamHudStateChanged = this.onStreamHudStateChanged.bind(this);
         this.render();
     }
 
@@ -120,42 +121,24 @@ export class StreamStats {
     isHidden = () => this.$container.classList.contains('bx-gone');
     isGlancing = () => this.$container.dataset.display === 'glancing';
 
+    onStreamHudStateChanged({ state }: { state: string }) {
+        if (state === 'expanded') {
+            this.isHidden() && this.start(true);
+        } else {
+            this.stop(true);
+        }
+    }
+
     quickGlanceSetup() {
-        if (!STATES.isPlaying || this.quickGlanceObserver) {
+        if (!STATES.isPlaying) {
             return;
         }
 
-        const $uiContainer = document.querySelector('div[data-testid=ui-container]')!;
-        if (!$uiContainer) {
-            return;
-        }
-
-        this.quickGlanceObserver = new MutationObserver((mutationList, observer) => {
-            for (const record of mutationList) {
-                const $target = record.target as HTMLElement;
-                if (!$target.className || !$target.className.startsWith('GripHandle')) {
-                    continue;
-                }
-
-                const expanded = (record.target as HTMLElement).ariaExpanded;
-                if (expanded === 'true') {
-                    this.isHidden() && this.start(true);
-                } else {
-                    this.stop(true);
-                }
-            }
-        });
-
-        this.quickGlanceObserver.observe($uiContainer, {
-            attributes: true,
-            attributeFilter: ['aria-expanded'],
-            subtree: true,
-        });
+        BxEventBus.Stream.on('ui.streamHud.expanded', this.boundOnStreamHudStateChanged);
     }
 
     quickGlanceStop() {
-        this.quickGlanceObserver && this.quickGlanceObserver.disconnect();
-        this.quickGlanceObserver = null;
+        BxEventBus.Stream.off('ui.streamHud.expanded', this.boundOnStreamHudStateChanged);
     }
 
     private update = async (forceUpdate=false) => {

src/utils/bx-event-bus.ts

@@ -68,6 +68,8 @@ type StreamEvents = {
     // Inside patch
     'microphone.state.changed': { state: MicrophoneState };
 
+    'ui.streamHud.expanded': { state: 'expanded' | 'collapsed' },
+
     dataChannelCreated: { dataChannel: RTCDataChannel };
 };