mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-05 15:00:30 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Blurhash support (#701)

Browse source 
* Generate blurhash client side

* Make blurhash generation faster

* Simple blurhash display support

* Make image display simpler

* Support non square images

* Don't attach video blurhash to thumbnail

* Add video display support

* Ignore alt tag missing warning

Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>
This commit is contained in:
ginnyTheCat 2022-08-06 05:56:26 +02:00 • committed by GitHub
parent edace32213
commit 04f910ee03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 110 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/client/state/RoomsInput.js
View file

@ -3,12 +3,34 @@ import { micromark } from 'micromark';
import { gfm, gfmHtml } from 'micromark-extension-gfm';
import encrypt from 'browser-encrypt-attachment';
import { math } from 'micromark-extension-math';
import { encode } from 'blurhash';
import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
import { mathExtensionHtml, spoilerExtension, spoilerExtensionHtml } from '../../util/markdown';
import { getImageDimension } from '../../util/common';
import cons from './cons';
import settings from './settings';
const blurhashField = 'xyz.amorgan.blurhash';
function encodeBlurhash(img) {
const canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
const context = canvas.getContext('2d');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
const data = context.getImageData(0, 0, canvas.width, canvas.height);
return encode(data.data, data.width, data.height, 4, 4);
}
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = (err) => reject(err);
img.src = url;
});
}
function loadVideo(videoFile) {
return new Promise((resolve, reject) => {
const video = document.createElement('video');
@ -300,10 +322,11 @@ class RoomsInput extends EventEmitter {
let uploadData = null;
if (fileType === 'image') {
const imgDimension = await getImageDimension(file);
const img = await loadImage(URL.createObjectURL(file));
info.w = imgDimension.w;
info.h = imgDimension.h;
info.w = img.width;
info.h = img.height;
info[blurhashField] = encodeBlurhash(img);
content.msgtype = 'm.image';
content.body = file.name || 'Image';
@ -313,8 +336,11 @@ class RoomsInput extends EventEmitter {
try {
const video = await loadVideo(file);
info.w = video.videoWidth;
info.h = video.videoHeight;
info[blurhashField] = encodeBlurhash(video);
const thumbnailData = await getVideoThumbnail(video, video.videoWidth, video.videoHeight, 'image/jpeg');
const thumbnailUploadData = await this.uploadFile(roomId, thumbnailData.thumbnail);
info.thumbnail_info = thumbnailData.info;