Stop using MutationObserver in stream-ui

This commit is contained in:
redphx
2025-02-07 17:31:30 +07:00
parent 85339f09da
commit ac20cc51cc
6 changed files with 133 additions and 170 deletions

View File

@@ -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

View File

@@ -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;
}
}