Render custom images in reactions #11087

sumnerevans · 2023-06-13T21:35:30Z

Type: enhancement

Implements MSC4027.

Notes: Render custom images in reactions according to MSC4027

Signed-off-by: Sumner Evans sumner@beeper.com

Checklist

Tests written for new code (and old code if feasible)
Linter and other CI checks pass
Sign-off given on the changes (see CONTRIBUTING.md)

Here's what your changelog entry will look like:

✨ Features

Render custom images in reactions according to MSC4027 (#11087). Contributed by @sumnerevans.

src/components/views/messages/ReactionsRowButton.tsx

SimonBrandner

Looks good but I think we'd prefer this under a labs flag

src/components/views/messages/ReactionsRowButtonTooltip.tsx

src/components/views/messages/ReactionsRowButton.tsx

sumnerevans · 2023-07-02T16:12:29Z

Where do I even add tests? It's complaining about not being tested, but it already wasn't tested.

SimonBrandner

Looks sane codewise!

I am going to check on Monday if this needs a product review

SimonBrandner · 2023-07-02T16:16:03Z

Where do I even add tests? It's complaining about not being tested, but it already wasn't tested.

Ah, yeah, you might need to write new tests for the code. Also, please run the yarn i18n script

JiffyCat

Overall, I think we should try to coordinate with custom emotes as an overall feature. It would be confusing to the user if only custom reactions are added to labs.

I also think since this is new feature, tests will be very helpful.

src/components/views/messages/ReactionsRowButton.tsx

SimonBrandner · 2023-07-02T20:38:10Z

Overall, I think we should try to coordinate with custom emotes as an overall feature. It would be confusing to the user if only custom reactions are added to labs.

Since labs is not meant for regular users, I don't think we care too much...

SimonBrandner

Apart from missing tests looks good codewise

I am going to request the product review

Signed-off-by: Sumner Evans <sumner@beeper.com>

SimonBrandner

Otherwise looks sane

src/components/views/messages/ReactionsRowButton.tsx

src/components/views/messages/ReactionsRowButtonTooltip.tsx

test/components/views/messages/ReactionsRowButton-test.tsx

Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>

Signed-off-by: Sumner Evans <sumner@beeper.com>

t3chguy

And update snapshots please :)

test/components/views/messages/ReactionsRowButton-test.tsx

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Signed-off-by: Sumner Evans <sumner@beeper.com>

t3chguy

This looks sane to me!

JiffyCat · 2023-08-25T00:05:11Z

A competing PR is #7903

sumnerevans · 2023-08-25T14:05:18Z

This PR does not compete with #7903 because that PR doesn't implement MSC4027. For example, that PR does not support shortcodes in the same way (it uses the shortcode rather than the MXC URI as the key). It also has no tests and is not behind a labs flag.

daniellekirkwood · 2023-09-01T10:16:16Z

Thank you for y'alls time and patience on this one.

Approving for Product 👍

@kerryarchibald

