From cd15e08fc285da42134817cce50de8011809cd53 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 29 Mar 2022 07:03:41 +0100 Subject: [PATCH] Allow sending and thumbnailing AVIF images (#8172) --- src/ContentMessages.ts | 23 ++++++++++++++--------- src/utils/Image.ts | 3 ++- src/utils/blobs.ts | 1 + 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/ContentMessages.ts b/src/ContentMessages.ts index babe4563f7..e64d88120b 100644 --- a/src/ContentMessages.ts +++ b/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); diff --git a/src/utils/Image.ts b/src/utils/Image.ts index 57ed3eefa6..66d43b1ca4 100644 --- a/src/utils/Image.ts +++ b/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 { diff --git a/src/utils/blobs.ts b/src/utils/blobs.ts index 892920d51f..9dea3d226c 100644 --- a/src/utils/blobs.ts +++ b/src/utils/blobs.ts @@ -54,6 +54,7 @@ const ALLOWED_BLOB_MIMETYPES = [ 'image/png', 'image/apng', 'image/webp', + 'image/avif', 'video/mp4', 'video/webm',