4.17.1

* Changed: Update badge colors after Twitch fixed the colors of the new badges.
* Fixed: Change the DOM output for emotes in chat to what BetterTTV expects to allow for basic compatibility with BetterTTV's modifier emotes for users not using the `BetterTTV Emotes` add-on but instead BetterTTV itself.
* Removed: The unused `viewer_cards` and `logviewer` modules. Those are going to be moved into add-ons for further development.
* API Added: `chat:user-click` event when a username is clicked in chat.

package.json

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

src/modules/chat/badges.jsx

@@ -31,18 +31,18 @@ const CSS_BADGES = {
 
 	2: {
 		staff: { 1: { color: '#000' } },
-		admin: { 1: { color: '#FFCA5F' } },
+		admin: { 1: { color: '#DB7600' } },
 		broadcaster: { 1: { color: '#E91916' } },
-		moderator: { 1: { color: '#00FA05' } },
+		moderator: { 1: { color: '#00AD03' } },
 		global_mod: { 1: { color: '#006441' } },
-		twitchbot: { 1: { color: '#00FA05' } },
+		twitchbot: { 1: { color: '#00AD03' } },
 		partner: { 1: { color: '#9146FF' } },
 
 		subscriber: { 0: { color: '#8205B4'}, 1: { color: '#8205B4' } },
 
-		vip: { 1: { color: '#FA1ED2' } },
+		vip: { 1: { color: '#E005B9' } },
 		turbo: { 1: { color: '#59399A' } },
-		premium: { 1: { color: '#00A8E1' } },
+		premium: { 1: { color: '#00A0D6' } },
 		'anonymous-cheerer': { 1: { color: '#4B367C' } },
 		'clip-champ': { 1: { color: '#9146FF' } }
 	}

src/modules/chat/tokenizers.jsx

@@ -941,17 +941,18 @@ const render_emote = (token, createElement, wrapped) => {
 		if ( wrapped )
 			return emote;
 
-		return createElement('span', {
+		return createElement('div', {
+			className: 'ffz--inline',
 			attrs: {
-				'data-a-target': 'emote-name'
+				'data-test-selector': 'emote-button'
 			}
 		}, [emote]);
 	}
 
-	return createElement('span', {
+	return createElement('div', {
-		class: `${EMOTE_CLASS} modified-emote`,
+		class: 'ffz--inline modified-emote',
 		attrs: {
-			'data-a-target': 'emote-name',
+			'data-test-selector': 'emote-button',
 			'data-provider': token.provider,
 			'data-id': token.id,
 			'data-set': token.set,
@@ -994,12 +995,12 @@ export const AddonEmotes = {
 			if ( wrapped )
 				return emote;
 
-			return (<span data-a-target="emote-name">{emote}</span>);
+			return (<div class="ffz--inline" data-test-selector="emote-button">{emote}</div>);
 		}
 
-		return (<span
+		return (<div
-			class={`${EMOTE_CLASS} modified-emote`}
+			class="ffz--inline modified-emote"
-			data-a-target="emote-name"
+			data-test-selector="emote-button"
 			data-provider={token.provider}
 			data-id={token.id}
 			data-set={token.set}
@@ -1008,7 +1009,7 @@ export const AddonEmotes = {
 		>
 			{emote}
 			{mods.map(t => <span key={t.text}>{this.tokenizers.emote.render.call(this, t, createElement, true)}</span>)}
-		</span>);
+		</div>);
 	},
 
 	async tooltip(target, tip) {

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

@@ -10,7 +10,8 @@ import Module from 'utilities/module';
 import RichContent from './rich_content';
 import { has } from 'utilities/object';
 import { KEYS } from 'utilities/constants';
-import { print_duration } from 'src/utilities/time';
+import { print_duration } from 'utilities/time';
+import { FFZEvent } from 'utilities/events';
 import { getRewardTitle, getRewardCost, isHighlightedReward } from './points';
 
 const SUB_TIERS = {
@@ -31,8 +32,6 @@ export default class ChatLine extends Module {
 		this.inject('site.web_munch');
 		this.inject(RichContent);
 
-		this.inject('viewer_cards');
-
 		this.inject('chat.actions');
 
 		this.ChatLine = this.fine.define(
@@ -404,10 +403,20 @@ other {# messages were deleted by a moderator.}
 								} catch(err) { /* nothing~! */ }
 							}
 
-							/*if ( event.ctrlKey )
+							const fe = new FFZEvent({
-								t.viewer_cards.openCard(r, target_user, msg, event);
+								inst: this,
-							else*/
+								event,
-								this.props.onUsernameClick(target_user.login, 'chat_message', msg.id, target.getBoundingClientRect().bottom);
+								message: msg,
+								user: target_user,
+								room: r
+							});
+
+							t.emit('chat:user-click', fe);
+
+							if ( fe.defaultPrevented )
+								return;
+
+							this.props.onUsernameClick(target_user.login, 'chat_message', msg.id, target.getBoundingClientRect().bottom);
 						}
 					else
 						this.ffz_user_click_handler = this.openViewerCard || this.usernameClickHandler; //event => event.ctrlKey ? this.usernameClickHandler(event) : t.viewer_cards.openCard(r, user, event);

src/sites/twitch-twilight/modules/css_tweaks/styles/emote-alignment-baseline.scss

@@ -1,8 +1,8 @@
-.message > span > .chat-line__message--emote {
+.message > div > .chat-line__message--emote {
 	vertical-align: baseline;
 	padding-top: 5px;
 }
 
-.message > span > .chat-line__message--emote.ffz-emoji {
+.message > div > .chat-line__message--emote.ffz-emoji {
 	padding-top: 0px;
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/emote-alignment-padded.scss

@@ -1,3 +1,3 @@
-.message > span > .chat-line__message--emote {
+.message > div > .chat-line__message--emote {
 	margin: -1px 0 0;
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/hide-side-nav.scss

@@ -0,0 +1,7 @@
+.side-nav {
+	display: none !important;
+}
+
+.side-nav--hover-exp~.twilight-main {
+	margin-left: 0 !important;
+}

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

@@ -146,6 +146,11 @@
 }
 
 
+.ffz--inline {
+	display: inline;
+}
+
+
 .ffz--giftee-name {
 	cursor: pointer;
 	outline: none;