Merge pull request 'StillImage: Improved animated image detection' (#335) from yukijoou/akkoma-fe:still-image-better-gif-detection into develop

Reviewed-on: AkkomaGang/akkoma-fe#335
This commit is contained in:
floatingghost 2023-08-04 15:09:32 +00:00
commit 5a9322d2c7

View file

@ -39,12 +39,25 @@ const StillImage = {
this.imageLoadError && this.imageLoadError() this.imageLoadError && this.imageLoadError()
}, },
detectAnimation (image) { detectAnimation (image) {
// If there are no file extensions, the mimetype isn't set, and no mediaproxy is available, we can't figure out
// the mimetype of the image.
const hasFileExtension = this.src.split('/').pop().includes('.') // TODO: Better check?
const mediaProxyAvailable = this.$store.state.instance.mediaProxyAvailable
if (!hasFileExtension && this.mimetype === undefined && !mediaProxyAvailable) {
// 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
// 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)
this.isAnimated = true
return
}
if (this.mimetype === 'image/gif' || this.src.endsWith('.gif')) { if (this.mimetype === 'image/gif' || this.src.endsWith('.gif')) {
this.isAnimated = true this.isAnimated = true
return return
} }
// harmless CORS errors without-- clean console with // harmless CORS errors without-- clean console with
if (!this.$store.state.instance.mediaProxyAvailable) return if (!mediaProxyAvailable) return
// Animated JPEGs? // Animated JPEGs?
if (!(this.src.endsWith('.webp') || this.src.endsWith('.png'))) return if (!(this.src.endsWith('.webp') || this.src.endsWith('.png'))) 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