Changes in [1.11.45](https://github.com/vector-im/element-web/releases/tag/v1.11.45) (2023-09-29) ================================================================================================= ## 🐛 Bug Fixes * Fix Emoji font on Safari 17 ([\#11673](matrix-org/matrix-react-sdk#11673)). Changes in [1.11.44](https://github.com/vector-im/element-web/releases/tag/v1.11.44) (2023-09-26) ================================================================================================= ## ✨ Features * Make video & voice call buttons pin conference widget if unpinned ([\#11576](matrix-org/matrix-react-sdk#11576)). Fixes vector-im/customer-retainer#72. * OIDC: persist refresh token ([\#11249](matrix-org/matrix-react-sdk#11249)). Contributed by @kerryarchibald. * ElementR: Cross user verification ([\#11364](matrix-org/matrix-react-sdk#11364)). Fixes #25752. Contributed by @florianduros. * Default intentional mentions ([\#11602](matrix-org/matrix-react-sdk#11602)). * Notify users about denied access on ask-to-join rooms ([\#11480](matrix-org/matrix-react-sdk#11480)). Contributed by @nurjinjafar. * Allow setting knock room directory visibility ([\#11529](matrix-org/matrix-react-sdk#11529)). Contributed by @charlynguyen. ## 🐛 Bug Fixes * Revert "Fix regression around FacePile with overflow (#11527)" ([\#11634](matrix-org/matrix-react-sdk#11634)). Fixes #26209. * Escape placeholder before injecting it into the style ([\#11607](matrix-org/matrix-react-sdk#11607)). * Move ViewUser action callback to RoomView ([\#11495](matrix-org/matrix-react-sdk#11495)). Fixes #26040. * Fix room timeline search toggling behaviour edge case ([\#11605](matrix-org/matrix-react-sdk#11605)). Fixes #26105. * Avoid rendering view-message link in RoomKnocksBar unnecessarily ([\#11598](matrix-org/matrix-react-sdk#11598)). Contributed by @charlynguyen. * Use knock rooms sync to reflect the knock state ([\#11596](matrix-org/matrix-react-sdk#11596)). Fixes #26043 and #26044. Contributed by @charlynguyen. * Fix avatar in right panel not using the correct font ([\#11593](matrix-org/matrix-react-sdk#11593)). Fixes #26061. Contributed by @MidhunSureshR. * Add waits in Spotlight Cypress tests, hoping this unflakes them ([\#11590](matrix-org/matrix-react-sdk#11590)). Fixes #26053, #26140 #26139 and #26138. Contributed by @andybalaam. * Fix vertical alignment of default avatar font ([\#11582](matrix-org/matrix-react-sdk#11582)). Fixes #26081. * Fix avatars in public room & space search being flex shrunk ([\#11580](matrix-org/matrix-react-sdk#11580)). Fixes #26133. * Fix EventTile avatars being rendered with a size of 0 instead of hidden ([\#11558](matrix-org/matrix-react-sdk#11558)). Fixes #26075. Changes in [1.11.43](https://github.com/vector-im/element-web/releases/tag/v1.11.43) (2023-09-15) ================================================================================================= (No changes - bumping the version number for an element-desktop release.) Changes in [1.11.42](https://github.com/vector-im/element-web/releases/tag/v1.11.42) (2023-09-13) ================================================================================================= ## 🐛 Bug Fixes * Update Compound to fix Firefox-specific avatar regression ([\#11604](matrix-org/matrix-react-sdk#11604)). Fixes #26155. Changes in [1.11.41](https://github.com/vector-im/element-web/releases/tag/v1.11.41) (2023-09-12) ================================================================================================= ## 🦖 Deprecations * Deprecate customisations in favour of Module API ([\#25736](element-hq/element-web#25736)). Fixes #25733. ## ✨ Features * Make SVGR icons use forward ref ([\#26082](element-hq/element-web#26082)). * Add support for rendering a custom wrapper around Element ([\#25537](element-hq/element-web#25537)). Contributed by @maheichyk. * Allow creating public knock rooms ([\#11481](matrix-org/matrix-react-sdk#11481)). Contributed by @charlynguyen. * Render custom images in reactions according to MSC4027 ([\#11087](matrix-org/matrix-react-sdk#11087)). Contributed by @sumnerevans. * Introduce room knocks bar ([\#11475](matrix-org/matrix-react-sdk#11475)). Contributed by @charlynguyen. * Room header UI updates ([\#11507](matrix-org/matrix-react-sdk#11507)). Fixes #25892. * Remove green "verified" bar for encrypted events ([\#11496](matrix-org/matrix-react-sdk#11496)). * Update member count on room summary update ([\#11488](matrix-org/matrix-react-sdk#11488)). * Support for E2EE in Element Call ([\#11492](matrix-org/matrix-react-sdk#11492)). * Allow requesting to join knock rooms via spotlight ([\#11482](matrix-org/matrix-react-sdk#11482)). Contributed by @charlynguyen. * Lock out the first tab if Element is opened in a second tab. ([\#11425](matrix-org/matrix-react-sdk#11425)). Fixes #25157. * Change avatar to use Compound implementation ([\#11448](matrix-org/matrix-react-sdk#11448)). ## 🐛 Bug Fixes * Fix vertical alignment of default avatar font ([\#11582](matrix-org/matrix-react-sdk#11582)). Fixes #26081. * Fix avatars in public room & space search being flex shrunk ([\#11580](matrix-org/matrix-react-sdk#11580)). Fixes #26133. * Fix EventTile avatars being rendered with a size of 0 instead of hidden ([\#11558](matrix-org/matrix-react-sdk#11558)). Fixes #26075. * Fix compound external assets path in bundle ([\#26069](element-hq/element-web#26069)). * Use RoomStateEvent.Update for knocks ([\#11516](matrix-org/matrix-react-sdk#11516)). Contributed by @charlynguyen. * Prevent event propagation when clicking icon buttons ([\#11515](matrix-org/matrix-react-sdk#11515)). * Only display RoomKnocksBar when feature flag is enabled ([\#11513](matrix-org/matrix-react-sdk#11513)). Contributed by @andybalaam. * Fix avatars of knock members for people tab of room settings ([\#11506](matrix-org/matrix-react-sdk#11506)). Fixes #26083. Contributed by @charlynguyen. * Fixes read receipt avatar offset ([\#11483](matrix-org/matrix-react-sdk#11483)). Fixes #26067, #26064 #26059 and #26061. * Fix avatar defects ([\#11473](matrix-org/matrix-react-sdk#11473)). Fixes #26051 and #26046. * Fix consistent avatar output for Percy ([\#11472](matrix-org/matrix-react-sdk#11472)). Fixes #26049 and #26052. * Fix colour of avatar and colour matching with username ([\#11470](matrix-org/matrix-react-sdk#11470)). Fixes #26042. * Fix incompatibility of Soft Logout with Element-R ([\#11468](matrix-org/matrix-react-sdk#11468)). * Fix instances of double translation and guard translation calls using typescript ([\#11443](matrix-org/matrix-react-sdk#11443)).

github-actions bot added the Z-Community-PR Issue is solved by a community member's PR label Jun 13, 2023

sumnerevans mentioned this pull request Jun 13, 2023

MSC4027: Propose method of specifying custom images in reactions matrix-org/matrix-spec-proposals#4027

Open

github-actions bot deployed to Netlify June 13, 2023 21:40 View deployment

anoadragon453 reviewed Jun 16, 2023

View reviewed changes

src/components/views/messages/ReactionsRowButton.tsx Outdated Show resolved Hide resolved

github-actions bot deployed to Netlify June 30, 2023 17:30 View deployment

github-actions bot deployed to Netlify June 30, 2023 18:15 View deployment

sumnerevans force-pushed the msc4027-custom-images-in-reactions branch from 282b711 to 4c230f7 Compare June 30, 2023 18:20

github-actions bot added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Jun 30, 2023

github-actions bot deployed to Netlify June 30, 2023 18:25 View deployment

sumnerevans force-pushed the msc4027-custom-images-in-reactions branch from 4c230f7 to 656ab4e Compare June 30, 2023 18:28

github-actions bot deployed to Netlify June 30, 2023 18:33 View deployment

sumnerevans force-pushed the msc4027-custom-images-in-reactions branch from 656ab4e to 0578e03 Compare June 30, 2023 18:40

github-actions bot deployed to Netlify June 30, 2023 18:45 View deployment

sumnerevans force-pushed the msc4027-custom-images-in-reactions branch from 0578e03 to 8369256 Compare June 30, 2023 22:18

github-actions bot deployed to Netlify June 30, 2023 22:23 View deployment

sumnerevans marked this pull request as ready for review June 30, 2023 22:33

sumnerevans requested a review from a team as a code owner June 30, 2023 22:33

sumnerevans requested review from dbkr and SimonBrandner June 30, 2023 22:33

SimonBrandner reviewed Jul 2, 2023

View reviewed changes

src/components/views/messages/ReactionsRowButtonTooltip.tsx Outdated Show resolved Hide resolved

src/components/views/messages/ReactionsRowButton.tsx Outdated Show resolved Hide resolved

src/components/views/messages/ReactionsRowButton.tsx Outdated Show resolved Hide resolved

github-actions bot deployed to Netlify July 2, 2023 15:47 View deployment

SimonBrandner approved these changes Jul 2, 2023

View reviewed changes

github-actions bot deployed to Netlify July 2, 2023 16:14 View deployment

JiffyCat suggested changes Jul 2, 2023

View reviewed changes

src/components/views/messages/ReactionsRowButton.tsx Outdated Show resolved Hide resolved

github-actions bot deployed to Netlify July 2, 2023 20:56 View deployment

github-actions bot deployed to Netlify July 2, 2023 21:19 View deployment

SimonBrandner approved these changes Jul 3, 2023

View reviewed changes

sumnerevans requested a review from anoadragon453 August 16, 2023 04:51

Add test for ReactionsRowButton

53e9eda

Signed-off-by: Sumner Evans <sumner@beeper.com>

sumnerevans force-pushed the msc4027-custom-images-in-reactions branch from 068a293 to 53e9eda Compare August 16, 2023 05:03

github-actions bot deployed to Netlify August 16, 2023 05:09 View deployment

SimonBrandner reviewed Aug 16, 2023

View reviewed changes

anoadragon453 requested review from JiffyCat and removed request for anoadragon453 and JiffyCat August 16, 2023 17:01

Apply suggestions from code review

1ab97d3

Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>

github-actions bot deployed to Netlify August 16, 2023 21:44 View deployment

Don't use Optional

3845d29

Signed-off-by: Sumner Evans <sumner@beeper.com>

github-actions bot deployed to Netlify August 16, 2023 21:52 View deployment

t3chguy suggested changes Aug 18, 2023

View reviewed changes

test/components/views/messages/ReactionsRowButton-test.tsx Outdated Show resolved Hide resolved

test/components/views/messages/ReactionsRowButton-test.tsx Outdated Show resolved Hide resolved

Fix ReactionsRowButton test

acae684

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Signed-off-by: Sumner Evans <sumner@beeper.com>

sumnerevans force-pushed the msc4027-custom-images-in-reactions branch from 3d5cd31 to acae684 Compare August 18, 2023 20:43

sumnerevans requested a review from t3chguy August 18, 2023 20:43

github-actions bot deployed to Netlify August 18, 2023 20:47 View deployment

t3chguy approved these changes Aug 21, 2023

View reviewed changes

Johennes mentioned this pull request Sep 1, 2023

Render image data in reactions #7903

Closed

daniellekirkwood approved these changes Sep 1, 2023

View reviewed changes

t3chguy added this pull request to the merge queue Sep 1, 2023

Merged via the queue into matrix-org:develop with commit a54f2ff Sep 1, 2023
16 checks passed

sumnerevans deleted the msc4027-custom-images-in-reactions branch September 1, 2023 20:40

SpiritCroc mentioned this pull request Sep 5, 2023

[FEATURE REQUEST] Add support for parsing mxc urls as images in reactions SchildiChat/schildichat-desktop#208

Closed

estellecomment mentioned this pull request Sep 29, 2023

Upgrade to element-web 1.11.44 tchapgouv/tchap-web-v4#734

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Render custom images in reactions #11087

Render custom images in reactions #11087

sumnerevans commented Jun 13, 2023 •

edited by github-actions bot

Loading

SimonBrandner left a comment

sumnerevans commented Jul 2, 2023

SimonBrandner left a comment

SimonBrandner commented Jul 2, 2023

JiffyCat left a comment •

edited

Loading

SimonBrandner commented Jul 2, 2023

SimonBrandner left a comment

SimonBrandner left a comment

t3chguy left a comment

t3chguy left a comment

JiffyCat commented Aug 25, 2023

sumnerevans commented Aug 25, 2023 •

edited

Loading

daniellekirkwood commented Sep 1, 2023

Render custom images in reactions #11087

Render custom images in reactions #11087

Conversation

sumnerevans commented Jun 13, 2023 • edited by github-actions bot Loading

Checklist

✨ Features

SimonBrandner left a comment

Choose a reason for hiding this comment

sumnerevans commented Jul 2, 2023

SimonBrandner left a comment

Choose a reason for hiding this comment

SimonBrandner commented Jul 2, 2023

JiffyCat left a comment • edited Loading

Choose a reason for hiding this comment

SimonBrandner commented Jul 2, 2023

SimonBrandner left a comment

Choose a reason for hiding this comment

SimonBrandner left a comment

Choose a reason for hiding this comment

t3chguy left a comment

Choose a reason for hiding this comment

t3chguy left a comment

Choose a reason for hiding this comment

JiffyCat commented Aug 25, 2023

sumnerevans commented Aug 25, 2023 • edited Loading

daniellekirkwood commented Sep 1, 2023

sumnerevans commented Jun 13, 2023 •

edited by github-actions bot

Loading

JiffyCat left a comment •

edited

Loading

sumnerevans commented Aug 25, 2023 •

edited

Loading