Merge branch 'develop' into travis/message-states

src/components/views/avatars/RoomAvatar.tsx

@@ -24,7 +24,7 @@ import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
 import {ResizeMethod} from "../../../Avatar";
 
-interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick">{
+interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
     // Room may be left unset here, but if it is,
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)

src/components/views/dialogs/InviteDialog.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, {createRef} from 'react';
-import {_t} from "../../../languageHandler";
+import {_t, _td} from "../../../languageHandler";
 import * as sdk from "../../../index";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {makeRoomPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
@@ -48,6 +48,7 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
+export const KIND_SPACE_INVITE = "space_invite";
 export const KIND_CALL_TRANSFER = "call_transfer";
 
 const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
@@ -309,7 +310,7 @@ interface IInviteDialogProps {
     // not provided.
     kind: string,
 
-    // The room ID this dialog is for. Only required for KIND_INVITE.
+    // The room ID this dialog is for. Only required for KIND_INVITE and KIND_SPACE_INVITE.
     roomId: string,
 
     // The call to transfer. Only required for KIND_CALL_TRANSFER.
@@ -348,8 +349,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     constructor(props) {
         super(props);
 
-        if (props.kind === KIND_INVITE && !props.roomId) {
-            throw new Error("When using KIND_INVITE a roomId is required for an InviteDialog");
+        if ((props.kind === KIND_INVITE || props.kind === KIND_SPACE_INVITE) && !props.roomId) {
+            throw new Error("When using KIND_INVITE or KIND_SPACE_INVITE a roomId is required for an InviteDialog");
         } else if (props.kind === KIND_CALL_TRANSFER && !props.call) {
             throw new Error("When using KIND_CALL_TRANSFER a call is required for an InviteDialog");
         }
@@ -1026,7 +1027,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             sectionSubname = _t("May include members not in %(communityName)s", {communityName});
         }
 
-        if (this.props.kind === KIND_INVITE) {
+        if (this.props.kind === KIND_INVITE || this.props.kind === KIND_SPACE_INVITE) {
             sectionName = kind === 'recents' ? _t("Recently Direct Messaged") : _t("Suggestions");
         }
 
@@ -1247,38 +1248,35 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             }
             buttonText = _t("Go");
             goButtonFn = this._startDm;
-        } else if (this.props.kind === KIND_INVITE) {
-            title = _t("Invite to this room");
+        } else if (this.props.kind === KIND_INVITE || this.props.kind === KIND_SPACE_INVITE) {
+            title = this.props.kind === KIND_INVITE ? _t("Invite to this room") : _t("Invite to this space");
 
-            if (identityServersEnabled) {
-                helpText = _t(
-                    "Invite someone using their name, email address, username (like <userId/>) or " +
-                        "<a>share this room</a>.",
-                    {},
-                    {
-                        userId: () =>
-                            <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>,
-                        a: (sub) =>
-                            <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">
-                                {sub}
-                            </a>,
-                    },
-                );
-            } else {
-                helpText = _t(
-                    "Invite someone using their name, username (like <userId/>) or <a>share this room</a>.",
-                    {},
-                    {
-                        userId: () =>
-                            <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>,
-                        a: (sub) =>
-                            <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">
-                                {sub}
-                            </a>,
-                    },
-                );
+            let helpTextUntranslated;
+            if (this.props.kind === KIND_INVITE) {
+                if (identityServersEnabled) {
+                    helpTextUntranslated = _td("Invite someone using their name, email address, username " +
+                        "(like <userId/>) or <a>share this room</a>.");
+                } else {
+                    helpTextUntranslated = _td("Invite someone using their name, username " +
+                        "(like <userId/>) or <a>share this room</a>.");
+                }
+            } else { // KIND_SPACE_INVITE
+                if (identityServersEnabled) {
+                    helpTextUntranslated = _td("Invite someone using their name, email address, username " +
+                        "(like <userId/>) or <a>share this space</a>.");
+                } else {
+                    helpTextUntranslated = _td("Invite someone using their name, username " +
+                        "(like <userId/>) or <a>share this space</a>.");
+                }
             }
 
+            helpText = _t(helpTextUntranslated, {}, {
+                userId: () =>
+                    <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>,
+                a: (sub) =>
+                    <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">{sub}</a>,
+            });
+
             buttonText = _t("Invite");
             goButtonFn = this._inviteUsers;
         } else if (this.props.kind === KIND_CALL_TRANSFER) {

src/components/views/elements/LanguageDropdown.js

@@ -100,10 +100,10 @@ export default class LanguageDropdown extends React.Component {
         let language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
         let value = null;
         if (language) {
-          value = this.props.value || language;
+            value = this.props.value || language;
         } else {
-          language = navigator.language || navigator.userLanguage;
-          value = this.props.value || language;
+            language = navigator.language || navigator.userLanguage;
+            value = this.props.value || language;
         }
 
         return <Dropdown

src/components/views/elements/SpellCheckLanguagesDropdown.tsx

@@ -0,0 +1,126 @@
+/*
+Copyright 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 from 'react';
+
+import Dropdown from "../../views/elements/Dropdown"
+import * as sdk from '../../../index';
+import PlatformPeg from "../../../PlatformPeg";
+import SettingsStore from "../../../settings/SettingsStore";
+import { _t } from "../../../languageHandler";
+
+function languageMatchesSearchQuery(query, language) {
+    if (language.label.toUpperCase().includes(query.toUpperCase())) return true;
+    if (language.value.toUpperCase() === query.toUpperCase()) return true;
+    return false;
+}
+
+interface SpellCheckLanguagesDropdownIProps {
+    className: string,
+    value: string,
+    onOptionChange(language: string),
+}
+
+interface SpellCheckLanguagesDropdownIState {
+    searchQuery: string,
+    languages: any,
+}
+
+export default class SpellCheckLanguagesDropdown extends React.Component<SpellCheckLanguagesDropdownIProps,
+                                                                         SpellCheckLanguagesDropdownIState> {
+    constructor(props) {
+        super(props);
+        this._onSearchChange = this._onSearchChange.bind(this);
+
+        this.state = {
+            searchQuery: '',
+            languages: null,
+        };
+    }
+
+    componentDidMount() {
+        const plaf = PlatformPeg.get();
+        if (plaf) {
+            plaf.getAvailableSpellCheckLanguages().then((languages) => {
+                languages.sort(function(a, b) {
+                    if (a < b) return -1;
+                    if (a > b) return 1;
+                    return 0;
+                });
+                const langs = [];
+                languages.forEach((language) => {
+                    langs.push({
+                        label: language,
+                        value: language,
+                    })
+                })
+                this.setState({languages: langs});
+            }).catch((e) => {
+                this.setState({languages: ['en']});
+            });
+        }
+    }
+
+    _onSearchChange(search) {
+        this.setState({
+            searchQuery: search,
+        });
+    }
+
+    render() {
+        if (this.state.languages === null) {
+            const Spinner = sdk.getComponent('elements.Spinner');
+            return <Spinner />;
+        }
+
+        let displayedLanguages;
+        if (this.state.searchQuery) {
+            displayedLanguages = this.state.languages.filter((lang) => {
+                return languageMatchesSearchQuery(this.state.searchQuery, lang);
+            });
+        } else {
+            displayedLanguages = this.state.languages;
+        }
+
+        const options = displayedLanguages.map((language) => {
+            return <div key={language.value}>
+                { language.label }
+            </div>;
+        });
+
+        // default value here too, otherwise we need to handle null / undefined;
+        // values between mounting and the initial value propgating
+        let language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
+        let value = null;
+        if (language) {
+            value = this.props.value || language;
+        } else {
+            language = navigator.language || navigator.userLanguage;
+            value = this.props.value || language;
+        }
+
+        return <Dropdown
+            id="mx_LanguageDropdown"
+            className={this.props.className}
+            onOptionChange={this.props.onOptionChange}
+            onSearchChange={this._onSearchChange}
+            searchEnabled={true}
+            value={value}
+            label={_t("Language Dropdown")}>
+            { options }
+        </Dropdown>;
+    }
+}

src/components/views/settings/SpellCheckSettings.tsx

@@ -0,0 +1,111 @@
+/*
+Copyright 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 from 'react';
+import SpellCheckLanguagesDropdown from "../../../components/views/elements/SpellCheckLanguagesDropdown";
+import AccessibleButton from "../../../components/views/elements/AccessibleButton";
+import {_t} from "../../../languageHandler";
+
+interface ExistingSpellCheckLanguageIProps {
+    language: string,
+    onRemoved(language: string),
+}
+
+interface SpellCheckLanguagesIProps {
+    languages: Array<string>,
+    onLanguagesChange(languages: Array<string>),
+}
+
+interface SpellCheckLanguagesIState {
+    newLanguage: string,
+}
+
+export class ExistingSpellCheckLanguage extends React.Component<ExistingSpellCheckLanguageIProps> {
+    _onRemove = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        return this.props.onRemoved(this.props.language);
+    };
+
+    render() {
+        return (
+            <div className="mx_ExistingSpellCheckLanguage">
+                <span className="mx_ExistingSpellCheckLanguage_language">{this.props.language}</span>
+                <AccessibleButton onClick={this._onRemove} kind="danger_sm">
+                    {_t("Remove")}
+                </AccessibleButton>
+            </div>
+        );
+    }
+}
+
+export default class SpellCheckLanguages extends React.Component<SpellCheckLanguagesIProps, SpellCheckLanguagesIState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            newLanguage: "",
+        }
+    }
+
+    _onRemoved = (language) => {
+        const languages = this.props.languages.filter((e) => e !== language);
+        this.props.onLanguagesChange(languages);
+    };
+
+    _onAddClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        const language = this.state.newLanguage;
+
+        if (!language) return;
+        if (this.props.languages.includes(language)) return;
+
+        this.props.languages.push(language)
+        this.props.onLanguagesChange(this.props.languages);
+    };
+
+    _onNewLanguageChange = (language: string) => {
+        if (this.state.newLanguage === language) return;
+        this.setState({newLanguage: language});
+    };
+
+    render() {
+        const existingSpellCheckLanguages = this.props.languages.map((e) => {
+            return <ExistingSpellCheckLanguage language={e} onRemoved={this._onRemoved} key={e} />;
+        });
+
+        const addButton = (
+            <AccessibleButton onClick={this._onAddClick} kind="primary">
+                {_t("Add")}
+            </AccessibleButton>
+        );
+
+        return (
+            <div className="mx_SpellCheckLanguages">
+                {existingSpellCheckLanguages}
+                <form onSubmit={this._onAddClick} noValidate={true}>
+                    <SpellCheckLanguagesDropdown
+                        className="mx_GeneralUserSettingsTab_spellCheckLanguageInput"
+                        value={this.state.newLanguage}
+                        onOptionChange={this._onNewLanguageChange} />
+                    {addButton}
+                </form>
+            </div>
+        );
+    }
+}

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

@@ -22,6 +22,7 @@ import ProfileSettings from "../../ProfileSettings";
 import * as languageHandler from "../../../../../languageHandler";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import LanguageDropdown from "../../../elements/LanguageDropdown";
+import SpellCheckSettings from "../../SpellCheckSettings";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog";
 import PropTypes from "prop-types";
@@ -49,6 +50,7 @@ export default class GeneralUserSettingsTab extends React.Component {
 
         this.state = {
             language: languageHandler.getCurrentLanguage(),
+            spellCheckLanguages: [],
             haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl()),
             serverSupportsSeparateAddAndBind: null,
             idServerHasUnsignedTerms: false,
@@ -85,6 +87,15 @@ export default class GeneralUserSettingsTab extends React.Component {
         this._getThreepidState();
     }
 
+    async componentDidMount() {
+        const plaf = PlatformPeg.get();
+        if (plaf) {
+            this.setState({
+                spellCheckLanguages: await plaf.getSpellCheckLanguages(),
+            });
+        }
+    }
+
     componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
     }
@@ -182,6 +193,15 @@ export default class GeneralUserSettingsTab extends React.Component {
         PlatformPeg.get().reload();
     };
 
+    _onSpellCheckLanguagesChange = (languages) => {
+        this.setState({spellCheckLanguages: languages});
+
+        const plaf = PlatformPeg.get();
+        if (plaf) {
+            plaf.setSpellCheckLanguages(languages);
+        }
+    };
+
     _onPasswordChangeError = (err) => {
         // TODO: Figure out a design that doesn't involve replacing the current dialog
         let errMsg = err.error || "";
@@ -303,6 +323,16 @@ export default class GeneralUserSettingsTab extends React.Component {
         );
     }
 
+    _renderSpellCheckSection() {
+        return (
+            <div className="mx_SettingsTab_section">
+                <span className="mx_SettingsTab_subheading">{_t("Spell check dictionaries")}</span>
+                <SpellCheckSettings languages={this.state.spellCheckLanguages}
+                                    onLanguagesChange={this._onSpellCheckLanguagesChange} />
+            </div>
+        );
+    }
+
     _renderDiscoverySection() {
         const SetIdServer = sdk.getComponent("views.settings.SetIdServer");
 
@@ -381,6 +411,9 @@ export default class GeneralUserSettingsTab extends React.Component {
     }
 
     render() {
+        const plaf = PlatformPeg.get();
+        const supportsMultiLanguageSpellCheck = plaf.supportsMultiLanguageSpellCheck();
+
         const discoWarning = this.state.requiredPolicyInfo.hasTerms
             ? <img className='mx_GeneralUserSettingsTab_warningIcon'
                 src={require("../../../../../../res/img/feather-customised/warning-triangle.svg")}
@@ -409,6 +442,7 @@ export default class GeneralUserSettingsTab extends React.Component {
                 {this._renderProfileSection()}
                 {this._renderAccountSection()}
                 {this._renderLanguageSection()}
+                {supportsMultiLanguageSpellCheck ? this._renderSpellCheckSection() : null}
                 { discoverySection }
                 {this._renderIntegrationManagerSection() /* Has its own title */}
                 { accountManagementSection }

src/components/views/spaces/SpaceBasicSettings.tsx

@@ -0,0 +1,120 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useRef, useState} from "react";
+
+import {_t} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import Field from "../elements/Field";
+
+interface IProps {
+    avatarUrl?: string;
+    avatarDisabled?: boolean;
+    name?: string,
+    nameDisabled?: boolean;
+    topic?: string;
+    topicDisabled?: boolean;
+    setAvatar(avatar: File): void;
+    setName(name: string): void;
+    setTopic(topic: string): void;
+}
+
+const SpaceBasicSettings = ({
+    avatarUrl,
+    avatarDisabled = false,
+    setAvatar,
+    name = "",
+    nameDisabled = false,
+    setName,
+    topic = "",
+    topicDisabled = false,
+    setTopic,
+}: IProps) => {
+    const avatarUploadRef = useRef<HTMLInputElement>();
+    const [avatar, setAvatarDataUrl] = useState(avatarUrl); // avatar data url cache
+
+    let avatarSection;
+    if (avatarDisabled) {
+        if (avatar) {
+            avatarSection = <img className="mx_SpaceBasicSettings_avatar" src={avatar} alt="" />;
+        } else {
+            avatarSection = <div className="mx_SpaceBasicSettings_avatar" />;
+        }
+    } else {
+        if (avatar) {
+            avatarSection = <React.Fragment>
+                <AccessibleButton
+                    className="mx_SpaceBasicSettings_avatar"
+                    onClick={() => avatarUploadRef.current?.click()}
+                    element="img"
+                    src={avatar}
+                    alt=""
+                />
+                <AccessibleButton onClick={() => {
+                    avatarUploadRef.current.value = "";
+                    setAvatarDataUrl(undefined);
+                    setAvatar(undefined);
+                }} kind="link" className="mx_SpaceBasicSettings_avatar_remove">
+                    { _t("Delete") }
+                </AccessibleButton>
+            </React.Fragment>;
+        } else {
+            avatarSection = <React.Fragment>
+                <div className="mx_SpaceBasicSettings_avatar" onClick={() => avatarUploadRef.current?.click()} />
+                <AccessibleButton onClick={() => avatarUploadRef.current?.click()} kind="link">
+                    { _t("Upload") }
+                </AccessibleButton>
+            </React.Fragment>;
+        }
+    }
+
+    return <div className="mx_SpaceBasicSettings">
+        <div className="mx_SpaceBasicSettings_avatarContainer">
+            { avatarSection }
+            <input type="file" ref={avatarUploadRef} onChange={(e) => {
+                if (!e.target.files?.length) return;
+                const file = e.target.files[0];
+                setAvatar(file);
+                const reader = new FileReader();
+                reader.onload = (ev) => {
+                    setAvatarDataUrl(ev.target.result as string);
+                };
+                reader.readAsDataURL(file);
+            }} accept="image/*" />
+        </div>
+
+        <Field
+            name="spaceName"
+            label={_t("Name")}
+            autoFocus={true}
+            value={name}
+            onChange={ev => setName(ev.target.value)}
+            disabled={nameDisabled}
+        />
+
+        <Field
+            name="spaceTopic"
+            element="textarea"
+            label={_t("Description")}
+            value={topic}
+            onChange={ev => setTopic(ev.target.value)}
+            rows={3}
+            disabled={topicDisabled}
+        />
+    </div>;
+};
+
+export default SpaceBasicSettings;

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -0,0 +1,175 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useContext, useState} from "react";
+import classNames from "classnames";
+import {EventType, RoomType, RoomCreateTypeField} from "matrix-js-sdk/src/@types/event";
+
+import {_t} from "../../../languageHandler";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {ChevronFace, ContextMenu} from "../../structures/ContextMenu";
+import FormButton from "../elements/FormButton";
+import createRoom, {IStateEvent, Preset} from "../../../createRoom";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import SpaceBasicSettings from "./SpaceBasicSettings";
+import AccessibleButton from "../elements/AccessibleButton";
+import FocusLock from "react-focus-lock";
+
+const SpaceCreateMenuType = ({ title, description, className, onClick }) => {
+    return (
+        <AccessibleButton className={classNames("mx_SpaceCreateMenuType", className)} onClick={onClick}>
+            <h3>{ title }</h3>
+            <span>{ description }</span>
+        </AccessibleButton>
+    );
+};
+
+enum Visibility {
+    Public,
+    Private,
+}
+
+const SpaceCreateMenu = ({ onFinished }) => {
+    const cli = useContext(MatrixClientContext);
+    const [visibility, setVisibility] = useState<Visibility>(null);
+    const [name, setName] = useState("");
+    const [avatar, setAvatar] = useState<File>(null);
+    const [topic, setTopic] = useState<string>("");
+    const [busy, setBusy] = useState<boolean>(false);
+
+    const onSpaceCreateClick = async () => {
+        if (busy) return;
+        setBusy(true);
+        const initialState: IStateEvent[] = [
+            {
+                type: EventType.RoomHistoryVisibility,
+                content: {
+                    "history_visibility": visibility === Visibility.Public ? "world_readable" : "invited",
+                },
+            },
+        ];
+        if (avatar) {
+            const url = await cli.uploadContent(avatar);
+
+            initialState.push({
+                type: EventType.RoomAvatar,
+                content: { url },
+            });
+        }
+        if (topic) {
+            initialState.push({
+                type: EventType.RoomTopic,
+                content: { topic },
+            });
+        }
+
+        try {
+            await createRoom({
+                createOpts: {
+                    preset: visibility === Visibility.Public ? Preset.PublicChat : Preset.PrivateChat,
+                    name,
+                    creation_content: {
+                        // Based on MSC1840
+                        [RoomCreateTypeField]: RoomType.Space,
+                    },
+                    initial_state: initialState,
+                    power_level_content_override: {
+                        // Only allow Admins to write to the timeline to prevent hidden sync spam
+                        events_default: 100,
+                    },
+                },
+                spinner: false,
+                encryption: false,
+                andView: true,
+                inlineErrors: true,
+            });
+
+            onFinished();
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    let body;
+    if (visibility === null) {
+        body = <React.Fragment>
+            <h2>{ _t("Create a space") }</h2>
+            <p>{ _t("Organise rooms into spaces, for just you or anyone") }</p>
+
+            <SpaceCreateMenuType
+                title={_t("Public")}
+                description={_t("Open space for anyone, best for communities")}
+                className="mx_SpaceCreateMenuType_public"
+                onClick={() => setVisibility(Visibility.Public)}
+            />
+            <SpaceCreateMenuType
+                title={_t("Private")}
+                description={_t("Invite only space, best for yourself or teams")}
+                className="mx_SpaceCreateMenuType_private"
+                onClick={() => setVisibility(Visibility.Private)}
+            />
+
+            {/*<p>{ _t("Looking to join an existing space?") }</p>*/}
+        </React.Fragment>;
+    } else {
+        body = <React.Fragment>
+            <AccessibleTooltipButton
+                className="mx_SpaceCreateMenu_back"
+                onClick={() => setVisibility(null)}
+                title={_t("Go back")}
+            />
+
+            <h2>
+                {
+                    visibility === Visibility.Public
+                        ? _t("Personalise your public space")
+                        : _t("Personalise your private space")
+                }
+            </h2>
+            <p>
+                {
+                    _t("Give it a photo, name and description to help you identify it.")
+                } {
+                    _t("You can change these at any point.")
+                }
+            </p>
+
+            <SpaceBasicSettings setAvatar={setAvatar} name={name} setName={setName} topic={topic} setTopic={setTopic} />
+
+            <FormButton
+                label={busy ? _t("Creating...") : _t("Create")}
+                onClick={onSpaceCreateClick}
+                disabled={!name && !busy}
+            />
+        </React.Fragment>;
+    }
+
+    return <ContextMenu
+        left={72}
+        top={62}
+        chevronOffset={0}
+        chevronFace={ChevronFace.None}
+        onFinished={onFinished}
+        wrapperClassName="mx_SpaceCreateMenu_wrapper"
+        managed={false}
+    >
+        <FocusLock returnFocus={true}>
+            { body }
+        </FocusLock>
+    </ContextMenu>;
+}
+
+export default SpaceCreateMenu;

src/components/views/spaces/SpacePanel.tsx

@@ -0,0 +1,238 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useState} from "react";
+import classNames from "classnames";
+import {Room} from "matrix-js-sdk/src/models/room";
+
+import {_t} from "../../../languageHandler";
+import RoomAvatar from "../avatars/RoomAvatar";
+import {useContextMenu} from "../../structures/ContextMenu";
+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 AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import {SpaceNotificationState} from "../../../stores/notifications/SpaceNotificationState";
+import NotificationBadge from "../rooms/NotificationBadge";
+import {
+    RovingAccessibleButton,
+    RovingAccessibleTooltipButton,
+    RovingTabIndexProvider,
+} from "../../../accessibility/RovingTabIndex";
+import {Key} from "../../../Keyboard";
+
+interface IButtonProps {
+    space?: Room;
+    className?: string;
+    selected?: boolean;
+    tooltip?: string;
+    notificationState?: SpaceNotificationState;
+    isNarrow?: boolean;
+    onClick(): void;
+}
+
+const SpaceButton: React.FC<IButtonProps> = ({
+    space,
+    className,
+    selected,
+    onClick,
+    tooltip,
+    notificationState,
+    isNarrow,
+    children,
+}) => {
+    const classes = classNames("mx_SpaceButton", className, {
+        mx_SpaceButton_active: selected,
+        mx_SpaceButton_narrow: isNarrow,
+    });
+
+    let avatar = <div className="mx_SpaceButton_avatarPlaceholder"><div className="mx_SpaceButton_icon" /></div>;
+    if (space) {
+        avatar = <RoomAvatar width={32} height={32} room={space} />;
+    }
+
+    let notifBadge;
+    if (notificationState) {
+        notifBadge = <div className="mx_SpacePanel_badgeContainer">
+            <NotificationBadge forceCount={false} notification={notificationState} />
+        </div>;
+    }
+
+    let button;
+    if (isNarrow) {
+        button = (
+            <RovingAccessibleTooltipButton className={classes} title={tooltip} onClick={onClick} role="treeitem">
+                <div className="mx_SpaceButton_selectionWrapper">
+                    { avatar }
+                    { notifBadge }
+                    { children }
+                </div>
+            </RovingAccessibleTooltipButton>
+        );
+    } else {
+        button = (
+            <RovingAccessibleButton className={classes} onClick={onClick} role="treeitem">
+                <div className="mx_SpaceButton_selectionWrapper">
+                    { avatar }
+                    <span className="mx_SpaceButton_name">{ tooltip }</span>
+                    { notifBadge }
+                    { children }
+                </div>
+            </RovingAccessibleButton>
+        );
+    }
+
+    return <li className={classNames({
+        "mx_SpaceItem": true,
+        "collapsed": isNarrow,
+    })}>
+        { button }
+    </li>;
+}
+
+const useSpaces = (): [Room[], Room | null] => {
+    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];
+};
+
+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 [isPanelCollapsed, setPanelCollapsed] = useState(true);
+
+    const newClasses = classNames("mx_SpaceButton_new", {
+        mx_SpaceButton_newCancel: menuDisplayed,
+    });
+
+    let contextMenu = null;
+    if (menuDisplayed) {
+        contextMenu = <SpaceCreateMenu onFinished={closeMenu} />;
+    }
+
+    const onKeyDown = (ev: React.KeyboardEvent) => {
+        let handled = true;
+
+        switch (ev.key) {
+            case Key.ARROW_UP:
+                onMoveFocus(ev.target as Element, true);
+                break;
+            case Key.ARROW_DOWN:
+                onMoveFocus(ev.target as Element, false);
+                break;
+            default:
+                handled = false;
+        }
+
+        if (handled) {
+            // consume all other keys in context menu
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    };
+
+    const onMoveFocus = (element: Element, up: boolean) => {
+        let descending = false; // are we currently descending or ascending through the DOM tree?
+        let classes: DOMTokenList;
+
+        do {
+            const child = up ? element.lastElementChild : element.firstElementChild;
+            const sibling = up ? element.previousElementSibling : element.nextElementSibling;
+
+            if (descending) {
+                if (child) {
+                    element = child;
+                } else if (sibling) {
+                    element = sibling;
+                } else {
+                    descending = false;
+                    element = element.parentElement;
+                }
+            } else {
+                if (sibling) {
+                    element = sibling;
+                    descending = true;
+                } else {
+                    element = element.parentElement;
+                }
+            }
+
+            if (element) {
+                if (element.classList.contains("mx_ContextualMenu")) { // we hit the top
+                    element = up ? element.lastElementChild : element.firstElementChild;
+                    descending = true;
+                }
+                classes = element.classList;
+            }
+        } while (element && !classes.contains("mx_SpaceButton"));
+
+        if (element) {
+            (element as HTMLElement).focus();
+        }
+    };
+
+    const activeSpaces = activeSpace ? [activeSpace] : [];
+    const expandCollapseButtonTitle = isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel");
+    // TODO drag and drop for re-arranging order
+    return <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
+        {({onKeyDownHandler}) => (
+            <ul
+                className={classNames("mx_SpacePanel", { collapsed: isPanelCollapsed })}
+                onKeyDown={onKeyDownHandler}
+            >
+                <AutoHideScrollbar className="mx_SpacePanel_spaceTreeWrapper">
+                    <div className="mx_SpaceTreeLevel">
+                        <SpaceButton
+                            className="mx_SpaceButton_home"
+                            onClick={() => SpaceStore.instance.setActiveSpace(null)}
+                            selected={!activeSpace}
+                            tooltip={_t("Home")}
+                            notificationState={SpaceStore.instance.getNotificationState(HOME_SPACE)}
+                            isNarrow={isPanelCollapsed}
+                        />
+                        { spaces.map(s => <SpaceItem
+                            key={s.roomId}
+                            space={s}
+                            activeSpaces={activeSpaces}
+                            isPanelCollapsed={isPanelCollapsed}
+                            onExpand={() => setPanelCollapsed(false)}
+                        />) }
+                    </div>
+                    <SpaceButton
+                        className={newClasses}
+                        tooltip={menuDisplayed ? _t("Cancel") : _t("Create a space")}
+                        onClick={menuDisplayed ? closeMenu : openMenu}
+                        isNarrow={isPanelCollapsed}
+                    />
+                </AutoHideScrollbar>
+                <AccessibleTooltipButton
+                    className={classNames("mx_SpacePanel_toggleCollapse", {expanded: !isPanelCollapsed})}
+                    onClick={evt => setPanelCollapsed(!isPanelCollapsed)}
+                    title={expandCollapseButtonTitle}
+                />
+                { contextMenu }
+            </ul>
+        )}
+    </RovingTabIndexProvider>
+};
+
+export default SpacePanel;

src/components/views/spaces/SpacePublicShare.tsx

@@ -0,0 +1,65 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useState} from "react";
+import {Room} from "matrix-js-sdk/src/models/room";
+
+import {_t} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import {copyPlaintext} from "../../../utils/strings";
+import {sleep} from "../../../utils/promise";
+import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
+import {showSpaceInviteDialog} from "../../../RoomInvite";
+
+interface IProps {
+    space: Room;
+    onFinished(): void;
+}
+
+const SpacePublicShare = ({ space, onFinished }: IProps) => {
+    const [copiedText, setCopiedText] = useState(_t("Click to copy"));
+
+    return <div className="mx_SpacePublicShare">
+        <AccessibleButton
+            className="mx_SpacePublicShare_shareButton"
+            onClick={async () => {
+                const permalinkCreator = new RoomPermalinkCreator(space);
+                permalinkCreator.load();
+                const success = await copyPlaintext(permalinkCreator.forRoom());
+                const text = success ? _t("Copied!") : _t("Failed to copy");
+                setCopiedText(text);
+                await sleep(10);
+                if (copiedText === text) { // if the text hasn't changed by another click then clear it after some time
+                    setCopiedText(_t("Click to copy"));
+                }
+            }}
+        >
+            { _t("Share invite link") }
+            <span>{ copiedText }</span>
+        </AccessibleButton>
+        <AccessibleButton
+            className="mx_SpacePublicShare_inviteButton"
+            onClick={() => {
+                showSpaceInviteDialog(space.roomId);
+                onFinished();
+            }}
+        >
+            { _t("Invite by email or username") }
+        </AccessibleButton>
+    </div>;
+};
+
+export default SpacePublicShare;

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -0,0 +1,189 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import classNames from "classnames";
+import {Room} from "matrix-js-sdk/src/models/room";
+
+import RoomAvatar from "../avatars/RoomAvatar";
+import SpaceStore from "../../../stores/SpaceStore";
+import NotificationBadge from "../rooms/NotificationBadge";
+import {RovingAccessibleButton} from "../../../accessibility/roving/RovingAccessibleButton";
+import {RovingAccessibleTooltipButton} from "../../../accessibility/roving/RovingAccessibleTooltipButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IItemProps {
+    space?: Room;
+    activeSpaces: Room[];
+    isNested?: boolean;
+    isPanelCollapsed?: boolean;
+    onExpand?: Function;
+}
+
+interface IItemState {
+    collapsed: boolean;
+    contextMenuPosition: Pick<DOMRect, "right" | "top" | "height">;
+}
+
+export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
+    static contextType = MatrixClientContext;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            collapsed: !props.isNested,   // default to collapsed for root items
+            contextMenuPosition: null,
+        };
+    }
+
+    private toggleCollapse(evt) {
+        if (this.props.onExpand && this.state.collapsed) {
+            this.props.onExpand();
+        }
+        this.setState({collapsed: !this.state.collapsed});
+        // don't bubble up so encapsulating button for space
+        // doesn't get triggered
+        evt.stopPropagation();
+    }
+
+    private onContextMenu = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({
+            contextMenuPosition: {
+                right: ev.clientX,
+                top: ev.clientY,
+                height: 0,
+            },
+        });
+    }
+
+    private onClick = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        SpaceStore.instance.setActiveSpace(this.props.space);
+    };
+
+    render() {
+        const {space, activeSpaces, isNested} = this.props;
+
+        const forceCollapsed = this.props.isPanelCollapsed;
+        const isNarrow = this.props.isPanelCollapsed;
+        const collapsed = this.state.collapsed || forceCollapsed;
+
+        const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId);
+        const isActive = activeSpaces.includes(space);
+        const itemClasses = classNames({
+            "mx_SpaceItem": true,
+            "collapsed": collapsed,
+            "hasSubSpaces": childSpaces && childSpaces.length,
+        });
+        const classes = classNames("mx_SpaceButton", {
+            mx_SpaceButton_active: isActive,
+            mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition,
+            mx_SpaceButton_narrow: isNarrow,
+        });
+        const notificationState = SpaceStore.instance.getNotificationState(space.roomId);
+        const childItems = childSpaces && !collapsed ? <SpaceTreeLevel
+            spaces={childSpaces}
+            activeSpaces={activeSpaces}
+            isNested={true}
+        /> : null;
+        let notifBadge;
+        if (notificationState) {
+            notifBadge = <div className="mx_SpacePanel_badgeContainer">
+                <NotificationBadge forceCount={false} notification={notificationState} />
+            </div>;
+        }
+
+        const avatarSize = isNested ? 24 : 32;
+
+        const toggleCollapseButton = childSpaces && childSpaces.length ?
+            <button
+                className="mx_SpaceButton_toggleCollapse"
+                onClick={evt => this.toggleCollapse(evt)}
+            /> : null;
+
+        let button;
+        if (isNarrow) {
+            button = (
+                <RovingAccessibleTooltipButton
+                    className={classes}
+                    title={space.name}
+                    onClick={this.onClick}
+                    onContextMenu={this.onContextMenu}
+                    forceHide={!!this.state.contextMenuPosition}
+                    role="treeitem"
+                >
+                    { toggleCollapseButton }
+                    <div className="mx_SpaceButton_selectionWrapper">
+                        <RoomAvatar width={avatarSize} height={avatarSize} room={space} />
+                        { notifBadge }
+                    </div>
+                </RovingAccessibleTooltipButton>
+            );
+        } else {
+            button = (
+                <RovingAccessibleButton
+                    className={classes}
+                    onClick={this.onClick}
+                    onContextMenu={this.onContextMenu}
+                    role="treeitem"
+                >
+                    { toggleCollapseButton }
+                    <div className="mx_SpaceButton_selectionWrapper">
+                        <RoomAvatar width={avatarSize} height={avatarSize} room={space} />
+                        <span className="mx_SpaceButton_name">{ space.name }</span>
+                        { notifBadge }
+                    </div>
+                </RovingAccessibleButton>
+            );
+        }
+
+        return (
+            <li className={itemClasses}>
+                { button }
+                { childItems }
+            </li>
+        );
+    }
+}
+
+interface ITreeLevelProps {
+    spaces: Room[];
+    activeSpaces: Room[];
+    isNested?: boolean;
+}
+
+const SpaceTreeLevel: React.FC<ITreeLevelProps> = ({
+    spaces,
+    activeSpaces,
+    isNested,
+}) => {
+    return <ul className="mx_SpaceTreeLevel">
+        {spaces.map(s => {
+            return (<SpaceItem
+                key={s.roomId}
+                activeSpaces={activeSpaces}
+                space={s}
+                isNested={isNested}
+            />);
+        })}
+    </ul>;
+}
+
+export default SpaceTreeLevel;

src/components/views/voip/CallView.tsx

@@ -518,7 +518,7 @@ export default class CallView extends React.Component<IProps, IState> {
             }
 
             // if we're fullscreen, we don't want to set a maxHeight on the video element.
-            const maxVideoHeight = getFullScreenElement() ? null : (
+            const maxVideoHeight = getFullScreenElement() || !this.props.maxVideoHeight ? null : (
                 this.props.maxVideoHeight - (HEADER_HEIGHT + BOTTOM_PADDING + BOTTOM_MARGIN_TOP_BOTTOM)
             );
             contentView = <div className={containerClasses}