From 7257e4d2ebca60c98420708a2578f51aa9e1792e Mon Sep 17 00:00:00 2001 From: SirStendec Date: Sun, 13 Oct 2019 00:41:09 -0400 Subject: [PATCH] 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 | 2 +- src/modules/tooltips.js | 2 +- src/sites/twitch-twilight/index.js | 19 +++++++++++++++ src/sites/twitch-twilight/modules/channel.js | 1 + .../twitch-twilight/modules/chat/input.jsx | 1 + .../twitch-twilight/modules/chat/scroller.js | 1 + src/utilities/compat/fine.js | 24 +++++++++++-------- 7 files changed, 38 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 9ea23588..a029da87 100755 --- a/package.json +++ b/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": { diff --git a/src/modules/tooltips.js b/src/modules/tooltips.js index e60f187a..f2fac4ba 100644 --- a/src/modules/tooltips.js +++ b/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'); diff --git a/src/sites/twitch-twilight/index.js b/src/sites/twitch-twilight/index.js index 924ca66b..a5b11c67 100644 --- a/src/sites/twitch-twilight/index.js +++ b/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: { diff --git a/src/sites/twitch-twilight/modules/channel.js b/src/sites/twitch-twilight/modules/channel.js index aaa03024..2c091186 100644 --- a/src/sites/twitch-twilight/modules/channel.js +++ b/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); } diff --git a/src/sites/twitch-twilight/modules/chat/input.jsx b/src/sites/twitch-twilight/modules/chat/input.jsx index bfadad91..7de1e8a9 100644 --- a/src/sites/twitch-twilight/modules/chat/input.jsx +++ b/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); } diff --git a/src/sites/twitch-twilight/modules/chat/scroller.js b/src/sites/twitch-twilight/modules/chat/scroller.js index c35cfaa4..ce7ff6a6 100644 --- a/src/sites/twitch-twilight/modules/chat/scroller.js +++ b/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) { diff --git a/src/utilities/compat/fine.js b/src/utilities/compat/fine.js index 57dbf94f..ad5fe5f6 100644 --- a/src/utilities/compat/fine.js +++ b/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) { - return this.getChildNode(instance); + getHostNode(instance, max_depth = 100) { + return this.getChildNode(instance, max_depth); } getParent(instance) { @@ -285,12 +289,10 @@ 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; - } + 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 ) { @@ -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: {