4.28.7

* Added: Setting to hide Drops messages in chat.
* Fixed: Chat Colors not being applied to chat in Mod View.
* Fixed: The color of the search input not being affected.
* Changed: Add a disclaimer to the `Show Overlay Extensions` setting to clarify that it does not prevent extensions from loading.
* Changed: Wait up to a full minute for add-on scripts to load.
* API Added: The `<react-link />` Vue component now has a `state` prop for passing state data with links, necessary for navigating to certain Twitch pages.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "frankerfacez",
-  "version": "4.23.2",
+  "version": "4.28.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9392,7 +9392,8 @@
     },
     "ssri": {
       "version": "6.0.1",
-      "resolved": "",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+      "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
       "dev": true,
       "requires": {
         "figgy-pudding": "^3.5.1"

package.json

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

src/addons.js

@@ -311,7 +311,7 @@ export default class AddonManager extends Module {
 		}));
 
 		// Error if this takes more than 5 seconds.
-		await timeout(this.waitFor(`addon.${id}:registered`), 5000);
+		await timeout(this.waitFor(`addon.${id}:registered`), 60000);
 
 		module = this.resolve(`addon.${id}`);
 		if ( module && ! module.loaded )

src/sites/shared/player.jsx

@@ -481,6 +481,7 @@ export default class PlayerBase extends Module {
 			ui: {
 				path: 'Player > General >> Extensions',
 				title: 'Show Overlay Extensions',
+				description: 'Note: This feature does not prevent extensions from loading. Hidden extensions are merely invisible. Hiding extensions with this feature will not improve your security.',
 				component: 'setting-select-box',
 				data: [
 					{value: 2, title: 'Never'},

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

@@ -346,6 +346,15 @@ export default class ChatHook extends Module {
 			}
 		});
 
+		this.settings.add('chat.banners.drops', {
+			default: true,
+			ui: {
+				path: 'Chat > Appearance >> Community',
+				title: 'Allow messages about Drops to be displayed in chat.',
+				component: 'setting-check-box'
+			}
+		});
+
 		this.settings.add('chat.banners.polls', {
 			default: true,
 			ui: {
@@ -836,6 +845,7 @@ export default class ChatHook extends Module {
 		this.chat.context.on('changed:chat.subs.gift-banner', this.cleanHighlights, this);
 		this.chat.context.on('changed:chat.banners.polls', this.cleanHighlights, this);
 		this.chat.context.on('changed:chat.banners.prediction', this.cleanHighlights, this);
+		this.chat.context.on('changed:chat.banners.drops', this.cleanHighlights, this);
 
 		this.chat.context.on('changed:chat.subs.gift-banner', () => this.GiftBanner.forceUpdate(), this);
 		this.chat.context.on('changed:chat.effective-width', this.updateChatCSS, this);
@@ -1320,7 +1330,7 @@ export default class ChatHook extends Module {
 			'hype_train': this.chat.context.get('chat.banners.hype-train'),
 			'prediction': this.chat.context.get('chat.banners.prediction'),
 			'poll': this.chat.context.get('chat.banners.polls'),
-			'mw-drop-available': false
+			'mw-drop-available': this.chat.context.get('chat.banners.drops')
 		};
 
 		const highlights = this.community_stack?.highlights;
@@ -1332,11 +1342,13 @@ export default class ChatHook extends Module {
 				continue;
 
 			const type = entry.event.type;
-			if ( type && has(types, type) && ! types[type] )
+			if ( type && has(types, type) && ! types[type] ) {
+				this.log.info('Removing community highlight: ', type, '#', entry.id);
 				this.community_dispatch({
 					type: 'remove-highlight',
 					id: entry.id
 				});
+			}
 		}
 	}
 
@@ -2085,6 +2097,8 @@ export default class ChatHook extends Module {
 						e.body = '';
 						const out = i.convertMessage({message: e});
 						out.ffz_type = 'resub';
+						out.gift_theme = e.giftTheme;
+						out.sub_goal = i.getGoalData ? i.getGoalData(e.goalData) : null;
 						out.sub_plan = e.methods;
 						return i.postMessageToCurrentChannel(e, out);
 
@@ -2121,6 +2135,8 @@ export default class ChatHook extends Module {
 
 						const out = i.convertMessage({message: e});
 						out.ffz_type = 'resub';
+						out.gift_theme = e.giftTheme;
+						out.sub_goal = i.getGoalData ? i.getGoalData(e.goalData) : null;
 						out.sub_cumulative = e.cumulativeMonths || 0;
 						out.sub_streak = e.streakMonths || 0;
 						out.sub_share_streak = e.shouldShareStreakTenure;
@@ -2176,6 +2192,8 @@ export default class ChatHook extends Module {
 							login: e.recipientLogin,
 							displayName: e.recipientName
 						};
+						out.gift_theme = e.giftTheme;
+						out.sub_goal = i.getGoalData ? i.getGoalData(e.goalData) : null;
 						out.sub_months = e.giftMonths;
 						out.sub_plan = e.methods;
 						out.sub_total = e.senderCount;
@@ -2221,6 +2239,8 @@ export default class ChatHook extends Module {
 						e.body = '';
 						const out = i.convertMessage({message: e});
 						out.ffz_type = 'sub_gift';
+						out.gift_theme = e.giftTheme;
+						out.sub_goal = i.getGoalData ? i.getGoalData(e.goalData) : null;
 						out.sub_anon = true;
 						out.sub_recipient = {
 							id: e.recipientID,
@@ -2259,6 +2279,8 @@ export default class ChatHook extends Module {
 						e.body = '';
 						const out = i.convertMessage({message: e});
 						out.ffz_type = 'sub_mystery';
+						out.gift_theme = e.giftTheme;
+						out.sub_goal = i.getGoalData ? i.getGoalData(e.goalData) : null;
 						out.mystery = mystery;
 						out.sub_plan = e.plan;
 						out.sub_count = e.massGiftCount;

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

@@ -20,6 +20,11 @@ const SUB_TIERS = {
 	3000: 3
 };
 
+function getGiftThemeURL(theme) {
+	return `https://static-cdn.jtvnw.net/subs-image-assets/TUN-${theme}.png`;
+}
+
+
 export default class ChatLine extends Module {
 	constructor(...args) {
 		super(...args);

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

@@ -439,7 +439,7 @@ export default class ThemeEngine extends Module {
 		}
 
 		if ( chat_bits.length )
-			this.css_tweaks.set('chat-colors', `.chat-shell {${chat_bits.join('\n')}}.chat-shell .tw-accent-region{${chat_accent_bits.join('\n')}}`);
+			this.css_tweaks.set('chat-colors', `.moderation-view-page-widget .stream-chat,.chat-shell {${chat_bits.join('\n')}}.moderation-view-page-widget .stream-chat .tw-accent-region,.chat-shell .tw-accent-region{${chat_accent_bits.join('\n')}}`);
 		else
 			this.css_tweaks.delete('chat-colors');
 

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

@@ -114,4 +114,10 @@ html {
 	.navigation-link__active-indicator {
 		color: var(--ffz-color-accent-10) !important;
 	}
-}
+}
+
+html, .tw-root--theme-dark, .tw-root--theme-light {
+	.search-box__variant1 .tw-input {
+		border-color: var(--color-background-button-primary-default) !important;
+	}
+}

src/std-components/react-link.vue

@@ -7,14 +7,14 @@
 <script>
 
 export default {
-	props: ['href', 'click'],
+	props: ['href', 'click', 'state'],
 
 	methods: {
 		onClick(event) {
 			this.$emit('click', event);
 
 			if ( ! event.defaultPrevented && ! this.href.includes('//') )
-				this.reactNavigate(this.href, event);
+				this.reactNavigate(this.href, event, this.state);
 		}
 	}
 

src/utilities/vue.js

@@ -180,14 +180,14 @@ export class Vue extends Module {
 
 		vue.mixin({
 			methods: {
-				reactNavigate(url, event) {
+				reactNavigate(url, event, state) {
 					const router = t.resolve('site.router');
 					if ( router && router.history ) {
 						if ( event ) {
 							event.preventDefault();
 							event.stopPropagation();
 						}
-						router.history.push(url);
+						router.history.push(url, state ?? undefined);
 					}
 				},
 				getReactURL(route, data, opts, ...args) {