Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into export-conversations

src/components/views/messages/CallEvent.tsx

@@ -27,7 +27,7 @@ import classNames from 'classnames';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { formatCallTime } from "../../../DateUtils";
 
-const MAX_NON_NARROW_WIDTH = 400 / 70 * 100;
+const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -199,7 +199,7 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
             } else if (hangupReason === CallErrorCode.UserBusy) {
                 reason = _t("The user you called is busy.");
             } else {
-                reason = _t('Unknown failure: %(reason)s)', { reason: hangupReason });
+                reason = _t('Unknown failure: %(reason)s', { reason: hangupReason });
             }
 
             return (

src/components/views/messages/MFileBody.tsx

@@ -178,7 +178,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
 
     private onPlaceholderClick = async () => {
         const mediaHelper = this.props.mediaEventHelper;
-        if (mediaHelper.media.isEncrypted) {
+        if (mediaHelper?.media.isEncrypted) {
             await this.decryptFile();
             this.downloadFile(this.fileName, this.linkText);
         } else {
@@ -192,7 +192,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const isEncrypted = this.props.mediaEventHelper.media.isEncrypted;
+        const isEncrypted = this.props.mediaEventHelper?.media.isEncrypted;
         const contentUrl = this.getContentUrl();
         const fileSize = this.content.info ? this.content.info.size : null;
         const fileType = this.content.info ? this.content.info.mimetype : "application/octet-stream";

src/components/views/messages/MImageBody.tsx

@@ -47,6 +47,7 @@ interface IState {
     };
     hover: boolean;
     showImage: boolean;
+    placeholder: 'no-image' | 'blurhash';
 }
 
 @replaceableComponent("views.messages.MImageBody")
@@ -68,6 +69,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             loadedImageDimensions: null,
             hover: false,
             showImage: SettingsStore.getValue("showImages"),
+            placeholder: 'no-image',
         };
     }
 
@@ -280,6 +282,17 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             this.downloadImage();
             this.setState({ showImage: true });
         } // else don't download anything because we don't want to display anything.
+
+        // Add a 150ms timer for blurhash to first appear.
+        if (this.media.isEncrypted) {
+            setTimeout(() => {
+                if (!this.state.imgLoaded || !this.state.imgError) {
+                    this.setState({
+                        placeholder: 'blurhash',
+                    });
+                }
+            }, 150);
+        }
     }
 
     componentWillUnmount() {
@@ -437,7 +450,14 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     // Overidden by MStickerBody
     protected getPlaceholder(width: number, height: number): JSX.Element {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
-        if (blurhash) return <Blurhash className="mx_Blurhash" hash={blurhash} width={width} height={height} />;
+
+        if (blurhash) {
+            if (this.state.placeholder === 'no-image') {
+                return <div className="mx_no-image-placeholder" style={{ width: width, height: height }} />;
+            } else if (this.state.placeholder === 'blurhash') {
+                return <Blurhash className="mx_Blurhash" hash={blurhash} width={width} height={height} />;
+            }
+        }
         return (
             <InlineSpinner w={32} h={32} />
         );

src/components/views/messages/TileErrorBoundary.tsx

@@ -51,6 +51,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
     private onBugReport = (): void => {
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {
             label: 'react-soft-crash-tile',
+            error: this.state.error,
         });
     };