Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/17686

 Conflicts:

	src/components/views/dialogs/CreateRoomDialog.tsx

	src/components/views/dialogs/RoomUpgradeDialog.tsx

	src/components/views/dialogs/RoomUpgradeWarningDialog.tsx

	src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx

package.json

@@ -46,6 +46,7 @@
     "start:build": "babel src -w -s -d lib --verbose --extensions \".ts,.js\"",
     "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
     "lint:js": "eslint --max-warnings 0 src test",
+    "lint:js-fix": "eslint --fix src test",
     "lint:types": "tsc --noEmit --jsx react",
     "lint:style": "stylelint 'res/css/**/*.scss'",
     "test": "jest",
@@ -64,8 +65,8 @@
     "counterpart": "^0.18.6",
     "diff-dom": "^4.2.2",
     "diff-match-patch": "^1.0.5",
-    "emojibase-data": "^5.1.1",
+    "emojibase-data": "^6.2.0",
-    "emojibase-regex": "^4.1.1",
+    "emojibase-regex": "^5.1.3",
     "escape-html": "^1.0.3",
     "file-saver": "^2.0.5",
     "filesize": "6.1.0",

res/css/_components.scss

@@ -163,6 +163,7 @@
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
 @import "./views/messages/_EventTileBubble.scss";
+@import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
@@ -202,6 +203,7 @@
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
+@import "./views/rooms/_EventBubbleTile.scss";
 @import "./views/rooms/_GroupLayout.scss";
 @import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";

res/css/structures/_FilePanel.scss

@@ -118,10 +118,6 @@ limitations under the License.
     padding-left: 0px;
 }
 
-.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $primary-bg-color;
-}
-
 .mx_FilePanel_empty::before {
     mask-image: url('$(res)/img/element-icons/room/files.svg');
 }

res/css/views/avatars/_BaseAvatar.scss

@@ -27,6 +27,7 @@ limitations under the License.
     // https://bugzilla.mozilla.org/show_bug.cgi?id=255139
     display: inline-block;
     user-select: none;
+    line-height: 1;
 }
 
 .mx_BaseAvatar_initial {

res/css/views/elements/_InfoTooltip.scss

@@ -30,5 +30,12 @@ limitations under the License.
     mask-position: center;
     content: '';
     vertical-align: middle;
+}
+
+.mx_InfoTooltip_icon_info::before {
     mask-image: url('$(res)/img/element-icons/info.svg');
 }
+
+.mx_InfoTooltip_icon_warning::before {
+    mask-image: url('$(res)/img/element-icons/warning.svg');
+}

res/css/views/messages/_CallEvent.scss

@@ -0,0 +1,154 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CallEvent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    background-color: $dark-panel-bg-color;
+    border-radius: 8px;
+    margin: 10px auto;
+    max-width: 75%;
+    box-sizing: border-box;
+    height: 60px;
+
+    &.mx_CallEvent_voice {
+        .mx_CallEvent_type_icon::before,
+        .mx_CallEvent_content_button_callBack span::before,
+        .mx_CallEvent_content_button_answer span::before {
+            mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
+        }
+    }
+
+    &.mx_CallEvent_video {
+        .mx_CallEvent_type_icon::before,
+        .mx_CallEvent_content_button_callBack span::before,
+        .mx_CallEvent_content_button_answer span::before {
+            mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+        }
+    }
+
+    .mx_CallEvent_info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-left: 12px;
+
+        .mx_CallEvent_info_basic {
+            display: flex;
+            flex-direction: column;
+            margin-left: 10px; // To match mx_CallEvent
+
+            .mx_CallEvent_sender {
+                font-weight: 600;
+                font-size: 1.5rem;
+                line-height: 1.8rem;
+                margin-bottom: 3px;
+            }
+
+            .mx_CallEvent_type {
+                font-weight: 400;
+                color: $secondary-fg-color;
+                font-size: 1.2rem;
+                line-height: $font-13px;
+                display: flex;
+                align-items: center;
+
+                .mx_CallEvent_type_icon {
+                    height: 13px;
+                    width: 13px;
+                    margin-right: 5px;
+
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        height: 13px;
+                        width: 13px;
+                        background-color: $tertiary-fg-color;
+                        mask-repeat: no-repeat;
+                        mask-size: contain;
+                    }
+                }
+            }
+        }
+    }
+
+    .mx_CallEvent_content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: $secondary-fg-color;
+        margin-right: 16px;
+
+        .mx_CallEvent_content_button {
+            height: 24px;
+            padding: 0px 12px;
+            margin-left: 8px;
+
+            span {
+                padding: 8px 0;
+                display: flex;
+                align-items: center;
+
+                &::before {
+                    content: '';
+                    display: inline-block;
+                    background-color: $button-fg-color;
+                    mask-position: center;
+                    mask-repeat: no-repeat;
+                    mask-size: 16px;
+                    width: 16px;
+                    height: 16px;
+                    margin-right: 8px;
+                }
+            }
+        }
+
+        .mx_CallEvent_content_button_reject span::before {
+            mask-image: url('$(res)/img/element-icons/call/hangup.svg');
+        }
+
+        .mx_CallEvent_content_tooltip {
+            margin-right: 5px;
+        }
+
+        .mx_CallEvent_iconButton {
+            display: inline-flex;
+            margin-right: 8px;
+
+            &::before {
+                content: '';
+
+                height: 16px;
+                width: 16px;
+                background-color: $tertiary-fg-color;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                mask-position: center;
+            }
+        }
+
+        .mx_CallEvent_silence::before {
+            mask-image: url('$(res)/img/voip/silence.svg');
+        }
+
+        .mx_CallEvent_unSilence::before {
+            mask-image: url('$(res)/img/voip/un-silence.svg');
+        }
+    }
+}

res/css/views/messages/_MImageBody.scss

@@ -18,17 +18,16 @@ $timelineImageBorderRadius: 4px;
 
 .mx_MImageBody {
     display: block;
-    margin-right: 34px;
 }
 
 .mx_MImageBody_thumbnail {
-    position: absolute;
+    object-fit: contain;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
     border-radius: $timelineImageBorderRadius;
 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     > canvas {
         border-radius: $timelineImageBorderRadius;
     }
@@ -43,17 +42,6 @@ $timelineImageBorderRadius: 4px;
     position: relative;
 }
 
-.mx_MImageBody_thumbnail_spinner {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-}
-
-// Inner img should be centered around 0, 0
-.mx_MImageBody_thumbnail_spinner > * {
-    transform: translate(-50%, -50%);
-}
-
 .mx_MImageBody_gifLabel {
     position: absolute;
     display: block;

res/css/views/messages/_MessageActionBar.scss

@@ -107,3 +107,12 @@ limitations under the License.
 .mx_MessageActionBar_cancelButton::after {
     mask-image: url('$(res)/img/element-icons/trashcan.svg');
 }
+
+.mx_MessageActionBar_downloadButton::after {
+    mask-size: 14px;
+    mask-image: url('$(res)/img/download.svg');
+}
+
+.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton::after {
+    background-color: transparent; // hide the download icon mask
+}

res/css/views/messages/_ReactionsRow.scss

@@ -26,6 +26,7 @@ limitations under the License.
         height: 24px;
         vertical-align: middle;
         margin-left: 4px;
+        margin-right: 4px;
 
         &::before {
             content: '';

res/css/views/rooms/_EventBubbleTile.scss

@@ -0,0 +1,323 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EventTile[data-layout=bubble],
+.mx_EventTile[data-layout=bubble] ~ .mx_EventListSummary {
+    --avatarSize: 32px;
+    --gutterSize: 11px;
+    --cornerRadius: 12px;
+    --maxWidth: 70%;
+}
+
+.mx_EventTile[data-layout=bubble] {
+
+    position: relative;
+    margin-top: var(--gutterSize);
+    margin-left: 50px;
+    margin-right: 100px;
+
+    &.mx_EventTile_continuation {
+        margin-top: 2px;
+    }
+
+    /* For replies */
+    .mx_EventTile {
+        padding-top: 0;
+    }
+
+    &:hover {
+        &::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            bottom: -1px;
+            left: -60px;
+            right: -60px;
+            z-index: -1;
+            background: $eventbubble-bg-hover;
+            border-radius: 4px;
+        }
+
+        .mx_EventTile_avatar {
+            img {
+                box-shadow: 0 0 0 3px $eventbubble-bg-hover;
+            }
+        }
+    }
+
+    .mx_SenderProfile,
+    .mx_EventTile_line {
+        width: fit-content;
+        max-width: 70%;
+    }
+
+    .mx_SenderProfile {
+        position: relative;
+        top: -2px;
+        left: 2px;
+    }
+
+    &[data-self=false] {
+        .mx_EventTile_line {
+            border-bottom-right-radius: var(--cornerRadius);
+        }
+        .mx_EventTile_avatar {
+            left: -34px;
+        }
+
+        .mx_MessageActionBar {
+            right: 0;
+            transform: translate3d(50%, 50%, 0);
+        }
+
+        --backgroundColor: $eventbubble-others-bg;
+    }
+    &[data-self=true] {
+        .mx_EventTile_line {
+            border-bottom-left-radius: var(--cornerRadius);
+            float: right;
+            > a {
+                left: auto;
+                right: -48px;
+            }
+        }
+        .mx_SenderProfile {
+            display: none;
+        }
+        .mx_ReactionsRow {
+            float: right;
+            clear: right;
+            display: flex;
+
+            /* Moving the "add reaction button" before the reactions */
+            > :last-child {
+                order: -1;
+            }
+        }
+        .mx_EventTile_avatar {
+            top: -19px; // height of the sender block
+            right: -35px;
+        }
+
+        --backgroundColor: $eventbubble-self-bg;
+    }
+
+    .mx_EventTile_line {
+        position: relative;
+        padding: var(--gutterSize);
+        border-top-left-radius: var(--cornerRadius);
+        border-top-right-radius: var(--cornerRadius);
+        background: var(--backgroundColor);
+        display: flex;
+        gap: 5px;
+        margin: 0 -12px 0 -9px;
+        > a {
+            position: absolute;
+            left: -48px;
+        }
+    }
+
+    &.mx_EventTile_continuation[data-self=false] .mx_EventTile_line {
+        border-top-left-radius: 0;
+    }
+    &.mx_EventTile_lastInSection[data-self=false] .mx_EventTile_line {
+        border-bottom-left-radius: var(--cornerRadius);
+    }
+
+    &.mx_EventTile_continuation[data-self=true] .mx_EventTile_line {
+        border-top-right-radius: 0;
+    }
+    &.mx_EventTile_lastInSection[data-self=true] .mx_EventTile_line {
+        border-bottom-right-radius: var(--cornerRadius);
+    }
+
+    .mx_EventTile_avatar {
+        position: absolute;
+        top: 0;
+        line-height: 1;
+        img {
+            box-shadow: 0 0 0 3px $eventbubble-avatar-outline;
+            border-radius: 50%;
+        }
+    }
+
+    &[data-has-reply=true] {
+        > .mx_EventTile_line {
+            flex-direction: column;
+        }
+
+        .mx_ReplyThread_show {
+            order: 99999;
+        }
+
+        .mx_ReplyThread {
+            margin: 0 calc(-1 * var(--gutterSize));
+
+            .mx_EventTile_reply {
+                max-width: 90%;
+                padding: 0;
+                > a {
+                    display: none !important;
+                }
+            }
+
+            .mx_EventTile {
+                display: flex;
+                gap: var(--gutterSize);
+                .mx_EventTile_avatar {
+                    position: static;
+                }
+                .mx_SenderProfile {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .mx_EditMessageComposer_buttons {
+        position: static;
+        padding: 0;
+        margin: 0;
+        background: transparent;
+    }
+
+    .mx_ReactionsRow {
+        margin-right: -18px;
+        margin-left: -9px;
+    }
+
+    .mx_ReplyThread {
+        border-left-width: 2px;
+        border-left-color: $eventbubble-reply-color;
+    }
+
+    &.mx_EventTile_bubbleContainer,
+    &.mx_EventTile_info,
+    & ~ .mx_EventListSummary[data-expanded=false] {
+        --backgroundColor: transparent;
+        --gutterSize: 0;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .mx_EventTile_avatar {
+            position: static;
+            order: -1;
+            margin-right: 5px;
+        }
+    }
+
+    & ~ .mx_EventListSummary {
+        --maxWidth: 80%;
+        margin-left: calc(var(--avatarSize) + var(--gutterSize));
+        margin-right: calc(var(--gutterSize) + var(--avatarSize));
+        .mx_EventListSummary_toggle {
+            float: none;
+            margin: 0;
+            order: 9;
+            margin-left: 5px;
+        }
+        .mx_EventListSummary_avatars {
+            padding-top: 0;
+        }
+
+        &::after {
+            content: "";
+            clear: both;
+        }
+
+        .mx_EventTile {
+            margin: 0 6px;
+        }
+
+        .mx_EventTile_line {
+            margin: 0 5px;
+            > a {
+                left: auto;
+                right: 0;
+                transform: translateX(calc(100% + 5px));
+            }
+        }
+
+        .mx_MessageActionBar {
+            transform: translate3d(50%, 0, 0);
+        }
+    }
+
+    & ~ .mx_EventListSummary[data-expanded=false] {
+        padding: 0 34px;
+    }
+
+    /* events that do not require bubble layout */
+    & ~ .mx_EventListSummary,
+    &.mx_EventTile_bad {
+        .mx_EventTile_line {
+            background: transparent;
+        }
+
+        &:hover {
+            &::before {
+                background: transparent;
+            }
+        }
+    }
+
+    & + .mx_EventListSummary {
+        .mx_EventTile {
+            margin-top: 0;
+            padding: 0;
+        }
+    }
+
+    .mx_EventListSummary_toggle {
+        margin-right: 55px;
+    }
+
+    /* Special layout scenario for "Unable To Decrypt (UTD)" events */
+    &.mx_EventTile_bad > .mx_EventTile_line {
+        display: grid;
+        grid-template:
+            "reply reply" auto
+            "shield body" auto
+            "shield link" auto
+            / auto  1fr;
+        .mx_EventTile_e2eIcon {
+            grid-area: shield;
+        }
+        .mx_UnknownBody {
+            grid-area: body;
+        }
+        .mx_EventTile_keyRequestInfo {
+            grid-area: link;
+        }
+        .mx_ReplyThread_wrapper {
+            grid-area: reply;
+        }
+    }
+
+
+    .mx_EventTile_readAvatars {
+        position: absolute;
+        right: -110px;
+        bottom: 0;
+        top: auto;
+    }
+
+    .mx_MTextBody {
+        max-width: 100%;
+    }
+}

res/css/views/rooms/_EventTile.scss

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,102 +18,309 @@ limitations under the License.
 $left-gutter: 64px;
 $hover-select-border: 4px;
 
-.mx_EventTile {
+.mx_EventTile:not([data-layout=bubble]) {
     max-width: 100%;
     clear: both;
     padding-top: 18px;
     font-size: $font-14px;
     position: relative;
-}
 
-.mx_EventTile.mx_EventTile_info {
+    &.mx_EventTile_info {
-    padding-top: 1px;
+        padding-top: 1px;
-}
+    }
 
-.mx_EventTile_avatar {
+    .mx_EventTile_avatar {
-    top: 14px;
+        top: 14px;
-    left: 8px;
+        left: 8px;
-    cursor: pointer;
+        cursor: pointer;
-    user-select: none;
+        user-select: none;
-}
+    }
 
-.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+    &.mx_EventTile_info .mx_EventTile_avatar {
-    top: $font-6px;
+        top: $font-6px;
-    left: $left-gutter;
+        left: $left-gutter;
-}
+    }
 
-.mx_EventTile_continuation {
+    &.mx_EventTile_continuation {
-    padding-top: 0px !important;
+        padding-top: 0px !important;
+
+        &.mx_EventTile_isEditing {
+            padding-top: 5px !important;
+            margin-top: -5px;
+        }
+    }
 
     &.mx_EventTile_isEditing {
-        padding-top: 5px !important;
+        background-color: $header-panel-bg-color;
-        margin-top: -5px;
     }
-}
 
-.mx_EventTile_isEditing {
+    .mx_SenderProfile {
-    background-color: $header-panel-bg-color;
+        color: $primary-fg-color;
-}
+        font-size: $font-14px;
+        display: inline-block; /* anti-zalgo, with overflow hidden */
+        overflow: hidden;
+        cursor: pointer;
+        padding-bottom: 0px;
+        padding-top: 0px;
+        margin: 0px;
+        /* the next three lines, along with overflow hidden, truncate long display names */
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: calc(100% - $left-gutter);
+    }
 
-.mx_EventTile .mx_SenderProfile {
+    .mx_SenderProfile .mx_Flair {
-    color: $primary-fg-color;
+        opacity: 0.7;
-    font-size: $font-14px;
+        margin-left: 5px;
-    display: inline-block; /* anti-zalgo, with overflow hidden */
+        display: inline-block;
-    overflow: hidden;
+        vertical-align: top;
-    cursor: pointer;
+        overflow: hidden;
-    padding-bottom: 0px;
+        user-select: none;
-    padding-top: 0px;
-    margin: 0px;
-    /* the next three lines, along with overflow hidden, truncate long display names */
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: calc(100% - $left-gutter);
-}
 
-.mx_EventTile .mx_SenderProfile .mx_Flair {
+        img {
-    opacity: 0.7;
+            vertical-align: -2px;
-    margin-left: 5px;
+            margin-right: 2px;
-    display: inline-block;
+            border-radius: 8px;
-    vertical-align: top;
+        }
-    overflow: hidden;
+    }
-    user-select: none;
 
-    img {
+    &.mx_EventTile_isEditing .mx_MessageTimestamp {
-        vertical-align: -2px;
+        visibility: hidden;
-        margin-right: 2px;
+    }
+
+    .mx_MessageTimestamp {
+        display: block;
+        white-space: nowrap;
+        left: 0px;
+        text-align: center;
+        user-select: none;
+    }
+
+    &.mx_EventTile_continuation .mx_EventTile_line {
+        clear: both;
+    }
+
+    .mx_EventTile_line, .mx_EventTile_reply {
+        position: relative;
+        padding-left: $left-gutter;
         border-radius: 8px;
     }
-}
 
-.mx_EventTile_isEditing .mx_MessageTimestamp {
+    .mx_EventTile_reply {
-    visibility: hidden;
+        margin-right: 10px;
-}
-
-.mx_EventTile .mx_MessageTimestamp {
-    display: block;
-    white-space: nowrap;
-    left: 0px;
-    text-align: center;
-    user-select: none;
-}
-
-.mx_EventTile_continuation .mx_EventTile_line {
-    clear: both;
-}
-
-.mx_EventTile_line, .mx_EventTile_reply {
-    position: relative;
-    padding-left: $left-gutter;
-    border-radius: 8px;
-}
-
-.mx_RoomView_timeline_rr_enabled,
-// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
-.mx_EventListSummary {
-    .mx_EventTile_line {
-        /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
-        margin-right: 110px;
     }
+
+    &.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
+        left: calc(-$hover-select-border);
+    }
+
+    /* this is used for the tile for the event which is selected via the URL.
+     * TODO: ultimately we probably want some transition on here.
+     */
+    &.mx_EventTile_selected > .mx_EventTile_line {
+        border-left: $accent-color 4px solid;
+        padding-left: calc($left-gutter - $hover-select-border);
+        background-color: $event-selected-color;
+    }
+
+    &.mx_EventTile_highlight,
+    &.mx_EventTile_highlight .markdown-body {
+        color: $event-highlight-fg-color;
+
+        .mx_EventTile_line {
+            background-color: $event-highlight-bg-color;
+        }
+    }
+
+    &.mx_EventTile_info .mx_EventTile_line {
+        padding-left: calc($left-gutter + 18px);
+    }
+
+    & ~ .mx_EventListSummary .mx_EventTile_line {
+        padding-left: calc($left-gutter);
+    }
+
+    &.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
+        padding-left: calc($left-gutter + 18px - $hover-select-border);
+    }
+
+    &.mx_EventTile:hover .mx_EventTile_line,
+    &.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
+    &.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
+        background-color: $event-selected-color;
+    }
+
+    .mx_EventTile_searchHighlight {
+        background-color: $accent-color;
+        color: $accent-fg-color;
+        border-radius: 5px;
+        padding-left: 2px;
+        padding-right: 2px;
+        cursor: pointer;
+    }
+
+    .mx_EventTile_searchHighlight a {
+        background-color: $accent-color;
+        color: $accent-fg-color;
+    }
+
+    .mx_EventTile_receiptSent,
+    .mx_EventTile_receiptSending {
+        // We don't use `position: relative` on the element because then it won't line
+        // up with the other read receipts
+
+        &::before {
+            background-color: $tertiary-fg-color;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: 14px;
+            width: 14px;
+            height: 14px;
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+    .mx_EventTile_receiptSent::before {
+        mask-image: url('$(res)/img/element-icons/circle-sent.svg');
+    }
+    .mx_EventTile_receiptSending::before {
+        mask-image: url('$(res)/img/element-icons/circle-sending.svg');
+    }
+
+    &.mx_EventTile_contextual {
+        opacity: 0.4;
+    }
+
+    .mx_EventTile_msgOption {
+        float: right;
+        text-align: right;
+        position: relative;
+        width: 90px;
+
+        /* Hack to stop the height of this pushing the messages apart.
+           Replaces margin-top: -6px. This interacts better with a read
+           marker being in between. Content overflows. */
+        height: 1px;
+
+        margin-right: 10px;
+    }
+
+    .mx_EventTile_msgOption a {
+        text-decoration: none;
+    }
+
+    /* all the overflow-y: hidden; are to trap Zalgos -
+       but they introduce an implicit overflow-x: auto.
+       so make that explicitly hidden too to avoid random
+       horizontal scrollbars occasionally appearing, like in
+       https://github.com/vector-im/vector-web/issues/1154
+        */
+    .mx_EventTile_content {
+        display: block;
+        overflow-y: hidden;
+        overflow-x: hidden;
+        margin-right: 34px;
+    }
+
+    /* De-zalgoing */
+    .mx_EventTile_body {
+        overflow-y: hidden;
+    }
+
+    /* Spoiler stuff */
+    .mx_EventTile_spoiler {
+        cursor: pointer;
+    }
+
+    .mx_EventTile_spoiler_reason {
+        color: $event-timestamp-color;
+        font-size: $font-11px;
+    }
+
+    .mx_EventTile_spoiler_content {
+        filter: blur(5px) saturate(0.1) sepia(1);
+        transition-duration: 0.5s;
+    }
+
+    .mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
+        filter: none;
+    }
+
+    &:hover.mx_EventTile_verified .mx_EventTile_line,
+    &:hover.mx_EventTile_unverified .mx_EventTile_line,
+    &:hover.mx_EventTile_unknown .mx_EventTile_line {
+        padding-left: calc($left-gutter - $hover-select-border);
+    }
+
+    &:hover.mx_EventTile_verified .mx_EventTile_line {
+        border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
+    }
+
+    &:hover.mx_EventTile_unverified .mx_EventTile_line {
+        border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
+    }
+
+    &:hover.mx_EventTile_unknown .mx_EventTile_line {
+        border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
+    }
+
+    &:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
+    &:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
+    &:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
+        padding-left: calc($left-gutter + 18px - $hover-select-border);
+    }
+
+    /* End to end encryption stuff */
+    &:hover .mx_EventTile_e2eIcon {
+        opacity: 1;
+    }
+
+    // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+    &:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
+    &:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
+    &:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
+        left: calc(-$hover-select-border);
+    }
+
+    // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+    &:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
+    &:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon,
+    &:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon {
+        display: block;
+        left: 41px;
+    }
+
+    .mx_MImageBody {
+        margin-right: 34px;
+    }
+
+    .mx_EventTile_e2eIcon {
+        position: absolute;
+        top: 6px;
+        left: 44px;
+        bottom: 0;
+        right: 0;
+    }
+
+    .mx_ReactionsRow {
+        margin: 0;
+        padding: 6px 60px;
+    }
+}
+
+.mx_RoomView_timeline_rr_enabled {
+
+    .mx_EventTile:not([data-layout=bubble]) {
+        .mx_EventTile_line {
+            /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
+            margin-right: 110px;
+        }
+    }
+
+    // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
 }
 
 .mx_EventTile_bubbleContainer {
@@ -130,123 +337,15 @@ $hover-select-border: 4px;
     .mx_EventTile_msgOption {
         grid-column: 2;
     }
-}
 
-.mx_EventTile_reply {
+    &:hover {
-    margin-right: 10px;
+        .mx_EventTile_line {
-}
+            // To avoid bubble events being highlighted
-
+            background-color: inherit !important;
-/* HACK to override line-height which is already marked important elsewhere */
+        }
-.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
-    font-size: 48px !important;
-    line-height: 57px !important;
-}
-
-.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
-    left: calc(-$hover-select-border);
-}
-
-.mx_EventTile:hover .mx_MessageActionBar,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
-[data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
-.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
-    visibility: visible;
-}
-
-/* this is used for the tile for the event which is selected via the URL.
- * TODO: ultimately we probably want some transition on here.
- */
-.mx_EventTile_selected > .mx_EventTile_line {
-    border-left: $accent-color 4px solid;
-    padding-left: calc($left-gutter - $hover-select-border);
-    background-color: $event-selected-color;
-}
-
-.mx_EventTile_highlight,
-.mx_EventTile_highlight .markdown-body {
-    color: $event-highlight-fg-color;
-
-    .mx_EventTile_line {
-        background-color: $event-highlight-bg-color;
     }
 }
 
-.mx_EventTile_info .mx_EventTile_line {
-    padding-left: calc($left-gutter + 18px);
-}
-
-.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
-    padding-left: calc($left-gutter + 18px - $hover-select-border);
-}
-
-.mx_EventTile:hover .mx_EventTile_line,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
-.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
-    background-color: $event-selected-color;
-}
-
-.mx_EventTile_searchHighlight {
-    background-color: $accent-color;
-    color: $accent-fg-color;
-    border-radius: 5px;
-    padding-left: 2px;
-    padding-right: 2px;
-    cursor: pointer;
-}
-
-.mx_EventTile_searchHighlight a {
-    background-color: $accent-color;
-    color: $accent-fg-color;
-}
-
-.mx_EventTile_receiptSent,
-.mx_EventTile_receiptSending {
-    // We don't use `position: relative` on the element because then it won't line
-    // up with the other read receipts
-
-    &::before {
-        background-color: $tertiary-fg-color;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: 14px;
-        width: 14px;
-        height: 14px;
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-    }
-}
-.mx_EventTile_receiptSent::before {
-    mask-image: url('$(res)/img/element-icons/circle-sent.svg');
-}
-.mx_EventTile_receiptSending::before {
-    mask-image: url('$(res)/img/element-icons/circle-sending.svg');
-}
-
-.mx_EventTile_contextual {
-    opacity: 0.4;
-}
-
-.mx_EventTile_msgOption {
-    float: right;
-    text-align: right;
-    position: relative;
-    width: 90px;
-
-    /* Hack to stop the height of this pushing the messages apart.
-       Replaces margin-top: -6px. This interacts better with a read
-       marker being in between. Content overflows. */
-    height: 1px;
-
-    margin-right: 10px;
-}
-
-.mx_EventTile_msgOption a {
-    text-decoration: none;
-}
-
 .mx_EventTile_readAvatars {
     position: relative;
     display: inline-block;
@@ -277,52 +376,27 @@ $hover-select-border: 4px;
     position: absolute;
 }
 
