Add AnimationBlocker to prevent autoplay of GIFs and other potentially animated filetypes

[gcamacho079]

Description

• Pauses all GIFs added to the control panel by adding a canvas of the first frame over the image. Also does this for .webp images, which could be animated.
• Adds a play/pause button when the image size allows for comfortable placement

Related issues

Resolves PT-25

[linear]

PT-25 When GIF assets are uploaded, they autoplay from index and edit screens and cannot be paused

[gcamacho079]

@brandonkelly the user preference has been removed. 👍🏼

[brianjhanson]

@gcamacho079 Looking good! Just a few comments and I pushed up a few minor styling tweaks.

The biggest thing I noticed is that the animated images will play the first time they're inserted into the dom after you upload it (here's a quick video https://share.cleanshot.com/qXWpkXNh).

I think that's because when those are inserted into the DOM, they get an action URL that doesn't have .gif or .webp in the src or srcset. I'm not sure what the best way around it is. The only thing I can think of would be to output some kind of data-filename on the img so we can use that to determine if we should stop the animation.

I suppose another option would be to refactor this into a web component like Shoelace has. Then we could use PHP to determine if an image is animated or not and either output a <craft-animated-image/> wrapper or not. I'm not sure how involved that change would be though. It could be larger than we want it to be.

[brianjhanson]

Could we get rid of the jQuery dependency?

[gcamacho079]

Absolutely!

[brianjhanson]

Do we need this getter? It doesn't look like anything uses it, and if we want the imageAddedObserver to be available we could just make it public.

[gcamacho079]

Good call, I may have had a purpose for this at one point, but I'll remove it for now. 👍🏼

[gcamacho079]

@gcamacho079 Looking good! Just a few comments and I pushed up a few minor styling tweaks.

The biggest thing I noticed is that the animated images will play the first time they're inserted into the dom after you upload it (here's a quick video https://share.cleanshot.com/qXWpkXNh).

I think that's because when those are inserted into the DOM, they get an action URL that doesn't have .gif or .webp in the src or srcset. I'm not sure what the best way around it is. The only thing I can think of would be to output some kind of data-filename on the img so we can use that to determine if we should stop the animation.

I suppose another option would be to refactor this into a web component like Shoelace has. Then we could use PHP to determine if an image is animated or not and either output a <craft-animated-image/> wrapper or not. I'm not sure how involved that change would be though. It could be larger than we want it to be.

@brianjhanson thank you for catching that, and for your style updates. 👍🏼 I'll poke around and see what route makes sense. We could also do a hybrid approach of wrapping the image in a web component during the AnimationBlocker initialization.