4.23.0

* Added: Setting to change how international display names are rendered in chat.
* Fixed: Minor appearance issue with select box settings.
* API Changed: Expose slightly more data through the built-in auto-completion handlers.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "frankerfacez",
-  "version": "4.20.71",
+  "version": "4.22.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.22.9",
+  "version": "4.23.0",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "private": true,
   "license": "Apache-2.0",

src/modules/chat/index.js

@@ -182,6 +182,21 @@ export default class Chat extends Module {
 			}
 		});
 
+		this.settings.add('chat.name-format', {
+			default: 0,
+			ui: {
+				path: 'Chat > Appearance >> Usernames',
+				title: 'Display Style',
+				description: 'Change how usernames are displayed in chat when users have an international display name set.',
+				component: 'setting-select-box',
+				data: [
+					{value: 0, title: 'International Name (Username) <Default>'},
+					{value: 1, title: 'International Name'},
+					{value: 2, title: 'Username'}
+				]
+			}
+		});
+
 		this.settings.add('chat.lines.emote-alignment', {
 			default: 0,
 			ui: {
@@ -1740,6 +1755,30 @@ export default class Chat extends Module {
 	}
 
 
+	/**
+	 * Format a user block. This uses our use "chat.name-format" style.
+	 *
+	 * @param {Object} user The user object we're rendering.
+	 * @param {Function} e createElement method, either from React or utilities/dom.
+	 * @returns {Array} Array of rendered elements.
+	 */
+	formatUser(user, e) {
+		const setting = this.context.get('chat.name-format');
+		const name = setting === 2 && user.isIntl ? user.login : (user.displayName || user.login);
+
+		const out = [e('span', {
+			className: 'chat-author__display-name'
+		}, name)];
+
+		if ( setting === 0 && user.isIntl )
+			out.push(e('span', {
+				className: 'chat-author__intl-login'
+			}, ` (${user.login})`));
+
+		return [out];
+	}
+
+
 	formatTime(time) {
 		if (!( time instanceof Date ))
 			time = new Date(time);

src/modules/main_menu/components/setting-select-box.vue

@@ -3,7 +3,7 @@
 		:class="{inherits: isInherited, default: isDefault}"
 		class="ffz--widget ffz--select-box"
 	>
-		<div class="tw-flex tw-align-items-start">
+		<div class="tw-flex tw-align-items-center">
 			<label :for="item.full_key" class="tw-mg-y-05">
 				{{ t(item.i18n_key, item.title) }}
 				<span v-if="unseen" class="tw-pill">{{ t('setting.new', 'New') }}</span>

src/sites/clips/line.jsx

@@ -46,6 +46,7 @@ export default class Line extends Module {
 		this.chat.context.on('changed:chat.rich.hide-tokens', this.updateLines, this);
 		this.chat.context.on('changed:chat.rich.all-links', this.updateLines, this);
 		this.chat.context.on('changed:chat.rich.minimum-level', this.updateLines, this);
+		this.chat.context.on('changed:chat.name-format', this.updateLines, this);
 		this.chat.context.on('changed:tooltip.link-images', this.maybeUpdateLines, this);
 		this.chat.context.on('changed:tooltip.link-nsfw-images', this.maybeUpdateLines, this);
 
@@ -94,13 +95,10 @@ export default class Line extends Module {
 								t.chat.badges.render(msg, createElement)
 							}</span>
 							<a
-								class="clip-chat__message-author tw-font-size-5 ffz-link notranslate"
+								class="clip-chat__message-author tw-font-size-5 ffz-link notranslate tw-strong"
 								href={`https://www.twitch.tv/${user.login}/clips`}
 								style={{color}}
-							>
+							>{ t.chat.formatUser(user, createElement) }</a>
-								<span class="tw-strong chat-author__display_name">{ user.displayName }</span>
-								{user.isIntl && <span class="chat-author__intl-login"> ({user.login}) </span>}
-							</a>
 							<div class="tw-inline-block tw-mg-r-05">{
 								is_action ? '' : ':'
 							}</div>

src/sites/twitch-twilight/modules/chat/input.jsx

@@ -670,6 +670,7 @@ export default class Input extends Module {
 			if ( inst.doesEmoteMatchTerm(emote, search) ) {
 				const element = {
 					current: input,
+					emote,
 					replacement: emote.token,
 					element: inst.renderEmoteSuggestion(emote),
 					favorite: emote.favorite,
@@ -718,15 +719,20 @@ export default class Input extends Module {
 
 				if ( emoji && (style === 0 || source.has[style]) && ! included.has(source.raw) ) {
 					included.add(source.raw);
+
+					const srcSet = this.emoji.getFullImageSet(source.image, style);
+
 					const favorite = favorites.includes(emoji.code);
 					results.push({
 						current: input,
+						emoji: source,
+						srcSet,
 						replacement: source.raw,
 						element: inst.renderFFZEmojiSuggestion({
 							token: `:${name}:`,
 							id: `emoji-${emoji.code}`,
 							src: this.emoji.getFullImage(source.image, style),
-							srcSet: this.emoji.getFullImageSet(source.image, style),
+							srcSet,
 							favorite
 						}),
 						favorite
@@ -817,6 +823,7 @@ export default class Input extends Module {
 			if ( inst.doesEmoteMatchTerm(emote, search) )
 				results.push({
 					current: input,
+					emote,
 					replacement: emote.token,
 					element: inst.renderEmoteSuggestion(emote),
 					favorite: emote.favorite,

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

@@ -60,6 +60,7 @@ export default class ChatLine extends Module {
 		this.on('chat:update-lines', this.updateLines, this);
 		this.on('i18n:update', this.updateLines, this);
 
+		this.chat.context.on('changed:chat.name-format', this.updateLines, this);
 		this.chat.context.on('changed:chat.me-style', this.updateLines, this);
 		this.chat.context.on('changed:chat.emotes.enabled', this.updateLines, this);
 		this.chat.context.on('changed:chat.emotes.2x', this.updateLines, this);
@@ -301,15 +302,7 @@ export default class ChatLine extends Module {
 						room_id = msg.roomId = r.id;
 				}
 
-				const user_block = [
+				const user_block = t.chat.formatUser(user, e);
-					e('span', {
-						className: 'chat-author__display-name'
-					}, user.displayName),
-					user.isIntl && e('span', {
-						className: 'chat-author__intl-login'
-					}, ` (${user.login})`)
-				];
-
 				const override_name = t.overrides.getName(user.id);
 
 				return e('span', {
@@ -505,15 +498,7 @@ other {# messages were deleted by a moderator.}
 				}
 
 
-				const user_block = [
+				const user_block = t.chat.formatUser(user, e);
-					e('span', {
-						className: 'chat-author__display-name'
-					}, user.displayName),
-					user.isIntl && e('span', {
-						className: 'chat-author__intl-login'
-					}, ` (${user.login})`)
-				];
-
 				const override_name = t.overrides.getName(user.id);
 
 				const user_bits = [

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

@@ -311,10 +311,9 @@ export default class VideoChatHook extends Module {
 						rel="noopener noreferrer"
 						target="_blank"
 						style={{color}}
-					>
+					>{
-						<span class="chat-author__display-name" data-a-target="chat-message-username" data-a-user={user.login} data-test-selector="message-username">{ user.displayName }</span>
+						t.chat.formatUser(user, createElement)
-						{user.isIntl && <span class="chat-author__intl-login" data-test-selector="message-username-canonical"> ({ user.login})</span>}
+					}</a>
-					</a>
 					<div data-test-selector="comment-message-selector" class="tw-inline video-chat__message">
 						<span>{is_action ? ' ' : ': '}</span>
 						<span