4.72.3

* Added: Setting to enable or disable message effects. When disabled, they appear as a standard redemption with a notice of how many bits were spent redeeming them.
* Fixed: The setting to only animate emotes on hover not working for "Gigantified" emotes.
* Fixed: Add-on emotes not appearing with animations using the FFZ:GE "Gifantified" points reward.
* Fixed: Message Effects not rendering correctly.
* Fixed: "Gigantified" emotes appearing the incorrect size when using both the Larger Emotes option and the Limit Native Emote Size option.

package.json

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

src/modules/chat/emotes.js

@@ -1274,7 +1274,8 @@ export default class Emotes extends Module {
 				const ds = em.dataset;
 				if ( ds.normalSrc && ds.hoverSrc ) {
 					em.src = ds.hoverSrc;
-					em.srcset = ds.hoverSrcSet;
+					if (em.srcset)
+						em.srcset = ds.hoverSrcSet;
 				}
 			}
 		});
@@ -1303,7 +1304,8 @@ export default class Emotes extends Module {
 				const ds = em.dataset;
 				if ( ds.normalSrc ) {
 					em.src = ds.normalSrc;
-					em.srcset = ds.normalSrcSet;
+					if (em.srcset)
+						em.srcset = ds.normalSrcSet;
 				}
 			}
 		});

src/modules/chat/index.js

@@ -2567,16 +2567,18 @@ export default class Chat extends Module {
 	}
 
 
-
 	renderGiantEmote(token, e) {
 		if ( ! e )
 			e = createElement;
 
-		const animated = token.anim === 1;
+		const animated = token.anim === 1,
+			hover_animated = token.anim === 2;
 
 		let src, hoverSrc, height;
 		if (token.provider === 'twitch') {
 			src = getTwitchEmoteURL(token.id, 4, animated, true);
+			if (hover_animated)
+				hoverSrc = getTwitchEmoteURL(token.id, 4, true, true);
 			height = 112;
 
 		} else if (token.provider === 'ffz') {
@@ -2584,16 +2586,18 @@ export default class Chat extends Module {
 				emote = emote_set?.emotes?.[token.id];
 
 			if ( emote ) {
-				const urls = emote.urls;
-				if ( urls?.[4] ) {
-					src = urls[4];
-					height = emote.height * 4;
-				} else if ( urls?.[2] ) {
-					src = urls[2];
-					height = emote.height * 2;
-				} else if ( urls?.[1] ) {
-					src = urls[1];
-					height = emote.height;
+				let urls = (animated ? emote.animated : null) ?? emote.urls;
+				let pair = getBiggestImage(urls);
+				if (! pair )
+					return null;
+
+				src = pair[0];
+				height = emote.height * pair[1];
+
+				if (hover_animated && emote.animated) {
+					pair = getBiggestImage(emote.animated);
+					if (pair)
+						hoverSrc = pair[0];
 				}
 			}
 
@@ -2608,6 +2612,8 @@ export default class Chat extends Module {
 			src,
 			height: `${height}px`,
 			alt: token.text,
+			'data-normal-src': src,
+			'data-hover-src': hoverSrc,
 			'data-tooltip-type': 'emote',
 			'data-provider': token.provider,
 			'data-id': token.id,
@@ -2906,3 +2912,16 @@ export default class Chat extends Module {
 		return data;
 	}
 }
+
+
+function getBiggestImage(urls) {
+	if (urls?.[4] )
+		return [urls[4], 4];
+	if (urls?.[3] )
+		return [urls[3], 3];
+	if (urls?.[2] )
+		return [urls[2], 2];
+	if (urls?.[1] )
+		return [urls[1], 1];
+	return null;
+}

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

@@ -20,7 +20,7 @@ import SettingsMenu from './settings_menu';
 import EmoteMenu from './emote_menu';
 import Input from './input';
 import ViewerCards from './viewer_card';
-import { isHighlightedReward } from './points';
+import { isHighlightedReward, isMessageEffect } from './points';
 
 
 /*const REGEX_EMOTES = {
@@ -370,6 +370,16 @@ export default class ChatHook extends Module {
 			}
 		});
 
+		this.settings.add('chat.powerup.effects', {
+			default: true,
+			ui: {
+				path: 'Chat > Appearance >> Community',
+				title: 'Allow "Message Effects" messages to appear in chat.',
+				component: 'setting-check-box',
+				description: '*Note*: Only affects messages sent after you change this setting. You can use your own chat for testing.'
+			}
+		});
+
 		this.settings.add('channel.raids.blocked-channels', {
 			default: [],
 			type: 'array_merge',
@@ -1899,7 +1909,7 @@ export default class ChatHook extends Module {
 						if ( blocked_types.has(types[msg.type]) )
 							return;
 
-						if ( msg.type === types.ChannelPointsReward )
+						if ( msg.type === types.ChannelPointsReward && ! isMessageEffect(msg.reward) )
 							return;
 
 						if ( msg.type === types.RewardGift && ! t.chat.context.get('chat.bits.show-rewards') )
@@ -2945,11 +2955,25 @@ export default class ChatHook extends Module {
 						if ( reward ) {
 							const out = i.convertMessage(e);
 
-							out.ffz_type = 'points';
-							out.ffz_reward = reward;
-							out.ffz_reward_highlight = isHighlightedReward(reward);
+							if ( t.chat.context.get('chat.powerup.effects') && isMessageEffect(reward) && e.animationID ) {
+								return i.postMessageToCurrentChannel(e, {
+									type: t.chat_types.ChannelPointsReward,
+									id: out.id,
+									displayName: out.user.userDisplayName,
+									login: out.user.userLogin,
+									reward: reward,
+									message: out,
+									userID: out.user.userID,
+									animationID: e.animationID
+								})
+							} else {
+								out.ffz_animation_id = e.animationID;
+								out.ffz_type = 'points';
+								out.ffz_reward = reward;
+								out.ffz_reward_highlight = isHighlightedReward(reward);
 
-							return i.postMessageToCurrentChannel(e, out);
+								return i.postMessageToCurrentChannel(e, out);
+							}
 						}
 
 					} catch(err) {

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

@@ -12,7 +12,7 @@ import { has } from 'utilities/object';
 import { KEYS, RERENDER_SETTINGS, UPDATE_BADGE_SETTINGS, UPDATE_TOKEN_SETTINGS } from 'utilities/constants';
 import { print_duration } from 'utilities/time';
 
-import { getRewardTitle, getRewardCost, isGiantEmoteReward, doesRewardCostBits } from './points';
+import { getRewardTitle, getRewardCost, isGiantEmoteReward, doesRewardCostBits, isMessageEffect } from './points';
 import awaitMD, {getMD} from 'utilities/markdown';
 
 const SUB_TIERS = {

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

@@ -19,6 +19,10 @@ export function isGiantEmoteReward(reward) {
 		reward.prompt?.includes?.('FFZ:GE'));
 }
 
+export function isMessageEffect(reward) {
+	return reward?.type === 'SEND_ANIMATED_MESSAGE';
+}
+
 export function getRewardCost(reward) {
 	const is_bits = doesRewardCostBits(reward);
 	if ( isAutomaticReward(reward) )

src/sites/twitch-twilight/modules/css_tweaks/styles/bigger-emote-jail.scss

@@ -1,4 +1,9 @@
 .twitch-emote {
 	max-height: 64px;
 	max-width: 128px;
-}
+}
+
+.chat-line__message--ffz-giant-emote .twitch-emote {
+	max-height: 128px;
+	max-width: 256px;
+}