Giphy integration #5814

panagiotis-c · 2021-03-27T19:49:49Z

First of all, this needs a lot of input from product and design.

Flow

I created a new button in MessageComposer, next to the emoji picker and the sticker picker.

I consume the Giphy API for search results, which should be better than the SDK due to privacy concerns, and possible changes in the future.

I display the GIF search results in an one-column list.

I added an option in labs for showing the GIF picker.

I send the GIF as an attachment. Another option is to just send the url, but previews generated by the server have some issues currently and it doesn't work: matrix-org/synapse#1278

TODO

PR for documentation in labs.md: element-hq/element-web#16808

Related issue: element-hq/element-web#2693

Signed-off-by: Panagiotis Chalimourdas [email protected]

Here's what your changelog entry will look like:

✨ Features

Giphy integration (#5814). Fixes Add support for a GIF keyboard / ability to easily send GIFs element-hq/element-meta#321. Contributed by @panoschal.

Preview: https://613dd49f7161e91e7bfbfbbf--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

create a new menu in MessageComposer, next to emoji picker and sticker picker consume the Giphy API display the GIF search results in an one-column list add option in settings for showing the GIF picker

SimonBrandner · 2021-03-27T20:01:08Z

First off, this is awesome :D

Fixes #415

add option in labs?

I am pretty sure that will be required

add showConfirmationDialogs option to sendContentListToRoom so we can use the same function for directly uploading GIFs without displaying a confirmation dialog every time

add translations show mp4 version in preview, for smaller file sizes better handling for throttling requests and lazy loading list cancel promises on unmount

ShadowJonathan · 2021-03-29T08:50:28Z

Why is this in matrix-react-sdk? I see this purely as an addition to matrix in the regards of Element, so this should (in my opinion) only be implemented from element-web.

I think there's a bit of a separation-of-concerns issue here.

jryans · 2021-03-30T10:30:24Z

Why is this in matrix-react-sdk? I see this purely as an addition to matrix in the regards of Element, so this should (in my opinion) only be implemented from element-web.

I think there's a bit of a separation-of-concerns issue here.

Hmm, it's a bit unclear perhaps. I think we should first review the product fit here, and from there we can work out the proper home for the code.

kojid0 · 2021-03-31T07:22:43Z

Why not use the sidebar? There is enough space to display many things more clearly than in a small window. This also applies to emoji and stickers... GIFs could be the first to support sidebar accesibility, with Emoji and Sticker implemented later.

SimonBrandner · 2021-03-31T07:41:47Z

Why not use the sidebar? There is enough space to display many things more clearly than in a small window. This also applies to emoji and stickers... GIFs could be the first to support sidebar accesibility, with Emoji and Sticker implemented later.

This wouldn't match the current design... So if this change were to be implemented, it should in bulk with emojis and stickers. This is ultimately up to the design team to decide. I remember there being an issue about this, but I can't find it

panagiotis-c · 2021-03-31T09:42:50Z

There is this issue element-hq/element-web#16180 and this one element-hq/element-web#2693 (comment)

If we keep it like it is right now (without the sidebar), we can also make the popup panel bigger and have two columns of gifs.

tsukasagenesis · 2021-05-22T16:48:22Z

nice feature ! can't wait to get it integrated !

annie-elequin · 2021-06-30T20:45:28Z

src/components/views/gifpicker/GifPicker.tsx

+import { DebouncedFunc, throttle, uniqBy } from "lodash";
+import { Gif } from "./Gif";
+
+const API_KEY = "hhMBhTnD7k8BgyoZCM9UNM1vRsPcgzaC";


This probably shouldn't be checked into git.
Unrelated though, this work is amazing :)

Thanks!

This is a public key so it is not a security issue, as the request will be done client-side and anyone can inspect it.
Giphy/giphy-js#120 (comment)

If this is approved by the product team a production key is needed in order to increase the limits by Giphy.

t3chguy · 2021-07-01T07:24:51Z

