4.20.82

* Added: Display a one-time notice to BetterTTV users with FFZ Emotes enabled in that extension that they can disable the setting.
* Changed: Allow users to find `Animated Emotes` by searching for `gif`.
* Changed: Detect BetterTTV and use its `GIF Emotes` setting as the default for `Animated Emotes` if it is installed.
* Fixed: Animated Emotes not displaying animated images in the standalone "Twitch Emotes Menu" extension (which is also packaged with BetterTTV).

package.json

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

src/modules/chat/index.js

@@ -46,6 +46,7 @@ function formatTerms(data) {
 
 const ERROR_IMAGE = 'https://static-cdn.jtvnw.net/emoticons/v1/58765/2.0';
 const EMOTE_CHARS = /[ .,!]/;
+const GIF_TERMS = ['gif emotes', 'gif emoticons', 'gifs'];
 
 export default class Chat extends Module {
 	constructor(...args) {
@@ -919,15 +920,24 @@ export default class Chat extends Module {
 		});
 
 		this.settings.add('chat.emotes.animated', {
+			requires: ['context.bttv.gifs'],
 			default: null,
 			process(ctx, val) {
-				if ( val == null )
-					val = ctx.get('ffzap.betterttv.gif_emoticons_mode') === 2 ? 1 : 0;
+				if ( val == null ) {
+					const temp = ctx.get('ffzap.betterttv.gif_emoticons_mode');
+					if ( temp == null )
+						val = ctx.get('context.bttv.gifs');
+					else
+						val = temp === 2 ? 1 : 0;
+				}
 				return val;
 			},
 			ui: {
 				path: 'Chat > Appearance >> Emotes',
 				title: 'Animated Emotes',
+
+				getExtraTerms: () => GIF_TERMS,
+
 				description: 'This controls whether or not animated emotes are allowed to play in chat. When this is `Disabled`, emotes will appear as static images. Setting this to `Enable on Hover` may cause performance issues.',
 				component: 'setting-select-box',
 				data: [
@@ -949,6 +959,7 @@ export default class Chat extends Module {
 			ui: {
 				path: 'Chat > Tooltips >> Emotes',
 				title: 'Display animated images of emotes.',
+				getExtraTerms: () => GIF_TERMS,
 				description: 'If this is not overridden, animated images are only shown in emote tool-tips if [Chat > Appearance >> Emotes > Animated Emotes](~chat.appearance.emotes) is not disabled.',
 				component: 'setting-check-box'
 			}

src/sites/twitch-twilight/modules/bttv_compat.js

@@ -1,5 +1,6 @@
 'use strict';
 
+import { sleep } from 'src/utilities/object';
 // ============================================================================
 // BetterTTV Compatibility
 // ============================================================================
@@ -14,11 +15,56 @@ export default class BTTVCompat extends Module {
 	constructor(...args) {
 		super(...args);
 
+		this.inject('settings');
+
 		this.should_enable = true;
 	}
 
 	onEnable() {
 		this.on('core:dom-update', this.handleDomUpdate, this);
+
+		this.hookSettings();
+	}
+
+	awaitSettings(tries = 0) {
+		if ( ! window.BetterTTV?.settings ) {
+			if ( tries > 100 )
+				return Promise.reject();
+			return sleep(50).then(() => this.awaitSettings(tries + 1));
+		}
+
+		return window.BetterTTV.settings;
+	}
+
+	async hookSettings() {
+		const settings = await this.awaitSettings(),
+			waiter = () => this.updateContext(settings);
+
+		settings.on('changed.bttvGIFEmotes', waiter);
+		waiter();
+
+		if ( settings.get('ffzEmotes') ) {
+			if ( this.settings.provider.get('bttv-ffz-notice') )
+				return;
+
+			const button = this.resolve('site.menu_button');
+			if ( button ) {
+				button.addToast({
+					icon: 'ffz-i-zreknarf',
+					text_i18n: 'compat.bttv.emotes-on',
+					text: 'You have "FrankerFaceZ Emotes" turned on in BetterTTV\'s settings, but you also have FrankerFaceZ installed. Please disable "FrankerFaceZ Emotes" in BetterTTV\'s settings. It isn\'t necessary.'
+				});
+				this.settings.provider.set('bttv-ffz-notice', true);
+			}
+		}
+	}
+
+	updateContext(settings) {
+		this.settings.updateContext({
+			bttv: {
+				gifs: settings.get('bttvGIFEmotes')
+			}
+		});
 	}
 
 	handleDomUpdate(key) {

src/sites/twitch-twilight/modules/compat_emote_menu.js

@@ -16,6 +16,7 @@ export default class CompatEmoteMenu extends Module {
 
 		this.should_enable = true;
 
+		this.inject('settings');
 		this.inject('site.chat');
 		this.inject('chat.emotes');
 	}
@@ -39,6 +40,8 @@ export default class CompatEmoteMenu extends Module {
 				return;
 
 			const sets = this.emotes.getSets(props.userID, props.currentUserLogin, props.channelID, props.channelLogin),
+				chat = this.resolve('chat'),
+				anim = (chat?.context || this.settings)?.get?.('chat.emotes.animated') > 0,
 				emotes = [];
 
 			for(const set of sets) {
@@ -53,7 +56,7 @@ export default class CompatEmoteMenu extends Module {
 
 						emotes.push({
 							text: emote.name,
-							url: emote.urls[1],
+							url: anim && emote.animated?.[1] || emote.urls[1],
 							channel: `${set.source || 'FrankerFaceZ'} ${set.title}`,
 							badge: set.icon || '//cdn.frankerfacez.com/script/devicon.png'
 						});

styles/dialog.scss

@@ -15,6 +15,9 @@
 		min-width: 64rem;
 		min-height: 30rem;
 
+		max-width: 75vw;
+		max-height: 75vh;
+
 		width: 75vw;
 		width: var(--width);