revoltchat / rvmob

React Native Revolt client. Community-led project.
https://rvlt.gg/rvmob
GNU Affero General Public License v3.0
115 stars 17 forks source link

feat: render custom emoji #24

Closed account0123 closed 10 months ago

account0123 commented 11 months ago

FastImage does not render svg file, then react-native-svg is imported. renderEmojis function is called inside spoilerRule because if I create a new rule object there is a conflict.

How renderEmojis work?

  1. renderEmojis splits content by custom emoji regex i. Odd elements... are :ULID: then return as CustomEmoji ii. Even elements is splitted by default emoji regex (eg: :smile:) and mapped:

    • Odd elements are :name: then return as SvgEmoji
    • Even elements are strings

    iii. subparts flatmaps, each component is returned, each string is inspected for unicode characters search.

    1. If there are, characters are mapped as SvgEmoji, the array is interleaved with Text components and returns

    iv. Finally subparts (string|SvgEmoji array) is returned in tokens flat map.

  2. At the end, elements can be a string array (no emojis found) or a string|Text|SvgEmoji|CustomEmoji array (at least one emoji found).

Please make sure to check the following tasks before opening and submitting a PR

Rexogamer commented 11 months ago

One other thing that came to mind: while I'm happy to add support for the various packs (something Revkit also helps with), I also want to give the user the ability to use their system's emoji font so we might want to add a new setting for this and not render them if said setting = system

Rexogamer commented 11 months ago

Something I've also noticed is that messages take a lot longer to render and the client seems to disconnect/break more (presumably due to the amount of images it has to fetch); however, I'm not 100% sure how we could realistically solve this unless we bundle every emoji SVG with the app :thinking:

Rexogamer commented 10 months ago

(for external readers: we decided to comment out the built-in emoji renderer for now and just render custom emoji)