Removing review as PR is a draft

panagiotis-c · 2021-07-01T12:40:07Z

Removing review as PR is a draft

@t3chguy this needs feedback by the product team in order to continue development, so should I mark it as ready for review?

t3chguy · 2021-07-01T13:11:57Z

Yes, draft means still work in progress, not ready for review.

panagiotis-c · 2021-07-01T13:50:09Z

I will wait for feedback, then, before proceeding with improvements because the feature may not be desired in this place in the codebase.

erAck · 2021-07-16T21:07:45Z

If this hits product then please

make it a preference option
have it disabled per default
have it disabled per default for recipients (i.e. do not display the gif unless enabled)
finally have a way to fold away images in rooms

Reason is that animated gifs are utterly distracting, easily get on the nerves and unnecessarily consume CPU and power .
Also, images in general take too much space in the timeline, which the last bullet point would take care of.

Additionally, Giphy is privacy invading as the client's IP and search ends up with Facebook that as we all know will collect everything it can get its hands on.

I actually wish this will never get implemented.

seanfarley · 2021-07-29T00:11:14Z

If this hits product then please

make it a preference option

have it disabled per default

have it disabled per default for recipients (i.e. do not display the gif unless enabled)

finally have a way to fold away images in rooms

Reason is that animated gifs are utterly distracting, easily get on the nerves and unnecessarily consume CPU and power .
Also, images in general take too much space in the timeline, which the last bullet point would take care of.

Additionally, Giphy is privacy invading as the client's IP and search ends up with Facebook that as we all know will collect everything it can get its hands on.

I actually wish this will never get implemented.

Tell me you're a toxic dev without telling me you're a toxic dev.

DoM1niC · 2021-09-04T15:15:20Z

@panoschal can you fix the conflicts PLZ :) I wanne use this in my Fork

panagiotis-c · 2021-09-12T10:25:21Z

I fixed the conflicts @DoM1niC

DoM1niC · 2021-09-12T10:56:12Z

Nice and THX I will try it out soon 😊😊

turt2live

Thanks for the PR! This is quite a large chunk of functionality that, as you noted, needs design + product review. I'm mostly leaving this comment to clear the automatic code review request that github will insist on while we wait for review (given code review on something this size before design looks at it can be detrimental to progress).

Something I did notice is that the new files are missing copyright/license headers - these should be added to ensure everything is all squared away :)

gaelledel

Hi there, thank you for your work on this!

I have reviewed it and would like to propose the following changes available on Figma here https://www.figma.com/file/ifIvZA4XIP1JTyndHFr5Ub/?node-id=10%3A7689

I have added behaviour specs for you but if you have any additional question, just ping me here and I'll get back to you.

panagiotis-c · 2021-10-22T16:05:59Z

Great, I will try to implement these improvements soon.

gaelledel · 2021-10-26T13:52:36Z

@panoschal Thanks a lot for helping out on this!
Just to let you know that we're actually having more conversations around technical feasibility of this internally so I'd suggest to hold off until we get those clarifications sorted.
@t3chguy @jakewb-b FYI

DoM1niC · 2021-11-05T20:18:04Z

Great, I will try to implement these improvements soon.

needs threads support the Composer isn't upload the gif there... :(

update the fully Merge is broken after last Commits in ContentMessages.tsx

nnuel · 2021-12-19T21:25:41Z

Just tested, I like the uploading feature, and would also second the two-column lay-out.

williamkray · 2022-01-23T16:48:46Z

Rather than including the giphy api key in the code, this should be something users can fill in, or a config value pulled from the element-web config.json.

If the value is not supplied, the feature should be hidden/nonfunctional.

arkitoure · 2022-03-06T12:58:08Z

What's the status of this integration? Just throwing this out into the ether...how about selectable support for other gif platforms?

tenor.com
gifer.com
gfycat.com
duckduckgo gif search

Beyond tenor, this could address privacy concerns for some?

floviolleau · 2022-05-16T22:03:59Z

