Allow sending and thumbnailing AVIF images (#8172)

Author: t3chguy

src/ContentMessages.ts

@@ -249,15 +249,20 @@ async function infoForImageFile(matrixClient: MatrixClient, roomId: string, imag
     const result = await createThumbnail(imageElement.img, imageElement.width, imageElement.height, thumbnailType);
     const imageInfo = result.info;
 
-    // we do all sizing checks here because we still rely on thumbnail generation for making a blurhash from.
-    const sizeDifference = imageFile.size - imageInfo.thumbnail_info.size;
-    if (
-        imageFile.size <= IMAGE_SIZE_THRESHOLD_THUMBNAIL || // image is small enough already
-        (sizeDifference <= IMAGE_THUMBNAIL_MIN_REDUCTION_SIZE && // thumbnail is not sufficiently smaller than original
-            sizeDifference <= (imageFile.size * IMAGE_THUMBNAIL_MIN_REDUCTION_PERCENT))
-    ) {
-        delete imageInfo["thumbnail_info"];
-        return imageInfo;
+    // For lesser supported image types, always include the thumbnail even if it is larger
+    if (!["image/avif", "image/webp"].includes(imageFile.type)) {
+        // we do all sizing checks here because we still rely on thumbnail generation for making a blurhash from.
+        const sizeDifference = imageFile.size - imageInfo.thumbnail_info.size;
+        if (
+            // image is small enough already
+            imageFile.size <= IMAGE_SIZE_THRESHOLD_THUMBNAIL ||
+            // thumbnail is not sufficiently smaller than original
+            (sizeDifference <= IMAGE_THUMBNAIL_MIN_REDUCTION_SIZE &&
+                sizeDifference <= (imageFile.size * IMAGE_THUMBNAIL_MIN_REDUCTION_PERCENT))
+        ) {
+            delete imageInfo["thumbnail_info"];
+            return imageInfo;
+        }
     }
 
     const uploadResult = await uploadFile(matrixClient, roomId, result.thumbnail);

src/utils/Image.ts

@@ -17,7 +17,8 @@
 import { arrayHasDiff } from "./arrays";
 
 export function mayBeAnimated(mimeType: string): boolean {
-    return ["image/gif", "image/webp", "image/png", "image/apng"].includes(mimeType);
+    // AVIF animation support at the time of writing is only available in Chrome hence not having `blobIsAnimated` check
+    return ["image/gif", "image/webp", "image/png", "image/apng", "image/avif"].includes(mimeType);
 }
 
 function arrayBufferRead(arr: ArrayBuffer, start: number, len: number): Uint8Array {

src/utils/blobs.ts

@@ -54,6 +54,7 @@ const ALLOWED_BLOB_MIMETYPES = [
     'image/png',
     'image/apng',
     'image/webp',
+    'image/avif',
 
     'video/mp4',
     'video/webm',