Merge branch 'develop' into show-invite-reasons

.gitignore

@@ -13,3 +13,4 @@ package-lock.json
 /src/component-index.js
 
 .DS_Store
+*.tmp

babel.config.js

@@ -3,12 +3,15 @@ module.exports = {
  "presets": [
  ["@babel/preset-env", {
  "targets": [
- "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions"
+ "last 2 Chrome versions",
+ "last 2 Firefox versions",
+ "last 2 Safari versions",
+ "last 2 Edge versions",
  ],
  }],
  "@babel/preset-typescript",
  "@babel/preset-flow",
- "@babel/preset-react"
+ "@babel/preset-react",
  ],
  "plugins": [
  ["@babel/plugin-proposal-decorators", {legacy: true}],
@@ -18,6 +21,6 @@ module.exports = {
  "@babel/plugin-proposal-object-rest-spread",
  "@babel/plugin-transform-flow-comments",
  "@babel/plugin-syntax-dynamic-import",
- "@babel/plugin-transform-runtime"
- ]
+ "@babel/plugin-transform-runtime",
+ ],
 };

docs/ciderEditor.md

@@ -21,14 +21,14 @@ caret nodes (more on that later).
 For these reasons it doesn't use `innerText`, `textContent` or anything similar.
 The model addresses any content in the editor within as an offset within this string.
 The caret position is thus also converted from a position in the DOM tree
-to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.js`.
+to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.ts`.
 
 Once the content string and caret offset is calculated, it is passed to the `update()`
 method of the model. The model first calculates the same content string of its current parts,
 basically just concatenating their text. It then looks for differences between
 the current and the new content string. The diffing algorithm is very basic,
 and assumes there is only one change around the caret offset,
-so this should be very inexpensive. See `diff.js` for details.
+so this should be very inexpensive. See `diff.ts` for details.
 
 The result of the diffing is the strings that were added and/or removed from
 the current content. These differences are then applied to the parts,
@@ -51,7 +51,7 @@ which relate poorly to text input or changes, and don't need the `beforeinput` e
 which isn't broadly supported yet.
 
 Once the parts of the model are updated, the DOM of the editor is then reconciled
-with the new model state, see `renderModel` in `render.js` for this.
+with the new model state, see `renderModel` in `render.ts` for this.
 If the model didn't reject the input and didn't make any additional changes,
 this won't make any changes to the DOM at all, and should thus be fairly efficient.
 

docs/media-handling.md

@@ -0,0 +1,19 @@
+# Media handling
+
+Surely media should be as easy as just putting a URL into an `img` and calling it good, right?
+Not quite. Matrix uses something called a Matrix Content URI (better known as MXC URI) to identify
+content, which is then converted to a regular HTTPS URL on the homeserver. However, sometimes that
+URL can change depending on deployment considerations.
+
+The react-sdk features a [customisation endpoint](https:/vector-im/element-web/blob/develop/docs/customisations.md)
+for media handling where all conversions from MXC URI to HTTPS URL happen. This is to ensure that
+those obscure deployments can route all their media to the right place.
+
+For development, there are currently two functions available: `mediaFromMxc` and `mediaFromContent`.
+The `mediaFromMxc` function should be self-explanatory. `mediaFromContent` takes an event content as
+a parameter and will automatically parse out the source media and thumbnail. Both functions return
+a `Media` object with a number of options on it, such as getting various common HTTPS URLs for the
+media.
+
+**It is extremely important that all media calls are put through this customisation endpoint.** So
+much so it's a lint rule to avoid accidental use of the wrong functions.

package.json

