Animated gifs: Make it stop!

Looking great, a couple of minor recommendations:

  1. Maybe we do a small “paused” overlay, so people learn what happened. (a translucent II at the bottom right?)

  2. I think, (though I am not sure) that this only works after the gif fully loaded. Some animated gifs can take a while to load. Can you test maybe on local using throttling to see that this pauses even if the gif is not fully loaded?

7 Likes

Some weird behaviour I noticed here on Meta.
I posted a gif here https://meta.discourse.org/t/badges-and-general-chattiness-of-discourse/187971/19?u=geoff777

It wouldn’t pause. I tried two browsers.
I came to this thread as I’d read it the other day.
Clicked on the STOP IT gif and it paused.
Back to my post and that now pauses.

so …
testing testing testing …

Thats So Raven Hello GIF by Cameo

3 Likes

Maybe we could have a setting which would show on hover of a gif along the “stop current gif” button:

  • autoplay gifs on/off (stored in session)
4 Likes

Thanks Geoff, the technical reason why your upload doesn’t work is because this currently only works for uploads that are in the DB. Your upload above is a giphy URL, it doesn’t have a local upload record. We can’t easily extend this to animated images from other URLs because we don’t know for sure if an asset on a specific URL is an animated image or a regular static image.

We can make an educated guess, for giphy URLs for example, but unless the upload is local and processed, we won’t know for sure.

Update: ah, and now the giphy upload in your post above was downloaded locally, and the pausing works.

4 Likes

The gif I posted above won’t pause atm

Then there was a refresh and it does.

I’m guessing now this non-pause issue is just for the gif poster and fixes with a refresh.

Edit - sorry just reading your post above @pmusaraj

Yes that makes sense. It pauses when it is available locally.
So for a short time the pause feature won’t work. Good to know. Thanks

2 Likes

The pause action works, but the canvas can’t read/draw the first frame until the GIF has fully loaded. I don’t think we can properly fix this, so I added a subtle background color to the canvas element, which will display like this:

I also added play/pause icons and a few other improvements.
https://github.com/discourse/discourse/pull/12839

10 Likes

This topic was automatically closed after 6 days. New replies are no longer allowed.

Lightboxing gets in the way, as you can see here. Compare and contrast behavior by clicking / tapping on the below animated GIFs:

ed1bdf66998acb6fa9d93c4d8b318dbb07c15203

igor-bastidas-2

It kinda-sorta works on the second one, with the caveat that the lightbox expansion and contraction absorbs one of the clicks to pause/unpause.

3 Likes

Yeah @pmusaraj going to reopen this, we probably want better handling for cases where an animated gif is lightboxed it is very awkward now.

Not sure what the right thing is to do? not lightbox animated gifs? have different click areas for “pause” vs “full size” for these cases?

2 Likes

Maybe this? I am not sure there is anything to gain from lightboxing animated gifs…

7 Likes

I guess technically you could have a gigantic animation to show off.

Maybe we just disable the lightbox for now and see if anyone complains? Agree entirely that it usually is bad news and useless for animated gifs.

6 Likes

Sure, if disabling lightbox is easy for animated gifs, let’s do that. Should probably backport it as well!

3 Likes

This is now done and merged, animated images won’t be lightboxed. The example above has been updated (existing posts need a rebake for this to take effect).

Will backport shortly.

8 Likes

This topic was automatically closed after 4 days. New replies are no longer allowed.

This is a fun one, it’s impossible to play a de-spoilered gif:

american psycho glitch GIF by u̶͛͗̽ n̵͇ͨ g̵̼͂ l̵᷅ t̵̄ c̵̃͘ h̵͚ m̵͇͑e͔

7 Likes

Not completely related, but I’ve seen similar issues with spoilered images, where all you want to do is reveal the image and it actually pops up the full size image at the same time. Not related to the gif issue of course, but wanted to mention since it still has to do with clicking images that are behind spoiler tags.

2 Likes

Fun indeed! One way to fix this would be to disable lightboxes and pausing animated images inside the spoiler element. It’s very easy to do this with just CSS:

.spoiled {
  img.animated,
  .lightbox {
    pointer-events: none;
  }
}

We could also have lightboxing and pausing animations apply only when the contents is unblurred, but that can’t work with the spoiler being a toggle. But if we decide to switch the spoiler behaviour to be one way (unblur on click and that’s it), this could work too.

4 Likes

I’d really recommend not doing that. Personally, I find the toggle really important for reviewing my posts (both in the preview and after posting) to make sure I blurred everything appropriately. If it was one way only, once I unblur the text to actually review for typos I’d have no choice but to refresh the page to double check the blur locations. And often I do this multiple times (as I make edits), so having to refresh every time would be really inconvenient.

That said, if you’re just talking about making image unblurring one way, that’s probably not a big deal. (I posted my reply before rereading your post, so I think I missed some context, but it can’t hurt to emphasize the usefulness of the toggle in general, even if it’s not terribly important for images.)

3 Likes