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

src/components/views/messages/MImageBody.js

@@ -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")
@@ -438,7 +438,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/MKeyVerificationRequest.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from 'react';
 import { MatrixEvent } from 'matrix-js-sdk/src';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { getNameForEventRoom, userLabelForEventRoom }
     from '../../../utils/KeyVerificationStateObserver';
@@ -26,6 +25,7 @@ import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
 import { Action } from "../../../dispatcher/actions";
 import EventTileBubble from "./EventTileBubble";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AccessibleButton from '../elements/AccessibleButton';
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -115,8 +115,6 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
     }
 
     public render() {
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-
         const { mxEvent } = this.props;
         const request = mxEvent.verificationRequest;
 

src/components/views/messages/SenderProfile.tsx

@@ -24,7 +24,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 interface IProps {
     mxEvent: MatrixEvent;
-    onClick(): void;
+    onClick?(): void;
     enableFlair: boolean;
 }
 

src/components/views/messages/TextualBody.tsx

@@ -45,7 +45,7 @@ import Spoiler from "../elements/Spoiler";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import MessageEditHistoryDialog from "../dialogs/MessageEditHistoryDialog";
 import EditMessageComposer from '../rooms/EditMessageComposer';
-import LinkPreviewWidget from '../rooms/LinkPreviewWidget';
+import LinkPreviewGroup from '../rooms/LinkPreviewGroup';
 
 interface IProps {
     /* the MatrixEvent to show */
@@ -294,14 +294,8 @@ export default class TextualBody extends React.Component<IProps, IState> {
             // pass only the first child which is the event tile otherwise this recurses on edited events
             let links = this.findLinks([this.contentRef.current]);
             if (links.length) {
-                // de-duplicate the links after stripping hashes as they don't affect the preview
-                // using a set here maintains the order
-                links = Array.from(new Set(links.map(link => {
-                    const url = new URL(link);
-                    url.hash = "";
-                    return url.toString();
-                })));
-
+                // de-duplicate the links using a set here maintains the order
+                links = Array.from(new Set(links));
                 this.setState({ links });
 
                 // lazy-load the hidden state of the preview widget from localstorage
@@ -530,15 +524,12 @@ export default class TextualBody extends React.Component<IProps, IState> {
 
         let widgets;
         if (this.state.links.length && !this.state.widgetHidden && this.props.showUrlPreview) {
-            widgets = this.state.links.map((link)=>{
-                return <LinkPreviewWidget
-                    key={link}
-                    link={link}
-                    mxEvent={this.props.mxEvent}
-                    onCancelClick={this.onCancelClick}
-                    onHeightChanged={this.props.onHeightChanged}
-                />;
-            });
+            widgets = <LinkPreviewGroup
+                links={this.state.links}
+                mxEvent={this.props.mxEvent}
+                onCancelClick={this.onCancelClick}
+                onHeightChanged={this.props.onHeightChanged}
+            />;
         }
 
         switch (content.msgtype) {