Hi,

Any news on this awesome integration ready to fly?

Thanks!

iceHtwoO · 2022-05-27T12:16:13Z

Hi,
due to this PR not being updated, I have started developing a solution myself.
It should be ready in a few days.

https://github.com/iceHtwoO/matrix-react-sdk/tree/feature/gifpicker_integration

panagiotis-c · 2022-05-27T15:41:31Z

Hello, @gaelledel you mentioned that there were technical considerations around this, did you have any update?

@panoschal Thanks a lot for helping out on this! Just to let you know that we're actually having more conversations around technical feasibility of this internally so I'd suggest to hold off until we get those clarifications sorted. @t3chguy @jakewb-b FYI

turt2live · 2022-05-28T17:57:47Z

Thank you for working on this, however per element-hq/element-meta#321 (comment) I don't think we can safely keep this sort of change open. The feature requires design and product review and is generally quite large in size - we might try to take the work on ourselves if/when product/design get a chance to take a look.

khazaddum · 2022-09-01T14:47:21Z

I conviced my family to switch to a Matrix homeserver and Element, and their first question was "how do I send GIFs?"

CRCinAU · 2023-02-13T06:33:23Z

Did this ever get anywhere?

Or has it become a wasteland where PRs go to die?

iceHtwoO · 2023-02-13T06:39:37Z

Did this ever get anywhere?

Or has it become a wasteland where PRs go to die?

This is sadly going no where, you can find more information in the following issue. There have been multiple attempts to integrate the feature.

WesLee91 · 2023-09-29T13:39:13Z

Anyone know of any Matrix client that has giphy integration?

feat: create components for Giphy integration

07f14f8

create a new menu in MessageComposer, next to emoji picker and sticker picker consume the Giphy API display the GIF search results in an one-column list add option in settings for showing the GIF picker

panagiotis-c marked this pull request as draft March 27, 2021 20:00

panagiotis-c added 4 commits March 28, 2021 13:19

add a simple svg icon for GIF

467ed3b

add Giphy integration to labs

2d0d4a5

make "confirm upload" dialog optional

c92779f

add showConfirmationDialogs option to sendContentListToRoom so we can use the same function for directly uploading GIFs without displaying a confirmation dialog every time

feat: improve giphy integration:

2a1b503

add translations show mp4 version in preview, for smaller file sizes better handling for throttling requests and lazy loading list cancel promises on unmount

jryans requested review from a team March 30, 2021 10:30

annie-elequin reviewed Jun 30, 2021

View reviewed changes

t3chguy removed request for a team July 1, 2021 07:24

panagiotis-c marked this pull request as ready for review July 1, 2021 13:46

t3chguy requested review from a team July 1, 2021 13:54

J-tt mentioned this pull request Jul 28, 2021

Add support for a GIF keyboard / ability to easily send GIFs element-hq/element-meta#321

Open

panagiotis-c mentioned this pull request Aug 19, 2021

Document Giphy integration element-hq/element-web#16808

Closed

MadLittleMods added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Aug 24, 2021

panagiotis-c added 2 commits September 12, 2021 12:41

Merge branch 'develop' into feat/giphy-integration

9544d02

gif picker: fix types

19a5381

panagiotis-c requested a review from a team as a code owner September 12, 2021 10:10

i18n strings

72d0c94

turt2live reviewed Sep 14, 2021

View reviewed changes

nadonomy assigned nadonomy and gaelledel and unassigned nadonomy Oct 19, 2021

gaelledel suggested changes Oct 22, 2021

View reviewed changes

iceHtwoO mentioned this pull request May 28, 2022

Include GifPicker for chat #8712

Closed

7 tasks

turt2live closed this May 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Giphy integration #5814

Giphy integration #5814

panagiotis-c commented Mar 27, 2021 •

edited by github-actions bot

Loading

SimonBrandner commented Mar 27, 2021

ShadowJonathan commented Mar 29, 2021

