Merge branch 'develop' into feed

src/components/structures/LeftPanel.tsx

@@ -154,7 +154,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     private doStickyHeaders(list: HTMLDivElement) {
         const topEdge = list.scrollTop;
         const bottomEdge = list.offsetHeight + list.scrollTop;
-        const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist");
+        const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist:not(.mx_RoomSublist_hidden)");
 
         const headerRightMargin = 15; // calculated from margins and widths to align with non-sticky tiles
         const headerStickyWidth = list.clientWidth - headerRightMargin;

src/components/structures/MatrixChat.tsx

@@ -84,6 +84,7 @@ 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 {
@@ -1091,8 +1096,22 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
         const isSpace = roomToLeave?.isSpaceRoom();
         // Show a warning if there are additional complications.
-        const joinRules = roomToLeave.currentState.getStateEvents('m.room.join_rules', '');
         const warnings = [];
+
+        const memberCount = roomToLeave.currentState.getJoinedMemberCount();
+        if (memberCount === 1) {
+            warnings.push((
+                <span className="warning" key="only_member_warning">
+                    {' '/* Whitespace, otherwise the sentences get smashed together */ }
+                    { _t("You are the only person here. " +
+                        "If you leave, no one will be able to join in the future, including you.") }
+                </span>
+            ));
+
+            return warnings;
+        }
+
+        const joinRules = roomToLeave.currentState.getStateEvents('m.room.join_rules', '');
         if (joinRules) {
             const rule = joinRules.getContent().join_rule;
             if (rule !== "public") {

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/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/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/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/AddExistingToSpaceDialog.tsx

@@ -57,21 +57,23 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
 
     const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
     const existingSubspacesSet = new Set(existingSubspaces);
-    const spaces = SpaceStore.instance.getSpaces().filter(s => {
-        return !existingSubspacesSet.has(s) // not already in space
-            && space !== s // not the top-level space
-            && selectedSpace !== s // not the selected space
-            && s.name.toLowerCase().includes(lcQuery); // contains query
-    });
+    const existingRoomsSet = new Set(SpaceStore.instance.getChildRooms(space.roomId));
 
-    const existingRooms = SpaceStore.instance.getChildRooms(space.roomId);
-    const existingRoomsSet = new Set(existingRooms);
-    const rooms = cli.getVisibleRooms().filter(room => {
-        return !existingRoomsSet.has(room) // not already in space
-            && !room.isSpaceRoom() // not a space itself
-            && room.name.toLowerCase().includes(lcQuery) // contains query
-            && !DMRoomMap.shared().getUserIdForRoomId(room.roomId); // not a DM
-    });
+    const joinRule = selectedSpace.getJoinRule();
+    const [spaces, rooms, dms] = cli.getVisibleRooms().reduce((arr, room) => {
+        if (room.getMyMembership() !== "join") return arr;
+        if (!room.name.toLowerCase().includes(lcQuery)) return arr;
+
+        if (room.isSpaceRoom()) {
+            if (room !== space && room !== selectedSpace && !existingSubspacesSet.has(room)) {
+                arr[0].push(room);
+            }
+        } else if (!existingRoomsSet.has(room) && joinRule !== "public") {
+            // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones.
+            arr[DMRoomMap.shared().getUserIdForRoomId(room.roomId) ? 2 : 1].push(room);
+        }
+        return arr;
+    }, [[], [], []]);
 
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState("");
@@ -172,7 +174,28 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
                 </div>
             ) : null }
 
-            { spaces.length + rooms.length < 1 ? <span className="mx_AddExistingToSpaceDialog_noResults">
+            { dms.length > 0 ? (
+                <div className="mx_AddExistingToSpaceDialog_section">
+                    <h3>{ _t("Direct Messages") }</h3>
+                    { dms.map(space => {
+                        return <Entry
+                            key={space.roomId}
+                            room={space}
+                            checked={selectedToAdd.has(space)}
+                            onChange={(checked) => {
+                                if (checked) {
+                                    selectedToAdd.add(space);
+                                } else {
+                                    selectedToAdd.delete(space);
+                                }
+                                setSelectedToAdd(new Set(selectedToAdd));
+                            }}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpaceDialog_noResults">
                 { _t("No results") }
             </span> : undefined }
         </AutoHideScrollbar>

src/components/views/dialogs/InviteDialog.tsx

@@ -31,6 +31,7 @@ import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
 import createRoom, {
     canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted,
+    IInvite3PID,
 } from "../../../createRoom";
 import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
@@ -618,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);
         }
@@ -646,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;
@@ -656,35 +657,41 @@ 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 = async () => {
@@ -712,8 +719,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 this.props.onFinished();
             }
 
-            if (cli.isRoomEncrypted(this.props.roomId) &&
-                SettingsStore.getValue("feature_room_history_key_sharing")) {
+            if (cli.isRoomEncrypted(this.props.roomId)) {
                 const visibilityEvent = room.currentState.getStateEvents(
                     "m.room.history_visibility", "",
                 );
@@ -1344,8 +1350,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             buttonText = _t("Invite");
             goButtonFn = this._inviteUsers;
 
-            if (SettingsStore.getValue("feature_room_history_key_sharing") &&
-                cli.isRoomEncrypted(this.props.roomId)) {
+            if (cli.isRoomEncrypted(this.props.roomId)) {
                 const room = cli.getRoom(this.props.roomId);
                 const visibilityEvent = room.currentState.getStateEvents(
                     "m.room.history_visibility", "",

src/components/views/dialogs/SeshatResetDialog.tsx

@@ -36,7 +36,7 @@ export default class SeshatResetDialog extends React.PureComponent<IDialogProps>
                         {_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" +
+                            "but the search experience might be degraded for a few moments " +
                             "whilst the index is recreated",
                         )}
                     </p>

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

@@ -25,6 +25,8 @@ import Field from '../../elements/Field';
 import AccessibleButton from '../../elements/AccessibleButton';
 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
@@ -47,6 +49,7 @@ interface IState {
     forceRecoveryKey: boolean;
     passPhrase: string;
     keyMatches: boolean | null;
+    resetting: boolean;
 }
 
 /*
@@ -66,10 +69,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
             forceRecoveryKey: false,
             passPhrase: '',
             keyMatches: null,
+            resetting: false,
         };
     }
 
     private onCancel = () => {
+        if (this.state.resetting) {
+            this.setState({resetting: false});
+        }
         this.props.onFinished(false);
     };
 
@@ -201,6 +208,55 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         });
     };
 
+    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");
@@ -216,8 +272,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
     }
 
     render() {
-        // Caution: Making this an import will break tests.
+        // 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 &&
@@ -226,11 +283,36 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
             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'];
@@ -278,13 +360,13 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                         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,
@@ -339,6 +421,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                         onCancel={this.onCancel}
                         focus={false}
                         primaryDisabled={!this.state.recoveryKeyValid}
+                        additive={resetButton}
                     />
                 </form>
             </div>;

src/components/views/elements/EventTilePreview.tsx

@@ -55,22 +55,10 @@ interface IProps {
      * The mxc:// avatar URL of the displayed user
      */
     avatarUrl?: string;
-
-    /**
-     * Whether the EventTile should appear faded
-     */
-    faded?: boolean;
-
-    /**
-     * Callback for when the component is clicked
-     */
-    onClick?: () => void;
 }
 
 interface IState {
     message: string;
-    faded: boolean;
-    eventTileKey: number;
 }
 
 const AVATAR_SIZE = 32;
@@ -81,23 +69,9 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
         super(props);
         this.state = {
             message: props.message,
-            faded: !!props.faded,
-            eventTileKey: 0,
         };
     }
 
-    changeMessage(message: string) {
-        this.setState({
-            message,
-            // Change the EventTile key to force React to create a new instance
-            eventTileKey: this.state.eventTileKey + 1,
-        });
-    }
-
-    unfade() {
-        this.setState({ faded: false });
-    }
-
     private fakeEvent({message}: IState) {
         // Fake it till we make it
         /* eslint-disable quote-props */
@@ -147,12 +121,10 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
         const className = classnames(this.props.className, {
             "mx_IRCLayout": this.props.layout == Layout.IRC,
             "mx_GroupLayout": this.props.layout == Layout.Group,
-            "mx_EventTilePreview_faded": this.state.faded,
         });
 
-        return <div className={className} onClick={this.props.onClick}>
+        return <div className={className}>
             <EventTile
-                key={this.state.eventTileKey}
                 mxEvent={event}
                 layout={this.props.layout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}

src/components/views/elements/FacePile.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { HTMLAttributes } from "react";
+import React, { HTMLAttributes, ReactNode, useContext } 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";
@@ -24,6 +24,7 @@ import { _t } from "../../../languageHandler";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import { useRoomMembers } from "../../../hooks/useRoomMembers";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 const DEFAULT_NUM_FACES = 5;
 
@@ -36,6 +37,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
 const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
 
 const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IProps) => {
+    const cli = useContext(MatrixClientContext);
     let members = useRoomMembers(room);
 
     // sort users with an explicit avatar first
@@ -46,21 +48,42 @@ const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, .
         // sort known users first
         iteratees.unshift(member => isKnownMember(member));
     }
-    if (members.length < 1) return null;
 
-    const shownMembers = sortBy(members, iteratees).slice(0, numShown);
+    // exclude ourselves from the shown members list
+    const shownMembers = sortBy(members.filter(m => m.userId !== cli.getUserId()), iteratees).slice(0, numShown);
+    if (shownMembers.length < 1) return null;
+
+    // We reverse the order of the shown faces in CSS to simplify their visual overlap,
+    // reverse members in tooltip order to make the order between the two match up.
+    const commaSeparatedMembers = shownMembers.map(m => m.rawDisplayName).reverse().join(", ");
+
+    let tooltip: ReactNode;
+    if (props.onClick) {
+        tooltip = <div>
+            <div className="mx_Tooltip_title">
+                { _t("View all %(count)s members", { count: members.length }) }
+            </div>
+            <div className="mx_Tooltip_sub">
+                { _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers }) }
+            </div>
+        </div>;
+    } else {
+        tooltip = _t("%(count)s members including %(commaSeparatedMembers)s", {
+            count: members.length,
+            commaSeparatedMembers,
+        });
+    }
+
     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>
+        <TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
+            { members.length > numShown ? <span className="mx_FacePile_face mx_FacePile_more" /> : null }
+            { shownMembers.map(m =>
+                <MemberAvatar key={m.userId} member={m} width={28} height={28} className="mx_FacePile_face" /> )}
+        </TextWithTooltip>
+        { onlyKnownUsers && <span className="mx_FacePile_summary">
             { _t("%(count)s people you know have already joined", { count: members.length }) }
         </span> }
-    </div>
+    </div>;
 };
 
 export default FacePile;

src/components/views/elements/Field.tsx

@@ -262,7 +262,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
                 tooltipClassName={classNames("mx_Field_tooltip", tooltipClassName)}
                 visible={(this.state.focused && this.props.forceTooltipVisible) || this.state.feedbackVisible}
                 label={tooltipContent || this.state.feedback}
-                forceOnRight
+                alignment={Tooltip.Alignment.Right}
             />;
         }
 

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,446 @@
+/*
+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";
+import {normalizeWheelEvent} from "../../../utils/Mouse";
+
+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 = 0.5;
+// 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 {deltaY} = normalizeWheelEvent(ev);
+        const newZoom = this.state.zoom - (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();
+
+        // Don't do anything if we pressed any
+        // other button than the left one
+        if (ev.button !== 0) return;
+
+        // 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/InfoTooltip.tsx

@@ -18,8 +18,8 @@ limitations under the License.
 import React from 'react';
 import classNames from 'classnames';
 
-import Tooltip from './Tooltip';
-import { _t } from "../../../languageHandler";
+import Tooltip, {Alignment} from './Tooltip';
+import {_t} from "../../../languageHandler";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface ITooltipProps {
@@ -61,7 +61,7 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps, ISta
             className="mx_InfoTooltip_container"
             tooltipClassName={classNames("mx_InfoTooltip_tooltip", tooltipClassName)}
             label={tooltip || title}
-            forceOnRight={true}
+            alignment={Alignment.Right}
         /> : <div />;
         return (
             <div onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className="mx_InfoTooltip">

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/PersistedElement.js

@@ -139,6 +139,8 @@ export default class PersistedElement extends React.Component {
     _onAction(payload) {
         if (payload.action === 'timeline_resize') {
             this._repositionChild();
+        } else if (payload.action === 'logout') {
+            PersistedElement.destroyElement(this.props.persistKey);
         }
     }
 

src/components/views/elements/TextWithTooltip.js

@@ -25,6 +25,7 @@ export default class TextWithTooltip extends React.Component {
         class: PropTypes.string,
         tooltipClass: PropTypes.string,
         tooltip: PropTypes.node.isRequired,
+        tooltipProps: PropTypes.object,
     };
 
     constructor() {
@@ -46,15 +47,17 @@ export default class TextWithTooltip extends React.Component {
     render() {
         const Tooltip = sdk.getComponent("elements.Tooltip");
 
-        const {class: className, children, tooltip, tooltipClass, ...props} = this.props;
+        const {class: className, children, tooltip, tooltipClass, tooltipProps, ...props} = this.props;
 
         return (
             <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
                 {children}
                 {this.state.hover && <Tooltip
+                    {...tooltipProps}
                     label={tooltip}
                     tooltipClassName={tooltipClass}
-                    className={"mx_TextWithTooltip_tooltip"} /> }
+                    className={"mx_TextWithTooltip_tooltip"}
+                /> }
             </span>
         );
     }

src/components/views/elements/Tooltip.tsx

@@ -25,6 +25,14 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const MIN_TOOLTIP_HEIGHT = 25;
 
+export enum Alignment {
+    Natural, // Pick left or right
+    Left,
+    Right,
+    Top, // Centered
+    Bottom, // Centered
+}
+
 interface IProps {
         // Class applied to the element used to position the tooltip
         className?: string;
@@ -36,7 +44,7 @@ interface IProps {
         visible?: boolean;
         // the react element to put into the tooltip
         label: React.ReactNode;
-        forceOnRight?: boolean;
+        alignment?: Alignment; // defaults to Natural
         yOffset?: number;
 }
 
@@ -46,10 +54,14 @@ export default class Tooltip extends React.Component<IProps> {
     private tooltip: void | Element | Component<Element, any, any>;
     private parent: Element;
 
+    // XXX: This is because some components (Field) are unable to `import` the Tooltip class,
+    // so we expose the Alignment options off of us statically.
+    public static readonly Alignment = Alignment;
 
     public static readonly defaultProps = {
         visible: true,
         yOffset: 0,
+        alignment: Alignment.Natural,
     };
 
     // Create a wrapper for the tooltip outside the parent and attach it to the body element
@@ -86,11 +98,35 @@ export default class Tooltip extends React.Component<IProps> {
             offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
 
-        style.top = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset + offset;
-        if (!this.props.forceOnRight && parentBox.right > window.innerWidth / 2) {
-            style.right = window.innerWidth - parentBox.right - window.pageXOffset - 16;
-        } else {
-            style.left = parentBox.right + window.pageXOffset + 6;
+        const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset;
+        const top = baseTop + offset;
+        const right = window.innerWidth - parentBox.right - window.pageXOffset - 16;
+        const left = parentBox.right + window.pageXOffset + 6;
+        const horizontalCenter = parentBox.right - window.pageXOffset - (parentBox.width / 2);
+        switch (this.props.alignment) {
+            case Alignment.Natural:
+                if (parentBox.right > window.innerWidth / 2) {
+                    style.right = right;
+                    style.top = top;
+                    break;
+                }
+                // fall through to Right
+            case Alignment.Right:
+                style.left = left;
+                style.top = top;
+                break;
+            case Alignment.Left:
+                style.right = right;
+                style.top = top;
+                break;
+            case Alignment.Top:
+                style.top = baseTop - 16;
+                style.left = horizontalCenter;
+                break;
+            case Alignment.Bottom:
+                style.top = baseTop + parentBox.height;
+                style.left = horizontalCenter;
+                break;
         }
 
         return style;

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/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/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/BasicMessageComposer.tsx

@@ -140,7 +140,12 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     public componentDidUpdate(prevProps: IProps) {
-        if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) {
+        // We need to re-check the placeholder when the enabled state changes because it causes the
+        // placeholder element to remount, which gets rid of the `::before` class. Re-evaluating the
+        // placeholder means we get a proper `::before` with the placeholder.
+        const enabledChange = this.props.disabled !== prevProps.disabled;
+        const placeholderChanged = this.props.placeholder !== prevProps.placeholder;
+        if (this.props.placeholder && (placeholderChanged || enabledChange)) {
             const {isEmpty} = this.props.model;
             if (isEmpty) {
                 this.showPlaceholder();
@@ -670,8 +675,6 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         });
         const classes = classNames("mx_BasicMessageComposer_input", {
             "mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
-
-            // TODO: @@ TravisR: This doesn't work properly. The composer resets in a strange way.
             "mx_BasicMessageComposer_input_disabled": this.props.disabled,
         });
 

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;
@@ -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/MessageComposer.js

@@ -29,11 +29,12 @@ import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ReplyPreview from "./ReplyPreview";
 import {UIFeature} from "../../../settings/UIFeature";
-import WidgetStore from "../../../stores/WidgetStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
+import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
+import {RecordingState} from "../../../voice/VoiceRecording";
+import Tooltip, {Alignment} from "../elements/Tooltip";
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -178,17 +179,15 @@ export default class MessageComposer extends React.Component {
         this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
         this._onTombstoneClick = this._onTombstoneClick.bind(this);
         this.renderPlaceholderText = this.renderPlaceholderText.bind(this);
-        WidgetStore.instance.on(UPDATE_EVENT, this._onWidgetUpdate);
-        ActiveWidgetStore.on('update', this._onActiveWidgetUpdate);
+        VoiceRecordingStore.instance.on(UPDATE_EVENT, this._onVoiceStoreUpdate);
         this._dispatcherRef = null;
 
         this.state = {
             tombstone: this._getRoomTombstone(),
             canSendMessages: this.props.room.maySendMessage(),
-            hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room),
-            joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room),
             isComposerEmpty: true,
             haveRecording: false,
+            recordingTimeLeftSeconds: null, // when set to a number, shows a toast
         };
     }
 
@@ -204,14 +203,6 @@ export default class MessageComposer extends React.Component {
         }
     };
 
-    _onWidgetUpdate = () => {
-        this.setState({hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room)});
-    };
-
-    _onActiveWidgetUpdate = () => {
-        this.setState({joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room)});
-    };
-
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
@@ -238,8 +229,7 @@ export default class MessageComposer extends React.Component {
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
         }
-        WidgetStore.instance.removeListener(UPDATE_EVENT, this._onWidgetUpdate);
-        ActiveWidgetStore.removeListener('update', this._onActiveWidgetUpdate);
+        VoiceRecordingStore.instance.off(UPDATE_EVENT, this._onVoiceStoreUpdate);
         dis.unregister(this.dispatcherRef);
     }
 
@@ -327,8 +317,18 @@ export default class MessageComposer extends React.Component {
         });
     }
 
-    onVoiceUpdate = (haveRecording: boolean) => {
-        this.setState({haveRecording});
+    _onVoiceStoreUpdate = () => {
+        const recording = VoiceRecordingStore.instance.activeRecording;
+        this.setState({haveRecording: !!recording});
+        if (recording) {
+            // We show a little heads up that the recording is about to automatically end soon. The 3s
+            // display time is completely arbitrary. Note that we don't need to deregister the listener
+            // because the recording instance will clean that up for us.
+            recording.on(RecordingState.EndingSoon, ({secondsLeft}) => {
+                this.setState({recordingTimeLeftSeconds: secondsLeft});
+                setTimeout(() => this.setState({recordingTimeLeftSeconds: null}), 3000);
+            });
+        }
     };
 
     render() {
@@ -352,7 +352,6 @@ export default class MessageComposer extends React.Component {
                     permalinkCreator={this.props.permalinkCreator}
                     replyToEvent={this.props.replyToEvent}
                     onChange={this.onChange}
-                    // TODO: @@ TravisR - Disabling the composer doesn't work
                     disabled={this.state.haveRecording}
                 />,
             );
@@ -373,8 +372,7 @@ export default class MessageComposer extends React.Component {
             if (SettingsStore.getValue("feature_voice_messages")) {
                 controls.push(<VoiceRecordComposerTile
                     key="controls_voice_record"
-                    room={this.props.room}
-                    onRecording={this.onVoiceUpdate} />);
+                    room={this.props.room} />);
             }
 
             if (!this.state.isComposerEmpty || this.state.haveRecording) {
@@ -411,8 +409,18 @@ export default class MessageComposer extends React.Component {
             );
         }
 
+        let recordingTooltip;
+        const secondsLeft = Math.round(this.state.recordingTimeLeftSeconds);
+        if (secondsLeft) {
+            recordingTooltip = <Tooltip
+                label={_t("%(seconds)ss left", {seconds: secondsLeft})}
+                alignment={Alignment.Top} yOffset={-50}
+            />;
+        }
+
         return (
             <div className="mx_MessageComposer mx_GroupLayout">
+                {recordingTooltip}
                 <div className="mx_MessageComposer_wrapper">
                     <ReplyPreview permalinkCreator={this.props.permalinkCreator} />
                     <div className="mx_MessageComposer_row">

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

@@ -289,12 +289,11 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         // shallow-copy from the template as we need to make modifications to it
         this.tagAesthetics = objectShallowClone(TAG_AESTHETICS);
         this.updateDmAddRoomAction();
-
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
     }
 
     public componentDidMount(): void {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         SpaceStore.instance.on(SUGGESTED_ROOMS, this.updateSuggestedRooms);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
         this.customTagStoreRef = CustomRoomTagStore.addListener(this.updateLists);
@@ -502,62 +501,56 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
     }
 
     private renderSublists(): React.ReactElement[] {
-        const components: React.ReactElement[] = [];
-
-        const tagOrder = TAG_ORDER.reduce((p, c) => {
-            if (c === CUSTOM_TAGS_BEFORE_TAG) {
-                const customTags = Object.keys(this.state.sublists)
-                    .filter(t => isCustomTag(t));
-                p.push(...customTags);
-            }
-            p.push(c);
-            return p;
-        }, [] as TagID[]);
-
         // show a skeleton UI if the user is in no rooms and they are not filtering
         const showSkeleton = !this.state.isNameFiltering &&
             Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
 
-        for (const orderedTagId of tagOrder) {
-            const orderedRooms = this.state.sublists[orderedTagId] || [];
-
-            let extraTiles = null;
-            if (orderedTagId === DefaultTagID.Invite) {
-                extraTiles = this.renderCommunityInvites();
-            } else if (orderedTagId === DefaultTagID.Suggested) {
-                extraTiles = this.renderSuggestedRooms();
+        return TAG_ORDER.reduce((tags, tagId) => {
+            if (tagId === CUSTOM_TAGS_BEFORE_TAG) {
+                const customTags = Object.keys(this.state.sublists)
+                    .filter(tagId => isCustomTag(tagId));
+                tags.push(...customTags);
             }
+            tags.push(tagId);
+            return tags;
+        }, [] as TagID[])
+            .map(orderedTagId => {
+                let extraTiles = null;
+                if (orderedTagId === DefaultTagID.Invite) {
+                    extraTiles = this.renderCommunityInvites();
+                } else if (orderedTagId === DefaultTagID.Suggested) {
+                    extraTiles = this.renderSuggestedRooms();
+                }
 
-            const totalTiles = orderedRooms.length + (extraTiles ? extraTiles.length : 0);
-            if (totalTiles === 0 && !ALWAYS_VISIBLE_TAGS.includes(orderedTagId)) {
-                continue; // skip tag - not needed
-            }
+                const aesthetics: ITagAesthetics = isCustomTag(orderedTagId)
+                    ? customTagAesthetics(orderedTagId)
+                    : this.tagAesthetics[orderedTagId];
+                if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
 
-            const aesthetics: ITagAesthetics = isCustomTag(orderedTagId)
-                ? customTagAesthetics(orderedTagId)
-                : this.tagAesthetics[orderedTagId];
-            if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
-
-            components.push(<RoomSublist
-                key={`sublist-${orderedTagId}`}
-                tagId={orderedTagId}
-                forRooms={true}
-                startAsHidden={aesthetics.defaultHidden}
-                label={aesthetics.sectionLabelRaw ? aesthetics.sectionLabelRaw : _t(aesthetics.sectionLabel)}
-                onAddRoom={aesthetics.onAddRoom}
-                addRoomLabel={aesthetics.addRoomLabel ? _t(aesthetics.addRoomLabel) : aesthetics.addRoomLabel}
-                addRoomContextMenu={aesthetics.addRoomContextMenu}
-                isMinimized={this.props.isMinimized}
-                onResize={this.props.onResize}
-                showSkeleton={showSkeleton}
-                extraTiles={extraTiles}
-            />);
-        }
-
-        return components;
+                // The cost of mounting/unmounting this component offsets the cost
+                // of keeping it in the DOM and hiding it when it is not required
+                return <RoomSublist
+                    key={`sublist-${orderedTagId}`}
+                    tagId={orderedTagId}
+                    forRooms={true}
+                    startAsHidden={aesthetics.defaultHidden}
+                    label={aesthetics.sectionLabelRaw ? aesthetics.sectionLabelRaw : _t(aesthetics.sectionLabel)}
+                    onAddRoom={aesthetics.onAddRoom}
+                    addRoomLabel={aesthetics.addRoomLabel ? _t(aesthetics.addRoomLabel) : aesthetics.addRoomLabel}
+                    addRoomContextMenu={aesthetics.addRoomContextMenu}
+                    isMinimized={this.props.isMinimized}
+                    onResize={this.props.onResize}
+                    showSkeleton={showSkeleton}
+                    extraTiles={extraTiles}
+                    alwaysVisible={ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
+                />
+            });
     }
 
     public render() {
+        const cli = MatrixClientPeg.get();
+        const userId = cli.getUserId();
+
         let explorePrompt: JSX.Element;
         if (!this.props.isMinimized) {
             if (this.state.isNameFiltering) {
@@ -578,21 +571,23 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                         { this.props.activeSpace ? _t("Explore rooms") : _t("Explore all public rooms") }
                     </AccessibleButton>
                 </div>;
-            } else if (this.props.activeSpace) {
+            } else if (
+                this.props.activeSpace?.canInvite(userId) || this.props.activeSpace?.getMyMembership() === "join"
+            ) {
                 explorePrompt = <div className="mx_RoomList_explorePrompt">
                     <div>{ _t("Quick actions") }</div>
-                    { this.props.activeSpace.canInvite(MatrixClientPeg.get().getUserId()) && <AccessibleButton
+                    { this.props.activeSpace.canInvite(userId) && <AccessibleButton
                         className="mx_RoomList_explorePrompt_spaceInvite"
                         onClick={this.onSpaceInviteClick}
                     >
                         {_t("Invite people")}
                     </AccessibleButton> }
-                    <AccessibleButton
+                    { this.props.activeSpace.getMyMembership() === "join" && <AccessibleButton
                         className="mx_RoomList_explorePrompt_spaceExplore"
                         onClick={this.onExplore}
                     >
                         {_t("Explore rooms")}
-                    </AccessibleButton>
+                    </AccessibleButton> }
                 </div>;
             } else if (Object.values(this.state.sublists).some(list => list.length > 0)) {
                 const unfilteredLists = RoomListStore.instance.unfilteredLists

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.
@@ -25,10 +23,10 @@ import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import SdkConfig from "../../../SdkConfig";
 import IdentityAuthClient from '../../../IdentityAuthClient';
-import SettingsStore from "../../../settings/SettingsStore";
 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",
@@ -303,7 +301,6 @@ export default class RoomPreviewBar extends React.Component {
         const brand = SdkConfig.get().brand;
         const Spinner = sdk.getComponent('elements.Spinner');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const EventTilePreview = sdk.getComponent('elements.EventTilePreview');
 
         let showSpinner = false;
         let title;
@@ -497,24 +494,7 @@ export default class RoomPreviewBar extends React.Component {
                 const myUserId = MatrixClientPeg.get().getUserId();
                 const reason = this.props.room.currentState.getMember(myUserId).events.member.event.content.reason;
                 if (reason) {
-                    this.reasonElement = React.createRef();
-                    // We hide the reason for invitation by default, since it can be a
-                    // vector for spam/harassment.
-                    const showReason = () => {
-                        this.reasonElement.current.unfade();
-                        this.reasonElement.current.changeMessage(reason);
-                    };
-                    reasonElement = <EventTilePreview
-                        ref={this.reasonElement}
-                        onClick={showReason}
-                        className="mx_RoomPreviewBar_reason"
-                        message={_t("Invite messages are hidden by default. Click to show the message.")}
-                        layout={SettingsStore.getValue("layout")}
-                        userId={inviteMember.userId}
-                        displayName={inviteMember.rawDisplayName}
-                        avatarUrl={inviteMember.events.member.event.content.avatar_url}
-                        faded={true}
-                    />;
+                    reasonElement = <InviteReason reason={reason} />;
                 }
 
                 primaryActionHandler = this.props.onJoinClick;

src/components/views/rooms/RoomSublist.tsx

@@ -74,6 +74,7 @@ interface IProps {
     tagId: TagID;
     onResize: () => void;
     showSkeleton?: boolean;
+    alwaysVisible?: boolean;
 
     extraTiles?: ReactComponentElement<typeof ExtraTile>[];
 
@@ -125,8 +126,6 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         };
         // Why Object.assign() and not this.state.height? Because TypeScript says no.
         this.state = Object.assign(this.state, {height: this.calculateInitialHeight()});
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onListsUpdated);
     }
 
     private calculateInitialHeight() {
@@ -242,6 +241,11 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         return false;
     }
 
+    public componentDidMount() {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onListsUpdated);
+    }
+
     public componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onListsUpdated);
@@ -759,6 +763,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             'mx_RoomSublist': true,
             'mx_RoomSublist_hasMenuOpen': !!this.state.contextMenuPosition,
             'mx_RoomSublist_minimized': this.props.isMinimized,
+            'mx_RoomSublist_hidden': !this.state.rooms.length && this.props.alwaysVisible !== true,
         });
 
         let content = null;

src/components/views/rooms/RoomTile.tsx

@@ -97,22 +97,8 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             // generatePreview() will return nothing if the user has previews disabled
             messagePreview: this.generatePreview(),
         };
-
-        ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        MessagePreviewStore.instance.on(
-            MessagePreviewStore.getPreviewChangedEventName(this.props.room),
-            this.onRoomPreviewChanged,
-        );
         this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
-        this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
         this.roomProps = EchoChamber.forRoom(this.props.room);
-        this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
-        CommunityPrototypeStore.instance.on(
-            CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
-            this.onCommunityUpdate,
-        );
-        this.props.room.on("Room.name", this.onRoomNameUpdate);
     }
 
     private onRoomNameUpdate = (room) => {
@@ -167,6 +153,20 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         if (this.state.selected) {
             this.scrollIntoView();
         }
+
+        ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        MessagePreviewStore.instance.on(
+            MessagePreviewStore.getPreviewChangedEventName(this.props.room),
+            this.onRoomPreviewChanged,
+        );
+        this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+        this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
+        this.roomProps.on("Room.name", this.onRoomNameUpdate);
+        CommunityPrototypeStore.instance.on(
+            CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
+            this.onCommunityUpdate,
+        );
     }
 
     public componentWillUnmount() {
@@ -182,8 +182,15 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             );
             this.props.room.off("Room.name", this.onRoomNameUpdate);
         }
+        ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
         defaultDispatcher.unregister(this.dispatcherRef);
         this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+        this.roomProps.off(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
+        this.roomProps.off("Room.name", this.onRoomNameUpdate);
+        CommunityPrototypeStore.instance.off(
+            CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
+            this.onCommunityUpdate,
+        );
     }
 
     private onAction = (payload: ActionPayload) => {
@@ -547,7 +554,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         />;
 
         let badge: React.ReactNode;
-        if (!this.props.isMinimized) {
+        if (!this.props.isMinimized && this.notificationState) {
             // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
             badge = (
                 <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
@@ -563,7 +570,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

@@ -477,6 +477,10 @@ export default class SendMessageComposer extends React.Component {
     }
 
     onAction = (payload) => {
+        // don't let the user into the composer if it is disabled - all of these branches lead
+        // to the cursor being in the composer
+        if (this.props.disabled) return;
+
         switch (payload.action) {
             case 'reply_to_event':
             case Action.FocusComposer:

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -17,21 +17,21 @@ limitations under the License.
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {_t} from "../../../languageHandler";
 import React from "react";
-import {VoiceRecorder} from "../../../voice/VoiceRecorder";
+import {VoiceRecording} from "../../../voice/VoiceRecording";
 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";
+import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
 
 interface IProps {
     room: Room;
-    onRecording: (haveRecording: boolean) => void;
 }
 
 interface IState {
-    recorder?: VoiceRecorder;
+    recorder?: VoiceRecording;
 }
 
 /**
@@ -53,17 +53,45 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             await this.state.recorder.stop();
             const mxc = await this.state.recorder.upload();
             MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
-                body: "Voice message",
-                msgtype: "org.matrix.msc2516.voice",
-                url: mxc,
+                "body": "Voice message",
+                "msgtype": "org.matrix.msc2516.voice",
+                //"msgtype": MsgType.Audio,
+                "url": mxc,
+                "info": {
+                    duration: Math.round(this.state.recorder.durationSeconds * 1000),
+                    mimetype: this.state.recorder.contentType,
+                    size: this.state.recorder.contentLength,
+                },
+
+                // MSC1767 experiment
+                "org.matrix.msc1767.text": "Voice message",
+                "org.matrix.msc1767.file": {
+                    url: mxc,
+                    name: "Voice message.ogg",
+                    mimetype: this.state.recorder.contentType,
+                    size: this.state.recorder.contentLength,
+                },
+                "org.matrix.msc1767.audio": {
+                    duration: Math.round(this.state.recorder.durationSeconds * 1000),
+                    // TODO: @@ TravisR: Waveform? (MSC1767 decision)
+                },
+                "org.matrix.experimental.msc2516.voice": { // MSC2516+MSC1767 experiment
+                    duration: Math.round(this.state.recorder.durationSeconds * 1000),
+
+                    // Events can't have floats, so we try to maintain resolution by using 1024
+                    // as a maximum value. The waveform contains values between zero and 1, so this
+                    // should come out largely sane.
+                    //
+                    // We're expecting about one data point per second of audio.
+                    waveform: this.state.recorder.finalWaveform.map(v => Math.round(v * 1024)),
+                },
             });
+            await VoiceRecordingStore.instance.disposeRecording();
             this.setState({recorder: null});
-            this.props.onRecording(false);
             return;
         }
-        const recorder = new VoiceRecorder(MatrixClientPeg.get());
+        const recorder = VoiceRecordingStore.instance.startRecording();
         await recorder.start();
-        this.props.onRecording(true);
         this.setState({recorder});
     };
 

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/spaces/SpacePanel.tsx

@@ -25,7 +25,12 @@ import SpaceCreateMenu from "./SpaceCreateMenu";
 import {SpaceItem} from "./SpaceTreeLevel";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
-import SpaceStore, {HOME_SPACE, UPDATE_SELECTED_SPACE, UPDATE_TOP_LEVEL_SPACES} from "../../../stores/SpaceStore";
+import SpaceStore, {
+    HOME_SPACE,
+    UPDATE_INVITED_SPACES,
+    UPDATE_SELECTED_SPACE,
+    UPDATE_TOP_LEVEL_SPACES,
+} from "../../../stores/SpaceStore";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import {SpaceNotificationState} from "../../../stores/notifications/SpaceNotificationState";
 import NotificationBadge from "../rooms/NotificationBadge";
@@ -105,19 +110,21 @@ const SpaceButton: React.FC<IButtonProps> = ({
     </li>;
 }
 
-const useSpaces = (): [Room[], Room | null] => {
+const useSpaces = (): [Room[], Room[], Room | null] => {
+    const [invites, setInvites] = useState<Room[]>(SpaceStore.instance.invitedSpaces);
+    useEventEmitter(SpaceStore.instance, UPDATE_INVITED_SPACES, setInvites);
     const [spaces, setSpaces] = useState<Room[]>(SpaceStore.instance.spacePanelSpaces);
     useEventEmitter(SpaceStore.instance, UPDATE_TOP_LEVEL_SPACES, setSpaces);
     const [activeSpace, setActiveSpace] = useState<Room>(SpaceStore.instance.activeSpace);
     useEventEmitter(SpaceStore.instance, UPDATE_SELECTED_SPACE, setActiveSpace);
-    return [spaces, activeSpace];
+    return [invites, spaces, activeSpace];
 };
 
 const SpacePanel = () => {
     // We don't need the handle as we position the menu in a constant location
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<void>();
-    const [spaces, activeSpace] = useSpaces();
+    const [invites, spaces, activeSpace] = useSpaces();
     const [isPanelCollapsed, setPanelCollapsed] = useState(true);
 
     const newClasses = classNames("mx_SpaceButton_new", {
@@ -209,6 +216,13 @@ const SpacePanel = () => {
                             notificationState={SpaceStore.instance.getNotificationState(HOME_SPACE)}
                             isNarrow={isPanelCollapsed}
                         />
+                        { invites.map(s => <SpaceItem
+                            key={s.roomId}
+                            space={s}
+                            activeSpaces={activeSpaces}
+                            isPanelCollapsed={isPanelCollapsed}
+                            onExpand={() => setPanelCollapsed(false)}
+                        />) }
                         { spaces.map(s => <SpaceItem
                             key={s.roomId}
                             space={s}

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -45,6 +45,8 @@ import RoomViewStore from "../../../stores/RoomViewStore";
 import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 import {EventType} from "matrix-js-sdk/src/@types/event";
+import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
+import {NotificationColor} from "../../../stores/notifications/NotificationColor";
 
 interface IItemProps {
     space?: Room;
@@ -67,7 +69,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         super(props);
 
         this.state = {
-            collapsed: !props.isNested,   // default to collapsed for root items
+            collapsed: !props.isNested, // default to collapsed for root items
             contextMenuPosition: null,
         };
     }
@@ -83,6 +85,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
     }
 
     private onContextMenu = (ev: React.MouseEvent) => {
+        if (this.props.space.getMyMembership() !== "join") return;
         ev.preventDefault();
         ev.stopPropagation();
         this.setState({
@@ -185,6 +188,8 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
     };
 
     private renderContextMenu(): React.ReactElement {
+        if (this.props.space.getMyMembership() !== "join") return null;
+
         let contextMenu = null;
         if (this.state.contextMenuPosition) {
             const userId = this.context.getUserId();
@@ -300,7 +305,9 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition,
             mx_SpaceButton_narrow: isNarrow,
         });
-        const notificationState = SpaceStore.instance.getNotificationState(space.roomId);
+        const notificationState = space.getMyMembership() === "invite"
+            ? StaticNotificationState.forSymbol("!", NotificationColor.Red)
+            : SpaceStore.instance.getNotificationState(space.roomId);
 
         let childItems;
         if (childSpaces && !collapsed) {

src/components/views/voice_messages/LiveRecordingClock.tsx

@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 import React from "react";
-import {IRecordingUpdate, VoiceRecorder} from "../../../voice/VoiceRecorder";
+import {IRecordingUpdate, VoiceRecording} from "../../../voice/VoiceRecording";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import Clock from "./Clock";
 
 interface IProps {
-    recorder: VoiceRecorder;
+    recorder: VoiceRecording;
 }
 
 interface IState {

src/components/views/voice_messages/LiveRecordingWaveform.tsx

@@ -15,14 +15,14 @@ limitations under the License.
 */
 
 import React from "react";
-import {IRecordingUpdate, VoiceRecorder} from "../../../voice/VoiceRecorder";
+import {IRecordingUpdate, VoiceRecording} from "../../../voice/VoiceRecording";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {arrayFastResample, arraySeed} from "../../../utils/arrays";
 import {percentageOf} from "../../../utils/numbers";
 import Waveform from "./Waveform";
 
 interface IProps {
-    recorder: VoiceRecorder;
+    recorder: VoiceRecording;
 }
 
 interface IState {