4.37.1

* Added: "Pin This Message" chat action to allow moderators to pin messages as a quick fix until I can implement the normal vanilla pin button.
* Fixed: FrankerFaceZ failing to load correctly on moderation view pages.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.37.0",
+  "version": "4.37.1",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "private": true,
   "license": "Apache-2.0",

src/modules/chat/actions/index.jsx

@@ -743,7 +743,7 @@ export default class Actions extends Module {
 	}
 
 
-	renderInline(msg, mod_icons, current_user, current_room, createElement) {
+	renderInline(msg, mod_icons, current_user, current_room, createElement, instance = null) {
 		const actions = [];
 
 		const current_level = this.getUserLevel(current_room, current_user),
@@ -778,11 +778,11 @@ export default class Actions extends Module {
 			if ( is_self && ! act.can_self )
 				continue;
 
-			if ( maybe_call(act.hidden, this, data, msg, current_room, current_user, mod_icons) )
+			if ( maybe_call(act.hidden, this, data, msg, current_room, current_user, mod_icons, instance) )
 				continue;
 
 			if ( act.override_appearance ) {
-				const out = act.override_appearance.call(this, Object.assign({}, ap), data, msg, current_room, current_user, mod_icons);
+				const out = act.override_appearance.call(this, Object.assign({}, ap), data, msg, current_room, current_user, mod_icons, instance);
 				if ( out )
 					ap = out;
 			}
@@ -792,7 +792,7 @@ export default class Actions extends Module {
 				continue;
 
 			const has_color = def.colored && ap.color,
-				disabled = maybe_call(act.disabled, this, data, msg, current_room, current_user, mod_icons) || false,
+				disabled = maybe_call(act.disabled, this, data, msg, current_room, current_user, mod_icons, instance) || false,
 				color = has_color && (chat && chat.colors ? chat.colors.process(ap.color) : ap.color),
 				contents = def.render.call(this, ap, createElement, color);
 

src/modules/chat/actions/types.jsx

@@ -3,6 +3,57 @@
 import {createElement} from 'utilities/dom';
 
 
+// ============================================================================
+// Pin Message
+// ============================================================================
+
+export const pin = {
+	presets: [{
+		appearance: {
+			type: 'icon',
+			icon: 'ffz-i-pin'
+		}
+	}],
+
+	required_context: ['message'],
+
+	title: 'Pin This Message',
+	description: 'Allows you to pin a chat message. Only functions in channels that have access to Twitch\'s pinned messages experiment.',
+
+	can_self: true,
+
+	tooltip() {
+		return this.i18n.t('chat.actions.pin', 'Pin This Message')
+	},
+
+	hidden(data, message, current_room, current_user, mod_icons, instance) {
+		let line = instance;
+
+		if ( ! line )
+			return true;
+
+		if ( ! line.props.isPinnable || ! line.onPinMessageClick )
+			return true;
+	},
+
+	click(event, data) {
+		let line = data.line;
+		if ( ! line ) {
+			const fine = this.resolve('site.fine');
+			line = fine ? fine.searchParent(event.target, n => n.setMessageTray && n.props && n.props.message) : null;
+		}
+
+		if ( ! line || ! line.props.isPinnable || ! line.onPinMessageClick )
+			return;
+
+		if ( line.props.pinnedMessage?.message?.id === data.message_id )
+			return;
+
+		line.onPinMessageClick();
+	}
+}
+
+
 // ============================================================================
 // Send Reply
 // ============================================================================

src/sites/twitch-twilight/index.js

@@ -249,19 +249,20 @@ Twilight.KNOWN_MODULES = {
 	}
 }
 
-const VEND_CHUNK = n => ! n || n.includes('vendor');
+//const VEND_CHUNK = n => ! n || n.includes('vendor');
+const VEND_CORE = n => ! n || n.includes('vendor') || n.includes('core');
 
 Twilight.KNOWN_MODULES.core.use_result = true;
 //Twilight.KNOWN_MODULES.core.chunks = 'core';
 
-Twilight.KNOWN_MODULES.simplebar.chunks = VEND_CHUNK;
+Twilight.KNOWN_MODULES.simplebar.chunks = VEND_CORE;
-Twilight.KNOWN_MODULES.react.chunks = VEND_CHUNK;
+Twilight.KNOWN_MODULES.react.chunks = VEND_CORE;
-Twilight.KNOWN_MODULES.cookie.chunks = VEND_CHUNK;
+Twilight.KNOWN_MODULES.cookie.chunks = VEND_CORE;
 
 Twilight.KNOWN_MODULES['gql-printer'].use_result = true;
-Twilight.KNOWN_MODULES['gql-printer'].chunks = VEND_CHUNK;
+Twilight.KNOWN_MODULES['gql-printer'].chunks = VEND_CORE;
 
-Twilight.KNOWN_MODULES.mousetrap.chunks = VEND_CHUNK;
+Twilight.KNOWN_MODULES.mousetrap.chunks = VEND_CORE;
 
 const CHAT_CHUNK = n => ! n || n.includes('chat');
 

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

@@ -741,7 +741,7 @@ other {# messages were deleted by a moderator.}
 					Object.assign(user_props.style, msg.ffz_user_style);
 
 				const user_bits = [
-					t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),
+					t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this),
 					this.renderInlineHighlight ? this.renderInlineHighlight() : null,
 					e('span', {
 						className: 'chat-line__message--badges'
@@ -876,7 +876,7 @@ other {# messages were deleted by a moderator.}
 								out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', {
 									className: 'chat-line__timestamp'
 								}, t.chat.formatTime(msg.timestamp)),
-								(out || msg.sub_anon) ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),
+								(out || msg.sub_anon) ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this),
 								sub_msg
 							]),
 							mystery ? e('div', {
@@ -949,7 +949,7 @@ other {# messages were deleted by a moderator.}
 								out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', {
 									className: 'chat-line__timestamp'
 								}, t.chat.formatTime(msg.timestamp)),
-								(out || msg.sub_anon) ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),
+								(out || msg.sub_anon) ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this),
 								sub_msg
 							])
 						]),
