oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-06-27 21:05:53 +00:00
Code Wiki Activity

4.20.79

Browse source 
* Added: Setting to control the display of animated emotes. Before you all get excited, this is for better integration with the `BetterTTV Emotes` add-on as well as any future add-ons with animated emotes.
* Added: Support for "Native Sort" for the emote menu, which uses the order from the API response.
* Added: Quick Navigation for the emote menu, which places a list of emote sets along the right side.
* Fixed: Skin tone picker for emoji in the emote menu not appearing correctly.
* Fixed: Center the FFZ Control Center correctly when opening it.
* Fixed: Modify the DOM we're emitting on clips pages for chat lines. Fixes night/betterttv#4416
* API Added: Support for animated images for emotes.
This commit is contained in:
SirStendec 2021-03-20 18:47:12 -04:00
parent 5a5a68adb6
commit fc359d53e0
12 changed files with 602 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,6 +12,9 @@ import {NEW_API, API_SERVER, IS_OSX, EmoteTypes, TWITCH_GLOBAL_SETS, TWITCH_POIN
import GET_EMOTE from './emote_info.gql';
import GET_EMOTE_SET from './emote_set_info.gql';
const HoverRAF = Symbol('FFZ:Hover:RAF');
const HoverState = Symbol('FFZ:Hover:State');
const MOD_KEY = IS_OSX ? 'metaKey' : 'ctrlKey';
const MODIFIERS = {
@ -133,6 +136,8 @@ export default class Emotes extends Module {
// Because this may be used elsewhere.
this.handleClick = this.handleClick.bind(this);
this.animHover = this.animHover.bind(this);
this.animLeave = this.animLeave.bind(this);
}
onEnable() {
@ -249,6 +254,68 @@ export default class Emotes extends Module {
}
// ========================================================================
// Animation Hover
// ========================================================================
animHover(event) { // eslint-disable-line class-methods-use-this
const target = event.currentTarget;
if ( target[HoverState] )
return;
if ( target[HoverRAF] )
cancelAnimationFrame(target[HoverRAF]);
target[HoverRAF] = requestAnimationFrame(() => {
target[HoverRAF] = null;
if ( target[HoverState] )
return;
if ( ! target.matches(':hover') )
return;
target[HoverState] = true;
const emotes = target.querySelectorAll('.ffz-hover-emote');
for(const em of emotes) {
const ds = em.dataset;
if ( ds.normalSrc && ds.hoverSrc ) {
em.src = ds.hoverSrc;
em.srcset = ds.hoverSrcSet;
}
}
});
}
animLeave(event) { // eslint-disable-line class-methods-use-this
const target = event.currentTarget;
if ( ! target[HoverState] )
return;
if ( target[HoverRAF] )
cancelAnimationFrame(target[HoverRAF]);
target[HoverRAF] = requestAnimationFrame(() => {
target[HoverRAF] = null;
if ( ! target[HoverState] )
return;
if ( target.matches(':hover') )
return;
target[HoverState] = false;
const emotes = target.querySelectorAll('.ffz-hover-emote');
for(const em of emotes) {
const ds = em.dataset;
if ( ds.normalSrc ) {
em.src = ds.normalSrc;
em.srcset = ds.normalSrcSet;
}
}
});
}
// ========================================================================
// Favorite Checking
// ========================================================================
@ -724,6 +791,7 @@ export default class Emotes extends Module {
}
emote.set_id = set_id;
emote.src = emote.urls[1];
emote.srcSet = `${emote.urls[1]} 1x`;
if ( emote.urls[2] )
emote.srcSet += `, ${emote.urls[2]} 2x`;
@ -738,16 +806,35 @@ export default class Emotes extends Module {
emote.srcSet2 += `, ${emote.urls[4]} 2x`;
}
if ( emote.animated?.[1] ) {
emote.animSrc = emote.animated[1];
emote.animSrcSet = `${emote.animated[1]} 1x`;
if ( emote.animated[2] ) {
emote.animSrcSet += `, ${emote.animated[2]} 2x`;
emote.animSrc2 = emote.animated[2];
emote.animSrcSet2 = `${emote.animated[2]} 1x`;
if ( emote.animated[4] ) {
emote.animSrcSet += `, ${emote.animated[4]} 4x`;
emote.animSrcSet2 += `, ${emote.animated[4]} 2x`;
}
}
}
emote.token = {
type: 'emote',
id: emote.id,
set: set_id,
provider: 'ffz',
src: emote.urls[1],
src: emote.src,
srcSet: emote.srcSet,
can_big: !! emote.urls[2],
src2: emote.src2,
srcSet2: emote.srcSet2,
animSrc: emote.animSrc,
animSrcSet: emote.animSrcSet,
animSrc2: emote.animSrc2,
animSrcSet2: emote.animSrcSet2,
text: emote.hidden ? '???' : emote.name,
length: emote.name.length,
height: emote.height