-/* all the overflow-y: hidden; are to trap Zalgos -
+/* HACK to override line-height which is already marked important elsewhere */
-   but they introduce an implicit overflow-x: auto.
+.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
-   so make that explicitly hidden too to avoid random
+    font-size: 48px !important;
-   horizontal scrollbars occasionally appearing, like in
+    line-height: 57px !important;
-   https://github.com/vector-im/vector-web/issues/1154
-    */
-.mx_EventTile_content {
-    display: block;
-    overflow-y: hidden;
-    overflow-x: hidden;
-    margin-right: 34px;
 }
 
-/* De-zalgoing */
+.mx_EventTile_content .mx_EventTile_edited {
-.mx_EventTile_body {
+    user-select: none;
-    overflow-y: hidden;
+    font-size: $font-12px;
-}
+    color: $roomtopic-color;
-
+    display: inline-block;
-/* Spoiler stuff */
+    margin-left: 9px;
-.mx_EventTile_spoiler {
     cursor: pointer;
 }
 
-.mx_EventTile_spoiler_reason {
-    color: $event-timestamp-color;
-    font-size: $font-11px;
-}
-
-.mx_EventTile_spoiler_content {
-    filter: blur(5px) saturate(0.1) sepia(1);
-    transition-duration: 0.5s;
-}
-
-.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
-    filter: none;
-}
 
 .mx_EventTile_e2eIcon {
-    position: absolute;
+    position: relative;
-    top: 6px;
-    left: 44px;
     width: 14px;
     height: 14px;
     display: block;
-    bottom: 0;
-    right: 0;
     opacity: 0.2;
     background-repeat: no-repeat;
     background-size: contain;
@@ -381,87 +455,6 @@ $hover-select-border: 4px;
     opacity: 1;
 }
 
