oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-07-25 03:58:30 +00:00
Code Wiki Activity

4.42.1

Browse source 
* Added: Setting to disable the Emote Effects tab in the emote menu.
* Fixed: Issue with emotes appearing in the wrong place when combining certain emote effects.
* Fixed: Issue with emoji not appearing when used with emote effects.
* Fixed: Issue with the Large Emotes setting not working correctly when used with emote effects.
* Fixed: Do not display the Emote Effects tab in the emote menu if there are no visible sets with effects.
* Changed: When clicking an emote effect from the emote menu when there is no existing emote in chat, and thus previewing with a random emote, insert that emote into the chat input as well.
* Changed: Do not display random emotes that the user cannot use when previewing emote effects.
* Changed: Do not use 'Display and Send' for the emoji joiner workaround by default as it is no longer necessary.
This commit is contained in:
SirStendec 2023-03-08 01:52:35 -05:00
parent 915ad89f58
commit e26f836267
6 changed files with 247 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

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

9
src/modules/chat/emoji.js
View file

@ -92,7 +92,12 @@ export default class Emoji extends Module {
if (enable_replace_joiner) if (enable_replace_joiner)
this.settings.add('chat.emoji.replace-joiner', { this.settings.add('chat.emoji.replace-joiner', {
default: 2, default: 1,
process(ctx, val) {
if ( val === 2 )
return 1;
return val;
},
ui: { ui: {
path: 'Chat > Behavior >> Emoji', path: 'Chat > Behavior >> Emoji',
title: 'Emoji Joiner Workaround', title: 'Emoji Joiner Workaround',
@ -101,7 +106,7 @@ export default class Emoji extends Module {
data: [ data: [
{value: 0, title: 'Disabled'}, {value: 0, title: 'Disabled'},
{value: 1, title: 'Display Only'}, {value: 1, title: 'Display Only'},
{value: 2, title: 'Display and Send'} {value: 3, title: 'Display and Send'}
] ]
} }
}); });

322
src/modules/chat/emotes.js
View file

@ -18,7 +18,7 @@ const HoverState = Symbol('FFZ:Hover:State');
const MOD_KEY = IS_OSX ? 'metaKey' : 'ctrlKey'; const MOD_KEY = IS_OSX ? 'metaKey' : 'ctrlKey';
export const MODIFIER_FLAGS = make_enum_flags( const Flags = make_enum_flags(
'Hidden', 'Hidden',
'FlipX', 'FlipX',
'FlipY', 'FlipY',
@ -33,177 +33,211 @@ export const MODIFIER_FLAGS = make_enum_flags(
'Rainbow', 'Rainbow',
'HyperRed', 'HyperRed',
'Shake', 'Shake',
'Photocopy', 'Cursed',
'Jam', 'Jam',
'Bounce' 'Bounce'
); );
export const MODIFIER_FLAGS = Flags;
export const MODIFIER_KEYS = Object.values(MODIFIER_FLAGS).filter(x => typeof x === 'number'); export const MODIFIER_KEYS = Object.values(MODIFIER_FLAGS).filter(x => typeof x === 'number');
const MODIFIER_FLAG_CSS = { const EFFECT_STYLES = [
FlipX: { {
setting: 'FlipX',
flags: Flags.FlipX,
title: 'Flip Horizontal', title: 'Flip Horizontal',
transform: 'scaleX(-1)' transform: 'scaleX(-1)'
}, },
FlipY: { {
setting: 'FlipY',
flags: Flags.FlipY,
title: 'Flip Vertical', title: 'Flip Vertical',
transform: 'scaleY(-1)' transform: 'scaleY(-1)'
}, },
ShrinkX: { {
title: 'Squish Horizontal', setting: 'ShrinkX',
//transform: 'scaleX(0.5)' flags: Flags.ShrinkX,
title: 'Squish Horizontal'
}, },
GrowX: { {
title: 'Stretch Horizontal', setting: 'GrowX',
//transform: 'scaleX(2) translateX(25%)' flags: Flags.GrowX,
title: 'Stretch Horizontal'
}, },
ShrinkY: { {
title: 'Squish Vertical', setting: 'ShrinkY',
//transform: 'scaleY(0.5)' flags: Flags.ShrinkY,
title: 'Squish Vertical'
}, },
GrowY: { {
title: 'Stretch Vertical', setting: 'GrowY',
//transform: 'scaleY(2) translateY(25%)' flags: Flags.GrowY,
title: 'Stretch Vertical'
}, },
Rotate45: { /*{
title: 'Rotate 45 Degrees', setting: 'Rotate45',
transform: 'rotate(45deg)' flags: MODIFIER_FLAGS.Rotate45,
title: 'Rotate 45 Degrees'
}, },
Rotate90: { {
title: 'Rotate 90 Degrees', setting: 'Rotate90',
transform: 'rotate(90deg)' flags: MODIFIER_FLAGS.Rotate90,
title: 'Rotate 90 Degrees'
}, },
Greyscale: { {
title: 'Grayscale', setting: 'Greyscale',
flags: Flags.Greyscale,
filter: 'grayscale(1)' filter: 'grayscale(1)'
}, },
Sepia: { {
title: 'Sepia', setting: 'Sepia',
flags: Flags.Sepia,
filter: 'sepia(1)' filter: 'sepia(1)'
}, },*/
Rainbow: { {
setting: 'Rainbow',
flags: Flags.Rainbow,
title: 'Rainbow Animation', title: 'Rainbow Animation',
animation: 'ffz-effect-rainbow 2s linear infinite', animation: 'ffz-effect-rainbow 2s linear infinite',
animationFilter: 'ffz-effect-rainbow-filter 2s linear infinite', animationFilter: 'ffz-effect-rainbow-filter 2s linear infinite',
raw: `@keyframes ffz-effect-rainbow { raw: `@keyframes ffz-effect-rainbow {
0% { filter: hue-rotate(0deg) } 0% { filter: hue-rotate(0deg) }
100% { filter: hue-rotate(360deg) } 100% { filter: hue-rotate(360deg) }
} }
@keyframes ffz-effect-rainbow-filter { @keyframes ffz-effect-rainbow-filter {
0% { filter: var(--ffz-effect-filters) hue-rotate(0deg) } 0% { filter: var(--ffz-effect-filters) hue-rotate(0deg) }
100% { filter: var(--ffz-effect-filters) hue-rotate(360deg) } 100% { filter: var(--ffz-effect-filters) hue-rotate(360deg) }
}` }`
}, },
HyperRed: { {
setting: 'HyperRed',
flags: Flags.HyperRed,
title: 'Hyper Red', title: 'Hyper Red',
filter: 'brightness(0.2) sepia(1) brightness(2.2) contrast(3) saturate(8)' filter: 'brightness(0.2) sepia(1) brightness(2.2) contrast(3) saturate(8)'
}, },
Shake: { {
setting: 'Shake',
flags: Flags.Shake,
title: 'Hyper Shake Animation', title: 'Hyper Shake Animation',
animation: 'ffz-effect-shake 0.1s linear infinite', animation: 'ffz-effect-shake 0.1s linear infinite',
animationTransform: 'ffz-effect-shake-transform 0.1s linear infinite', animationTransform: 'ffz-effect-shake-transform 0.1s linear infinite',
raw: `@keyframes ffz-effect-shake-transform { raw: `@keyframes ffz-effect-shake-transform {
0% { transform: var(--ffz-effect-transforms) translate(1px, 1px); } 0% { transform: var(--ffz-effect-transforms) translate(1px, 1px); }
10% { transform: var(--ffz-effect-transforms) translate(-1px, -2px); } 10% { transform: var(--ffz-effect-transforms) translate(-1px, -2px); }
20% { transform: var(--ffz-effect-transforms) translate(-3px, 0px); } 20% { transform: var(--ffz-effect-transforms) translate(-3px, 0px); }
30% { transform: var(--ffz-effect-transforms) translate(3px, 2px); } 30% { transform: var(--ffz-effect-transforms) translate(3px, 2px); }
40% { transform: var(--ffz-effect-transforms) translate(1px, -1px); } 40% { transform: var(--ffz-effect-transforms) translate(1px, -1px); }
50% { transform: var(--ffz-effect-transforms) translate(-1px, 2px); } 50% { transform: var(--ffz-effect-transforms) translate(-1px, 2px); }
60% { transform: var(--ffz-effect-transforms) translate(-3px, 1px); } 60% { transform: var(--ffz-effect-transforms) translate(-3px, 1px); }
70% { transform: var(--ffz-effect-transforms) translate(3px, 1px); } 70% { transform: var(--ffz-effect-transforms) translate(3px, 1px); }
80% { transform: var(--ffz-effect-transforms) translate(-1px, -1px); } 80% { transform: var(--ffz-effect-transforms) translate(-1px, -1px); }
90% { transform: var(--ffz-effect-transforms) translate(1px, 2px); } 90% { transform: var(--ffz-effect-transforms) translate(1px, 2px); }
100% { transform: var(--ffz-effect-transforms) translate(1px, -2px); } 100% { transform: var(--ffz-effect-transforms) translate(1px, -2px); }
} }
@keyframes ffz-effect-shake { @keyframes ffz-effect-shake {
0% { transform: translate(1px, 1px); } 0% { transform: translate(1px, 1px); }
10% { transform: translate(-1px, -2px); } 10% { transform: translate(-1px, -2px); }
20% { transform: translate(-3px, 0px); } 20% { transform: translate(-3px, 0px); }
30% { transform: translate(3px, 2px); } 30% { transform: translate(3px, 2px); }
40% { transform: translate(1px, -1px); } 40% { transform: translate(1px, -1px); }
50% { transform: translate(-1px, 2px); } 50% { transform: translate(-1px, 2px); }
60% { transform: translate(-3px, 1px); } 60% { transform: translate(-3px, 1px); }
70% { transform: translate(3px, 1px); } 70% { transform: translate(3px, 1px); }
80% { transform: translate(-1px, -1px); } 80% { transform: translate(-1px, -1px); }
90% { transform: translate(1px, 2px); } 90% { transform: translate(1px, 2px); }
100% { transform: translate(1px, -2px); } 100% { transform: translate(1px, -2px); }
}` }`
}, },
Photocopy: { {
setting: 'Photocopy',
flags: Flags.Cursed,
title: 'Cursed', title: 'Cursed',
filter: 'grayscale(1) brightness(0.7) contrast(2.5)' filter: 'grayscale(1) brightness(0.7) contrast(2.5)'
}, },
Jam: { {
setting: 'Jam',
flags: Flags.Jam,
title: 'Jam Animation', title: 'Jam Animation',
animation: 'ffz-effect-jam 0.6s linear infinite', animation: 'ffz-effect-jam 0.6s linear infinite',
animationTransform: 'ffz-effect-jam-transform 0.6s linear infinite', animationTransform: 'ffz-effect-jam-transform 0.6s linear infinite',
raw: `@keyframes ffz-effect-jam { raw: `@keyframes ffz-effect-jam {
0% { transform: translate(-2px, -2px) rotate(-6deg); } 0% { transform: translate(-2px, -2px) rotate(-6deg); }
10% { transform: translate(-1.5px, -2px) rotate(-8deg); } 10% { transform: translate(-1.5px, -2px) rotate(-8deg); }
20% { transform: translate(1px, -1.5px) rotate(-8deg); } 20% { transform: translate(1px, -1.5px) rotate(-8deg); }
30% { transform: translate(3px, 2.5px) rotate(-6deg); } 30% { transform: translate(3px, 2.5px) rotate(-6deg); }
40% { transform: translate(3px, 4px) rotate(-2deg); } 40% { transform: translate(3px, 4px) rotate(-2deg); }
50% { transform: translate(2px, 4px) rotate(3deg); } 50% { transform: translate(2px, 4px) rotate(3deg); }
60% { transform: translate(1px, 4px) rotate(3deg); } 60% { transform: translate(1px, 4px) rotate(3deg); }
70% { transform: translate(-0.5px, 3px) rotate(2deg); } 70% { transform: translate(-0.5px, 3px) rotate(2deg); }
80% { transform: translate(-1.25px, 1px) rotate(0deg); } 80% { transform: translate(-1.25px, 1px) rotate(0deg); }
90% { transform: translate(-1.75px, -0.5px) rotate(-2deg); } 90% { transform: translate(-1.75px, -0.5px) rotate(-2deg); }
100% { transform: translate(-2px, -2px) rotate(-5deg); } 100% { transform: translate(-2px, -2px) rotate(-5deg); }
} }
@keyframes ffz-effect-jam-transform { @keyframes ffz-effect-jam-transform {
0% { transform: var(--ffz-effect-transforms) translate(-2px, -2px) rotate(-6deg); } 0% { transform: var(--ffz-effect-transforms) translate(-2px, -2px) rotate(-6deg); }
10% { transform: var(--ffz-effect-transforms) translate(-1.5px, -2px) rotate(-8deg); } 10% { transform: var(--ffz-effect-transforms) translate(-1.5px, -2px) rotate(-8deg); }
20% { transform: var(--ffz-effect-transforms) translate(1px, -1.5px) rotate(-8deg); } 20% { transform: var(--ffz-effect-transforms) translate(1px, -1.5px) rotate(-8deg); }
30% { transform: var(--ffz-effect-transforms) translate(3px, 2.5px) rotate(-6deg); } 30% { transform: var(--ffz-effect-transforms) translate(3px, 2.5px) rotate(-6deg); }
40% { transform: var(--ffz-effect-transforms) translate(3px, 4px) rotate(-2deg); } 40% { transform: var(--ffz-effect-transforms) translate(3px, 4px) rotate(-2deg); }
50% { transform: var(--ffz-effect-transforms) translate(2px, 4px) rotate(3deg); } 50% { transform: var(--ffz-effect-transforms) translate(2px, 4px) rotate(3deg); }
60% { transform: var(--ffz-effect-transforms) translate(1px, 4px) rotate(3deg); } 60% { transform: var(--ffz-effect-transforms) translate(1px, 4px) rotate(3deg); }
70% { transform: var(--ffz-effect-transforms) translate(-0.5px, 3px) rotate(2deg); } 70% { transform: var(--ffz-effect-transforms) translate(-0.5px, 3px) rotate(2deg); }
80% { transform: var(--ffz-effect-transforms) translate(-1.25px, 1px) rotate(0deg); } 80% { transform: var(--ffz-effect-transforms) translate(-1.25px, 1px) rotate(0deg); }
90% { transform: var(--ffz-effect-transforms) translate(-1.75px, -0.5px) rotate(-2deg); } 90% { transform: var(--ffz-effect-transforms) translate(-1.75px, -0.5px) rotate(-2deg); }
100% { transform: var(--ffz-effect-transforms) translate(-2px, -2px) rotate(-5deg); } 100% { transform: var(--ffz-effect-transforms) translate(-2px, -2px) rotate(-5deg); }
}`, }`
}, },
Bounce: { {
setting: 'Bounce',
flags: Flags.Bounce,
animation: 'ffz-effect-bounce 0.5s linear infinite', animation: 'ffz-effect-bounce 0.5s linear infinite',
animationTransform: 'ffz-effect-bounce-transform 0.5s linear infinite', animationTransform: 'ffz-effect-bounce-transform 0.5s linear infinite',
transformOrigin: 'bottom center', transformOrigin: 'bottom center',
raw: `@keyframes ffz-effect-bounce { raw: `@keyframes ffz-effect-bounce {
0% { transform: scale(0.8, 1); } 0% { transform: scale(0.8, 1); }
10% { transform: scale(0.9, 0.8); } 10% { transform: scale(0.9, 0.8); }
20% { transform: scale(1, 0.4); } 20% { transform: scale(1, 0.4); }
25% { transform: scale(1.2, 0.3); } 25% { transform: scale(1.2, 0.3); }
25.001% { transform: scale(-1.2, 0.3); } 25.001% { transform: scale(-1.2, 0.3); }
30% { transform: scale(-1, 0.4); } 30% { transform: scale(-1, 0.4); }
40% { transform: scale(-0.9, 0.8); } 40% { transform: scale(-0.9, 0.8); }
50% { transform: scale(-0.8, 1); } 50% { transform: scale(-0.8, 1); }
60% { transform: scale(-0.9, 0.8); } 60% { transform: scale(-0.9, 0.8); }
70% { transform: scale(-1, 0.4); } 70% { transform: scale(-1, 0.4); }
75% { transform: scale(-1.2, 0.3); } 75% { transform: scale(-1.2, 0.3); }
75.001% { transform: scale(1.2, 0.3); } 75.001% { transform: scale(1.2, 0.3); }
80% { transform: scale(1, 0.4); } 80% { transform: scale(1, 0.4); }
90% { transform: scale(0.9, 0.8); } 90% { transform: scale(0.9, 0.8); }
100% { transform: scale(0.8, 1); } 100% { transform: scale(0.8, 1); }
} }
@keyframes ffz-effect-bounce-transform { @keyframes ffz-effect-bounce-transform {
0% { transform: scale(0.8, 1) var(--ffz-effect-transforms); } 0% { transform: scale(0.8, 1) var(--ffz-effect-transforms); }
10% { transform: scale(0.9, 0.8) var(--ffz-effect-transforms); } 10% { transform: scale(0.9, 0.8) var(--ffz-effect-transforms); }
20% { transform: scale(1, 0.4) var(--ffz-effect-transforms); } 20% { transform: scale(1, 0.4) var(--ffz-effect-transforms); }
25% { transform: scale(1.2, 0.3) var(--ffz-effect-transforms); } 25% { transform: scale(1.2, 0.3) var(--ffz-effect-transforms); }
25.001% { transform: scale(-1.2, 0.3) var(--ffz-effect-transforms); } 25.001% { transform: scale(-1.2, 0.3) var(--ffz-effect-transforms); }
30% { transform: scale(-1, 0.4) var(--ffz-effect-transforms); } 30% { transform: scale(-1, 0.4) var(--ffz-effect-transforms); }
40% { transform: scale(-0.9, 0.8) var(--ffz-effect-transforms); } 40% { transform: scale(-0.9, 0.8) var(--ffz-effect-transforms); }
50% { transform: scale(-0.8, 1) var(--ffz-effect-transforms); } 50% { transform: scale(-0.8, 1) var(--ffz-effect-transforms); }
60% { transform: scale(-0.9, 0.8) var(--ffz-effect-transforms); } 60% { transform: scale(-0.9, 0.8) var(--ffz-effect-transforms); }
70% { transform: scale(-1, 0.4) var(--ffz-effect-transforms); } 70% { transform: scale(-1, 0.4) var(--ffz-effect-transforms); }
75% { transform: scale(-1.2, 0.3) var(--ffz-effect-transforms); } 75% { transform: scale(-1.2, 0.3) var(--ffz-effect-transforms); }
75.001% { transform: scale(1.2, 0.3) var(--ffz-effect-transforms); } 75.001% { transform: scale(1.2, 0.3) var(--ffz-effect-transforms); }
80% { transform: scale(1, 0.4) var(--ffz-effect-transforms); } 80% { transform: scale(1, 0.4) var(--ffz-effect-transforms); }
90% { transform: scale(0.9, 0.8) var(--ffz-effect-transforms); } 90% { transform: scale(0.9, 0.8) var(--ffz-effect-transforms); }
100% { transform: scale(0.8, 1) var(--ffz-effect-transforms); } 100% { transform: scale(0.8, 1) var(--ffz-effect-transforms); }
}` }`
} },
}; {
setting: [
'Bounce',
'FlipY'
],
flags: Flags.Bounce | Flags.FlipY,
transform: 'translateY(100%)',
},
];
function generateBaseFilterCss() { function generateBaseFilterCss() {
@ -215,7 +249,8 @@ function generateBaseFilterCss() {
}` }`
]; ];
for(const [key, val] of Object.entries(MODIFIER_FLAG_CSS)) { //for(const [key, val] of Object.entries(MODIFIER_FLAG_CSS)) {
for(const val of EFFECT_STYLES) {
if ( val.raw ) if ( val.raw )
out.push(val.raw); out.push(val.raw);
} }
@ -399,14 +434,17 @@ export default class Emotes extends Module {
} }
}); });
for(const [key, val] of Object.entries(MODIFIER_FLAG_CSS)) { for(const val of EFFECT_STYLES) {
if ( ! val.setting || Array.isArray(val.setting) )
continue;
const setting = { const setting = {
default: val.animation default: val.animation
? null ? null
: true, : true,
ui: { ui: {
path: 'Chat > Emote Effects >> Specific Effect @{"description": "**Note:** Animated effects are, by default, only enabled when [Animated Emotes](~chat.appearance.emotes) are enabled."}', path: 'Chat > Emote Effects >> Specific Effect @{"description": "**Note:** Animated effects are, by default, only enabled when [Animated Emotes](~chat.appearance.emotes) are enabled."}',
title: `Enable the effect "${val.title ?? key}".`, title: `Enable the effect "${val.title ?? val.setting}".`,
component: 'setting-check-box', component: 'setting-check-box',
force_seen: true force_seen: true
} }
@ -422,7 +460,7 @@ export default class Emotes extends Module {
}; };
} }
this.settings.add(`chat.effects.${key}`, setting); this.settings.add(`chat.effects.${val.setting}`, setting);
} }
// Because this may be used elsewhere. // Because this may be used elsewhere.
@ -439,8 +477,9 @@ export default class Emotes extends Module {
this.base_effect_css = generateBaseFilterCss(); this.base_effect_css = generateBaseFilterCss();
this.parent.context.on('changed:chat.effects.enable', this.updateEffects, this); this.parent.context.on('changed:chat.effects.enable', this.updateEffects, this);
for(const key of Object.keys(MODIFIER_FLAG_CSS)) for(const input of EFFECT_STYLES)
this.parent.context.on(`changed:chat.effects.${key}`, this.updateEffects, this); if ( input.setting && ! Array.isArray(input.setting) )
this.parent.context.on(`changed:chat.effects.${input.setting}`, this.updateEffects, this);
this.updateEffects(); this.updateEffects();
@ -504,12 +543,8 @@ export default class Emotes extends Module {
let filter, transformOrigin, transform, animation, animations = []; let filter, transformOrigin, transform, animation, animations = [];
for(const key of MODIFIER_KEYS) { for(const input of this.activeEffectStyles) {
if ( (flags & key) !== key || ! this.effects_enabled[key] ) if ( (flags & input.flags) !== input.flags )
continue;
const input = MODIFIER_FLAG_CSS[MODIFIER_FLAGS[key]];
if ( ! input )
continue; continue;
if ( input.animation ) if ( input.animation )
@ -564,11 +599,31 @@ export default class Emotes extends Module {
const enabled = this.parent.context.get('chat.effects.enable'); const enabled = this.parent.context.get('chat.effects.enable');
this.effects_enabled = {}; this.effects_enabled = {};
for(const key of Object.keys(MODIFIER_FLAG_CSS)) this.activeEffectStyles = [];
this.effects_enabled[MODIFIER_FLAGS[key]] = this.effects_enabled[key] = this.parent.context.get(`chat.effects.${key}`);
for(const input of EFFECT_STYLES) {
if ( input.setting && ! Array.isArray(input.setting) )
this.effects_enabled[input.setting] = this.parent.context.get(`chat.effects.${input.setting}`);
}
for(const input of EFFECT_STYLES) {
let enabled = true;
if ( Array.isArray(input.setting) ) {
for(const setting of input.setting)
if ( ! this.effects_enabled[setting] ) {
enabled = false;
break;
}
} else if ( input.setting )
enabled = this.effects_enabled[input.setting];
if ( enabled )
this.activeEffectStyles.push(input);
}
this.effect_style.clear(); this.effect_style.clear();
if ( ! enabled ) if ( ! enabled || ! this.activeEffectStyles.length )
return; return;
this.effect_style.set('base', this.base_effect_css); this.effect_style.set('base', this.base_effect_css);
@ -916,6 +971,8 @@ export default class Emotes extends Module {
// ======================================================================== // ========================================================================
getTargetEmote() { getTargetEmote() {
this.target_emote = null;
const me = this.resolve('site').getUser(), const me = this.resolve('site').getUser(),
Input = me ? this.resolve('site.chat.input') : null, Input = me ? this.resolve('site.chat.input') : null,
entered = Input ? Input.getInput() : null; entered = Input ? Input.getInput() : null;
@ -923,7 +980,7 @@ export default class Emotes extends Module {
const menu = this.resolve('site.chat.emote_menu')?.MenuWrapper?.first, const menu = this.resolve('site.chat.emote_menu')?.MenuWrapper?.first,
emote_sets = menu?.getAllSets?.(), emote_sets = menu?.getAllSets?.(),
emotes = emote_sets emotes = emote_sets
? emote_sets.map(x => x.emotes).flat().filter(x => ! x.effects) ? emote_sets.map(x => x.emotes).flat().filter(x => ! x.effects && ! x.locked)
: null; : null;
if ( entered && emotes ) { if ( entered && emotes ) {
@ -947,11 +1004,12 @@ export default class Emotes extends Module {
const idx = Math.floor(Math.random() * emotes.length), const idx = Math.floor(Math.random() * emotes.length),
emote = emotes[idx]; emote = emotes[idx];
this.target_emote = emote;
return emote; return emote;
} }
// Return LaterSooner // Return LaterSooner
return { return this.target_emote = {
provider: 'ffz', provider: 'ffz',
set_id: 3, set_id: 3,
id: 149346, id: 149346,

30
src/modules/chat/tokenizers.jsx
View file

@ -1228,9 +1228,24 @@ export const AddonEmotes = {
if ( effects ) { if ( effects ) {
this.emotes.ensureEffect(effects); this.emotes.ensureEffect(effects);
style = { let make_bigger = big;
width: is_big ? token.width * 2 : token.width, if ( token.provider === 'emoji' ) {
height: is_big ? token.height * 2 : token.height const size = 1.5 * (this.context.get('chat.font-size') ?? 13);
style = {
width: size,
height: size
};
make_bigger = token.big_emoji;
} else
style = {
width: token.width,
height: token.height
};
if ( make_bigger ) {
style.width *= 2;
style.height *= 2;
} }
if ( (effects & SHRINK_X) === SHRINK_X ) if ( (effects & SHRINK_X) === SHRINK_X )
@ -1248,10 +1263,8 @@ export const AddonEmotes = {
style.height = w; style.height = w;
} }
if ( style.width > 128 ) style.width = Math.min(style.width, big ? 256 : 128);
style.width = 128; style.height = Math.min(style.height, big ? 80 : 40);
if ( style.height > 40 )
style.height = 40;
} }
const mods = token.modifiers || [], ml = mods.length, const mods = token.modifiers || [], ml = mods.length,
@ -1658,6 +1671,7 @@ export const Emoji = {
return; return;
const splitter = this.emoji.splitter, const splitter = this.emoji.splitter,
big = this.context.get('chat.emotes.2x') > 1,
replace = this.context.get('chat.emoji.replace-joiner') > 0, replace = this.context.get('chat.emoji.replace-joiner') > 0,
style = this.context.get('chat.emoji.style'); style = this.context.get('chat.emoji.style');
@ -1703,6 +1717,8 @@ export const Emoji = {
code: key[0], code: key[0],
variant: key[1], variant: key[1],
big_emoji: big,
src: this.emoji.getFullImage(variant.image, style), src: this.emoji.getFullImage(variant.image, style),
srcSet: this.emoji.getFullImageSet(variant.image, style), srcSet: this.emoji.getFullImageSet(variant.image, style),

31
src/sites/twitch-twilight/modules/chat/emote_menu.jsx
View file

@ -287,12 +287,21 @@ export default class EmoteMenu extends Module {
data: [ data: [
{value: 'fav', title: 'Favorites'}, {value: 'fav', title: 'Favorites'},
{value: 'channel', title: 'Channel'}, {value: 'channel', title: 'Channel'},
{value: 'effect', title: 'Emote Effects'},
{value: 'all', title: 'My Emotes'}, {value: 'all', title: 'My Emotes'},
{value: 'emoji', title: 'Emoji'} {value: 'emoji', title: 'Emoji'}
] ]
} }
}); });
this.settings.add('chat.emote-menu.effect-tab', {
default: true,
ui: {
path: 'Chat > Emote Menu >> General',
title: 'Display Emote Effects in their own tab.',
component: 'setting-check-box'
}
});
this.settings.add('chat.emote-menu.show-emoji', { this.settings.add('chat.emote-menu.show-emoji', {
default: true, default: true,
@ -391,6 +400,7 @@ export default class EmoteMenu extends Module {
this.chat.context.on('changed:chat.emote-menu.modifiers', rebuild); this.chat.context.on('changed:chat.emote-menu.modifiers', rebuild);
this.chat.context.on('changed:chat.emote-menu.show-emoji', rebuild); 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.fix-bad-emotes', rebuild);
this.chat.context.on('changed:chat.emote-menu.effect-tab', rebuild);
this.chat.context.on('changed:chat.emote-menu.sort-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); this.chat.context.on('changed:chat.emote-menu.sort-tiers-last', rebuild);
@ -678,7 +688,12 @@ export default class EmoteMenu extends Module {
if ( t.emotes.handleClick(event) ) if ( t.emotes.handleClick(event) )
return; return;
this.props.onClickToken(event.currentTarget.dataset.name) // Check for magic.
let prefix = '';
if ( event.currentTarget.dataset.effects != '0' && t.emotes.target_emote )
prefix = `${t.emotes.target_emote.name} `;
this.props.onClickToken(`${prefix}${event.currentTarget.dataset.name}`);
} }
keyHeading(event) { keyHeading(event) {
@ -1520,6 +1535,8 @@ export default class EmoteMenu extends Module {
state.filtered_fav_sets = this.filterSets(input, state.fav_sets, visibility_control); state.filtered_fav_sets = this.filterSets(input, state.fav_sets, visibility_control);
state.filtered_emoji_sets = this.filterSets(input, state.emoji_sets, visibility_control); state.filtered_emoji_sets = this.filterSets(input, state.emoji_sets, visibility_control);
state.has_effect_tab = state.filtered_effect_sets.length > 0;
return state; return state;
} }
@ -2260,6 +2277,8 @@ export default class EmoteMenu extends Module {
if ( t.chat.context.get('chat.emotes.enabled') > 1 ) { if ( t.chat.context.get('chat.emotes.enabled') > 1 ) {
const me = t.site.getUser(); const me = t.site.getUser();
const use_effect_tab = t.chat.context.get('chat.emote-menu.effect-tab');
const ffz_room = t.emotes.getRoomSetsWithSources(me?.id, me?.login, props.channel_id, null), const ffz_room = t.emotes.getRoomSetsWithSources(me?.id, me?.login, props.channel_id, null),
ffz_subs = t.emotes.getSubSetsWithSources(), ffz_subs = t.emotes.getSubSetsWithSources(),
ffz_global = t.emotes.getGlobalSetsWithSources(me?.id, me?.login), ffz_global = t.emotes.getGlobalSetsWithSources(me?.id, me?.login),
@ -2299,7 +2318,7 @@ export default class EmoteMenu extends Module {
if ( section ) { if ( section ) {
section.emotes.sort(sort_emotes); section.emotes.sort(sort_emotes);
if ( ! effects.includes(section) && section.has_effects ) if ( use_effect_tab && ! effects.includes(section) && section.has_effects )
effects.push(section); effects.push(section);
else if ( ! all.includes(section) ) else if ( ! all.includes(section) )
all.push(section); all.push(section);
@ -2317,7 +2336,7 @@ export default class EmoteMenu extends Module {
if ( section ) { if ( section ) {
section.emotes.sort(sort_emotes); section.emotes.sort(sort_emotes);
if ( ! effects.includes(section) && section.has_effects ) if ( use_effect_tab && ! effects.includes(section) && section.has_effects )
effects.push(section); effects.push(section);
else if ( ! all.includes(section) ) else if ( ! all.includes(section) )
@ -2346,7 +2365,7 @@ export default class EmoteMenu extends Module {
all.sort(sort_sets); all.sort(sort_sets);
state.has_channel_tab = channel.length > 0; state.has_channel_tab = channel.length > 0;
state.has_effect_Tab = effects.length > 0; state.has_effect_tab = effects.length > 0;
return this.buildEmoji(state); return this.buildEmoji(state);
} }
@ -2578,7 +2597,7 @@ export default class EmoteMenu extends Module {
} else { } else {
tab = this.state.tab || t.chat.context.get('chat.emote-menu.default-tab'); tab = this.state.tab || t.chat.context.get('chat.emote-menu.default-tab');
if ( (tab === 'effect' && ! this.state.has_effect_Tab) || (tab === 'channel' && ! this.state.has_channel_tab) || (tab === 'emoji' && ! this.state.has_emoji_tab) ) if ( (tab === 'effect' && ! this.state.has_effect_tab) || (tab === 'channel' && ! this.state.has_channel_tab) || (tab === 'emoji' && ! this.state.has_emoji_tab) )
tab = 'all'; tab = 'all';
is_emoji = tab === 'emoji'; is_emoji = tab === 'emoji';
@ -2771,7 +2790,7 @@ export default class EmoteMenu extends Module {
</div> </div>
</button> </button>
</div>} </div>}
{this.state.has_effect_Tab && <div class={`emote-picker-tab-item${tab === 'effect' ? ' emote-picker-tab-item--active' : ''} tw-relative`}> {this.state.has_effect_tab && <div class={`emote-picker-tab-item${tab === 'effect' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button <button
class={`ffz-tooltip tw-block tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive${tab === 'effect' ? ' ffz-interactable--selected' : ''}`} class={`ffz-tooltip tw-block tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive${tab === 'effect' ? ' ffz-interactable--selected' : ''}`}
id="emote-picker__effect" id="emote-picker__effect"

2
src/sites/twitch-twilight/modules/css_tweaks/styles/big-emoji.scss
View file

@ -1,4 +1,4 @@
.ffz-emoji { .ffz--inline:not(.scaled-modified-emote) .ffz-emoji {
width: 3.6rem !important; width: 3.6rem !important;
height: 3.6rem !important; height: 3.6rem !important;
width: calc(var(--ffz-chat-font-size) * 3) !important; width: calc(var(--ffz-chat-font-size) * 3) !important;