Render image data in reactions

[AndrewRyanChama]

Many messaging services such as Slack and Discord allow for custom images for reacts, rather than only standard emoji. Currently Element will only show the plain text of the reaction key.

This PR updates element to render the media content from reaction events. This does not add a way for users to add custom reactions yet.

This can be useful in the case of bots and bridges, which will be able to immediately use this functionality. A picker for Element users will be added in the future.

This is a solution to vector-im/element-meta#339

Similarly to stickers, the event type should simply be sent with an image content, and it will be displayed appropriately. For example

 "content": {
    "body": "parrot.gif",
    "info": {
      "size": 15010,
      "mimetype": "image/gif",
      "w": 128,
      "h": 128,
      "xyz.amorgan.blurhash": "UKFg2,Ef0f-V0es:}tR*wf$*xZNH$*NaI:bH"
    },
    "url": "mxc://localhost:8008/zyCSlBnBTQCxhTFDEDNpNobe",
    "m.relates_to": {
      "rel_type": "m.annotation",
      "event_id": "$FqS1dRW7gMe_JhXNSBUy2ApAQNMQ4IL-vywYNqbXRlA",
      "key": ":partyparrot:"
    }
  },

Signed-off-by: Andrew Ryan [email protected]

Original behavior / fallback: Updated to display image:

---

Here's what your changelog entry will look like:

✨ Features

• Render image data in reactions (#7903). Contributed by @AndrewRyanChama.

[AndrewRyanChama]

This change doesn't conflict and is compatible with either https://github.com/matrix-org/matrix-doc/pull/1951 or https://github.com/matrix-org/matrix-doc/pull/2545, as both those deal mainly with distributing packs of images and don't cover reactions at all.

I can still put together an msc for this since it might help to make this explicit

[williamkray]

would it be possible to put this and https://github.com/matrix-org/matrix-react-sdk/pull/8087 behind a labs flag or something so that the people who are itching for this can enable, with the understanding that the work is still being finalized from the spec and product side?

i would love to be able to share with my users that the feature they've been asking for for the last 2+ years is at least making progress, even if it's preliminary. using labs flags seems like a pretty common use case for early implementation of non-finalized spec feature testing in element.

[Johennes]

Thank you for your contribution. @daniellekirkwood and I synced up today and have decided to proceed with https://github.com/matrix-org/matrix-react-sdk/pull/11087. I'm closing this pull request because it largely achieves the same thing but has the downside of using the short code as key which has already been criticized in https://github.com/matrix-org/matrix-spec-proposals/pull/3746/files#r866285147.