jryans commented Mar 30, 2021 •

edited

Loading

kojid0 commented Mar 31, 2021

SimonBrandner commented Mar 31, 2021

panagiotis-c commented Mar 31, 2021 •

edited

Loading

tsukasagenesis commented May 22, 2021

annie-elequin Jun 30, 2021

panagiotis-c Jun 30, 2021

t3chguy commented Jul 1, 2021

panagiotis-c commented Jul 1, 2021

t3chguy commented Jul 1, 2021

panagiotis-c commented Jul 1, 2021 •

edited

Loading

erAck commented Jul 16, 2021

seanfarley commented Jul 29, 2021

DoM1niC commented Sep 4, 2021

panagiotis-c commented Sep 12, 2021

DoM1niC commented Sep 12, 2021

turt2live left a comment

gaelledel left a comment

panagiotis-c commented Oct 22, 2021

gaelledel commented Oct 26, 2021

DoM1niC commented Nov 5, 2021 •

edited

Loading

nnuel commented Dec 19, 2021

williamkray commented Jan 23, 2022

arkitoure commented Mar 6, 2022 •

edited

Loading

floviolleau commented May 16, 2022

iceHtwoO commented May 27, 2022 •

edited

Loading

panagiotis-c commented May 27, 2022

turt2live commented May 28, 2022

khazaddum commented Sep 1, 2022

CRCinAU commented Feb 13, 2023

iceHtwoO commented Feb 13, 2023

WesLee91 commented Sep 29, 2023 •

edited

Loading

Giphy integration #5814

Giphy integration #5814

Conversation

panagiotis-c commented Mar 27, 2021 • edited by github-actions bot Loading

Flow

TODO

✨ Features

SimonBrandner commented Mar 27, 2021

ShadowJonathan commented Mar 29, 2021

jryans commented Mar 30, 2021 • edited Loading

kojid0 commented Mar 31, 2021

SimonBrandner commented Mar 31, 2021

panagiotis-c commented Mar 31, 2021 • edited Loading

tsukasagenesis commented May 22, 2021

annie-elequin Jun 30, 2021

Choose a reason for hiding this comment

panagiotis-c Jun 30, 2021

Choose a reason for hiding this comment

t3chguy commented Jul 1, 2021

panagiotis-c commented Jul 1, 2021

t3chguy commented Jul 1, 2021

panagiotis-c commented Jul 1, 2021 • edited Loading

erAck commented Jul 16, 2021

seanfarley commented Jul 29, 2021

DoM1niC commented Sep 4, 2021

panagiotis-c commented Sep 12, 2021

DoM1niC commented Sep 12, 2021

turt2live left a comment

Choose a reason for hiding this comment

gaelledel left a comment

Choose a reason for hiding this comment

panagiotis-c commented Oct 22, 2021

gaelledel commented Oct 26, 2021

DoM1niC commented Nov 5, 2021 • edited Loading

nnuel commented Dec 19, 2021

williamkray commented Jan 23, 2022

arkitoure commented Mar 6, 2022 • edited Loading

floviolleau commented May 16, 2022

iceHtwoO commented May 27, 2022 • edited Loading

panagiotis-c commented May 27, 2022

turt2live commented May 28, 2022

khazaddum commented Sep 1, 2022

CRCinAU commented Feb 13, 2023

iceHtwoO commented Feb 13, 2023

WesLee91 commented Sep 29, 2023 • edited Loading

panagiotis-c commented Mar 27, 2021 •

edited by github-actions bot

Loading

jryans commented Mar 30, 2021 •

edited

Loading

panagiotis-c commented Mar 31, 2021 •

edited

Loading

panagiotis-c commented Jul 1, 2021 •

edited

Loading

DoM1niC commented Nov 5, 2021 •

edited

Loading

arkitoure commented Mar 6, 2022 •

edited

Loading

iceHtwoO commented May 27, 2022 •

edited

Loading

WesLee91 commented Sep 29, 2023 •

edited

Loading