Merge branch 'develop' into resizable-call-view

2024-11-23 17:56:01 +03:00 · 2021-03-22 07:57:52 +01:00 · 2021-03-22 07:57:52 +01:00 · 4bb279b632
commit 4bb279b632
parent 9a2036c212 427f649be6
67 changed files with 447 additions and 271 deletions
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@ -395,6 +395,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
    border: 1px solid $accent-color;
    color: $accent-color;
    background-color: $button-secondary-bg-color;
+    font-family: inherit;
 }

 .mx_Dialog button:last-child {
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@ -19,7 +19,8 @@ $roomListCollapsedWidth: 68px;

 .mx_LeftPanel {
    background-color: $roomlist-bg-color;
-    min-width: 260px;
+    // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
+    min-width: 206px;
    max-width: 50%;

    // Create a row-based flexbox for the GroupFilterPanel and the room list
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@ -66,7 +66,7 @@ limitations under the License.
 }

 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
    background-color: $primary-bg-color;

    flex: 1 1 0;
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@ -16,9 +16,8 @@ limitations under the License.

 $topLevelHeight: 32px;
 $nestedHeight: 24px;
-$gutterSize: 17px;
-$activeStripeSize: 4px;
-$activeBorderTransparentGap: 2px;
+$gutterSize: 16px;
+$activeBorderTransparentGap: 1px;

 $activeBackgroundColor: $roomtile-selected-bg-color;
 $activeBorderColor: $secondary-fg-color;
@ -36,6 +35,7 @@ $activeBorderColor: $secondary-fg-color;

    .mx_SpacePanel_spaceTreeWrapper {
        flex: 1;
+        overflow-y: scroll;
    }

    .mx_SpacePanel_toggleCollapse {
@ -63,21 +63,26 @@ $activeBorderColor: $secondary-fg-color;
    }

    .mx_AutoHideScrollbar {
-        padding: 16px 12px 16px 0;
+        padding: 16px 0;
    }

    .mx_SpaceButton_toggleCollapse {
        cursor: pointer;
    }

-    .mx_SpaceItem.collapsed {
-        .mx_SpaceButton {
-            .mx_NotificationBadge {
-                right: -4px;
-                top: -4px;
-            }
-        }
+    .mx_SpaceTreeLevel {
+        display: flex;
+        flex-direction: column;
+        max-width: 250px;
+        flex-grow: 1;
+    }

+    .mx_SpaceItem {
+        display: inline-flex;
+        flex-flow: wrap;
+    }
+
+    .mx_SpaceItem.collapsed {
        & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
            transform: rotate(-90deg);
        }
@ -89,34 +94,43 @@ $activeBorderColor: $secondary-fg-color;

    .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
        margin-left: $gutterSize;
+        min-width: 40px;
    }

    .mx_SpaceButton {
        border-radius: 8px;
-        position: relative;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
-        padding: 4px;
+        padding: 4px 4px 4px 0;
+        width: 100%;

        &.mx_SpaceButton_active {
            &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
                background-color: $activeBackgroundColor;
-                border-radius: 8px;
            }

-            &.mx_SpaceButton_narrow {
-                .mx_BaseAvatar, .mx_SpaceButton_avatarPlaceholder {
-                    border: 2px $activeBorderColor solid;
-                    border-radius: 11px;
-                }
+            &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
+                padding: $activeBorderTransparentGap;
+                border: 3px $activeBorderColor solid;
            }
        }

        .mx_SpaceButton_selectionWrapper {
+            position: relative;
            display: flex;
            flex: 1;
            align-items: center;
+            border-radius: 12px;
+            padding: 4px;
+        }
+
+        &:not(.mx_SpaceButton_narrow) {
+            .mx_SpaceButton_selectionWrapper {
+                width: 100%;
+                padding-right: 16px;
+                overflow: hidden;
+            }
        }

        .mx_SpaceButton_name {
@ -124,7 +138,6 @@ $activeBorderColor: $secondary-fg-color;
            margin-left: 8px;
            white-space: nowrap;
            display: block;
-            max-width: 150px;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-right: 8px;
@ -133,8 +146,10 @@ $activeBorderColor: $secondary-fg-color;
        }

        .mx_SpaceButton_toggleCollapse {
-            width: calc($gutterSize - $activeStripeSize);
-            margin-left: 1px;
+            width: $gutterSize;
+            // negative margin to place it correctly even with the complex
+            // 4px selection border each space button has when active
+            margin-right: -4px;
            height: 20px;
            mask-position: center;
            mask-size: 20px;
@ -172,11 +187,6 @@ $activeBorderColor: $secondary-fg-color;
            }
        }

-        .mx_SpaceButton_avatarPlaceholder {
-            border: $activeBorderTransparentGap transparent solid;
-            padding: $activeBorderTransparentGap;
-        }
-
        &.mx_SpaceButton_new .mx_SpaceButton_icon {
            background-color: $accent-color;
            transition: all .1s ease-in-out; // TODO transition
@ -196,21 +206,8 @@ $activeBorderColor: $secondary-fg-color;
            }
        }

