diff --git a/package.json b/package.json index 9dd5c8de..2f3f0466 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.68.0", + "version": "4.68.1", "description": "FrankerFaceZ is a Twitch enhancement suite.", "private": true, "license": "Apache-2.0", diff --git a/src/utilities/compat/fine.ts b/src/utilities/compat/fine.ts index 74e67fbf..185a4c48 100644 --- a/src/utilities/compat/fine.ts +++ b/src/utilities/compat/fine.ts @@ -65,20 +65,39 @@ export default class Fine extends Module<'site.fine', FineEvents> { if ( ! this.root_element ) this.root_element = await (this.parent as any).awaitElement(this.selector || 'body #root'); - if ( ! this.root_element || ! this.root_element._reactRootContainer ) { + let root = this.root_element?._reactRootContainer; + if ( root?._internalRoot?.current ) + root = root?._internalRoot; + + if ( root?.current ) { + this.react_root = root; + this.react = root?.current?.child; + return; + } + + if ( this.root_element && ! root ) { + let key = Fine.findAccessor(this.root_element, '__reactContainer'); + if ( key ) { + this.react_root = null; + this.react = this.root_element[key]; + return; + } + } + + //if ( ! this.root_element || ! this.root_element._reactRootContainer ) { if ( tries > 500 ) throw new Error('Unable to find React after 25 seconds'); this.root_element = null; return new Promise(r => setTimeout(r, 50)).then(() => this.onEnable(tries+1)); - } + //} - this.react_root = this.root_element._reactRootContainer; + /*this.react_root = this.root_element._reactRootContainer; if ( this.react_root._internalRoot && this.react_root._internalRoot.current ) this.react_root = this.react_root._internalRoot; - this.react = this.react_root.current?.child; + this.react = this.react_root.current?.child;*/ } /** @internal */ @@ -87,9 +106,9 @@ export default class Fine extends Module<'site.fine', FineEvents> { } - static findAccessor(node: Node): ReactAccessor | null { + static findAccessor(node: Node, prefix?: string): ReactAccessor | null { for(const key in node) - if ( key.startsWith('__reactInternalInstance$') ) + if ( prefix ? key.startsWith(`${prefix}$`) : (key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$')) ) return key as ReactAccessor; return null; } @@ -104,6 +123,8 @@ export default class Fine extends Module<'site.fine', FineEvents> { return this.react; else if ( input instanceof Node ) return this.getReactInstance(input); + else if ( (input as ReactStateNode)?._reactInternals ) + return (input as ReactStateNode)._reactInternals; else if ( (input as ReactStateNode)?._reactInternalFiber ) return (input as ReactStateNode)._reactInternalFiber; else if ( input ) @@ -631,6 +652,8 @@ export default class Fine extends Module<'site.fine', FineEvents> { node = this.react; else if ( input instanceof Node ) node = this.getReactInstance(input); + else if ( (input as ReactStateNode)?._reactInternals ) + node = (input as ReactStateNode)._reactInternals; else if ( (input as ReactStateNode)?._reactInternalFiber ) node = (input as ReactStateNode)._reactInternalFiber; diff --git a/src/utilities/compat/react-types.ts b/src/utilities/compat/react-types.ts index 8ea24b45..b5806d45 100644 --- a/src/utilities/compat/react-types.ts +++ b/src/utilities/compat/react-types.ts @@ -14,7 +14,7 @@ declare global { } } -export type ReactAccessor = `__reactInternalInstance$${string}`; +export type ReactAccessor = `__reactInternalInstance$${string}` | `__reactFiber$${string}`; export type ReactRoot = { _internalRoot?: ReactRoot; @@ -42,6 +42,7 @@ export type ReactStateNode< // Access to the internal node. _reactInternalFiber: ReactNode | null; + _reactInternals: ReactNode | null; // Stuff props: TProps;