[IMPROVE] Upgrade EmojiOne to JoyPixels 4.5.0 #13807

wreiske · 2019-03-20T08:12:08Z

This is READY TO MERGE!

Still TODO

Add "Emoji provided by JoyPixels" to the EmojiPicker as shown in EmojiOne version 2 is no longer supported or distributed #13686 (comment)
Fix reactions
i18n "Emoji Provided by JoyPixels"
... anything else we notice that is broken.

Notes

I modified the generateEmojiIndex script to automatically generate the emojiPicker.js file based off the emoji.json from emojione's github tagged 4.5.0.

Need to figure out how @sampaiodiego did the percentage mustache to allow resizing of the emojis without whitespace. zoom and transform: scale(x) do not work on all browsers (transform leaves whitespace)

Firefox:

Webkit:

I'm thinking about including the 64x sprites and the 32x or 24x... The inline message emojis would use the 24x sprites, while the emoji replies (no other text) would use the 64x sprites (or maybe a size smaller.)

This is a work in progress commit to update Rocket.Chat to use the latest release of EmojiOne (4.5.0). Current Issues: Need to generate percent sprites instead of using zoom and transforms Need to check and fix various things like emoji reactions, avatars, etc.

wreiske · 2019-03-20T08:28:45Z

Added attribution text in 4aa6564

engelgabriel · 2019-03-20T14:35:42Z

@wreiske this is awesome!

@sampaiodiego do you think we can use the assets directly from the npm module or do we have to copy them to public/packages/emojione/assets/sprites/? Ideally, we should avoid having to copy assets and keep them updated manually.

@rodrigok what do you think?

rodrigok · 2019-03-20T14:41:16Z

@engelgabriel AFAIK there is no way to provide assets from npm packages, we always need to copy them to the public folder.

wreiske · 2019-03-20T16:01:07Z

I fixed reactions in a local copy, but I'm not going to push it because it is counterproductive. Once we generate the percentages for the sprites, it will fix itself.

As for the assets, we could write a hook that copies the assets from the node modules to the public folder, or I could make an update_emojione.js that goes and pulls the latest sprites from their github. 🤔

Also: I'm noticing aliasing with the current sprite sheet since it's so big (64x) and being zoomed smaller.

Are you against having different sized sprite sheets? This would resolve the need for percentage sprites, too. If we added all of their available sprite sheet sizes (24, 32, 40, 64) it would add (57.3 MB) to the release size. These emojis also include sprite@2x.png sizes for retina screens (looks really good on my mbp!)

engelgabriel · 2019-03-20T16:14:00Z

I guess we can use the SVG version?

wreiske · 2019-03-20T16:16:29Z

I guess we can use the SVG version?

I think the free license they are modifying for Rocket.Chat does not include high-quality SVG assets, just the PNG sprites.

It does have font files for ios, mac, and android.

engelgabriel · 2019-03-20T16:18:09Z

I think the free license they are modifying for us does not include high-quality SVG assets, just the PNG sprites.

I agree, but maybe it is worth double checking? 😬

wreiske · 2019-03-20T16:20:14Z

I think the free license they are modifying for us does not include high-quality SVG assets, just the PNG sprites.

I agree, but maybe it is worth double checking? 😬

I'll send an email to Lisa and ask.

engelgabriel · 2019-03-20T16:26:27Z

Currently, we use a single sprite, right?
https://open.rocket.chat/packages/emojione_emojione/assets/sprites/emojione.sprites.png

I think that the two versions you have added could be enough, can you push your latest version so I can see on my mbp too?

wreiske · 2019-03-20T16:34:10Z

Currently, we use a single sprite, right?
https://open.rocket.chat/packages/emojione_emojione/assets/sprites/emojione.sprites.png

I think that the two versions you have added could be enough, can you push your latest version so I can see on my mbp too?

Pushed. This only has the 64 sprites in it. If you'd like, let me know the two sizes you would like and I'll get them committed. Once I push the other sprites, you'll have to make some code changes for them to display the different sizes.

Change these in /app/emoji-emojione/lib/rocketchat.js

emoji.packages.emojione.emojiSize = 64;
emoji.packages.emojione.spriteSize = 64;

I reached out to Lisa about potentially using the SVG assets, it can't hurt! I'll let you know.

wreiske · 2019-03-21T20:51:28Z

Some things to consider about the SVG sprites...
https://demos.emojione.com/sprites-svg.html

These are not supported in IE8.
IE does not support SVG sprites, to get it working you'll need to include SVG4Everybody

