4.14.3

* Fixed: Revert the tool-tip container selector as just using `#root` causes performance issues. People will just have to live with badly positioned tool-tips in Portrait Mode for the time being.
* API Changed: Emit a `core:dom-update` event whenever we cause a React component to `forceUpdate()`. This is the first draft of a potential solution for fixing incompatibilities with BetterTTV, and should not yet be considered stable. (No, this doesn't mean it's fixed. That will require updates from both extensions and not just FFZ.)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.14.2",
+  "version": "4.14.3",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {

src/modules/tooltips.js

@@ -60,7 +60,7 @@ export default class TooltipProvider extends Module {
 	}
 
 	onEnable() {
-		const container = document.querySelector('.sunlight-root') || document.querySelector('#root>.tw-absolute:not(.tw-flex)') || document.querySelector('#root') || document.querySelector('.clips-root') || document.body;
+		const container = document.querySelector('.sunlight-root') || document.querySelector('#root>div') || document.querySelector('#root') || document.querySelector('.clips-root') || document.body;
 
 		//	is_minimal = false; //container && container.classList.contains('twilight-minimal-root');
 

src/sites/twitch-twilight/index.js

@@ -34,6 +34,8 @@ export default class Twilight extends BaseSite {
 		this.inject(Apollo, false);
 		this.inject(TwitchData);
 		this.inject(Switchboard);
+
+		this._dom_updates = [];
 	}
 
 	onLoad() {
@@ -51,6 +53,23 @@ export default class Twilight extends BaseSite {
 		if ( ! store )
 			return new Promise(r => setTimeout(r, 50)).then(() => this.onEnable());
 
+		// Event Bridge
+		this.on(':dom-update', (...args) => {
+			this._dom_updates.push(args);
+			if ( ! this._dom_frame )
+				this._dom_frame = requestAnimationFrame(() => {
+					const updates = this._dom_updates,
+						core = this.resolve('core');
+					this._dom_updates = [];
+					this._dom_frame = null;
+
+					for(const [key, inst] of updates) {
+						const node = this.fine.getChildNode(inst);
+						core.emit('core:dom-update', key, node, inst);
+					}
+				})
+		});
+
 		// Window Size
 		const update_size = () => this.settings.updateContext({
 			size: {

src/sites/twitch-twilight/modules/channel.js

@@ -293,6 +293,7 @@ export default class Channel extends Module {
 		// Finally, we force an update so that any child components
 		// receive our updated handler.
 		inst.forceUpdate();
+		this.emit('site:dom-update', 'channel-page', inst);
 	}
 
 

src/sites/twitch-twilight/modules/chat/input.jsx

@@ -202,6 +202,7 @@ export default class Input extends Module {
 
 			for(const inst of instances) {
 				inst.forceUpdate();
+				this.emit('site:dom-update', 'chat-input', inst);
 				this.updateEmoteCompletion(inst);
 				this.overrideChatInput(inst);
 			}

src/sites/twitch-twilight/modules/chat/scroller.js

@@ -374,6 +374,7 @@ export default class Scroller extends Module {
 				// We need to refresh the element to make sure it's using the correct
 				// event handlers for mouse enter / leave.
 				inst.forceUpdate();
+				t.emit('site:dom-update', 'chat-scroller', inst);
 			}
 
 			cls.prototype.ffzSetSmoothScroll = function(value) {

src/utilities/compat/fine.js

@@ -90,7 +90,7 @@ export default class Fine extends Module {
 				instance = instance.parent;
 	}
 
-	getChildNode(instance) {
+	getChildNode(instance, max_depth = 100) {
 		if ( instance._reactInternalFiber )
 			instance = instance._reactInternalFiber;
 		else if ( instance instanceof Node )
@@ -99,12 +99,16 @@ export default class Fine extends Module {
 		while( instance )
 			if ( instance.stateNode instanceof Node )
 				return instance.stateNode
-			else
+			else {
+				max_depth--;
+				if ( max_depth < 0 )
+					return null;
 				instance = instance.child;
 			}
+	}
 
-	getHostNode(instance) {
+	getHostNode(instance, max_depth = 100) {
-		return this.getChildNode(instance);
+		return this.getChildNode(instance, max_depth);
 	}
 
 	getParent(instance) {
@@ -285,13 +289,11 @@ export default class Fine extends Module {
 			}
 		}
 
-		if ( node.child ) {
 		let child = node.child;
 		while(child) {
 			this.searchAll(child, criterias, max_depth, depth+1, data, traverse_roots);
 			child = child.sibling;
 		}
-		}
 
 		if ( traverse_roots && inst && inst.props && inst.props.root ) {
 			const root = inst.props.root._reactRootContainer;
@@ -636,6 +638,8 @@ export class FineWrapper extends EventEmitter {
 		for(const inst of this.instances)
 			try {
 				inst.forceUpdate();
+				this.fine.emit('site:dom-update', this.name, inst);
+
 			} catch(err) {
 				this.fine.log.capture(err, {
 					tags: {