-.mx_EventTile_keyRequestInfo {
-    font-size: $font-12px;
-}
-
-.mx_EventTile_keyRequestInfo_text {
-    opacity: 0.5;
-}
-
-.mx_EventTile_keyRequestInfo_text a {
-    color: $primary-fg-color;
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p {
-    text-align: auto;
-    margin-left: 3px;
-    margin-right: 3px;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
-    margin-top: 0px;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
-    margin-bottom: 0px;
-}
-
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
-    padding-left: calc($left-gutter - $hover-select-border);
-}
-
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
-    border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
-}
-
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
-    border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
-}
-
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
-    border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
-}
-
-.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
-    padding-left: calc($left-gutter + 18px - $hover-select-border);
-}
-
-/* End to end encryption stuff */
-.mx_EventTile:hover .mx_EventTile_e2eIcon {
-    opacity: 1;
-}
-
-// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
-    left: calc(-$hover-select-border);
-}
-
-// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon,
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon {
-    display: block;
-    left: 41px;
-}
-
-.mx_EventTile_content .mx_EventTile_edited {
-    user-select: none;
-    font-size: $font-12px;
-    color: $roomtopic-color;
-    display: inline-block;
-    margin-left: 9px;
-    cursor: pointer;
-}
-
 /* Various markdown overrides */
 
 .mx_EventTile_body pre {
@@ -595,6 +588,35 @@ $hover-select-border: 4px;
 
 /* end of overrides */
 
+
+.mx_EventTile_keyRequestInfo {
+    font-size: $font-12px;
+}
+
+.mx_EventTile_keyRequestInfo_text {
+    opacity: 0.5;
+}
+
+.mx_EventTile_keyRequestInfo_text a {
+    color: $primary-fg-color;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p {
+    text-align: auto;
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
+    margin-top: 0px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
+    margin-bottom: 0px;
+}
+
 .mx_EventTile_tileError {
     color: red;
     text-align: center;
@@ -615,6 +637,13 @@ $hover-select-border: 4px;
     }
 }
 
+.mx_EventTile:hover .mx_MessageActionBar,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
+[data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
+.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
+    visibility: visible;
+}
+
 @media only screen and (max-width: 480px) {
     .mx_EventTile_line, .mx_EventTile_reply {
         padding-left: 0;

res/img/element-icons/warning.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM6.9806 4.5101C6.9306 3.9401 7.3506 3.4401 7.9206 3.4001C8.4806 3.3601 8.9806 3.7801 9.0406 4.3501V4.5101L8.7206 8.5101C8.6906 8.8801 8.3806 9.1601 8.0106 9.1601H7.9506C7.6006 9.1301 7.3306 8.8601 7.3006 8.5101L6.9806 4.5101ZM8.88012 11.1202C8.88012 11.6062 8.48613 12.0002 8.00012 12.0002C7.51411 12.0002 7.12012 11.6062 7.12012 11.1202C7.12012 10.6342 7.51411 10.2402 8.00012 10.2402C8.48613 10.2402 8.88012 10.6342 8.88012 11.1202Z" fill="#8D99A5"/>
+</svg>

res/themes/dark/css/_dark.scss

@@ -227,6 +227,13 @@ $groupFilterPanel-background-blur-amount: 30px;
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 
+// Bubble tiles
+$eventbubble-self-bg: #143A34;
+$eventbubble-others-bg: #394049;
+$eventbubble-bg-hover: #433C23;
+$eventbubble-avatar-outline: $bg-color;
+$eventbubble-reply-color: #C1C6CD;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

res/themes/legacy-light/css/_legacy-light.scss

@@ -347,6 +347,13 @@ $appearance-tab-border-color: $input-darker-bg-color;
 
 $composer-shadow-color: tranparent;
 
+// Bubble tiles
+$eventbubble-self-bg: #F8FDFC;
+$eventbubble-others-bg: #F7F8F9;
+$eventbubble-bg-hover: rgb(242, 242, 242);
+$eventbubble-avatar-outline: #fff;
+$eventbubble-reply-color: #C1C6CD;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

res/themes/light/css/_light.scss

@@ -349,6 +349,13 @@ $groupFilterPanel-background-blur-amount: 20px;
 
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 
+// Bubble tiles
+$eventbubble-self-bg: #F8FDFC;
+$eventbubble-others-bg: #F7F8F9;
+$eventbubble-bg-hover: #FEFCF5;
+$eventbubble-avatar-outline: $primary-bg-color;
+$eventbubble-reply-color: #C1C6CD;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

src/@types/common.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { JSXElementConstructor } from "react";
+import React, { JSXElementConstructor } from "react";
 
 // Based on https://stackoverflow.com/a/53229857/3532235
 export type Without<T, U> = {[P in Exclude<keyof T, keyof U>]?: never};
@@ -22,3 +22,4 @@ export type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<
 export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 
 export type ComponentClass = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+export type ReactAnyComponent = React.Component | React.ExoticComponent;

src/@types/global.d.ts

@@ -50,6 +50,8 @@ import UIStore from "../stores/UIStore";
 import { SetupEncryptionStore } from "../stores/SetupEncryptionStore";
 import { RoomScrollStateStore } from "../stores/RoomScrollStateStore";
 
+/* eslint-disable @typescript-eslint/naming-convention */
+
 declare global {
     interface Window {
         matrixChat: ReturnType<Renderer>;
@@ -90,6 +92,7 @@ declare global {
         mxUIStore: UIStore;
         mxSetupEncryptionStore?: SetupEncryptionStore;
         mxRoomScrollStateStore?: RoomScrollStateStore;
+        mxOnRecaptchaLoaded?: () => void;
     }
 
     interface Document {
@@ -114,7 +117,7 @@ declare global {
     }
 
     interface StorageEstimate {
-        usageDetails?: {[key: string]: number};
+        usageDetails?: { [key: string]: number };
     }
 
     interface HTMLAudioElement {
@@ -185,4 +188,21 @@ declare global {
             parameterDescriptors?: AudioParamDescriptor[];
         }
     );
+
+    // eslint-disable-next-line no-var
+    var grecaptcha:
+        | undefined
+        | {
+              reset: (id: string) => void;
+              render: (
+                  divId: string,
+                  options: {
+                      sitekey: string;
+                      callback: (response: string) => void;
+                  },
+              ) => string;
+              isReady: () => boolean;
+          };
 }
+
+/* eslint-enable @typescript-eslint/naming-convention */

src/Analytics.tsx

@@ -270,7 +270,7 @@ export class Analytics {
         localStorage.removeItem(LAST_VISIT_TS_KEY);
     }
 
-    private async _track(data: IData) {
+    private async track(data: IData) {
         if (this.disabled) return;
 
         const now = new Date();
@@ -304,7 +304,7 @@ export class Analytics {
     }
 
     public ping() {
-        this._track({
+        this.track({
             ping: "1",
         });
         localStorage.setItem(LAST_VISIT_TS_KEY, String(new Date().getTime())); // update last visit ts
@@ -324,14 +324,14 @@ export class Analytics {
             // But continue anyway because we still want to track the change
         }
 
-        this._track({
+        this.track({
             gt_ms: String(generationTimeMs),
         });
     }
 
     public trackEvent(category: string, action: string, name?: string, value?: string) {
         if (this.disabled) return;
-        this._track({
+        this.track({
             e_c: category,
             e_a: action,
             e_n: name,
@@ -395,17 +395,17 @@ export class Analytics {
         Modal.createTrackedDialog('Analytics Details', '', ErrorDialog, {
             title: _t('Analytics'),
             description: <div className="mx_AnalyticsModal">
-                <div>{_t('The information being sent to us to help make %(brand)s better includes:', {
+                <div>{ _t('The information being sent to us to help make %(brand)s better includes:', {
                     brand: SdkConfig.get().brand,
-                })}</div>
+                }) }</div>
                 <table>
                     { rows.map((row) => <tr key={row[0]}>
-                        <td>{_t(
+                        <td>{ _t(
                             customVariables[row[0]].expl,
                             customVariables[row[0]].getTextVariables ?
                                 customVariables[row[0]].getTextVariables() :
                                 null,
-                        )}</td>
+                        ) }</td>
                         { row[1] !== undefined && <td><code>{ row[1] }</code></td> }
                     </tr>) }
                     { otherVariables.map((item, index) =>

src/Avatar.ts

@@ -129,7 +129,7 @@ export function getInitialLetter(name: string): string {
     }
 
     // rely on the grapheme cluster splitter in lodash so that we don't break apart compound emojis
-    return split(name, "", 1)[0];
+    return split(name, "", 1)[0].toUpperCase();
 }
 
 export function avatarUrlForRoom(room: Room, width: number, height: number, resizeMethod?: ResizeMethod) {

src/CallHandler.tsx

@@ -99,7 +99,7 @@ const CHECK_PROTOCOLS_ATTEMPTS = 3;
 // (and store the ID of their native room)
 export const VIRTUAL_ROOM_EVENT_TYPE = 'im.vector.is_virtual_room';
 
-export enum AudioID {
+enum AudioID {
     Ring = 'ringAudio',
     Ringback = 'ringbackAudio',
     CallEnd = 'callendAudio',
@@ -142,6 +142,7 @@ export enum PlaceCallType {
 export enum CallHandlerEvent {
     CallsChanged = "calls_changed",
     CallChangeRoom = "call_change_room",
+    SilencedCallsChanged = "silenced_calls_changed",
 }
 
 export default class CallHandler extends EventEmitter {
@@ -164,6 +165,8 @@ export default class CallHandler extends EventEmitter {
     // do the async lookup when we get new information and then store these mappings here
     private assertedIdentityNativeUsers = new Map<string, string>();
 
+    private silencedCalls = new Set<string>(); // callIds
+
     static sharedInstance() {
         if (!window.mxCallHandler) {
             window.mxCallHandler = new CallHandler();
@@ -224,6 +227,33 @@ export default class CallHandler extends EventEmitter {
         }
     }
 
+    public silenceCall(callId: string) {
+        this.silencedCalls.add(callId);
+        this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls);
+
+        // Don't pause audio if we have calls which are still ringing
+        if (this.areAnyCallsUnsilenced()) return;
+        this.pause(AudioID.Ring);
+    }
+
+    public unSilenceCall(callId: string) {
+        this.silencedCalls.delete(callId);
+        this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls);
+        this.play(AudioID.Ring);
+    }
+
+    public isCallSilenced(callId: string): boolean {
+        return this.silencedCalls.has(callId);
+    }
+
+    /**
+     * Returns true if there is at least one unsilenced call
+     * @returns {boolean}
+     */
+    private areAnyCallsUnsilenced(): boolean {
+        return this.calls.size > this.silencedCalls.size;
+    }
+
     private async checkProtocols(maxTries) {
         try {
             const protocols = await MatrixClientPeg.get().getThirdpartyProtocols();
@@ -301,6 +331,13 @@ export default class CallHandler extends EventEmitter {
         }, true);
     };
 
+    public getCallById(callId: string): MatrixCall {
+        for (const call of this.calls.values()) {
+            if (call.callId === callId) return call;
+        }
+        return null;
+    }
+
     getCallForRoom(roomId: string): MatrixCall {
         return this.calls.get(roomId) || null;
     }
@@ -441,6 +478,10 @@ export default class CallHandler extends EventEmitter {
                     break;
             }
 
+            if (newState !== CallState.Ringing) {
+                this.silencedCalls.delete(call.callId);
+            }
+
             switch (newState) {
                 case CallState.Ringing:
                     this.play(AudioID.Ring);
@@ -615,23 +656,23 @@ export default class CallHandler extends EventEmitter {
 
     private showICEFallbackPrompt() {
         const cli = MatrixClientPeg.get();
-        const code = sub => <code>{sub}</code>;
+        const code = sub => <code>{ sub }</code>;
         Modal.createTrackedDialog('No TURN servers', '', QuestionDialog, {
             title: _t("Call failed due to misconfigured server"),
             description: <div>
-                <p>{_t(
+                <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>
-                <p>{_t(
+                <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>
+                ) }</p>
             </div>,
             button: _t('Try using turn.matrix.org'),
             cancelButton: _t('OK'),
@@ -649,19 +690,19 @@ export default class CallHandler extends EventEmitter {
         if (call.type === CallType.Voice) {
             title = _t("Unable to access microphone");
             description = <div>
-                {_t(
+                { _t(
                     "Call failed because microphone could not be accessed. " +
                     "Check that a microphone is plugged in and set up correctly.",
-                )}
+                ) }
             </div>;
         } else if (call.type === CallType.Video) {
             title = _t("Unable to access webcam / microphone");
             description = <div>
-                {_t("Call failed because webcam or microphone could not be accessed. Check that:")}
+                { _t("Call failed because webcam or microphone could not be accessed. Check that:") }
                 <ul>
-                    <li>{_t("A microphone and webcam are plugged in and set up correctly")}</li>
+                    <li>{ _t("A microphone and webcam are plugged in and set up correctly") }</li>
-                    <li>{_t("Permission is granted to use the webcam")}</li>
+                    <li>{ _t("Permission is granted to use the webcam") }</li>
-                    <li>{_t("No other application is using the webcam")}</li>
+                    <li>{ _t("No other application is using the webcam") }</li>
                 </ul>
             </div>;
         }

src/ContentMessages.tsx

@@ -425,10 +425,10 @@ export default class ContentMessages {
             const { finished } = Modal.createTrackedDialog<[boolean]>('Upload Reply Warning', '', QuestionDialog, {
                 title: _t('Replying With Files'),
                 description: (
-                    <div>{_t(
+                    <div>{ _t(
                         'At this time it is not possible to reply with a file. ' +
                         'Would you like to upload this file without replying?',
-                    )}</div>
+                    ) }</div>
                 ),
                 hasCancelButton: true,
                 button: _t("Continue"),

src/DeviceListener.ts

@@ -33,6 +33,7 @@ import { isSecretStorageBeingAccessed, accessSecretStorage } from "./SecurityMan
 import { isSecureBackupRequired } from './utils/WellKnownUtils';
 import { isLoggedIn } from './components/structures/MatrixChat';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { ActionPayload } from "./dispatcher/payloads";
 
 const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
 
@@ -58,28 +59,28 @@ export default class DeviceListener {
     }
 
     start() {
-        MatrixClientPeg.get().on('crypto.willUpdateDevices', this._onWillUpdateDevices);
+        MatrixClientPeg.get().on('crypto.willUpdateDevices', this.onWillUpdateDevices);
-        MatrixClientPeg.get().on('crypto.devicesUpdated', this._onDevicesUpdated);
+        MatrixClientPeg.get().on('crypto.devicesUpdated', this.onDevicesUpdated);
-        MatrixClientPeg.get().on('deviceVerificationChanged', this._onDeviceVerificationChanged);
+        MatrixClientPeg.get().on('deviceVerificationChanged', this.onDeviceVerificationChanged);
-        MatrixClientPeg.get().on('userTrustStatusChanged', this._onUserTrustStatusChanged);
+        MatrixClientPeg.get().on('userTrustStatusChanged', this.onUserTrustStatusChanged);
-        MatrixClientPeg.get().on('crossSigning.keysChanged', this._onCrossSingingKeysChanged);
+        MatrixClientPeg.get().on('crossSigning.keysChanged', this.onCrossSingingKeysChanged);
-        MatrixClientPeg.get().on('accountData', this._onAccountData);
+        MatrixClientPeg.get().on('accountData', this.onAccountData);
-        MatrixClientPeg.get().on('sync', this._onSync);
+        MatrixClientPeg.get().on('sync', this.onSync);
-        MatrixClientPeg.get().on('RoomState.events', this._onRoomStateEvents);
+        MatrixClientPeg.get().on('RoomState.events', this.onRoomStateEvents);
-        this.dispatcherRef = dis.register(this._onAction);
+        this.dispatcherRef = dis.register(this.onAction);
-        this._recheck();
+        this.recheck();
     }
 
     stop() {
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener('crypto.willUpdateDevices', this._onWillUpdateDevices);
+            MatrixClientPeg.get().removeListener('crypto.willUpdateDevices', this.onWillUpdateDevices);
-            MatrixClientPeg.get().removeListener('crypto.devicesUpdated', this._onDevicesUpdated);
+            MatrixClientPeg.get().removeListener('crypto.devicesUpdated', this.onDevicesUpdated);
-            MatrixClientPeg.get().removeListener('deviceVerificationChanged', this._onDeviceVerificationChanged);
+            MatrixClientPeg.get().removeListener('deviceVerificationChanged', this.onDeviceVerificationChanged);
-            MatrixClientPeg.get().removeListener('userTrustStatusChanged', this._onUserTrustStatusChanged);
+            MatrixClientPeg.get().removeListener('userTrustStatusChanged', this.onUserTrustStatusChanged);
-            MatrixClientPeg.get().removeListener('crossSigning.keysChanged', this._onCrossSingingKeysChanged);
+            MatrixClientPeg.get().removeListener('crossSigning.keysChanged', this.onCrossSingingKeysChanged);
-            MatrixClientPeg.get().removeListener('accountData', this._onAccountData);
+            MatrixClientPeg.get().removeListener('accountData', this.onAccountData);
-            MatrixClientPeg.get().removeListener('sync', this._onSync);
+            MatrixClientPeg.get().removeListener('sync', this.onSync);
-            MatrixClientPeg.get().removeListener('RoomState.events', this._onRoomStateEvents);
+            MatrixClientPeg.get().removeListener('RoomState.events', this.onRoomStateEvents);
         }
         if (this.dispatcherRef) {
             dis.unregister(this.dispatcherRef);
@@ -103,15 +104,15 @@ export default class DeviceListener {
             this.dismissed.add(d);
         }
 
-        this._recheck();
+        this.recheck();
     }
 
     dismissEncryptionSetup() {
         this.dismissedThisDeviceToast = true;
-        this._recheck();
+        this.recheck();
     }
 
-    _ensureDeviceIdsAtStartPopulated() {
+    private ensureDeviceIdsAtStartPopulated() {
         if (this.ourDeviceIdsAtStart === null) {
             const cli = MatrixClientPeg.get();
             this.ourDeviceIdsAtStart = new Set(
@@ -120,39 +121,39 @@ export default class DeviceListener {
         }
     }
 
-    _onWillUpdateDevices = async (users: string[], initialFetch?: boolean) => {
+    private onWillUpdateDevices = async (users: string[], initialFetch?: boolean) => {
         // If we didn't know about *any* devices before (ie. it's fresh login),
         // then they are all pre-existing devices, so ignore this and set the
         // devicesAtStart list to the devices that we see after the fetch.
         if (initialFetch) return;
 
         const myUserId = MatrixClientPeg.get().getUserId();
-        if (users.includes(myUserId)) this._ensureDeviceIdsAtStartPopulated();
+        if (users.includes(myUserId)) this.ensureDeviceIdsAtStartPopulated();
 
         // No need to do a recheck here: we just need to get a snapshot of our devices
         // before we download any new ones.
     };
 
-    _onDevicesUpdated = (users: string[]) => {
+    private onDevicesUpdated = (users: string[]) => {
         if (!users.includes(MatrixClientPeg.get().getUserId())) return;
-        this._recheck();
+        this.recheck();
     };
 
-    _onDeviceVerificationChanged = (userId: string) => {
+    private onDeviceVerificationChanged = (userId: string) => {
         if (userId !== MatrixClientPeg.get().getUserId()) return;
-        this._recheck();
+        this.recheck();
     };
 
-    _onUserTrustStatusChanged = (userId: string) => {
+    private onUserTrustStatusChanged = (userId: string) => {
         if (userId !== MatrixClientPeg.get().getUserId()) return;
-        this._recheck();
+        this.recheck();
     };
 
-    _onCrossSingingKeysChanged = () => {
+    private onCrossSingingKeysChanged = () => {
-        this._recheck();
+        this.recheck();
     };
 
-    _onAccountData = (ev) => {
+    private onAccountData = (ev: MatrixEvent) => {
         // User may have:
         // * migrated SSSS to symmetric
         // * uploaded keys to secret storage
@@ -163,32 +164,32 @@ export default class DeviceListener {
             ev.getType().startsWith('m.cross_signing.') ||
             ev.getType() === 'm.megolm_backup.v1'
         ) {
-            this._recheck();
+            this.recheck();
         }
     };
 
-    _onSync = (state, prevState) => {
+    private onSync = (state, prevState) => {
-        if (state === 'PREPARED' && prevState === null) this._recheck();
+        if (state === 'PREPARED' && prevState === null) this.recheck();
     };
 
-    _onRoomStateEvents = (ev: MatrixEvent) => {
+    private onRoomStateEvents = (ev: MatrixEvent) => {
         if (ev.getType() !== "m.room.encryption") {
             return;
         }
 
         // If a room changes to encrypted, re-check as it may be our first
         // encrypted room. This also catches encrypted room creation as well.
-        this._recheck();
+        this.recheck();
     };
 
-    _onAction = ({ action }) => {
+    private onAction = ({ action }: ActionPayload) => {
         if (action !== "on_logged_in") return;
-        this._recheck();
+        this.recheck();
     };
 
     // The server doesn't tell us when key backup is set up, so we poll
     // & cache the result
-    async _getKeyBackupInfo() {
+    private async getKeyBackupInfo() {
         const now = (new Date()).getTime();
         if (!this.keyBackupInfo || this.keyBackupFetchedAt < now - KEY_BACKUP_POLL_INTERVAL) {
             this.keyBackupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
@@ -206,7 +207,7 @@ export default class DeviceListener {
         return cli && cli.getRooms().some(r => cli.isRoomEncrypted(r.roomId));
     }
 
-    async _recheck() {
+    private async recheck() {
         const cli = MatrixClientPeg.get();
 
         if (!await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) return;
@@ -235,7 +236,7 @@ export default class DeviceListener {
                 // Cross-signing on account but this device doesn't trust the master key (verify this session)
                 showSetupEncryptionToast(SetupKind.VERIFY_THIS_SESSION);
             } else {
-                const backupInfo = await this._getKeyBackupInfo();
+                const backupInfo = await this.getKeyBackupInfo();
                 if (backupInfo) {
                     // No cross-signing on account but key backup available (upgrade encryption)
                     showSetupEncryptionToast(SetupKind.UPGRADE_ENCRYPTION);
@@ -256,7 +257,7 @@ export default class DeviceListener {
 
         // This needs to be done after awaiting on downloadKeys() above, so
         // we make sure we get the devices after the fetch is done.
-        this._ensureDeviceIdsAtStartPopulated();
+        this.ensureDeviceIdsAtStartPopulated();
 
         // Unverified devices that were there last time the app ran
         // (technically could just be a boolean: we don't actually

src/HtmlUtils.tsx

@@ -33,7 +33,7 @@ import { IExtendedSanitizeOptions } from './@types/sanitize-html';
 import linkifyMatrix from './linkify-matrix';
 import SettingsStore from './settings/SettingsStore';
 import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks";
-import { SHORTCODE_TO_EMOJI, getEmojiFromUnicode } from "./emoji";
+import { getEmojiFromUnicode } from "./emoji";
 import ReplyThread from "./components/views/elements/ReplyThread";
 import { mediaFromMxc } from "./customisations/Media";
 
@@ -79,20 +79,8 @@ function mightContainEmoji(str: string): boolean {
  * @return {String} The shortcode (such as :thumbup:)
  */
 export function unicodeToShortcode(char: string): string {
-    const data = getEmojiFromUnicode(char);
+    const shortcodes = getEmojiFromUnicode(char).shortcodes;
-    return (data && data.shortcodes ? `:${data.shortcodes[0]}:` : '');
+    return shortcodes.length > 0 ? `:${shortcodes[0]}:` : '';
-}
-
-/**
- * Returns the unicode character for an emoji shortcode
- *
- * @param {String} shortcode The shortcode (such as :thumbup:)
- * @return {String} The emoji character; null if none exists
- */
-export function shortcodeToUnicode(shortcode: string): string {
-    shortcode = shortcode.slice(1, shortcode.length - 1);
-    const data = SHORTCODE_TO_EMOJI.get(shortcode);
-    return data ? data.unicode : null;
 }
 
 export function processHtmlForSending(html: string): string {

src/IdentityAuthClient.js

@@ -149,17 +149,17 @@ export default class IdentityAuthClient {
                 title: _t("Identity server has no terms of service"),
                 description: (
                     <div>
-                        <p>{_t(
+                        <p>{ _t(
                             "This action requires accessing the default identity server " +
                             "<server /> to validate an email address or phone number, " +
                             "but the server does not have any terms of service.", {},
                             {
-                                server: () => <b>{abbreviateUrl(identityServerUrl)}</b>,
+                                server: () => <b>{ abbreviateUrl(identityServerUrl) }</b>,
                             },
-                        )}</p>
+                        ) }</p>
-                        <p>{_t(
+                        <p>{ _t(
                             "Only continue if you trust the owner of the server.",
-                        )}</p>
+                        ) }</p>
                     </div>
                 ),
                 button: _t("Trust"),

src/MatrixClientPeg.ts

@@ -105,7 +105,7 @@ export interface IMatrixClientPeg {
  * This module provides a singleton instance of this class so the 'current'
  * Matrix Client object is available easily.
  */
-class _MatrixClientPeg implements IMatrixClientPeg {
+class MatrixClientPegClass implements IMatrixClientPeg {
     // These are the default options used when when the
     // client is started in 'start'. These can be altered
     // at any time up to after the 'will_start_client'
@@ -300,7 +300,7 @@ class _MatrixClientPeg implements IMatrixClientPeg {
 }
 
 if (!window.mxMatrixClientPeg) {
-    window.mxMatrixClientPeg = new _MatrixClientPeg();
+    window.mxMatrixClientPeg = new MatrixClientPegClass();
 }
 
 export const MatrixClientPeg = window.mxMatrixClientPeg;

src/Modal.tsx

@@ -378,7 +378,7 @@ export class ModalManager {
             const dialog = (
                 <div className={classes}>
                     <div className="mx_Dialog">
-                        {modal.elem}
+                        { modal.elem }
                     </div>
                     <div className="mx_Dialog_background" onClick={this.onBackgroundClick} />
                 </div>

src/SlashCommands.tsx

@@ -438,14 +438,14 @@ export const Commands = [
                                 'Identity server',
                                 QuestionDialog, {
                                     title: _t("Use an identity server"),
-                                    description: <p>{_t(
+                                    description: <p>{ _t(
                                         "Use an identity server to invite by email. " +
                                         "Click continue to use the default identity server " +
                                         "(%(defaultIdentityServerName)s) or manage in Settings.",
                                         {
                                             defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl),
                                         },
-                                    )}</p>,
+                                    ) }</p>,
                                     button: _t("Continue"),
                                 },
                             );
@@ -480,7 +480,7 @@ export const Commands = [
         aliases: ['j', 'goto'],
         args: '<room-address>',
         description: _td('Joins room with given address'),
-        runFn: function(_, args) {
+        runFn: function(roomId, args) {
             if (args) {
                 // Note: we support 2 versions of this command. The first is
                 // the public-facing one for most users and the other is a
@@ -1027,7 +1027,7 @@ export const Commands = [
         command: "msg",
         description: _td("Sends a message to the given user"),
         args: "<user-id> <message>",
-        runFn: function(_, args) {
+        runFn: function(roomId, args) {
             if (args) {
                 // matches the first whitespace delimited group and then the rest of the string
                 const matches = args.match(/^(\S+?)(?: +(.*))?$/s);

src/TextForEvent.tsx

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-import { MatrixClientPeg } from './MatrixClientPeg';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
 import { isValid3pidInvite } from "./RoomInvite";
@@ -318,90 +317,6 @@ function textForCanonicalAliasEvent(ev: MatrixEvent): () => string | null {
     });
 }
 
-function textForCallAnswerEvent(event: MatrixEvent): () => string | null {
-    return () => {
-        const senderName = event.sender ? event.sender.name : _t('Someone');
-        const supported = MatrixClientPeg.get().supportsVoip() ? '' : _t('(not supported by this browser)');
-        return _t('%(senderName)s answered the call.', { senderName }) + ' ' + supported;
-    };
-}
-
-function textForCallHangupEvent(event: MatrixEvent): () => string | null {
-    const getSenderName = () => event.sender ? event.sender.name : _t('Someone');
-    const eventContent = event.getContent();
-    let getReason = () => "";
-    if (!MatrixClientPeg.get().supportsVoip()) {
-        getReason = () => _t('(not supported by this browser)');
-    } else if (eventContent.reason) {
-        if (eventContent.reason === "ice_failed") {
-            // We couldn't establish a connection at all
-            getReason = () => _t('(could not connect media)');
-        } else if (eventContent.reason === "ice_timeout") {
-            // We established a connection but it died
-            getReason = () => _t('(connection failed)');
-        } else if (eventContent.reason === "user_media_failed") {
-            // The other side couldn't open capture devices
-            getReason = () => _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)
-            getReason = () => _t("(an error occurred)");
-        } else if (eventContent.reason === "invite_timeout") {
-            getReason = () => _t('(no answer)');
-        } 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)
-            getReason = () => '';
-        } else {
-            getReason = () => _t('(unknown failure: %(reason)s)', { reason: eventContent.reason });
-        }
-    }
-    return () => _t('%(senderName)s ended the call.', { senderName: getSenderName() }) + ' ' + getReason();
-}
-
-function textForCallRejectEvent(event: MatrixEvent): () => string | null {
-    return () => {
-        const senderName = event.sender ? event.sender.name : _t('Someone');
-        return _t('%(senderName)s declined the call.', { senderName });
-    };
-}
-
-function textForCallInviteEvent(event: MatrixEvent): () => string | null {
-    const getSenderName = () => event.sender ? event.sender.name : _t('Someone');
-    // FIXME: Find a better way to determine this from the event?
-    let isVoice = true;
-    if (event.getContent().offer && event.getContent().offer.sdp &&
-            event.getContent().offer.sdp.indexOf('m=video') !== -1) {
-        isVoice = false;
-    }
-    const isSupported = MatrixClientPeg.get().supportsVoip();
-
-    // This ladder could be reduced down to a couple string variables, however other languages
-    // can have a hard time translating those strings. In an effort to make translations easier
-    // and more accurate, we break out the string-based variables to a couple booleans.
-    if (isVoice && isSupported) {
-        return () => _t("%(senderName)s placed a voice call.", {
-            senderName: getSenderName(),
-        });
-    } else if (isVoice && !isSupported) {
-        return () => _t("%(senderName)s placed a voice call. (not supported by this browser)", {
-            senderName: getSenderName(),
-        });
-    } else if (!isVoice && isSupported) {
-        return () => _t("%(senderName)s placed a video call.", {
-            senderName: getSenderName(),
-        });
-    } else if (!isVoice && !isSupported) {
-        return () => _t("%(senderName)s placed a video call. (not supported by this browser)", {
-            senderName: getSenderName(),
-        });
-    }
-}
-
 function textForThreePidInviteEvent(event: MatrixEvent): () => string | null {
     const senderName = event.sender ? event.sender.name : event.getSender();
 
@@ -652,10 +567,6 @@ interface IHandlers {
 
 const handlers: IHandlers = {
     'm.room.message': textForMessageEvent,
-    'm.call.invite': textForCallInviteEvent,
-    'm.call.answer': textForCallAnswerEvent,
-    'm.call.hangup': textForCallHangupEvent,
-    'm.call.reject': textForCallRejectEvent,
 };
 
 const stateHandlers: IHandlers = {

src/accessibility/KeyboardShortcuts.tsx

@@ -370,8 +370,8 @@ export const toggleDialog = () => {
     const sections = categoryOrder.map(category => {
         const list = shortcuts[category];
         return <div className="mx_KeyboardShortcutsDialog_category" key={category}>
-            <h3>{_t(category)}</h3>
+            <h3>{ _t(category) }</h3>
-            <div>{list.map(shortcut => <Shortcut key={shortcut.description} shortcut={shortcut} />)}</div>
+            <div>{ list.map(shortcut => <Shortcut key={shortcut.description} shortcut={shortcut} />) }</div>
         </div>;
     });
 

src/accessibility/Toolbar.tsx

@@ -62,9 +62,9 @@ const Toolbar: React.FC<IProps> = ({ children, ...props }) => {
     };
 
     return <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
-        {({ onKeyDownHandler }) => <div {...props} onKeyDown={onKeyDownHandler} role="toolbar">
+        { ({ onKeyDownHandler }) => <div {...props} onKeyDown={onKeyDownHandler} role="toolbar">
             { children }
-        </div>}
+        </div> }
     </RovingTabIndexProvider>;
 };
 

src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx

@@ -15,8 +15,10 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../../index';
+
-import PropTypes from 'prop-types';
+import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
+import Spinner from "../../../../components/views/elements/Spinner";
+import DialogButtons from "../../../../components/views/elements/DialogButtons";
 import dis from "../../../../dispatcher/dispatcher";
 import { _t } from '../../../../languageHandler';
 
@@ -24,46 +26,44 @@ import SettingsStore from "../../../../settings/SettingsStore";
 import EventIndexPeg from "../../../../indexing/EventIndexPeg";
 import { Action } from "../../../../dispatcher/actions";
 import { SettingLevel } from "../../../../settings/SettingLevel";
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
+
+interface IState {
+    disabling: boolean;
+}
 
 /*
  * Allows the user to disable the Event Index.
  */
-export default class DisableEventIndexDialog extends React.Component {
+export default class DisableEventIndexDialog extends React.Component<IProps, IState> {
-    static propTypes = {
+    constructor(props: IProps) {
-        onFinished: PropTypes.func.isRequired,
-    }
-
-    constructor(props) {
         super(props);
-
         this.state = {
             disabling: false,
         };
     }
 
-    _onDisable = async () => {
+    private onDisable = async (): Promise<void> => {
         this.setState({
             disabling: true,
         });
 
         await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, false);
         await EventIndexPeg.deleteEventIndex();
-        this.props.onFinished();
+        this.props.onFinished(true);
         dis.fire(Action.ViewUserSettings);
-    }
+    };
-
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const Spinner = sdk.getComponent('elements.Spinner');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
+    public render(): React.ReactNode {
         return (
             <BaseDialog onFinished={this.props.onFinished} title={_t("Are you sure?")}>
-                {_t("If disabled, messages from encrypted rooms won't appear in search results.")}
+                { _t("If disabled, messages from encrypted rooms won't appear in search results.") }
-                {this.state.disabling ? <Spinner /> : <div />}
+                { this.state.disabling ? <Spinner /> : <div /> }
                 <DialogButtons
                     primaryButton={_t('Disable')}
-                    onPrimaryButtonClick={this._onDisable}
+                    onPrimaryButtonClick={this.onDisable}
                     primaryButtonClass="danger"
                     cancelButtonClass="warning"
                     onCancel={this.props.onFinished}

src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx

@@ -134,8 +134,9 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
     }
 
     private onDisable = async () => {
-        Modal.createTrackedDialogAsync("Disable message search", "Disable message search",
+        const DisableEventIndexDialog = (await import("./DisableEventIndexDialog")).default;
-            import("./DisableEventIndexDialog"),
+        Modal.createTrackedDialog("Disable message search", "Disable message search",
+            DisableEventIndexDialog,
             null, null, /* priority = */ false, /* static = */ true,
         );
     };
@@ -161,19 +162,19 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
 
         const eventIndexingSettings = (
             <div>
-                {_t(
+                { _t(
                     "%(brand)s is securely caching encrypted messages locally for them " +
                     "to appear in search results:",
                     { brand },
-                )}
+                ) }
                 <div className='mx_SettingsTab_subsectionText'>
-                    {crawlerState}<br />
+                    { crawlerState }<br />
-                    {_t("Space used:")} {formatBytes(this.state.eventIndexSize, 0)}<br />
+                    { _t("Space used:") } { formatBytes(this.state.eventIndexSize, 0) }<br />
-                    {_t("Indexed messages:")} {formatCountLong(this.state.eventCount)}<br />
+                    { _t("Indexed messages:") } { formatCountLong(this.state.eventCount) }<br />
-                    {_t("Indexed rooms:")} {_t("%(doneRooms)s out of %(totalRooms)s", {
+                    { _t("Indexed rooms:") } { _t("%(doneRooms)s out of %(totalRooms)s", {
                         doneRooms: formatCountLong(doneRooms),
                         totalRooms: formatCountLong(this.state.roomCount),
-                    })} <br />
+                    }) } <br />
                     <Field
                         label={_t('Message downloading sleep time(ms)')}
                         type='number'
@@ -188,7 +189,7 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
                 onFinished={this.props.onFinished}
                 title={_t("Message search")}
             >
-                {eventIndexingSettings}
+                { eventIndexingSettings }
                 <DialogButtons
                     primaryButton={_t("Done")}
                     onPrimaryButtonClick={this.props.onFinished}

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

@@ -232,15 +232,15 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return <form onSubmit={this._onPassPhraseNextClick}>
-            <p>{_t(
+            <p>{ _t(
                 "<b>Warning</b>: You should only set up key backup from a trusted computer.", {},
-                { b: sub => <b>{sub}</b> },
+                { b: sub => <b>{ sub }</b> },
-            )}</p>
+            ) }</p>
-            <p>{_t(
+            <p>{ _t(
                 "We'll store an encrypted copy of your keys on our server. " +
                 "Secure your backup with a Security Phrase.",
-            )}</p>
+            ) }</p>
-            <p>{_t("For maximum security, this should be different from your account password.")}</p>
+            <p>{ _t("For maximum security, this should be different from your account password.") }</p>
 
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
                 <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
@@ -268,9 +268,9 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
             />
 
             <details>
-                <summary>{_t("Advanced")}</summary>
+                <summary>{ _t("Advanced") }</summary>
                 <AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
-                    {_t("Set up with a Security Key")}
+                    { _t("Set up with a Security Key") }
                 </AccessibleButton>
             </details>
         </form>;
@@ -299,19 +299,19 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         let passPhraseMatch = null;
         if (matchText) {
             passPhraseMatch = <div className="mx_CreateKeyBackupDialog_passPhraseMatch">
-                <div>{matchText}</div>
+                <div>{ matchText }</div>
                 <div>
                     <AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}>
-                        {changeText}
+                        { changeText }
                     </AccessibleButton>
                 </div>
             </div>;
         }
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <form onSubmit={this._onPassPhraseConfirmNextClick}>
-            <p>{_t(
+            <p>{ _t(
                 "Enter your Security Phrase a second time to confirm it.",
-            )}</p>
+            ) }</p>
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
                 <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
                     <div>
@@ -323,7 +323,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                             autoFocus={true}
                         />
                     </div>
-                    {passPhraseMatch}
+                    { passPhraseMatch }
                 </div>
             </div>
             <DialogButtons
@@ -337,27 +337,27 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
 
     _renderPhaseShowKey() {
         return <div>
-            <p>{_t(
+            <p>{ _t(
                 "Your Security Key is a safety net - you can use it to restore " +
                 "access to your encrypted messages if you forget your Security Phrase.",
-            )}</p>
+            ) }</p>
-            <p>{_t(
+            <p>{ _t(
                 "Keep a copy of it somewhere secure, like a password manager or even a safe.",
-            )}</p>
+            ) }</p>
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
                 <div className="mx_CreateKeyBackupDialog_recoveryKeyHeader">
-                    {_t("Your Security Key")}
+                    { _t("Your Security Key") }
                 </div>
                 <div className="mx_CreateKeyBackupDialog_recoveryKeyContainer">
                     <div className="mx_CreateKeyBackupDialog_recoveryKey">
-                        <code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
+                        <code ref={this._collectRecoveryKeyNode}>{ this._keyBackupInfo.recovery_key }</code>
                     </div>
                     <div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
                         <button className="mx_Dialog_primary" onClick={this._onCopyClick}>
-                            {_t("Copy")}
+                            { _t("Copy") }
                         </button>
                         <button className="mx_Dialog_primary" onClick={this._onDownloadClick}>
-                            {_t("Download")}
+                            { _t("Download") }
                         </button>
                     </div>
                 </div>
@@ -370,26 +370,26 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         if (this.state.copied) {
             introText = _t(
                 "Your Security Key has been <b>copied to your clipboard</b>, paste it to:",
-                {}, { b: s => <b>{s}</b> },
+                {}, { b: s => <b>{ s }</b> },
             );
         } else if (this.state.downloaded) {
             introText = _t(
                 "Your Security Key is in your <b>Downloads</b> folder.",
-                {}, { b: s => <b>{s}</b> },
+                {}, { b: s => <b>{ s }</b> },
             );
         }
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
-            {introText}
+            { introText }
             <ul>
-                <li>{_t("<b>Print it</b> and store it somewhere safe", {}, { b: s => <b>{s}</b> })}</li>
+                <li>{ _t("<b>Print it</b> and store it somewhere safe", {}, { b: s => <b>{ s }</b> }) }</li>
-                <li>{_t("<b>Save it</b> on a USB key or backup drive", {}, { b: s => <b>{s}</b> })}</li>
+                <li>{ _t("<b>Save it</b> on a USB key or backup drive", {}, { b: s => <b>{ s }</b> }) }</li>
-                <li>{_t("<b>Copy it</b> to your personal cloud storage", {}, { b: s => <b>{s}</b> })}</li>
+                <li>{ _t("<b>Copy it</b> to your personal cloud storage", {}, { b: s => <b>{ s }</b> }) }</li>
             </ul>
             <DialogButtons primaryButton={_t("Continue")}
                 onPrimaryButtonClick={this._createBackup}
                 hasCancel={false}>
-                <button onClick={this._onKeepItSafeBackClick}>{_t("Back")}</button>
+                <button onClick={this._onKeepItSafeBackClick}>{ _t("Back") }</button>
             </DialogButtons>
         </div>;
     }
@@ -404,9 +404,9 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
     _renderPhaseDone() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
-            <p>{_t(
+            <p>{ _t(
                 "Your keys are being backed up (the first backup could take a few minutes).",
-            )}</p>
+            ) }</p>
             <DialogButtons primaryButton={_t('OK')}
                 onPrimaryButtonClick={this._onDone}
                 hasCancel={false}
@@ -417,10 +417,10 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
     _renderPhaseOptOutConfirm() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
-            {_t(
+            { _t(
                 "Without setting up Secure Message Recovery, you won't be able to restore your " +
                 "encrypted message history if you log out or use another session.",
-            )}
+            ) }
             <DialogButtons primaryButton={_t('Set up Secure Message Recovery')}
                 onPrimaryButtonClick={this._onSetUpClick}
                 hasCancel={false}
@@ -457,7 +457,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         if (this.state.error) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             content = <div>
-                <p>{_t("Unable to create key backup")}</p>
+                <p>{ _t("Unable to create key backup") }</p>
                 <div className="mx_Dialog_buttons">
                     <DialogButtons primaryButton={_t('Retry')}
                         onPrimaryButtonClick={this._createBackup}
@@ -499,7 +499,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                 hasCancel={[PHASE_PASSPHRASE, PHASE_DONE].includes(this.state.phase)}
             >
                 <div>
-                    {content}
+                    { content }
                 </div>
             </BaseDialog>
         );

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

@@ -475,9 +475,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             >
                 <div className="mx_CreateSecretStorageDialog_optionTitle">
                     <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup"></span>
-                    {_t("Generate a Security Key")}
+                    { _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>
+                <div>{ _t("We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.") }</div>
             </StyledRadioButton>
         );
     }
@@ -494,9 +494,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             >
                 <div className="mx_CreateSecretStorageDialog_optionTitle">
                     <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase"></span>
-                    {_t("Enter a Security Phrase")}
+                    { _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>
+                <div>{ _t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.") }</div>
             </StyledRadioButton>
         );
     }
@@ -507,13 +507,13 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         const optionPassphrase = setupMethods.includes("passphrase") ? this._renderOptionPassphrase() : null;
 
         return <form onSubmit={this._onChooseKeyPassphraseFormSubmit}>
-            <p className="mx_CreateSecretStorageDialog_centeredBody">{_t(
+            <p className="mx_CreateSecretStorageDialog_centeredBody">{ _t(
                 "Safeguard against losing access to encrypted messages & data by " +
                 "backing up encryption keys on your server.",
-            )}</p>
+            ) }</p>
             <div className="mx_CreateSecretStorageDialog_primaryContainer" role="radiogroup">
-                {optionKey}
+                { optionKey }
-                {optionPassphrase}
+                { optionPassphrase }
             </div>
             <DialogButtons
                 primaryButton={_t("Continue")}
@@ -536,7 +536,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         let nextCaption = _t("Next");
         if (this.state.canUploadKeysWithPasswordOnly) {
             authPrompt = <div>
-                <div>{_t("Enter your account password to confirm the upgrade:")}</div>
+                <div>{ _t("Enter your account password to confirm the upgrade:") }</div>
                 <div><Field
                     type="password"
                     label={_t("Password")}
@@ -548,22 +548,22 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             </div>;
         } else if (!this.state.backupSigStatus.usable) {
             authPrompt = <div>
-                <div>{_t("Restore your key backup to upgrade your encryption")}</div>
+                <div>{ _t("Restore your key backup to upgrade your encryption") }</div>
             </div>;
             nextCaption = _t("Restore");
         } else {
             authPrompt = <p>
-                {_t("You'll need to authenticate with the server to confirm the upgrade.")}
+                { _t("You'll need to authenticate with the server to confirm the upgrade.") }
             </p>;
         }
 
         return <form onSubmit={this._onMigrateFormSubmit}>
-            <p>{_t(
+            <p>{ _t(
                 "Upgrade this session to allow it to verify other sessions, " +
                 "granting them access to encrypted messages and marking them " +
                 "as trusted for other users.",
-            )}</p>
+            ) }</p>
-            <div>{authPrompt}</div>
+            <div>{ authPrompt }</div>
             <DialogButtons
                 primaryButton={nextCaption}
                 onPrimaryButtonClick={this._onMigrateFormSubmit}
@@ -571,7 +571,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 primaryDisabled={this.state.canUploadKeysWithPasswordOnly && !this.state.accountPassword}
             >
                 <button type="button" className="danger" onClick={this._onCancelClick}>
-                    {_t('Skip')}
+                    { _t('Skip') }
                 </button>
             </DialogButtons>
         </form>;
@@ -579,10 +579,10 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
 
     _renderPhasePassPhrase() {
         return <form onSubmit={this._onPassPhraseNextClick}>
-            <p>{_t(
+            <p>{ _t(
                 "Enter a security phrase only you know, as it’s used to safeguard your data. " +
                 "To be secure, you shouldn’t re-use your account password.",
-            )}</p>
+            ) }</p>
 
             <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
                 <PassphraseField
@@ -609,7 +609,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 <button type="button"
                     onClick={this._onCancelClick}
                     className="danger"
-                >{_t("Cancel")}</button>
+                >{ _t("Cancel") }</button>
             </DialogButtons>
         </form>;
     }
@@ -637,18 +637,18 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         let passPhraseMatch = null;
         if (matchText) {
             passPhraseMatch = <div>
-                <div>{matchText}</div>
+                <div>{ matchText }</div>
                 <div>
                     <AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}>
-                        {changeText}
+                        { changeText }
                     </AccessibleButton>
                 </div>
             </div>;
         }
         return <form onSubmit={this._onPassPhraseConfirmNextClick}>
-            <p>{_t(
+            <p>{ _t(
                 "Enter your Security Phrase a second time to confirm it.",
-            )}</p>
+            ) }</p>
             <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
                 <Field
                     type="password"
@@ -660,7 +660,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                     autoComplete="new-password"
                 />
                 <div className="mx_CreateSecretStorageDialog_passPhraseMatch">
-                    {passPhraseMatch}
+                    { passPhraseMatch }
                 </div>
             </div>
             <DialogButtons
@@ -672,7 +672,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 <button type="button"
                     onClick={this._onCancelClick}
                     className="danger"
-                >{_t("Skip")}</button>
+                >{ _t("Skip") }</button>
             </DialogButtons>
         </form>;
     }
@@ -691,35 +691,35 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             </div>;
         }
         return <div>
-            <p>{_t(
+            <p>{ _t(
                 "Store your Security Key somewhere safe, like a password manager or a safe, " +
                 "as it’s used to safeguard your encrypted data.",
-            )}</p>
+            ) }</p>
             <div className="mx_CreateSecretStorageDialog_primaryContainer">
                 <div className="mx_CreateSecretStorageDialog_recoveryKeyContainer">
                     <div className="mx_CreateSecretStorageDialog_recoveryKey">
-                        <code ref={this._collectRecoveryKeyNode}>{this._recoveryKey.encodedPrivateKey}</code>
+                        <code ref={this._collectRecoveryKeyNode}>{ this._recoveryKey.encodedPrivateKey }</code>
                     </div>
                     <div className="mx_CreateSecretStorageDialog_recoveryKeyButtons">
                         <AccessibleButton kind='primary' className="mx_Dialog_primary"
                             onClick={this._onDownloadClick}
                             disabled={this.state.phase === PHASE_STORING}
                         >
-                            {_t("Download")}
+                            { _t("Download") }
                         </AccessibleButton>
-                        <span>{_t("or")}</span>
+                        <span>{ _t("or") }</span>
                         <AccessibleButton
                             kind='primary'
                             className="mx_Dialog_primary mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn"
                             onClick={this._onCopyClick}
                             disabled={this.state.phase === PHASE_STORING}
                         >
-                            {this.state.copied ? _t("Copied!") : _t("Copy")}
+                            { this.state.copied ? _t("Copied!") : _t("Copy") }
                         </AccessibleButton>
                     </div>
                 </div>
             </div>
-            {continueButton}
+            { continueButton }
         </div>;
     }
 
@@ -732,7 +732,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
 
     _renderPhaseLoadError() {
         return <div>
-            <p>{_t("Unable to query secret storage status")}</p>
+            <p>{ _t("Unable to query secret storage status") }</p>
             <div className="mx_Dialog_buttons">
                 <DialogButtons primaryButton={_t('Retry')}
                     onPrimaryButtonClick={this._onLoadRetryClick}
@@ -745,17 +745,17 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
 
     _renderPhaseSkipConfirm() {
         return <div>
-            <p>{_t(
+            <p>{ _t(
                 "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.",
-            )}</p>
+            ) }</p>
-            <p>{_t(
+            <p>{ _t(
                 "You can also set up Secure Backup & manage your keys in Settings.",
-            )}</p>
+            ) }</p>
             <DialogButtons primaryButton={_t('Go back')}
                 onPrimaryButtonClick={this._onGoBackClick}
                 hasCancel={false}
             >
-                <button type="button" className="danger" onClick={this._onCancel}>{_t('Cancel')}</button>
+                <button type="button" className="danger" onClick={this._onCancel}>{ _t('Cancel') }</button>
             </DialogButtons>
         </div>;
     }
@@ -787,7 +787,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         let content;
         if (this.state.error) {
             content = <div>
-                <p>{_t("Unable to set up secret storage")}</p>
+                <p>{ _t("Unable to set up secret storage") }</p>
                 <div className="mx_Dialog_buttons">
                     <DialogButtons primaryButton={_t('Retry')}
                         onPrimaryButtonClick={this._bootstrapSecretStorage}
@@ -857,7 +857,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 fixedWidth={false}
             >
                 <div>
-                    {content}
+                    { content }
                 </div>
             </BaseDialog>
         );

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

@@ -54,28 +54,28 @@ export default class NewRecoveryMethodDialog extends React.PureComponent {
         const DialogButtons = sdk.getComponent("views.elements.DialogButtons");
 
         const title = <span className="mx_KeyBackupFailedDialog_title">
-            {_t("New Recovery Method")}
+            { _t("New Recovery Method") }
         </span>;
 
-        const newMethodDetected = <p>{_t(
+        const newMethodDetected = <p>{ _t(
             "A new Security Phrase and key for Secure Messages have been detected.",
-        )}</p>;
+        ) }</p>;
 
-        const hackWarning = <p className="warning">{_t(
+        const hackWarning = <p className="warning">{ _t(
             "If you didn't set the new recovery method, an " +
             "attacker may be trying to access your account. " +
             "Change your account password and set a new recovery " +
             "method immediately in Settings.",
-        )}</p>;
+        ) }</p>;
 
         let content;
         if (MatrixClientPeg.get().getKeyBackupEnabled()) {
             content = <div>
-                {newMethodDetected}
+                { newMethodDetected }
-                <p>{_t(
+                <p>{ _t(
                     "This session is encrypting history using the new recovery method.",
-                )}</p>
+                ) }</p>
-                {hackWarning}
+                { hackWarning }
                 <DialogButtons
                     primaryButton={_t("OK")}
                     onPrimaryButtonClick={this.onOkClick}
@@ -85,8 +85,8 @@ export default class NewRecoveryMethodDialog extends React.PureComponent {
             </div>;
         } else {
             content = <div>
-                {newMethodDetected}
+                { newMethodDetected }
-                {hackWarning}
+                { hackWarning }
                 <DialogButtons
                     primaryButton={_t("Set up Secure Messages")}
                     onPrimaryButtonClick={this.onSetupClick}
@@ -101,7 +101,7 @@ export default class NewRecoveryMethodDialog extends React.PureComponent {
                 onFinished={this.props.onFinished}
                 title={title}
             >
-                {content}
+                { content }
             </BaseDialog>
         );
     }

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

@@ -46,7 +46,7 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent {
         const DialogButtons = sdk.getComponent("views.elements.DialogButtons");
 
         const title = <span className="mx_KeyBackupFailedDialog_title">
-            {_t("Recovery Method Removed")}
+            { _t("Recovery Method Removed") }
         </span>;
 
         return (
@@ -55,21 +55,21 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent {
                 title={title}
             >
                 <div>
-                    <p>{_t(
+                    <p>{ _t(
                         "This session has detected that your Security Phrase and key " +
                         "for Secure Messages have been removed.",
-                    )}</p>
+                    ) }</p>
-                    <p>{_t(
+                    <p>{ _t(
                         "If you did this accidentally, you can setup Secure Messages on " +
                         "this session which will re-encrypt this session's message " +
                         "history with a new recovery method.",
-                    )}</p>
+                    ) }</p>
-                    <p className="warning">{_t(
+                    <p className="warning">{ _t(
                         "If you didn't remove the recovery method, an " +
                         "attacker may be trying to access your account. " +
                         "Change your account password and set a new recovery " +
                         "method immediately in Settings.",
-                    )}</p>
+                    ) }</p>
                     <DialogButtons
                         primaryButton={_t("Set up Secure Messages")}
                         onPrimaryButtonClick={this.onSetupClick}

src/autocomplete/EmojiProvider.tsx

@@ -25,7 +25,6 @@ import { PillCompletion } from './Components';
 import { ICompletion, ISelectionRange } from './Autocompleter';
 import { uniq, sortBy } from 'lodash';
 import SettingsStore from "../settings/SettingsStore";
-import { shortcodeToUnicode } from '../HtmlUtils';
 import { EMOJI, IEmoji } from '../emoji';
 
 import EMOTICON_REGEX from 'emojibase-regex/emoticon';
@@ -36,20 +35,18 @@ const LIMIT = 20;
 // anchored to only match from the start of parts otherwise it'll show emoji suggestions whilst typing matrix IDs
 const EMOJI_REGEX = new RegExp('(' + EMOTICON_REGEX.source + '|(?:^|\\s):[+-\\w]*:?)$', 'g');
 
-interface IEmojiShort {
+interface ISortedEmoji {
     emoji: IEmoji;
-    shortname: string;
     _orderBy: number;
 }
 
-const EMOJI_SHORTNAMES: IEmojiShort[] = EMOJI.sort((a, b) => {
+const SORTED_EMOJI: ISortedEmoji[] = EMOJI.sort((a, b) => {
     if (a.group === b.group) {
         return a.order - b.order;
     }
     return a.group - b.group;
 }).map((emoji, index) => ({
     emoji,
-    shortname: `:${emoji.shortcodes[0]}:`,
     // Include the index so that we can preserve the original order
     _orderBy: index,
 }));
@@ -64,20 +61,18 @@ function score(query, space) {
 }
 
 export default class EmojiProvider extends AutocompleteProvider {
-    matcher: QueryMatcher<IEmojiShort>;
+    matcher: QueryMatcher<ISortedEmoji>;
-    nameMatcher: QueryMatcher<IEmojiShort>;
+    nameMatcher: QueryMatcher<ISortedEmoji>;
 
     constructor() {
         super(EMOJI_REGEX);
-        this.matcher = new QueryMatcher<IEmojiShort>(EMOJI_SHORTNAMES, {
+        this.matcher = new QueryMatcher<ISortedEmoji>(SORTED_EMOJI, {
-            keys: ['emoji.emoticon', 'shortname'],
+            keys: ['emoji.emoticon'],
-            funcs: [
+            funcs: [o => o.emoji.shortcodes.map(s => `:${s}:`)],
-                (o) => o.emoji.shortcodes.length > 1 ? o.emoji.shortcodes.slice(1).map(s => `:${s}:`).join(" ") : "", // aliases
-            ],
             // For matching against ascii equivalents
             shouldMatchWordsOnly: false,
         });
-        this.nameMatcher = new QueryMatcher(EMOJI_SHORTNAMES, {
+        this.nameMatcher = new QueryMatcher(SORTED_EMOJI, {
             keys: ['emoji.annotation'],
             // For removing punctuation
             shouldMatchWordsOnly: true,
@@ -105,34 +100,33 @@ export default class EmojiProvider extends AutocompleteProvider {
 
             const sorters = [];
             // make sure that emoticons come first
-            sorters.push((c) => score(matchedString, c.emoji.emoticon || ""));
+            sorters.push(c => score(matchedString, c.emoji.emoticon || ""));
 
-            // then sort by score (Infinity if matchedString not in shortname)
+            // then sort by score (Infinity if matchedString not in shortcode)
-            sorters.push((c) => score(matchedString, c.shortname));
+            sorters.push(c => score(matchedString, c.emoji.shortcodes[0]));
             // then sort by max score of all shortcodes, trim off the `:`
-            sorters.push((c) => Math.min(...c.emoji.shortcodes.map(s => score(matchedString.substring(1), s))));
+            sorters.push(c => Math.min(
-            // If the matchedString is not empty, sort by length of shortname. Example:
+                ...c.emoji.shortcodes.map(s => score(matchedString.substring(1), s)),
+            ));
+            // If the matchedString is not empty, sort by length of shortcode. Example:
             //  matchedString = ":bookmark"
             //  completions = [":bookmark:", ":bookmark_tabs:", ...]
             if (matchedString.length > 1) {
-                sorters.push((c) => c.shortname.length);
+                sorters.push(c => c.emoji.shortcodes[0].length);
             }
             // Finally, sort by original ordering
-            sorters.push((c) => c._orderBy);
+            sorters.push(c => c._orderBy);
             completions = sortBy(uniq(completions), sorters);
 
-            completions = completions.map(({ shortname }) => {
+            completions = completions.map(c => ({
-                const unicode = shortcodeToUnicode(shortname);
+                completion: c.emoji.unicode,
-                return {
+                component: (
-                    completion: unicode,
+                    <PillCompletion title={`:${c.emoji.shortcodes[0]}:`} aria-label={c.emoji.unicode}>
-                    component: (
+                        <span>{ c.emoji.unicode }</span>
-                        <PillCompletion title={shortname} aria-label={unicode}>
+                    </PillCompletion>
-                            <span>{ unicode }</span>
+                ),
-                        </PillCompletion>
+                range,
-                    ),
+            })).slice(0, LIMIT);
-                    range,
-                };
-            }).slice(0, LIMIT);
         }
         return completions;
     }

src/autocomplete/UserProvider.tsx

@@ -109,7 +109,7 @@ export default class UserProvider extends AutocompleteProvider {
         limit = -1,
     ): Promise<ICompletion[]> {
         // lazy-load user list into matcher
-        if (!this.users) this._makeUsers();
+        if (!this.users) this.makeUsers();
 
         let completions = [];
         const { command, range } = this.getCurrentCommand(rawQuery, selection, force);
@@ -147,7 +147,7 @@ export default class UserProvider extends AutocompleteProvider {
         return _t('Users');
     }
 
-    _makeUsers() {
+    private makeUsers() {
         const events = this.room.getLiveTimeline().getEvents();
         const lastSpoken = {};
 

src/components/structures/CallEventGrouper.ts

@@ -0,0 +1,145 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { CallEvent, CallState, CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import CallHandler, { CallHandlerEvent } from '../../CallHandler';
+import { EventEmitter } from 'events';
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+
+export enum CallEventGrouperEvent {
+    StateChanged = "state_changed",
+    SilencedChanged = "silenced_changed",
+}
+
+const SUPPORTED_STATES = [
+    CallState.Connected,
+    CallState.Connecting,
+    CallState.Ringing,
+];
+
+export enum CustomCallState {
+    Missed = "missed",
+}
+
+export default class CallEventGrouper extends EventEmitter {
+    private events: Set<MatrixEvent> = new Set<MatrixEvent>();
+    private call: MatrixCall;
+    public state: CallState | CustomCallState;
+
+    constructor() {
+        super();
+
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.setCall);
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged);
+    }
+
+    private get invite(): MatrixEvent {
+        return [...this.events].find((event) => event.getType() === EventType.CallInvite);
+    }
+
+    private get hangup(): MatrixEvent {
+        return [...this.events].find((event) => event.getType() === EventType.CallHangup);
+    }
+
+    private get reject(): MatrixEvent {
+        return [...this.events].find((event) => event.getType() === EventType.CallReject);
+    }
+
+    public get isVoice(): boolean {
+        const invite = this.invite;
+        if (!invite) return;
+
+        // FIXME: Find a better way to determine this from the event?
+        if (invite.getContent()?.offer?.sdp?.indexOf('m=video') !== -1) return false;
+        return true;
+    }
+
+    public get hangupReason(): string | null {
+        return this.hangup?.getContent()?.reason;
+    }
+
+    /**
+     * Returns true if there are only events from the other side - we missed the call
+     */
+    private get callWasMissed(): boolean {
+        return ![...this.events].some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId());
+    }
+
+    private get callId(): string {
+        return [...this.events][0].getContent().call_id;
+    }
+
+    private onSilencedCallsChanged = () => {
+        const newState = CallHandler.sharedInstance().isCallSilenced(this.callId);
+        this.emit(CallEventGrouperEvent.SilencedChanged, newState);
+    };
+
+    public answerCall = () => {
+        this.call?.answer();
+    };
+
+    public rejectCall = () => {
+        this.call?.reject();
+    };
+
+    public callBack = () => {
+        defaultDispatcher.dispatch({
+            action: 'place_call',
+            type: this.isVoice ? CallType.Voice : CallType.Video,
+            room_id: [...this.events][0]?.getRoomId(),
+        });
+    };
+
+    public toggleSilenced = () => {
+        const silenced = CallHandler.sharedInstance().isCallSilenced(this.callId);
+        silenced ?
+            CallHandler.sharedInstance().unSilenceCall(this.callId) :
+            CallHandler.sharedInstance().silenceCall(this.callId);
+    };
+
+    private setCallListeners() {
+        if (!this.call) return;
+        this.call.addListener(CallEvent.State, this.setState);
+    }
+
+    private setState = () => {
+        if (SUPPORTED_STATES.includes(this.call?.state)) {
+            this.state = this.call.state;
+        } else {
+            if (this.callWasMissed) this.state = CustomCallState.Missed;
+            else if (this.reject) this.state = CallState.Ended;
+            else if (this.hangup) this.state = CallState.Ended;
+            else if (this.invite && this.call) this.state = CallState.Connecting;
+        }
+        this.emit(CallEventGrouperEvent.StateChanged, this.state);
+    };
+
+    private setCall = () => {
+        if (this.call) return;
+
+        this.call = CallHandler.sharedInstance().getCallById(this.callId);
+        this.setCallListeners();
+        this.setState();
+    };
+
+    public add(event: MatrixEvent) {
+        this.events.add(event);
+        this.setCall();
+    }
+}

src/components/structures/CustomRoomTagPanel.js

@@ -56,7 +56,7 @@ class CustomRoomTagPanel extends React.Component {
         return (<div className={classes}>
             <div className="mx_CustomRoomTagPanel_divider" />
             <AutoHideScrollbar className="mx_CustomRoomTagPanel_scroller">
-                {tags}
+                { tags }
             </AutoHideScrollbar>
         </div>);
     }
@@ -84,7 +84,7 @@ class CustomRoomTagTile extends React.Component {
                 "mx_TagTile_badge": true,
                 "mx_TagTile_badgeHighlight": badgeNotifState.hasMentions,
             });
-            badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badgeNotifState.count)}</div>);
+            badgeElement = (<div className={badgeClasses}>{ FormattingUtils.formatCount(badgeNotifState.count) }</div>);
         }
 
         return (

src/components/structures/EmbeddedPage.js

@@ -125,11 +125,11 @@ export default class EmbeddedPage extends React.PureComponent {
 
         if (this.props.scrollbar) {
             return <AutoHideScrollbar className={classes}>
-                {content}
+                { content }
             </AutoHideScrollbar>;
         } else {
             return <div className={classes}>
-                {content}
+                { content }
             </div>;
         }
     }

src/components/structures/FilePanel.tsx

@@ -241,8 +241,8 @@ class FilePanel extends React.Component<IProps, IState> {
         // wrap a TimelinePanel with the jump-to-event bits turned off.
 
         const emptyState = (<div className="mx_RightPanel_empty mx_FilePanel_empty">
-            <h2>{_t('No files visible in this room')}</h2>
+            <h2>{ _t('No files visible in this room') }</h2>
-            <p>{_t('Attach files from chat or just drag and drop them anywhere in a room.')}</p>
+            <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);
@@ -262,7 +262,7 @@ class FilePanel extends React.Component<IProps, IState> {
                         manageReadReceipts={false}
                         manageReadMarkers={false}
                         timelineSet={this.state.timelineSet}
-                        showUrlPreview = {false}
+                        showUrlPreview={false}
                         onPaginationRequest={this.onPaginationRequest}
                         tileShape={TileShape.FileGrid}
                         resizeNotifier={this.props.resizeNotifier}

src/components/structures/GenericErrorPage.js

@@ -28,8 +28,8 @@ export default class GenericErrorPage extends React.PureComponent {
     render() {
         return <div className='mx_GenericErrorPage'>
             <div className='mx_GenericErrorPage_box'>
-                <h1>{this.props.title}</h1>
+                <h1>{ this.props.title }</h1>
-                <p>{this.props.message}</p>
+                <p>{ this.props.message }</p>
             </div>
         </div>;
     }

src/components/structures/GroupView.js

@@ -819,12 +819,12 @@ export default class GroupView extends React.Component {
         let hostingSignup = null;
         if (hostingSignupLink && this.state.isUserPrivileged) {
             hostingSignup = <div className="mx_GroupView_hostingSignup">
-                {_t(
+                { _t(
                     "Want more than a community? <a>Get your own server</a>", {},
                     {
-                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">{sub}</a>,
+                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">{ sub }</a>,
                     },
-                )}
+                ) }
                 <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
                     <img src={require("../../../res/img/external-link.svg")} width="11" height="10" alt='' />
                 </a>

src/components/structures/LeftPanel.tsx

@@ -429,7 +429,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                     onSelectRoom={this.selectRoom}
                 />
 
-                {dialPadButton}
+                { dialPadButton }
 
                 <AccessibleTooltipButton
                     className={classNames("mx_LeftPanel_exploreButton", {
@@ -448,7 +448,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             leftLeftPanel = (
                 <div className="mx_LeftPanel_GroupFilterPanelContainer">
                     <GroupFilterPanel />
-                    {SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null}
+                    { SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
                 </div>
             );
         }
@@ -476,11 +476,11 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         return (
             <div className={containerClasses} ref={this.ref}>
-                {leftLeftPanel}
+                { leftLeftPanel }
                 <aside className="mx_LeftPanel_roomListContainer">
-                    {this.renderHeader()}
+                    { this.renderHeader() }
-                    {this.renderSearchDialExplore()}
+                    { this.renderSearchDialExplore() }
-                    {this.renderBreadcrumbs()}
+                    { this.renderBreadcrumbs() }
                     <RoomListNumResults onVisibilityChange={this.refreshStickyHeaders} />
                     <div className="mx_LeftPanel_roomListWrapper">
                         <div
@@ -490,7 +490,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                             // overflow:scroll;, so force it out of tab order.
                             tabIndex={-1}
                         >
-                            {roomList}
+                            { roomList }
                         </div>
                     </div>
                     { !this.props.isMinimized && <LeftPanelWidget /> }

src/components/structures/LeftPanelWidget.tsx

@@ -125,15 +125,15 @@ const LeftPanelWidget: React.FC = () => {
                     <span>{ WidgetUtils.getWidgetName(app) }</span>
                 </AccessibleButton>
 
-                {/* Code for the maximise button for once we have full screen widgets */}
+                { /* Code for the maximise button for once we have full screen widgets */ }
-                {/*<AccessibleTooltipButton
+                { /*<AccessibleTooltipButton
                     tabIndex={tabIndex}
                     onClick={() => {
                     }}
                     className="mx_LeftPanelWidget_maximizeButton"
                     tooltipClassName="mx_LeftPanelWidget_maximizeButtonTooltip"
                     title={_t("Maximize")}
-                />*/}
+                />*/ }
             </div>
         </div>
 

src/components/structures/LoggedInView.tsx

@@ -17,8 +17,8 @@ limitations under the License.
 */
 
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 
 import { Key } from '../../Keyboard';
 import PageTypes from '../../PageTypes';
@@ -79,6 +79,8 @@ function canElementReceiveInput(el) {
 
 interface IProps {
     matrixClient: MatrixClient;
+    // Called with the credentials of a registered user (if they were a ROU that
+    // transitioned to PWLU)
     onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>;
     hideToSRUsers: boolean;
     resizeNotifier: ResizeNotifier;
@@ -140,18 +142,6 @@ interface IState {
 class LoggedInView extends React.Component<IProps, IState> {
     static displayName = 'LoggedInView';
 
-    static propTypes = {
-        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
-        page_type: PropTypes.string.isRequired,
-        onRoomCreated: PropTypes.func,
-
-        // Called with the credentials of a registered user (if they were a ROU that
-        // transitioned to PWLU)
-        onRegistered: PropTypes.func,
-
-        // and lots and lots of other stuff.
-    };
-
     protected readonly _matrixClient: MatrixClient;
     protected readonly _roomView: React.RefObject<any>;
     protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
@@ -181,10 +171,10 @@ class LoggedInView extends React.Component<IProps, IState> {
     }
 
     componentDidMount() {
-        document.addEventListener('keydown', this._onNativeKeyDown, false);
+        document.addEventListener('keydown', this.onNativeKeyDown, false);
         CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.onCallsChanged);
 
-        this._updateServerNoticeEvents();
+        this.updateServerNoticeEvents();
 
         this._matrixClient.on("accountData", this.onAccountData);
         this._matrixClient.on("sync", this.onSync);
@@ -200,13 +190,13 @@ class LoggedInView extends React.Component<IProps, IState> {
             "useCompactLayout", null, this.onCompactLayoutChanged,
         );
 
-        this.resizer = this._createResizer();
+        this.resizer = this.createResizer();
         this.resizer.attach();
-        this._loadResizerPreferences();
+        this.loadResizerPreferences();
     }
 
     componentWillUnmount() {
-        document.removeEventListener('keydown', this._onNativeKeyDown, false);
+        document.removeEventListener('keydown', this.onNativeKeyDown, false);
         CallHandler.sharedInstance().removeListener(CallHandlerEvent.CallsChanged, this.onCallsChanged);
         this._matrixClient.removeListener("accountData", this.onAccountData);
         this._matrixClient.removeListener("sync", this.onSync);
@@ -221,37 +211,37 @@ class LoggedInView extends React.Component<IProps, IState> {
         });
     };
 
-    canResetTimelineInRoom = (roomId) => {
+    public canResetTimelineInRoom = (roomId: string) => {
         if (!this._roomView.current) {
             return true;
         }
         return this._roomView.current.canResetTimeline();
     };
 
-    _createResizer() {
+    private createResizer() {
-        let size;
+        let panelSize;
-        let collapsed;
+        let panelCollapsed;
         const collapseConfig: ICollapseConfig = {
             // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
             toggleSize: 206 - 50,
-            onCollapsed: (_collapsed) => {
+            onCollapsed: (collapsed) => {
-                collapsed = _collapsed;
+                panelCollapsed = collapsed;
-                if (_collapsed) {
+                if (collapsed) {
                     dis.dispatch({ action: "hide_left_panel" });
                     window.localStorage.setItem("mx_lhs_size", '0');
                 } else {
                     dis.dispatch({ action: "show_left_panel" });
                 }
             },
-            onResized: (_size) => {
+            onResized: (size) => {
-                size = _size;
+                panelSize = size;
                 this.props.resizeNotifier.notifyLeftHandleResized();
             },
             onResizeStart: () => {
                 this.props.resizeNotifier.startResizing();
             },
             onResizeStop: () => {
-                if (!collapsed) window.localStorage.setItem("mx_lhs_size", '' + size);
+                if (!panelCollapsed) window.localStorage.setItem("mx_lhs_size", '' + panelSize);
                 this.props.resizeNotifier.stopResizing();
             },
             isItemCollapsed: domNode => {
@@ -267,7 +257,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         return resizer;
     }
 
-    _loadResizerPreferences() {
+    private loadResizerPreferences() {
         let lhsSize = parseInt(window.localStorage.getItem("mx_lhs_size"), 10);
         if (isNaN(lhsSize)) {
             lhsSize = 350;
@@ -275,7 +265,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.resizer.forHandleAt(0).resize(lhsSize);
     }
 
-    onAccountData = (event) => {
+    private onAccountData = (event: MatrixEvent) => {
         if (event.getType() === "m.ignored_user_list") {
             dis.dispatch({ action: "ignore_state_changed" });
         }
@@ -307,16 +297,16 @@ class LoggedInView extends React.Component<IProps, IState> {
         }
 
         if (oldSyncState === 'PREPARED' && syncState === 'SYNCING') {
-            this._updateServerNoticeEvents();
+            this.updateServerNoticeEvents();
         } else {
-            this._calculateServerLimitToast(this.state.syncErrorData, this.state.usageLimitEventContent);
+            this.calculateServerLimitToast(this.state.syncErrorData, this.state.usageLimitEventContent);
         }
     };
 
     onRoomStateEvents = (ev, state) => {
         const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
         if (serverNoticeList && serverNoticeList.some(r => r.roomId === ev.getRoomId())) {
-            this._updateServerNoticeEvents();
+            this.updateServerNoticeEvents();
         }
     };
 
@@ -326,7 +316,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         });
     };
 
-    _calculateServerLimitToast(syncError: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) {
+    private calculateServerLimitToast(syncError: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) {
         const error = syncError && syncError.error && syncError.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED";
         if (error) {
             usageLimitEventContent = syncError.error.data;
@@ -346,7 +336,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         }
     }
 
-    _updateServerNoticeEvents = async () => {
+    private updateServerNoticeEvents = async () => {
         const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
         if (!serverNoticeList) return [];
 
@@ -378,7 +368,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             );
         });
         const usageLimitEventContent = usageLimitEvent && usageLimitEvent.getContent();
-        this._calculateServerLimitToast(this.state.syncErrorData, usageLimitEventContent);
+        this.calculateServerLimitToast(this.state.syncErrorData, usageLimitEventContent);
         this.setState({
             usageLimitEventContent,
             usageLimitEventTs: pinnedEventTs,
@@ -387,7 +377,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         });
     };
 
-    _onPaste = (ev) => {
+    private onPaste = (ev) => {
         let canReceiveInput = false;
         let element = ev.target;
         // test for all parents because the target can be a child of a contenteditable element
@@ -425,22 +415,22 @@ class LoggedInView extends React.Component<IProps, IState> {
     We also listen with a native listener on the document to get keydown events when no element is focused.
     Bubbling is irrelevant here as the target is the body element.
     */
-    _onReactKeyDown = (ev) => {
+    private onReactKeyDown = (ev) => {
         // events caught while bubbling up on the root element
         // of this component, so something must be focused.
-        this._onKeyDown(ev);
+        this.onKeyDown(ev);
     };
 
-    _onNativeKeyDown = (ev) => {
+    private onNativeKeyDown = (ev) => {
         // only pass this if there is no focused element.
-        // if there is, _onKeyDown will be called by the
+        // if there is, onKeyDown will be called by the
         // react keydown handler that respects the react bubbling order.
         if (ev.target === document.body) {
-            this._onKeyDown(ev);
+            this.onKeyDown(ev);
         }
     };
 
-    _onKeyDown = (ev) => {
+    private onKeyDown = (ev) => {
         let handled = false;
 
         const roomAction = getKeyBindingsManager().getRoomAction(ev);
@@ -450,7 +440,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             case RoomAction.JumpToFirstMessage:
             case RoomAction.JumpToLatestMessage:
                 // pass the event down to the scroll panel
-                this._onScrollKeyPressed(ev);
+                this.onScrollKeyPressed(ev);
                 handled = true;
                 break;
             case RoomAction.FocusSearch:
@@ -565,7 +555,7 @@ class LoggedInView extends React.Component<IProps, IState> {
      * dispatch a page-up/page-down/etc to the appropriate component
      * @param {Object} ev The key event
      */
-    _onScrollKeyPressed = (ev) => {
+    private onScrollKeyPressed = (ev) => {
         if (this._roomView.current) {
             this._roomView.current.handleScrollKey(ev);
         }
@@ -625,8 +615,8 @@ class LoggedInView extends React.Component<IProps, IState> {
         return (
             <MatrixClientContext.Provider value={this._matrixClient}>
                 <div
-                    onPaste={this._onPaste}
+                    onPaste={this.onPaste}
-                    onKeyDown={this._onReactKeyDown}
+                    onKeyDown={this.onReactKeyDown}
                     className='mx_MatrixChat_wrapper'
                     aria-hidden={this.props.hideToSRUsers}
                 >
@@ -644,7 +634,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                 <CallContainer />
                 <NonUrgentToastContainer />
                 <HostSignupContainer />
-                {audioFeedArraysForCalls}
+                { audioFeedArraysForCalls }
             </MatrixClientContext.Provider>
         );
     }

src/components/structures/MatrixChat.tsx

@@ -431,7 +431,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle stage
-    // eslint-disable-next-line camelcase
+    // eslint-disable-next-line
     UNSAFE_componentWillUpdate(props, state) {
         if (this.shouldTrackPageChange(this.state, state)) {
             this.startPageChangeTimer();
@@ -1112,7 +1112,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         if (memberCount === 1) {
             warnings.push((
                 <span className="warning" key="only_member_warning">
-                    {' '/* Whitespace, otherwise the sentences get smashed together */ }
+                    { ' '/* Whitespace, otherwise the sentences get smashed together */ }
                     { _t("You are the only person here. " +
                         "If you leave, no one will be able to join in the future, including you.") }
                 </span>
@@ -1127,7 +1127,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             if (rule !== "public") {
                 warnings.push((
                     <span className="warning" key="non_public_warning">
-                        {' '/* Whitespace, otherwise the sentences get smashed together */ }
+                        { ' '/* Whitespace, otherwise the sentences get smashed together */ }
                         { isSpace
                             ? _t("This space is not public. You will not be able to rejoin without an invite.")
                             : _t("This room is not public. You will not be able to rejoin without an invite.") }
@@ -1155,7 +1155,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                         : _t(
                             "Are you sure you want to leave the room '%(roomName)s'?",
                             { roomName: roomToLeave.name },
-                        )}
+                        ) }
                     { warnings }
                 </span>
             ),
@@ -1864,13 +1864,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         dis.dispatch({ action: 'timeline_resize' });
     }
 
-    onRoomCreated(roomId: string) {
-        dis.dispatch({
-            action: "view_room",
-            room_id: roomId,
-        });
-    }
-
     onRegisterClick = () => {
         this.showScreen("register");
     };
@@ -2043,7 +2036,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                         {...this.state}
                         ref={this.loggedInView}
                         matrixClient={MatrixClientPeg.get()}
-                        onRoomCreated={this.onRoomCreated}
                         onRegistered={this.onRegistered}
                         currentRoomId={this.state.currentRoomId}
                     />
@@ -2053,15 +2045,15 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 let errorBox;
                 if (this.state.syncError && !isStoreError) {
                     errorBox = <div className="mx_MatrixChat_syncError">
-                        {messageForSyncError(this.state.syncError)}
+                        { messageForSyncError(this.state.syncError) }
                     </div>;
                 }
                 view = (
                     <div className="mx_MatrixChat_splash">
-                        {errorBox}
+                        { errorBox }
                         <Spinner />
                         <a href="#" className="mx_MatrixChat_splashButtons" onClick={this.onLogoutClick}>
-                            {_t('Logout')}
+                            { _t('Logout') }
                         </a>
                     </div>
                 );
@@ -2124,7 +2116,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }
 
         return <ErrorBoundary>
-            {view}
+            { view }
         </ErrorBoundary>;
     }
 }

src/components/structures/MessagePanel.tsx

@@ -36,6 +36,7 @@ import DMRoomMap from "../../utils/DMRoomMap";
 import NewRoomIntro from "../views/rooms/NewRoomIntro";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import defaultDispatcher from '../../dispatcher/dispatcher';
+import CallEventGrouper from "./CallEventGrouper";
 import WhoIsTypingTile from '../views/rooms/WhoIsTypingTile';
 import ScrollPanel, { IScrollState } from "./ScrollPanel";
 import EventListSummary from '../views/elements/EventListSummary';
@@ -232,6 +233,9 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     private readonly showTypingNotificationsWatcherRef: string;
     private eventNodes: Record<string, HTMLElement>;
 
+    // A map of <callId, CallEventGrouper>
+    private callEventGroupers = new Map<string, CallEventGrouper>();
+
     constructor(props, context) {
         super(props, context);
 
@@ -576,6 +580,20 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             const last = (mxEv === lastShownEvent);
             const { nextEvent, nextTile } = this.getNextEventInfo(this.props.events, i);
 
+            if (
+                mxEv.getType().indexOf("m.call.") === 0 ||
+                mxEv.getType().indexOf("org.matrix.call.") === 0
+            ) {
+                const callId = mxEv.getContent().call_id;
+                if (this.callEventGroupers.has(callId)) {
+                    this.callEventGroupers.get(callId).add(mxEv);
+                } else {
+                    const callEventGrouper = new CallEventGrouper();
+                    callEventGrouper.add(mxEv);
+                    this.callEventGroupers.set(callId, callEventGrouper);
+                }
+            }
+
             if (grouper) {
                 if (grouper.shouldGroup(mxEv)) {
                     grouper.add(mxEv, this.showHiddenEvents);
@@ -653,8 +671,10 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         }
 
         let willWantDateSeparator = false;
+        let lastInSection = true;
         if (nextEvent) {
             willWantDateSeparator = this.wantsDateSeparator(mxEv, nextEvent.getDate() || new Date());
+            lastInSection = willWantDateSeparator || mxEv.getSender() !== nextEvent.getSender();
         }
 
         // is this a continuation of the previous message?
@@ -690,6 +710,8 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         // it's successful: we received it.
         isLastSuccessful = isLastSuccessful && mxEv.getSender() === MatrixClientPeg.get().getUserId();
 
+        const callEventGrouper = this.callEventGroupers.get(mxEv.getContent().call_id);
+
         // use txnId as key if available so that we don't remount during sending
         ret.push(
             <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}>
@@ -712,7 +734,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                     isTwelveHour={this.props.isTwelveHour}
                     permalinkCreator={this.props.permalinkCreator}
                     last={last}
-                    lastInSection={willWantDateSeparator}
+                    lastInSection={lastInSection}
                     lastSuccessful={isLastSuccessful}
                     isSelectedEvent={highlight}
                     getRelationsForEvent={this.props.getRelationsForEvent}
@@ -720,6 +742,8 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                     layout={this.props.layout}
                     enableFlair={this.props.enableFlair}
                     showReadReceipts={this.props.showReadReceipts}
+                    callEventGrouper={callEventGrouper}
+                    hideSender={this.props.room.getMembers().length <= 2 && this.props.layout === Layout.Bubble}
                 />
             </TileErrorBoundary>,
         );

src/components/structures/MyGroups.js

@@ -121,7 +121,7 @@ export default class MyGroups extends React.Component {
                         ) }
                     </div>
                 </div>
-                {/*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
+                { /*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
                         <img src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
                     </AccessibleButton>
@@ -137,7 +137,7 @@ export default class MyGroups extends React.Component {
                             { 'i': (sub) => <i>{ sub }</i> })
                         }
                     </div>
-                </div>*/}
+                </div>*/ }
             </div>
             <BetaCard featureId="feature_spaces" title={_t("Communities are changing to Spaces")} />
             <div className="mx_MyGroups_content">

src/components/structures/NonUrgentToastContainer.tsx

@@ -51,14 +51,14 @@ export default class NonUrgentToastContainer extends React.PureComponent<IProps,
         const toasts = this.state.toasts.map((t, i) => {
             return (
                 <div className="mx_NonUrgentToastContainer_toast" key={`toast-${i}`}>
-                    {React.createElement(t, {})}
+                    { React.createElement(t, {}) }
                 </div>
             );
         });
 
         return (
             <div className="mx_NonUrgentToastContainer" role="alert">
-                {toasts}
+                { toasts }
             </div>
         );
     }

src/components/structures/NotificationPanel.tsx

@@ -35,8 +35,8 @@ interface IProps {
 export default class NotificationPanel extends React.PureComponent<IProps> {
     render() {
         const emptyState = (<div className="mx_RightPanel_empty mx_NotificationPanel_empty">
-            <h2>{_t('You’re all caught up')}</h2>
+            <h2>{ _t('You’re all caught up') }</h2>
-            <p>{_t('You have no visible notifications.')}</p>
+            <p>{ _t('You have no visible notifications.') }</p>
         </div>);
 
         let content;

src/components/structures/RightPanel.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
 import { User } from "matrix-js-sdk/src/models/user";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -152,7 +153,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line camelcase
+    UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line
         if (newProps.groupId !== this.props.groupId) {
             this.unregisterGroupStore();
             this.initGroupStore(newProps.groupId);
@@ -174,7 +175,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
         });
     };
 
-    private onRoomStateMember = (ev: MatrixEvent, _, member: RoomMember) => {
+    private onRoomStateMember = (ev: MatrixEvent, state: RoomState, member: RoomMember) => {
         if (!this.props.room || member.roomId !== this.props.room.roomId) {
             return;
         }

src/components/structures/RoomDirectory.tsx

@@ -589,7 +589,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
         // We use onMouseDown instead of onClick, so that we can avoid text getting selected
         return [
             <div
-                key={ `${room.room_id}_avatar` }
+                key={`${room.room_id}_avatar`}
                 onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomAvatar"
             >
@@ -603,7 +603,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                 />
             </div>,
             <div
-                key={ `${room.room_id}_description` }
+                key={`${room.room_id}_description`}
                 onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomDescription"
             >
@@ -626,14 +626,14 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                 </div>
             </div>,
             <div
-                key={ `${room.room_id}_memberCount` }
+                key={`${room.room_id}_memberCount`}
                 onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomMemberCount"
             >
                 { room.num_joined_members }
             </div>,
             <div
-                key={ `${room.room_id}_preview` }
+                key={`${room.room_id}_preview`}
                 onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 // cancel onMouseDown otherwise shift-clicking highlights text
                 className="mx_RoomDirectory_preview"
@@ -641,7 +641,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                 { previewButton }
             </div>,
             <div
-                key={ `${room.room_id}_join` }
+                key={`${room.room_id}_join`}
                 onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_join"
             >
@@ -796,7 +796,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                     showJoinButton={showJoinButton}
                     initialText={this.props.initialText}
                 />
-                {dropdown}
+                { dropdown }
             </div>;
         }
         const explanation =
@@ -814,16 +814,16 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
             }) : _t("Explore rooms");
         return (
             <BaseDialog
-                className={'mx_RoomDirectory_dialog'}
+                className="mx_RoomDirectory_dialog"
                 hasCancel={true}
                 onFinished={this.onFinished}
                 title={title}
             >
                 <div className="mx_RoomDirectory">
-                    {explanation}
+                    { explanation }
                     <div className="mx_RoomDirectory_list">
-                        {listHeader}
+                        { listHeader }
-                        {content}
+                        { content }
                     </div>
                 </div>
             </BaseDialog>

src/components/structures/RoomSearch.tsx

@@ -209,9 +209,9 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
 
         return (
             <div className={classes}>
-                {icon}
+                { icon }
-                {input}
+                { input }
-                {clearButton}
+                { clearButton }
             </div>
         );
     }

src/components/structures/RoomStatusBar.js

@@ -222,17 +222,17 @@ export default class RoomStatusBar extends React.PureComponent {
 
         let buttonRow = <>
             <AccessibleButton onClick={this._onCancelAllClick} className="mx_RoomStatusBar_unsentCancelAllBtn">
-                {_t("Delete all")}
+                { _t("Delete all") }
             </AccessibleButton>
             <AccessibleButton onClick={this._onResendAllClick} className="mx_RoomStatusBar_unsentResendAllBtn">
-                {_t("Retry all")}
+                { _t("Retry all") }
             </AccessibleButton>
         </>;
         if (this.state.isResending) {
             buttonRow = <>
                 <InlineSpinner w={20} h={20} />
-                {/* span for css */}
+                { /* span for css */ }
-                <span>{_t("Sending")}</span>
+                <span>{ _t("Sending") }</span>
             </>;
         }
 
@@ -253,7 +253,7 @@ export default class RoomStatusBar extends React.PureComponent {
                         </div>
                     </div>
                     <div className="mx_RoomStatusBar_unsentButtonBar">
-                        {buttonRow}
+                        { buttonRow }
                     </div>
                 </div>
             </div>
@@ -270,10 +270,10 @@ export default class RoomStatusBar extends React.PureComponent {
                                 height="24" title="/!\ " alt="/!\ " />
                             <div>
                                 <div className="mx_RoomStatusBar_connectionLostBar_title">
-                                    {_t('Connectivity to the server has been lost.')}
+                                    { _t('Connectivity to the server has been lost.') }
                                 </div>
                                 <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                                    {_t('Sent messages will be stored until your connection has returned.')}
+                                    { _t('Sent messages will be stored until your connection has returned.') }
                                 </div>
                             </div>
                         </div>

src/components/structures/RoomView.tsx

@@ -1892,10 +1892,10 @@ export default class RoomView extends React.Component<IProps, IState> {
                     className="mx_RoomView_auxPanel_hiddenHighlights"
                     onClick={this.onHiddenHighlightsClick}
                 >
-                    {_t(
+                    { _t(
                         "You have %(count)s unread notifications in a prior version of this room.",
                         { count: hiddenHighlightCount },
-                    )}
+                    ) }
                 </AccessibleButton>
             );
         }
@@ -2007,7 +2007,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 onScroll={this.onMessageListScroll}
                 onUserScroll={this.onUserScroll}
                 onReadMarkerUpdated={this.updateTopUnreadMessagesBar}
-                showUrlPreview = {this.state.showUrlPreview}
+                showUrlPreview={this.state.showUrlPreview}
                 className={messagePanelClassNames}
                 membersLoaded={this.state.membersLoaded}
                 permalinkCreator={this.getPermalinkCreatorForRoom(this.state.room)}
@@ -2057,7 +2057,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         return (
             <RoomContext.Provider value={this.state}>
                 <main className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
-                    {showChatEffects && this.roomView.current &&
+                    { showChatEffects && this.roomView.current &&
                         <EffectsOverlay roomWidth={this.roomView.current.offsetWidth} />
                     }
                     <ErrorBoundary>
@@ -2076,22 +2076,22 @@ export default class RoomView extends React.Component<IProps, IState> {
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
                             <div className="mx_RoomView_body">
-                                {auxPanel}
+                                { auxPanel }
                                 <div className={timelineClasses}>
-                                    {fileDropTarget}
+                                    { fileDropTarget }
-                                    {topUnreadMessagesBar}
+                                    { topUnreadMessagesBar }
-                                    {jumpToBottom}
+                                    { jumpToBottom }
-                                    {messagePanel}
+                                    { messagePanel }
-                                    {searchResultsPanel}
+                                    { searchResultsPanel }
                                 </div>
                                 <div className={statusBarAreaClass}>
                                     <div className="mx_RoomView_statusAreaBox">
                                         <div className="mx_RoomView_statusAreaBox_line" />
-                                        {statusBar}
+                                        { statusBar }
                                     </div>
                                 </div>
-                                {previewBar}
+                                { previewBar }
-                                {messageComposer}
+                                { messageComposer }
                             </div>
                         </MainSplit>
                     </ErrorBoundary>

src/components/structures/SearchBox.js

@@ -136,7 +136,7 @@ export default class SearchBox extends React.Component {
                 key="button"
                 tabIndex={-1}
                 className="mx_SearchBox_closeButton"
-                onClick={ () => {this._clearSearch("button"); } }>
+                onClick={() => {this._clearSearch("button"); }}>
             </AccessibleButton>) : undefined;
 
         // show a shorter placeholder when blurred, if requested
@@ -153,12 +153,12 @@ export default class SearchBox extends React.Component {
                     type="text"
                     ref={this._search}
                     className={"mx_textinput_icon mx_textinput_search " + className}
-                    value={ this.state.searchTerm }
+                    value={this.state.searchTerm}
-                    onFocus={ this._onFocus }
+                    onFocus={this._onFocus}
-                    onChange={ this.onChange }
+                    onChange={this.onChange}
-                    onKeyDown={ this._onKeyDown }
+                    onKeyDown={this._onKeyDown}
                     onBlur={this._onBlur}
-                    placeholder={ placeholder }
+                    placeholder={placeholder}
                     autoComplete="off"
                     autoFocus={this.props.autoFocus}
                 />

src/components/structures/SpaceRoomDirectory.tsx

@@ -404,7 +404,7 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
     const [saving, setSaving] = useState(false);
 
     if (summaryError) {
-        return <p>{_t("Your server does not support showing space hierarchies.")}</p>;
+        return <p>{ _t("Your server does not support showing space hierarchies.") }</p>;
     }
 
     let content;
@@ -569,7 +569,7 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
     return <>
         <SearchBox
             className="mx_textinput_icon mx_textinput_search"
-            placeholder={ _t("Search names and descriptions") }
+            placeholder={_t("Search names and descriptions")}
             onSearch={setQuery}
             autoFocus={true}
             initialValue={initialText}
@@ -608,7 +608,7 @@ const SpaceRoomDirectory: React.FC<IProps> = ({ space, onFinished, initialText }
                 { _t("If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.",
                     null,
                     { a: sub => {
-                        return <AccessibleButton kind="link" onClick={onCreateRoomClick}>{sub}</AccessibleButton>;
+                        return <AccessibleButton kind="link" onClick={onCreateRoomClick}>{ sub }</AccessibleButton>;
                     } },
                 ) }
 

src/components/structures/SpaceRoomView.tsx

@@ -145,7 +145,7 @@ const SpaceInfo = ({ space }) => {
     return <div className="mx_SpaceRoomView_info">
         { visibilitySection }
         { joinRule === "public" && <RoomMemberCount room={space}>
-            {(count) => count > 0 ? (
+            { (count) => count > 0 ? (
                 <AccessibleButton
                     kind="link"
                     onClick={() => {
@@ -158,7 +158,7 @@ const SpaceInfo = ({ space }) => {
                 >
                     { _t("%(count)s members", { count }) }
                 </AccessibleButton>
-            ) : null}
+            ) : null }
         </RoomMemberCount> }
     </div>;
 };
@@ -291,7 +291,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         </h1>
         <SpaceInfo space={space} />
         <RoomTopic room={space}>
-            {(topic, ref) =>
+            { (topic, ref) =>
                 <div className="mx_SpaceRoomView_preview_topic" ref={ref}>
                     { topic }
                 </div>
@@ -417,12 +417,12 @@ const SpaceLanding = ({ space }) => {
         <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
         <div className="mx_SpaceRoomView_landing_name">
             <RoomName room={space}>
-                {(name) => {
+                { (name) => {
                     const tags = { name: () => <div className="mx_SpaceRoomView_landing_nameRow">
                         <h1>{ name }</h1>
                     </div> };
                     return _t("Welcome to <name/>", {}, tags) as JSX.Element;
-                }}
+                } }
             </RoomName>
         </div>
         <div className="mx_SpaceRoomView_landing_info">
@@ -432,11 +432,11 @@ const SpaceLanding = ({ space }) => {
             { settingsButton }
         </div>
         <RoomTopic room={space}>
-            {(topic, ref) => (
+            { (topic, ref) => (
                 <div className="mx_SpaceRoomView_landing_topic" ref={ref}>
                     { topic }
                 </div>
-            )}
+            ) }
         </RoomTopic>
         <SpaceFeedbackPrompt />
         <hr />
@@ -456,7 +456,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
     const numFields = 3;
     const placeholders = [_t("General"), _t("Random"), _t("Support")];
     const [roomNames, setRoomName] = useStateArray(numFields, [_t("General"), _t("Random"), ""]);
-    const fields = new Array(numFields).fill(0).map((_, i) => {
+    const fields = new Array(numFields).fill(0).map((x, i) => {
         const name = "roomName" + i;
         return <Field
             key={name}
@@ -623,7 +623,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
     const numFields = 3;
     const fieldRefs: RefObject<Field>[] = [useRef(), useRef(), useRef()];
     const [emailAddresses, setEmailAddress] = useStateArray(numFields, "");
-    const fields = new Array(numFields).fill(0).map((_, i) => {
+    const fields = new Array(numFields).fill(0).map((x, i) => {
         const name = "emailAddress" + i;
         return <Field
             key={name}

src/components/structures/TabbedView.tsx

@@ -74,7 +74,7 @@ export default class TabbedView extends React.Component<IProps, IState> {
         tabLocation: TabLocation.LEFT,
     };
 
-    private _getActiveTabIndex() {
+    private getActiveTabIndex() {
         if (!this.state || !this.state.activeTabIndex) return 0;
         return this.state.activeTabIndex;
     }
@@ -84,7 +84,7 @@ export default class TabbedView extends React.Component<IProps, IState> {
      * @param {Tab} tab the tab to show
      * @private
      */
-    private _setActiveTab(tab: Tab) {
+    private setActiveTab(tab: Tab) {
         const idx = this.props.tabs.indexOf(tab);
         if (idx !== -1) {
             if (this.props.onChange) this.props.onChange(tab.id);
@@ -94,23 +94,23 @@ export default class TabbedView extends React.Component<IProps, IState> {
         }
     }
 
-    private _renderTabLabel(tab: Tab) {
+    private renderTabLabel(tab: Tab) {
         let classes = "mx_TabbedView_tabLabel ";
 
         const idx = this.props.tabs.indexOf(tab);
-        if (idx === this._getActiveTabIndex()) classes += "mx_TabbedView_tabLabel_active";
+        if (idx === this.getActiveTabIndex()) classes += "mx_TabbedView_tabLabel_active";
 
         let tabIcon = null;
         if (tab.icon) {
             tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
         }
 
-        const onClickHandler = () => this._setActiveTab(tab);
+        const onClickHandler = () => this.setActiveTab(tab);
 
         const label = _t(tab.label);
         return (
             <AccessibleButton className={classes} key={"tab_label_" + tab.label} onClick={onClickHandler}>
-                {tabIcon}
+                { tabIcon }
                 <span className="mx_TabbedView_tabLabel_text">
                     { label }
                 </span>
@@ -118,19 +118,19 @@ export default class TabbedView extends React.Component<IProps, IState> {
         );
     }
 
-    private _renderTabPanel(tab: Tab): React.ReactNode {
+    private renderTabPanel(tab: Tab): React.ReactNode {
         return (
             <div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
                 <AutoHideScrollbar className='mx_TabbedView_tabPanelContent'>
-                    {tab.body}
+                    { tab.body }
                 </AutoHideScrollbar>
             </div>
         );
     }
 
     public render(): React.ReactNode {
-        const labels = this.props.tabs.map(tab => this._renderTabLabel(tab));
+        const labels = this.props.tabs.map(tab => this.renderTabLabel(tab));
-        const panel = this._renderTabPanel(this.props.tabs[this._getActiveTabIndex()]);
+        const panel = this.renderTabPanel(this.props.tabs[this.getActiveTabIndex()]);
 
         const tabbedViewClasses = classNames({
             'mx_TabbedView': true,
@@ -141,9 +141,9 @@ export default class TabbedView extends React.Component<IProps, IState> {
         return (
             <div className={tabbedViewClasses}>
                 <div className="mx_TabbedView_tabLabels">
-                    {labels}
+                    { labels }
                 </div>
-                {panel}
+                { panel }
             </div>
         );
     }

src/components/structures/TimelinePanel.tsx

@@ -277,7 +277,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
     }
 
     // TODO: [REACT-WARNING] Move into constructor
-    // eslint-disable-next-line camelcase
+    // eslint-disable-next-line
     UNSAFE_componentWillMount() {
         if (this.props.manageReadReceipts) {
             this.updateReadReceiptOnUserActivity();
@@ -290,7 +290,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    // eslint-disable-next-line camelcase
+    // eslint-disable-next-line
     UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.timelineSet !== this.props.timelineSet) {
             // throw new Error("changing timelineSet on a TimelinePanel is not supported");
@@ -1448,7 +1448,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         if (this.state.events.length == 0 && !this.state.canBackPaginate && this.props.empty) {
             return (
                 <div className={this.props.className + " mx_RoomView_messageListWrapper"}>
-                    <div className="mx_RoomView_empty">{this.props.empty}</div>
+                    <div className="mx_RoomView_empty">{ this.props.empty }</div>
                 </div>
             );
         }

src/components/structures/ToastContainer.tsx

@@ -37,14 +37,14 @@ export default class ToastContainer extends React.Component<{}, IState> {
         // toasts may dismiss themselves in their didMount if they find
         // they're already irrelevant by the time they're mounted, and
         // our own componentDidMount is too late.
-        ToastStore.sharedInstance().on('update', this._onToastStoreUpdate);
+        ToastStore.sharedInstance().on('update', this.onToastStoreUpdate);
     }
 
     componentWillUnmount() {
-        ToastStore.sharedInstance().removeListener('update', this._onToastStoreUpdate);
+        ToastStore.sharedInstance().removeListener('update', this.onToastStoreUpdate);
     }
 
-    _onToastStoreUpdate = () => {
+    private onToastStoreUpdate = () => {
         this.setState({
             toasts: ToastStore.sharedInstance().getToasts(),
             countSeen: ToastStore.sharedInstance().getCountSeen(),
@@ -75,10 +75,10 @@ export default class ToastContainer extends React.Component<{}, IState> {
             });
             toast = (<div className={toastClasses}>
                 <div className="mx_Toast_title">
-                    <h2>{title}</h2>
+                    <h2>{ title }</h2>
-                    <span>{countIndicator}</span>
+                    <span>{ countIndicator }</span>
                 </div>
-                <div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
+                <div className="mx_Toast_body">{ React.createElement(component, toastProps) }</div>
             </div>);
 
             containerClasses = classNames("mx_ToastContainer", {
@@ -88,7 +88,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
         return toast
             ? (
                 <div className={containerClasses} role="alert">
-                    {toast}
+                    { toast }
                 </div>
             )
             : null;

src/components/structures/UploadBar.tsx

@@ -104,7 +104,7 @@ export default class UploadBar extends React.Component<IProps, IState> {
         const uploadSize = filesize(this.state.currentUpload.total);
         return (
             <div className="mx_UploadBar">
-                <div className="mx_UploadBar_filename">{uploadText} ({uploadSize})</div>
+                <div className="mx_UploadBar_filename">{ uploadText } ({ uploadSize })</div>
                 <AccessibleButton onClick={this.onCancelClick} className='mx_UploadBar_cancel' />
                 <ProgressBar value={this.state.currentUpload.loaded} max={this.state.currentUpload.total} />
             </div>

src/components/structures/UserMenu.tsx

@@ -342,20 +342,20 @@ export default class UserMenu extends React.Component<IProps, IState> {
         if (MatrixClientPeg.get().isGuest()) {
             topSection = (
                 <div className="mx_UserMenu_contextMenu_header mx_UserMenu_contextMenu_guestPrompts">
-                    {_t("Got an account? <a>Sign in</a>", {}, {
+                    { _t("Got an account? <a>Sign in</a>", {}, {
                         a: sub => (
                             <AccessibleButton kind="link" onClick={this.onSignInClick}>
-                                {sub}
+                                { sub }
                             </AccessibleButton>
                         ),
-                    })}
+                    }) }
-                    {_t("New here? <a>Create an account</a>", {}, {
+                    { _t("New here? <a>Create an account</a>", {}, {
                         a: sub => (
                             <AccessibleButton kind="link" onClick={this.onRegisterClick}>
-                                {sub}
+                                { sub }
                             </AccessibleButton>
                         ),
-                    })}
+                    }) }
                 </div>
             );
         } else if (hostSignupConfig) {
@@ -394,17 +394,17 @@ export default class UserMenu extends React.Component<IProps, IState> {
         let primaryHeader = (
             <div className="mx_UserMenu_contextMenu_name">
                 <span className="mx_UserMenu_contextMenu_displayName">
-                    {OwnProfileStore.instance.displayName}
+                    { OwnProfileStore.instance.displayName }
                 </span>
                 <span className="mx_UserMenu_contextMenu_userId">
-                    {MatrixClientPeg.get().getUserId()}
+                    { MatrixClientPeg.get().getUserId() }
                 </span>
             </div>
         );
         let primaryOptionList = (
             <React.Fragment>
                 <IconizedContextMenuOptionList>
-                    {homeButton}
+                    { homeButton }
                     <IconizedContextMenuOption
                         iconClassName="mx_UserMenu_iconBell"
                         label={_t("Notification settings")}
@@ -420,11 +420,11 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         label={_t("All settings")}
                         onClick={(e) => this.onSettingsOpen(e, null)}
                     />
-                    {/* <IconizedContextMenuOption
+                    { /* <IconizedContextMenuOption
                         iconClassName="mx_UserMenu_iconArchive"
                         label={_t("Archived rooms")}
                         onClick={this.onShowArchived}
-                    /> */}
+                    /> */ }
                     { feedbackButton }
                 </IconizedContextMenuOptionList>
                 <IconizedContextMenuOptionList red>
@@ -443,7 +443,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
             primaryHeader = (
                 <div className="mx_UserMenu_contextMenu_name">
                     <span className="mx_UserMenu_contextMenu_displayName">
-                        {prototypeCommunityName}
+                        { prototypeCommunityName }
                     </span>
                 </div>
             );
@@ -470,13 +470,13 @@ export default class UserMenu extends React.Component<IProps, IState> {
             }
             primaryOptionList = (
                 <IconizedContextMenuOptionList>
-                    {settingsOption}
+                    { settingsOption }
                     <IconizedContextMenuOption
                         iconClassName="mx_UserMenu_iconMembers"
                         label={_t("Members")}
                         onClick={this.onCommunityMembersClick}
                     />
-                    {inviteOption}
+                    { inviteOption }
                 </IconizedContextMenuOptionList>
             );
             secondarySection = (
@@ -485,10 +485,10 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     <div className="mx_UserMenu_contextMenu_header">
                         <div className="mx_UserMenu_contextMenu_name">
                             <span className="mx_UserMenu_contextMenu_displayName">
-                                {OwnProfileStore.instance.displayName}
+                                { OwnProfileStore.instance.displayName }
                             </span>
                             <span className="mx_UserMenu_contextMenu_userId">
-                                {MatrixClientPeg.get().getUserId()}
+                                { MatrixClientPeg.get().getUserId() }
                             </span>
                         </div>
                     </div>
@@ -540,7 +540,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
             className={classes}
         >
             <div className="mx_UserMenu_contextMenu_header">
-                {primaryHeader}
+                { primaryHeader }
                 <AccessibleTooltipButton
                     className="mx_UserMenu_contextMenu_themeButton"
                     onClick={this.onSwitchThemeClick}
@@ -553,9 +553,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     />
                 </AccessibleTooltipButton>
             </div>
-            {topSection}
+            { topSection }
-            {primaryOptionList}
+            { primaryOptionList }
-            {secondarySection}
+            { secondarySection }
         </IconizedContextMenu>;
     };
 
@@ -570,27 +570,27 @@ export default class UserMenu extends React.Component<IProps, IState> {
 
         let isPrototype = false;
         let menuName = _t("User menu");
-        let name = <span className="mx_UserMenu_userName">{displayName}</span>;
+        let name = <span className="mx_UserMenu_userName">{ displayName }</span>;
         let buttons = (
             <span className="mx_UserMenu_headerButtons">
-                {/* masked image in CSS */}
+                { /* masked image in CSS */ }
             </span>
         );
         let dnd;
         if (this.state.selectedSpace) {
             name = (
                 <div className="mx_UserMenu_doubleName">
-                    <span className="mx_UserMenu_userName">{displayName}</span>
+                    <span className="mx_UserMenu_userName">{ displayName }</span>
                     <RoomName room={this.state.selectedSpace}>
-                        {(roomName) => <span className="mx_UserMenu_subUserName">{roomName}</span>}
+                        { (roomName) => <span className="mx_UserMenu_subUserName">{ roomName }</span> }
                     </RoomName>
                 </div>
             );
         } else if (prototypeCommunityName) {
             name = (
                 <div className="mx_UserMenu_doubleName">
-                    <span className="mx_UserMenu_userName">{prototypeCommunityName}</span>
+                    <span className="mx_UserMenu_userName">{ prototypeCommunityName }</span>
-                    <span className="mx_UserMenu_subUserName">{displayName}</span>
+                    <span className="mx_UserMenu_subUserName">{ displayName }</span>
                 </div>
             );
             menuName = _t("Community and user menu");
@@ -598,8 +598,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
         } else if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
             name = (
                 <div className="mx_UserMenu_doubleName">
-                    <span className="mx_UserMenu_userName">{_t("Home")}</span>
+                    <span className="mx_UserMenu_userName">{ _t("Home") }</span>
-                    <span className="mx_UserMenu_subUserName">{displayName}</span>
+                    <span className="mx_UserMenu_subUserName">{ displayName }</span>
                 </div>
             );
             isPrototype = true;
@@ -647,20 +647,20 @@ export default class UserMenu extends React.Component<IProps, IState> {
                                 className="mx_UserMenu_userAvatar"
                             />
                         </span>
-                        {name}
+                        { name }
-                        {this.state.pendingRoomJoin.size > 0 && (
+                        { this.state.pendingRoomJoin.size > 0 && (
                             <InlineSpinner>
                                 <TooltipButton helpText={_t(
                                     "Currently joining %(count)s rooms",
                                     { count: this.state.pendingRoomJoin.size },
                                 )} />
                             </InlineSpinner>
-                        )}
+                        ) }
-                        {dnd}
+                        { dnd }
-                        {buttons}
+                        { buttons }
                     </div>
                 </ContextMenuButton>
-                {this.renderContextMenu()}
+                { this.renderContextMenu() }
             </React.Fragment>
         );
     }

src/components/structures/ViewSource.js

@@ -63,23 +63,23 @@ export default class ViewSource extends React.Component {
                 <>
                     <details open className="mx_ViewSource_details">
                         <summary>
-                            <span className="mx_ViewSource_heading">{_t("Decrypted event source")}</span>
+                            <span className="mx_ViewSource_heading">{ _t("Decrypted event source") }</span>
                         </summary>
-                        <SyntaxHighlight className="json">{JSON.stringify(decryptedEventSource, null, 2)}</SyntaxHighlight>
+                        <SyntaxHighlight className="json">{ JSON.stringify(decryptedEventSource, null, 2) }</SyntaxHighlight>
                     </details>
                     <details className="mx_ViewSource_details">
                         <summary>
-                            <span className="mx_ViewSource_heading">{_t("Original event source")}</span>
+                            <span className="mx_ViewSource_heading">{ _t("Original event source") }</span>
                         </summary>
-                        <SyntaxHighlight className="json">{JSON.stringify(originalEventSource, null, 2)}</SyntaxHighlight>
+                        <SyntaxHighlight className="json">{ JSON.stringify(originalEventSource, null, 2) }</SyntaxHighlight>
                     </details>
                 </>
             );
         } else {
             return (
                 <>
-                    <div className="mx_ViewSource_heading">{_t("Original event source")}</div>
+                    <div className="mx_ViewSource_heading">{ _t("Original event source") }</div>
-                    <SyntaxHighlight className="json">{JSON.stringify(originalEventSource, null, 2)}</SyntaxHighlight>
+                    <SyntaxHighlight className="json">{ JSON.stringify(originalEventSource, null, 2) }</SyntaxHighlight>
                 </>
             );
         }
@@ -110,7 +110,7 @@ export default class ViewSource extends React.Component {
         if (isStateEvent) {
             return (
                 <MatrixClientContext.Consumer>
-                    {(cli) => (
+                    { (cli) => (
                         <SendCustomEvent
                             room={cli.getRoom(roomId)}
                             forceStateEvent={true}
@@ -121,7 +121,7 @@ export default class ViewSource extends React.Component {
                                 stateKey: mxEvent.getStateKey(),
                             }}
                         />
-                    )}
+                    ) }
                 </MatrixClientContext.Consumer>
             );
         } else {
@@ -142,7 +142,7 @@ export default class ViewSource extends React.Component {
             };
             return (
                 <MatrixClientContext.Consumer>
-                    {(cli) => (
+                    { (cli) => (
                         <SendCustomEvent
                             room={cli.getRoom(roomId)}
                             forceStateEvent={false}
@@ -153,7 +153,7 @@ export default class ViewSource extends React.Component {
                                 evContent: JSON.stringify(newContent, null, "\t"),
                             }}
                         />
-                    )}
+                    ) }
                 </MatrixClientContext.Consumer>
             );
         }
@@ -176,16 +176,16 @@ export default class ViewSource extends React.Component {
         return (
             <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
                 <div>
-                    <div>Room ID: {roomId}</div>
+                    <div>Room ID: { roomId }</div>
-                    <div>Event ID: {eventId}</div>
+                    <div>Event ID: { eventId }</div>
                     <div className="mx_ViewSource_separator" />
-                    {isEditing ? this.editSourceContent() : this.viewSourceContent()}
+                    { isEditing ? this.editSourceContent() : this.viewSourceContent() }
                 </div>
-                {!isEditing && canEdit && (
+                { !isEditing && canEdit && (
                     <div className="mx_Dialog_buttons">
-                        <button onClick={() => this.onEdit()}>{_t("Edit")}</button>
+                        <button onClick={() => this.onEdit()}>{ _t("Edit") }</button>
                     </div>
-                )}
+                ) }
             </BaseDialog>
         );
     }

src/components/structures/auth/CompleteSecurity.tsx

@@ -79,8 +79,8 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
             <AuthPage>
                 <CompleteSecurityBody>
                     <h2 className="mx_CompleteSecurity_header">
-                        {icon}
+                        { icon }
-                        {title}
+                        { title }
                     </h2>
                     <div className="mx_CompleteSecurity_body">
                         <SetupEncryptionBody onFinished={this.props.onFinished} />

src/components/structures/auth/ForgotPassword.tsx

@@ -101,7 +101,7 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    // eslint-disable-next-line camelcase
+    // eslint-disable-next-line
     public UNSAFE_componentWillReceiveProps(newProps: IProps): void {
         if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl &&
             newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
@@ -239,14 +239,14 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
             });
             serverDeadSection = (
                 <div className={classes}>
-                    {this.state.serverDeadError}
+                    { this.state.serverDeadError }
                 </div>
             );
         }
 
         return <div>
-            {errorText}
+            { errorText }
-            {serverDeadSection}
+            { serverDeadSection }
             <ServerPicker
                 serverConfig={this.props.serverConfig}
                 onServerConfigChange={this.props.onServerConfigChange}
@@ -289,10 +289,10 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
                         autoComplete="new-password"
                     />
                 </div>
-                <span>{_t(
+                <span>{ _t(
                     'A verification email will be sent to your inbox to confirm ' +
                     'setting your new password.',
-                )}</span>
+                ) }</span>
                 <input
                     className="mx_Login_submit"
                     type="submit"
@@ -300,7 +300,7 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
                 />
             </form>
             <a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
-                {_t('Sign in instead')}
+                { _t('Sign in instead') }
             </a>
         </div>;
     }
@@ -312,8 +312,8 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
 
     renderEmailSent() {
         return <div>
-            {_t("An email has been sent to %(emailAddress)s. Once you've followed the " +
+            { _t("An email has been sent to %(emailAddress)s. Once you've followed the " +
-                "link it contains, click below.", { emailAddress: this.state.email })}
+                "link it contains, click below.", { emailAddress: this.state.email }) }
             <br />
             <input className="mx_Login_submit" type="button" onClick={this.onVerify}
                 value={_t('I have verified my email address')} />
@@ -322,12 +322,12 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
 
     renderDone() {
         return <div>
-            <p>{_t("Your password has been reset.")}</p>
+            <p>{ _t("Your password has been reset.") }</p>
-            <p>{_t(
+            <p>{ _t(
                 "You have been logged out of all sessions and will no longer receive " +
                 "push notifications. To re-enable notifications, sign in again on each " +
                 "device.",
-            )}</p>
+            ) }</p>
             <input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
                 value={_t('Return to login screen')} />
         </div>;
@@ -358,7 +358,7 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
                 <AuthHeader />
                 <AuthBody>
                     <h2> { _t('Set a new password') } </h2>
-                    {resetPasswordJsx}
+                    { resetPasswordJsx }
                 </AuthBody>
             </AuthPage>
         );

src/components/structures/auth/Login.tsx

@@ -144,7 +144,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    // eslint-disable-next-line camelcase
+    // eslint-disable-next-line
     UNSAFE_componentWillMount() {
         this.initLoginLogic(this.props.serverConfig);
     }
@@ -154,7 +154,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    // eslint-disable-next-line camelcase
+    // eslint-disable-next-line
     UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl &&
             newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
@@ -239,8 +239,8 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                 );
                 errorText = (
                     <div>
-                        <div>{errorTop}</div>
+                        <div>{ errorTop }</div>
-                        <div className="mx_Login_smallError">{errorDetail}</div>
+                        <div className="mx_Login_smallError">{ errorDetail }</div>
                     </div>
                 );
             } else if (error.httpStatus === 401 || error.httpStatus === 403) {
@@ -251,10 +251,10 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                         <div>
                             <div>{ _t('Incorrect username and/or password.') }</div>
                             <div className="mx_Login_smallError">
-                                {_t(
+                                { _t(
                                     'Please note you are logging into the %(hs)s server, not matrix.org.',
                                     { hs: this.props.serverConfig.hsName },
-                                )}
+                                ) }
                             </div>
                         </div>
                     );
@@ -565,7 +565,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
             });
             serverDeadSection = (
                 <div className={classes}>
-                    {this.state.serverDeadError}
+                    { this.state.serverDeadError }
                 </div>
             );
         }
@@ -578,15 +578,15 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                     { this.props.isSyncing ? _t("Syncing...") : _t("Signing In...") }
                 </div>
                 { this.props.isSyncing && <div className="mx_AuthBody_paddedFooter_subtitle">
-                    {_t("If you've joined lots of rooms, this might take a while")}
+                    { _t("If you've joined lots of rooms, this might take a while") }
                 </div> }
             </div>;
         } else if (SettingsStore.getValue(UIFeature.Registration)) {
             footer = (
                 <span className="mx_AuthBody_changeFlow">
-                    {_t("New? <a>Create account</a>", {}, {
+                    { _t("New? <a>Create account</a>", {}, {
                         a: sub => <a onClick={this.onTryRegisterClick} href="#">{ sub }</a>,
-                    })}
+                    }) }
                 </span>
             );
         }
@@ -596,8 +596,8 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                 <AuthHeader disableLanguageSelector={this.props.isSyncing || this.state.busyLoggingIn} />
                 <AuthBody>
                     <h2>
-                        {_t('Sign in')}
+                        { _t('Sign in') }
-                        {loader}
+                        { loader }
                     </h2>
                     { errorTextSection }
                     { serverDeadSection }

src/components/structures/auth/Registration.tsx

@@ -141,7 +141,7 @@ export default class Registration extends React.Component<IProps, IState> {
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    // eslint-disable-next-line camelcase
+    // eslint-disable-next-line
     UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl &&
             newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
@@ -290,8 +290,8 @@ export default class Registration extends React.Component<IProps, IState> {
                     },
                 );
                 msg = <div>
-                    <p>{errorTop}</p>
+                    <p>{ errorTop }</p>
-                    <p>{errorDetail}</p>
+                    <p>{ errorDetail }</p>
                 </div>;
             } else if (response.required_stages && response.required_stages.indexOf('m.login.msisdn') > -1) {
                 let msisdnAvailable = false;
@@ -482,13 +482,13 @@ export default class Registration extends React.Component<IProps, IState> {
                         fragmentAfterLogin={this.props.fragmentAfterLogin}
                     />
                     <h3 className="mx_AuthBody_centered">
-                        {_t(
+                        { _t(
                             "%(ssoButtons)s Or %(usernamePassword)s",
                             {
                                 ssoButtons: "",
                                 usernamePassword: "",
                             },
-                        ).trim()}
+                        ).trim() }
                     </h3>
                 </React.Fragment>;
             }
@@ -526,15 +526,15 @@ export default class Registration extends React.Component<IProps, IState> {
             });
             serverDeadSection = (
                 <div className={classes}>
-                    {this.state.serverDeadError}
+                    { this.state.serverDeadError }
                 </div>
             );
         }
 
         const signIn = <span className="mx_AuthBody_changeFlow">
-            {_t("Already have an account? <a>Sign in here</a>", {}, {
+            { _t("Already have an account? <a>Sign in here</a>", {}, {
                 a: sub => <a onClick={this.onLoginClick} href="#">{ sub }</a>,
-            })}
+            }) }
         </span>;
 
         // Only show the 'go back' button if you're not looking at the form
@@ -550,43 +550,43 @@ export default class Registration extends React.Component<IProps, IState> {
             let regDoneText;
             if (this.state.differentLoggedInUserId) {
                 regDoneText = <div>
-                    <p>{_t(
+                    <p>{ _t(
                         "Your new account (%(newAccountId)s) is registered, but you're already " +
                         "logged into a different account (%(loggedInUserId)s).", {
                             newAccountId: this.state.registeredUsername,
                             loggedInUserId: this.state.differentLoggedInUserId,
                         },
-                    )}</p>
+                    ) }</p>
                     <p><AccessibleButton element="span" className="mx_linkButton" onClick={async event => {
                         const sessionLoaded = await this.onLoginClickWithCheck(event);
                         if (sessionLoaded) {
                             dis.dispatch({ action: "view_welcome_page" });
                         }
                     }}>
-                        {_t("Continue with previous account")}
+                        { _t("Continue with previous account") }
                     </AccessibleButton></p>
                 </div>;
             } else if (this.state.formVals.password) {
                 // We're the client that started the registration
-                regDoneText = <h3>{_t(
+                regDoneText = <h3>{ _t(
                     "<a>Log in</a> to your new account.", {},
                     {
-                        a: (sub) => <a href="#/login" onClick={this.onLoginClickWithCheck}>{sub}</a>,
+                        a: (sub) => <a href="#/login" onClick={this.onLoginClickWithCheck}>{ sub }</a>,
                     },
-                )}</h3>;
+                ) }</h3>;
             } else {
                 // We're not the original client: the user probably got to us by clicking the
                 // email validation link. We can't offer a 'go straight to your account' link
                 // as we don't have the original creds.
-                regDoneText = <h3>{_t(
+                regDoneText = <h3>{ _t(
                     "You can now close this window or <a>log in</a> to your new account.", {},
                     {
-                        a: (sub) => <a href="#/login" onClick={this.onLoginClickWithCheck}>{sub}</a>,
+                        a: (sub) => <a href="#/login" onClick={this.onLoginClickWithCheck}>{ sub }</a>,
                     },
-                )}</h3>;
+                ) }</h3>;
             }
             body = <div>
-                <h2>{_t("Registration Successful")}</h2>
+                <h2>{ _t("Registration Successful") }</h2>
                 { regDoneText }
             </div>;
         } else {

src/components/structures/auth/SetupEncryptionBody.tsx

@@ -152,7 +152,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
             let useRecoveryKeyButton;
             if (recoveryKeyPrompt) {
                 useRecoveryKeyButton = <AccessibleButton kind="link" onClick={this.onUsePassphraseClick}>
-                    {recoveryKeyPrompt}
+                    { recoveryKeyPrompt }
                 </AccessibleButton>;
             }
 
@@ -165,15 +165,15 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
 
             return (
                 <div>
-                    <p>{_t(
+                    <p>{ _t(
                         "Verify your identity to access encrypted messages and prove your identity to others.",
-                    )}</p>
+                    ) }</p>
 
                     <div className="mx_CompleteSecurity_actionRow">
-                        {verifyButton}
+                        { verifyButton }
-                        {useRecoveryKeyButton}
+                        { useRecoveryKeyButton }
                         <AccessibleButton kind="danger" onClick={this.onSkipClick}>
-                            {_t("Skip")}
+                            { _t("Skip") }
                         </AccessibleButton>
                     </div>
                 </div>
@@ -181,25 +181,25 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
         } else if (phase === Phase.Done) {
             let message;
             if (this.state.backupInfo) {
-                message = <p>{_t(
+                message = <p>{ _t(
                     "Your new session is now verified. It has access to your " +
                     "encrypted messages, and other users will see it as trusted.",
-                )}</p>;
+                ) }</p>;
             } else {
-                message = <p>{_t(
+                message = <p>{ _t(
                     "Your new session is now verified. Other users will see it as trusted.",
-                )}</p>;
+                ) }</p>;
             }
             return (
                 <div>
                     <div className="mx_CompleteSecurity_heroIcon mx_E2EIcon_verified" />
-                    {message}
+                    { message }
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton
                             kind="primary"
                             onClick={this.onDoneClick}
                         >
-                            {_t("Done")}
+                            { _t("Done") }
                         </AccessibleButton>
                     </div>
                 </div>
@@ -207,23 +207,23 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
         } else if (phase === Phase.ConfirmSkip) {
             return (
                 <div>
-                    <p>{_t(
+                    <p>{ _t(
                         "Without verifying, you won’t have access to all your messages " +
                         "and may appear as untrusted to others.",
-                    )}</p>
+                    ) }</p>
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton
                             className="warning"
                             kind="secondary"
                             onClick={this.onSkipConfirmClick}
                         >
-                            {_t("Skip")}
+                            { _t("Skip") }
                         </AccessibleButton>
                         <AccessibleButton
                             kind="danger"
                             onClick={this.onSkipBackClick}
                         >
-                            {_t("Go Back")}
+                            { _t("Go Back") }
                         </AccessibleButton>
                     </div>
                 </div>

src/components/structures/auth/SoftLogout.tsx

@@ -219,7 +219,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
         if (this.state.loginView === LOGIN_VIEW.PASSWORD) {
             let error = null;
             if (this.state.errorText) {
-                error = <span className='mx_Login_error'>{this.state.errorText}</span>;
+                error = <span className='mx_Login_error'>{ this.state.errorText }</span>;
             }
 
             if (!introText) {
@@ -228,8 +228,8 @@ export default class SoftLogout extends React.Component<IProps, IState> {
 
             return (
                 <form onSubmit={this.onPasswordLogin}>
-                    <p>{introText}</p>
+                    <p>{ introText }</p>
-                    {error}
+                    { error }
                     <Field
                         type="password"
                         label={_t("Password")}
@@ -243,10 +243,10 @@ export default class SoftLogout extends React.Component<IProps, IState> {
                         type="submit"
                         disabled={this.state.busy}
                     >
-                        {_t("Sign In")}
+                        { _t("Sign In") }
                     </AccessibleButton>
                     <AccessibleButton onClick={this.onForgotPassword} kind="link">
-                        {_t("Forgotten your password?")}
+                        { _t("Forgotten your password?") }
                     </AccessibleButton>
                 </form>
             );
@@ -262,7 +262,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
 
             return (
                 <div>
-                    <p>{introText}</p>
+                    <p>{ introText }</p>
                     <SSOButtons
                         matrixClient={MatrixClientPeg.get()}
                         flow={flow}
@@ -277,10 +277,10 @@ export default class SoftLogout extends React.Component<IProps, IState> {
         // Default: assume unsupported/error
         return (
             <p>
-                {_t(
+                { _t(
                     "You cannot sign in to your account. Please contact your " +
                     "homeserver admin for more information.",
-                )}
+                ) }
             </p>
         );
     }
@@ -291,25 +291,25 @@ export default class SoftLogout extends React.Component<IProps, IState> {
                 <AuthHeader />
                 <AuthBody>
                     <h2>
-                        {_t("You're signed out")}
+                        { _t("You're signed out") }
                     </h2>
 
-                    <h3>{_t("Sign in")}</h3>
+                    <h3>{ _t("Sign in") }</h3>
                     <div>
-                        {this.renderSignInSection()}
+                        { this.renderSignInSection() }
                     </div>
 
-                    <h3>{_t("Clear personal data")}</h3>
+                    <h3>{ _t("Clear personal data") }</h3>
                     <p>
-                        {_t(
+                        { _t(
                             "Warning: Your personal data (including encryption keys) is still stored " +
                             "in this session. Clear it if you're finished using this session, or want to sign " +
                             "in to another account.",
-                        )}
+                        ) }
                     </p>
                     <div>
                         <AccessibleButton onClick={this.onClearAll} kind="danger">
-                            {_t("Clear all data")}
+                            { _t("Clear all data") }
                         </AccessibleButton>
                     </div>
                 </AuthBody>

src/components/views/audio_messages/AudioPlayer.tsx

@@ -101,11 +101,11 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
                 />
                 <div className='mx_AudioPlayer_mediaInfo'>
                     <span className='mx_AudioPlayer_mediaName'>
-                        {this.props.mediaName || _t("Unnamed audio")}
+                        { this.props.mediaName || _t("Unnamed audio") }
                     </span>
                     <div className='mx_AudioPlayer_byline'>
                         <DurationClock playback={this.props.playback} />
-                        &nbsp; {/* easiest way to introduce a gap between the components */}
+                        &nbsp; { /* easiest way to introduce a gap between the components */ }
                         { this.renderFileSize() }
                     </div>
                 </div>

src/components/views/audio_messages/Clock.tsx

@@ -43,6 +43,6 @@ export default class Clock extends React.Component<IProps, IState> {
     public render() {
         const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0');
         const seconds = Math.floor(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
-        return <span className='mx_Clock'>{minutes}:{seconds}</span>;
+        return <span className='mx_Clock'>{ minutes }:{ seconds }</span>;
     }
 }

src/components/views/audio_messages/Waveform.tsx

@@ -47,7 +47,7 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
 
     public render() {
         return <div className='mx_Waveform'>
-            {this.props.relHeights.map((h, i) => {
+            { this.props.relHeights.map((h, i) => {
                 const progress = this.props.progress;
                 const isCompleteBar = (i / this.props.relHeights.length) <= progress && progress > 0;
                 const classes = classNames({
@@ -57,7 +57,7 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
                 return <span key={i} style={{
                     "--barHeight": h,
                 } as WaveformCSSProperties} className={classes} />;
-            })}
+            }) }
         </div>;
     }
 }

src/components/views/auth/AuthBody.tsx

@@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthBody")
 export default class AuthBody extends React.PureComponent {
-    render() {
+    public render(): React.ReactNode {
         return <div className="mx_AuthBody">
             { this.props.children }
         </div>;

src/components/views/auth/AuthFooter.tsx

@@ -22,7 +22,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthFooter")
 export default class AuthFooter extends React.Component {
-    render() {
+    public render(): React.ReactNode {
         return (
             <div className="mx_AuthFooter">
                 <a href="https://matrix.org" target="_blank" rel="noreferrer noopener">{ _t("powered by Matrix") }</a>

src/components/views/auth/AuthHeader.tsx

@@ -16,20 +16,17 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AuthHeaderLogo from "./AuthHeaderLogo";
+import LanguageSelector from "./LanguageSelector";
+
+interface IProps {
+    disableLanguageSelector?: boolean;
+}
 
 @replaceableComponent("views.auth.AuthHeader")
-export default class AuthHeader extends React.Component {
+export default class AuthHeader extends React.Component<IProps> {
-    static propTypes = {
+    public render(): React.ReactNode {
-        disableLanguageSelector: PropTypes.bool,
-    };
-
-    render() {
-        const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
-        const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector');
-
         return (
             <div className="mx_AuthHeader">
                 <AuthHeaderLogo />

src/components/views/auth/AuthHeaderLogo.tsx

@@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthHeaderLogo")
 export default class AuthHeaderLogo extends React.PureComponent {
-    render() {
+    public render(): React.ReactNode {
         return <div className="mx_AuthHeaderLogo">
             Matrix
         </div>;

src/components/views/auth/AuthPage.tsx

@@ -17,18 +17,16 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AuthFooter from "./AuthFooter";
 
 @replaceableComponent("views.auth.AuthPage")
 export default class AuthPage extends React.PureComponent {
-    render() {
+    public render(): React.ReactNode {
-        const AuthFooter = sdk.getComponent('auth.AuthFooter');
-
         return (
             <div className="mx_AuthPage">
                 <div className="mx_AuthPage_modal">
-                    {this.props.children}
+                    { this.props.children }
                 </div>
                 <AuthFooter />
             </div>

src/components/views/auth/CaptchaForm.tsx

@@ -15,66 +15,74 @@ limitations under the License.
 */
 
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const DIV_ID = 'mx_recaptcha';
 
+interface ICaptchaFormProps {
+    sitePublicKey: string;
+    onCaptchaResponse: (response: string) => void;
+}
+
+interface ICaptchaFormState {
+    errorText?: string;
+
+}
+
 /**
  * A pure UI component which displays a captcha form.
  */
 @replaceableComponent("views.auth.CaptchaForm")
-export default class CaptchaForm extends React.Component {
+export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICaptchaFormState> {
-    static propTypes = {
-        sitePublicKey: PropTypes.string,
-
-        // called with the captcha response
-        onCaptchaResponse: PropTypes.func,
-    };
-
     static defaultProps = {
         onCaptchaResponse: () => {},
     };
 
-    constructor(props) {
+    private captchaWidgetId?: string;
+    private recaptchaContainer = createRef<HTMLDivElement>();
+
+    constructor(props: ICaptchaFormProps) {
         super(props);
 
         this.state = {
-            errorText: null,
+            errorText: undefined,
         };
 
-        this._captchaWidgetId = null;
-
-        this._recaptchaContainer = createRef();
-
         CountlyAnalytics.instance.track("onboarding_grecaptcha_begin");
     }
 
     componentDidMount() {
         // Just putting a script tag into the returned jsx doesn't work, annoyingly,
         // so we do this instead.
-        if (global.grecaptcha) {
+        if (this.isRecaptchaReady()) {
             // already loaded
-            this._onCaptchaLoaded();
+            this.onCaptchaLoaded();
         } else {
             console.log("Loading recaptcha script...");
-            window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
+            window.mxOnRecaptchaLoaded = () => { this.onCaptchaLoaded(); };
             const scriptTag = document.createElement('script');
             scriptTag.setAttribute(
-                'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`,
+                'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mxOnRecaptchaLoaded&render=explicit`,
             );
-            this._recaptchaContainer.current.appendChild(scriptTag);
+            this.recaptchaContainer.current.appendChild(scriptTag);
         }
     }
 
     componentWillUnmount() {
-        this._resetRecaptcha();
+        this.resetRecaptcha();
     }
 
-    _renderRecaptcha(divId) {
+    // Borrowed directly from: https://github.com/codeep/react-recaptcha-google/commit/e118fa5670fa268426969323b2e7fe77698376ba
-        if (!global.grecaptcha) {
+    private isRecaptchaReady(): boolean {
+        return typeof window !== "undefined" &&
+            typeof global.grecaptcha !== "undefined" &&
+            typeof global.grecaptcha.render === 'function';
+    }
+
+    private renderRecaptcha(divId: string) {
+        if (!this.isRecaptchaReady()) {
             console.error("grecaptcha not loaded!");
             throw new Error("Recaptcha did not load successfully");
         }
@@ -84,26 +92,26 @@ export default class CaptchaForm extends React.Component {
             console.error("No public key for recaptcha!");
             throw new Error(
                 "This server has not supplied enough information for Recaptcha "
-                    + "authentication");
+                + "authentication");
         }
 
         console.info("Rendering to %s", divId);
-        this._captchaWidgetId = global.grecaptcha.render(divId, {
+        this.captchaWidgetId = global.grecaptcha.render(divId, {
             sitekey: publicKey,
             callback: this.props.onCaptchaResponse,
         });
     }
 
-    _resetRecaptcha() {
+    private resetRecaptcha() {
-        if (this._captchaWidgetId !== null) {
+        if (this.captchaWidgetId !== null) {
-            global.grecaptcha.reset(this._captchaWidgetId);
+            global.grecaptcha.reset(this.captchaWidgetId);
         }
     }
 
-    _onCaptchaLoaded() {
+    private onCaptchaLoaded() {
         console.log("Loaded recaptcha script.");
         try {
-            this._renderRecaptcha(DIV_ID);
+            this.renderRecaptcha(DIV_ID);
             // clear error if re-rendered
             this.setState({
                 errorText: null,
@@ -128,10 +136,10 @@ export default class CaptchaForm extends React.Component {
         }
 
         return (
-            <div ref={this._recaptchaContainer}>
+            <div ref={this.recaptchaContainer}>
-                <p>{_t(
+                <p>{ _t(
                     "This homeserver would like to make sure you are not a robot.",
-                )}</p>
+                ) }</p>
                 <div id={DIV_ID} />
                 { error }
             </div>

src/components/views/auth/CompleteSecurityBody.tsx

@@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.CompleteSecurityBody")
 export default class CompleteSecurityBody extends React.PureComponent {
-    render() {
+    public render(): React.ReactNode {
         return <div className="mx_CompleteSecurityBody">
             { this.props.children }
         </div>;

src/components/views/auth/CountryDropdown.tsx

@@ -15,21 +15,19 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
+import { COUNTRIES, getEmojiFlag, PhoneNumberCountryDefinition } from '../../../phonenumber';
-
-import { COUNTRIES, getEmojiFlag } from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Dropdown from "../elements/Dropdown";
 
 const COUNTRIES_BY_ISO2 = {};
 for (const c of COUNTRIES) {
     COUNTRIES_BY_ISO2[c.iso2] = c;
 }
 
-function countryMatchesSearchQuery(query, country) {
+function countryMatchesSearchQuery(query: string, country: PhoneNumberCountryDefinition): boolean {
     // Remove '+' if present (when searching for a prefix)
     if (query[0] === '+') {
         query = query.slice(1);
@@ -41,15 +39,26 @@ function countryMatchesSearchQuery(query, country) {
     return false;
 }
 
-@replaceableComponent("views.auth.CountryDropdown")
+interface IProps {
-export default class CountryDropdown extends React.Component {
+    value?: string;
-    constructor(props) {
+    onOptionChange: (country: PhoneNumberCountryDefinition) => void;
-        super(props);
+    isSmall: boolean; // if isSmall, show +44 in the selected value
-        this._onSearchChange = this._onSearchChange.bind(this);
+    showPrefix: boolean;
-        this._onOptionChange = this._onOptionChange.bind(this);
+    className?: string;
-        this._getShortOption = this._getShortOption.bind(this);
+    disabled?: boolean;
+}
 
-        let defaultCountry = COUNTRIES[0];
+interface IState {
+    searchQuery: string;
+    defaultCountry: PhoneNumberCountryDefinition;
+}
+
+@replaceableComponent("views.auth.CountryDropdown")
+export default class CountryDropdown extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        let defaultCountry: PhoneNumberCountryDefinition = COUNTRIES[0];
         const defaultCountryCode = SdkConfig.get()["defaultCountryCode"];
         if (defaultCountryCode) {
             const country = COUNTRIES.find(c => c.iso2 === defaultCountryCode.toUpperCase());
@@ -62,7 +71,7 @@ export default class CountryDropdown extends React.Component {
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         if (!this.props.value) {
             // If no value is given, we start with the default
             // country selected, but our parent component
@@ -71,21 +80,21 @@ export default class CountryDropdown extends React.Component {
         }
     }
 
-    _onSearchChange(search) {
+    private onSearchChange = (search: string): void => {
         this.setState({
             searchQuery: search,
         });
-    }
+    };
 
-    _onOptionChange(iso2) {
+    private onOptionChange = (iso2: string): void => {
         this.props.onOptionChange(COUNTRIES_BY_ISO2[iso2]);
-    }
+    };
 
-    _flagImgForIso2(iso2) {
+    private flagImgForIso2(iso2: string): React.ReactNode {
         return <div className="mx_Dropdown_option_emoji">{ getEmojiFlag(iso2) }</div>;
     }
 
-    _getShortOption(iso2) {
+    private getShortOption = (iso2: string): React.ReactNode => {
         if (!this.props.isSmall) {
             return undefined;
         }
@@ -94,14 +103,12 @@ export default class CountryDropdown extends React.Component {
             countryPrefix = '+' + COUNTRIES_BY_ISO2[iso2].prefix;
         }
         return <span className="mx_CountryDropdown_shortOption">
-            { this._flagImgForIso2(iso2) }
+            { this.flagImgForIso2(iso2) }
             { countryPrefix }
         </span>;
-    }
+    };
-
-    render() {
-        const Dropdown = sdk.getComponent('elements.Dropdown');
 
+    public render(): React.ReactNode {
         let displayedCountries;
         if (this.state.searchQuery) {
             displayedCountries = COUNTRIES.filter(
@@ -124,7 +131,7 @@ export default class CountryDropdown extends React.Component {
 
         const options = displayedCountries.map((country) => {
             return <div className="mx_CountryDropdown_option" key={country.iso2}>
-                { this._flagImgForIso2(country.iso2) }
+                { this.flagImgForIso2(country.iso2) }
                 { _t(country.name) } (+{ country.prefix })
             </div>;
         });
@@ -136,10 +143,10 @@ export default class CountryDropdown extends React.Component {
         return <Dropdown
             id="mx_CountryDropdown"
             className={this.props.className + " mx_CountryDropdown"}
-            onOptionChange={this._onOptionChange}
+            onOptionChange={this.onOptionChange}
-            onSearchChange={this._onSearchChange}
+            onSearchChange={this.onSearchChange}
             menuWidth={298}
-            getShortOption={this._getShortOption}
+            getShortOption={this.getShortOption}
             value={value}
             searchEnabled={true}
             disabled={this.props.disabled}
@@ -149,13 +156,3 @@ export default class CountryDropdown extends React.Component {
         </Dropdown>;
     }
 }
-
-CountryDropdown.propTypes = {
-    className: PropTypes.string,
-    isSmall: PropTypes.bool,
-    // if isSmall, show +44 in the selected value
-    showPrefix: PropTypes.bool,
-    onOptionChange: PropTypes.func.isRequired,
-    value: PropTypes.string,
-    disabled: PropTypes.bool,
-};

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -417,12 +417,12 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         if (this.props.showContinue !== false) {
             // XXX: button classes
             submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
-                onClick={this.trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
+                onClick={this.trySubmit} disabled={!allChecked}>{ _t("Accept") }</button>;
         }
 
         return (
             <div>
-                <p>{_t("Please review and accept the policies of this homeserver:")}</p>
+                <p>{ _t("Please review and accept the policies of this homeserver:") }</p>
                 { checkboxes }
                 { errorSection }
                 { submitButton }
@@ -613,7 +613,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
                                 className="mx_InteractiveAuthEntryComponents_msisdnEntry"
                                 value={this.state.token}
                                 onChange={this.onTokenChange}
-                                aria-label={ _t("Code")}
+                                aria-label={_t("Code")}
                             />
                             <br />
                             <input type="submit" value={_t("Submit")}
@@ -621,7 +621,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
                                 disabled={!enableSubmit}
                             />
                         </form>
-                        {errorSection}
+                        { errorSection }
                     </div>
                 </div>
             );
@@ -717,21 +717,21 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
             <AccessibleButton
                 onClick={this.props.onCancel}
                 kind={this.props.continueKind ? (this.props.continueKind + '_outline') : 'primary_outline'}
-            >{_t("Cancel")}</AccessibleButton>
+            >{ _t("Cancel") }</AccessibleButton>
         );
         if (this.state.phase === SSOAuthEntry.PHASE_PREAUTH) {
             continueButton = (
                 <AccessibleButton
                     onClick={this.onStartAuthClick}
                     kind={this.props.continueKind || 'primary'}
-                >{this.props.continueText || _t("Single Sign On")}</AccessibleButton>
+                >{ this.props.continueText || _t("Single Sign On") }</AccessibleButton>
             );
         } else {
             continueButton = (
                 <AccessibleButton
                     onClick={this.onConfirmClick}
                     kind={this.props.continueKind || 'primary'}
-                >{this.props.continueText || _t("Confirm")}</AccessibleButton>
+                >{ this.props.continueText || _t("Confirm") }</AccessibleButton>
             );
         }
 
@@ -753,8 +753,8 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         return <React.Fragment>
             { errorSection }
             <div className="mx_InteractiveAuthEntryComponents_sso_buttons">
-                {cancelButton}
+                { cancelButton }
-                {continueButton}
+                { continueButton }
             </div>
         </React.Fragment>;
     }
@@ -825,7 +825,7 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
                 <a href="" ref={this.fallbackButton} onClick={this.onShowFallbackClick}>{
                     _t("Start authentication")
                 }</a>
-                {errorSection}
+                { errorSection }
             </div>
         );
     }

src/components/views/auth/LanguageSelector.tsx

@@ -18,21 +18,23 @@ import SdkConfig from "../../../SdkConfig";
 import { getCurrentLanguage } from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
 import PlatformPeg from "../../../PlatformPeg";
-import * as sdk from '../../../index';
 import React from 'react';
 import { SettingLevel } from "../../../settings/SettingLevel";
+import LanguageDropdown from "../elements/LanguageDropdown";
 
-function onChange(newLang) {
+function onChange(newLang: string): void {
     if (getCurrentLanguage() !== newLang) {
         SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
         PlatformPeg.get().reload();
     }
 }
 
-export default function LanguageSelector({ disabled }) {
+interface IProps {
-    if (SdkConfig.get()['disable_login_language_selector']) return <div />;
+    disabled?: boolean;
+}
 
-    const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
+export default function LanguageSelector({ disabled }: IProps): JSX.Element {
+    if (SdkConfig.get()['disable_login_language_selector']) return <div />;
     return <LanguageDropdown
         className="mx_AuthBody_language"
         onOptionChange={onChange}

src/components/views/auth/PasswordLogin.tsx

@@ -416,7 +416,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                 kind="link"
                 onClick={this.onForgotPasswordClick}
             >
-                {_t("Forgot password?")}
+                { _t("Forgot password?") }
             </AccessibleButton>;
         }
 
@@ -441,16 +441,16 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         disabled={this.props.disableSubmit}
                     >
                         <option key={LoginField.MatrixId} value={LoginField.MatrixId}>
-                            {_t('Username')}
+                            { _t('Username') }
                         </option>
                         <option
                             key={LoginField.Email}
                             value={LoginField.Email}
                         >
-                            {_t('Email address')}
+                            { _t('Email address') }
                         </option>
                         <option key={LoginField.Password} value={LoginField.Password}>
-                            {_t('Phone')}
+                            { _t('Phone') }
                         </option>
                     </Field>
                 </div>
@@ -460,8 +460,8 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
-                    {loginType}
+                    { loginType }
-                    {loginField}
+                    { loginField }
                     <Field
                         className={pwFieldClass}
                         type="password"
@@ -474,7 +474,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         onValidate={this.onPasswordValidate}
                         ref={field => this[LoginField.Password] = field}
                     />
-                    {forgotPasswordJsx}
+                    { forgotPasswordJsx }
                     { !this.props.busy && <input className="mx_Login_submit"
                         type="submit"
                         value={_t('Sign in')}

src/components/views/auth/RegistrationForm.tsx

@@ -537,15 +537,15 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             <div>
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_AuthBody_fieldRow">
-                        {this.renderUsername()}
+                        { this.renderUsername() }
                     </div>
                     <div className="mx_AuthBody_fieldRow">
-                        {this.renderPassword()}
+                        { this.renderPassword() }
-                        {this.renderPasswordConfirm()}
+                        { this.renderPasswordConfirm() }
                     </div>
                     <div className="mx_AuthBody_fieldRow">
-                        {this.renderEmail()}
+                        { this.renderEmail() }
-                        {this.renderPhoneNumber()}
+                        { this.renderPhoneNumber() }
                     </div>
                     { emailHelperText }
                     { registerButton }

src/components/views/auth/Welcome.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import classNames from "classnames";
 
-import * as sdk from '../../../index';
+import * as sdk from "../../../index";
 import SdkConfig from '../../../SdkConfig';
 import AuthPage from "./AuthPage";
 import { _td } from "../../../languageHandler";
@@ -25,21 +25,26 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import LanguageSelector from "./LanguageSelector";
 
 // translatable strings for Welcome pages
 _td("Sign in with SSO");
 
+interface IProps {
+
+}
+
 @replaceableComponent("views.auth.Welcome")
-export default class Welcome extends React.PureComponent {
+export default class Welcome extends React.PureComponent<IProps> {
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
         CountlyAnalytics.instance.track("onboarding_welcome");
     }
 
-    render() {
+    public render(): React.ReactNode {
-        const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
+        // FIXME: Using an import will result in wrench-element-tests failures
-        const LanguageSelector = sdk.getComponent('auth.LanguageSelector');
+        const EmbeddedPage = sdk.getComponent("structures.EmbeddedPage");
 
         const pagesConfig = SdkConfig.get().embeddedPages;
         let pageUrl = null;

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -205,8 +205,8 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
                 oobData={this.props.oobData}
                 viewAvatarOnClick={this.props.viewAvatarOnClick}
             />
-            {icon}
+            { icon }
-            {badge}
+            { badge }
         </div>;
     }
 }

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -145,7 +145,7 @@ export default class MemberStatusMessageAvatar extends React.Component {
                 isExpanded={this.state.menuDisplayed}
                 label={_t("User Status")}
             >
-                {avatar}
+                { avatar }
             </ContextMenuButton>
 
             { contextMenu }

src/components/views/context_menus/CallContextMenu.tsx

@@ -65,15 +65,15 @@ export default class CallContextMenu extends React.Component<IProps> {
         let transferItem;
         if (this.props.call.opponentCanBeTransferred()) {
             transferItem = <MenuItem className="mx_CallContextMenu_item" onClick={this.onTransferClick}>
-                {_t("Transfer")}
+                { _t("Transfer") }
             </MenuItem>;
         }
 
         return <ContextMenu {...this.props}>
             <MenuItem className="mx_CallContextMenu_item" onClick={handler}>
-                {holdUnholdCaption}
+                { holdUnholdCaption }
             </MenuItem>
-            {transferItem}
+            { transferItem }
         </ContextMenu>;
     }
 }

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -64,8 +64,8 @@ export const IconizedContextMenuRadio: React.FC<IRadioProps> = ({
         label={label}
     >
         <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
-        <span className="mx_IconizedContextMenu_label">{label}</span>
+        <span className="mx_IconizedContextMenu_label">{ label }</span>
-        {active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" />}
+        { active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" /> }
     </MenuItemRadio>;
 };
 
@@ -85,15 +85,15 @@ export const IconizedContextMenuCheckbox: React.FC<ICheckboxProps> = ({
         label={label}
     >
         <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
-        <span className="mx_IconizedContextMenu_label">{label}</span>
+        <span className="mx_IconizedContextMenu_label">{ label }</span>
-        {active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" />}
+        { active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" /> }
     </MenuItemCheckbox>;
 };
 
 export const IconizedContextMenuOption: React.FC<IOptionProps> = ({ label, iconClassName, ...props }) => {
     return <MenuItem {...props} label={label}>
         { iconClassName && <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} /> }
-        <span className="mx_IconizedContextMenu_label">{label}</span>
+        <span className="mx_IconizedContextMenu_label">{ label }</span>
     </MenuItem>;
 };
 
@@ -104,7 +104,7 @@ export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({ firs
     });
 
     return <div className={classes}>
-        {children}
+        { children }
     </div>;
 };
 

src/components/views/context_menus/MessageContextMenu.tsx

@@ -43,11 +43,15 @@ export function canCancel(eventStatus: EventStatus): boolean {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
 }
 
-interface IEventTileOps {
+export interface IEventTileOps {
     isWidgetHidden(): boolean;
     unhideWidget(): void;
 }
 
+export interface IOperableEventTile {
+    getEventTileOps(): IEventTileOps;
+}
+
 interface IProps {
     /* the MatrixEvent associated with the context menu */
     mxEvent: MatrixEvent;
@@ -268,7 +272,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
                 resendReactionsButton = (
                     <IconizedContextMenuOption
                         iconClassName="mx_MessageContextMenu_iconResend"
-                        label={ _t('Resend %(unsentCount)s reaction(s)', { unsentCount: unsentReactionsCount }) }
+                        label={_t('Resend %(unsentCount)s reaction(s)', { unsentCount: unsentReactionsCount })}
                         onClick={this.onResendReactionsClick}
                     />
                 );
@@ -298,7 +302,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
                 pinButton = (
                     <IconizedContextMenuOption
                         iconClassName="mx_MessageContextMenu_iconPin"
-                        label={ this.isPinned() ? _t('Unpin') : _t('Pin') }
+                        label={this.isPinned() ? _t('Unpin') : _t('Pin')}
                         onClick={this.onPinClick}
                     />
                 );
@@ -333,7 +337,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             <IconizedContextMenuOption
                 iconClassName="mx_MessageContextMenu_iconPermalink"
                 onClick={this.onPermalinkClick}
-                label= {_t('Share')}
+                label={_t('Share')}
                 element="a"
                 {
                     // XXX: Typescript signature for AccessibleButton doesn't work properly for non-inputs like `a`
@@ -364,7 +368,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
                 <IconizedContextMenuOption
                     iconClassName="mx_MessageContextMenu_iconLink"
                     onClick={this.closeMenu}
-                    label={ _t('Source URL') }
+                    label={_t('Source URL')}
                     element="a"
                     {
                         // XXX: Typescript signature for AccessibleButton doesn't work properly for non-inputs like `a`

src/components/views/context_menus/StatusMessageContextMenu.js

@@ -99,20 +99,20 @@ export default class StatusMessageContextMenu extends React.Component {
                 actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_clear"
                     onClick={this._onClearClick}
                 >
-                    <span>{_t("Clear status")}</span>
+                    <span>{ _t("Clear status") }</span>
                 </AccessibleButton>;
             } else {
                 actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_submit"
                     onClick={this._onSubmit}
                 >
-                    <span>{_t("Update status")}</span>
+                    <span>{ _t("Update status") }</span>
                 </AccessibleButton>;
             }
         } else {
             actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_submit"
                 disabled={!this.state.message} onClick={this._onSubmit}
             >
-                <span>{_t("Set status")}</span>
+                <span>{ _t("Set status") }</span>
             </AccessibleButton>;
         }
 
@@ -130,8 +130,8 @@ export default class StatusMessageContextMenu extends React.Component {
                 onChange={this._onStatusChange}
             />
             <div className="mx_StatusMessageContextMenu_actionContainer">
-                {actionButton}
+                { actionButton }
-                {spinner}
+                { spinner }
             </div>
         </form>;
 

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -219,7 +219,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
     return <div className="mx_AddExistingToSpace">
         <SearchBox
             className="mx_textinput_icon mx_textinput_search"
-            placeholder={ _t("Filter your rooms and spaces") }
+            placeholder={_t("Filter your rooms and spaces")}
             onSearch={setQuery}
             autoComplete={true}
             autoFocus={true}

src/components/views/dialogs/AddressPickerDialog.js

@@ -620,7 +620,7 @@ export default class AddressPickerDialog extends React.Component {
         let inputLabel;
         if (this.props.description) {
             inputLabel = <div className="mx_AddressPickerDialog_label">
-                <label htmlFor="textinput">{this.props.description}</label>
+                <label htmlFor="textinput">{ this.props.description }</label>
             </div>;
         }
 
@@ -690,7 +690,7 @@ export default class AddressPickerDialog extends React.Component {
             && this.props.validAddressTypes.includes('email')) {
             const defaultIdentityServerUrl = getDefaultIdentityServerUrl();
             if (defaultIdentityServerUrl) {
-                identityServer = <div className="mx_AddressPickerDialog_identityServer">{_t(
+                identityServer = <div className="mx_AddressPickerDialog_identityServer">{ _t(
                     "Use an identity server to invite by email. " +
                     "<default>Use the default (%(defaultIdentityServerName)s)</default> " +
                     "or manage in <settings>Settings</settings>.",
@@ -698,25 +698,25 @@ export default class AddressPickerDialog extends React.Component {
                         defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl),
                     },
                     {
-                        default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{sub}</a>,
+                        default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{ sub }</a>,
-                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{ sub }</a>,
                     },
-                )}</div>;
+                ) }</div>;
             } else {
-                identityServer = <div className="mx_AddressPickerDialog_identityServer">{_t(
+                identityServer = <div className="mx_AddressPickerDialog_identityServer">{ _t(
                     "Use an identity server to invite by email. " +
                     "Manage in <settings>Settings</settings>.",
                     {}, {
-                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{ sub }</a>,
                     },
-                )}</div>;
+                ) }</div>;
             }
         }
 
         return (
             <BaseDialog className="mx_AddressPickerDialog" onKeyDown={this.onKeyDown}
                 onFinished={this.props.onFinished} title={this.props.title}>
-                {inputLabel}
+                { inputLabel }
                 <div className="mx_Dialog_content">
                     <div className="mx_AddressPickerDialog_inputContainer">{ query }</div>
                     { error }

src/components/views/dialogs/AskInviteAnywayDialog.tsx

@@ -51,7 +51,7 @@ export default class AskInviteAnywayDialog extends React.Component<IProps> {
 
     public render() {
         const errorList = this.props.unknownProfileUsers
-            .map(address => <li key={address.userId}>{address.userId}: {address.errorText}</li>);
+            .map(address => <li key={address.userId}>{ address.userId }: { address.errorText }</li>);
 
         return (
             <BaseDialog className='mx_RetryInvitesDialog'
@@ -60,8 +60,8 @@ export default class AskInviteAnywayDialog extends React.Component<IProps> {
                 contentId='mx_Dialog_content'
             >
                 <div id='mx_Dialog_content'>
-                    {/* eslint-disable-next-line */}
+                    <p>{ _t("Unable to find profiles for the Matrix IDs listed below - " +
-                    <p>{_t("Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?")}</p>
+                        "would you like to invite them anyway?") }</p>
                     <ul>
                         { errorList }
                     </ul>

src/components/views/dialogs/BaseDialog.js

@@ -149,7 +149,7 @@ export default class BaseDialog extends React.Component {
                         'mx_Dialog_headerWithCancel': !!cancelButton,
                     })}>
                         <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
-                            {headerImage}
+                            { headerImage }
                             { this.props.title }
                         </div>
                         { this.props.headerButton }