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.

fontello.config.json

@@ -759,6 +759,20 @@
       "css": "reply",
       "code": 61714,
       "src": "fontawesome"
+    },
+    {
+      "uid": "d4413cf47ed064b48fcd5bf727826be1",
+      "css": "threads",
+      "code": 59460,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M550 400H650V500H550V400ZM450 400H350V500H450V400ZM500 900L350 750H250A100 100 0 0 1 150 650V250A100 100 0 0 1 250 150H750A100 100 0 0 1 850 250V650A100 100 0 0 1 750 750H650L500 900ZM391.4 650L500 758.6 608.6 650H750V250H250V650H391.4Z",
+        "width": 1000
+      },
+      "search": [
+        "threads"
+      ]
     }
   ]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.20.30",
+  "version": "4.20.31",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {

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"
 ];

styles/fontello/ffz-fontello-codes.scss

@@ -67,6 +67,7 @@
 .ffz-i-chat:before { content: '\e841'; } /* '' */
 .ffz-i-location:before { content: '\e842'; } /* '' */
 .ffz-i-link:before { content: '\e843'; } /* '' */
+.ffz-i-threads:before { content: '\e844'; } /* '' */
 .ffz-i-volume-off:before { content: '\e845'; } /* '' */
 .ffz-i-move:before { content: '\f047'; } /* '' */
 .ffz-i-link-ext:before { content: '\f08e'; } /* '' */

styles/fontello/ffz-fontello-ie7-codes.scss

@@ -67,6 +67,7 @@
 .ffz-i-chat { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-location { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.ffz-i-threads { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-volume-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-move { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

styles/fontello/ffz-fontello-ie7.scss

@@ -78,6 +78,7 @@
 .ffz-i-chat { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-location { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.ffz-i-threads { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-volume-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-move { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

styles/fontello/ffz-fontello.scss

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'ffz-fontello';
-  src: url('../font/ffz-fontello.eot?74161598');
-  src: url('../font/ffz-fontello.eot?74161598#iefix') format('embedded-opentype'),
-       url('../font/ffz-fontello.woff2?74161598') format('woff2'),
-       url('../font/ffz-fontello.woff?74161598') format('woff'),
-       url('../font/ffz-fontello.ttf?74161598') format('truetype'),
-       url('../font/ffz-fontello.svg?74161598#ffz-fontello') format('svg');
+  src: url('../font/ffz-fontello.eot?89863637');
+  src: url('../font/ffz-fontello.eot?89863637#iefix') format('embedded-opentype'),
+       url('../font/ffz-fontello.woff2?89863637') format('woff2'),
+       url('../font/ffz-fontello.woff?89863637') format('woff'),
+       url('../font/ffz-fontello.ttf?89863637') format('truetype'),
+       url('../font/ffz-fontello.svg?89863637#ffz-fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'ffz-fontello';
-    src: url('../font/ffz-fontello.svg?74161598#ffz-fontello') format('svg');
+    src: url('../font/ffz-fontello.svg?89863637#ffz-fontello') format('svg');
   }
 }
 */
@@ -123,6 +123,7 @@
 .ffz-i-chat:before { content: '\e841'; } /* '' */
 .ffz-i-location:before { content: '\e842'; } /* '' */
 .ffz-i-link:before { content: '\e843'; } /* '' */
+.ffz-i-threads:before { content: '\e844'; } /* '' */
 .ffz-i-volume-off:before { content: '\e845'; } /* '' */
 .ffz-i-move:before { content: '\f047'; } /* '' */
 .ffz-i-link-ext:before { content: '\f08e'; } /* '' */