Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/feat/room-list-widgets

 Conflicts:

	src/components/views/elements/AppTile.js

	src/utils/WidgetUtils.ts

src/@types/global.d.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first
 import * as ModernizrStatic from "modernizr";
 import ContentMessages from "../ContentMessages";
 import { IMatrixClientPeg } from "../MatrixClientPeg";
@@ -30,6 +31,9 @@ import {Notifier} from "../Notifier";
 import type {Renderer} from "react-dom";
 import RightPanelStore from "../stores/RightPanelStore";
 import WidgetStore from "../stores/WidgetStore";
+import CallHandler from "../CallHandler";
+import {Analytics} from "../Analytics";
+import UserActivity from "../UserActivity";
 
 declare global {
     interface Window {
@@ -53,6 +57,9 @@ declare global {
         mxNotifier: typeof Notifier;
         mxRightPanelStore: RightPanelStore;
         mxWidgetStore: WidgetStore;
+        mxCallHandler: CallHandler;
+        mxAnalytics: Analytics;
+        mxUserActivity: UserActivity;
     }
 
     interface Document {
@@ -62,6 +69,9 @@ declare global {
 
     interface Navigator {
         userLanguage?: string;
+        // https://github.com/Microsoft/TypeScript/issues/19473
+        // https://developer.mozilla.org/en-US/docs/Web/API/MediaSession
+        mediaSession: any;
     }
 
     interface StorageEstimate {

src/@types/sanitize-html.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 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,13 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
+import sanitizeHtml from 'sanitize-html';
 
-export default function(dest, src) {
-    for (const i in src) {
-        if (src.hasOwnProperty(i)) {
-            dest[i] = src[i];
-        }
-    }
-    return dest;
+export interface IExtendedSanitizeOptions extends sanitizeHtml.IOptions {
+    // This option only exists in 2.x RCs so far, so not yet present in the
+    // separate type definition module.
+    nestingLimit?: number;
 }

src/Analytics.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 
-import { getCurrentLanguage, _t, _td } from './languageHandler';
+import {getCurrentLanguage, _t, _td, IVariables} from './languageHandler';
 import PlatformPeg from './PlatformPeg';
 import SdkConfig from './SdkConfig';
 import Modal from './Modal';
@@ -27,7 +27,7 @@ const hashRegex = /#\/(groups?|room|user|settings|register|login|forgot_password
 const hashVarRegex = /#\/(group|room|user)\/.*$/;
 
 // Remove all but the first item in the hash path. Redact unexpected hashes.
-function getRedactedHash(hash) {
+function getRedactedHash(hash: string): string {
     // Don't leak URLs we aren't expecting - they could contain tokens/PII
     const match = hashRegex.exec(hash);
     if (!match) {
@@ -44,7 +44,7 @@ function getRedactedHash(hash) {
 
 // Return the current origin, path and hash separated with a `/`. This does
 // not include query parameters.
-function getRedactedUrl() {
+function getRedactedUrl(): string {
     const { origin, hash } = window.location;
     let { pathname } = window.location;
 
@@ -56,7 +56,25 @@ function getRedactedUrl() {
     return origin + pathname + getRedactedHash(hash);
 }
 
-const customVariables = {
+interface IData {
+    /* eslint-disable camelcase */
+    gt_ms?: string;
+    e_c?: string;
+    e_a?: string;
+    e_n?: string;
+    e_v?: string;
+    ping?: string;
+    /* eslint-enable camelcase */
+}
+
+interface IVariable {
+    id: number;
+    expl: string; // explanation
+    example: string; // example value
+    getTextVariables?(): IVariables; // object to pass as 2nd argument to `_t`
+}
+
+const customVariables: Record<string, IVariable> = {
     // The Matomo installation at https://matomo.riot.im is currently configured
     // with a limit of 10 custom variables.
     'App Platform': {
@@ -120,7 +138,7 @@ const customVariables = {
     },
 };
 
-function whitelistRedact(whitelist, str) {
+function whitelistRedact(whitelist: string[], str: string): string {
     if (whitelist.includes(str)) return str;
     return '<redacted>';
 }
@@ -130,7 +148,7 @@ const CREATION_TS_KEY = "mx_Riot_Analytics_cts";
 const VISIT_COUNT_KEY = "mx_Riot_Analytics_vc";
 const LAST_VISIT_TS_KEY = "mx_Riot_Analytics_lvts";
 
-function getUid() {
+function getUid(): string {
     try {
         let data = localStorage && localStorage.getItem(UID_KEY);
         if (!data && localStorage) {
@@ -145,32 +163,36 @@ function getUid() {
 
 const HEARTBEAT_INTERVAL = 30 * 1000; // seconds
 
-class Analytics {
+export class Analytics {
+    private baseUrl: URL = null;
+    private siteId: string = null;
+    private visitVariables: Record<number, [string, string]> = {}; // {[id: number]: [name: string, value: string]}
+    private firstPage = true;
+    private heartbeatIntervalID: number = null;
+
+    private readonly creationTs: string;
+    private readonly lastVisitTs: string;
+    private readonly visitCount: string;
+
     constructor() {
-        this.baseUrl = null;
-        this.siteId = null;
-        this.visitVariables = {};
-
-        this.firstPage = true;
-        this._heartbeatIntervalID = null;
-
         this.creationTs = localStorage && localStorage.getItem(CREATION_TS_KEY);
         if (!this.creationTs && localStorage) {
-            localStorage.setItem(CREATION_TS_KEY, this.creationTs = new Date().getTime());
+            localStorage.setItem(CREATION_TS_KEY, this.creationTs = String(new Date().getTime()));
         }
 
         this.lastVisitTs = localStorage && localStorage.getItem(LAST_VISIT_TS_KEY);
-        this.visitCount = localStorage && localStorage.getItem(VISIT_COUNT_KEY) || 0;
+        this.visitCount = localStorage && localStorage.getItem(VISIT_COUNT_KEY) || "0";
+        this.visitCount = String(parseInt(this.visitCount, 10) + 1); // increment
         if (localStorage) {
-            localStorage.setItem(VISIT_COUNT_KEY, parseInt(this.visitCount, 10) + 1);
+            localStorage.setItem(VISIT_COUNT_KEY, this.visitCount);
         }
     }
 
-    get disabled() {
+    public get disabled() {
         return !this.baseUrl;
     }
 
-    canEnable() {
+    public canEnable() {
         const config = SdkConfig.get();
         return navigator.doNotTrack !== "1" && config && config.piwik && config.piwik.url && config.piwik.siteId;
     }
@@ -179,67 +201,67 @@ class Analytics {
      * Enable Analytics if initialized but disabled
      * otherwise try and initalize, no-op if piwik config missing
      */
-    async enable() {
+    public async enable() {
         if (!this.disabled) return;
         if (!this.canEnable()) return;
         const config = SdkConfig.get();
 
         this.baseUrl = new URL("piwik.php", config.piwik.url);
         // set constants
-        this.baseUrl.searchParams.set("rec", 1); // rec is required for tracking
+        this.baseUrl.searchParams.set("rec", "1"); // rec is required for tracking
         this.baseUrl.searchParams.set("idsite", config.piwik.siteId); // rec is required for tracking
-        this.baseUrl.searchParams.set("apiv", 1); // API version to use
-        this.baseUrl.searchParams.set("send_image", 0); // we want a 204, not a tiny GIF
+        this.baseUrl.searchParams.set("apiv", "1"); // API version to use
+        this.baseUrl.searchParams.set("send_image", "0"); // we want a 204, not a tiny GIF
         // set user parameters
         this.baseUrl.searchParams.set("_id", getUid()); // uuid
         this.baseUrl.searchParams.set("_idts", this.creationTs); // first ts
-        this.baseUrl.searchParams.set("_idvc", parseInt(this.visitCount, 10)+ 1); // visit count
+        this.baseUrl.searchParams.set("_idvc", this.visitCount); // visit count
         if (this.lastVisitTs) {
             this.baseUrl.searchParams.set("_viewts", this.lastVisitTs); // last visit ts
         }
 
         const platform = PlatformPeg.get();
-        this._setVisitVariable('App Platform', platform.getHumanReadableName());
+        this.setVisitVariable('App Platform', platform.getHumanReadableName());
         try {
-            this._setVisitVariable('App Version', await platform.getAppVersion());
+            this.setVisitVariable('App Version', await platform.getAppVersion());
         } catch (e) {
-            this._setVisitVariable('App Version', 'unknown');
+            this.setVisitVariable('App Version', 'unknown');
         }
 
-        this._setVisitVariable('Chosen Language', getCurrentLanguage());
+        this.setVisitVariable('Chosen Language', getCurrentLanguage());
 
         const hostname = window.location.hostname;
         if (hostname === 'riot.im') {
-            this._setVisitVariable('Instance', window.location.pathname);
+            this.setVisitVariable('Instance', window.location.pathname);
         } else if (hostname.endsWith('.element.io')) {
-            this._setVisitVariable('Instance', hostname.replace('.element.io', ''));
+            this.setVisitVariable('Instance', hostname.replace('.element.io', ''));
         }
 
         let installedPWA = "unknown";
         try {
             // Known to work at least for desktop Chrome
-            installedPWA = window.matchMedia('(display-mode: standalone)').matches;
+            installedPWA = String(window.matchMedia('(display-mode: standalone)').matches);
         } catch (e) { }
-        this._setVisitVariable('Installed PWA', installedPWA);
+        this.setVisitVariable('Installed PWA', installedPWA);
 
         let touchInput = "unknown";
         try {
             // MDN claims broad support across browsers
-            touchInput = window.matchMedia('(pointer: coarse)').matches;
+            touchInput = String(window.matchMedia('(pointer: coarse)').matches);
         } catch (e) { }
-        this._setVisitVariable('Touch Input', touchInput);
+        this.setVisitVariable('Touch Input', touchInput);
 
         // start heartbeat
-        this._heartbeatIntervalID = window.setInterval(this.ping.bind(this), HEARTBEAT_INTERVAL);
+        this.heartbeatIntervalID = window.setInterval(this.ping.bind(this), HEARTBEAT_INTERVAL);
     }
 
     /**
      * Disable Analytics, stop the heartbeat and clear identifiers from localStorage
      */
-    disable() {
+    public disable() {
         if (this.disabled) return;
         this.trackEvent('Analytics', 'opt-out');
-        window.clearInterval(this._heartbeatIntervalID);
+        window.clearInterval(this.heartbeatIntervalID);
         this.baseUrl = null;
         this.visitVariables = {};
         localStorage.removeItem(UID_KEY);
@@ -248,7 +270,7 @@ class Analytics {
         localStorage.removeItem(LAST_VISIT_TS_KEY);
     }
 
-    async _track(data) {
+    private async _track(data: IData) {
         if (this.disabled) return;
 
         const now = new Date();
@@ -264,13 +286,13 @@ class Analytics {
             s: now.getSeconds(),
         };
 
-        const url = new URL(this.baseUrl);
+        const url = new URL(this.baseUrl.toString()); // copy
         for (const key in params) {
             url.searchParams.set(key, params[key]);
         }
 
         try {
-            await window.fetch(url, {
+            await window.fetch(url.toString(), {
                 method: "GET",
                 mode: "no-cors",
                 cache: "no-cache",
@@ -281,14 +303,14 @@ class Analytics {
         }
     }
 
-    ping() {
+    public ping() {
         this._track({
-            ping: 1,
+            ping: "1",
         });
-        localStorage.setItem(LAST_VISIT_TS_KEY, new Date().getTime()); // update last visit ts
+        localStorage.setItem(LAST_VISIT_TS_KEY, String(new Date().getTime())); // update last visit ts
     }
 
-    trackPageChange(generationTimeMs) {
+    public trackPageChange(generationTimeMs?: number) {
         if (this.disabled) return;
         if (this.firstPage) {
             // De-duplicate first page
@@ -303,11 +325,11 @@ class Analytics {
         }
 
         this._track({
-            gt_ms: generationTimeMs,
+            gt_ms: String(generationTimeMs),
         });
     }
 
-    trackEvent(category, action, name, value) {
+    public trackEvent(category: string, action: string, name?: string, value?: string) {
         if (this.disabled) return;
         this._track({
             e_c: category,
@@ -317,12 +339,12 @@ class Analytics {
         });
     }
 
-    _setVisitVariable(key, value) {
+    private setVisitVariable(key: keyof typeof customVariables, value: string) {
         if (this.disabled) return;
         this.visitVariables[customVariables[key].id] = [key, value];
     }
 
-    setLoggedIn(isGuest, homeserverUrl, identityServerUrl) {
+    public setLoggedIn(isGuest: boolean, homeserverUrl: string) {
         if (this.disabled) return;
 
         const config = SdkConfig.get();
@@ -330,16 +352,16 @@ class Analytics {
 
         const whitelistedHSUrls = config.piwik.whitelistedHSUrls || [];
 
-        this._setVisitVariable('User Type', isGuest ? 'Guest' : 'Logged In');
-        this._setVisitVariable('Homeserver URL', whitelistRedact(whitelistedHSUrls, homeserverUrl));
+        this.setVisitVariable('User Type', isGuest ? 'Guest' : 'Logged In');
+        this.setVisitVariable('Homeserver URL', whitelistRedact(whitelistedHSUrls, homeserverUrl));
     }
 
-    setBreadcrumbs(state) {
+    public setBreadcrumbs(state: boolean) {
         if (this.disabled) return;
-        this._setVisitVariable('Breadcrumbs', state ? 'enabled' : 'disabled');
+        this.setVisitVariable('Breadcrumbs', state ? 'enabled' : 'disabled');
     }
 
-    showDetailsModal = () => {
+    public showDetailsModal = () => {
         let rows = [];
         if (!this.disabled) {
             rows = Object.values(this.visitVariables);
@@ -360,7 +382,7 @@ class Analytics {
                     'e.g. <CurrentPageURL>',
                     {},
                     {
-                        CurrentPageURL: getRedactedUrl(),
+                        CurrentPageURL: getRedactedUrl,
                     },
                 ),
             },
@@ -401,7 +423,7 @@ class Analytics {
     };
 }
 
-if (!global.mxAnalytics) {
-    global.mxAnalytics = new Analytics();
+if (!window.mxAnalytics) {
+    window.mxAnalytics = new Analytics();
 }
-export default global.mxAnalytics;
+export default window.mxAnalytics;

src/Avatar.ts

@@ -14,14 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import {User} from "matrix-js-sdk/src/models/user";
+import {Room} from "matrix-js-sdk/src/models/room";
+
 import {MatrixClientPeg} from './MatrixClientPeg';
 import DMRoomMap from './utils/DMRoomMap';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+
+export type ResizeMethod = "crop" | "scale";
 
 // Not to be used for BaseAvatar urls as that has similar default avatar fallback already
-export function avatarUrlForMember(member, width, height, resizeMethod) {
-    let url;
+export function avatarUrlForMember(member: RoomMember, width: number, height: number, resizeMethod: ResizeMethod) {
+    let url: string;
     if (member && member.getAvatarUrl) {
         url = member.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
@@ -41,7 +46,7 @@ export function avatarUrlForMember(member, width, height, resizeMethod) {
     return url;
 }
 
-export function avatarUrlForUser(user, width, height, resizeMethod) {
+export function avatarUrlForUser(user: User, width: number, height: number, resizeMethod?: ResizeMethod) {
     const url = getHttpUriForMxc(
         MatrixClientPeg.get().getHomeserverUrl(), user.avatarUrl,
         Math.floor(width * window.devicePixelRatio),
@@ -54,14 +59,14 @@ export function avatarUrlForUser(user, width, height, resizeMethod) {
     return url;
 }
 
-function isValidHexColor(color) {
+function isValidHexColor(color: string): boolean {
     return typeof color === "string" &&
-        (color.length === 7 || color.lengh === 9) &&
+        (color.length === 7 || color.length === 9) &&
         color.charAt(0) === "#" &&
         !color.substr(1).split("").some(c => isNaN(parseInt(c, 16)));
 }
 
-function urlForColor(color) {
+function urlForColor(color: string): string {
     const size = 40;
     const canvas = document.createElement("canvas");
     canvas.width = size;
@@ -79,9 +84,10 @@ function urlForColor(color) {
 // XXX: Ideally we'd clear this cache when the theme changes
 // but since this function is at global scope, it's a bit
 // hard to install a listener here, even if there were a clear event to listen to
-const colorToDataURLCache = new Map();
+const colorToDataURLCache = new Map<string, string>();
 
-export function defaultAvatarUrlForString(s) {
+export function defaultAvatarUrlForString(s: string): string {
+    if (!s) return ""; // XXX: should never happen but empirically does by evidence of a rageshake
     const defaultColors = ['#0DBD8B', '#368bd6', '#ac3ba8'];
     let total = 0;
     for (let i = 0; i < s.length; ++i) {
@@ -112,7 +118,7 @@ export function defaultAvatarUrlForString(s) {
  * @param {string} name
  * @return {string} the first letter
  */
-export function getInitialLetter(name) {
+export function getInitialLetter(name: string): string {
     if (!name) {
         // XXX: We should find out what causes the name to sometimes be falsy.
         console.trace("`name` argument to `getInitialLetter` not supplied");
@@ -145,7 +151,7 @@ export function getInitialLetter(name) {
     return firstChar.toUpperCase();
 }
 
-export function avatarUrlForRoom(room, width, height, resizeMethod) {
+export function avatarUrlForRoom(room: Room, width: number, height: number, resizeMethod?: ResizeMethod) {
     if (!room) return null; // null-guard
 
     const explicitRoomAvatar = room.getAvatarUrl(

src/CallHandler.js

@@ -1,526 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 New Vector Ltd
-Copyright 2019, 2020 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.
-*/
-
-/*
- * Manages a list of all the currently active calls.
- *
- * This handler dispatches when voip calls are added/updated/removed from this list:
- * {
- *   action: 'call_state'
- *   room_id: <room ID of the call>
- * }
- *
- * To know the state of the call, this handler exposes a getter to
- * obtain the call for a room:
- *   var call = CallHandler.getCall(roomId)
- *   var state = call.call_state; // ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing
- *
- * This handler listens for and handles the following actions:
- * {
- *   action: 'place_call',
- *   type: 'voice|video',
- *   room_id: <room that the place call button was pressed in>
- * }
- *
- * {
- *   action: 'incoming_call'
- *   call: MatrixCall
- * }
- *
- * {
- *   action: 'hangup'
- *   room_id: <room that the hangup button was pressed in>
- * }
- *
- * {
- *   action: 'answer'
- *   room_id: <room that the answer button was pressed in>
- * }
- */
-
-import {MatrixClientPeg} from './MatrixClientPeg';
-import PlatformPeg from './PlatformPeg';
-import Modal from './Modal';
-import { _t } from './languageHandler';
-import Matrix from 'matrix-js-sdk';
-import dis from './dispatcher/dispatcher';
-import WidgetUtils from './utils/WidgetUtils';
-import WidgetEchoStore from './stores/WidgetEchoStore';
-import SettingsStore from './settings/SettingsStore';
-import {generateHumanReadableId} from "./utils/NamingUtils";
-import {Jitsi} from "./widgets/Jitsi";
-import {WidgetType} from "./widgets/WidgetType";
-import {SettingLevel} from "./settings/SettingLevel";
-import {base32} from "rfc4648";
-
-import QuestionDialog from "./components/views/dialogs/QuestionDialog";
-import ErrorDialog from "./components/views/dialogs/ErrorDialog";
-
-global.mxCalls = {
-    //room_id: MatrixCall
-};
-const calls = global.mxCalls;
-let ConferenceHandler = null;
-
-const audioPromises = {};
-
-function play(audioId) {
-    // TODO: Attach an invisible element for this instead
-    // which listens?
-    const audio = document.getElementById(audioId);
-    if (audio) {
-        const playAudio = async () => {
-            try {
-                // This still causes the chrome debugger to break on promise rejection if
-                // the promise is rejected, even though we're catching the exception.
-                await audio.play();
-            } catch (e) {
-                // This is usually because the user hasn't interacted with the document,
-                // or chrome doesn't think so and is denying the request. Not sure what
-                // we can really do here...
-                // https://github.com/vector-im/element-web/issues/7657
-                console.log("Unable to play audio clip", e);
-            }
-        };
-        if (audioPromises[audioId]) {
-            audioPromises[audioId] = audioPromises[audioId].then(()=>{
-                audio.load();
-                return playAudio();
-            });
-        } else {
-            audioPromises[audioId] = playAudio();
-        }
-    }
-}
-
-function pause(audioId) {
-    // TODO: Attach an invisible element for this instead
-    // which listens?
-    const audio = document.getElementById(audioId);
-    if (audio) {
-        if (audioPromises[audioId]) {
-            audioPromises[audioId] = audioPromises[audioId].then(()=>audio.pause());
-        } else {
-            // pause doesn't actually return a promise, but might as well do this for symmetry with play();
-            audioPromises[audioId] = audio.pause();
-        }
-    }
-}
-
-function _setCallListeners(call) {
-    call.on("error", function(err) {
-        console.error("Call error:", err);
-        if (
-            MatrixClientPeg.get().getTurnServers().length === 0 &&
-            SettingsStore.getValue("fallbackICEServerAllowed") === null
-        ) {
-            _showICEFallbackPrompt();
-            return;
-        }
-
-        Modal.createTrackedDialog('Call Failed', '', ErrorDialog, {
-            title: _t('Call Failed'),
-            description: err.message,
-        });
-    });
-    call.on("hangup", function() {
-        _setCallState(undefined, call.roomId, "ended");
-    });
-    // map web rtc states to dummy UI state
-    // ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing
-    call.on("state", function(newState, oldState) {
-        if (newState === "ringing") {
-            _setCallState(call, call.roomId, "ringing");
-            pause("ringbackAudio");
-        } else if (newState === "invite_sent") {
-            _setCallState(call, call.roomId, "ringback");
-            play("ringbackAudio");
-        } else if (newState === "ended" && oldState === "connected") {
-            _setCallState(undefined, call.roomId, "ended");
-            pause("ringbackAudio");
-            play("callendAudio");
-        } else if (newState === "ended" && oldState === "invite_sent" &&
-                (call.hangupParty === "remote" ||
-                (call.hangupParty === "local" && call.hangupReason === "invite_timeout")
-                )) {
-            _setCallState(call, call.roomId, "busy");
-            pause("ringbackAudio");
-            play("busyAudio");
-            Modal.createTrackedDialog('Call Handler', 'Call Timeout', ErrorDialog, {
-                title: _t('Call Timeout'),
-                description: _t('The remote side failed to pick up') + '.',
-            });
-        } else if (oldState === "invite_sent") {
-            _setCallState(call, call.roomId, "stop_ringback");
-            pause("ringbackAudio");
-        } else if (oldState === "ringing") {
-            _setCallState(call, call.roomId, "stop_ringing");
-            pause("ringbackAudio");
-        } else if (newState === "connected") {
-            _setCallState(call, call.roomId, "connected");
-            pause("ringbackAudio");
-        }
-    });
-}
-
-function _setCallState(call, roomId, status) {
-    console.log(
-        `Call state in ${roomId} changed to ${status} (${call ? call.call_state : "-"})`,
-    );
-    calls[roomId] = call;
-
-    if (status === "ringing") {
-        play("ringAudio");
-    } else if (call && call.call_state === "ringing") {
-        pause("ringAudio");
-    }
-
-    if (call) {
-        call.call_state = status;
-    }
-    dis.dispatch({
-        action: 'call_state',
-        room_id: roomId,
-        state: status,
-    });
-}
-
-function _showICEFallbackPrompt() {
-    const cli = MatrixClientPeg.get();
-    const code = sub => <code>{sub}</code>;
-    Modal.createTrackedDialog('No TURN servers', '', QuestionDialog, {
-        title: _t("Call failed due to misconfigured server"),
-        description: <div>
-            <p>{_t(
-                "Please ask the administrator of your homeserver " +
-                "(<code>%(homeserverDomain)s</code>) to configure a TURN server in " +
-                "order for calls to work reliably.",
-                { homeserverDomain: cli.getDomain() }, { code },
-            )}</p>
-            <p>{_t(
-                "Alternatively, you can try to use the public server at " +
-                "<code>turn.matrix.org</code>, but this will not be as reliable, and " +
-                "it will share your IP address with that server. You can also manage " +
-                "this in Settings.",
-                null, { code },
-            )}</p>
-        </div>,
-        button: _t('Try using turn.matrix.org'),
-        cancelButton: _t('OK'),
-        onFinished: (allow) => {
-            SettingsStore.setValue("fallbackICEServerAllowed", null, SettingLevel.DEVICE, allow);
-            cli.setFallbackICEServerAllowed(allow);
-        },
-    }, null, true);
-}
-
-function _onAction(payload) {
-    function placeCall(newCall) {
-        _setCallListeners(newCall);
-        if (payload.type === 'voice') {
-            newCall.placeVoiceCall();
-        } else if (payload.type === 'video') {
-            newCall.placeVideoCall(
-                payload.remote_element,
-                payload.local_element,
-            );
-        } else if (payload.type === 'screensharing') {
-            const screenCapErrorString = PlatformPeg.get().screenCaptureErrorString();
-            if (screenCapErrorString) {
-                _setCallState(undefined, newCall.roomId, "ended");
-                console.log("Can't capture screen: " + screenCapErrorString);
-                Modal.createTrackedDialog('Call Handler', 'Unable to capture screen', ErrorDialog, {
-                    title: _t('Unable to capture screen'),
-                    description: screenCapErrorString,
-                });
-                return;
-            }
-            newCall.placeScreenSharingCall(
-                payload.remote_element,
-                payload.local_element,
-            );
-        } else {
-            console.error("Unknown conf call type: %s", payload.type);
-        }
-    }
-
-    switch (payload.action) {
-        case 'place_call':
-            {
-                if (callHandler.getAnyActiveCall()) {
-                    Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, {
-                        title: _t('Existing Call'),
-                        description: _t('You are already in a call.'),
-                    });
-                    return; // don't allow >1 call to be placed.
-                }
-
-                // if the runtime env doesn't do VoIP, whine.
-                if (!MatrixClientPeg.get().supportsVoip()) {
-                    Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
-                        title: _t('VoIP is unsupported'),
-                        description: _t('You cannot place VoIP calls in this browser.'),
-                    });
-                    return;
-                }
-
-                const room = MatrixClientPeg.get().getRoom(payload.room_id);
-                if (!room) {
-                    console.error("Room %s does not exist.", payload.room_id);
-                    return;
-                }
-
-                const members = room.getJoinedMembers();
-                if (members.length <= 1) {
-                    Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, {
-                        description: _t('You cannot place a call with yourself.'),
-                    });
-                    return;
-                } else if (members.length === 2) {
-                    console.info("Place %s call in %s", payload.type, payload.room_id);
-                    const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), payload.room_id);
-                    placeCall(call);
-                } else { // > 2
-                    dis.dispatch({
-                        action: "place_conference_call",
-                        room_id: payload.room_id,
-                        type: payload.type,
-                        remote_element: payload.remote_element,
-                        local_element: payload.local_element,
-                    });
-                }
-            }
-            break;
-        case 'place_conference_call':
-            console.info("Place conference call in %s", payload.room_id);
-            _startCallApp(payload.room_id, payload.type);
-            break;
-        case 'incoming_call':
-            {
-                if (callHandler.getAnyActiveCall()) {
-                    // ignore multiple incoming calls. in future, we may want a line-1/line-2 setup.
-                    // we avoid rejecting with "busy" in case the user wants to answer it on a different device.
-                    // in future we could signal a "local busy" as a warning to the caller.
-                    // see https://github.com/vector-im/vector-web/issues/1964
-                    return;
-                }
-
-                // if the runtime env doesn't do VoIP, stop here.
-                if (!MatrixClientPeg.get().supportsVoip()) {
-                    return;
-                }
-
-                const call = payload.call;
-                _setCallListeners(call);
-                _setCallState(call, call.roomId, "ringing");
-            }
-            break;
-        case 'hangup':
-            if (!calls[payload.room_id]) {
-                return; // no call to hangup
-            }
-            calls[payload.room_id].hangup();
-            _setCallState(null, payload.room_id, "ended");
-            break;
-        case 'answer':
-            if (!calls[payload.room_id]) {
-                return; // no call to answer
-            }
-            calls[payload.room_id].answer();
-            _setCallState(calls[payload.room_id], payload.room_id, "connected");
-            dis.dispatch({
-                action: "view_room",
-                room_id: payload.room_id,
-            });
-            break;
-    }
-}
-
-async function _startCallApp(roomId, type) {
-    dis.dispatch({
-        action: 'appsDrawer',
-        show: true,
-    });
-
-    const room = MatrixClientPeg.get().getRoom(roomId);
-    const currentJitsiWidgets = WidgetUtils.getRoomWidgetsOfType(room, WidgetType.JITSI);
-
-    if (WidgetEchoStore.roomHasPendingWidgetsOfType(roomId, currentJitsiWidgets, WidgetType.JITSI)) {
-        Modal.createTrackedDialog('Call already in progress', '', ErrorDialog, {
-            title: _t('Call in Progress'),
-            description: _t('A call is currently being placed!'),
-        });
-        return;
-    }
-
-    if (currentJitsiWidgets.length > 0) {
-        console.warn(
-            "Refusing to start conference call widget in " + roomId +
-            " a conference call widget is already present",
-        );
-
-        if (WidgetUtils.canUserModifyWidgets(roomId)) {
-            Modal.createTrackedDialog('Already have Jitsi Widget', '', QuestionDialog, {
-                title: _t('End Call'),
-                description: _t('Remove the group call from the room?'),
-                button: _t('End Call'),
-                cancelButton: _t('Cancel'),
-                onFinished: (endCall) => {
-                    if (endCall) {
-                        WidgetUtils.setRoomWidget(roomId, currentJitsiWidgets[0].getContent()['id']);
-                    }
-                },
-            });
-        } else {
-            Modal.createTrackedDialog('Already have Jitsi Widget', '', ErrorDialog, {
-                title: _t('Call in Progress'),
-                description: _t("You don't have permission to remove the call from the room"),
-            });
-        }
-        return;
-    }
-
-    const jitsiDomain = Jitsi.getInstance().preferredDomain;
-    const jitsiAuth = await Jitsi.getInstance().getJitsiAuth();
-    let confId;
-    if (jitsiAuth === 'openidtoken-jwt') {
-        // Create conference ID from room ID
-        // For compatibility with Jitsi, use base32 without padding.
-        // More details here:
-        // https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification
-        confId = base32.stringify(Buffer.from(roomId), { pad: false });
-    } else {
-        // Create a random human readable conference ID
-        confId = `JitsiConference${generateHumanReadableId()}`;
-    }
-
-    let widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl({auth: jitsiAuth});
-
-    // TODO: Remove URL hacks when the mobile clients eventually support v2 widgets
-    const parsedUrl = new URL(widgetUrl);
-    parsedUrl.search = ''; // set to empty string to make the URL class use searchParams instead
-    parsedUrl.searchParams.set('confId', confId);
-    widgetUrl = parsedUrl.toString();
-
-    const widgetData = {
-        conferenceId: confId,
-        isAudioOnly: type === 'voice',
-        domain: jitsiDomain,
-        auth: jitsiAuth,
-    };
-
-    const widgetId = (
-        'jitsi_' +
-        MatrixClientPeg.get().credentials.userId +
-        '_' +
-        Date.now()
-    );
-
-    WidgetUtils.setRoomWidget(roomId, widgetId, WidgetType.JITSI, widgetUrl, 'Jitsi', widgetData).then(() => {
-        console.log('Jitsi widget added');
-    }).catch((e) => {
-        if (e.errcode === 'M_FORBIDDEN') {
-            Modal.createTrackedDialog('Call Failed', '', ErrorDialog, {
-                title: _t('Permission Required'),
-                description: _t("You do not have permission to start a conference call in this room"),
-            });
-        }
-        console.error(e);
-    });
-}
-
-// FIXME: Nasty way of making sure we only register
-// with the dispatcher once
-if (!global.mxCallHandler) {
-    dis.register(_onAction);
-    // add empty handlers for media actions, otherwise the media keys
-    // end up causing the audio elements with our ring/ringback etc
-    // audio clips in to play.
-    if (navigator.mediaSession) {
-        navigator.mediaSession.setActionHandler('play', function() {});
-        navigator.mediaSession.setActionHandler('pause', function() {});
-        navigator.mediaSession.setActionHandler('seekbackward', function() {});
-        navigator.mediaSession.setActionHandler('seekforward', function() {});
-        navigator.mediaSession.setActionHandler('previoustrack', function() {});
-        navigator.mediaSession.setActionHandler('nexttrack', function() {});
-    }
-}
-
-const callHandler = {
-    getCallForRoom: function(roomId) {
-        let call = callHandler.getCall(roomId);
-        if (call) return call;
-
-        if (ConferenceHandler) {
-            call = ConferenceHandler.getConferenceCallForRoom(roomId);
-        }
-        if (call) return call;
-
-        return null;
-    },
-
-    getCall: function(roomId) {
-        return calls[roomId] || null;
-    },
-
-    getAnyActiveCall: function() {
-        const roomsWithCalls = Object.keys(calls);
-        for (let i = 0; i < roomsWithCalls.length; i++) {
-            if (calls[roomsWithCalls[i]] &&
-                    calls[roomsWithCalls[i]].call_state !== "ended") {
-                return calls[roomsWithCalls[i]];
-            }
-        }
-        return null;
-    },
-
-    /**
-     * The conference handler is a module that deals with implementation-specific
-     * multi-party calling implementations. Element passes in its own which creates
-     * a one-to-one call with a freeswitch conference bridge. As of July 2018,
-     * the de-facto way of conference calling is a Jitsi widget, so this is
-     * deprecated. It reamins here for two reasons:
-     *  1. So Element still supports joining existing freeswitch conference calls
-     *     (but doesn't support creating them). After a transition period, we can
-     *     remove support for joining them too.
-     *  2. To hide the one-to-one rooms that old-style conferencing creates. This
-     *     is much harder to remove: probably either we make Element leave & forget these
-     *     rooms after we remove support for joining freeswitch conferences, or we
-     *     accept that random rooms with cryptic users will suddently appear for
-     *     anyone who's ever used conference calling, or we are stuck with this
-     *     code forever.
-     *
-     * @param {object} confHandler The conference handler object
-     */
-    setConferenceHandler: function(confHandler) {
-        ConferenceHandler = confHandler;
-    },
-
-    getConferenceHandler: function() {
-        return ConferenceHandler;
-    },
-};
-// Only things in here which actually need to be global are the
-// calls list (done separately) and making sure we only register
-// with the dispatcher once (which uses this mechanism but checks
-// separately). This could be tidied up.
-if (global.mxCallHandler === undefined) {
-    global.mxCallHandler = callHandler;
-}
-
-export default global.mxCallHandler;

src/CallHandler.tsx

@@ -0,0 +1,573 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018 New Vector Ltd
+Copyright 2019, 2020 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.
+*/
+
+/*
+ * Manages a list of all the currently active calls.
+ *
+ * This handler dispatches when voip calls are added/updated/removed from this list:
+ * {
+ *   action: 'call_state'
+ *   room_id: <room ID of the call>
+ * }
+ *
+ * To know the state of the call, this handler exposes a getter to
+ * obtain the call for a room:
+ *   var call = CallHandler.getCall(roomId)
+ *   var state = call.call_state; // ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing
+ *
+ * This handler listens for and handles the following actions:
+ * {
+ *   action: 'place_call',
+ *   type: 'voice|video',
+ *   room_id: <room that the place call button was pressed in>
+ * }
+ *
+ * {
+ *   action: 'incoming_call'
+ *   call: MatrixCall
+ * }
+ *
+ * {
+ *   action: 'hangup'
+ *   room_id: <room that the hangup button was pressed in>
+ * }
+ *
+ * {
+ *   action: 'answer'
+ *   room_id: <room that the answer button was pressed in>
+ * }
+ */
+
+import React from 'react';
+
+import {MatrixClientPeg} from './MatrixClientPeg';
+import PlatformPeg from './PlatformPeg';
+import Modal from './Modal';
+import { _t } from './languageHandler';
+// @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 dis from './dispatcher/dispatcher';
+import WidgetUtils from './utils/WidgetUtils';
+import WidgetEchoStore from './stores/WidgetEchoStore';
+import SettingsStore from './settings/SettingsStore';
+import {generateHumanReadableId} from "./utils/NamingUtils";
+import {Jitsi} from "./widgets/Jitsi";
+import {WidgetType} from "./widgets/WidgetType";
+import {SettingLevel} from "./settings/SettingLevel";
+import { ActionPayload } from "./dispatcher/payloads";
+import {base32} from "rfc4648";
+
+import QuestionDialog from "./components/views/dialogs/QuestionDialog";
+import ErrorDialog from "./components/views/dialogs/ErrorDialog";
+import WidgetStore from "./stores/WidgetStore";
+import { WidgetMessagingStore } from "./stores/widgets/WidgetMessagingStore";
+import { ElementWidgetActions } from "./stores/widgets/ElementWidgetActions";
+import { MatrixCall, CallErrorCode, CallState, CallEvent, CallParty } from "matrix-js-sdk/lib/webrtc/call";
+import Analytics from './Analytics';
+
+enum AudioID {
+    Ring = 'ringAudio',
+    Ringback = 'ringbackAudio',
+    CallEnd = 'callendAudio',
+    Busy = 'busyAudio',
+}
+
+// Unlike 'CallType' in js-sdk, this one includes screen sharing
+// (because a screen sharing call is only a screen sharing call to the caller,
+// to the callee it's just a video call, at least as far as the current impl
+// is concerned).
+export enum PlaceCallType {
+    Voice = 'voice',
+    Video = 'video',
+    ScreenSharing = 'screensharing',
+}
+
+export default class CallHandler {
+    private calls = new Map<string, MatrixCall>();
+    private audioPromises = new Map<AudioID, Promise<void>>();
+
+    static sharedInstance() {
+        if (!window.mxCallHandler) {
+            window.mxCallHandler = new CallHandler()
+        }
+
+        return window.mxCallHandler;
+    }
+
+    constructor() {
+        dis.register(this.onAction);
+        // add empty handlers for media actions, otherwise the media keys
+        // end up causing the audio elements with our ring/ringback etc
+        // audio clips in to play.
+        if (navigator.mediaSession) {
+            navigator.mediaSession.setActionHandler('play', function() {});
+            navigator.mediaSession.setActionHandler('pause', function() {});
+            navigator.mediaSession.setActionHandler('seekbackward', function() {});
+            navigator.mediaSession.setActionHandler('seekforward', function() {});
+            navigator.mediaSession.setActionHandler('previoustrack', function() {});
+            navigator.mediaSession.setActionHandler('nexttrack', function() {});
+        }
+    }
+
+    getCallForRoom(roomId: string): MatrixCall {
+        return this.calls.get(roomId) || null;
+    }
+
+    getAnyActiveCall() {
+        for (const call of this.calls.values()) {
+            if (call.state !== CallState.Ended) {
+                return call;
+            }
+        }
+        return null;
+    }
+
+    play(audioId: AudioID) {
+        // TODO: Attach an invisible element for this instead
+        // which listens?
+        const audio = document.getElementById(audioId) as HTMLMediaElement;
+        if (audio) {
+            const playAudio = async () => {
+                try {
+                    // This still causes the chrome debugger to break on promise rejection if
+                    // the promise is rejected, even though we're catching the exception.
+                    await audio.play();
+                } catch (e) {
+                    // This is usually because the user hasn't interacted with the document,
+                    // or chrome doesn't think so and is denying the request. Not sure what
+                    // we can really do here...
+                    // https://github.com/vector-im/element-web/issues/7657
+                    console.log("Unable to play audio clip", e);
+                }
+            };
+            if (this.audioPromises.has(audioId)) {
+                this.audioPromises.set(audioId, this.audioPromises.get(audioId).then(() => {
+                    audio.load();
+                    return playAudio();
+                }));
+            } else {
+                this.audioPromises.set(audioId, playAudio());
+            }
+        }
+    }
+
+    pause(audioId: AudioID) {
+        // TODO: Attach an invisible element for this instead
+        // which listens?
+        const audio = document.getElementById(audioId) as HTMLMediaElement;
+        if (audio) {
+            if (this.audioPromises.has(audioId)) {
+                this.audioPromises.set(audioId, this.audioPromises.get(audioId).then(() => audio.pause()));
+            } else {
+                // pause doesn't return a promise, so just do it
+                audio.pause();
+            }
+        }
+    }
+
+    private matchesCallForThisRoom(call: MatrixCall) {
+        // We don't allow placing more than one call per room, but that doesn't mean there
+        // can't be more than one, eg. in a glare situation. This checks that the given call
+        // is the call we consider 'the' call for its room.
+        const callForThisRoom = this.getCallForRoom(call.roomId);
+        return callForThisRoom && call.callId === callForThisRoom.callId;
+    }
+
+    private setCallListeners(call: MatrixCall) {
+        call.on(CallEvent.Error, (err) => {
+            if (!this.matchesCallForThisRoom(call)) return;
+
+            Analytics.trackEvent('voip', 'callError', 'error', err);
+            console.error("Call error:", err);
+            if (
+                MatrixClientPeg.get().getTurnServers().length === 0 &&
+                SettingsStore.getValue("fallbackICEServerAllowed") === null
+            ) {
+                this.showICEFallbackPrompt();
+                return;
+            }
+
+            Modal.createTrackedDialog('Call Failed', '', ErrorDialog, {
+                title: _t('Call Failed'),
+                description: err.message,
+            });
+        });
+        call.on(CallEvent.Hangup, () => {
+            if (!this.matchesCallForThisRoom(call)) return;
+
+            Analytics.trackEvent('voip', 'callHangup');
+
+            this.removeCallForRoom(call.roomId);
+        });
+        call.on(CallEvent.State, (newState: CallState, oldState: CallState) => {
+            if (!this.matchesCallForThisRoom(call)) return;
+
+            this.setCallState(call, newState);
+
+            switch (oldState) {
+                case CallState.Ringing:
+                    this.pause(AudioID.Ring);
+                    break;
+                case CallState.InviteSent:
+                    this.pause(AudioID.Ringback);
+                    break;
+            }
+
+            switch (newState) {
+                case CallState.Ringing:
+                    this.play(AudioID.Ring);
+                    break;
+                case CallState.InviteSent:
+                    this.play(AudioID.Ringback);
+                    break;
+                case CallState.Ended:
+                    Analytics.trackEvent('voip', 'callEnded', 'hangupReason', call.hangupReason);
+                    this.removeCallForRoom(call.roomId);
+                    if (oldState === CallState.InviteSent && (
+                        call.hangupParty === CallParty.Remote ||
+                        (call.hangupParty === CallParty.Local && call.hangupReason === CallErrorCode.InviteTimeout)
+                    )) {
+                        this.play(AudioID.Busy);
+                        let title;
+                        let description;
+                        if (call.hangupReason === CallErrorCode.UserHangup) {
+                            title = _t("Call Declined");
+                            description = _t("The other party declined the call.");
+                        } else if (call.hangupReason === CallErrorCode.InviteTimeout) {
+                            title = _t("Call Failed");
+                            // XXX: full stop appended as some relic here, but these
+                            // strings need proper input from design anyway, so let's
+                            // not change this string until we have a proper one.
+                            description = _t('The remote side failed to pick up') + '.';
+                        } else {
+                            title = _t("Call Failed");
+                            description = _t("The call could not be established");
+                        }
+
+                        Modal.createTrackedDialog('Call Handler', 'Call Failed', ErrorDialog, {
+                            title, description,
+                        });
+                    } else {
+                        this.play(AudioID.CallEnd);
+                    }
+            }
+        });
+        call.on(CallEvent.Replaced, (newCall: MatrixCall) => {
+            if (!this.matchesCallForThisRoom(call)) return;
+
+            console.log(`Call ID ${call.callId} is being replaced by call ID ${newCall.callId}`);
+
+            if (call.state === CallState.Ringing) {
+                this.pause(AudioID.Ring);
+            } else if (call.state === CallState.InviteSent) {
+                this.pause(AudioID.Ringback);
+            }
+
+            this.calls.set(newCall.roomId, newCall);
+            this.setCallListeners(newCall);
+            this.setCallState(newCall, newCall.state);
+        });
+    }
+
+    private setCallState(call: MatrixCall, status: CallState) {
+        console.log(
+            `Call state in ${call.roomId} changed to ${status}`,
+        );
+
+        dis.dispatch({
+            action: 'call_state',
+            room_id: call.roomId,
+            state: status,
+        });
+    }
+
+    private removeCallForRoom(roomId: string) {
+        this.calls.delete(roomId);
+    }
+
+    private showICEFallbackPrompt() {
+        const cli = MatrixClientPeg.get();
+        const code = sub => <code>{sub}</code>;
+        Modal.createTrackedDialog('No TURN servers', '', QuestionDialog, {
+            title: _t("Call failed due to misconfigured server"),
+            description: <div>
+                <p>{_t(
+                    "Please ask the administrator of your homeserver " +
+                    "(<code>%(homeserverDomain)s</code>) to configure a TURN server in " +
+                    "order for calls to work reliably.",
+                    { homeserverDomain: cli.getDomain() }, { code },
+                )}</p>
+                <p>{_t(
+                    "Alternatively, you can try to use the public server at " +
+                    "<code>turn.matrix.org</code>, but this will not be as reliable, and " +
+                    "it will share your IP address with that server. You can also manage " +
+                    "this in Settings.",
+                    null, { code },
+                )}</p>
+            </div>,
+            button: _t('Try using turn.matrix.org'),
+            cancelButton: _t('OK'),
+            onFinished: (allow) => {
+                SettingsStore.setValue("fallbackICEServerAllowed", null, SettingLevel.DEVICE, allow);
+                cli.setFallbackICEServerAllowed(allow);
+            },
+        }, null, true);
+    }
+
+
+    private placeCall(
+        roomId: string, type: PlaceCallType,
+        localElement: HTMLVideoElement, remoteElement: HTMLVideoElement,
+    ) {
+        Analytics.trackEvent('voip', 'placeCall', 'type', type);
+        const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), roomId);
+        this.calls.set(roomId, call);
+        this.setCallListeners(call);
+        if (type === PlaceCallType.Voice) {
+            call.placeVoiceCall();
+        } else if (type === 'video') {
+            call.placeVideoCall(
+                remoteElement,
+                localElement,
+            );
+        } else if (type === PlaceCallType.ScreenSharing) {
+            const screenCapErrorString = PlatformPeg.get().screenCaptureErrorString();
+            if (screenCapErrorString) {
+                this.removeCallForRoom(roomId);
+                console.log("Can't capture screen: " + screenCapErrorString);
+                Modal.createTrackedDialog('Call Handler', 'Unable to capture screen', ErrorDialog, {
+                    title: _t('Unable to capture screen'),
+                    description: screenCapErrorString,
+                });
+                return;
+            }
+            call.placeScreenSharingCall(remoteElement, localElement);
+        } else {
+            console.error("Unknown conf call type: %s", type);
+        }
+    }
+
+    private onAction = (payload: ActionPayload) => {
+        switch (payload.action) {
+            case 'place_call':
+                {
+                    if (this.getAnyActiveCall()) {
+                        Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, {
+                            title: _t('Existing Call'),
+                            description: _t('You are already in a call.'),
+                        });
+                        return; // don't allow >1 call to be placed.
+                    }
+
+                    // if the runtime env doesn't do VoIP, whine.
+                    if (!MatrixClientPeg.get().supportsVoip()) {
+                        Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
+                            title: _t('VoIP is unsupported'),
+                            description: _t('You cannot place VoIP calls in this browser.'),
+                        });
+                        return;
+                    }
+
+                    const room = MatrixClientPeg.get().getRoom(payload.room_id);
+                    if (!room) {
+                        console.error("Room %s does not exist.", payload.room_id);
+                        return;
+                    }
+
+                    const members = room.getJoinedMembers();
+                    if (members.length <= 1) {
+                        Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, {
+                            description: _t('You cannot place a call with yourself.'),
+                        });
+                        return;
+                    } else if (members.length === 2) {
+                        console.info("Place %s call in %s", payload.type, payload.room_id);
+
+                        this.placeCall(payload.room_id, payload.type, payload.local_element, payload.remote_element);
+                    } else { // > 2
+                        dis.dispatch({
+                            action: "place_conference_call",
+                            room_id: payload.room_id,
+                            type: payload.type,
+                            remote_element: payload.remote_element,
+                            local_element: payload.local_element,
+                        });
+                    }
+                }
+                break;
+            case 'place_conference_call':
+                console.info("Place conference call in %s", payload.room_id);
+                Analytics.trackEvent('voip', 'placeConferenceCall');
+                this.startCallApp(payload.room_id, payload.type);
+                break;
+            case 'end_conference':
+                console.info("Terminating conference call in %s", payload.room_id);
+                this.terminateCallApp(payload.room_id);
+                break;
+            case 'hangup_conference':
+                console.info("Leaving conference call in %s", payload.room_id);
+                this.hangupCallApp(payload.room_id);
+                break;
+            case 'incoming_call':
+                {
+                    if (this.getAnyActiveCall()) {
+                        // ignore multiple incoming calls. in future, we may want a line-1/line-2 setup.
+                        // we avoid rejecting with "busy" in case the user wants to answer it on a different device.
+                        // in future we could signal a "local busy" as a warning to the caller.
+                        // see https://github.com/vector-im/vector-web/issues/1964
+                        return;
+                    }
+
+                    // if the runtime env doesn't do VoIP, stop here.
+                    if (!MatrixClientPeg.get().supportsVoip()) {
+                        return;
+                    }
+
+                    const call = payload.call as MatrixCall;
+                    Analytics.trackEvent('voip', 'receiveCall', 'type', call.type);
+                    this.calls.set(call.roomId, call)
+                    this.setCallListeners(call);
+                }
+                break;
+            case 'hangup':
+            case 'reject':
+                if (!this.calls.get(payload.room_id)) {
+                    return; // no call to hangup
+                }
+                if (payload.action === 'reject') {
+                    this.calls.get(payload.room_id).reject();
+                } else {
+                    this.calls.get(payload.room_id).hangup(CallErrorCode.UserHangup, false);
+                }
+                this.removeCallForRoom(payload.room_id);
+                break;
+            case 'answer':
+                if (!this.calls.has(payload.room_id)) {
+                    return; // no call to answer
+                }
+                this.calls.get(payload.room_id).answer();
+                dis.dispatch({
+                    action: "view_room",
+                    room_id: payload.room_id,
+                });
+                break;
+        }
+    }
+
+    private async startCallApp(roomId: string, type: string) {
+        dis.dispatch({
+            action: 'appsDrawer',
+            show: true,
+        });
+
+        // prevent double clicking the call button
+        const room = MatrixClientPeg.get().getRoom(roomId);
+        const currentJitsiWidgets = WidgetUtils.getRoomWidgetsOfType(room, WidgetType.JITSI);
+        const hasJitsi = currentJitsiWidgets.length > 0
+            || WidgetEchoStore.roomHasPendingWidgetsOfType(roomId, currentJitsiWidgets, WidgetType.JITSI);
+        if (hasJitsi) {
+            Modal.createTrackedDialog('Call already in progress', '', ErrorDialog, {
+                title: _t('Call in Progress'),
+                description: _t('A call is currently being placed!'),
+            });
+            return;
+        }
+
+        const jitsiDomain = Jitsi.getInstance().preferredDomain;
+        const jitsiAuth = await Jitsi.getInstance().getJitsiAuth();
+        let confId;
+        if (jitsiAuth === 'openidtoken-jwt') {
+            // Create conference ID from room ID
+            // For compatibility with Jitsi, use base32 without padding.
+            // More details here:
+            // https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification
+            confId = base32.stringify(Buffer.from(roomId), { pad: false });
+        } else {
+            // Create a random human readable conference ID
+            confId = `JitsiConference${generateHumanReadableId()}`;
+        }
+
+        let widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl({auth: jitsiAuth});
+
+        // TODO: Remove URL hacks when the mobile clients eventually support v2 widgets
+        const parsedUrl = new URL(widgetUrl);
+        parsedUrl.search = ''; // set to empty string to make the URL class use searchParams instead
+        parsedUrl.searchParams.set('confId', confId);
+        widgetUrl = parsedUrl.toString();
+
+        const widgetData = {
+            conferenceId: confId,
+            isAudioOnly: type === 'voice',
+            domain: jitsiDomain,
+            auth: jitsiAuth,
+        };
+
+        const widgetId = (
+            'jitsi_' +
+            MatrixClientPeg.get().credentials.userId +
+            '_' +
+            Date.now()
+        );
+
+        WidgetUtils.setRoomWidget(roomId, widgetId, WidgetType.JITSI, widgetUrl, 'Jitsi', widgetData).then(() => {
+            console.log('Jitsi widget added');
+        }).catch((e) => {
+            if (e.errcode === 'M_FORBIDDEN') {
+                Modal.createTrackedDialog('Call Failed', '', ErrorDialog, {
+                    title: _t('Permission Required'),
+                    description: _t("You do not have permission to start a conference call in this room"),
+                });
+            }
+            console.error(e);
+        });
+    }
+
+    private terminateCallApp(roomId: string) {
+        Modal.createTrackedDialog('Confirm Jitsi Terminate', '', QuestionDialog, {
+            hasCancelButton: true,
+            title: _t("End conference"),
+            description: _t("This will end the conference for everyone. Continue?"),
+            button: _t("End conference"),
+            onFinished: (proceed) => {
+                if (!proceed) return;
+
+                // We'll just obliterate them all. There should only ever be one, but might as well
+                // be safe.
+                const roomInfo = WidgetStore.instance.getRoom(roomId);
+                const jitsiWidgets = roomInfo.widgets.filter(w => WidgetType.JITSI.matches(w.type));
+                jitsiWidgets.forEach(w => {
+                    // setting invalid content removes it
+                    WidgetUtils.setRoomWidget(roomId, w.id);
+                });
+            },
+        });
+    }
+
+    private hangupCallApp(roomId: string) {
+        const roomInfo = WidgetStore.instance.getRoom(roomId);
+        if (!roomInfo) return; // "should never happen" clauses go here
+
+        const jitsiWidgets = roomInfo.widgets.filter(w => WidgetType.JITSI.matches(w.type));
+        jitsiWidgets.forEach(w => {
+            const messaging = WidgetMessagingStore.instance.getMessagingForId(w.id);
+            if (!messaging) return; // more "should never happen" words
+
+            messaging.transport.send(ElementWidgetActions.HangupCall, {});
+        });
+    }
+}

src/ContentMessages.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from "react";
-import extend from './extend';
 import dis from './dispatcher/dispatcher';
 import {MatrixClientPeg} from './MatrixClientPeg';
 import {MatrixClient} from "matrix-js-sdk/src/client";
@@ -497,7 +496,7 @@ export default class ContentMessages {
             if (file.type.indexOf('image/') === 0) {
                 content.msgtype = 'm.image';
                 infoForImageFile(matrixClient, roomId, file).then((imageInfo) => {
-                    extend(content.info, imageInfo);
+                    Object.assign(content.info, imageInfo);
                     resolve();
                 }, (e) => {
                     console.error(e);
@@ -510,7 +509,7 @@ export default class ContentMessages {
             } else if (file.type.indexOf('video/') === 0) {
                 content.msgtype = 'm.video';
                 infoForVideoFile(matrixClient, roomId, file).then((videoInfo) => {
-                    extend(content.info, videoInfo);
+                    Object.assign(content.info, videoInfo);
                     resolve();
                 }, (e) => {
                     content.msgtype = 'm.file';

src/DateUtils.ts

@@ -17,7 +17,7 @@ limitations under the License.
 
 import { _t } from './languageHandler';
 
-function getDaysArray() {
+function getDaysArray(): string[] {
     return [
         _t('Sun'),
         _t('Mon'),
@@ -29,7 +29,7 @@ function getDaysArray() {
     ];
 }
 
-function getMonthsArray() {
+function getMonthsArray(): string[] {
     return [
         _t('Jan'),
         _t('Feb'),
@@ -46,11 +46,11 @@ function getMonthsArray() {
     ];
 }
 
-function pad(n) {
+function pad(n: number): string {
     return (n < 10 ? '0' : '') + n;
 }
 
-function twelveHourTime(date, showSeconds=false) {
+function twelveHourTime(date: Date, showSeconds = false): string {
     let hours = date.getHours() % 12;
     const minutes = pad(date.getMinutes());
     const ampm = date.getHours() >= 12 ? _t('PM') : _t('AM');
@@ -62,7 +62,7 @@ function twelveHourTime(date, showSeconds=false) {
     return `${hours}:${minutes}${ampm}`;
 }
 
-export function formatDate(date, showTwelveHour=false) {
+export function formatDate(date: Date, showTwelveHour = false): string {
     const now = new Date();
     const days = getDaysArray();
     const months = getMonthsArray();
@@ -86,7 +86,7 @@ export function formatDate(date, showTwelveHour=false) {
     return formatFullDate(date, showTwelveHour);
 }
 
-export function formatFullDateNoTime(date) {
+export function formatFullDateNoTime(date: Date): string {
     const days = getDaysArray();
     const months = getMonthsArray();
     return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s', {
@@ -97,7 +97,7 @@ export function formatFullDateNoTime(date) {
     });
 }
 
-export function formatFullDate(date, showTwelveHour=false) {
+export function formatFullDate(date: Date, showTwelveHour = false): string {
     const days = getDaysArray();
     const months = getMonthsArray();
     return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s', {
@@ -109,14 +109,14 @@ export function formatFullDate(date, showTwelveHour=false) {
     });
 }
 
-export function formatFullTime(date, showTwelveHour=false) {
+export function formatFullTime(date: Date, showTwelveHour = false): string {
     if (showTwelveHour) {
         return twelveHourTime(date, true);
     }
     return pad(date.getHours()) + ':' + pad(date.getMinutes()) + ':' + pad(date.getSeconds());
 }
 
-export function formatTime(date, showTwelveHour=false) {
+export function formatTime(date: Date, showTwelveHour = false): string {
     if (showTwelveHour) {
         return twelveHourTime(date);
     }
@@ -124,7 +124,7 @@ export function formatTime(date, showTwelveHour=false) {
 }
 
 const MILLIS_IN_DAY = 86400000;
-export function wantsDateSeparator(prevEventDate, nextEventDate) {
+export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): boolean {
     if (!nextEventDate || !prevEventDate) {
         return false;
     }

src/FromWidgetPostMessageApi.js

@@ -1,275 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-Copyright 2019 Travis Ralston
-Copyright 2019 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 URL from 'url';
-import dis from './dispatcher/dispatcher';
-import WidgetMessagingEndpoint from './WidgetMessagingEndpoint';
-import ActiveWidgetStore from './stores/ActiveWidgetStore';
-import {MatrixClientPeg} from "./MatrixClientPeg";
-import RoomViewStore from "./stores/RoomViewStore";
-import {IntegrationManagers} from "./integrations/IntegrationManagers";
-import SettingsStore from "./settings/SettingsStore";
-import {Capability} from "./widgets/WidgetApi";
-import {objectClone} from "./utils/objects";
-
-const WIDGET_API_VERSION = '0.0.2'; // Current API version
-const SUPPORTED_WIDGET_API_VERSIONS = [
-    '0.0.1',
-    '0.0.2',
-];
-const INBOUND_API_NAME = 'fromWidget';
-
-// Listen for and handle incoming requests using the 'fromWidget' postMessage
-// API and initiate responses
-export default class FromWidgetPostMessageApi {
-    constructor() {
-        this.widgetMessagingEndpoints = [];
-        this.widgetListeners = {}; // {action: func[]}
-
-        this.start = this.start.bind(this);
-        this.stop = this.stop.bind(this);
-        this.onPostMessage = this.onPostMessage.bind(this);
-    }
-
-    start() {
-        window.addEventListener('message', this.onPostMessage);
-    }
-
-    stop() {
-        window.removeEventListener('message', this.onPostMessage);
-    }
-
-    /**
-     * Adds a listener for a given action
-     * @param {string} action The action to listen for.
-     * @param {Function} callbackFn A callback function to be called when the action is
-     * encountered. Called with two parameters: the interesting request information and
-     * the raw event received from the postMessage API. The raw event is meant to be used
-     * for sendResponse and similar functions.
-     */
-    addListener(action, callbackFn) {
-        if (!this.widgetListeners[action]) this.widgetListeners[action] = [];
-        this.widgetListeners[action].push(callbackFn);
-    }
-
-    /**
-     * Removes a listener for a given action.
-     * @param {string} action The action that was subscribed to.
-     * @param {Function} callbackFn The original callback function that was used to subscribe
-     * to updates.
-     */
-    removeListener(action, callbackFn) {
-        if (!this.widgetListeners[action]) return;
-
-        const idx = this.widgetListeners[action].indexOf(callbackFn);
-        if (idx !== -1) this.widgetListeners[action].splice(idx, 1);
-    }
-
-    /**
-     * Register a widget endpoint for trusted postMessage communication
-     * @param {string} widgetId    Unique widget identifier
-     * @param {string} endpointUrl Widget wurl origin (protocol + (optional port) + host)
-     */
-    addEndpoint(widgetId, endpointUrl) {
-        const u = URL.parse(endpointUrl);
-        if (!u || !u.protocol || !u.host) {
-            console.warn('Add FromWidgetPostMessageApi endpoint - Invalid origin:', endpointUrl);
-            return;
-        }
-
-        const origin = u.protocol + '//' + u.host;
-        const endpoint = new WidgetMessagingEndpoint(widgetId, origin);
-        if (this.widgetMessagingEndpoints.some(function(ep) {
-            return (ep.widgetId === widgetId && ep.endpointUrl === endpointUrl);
-        })) {
-            // Message endpoint already registered
-            console.warn('Add FromWidgetPostMessageApi - Endpoint already registered');
-            return;
-        } else {
-            console.log(`Adding fromWidget messaging endpoint for ${widgetId}`, endpoint);
-            this.widgetMessagingEndpoints.push(endpoint);
-        }
-    }
-
-    /**
-     * De-register a widget endpoint from trusted communication sources
-     * @param  {string} widgetId Unique widget identifier
-     * @param  {string} endpointUrl Widget wurl origin (protocol + (optional port) + host)
-     * @return {boolean} True if endpoint was successfully removed
-     */
-    removeEndpoint(widgetId, endpointUrl) {
-        const u = URL.parse(endpointUrl);
-        if (!u || !u.protocol || !u.host) {
-            console.warn('Remove widget messaging endpoint - Invalid origin');
-            return;
-        }
-
-        const origin = u.protocol + '//' + u.host;
-        if (this.widgetMessagingEndpoints && this.widgetMessagingEndpoints.length > 0) {
-            const length = this.widgetMessagingEndpoints.length;
-            this.widgetMessagingEndpoints = this.widgetMessagingEndpoints
-                .filter((endpoint) => endpoint.widgetId !== widgetId || endpoint.endpointUrl !== origin);
-            return (length > this.widgetMessagingEndpoints.length);
-        }
-        return false;
-    }
-
-    /**
-     * Handle widget postMessage events
-     * Messages are only handled where a valid, registered messaging endpoints
-     * @param  {Event} event Event to handle
-     * @return {undefined}
-     */
-    onPostMessage(event) {
-        if (!event.origin) { // Handle chrome
-            event.origin = event.originalEvent.origin;
-        }
-
-        // Event origin is empty string if undefined
-        if (
-            event.origin.length === 0 ||
-            !this.trustedEndpoint(event.origin) ||
-            event.data.api !== INBOUND_API_NAME ||
-            !event.data.widgetId
-        ) {
-            return; // don't log this - debugging APIs like to spam postMessage which floods the log otherwise
-        }
-
-        // Call any listeners we have registered
-        if (this.widgetListeners[event.data.action]) {
-            for (const fn of this.widgetListeners[event.data.action]) {
-                fn(event.data, event);
-            }
-        }
-
-        // Although the requestId is required, we don't use it. We'll be nice and process the message
-        // if the property is missing, but with a warning for widget developers.
-        if (!event.data.requestId) {
-            console.warn("fromWidget action '" + event.data.action + "' does not have a requestId");
-        }
-
-        const action = event.data.action;
-        const widgetId = event.data.widgetId;
-        if (action === 'content_loaded') {
-            console.log('Widget reported content loaded for', widgetId);
-            dis.dispatch({
-                action: 'widget_content_loaded',
-                widgetId: widgetId,
-            });
-            this.sendResponse(event, {success: true});
-        } else if (action === 'supported_api_versions') {
-            this.sendResponse(event, {
-                api: INBOUND_API_NAME,
-                supported_versions: SUPPORTED_WIDGET_API_VERSIONS,
-            });
-        } else if (action === 'api_version') {
-            this.sendResponse(event, {
-                api: INBOUND_API_NAME,
-                version: WIDGET_API_VERSION,
-            });
-        } else if (action === 'm.sticker') {
-            // console.warn('Got sticker message from widget', widgetId);
-            // NOTE -- The widgetData field is deprecated (in favour of the 'data' field) and will be removed eventually
-            const data = event.data.data || event.data.widgetData;
-            dis.dispatch({action: 'm.sticker', data: data, widgetId: event.data.widgetId});
-        } else if (action === 'integration_manager_open') {
-            // Close the stickerpicker
-            dis.dispatch({action: 'stickerpicker_close'});
-            // Open the integration manager
-            // NOTE -- The widgetData field is deprecated (in favour of the 'data' field) and will be removed eventually
-            const data = event.data.data || event.data.widgetData;
-            const integType = (data && data.integType) ? data.integType : null;
-            const integId = (data && data.integId) ? data.integId : null;
-
-            // TODO: Open the right integration manager for the widget
-            if (SettingsStore.getValue("feature_many_integration_managers")) {
-                IntegrationManagers.sharedInstance().openAll(
-                    MatrixClientPeg.get().getRoom(RoomViewStore.getRoomId()),
-                    `type_${integType}`,
-                    integId,
-                );
-            } else {
-                IntegrationManagers.sharedInstance().getPrimaryManager().open(
-                    MatrixClientPeg.get().getRoom(RoomViewStore.getRoomId()),
-                    `type_${integType}`,
-                    integId,
-                );
-            }
-        } else if (action === 'set_always_on_screen') {
-            // This is a new message: there is no reason to support the deprecated widgetData here
-            const data = event.data.data;
-            const val = data.value;
-
-            if (ActiveWidgetStore.widgetHasCapability(widgetId, Capability.AlwaysOnScreen)) {
-                ActiveWidgetStore.setWidgetPersistence(widgetId, val);
-            }
-        } else if (action === 'get_openid') {
-            // Handled by caller
-        } else {
-            console.warn('Widget postMessage event unhandled');
-            this.sendError(event, {message: 'The postMessage was unhandled'});
-        }
-    }
-
-    /**
-     * Check if message origin is registered as trusted
-     * @param  {string} origin PostMessage origin to check
-     * @return {boolean}       True if trusted
-     */
-    trustedEndpoint(origin) {
-        if (!origin) {
-            return false;
-        }
-
-        return this.widgetMessagingEndpoints.some((endpoint) => {
-            // TODO / FIXME -- Should this also check the widgetId?
-            return endpoint.endpointUrl === origin;
-        });
-    }
-
-    /**
-     * Send a postmessage response to a postMessage request
-     * @param  {Event} event  The original postMessage request event
-     * @param  {Object} res   Response data
-     */
-    sendResponse(event, res) {
-        const data = objectClone(event.data);
-        data.response = res;
-        event.source.postMessage(data, event.origin);
-    }
-
-    /**
-     * Send an error response to a postMessage request
-     * @param  {Event} event        The original postMessage request event
-     * @param  {string} msg         Error message
-     * @param  {Error} nestedError  Nested error event (optional)
-     */
-    sendError(event, msg, nestedError) {
-        console.error('Action:' + event.data.action + ' failed with message: ' + msg);
-        const data = objectClone(event.data);
-        data.response = {
-            error: {
-                message: msg,
-            },
-        };
-        if (nestedError) {
-            data.response.error._error = nestedError;
-        }
-        event.source.postMessage(data, event.origin);
-    }
-}

src/HtmlUtils.tsx

@@ -19,6 +19,7 @@ limitations under the License.
 
 import React from 'react';
 import sanitizeHtml from 'sanitize-html';
+import { IExtendedSanitizeOptions } from './@types/sanitize-html';
 import * as linkify from 'linkifyjs';
 import linkifyMatrix from './linkify-matrix';
 import _linkifyElement from 'linkifyjs/element';
@@ -52,7 +53,7 @@ const BIGEMOJI_REGEX = new RegExp(`^(${EMOJIBASE_REGEX.source})+$`, 'i');
 
 const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
 
-const PERMITTED_URL_SCHEMES = ['http', 'https', 'ftp', 'mailto', 'magnet'];
+export const PERMITTED_URL_SCHEMES = ['http', 'https', 'ftp', 'mailto', 'magnet'];
 
 /*
  * Return true if the given string contains emoji
@@ -151,7 +152,7 @@ export function isUrlPermitted(inputUrl: string) {
     }
 }
 
-const transformTags: sanitizeHtml.IOptions["transformTags"] = { // custom to matrix
+const transformTags: IExtendedSanitizeOptions["transformTags"] = { // custom to matrix
     // add blank targets to all hyperlinks except vector URLs
     'a': function(tagName: string, attribs: sanitizeHtml.Attributes) {
         if (attribs.href) {
@@ -224,7 +225,7 @@ const transformTags: sanitizeHtml.IOptions["transformTags"] = { // custom to mat
     },
 };
 
-const sanitizeHtmlParams: sanitizeHtml.IOptions = {
+const sanitizeHtmlParams: IExtendedSanitizeOptions = {
     allowedTags: [
         'font', // custom to matrix for IRC-style font coloring
         'del', // for markdown
@@ -245,13 +246,14 @@ const sanitizeHtmlParams: sanitizeHtml.IOptions = {
     selfClosing: ['img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta'],
     // URL schemes we permit
     allowedSchemes: PERMITTED_URL_SCHEMES,
-
     allowProtocolRelative: false,
     transformTags,
+    // 50 levels deep "should be enough for anyone"
+    nestingLimit: 50,
 };
 
 // this is the same as the above except with less rewriting
-const composerSanitizeHtmlParams: sanitizeHtml.IOptions = {
+const composerSanitizeHtmlParams: IExtendedSanitizeOptions = {
     ...sanitizeHtmlParams,
     transformTags: {
         'code': transformTags['code'],

src/Lifecycle.ts

@@ -17,9 +17,13 @@ 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 { InvalidStoreError } from "matrix-js-sdk/src/errors";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import {IMatrixClientCreds, MatrixClientPeg} from './MatrixClientPeg';
+import SecurityCustomisations from "./customisations/Security";
 import EventIndexPeg from './indexing/EventIndexPeg';
 import createMatrixClient from './utils/createMatrixClient';
 import Analytics from './Analytics';
@@ -47,44 +51,46 @@ import ThreepidInviteStore from "./stores/ThreepidInviteStore";
 const HOMESERVER_URL_KEY = "mx_hs_url";
 const ID_SERVER_URL_KEY = "mx_is_url";
 
+interface ILoadSessionOpts {
+    enableGuest?: boolean;
+    guestHsUrl?: string;
+    guestIsUrl?: string;
+    ignoreGuest?: boolean;
+    defaultDeviceDisplayName?: string;
+    fragmentQueryParams?: Record<string, string>;
+}
+
 /**
  * Called at startup, to attempt to build a logged-in Matrix session. It tries
  * a number of things:
  *
- *
  * 1. if we have a guest access token in the fragment query params, it uses
  *    that.
- *
  * 2. if an access token is stored in local storage (from a previous session),
  *    it uses that.
- *
  * 3. it attempts to auto-register as a guest user.
  *
  * If any of steps 1-4 are successful, it will call {_doSetLoggedIn}, which in
  * turn will raise on_logged_in and will_start_client events.
  *
- * @param {object} opts
- *
- * @param {object} opts.fragmentQueryParams: string->string map of the
+ * @param {object} [opts]
+ * @param {object} [opts.fragmentQueryParams]: string->string map of the
  *     query-parameters extracted from the #-fragment of the starting URI.
- *
- * @param {boolean} opts.enableGuest: set to true to enable guest access tokens
- *     and auto-guest registrations.
- *
- * @params {string} opts.guestHsUrl: homeserver URL. Only used if enableGuest is
- *     true; defines the HS to register against.
- *
- * @params {string} opts.guestIsUrl: homeserver URL. Only used if enableGuest is
- *     true; defines the IS to use.
- *
- * @params {bool} opts.ignoreGuest: If the stored session is a guest account, ignore
- *     it and don't load it.
- *
+ * @param {boolean} [opts.enableGuest]: set to true to enable guest access
+ *     tokens and auto-guest registrations.
+ * @param {string} [opts.guestHsUrl]: homeserver URL. Only used if enableGuest
+ *     is true; defines the HS to register against.
+ * @param {string} [opts.guestIsUrl]: homeserver URL. Only used if enableGuest
+ *     is true; defines the IS to use.
+ * @param {bool} [opts.ignoreGuest]: If the stored session is a guest account,
+ *     ignore it and don't load it.
+ * @param {string} [opts.defaultDeviceDisplayName]: Default display name to use
+ *     when registering as a guest.
  * @returns {Promise} a promise which resolves when the above process completes.
  *     Resolves to `true` if we ended up starting a session, or `false` if we
  *     failed.
  */
-export async function loadSession(opts) {
+export async function loadSession(opts: ILoadSessionOpts = {}): Promise<boolean> {
     try {
         let enableGuest = opts.enableGuest || false;
         const guestHsUrl = opts.guestHsUrl;
@@ -97,12 +103,13 @@ export async function loadSession(opts) {
             enableGuest = false;
         }
 
-        if (enableGuest &&
+        if (
+            enableGuest &&
             fragmentQueryParams.guest_user_id &&
             fragmentQueryParams.guest_access_token
-           ) {
+        ) {
             console.log("Using guest access credentials");
-            return _doSetLoggedIn({
+            return doSetLoggedIn({
                 userId: fragmentQueryParams.guest_user_id,
                 accessToken: fragmentQueryParams.guest_access_token,
                 homeserverUrl: guestHsUrl,
@@ -110,7 +117,7 @@ export async function loadSession(opts) {
                 guest: true,
             }, true).then(() => true);
         }
-        const success = await _restoreFromLocalStorage({
+        const success = await restoreFromLocalStorage({
             ignoreGuest: Boolean(opts.ignoreGuest),
         });
         if (success) {
@@ -118,7 +125,7 @@ export async function loadSession(opts) {
         }
 
         if (enableGuest) {
-            return _registerAsGuest(guestHsUrl, guestIsUrl, defaultDeviceDisplayName);
+            return registerAsGuest(guestHsUrl, guestIsUrl, defaultDeviceDisplayName);
         }
 
         // fall back to welcome screen
@@ -129,7 +136,7 @@ export async function loadSession(opts) {
             // need to show the general failure dialog. Instead, just go back to welcome.
             return false;
         }
-        return _handleLoadSessionFailure(e);
+        return handleLoadSessionFailure(e);
     }
 }
 
@@ -139,7 +146,7 @@ export async function loadSession(opts) {
  * is associated with them. The session is not loaded.
  * @returns {String} The persisted session's owner, if an owner exists. Null otherwise.
  */
-export function getStoredSessionOwner() {
+export function getStoredSessionOwner(): string {
     const {hsUrl, userId, accessToken} = getLocalStorageSessionVars();
     return hsUrl && userId && accessToken ? userId : null;
 }
@@ -148,7 +155,7 @@ export function getStoredSessionOwner() {
  * @returns {bool} True if the stored session is for a guest user or false if it is
  *     for a real user. If there is no stored session, return null.
  */
-export function getStoredSessionIsGuest() {
+export function getStoredSessionIsGuest(): boolean {
     const sessVars = getLocalStorageSessionVars();
     return sessVars.hsUrl && sessVars.userId && sessVars.accessToken ? sessVars.isGuest : null;
 }
@@ -163,7 +170,10 @@ export function getStoredSessionIsGuest() {
  * @returns {Promise} promise which resolves to true if we completed the token
  *    login, else false
  */
-export function attemptTokenLogin(queryParams, defaultDeviceDisplayName) {
+export function attemptTokenLogin(
+    queryParams: Record<string, string>,
+    defaultDeviceDisplayName?: string,
+): Promise<boolean> {
     if (!queryParams.loginToken) {
         return Promise.resolve(false);
     }
@@ -184,8 +194,10 @@ export function attemptTokenLogin(queryParams, defaultDeviceDisplayName) {
         },
     ).then(function(creds) {
         console.log("Logged in with token");
-        return _clearStorage().then(() => {
-            _persistCredentialsToLocalStorage(creds);
+        return clearStorage().then(() => {
+            persistCredentialsToLocalStorage(creds);
+            // remember that we just logged in
+            sessionStorage.setItem("mx_fresh_login", String(true));
             return true;
         });
     }).catch((err) => {
@@ -195,8 +207,8 @@ export function attemptTokenLogin(queryParams, defaultDeviceDisplayName) {
     });
 }
 
-export function handleInvalidStoreError(e) {
-    if (e.reason === Matrix.InvalidStoreError.TOGGLED_LAZY_LOADING) {
+export function handleInvalidStoreError(e: InvalidStoreError): Promise<void> {
+    if (e.reason === InvalidStoreError.TOGGLED_LAZY_LOADING) {
         return Promise.resolve().then(() => {
             const lazyLoadEnabled = e.value;
             if (lazyLoadEnabled) {
@@ -229,7 +241,11 @@ export function handleInvalidStoreError(e) {
     }
 }
 
-function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
+function registerAsGuest(
+    hsUrl: string,
+    isUrl: string,
+    defaultDeviceDisplayName: string,
+): Promise<boolean> {
     console.log(`Doing guest login on ${hsUrl}`);
 
     // create a temporary MatrixClient to do the login
@@ -243,7 +259,7 @@ function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
         },
     }).then((creds) => {
         console.log(`Registered as guest: ${creds.user_id}`);
-        return _doSetLoggedIn({
+        return doSetLoggedIn({
             userId: creds.user_id,
             deviceId: creds.device_id,
             accessToken: creds.access_token,
@@ -257,12 +273,21 @@ function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
     });
 }
 
+export interface ILocalStorageSession {
+    hsUrl: string;
+    isUrl: string;
+    accessToken: string;
+    userId: string;
+    deviceId: string;
+    isGuest: boolean;
+}
+
 /**
  * Retrieves information about the stored session in localstorage. The session
  * may not be valid, as it is not tested for consistency here.
  * @returns {Object} Information about the session - see implementation for variables.
  */
-export function getLocalStorageSessionVars() {
+export function getLocalStorageSessionVars(): ILocalStorageSession {
     const hsUrl = localStorage.getItem(HOMESERVER_URL_KEY);
     const isUrl = localStorage.getItem(ID_SERVER_URL_KEY);
     const accessToken = localStorage.getItem("mx_access_token");
@@ -290,8 +315,8 @@ export function getLocalStorageSessionVars() {
 //      The plan is to gradually move the localStorage access done here into
 //      SessionStore to avoid bugs where the view becomes out-of-sync with
 //      localStorage (e.g. isGuest etc.)
-async function _restoreFromLocalStorage(opts) {
-    const ignoreGuest = opts.ignoreGuest;
+async function restoreFromLocalStorage(opts?: { ignoreGuest?: boolean }): Promise<boolean> {
+    const ignoreGuest = opts?.ignoreGuest;
 
     if (!localStorage) {
         return false;
@@ -312,8 +337,11 @@ async function _restoreFromLocalStorage(opts) {
             console.log("No pickle key available");
         }
 
+        const freshLogin = sessionStorage.getItem("mx_fresh_login") === "true";
+        sessionStorage.removeItem("mx_fresh_login");
+
         console.log(`Restoring session for ${userId}`);
-        await _doSetLoggedIn({
+        await doSetLoggedIn({
             userId: userId,
             deviceId: deviceId,
             accessToken: accessToken,
@@ -321,6 +349,7 @@ async function _restoreFromLocalStorage(opts) {
             identityServerUrl: isUrl,
             guest: isGuest,
             pickleKey: pickleKey,
+            freshLogin: freshLogin,
         }, false);
         return true;
     } else {
@@ -329,7 +358,7 @@ async function _restoreFromLocalStorage(opts) {
     }
 }
 
-async function _handleLoadSessionFailure(e) {
+async function handleLoadSessionFailure(e: Error): Promise<boolean> {
     console.error("Unable to load session", e);
 
     const SessionRestoreErrorDialog =
@@ -342,7 +371,7 @@ async function _handleLoadSessionFailure(e) {
     const [success] = await modal.finished;
     if (success) {
         // user clicked continue.
-        await _clearStorage();
+        await clearStorage();
         return false;
     }
 
@@ -363,11 +392,12 @@ async function _handleLoadSessionFailure(e) {
  *
  * @returns {Promise} promise which resolves to the new MatrixClient once it has been started
  */
-export async function setLoggedIn(credentials) {
+export async function setLoggedIn(credentials: IMatrixClientCreds): Promise<MatrixClient> {
+    credentials.freshLogin = true;
     stopMatrixClient();
     const pickleKey = credentials.userId && credentials.deviceId
-          ? await PlatformPeg.get().createPickleKey(credentials.userId, credentials.deviceId)
-          : null;
+        ? await PlatformPeg.get().createPickleKey(credentials.userId, credentials.deviceId)
+        : null;
 
     if (pickleKey) {
         console.log("Created pickle key");
@@ -375,7 +405,7 @@ export async function setLoggedIn(credentials) {
         console.log("Pickle key not created");
     }
 
-    return _doSetLoggedIn(Object.assign({}, credentials, {pickleKey}), true);
+    return doSetLoggedIn(Object.assign({}, credentials, {pickleKey}), true);
 }
 
 /**
@@ -393,7 +423,7 @@ export async function setLoggedIn(credentials) {
  *
  * @returns {Promise} promise which resolves to the new MatrixClient once it has been started
  */
-export function hydrateSession(credentials) {
+export function hydrateSession(credentials: IMatrixClientCreds): Promise<MatrixClient> {
     const oldUserId = MatrixClientPeg.get().getUserId();
     const oldDeviceId = MatrixClientPeg.get().getDeviceId();
 
@@ -406,7 +436,7 @@ export function hydrateSession(credentials) {
         console.warn("Clearing all data: Old session belongs to a different user/session");
     }
 
-    return _doSetLoggedIn(credentials, overwrite);
+    return doSetLoggedIn(credentials, overwrite);
 }
 
 /**
@@ -418,7 +448,10 @@ export function hydrateSession(credentials) {
  *
  * @returns {Promise} promise which resolves to the new MatrixClient once it has been started
  */
-async function _doSetLoggedIn(credentials, clearStorage) {
+async function doSetLoggedIn(
+    credentials: IMatrixClientCreds,
+    clearStorageEnabled: boolean,
+): Promise<MatrixClient> {
     credentials.guest = Boolean(credentials.guest);
 
     const softLogout = isSoftLogout();
@@ -429,6 +462,7 @@ async function _doSetLoggedIn(credentials, clearStorage) {
         " guest: " + credentials.guest +
         " hs: " + credentials.homeserverUrl +
         " softLogout: " + softLogout,
+        " freshLogin: " + credentials.freshLogin,
     );
 
     // This is dispatched to indicate that the user is still in the process of logging in
@@ -440,8 +474,8 @@ async function _doSetLoggedIn(credentials, clearStorage) {
     // (dis.dispatch uses `setTimeout`, which does not guarantee ordering.)
     dis.dispatch({action: 'on_logging_in'}, true);
 
-    if (clearStorage) {
-        await _clearStorage();
+    if (clearStorageEnabled) {
+        await clearStorage();
     }
 
     const results = await StorageManager.checkConsistency();
@@ -449,9 +483,9 @@ async function _doSetLoggedIn(credentials, clearStorage) {
     // crypto store, we'll be generally confused when handling encrypted data.
     // Show a modal recommending a full reset of storage.
     if (results.dataInLocalStorage && results.cryptoInited && !results.dataInCryptoStore) {
-        const signOut = await _showStorageEvictedDialog();
+        const signOut = await showStorageEvictedDialog();
         if (signOut) {
-            await _clearStorage();
+            await clearStorage();
             // This error feels a bit clunky, but we want to make sure we don't go any
             // further and instead head back to sign in.
             throw new AbortLoginAndRebuildStorage(
@@ -462,19 +496,26 @@ async function _doSetLoggedIn(credentials, clearStorage) {
 
     Analytics.setLoggedIn(credentials.guest, credentials.homeserverUrl);
 
+    MatrixClientPeg.replaceUsingCreds(credentials);
+    const client = MatrixClientPeg.get();
+
+    if (credentials.freshLogin && SettingsStore.getValue("feature_dehydration")) {
+        // If we just logged in, try to rehydrate a device instead of using a
+        // new device.  If it succeeds, we'll get a new device ID, so make sure
+        // we persist that ID to localStorage
+        const newDeviceId = await client.rehydrateDevice();
+        if (newDeviceId) {
+            credentials.deviceId = newDeviceId;
+        }
+
+        delete credentials.freshLogin;
+    }
+
     if (localStorage) {
         try {
-            _persistCredentialsToLocalStorage(credentials);
-
-            // The user registered as a PWLU (PassWord-Less User), the generated password
-            // is cached here such that the user can change it at a later time.
-            if (credentials.password) {
-                // Update SessionStore
-                dis.dispatch({
-                    action: 'cached_password',
-                    cachedPassword: credentials.password,
-                });
-            }
+            persistCredentialsToLocalStorage(credentials);
+            // make sure we don't think that it's a fresh login any more
+            sessionStorage.removeItem("mx_fresh_login");
         } catch (e) {
             console.warn("Error using local storage: can't persist session!", e);
         }
@@ -482,15 +523,13 @@ async function _doSetLoggedIn(credentials, clearStorage) {
         console.warn("No local storage available: can't persist session!");
     }
 
-    MatrixClientPeg.replaceUsingCreds(credentials);
-
     dis.dispatch({ action: 'on_logged_in' });
 
     await startMatrixClient(/*startSyncing=*/!softLogout);
-    return MatrixClientPeg.get();
+    return client;
 }
 
-function _showStorageEvictedDialog() {
+function showStorageEvictedDialog(): Promise<boolean> {
     const StorageEvictedDialog = sdk.getComponent('views.dialogs.StorageEvictedDialog');
     return new Promise(resolve => {
         Modal.createTrackedDialog('Storage evicted', '', StorageEvictedDialog, {
@@ -503,7 +542,7 @@ function _showStorageEvictedDialog() {
 // `instanceof`. Babel 7 supports this natively in their class handling.
 class AbortLoginAndRebuildStorage extends Error { }
 
-function _persistCredentialsToLocalStorage(credentials) {
+function persistCredentialsToLocalStorage(credentials: IMatrixClientCreds): void {
     localStorage.setItem(HOMESERVER_URL_KEY, credentials.homeserverUrl);
     if (credentials.identityServerUrl) {
         localStorage.setItem(ID_SERVER_URL_KEY, credentials.identityServerUrl);
@@ -513,7 +552,7 @@ function _persistCredentialsToLocalStorage(credentials) {
     localStorage.setItem("mx_is_guest", JSON.stringify(credentials.guest));
 
     if (credentials.pickleKey) {
-        localStorage.setItem("mx_has_pickle_key", true);
+        localStorage.setItem("mx_has_pickle_key", String(true));
     } else {
         if (localStorage.getItem("mx_has_pickle_key")) {
             console.error("Expected a pickle key, but none provided.  Encryption may not work.");
@@ -529,6 +568,8 @@ function _persistCredentialsToLocalStorage(credentials) {
         localStorage.setItem("mx_device_id", credentials.deviceId);
     }
 
+    SecurityCustomisations.persistCredentials?.(credentials);
+
     console.log(`Session persisted for ${credentials.userId}`);
 }
 
@@ -537,7 +578,7 @@ let _isLoggingOut = false;
 /**
  * Logs the current session out and transitions to the logged-out state
  */
-export function logout() {
+export function logout(): void {
     if (!MatrixClientPeg.get()) return;
 
     if (MatrixClientPeg.get().isGuest()) {
@@ -566,7 +607,7 @@ export function logout() {
     );
 }
 
-export function softLogout() {
+export function softLogout(): void {
     if (!MatrixClientPeg.get()) return;
 
     // Track that we've detected and trapped a soft logout. This helps prevent other
@@ -587,11 +628,11 @@ export function softLogout() {
     // DO NOT CALL LOGOUT. A soft logout preserves data, logout does not.
 }
 
-export function isSoftLogout() {
+export function isSoftLogout(): boolean {
     return localStorage.getItem("mx_soft_logout") === "true";
 }
 
-export function isLoggingOut() {
+export function isLoggingOut(): boolean {
     return _isLoggingOut;
 }
 
@@ -601,7 +642,7 @@ export function isLoggingOut() {
  * @param {boolean} startSyncing True (default) to actually start
  * syncing the client.
  */
-async function startMatrixClient(startSyncing=true) {
+async function startMatrixClient(startSyncing = true): Promise<void> {
     console.log(`Lifecycle: Starting MatrixClient`);
 
     // dispatch this before starting the matrix client: it's used
@@ -660,21 +701,21 @@ async function startMatrixClient(startSyncing=true) {
  * Stops a running client and all related services, and clears persistent
  * storage. Used after a session has been logged out.
  */
-export async function onLoggedOut() {
+export async function onLoggedOut(): Promise<void> {
     _isLoggingOut = false;
     // Ensure that we dispatch a view change **before** stopping the client so
     // so that React components unmount first. This avoids React soft crashes
     // that can occur when components try to use a null client.
     dis.dispatch({action: 'on_logged_out'}, true);
     stopMatrixClient();
-    await _clearStorage({deleteEverything: true});
+    await clearStorage({deleteEverything: true});
 }
 
 /**
  * @param {object} opts Options for how to clear storage.
  * @returns {Promise} promise which resolves once the stores have been cleared
  */
-async function _clearStorage(opts: {deleteEverything: boolean}) {
+async function clearStorage(opts?: { deleteEverything?: boolean }): Promise<void> {
     Analytics.disable();
 
     if (window.localStorage) {
@@ -712,7 +753,7 @@ async function _clearStorage(opts: {deleteEverything: boolean}) {
  * @param {boolean} unsetClient True (default) to abandon the client
  * on MatrixClientPeg after stopping.
  */
-export function stopMatrixClient(unsetClient=true) {
+export function stopMatrixClient(unsetClient = true): void {
     Notifier.stop();
     UserActivity.sharedInstance().stop();
     TypingStore.sharedInstance().reset();

src/Login.ts

@@ -18,35 +18,73 @@ 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 { MatrixClient } from "matrix-js-sdk/src/client";
+import { IMatrixClientCreds } from "./MatrixClientPeg";
+import SecurityCustomisations from "./customisations/Security";
+
+interface ILoginOptions {
+    defaultDeviceDisplayName?: string;
+}
+
+// TODO: Move this to JS SDK
+interface ILoginFlow {
+    type: string;
+}
+
+// TODO: Move this to JS SDK
+/* eslint-disable camelcase */
+interface ILoginParams {
+    identifier?: string;
+    password?: string;
+    token?: string;
+    device_id?: string;
+    initial_device_display_name?: string;
+}
+/* eslint-enable camelcase */
 
 export default class Login {
-    constructor(hsUrl, isUrl, fallbackHsUrl, opts) {
-        this._hsUrl = hsUrl;
-        this._isUrl = isUrl;
-        this._fallbackHsUrl = fallbackHsUrl;
-        this._currentFlowIndex = 0;
-        this._flows = [];
-        this._defaultDeviceDisplayName = opts.defaultDeviceDisplayName;
-        this._tempClient = null; // memoize
+    private hsUrl: string;
+    private isUrl: string;
+    private fallbackHsUrl: string;
+    private currentFlowIndex: number;
+    // TODO: Flows need a type in JS SDK
+    private flows: Array<ILoginFlow>;
+    private defaultDeviceDisplayName: string;
+    private tempClient: MatrixClient;
+
+    constructor(
+        hsUrl: string,
+        isUrl: string,
+        fallbackHsUrl?: string,
+        opts?: ILoginOptions,
+    ) {
+        this.hsUrl = hsUrl;
+        this.isUrl = isUrl;
+        this.fallbackHsUrl = fallbackHsUrl;
+        this.currentFlowIndex = 0;
+        this.flows = [];
+        this.defaultDeviceDisplayName = opts.defaultDeviceDisplayName;
+        this.tempClient = null; // memoize
     }
 
-    getHomeserverUrl() {
-        return this._hsUrl;
+    public getHomeserverUrl(): string {
+        return this.hsUrl;
     }
 
-    getIdentityServerUrl() {
-        return this._isUrl;
+    public getIdentityServerUrl(): string {
+        return this.isUrl;
     }
 
-    setHomeserverUrl(hsUrl) {
-        this._tempClient = null; // clear memoization
-        this._hsUrl = hsUrl;
+    public setHomeserverUrl(hsUrl: string): void {
+        this.tempClient = null; // clear memoization
+        this.hsUrl = hsUrl;
     }
 
-    setIdentityServerUrl(isUrl) {
-        this._tempClient = null; // clear memoization
-        this._isUrl = isUrl;
+    public setIdentityServerUrl(isUrl: string): void {
+        this.tempClient = null; // clear memoization
+        this.isUrl = isUrl;
     }
 
     /**
@@ -54,40 +92,41 @@ export default class Login {
      * requests.
      * @returns {MatrixClient}
      */
-    createTemporaryClient() {
-        if (this._tempClient) return this._tempClient; // use memoization
-        return this._tempClient = Matrix.createClient({
-            baseUrl: this._hsUrl,
-            idBaseUrl: this._isUrl,
+    public createTemporaryClient(): MatrixClient {
+        if (this.tempClient) return this.tempClient; // use memoization
+        return this.tempClient = Matrix.createClient({
+            baseUrl: this.hsUrl,
+            idBaseUrl: this.isUrl,
         });
     }
 
-    getFlows() {
-        const self = this;
+    public async getFlows(): Promise<Array<ILoginFlow>> {
         const client = this.createTemporaryClient();
-        return client.loginFlows().then(function(result) {
-            self._flows = result.flows;
-            self._currentFlowIndex = 0;
-            // technically the UI should display options for all flows for the
-            // user to then choose one, so return all the flows here.
-            return self._flows;
-        });
+        const { flows } = await client.loginFlows();
+        this.flows = flows;
+        this.currentFlowIndex = 0;
+        // technically the UI should display options for all flows for the
+        // user to then choose one, so return all the flows here.
+        return this.flows;
     }
 
-    chooseFlow(flowIndex) {
-        this._currentFlowIndex = flowIndex;
+    public chooseFlow(flowIndex): void {
+        this.currentFlowIndex = flowIndex;
     }
 
-    getCurrentFlowStep() {
+    public getCurrentFlowStep(): string {
         // technically the flow can have multiple steps, but no one does this
         // for login so we can ignore it.
-        const flowStep = this._flows[this._currentFlowIndex];
+        const flowStep = this.flows[this.currentFlowIndex];
         return flowStep ? flowStep.type : null;
     }
 
-    loginViaPassword(username, phoneCountry, phoneNumber, pass) {
-        const self = this;
-
+    public loginViaPassword(
+        username: string,
+        phoneCountry: string,
+        phoneNumber: string,
+        password: string,
+    ): Promise<IMatrixClientCreds> {
         const isEmail = username.indexOf("@") > 0;
 
         let identifier;
@@ -113,14 +152,14 @@ export default class Login {
         }
 
         const loginParams = {
-            password: pass,
-            identifier: identifier,
-            initial_device_display_name: this._defaultDeviceDisplayName,
+            password,
+            identifier,
+            initial_device_display_name: this.defaultDeviceDisplayName,
         };
 
         const tryFallbackHs = (originalError) => {
             return sendLoginRequest(
-                self._fallbackHsUrl, this._isUrl, 'm.login.password', loginParams,
+                this.fallbackHsUrl, this.isUrl, 'm.login.password', loginParams,
             ).catch((fallbackError) => {
                 console.log("fallback HS login failed", fallbackError);
                 // throw the original error
@@ -130,11 +169,11 @@ export default class Login {
 
         let originalLoginError = null;
         return sendLoginRequest(
-            self._hsUrl, self._isUrl, 'm.login.password', loginParams,
+            this.hsUrl, this.isUrl, 'm.login.password', loginParams,
         ).catch((error) => {
             originalLoginError = error;
             if (error.httpStatus === 403) {
-                if (self._fallbackHsUrl) {
+                if (this.fallbackHsUrl) {
                     return tryFallbackHs(originalLoginError);
                 }
             }
@@ -154,11 +193,16 @@ export default class Login {
  * @param {string} hsUrl   the base url of the Homeserver used to log in.
  * @param {string} isUrl   the base url of the default identity server
  * @param {string} loginType the type of login to do
- * @param {object} loginParams the parameters for the login
+ * @param {ILoginParams} loginParams the parameters for the login
  *
  * @returns {MatrixClientCreds}
  */
-export async function sendLoginRequest(hsUrl, isUrl, loginType, loginParams) {
+export async function sendLoginRequest(
+    hsUrl: string,
+    isUrl: string,
+    loginType: string,
+    loginParams: ILoginParams,
+): Promise<IMatrixClientCreds> {
     const client = Matrix.createClient({
         baseUrl: hsUrl,
         idBaseUrl: isUrl,
@@ -179,11 +223,15 @@ export async function sendLoginRequest(hsUrl, isUrl, loginType, loginParams) {
         }
     }
 
-    return {
+    const creds: IMatrixClientCreds = {
         homeserverUrl: hsUrl,
         identityServerUrl: isUrl,
         userId: data.user_id,
         deviceId: data.device_id,
         accessToken: data.access_token,
     };
+
+    SecurityCustomisations.examineLoginResponse?.(data, creds);
+
+    return creds;
 }

src/MatrixClientPeg.ts

@@ -17,6 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { ICreateClientOpts } from 'matrix-js-sdk/src/matrix';
 import {MatrixClient} from 'matrix-js-sdk/src/client';
 import {MemoryStore} from 'matrix-js-sdk/src/store/memory';
 import * as utils from 'matrix-js-sdk/src/utils';
@@ -31,17 +32,18 @@ import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import MatrixClientBackedSettingsHandler from "./settings/handlers/MatrixClientBackedSettingsHandler";
 import * as StorageManager from './utils/StorageManager';
 import IdentityAuthClient from './IdentityAuthClient';
-import { crossSigningCallbacks } from './SecurityManager';
+import { crossSigningCallbacks, tryToUnlockSecretStorageWithDehydrationKey } from './SecurityManager';
 import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
 
 export interface IMatrixClientCreds {
     homeserverUrl: string;
     identityServerUrl: string;
     userId: string;
-    deviceId: string;
+    deviceId?: string;
     accessToken: string;
-    guest: boolean;
+    guest?: boolean;
     pickleKey?: string;
+    freshLogin?: boolean;
 }
 
 // TODO: Move this to the js-sdk
@@ -192,6 +194,7 @@ class _MatrixClientPeg implements IMatrixClientPeg {
                 this.matrixClient.setCryptoTrustCrossSignedDevices(
                     !SettingsStore.getValue('e2ee.manuallyVerifyAllSessions'),
                 );
+                await tryToUnlockSecretStorageWithDehydrationKey(this.matrixClient);
                 StorageManager.setCryptoInitialised(true);
             }
         } catch (e) {
@@ -247,8 +250,7 @@ class _MatrixClientPeg implements IMatrixClientPeg {
     }
 
     private createClient(creds: IMatrixClientCreds): void {
-        // TODO: Make these opts typesafe with the js-sdk
-        const opts = {
+        const opts: ICreateClientOpts = {
             baseUrl: creds.homeserverUrl,
             idBaseUrl: creds.identityServerUrl,
             accessToken: creds.accessToken,

src/Modal.tsx

@@ -132,7 +132,7 @@ export class ModalManager {
     public createTrackedDialogAsync<T extends any[]>(
         analyticsAction: string,
         analyticsInfo: string,
-        ...rest: Parameters<ModalManager["appendDialogAsync"]>
+        ...rest: Parameters<ModalManager["createDialogAsync"]>
     ) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
         return this.createDialogAsync<T>(...rest);

src/Notifier.ts

@@ -218,7 +218,7 @@ export const Notifier = {
         // calculated value. It is determined based upon whether or not the master rule is enabled
         // and other flags. Setting it here would cause a circular reference.
 
-        Analytics.trackEvent('Notifier', 'Set Enabled', enable);
+        Analytics.trackEvent('Notifier', 'Set Enabled', String(enable));
 
         // make sure that we persist the current setting audio_enabled setting
         // before changing anything
@@ -287,7 +287,7 @@ export const Notifier = {
     setPromptHidden: function(hidden: boolean, persistent = true) {
         this.toolbarHidden = hidden;
 
-        Analytics.trackEvent('Notifier', 'Set Toolbar Hidden', hidden);
+        Analytics.trackEvent('Notifier', 'Set Toolbar Hidden', String(hidden));
 
         hideNotificationsToast();
 

src/Presence.ts

@@ -19,30 +19,34 @@ limitations under the License.
 import {MatrixClientPeg} from "./MatrixClientPeg";
 import dis from "./dispatcher/dispatcher";
 import Timer from './utils/Timer';
+import {ActionPayload} from "./dispatcher/payloads";
 
- // Time in ms after that a user is considered as unavailable/away
+// Time in ms after that a user is considered as unavailable/away
 const UNAVAILABLE_TIME_MS = 3 * 60 * 1000; // 3 mins
-const PRESENCE_STATES = ["online", "offline", "unavailable"];
+
+enum State {
+    Online = "online",
+    Offline = "offline",
+    Unavailable = "unavailable",
+}
 
 class Presence {
-    constructor() {
-        this._activitySignal = null;
-        this._unavailableTimer = null;
-        this._onAction = this._onAction.bind(this);
-        this._dispatcherRef = null;
-    }
+    private unavailableTimer: Timer = null;
+    private dispatcherRef: string = null;
+    private state: State = null;
+
     /**
      * Start listening the user activity to evaluate his presence state.
      * Any state change will be sent to the homeserver.
      */
-    async start() {
-        this._unavailableTimer = new Timer(UNAVAILABLE_TIME_MS);
+    public async start() {
+        this.unavailableTimer = new Timer(UNAVAILABLE_TIME_MS);
         // the user_activity_start action starts the timer
-        this._dispatcherRef = dis.register(this._onAction);
-        while (this._unavailableTimer) {
+        this.dispatcherRef = dis.register(this.onAction);
+        while (this.unavailableTimer) {
             try {
-                await this._unavailableTimer.finished();
-                this.setState("unavailable");
+                await this.unavailableTimer.finished();
+                this.setState(State.Unavailable);
             } catch (e) { /* aborted, stop got called */ }
         }
     }
@@ -50,14 +54,14 @@ class Presence {
     /**
      * Stop tracking user activity
      */
-    stop() {
-        if (this._dispatcherRef) {
-            dis.unregister(this._dispatcherRef);
-            this._dispatcherRef = null;
+    public stop() {
+        if (this.dispatcherRef) {
+            dis.unregister(this.dispatcherRef);
+            this.dispatcherRef = null;
         }
-        if (this._unavailableTimer) {
-            this._unavailableTimer.abort();
-            this._unavailableTimer = null;
+        if (this.unavailableTimer) {
+            this.unavailableTimer.abort();
+            this.unavailableTimer = null;
         }
     }
 
@@ -65,14 +69,14 @@ class Presence {
      * Get the current presence state.
      * @returns {string} the presence state (see PRESENCE enum)
      */
-    getState() {
+    public getState() {
         return this.state;
     }
 
-    _onAction(payload) {
+    private onAction = (payload: ActionPayload) => {
         if (payload.action === 'user_activity') {
-            this.setState("online");
-            this._unavailableTimer.restart();
+            this.setState(State.Online);
+            this.unavailableTimer.restart();
         }
     }
 
@@ -81,13 +85,11 @@ class Presence {
      * If the state has changed, the homeserver will be notified.
      * @param {string} newState the new presence state (see PRESENCE enum)
      */
-    async setState(newState) {
+    private async setState(newState: State) {
         if (newState === this.state) {
             return;
         }
-        if (PRESENCE_STATES.indexOf(newState) === -1) {
-            throw new Error("Bad presence state: " + newState);
-        }
+
         const oldState = this.state;
         this.state = newState;
 

src/Registration.js

@@ -24,7 +24,6 @@ import dis from './dispatcher/dispatcher';
 import * as sdk from './index';
 import Modal from './Modal';
 import { _t } from './languageHandler';
-// import {MatrixClientPeg} from './MatrixClientPeg';
 
 // Regex for what a "safe" or "Matrix-looking" localpart would be.
 // TODO: Update as needed for https://github.com/matrix-org/matrix-doc/issues/1514
@@ -44,70 +43,27 @@ export const SAFE_LOCALPART_REGEX = /^[a-z0-9=_\-./]+$/;
  */
 export async function startAnyRegistrationFlow(options) {
     if (options === undefined) options = {};
-    // look for an ILAG compatible flow. We define this as one
-    // which has only dummy or recaptcha flows. In practice it
-    // would support any stage InteractiveAuth supports, just not
-    // ones like email & msisdn which require the user to supply
-    // the relevant details in advance. We err on the side of
-    // caution though.
-
-    // XXX: ILAG is disabled for now,
-    // see https://github.com/vector-im/element-web/issues/8222
-
-    // const flows = await _getRegistrationFlows();
-    // const hasIlagFlow = flows.some((flow) => {
-    //     return flow.stages.every((stage) => {
-    //         return ['m.login.dummy', 'm.login.recaptcha', 'm.login.terms'].includes(stage);
-    //     });
-    // });
-
-    // if (hasIlagFlow) {
-    //     dis.dispatch({
-    //         action: 'view_set_mxid',
-    //         go_home_on_cancel: options.go_home_on_cancel,
-    //     });
-    //} else {
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        const modal = Modal.createTrackedDialog('Registration required', '', QuestionDialog, {
-            hasCancelButton: true,
-            quitOnly: true,
-            title: _t("Sign In or Create Account"),
-            description: _t("Use your account or create a new one to continue."),
-            button: _t("Create Account"),
-            extraButtons: [
-                <button key="start_login" onClick={() => {
-                    modal.close();
-                    dis.dispatch({action: 'start_login', screenAfterLogin: options.screen_after});
-                }}>{ _t('Sign In') }</button>,
-            ],
-            onFinished: (proceed) => {
-                if (proceed) {
-                    dis.dispatch({action: 'start_registration', screenAfterLogin: options.screen_after});
-                } else if (options.go_home_on_cancel) {
-                    dis.dispatch({action: 'view_home_page'});
-                } else if (options.go_welcome_on_cancel) {
-                    dis.dispatch({action: 'view_welcome_page'});
-                }
-            },
-        });
-    //}
+    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+    const modal = Modal.createTrackedDialog('Registration required', '', QuestionDialog, {
+        hasCancelButton: true,
+        quitOnly: true,
+        title: _t("Sign In or Create Account"),
+        description: _t("Use your account or create a new one to continue."),
+        button: _t("Create Account"),
+        extraButtons: [
+            <button key="start_login" onClick={() => {
+                modal.close();
+                dis.dispatch({action: 'start_login', screenAfterLogin: options.screen_after});
+            }}>{ _t('Sign In') }</button>,
+        ],
+        onFinished: (proceed) => {
+            if (proceed) {
+                dis.dispatch({action: 'start_registration', screenAfterLogin: options.screen_after});
+            } else if (options.go_home_on_cancel) {
+                dis.dispatch({action: 'view_home_page'});
+            } else if (options.go_welcome_on_cancel) {
+                dis.dispatch({action: 'view_welcome_page'});
+            }
+        },
+    });
 }
-
-// async function _getRegistrationFlows() {
-//     try {
-//         await MatrixClientPeg.get().register(
-//             null,
-//             null,
-//             undefined,
-//             {},
-//             {},
-//         );
-//         console.log("Register request succeeded when it should have returned 401!");
-//     } catch (e) {
-//         if (e.httpStatus === 401) {
-//             return e.data.flows;
-//         }
-//         throw e;
-//     }
-//     throw new Error("Register request succeeded when it should have returned 401!");
-// }

src/Roles.ts

@@ -13,9 +13,10 @@ 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 { _t } from './languageHandler';
 
-export function levelRoleMap(usersDefault) {
+export function levelRoleMap(usersDefault: number) {
     return {
         undefined: _t('Default'),
         0: _t('Restricted'),
@@ -25,7 +26,7 @@ export function levelRoleMap(usersDefault) {
     };
 }
 
-export function textualPowerLevel(level, usersDefault) {
+export function textualPowerLevel(level: number, usersDefault: number): string {
     const LEVEL_ROLE_MAP = levelRoleMap(usersDefault);
     if (LEVEL_ROLE_MAP[level]) {
         return LEVEL_ROLE_MAP[level];

src/Rooms.js

@@ -26,58 +26,6 @@ export function getDisplayAliasForRoom(room) {
     return room.getCanonicalAlias() || room.getAltAliases()[0];
 }
 
-/**
- * If the room contains only two members including the logged-in user,
- * return the other one. Otherwise, return null.
- */
-export function getOnlyOtherMember(room, myUserId) {
-    if (room.currentState.getJoinedMemberCount() === 2) {
-        return room.getJoinedMembers().filter(function(m) {
-            return m.userId !== myUserId;
-        })[0];
-    }
-
-    return null;
-}
-
-function _isConfCallRoom(room, myUserId, conferenceHandler) {
-    if (!conferenceHandler) return false;
-
-    const myMembership = room.getMyMembership();
-    if (myMembership != "join") {
-        return false;
-    }
-
-    const otherMember = getOnlyOtherMember(room, myUserId);
-    if (!otherMember) {
-        return false;
-    }
-
-    if (conferenceHandler.isConferenceUser(otherMember.userId)) {
-        return true;
-    }
-
-    return false;
-}
-
-// Cache whether a room is a conference call. Assumes that rooms will always
-// either will or will not be a conference call room.
-const isConfCallRoomCache = {
-    // $roomId: bool
-};
-
-export function isConfCallRoom(room, myUserId, conferenceHandler) {
-    if (isConfCallRoomCache[room.roomId] !== undefined) {
-        return isConfCallRoomCache[room.roomId];
-    }
-
-    const result = _isConfCallRoom(room, myUserId, conferenceHandler);
-
-    isConfCallRoomCache[room.roomId] = result;
-
-    return result;
-}
-
 export function looksLikeDirectMessageRoom(room, myUserId) {
     const myMembership = room.getMyMembership();
     const me = room.getMember(myUserId);

src/SdkConfig.ts

@@ -33,6 +33,11 @@ export const DEFAULTS: ConfigOptions = {
         // Default conference domain
         preferredDomain: "jitsi.riot.im",
     },
+    desktopBuilds: {
+        available: true,
+        logo: require("../res/img/element-desktop-logo.svg"),
+        url: "https://element.io/get-started",
+    },
 };
 
 export default class SdkConfig {

src/SecurityManager.ts

@@ -14,26 +14,38 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { ICryptoCallbacks, IDeviceTrustLevel, ISecretStorageKeyInfo } from 'matrix-js-sdk/src/matrix';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 import Modal from './Modal';
 import * as sdk from './index';
 import {MatrixClientPeg} from './MatrixClientPeg';
 import { deriveKey } from 'matrix-js-sdk/src/crypto/key_passphrase';
 import { decodeRecoveryKey } from 'matrix-js-sdk/src/crypto/recoverykey';
 import { _t } from './languageHandler';
-import {encodeBase64} from "matrix-js-sdk/src/crypto/olmlib";
+import { encodeBase64 } from "matrix-js-sdk/src/crypto/olmlib";
 import { isSecureBackupRequired } from './utils/WellKnownUtils';
 import AccessSecretStorageDialog from './components/views/dialogs/security/AccessSecretStorageDialog';
 import RestoreKeyBackupDialog from './components/views/dialogs/security/RestoreKeyBackupDialog';
+import SettingsStore from "./settings/SettingsStore";
+import SecurityCustomisations from "./customisations/Security";
 
 // This stores the secret storage private keys in memory for the JS SDK. This is
 // only meant to act as a cache to avoid prompting the user multiple times
 // during the same single operation. Use `accessSecretStorage` below to scope a
 // single secret storage operation, as it will clear the cached keys once the
 // operation ends.
-let secretStorageKeys = {};
+let secretStorageKeys: Record<string, Uint8Array> = {};
+let secretStorageKeyInfo: Record<string, ISecretStorageKeyInfo> = {};
 let secretStorageBeingAccessed = false;
 
-function isCachingAllowed() {
+let nonInteractive = false;
+
+let dehydrationCache: {
+    key?: Uint8Array,
+    keyInfo?: ISecretStorageKeyInfo,
+} = {};
+
+function isCachingAllowed(): boolean {
     return secretStorageBeingAccessed;
 }
 
@@ -44,7 +56,7 @@ function isCachingAllowed() {
  *
  * @returns {bool}
  */
-export function isSecretStorageBeingAccessed() {
+export function isSecretStorageBeingAccessed(): boolean {
     return secretStorageBeingAccessed;
 }
 
@@ -54,7 +66,7 @@ export class AccessCancelledError extends Error {
     }
 }
 
-async function confirmToDismiss() {
+async function confirmToDismiss(): Promise<boolean> {
     const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
     const [sure] = await Modal.createDialog(QuestionDialog, {
         title: _t("Cancel entering passphrase?"),
@@ -66,7 +78,26 @@ async function confirmToDismiss() {
     return !sure;
 }
 
-async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
+function makeInputToKey(
+    keyInfo: ISecretStorageKeyInfo,
+): (keyParams: { passphrase: string, recoveryKey: string }) => Promise<Uint8Array> {
+    return async ({ passphrase, recoveryKey }) => {
+        if (passphrase) {
+            return deriveKey(
+                passphrase,
+                keyInfo.passphrase.salt,
+                keyInfo.passphrase.iterations,
+            );
+        } else {
+            return decodeRecoveryKey(recoveryKey);
+        }
+    };
+}
+
+async function getSecretStorageKey(
+    { keys: keyInfos }: { keys: Record<string, ISecretStorageKeyInfo> },
+    ssssItemName,
+): Promise<[string, Uint8Array]> {
     const keyInfoEntries = Object.entries(keyInfos);
     if (keyInfoEntries.length > 1) {
         throw new Error("Multiple storage key requests not implemented");
@@ -78,17 +109,25 @@ async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
         return [keyId, secretStorageKeys[keyId]];
     }
 
-    const inputToKey = async ({ passphrase, recoveryKey }) => {
-        if (passphrase) {
-            return deriveKey(
-                passphrase,
-                keyInfo.passphrase.salt,
-                keyInfo.passphrase.iterations,
-            );
-        } else {
-            return decodeRecoveryKey(recoveryKey);
+    if (dehydrationCache.key) {
+        if (await MatrixClientPeg.get().checkSecretStorageKey(dehydrationCache.key, keyInfo)) {
+            cacheSecretStorageKey(keyId, keyInfo, dehydrationCache.key);
+            return [keyId, dehydrationCache.key];
         }
-    };
+    }
+
+    const keyFromCustomisations = SecurityCustomisations.getSecretStorageKey?.();
+    if (keyFromCustomisations) {
+        console.log("Using key from security customisations (secret storage)")
+        cacheSecretStorageKey(keyId, keyInfo, keyFromCustomisations);
+        return [keyId, keyFromCustomisations];
+    }
+
+    if (nonInteractive) {
+        throw new Error("Could not unlock non-interactively");
+    }
+
+    const inputToKey = makeInputToKey(keyInfo);
     const { finished } = Modal.createTrackedDialog("Access Secret Storage dialog", "",
         AccessSecretStorageDialog,
         /* props= */
@@ -118,24 +157,79 @@ async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
     const key = await inputToKey(input);
 
     // Save to cache to avoid future prompts in the current session
-    cacheSecretStorageKey(keyId, key);
+    cacheSecretStorageKey(keyId, keyInfo, key);
 
     return [keyId, key];
 }
 
-function cacheSecretStorageKey(keyId, key) {
+export async function getDehydrationKey(
+    keyInfo: ISecretStorageKeyInfo,
+    checkFunc: (Uint8Array) => void,
+): Promise<Uint8Array> {
+    const keyFromCustomisations = SecurityCustomisations.getSecretStorageKey?.();
+    if (keyFromCustomisations) {
+        console.log("Using key from security customisations (dehydration)")
+        return keyFromCustomisations;
+    }
+
+    const inputToKey = makeInputToKey(keyInfo);
+    const { finished } = Modal.createTrackedDialog("Access Secret Storage dialog", "",
+        AccessSecretStorageDialog,
+        /* props= */
+        {
+            keyInfo,
+            checkPrivateKey: async (input) => {
+                const key = await inputToKey(input);
+                try {
+                    checkFunc(key);
+                    return true;
+                } catch (e) {
+                    return false;
+                }
+            },
+        },
+        /* className= */ null,
+        /* isPriorityModal= */ false,
+        /* isStaticModal= */ false,
+        /* options= */ {
+            onBeforeClose: async (reason) => {
+                if (reason === "backgroundClick") {
+                    return confirmToDismiss();
+                }
+                return true;
+            },
+        },
+    );
+    const [input] = await finished;
+    if (!input) {
+        throw new AccessCancelledError();
+    }
+    const key = await inputToKey(input);
+
+    // need to copy the key because rehydration (unpickling) will clobber it
+    dehydrationCache = {key: new Uint8Array(key), keyInfo};
+
+    return key;
+}
+
+function cacheSecretStorageKey(
+    keyId: string,
+    keyInfo: ISecretStorageKeyInfo,
+    key: Uint8Array,
+): void {
     if (isCachingAllowed()) {
         secretStorageKeys[keyId] = key;
+        secretStorageKeyInfo[keyId] = keyInfo;
     }
 }
 
-const onSecretRequested = async function({
-    user_id: userId,
-    device_id: deviceId,
-    request_id: requestId,
-    name,
-    device_trust: deviceTrust,
-}) {
+async function onSecretRequested(
+    userId: string,
+    deviceId: string,
+    requestId: string,
+    name: string,
+    deviceTrust: IDeviceTrustLevel,
+): Promise<string> {
     console.log("onSecretRequested", userId, deviceId, requestId, name, deviceTrust);
     const client = MatrixClientPeg.get();
     if (userId !== client.getUserId()) {
@@ -170,15 +264,16 @@ const onSecretRequested = async function({
         return key && encodeBase64(key);
     }
     console.warn("onSecretRequested didn't recognise the secret named ", name);
-};
+}
 
-export const crossSigningCallbacks = {
+export const crossSigningCallbacks: ICryptoCallbacks = {
     getSecretStorageKey,
     cacheSecretStorageKey,
     onSecretRequested,
+    getDehydrationKey,
 };
 
-export async function promptForBackupPassphrase() {
+export async function promptForBackupPassphrase(): Promise<Uint8Array> {
     let key;
 
     const { finished } = Modal.createTrackedDialog('Restore Backup', '', RestoreKeyBackupDialog, {
@@ -228,7 +323,7 @@ export async function accessSecretStorage(func = async () => { }, forceReset = f
                 /* priority = */ false,
                 /* static = */ true,
                 /* options = */ {
-                    onBeforeClose(reason) {
+                    onBeforeClose: async (reason) => {
                         // If Secure Backup is required, you cannot leave the modal.
                         if (reason === "backgroundClick") {
                             return !isSecureBackupRequired();
@@ -262,16 +357,86 @@ export async function accessSecretStorage(func = async () => { }, forceReset = f
             await cli.bootstrapSecretStorage({
                 getKeyBackupPassphrase: promptForBackupPassphrase,
             });
+
+            const keyId = Object.keys(secretStorageKeys)[0];
+            if (keyId && SettingsStore.getValue("feature_dehydration")) {
+                let dehydrationKeyInfo = {};
+                if (secretStorageKeyInfo[keyId] && secretStorageKeyInfo[keyId].passphrase) {
+                    dehydrationKeyInfo = { passphrase: secretStorageKeyInfo[keyId].passphrase };
+                }
+                console.log("Setting dehydration key");
+                await cli.setDehydrationKey(secretStorageKeys[keyId], dehydrationKeyInfo, "Backup device");
+            } else if (!keyId) {
+                console.warn("Not setting dehydration key: no SSSS key found");
+            } else {
+                console.log("Not setting dehydration key: feature disabled");
+            }
         }
 
         // `return await` needed here to ensure `finally` block runs after the
         // inner operation completes.
         return await func();
+    } catch (e) {
+        SecurityCustomisations.catchAccessSecretStorageError?.(e);
+        console.error(e);
     } finally {
         // Clear secret storage key cache now that work is complete
         secretStorageBeingAccessed = false;
         if (!isCachingAllowed()) {
             secretStorageKeys = {};
+            secretStorageKeyInfo = {};
+        }
+    }
+}
+
+// FIXME: this function name is a bit of a mouthful
+export async function tryToUnlockSecretStorageWithDehydrationKey(
+    client: MatrixClient,
+): Promise<void> {
+    const key = dehydrationCache.key;
+    let restoringBackup = false;
+    if (key && await client.isSecretStorageReady()) {
+        console.log("Trying to set up cross-signing using dehydration key");
+        secretStorageBeingAccessed = true;
+        nonInteractive = true;
+        try {
+            await client.checkOwnCrossSigningTrust();
+
+            // we also need to set a new dehydrated device to replace the
+            // device we rehydrated
+            let dehydrationKeyInfo = {};
+            if (dehydrationCache.keyInfo && dehydrationCache.keyInfo.passphrase) {
+                dehydrationKeyInfo = { passphrase: dehydrationCache.keyInfo.passphrase };
+            }
+            await client.setDehydrationKey(key, dehydrationKeyInfo, "Backup device");
+
+            // and restore from backup
+            const backupInfo = await client.getKeyBackupVersion();
+            if (backupInfo) {
+                restoringBackup = true;
+                // don't await, because this can take a long time
+                client.restoreKeyBackupWithSecretStorage(backupInfo)
+                    .finally(() => {
+                        secretStorageBeingAccessed = false;
+                        nonInteractive = false;
+                        if (!isCachingAllowed()) {
+                            secretStorageKeys = {};
+                            secretStorageKeyInfo = {};
+                        }
+                    });
+            }
+        } finally {
+            dehydrationCache = {};
+            // the secret storage cache is needed for restoring from backup, so
+            // don't clear it yet if we're restoring from backup
+            if (!restoringBackup) {
+                secretStorageBeingAccessed = false;
+                nonInteractive = false;
+                if (!isCachingAllowed()) {
+                    secretStorageKeys = {};
+                    secretStorageKeyInfo = {};
+                }
+            }
         }
     }
 }

src/SendHistoryManager.ts

@@ -16,12 +16,21 @@ limitations under the License.
 */
 
 import {clamp} from "lodash";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+
+import {SerializedPart} from "./editor/parts";
+import EditorModel from "./editor/model";
+
+interface IHistoryItem {
+    parts: SerializedPart[];
+    replyEventId?: string;
+}
 
 export default class SendHistoryManager {
-    history: Array<HistoryItem> = [];
+    history: Array<IHistoryItem> = [];
     prefix: string;
-    lastIndex: number = 0; // used for indexing the storage
-    currentIndex: number = 0; // used for indexing the loaded validated history Array
+    lastIndex = 0; // used for indexing the storage
+    currentIndex = 0; // used for indexing the loaded validated history Array
 
     constructor(roomId: string, prefix: string) {
         this.prefix = prefix + roomId;
@@ -32,8 +41,7 @@ export default class SendHistoryManager {
 
         while (itemJSON = sessionStorage.getItem(`${this.prefix}[${index}]`)) {
             try {
-                const serializedParts = JSON.parse(itemJSON);
-                this.history.push(serializedParts);
+                this.history.push(JSON.parse(itemJSON));
             } catch (e) {
                 console.warn("Throwing away unserialisable history", e);
                 break;
@@ -45,15 +53,22 @@ export default class SendHistoryManager {
         this.currentIndex = this.lastIndex + 1;
     }
 
-    save(editorModel: Object) {
-        const serializedParts = editorModel.serializeParts();
-        this.history.push(serializedParts);
-        this.currentIndex = this.history.length;
-        this.lastIndex += 1;
-        sessionStorage.setItem(`${this.prefix}[${this.lastIndex}]`, JSON.stringify(serializedParts));
+    static createItem(model: EditorModel, replyEvent?: MatrixEvent): IHistoryItem {
+        return {
+            parts: model.serializeParts(),
+            replyEventId: replyEvent ? replyEvent.getId() : undefined,
+        };
     }
 
-    getItem(offset: number): ?HistoryItem {
+    save(editorModel: EditorModel, replyEvent?: MatrixEvent) {
+        const item = SendHistoryManager.createItem(editorModel, replyEvent);
+        this.history.push(item);
+        this.currentIndex = this.history.length;
+        this.lastIndex += 1;
+        sessionStorage.setItem(`${this.prefix}[${this.lastIndex}]`, JSON.stringify(item));
+    }
+
+    getItem(offset: number): IHistoryItem {
         this.currentIndex = clamp(this.currentIndex + offset, 0, this.history.length - 1);
         return this.history[this.currentIndex];
     }

src/TextForEvent.js

@@ -14,12 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import {MatrixClientPeg} from './MatrixClientPeg';
-import CallHandler from './CallHandler';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
 import {isValid3pidInvite} from "./RoomInvite";
 import SettingsStore from "./settings/SettingsStore";
-import {WidgetType} from "./widgets/WidgetType";
 import {ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES} from "./mjolnir/BanList";
 
 function textForMemberEvent(ev) {
@@ -29,7 +27,6 @@ function textForMemberEvent(ev) {
     const prevContent = ev.getPrevContent();
     const content = ev.getContent();
 
-    const ConferenceHandler = CallHandler.getConferenceHandler();
     const reason = content.reason ? (_t('Reason') + ': ' + content.reason) : '';
     switch (content.membership) {
         case 'invite': {
@@ -44,11 +41,7 @@ function textForMemberEvent(ev) {
                     return _t('%(targetName)s accepted an invitation.', {targetName});
                 }
             } else {
-                if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) {
-                    return _t('%(senderName)s requested a VoIP conference.', {senderName});
-                } else {
-                    return _t('%(senderName)s invited %(targetName)s.', {senderName, targetName});
-                }
+                return _t('%(senderName)s invited %(targetName)s.', {senderName, targetName});
             }
         }
         case 'ban':
@@ -85,17 +78,11 @@ function textForMemberEvent(ev) {
                 }
             } else {
                 if (!ev.target) console.warn("Join message has no target! -- " + ev.getContent().state_key);
-                if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) {
-                    return _t('VoIP conference started.');
-                } else {
-                    return _t('%(targetName)s joined the room.', {targetName});
-                }
+                return _t('%(targetName)s joined the room.', {targetName});
             }
         case 'leave':
             if (ev.getSender() === ev.getStateKey()) {
-                if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) {
-                    return _t('VoIP conference finished.');
-                } else if (prevContent.membership === "invite") {
+                if (prevContent.membership === "invite") {
                     return _t('%(targetName)s rejected the invitation.', {targetName});
                 } else {
                     return _t('%(targetName)s left the room.', {targetName});
@@ -211,59 +198,30 @@ function textForRelatedGroupsEvent(ev) {
 function textForServerACLEvent(ev) {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     const prevContent = ev.getPrevContent();
-    const changes = [];
     const current = ev.getContent();
     const prev = {
         deny: Array.isArray(prevContent.deny) ? prevContent.deny : [],
         allow: Array.isArray(prevContent.allow) ? prevContent.allow : [],
         allow_ip_literals: !(prevContent.allow_ip_literals === false),
     };
+
     let text = "";
     if (prev.deny.length === 0 && prev.allow.length === 0) {
-        text = `${senderDisplayName} set server ACLs for this room: `;
+        text = _t("%(senderDisplayName)s set the server ACLs for this room.", {senderDisplayName});
     } else {
-        text = `${senderDisplayName} changed the server ACLs for this room: `;
+        text = _t("%(senderDisplayName)s changed the server ACLs for this room.", {senderDisplayName});
     }
 
     if (!Array.isArray(current.allow)) {
         current.allow = [];
     }
-    /* If we know for sure everyone is banned, don't bother showing the diff view */
+
+    // If we know for sure everyone is banned, mark the room as obliterated
     if (current.allow.length === 0) {
-        return text + "🎉 All servers are banned from participating! This room can no longer be used.";
+        return text + " " + _t("🎉 All servers are banned from participating! This room can no longer be used.");
     }
 
-    if (!Array.isArray(current.deny)) {
-        current.deny = [];
-    }
-
-    const bannedServers = current.deny.filter((srv) => typeof(srv) === 'string' && !prev.deny.includes(srv));
-    const unbannedServers = prev.deny.filter((srv) => typeof(srv) === 'string' && !current.deny.includes(srv));
-    const allowedServers = current.allow.filter((srv) => typeof(srv) === 'string' && !prev.allow.includes(srv));
-    const unallowedServers = prev.allow.filter((srv) => typeof(srv) === 'string' && !current.allow.includes(srv));
-
-    if (bannedServers.length > 0) {
-        changes.push(`Servers matching ${bannedServers.join(", ")} are now banned.`);
-    }
-
-    if (unbannedServers.length > 0) {
-        changes.push(`Servers matching ${unbannedServers.join(", ")} were removed from the ban list.`);
-    }
-
-    if (allowedServers.length > 0) {
-        changes.push(`Servers matching ${allowedServers.join(", ")} are now allowed.`);
-    }
-
-    if (unallowedServers.length > 0) {
-        changes.push(`Servers matching ${unallowedServers.join(", ")} were removed from the allowed list.`);
-    }
-
-    if (prev.allow_ip_literals !== current.allow_ip_literals) {
-        const allowban = current.allow_ip_literals ? "allowed" : "banned";
-        changes.push(`Participating from a server using an IP literal hostname is now ${allowban}.`);
-    }
-
-    return text + changes.join(" ");
+    return text;
 }
 
 function textForMessageEvent(ev) {
@@ -342,14 +300,27 @@ function textForCallHangupEvent(event) {
         reason = _t('(not supported by this browser)');
     } else if (eventContent.reason) {
         if (eventContent.reason === "ice_failed") {
+            // We couldn't establish a connection at all
             reason = _t('(could not connect media)');
+        } else if (eventContent.reason === "ice_timeout") {
+            // We established a connection but it died
+            reason = _t('(connection failed)');
+        } else if (eventContent.reason === "user_media_failed") {
+            // The other side couldn't open capture devices
+            reason = _t("(their device couldn't start the camera / microphone)");
+        } else if (eventContent.reason === "unknown_error") {
+            // An error code the other side doesn't have a way to express
+            // (as opposed to an error code they gave but we don't know about,
+            // in which case we show the error code)
+            reason = _t("(an error occurred)");
         } else if (eventContent.reason === "invite_timeout") {
             reason = _t('(no answer)');
-        } else if (eventContent.reason === "user hangup") {
+        } else if (eventContent.reason === "user hangup" || eventContent.reason === "user_hangup") {
             // workaround for https://github.com/vector-im/element-web/issues/5178
             // it seems Android randomly sets a reason of "user hangup" which is
             // interpreted as an error code :(
             // https://github.com/vector-im/riot-android/issues/2623
+            // Also the correct hangup code as of VoIP v1 (with underscore)
             reason = '';
         } else {
             reason = _t('(unknown failure: %(reason)s)', {reason: eventContent.reason});
@@ -358,6 +329,11 @@ function textForCallHangupEvent(event) {
     return _t('%(senderName)s ended the call.', {senderName}) + ' ' + reason;
 }
 
+function textForCallRejectEvent(event) {
+    const senderName = event.sender ? event.sender.name : _t('Someone');
+    return _t('%(senderName)s declined the call.', {senderName});
+}
+
 function textForCallInviteEvent(event) {
     const senderName = event.sender ? event.sender.name : _t('Someone');
     // FIXME: Find a better way to determine this from the event?
@@ -476,10 +452,6 @@ function textForWidgetEvent(event) {
     const {name: prevName, type: prevType, url: prevUrl} = event.getPrevContent();
     const {name, type, url} = event.getContent() || {};
 
-    if (WidgetType.JITSI.matches(type) || WidgetType.JITSI.matches(prevType)) {
-        return textForJitsiWidgetEvent(event, senderName, url, prevUrl);
-    }
-
     let widgetName = name || prevName || type || prevType || '';
     // Apply sentence case to widget name
     if (widgetName && widgetName.length > 0) {
@@ -505,24 +477,6 @@ function textForWidgetEvent(event) {
     }
 }
 
-function textForJitsiWidgetEvent(event, senderName, url, prevUrl) {
-    if (url) {
-        if (prevUrl) {
-            return _t('Group call modified by %(senderName)s', {
-                senderName,
-            });
-        } else {
-            return _t('Group call started by %(senderName)s', {
-                senderName,
-            });
-        }
-    } else {
-        return _t('Group call ended by %(senderName)s', {
-            senderName,
-        });
-    }
-}
-
 function textForMjolnirEvent(event) {
     const senderName = event.getSender();
     const {entity: prevEntity} = event.getPrevContent();
@@ -609,6 +563,7 @@ const handlers = {
     'm.call.invite': textForCallInviteEvent,
     'm.call.answer': textForCallAnswerEvent,
     'm.call.hangup': textForCallHangupEvent,
+    'm.call.reject': textForCallRejectEvent,
 };
 
 const stateHandlers = {

src/ToWidgetPostMessageApi.js

@@ -1,84 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-
-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.
-*/
-
-// const OUTBOUND_API_NAME = 'toWidget';
-
-// Initiate requests using the "toWidget" postMessage API and handle responses
-// NOTE: ToWidgetPostMessageApi only handles message events with a data payload with a
-// response field
-export default class ToWidgetPostMessageApi {
-    constructor(timeoutMs) {
-        this._timeoutMs = timeoutMs || 5000; // default to 5s timer
-        this._counter = 0;
-        this._requestMap = {
-            // $ID: {resolve, reject}
-        };
-        this.start = this.start.bind(this);
-        this.stop = this.stop.bind(this);
-        this.onPostMessage = this.onPostMessage.bind(this);
-    }
-
-    start() {
-        window.addEventListener('message', this.onPostMessage);
-    }
-
-    stop() {
-        window.removeEventListener('message', this.onPostMessage);
-    }
-
-    onPostMessage(ev) {
-        // THIS IS ALL UNSAFE EXECUTION.
-        // We do not verify who the sender of `ev` is!
-        const payload = ev.data;
-        // NOTE: Workaround for running in a mobile WebView where a
-        // postMessage immediately triggers this callback even though it is
-        // not the response.
-        if (payload.response === undefined) {
-            return;
-        }
-        const promise = this._requestMap[payload.requestId];
-        if (!promise) {
-            return;
-        }
-        delete this._requestMap[payload.requestId];
-        promise.resolve(payload);
-    }
-
-    // Initiate outbound requests (toWidget)
-    exec(action, targetWindow, targetOrigin) {
-        targetWindow = targetWindow || window.parent; // default to parent window
-        targetOrigin = targetOrigin || "*";
-        this._counter += 1;
-        action.requestId = Date.now() + "-" + Math.random().toString(36) + "-" + this._counter;
-
-        return new Promise((resolve, reject) => {
-            this._requestMap[action.requestId] = {resolve, reject};
-            targetWindow.postMessage(action, targetOrigin);
-
-            if (this._timeoutMs > 0) {
-                setTimeout(() => {
-                    if (!this._requestMap[action.requestId]) {
-                        return;
-                    }
-                    console.error("postMessage request timed out. Sent object: " + JSON.stringify(action),
-                        this._requestMap);
-                    this._requestMap[action.requestId].reject(new Error("Timed out"));
-                    delete this._requestMap[action.requestId];
-                }, this._timeoutMs);
-            }
-        });
-    }
-}

src/UserActivity.ts

@@ -38,26 +38,23 @@ const RECENTLY_ACTIVE_THRESHOLD_MS = 2 * 60 * 1000;
  * see doc on the userActive* functions for what these mean.
  */
 export default class UserActivity {
-    constructor(windowObj, documentObj) {
-        this._window = windowObj;
-        this._document = documentObj;
+    private readonly activeNowTimeout: Timer;
+    private readonly activeRecentlyTimeout: Timer;
+    private attachedActiveNowTimers: Timer[] = [];
+    private attachedActiveRecentlyTimers: Timer[] = [];
+    private lastScreenX = 0;
+    private lastScreenY = 0;
 
-        this._attachedActiveNowTimers = [];
-        this._attachedActiveRecentlyTimers = [];
-        this._activeNowTimeout = new Timer(CURRENTLY_ACTIVE_THRESHOLD_MS);
-        this._activeRecentlyTimeout = new Timer(RECENTLY_ACTIVE_THRESHOLD_MS);
-        this._onUserActivity = this._onUserActivity.bind(this);
-        this._onWindowBlurred = this._onWindowBlurred.bind(this);
-        this._onPageVisibilityChanged = this._onPageVisibilityChanged.bind(this);
-        this.lastScreenX = 0;
-        this.lastScreenY = 0;
+    constructor(private readonly window: Window, private readonly document: Document) {
+        this.activeNowTimeout = new Timer(CURRENTLY_ACTIVE_THRESHOLD_MS);
+        this.activeRecentlyTimeout = new Timer(RECENTLY_ACTIVE_THRESHOLD_MS);
     }
 
     static sharedInstance() {
-        if (global.mxUserActivity === undefined) {
-            global.mxUserActivity = new UserActivity(window, document);
+        if (window.mxUserActivity === undefined) {
+            window.mxUserActivity = new UserActivity(window, document);
         }
-        return global.mxUserActivity;
+        return window.mxUserActivity;
     }
 
     /**
@@ -69,8 +66,8 @@ export default class UserActivity {
      * later on when the user does become active.
      * @param {Timer} timer the timer to use
      */
-    timeWhileActiveNow(timer) {
-        this._timeWhile(timer, this._attachedActiveNowTimers);
+    public timeWhileActiveNow(timer: Timer) {
+        this.timeWhile(timer, this.attachedActiveNowTimers);
         if (this.userActiveNow()) {
             timer.start();
         }
@@ -85,14 +82,14 @@ export default class UserActivity {
      * later on when the user does become active.
      * @param {Timer} timer the timer to use
      */
-    timeWhileActiveRecently(timer) {
-        this._timeWhile(timer, this._attachedActiveRecentlyTimers);
+    public timeWhileActiveRecently(timer: Timer) {
+        this.timeWhile(timer, this.attachedActiveRecentlyTimers);
         if (this.userActiveRecently()) {
             timer.start();
         }
     }
 
-    _timeWhile(timer, attachedTimers) {
+    private timeWhile(timer: Timer, attachedTimers: Timer[]) {
         // important this happens first
         const index = attachedTimers.indexOf(timer);
         if (index === -1) {
@@ -112,36 +109,36 @@ export default class UserActivity {
     /**
      * Start listening to user activity
      */
-    start() {
-        this._document.addEventListener('mousedown', this._onUserActivity);
-        this._document.addEventListener('mousemove', this._onUserActivity);
-        this._document.addEventListener('keydown', this._onUserActivity);
-        this._document.addEventListener("visibilitychange", this._onPageVisibilityChanged);
-        this._window.addEventListener("blur", this._onWindowBlurred);
-        this._window.addEventListener("focus", this._onUserActivity);
+    public start() {
+        this.document.addEventListener('mousedown', this.onUserActivity);
+        this.document.addEventListener('mousemove', this.onUserActivity);
+        this.document.addEventListener('keydown', this.onUserActivity);
+        this.document.addEventListener("visibilitychange", this.onPageVisibilityChanged);
+        this.window.addEventListener("blur", this.onWindowBlurred);
+        this.window.addEventListener("focus", this.onUserActivity);
         // can't use document.scroll here because that's only the document
         // itself being scrolled. Need to use addEventListener's useCapture.
         // also this needs to be the wheel event, not scroll, as scroll is
         // fired when the view scrolls down for a new message.
-        this._window.addEventListener('wheel', this._onUserActivity, {
-            passive: true, capture: true,
+        this.window.addEventListener('wheel', this.onUserActivity, {
+            passive: true,
+            capture: true,
         });
     }
 
     /**
      * Stop tracking user activity
      */
-    stop() {
-        this._document.removeEventListener('mousedown', this._onUserActivity);
-        this._document.removeEventListener('mousemove', this._onUserActivity);
-        this._document.removeEventListener('keydown', this._onUserActivity);
-        this._window.removeEventListener('wheel', this._onUserActivity, {
-            passive: true, capture: true,
+    public stop() {
+        this.document.removeEventListener('mousedown', this.onUserActivity);
+        this.document.removeEventListener('mousemove', this.onUserActivity);
+        this.document.removeEventListener('keydown', this.onUserActivity);
+        this.window.removeEventListener('wheel', this.onUserActivity, {
+            capture: true,
         });
-
-        this._document.removeEventListener("visibilitychange", this._onPageVisibilityChanged);
-        this._window.removeEventListener("blur", this._onWindowBlurred);
-        this._window.removeEventListener("focus", this._onUserActivity);
+        this.document.removeEventListener("visibilitychange", this.onPageVisibilityChanged);
+        this.window.removeEventListener("blur", this.onWindowBlurred);
+        this.window.removeEventListener("focus", this.onUserActivity);
     }
 
     /**
@@ -151,8 +148,8 @@ export default class UserActivity {
      * user's attention at any given moment.
      * @returns {boolean} true if user is currently 'active'
      */
-    userActiveNow() {
-        return this._activeNowTimeout.isRunning();
+    public userActiveNow() {
+        return this.activeNowTimeout.isRunning();
     }
 
     /**
@@ -163,27 +160,27 @@ export default class UserActivity {
      * (or they may have gone to make tea and left the window focused).
      * @returns {boolean} true if user has been active recently
      */
-    userActiveRecently() {
-        return this._activeRecentlyTimeout.isRunning();
+    public userActiveRecently() {
+        return this.activeRecentlyTimeout.isRunning();
     }
 
-    _onPageVisibilityChanged(e) {
-        if (this._document.visibilityState === "hidden") {
-            this._activeNowTimeout.abort();
-            this._activeRecentlyTimeout.abort();
+    private onPageVisibilityChanged = e => {
+        if (this.document.visibilityState === "hidden") {
+            this.activeNowTimeout.abort();
+            this.activeRecentlyTimeout.abort();
         } else {
-            this._onUserActivity(e);
+            this.onUserActivity(e);
         }
-    }
+    };
 
-    _onWindowBlurred() {
-        this._activeNowTimeout.abort();
-        this._activeRecentlyTimeout.abort();
-    }
+    private onWindowBlurred = () => {
+        this.activeNowTimeout.abort();
+        this.activeRecentlyTimeout.abort();
+    };
 
-    _onUserActivity(event) {
+    private onUserActivity = (event: MouseEvent) => {
         // ignore anything if the window isn't focused
-        if (!this._document.hasFocus()) return;
+        if (!this.document.hasFocus()) return;
 
         if (event.screenX && event.type === "mousemove") {
             if (event.screenX === this.lastScreenX && event.screenY === this.lastScreenY) {
@@ -195,25 +192,25 @@ export default class UserActivity {
         }
 
         dis.dispatch({action: 'user_activity'});
-        if (!this._activeNowTimeout.isRunning()) {
-            this._activeNowTimeout.start();
+        if (!this.activeNowTimeout.isRunning()) {
+            this.activeNowTimeout.start();
             dis.dispatch({action: 'user_activity_start'});
 
-            this._runTimersUntilTimeout(this._attachedActiveNowTimers, this._activeNowTimeout);
+            UserActivity.runTimersUntilTimeout(this.attachedActiveNowTimers, this.activeNowTimeout);
         } else {
-            this._activeNowTimeout.restart();
+            this.activeNowTimeout.restart();
         }
 
-        if (!this._activeRecentlyTimeout.isRunning()) {
-            this._activeRecentlyTimeout.start();
+        if (!this.activeRecentlyTimeout.isRunning()) {
+            this.activeRecentlyTimeout.start();
 
-            this._runTimersUntilTimeout(this._attachedActiveRecentlyTimers, this._activeRecentlyTimeout);
+            UserActivity.runTimersUntilTimeout(this.attachedActiveRecentlyTimers, this.activeRecentlyTimeout);
         } else {
-            this._activeRecentlyTimeout.restart();
+            this.activeRecentlyTimeout.restart();
         }
-    }
+    };
 
-    async _runTimersUntilTimeout(attachedTimers, timeout) {
+    private static async runTimersUntilTimeout(attachedTimers: Timer[], timeout: Timer) {
         attachedTimers.forEach((t) => t.start());
         try {
             await timeout.finished();

src/VectorConferenceHandler.js

@@ -1,135 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 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 {createNewMatrixCall as jsCreateNewMatrixCall, Room} from "matrix-js-sdk";
-import CallHandler from './CallHandler';
-import {MatrixClientPeg} from "./MatrixClientPeg";
-
-// FIXME: this is Element specific code, but will be removed shortly when we
-// switch over to Jitsi entirely for video conferencing.
-
-// FIXME: This currently forces Element to try to hit the matrix.org AS for
-// conferencing. This is bad because it prevents people running their own ASes
-// from being used. This isn't permanent and will be customisable in the future:
-// see the proposal at docs/conferencing.md for more info.
-const USER_PREFIX = "fs_";
-const DOMAIN = "matrix.org";
-
-export function ConferenceCall(matrixClient, groupChatRoomId) {
-    this.client = matrixClient;
-    this.groupRoomId = groupChatRoomId;
-    this.confUserId = getConferenceUserIdForRoom(this.groupRoomId);
-}
-
-ConferenceCall.prototype.setup = function() {
-    const self = this;
-    return this._joinConferenceUser().then(function() {
-        return self._getConferenceUserRoom();
-    }).then(function(room) {
-        // return a call for *this* room to be placed. We also tack on
-        // confUserId to speed up lookups (else we'd need to loop every room
-        // looking for a 1:1 room with this conf user ID!)
-        const call = jsCreateNewMatrixCall(self.client, room.roomId);
-        call.confUserId = self.confUserId;
-        call.groupRoomId = self.groupRoomId;
-        return call;
-    });
-};
-
-ConferenceCall.prototype._joinConferenceUser = function() {
-    // Make sure the conference user is in the group chat room
-    const groupRoom = this.client.getRoom(this.groupRoomId);
-    if (!groupRoom) {
-        return Promise.reject("Bad group room ID");
-    }
-    const member = groupRoom.getMember(this.confUserId);
-    if (member && member.membership === "join") {
-        return Promise.resolve();
-    }
-    return this.client.invite(this.groupRoomId, this.confUserId);
-};
-
-ConferenceCall.prototype._getConferenceUserRoom = function() {
-    // Use an existing 1:1 with the conference user; else make one
-    const rooms = this.client.getRooms();
-    let confRoom = null;
-    for (let i = 0; i < rooms.length; i++) {
-        const confUser = rooms[i].getMember(this.confUserId);
-        if (confUser && confUser.membership === "join" &&
-                rooms[i].getJoinedMemberCount() === 2) {
-            confRoom = rooms[i];
-            break;
-        }
-    }
-    if (confRoom) {
-        return Promise.resolve(confRoom);
-    }
-    return this.client.createRoom({
-        preset: "private_chat",
-        invite: [this.confUserId],
-    }).then(function(res) {
-        return new Room(res.room_id, null, MatrixClientPeg.get().getUserId());
-    });
-};
-
-/**
- * Check if this user ID is in fact a conference bot.
- * @param {string} userId The user ID to check.
- * @return {boolean} True if it is a conference bot.
- */
-export function isConferenceUser(userId) {
-    if (userId.indexOf("@" + USER_PREFIX) !== 0) {
-        return false;
-    }
-    const base64part = userId.split(":")[0].substring(1 + USER_PREFIX.length);
-    if (base64part) {
-        const decoded = new Buffer(base64part, "base64").toString();
-        // ! $STUFF : $STUFF
-        return /^!.+:.+/.test(decoded);
-    }
-    return false;
-}
-
-export function getConferenceUserIdForRoom(roomId) {
-    // abuse browserify's core node Buffer support (strip padding ='s)
-    const base64RoomId = new Buffer(roomId).toString("base64").replace(/=/g, "");
-    return "@" + USER_PREFIX + base64RoomId + ":" + DOMAIN;
-}
-
-export function createNewMatrixCall(client, roomId) {
-    const confCall = new ConferenceCall(
-        client, roomId,
-    );
-    return confCall.setup();
-}
-
-export function getConferenceCallForRoom(roomId) {
-    // search for a conference 1:1 call for this group chat room ID
-    const activeCall = CallHandler.getAnyActiveCall();
-    if (activeCall && activeCall.confUserId) {
-        const thisRoomConfUserId = getConferenceUserIdForRoom(
-            roomId,
-        );
-        if (thisRoomConfUserId === activeCall.confUserId) {
-            return activeCall;
-        }
-    }
-    return null;
-}
-
-// TODO: Document this.
-export const slot = 'conference';

src/WhoIsTyping.ts

@@ -14,19 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import {Room} from "matrix-js-sdk/src/models/room";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+
 import {MatrixClientPeg} from "./MatrixClientPeg";
 import { _t } from './languageHandler';
 
-export function usersTypingApartFromMeAndIgnored(room) {
-    return usersTyping(
-        room, [MatrixClientPeg.get().credentials.userId].concat(MatrixClientPeg.get().getIgnoredUsers()),
-    );
+export function usersTypingApartFromMeAndIgnored(room: Room): RoomMember[] {
+    return usersTyping(room, [MatrixClientPeg.get().getUserId()].concat(MatrixClientPeg.get().getIgnoredUsers()));
 }
 
-export function usersTypingApartFromMe(room) {
-    return usersTyping(
-        room, [MatrixClientPeg.get().credentials.userId],
-    );
+export function usersTypingApartFromMe(room: Room): RoomMember[] {
+    return usersTyping(room, [MatrixClientPeg.get().getUserId()]);
 }
 
 /**
@@ -34,15 +33,11 @@ export function usersTypingApartFromMe(room) {
  * to exclude, return a list of user objects who are typing.
  * @param {Room} room: room object to get users from.
  * @param {string[]} exclude: list of user mxids to exclude.
- * @returns {string[]} list of user objects who are typing.
+ * @returns {RoomMember[]} list of user objects who are typing.
  */
-export function usersTyping(room, exclude) {
+export function usersTyping(room: Room, exclude: string[] = []): RoomMember[] {
     const whoIsTyping = [];
 
-    if (exclude === undefined) {
-        exclude = [];
-    }
-
     const memberKeys = Object.keys(room.currentState.members);
     for (let i = 0; i < memberKeys.length; ++i) {
         const userId = memberKeys[i];
@@ -57,20 +52,21 @@ export function usersTyping(room, exclude) {
     return whoIsTyping;
 }
 
-export function whoIsTypingString(whoIsTyping, limit) {
+export function whoIsTypingString(whoIsTyping: RoomMember[], limit: number): string {
     let othersCount = 0;
     if (whoIsTyping.length > limit) {
         othersCount = whoIsTyping.length - limit + 1;
     }
+
     if (whoIsTyping.length === 0) {
         return '';
     } else if (whoIsTyping.length === 1) {
         return _t('%(displayName)s is typing …', {displayName: whoIsTyping[0].name});
     }
-    const names = whoIsTyping.map(function(m) {
-        return m.name;
-    });
-    if (othersCount>=1) {
+
+    const names = whoIsTyping.map(m => m.name);
+
+    if (othersCount >= 1) {
         return _t('%(names)s and %(count)s others are typing …', {
             names: names.slice(0, limit - 1).join(', '),
             count: othersCount,

src/WidgetMessaging.js

@@ -1,212 +0,0 @@
-/*
-Copyright 2017 New Vector Ltd
-Copyright 2019 Travis Ralston
-
-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.
-*/
-
-/*
-* See - https://docs.google.com/document/d/1uPF7XWY_dXTKVKV7jZQ2KmsI19wn9-kFRgQ1tFQP7wQ/edit?usp=sharing for
-* spec. details / documentation.
-*/
-
-import FromWidgetPostMessageApi from './FromWidgetPostMessageApi';
-import ToWidgetPostMessageApi from './ToWidgetPostMessageApi';
-import Modal from "./Modal";
-import {MatrixClientPeg} from "./MatrixClientPeg";
-import SettingsStore from "./settings/SettingsStore";
-import WidgetOpenIDPermissionsDialog from "./components/views/dialogs/WidgetOpenIDPermissionsDialog";
-import WidgetUtils from "./utils/WidgetUtils";
-import {KnownWidgetActions} from "./widgets/WidgetApi";
-
-if (!global.mxFromWidgetMessaging) {
-    global.mxFromWidgetMessaging = new FromWidgetPostMessageApi();
-    global.mxFromWidgetMessaging.start();
-}
-if (!global.mxToWidgetMessaging) {
-    global.mxToWidgetMessaging = new ToWidgetPostMessageApi();
-    global.mxToWidgetMessaging.start();
-}
-
-const OUTBOUND_API_NAME = 'toWidget';
-
-export default class WidgetMessaging {
-    /**
-     * @param {string} widgetId The widget's ID
-     * @param {string} wurl The raw URL of the widget as in the event (the 'wURL')
-     * @param {string} renderedUrl The url used in the widget's iframe (either similar to the wURL
-     *     or a different URL of the clients choosing if it is using its own impl).
-     * @param {bool} isUserWidget If true, the widget is a user widget, otherwise it's a room widget
-     * @param {object} target Where widget messages should be sent (eg. the iframe object)
-     */
-    constructor(widgetId, wurl, renderedUrl, isUserWidget, target) {
-        this.widgetId = widgetId;
-        this.wurl = wurl;
-        this.renderedUrl = renderedUrl;
-        this.isUserWidget = isUserWidget;
-        this.target = target;
-        this.fromWidget = global.mxFromWidgetMessaging;
-        this.toWidget = global.mxToWidgetMessaging;
-        this._onOpenIdRequest = this._onOpenIdRequest.bind(this);
-        this.start();
-    }
-
-    messageToWidget(action) {
-        action.widgetId = this.widgetId; // Required to be sent for all outbound requests
-
-        return this.toWidget.exec(action, this.target).then((data) => {
-            // Check for errors and reject if found
-            if (data.response === undefined) { // null is valid
-                throw new Error("Missing 'response' field");
-            }
-            if (data.response && data.response.error) {
-                const err = data.response.error;
-                const msg = String(err.message ? err.message : "An error was returned");
-                if (err._error) {
-                    console.error(err._error);
-                }
-                // Potential XSS attack if 'msg' is not appropriately sanitized,
-                // as it is untrusted input by our parent window (which we assume is Element).
-                // We can't aggressively sanitize [A-z0-9] since it might be a translation.
-                throw new Error(msg);
-            }
-            // Return the response field for the request
-            return data.response;
-        });
-    }
-
-    /**
-     * Tells the widget that the client is ready to handle further widget requests.
-     * @returns {Promise<*>} Resolves after the widget has acknowledged the ready message.
-     */
-    flagReadyToContinue() {
-        return this.messageToWidget({
-            api: OUTBOUND_API_NAME,
-            action: KnownWidgetActions.ClientReady,
-        });
-    }
-
-    /**
-     * Tells the widget that it should terminate now.
-     * @returns {Promise<*>} Resolves when widget has acknowledged the message.
-     */
-    terminate() {
-        return this.messageToWidget({
-            api: OUTBOUND_API_NAME,
-            action: KnownWidgetActions.Terminate,
-        });
-    }
-
-    /**
-     * Request a screenshot from a widget
-     * @return {Promise} To be resolved with screenshot data when it has been generated
-     */
-    getScreenshot() {
-        console.log('Requesting screenshot for', this.widgetId);
-        return this.messageToWidget({
-                api: OUTBOUND_API_NAME,
-                action: "screenshot",
-            })
-            .catch((error) => new Error("Failed to get screenshot: " + error.message))
-            .then((response) => response.screenshot);
-    }
-
-    /**
-     * Request capabilities required by the widget
-     * @return {Promise} To be resolved with an array of requested widget capabilities
-     */
-    getCapabilities() {
-        console.log('Requesting capabilities for', this.widgetId);
-        return this.messageToWidget({
-                api: OUTBOUND_API_NAME,
-                action: "capabilities",
-            }).then((response) => {
-                console.log('Got capabilities for', this.widgetId, response.capabilities);
-                return response.capabilities;
-            });
-    }
-
-    sendVisibility(visible) {
-        return this.messageToWidget({
-            api: OUTBOUND_API_NAME,
-            action: "visibility",
-            visible,
-        })
-        .catch((error) => {
-            console.error("Failed to send visibility: ", error);
-        });
-    }
-
-    start() {
-        this.fromWidget.addEndpoint(this.widgetId, this.renderedUrl);
-        this.fromWidget.addListener("get_openid", this._onOpenIdRequest);
-    }
-
-    stop() {
-        this.fromWidget.removeEndpoint(this.widgetId, this.renderedUrl);
-        this.fromWidget.removeListener("get_openid", this._onOpenIdRequest);
-    }
-
-    async _onOpenIdRequest(ev, rawEv) {
-        if (ev.widgetId !== this.widgetId) return; // not interesting
-
-        const widgetSecurityKey = WidgetUtils.getWidgetSecurityKey(this.widgetId, this.wurl, this.isUserWidget);
-
-        const settings = SettingsStore.getValue("widgetOpenIDPermissions");
-        if (settings.deny && settings.deny.includes(widgetSecurityKey)) {
-            this.fromWidget.sendResponse(rawEv, {state: "blocked"});
-            return;
-        }
-        if (settings.allow && settings.allow.includes(widgetSecurityKey)) {
-            const responseBody = {state: "allowed"};
-            const credentials = await MatrixClientPeg.get().getOpenIdToken();
-            Object.assign(responseBody, credentials);
-            this.fromWidget.sendResponse(rawEv, responseBody);
-            return;
-        }
-
-        // Confirm that we received the request
-        this.fromWidget.sendResponse(rawEv, {state: "request"});
-
-        // Actually ask for permission to send the user's data
-        Modal.createTrackedDialog("OpenID widget permissions", '',
-            WidgetOpenIDPermissionsDialog, {
-                widgetUrl: this.wurl,
-                widgetId: this.widgetId,
-                isUserWidget: this.isUserWidget,
-
-                onFinished: async (confirm) => {
-                    const responseBody = {
-                        // Legacy (early draft) fields
-                        success: confirm,
-
-                        // New style MSC1960 fields
-                        state: confirm ? "allowed" : "blocked",
-                        original_request_id: ev.requestId, // eslint-disable-line camelcase
-                    };
-                    if (confirm) {
-                        const credentials = await MatrixClientPeg.get().getOpenIdToken();
-                        Object.assign(responseBody, credentials);
-                    }
-                    this.messageToWidget({
-                        api: OUTBOUND_API_NAME,
-                        action: "openid_credentials",
-                        data: responseBody,
-                    }).catch((error) => {
-                        console.error("Failed to send OpenID credentials: ", error);
-                    });
-                },
-            },
-        );
-    }
-}

src/WidgetMessagingEndpoint.js

@@ -1,37 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-
-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.
-*/
-
-
-/**
- * Represents mapping of widget instance to URLs for trusted postMessage communication.
- */
-export default class WidgetMessageEndpoint {
-    /**
-     * Mapping of widget instance to URL for trusted postMessage communication.
-     * @param  {string} widgetId    Unique widget identifier
-     * @param  {string} endpointUrl Widget wurl origin.
-     */
-    constructor(widgetId, endpointUrl) {
-        if (!widgetId) {
-            throw new Error("No widgetId specified in widgetMessageEndpoint constructor");
-        }
-        if (!endpointUrl) {
-            throw new Error("No endpoint specified in widgetMessageEndpoint constructor");
-        }
-        this.widgetId = widgetId;
-        this.endpointUrl = endpointUrl;
-    }
-}

src/accessibility/RovingTabIndex.tsx

@@ -166,7 +166,8 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({children, handleHomeEn
 
     const onKeyDownHandler = useCallback((ev) => {
         let handled = false;
-        if (handleHomeEnd) {
+        // Don't interfere with input default keydown behaviour
+        if (handleHomeEnd && ev.target.tagName !== "INPUT") {
             // check if we actually have any items
             switch (ev.key) {
                 case Key.HOME:

src/accessibility/Toolbar.tsx

@@ -28,6 +28,9 @@ interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {
 const Toolbar: React.FC<IProps> = ({children, ...props}) => {
     const onKeyDown = (ev: React.KeyboardEvent, state: IState) => {
         const target = ev.target as HTMLElement;
+        // Don't interfere with input default keydown behaviour
+        if (target.tagName === "INPUT") return;
+
         let handled = true;
 
         // HOME and END are handled by RovingTabIndexProvider

src/actions/TagOrderActions.ts

@@ -17,14 +17,14 @@ limitations under the License.
 
 import Analytics from '../Analytics';
 import { asyncAction } from './actionCreators';
-import TagOrderStore from '../stores/TagOrderStore';
+import GroupFilterOrderStore from '../stores/GroupFilterOrderStore';
 import { AsyncActionPayload } from "../dispatcher/payloads";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 
 export default class TagOrderActions {
     /**
      * Creates an action thunk that will do an asynchronous request to
-     * move a tag in TagOrderStore to destinationIx.
+     * move a tag in GroupFilterOrderStore to destinationIx.
      *
      * @param {MatrixClient} matrixClient the matrix client to set the
      * account data on.
@@ -36,8 +36,8 @@ export default class TagOrderActions {
      */
     public static moveTag(matrixClient: MatrixClient, tag: string, destinationIx: number): AsyncActionPayload {
         // Only commit tags if the state is ready, i.e. not null
-        let tags = TagOrderStore.getOrderedTags();
-        let removedTags = TagOrderStore.getRemovedTagsAccountData() || [];
+        let tags = GroupFilterOrderStore.getOrderedTags();
+        let removedTags = GroupFilterOrderStore.getRemovedTagsAccountData() || [];
         if (!tags) {
             return;
         }
@@ -47,7 +47,7 @@ export default class TagOrderActions {
 
         removedTags = removedTags.filter((t) => t !== tag);
 
-        const storeId = TagOrderStore.getStoreId();
+        const storeId = GroupFilterOrderStore.getStoreId();
 
         return asyncAction('TagOrderActions.moveTag', () => {
             Analytics.trackEvent('TagOrderActions', 'commitTagOrdering');
@@ -83,8 +83,8 @@ export default class TagOrderActions {
      */
     public static removeTag(matrixClient: MatrixClient, tag: string): AsyncActionPayload {
         // Don't change tags, just removedTags
-        const tags = TagOrderStore.getOrderedTags();
-        const removedTags = TagOrderStore.getRemovedTagsAccountData() || [];
+        const tags = GroupFilterOrderStore.getOrderedTags();
+        const removedTags = GroupFilterOrderStore.getRemovedTagsAccountData() || [];
 
         if (removedTags.includes(tag)) {
             // Return a thunk that doesn't do anything, we don't even need
@@ -94,7 +94,7 @@ export default class TagOrderActions {
 
         removedTags.push(tag);
 
-        const storeId = TagOrderStore.getStoreId();
+        const storeId = GroupFilterOrderStore.getStoreId();
 
         return asyncAction('TagOrderActions.removeTag', () => {
             Analytics.trackEvent('TagOrderActions', 'removeTag');

src/async-components/views/dialogs/security/CreateSecretStorageDialog.js

@@ -31,7 +31,8 @@ import AccessibleButton from "../../../../components/views/elements/AccessibleBu
 import DialogButtons from "../../../../components/views/elements/DialogButtons";
 import InlineSpinner from "../../../../components/views/elements/InlineSpinner";
 import RestoreKeyBackupDialog from "../../../../components/views/dialogs/security/RestoreKeyBackupDialog";
-import { isSecureBackupRequired } from '../../../../utils/WellKnownUtils';
+import { getSecureBackupSetupMethods, isSecureBackupRequired } from '../../../../utils/WellKnownUtils';
+import SecurityCustomisations from "../../../../customisations/Security";
 
 const PHASE_LOADING = 0;
 const PHASE_LOADERROR = 1;
@@ -87,13 +88,20 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             canUploadKeysWithPasswordOnly: null,
             accountPassword: props.accountPassword || "",
             accountPasswordCorrect: null,
-            passPhraseKeySelected: CREATE_STORAGE_OPTION_KEY,
             canSkip: !isSecureBackupRequired(),
         };
 
+        const setupMethods = getSecureBackupSetupMethods();
+        if (setupMethods.includes("key")) {
+            this.state.passPhraseKeySelected = CREATE_STORAGE_OPTION_KEY;
+        } else {
+            this.state.passPhraseKeySelected = CREATE_STORAGE_OPTION_PASSPHRASE;
+        }
+
         this._passphraseField = createRef();
 
-        this._fetchBackupInfo();
+        MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatusChange);
+
         if (this.state.accountPassword) {
             // If we have an account password in memory, let's simplify and
             // assume it means password auth is also supported for device
@@ -104,13 +112,27 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             this._queryKeyUploadAuth();
         }
 
-        MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatusChange);
+        this._getInitialPhase();
     }
 
     componentWillUnmount() {
         MatrixClientPeg.get().removeListener('crypto.keyBackupStatus', this._onKeyBackupStatusChange);
     }
 
+    _getInitialPhase() {
+        const keyFromCustomisations = SecurityCustomisations.createSecretStorageKey?.();
+        if (keyFromCustomisations) {
+            console.log("Created key via customisations, jumping to bootstrap step");
+            this._recoveryKey = {
+                privateKey: keyFromCustomisations,
+            };
+            this._bootstrapSecretStorage();
+            return;
+        }
+
+        this._fetchBackupInfo();
+    }
+
     async _fetchBackupInfo() {
         try {
             const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
@@ -441,39 +463,55 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         });
     }
 
+    _renderOptionKey() {
+        return (
+            <StyledRadioButton
+                key={CREATE_STORAGE_OPTION_KEY}
+                value={CREATE_STORAGE_OPTION_KEY}
+                name="keyPassphrase"
+                checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_KEY}
+                outlined
+            >
+                <div className="mx_CreateSecretStorageDialog_optionTitle">
+                    <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup"></span>
+                    {_t("Generate a Security Key")}
+                </div>
+                <div>{_t("We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.")}</div>
+            </StyledRadioButton>
+        );
+    }
+
+    _renderOptionPassphrase() {
+        return (
+            <StyledRadioButton
+                key={CREATE_STORAGE_OPTION_PASSPHRASE}
+                value={CREATE_STORAGE_OPTION_PASSPHRASE}
+                name="keyPassphrase"
+                checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_PASSPHRASE}
+                outlined
+            >
+                <div className="mx_CreateSecretStorageDialog_optionTitle">
+                    <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase"></span>
+                    {_t("Enter a Security Phrase")}
+                </div>
+                <div>{_t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.")}</div>
+            </StyledRadioButton>
+        );
+    }
+
     _renderPhaseChooseKeyPassphrase() {
+        const setupMethods = getSecureBackupSetupMethods();
+        const optionKey = setupMethods.includes("key") ? this._renderOptionKey() : null;
+        const optionPassphrase = setupMethods.includes("passphrase") ? this._renderOptionPassphrase() : null;
+
         return <form onSubmit={this._onChooseKeyPassphraseFormSubmit}>
             <p className="mx_CreateSecretStorageDialog_centeredBody">{_t(
                 "Safeguard against losing access to encrypted messages & data by " +
                 "backing up encryption keys on your server.",
             )}</p>
             <div className="mx_CreateSecretStorageDialog_primaryContainer" role="radiogroup" onChange={this._onKeyPassphraseChange}>
-                <StyledRadioButton
-                    key={CREATE_STORAGE_OPTION_KEY}
-                    value={CREATE_STORAGE_OPTION_KEY}
-                    name="keyPassphrase"
-                    checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_KEY}
-                    outlined
-                >
-                    <div className="mx_CreateSecretStorageDialog_optionTitle">
-                        <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup"></span>
-                        {_t("Generate a Security Key")}
-                    </div>
-                    <div>{_t("We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.")}</div>
-                </StyledRadioButton>
-                <StyledRadioButton
-                    key={CREATE_STORAGE_OPTION_PASSPHRASE}
-                    value={CREATE_STORAGE_OPTION_PASSPHRASE}
-                    name="keyPassphrase"
-                    checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_PASSPHRASE}
-                    outlined
-                >
-                    <div className="mx_CreateSecretStorageDialog_optionTitle">
-                        <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase"></span>
-                        {_t("Enter a Security Phrase")}
-                    </div>
-                    <div>{_t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.")}</div>
-                </StyledRadioButton>
+                {optionKey}
+                {optionPassphrase}
             </div>
             <DialogButtons
                 primaryButton={_t("Continue")}

src/components/structures/FilePanel.js

@@ -25,6 +25,7 @@ import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
 import BaseCard from "../views/right_panel/BaseCard";
 import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
+import DesktopBuildsNotice, {WarningKind} from "../views/elements/DesktopBuildsNotice";
 
 /*
  * Component which shows the filtered file using a TimelinePanel
@@ -222,6 +223,8 @@ class FilePanel extends React.Component {
             <p>{_t('Attach files from chat or just drag and drop them anywhere in a room.')}</p>
         </div>);
 
+        const isRoomEncrypted = this.noRoom ? false : MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
+
         if (this.state.timelineSet) {
             // console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " +
             //             "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
@@ -232,6 +235,7 @@ class FilePanel extends React.Component {
                     previousPhase={RightPanelPhases.RoomSummary}
                     withoutScrollContainer
                 >
+                    <DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
                     <TimelinePanel
                         manageReadReceipts={false}
                         manageReadMarkers={false}

src/components/structures/GroupFilterPanel.js

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import TagOrderStore from '../../stores/TagOrderStore';
+import GroupFilterOrderStore from '../../stores/GroupFilterOrderStore';
 
 import GroupActions from '../../actions/GroupActions';
 
@@ -31,7 +31,7 @@ import AutoHideScrollbar from "./AutoHideScrollbar";
 import SettingsStore from "../../settings/SettingsStore";
 import UserTagTile from "../views/elements/UserTagTile";
 
-class TagPanel extends React.Component {
+class GroupFilterPanel extends React.Component {
     static contextType = MatrixClientContext;
 
     state = {
@@ -44,13 +44,13 @@ class TagPanel extends React.Component {
         this.context.on("Group.myMembership", this._onGroupMyMembership);
         this.context.on("sync", this._onClientSync);
 
-        this._tagOrderStoreToken = TagOrderStore.addListener(() => {
+        this._groupFilterOrderStoreToken = GroupFilterOrderStore.addListener(() => {
             if (this.unmounted) {
                 return;
             }
             this.setState({
-                orderedTags: TagOrderStore.getOrderedTags() || [],
-                selectedTags: TagOrderStore.getSelectedTags(),
+                orderedTags: GroupFilterOrderStore.getOrderedTags() || [],
+                selectedTags: GroupFilterOrderStore.getSelectedTags(),
             });
         });
         // This could be done by anything with a matrix client
@@ -61,8 +61,8 @@ class TagPanel extends React.Component {
         this.unmounted = true;
         this.context.removeListener("Group.myMembership", this._onGroupMyMembership);
         this.context.removeListener("sync", this._onClientSync);
-        if (this._tagOrderStoreToken) {
-            this._tagOrderStoreToken.remove();
+        if (this._groupFilterOrderStoreToken) {
+            this._groupFilterOrderStoreToken.remove();
         }
     }
 
@@ -98,7 +98,7 @@ class TagPanel extends React.Component {
         return (
             <div>
                 <UserTagTile />
-                <hr className="mx_TagPanel_divider" />
+                <hr className="mx_GroupFilterPanel_divider" />
             </div>
         );
     }
@@ -117,8 +117,8 @@ class TagPanel extends React.Component {
         });
 
         const itemsSelected = this.state.selectedTags.length > 0;
-        const classes = classNames('mx_TagPanel', {
-            mx_TagPanel_items_selected: itemsSelected,
+        const classes = classNames('mx_GroupFilterPanel', {
+            mx_GroupFilterPanel_items_selected: itemsSelected,
         });
 
         let createButton = (
@@ -141,7 +141,7 @@ class TagPanel extends React.Component {
 
         return <div className={classes} onClick={this.onClearFilterClick}>
             <AutoHideScrollbar
-                className="mx_TagPanel_scroller"
+                className="mx_GroupFilterPanel_scroller"
                 // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
                 // instead of onClick. Otherwise we experience https://github.com/vector-im/element-web/issues/6253
                 onMouseDown={this.onMouseDown}
@@ -152,7 +152,7 @@ class TagPanel extends React.Component {
                 >
                     { (provided, snapshot) => (
                             <div
-                                className="mx_TagPanel_tagTileContainer"
+                                className="mx_GroupFilterPanel_tagTileContainer"
                                 ref={provided.innerRef}
                             >
                                 { this.renderGlobalIcon() }
@@ -168,4 +168,4 @@ class TagPanel extends React.Component {
         </div>;
     }
 }
-export default TagPanel;
+export default GroupFilterPanel;

src/components/structures/GroupView.js

@@ -620,7 +620,7 @@ export default class GroupView extends React.Component {
                 profileForm: newProfileForm,
 
                 // Indicate that FlairStore needs to be poked to show this change
-                // in TagTile (TagPanel), Flair and GroupTile (MyGroups).
+                // in TagTile (GroupFilterPanel), Flair and GroupTile (MyGroups).
                 avatarChanged: true,
             });
         }).catch((e) => {
@@ -649,7 +649,6 @@ export default class GroupView extends React.Component {
                 editing: false,
                 summary: null,
             });
-            dis.dispatch({action: 'panel_disable'});
             this._initGroupStore(this.props.groupId);
 
             if (this.state.avatarChanged) {
@@ -870,10 +869,7 @@ export default class GroupView extends React.Component {
                     { _t('Add rooms to this community') }
                 </div>
             </AccessibleButton>) : <div />;
-        const roomDetailListClassName = classnames({
-            "mx_fadable": true,
-            "mx_fadable_faded": this.state.editing,
-        });
+
         return <div className="mx_GroupView_rooms">
             <div className="mx_GroupView_rooms_header">
                 <h3>
@@ -884,9 +880,7 @@ export default class GroupView extends React.Component {
             </div>
             { this.state.groupRoomsLoading ?
                 <Spinner /> :
-                <RoomDetailList
-                    rooms={this.state.groupRooms}
-                    className={roomDetailListClassName} />
+                <RoomDetailList rooms={this.state.groupRooms} />
             }
         </div>;
     }

src/components/structures/LeftPanel.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import * as React from "react";
 import { createRef } from "react";
-import TagPanel from "./TagPanel";
+import GroupFilterPanel from "./GroupFilterPanel";
 import CustomRoomTagPanel from "./CustomRoomTagPanel";
 import classNames from "classnames";
 import dis from "../../dispatcher/dispatcher";
@@ -47,7 +47,7 @@ interface IProps {
 
 interface IState {
     showBreadcrumbs: boolean;
-    showTagPanel: boolean;
+    showGroupFilterPanel: boolean;
 }
 
 // List of CSS classes which should be included in keyboard navigation within the room list
@@ -61,7 +61,7 @@ const cssClasses = [
 
 export default class LeftPanel extends React.Component<IProps, IState> {
     private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
-    private tagPanelWatcherRef: string;
+    private groupFilterPanelWatcherRef: string;
     private bgImageWatcherRef: string;
     private focusedElement = null;
     private isDoingStickyHeaders = false;
@@ -71,7 +71,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         this.state = {
             showBreadcrumbs: BreadcrumbsStore.instance.visible,
-            showTagPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
+            showGroupFilterPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
         };
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
@@ -79,8 +79,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
         this.bgImageWatcherRef = SettingsStore.watchSetting(
             "RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
-        this.tagPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
-            this.setState({showTagPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
+        this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
+            this.setState({showGroupFilterPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
         });
 
         // We watch the middle panel because we don't actually get resized, the middle panel does.
@@ -89,7 +89,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     }
 
     public componentWillUnmount() {
-        SettingsStore.unwatchSetting(this.tagPanelWatcherRef);
+        SettingsStore.unwatchSetting(this.groupFilterPanelWatcherRef);
         SettingsStore.unwatchSetting(this.bgImageWatcherRef);
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
@@ -120,8 +120,11 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         if (settingBgMxc) {
             avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(settingBgMxc, avatarSize, avatarSize);
         }
+
         const avatarUrlProp = `url(${avatarUrl})`;
-        if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
+        if (!avatarUrl) {
+            document.body.style.removeProperty("--avatar-url");
+        } else if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
             document.body.style.setProperty("--avatar-url", avatarUrlProp);
         }
     };
@@ -385,9 +388,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     }
 
     public render(): React.ReactNode {
-        const tagPanel = !this.state.showTagPanel ? null : (
-            <div className="mx_LeftPanel_tagPanelContainer">
-                <TagPanel />
+        const groupFilterPanel = !this.state.showGroupFilterPanel ? null : (
+            <div className="mx_LeftPanel_GroupFilterPanelContainer">
+                <GroupFilterPanel />
                 {SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null}
             </div>
         );
@@ -404,7 +407,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         const containerClasses = classNames({
             "mx_LeftPanel": true,
-            "mx_LeftPanel_hasTagPanel": !!tagPanel,
+            "mx_LeftPanel_hasGroupFilterPanel": !!groupFilterPanel,
             "mx_LeftPanel_minimized": this.props.isMinimized,
         });
 
@@ -415,7 +418,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         return (
             <div className={containerClasses}>
-                {tagPanel}
+                {groupFilterPanel}
                 <aside className="mx_LeftPanel_roomListContainer">
                     {this.renderHeader()}
                     {this.renderSearchExplore()}

src/components/structures/LoggedInView.tsx

@@ -27,7 +27,6 @@ import CallMediaHandler from '../../CallMediaHandler';
 import { fixupColorFonts } from '../../utils/FontManager';
 import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
-import sessionStore from '../../stores/SessionStore';
 import {MatrixClientPeg, IMatrixClientCreds} from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
 
@@ -41,10 +40,6 @@ import HomePage from "./HomePage";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PlatformPeg from "../../PlatformPeg";
 import { DefaultTagID } from "../../stores/room-list/models";
-import {
-    showToast as showSetPasswordToast,
-    hideToast as hideSetPasswordToast,
-} from "../../toasts/SetPasswordToast";
 import {
     showToast as showServerLimitToast,
     hideToast as hideServerLimitToast,
@@ -76,16 +71,12 @@ interface IProps {
     viaServers?: string[];
     hideToSRUsers: boolean;
     resizeNotifier: ResizeNotifier;
-    middleDisabled: boolean;
-    leftDisabled: boolean;
-    rightDisabled: boolean;
     // eslint-disable-next-line camelcase
     page_type: string;
     autoJoin: boolean;
     threepidInvite?: IThreepidInvite;
     roomOobData?: object;
     currentRoomId: string;
-    ConferenceHandler?: object;
     collapseLhs: boolean;
     config: {
         piwik: {
@@ -106,10 +97,6 @@ interface IUsageLimit {
 }
 
 interface IState {
-    mouseDown?: {
-        x: number;
-        y: number;
-    };
     syncErrorData?: {
         error: {
             data: IUsageLimit;
@@ -150,8 +137,6 @@ class LoggedInView extends React.Component<IProps, IState> {
     protected readonly _matrixClient: MatrixClient;
     protected readonly _roomView: React.RefObject<any>;
     protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
-    protected readonly _sessionStore: sessionStore;
-    protected readonly _sessionStoreToken: { remove: () => void };
     protected readonly _compactLayoutWatcherRef: string;
     protected resizer: Resizer;
 
@@ -159,7 +144,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         super(props, context);
 
         this.state = {
-            mouseDown: undefined,
             syncErrorData: undefined,
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
@@ -172,12 +156,6 @@ class LoggedInView extends React.Component<IProps, IState> {
 
         document.addEventListener('keydown', this._onNativeKeyDown, false);
 
-        this._sessionStore = sessionStore;
-        this._sessionStoreToken = this._sessionStore.addListener(
-            this._setStateFromSessionStore,
-        );
-        this._setStateFromSessionStore();
-
         this._updateServerNoticeEvents();
 
         this._matrixClient.on("accountData", this.onAccountData);
@@ -206,9 +184,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         this._matrixClient.removeListener("sync", this.onSync);
         this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
         SettingsStore.unwatchSetting(this._compactLayoutWatcherRef);
-        if (this._sessionStoreToken) {
-            this._sessionStoreToken.remove();
-        }
         this.resizer.detach();
     }
 
@@ -229,20 +204,13 @@ class LoggedInView extends React.Component<IProps, IState> {
         return this._roomView.current.canResetTimeline();
     };
 
-    _setStateFromSessionStore = () => {
-        if (this._sessionStore.getCachedPassword()) {
-            showSetPasswordToast();
-        } else {
-            hideSetPasswordToast();
-        }
-    };
-
     _createResizer() {
         const classNames = {
             handle: "mx_ResizeHandle",
             vertical: "mx_ResizeHandle_vertical",
             reverse: "mx_ResizeHandle_reverse",
         };
+        let size;
         const collapseConfig = {
             toggleSize: 260 - 50,
             onCollapsed: (collapsed) => {
@@ -253,21 +221,19 @@ class LoggedInView extends React.Component<IProps, IState> {
                     dis.dispatch({action: "show_left_panel"}, true);
                 }
             },
-            onResized: (size) => {
-                window.localStorage.setItem("mx_lhs_size", '' + size);
+            onResized: (_size) => {
+                size = _size;
                 this.props.resizeNotifier.notifyLeftHandleResized();
             },
             onResizeStart: () => {
                 this.props.resizeNotifier.startResizing();
             },
             onResizeStop: () => {
+                window.localStorage.setItem("mx_lhs_size", '' + size);
                 this.props.resizeNotifier.stopResizing();
             },
         };
-        const resizer = new Resizer(
-            this._resizeContainer.current,
-            CollapseDistributor,
-            collapseConfig);
+        const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
         resizer.setClassNames(classNames);
         return resizer;
     }
@@ -543,8 +509,8 @@ class LoggedInView extends React.Component<IProps, IState> {
             // Could be "GroupTile +groupId:domain"
             const draggableId = result.draggableId.split(' ').pop();
 
-            // Dispatch synchronously so that the TagPanel receives an
-            // optimistic update from TagOrderStore before the previous
+            // Dispatch synchronously so that the GroupFilterPanel receives an
+            // optimistic update from GroupFilterOrderStore before the previous
             // state is shown.
             dis.dispatch(TagOrderActions.moveTag(
                 this._matrixClient,
@@ -575,48 +541,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         ), true);
     };
 
-    _onMouseDown = (ev) => {
-        // When the panels are disabled, clicking on them results in a mouse event
-        // which bubbles to certain elements in the tree. When this happens, close
-        // any settings page that is currently open (user/room/group).
-        if (this.props.leftDisabled && this.props.rightDisabled) {
-            const targetClasses = new Set(ev.target.className.split(' '));
-            if (
-                targetClasses.has('mx_MatrixChat') ||
-                targetClasses.has('mx_MatrixChat_middlePanel') ||
-                targetClasses.has('mx_RoomView')
-            ) {
-                this.setState({
-                    mouseDown: {
-                        x: ev.pageX,
-                        y: ev.pageY,
-                    },
-                });
-            }
-        }
-    };
-
-    _onMouseUp = (ev) => {
-        if (!this.state.mouseDown) return;
-
-        const deltaX = ev.pageX - this.state.mouseDown.x;
-        const deltaY = ev.pageY - this.state.mouseDown.y;
-        const distance = Math.sqrt((deltaX * deltaX) + (deltaY + deltaY));
-        const maxRadius = 5; // People shouldn't be straying too far, hopefully
-
-        // Note: we track how far the user moved their mouse to help
-        // combat against https://github.com/vector-im/element-web/issues/7158
-
-        if (distance < maxRadius) {
-            // This is probably a real click, and not a drag
-            dis.dispatch({ action: 'close_settings' });
-        }
-
-        // Always clear the mouseDown state to ensure we don't accidentally
-        // use stale values due to the mouseDown checks.
-        this.setState({mouseDown: null});
-    };
-
     render() {
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserView = sdk.getComponent('structures.UserView');
@@ -636,8 +560,6 @@ class LoggedInView extends React.Component<IProps, IState> {
                     oobData={this.props.roomOobData}
                     viaServers={this.props.viaServers}
                     key={this.props.currentRoomId || 'roomview'}
-                    disabled={this.props.middleDisabled}
-                    ConferenceHandler={this.props.ConferenceHandler}
                     resizeNotifier={this.props.resizeNotifier}
                 />;
                 break;
@@ -685,8 +607,6 @@ class LoggedInView extends React.Component<IProps, IState> {
                     onKeyDown={this._onReactKeyDown}
                     className='mx_MatrixChat_wrapper'
                     aria-hidden={this.props.hideToSRUsers}
-                    onMouseDown={this._onMouseDown}
-                    onMouseUp={this._onMouseUp}
                 >
                     <ToastContainer />
                     <DragDropContext onDragEnd={this._onDragEnd}>

src/components/structures/MatrixChat.tsx

@@ -30,7 +30,7 @@ import 'what-input';
 
 import Analytics from "../../Analytics";
 import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { MatrixClientPeg, IMatrixClientCreds } from "../../MatrixClientPeg";
 import PlatformPeg from "../../PlatformPeg";
 import SdkConfig from "../../SdkConfig";
 import * as RoomListSorter from "../../RoomListSorter";
@@ -80,6 +80,7 @@ import { leaveRoomBehaviour } from "../../utils/membership";
 import CreateCommunityPrototypeDialog from "../views/dialogs/CreateCommunityPrototypeDialog";
 import ThreepidInviteStore, { IThreepidInvite, IThreepidInviteWireFormat } from "../../stores/ThreepidInviteStore";
 import {UIFeature} from "../../settings/UIFeature";
+import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -148,7 +149,6 @@ interface IRoomInfo {
 interface IProps { // TODO type things better
     config: Record<string, any>;
     serverConfig?: ValidatedServerConfig;
-    ConferenceHandler?: any;
     onNewScreen: (screen: string, replaceLast: boolean) => void;
     enableGuest?: boolean;
     // the queryParams extracted from the [real] query-string of the URI
@@ -181,9 +181,6 @@ interface IState {
     currentUserId?: string;
     // this is persisted as mx_lhs_size, loaded in LoggedInView
     collapseLhs: boolean;
-    leftDisabled: boolean;
-    middleDisabled: boolean;
-    // the right panel's disabled state is tracked in its store.
     // Parameters used in the registration dance with the IS
     // eslint-disable-next-line camelcase
     register_client_secret?: string;
@@ -236,8 +233,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.state = {
             view: Views.LOADING,
             collapseLhs: false,
-            leftDisabled: false,
-            middleDisabled: false,
 
             hideToSRUsers: false,
 
@@ -290,7 +285,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             // When the session loads it'll be detected as soft logged out and a dispatch
             // will be sent out to say that, triggering this MatrixChat to show the soft
             // logout page.
-            Lifecycle.loadSession({});
+            Lifecycle.loadSession();
         }
 
         this.accountPassword = null;
@@ -670,9 +665,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             case 'view_home_page':
                 this.viewHome();
                 break;
-            case 'view_set_mxid':
-                this.setMxId(payload);
-                break;
             case 'view_start_chat_or_reuse':
                 this.chatCreateOrReuse(payload.user_id);
                 break;
@@ -713,14 +705,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     this.state.resizeNotifier.notifyLeftHandleResized();
                 });
                 break;
-            case 'panel_disable': {
-                this.setState({
-                    leftDisabled: payload.leftDisabled || payload.sideDisabled || false,
-                    middleDisabled: payload.middleDisabled || false,
-                    // We don't track the right panel being disabled here - it's tracked in the store.
-                });
-                break;
-            }
             case 'on_logged_in':
                 if (
                     !Lifecycle.isSoftLogout() &&
@@ -985,37 +969,19 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
     }
 
-    private setMxId(payload) {
-        const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
-        const close = Modal.createTrackedDialog('Set MXID', '', SetMxIdDialog, {
-            homeserverUrl: MatrixClientPeg.get().getHomeserverUrl(),
-            onFinished: (submitted, credentials) => {
-                if (!submitted) {
-                    dis.dispatch({
-                        action: 'cancel_after_sync_prepared',
-                    });
-                    if (payload.go_home_on_cancel) {
-                        dis.dispatch({
-                            action: 'view_home_page',
-                        });
-                    }
-                    return;
-                }
-                MatrixClientPeg.setJustRegisteredUserId(credentials.user_id);
-                this.onRegistered(credentials);
-            },
-            onDifferentServerClicked: (ev) => {
-                dis.dispatch({action: 'start_registration'});
-                close();
-            },
-            onLoginClick: (ev) => {
-                dis.dispatch({action: 'start_login'});
-                close();
-            },
-        }).close;
-    }
-
     private async createRoom(defaultPublic = false) {
+        const communityId = CommunityPrototypeStore.instance.getSelectedCommunityId();
+        if (communityId) {
+            // double check the user will have permission to associate this room with the community
+            if (!CommunityPrototypeStore.instance.isAdminOf(communityId)) {
+                Modal.createTrackedDialog('Pre-failure to create room', '', ErrorDialog, {
+                    title: _t("Cannot create rooms in this community"),
+                    description: _t("You do not have permission to create rooms in this community."),
+                });
+                return;
+            }
+        }
+
         const CreateRoomDialog = sdk.getComponent('dialogs.CreateRoomDialog');
         const modal = Modal.createTrackedDialog('Create Room', '', CreateRoomDialog, { defaultPublic });
 
@@ -1802,12 +1768,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.showScreen("forgot_password");
     };
 
-    onRegisterFlowComplete = (credentials: object, password: string) => {
+    onRegisterFlowComplete = (credentials: IMatrixClientCreds, password: string) => {
         return this.onUserCompletedLoginFlow(credentials, password);
     };
 
     // returns a promise which resolves to the new MatrixClient
-    onRegistered(credentials: object) {
+    onRegistered(credentials: IMatrixClientCreds) {
         return Lifecycle.setLoggedIn(credentials);
     }
 
@@ -1843,7 +1809,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         } else {
             subtitle = `${this.subTitleStatus} ${subtitle}`;
         }
-        document.title = `${SdkConfig.get().brand} ${subtitle}`;
+
+        const title = `${SdkConfig.get().brand} ${subtitle}`;
+
+        if (document.title !== title) {
+            document.title = title;
+        }
     }
 
     updateStatusIndicator(state: string, prevState: string) {
@@ -1888,7 +1859,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
      * Note: SSO users (and any others using token login) currently do not pass through
      * this, as they instead jump straight into the app after `attemptTokenLogin`.
      */
-    onUserCompletedLoginFlow = async (credentials: object, password: string) => {
+    onUserCompletedLoginFlow = async (credentials: IMatrixClientCreds, password: string) => {
         this.accountPassword = password;
         // self-destruct the password after 5mins
         if (this.accountPasswordTimer !== null) clearTimeout(this.accountPasswordTimer);

src/components/structures/RightPanel.js

@@ -1,9 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2017, 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,7 +17,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import {Room} from "matrix-js-sdk/src/models/room";
 
 import * as sdk from '../../index';
@@ -162,7 +158,7 @@ export default class RightPanel extends React.Component {
     }
 
     onRoomStateMember(ev, state, member) {
-        if (member.roomId !== this.props.room.roomId) {
+        if (!this.props.room || member.roomId !== this.props.room.roomId) {
             return;
         }
         // redraw the badge on the membership list
@@ -202,13 +198,19 @@ export default class RightPanel extends React.Component {
             dis.dispatch({
                 action: "view_home_page",
             });
+        } else if (this.state.phase === RightPanelPhases.EncryptionPanel &&
+            this.state.verificationRequest && this.state.verificationRequest.pending
+        ) {
+            // When the user clicks close on the encryption panel cancel the pending request first if any
+            this.state.verificationRequest.cancel();
         } else {
             // Otherwise we have got our user from RoomViewStore which means we're being shown
             // within a room/group, so go back to the member panel if we were in the encryption panel,
             // or the member list if we were in the member panel... phew.
+            const isEncryptionPhase = this.state.phase === RightPanelPhases.EncryptionPanel;
             dis.dispatch({
                 action: Action.ViewUser,
-                member: this.state.phase === RightPanelPhases.EncryptionPanel ? this.state.member : null,
+                member: isEncryptionPhase ? this.state.member : null,
             });
         }
     };
@@ -301,14 +303,8 @@ export default class RightPanel extends React.Component {
                 break;
         }
 
-        const classes = classNames("mx_RightPanel", "mx_fadable", {
-            "collapsed": this.props.collapsed,
-            "mx_fadable_faded": this.props.disabled,
-            "dark-panel": true,
-        });
-
         return (
-            <aside className={classes} id="mx_RightPanel">
+            <aside className="mx_RightPanel dark-panel" id="mx_RightPanel">
                 { panel }
             </aside>
         );

src/components/structures/RoomDirectory.js

@@ -30,12 +30,12 @@ import Analytics from '../../Analytics';
 import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 import {ALL_ROOMS} from "../views/directory/NetworkDropdown";
 import SettingsStore from "../../settings/SettingsStore";
-import TagOrderStore from "../../stores/TagOrderStore";
+import GroupFilterOrderStore from "../../stores/GroupFilterOrderStore";
 import GroupStore from "../../stores/GroupStore";
 import FlairStore from "../../stores/FlairStore";
 
 const MAX_NAME_LENGTH = 80;
-const MAX_TOPIC_LENGTH = 160;
+const MAX_TOPIC_LENGTH = 800;
 
 function track(action) {
     Analytics.trackEvent('RoomDirectory', action);
@@ -49,7 +49,7 @@ export default class RoomDirectory extends React.Component {
     constructor(props) {
         super(props);
 
-        const selectedCommunityId = TagOrderStore.getSelectedTags()[0];
+        const selectedCommunityId = GroupFilterOrderStore.getSelectedTags()[0];
         this.state = {
             publicRooms: [],
             loading: true,
@@ -497,6 +497,9 @@ export default class RoomDirectory extends React.Component {
         }
 
         let topic = room.topic || '';
+        // Additional truncation based on line numbers is done via CSS,
+        // but to ensure that the DOM is not polluted with a huge string
+        // we give it a hard limit before rendering.
         if (topic.length > MAX_TOPIC_LENGTH) {
             topic = `${topic.substring(0, MAX_TOPIC_LENGTH)}...`;
         }

src/components/structures/RoomStatusBar.js

@@ -1,7 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015-2020 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.
@@ -26,6 +24,7 @@ import Resend from '../../Resend';
 import dis from '../../dispatcher/dispatcher';
 import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
 import {Action} from "../../dispatcher/actions";
+import { CallState, CallType } from 'matrix-js-sdk/lib/webrtc/call';
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -46,10 +45,12 @@ export default class RoomStatusBar extends React.Component {
         // Used to suggest to the user to invite someone
         sentMessageAndIsAlone: PropTypes.bool,
 
-        // true if there is an active call in this room (means we show
-        // the 'Active Call' text in the status bar if there is nothing
-        // more interesting)
-        hasActiveCall: PropTypes.bool,
+        // The active call in the room, if any (means we show the call bar
+        // along with the status of the call)
+        callState: PropTypes.string,
+
+        // The type of the call in progress, or null if no call is in progress
+        callType: PropTypes.string,
 
         // true if the room is being peeked at. This affects components that shouldn't
         // logically be shown when peeking, such as a prompt to invite people to a room.
@@ -121,6 +122,12 @@ export default class RoomStatusBar extends React.Component {
         });
     };
 
+    _showCallBar() {
+        return (this.props.callState &&
+            (this.props.callState !== CallState.Ended && this.props.callState !== CallState.Ringing)
+        );
+    }
+
     _onResendAllClick = () => {
         Resend.resendUnsentEvents(this.props.room);
         dis.fire(Action.FocusComposer);
@@ -153,7 +160,7 @@ export default class RoomStatusBar extends React.Component {
     // indicate other sizes.
     _getSize() {
         if (this._shouldShowConnectionError() ||
-            this.props.hasActiveCall ||
+            this._showCallBar() ||
             this.props.sentMessageAndIsAlone
         ) {
             return STATUS_BAR_EXPANDED;
@@ -165,7 +172,7 @@ export default class RoomStatusBar extends React.Component {
 
     // return suitable content for the image on the left of the status bar.
     _getIndicator() {
-        if (this.props.hasActiveCall) {
+        if (this._showCallBar()) {
             const TintableSvg = sdk.getComponent("elements.TintableSvg");
             return (
                 <TintableSvg src={require("../../../res/img/element-icons/room/in-call.svg")} width="23" height="20" />
@@ -269,6 +276,25 @@ export default class RoomStatusBar extends React.Component {
         </div>;
     }
 
+    _getCallStatusText() {
+        switch (this.props.callState) {
+            case CallState.CreateOffer:
+            case CallState.InviteSent:
+                return _t('Calling...');
+            case CallState.Connecting:
+            case CallState.CreateAnswer:
+                return _t('Call connecting...');
+            case CallState.Connected:
+                return _t('Active call');
+            case CallState.WaitLocalMedia:
+                if (this.props.callType === CallType.Video) {
+                    return _t('Starting camera...');
+                } else {
+                    return _t('Starting microphone...');
+                }
+        }
+    }
+
     // return suitable content for the main (text) part of the status bar.
     _getContent() {
         if (this._shouldShowConnectionError()) {
@@ -291,10 +317,10 @@ export default class RoomStatusBar extends React.Component {
             return this._getUnsentMessageContent();
         }
 
-        if (this.props.hasActiveCall) {
+        if (this._showCallBar()) {
             return (
                 <div className="mx_RoomStatusBar_callBar">
-                    <b>{ _t('Active call') }</b>
+                    <b>{ this._getCallStatusText() }</b>
                 </div>
             );
         }

src/components/structures/RoomView.tsx

@@ -69,9 +69,9 @@ import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel";
 import AuxPanel from "../views/rooms/AuxPanel";
 import RoomHeader from "../views/rooms/RoomHeader";
 import TintableSvg from "../views/elements/TintableSvg";
-import type * as ConferenceHandler from '../../VectorConferenceHandler';
 import {XOR} from "../../@types/common";
 import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
+import { CallState, CallType, MatrixCall } from "matrix-js-sdk/lib/webrtc/call";
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -84,8 +84,6 @@ if (DEBUG) {
 }
 
 interface IProps {
-    ConferenceHandler?: ConferenceHandler;
-
     threepidInvite: IThreepidInvite,
 
     // Any data about the room that would normally come from the homeserver
@@ -107,7 +105,6 @@ interface IProps {
     viaServers?: string[];
 
     autoJoin?: boolean;
-    disabled?: boolean;
     resizeNotifier: ResizeNotifier;
 
     // Called with the credentials of a registered user (if they were a ROU that transitioned to PWLU)
@@ -144,7 +141,7 @@ export interface IState {
     }>;
     searchHighlights?: string[];
     searchInProgress?: boolean;
-    callState?: string;
+    callState?: CallState;
     guestsCanJoin: boolean;
     canPeek: boolean;
     showApps: boolean;
@@ -181,7 +178,6 @@ export interface IState {
     matrixClientIsReady: boolean;
     showUrlPreview?: boolean;
     e2eStatus?: E2EStatus;
-    displayConfCallNotification?: boolean;
     rejecting?: boolean;
     rejectError?: Error;
 }
@@ -483,13 +479,11 @@ export default class RoomView extends React.Component<IProps, IState> {
 
     componentDidMount() {
         const call = this.getCallForRoom();
-        const callState = call ? call.call_state : "ended";
+        const callState = call ? call.state : null;
         this.setState({
             callState: callState,
         });
 
-        this.updateConfCallNotification();
-
         window.addEventListener('beforeunload', this.onPageUnload);
         if (this.props.resizeNotifier) {
             this.props.resizeNotifier.on("middlePanelResized", this.onResize);
@@ -718,18 +712,9 @@ export default class RoomView extends React.Component<IProps, IState> {
                 }
 
                 const call = this.getCallForRoom();
-                let callState = "ended";
-
-                if (call) {
-                    callState = call.call_state;
-                }
-
-                // possibly remove the conf call notification if we're now in
-                // the conf
-                this.updateConfCallNotification();
 
                 this.setState({
-                    callState: callState,
+                    callState: call ? call.state : null,
                 });
                 break;
             }
@@ -1018,9 +1003,6 @@ export default class RoomView extends React.Component<IProps, IState> {
 
     // rate limited because a power level change will emit an event for every member in the room.
     private updateRoomMembers = rateLimitedFunc((dueToMember) => {
-        // a member state changed in this room
-        // refresh the conf call notification state
-        this.updateConfCallNotification();
         this.updateDMState();
 
         let memberCountInfluence = 0;
@@ -1049,30 +1031,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.setState({isAlone: joinedOrInvitedMemberCount === 1});
     }
 
-    private updateConfCallNotification() {
-        const room = this.state.room;
-        if (!room || !this.props.ConferenceHandler) {
-            return;
-        }
-        const confMember = room.getMember(
-            this.props.ConferenceHandler.getConferenceUserIdForRoom(room.roomId),
-        );
-
-        if (!confMember) {
-            return;
-        }
-        const confCall = this.props.ConferenceHandler.getConferenceCallForRoom(confMember.roomId);
-
-        // A conf call notification should be displayed if there is an ongoing
-        // conf call but this cilent isn't a part of it.
-        this.setState({
-            displayConfCallNotification: (
-                (!confCall || confCall.call_state === "ended") &&
-                confMember.membership === "join"
-            ),
-        });
-    }
-
     private updateDMState() {
         const room = this.state.room;
         if (room.getMyMembership() != "join") {
@@ -1127,42 +1085,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                     room_id: this.getRoomId(),
                 },
             });
-
-            // Don't peek whilst registering otherwise getPendingEventList complains
-            // Do this by indicating our intention to join
-
-            // XXX: ILAG is disabled for now,
-            // see https://github.com/vector-im/element-web/issues/8222
             dis.dispatch({action: 'require_registration'});
-            // dis.dispatch({
-            //     action: 'will_join',
-            // });
-
-            // const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
-            // const close = Modal.createTrackedDialog('Set MXID', '', SetMxIdDialog, {
-            //     homeserverUrl: cli.getHomeserverUrl(),
-            //     onFinished: (submitted, credentials) => {
-            //         if (submitted) {
-            //             this.props.onRegistered(credentials);
-            //         } else {
-            //             dis.dispatch({
-            //                 action: 'cancel_after_sync_prepared',
-            //             });
-            //             dis.dispatch({
-            //                 action: 'cancel_join',
-            //             });
-            //         }
-            //     },
-            //     onDifferentServerClicked: (ev) => {
-            //         dis.dispatch({action: 'start_registration'});
-            //         close();
-            //     },
-            //     onLoginClick: (ev) => {
-            //         dis.dispatch({action: 'start_login'});
-            //         close();
-            //     },
-            // }).close;
-            // return;
         } else {
             Promise.resolve().then(() => {
                 const signUrl = this.props.threepidInvite?.signUrl;
@@ -1677,11 +1600,11 @@ export default class RoomView extends React.Component<IProps, IState> {
     /**
      * get any current call for this room
      */
-    private getCallForRoom() {
+    private getCallForRoom(): MatrixCall {
         if (!this.state.room) {
             return null;
         }
-        return CallHandler.getCallForRoom(this.state.room.roomId);
+        return CallHandler.sharedInstance().getCallForRoom(this.state.room.roomId);
     }
 
     // this has to be a proper method rather than an unnamed function,
@@ -1814,10 +1737,13 @@ export default class RoomView extends React.Component<IProps, IState> {
         // We have successfully loaded this room, and are not previewing.
         // Display the "normal" room view.
 
-        const call = this.getCallForRoom();
-        let inCall = false;
-        if (call && (this.state.callState !== 'ended' && this.state.callState !== 'ringing')) {
-            inCall = true;
+        let activeCall = null;
+        {
+            // New block because this variable doesn't need to hang around for the rest of the function
+            const call = this.getCallForRoom();
+            if (call && (this.state.callState !== 'ended' && this.state.callState !== 'ringing')) {
+                activeCall = call;
+            }
         }
 
         const scrollheaderClasses = classNames({
@@ -1836,7 +1762,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             statusBar = <RoomStatusBar
                 room={this.state.room}
                 sentMessageAndIsAlone={this.state.isAlone}
-                hasActiveCall={inCall}
+                callState={this.state.callState}
+                callType={activeCall ? activeCall.type : null}
                 isPeeking={myMembership !== "join"}
                 onInviteClick={this.onInviteButtonClick}
                 onStopWarningClick={this.onStopAloneWarningClick}
@@ -1857,7 +1784,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         let aux = null;
         let previewBar;
         let hideCancel = false;
-        let forceHideRightPanel = false;
         if (this.state.forwardingEvent) {
             aux = <ForwardMessage onCancelClick={this.onCancelClick} />;
         } else if (this.state.searching) {
@@ -1866,6 +1792,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 searchInProgress={this.state.searchInProgress}
                 onCancelClick={this.onCancelSearchClick}
                 onSearch={this.onSearch}
+                isRoomEncrypted={this.context.isRoomEncrypted(this.state.room.roomId)}
             />;
         } else if (showRoomUpgradeBar) {
             aux = <RoomUpgradeWarningBar room={this.state.room} recommendation={roomVersionRecommendation} />;
@@ -1901,8 +1828,6 @@ export default class RoomView extends React.Component<IProps, IState> {
                         { previewBar }
                     </div>
                 );
-            } else {
-                forceHideRightPanel = true;
             }
         } else if (hiddenHighlightCount > 0) {
             aux = (
@@ -1924,12 +1849,9 @@ export default class RoomView extends React.Component<IProps, IState> {
                 room={this.state.room}
                 fullHeight={false}
                 userId={this.context.credentials.userId}
-                conferenceHandler={this.props.ConferenceHandler}
                 draggingFile={this.state.draggingFile}
-                displayConfCallNotification={this.state.displayConfCallNotification}
                 maxHeight={this.state.auxPanelMaxHeight}
                 showApps={this.state.showApps}
-                hideAppsDrawer={false}
                 onResize={this.onResize}
                 resizeNotifier={this.props.resizeNotifier}
             >
@@ -1948,7 +1870,6 @@ export default class RoomView extends React.Component<IProps, IState> {
                 <MessageComposer
                     room={this.state.room}
                     callState={this.state.callState}
-                    disabled={this.props.disabled}
                     showApps={this.state.showApps}
                     e2eStatus={this.state.e2eStatus}
                     resizeNotifier={this.props.resizeNotifier}
@@ -1966,10 +1887,10 @@ export default class RoomView extends React.Component<IProps, IState> {
             };
         }
 
-        if (inCall) {
+        if (activeCall) {
             let zoomButton; let videoMuteButton;
 
-            if (call.type === "video") {
+            if (activeCall.type === CallType.Video) {
                 zoomButton = (
                     <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={_t("Fill screen")}>
                         <TintableSvg
@@ -1984,10 +1905,11 @@ export default class RoomView extends React.Component<IProps, IState> {
                 videoMuteButton =
                     <div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
                         <TintableSvg
-                            src={call.isLocalVideoMuted() ?
+                            src={activeCall.isLocalVideoMuted() ?
                                 require("../../../res/img/element-icons/call/video-muted.svg") :
                                 require("../../../res/img/element-icons/call/video-call.svg")}
-                            alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")}
+                            alt={activeCall.isLocalVideoMuted() ? _t("Click to unmute video") :
+                                _t("Click to mute video")}
                             width=""
                             height="27"
                         />
@@ -1996,10 +1918,10 @@ export default class RoomView extends React.Component<IProps, IState> {
             const voiceMuteButton =
                 <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
                     <TintableSvg
-                        src={call.isMicrophoneMuted() ?
+                        src={activeCall.isMicrophoneMuted() ?
                             require("../../../res/img/element-icons/call/voice-muted.svg") :
                             require("../../../res/img/element-icons/call/voice-unmuted.svg")}
-                        alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
+                        alt={activeCall.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
                         width="21"
                         height="26"
                     />
@@ -2103,11 +2025,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             "mx_RoomView_statusArea_expanded": isStatusAreaExpanded,
         });
 
-        const fadableSectionClasses = classNames("mx_RoomView_body", "mx_fadable", {
-            "mx_fadable_faded": this.props.disabled,
-        });
-
-        const showRightPanel = !forceHideRightPanel && this.state.room && this.state.showRightPanel;
+        const showRightPanel = this.state.room && this.state.showRightPanel;
         const rightPanel = showRightPanel
             ? <RightPanel room={this.state.room} resizeNotifier={this.props.resizeNotifier} />
             : null;
@@ -2117,7 +2035,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         });
 
         const mainClasses = classNames("mx_RoomView", {
-            mx_RoomView_inCall: inCall,
+            mx_RoomView_inCall: Boolean(activeCall),
         });
 
         return (
@@ -2138,7 +2056,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                             e2eStatus={this.state.e2eStatus}
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
-                            <div className={fadableSectionClasses}>
+                            <div className="mx_RoomView_body">
                                 {auxPanel}
                                 <div className={timelineClasses}>
                                     {topUnreadMessagesBar}

src/components/structures/UserMenu.tsx

@@ -44,7 +44,7 @@ import IconizedContextMenu, {
 } from "../views/context_menus/IconizedContextMenu";
 import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
 import * as fbEmitter from "fbemitter";
-import TagOrderStore from "../../stores/TagOrderStore";
+import GroupFilterOrderStore from "../../stores/GroupFilterOrderStore";
 import { showCommunityInviteDialog } from "../../RoomInvite";
 import dis from "../../dispatcher/dispatcher";
 import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
@@ -87,7 +87,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     public componentDidMount() {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
-        this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
+        this.tagStoreRef = GroupFilterOrderStore.addListener(this.onTagStoreUpdate);
     }
 
     public componentWillUnmount() {
@@ -343,6 +343,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         let secondarySection = null;
 
         if (prototypeCommunityName) {
+            const communityId = CommunityPrototypeStore.instance.getSelectedCommunityId();
             primaryHeader = (
                 <div className="mx_UserMenu_contextMenu_name">
                     <span className="mx_UserMenu_contextMenu_displayName">
@@ -350,24 +351,36 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     </span>
                 </div>
             );
-            primaryOptionList = (
-                <IconizedContextMenuOptionList>
+            let settingsOption;
+            let inviteOption;
+            if (CommunityPrototypeStore.instance.canInviteTo(communityId)) {
+                inviteOption = (
+                    <IconizedContextMenuOption
+                        iconClassName="mx_UserMenu_iconInvite"
+                        label={_t("Invite")}
+                        onClick={this.onCommunityInviteClick}
+                    />
+                );
+            }
+            if (CommunityPrototypeStore.instance.isAdminOf(communityId)) {
+                settingsOption = (
                     <IconizedContextMenuOption
                         iconClassName="mx_UserMenu_iconSettings"
                         label={_t("Settings")}
                         aria-label={_t("Community settings")}
                         onClick={this.onCommunitySettingsClick}
                     />
+                );
+            }
+            primaryOptionList = (
+                <IconizedContextMenuOptionList>
+                    {settingsOption}
                     <IconizedContextMenuOption
                         iconClassName="mx_UserMenu_iconMembers"
                         label={_t("Members")}
                         onClick={this.onCommunityMembersClick}
                     />
-                    <IconizedContextMenuOption
-                        iconClassName="mx_UserMenu_iconInvite"
-                        label={_t("Invite")}
-                        onClick={this.onCommunityInviteClick}
-                    />
+                    {inviteOption}
                 </IconizedContextMenuOptionList>
             );
             secondarySection = (

src/components/views/auth/PassphraseField.tsx

@@ -40,11 +40,7 @@ interface IProps {
     onValidate(result: IValidationResult);
 }
 
-interface IState {
-    complexity: zxcvbn.ZXCVBNResult;
-}
-
-class PassphraseField extends PureComponent<IProps, IState> {
+class PassphraseField extends PureComponent<IProps> {
     static defaultProps = {
         label: _td("Password"),
         labelEnterPassword: _td("Enter password"),
@@ -52,14 +48,16 @@ class PassphraseField extends PureComponent<IProps, IState> {
         labelAllowedButUnsafe: _td("Password is allowed, but unsafe"),
     };
 
-    state = { complexity: null };
-
-    public readonly validate = withValidation<this>({
-        description: function() {
-            const complexity = this.state.complexity;
+    public readonly validate = withValidation<this, zxcvbn.ZXCVBNResult>({
+        description: function(complexity) {
             const score = complexity ? complexity.score : 0;
             return <progress className="mx_PassphraseField_progress" max={4} value={score} />;
         },
+        deriveData: async ({ value }) => {
+            if (!value) return null;
+            const { scorePassword } = await import('../../../utils/PasswordScorer');
+            return scorePassword(value);
+        },
         rules: [
             {
                 key: "required",
@@ -68,28 +66,24 @@ class PassphraseField extends PureComponent<IProps, IState> {
             },
             {
                 key: "complexity",
-                test: async function({ value }) {
+                test: async function({ value }, complexity) {
                     if (!value) {
                         return false;
                     }
-                    const { scorePassword } = await import('../../../utils/PasswordScorer');
-                    const complexity = scorePassword(value);
-                    this.setState({ complexity });
                     const safe = complexity.score >= this.props.minScore;
                     const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"];
                     return allowUnsafe || safe;
                 },
-                valid: function() {
+                valid: function(complexity) {
                     // Unsafe passwords that are valid are only possible through a
                     // configuration flag. We'll print some helper text to signal
                     // to the user that their password is allowed, but unsafe.
-                    if (this.state.complexity.score >= this.props.minScore) {
+                    if (complexity.score >= this.props.minScore) {
                         return _t(this.props.labelStrongPassword);
                     }
                     return _t(this.props.labelAllowedButUnsafe);
                 },
-                invalid: function() {
-                    const complexity = this.state.complexity;
+                invalid: function(complexity) {
                     if (!complexity) {
                         return null;
                     }

src/components/views/avatars/MemberAvatar.tsx

@@ -23,7 +23,7 @@ import {Action} from "../../../dispatcher/actions";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import BaseAvatar from "./BaseAvatar";
 
-interface IProps {
+interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember;
     fallbackUserId?: string;
     width: number;

src/components/views/avatars/RoomAvatar.tsx

@@ -22,6 +22,7 @@ import ImageView from '../elements/ImageView';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
+import {ResizeMethod} from "../../../Avatar";
 
 interface IProps {
     // Room may be left unset here, but if it is,
@@ -32,7 +33,7 @@ interface IProps {
     oobData?: any;
     width?: number;
     height?: number;
-    resizeMethod?: string;
+    resizeMethod?: ResizeMethod;
     viewAvatarOnClick?: boolean;
 }
 

src/components/views/dialogs/SetMxIdDialog.js

@@ -1,304 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import classnames from 'classnames';
-import { Key } from '../../../Keyboard';
-import { _t } from '../../../languageHandler';
-import { SAFE_LOCALPART_REGEX } from '../../../Registration';
-
-// The amount of time to wait for further changes to the input username before
-// sending a request to the server
-const USERNAME_CHECK_DEBOUNCE_MS = 250;
-
-/*
- * Prompt the user to set a display name.
- *
- * On success, `onFinished(true, newDisplayName)` is called.
- */
-export default class SetMxIdDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-        // Called when the user requests to register with a different homeserver
-        onDifferentServerClicked: PropTypes.func.isRequired,
-        // Called if the user wants to switch to login instead
-        onLoginClick: PropTypes.func.isRequired,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._input_value = createRef();
-        this._uiAuth = createRef();
-
-        this.state = {
-            // The entered username
-            username: '',
-            // Indicate ongoing work on the username
-            usernameBusy: false,
-            // Indicate error with username
-            usernameError: '',
-            // Assume the homeserver supports username checking until "M_UNRECOGNIZED"
-            usernameCheckSupport: true,
-
-            // Whether the auth UI is currently being used
-            doingUIAuth: false,
-            // Indicate error with auth
-            authError: '',
-        };
-    }
-
-    componentDidMount() {
-        this._input_value.current.select();
-
-        this._matrixClient = MatrixClientPeg.get();
-    }
-
-    onValueChange = ev => {
-        this.setState({
-            username: ev.target.value,
-            usernameBusy: true,
-            usernameError: '',
-        }, () => {
-            if (!this.state.username || !this.state.usernameCheckSupport) {
-                this.setState({
-                    usernameBusy: false,
-                });
-                return;
-            }
-
-            // Debounce the username check to limit number of requests sent
-            if (this._usernameCheckTimeout) {
-                clearTimeout(this._usernameCheckTimeout);
-            }
-            this._usernameCheckTimeout = setTimeout(() => {
-                this._doUsernameCheck().finally(() => {
-                    this.setState({
-                        usernameBusy: false,
-                    });
-                });
-            }, USERNAME_CHECK_DEBOUNCE_MS);
-        });
-    };
-
-    onKeyUp = ev => {
-        if (ev.key === Key.ENTER) {
-            this.onSubmit();
-        }
-    };
-
-    onSubmit = ev => {
-        if (this._uiAuth.current) {
-            this._uiAuth.current.tryContinue();
-        }
-        this.setState({
-            doingUIAuth: true,
-        });
-    };
-
-    _doUsernameCheck() {
-        // We do a quick check ahead of the username availability API to ensure the
-        // user ID roughly looks okay from a Matrix perspective.
-        if (!SAFE_LOCALPART_REGEX.test(this.state.username)) {
-            this.setState({
-                usernameError: _t("A username can only contain lower case letters, numbers and '=_-./'"),
-            });
-            return Promise.reject();
-        }
-
-        // Check if username is available
-        return this._matrixClient.isUsernameAvailable(this.state.username).then(
-            (isAvailable) => {
-                if (isAvailable) {
-                    this.setState({usernameError: ''});
-                }
-            },
-            (err) => {
-                // Indicate whether the homeserver supports username checking
-                const newState = {
-                    usernameCheckSupport: err.errcode !== "M_UNRECOGNIZED",
-                };
-                console.error('Error whilst checking username availability: ', err);
-                switch (err.errcode) {
-                    case "M_USER_IN_USE":
-                        newState.usernameError = _t('Username not available');
-                        break;
-                    case "M_INVALID_USERNAME":
-                        newState.usernameError = _t(
-                            'Username invalid: %(errMessage)s',
-                            { errMessage: err.message},
-                        );
-                        break;
-                    case "M_UNRECOGNIZED":
-                        // This homeserver doesn't support username checking, assume it's
-                        // fine and rely on the error appearing in registration step.
-                        newState.usernameError = '';
-                        break;
-                    case undefined:
-                        newState.usernameError = _t('Something went wrong!');
-                        break;
-                    default:
-                        newState.usernameError = _t(
-                            'An error occurred: %(error_string)s',
-                            { error_string: err.message },
-                        );
-                        break;
-                }
-                this.setState(newState);
-            },
-        );
-    }
-
-    _generatePassword() {
-        return Math.random().toString(36).slice(2);
-    }
-
-    _makeRegisterRequest = auth => {
-        // Not upgrading - changing mxids
-        const guestAccessToken = null;
-        if (!this._generatedPassword) {
-            this._generatedPassword = this._generatePassword();
-        }
-        return this._matrixClient.register(
-            this.state.username,
-            this._generatedPassword,
-            undefined, // session id: included in the auth dict already
-            auth,
-            {},
-            guestAccessToken,
-        );
-    };
-
-    _onUIAuthFinished = (success, response) => {
-        this.setState({
-            doingUIAuth: false,
-        });
-
-        if (!success) {
-            this.setState({ authError: response.message });
-            return;
-        }
-
-        this.props.onFinished(true, {
-            userId: response.user_id,
-            deviceId: response.device_id,
-            homeserverUrl: this._matrixClient.getHomeserverUrl(),
-            identityServerUrl: this._matrixClient.getIdentityServerUrl(),
-            accessToken: response.access_token,
-            password: this._generatedPassword,
-        });
-    };
-
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
-
-        let auth;
-        if (this.state.doingUIAuth) {
-            auth = <InteractiveAuth
-                matrixClient={this._matrixClient}
-                makeRequest={this._makeRegisterRequest}
-                onAuthFinished={this._onUIAuthFinished}
-                inputs={{}}
-                poll={true}
-                ref={this._uiAuth}
-                continueIsManaged={true}
-            />;
-        }
-        const inputClasses = classnames({
-            "mx_SetMxIdDialog_input": true,
-            "error": Boolean(this.state.usernameError),
-        });
-
-        let usernameIndicator = null;
-        if (this.state.usernameBusy) {
-            usernameIndicator = <div>{_t("Checking...")}</div>;
-        } else {
-            const usernameAvailable = this.state.username &&
-                this.state.usernameCheckSupport && !this.state.usernameError;
-            const usernameIndicatorClasses = classnames({
-                "error": Boolean(this.state.usernameError),
-                "success": usernameAvailable,
-            });
-            usernameIndicator = <div className={usernameIndicatorClasses} role="alert">
-                { usernameAvailable ? _t('Username available') : this.state.usernameError }
-            </div>;
-        }
-
-        let authErrorIndicator = null;
-        if (this.state.authError) {
-            authErrorIndicator = <div className="error" role="alert">
-                { this.state.authError }
-            </div>;
-        }
-        const canContinue = this.state.username &&
-            !this.state.usernameError &&
-            !this.state.usernameBusy;
-
-        return (
-            <BaseDialog className="mx_SetMxIdDialog"
-                onFinished={this.props.onFinished}
-                title={_t('To get started, please pick a username!')}
-                contentId='mx_Dialog_content'
-            >
-                <div className="mx_Dialog_content" id='mx_Dialog_content'>
-                    <div className="mx_SetMxIdDialog_input_group">
-                        <input type="text" ref={this._input_value} value={this.state.username}
-                            autoFocus={true}
-                            onChange={this.onValueChange}
-                            onKeyUp={this.onKeyUp}
-                            size="30"
-                            className={inputClasses}
-                        />
-                    </div>
-                    { usernameIndicator }
-                    <p>
-                        { _t(
-                            'This will be your account name on the <span></span> ' +
-                            'homeserver, or you can pick a <a>different server</a>.',
-                            {},
-                            {
-                                'span': <span>{ this.props.homeserverUrl }</span>,
-                                'a': (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{ sub }</a>,
-                            },
-                        ) }
-                    </p>
-                    <p>
-                        { _t(
-                            'If you already have a Matrix account you can <a>log in</a> instead.',
-                            {},
-                            { 'a': (sub) => <a href="#" onClick={this.props.onLoginClick}>{ sub }</a> },
-                        ) }
-                    </p>
-                    { auth }
-                    { authErrorIndicator }
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <input className="mx_Dialog_primary"
-                        type="submit"
-                        value={_t("Continue")}
-                        onClick={this.onSubmit}
-                        disabled={!canContinue}
-                    />
-                </div>
-            </BaseDialog>
-        );
-    }
-}

src/components/views/dialogs/SetPasswordDialog.js

@@ -1,128 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
-import Modal from '../../../Modal';
-
-const WarmFuzzy = function(props) {
-    const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-    let title = _t('You have successfully set a password!');
-    if (props.didSetEmail) {
-        title = _t('You have successfully set a password and an email address!');
-    }
-    const advice = _t('You can now return to your account after signing out, and sign in on other devices.');
-    let extraAdvice = null;
-    if (!props.didSetEmail) {
-        extraAdvice = _t('Remember, you can always set an email address in user settings if you change your mind.');
-    }
-
-    return <BaseDialog className="mx_SetPasswordDialog"
-        onFinished={props.onFinished}
-        title={ title }
-    >
-        <div className="mx_Dialog_content">
-            <p>
-                { advice }
-            </p>
-            <p>
-                { extraAdvice }
-            </p>
-        </div>
-        <div className="mx_Dialog_buttons">
-            <button
-                className="mx_Dialog_primary"
-                autoFocus={true}
-                onClick={props.onFinished}>
-                    { _t('Continue') }
-            </button>
-        </div>
-    </BaseDialog>;
-};
-
-/**
- * Prompt the user to set a password
- *
- * On success, `onFinished()` when finished
- */
-export default class SetPasswordDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    state = {
-        error: null,
-    };
-
-    _onPasswordChanged = res => {
-        Modal.createDialog(WarmFuzzy, {
-            didSetEmail: res.didSetEmail,
-            onFinished: () => {
-                this.props.onFinished();
-            },
-        });
-    };
-
-    _onPasswordChangeError = err => {
-        let errMsg = err.error || "";
-        if (err.httpStatus === 403) {
-            errMsg = _t('Failed to change password. Is your password correct?');
-        } else if (err.httpStatus) {
-            errMsg += ' ' + _t(
-                '(HTTP status %(httpStatus)s)',
-                { httpStatus: err.httpStatus },
-            );
-        }
-        this.setState({
-            error: errMsg,
-        });
-    };
-
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const ChangePassword = sdk.getComponent('views.settings.ChangePassword');
-
-        return (
-            <BaseDialog className="mx_SetPasswordDialog"
-                onFinished={this.props.onFinished}
-                title={ _t('Please set a password!') }
-            >
-                <div className="mx_Dialog_content">
-                    <p>
-                        { _t('This will allow you to return to your account after signing out, and sign in on other sessions.') }
-                    </p>
-                    <ChangePassword
-                        className="mx_SetPasswordDialog_change_password"
-                        rowClassName=""
-                        buttonClassNames="mx_Dialog_primary mx_SetPasswordDialog_change_password_button"
-                        buttonKind="primary"
-                        confirm={false}
-                        autoFocusNewPasswordInput={true}
-                        shouldAskForEmail={true}
-                        onError={this._onPasswordChangeError}
-                        onFinished={this._onPasswordChanged} />
-                    <div className="error">
-                        { this.state.error }
-                    </div>
-                </div>
-            </BaseDialog>
-        );
-    }
-}

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

@@ -289,7 +289,12 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             content = <div>
                 <p>{_t("Use your Security Key to continue.")}</p>
 
-                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onRecoveryKeyNext} spellCheck={false}>
+                <form
+                    className="mx_AccessSecretStorageDialog_primaryContainer"
+                    onSubmit={this._onRecoveryKeyNext}
+                    spellCheck={false}
+                    autoComplete="off"
+                >
                     <div className="mx_AccessSecretStorageDialog_recoveryKeyEntry">
                         <div className="mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput">
                             <Field
@@ -298,6 +303,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                                 value={this.state.recoveryKey}
                                 onChange={this._onRecoveryKeyChange}
                                 forceValidity={this.state.recoveryKeyCorrect}
+                                autoComplete="off"
                             />
                         </div>
                         <span className="mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText">

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -62,7 +62,8 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
     };
 
     render() {
-        const {title, tooltip, children, tooltipClassName, ...props} = this.props;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {title, tooltip, children, tooltipClassName, forceHide, ...props} = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"

src/components/views/elements/AppTile.js

@@ -18,11 +18,9 @@ limitations under the License.
 */
 
 import url from 'url';
-import qs from 'qs';
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import WidgetMessaging from '../../../WidgetMessaging';
 import AccessibleButton from './AccessibleButton';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
@@ -34,37 +32,16 @@ import WidgetUtils from '../../../utils/WidgetUtils';
 import dis from '../../../dispatcher/dispatcher';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import classNames from 'classnames';
-import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
 import {aboveLeftOf, ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
 import PersistedElement from "./PersistedElement";
 import {WidgetType} from "../../../widgets/WidgetType";
-import {Capability} from "../../../widgets/WidgetApi";
-import {sleep} from "../../../utils/promise";
 import {SettingLevel} from "../../../settings/SettingLevel";
 import WidgetStore from "../../../stores/WidgetStore";
 import {Action} from "../../../dispatcher/actions";
-
-const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
-const ENABLE_REACT_PERF = false;
-
-/**
- * Does template substitution on a URL (or any string). Variables will be
- * passed through encodeURIComponent.
- * @param {string} uriTemplate The path with template variables e.g. '/foo/$bar'.
- * @param {Object} variables The key/value pairs to replace the template
- * variables with. E.g. { '$bar': 'baz' }.
- * @return {string} The result of replacing all template variables e.g. '/foo/baz'.
- */
-function uriFromTemplate(uriTemplate, variables) {
-    let out = uriTemplate;
-    for (const [key, val] of Object.entries(variables)) {
-        out = out.replace(
-            '$' + key, encodeURIComponent(val),
-        );
-    }
-    return out;
-}
+import {StopGapWidget} from "../../../stores/widgets/StopGapWidget";
+import {ElementWidgetActions} from "../../../stores/widgets/ElementWidgetActions";
+import {MatrixCapabilities} from "matrix-widget-api";
 
 export default class AppTile extends React.Component {
     constructor(props) {
@@ -72,11 +49,14 @@ export default class AppTile extends React.Component {
 
         // The key used for PersistedElement
         this._persistKey = 'widget_' + this.props.app.id;
+        this._sgWidget = new StopGapWidget(this.props);
+        this._sgWidget.on("preparing", this._onWidgetPrepared);
+        this._sgWidget.on("ready", this._onWidgetReady);
+        this.iframe = null; // ref to the iframe (callback style)
 
         this.state = this._getNewState(props);
 
         this._onAction = this._onAction.bind(this);
-        this._onLoaded = this._onLoaded.bind(this);
         this._onEditClick = this._onEditClick.bind(this);
         this._onDeleteClick = this._onDeleteClick.bind(this);
         this._onRevokeClicked = this._onRevokeClicked.bind(this);
@@ -89,7 +69,6 @@ export default class AppTile extends React.Component {
         this._onReloadWidgetClick = this._onReloadWidgetClick.bind(this);
 
         this._contextMenuButton = createRef();
-        this._appFrame = createRef();
         this._menu_bar = createRef();
     }
 
@@ -109,12 +88,10 @@ export default class AppTile extends React.Component {
             return !!currentlyAllowedWidgets[newProps.app.eventId];
         };
 
-        const PersistedElement = sdk.getComponent("elements.PersistedElement");
         return {
             initialising: true, // True while we are mangling the widget URL
             // True while the iframe content is loading
             loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey),
-            widgetUrl: this._addWurlParams(newProps.app.url),
             // Assume that widget has permission to load if we are the user who
             // added it to the room, or if explicitly granted by the user
             hasPermissionToLoad: newProps.userId === newProps.creatorUserId || hasPermissionToLoad(),
@@ -125,43 +102,6 @@ export default class AppTile extends React.Component {
         };
     }
 
-    /**
-     * Does the widget support a given capability
-     * @param  {string}  capability Capability to check for
-     * @return {Boolean}            True if capability supported
-     */
-    _hasCapability(capability) {
-        return ActiveWidgetStore.widgetHasCapability(this.props.app.id, capability);
-    }
-
-    /**
-     * Add widget instance specific parameters to pass in wUrl
-     * Properties passed to widget instance:
-     *  - widgetId
-     *  - origin / parent URL
-     * @param {string} urlString Url string to modify
-     * @return {string}
-     * Url string with parameters appended.
-     * If url can not be parsed, it is returned unmodified.
-     */
-    _addWurlParams(urlString) {
-        try {
-            const parsed = new URL(urlString);
-
-            // TODO: Replace these with proper widget params
-            // See https://github.com/matrix-org/matrix-doc/pull/1958/files#r405714833
-            parsed.searchParams.set('widgetId', this.props.app.id);
-            parsed.searchParams.set('parentUrl', window.location.href.split('#', 2)[0]);
-
-            // Replace the encoded dollar signs back to dollar signs. They have no special meaning
-            // in HTTP, but URL parsers encode them anyways.
-            return parsed.toString().replace(/%24/g, '$');
-        } catch (e) {
-            console.error("Failed to add widget URL params:", e);
-            return urlString;
-        }
-    }
-
     isMixedContent() {
         const parentContentProtocol = window.location.protocol;
         const u = url.parse(this.props.app.url);
@@ -177,7 +117,7 @@ export default class AppTile extends React.Component {
     componentDidMount() {
         // Only fetch IM token on mount if we're showing and have permission to load
         if (this.props.show && this.state.hasPermissionToLoad) {
-            this.setScalarToken();
+            this._startWidget();
         }
 
         // Widget action listeners
@@ -191,93 +131,45 @@ export default class AppTile extends React.Component {
         // if it's not remaining on screen, get rid of the PersistedElement container
         if (!ActiveWidgetStore.getWidgetPersistence(this.props.app.id)) {
             ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
-            const PersistedElement = sdk.getComponent("elements.PersistedElement");
             PersistedElement.destroyElement(this._persistKey);
         }
+
+        if (this._sgWidget) {
+            this._sgWidget.stop();
+        }
     }
 
-    // TODO: Generify the name of this function. It's not just scalar tokens.
-    /**
-     * Adds a scalar token to the widget URL, if required
-     * Component initialisation is only complete when this function has resolved
-     */
-    setScalarToken() {
-        if (!WidgetUtils.isScalarUrl(this.props.app.url)) {
-            console.warn('Widget does not match integration manager, refusing to set auth token', url);
-            this.setState({
-                error: null,
-                widgetUrl: this._addWurlParams(this.props.app.url),
-                initialising: false,
-            });
-            return;
+    _resetWidget(newProps) {
+        if (this._sgWidget) {
+            this._sgWidget.stop();
         }
+        this._sgWidget = new StopGapWidget(newProps);
+        this._sgWidget.on("preparing", this._onWidgetPrepared);
+        this._sgWidget.on("ready", this._onWidgetReady);
+        this._startWidget();
+    }
 
-        const managers = IntegrationManagers.sharedInstance();
-        if (!managers.hasManager()) {
-            console.warn("No integration manager - not setting scalar token", url);
-            this.setState({
-                error: null,
-                widgetUrl: this._addWurlParams(this.props.app.url),
-                initialising: false,
-            });
-            return;
-        }
-
-        // TODO: Pick the right manager for the widget
-
-        const defaultManager = managers.getPrimaryManager();
-        if (!WidgetUtils.isScalarUrl(defaultManager.apiUrl)) {
-            console.warn('Unknown integration manager, refusing to set auth token', url);
-            this.setState({
-                error: null,
-                widgetUrl: this._addWurlParams(this.props.app.url),
-                initialising: false,
-            });
-            return;
-        }
-
-        // Fetch the token before loading the iframe as we need it to mangle the URL
-        if (!this._scalarClient) {
-            this._scalarClient = defaultManager.getScalarClient();
-        }
-        this._scalarClient.getScalarToken().then((token) => {
-            // Append scalar_token as a query param if not already present
-            this._scalarClient.scalarToken = token;
-            const u = url.parse(this._addWurlParams(this.props.app.url));
-            const params = qs.parse(u.query);
-            if (!params.scalar_token) {
-                params.scalar_token = encodeURIComponent(token);
-                // u.search must be set to undefined, so that u.format() uses query parameters - https://nodejs.org/docs/latest/api/url.html#url_url_format_url_options
-                u.search = undefined;
-                u.query = params;
-            }
-
-            this.setState({
-                error: null,
-                widgetUrl: u.format(),
-                initialising: false,
-            });
-
-            // Fetch page title from remote content if not already set
-            if (!this.state.widgetPageTitle && params.url) {
-                this._fetchWidgetTitle(params.url);
-            }
-        }, (err) => {
-            console.error("Failed to get scalar_token", err);
-            this.setState({
-                error: err.message,
-                initialising: false,
-            });
+    _startWidget() {
+        this._sgWidget.prepare().then(() => {
+            this.setState({initialising: false});
         });
     }
 
+    _iframeRefChange = (ref) => {
+        this.iframe = ref;
+        if (ref) {
+            this._sgWidget.start(ref);
+        } else {
+            this._resetWidget(this.props);
+        }
+    };
+
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
     UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
         if (nextProps.app.url !== this.props.app.url) {
             this._getNewState(nextProps);
-            // Fetch IM token for new URL if we're showing and have permission to load
             if (this.props.show && this.state.hasPermissionToLoad) {
-                this.setScalarToken();
+                this._resetWidget(nextProps);
             }
         }
 
@@ -288,9 +180,9 @@ export default class AppTile extends React.Component {
                     loading: true,
                 });
             }
-            // Fetch IM token now that we're showing if we already have permission to load
+            // Start the widget now that we're showing if we already have permission to load
             if (this.state.hasPermissionToLoad) {
-                this.setScalarToken();
+                this._startWidget();
             }
         }
 
@@ -320,7 +212,14 @@ export default class AppTile extends React.Component {
     }
 
     _onSnapshotClick() {
-        WidgetUtils.snapshotWidget(this.props.app);
+        this._sgWidget.widgetApi.takeScreenshot().then(data => {
+            dis.dispatch({
+                action: 'picture_snapshot',
+                file: data.screenshot,
+            });
+        }).catch(err => {
+            console.error("Failed to take screenshot: ", err);
+        });
     }
 
     /**
@@ -328,35 +227,28 @@ export default class AppTile extends React.Component {
      * @private
      * @returns {Promise<*>} Resolves when the widget is terminated, or timeout passed.
      */
-    _endWidgetActions() {
-        let terminationPromise;
-
-        if (this._hasCapability(Capability.ReceiveTerminate)) {
-            // Wait for widget to terminate within a timeout
-            const timeout = 2000;
-            const messaging = ActiveWidgetStore.getWidgetMessaging(this.props.app.id);
-            terminationPromise = Promise.race([messaging.terminate(), sleep(timeout)]);
-        } else {
-            terminationPromise = Promise.resolve();
+    async _endWidgetActions() { // widget migration dev note: async to maintain signature
+        // HACK: This is a really dirty way to ensure that Jitsi cleans up
+        // its hold on the webcam. Without this, the widget holds a media
+        // stream open, even after death. See https://github.com/vector-im/element-web/issues/7351
+        if (this.iframe) {
+            // In practice we could just do `+= ''` to trick the browser
+            // into thinking the URL changed, however I can foresee this
+            // being optimized out by a browser. Instead, we'll just point
+            // the iframe at a page that is reasonably safe to use in the
+            // event the iframe doesn't wink away.
+            // This is relative to where the Element instance is located.
+            this.iframe.src = 'about:blank';
         }
 
-        return terminationPromise.finally(() => {
-            // HACK: This is a really dirty way to ensure that Jitsi cleans up
-            // its hold on the webcam. Without this, the widget holds a media
-            // stream open, even after death. See https://github.com/vector-im/element-web/issues/7351
-            if (this._appFrame.current) {
-                // In practice we could just do `+= ''` to trick the browser
-                // into thinking the URL changed, however I can foresee this
-                // being optimized out by a browser. Instead, we'll just point
-                // the iframe at a page that is reasonably safe to use in the
-                // event the iframe doesn't wink away.
-                // This is relative to where the Element instance is located.
-                this._appFrame.current.src = 'about:blank';
-            }
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
+            dis.dispatch({action: 'hangup_conference'});
+        }
 
-            // Delete the widget from the persisted store for good measure.
-            PersistedElement.destroyElement(this._persistKey);
-        });
+        // Delete the widget from the persisted store for good measure.
+        PersistedElement.destroyElement(this._persistKey);
+
+        this._sgWidget.stop({forceDestroy: true});
     }
 
     /* If user has permission to modify widgets, delete the widget,
@@ -410,75 +302,21 @@ export default class AppTile extends React.Component {
         this._revokeWidgetPermission();
     }
 
-    /**
-     * Called when widget iframe has finished loading
-     */
-    _onLoaded() {
-        // Destroy the old widget messaging before starting it back up again. Some widgets
-        // have startup routines that run when they are loaded, so we just need to reinitialize
-        // the messaging for them.
-        ActiveWidgetStore.delWidgetMessaging(this.props.app.id);
-        this._setupWidgetMessaging();
-
-        if (this.props.room) {
-            ActiveWidgetStore.setRoomId(this.props.app.id, this.props.room.roomId);
-        }
+    _onWidgetPrepared = () => {
         this.setState({loading: false});
-    }
+    };
 
-    _setupWidgetMessaging() {
-        // FIXME: There's probably no reason to do this here: it should probably be done entirely
-        // in ActiveWidgetStore.
-        const widgetMessaging = new WidgetMessaging(
-            this.props.app.id,
-            this.props.app.url,
-            this._getRenderedUrl(),
-            this.props.userWidget,
-            this._appFrame.current.contentWindow,
-        );
-        ActiveWidgetStore.setWidgetMessaging(this.props.app.id, widgetMessaging);
-        widgetMessaging.getCapabilities().then((requestedCapabilities) => {
-            console.log(`Widget ${this.props.app.id} requested capabilities: ` + requestedCapabilities);
-            requestedCapabilities = requestedCapabilities || [];
-
-            // Allow whitelisted capabilities
-            let requestedWhitelistCapabilies = [];
-
-            if (this.props.whitelistCapabilities && this.props.whitelistCapabilities.length > 0) {
-                requestedWhitelistCapabilies = requestedCapabilities.filter(function(e) {
-                    return this.indexOf(e)>=0;
-                }, this.props.whitelistCapabilities);
-
-                if (requestedWhitelistCapabilies.length > 0 ) {
-                    console.log(`Widget ${this.props.app.id} allowing requested, whitelisted properties: ` +
-                        requestedWhitelistCapabilies,
-                    );
-                }
-            }
-
-            // TODO -- Add UI to warn about and optionally allow requested capabilities
-
-            ActiveWidgetStore.setWidgetCapabilities(this.props.app.id, requestedWhitelistCapabilies);
-
-            if (this.props.onCapabilityRequest) {
-                this.props.onCapabilityRequest(requestedCapabilities);
-            }
-
-            // We only tell Jitsi widgets that we're ready because they're realistically the only ones
-            // using this custom extension to the widget API.
-            if (WidgetType.JITSI.matches(this.props.app.type)) {
-                widgetMessaging.flagReadyToContinue();
-            }
-        }).catch((err) => {
-            console.log(`Failed to get capabilities for widget type ${this.props.app.type}`, this.props.app.id, err);
-        });
-    }
+    _onWidgetReady = () => {
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
+            this._sgWidget.widgetApi.transport.send(ElementWidgetActions.ClientReady, {});
+        }
+    };
 
     _onAction(payload) {
         if (payload.widgetId === this.props.app.id) {
             switch (payload.action) {
                 case 'm.sticker':
-                    if (this._hasCapability('m.sticker')) {
+                    if (this._sgWidget.widgetApi.hasCapability(MatrixCapabilities.StickerSending)) {
                         dis.dispatch({action: 'post_sticker_message', data: payload.data});
                     } else {
                         console.warn('Ignoring sticker message. Invalid capability');
@@ -496,20 +334,6 @@ export default class AppTile extends React.Component {
         }
     }
 
-    /**
-     * Set remote content title on AppTile
-     * @param {string} url Url to check for title
-     */
-    _fetchWidgetTitle(url) {
-        this._scalarClient.getScalarPageTitle(url).then((widgetPageTitle) => {
-            if (widgetPageTitle) {
-                this.setState({widgetPageTitle: widgetPageTitle});
-            }
-        }, (err) =>{
-            console.error("Failed to get page title", err);
-        });
-    }
-
     _grantWidgetPermission() {
         const roomId = this.props.room.roomId;
         console.info("Granting permission for widget to load: " + this.props.app.eventId);
@@ -519,7 +343,7 @@ export default class AppTile extends React.Component {
             this.setState({hasPermissionToLoad: true});
 
             // Fetch a token for the integration manager, now that we're allowed to
-            this.setScalarToken();
+            this._startWidget();
         }).catch(err => {
             console.error(err);
             // We don't really need to do anything about this - the user will just hit the button again.
@@ -538,6 +362,7 @@ export default class AppTile extends React.Component {
             ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
             const PersistedElement = sdk.getComponent("elements.PersistedElement");
             PersistedElement.destroyElement(this._persistKey);
+            this._sgWidget.stop();
         }).catch(err => {
             console.error(err);
             // We don't really need to do anything about this - the user will just hit the button again.
@@ -567,6 +392,9 @@ export default class AppTile extends React.Component {
             if (this.props.show) {
                 // if we were being shown, end the widget as we're about to be minimized.
                 this._endWidgetActions();
+            } else {
+                // restart the widget actions
+                this._resetWidget(this.props);
             }
             dis.dispatch({
                 action: 'appsDrawer',
@@ -575,40 +403,6 @@ export default class AppTile extends React.Component {
         }
     }
 
-    /**
-     * Replace the widget template variables in a url with their values
-     *
-     * @param {string} u The URL with template variables
-     * @param {string} widgetType The widget's type
-     *
-     * @returns {string} url with temlate variables replaced
-     */
-    _templatedUrl(u, widgetType: string) {
-        const targetData = {};
-        if (WidgetType.JITSI.matches(widgetType)) {
-            targetData['domain'] = 'jitsi.riot.im'; // v1 jitsi widgets have this hardcoded
-        }
-        const myUserId = MatrixClientPeg.get().credentials.userId;
-        const myUser = MatrixClientPeg.get().getUser(myUserId);
-        const vars = Object.assign(targetData, this.props.app.data, {
-            'matrix_user_id': myUserId,
-            'matrix_room_id': this.props.room ? this.props.room.roomId : null,
-            'matrix_display_name': myUser ? myUser.displayName : myUserId,
-            'matrix_avatar_url': myUser ? MatrixClientPeg.get().mxcUrlToHttp(myUser.avatarUrl) : '',
-
-            // TODO: Namespace themes through some standard
-            'theme': SettingsStore.getValue("theme"),
-        });
-
-        if (vars.conferenceId === undefined) {
-            // we'll need to parse the conference ID out of the URL for v1 Jitsi widgets
-            const parsedUrl = new URL(this.props.app.url);
-            vars.conferenceId = parsedUrl.searchParams.get("confId");
-        }
-
-        return uriFromTemplate(u, vars);
-    }
-
     /**
      * Whether we're using a local version of the widget rather than loading the
      * actual widget URL
@@ -618,67 +412,11 @@ export default class AppTile extends React.Component {
         return WidgetType.JITSI.matches(this.props.app.type);
     }
 
-    /**
-     * Get the URL used in the iframe
-     * In cases where we supply our own UI for a widget, this is an internal
-     * URL different to the one used if the widget is popped out to a separate
-     * tab / browser
-     *
-     * @returns {string} url
-     */
-    _getRenderedUrl() {
-        let url;
-
-        if (WidgetType.JITSI.matches(this.props.app.type)) {
-            console.log("Replacing Jitsi widget URL with local wrapper");
-            url = WidgetUtils.getLocalJitsiWrapperUrl({
-                forLocalRender: true,
-                auth: this.props.app.data ? this.props.app.data.auth : null,
-            });
-            url = this._addWurlParams(url);
-        } else {
-            url = this._getSafeUrl(this.state.widgetUrl);
-        }
-        return this._templatedUrl(url, this.props.app.type);
-    }
-
-    _getPopoutUrl() {
-        if (WidgetType.JITSI.matches(this.props.app.type)) {
-            return this._templatedUrl(
-                WidgetUtils.getLocalJitsiWrapperUrl({
-                    forLocalRender: false,
-                    auth: this.props.app.data ? this.props.app.data.auth : null,
-                }),
-                this.props.app.type,
-            );
-        } else {
-            // use app.url, not state.widgetUrl, because we want the one without
-            // the wURL params for the popped-out version.
-            return this._templatedUrl(this._getSafeUrl(this.props.app.url), this.props.app.type);
-        }
-    }
-
-    _getSafeUrl(u) {
-        const parsedWidgetUrl = url.parse(u, true);
-        if (ENABLE_REACT_PERF) {
-            parsedWidgetUrl.search = null;
-            parsedWidgetUrl.query.react_perf = true;
-        }
-        let safeWidgetUrl = '';
-        if (ALLOWED_APP_URL_SCHEMES.includes(parsedWidgetUrl.protocol)) {
-            safeWidgetUrl = url.format(parsedWidgetUrl);
-        }
-
-        // Replace all the dollar signs back to dollar signs as they don't affect HTTP at all.
-        // We also need the dollar signs in-tact for variable substitution.
-        return safeWidgetUrl.replace(/%24/g, '$');
-    }
-
     _getTileTitle() {
         const name = this.formatAppTileName();
         const titleSpacer = <span>&nbsp;-&nbsp;</span>;
         let title = '';
-        if (this.state.widgetPageTitle && this.state.widgetPageTitle != this.formatAppTileName()) {
+        if (this.state.widgetPageTitle && this.state.widgetPageTitle !== this.formatAppTileName()) {
             title = this.state.widgetPageTitle;
         }
 
@@ -701,9 +439,9 @@ export default class AppTile extends React.Component {
         // twice from the same computer, which Jitsi can have problems with (audio echo/gain-loop).
         if (WidgetType.JITSI.matches(this.props.app.type) && this.props.show) {
             this._endWidgetActions().then(() => {
-                if (this._appFrame.current) {
+                if (this.iframe) {
                     // Reload iframe
-                    this._appFrame.current.src = this._getRenderedUrl();
+                    this.iframe.src = this._sgWidget.embedUrl;
                     this.setState({});
                 }
             });
@@ -711,13 +449,13 @@ export default class AppTile extends React.Component {
         // Using Object.assign workaround as the following opens in a new window instead of a new tab.
         // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),
-            { target: '_blank', href: this._getPopoutUrl(), rel: 'noreferrer noopener'}).click();
+            { target: '_blank', href: this._sgWidget.popoutUrl, rel: 'noreferrer noopener'}).click();
     }
 
     _onReloadWidgetClick() {
         // Reload iframe in this way to avoid cross-origin restrictions
         // eslint-disable-next-line no-self-assign
-        this._appFrame.current.src = this._appFrame.current.src;
+        this.iframe.src = this.iframe.src;
     }
 
     _onContextMenuClick = () => {
@@ -764,7 +502,7 @@ export default class AppTile extends React.Component {
                         <AppPermission
                             roomId={this.props.room.roomId}
                             creatorUserId={this.props.creatorUserId}
-                            url={this.state.widgetUrl}
+                            url={this._sgWidget.embedUrl}
                             isRoomEncrypted={isEncrypted}
                             onPermissionGranted={this._grantWidgetPermission}
                         />
@@ -789,11 +527,11 @@ export default class AppTile extends React.Component {
                             { this.state.loading && loadingElement }
                             <iframe
                                 allow={iframeFeatures}
-                                ref={this._appFrame}
-                                src={this._getRenderedUrl()}
+                                ref={this._iframeRefChange}
+                                src={this._sgWidget.embedUrl}
                                 allowFullScreen={true}
                                 sandbox={sandboxFlags}
-                                onLoad={this._onLoaded} />
+                            />
                         </div>
                     );
                     // if the widget would be allowed to remain on screen, we must put it in
@@ -837,9 +575,10 @@ export default class AppTile extends React.Component {
             const elementRect = this._contextMenuButton.current.getBoundingClientRect();
 
             const canUserModify = this._canUserModify();
-            const showEditButton = Boolean(this._scalarClient && canUserModify);
+            const showEditButton = Boolean(this._sgWidget.isManagedByManager && canUserModify);
             const showDeleteButton = (this.props.showDelete === undefined || this.props.showDelete) && canUserModify;
-            const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
+            const showPictureSnapshotButton = this.props.show && this._sgWidget.widgetApi &&
+                this._sgWidget.widgetApi.hasCapability(MatrixCapabilities.Screenshots);
 
             const WidgetContextMenu = sdk.getComponent('views.context_menus.WidgetContextMenu');
             contextMenu = (
@@ -949,9 +688,6 @@ AppTile.propTypes = {
     // NOTE -- Use with caution. This is intended to aid better integration / UX
     // basic widget capabilities, e.g. injecting sticker message events.
     whitelistCapabilities: PropTypes.array,
-    // Optional function to be called on widget capability request
-    // Called with an array of the requested capabilities
-    onCapabilityRequest: PropTypes.func,
     // Is this an instance of a user widget
     userWidget: PropTypes.bool,
 };

src/components/views/elements/DesktopBuildsNotice.tsx

@@ -0,0 +1,77 @@
+/*
+Copyright 2020 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 EventIndexPeg from "../../../indexing/EventIndexPeg";
+import { _t } from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
+import React from "react";
+
+export enum WarningKind {
+    Files,
+    Search,
+}
+
+interface IProps {
+    isRoomEncrypted: boolean;
+    kind: WarningKind;
+}
+
+export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) {
+    if (!isRoomEncrypted) return null;
+    if (EventIndexPeg.get()) return null;
+
+    const {desktopBuilds, brand} = SdkConfig.get();
+
+    let text = null;
+    let logo = null;
+    if (desktopBuilds.available) {
+        logo = <img src={desktopBuilds.logo} />;
+        switch (kind) {
+            case WarningKind.Files:
+                text = _t("Use the <a>Desktop app</a> to see all encrypted files", {}, {
+                    a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{sub}</a>),
+                });
+                break;
+            case WarningKind.Search:
+                text = _t("Use the <a>Desktop app</a> to search encrypted messages", {}, {
+                    a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{sub}</a>),
+                });
+                break;
+        }
+    } else {
+        switch (kind) {
+            case WarningKind.Files:
+                text = _t("This version of %(brand)s does not support viewing some encrypted files", {brand});
+                break;
+            case WarningKind.Search:
+                text = _t("This version of %(brand)s does not support searching encrypted messages", {brand});
+                break;
+        }
+    }
+
+    // for safety
+    if (!text) {
+        console.warn("Unknown desktop builds warning kind: ", kind);
+        return null;
+    }
+
+    return (
+        <div className="mx_DesktopBuildsNotice">
+            {logo}
+            <span>{text}</span>
+        </div>
+    );
+}

src/components/views/elements/EventListSummary.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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,15 +14,41 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useEffect} from 'react';
-import PropTypes from 'prop-types';
+import React, {ReactChildren, useEffect} from 'react';
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+
 import MemberAvatar from '../avatars/MemberAvatar';
 import { _t } from '../../../languageHandler';
-import {MatrixEvent, RoomMember} from "matrix-js-sdk";
 import {useStateToggle} from "../../../hooks/useStateToggle";
 import AccessibleButton from "./AccessibleButton";
 
-const EventListSummary = ({events, children, threshold=3, onToggle, startExpanded, summaryMembers=[], summaryText}) => {
+interface IProps {
+    // An array of member events to summarise
+    events: MatrixEvent[];
+    // The minimum number of events needed to trigger summarisation
+    threshold?: number;
+    // Whether or not to begin with state.expanded=true
+    startExpanded?: boolean,
+    // The list of room members for which to show avatars next to the summary
+    summaryMembers?: RoomMember[],
+    // The text to show as the summary of this event list
+    summaryText?: string,
+    // An array of EventTiles to render when expanded
+    children: ReactChildren,
+    // Called when the event list expansion is toggled
+    onToggle?(): void;
+}
+
+const EventListSummary: React.FC<IProps> = ({
+    events,
+    children,
+    threshold = 3,
+    onToggle,
+    startExpanded,
+    summaryMembers = [],
+    summaryText,
+}) => {
     const [expanded, toggleExpanded] = useStateToggle(startExpanded);
 
     // Whenever expanded changes call onToggle
@@ -75,22 +101,4 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
     );
 };
 
-EventListSummary.propTypes = {
-    // An array of member events to summarise
-    events: PropTypes.arrayOf(PropTypes.instanceOf(MatrixEvent)).isRequired,
-    // An array of EventTiles to render when expanded
-    children: PropTypes.arrayOf(PropTypes.element).isRequired,
-    // The minimum number of events needed to trigger summarisation
-    threshold: PropTypes.number,
-    // Called when the event list expansion is toggled
-    onToggle: PropTypes.func,
-    // Whether or not to begin with state.expanded=true
-    startExpanded: PropTypes.bool,
-
-    // The list of room members for which to show avatars next to the summary
-    summaryMembers: PropTypes.arrayOf(PropTypes.instanceOf(RoomMember)),
-    // The text to show as the summary of this event list
-    summaryText: PropTypes.string,
-};
-
 export default EventListSummary;

src/components/views/elements/EventTilePreview.tsx

@@ -80,27 +80,30 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
 
     private fakeEvent({userId, displayname, avatar_url: avatarUrl}: IState) {
         // Fake it till we make it
-        const event = new MatrixEvent(JSON.parse(`{
-                "type": "m.room.message",
-                "sender": "${userId}",
-                "content": {
-                  "m.new_content": {
-                    "msgtype": "m.text",
-                    "body": "${this.props.message}",
-                    "displayname": "${displayname}",
-                    "avatar_url": "${avatarUrl}"
-                  },
-                  "msgtype": "m.text",
-                  "body": "${this.props.message}",
-                  "displayname": "${displayname}",
-                  "avatar_url": "${avatarUrl}"
+        /* eslint-disable quote-props */
+        const rawEvent = {
+            type: "m.room.message",
+            sender: userId,
+            content: {
+                "m.new_content": {
+                    msgtype: "m.text",
+                    body: this.props.message,
+                    displayname: displayname,
+                    avatar_url: avatarUrl,
                 },
-                "unsigned": {
-                  "age": 97
-                },
-                "event_id": "$9999999999999999999999999999999999999999999",
-                "room_id": "!999999999999999999:matrix.org"
-              }`));
+                msgtype: "m.text",
+                body: this.props.message,
+                displayname: displayname,
+                avatar_url: avatarUrl,
+            },
+            unsigned: {
+                age: 97,
+            },
+            event_id: "$9999999999999999999999999999999999999999999",
+            room_id: "!999999999999999999:example.org",
+        };
+        const event = new MatrixEvent(rawEvent);
+        /* eslint-enable quote-props */
 
         // Fake it more
         event.sender = {

src/components/views/elements/MemberEventListSummary.tsx

@@ -16,32 +16,60 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactChildren } from 'react';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
-import * as sdk from "../../../index";
-import {MatrixEvent} from "matrix-js-sdk";
-import {isValid3pidInvite} from "../../../RoomInvite";
+import { isValid3pidInvite } from "../../../RoomInvite";
+import EventListSummary from "./EventListSummary";
 
-export default class MemberEventListSummary extends React.Component {
-    static propTypes = {
-        // An array of member events to summarise
-        events: PropTypes.arrayOf(PropTypes.instanceOf(MatrixEvent)).isRequired,
-        // An array of EventTiles to render when expanded
-        children: PropTypes.array.isRequired,
-        // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
-        summaryLength: PropTypes.number,
-        // The maximum number of avatars to display in the summary
-        avatarsMaxLength: PropTypes.number,
-        // The minimum number of events needed to trigger summarisation
-        threshold: PropTypes.number,
-        // Called when the MELS expansion is toggled
-        onToggle: PropTypes.func,
-        // Whether or not to begin with state.expanded=true
-        startExpanded: PropTypes.bool,
-    };
+interface IProps {
+    // An array of member events to summarise
+    events: MatrixEvent[];
+    // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
+    summaryLength?: number;
+    // The maximum number of avatars to display in the summary
+    avatarsMaxLength?: number;
+    // The minimum number of events needed to trigger summarisation
+    threshold?: number,
+    // Whether or not to begin with state.expanded=true
+    startExpanded?: boolean,
+    // An array of EventTiles to render when expanded
+    children: ReactChildren;
+    // Called when the MELS expansion is toggled
+    onToggle?(): void,
+}
 
+interface IUserEvents {
+    // The original event
+    mxEvent: MatrixEvent;
+    // The display name of the user (if not, then user ID)
+    displayName: string;
+    // The original index of the event in this.props.events
+    index: number;
+}
+
+enum TransitionType {
+    Joined = "joined",
+    Left = "left",
+    JoinedAndLeft = "joined_and_left",
+    LeftAndJoined = "left_and_joined",
+    InviteReject = "invite_reject",
+    InviteWithdrawal = "invite_withdrawal",
+    Invited = "invited",
+    Banned = "banned",
+    Unbanned = "unbanned",
+    Kicked = "kicked",
+    ChangedName = "changed_name",
+    ChangedAvatar = "changed_avatar",
+    NoChange = "no_change",
+}
+
+const SEP = ",";
+
+export default class MemberEventListSummary extends React.Component<IProps> {
     static defaultProps = {
         summaryLength: 1,
         threshold: 3,
@@ -62,30 +90,28 @@ export default class MemberEventListSummary extends React.Component {
     /**
      * Generate the text for users aggregated by their transition sequences (`eventAggregates`) where
      * the sequences are ordered by `orderedTransitionSequences`.
-     * @param {object[]} eventAggregates a map of transition sequence to array of user display names
+     * @param {object} eventAggregates a map of transition sequence to array of user display names
      * or user IDs.
      * @param {string[]} orderedTransitionSequences an array which is some ordering of
      * `Object.keys(eventAggregates)`.
      * @returns {string} the textual summary of the aggregated events that occurred.
      */
-    _generateSummary(eventAggregates, orderedTransitionSequences) {
+    private generateSummary(eventAggregates: Record<string, string[]>, orderedTransitionSequences: string[]) {
         const summaries = orderedTransitionSequences.map((transitions) => {
             const userNames = eventAggregates[transitions];
-            const nameList = this._renderNameList(userNames);
+            const nameList = this.renderNameList(userNames);
 
-            const splitTransitions = transitions.split(',');
+            const splitTransitions = transitions.split(SEP) as TransitionType[];
 
             // Some neighbouring transitions are common, so canonicalise some into "pair"
             // transitions
-            const canonicalTransitions = this._getCanonicalTransitions(splitTransitions);
+            const canonicalTransitions = MemberEventListSummary.getCanonicalTransitions(splitTransitions);
             // Transform into consecutive repetitions of the same transition (like 5
             // consecutive 'joined_and_left's)
-            const coalescedTransitions = this._coalesceRepeatedTransitions(
-                canonicalTransitions,
-            );
+            const coalescedTransitions = MemberEventListSummary.coalesceRepeatedTransitions(canonicalTransitions);
 
             const descs = coalescedTransitions.map((t) => {
-                return this._getDescriptionForTransition(
+                return MemberEventListSummary.getDescriptionForTransition(
                     t.transitionType, userNames.length, t.repeats,
                 );
             });
@@ -108,7 +134,7 @@ export default class MemberEventListSummary extends React.Component {
      * more items in `users` than `this.props.summaryLength`, which is the number of names
      * included before "and [n] others".
      */
-    _renderNameList(users) {
+    private renderNameList(users: string[]) {
         return formatCommaSeparatedList(users, this.props.summaryLength);
     }
 
@@ -119,22 +145,22 @@ export default class MemberEventListSummary extends React.Component {
      * @param {string[]} transitions an array of transitions.
      * @returns {string[]} an array of transitions.
      */
-    _getCanonicalTransitions(transitions) {
+    private static getCanonicalTransitions(transitions: TransitionType[]): TransitionType[] {
         const modMap = {
-            'joined': {
-                'after': 'left',
-                'newTransition': 'joined_and_left',
+            [TransitionType.Joined]: {
+                after: TransitionType.Left,
+                newTransition: TransitionType.JoinedAndLeft,
             },
-            'left': {
-                'after': 'joined',
-                'newTransition': 'left_and_joined',
+            [TransitionType.Left]: {
+                after: TransitionType.Joined,
+                newTransition: TransitionType.LeftAndJoined,
             },
             // $currentTransition : {
             //     'after' : $nextTransition,
             //     'newTransition' : 'new_transition_type',
             // },
         };
-        const res = [];
+        const res: TransitionType[] = [];
 
         for (let i = 0; i < transitions.length; i++) {
             const t = transitions[i];
@@ -166,8 +192,12 @@ export default class MemberEventListSummary extends React.Component {
      * @param {string[]} transitions the array of transitions to transform.
      * @returns {object[]} an array of coalesced transitions.
      */
-    _coalesceRepeatedTransitions(transitions) {
-        const res = [];
+    private static coalesceRepeatedTransitions(transitions: TransitionType[]) {
+        const res: {
+            transitionType: TransitionType;
+            repeats: number;
+        }[] = [];
+
         for (let i = 0; i < transitions.length; i++) {
             if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) {
                 res[res.length - 1].repeats += 1;
@@ -189,7 +219,7 @@ export default class MemberEventListSummary extends React.Component {
      * @param {number} repeats the number of times the transition was repeated in a row.
      * @returns {string} the written Human Readable equivalent of the transition.
      */
-    _getDescriptionForTransition(t, userCount, repeats) {
+    private static getDescriptionForTransition(t: TransitionType, userCount: number, repeats: number) {
         // The empty interpolations 'severalUsers' and 'oneUser'
         // are there only to show translators to non-English languages
         // that the verb is conjugated to plural or singular Subject.
@@ -217,12 +247,18 @@ export default class MemberEventListSummary extends React.Component {
                 break;
             case "invite_reject":
                 res = (userCount > 1)
-                    ? _t("%(severalUsers)srejected their invitations %(count)s times", { severalUsers: "", count: repeats })
+                    ? _t("%(severalUsers)srejected their invitations %(count)s times", {
+                        severalUsers: "",
+                        count: repeats,
+                    })
                     : _t("%(oneUser)srejected their invitation %(count)s times", { oneUser: "", count: repeats });
                 break;
             case "invite_withdrawal":
                 res = (userCount > 1)
-                    ? _t("%(severalUsers)shad their invitations withdrawn %(count)s times", { severalUsers: "", count: repeats })
+                    ? _t("%(severalUsers)shad their invitations withdrawn %(count)s times", {
+                        severalUsers: "",
+                        count: repeats,
+                    })
                     : _t("%(oneUser)shad their invitation withdrawn %(count)s times", { oneUser: "", count: repeats });
                 break;
             case "invited":
@@ -265,8 +301,8 @@ export default class MemberEventListSummary extends React.Component {
         return res;
     }
 
-    _getTransitionSequence(events) {
-        return events.map(this._getTransition);
+    private static getTransitionSequence(events: MatrixEvent[]) {
+        return events.map(MemberEventListSummary.getTransition);
     }
 
     /**
@@ -277,60 +313,60 @@ export default class MemberEventListSummary extends React.Component {
      * @returns {string?} the transition type given to this event. This defaults to `null`
      * if a transition is not recognised.
      */
-    _getTransition(e) {
+    private static getTransition(e: MatrixEvent): TransitionType {
         if (e.mxEvent.getType() === 'm.room.third_party_invite') {
             // Handle 3pid invites the same as invites so they get bundled together
             if (!isValid3pidInvite(e.mxEvent)) {
-                return 'invite_withdrawal';
+                return TransitionType.InviteWithdrawal;
             }
-            return 'invited';
+            return TransitionType.Invited;
         }
 
         switch (e.mxEvent.getContent().membership) {
-            case 'invite': return 'invited';
-            case 'ban': return 'banned';
+            case 'invite': return TransitionType.Invited;
+            case 'ban': return TransitionType.Banned;
             case 'join':
                 if (e.mxEvent.getPrevContent().membership === 'join') {
                     if (e.mxEvent.getContent().displayname !==
                         e.mxEvent.getPrevContent().displayname) {
-                        return 'changed_name';
+                        return TransitionType.ChangedName;
                     } else if (e.mxEvent.getContent().avatar_url !==
                         e.mxEvent.getPrevContent().avatar_url) {
-                        return 'changed_avatar';
+                        return TransitionType.ChangedAvatar;
                     }
                     // console.log("MELS ignoring duplicate membership join event");
-                    return 'no_change';
+                    return TransitionType.NoChange;
                 } else {
-                    return 'joined';
+                    return TransitionType.Joined;
                 }
             case 'leave':
                 if (e.mxEvent.getSender() === e.mxEvent.getStateKey()) {
                     switch (e.mxEvent.getPrevContent().membership) {
-                        case 'invite': return 'invite_reject';
-                        default: return 'left';
+                        case 'invite': return TransitionType.InviteReject;
+                        default: return TransitionType.Left;
                     }
                 }
                 switch (e.mxEvent.getPrevContent().membership) {
-                    case 'invite': return 'invite_withdrawal';
-                    case 'ban': return 'unbanned';
+                    case 'invite': return TransitionType.InviteWithdrawal;
+                    case 'ban': return TransitionType.Unbanned;
                     // sender is not target and made the target leave, if not from invite/ban then this is a kick
-                    default: return 'kicked';
+                    default: return TransitionType.Kicked;
                 }
             default: return null;
         }
     }
 
-    _getAggregate(userEvents) {
+    getAggregate(userEvents: Record<string, IUserEvents[]>) {
         // A map of aggregate type to arrays of display names. Each aggregate type
         // is a comma-delimited string of transitions, e.g. "joined,left,kicked".
         // The array of display names is the array of users who went through that
         // sequence during eventsToRender.
-        const aggregate = {
+        const aggregate: Record<string, string[]> = {
             // $aggregateType : []:string
         };
         // A map of aggregate types to the indices that order them (the index of
         // the first event for a given transition sequence)
-        const aggregateIndices = {
+        const aggregateIndices: Record<string, number> = {
             // $aggregateType : int
         };
 
@@ -340,7 +376,7 @@ export default class MemberEventListSummary extends React.Component {
                 const firstEvent = userEvents[userId][0];
                 const displayName = firstEvent.displayName;
 
-                const seq = this._getTransitionSequence(userEvents[userId]);
+                const seq = MemberEventListSummary.getTransitionSequence(userEvents[userId]).join(SEP);
                 if (!aggregate[seq]) {
                     aggregate[seq] = [];
                     aggregateIndices[seq] = -1;
@@ -349,8 +385,9 @@ export default class MemberEventListSummary extends React.Component {
                 aggregate[seq].push(displayName);
 
                 if (aggregateIndices[seq] === -1 ||
-                    firstEvent.index < aggregateIndices[seq]) {
-                        aggregateIndices[seq] = firstEvent.index;
+                    firstEvent.index < aggregateIndices[seq]
+                ) {
+                    aggregateIndices[seq] = firstEvent.index;
                 }
             },
         );
@@ -364,25 +401,21 @@ export default class MemberEventListSummary extends React.Component {
     render() {
         const eventsToRender = this.props.events;
 
-        // Map user IDs to an array of objects:
-        const userEvents = {
-            // $userId : [{
-            //     // The original event
-            //     mxEvent: e,
-            //     // The display name of the user (if not, then user ID)
-            //     displayName: e.target.name || userId,
-            //     // The original index of the event in this.props.events
-            //     index: index,
-            // }]
-        };
+        // Map user IDs to latest Avatar Member. ES6 Maps are ordered by when the key was created,
+        // so this works perfectly for us to match event order whilst storing the latest Avatar Member
+        const latestUserAvatarMember = new Map<string, RoomMember>();
 
-        const avatarMembers = [];
+        // Object mapping user IDs to an array of IUserEvents
+        const userEvents: Record<string, IUserEvents[]> = {};
         eventsToRender.forEach((e, index) => {
             const userId = e.getStateKey();
             // Initialise a user's events
             if (!userEvents[userId]) {
                 userEvents[userId] = [];
-                if (e.target) avatarMembers.push(e.target);
+            }
+
+            if (e.target) {
+                latestUserAvatarMember.set(userId, e.target);
             }
 
             let displayName = userId;
@@ -399,21 +432,20 @@ export default class MemberEventListSummary extends React.Component {
             });
         });
 
-        const aggregate = this._getAggregate(userEvents);
+        const aggregate = this.getAggregate(userEvents);
 
         // Sort types by order of lowest event index within sequence
         const orderedTransitionSequences = Object.keys(aggregate.names).sort(
-            (seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2],
+            (seq1, seq2) => aggregate.indices[seq1] - aggregate.indices[seq2],
         );
 
-        const EventListSummary = sdk.getComponent("views.elements.EventListSummary");
         return <EventListSummary
             events={this.props.events}
             threshold={this.props.threshold}
             onToggle={this.props.onToggle}
             startExpanded={this.props.startExpanded}
             children={this.props.children}
-            summaryMembers={avatarMembers}
-            summaryText={this._generateSummary(aggregate.names, orderedTransitionSequences)} />;
+            summaryMembers={[...latestUserAvatarMember.values()]}
+            summaryText={this.generateSummary(aggregate.names, orderedTransitionSequences)} />;
     }
 }

src/components/views/elements/PersistentApp.js

@@ -58,6 +58,11 @@ export default class PersistentApp extends React.Component {
             const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
             if (this.state.roomId !== persistentWidgetInRoomId) {
                 const persistentWidgetInRoom = MatrixClientPeg.get().getRoom(persistentWidgetInRoomId);
+
+                // Sanity check the room - the widget may have been destroyed between render cycles, and
+                // thus no room is associated anymore.
+                if (!persistentWidgetInRoom) return null;
+
                 // get the widget data
                 const appEvent = WidgetUtils.getRoomWidgets(persistentWidgetInRoom).find((ev) => {
                     return ev.getStateKey() === ActiveWidgetStore.getPersistentWidgetId();
@@ -82,6 +87,7 @@ export default class PersistentApp extends React.Component {
                     showDelete={false}
                     showMinimise={false}
                     miniMode={true}
+                    showMenubar={false}
                 />;
             }
         }

src/components/views/elements/ReplyThread.js

@@ -29,6 +29,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {Action} from "../../../dispatcher/actions";
 import sanitizeHtml from "sanitize-html";
 import {UIFeature} from "../../../settings/UIFeature";
+import {PERMITTED_URL_SCHEMES} from "../../../HtmlUtils";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -62,6 +63,12 @@ export default class ReplyThread extends React.Component {
             err: false,
         };
 
+        this.unmounted = false;
+        this.context.on("Event.replaced", this.onEventReplaced);
+        this.room = this.context.getRoom(this.props.parentEv.getRoomId());
+        this.room.on("Room.redaction", this.onRoomRedaction);
+        this.room.on("Room.redactionCancelled", this.onRoomRedaction);
+
         this.onQuoteClick = this.onQuoteClick.bind(this);
         this.canCollapse = this.canCollapse.bind(this);
         this.collapse = this.collapse.bind(this);
@@ -106,6 +113,9 @@ export default class ReplyThread extends React.Component {
             {
                 allowedTags: false, // false means allow everything
                 allowedAttributes: false,
+                // we somehow can't allow all schemes, so we allow all that we
+                // know of and mxc (for img tags)
+                allowedSchemes: [...PERMITTED_URL_SCHEMES, 'mxc'],
                 exclusiveFilter: (frame) => frame.tag === "mx-reply",
             },
         );
@@ -213,11 +223,6 @@ export default class ReplyThread extends React.Component {
     }
 
     componentDidMount() {
-        this.unmounted = false;
-        this.room = this.context.getRoom(this.props.parentEv.getRoomId());
-        this.room.on("Room.redaction", this.onRoomRedaction);
-        // same event handler as Room.redaction as for both we just do forceUpdate
-        this.room.on("Room.redactionCancelled", this.onRoomRedaction);
         this.initialize();
     }
 
@@ -227,21 +232,36 @@ export default class ReplyThread extends React.Component {
 
     componentWillUnmount() {
         this.unmounted = true;
+        this.context.removeListener("Event.replaced", this.onEventReplaced);
         if (this.room) {
             this.room.removeListener("Room.redaction", this.onRoomRedaction);
             this.room.removeListener("Room.redactionCancelled", this.onRoomRedaction);
         }
     }
 
-    onRoomRedaction = (ev, room) => {
-        if (this.unmounted) return;
-
-        // If one of the events we are rendering gets redacted, force a re-render
-        if (this.state.events.some(event => event.getId() === ev.getId())) {
+    updateForEventId = (eventId) => {
+        if (this.state.events.some(event => event.getId() === eventId)) {
             this.forceUpdate();
         }
     };
 
+    onEventReplaced = (ev) => {
+        if (this.unmounted) return;
+
+        // If one of the events we are rendering gets replaced, force a re-render
+        this.updateForEventId(ev.getId());
+    };
+
+    onRoomRedaction = (ev) => {
+        if (this.unmounted) return;
+
+        const eventId = ev.getAssociatedId();
+        if (!eventId) return;
+
+        // If one of the events we are rendering gets redacted, force a re-render
+        this.updateForEventId(eventId);
+    };
+
     async initialize() {
         const {parentEv} = this.props;
         // at time of making this component we checked that props.parentEv has a parentEventId
@@ -368,6 +388,7 @@ export default class ReplyThread extends React.Component {
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
                     useIRCLayout={this.props.useIRCLayout}
                     enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                    replacingEventId={ev.replacingEventId()}
                 />
             </blockquote>;
         });

src/components/views/elements/TagTile.js

@@ -26,12 +26,12 @@ import * as FormattingUtils from '../../../utils/FormattingUtils';
 
 import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
-import TagOrderStore from '../../../stores/TagOrderStore';
+import GroupFilterOrderStore from '../../../stores/GroupFilterOrderStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AccessibleButton from "./AccessibleButton";
 import SettingsStore from "../../../settings/SettingsStore";
 
-// A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
+// A class for a child of GroupFilterPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
 //  - Rooms that are part of the group
 //  - Direct messages with members of the group
@@ -142,7 +142,7 @@ export default class TagTile extends React.Component {
             mx_TagTile_selected_prototype: this.props.selected && isPrototype,
         });
 
-        const badge = TagOrderStore.getGroupBadge(this.props.tag);
+        const badge = GroupFilterOrderStore.getGroupBadge(this.props.tag);
         let badgeElement;
         if (badge && !this.state.hover && !this.props.menuDisplayed) {
             const badgeClasses = classNames({

src/components/views/elements/UserTagTile.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import * as fbEmitter from "fbemitter";
-import TagOrderStore from "../../../stores/TagOrderStore";
+import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import classNames from "classnames";
 import { _t } from "../../../languageHandler";
@@ -36,12 +36,12 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
         super(props);
 
         this.state = {
-            selected: TagOrderStore.getSelectedTags().length === 0,
+            selected: GroupFilterOrderStore.getSelectedTags().length === 0,
         };
     }
 
     public componentDidMount() {
-        this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
+        this.tagStoreRef = GroupFilterOrderStore.addListener(this.onTagStoreUpdate);
     }
 
     public componentWillUnmount() {
@@ -49,7 +49,7 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
     }
 
     private onTagStoreUpdate = () => {
-        const selected = TagOrderStore.getSelectedTags().length === 0;
+        const selected = GroupFilterOrderStore.getSelectedTags().length === 0;
         this.setState({selected});
     };
 

src/components/views/elements/Validation.tsx

@@ -21,18 +21,19 @@ import classNames from "classnames";
 
 type Data = Pick<IFieldState, "value" | "allowEmpty">;
 
-interface IRule<T> {
+interface IRule<T, D = void> {
     key: string;
     final?: boolean;
-    skip?(this: T, data: Data): boolean;
-    test(this: T, data: Data): boolean | Promise<boolean>;
-    valid?(this: T): string;
-    invalid?(this: T): string;
+    skip?(this: T, data: Data, derivedData: D): boolean;
+    test(this: T, data: Data, derivedData: D): boolean | Promise<boolean>;
+    valid?(this: T, derivedData: D): string;
+    invalid?(this: T, derivedData: D): string;
 }
 
-interface IArgs<T> {
-    rules: IRule<T>[];
-    description(this: T): React.ReactChild;
+interface IArgs<T, D = void> {
+    rules: IRule<T, D>[];
+    description(this: T, derivedData: D): React.ReactChild;
+    deriveData?(data: Data): Promise<D>;
 }
 
 export interface IFieldState {
@@ -53,6 +54,10 @@ export interface IValidationResult {
  * @param {Function} description
  *     Function that returns a string summary of the kind of value that will
  *     meet the validation rules. Shown at the top of the validation feedback.
+ * @param {Function} deriveData
+ *     Optional function that returns a Promise to an object of generic type D.
+ *     The result of this Promise is passed to rule methods `skip`, `test`, `valid`, and `invalid`.
+ *     Useful for doing calculations per-value update once rather than in each of the above rule methods.
  * @param {Object} rules
  *     An array of rules describing how to check to input value. Each rule in an object
  *     and may have the following properties:
@@ -66,7 +71,7 @@ export interface IValidationResult {
  *     A validation function that takes in the current input value and returns
  *     the overall validity and a feedback UI that can be rendered for more detail.
  */
-export default function withValidation<T = undefined>({ description, rules }: IArgs<T>) {
+export default function withValidation<T = undefined, D = void>({ description, deriveData, rules }: IArgs<T, D>) {
     return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise<IValidationResult> {
         if (!value && allowEmpty) {
             return {
@@ -75,6 +80,9 @@ export default function withValidation<T = undefined>({ description, rules }: IA
             };
         }
 
+        const data = { value, allowEmpty };
+        const derivedData = deriveData ? await deriveData(data) : undefined;
+
         const results = [];
         let valid = true;
         if (rules && rules.length) {
@@ -87,20 +95,18 @@ export default function withValidation<T = undefined>({ description, rules }: IA
                     continue;
                 }
 
-                const data = { value, allowEmpty };
-
-                if (rule.skip && rule.skip.call(this, data)) {
+                if (rule.skip && rule.skip.call(this, data, derivedData)) {
                     continue;
                 }
 
                 // We're setting `this` to whichever component holds the validation
                 // function. That allows rules to access the state of the component.
-                const ruleValid = await rule.test.call(this, data);
+                const ruleValid = await rule.test.call(this, data, derivedData);
                 valid = valid && ruleValid;
                 if (ruleValid && rule.valid) {
                     // If the rule's result is valid and has text to show for
                     // the valid state, show it.
-                    const text = rule.valid.call(this);
+                    const text = rule.valid.call(this, derivedData);
                     if (!text) {
                         continue;
                     }
@@ -112,7 +118,7 @@ export default function withValidation<T = undefined>({ description, rules }: IA
                 } else if (!ruleValid && rule.invalid) {
                     // If the rule's result is invalid and has text to show for
                     // the invalid state, show it.
-                    const text = rule.invalid.call(this);
+                    const text = rule.invalid.call(this, derivedData);
                     if (!text) {
                         continue;
                     }
@@ -153,7 +159,7 @@ export default function withValidation<T = undefined>({ description, rules }: IA
         if (description) {
             // We're setting `this` to whichever component holds the validation
             // function. That allows rules to access the state of the component.
-            const content = description.call(this);
+            const content = description.call(this, derivedData);
             summary = <div className="mx_Validation_description">{content}</div>;
         }
 

src/components/views/emojipicker/Category.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 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,32 +15,53 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {RefObject} from 'react';
+
 import { CATEGORY_HEADER_HEIGHT, EMOJI_HEIGHT, EMOJIS_PER_ROW } from "./EmojiPicker";
-import * as sdk from '../../../index';
+import LazyRenderList from "../elements/LazyRenderList";
+import {DATA_BY_CATEGORY, IEmoji} from "../../../emoji";
+import Emoji from './Emoji';
 
 const OVERFLOW_ROWS = 3;
 
-class Category extends React.PureComponent {
-    static propTypes = {
-        emojis: PropTypes.arrayOf(PropTypes.object).isRequired,
-        name: PropTypes.string.isRequired,
-        id: PropTypes.string.isRequired,
-        onMouseEnter: PropTypes.func.isRequired,
-        onMouseLeave: PropTypes.func.isRequired,
-        onClick: PropTypes.func.isRequired,
-        selectedEmojis: PropTypes.instanceOf(Set),
-    };
+export type CategoryKey = (keyof typeof DATA_BY_CATEGORY) | "recent";
 
-    _renderEmojiRow = (rowIndex) => {
+export interface ICategory {
+    id: CategoryKey;
+    name: string;
+    enabled: boolean;
+    visible: boolean;
+    ref: RefObject<HTMLButtonElement>;
+}
+
+interface IProps {
+    id: string;
+    name: string;
+    emojis: IEmoji[];
+    selectedEmojis: Set<string>;
+    heightBefore: number;
+    viewportHeight: number;
+    scrollTop: number;
+    onClick(emoji: IEmoji): void;
+    onMouseEnter(emoji: IEmoji): void;
+    onMouseLeave(emoji: IEmoji): void;
+}
+
+class Category extends React.PureComponent<IProps> {
+    private renderEmojiRow = (rowIndex: number) => {
         const { onClick, onMouseEnter, onMouseLeave, selectedEmojis, emojis } = this.props;
         const emojisForRow = emojis.slice(rowIndex * 8, (rowIndex + 1) * 8);
-        const Emoji = sdk.getComponent("emojipicker.Emoji");
         return (<div key={rowIndex}>{
-            emojisForRow.map(emoji =>
-                <Emoji key={emoji.hexcode} emoji={emoji} selectedEmojis={selectedEmojis}
-                    onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />)
+            emojisForRow.map(emoji => ((
+                <Emoji
+                    key={emoji.hexcode}
+                    emoji={emoji}
+                    selectedEmojis={selectedEmojis}
+                    onClick={onClick}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                />
+            )))
         }</div>);
     };
 
@@ -52,7 +74,6 @@ class Category extends React.PureComponent {
         for (let counter = 0; counter < rows.length; ++counter) {
             rows[counter] = counter;
         }
-        const LazyRenderList = sdk.getComponent('elements.LazyRenderList');
 
         const viewportTop = scrollTop;
         const viewportBottom = viewportTop + viewportHeight;
@@ -84,7 +105,7 @@ class Category extends React.PureComponent {
                     height={localHeight}
                     overflowItems={OVERFLOW_ROWS}
                     overflowMargin={0}
-                    renderItem={this._renderEmojiRow}>
+                    renderItem={this.renderEmojiRow}>
                 </LazyRenderList>
             </section>
         );

src/components/views/emojipicker/Emoji.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,18 +16,19 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import {MenuItem} from "../../structures/ContextMenu";
+import {IEmoji} from "../../../emoji";
 
-class Emoji extends React.PureComponent {
-    static propTypes = {
-        onClick: PropTypes.func,
-        onMouseEnter: PropTypes.func,
-        onMouseLeave: PropTypes.func,
-        emoji: PropTypes.object.isRequired,
-        selectedEmojis: PropTypes.instanceOf(Set),
-    };
+interface IProps {
+    emoji: IEmoji;
+    selectedEmojis?: Set<string>;
+    onClick(emoji: IEmoji): void;
+    onMouseEnter(emoji: IEmoji): void;
+    onMouseLeave(emoji: IEmoji): void;
+}
 
+class Emoji extends React.PureComponent<IProps> {
     render() {
         const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;
         const isSelected = selectedEmojis && selectedEmojis.has(emoji.unicode);

src/components/views/emojipicker/EmojiPicker.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,25 +16,43 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-
 import * as recent from '../../../emojipicker/recent';
-import {DATA_BY_CATEGORY, getEmojiFromUnicode} from "../../../emoji";
+import {DATA_BY_CATEGORY, getEmojiFromUnicode, IEmoji} from "../../../emoji";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import Header from "./Header";
+import Search from "./Search";
+import Preview from "./Preview";
+import QuickReactions from "./QuickReactions";
+import Category, {ICategory, CategoryKey} from "./Category";
 
 export const CATEGORY_HEADER_HEIGHT = 22;
 export const EMOJI_HEIGHT = 37;
 export const EMOJIS_PER_ROW = 8;
 
-class EmojiPicker extends React.Component {
-    static propTypes = {
-        onChoose: PropTypes.func.isRequired,
-        selectedEmojis: PropTypes.instanceOf(Set),
-        showQuickReactions: PropTypes.bool,
-    };
+interface IProps {
+    selectedEmojis: Set<string>;
+    showQuickReactions?: boolean;
+    onChoose(unicode: string): boolean;
+}
+
+interface IState {
+    filter: string;
+    previewEmoji?: IEmoji;
+    scrollTop: number;
+    // initial estimation of height, dialog is hardcoded to 450px height.
+    // should be enough to never have blank rows of emojis as
+    // 3 rows of overflow are also rendered. The actual value is updated on scroll.
+    viewportHeight: number;
+}
+
+class EmojiPicker extends React.Component<IProps, IState> {
+    private readonly recentlyUsed: IEmoji[];
+    private readonly memoizedDataByCategory: Record<CategoryKey, IEmoji[]>;
+    private readonly categories: ICategory[];
+
+    private bodyRef = React.createRef<HTMLDivElement>();
 
     constructor(props) {
         super(props);
@@ -42,9 +61,6 @@ class EmojiPicker extends React.Component {
             filter: "",
             previewEmoji: null,
             scrollTop: 0,
-            // initial estimation of height, dialog is hardcoded to 450px height.
-            // should be enough to never have blank rows of emojis as
-            // 3 rows of overflow are also rendered. The actual value is updated on scroll.
             viewportHeight: 280,
         };
 
@@ -110,18 +126,9 @@ class EmojiPicker extends React.Component {
             visible: false,
             ref: React.createRef(),
         }];
-
-        this.bodyRef = React.createRef();
-
-        this.onChangeFilter = this.onChangeFilter.bind(this);
-        this.onHoverEmoji = this.onHoverEmoji.bind(this);
-        this.onHoverEmojiEnd = this.onHoverEmojiEnd.bind(this);
-        this.onClickEmoji = this.onClickEmoji.bind(this);
-        this.scrollToCategory = this.scrollToCategory.bind(this);
-        this.updateVisibility = this.updateVisibility.bind(this);
     }
 
-    onScroll = () => {
+    private onScroll = () => {
         const body = this.bodyRef.current;
         this.setState({
             scrollTop: body.scrollTop,
@@ -130,7 +137,7 @@ class EmojiPicker extends React.Component {
         this.updateVisibility();
     };
 
-    updateVisibility() {
+    private updateVisibility = () => {
         const body = this.bodyRef.current;
         const rect = body.getBoundingClientRect();
         for (const cat of this.categories) {
@@ -147,21 +154,21 @@ class EmojiPicker extends React.Component {
             // We update this here instead of through React to avoid re-render on scroll.
             if (cat.visible) {
                 cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible");
-                cat.ref.current.setAttribute("aria-selected", true);
-                cat.ref.current.setAttribute("tabindex", 0);
+                cat.ref.current.setAttribute("aria-selected", "true");
+                cat.ref.current.setAttribute("tabindex", "0");
             } else {
                 cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
-                cat.ref.current.setAttribute("aria-selected", false);
-                cat.ref.current.setAttribute("tabindex", -1);
+                cat.ref.current.setAttribute("aria-selected", "false");
+                cat.ref.current.setAttribute("tabindex", "-1");
             }
         }
-    }
+    };
 
-    scrollToCategory(category) {
+    private scrollToCategory = (category: string) => {
         this.bodyRef.current.querySelector(`[data-category-id="${category}"]`).scrollIntoView();
-    }
+    };
 
-    onChangeFilter(filter) {
+    private onChangeFilter = (filter: string) => {
         filter = filter.toLowerCase(); // filter is case insensitive stored lower-case
         for (const cat of this.categories) {
             let emojis;
@@ -181,27 +188,34 @@ class EmojiPicker extends React.Component {
         // Header underlines need to be updated, but updating requires knowing
         // where the categories are, so we wait for a tick.
         setTimeout(this.updateVisibility, 0);
-    }
+    };
 
-    onHoverEmoji(emoji) {
+    private onEnterFilter = () => {
+        const btn = this.bodyRef.current.querySelector<HTMLButtonElement>(".mx_EmojiPicker_item");
+        if (btn) {
+            btn.click();
+        }
+    };
+
+    private onHoverEmoji = (emoji: IEmoji) => {
         this.setState({
             previewEmoji: emoji,
         });
-    }
+    };
 
-    onHoverEmojiEnd(emoji) {
+    private onHoverEmojiEnd = (emoji: IEmoji) => {
         this.setState({
             previewEmoji: null,
         });
-    }
+    };
 
-    onClickEmoji(emoji) {
+    private onClickEmoji = (emoji: IEmoji) => {
         if (this.props.onChoose(emoji.unicode) !== false) {
             recent.add(emoji.unicode);
         }
-    }
+    };
 
-    _categoryHeightForEmojiCount(count) {
+    private static categoryHeightForEmojiCount(count: number) {
         if (count === 0) {
             return 0;
         }
@@ -209,25 +223,37 @@ class EmojiPicker extends React.Component {
     }
 
     render() {
-        const Header = sdk.getComponent("emojipicker.Header");
-        const Search = sdk.getComponent("emojipicker.Search");
-        const Category = sdk.getComponent("emojipicker.Category");
-        const Preview = sdk.getComponent("emojipicker.Preview");
-        const QuickReactions = sdk.getComponent("emojipicker.QuickReactions");
         let heightBefore = 0;
         return (
             <div className="mx_EmojiPicker">
-                <Header categories={this.categories} defaultCategory="recent" onAnchorClick={this.scrollToCategory} />
-                <Search query={this.state.filter} onChange={this.onChangeFilter} />
-                <AutoHideScrollbar className="mx_EmojiPicker_body" wrappedRef={e => this.bodyRef.current = e} onScroll={this.onScroll}>
+                <Header categories={this.categories} onAnchorClick={this.scrollToCategory} />
+                <Search query={this.state.filter} onChange={this.onChangeFilter} onEnter={this.onEnterFilter} />
+                <AutoHideScrollbar
+                    className="mx_EmojiPicker_body"
+                    wrappedRef={ref => {
+                        // @ts-ignore - AutoHideScrollbar should accept a RefObject or fall back to its own instead
+                        this.bodyRef.current = ref
+                    }}
+                    onScroll={this.onScroll}
+                >
                     {this.categories.map(category => {
                         const emojis = this.memoizedDataByCategory[category.id];
-                        const categoryElement = (<Category key={category.id} id={category.id} name={category.name}
-                            heightBefore={heightBefore} viewportHeight={this.state.viewportHeight}
-                            scrollTop={this.state.scrollTop} emojis={emojis} onClick={this.onClickEmoji}
-                            onMouseEnter={this.onHoverEmoji} onMouseLeave={this.onHoverEmojiEnd}
-                            selectedEmojis={this.props.selectedEmojis} />);
-                        const height = this._categoryHeightForEmojiCount(emojis.length);
+                        const categoryElement = ((
+                            <Category
+                                key={category.id}
+                                id={category.id}
+                                name={category.name}
+                                heightBefore={heightBefore}
+                                viewportHeight={this.state.viewportHeight}
+                                scrollTop={this.state.scrollTop}
+                                emojis={emojis}
+                                onClick={this.onClickEmoji}
+                                onMouseEnter={this.onHoverEmoji}
+                                onMouseLeave={this.onHoverEmojiEnd}
+                                selectedEmojis={this.props.selectedEmojis}
+                            />
+                        ));
+                        const height = EmojiPicker.categoryHeightForEmojiCount(emojis.length);
                         heightBefore += height;
                         return categoryElement;
                     })}

src/components/views/emojipicker/Header.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,19 +16,19 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from "classnames";
 
 import {_t} from "../../../languageHandler";
 import {Key} from "../../../Keyboard";
+import {CategoryKey, ICategory} from "./Category";
 
-class Header extends React.PureComponent {
-    static propTypes = {
-        categories: PropTypes.arrayOf(PropTypes.object).isRequired,
-        onAnchorClick: PropTypes.func.isRequired,
-    };
+interface IProps {
+    categories: ICategory[];
+    onAnchorClick(id: CategoryKey): void
+}
 
-    findNearestEnabled(index, delta) {
+class Header extends React.PureComponent<IProps> {
+    private findNearestEnabled(index: number, delta: number) {
         index += this.props.categories.length;
         const cats = [...this.props.categories, ...this.props.categories, ...this.props.categories];
 
@@ -37,12 +38,12 @@ class Header extends React.PureComponent {
         }
     }
 
-    changeCategoryRelative(delta) {
+    private changeCategoryRelative(delta: number) {
         const current = this.props.categories.findIndex(c => c.visible);
         this.changeCategoryAbsolute(current + delta, delta);
     }
 
-    changeCategoryAbsolute(index, delta=1) {
+    private changeCategoryAbsolute(index: number, delta=1) {
         const category = this.props.categories[this.findNearestEnabled(index, delta)];
         if (category) {
             this.props.onAnchorClick(category.id);
@@ -52,7 +53,7 @@ class Header extends React.PureComponent {
 
     // Implements ARIA Tabs with Automatic Activation pattern
     // https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
-    onKeyDown = (ev) => {
+    private onKeyDown = (ev: React.KeyboardEvent) => {
         let handled = true;
         switch (ev.key) {
             case Key.ARROW_LEFT:
@@ -80,7 +81,12 @@ class Header extends React.PureComponent {
 
     render() {
         return (
-            <nav className="mx_EmojiPicker_header" role="tablist" aria-label={_t("Categories")} onKeyDown={this.onKeyDown}>
+            <nav
+                className="mx_EmojiPicker_header"
+                role="tablist"
+                aria-label={_t("Categories")}
+                onKeyDown={this.onKeyDown}
+            >
                 {this.props.categories.map(category => {
                     const classes = classNames(`mx_EmojiPicker_anchor mx_EmojiPicker_anchor_${category.id}`, {
                         mx_EmojiPicker_anchor_visible: category.visible,

src/components/views/emojipicker/Preview.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,19 +16,21 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-class Preview extends React.PureComponent {
-    static propTypes = {
-        emoji: PropTypes.object,
-    };
+import {IEmoji} from "../../../emoji";
 
+interface IProps {
+    emoji: IEmoji;
+}
+
+class Preview extends React.PureComponent<IProps> {
     render() {
         const {
             unicode = "",
             annotation = "",
             shortcodes: [shortcode = ""],
         } = this.props.emoji || {};
+
         return (
             <div className="mx_EmojiPicker_footer mx_EmojiPicker_preview">
                 <div className="mx_EmojiPicker_preview_emoji">

src/components/views/emojipicker/QuickReactions.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,11 +16,10 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {getEmojiFromUnicode} from "../../../emoji";
+import {getEmojiFromUnicode, IEmoji} from "../../../emoji";
+import Emoji from "./Emoji";
 
 // We use the variation-selector Heart in Quick Reactions for some reason
 const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map(emoji => {
@@ -30,36 +30,36 @@ const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀
     return data;
 });
 
-class QuickReactions extends React.Component {
-    static propTypes = {
-        onClick: PropTypes.func.isRequired,
-        selectedEmojis: PropTypes.instanceOf(Set),
-    };
+interface IProps {
+    selectedEmojis?: Set<string>;
+    onClick(emoji: IEmoji): void;
+}
 
+interface IState {
+    hover?: IEmoji;
+}
+
+class QuickReactions extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
         this.state = {
             hover: null,
         };
-        this.onMouseEnter = this.onMouseEnter.bind(this);
-        this.onMouseLeave = this.onMouseLeave.bind(this);
     }
 
-    onMouseEnter(emoji) {
+    private onMouseEnter = (emoji: IEmoji) => {
         this.setState({
             hover: emoji,
         });
-    }
+    };
 
-    onMouseLeave() {
+    private onMouseLeave = () => {
         this.setState({
             hover: null,
         });
-    }
+    };
 
     render() {
-        const Emoji = sdk.getComponent("emojipicker.Emoji");
-
         return (
             <section className="mx_EmojiPicker_footer mx_EmojiPicker_quick mx_EmojiPicker_category">
                 <h2 className="mx_EmojiPicker_quick_header mx_EmojiPicker_category_label">
@@ -72,10 +72,16 @@ class QuickReactions extends React.Component {
                     }
                 </h2>
                 <ul className="mx_EmojiPicker_list" aria-label={_t("Quick Reactions")}>
-                    {QUICK_REACTIONS.map(emoji => <Emoji
-                        key={emoji.hexcode} emoji={emoji} onClick={this.props.onClick}
-                        onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
-                        selectedEmojis={this.props.selectedEmojis} />)}
+                    {QUICK_REACTIONS.map(emoji => ((
+                        <Emoji
+                            key={emoji.hexcode}
+                            emoji={emoji}
+                            onClick={this.props.onClick}
+                            onMouseEnter={this.onMouseEnter}
+                            onMouseLeave={this.onMouseLeave}
+                            selectedEmojis={this.props.selectedEmojis}
+                        />
+                    )))}
                 </ul>
             </section>
         );

src/components/views/emojipicker/ReactionPicker.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,26 +16,29 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from "prop-types";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+
 import EmojiPicker from "./EmojiPicker";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 
-class ReactionPicker extends React.Component {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired,
-        onFinished: PropTypes.func.isRequired,
-        reactions: PropTypes.object,
-    };
+interface IProps {
+    mxEvent: MatrixEvent;
+    reactions: any; // TODO type this once js-sdk is more typescripted
+    onFinished(): void;
+}
 
+interface IState {
+    selectedEmojis: Set<string>;
+}
+
+class ReactionPicker extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
 
         this.state = {
             selectedEmojis: new Set(Object.keys(this.getReactions())),
         };
-        this.onChoose = this.onChoose.bind(this);
-        this.onReactionsChange = this.onReactionsChange.bind(this);
         this.addListeners();
     }
 
@@ -45,7 +49,7 @@ class ReactionPicker extends React.Component {
         }
     }
 
-    addListeners() {
+    private addListeners() {
         if (this.props.reactions) {
             this.props.reactions.on("Relations.add", this.onReactionsChange);
             this.props.reactions.on("Relations.remove", this.onReactionsChange);
@@ -55,22 +59,13 @@ class ReactionPicker extends React.Component {
 
     componentWillUnmount() {
         if (this.props.reactions) {
-            this.props.reactions.removeListener(
-                "Relations.add",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.remove",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.redaction",
-                this.onReactionsChange,
-            );
+            this.props.reactions.removeListener("Relations.add", this.onReactionsChange);
+            this.props.reactions.removeListener("Relations.remove", this.onReactionsChange);
+            this.props.reactions.removeListener("Relations.redaction", this.onReactionsChange);
         }
     }
 
-    getReactions() {
+    private getReactions() {
         if (!this.props.reactions) {
             return {};
         }
@@ -81,13 +76,13 @@ class ReactionPicker extends React.Component {
             .map(event => [event.getRelation().key, event.getId()]));
     }
 
-    onReactionsChange() {
+    private onReactionsChange = () => {
         this.setState({
             selectedEmojis: new Set(Object.keys(this.getReactions())),
         });
-    }
+    };
 
-    onChoose(reaction) {
+    onChoose = (reaction: string) => {
         this.componentWillUnmount();
         this.props.onFinished();
         const myReactions = this.getReactions();
@@ -109,7 +104,7 @@ class ReactionPicker extends React.Component {
             dis.dispatch({action: "message_sent"});
             return true;
         }
-    }
+    };
 
     render() {
         return <EmojiPicker

src/components/views/emojipicker/Search.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,32 +16,41 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { _t } from '../../../languageHandler';
+import {Key} from "../../../Keyboard";
 
-class Search extends React.PureComponent {
-    static propTypes = {
-        query: PropTypes.string.isRequired,
-        onChange: PropTypes.func.isRequired,
-    };
+interface IProps {
+    query: string;
+    onChange(value: string): void;
+    onEnter(): void;
+}
 
-    constructor(props) {
-        super(props);
-        this.inputRef = React.createRef();
-    }
+class Search extends React.PureComponent<IProps> {
+    private inputRef = React.createRef<HTMLInputElement>();
 
     componentDidMount() {
         // For some reason, neither the autoFocus nor just calling focus() here worked, so here's a setTimeout
         setTimeout(() => this.inputRef.current.focus(), 0);
     }
 
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        if (ev.key === Key.ENTER) {
+            this.props.onEnter();
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    };
+
     render() {
         let rightButton;
         if (this.props.query) {
             rightButton = (
-                <button onClick={() => this.props.onChange("")}
-                        className="mx_EmojiPicker_search_icon mx_EmojiPicker_search_clear"
-                        title={_t("Cancel search")} />
+                <button
+                    onClick={() => this.props.onChange("")}
+                    className="mx_EmojiPicker_search_icon mx_EmojiPicker_search_clear"
+                    title={_t("Cancel search")}
+                />
             );
         } else {
             rightButton = <span className="mx_EmojiPicker_search_icon" />;
@@ -48,8 +58,15 @@ class Search extends React.PureComponent {
 
         return (
             <div className="mx_EmojiPicker_search">
-                <input autoFocus type="text" placeholder="Search" value={this.props.query}
-                    onChange={ev => this.props.onChange(ev.target.value)} ref={this.inputRef} />
+                <input
+                    autoFocus
+                    type="text"
+                    placeholder="Search"
+                    value={this.props.query}
+                    onChange={ev => this.props.onChange(ev.target.value)}
+                    onKeyDown={this.onKeyDown}
+                    ref={this.inputRef}
+                />
                 {rightButton}
             </div>
         );

src/components/views/messages/EncryptionEvent.js

@@ -25,10 +25,8 @@ export default class EncryptionEvent extends React.Component {
 
         let body;
         let classes = "mx_EventTile_bubble mx_cryptoEvent mx_cryptoEvent_icon";
-        if (
-            mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' &&
-            MatrixClientPeg.get().isRoomEncrypted(mxEvent.getRoomId())
-        ) {
+        const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(mxEvent.getRoomId());
+        if (mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' && isRoomEncrypted) {
             body = <div>
                 <div className="mx_cryptoEvent_title">{_t("Encryption enabled")}</div>
                 <div className="mx_cryptoEvent_subtitle">
@@ -38,6 +36,13 @@ export default class EncryptionEvent extends React.Component {
                     )}
                 </div>
             </div>;
+        } else if (isRoomEncrypted) {
+            body = <div>
+                <div className="mx_cryptoEvent_title">{_t("Encryption enabled")}</div>
+                <div className="mx_cryptoEvent_subtitle">
+                    {_t("Ignored attempt to disable encryption")}
+                </div>
+            </div>;
         } else {
             body = <div>
                 <div className="mx_cryptoEvent_title">{_t("Encryption not enabled")}</div>

src/components/views/messages/MJitsiWidgetEvent.tsx

@@ -0,0 +1,76 @@
+/*
+Copyright 2020 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 { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { _t } from "../../../languageHandler";
+import WidgetStore from "../../../stores/WidgetStore";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+export default class MJitsiWidgetEvent extends React.PureComponent<IProps> {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const url = this.props.mxEvent.getContent()['url'];
+        const prevUrl = this.props.mxEvent.getPrevContent()['url'];
+        const senderName = this.props.mxEvent.sender?.name || this.props.mxEvent.getSender();
+
+        let joinCopy = _t('Join the conference at the top of this room');
+        if (!WidgetStore.instance.isPinned(this.props.mxEvent.getStateKey())) {
+            joinCopy = _t('Join the conference from the room information card on the right');
+        }
+
+        if (!url) {
+            // removed
+            return (
+                <div className='mx_EventTile_bubble mx_MJitsiWidgetEvent'>
+                    <div className='mx_MJitsiWidgetEvent_title'>
+                        {_t('Video conference ended by %(senderName)s', {senderName})}
+                    </div>
+                </div>
+            );
+        } else if (prevUrl) {
+            // modified
+            return (
+                <div className='mx_EventTile_bubble mx_MJitsiWidgetEvent'>
+                    <div className='mx_MJitsiWidgetEvent_title'>
+                        {_t('Video conference updated by %(senderName)s', {senderName})}
+                    </div>
+                    <div className='mx_MJitsiWidgetEvent_subtitle'>
+                        {joinCopy}
+                    </div>
+                </div>
+            );
+        } else {
+            // assume added
+            return (
+                <div className='mx_EventTile_bubble mx_MJitsiWidgetEvent'>
+                    <div className='mx_MJitsiWidgetEvent_title'>
+                        {_t("Video conference started by %(senderName)s", {senderName})}
+                    </div>
+                    <div className='mx_MJitsiWidgetEvent_subtitle'>
+                        {joinCopy}
+                    </div>
+                </div>
+            );
+        }
+    }
+}

src/components/views/messages/RoomCreate.js

@@ -45,7 +45,7 @@ export default class RoomCreate extends React.Component {
     render() {
         const predecessor = this.props.mxEvent.getContent()['predecessor'];
         if (predecessor === undefined) {
-            return <div />; // We should never have been instaniated in this case
+            return <div />; // We should never have been instantiated in this case
         }
         const prevRoom = MatrixClientPeg.get().getRoom(predecessor['room_id']);
         const permalinkCreator = new RoomPermalinkCreator(prevRoom, predecessor['room_id']);

src/components/views/messages/TextualBody.js

@@ -401,7 +401,8 @@ export default class TextualBody extends React.Component {
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
 
-        const stripReply = ReplyThread.getParentEventId(mxEvent);
+        // only strip reply if this is the original replying event, edits thereafter do not have the fallback
+        const stripReply = !mxEvent.replacingEvent() && ReplyThread.getParentEventId(mxEvent);
         let body = HtmlUtils.bodyToHtml(content, this.props.highlights, {
             disableBigEmoji: content.msgtype === "m.emote" || !SettingsStore.getValue('TextualBody.enableBigEmoji'),
             // Part of Replies fallback support

src/components/views/right_panel/BaseCard.tsx

@@ -31,6 +31,7 @@ interface IProps {
     className?: string;
     withoutScrollContainer?: boolean;
     previousPhase?: RightPanelPhases;
+    closeLabel?: string;
     onClose?(): void;
 }
 
@@ -47,6 +48,7 @@ export const Group: React.FC<IGroupProps> = ({ className, title, children }) =>
 };
 
 const BaseCard: React.FC<IProps> = ({
+    closeLabel,
     onClose,
     className,
     header,
@@ -68,7 +70,11 @@ const BaseCard: React.FC<IProps> = ({
 
     let closeButton;
     if (onClose) {
-        closeButton = <AccessibleButton className="mx_BaseCard_close" onClick={onClose} title={_t("Close")} />;
+        closeButton = <AccessibleButton
+            className="mx_BaseCard_close"
+            onClick={onClose}
+            title={closeLabel || _t("Close")}
+        />;
     }
 
     if (!withoutScrollContainer) {

src/components/views/right_panel/EncryptionPanel.tsx

@@ -27,6 +27,9 @@ import * as sdk from "../../../index";
 import {_t} from "../../../languageHandler";
 import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import dis from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 
 // cancellation codes which constitute a key mismatch
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
@@ -42,7 +45,14 @@ interface IProps {
 }
 
 const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
-    const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted} = props;
+    const {
+        verificationRequest,
+        verificationRequestPromise,
+        member,
+        onClose,
+        layout,
+        isRoomEncrypted,
+    } = props;
     const [request, setRequest] = useState(verificationRequest);
     // state to show a spinner immediately after clicking "start verification",
     // before we have a request
@@ -95,22 +105,6 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
     }, [onClose, request]);
     useEventEmitter(request, "change", changeHandler);
 
-    const onCancel = useCallback(function() {
-        if (request) {
-            request.cancel();
-        }
-    }, [request]);
-
-    let cancelButton: JSX.Element;
-    if (layout !== "dialog" && request && request.pending) {
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-        cancelButton = (<AccessibleButton
-            className="mx_EncryptionPanel_cancel"
-            onClick={onCancel}
-            title={_t('Cancel')}
-        ></AccessibleButton>);
-    }
-
     const onStartVerification = useCallback(async () => {
         setRequesting(true);
         const cli = MatrixClientPeg.get();
@@ -118,7 +112,13 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
         const verificationRequest_ = await cli.requestVerificationDM(member.userId, roomId);
         setRequest(verificationRequest_);
         setPhase(verificationRequest_.phase);
-    }, [member.userId]);
+        // Notify the RightPanelStore about this
+        dis.dispatch({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.EncryptionPanel,
+            refireParams: { member, verificationRequest: verificationRequest_ },
+        });
+    }, [member]);
 
     const requested =
         (!request && isRequesting) ||
@@ -128,8 +128,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
         member.userId === MatrixClientPeg.get().getUserId();
     if (!request || requested) {
         const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
-        return (<React.Fragment>
-            {cancelButton}
+        return (
             <EncryptionInfo
                 isRoomEncrypted={isRoomEncrypted}
                 onStartVerification={onStartVerification}
@@ -138,10 +137,9 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
                 waitingForOtherParty={requested && initiatedByMe}
                 waitingForNetwork={requested && !initiatedByMe}
                 inDialog={layout === "dialog"} />
-        </React.Fragment>);
+        );
     } else {
-        return (<React.Fragment>
-            {cancelButton}
+        return (
             <VerificationPanel
                 isRoomEncrypted={isRoomEncrypted}
                 layout={layout}
@@ -152,7 +150,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
                 inDialog={layout === "dialog"}
                 phase={phase}
             />
-        </React.Fragment>);
+        );
     }
 };
 

src/components/views/right_panel/HeaderButton.tsx

@@ -31,7 +31,7 @@ interface IProps {
     // The badge to display above the icon
     badge?: React.ReactNode;
     // The parameters to track the click event
-    analytics: string[];
+    analytics: Parameters<typeof Analytics.trackEvent>;
 
     // Button name
     name: string;

src/components/views/right_panel/UserInfo.tsx

@@ -17,20 +17,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback, useMemo, useState, useEffect, useContext} from 'react';
-import PropTypes from 'prop-types';
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import classNames from 'classnames';
-import {Group, RoomMember, User, Room} from 'matrix-js-sdk';
+import {MatrixClient} from 'matrix-js-sdk/src/client';
+import {RoomMember} from 'matrix-js-sdk/src/models/room-member';
+import {User} from 'matrix-js-sdk/src/models/user';
+import {Room} from 'matrix-js-sdk/src/models/room';
+import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
+
 import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
+import {_t} from '../../../languageHandler';
 import createRoom, {privateShouldBeEncrypted} from '../../../createRoom';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import AccessibleButton from '../elements/AccessibleButton';
 import SdkConfig from '../../../SdkConfig';
 import SettingsStore from "../../../settings/SettingsStore";
-import {EventTimeline} from "matrix-js-sdk";
 import RoomViewStore from "../../../stores/RoomViewStore";
 import MultiInviter from "../../../utils/MultiInviter";
 import GroupStore from "../../../stores/GroupStore";
@@ -41,13 +43,31 @@ import {textualPowerLevel} from '../../../Roles';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 import EncryptionPanel from "./EncryptionPanel";
-import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
-import { verifyUser, legacyVerifyUser, verifyDevice } from '../../../verification';
+import {useAsyncMemo} from '../../../hooks/useAsyncMemo';
+import {legacyVerifyUser, verifyDevice, verifyUser} from '../../../verification';
 import {Action} from "../../../dispatcher/actions";
 import {useIsEncrypted} from "../../../hooks/useIsEncrypted";
 import BaseCard from "./BaseCard";
+import {E2EStatus} from "../../../utils/ShieldUtils";
+import ImageView from "../elements/ImageView";
+import Spinner from "../elements/Spinner";
+import IconButton from "../elements/IconButton";
+import PowerSelector from "../elements/PowerSelector";
+import MemberAvatar from "../avatars/MemberAvatar";
+import PresenceLabel from "../rooms/PresenceLabel";
+import ShareDialog from "../dialogs/ShareDialog";
+import ErrorDialog from "../dialogs/ErrorDialog";
+import QuestionDialog from "../dialogs/QuestionDialog";
+import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog";
+import InfoDialog from "../dialogs/InfoDialog";
 
-const _disambiguateDevices = (devices) => {
+interface IDevice {
+    deviceId: string;
+    ambiguous?: boolean;
+    getDisplayName(): string;
+}
+
+const disambiguateDevices = (devices: IDevice[]) => {
     const names = Object.create(null);
     for (let i = 0; i < devices.length; i++) {
         const name = devices[i].getDisplayName();
@@ -64,11 +84,11 @@ const _disambiguateDevices = (devices) => {
     }
 };
 
-export const getE2EStatus = (cli, userId, devices) => {
+export const getE2EStatus = (cli: MatrixClient, userId: string, devices: IDevice[]): E2EStatus => {
     const isMe = userId === cli.getUserId();
     const userTrust = cli.checkUserTrust(userId);
     if (!userTrust.isCrossSigningVerified()) {
-        return userTrust.wasCrossSigningVerified() ? "warning" : "normal";
+        return userTrust.wasCrossSigningVerified() ? E2EStatus.Warning : E2EStatus.Normal;
     }
 
     const anyDeviceUnverified = devices.some(device => {
@@ -81,10 +101,10 @@ export const getE2EStatus = (cli, userId, devices) => {
         const deviceTrust = cli.checkDeviceTrust(userId, deviceId);
         return isMe ? !deviceTrust.isCrossSigningVerified() : !deviceTrust.isVerified();
     });
-    return anyDeviceUnverified ? "warning" : "verified";
+    return anyDeviceUnverified ? E2EStatus.Warning : E2EStatus.Verified;
 };
 
-async function openDMForUser(matrixClient, userId) {
+async function openDMForUser(matrixClient: MatrixClient, userId: string) {
     const dmRooms = DMRoomMap.shared().getDMRoomsForUserId(userId);
     const lastActiveRoom = dmRooms.reduce((lastActiveRoom, roomId) => {
         const room = matrixClient.getRoom(roomId);
@@ -107,6 +127,7 @@ async function openDMForUser(matrixClient, userId) {
 
     const createRoomOptions = {
         dmUserId: userId,
+        encryption: undefined,
     };
 
     if (privateShouldBeEncrypted()) {
@@ -122,10 +143,12 @@ async function openDMForUser(matrixClient, userId) {
         }
     }
 
-    createRoom(createRoomOptions);
+    return createRoom(createRoomOptions);
 }
 
-function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
+type SetUpdating = (updating: boolean) => void;
+
+function useHasCrossSigningKeys(cli: MatrixClient, member: RoomMember, canVerify: boolean, setUpdating: SetUpdating) {
     return useAsyncMemo(async () => {
         if (!canVerify) {
             return undefined;
@@ -142,7 +165,7 @@ function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
     }, [cli, member, canVerify], undefined);
 }
 
-function DeviceItem({userId, device}) {
+function DeviceItem({userId, device}: {userId: string, device: IDevice}) {
     const cli = useContext(MatrixClientContext);
     const isMe = userId === cli.getUserId();
     const deviceTrust = cli.checkDeviceTrust(userId, device.deviceId);
@@ -169,8 +192,8 @@ function DeviceItem({userId, device}) {
     };
 
     const deviceName = device.ambiguous ?
-            (device.getDisplayName() ? device.getDisplayName() : "") + " (" + device.deviceId + ")" :
-            device.getDisplayName();
+        (device.getDisplayName() ? device.getDisplayName() : "") + " (" + device.deviceId + ")" :
+        device.getDisplayName();
     let trustedLabel = null;
     if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
 
@@ -198,8 +221,7 @@ function DeviceItem({userId, device}) {
     }
 }
 
-function DevicesSection({devices, userId, loading}) {
-    const Spinner = sdk.getComponent("elements.Spinner");
+function DevicesSection({devices, userId, loading}: {devices: IDevice[], userId: string, loading: boolean}) {
     const cli = useContext(MatrixClientContext);
     const userTrust = cli.checkUserTrust(userId);
 
@@ -210,7 +232,7 @@ function DevicesSection({devices, userId, loading}) {
         return <Spinner />;
     }
     if (devices === null) {
-        return _t("Unable to load session list");
+        return <>{_t("Unable to load session list")}</>;
     }
     const isMe = userId === cli.getUserId();
     const deviceTrusts = devices.map(d => cli.checkDeviceTrust(userId, d.deviceId));
@@ -285,7 +307,11 @@ function DevicesSection({devices, userId, loading}) {
     );
 }
 
-const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
+const UserOptionsSection: React.FC<{
+    member: RoomMember;
+    isIgnored: boolean;
+    canInvite: boolean;
+}> = ({member, isIgnored, canInvite}) => {
     const cli = useContext(MatrixClientContext);
 
     let ignoreButton = null;
@@ -296,7 +322,6 @@ const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
     const isMe = member.userId === cli.getUserId();
 
     const onShareUserClick = () => {
-        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room member dialog', '', ShareDialog, {
             target: member,
         });
@@ -318,7 +343,10 @@ const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
         };
 
         ignoreButton = (
-            <AccessibleButton onClick={onIgnoreToggle} className={classNames("mx_UserInfo_field", {mx_UserInfo_destructive: !isIgnored})}>
+            <AccessibleButton
+                onClick={onIgnoreToggle}
+                className={classNames("mx_UserInfo_field", {mx_UserInfo_destructive: !isIgnored})}
+            >
                 { isIgnored ? _t("Unignore") : _t("Ignore") }
             </AccessibleButton>
         );
@@ -341,11 +369,14 @@ const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
                 });
             };
 
-            readReceiptButton = (
-                <AccessibleButton onClick={onReadReceiptButton} className="mx_UserInfo_field">
-                    { _t('Jump to read receipt') }
-                </AccessibleButton>
-            );
+            const room = cli.getRoom(member.roomId);
+            if (room?.getEventReadUpTo(member.userId)) {
+                readReceiptButton = (
+                    <AccessibleButton onClick={onReadReceiptButton} className="mx_UserInfo_field">
+                        { _t('Jump to read receipt') }
+                    </AccessibleButton>
+                );
+            }
 
             insertPillButton = (
                 <AccessibleButton onClick={onInsertPillButton} className={"mx_UserInfo_field"}>
@@ -367,7 +398,6 @@ const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
                         }
                     });
                 } catch (err) {
-                    const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
                     Modal.createTrackedDialog('Failed to invite', '', ErrorDialog, {
                         title: _t('Failed to invite'),
                         description: ((err && err.message) ? err.message : _t("Operation failed")),
@@ -413,8 +443,7 @@ const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
     );
 };
 
-const _warnSelfDemote = async () => {
-    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+const warnSelfDemote = async () => {
     const {finished} = Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
         title: _t("Demote yourself?"),
         description:
@@ -430,7 +459,7 @@ const _warnSelfDemote = async () => {
     return confirmed;
 };
 
-const GenericAdminToolsContainer = ({children}) => {
+const GenericAdminToolsContainer: React.FC<{}> = ({children}) => {
     return (
         <div className="mx_UserInfo_container">
             <h3>{ _t("Admin Tools") }</h3>
@@ -441,7 +470,20 @@ const GenericAdminToolsContainer = ({children}) => {
     );
 };
 
-const _isMuted = (member, powerLevelContent) => {
+interface IPowerLevelsContent {
+    events?: Record<string, number>;
+    // eslint-disable-next-line camelcase
+    users_default?: number;
+    // eslint-disable-next-line camelcase
+    events_default?: number;
+    // eslint-disable-next-line camelcase
+    state_default?: number;
+    ban?: number;
+    kick?: number;
+    redact?: number;
+}
+
+const isMuted = (member: RoomMember, powerLevelContent: IPowerLevelsContent) => {
     if (!powerLevelContent || !member) return false;
 
     const levelToSend = (
@@ -451,8 +493,8 @@ const _isMuted = (member, powerLevelContent) => {
     return member.powerLevel < levelToSend;
 };
 
-export const useRoomPowerLevels = (cli, room) => {
-    const [powerLevels, setPowerLevels] = useState({});
+export const useRoomPowerLevels = (cli: MatrixClient, room: Room) => {
+    const [powerLevels, setPowerLevels] = useState<IPowerLevelsContent>({});
 
     const update = useCallback(() => {
         if (!room) {
@@ -479,14 +521,19 @@ export const useRoomPowerLevels = (cli, room) => {
     return powerLevels;
 };
 
-const RoomKickButton = ({member, startUpdating, stopUpdating}) => {
+interface IBaseProps {
+    member: RoomMember;
+    startUpdating(): void;
+    stopUpdating(): void;
+}
+
+const RoomKickButton: React.FC<IBaseProps> = ({member, startUpdating, stopUpdating}) => {
     const cli = useContext(MatrixClientContext);
 
     // check if user can be kicked/disinvited
     if (member.membership !== "invite" && member.membership !== "join") return null;
 
     const onKick = async () => {
-        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
         const {finished} = Modal.createTrackedDialog(
             'Confirm User Action Dialog',
             'onKick',
@@ -509,7 +556,6 @@ const RoomKickButton = ({member, startUpdating, stopUpdating}) => {
             // get out of sync if we force setState here!
             console.log("Kick success");
         }, function(err) {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Kick error: " + err);
             Modal.createTrackedDialog('Failed to kick', '', ErrorDialog, {
                 title: _t("Failed to kick"),
@@ -526,7 +572,7 @@ const RoomKickButton = ({member, startUpdating, stopUpdating}) => {
     </AccessibleButton>;
 };
 
-const RedactMessagesButton = ({member}) => {
+const RedactMessagesButton: React.FC<IBaseProps> = ({member}) => {
     const cli = useContext(MatrixClientContext);
 
     const onRedactAllMessages = async () => {
@@ -554,7 +600,6 @@ const RedactMessagesButton = ({member}) => {
         const user = member.name;
 
         if (count === 0) {
-            const InfoDialog = sdk.getComponent("dialogs.InfoDialog");
             Modal.createTrackedDialog('No user messages found to remove', '', InfoDialog, {
                 title: _t("No recent messages by %(user)s found", {user}),
                 description:
@@ -563,14 +608,14 @@ const RedactMessagesButton = ({member}) => {
                     </div>,
             });
         } else {
-            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-
             const {finished} = Modal.createTrackedDialog('Remove recent messages by user', '', QuestionDialog, {
                 title: _t("Remove recent messages by %(user)s", {user}),
                 description:
                     <div>
-                        <p>{ _t("You are about to remove %(count)s messages by %(user)s. This cannot be undone. Do you wish to continue?", {count, user}) }</p>
-                        <p>{ _t("For a large amount of messages, this might take some time. Please don't refresh your client in the meantime.") }</p>
+                        <p>{ _t("You are about to remove %(count)s messages by %(user)s. " +
+                            "This cannot be undone. Do you wish to continue?", {count, user}) }</p>
+                        <p>{ _t("For a large amount of messages, this might take some time. " +
+                            "Please don't refresh your client in the meantime.") }</p>
                     </div>,
                 button: _t("Remove %(count)s messages", {count}),
             });
@@ -603,11 +648,10 @@ const RedactMessagesButton = ({member}) => {
     </AccessibleButton>;
 };
 
-const BanToggleButton = ({member, startUpdating, stopUpdating}) => {
+const BanToggleButton: React.FC<IBaseProps> = ({member, startUpdating, stopUpdating}) => {
     const cli = useContext(MatrixClientContext);
 
     const onBanOrUnban = async () => {
-        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
         const {finished} = Modal.createTrackedDialog(
             'Confirm User Action Dialog',
             'onBanOrUnban',
@@ -636,7 +680,6 @@ const BanToggleButton = ({member, startUpdating, stopUpdating}) => {
             // get out of sync if we force setState here!
             console.log("Ban success");
         }, function(err) {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Ban error: " + err);
             Modal.createTrackedDialog('Failed to ban user', '', ErrorDialog, {
                 title: _t("Error"),
@@ -661,22 +704,26 @@ const BanToggleButton = ({member, startUpdating, stopUpdating}) => {
     </AccessibleButton>;
 };
 
-const MuteToggleButton = ({member, room, powerLevels, startUpdating, stopUpdating}) => {
+interface IBaseRoomProps extends IBaseProps {
+    room: Room;
+    powerLevels: IPowerLevelsContent;
+}
+
+const MuteToggleButton: React.FC<IBaseRoomProps> = ({member, room, powerLevels, startUpdating, stopUpdating}) => {
     const cli = useContext(MatrixClientContext);
 
     // Don't show the mute/unmute option if the user is not in the room
     if (member.membership !== "join") return null;
 
-    const isMuted = _isMuted(member, powerLevels);
+    const muted = isMuted(member, powerLevels);
     const onMuteToggle = async () => {
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         const roomId = member.roomId;
         const target = member.userId;
 
         // if muting self, warn as it may be irreversible
         if (target === cli.getUserId()) {
             try {
-                if (!(await _warnSelfDemote())) return;
+                if (!(await warnSelfDemote())) return;
             } catch (e) {
                 console.error("Failed to warn about self demotion: ", e);
                 return;
@@ -692,7 +739,7 @@ const MuteToggleButton = ({member, room, powerLevels, startUpdating, stopUpdatin
             powerLevels.events_default
         );
         let level;
-        if (isMuted) { // unmute
+        if (muted) { // unmute
             level = levelToSend;
         } else { // mute
             level = levelToSend - 1;
@@ -718,16 +765,23 @@ const MuteToggleButton = ({member, room, powerLevels, startUpdating, stopUpdatin
     };
 
     const classes = classNames("mx_UserInfo_field", {
-        mx_UserInfo_destructive: !isMuted,
+        mx_UserInfo_destructive: !muted,
     });
 
-    const muteLabel = isMuted ? _t("Unmute") : _t("Mute");
+    const muteLabel = muted ? _t("Unmute") : _t("Mute");
     return <AccessibleButton className={classes} onClick={onMuteToggle}>
         { muteLabel }
     </AccessibleButton>;
 };
 
-const RoomAdminToolsContainer = ({room, children, member, startUpdating, stopUpdating, powerLevels}) => {
+const RoomAdminToolsContainer: React.FC<IBaseRoomProps> = ({
+    room,
+    children,
+    member,
+    startUpdating,
+    stopUpdating,
+    powerLevels,
+}) => {
     const cli = useContext(MatrixClientContext);
     let kickButton;
     let banButton;
@@ -747,6 +801,11 @@ const RoomAdminToolsContainer = ({room, children, member, startUpdating, stopUpd
     } = powerLevels;
 
     const me = room.getMember(cli.getUserId());
+    if (!me) {
+        // we aren't in the room, so return no admin tooling
+        return <div />;
+    }
+
     const isMe = me.userId === member.userId;
     const canAffectUser = member.powerLevel < me.powerLevel || isMe;
 
@@ -786,7 +845,18 @@ const RoomAdminToolsContainer = ({room, children, member, startUpdating, stopUpd
     return <div />;
 };
 
-const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating, stopUpdating}) => {
+interface GroupMember {
+    userId: string;
+    displayname?: string; // XXX: GroupMember objects are inconsistent :((
+    avatarUrl?: string;
+}
+
+const GroupAdminToolsSection: React.FC<{
+    groupId: string;
+    groupMember: GroupMember;
+    startUpdating(): void;
+    stopUpdating(): void;
+}> = ({children, groupId, groupMember, startUpdating, stopUpdating}) => {
     const cli = useContext(MatrixClientContext);
 
     const [isPrivileged, setIsPrivileged] = useState(false);
@@ -814,8 +884,7 @@ const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating,
     }, [groupId, groupMember.userId]);
 
     if (isPrivileged) {
-        const _onKick = async () => {
-            const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
+        const onKick = async () => {
             const {finished} = Modal.createDialog(ConfirmUserActionDialog, {
                 matrixClient: cli,
                 groupMember,
@@ -836,7 +905,6 @@ const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating,
                     member: null,
                 });
             }).catch((e) => {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createTrackedDialog('Failed to remove user from group', '', ErrorDialog, {
                     title: _t('Error'),
                     description: isInvited ?
@@ -850,7 +918,7 @@ const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating,
         };
 
         const kickButton = (
-            <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={_onKick}>
+            <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={onKick}>
                 { isInvited ? _t('Disinvite') : _t('Remove from community') }
             </AccessibleButton>
         );
@@ -870,13 +938,7 @@ const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating,
     return <div />;
 };
 
-const GroupMember = PropTypes.shape({
-    userId: PropTypes.string.isRequired,
-    displayname: PropTypes.string, // XXX: GroupMember objects are inconsistent :((
-    avatarUrl: PropTypes.string,
-});
-
-const useIsSynapseAdmin = (cli) => {
+const useIsSynapseAdmin = (cli: MatrixClient) => {
     const [isAdmin, setIsAdmin] = useState(false);
     useEffect(() => {
         cli.isSynapseAdministrator().then((isAdmin) => {
@@ -888,14 +950,20 @@ const useIsSynapseAdmin = (cli) => {
     return isAdmin;
 };
 
-const useHomeserverSupportsCrossSigning = (cli) => {
-    return useAsyncMemo(async () => {
+const useHomeserverSupportsCrossSigning = (cli: MatrixClient) => {
+    return useAsyncMemo<boolean>(async () => {
         return cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing");
     }, [cli], false);
 };
 
-function useRoomPermissions(cli, room, user) {
-    const [roomPermissions, setRoomPermissions] = useState({
+interface IRoomPermissions {
+    modifyLevelMax: number;
+    canEdit: boolean;
+    canInvite: boolean;
+}
+
+function useRoomPermissions(cli: MatrixClient, room: Room, user: User): IRoomPermissions {
+    const [roomPermissions, setRoomPermissions] = useState<IRoomPermissions>({
         // modifyLevelMax is the max PL we can set this user to, typically min(their PL, our PL) && canSetPL
         modifyLevelMax: -1,
         canEdit: false,
@@ -940,7 +1008,7 @@ function useRoomPermissions(cli, room, user) {
         updateRoomPermissions();
         return () => {
             setRoomPermissions({
-                maximalPowerLevel: -1,
+                modifyLevelMax: -1,
                 canEdit: false,
                 canInvite: false,
             });
@@ -950,14 +1018,18 @@ function useRoomPermissions(cli, room, user) {
     return roomPermissions;
 }
 
-const PowerLevelSection = ({user, room, roomPermissions, powerLevels}) => {
+const PowerLevelSection: React.FC<{
+    user: User;
+    room: Room;
+    roomPermissions: IRoomPermissions;
+    powerLevels: IPowerLevelsContent;
+}> = ({user, room, roomPermissions, powerLevels}) => {
     const [isEditing, setEditing] = useState(false);
     if (isEditing) {
         return (<PowerLevelEditor
             user={user} room={room} roomPermissions={roomPermissions}
             onFinished={() => setEditing(false)} />);
     } else {
-        const IconButton = sdk.getComponent('elements.IconButton');
         const powerLevelUsersDefault = powerLevels.users_default || 0;
         const powerLevel = parseInt(user.powerLevel, 10);
         const modifyButton = roomPermissions.canEdit ?
@@ -975,7 +1047,12 @@ const PowerLevelSection = ({user, room, roomPermissions, powerLevels}) => {
     }
 };
 
-const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
+const PowerLevelEditor: React.FC<{
+    user: User;
+    room: Room;
+    roomPermissions: IRoomPermissions;
+    onFinished(): void;
+}> = ({user, room, roomPermissions, onFinished}) => {
     const cli = useContext(MatrixClientContext);
 
     const [isUpdating, setIsUpdating] = useState(false);
@@ -994,7 +1071,6 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
                     // get out of sync if we force setState here!
                     console.log("Power change success");
                 }, function(err) {
-                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to change power level " + err);
                     Modal.createTrackedDialog('Failed to change power level', '', ErrorDialog, {
                         title: _t("Error"),
@@ -1025,12 +1101,10 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
             }
 
             const myUserId = cli.getUserId();
-            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-
             // If we are changing our own PL it can only ever be decreasing, which we cannot reverse.
             if (myUserId === target) {
                 try {
-                    if (!(await _warnSelfDemote())) return;
+                    if (!(await warnSelfDemote())) return;
                 } catch (e) {
                     console.error("Failed to warn about self demotion: ", e);
                 }
@@ -1039,7 +1113,7 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
             }
 
             const myPower = powerLevelEvent.getContent().users[myUserId];
-            if (parseInt(myPower) === parseInt(powerLevel)) {
+            if (parseInt(myPower) === powerLevel) {
                 const {finished} = Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
                     title: _t("Warning!"),
                     description:
@@ -1062,12 +1136,9 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
 
     const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
     const powerLevelUsersDefault = powerLevelEvent ? powerLevelEvent.getContent().users_default : 0;
-    const IconButton = sdk.getComponent('elements.IconButton');
-    const Spinner = sdk.getComponent("elements.Spinner");
     const buttonOrSpinner = isUpdating ? <Spinner w={16} h={16} /> :
         <IconButton icon="check" onClick={changePowerLevel} />;
 
-    const PowerSelector = sdk.getComponent('elements.PowerSelector');
     return (
         <div className="mx_UserInfo_profileField">
             <PowerSelector
@@ -1083,7 +1154,7 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
     );
 };
 
-export const useDevices = (userId) => {
+export const useDevices = (userId: string) => {
     const cli = useContext(MatrixClientContext);
 
     // undefined means yet to be loaded, null means failed to load, otherwise list of devices
@@ -1094,7 +1165,7 @@ export const useDevices = (userId) => {
 
         let cancelled = false;
 
-        async function _downloadDeviceList() {
+        async function downloadDeviceList() {
             try {
                 await cli.downloadKeys([userId], true);
                 const devices = cli.getStoredDevicesForUser(userId);
@@ -1104,13 +1175,13 @@ export const useDevices = (userId) => {
                     return;
                 }
 
-                _disambiguateDevices(devices);
+                disambiguateDevices(devices);
                 setDevices(devices);
             } catch (err) {
                 setDevices(null);
             }
         }
-        _downloadDeviceList();
+        downloadDeviceList();
 
         // Handle being unmounted
         return () => {
@@ -1153,7 +1224,13 @@ export const useDevices = (userId) => {
     return devices;
 };
 
-const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
+const BasicUserInfo: React.FC<{
+    room: Room;
+    member: User | RoomMember;
+    groupId: string;
+    devices: IDevice[];
+    isRoomEncrypted: boolean;
+}> = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const cli = useContext(MatrixClientContext);
 
     const powerLevels = useRoomPowerLevels(cli, room);
@@ -1186,7 +1263,6 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const roomPermissions = useRoomPermissions(cli, room, member);
 
     const onSynapseDeactivate = useCallback(async () => {
-        const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
         const {finished} = Modal.createTrackedDialog('Synapse User Deactivation', '', QuestionDialog, {
             title: _t("Deactivate user?"),
             description:
@@ -1207,7 +1283,6 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
             console.error("Failed to deactivate user");
             console.error(err);
 
-            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
             Modal.createTrackedDialog('Failed to deactivate Synapse user', '', ErrorDialog, {
                 title: _t('Failed to deactivate user'),
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
@@ -1260,8 +1335,7 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     }
 
     if (pendingUpdateCount > 0) {
-        const Loader = sdk.getComponent("elements.Spinner");
-        spinner = <Loader imgClassName="mx_ContextualMenu_spinner" />;
+        spinner = <Spinner imgClassName="mx_ContextualMenu_spinner" />;
     }
 
     let memberDetails;
@@ -1296,7 +1370,8 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const userTrust = cryptoEnabled && cli.checkUserTrust(member.userId);
     const userVerified = cryptoEnabled && userTrust.isCrossSigningVerified();
     const isMe = member.userId === cli.getUserId();
-    const canVerify = cryptoEnabled && homeserverSupportsCrossSigning && !userVerified && !isMe;
+    const canVerify = cryptoEnabled && homeserverSupportsCrossSigning && !userVerified && !isMe &&
+        devices && devices.length > 0;
 
     const setUpdating = (updating) => {
         setPendingUpdateCount(count => count + (updating ? 1 : -1));
@@ -1323,7 +1398,6 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
             // HACK: only show a spinner if the device section spinner is not shown,
             // to avoid showing a double spinner
             // We should ask for a design that includes all the different loading states here
-            const Spinner = sdk.getComponent('elements.Spinner');
             verifyButton = <Spinner />;
         }
     }
@@ -1350,7 +1424,6 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
 
         { securitySection }
         <UserOptionsSection
-            devices={devices}
             canInvite={roomPermissions.canInvite}
             isIgnored={isIgnored}
             member={member} />
@@ -1361,7 +1434,12 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     </React.Fragment>;
 };
 
-const UserInfoHeader = ({member, e2eStatus}) => {
+type Member = User | RoomMember | GroupMember;
+
+const UserInfoHeader: React.FC<{
+    member: Member;
+    e2eStatus: E2EStatus;
+}> = ({member, e2eStatus}) => {
     const cli = useContext(MatrixClientContext);
 
     const onMemberAvatarClick = useCallback(() => {
@@ -1369,7 +1447,6 @@ const UserInfoHeader = ({member, e2eStatus}) => {
         if (!avatarUrl) return;
 
         const httpUrl = cli.mxcUrlToHttp(avatarUrl);
-        const ImageView = sdk.getComponent("elements.ImageView");
         const params = {
             src: httpUrl,
             name: member.name,
@@ -1378,7 +1455,6 @@ const UserInfoHeader = ({member, e2eStatus}) => {
         Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
     }, [cli, member]);
 
-    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
     const avatarElement = (
         <div className="mx_UserInfo_avatar">
             <div>
@@ -1420,10 +1496,13 @@ const UserInfoHeader = ({member, e2eStatus}) => {
 
     let presenceLabel = null;
     if (showPresence) {
-        const PresenceLabel = sdk.getComponent('rooms.PresenceLabel');
-        presenceLabel = <PresenceLabel activeAgo={presenceLastActiveAgo}
-                                       currentlyActive={presenceCurrentlyActive}
-                                       presenceState={presenceState} />;
+        presenceLabel = (
+            <PresenceLabel
+                activeAgo={presenceLastActiveAgo}
+                currentlyActive={presenceCurrentlyActive}
+                presenceState={presenceState}
+            />
+        );
     }
 
     let statusLabel = null;
@@ -1460,7 +1539,32 @@ const UserInfoHeader = ({member, e2eStatus}) => {
     </React.Fragment>;
 };
 
-const UserInfo = ({user, groupId, room, onClose, phase=RightPanelPhases.RoomMemberInfo, ...props}) => {
+interface IProps {
+    user: Member;
+    groupId?: string;
+    room?: Room;
+    phase: RightPanelPhases.RoomMemberInfo | RightPanelPhases.GroupMemberInfo;
+    onClose(): void;
+}
+
+interface IPropsWithEncryptionPanel extends React.ComponentProps<typeof EncryptionPanel> {
+    user: Member;
+    groupId: void;
+    room: Room;
+    phase: RightPanelPhases.EncryptionPanel;
+    onClose(): void;
+}
+
+type Props = IProps | IPropsWithEncryptionPanel;
+
+const UserInfo: React.FC<Props> = ({
+    user,
+    groupId,
+    room,
+    onClose,
+    phase = RightPanelPhases.RoomMemberInfo,
+    ...props
+}) => {
     const cli = useContext(MatrixClientContext);
 
     // fetch latest room member if we have a room, so we don't show historical information, falling back to user
@@ -1484,7 +1588,7 @@ const UserInfo = ({user, groupId, room, onClose, phase=RightPanelPhases.RoomMemb
                 <BasicUserInfo
                     room={room}
                     member={member}
-                    groupId={groupId}
+                    groupId={groupId as string}
                     devices={devices}
                     isRoomEncrypted={isRoomEncrypted} />
             );
@@ -1492,7 +1596,12 @@ const UserInfo = ({user, groupId, room, onClose, phase=RightPanelPhases.RoomMemb
         case RightPanelPhases.EncryptionPanel:
             classes.push("mx_UserInfo_smallAvatar");
             content = (
-                <EncryptionPanel {...props} member={member} onClose={onClose} isRoomEncrypted={isRoomEncrypted} />
+                <EncryptionPanel
+                    {...props as React.ComponentProps<typeof EncryptionPanel>}
+                    member={member}
+                    onClose={onClose}
+                    isRoomEncrypted={isRoomEncrypted}
+                />
             );
             break;
     }
@@ -1503,23 +1612,24 @@ const UserInfo = ({user, groupId, room, onClose, phase=RightPanelPhases.RoomMemb
         previousPhase = RightPanelPhases.RoomMemberList;
     }
 
-    const header = <UserInfoHeader member={member} e2eStatus={e2eStatus} onClose={onClose} />;
-    return <BaseCard className={classes.join(" ")} header={header} onClose={onClose} previousPhase={previousPhase}>
+    let closeLabel = undefined;
+    if (phase === RightPanelPhases.EncryptionPanel) {
+        const verificationRequest = (props as React.ComponentProps<typeof EncryptionPanel>).verificationRequest;
+        if (verificationRequest && verificationRequest.pending) {
+            closeLabel = _t("Cancel");
+        }
+    }
+
+    const header = <UserInfoHeader member={member} e2eStatus={e2eStatus} />;
+    return <BaseCard
+        className={classes.join(" ")}
+        header={header}
+        onClose={onClose}
+        closeLabel={closeLabel}
+        previousPhase={previousPhase}
+    >
         { content }
     </BaseCard>;
 };
 
-UserInfo.propTypes = {
-    user: PropTypes.oneOfType([
-        PropTypes.instanceOf(User),
-        PropTypes.instanceOf(RoomMember),
-        GroupMember,
-    ]).isRequired,
-    group: PropTypes.instanceOf(Group),
-    groupId: PropTypes.string,
-    room: PropTypes.instanceOf(Room),
-
-    onClose: PropTypes.func,
-};
-
 export default UserInfo;

src/components/views/right_panel/WidgetCard.tsx

@@ -29,16 +29,17 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
 import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
 import {Action} from "../../../dispatcher/actions";
 import WidgetStore from "../../../stores/WidgetStore";
-import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
 import {ChevronFace, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu";
 import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
 } from "../context_menus/IconizedContextMenu";
 import {AppTileActionPayload} from "../../../dispatcher/payloads/AppTileActionPayload";
-import {Capability} from "../../../widgets/WidgetApi";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import classNames from "classnames";
+import dis from "../../../dispatcher/dispatcher";
+import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
+import { MatrixCapabilities } from "matrix-widget-api";
 
 interface IProps {
     room: Room;
@@ -77,9 +78,17 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
     let contextMenu;
     if (menuDisplayed) {
         let snapshotButton;
-        if (ActiveWidgetStore.widgetHasCapability(app.id, Capability.Screenshot)) {
+        const widgetMessaging = WidgetMessagingStore.instance.getMessagingForId(app.id);
+        if (widgetMessaging?.hasCapability(MatrixCapabilities.Screenshots)) {
             const onSnapshotClick = () => {
-                WidgetUtils.snapshotWidget(app);
+                widgetMessaging.takeScreenshot().then(data => {
+                    dis.dispatch({
+                        action: 'picture_snapshot',
+                        file: data.screenshot,
+                    });
+                }).catch(err => {
+                    console.error("Failed to take screenshot: ", err);
+                });
                 closeMenu();
             };
 

src/components/views/room_settings/RoomProfileSettings.js

@@ -75,6 +75,15 @@ export default class RoomProfileSettings extends React.Component {
         });
     };
 
+    _clearProfile = async (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (!this.state.enableProfileSave) return;
+        this._removeAvatar();
+        this.setState({enableProfileSave: false, displayName: this.state.originalDisplayName});
+    };
+
     _saveProfile = async (e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -150,7 +159,12 @@ export default class RoomProfileSettings extends React.Component {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
         return (
-            <form onSubmit={this._saveProfile} autoComplete="off" noValidate={true}>
+            <form
+                onSubmit={this._saveProfile}
+                autoComplete="off"
+                noValidate={true}
+                className="mx_ProfileSettings_profileForm"
+            >
                 <input type="file" ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
                        onChange={this._onAvatarChanged} accept="image/*" />
                 <div className="mx_ProfileSettings_profile">
@@ -169,10 +183,22 @@ export default class RoomProfileSettings extends React.Component {
                         uploadAvatar={this.state.canSetAvatar ? this._uploadAvatar : undefined}
                         removeAvatar={this.state.canSetAvatar ? this._removeAvatar : undefined} />
                 </div>
-                <AccessibleButton onClick={this._saveProfile} kind="primary"
-                                  disabled={!this.state.enableProfileSave}>
-                    {_t("Save")}
-                </AccessibleButton>
+                <div className="mx_ProfileSettings_buttons">
+                    <AccessibleButton
+                        onClick={this._clearProfile}
+                        kind="link"
+                        disabled={!this.state.enableProfileSave}
+                    >
+                        {_t("Cancel")}
+                    </AccessibleButton>
+                    <AccessibleButton
+                        onClick={this._saveProfile}
+                        kind="primary"
+                        disabled={!this.state.enableProfileSave}
+                    >
+                        {_t("Save")}
+                    </AccessibleButton>
+                </div>
             </form>
         );
     }

src/components/views/rooms/AppsDrawer.js

@@ -40,12 +40,10 @@ export default class AppsDrawer extends React.Component {
         room: PropTypes.object.isRequired,
         resizeNotifier: PropTypes.instanceOf(ResizeNotifier).isRequired,
         showApps: PropTypes.bool, // Should apps be rendered
-        hide: PropTypes.bool, // If rendered, should apps drawer be visible
     };
 
     static defaultProps = {
         showApps: true,
-        hide: false,
     };
 
     constructor(props) {
@@ -173,7 +171,6 @@ export default class AppsDrawer extends React.Component {
 
         const classes = classNames({
             "mx_AppsDrawer": true,
-            "mx_AppsDrawer_hidden": this.props.hide,
             "mx_AppsDrawer_fullWidth": apps.length < 2,
             "mx_AppsDrawer_minimised": !this.props.showApps,
         });

src/components/views/rooms/AuxPanel.js

@@ -37,17 +37,10 @@ export default class AuxPanel extends React.Component {
         room: PropTypes.object.isRequired,
         userId: PropTypes.string.isRequired,
         showApps: PropTypes.bool, // Render apps
-        hideAppsDrawer: PropTypes.bool, // Do not display apps drawer and content (may still be rendered)
-
-        // Conference Handler implementation
-        conferenceHandler: PropTypes.object,
 
         // set to true to show the file drop target
         draggingFile: PropTypes.bool,
 
-        // set to true to show the 'active conf call' banner
-        displayConfCallNotification: PropTypes.bool,
-
         // maxHeight attribute for the aux panel and the video
         // therein
         maxHeight: PropTypes.number,
@@ -60,7 +53,6 @@ export default class AuxPanel extends React.Component {
 
     static defaultProps = {
         showApps: true,
-        hideAppsDrawer: false,
     };
 
     constructor(props) {
@@ -161,39 +153,9 @@ export default class AuxPanel extends React.Component {
             );
         }
 
-        let conferenceCallNotification = null;
-        if (this.props.displayConfCallNotification) {
-            let supportedText = '';
-            let joinNode;
-            if (!MatrixClientPeg.get().supportsVoip()) {
-                supportedText = _t(" (unsupported)");
-            } else {
-                joinNode = (<span>
-                    { _t(
-                        "Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.",
-                        {},
-                        {
-                            'voiceText': (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}} href="#">{ sub }</a>,
-                            'videoText': (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video');}} href="#">{ sub }</a>,
-                        },
-                    ) }
-                </span>);
-            }
-            // XXX: the translation here isn't great: appending ' (unsupported)' is likely to not make sense in many languages,
-            // but there are translations for this in the languages we do have so I'm leaving it for now.
-            conferenceCallNotification = (
-                <div className="mx_RoomView_ongoingConfCallNotification">
-                    { _t("Ongoing conference call%(supportedText)s.", {supportedText: supportedText}) }
-                    &nbsp;
-                    { joinNode }
-                </div>
-            );
-        }
-
         const callView = (
             <CallView
                 room={this.props.room}
-                ConferenceHandler={this.props.conferenceHandler}
                 onResize={this.props.onResize}
                 maxVideoHeight={this.props.maxHeight}
             />
@@ -206,7 +168,6 @@ export default class AuxPanel extends React.Component {
                 userId={this.props.userId}
                 maxHeight={this.props.maxHeight}
                 showApps={this.props.showApps}
-                hide={this.props.hideAppsDrawer}
                 resizeNotifier={this.props.resizeNotifier}
             />;
         }
@@ -276,7 +237,6 @@ export default class AuxPanel extends React.Component {
                 { appsDrawer }
                 { fileDropTarget }
                 { callView }
-                { conferenceCallNotification }
                 { this.props.children }
             </AutoHideScrollbar>
         );

src/components/views/rooms/BasicMessageComposer.tsx

@@ -92,7 +92,7 @@ interface IProps {
     label?: string;
     initialCaret?: DocumentOffset;
 
-    onChange();
+    onChange?();
     onPaste?(event: ClipboardEvent<HTMLDivElement>, model: EditorModel): boolean;
 }
 
@@ -619,13 +619,14 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     private onFormatAction = (action: Formatting) => {
-        const range = getRangeForSelection(
-            this.editorRef.current,
-            this.props.model,
-            document.getSelection());
+        const range = getRangeForSelection(this.editorRef.current, this.props.model, document.getSelection());
+        // trim the range as we want it to exclude leading/trailing spaces
+        range.trim();
+
         if (range.length === 0) {
             return;
         }
+
         this.historyManager.ensureLastChangesPushed(this.props.model);
         this.modifiedFlag = true;
         switch (action) {

src/components/views/rooms/EventTile.js

@@ -34,6 +34,7 @@ import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {E2E_STATE} from "./E2EIcon";
 import {toRem} from "../../../utils/units";
+import {WidgetType} from "../../../widgets/WidgetType";
 import RoomAvatar from "../avatars/RoomAvatar";
 
 const eventTileTypes = {
@@ -45,6 +46,7 @@ const eventTileTypes = {
     'm.call.invite': 'messages.TextualEvent',
     'm.call.answer': 'messages.TextualEvent',
     'm.call.hangup': 'messages.TextualEvent',
+    'm.call.reject': 'messages.TextualEvent',
 };
 
 const stateEventTileTypes = {
@@ -111,6 +113,19 @@ export function getHandlerTile(ev) {
         }
     }
 
+    // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
+    if (type === "im.vector.modular.widgets") {
+        let type = ev.getContent()['type'];
+        if (!type) {
+            // deleted/invalid widget - try the past widget type
+            type = ev.getPrevContent()['type'];
+        }
+
+        if (WidgetType.JITSI.matches(type)) {
+            return "messages.MJitsiWidgetEvent";
+        }
+    }
+
     return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
 }
 
@@ -627,22 +642,23 @@ export default class EventTile extends React.Component {
         const msgtype = content.msgtype;
         const eventType = this.props.mxEvent.getType();
 
+        let tileHandler = getHandlerTile(this.props.mxEvent);
+
         // Info messages are basically information about commands processed on a room
         const isBubbleMessage = eventType.startsWith("m.key.verification") ||
             (eventType === "m.room.message" && msgtype && msgtype.startsWith("m.key.verification")) ||
-            (eventType === "m.room.encryption");
+            (eventType === "m.room.encryption") ||
+            (tileHandler === "messages.MJitsiWidgetEvent");
         let isInfoMessage = (
             !isBubbleMessage && eventType !== 'm.room.message' &&
             eventType !== 'm.sticker' && eventType !== 'm.room.create'
         );
 
-        let tileHandler = getHandlerTile(this.props.mxEvent);
         // If we're showing hidden events in the timeline, we should use the
         // source tile when there's no regular tile for an event and also for
         // replace relations (which otherwise would display as a confusing
         // duplicate of the thing they are replacing).
-        const useSource = !tileHandler || this.props.mxEvent.isRelation("m.replace");
-        if (useSource && SettingsStore.getValue("showHiddenEventsInTimeline")) {
+        if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(this.props.mxEvent)) {
             tileHandler = "messages.ViewSourceEvent";
             // Reuse info message avatar and sender profile styling
             isInfoMessage = true;
@@ -902,6 +918,7 @@ export default class EventTile extends React.Component {
                                            highlights={this.props.highlights}
                                            highlightLink={this.props.highlightLink}
                                            onHeightChanged={this.props.onHeightChanged}
+                                           replacingEventId={this.props.replacingEventId}
                                            showUrlPreview={false} />
                         </div>
                     </div>

src/components/views/rooms/ForwardMessage.js

@@ -18,7 +18,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher/dispatcher';
 import {Key} from '../../../Keyboard';
 
 
@@ -28,19 +27,10 @@ export default class ForwardMessage extends React.Component {
     };
 
     componentDidMount() {
-        dis.dispatch({
-            action: 'panel_disable',
-            middleDisabled: true,
-        });
-
         document.addEventListener('keydown', this._onKeyDown);
     }
 
     componentWillUnmount() {
-        dis.dispatch({
-            action: 'panel_disable',
-            middleDisabled: false,
-        });
         document.removeEventListener('keydown', this._onKeyDown);
     }
 

src/components/views/rooms/MemberList.js

@@ -24,7 +24,6 @@ import {isValid3pidInvite} from "../../../RoomInvite";
 import rate_limited_func from "../../../ratelimitedfunc";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import * as sdk from "../../../index";
-import CallHandler from "../../../CallHandler";
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
 import BaseCard from "../right_panel/BaseCard";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
@@ -122,8 +121,8 @@ export default class MemberList extends React.Component {
                     this.setState(this._getMembersState(this.roomMembers()));
                     this._listenForMembersChanges();
                 }
-            } else if (membership === "invite") {
-                // show the members we've got when invited
+            } else {
+                // show the members we already have loaded
                 this.setState(this._getMembersState(this.roomMembers()));
             }
         }
@@ -233,15 +232,10 @@ export default class MemberList extends React.Component {
     }
 
     roomMembers() {
-        const ConferenceHandler = CallHandler.getConferenceHandler();
-
         const allMembers = this.getMembersWithUser();
         const filteredAndSortedMembers = allMembers.filter((m) => {
             return (
                 m.membership === 'join' || m.membership === 'invite'
-            ) && (
-                !ConferenceHandler ||
-                (ConferenceHandler && !ConferenceHandler.isConferenceUser(m.userId))
             );
         });
         filteredAndSortedMembers.sort(this.memberSort);

src/components/views/rooms/MessageComposer.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017, 2018 New Vector Ltd
+Copyright 2020 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.
@@ -32,6 +33,12 @@ import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ReplyPreview from "./ReplyPreview";
 import {UIFeature} from "../../../settings/UIFeature";
+import WidgetStore from "../../../stores/WidgetStore";
+import WidgetUtils from "../../../utils/WidgetUtils";
+import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
+import { PlaceCallType } from "../../../CallHandler";
+import { CallState } from 'matrix-js-sdk/src/webrtc/call';
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -48,7 +55,7 @@ function CallButton(props) {
     const onVoiceCallClick = (ev) => {
         dis.dispatch({
             action: 'place_call',
-            type: "voice",
+            type: PlaceCallType.Voice,
             room_id: props.roomId,
         });
     };
@@ -68,7 +75,7 @@ function VideoCallButton(props) {
     const onCallClick = (ev) => {
         dis.dispatch({
             action: 'place_call',
-            type: ev.shiftKey ? "screensharing" : "video",
+            type: ev.shiftKey ? PlaceCallType.ScreenSharing : PlaceCallType.Video,
             room_id: props.roomId,
         });
     };
@@ -85,27 +92,51 @@ VideoCallButton.propTypes = {
 };
 
 function HangupButton(props) {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
     const onHangupClick = () => {
-        const call = CallHandler.getCallForRoom(props.roomId);
+        if (props.isConference) {
+            dis.dispatch({
+                action: props.canEndConference ? 'end_conference' : 'hangup_conference',
+                room_id: props.roomId,
+            });
+            return;
+        }
+
+        const call = CallHandler.sharedInstance().getCallForRoom(props.roomId);
         if (!call) {
             return;
         }
+
+        const action = call.state === CallState.Ringing ? 'reject' : 'hangup';
+
         dis.dispatch({
-            action: 'hangup',
+            action,
             // hangup the call for this room, which may not be the room in props
             // (e.g. conferences which will hangup the 1:1 room instead)
             room_id: call.roomId,
         });
     };
-    return (<AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_hangup"
+
+    let tooltip = _t("Hangup");
+    if (props.isConference && props.canEndConference) {
+        tooltip = _t("End conference");
+    }
+
+    const canLeaveConference = !props.isConference ? true : props.isInConference;
+    return (
+        <AccessibleTooltipButton
+            className="mx_MessageComposer_button mx_MessageComposer_hangup"
             onClick={onHangupClick}
-            title={_t('Hangup')}
-        />);
+            title={tooltip}
+            disabled={!canLeaveConference}
+        />
+    );
 }
 
 HangupButton.propTypes = {
     roomId: PropTypes.string.isRequired,
+    isConference: PropTypes.bool.isRequired,
+    canEndConference: PropTypes.bool,
+    isInConference: PropTypes.bool,
 };
 
 const EmojiButton = ({addEmoji}) => {
@@ -226,12 +257,17 @@ export default class MessageComposer extends React.Component {
         this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
         this._onTombstoneClick = this._onTombstoneClick.bind(this);
         this.renderPlaceholderText = this.renderPlaceholderText.bind(this);
+        WidgetStore.instance.on(UPDATE_EVENT, this._onWidgetUpdate);
+        ActiveWidgetStore.on('update', this._onActiveWidgetUpdate);
         this._dispatcherRef = null;
+
         this.state = {
-            isQuoting: Boolean(RoomViewStore.getQuotingEvent()),
+            replyToEvent: RoomViewStore.getQuotingEvent(),
             tombstone: this._getRoomTombstone(),
             canSendMessages: this.props.room.maySendMessage(),
             showCallButtons: SettingsStore.getValue("showCallButtonsInComposer"),
+            hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room),
+            joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room),
         };
     }
 
@@ -247,6 +283,14 @@ export default class MessageComposer extends React.Component {
         }
     };
 
+    _onWidgetUpdate = () => {
+        this.setState({hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room)});
+    };
+
+    _onActiveWidgetUpdate = () => {
+        this.setState({joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room)});
+    };
+
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
@@ -277,6 +321,8 @@ export default class MessageComposer extends React.Component {
         if (this._roomStoreToken) {
             this._roomStoreToken.remove();
         }
+        WidgetStore.instance.removeListener(UPDATE_EVENT, this._onWidgetUpdate);
+        ActiveWidgetStore.removeListener('update', this._onActiveWidgetUpdate);
         dis.unregister(this.dispatcherRef);
     }
 
@@ -296,9 +342,9 @@ export default class MessageComposer extends React.Component {
     }
 
     _onRoomViewStoreUpdate() {
-        const isQuoting = Boolean(RoomViewStore.getQuotingEvent());
-        if (this.state.isQuoting === isQuoting) return;
-        this.setState({ isQuoting });
+        const replyToEvent = RoomViewStore.getQuotingEvent();
+        if (this.state.replyToEvent === replyToEvent) return;
+        this.setState({ replyToEvent });
     }
 
     onInputStateChanged(inputState) {
@@ -337,7 +383,7 @@ export default class MessageComposer extends React.Component {
     }
 
     renderPlaceholderText() {
-        if (this.state.isQuoting) {
+        if (this.state.replyToEvent) {
             if (this.props.e2eStatus) {
                 return _t('Send an encrypted reply…');
             } else {
@@ -382,7 +428,9 @@ export default class MessageComposer extends React.Component {
                     room={this.props.room}
                     placeholder={this.renderPlaceholderText()}
                     resizeNotifier={this.props.resizeNotifier}
-                    permalinkCreator={this.props.permalinkCreator} />,
+                    permalinkCreator={this.props.permalinkCreator}
+                    replyToEvent={this.state.replyToEvent}
+                />,
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
                 <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
             );
@@ -392,9 +440,20 @@ export default class MessageComposer extends React.Component {
             }
 
             if (this.state.showCallButtons) {
-                if (callInProgress) {
+                if (this.state.hasConference) {
+                    const canEndConf = WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
                     controls.push(
-                        <HangupButton key="controls_hangup" roomId={this.props.room.roomId} />,
+                        <HangupButton
+                            key="controls_hangup"
+                            roomId={this.props.room.roomId}
+                            isConference={true}
+                            canEndConference={canEndConf}
+                            isInConference={this.state.joinedConference}
+                        />,
+                    );
+                } else if (callInProgress) {
+                    controls.push(
+                        <HangupButton key="controls_hangup" roomId={this.props.room.roomId} isConference={false} />,
                     );
                 } else {
                     controls.push(

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -76,7 +76,7 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
     };
 
     private viewRoom = (room: Room, index: number) => {
-        Analytics.trackEvent("Breadcrumbs", "click_node", index);
+        Analytics.trackEvent("Breadcrumbs", "click_node", String(index));
         defaultDispatcher.dispatch({action: "view_room", room_id: room.roomId});
     };
 

src/components/views/rooms/RoomSublist.tsx

@@ -399,6 +399,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
         const newAlgorithm = isUnreadFirst ? ListAlgorithm.Natural : ListAlgorithm.Importance;
         await RoomListStore.instance.setListOrder(this.props.tagId, newAlgorithm);
+        this.forceUpdate(); // because if the sublist doesn't have any changes then we will miss the list order change
     };
 
     private onTagSortChanged = async (sort: SortAlgorithm) => {

src/components/views/rooms/RoomUpgradeWarningBar.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018-2020 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -28,6 +28,11 @@ export default class RoomUpgradeWarningBar extends React.Component {
         recommendation: PropTypes.object.isRequired,
     };
 
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
     componentDidMount() {
         const tombstone = this.props.room.currentState.getStateEvents("m.room.tombstone", "");
         this.setState({upgraded: tombstone && tombstone.getContent().replacement_room});
@@ -35,6 +40,13 @@ export default class RoomUpgradeWarningBar extends React.Component {
         MatrixClientPeg.get().on("RoomState.events", this._onStateEvents);
     }
 
+    componentWillUnmount() {
+        const cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener("RoomState.events", this._onStateEvents);
+        }
+    }
+
     _onStateEvents = (event, state) => {
         if (!this.props.room || event.getRoomId() !== this.props.room.roomId) {
             return;

src/components/views/rooms/SearchBar.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,6 +20,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import classNames from "classnames";
 import { _t } from '../../../languageHandler';
 import {Key} from "../../../Keyboard";
+import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice";
 
 export default class SearchBar extends React.Component {
     constructor(props) {
@@ -72,21 +74,24 @@ export default class SearchBar extends React.Component {
         });
 
         return (
-            <div className="mx_SearchBar">
-                <div className="mx_SearchBar_buttons" role="radiogroup">
-                    <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick} aria-checked={this.state.scope === 'Room'} role="radio">
-                        {_t("This Room")}
-                    </AccessibleButton>
-                    <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick} aria-checked={this.state.scope === 'All'} role="radio">
-                        {_t("All Rooms")}
-                    </AccessibleButton>
+            <>
+                <div className="mx_SearchBar">
+                    <div className="mx_SearchBar_buttons" role="radiogroup">
+                        <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick} aria-checked={this.state.scope === 'Room'} role="radio">
+                            {_t("This Room")}
+                        </AccessibleButton>
+                        <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick} aria-checked={this.state.scope === 'All'} role="radio">
+                            {_t("All Rooms")}
+                        </AccessibleButton>
+                    </div>
+                    <div className="mx_SearchBar_input mx_textinput">
+                        <input ref={this._search_term} type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
+                        <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch} />
+                    </div>
+                    <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />
                 </div>
-                <div className="mx_SearchBar_input mx_textinput">
-                    <input ref={this._search_term} type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
-                    <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch} />
-                </div>
-                <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />
-            </div>
+                <DesktopBuildsNotice isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} />
+            </>
         );
     }
 }

src/components/views/rooms/SendMessageComposer.js

@@ -29,7 +29,6 @@ import {
 } from '../../../editor/serialize';
 import {CommandPartCreator} from '../../../editor/parts';
 import BasicMessageComposer from "./BasicMessageComposer";
-import RoomViewStore from '../../../stores/RoomViewStore';
 import ReplyThread from "../elements/ReplyThread";
 import {parseEvent} from '../../../editor/deserialize';
 import {findEditableEvent} from '../../../utils/EventUtils';
@@ -41,7 +40,6 @@ import {_t, _td} from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
 import {Key} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import {Action} from "../../../dispatcher/actions";
 
@@ -61,7 +59,7 @@ function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
 }
 
 // exported for tests
-export function createMessageContent(model, permalinkCreator) {
+export function createMessageContent(model, permalinkCreator, replyToEvent) {
     const isEmote = containsEmote(model);
     if (isEmote) {
         model = stripEmoteCommand(model);
@@ -70,21 +68,20 @@ export function createMessageContent(model, permalinkCreator) {
         model = stripPrefix(model, "/");
     }
     model = unescapeMessage(model);
-    const repliedToEvent = RoomViewStore.getQuotingEvent();
 
     const body = textSerialize(model);
     const content = {
         msgtype: isEmote ? "m.emote" : "m.text",
         body: body,
     };
-    const formattedBody = htmlSerializeIfNeeded(model, {forceHTML: !!repliedToEvent});
+    const formattedBody = htmlSerializeIfNeeded(model, {forceHTML: !!replyToEvent});
     if (formattedBody) {
         content.format = "org.matrix.custom.html";
         content.formatted_body = formattedBody;
     }
 
-    if (repliedToEvent) {
-        addReplyToMessageContent(content, repliedToEvent, permalinkCreator);
+    if (replyToEvent) {
+        addReplyToMessageContent(content, replyToEvent, permalinkCreator);
     }
 
     return content;
@@ -95,6 +92,7 @@ export default class SendMessageComposer extends React.Component {
         room: PropTypes.object.isRequired,
         placeholder: PropTypes.string,
         permalinkCreator: PropTypes.object.isRequired,
+        replyToEvent: PropTypes.object,
     };
 
     static contextType = MatrixClientContext;
@@ -104,12 +102,13 @@ export default class SendMessageComposer extends React.Component {
         this.model = null;
         this._editorRef = null;
         this.currentlyComposedEditorState = null;
-        const cli = MatrixClientPeg.get();
-        if (cli.isCryptoEnabled() && cli.isRoomEncrypted(this.props.room.roomId)) {
+        if (this.context.isCryptoEnabled() && this.context.isRoomEncrypted(this.props.room.roomId)) {
             this._prepareToEncrypt = new RateLimitedFunc(() => {
-                cli.prepareToEncrypt(this.props.room);
+                this.context.prepareToEncrypt(this.props.room);
             }, 60000);
         }
+
+        window.addEventListener("beforeunload", this._saveStoredEditorState);
     }
 
     _setEditorRef = ref => {
@@ -145,7 +144,7 @@ export default class SendMessageComposer extends React.Component {
         if (e.shiftKey || e.metaKey) return;
 
         const shouldSelectHistory = e.altKey && e.ctrlKey;
-        const shouldEditLastMessage = !e.altKey && !e.ctrlKey && up && !RoomViewStore.getQuotingEvent();
+        const shouldEditLastMessage = !e.altKey && !e.ctrlKey && up && !this.props.replyToEvent;
 
         if (shouldSelectHistory) {
             // Try select composer history
@@ -187,9 +186,13 @@ export default class SendMessageComposer extends React.Component {
             this.sendHistoryManager.currentIndex = this.sendHistoryManager.history.length;
             return;
         }
-        const serializedParts = this.sendHistoryManager.getItem(delta);
-        if (serializedParts) {
-            this.model.reset(serializedParts);
+        const {parts, replyEventId} = this.sendHistoryManager.getItem(delta);
+        dis.dispatch({
+            action: 'reply_to_event',
+            event: replyEventId ? this.props.room.findEventById(replyEventId) : null,
+        });
+        if (parts) {
+            this.model.reset(parts);
             this._editorRef.focus();
         }
     }
@@ -299,12 +302,12 @@ export default class SendMessageComposer extends React.Component {
             }
         }
 
+        const replyToEvent = this.props.replyToEvent;
         if (shouldSend) {
-            const isReply = !!RoomViewStore.getQuotingEvent();
             const {roomId} = this.props.room;
-            const content = createMessageContent(this.model, this.props.permalinkCreator);
+            const content = createMessageContent(this.model, this.props.permalinkCreator, replyToEvent);
             this.context.sendMessage(roomId, content);
-            if (isReply) {
+            if (replyToEvent) {
                 // Clear reply_to_event as we put the message into the queue
                 // if the send fails, retry will handle resending.
                 dis.dispatch({
@@ -315,7 +318,7 @@ export default class SendMessageComposer extends React.Component {
             dis.dispatch({action: "message_sent"});
         }
 
-        this.sendHistoryManager.save(this.model);
+        this.sendHistoryManager.save(this.model, replyToEvent);
         // clear composer
         this.model.reset([]);
         this._editorRef.clearUndoHistory();
@@ -325,6 +328,8 @@ export default class SendMessageComposer extends React.Component {
 
     componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
+        window.removeEventListener("beforeunload", this._saveStoredEditorState);
+        this._saveStoredEditorState();
     }
 
     // TODO: [REACT-WARNING] Move this to constructor
@@ -333,11 +338,11 @@ export default class SendMessageComposer extends React.Component {
         const parts = this._restoreStoredEditorState(partCreator) || [];
         this.model = new EditorModel(parts, partCreator);
         this.dispatcherRef = dis.register(this.onAction);
-        this.sendHistoryManager = new SendHistoryManager(this.props.room.roomId, 'mx_cider_composer_history_');
+        this.sendHistoryManager = new SendHistoryManager(this.props.room.roomId, 'mx_cider_history_');
     }
 
     get _editorStateKey() {
-        return `cider_editor_state_${this.props.room.roomId}`;
+        return `mx_cider_state_${this.props.room.roomId}`;
     }
 
     _clearStoredEditorState() {
@@ -347,9 +352,19 @@ export default class SendMessageComposer extends React.Component {
     _restoreStoredEditorState(partCreator) {
         const json = localStorage.getItem(this._editorStateKey);
         if (json) {
-            const serializedParts = JSON.parse(json);
-            const parts = serializedParts.map(p => partCreator.deserializePart(p));
-            return parts;
+            try {
+                const {parts: serializedParts, replyEventId} = JSON.parse(json);
+                const parts = serializedParts.map(p => partCreator.deserializePart(p));
+                if (replyEventId) {
+                    dis.dispatch({
+                        action: 'reply_to_event',
+                        event: this.props.room.findEventById(replyEventId),
+                    });
+                }
+                return parts;
+            } catch (e) {
+                console.error(e);
+            }
         }
     }
 
@@ -357,7 +372,8 @@ export default class SendMessageComposer extends React.Component {
         if (this.model.isEmpty) {
             this._clearStoredEditorState();
         } else {
-            localStorage.setItem(this._editorStateKey, JSON.stringify(this.model.serializeParts()));
+            const item = SendHistoryManager.createItem(this.model, this.props.replyToEvent);
+            localStorage.setItem(this._editorStateKey, JSON.stringify(item));
         }
     }
 
@@ -449,7 +465,6 @@ export default class SendMessageComposer extends React.Component {
                     room={this.props.room}
                     label={this.props.placeholder}
                     placeholder={this.props.placeholder}
-                    onChange={this._saveStoredEditorState}
                     onPaste={this._onPaste}
                 />
             </div>

src/components/views/rooms/Stickerpicker.js

@@ -22,7 +22,6 @@ import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
 import WidgetUtils from '../../../utils/WidgetUtils';
-import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import PersistedElement from "../elements/PersistedElement";
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -30,6 +29,7 @@ import {ContextMenu} from "../../structures/ContextMenu";
 import {WidgetType} from "../../../widgets/WidgetType";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {Action} from "../../../dispatcher/actions";
+import {WidgetMessagingStore} from "../../../stores/widgets/WidgetMessagingStore";
 
 // This should be below the dialog level (4000), but above the rest of the UI (1000-2000).
 // We sit in a context menu, so this should be given to the context menu.
@@ -212,9 +212,11 @@ export default class Stickerpicker extends React.Component {
 
     _sendVisibilityToWidget(visible) {
         if (!this.state.stickerpickerWidget) return;
-        const widgetMessaging = ActiveWidgetStore.getWidgetMessaging(this.state.stickerpickerWidget.id);
-        if (widgetMessaging && visible !== this._prevSentVisibility) {
-            widgetMessaging.sendVisibility(visible);
+        const messaging = WidgetMessagingStore.instance.getMessagingForId(this.state.stickerpickerWidget.id);
+        if (messaging && visible !== this._prevSentVisibility) {
+            messaging.updateVisibility(visible).catch(err => {
+                console.error("Error updating widget visibility: ", err);
+            });
             this._prevSentVisibility = visible;
         }
     }

src/components/views/settings/AvatarSetting.js

@@ -14,25 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback} from "react";
+import React, {useState} from "react";
 import PropTypes from "prop-types";
-
-import * as sdk from "../../../index";
 import {_t} from "../../../languageHandler";
-import Modal from "../../../Modal";
+import AccessibleButton from "../elements/AccessibleButton";
+import classNames from "classnames";
 
 const AvatarSetting = ({avatarUrl, avatarAltText, avatarName, uploadAvatar, removeAvatar}) => {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+    const [isHovering, setIsHovering] = useState(false);
+    const hoveringProps = {
+        onMouseEnter: () => setIsHovering(true),
+        onMouseLeave: () => setIsHovering(false),
+    };
 
-    const openImageView = useCallback(() => {
-        const ImageView = sdk.getComponent("elements.ImageView");
-        Modal.createDialog(ImageView, {
-            src: avatarUrl,
-            name: avatarName,
-        }, "mx_Dialog_lightbox");
-    }, [avatarUrl, avatarName]);
-
-    let avatarElement = <div className="mx_AvatarSetting_avatarPlaceholder" />;
+    let avatarElement = <AccessibleButton
+        element="div"
+        onClick={uploadAvatar}
+        className="mx_AvatarSetting_avatarPlaceholder"
+        {...hoveringProps}
+    />;
     if (avatarUrl) {
         avatarElement = (
             <AccessibleButton
@@ -40,16 +40,20 @@ const AvatarSetting = ({avatarUrl, avatarAltText, avatarName, uploadAvatar, remo
                 src={avatarUrl}
                 alt={avatarAltText}
                 aria-label={avatarAltText}
-                onClick={openImageView} />
+                onClick={uploadAvatar}
+                {...hoveringProps}
+            />
         );
     }
 
     let uploadAvatarBtn;
     if (uploadAvatar) {
         // insert an empty div to be the host for a css mask containing the upload.svg
-        uploadAvatarBtn = <AccessibleButton onClick={uploadAvatar} kind="primary">
-            {_t("Upload")}
-        </AccessibleButton>;
+        uploadAvatarBtn = <AccessibleButton
+            onClick={uploadAvatar}
+            className='mx_AvatarSetting_uploadButton'
+            {...hoveringProps}
+        />;
     }
 
     let removeAvatarBtn;
@@ -59,10 +63,18 @@ const AvatarSetting = ({avatarUrl, avatarAltText, avatarName, uploadAvatar, remo
         </AccessibleButton>;
     }
 
-    return <div className="mx_AvatarSetting_avatar">
-        { avatarElement }
-        { uploadAvatarBtn }
-        { removeAvatarBtn }
+    const avatarClasses = classNames({
+        "mx_AvatarSetting_avatar": true,
+        "mx_AvatarSetting_avatar_hovering": isHovering,
+    });
+    return <div className={avatarClasses}>
+        {avatarElement}
+        <div className="mx_AvatarSetting_hover">
+            <div className="mx_AvatarSetting_hoverBg" />
+            <span>{_t("Upload")}</span>
+        </div>
+        {uploadAvatarBtn}
+        {removeAvatarBtn}
     </div>;
 };
 

src/components/views/settings/ChangePassword.js

@@ -19,14 +19,12 @@ import Field from "../elements/Field";
 import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import dis from "../../../dispatcher/dispatcher";
 import AccessibleButton from '../elements/AccessibleButton';
+import Spinner from '../elements/Spinner';
 import { _t } from '../../../languageHandler';
 import * as sdk from "../../../index";
 import Modal from "../../../Modal";
 
-import sessionStore from '../../../stores/SessionStore';
-
 export default class ChangePassword extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func,
@@ -35,6 +33,7 @@ export default class ChangePassword extends React.Component {
         rowClassName: PropTypes.string,
         buttonClassName: PropTypes.string,
         buttonKind: PropTypes.string,
+        buttonLabel: PropTypes.string,
         confirm: PropTypes.bool,
         // Whether to autoFocus the new password input
         autoFocusNewPasswordInput: PropTypes.bool,
@@ -65,33 +64,11 @@ export default class ChangePassword extends React.Component {
 
     state = {
         phase: ChangePassword.Phases.Edit,
-        cachedPassword: null,
         oldPassword: "",
         newPassword: "",
         newPasswordConfirm: "",
     };
 
-    componentDidMount() {
-        this._sessionStore = sessionStore;
-        this._sessionStoreToken = this._sessionStore.addListener(
-            this._setStateFromSessionStore,
-        );
-
-        this._setStateFromSessionStore();
-    }
-
-    componentWillUnmount() {
-        if (this._sessionStoreToken) {
-            this._sessionStoreToken.remove();
-        }
-    }
-
-    _setStateFromSessionStore = () => {
-        this.setState({
-            cachedPassword: this._sessionStore.getCachedPassword(),
-        });
-    };
-
     changePassword(oldPassword, newPassword) {
         const cli = MatrixClientPeg.get();
 
@@ -118,8 +95,11 @@ export default class ChangePassword extends React.Component {
                 </div>,
             button: _t("Continue"),
             extraButtons: [
-                <button className="mx_Dialog_primary"
-                        onClick={this._onExportE2eKeysClicked}>
+                <button
+                    key="exportRoomKeys"
+                    className="mx_Dialog_primary"
+                    onClick={this._onExportE2eKeysClicked}
+                >
                     { _t('Export E2E room keys') }
                 </button>,
             ],
@@ -149,9 +129,6 @@ export default class ChangePassword extends React.Component {
         });
 
         cli.setPassword(authDict, newPassword).then(() => {
-            // Notify SessionStore that the user's password was changed
-            dis.dispatch({action: 'password_changed'});
-
             if (this.props.shouldAskForEmail) {
                 return this._optionallySetEmail().then((confirmed) => {
                     this.props.onFinished({
@@ -211,7 +188,7 @@ export default class ChangePassword extends React.Component {
 
     onClickChange = (ev) => {
         ev.preventDefault();
-        const oldPassword = this.state.cachedPassword || this.state.oldPassword;
+        const oldPassword = this.state.oldPassword;
         const newPassword = this.state.newPassword;
         const confirmPassword = this.state.newPasswordConfirm;
         const err = this.props.onCheckPassword(
@@ -230,31 +207,22 @@ export default class ChangePassword extends React.Component {
         const rowClassName = this.props.rowClassName;
         const buttonClassName = this.props.buttonClassName;
 
-        let currentPassword = null;
-        if (!this.state.cachedPassword) {
-            currentPassword = (
-                <div className={rowClassName}>
-                    <Field
-                        type="password"
-                        label={_t('Current password')}
-                        value={this.state.oldPassword}
-                        onChange={this.onChangeOldPassword}
-                    />
-                </div>
-            );
-        }
-
         switch (this.state.phase) {
             case ChangePassword.Phases.Edit:
-                const passwordLabel = this.state.cachedPassword ?
-                    _t('Password') : _t('New Password');
                 return (
                     <form className={this.props.className} onSubmit={this.onClickChange}>
-                        { currentPassword }
                         <div className={rowClassName}>
                             <Field
                                 type="password"
-                                label={passwordLabel}
+                                label={_t('Current password')}
+                                value={this.state.oldPassword}
+                                onChange={this.onChangeOldPassword}
+                            />
+                        </div>
+                        <div className={rowClassName}>
+                            <Field
+                                type="password"
+                                label={_t('New Password')}
                                 value={this.state.newPassword}
                                 autoFocus={this.props.autoFocusNewPasswordInput}
                                 onChange={this.onChangeNewPassword}
@@ -271,15 +239,14 @@ export default class ChangePassword extends React.Component {
                             />
                         </div>
                         <AccessibleButton className={buttonClassName} kind={this.props.buttonKind} onClick={this.onClickChange}>
-                            { _t('Change Password') }
+                            { this.props.buttonLabel || _t('Change Password') }
                         </AccessibleButton>
                     </form>
                 );
             case ChangePassword.Phases.Uploading:
-                var Loader = sdk.getComponent("elements.Spinner");
                 return (
                     <div className="mx_Dialog_content">
-                        <Loader />
+                        <Spinner />
                     </div>
                 );
         }

src/components/views/settings/IntegrationManager.js

@@ -42,6 +42,14 @@ export default class IntegrationManager extends React.Component {
         loading: false,
     };
 
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            errored: false,
+        };
+    }
+
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         document.addEventListener("keydown", this.onKeyDown);
@@ -66,6 +74,10 @@ export default class IntegrationManager extends React.Component {
         }
     };
 
+    onError = () => {
+        this.setState({ errored: true });
+    };
+
     render() {
         if (this.props.loading) {
             const Spinner = sdk.getComponent("elements.Spinner");
@@ -77,7 +89,7 @@ export default class IntegrationManager extends React.Component {
             );
         }
 
-        if (!this.props.connected) {
+        if (!this.props.connected || this.state.errored) {
             return (
                 <div className='mx_IntegrationManager_error'>
                     <h3>{_t("Cannot connect to integration manager")}</h3>
@@ -86,6 +98,6 @@ export default class IntegrationManager extends React.Component {
             );
         }
 
-        return <iframe src={this.props.url}></iframe>;
+        return <iframe src={this.props.url} onError={this.onError} />;
     }
 }

src/components/views/settings/ProfileSettings.js

@@ -18,30 +18,23 @@ import React, {createRef} from 'react';
 import {_t} from "../../../languageHandler";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import Field from "../elements/Field";
-import {User} from "matrix-js-sdk";
 import { getHostingLink } from '../../../utils/HostingLink';
 import * as sdk from "../../../index";
+import {OwnProfileStore} from "../../../stores/OwnProfileStore";
+import Modal from "../../../Modal";
+import ErrorDialog from "../dialogs/ErrorDialog";
 
 export default class ProfileSettings extends React.Component {
     constructor() {
         super();
 
         const client = MatrixClientPeg.get();
-        let user = client.getUser(client.getUserId());
-        if (!user) {
-            // XXX: We shouldn't have to do this.
-            // There seems to be a condition where the User object won't exist until a room
-            // exists on the account. To work around this, we'll just create a temporary User
-            // and use that.
-            console.warn("User object not found - creating one for ProfileSettings");
-            user = new User(client.getUserId());
-        }
-        let avatarUrl = user.avatarUrl;
+        let avatarUrl = OwnProfileStore.instance.avatarMxc;
         if (avatarUrl) avatarUrl = client.mxcUrlToHttp(avatarUrl, 96, 96, 'crop', false);
         this.state = {
-            userId: user.userId,
-            originalDisplayName: user.rawDisplayName,
-            displayName: user.rawDisplayName,
+            userId: client.getUserId(),
+            originalDisplayName: OwnProfileStore.instance.displayName,
+            displayName: OwnProfileStore.instance.displayName,
             originalAvatarUrl: avatarUrl,
             avatarUrl: avatarUrl,
             avatarFile: null,
@@ -65,6 +58,15 @@ export default class ProfileSettings extends React.Component {
         });
     };
 
+    _clearProfile = async (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (!this.state.enableProfileSave) return;
+        this._removeAvatar();
+        this.setState({enableProfileSave: false, displayName: this.state.originalDisplayName});
+    };
+
     _saveProfile = async (e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -75,21 +77,26 @@ export default class ProfileSettings extends React.Component {
         const client = MatrixClientPeg.get();
         const newState = {};
 
-        // TODO: What do we do about errors?
+        try {
+            if (this.state.originalDisplayName !== this.state.displayName) {
+                await client.setDisplayName(this.state.displayName);
+                newState.originalDisplayName = this.state.displayName;
+            }
 
-        if (this.state.originalDisplayName !== this.state.displayName) {
-            await client.setDisplayName(this.state.displayName);
-            newState.originalDisplayName = this.state.displayName;
-        }
-
-        if (this.state.avatarFile) {
-            const uri = await client.uploadContent(this.state.avatarFile);
-            await client.setAvatarUrl(uri);
-            newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
-            newState.originalAvatarUrl = newState.avatarUrl;
-            newState.avatarFile = null;
-        } else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
-            await client.setAvatarUrl(""); // use empty string as Synapse 500s on undefined
+            if (this.state.avatarFile) {
+                const uri = await client.uploadContent(this.state.avatarFile);
+                await client.setAvatarUrl(uri);
+                newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
+                newState.originalAvatarUrl = newState.avatarUrl;
+                newState.avatarFile = null;
+            } else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
+                await client.setAvatarUrl(""); // use empty string as Synapse 500s on undefined
+            }
+        } catch (err) {
+            Modal.createTrackedDialog('Failed to save profile', '', ErrorDialog, {
+                title: _t("Failed to save your profile"),
+                description: ((err && err.message) ? err.message : _t("The operation could not be completed")),
+            });
         }
 
         this.setState(newState);
@@ -144,18 +151,27 @@ export default class ProfileSettings extends React.Component {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
         return (
-            <form onSubmit={this._saveProfile} autoComplete="off" noValidate={true}>
+            <form
+                onSubmit={this._saveProfile}
+                autoComplete="off"
+                noValidate={true}
+                className="mx_ProfileSettings_profileForm"
+            >
                 <input type="file" ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
                        onChange={this._onAvatarChanged} accept="image/*" />
                 <div className="mx_ProfileSettings_profile">
                     <div className="mx_ProfileSettings_controls">
+                        <span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
+                        <Field
+                            label={_t("Display Name")}
+                            type="text" value={this.state.displayName}
+                            autoComplete="off"
+                            onChange={this._onDisplayNameChanged}
+                        />
                         <p>
                             {this.state.userId}
                             {hostingSignup}
                         </p>
-                        <Field label={_t("Display Name")}
-                               type="text" value={this.state.displayName} autoComplete="off"
-                               onChange={this._onDisplayNameChanged} />
                     </div>
                     <AvatarSetting
                         avatarUrl={this.state.avatarUrl}
@@ -164,10 +180,22 @@ export default class ProfileSettings extends React.Component {
                         uploadAvatar={this._uploadAvatar}
                         removeAvatar={this._removeAvatar} />
                 </div>
-                <AccessibleButton onClick={this._saveProfile} kind="primary"
-                                  disabled={!this.state.enableProfileSave}>
-                    {_t("Save")}
-                </AccessibleButton>
+                <div className="mx_ProfileSettings_buttons">
+                    <AccessibleButton
+                        onClick={this._clearProfile}
+                        kind="link"
+                        disabled={!this.state.enableProfileSave}
+                    >
+                        {_t("Cancel")}
+                    </AccessibleButton>
+                    <AccessibleButton
+                        onClick={this._saveProfile}
+                        kind="primary"
+                        disabled={!this.state.enableProfileSave}
+                    >
+                        {_t("Save")}
+                    </AccessibleButton>
+                </div>
             </form>
         );
     }

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

@@ -239,7 +239,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                 defaultValue: 50,
             },
             "redact": {
-                desc: _t('Remove messages'),
+                desc: _t('Remove messages sent by others'),
                 defaultValue: 50,
             },
             "notifications.room": {

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

@@ -221,7 +221,6 @@ export default class GeneralUserSettingsTab extends React.Component {
     _renderProfileSection() {
         return (
             <div className="mx_SettingsTab_section">
-                <span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
                 <ProfileSettings />
             </div>
         );

src/components/views/voip/CallContainer.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from 'react';
 import IncomingCallBox from './IncomingCallBox';
 import CallPreview from './CallPreview';
-import * as VectorConferenceHandler from '../../../VectorConferenceHandler';
 
 interface IProps {
 
@@ -31,7 +30,7 @@ export default class CallContainer extends React.PureComponent<IProps, IState> {
     public render() {
         return <div className="mx_CallContainer">
             <IncomingCallBox />
-            <CallPreview ConferenceHandler={VectorConferenceHandler} />
+            <CallPreview />
         </div>;
     }
 }

src/components/views/voip/CallPreview.tsx

@@ -24,17 +24,14 @@ import dis from '../../../dispatcher/dispatcher';
 import { ActionPayload } from '../../../dispatcher/payloads';
 import PersistentApp from "../elements/PersistentApp";
 import SettingsStore from "../../../settings/SettingsStore";
+import { CallState, MatrixCall } from 'matrix-js-sdk/lib/webrtc/call';
 
 interface IProps {
-    // A Conference Handler implementation
-    // Must have a function signature:
-    //  getConferenceCallForRoom(roomId: string): MatrixCall
-    ConferenceHandler: any;
 }
 
 interface IState {
     roomId: string;
-    activeCall: any;
+    activeCall: MatrixCall;
 }
 
 export default class CallPreview extends React.Component<IProps, IState> {
@@ -47,7 +44,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
 
         this.state = {
             roomId: RoomViewStore.getRoomId(),
-            activeCall: CallHandler.getAnyActiveCall(),
+            activeCall: CallHandler.sharedInstance().getAnyActiveCall(),
         };
     }
 
@@ -77,27 +74,27 @@ export default class CallPreview extends React.Component<IProps, IState> {
             // may hide the global CallView if the call it is tracking is dead
             case 'call_state':
                 this.setState({
-                    activeCall: CallHandler.getAnyActiveCall(),
+                    activeCall: CallHandler.sharedInstance().getAnyActiveCall(),
                 });
                 break;
         }
     };
 
     private onCallViewClick = () => {
-        const call = CallHandler.getAnyActiveCall();
+        const call = CallHandler.sharedInstance().getAnyActiveCall();
         if (call) {
             dis.dispatch({
                 action: 'view_room',
-                room_id: call.groupRoomId || call.roomId,
+                room_id: call.roomId,
             });
         }
     };
 
     public render() {
-        const callForRoom = CallHandler.getCallForRoom(this.state.roomId);
+        const callForRoom = CallHandler.sharedInstance().getCallForRoom(this.state.roomId);
         const showCall = (
             this.state.activeCall &&
-            this.state.activeCall.call_state === 'connected' &&
+            this.state.activeCall.state === CallState.Connected &&
             !callForRoom
         );
 
@@ -106,7 +103,6 @@ export default class CallPreview extends React.Component<IProps, IState> {
                 <CallView
                     className="mx_CallPreview"
                     onClick={this.onCallViewClick}
-                    ConferenceHandler={this.props.ConferenceHandler}
                     showHangup={true}
                 />
             );