4.20.30

* Added: Support for Twitch's native chat replies style.
* Added: Option to display in-line actions on hover.
* Added: Option for changing the current replies style, including a choice to disable replies.
* Fixed: Hover styling for elements including rich chat embeds due to a removed CSS class.

src/modules/chat/actions/index.jsx

@@ -484,11 +484,16 @@ export default class Actions extends Module {
 		const u = site.getUser(),
 			r = {id: line.props.channelID, login: room};
 
+		const has_replies = line.chatRepliesTreatment ? line.chatRepliesTreatment !== 'control' : false,
+			can_replies = has_replies && ! msg.deleted && ! line.props.disableReplyClick,
+			can_reply = can_replies && u.login !== msg.user?.login && ! msg.reply;
+
 		msg.roomId = r.id;
 
 		if ( u ) {
 			u.moderator = line.props.isCurrentUserModerator;
 			u.staff = line.props.isCurrentUserStaff;
+			u.can_reply = this.parent.context.get('chat.replies.style') === 2 && can_reply;
 		}
 
 		const current_level = this.getUserLevel(r, u),
@@ -629,6 +634,7 @@ export default class Actions extends Module {
 			let ap = data.appearance || {};
 			const disp = data.display || {},
 				keys = disp.keys,
+				hover = disp.hover,
 				act = this.actions[data.action];
 
 			if ( ! act || disp.disabled ||
@@ -661,12 +667,12 @@ export default class Actions extends Module {
 
 			let list = actions;
 
-			if ( keys )
+			if ( keys || hover )
 				list = modified;
 
 			had_action = true;
 			list.push(<button
-				class={`ffz-tooltip ffz-mod-icon mod-icon tw-c-text-alt-2${disabled ? ' disabled' : ''}${has_color ? ' colored' : ''}${keys ? ` ffz-modifier-${keys}` : ''}`}
+				class={`ffz-tooltip ffz-mod-icon mod-icon tw-c-text-alt-2${disabled ? ' disabled' : ''}${has_color ? ' colored' : ''}${keys ? ` ffz-modifier-${keys}` : ''}${hover ? ' ffz-hover' : ''}`}
 				disabled={disabled}
 				data-tooltip-type="action"
 				data-action={data.action}

src/modules/chat/actions/types.jsx

@@ -16,7 +16,7 @@ export const reply = {
 	required_context: ['message'],
 
 	title: 'Reply to Message',
-	description: 'Allows you to directly reply to another user\'s message.',
+	description: 'Allows you to directly reply to another user\'s message. Only functions when the Chat Replies Style is "FrankerFaceZ".',
 
 	can_self: true,
 

src/modules/chat/components/chat-rich.vue

@@ -282,7 +282,7 @@ export default {
 					tooltip && 'ffz-tooltip',
 					this.accent && 'ffz-accent-card',
 					!this.error && 'tw-interactable--hover-enabled',
-					'tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--alpha tw-interactive'
+					'tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--default tw-interactive'
 				],
 				attrs: {
 					'data-tooltip-type': 'link',

src/modules/chat/index.js

@@ -1514,8 +1514,6 @@ export default class Chat extends Module {
 			return [];
 
 		let tokens = [{type: 'text', text: msg.message}];
-		if ( ! tokens[0].text )
-			return tokens;
 
 		for(const tokenizer of this.__tokenizers)
 			tokens = tokenizer.process.call(this, tokens, msg, user);

src/modules/chat/tokenizers.jsx

@@ -250,7 +250,7 @@ export const Replies = {
 		}
 
 		return (<strong
-			class={`chat-line__message-mention ffz-tooltip ffz--reply-mention ffz-i-reply${token.me ? ' ffz--mention-me' : ''}`}
+			class={`chat-line__message-mention ffz--pointer-events ffz-tooltip ffz--reply-mention ffz-i-reply${token.me ? ' ffz--mention-me' : ''}`}
 			style={{color}}
 			data-tooltip-type="reply"
 			data-login={token.recipient}
@@ -311,7 +311,7 @@ export const Mentions = {
 		}
 
 		return (<strong
-			class={`chat-line__message-mention${token.me ? ' ffz--mention-me' : ''}`}
+			class={`chat-line__message-mention${token.me ? ' ffz--mention-me' : ''} ffz--pointer-events`}
 			style={{color}}
 			data-login={token.recipient}
 			onClick={this.handleMentionClick}
@@ -637,7 +637,7 @@ export const BlockedTerms = {
 		return (<strong
 			data-text={token.text}
 			data-tooltip-type="blocked"
-			class="ffz-tooltip ffz--blocked"
+			class="ffz-tooltip ffz--blocked ffz--pointer-events"
 			onClick={this.clickToReveal}
 		>
 			&times;&times;&times;
@@ -698,7 +698,7 @@ export const AutomoddedTerms = {
 			data-text={token.text}
 			data-categories={JSON.stringify(token.categories)}
 			data-tooltip-type="amterm"
-			class="ffz-tooltip ffz--blocked"
+			class="ffz-tooltip ffz--blocked ffz--pointer-events"
 			onClick={this.clickToReveal}
 		>
 			&times;&times;&times;
@@ -866,7 +866,7 @@ export const CheerEmotes = {
 
 	render(token, createElement) {
 		return (<span
-			class="ffz-cheer ffz-tooltip"
+			class="ffz-cheer ffz-tooltip ffz--pointer-events"
 			data-tooltip-type="cheer"
 			data-prefix={token.prefix}
 			data-amount={this.i18n.formatNumber(token.amount)}
@@ -1087,7 +1087,7 @@ export const AddonEmotes = {
 	render(token, createElement, wrapped) {
 		const mods = token.modifiers || [], ml = mods.length,
 			emote = (<img
-				class={`${EMOTE_CLASS} ffz-tooltip${token.provider === 'ffz' ? ' ffz-emote' : token.provider === 'emoji' ? ' ffz-emoji' : ''}`}
+				class={`${EMOTE_CLASS} ffz--pointer-events ffz-tooltip${token.provider === 'ffz' ? ' ffz-emote' : token.provider === 'emoji' ? ' ffz-emoji' : ''}`}
 				src={token.src}
 				srcSet={token.srcSet}
 				alt={token.text}
@@ -1110,7 +1110,7 @@ export const AddonEmotes = {
 		}
 
 		return (<div
-			class="ffz--inline modified-emote"
+			class="ffz--inline ffz--pointer-events modified-emote"
 			data-test-selector="emote-button"
 			data-provider={token.provider}
 			data-id={token.id}

src/modules/main_menu/components/action-editor.vue

@@ -329,6 +329,22 @@
 										</span>
 									</label>
 								</div>
+
+								<div class="tw-pd-r-1 tw-checkbox">
+									<input
+										:id="'key_hover$' + id"
+										ref="key_hover"
+										:checked="edit_data.display.hover"
+										type="checkbox"
+										class="tw-checkbox__input"
+										@change="onChangeKeys"
+									>
+									<label :for="'key_hover$' + id" class="tw-checkbox__label">
+										<span class="tw-mg-l-1">
+											{{ t('setting.key.hover', 'Hover') }}
+										</span>
+									</label>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -660,6 +676,9 @@ export default {
 					}));
 			}
 
+			if ( disp.hover )
+				out.push(this.t('setting.actions.visible.hover', 'when hovering'));
+
 			if ( ! out.length )
 				return this.t('setting.actions.visible.always', 'always');
 
@@ -693,6 +712,7 @@ export default {
 			if ( this.$refs.key_meta.checked )
 				i |= 8;
 
+			this.edit_data.display.hover = this.$refs.key_hover.checked;
 			this.edit_data.display.keys = i;
 		},