diff --git a/package.json b/package.json
index 8aae5659..e4a89936 100755
--- a/package.json
+++ b/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",
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index c2604d9c..0622f863 100644
--- a/src/modules/chat/index.js
+++ b/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: {
diff --git a/src/sites/clips/line.jsx b/src/sites/clips/line.jsx
index 7d3a4605..119f84e7 100644
--- a/src/sites/clips/line.jsx
+++ b/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 {
{
is_action ? '' : ':'
}
- {
+ {
t.chat.renderTokens(tokens, createElement)
}
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index 7425dbb7..894b90c4 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/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' : ''}`,
- style: is_action ? { color } : null
+ className:`message ${action_italic ? 'chat-line__message-body--italicized' : ''} ${twitch_highlight ? 'chat-line__message-body--highlighted' : ''}`,
+ style: action_color ? { color } : null
}, t.chat.renderTokens(tokens, e, (reply_mode !== 0 && has_replies) ? this.props.reply : null))
:
e('span', {