Emoji picker in the chat

[nickvergessen]

Specs are rather light.

We don't want to create a beast here, just help people with a dedicated Emoji input option.
Second step: solution how to display emojis when no emoji font is installed.

[mario]

See here for my suggestion to this problem: nextcloud/server#10293

Then we could standardize the look of it across platforms and @jancborchardt seems to agree.

[Ozzie76]

Just did a pilot and this came up as one of the 2 missing features on mobile apps.

[jancborchardt]

So @juliushaertl implemented the emoji picker for the Social app using Twemoji (which we want to use globally). The pull request is at nextcloud/social#18, and maybe Julius has some additional insight there.

The look is great, and position at the right inside of the input field too. We could standardize it like that @nextcloud/designers

[skjnldsv]

Surprise surprise: https://github.com/DCzajkowski/vue-emoji-picker && https://github.com/jkchao/vue-emoji
https://codepen.io/DCzajkowski/pen/jzLzWp

[nickvergessen]

So blocked by #1347

[juliusknorr]

We also should ship the emoji assets with the server so we don't have the images duplicate in every app.

[simonspa]

I'd be interested to work on this but I fear I would need some guidance. Where would this emoji picker go? A new Vue component in nextcloud-vue which can be re-used by spreed but also for comments etc?

[jancborchardt]

cc @ma12-co @skjnldsv @juliushaertl for guidance there. I would assume a Vue component indeed, because we do have an emoji picker in the Social app already cc @violoncelloCH

[marcoambrosini]

Hi @simonspa, thank you for considering this :)
Let's see which libraries are available for vue and discuss which one suits our needs the best. @violoncelloCH which one did you use?
The code is here: https://github.com/nextcloud/spreed/blob/master/src/components/NewMessageForm/NewMessageForm.vue
Also, please join our development chat https://cloud.nextcloud.com/call/c7fz9qpr if you need any help

[simonspa]

After some discussion in the chat it looks like https://www.npmjs.com/package/emoji-mart-vue-fast is the most promising candidate. I'll go ahead and play a bit with it and see where I get with it.

[skjnldsv]

License: BSD-3-Clause
Not sure we can, not familiar with this license!

[simonspa]

Certainly far from being an expert, but this is what GNU has to say about it:

Modified BSD license (#ModifiedBSD)
This is the original BSD license, modified by removal of the advertising clause. It is a lax, permissive non-copyleft free software license, compatible with the GNU GPL.

GNU Affero General Public License (AGPL) version 3
This is a free software, copyleft license. Its terms effectively consist of the terms of GPLv3

https://www.gnu.org/licenses/license-list.html

It would be more of a problem in the reverse case (NC being BSD, component being *GPL) I guess.

[mario]

BSD is one of the most permissive licences. We can definitely use it.

[nickvergessen]

Confirmed by @schiessle we can use it

[violoncelloCH]

at least the original implementation of the emoji picker in social was done by @juliushaertl ... there we use vue-emoji-picker -- see here: https://github.com/nextcloud/social/blob/52398387c5f062a34dcdd379243c6589aa89f47f/src/components/Composer.vue#L55-L81
I guess it would make sense to implement this as a reusable vue-component, so we can use the same one in all places?

[nickvergessen]

I guess it would make sense to implement this as a reusable vue-component, so we can use the same one in all places?

Yes, we had a quick chat about it this morning. It will be added in the @nextcloud/vue package

[nickvergessen]

@simonspa any progress? :)

[simonspa]

Yes, some, I started writing the component but then didn't have enough time to finish it. I might have the next days though - and I might hang around in the community chat to ask noob questions about Vue. :)

[georgehrke]

@simonspa Could you give me quick status update on the emoji picker? I need one for nextcloud/server#21186

If you need help or have any questions, please don't hesitate to ask. :)

[nickvergessen]

Done via #3994