Merge pull request #6329 from matrix-org/t3chguy/blurhash-components

Author: t3chguy

package.json

@@ -54,7 +54,6 @@
  },
  "dependencies": {
  "@babel/runtime": "^7.12.5",
- "@types/commonmark": "^0.27.4",
  "await-lock": "^2.1.0",
  "blurhash": "^1.1.3",
  "browser-encrypt-attachment": "^0.3.0",
@@ -92,6 +91,7 @@
  "re-resizable": "^6.9.0",
  "react": "^17.0.2",
  "react-beautiful-dnd": "^13.1.0",
+ "react-blurhash": "^0.1.3",
  "react-dom": "^17.0.2",
  "react-focus-lock": "^2.5.0",
  "react-transition-group": "^4.4.1",
@@ -124,6 +124,7 @@
  "@peculiar/webcrypto": "^1.1.4",
  "@sinonjs/fake-timers": "^7.0.2",
  "@types/classnames": "^2.2.11",
+ "@types/commonmark": "^0.27.4",
  "@types/counterpart": "^0.18.1",
  "@types/diff-match-patch": "^1.0.32",
  "@types/flux": "^3.1.9",

src/ContentMessages.tsx

@@ -49,8 +49,6 @@ const MAX_HEIGHT = 600;
 const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
 export const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448
-const BLURHASH_X_COMPONENTS = 6;
-const BLURHASH_Y_COMPONENTS = 6;
 
 export class UploadCanceledError extends Error {}
 
@@ -137,8 +135,9 @@ function createThumbnail(
  imageData.data,
  imageData.width,
  imageData.height,
- BLURHASH_X_COMPONENTS,
- BLURHASH_Y_COMPONENTS,
+ // use 4 components on the longer dimension, if square then both
+ imageData.width >= imageData.height ? 4 : 3,
+ imageData.height >= imageData.width ? 4 : 3,
  );
  canvas.toBlob(function(thumbnail) {
  resolve({

src/components/views/elements/BlurhashPlaceholder.tsx

@@ -18,6 +18,7 @@ limitations under the License.
 
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
+import { Blurhash } from "react-blurhash";
 
 import MFileBody from './MFileBody';
 import Modal from '../../../Modal';
@@ -29,7 +30,6 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import InlineSpinner from '../elements/InlineSpinner';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
-import BlurhashPlaceholder from "../elements/BlurhashPlaceholder";
 import { BLURHASH_FIELD } from "../../../ContentMessages";
 
 @replaceableComponent("views.messages.MImageBody")
@@ -436,7 +436,7 @@ export default class MImageBody extends React.Component {
  // Overidden by MStickerBody
  getPlaceholder(width, height) {
  const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
- if (blurhash) return <BlurhashPlaceholder blurhash={blurhash} width={width} height={height} />;
+ if (blurhash) return <Blurhash hash={blurhash} width={width} height={height} />;
  return <div className="mx_MImageBody_thumbnail_spinner">
  <InlineSpinner w={32} h={32} />
  </div>;

src/components/views/messages/MImageBody.js

@@ -6454,6 +6454,11 @@ react-beautiful-dnd@^13.1.0:
  redux "^4.0.4"
  use-memo-one "^1.1.1"
 
+react-blurhash@^0.1.3:
+ version "0.1.3"
+ resolved "https://registry.yarnpkg.com/react-blurhash/-/react-blurhash-0.1.3.tgz#735f28f8f07fb358d7efe7e7e6dc65a7272bf89e"
+ integrity sha512-Q9lqbXg92NU6/2DoIl/cBM8YWL+Z4X66OiG4aT9ozOgjBwx104LHFCH5stf6aF+s0Q9Wf310Ul+dG+VXJltmPg==
+
 react-clientside-effect@^1.2.2:
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.3.tgz#95c95f520addfb71743608b990bfe01eb002012b"