diff --git a/package-lock.json b/package-lock.json index 05701bea..064dbb0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "frankerfacez", - "version": "4.20.71", + "version": "4.22.9", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 3f682c9b..0f479ec2 100755 --- a/package.json +++ b/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", diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js index cf432e7a..b07ce3b3 100644 --- a/src/modules/chat/index.js +++ b/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) '}, + {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); diff --git a/src/modules/main_menu/components/setting-select-box.vue b/src/modules/main_menu/components/setting-select-box.vue index 10958422..df6bb6ee 100644 --- a/src/modules/main_menu/components/setting-select-box.vue +++ b/src/modules/main_menu/components/setting-select-box.vue @@ -3,7 +3,7 @@ :class="{inherits: isInherited, default: isDefault}" class="ffz--widget ffz--select-box" > -
+