4.57.3

* Changed: Make the badge visibility settings page a bit nicer.
* Changed: Display add-on's maintainers field in the add-ons list.
* API Fixed: When iterating chat messages, include tokenized messages that have not been pushed out of the buffer yet.

package.json

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

src/modules/chat/badges.jsx

@@ -411,7 +411,7 @@ export default class Badges extends Module {
 					if ( ! existing.versions )
 						existing.versions = [{
 							version: existing.key,
-							name: existing.name,
+							name: existing.tipname,
 							color: existing.color,
 							image: existing.image1x,
 							styleImage: `url("${existing.image1x}")`
@@ -426,7 +426,8 @@ export default class Badges extends Module {
 					});
 
 					if ( is_this ) {
-						existing.name = name;
+						existing.name = badge.title;
+						existing.tipname = name;
 						existing.color = color;
 						existing.image = image;
 						existing.styleImage = `url("${image}")`;
@@ -437,13 +438,25 @@ export default class Badges extends Module {
 						id,
 						key,
 						provider: 'ffz',
-						name,
+						name: badge.title,
+						tipname: name,
 						color,
 						image,
 						image1x,
 						styleImage: `url("${image}")`
 					};
 
+					if ( badge.base_id ) {
+						existing.always_versions = true;
+						existing.versions = [{
+							version: existing.key,
+							name: existing.tipname,
+							color: existing.color,
+							image: existing.image1x,
+							styleImage: `url("${existing.image1x}")`
+						}];
+					}
+
 					addon_badges_by_id[id] = existing;
 					store.push(existing);
 				}
@@ -1197,6 +1210,8 @@ export default class Badges extends Module {
 				data.click_url = 'https://www.frankerfacez.com/subscribe';
 
 			if ( ! data.addon && (data.name === 'subwoofer') )
+				data.base_id = data.id;
+
 				data.tooltipExtra = data => {
 					if ( ! data?.user_id )
 						return null;

src/modules/chat/index.js

@@ -1524,6 +1524,7 @@ export default class Chat extends Module {
 	iterateMessages(include_chat = true, include_whisper = true, include_video = true) {
 		const messages = [];
 		this.emit('chat:get-messages', include_chat, include_whisper, include_video, messages);
+		this.emit('chat:get-messages-late', include_chat, include_whisper, include_video, messages);
 		return messages;
 	}
 
@@ -1729,6 +1730,8 @@ export default class Chat extends Module {
 		if ( ! msg )
 			return msg;
 
+		msg.ffz_standardized = true;
+
 		// Standardize User
 		if ( msg.sender && ! msg.user )
 			msg.user = msg.sender;

src/modules/chat/tokenizers.jsx

@@ -143,7 +143,7 @@ export const Links = {
 				url_table.push(<tr>
 					<td>{this.i18n.formatNumber(i + 1)}.</td>
 					<td class="tw-c-text-alt-2 tw-pd-x-05 tw-word-break-all">{url.url}</td>
-					<td>{url.flags ? url.flags.map(flag => <span class="tw-pill">{flag.toLowerCase()}</span>) : null}</td>
+					<td>{url.flags ? url.flags.map(flag => <span class="ffz-pill">{flag.toLowerCase()}</span>) : null}</td>
 				</tr>);
 			}
 

src/modules/main_menu/components/addon.vue

@@ -42,6 +42,11 @@
 						author: addon.author_i18n ? t(addon.author_i18n, addon.author) : addon.author
 					}) }}
 				</span>
+				<span v-if="maintainer" class="tw-c-text-alt tw-mg-r-1">
+					{{ t('addon.maintainer', 'Maintainer: {maintainer}', {
+						maintainer
+					}) }}
+				</span>
 				<span v-if="version" class="tw-c-text-alt tw-mg-r-1">
 					{{ t('addon.version', 'Version {version}', {version}) }}
 				</span>
@@ -189,6 +194,13 @@ export default {
 			return this.addon.description;
 		},
 
+		maintainer() {
+			if ( this.addon.maintainer_i18n )
+				return this.t(this.addon.maintainer_i18n, this.addon.maintainer);
+
+			return this.addon.maintainer;
+		},
+
 		lines() {
 			return this.description.split(/\n/);
 		},

src/modules/main_menu/components/badge-visibility.vue

@@ -66,12 +66,12 @@
 			<header v-else>
 				{{ sec.title }}
 			</header>
-			<ul v-if="! sec.id || badgeChecked(sec.id)" class="tw-flex tw-flex-wrap tw-align-content-start">
+			<ul v-if="! sec.id || badgeChecked(sec.id)" class="tw-flex tw-flex-wrap tw-align-content-start tw-align-items-start">
 				<li
 					v-for="i in sec.badges"
 					:key="i.id"
 					:class="{default: badgeDefault(i.id)}"
-					class="ffz--badge-info tw-pd-y-1 tw-pd-r-1 tw-flex ffz-checkbox"
+					class="ffz--badge-info ffz--pointer-events--none tw-mg-y-05 tw-mg-r-05 tw-flex ffz-checkbox ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-border-radius-large"
 				>
 					<input
 						:id="i.id"
@@ -81,7 +81,7 @@
 						@click="onChange(i.id, $event)"
 					>
 
-					<label :for="i.id" class="ffz-checkbox__label">
+					<label :for="i.id" class="ffz-checkbox__label tw-flex-grow-1 tw-mg-05 ffz--pointer-events">
 						<div class="tw-mg-l-1 tw-flex">
 							<div
 								:style="{backgroundColor: i.color, backgroundImage: i.styleImage }"
@@ -90,7 +90,7 @@
 							<div>
 								<h5>{{ i.name }}</h5>
 								<section
-									v-if="i.versions && i.versions.length > 1"
+									v-if="i.versions && (i.always_versions || i.versions.length > 1)"
 									class="tw-mg-t-05"
 								>
 									<span

src/modules/main_menu/components/changelog.vue

@@ -35,7 +35,7 @@
 		<ul>
 			<li v-for="commit of display" :key="commit.sha" class="tw-mg-b-2">
 				<div class="tw-flex tw-align-items-center tw-border-b tw-mg-b-05">
-					<div v-if="! addons && commit.active" class="tw-pill tw-mg-r-05">
+					<div v-if="! addons && commit.active" class="ffz-pill tw-mg-r-05">
 						{{ t('home.changelog.current', 'Current Version') }}
 					</div>
 					<div v-if="commit.title" class="tw-font-size-4">

src/modules/main_menu/components/setting-radio-buttons.vue

@@ -2,7 +2,7 @@
 	<div class="ffz-input">
 		<header>
 			{{ item.i18n_key ? t(item.i18n_key, item.title) : item.title }}
-			<span v-if="unseen" class="tw-pill">{{ t('setting.new', 'New') }}</span>
+			<span v-if="unseen" class="ffz-pill">{{ t('setting.new', 'New') }}</span>
 		</header>
 		<section
 			v-if="item.description"

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

@@ -1122,6 +1122,42 @@ export default class ChatHook extends Module {
 		this.updateLineBorders();
 		//this.updateMentionCSS();
 
+		this.on('chat:get-messages-late', (include_chat, include_whisper, include_video, messages) => {
+			if ( ! include_chat )
+				return;
+
+			const msg_ids = new Set(messages.map(x => x.message?.id));
+
+			for(const inst of this.ChatBuffer.instances) {
+				for(const msg of inst.buffer) {
+					const msg_id = msg?.id;
+					if ( ! msg_id || msg_ids.has(msg_id) || ! msg.ffz_standardized )
+						continue;
+
+					msg_ids.add(msg_id);
+					messages.push({
+						message: msg,
+						_instance: null,
+						update: () => null
+					});
+				}
+
+				for(const raw of inst.delayedMessageBuffer) {
+					const msg = raw?.event,
+						msg_id = msg?.id;
+					if ( ! msg_id || msg_ids.has(msg_id) || ! msg.ffz_standardized )
+						continue;
+
+					msg_ids.add(msg_id);
+					messages.push({
+						message: msg,
+						_instance: null,
+						update: () => null
+					});
+				}
+			}
+		});
+
 		this.on('chat:get-tab-commands', e => {
 			e.commands.push({
 				name: 'reconnect',

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

@@ -36,6 +36,10 @@
 	pointer-events: all;
 }
 
+.ffz--pointer-events--none {
+	pointer-events: none;
+}
+
 .ffz--freeze-indicator {
 	pointer-events: none;
 }