+ { url === null && blurhash &&
}
+ { url === null && thumbUrl !== null && (
+ /* eslint-disable-next-line jsx-a11y/alt-text */
+
+ )}
{ url === null && isLoading &&
}
{ url === null && !isLoading &&
}
{ url !== null && (
@@ -336,20 +344,22 @@ Video.defaultProps = {
height: null,
file: null,
thumbnail: null,
- type: '',
thumbnailType: null,
thumbnailFile: null,
+ type: '',
+ blurhash: null,
};
Video.propTypes = {
name: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
thumbnail: PropTypes.string,
+ thumbnailFile: PropTypes.shape({}),
+ thumbnailType: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
file: PropTypes.shape({}),
type: PropTypes.string,
- thumbnailFile: PropTypes.shape({}),
- thumbnailType: PropTypes.string,
+ blurhash: PropTypes.string,
};
export {
diff --git a/src/app/molecules/media/Media.scss b/src/app/molecules/media/Media.scss
index 16cf8f7e..b26b232a 100644
--- a/src/app/molecules/media/Media.scss
+++ b/src/app/molecules/media/Media.scss
@@ -33,6 +33,8 @@
font-size: 0;
line-height: 0;
+ position: relative;
+
display: flex;
justify-content: center;
align-items: center;
@@ -42,6 +44,19 @@
background-size: cover;
}
+.image-container,
+.video-container {
+ & img,
+ & canvas {
+ position: absolute;
+ max-width: unset !important;
+ width: 100% !important;
+ height: 100%;
+ border-radius: 0 !important;
+ margin: 0 !important;
+ }
+}
+
.sticker-container {
display: inline-flex;
max-width: 128px;
@@ -51,25 +66,17 @@
}
}
-.image-container {
- & img {
- max-width: unset !important;
- width: 100% !important;
- border-radius: 0 !important;
- margin: 0 !important;
- }
-}
-
.video-container {
& .ic-btn-surface {
background-color: var(--bg-surface-low);
+ position: absolute;
}
video {
- width: 100%
+ width: 100%;
}
}
.audio-container {
audio {
- width: 100%
+ width: 100%;
}
-}
\ No newline at end of file
+}
diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index 49337bdc..e94e5a46 100644
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -610,6 +610,8 @@ function genMediaContent(mE) {
let msgType = mE.getContent()?.msgtype;
if (mE.getType() === 'm.sticker') msgType = 'm.sticker';
+ const blurhash = mContent?.info?.['xyz.amorgan.blurhash'];
+
switch (msgType) {
case 'm.file':
return (
@@ -629,6 +631,7 @@ function genMediaContent(mE) {
link={mx.mxcUrlToHttp(mediaMXC)}
file={isEncryptedFile ? mContent.file : null}
type={mContent.info?.mimetype}
+ blurhash={blurhash}
/>
);
case 'm.sticker':
@@ -666,6 +669,7 @@ function genMediaContent(mE) {
height={typeof mContent.info?.h === 'number' ? mContent.info?.h : null}
file={isEncryptedFile ? mContent.file : null}
type={mContent.info?.mimetype}
+ blurhash={blurhash}
/>
);
default:
diff --git a/src/client/state/RoomsInput.js b/src/client/state/RoomsInput.js
index 2377c8d0..81425542 100644
--- a/src/client/state/RoomsInput.js
+++ b/src/client/state/RoomsInput.js
@@ -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;
}