Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-29 14:00:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Wire up local blurhash encoding

Browse Source
This commit is contained in:
Michael Telatynski 2021-05-21 14:52:27 +01:00
parent 563e6433b9
commit 8368b86440
1 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/ContentMessages.tsx
View File

@ -17,6 +17,8 @@ limitations under the License.
*/ */
import React from "react"; import React from "react";
import { encode } from "blurhash";
import dis from './dispatcher/dispatcher'; import dis from './dispatcher/dispatcher';
import {MatrixClient} from "matrix-js-sdk/src/client"; import {MatrixClient} from "matrix-js-sdk/src/client";
import * as sdk from './index'; import * as sdk from './index';
@ -47,6 +49,10 @@ const MAX_HEIGHT = 600;
// 5669 px (x-axis) , 5669 px (y-axis) , per metre // 5669 px (x-axis) , 5669 px (y-axis) , per metre
const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01]; const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC 2448
const BLURHASH_X_COMPONENTS = 8;
const BLURHASH_Y_COMPONENTS = 8;
export class UploadCanceledError extends Error {} export class UploadCanceledError extends Error {}
type ThumbnailableElement = HTMLImageElement | HTMLVideoElement; type ThumbnailableElement = HTMLImageElement | HTMLVideoElement;
@ -77,6 +83,7 @@ interface IThumbnail {
}; };
w: number; w: number;
h: number; h: number;
[BLURHASH_FIELD]: string;
}; };
thumbnail: Blob; thumbnail: Blob;
} }
@ -124,7 +131,16 @@ function createThumbnail(
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.width = targetWidth; canvas.width = targetWidth;
canvas.height = targetHeight; canvas.height = targetHeight;
canvas.getContext("2d").drawImage(element, 0, 0, targetWidth, targetHeight); const context = canvas.getContext("2d");
context.drawImage(element, 0, 0, targetWidth, targetHeight);
const imageData = context.getImageData(0, 0, targetWidth, targetHeight);
const blurhash = encode(
imageData.data,
imageData.width,
imageData.height,
BLURHASH_X_COMPONENTS,
BLURHASH_Y_COMPONENTS,
);
canvas.toBlob(function(thumbnail) { canvas.toBlob(function(thumbnail) {
resolve({ resolve({
info: { info: {
@ -136,8 +152,9 @@ function createThumbnail(
}, },
w: inputWidth, w: inputWidth,
h: inputHeight, h: inputHeight,
[BLURHASH_FIELD]: blurhash,
}, },
thumbnail: thumbnail, thumbnail,
}); });
}, mimeType); }, mimeType);
}); });
@ -338,7 +355,6 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
if (file.type) { if (file.type) {
encryptInfo.mimetype = file.type; encryptInfo.mimetype = file.type;
} }
// TODO: Blurhash for encrypted media?
return {"file": encryptInfo}; return {"file": encryptInfo};
}); });
(prom as IAbortablePromise<any>).abort = () => { (prom as IAbortablePromise<any>).abort = () => {
@ -349,15 +365,11 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
} else { } else {
const basePromise = matrixClient.uploadContent(file, { const basePromise = matrixClient.uploadContent(file, {
progressHandler: progressHandler, progressHandler: progressHandler,
onlyContentUri: false,
}); });
const promise1 = basePromise.then(function(body) { const promise1 = basePromise.then(function(url) {
if (canceled) throw new UploadCanceledError(); if (canceled) throw new UploadCanceledError();
// If the attachment isn't encrypted then include the URL directly. // If the attachment isn't encrypted then include the URL directly.
return { return { url };
"url": body.content_uri,
"blurhash": body["xyz.amorgan.blurhash"], // TODO: Use `body.blurhash` when MSC2448 lands
};
}); });
promise1.abort = () => { promise1.abort = () => {
canceled = true; canceled = true;
@ -565,7 +577,6 @@ export default class ContentMessages {
return upload.promise.then(function(result) { return upload.promise.then(function(result) {
content.file = result.file; content.file = result.file;
content.url = result.url; content.url = result.url;
content.info['xyz.amorgan.blurhash'] = result.blurhash; // TODO: Use `blurhash` when MSC2448 lands
}); });
}).then(() => { }).then(() => {
// Await previous message being sent into the room // Await previous message being sent into the room