…nto emoji-upgrades

wreiske · 2019-03-22T04:23:25Z

OK.. so this is with the 24x sprite sheet and the 64x sprite sheet without any size modifications. Had to make the reaction buttons a bit bigger.

Are you cool with the slightly bigger reactions?

engelgabriel · 2019-03-22T12:08:38Z

@ggazzo I think we can merge this and get to OPEN so people can test this.

… into wreiske-emoji-upgrades

…nto emoji-upgrades

sampaiodiego · 2019-05-14T19:41:17Z

alright.. this is now ready for merge!!

please @ggazzo and/or @tassoevan (or any other @RocketChat/core ) help reviewing.

thx a ton @wreiske

wreiske · 2019-05-14T19:43:11Z

Of course! Thank you for such an AWESOME open source project!

ggazzo

@sampaiodiego, please apply some kind of image compression ;)

app/emoji/client/emojiPicker.js

app/emoji/client/lib/EmojiPicker.js

wreiske · 2019-05-20T15:29:26Z

🎉 🚀

alyssais · 2019-05-24T17:33:31Z

Reposting my comment from #13686 here in case somebody in this thread can answer:

Is there a copy of the full license that will apply to users of rocketchat after this upgrade? What terms does it impose on redistributors?

If I host a Rocket.Chat instance, or create a package for it, under what conditions am I permitted to use the JoyPixels emoji? Presumably I can't redistribute them freely or modify them, but without any sort of license I can't know whether I'm allowed to use them at all!

wreiske · 2019-05-24T19:08:54Z

Reposting my comment from #13686 here in case somebody in this thread can answer:

Is there a copy of the full license that will apply to users of rocketchat after this upgrade? What terms does it impose on redistributors?

If I host a Rocket.Chat instance, or create a package for it, under what conditions am I permitted to use the JoyPixels emoji? Presumably I can't redistribute them freely or modify them, but without any sort of license I can't know whether I'm allowed to use them at all!

I have reached out to my contact on the Joypixels team for comment. I'll let you know her response.

wreiske · 2019-06-13T21:07:21Z

@alyssais
Just an update: I have connected Lisa from JoyPixels with Gabriel. They are still working on drafting the agreement for Rocket.Chat's use of JoyPixels. Their licensing department is a bit backed-up, but they should have an amended user agreement to look at next week sometime.

alyssais · 2019-09-04T15:39:03Z

@alyssais Just an update: I have connected Lisa from JoyPixels with Gabriel. They are still working on drafting the agreement for Rocket.Chat's use of JoyPixels. Their licensing department is a bit backed-up, but they should have an amended user agreement to look at next week sometime.

Guessing you never heard anything?

wreiske · 2019-09-04T17:03:12Z

@alyssais Just an update: I have connected Lisa from JoyPixels with Gabriel. They are still working on drafting the agreement for Rocket.Chat's use of JoyPixels. Their licensing department is a bit backed-up, but they should have an amended user agreement to look at next week sometime.
Guessing you never heard anything?

Actually, they responded to @engelgabriel I believe. Maybe we need to include the license here @engelgabriel ?

heyyo-droid · 2021-04-01T13:41:53Z

Reducing the palette to 256 colors, could reduce the sprite size to 1.05MB vs 3.455MB.

wreiske added 4 commits March 20, 2019 03:49

Removed stylelint check for sprites.css

0ca4f7a

Added "Emoji provided by JoyPixels" attribution to emojipicker

4aa6564

Fixed linting issue on emoji-footer

502e734

engelgabriel requested a review from sampaiodiego March 20, 2019 14:31

engelgabriel added this to the 1.0.0 milestone Mar 20, 2019

Temp fix for reactions so engelgabriel can test

07ccb25

ggazzo changed the title ~~Upgrade EmojiOne to 4.5.0~~ [WIP] Upgrade EmojiOne to 4.5.0 Mar 20, 2019

wreiske added 4 commits March 21, 2019 21:11

Merge branch 'develop' of https://github.com/RocketChat/Rocket.Chat i…

1e6f074

…nto emoji-upgrades

EmojiOne 24x and 64x sprites

4758361

stylelint disable for emojione css

e4579cd

fixed style lint issues...

3cb1e20

Update reaction.css

f905542

wreiske and others added 4 commits March 22, 2019 11:39

Removed commented out code to get ready for merge

ac44cf2

Merge branch 'emoji-upgrades' of https://github.com/wreiske/Rocket.Chat…