@@ -1014,7 +1014,7 @@ other {# messages were deleted by a moderator.}
 									out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', {
 										className: 'chat-line__timestamp'
 									}, t.chat.formatTime(msg.timestamp)),
-									out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),
+									out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this),
 									sub_msg
 								])
 							]),
@@ -1073,7 +1073,7 @@ other {# messages were deleted by a moderator.}
 							out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', {
 								className: 'chat-line__timestamp'
 							}, t.chat.formatTime(msg.timestamp)),
-							out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),
+							out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this),
 							out ?
 								t.i18n.tList('chat.points.redeemed', 'Redeemed {reward} {cost}', {reward, cost}) :
 								t.i18n.tList('chat.points.user-redeemed', '{user} redeemed {reward} {cost}', {
@@ -1102,7 +1102,7 @@ other {# messages were deleted by a moderator.}
 							out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', {
 								className: 'chat-line__timestamp'
 							}, t.chat.formatTime(msg.timestamp)),
-							out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),
+							out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this),
 							t.i18n.tList('chat.bits-message', 'Cheered {count, plural, one {# Bit} other {# Bits}}', {count: msg.bits || 0})
 						]),
 						out && e('div', {
@@ -1140,17 +1140,33 @@ other {# messages were deleted by a moderator.}
 							this.props.repliesAppearancePreference && this.props.repliesAppearancePreference === 'expanded' ? this.renderReplyLine() : null,
 							out
 						]),
-						e('div', {
+						/*e('div', {
-							className: 'chat-line__reply-icon tw-absolute tw-border-radius-medium tw-c-background-base tw-elevation-1'
+							className: 'chat-line__icons'
-						}, e('button', {
+						}, [*/
-							className: 'tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip ffz-tooltip--no-mouse',
+							/*e('div', {
-							'data-test-selector': 'chat-reply-button',
+								className: 'chat-line__pin-icon tw-absolute tw-border-radius-medium tw-c-background-base tw-elevation-1'
-							'aria-label': title,
+							}, e('button', {
-							'data-title': title,
+								className: 'tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip ffz-tooltip--no-mouse',
-							onClick: this.ffz_open_reply
+								'data-test-selector': 'chat-pin-button',
-						}, e('span', {
+								'aria-label': 'Pin This Message',
-							className: 'tw-button-icon__icon'
+								'data-title': 'Pin This Message',
-						}, icon)))
+								onClick: this.onPinMessageClick
+							}, e('span', {
+								className: 'tw-button-icon__icon'
+							}, e('figure', {className: 'ffz-i-'})))),
+							//this.renderPinButton(),*/
+							e('div', {
+								className: 'chat-line__reply-icon tw-absolute tw-border-radius-medium tw-c-background-base tw-elevation-1'
+							}, e('button', {
+								className: 'tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip ffz-tooltip--no-mouse',
+								'data-test-selector': 'chat-reply-button',
+								'aria-label': title,
+								'data-title': title,
+								onClick: this.ffz_open_reply
+							}, e('span', {
+								className: 'tw-button-icon__icon'
+							}, icon)))
+						//])
 					];
 				}