4.17.14

* Added: Setting for disabling the highlight on messages highlighted with channel points.
* Fixed: Badges not appearing correctly in chat. (Fixed detection of the `chat-container` component.)
* Fixed: Partially fixed rendering of subscription messages in Chat on Videos. Twitch's data format is broken and doesn't distinguish between the system message (Example: `X resubscribed for 3 months ...`) and the actual user message (Example: `Hi thanks for three months`) so rendering them properly is difficult.

package.json

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

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

@@ -180,7 +180,7 @@ export default class ChatHook extends Module {
 
 		this.ChatContainer = this.fine.define(
 			'chat-container',
-			n => n.showViewersList && n.onChatInputFocus,
+			n => n.closeViewersList && n.onChatInputFocus,
 			Twilight.CHAT_ROUTES
 		);
 
@@ -190,17 +190,11 @@ export default class ChatHook extends Module {
 			Twilight.CHAT_ROUTES
 		);
 
-		this.PinnedCheer = this.fine.define(
+		/*this.PinnedCheer = this.fine.define(
 			'pinned-cheer',
 			n => n.collapseCheer && n.saveRenderedMessageRef,
 			Twilight.CHAT_ROUTES
-		);
+		);*/
-
-		this.RoomPicker = this.fine.define(
-			'chat-picker',
-			n => n.closeRoomPicker && n.handleRoomSelect,
-			Twilight.CHAT_ROUTES
-		);
 
 		this.InlineCallout = this.fine.define(
 			'inline-callout',
@@ -280,12 +274,11 @@ export default class ChatHook extends Module {
 			}
 		});
 
-		this.settings.add('chat.points.custom-rendering', {
+		this.settings.add('chat.points.allow-highlight', {
 			default: true,
 			ui: {
 				path: 'Chat > Channel Points >> Appearance',
-				title: 'Use custom rendering for channel points reward messages in chat.',
+				title: 'Highlight the message in chat when someone redeems Highlight My Message.',
-				description: 'Custom rendering applies a background color to highlighted messages, which some users may not appreciate.',
 				component: 'setting-check-box'
 			}
 		});
@@ -654,6 +647,7 @@ export default class ChatHook extends Module {
 		this.chat.context.on('changed:chat.filtering.highlight-tokens', this.updateMentionCSS, this);
 		this.chat.context.on('changed:chat.filtering.mention-color', this.updateMentionCSS, this);
 		this.chat.context.on('changed:chat.fix-bad-emotes', this.updateChatLines, this);
+		this.chat.context.on('changed:chat.points.allow-highlight', this.updateChatLines, this);
 		this.chat.context.on('changed:chat.filtering.display-deleted', this.updateChatLines, this);
 		this.chat.context.on('changed:chat.filtering.display-mod-action', this.updateChatLines, this);
 		this.chat.context.on('changed:chat.filtering.clickable-mentions', val => this.css_tweaks.toggle('clickable-mentions', val));
@@ -1002,21 +996,13 @@ export default class ChatHook extends Module {
 		});
 
 
-		this.PinnedCheer.on('mount', this.fixPinnedCheer, this);
+		/*this.PinnedCheer.on('mount', this.fixPinnedCheer, this);
 		this.PinnedCheer.on('update', this.fixPinnedCheer, this);
 
 		this.PinnedCheer.ready((cls, instances) => {
 			for(const inst of instances)
 				this.fixPinnedCheer(inst);
-		});
+		});*/
-
-
-		this.RoomPicker.ready((cls, instances) => {
-			for(const inst of instances)
-				this.closeRoomPicker(inst);
-		});
-
-		this.RoomPicker.on('mount', this.closeRoomPicker, this);
 	}
 
 
@@ -1083,11 +1069,6 @@ export default class ChatHook extends Module {
 	}
 
 
-	closeRoomPicker(inst) { // eslint-disable-line class-methods-use-this
-		inst.closeRoomPicker();
-	}
-
-
 	wrapChatBuffer(cls) {
 		if ( cls.prototype._ffz_was_here )
 			return;
@@ -1837,16 +1818,14 @@ export default class ChatHook extends Module {
 				const old_points = this.onChannelPointsRewardEvent;
 				this.onChannelPointsRewardEvent = function(e) {
 					try {
-						if ( t.chat.context.get('chat.points.custom-rendering') ) {
+						const reward = e.rewardID && get(e.rewardID, i.props.rewardMap);
-							const reward = e.rewardID && get(e.rewardID, i.props.rewardMap);
+						if ( reward ) {
-							if ( reward ) {
+							const out = i.convertMessage(e);
-								const out = i.convertMessage(e);
 
-								out.ffz_type = 'points';
+							out.ffz_type = 'points';
-								out.ffz_reward = reward;
+							out.ffz_reward = reward;
 
-								return i.postMessageToCurrentChannel(e, out);
+							return i.postMessageToCurrentChannel(e, out);
-							}
 						}
 
 					} catch(err) {
@@ -1931,7 +1910,7 @@ export default class ChatHook extends Module {
 
 
 	updateChatLines() {
-		this.PinnedCheer.forceUpdate();
+		//this.PinnedCheer.forceUpdate();
 		this.chat_line.updateLines();
 	}
 
@@ -1940,7 +1919,7 @@ export default class ChatHook extends Module {
 	// Pinned Cheers
 	// ========================================================================
 
-	fixPinnedCheer(inst) {
+	/*fixPinnedCheer(inst) {
 		const el = this.fine.getChildNode(inst),
 			container = el && el.querySelector && el.querySelector('.pinned-cheer__headline'),
 			tc = inst.props.topCheer;
@@ -1974,7 +1953,7 @@ export default class ChatHook extends Module {
 			cont.innerHTML = '';
 			setChildren(cont, this.chat.renderTokens(tokens));
 		}
-	}
+	}*/
 
 
 	// ========================================================================

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

@@ -613,7 +613,10 @@ other {# messages were deleted by a moderator.}
 							t.i18n.formatNumber(getRewardCost(msg.ffz_reward))
 						]);
 
-					cls = `ffz-notice-line ffz--points-line tw-pd-l-1 tw-pd-y-05 tw-pd-r-2${isHighlightedReward(msg.ffz_reward) ? ' ffz--points-highlight' : ''}${show_class ? ' ffz--deleted-message' : ''}`;
+					const can_highlight = t.chat.context.get('chat.points.allow-highlight'),
+						highlight = can_highlight && isHighlightedReward(msg.ffz_reward);
+
+					cls = `ffz-notice-line ffz--points-line tw-pd-l-1 tw-pd-y-05 tw-pd-r-2${highlight ? ' ffz--points-highlight' : ''}${show_class ? ' ffz--deleted-message' : ''}`;
 					out = [
 						e('div', {className: 'tw-c-text-alt-2'}, [
 							out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),

src/sites/twitch-twilight/modules/video_chat/index.jsx

@@ -281,9 +281,11 @@ export default class VideoChatHook extends Module {
 					if ( msg.ffz_removed )
 						return null;
 
+					const highlight = ! bg_css && msg.highlight && t.chat.context.get('chat.points.allow-highlight');
+
 					return (<div
 						data-test-selector="message-layout"
-						class={`tw-align-items-start tw-flex tw-flex-nowrap tw-full-width tw-pd-l-05 tw-pd-y-05 vod-message${msg.highlight ? ' ffz-notice-line ffz--points-line ffz--points-highlight ffz-custom-color' : ''}${msg.mentioned ? ' ffz-mentioned' : ''}${bg_css ? ' ffz-custom-color' : ''}`}
+						class={`tw-align-items-start tw-flex tw-flex-nowrap tw-full-width tw-pd-l-05 tw-pd-y-05 vod-message${msg.is_sub ? ' ffz-notice-line ffz--subscribe-line' : ''}${msg.highlight ? ' ffz-notice-line ffz--points-line' : ''}${highlight ? ' ffz--points-highlight ffz-custom-color' : ''}${msg.mentioned ? ' ffz-mentioned' : ''}${bg_css ? ' ffz-custom-color' : ''}`}
 						style={{backgroundColor: bg_css}}
 					>
 						{this.props.hideTimestamp || (<div data-test-selector="message-timestamp" class="tw-align-right tw-flex tw-flex-shrink-0 vod-message__header">
@@ -360,7 +362,9 @@ export default class VideoChatHook extends Module {
 		if ( comment._ffz_message )
 			return comment._ffz_message;
 
-		const room = this.chat.getRoom(comment.channelId, null, true, true);
+		const room = this.chat.getRoom(comment.channelId, null, true, true),
+			params = comment.message.userNoticeParams,
+			msg_id = params && params['msg-id'];
 
 		const out = comment._ffz_message = {
 			user: {
@@ -378,9 +382,13 @@ export default class VideoChatHook extends Module {
 			is_action: comment.message.isAction,
 			more_replies: comment.moreReplies,
 			timestamp: comment.createdAt,
-			highlight: comment.message.userNoticeParams?.['msg-id'] === 'highlighted-message'
+			is_sub: msg_id === 'sub' || msg_id === 'resub',
+			highlight: msg_id === 'highlighted-message'
 		};
 
+		// TODO: We need to strip the sub message from chat messages
+		// because Twitch is dumb.
+
 		this.chat.detokenizeMessage(out);
 
 		return out;