Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/18798

 Conflicts:

	src/i18n/strings/en_EN.json

src/components/views/audio_messages/Clock.tsx

@@ -15,34 +15,30 @@ limitations under the License.
 */
 
 import React from "react";
+import { formatSeconds } from "../../../DateUtils";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export interface IProps {
     seconds: number;
 }
 
-interface IState {
-}
-
 /**
  * Simply converts seconds into minutes and seconds. Note that hours will not be
  * displayed, making it possible to see "82:29".
  */
 @replaceableComponent("views.audio_messages.Clock")
-export default class Clock extends React.Component<IProps, IState> {
+export default class Clock extends React.Component<IProps> {
     public constructor(props) {
         super(props);
     }
 
-    shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean {
+    shouldComponentUpdate(nextProps: Readonly<IProps>): boolean {
         const currentFloor = Math.floor(this.props.seconds);
         const nextFloor = Math.floor(nextProps.seconds);
         return currentFloor !== nextFloor;
     }
 
     public render() {
-        const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0');
-        const seconds = Math.floor(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
-        return <span className='mx_Clock'>{ minutes }:{ seconds }</span>;
+        return <span className='mx_Clock'>{ formatSeconds(this.props.seconds) }</span>;
     }
 }

src/components/views/avatars/MemberAvatar.tsx

@@ -36,6 +36,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
     viewUserOnClick?: boolean;
     title?: string;
+    style?: any;
 }
 
 interface IState {

src/components/views/dialogs/CreateSubspaceDialog.tsx

@@ -79,7 +79,7 @@ const CreateSubspaceDialog: React.FC<IProps> = ({ space, onAddExistingSpaceClick
         }
 
         try {
-            await createSpace(name, joinRule === JoinRule.Public, alias, topic, avatar, {}, { parentSpace });
+            await createSpace(name, joinRule === JoinRule.Public, alias, topic, avatar, {}, { parentSpace, joinRule });
 
             onFinished(true);
         } catch (e) {

src/components/views/dialogs/ShareDialog.tsx

@@ -158,7 +158,7 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
             if (this.state.linkSpecificEvent) {
                 matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
             } else {
-                matrixToUrl = this.props.permalinkCreator.forRoom();
+                matrixToUrl = this.props.permalinkCreator.forShareableRoom();
             }
         }
         return matrixToUrl;

src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,6 +20,7 @@ import { _t } from "../../../languageHandler";
 import { IDialogProps } from "./IDialogProps";
 import {
     Capability,
+    isTimelineCapability,
     Widget,
     WidgetEventCapability,
     WidgetKind,
@@ -30,6 +31,7 @@ import DialogButtons from "../elements/DialogButtons";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { CapabilityText } from "../../../widgets/CapabilityText";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { lexicographicCompare } from "matrix-js-sdk/src/utils";
 
 interface IProps extends IDialogProps {
     requestedCapabilities: Set<Capability>;
@@ -91,7 +93,20 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
     }
 
     public render() {
-        const checkboxRows = Object.entries(this.state.booleanStates).map(([cap, isChecked], i) => {
+        // We specifically order the timeline capabilities down to the bottom. The capability text
+        // generation cares strongly about this.
+        const orderedCapabilities = Object.entries(this.state.booleanStates).sort(([capA], [capB]) => {
+            const isTimelineA = isTimelineCapability(capA);
+            const isTimelineB = isTimelineCapability(capB);
+
+            if (!isTimelineA && !isTimelineB) return lexicographicCompare(capA, capB);
+            if (isTimelineA && !isTimelineB) return 1;
+            if (!isTimelineA && isTimelineB) return -1;
+            if (isTimelineA && isTimelineB) return lexicographicCompare(capA, capB);
+
+            return 0;
+        });
+        const checkboxRows = orderedCapabilities.map(([cap, isChecked], i) => {
             const text = CapabilityText.for(cap, this.props.widgetKind);
             const byline = text.byline
                 ? <span className="mx_WidgetCapabilitiesPromptDialog_byline">{ text.byline }</span>

src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Travis Ralston
+Copyright 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,42 +16,46 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { _t } from "../../../languageHandler";
-import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import { Widget } from "matrix-widget-api";
+import { Widget, WidgetKind } from "matrix-widget-api";
 import { OIDCState, WidgetPermissionStore } from "../../../stores/widgets/WidgetPermissionStore";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+interface IProps extends IDialogProps {
+    widget: Widget;
+    widgetKind: WidgetKind;
+    inRoomId?: string;
+}
+
+interface IState {
+    rememberSelection: boolean;
+}
 
 @replaceableComponent("views.dialogs.WidgetOpenIDPermissionsDialog")
-export default class WidgetOpenIDPermissionsDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-        widget: PropTypes.objectOf(Widget).isRequired,
-        widgetKind: PropTypes.string.isRequired, // WidgetKind from widget-api
-        inRoomId: PropTypes.string,
-    };
-
-    constructor() {
-        super();
+export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
 
         this.state = {
             rememberSelection: false,
         };
     }
 
-    _onAllow = () => {
-        this._onPermissionSelection(true);
+    private onAllow = () => {
+        this.onPermissionSelection(true);
     };
 
-    _onDeny = () => {
-        this._onPermissionSelection(false);
+    private onDeny = () => {
+        this.onPermissionSelection(false);
     };
 
-    _onPermissionSelection(allowed) {
+    private onPermissionSelection(allowed: boolean) {
         if (this.state.rememberSelection) {
-            console.log(`Remembering ${this.props.widgetId} as allowed=${allowed} for OpenID`);
+            console.log(`Remembering ${this.props.widget.id} as allowed=${allowed} for OpenID`);
 
             WidgetPermissionStore.instance.setOIDCState(
                 this.props.widget, this.props.widgetKind, this.props.inRoomId,
@@ -61,14 +66,11 @@ export default class WidgetOpenIDPermissionsDialog extends React.Component {
         this.props.onFinished(allowed);
     }
 
-    _onRememberSelectionChange = (newVal) => {
+    private onRememberSelectionChange = (newVal: boolean) => {
         this.setState({ rememberSelection: newVal });
     };
 
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-
+    public render() {
         return (
             <BaseDialog
                 className='mx_WidgetOpenIDPermissionsDialog'
@@ -87,13 +89,13 @@ export default class WidgetOpenIDPermissionsDialog extends React.Component {
                 </div>
                 <DialogButtons
                     primaryButton={_t("Continue")}
-                    onPrimaryButtonClick={this._onAllow}
-                    onCancel={this._onDeny}
+                    onPrimaryButtonClick={this.onAllow}
+                    onCancel={this.onDeny}
                     additive={
                         <LabelledToggleSwitch
                             value={this.state.rememberSelection}
                             toggleInFront={true}
-                            onChange={this._onRememberSelectionChange}
+                            onChange={this.onRememberSelectionChange}
                             label={_t("Remember this")} />}
                 />
             </BaseDialog>

src/components/views/elements/AccessibleButton.tsx

@@ -19,7 +19,7 @@ import React, { ReactHTML } from 'react';
 import { Key } from '../../../Keyboard';
 import classnames from 'classnames';
 
-export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element>;
+export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element> | React.FormEvent<Element>;
 
 /**
  * children: React's magic prop. Represents all children given to the element.
@@ -39,7 +39,7 @@ interface IProps extends React.InputHTMLAttributes<Element> {
     tabIndex?: number;
     disabled?: boolean;
     className?: string;
-    onClick(e?: ButtonEvent): void;
+    onClick(e?: ButtonEvent): void | Promise<void>;
 }
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {

src/components/views/elements/EventTilePreview.tsx

@@ -25,6 +25,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { Layout } from "../../../settings/Layout";
 import { UIFeature } from "../../../settings/UIFeature";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Spinner from './Spinner';
 
 interface IProps {
     /**
@@ -45,7 +46,7 @@ interface IProps {
     /**
      * The ID of the displayed user
      */
-    userId: string;
+    userId?: string;
 
     /**
      * The display name of the displayed user
@@ -118,13 +119,16 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
     }
 
     public render() {
-        const event = this.fakeEvent(this.state);
-
         const className = classnames(this.props.className, {
             "mx_IRCLayout": this.props.layout == Layout.IRC,
             "mx_GroupLayout": this.props.layout == Layout.Group,
+            "mx_EventTilePreview_loader": !this.props.userId,
         });
 
+        if (!this.props.userId) return <div className={className}><Spinner /></div>;
+
+        const event = this.fakeEvent(this.state);
+
         return <div className={className}>
             <EventTile
                 mxEvent={event}

src/components/views/elements/ImageView.tsx

@@ -419,6 +419,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             const avatar = (
                 <MemberAvatar
                     member={mxEvent.sender}
+                    fallbackUserId={mxEvent.getSender()}
                     width={32}
                     height={32}
                     viewUserOnClick={true}

src/components/views/elements/InviteReason.tsx

@@ -16,11 +16,13 @@ limitations under the License.
 
 import classNames from "classnames";
 import React from "react";
+import { sanitizedHtmlNode } from "../../../HtmlUtils";
 import { _t } from "../../../languageHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     reason: string;
+    htmlReason?: string;
 }
 
 interface IState {
@@ -51,7 +53,7 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
         });
 
         return <div className={classes}>
-            <div className="mx_InviteReason_reason">{ this.props.reason }</div>
+            <div className="mx_InviteReason_reason">{ this.props.htmlReason ? sanitizedHtmlNode(this.props.htmlReason) : this.props.reason }</div>
             <div className="mx_InviteReason_view"
                 onClick={this.onViewClick}
             >

src/components/views/elements/ReplyThread.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { UNSTABLE_ELEMENT_REPLY_IN_THREAD } from "matrix-js-sdk/src/@types/event";
 import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
 import { Layout } from "../../../settings/Layout";
@@ -206,15 +207,28 @@ export default class ReplyThread extends React.Component<IProps, IState> {
         return { body, html };
     }
 
-    public static makeReplyMixIn(ev: MatrixEvent) {
+    public static makeReplyMixIn(ev: MatrixEvent, replyInThread: boolean) {
         if (!ev) return {};
-        return {
+
+        const replyMixin = {
             'm.relates_to': {
                 'm.in_reply_to': {
                     'event_id': ev.getId(),
                 },
             },
         };
+
+        /**
+         * @experimental
+         * Rendering hint for threads, only attached if true to make
+         * sure that Element does not start sending that property for all events
+         */
+        if (replyInThread) {
+            const inReplyTo = replyMixin['m.relates_to']['m.in_reply_to'];
+            inReplyTo[UNSTABLE_ELEMENT_REPLY_IN_THREAD.name] = replyInThread;
+        }
+
+        return replyMixin;
     }
 
     public static makeThread(

src/components/views/elements/RoomAliasField.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from "react";
+import React, { createRef, KeyboardEventHandler } from "react";
 
 import { _t } from '../../../languageHandler';
 import withValidation from './Validation';
@@ -28,6 +28,7 @@ interface IProps {
     label?: string;
     placeholder?: string;
     disabled?: boolean;
+    onKeyDown?: KeyboardEventHandler;
     onChange?(value: string): void;
 }
 
@@ -70,6 +71,8 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
                 value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)}
                 maxLength={maxlength}
                 disabled={this.props.disabled}
+                autoComplete="off"
+                onKeyDown={this.props.onKeyDown}
             />
         );
     }

src/components/views/messages/CallEvent.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React, { createRef } from 'react';
 
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { _t, _td } from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
 import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -26,6 +26,7 @@ import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
 import classNames from 'classnames';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { formatCallTime } from "../../../DateUtils";
+import Clock from "../audio_messages/Clock";
 
 const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
 
@@ -38,13 +39,9 @@ interface IState {
     callState: CallState | CustomCallState;
     silenced: boolean;
     narrow: boolean;
+    length: number;
 }
 
-const TEXTUAL_STATES: Map<CallState | CustomCallState, string> = new Map([
-    [CallState.Connected, _td("Connected")],
-    [CallState.Connecting, _td("Connecting")],
-]);
-
 export default class CallEvent extends React.PureComponent<IProps, IState> {
     private wrapperElement = createRef<HTMLDivElement>();
     private resizeObserver: ResizeObserver;
@@ -56,12 +53,14 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
             callState: this.props.callEventGrouper.state,
             silenced: false,
             narrow: false,
+            length: 0,
         };
     }
 
     componentDidMount() {
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
+        this.props.callEventGrouper.addListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
 
         this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
         this.resizeObserver.observe(this.wrapperElement.current);
@@ -70,10 +69,15 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
     componentWillUnmount() {
         this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
         this.props.callEventGrouper.removeListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
+        this.props.callEventGrouper.removeListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
 
         this.resizeObserver.disconnect();
     }
 
+    private onLengthChanged = (length: number): void => {
+        this.setState({ length });
+    };
+
     private resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {
         const wrapperElementEntry = entries.find((entry) => entry.target === this.wrapperElement.current);
         if (!wrapperElementEntry) return;
@@ -214,10 +218,17 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
                 </div>
             );
         }
-        if (Array.from(TEXTUAL_STATES.keys()).includes(state)) {
+        if (state === CallState.Connected) {
             return (
                 <div className="mx_CallEvent_content">
-                    { TEXTUAL_STATES.get(state) }
+                    <Clock seconds={this.state.length} />
+                </div>
+            );
+        }
+        if (state === CallState.Connecting) {
+            return (
+                <div className="mx_CallEvent_content">
+                    { _t("Connecting") }
                 </div>
             );
         }

src/components/views/messages/EncryptionEvent.tsx

@@ -16,26 +16,38 @@ limitations under the License.
 
 import React, { forwardRef, useContext } from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { IRoomEncryption } from "matrix-js-sdk/src/crypto/RoomList";
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import EventTileBubble from "./EventTileBubble";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import DMRoomMap from "../../../utils/DMRoomMap";
+import { objectHasDiff } from "../../../utils/objects";
 
 interface IProps {
     mxEvent: MatrixEvent;
 }
 
+const ALGORITHM = "m.megolm.v1.aes-sha2";
+
 const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent }, ref) => {
     const cli = useContext(MatrixClientContext);
     const roomId = mxEvent.getRoomId();
     const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
 
-    if (mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' && isRoomEncrypted) {
+    const prevContent = mxEvent.getPrevContent() as IRoomEncryption;
+    const content = mxEvent.getContent<IRoomEncryption>();
+
+    // if no change happened then skip rendering this, a shallow check is enough as all known fields are top-level.
+    if (!objectHasDiff(prevContent, content)) return null; // nop
+
+    if (content.algorithm === ALGORITHM && isRoomEncrypted) {
         let subtitle: string;
         const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId);
-        if (dmPartner) {
+        if (prevContent.algorithm === ALGORITHM) {
+            subtitle = _t("Some encryption parameters have been changed.");
+        } else if (dmPartner) {
             const displayName = cli?.getRoom(roomId)?.getMember(dmPartner)?.rawDisplayName || dmPartner;
             subtitle = _t("Messages here are end-to-end encrypted. " +
                 "Verify %(displayName)s in their profile - tap on their avatar.", { displayName });
@@ -49,7 +61,9 @@ const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent }, ref) =>
             title={_t("Encryption enabled")}
             subtitle={subtitle}
         />;
-    } else if (isRoomEncrypted) {
+    }
+
+    if (isRoomEncrypted) {
         return <EventTileBubble
             className="mx_cryptoEvent mx_cryptoEvent_icon"
             title={_t("Encryption enabled")}

src/components/views/messages/MAudioBody.tsx

@@ -24,6 +24,8 @@ import { IMediaEventContent } from "../../../customisations/models/IMediaEventCo
 import MFileBody from "./MFileBody";
 import { IBodyProps } from "./IBodyProps";
 import { PlaybackManager } from "../../../audio/PlaybackManager";
+import { isVoiceMessage } from "../../../utils/EventUtils";
+import { PlaybackQueue } from "../../../audio/PlaybackQueue";
 
 interface IState {
     error?: Error;
@@ -67,6 +69,10 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
         playback.clockInfo.populatePlaceholdersFrom(this.props.mxEvent);
         this.setState({ playback });
 
+        if (isVoiceMessage(this.props.mxEvent)) {
+            PlaybackQueue.forRoom(this.props.mxEvent.getRoomId()).unsortedEnqueue(this.props.mxEvent, playback);
+        }
+
         // Note: the components later on will handle preparing the Playback class for us.
     }
 

src/components/views/messages/MImageBody.tsx

@@ -55,6 +55,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     static contextType = MatrixClientContext;
     private unmounted = true;
     private image = createRef<HTMLImageElement>();
+    private timeout?: number;
 
     constructor(props: IBodyProps) {
         super(props);
@@ -128,7 +129,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     private onImageEnter = (e: React.MouseEvent<HTMLImageElement>): void => {
         this.setState({ hover: true });
 
-        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifs")) {
             return;
         }
         const imgElement = e.currentTarget;
@@ -138,7 +139,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     private onImageLeave = (e: React.MouseEvent<HTMLImageElement>): void => {
         this.setState({ hover: false });
 
-        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifs")) {
             return;
         }
         const imgElement = e.currentTarget;
@@ -146,12 +147,14 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     };
 
     private onImageError = (): void => {
+        this.clearBlurhashTimeout();
         this.setState({
             imgError: true,
         });
     };
 
     private onImageLoad = (): void => {
+        this.clearBlurhashTimeout();
         this.props.onHeightChanged();
 
         let loadedImageDimensions;
@@ -267,6 +270,13 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
     }
 
+    private clearBlurhashTimeout() {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+            this.timeout = undefined;
+        }
+    }
+
     componentDidMount() {
         this.unmounted = false;
         this.context.on('sync', this.onClientSync);
@@ -281,8 +291,9 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         } // 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.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) {
+            this.clearBlurhashTimeout();
+            this.timeout = setTimeout(() => {
                 if (!this.state.imgLoaded || !this.state.imgError) {
                     this.setState({
                         placeholder: 'blurhash',
@@ -295,6 +306,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     componentWillUnmount() {
         this.unmounted = true;
         this.context.removeListener('sync', this.onClientSync);
+        this.clearBlurhashTimeout();
     }
 
     protected messageContent(
@@ -387,7 +399,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             showPlaceholder = false; // because we're hiding the image, so don't show the placeholder.
         }
 
-        if (this.isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
+        if (this.isGif() && !SettingsStore.getValue("autoplayGifs") && !this.state.hover) {
             gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
         }
 
@@ -487,7 +499,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
         const contentUrl = this.getContentUrl();
         let thumbUrl;
-        if (this.isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (this.isGif() && SettingsStore.getValue("autoplayGifs")) {
             thumbUrl = contentUrl;
         } else {
             thumbUrl = this.getThumbUrl();

src/components/views/messages/MVideoBody.tsx

@@ -145,7 +145,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
     }
 
     async componentDidMount() {
-        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos") as boolean;
+        const autoplay = SettingsStore.getValue("autoplayVideo") as boolean;
         this.loadBlurhash();
 
         if (this.props.mediaEventHelper.media.isEncrypted && this.state.decryptedUrl === null) {
@@ -209,7 +209,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
 
     render() {
         const content = this.props.mxEvent.getContent();
-        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
+        const autoplay = SettingsStore.getValue("autoplayVideo");
 
         if (this.state.error !== null) {
             return (

src/components/views/messages/MessageActionBar.tsx

@@ -17,8 +17,7 @@ limitations under the License.
 */
 
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { EventStatus } from 'matrix-js-sdk/src/models/event';
+import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event';
 
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
@@ -37,48 +36,65 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import DownloadActionButton from "./DownloadActionButton";
 import SettingsStore from '../../../settings/SettingsStore';
+import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
+import ReplyThread from '../elements/ReplyThread';
 
-const OptionsButton = ({ mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange }) => {
-    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
-    const [onFocus, isActive, ref] = useRovingTabIndex(button);
-    useEffect(() => {
-        onFocusChange(menuDisplayed);
-    }, [onFocusChange, menuDisplayed]);
+interface IOptionsButtonProps {
+    mxEvent: MatrixEvent;
+    getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
+    getReplyThread: () => ReplyThread;
+    permalinkCreator: RoomPermalinkCreator;
+    onFocusChange: (menuDisplayed: boolean) => void;
+}
 
-    let contextMenu;
-    if (menuDisplayed) {
-        const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
+const OptionsButton: React.FC<IOptionsButtonProps> =
+    ({ mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange }) => {
+        const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
+        const [onFocus, isActive, ref] = useRovingTabIndex(button);
+        useEffect(() => {
+            onFocusChange(menuDisplayed);
+        }, [onFocusChange, menuDisplayed]);
 
-        const tile = getTile && getTile();
-        const replyThread = getReplyThread && getReplyThread();
+        let contextMenu;
+        if (menuDisplayed) {
+            const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
 
-        const buttonRect = button.current.getBoundingClientRect();
-        contextMenu = <MessageContextMenu
-            {...aboveLeftOf(buttonRect)}
-            mxEvent={mxEvent}
-            permalinkCreator={permalinkCreator}
-            eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
-            collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
-            onFinished={closeMenu}
-        />;
-    }
+            const tile = getTile && getTile();
+            const replyThread = getReplyThread && getReplyThread();
 
-    return <React.Fragment>
-        <ContextMenuTooltipButton
-            className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
-            title={_t("Options")}
-            onClick={openMenu}
-            isExpanded={menuDisplayed}
-            inputRef={ref}
-            onFocus={onFocus}
-            tabIndex={isActive ? 0 : -1}
-        />
+            const buttonRect = button.current.getBoundingClientRect();
+            contextMenu = <MessageContextMenu
+                {...aboveLeftOf(buttonRect)}
+                mxEvent={mxEvent}
+                permalinkCreator={permalinkCreator}
+                eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
+                collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
+                onFinished={closeMenu}
+            />;
+        }
 
-        { contextMenu }
-    </React.Fragment>;
-};
+        return <React.Fragment>
+            <ContextMenuTooltipButton
+                className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
+                title={_t("Options")}
+                onClick={openMenu}
+                isExpanded={menuDisplayed}
+                inputRef={ref}
+                onFocus={onFocus}
+                tabIndex={isActive ? 0 : -1}
+            />
 
-const ReactButton = ({ mxEvent, reactions, onFocusChange }) => {
+            { contextMenu }
+        </React.Fragment>;
+    };
+
+interface IReactButtonProps {
+    mxEvent: MatrixEvent;
+    reactions: any; // TODO: types
+    onFocusChange: (menuDisplayed: boolean) => void;
+}
+
+const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusChange }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
     const [onFocus, isActive, ref] = useRovingTabIndex(button);
     useEffect(() => {
@@ -109,21 +125,21 @@ const ReactButton = ({ mxEvent, reactions, onFocusChange }) => {
     </React.Fragment>;
 };
 
+interface IMessageActionBarProps {
+    mxEvent: MatrixEvent;
+    // The Relations model from the JS SDK for reactions to `mxEvent`
+    reactions?: any;  // TODO: types
+    permalinkCreator?: RoomPermalinkCreator;
+    getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
+    getReplyThread?: () => ReplyThread;
+    onFocusChange?: (menuDisplayed: boolean) => void;
+}
+
 @replaceableComponent("views.messages.MessageActionBar")
-export default class MessageActionBar extends React.PureComponent {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired,
-        // The Relations model from the JS SDK for reactions to `mxEvent`
-        reactions: PropTypes.object,
-        permalinkCreator: PropTypes.object,
-        getTile: PropTypes.func,
-        getReplyThread: PropTypes.func,
-        onFocusChange: PropTypes.func,
-    };
+export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
+    public static contextType = RoomContext;
 
-    static contextType = RoomContext;
-
-    componentDidMount() {
+    public componentDidMount(): void {
         if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {
             this.props.mxEvent.on("Event.status", this.onSent);
         }
@@ -137,43 +153,43 @@ export default class MessageActionBar extends React.PureComponent {
         this.props.mxEvent.on("Event.beforeRedaction", this.onBeforeRedaction);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         this.props.mxEvent.off("Event.status", this.onSent);
         this.props.mxEvent.off("Event.decrypted", this.onDecrypted);
         this.props.mxEvent.off("Event.beforeRedaction", this.onBeforeRedaction);
     }
 
-    onDecrypted = () => {
+    private onDecrypted = (): void => {
         // When an event decrypts, it is likely to change the set of available
         // actions, so we force an update to check again.
         this.forceUpdate();
     };
 
-    onBeforeRedaction = () => {
+    private onBeforeRedaction = (): void => {
         // When an event is redacted, we can't edit it so update the available actions.
         this.forceUpdate();
     };
 
-    onSent = () => {
+    private onSent = (): void => {
         // When an event is sent and echoed the possible actions change.
         this.forceUpdate();
     };
 
-    onFocusChange = (focused) => {
+    private onFocusChange = (focused: boolean): void => {
         if (!this.props.onFocusChange) {
             return;
         }
         this.props.onFocusChange(focused);
     };
 
-    onReplyClick = (ev) => {
+    private onReplyClick = (ev: React.MouseEvent): void => {
         dis.dispatch({
             action: 'reply_to_event',
             event: this.props.mxEvent,
         });
     };
 
-    onThreadClick = () => {
+    private onThreadClick = (): void => {
         dis.dispatch({
             action: Action.SetRightPanelPhase,
             phase: RightPanelPhases.ThreadView,
@@ -182,9 +198,9 @@ export default class MessageActionBar extends React.PureComponent {
                 event: this.props.mxEvent,
             },
         });
-    }
+    };
 
-    onEditClick = (ev) => {
+    private onEditClick = (ev: React.MouseEvent): void => {
         dis.dispatch({
             action: 'edit_event',
             event: this.props.mxEvent,
@@ -200,7 +216,7 @@ export default class MessageActionBar extends React.PureComponent {
      * @param {Function} fn The execution function.
      * @param {Function} checkFn The test function.
      */
-    runActionOnFailedEv(fn, checkFn) {
+    private runActionOnFailedEv(fn: (ev: MatrixEvent) => void, checkFn?: (ev: MatrixEvent) => boolean): void {
         if (!checkFn) checkFn = () => true;
 
         const mxEvent = this.props.mxEvent;
@@ -215,18 +231,18 @@ export default class MessageActionBar extends React.PureComponent {
         }
     }
 
-    onResendClick = (ev) => {
+    private onResendClick = (ev: React.MouseEvent): void => {
         this.runActionOnFailedEv((tarEv) => Resend.resend(tarEv));
     };
 
-    onCancelClick = (ev) => {
+    private onCancelClick = (ev: React.MouseEvent): void => {
         this.runActionOnFailedEv(
             (tarEv) => Resend.removeFromQueue(tarEv),
             (testEv) => canCancel(testEv.status),
         );
     };
 
-    render() {
+    public render(): JSX.Element {
         const toolbarOpts = [];
         if (canEditContent(this.props.mxEvent)) {
             toolbarOpts.push(<RovingAccessibleTooltipButton
@@ -249,7 +265,7 @@ export default class MessageActionBar extends React.PureComponent {
         const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
         const redactStatus = mxEvent.localRedactionEvent() && mxEvent.localRedactionEvent().status;
         const allowCancel = canCancel(mxEvent.status) || canCancel(editStatus) || canCancel(redactStatus);
-        const isFailed = [mxEvent.status, editStatus, redactStatus].includes("not_sent");
+        const isFailed = [mxEvent.status, editStatus, redactStatus].includes(EventStatus.NOT_SENT);
         if (allowCancel && isFailed) {
             // The resend button needs to appear ahead of the edit button, so insert to the
             // start of the opts

src/components/views/right_panel/UserInfo.tsx

@@ -428,7 +428,7 @@ const UserOptionsSection: React.FC<{
     let directMessageButton;
     if (!isMe) {
         directMessageButton = (
-            <AccessibleButton onClick={() => openDMForUser(cli, member.userId)} className="mx_UserInfo_field">
+            <AccessibleButton onClick={() => { openDMForUser(cli, member.userId); }} className="mx_UserInfo_field">
                 { _t('Direct message') }
             </AccessibleButton>
         );

src/components/views/rooms/EditMessageComposer.tsx

@@ -43,11 +43,6 @@ import QuestionDialog from "../dialogs/QuestionDialog";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import AccessibleButton from '../elements/AccessibleButton';
 
-function eventIsReply(mxEvent: MatrixEvent): boolean {
-    const relatesTo = mxEvent.getContent()["m.relates_to"];
-    return !!(relatesTo && relatesTo["m.in_reply_to"]);
-}
-
 function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
     const html = mxEvent.getContent().formatted_body;
     if (!html) {
@@ -72,7 +67,7 @@ function createEditContent(model: EditorModel, editedEvent: MatrixEvent): IConte
     if (isEmote) {
         model = stripEmoteCommand(model);
     }
-    const isReply = eventIsReply(editedEvent);
+    const isReply = !!editedEvent.replyEventId;
     let plainPrefix = "";
     let htmlPrefix = "";
 

src/components/views/rooms/EventTile.tsx

@@ -243,6 +243,7 @@ interface IProps {
     // opaque readreceipt info for each userId; used by ReadReceiptMarker
     // to manage its animations. Should be an empty object when the room
     // first loads
+    // TODO: Proper typing for RR info
     readReceiptMap?: any;
 
     // A function which is used to check if the parent panel is being

src/components/views/rooms/JumpToBottomButton.tsx

@@ -14,11 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from "react";
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
 import classNames from 'classnames';
 
-export default (props) => {
+interface IProps {
+    numUnreadMessages: number;
+    highlight: boolean;
+    onScrollToBottomClick: (e: React.MouseEvent) => void;
+}
+
+const JumpToBottomButton: React.FC<IProps> = (props) => {
     const className = classNames({
         'mx_JumpToBottomButton': true,
         'mx_JumpToBottomButton_highlight': props.highlight,
@@ -36,3 +43,5 @@ export default (props) => {
         { badge }
     </div>);
 };
+
+export default JumpToBottomButton;

src/components/views/rooms/MessageComposer.tsx

@@ -183,6 +183,7 @@ interface IProps {
     resizeNotifier: ResizeNotifier;
     permalinkCreator: RoomPermalinkCreator;
     replyToEvent?: MatrixEvent;
+    replyInThread?: boolean;
     showReplyPreview?: boolean;
     e2eStatus?: E2EStatus;
     compact?: boolean;
@@ -204,6 +205,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     private voiceRecordingButton: VoiceRecordComposerTile;
 
     static defaultProps = {
+        replyInThread: false,
         showReplyPreview: true,
         compact: false,
     };
@@ -383,6 +385,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                     room={this.props.room}
                     placeholder={this.renderPlaceholderText()}
                     permalinkCreator={this.props.permalinkCreator}
+                    replyInThread={this.props.replyInThread}
                     replyToEvent={this.props.replyToEvent}
                     onChange={this.onChange}
                     disabled={this.state.haveRecording}

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -15,62 +15,75 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { createRef, RefObject } from 'react';
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+
 import { _t } from '../../../languageHandler';
 import { formatDate } from '../../../DateUtils';
 import NodeAnimator from "../../../NodeAnimator";
-import * as sdk from "../../../index";
 import { toPx } from "../../../utils/units";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+import MemberAvatar from '../avatars/MemberAvatar';
+
+interface IProps {
+    // the RoomMember to show the RR for
+    member?: RoomMember;
+    // userId to fallback the avatar to
+    // if the member hasn't been loaded yet
+    fallbackUserId: string;
+
+    // number of pixels to offset the avatar from the right of its parent;
+    // typically a negative value.
+    leftOffset?: number;
+
+    // true to hide the avatar (it will still be animated)
+    hidden?: boolean;
+
+    // don't animate this RR into position
+    suppressAnimation?: boolean;
+
+    // an opaque object for storing information about this user's RR in
+    // this room
+    // TODO: proper typing for RR info
+    readReceiptInfo: any;
+
+    // A function which is used to check if the parent panel is being
+    // unmounted, to avoid unnecessary work. Should return true if we
+    // are being unmounted.
+    checkUnmounting?: () => boolean;
+
+    // callback for clicks on this RR
+    onClick?: (e: React.MouseEvent) => void;
+
+    // Timestamp when the receipt was read
+    timestamp?: number;
+
+    // True to show twelve hour format, false otherwise
+    showTwelveHour?: boolean;
+}
+
+interface IState {
+    suppressDisplay: boolean;
+    startStyles?: IReadReceiptMarkerStyle[];
+}
+
+interface IReadReceiptMarkerStyle {
+    top: number;
+    left: number;
+}
+
 @replaceableComponent("views.rooms.ReadReceiptMarker")
-export default class ReadReceiptMarker extends React.PureComponent {
-    static propTypes = {
-        // the RoomMember to show the RR for
-        member: PropTypes.object,
-        // userId to fallback the avatar to
-        // if the member hasn't been loaded yet
-        fallbackUserId: PropTypes.string.isRequired,
-
-        // number of pixels to offset the avatar from the right of its parent;
-        // typically a negative value.
-        leftOffset: PropTypes.number,
-
-        // true to hide the avatar (it will still be animated)
-        hidden: PropTypes.bool,
-
-        // don't animate this RR into position
-        suppressAnimation: PropTypes.bool,
-
-        // an opaque object for storing information about this user's RR in
-        // this room
-        readReceiptInfo: PropTypes.object,
-
-        // A function which is used to check if the parent panel is being
-        // unmounted, to avoid unnecessary work. Should return true if we
-        // are being unmounted.
-        checkUnmounting: PropTypes.func,
-
-        // callback for clicks on this RR
-        onClick: PropTypes.func,
-
-        // Timestamp when the receipt was read
-        timestamp: PropTypes.number,
-
-        // True to show twelve hour format, false otherwise
-        showTwelveHour: PropTypes.bool,
-    };
+export default class ReadReceiptMarker extends React.PureComponent<IProps, IState> {
+    private avatar: React.RefObject<HTMLDivElement | HTMLImageElement | HTMLSpanElement> = createRef();
 
     static defaultProps = {
         leftOffset: 0,
     };
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
-        this._avatar = createRef();
-
         this.state = {
             // if we are going to animate the RR, we don't show it on first render,
             // and instead just add a placeholder to the DOM; once we've been
@@ -80,7 +93,7 @@ export default class ReadReceiptMarker extends React.PureComponent {
         };
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         // before we remove the rr, store its location in the map, so that if
         // it reappears, it can be animated from the right place.
         const rrInfo = this.props.readReceiptInfo;
@@ -95,29 +108,29 @@ export default class ReadReceiptMarker extends React.PureComponent {
             return;
         }
 
-        const avatarNode = this._avatar.current;
+        const avatarNode = this.avatar.current;
         rrInfo.top = avatarNode.offsetTop;
         rrInfo.left = avatarNode.offsetLeft;
         rrInfo.parent = avatarNode.offsetParent;
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         if (!this.state.suppressDisplay) {
             // we've already done our display - nothing more to do.
             return;
         }
-        this._animateMarker();
+        this.animateMarker();
     }
 
-    componentDidUpdate(prevProps) {
+    public componentDidUpdate(prevProps: IProps): void {
         const differentLeftOffset = prevProps.leftOffset !== this.props.leftOffset;
         const visibilityChanged = prevProps.hidden !== this.props.hidden;
         if (differentLeftOffset || visibilityChanged) {
-            this._animateMarker();
+            this.animateMarker();
         }
     }
 
-    _animateMarker() {
+    private animateMarker(): void {
         // treat new RRs as though they were off the top of the screen
         let oldTop = -15;
 
@@ -126,7 +139,7 @@ export default class ReadReceiptMarker extends React.PureComponent {
             oldTop = oldInfo.top + oldInfo.parent.getBoundingClientRect().top;
         }
 
-        const newElement = this._avatar.current;
+        const newElement = this.avatar.current;
         let startTopOffset;
         if (!newElement.offsetParent) {
             // this seems to happen sometimes for reasons I don't understand
@@ -156,10 +169,9 @@ export default class ReadReceiptMarker extends React.PureComponent {
         });
     }
 
-    render() {
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+    public render(): JSX.Element {
         if (this.state.suppressDisplay) {
-            return <div ref={this._avatar} />;
+            return <div ref={this.avatar as RefObject<HTMLDivElement>} />;
         }
 
         const style = {
@@ -198,7 +210,7 @@ export default class ReadReceiptMarker extends React.PureComponent {
                     style={style}
                     title={title}
                     onClick={this.props.onClick}
-                    inputRef={this._avatar}
+                    inputRef={this.avatar as RefObject<HTMLImageElement>}
                 />
             </NodeAnimator>
         );

src/components/views/rooms/RoomDetailList.tsx

@@ -14,41 +14,38 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as sdk from '../../../index';
-import dis from '../../../dispatcher/dispatcher';
 import React from 'react';
-import { _t } from '../../../languageHandler';
-import PropTypes from 'prop-types';
+import { Room } from 'matrix-js-sdk/src';
 import classNames from 'classnames';
+import dis from '../../../dispatcher/dispatcher';
+import { _t } from '../../../languageHandler';
 
-import { roomShape } from './RoomDetailRow';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import RoomDetailRow from "./RoomDetailRow";
+
+interface IProps {
+    rooms?: Room[];
+    className?: string;
+}
 
 @replaceableComponent("views.rooms.RoomDetailList")
-export default class RoomDetailList extends React.Component {
-    static propTypes = {
-        rooms: PropTypes.arrayOf(roomShape),
-        className: PropTypes.string,
-    };
-
-    getRows() {
+export default class RoomDetailList extends React.Component<IProps> {
+    private getRows(): JSX.Element[] {
         if (!this.props.rooms) return [];
-
-        const RoomDetailRow = sdk.getComponent('rooms.RoomDetailRow');
         return this.props.rooms.map((room, index) => {
             return <RoomDetailRow key={index} room={room} onClick={this.onDetailsClick} />;
         });
     }
 
-    onDetailsClick = (ev, room) => {
+    private onDetailsClick = (ev: React.MouseEvent, room: Room): void => {
         dis.dispatch({
             action: 'view_room',
             room_id: room.roomId,
-            room_alias: room.canonicalAlias || (room.aliases || [])[0],
+            room_alias: room.getCanonicalAlias() || (room.getAltAliases() || [])[0],
         });
     };
 
-    render() {
+    public render(): JSX.Element {
         const rows = this.getRows();
         let rooms;
         if (rows.length === 0) {

src/components/views/rooms/RoomHeader.tsx

@@ -195,7 +195,7 @@ export default class RoomHeader extends React.Component<IProps> {
             videoCallButton =
                 <AccessibleTooltipButton
                     className="mx_RoomHeader_button mx_RoomHeader_videoCallButton"
-                    onClick={(ev) => ev.shiftKey ?
+                    onClick={(ev: React.MouseEvent<Element>) => ev.shiftKey ?
                         this.displayInfoDialogAboutScreensharing() : this.props.onCallPlaced(PlaceCallType.Video)}
                     title={_t("Video call")} />;
         }

src/components/views/rooms/RoomPreviewBar.js

@@ -28,6 +28,8 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import InviteReason from "../elements/InviteReason";
 
+const MemberEventHtmlReasonField = "io.element.html_reason";
+
 const MessageCase = Object.freeze({
     NotLoggedIn: "NotLoggedIn",
     Joining: "Joining",
@@ -492,9 +494,13 @@ export default class RoomPreviewBar extends React.Component {
                 }
 
                 const myUserId = MatrixClientPeg.get().getUserId();
-                const reason = this.props.room.currentState.getMember(myUserId).events.member.event.content.reason;
-                if (reason) {
-                    reasonElement = <InviteReason reason={reason} />;
+                const memberEventContent = this.props.room.currentState.getMember(myUserId).events.member.getContent();
+
+                if (memberEventContent.reason) {
+                    reasonElement = <InviteReason
+                        reason={memberEventContent.reason}
+                        htmlReason={memberEventContent[MemberEventHtmlReasonField]}
+                    />;
                 }
 
                 primaryActionHandler = this.props.onJoinClick;

src/components/views/rooms/RoomUpgradeWarningBar.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2018-2020 New Vector Ltd
+Copyright 2018-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,41 +15,43 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { RoomState } from 'matrix-js-sdk/src/models/room-state';
+
 import Modal from '../../../Modal';
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import RoomUpgradeDialog from '../dialogs/RoomUpgradeDialog';
+import AccessibleButton from '../elements/AccessibleButton';
+
+interface IProps {
+    room: Room;
+}
+
+interface IState {
+    upgraded?: boolean;
+}
 
 @replaceableComponent("views.rooms.RoomUpgradeWarningBar")
-export default class RoomUpgradeWarningBar extends React.PureComponent {
-    static propTypes = {
-        room: PropTypes.object.isRequired,
-        recommendation: PropTypes.object.isRequired,
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
-
-    componentDidMount() {
+export default class RoomUpgradeWarningBar extends React.PureComponent<IProps, IState> {
+    public componentDidMount(): void {
         const tombstone = this.props.room.currentState.getStateEvents("m.room.tombstone", "");
         this.setState({ upgraded: tombstone && tombstone.getContent().replacement_room });
 
-        MatrixClientPeg.get().on("RoomState.events", this._onStateEvents);
+        MatrixClientPeg.get().on("RoomState.events", this.onStateEvents);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         const cli = MatrixClientPeg.get();
         if (cli) {
-            cli.removeListener("RoomState.events", this._onStateEvents);
+            cli.removeListener("RoomState.events", this.onStateEvents);
         }
     }
 
-    _onStateEvents = (event, state) => {
+    private onStateEvents = (event: MatrixEvent, state: RoomState): void => {
         if (!this.props.room || event.getRoomId() !== this.props.room.roomId) {
             return;
         }
@@ -60,14 +62,11 @@ export default class RoomUpgradeWarningBar extends React.PureComponent {
         this.setState({ upgraded: tombstone && tombstone.getContent().replacement_room });
     };
 
-    onUpgradeClick = () => {
-        const RoomUpgradeDialog = sdk.getComponent('dialogs.RoomUpgradeDialog');
+    private onUpgradeClick = (): void => {
         Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, { room: this.props.room });
     };
 
-    render() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
+    public render(): JSX.Element {
         let doUpgradeWarnings = (
             <div>
                 <div className="mx_RoomUpgradeWarningBar_body">

src/components/views/rooms/SendMessageComposer.tsx

@@ -57,15 +57,16 @@ import { ActionPayload } from "../../../dispatcher/payloads";
 
 function addReplyToMessageContent(
     content: IContent,
-    repliedToEvent: MatrixEvent,
+    replyToEvent: MatrixEvent,
+    replyInThread: boolean,
     permalinkCreator: RoomPermalinkCreator,
 ): void {
-    const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
+    const replyContent = ReplyThread.makeReplyMixIn(replyToEvent, replyInThread);
     Object.assign(content, replyContent);
 
     // Part of Replies fallback support - prepend the text we're sending
     // with the text we're replying to
-    const nestedReply = ReplyThread.getNestedReplyText(repliedToEvent, permalinkCreator);
+    const nestedReply = ReplyThread.getNestedReplyText(replyToEvent, permalinkCreator);
     if (nestedReply) {
         if (content.formatted_body) {
             content.formatted_body = nestedReply.html + content.formatted_body;
@@ -77,8 +78,9 @@ function addReplyToMessageContent(
 // exported for tests
 export function createMessageContent(
     model: EditorModel,
-    permalinkCreator: RoomPermalinkCreator,
     replyToEvent: MatrixEvent,
+    replyInThread: boolean,
+    permalinkCreator: RoomPermalinkCreator,
 ): IContent {
     const isEmote = containsEmote(model);
     if (isEmote) {
@@ -101,7 +103,7 @@ export function createMessageContent(
     }
 
     if (replyToEvent) {
-        addReplyToMessageContent(content, replyToEvent, permalinkCreator);
+        addReplyToMessageContent(content, replyToEvent, replyInThread, permalinkCreator);
     }
 
     return content;
@@ -129,6 +131,7 @@ interface IProps {
     room: Room;
     placeholder?: string;
     permalinkCreator: RoomPermalinkCreator;
+    replyInThread?: boolean;
     replyToEvent?: MatrixEvent;
     disabled?: boolean;
     onChange?(model: EditorModel): void;
@@ -357,7 +360,12 @@ export default class SendMessageComposer extends React.Component<IProps> {
                 if (cmd.category === CommandCategories.messages) {
                     content = await this.runSlashCommand(cmd, args);
                     if (replyToEvent) {
-                        addReplyToMessageContent(content, replyToEvent, this.props.permalinkCreator);
+                        addReplyToMessageContent(
+                            content,
+                            replyToEvent,
+                            this.props.replyInThread,
+                            this.props.permalinkCreator,
+                        );
                     }
                 } else {
                     this.runSlashCommand(cmd, args);
@@ -400,7 +408,12 @@ export default class SendMessageComposer extends React.Component<IProps> {
             const startTime = CountlyAnalytics.getTimestamp();
             const { roomId } = this.props.room;
             if (!content) {
-                content = createMessageContent(this.model, this.props.permalinkCreator, replyToEvent);
+                content = createMessageContent(
+                    this.model,
+                    replyToEvent,
+                    this.props.replyInThread,
+                    this.props.permalinkCreator,
+                );
             }
             // don't bother sending an empty message
             if (!content.body.trim()) return;

src/components/views/rooms/SimpleRoomHeader.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
+Copyright 2016-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,23 +15,21 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+interface IProps {
+    title?: string;
+    // `src` to an image. Optional.
+    icon?: string;
+}
+
 /*
  * A stripped-down room header used for things like the user settings
  * and room directory.
  */
 @replaceableComponent("views.rooms.SimpleRoomHeader")
-export default class SimpleRoomHeader extends React.Component {
-    static propTypes = {
-        title: PropTypes.string,
-
-        // `src` to an image. Optional.
-        icon: PropTypes.string,
-    };
-
-    render() {
+export default class SimpleRoomHeader extends React.PureComponent<IProps> {
+    public render(): JSX.Element {
         let icon;
         if (this.props.icon) {
             icon = <img

src/components/views/rooms/TopUnreadMessagesBar.tsx

@@ -1,7 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2019 New Vector Ltd
+Copyright 2016 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,19 +15,18 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.rooms.TopUnreadMessagesBar")
-export default class TopUnreadMessagesBar extends React.Component {
-    static propTypes = {
-        onScrollUpClick: PropTypes.func,
-        onCloseClick: PropTypes.func,
-    };
+interface IProps {
+    onScrollUpClick?: (e: React.MouseEvent) => void;
+    onCloseClick?: (e: React.MouseEvent) => void;
+}
 
-    render() {
+@replaceableComponent("views.rooms.TopUnreadMessagesBar")
+export default class TopUnreadMessagesBar extends React.PureComponent<IProps> {
+    public render(): JSX.Element {
         return (
             <div className="mx_TopUnreadMessagesBar">
                 <AccessibleButton

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -179,7 +179,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
 
         try {
             // stop any noises which might be happening
-            await PlaybackManager.instance.playOnly(null);
+            await PlaybackManager.instance.pauseAllExcept(null);
 
             const recorder = VoiceRecordingStore.instance.startRecording();
             await recorder.start();

src/components/views/settings/AvatarSetting.tsx

@@ -15,12 +15,19 @@ limitations under the License.
 */
 
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import classNames from "classnames";
 
-const AvatarSetting = ({ avatarUrl, avatarAltText, avatarName, uploadAvatar, removeAvatar }) => {
+interface IProps {
+    avatarUrl?: string;
+    avatarName: string; // name of user/room the avatar belongs to
+    uploadAvatar?: (e: React.MouseEvent) => void;
+    removeAvatar?: (e: React.MouseEvent) => void;
+    avatarAltText: string;
+}
+
+const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName, uploadAvatar, removeAvatar }) => {
     const [isHovering, setIsHovering] = useState(false);
     const hoveringProps = {
         onMouseEnter: () => setIsHovering(true),
@@ -78,12 +85,4 @@ const AvatarSetting = ({ avatarUrl, avatarAltText, avatarName, uploadAvatar, rem
     </div>;
 };
 
-AvatarSetting.propTypes = {
-    avatarUrl: PropTypes.string,
-    avatarName: PropTypes.string.isRequired, // name of user/room the avatar belongs to
-    uploadAvatar: PropTypes.func,
-    removeAvatar: PropTypes.func,
-    avatarAltText: PropTypes.string.isRequired,
-};
-
 export default AvatarSetting;

src/components/views/settings/ChangeAvatar.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,54 +15,65 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { Room } from 'matrix-js-sdk/src/models/room';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Spinner from '../elements/Spinner';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import RoomAvatar from '../avatars/RoomAvatar';
+import BaseAvatar from '../avatars/BaseAvatar';
+
+interface IProps {
+    initialAvatarUrl?: string;
+    room?: Room;
+    // if false, you need to call changeAvatar.onFileSelected yourself.
+    showUploadSection?: boolean;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+
+interface IState {
+    avatarUrl?: string;
+    errorText?: string;
+    phase?: Phases;
+}
+
+enum Phases {
+    Display = "display",
+    Uploading = "uploading",
+    Error = "error",
+}
 
 @replaceableComponent("views.settings.ChangeAvatar")
-export default class ChangeAvatar extends React.Component {
-    static propTypes = {
-        initialAvatarUrl: PropTypes.string,
-        room: PropTypes.object,
-        // if false, you need to call changeAvatar.onFileSelected yourself.
-        showUploadSection: PropTypes.bool,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        className: PropTypes.string,
-    };
-
-    static Phases = {
-        Display: "display",
-        Uploading: "uploading",
-        Error: "error",
-    };
-
-    static defaultProps = {
+export default class ChangeAvatar extends React.Component<IProps, IState> {
+    public static defaultProps = {
         showUploadSection: true,
         className: "",
         width: 80,
         height: 80,
     };
 
-    constructor(props) {
+    private avatarSet = false;
+
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
             avatarUrl: this.props.initialAvatarUrl,
-            phase: ChangeAvatar.Phases.Display,
+            phase: Phases.Display,
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line camelcase
+    // eslint-disable-next-line
+    public UNSAFE_componentWillReceiveProps(newProps: IProps): void {
         if (this.avatarSet) {
             // don't clobber what the user has just set
             return;
@@ -72,13 +83,13 @@ export default class ChangeAvatar extends React.Component {
         });
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
         }
     }
 
-    onRoomStateEvents = (ev) => {
+    private onRoomStateEvents = (ev: MatrixEvent) => {
         if (!this.props.room) {
             return;
         }
@@ -94,18 +105,17 @@ export default class ChangeAvatar extends React.Component {
         }
     };
 
-    setAvatarFromFile(file) {
+    private setAvatarFromFile(file: File): Promise<{}> {
         let newUrl = null;
 
         this.setState({
-            phase: ChangeAvatar.Phases.Uploading,
+            phase: Phases.Uploading,
         });
-        const self = this;
-        const httpPromise = MatrixClientPeg.get().uploadContent(file).then(function(url) {
+        const httpPromise = MatrixClientPeg.get().uploadContent(file).then((url) => {
             newUrl = url;
-            if (self.props.room) {
+            if (this.props.room) {
                 return MatrixClientPeg.get().sendStateEvent(
-                    self.props.room.roomId,
+                    this.props.room.roomId,
                     'm.room.avatar',
                     { url: url },
                     '',
@@ -115,38 +125,37 @@ export default class ChangeAvatar extends React.Component {
             }
         });
 
-        httpPromise.then(function() {
-            self.setState({
-                phase: ChangeAvatar.Phases.Display,
+        httpPromise.then(() => {
+            this.setState({
+                phase: Phases.Display,
                 avatarUrl: mediaFromMxc(newUrl).srcHttp,
             });
-        }, function(error) {
-            self.setState({
-                phase: ChangeAvatar.Phases.Error,
+        }, () => {
+            this.setState({
+                phase: Phases.Error,
             });
-            self.onError(error);
+            this.onError();
         });
 
         return httpPromise;
     }
 
-    onFileSelected = (ev) => {
+    private onFileSelected = (ev: React.ChangeEvent<HTMLInputElement>) => {
         this.avatarSet = true;
         return this.setAvatarFromFile(ev.target.files[0]);
     };
 
-    onError = (error) => {
+    private onError = (): void => {
         this.setState({
             errorText: _t("Failed to upload profile picture!"),
         });
     };
 
-    render() {
+    public render(): JSX.Element {
         let avatarImg;
         // Having just set an avatar we just display that since it will take a little
         // time to propagate through to the RoomAvatar.
         if (this.props.room && !this.avatarSet) {
-            const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
             avatarImg = <RoomAvatar
                 room={this.props.room}
                 width={this.props.width}
@@ -154,7 +163,6 @@ export default class ChangeAvatar extends React.Component {
                 resizeMethod='crop'
             />;
         } else {
-            const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
             // XXX: FIXME: once we track in the JS what our own displayname is(!) then use it here rather than ?
             avatarImg = <BaseAvatar
                 width={this.props.width}
@@ -178,8 +186,8 @@ export default class ChangeAvatar extends React.Component {
         }
 
         switch (this.state.phase) {
-            case ChangeAvatar.Phases.Display:
-            case ChangeAvatar.Phases.Error:
+            case Phases.Display:
+            case Phases.Error:
                 return (
                     <div>
                         <div className={this.props.className}>
@@ -188,7 +196,7 @@ export default class ChangeAvatar extends React.Component {
                         { uploadSection }
                     </div>
                 );
-            case ChangeAvatar.Phases.Uploading:
+            case Phases.Uploading:
                 return (
                     <Spinner />
                 );

src/components/views/settings/ChangeDisplayName.tsx

@@ -1,7 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,14 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import EditableTextContainer from "../elements/EditableTextContainer";
 
 @replaceableComponent("views.settings.ChangeDisplayName")
 export default class ChangeDisplayName extends React.Component {
-    _getDisplayName = async () => {
+    private getDisplayName = async (): Promise<string> => {
         const cli = MatrixClientPeg.get();
         try {
             const res = await cli.getProfileInfo(cli.getUserId());
@@ -34,21 +32,20 @@ export default class ChangeDisplayName extends React.Component {
         }
     };
 
-    _changeDisplayName = (newDisplayname) => {
+    private changeDisplayName = (newDisplayname: string): Promise<{}> => {
         const cli = MatrixClientPeg.get();
-        return cli.setDisplayName(newDisplayname).catch(function(e) {
-            throw new Error("Failed to set display name", e);
+        return cli.setDisplayName(newDisplayname).catch(function() {
+            throw new Error("Failed to set display name");
         });
     };
 
-    render() {
-        const EditableTextContainer = sdk.getComponent('elements.EditableTextContainer');
+    public render(): JSX.Element {
         return (
             <EditableTextContainer
-                getInitialValue={this._getDisplayName}
+                getInitialValue={this.getDisplayName}
                 placeholder={_t("No display name")}
                 blurToSubmit={true}
-                onSubmit={this._changeDisplayName} />
+                onSubmit={this.changeDisplayName} />
         );
     }
 }

src/components/views/settings/DevicesPanel.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2016 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,52 +15,58 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { IMyDevice } from "matrix-js-sdk/src/client";
 
-import * as sdk from '../../../index';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import InteractiveAuthDialog from "../dialogs/InteractiveAuthDialog";
+import DevicesPanelEntry from "./DevicesPanelEntry";
+import Spinner from "../elements/Spinner";
+import AccessibleButton from "../elements/AccessibleButton";
+
+interface IProps {
+    className?: string;
+}
+
+interface IState {
+    devices: IMyDevice[];
+    deviceLoadError?: string;
+    selectedDevices: string[];
+    deleting?: boolean;
+}
 
 @replaceableComponent("views.settings.DevicesPanel")
-export default class DevicesPanel extends React.Component {
-    constructor(props) {
+export default class DevicesPanel extends React.Component<IProps, IState> {
+    private unmounted = false;
+
+    constructor(props: IProps) {
         super(props);
-
         this.state = {
-            devices: undefined,
-            deviceLoadError: undefined,
-
+            devices: [],
             selectedDevices: [],
-            deleting: false,
         };
-
-        this._unmounted = false;
-
-        this._renderDevice = this._renderDevice.bind(this);
-        this._onDeviceSelectionToggled = this._onDeviceSelectionToggled.bind(this);
-        this._onDeleteClick = this._onDeleteClick.bind(this);
     }
 
-    componentDidMount() {
-        this._loadDevices();
+    public componentDidMount(): void {
+        this.loadDevices();
     }
 
-    componentWillUnmount() {
-        this._unmounted = true;
+    public componentWillUnmount(): void {
+        this.unmounted = true;
     }
 
-    _loadDevices() {
+    private loadDevices(): void {
         MatrixClientPeg.get().getDevices().then(
             (resp) => {
-                if (this._unmounted) { return; }
+                if (this.unmounted) { return; }
                 this.setState({ devices: resp.devices || [] });
             },
             (error) => {
-                if (this._unmounted) { return; }
+                if (this.unmounted) { return; }
                 let errtxt;
                 if (error.httpStatus == 404) {
                     // 404 probably means the HS doesn't yet support the API.
@@ -79,7 +84,7 @@ export default class DevicesPanel extends React.Component {
      * compare two devices, sorting from most-recently-seen to least-recently-seen
      * (and then, for stability, by device id)
      */
-    _deviceCompare(a, b) {
+    private deviceCompare(a: IMyDevice, b: IMyDevice): number {
         // return < 0 if a comes before b, > 0 if a comes after b.
         const lastSeenDelta =
               (b.last_seen_ts || 0) - (a.last_seen_ts || 0);
@@ -91,8 +96,8 @@ export default class DevicesPanel extends React.Component {
         return (idA < idB) ? -1 : (idA > idB) ? 1 : 0;
     }
 
-    _onDeviceSelectionToggled(device) {
-        if (this._unmounted) { return; }
+    private onDeviceSelectionToggled = (device: IMyDevice): void => {
+        if (this.unmounted) { return; }
 
         const deviceId = device.device_id;
         this.setState((state, props) => {
@@ -108,22 +113,21 @@ export default class DevicesPanel extends React.Component {
 
             return { selectedDevices };
         });
-    }
+    };
 
-    _onDeleteClick() {
+    private onDeleteClick = (): void => {
         this.setState({
             deleting: true,
         });
 
-        this._makeDeleteRequest(null).catch((error) => {
-            if (this._unmounted) { return; }
+        this.makeDeleteRequest(null).catch((error) => {
+            if (this.unmounted) { return; }
             if (error.httpStatus !== 401 || !error.data || !error.data.flows) {
                 // doesn't look like an interactive-auth failure
                 throw error;
             }
 
             // pop up an interactive auth dialog
-            const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
 
             const numDevices = this.state.selectedDevices.length;
             const dialogAesthetics = {
@@ -148,7 +152,7 @@ export default class DevicesPanel extends React.Component {
                 title: _t("Authentication"),
                 matrixClient: MatrixClientPeg.get(),
                 authData: error.data,
-                makeRequest: this._makeDeleteRequest.bind(this),
+                makeRequest: this.makeDeleteRequest.bind(this),
                 aestheticsForStagePhases: {
                     [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
                     [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
@@ -156,15 +160,16 @@ export default class DevicesPanel extends React.Component {
             });
         }).catch((e) => {
             console.error("Error deleting sessions", e);
-            if (this._unmounted) { return; }
+            if (this.unmounted) { return; }
         }).finally(() => {
             this.setState({
                 deleting: false,
             });
         });
-    }
+    };
 
-    _makeDeleteRequest(auth) {
+    // TODO: proper typing for auth
+    private makeDeleteRequest(auth?: any): Promise<any> {
         return MatrixClientPeg.get().deleteMultipleDevices(this.state.selectedDevices, auth).then(
             () => {
                 // Remove the deleted devices from `devices`, reset selection to []
@@ -178,20 +183,16 @@ export default class DevicesPanel extends React.Component {
         );
     }
 
-    _renderDevice(device) {
-        const DevicesPanelEntry = sdk.getComponent('settings.DevicesPanelEntry');
+    private renderDevice = (device: IMyDevice): JSX.Element => {
         return <DevicesPanelEntry
             key={device.device_id}
             device={device}
             selected={this.state.selectedDevices.includes(device.device_id)}
-            onDeviceToggled={this._onDeviceSelectionToggled}
+            onDeviceToggled={this.onDeviceSelectionToggled}
         />;
-    }
-
-    render() {
-        const Spinner = sdk.getComponent("elements.Spinner");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+    };
 
+    public render(): JSX.Element {
         if (this.state.deviceLoadError !== undefined) {
             const classes = classNames(this.props.className, "error");
             return (
@@ -204,15 +205,14 @@ export default class DevicesPanel extends React.Component {
         const devices = this.state.devices;
         if (devices === undefined) {
             // still loading
-            const classes = this.props.className;
-            return <Spinner className={classes} />;
+            return <Spinner />;
         }
 
-        devices.sort(this._deviceCompare);
+        devices.sort(this.deviceCompare);
 
         const deleteButton = this.state.deleting ?
             <Spinner w={22} h={22} /> :
-            <AccessibleButton onClick={this._onDeleteClick} kind="danger_sm">
+            <AccessibleButton onClick={this.onDeleteClick} kind="danger_sm">
                 { _t("Delete %(count)s sessions", { count: this.state.selectedDevices.length }) }
             </AccessibleButton>;
 
@@ -227,12 +227,8 @@ export default class DevicesPanel extends React.Component {
                         { this.state.selectedDevices.length > 0 ? deleteButton : null }
                     </div>
                 </div>
-                { devices.map(this._renderDevice) }
+                { devices.map(this.renderDevice) }
             </div>
         );
     }
 }
-
-DevicesPanel.propTypes = {
-    className: PropTypes.string,
-};

src/components/views/settings/DevicesPanelEntry.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
+Copyright 2016 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,30 +15,28 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { IMyDevice } from 'matrix-js-sdk/src/client';
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { formatDate } from '../../../DateUtils';
 import StyledCheckbox from '../elements/StyledCheckbox';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import EditableTextContainer from "../elements/EditableTextContainer";
+
+interface IProps {
+    device?: IMyDevice;
+    onDeviceToggled?: (device: IMyDevice) => void;
+    selected?: boolean;
+}
 
 @replaceableComponent("views.settings.DevicesPanelEntry")
-export default class DevicesPanelEntry extends React.Component {
-    constructor(props) {
-        super(props);
+export default class DevicesPanelEntry extends React.Component<IProps> {
+    public static defaultProps = {
+        onDeviceToggled: () => {},
+    };
 
-        this._unmounted = false;
-        this.onDeviceToggled = this.onDeviceToggled.bind(this);
-        this._onDisplayNameChanged = this._onDisplayNameChanged.bind(this);
-    }
-
-    componentWillUnmount() {
-        this._unmounted = true;
-    }
-
-    _onDisplayNameChanged(value) {
+    private onDisplayNameChanged = (value: string): Promise<{}> => {
         const device = this.props.device;
         return MatrixClientPeg.get().setDeviceDetails(device.device_id, {
             display_name: value,
@@ -46,15 +44,13 @@ export default class DevicesPanelEntry extends React.Component {
             console.error("Error setting session display name", e);
             throw new Error(_t("Failed to set display name"));
         });
-    }
+    };
 
-    onDeviceToggled() {
+    private onDeviceToggled = (): void => {
         this.props.onDeviceToggled(this.props.device);
-    }
-
-    render() {
-        const EditableTextContainer = sdk.getComponent('elements.EditableTextContainer');
+    };
 
+    public render(): JSX.Element {
         const device = this.props.device;
 
         let lastSeen = "";
@@ -76,7 +72,7 @@ export default class DevicesPanelEntry extends React.Component {
                 </div>
                 <div className="mx_DevicesPanel_deviceName">
                     <EditableTextContainer initialValue={device.display_name}
-                        onSubmit={this._onDisplayNameChanged}
+                        onSubmit={this.onDisplayNameChanged}
                         placeholder={device.device_id}
                     />
                 </div>
@@ -90,12 +86,3 @@ export default class DevicesPanelEntry extends React.Component {
         );
     }
 }
-
-DevicesPanelEntry.propTypes = {
-    device: PropTypes.object.isRequired,
-    onDeviceToggled: PropTypes.func,
-};
-
-DevicesPanelEntry.defaultProps = {
-    onDeviceToggled: function() {},
-};

src/components/views/settings/IntegrationManager.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,53 +15,55 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
 import { Key } from "../../../Keyboard";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ActionPayload } from '../../../dispatcher/payloads';
+import Spinner from "../elements/Spinner";
+
+interface IProps {
+    // false to display an error saying that we couldn't connect to the integration manager
+    connected: boolean;
+
+    // true to display a loading spinner
+    loading: boolean;
+
+    // The source URL to load
+    url?: string;
+
+    // callback when the manager is dismissed
+    onFinished: () => void;
+}
+
+interface IState {
+    errored: boolean;
+}
 
 @replaceableComponent("views.settings.IntegrationManager")
-export default class IntegrationManager extends React.Component {
-    static propTypes = {
-        // false to display an error saying that we couldn't connect to the integration manager
-        connected: PropTypes.bool.isRequired,
+export default class IntegrationManager extends React.Component<IProps, IState> {
+    private dispatcherRef: string;
 
-        // true to display a loading spinner
-        loading: PropTypes.bool.isRequired,
-
-        // The source URL to load
-        url: PropTypes.string,
-
-        // callback when the manager is dismissed
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    static defaultProps = {
+    public static defaultProps = {
         connected: true,
         loading: false,
     };
 
-    constructor(props) {
-        super(props);
+    public state = {
+        errored: false,
+    };
 
-        this.state = {
-            errored: false,
-        };
-    }
-
-    componentDidMount() {
+    public componentDidMount(): void {
         this.dispatcherRef = dis.register(this.onAction);
         document.addEventListener("keydown", this.onKeyDown);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         dis.unregister(this.dispatcherRef);
         document.removeEventListener("keydown", this.onKeyDown);
     }
 
-    onKeyDown = (ev) => {
+    private onKeyDown = (ev: KeyboardEvent): void => {
         if (ev.key === Key.ESCAPE) {
             ev.stopPropagation();
             ev.preventDefault();
@@ -70,19 +71,18 @@ export default class IntegrationManager extends React.Component {
         }
     };
 
-    onAction = (payload) => {
+    private onAction = (payload: ActionPayload): void => {
         if (payload.action === 'close_scalar') {
             this.props.onFinished();
         }
     };
 
-    onError = () => {
+    private onError = (): void => {
         this.setState({ errored: true });
     };
 
-    render() {
+    public render(): JSX.Element {
         if (this.props.loading) {
-            const Spinner = sdk.getComponent("elements.Spinner");
             return (
                 <div className='mx_IntegrationManager_loading'>
                     <h3>{ _t("Connecting to integration manager...") }</h3>

src/components/views/settings/LayoutSwitcher.tsx

@@ -26,7 +26,7 @@ import { Layout } from "../../../settings/Layout";
 import { SettingLevel } from "../../../settings/SettingLevel";
 
 interface IProps {
-    userId: string;
+    userId?: string;
     displayName: string;
     avatarUrl: string;
     messagePreviewText: string;

src/components/views/settings/ProfileSettings.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,17 +19,30 @@ import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Field from "../elements/Field";
 import { getHostingLink } from '../../../utils/HostingLink';
-import * as sdk from "../../../index";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import AccessibleButton from '../elements/AccessibleButton';
+import AvatarSetting from './AvatarSetting';
+
+interface IState {
+    userId?: string;
+    originalDisplayName?: string;
+    displayName?: string;
+    originalAvatarUrl?: string;
+    avatarUrl?: string | ArrayBuffer;
+    avatarFile?: File;
+    enableProfileSave?: boolean;
+}
 
 @replaceableComponent("views.settings.ProfileSettings")
-export default class ProfileSettings extends React.Component {
-    constructor() {
-        super();
+export default class ProfileSettings extends React.Component<{}, IState> {
+    private avatarUpload: React.RefObject<HTMLInputElement> = createRef();
+
+    constructor(props: {}) {
+        super(props);
 
         const client = MatrixClientPeg.get();
         let avatarUrl = OwnProfileStore.instance.avatarMxc;
@@ -43,17 +56,15 @@ export default class ProfileSettings extends React.Component {
             avatarFile: null,
             enableProfileSave: false,
         };
-
-        this._avatarUpload = createRef();
     }
 
-    _uploadAvatar = () => {
-        this._avatarUpload.current.click();
+    private uploadAvatar = (): void => {
+        this.avatarUpload.current.click();
     };
 
-    _removeAvatar = () => {
+    private removeAvatar = (): void => {
         // clear file upload field so same file can be selected
-        this._avatarUpload.current.value = "";
+        this.avatarUpload.current.value = "";
         this.setState({
             avatarUrl: null,
             avatarFile: null,
@@ -61,7 +72,7 @@ export default class ProfileSettings extends React.Component {
         });
     };
 
-    _cancelProfileChanges = async (e) => {
+    private cancelProfileChanges = async (e: React.MouseEvent): Promise<void> => {
         e.stopPropagation();
         e.preventDefault();
 
@@ -74,7 +85,7 @@ export default class ProfileSettings extends React.Component {
         });
     };
 
-    _saveProfile = async (e) => {
+    private saveProfile = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
         e.stopPropagation();
         e.preventDefault();
 
@@ -82,7 +93,7 @@ export default class ProfileSettings extends React.Component {
         this.setState({ enableProfileSave: false });
 
         const client = MatrixClientPeg.get();
-        const newState = {};
+        const newState: IState = {};
 
         const displayName = this.state.displayName.trim();
         try {
@@ -115,14 +126,14 @@ export default class ProfileSettings extends React.Component {
         this.setState(newState);
     };
 
-    _onDisplayNameChanged = (e) => {
+    private onDisplayNameChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             displayName: e.target.value,
             enableProfileSave: true,
         });
     };
 
-    _onAvatarChanged = (e) => {
+    private onAvatarChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
         if (!e.target.files || !e.target.files.length) {
             this.setState({
                 avatarUrl: this.state.originalAvatarUrl,
@@ -144,7 +155,7 @@ export default class ProfileSettings extends React.Component {
         reader.readAsDataURL(file);
     };
 
-    render() {
+    public render(): JSX.Element {
         const hostingSignupLink = getHostingLink('user-settings');
         let hostingSignup = null;
         if (hostingSignupLink) {
@@ -161,20 +172,18 @@ export default class ProfileSettings extends React.Component {
             </span>;
         }
 
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
         return (
             <form
-                onSubmit={this._saveProfile}
+                onSubmit={this.saveProfile}
                 autoComplete="off"
                 noValidate={true}
                 className="mx_ProfileSettings_profileForm"
             >
                 <input
                     type="file"
-                    ref={this._avatarUpload}
+                    ref={this.avatarUpload}
                     className="mx_ProfileSettings_avatarUpload"
-                    onChange={this._onAvatarChanged}
+                    onChange={this.onAvatarChanged}
                     accept="image/*"
                 />
                 <div className="mx_ProfileSettings_profile">
@@ -185,7 +194,7 @@ export default class ProfileSettings extends React.Component {
                             type="text"
                             value={this.state.displayName}
                             autoComplete="off"
-                            onChange={this._onDisplayNameChanged}
+                            onChange={this.onDisplayNameChanged}
                         />
                         <p>
                             { this.state.userId }
@@ -193,22 +202,22 @@ export default class ProfileSettings extends React.Component {
                         </p>
                     </div>
                     <AvatarSetting
-                        avatarUrl={this.state.avatarUrl}
+                        avatarUrl={this.state.avatarUrl?.toString()}
                         avatarName={this.state.displayName || this.state.userId}
                         avatarAltText={_t("Profile picture")}
-                        uploadAvatar={this._uploadAvatar}
-                        removeAvatar={this._removeAvatar} />
+                        uploadAvatar={this.uploadAvatar}
+                        removeAvatar={this.removeAvatar} />
                 </div>
                 <div className="mx_ProfileSettings_buttons">
                     <AccessibleButton
-                        onClick={this._cancelProfileChanges}
+                        onClick={this.cancelProfileChanges}
                         kind="link"
                         disabled={!this.state.enableProfileSave}
                     >
                         { _t("Cancel") }
                     </AccessibleButton>
                     <AccessibleButton
-                        onClick={this._saveProfile}
+                        onClick={this.saveProfile}
                         kind="primary"
                         disabled={!this.state.enableProfileSave}
                     >

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -67,7 +67,7 @@ interface IState extends IThemeState {
     showAdvanced: boolean;
     layout: Layout;
     // User profile data for the message preview
-    userId: string;
+    userId?: string;
     displayName: string;
     avatarUrl: string;
 }
@@ -92,8 +92,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             systemFont: SettingsStore.getValue("systemFont"),
             showAdvanced: false,
             layout: SettingsStore.getValue("layout"),
-            userId: "@erim:fink.fink",
-            displayName: "Erimayas Fink",
+            userId: null,
+            displayName: null,
             avatarUrl: null,
         };
     }

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -72,8 +72,10 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
     private getVersionInfo(): { appVersion: string, olmVersion: string } {
         const brand = SdkConfig.get().brand;
         const appVersion = this.state.appVersion || 'unknown';
-        let olmVersion = MatrixClientPeg.get().olmVersion;
-        olmVersion = olmVersion ? `${olmVersion[0]}.${olmVersion[1]}.${olmVersion[2]}` : '<not-enabled>';
+        const olmVersionTuple = MatrixClientPeg.get().olmVersion;
+        const olmVersion = olmVersionTuple
+            ? `${olmVersionTuple[0]}.${olmVersionTuple[1]}.${olmVersionTuple[2]}`
+            : '<not-enabled>';
 
         return {
             appVersion: `${_t("%(brand)s version:", { brand })} ${appVersion}`,

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -172,7 +172,8 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
     ];
     static IMAGES_AND_VIDEOS_SETTINGS = [
         'urlPreviewsEnabled',
-        'autoplayGifsAndVideos',
+        'autoplayGifs',
+        'autoplayVideo',
         'showImages',
     ];
     static TIMELINE_SETTINGS = [

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps, RefObject, SyntheticEvent, useContext, useRef, useState } from "react";
+import React, { ComponentProps, RefObject, SyntheticEvent, KeyboardEvent, useContext, useRef, useState } from "react";
 import classNames from "classnames";
 import { RoomType } from "matrix-js-sdk/src/@types/event";
 import FocusLock from "react-focus-lock";
@@ -38,6 +38,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "../dialogs/UserSettingsDialog";
+import { Key } from "../../../Keyboard";
 
 export const createSpace = async (
     name: string,
@@ -159,6 +160,12 @@ export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
     const cli = useContext(MatrixClientContext);
     const domain = cli.getDomain();
 
+    const onKeyDown = (ev: KeyboardEvent) => {
+        if (ev.key === Key.ENTER) {
+            onSubmit(ev);
+        }
+    };
+
     return <form className="mx_SpaceBasicSettings" onSubmit={onSubmit}>
         <SpaceAvatar avatarUrl={avatarUrl} setAvatar={setAvatar} avatarDisabled={busy} />
 
@@ -174,9 +181,11 @@ export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
                 }
                 setName(newName);
             }}
+            onKeyDown={onKeyDown}
             ref={nameFieldRef}
             onValidate={spaceNameValidator}
             disabled={busy}
+            autoComplete="off"
         />
 
         { showAliasField
@@ -188,6 +197,7 @@ export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
                 placeholder={name ? nameToAlias(name, domain) : _t("e.g. my-space")}
                 label={_t("Address")}
                 disabled={busy}
+                onKeyDown={onKeyDown}
             />
             : null
         }

src/components/views/spaces/SpacePanel.tsx

@@ -195,12 +195,10 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
                 { (provided, snapshot) => (
                     <SpaceItem
                         {...provided.draggableProps}
-                        {...provided.dragHandleProps}
+                        dragHandleProps={provided.dragHandleProps}
                         key={s.roomId}
                         innerRef={provided.innerRef}
-                        className={snapshot.isDragging
-                            ? "mx_SpaceItem_dragging"
-                            : undefined}
+                        className={snapshot.isDragging ? "mx_SpaceItem_dragging" : undefined}
                         space={s}
                         activeSpaces={activeSpaces}
                         isPanelCollapsed={isPanelCollapsed}
@@ -223,6 +221,8 @@ const SpacePanel = () => {
     }, []);
 
     const onKeyDown = (ev: React.KeyboardEvent) => {
+        if (ev.defaultPrevented) return;
+
         let handled = true;
 
         switch (ev.key) {

src/components/views/spaces/SpacePublicShare.tsx

@@ -39,7 +39,7 @@ const SpacePublicShare = ({ space, onFinished }: IProps) => {
             onClick={async () => {
                 const permalinkCreator = new RoomPermalinkCreator(space);
                 permalinkCreator.load();
-                const success = await copyPlaintext(permalinkCreator.forRoom());
+                const success = await copyPlaintext(permalinkCreator.forShareableRoom());
                 const text = success ? _t("Copied!") : _t("Failed to copy");
                 setCopiedText(text);
                 await sleep(5000);

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -29,7 +29,6 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import SpaceStore from "../../../stores/SpaceStore";
 import SpaceTreeLevelLayoutStore from "../../../stores/SpaceTreeLevelLayoutStore";
 import NotificationBadge from "../rooms/NotificationBadge";
-import { RovingAccessibleTooltipButton } from "../../../accessibility/roving/RovingAccessibleTooltipButton";
 import { _t } from "../../../languageHandler";
 import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import { toRightOf, useContextMenu } from "../../structures/ContextMenu";
@@ -40,8 +39,11 @@ import { NotificationColor } from "../../../stores/notifications/NotificationCol
 import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
 import SpaceContextMenu from "../context_menus/SpaceContextMenu";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
+import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
 
-interface IButtonProps extends Omit<ComponentProps<typeof RovingAccessibleTooltipButton>, "title"> {
+interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButton>, "title"> {
     space?: Room;
     className?: string;
     selected?: boolean;
@@ -68,7 +70,9 @@ export const SpaceButton: React.FC<IButtonProps> = ({
     ContextMenuComponent,
     ...props
 }) => {
-    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLElement>();
+    const [menuDisplayed, ref, openMenu, closeMenu] = useContextMenu<HTMLElement>();
+    const [onFocus, isActive, handle] = useRovingTabIndex(ref);
+    const tabIndex = isActive ? 0 : -1;
 
     let avatar = <div className="mx_SpaceButton_avatarPlaceholder"><div className="mx_SpaceButton_icon" /></div>;
     if (space) {
@@ -88,6 +92,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
                 forceCount={false}
                 notification={notificationState}
                 aria-label={ariaLabel}
+                tabIndex={tabIndex}
             />
         </div>;
     }
@@ -102,7 +107,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
     }
 
     return (
-        <RovingAccessibleTooltipButton
+        <AccessibleTooltipButton
             {...props}
             className={classNames("mx_SpaceButton", className, {
                 mx_SpaceButton_active: selected,
@@ -114,6 +119,8 @@ export const SpaceButton: React.FC<IButtonProps> = ({
             onContextMenu={openMenu}
             forceHide={!isNarrow || menuDisplayed}
             inputRef={handle}
+            tabIndex={tabIndex}
+            onFocus={onFocus}
         >
             { children }
             <div className="mx_SpaceButton_selectionWrapper">
@@ -130,7 +137,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
 
                 { contextMenu }
             </div>
-        </RovingAccessibleTooltipButton>
+        </AccessibleTooltipButton>
     );
 };
 
@@ -142,6 +149,7 @@ interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
     onExpand?: Function;
     parents?: Set<string>;
     innerRef?: LegacyRef<HTMLLIElement>;
+    dragHandleProps?: DraggableProvidedDragHandleProps;
 }
 
 interface IItemState {
@@ -270,8 +278,10 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             ? StaticNotificationState.forSymbol("!", NotificationColor.Red)
             : SpaceStore.instance.getNotificationState(space.roomId);
 
+        const hasChildren = this.state.childSpaces?.length;
+
         let childItems;
-        if (this.state.childSpaces?.length && !collapsed) {
+        if (hasChildren && !collapsed) {
             childItems = <SpaceTreeLevel
                 spaces={this.state.childSpaces}
                 activeSpaces={activeSpaces}
@@ -280,7 +290,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             />;
         }
 
-        const toggleCollapseButton = this.state.childSpaces?.length ?
+        const toggleCollapseButton = hasChildren ?
             <AccessibleButton
                 className="mx_SpaceButton_toggleCollapse"
                 onClick={this.toggleCollapse}
@@ -288,9 +298,19 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 aria-label={collapsed ? _t("Expand") : _t("Collapse")}
             /> : null;
 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { tabIndex, ...dragHandleProps } = this.props.dragHandleProps || {};
+
         return (
-            <li {...otherProps} className={itemClasses} ref={innerRef} aria-expanded={!collapsed} role="treeitem">
+            <li
+                {...otherProps}
+                className={itemClasses}
+                ref={innerRef}
+                aria-expanded={hasChildren ? !collapsed : undefined}
+                role="treeitem"
+            >
                 <SpaceButton
+                    {...dragHandleProps}
                     space={space}
                     className={isInvite ? "mx_SpaceButton_invite" : undefined}
                     selected={activeSpaces.includes(space)}