Merge branch 'develop' into i18n-bracket-fix

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @matrix-org/element-web

.node-version

@@ -0,0 +1 @@
+14

CHANGELOG.md

@@ -1,3 +1,122 @@
+Changes in [3.27.0](https://github.com/vector-im/element-desktop/releases/tag/v3.27.0) (2021-07-02)
+===================================================================================================
+
+## 🔒 SECURITY FIXES
+ * Sanitize untrusted variables from message previews before translation
+   Fixes vector-im/element-web#18314
+
+## ✨ Features
+ * Fix editing of `<sub>` & `<sup`> & `<u>`
+   [\#6469](https://github.com/matrix-org/matrix-react-sdk/pull/6469)
+   Fixes vector-im/element-web#18211
+ * Zoom images in lightbox to where the cursor points
+   [\#6418](https://github.com/matrix-org/matrix-react-sdk/pull/6418)
+   Fixes vector-im/element-web#17870
+ * Avoid hitting the settings store from TextForEvent
+   [\#6205](https://github.com/matrix-org/matrix-react-sdk/pull/6205)
+   Fixes vector-im/element-web#17650
+ * Initial MSC3083 + MSC3244 support
+   [\#6212](https://github.com/matrix-org/matrix-react-sdk/pull/6212)
+   Fixes vector-im/element-web#17686 and vector-im/element-web#17661
+ * Navigate to the first room with notifications when clicked on space notification dot
+   [\#5974](https://github.com/matrix-org/matrix-react-sdk/pull/5974)
+ * Add matrix: to the list of permitted URL schemes
+   [\#6388](https://github.com/matrix-org/matrix-react-sdk/pull/6388)
+ * Add "Copy Link" to room context menu
+   [\#6374](https://github.com/matrix-org/matrix-react-sdk/pull/6374)
+ * 💭 Message bubble layout
+   [\#6291](https://github.com/matrix-org/matrix-react-sdk/pull/6291)
+   Fixes vector-im/element-web#4635, vector-im/element-web#17773 vector-im/element-web#16220 and vector-im/element-web#7687
+ * Play only one audio file at a time
+   [\#6417](https://github.com/matrix-org/matrix-react-sdk/pull/6417)
+   Fixes vector-im/element-web#17439
+ * Move download button for media to the action bar
+   [\#6386](https://github.com/matrix-org/matrix-react-sdk/pull/6386)
+   Fixes vector-im/element-web#17943
+ * Improved display of one-to-one call history with summary boxes for each call
+   [\#6121](https://github.com/matrix-org/matrix-react-sdk/pull/6121)
+   Fixes vector-im/element-web#16409
+ * Notification settings UI refresh
+   [\#6352](https://github.com/matrix-org/matrix-react-sdk/pull/6352)
+   Fixes vector-im/element-web#17782
+ * Fix EventIndex double handling events and erroring
+   [\#6385](https://github.com/matrix-org/matrix-react-sdk/pull/6385)
+   Fixes vector-im/element-web#18008
+ * Improve reply rendering
+   [\#3553](https://github.com/matrix-org/matrix-react-sdk/pull/3553)
+   Fixes vector-im/riot-web#9217, vector-im/riot-web#7633, vector-im/riot-web#7530, vector-im/riot-web#7169, vector-im/riot-web#7151, vector-im/riot-web#6692 vector-im/riot-web#6579 and vector-im/element-web#17440
+
+## 🐛 Bug Fixes
+ * Fix CreateRoomDialog exploding when making public room outside of a space
+   [\#6493](https://github.com/matrix-org/matrix-react-sdk/pull/6493)
+ * Fix regression where registration would soft-crash on captcha
+   [\#6505](https://github.com/matrix-org/matrix-react-sdk/pull/6505)
+   Fixes vector-im/element-web#18284
+ * only send join rule event if we have a join rule to put in it
+   [\#6517](https://github.com/matrix-org/matrix-react-sdk/pull/6517)
+ * Improve the new download button's discoverability and interactions.
+   [\#6510](https://github.com/matrix-org/matrix-react-sdk/pull/6510)
+ * Fix voice recording UI looking broken while microphone permissions are being requested.
+   [\#6479](https://github.com/matrix-org/matrix-react-sdk/pull/6479)
+   Fixes vector-im/element-web#18223
+ * Match colors of room and user avatars in DMs
+   [\#6393](https://github.com/matrix-org/matrix-react-sdk/pull/6393)
+   Fixes vector-im/element-web#2449
+ * Fix onPaste handler to work with copying files from Finder
+   [\#5389](https://github.com/matrix-org/matrix-react-sdk/pull/5389)
+   Fixes vector-im/element-web#15536 and vector-im/element-web#16255
+ * Fix infinite pagination loop when offline
+   [\#6478](https://github.com/matrix-org/matrix-react-sdk/pull/6478)
+   Fixes vector-im/element-web#18242
+ * Fix blurhash rounded corners missing regression
+   [\#6467](https://github.com/matrix-org/matrix-react-sdk/pull/6467)
+   Fixes vector-im/element-web#18110
+ * Fix position of the space hierarchy spinner
+   [\#6462](https://github.com/matrix-org/matrix-react-sdk/pull/6462)
+   Fixes vector-im/element-web#18182
+ * Fix display of image messages that lack thumbnails
+   [\#6456](https://github.com/matrix-org/matrix-react-sdk/pull/6456)
+   Fixes vector-im/element-web#18175
+ * Fix crash with large audio files.
+   [\#6436](https://github.com/matrix-org/matrix-react-sdk/pull/6436)
+   Fixes vector-im/element-web#18149
+ * Make diff colors in codeblocks more pleasant
+   [\#6355](https://github.com/matrix-org/matrix-react-sdk/pull/6355)
+   Fixes vector-im/element-web#17939
+ * Show the correct audio file duration while loading the file.
+   [\#6435](https://github.com/matrix-org/matrix-react-sdk/pull/6435)
+   Fixes vector-im/element-web#18160
+ * Fix various timeline settings not applying immediately.
+   [\#6261](https://github.com/matrix-org/matrix-react-sdk/pull/6261)
+   Fixes vector-im/element-web#17748
+ * Fix issues with room list duplication
+   [\#6391](https://github.com/matrix-org/matrix-react-sdk/pull/6391)
+   Fixes vector-im/element-web#14508
+ * Fix grecaptcha throwing useless error sometimes
+   [\#6401](https://github.com/matrix-org/matrix-react-sdk/pull/6401)
+   Fixes vector-im/element-web#15142
+ * Update Emojibase and Twemoji and switch to IamCal (Slack-style) shortcodes
+   [\#6347](https://github.com/matrix-org/matrix-react-sdk/pull/6347)
+   Fixes vector-im/element-web#13857 and vector-im/element-web#13334
+ * Respect compound emojis in default avatar initial generation
+   [\#6397](https://github.com/matrix-org/matrix-react-sdk/pull/6397)
+   Fixes vector-im/element-web#18040
+ * Fix bug where the 'other homeserver' field in the server selection dialog would become briefly focus and then unfocus when clicked.
+   [\#6394](https://github.com/matrix-org/matrix-react-sdk/pull/6394)
+   Fixes vector-im/element-web#18031
+ * Standardise spelling and casing of homeserver, identity server, and integration manager
+   [\#6365](https://github.com/matrix-org/matrix-react-sdk/pull/6365)
+ * Fix widgets not receiving decrypted events when they have permission.
+   [\#6371](https://github.com/matrix-org/matrix-react-sdk/pull/6371)
+   Fixes vector-im/element-web#17615
+ * Prevent client hangs when calculating blurhashes
+   [\#6366](https://github.com/matrix-org/matrix-react-sdk/pull/6366)
+   Fixes vector-im/element-web#17945
+ * Exclude state events from widgets reading room events
+   [\#6378](https://github.com/matrix-org/matrix-react-sdk/pull/6378)
+ * Cache feature_spaces\* flags to improve performance
+   [\#6381](https://github.com/matrix-org/matrix-react-sdk/pull/6381)
+
 Changes in [3.26.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.26.0) (2021-07-19)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.26.0-rc.1...v3.26.0)

README.md

@@ -34,7 +34,7 @@ All code lands on the `develop` branch - `master` is only used for stable releas
 **Please file PRs against `develop`!!**
 
 Please follow the standard Matrix contributor's guide:
-https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.rst
+https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md
 
 Please follow the Matrix JS/React code style as per:
 https://github.com/matrix-org/matrix-react-sdk/blob/master/code_style.md

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.26.0",
+  "version": "3.27.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -80,13 +80,14 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "12.1.0",
+    "matrix-js-sdk": "12.2.0",
     "matrix-widget-api": "^0.1.0-beta.15",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
     "pako": "^2.0.3",
     "parse5": "^6.0.1",
     "png-chunks-extract": "^1.0.0",
+    "posthog-js": "1.12.2",
     "prop-types": "^15.7.2",
     "qrcode": "^1.4.4",
     "re-resizable": "^6.9.0",
@@ -123,6 +124,7 @@
     "@babel/traverse": "^7.12.12",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz",
     "@peculiar/webcrypto": "^1.1.4",
+    "@sentry/types": "^6.10.0",
     "@sinonjs/fake-timers": "^7.0.2",
     "@types/classnames": "^2.2.11",
     "@types/commonmark": "^0.27.4",
@@ -147,13 +149,14 @@
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
+    "allchange": "github:matrix-org/allchange",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
     "eslint": "7.18.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#main",
+    "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#2306b3d4da4eba908b256014b979f1d3d43d2945",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "glob": "^7.1.6",
@@ -166,6 +169,7 @@
     "matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
+    "rrweb-snapshot": "1.1.7",
     "stylelint": "^13.9.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.18.0",
@@ -189,7 +193,8 @@
       "decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
       "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
       "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
-      "workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js"
+      "workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js",
+      "RecorderWorklet": "<rootDir>/__mocks__/empty.js"
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!matrix-js-sdk).+$"

release_config.yaml

@@ -0,0 +1,4 @@
+subprojects:
+    matrix-js-sdk:
+        includeByDefault: false
+

res/css/_common.scss

@@ -104,8 +104,8 @@ a:visited {
 input[type=text],
 input[type=search],
 input[type=password] {
+    font-family: inherit;
     padding: 9px;
-    font-family: $font-family;
     font-size: $font-14px;
     font-weight: 600;
     min-width: 0;
@@ -146,7 +146,6 @@ input[type=text], input[type=password], textarea {
 
 /* Required by Firefox */
 textarea {
-    font-family: $font-family;
     color: $primary-fg-color;
 }
 

res/css/_components.scss

@@ -67,7 +67,6 @@
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
-@import "./views/dialogs/_BetaFeedbackDialog.scss";
 @import "./views/dialogs/_BugReportDialog.scss";
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@@ -76,16 +75,21 @@
 @import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
 @import "./views/dialogs/_CreateRoomDialog.scss";
+@import "./views/dialogs/_CreateSubspaceDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_FeedbackDialog.scss";
 @import "./views/dialogs/_ForwardDialog.scss";
+@import "./views/dialogs/_GenericFeatureFeedbackDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_HostSignupDialog.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_InviteDialog.scss";
+@import "./views/dialogs/_JoinRuleDropdown.scss";
 @import "./views/dialogs/_KeyboardShortcutsDialog.scss";
+@import "./views/dialogs/_LeaveSpaceDialog.scss";
+@import "./views/dialogs/_ManageRestrictedJoinRuleDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_ModalWidgetDialog.scss";
 @import "./views/dialogs/_NewSessionReviewDialog.scss";
@@ -159,10 +163,10 @@
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
 @import "./views/groups/_GroupUserSettings.scss";
+@import "./views/messages/_CallEvent.scss";
 @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";
@@ -172,7 +176,6 @@
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MVideoBody.scss";
-@import "./views/messages/_MVoiceMessageBody.scss";
 @import "./views/messages/_MediaBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
@@ -201,8 +204,8 @@
 @import "./views/rooms/_E2EIcon.scss";
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
-@import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_EventBubbleTile.scss";
+@import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_GroupLayout.scss";
 @import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";
@@ -237,6 +240,7 @@
 @import "./views/settings/_E2eAdvancedPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
 @import "./views/settings/_IntegrationManager.scss";
+@import "./views/settings/_LayoutSwitcher.scss";
 @import "./views/settings/_Notifications.scss";
 @import "./views/settings/_PhoneNumbers.scss";
 @import "./views/settings/_ProfileSettings.scss";
@@ -263,12 +267,15 @@
 @import "./views/spaces/_SpacePublicShare.scss";
 @import "./views/terms/_InlineTermsAgreement.scss";
 @import "./views/toasts/_AnalyticsToast.scss";
+@import "./views/toasts/_IncomingCallToast.scss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
 @import "./views/verification/_VerificationShowSas.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallPreview.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_CallViewForRoom.scss";
+@import "./views/voip/_CallViewHeader.scss";
+@import "./views/voip/_CallViewSidebar.scss";
 @import "./views/voip/_DialPad.scss";
 @import "./views/voip/_DialPadContextMenu.scss";
 @import "./views/voip/_DialPadModal.scss";

res/css/structures/_FilePanel.scss

@@ -45,9 +45,14 @@ limitations under the License.
 
 /* Overrides for the attachment body tiles */
 
-.mx_FilePanel .mx_EventTile {
+.mx_FilePanel .mx_EventTile:not([data-layout=bubble]) {
     word-break: break-word;
-    margin-top: 32px;
+    margin-top: 10px;
+    padding-top: 0;
+
+    .mx_EventTile_line {
+        padding-left: 0;
+    }
 }
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody {

res/css/structures/_NotificationPanel.scss

@@ -84,7 +84,7 @@ limitations under the License.
     display: inline;
 }
 
-.mx_NotificationPanel .mx_EventTile_senderDetails {
+.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_senderDetails {
     padding-left: 36px; // align with the room name
     position: relative;
 
@@ -105,7 +105,7 @@ limitations under the License.
     padding-left: 5px;
 }
 
-.mx_NotificationPanel .mx_EventTile_line {
+.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_line {
     margin-right: 0px;
     padding-left: 36px; // align with the room name
     padding-top: 0px;

res/css/structures/_SpacePanel.scss

@@ -297,7 +297,7 @@ $activeBorderColor: $secondary-fg-color;
         .mx_SpaceButton:hover,
         .mx_SpaceButton:focus-within,
         .mx_SpaceButton_hasMenuOpen {
-            &:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) {
+            &:not(.mx_SpaceButton_invite) {
                 // Hide the badge container on hover because it'll be a menu button
                 .mx_SpacePanel_badgeContainer {
                     width: 0;
@@ -368,6 +368,14 @@ $activeBorderColor: $secondary-fg-color;
     .mx_SpacePanel_iconExplore::before {
         mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
     }
+
+    .mx_SpacePanel_noIcon {
+        display: none;
+
+        & + .mx_IconizedContextMenu_label {
+            padding-left: 5px !important; // override default iconized label style to align with header
+        }
+    }
 }
 
 

res/css/structures/_SpaceRoomDirectory.scss

@@ -61,6 +61,7 @@ limitations under the License.
 
     .mx_AccessibleButton_kind_link {
         padding: 0;
+        font-size: inherit;
     }
 
     .mx_SearchBox {
@@ -190,7 +191,6 @@ limitations under the License.
         position: relative;
         padding: 8px 16px;
         border-radius: 8px;
-        min-height: 56px;
         box-sizing: border-box;
 
         display: grid;

res/css/structures/_SpaceRoomView.scss

@@ -234,6 +234,9 @@ $SpaceRoomViewInnerWidth: 428px;
     }
 
     .mx_SpaceRoomView_landing {
+        display: flex;
+        flex-direction: column;
+
         > .mx_BaseAvatar_image,
         > .mx_BaseAvatar > .mx_BaseAvatar_image {
             border-radius: 12px;
@@ -332,23 +335,22 @@ $SpaceRoomViewInnerWidth: 428px;
             word-wrap: break-word;
         }
 
-        > hr {
-            border: none;
-            height: 1px;
-            background-color: $groupFilterPanel-bg-color;
-        }
-
         .mx_SearchBox {
             margin: 0 0 20px;
+            flex: 0;
         }
 
         .mx_SpaceFeedbackPrompt {
-            margin-bottom: 16px;
+            padding: 7px; // 8px - 1px border
+            border: 1px solid $menu-border-color;
+            border-radius: 8px;
+            width: max-content;
+            margin: 0 0 -40px auto; // collapse its own height to not push other components down
+        }
 
-            // hide the HR as we have our own
+        .mx_SpaceRoomDirectory_list {
-            & + hr {
+            // we don't want this container to get forced into the flexbox layout
-                display: none;
+            display: contents;
-            }
         }
     }
 
@@ -504,66 +506,3 @@ $SpaceRoomViewInnerWidth: 428px;
         }
     }
 }
-
-.mx_SpaceFeedbackPrompt {
-    margin-top: 18px;
-    margin-bottom: 12px;
-
-    > hr {
-        border: none;
-        border-top: 1px solid $input-border-color;
-        margin-bottom: 12px;
-    }
-
-    > div {
-        display: flex;
-        flex-direction: row;
-        font-size: $font-15px;
-        line-height: $font-24px;
-
-        > span {
-            color: $secondary-fg-color;
-            position: relative;
-            padding-left: 32px;
-            font-size: inherit;
-            line-height: inherit;
-            margin-right: auto;
-
-            &::before {
-                content: '';
-                position: absolute;
-                left: 0;
-                top: 2px;
-                height: 20px;
-                width: 20px;
-                background-color: $secondary-fg-color;
-                mask-repeat: no-repeat;
-                mask-size: contain;
-                mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-                mask-position: center;
-            }
-        }
-
-        .mx_AccessibleButton_kind_link {
-            color: $accent-color;
-            position: relative;
-            padding: 0 0 0 24px;
-            margin-left: 8px;
-            font-size: inherit;
-            line-height: inherit;
-
-            &::before {
-                content: '';
-                position: absolute;
-                left: 0;
-                height: 16px;
-                width: 16px;
-                background-color: $accent-color;
-                mask-repeat: no-repeat;
-                mask-size: contain;
-                mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
-                mask-position: center;
-            }
-        }
-    }
-}

res/css/structures/_ToastContainer.scss

@@ -28,7 +28,7 @@ limitations under the License.
         margin: 0 4px;
         grid-row: 2 / 4;
         grid-column: 1;
-        background-color: $dark-panel-bg-color;
+        background-color: $toast-bg-color;
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
     }
@@ -37,7 +37,7 @@ limitations under the License.
         grid-row: 1 / 3;
         grid-column: 1;
         color: $primary-fg-color;
-        background-color: $dark-panel-bg-color;
+        background-color: $toast-bg-color;
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
         overflow: hidden;

res/css/views/audio_messages/_AudioPlayer.scss

@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_AudioPlayer_container {
+.mx_MediaBody.mx_AudioPlayer_container {
     padding: 16px 12px 12px 12px;
-    max-width: 267px; // use max to make the control fit in the files/pinned panels
 
     .mx_AudioPlayer_primaryContainer {
         display: flex;

res/css/views/audio_messages/_PlaybackContainer.scss

@@ -18,10 +18,10 @@ limitations under the License.
 // are shared amongst multiple voice message components.
 
 // Container for live recording and playback controls
-.mx_VoiceMessagePrimaryContainer {
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
-    // 7px top and bottom for visual design. 12px left & right, but the waveform (right)
+    // The waveform (right) has a 1px padding on it that we want to account for, otherwise
-    // has a 1px padding on it that we want to account for.
+    // inherit from mx_MediaBody
-    padding: 7px 12px 7px 11px;
+    padding-right: 11px;
 
     // Cheat at alignment a bit
     display: flex;

res/css/views/auth/_InteractiveAuthEntryComponents.scss

@@ -85,7 +85,7 @@ limitations under the License.
 .mx_InteractiveAuthEntryComponents_termsPolicy {
     display: flex;
     flex-direction: row;
-    justify-content: start;
+    justify-content: flex-start;
     align-items: center;
 }
 

res/css/views/avatars/_BaseAvatar.scss

@@ -27,7 +27,6 @@ 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/context_menus/_IconizedContextMenu.scss

@@ -99,6 +99,10 @@ limitations under the License.
             .mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
                 padding-left: 14px;
             }
+
+            .mx_BetaCard_betaPill {
+                margin-left: 16px;
+            }
         }
     }
 
@@ -145,12 +149,17 @@ limitations under the License.
         }
     }
 
-    .mx_IconizedContextMenu_checked {
+    .mx_IconizedContextMenu_checked,
+    .mx_IconizedContextMenu_unchecked {
         margin-left: 16px;
         margin-right: -5px;
+    }
 
-        &::before {
+    .mx_IconizedContextMenu_checked::before {
-            mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+        mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
-        }
+    }
+
+    .mx_IconizedContextMenu_unchecked::before {
+        content: unset;
     }
 }

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

@@ -50,64 +50,11 @@ limitations under the License.
             line-height: $font-15px;
         }
 
-        .mx_AddExistingToSpace_entry {
+        .mx_AccessibleButton_kind_link {
-            display: flex;
+            font-size: $font-12px;
-            margin-top: 12px;
+            line-height: $font-15px;
-
+            margin-top: 8px;
-            // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
+            padding: 0;
-            .mx_DecoratedRoomAvatar {
-                margin-right: 12px;
-            }
-
-            .mx_AddExistingToSpace_entry_name {
-                font-size: $font-15px;
-                line-height: 30px;
-                flex-grow: 1;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                margin-right: 12px;
-            }
-
-            .mx_Checkbox {
-                align-items: center;
-            }
-        }
-    }
-
-    .mx_AddExistingToSpace_section_spaces {
-        .mx_BaseAvatar {
-            margin-right: 12px;
-        }
-
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-    }
-
-    .mx_AddExistingToSpace_section_experimental {
-        position: relative;
-        border-radius: 8px;
-        margin: 12px 0;
-        padding: 8px 8px 8px 42px;
-        background-color: $header-panel-bg-color;
-
-        font-size: $font-12px;
-        line-height: $font-15px;
-        color: $secondary-fg-color;
-
-        &::before {
-            content: '';
-            position: absolute;
-            left: 10px;
-            top: calc(50% - 8px); // vertical centering
-            height: 16px;
-            width: 16px;
-            background-color: $secondary-fg-color;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-            mask-position: center;
         }
     }
 
@@ -205,77 +152,106 @@ limitations under the License.
     min-height: 0;
     height: 80vh;
 
-    .mx_Dialog_title {
-        display: flex;
-
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-            margin: 0;
-            vertical-align: unset;
-        }
-
-        .mx_BaseAvatar {
-            display: inline-flex;
-            margin: auto 16px auto 5px;
-            vertical-align: middle;
-        }
-
-        > div {
-            > h1 {
-                font-weight: $font-semi-bold;
-                font-size: $font-18px;
-                line-height: $font-22px;
-                margin: 0;
-            }
-
-            .mx_AddExistingToSpaceDialog_onlySpace {
-                color: $secondary-fg-color;
-                font-size: $font-15px;
-                line-height: $font-24px;
-            }
-        }
-
-        .mx_Dropdown_input {
-            border: none;
-
-            > .mx_Dropdown_option {
-                padding-left: 0;
-                flex: unset;
-                height: unset;
-                color: $secondary-fg-color;
-                font-size: $font-15px;
-                line-height: $font-24px;
-
-                .mx_BaseAvatar {
-                    display: none;
-                }
-            }
-
-            .mx_Dropdown_menu {
-                .mx_AddExistingToSpaceDialog_dropdownOptionActive {
-                    color: $accent-color;
-                    padding-right: 32px;
-                    position: relative;
-
-                    &::before {
-                        content: '';
-                        width: 20px;
-                        height: 20px;
-                        top: 8px;
-                        right: 0;
-                        position: absolute;
-                        mask-position: center;
-                        mask-size: contain;
-                        mask-repeat: no-repeat;
-                        background-color: $accent-color;
-                        mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
-                    }
-                }
-            }
-        }
-    }
-
     .mx_AddExistingToSpace {
         display: contents;
     }
 }
+
+.mx_SubspaceSelector {
+    display: flex;
+
+    .mx_BaseAvatar_image {
+        border-radius: 8px;
+        margin: 0;
+        vertical-align: unset;
+    }
+
+    .mx_BaseAvatar {
+        display: inline-flex;
+        margin: auto 16px auto 5px;
+        vertical-align: middle;
+    }
+
+    > div {
+        > h1 {
+            font-weight: $font-semi-bold;
+            font-size: $font-18px;
+            line-height: $font-22px;
+            margin: 0;
+        }
+    }
+
+    .mx_Dropdown_input {
+        border: none;
+
+        > .mx_Dropdown_option {
+            padding-left: 0;
+            flex: unset;
+            height: unset;
+            color: $secondary-fg-color;
+            font-size: $font-15px;
+            line-height: $font-24px;
+
+            .mx_BaseAvatar {
+                display: none;
+            }
+        }
+
+        .mx_Dropdown_menu {
+            .mx_SubspaceSelector_dropdownOptionActive {
+                color: $accent-color;
+                padding-right: 32px;
+                position: relative;
+
+                &::before {
+                    content: '';
+                    width: 20px;
+                    height: 20px;
+                    top: 8px;
+                    right: 0;
+                    position: absolute;
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background-color: $accent-color;
+                    mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+                }
+            }
+        }
+    }
+
+    .mx_SubspaceSelector_onlySpace {
+        color: $secondary-fg-color;
+        font-size: $font-15px;
+        line-height: $font-24px;
+    }
+}
+
+.mx_AddExistingToSpace_entry {
+    display: flex;
+    margin-top: 12px;
+
+    .mx_DecoratedRoomAvatar, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
+    .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
+        margin-right: 12px;
+    }
+
+    img.mx_RoomAvatar_isSpaceRoom,
+    .mx_RoomAvatar_isSpaceRoom img {
+        border-radius: 8px;
+    }
+
+    .mx_AddExistingToSpace_entry_name {
+        font-size: $font-15px;
+        line-height: 30px;
+        flex-grow: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-right: 12px;
+    }
+
+    .mx_Checkbox {
+        align-items: center;
+    }
+}

res/css/views/dialogs/_AddressPickerDialog.scss

@@ -29,7 +29,6 @@ limitations under the License.
 .mx_AddressPickerDialog_input:focus {
     height: 26px;
     font-size: $font-14px;
-    font-family: $font-family;
     padding-left: 12px;
     padding-right: 12px;
     margin: 0 !important;

res/css/views/dialogs/_ConfirmUserActionDialog.scss

@@ -34,7 +34,6 @@ limitations under the License.
 }
 
 .mx_ConfirmUserActionDialog_reasonField {
-    font-family: $font-family;
     font-size: $font-14px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;

res/css/views/dialogs/_CreateRoomDialog.scss

@@ -65,7 +65,7 @@ limitations under the License.
 .mx_CreateRoomDialog_aliasContainer {
     display: flex;
     // put margin on container so it can collapse with siblings
-    margin: 10px 0;
+    margin: 24px 0 10px;
 
     .mx_RoomAliasField {
         margin: 0;
@@ -101,10 +101,6 @@ limitations under the License.
         margin-left: 30px;
     }
 
-    .mx_CreateRoomDialog_topic {
-        margin-bottom: 36px;
-    }
-
     .mx_Dialog_content > .mx_SettingsFlag {
         margin-top: 24px;
     }
@@ -114,4 +110,3 @@ limitations under the License.
         font-size: $font-12px;
     }
 }
-

res/css/views/dialogs/_CreateSubspaceDialog.scss

@@ -0,0 +1,81 @@
+/*
+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_CreateSubspaceDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mx_CreateSubspaceDialog {
+    width: 480px;
+    color: $primary-fg-color;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+
+    .mx_CreateSubspaceDialog_content {
+        flex-grow: 1;
+
+        .mx_CreateSubspaceDialog_betaNotice {
+            padding: 12px 16px;
+            border-radius: 8px;
+            background-color: $header-panel-bg-color;
+
+            .mx_BetaCard_betaPill {
+                margin-right: 8px;
+                vertical-align: middle;
+            }
+        }
+
+        .mx_JoinRuleDropdown + p {
+            color: $muted-fg-color;
+            font-size: $font-12px;
+        }
+    }
+
+    .mx_CreateSubspaceDialog_footer {
+        display: flex;
+        margin-top: 20px;
+
+        .mx_CreateSubspaceDialog_footer_prompt {
+            flex-grow: 1;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-fg-color;
+
+            > * {
+                vertical-align: middle;
+            }
+        }
+
+        .mx_AccessibleButton {
+            display: inline-block;
+            align-self: center;
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            margin-left: 16px;
+            padding: 8px 36px;
+        }
+
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+        }
+    }
+}

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -55,22 +55,6 @@ limitations under the License.
     padding-right: 24px;
 }
 
-.mx_DevTools_inputCell {
-    display: table-cell;
-    width: 240px;
-}
-
-.mx_DevTools_inputCell input {
-    display: inline-block;
-    border: 0;
-    border-bottom: 1px solid $input-underline-color;
-    padding: 0;
-    width: 240px;
-    color: $input-fg-color;
-    font-family: $font-family;
-    font-size: $font-16px;
-}
-
 .mx_DevTools_textarea {
     font-size: $font-12px;
     max-width: 684px;
@@ -139,7 +123,6 @@ limitations under the License.
     + .mx_DevTools_tgl-btn {
         padding: 2px;
         transition: all .2s ease;
-        font-family: sans-serif;
         perspective: 100px;
         &::after,
         &::before {

res/css/views/dialogs/_ForwardDialog.scss

@@ -36,6 +36,10 @@ limitations under the License.
         flex-shrink: 0;
         overflow-y: auto;
 
+        .mx_EventTile[data-layout=bubble] {
+            margin-top: 20px;
+        }
+
         div {
             pointer-events: none;
         }

res/css/views/dialogs/_GenericFeatureFeedbackDialog.scss

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_BetaFeedbackDialog {
+.mx_GenericFeatureFeedbackDialog {
-    .mx_BetaFeedbackDialog_subheading {
+    .mx_GenericFeatureFeedbackDialog_subheading {
         color: $primary-fg-color;
         font-size: $font-14px;
         line-height: $font-20px;

res/css/views/dialogs/_JoinRuleDropdown.scss

@@ -0,0 +1,67 @@
+/*
+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_JoinRuleDropdown {
+    margin-bottom: 8px;
+    font-weight: normal;
+    font-family: $font-family;
+    font-size: $font-14px;
+    color: $primary-fg-color;
+
+    .mx_Dropdown_input {
+        border: 1px solid $input-border-color;
+    }
+
+    .mx_Dropdown_option {
+        font-size: $font-14px;
+        line-height: $font-32px;
+        height: 32px;
+        min-height: 32px;
+
+        > div {
+            padding-left: 30px;
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: 16px;
+                width: 16px;
+                left: 6px;
+                top: 8px;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                background-color: $secondary-fg-color;
+            }
+        }
+    }
+
+    .mx_JoinRuleDropdown_invite::before {
+        mask-image: url('$(res)/img/element-icons/lock.svg');
+        mask-size: contain;
+    }
+
+    .mx_JoinRuleDropdown_public::before {
+        mask-image: url('$(res)/img/globe.svg');
+        mask-size: 12px;
+    }
+
+    .mx_JoinRuleDropdown_restricted::before {
+        mask-image: url('$(res)/img/element-icons/community-members.svg');
+        mask-size: contain;
+    }
+}
+

res/css/views/dialogs/_LeaveSpaceDialog.scss

@@ -0,0 +1,96 @@
+/*
+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_LeaveSpaceDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+        padding: 24px 32px;
+    }
+}
+
+.mx_LeaveSpaceDialog {
+    width: 440px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    max-height: 520px;
+
+    .mx_Dialog_content {
+        flex-grow: 1;
+        margin: 0;
+        overflow-y: auto;
+
+        .mx_RadioButton + .mx_RadioButton {
+            margin-top: 16px;
+        }
+
+        .mx_SearchBox {
+            // To match the space around the title
+            margin: 0 0 15px 0;
+            flex-grow: 0;
+            border-radius: 8px;
+        }
+
+        .mx_LeaveSpaceDialog_noResults {
+            display: block;
+            margin-top: 24px;
+        }
+
+        .mx_LeaveSpaceDialog_section {
+            margin: 16px 0;
+        }
+
+        .mx_LeaveSpaceDialog_section_warning {
+            position: relative;
+            border-radius: 8px;
+            margin: 12px 0 0;
+            padding: 12px 8px 12px 42px;
+            background-color: $header-panel-bg-color;
+
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-fg-color;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 10px;
+                top: calc(50% - 8px); // vertical centering
+                height: 16px;
+                width: 16px;
+                background-color: $secondary-fg-color;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+                mask-position: center;
+            }
+        }
+
+        > p {
+            color: $primary-fg-color;
+        }
+    }
+
+    .mx_Dialog_buttons {
+        margin-top: 20px;
+
+        .mx_Dialog_primary {
+            background-color: $notice-primary-color !important; // override default colour
+            border-color: $notice-primary-color;
+        }
+    }
+}

res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss

@@ -0,0 +1,150 @@
+/*
+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_ManageRestrictedJoinRuleDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mx_ManageRestrictedJoinRuleDialog {
+    width: 480px;
+    color: $primary-fg-color;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+    height: 60vh;
+
+    .mx_SearchBox {
+        // To match the space around the title
+        margin: 0 0 15px 0;
+        flex-grow: 0;
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_content {
+        flex-grow: 1;
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_noResults {
+        display: block;
+        margin-top: 24px;
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_section {
+        &:not(:first-child) {
+            margin-top: 24px;
+        }
+
+        > h3 {
+            margin: 0;
+            color: $secondary-fg-color;
+            font-size: $font-12px;
+            font-weight: $font-semi-bold;
+            line-height: $font-15px;
+        }
+
+        .mx_ManageRestrictedJoinRuleDialog_entry {
+            display: flex;
+            margin-top: 12px;
+
+            > div {
+                flex-grow: 1;
+            }
+
+            img.mx_RoomAvatar_isSpaceRoom,
+            .mx_RoomAvatar_isSpaceRoom img {
+                border-radius: 4px;
+            }
+
+            .mx_ManageRestrictedJoinRuleDialog_entry_name {
+                margin: 0 8px;
+                font-size: $font-15px;
+                line-height: 30px;
+                flex-grow: 1;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .mx_ManageRestrictedJoinRuleDialog_entry_description {
+                margin-top: 8px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $tertiary-fg-color;
+            }
+
+            .mx_Checkbox {
+                align-items: center;
+            }
+        }
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_section_spaces {
+        .mx_BaseAvatar {
+            margin-right: 12px;
+        }
+
+        .mx_BaseAvatar_image {
+            border-radius: 8px;
+        }
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_section_info {
+        position: relative;
+        border-radius: 8px;
+        margin: 12px 0;
+        padding: 8px 8px 8px 42px;
+        background-color: $header-panel-bg-color;
+
+        font-size: $font-12px;
+        line-height: $font-15px;
+        color: $secondary-fg-color;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: calc(50% - 8px); // vertical centering
+            height: 16px;
+            width: 16px;
+            background-color: $secondary-fg-color;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+            mask-position: center;
+        }
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_footer {
+        margin-top: 20px;
+
+        .mx_ManageRestrictedJoinRuleDialog_footer_buttons {
+            display: flex;
+            width: max-content;
+            margin-left: auto;
+
+            .mx_AccessibleButton {
+                display: inline-block;
+
+                & + .mx_AccessibleButton {
+                    margin-left: 24px;
+                }
+            }
+        }
+    }
+}

res/css/views/elements/_DesktopCapturerSourcePicker.scss

@@ -16,57 +16,41 @@ limitations under the License.
 
 .mx_desktopCapturerSourcePicker {
     overflow: hidden;
-}
 
-.mx_desktopCapturerSourcePicker_tabLabels {
+    .mx_desktopCapturerSourcePicker_tab {
-    display: flex;
+        display: flex;
-    padding: 0 0 8px 0;
+        flex-wrap: wrap;
-}
+        justify-content: center;
+        align-items: flex-start;
+        height: 500px;
+        overflow: overlay;
 
-.mx_desktopCapturerSourcePicker_tabLabel,
+        .mx_desktopCapturerSourcePicker_source {
-.mx_desktopCapturerSourcePicker_tabLabel_selected {
+            width: 50%;
-    width: 100%;
+            display: flex;
-    text-align: center;
+            flex-direction: column;
-    border-radius: 8px;
-    padding: 8px 0;
-    font-size: $font-13px;
-}
 
-.mx_desktopCapturerSourcePicker_tabLabel_selected {
+            .mx_desktopCapturerSourcePicker_source_thumbnail {
-    background-color: $tab-label-active-bg-color;
+                margin: 4px;
-    color: $tab-label-active-fg-color;
+                padding: 4px;
-}
+                border-width: 2px;
+                border-radius: 8px;
+                border-style: solid;
+                border-color: transparent;
 
-.mx_desktopCapturerSourcePicker_panel {
+                &.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
-    display: flex;
+                &:hover,
-    flex-wrap: wrap;
+                &:focus {
-    justify-content: center;
+                    border-color: $accent-color;
-    align-items: flex-start;
+                }
-    height: 500px;
+            }
-    overflow: overlay;
-}
 
-.mx_desktopCapturerSourcePicker_stream_button {
+            .mx_desktopCapturerSourcePicker_source_name {
-    display: flex;
+                margin: 0 4px;
-    flex-direction: column;
+                white-space: nowrap;
-    margin: 8px;
+                text-overflow: ellipsis;
-    border-radius: 4px;
+                overflow: hidden;
-}
+            }
-
+        }
-.mx_desktopCapturerSourcePicker_stream_button:hover,
+    }
-.mx_desktopCapturerSourcePicker_stream_button:focus {
-    background: $roomtile-selected-bg-color;
-}
-
-.mx_desktopCapturerSourcePicker_stream_thumbnail {
-    margin: 4px;
-    width: 312px;
-}
-
-.mx_desktopCapturerSourcePicker_stream_name {
-    margin: 0 4px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    width: 312px;
 }

res/css/views/elements/_Dropdown.scss

@@ -27,7 +27,7 @@ limitations under the License.
     display: flex;
     align-items: center;
     position: relative;
-    border-radius: 3px;
+    border-radius: 4px;
     border: 1px solid $strong-input-border-color;
     font-size: $font-12px;
     user-select: none;
@@ -109,7 +109,7 @@ input.mx_Dropdown_option:focus {
     z-index: 2;
     margin: 0;
     padding: 0px;
-    border-radius: 3px;
+    border-radius: 4px;
     border: 1px solid $input-focused-border-color;
     background-color: $primary-bg-color;
     max-height: 200px;

res/css/views/elements/_Field.scss

@@ -39,7 +39,6 @@ limitations under the License.
 .mx_Field select,
 .mx_Field textarea {
     font-weight: normal;
-    font-family: $font-family;
     font-size: $font-14px;
     border: none;
     // Even without a border here, we still need this avoid overlapping the rounded

res/css/views/elements/_ReplyThread.scss

@@ -19,8 +19,9 @@ limitations under the License.
     margin-left: 0;
     margin-right: 0;
     margin-bottom: 8px;
-    padding-left: 10px;
+    padding: 0 10px;
-    border-left: 4px solid $button-bg-color;
+    border-left: 2px solid $button-bg-color;
+    border-radius: 2px;
 
     .mx_ReplyThread_show {
         cursor: pointer;

res/css/views/messages/_CallEvent.scss

@@ -23,7 +23,7 @@ limitations under the License.
     background-color: $dark-panel-bg-color;
     border-radius: 8px;
     margin: 10px auto;
-    max-width: 75%;
+    width: 75%;
     box-sizing: border-box;
     height: 60px;
 
@@ -43,6 +43,14 @@ limitations under the License.
         }
     }
 
+    &.mx_CallEvent_voice.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
+        mask-image: url('$(res)/img/voip/missed-voice.svg');
+    }
+
+    &.mx_CallEvent_video.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
+        mask-image: url('$(res)/img/voip/missed-video.svg');
+    }
+
     .mx_CallEvent_info {
         display: flex;
         flex-direction: row;

res/css/views/messages/_MFileBody.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -60,11 +60,7 @@ limitations under the License.
 }
 
 .mx_MFileBody_info {
-    background-color: $message-body-panel-bg-color;
+    cursor: pointer;
-    border-radius: 12px;
-    width: 243px; // same width as a playable voice message, accounting for padding
-    padding: 6px 12px;
-    color: $message-body-panel-fg-color;
 
     .mx_MFileBody_info_icon {
         background-color: $message-body-panel-icon-bg-color;

res/css/views/messages/_MImageBody.scss

@@ -16,23 +16,15 @@ limitations under the License.
 
 $timelineImageBorderRadius: 4px;
 
-.mx_MImageBody {
-    display: block;
-}
-
 .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 {
+    > div > canvas {
         border-radius: $timelineImageBorderRadius;
     }
 }

res/css/views/messages/_MediaBody.scss

@@ -20,9 +20,11 @@ limitations under the License.
 .mx_MediaBody {
     background-color: $message-body-panel-bg-color;
     border-radius: 12px;
+    max-width: 243px; // use max-width instead of width so it fits within right panels
 
     color: $message-body-panel-fg-color;
     font-size: $font-14px;
     line-height: $font-24px;
-}
 
+    padding: 6px 12px;
+}

res/css/views/messages/_ViewSourceEvent.scss

@@ -43,8 +43,10 @@ limitations under the License.
         margin-bottom: 7px;
         mask-image: url('$(res)/img/feather-customised/minimise.svg');
     }
+}
 
-    &:hover .mx_ViewSourceEvent_toggle {
+.mx_EventTile:hover {
+    .mx_ViewSourceEvent_toggle {
         visibility: visible;
     }
 }

res/css/views/rooms/_EventBubbleTile.scss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_EventTile[data-layout=bubble],
-.mx_EventTile[data-layout=bubble] ~ .mx_EventListSummary {
+.mx_EventListSummary[data-layout=bubble] {
     --avatarSize: 32px;
     --gutterSize: 11px;
     --cornerRadius: 12px;
@@ -38,17 +38,22 @@ limitations under the License.
         padding-top: 0;
     }
 
-    &:hover {
+    &::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        bottom: -1px;
+        left: -60px;
+        right: -60px;
+        z-index: -1;
+        border-radius: 4px;
+    }
+
+    &:hover,
+    &.mx_EventTile_selected {
+
         &::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 {
@@ -80,7 +85,7 @@ limitations under the License.
 
         .mx_MessageActionBar {
             right: 0;
-            transform: translate3d(50%, 50%, 0);
+            transform: translate3d(90%, 50%, 0);
         }
 
         --backgroundColor: $eventbubble-others-bg;
@@ -91,12 +96,17 @@ limitations under the License.
             float: right;
             > a {
                 left: auto;
-                right: -48px;
+                right: -68px;
             }
         }
         .mx_SenderProfile {
             display: none;
         }
+
+        .mx_ReplyTile .mx_SenderProfile {
+            display: block;
+        }
+
         .mx_ReactionsRow {
             float: right;
             clear: right;
@@ -126,7 +136,9 @@ limitations under the License.
         margin: 0 -12px 0 -9px;
         > a {
             position: absolute;
-            left: -48px;
+            padding: 10px 20px;
+            top: 0;
+            left: -68px;
         }
     }
 
@@ -148,12 +160,24 @@ limitations under the License.
         position: absolute;
         top: 0;
         line-height: 1;
+        z-index: 9;
         img {
             box-shadow: 0 0 0 3px $eventbubble-avatar-outline;
             border-radius: 50%;
         }
     }
 
+    &.mx_EventTile_noSender {
+        .mx_EventTile_avatar {
+            top: -19px;
+        }
+    }
+
+    .mx_BaseAvatar,
+    .mx_EventTile_avatar {
+        line-height: 1;
+    }
+
     &[data-has-reply=true] {
         > .mx_EventTile_line {
             flex-direction: column;
@@ -204,89 +228,6 @@ limitations under the License.
         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;
@@ -321,3 +262,93 @@ limitations under the License.
         max-width: 100%;
     }
 }
+
+.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
+.mx_EventTile.mx_EventTile_info[data-layout=bubble],
+.mx_EventListSummary[data-layout=bubble][data-expanded=false] {
+    --backgroundColor: transparent;
+    --gutterSize: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 5px 0;
+
+    .mx_EventTile_avatar {
+        position: static;
+        order: -1;
+        margin-right: 5px;
+    }
+
+    .mx_EventTile_line,
+    .mx_EventTile_info {
+        min-width: 100%;
+    }
+
+    .mx_EventTile_e2eIcon {
+        margin-left: 9px;
+    }
+
+    .mx_EventTile_line > a {
+        right: auto;
+        top: -15px;
+        left: -68px;
+    }
+}
+
+.mx_EventListSummary[data-layout=bubble] {
+    --maxWidth: 70%;
+    margin-left: calc(var(--avatarSize) + var(--gutterSize));
+    margin-right: 94px;
+    .mx_EventListSummary_toggle {
+        float: none;
+        margin: 0;
+        order: 9;
+        margin-left: 5px;
+        margin-right: 55px;
+    }
+    .mx_EventListSummary_avatars {
+        padding-top: 0;
+    }
+
+    &::after {
+        content: "";
+        clear: both;
+    }
+
+    .mx_EventTile {
+        margin: 0 6px;
+        padding: 2px 0;
+    }
+
+    .mx_EventTile_line {
+        margin: 0 5px;
+        > a {
+            left: auto;
+            right: 0;
+            transform: translateX(calc(100% + 5px));
+        }
+    }
+
+    .mx_MessageActionBar {
+        transform: translate3d(90%, 0, 0);
+    }
+}
+
+.mx_EventListSummary[data-expanded=false][data-layout=bubble] {
+    padding: 0 34px;
+}
+
+/* events that do not require bubble layout */
+.mx_EventListSummary[data-layout=bubble],
+.mx_EventTile.mx_EventTile_bad[data-layout=bubble] {
+    .mx_EventTile_line {
+        background: transparent;
+    }
+
+    &:hover {
+        &::before {
+            background: transparent;
+        }
+    }
+}

res/css/views/rooms/_EventTile.scss

@@ -59,7 +59,6 @@ $hover-select-border: 4px;
         font-size: $font-14px;
         display: inline-block; /* anti-zalgo, with overflow hidden */
         overflow: hidden;
-        cursor: pointer;
         padding-bottom: 0px;
         padding-top: 0px;
         margin: 0px;
@@ -132,10 +131,6 @@ $hover-select-border: 4px;
         }
     }
 
-    &.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);
     }
@@ -208,43 +203,11 @@ $hover-select-border: 4px;
         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 {
@@ -303,22 +266,63 @@ $hover-select-border: 4px;
 
     .mx_ReactionsRow {
         margin: 0;
-        padding: 6px 60px;
+        padding: 4px 64px;
     }
 }
 
-.mx_RoomView_timeline_rr_enabled {
+.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
+.mx_EventListSummary:not([data-layout=bubble]) > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line {
+    padding-left: calc($left-gutter + 18px);
+}
 
-    .mx_EventTile:not([data-layout=bubble]) {
+.mx_EventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
+    padding-left: calc($left-gutter);
+}
+
+/* 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 {
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 34px;
+}
+
+/* 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;
+}
+
+.mx_RoomView_timeline_rr_enabled {
+    .mx_EventTile[data-layout=group] {
         .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_SenderProfile {
+    cursor: pointer;
+}
+
 .mx_EventTile_bubbleContainer {
     display: grid;
     grid-template-columns: 1fr 100px;
@@ -453,8 +457,14 @@ $hover-select-border: 4px;
 
 /* Various markdown overrides */
 
-.mx_EventTile_body pre {
+.mx_EventTile_body {
-    border: 1px solid transparent;
+    a:hover {
+        text-decoration: underline;
+    }
+
+    pre {
+        border: 1px solid transparent;
+    }
 }
 
 .mx_EventTile_content .markdown-body {
@@ -469,6 +479,10 @@ $hover-select-border: 4px;
         background-color: $header-panel-bg-color;
     }
 
+    pre code > * {
+        display: inline-block;
+    }
+
     pre {
         // have to use overlay rather than auto otherwise Linux and Windows
         // Chrome gets very confused about vertical spacing:
@@ -566,6 +580,12 @@ $hover-select-border: 4px;
     color: $accent-color-alt;
 }
 
+.mx_EventTile_content .markdown-body blockquote {
+    border-left: 2px solid $blockquote-bar-color;
+    border-radius: 2px;
+    padding: 0 10px;
+}
+
 .mx_EventTile_content .markdown-body .hljs {
     display: inline !important;
 }

res/css/views/rooms/_GroupLayout.scss

@@ -26,6 +26,7 @@ $left-gutter: 64px;
 
         > .mx_EventTile_avatar {
             position: absolute;
+            z-index: 9;
         }
 
         .mx_MessageTimestamp {

res/css/views/rooms/_IRCLayout.scss

@@ -116,6 +116,11 @@ $irc-line-height: $font-18px;
         .mx_EditMessageComposer_buttons {
             position: relative;
         }
+
+        .mx_ReactionsRow {
+            padding-left: 0;
+            padding-right: 0;
+        }
     }
 
     .mx_EventTile_emote {

res/css/views/rooms/_LinkPreviewWidget.scss

@@ -19,7 +19,8 @@ limitations under the License.
     margin-right: 15px;
     margin-bottom: 15px;
     display: flex;
-    border-left: 4px solid $preview-widget-bar-color;
+    border-left: 2px solid $preview-widget-bar-color;
+    border-radius: 2px;
     color: $preview-widget-fg-color;
 }
 
@@ -33,7 +34,7 @@ limitations under the License.
 .mx_LinkPreviewWidget_caption {
     margin-left: 15px;
     flex: 1 1 auto;
-    overflow-x: hidden; // cause it to wrap rather than clip
+    overflow: hidden; // cause it to wrap rather than clip
 }
 
 .mx_LinkPreviewWidget_title {

res/css/views/rooms/_MessageComposer.scss

@@ -165,8 +165,6 @@ limitations under the License.
     font-size: $font-14px;
     max-height: 120px;
     overflow: auto;
-    /* needed for FF */
-    font-family: $font-family;
 }
 
 /* hack for FF as vertical alignment of custom placeholder text is broken */

res/css/views/rooms/_ReplyTile.scss

@@ -60,8 +60,6 @@ limitations under the License.
         $reply-lines: 2;
         $line-height: $font-22px;
 
-        pointer-events: none;
-
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-box-orient: vertical;

res/css/views/rooms/_SendMessageComposer.scss

@@ -29,8 +29,10 @@ limitations under the License.
         display: flex;
         flex-direction: column;
         // min-height at this level so the mx_BasicMessageComposer_input
-        // still stays vertically centered when less than 50px
+        // still stays vertically centered when less than 55px.
-        min-height: 50px;
+        // We also set this to ensure the voice message recording widget
+        // doesn't cause a jump.
+        min-height: 55px;
 
         .mx_BasicMessageComposer_input {
             padding: 3px 0;

res/css/views/rooms/_VoiceRecordComposerTile.scss

@@ -20,7 +20,7 @@ limitations under the License.
     height: 28px;
     border: 2px solid $voice-record-stop-border-color;
     border-radius: 32px;
-    margin-right: 16px; // between us and the send button
+    margin-right: 8px; // between us and the waveform component
     position: relative;
 
     &::after {
@@ -46,9 +46,28 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/trashcan.svg');
 }
 
+.mx_VoiceRecordComposerTile_uploadingState {
+    margin-right: 10px;
+    color: $secondary-fg-color;
+}
+
+.mx_VoiceRecordComposerTile_failedState {
+    margin-right: 21px;
+
+    .mx_VoiceRecordComposerTile_uploadState_badge {
+        display: inline-block;
+        margin-right: 4px;
+        vertical-align: middle;
+    }
+}
+
 .mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
     // Note: remaining class properties are in the PlayerContainer CSS.
 
+    // fixed height to reduce layout jumps with the play button appearing
+    // https://github.com/vector-im/element-web/issues/18431
+    height: 32px;
+
     margin: 6px; // force the composer area to put a gutter around us
     margin-right: 12px; // isolate from stop/send button
 
@@ -68,7 +87,7 @@ limitations under the License.
             height: 10px;
             position: absolute;
             left: 12px; // 12px from the left edge for container padding
-            top: 18px; // vertically center (middle align with clock)
+            top: 17px; // vertically center (middle align with clock)
             border-radius: 10px;
         }
     }

res/css/views/settings/_LayoutSwitcher.scss

@@ -0,0 +1,91 @@
+/*
+Copyright 2020 - 2021 The Matrix.org Foundation C.I.C.
+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_LayoutSwitcher {
+    .mx_LayoutSwitcher_RadioButtons {
+        display: flex;
+        flex-direction: row;
+        gap: 24px;
+
+        color: $primary-fg-color;
+
+        > .mx_LayoutSwitcher_RadioButton {
+            flex-grow: 0;
+            flex-shrink: 1;
+            display: flex;
+            flex-direction: column;
+
+            width: 300px;
+
+            border: 1px solid $appearance-tab-border-color;
+            border-radius: 10px;
+
+            .mx_EventTile_msgOption,
+            .mx_MessageActionBar {
+                display: none;
+            }
+
+            .mx_LayoutSwitcher_RadioButton_preview {
+                flex-grow: 1;
+                display: flex;
+                align-items: center;
+                padding: 10px;
+                pointer-events: none;
+            }
+
+            .mx_RadioButton {
+                flex-grow: 0;
+                padding: 10px;
+            }
+
+            .mx_EventTile_content {
+                margin-right: 0;
+            }
+
+            &.mx_LayoutSwitcher_RadioButton_selected {
+                border-color: $accent-color;
+            }
+        }
+
+        .mx_RadioButton {
+            border-top: 1px solid $appearance-tab-border-color;
+
+            > input + div {
+                border-color: rgba($muted-fg-color, 0.2);
+            }
+        }
+
+        .mx_RadioButton_checked {
+            background-color: rgba($accent-color, 0.08);
+        }
+
+        .mx_EventTile {
+            margin: 0;
+            &[data-layout=bubble] {
+                margin-right: 40px;
+            }
+            &[data-layout=irc] {
+                > a {
+                    display: none;
+                }
+            }
+            .mx_EventTile_line {
+                max-width: 90%;
+            }
+        }
+    }
+}

res/css/views/settings/_ProfileSettings.scss

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_ProfileSettings_controls_topic {
     & > textarea {
+        font-family: inherit;
         resize: vertical;
     }
 }

res/css/views/settings/tabs/_SettingsTab.scss

@@ -36,7 +36,6 @@ limitations under the License.
 .mx_SettingsTab_subheading {
     font-size: $font-16px;
     display: block;
-    font-family: $font-family;
     font-weight: 600;
     color: $primary-fg-color;
     margin-bottom: 10px;
@@ -47,14 +46,14 @@ limitations under the License.
     color: $settings-subsection-fg-color;
     font-size: $font-14px;
     display: block;
-    margin: 10px 100px 10px 0; // Align with the rest of the view
+    margin: 10px 80px 10px 0; // Align with the rest of the view
 }
 
 .mx_SettingsTab_section {
     margin-bottom: 24px;
 
     .mx_SettingsFlag {
-        margin-right: 100px;
+        margin-right: 80px;
         margin-bottom: 10px;
     }
 
@@ -73,6 +72,13 @@ limitations under the License.
     padding-right: 10px;
 }
 
+.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_microcopy {
+    margin-top: 4px;
+    font-size: $font-12px;
+    line-height: $font-15px;
+    color: $secondary-fg-color;
+}
+
 .mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
     float: right;
 }

res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss

@@ -14,6 +14,44 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_SecurityRoomSettingsTab {
+    .mx_SettingsTab_showAdvanced {
+        padding: 0;
+        margin-bottom: 16px;
+    }
+
+    .mx_SecurityRoomSettingsTab_spacesWithAccess {
+        > h4 {
+            color: $secondary-fg-color;
+            font-weight: $font-semi-bold;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            text-transform: uppercase;
+        }
+
+        > span {
+            font-weight: 500;
+            font-size: $font-14px;
+            line-height: 32px; // matches height of avatar for v-align
+            color: $secondary-fg-color;
+            display: inline-block;
+
+            img.mx_RoomAvatar_isSpaceRoom,
+            .mx_RoomAvatar_isSpaceRoom img {
+                border-radius: 8px;
+            }
+
+            .mx_BaseAvatar {
+                margin-right: 8px;
+            }
+
+            & + span {
+                margin-left: 16px;
+            }
+        }
+    }
+}
+
 .mx_SecurityRoomSettingsTab_warning {
     display: block;
 
@@ -26,5 +64,51 @@ limitations under the License.
 }
 
 .mx_SecurityRoomSettingsTab_encryptionSection {
-    margin-bottom: 25px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid $menu-border-color;
+    margin-bottom: 32px;
+}
+
+.mx_SecurityRoomSettingsTab_upgradeRequired {
+    margin-left: 16px;
+    padding: 4px 16px;
+    border: 1px solid $accent-color;
+    border-radius: 8px;
+    color: $accent-color;
+    font-size: $font-12px;
+    line-height: $font-15px;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule {
+    .mx_RadioButton {
+        padding-top: 16px;
+        margin-bottom: 8px;
+
+        .mx_RadioButton_content {
+            margin-left: 14px;
+            font-weight: $font-semi-bold;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $primary-fg-color;
+            display: block;
+        }
+    }
+
+    > span {
+        display: inline-block;
+        margin-left: 34px;
+        margin-bottom: 16px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-fg-color;
+
+        & + .mx_RadioButton {
+            border-top: 1px solid $menu-border-color;
+        }
+    }
+
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+        font-size: inherit;
+    }
 }

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -1,5 +1,5 @@
 /*
-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.
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 .mx_AppearanceUserSettingsTab_fontSlider,
-.mx_AppearanceUserSettingsTab_fontSlider_preview,
+.mx_AppearanceUserSettingsTab_fontSlider_preview {
-.mx_AppearanceUserSettingsTab_Layout {
     @mixin mx_Settings_fullWidthField;
 }
 
@@ -45,6 +44,11 @@ limitations under the License.
     border-radius: 10px;
     padding: 0 16px 9px 16px;
     pointer-events: none;
+    display: flow-root;
+
+    .mx_EventTile[data-layout=bubble] {
+        margin-top: 30px;
+    }
 
     .mx_EventTile_msgOption {
         display: none;
@@ -151,67 +155,6 @@ limitations under the License.
     margin-left: calc($font-16px + 10px);
 }
 
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
-    display: flex;
-    flex-direction: row;
-
-    color: $primary-fg-color;
-
-    .mx_AppearanceUserSettingsTab_spacer {
-        width: 24px;
-    }
-
-    > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
-        flex-grow: 0;
-        flex-shrink: 1;
-        display: flex;
-        flex-direction: column;
-
-        width: 300px;
-
-        border: 1px solid $appearance-tab-border-color;
-        border-radius: 10px;
-
-        .mx_EventTile_msgOption,
-        .mx_MessageActionBar {
-            display: none;
-        }
-
-        .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
-            flex-grow: 1;
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            pointer-events: none;
-        }
-
-        .mx_RadioButton {
-            flex-grow: 0;
-            padding: 10px;
-        }
-
-        .mx_EventTile_content {
-            margin-right: 0;
-        }
-
-        &.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
-            border-color: $accent-color;
-        }
-    }
-
-    .mx_RadioButton {
-        border-top: 1px solid $appearance-tab-border-color;
-
-        > input + div {
-            border-color: rgba($muted-fg-color, 0.2);
-        }
-    }
-
-    .mx_RadioButton_checked {
-        background-color: rgba($accent-color, 0.08);
-    }
-}
-
 .mx_AppearanceUserSettingsTab_Advanced {
     color: $primary-fg-color;
 

res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss

@@ -28,28 +28,32 @@ limitations under the License.
     user-select: all;
 }
 
-.mx_HelpUserSettingsTab_accessToken {
+.mx_HelpUserSettingsTab_copy {
     display: flex;
-    justify-content: space-between;
     border-radius: 5px;
     border: solid 1px $light-fg-color;
     margin-bottom: 10px;
     margin-top: 10px;
     padding: 10px;
-}
+    width: max-content;
 
-.mx_HelpUserSettingsTab_accessToken_copy {
+    .mx_HelpUserSettingsTab_copyButton {
-    flex-shrink: 0;
+        flex-shrink: 0;
-    cursor: pointer;
+        width: 20px;
-    margin-left: 20px;
+        height: 20px;
-    display: inherit;
+        cursor: pointer;
-}
+        margin-left: 20px;
+        display: block;
 
-.mx_HelpUserSettingsTab_accessToken_copy > div {
+        &::before {
-    mask-image: url($copy-button-url);
+            content: "";
-    background-color: $message-action-bar-fg-color;
+
-    margin-left: 5px;
+            mask-image: url($copy-button-url);
-    width: 20px;
+            background-color: $message-action-bar-fg-color;
-    height: 20px;
+            width: 20px;
-    background-repeat: no-repeat;
+            height: 20px;
+            display: block;
+            background-repeat: no-repeat;
+        }
+    }
 }

res/css/views/spaces/_SpaceCreateMenu.scss

@@ -43,6 +43,12 @@ $spacePanelWidth: 71px;
                 color: $secondary-fg-color;
                 margin: 0;
             }
+
+            .mx_SpaceFeedbackPrompt {
+                border-top: 1px solid $input-border-color;
+                padding-top: 12px;
+                margin-top: 16px;
+            }
         }
 
         // XXX remove this when spaces leaves Beta
@@ -99,3 +105,25 @@ $spacePanelWidth: 71px;
         }
     }
 }
+
+.mx_SpaceFeedbackPrompt {
+    font-size: $font-15px;
+    line-height: $font-24px;
+
+    > span {
+        color: $secondary-fg-color;
+        position: relative;
+        font-size: inherit;
+        line-height: inherit;
+        margin-right: auto;
+    }
+
+    .mx_AccessibleButton_kind_link {
+        color: $accent-color;
+        position: relative;
+        padding: 0;
+        margin-left: 8px;
+        font-size: inherit;
+        line-height: inherit;
+    }
+}

res/css/views/toasts/_IncomingCallToast.scss

@@ -0,0 +1,149 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+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_IncomingCallToast {
+    display: flex;
+    flex-direction: row;
+    pointer-events: initial; // restore pointer events so the user can accept/decline
+
+    .mx_IncomingCallToast_content {
+        display: flex;
+        flex-direction: column;
+        margin-left: 8px;
+
+        .mx_CallEvent_caller {
+            font-weight: bold;
+            font-size: $font-15px;
+            line-height: $font-18px;
+
+            margin-top: 2px;
+        }
+
+        .mx_CallEvent_type {
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $tertiary-fg-color;
+
+            margin-top: 4px;
+            margin-bottom: 6px;
+
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .mx_CallEvent_type_icon {
+                height: 16px;
+                width: 16px;
+                margin-right: 6px;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    height: inherit;
+                    width: inherit;
+                    background-color: $tertiary-fg-color;
+                    mask-repeat: no-repeat;
+                    mask-size: contain;
+                }
+            }
+        }
+
+        &.mx_IncomingCallToast_content_voice {
+            .mx_CallEvent_type .mx_CallEvent_type_icon::before,
+            .mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
+                mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
+            }
+        }
+
+        &.mx_IncomingCallToast_content_video {
+            .mx_CallEvent_type .mx_CallEvent_type_icon::before,
+            .mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
+                mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+            }
+        }
+
+        .mx_IncomingCallToast_buttons {
+            margin-top: 8px;
+            display: flex;
+            flex-direction: row;
+            gap: 12px;
+
+            .mx_IncomingCallToast_button {
+                height: 24px;
+                padding: 0px 8px;
+                flex-shrink: 0;
+                flex-grow: 1;
+                margin-right: 0;
+                font-size: $font-15px;
+                line-height: $font-24px;
+
+                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;
+                        margin-right: 8px;
+                    }
+                }
+
+                &.mx_IncomingCallToast_button_accept span::before {
+                    mask-size: 13px;
+                    width: 13px;
+                    height: 13px;
+                }
+
+                &.mx_IncomingCallToast_button_decline span::before {
+                    mask-image: url('$(res)/img/element-icons/call/hangup.svg');
+                    mask-size: 16px;
+                    width: 16px;
+                    height: 16px;
+                }
+            }
+        }
+    }
+
+    .mx_IncomingCallToast_iconButton {
+        display: flex;
+        height: 20px;
+        width: 20px;
+
+        &::before {
+            content: '';
+
+            height: inherit;
+            width: inherit;
+            background-color: $tertiary-fg-color;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-position: center;
+        }
+    }
+
+    .mx_IncomingCallToast_silence::before {
+        mask-image: url('$(res)/img/voip/silence.svg');
+    }
+
+    .mx_IncomingCallToast_unSilence::before {
+        mask-image: url('$(res)/img/voip/un-silence.svg');
+    }
+}

res/css/views/voip/_CallContainer.scss

@@ -28,7 +28,6 @@ limitations under the License.
 
     .mx_CallPreview {
         pointer-events: initial; // restore pointer events so the user can leave/interact
-        cursor: pointer;
 
         .mx_VideoFeed_remote.mx_VideoFeed_voice {
             min-height: 150px;
@@ -43,84 +42,4 @@ limitations under the License.
     .mx_AppTile_persistedWrapper div {
         min-width: 350px;
     }
-
-    .mx_IncomingCallBox {
-        min-width: 250px;
-        background-color: $voipcall-plinth-color;
-        padding: 8px;
-        box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
-        border-radius: 8px;
-
-        pointer-events: initial; // restore pointer events so the user can accept/decline
-        cursor: pointer;
-
-        .mx_IncomingCallBox_CallerInfo {
-            display: flex;
-            direction: row;
-
-            img, .mx_BaseAvatar_initial {
-                margin: 8px;
-            }
-
-            > div {
-                display: flex;
-                flex-direction: column;
-
-                justify-content: center;
-            }
-
-            h1, p {
-                margin: 0px;
-                padding: 0px;
-                font-size: $font-14px;
-                line-height: $font-16px;
-            }
-
-            h1 {
-                font-weight: bold;
-            }
-        }
-
-        .mx_IncomingCallBox_buttons {
-            padding: 8px;
-            display: flex;
-            flex-direction: row;
-
-            > .mx_IncomingCallBox_spacer {
-                width: 8px;
-            }
-
-            > * {
-                flex-shrink: 0;
-                flex-grow: 1;
-                margin-right: 0;
-                font-size: $font-15px;
-                line-height: $font-24px;
-            }
-        }
-
-        .mx_IncomingCallBox_iconButton {
-            position: absolute;
-            right: 8px;
-
-            &::before {
-                content: '';
-
-                height: 20px;
-                width: 20px;
-                background-color: $icon-button-color;
-                mask-repeat: no-repeat;
-                mask-size: contain;
-                mask-position: center;
-            }
-        }
-
-        .mx_IncomingCallBox_silence::before {
-            mask-image: url('$(res)/img/voip/silence.svg');
-        }
-
-        .mx_IncomingCallBox_unSilence::before {
-            mask-image: url('$(res)/img/voip/un-silence.svg');
-        }
-    }
 }

res/css/views/voip/_CallView.scss

@@ -39,7 +39,7 @@ limitations under the License.
 .mx_CallView_pip {
     width: 320px;
     padding-bottom: 8px;
-    background-color: $voipcall-plinth-color;
+    background-color: $toast-bg-color;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
     border-radius: 8px;
 
@@ -67,7 +67,30 @@ limitations under the License.
 .mx_CallView_content {
     position: relative;
     display: flex;
+    justify-content: center;
     border-radius: 8px;
+
+    > .mx_VideoFeed {
+        width: 100%;
+        height: 100%;
+
+        &.mx_VideoFeed_voice {
+            background-color: $inverted-bg-color;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .mx_VideoFeed_video {
+            height: 100%;
+            background-color: #000;
+        }
+
+        .mx_VideoFeed_mic {
+            left: 10px;
+            bottom: 10px;
+        }
+    }
 }
 
 .mx_CallView_voice {
@@ -176,120 +199,14 @@ limitations under the License.
     }
 }
 
-.mx_CallView_header {
-    height: 44px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: left;
-    flex-shrink: 0;
-}
-
-.mx_CallView_header_callType {
-    font-size: 1.2rem;
-    font-weight: bold;
-    vertical-align: middle;
-}
-
-.mx_CallView_header_secondaryCallInfo {
-    &::before {
-        content: '·';
-        margin-left: 6px;
-        margin-right: 6px;
-    }
-}
-
-.mx_CallView_header_controls {
-    margin-left: auto;
-}
-
-.mx_CallView_header_button {
-    display: inline-block;
-    vertical-align: middle;
-    cursor: pointer;
-
-    &::before {
-        content: '';
-        display: inline-block;
-        height: 20px;
-        width: 20px;
-        vertical-align: middle;
-        background-color: $secondary-fg-color;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-    }
-}
-
-.mx_CallView_header_button_fullscreen {
-    &::before {
-        mask-image: url('$(res)/img/element-icons/call/fullscreen.svg');
-    }
-}
-
-.mx_CallView_header_button_expand {
-    &::before {
-        mask-image: url('$(res)/img/element-icons/call/expand.svg');
-    }
-}
-
-.mx_CallView_header_callInfo {
-    margin-left: 12px;
-    margin-right: 16px;
-}
-
-.mx_CallView_header_roomName {
-    font-weight: bold;
-    font-size: 12px;
-    line-height: initial;
-    height: 15px;
-}
-
-.mx_CallView_secondaryCall_roomName {
-    margin-left: 4px;
-}
-
-.mx_CallView_header_callTypeSmall {
-    font-size: 12px;
-    color: $secondary-fg-color;
-    line-height: initial;
-    height: 15px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 240px;
-}
-
-.mx_CallView_header_phoneIcon {
-    display: inline-block;
-    margin-right: 6px;
-    height: 16px;
-    width: 16px;
-    vertical-align: middle;
-
-    &::before {
-        content: '';
-        display: inline-block;
-        vertical-align: top;
-
-        height: 16px;
-        width: 16px;
-        background-color: $warning-color;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-        mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
-    }
-}
-
 .mx_CallView_callControls {
     position: absolute;
     display: flex;
     justify-content: center;
     bottom: 5px;
-    width: 100%;
     opacity: 1;
     transition: opacity 0.5s;
+    z-index: 200; // To be above _all_ feeds
 }
 
 .mx_CallView_callControls_hidden {
@@ -297,10 +214,29 @@ limitations under the License.
     pointer-events: none;
 }
 
+.mx_CallView_presenting {
+    opacity: 1;
+    transition: opacity 0.5s;
+
+    position: absolute;
+    margin-top: 18px;
+    padding: 4px 8px;
+    border-radius: 4px;
+
+    // Same on both themes
+    color: white;
+    background-color: #17191c;
+}
+
+.mx_CallView_presenting_hidden {
+    opacity: 0.001; // opacity 0 can cause a re-layout
+    pointer-events: none;
+}
+
 .mx_CallView_callControls_button {
     cursor: pointer;
-    margin-left: 8px;
+    margin-left: 2px;
-    margin-right: 8px;
+    margin-right: 2px;
 
 
     &::before {
@@ -317,17 +253,11 @@ limitations under the License.
 }
 
 .mx_CallView_callControls_dialpad {
-    margin-right: auto;
     &::before {
         background-image: url('$(res)/img/voip/dialpad.svg');
     }
 }
 
-.mx_CallView_callControls_button_dialpad_hidden {
-    margin-right: auto;
-    cursor: initial;
-}
-
 .mx_CallView_callControls_button_micOn {
     &::before {
         background-image: url('$(res)/img/voip/mic-on.svg');
@@ -352,6 +282,30 @@ limitations under the License.
     }
 }
 
+.mx_CallView_callControls_button_screensharingOn {
+    &::before {
+        background-image: url('$(res)/img/voip/screensharing-on.svg');
+    }
+}
+
+.mx_CallView_callControls_button_screensharingOff {
+    &::before {
+        background-image: url('$(res)/img/voip/screensharing-off.svg');
+    }
+}
+
+.mx_CallView_callControls_button_sidebarOn {
+    &::before {
+        background-image: url('$(res)/img/voip/sidebar-on.svg');
+    }
+}
+
+.mx_CallView_callControls_button_sidebarOff {
+    &::before {
+        background-image: url('$(res)/img/voip/sidebar-off.svg');
+    }
+}
+
 .mx_CallView_callControls_button_hangup {
     &::before {
         background-image: url('$(res)/img/voip/hangup.svg');
@@ -359,17 +313,11 @@ limitations under the License.
 }
 
 .mx_CallView_callControls_button_more {
-    margin-left: auto;
     &::before {
         background-image: url('$(res)/img/voip/more.svg');
     }
 }
 
-.mx_CallView_callControls_button_more_hidden {
-    margin-left: auto;
-    cursor: initial;
-}
-
 .mx_CallView_callControls_button_invisible {
     visibility: hidden;
     pointer-events: none;

res/css/views/voip/_CallViewHeader.scss

@@ -0,0 +1,129 @@
+/*
+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_CallViewHeader {
+    height: 44px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+.mx_CallViewHeader_callType {
+    font-size: 1.2rem;
+    font-weight: bold;
+    vertical-align: middle;
+}
+
+.mx_CallViewHeader_secondaryCallInfo {
+    &::before {
+        content: '·';
+        margin-left: 6px;
+        margin-right: 6px;
+    }
+}
+
+.mx_CallViewHeader_controls {
+    margin-left: auto;
+}
+
+.mx_CallViewHeader_button {
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+
+    &::before {
+        content: '';
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        vertical-align: middle;
+        background-color: $secondary-fg-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+    }
+}
+
+.mx_CallViewHeader_button_fullscreen {
+    &::before {
+        mask-image: url('$(res)/img/element-icons/call/fullscreen.svg');
+    }
+}
+
+.mx_CallViewHeader_button_expand {
+    &::before {
+        mask-image: url('$(res)/img/element-icons/call/expand.svg');
+    }
+}
+
+.mx_CallViewHeader_callInfo {
+    margin-left: 12px;
+    margin-right: 16px;
+}
+
+.mx_CallViewHeader_roomName {
+    font-weight: bold;
+    font-size: 12px;
+    line-height: initial;
+    height: 15px;
+}
+
+.mx_CallView_secondaryCall_roomName {
+    margin-left: 4px;
+}
+
+.mx_CallViewHeader_callTypeSmall {
+    font-size: 12px;
+    color: $secondary-fg-color;
+    line-height: initial;
+    height: 15px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 240px;
+}
+
+.mx_CallViewHeader_callTypeIcon {
+    display: inline-block;
+    margin-right: 6px;
+    height: 16px;
+    width: 16px;
+    vertical-align: middle;
+
+    &::before {
+        content: '';
+        display: inline-block;
+        vertical-align: top;
+
+        height: 16px;
+        width: 16px;
+        background-color: $secondary-fg-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+    }
+
+    &.mx_CallViewHeader_callTypeIcon_voice::before {
+        mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
+    }
+
+    &.mx_CallViewHeader_callTypeIcon_video::before {
+        mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+    }
+}

res/css/views/voip/_CallViewSidebar.scss

@@ -0,0 +1,61 @@
+/*
+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_CallViewSidebar {
+    position: absolute;
+    right: 16px;
+    bottom: 16px;
+    z-index: 100; // To be above the primary feed
+
+    overflow: auto;
+
+    height: calc(100% - 32px); // Subtract the top and bottom padding
+    width: 20%;
+
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+    align-items: flex-end;
+    gap: 12px;
+
+    > .mx_VideoFeed {
+        width: 100%;
+
+        &.mx_VideoFeed_voice {
+            border-radius: 4px;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .mx_VideoFeed_video {
+            border-radius: 4px;
+        }
+
+        .mx_VideoFeed_mic {
+            left: 6px;
+            bottom: 6px;
+        }
+    }
+
+    &.mx_CallViewSidebar_pipMode {
+        top: 16px;
+        bottom: unset;
+        justify-content: flex-end;
+        gap: 4px;
+    }
+}

res/css/views/voip/_DialPadContextMenu.scss

@@ -69,7 +69,6 @@ limitations under the License.
     overflow: hidden;
     max-width: 185px;
     text-align: left;
-    direction: rtl;
     padding: 8px 0px;
     background-color: rgb(0, 0, 0, 0);
 }

res/css/views/voip/_VideoFeed.scss

@@ -14,37 +14,54 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_VideoFeed_voice {
+.mx_VideoFeed {
-    background-color: $inverted-bg-color;
+    overflow: hidden;
-}
+    position: relative;
 
-
+    &.mx_VideoFeed_voice {
-.mx_VideoFeed_remote {
+        background-color: $inverted-bg-color;
-    width: 100%;
+        aspect-ratio: 16 / 9;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.mx_VideoFeed_video {
-        background-color: #000;
     }
-}
 
-.mx_VideoFeed_local {
+    .mx_VideoFeed_video {
-    max-width: 25%;
+        width: 100%;
-    max-height: 25%;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 100;
-    border-radius: 4px;
-
-    &.mx_VideoFeed_video {
         background-color: transparent;
+
+        &.mx_VideoFeed_video_mirror {
+            transform: scale(-1, 1);
+        }
+    }
+
+    .mx_VideoFeed_mic {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 24px;
+        height: 24px;
+
+        background-color: rgba(0, 0, 0, 0.5); // Same on both themes
+        border-radius: 100%;
+
+        &::before {
+            position: absolute;
+            content: "";
+            width: 16px;
+            height: 16px;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-position: center;
+            background-color: white; // Same on both themes
+            border-radius: 7px;
+        }
+
+        &.mx_VideoFeed_mic_muted::before {
+            mask-image: url('$(res)/img/voip/mic-muted.svg');
+        }
+
+        &.mx_VideoFeed_mic_unmuted::before {
+            mask-image: url('$(res)/img/voip/mic-unmuted.svg');
+        }
     }
 }
-
-.mx_VideoFeed_mirror {
-    transform: scale(-1, 1);
-}

res/img/element-icons/room/pin.svg

@@ -1,7 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M18.5151 20.0831L15.6941 17.2621L17.2621 15.6941L20.0831 18.5151C21.5741 20.0061 22.1529 21.7793 21.9661 21.9661C21.7793 22.1529 20.0061 21.5741 18.5151 20.0831Z" fill="#737D8C"/>
+    <path d="m11.068 2c-0.32021 4.772e-4 -0.66852 0.17244-0.96484 0.46875-2.5464 2.5435-5.0905 5.0892-7.6348 7.6348-0.79016 0.7902-0.69302 1.9462 1.1641 1.9707 1.855 0.02447 3.4407-0.56671 3.8281-0.69141l2.4355 3.1445c-0.83503 1.9462-0.86902 4.062-0.058594 5.7949 0.47213 1.0095 1.79 1.0049 2.5781 0.2168l3.2773-3.2773 2.8223 2.8223c1.491 1.491 3.2644 2.0696 3.4512 1.8828s-0.39181-1.9602-1.8828-3.4512l-2.8223-2.8223 3.2773-3.2773c0.788-0.788 0.79075-2.106-0.21875-2.5781-1.733-0.81044-3.8468-0.77643-5.793 0.058594l-3.1445-2.4355c0.1247-0.38742 0.71588-1.9731 0.69141-3.8281-0.015311-1.1607-0.47217-1.6336-1.0059-1.6328z" fill="#737d8c"/>
-    <path d="M7.46196 11.3821C7.07677 11.5059 5.49073 12.0989 3.63366 12.0744C1.77658 12.0499 1.67795 10.8941 2.46811 10.1039L6.28598 6.28602L9.42196 9.42203L7.46196 11.3821Z" fill="#737D8C"/>
-    <path d="M11.3821 7.46202C11.5059 7.07682 12.0989 5.49077 12.0744 3.63368C12.0499 1.77658 10.8941 1.67795 10.1039 2.46812L6.28598 6.28602L9.42196 9.42203L11.3821 7.46202Z" fill="#737D8C"/>
-    <path d="M7.40596 11.438L11.4379 7.40602L14.9099 10.206L10.2059 14.9101L7.40596 11.438Z" fill="#737D8C"/>
-    <path d="M11.774 11.774C9.31114 14.2369 8.61779 17.7115 9.83827 20.3213C10.3104 21.3308 11.6288 21.3273 12.4169 20.5392L20.5391 12.4169C21.3271 11.6289 21.3307 10.3104 20.3212 9.83829C17.7114 8.61779 14.2369 9.31115 11.774 11.774Z" fill="#737D8C"/>
 </svg>

res/img/feather-customised/globe.svg

@@ -1,7 +0,0 @@
-<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg">
-    <g style="stroke:#454545;stroke-width:.8;fill:none;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round" transform="translate(1 1)">
-        <circle cx="5" cy="5" r="5"/>
-        <path d="m0 5h10"/>
-        <path d="m5 0c1.25064019 1.36917645 1.96137638 3.14601693 2 5-.03862362 1.85398307-.74935981 3.63082355-2 5-1.25064019-1.36917645-1.96137638-3.14601693-2-5 .03862362-1.85398307.74935981-3.63082355 2-5z"/>
-    </g>
-</svg>

res/img/voip/mic-muted.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.9206 1.0544C1.68141 0.815201 1.29359 0.815201 1.0544 1.0544C0.815201 1.29359 0.815201 1.68141 1.0544 1.9206L4.55 5.41621V7C4.55 8.3531 5.6469 9.45 7 9.45C7.45436 9.45 7.87983 9.32632 8.24458 9.11079L9.12938 9.99558C8.52863 10.4234 7.7937 10.675 7 10.675C4.97035 10.675 3.325 9.02965 3.325 7C3.325 6.66173 3.05077 6.3875 2.7125 6.3875C2.37423 6.3875 2.1 6.66173 2.1 7C2.1 9.49877 3.97038 11.5607 6.3875 11.8621V12.5125C6.3875 12.8508 6.66173 13.125 7 13.125C7.33827 13.125 7.6125 12.8508 7.6125 12.5125V11.8621C8.50718 11.7505 9.32696 11.3978 10.0047 10.8709L12.0794 12.9456C12.3186 13.1848 12.7064 13.1848 12.9456 12.9456C13.1848 12.7064 13.1848 12.3186 12.9456 12.0794L1.9206 1.0544Z" fill="white"/>
+<path d="M10.5474 7.96338L11.5073 8.92525C11.7601 8.33424 11.9 7.68346 11.9 7C11.9 6.66173 11.6258 6.3875 11.2875 6.3875C10.9492 6.3875 10.675 6.66173 10.675 7C10.675 7.33336 10.6306 7.65634 10.5474 7.96338Z" fill="white"/>
+<path d="M4.81385 2.21784L9.45 6.86366V3.325C9.45 1.9719 8.3531 0.875 7 0.875C6.04532 0.875 5.21818 1.42104 4.81385 2.21784Z" fill="white"/>
+</svg>

res/img/voip/mic-unmuted.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.4645 3.29384C4.4645 1.95795 5.59973 0.875 7.0001 0.875C8.40048 0.875 9.53571 1.95795 9.53571 3.29384V6.91127C9.53571 8.24716 8.40048 9.33011 7.0001 9.33011C5.59973 9.33011 4.4645 8.24716 4.4645 6.91127V3.29384Z" fill="white"/>
+<path d="M2.56269 6.1391C3.01153 6.1391 3.37539 6.4862 3.37539 6.91437C3.37539 8.81701 4.99198 10.3617 6.99032 10.3666C6.99359 10.3666 6.99686 10.3666 7.00014 10.3666C7.0034 10.3666 7.00665 10.3666 7.0099 10.3666C9.00814 10.3616 10.6246 8.81694 10.6246 6.91437C10.6246 6.4862 10.9885 6.1391 11.4373 6.1391C11.8861 6.1391 12.25 6.4862 12.25 6.91437C12.25 9.41469 10.3257 11.4854 7.81283 11.8576V12.3497C7.81283 12.7779 7.44898 13.125 7.00014 13.125C6.5513 13.125 6.18744 12.7779 6.18744 12.3497V11.8576C3.67448 11.4855 1.75 9.41478 1.75 6.91437C1.75 6.4862 2.11386 6.1391 2.56269 6.1391Z" fill="white"/>
+</svg>

res/img/voip/missed-video.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="M0 4.81815C0 3.76379 0.89543 2.90906 2 2.90906H9.33333C10.4379 2.90906 11.3333 3.76379 11.3333 4.81815V11.1818C11.3333 12.2361 10.4379 13.0909 9.33333 13.0909H2C0.895429 13.0909 0 12.2361 0 11.1818V4.81815ZM12.6667 6.09089L14.9169 4.37255C15.3534 4.03921 16 4.33587 16 4.86947V11.1305C16 11.6641 15.3534 11.9607 14.9169 11.6274L12.6667 9.90907V6.09089ZM3.68584 8.54792C3.68584 8.82819 3.45653 9.05751 3.17625 9.05751C2.89598 9.05751 2.66667 8.82819 2.66667 8.54792V6.50957C2.66667 6.22929 2.89598 5.99998 3.17625 5.99998H5.2146C5.49488 5.99998 5.72419 6.22929 5.72419 6.50957C5.72419 6.78984 5.49488 7.01916 5.2146 7.01916H4.39926L6.2083 8.82819L8.73076 6.30573C8.9295 6.10699 9.25054 6.10699 9.44928 6.30573C9.64802 6.50447 9.64802 6.82551 9.44928 7.02425L6.56501 9.90852C6.36627 10.1073 6.04523 10.1073 5.84649 9.90852L3.68584 7.74787V8.54792Z" fill="#8D97A5"/>
+</svg>

res/img/voip/missed-voice.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00016 6C4.36683 6 4.66683 5.7 4.66683 5.33333V4.28667L7.4935 7.11333C7.7535 7.37333 8.1735 7.37333 8.4335 7.11333L12.2068 3.34C12.4668 3.08 12.4668 2.66 12.2068 2.4C11.9468 2.14 11.5268 2.14 11.2668 2.4L7.96683 5.7L5.60016 3.33333H6.66683C7.0335 3.33333 7.3335 3.03333 7.3335 2.66667C7.3335 2.3 7.0335 2 6.66683 2H4.00016C3.6335 2 3.3335 2.3 3.3335 2.66667V5.33333C3.3335 5.7 3.6335 6 4.00016 6Z" fill="#8D97A5"/>
+<path d="M8.00557 8.67107C6.88076 8.62784 4.56757 8.91974 4.0052 9.06763C3.97195 9.07638 3.93363 9.08616 3.89078 9.0971C3.02734 9.31746 0.321813 10.008 0.0294949 12.1958C-0.196977 13.8909 0.937169 14.4039 1.50412 14.3258C1.89653 14.2766 3.02006 14.0989 4.05816 13.9127C5.07753 13.7298 5.07701 13.0573 5.07666 12.6026C5.07665 12.5943 5.07664 12.586 5.07664 12.5778L5.07665 11.6636C5.07665 11.4308 5.29543 11.2962 5.5972 11.2598C6.66548 11.1147 7.5573 11.1143 8.00369 11.1143L8.00745 11.1143C8.45377 11.1143 9.33453 11.1147 10.4028 11.2598C10.7046 11.2962 10.9234 11.4308 10.9234 11.6636L10.9234 12.5778C10.9234 12.586 10.9233 12.5943 10.9233 12.6026C10.923 13.0573 10.9225 13.7298 11.9418 13.9127C12.9799 14.099 14.1035 14.2766 14.4959 14.3258C15.0628 14.4039 16.197 13.8909 15.9705 12.1958C15.6782 10.008 12.9727 9.31747 12.1092 9.0971C12.0664 9.08617 12.0281 9.07639 11.9948 9.06764C11.4324 8.91975 9.13037 8.62783 8.00557 8.67107Z" fill="#8D97A5"/>
+</svg>

res/img/voip/screensharing-off.svg

@@ -0,0 +1,18 @@
+<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="25" cy="20" r="20" fill="white"/>
+</g>
+<rect x="14.6008" y="12.8" width="20.8" height="14.4" rx="1.6" fill="white" stroke="#737D8C" stroke-width="1.6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3617 23.36C24.3617 23.7135 24.6483 24 25.0017 24C25.3552 24 25.6417 23.7135 25.6417 23.36L25.6417 18.1851L27.6692 20.2125C27.9191 20.4625 28.3243 20.4625 28.5743 20.2125C28.8242 19.9626 28.8242 19.5574 28.5743 19.3075L25.4543 16.1875C25.2043 15.9375 24.7991 15.9375 24.5492 16.1875L21.4292 19.3075C21.1792 19.5574 21.1792 19.9626 21.4292 20.2125C21.6791 20.4625 22.0843 20.4625 22.3343 20.2125L24.3617 18.1851L24.3617 23.36Z" fill="#737D8C"/>
+<defs>
+<filter id="filter0_d" x="0.947663" y="0" width="48.1047" height="48.1047" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4.05234"/>
+<feGaussianBlur stdDeviation="2.02617"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

res/img/voip/screensharing-on.svg

@@ -0,0 +1,18 @@
+<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="25" cy="20" r="20" fill="#0DBD8B"/>
+</g>
+<rect x="14.6008" y="12.8" width="20.8" height="14.4" rx="1.6" fill="#0DBD8B" stroke="white" stroke-width="1.6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3617 23.36C24.3617 23.7135 24.6483 24 25.0017 24C25.3552 24 25.6417 23.7135 25.6417 23.36L25.6417 18.1851L27.6692 20.2125C27.9191 20.4625 28.3243 20.4625 28.5743 20.2125C28.8242 19.9626 28.8242 19.5574 28.5743 19.3075L25.4543 16.1875C25.2043 15.9375 24.7991 15.9375 24.5492 16.1875L21.4292 19.3075C21.1792 19.5574 21.1792 19.9626 21.4292 20.2125C21.6791 20.4625 22.0843 20.4625 22.3343 20.2125L24.3617 18.1851L24.3617 23.36Z" fill="white"/>
+<defs>
+<filter id="filter0_d" x="0.947663" y="0" width="48.1047" height="48.1047" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4.05234"/>
+<feGaussianBlur stdDeviation="2.02617"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

res/img/voip/sidebar-off.svg

@@ -0,0 +1,20 @@
+<svg width="48" height="47" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="24" cy="20" r="20" fill="#737D8C"/>
+</g>
+<rect x="12.5618" y="12.8992" width="20.3525" height="14.4496" rx="2.43819" fill="white" stroke="#737D8C" stroke-width="1.12362"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9132 20.5009C33.2675 20.5009 34.3655 19.4205 34.3655 18.0876C34.3655 16.7548 33.2675 15.6743 31.9132 15.6743C30.5589 15.6743 29.4609 16.7548 29.4609 18.0876C29.4609 19.4205 30.5589 20.5009 31.9132 20.5009ZM27.8242 26.132C27.8282 23.7187 28.976 21.3054 31.9113 21.3054C34.7818 21.3054 35.9984 23.7187 35.9984 26.132C35.9984 28.5453 32.7288 28.5453 31.9113 28.5453C31.0939 28.5453 27.8206 28.3403 27.8242 26.132Z" fill="white"/>
+<path d="M27.8242 26.132L28.386 26.1329L27.8242 26.132ZM35.9984 26.132H35.4366H35.9984ZM33.8037 18.0876C33.8037 19.1017 32.9658 19.9391 31.9132 19.9391V21.0627C33.5693 21.0627 34.9273 19.7392 34.9273 18.0876H33.8037ZM31.9132 16.2361C32.9658 16.2361 33.8037 17.0735 33.8037 18.0876H34.9273C34.9273 16.4361 33.5693 15.1125 31.9132 15.1125V16.2361ZM30.0227 18.0876C30.0227 17.0735 30.8606 16.2361 31.9132 16.2361V15.1125C30.2571 15.1125 28.8991 16.4361 28.8991 18.0876H30.0227ZM31.9132 19.9391C30.8606 19.9391 30.0227 19.1017 30.0227 18.0876H28.8991C28.8991 19.7392 30.2571 21.0627 31.9132 21.0627V19.9391ZM31.9113 20.7436C30.2659 20.7436 29.0747 21.4314 28.3132 22.4845C27.5693 23.5133 27.2645 24.8471 27.2624 26.1311L28.386 26.1329C28.3879 25.0036 28.659 23.924 29.2238 23.1429C29.771 22.386 30.6214 21.8672 31.9113 21.8672V20.7436ZM36.5602 26.132C36.5602 24.8414 36.2364 23.5081 35.4845 22.4817C34.7168 21.4338 33.5275 20.7436 31.9113 20.7436V21.8672C33.1657 21.8672 34.0199 22.3836 34.5781 23.1457C35.1521 23.9293 35.4366 25.0093 35.4366 26.132H36.5602ZM31.9113 29.1071C32.3157 29.1071 33.4213 29.1105 34.4365 28.7775C34.9481 28.6096 35.4778 28.3438 35.8839 27.9122C36.3025 27.4673 36.5602 26.8767 36.5602 26.132H35.4366C35.4366 26.594 35.2857 26.9083 35.0656 27.1422C34.8331 27.3893 34.4943 27.576 34.0863 27.7098C33.2623 27.9801 32.3244 27.9835 31.9113 27.9835V29.1071ZM27.2624 26.1311C27.26 27.5996 28.3757 28.3418 29.3716 28.6961C30.3797 29.0547 31.4763 29.1071 31.9113 29.1071V27.9835C31.5289 27.9835 30.5802 27.9334 29.7482 27.6375C28.9039 27.3371 28.3848 26.8728 28.386 26.1329L27.2624 26.1311Z" fill="#737D8C"/>
+<rect x="0.0339116" y="-0.787426" width="29.1443" height="3.36793" rx="1.68396" transform="matrix(0.681883 0.731461 -0.742244 0.670129 13.0943 8.71545)" fill="white" stroke="#737D8C" stroke-width="1.12362"/>
+<defs>
+<filter id="filter0_d" x="0.589744" y="0" width="46.8205" height="46.8205" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="3.41026"/>
+<feGaussianBlur stdDeviation="1.70513"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

res/img/voip/sidebar-on.svg

@@ -0,0 +1,19 @@
+<svg width="48" height="47" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="24" cy="20" r="20" fill="white"/>
+</g>
+<rect x="12.5" y="12.5" width="20.4763" height="15.3319" rx="2.5" fill="#737D8C" stroke="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.912 20.5618C33.2664 20.5618 34.3643 19.4287 34.3643 18.0309C34.3643 16.6331 33.2664 15.5 31.912 15.5C30.5577 15.5 29.4598 16.6331 29.4598 18.0309C29.4598 19.4287 30.5577 20.5618 31.912 20.5618ZM27.8242 26.467C27.8282 23.9361 28.976 21.4052 31.9113 21.4052C34.7818 21.4052 35.9985 23.9361 35.9985 26.467C35.9985 28.9978 32.7288 28.9978 31.9114 28.9978C31.0939 28.9978 27.8206 28.7829 27.8242 26.467Z" fill="#737D8C"/>
+<path d="M27.8242 26.467L27.3242 26.4662L27.8242 26.467ZM35.9985 26.467H36.4985H35.9985ZM33.8643 18.0309C33.8643 19.1675 32.9755 20.0618 31.912 20.0618V21.0618C33.5573 21.0618 34.8643 19.6898 34.8643 18.0309H33.8643ZM31.912 16C32.9755 16 33.8643 16.8943 33.8643 18.0309H34.8643C34.8643 16.372 33.5573 15 31.912 15V16ZM29.9598 18.0309C29.9598 16.8943 30.8486 16 31.912 16V15C30.2668 15 28.9598 16.372 28.9598 18.0309H29.9598ZM31.912 20.0618C30.8486 20.0618 29.9598 19.1675 29.9598 18.0309H28.9598C28.9598 19.6898 30.2668 21.0618 31.912 21.0618V20.0618ZM31.9113 20.9052C30.2753 20.9052 29.1023 21.622 28.3569 22.7032C27.6274 23.7612 27.3263 25.1361 27.3242 26.4662L28.3242 26.4677C28.3261 25.2669 28.6009 24.1109 29.1802 23.2708C29.7434 22.4538 30.612 21.9052 31.9113 21.9052V20.9052ZM36.4985 26.467C36.4985 25.1313 36.1789 23.7567 35.4412 22.7007C34.6893 21.6242 33.5177 20.9052 31.9113 20.9052V21.9052C33.1755 21.9052 34.0475 22.4516 34.6214 23.2733C35.2097 24.1154 35.4985 25.2717 35.4985 26.467H36.4985ZM31.9114 29.4978C32.3162 29.4978 33.416 29.5011 34.4241 29.1543C34.9326 28.9794 35.4519 28.7044 35.847 28.264C36.2515 27.8131 36.4985 27.2184 36.4985 26.467H35.4985C35.4985 26.9809 35.3367 27.3354 35.1026 27.5962C34.8591 27.8677 34.5099 28.0673 34.0988 28.2087C33.2677 28.4946 32.3239 28.4978 31.9114 28.4978V29.4978ZM27.3242 26.4662C27.3219 27.9345 28.3854 28.6964 29.3851 29.0693C30.3864 29.4429 31.4779 29.4978 31.9114 29.4978V28.4978C31.5274 28.4978 30.5735 28.4453 29.7346 28.1324C28.8943 27.8189 28.3229 27.3153 28.3242 26.4677L27.3242 26.4662Z" fill="white"/>
+<defs>
+<filter id="filter0_d" x="0.589744" y="0" width="46.8205" height="46.8205" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="3.41026"/>
+<feGaussianBlur stdDeviation="1.70513"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

res/themes/dark/css/_dark.scss

@@ -1,3 +1,6 @@
+// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=557%3A0
+$system-dark: #21262C;
+
 // unified palette
 // try to use these colors when possible
 $bg-color: #15191E;
@@ -47,7 +50,7 @@ $inverted-bg-color: $base-color;
 $selected-color: $room-highlight-color;
 
 // selected for hoverover & selected event tiles
-$event-selected-color: #21262c;
+$event-selected-color: $system-dark;
 
 // used for the hairline dividers in RoomView
 $primary-hairline-color: transparent;
@@ -91,7 +94,7 @@ $lightbox-background-bg-color: #000;
 $lightbox-background-bg-opacity: 0.85;
 
 $settings-grey-fg-color: #a2a2a2;
-$settings-profile-placeholder-bg-color: #21262c;
+$settings-profile-placeholder-bg-color: $system-dark;
 $settings-profile-overlay-placeholder-fg-color: #454545;
 $settings-profile-button-bg-color: #e7e7e7;
 $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
@@ -112,8 +115,8 @@ $eventtile-meta-color: $roomtopic-color;
 $header-divider-color: $header-panel-text-primary-color;
 $composer-e2e-icon-color: $header-panel-text-primary-color;
 
-// this probably shouldn't have it's own colour
+$quinary-content-color: #394049;
-$voipcall-plinth-color: #394049;
+$toast-bg-color: $quinary-content-color;
 
 // ********************
 
@@ -175,7 +178,7 @@ $button-link-bg-color: transparent;
 $togglesw-off-color: $room-highlight-color;
 
 $progressbar-fg-color: $accent-color;
-$progressbar-bg-color: #21262c;
+$progressbar-bg-color: $system-dark;
 
 $visual-bell-bg-color: #800;
 
@@ -209,8 +212,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: #394049; // "Dark Tile"
-$message-body-panel-icon-fg-color: #21262C; // "Separator"
+$message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $tertiary-fg-color;
+$message-body-panel-icon-bg-color: $system-dark; // "System Dark"
 
 $voice-record-stop-border-color: $quaternary-fg-color;
 $voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
@@ -228,9 +231,9 @@ $groupFilterPanel-background-blur-amount: 30px;
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 
 // Bubble tiles
-$eventbubble-self-bg: #143A34;
+$eventbubble-self-bg: #14322E;
-$eventbubble-others-bg: #394049;
+$eventbubble-others-bg: $event-selected-color;
-$eventbubble-bg-hover: #433C23;
+$eventbubble-bg-hover: #1C2026;
 $eventbubble-avatar-outline: $bg-color;
 $eventbubble-reply-color: #C1C6CD;
 
@@ -295,3 +298,11 @@ $eventbubble-reply-color: #C1C6CD;
 .hljs-tag {
     color: inherit; // Without this they'd be weirdly blue which doesn't match the theme
 }
+
+.hljs-addition {
+    background: #1a4b59;
+}
+
+.hljs-deletion {
+    background: #53232a;
+}

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

@@ -111,8 +111,8 @@ $eventtile-meta-color: $roomtopic-color;
 $header-divider-color: $header-panel-text-primary-color;
 $composer-e2e-icon-color: $header-panel-text-primary-color;
 
-// this probably shouldn't have it's own colour
+$quinary-content-color: #394049;
-$voipcall-plinth-color: #394049;
+$toast-bg-color: $quinary-content-color;
 
 // ********************
 
@@ -207,8 +207,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: #394049;
-$message-body-panel-icon-fg-color: $primary-bg-color;
+$message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $secondary-fg-color;
+$message-body-panel-icon-bg-color: #21262C;
 
 // See non-legacy dark for variable information
 $voice-record-stop-border-color: #6F7882;
@@ -222,6 +222,13 @@ $appearance-tab-border-color: $room-highlight-color;
 
 $composer-shadow-color: tranparent;
 
+// Bubble tiles
+$eventbubble-self-bg: #14322E;
+$eventbubble-others-bg: $event-selected-color;
+$eventbubble-bg-hover: #1C2026;
+$eventbubble-avatar-outline: $bg-color;
+$eventbubble-reply-color: #C1C6CD;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

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

@@ -8,9 +8,12 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji';
+$font-family: 'Nunito', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji';
 
-$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji';
+$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji';
+
+// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=557%3A0
+$system-light: #F4F6FA;
 
 // unified palette
 // try to use these colors when possible
@@ -178,8 +181,8 @@ $eventtile-meta-color: $roomtopic-color;
 $composer-e2e-icon-color: #91a1c0;
 $header-divider-color: #91a1c0;
 
-// this probably shouldn't have it's own colour
+$toast-bg-color: $system-light;
-$voipcall-plinth-color: #F4F6FA;
+$voipcall-plinth-color: $system-light;
 
 // ********************
 
@@ -331,7 +334,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: #E3E8F0;
 $message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $primary-bg-color;
+$message-body-panel-icon-bg-color: $system-light;
 
 // See non-legacy _light for variable information
 $voice-record-stop-symbol-color: #ff4b55;
@@ -348,9 +351,9 @@ $appearance-tab-border-color: $input-darker-bg-color;
 $composer-shadow-color: tranparent;
 
 // Bubble tiles
-$eventbubble-self-bg: #F8FDFC;
+$eventbubble-self-bg: #F0FBF8;
-$eventbubble-others-bg: #F7F8F9;
+$eventbubble-others-bg: $system-light;
-$eventbubble-bg-hover: rgb(242, 242, 242);
+$eventbubble-bg-hover: #FAFBFD;
 $eventbubble-avatar-outline: #fff;
 $eventbubble-reply-color: #C1C6CD;
 
@@ -390,7 +393,7 @@ $eventbubble-reply-color: #C1C6CD;
 @define-mixin mx_DialogButton_secondary {
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }

res/themes/light-custom/css/_custom.scss

@@ -140,3 +140,10 @@ $event-highlight-bg-color: var(--timeline-highlights-color);
 //
 // redirect some variables away from their hardcoded values in the light theme
 $settings-grey-fg-color: $primary-fg-color;
+
+// --eventbubble colors
+$eventbubble-self-bg: var(--eventbubble-self-bg, $eventbubble-self-bg);
+$eventbubble-others-bg: var(--eventbubble-others-bg, $eventbubble-others-bg);
+$eventbubble-bg-hover: var(--eventbubble-bg-hover, $eventbubble-bg-hover);
+$eventbubble-avatar-outline: var(--eventbubble-avatar-outline, $eventbubble-avatar-outline);
+$eventbubble-reply-color: var(--eventbubble-reply-color, $eventbubble-reply-color);

res/themes/light/css/_light.scss

@@ -8,9 +8,12 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: Inter, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji';
+$font-family: 'Inter', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji';
 
-$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji';
+$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji';
+
+// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=557%3A0
+$system-light: #F4F6FA;
 
 // unified palette
 // try to use these colors when possible
@@ -138,7 +141,7 @@ $blockquote-bar-color: #ddd;
 $blockquote-fg-color: #777;
 
 $settings-grey-fg-color: #a2a2a2;
-$settings-profile-placeholder-bg-color: #f4f6fa;
+$settings-profile-placeholder-bg-color: $system-light;
 $settings-profile-overlay-placeholder-fg-color: #2e2f32;
 $settings-profile-button-bg-color: #e7e7e7;
 $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
@@ -167,8 +170,8 @@ $eventtile-meta-color: $roomtopic-color;
 $composer-e2e-icon-color: #91A1C0;
 $header-divider-color: #91A1C0;
 
-// this probably shouldn't have it's own colour
+$toast-bg-color: $system-light;
-$voipcall-plinth-color: #F4F6FA;
+$voipcall-plinth-color: $system-light;
 
 // ********************
 
@@ -327,7 +330,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: #E3E8F0; // "Separator"
 $message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $primary-bg-color;
+$message-body-panel-icon-bg-color: $system-light;
 
 // These two don't change between themes. They are the $warning-color, but we don't
 // want custom themes to affect them by accident.
@@ -350,9 +353,9 @@ $groupFilterPanel-background-blur-amount: 20px;
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 
 // Bubble tiles
-$eventbubble-self-bg: #F8FDFC;
+$eventbubble-self-bg: #F0FBF8;
-$eventbubble-others-bg: #F7F8F9;
+$eventbubble-others-bg: $system-light;
-$eventbubble-bg-hover: #FEFCF5;
+$eventbubble-bg-hover: #FAFBFD;
 $eventbubble-avatar-outline: $primary-bg-color;
 $eventbubble-reply-color: #C1C6CD;
 
@@ -392,7 +395,7 @@ $eventbubble-reply-color: #C1C6CD;
 @define-mixin mx_DialogButton_secondary {
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color !important;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }

src/@types/svg.d.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+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.
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MVoiceMessageBody {
+declare module "*.svg" {
-    display: inline-block; // makes the playback controls magically line up
+    const path: string;
+    export default path;
 }

src/CallHandler.tsx

@@ -1,7 +1,8 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017, 2018 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
+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.
@@ -56,12 +57,10 @@ limitations under the License.
 import React from 'react';
 
 import { MatrixClientPeg } from './MatrixClientPeg';
-import PlatformPeg from './PlatformPeg';
 import Modal from './Modal';
 import { _t } from './languageHandler';
 import dis from './dispatcher/dispatcher';
 import WidgetUtils from './utils/WidgetUtils';
-import WidgetEchoStore from './stores/WidgetEchoStore';
 import SettingsStore from './settings/SettingsStore';
 import { Jitsi } from "./widgets/Jitsi";
 import { WidgetType } from "./widgets/WidgetType";
@@ -80,7 +79,6 @@ import CountlyAnalytics from "./CountlyAnalytics";
 import { UIFeature } from "./settings/UIFeature";
 import { CallError } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from 'matrix-js-sdk/src/logger';
-import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker";
 import { Action } from './dispatcher/actions';
 import VoipUserMapper from './VoipUserMapper';
 import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from './widgets/ManagedHybrid';
@@ -88,6 +86,12 @@ import { randomUppercaseString, randomLowercaseString } from "matrix-js-sdk/src/
 import EventEmitter from 'events';
 import SdkConfig from './SdkConfig';
 import { ensureDMExists, findDMForUser } from './createRoom';
+import { IPushRule, RuleId, TweakName, Tweaks } from "matrix-js-sdk/src/@types/PushRules";
+import { PushProcessor } from 'matrix-js-sdk/src/pushprocessor';
+import { WidgetLayoutStore, Container } from './stores/widgets/WidgetLayoutStore';
+import { getIncomingCallToastKey } from './toasts/IncomingCallToast';
+import ToastStore from './stores/ToastStore';
+import IncomingCallToast from "./toasts/IncomingCallToast";
 
 export const PROTOCOL_PSTN = 'm.protocol.pstn';
 export const PROTOCOL_PSTN_PREFIXED = 'im.vector.protocol.pstn';
@@ -129,14 +133,9 @@ interface ThirdpartyLookupResponse {
     fields: ThirdpartyLookupResponseFields;
 }
 
-// Unlike 'CallType' in js-sdk, this one includes screen sharing
-// (because a screen sharing call is only a screen sharing call to the caller,
-// to the callee it's just a video call, at least as far as the current impl
-// is concerned).
 export enum PlaceCallType {
     Voice = 'voice',
     Video = 'video',
-    ScreenSharing = 'screensharing',
 }
 
 export enum CallHandlerEvent {
@@ -483,35 +482,43 @@ export default class CallHandler extends EventEmitter {
             }
 
             switch (newState) {
-                case CallState.Ringing:
+                case CallState.Ringing: {
-                    this.play(AudioID.Ring);
+                    const incomingCallPushRule = (
+                        new PushProcessor(MatrixClientPeg.get()).getPushRuleById(RuleId.IncomingCall) as IPushRule
+                    );
+                    const pushRuleEnabled = incomingCallPushRule?.enabled;
+                    const tweakSetToRing = incomingCallPushRule?.actions.some((action: Tweaks) => (
+                        action.set_tweak === TweakName.Sound &&
+                        action.value === "ring"
+                    ));
+
+                    if (pushRuleEnabled && tweakSetToRing) {
+                        this.play(AudioID.Ring);
+                    } else {
+                        this.silenceCall(call.callId);
+                    }
                     break;
-                case CallState.InviteSent:
+                }
+                case CallState.InviteSent: {
                     this.play(AudioID.Ringback);
                     break;
-                case CallState.Ended:
+                }
-                {
+                case CallState.Ended: {
-                    Analytics.trackEvent('voip', 'callEnded', 'hangupReason', call.hangupReason);
+                    const hangupReason = call.hangupReason;
+                    Analytics.trackEvent('voip', 'callEnded', 'hangupReason', hangupReason);
                     this.removeCallForRoom(mappedRoomId);
-                    if (oldState === CallState.InviteSent && (
+                    if (oldState === CallState.InviteSent && call.hangupParty === CallParty.Remote) {
-                        call.hangupParty === CallParty.Remote ||
-                        (call.hangupParty === CallParty.Local && call.hangupReason === CallErrorCode.InviteTimeout)
-                    )) {
                         this.play(AudioID.Busy);
+
+                        // Don't show a modal when we got rejected/the call was hung up
+                        if (!hangupReason || [CallErrorCode.UserHangup, "user hangup"].includes(hangupReason)) break;
+
                         let title;
                         let description;
-                        if (call.hangupReason === CallErrorCode.UserHangup) {
+                        // TODO: We should either do away with these or figure out a copy for each code (expect user_hangup...)
-                            title = _t("Call Declined");
+                        if (call.hangupReason === CallErrorCode.UserBusy) {
-                            description = _t("The other party declined the call.");
-                        } else if (call.hangupReason === CallErrorCode.UserBusy) {
                             title = _t("User Busy");
                             description = _t("The user you called is busy.");
-                        } else if (call.hangupReason === CallErrorCode.InviteTimeout) {
-                            title = _t("Call Failed");
-                            // XXX: full stop appended as some relic here, but these
-                            // strings need proper input from design anyway, so let's
-                            // not change this string until we have a proper one.
-                            description = _t('The remote side failed to pick up') + '.';
                         } else {
                             title = _t("Call Failed");
                             description = _t("The call could not be established");
@@ -521,7 +528,7 @@ export default class CallHandler extends EventEmitter {
                             title, description,
                         });
                     } else if (
-                        call.hangupReason === CallErrorCode.AnsweredElsewhere && oldState === CallState.Connecting
+                        hangupReason === CallErrorCode.AnsweredElsewhere && oldState === CallState.Connecting
                     ) {
                         Modal.createTrackedDialog('Call Handler', 'Call Failed', ErrorDialog, {
                             title: _t("Answered Elsewhere"),
@@ -641,6 +648,19 @@ export default class CallHandler extends EventEmitter {
             `Call state in ${mappedRoomId} changed to ${status}`,
         );
 
+        const toastKey = getIncomingCallToastKey(call.callId);
+        if (status === CallState.Ringing) {
+            ToastStore.sharedInstance().addOrReplaceToast({
+                key: toastKey,
+                priority: 100,
+                component: IncomingCallToast,
+                bodyClassName: "mx_IncomingCallToast",
+                props: { call },
+            });
+        } else {
+            ToastStore.sharedInstance().dismissToast(toastKey);
+        }
+
         dis.dispatch({
             action: 'call_state',
             room_id: mappedRoomId,
@@ -738,25 +758,6 @@ export default class CallHandler extends EventEmitter {
             call.placeVoiceCall();
         } else if (type === 'video') {
             call.placeVideoCall();
-        } else if (type === PlaceCallType.ScreenSharing) {
-            const screenCapErrorString = PlatformPeg.get().screenCaptureErrorString();
-            if (screenCapErrorString) {
-                this.removeCallForRoom(roomId);
-                console.log("Can't capture screen: " + screenCapErrorString);
-                Modal.createTrackedDialog('Call Handler', 'Unable to capture screen', ErrorDialog, {
-                    title: _t('Unable to capture screen'),
-                    description: screenCapErrorString,
-                });
-                return;
-            }
-
-            call.placeScreenSharingCall(
-                async (): Promise<DesktopCapturerSource> => {
-                    const { finished } = Modal.createDialog(DesktopCapturerSourcePicker);
-                    const [source] = await finished;
-                    return source;
-                },
-            );
         } else {
             console.error("Unknown conf call type: " + type);
         }
@@ -950,6 +951,8 @@ export default class CallHandler extends EventEmitter {
             action: 'view_room',
             room_id: roomId,
         });
+
+        await this.placeCall(roomId, PlaceCallType.Voice, null);
     }
 
     private async startTransferToPhoneNumber(call: MatrixCall, destination: string, consultFirst: boolean) {
@@ -1029,14 +1032,10 @@ export default class CallHandler extends EventEmitter {
 
         // prevent double clicking the call button
         const room = MatrixClientPeg.get().getRoom(roomId);
-        const currentJitsiWidgets = WidgetUtils.getRoomWidgetsOfType(room, WidgetType.JITSI);
+        const jitsiWidget = WidgetStore.instance.getApps(roomId).find((app) => WidgetType.JITSI.matches(app.type));
-        const hasJitsi = currentJitsiWidgets.length > 0
+        if (jitsiWidget) {
-            || WidgetEchoStore.roomHasPendingWidgetsOfType(roomId, currentJitsiWidgets, WidgetType.JITSI);
+            // If there already is a Jitsi widget pin it
-        if (hasJitsi) {
+            WidgetLayoutStore.instance.moveToContainer(room, jitsiWidget, Container.Top);
-            Modal.createTrackedDialog('Call already in progress', '', ErrorDialog, {
-                title: _t('Call in Progress'),
-                description: _t('A call is currently being placed!'),
-            });
             return;
         }
 

src/ContentMessages.tsx

@@ -209,6 +209,14 @@ async function loadImageElement(imageFile: File) {
     return { width, height, img };
 }
 
+// Minimum size for image files before we generate a thumbnail for them.
+const IMAGE_SIZE_THRESHOLD_THUMBNAIL = 1 << 15; // 32KB
+// Minimum size improvement for image thumbnails, if both are not met then don't bother uploading thumbnail.
+const IMAGE_THUMBNAIL_MIN_REDUCTION_SIZE = 1 << 16; // 1MB
+const IMAGE_THUMBNAIL_MIN_REDUCTION_PERCENT = 0.1; // 10%
+// We don't apply these thresholds to video thumbnails as a poster image is always useful
+// and videos tend to be much larger.
+
 /**
  * Read the metadata for an image file and create and upload a thumbnail of the image.
  *
@@ -217,23 +225,33 @@ async function loadImageElement(imageFile: File) {
  * @param {File} imageFile The image to read and thumbnail.
  * @return {Promise} A promise that resolves with the attachment info.
  */
-function infoForImageFile(matrixClient, roomId, imageFile) {
+async function infoForImageFile(matrixClient: MatrixClient, roomId: string, imageFile: File) {
     let thumbnailType = "image/png";
     if (imageFile.type === "image/jpeg") {
         thumbnailType = "image/jpeg";
     }
 
-    let imageInfo;
+    const imageElement = await loadImageElement(imageFile);
-    return loadImageElement(imageFile).then((r) => {
+
-        return createThumbnail(r.img, r.width, r.height, thumbnailType);
+    const result = await createThumbnail(imageElement.img, imageElement.width, imageElement.height, thumbnailType);
-    }).then((result) => {
+    const imageInfo = result.info;
-        imageInfo = result.info;
+
-        return uploadFile(matrixClient, roomId, result.thumbnail);
+    // we do all sizing checks here because we still rely on thumbnail generation for making a blurhash from.
-    }).then((result) => {
+    const sizeDifference = imageFile.size - imageInfo.thumbnail_info.size;
-        imageInfo.thumbnail_url = result.url;
+    if (
-        imageInfo.thumbnail_file = result.file;
+        imageFile.size <= IMAGE_SIZE_THRESHOLD_THUMBNAIL || // image is small enough already
+        (sizeDifference <= IMAGE_THUMBNAIL_MIN_REDUCTION_SIZE && // thumbnail is not sufficiently smaller than original
+            sizeDifference <= (imageFile.size * IMAGE_THUMBNAIL_MIN_REDUCTION_PERCENT))
+    ) {
+        delete imageInfo["thumbnail_info"];
         return imageInfo;
-    });
+    }
+
+    const uploadResult = await uploadFile(matrixClient, roomId, result.thumbnail);
+
+    imageInfo["thumbnail_url"] = uploadResult.url;
+    imageInfo["thumbnail_file"] = uploadResult.file;
+    return imageInfo;
 }
 
 /**

src/DateUtils.ts

@@ -123,6 +123,19 @@ export function formatTime(date: Date, showTwelveHour = false): string {
     return pad(date.getHours()) + ':' + pad(date.getMinutes());
 }
 
+export function formatCallTime(delta: Date): string {
+    const hours = delta.getUTCHours();
+    const minutes = delta.getUTCMinutes();
+    const seconds = delta.getUTCSeconds();
+
+    let output = "";
+    if (hours) output += `${hours}h `;
+    if (minutes || output) output += `${minutes}m `;
+    if (seconds || output) output += `${seconds}s`;
+
+    return output;
+}
+
 const MILLIS_IN_DAY = 86400000;
 export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): boolean {
     if (!nextEventDate || !prevEventDate) {

src/HtmlUtils.tsx

@@ -57,7 +57,33 @@ const BIGEMOJI_REGEX = new RegExp(`^(${EMOJIBASE_REGEX.source})+$`, 'i');
 
 const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
 
-export const PERMITTED_URL_SCHEMES = ['http', 'https', 'ftp', 'mailto', 'magnet'];
+export const PERMITTED_URL_SCHEMES = [
+    "bitcoin",
+    "ftp",
+    "geo",
+    "http",
+    "https",
+    "im",
+    "irc",
+    "ircs",
+    "magnet",
+    "mailto",
+    "matrix",
+    "mms",
+    "news",
+    "nntp",
+    "openpgp4fpr",
+    "sip",
+    "sftp",
+    "sms",
+    "smsto",
+    "ssh",
+    "tel",
+    "urn",
+    "webcal",
+    "wtai",
+    "xmpp",
+];
 
 const MEDIA_API_MXC_REGEX = /\/_matrix\/media\/r0\/(?:download|thumbnail)\/(.+?)\/(.+?)(?:[?/]|$)/;
 
@@ -79,8 +105,8 @@ function mightContainEmoji(str: string): boolean {
  * @return {String} The shortcode (such as :thumbup:)
  */
 export function unicodeToShortcode(char: string): string {
-    const shortcodes = getEmojiFromUnicode(char).shortcodes;
+    const shortcodes = getEmojiFromUnicode(char)?.shortcodes;
-    return shortcodes.length > 0 ? `:${shortcodes[0]}:` : '';
+    return shortcodes?.length ? `:${shortcodes[0]}:` : '';
 }
 
 export function processHtmlForSending(html: string): string {

src/IdentityAuthClient.js

@@ -146,23 +146,23 @@ export default class IdentityAuthClient {
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
             const { finished } = Modal.createTrackedDialog('Default identity server terms warning', '',
                 QuestionDialog, {
-                title: _t("Identity server has no terms of service"),
+                    title: _t("Identity server has no terms of service"),
-                description: (
+                    description: (
-                    <div>
+                        <div>
-                        <p>{ _t(
+                            <p>{ _t(
-                            "This action requires accessing the default identity server " +
+                                "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.",
+                                "Only continue if you trust the owner of the server.",
-                        ) }</p>
+                            ) }</p>
-                    </div>
+                        </div>
-                ),
+                    ),
-                button: _t("Trust"),
+                    button: _t("Trust"),
                 });
             const [confirmed] = await finished;
             if (confirmed) {

src/Lifecycle.ts

@@ -48,6 +48,7 @@ import { Jitsi } from "./widgets/Jitsi";
 import { SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY, SSO_IDP_ID_KEY } from "./BasePlatform";
 import ThreepidInviteStore from "./stores/ThreepidInviteStore";
 import CountlyAnalytics from "./CountlyAnalytics";
+import { PosthogAnalytics } from "./PosthogAnalytics";
 import CallHandler from './CallHandler';
 import LifecycleCustomisations from "./customisations/Lifecycle";
 import ErrorDialog from "./components/views/dialogs/ErrorDialog";
@@ -573,6 +574,8 @@ async function doSetLoggedIn(
         await abortLogin();
     }
 
+    PosthogAnalytics.instance.updateAnonymityFromSettings(credentials.userId);
+
     Analytics.setLoggedIn(credentials.guest, credentials.homeserverUrl);
 
     MatrixClientPeg.replaceUsingCreds(credentials);
@@ -700,6 +703,8 @@ export function logout(): void {
         CountlyAnalytics.instance.enable(/* anonymous = */ true);
     }
 
+    PosthogAnalytics.instance.logout();
+
     if (MatrixClientPeg.get().isGuest()) {
         // logout doesn't work for guest sessions
         // Also we sometimes want to re-log in a guest session if we abort the login.

src/PosthogAnalytics.ts

@@ -0,0 +1,355 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import posthog, { PostHog } from 'posthog-js';
+import PlatformPeg from './PlatformPeg';
+import SdkConfig from './SdkConfig';
+import SettingsStore from './settings/SettingsStore';
+
+/* Posthog analytics tracking.
+ *
+ * Anonymity behaviour is as follows:
+ *
+ * - If Posthog isn't configured in `config.json`, events are not sent.
+ * - If [Do Not Track](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/doNotTrack) is
+ *   enabled, events are not sent (this detection is built into posthog and turned on via the
+ *   `respect_dnt` flag being passed to `posthog.init`).
+ * - If the `feature_pseudonymous_analytics_opt_in` labs flag is `true`, track pseudonomously, i.e.
+ *   hash all matrix identifiers in tracking events (user IDs, room IDs etc) using SHA-256.
+ * - Otherwise, if the existing `analyticsOptIn` flag is `true`, track anonymously, i.e.
+ *   redact all matrix identifiers in tracking events.
+ * - If both flags are false or not set, events are not sent.
+ */
+
+interface IEvent {
+    // The event name that will be used by PostHog. Event names should use snake_case.
+    eventName: string;
+
+    // The properties of the event that will be stored in PostHog. This is just a placeholder,
+    // extending interfaces must override this with a concrete definition to do type validation.
+    properties: {};
+}
+
+export enum Anonymity {
+    Disabled,
+    Anonymous,
+    Pseudonymous
+}
+
+// If an event extends IPseudonymousEvent, the event contains pseudonymous data
+// that won't be sent unless the user has explicitly consented to pseudonymous tracking.
+// For example, it might contain hashed user IDs or room IDs.
+// Such events will be automatically dropped if PosthogAnalytics.anonymity isn't set to Pseudonymous.
+export interface IPseudonymousEvent extends IEvent {}
+
+// If an event extends IAnonymousEvent, the event strictly contains *only* anonymous data;
+// i.e. no identifiers that can be associated with the user.
+export interface IAnonymousEvent extends IEvent {}
+
+export interface IRoomEvent extends IPseudonymousEvent {
+    hashedRoomId: string;
+}
+
+interface IPageView extends IAnonymousEvent {
+    eventName: "$pageview";
+    properties: {
+        durationMs?: number;
+        screen?: string;
+    };
+}
+
+const hashHex = async (input: string): Promise<string> => {
+    const buf = new TextEncoder().encode(input);
+    const digestBuf = await window.crypto.subtle.digest("sha-256", buf);
+    return [...new Uint8Array(digestBuf)].map((b: number) => b.toString(16).padStart(2, "0")).join("");
+};
+
+const whitelistedScreens = new Set([
+    "register", "login", "forgot_password", "soft_logout", "new", "settings", "welcome", "home", "start", "directory",
+    "start_sso", "start_cas", "groups", "complete_security", "post_registration", "room", "user", "group",
+]);
+
+export async function getRedactedCurrentLocation(
+    origin: string,
+    hash: string,
+    pathname: string,
+    anonymity: Anonymity,
+): Promise<string> {
+    // Redact PII from the current location.
+    // If anonymous is true, redact entirely, if false, substitute it with a hash.
+    // For known screens, assumes a URL structure of /<screen name>/might/be/pii
+    if (origin.startsWith('file://')) {
+        pathname = "/<redacted_file_scheme_url>/";
+    }
+
+    let hashStr;
+    if (hash == "") {
+        hashStr = "";
+    } else {
+        let [beforeFirstSlash, screen, ...parts] = hash.split("/");
+
+        if (!whitelistedScreens.has(screen)) {
+            screen = "<redacted_screen_name>";
+        }
+
+        for (let i = 0; i < parts.length; i++) {
+            parts[i] = anonymity === Anonymity.Anonymous ? `<redacted>` : await hashHex(parts[i]);
+        }
+
+        hashStr = `${beforeFirstSlash}/${screen}/${parts.join("/")}`;
+    }
+    return origin + pathname + hashStr;
+}
+
+interface PlatformProperties {
+    appVersion: string;
+    appPlatform: string;
+}
+
+export class PosthogAnalytics {
+    /* Wrapper for Posthog analytics.
+     * 3 modes of anonymity are supported, governed by this.anonymity
+     * - Anonymity.Disabled means *no data* is passed to posthog
+     * - Anonymity.Anonymous means all identifers will be redacted before being passed to posthog
+     * - Anonymity.Pseudonymous means all identifiers will be hashed via SHA-256 before being passed
+     *   to Posthog
+     *
+     * To update anonymity, call updateAnonymityFromSettings() or you can set it directly via setAnonymity().
+     *
+     * To pass an event to Posthog:
+     *
+     * 1. Declare a type for the event, extending IAnonymousEvent, IPseudonymousEvent or IRoomEvent.
+     * 2. Call the appropriate track*() method. Pseudonymous events will be dropped when anonymity is
+     *    Anonymous or Disabled; Anonymous events will be dropped when anonymity is Disabled.
+     */
+
+    private anonymity = Anonymity.Disabled;
+    // set true during the constructor if posthog config is present, otherwise false
+    private enabled = false;
+    private static _instance = null;
+    private platformSuperProperties = {};
+
+    public static get instance(): PosthogAnalytics {
+        if (!this._instance) {
+            this._instance = new PosthogAnalytics(posthog);
+        }
+        return this._instance;
+    }
+
+    constructor(private readonly posthog: PostHog) {
+        const posthogConfig = SdkConfig.get()["posthog"];
+        if (posthogConfig) {
+            this.posthog.init(posthogConfig.projectApiKey, {
+                api_host: posthogConfig.apiHost,
+                autocapture: false,
+                mask_all_text: true,
+                mask_all_element_attributes: true,
+                // This only triggers on page load, which for our SPA isn't particularly useful.
+                // Plus, the .capture call originating from somewhere in posthog makes it hard
+                // to redact URLs, which requires async code.
+                //
+                // To raise this manually, just call .capture("$pageview") or posthog.capture_pageview.
+                capture_pageview: false,
+                sanitize_properties: this.sanitizeProperties,
+                respect_dnt: true,
+            });
+            this.enabled = true;
+        } else {
+            this.enabled = false;
+        }
+    }
+
+    private sanitizeProperties = (properties: posthog.Properties): posthog.Properties => {
+        // Callback from posthog to sanitize properties before sending them to the server.
+        //
+        // Here we sanitize posthog's built in properties which leak PII e.g. url reporting.
+        // See utils.js _.info.properties in posthog-js.
+
+        // Replace the $current_url with a redacted version.
+        // $redacted_current_url is injected by this class earlier in capture(), as its generation
+        // is async and can't be done in this non-async callback.
+        if (!properties['$redacted_current_url']) {
+            console.log("$redacted_current_url not set in sanitizeProperties, will drop $current_url entirely");
+        }
+        properties['$current_url'] = properties['$redacted_current_url'];
+        delete properties['$redacted_current_url'];
+
+        if (this.anonymity == Anonymity.Anonymous) {
+            // drop referrer information for anonymous users
+            properties['$referrer'] = null;
+            properties['$referring_domain'] = null;
+            properties['$initial_referrer'] = null;
+            properties['$initial_referring_domain'] = null;
+
+            // drop device ID, which is a UUID persisted in local storage
+            properties['$device_id'] = null;
+        }
+
+        return properties;
+    };
+
+    private static getAnonymityFromSettings(): Anonymity {
+        // determine the current anonymity level based on current user settings
+
+        // "Send anonymous usage data which helps us improve Element. This will use a cookie."
+        const analyticsOptIn = SettingsStore.getValue("analyticsOptIn", null, true);
+
+        // (proposed wording) "Send pseudonymous usage data which helps us improve Element. This will use a cookie."
+        //
+        // TODO: Currently, this is only a labs flag, for testing purposes.
+        const pseudonumousOptIn = SettingsStore.getValue("feature_pseudonymous_analytics_opt_in", null, true);
+
+        let anonymity;
+        if (pseudonumousOptIn) {
+            anonymity = Anonymity.Pseudonymous;
+        } else if (analyticsOptIn) {
+            anonymity = Anonymity.Anonymous;
+        } else {
+            anonymity = Anonymity.Disabled;
+        }
+
+        return anonymity;
+    }
+
+    private registerSuperProperties(properties: posthog.Properties) {
+        if (this.enabled) {
+            this.posthog.register(properties);
+        }
+    }
+
+    private static async getPlatformProperties(): Promise<PlatformProperties> {
+        const platform = PlatformPeg.get();
+        let appVersion;
+        try {
+            appVersion = await platform.getAppVersion();
+        } catch (e) {
+            // this happens if no version is set i.e. in dev
+            appVersion = "unknown";
+        }
+
+        return {
+            appVersion,
+            appPlatform: platform.getHumanReadableName(),
+        };
+    }
+
+    private async capture(eventName: string, properties: posthog.Properties) {
+        if (!this.enabled) {
+            return;
+        }
+        const { origin, hash, pathname } = window.location;
+        properties['$redacted_current_url'] = await getRedactedCurrentLocation(
+            origin, hash, pathname, this.anonymity);
+        this.posthog.capture(eventName, properties);
+    }
+
+    public isEnabled(): boolean {
+        return this.enabled;
+    }
+
+    public setAnonymity(anonymity: Anonymity): void {
+        // Update this.anonymity.
+        // This is public for testing purposes, typically you want to call updateAnonymityFromSettings
+        // to ensure this value is in step with the user's settings.
+        if (this.enabled && (anonymity == Anonymity.Disabled || anonymity == Anonymity.Anonymous)) {
+            // when transitioning to Disabled or Anonymous ensure we clear out any prior state
+            // set in posthog e.g. distinct ID
+            this.posthog.reset();
+            // Restore any previously set platform super properties
+            this.registerSuperProperties(this.platformSuperProperties);
+        }
+        this.anonymity = anonymity;
+    }
+
+    public async identifyUser(userId: string): Promise<void> {
+        if (this.anonymity == Anonymity.Pseudonymous) {
+            this.posthog.identify(await hashHex(userId));
+        }
+    }
+
+    public getAnonymity(): Anonymity {
+        return this.anonymity;
+    }
+
+    public logout(): void {
+        if (this.enabled) {
+            this.posthog.reset();
+        }
+        this.setAnonymity(Anonymity.Anonymous);
+    }
+
+    public async trackPseudonymousEvent<E extends IPseudonymousEvent>(
+        eventName: E["eventName"],
+        properties: E["properties"] = {},
+    ) {
+        if (this.anonymity == Anonymity.Anonymous || this.anonymity == Anonymity.Disabled) return;
+        await this.capture(eventName, properties);
+    }
+
+    public async trackAnonymousEvent<E extends IAnonymousEvent>(
+        eventName: E["eventName"],
+        properties: E["properties"] = {},
+    ): Promise<void> {
+        if (this.anonymity == Anonymity.Disabled) return;
+        await this.capture(eventName, properties);
+    }
+
+    public async trackRoomEvent<E extends IRoomEvent>(
+        eventName: E["eventName"],
+        roomId: string,
+        properties: Omit<E["properties"], "roomId">,
+    ): Promise<void> {
+        const updatedProperties = {
+            ...properties,
+            hashedRoomId: roomId ? await hashHex(roomId) : null,
+        };
+        await this.trackPseudonymousEvent(eventName, updatedProperties);
+    }
+
+    public async trackPageView(durationMs: number): Promise<void> {
+        const hash = window.location.hash;
+
+        let screen = null;
+        const split = hash.split("/");
+        if (split.length >= 2) {
+            screen = split[1];
+        }
+
+        await this.trackAnonymousEvent<IPageView>("$pageview", {
+            durationMs,
+            screen,
+        });
+    }
+
+    public async updatePlatformSuperProperties(): Promise<void> {
+        // Update super properties in posthog with our platform (app version, platform).
+        // These properties will be subsequently passed in every event.
+        //
+        // This only needs to be done once per page lifetime. Note that getPlatformProperties
+        // is async and can involve a network request if we are running in a browser.
+        this.platformSuperProperties = await PosthogAnalytics.getPlatformProperties();
+        this.registerSuperProperties(this.platformSuperProperties);
+    }
+
+    public async updateAnonymityFromSettings(userId?: string): Promise<void> {
+        // Update this.anonymity based on the user's analytics opt-in settings
+        // Identify the user (via hashed user ID) to posthog if anonymity is pseudonmyous
+        this.setAnonymity(PosthogAnalytics.getAnonymityFromSettings());
+        if (userId && this.getAnonymity() == Anonymity.Pseudonymous) {
+            await this.identifyUser(userId);
+        }
+    }
+}

src/Registration.js

@@ -51,10 +51,15 @@ export async function startAnyRegistrationFlow(options) {
         description: _t("Use your account or create a new one to continue."),
         button: _t("Create Account"),
         extraButtons: [
-            <button key="start_login" onClick={() => {
+            <button
-                modal.close();
+                key="start_login"
-                dis.dispatch({ action: 'start_login', screenAfterLogin: options.screen_after });
+                onClick={() => {
-            }}>{ _t('Sign In') }</button>,
+                    modal.close();
+                    dis.dispatch({ action: 'start_login', screenAfterLogin: options.screen_after });
+                }}
+            >
+                { _t('Sign In') }
+            </button>,
         ],
         onFinished: (proceed) => {
             if (proceed) {

src/SlashCommands.tsx

@@ -34,7 +34,6 @@ import { getAddressType } from './UserAddress';
 import { abbreviateUrl } from './utils/UrlUtils';
 import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from './utils/IdentityServerUtils';
 import { isPermalinkHost, parsePermalink } from "./utils/permalinks/Permalinks";
-import { inviteUsersToRoom } from "./RoomInvite";
 import { WidgetType } from "./widgets/WidgetType";
 import { Jitsi } from "./widgets/Jitsi";
 import { parseFragment as parseHtml, Element as ChildElement } from "parse5";
@@ -49,6 +48,7 @@ import { UIFeature } from "./settings/UIFeature";
 import { CHAT_EFFECTS } from "./effects";
 import CallHandler from "./CallHandler";
 import { guessAndSetDMRoom } from "./Rooms";
+import { upgradeRoom } from './utils/RoomUpgrade';
 import UploadConfirmDialog from './components/views/dialogs/UploadConfirmDialog';
 import ErrorDialog from './components/views/dialogs/ErrorDialog';
 import DevtoolsDialog from './components/views/dialogs/DevtoolsDialog';
@@ -277,50 +277,8 @@ export const Commands = [
                     /*isPriority=*/false, /*isStatic=*/true);
 
                 return success(finished.then(async ([resp]) => {
-                    if (!resp.continue) return;
+                    if (!resp?.continue) return;
-
+                    await upgradeRoom(room, args, resp.invite);
-                    let checkForUpgradeFn;
-                    try {
-                        const upgradePromise = cli.upgradeRoom(roomId, args);
-
-                        // We have to wait for the js-sdk to give us the room back so
-                        // we can more effectively abuse the MultiInviter behaviour
-                        // which heavily relies on the Room object being available.
-                        if (resp.invite) {
-                            checkForUpgradeFn = async (newRoom) => {
-                                // The upgradePromise should be done by the time we await it here.
-                                const { replacement_room: newRoomId } = await upgradePromise;
-                                if (newRoom.roomId !== newRoomId) return;
-
-                                const toInvite = [
-                                    ...room.getMembersWithMembership("join"),
-                                    ...room.getMembersWithMembership("invite"),
-                                ].map(m => m.userId).filter(m => m !== cli.getUserId());
-
-                                if (toInvite.length > 0) {
-                                    // Errors are handled internally to this function
-                                    await inviteUsersToRoom(newRoomId, toInvite);
-                                }
-
-                                cli.removeListener('Room', checkForUpgradeFn);
-                            };
-                            cli.on('Room', checkForUpgradeFn);
-                        }
-
-                        // We have to await after so that the checkForUpgradesFn has a proper reference
-                        // to the new room's ID.
-                        await upgradePromise;
-                    } catch (e) {
-                        console.error(e);
-
-                        if (checkForUpgradeFn) cli.removeListener('Room', checkForUpgradeFn);
-
-                        Modal.createTrackedDialog('Slash Commands', 'room upgrade error', ErrorDialog, {
-                            title: _t('Error upgrading room'),
-                            description: _t(
-                                'Double check that your server supports the room version chosen and try again.'),
-                        });
-                    }
                 }));
             }
             return reject(this.getUsage());

src/TextForEvent.tsx

@@ -25,11 +25,44 @@ import { Action } from './dispatcher/actions';
 import defaultDispatcher from './dispatcher/dispatcher';
 import { SetRightPanelPhasePayload } from './dispatcher/payloads/SetRightPanelPhasePayload';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { MatrixClientPeg } from "./MatrixClientPeg";
 
 // These functions are frequently used just to check whether an event has
 // any text to display at all. For this reason they return deferred values
 // to avoid the expense of looking up translations when they're not needed.
 
+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 textForMemberEvent(ev: MatrixEvent, allowJSX: boolean, showHiddenEvents?: boolean): () => string | null {
     // XXX: SYJS-16 "sender is sometimes null for join messages"
     const senderName = ev.sender ? ev.sender.name : ev.getSender();
@@ -567,6 +600,7 @@ interface IHandlers {
 
 const handlers: IHandlers = {
     'm.room.message': textForMessageEvent,
+    'm.call.invite': textForCallInviteEvent,
 };
 
 const stateHandlers: IHandlers = {

src/UserAddress.ts

@@ -14,35 +14,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import PropTypes from "prop-types";
-
 const emailRegex = /^\S+@\S+\.\S+$/;
 const mxUserIdRegex = /^@\S+:\S+$/;
 const mxRoomIdRegex = /^!\S+:\S+$/;
 
-export const addressTypes = ['mx-user-id', 'mx-room-id', 'email'];
-
 export enum AddressType {
     Email = "email",
     MatrixUserId = "mx-user-id",
     MatrixRoomId = "mx-room-id",
 }
 
+export const addressTypes = [AddressType.Email, AddressType.MatrixRoomId, AddressType.MatrixUserId];
+
 // PropType definition for an object describing
 // an address that can be invited to a room (which
 // could be a third party identifier or a matrix ID)
 // along with some additional information about the
 // address / target.
-export const UserAddressType = PropTypes.shape({
+export interface IUserAddress {
-    addressType: PropTypes.oneOf(addressTypes).isRequired,
+    addressType: AddressType;
-    address: PropTypes.string.isRequired,
+    address: string;
-    displayName: PropTypes.string,
+    displayName?: string;
-    avatarMxc: PropTypes.string,
+    avatarMxc?: string;
     // true if the address is known to be a valid address (eg. is a real
     // user we've seen) or false otherwise (eg. is just an address the
     // user has entered)
-    isKnown: PropTypes.bool,
+    isKnown?: boolean;
-});
+}
 
 export function getAddressType(inputText: string): AddressType | null {
     if (emailRegex.test(inputText)) {

src/accessibility/KeyboardShortcuts.tsx

@@ -163,7 +163,7 @@ const shortcuts: Record<Categories, IShortcut[]> = {
                 modifiers: [Modifiers.SHIFT],
                 key: Key.PAGE_UP,
             }],
-                description: _td("Jump to oldest unread message"),
+            description: _td("Jump to oldest unread message"),
         }, {
             keybinds: [{
                 modifiers: [CMD_OR_CTRL, Modifiers.SHIFT],

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

@@ -269,7 +269,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
 
             <details>
                 <summary>{ _t("Advanced") }</summary>
-                <AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
+                <AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick}>
                     { _t("Set up with a Security Key") }
                 </AccessibleButton>
             </details>

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

@@ -474,7 +474,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 outlined
             >
                 <div className="mx_CreateSecretStorageDialog_optionTitle">
-                    <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup"></span>
+                    <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup" />
                     { _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>
@@ -493,7 +493,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 outlined
             >
                 <div className="mx_CreateSecretStorageDialog_optionTitle">
-                    <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase"></span>
+                    <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase" />
                     { _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>
@@ -701,7 +701,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                         <code ref={this._collectRecoveryKeyNode}>{ this._recoveryKey.encodedPrivateKey }</code>
                     </div>
                     <div className="mx_CreateSecretStorageDialog_recoveryKeyButtons">
-                        <AccessibleButton kind='primary' className="mx_Dialog_primary"
+                        <AccessibleButton kind='primary'
+                            className="mx_Dialog_primary"
                             onClick={this._onDownloadClick}
                             disabled={this.state.phase === PHASE_STORING}
                         >

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

@@ -148,8 +148,12 @@ export default class ExportE2eKeysDialog extends React.Component {
                                     </label>
                                 </div>
                                 <div className='mx_E2eKeysDialog_inputCell'>
-                                    <input ref={this._passphrase1} id='passphrase1'
+                                    <input
-                                        autoFocus={true} size='64' type='password'
+                                        ref={this._passphrase1}
+                                        id='passphrase1'
+                                        autoFocus={true}
+                                        size='64'
+                                        type='password'
                                         disabled={disableForm}
                                     />
                                 </div>
@@ -161,8 +165,10 @@ export default class ExportE2eKeysDialog extends React.Component {
                                     </label>
                                 </div>
                                 <div className='mx_E2eKeysDialog_inputCell'>
-                                    <input ref={this._passphrase2} id='passphrase2'
+                                    <input ref={this._passphrase2}
-                                        size='64' type='password'
+                                        id='passphrase2'
+                                        size='64'
+                                        type='password'
                                         disabled={disableForm}
                                     />
                                 </div>

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

@@ -174,7 +174,10 @@ export default class ImportE2eKeysDialog extends React.Component {
                         </div>
                     </div>
                     <div className='mx_Dialog_buttons'>
-                        <input className='mx_Dialog_primary' type='submit' value={_t('Import')}
+                        <input
+                            className='mx_Dialog_primary'
+                            type='submit'
+                            value={_t('Import')}
                             disabled={!this.state.enableSubmit || disableForm}
                         />
                         <button onClick={this._onCancelClick} disabled={disableForm}>

src/audio/ManagedPlayback.ts

@@ -0,0 +1,37 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { DEFAULT_WAVEFORM, Playback } from "./Playback";
+import { PlaybackManager } from "./PlaybackManager";
+
+/**
+ * A managed playback is a Playback instance that is guided by a PlaybackManager.
+ */
+export class ManagedPlayback extends Playback {
+    public constructor(private manager: PlaybackManager, buf: ArrayBuffer, seedWaveform = DEFAULT_WAVEFORM) {
+        super(buf, seedWaveform);
+    }
+
+    public async play(): Promise<void> {
+        this.manager.playOnly(this);
+        return super.play();
+    }
+
+    public destroy() {
+        this.manager.destroyPlaybackInstance(this);
+        super.destroy();
+    }
+}

src/audio/Playback.ts

@@ -32,23 +32,15 @@ export enum PlaybackState {
 
 export const PLAYBACK_WAVEFORM_SAMPLES = 39;
 const THUMBNAIL_WAVEFORM_SAMPLES = 100; // arbitrary: [30,120]
-const DEFAULT_WAVEFORM = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
+export const DEFAULT_WAVEFORM = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
 
 function makePlaybackWaveform(input: number[]): number[] {
     // First, convert negative amplitudes to positive so we don't detect zero as "noisy".
     const noiseWaveform = input.map(v => Math.abs(v));
 
-    // Next, we'll resample the waveform using a smoothing approach so we can keep the same rough shape.
+    // Then, we'll resample the waveform using a smoothing approach so we can keep the same rough shape.
-    // We also rescale the waveform to be 0-1 for the remaining function logic.
+    // We also rescale the waveform to be 0-1 so we end up with a clamped waveform to rely upon.
-    const resampled = arrayRescale(arraySmoothingResample(noiseWaveform, PLAYBACK_WAVEFORM_SAMPLES), 0, 1);
+    return arrayRescale(arraySmoothingResample(noiseWaveform, PLAYBACK_WAVEFORM_SAMPLES), 0, 1);
-
-    // Then, we'll do a high and low pass filter to isolate actual speaking volumes within the rescaled
-    // waveform. Most speech happens below the 0.5 mark.
-    const filtered = resampled.map(v => clamp(v, 0.1, 0.5));
-
-    // Finally, we'll rescale the filtered waveform (0.1-0.5 becomes 0-1 again) so the user sees something
-    // sensible. This is what we return to keep our contract of "values between zero and one".
-    return arrayRescale(filtered, 0, 1);
 }
 
 export class Playback extends EventEmitter implements IDestroyable {
@@ -59,9 +51,10 @@ export class Playback extends EventEmitter implements IDestroyable {
     public readonly thumbnailWaveform: number[];
 
     private readonly context: AudioContext;
-    private source: AudioBufferSourceNode;
+    private source: AudioBufferSourceNode | MediaElementAudioSourceNode;
     private state = PlaybackState.Decoding;
     private audioBuf: AudioBuffer;
+    private element: HTMLAudioElement;
     private resampledWaveform: number[];
     private waveformObservable = new SimpleObservable<number[]>();
     private readonly clock: PlaybackClock;
@@ -129,36 +122,64 @@ export class Playback extends EventEmitter implements IDestroyable {
         this.removeAllListeners();
         this.clock.destroy();
         this.waveformObservable.close();
+        if (this.element) {
+            URL.revokeObjectURL(this.element.src);
+            this.element.remove();
+        }
     }
 
     public async prepare() {
-        // Safari compat: promise API not supported on this function
+        // The point where we use an audio element is fairly arbitrary, though we don't want
-        this.audioBuf = await new Promise((resolve, reject) => {
+        // it to be too low. As of writing, voice messages want to show a waveform but audio
-            this.context.decodeAudioData(this.buf, b => resolve(b), async e => {
+        // messages do not. Using an audio element means we can't show a waveform preview, so
-                // This error handler is largely for Safari as well, which doesn't support Opus/Ogg
+        // we try to target the difference between a voice message file and large audio file.
-                // very well.
+        // Overall, the point of this is to avoid memory-related issues due to storing a massive
-                console.error("Error decoding recording: ", e);
+        // audio buffer in memory, as that can balloon to far greater than the input buffer's
-                console.warn("Trying to re-encode to WAV instead...");
+        // byte length.
+        if (this.buf.byteLength > 5 * 1024 * 1024) { // 5mb
+            console.log("Audio file too large: processing through <audio /> element");
+            this.element = document.createElement("AUDIO") as HTMLAudioElement;
+            const prom = new Promise((resolve, reject) => {
+                this.element.onloadeddata = () => resolve(null);
+                this.element.onerror = (e) => reject(e);
+            });
+            this.element.src = URL.createObjectURL(new Blob([this.buf]));
+            await prom; // make sure the audio element is ready for us
+        } else {
+            // Safari compat: promise API not supported on this function
+            this.audioBuf = await new Promise((resolve, reject) => {
+                this.context.decodeAudioData(this.buf, b => resolve(b), async e => {
+                    try {
+                        // This error handler is largely for Safari as well, which doesn't support Opus/Ogg
+                        // very well.
+                        console.error("Error decoding recording: ", e);
+                        console.warn("Trying to re-encode to WAV instead...");
 
-                const wav = await decodeOgg(this.buf);
+                        const wav = await decodeOgg(this.buf);
 
-                // noinspection ES6MissingAwait - not needed when using callbacks
+                        // noinspection ES6MissingAwait - not needed when using callbacks
-                this.context.decodeAudioData(wav, b => resolve(b), e => {
+                        this.context.decodeAudioData(wav, b => resolve(b), e => {
-                    console.error("Still failed to decode recording: ", e);
+                            console.error("Still failed to decode recording: ", e);
-                    reject(e);
+                            reject(e);
+                        });
+                    } catch (e) {
+                        console.error("Caught decoding error:", e);
+                        reject(e);
+                    }
                 });
             });
-        });
 
-        // Update the waveform to the real waveform once we have channel data to use. We don't
+            // Update the waveform to the real waveform once we have channel data to use. We don't
-        // exactly trust the user-provided waveform to be accurate...
+            // exactly trust the user-provided waveform to be accurate...
-        const waveform = Array.from(this.audioBuf.getChannelData(0));
+            const waveform = Array.from(this.audioBuf.getChannelData(0));
-        this.resampledWaveform = makePlaybackWaveform(waveform);
+            this.resampledWaveform = makePlaybackWaveform(waveform);
+        }
+
         this.waveformObservable.update(this.resampledWaveform);
 
         this.emit(PlaybackState.Stopped); // signal that we're not decoding anymore
         this.clock.flagLoadTime(); // must happen first because setting the duration fires a clock update
-        this.clock.durationSeconds = this.audioBuf.duration;
+        this.clock.durationSeconds = this.element ? this.element.duration : this.audioBuf.duration;
     }
 
     private onPlaybackEnd = async () => {
@@ -171,7 +192,11 @@ export class Playback extends EventEmitter implements IDestroyable {
         if (this.state === PlaybackState.Stopped) {
             this.disconnectSource();
             this.makeNewSourceBuffer();
-            this.source.start();
+            if (this.element) {
+                await this.element.play();
+            } else {
+                (this.source as AudioBufferSourceNode).start();
+            }
         }
 
         // We use the context suspend/resume functions because it allows us to pause a source
@@ -182,13 +207,21 @@ export class Playback extends EventEmitter implements IDestroyable {
     }
 
     private disconnectSource() {
+        if (this.element) return; // leave connected, we can (and must) re-use it
         this.source?.disconnect();
         this.source?.removeEventListener("ended", this.onPlaybackEnd);
     }
 
     private makeNewSourceBuffer() {
-        this.source = this.context.createBufferSource();
+        if (this.element && this.source) return; // leave connected, we can (and must) re-use it
-        this.source.buffer = this.audioBuf;
+
+        if (this.element) {
+            this.source = this.context.createMediaElementSource(this.element);
+        } else {
+            this.source = this.context.createBufferSource();
+            this.source.buffer = this.audioBuf;
+        }
+
         this.source.addEventListener("ended", this.onPlaybackEnd);
         this.source.connect(this.context.destination);
     }
@@ -241,7 +274,11 @@ export class Playback extends EventEmitter implements IDestroyable {
         // when it comes time to the user hitting play. After a couple jumps, the user
         // will have desynced the clock enough to be about 10-15 seconds off, while this
         // keeps it as close to perfect as humans can perceive.
-        this.source.start(now, timeSeconds);
+        if (this.element) {
+            this.element.currentTime = timeSeconds;
+        } else {
+            (this.source as AudioBufferSourceNode).start(now, timeSeconds);
+        }
 
         // Dev note: it's critical that the code gap between `this.source.start()` and
         // `this.pause()` is as small as possible: we do not want to delay *anything*

src/audio/PlaybackClock.ts

@@ -103,8 +103,8 @@ export class PlaybackClock implements IDestroyable {
      * @param {MatrixEvent} event The event to use for placeholders.
      */
     public populatePlaceholdersFrom(event: MatrixEvent) {
-        const durationSeconds = Number(event.getContent()['info']?.['duration']);
+        const durationMs = Number(event.getContent()['info']?.['duration']);
-        if (Number.isFinite(durationSeconds)) this.placeholderDuration = durationSeconds;
+        if (Number.isFinite(durationMs)) this.placeholderDuration = durationMs / 1000;
     }
 
     /**
@@ -132,6 +132,10 @@ export class PlaybackClock implements IDestroyable {
 
     public flagStop() {
         this.stopped = true;
+
+        // Reset the clock time now so that the update going out will trigger components
+        // to check their seek/position information (alongside the clock).
+        this.clipStart = this.context.currentTime;
     }
 
     public syncTo(contextTime: number, clipTime: number) {

src/audio/PlaybackManager.ts

@@ -0,0 +1,54 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { DEFAULT_WAVEFORM, Playback } from "./Playback";
+import { ManagedPlayback } from "./ManagedPlayback";
+
+/**
+ * Handles management of playback instances to ensure certain functionality, like
+ * one playback operating at any one time.
+ */
+export class PlaybackManager {
+    private static internalInstance: PlaybackManager;
+
+    private instances: ManagedPlayback[] = [];
+
+    public static get instance(): PlaybackManager {
+        if (!PlaybackManager.internalInstance) {
+            PlaybackManager.internalInstance = new PlaybackManager();
+        }
+        return PlaybackManager.internalInstance;
+    }
+
+    /**
+     * Stops all other playback instances. If no playback is provided, all instances
+     * are stopped.
+     * @param playback Optional. The playback to leave untouched.
+     */
+    public playOnly(playback?: Playback) {
+        this.instances.filter(p => p !== playback).forEach(p => p.stop());
+    }
+
+    public destroyPlaybackInstance(playback: ManagedPlayback) {
+        this.instances = this.instances.filter(p => p !== playback);
+    }
+
+    public createPlaybackInstance(buf: ArrayBuffer, waveform = DEFAULT_WAVEFORM): Playback {
+        const instance = new ManagedPlayback(this, buf, waveform);
+        this.instances.push(instance);
+        return instance;
+    }
+}

src/audio/VoiceRecording.ts

@@ -30,6 +30,7 @@ import { IEncryptedFile } from "matrix-js-sdk/src/@types/event";
 import { uploadFile } from "../ContentMessages";
 import { FixedRollingArray } from "../utils/FixedRollingArray";
 import { clamp } from "../utils/numbers";
+import mxRecorderWorkletPath from "./RecorderWorklet";
 
 const CHANNELS = 1; // stereo isn't important
 export const SAMPLE_RATE = 48000; // 48khz is what WebRTC uses. 12khz is where we lose quality.
@@ -113,16 +114,10 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
             });
             this.recorderSource = this.recorderContext.createMediaStreamSource(this.recorderStream);
 
-            // Set up our worklet. We use this for timing information and waveform analysis: the
-            // web audio API prefers this be done async to avoid holding the main thread with math.
-            const mxRecorderWorkletPath = document.body.dataset.vectorRecorderWorkletScript;
-            if (!mxRecorderWorkletPath) {
-                // noinspection ExceptionCaughtLocallyJS
-                throw new Error("Unable to create recorder: no worklet script registered");
-            }
-
             // Connect our inputs and outputs
             if (this.recorderContext.audioWorklet) {
+                // Set up our worklet. We use this for timing information and waveform analysis: the
+                // web audio API prefers this be done async to avoid holding the main thread with math.
                 await this.recorderContext.audioWorklet.addModule(mxRecorderWorkletPath);
                 this.recorderWorklet = new AudioWorkletNode(this.recorderContext, WORKLET_NAME);
                 this.recorderSource.connect(this.recorderWorklet);
@@ -333,12 +328,17 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
 
         if (this.lastUpload) return this.lastUpload;
 
-        this.emit(RecordingState.Uploading);
+        try {
-        const { url: mxc, file: encrypted } = await uploadFile(this.client, inRoomId, new Blob([this.audioBuffer], {
+            this.emit(RecordingState.Uploading);
-            type: this.contentType,
+            const { url: mxc, file: encrypted } = await uploadFile(this.client, inRoomId, new Blob([this.audioBuffer], {
-        }));
+                type: this.contentType,
-        this.lastUpload = { mxc, encrypted };
+            }));
-        this.emit(RecordingState.Uploaded);
+            this.lastUpload = { mxc, encrypted };
+            this.emit(RecordingState.Uploaded);
+        } catch (e) {
+            this.emit(RecordingState.Ended);
+            throw e;
+        }
         return this.lastUpload;
     }
 }