diff --git a/package.json b/package.json index 59cc2f1f..8d3e3a0f 100755 --- a/package.json +++ b/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", diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js index 69794123..e48eff24 100644 --- a/src/modules/chat/index.js +++ b/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' } diff --git a/src/sites/twitch-twilight/modules/bttv_compat.js b/src/sites/twitch-twilight/modules/bttv_compat.js index 6dc3599d..bdc371ac 100644 --- a/src/sites/twitch-twilight/modules/bttv_compat.js +++ b/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) { diff --git a/src/sites/twitch-twilight/modules/compat_emote_menu.js b/src/sites/twitch-twilight/modules/compat_emote_menu.js index 082cdbaf..6f52c262 100644 --- a/src/sites/twitch-twilight/modules/compat_emote_menu.js +++ b/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' }); diff --git a/styles/dialog.scss b/styles/dialog.scss index 1ac5d4f4..3a3cd9e9 100644 --- a/styles/dialog.scss +++ b/styles/dialog.scss @@ -15,6 +15,9 @@ min-width: 64rem; min-height: 30rem; + max-width: 75vw; + max-height: 75vh; + width: 75vw; width: var(--width);