4.21.4

* Added: Option for controlling styles applied to action (`/me`) messages in chat.

package.json

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

src/modules/chat/index.js

@@ -933,6 +933,23 @@ export default class Chat extends Module {
 			}
 		});
 
+		this.settings.add('chat.me-style', {
+			default: 2,
+			ui: {
+				path: 'Chat > Appearance >> Chat Lines',
+				title: 'Action Style',
+				description: 'When someone uses `/me`, the message will be rendered in this style.',
+				component: 'setting-select-box',
+
+				data: [
+					{value: 0, title: 'No Style'},
+					{value: 1, title: 'Colorized (Old Style)'},
+					{value: 2, title: 'Italic (New Style)'},
+					{value: 3, title: 'Colorized Italic'}
+				]
+			}
+		});
+
 		this.settings.add('chat.bits.stack', {
 			default: 0,
 			ui: {

src/sites/clips/line.jsx

@@ -33,6 +33,7 @@ export default class Line extends Module {
 	}
 
 	onEnable() {
+		this.chat.context.on('changed:chat.me-style', this.updateLines, this);
 		this.chat.context.on('changed:chat.emotes.enabled', this.updateLines, this);
 		this.chat.context.on('changed:chat.emotes.2x', this.updateLines, this);
 		this.chat.context.on('changed:chat.emotes.animated', this.updateLines, this);
@@ -68,6 +69,9 @@ export default class Line extends Module {
 					const msg = t.standardizeMessage(this.props.node, this.props.video),
 						anim_hover = t.chat.context.get('chat.emotes.animated') === 2,
 						is_action = msg.is_action,
+						action_style = is_action ? t.chat.context.get('chat.me-style') : 0,
+						action_italic = action_style >= 2,
+						action_color = action_style === 1 || action_style === 3,
 						user = msg.user,
 						color = t.parent.colors.process(user.color),
 
@@ -100,7 +104,7 @@ export default class Line extends Module {
 							<div class="tw-inline-block tw-mg-r-05">{
 								is_action ? '' : ':'
 							}</div>
-							<span class="message" style={{color: is_action ? color : null}}>{
+							<span class={`message${action_italic ? ' chat-line__message-body--italicized' : ''}`} style={{color: action_color ? color : null}}>{
 								t.chat.renderTokens(tokens, createElement)
 							}</span>
 						</div>

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

@@ -60,6 +60,7 @@ export default class ChatLine extends Module {
 		this.on('chat:update-lines', this.updateLines, this);
 		this.on('i18n:update', this.updateLines, this);
 
+		this.chat.context.on('changed:chat.me-style', this.updateLines, this);
 		this.chat.context.on('changed:chat.emotes.enabled', this.updateLines, this);
 		this.chat.context.on('changed:chat.emotes.2x', this.updateLines, this);
 		this.chat.context.on('changed:chat.emotes.animated', this.updateLines, this);
@@ -189,6 +190,9 @@ export default class ChatLine extends Module {
 					const msg = t.chat.standardizeWhisper(this.props.message),
 
 						is_action = msg.is_action,
+						action_style = is_action ? t.chat.context.get('chat.me-style') : 0,
+						action_italic = action_style >= 2,
+						action_color = action_style === 1 || action_style === 3,
 						user = msg.user,
 						raw_color = t.overrides.getColor(user.id) || user.color,
 						color = t.parent.colors.process(raw_color),
@@ -208,9 +212,9 @@ export default class ChatLine extends Module {
 							}, override_name || user.displayName),
 							e('span', null, is_action ? ' ' : ': '),
 							e('span', {
-								className: 'message',
+								className: `message${action_italic ? ' chat-line__message-body--italicized' : ''}`,
 								style: {
-									color: is_action && color
+									color: action_color && color
 								}
 							}, contents)
 						])
@@ -345,6 +349,9 @@ export default class ChatLine extends Module {
 					msg = t.chat.standardizeMessage(this.props.message),
 					reply_tokens = (reply_mode === 2 || (reply_mode === 1 && this.props.repliesAppearancePreference && this.props.repliesAppearancePreference !== 'expanded')) ? ( msg.ffz_reply = msg.ffz_reply || t.chat.tokenizeReply(this.props.reply) ) : null,
 					is_action = msg.messageType === types.Action,
+					action_style = is_action ? t.chat.context.get('chat.me-style') : 0,
+					action_italic = action_style >= 2,
+					action_color = action_style === 1 || action_style === 3,
 
 					user = msg.user,
 					raw_color = t.overrides.getColor(user.id) || user.color,
@@ -543,8 +550,8 @@ other {# messages were deleted by a moderator.}
 							: null,
 						show ?
 							e('span', {
-								className:`message ${twitch_highlight ? 'chat-line__message-body--highlighted' : ''}`,
+								className:`message ${action_italic ? 'chat-line__message-body--italicized' : ''} ${twitch_highlight ? 'chat-line__message-body--highlighted' : ''}`,
-								style: is_action ? { color } : null
+								style: action_color ? { color } : null
 							}, t.chat.renderTokens(tokens, e, (reply_mode !== 0 && has_replies) ? this.props.reply : null))
 							:
 							e('span', {