4.9.1

Changed: Chat Room Actions now render beneath the chat input, next to the chat settings button.
Fixed: The setting to hide `Latest Videos` from the Following directory breaking many parts of the website.
Fixed: Due to the relocated Chat Room Actions, compatibility is improved with certain features of the BetterTTV browser extension.

package.json

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

src/modules/chat/actions/index.jsx

@@ -447,7 +447,7 @@ export default class Actions extends Module {
 				contents = def.render.call(this, ap, createElement, color);
 
 			actions.push(<button
-				class={`ffz-tooltip ffz-mod-icon mod-icon tw-c-text-alt-2${has_color ? ' colored' : ''}`}
+				class={`ffz-tooltip tw-pd-x-05 ffz-mod-icon mod-icon tw-c-text-alt-2${has_color ? ' colored' : ''}`}
 				data-tooltip-type="action"
 				data-action={data.action}
 				data-options={data.options ? JSON.stringify(data.options) : null}
@@ -465,7 +465,7 @@ export default class Actions extends Module {
 		const room = current_room && JSON.stringify(current_room);
 
 		return (<div
-			class="ffz--room-actions ffz-action-data tw-pd-y-05 tw-border-t"
+			class="ffz--room-actions ffz-action-data tw-flex tw-flex-grow-1 tw-mg-x-05 tw-align-items-center"
 			data-room={room}
 		>
 			{actions}

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

@@ -5,6 +5,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
+import { findReactFragment } from 'utilities/dom';
 import Twilight from 'site';
 
 export default class Input extends Module {
@@ -154,7 +155,8 @@ export default class Input extends Module {
 			cls.prototype.render = function() {
 				const out = old_render.call(this);
 				try {
-					if ( ! out || ! out.props || ! Array.isArray(out.props.children) )
+					const container = findReactFragment(out, n => n.props && n.props.children && n.props.className === 'chat-input__buttons-container');
+					if ( ! container )
 						return out;
 
 					const props = this.props;
@@ -179,16 +181,7 @@ export default class Input extends Module {
 						}
 
 					const actions = t.actions.renderRoom(t.chat.context.get('context.chat.showModIcons'), u, r, createElement);
-
+					container.props.children.splice(1, 0, actions || null);
-					// TODO: Instead of putting actions above the chat input,
-					// put them next to the settings menu. This involves going
-					// exploring in the React render output, which is a mess.
-					//t.log.info('chat-input-render', out);
-
-					if ( actions )
-						out.props.children.unshift(actions);
-					else
-						out.props.children.unshift(null);
 
 				} catch(err) {
 					t.log.error(err);

src/utilities/dom.js

@@ -40,6 +40,42 @@ export function off(obj, ...args) {
 }
 
 
+export function findReactFragment(frag, criteria, depth = 25, current = 0, visited = null) {
+	if ( ! visited )
+		visited = new Set;
+	else if ( visited.has(frag) )
+		return null;
+
+	if ( criteria(frag) )
+		return frag;
+
+	if ( current >= depth )
+		return null;
+
+	visited.add(frag);
+
+	if ( frag && frag.props && Array.isArray(frag.props.children) )
+		for(const child of frag.props.children) {
+			if ( ! child )
+				continue;
+
+			if ( Array.isArray(child) ) {
+				for(const f of child) {
+					const out = findReactFragment(f, criteria, depth, current + 1, visited);
+					if ( out )
+						return out;
+				}
+			} else {
+				const out = findReactFragment(child, criteria, depth, current + 1, visited);
+				if ( out )
+					return out;
+			}
+		}
+
+	return null;
+}
+
+
 export function createElement(tag, props, ...children) {
 	const el = document.createElement(tag);