4.20.31

* Changed: Set the default chat reply style to Twitch's own, now that messages can be selected.
* Fixed: Update the chat replies support for Twitch's default style.
* Fixed: Badge tool-tips not working for certain chat messages with additional formatting. (Closes #887)
* Fixed: FFZ hiding the `Watch Full Video` button on clips pages if the option to hide the native live viewer count is enabled. (Closes #883)
* API Added: `threads` icon.

src/modules/chat/badges.jsx

@@ -346,9 +346,12 @@ export default class Badges extends Module {
 		this.tooltips.types.badge = (target, tip) => {
 			tip.add_class = 'ffz__tooltip--badges';
 
-			const show_previews = this.parent.context.get('tooltip.badge-images'),
-				container = target.parentElement.parentElement,
-				room_id = container.dataset.roomId,
+			const show_previews = this.parent.context.get('tooltip.badge-images');
+			let container = target.parentElement.parentElement;
+			if ( ! container.dataset.roomId )
+				container = target.closest('[data-room-id]');
+
+			const room_id = container.dataset.roomId,
 				room_login = container.dataset.room,
 				data = JSON.parse(target.dataset.badgeData),
 				out = [];

src/modules/metadata.jsx

@@ -110,7 +110,7 @@ export default class Metadata extends Module {
 
 			setup(data) {
 				return {
-					live: data.channel?.live_since != null,
+					live: data.channel?.live && data.channel?.live_since != null,
 					count: data.getViewerCount()
 				}
 			},

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

@@ -251,15 +251,15 @@ export default class ChatHook extends Module {
 		// Settings
 
 		this.settings.add('chat.replies.style', {
-			default: 2,
+			default: 1,
 			ui: {
 				path: 'Chat > Appearance >> Replies',
 				title: 'Style',
-				description: `Twitch's default style makes entire messages clickable and adds a button to the right. FrankerFaceZ uses an In-Line Chat Action and does not make messages clickable.`,
+				description: `Twitch's default style makes adds a floating button to the right and displays a notice above messages that are replies. FrankerFaceZ uses an In-Line Chat Action (that can be removed in Chat > Actions > In-Line) and uses an in-line mention to denote replies.`,
 				component: 'setting-select-box',
 				data: [
 					{value: 0, title: 'Disabled'},
-					{value: 1, title: 'Vanilla Twitch'},
+					{value: 1, title: 'Twitch (Default)'},
 					{value: 2, title: 'FrankerFaceZ'}
 				]
 			}

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

@@ -506,7 +506,7 @@ other {# messages were deleted by a moderator.}
 					] : user_block)
 				];
 
-				let cls = `chat-line__message${show_class ? ' ffz--deleted-message' : ''}${twitch_clickable ? ' tw-relative' : ''}${twitch_clickable && can_reply ? ' tw-pd-r-3' : ''}`,
+				let cls = `chat-line__message${show_class ? ' ffz--deleted-message' : ''}${twitch_clickable ? ' tw-relative' : ''}`,
 					out = (tokens.length || ! msg.ffz_type) ? [
 						this.props.showTimestamps && e('span', {
 							className: 'chat-line__timestamp'
@@ -550,29 +550,37 @@ other {# messages were deleted by a moderator.}
 					] : null;
 
 				if ( twitch_clickable ) {
-					let btn = null;
-					if ( can_reply )
-						btn = e('div', {
-							className: 'chat-line__reply-icon tw-absolute tw-c-text-alt-2 tw-right-0 tw-top-0 ffz-tooltip ffz-tooltip--no-mouse',
-							'data-title': t.i18n.t('chat.actions.reply', 'Reply to Message')
-						}, [
-							e('div', {
-								className: 'chat-line__reply-icon-background tw-border-bottom-left-radius-medium tw-border-top-right-radius-medium tw-c-background-alt-2'
-							}),
-							e('figure', {className: 'ffz-i-reply'})
-						]);
+					let icon, title;
+					if ( can_reply ) {
+						icon = e('figure', {className: 'ffz-i-reply'});
+						title = t.i18n.t('chat.actions.reply', 'Reply to Message');
+					} else {
+						icon = e('figure', {className: 'ffz-i-threads'});
+						title = t.i18n.t('chat.actions.reply.thread', 'Open Thread');
+					}
 
 					out = [
-						e('button', {
-							className: 'ffz--reply-container chat-line__reply-button-container tw-interactive tw-link tw-link--button',
-							'data-test-selector': 'chat-reply-button',
-							onClick: this.ffz_open_reply
-						}, e('div', {className: 'chat-line__reply-button'}, btn)),
-
-						e('div', {className: 'chat-line__message-container tw-relative'}, [
+						e('div', {
+							className: 'chat-line__message-highlight tw-absolute tw-border-radius-medium tw-top-0 tw-bottom-0 tw-right-0 tw-left-0',
+							'data-test-selector': 'chat-message-highlight'
+						}),
+						e('div', {
+							className: 'chat-line__message-container tw-relative'
+						}, [
 							this.renderReplyLine(),
 							out
-						])
+						]),
+						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 tw-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)))
 					];
 				}
 

src/sites/twitch-twilight/modules/css_tweaks/styles/hide-native-viewers.scss

@@ -1,5 +1,5 @@
 .ffz--meta-tray {
-	& > :first-child > :first-child {
+	& > :first-child > :first-child:not(.tw-core-button) {
 		display: none !important;
 		margin-right: 0 !important;
 	}

src/sites/twitch-twilight/styles/chat.scss

@@ -59,22 +59,9 @@
 	pointer-events: none;
 }
 
-.ffz--reply-container {
-	height: 100% !important;
-	width: 100% !important;
-	left: 0 !important;
-	right: 0 !important;
-
-	.chat-line__reply-icon {
-		padding: 0;
-
-		figure {
-			position: absolute;
-			z-index: 1;
-			top: 0.25rem;
-			right: 0.25rem;
-		}
-	}
+.chat-line__reply-icon {
+	right: 0.5rem !important;
+	top: -1rem !important;
 }
 
 .ffz--reply-mention {

src/utilities/ffz-icons.js

@@ -101,5 +101,6 @@ export default [
 	"location",
 	"link",
 	"volume-off",
-	"reply"
+	"reply",
+	"threads"
 ];