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', {