Refactor StreamUiHandler

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/stream/stream-ui.ts

@@ -8,10 +8,24 @@ import { StreamStats } from "./stream-stats.ts";
 import { SettingsNavigationDialog } from "../ui/dialog/settings-dialog.ts";
 
 
-function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: typeof BxIcon) {
+export class StreamUiHandler {
-    const $container = $orgButton.cloneNode(true) as HTMLElement;
+    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;
+
+    private static cloneStreamHudButton($btnOrg: HTMLElement, label: string, svgIcon: typeof BxIcon): HTMLElement | null {
+        const $streamHud = document.getElementById('StreamHud') as HTMLElement;
+        if (!$streamHud || !$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;
@@ -26,7 +40,7 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
                     return;
                 }
 
-        const left = document.getElementById('StreamHud')?.style.left;
+                const left = $streamHud.style.left;
                 if (left === '0px') {
                     timeout && clearTimeout(timeout);
                     timeout = window.setTimeout(() => {
@@ -35,15 +49,21 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
                 }
             };
 
-    if (STATES.browser.capabilities.touch) {
             $container.addEventListener('transitionstart', onTransitionStart);
             $container.addEventListener('transitionend', onTransitionEnd);
         }
 
-    const $button = $container.querySelector('button')!;
+        const $button = $container.querySelector('button') as HTMLElement;
+        if (!$button) {
+            return null;
+        }
         $button.setAttribute('title', label);
 
-    const $orgSvg = $button.querySelector('svg')!;
+        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') || '');
@@ -51,14 +71,15 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
 
         $orgSvg.replaceWith($svg);
         return $container;
-}
+    }
 
-
+    private static cloneCloseButton($btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any): HTMLElement | null {
-function cloneCloseButton($$btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any) {
+        if (!$btnOrg) {
+            return null;
+        }
         // Create button from the Close button
-    const $btn = $$btnOrg.cloneNode(true) as HTMLElement;
+        const $btn = $btnOrg.cloneNode(true) as HTMLElement;
 
-    // Refresh SVG
         const $svg = createSvgIcon(icon);
         // Copy classes
         $svg.setAttribute('class', $btn.firstElementChild!.getAttribute('class') || '');
@@ -73,25 +94,128 @@ function cloneCloseButton($$btnOrg: HTMLElement, icon: typeof BxIcon, className:
         $btn.addEventListener('click', onChange);
 
         return $btn;
-}
+    }
 
+    private static async handleStreamMenu() {
+        const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
+        if (!$btnCloseHud) {
+            return;
+        }
+
+        let $btnRefresh = StreamUiHandler.$btnRefresh;
+        let $btnHome = StreamUiHandler.$btnHome;
+
+        // 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) {
+        const streamStats = StreamStats.getInstance();
+
+        // Grip handle
+        const $gripHandle = $streamHud.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 last button
+        const $orgButton = $streamHud.querySelector('div[class^=HUDButton]') as HTMLElement;
+        if (!$orgButton) {
+            return;
+        }
+
+        // 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();
+
+                // Show Stream Settings dialog
+                SettingsNavigationDialog.getInstance().show();
+            });
+        }
+
+        // Create Stream Stats button
+        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();
+
+                // Toggle Stream Stats
+                streamStats.toggle();
+
+                const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
+                $btnStreamStats!.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
+            });
+        }
+
+        const $btnParent = $orgButton.parentElement!;
+
+        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();
 
-export function injectStreamMenuButtons() {
         const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
         if (!$screen) {
             return;
         }
 
-    if (($screen as any).xObserving) {
+        console.log('StreamUI', 'observing');
-        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') {
@@ -105,45 +229,26 @@ export function injectStreamMenuButtons() {
 
                     let $elm: HTMLElement | null = $node as HTMLElement;
 
-                // Ignore SVG elements
+                    // Ignore non-HTML elements
-                if ($elm instanceof SVGSVGElement) {
+                    if (!($elm instanceof HTMLElement)) {
                         return;
                     }
 
+                    const className = $elm.className || '';
+
                     // Error Page: .PureErrorPage.ErrorScreen
-                if ($elm.className?.includes('PureErrorPage')) {
+                    if (className.includes('PureErrorPage')) {
                         BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
                         return;
                     }
 
                     // Render badges
-                if ($elm.className?.startsWith('StreamMenu-module__container')) {
+                    if (className.startsWith('StreamMenu-module__container')) {
-                    const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
+                        StreamUiHandler.handleStreamMenu();
-                    if (!$btnCloseHud) {
                         return;
                     }
 
-                    // Create Refresh button from the Close button
+                    if (className.startsWith('Overlay-module_') || className.startsWith('InProgressScreen')) {
-                    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');
                     }
 
@@ -151,69 +256,12 @@ export function injectStreamMenuButtons() {
                         return;
                     }
 
-                // Grip handle
+                    // Handle System Menu bar
-                const $gripHandle = $elm.querySelector('button[class^=GripHandle]') as HTMLElement;
+                    StreamUiHandler.handleSystemMenu($elm);
-
-                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);
-                    });
-                }
-
-                const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
-                $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
-
-                if ($orgButton) {
-                    const $btnParent = $orgButton.parentElement!;
-
-                    // 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);
-                }
                 });
             });
         });
+
         observer.observe($screen, {subtree: true, childList: true});
+    }
 }