Discourse Gifs component

theme
#1

Repository at https://github.com/discourse/discourse-gifs.git

https://github.com/discourse/discourse-gifs.git

Installation instructions: How do I install a Theme or Theme Component?.

After installing you need to change a site setting. This is mandatory.

Discourse Gifs

This theme component add a button to the composer that allows you to search for gifs and easily add the best one to your post.

image
image708Ă—201 13.3 KB

image
image940Ă—555 117 KB

Clicking one one inserts it on your current composer, which looks like:

Details

This is heavily based on a old fork of ReplyGif: Adding reaction GIF easily, so thanks to @cpradio. The big differences are:

  • It uses videos instead of gifs, so it’s a lot more efficient for bandwidth.

  • It is a theme-component, so it is way easier to install and update.

  • It uses the Tenor API

  • No need to fiddle with nginx to setup a proxy for HTTPS

To Do

  • Infinite Scrolling for results
50 Likes
Should Discourse convert GIFs to mp4 video files?
#2

Installed :+1:

(twenty characters)

2 Likes
#3

Nice! I was using the other version of this, I will give this one a shot.

4 Likes
#4

Just added a custom icon in the composer and enabled it here on Meta.

6 Likes
#6

It’s been working well for me. Loads faster than the other one. It doesn’t allow you to scroll through a larger selection of GIFs like the other one did, I assume that’s one of the reasons it loads faster. That’s ok because I prefer the faster load speed over the unlimited selection of GIFs.

4 Likes
#7

It loads faster because it uses a way more efficient format than the other. The preview window also uses a smaller resolution than the ones that end up in the composer. We also set static posters while it’s loading. It’s a couple of techniques to make all faster.

Regarding having more options, we have the logic and API ready to allow for infinite scrolling just need to get the UI in place.

9 Likes
#8

Hi @Falco,

Thank you for this component seems pretty cool :sunglasses:.

Works great on desktop but is that possible to make it more friendly on mobile view especially on iOS?

I don’t test it on android yet.

iOS: because it’s mp4 it open all gif on result sometimes the gif on result gone black background and not playable.
The posted gifs not moving… it shows only an image.

2 Likes
#9

Yeah @pmusaraj just reported this to me. iOS is sure weird. On desktop and android it works well. Will try to fix what iOS is doing.

7 Likes
#10

3 Likes
#11

@dodesz It is fixed on iOS on the iPhone now. The fix only affects new videos, so you may need to edit old posts.

The fix doesn’t work on newer iPadOS devices yet. That is something for tomorrow.

6 Likes
#12

Thank you so much @Falco you’re awesome :sunglasses: it almost impossible I know that is freaking hard to do it so yeah huge :+1:
Works great :slightly_smiling_face:

Only one thing I noticed when I search first time a gif it works great after if I search other term than it freezes everything.

2 Likes
#13

Which browser are you using? Not able to repro this here.

(note the flashing party while typing is a known issue with the discourse composer, not something we can easily fix sadly)

4 Likes
#14

Hi Sam,

The issue is on iOS.

I tried to upload a screen video but too big.

So I type Happy in search than wait while loading completely the gifs. Than start delete characters to search another. And it frozen. Only works is full refresh the page.

image
image1242Ă—1830 638 KB

3 Likes
#15

I think that is enough info for @Falco he was battling with iOS today and is not quite done with his fixes.

6 Likes
#16

Thank you so much your awesome guys :slightly_smiling_face:

3 Likes
#17

One more thing after post a gif it downloading all images (actually it downloads the full mp4 video gif) from tenor somehow I guess and break the gif.

image
image1232Ă—347 158 KB

So I just added media.tenor.com to disable image download domains setting. It seems now working well :slightly_smiling_face:

image
image1242Ă—522 120 KB

2 Likes
#18

Yes, because of the hack for iOS devices it triggers the download feature now. So you must add the tenor domain to the exception list.

3 Likes
#19

I fixed playback in iPadOS.

And while I can reproduce the freeze @dodesz, but since Safari is outright crashing there is not much I can do as it is not a simple exception but the browser is completely locking up. I made the markup simpler to reduce the number of elements, but it still crashes after 5 searches or so.

7 Likes
#20

I noticed freezing as well. It was on this website while I was editing a thread with a GIF. The whole browser tab froze twice on me, after I deleted the GIF in the composer it stopped freezing. I’m on the latest version of Firefox with Windows 10 desktop.

2 Likes
#21

In this forum it works perfectly, but not in mine, it just appears as a motionless image in the post. :frowning_face:

1 Like