imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #6559 from matrix-org/t3chguy/fix/17906

Browse source
This commit is contained in:
Michael Telatynski 2021-08-05 20:00:11 +01:00 • committed by GitHub
commit e9b1db6518
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/ContentMessages.tsx
View file

@ -209,6 +209,14 @@ async function loadImageElement(imageFile: File) {
return { width, height, img }; return { width, height, img };
} }
// Minimum size for image files before we generate a thumbnail for them.
const IMAGE_SIZE_THRESHOLD_THUMBNAIL = 1 << 15; // 32KB
// Minimum size improvement for image thumbnails, if both are not met then don't bother uploading thumbnail.
const IMAGE_THUMBNAIL_MIN_REDUCTION_SIZE = 1 << 16; // 1MB
const IMAGE_THUMBNAIL_MIN_REDUCTION_PERCENT = 0.1; // 10%
// We don't apply these thresholds to video thumbnails as a poster image is always useful
// and videos tend to be much larger.
/** /**
* Read the metadata for an image file and create and upload a thumbnail of the image. * Read the metadata for an image file and create and upload a thumbnail of the image.
* *
@ -217,23 +225,33 @@ async function loadImageElement(imageFile: File) {
* @param {File} imageFile The image to read and thumbnail. * @param {File} imageFile The image to read and thumbnail.
* @return {Promise} A promise that resolves with the attachment info. * @return {Promise} A promise that resolves with the attachment info.
*/ */
function infoForImageFile(matrixClient, roomId, imageFile) { async function infoForImageFile(matrixClient: MatrixClient, roomId: string, imageFile: File) {
let thumbnailType = "image/png"; let thumbnailType = "image/png";
if (imageFile.type === "image/jpeg") { if (imageFile.type === "image/jpeg") {
thumbnailType = "image/jpeg"; thumbnailType = "image/jpeg";
} }
let imageInfo; const imageElement = await loadImageElement(imageFile);
return loadImageElement(imageFile).then((r) => {
return createThumbnail(r.img, r.width, r.height, thumbnailType); const result = await createThumbnail(imageElement.img, imageElement.width, imageElement.height, thumbnailType);
}).then((result) => { const imageInfo = result.info;
imageInfo = result.info;
return uploadFile(matrixClient, roomId, result.thumbnail); // we do all sizing checks here because we still rely on thumbnail generation for making a blurhash from.
}).then((result) => { const sizeDifference = imageFile.size - imageInfo.thumbnail_info.size;
imageInfo.thumbnail_url = result.url; if (
imageInfo.thumbnail_file = result.file; 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; return imageInfo;
}); }
const uploadResult = await uploadFile(matrixClient, roomId, result.thumbnail);
imageInfo["thumbnail_url"] = uploadResult.url;
imageInfo["thumbnail_file"] = uploadResult.file;
return imageInfo;
} }
/** /**