@@ -1,6 +1,6 @@
 {
  "name": "matrix-react-sdk",
- "version": "3.14.0",
+ "version": "3.17.0",
  "description": "SDK for matrix.org using React",
  "author": "matrix.org",
  "repository": {
@@ -83,6 +83,7 @@
  "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
  "matrix-widget-api": "^0.1.0-beta.13",
  "minimist": "^1.2.5",
+ "opus-recorder": "^8.0.3",
  "pako": "^2.0.3",
  "parse5": "^6.0.1",
  "png-chunks-extract": "^1.0.0",
@@ -101,7 +102,7 @@
  "tar-js": "^0.3.0",
  "text-encoding-utf-8": "^1.0.2",
  "url": "^0.11.0",
- "velocity-animate": "^1.5.2",
+ "velocity-animate": "^2.0.6",
  "what-input": "^5.2.10",
  "zxcvbn": "^4.4.2"
  },
@@ -157,6 +158,7 @@
  "jest": "^26.6.3",
  "jest-canvas-mock": "^2.3.0",
  "jest-environment-jsdom-sixteen": "^1.0.3",
+ "jest-fetch-mock": "^3.0.3",
  "matrix-mock-request": "^1.2.3",
  "matrix-react-test-utils": "^0.2.2",
  "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",

res/css/_common.scss

@@ -395,6 +395,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
  border: 1px solid $accent-color;
  color: $accent-color;
  background-color: $button-secondary-bg-color;
+ font-family: inherit;
 }
 
 .mx_Dialog button:last-child {
@@ -489,54 +490,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
  margin-top: 69px;
 }
 
-.mx_Beta {
- color: red;
- margin-right: 10px;
- position: relative;
- top: -3px;
- background-color: white;
- padding: 0 4px;
- border-radius: 3px;
- border: 1px solid darkred;
- cursor: help;
- transition-duration: 200ms;
- font-size: smaller;
- filter: opacity(0.5);
-}
-
-.mx_Beta:hover {
- color: white;
- border: 1px solid gray;
- background-color: darkred;
-}
-
-.mx_TintableSvgButton {
- position: relative;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-content: center;
-}
-
-.mx_TintableSvgButton object {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- max-width: 100%;
- max-height: 100%;
-}
-
-.mx_TintableSvgButton span {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- opacity: 0;
- cursor: pointer;
-}
-
 // username colors
 // used by SenderProfile & RoomPreviewBar
 .mx_Username_color1 {
@@ -606,6 +559,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
  }
 }
 
+@define-mixin ProgressBarBgColour $colour {
+ background-color: $colour;
+ &::-webkit-progress-bar {
+ background-color: $colour;
+ }
+}
+
 @define-mixin ProgressBarBorderRadius $radius {
  border-radius: $radius;
  &::-moz-progress-bar {

res/css/_components.scss

@@ -27,6 +27,9 @@
 @import "./structures/_RoomView.scss";
 @import "./structures/_ScrollPanel.scss";
 @import "./structures/_SearchBox.scss";
+@import "./structures/_SpacePanel.scss";
+@import "./structures/_SpaceRoomDirectory.scss";
+@import "./structures/_SpaceRoomView.scss";
 @import "./structures/_TabbedView.scss";
 @import "./structures/_ToastContainer.scss";
 @import "./structures/_UploadBar.scss";
@@ -56,6 +59,7 @@
 @import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
+@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
 @import "./views/dialogs/_BugReportDialog.scss";
@@ -89,6 +93,7 @@
 @import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_SlashCommandHelpDialog.scss";
+@import "./views/dialogs/_SpaceSettingsDialog.scss";
 @import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
 @import "./views/dialogs/_TermsDialog.scss";
 @import "./views/dialogs/_UploadConfirmDialog.scss";
@@ -106,12 +111,13 @@
 @import "./views/elements/_AddressSelector.scss";
 @import "./views/elements/_AddressTile.scss";
 @import "./views/elements/_DesktopBuildsNotice.scss";
-@import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_DesktopCapturerSourcePicker.scss";
+@import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_ErrorBoundary.scss";
 @import "./views/elements/_EventListSummary.scss";
+@import "./views/elements/_FacePile.scss";
 @import "./views/elements/_Field.scss";
 @import "./views/elements/_FormButton.scss";
 @import "./views/elements/_ImageView.scss";
@@ -206,6 +212,7 @@
 @import "./views/rooms/_SendMessageComposer.scss";
 @import "./views/rooms/_Stickers.scss";
 @import "./views/rooms/_TopUnreadMessagesBar.scss";
+@import "./views/rooms/_VoiceRecordComposerTile.scss";
 @import "./views/rooms/_WhoIsTypingTile.scss";
 @import "./views/settings/_AvatarSetting.scss";
 @import "./views/settings/_CrossSigningPanel.scss";
@@ -219,6 +226,7 @@
 @import "./views/settings/_SecureBackupPanel.scss";
 @import "./views/settings/_SetIdServer.scss";
 @import "./views/settings/_SetIntegrationManager.scss";
+@import "./views/settings/_SpellCheckLanguages.scss";
 @import "./views/settings/_UpdateCheckButton.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
@@ -232,10 +240,14 @@
 @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
+@import "./views/spaces/_SpaceBasicSettings.scss";
+@import "./views/spaces/_SpaceCreateMenu.scss";
+@import "./views/spaces/_SpacePublicShare.scss";
 @import "./views/terms/_InlineTermsAgreement.scss";
 @import "./views/toasts/_AnalyticsToast.scss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
 @import "./views/verification/_VerificationShowSas.scss";
+@import "./views/voice_messages/_Waveform.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_DialPad.scss";

res/css/structures/_LeftPanel.scss

@@ -15,10 +15,12 @@ limitations under the License.
 */
 
 $groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
+$roomListCollapsedWidth: 68px;
 
 .mx_LeftPanel {
  background-color: $roomlist-bg-color;
- min-width: 260px;
+ // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
+ min-width: 206px;
  max-width: 50%;
 
  // Create a row-based flexbox for the GroupFilterPanel and the room list
@@ -37,18 +39,12 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
  // GroupFilterPanel handles its own CSS
  }
 
- &:not(.mx_LeftPanel_hasGroupFilterPanel) {
- .mx_LeftPanel_roomListContainer {
- width: 100%;
- }
- }
-
  // Note: The 'room list' in this context is actually everything that isn't the tag
  // panel, such as the menu options, breadcrumbs, filtering, etc
  .mx_LeftPanel_roomListContainer {
- width: calc(100% - $groupFilterPanelWidth);
  background-color: $roomlist-bg-color;
-
+ flex: 1 0 0;
+ min-width: 0;
  // Create another flexbox (this time a column) for the room list components
  display: flex;
  flex-direction: column;
@@ -134,6 +130,10 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
  mask-repeat: no-repeat;
  background: $secondary-fg-color;
  }
+
+ &.mx_LeftPanel_exploreButton_space::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+ }
  }
  }
 
