diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index 43ecad54..a4c24df7 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -42,20 +42,22 @@ const StillImage = { 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 // 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) { - // 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 + return } - return + this.detectWithoutMediaProxy(image) + } else { + this.detectWithMediaProxy(image) } - + }, + detectAnimationWithFetch (image) { // Browser Cache should ensure image doesn't get loaded twice if cache exists fetch(image.src, { referrerPolicy: 'same-origin' @@ -85,6 +87,36 @@ const StillImage = { // this.imageLoadError && this.imageLoadError() }) }, + detectWithMediaProxy (image) { + this.detectAnimationWithFetch(image) + }, + detectWithoutMediaProxy (image) { + // We'll just assume that gifs and webp are animated + const extension = image.src.split('.').pop().toLowerCase() + + if (extension === 'gif') { + this.isAnimated = true + this.setLabel('GIF') + return + } + if (extension === 'webp') { + this.isAnimated = true + this.setLabel('WEBP') + return + } + // Beware the apng! use this if ye dare + // if (extension === 'png') { + // this.isAnimated = true + // this.setLabel('PNG') + // return + // } + + // Hail mary for extensionless + if (extension.includes('/')) { + // Don't mind the CORS error barrage + this.detectAnimationWithFetch(image) + } + }, setLabel (name) { this.imageTypeLabel = name; },