-        .mx_BaseAvatar {
-            /* moving the border-radius to this element from _image
-            element so we can add a border to it without the initials being displaced */
-            overflow: hidden;
-            border: 2px transparent solid;
-            padding: $activeBorderTransparentGap;
-
-            .mx_BaseAvatar_initial {
-                top: $activeBorderTransparentGap;
-                left: $activeBorderTransparentGap;
-            }
-
-            .mx_BaseAvatar_image {
-                border-radius: 8px;
-            }
+        .mx_BaseAvatar_image {
+            border-radius: 8px;
        }

        .mx_SpaceButton_menuButton {
@ -219,8 +216,9 @@ $activeBorderColor: $secondary-fg-color;
            height: 20px;
            margin-top: auto;
            margin-bottom: auto;
-            position: relative;
            display: none;
+            position: absolute;
+            right: 4px;

            &::before {
                top: 2px;
@ -239,9 +237,8 @@ $activeBorderColor: $secondary-fg-color;
    }

    .mx_SpacePanel_badgeContainer {
+        position: absolute;
        height: 16px;
-        // don't set width so that it takes no space when there is no badge to show
-        margin: auto 0; // vertically align

        // Create a flexbox to make aligning dot badges easier
        display: flex;
@ -261,14 +258,25 @@ $activeBorderColor: $secondary-fg-color;
    &.collapsed {
        .mx_SpaceButton {
            .mx_SpacePanel_badgeContainer {
-                position: absolute;
-                right: 0px;
-                top: 2px;
+                right: -3px;
+                top: -3px;
+            }
+
+            &.mx_SpaceButton_active .mx_SpacePanel_badgeContainer {
+                // when we draw the selection border we move the relative bounds of our parent
+                // so update our position within the bounds of the parent to maintain position overall
+                right: -6px;
+                top: -6px;
            }
        }
    }

    &:not(.collapsed) {
+        .mx_SpacePanel_badgeContainer {
+            position: absolute;
+            right: 4px;
+        }
+
        .mx_SpaceButton:hover,
        .mx_SpaceButton:focus-within,
        .mx_SpaceButton_hasMenuOpen {
--- a/res/css/structures/_SpaceRoomDirectory.scss
+++ b/res/css/structures/_SpaceRoomDirectory.scss
@ -132,6 +132,7 @@ limitations under the License.
                height: min-content;
                margin-left: auto;
                margin-right: 16px;
+                display: inline-flex;
            }
        }

--- a/res/css/structures/auth/_CompleteSecurity.scss
+++ b/res/css/structures/auth/_CompleteSecurity.scss
@ -26,50 +26,6 @@ limitations under the License.
    position: relative;
 }

-.mx_CompleteSecurity_clients {
-    width: max-content;
-    margin: 36px auto 0;
-
-    .mx_CompleteSecurity_clients_desktop, .mx_CompleteSecurity_clients_mobile {
-        position: relative;
-        width: 160px;
-        text-align: center;
-        padding-top: 64px;
-        display: inline-block;
-
-        &::before {
-            content: '';
-            position: absolute;
-            height: 48px;
-            width: 48px;
-            left: 56px;
-            top: 0;
-            background-color: $muted-fg-color;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-        }
-    }
-
-    .mx_CompleteSecurity_clients_desktop {
-        margin-right: 56px;
-    }
-
-    .mx_CompleteSecurity_clients_desktop::before {
-        mask-image: url('$(res)/img/feather-customised/monitor.svg');
-    }
-
-    .mx_CompleteSecurity_clients_mobile::before {
-        mask-image: url('$(res)/img/feather-customised/smartphone.svg');
-    }
-
-    p {
-        margin-top: 16px;
-        font-size: $font-12px;
-        color: $muted-fg-color;
-        text-align: center;
-    }
-}
-
 .mx_CompleteSecurity_heroIcon {
    width: 128px;
    height: 128px;
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@ -189,6 +189,10 @@ limitations under the License.
        mask-image: url('$(res)/img/element-icons/settings.svg');
    }

+    .mx_RoomTile_iconInvite::before {
+        mask-image: url('$(res)/img/element-icons/room/invite.svg');
+    }
+
    .mx_RoomTile_iconSignOut::before {
        mask-image: url('$(res)/img/element-icons/leave.svg');
    }
--- a/res/img/feather-customised/monitor.svg
+++ b/res/img/feather-customised/monitor.svg
@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V15C22 16.1046 21.1046 17 20 17H4C2.89543 17 2 16.1046 2 15V5Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 21H16" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 17V21" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/res/img/feather-customised/smartphone.svg
+++ b/res/img/feather-customised/smartphone.svg
@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C5 2.89543 5.89543 2 7 2H17C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V4Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="12" cy="18" r="1" fill="#2E2F32"/>
-</svg>
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@ -788,6 +788,11 @@ export default class CallHandler {
                // don't remove the call yet: let the hangup event handler do it (otherwise it will throw
                // the hangup event away)
                break;
+            case 'hangup_all':
+                for (const call of this.calls.values()) {
+                    call.hangup(CallErrorCode.UserHangup, false);
+                }
+                break;
            case 'answer': {
                if (!this.calls.has(payload.room_id)) {
                    return; // no call to answer
--- a/src/CallMediaHandler.js
+++ b/src/CallMediaHandler.js
@ -14,9 +14,9 @@
 limitations under the License.
 */

-import * as Matrix from 'matrix-js-sdk';
 import SettingsStore from "./settings/SettingsStore";
 import {SettingLevel} from "./settings/SettingLevel";
+import {setMatrixCallAudioInput, setMatrixCallAudioOutput, setMatrixCallVideoInput} from "matrix-js-sdk/src/matrix";

 export default {
    hasAnyLabeledDevices: async function() {
@ -54,24 +54,24 @@ export default {
        const audioDeviceId = SettingsStore.getValue("webrtc_audioinput");
        const videoDeviceId = SettingsStore.getValue("webrtc_videoinput");

-        Matrix.setMatrixCallAudioOutput(audioOutDeviceId);
-        Matrix.setMatrixCallAudioInput(audioDeviceId);
-        Matrix.setMatrixCallVideoInput(videoDeviceId);
+        setMatrixCallAudioOutput(audioOutDeviceId);
+        setMatrixCallAudioInput(audioDeviceId);
+        setMatrixCallVideoInput(videoDeviceId);
    },

    setAudioOutput: function(deviceId) {
        SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId);
-        Matrix.setMatrixCallAudioOutput(deviceId);
+        setMatrixCallAudioOutput(deviceId);
    },

    setAudioInput: function(deviceId) {
        SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
-        Matrix.setMatrixCallAudioInput(deviceId);
+        setMatrixCallAudioInput(deviceId);
    },

    setVideoInput: function(deviceId) {
        SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId);
-        Matrix.setMatrixCallVideoInput(deviceId);
+        setMatrixCallVideoInput(deviceId);
    },

    getAudioOutput: function() {
--- a/src/IdentityAuthClient.js
+++ b/src/IdentityAuthClient.js
@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { createClient, SERVICE_TYPES } from 'matrix-js-sdk';
+import { SERVICE_TYPES } from 'matrix-js-sdk/src/service-types';
+import { createClient } from 'matrix-js-sdk/src/matrix';

 import {MatrixClientPeg} from './MatrixClientPeg';
 import Modal from './Modal';
--- a/src/Lifecycle.ts
+++ b/src/Lifecycle.ts
@ -17,8 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-// @ts-ignore - XXX: tsc doesn't like this: our js-sdk imports are complex so this isn't surprising
-import Matrix from 'matrix-js-sdk';
+import { createClient } from 'matrix-js-sdk/src/matrix';
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import {decryptAES, encryptAES} from "matrix-js-sdk/src/crypto/aes";
@ -219,7 +218,7 @@ export function attemptTokenLogin(
            button: _t("Try again"),
            onFinished: tryAgain => {
                if (tryAgain) {
-                    const cli = Matrix.createClient({
+                    const cli = createClient({
                        baseUrl: homeserver,
                        idBaseUrl: identityServer,
                    });
@ -276,7 +275,7 @@ function registerAsGuest(
    console.log(`Doing guest login on ${hsUrl}`);

    // create a temporary MatrixClient to do the login
-    const client = Matrix.createClient({
+    const client = createClient({
        baseUrl: hsUrl,
    });

--- a/src/Login.ts
+++ b/src/Login.ts
@ -19,7 +19,7 @@ limitations under the License.
 */

 // @ts-ignore - XXX: tsc doesn't like this: our js-sdk imports are complex so this isn't surprising
-import Matrix from "matrix-js-sdk";
+import {createClient} from "matrix-js-sdk/src/matrix";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { IMatrixClientCreds } from "./MatrixClientPeg";
 import SecurityCustomisations from "./customisations/Security";
@ -115,7 +115,7 @@ export default class Login {
     */
    public createTemporaryClient(): MatrixClient {
        if (this.tempClient) return this.tempClient; // use memoization
-        return this.tempClient = Matrix.createClient({
+        return this.tempClient = createClient({
            baseUrl: this.hsUrl,
            idBaseUrl: this.isUrl,
        });
@ -210,7 +210,7 @@ export async function sendLoginRequest(
    loginType: string,
    loginParams: ILoginParams,
 ): Promise<IMatrixClientCreds> {
-    const client = Matrix.createClient({
+    const client = createClient({
        baseUrl: hsUrl,
        idBaseUrl: isUrl,
    });
--- a/src/MatrixClientPeg.ts
+++ b/src/MatrixClientPeg.ts
@ -261,7 +261,7 @@ class _MatrixClientPeg implements IMatrixClientPeg {
    }

    public getHomeserverName(): string {
-        const matches = /^@.+:(.+)$/.exec(this.matrixClient.credentials.userId);
+        const matches = /^@[^:]+:(.+)$/.exec(this.matrixClient.credentials.userId);
        if (matches === null || matches.length < 1) {
            throw new Error("Failed to derive homeserver name from user ID!");
        }
--- a/src/PasswordReset.js
+++ b/src/PasswordReset.js
@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import * as Matrix from 'matrix-js-sdk';
+import { createClient } from 'matrix-js-sdk/src/matrix';
 import { _t } from './languageHandler';

 /**
@ -32,7 +32,7 @@ export default class PasswordReset {
     * @param {string} identityUrl The URL to the IS which has linked the email -> mxid mapping.
     */
    constructor(homeserverUrl, identityUrl) {
-        this.client = Matrix.createClient({
+        this.client = createClient({
            baseUrl: homeserverUrl,
            idBaseUrl: identityUrl,
        });
--- a/src/Resend.js
+++ b/src/Resend.js
@ -17,7 +17,7 @@ limitations under the License.

 import {MatrixClientPeg} from './MatrixClientPeg';
 import dis from './dispatcher/dispatcher';
-import { EventStatus } from 'matrix-js-sdk';
+import { EventStatus } from 'matrix-js-sdk/src/models/event';

 export default class Resend {
    static resendUnsentEvents(room) {
--- a/src/ScalarAuthClient.js
+++ b/src/ScalarAuthClient.js
@ -21,9 +21,9 @@ import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
 import {MatrixClientPeg} from "./MatrixClientPeg";
 import request from "browser-request";

-import * as Matrix from 'matrix-js-sdk';
 import SdkConfig from "./SdkConfig";
 import {WidgetType} from "./widgets/WidgetType";
+import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";

 // The version of the integration manager API we're intending to work with
 const imApiVersion = "1.1";
@ -153,7 +153,7 @@ export default class ScalarAuthClient {
                parsedImRestUrl.path = '';
                parsedImRestUrl.pathname = '';
                return startTermsFlow([new Service(
-                    Matrix.SERVICE_TYPES.IM,
+                    SERVICE_TYPES.IM,
                    parsedImRestUrl.format(),
                    token,
                )], this.termsInteractionCallback).then(() => {
--- a/src/ScalarMessaging.js
+++ b/src/ScalarMessaging.js
@ -237,7 +237,7 @@ Example:
 */

 import {MatrixClientPeg} from './MatrixClientPeg';
-import { MatrixEvent } from 'matrix-js-sdk';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import dis from './dispatcher/dispatcher';
 import WidgetUtils from './utils/WidgetUtils';
 import RoomViewStore from './stores/RoomViewStore';
--- a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
@ -19,7 +19,7 @@ import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../../languageHandler';

-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 import * as MegolmExportEncryption from '../../../../utils/MegolmExportEncryption';
 import * as sdk from '../../../../index';

--- a/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js
@ -17,7 +17,7 @@ limitations under the License.
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';

-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 import * as MegolmExportEncryption from '../../../../utils/MegolmExportEncryption';
 import * as sdk from '../../../../index';
 import { _t } from '../../../../languageHandler';
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';

-import {Filter} from 'matrix-js-sdk';
+import {Filter} from 'matrix-js-sdk/src/filter';
 import * as sdk from '../../index';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import EventIndexPeg from "../../indexing/EventIndexPeg";
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@ -35,7 +35,7 @@ import GroupStore from '../../stores/GroupStore';
 import FlairStore from '../../stores/FlairStore';
 import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import {makeGroupPermalink, makeUserPermalink} from "../../utils/permalinks/Permalinks";
-import {Group} from "matrix-js-sdk";
+import {Group} from "matrix-js-sdk/src/models/group";
 import {allSettled, sleep} from "../../utils/promise";
 import RightPanelStore from "../../stores/RightPanelStore";
 import AutoHideScrollbar from "./AutoHideScrollbar";
--- a/src/components/structures/InteractiveAuth.js
+++ b/src/components/structures/InteractiveAuth.js
@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {InteractiveAuth} from "matrix-js-sdk";
+import {InteractiveAuth} from "matrix-js-sdk/src/interactive-auth";
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';

--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@ -38,7 +38,6 @@ import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import RoomListNumResults from "../views/rooms/RoomListNumResults";
 import LeftPanelWidget from "./LeftPanelWidget";
-import SpacePanel from "../views/spaces/SpacePanel";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../customisations/Media";

@ -392,11 +391,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {

    public render(): React.ReactNode {
        let leftLeftPanel;
-        // Currently TagPanel.enableTagPanel is disabled when Legacy Communities are disabled so for now
-        // ignore it and force the rendering of SpacePanel if that Labs flag is enabled.
-        if (SettingsStore.getValue("feature_spaces")) {
-            leftLeftPanel = <SpacePanel />;
-        } else if (this.state.showGroupFilterPanel) {
+        if (this.state.showGroupFilterPanel) {
            leftLeftPanel = (
                <div className="mx_LeftPanel_GroupFilterPanelContainer">
                    <GroupFilterPanel />
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@ -56,6 +56,7 @@ import Modal from "../../Modal";
 import { ICollapseConfig } from "../../resizer/distributors/collapse";
 import HostSignupContainer from '../views/host_signup/HostSignupContainer';
 import { IOpts } from "../../createRoom";
+import SpacePanel from "../views/spaces/SpacePanel";
 import {replaceableComponent} from "../../utils/replaceableComponent";

 // We need to fetch each pinned message individually (if we don't already have it)
@ -229,21 +230,15 @@ class LoggedInView extends React.Component<IProps, IState> {
        let size;
        let collapsed;
        const collapseConfig: ICollapseConfig = {
-            // TODO: the space panel currently does not have a fixed width,
-            // just the headers at each level have a max-width of 150px
-            // Taking 222px for the space panel for now,
-            // so this will look slightly off for now,
-            // depending on the depth of your space tree.
-            // To fix this, we'll need to turn toggleSize
-            // into a callback so it can be measured when starting the resize operation
-            toggleSize: 222 + 68,
+            // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
+            toggleSize: 206 - 50,
            onCollapsed: (_collapsed) => {
                collapsed = _collapsed;
                if (_collapsed) {
-                    dis.dispatch({action: "hide_left_panel"}, true);
+                    dis.dispatch({action: "hide_left_panel"});
                    window.localStorage.setItem("mx_lhs_size", '0');
                } else {
-                    dis.dispatch({action: "show_left_panel"}, true);
+                    dis.dispatch({action: "show_left_panel"});
                }
            },
            onResized: (_size) => {
@ -670,13 +665,6 @@ class LoggedInView extends React.Component<IProps, IState> {
            bodyClasses += ' mx_MatrixChat_useCompactLayout';
        }

-        const leftPanel = (
-            <LeftPanel
-                isMinimized={this.props.collapseLhs || false}
-                resizeNotifier={this.props.resizeNotifier}
-            />
-        );
-
        return (
            <MatrixClientContext.Provider value={this._matrixClient}>
                <div
@ -688,7 +676,11 @@ class LoggedInView extends React.Component<IProps, IState> {
                    <ToastContainer />
                    <DragDropContext onDragEnd={this._onDragEnd}>
                        <div ref={this._resizeContainer} className={bodyClasses}>
-                            { leftPanel }
+                            { SettingsStore.getValue("feature_spaces") ? <SpacePanel /> : null }
+                            <LeftPanel
+                                isMinimized={this.props.collapseLhs || false}
+                                resizeNotifier={this.props.resizeNotifier}
+                            />
                            <ResizeHandle />
                            { pageElement }
                        </div>
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@ -1,8 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2017-2019 New Vector 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.
@ -18,8 +15,7 @@ limitations under the License.
 */

 import React, { createRef } from 'react';
-// @ts-ignore - XXX: no idea why this import fails
-import * as Matrix from "matrix-js-sdk";
+import { createClient } from "matrix-js-sdk/src/matrix";
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@ -82,9 +78,12 @@ import {UIFeature} from "../../settings/UIFeature";
 import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
 import DialPadModal from "../views/voip/DialPadModal";
 import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
+import { shouldUseLoginForWelcome } from "../../utils/pages";
 import SpaceStore from "../../stores/SpaceStore";
 import SpaceRoomDirectory from "./SpaceRoomDirectory";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import RoomListStore from "../../stores/room-list/RoomListStore";
+import {RoomUpdateCause} from "../../stores/room-list/models";

 /** constants for MatrixChat.state.view */
 export enum Views {
@ -582,6 +581,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                }
                break;
            case 'logout':
+                dis.dispatch({action: "hangup_all"});
                Lifecycle.logout();
                break;
            case 'require_registration':
@ -606,12 +606,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                if (payload.screenAfterLogin) {
                    this.screenAfterLogin = payload.screenAfterLogin;
                }
-                this.setStateForNewView({
-                    view: Views.LOGIN,
-                });
-                this.notifyNewScreen('login');
-                ThemeController.isLogin = true;
-                this.themeWatcher.recheck();
+                this.viewLogin();
                break;
            case 'start_password_recovery':
                this.setStateForNewView({
@ -975,6 +970,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
    }

    private viewWelcome() {
+        if (shouldUseLoginForWelcome(SdkConfig.get())) {
+            return this.viewLogin();
+        }
        this.setStateForNewView({
            view: Views.WELCOME,
        });
@ -983,6 +981,16 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
        this.themeWatcher.recheck();
    }

+    private viewLogin(otherState?: any) {
+        this.setStateForNewView({
+            view: Views.LOGIN,
+            ...otherState,
+        });
+        this.notifyNewScreen('login');
+        ThemeController.isLogin = true;
+        this.themeWatcher.recheck();
+    }
+
    private viewHome(justRegistered = false) {
        // The home page requires the "logged in" view, so we'll set that.
        this.setStateForNewView({
@ -1139,11 +1147,17 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
    }

    private forgetRoom(roomId: string) {
+        const room = MatrixClientPeg.get().getRoom(roomId);
        MatrixClientPeg.get().forget(roomId).then(() => {
            // Switch to home page if we're currently viewing the forgotten room
            if (this.state.currentRoomId === roomId) {
                dis.dispatch({ action: "view_home_page" });
            }
+
+            // We have to manually update the room list because the forgotten room will not
+            // be notified to us, therefore the room list will have no other way of knowing
+            // the room is forgotten.
+            RoomListStore.instance.manualRoomUpdate(room, RoomUpdateCause.RoomRemoved);
        }).catch((err) => {
            const errCode = err.errcode || _td("unknown error code");
            Modal.createTrackedDialog("Failed to forget room", '', ErrorDialog, {
@ -1298,17 +1312,13 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     * Called when the session is logged out
     */
    private onLoggedOut() {
-        this.notifyNewScreen('login');
-        this.setStateForNewView({
-            view: Views.LOGIN,
+        this.viewLogin({
            ready: false,
            collapseLhs: false,
            currentRoomId: null,
        });
        this.subTitleStatus = '';
        this.setPageSubtitle();
-        ThemeController.isLogin = true;
-        this.themeWatcher.recheck();
    }

    /**
@ -1648,7 +1658,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
            let cli = MatrixClientPeg.get();
            if (!cli) {
                const {hsUrl, isUrl} = this.props.serverConfig;
-                cli = Matrix.createClient({
+                cli = createClient({
                    baseUrl: hsUrl,
                    idBaseUrl: isUrl,
                });
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@ -23,7 +23,6 @@ import classNames from 'classnames';
 import shouldHideEvent from '../../shouldHideEvent';
 import {wantsDateSeparator} from '../../DateUtils';
 import * as sdk from '../../index';
-import dis from "../../dispatcher/dispatcher";

 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
@ -210,13 +209,11 @@ export default class MessagePanel extends React.Component {

    componentDidMount() {
        this._isMounted = true;
-        this.dispatcherRef = dis.register(this.onAction);
    }

    componentWillUnmount() {
        this._isMounted = false;
        SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
-        dis.unregister(this.dispatcherRef);
    }

    componentDidUpdate(prevProps, prevState) {
@ -229,14 +226,6 @@ export default class MessagePanel extends React.Component {
        }
    }

-    onAction = (payload) => {
-        switch (payload.action) {
-            case "scroll_to_bottom":
-                this.scrollToBottom();
-                break;
-        }
-    }
-
    onShowTypingNotificationsChange = () => {
        this.setState({
            showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
@ -1038,6 +1027,97 @@ class CreationGrouper {
    }
 }

+class RedactionGrouper {
+    static canStartGroup = function(panel, ev) {
+        return panel._shouldShowEvent(ev) && ev.isRedacted();
+    }
+
+    constructor(panel, ev, prevEvent, lastShownEvent) {
+        this.panel = panel;
+        this.readMarker = panel._readMarkerForEvent(
+            ev.getId(),
+            ev === lastShownEvent,
+        );
+        this.events = [ev];
+        this.prevEvent = prevEvent;
+        this.lastShownEvent = lastShownEvent;
+    }
+
+    shouldGroup(ev) {
+        if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
+            return false;
+        }
+        return ev.isRedacted();
+    }
+
+    add(ev) {
+        this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
+            ev.getId(),
+            ev === this.lastShownEvent,
+        );
+        this.events.push(ev);
+    }
+
+    getTiles() {
+        if (!this.events || !this.events.length) return [];
+
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const EventListSummary = sdk.getComponent('views.elements.EventListSummary');
+
+        const panel = this.panel;
+        const ret = [];
+        const lastShownEvent = this.lastShownEvent;
+
+        if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
+            const ts = this.events[0].getTs();
+            ret.push(
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+            );
+        }
+
+        const key = "redactioneventlistsummary-" + (
+            this.prevEvent ? this.events[0].getId() : "initial"
+        );
+
+        const senders = new Set();
+        let eventTiles = this.events.map((e) => {
+            senders.add(e.sender);
+            // In order to prevent DateSeparators from appearing in the expanded form,
+            // render each member event as if the previous one was itself.
+            // This way, the timestamp of the previous event === the
+            // timestamp of the current event, and no DateSeparator is inserted.
+            return panel._getTilesForEvent(e, e, e === lastShownEvent);
+        }).reduce((a, b) => a.concat(b), []);
+
+        if (eventTiles.length === 0) {
+            eventTiles = null;
+        }
+
+        ret.push(
+            <EventListSummary
+                key={key}
+                threshold={2}
+                events={this.events}
+                onToggle={panel._onHeightChanged} // Update scroll state
+                summaryMembers={Array.from(senders)}
+                summaryText={_t("%(count)s messages deleted.", { count: eventTiles.length })}
+            >
+                { eventTiles }
+            </EventListSummary>,
+        );
+
+        if (this.readMarker) {
+            ret.push(this.readMarker);
+        }
+
+        return ret;
+    }
+
+    getNewPrevEvent() {
+        return this.events[0];
+    }
+}
+
 // Wrap consecutive member events in a ListSummary, ignore if redacted
 class MemberGrouper {
    static canStartGroup = function(panel, ev) {
@ -1148,4 +1228,4 @@ class MemberGrouper {
 }

 // all the grouper classes that we use
-const groupers = [CreationGrouper, MemberGrouper];
+const groupers = [CreationGrouper, MemberGrouper, RedactionGrouper];
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@ -16,7 +16,6 @@ limitations under the License.

 import React from 'react';
 import PropTypes from 'prop-types';
-import Matrix from 'matrix-js-sdk';
 import { _t, _td } from '../../languageHandler';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import Resend from '../../Resend';
@ -24,6 +23,7 @@ import dis from '../../dispatcher/dispatcher';
 import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
 import {Action} from "../../dispatcher/actions";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import {EventStatus} from "matrix-js-sdk/src/models/event";

 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@ -32,7 +32,7 @@ const STATUS_BAR_EXPANDED_LARGE = 2;
 function getUnsentMessages(room) {
    if (!room) { return []; }
    return room.getPendingEvents().filter(function(ev) {
-        return ev.status === Matrix.EventStatus.NOT_SENT;
+        return ev.status === EventStatus.NOT_SENT;
    });
 }

--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@ -22,8 +22,8 @@ import {LayoutPropType} from "../../settings/Layout";
 import React, {createRef} from 'react';
 import ReactDOM from "react-dom";
 import PropTypes from 'prop-types';
-import {EventTimeline} from "matrix-js-sdk";
-import * as Matrix from "matrix-js-sdk";
+import {EventTimeline} from "matrix-js-sdk/src/models/event-timeline";
+import {TimelineWindow} from "matrix-js-sdk/src/timeline-window";
 import { _t } from '../../languageHandler';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import UserActivity from "../../UserActivity";
@ -463,6 +463,9 @@ class TimelinePanel extends React.Component {
                }
            });
        }
+        if (payload.action === "scroll_to_bottom") {
+            this.jumpToLiveTimeline();
+        }
    };

    onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
@ -1007,7 +1010,7 @@ class TimelinePanel extends React.Component {
     * returns a promise which will resolve when the load completes.
     */
    _loadTimeline(eventId, pixelOffset, offsetBase) {
-        this._timelineWindow = new Matrix.TimelineWindow(
+        this._timelineWindow = new TimelineWindow(
            MatrixClientPeg.get(), this.props.timelineSet,
            {windowLimit: this.props.timelineCap});

--- a/src/components/structures/UserView.js
+++ b/src/components/structures/UserView.js
@ -17,13 +17,14 @@ limitations under the License.

 import React from "react";
 import PropTypes from "prop-types";
-import Matrix from "matrix-js-sdk";
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import * as sdk from "../../index";
 import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
 import HomePage from "./HomePage";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";

@replaceableComponent("structures.UserView")
 export default class UserView extends React.Component {
@ -68,8 +69,8 @@ export default class UserView extends React.Component {
            this.setState({loading: false});
            return;
        }
-        const fakeEvent = new Matrix.MatrixEvent({type: "m.room.member", content: profileInfo});
-        const member = new Matrix.RoomMember(null, this.props.userId);
+        const fakeEvent = new MatrixEvent({type: "m.room.member", content: profileInfo});
+        const member = new RoomMember(null, this.props.userId);
        member.setMembershipEvent(fakeEvent);
        this.setState({member, loading: false});
    }
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import Matrix from 'matrix-js-sdk';
+import {createClient} from 'matrix-js-sdk/src/matrix';
 import React, {ReactNode} from 'react';
 import {MatrixClient} from "matrix-js-sdk/src/client";

@ -181,7 +181,7 @@ export default class Registration extends React.Component<IProps, IState> {
        }

        const {hsUrl, isUrl} = serverConfig;
-        const cli = Matrix.createClient({
+        const cli = createClient({
            baseUrl: hsUrl,
            idBaseUrl: isUrl,
        });
--- a/src/components/views/context_menus/GroupInviteTileContextMenu.js
+++ b/src/components/views/context_menus/GroupInviteTileContextMenu.js
@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
-import {Group} from 'matrix-js-sdk';
+import {Group} from 'matrix-js-sdk/src/models/group';
 import GroupStore from "../../../stores/GroupStore";
 import {MenuItem} from "../../structures/ContextMenu";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@ -19,7 +19,7 @@ limitations under the License.

 import React from 'react';
 import PropTypes from 'prop-types';
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';

 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
--- a/src/components/views/dialogs/ConfirmUserActionDialog.js
+++ b/src/components/views/dialogs/ConfirmUserActionDialog.js
@ -16,7 +16,7 @@ limitations under the License.

 import React from 'react';
 import PropTypes from 'prop-types';
-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { GroupMemberType } from '../../../groups';
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@ -19,7 +19,6 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
-import { Room, MatrixEvent } from "matrix-js-sdk";
 import Field from "../elements/Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
@ -39,6 +38,8 @@ import SettingsStore, {LEVEL_ORDER} from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";

 class GenericEditor extends React.PureComponent {
    // static propTypes = {onBack: PropTypes.func.isRequired};
--- a/src/components/views/dialogs/FeedbackDialog.js
+++ b/src/components/views/dialogs/FeedbackDialog.js
@ -100,6 +100,20 @@ export default (props) => {
        );
    }

+    let bugReports = null;
+    if (SdkConfig.get().bug_report_endpoint_url) {
+        bugReports = (
+            <p>{
+                _t("PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> " +
+                    "to help us track down the problem.", {}, {
+                    debugLogsLink: sub => (
+                        <AccessibleButton kind="link" onClick={onDebugLogsLinkClick}>{sub}</AccessibleButton>
+                    ),
+                })
+            }</p>
+        );
+    }
+
    return (<QuestionDialog
        className="mx_FeedbackDialog"
        hasCancelButton={!!hasFeedback}
@ -120,14 +134,7 @@ export default (props) => {
                        },
                    })
                }</p>
-                <p>{
-                    _t("PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> " +
-                        "to help us track down the problem.", {}, {
-                        debugLogsLink: sub => (
-                            <AccessibleButton kind="link" onClick={onDebugLogsLinkClick}>{sub}</AccessibleButton>
-                        ),
-                    })
-                }</p>
+                {bugReports}
            </div>
            { countlyFeedbackSection }
        </React.Fragment>}
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@ -1256,7 +1256,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                ? _t("Invite to %(spaceName)s", {
                    spaceName: room.name || _t("Unnamed Space"),
                })
-                : _t("Invite to this room");
+                : _t("Invite to %(roomName)s", {
+                    roomName: room.name || _t("Unnamed Room"),
+                });

            let helpTextUntranslated;
            if (isSpace) {
--- a/src/components/views/dialogs/ReportEventDialog.js
+++ b/src/components/views/dialogs/ReportEventDialog.js
@ -18,7 +18,7 @@ import React, {PureComponent} from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import PropTypes from "prop-types";
-import {MatrixEvent} from "matrix-js-sdk";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import SdkConfig from '../../../SdkConfig';
 import Markdown from '../../../Markdown';
--- a/src/components/views/dialogs/RoomUpgradeWarningDialog.js
+++ b/src/components/views/dialogs/RoomUpgradeWarningDialog.js
@ -82,6 +82,33 @@ export default class RoomUpgradeWarningDialog extends React.Component {

        const title = this.state.isPrivate ? _t("Upgrade private room") : _t("Upgrade public room");

+        let bugReports = (
+            <p>
+                {_t(
+                    "This usually only affects how the room is processed on the server. If you're " +
+                    "having problems with your %(brand)s, please report a bug.", {brand},
+                )}
+            </p>
+        );
+        if (SdkConfig.get().bug_report_endpoint_url) {
+            bugReports = (
+                <p>
+                    {_t(
+                        "This usually only affects how the room is processed on the server. If you're " +
+                        "having problems with your %(brand)s, please <a>report a bug</a>.",
+                        {
+                            brand,
+                        },
+                        {
+                            "a": (sub) => {
+                                return <a href='#' onClick={this._openBugReportDialog}>{sub}</a>;
+                            },
+                        },
+                    )}
+                </p>
+            );
+        }
+
        return (
            <BaseDialog
                className='mx_RoomUpgradeWarningDialog'
@ -97,20 +124,7 @@ export default class RoomUpgradeWarningDialog extends React.Component {
                            "is unstable due to bugs, missing features or security vulnerabilities.",
                        )}
                    </p>
-                    <p>
-                        {_t(
-                            "This usually only affects how the room is processed on the server. If you're " +
-                            "having problems with your %(brand)s, please <a>report a bug</a>.",
-                            {
-                                brand,
-                            },
-                            {
-                                "a": (sub) => {
-                                    return <a href='#' onClick={this._openBugReportDialog}>{sub}</a>;
-                                },
-                            },
-                        )}
-                    </p>
+                    {bugReports}
                    <p>
                        {_t(
                            "You'll upgrade this room from <oldVersion /> to <newVersion />.",
--- a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
+++ b/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
-import {Room} from "matrix-js-sdk";
+import {Room} from "matrix-js-sdk/src/models/room";
 import * as sdk from '../../../index';
 import {dialogTermsInteractionCallback, TermsNotSignedError} from "../../../Terms";
 import classNames from 'classnames';
--- a/src/components/views/dialogs/TermsDialog.js
+++ b/src/components/views/dialogs/TermsDialog.js
@ -20,8 +20,8 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t, pickBestLanguage } from '../../../languageHandler';

-import Matrix from 'matrix-js-sdk';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";

 class TermsCheckbox extends React.PureComponent {
    static propTypes = {
@ -85,22 +85,22 @@ export default class TermsDialog extends React.PureComponent {

    _nameForServiceType(serviceType, host) {
        switch (serviceType) {
-            case Matrix.SERVICE_TYPES.IS:
+            case SERVICE_TYPES.IS:
                return <div>{_t("Identity Server")}<br />({host})</div>;
-            case Matrix.SERVICE_TYPES.IM:
+            case SERVICE_TYPES.IM:
                return <div>{_t("Integration Manager")}<br />({host})</div>;
        }
    }

    _summaryForServiceType(serviceType) {
        switch (serviceType) {
-            case Matrix.SERVICE_TYPES.IS:
+            case SERVICE_TYPES.IS:
                return <div>
                    {_t("Find others by phone or email")}
                    <br />
                    {_t("Be found by phone or email")}
                </div>;
-            case Matrix.SERVICE_TYPES.IM:
+            case SERVICE_TYPES.IM:
                return <div>
                    {_t("Use bots, bridges, widgets and sticker packs")}
                </div>;
--- a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
@ -19,7 +19,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { _t } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../SecurityManager';

--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@ -17,7 +17,8 @@ import React from 'react';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
-import { Room, RoomMember } from 'matrix-js-sdk';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import FlairStore from "../../../stores/FlairStore";
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@ -21,7 +21,7 @@ import {_t} from '../../../languageHandler';
 import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
 import {wantsDateSeparator} from '../../../DateUtils';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
 import {LayoutPropType} from "../../../settings/Layout";
--- a/src/components/views/messages/EditHistoryMessage.js
+++ b/src/components/views/messages/EditHistoryMessage.js
@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import * as HtmlUtils from '../../../HtmlUtils';
 import { editBodyDiffToHtml } from '../../../utils/MessageDiffUtils';
 import {formatTime} from '../../../DateUtils';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 import {pillifyLinks, unmountPills} from '../../../utils/pillify';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@ -18,7 +18,7 @@ limitations under the License.

 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
-import { EventStatus } from 'matrix-js-sdk';
+import { EventStatus } from 'matrix-js-sdk/src/models/event';

 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
--- a/src/components/views/room_settings/RelatedGroupSettings.js
+++ b/src/components/views/room_settings/RelatedGroupSettings.js
@ -16,7 +16,7 @@ limitations under the License.

 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@ -27,7 +27,7 @@ import {parseEvent} from '../../../editor/deserialize';
 import {PartCreator} from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
 import classNames from 'classnames';
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import BasicMessageComposer from "./BasicMessageComposer";
 import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@ -28,7 +28,7 @@ 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';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import {formatTime} from "../../../DateUtils";
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@ -333,6 +333,17 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
        this.setState({generalMenuPosition: null}); // hide the menu
    };

+    private onInviteClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        dis.dispatch({
+            action: 'view_invite',
+            roomId: this.props.room.roomId,
+        });
+        this.setState({generalMenuPosition: null}); // hide the menu
+    };
+
    private async saveNotifState(ev: ButtonEvent, newState: Volume) {
        ev.preventDefault();
        ev.stopPropagation();
@ -453,6 +464,8 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
            const isLowPriority = roomTags.includes(DefaultTagID.LowPriority);
            const lowPriorityLabel = _t("Low Priority");

+            const userId = MatrixClientPeg.get().getUserId();
+            const canInvite = this.props.room.canInvite(userId);
            contextMenu = <IconizedContextMenu
                {...contextMenuBelow(this.state.generalMenuPosition)}
                onFinished={this.onCloseGeneralMenu}
@ -472,7 +485,13 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
                        label={lowPriorityLabel}
                        iconClassName="mx_RoomTile_iconArrowDown"
                    />
-
+                    {canInvite ? (
+                        <IconizedContextMenuOption
+                            onClick={this.onInviteClick}
+                            label={_t("Invite People")}
+                            iconClassName="mx_RoomTile_iconInvite"
+                        />
+                    ) : null}
                    <IconizedContextMenuOption
                        onClick={this.onOpenRoomSettings}
                        label={_t("Settings")}
--- a/src/components/views/rooms/ThirdPartyMemberInfo.js
+++ b/src/components/views/rooms/ThirdPartyMemberInfo.js
@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {MatrixEvent} from "matrix-js-sdk";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import {_t} from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import * as sdk from "../../../index";
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@ -32,7 +32,7 @@ import * as sdk from "../../../../..";
 import Modal from "../../../../../Modal";
 import dis from "../../../../../dispatcher/dispatcher";
 import {Service, startTermsFlow} from "../../../../../Terms";
-import {SERVICE_TYPES} from "matrix-js-sdk";
+import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
 import IdentityAuthClient from "../../../../../IdentityAuthClient";
 import {abbreviateUrl} from "../../../../../utils/UrlUtils";
 import { getThreepidsWithBindStatus } from '../../../../../boundThreepids';
--- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
@ -84,6 +84,7 @@ export default class VoiceUserSettingsTab extends React.Component {
            }
        }
        if (error) {
+            console.log("Failed to list userMedia devices", error);
            const brand = SdkConfig.get().brand;
            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
            Modal.createTrackedDialog('No media permissions', '', ErrorDialog, {
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@ -51,6 +51,7 @@ interface IItemProps {
    isNested?: boolean;
    isPanelCollapsed?: boolean;
    onExpand?: Function;
+    parents?: Set<string>;
 }

 interface IItemState {
@ -299,7 +300,8 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
        const isNarrow = this.props.isPanelCollapsed;
        const collapsed = this.state.collapsed || forceCollapsed;

-        const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId);
+        const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId)
+            .filter(s => !this.props.parents?.has(s.roomId));
        const isActive = activeSpaces.includes(space);
        const itemClasses = classNames({
            "mx_SpaceItem": true,
@ -312,11 +314,17 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
            mx_SpaceButton_narrow: isNarrow,
        });
        const notificationState = SpaceStore.instance.getNotificationState(space.roomId);
-        const childItems = childSpaces && !collapsed ? <SpaceTreeLevel
-            spaces={childSpaces}
-            activeSpaces={activeSpaces}
-            isNested={true}
-        /> : null;
+
+        let childItems;
+        if (childSpaces && !collapsed) {
+            childItems = <SpaceTreeLevel
+                spaces={childSpaces}
+                activeSpaces={activeSpaces}
+                isNested={true}
+                parents={new Set(this.props.parents).add(this.props.space.roomId)}
+            />;
+        }
+
        let notifBadge;
        if (notificationState) {
            notifBadge = <div className="mx_SpacePanel_badgeContainer">
@ -383,12 +391,14 @@ interface ITreeLevelProps {
    spaces: Room[];
    activeSpaces: Room[];
    isNested?: boolean;
+    parents: Set<string>;
 }

 const SpaceTreeLevel: React.FC<ITreeLevelProps> = ({
    spaces,
    activeSpaces,
    isNested,
+    parents,
 }) => {
    return <ul className="mx_SpaceTreeLevel">
        {spaces.map(s => {
@ -397,6 +407,7 @@ const SpaceTreeLevel: React.FC<ITreeLevelProps> = ({
                activeSpaces={activeSpaces}
                space={s}
                isNested={isNested}
+                parents={parents}
            />);
        })}
    </ul>;
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@ -1601,6 +1601,7 @@
    "Favourited": "Favourited",
    "Favourite": "Favourite",
    "Low Priority": "Low Priority",
+    "Invite People": "Invite People",
    "Leave Room": "Leave Room",
    "Room options": "Room options",
    "%(count)s unread messages including mentions.|other": "%(count)s unread messages including mentions.",
@ -2150,10 +2151,10 @@
    "Add comment": "Add comment",
    "Comment": "Comment",
    "There are two ways you can provide feedback and help us improve %(brand)s.": "There are two ways you can provide feedback and help us improve %(brand)s.",
+    "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.": "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.",
    "Feedback": "Feedback",
    "Report a bug": "Report a bug",
    "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.": "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.",
-    "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.": "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.",
    "Send feedback": "Send feedback",
    "Confirm abort of host creation": "Confirm abort of host creation",
    "Are you sure you wish to abort creation of the host? The process cannot be continued.": "Are you sure you wish to abort creation of the host? The process cannot be continued.",
@ -2201,6 +2202,7 @@
    "Go": "Go",
    "Invite to %(spaceName)s": "Invite to %(spaceName)s",
    "Unnamed Space": "Unnamed Space",
+    "Invite to %(roomName)s": "Invite to %(roomName)s",
    "Invite someone using their name, email address, username (like <userId/>) or <a>share this space</a>.": "Invite someone using their name, email address, username (like <userId/>) or <a>share this space</a>.",
    "Invite someone using their name, username (like <userId/>) or <a>share this space</a>.": "Invite someone using their name, username (like <userId/>) or <a>share this space</a>.",
    "Invite someone using their name, email address, username (like <userId/>) or <a>share this room</a>.": "Invite someone using their name, email address, username (like <userId/>) or <a>share this room</a>.",
@ -2269,8 +2271,9 @@
    "Automatically invite users": "Automatically invite users",
    "Upgrade private room": "Upgrade private room",
    "Upgrade public room": "Upgrade public room",
-    "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.": "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.",
+    "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.": "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.",
    "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please <a>report a bug</a>.": "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please <a>report a bug</a>.",
+    "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.": "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.",
    "You'll upgrade this room from <oldVersion /> to <newVersion />.": "You'll upgrade this room from <oldVersion /> to <newVersion />.",
    "Resend": "Resend",
    "You're all caught up.": "You're all caught up.",
@ -2550,6 +2553,8 @@
    "Logout": "Logout",
    "%(creator)s created this DM.": "%(creator)s created this DM.",
    "%(creator)s created and configured the room.": "%(creator)s created and configured the room.",
+    "%(count)s messages deleted.|other": "%(count)s messages deleted.",
+    "%(count)s messages deleted.|one": "%(count)s message deleted.",
    "Your Communities": "Your Communities",
    "Did you know: you can use communities to filter your %(brand)s experience!": "Did you know: you can use communities to filter your %(brand)s experience!",
    "To set up a filter, drag a community avatar over to the filter panel on the far left hand side of the screen. You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.": "To set up a filter, drag a community avatar over to the filter panel on the far left hand side of the screen. You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.",
--- a/src/index.js
+++ b/src/index.js
@ -28,3 +28,7 @@ export function resetSkin() {
 export function getComponent(componentName) {
    return Skinner.getComponent(componentName);
 }
+
+// Import the js-sdk so the proper `request` object can be set. This does some
+// magic with the browser injection to make all subsequent imports work fine.
+import "matrix-js-sdk";
--- a/src/indexing/EventIndex.js
+++ b/src/indexing/EventIndex.js
@ -16,7 +16,8 @@ limitations under the License.

 import PlatformPeg from "../PlatformPeg";
 import {MatrixClientPeg} from "../MatrixClientPeg";
-import {EventTimeline, RoomMember} from 'matrix-js-sdk';
+import {RoomMember} from 'matrix-js-sdk/src/models/room-member';
+import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
 import {sleep} from "../utils/promise";
 import SettingsStore from "../settings/SettingsStore";
 import {EventEmitter} from "events";
--- a/src/rageshake/rageshake.js
+++ b/src/rageshake/rageshake.js
@ -434,15 +434,37 @@ function selectQuery(store, keyRange, resultMapper) {
 /**
 * Configure rage shaking support for sending bug reports.
 * Modifies globals.
+ * @param {boolean} setUpPersistence When true (default), the persistence will
+ * be set up immediately for the logs.
 * @return {Promise} Resolves when set up.
 */
-export function init() {
+export function init(setUpPersistence = true) {
    if (global.mx_rage_initPromise) {
        return global.mx_rage_initPromise;
    }
    global.mx_rage_logger = new ConsoleLogger();
    global.mx_rage_logger.monkeyPatch(window.console);

+    if (setUpPersistence) {
+        return tryInitStorage();
+    }
+
+    global.mx_rage_initPromise = Promise.resolve();
+    return global.mx_rage_initPromise;
+}
+
+/**
+ * Try to start up the rageshake storage for logs. If not possible (client unsupported)
+ * then this no-ops.
+ * @return {Promise} Resolves when complete.
+ */
+export function tryInitStorage() {
+    if (global.mx_rage_initStoragePromise) {
+        return global.mx_rage_initStoragePromise;
+    }
+
+    console.log("Configuring rageshake persistence...");
+
    // just *accessing* indexedDB throws an exception in firefox with
    // indexeddb disabled.
    let indexedDB;
@ -452,11 +474,11 @@ export function init() {

    if (indexedDB) {
        global.mx_rage_store = new IndexedDBLogStore(indexedDB, global.mx_rage_logger);
-        global.mx_rage_initPromise = global.mx_rage_store.connect();
-        return global.mx_rage_initPromise;
+        global.mx_rage_initStoragePromise = global.mx_rage_store.connect();
+        return global.mx_rage_initStoragePromise;
    }
-    global.mx_rage_initPromise = Promise.resolve();
-    return global.mx_rage_initPromise;
+    global.mx_rage_initStoragePromise = Promise.resolve();
+    return global.mx_rage_initStoragePromise;
 }

 export function flush() {
--- a/src/stores/OwnProfileStore.ts
+++ b/src/stores/OwnProfileStore.ts
@ -29,13 +29,22 @@ interface IState {
    avatarUrl?: string;
 }

+const KEY_DISPLAY_NAME = "mx_profile_displayname";
+const KEY_AVATAR_URL = "mx_profile_avatar_url";
+
 export class OwnProfileStore extends AsyncStoreWithClient<IState> {
    private static internalInstance = new OwnProfileStore();

    private monitoredUser: User;

    private constructor() {
-        super(defaultDispatcher, {});
+        // seed from localstorage because otherwise we won't get these values until a whole network
+        // round-trip after the client is ready, and we often load widgets in that time, and we'd
+        // and up passing them an incorrect display name
+        super(defaultDispatcher, {
+            displayName: window.localStorage.getItem(KEY_DISPLAY_NAME),
+            avatarUrl: window.localStorage.getItem(KEY_AVATAR_URL),
+        });
    }

    public static get instance(): OwnProfileStore {
@ -115,6 +124,16 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
        // We specifically do not use the User object we stored for profile info as it
        // could easily be wrong (such as per-room instead of global profile).
        const profileInfo = await this.matrixClient.getProfileInfo(this.matrixClient.getUserId());
+        if (profileInfo.displayname) {
+            window.localStorage.setItem(KEY_DISPLAY_NAME, profileInfo.displayname);
+        } else {
+            window.localStorage.removeItem(KEY_DISPLAY_NAME);
+        }
+        if (profileInfo.avatar_url) {
+            window.localStorage.setItem(KEY_AVATAR_URL, profileInfo.avatar_url);
+        } else {
+            window.localStorage.removeItem(KEY_AVATAR_URL);
+        }
        await this.updateState({displayName: profileInfo.displayname, avatarUrl: profileInfo.avatar_url});
    };

--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@ -655,6 +655,18 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
        if (!algorithmTags) return [DefaultTagID.Untagged];
        return algorithmTags;
    }
+
+    /**
+     * Manually update a room with a given cause. This should only be used if the
+     * room list store would otherwise be incapable of doing the update itself. Note
+     * that this may race with the room list's regular operation.
+     * @param {Room} room The room to update.
+     * @param {RoomUpdateCause} cause The cause to update for.
+     */
+    public async manualRoomUpdate(room: Room, cause: RoomUpdateCause) {
+        await this.handleRoomUpdate(room, cause);
+        this.updateFn.trigger();
+    }
 }

 export default class RoomListStore {
--- a/src/utils/AutoDiscoveryUtils.js
+++ b/src/utils/AutoDiscoveryUtils.js
@ -16,7 +16,7 @@ limitations under the License.
 */

 import React from 'react';
-import {AutoDiscovery} from "matrix-js-sdk";
+import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery";
 import {_t, _td, newTranslatableError} from "../languageHandler";
 import {makeType} from "./TypeUtils";
 import SdkConfig from '../SdkConfig';
--- a/src/utils/EventUtils.js
+++ b/src/utils/EventUtils.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { EventStatus } from 'matrix-js-sdk';
+import { EventStatus } from 'matrix-js-sdk/src/models/event';
 import {MatrixClientPeg} from '../MatrixClientPeg';
 import shouldHideEvent from "../shouldHideEvent";
 /**
--- a/src/utils/IdentityServerUtils.js
+++ b/src/utils/IdentityServerUtils.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { SERVICE_TYPES } from 'matrix-js-sdk';
+import { SERVICE_TYPES } from 'matrix-js-sdk/src/service-types';
 import SdkConfig from '../SdkConfig';
 import {MatrixClientPeg} from '../MatrixClientPeg';

--- a/src/utils/StorageManager.js
+++ b/src/utils/StorageManager.js
@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import Matrix from 'matrix-js-sdk';
 import {LocalStorageCryptoStore} from 'matrix-js-sdk/src/crypto/store/localStorage-crypto-store';
 import Analytics from '../Analytics';
+import {IndexedDBStore} from "matrix-js-sdk/src/store/indexeddb";
+import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";

 const localStorage = window.localStorage;

@ -132,7 +133,7 @@ export async function checkConsistency() {
 async function checkSyncStore() {
    let exists = false;
    try {
-        exists = await Matrix.IndexedDBStore.exists(
+        exists = await IndexedDBStore.exists(
            indexedDB, SYNC_STORE_NAME,
        );
        log(`Sync store using IndexedDB contains data? ${exists}`);
@ -148,7 +149,7 @@ async function checkSyncStore() {
 async function checkCryptoStore() {
    let exists = false;
    try {
-        exists = await Matrix.IndexedDBCryptoStore.exists(
+        exists = await IndexedDBCryptoStore.exists(
            indexedDB, CRYPTO_STORE_NAME,
        );
        log(`Crypto store using IndexedDB contains data? ${exists}`);
--- a/src/utils/createMatrixClient.js
+++ b/src/utils/createMatrixClient.js
@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import * as Matrix from 'matrix-js-sdk';
+import {createClient} from "matrix-js-sdk/src/matrix";
+import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
+import {WebStorageSessionStore} from "matrix-js-sdk/src/store/session/webstorage";
+import {IndexedDBStore} from "matrix-js-sdk/src/store/indexeddb";

 const localStorage = window.localStorage;

@ -44,7 +47,7 @@ export default function createMatrixClient(opts) {
    };

    if (indexedDB && localStorage) {
-        storeOpts.store = new Matrix.IndexedDBStore({
+        storeOpts.store = new IndexedDBStore({
            indexedDB: indexedDB,
            dbName: "riot-web-sync",
            localStorage: localStorage,
@ -53,18 +56,18 @@ export default function createMatrixClient(opts) {
    }

    if (localStorage) {
-        storeOpts.sessionStore = new Matrix.WebStorageSessionStore(localStorage);
+        storeOpts.sessionStore = new WebStorageSessionStore(localStorage);
    }

    if (indexedDB) {
-        storeOpts.cryptoStore = new Matrix.IndexedDBCryptoStore(
+        storeOpts.cryptoStore = new IndexedDBCryptoStore(
            indexedDB, "matrix-js-sdk:crypto",
        );
    }

    opts = Object.assign(storeOpts, opts);

-    return Matrix.createClient(opts);
+    return createClient(opts);
 }

 createMatrixClient.indexedDbWorkerScript = null;
--- a/src/utils/pages.ts
+++ b/src/utils/pages.ts
@ -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.
@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-export function getHomePageUrl(appConfig) {
+import { ConfigOptions } from "../SdkConfig";
+
+export function getHomePageUrl(appConfig: ConfigOptions): string | null {
    const pagesConfig = appConfig.embeddedPages;
-    let pageUrl = null;
-    if (pagesConfig) {
-        pageUrl = pagesConfig.homeUrl;
-    }
+    let pageUrl = pagesConfig?.homeUrl;
+
    if (!pageUrl) {
        // This is a deprecated config option for the home page
        // (despite the name, given we also now have a welcome
@ -29,3 +29,8 @@ export function getHomePageUrl(appConfig) {

    return pageUrl;
 }
+
+export function shouldUseLoginForWelcome(appConfig: ConfigOptions): boolean {
+    const pagesConfig = appConfig.embeddedPages;
+    return pagesConfig?.loginForWelcome === true;
+}