Disabled aggressive matching for reduced motion (we search for gif now)
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful

This commit is contained in:
Mergan 2023-09-12 04:19:08 -07:00
parent 3e64d78d05
commit 1056b89fd1

View file

@ -40,17 +40,21 @@ const StillImage = {
this.imageLoadError && this.imageLoadError() this.imageLoadError && this.imageLoadError()
}, },
detectAnimation (image) { detectAnimation (image) {
const mediaProxyAvailable = this.$store.state.instance.mediaProxyAvailable
// harmless CORS errors without-- clean console with
if (!mediaProxyAvailable) {
// It's a bit aggressive to assume all images we can't find the mimetype of is animated, but necessary for // It's a bit aggressive to assume all images we can't find the mimetype of is animated, but necessary for
// people in need of reduced motion accessibility. As such, we'll consider those images animated if the user // people in need of reduced motion accessibility. As such, we'll consider those images animated if the user
// agent is set to prefer reduced motion. Otherwise, it'll just be used as an early exit. // agent is set to prefer reduced motion. Otherwise, it'll just be used as an early exit.
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
// Only for no media-proxy for now, since we're capturing gif, webp, and apng (are there others?)
// Since the canvas and images are not pixel-perfect matching (due to scaling),
// It makes the images jiggle on hover, which is not ideal for accessibility, methinks
this.isAnimated = true this.isAnimated = true
} }
return
const mediaProxyAvailable = this.$store.state.instance.mediaProxyAvailable }
// harmless CORS errors without-- clean console with
if (!mediaProxyAvailable) return
// Browser Cache should ensure image doesn't get loaded twice if cache exists // Browser Cache should ensure image doesn't get loaded twice if cache exists
fetch(image.src, { fetch(image.src, {