Merge branch 'develop' into fix/call-search-areas

src/components/structures/GroupView.js

@@ -981,7 +981,7 @@ export default class GroupView extends React.Component {
                     <Spinner />
                 </div>;
             }
-            const httpInviterAvatar = this.state.inviterProfile
+            const httpInviterAvatar = this.state.inviterProfile && this.state.inviterProfile.avatarUrl
                 ? mediaFromMxc(this.state.inviterProfile.avatarUrl).getSquareThumbnailHttp(36)
                 : null;
 

src/components/structures/LeftPanel.tsx

@@ -34,7 +34,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import SettingsStore from "../../settings/SettingsStore";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
-import {Key} from "../../Keyboard";
 import IndicatorScrollbar from "../structures/IndicatorScrollbar";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
@@ -43,6 +42,7 @@ import LeftPanelWidget from "./LeftPanelWidget";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../customisations/Media";
 import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
+import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 
 interface IProps {
     isMinimized: boolean;
@@ -297,17 +297,18 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     private onKeyDown = (ev: React.KeyboardEvent) => {
         if (!this.focusedElement) return;
 
-        switch (ev.key) {
-            case Key.ARROW_UP:
-            case Key.ARROW_DOWN:
+        const action = getKeyBindingsManager().getRoomListAction(ev);
+        switch (action) {
+            case RoomListAction.NextRoom:
+            case RoomListAction.PrevRoom:
                 ev.stopPropagation();
                 ev.preventDefault();
-                this.onMoveFocus(ev.key === Key.ARROW_UP);
+                this.onMoveFocus(action === RoomListAction.PrevRoom);
                 break;
         }
     };
 
-    private onEnter = () => {
+    private selectRoom = () => {
         const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile");
         if (firstRoom) {
             firstRoom.click();
@@ -388,8 +389,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             >
                 <RoomSearch
                     isMinimized={this.props.isMinimized}
-                    onVerticalArrow={this.onKeyDown}
-                    onEnter={this.onEnter}
+                    onKeyDown={this.onKeyDown}
+                    onSelectRoom={this.selectRoom}
                 />
                 <AccessibleTooltipButton
                     className={classNames("mx_LeftPanel_exploreButton", {

src/components/structures/LoggedInView.tsx

@@ -21,7 +21,7 @@ import * as PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { DragDropContext } from 'react-beautiful-dnd';
 
-import {Key, isOnlyCtrlOrCmdKeyEvent, isOnlyCtrlOrCmdIgnoreShiftKeyEvent, isMac} from '../../Keyboard';
+import {Key} from '../../Keyboard';
 import PageTypes from '../../PageTypes';
 import CallMediaHandler from '../../CallMediaHandler';
 import { fixupColorFonts } from '../../utils/FontManager';
@@ -55,6 +55,7 @@ import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import Modal from "../../Modal";
 import { ICollapseConfig } from "../../resizer/distributors/collapse";
 import HostSignupContainer from '../views/host_signup/HostSignupContainer';
+import { getKeyBindingsManager, NavigationAction, RoomAction } from '../../KeyBindingsManager';
 import { IOpts } from "../../createRoom";
 import SpacePanel from "../views/spaces/SpacePanel";
 import {replaceableComponent} from "../../utils/replaceableComponent";
@@ -436,86 +437,55 @@ class LoggedInView extends React.Component<IProps, IState> {
 
     _onKeyDown = (ev) => {
         let handled = false;
-        const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
-        const hasModifier = ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey;
-        const isModifier = ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
-        const modKey = isMac ? ev.metaKey : ev.ctrlKey;
 
-        switch (ev.key) {
-            case Key.PAGE_UP:
-            case Key.PAGE_DOWN:
-                if (!hasModifier && !isModifier) {
-                    this._onScrollKeyPressed(ev);
-                    handled = true;
-                }
+        const roomAction = getKeyBindingsManager().getRoomAction(ev);
+        switch (roomAction) {
+            case RoomAction.ScrollUp:
+            case RoomAction.RoomScrollDown:
+            case RoomAction.JumpToFirstMessage:
+            case RoomAction.JumpToLatestMessage:
+                // pass the event down to the scroll panel
+                this._onScrollKeyPressed(ev);
+                handled = true;
                 break;
+            case RoomAction.FocusSearch:
+                dis.dispatch({
+                    action: 'focus_search',
+                });
+                handled = true;
+                break;
+        }
+        if (handled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            return;
+        }
 
-            case Key.HOME:
-            case Key.END:
-                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
-                    this._onScrollKeyPressed(ev);
-                    handled = true;
-                }
+        const navAction = getKeyBindingsManager().getNavigationAction(ev);
+        switch (navAction) {
+            case NavigationAction.FocusRoomSearch:
+                dis.dispatch({
+                    action: 'focus_room_filter',
+                });
+                handled = true;
                 break;
-            case Key.K:
-                if (ctrlCmdOnly) {
-                    dis.dispatch({
-                        action: 'focus_room_filter',
-                    });
-                    handled = true;
-                }
+            case NavigationAction.ToggleUserMenu:
+                dis.fire(Action.ToggleUserMenu);
+                handled = true;
                 break;
-            case Key.F:
-                if (ctrlCmdOnly && SettingsStore.getValue("ctrlFForSearch")) {
-                    dis.dispatch({
-                        action: 'focus_search',
-                    });
-                    handled = true;
-                }
+            case NavigationAction.ToggleShortCutDialog:
+                KeyboardShortcuts.toggleDialog();
+                handled = true;
                 break;
-            case Key.BACKTICK:
-                // Ideally this would be CTRL+P for "Profile", but that's
-                // taken by the print dialog. CTRL+I for "Information"
-                // was previously chosen but conflicted with italics in
-                // composer, so CTRL+` it is
-
-                if (ctrlCmdOnly) {
-                    dis.fire(Action.ToggleUserMenu);
-                    handled = true;
-                }
+            case NavigationAction.GoToHome:
+                dis.dispatch({
+                    action: 'view_home_page',
+                });
+                Modal.closeCurrentModal("homeKeyboardShortcut");
+                handled = true;
                 break;
-
-            case Key.SLASH:
-                if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev)) {
-                    KeyboardShortcuts.toggleDialog();
-                    handled = true;
-                }
-                break;
-
-            case Key.H:
-                if (ev.altKey && modKey) {
-                    dis.dispatch({
-                        action: 'view_home_page',
-                    });
-                    Modal.closeCurrentModal("homeKeyboardShortcut");
-                    handled = true;
-                }
-                break;
-
-            case Key.ARROW_UP:
-            case Key.ARROW_DOWN:
-                if (ev.altKey && !ev.ctrlKey && !ev.metaKey) {
-                    dis.dispatch<ViewRoomDeltaPayload>({
-                        action: Action.ViewRoomDelta,
-                        delta: ev.key === Key.ARROW_UP ? -1 : 1,
-                        unread: ev.shiftKey,
-                    });
-                    handled = true;
-                }
-                break;
-
-            case Key.PERIOD:
-                if (ctrlCmdOnly && (this.props.page_type === "room_view" || this.props.page_type === "group_view")) {
+            case NavigationAction.ToggleRoomSidePanel:
+                if (this.props.page_type === "room_view" || this.props.page_type === "group_view") {
                     dis.dispatch<ToggleRightPanelPayload>({
                         action: Action.ToggleRightPanel,
                         type: this.props.page_type === "room_view" ? "room" : "group",
@@ -523,16 +493,48 @@ class LoggedInView extends React.Component<IProps, IState> {
                     handled = true;
                 }
                 break;
-
+            case NavigationAction.SelectPrevRoom:
+                dis.dispatch<ViewRoomDeltaPayload>({
+                    action: Action.ViewRoomDelta,
+                    delta: -1,
+                    unread: false,
+                });
+                handled = true;
+                break;
+            case NavigationAction.SelectNextRoom:
+                dis.dispatch<ViewRoomDeltaPayload>({
+                    action: Action.ViewRoomDelta,
+                    delta: 1,
+                    unread: false,
+                });
+                handled = true;
+                break;
+            case NavigationAction.SelectPrevUnreadRoom:
+                dis.dispatch<ViewRoomDeltaPayload>({
+                    action: Action.ViewRoomDelta,
+                    delta: -1,
+                    unread: true,
+                });
+                break;
+            case NavigationAction.SelectNextUnreadRoom:
+                dis.dispatch<ViewRoomDeltaPayload>({
+                    action: Action.ViewRoomDelta,
+                    delta: 1,
+                    unread: true,
+                });
+                break;
             default:
                 // if we do not have a handler for it, pass it to the platform which might
                 handled = PlatformPeg.get().onKeyDown(ev);
         }
-
         if (handled) {
             ev.stopPropagation();
             ev.preventDefault();
-        } else if (!isModifier && !ev.altKey && !ev.ctrlKey && !ev.metaKey) {
+            return;
+        }
+
+        const isModifier = ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
+        if (!isModifier && !ev.altKey && !ev.ctrlKey && !ev.metaKey) {
             // The above condition is crafted to _allow_ characters with Shift
             // already pressed (but not the Shift key down itself).
 

src/components/structures/MatrixChat.tsx

@@ -80,10 +80,11 @@ import DialPadModal from "../views/voip/DialPadModal";
 import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
 import { shouldUseLoginForWelcome } from "../../utils/pages";
 import SpaceStore from "../../stores/SpaceStore";
-import SpaceRoomDirectory from "./SpaceRoomDirectory";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import {RoomUpdateCause} from "../../stores/room-list/models";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import SecurityCustomisations from "../../customisations/Security";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -395,7 +396,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         const crossSigningIsSetUp = cli.getStoredCrossSigningForUser(cli.getUserId());
         if (crossSigningIsSetUp) {
-            this.setStateForNewView({ view: Views.COMPLETE_SECURITY });
+            if (SecurityCustomisations.SHOW_ENCRYPTION_SETUP_UI === false) {
+                this.onLoggedIn();
+            } else {
+                this.setStateForNewView({view: Views.COMPLETE_SECURITY});
+            }
         } else if (await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) {
             this.setStateForNewView({ view: Views.E2E_SETUP });
         } else {
@@ -690,10 +695,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             }
             case Action.ViewRoomDirectory: {
                 if (SpaceStore.instance.activeSpace) {
-                    Modal.createTrackedDialog("Space room directory", "", SpaceRoomDirectory, {
-                        space: SpaceStore.instance.activeSpace,
-                        initialText: payload.initialText,
-                    }, "mx_SpaceRoomDirectory_dialogWrapper", false, true);
+                    defaultDispatcher.dispatch({
+                        action: "view_room",
+                        room_id: SpaceStore.instance.activeSpace.roomId,
+                    });
                 } else {
                     const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
                     Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
@@ -1554,7 +1559,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             } else if (request.pending) {
                 ToastStore.sharedInstance().addOrReplaceToast({
                     key: 'verifreq_' + request.channel.transactionId,
-                    title: request.isSelfVerification ? _t("Self-verification request") : _t("Verification Request"),
+                    title: _t("Verification requested"),
                     icon: "verification",
                     props: {request},
                     component: sdk.getComponent("toasts.VerificationRequestToast"),

src/components/structures/MessagePanel.js

@@ -659,6 +659,7 @@ export default class MessagePanel extends React.Component {
                         showReactions={this.props.showReactions}
                         layout={this.props.layout}
                         enableFlair={this.props.enableFlair}
+                        showReadReceipts={this.props.showReadReceipts}
                     />
                 </TileErrorBoundary>
             </li>,

src/components/structures/RoomSearch.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,17 +20,21 @@ import classNames from "classnames";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
 import { ActionPayload } from "../../dispatcher/payloads";
-import { Key } from "../../Keyboard";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import { Action } from "../../dispatcher/actions";
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
+import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
 
 interface IProps {
     isMinimized: boolean;
-    onVerticalArrow(ev: React.KeyboardEvent): void;
-    onEnter(ev: React.KeyboardEvent): boolean;
+    onKeyDown(ev: React.KeyboardEvent): void;
+    /**
+     * @returns true if a room has been selected and the search field should be cleared
+     */
+    onSelectRoom(): boolean;
 }
 
 interface IState {
@@ -53,6 +57,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         };
 
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        // clear filter when changing spaces, in future we may wish to maintain a filter per-space
+        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.clearInput);
     }
 
     public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>): void {
@@ -72,6 +78,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
 
     public componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
+        SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
     }
 
     private onAction = (payload: ActionPayload) => {
@@ -108,18 +115,26 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     };
 
     private onKeyDown = (ev: React.KeyboardEvent) => {
-        if (ev.key === Key.ESCAPE) {
-            this.clearInput();
-            defaultDispatcher.fire(Action.FocusComposer);
-        } else if (ev.key === Key.ARROW_UP || ev.key === Key.ARROW_DOWN) {
-            this.props.onVerticalArrow(ev);
-        } else if (ev.key === Key.ENTER) {
-            const shouldClear = this.props.onEnter(ev);
-            if (shouldClear) {
-                // wrap in set immediate to delay it so that we don't clear the filter & then change room
-                setImmediate(() => {
-                    this.clearInput();
-                });
+        const action = getKeyBindingsManager().getRoomListAction(ev);
+        switch (action) {
+            case RoomListAction.ClearSearch:
+                this.clearInput();
+                defaultDispatcher.fire(Action.FocusComposer);
+                break;
+            case RoomListAction.NextRoom:
+            case RoomListAction.PrevRoom:
+                // we don't handle these actions here put pass the event on to the interested party (LeftPanel)
+                this.props.onKeyDown(ev);
+                break;
+            case RoomListAction.SelectRoom: {
+                const shouldClear = this.props.onSelectRoom();
+                if (shouldClear) {
+                    // wrap in set immediate to delay it so that we don't clear the filter & then change room
+                    setImmediate(() => {
+                        this.clearInput();
+                    });
+                }
+                break;
             }
         }
     };

src/components/structures/RoomView.tsx

@@ -40,7 +40,6 @@ import Tinter from '../../Tinter';
 import rateLimitedFunc from '../../ratelimitedfunc';
 import * as Rooms from '../../Rooms';
 import eventSearch, { searchPagination } from '../../Searching';
-import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent, Key } from '../../Keyboard';
 import MainSplit from './MainSplit';
 import RightPanel from './RightPanel';
 import RoomViewStore from '../../stores/RoomViewStore';
@@ -79,6 +78,7 @@ import Notifier from "../../Notifier";
 import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
 import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
 import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
+import { getKeyBindingsManager, RoomAction } from '../../KeyBindingsManager';
 import { objectHasDiff } from "../../utils/objects";
 import SpaceRoomView from "./SpaceRoomView";
 import { IOpts } from "../../createRoom";
@@ -662,26 +662,20 @@ export default class RoomView extends React.Component<IProps, IState> {
     private onReactKeyDown = ev => {
         let handled = false;
 
-        switch (ev.key) {
-            case Key.ESCAPE:
-                if (!ev.altKey && !ev.ctrlKey && !ev.shiftKey && !ev.metaKey) {
-                    this.messagePanel.forgetReadMarker();
-                    this.jumpToLiveTimeline();
-                    handled = true;
-                }
+        const action = getKeyBindingsManager().getRoomAction(ev);
+        switch (action) {
+            case RoomAction.DismissReadMarker:
+                this.messagePanel.forgetReadMarker();
+                this.jumpToLiveTimeline();
+                handled = true;
                 break;
-            case Key.PAGE_UP:
-                if (!ev.altKey && !ev.ctrlKey && ev.shiftKey && !ev.metaKey) {
-                    this.jumpToReadMarker();
-                    handled = true;
-                }
+            case RoomAction.JumpToOldestUnread:
+                this.jumpToReadMarker();
+                handled = true;
                 break;
-            case Key.U: // Mac returns lowercase
-            case Key.U.toUpperCase():
-                if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev) && ev.shiftKey) {
-                    dis.dispatch({ action: "upload_file" }, true);
-                    handled = true;
-                }
+            case RoomAction.UploadFile:
+                dis.dispatch({ action: "upload_file" }, true);
+                handled = true;
                 break;
         }
 
@@ -1143,10 +1137,16 @@ export default class RoomView extends React.Component<IProps, IState> {
         ev.stopPropagation();
         ev.preventDefault();
 
-        this.setState({
-            dragCounter: this.state.dragCounter + 1,
-            draggingFile: true,
-        });
+        // We always increment the counter no matter the types, because dragging is
+        // still happening. If we didn't, the drag counter would get out of sync.
+        this.setState({dragCounter: this.state.dragCounter + 1});
+
+        // See:
+        // https://docs.w3cub.com/dom/datatransfer/types
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
+        if (ev.dataTransfer.types.includes("Files") || ev.dataTransfer.types.includes("application/x-moz-file")) {
+            this.setState({draggingFile: true});
+        }
     };
 
     private onDragLeave = ev => {
@@ -1170,6 +1170,9 @@ export default class RoomView extends React.Component<IProps, IState> {
 
         ev.dataTransfer.dropEffect = 'none';
 
+        // See:
+        // https://docs.w3cub.com/dom/datatransfer/types
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
         if (ev.dataTransfer.types.includes("Files") || ev.dataTransfer.types.includes("application/x-moz-file")) {
             ev.dataTransfer.dropEffect = 'copy';
         }

src/components/structures/ScrollPanel.js

@@ -16,10 +16,10 @@ limitations under the License.
 
 import React, {createRef} from "react";
 import PropTypes from 'prop-types';
-import { Key } from '../../Keyboard';
 import Timer from '../../utils/Timer';
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import {getKeyBindingsManager, RoomAction} from "../../KeyBindingsManager";
 
 const DEBUG_SCROLL = false;
 
@@ -535,29 +535,19 @@ export default class ScrollPanel extends React.Component {
      * @param {object} ev the keyboard event
      */
     handleScrollKey = ev => {
-        switch (ev.key) {
-            case Key.PAGE_UP:
-                if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
-                    this.scrollRelative(-1);
-                }
+        const roomAction = getKeyBindingsManager().getRoomAction(ev);
+        switch (roomAction) {
+            case RoomAction.ScrollUp:
+                this.scrollRelative(-1);
                 break;
-
-            case Key.PAGE_DOWN:
-                if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
-                    this.scrollRelative(1);
-                }
+            case RoomAction.RoomScrollDown:
+                this.scrollRelative(1);
                 break;
-
-            case Key.HOME:
-                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
-                    this.scrollToTop();
-                }
+            case RoomAction.JumpToFirstMessage:
+                this.scrollToTop();
                 break;
-
-            case Key.END:
-                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
-                    this.scrollToBottom();
-                }
+            case RoomAction.JumpToLatestMessage:
+                this.scrollToBottom();
                 break;
         }
     };

src/components/structures/SpaceRoomDirectory.tsx

@@ -40,10 +40,11 @@ import InfoTooltip from "../views/elements/InfoTooltip";
 import TextWithTooltip from "../views/elements/TextWithTooltip";
 import {useStateToggle} from "../../hooks/useStateToggle";
 
-interface IProps {
+interface IHierarchyProps {
     space: Room;
     initialText?: string;
-    onFinished(): void;
+    refreshToken?: any;
+    showRoom(room: ISpaceSummaryRoom, viaServers?: string[], autoJoin?: boolean): void;
 }
 
 /* eslint-disable camelcase */
@@ -111,7 +112,7 @@ const Tile: React.FC<ITileProps> = ({
     let button;
     if (myMembership === "join") {
         button = <AccessibleButton onClick={onPreviewClick} kind="primary_outline">
-            { _t("Open") }
+            { _t("View") }
         </AccessibleButton>;
     } else if (onJoinClick) {
         button = <AccessibleButton onClick={onJoinClick} kind="primary">
@@ -251,7 +252,7 @@ export const HierarchyLevel = ({
 }: IHierarchyLevelProps) => {
     const cli = MatrixClientPeg.get();
     const space = cli.getRoom(spaceId);
-    const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId())
+    const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
 
     const sortedChildren = sortBy([...(relations.get(spaceId)?.values() || [])], ev => ev.content.order || null);
     const [subspaces, childRooms] = sortedChildren.reduce((result, ev: ISpaceSummaryEvent) => {
@@ -344,22 +345,20 @@ export const useSpaceSummary = (cli: MatrixClient, space: Room, refreshToken?: a
     }, [space, refreshToken], []);
 };
 
-const SpaceRoomDirectory: React.FC<IProps> = ({ space, initialText = "", onFinished }) => {
+export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
+    space,
+    initialText = "",
+    showRoom,
+    refreshToken,
+    children,
+}) => {
     const cli = MatrixClientPeg.get();
     const userId = cli.getUserId();
     const [query, setQuery] = useState(initialText);
 
-    const onCreateRoomClick = () => {
-        dis.dispatch({
-            action: 'view_create_room',
-            public: true,
-        });
-        onFinished();
-    };
-
     const [selected, setSelected] = useState(new Map<string, Set<string>>()); // Map<parentId, Set<childId>>
 
-    const [rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space);
+    const [rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space, refreshToken);
 
     const roomsMap = useMemo(() => {
         if (!rooms) return null;
@@ -394,21 +393,6 @@ const SpaceRoomDirectory: React.FC<IProps> = ({ space, initialText = "", onFinis
         return roomsMap;
     }, [rooms, childParentMap, query]);
 
-    const title = <React.Fragment>
-        <RoomAvatar room={space} height={32} width={32} />
-        <div>
-            <h1>{ _t("Explore rooms") }</h1>
-            <div><RoomName room={space} /></div>
-        </div>
-    </React.Fragment>;
-
-    const explanation =
-        _t("If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.", null,
-            {a: sub => {
-                return <AccessibleButton kind="link" onClick={onCreateRoomClick}>{sub}</AccessibleButton>;
-            }},
-        );
-
     const [error, setError] = useState("");
     const [removing, setRemoving] = useState(false);
     const [saving, setSaving] = useState(false);
@@ -503,6 +487,8 @@ const SpaceRoomDirectory: React.FC<IProps> = ({ space, initialText = "", onFinis
 
         let results;
         if (roomsMap.size) {
+            const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
+
             results = <>
                 <HierarchyLevel
                     spaceId={space.roomId}
@@ -510,7 +496,7 @@ const SpaceRoomDirectory: React.FC<IProps> = ({ space, initialText = "", onFinis
                     relations={parentChildMap}
                     parents={new Set()}
                     selectedMap={selected}
-                    onToggleClick={(parentId, childId) => {
+                    onToggleClick={hasPermissions ? (parentId, childId) => {
                         setError("");
                         if (!selected.has(parentId)) {
                             setSelected(new Map(selected.set(parentId, new Set([childId]))));
@@ -525,13 +511,12 @@ const SpaceRoomDirectory: React.FC<IProps> = ({ space, initialText = "", onFinis
 
                         parentSet.delete(childId);
                         setSelected(new Map(selected.set(parentId, new Set(parentSet))));
-                    }}
+                    } : undefined}
                     onViewRoomClick={(roomId, autoJoin) => {
                         showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), autoJoin);
-                        onFinished();
                     }}
                 />
-                <hr />
+                { children && <hr /> }
             </>;
         } else {
             results = <div className="mx_SpaceRoomDirectory_noResults">
@@ -550,34 +535,78 @@ const SpaceRoomDirectory: React.FC<IProps> = ({ space, initialText = "", onFinis
             </div> }
             <AutoHideScrollbar className="mx_SpaceRoomDirectory_list">
                 { results }
-                <AccessibleButton
-                    onClick={onCreateRoomClick}
-                    kind="primary"
-                    className="mx_SpaceRoomDirectory_createRoom"
-                >
-                    { _t("Create room") }
-                </AccessibleButton>
+                { children }
             </AutoHideScrollbar>
         </>;
-    } else {
+    } else if (!rooms) {
         content = <Spinner />;
+    } else {
+        content = <p>{_t("Your server does not support showing space hierarchies.")}</p>;
     }
 
     // TODO loading state/error state
+    return <>
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={ _t("Search names and description") }
+            onSearch={setQuery}
+            autoFocus={true}
+            initialValue={initialText}
+        />
+
+        { content }
+    </>;
+};
+
+interface IProps {
+    space: Room;
+    initialText?: string;
+    onFinished(): void;
+}
+
+const SpaceRoomDirectory: React.FC<IProps> = ({ space, onFinished, initialText }) => {
+    const onCreateRoomClick = () => {
+        dis.dispatch({
+            action: 'view_create_room',
+            public: true,
+        });
+        onFinished();
+    };
+
+    const title = <React.Fragment>
+        <RoomAvatar room={space} height={32} width={32} />
+        <div>
+            <h1>{ _t("Explore rooms") }</h1>
+            <div><RoomName room={space} /></div>
+        </div>
+    </React.Fragment>;
+
     return (
         <BaseDialog className="mx_SpaceRoomDirectory" hasCancel={true} onFinished={onFinished} title={title}>
             <div className="mx_Dialog_content">
-                { explanation }
+                { _t("If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.",
+                    null,
+                    {a: sub => {
+                        return <AccessibleButton kind="link" onClick={onCreateRoomClick}>{sub}</AccessibleButton>;
+                    }},
+                ) }
 
-                <SearchBox
-                    className="mx_textinput_icon mx_textinput_search"
-                    placeholder={ _t("Search names and description") }
-                    onSearch={setQuery}
-                    autoFocus={true}
-                    initialValue={initialText}
-                />
-
-                { content }
+                <SpaceHierarchy
+                    space={space}
+                    showRoom={(room: ISpaceSummaryRoom, viaServers?: string[], autoJoin = false) => {
+                        showRoom(room, viaServers, autoJoin);
+                        onFinished();
+                    }}
+                    initialText={initialText}
+                >
+                    <AccessibleButton
+                        onClick={onCreateRoomClick}
+                        kind="primary"
+                        className="mx_SpaceRoomDirectory_createRoom"
+                    >
+                        { _t("Create room") }
+                    </AccessibleButton>
+                </SpaceHierarchy>
             </div>
         </BaseDialog>
     );

src/components/structures/SpaceRoomView.tsx

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {RefObject, useContext, useMemo, useRef, useState} from "react";
-import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
+import React, {RefObject, useContext, useRef, useState} from "react";
+import {EventType} from "matrix-js-sdk/src/@types/event";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {EventSubscription} from "fbemitter";
 
@@ -46,11 +46,11 @@ import {SetRightPanelPhasePayload} from "../../dispatcher/payloads/SetRightPanel
 import {useStateArray} from "../../hooks/useStateArray";
 import SpacePublicShare from "../views/spaces/SpacePublicShare";
 import {showAddExistingRooms, showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space";
-import {HierarchyLevel, ISpaceSummaryRoom, showRoom, useSpaceSummary} from "./SpaceRoomDirectory";
-import AutoHideScrollbar from "./AutoHideScrollbar";
+import {showRoom, SpaceHierarchy} from "./SpaceRoomDirectory";
 import MemberAvatar from "../views/avatars/MemberAvatar";
 import {useStateToggle} from "../../hooks/useStateToggle";
 import SpaceStore from "../../stores/SpaceStore";
+import FacePile from "../views/elements/FacePile";
 
 interface IProps {
     space: Room;
@@ -92,6 +92,41 @@ const useMyRoomMembership = (room: Room) => {
     return membership;
 };
 
+const SpaceInfo = ({ space }) => {
+    const joinRule = space.getJoinRule();
+
+    let visibilitySection;
+    if (joinRule === "public") {
+        visibilitySection = <span className="mx_SpaceRoomView_info_public">
+            { _t("Public space") }
+        </span>;
+    } else {
+        visibilitySection = <span className="mx_SpaceRoomView_info_private">
+            { _t("Private space") }
+        </span>;
+    }
+
+    return <div className="mx_SpaceRoomView_info">
+        { visibilitySection }
+        { joinRule === "public" && <RoomMemberCount room={space}>
+            {(count) => count > 0 ? (
+                <AccessibleButton
+                    kind="link"
+                    onClick={() => {
+                        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+                            action: Action.SetRightPanelPhase,
+                            phase: RightPanelPhases.RoomMemberList,
+                            refireParams: { space },
+                        });
+                    }}
+                >
+                    { _t("%(count)s members", { count }) }
+                </AccessibleButton>
+            ) : null}
+        </RoomMemberCount> }
+    </div>
+};
+
 const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
     const cli = useContext(MatrixClientContext);
     const myMembership = useMyRoomMembership(space);
@@ -158,43 +193,13 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         joinButtons = <InlineSpinner />;
     }
 
-    let visibilitySection;
-    if (space.getJoinRule() === "public") {
-        visibilitySection = <span className="mx_SpaceRoomView_preview_info_public">
-            { _t("Public space") }
-        </span>;
-    } else {
-        visibilitySection = <span className="mx_SpaceRoomView_preview_info_private">
-            { _t("Private space") }
-        </span>;
-    }
-
     return <div className="mx_SpaceRoomView_preview">
         { inviterSection }
         <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
         <h1 className="mx_SpaceRoomView_preview_name">
             <RoomName room={space} />
         </h1>
-        <div className="mx_SpaceRoomView_preview_info">
-            { visibilitySection }
-            <RoomMemberCount room={space}>
-                {(count) => count > 0 ? (
-                    <AccessibleButton
-                        className="mx_SpaceRoomView_preview_memberCount"
-                        kind="link"
-                        onClick={() => {
-                            defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
-                                action: Action.SetRightPanelPhase,
-                                phase: RightPanelPhases.RoomMemberList,
-                                refireParams: { space },
-                            });
-                        }}
-                    >
-                        { _t("%(count)s members", { count }) }
-                    </AccessibleButton>
-                ) : null}
-            </RoomMemberCount>
-        </div>
+        <SpaceInfo space={space} />
         <RoomTopic room={space}>
             {(topic, ref) =>
                 <div className="mx_SpaceRoomView_preview_topic" ref={ref}>
@@ -202,6 +207,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
                 </div>
             }
         </RoomTopic>
+        { space.getJoinRule() === "public" && <FacePile room={space} /> }
         <div className="mx_SpaceRoomView_preview_joinButtons">
             { joinButtons }
         </div>
@@ -216,10 +222,14 @@ const SpaceLanding = ({ space }) => {
     let inviteButton;
     if (myMembership === "join" && space.canInvite(userId)) {
         inviteButton = (
-            <AccessibleButton className="mx_SpaceRoomView_landing_inviteButton" onClick={() => {
-                showRoomInviteDialog(space.roomId);
-            }}>
-                { _t("Invite people") }
+            <AccessibleButton
+                kind="primary"
+                className="mx_SpaceRoomView_landing_inviteButton"
+                onClick={() => {
+                    showRoomInviteDialog(space.roomId);
+                }}
+            >
+                { _t("Invite") }
             </AccessibleButton>
         );
     }
@@ -256,36 +266,13 @@ const SpaceLanding = ({ space }) => {
         </AccessibleButton>;
     }
 
-    const [rooms, relations, viaMap] = useSpaceSummary(cli, space, refreshToken);
-    const [roomsMap, numRooms] = useMemo(() => {
-        if (!rooms) return [];
-        const roomsMap = new Map<string, ISpaceSummaryRoom>(rooms.map(r => [r.room_id, r]));
-        const numRooms = rooms.filter(r => r.room_type !== RoomType.Space).length;
-        return [roomsMap, numRooms];
-    }, [rooms]);
-
-    let previewRooms;
-    if (roomsMap) {
-        previewRooms = <AutoHideScrollbar className="mx_SpaceRoomDirectory_list">
-            <div className="mx_SpaceRoomDirectory_roomCount">
-                <h3>{ myMembership === "join" ? _t("Rooms") : _t("Default Rooms")}</h3>
-                <span>{ numRooms }</span>
-            </div>
-            <HierarchyLevel
-                spaceId={space.roomId}
-                rooms={roomsMap}
-                relations={relations}
-                parents={new Set()}
-                onViewRoomClick={(roomId, autoJoin) => {
-                    showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), autoJoin);
-                }}
-            />
-        </AutoHideScrollbar>;
-    } else if (!rooms) {
-        previewRooms = <InlineSpinner />;
-    } else {
-        previewRooms = <p>{_t("Your server does not support showing space hierarchies.")}</p>;
-    }
+    const onMembersClick = () => {
+        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.RoomMemberList,
+            refireParams: { space },
+        });
+    };
 
     return <div className="mx_SpaceRoomView_landing">
         <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
@@ -294,45 +281,26 @@ const SpaceLanding = ({ space }) => {
                 {(name) => {
                     const tags = { name: () => <div className="mx_SpaceRoomView_landing_nameRow">
                         <h1>{ name }</h1>
-                        <RoomMemberCount room={space}>
-                            {(count) => count > 0 ? (
-                                <AccessibleButton
-                                    className="mx_SpaceRoomView_landing_memberCount"
-                                    kind="link"
-                                    onClick={() => {
-                                        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
-                                            action: Action.SetRightPanelPhase,
-                                            phase: RightPanelPhases.RoomMemberList,
-                                            refireParams: { space },
-                                        });
-                                    }}
-                                >
-                                    { _t("%(count)s members", { count }) }
-                                </AccessibleButton>
-                            ) : null}
-                        </RoomMemberCount>
                     </div> };
-                    if (shouldShowSpaceSettings(cli, space)) {
-                        if (space.getJoinRule() === "public") {
-                            return _t("Your public space <name/>", {}, tags) as JSX.Element;
-                        } else {
-                            return _t("Your private space <name/>", {}, tags) as JSX.Element;
-                        }
-                    }
                     return _t("Welcome to <name/>", {}, tags) as JSX.Element;
                 }}
             </RoomName>
         </div>
+        <div className="mx_SpaceRoomView_landing_info">
+            <SpaceInfo space={space} />
+            <FacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
+            { inviteButton }
+        </div>
         <div className="mx_SpaceRoomView_landing_topic">
             <RoomTopic room={space} />
         </div>
+        <hr />
         <div className="mx_SpaceRoomView_landing_adminButtons">
-            { inviteButton }
             { addRoomButtons }
             { settingsButton }
         </div>
 
-        { previewRooms }
+        <SpaceHierarchy space={space} showRoom={showRoom} refreshToken={refreshToken} />
     </div>;
 };
 
@@ -675,9 +643,13 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
             case Phase.PublicCreateRooms:
                 return <SpaceSetupFirstRooms
                     space={this.props.space}
-                    title={_t("What are some things you want to discuss?")}
-                    description={_t("Let's create a room for each of them. " +
-                        "You can add more later too, including already existing ones.")}
+                    title={_t("What are some things you want to discuss in %(spaceName)s?", {
+                        spaceName: this.props.space.name,
+                    })}
+                    description={
+                        _t("Let's create a room for each of them.") + "\n" +
+                        _t("You can add more later too, including already existing ones.")
+                    }
                     onFinished={() => this.setState({ phase: Phase.PublicShare })}
                 />;
             case Phase.PublicShare:

src/components/structures/UploadBar.tsx

@@ -43,7 +43,11 @@ export default class UploadBar extends React.Component<IProps, IState> {
 
     constructor(props) {
         super(props);
-        this.state = {uploadsHere: []};
+
+        // Set initial state to any available upload in this room - we might be mounting
+        // earlier than the first progress event, so should show something relevant.
+        const uploadsHere = this.getUploadsInRoom();
+        this.state = {currentUpload: uploadsHere[0], uploadsHere};
     }
 
     componentDidMount() {
@@ -56,6 +60,11 @@ export default class UploadBar extends React.Component<IProps, IState> {
         dis.unregister(this.dispatcherRef);
     }
 
+    private getUploadsInRoom(): IUpload[] {
+        const uploads = ContentMessages.sharedInstance().getCurrentUploads();
+        return uploads.filter(u => u.roomId === this.props.room.roomId);
+    }
+
     private onAction = (payload: ActionPayload) => {
         switch (payload.action) {
             case Action.UploadStarted:
@@ -64,8 +73,7 @@ export default class UploadBar extends React.Component<IProps, IState> {
             case Action.UploadCanceled:
             case Action.UploadFailed: {
                 if (!this.mounted) return;
-                const uploads = ContentMessages.sharedInstance().getCurrentUploads();
-                const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId);
+                const uploadsHere = this.getUploadsInRoom();
                 this.setState({currentUpload: uploadsHere[0], uploadsHere});
                 break;
             }

src/components/structures/UserMenu.tsx

@@ -74,6 +74,7 @@ interface IState {
 export default class UserMenu extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private themeWatcherRef: string;
+    private dndWatcherRef: string;
     private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
     private tagStoreRef: fbEmitter.EventSubscription;
 
@@ -89,6 +90,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
         if (SettingsStore.getValue("feature_spaces")) {
             SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
         }
+
+        // Force update is the easiest way to trigger the UI update (we don't store state for this)
+        this.dndWatcherRef = SettingsStore.watchSetting("doNotDisturb", null, () => this.forceUpdate());
     }
 
     private get hasHomePage(): boolean {
@@ -103,6 +107,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
 
     public componentWillUnmount() {
         if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef);
+        if (this.dndWatcherRef) SettingsStore.unwatchSetting(this.dndWatcherRef);
         if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
         this.tagStoreRef.remove();
@@ -288,6 +293,12 @@ export default class UserMenu extends React.Component<IProps, IState> {
         this.setState({contextMenuPosition: null}); // also close the menu
     };
 
+    private onDndToggle = (ev) => {
+        ev.stopPropagation();
+        const current = SettingsStore.getValue("doNotDisturb");
+        SettingsStore.setValue("doNotDisturb", null, SettingLevel.DEVICE, !current);
+    };
+
     private renderContextMenu = (): React.ReactNode => {
         if (!this.state.contextMenuPosition) return null;
 
@@ -534,6 +545,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 {/* masked image in CSS */}
             </span>
         );
+        let dnd;
         if (this.state.selectedSpace) {
             name = (
                 <div className="mx_UserMenu_doubleName">
@@ -560,6 +572,16 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 </div>
             );
             isPrototype = true;
+        } else if (SettingsStore.getValue("feature_dnd")) {
+            const isDnd = SettingsStore.getValue("doNotDisturb");
+            dnd = <AccessibleButton
+                onClick={this.onDndToggle}
+                className={classNames({
+                    "mx_UserMenu_dnd": true,
+                    "mx_UserMenu_dnd_noisy": !isDnd,
+                    "mx_UserMenu_dnd_muted": isDnd,
+                })}
+            />;
         }
         if (this.props.isMinimized) {
             name = null;
@@ -595,6 +617,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                             />
                         </span>
                         {name}
+                        {dnd}
                         {buttons}
                     </div>
                 </ContextMenuButton>

src/components/structures/auth/ForgotPassword.js

@@ -18,7 +18,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import Modal from "../../../Modal";
 import PasswordReset from "../../../PasswordReset";
@@ -27,7 +27,9 @@ import classNames from 'classnames';
 import AuthPage from "../../views/auth/AuthPage";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import ServerPicker from "../../views/elements/ServerPicker";
+import PassphraseField from '../../views/auth/PassphraseField';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { PASSWORD_MIN_SCORE } from '../../views/auth/RegistrationForm';
 
 // Phases
 // Show the forgot password inputs
@@ -137,10 +139,14 @@ export default class ForgotPassword extends React.Component {
         // refresh the server errors, just in case the server came back online
         await this._checkServerLiveliness(this.props.serverConfig);
 
+        await this['password_field'].validate({ allowEmpty: false });
+
         if (!this.state.email) {
             this.showErrorDialog(_t('The email address linked to your account must be entered.'));
         } else if (!this.state.password || !this.state.password2) {
             this.showErrorDialog(_t('A new password must be entered.'));
+        } else if (!this.state.passwordFieldValid) {
+            this.showErrorDialog(_t('Please choose a strong password'));
         } else if (this.state.password !== this.state.password2) {
             this.showErrorDialog(_t('New passwords must match each other.'));
         } else {
@@ -186,6 +192,12 @@ export default class ForgotPassword extends React.Component {
         });
     }
 
+    onPasswordValidate(result) {
+        this.setState({
+            passwordFieldValid: result.valid,
+        });
+    }
+
     renderForgot() {
         const Field = sdk.getComponent('elements.Field');
 
@@ -230,12 +242,15 @@ export default class ForgotPassword extends React.Component {
                     />
                 </div>
                 <div className="mx_AuthBody_fieldRow">
-                    <Field
+                    <PassphraseField
                         name="reset_password"
                         type="password"
-                        label={_t('New Password')}
+                        label={_td('New Password')}
                         value={this.state.password}
+                        minScore={PASSWORD_MIN_SCORE}
                         onChange={this.onInputChanged.bind(this, "password")}
+                        fieldRef={field => this['password_field'] = field}
+                        onValidate={(result) => this.onPasswordValidate(result)}
                         onFocus={() => CountlyAnalytics.instance.track("onboarding_forgot_password_newPassword_focus")}
                         onBlur={() => CountlyAnalytics.instance.track("onboarding_forgot_password_newPassword_blur")}
                         autoComplete="new-password"

src/components/structures/auth/Registration.tsx

@@ -436,6 +436,8 @@ export default class Registration extends React.Component<IProps, IState> {
             // ok fine, there's still no session: really go to the login page
             this.props.onLoginClick();
         }
+
+        return sessionLoaded;
     };
 
     private renderRegisterComponent() {
@@ -557,7 +559,12 @@ export default class Registration extends React.Component<IProps, IState> {
                             loggedInUserId: this.state.differentLoggedInUserId,
                         },
                     )}</p>
-                    <p><AccessibleButton element="span" className="mx_linkButton" onClick={this.onLoginClickWithCheck}>
+                    <p><AccessibleButton element="span" className="mx_linkButton" onClick={async event => {
+                        const sessionLoaded = await this.onLoginClickWithCheck(event);
+                        if (sessionLoaded) {
+                            dis.dispatch({action: "view_welcome_page"});
+                        }
+                    }}>
                         {_t("Continue with previous account")}
                     </AccessibleButton></p>
                 </div>;

src/components/structures/auth/SetupEncryptionBody.js

@@ -155,15 +155,14 @@ export default class SetupEncryptionBody extends React.Component {
             let verifyButton;
             if (store.hasDevicesToVerifyAgainst) {
                 verifyButton = <AccessibleButton kind="primary" onClick={this._onVerifyClick}>
-                    { _t("Verify with another session") }
+                    { _t("Use another login") }
                 </AccessibleButton>;
             }
 
             return (
                 <div>
                     <p>{_t(
-                        "Verify this login to access your encrypted messages and " +
-                        "prove to others that this login is really you.",
+                        "Verify your identity to access encrypted messages and prove your identity to others.",
                     )}</p>
 
                     <div className="mx_CompleteSecurity_actionRow">
@@ -205,8 +204,8 @@ export default class SetupEncryptionBody extends React.Component {
             return (
                 <div>
                     <p>{_t(
-                        "Without completing security on this session, it won’t have " +
-                        "access to encrypted messages.",
+                        "Without verifying, you won’t have access to all your messages " +
+                        "and may appear as untrusted to others.",
                     )}</p>
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton

src/components/views/auth/RegistrationForm.tsx

@@ -40,7 +40,7 @@ enum RegistrationField {
     PasswordConfirm = "field_password_confirm",
 }
 
-const PASSWORD_MIN_SCORE = 3; // safely unguessable: moderate protection from offline slow-hash scenario.
+export const PASSWORD_MIN_SCORE = 3; // safely unguessable: moderate protection from offline slow-hash scenario.
 
 interface IProps {
     // Values pre-filled in the input boxes when the component loads

src/components/views/avatars/BaseAvatar.tsx

@@ -26,6 +26,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import {toPx} from "../../../utils/units";
 import {ResizeMethod} from "../../../Avatar";
+import { _t } from '../../../languageHandler';
 
 interface IProps {
     name: string; // The name (first initial used as default)
@@ -140,6 +141,7 @@ const BaseAvatar = (props: IProps) => {
         if (onClick) {
             return (
                 <AccessibleButton
+                    aria-label={_t("Avatar")}
                     {...otherProps}
                     element="span"
                     className={classNames("mx_BaseAvatar", className)}

src/components/views/avatars/RoomAvatar.tsx

@@ -129,7 +129,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
             name: this.props.room.name,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     public render() {

src/components/views/context_menus/MessageContextMenu.js

@@ -52,6 +52,9 @@ export default class MessageContextMenu extends React.Component {
 
         /* callback called when the menu is dismissed */
         onFinished: PropTypes.func,
+
+        /* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */
+        onCloseDialog: PropTypes.func,
     };
 
     state = {
@@ -141,6 +144,7 @@ export default class MessageContextMenu extends React.Component {
 
                 const cli = MatrixClientPeg.get();
                 try {
+                    if (this.props.onCloseDialog) this.props.onCloseDialog();
                     await cli.redactEvent(
                         this.props.mxEvent.getRoomId(),
                         this.props.mxEvent.getId(),
@@ -190,6 +194,7 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onForwardClick = () => {
+        if (this.props.onCloseDialog) this.props.onCloseDialog();
         dis.dispatch({
             action: 'forward_event',
             event: this.props.mxEvent,

src/components/views/dialogs/InviteDialog.tsx

@@ -29,7 +29,10 @@ import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
-import createRoom, {canEncryptToAllUsers, findDMForUser, privateShouldBeEncrypted} from "../../../createRoom";
+import createRoom, {
+    canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted,
+    IInvite3PID,
+} from "../../../createRoom";
 import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
@@ -43,6 +46,7 @@ import {Room} from "matrix-js-sdk/src/models/room";
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../../customisations/Media";
+import {getAddressType} from "../../../UserAddress";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -331,6 +335,7 @@ interface IInviteDialogState {
     threepidResultsMixin: { user: Member, userId: string}[];
     canUseIdentityServer: boolean;
     tryingIdentityServer: boolean;
+    consultFirst: boolean;
 
     // These two flags are used for the 'Go' button to communicate what is going on.
     busy: boolean,
@@ -379,6 +384,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             threepidResultsMixin: [],
             canUseIdentityServer: !!MatrixClientPeg.get().getIdentityServerUrl(),
             tryingIdentityServer: false,
+            consultFirst: false,
 
             // These two flags are used for the 'Go' button to communicate what is going on.
             busy: false,
@@ -394,6 +400,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     }
 
+    private onConsultFirstChange = (ev) => {
+        this.setState({consultFirst: ev.target.checked});
+    }
+
     static buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number}[] {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
@@ -609,13 +619,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
     _startDm = async () => {
         this.setState({busy: true});
+        const client = MatrixClientPeg.get();
         const targets = this._convertFilter();
         const targetIds = targets.map(t => t.userId);
 
         // Check if there is already a DM with these people and reuse it if possible.
         let existingRoom: Room;
         if (targetIds.length === 1) {
-            existingRoom = findDMForUser(MatrixClientPeg.get(), targetIds[0]);
+            existingRoom = findDMForUser(client, targetIds[0]);
         } else {
             existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds);
         }
@@ -637,7 +648,6 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             // If so, enable encryption in the new room.
             const has3PidMembers = targets.some(t => t instanceof ThreepidMember);
             if (!has3PidMembers) {
-                const client = MatrixClientPeg.get();
                 const allHaveDeviceKeys = await canEncryptToAllUsers(client, targetIds);
                 if (allHaveDeviceKeys) {
                     createRoomOptions.encryption = true;
@@ -647,45 +657,52 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
         // Check if it's a traditional DM and create the room if required.
         // TODO: [Canonical DMs] Remove this check and instead just create the multi-person DM
-        let createRoomPromise = Promise.resolve(null) as Promise<string | null | boolean>;
-        const isSelf = targetIds.length === 1 && targetIds[0] === MatrixClientPeg.get().getUserId();
-        if (targetIds.length === 1 && !isSelf) {
-            createRoomOptions.dmUserId = targetIds[0];
-            createRoomPromise = createRoom(createRoomOptions);
-        } else if (isSelf) {
-            createRoomPromise = createRoom(createRoomOptions);
-        } else {
-            // Create a boring room and try to invite the targets manually.
-            createRoomPromise = createRoom(createRoomOptions).then(roomId => {
-                return inviteMultipleToRoom(roomId, targetIds);
-            }).then(result => {
-                if (this._shouldAbortAfterInviteError(result)) {
-                    return true; // abort
-                }
-            });
-        }
+        try {
+            const isSelf = targetIds.length === 1 && targetIds[0] === client.getUserId();
+            if (targetIds.length === 1 && !isSelf) {
+                createRoomOptions.dmUserId = targetIds[0];
+            }
 
-        // the createRoom call will show the room for us, so we don't need to worry about that.
-        createRoomPromise.then(abort => {
-            if (abort === true) return; // only abort on true booleans, not roomIds or something
+            if (targetIds.length > 1) {
+                createRoomOptions.createOpts = targetIds.reduce(
+                    (roomOptions, address) => {
+                        const type = getAddressType(address);
+                        if (type === 'email') {
+                            const invite: IInvite3PID = {
+                                id_server: client.getIdentityServerUrl(true),
+                                medium: 'email',
+                                address,
+                            };
+                            roomOptions.invite_3pid.push(invite);
+                        } else if (type === 'mx-user-id') {
+                            roomOptions.invite.push(address);
+                        }
+                        return roomOptions;
+                    },
+                    { invite: [], invite_3pid: [] },
+                )
+            }
+
+            await createRoom(createRoomOptions);
             this.props.onFinished();
-        }).catch(err => {
+        } catch (err) {
             console.error(err);
             this.setState({
                 busy: false,
                 errorText: _t("We couldn't create your DM."),
             });
-        });
+        }
     };
 
-    _inviteUsers = () => {
+    _inviteUsers = async () => {
         const startTime = CountlyAnalytics.getTimestamp();
         this.setState({busy: true});
         this._convertFilter();
         const targets = this._convertFilter();
         const targetIds = targets.map(t => t.userId);
 
-        const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.roomId);
         if (!room) {
             console.error("Failed to find the room to invite users to");
             this.setState({
@@ -695,12 +712,33 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             return;
         }
 
-        inviteMultipleToRoom(this.props.roomId, targetIds).then(result => {
+        try {
+            const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
             CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
             if (!this._shouldAbortAfterInviteError(result)) { // handles setting error message too
                 this.props.onFinished();
             }
-        }).catch(err => {
+
+            if (cli.isRoomEncrypted(this.props.roomId)) {
+                const visibilityEvent = room.currentState.getStateEvents(
+                    "m.room.history_visibility", "",
+                );
+                const visibility = visibilityEvent && visibilityEvent.getContent() &&
+                    visibilityEvent.getContent().history_visibility;
+                if (visibility == "world_readable" || visibility == "shared") {
+                    const invitedUsers = [];
+                    for (const [addr, state] of Object.entries(result.states)) {
+                        if (state === "invited" && getAddressType(addr) === "mx-user-id") {
+                            invitedUsers.push(addr);
+                        }
+                    }
+                    console.log("Sharing history with", invitedUsers);
+                    cli.sendSharedHistoryKeys(
+                        this.props.roomId, invitedUsers,
+                    );
+                }
+            }
+        } catch (err) {
             console.error(err);
             this.setState({
                 busy: false,
@@ -708,7 +746,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                     "We couldn't invite those users. Please check the users you want to invite and try again.",
                 ),
             });
-        });
+        }
     };
 
     _transferCall = async () => {
@@ -721,16 +759,34 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             });
         }
 
-        this.setState({busy: true});
-        try {
-            await this.props.call.transfer(targetIds[0]);
-            this.setState({busy: false});
-            this.props.onFinished();
-        } catch (e) {
-            this.setState({
-                busy: false,
-                errorText: _t("Failed to transfer call"),
+        if (this.state.consultFirst) {
+            const dmRoomId = await ensureDMExists(MatrixClientPeg.get(), targetIds[0]);
+
+            dis.dispatch({
+                action: 'place_call',
+                type: this.props.call.type,
+                room_id: dmRoomId,
+                transferee: this.props.call,
             });
+            dis.dispatch({
+                action: 'view_room',
+                room_id: dmRoomId,
+                should_peek: false,
+                joining: false,
+            });
+            this.props.onFinished();
+        } else {
+            this.setState({busy: true});
+            try {
+                await this.props.call.transfer(targetIds[0]);
+                this.setState({busy: false});
+                this.props.onFinished();
+            } catch (e) {
+                this.setState({
+                    busy: false,
+                    errorText: _t("Failed to transfer call"),
+                });
+            }
         }
     };
 
@@ -1191,10 +1247,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         let helpText;
         let buttonText;
         let goButtonFn;
+        let consultSection;
+        let keySharingWarning = <span />;
 
         const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer);
 
-        const userId = MatrixClientPeg.get().getUserId();
+        const cli = MatrixClientPeg.get();
+        const userId = cli.getUserId();
         if (this.props.kind === KIND_DM) {
             title = _t("Direct Messages");
 
@@ -1290,10 +1349,34 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
             buttonText = _t("Invite");
             goButtonFn = this._inviteUsers;
+
+            if (cli.isRoomEncrypted(this.props.roomId)) {
+                const room = cli.getRoom(this.props.roomId);
+                const visibilityEvent = room.currentState.getStateEvents(
+                    "m.room.history_visibility", "",
+                );
+                const visibility = visibilityEvent && visibilityEvent.getContent() &&
+                    visibilityEvent.getContent().history_visibility;
+                if (visibility === "world_readable" || visibility === "shared") {
+                    keySharingWarning =
+                        <p className='mx_InviteDialog_helpText'>
+                            <img
+                                src={require("../../../../res/img/element-icons/info.svg")}
+                                width={14} height={14} />
+                            {" " + _t("Invited people will be able to read old messages.")}
+                        </p>;
+                }
+            }
         } else if (this.props.kind === KIND_CALL_TRANSFER) {
             title = _t("Transfer");
             buttonText = _t("Transfer");
             goButtonFn = this._transferCall;
+            consultSection = <div>
+                <label>
+                    <input type="checkbox" checked={this.state.consultFirst} onChange={this.onConsultFirstChange} />
+                    {_t("Consult first")}
+                </label>
+            </div>;
         } else {
             console.error("Unknown kind of InviteDialog: " + this.props.kind);
         }
@@ -1323,12 +1406,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                             {spinner}
                         </div>
                     </div>
+                    {keySharingWarning}
                     {this._renderIdentityServerWarning()}
                     <div className='error'>{this.state.errorText}</div>
                     <div className='mx_InviteDialog_userSections'>
                         {this._renderSection('recents')}
                         {this._renderSection('suggestions')}
                     </div>
+                    {consultSection}
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/SeshatResetDialog.tsx

@@ -0,0 +1,54 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import {_t} from "../../../languageHandler";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+import {IDialogProps} from "./IDialogProps";
+
+@replaceableComponent("views.dialogs.SeshatResetDialog")
+export default class SeshatResetDialog extends React.PureComponent<IDialogProps> {
+    render() {
+        return (
+            <BaseDialog
+                hasCancel={true}
+                onFinished={this.props.onFinished.bind(null, false)}
+                title={_t("Reset event store?")}>
+                <div>
+                    <p>
+                        {_t("You most likely do not want to reset your event index store")}
+                        <br />
+                        {_t("If you do, please note that none of your messages will be deleted, " +
+                            "but the search experience might be degraded for a few moments" +
+                            "whilst the index is recreated",
+                        )}
+                    </p>
+                </div>
+                <DialogButtons
+                    primaryButton={_t("Reset event store")}
+                    onPrimaryButtonClick={this.props.onFinished.bind(null, true)}
+                    primaryButtonClass="danger"
+                    cancelButton={_t("Cancel")}
+                    onCancel={this.props.onFinished.bind(null, false)}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/SpaceSettingsDialog.tsx

@@ -126,8 +126,8 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
             <div>
                 { _t("Make this space private") }
                 <ToggleSwitch
-                    checked={joinRule === "private"}
-                    onChange={checked => setJoinRule(checked ? "private" : "invite")}
+                    checked={joinRule !== "public"}
+                    onChange={checked => setJoinRule(checked ? "invite" : "public")}
                     disabled={!canSetJoinRule}
                     aria-label={_t("Make this space private")}
                 />

src/components/views/dialogs/VerificationRequestDialog.js

@@ -50,7 +50,7 @@ export default class VerificationRequestDialog extends React.Component {
         const member = this.props.member ||
             otherUserId && MatrixClientPeg.get().getUser(otherUserId);
         const title = request && request.isSelfVerification ?
-            _t("Verify other session") : _t("Verification Request");
+            _t("Verify other login") : _t("Verification Request");
 
         return <BaseDialog className="mx_InfoDialog" onFinished={this.props.onFinished}
                 contentId="mx_Dialog_content"

src/components/views/dialogs/security/AccessSecretStorageDialog.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2018, 2019 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+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.
@@ -17,14 +16,17 @@ limitations under the License.
 
 import {debounce} from "lodash";
 import classNames from 'classnames';
-import React from 'react';
-import PropTypes from "prop-types";
+import React, {ChangeEvent, FormEvent} from 'react';
+import {ISecretStorageKeyInfo} from "matrix-js-sdk/src";
+
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import Field from '../../elements/Field';
 import AccessibleButton from '../../elements/AccessibleButton';
-
-import { _t } from '../../../../languageHandler';
+import {_t} from '../../../../languageHandler';
+import {IDialogProps} from "../IDialogProps";
+import {accessSecretStorage} from "../../../../SecurityManager";
+import Modal from "../../../../Modal";
 
 // Maximum acceptable size of a key file. It's 59 characters including the spaces we encode,
 // so this should be plenty and allow for people putting extra whitespace in the file because
@@ -34,22 +36,31 @@ const KEY_FILE_MAX_SIZE = 128;
 // Don't shout at the user that their key is invalid every time they type a key: wait a short time
 const VALIDATION_THROTTLE_MS = 200;
 
+interface IProps extends IDialogProps {
+    keyInfo: ISecretStorageKeyInfo;
+    checkPrivateKey: (k: {passphrase?: string, recoveryKey?: string}) => boolean;
+}
+
+interface IState {
+    recoveryKey: string;
+    recoveryKeyValid: boolean | null;
+    recoveryKeyCorrect: boolean | null;
+    recoveryKeyFileError: boolean | null;
+    forceRecoveryKey: boolean;
+    passPhrase: string;
+    keyMatches: boolean | null;
+    resetting: boolean;
+}
+
 /*
  * Access Secure Secret Storage by requesting the user's passphrase.
  */
-export default class AccessSecretStorageDialog extends React.PureComponent {
-    static propTypes = {
-        // { passphrase, pubkey }
-        keyInfo: PropTypes.object.isRequired,
-        // Function from one of { passphrase, recoveryKey } -> boolean
-        checkPrivateKey: PropTypes.func.isRequired,
-    }
+export default class AccessSecretStorageDialog extends React.PureComponent<IProps, IState> {
+    private fileUpload = React.createRef<HTMLInputElement>();
 
     constructor(props) {
         super(props);
 
-        this._fileUpload = React.createRef();
-
         this.state = {
             recoveryKey: "",
             recoveryKeyValid: null,
@@ -58,24 +69,28 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             forceRecoveryKey: false,
             passPhrase: '',
             keyMatches: null,
+            resetting: false,
         };
     }
 
-    _onCancel = () => {
+    private onCancel = () => {
+        if (this.state.resetting) {
+            this.setState({resetting: false});
+        }
         this.props.onFinished(false);
-    }
+    };
 
-    _onUseRecoveryKeyClick = () => {
+    private onUseRecoveryKeyClick = () => {
         this.setState({
             forceRecoveryKey: true,
         });
-    }
+    };
 
-    _validateRecoveryKeyOnChange = debounce(() => {
-        this._validateRecoveryKey();
+    private validateRecoveryKeyOnChange = debounce(async () => {
+        await this.validateRecoveryKey();
     }, VALIDATION_THROTTLE_MS);
 
-    async _validateRecoveryKey() {
+    private async validateRecoveryKey() {
         if (this.state.recoveryKey === '') {
             this.setState({
                 recoveryKeyValid: null,
@@ -102,27 +117,27 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         }
     }
 
-    _onRecoveryKeyChange = (e) => {
+    private onRecoveryKeyChange = (ev: ChangeEvent<HTMLInputElement>) => {
         this.setState({
-            recoveryKey: e.target.value,
+            recoveryKey: ev.target.value,
             recoveryKeyFileError: null,
         });
 
         // also clear the file upload control so that the user can upload the same file
         // the did before (otherwise the onchange wouldn't fire)
-        if (this._fileUpload.current) this._fileUpload.current.value = null;
+        if (this.fileUpload.current) this.fileUpload.current.value = null;
 
         // We don't use Field's validation here because a) we want it in a separate place rather
         // than in a tooltip and b) we want it to display feedback based on the uploaded file
         // as well as the text box. Ideally we would refactor Field's validation logic so we could
         // re-use some of it.
-        this._validateRecoveryKeyOnChange();
-    }
+        this.validateRecoveryKeyOnChange();
+    };
 
-    _onRecoveryKeyFileChange = async e => {
-        if (e.target.files.length === 0) return;
+    private onRecoveryKeyFileChange = async (ev: ChangeEvent<HTMLInputElement>) => {
+        if (ev.target.files.length === 0) return;
 
-        const f = e.target.files[0];
+        const f = ev.target.files[0];
 
         if (f.size > KEY_FILE_MAX_SIZE) {
             this.setState({
@@ -140,7 +155,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     recoveryKeyFileError: null,
                     recoveryKey: contents.trim(),
                 });
-                this._validateRecoveryKey();
+                await this.validateRecoveryKey();
             } else {
                 this.setState({
                     recoveryKeyFileError: true,
@@ -150,14 +165,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 });
             }
         }
+    };
+
+    private onRecoveryKeyFileUploadClick = () => {
+        this.fileUpload.current.click();
     }
 
-    _onRecoveryKeyFileUploadClick = () => {
-        this._fileUpload.current.click();
-    }
-
-    _onPassPhraseNext = async (e) => {
-        e.preventDefault();
+    private onPassPhraseNext = async (ev: FormEvent<HTMLFormElement>) => {
+        ev.preventDefault();
 
         if (this.state.passPhrase.length <= 0) return;
 
@@ -169,10 +184,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         } else {
             this.setState({ keyMatches });
         }
-    }
+    };
 
-    _onRecoveryKeyNext = async (e) => {
-        e.preventDefault();
+    private onRecoveryKeyNext = async (ev: FormEvent<HTMLFormElement>) => {
+        ev.preventDefault();
 
         if (!this.state.recoveryKeyValid) return;
 
@@ -184,16 +199,65 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         } else {
             this.setState({ keyMatches });
         }
-    }
+    };
 
-    _onPassPhraseChange = (e) => {
+    private onPassPhraseChange = (ev: ChangeEvent<HTMLInputElement>) => {
         this.setState({
-            passPhrase: e.target.value,
+            passPhrase: ev.target.value,
             keyMatches: null,
         });
-    }
+    };
 
-    getKeyValidationText() {
+    private onResetAllClick = (ev: React.MouseEvent<HTMLAnchorElement>) => {
+        ev.preventDefault();
+        this.setState({resetting: true});
+    };
+
+    private onConfirmResetAllClick = async () => {
+        // Hide ourselves so the user can interact with the reset dialogs.
+        // We don't conclude the promise chain (onFinished) yet to avoid confusing
+        // any upstream code flows.
+        //
+        // Note: this will unmount us, so don't call `setState` or anything in the
+        // rest of this function.
+        Modal.toggleCurrentDialogVisibility();
+
+        try {
+            // Force reset secret storage (which resets the key backup)
+            await accessSecretStorage(async () => {
+                // Now reset cross-signing so everything Just Works™ again.
+                const cli = MatrixClientPeg.get();
+                await cli.bootstrapCrossSigning({
+                    authUploadDeviceSigningKeys: async (makeRequest) => {
+                        // XXX: Making this an import breaks the app.
+                        const InteractiveAuthDialog = sdk.getComponent("views.dialogs.InteractiveAuthDialog");
+                        const {finished} = Modal.createTrackedDialog(
+                            'Cross-signing keys dialog', '', InteractiveAuthDialog,
+                            {
+                                title: _t("Setting up keys"),
+                                matrixClient: cli,
+                                makeRequest,
+                            },
+                        );
+                        const [confirmed] = await finished;
+                        if (!confirmed) {
+                            throw new Error("Cross-signing key upload auth canceled");
+                        }
+                    },
+                    setupNewCrossSigning: true,
+                });
+
+                // Now we can indicate that the user is done pressing buttons, finally.
+                // Upstream flows will detect the new secret storage, key backup, etc and use it.
+                this.props.onFinished(true);
+            }, true);
+        } catch (e) {
+            console.error(e);
+            this.props.onFinished(false);
+        }
+    };
+
+    private getKeyValidationText(): string {
         if (this.state.recoveryKeyFileError) {
             return _t("Wrong file type");
         } else if (this.state.recoveryKeyCorrect) {
@@ -208,7 +272,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
     }
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        // Caution: Making these an import will break tests.
+        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
+        const DialogButtons = sdk.getComponent("views.elements.DialogButtons");
 
         const hasPassphrase = (
             this.props.keyInfo &&
@@ -217,11 +283,36 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             this.props.keyInfo.passphrase.iterations
         );
 
+        const resetButton = (
+            <div className="mx_AccessSecretStorageDialog_reset">
+                {_t("Forgotten or lost all recovery methods? <a>Reset all</a>", null, {
+                    a: (sub) => <a
+                        href="" onClick={this.onResetAllClick}
+                        className="mx_AccessSecretStorageDialog_reset_link">{sub}</a>,
+                })}
+            </div>
+        );
+
         let content;
         let title;
         let titleClass;
-        if (hasPassphrase && !this.state.forceRecoveryKey) {
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        if (this.state.resetting) {
+            title = _t("Reset everything");
+            titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_resetBadge'];
+            content = <div>
+                <p>{_t("Only do this if you have no other device to complete verification with.")}</p>
+                <p>{_t("If you reset everything, you will restart with no trusted sessions, no trusted users, and "
+                    + "might not be able to see past messages.")}</p>
+                <DialogButtons
+                    primaryButton={_t('Reset')}
+                    onPrimaryButtonClick={this.onConfirmResetAllClick}
+                    hasCancel={true}
+                    onCancel={this.onCancel}
+                    focus={false}
+                    primaryButtonClass="danger"
+                />
+            </div>;
+        } else if (hasPassphrase && !this.state.forceRecoveryKey) {
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             title = _t("Security Phrase");
             titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_securePhraseTitle'];
@@ -244,18 +335,18 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     {
                         button: s => <AccessibleButton className="mx_linkButton"
                             element="span"
-                            onClick={this._onUseRecoveryKeyClick}
+                            onClick={this.onUseRecoveryKeyClick}
                         >
                             {s}
                         </AccessibleButton>,
                     },
                 )}</p>
 
-                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
+                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this.onPassPhraseNext}>
                     <input
                         type="password"
                         className="mx_AccessSecretStorageDialog_passPhraseInput"
-                        onChange={this._onPassPhraseChange}
+                        onChange={this.onPassPhraseChange}
                         value={this.state.passPhrase}
                         autoFocus={true}
                         autoComplete="new-password"
@@ -264,18 +355,18 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     {keyStatus}
                     <DialogButtons
                         primaryButton={_t('Continue')}
-                        onPrimaryButtonClick={this._onPassPhraseNext}
+                        onPrimaryButtonClick={this.onPassPhraseNext}
                         hasCancel={true}
-                        onCancel={this._onCancel}
+                        onCancel={this.onCancel}
                         focus={false}
                         primaryDisabled={this.state.passPhrase.length === 0}
+                        additive={resetButton}
                     />
                 </form>
             </div>;
         } else {
             title = _t("Security Key");
             titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_secureBackupTitle'];
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
             const feedbackClasses = classNames({
                 'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true,
@@ -291,7 +382,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
                 <form
                     className="mx_AccessSecretStorageDialog_primaryContainer"
-                    onSubmit={this._onRecoveryKeyNext}
+                    onSubmit={this.onRecoveryKeyNext}
                     spellCheck={false}
                     autoComplete="off"
                 >
@@ -301,7 +392,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                                 type="password"
                                 label={_t('Security Key')}
                                 value={this.state.recoveryKey}
-                                onChange={this._onRecoveryKeyChange}
+                                onChange={this.onRecoveryKeyChange}
                                 forceValidity={this.state.recoveryKeyCorrect}
                                 autoComplete="off"
                             />
@@ -312,10 +403,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         <div>
                             <input type="file"
                                 className="mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput"
-                                ref={this._fileUpload}
-                                onChange={this._onRecoveryKeyFileChange}
+                                ref={this.fileUpload}
+                                onChange={this.onRecoveryKeyFileChange}
                             />
-                            <AccessibleButton kind="primary" onClick={this._onRecoveryKeyFileUploadClick}>
+                            <AccessibleButton kind="primary" onClick={this.onRecoveryKeyFileUploadClick}>
                                 {_t("Upload")}
                             </AccessibleButton>
                         </div>
@@ -323,13 +414,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     {recoveryKeyFeedback}
                     <DialogButtons
                         primaryButton={_t('Continue')}
-                        onPrimaryButtonClick={this._onRecoveryKeyNext}
+                        onPrimaryButtonClick={this.onRecoveryKeyNext}
                         hasCancel={true}
                         cancelButton={_t("Go Back")}
                         cancelButtonClass='danger'
-                        onCancel={this._onCancel}
+                        onCancel={this.onCancel}
                         focus={false}
                         primaryDisabled={!this.state.recoveryKeyValid}
+                        additive={resetButton}
                     />
                 </form>
             </div>;
@@ -341,9 +433,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 title={title}
                 titleClass={titleClass}
             >
-            <div>
-                {content}
-            </div>
+                <div>
+                    {content}
+                </div>
             </BaseDialog>
         );
     }

src/components/views/elements/EventTilePreview.tsx

@@ -19,7 +19,6 @@ import classnames from 'classnames';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 
 import * as Avatar from '../../../Avatar';
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import EventTile from '../rooms/EventTile';
 import SettingsStore from "../../../settings/SettingsStore";
 import {Layout} from "../../../settings/Layout";
@@ -41,15 +40,26 @@ interface IProps {
      * classnames to apply to the wrapper of the preview
      */
     className: string;
+
+    /**
+     * The ID of the displayed user
+     */
+    userId: string;
+
+    /**
+     * The display name of the displayed user
+     */
+    displayName?: string;
+
+    /**
+     * The mxc:// avatar URL of the displayed user
+     */
+    avatarUrl?: string;
 }
 
-/* eslint-disable camelcase */
 interface IState {
-    userId: string;
-    displayname: string;
-    avatar_url: string;
+    message: string;
 }
-/* eslint-enable camelcase */
 
 const AVATAR_SIZE = 32;
 
@@ -57,45 +67,28 @@ const AVATAR_SIZE = 32;
 export default class EventTilePreview extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
-
         this.state = {
-            userId: "@erim:fink.fink",
-            displayname: "Erimayas Fink",
-            avatar_url: null,
+            message: props.message,
         };
     }
 
-    async componentDidMount() {
-        // Fetch current user data
-        const client = MatrixClientPeg.get();
-        const userId = client.getUserId();
-        const profileInfo = await client.getProfileInfo(userId);
-        const avatarUrl = profileInfo.avatar_url;
-
-        this.setState({
-            userId,
-            displayname: profileInfo.displayname,
-            avatar_url: avatarUrl,
-        });
-    }
-
-    private fakeEvent({userId, displayname, avatar_url: avatarUrl}: IState) {
+    private fakeEvent({message}: IState) {
         // Fake it till we make it
         /* eslint-disable quote-props */
         const rawEvent = {
             type: "m.room.message",
-            sender: userId,
+            sender: this.props.userId,
             content: {
                 "m.new_content": {
                     msgtype: "m.text",
-                    body: this.props.message,
-                    displayname: displayname,
-                    avatar_url: avatarUrl,
+                    body: message,
+                    displayname: this.props.displayName,
+                    avatar_url: this.props.avatarUrl,
                 },
                 msgtype: "m.text",
-                body: this.props.message,
-                displayname: displayname,
-                avatar_url: avatarUrl,
+                body: message,
+                displayname: this.props.displayName,
+                avatar_url: this.props.avatarUrl,
             },
             unsigned: {
                 age: 97,
@@ -108,12 +101,15 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
 
         // Fake it more
         event.sender = {
-            name: displayname,
-            userId: userId,
+            name: this.props.displayName,
+            userId: this.props.userId,
             getAvatarUrl: (..._) => {
-                return Avatar.avatarUrlForUser({avatarUrl}, AVATAR_SIZE, AVATAR_SIZE, "crop");
+                return Avatar.avatarUrlForUser(
+                    { avatarUrl: this.props.avatarUrl },
+                    AVATAR_SIZE, AVATAR_SIZE, "crop",
+                );
             },
-            getMxcAvatarUrl: () => avatarUrl,
+            getMxcAvatarUrl: () => this.props.avatarUrl,
         };
 
         return event;

src/components/views/elements/FacePile.tsx

@@ -0,0 +1,66 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { HTMLAttributes } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { sortBy } from "lodash";
+
+import MemberAvatar from "../avatars/MemberAvatar";
+import { _t } from "../../../languageHandler";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import { useRoomMembers } from "../../../hooks/useRoomMembers";
+
+const DEFAULT_NUM_FACES = 5;
+
+interface IProps extends HTMLAttributes<HTMLSpanElement> {
+    room: Room;
+    onlyKnownUsers?: boolean;
+    numShown?: number;
+}
+
+const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
+
+const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IProps) => {
+    let members = useRoomMembers(room);
+
+    // sort users with an explicit avatar first
+    const iteratees = [member => !!member.getMxcAvatarUrl()];
+    if (onlyKnownUsers) {
+        members = members.filter(isKnownMember);
+    } else {
+        // sort known users first
+        iteratees.unshift(member => isKnownMember(member));
+    }
+    if (members.length < 1) return null;
+
+    const shownMembers = sortBy(members, iteratees).slice(0, numShown);
+    return <div {...props} className="mx_FacePile">
+        <div className="mx_FacePile_faces">
+            { shownMembers.map(member => {
+                return <TextWithTooltip key={member.userId} tooltip={member.name}>
+                    <MemberAvatar member={member} width={28} height={28} />
+                </TextWithTooltip>;
+            }) }
+        </div>
+        { onlyKnownUsers && <span>
+            { _t("%(count)s people you know have already joined", { count: members.length }) }
+        </span> }
+    </div>
+};
+
+export default FacePile;

src/components/views/elements/ImageView.js

@@ -1,235 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {formatDate} from '../../../DateUtils';
-import { _t } from '../../../languageHandler';
-import filesize from "filesize";
-import AccessibleButton from "./AccessibleButton";
-import Modal from "../../../Modal";
-import * as sdk from "../../../index";
-import {Key} from "../../../Keyboard";
-import FocusLock from "react-focus-lock";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-
-@replaceableComponent("views.elements.ImageView")
-export default class ImageView extends React.Component {
-    static propTypes = {
-        src: PropTypes.string.isRequired, // the source of the image being displayed
-        name: PropTypes.string, // the main title ('name') for the image
-        link: PropTypes.string, // the link (if any) applied to the name of the image
-        width: PropTypes.number, // width of the image src in pixels
-        height: PropTypes.number, // height of the image src in pixels
-        fileSize: PropTypes.number, // size of the image src in bytes
-        onFinished: PropTypes.func.isRequired, // callback when the lightbox is dismissed
-
-        // the event (if any) that the Image is displaying. Used for event-specific stuff like
-        // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
-        // properties above, which let us use lightboxes to display images which aren't associated
-        // with events.
-        mxEvent: PropTypes.object,
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = { rotationDegrees: 0 };
-    }
-
-    onKeyDown = (ev) => {
-        if (ev.key === Key.ESCAPE) {
-            ev.stopPropagation();
-            ev.preventDefault();
-            this.props.onFinished();
-        }
-    };
-
-    onRedactClick = () => {
-        const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
-        Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
-            onFinished: (proceed) => {
-                if (!proceed) return;
-                this.props.onFinished();
-                MatrixClientPeg.get().redactEvent(
-                    this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(),
-                ).catch(function(e) {
-                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                    // display error message stating you couldn't delete this.
-                    const code = e.errcode || e.statusCode;
-                    Modal.createTrackedDialog('You cannot delete this image.', '', ErrorDialog, {
-                        title: _t('Error'),
-                        description: _t('You cannot delete this image. (%(code)s)', {code: code}),
-                    });
-                });
-            },
-        });
-    };
-
-    getName() {
-        let name = this.props.name;
-        if (name && this.props.link) {
-            name = <a href={ this.props.link } target="_blank" rel="noreferrer noopener">{ name }</a>;
-        }
-        return name;
-    }
-
-    rotateCounterClockwise = () => {
-        const cur = this.state.rotationDegrees;
-        const rotationDegrees = (cur - 90) % 360;
-        this.setState({ rotationDegrees });
-    };
-
-    rotateClockwise = () => {
-        const cur = this.state.rotationDegrees;
-        const rotationDegrees = (cur + 90) % 360;
-        this.setState({ rotationDegrees });
-    };
-
-    render() {
-/*
-        // In theory max-width: 80%, max-height: 80% on the CSS should work
-        // but in practice, it doesn't, so do it manually:
-
-        var width = this.props.width || 500;
-        var height = this.props.height || 500;
-
-        var maxWidth = document.documentElement.clientWidth * 0.8;
-        var maxHeight = document.documentElement.clientHeight * 0.8;
-
-        var widthFrac = width / maxWidth;
-        var heightFrac = height / maxHeight;
-
-        var displayWidth;
-        var displayHeight;
-        if (widthFrac > heightFrac) {
-            displayWidth = Math.min(width, maxWidth);
-            displayHeight = (displayWidth / width) * height;
-        } else {
-            displayHeight = Math.min(height, maxHeight);
-            displayWidth = (displayHeight / height) * width;
-        }
-
-        var style = {
-            width: displayWidth,
-            height: displayHeight
-        };
-*/
-        let style = {};
-        let res;
-
-        if (this.props.width && this.props.height) {
-            style = {
-                width: this.props.width,
-                height: this.props.height,
-            };
-            res = style.width + "x" + style.height + "px";
-        }
-
-        let size;
-        if (this.props.fileSize) {
-            size = filesize(this.props.fileSize);
-        }
-
-        let sizeRes;
-        if (size && res) {
-            sizeRes = size + ", " + res;
-        } else {
-            sizeRes = size || res;
-        }
-
-        let mayRedact = false;
-        const showEventMeta = !!this.props.mxEvent;
-
-        let eventMeta;
-        if (showEventMeta) {
-            // Figure out the sender, defaulting to mxid
-            let sender = this.props.mxEvent.getSender();
-            const cli = MatrixClientPeg.get();
-            const room = cli.getRoom(this.props.mxEvent.getRoomId());
-            if (room) {
-                mayRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
-                const member = room.getMember(sender);
-                if (member) sender = member.name;
-            }
-
-            eventMeta = (<div className="mx_ImageView_metadata">
-                { _t('Uploaded on %(date)s by %(user)s', {
-                    date: formatDate(new Date(this.props.mxEvent.getTs())),
-                    user: sender,
-                }) }
-            </div>);
-        }
-
-        let eventRedact;
-        if (mayRedact) {
-            eventRedact = (<div className="mx_ImageView_button" onClick={this.onRedactClick}>
-                { _t('Remove') }
-            </div>);
-        }
-
-        const rotationDegrees = this.state.rotationDegrees;
-        const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
-
-        return (
-            <FocusLock
-                returnFocus={true}
-                lockProps={{
-                    onKeyDown: this.onKeyDown,
-                    role: "dialog",
-                }}
-                className="mx_ImageView"
-            >
-                <div className="mx_ImageView_lhs">
-                </div>
-                <div className="mx_ImageView_content">
-                    <img src={this.props.src} title={this.props.name} style={effectiveStyle} className="mainImage" />
-                    <div className="mx_ImageView_labelWrapper">
-                        <div className="mx_ImageView_label">
-                            <AccessibleButton className="mx_ImageView_rotateCounterClockwise" title={_t("Rotate Left")} onClick={ this.rotateCounterClockwise }>
-                                <img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_rotateClockwise" title={_t("Rotate Right")} onClick={ this.rotateClockwise }>
-                                <img src={require("../../../../res/img/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_cancel" title={_t("Close")} onClick={ this.props.onFinished }>
-                              <img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } />
-                            </AccessibleButton>
-                            <div className="mx_ImageView_shim">
-                            </div>
-                            <div className="mx_ImageView_name">
-                                { this.getName() }
-                            </div>
-                            { eventMeta }
-                            <a className="mx_ImageView_link" href={ this.props.src } download={ this.props.name } target="_blank" rel="noopener">
-                                <div className="mx_ImageView_download">
-                                        { _t('Download this file') }<br />
-                                         <span className="mx_ImageView_size">{ sizeRes }</span>
-                                </div>
-                            </a>
-                            { eventRedact }
-                            <div className="mx_ImageView_shim">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className="mx_ImageView_rhs">
-                </div>
-            </FocusLock>
-        );
-    }
-}

src/components/views/elements/ImageView.tsx

@@ -0,0 +1,439 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020, 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { createRef } from 'react';
+import { _t } from '../../../languageHandler';
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
+import {Key} from "../../../Keyboard";
+import FocusLock from "react-focus-lock";
+import MemberAvatar from "../avatars/MemberAvatar";
+import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import MessageContextMenu from "../context_menus/MessageContextMenu";
+import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
+import MessageTimestamp from "../messages/MessageTimestamp";
+import SettingsStore from "../../../settings/SettingsStore";
+import {formatFullDate} from "../../../DateUtils";
+import dis from '../../../dispatcher/dispatcher';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+
+const MIN_ZOOM = 100;
+const MAX_ZOOM = 300;
+// This is used for the buttons
+const ZOOM_STEP = 10;
+// This is used for mouse wheel events
+const ZOOM_COEFFICIENT = 10;
+// If we have moved only this much we can zoom
+const ZOOM_DISTANCE = 10;
+
+
+interface IProps {
+    src: string, // the source of the image being displayed
+    name?: string, // the main title ('name') for the image
+    link?: string, // the link (if any) applied to the name of the image
+    width?: number, // width of the image src in pixels
+    height?: number, // height of the image src in pixels
+    fileSize?: number, // size of the image src in bytes
+    onFinished(): void, // callback when the lightbox is dismissed
+
+    // the event (if any) that the Image is displaying. Used for event-specific stuff like
+    // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
+    // properties above, which let us use lightboxes to display images which aren't associated
+    // with events.
+    mxEvent: MatrixEvent,
+    permalinkCreator: RoomPermalinkCreator,
+}
+
+interface IState {
+    rotation: number,
+    zoom: number,
+    translationX: number,
+    translationY: number,
+    moving: boolean,
+    contextMenuDisplayed: boolean,
+}
+
+@replaceableComponent("views.elements.ImageView")
+export default class ImageView extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            rotation: 0,
+            zoom: MIN_ZOOM,
+            translationX: 0,
+            translationY: 0,
+            moving: false,
+            contextMenuDisplayed: false,
+        };
+    }
+
+    // XXX: Refs to functional components
+    private contextMenuButton = createRef<any>();
+    private focusLock = createRef<any>();
+
+    private initX = 0;
+    private initY = 0;
+    private lastX = 0;
+    private lastY = 0;
+    private previousX = 0;
+    private previousY = 0;
+
+    componentDidMount() {
+        // We have to use addEventListener() because the listener
+        // needs to be passive in order to work with Chromium
+        this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
+    }
+
+    componentWillUnmount() {
+        this.focusLock.current.removeEventListener('wheel', this.onWheel);
+    }
+
+    private onKeyDown = (ev: KeyboardEvent) => {
+        if (ev.key === Key.ESCAPE) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.props.onFinished();
+        }
+    };
+
+    private onWheel = (ev: WheelEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const newZoom = this.state.zoom - (ev.deltaY * ZOOM_COEFFICIENT);
+
+        if (newZoom <= MIN_ZOOM) {
+            this.setState({
+                zoom: MIN_ZOOM,
+                translationX: 0,
+                translationY: 0,
+            });
+            return;
+        }
+        if (newZoom >= MAX_ZOOM) {
+            this.setState({zoom: MAX_ZOOM});
+            return;
+        }
+
+        this.setState({
+            zoom: newZoom,
+        });
+    };
+
+    private onRotateCounterClockwiseClick = () => {
+        const cur = this.state.rotation;
+        const rotationDegrees = cur - 90;
+        this.setState({ rotation: rotationDegrees });
+    };
+
+    private onRotateClockwiseClick = () => {
+        const cur = this.state.rotation;
+        const rotationDegrees = cur + 90;
+        this.setState({ rotation: rotationDegrees });
+    };
+
+    private onZoomInClick = () => {
+        if (this.state.zoom >= MAX_ZOOM) {
+            this.setState({zoom: MAX_ZOOM});
+            return;
+        }
+
+        this.setState({
+            zoom: this.state.zoom + ZOOM_STEP,
+        });
+    };
+
+    private onZoomOutClick = () => {
+        if (this.state.zoom <= MIN_ZOOM) {
+            this.setState({
+                zoom: MIN_ZOOM,
+                translationX: 0,
+                translationY: 0,
+            });
+            return;
+        }
+        this.setState({
+            zoom: this.state.zoom - ZOOM_STEP,
+        });
+    };
+
+    private onDownloadClick = () => {
+        const a = document.createElement("a");
+        a.href = this.props.src;
+        a.download = this.props.name;
+        a.target = "_blank";
+        a.click();
+    };
+
+    private onOpenContextMenu = () => {
+        this.setState({
+            contextMenuDisplayed: true,
+        });
+    };
+
+    private onCloseContextMenu = () => {
+        this.setState({
+            contextMenuDisplayed: false,
+        });
+    };
+
+    private onPermalinkClicked = (ev: React.MouseEvent) => {
+        // This allows the permalink to be opened in a new tab/window or copied as
+        // matrix.to, but also for it to enable routing within Element when clicked.
+        ev.preventDefault();
+        dis.dispatch({
+            action: 'view_room',
+            event_id: this.props.mxEvent.getId(),
+            highlighted: true,
+            room_id: this.props.mxEvent.getRoomId(),
+        });
+        this.props.onFinished();
+    };
+
+    private onStartMoving = (ev: React.MouseEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        // Zoom in if we are completely zoomed out
+        if (this.state.zoom === MIN_ZOOM) {
+            this.setState({zoom: MAX_ZOOM});
+            return;
+        }
+
+        this.setState({moving: true});
+        this.previousX = this.state.translationX;
+        this.previousY = this.state.translationY;
+        this.initX = ev.pageX - this.lastX;
+        this.initY = ev.pageY - this.lastY;
+    };
+
+    private onMoving = (ev: React.MouseEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        if (!this.state.moving) return;
+
+        this.lastX = ev.pageX - this.initX;
+        this.lastY = ev.pageY - this.initY;
+        this.setState({
+            translationX: this.lastX,
+            translationY: this.lastY,
+        });
+    };
+
+    private onEndMoving = () => {
+        // Zoom out if we haven't moved much
+        if (
+            this.state.moving === true &&
+            Math.abs(this.state.translationX - this.previousX) < ZOOM_DISTANCE &&
+            Math.abs(this.state.translationY - this.previousY) < ZOOM_DISTANCE
+        ) {
+            this.setState({
+                zoom: MIN_ZOOM,
+                translationX: 0,
+                translationY: 0,
+            });
+        }
+        this.setState({moving: false});
+    };
+
+    private renderContextMenu() {
+        let contextMenu = null;
+        if (this.state.contextMenuDisplayed) {
+            contextMenu = (
+                <ContextMenu
+                    {...aboveLeftOf(this.contextMenuButton.current.getBoundingClientRect())}
+                    onFinished={this.onCloseContextMenu}
+                >
+                    <MessageContextMenu
+                        mxEvent={this.props.mxEvent}
+                        permalinkCreator={this.props.permalinkCreator}
+                        onFinished={this.onCloseContextMenu}
+                        onCloseDialog={this.props.onFinished}
+                    />
+                </ContextMenu>
+            );
+        }
+
+        return (
+            <React.Fragment>
+                { contextMenu }
+            </React.Fragment>
+        );
+    }
+
+    render() {
+        const showEventMeta = !!this.props.mxEvent;
+
+        let cursor;
+        if (this.state.moving) {
+            cursor= "grabbing";
+        } else if (this.state.zoom === MIN_ZOOM) {
+            cursor = "zoom-in";
+        } else {
+            cursor = "zoom-out";
+        }
+        const rotationDegrees = this.state.rotation + "deg";
+        const zoomPercentage = this.state.zoom/100;
+        const translatePixelsX = this.state.translationX + "px";
+        const translatePixelsY = this.state.translationY + "px";
+        // The order of the values is important!
+        // First, we translate and only then we rotate, otherwise
+        // we would apply the translation to an already rotated
+        // image causing it translate in the wrong direction.
+        const style = {
+            cursor: cursor,
+            transition: this.state.moving ? null : "transform 200ms ease 0s",
+            transform: `translateX(${translatePixelsX})
+                        translateY(${translatePixelsY})
+                        scale(${zoomPercentage})
+                        rotate(${rotationDegrees})`,
+        };
+
+        let info;
+        if (showEventMeta) {
+            const mxEvent = this.props.mxEvent;
+            const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
+            let permalink = "#";
+            if (this.props.permalinkCreator) {
+                permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+            }
+
+            const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+            const sender = (
+                <div className="mx_ImageView_info_sender">
+                    {senderName}
+                </div>
+            );
+            const messageTimestamp = (
+                <a
+                    href={permalink}
+                    onClick={this.onPermalinkClicked}
+                    aria-label={formatFullDate(new Date(this.props.mxEvent.getTs()), showTwelveHour, false)}
+                >
+                    <MessageTimestamp
+                        showFullDate={true}
+                        showTwelveHour={showTwelveHour}
+                        ts={mxEvent.getTs()}
+                        showSeconds={false}
+                    />
+                </a>
+            );
+            const avatar = (
+                <MemberAvatar
+                    member={mxEvent.sender}
+                    width={32} height={32}
+                    viewUserOnClick={true}
+                />
+            );
+
+            info = (
+                <div className="mx_ImageView_info_wrapper">
+                    {avatar}
+                    <div className="mx_ImageView_info">
+                        {sender}
+                        {messageTimestamp}
+                    </div>
+                </div>
+            );
+        } else {
+            // If there is no event - we're viewing an avatar, we set
+            // an empty div here, since the panel uses space-between
+            // and we want the same placement of elements
+            info = (
+                <div></div>
+            );
+        }
+
+        let contextMenuButton;
+        if (this.props.mxEvent) {
+            contextMenuButton = (
+                <ContextMenuTooltipButton
+                    className="mx_ImageView_button mx_ImageView_button_more"
+                    title={_t("Options")}
+                    onClick={this.onOpenContextMenu}
+                    inputRef={this.contextMenuButton}
+                    isExpanded={this.state.contextMenuDisplayed}
+                />
+            );
+        }
+
+        return (
+            <FocusLock
+                returnFocus={true}
+                lockProps={{
+                    onKeyDown: this.onKeyDown,
+                    role: "dialog",
+                }}
+                className="mx_ImageView"
+                ref={this.focusLock}
+            >
+                <div className="mx_ImageView_panel">
+                    {info}
+                    <div className="mx_ImageView_toolbar">
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                            title={_t("Rotate Right")}
+                            onClick={this.onRotateClockwiseClick}>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_rotateCCW"
+                            title={_t("Rotate Left")}
+                            onClick={ this.onRotateCounterClockwiseClick }>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_zoomOut"
+                            title={_t("Zoom out")}
+                            onClick={ this.onZoomOutClick }>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_zoomIn"
+                            title={_t("Zoom in")}
+                            onClick={ this.onZoomInClick }>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_download"
+                            title={_t("Download")}
+                            onClick={ this.onDownloadClick }>
+                        </AccessibleTooltipButton>
+                        {contextMenuButton}
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_close"
+                            title={_t("Close")}
+                            onClick={ this.props.onFinished }>
+                        </AccessibleTooltipButton>
+                        {this.renderContextMenu()}
+                    </div>
+                </div>
+                <div className="mx_ImageView_image_wrapper">
+                    <img
+                        src={this.props.src}
+                        title={this.props.name}
+                        style={style}
+                        className="mx_ImageView_image"
+                        draggable={true}
+                        onMouseDown={this.onStartMoving}
+                        onMouseMove={this.onMoving}
+                        onMouseUp={this.onEndMoving}
+                        onMouseLeave={this.onEndMoving}
+                    />
+                </div>
+            </FocusLock>
+        );
+    }
+}

src/components/views/elements/InviteReason.tsx

@@ -0,0 +1,62 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classNames from "classnames";
+import React from "react";
+import { _t } from "../../../languageHandler";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+interface IProps {
+    reason: string;
+}
+
+interface IState {
+    hidden: boolean;
+}
+
+@replaceableComponent("views.elements.InviteReason")
+export default class InviteReason extends React.PureComponent<IProps, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            // We hide the reason for invitation by default, since it can be a
+            // vector for spam/harassment.
+            hidden: true,
+        };
+    }
+
+    onViewClick = () => {
+        this.setState({
+            hidden: false,
+        });
+    }
+
+    render() {
+        const classes = classNames({
+            "mx_InviteReason": true,
+            "mx_InviteReason_hidden": this.state.hidden,
+        });
+
+        return <div className={classes}>
+            <div className="mx_InviteReason_reason">{this.props.reason}</div>
+            <div className="mx_InviteReason_view"
+                onClick={this.onViewClick}
+            >
+                {_t("View message")}
+            </div>
+        </div>;
+    }
+}

src/components/views/elements/SSOButtons.tsx

@@ -73,7 +73,7 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
         brandClass = `mx_SSOButton_brand_${brandName}`;
         icon = <img src={brandIcon} height="24" width="24" alt={brandName} />;
     } else if (typeof idp?.icon === "string" && idp.icon.startsWith("mxc://")) {
-        const src = mediaFromMxc(idp.icon).getSquareThumbnailHttp(24);
+        const src = mediaFromMxc(idp.icon, matrixClient).getSquareThumbnailHttp(24);
         icon = <img src={src} height="24" width="24" alt={idp.name} />;
     }
 

src/components/views/messages/MImageBody.js

@@ -41,6 +41,9 @@ export default class MImageBody extends React.Component {
 
         /* the maximum image height to use */
         maxImageHeight: PropTypes.number,
+
+        /* the permalinkCreator */
+        permalinkCreator: PropTypes.object,
     };
 
     static contextType = MatrixClientContext;
@@ -106,6 +109,7 @@ export default class MImageBody extends React.Component {
                 src: httpUrl,
                 name: content.body && content.body.length > 0 ? content.body : _t('Attachment'),
                 mxEvent: this.props.mxEvent,
+                permalinkCreator: this.props.permalinkCreator,
             };
 
             if (content.info) {
@@ -114,7 +118,7 @@ export default class MImageBody extends React.Component {
                 params.fileSize = content.info.size;
             }
 
-            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
         }
     }
 

src/components/views/messages/MVideoBody.tsx

@@ -132,7 +132,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
                         // enable the play button. Firefox does not seem to care either
                         // way, so it's fine to do for all browsers.
                         decryptedUrl: `data:${content?.info?.mimetype},`,
-                        decryptedThumbnailUrl: thumbnailUrl,
+                        decryptedThumbnailUrl: thumbnailUrl || `data:${content?.info?.mimetype},`,
                         decryptedBlob: null,
                     });
                 }

src/components/views/messages/MessageEvent.js

@@ -46,6 +46,9 @@ export default class MessageEvent extends React.Component {
 
         /* the maximum image height to use, if the event is an image */
         maxImageHeight: PropTypes.number,
+
+        /* the permalinkCreator */
+        permalinkCreator: PropTypes.object,
     };
 
     constructor(props) {
@@ -126,6 +129,7 @@ export default class MessageEvent extends React.Component {
             editState={this.props.editState}
             onHeightChanged={this.props.onHeightChanged}
             onMessageAllowed={this.onTileUpdate}
+            permalinkCreator={this.props.permalinkCreator}
         />;
     }
 }

src/components/views/messages/MessageTimestamp.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {formatFullDate, formatTime} from '../../../DateUtils';
+import {formatFullDate, formatTime, formatFullTime} from '../../../DateUtils';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.messages.MessageTimestamp")
@@ -25,13 +25,24 @@ export default class MessageTimestamp extends React.Component {
     static propTypes = {
         ts: PropTypes.number.isRequired,
         showTwelveHour: PropTypes.bool,
+        showFullDate: PropTypes.bool,
+        showSeconds: PropTypes.bool,
     };
 
     render() {
         const date = new Date(this.props.ts);
+        let timestamp;
+        if (this.props.showFullDate) {
+            timestamp = formatFullDate(date, this.props.showTwelveHour, this.props.showSeconds);
+        } else if (this.props.showSeconds) {
+            timestamp = formatFullTime(date, this.props.showTwelveHour);
+        } else {
+            timestamp = formatTime(date, this.props.showTwelveHour);
+        }
+
         return (
             <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)} aria-hidden={true}>
-                { formatTime(date, this.props.showTwelveHour) }
+                {timestamp}
             </span>
         );
     }

src/components/views/messages/RoomAvatarEvent.js

@@ -49,7 +49,7 @@ export default class RoomAvatarEvent extends React.Component {
             src: httpUrl,
             name: text,
         };
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     render() {

src/components/views/right_panel/EncryptionInfo.tsx

@@ -52,7 +52,7 @@ const EncryptionInfo: React.FC<IProps> = ({
         let text: string;
         if (waitingForOtherParty) {
             if (isSelfVerification) {
-                text = _t("Waiting for you to accept on your other session…");
+                text = _t("Accept on your other login…");
             } else {
                 text = _t("Waiting for %(displayName)s to accept…", {
                     displayName: member.displayName || member.name || member.userId,

src/components/views/right_panel/UserInfo.tsx

@@ -24,6 +24,7 @@ import {RoomMember} from 'matrix-js-sdk/src/models/room-member';
 import {User} from 'matrix-js-sdk/src/models/user';
 import {Room} from 'matrix-js-sdk/src/models/room';
 import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 
 import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
@@ -496,11 +497,11 @@ const isMuted = (member: RoomMember, powerLevelContent: IPowerLevelsContent) =>
 export const useRoomPowerLevels = (cli: MatrixClient, room: Room) => {
     const [powerLevels, setPowerLevels] = useState<IPowerLevelsContent>({});
 
-    const update = useCallback(() => {
-        if (!room) {
-            return;
-        }
-        const event = room.currentState.getStateEvents("m.room.power_levels", "");
+    const update = useCallback((ev?: MatrixEvent) => {
+        if (!room) return;
+        if (ev && ev.getType() !== EventType.RoomPowerLevels) return;
+
+        const event = room.currentState.getStateEvents(EventType.RoomPowerLevels, "");
         if (event) {
             setPowerLevels(event.getContent());
         } else {
@@ -511,7 +512,7 @@ export const useRoomPowerLevels = (cli: MatrixClient, room: Room) => {
         };
     }, [room]);
 
-    useEventEmitter(cli, "RoomState.members", update);
+    useEventEmitter(cli, "RoomState.events", update);
     useEffect(() => {
         update();
         return () => {
@@ -1431,7 +1432,7 @@ const UserInfoHeader: React.FC<{
             name: member.name,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     }, [member]);
 
     const avatarElement = (
@@ -1494,7 +1495,7 @@ const UserInfoHeader: React.FC<{
         e2eIcon = <E2EIcon size={18} status={e2eStatus} isUser={true} />;
     }
 
-    const displayName = member.name || member.displayname;
+    const displayName = member.rawDisplayName || member.displayname;
     return <React.Fragment>
         { avatarElement }
 

src/components/views/rooms/AuxPanel.tsx

@@ -149,8 +149,8 @@ export default class AuxPanel extends React.Component<IProps, IState> {
         const callView = (
             <CallViewForRoom
                 roomId={this.props.room.roomId}
-                onResize={this.props.onResize}
                 maxVideoHeight={this.props.maxHeight}
+                resizeNotifier={this.props.resizeNotifier}
             />
         );
 

src/components/views/rooms/BasicMessageComposer.tsx

@@ -46,6 +46,7 @@ import {IDiff} from "../../../editor/diff";
 import AutocompleteWrapperModel from "../../../editor/autocomplete";
 import DocumentPosition from "../../../editor/position";
 import {ICompletion} from "../../../autocomplete/Autocompleter";
+import { AutocompleteAction, getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindingsManager';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 // matches emoticons which follow the start of a line or whitespace
@@ -422,105 +423,101 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
     private onKeyDown = (event: React.KeyboardEvent) => {
         const model = this.props.model;
-        const modKey = IS_MAC ? event.metaKey : event.ctrlKey;
         let handled = false;
-        // format bold
-        if (modKey && event.key === Key.B) {
-            this.onFormatAction(Formatting.Bold);
-            handled = true;
-        // format italics
-        } else if (modKey && event.key === Key.I) {
-            this.onFormatAction(Formatting.Italics);
-            handled = true;
-        // format quote
-        } else if (modKey && event.key === Key.GREATER_THAN) {
-            this.onFormatAction(Formatting.Quote);
-            handled = true;
-        // redo
-        } else if ((!IS_MAC && modKey && event.key === Key.Y) ||
-                  (IS_MAC && modKey && event.shiftKey && event.key === Key.Z)) {
-            if (this.historyManager.canRedo()) {
-                const {parts, caret} = this.historyManager.redo();
-                // pass matching inputType so historyManager doesn't push echo
-                // when invoked from rerender callback.
-                model.reset(parts, caret, "historyRedo");
-            }
-            handled = true;
-        // undo
-        } else if (modKey && event.key === Key.Z) {
-            if (this.historyManager.canUndo()) {
-                const {parts, caret} = this.historyManager.undo(this.props.model);
-                // pass matching inputType so historyManager doesn't push echo
-                // when invoked from rerender callback.
-                model.reset(parts, caret, "historyUndo");
-            }
-            handled = true;
-        // insert newline on Shift+Enter
-        } else if (event.key === Key.ENTER && (event.shiftKey || (IS_MAC && event.altKey))) {
-            this.insertText("\n");
-            handled = true;
-        // move selection to start of composer
-        } else if (modKey && event.key === Key.HOME && !event.shiftKey) {
-            setSelection(this.editorRef.current, model, {
-                index: 0,
-                offset: 0,
-            });
-            handled = true;
-        // move selection to end of composer
-        } else if (modKey && event.key === Key.END && !event.shiftKey) {
-            setSelection(this.editorRef.current, model, {
-                index: model.parts.length - 1,
-                offset: model.parts[model.parts.length - 1].text.length,
-            });
-            handled = true;
-        // autocomplete or enter to send below shouldn't have any modifier keys pressed.
-        } else {
-            const metaOrAltPressed = event.metaKey || event.altKey;
-            const modifierPressed = metaOrAltPressed || event.shiftKey;
-            if (model.autoComplete && model.autoComplete.hasCompletions()) {
-                const autoComplete = model.autoComplete;
-                switch (event.key) {
-                    case Key.ARROW_UP:
-                        if (!modifierPressed) {
-                            autoComplete.onUpArrow(event);
-                            handled = true;
-                        }
-                        break;
-                    case Key.ARROW_DOWN:
-                        if (!modifierPressed) {
-                            autoComplete.onDownArrow(event);
-                            handled = true;
-                        }
-                        break;
-                    case Key.TAB:
-                        if (!metaOrAltPressed) {
-                            autoComplete.onTab(event);
-                            handled = true;
-                        }
-                        break;
-                    case Key.ESCAPE:
-                        if (!modifierPressed) {
-                            autoComplete.onEscape(event);
-                            handled = true;
-                        }
-                        break;
-                    default:
-                        return; // don't preventDefault on anything else
-                }
-            } else if (event.key === Key.TAB) {
-                this.tabCompleteName(event);
+        const action = getKeyBindingsManager().getMessageComposerAction(event);
+        switch (action) {
+            case MessageComposerAction.FormatBold:
+                this.onFormatAction(Formatting.Bold);
                 handled = true;
-            } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
-                this.formatBarRef.current.hide();
-            }
+                break;
+            case MessageComposerAction.FormatItalics:
+                this.onFormatAction(Formatting.Italics);
+                handled = true;
+                break;
+            case MessageComposerAction.FormatQuote:
+                this.onFormatAction(Formatting.Quote);
+                handled = true;
+                break;
+            case MessageComposerAction.EditRedo:
+                if (this.historyManager.canRedo()) {
+                    const {parts, caret} = this.historyManager.redo();
+                    // pass matching inputType so historyManager doesn't push echo
+                    // when invoked from rerender callback.
+                    model.reset(parts, caret, "historyRedo");
+                }
+                handled = true;
+                break;
+            case MessageComposerAction.EditUndo:
+                if (this.historyManager.canUndo()) {
+                    const {parts, caret} = this.historyManager.undo(this.props.model);
+                    // pass matching inputType so historyManager doesn't push echo
+                    // when invoked from rerender callback.
+                    model.reset(parts, caret, "historyUndo");
+                }
+                handled = true;
+                break;
+            case MessageComposerAction.NewLine:
+                this.insertText("\n");
+                handled = true;
+                break;
+            case MessageComposerAction.MoveCursorToStart:
+                setSelection(this.editorRef.current, model, {
+                    index: 0,
+                    offset: 0,
+                });
+                handled = true;
+                break;
+            case MessageComposerAction.MoveCursorToEnd:
+                setSelection(this.editorRef.current, model, {
+                    index: model.parts.length - 1,
+                    offset: model.parts[model.parts.length - 1].text.length,
+                });
+                handled = true;
+                break;
         }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+
+        const autocompleteAction = getKeyBindingsManager().getAutocompleteAction(event);
+        if (model.autoComplete && model.autoComplete.hasCompletions()) {
+            const autoComplete = model.autoComplete;
+            switch (autocompleteAction) {
+                case AutocompleteAction.CompleteOrPrevSelection:
+                case AutocompleteAction.PrevSelection:
+                    autoComplete.selectPreviousSelection();
+                    handled = true;
+                    break;
+                case AutocompleteAction.CompleteOrNextSelection:
+                case AutocompleteAction.NextSelection:
+                    autoComplete.selectNextSelection();
+                    handled = true;
+                    break;
+                case AutocompleteAction.Cancel:
+                    autoComplete.onEscape(event);
+                    handled = true;
+                    break;
+                default:
+                    return; // don't preventDefault on anything else
+            }
+        } else if (autocompleteAction === AutocompleteAction.CompleteOrPrevSelection
+            || autocompleteAction === AutocompleteAction.CompleteOrNextSelection) {
+            // there is no current autocomplete window, try to open it
+            this.tabCompleteName();
+            handled = true;
+        } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
+            this.formatBarRef.current.hide();
+        }
+
         if (handled) {
             event.preventDefault();
             event.stopPropagation();
         }
     };
 
-    private async tabCompleteName(event: React.KeyboardEvent) {
+    private async tabCompleteName() {
         try {
             await new Promise<void>(resolve => this.setState({showVisualBell: false}, resolve));
             const {model} = this.props;
@@ -543,7 +540,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
             // Don't try to do things with the autocomplete if there is none shown
             if (model.autoComplete) {
-                await model.autoComplete.onTab(event);
+                await model.autoComplete.startSelection();
                 if (!model.autoComplete.hasSelection()) {
                     this.setState({showVisualBell: true});
                     model.autoComplete.close();

src/components/views/rooms/EditMessageComposer.js

@@ -29,11 +29,10 @@ import EditorStateTransfer from '../../../utils/EditorStateTransfer';
 import classNames from 'classnames';
 import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import BasicMessageComposer from "./BasicMessageComposer";
-import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {Action} from "../../../dispatcher/actions";
-import SettingsStore from "../../../settings/SettingsStore";
 import CountlyAnalytics from "../../../CountlyAnalytics";
+import {getKeyBindingsManager, MessageComposerAction} from '../../../KeyBindingsManager';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 function _isReply(mxEvent) {
@@ -136,38 +135,41 @@ export default class EditMessageComposer extends React.Component {
         if (this._editorRef.isComposing(event)) {
             return;
         }
-        if (event.metaKey || event.altKey || event.shiftKey) {
-            return;
-        }
-        const ctrlEnterToSend = !!SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend');
-        const send = ctrlEnterToSend ? event.key === Key.ENTER && isOnlyCtrlOrCmdKeyEvent(event)
-            : event.key === Key.ENTER;
-        if (send) {
-            this._sendEdit();
-            event.preventDefault();
-        } else if (event.key === Key.ESCAPE) {
-            this._cancelEdit();
-        } else if (event.key === Key.ARROW_UP) {
-            if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) {
-                return;
-            }
-            const previousEvent = findEditableEvent(this._getRoom(), false, this.props.editState.getEvent().getId());
-            if (previousEvent) {
-                dis.dispatch({action: 'edit_event', event: previousEvent});
+        const action = getKeyBindingsManager().getMessageComposerAction(event);
+        switch (action) {
+            case MessageComposerAction.Send:
+                this._sendEdit();
                 event.preventDefault();
+                break;
+            case MessageComposerAction.CancelEditing:
+                this._cancelEdit();
+                break;
+            case MessageComposerAction.EditPrevMessage: {
+                if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) {
+                    return;
+                }
+                const previousEvent = findEditableEvent(this._getRoom(), false,
+                    this.props.editState.getEvent().getId());
+                if (previousEvent) {
+                    dis.dispatch({action: 'edit_event', event: previousEvent});
+                    event.preventDefault();
+                }
+                break;
             }
-        } else if (event.key === Key.ARROW_DOWN) {
-            if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) {
-                return;
+            case MessageComposerAction.EditNextMessage: {
+                if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) {
+                    return;
+                }
+                const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
+                if (nextEvent) {
+                    dis.dispatch({action: 'edit_event', event: nextEvent});
+                } else {
+                    dis.dispatch({action: 'edit_event', event: null});
+                    dis.fire(Action.FocusComposer);
+                }
+                event.preventDefault();
+                break;
             }
-            const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
-            if (nextEvent) {
-                dis.dispatch({action: 'edit_event', event: nextEvent});
-            } else {
-                dis.dispatch({action: 'edit_event', event: null});
-                dis.fire(Action.FocusComposer);
-            }
-            event.preventDefault();
         }
     }
 

src/components/views/rooms/EventTile.js

@@ -1,8 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+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.
@@ -17,18 +15,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import ReplyThread from "../elements/ReplyThread";
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import classNames from "classnames";
 import {EventType} from "matrix-js-sdk/src/@types/event";
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
+
+import ReplyThread from "../elements/ReplyThread";
 import { _t } from '../../../languageHandler';
 import * as TextForEvent from "../../../TextForEvent";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import {Layout, LayoutPropType} from "../../../settings/Layout";
-import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import {formatTime} from "../../../DateUtils";
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
@@ -43,39 +42,56 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 import Tooltip from "../elements/Tooltip";
 
 const eventTileTypes = {
-    'm.room.message': 'messages.MessageEvent',
-    'm.sticker': 'messages.MessageEvent',
-    'm.key.verification.cancel': 'messages.MKeyVerificationConclusion',
-    'm.key.verification.done': 'messages.MKeyVerificationConclusion',
-    'm.room.encryption': 'messages.EncryptionEvent',
-    'm.call.invite': 'messages.TextualEvent',
-    'm.call.answer': 'messages.TextualEvent',
-    'm.call.hangup': 'messages.TextualEvent',
-    'm.call.reject': 'messages.TextualEvent',
+    [EventType.RoomMessage]: 'messages.MessageEvent',
+    [EventType.Sticker]: 'messages.MessageEvent',
+    [EventType.KeyVerificationCancel]: 'messages.MKeyVerificationConclusion',
+    [EventType.KeyVerificationDone]: 'messages.MKeyVerificationConclusion',
+    [EventType.CallInvite]: 'messages.TextualEvent',
+    [EventType.CallAnswer]: 'messages.TextualEvent',
+    [EventType.CallHangup]: 'messages.TextualEvent',
+    [EventType.CallReject]: 'messages.TextualEvent',
 };
 
 const stateEventTileTypes = {
-    'm.room.encryption': 'messages.EncryptionEvent',
-    'm.room.canonical_alias': 'messages.TextualEvent',
-    'm.room.create': 'messages.RoomCreate',
-    'm.room.member': 'messages.TextualEvent',
-    'm.room.name': 'messages.TextualEvent',
-    'm.room.avatar': 'messages.RoomAvatarEvent',
-    'm.room.third_party_invite': 'messages.TextualEvent',
-    'm.room.history_visibility': 'messages.TextualEvent',
-    'm.room.topic': 'messages.TextualEvent',
-    'm.room.power_levels': 'messages.TextualEvent',
-    'm.room.pinned_events': 'messages.TextualEvent',
-    'm.room.server_acl': 'messages.TextualEvent',
+    [EventType.RoomEncryption]: 'messages.EncryptionEvent',
+    [EventType.RoomCanonicalAlias]: 'messages.TextualEvent',
+    [EventType.RoomCreate]: 'messages.RoomCreate',
+    [EventType.RoomMember]: 'messages.TextualEvent',
+    [EventType.RoomName]: 'messages.TextualEvent',
+    [EventType.RoomAvatar]: 'messages.RoomAvatarEvent',
+    [EventType.RoomThirdPartyInvite]: 'messages.TextualEvent',
+    [EventType.RoomHistoryVisibility]: 'messages.TextualEvent',
+    [EventType.RoomTopic]: 'messages.TextualEvent',
+    [EventType.RoomPowerLevels]: 'messages.TextualEvent',
+    [EventType.RoomPinnedEvents]: 'messages.TextualEvent',
+    [EventType.RoomServerAcl]: 'messages.TextualEvent',
     // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
     'im.vector.modular.widgets': 'messages.TextualEvent',
     [WIDGET_LAYOUT_EVENT_TYPE]: 'messages.TextualEvent',
-    'm.room.tombstone': 'messages.TextualEvent',
-    'm.room.join_rules': 'messages.TextualEvent',
-    'm.room.guest_access': 'messages.TextualEvent',
-    'm.room.related_groups': 'messages.TextualEvent',
+    [EventType.RoomTombstone]: 'messages.TextualEvent',
+    [EventType.RoomJoinRules]: 'messages.TextualEvent',
+    [EventType.RoomGuestAccess]: 'messages.TextualEvent',
+    'm.room.related_groups': 'messages.TextualEvent', // legacy communities flair
 };
 
+const stateEventSingular = new Set([
+    EventType.RoomEncryption,
+    EventType.RoomCanonicalAlias,
+    EventType.RoomCreate,
+    EventType.RoomName,
+    EventType.RoomAvatar,
+    EventType.RoomHistoryVisibility,
+    EventType.RoomTopic,
+    EventType.RoomPowerLevels,
+    EventType.RoomPinnedEvents,
+    EventType.RoomServerAcl,
+    WIDGET_LAYOUT_EVENT_TYPE,
+    EventType.RoomTombstone,
+    EventType.RoomJoinRules,
+    EventType.RoomGuestAccess,
+    'm.room.related_groups',
+]);
+
 // Add all the Mjolnir stuff to the renderer
 for (const evType of ALL_RULE_TYPES) {
     stateEventTileTypes[evType] = 'messages.TextualEvent';
@@ -132,7 +148,12 @@ export function getHandlerTile(ev) {
         }
     }
 
-    return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
+    if (ev.isState()) {
+        if (stateEventSingular.has(type) && ev.getStateKey() !== "") return undefined;
+        return stateEventTileTypes[type];
+    }
+
+    return eventTileTypes[type];
 }
 
 const MAX_READ_AVATARS = 5;
@@ -239,6 +260,9 @@ export default class EventTile extends React.Component {
 
         // whether or not to show flair at all
         enableFlair: PropTypes.bool,
+
+        // whether or not to show read receipts
+        showReadReceipts: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -837,8 +861,6 @@ export default class EventTile extends React.Component {
             permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
         }
 
-        const readAvatars = this.getReadAvatars();
-
         let avatar;
         let sender;
         let avatarSize;
@@ -936,7 +958,7 @@ export default class EventTile extends React.Component {
             );
 
         const TooltipButton = sdk.getComponent('elements.TooltipButton');
-        const keyRequestInfo = isEncryptionFailure ?
+        const keyRequestInfo = isEncryptionFailure && !isRedacted ?
             <div className="mx_EventTile_keyRequestInfo">
                 <span className="mx_EventTile_keyRequestInfo_text">
                     { keyRequestInfoContent }
@@ -967,6 +989,16 @@ export default class EventTile extends React.Component {
         const groupPadlock = !useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
         const ircPadlock = useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
 
+        let msgOption;
+        if (this.props.showReadReceipts) {
+            const readAvatars = this.getReadAvatars();
+            msgOption = (
+                <div className="mx_EventTile_msgOption">
+                    { readAvatars }
+                </div>
+            );
+        }
+
         switch (this.props.tileShape) {
             case 'notif': {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
@@ -1080,14 +1112,13 @@ export default class EventTile extends React.Component {
                                            highlights={this.props.highlights}
                                            highlightLink={this.props.highlightLink}
                                            showUrlPreview={this.props.showUrlPreview}
+                                           permalinkCreator={this.props.permalinkCreator}
                                            onHeightChanged={this.props.onHeightChanged} />
                             { keyRequestInfo }
                             { reactionsRow }
                             { actionBar }
                         </div>
-                        <div className="mx_EventTile_msgOption">
-                            { readAvatars }
-                        </div>
+                        {msgOption}
                         {
                             // The avatar goes after the event tile as it's absolutely positioned to be over the
                             // event tile line, so needs to be later in the DOM so it appears on top (this avoids

src/components/views/rooms/LinkPreviewWidget.js

@@ -96,7 +96,7 @@ export default class LinkPreviewWidget extends React.Component {
             link: this.props.link,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     render() {

src/components/views/rooms/NewRoomIntro.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.
@@ -29,6 +29,7 @@ import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload";
 import {Action} from "../../../dispatcher/actions";
 import dis from "../../../dispatcher/dispatcher";
 import SpaceStore from "../../../stores/SpaceStore";
+import {showSpaceInvite} from "../../../utils/space";
 
 const NewRoomIntro = () => {
     const cli = useContext(MatrixClientContext);
@@ -116,7 +117,7 @@ const NewRoomIntro = () => {
                     className="mx_NewRoomIntro_inviteButton"
                     kind="primary"
                     onClick={() => {
-                        dis.dispatch({ action: "view_invite", roomId });
+                        showSpaceInvite(parentSpace);
                     }}
                 >
                     {_t("Invite to %(spaceName)s", { spaceName: parentSpace.name })}

src/components/views/rooms/ReadReceiptMarker.js

@@ -17,22 +17,13 @@ limitations under the License.
 
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
-import '../../../VelocityBounce';
 import { _t } from '../../../languageHandler';
 import {formatDate} from '../../../DateUtils';
-import Velociraptor from "../../../Velociraptor";
+import NodeAnimator from "../../../NodeAnimator";
 import * as sdk from "../../../index";
 import {toPx} from "../../../utils/units";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-let bounce = false;
-try {
-    if (global.localStorage) {
-        bounce = global.localStorage.getItem('avatar_bounce') == 'true';
-    }
-} catch (e) {
-}
-
 @replaceableComponent("views.rooms.ReadReceiptMarker")
 export default class ReadReceiptMarker extends React.PureComponent {
     static propTypes = {
@@ -115,7 +106,18 @@ export default class ReadReceiptMarker extends React.PureComponent {
             // we've already done our display - nothing more to do.
             return;
         }
+        this._animateMarker();
+    }
 
+    componentDidUpdate(prevProps) {
+        const differentLeftOffset = prevProps.leftOffset !== this.props.leftOffset;
+        const visibilityChanged = prevProps.hidden !== this.props.hidden;
+        if (differentLeftOffset || visibilityChanged) {
+            this._animateMarker();
+        }
+    }
+
+    _animateMarker() {
         // treat new RRs as though they were off the top of the screen
         let oldTop = -15;
 
@@ -139,42 +141,18 @@ export default class ReadReceiptMarker extends React.PureComponent {
         }
 
         const startStyles = [];
-        const enterTransitionOpts = [];
 
         if (oldInfo && oldInfo.left) {
             // start at the old height and in the old h pos
-
             startStyles.push({ top: startTopOffset+"px",
                                left: toPx(oldInfo.left) });
-
-            const reorderTransitionOpts = {
-                duration: 100,
-                easing: 'easeOut',
-            };
-
-            enterTransitionOpts.push(reorderTransitionOpts);
         }
 
-        // then shift to the rightmost column,
-        // and then it will drop down to its resting position
-        //
-        // XXX: We use a small left value to trick velocity-animate into actually animating.
-        // This is a very annoying bug where if it thinks there's no change to `left` then it'll
-        // skip applying it, thus making our read receipt at +14px instead of +0px like it
-        // should be. This does cause a tiny amount of drift for read receipts, however with a
-        // value so small it's not perceived by a user.
-        // Note: Any smaller values (or trying to interchange units) might cause read receipts to
-        // fail to fall down or cause gaps.
-        startStyles.push({ top: startTopOffset+'px', left: '1px' });
-        enterTransitionOpts.push({
-            duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300,
-            easing: bounce ? 'easeOutBounce' : 'easeOutCubic',
-        });
+        startStyles.push({ top: startTopOffset+'px', left: '0' });
 
         this.setState({
             suppressDisplay: false,
             startStyles: startStyles,
-            enterTransitionOpts: enterTransitionOpts,
         });
     }
 
@@ -187,7 +165,6 @@ export default class ReadReceiptMarker extends React.PureComponent {
         const style = {
             left: toPx(this.props.leftOffset),
             top: '0px',
-            visibility: this.props.hidden ? 'hidden' : 'visible',
         };
 
         let title;
@@ -210,9 +187,8 @@ export default class ReadReceiptMarker extends React.PureComponent {
         }
 
         return (
-            <Velociraptor
-                    startStyles={this.state.startStyles}
-                    enterTransitionOpts={this.state.enterTransitionOpts} >
+            <NodeAnimator
+                    startStyles={this.state.startStyles} >
                 <MemberAvatar
                     member={this.props.member}
                     fallbackUserId={this.props.fallbackUserId}
@@ -223,7 +199,7 @@ export default class ReadReceiptMarker extends React.PureComponent {
                     onClick={this.props.onClick}
                     inputRef={this._avatar}
                 />
-            </Velociraptor>
+            </NodeAnimator>
         );
     }
 }

src/components/views/rooms/RoomList.tsx

@@ -50,14 +50,10 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import CallHandler from "../../../CallHandler";
 import SpaceStore, {SUGGESTED_ROOMS} from "../../../stores/SpaceStore";
-import { showAddExistingRooms, showCreateNewRoom } from "../../../utils/space";
+import {showAddExistingRooms, showCreateNewRoom, showSpaceInvite} from "../../../utils/space";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import RoomAvatar from "../avatars/RoomAvatar";
 import { ISpaceSummaryRoom } from "../../structures/SpaceRoomDirectory";
-import { showRoomInviteDialog } from "../../../RoomInvite";
-import Modal from "../../../Modal";
-import SpacePublicShare from "../spaces/SpacePublicShare";
-import InfoDialog from "../dialogs/InfoDialog";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -431,21 +427,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
     private onSpaceInviteClick = () => {
         const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
-        if (this.props.activeSpace.getJoinRule() === "public") {
-            const modal = Modal.createTrackedDialog("Space Invite", "User Menu", InfoDialog, {
-                title: _t("Invite to %(spaceName)s", { spaceName: this.props.activeSpace.name }),
-                description: <React.Fragment>
-                    <span>{ _t("Share your public space") }</span>
-                    <SpacePublicShare space={this.props.activeSpace} onFinished={() => modal.close()} />
-                </React.Fragment>,
-                fixedWidth: false,
-                button: false,
-                className: "mx_SpacePanel_sharePublicSpace",
-                hasCloseButton: true,
-            });
-        } else {
-            showRoomInviteDialog(this.props.activeSpace.roomId, initialText);
-        }
+        showSpaceInvite(this.props.activeSpace, initialText);
     };
 
     private renderSuggestedRooms(): ReactComponentElement<typeof ExtraTile>[] {

src/components/views/rooms/RoomPreviewBar.js

@@ -1,7 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2019, 2020 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.
@@ -27,7 +25,8 @@ import SdkConfig from "../../../SdkConfig";
 import IdentityAuthClient from '../../../IdentityAuthClient';
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import InviteReason from "../elements/InviteReason";
 
 const MessageCase = Object.freeze({
     NotLoggedIn: "NotLoggedIn",
@@ -306,6 +305,7 @@ export default class RoomPreviewBar extends React.Component {
         let showSpinner = false;
         let title;
         let subTitle;
+        let reasonElement;
         let primaryActionHandler;
         let primaryActionLabel;
         let secondaryActionHandler;
@@ -491,6 +491,12 @@ export default class RoomPreviewBar extends React.Component {
                     primaryActionLabel = _t("Accept");
                 }
 
+                const myUserId = MatrixClientPeg.get().getUserId();
+                const reason = this.props.room.currentState.getMember(myUserId).events.member.event.content.reason;
+                if (reason) {
+                    reasonElement = <InviteReason reason={reason} />;
+                }
+
                 primaryActionHandler = this.props.onJoinClick;
                 secondaryActionLabel = _t("Reject");
                 secondaryActionHandler = this.props.onRejectClick;
@@ -582,6 +588,7 @@ export default class RoomPreviewBar extends React.Component {
                     { titleElement }
                     { subTitleElements }
                 </div>
+                { reasonElement }
                 <div className="mx_RoomPreviewBar_actions">
                     { secondaryButton }
                     { extraComponents }

src/components/views/rooms/RoomSublist.tsx

@@ -51,6 +51,7 @@ import { objectExcluding, objectHasDiff } from "../../../utils/objects";
 import ExtraTile from "./ExtraTile";
 import { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
 import IconizedContextMenu from "../context_menus/IconizedContextMenu";
+import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const SHOW_N_BUTTON_HEIGHT = 28; // As defined by CSS
@@ -470,18 +471,19 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     };
 
     private onHeaderKeyDown = (ev: React.KeyboardEvent) => {
-        switch (ev.key) {
-            case Key.ARROW_LEFT:
+        const action = getKeyBindingsManager().getRoomListAction(ev);
+        switch (action) {
+            case RoomListAction.CollapseSection:
                 ev.stopPropagation();
                 if (this.state.isExpanded) {
-                    // On ARROW_LEFT collapse the room sublist if it isn't already
+                    // Collapse the room sublist if it isn't already
                     this.toggleCollapsed();
                 }
                 break;
-            case Key.ARROW_RIGHT: {
+            case RoomListAction.ExpandSection: {
                 ev.stopPropagation();
                 if (!this.state.isExpanded) {
-                    // On ARROW_RIGHT expand the room sublist if it isn't already
+                    // Expand the room sublist if it isn't already
                     this.toggleCollapsed();
                 } else if (this.sublistRef.current) {
                     // otherwise focus the first room

src/components/views/rooms/RoomTile.tsx

@@ -563,7 +563,11 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         let messagePreview = null;
         if (this.showMessagePreview && this.state.messagePreview) {
             messagePreview = (
-                <div className="mx_RoomTile_messagePreview" id={messagePreviewId(this.props.room.roomId)}>
+                <div
+                    className="mx_RoomTile_messagePreview"
+                    id={messagePreviewId(this.props.room.roomId)}
+                    title={this.state.messagePreview}
+                >
                     {this.state.messagePreview}
                 </div>
             );

src/components/views/rooms/SendMessageComposer.js

@@ -38,17 +38,17 @@ import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import {_t, _td} from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
-import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import {Action} from "../../../dispatcher/actions";
 import {containsEmoji} from "../../../effects/utils";
 import {CHAT_EFFECTS} from '../../../effects';
-import SettingsStore from "../../../settings/SettingsStore";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import EMOJI_REGEX from 'emojibase-regex';
+import {getKeyBindingsManager, MessageComposerAction} from '../../../KeyBindingsManager';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SettingsStore from '../../../settings/SettingsStore';
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -148,60 +148,50 @@ export default class SendMessageComposer extends React.Component {
         if (this._editorRef.isComposing(event)) {
             return;
         }
-        const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
-        const ctrlEnterToSend = !!SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend');
-        const send = ctrlEnterToSend
-            ? event.key === Key.ENTER && isOnlyCtrlOrCmdKeyEvent(event)
-            : event.key === Key.ENTER && !hasModifier;
-        if (send) {
-            this._sendMessage();
-            event.preventDefault();
-        } else if (event.key === Key.ARROW_UP) {
-            this.onVerticalArrow(event, true);
-        } else if (event.key === Key.ARROW_DOWN) {
-            this.onVerticalArrow(event, false);
-        } else if (event.key === Key.ESCAPE) {
-            dis.dispatch({
-                action: 'reply_to_event',
-                event: null,
-            });
-        } else if (this._prepareToEncrypt) {
-            // This needs to be last!
-            this._prepareToEncrypt();
+        const action = getKeyBindingsManager().getMessageComposerAction(event);
+        switch (action) {
+            case MessageComposerAction.Send:
+                this._sendMessage();
+                event.preventDefault();
+                break;
+            case MessageComposerAction.SelectPrevSendHistory:
+            case MessageComposerAction.SelectNextSendHistory: {
+                // Try select composer history
+                const selected = this.selectSendHistory(action === MessageComposerAction.SelectPrevSendHistory);
+                if (selected) {
+                    // We're selecting history, so prevent the key event from doing anything else
+                    event.preventDefault();
+                }
+                break;
+            }
+            case MessageComposerAction.EditPrevMessage:
+                // selection must be collapsed and caret at start
+                if (this._editorRef.isSelectionCollapsed() && this._editorRef.isCaretAtStart()) {
+                    const editEvent = findEditableEvent(this.props.room, false);
+                    if (editEvent) {
+                        // We're selecting history, so prevent the key event from doing anything else
+                        event.preventDefault();
+                        dis.dispatch({
+                            action: 'edit_event',
+                            event: editEvent,
+                        });
+                    }
+                }
+                break;
+            case MessageComposerAction.CancelEditing:
+                dis.dispatch({
+                    action: 'reply_to_event',
+                    event: null,
+                });
+                break;
+            default:
+                if (this._prepareToEncrypt) {
+                    // This needs to be last!
+                    this._prepareToEncrypt();
+                }
         }
     };
 
-    onVerticalArrow(e, up) {
-        // arrows from an initial-caret composer navigates recent messages to edit
-        // ctrl-alt-arrows navigate send history
-        if (e.shiftKey || e.metaKey) return;
-
-        const shouldSelectHistory = e.altKey && e.ctrlKey;
-        const shouldEditLastMessage = !e.altKey && !e.ctrlKey && up && !this.props.replyToEvent;
-
-        if (shouldSelectHistory) {
-            // Try select composer history
-            const selected = this.selectSendHistory(up);
-            if (selected) {
-                // We're selecting history, so prevent the key event from doing anything else
-                e.preventDefault();
-            }
-        } else if (shouldEditLastMessage) {
-            // selection must be collapsed and caret at start
-            if (this._editorRef.isSelectionCollapsed() && this._editorRef.isCaretAtStart()) {
-                const editEvent = findEditableEvent(this.props.room, false);
-                if (editEvent) {
-                    // We're selecting history, so prevent the key event from doing anything else
-                    e.preventDefault();
-                    dis.dispatch({
-                        action: 'edit_event',
-                        event: editEvent,
-                    });
-                }
-            }
-        }
-    }
-
     // we keep sent messages/commands in a separate history (separate from undo history)
     // so you can alt+up/down in them
     selectSendHistory(up) {
@@ -266,7 +256,7 @@ export default class SendMessageComposer extends React.Component {
                     const myReactionKeys = [...myReactionEvents]
                         .filter(event => !event.isRedacted())
                         .map(event => event.getRelation().key);
-                        shouldReact = !myReactionKeys.includes(reaction);
+                    shouldReact = !myReactionKeys.includes(reaction);
                 }
                 if (shouldReact) {
                     MatrixClientPeg.get().sendEvent(lastMessage.getRoomId(), "m.reaction", {
@@ -526,7 +516,7 @@ export default class SendMessageComposer extends React.Component {
     _insertQuotedMessage(event) {
         const {model} = this;
         const {partCreator} = model;
-        const quoteParts = parseEvent(event, partCreator, { isQuotedMessage: true });
+        const quoteParts = parseEvent(event, partCreator, {isQuotedMessage: true});
         // add two newlines
         quoteParts.push(partCreator.newline());
         quoteParts.push(partCreator.newline());

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -21,6 +21,9 @@ import {VoiceRecorder} from "../../../voice/VoiceRecorder";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import classNames from "classnames";
+import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
 
 interface IProps {
     room: Room;
@@ -31,6 +34,10 @@ interface IState {
     recorder?: VoiceRecorder;
 }
 
+/**
+ * Container tile for rendering the voice message recorder in the composer.
+ */
+@replaceableComponent("views.rooms.VoiceRecordComposerTile")
 export default class VoiceRecordComposerTile extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);
@@ -57,13 +64,18 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         const recorder = new VoiceRecorder(MatrixClientPeg.get());
         await recorder.start();
         this.props.onRecording(true);
-        // TODO: @@ TravisR: Run through EQ component
-        // recorder.frequencyData.onUpdate((freq) => {
-        //     console.log('@@ UPDATE', freq);
-        // });
         this.setState({recorder});
     };
 
+    private renderWaveformArea() {
+        if (!this.state.recorder) return null;
+
+        return <div className='mx_VoiceRecordComposerTile_waveformContainer'>
+            <LiveRecordingClock recorder={this.state.recorder} />
+            <LiveRecordingWaveform recorder={this.state.recorder} />
+        </div>;
+    }
+
     public render() {
         const classes = classNames({
             'mx_MessageComposer_button': !this.state.recorder,
@@ -77,12 +89,13 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             tooltip = _t("Stop & send recording");
         }
 
-        return (
+        return (<>
+            {this.renderWaveformArea()}
             <AccessibleTooltipButton
                 className={classes}
                 onClick={this.onStartStopVoiceMessage}
                 title={tooltip}
             />
-        );
+        </>);
     }
 }

src/components/views/settings/ChangePassword.js

@@ -28,13 +28,12 @@ import Modal from "../../../Modal";
 import PassphraseField from "../auth/PassphraseField";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { PASSWORD_MIN_SCORE } from '../auth/RegistrationForm';
 
 const FIELD_OLD_PASSWORD = 'field_old_password';
 const FIELD_NEW_PASSWORD = 'field_new_password';
 const FIELD_NEW_PASSWORD_CONFIRM = 'field_new_password_confirm';
 
-const PASSWORD_MIN_SCORE = 3; // safely unguessable: moderate protection from offline slow-hash scenario.
-
 @replaceableComponent("views.settings.ChangePassword")
 export default class ChangePassword extends React.Component {
     static propTypes = {

src/components/views/settings/EventIndexPanel.js

@@ -26,6 +26,7 @@ import {formatBytes, formatCountLong} from "../../../utils/FormattingUtils";
 import EventIndexPeg from "../../../indexing/EventIndexPeg";
 import {SettingLevel} from "../../../settings/SettingLevel";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SeshatResetDialog from '../dialogs/SeshatResetDialog';
 
 @replaceableComponent("views.settings.EventIndexPanel")
 export default class EventIndexPanel extends React.Component {
@@ -122,6 +123,20 @@ export default class EventIndexPanel extends React.Component {
         await this.updateState();
     }
 
+    _confirmEventStoreReset = () => {
+        const self = this;
+        const { close } = Modal.createDialog(SeshatResetDialog, {
+            onFinished: async (success) => {
+                if (success) {
+                    await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, false);
+                    await EventIndexPeg.deleteEventIndex();
+                    await self._onEnable();
+                    close();
+                }
+            },
+        });
+    }
+
     render() {
         let eventIndexingSettings = null;
         const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
@@ -167,7 +182,7 @@ export default class EventIndexPanel extends React.Component {
             );
         } else if (EventIndexPeg.platformHasSupport() && !EventIndexPeg.supportIsInstalled()) {
             const nativeLink = (
-                "https://github.com/vector-im/element-web/blob/develop/" +
+                "https://github.com/vector-im/element-desktop/blob/develop/" +
                 "docs/native-node-modules.md#" +
                 "adding-seshat-for-search-in-e2e-encrypted-rooms"
             );
@@ -212,7 +227,10 @@ export default class EventIndexPanel extends React.Component {
             eventIndexingSettings = (
                 <div className='mx_SettingsTab_subsectionText'>
                     <p>
-                        {_t("Message search initilisation failed")}
+                        {this.state.enabling
+                            ? <InlineSpinner />
+                            : _t("Message search initilisation failed")
+                        }
                     </p>
                     {EventIndexPeg.error && (
                     <details>
@@ -220,6 +238,11 @@ export default class EventIndexPanel extends React.Component {
                         <code>
                             {EventIndexPeg.error.message}
                         </code>
+                        <p>
+                            <AccessibleButton key="delete" kind="danger" onClick={this._confirmEventStoreReset}>
+                                {_t("Reset")}
+                            </AccessibleButton>
+                        </p>
                     </details>
                     )}
 

src/components/views/settings/tabs/room/RolesRoomSettingsTab.js

@@ -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.
@@ -22,17 +22,19 @@ import * as sdk from "../../../../..";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Modal from "../../../../../Modal";
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import {EventType} from "matrix-js-sdk/src/@types/event";
 
 const plEventsToLabels = {
     // These will be translated for us later.
-    "m.room.avatar": _td("Change room avatar"),
-    "m.room.name": _td("Change room name"),
-    "m.room.canonical_alias": _td("Change main address for the room"),
-    "m.room.history_visibility": _td("Change history visibility"),
-    "m.room.power_levels": _td("Change permissions"),
-    "m.room.topic": _td("Change topic"),
-    "m.room.tombstone": _td("Upgrade the room"),
-    "m.room.encryption": _td("Enable room encryption"),
+    [EventType.RoomAvatar]: _td("Change room avatar"),
+    [EventType.RoomName]: _td("Change room name"),
+    [EventType.RoomCanonicalAlias]: _td("Change main address for the room"),
+    [EventType.RoomHistoryVisibility]: _td("Change history visibility"),
+    [EventType.RoomPowerLevels]: _td("Change permissions"),
+    [EventType.RoomTopic]: _td("Change topic"),
+    [EventType.RoomTombstone]: _td("Upgrade the room"),
+    [EventType.RoomEncryption]: _td("Enable room encryption"),
+    [EventType.RoomServerAcl]: _td("Change server ACLs"),
 
     // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
     "im.vector.modular.widgets": _td("Modify widgets"),
@@ -40,14 +42,15 @@ const plEventsToLabels = {
 
 const plEventsToShow = {
     // If an event is listed here, it will be shown in the PL settings. Defaults will be calculated.
-    "m.room.avatar": {isState: true},
-    "m.room.name": {isState: true},
-    "m.room.canonical_alias": {isState: true},
-    "m.room.history_visibility": {isState: true},
-    "m.room.power_levels": {isState: true},
-    "m.room.topic": {isState: true},
-    "m.room.tombstone": {isState: true},
-    "m.room.encryption": {isState: true},
+    [EventType.RoomAvatar]: {isState: true},
+    [EventType.RoomName]: {isState: true},
+    [EventType.RoomCanonicalAlias]: {isState: true},
+    [EventType.RoomHistoryVisibility]: {isState: true},
+    [EventType.RoomPowerLevels]: {isState: true},
+    [EventType.RoomTopic]: {isState: true},
+    [EventType.RoomTombstone]: {isState: true},
+    [EventType.RoomEncryption]: {isState: true},
+    [EventType.RoomServerAcl]: {isState: true},
 
     // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
     "im.vector.modular.widgets": {isState: true},

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

@@ -18,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
+import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { enumerateThemes } from "../../../../../theme";
 import ThemeWatcher from "../../../../../settings/watchers/ThemeWatcher";
@@ -63,6 +64,10 @@ interface IState extends IThemeState {
     systemFont: string;
     showAdvanced: boolean;
     layout: Layout;
+    // User profile data for the message preview
+    userId: string;
+    displayName: string;
+    avatarUrl: string;
 }
 
 @replaceableComponent("views.settings.tabs.user.AppearanceUserSettingsTab")
@@ -84,9 +89,25 @@ 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",
+            avatarUrl: null,
         };
     }
 
+    async componentDidMount() {
+        // Fetch the current user profile for the message preview
+        const client = MatrixClientPeg.get();
+        const userId = client.getUserId();
+        const profileInfo = await client.getProfileInfo(userId);
+
+        this.setState({
+            userId,
+            displayName: profileInfo.displayname,
+            avatarUrl: profileInfo.avatar_url,
+        });
+    }
+
     private calculateThemeState(): IThemeState {
         // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
         // show the right values for things.
@@ -307,6 +328,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 className="mx_AppearanceUserSettingsTab_fontSlider_preview"
                 message={this.MESSAGE_PREVIEW_TEXT}
                 layout={this.state.layout}
+                userId={this.state.userId}
+                displayName={this.state.displayName}
+                avatarUrl={this.state.avatarUrl}
             />
             <div className="mx_AppearanceUserSettingsTab_fontSlider">
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>

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

@@ -74,6 +74,8 @@ export default class PreferencesUserSettingsTab extends React.Component {
         this.state = {
             autoLaunch: false,
             autoLaunchSupported: false,
+            warnBeforeExit: true,
+            warnBeforeExitSupported: false,
             alwaysShowMenuBar: true,
             alwaysShowMenuBarSupported: false,
             minimizeToTray: true,
@@ -96,6 +98,12 @@ export default class PreferencesUserSettingsTab extends React.Component {
             autoLaunch = await platform.getAutoLaunchEnabled();
         }
 
+        const warnBeforeExitSupported = await platform.supportsWarnBeforeExit();
+        let warnBeforeExit = false;
+        if (warnBeforeExitSupported) {
+            warnBeforeExit = await platform.shouldWarnBeforeExit();
+        }
+
         const alwaysShowMenuBarSupported = await platform.supportsAutoHideMenuBar();
         let alwaysShowMenuBar = true;
         if (alwaysShowMenuBarSupported) {
@@ -111,6 +119,8 @@ export default class PreferencesUserSettingsTab extends React.Component {
         this.setState({
             autoLaunch,
             autoLaunchSupported,
+            warnBeforeExit,
+            warnBeforeExitSupported,
             alwaysShowMenuBarSupported,
             alwaysShowMenuBar,
             minimizeToTraySupported,
@@ -122,6 +132,10 @@ export default class PreferencesUserSettingsTab extends React.Component {
         PlatformPeg.get().setAutoLaunchEnabled(checked).then(() => this.setState({autoLaunch: checked}));
     };
 
+    _onWarnBeforeExitChange = (checked) => {
+        PlatformPeg.get().setWarnBeforeExit(checked).then(() => this.setState({warnBeforeExit: checked}));
+    }
+
     _onAlwaysShowMenuBarChange = (checked) => {
         PlatformPeg.get().setAutoHideMenuBarEnabled(!checked).then(() => this.setState({alwaysShowMenuBar: checked}));
     };
@@ -161,6 +175,14 @@ export default class PreferencesUserSettingsTab extends React.Component {
                 label={_t('Start automatically after system login')} />;
         }
 
+        let warnBeforeExitOption = null;
+        if (this.state.warnBeforeExitSupported) {
+            warnBeforeExitOption = <LabelledToggleSwitch
+                value={this.state.warnBeforeExit}
+                onChange={this._onWarnBeforeExitChange}
+                label={_t('Warn before quitting')} />;
+        }
+
         let autoHideMenuOption = null;
         if (this.state.alwaysShowMenuBarSupported) {
             autoHideMenuOption = <LabelledToggleSwitch
@@ -202,6 +224,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
                     {minimizeToTrayOption}
                     {autoHideMenuOption}
                     {autoLaunchOption}
+                    {warnBeforeExitOption}
                     <Field
                         label={_t('Autocomplete delay (ms)')}
                         type='number'

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -148,7 +148,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
 
             <SpaceBasicSettings setAvatar={setAvatar} name={name} setName={setName} topic={topic} setTopic={setTopic} />
 
-            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={!name && !busy}>
+            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={!name || busy}>
                 { busy ? _t("Creating...") : _t("Create") }
             </AccessibleButton>
         </React.Fragment>;

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -34,21 +34,17 @@ import {
     shouldShowSpaceSettings,
     showAddExistingRooms,
     showCreateNewRoom,
+    showSpaceInvite,
     showSpaceSettings,
 } from "../../../utils/space";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AccessibleButton, {ButtonEvent} from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import Modal from "../../../Modal";
-import SpacePublicShare from "./SpacePublicShare";
 import {Action} from "../../../dispatcher/actions";
 import RoomViewStore from "../../../stores/RoomViewStore";
 import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {showRoomInviteDialog} from "../../../RoomInvite";
-import InfoDialog from "../dialogs/InfoDialog";
 import {EventType} from "matrix-js-sdk/src/@types/event";
-import SpaceRoomDirectory from "../../structures/SpaceRoomDirectory";
 
 interface IItemProps {
     space?: Room;
@@ -115,36 +111,11 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         this.setState({contextMenuPosition: null});
     };
 
-    private onHomeClick = (ev: ButtonEvent) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        defaultDispatcher.dispatch({
-            action: "view_room",
-            room_id: this.props.space.roomId,
-        });
-        this.setState({contextMenuPosition: null}); // also close the menu
-    };
-
     private onInviteClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
 
-        if (this.props.space.getJoinRule() === "public") {
-            const modal = Modal.createTrackedDialog("Space Invite", "User Menu", InfoDialog, {
-                title: _t("Invite to %(spaceName)s", { spaceName: this.props.space.name }),
-                description: <React.Fragment>
-                    <span>{ _t("Share your public space") }</span>
-                    <SpacePublicShare space={this.props.space} onFinished={() => modal.close()} />
-                </React.Fragment>,
-                fixedWidth: false,
-                button: false,
-                className: "mx_SpacePanel_sharePublicSpace",
-                hasCloseButton: true,
-            });
-        } else {
-            showRoomInviteDialog(this.props.space.roomId);
-        }
+        showSpaceInvite(this.props.space);
         this.setState({contextMenuPosition: null}); // also close the menu
     };
 
@@ -206,9 +177,10 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        Modal.createTrackedDialog("Space room directory", "Space panel", SpaceRoomDirectory, {
-            space: this.props.space,
-        }, "mx_SpaceRoomDirectory_dialogWrapper", false, true);
+        defaultDispatcher.dispatch({
+            action: "view_room",
+            room_id: this.props.space.roomId,
+        });
         this.setState({contextMenuPosition: null}); // also close the menu
     };
 
@@ -249,6 +221,8 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 </IconizedContextMenuOptionList>;
             }
 
+            const canAddRooms = this.props.space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
+
             let newRoomSection;
             if (this.props.space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
                 newRoomSection = <IconizedContextMenuOptionList first>
@@ -276,11 +250,6 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 </div>
                 <IconizedContextMenuOptionList first>
                     { inviteOption }
-                    <IconizedContextMenuOption
-                        iconClassName="mx_SpacePanel_iconHome"
-                        label={_t("Space Home")}
-                        onClick={this.onHomeClick}
-                    />
                     <IconizedContextMenuOption
                         iconClassName="mx_SpacePanel_iconMembers"
                         label={_t("Members")}
@@ -289,7 +258,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                     { settingsOption }
                     <IconizedContextMenuOption
                         iconClassName="mx_SpacePanel_iconExplore"
-                        label={_t("Explore rooms")}
+                        label={canAddRooms ? _t("Manage & explore rooms") : _t("Explore rooms")}
                         onClick={this.onExploreRoomsClick}
                     />
                 </IconizedContextMenuOptionList>

src/components/views/toasts/GenericToast.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.
@@ -21,6 +21,7 @@ import {XOR} from "../../../@types/common";
 
 export interface IProps {
     description: ReactNode;
+    detail?: ReactNode;
     acceptLabel: string;
 
     onAccept();
@@ -33,14 +34,20 @@ interface IPropsExtended extends IProps {
 
 const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
     description,
+    detail,
     acceptLabel,
     rejectLabel,
     onAccept,
     onReject,
 }) => {
+    const detailContent = detail ? <div className="mx_Toast_detail">
+        {detail}
+    </div> : null;
+
     return <div>
         <div className="mx_Toast_description">
-            { description }
+            {description}
+            {detailContent}
         </div>
         <div className="mx_Toast_buttons" aria-live="off">
             {onReject && rejectLabel && <FormButton label={rejectLabel} kind="danger" onClick={onReject} /> }

src/components/views/toasts/VerificationRequestToast.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+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.
@@ -140,11 +140,12 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
 
     render() {
         const {request} = this.props;
-        let nameLabel;
+        let description;
+        let detail;
         if (request.isSelfVerification) {
             if (this.state.device) {
-                nameLabel = _t("From %(deviceName)s (%(deviceId)s) at %(ip)s", {
-                    deviceName: this.state.device.getDisplayName(),
+                description = this.state.device.getDisplayName();
+                detail = _t("%(deviceId)s from %(ip)s", {
                     deviceId: this.state.device.deviceId,
                     ip: this.state.ip,
                 });
@@ -152,13 +153,13 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
         } else {
             const userId = request.otherUserId;
             const roomId = request.channel.roomId;
-            nameLabel = roomId ? userLabelForEventRoom(userId, roomId) : userId;
+            description = roomId ? userLabelForEventRoom(userId, roomId) : userId;
             // for legacy to_device verification requests
-            if (nameLabel === userId) {
+            if (description === userId) {
                 const client = MatrixClientPeg.get();
                 const user = client.getUser(userId);
                 if (user && user.displayName) {
-                    nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
+                    description = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
                 }
             }
         }
@@ -167,7 +168,8 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
             _t("Decline (%(counter)s)", {counter: this.state.counter});
 
         return <GenericToast
-            description={nameLabel}
+            description={description}
+            detail={detail}
             acceptLabel={_t("Accept")}
             onAccept={this.accept}
             rejectLabel={declineLabel}

src/components/views/voice_messages/Clock.tsx

@@ -0,0 +1,42 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+
+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.voice_messages.Clock")
+export default class Clock extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+    }
+
+    public render() {
+        const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0');
+        const seconds = Math.round(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
+        return <span className='mx_Clock'>{minutes}:{seconds}</span>;
+    }
+}

src/components/views/voice_messages/LiveRecordingClock.tsx

@@ -0,0 +1,55 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {IRecordingUpdate, VoiceRecorder} from "../../../voice/VoiceRecorder";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Clock from "./Clock";
+
+interface IProps {
+    recorder: VoiceRecorder;
+}
+
+interface IState {
+    seconds: number;
+}
+
+/**
+ * A clock for a live recording.
+ */
+@replaceableComponent("views.voice_messages.LiveRecordingClock")
+export default class LiveRecordingClock extends React.Component<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {seconds: 0};
+        this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
+    }
+
+    shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean {
+        const currentFloor = Math.floor(this.state.seconds);
+        const nextFloor = Math.floor(nextState.seconds);
+        return currentFloor !== nextFloor;
+    }
+
+    private onRecordingUpdate = (update: IRecordingUpdate) => {
+        this.setState({seconds: update.timeSeconds});
+    };
+
+    public render() {
+        return <Clock seconds={this.state.seconds} />;
+    }
+}

src/components/views/voice_messages/LiveRecordingWaveform.tsx

@@ -0,0 +1,62 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {IRecordingUpdate, VoiceRecorder} from "../../../voice/VoiceRecorder";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {arrayFastResample, arraySeed} from "../../../utils/arrays";
+import {percentageOf} from "../../../utils/numbers";
+import Waveform from "./Waveform";
+
+interface IProps {
+    recorder: VoiceRecorder;
+}
+
+interface IState {
+    heights: number[];
+}
+
+const DOWNSAMPLE_TARGET = 35; // number of bars we want
+
+/**
+ * A waveform which shows the waveform of a live recording
+ */
+@replaceableComponent("views.voice_messages.LiveRecordingWaveform")
+export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {heights: arraySeed(0, DOWNSAMPLE_TARGET)};
+        this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
+    }
+
+    private onRecordingUpdate = (update: IRecordingUpdate) => {
+        // The waveform and the downsample target are pretty close, so we should be fine to
+        // do this, despite the docs on arrayFastResample.
+        const bars = arrayFastResample(Array.from(update.waveform), DOWNSAMPLE_TARGET);
+        this.setState({
+            // The incoming data is between zero and one, but typically even screaming into a
+            // microphone won't send you over 0.6, so we artificially adjust the gain for the
+            // waveform. This results in a slightly more cinematic/animated waveform for the
+            // user.
+            heights: bars.map(b => percentageOf(b, 0, 0.50)),
+        });
+    };
+
+    public render() {
+        return <Waveform relHeights={this.state.heights} />;
+    }
+}

src/components/views/voice_messages/Waveform.tsx

@@ -0,0 +1,45 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+
+interface IProps {
+    relHeights: number[]; // relative heights (0-1)
+}
+
+interface IState {
+}
+
+/**
+ * A simple waveform component. This renders bars (centered vertically) for each
+ * height provided in the component properties. Updating the properties will update
+ * the rendered waveform.
+ */
+@replaceableComponent("views.voice_messages.Waveform")
+export default class Waveform extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+    }
+
+    public render() {
+        return <div className='mx_Waveform'>
+            {this.props.relHeights.map((h, i) => {
+                return <span key={i} style={{height: (h * 100) + '%'}} className='mx_Waveform_bar' />;
+            })}
+        </div>;
+    }
+}

src/components/views/voip/CallView.tsx

@@ -40,9 +40,6 @@ interface IProps {
         // Another ongoing call to display information about
         secondaryCall?: MatrixCall,
 
-        // maxHeight style attribute for the video panel
-        maxVideoHeight?: number;
-
         // a callback which is called when the content in the callview changes
         // in a way that is likely to cause a resize.
         onResize?: any;
@@ -96,9 +93,6 @@ function exitFullscreen() {
 const CONTROLS_HIDE_DELAY = 1000;
 // Height of the header duplicated from CSS because we need to subtract it from our max
 // height to get the max height of the video
-const HEADER_HEIGHT = 44;
-const BOTTOM_PADDING = 10;
-const BOTTOM_MARGIN_TOP_BOTTOM = 10; // top margin plus bottom margin
 const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
 
 @replaceableComponent("views.voip.CallView")
@@ -364,6 +358,11 @@ export default class CallView extends React.Component<IProps, IState> {
         CallHandler.sharedInstance().setActiveCallRoomId(userFacingRoomId);
     }
 
+    private onTransferClick = () => {
+        const transfereeCall = CallHandler.sharedInstance().getTransfereeForCallId(this.props.call.callId);
+        this.props.call.transferToCall(transfereeCall);
+    }
+
     public render() {
         const client = MatrixClientPeg.get();
         const callRoomId = CallHandler.roomIdForCall(this.props.call);
@@ -479,25 +478,52 @@ export default class CallView extends React.Component<IProps, IState> {
         // for voice calls (fills the bg)
         let contentView: React.ReactNode;
 
+        const transfereeCall = CallHandler.sharedInstance().getTransfereeForCallId(this.props.call.callId);
         const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
-        let onHoldText = null;
-        if (this.state.isRemoteOnHold) {
-            const holdString = CallHandler.sharedInstance().hasAnyUnheldCall() ?
-                _td("You held the call <a>Switch</a>") : _td("You held the call <a>Resume</a>");
-            onHoldText = _t(holdString, {}, {
-                a: sub => <AccessibleButton kind="link" onClick={this.onCallResumeClick}>
-                    {sub}
-                </AccessibleButton>,
-            });
-        } else if (this.state.isLocalOnHold) {
-            onHoldText = _t("%(peerName)s held the call", {
-                peerName: this.props.call.getOpponentMember().name,
-            });
+        let holdTransferContent;
+        if (transfereeCall) {
+            const transferTargetRoom = MatrixClientPeg.get().getRoom(CallHandler.roomIdForCall(this.props.call));
+            const transferTargetName = transferTargetRoom ? transferTargetRoom.name : _t("unknown person");
+
+            const transfereeRoom = MatrixClientPeg.get().getRoom(
+                CallHandler.roomIdForCall(transfereeCall),
+            );
+            const transfereeName = transfereeRoom ? transfereeRoom.name : _t("unknown person");
+
+            holdTransferContent = <div className="mx_CallView_holdTransferContent">
+                {_t(
+                    "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>",
+                    {
+                        transferTarget: transferTargetName,
+                        transferee: transfereeName,
+                    },
+                    {
+                        a: sub => <AccessibleButton kind="link" onClick={this.onTransferClick}>{sub}</AccessibleButton>,
+                    },
+                )}
+            </div>;
+        } else if (isOnHold) {
+            let onHoldText = null;
+            if (this.state.isRemoteOnHold) {
+                const holdString = CallHandler.sharedInstance().hasAnyUnheldCall() ?
+                    _td("You held the call <a>Switch</a>") : _td("You held the call <a>Resume</a>");
+                onHoldText = _t(holdString, {}, {
+                    a: sub => <AccessibleButton kind="link" onClick={this.onCallResumeClick}>
+                        {sub}
+                    </AccessibleButton>,
+                });
+            } else if (this.state.isLocalOnHold) {
+                onHoldText = _t("%(peerName)s held the call", {
+                    peerName: this.props.call.getOpponentMember().name,
+                });
+            }
+            holdTransferContent = <div className="mx_CallView_holdTransferContent">
+                {onHoldText}
+            </div>;
         }
 
         if (this.props.call.type === CallType.Video) {
             let localVideoFeed = null;
-            let onHoldContent = null;
             let onHoldBackground = null;
             const backgroundStyle: CSSProperties = {};
             const containerClasses = classNames({
@@ -505,9 +531,6 @@ export default class CallView extends React.Component<IProps, IState> {
                 mx_CallView_video_hold: isOnHold,
             });
             if (isOnHold) {
-                onHoldContent = <div className="mx_CallView_video_holdContent">
-                    {onHoldText}
-                </div>;
                 const backgroundAvatarUrl = avatarUrlForMember(
                     // is it worth getting the size of the div to pass here?
                     this.props.call.getOpponentMember(), 1024, 1024, 'crop',
@@ -519,22 +542,11 @@ export default class CallView extends React.Component<IProps, IState> {
                 localVideoFeed = <VideoFeed type={VideoFeedType.Local} call={this.props.call} />;
             }
 
-            // if we're fullscreen, we don't want to set a maxHeight on the video element.
-            const maxVideoHeight = getFullScreenElement() || !this.props.maxVideoHeight ? null : (
-                this.props.maxVideoHeight - (HEADER_HEIGHT + BOTTOM_PADDING + BOTTOM_MARGIN_TOP_BOTTOM)
-            );
-            contentView = <div className={containerClasses}
-                ref={this.contentRef} onMouseMove={this.onMouseMove}
-                // Put the max height on here too because this div is ended up 4px larger than the content
-                // and is causing it to scroll, and I am genuinely baffled as to why.
-                style={{maxHeight: maxVideoHeight}}
-            >
+            contentView = <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}>
                 {onHoldBackground}
-                <VideoFeed type={VideoFeedType.Remote} call={this.props.call} onResize={this.props.onResize}
-                    maxHeight={maxVideoHeight}
-                />
+                <VideoFeed type={VideoFeedType.Remote} call={this.props.call} onResize={this.props.onResize} />
                 {localVideoFeed}
-                {onHoldContent}
+                {holdTransferContent}
                 {callControls}
             </div>;
         } else {
@@ -555,7 +567,7 @@ export default class CallView extends React.Component<IProps, IState> {
                         />
                     </div>
                 </div>
-                <div className="mx_CallView_voice_holdText">{onHoldText}</div>
+                {holdTransferContent}
                 {callControls}
             </div>;
         }

src/components/views/voip/CallViewForRoom.tsx

@@ -19,6 +19,8 @@ import React from 'react';
 import CallHandler from '../../../CallHandler';
 import CallView from './CallView';
 import dis from '../../../dispatcher/dispatcher';
+import {Resizable} from "re-resizable";
+import ResizeNotifier from "../../../utils/ResizeNotifier";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
@@ -28,9 +30,7 @@ interface IProps {
     // maxHeight style attribute for the video panel
     maxVideoHeight?: number;
 
-    // a callback which is called when the content in the callview changes
-    // in a way that is likely to cause a resize.
-    onResize?: any;
+    resizeNotifier: ResizeNotifier,
 }
 
 interface IState {
@@ -79,11 +79,50 @@ export default class CallViewForRoom extends React.Component<IProps, IState> {
         return call;
     }
 
+    private onResizeStart = () => {
+        this.props.resizeNotifier.startResizing();
+    };
+
+    private onResize = () => {
+        this.props.resizeNotifier.notifyTimelineHeightChanged();
+    };
+
+    private onResizeStop = () => {
+        this.props.resizeNotifier.stopResizing();
+    };
+
     public render() {
         if (!this.state.call) return null;
+        // We subtract 8 as it the margin-bottom of the mx_CallViewForRoom_ResizeWrapper
+        const maxHeight = this.props.maxVideoHeight - 8;
 
-        return <CallView call={this.state.call} pipMode={false}
-            onResize={this.props.onResize} maxVideoHeight={this.props.maxVideoHeight}
-        />;
+        return (
+            <div className="mx_CallViewForRoom">
+                <Resizable
+                    minHeight={380}
+                    maxHeight={maxHeight}
+                    enable={{
+                        top: false,
+                        right: false,
+                        bottom: true,
+                        left: false,
+                        topRight: false,
+                        bottomRight: false,
+                        bottomLeft: false,
+                        topLeft: false,
+                    }}
+                    onResizeStart={this.onResizeStart}
+                    onResize={this.onResize}
+                    onResizeStop={this.onResizeStop}
+                    className="mx_CallViewForRoom_ResizeWrapper"
+                    handleClasses={{bottom: "mx_CallViewForRoom_ResizeHandle"}}
+                >
+                    <CallView
+                        call={this.state.call}
+                        pipMode={false}
+                    />
+                </Resizable>
+            </div>
+        );
     }
 }

src/components/views/voip/VideoFeed.tsx

@@ -30,9 +30,6 @@ interface IProps {
 
     type: VideoFeedType,
 
-    // maxHeight style attribute for the video element
-    maxHeight?: number,
-
     // a callback which is called when the video element is resized
     // due to a change in video metadata
     onResize?: (e: Event) => void,
@@ -82,9 +79,6 @@ export default class VideoFeed extends React.Component<IProps> {
             ),
         };
 
-        let videoStyle = {};
-        if (this.props.maxHeight) videoStyle = { maxHeight: this.props.maxHeight };
-
-        return <video className={classnames(videoClasses)} ref={this.vid} style={videoStyle} />;
+        return <video className={classnames(videoClasses)} ref={this.vid} />;
     }
 }