@@ -168,17 +168,10 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
  // These styles override the defaults for the minimized (66px) layout
  &.mx_LeftPanel_minimized {
  min-width: unset;
-
- // We have to forcefully set the width to override the resizer's style attribute.
- &.mx_LeftPanel_hasGroupFilterPanel {
- width: calc(68px + $groupFilterPanelWidth) !important;
- }
- &:not(.mx_LeftPanel_hasGroupFilterPanel) {
- width: 68px !important;
- }
+ width: unset !important;
 
  .mx_LeftPanel_roomListContainer {
- width: 68px;
+ width: $roomListCollapsedWidth;
 
  .mx_LeftPanel_userHeader {
  flex-direction: row;

res/css/structures/_MainSplit.scss

@@ -18,6 +18,7 @@ limitations under the License.
  display: flex;
  flex-direction: row;
  min-width: 0;
+ min-height: 0;
  height: 100%;
 }
 

res/css/structures/_MatrixChat.scss

@@ -66,7 +66,7 @@ limitations under the License.
 }
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
  background-color: $primary-bg-color;
 
  flex: 1 1 0;

res/css/structures/_RightPanel.scss

@@ -160,3 +160,20 @@ limitations under the License.
  mask-position: center;
  }
 }
+
+.mx_RightPanel_scopeHeader {
+ margin: 24px;
+ text-align: center;
+ font-weight: $font-semi-bold;
+ font-size: $font-18px;
+ line-height: $font-22px;
+
+ .mx_BaseAvatar {
+ margin-right: 8px;
+ vertical-align: middle;
+ }
+
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+ }
+}

res/css/structures/_RoomSearch.scss

@@ -22,7 +22,7 @@ limitations under the License.
  // keep border thickness consistent to prevent movement
  border: 1px solid transparent;
  height: 28px;
- padding: 2px;
+ padding: 1px;
 
  // Create a flexbox for the icons (easier to manage)
  display: flex;