2f2af2f

… into wreiske-emoji-upgrades

Merge branch 'develop' of https://github.com/RocketChat/Rocket.Chat i…

ddce9a6

…nto emoji-upgrades

Merge branch 'develop' into emoji-upgrades

d93ac8e

sampaiodiego added 5 commits May 14, 2019 08:53

Merge branch 'develop' into wreiske-emoji-upgrades

4fcab89

Update category on scroll

6144dd1

Add missing emojis

812467b

Fix initial category

0e3e2b5

Update package-lock.json

d721598

sampaiodiego requested review from tassoevan and ggazzo May 14, 2019 19:40

ggazzo requested changes May 15, 2019

View reviewed changes

Merge branch 'develop' into emoji-upgrades

a37ca9f

sampaiodiego added 2 commits May 20, 2019 09:26

Merge branch 'develop' into emoji-upgrades

a14ef32

Fix reviews

17cce85

engelgabriel deployed to rocket-chat-pr-13807 May 20, 2019 13:38 View deployment

Merge branch 'develop' into emoji-upgrades

754e3bd

ggazzo approved these changes May 20, 2019

View reviewed changes

ggazzo merged commit 68feeb1 into RocketChat:develop May 20, 2019

sampaiodiego mentioned this pull request May 28, 2019

Release 1.1.0 #14653

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[IMPROVE] Upgrade EmojiOne to JoyPixels 4.5.0 #13807

[IMPROVE] Upgrade EmojiOne to JoyPixels 4.5.0 #13807

wreiske commented Mar 20, 2019 •

edited

Loading

wreiske commented Mar 20, 2019

engelgabriel commented Mar 20, 2019

rodrigok commented Mar 20, 2019

wreiske commented Mar 20, 2019 •

edited

Loading

engelgabriel commented Mar 20, 2019

wreiske commented Mar 20, 2019 •

edited

Loading

engelgabriel commented Mar 20, 2019

wreiske commented Mar 20, 2019

engelgabriel commented Mar 20, 2019

wreiske commented Mar 20, 2019 •

edited

Loading

wreiske commented Mar 21, 2019

wreiske commented Mar 22, 2019 •

edited

Loading

engelgabriel commented Mar 22, 2019

sampaiodiego commented May 14, 2019

wreiske commented May 14, 2019 •

edited

Loading

ggazzo left a comment

wreiske commented May 20, 2019

alyssais commented May 24, 2019

wreiske commented May 24, 2019 •

edited

Loading

wreiske commented Jun 13, 2019

alyssais commented Sep 4, 2019 via email

wreiske commented Sep 4, 2019

heyyo-droid commented Apr 1, 2021

[IMPROVE] Upgrade EmojiOne to JoyPixels 4.5.0 #13807

[IMPROVE] Upgrade EmojiOne to JoyPixels 4.5.0 #13807

Conversation

wreiske commented Mar 20, 2019 • edited Loading

This is READY TO MERGE!

Still TODO

Notes

wreiske commented Mar 20, 2019

engelgabriel commented Mar 20, 2019

rodrigok commented Mar 20, 2019

wreiske commented Mar 20, 2019 • edited Loading

engelgabriel commented Mar 20, 2019

wreiske commented Mar 20, 2019 • edited Loading

engelgabriel commented Mar 20, 2019

wreiske commented Mar 20, 2019

engelgabriel commented Mar 20, 2019

wreiske commented Mar 20, 2019 • edited Loading

wreiske commented Mar 21, 2019

wreiske commented Mar 22, 2019 • edited Loading

engelgabriel commented Mar 22, 2019

sampaiodiego commented May 14, 2019

wreiske commented May 14, 2019 • edited Loading

ggazzo left a comment

Choose a reason for hiding this comment

wreiske commented May 20, 2019

alyssais commented May 24, 2019

wreiske commented May 24, 2019 • edited Loading

wreiske commented Jun 13, 2019

alyssais commented Sep 4, 2019 via email

wreiske commented Sep 4, 2019

heyyo-droid commented Apr 1, 2021

wreiske commented Mar 20, 2019 •

edited

Loading

wreiske commented Mar 20, 2019 •

edited

Loading

wreiske commented Mar 20, 2019 •

edited

Loading

wreiske commented Mar 20, 2019 •

edited

Loading

wreiske commented Mar 22, 2019 •

edited

Loading

wreiske commented May 14, 2019 •

edited

Loading

wreiske commented May 24, 2019 •

edited

Loading