From d0ac8bccd8bbb3745587a5d781e882b08088ffc6 Mon Sep 17 00:00:00 2001 From: SirStendec Date: Sat, 20 Mar 2021 19:42:02 -0400 Subject: [PATCH] 4.20.80 * Added: Setting to control whether or not emoji are listed in the emote menu. * Added: Setting to force the emote menu to stay loaded when not open, which may lead to better performance for some users when the menu has a lot of content. * Fixed: The new quick navigation bar in the emote menu not fitting the full height of its container. --- package.json | 2 +- .../modules/chat/emote_menu.jsx | 44 +++++++++++++++++-- src/sites/twitch-twilight/styles/chat.scss | 1 + 3 files changed, 43 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 3872b0c8..cda3d360 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.20.79", + "version": "4.20.80", "description": "FrankerFaceZ is a Twitch enhancement suite.", "private": true, "license": "Apache-2.0", diff --git a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx index d32ffe24..04eb1cc2 100644 --- a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx +++ b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx @@ -257,6 +257,16 @@ export default class EmoteMenu extends Module { }); + this.settings.add('chat.emote-menu.show-emoji', { + default: true, + ui: { + path: 'Chat > Emote Menu >> General', + title: 'Display emoji in the emote menu.', + component: 'setting-check-box' + } + }); + + this.settings.add('chat.emote-menu.combine-tabs', { default: false, ui: { @@ -266,6 +276,21 @@ export default class EmoteMenu extends Module { } }); + this.settings.add('chat.emote-menu.stay-loaded', { + requires: ['chat.emote-menu.combine-tabs'], + default: null, + process(ctx, val) { + if ( val == null ) + val = ctx.get('chat.emote-menu.combine-tabs'); + return val; + }, + ui: { + path: 'Chat > Emote Menu >> General', + title: 'Stay loaded after opening.', + component: 'setting-check-box', + description: `This causes the emote menu to stay in the DOM even when it's not visible. Enabling this may help the site perform better when opening the menu if it's slow. By default, this setting is enabled when using \`Display all emotes on one tab.\`` + } + }); this.settings.add('chat.emote-menu.sort-emotes', { default: 4, @@ -324,6 +349,7 @@ export default class EmoteMenu extends Module { inst.rebuildData(); } + this.chat.context.on('changed:chat.emote-menu.show-emoji', rebuild); this.chat.context.on('changed:chat.fix-bad-emotes', rebuild); this.chat.context.on('changed:chat.emote-menu.sort-emotes', rebuild); this.chat.context.on('changed:chat.emote-menu.sort-tiers-last', rebuild); @@ -1026,7 +1052,7 @@ export default class EmoteMenu extends Module { const padding = t.chat.context.get('chat.emote-menu.reduced-padding'); return (
@@ -1084,6 +1110,7 @@ export default class EmoteMenu extends Module { this.state = { tab: null, active_nav: null, + stayLoaded: t.chat.context.get('chat.emote-menu.stay-loaded'), quickNav: t.chat.context.get('chat.emote-menu.show-quick-nav'), animated: t.chat.context.get('chat.emotes.animated'), showHeading: t.chat.context.get('chat.emote-menu.show-heading'), @@ -1232,6 +1259,7 @@ export default class EmoteMenu extends Module { this.createObserver(); t.chat.context.on('changed:chat.emotes.animated', this.updateSettingState, this); + t.chat.context.on('changed:chat.emote-menu.stay-loaded', this.updateSettingState, this); t.chat.context.on('changed:chat.emote-menu.show-quick-nav', this.updateSettingState, this); t.chat.context.on('changed:chat.emote-menu.reduced-padding', this.updateSettingState, this); t.chat.context.on('changed:chat.emote-menu.show-heading', this.updateSettingState, this); @@ -1245,6 +1273,7 @@ export default class EmoteMenu extends Module { this.destroyObserver(); t.chat.context.off('changed:chat.emotes.animated', this.updateSettingState, this); + t.chat.context.off('changed:chat.emote-menu.stay-loaded', this.updateSettingState, this); t.chat.context.off('changed:chat.emote-menu.show-quick-nav', this.updateSettingState, this); t.chat.context.off('changed:chat.emote-menu.show-heading', this.updateSettingState, this); t.chat.context.off('changed:chat.emote-menu.reduced-padding', this.updateSettingState, this); @@ -1257,6 +1286,7 @@ export default class EmoteMenu extends Module { updateSettingState() { this.setState({ + stayLoaded: t.chat.context.get('chat.emote-menu.stay-loaded'), quickNav: t.chat.context.get('chat.emote-menu.show-quick-nav'), animated: t.chat.context.get('chat.emotes.animated'), showHeading: t.chat.context.get('chat.emote-menu.show-heading'), @@ -1519,6 +1549,11 @@ export default class EmoteMenu extends Module { tone_choices = state.tone_emoji = [], categories = {}; + if ( ! t.chat.context.get('chat.emote-menu.show-emoji') ) { + state.has_emoji_tab = false; + return state; + } + let style = t.chat.context.get('chat.emoji.style') || 'twitter'; if ( ! IMAGE_PATHS[style] ) style = 'twitter'; @@ -2257,13 +2292,16 @@ export default class EmoteMenu extends Module { } render() { - if ( ! this.props.visible ) + if ( ! this.props.visible && (! this.state.stayLoaded || ! this.loadedOnce) ) return null; const loading = this.state.loading || this.props.loading, padding = this.state.reducedPadding, //t.chat.context.get('chat.emote-menu.reduced-padding'), no_tabs = this.state.combineTabs; //t.chat.context.get('chat.emote-menu.combine-tabs'); + if ( ! loading ) + this.loadedOnce = true; + let tab, sets, is_emoji, is_favs; if ( no_tabs ) { @@ -2301,7 +2339,7 @@ export default class EmoteMenu extends Module { const visibility = this.state.visibility_control; - return (
+ return (