feat(AccessKit Disable GIFs): Implement native tumblr media pausing compatibility

[marcustyphoon]

Description

This makes the AccessKit Disable GIFs feature override the Tumblr "disable media autoplay" feature if it's enabled. Resolves #2247.

Currently this does not address #2243: the "download paused gifs [immediately/on hover]" setting remains inoperative, equivalent to selecting "immediately."

Screenshots

disable-gifs-new.mov

Testing steps

• Set the "media auto-play" setting in https://www.tumblr.com/settings/dashboard to "never", or to "use system" with your operating system set to reduce motion.
• Open a page like https://www.tumblr.com/search/gif/recent. Enable AccessKit Disable GIFs and confirm that posts stay paused, but switch to the XKit GIF labels, and that they immediately animate when moused over.
• Open a page like https://www.tumblr.com/search/gif/recent with AccessKit Disable GIFs already enabled and confirm that posts stay paused, switching quickly to the XKit GIF labels, and that they immediately animate when moused over.
• Repeat the above with webp images, like on https://www.tumblr.com/tagged/webp.
• Enable sufficient throttling in browser dev tools to observe this. Open a page like https://www.tumblr.com/search/gif/recent, scroll down, and confirm that this is the precise sequence of events when a gif (not a webp, unfortunately) is loaded:
  • The gradient placeholder appears, with a loading icon in the top right.
  • The stationary image appears, with an AccessKit GIF label in the top right, with no loading icon visible beneath it. If the image is hovered during this stage, the AccessKit GIF label disappears and is replaced with a loading icon in the top right.
  • Fully loaded: if not hovered, the stationary image appears, with an AccessKit GIF label in the top right. If hovered, the animated image appears, with nothing in the top right.

[marcustyphoon]

Ah, interesting: this isAnimated check doesn't work in blog view now (but does work outside of it). Race condition, I guess. (The only difference I know of is that blog view images aren't loading=lazy, and I don't see why that would cause this).

I guess the correct behavior would be to... assume that all webp images that are clickable are animated? Hm, but currently we click the image in a separate part of the code. That's annoying.

[marcustyphoon]

Aha, subtlety when solving this: the third image in https://www.tumblr.com/uyallstars/808763769014681600/pok%C3%A8mon-the-movie-2000 has the url https://44.media.tumblr.com/e1e034a13feb0825b20e5c3acb2d3424/999f368947654671-e8/s540x810_f1/0f8607b0a0a85332b5aaa7e0c76beb87844aaf07.gifv when paused, but is a .webp when unpaused.

[marcustyphoon]

marcustyphoon@48678c9 write code, they said. it'll be fun, they said.

[marcustyphoon]

Implemented, with the caveat that this inherits Tumblr's erroneous "treat it like it's animated" behavior on non-animated webp images when media autoplay is disabled. I just sent a support message about that.

[marcustyphoon]

• AccessKit Disable GIFs: Feature breaks GIF animation after disabling if Tumblr autoplay is disabled #2297