From d282675bc643058c4835db499e68d7b34af0e13f Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Sun, 13 Oct 2019 15:08:50 +0300 Subject: [PATCH 0001/1270] Improve reply rendering Signed-off-by: Tulir Asokan --- res/css/_components.scss | 1 + res/css/views/elements/_ReplyThread.scss | 11 +- res/css/views/rooms/_ReplyPreview.scss | 7 +- res/css/views/rooms/_ReplyTile.scss | 96 +++++++ src/components/views/elements/ReplyThread.js | 15 +- .../views/messages/MImageReplyBody.js | 33 +++ src/components/views/messages/MessageEvent.js | 9 +- src/components/views/rooms/ReplyPreview.js | 12 +- src/components/views/rooms/ReplyTile.js | 234 ++++++++++++++++++ 9 files changed, 388 insertions(+), 30 deletions(-) create mode 100644 res/css/views/rooms/_ReplyTile.scss create mode 100644 src/components/views/messages/MImageReplyBody.js create mode 100644 src/components/views/rooms/ReplyTile.js diff --git a/res/css/_components.scss b/res/css/_components.scss index 4891fd90c0..2c54c5f37f 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -153,6 +153,7 @@ @import "./views/rooms/_PinnedEventsPanel.scss"; @import "./views/rooms/_PresenceLabel.scss"; @import "./views/rooms/_ReplyPreview.scss"; +@import "./views/rooms/_ReplyTile.scss"; @import "./views/rooms/_RoomBreadcrumbs.scss"; @import "./views/rooms/_RoomDropTarget.scss"; @import "./views/rooms/_RoomHeader.scss"; diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss index bf44a11728..0d53a6b6f4 100644 --- a/res/css/views/elements/_ReplyThread.scss +++ b/res/css/views/elements/_ReplyThread.scss @@ -18,20 +18,13 @@ limitations under the License. margin-top: 0; } -.mx_ReplyThread .mx_DateSeparator { - font-size: 1em !important; - margin-top: 0; - margin-bottom: 0; - padding-bottom: 1px; - bottom: -5px; -} - .mx_ReplyThread_show { cursor: pointer; } blockquote.mx_ReplyThread { margin-left: 0; + margin-bottom: 8px; padding-left: 10px; - border-left: 4px solid $blockquote-bar-color; + border-left: 4px solid $button-bg-color; } diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss index 4dc4cb2c40..08fbd27808 100644 --- a/res/css/views/rooms/_ReplyPreview.scss +++ b/res/css/views/rooms/_ReplyPreview.scss @@ -32,12 +32,16 @@ limitations under the License. } .mx_ReplyPreview_header { - margin: 12px; + margin: 8px; color: $primary-fg-color; font-weight: 400; opacity: 0.4; } +.mx_ReplyPreview_tile { + margin: 0 8px; +} + .mx_ReplyPreview_title { float: left; } @@ -45,6 +49,7 @@ limitations under the License. .mx_ReplyPreview_cancel { float: right; cursor: pointer; + display: flex; } .mx_ReplyPreview_clear { diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss new file mode 100644 index 0000000000..0a055297c6 --- /dev/null +++ b/res/css/views/rooms/_ReplyTile.scss @@ -0,0 +1,96 @@ +/* +Copyright 2019 Tulir Asokan + +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_ReplyTile { + max-width: 100%; + clear: both; + padding-top: 2px; + padding-bottom: 2px; + font-size: 14px; + position: relative; + line-height: 16px; +} + +.mx_ReplyTile > a { + display: block; + text-decoration: none; + color: $primary-fg-color; +} + +// We do reply size limiting with CSS to avoid duplicating the TextualBody component. +.mx_ReplyTile .mx_EventTile_content { + $reply-lines: 2; + $line-height: 22px; + + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $reply-lines; + line-height: $line-height; + + .mx_EventTile_body.mx_EventTile_bigEmoji { + line-height: $line-height !important; + // Override the big emoji override + font-size: 14px !important; + } +} + +.mx_ReplyTile.mx_ReplyTile_info { + padding-top: 0px; +} + +.mx_ReplyTile .mx_SenderProfile { + color: $primary-fg-color; + font-size: 14px; + display: inline-block; /* anti-zalgo, with overflow hidden */ + overflow: hidden; + cursor: pointer; + padding-left: 0px; /* left gutter */ + padding-bottom: 0px; + padding-top: 0px; + margin: 0px; + line-height: 17px; + /* the next three lines, along with overflow hidden, truncate long display names */ + white-space: nowrap; + text-overflow: ellipsis; + max-width: calc(100% - 65px); +} + +.mx_ReplyTile_redacted .mx_UnknownBody { + --lozenge-color: $event-redacted-fg-color; + --lozenge-border-color: $event-redacted-border-color; + display: block; + height: 22px; + width: 250px; + border-radius: 11px; + background: + repeating-linear-gradient( + -45deg, + var(--lozenge-color), + var(--lozenge-color) 3px, + transparent 3px, + transparent 6px + ); + box-shadow: 0px 0px 3px var(--lozenge-border-color) inset; +} + +.mx_ReplyTile_sending.mx_ReplyTile_redacted .mx_UnknownBody { + opacity: 0.4; +} + +.mx_ReplyTile_contextual { + opacity: 0.4; +} diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index fac0a71617..1764c008fa 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -304,20 +304,11 @@ export default class ReplyThread extends React.Component { header = ; } - const EventTile = sdk.getComponent('views.rooms.EventTile'); - const DateSeparator = sdk.getComponent('messages.DateSeparator'); + const ReplyTile = sdk.getComponent('views.rooms.ReplyTile'); const evTiles = this.state.events.map((ev) => { - let dateSep = null; - - if (wantsDateSeparator(this.props.parentEv.getDate(), ev.getDate())) { - dateSep = ; - } - return
- { dateSep } - ; }); - return
+ return
{ header }
{ evTiles }
; diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js new file mode 100644 index 0000000000..bb869919fc --- /dev/null +++ b/src/components/views/messages/MImageReplyBody.js @@ -0,0 +1,33 @@ +/* +Copyright 2019 Tulir Asokan + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import MImageBody from './MImageBody'; + +export default class MImageReplyBody extends MImageBody { + onClick(ev) { + ev.preventDefault(); + } + + wrapImage(contentUrl, children) { + return children; + } + + // Don't show "Download this_file.png ..." + getFileBody() { + return null; + } +} diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js index a616dd96ed..28f2a471bb 100644 --- a/src/components/views/messages/MessageEvent.js +++ b/src/components/views/messages/MessageEvent.js @@ -43,6 +43,9 @@ module.exports = createReactClass({ /* the maximum image height to use, if the event is an image */ maxImageHeight: PropTypes.number, + + overrideBodyTypes: PropTypes.object, + overrideEventTypes: PropTypes.object, }, getEventTileOps: function() { @@ -60,9 +63,11 @@ module.exports = createReactClass({ 'm.file': sdk.getComponent('messages.MFileBody'), 'm.audio': sdk.getComponent('messages.MAudioBody'), 'm.video': sdk.getComponent('messages.MVideoBody'), + ...(this.props.overrideBodyTypes || {}), }; const evTypes = { 'm.sticker': sdk.getComponent('messages.MStickerBody'), + ...(this.props.overrideEventTypes || {}), }; const content = this.props.mxEvent.getContent(); @@ -81,7 +86,7 @@ module.exports = createReactClass({ } } - return ; + onHeightChanged={this.props.onHeightChanged} /> : null; }, }); diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js index caf8feeea2..a69a286a15 100644 --- a/src/components/views/rooms/ReplyPreview.js +++ b/src/components/views/rooms/ReplyPreview.js @@ -68,7 +68,7 @@ export default class ReplyPreview extends React.Component { render() { if (!this.state.event) return null; - const EventTile = sdk.getComponent('rooms.EventTile'); + const ReplyTile = sdk.getComponent('rooms.ReplyTile'); return
@@ -80,11 +80,11 @@ export default class ReplyPreview extends React.Component { onClick={cancelQuoting} />
- +
+ +
; } diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js new file mode 100644 index 0000000000..5a56ba9dc1 --- /dev/null +++ b/src/components/views/rooms/ReplyTile.js @@ -0,0 +1,234 @@ +/* +Copyright 2019 Tulir Asokan + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +const classNames = require("classnames"); +import { _t, _td } from '../../../languageHandler'; + +const sdk = require('../../../index'); + +import dis from '../../../dispatcher'; +import SettingsStore from "../../../settings/SettingsStore"; +import {MatrixClient} from 'matrix-js-sdk'; + +const ObjectUtils = require('../../../ObjectUtils'); + +const eventTileTypes = { + 'm.room.message': 'messages.MessageEvent', + 'm.sticker': 'messages.MessageEvent', + 'm.call.invite': 'messages.TextualEvent', + 'm.call.answer': 'messages.TextualEvent', + 'm.call.hangup': 'messages.TextualEvent', +}; + +const stateEventTileTypes = { + 'm.room.aliases': 'messages.TextualEvent', + // 'm.room.aliases': 'messages.RoomAliasesEvent', // too complex + 'm.room.canonical_alias': 'messages.TextualEvent', + 'm.room.create': 'messages.RoomCreate', + 'm.room.member': 'messages.TextualEvent', + 'm.room.name': 'messages.TextualEvent', + 'm.room.avatar': 'messages.RoomAvatarEvent', + 'm.room.third_party_invite': 'messages.TextualEvent', + 'm.room.history_visibility': 'messages.TextualEvent', + 'm.room.encryption': 'messages.TextualEvent', + 'm.room.topic': 'messages.TextualEvent', + 'm.room.power_levels': 'messages.TextualEvent', + 'm.room.pinned_events': 'messages.TextualEvent', + 'm.room.server_acl': 'messages.TextualEvent', + 'im.vector.modular.widgets': 'messages.TextualEvent', + 'm.room.tombstone': 'messages.TextualEvent', + 'm.room.join_rules': 'messages.TextualEvent', + 'm.room.guest_access': 'messages.TextualEvent', + 'm.room.related_groups': 'messages.TextualEvent', +}; + +function getHandlerTile(ev) { + const type = ev.getType(); + return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type]; +} + +class ReplyTile extends React.Component { + static contextTypes = { + matrixClient: PropTypes.instanceOf(MatrixClient).isRequired, + } + + static propTypes = { + mxEvent: PropTypes.object.isRequired, + isRedacted: PropTypes.bool, + permalinkCreator: PropTypes.object, + onHeightChanged: PropTypes.func, + } + + static defaultProps = { + onHeightChanged: function() {}, + } + + constructor(props, context) { + super(props, context); + this.state = {}; + this.onClick = this.onClick.bind(this); + } + + componentDidMount() { + this.props.mxEvent.on("Event.decrypted", this._onDecrypted); + } + + shouldComponentUpdate(nextProps, nextState) { + if (!ObjectUtils.shallowEqual(this.state, nextState)) { + return true; + } + + return !this._propsEqual(this.props, nextProps); + } + + componentWillUnmount() { + const client = this.context.matrixClient; + this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted); + } + + _onDecrypted() { + this.forceUpdate(); + } + + _propsEqual(objA, objB) { + const keysA = Object.keys(objA); + const keysB = Object.keys(objB); + + if (keysA.length !== keysB.length) { + return false; + } + + for (let i = 0; i < keysA.length; i++) { + const key = keysA[i]; + + if (!objB.hasOwnProperty(key)) { + return false; + } + + if (objA[key] !== objB[key]) { + return false; + } + } + return true; + } + + onClick(e) { + // This allows the permalink to be opened in a new tab/window or copied as + // matrix.to, but also for it to enable routing within Riot when clicked. + e.preventDefault(); + dis.dispatch({ + action: 'view_room', + event_id: this.props.mxEvent.getId(), + highlighted: true, + room_id: this.props.mxEvent.getRoomId(), + }); + } + + render() { + const SenderProfile = sdk.getComponent('messages.SenderProfile'); + + const content = this.props.mxEvent.getContent(); + const msgtype = content.msgtype; + const eventType = this.props.mxEvent.getType(); + + // Info messages are basically information about commands processed on a room + let isInfoMessage = ( + eventType !== 'm.room.message' && eventType !== 'm.sticker' && eventType !== 'm.room.create' + ); + + let tileHandler = getHandlerTile(this.props.mxEvent); + // If we're showing hidden events in the timeline, we should use the + // source tile when there's no regular tile for an event and also for + // replace relations (which otherwise would display as a confusing + // duplicate of the thing they are replacing). + const useSource = !tileHandler || this.props.mxEvent.isRelation("m.replace"); + if (useSource && SettingsStore.getValue("showHiddenEventsInTimeline")) { + tileHandler = "messages.ViewSourceEvent"; + // Reuse info message avatar and sender profile styling + isInfoMessage = true; + } + // This shouldn't happen: the caller should check we support this type + // before trying to instantiate us + if (!tileHandler) { + const {mxEvent} = this.props; + console.warn(`Event type not supported: type:${mxEvent.getType()} isState:${mxEvent.isState()}`); + return
+ { _t('This event could not be displayed') } +
; + } + const EventTileType = sdk.getComponent(tileHandler); + + const classes = classNames({ + mx_ReplyTile: true, + mx_ReplyTile_info: isInfoMessage, + mx_ReplyTile_redacted: this.props.isRedacted, + }); + + let permalink = "#"; + if (this.props.permalinkCreator) { + permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId()); + } + + let sender; + let needsSenderProfile = tileHandler !== 'messages.RoomCreate' && !isInfoMessage; + + if (needsSenderProfile) { + let text = null; + if (msgtype === 'm.image') text = _td('%(senderName)s sent an image'); + else if (msgtype === 'm.video') text = _td('%(senderName)s sent a video'); + else if (msgtype === 'm.file') text = _td('%(senderName)s uploaded a file'); + sender = ; + } + + const MImageReplyBody = sdk.getComponent('messages.MImageReplyBody'); + const TextualBody = sdk.getComponent('messages.TextualBody'); + const msgtypeOverrides = { + "m.image": MImageReplyBody, + // We don't want a download link for files, just the file name is enough. + "m.file": TextualBody, + "m.sticker": TextualBody, + "m.audio": TextualBody, + "m.video": TextualBody, + }; + const evOverrides = { + "m.sticker": TextualBody, + }; + + return ( + + ) + } +} + +module.exports = ReplyTile; From 03d36f30ec1093dab132c8c2bbe9414da00cb9b2 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Thu, 5 Mar 2020 13:44:54 +0200 Subject: [PATCH 0002/1270] Fix lint errors --- src/components/views/elements/ReplyThread.js | 1 - src/components/views/messages/MImageReplyBody.js | 1 - src/components/views/messages/MessageEvent.js | 2 +- src/components/views/rooms/ReplyPreview.js | 1 - src/components/views/rooms/ReplyTile.js | 7 +++---- 5 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 25b39a2ad4..954c6b49c4 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -20,7 +20,6 @@ import * as sdk from '../../../index'; import {_t} from '../../../languageHandler'; import PropTypes from 'prop-types'; import dis from '../../../dispatcher'; -import {wantsDateSeparator} from '../../../DateUtils'; import {MatrixEvent} from 'matrix-js-sdk'; import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"; import SettingsStore from "../../../settings/SettingsStore"; diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js index bb869919fc..31b4d1fa82 100644 --- a/src/components/views/messages/MImageReplyBody.js +++ b/src/components/views/messages/MImageReplyBody.js @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; import MImageBody from './MImageBody'; export default class MImageReplyBody extends MImageBody { diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js index 14ab3c8757..3703d3a629 100644 --- a/src/components/views/messages/MessageEvent.js +++ b/src/components/views/messages/MessageEvent.js @@ -123,6 +123,6 @@ export default createReactClass({ editState={this.props.editState} onHeightChanged={this.props.onHeightChanged} onMessageAllowed={this.onTileUpdate} - /> : null + /> : null; }, }); diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js index 92e3f123a0..a22a85a2f1 100644 --- a/src/components/views/rooms/ReplyPreview.js +++ b/src/components/views/rooms/ReplyPreview.js @@ -19,7 +19,6 @@ import dis from '../../../dispatcher'; import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import RoomViewStore from '../../../stores/RoomViewStore'; -import SettingsStore from "../../../settings/SettingsStore"; import PropTypes from "prop-types"; import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"; diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js index 5a56ba9dc1..36cb07f092 100644 --- a/src/components/views/rooms/ReplyTile.js +++ b/src/components/views/rooms/ReplyTile.js @@ -97,7 +97,6 @@ class ReplyTile extends React.Component { } componentWillUnmount() { - const client = this.context.matrixClient; this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted); } @@ -185,7 +184,7 @@ class ReplyTile extends React.Component { } let sender; - let needsSenderProfile = tileHandler !== 'messages.RoomCreate' && !isInfoMessage; + const needsSenderProfile = tileHandler !== 'messages.RoomCreate' && !isInfoMessage; if (needsSenderProfile) { let text = null; @@ -224,10 +223,10 @@ class ReplyTile extends React.Component { showUrlPreview={false} overrideBodyTypes={msgtypeOverrides} overrideEventTypes={evOverrides} - maxImageHeight={96}/> + maxImageHeight={96} />
- ) + ); } } From 03299a28a4f27e96a5b9b0351945b3b9c3c5218d Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 14:23:34 +0300 Subject: [PATCH 0003/1270] Fix import/export things --- src/components/views/rooms/ReplyTile.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js index 36cb07f092..3ad6962f1a 100644 --- a/src/components/views/rooms/ReplyTile.js +++ b/src/components/views/rooms/ReplyTile.js @@ -1,5 +1,5 @@ /* -Copyright 2019 Tulir Asokan +Copyright 2020 Tulir Asokan Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -16,16 +16,16 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; -const classNames = require("classnames"); +import classNames from 'classnames'; import { _t, _td } from '../../../languageHandler'; -const sdk = require('../../../index'); +import * as sdk from '../../../index'; import dis from '../../../dispatcher'; import SettingsStore from "../../../settings/SettingsStore"; import {MatrixClient} from 'matrix-js-sdk'; -const ObjectUtils = require('../../../ObjectUtils'); +import * as ObjectUtils from '../../../ObjectUtils'; const eventTileTypes = { 'm.room.message': 'messages.MessageEvent', @@ -230,4 +230,4 @@ class ReplyTile extends React.Component { } } -module.exports = ReplyTile; +export default ReplyTile; From e64ff0f099ac6660e596fc640a839c9f76f9f79b Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 14:39:16 +0300 Subject: [PATCH 0004/1270] Change score color to match sender name --- res/css/views/elements/_ReplyThread.scss | 32 ++++++++++++++++++++ src/components/views/elements/ReplyThread.js | 9 ++++-- 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss index 0d53a6b6f4..d5388e4631 100644 --- a/res/css/views/elements/_ReplyThread.scss +++ b/res/css/views/elements/_ReplyThread.scss @@ -27,4 +27,36 @@ blockquote.mx_ReplyThread { margin-bottom: 8px; padding-left: 10px; border-left: 4px solid $button-bg-color; + + &.mx_ReplyThread_color1 { + border-left-color: $username-variant1-color; + } + + &.mx_ReplyThread_color2 { + border-left-color: $username-variant2-color; + } + + &.mx_ReplyThread_color3 { + border-left-color: $username-variant3-color; + } + + &.mx_ReplyThread_color4 { + border-left-color: $username-variant4-color; + } + + &.mx_ReplyThread_color5 { + border-left-color: $username-variant5-color; + } + + &.mx_ReplyThread_color6 { + border-left-color: $username-variant6-color; + } + + &.mx_ReplyThread_color7 { + border-left-color: $username-variant7-color; + } + + &.mx_ReplyThread_color8 { + border-left-color: $username-variant8-color; + } } diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 976b3a8815..92e87ad945 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -25,6 +25,7 @@ import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks import SettingsStore from "../../../settings/SettingsStore"; import escapeHtml from "escape-html"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; +import { getUserNameColorClass } from "../../../utils/FormattingUtils" // This component does no cycle detection, simply because the only way to make such a cycle would be to // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would @@ -285,6 +286,10 @@ export default class ReplyThread extends React.Component { dis.dispatch({action: 'focus_composer'}); } + getReplyThreadColorClass(ev) { + return getUserNameColorClass(ev.getSender()).replace("Username", "ReplyThread"); + } + render() { let header = null; @@ -299,7 +304,7 @@ export default class ReplyThread extends React.Component { const ev = this.state.loadedEv; const Pill = sdk.getComponent('elements.Pill'); const room = this.context.getRoom(ev.getRoomId()); - header =
+ header =
{ _t('In reply to ', {}, { 'a': (sub) => { sub }, @@ -315,7 +320,7 @@ export default class ReplyThread extends React.Component { const ReplyTile = sdk.getComponent('views.rooms.ReplyTile'); const evTiles = this.state.events.map((ev) => { - return
+ return
Date: Fri, 10 Apr 2020 14:52:24 +0300 Subject: [PATCH 0005/1270] Add missing semicolon --- src/components/views/elements/ReplyThread.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 92e87ad945..770f95f9dc 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -25,7 +25,7 @@ import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks import SettingsStore from "../../../settings/SettingsStore"; import escapeHtml from "escape-html"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -import { getUserNameColorClass } from "../../../utils/FormattingUtils" +import { getUserNameColorClass } from "../../../utils/FormattingUtils"; // This component does no cycle detection, simply because the only way to make such a cycle would be to // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would From 25af26323c3ca9048ab7a45d63ed74116e553aa8 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 15:45:59 +0300 Subject: [PATCH 0006/1270] Make image reply rendering even more compact --- res/css/_components.scss | 1 + res/css/views/messages/_MImageReplyBody.scss | 35 +++++++++++++++++++ .../views/messages/MImageReplyBody.js | 31 ++++++++++++++-- src/components/views/rooms/ReplyTile.js | 2 +- 4 files changed, 66 insertions(+), 3 deletions(-) create mode 100644 res/css/views/messages/_MImageReplyBody.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 607257400b..2d701bb1e1 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -130,6 +130,7 @@ @import "./views/messages/_MEmoteBody.scss"; @import "./views/messages/_MFileBody.scss"; @import "./views/messages/_MImageBody.scss"; +@import "./views/messages/_MImageReplyBody.scss"; @import "./views/messages/_MNoticeBody.scss"; @import "./views/messages/_MStickerBody.scss"; @import "./views/messages/_MTextBody.scss"; diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss new file mode 100644 index 0000000000..8169e027d1 --- /dev/null +++ b/res/css/views/messages/_MImageReplyBody.scss @@ -0,0 +1,35 @@ +/* +Copyright 2020 Tulir Asokan + +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_MImageReplyBody { + display: grid; + grid-template: "image sender" 20px + "image filename" 20px + / 44px auto; + grid-gap: 4px; +} + +.mx_MImageReplyBody_thumbnail { + grid-area: image; +} + +.mx_MImageReplyBody_sender { + grid-area: sender; +} + +.mx_MImageReplyBody_filename { + grid-area: filename; +} diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js index 31b4d1fa82..cdc78e46e8 100644 --- a/src/components/views/messages/MImageReplyBody.js +++ b/src/components/views/messages/MImageReplyBody.js @@ -1,5 +1,5 @@ /* -Copyright 2019 Tulir Asokan +Copyright 2020 Tulir Asokan Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,7 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ +import React from "react"; +import { _td } from "../../../languageHandler"; +import * as sdk from "../../../index"; import MImageBody from './MImageBody'; +import MFileBody from "./MFileBody"; export default class MImageReplyBody extends MImageBody { onClick(ev) { @@ -27,6 +31,29 @@ export default class MImageReplyBody extends MImageBody { // Don't show "Download this_file.png ..." getFileBody() { - return null; + return MFileBody.prototype.presentableTextForFile.call(this, this.props.mxEvent.getContent()); + } + + render() { + if (this.state.error !== null) { + return super.render(); + } + + const content = this.props.mxEvent.getContent(); + + const contentUrl = this._getContentUrl(); + const thumbnail = this._messageContent(contentUrl, this._getThumbUrl(), content); + const fileBody = this.getFileBody(); + const SenderProfile = sdk.getComponent('messages.SenderProfile'); + const sender = ; + + return
+
{ thumbnail }
+
{ sender }
+
{ fileBody }
+
; } } diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js index 3ad6962f1a..ca349baac2 100644 --- a/src/components/views/rooms/ReplyTile.js +++ b/src/components/views/rooms/ReplyTile.js @@ -184,7 +184,7 @@ class ReplyTile extends React.Component { } let sender; - const needsSenderProfile = tileHandler !== 'messages.RoomCreate' && !isInfoMessage; + const needsSenderProfile = msgtype !== 'm.image' && tileHandler !== 'messages.RoomCreate' && !isInfoMessage; if (needsSenderProfile) { let text = null; From ec7acd1c0fbaf5d96415f380a3b85b54d079aa9f Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 15:56:09 +0300 Subject: [PATCH 0007/1270] Fix rendering reply after event is decrypted --- src/components/views/rooms/ReplyTile.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js index ca349baac2..34b2c6ad38 100644 --- a/src/components/views/rooms/ReplyTile.js +++ b/src/components/views/rooms/ReplyTile.js @@ -82,6 +82,7 @@ class ReplyTile extends React.Component { super(props, context); this.state = {}; this.onClick = this.onClick.bind(this); + this._onDecrypted = this._onDecrypted.bind(this); } componentDidMount() { @@ -102,6 +103,9 @@ class ReplyTile extends React.Component { _onDecrypted() { this.forceUpdate(); + if (this.props.onHeightChanged) { + this.props.onHeightChanged(); + } } _propsEqual(objA, objB) { From da3bd5ebee68dc15f04e15c3b55183f769413ce9 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 16:03:27 +0300 Subject: [PATCH 0008/1270] Disable pointer events inside replies --- res/css/views/rooms/_ReplyTile.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 0a055297c6..a6cff00ff2 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -35,6 +35,8 @@ limitations under the License. $reply-lines: 2; $line-height: 22px; + pointer-events: none; + text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; From 6b96a161087f4cda8ab6dcafd155e2d689a5adff Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 10 Apr 2020 16:18:06 +0300 Subject: [PATCH 0009/1270] Add absolute max height and some improvements for 
 replies

---
 res/css/views/rooms/_ReplyTile.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index a6cff00ff2..70a383a1cf 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -34,6 +34,7 @@ limitations under the License.
 .mx_ReplyTile .mx_EventTile_content {
     $reply-lines: 2;
     $line-height: 22px;
+    $max-height: 66px;
 
     pointer-events: none;
 
@@ -42,12 +43,26 @@ limitations under the License.
     -webkit-box-orient: vertical;
     -webkit-line-clamp: $reply-lines;
     line-height: $line-height;
+    max-height: $max-height;
 
     .mx_EventTile_body.mx_EventTile_bigEmoji {
         line-height: $line-height !important;
         // Override the big emoji override
         font-size: 14px !important;
     }
+
+    // Hack to cut content in 
 tags too
+    .mx_EventTile_pre_container > pre {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: $reply-lines;
+        padding: 4px;
+    }
+    .markdown-body blockquote, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul {
+        margin-bottom: 4px;
+    }
 }
 
 .mx_ReplyTile.mx_ReplyTile_info {

From e7ad9b82e0f42e6c7ac5511ade135e71a273e414 Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Fri, 10 Apr 2020 16:27:39 +0300
Subject: [PATCH 0010/1270] Fix stylelint issue and update header

---
 res/css/views/messages/_MImageReplyBody.scss | 7 ++++---
 res/css/views/rooms/_ReplyTile.scss          | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss
index 8169e027d1..9b25b4392a 100644
--- a/res/css/views/messages/_MImageReplyBody.scss
+++ b/res/css/views/messages/_MImageReplyBody.scss
@@ -16,9 +16,10 @@ limitations under the License.
 
 .mx_MImageReplyBody {
     display: grid;
-    grid-template: "image sender"   20px
-                   "image filename" 20px
-                  / 44px  auto;
+    grid-template:
+        "image sender"   20px
+        "image filename" 20px
+        / 44px  auto;
     grid-gap: 4px;
 }
 
diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss
index 70a383a1cf..fd68430157 100644
--- a/res/css/views/rooms/_ReplyTile.scss
+++ b/res/css/views/rooms/_ReplyTile.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Tulir Asokan 
+Copyright 2020 Tulir Asokan 
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

From b554d59ed165d68b56a9b08faadeec86d2f7c2b7 Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Fri, 10 Apr 2020 17:05:29 +0300
Subject: [PATCH 0011/1270] Prevent reply thumbnail image from overflowing

---
 res/css/views/messages/_MImageReplyBody.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss
index 9b25b4392a..8c5cb97478 100644
--- a/res/css/views/messages/_MImageReplyBody.scss
+++ b/res/css/views/messages/_MImageReplyBody.scss
@@ -25,6 +25,10 @@ limitations under the License.
 
 .mx_MImageReplyBody_thumbnail {
     grid-area: image;
+
+    .mx_MImageBody_thumbnail_container {
+        max-height: 44px !important;
+    }
 }
 
 .mx_MImageReplyBody_sender {

From 466ecf191af65c453bb3e38d867e57fc211dc5c5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 13 Apr 2020 21:23:40 +0100
Subject: [PATCH 0012/1270] move urlSearchParamsToObject and global.d.ts to
 react-sdk

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 package.json                           |  1 +
 src/@types/global.d.ts                 | 31 ++++++++++++++++++++++++++
 src/utils/{UrlUtils.js => UrlUtils.ts} |  6 ++++-
 yarn.lock                              |  5 +++++
 4 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/@types/global.d.ts
 rename src/utils/{UrlUtils.js => UrlUtils.ts} (89%)

diff --git a/package.json b/package.json
index 616f3f541e..11803d321d 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,7 @@
     "@babel/register": "^7.7.4",
     "@peculiar/webcrypto": "^1.0.22",
     "@types/classnames": "^2.2.10",
+    "@types/modernizr": "^3.5.3",
     "@types/react": "16.9",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
new file mode 100644
index 0000000000..963ba9d702
--- /dev/null
+++ b/src/@types/global.d.ts
@@ -0,0 +1,31 @@
+/*
+Copyright 2020 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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 * as ModernizrStatic from "modernizr";
+
+declare global {
+    interface Window {
+        Modernizr: ModernizrStatic;
+        Olm: {
+            init: () => Promise;
+        };
+    }
+
+    // workaround for https://github.com/microsoft/TypeScript/issues/30933
+    interface ObjectConstructor {
+        fromEntries?(xs: [string|number|symbol, any][]): object
+    }
+}
diff --git a/src/utils/UrlUtils.js b/src/utils/UrlUtils.ts
similarity index 89%
rename from src/utils/UrlUtils.js
rename to src/utils/UrlUtils.ts
index 7b207c128e..7fe5ad0c89 100644
--- a/src/utils/UrlUtils.js
+++ b/src/utils/UrlUtils.ts
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import url from "url";
+import * as url from "url";
+
+export function urlSearchParamsToObject(params: URLSearchParams) {
+    return Object.fromEntries([...params.entries()]);
+}
 
 /**
  * If a url has no path component, etc. abbreviate it to just the hostname
diff --git a/yarn.lock b/yarn.lock
index 538a049bff..9c57ccf649 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1257,6 +1257,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
+"@types/modernizr@^3.5.3":
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/@types/modernizr/-/modernizr-3.5.3.tgz#8ef99e6252191c1d88647809109dc29884ba6d7a"
+  integrity sha512-jhMOZSS0UGYTS9pqvt6q3wtT3uvOSve5piTEmTMx3zzTuBLvSIMxSIBIc3d5lajVD5h4xc41AMZD2M5orN3PxA==
+
 "@types/node@*":
   version "13.11.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-13.11.0.tgz#390ea202539c61c8fa6ba4428b57e05bc36dc47b"

From af4ef38a4110f3cd785ae826b3271f28ade11012 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 13 Apr 2020 21:28:23 +0100
Subject: [PATCH 0013/1270] remove dependency on `qs`

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 package.json                             |   1 -
 src/components/views/elements/AppTile.js |   4 +-
 src/utils/HostingLink.js                 |   4 +-
 yarn.lock                                | 197 ++---------------------
 4 files changed, 16 insertions(+), 190 deletions(-)

diff --git a/package.json b/package.json
index 11803d321d..7b66c95d28 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,6 @@
     "prop-types": "^15.5.8",
     "qrcode": "^1.4.4",
     "qrcode-react": "^0.1.16",
-    "qs": "^6.6.0",
     "react": "^16.9.0",
     "react-addons-css-transition-group": "15.6.2",
     "react-beautiful-dnd": "^4.0.1",
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 73ed605edd..8762eb449e 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -18,7 +18,6 @@ limitations under the License.
 */
 
 import url from 'url';
-import qs from 'qs';
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
@@ -38,6 +37,7 @@ import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 import {aboveLeftOf, ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
 import PersistedElement from "./PersistedElement";
+import {urlSearchParamsToObject} from "../../../utils/UrlUtils";
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 const ENABLE_REACT_PERF = false;
@@ -234,7 +234,7 @@ export default class AppTile extends React.Component {
             // Append scalar_token as a query param if not already present
             this._scalarClient.scalarToken = token;
             const u = url.parse(this._addWurlParams(this.props.app.url));
-            const params = qs.parse(u.query);
+            const params = urlSearchParamsToObject(new URLSearchParams(u.query));
             if (!params.scalar_token) {
                 params.scalar_token = encodeURIComponent(token);
                 // u.search must be set to undefined, so that u.format() uses query parameters - https://nodejs.org/docs/latest/api/url.html#url_url_format_url_options
diff --git a/src/utils/HostingLink.js b/src/utils/HostingLink.js
index 580ed00de5..fce2f104bd 100644
--- a/src/utils/HostingLink.js
+++ b/src/utils/HostingLink.js
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import url from 'url';
-import qs from 'qs';
 
 import SdkConfig from '../SdkConfig';
 import {MatrixClientPeg} from '../MatrixClientPeg';
+import {urlSearchParamsToObject} from "./UrlUtils";
 
 export function getHostingLink(campaign) {
     const hostingLink = SdkConfig.get().hosting_signup_link;
@@ -29,7 +29,7 @@ export function getHostingLink(campaign) {
 
     try {
         const hostingUrl = url.parse(hostingLink);
-        const params = qs.parse(hostingUrl.query);
+        const params = urlSearchParamsToObject(new URLSearchParams(hostingUrl.query));
         params.utm_campaign = campaign;
         hostingUrl.search = undefined;
         hostingUrl.query = params;
diff --git a/yarn.lock b/yarn.lock
index 9c57ccf649..8dda986b46 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1501,11 +1501,6 @@ abab@^2.0.0:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
   integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
 
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
 acorn-globals@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
@@ -1639,19 +1634,11 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-aproba@^1.0.3, aproba@^1.1.1:
+aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
   integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
-are-we-there-yet@~1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
-  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -2558,11 +2545,6 @@ console-browserify@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
   integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
 
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
-
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -2808,7 +2790,7 @@ debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0, debug@^3.2.6:
+debug@^3.1.0:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -2884,11 +2866,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
-
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -2902,11 +2879,6 @@ detect-file@^1.0.0:
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@@ -3921,13 +3893,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
 fs-readdir-recursive@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
@@ -3990,20 +3955,6 @@ fuse.js@^2.2.0:
   resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-2.7.4.tgz#96e420fde7ef011ac49c258a621314fe576536f9"
   integrity sha1-luQg/efvARrEnCWKYhMU/ldlNvk=
 
-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
-
 gensync@^1.0.0-beta.1:
   version "1.0.0-beta.1"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
@@ -4201,11 +4152,6 @@ has-symbols@^1.0.0, has-symbols@^1.0.1:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
   integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
 
-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
-
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@@ -4393,7 +4339,7 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -4410,13 +4356,6 @@ iferr@^0.1.5:
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
   integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
-ignore-walk@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
-  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
-  dependencies:
-    minimatch "^3.0.4"
-
 ignore@^4.0.3, ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -5980,21 +5919,6 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, "minimist@~ 1.2.0":
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -6019,7 +5943,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3:
+mkdirp@^0.5.1, mkdirp@^0.5.3:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -6096,15 +6020,6 @@ nearley@^2.7.10:
     randexp "0.4.6"
     semver "^5.4.1"
 
-needle@^2.2.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.1.tgz#14af48732463d7475696f937626b1b993247a56a"
-  integrity sha512-x/gi6ijr4B7fwl6WYL9FwlCvRQKGlUNvnceho8wxkwXqN8jvVmmmATTmZPRRG7b/yC1eode26C2HO9jl78Du9g==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 neo-async@^2.5.0, neo-async@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
@@ -6182,35 +6097,11 @@ node-notifier@^5.4.2:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.53:
   version "1.1.53"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
   integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
 
-nopt@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
-  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
-  dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -6243,27 +6134,6 @@ normalize-selector@^0.2.0:
   resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
   integrity sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=
 
-npm-bundled@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
-  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
-npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-packlist@^1.1.6:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
-  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-    npm-normalize-package-bin "^1.0.1"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6271,16 +6141,6 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npmlog@^4.0.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
 nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -6430,11 +6290,6 @@ os-browserify@^0.3.0:
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
   integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
 os-locale@^3.0.0, os-locale@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
@@ -6444,19 +6299,11 @@ os-locale@^3.0.0, os-locale@^3.1.0:
     lcid "^2.0.0"
     mem "^4.0.0"
 
-os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
+os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
 p-defer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
@@ -7036,7 +6883,7 @@ qrcode@^1.4.4:
     pngjs "^3.3.0"
     yargs "^13.2.4"
 
-qs@^6.5.2, qs@^6.6.0:
+qs@^6.5.2:
   version "6.9.3"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.3.tgz#bfadcd296c2d549f1dffa560619132c977f5008e"
   integrity sha512-EbZYNarm6138UKKq46tdx08Yo/q9ZhFoAXAI1meAFd2GtbRDhbZY2WQSICskT0c5q99aFzLG1D4nvTk9tqfXIw==
@@ -7101,7 +6948,7 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
-rc@1.2.8, rc@^1.2.7, rc@^1.2.8:
+rc@1.2.8, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -7259,7 +7106,7 @@ read-pkg@^4.0.1:
     parse-json "^4.0.0"
     pify "^3.0.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -7619,7 +7466,7 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^2.4.3, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3:
+rimraf@^2.4.3, rimraf@^2.5.4, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -7781,7 +7628,7 @@ serialize-javascript@^2.1.2:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
   integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
 
-set-blocking@^2.0.0, set-blocking@~2.0.0:
+set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
@@ -8117,7 +7964,7 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
@@ -8398,19 +8245,6 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tar@^4.4.2:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 terser-webpack-plugin@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
@@ -9133,13 +8967,6 @@ which@^1.2.14, which@^1.2.9, which@^1.3.0, which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
-wide-align@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
-  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
-  dependencies:
-    string-width "^1.0.2 || 2"
-
 word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
@@ -9224,7 +9051,7 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
-yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
+yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==

From dfe277b78d1e7fe39fe91245646b41d72bb367fc Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Mon, 25 May 2020 19:24:03 +0300
Subject: [PATCH 0014/1270] Remove unnecessary right margin in reply blockquote

---
 res/css/views/elements/_ReplyThread.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss
index d5388e4631..af8ca956ba 100644
--- a/res/css/views/elements/_ReplyThread.scss
+++ b/res/css/views/elements/_ReplyThread.scss
@@ -24,6 +24,7 @@ limitations under the License.
 
 blockquote.mx_ReplyThread {
     margin-left: 0;
+    margin-right: 0;
     margin-bottom: 8px;
     padding-left: 10px;
     border-left: 4px solid $button-bg-color;

From c60483728fc8526538e43c1a27834c85d8c1984c Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Mon, 25 May 2020 19:33:30 +0300
Subject: [PATCH 0015/1270] Fix dispatcher import in ReplyTile.js

---
 src/components/views/rooms/ReplyTile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js
index 34b2c6ad38..f6c4a69def 100644
--- a/src/components/views/rooms/ReplyTile.js
+++ b/src/components/views/rooms/ReplyTile.js
@@ -21,7 +21,7 @@ import { _t, _td } from '../../../languageHandler';
 
 import * as sdk from '../../../index';
 
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import {MatrixClient} from 'matrix-js-sdk';
 

From 53db386731422c88d4e24e299e9e56a150dad3cf Mon Sep 17 00:00:00 2001
From: Travis Ralston 
Date: Mon, 10 Aug 2020 22:06:30 -0600
Subject: [PATCH 0016/1270] Add support for blurhash (MSC2448)

MSC: https://github.com/matrix-org/matrix-doc/pull/2448

While the image loads, we can show a blurred version of it (calculated at upload time) so we don't have a blank space in the timeline.
---
 package.json                                  |  1 +
 src/ContentMessages.tsx                       | 10 +++-
 .../views/elements/BlurhashPlaceholder.tsx    | 56 +++++++++++++++++++
 src/components/views/messages/MImageBody.js   | 18 +++---
 yarn.lock                                     |  5 ++
 5 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 src/components/views/elements/BlurhashPlaceholder.tsx

diff --git a/package.json b/package.json
index 548b33f353..989672d414 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@babel/runtime": "^7.10.5",
     "await-lock": "^2.0.1",
     "blueimp-canvas-to-blob": "^3.27.0",
+    "blurhash": "^1.1.3",
     "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.2.6",
diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 6f55a75d0c..7e57b34ff7 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -334,6 +334,7 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
             if (file.type) {
                 encryptInfo.mimetype = file.type;
             }
+            // TODO: Blurhash for encrypted media?
             return {"file": encryptInfo};
         });
         (prom as IAbortablePromise).abort = () => {
@@ -344,11 +345,15 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
     } else {
         const basePromise = matrixClient.uploadContent(file, {
             progressHandler: progressHandler,
+            onlyContentUri: false,
         });
-        const promise1 = basePromise.then(function(url) {
+        const promise1 = basePromise.then(function(body) {
             if (canceled) throw new UploadCanceledError();
             // If the attachment isn't encrypted then include the URL directly.
-            return {"url": url};
+            return {
+                "url": body.content_uri,
+                "blurhash": body["xyz.amorgan.blurhash"], // TODO: Use `body.blurhash` when MSC2448 lands
+            };
         });
         promise1.abort = () => {
             canceled = true;
@@ -550,6 +555,7 @@ export default class ContentMessages {
             return upload.promise.then(function(result) {
                 content.file = result.file;
                 content.url = result.url;
+                content.info['xyz.amorgan.blurhash'] = result.blurhash; // TODO: Use `blurhash` when MSC2448 lands
             });
         }).then(() => {
             // Await previous message being sent into the room
diff --git a/src/components/views/elements/BlurhashPlaceholder.tsx b/src/components/views/elements/BlurhashPlaceholder.tsx
new file mode 100644
index 0000000000..bed45bfe5a
--- /dev/null
+++ b/src/components/views/elements/BlurhashPlaceholder.tsx
@@ -0,0 +1,56 @@
+/*
+ Copyright 2020 The Matrix.org Foundation C.I.C.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React from 'react';
+import {decode} from "blurhash";
+
+interface IProps {
+    blurhash: string;
+    width: number;
+    height: number;
+}
+
+export default class BlurhashPlaceholder extends React.PureComponent {
+    private canvas: React.RefObject = React.createRef();
+
+    public componentDidMount() {
+        this.draw();
+    }
+
+    public componentDidUpdate() {
+        this.draw();
+    }
+
+    private draw() {
+        if (!this.canvas.current) return;
+
+        try {
+            const {width, height} = this.props;
+
+            const pixels = decode(this.props.blurhash, Math.ceil(width), Math.ceil(height));
+            const ctx = this.canvas.current.getContext("2d");
+            const imgData = ctx.createImageData(width, height);
+            imgData.data.set(pixels);
+            ctx.putImageData(imgData, 0, 0);
+        } catch (e) {
+            console.error("Error rendering blurhash: ", e);
+        }
+    }
+
+    public render() {
+        return ;
+    }
+}
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index c92ae475bf..e0ac24c641 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -27,6 +27,7 @@ import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import InlineSpinner from '../elements/InlineSpinner';
+import BlurhashPlaceholder from "../elements/BlurhashPlaceholder";
 
 export default class MImageBody extends React.Component {
     static propTypes = {
@@ -53,6 +54,8 @@ export default class MImageBody extends React.Component {
         this.onClick = this.onClick.bind(this);
         this._isGif = this._isGif.bind(this);
 
+        const imageInfo = this.props.mxEvent.getContent().info;
+
         this.state = {
             decryptedUrl: null,
             decryptedThumbnailUrl: null,
@@ -63,6 +66,7 @@ export default class MImageBody extends React.Component {
             loadedImageDimensions: null,
             hover: false,
             showImage: SettingsStore.getValue("showImages"),
+            blurhash: imageInfo ? imageInfo['xyz.amorgan.blurhash'] : null, // TODO: Use `blurhash` when MSC2448 lands.
         };
 
         this._image = createRef();
@@ -329,7 +333,8 @@ export default class MImageBody extends React.Component {
             infoWidth = content.info.w;
             infoHeight = content.info.h;
         } else {
-            // Whilst the image loads, display nothing.
+            // Whilst the image loads, display nothing. We also don't display a blurhash image
+            // because we don't really know what size of image we'll end up with.
             //
             // Once loaded, use the loaded image dimensions stored in `loadedImageDimensions`.
             //
@@ -368,8 +373,7 @@ export default class MImageBody extends React.Component {
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             placeholder = ;
         } else if (!this.state.imgLoaded) {
-            // Deliberately, getSpinner is left unimplemented here, MStickerBody overides
-            placeholder = this.getPlaceholder();
+            placeholder = this.getPlaceholder(maxWidth, maxHeight);
         }
 
         let showPlaceholder = Boolean(placeholder);
@@ -391,7 +395,7 @@ export default class MImageBody extends React.Component {
 
         if (!this.state.showImage) {
             img = ;
-            showPlaceholder = false; // because we're hiding the image, so don't show the sticker icon.
+            showPlaceholder = false; // because we're hiding the image, so don't show the placeholder.
         }
 
         if (this._isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
@@ -433,9 +437,9 @@ export default class MImageBody extends React.Component {
     }
 
     // Overidden by MStickerBody
-    getPlaceholder() {
-        // MImageBody doesn't show a placeholder whilst the image loads, (but it could do)
-        return null;
+    getPlaceholder(width, height) {
+        if (!this.state.blurhash) return null;
+        return ;
     }
 
     // Overidden by MStickerBody
diff --git a/yarn.lock b/yarn.lock
index 98fe42ef13..f1cace67a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2493,6 +2493,11 @@ blueimp-canvas-to-blob@^3.27.0:
   resolved "https://registry.yarnpkg.com/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.27.0.tgz#a2bd5c43587b95dedf0f6998603452d1bfcc9b9e"
   integrity sha512-AcIj+hCw6WquxzJuzC6KzgYmqxLFeTWe88KuY2BEIsW1zbEOfoinDAGlhyvFNGt+U3JElkVSK7anA1FaSdmmfA==
 
+blurhash@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.3.tgz#dc325af7da836d07a0861d830bdd63694382483e"
+  integrity sha512-yUhPJvXexbqbyijCIE/T2NCXcj9iNPhWmOKbPTuR/cm7Q5snXYIfnVnz6m7MWOXxODMz/Cr3UcVkRdHiuDVRDw==
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
   version "4.11.9"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"

From ee8d1f51c2733e1e2550fc06868fc50266f69d0f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 3 Nov 2020 15:51:23 +0000
Subject: [PATCH 0017/1270] Fix onPaste handler to work with copying files from
 Finder

---
 src/components/views/rooms/SendMessageComposer.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 9438cceef5..c816c84c9d 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -445,13 +445,11 @@ export default class SendMessageComposer extends React.Component {
 
     _onPaste = (event) => {
         const {clipboardData} = event;
-        // Prioritize text on the clipboard over files as Office on macOS puts a bitmap
-        // in the clipboard as well as the content being copied.
-        if (clipboardData.files.length && !clipboardData.types.some(t => t === "text/plain")) {
-            // This actually not so much for 'files' as such (at time of writing
-            // neither chrome nor firefox let you paste a plain file copied
-            // from Finder) but more images copied from a different website
-            // / word processor etc.
+        // Prioritize text on the clipboard over files if RTF is present as Office on macOS puts a bitmap
+        // in the clipboard as well as the content being copied. Modern versions of Office seem to not do this anymore.
+        // We check text/rtf instead of text/plain as when copy+pasting a file from Finder it puts the filename
+        // in as text/plain which we want to ignore.
+        if (clipboardData.files.length && !clipboardData.types.includes("text/rtf")) {
             ContentMessages.sharedInstance().sendContentListToRoom(
                 Array.from(clipboardData.files), this.props.room.roomId, this.context,
             );

From 6f464feded9c3ea9541bd2be9a5a704bc70ba2b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 23 Feb 2021 18:12:46 +0100
Subject: [PATCH 0018/1270] Quit sticker picker on m.sticker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/AppTile.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 213351889f..9a345a7bf6 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -226,6 +226,7 @@ export default class AppTile extends React.Component {
                 case 'm.sticker':
                     if (this._sgWidget.widgetApi.hasCapability(MatrixCapabilities.StickerSending)) {
                         dis.dispatch({action: 'post_sticker_message', data: payload.data});
+                        dis.dispatch({action: 'stickerpicker_close'});
                     } else {
                         console.warn('Ignoring sticker message. Invalid capability');
                     }

From 0e293bca912de8502b5a85edf209a43089576f29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 10 Mar 2021 15:34:45 +0100
Subject: [PATCH 0019/1270] Reorganize preferences
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../tabs/user/PreferencesUserSettingsTab.js   | 61 +++++++++++++++----
 1 file changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
index ae9cad4cfa..49003b03f3 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
@@ -29,6 +29,10 @@ export default class PreferencesUserSettingsTab extends React.Component {
         'breadcrumbs',
     ];
 
+    static KEYBINDINGS_SETTINGS = [
+        'ctrlFForSearch',
+    ];
+
     static COMPOSER_SETTINGS = [
         'MessageComposerInput.autoReplaceEmoji',
         'MessageComposerInput.suggestEmoji',
@@ -37,26 +41,34 @@ export default class PreferencesUserSettingsTab extends React.Component {
         'MessageComposerInput.showStickersButton',
     ];
 
-    static TIMELINE_SETTINGS = [
-        'showTypingNotifications',
-        'autoplayGifsAndVideos',
-        'urlPreviewsEnabled',
-        'TextualBody.enableBigEmoji',
-        'showReadReceipts',
+    static TIME_SETTINGS = [
         'showTwelveHourTimestamps',
         'alwaysShowTimestamps',
-        'showRedactions',
+    ];
+    static CODE_BLOCKS_SETTINGS = [
         'enableSyntaxHighlightLanguageDetection',
         'expandCodeByDefault',
-        'scrollToBottomOnMessageSent',
         'showCodeLineNumbers',
-        'showJoinLeaves',
-        'showAvatarChanges',
-        'showDisplaynameChanges',
+    ];
+    static IMAGES_AND_VIDEOS_SETTINGS = [
+        'urlPreviewsEnabled',
+        'autoplayGifsAndVideos',
         'showImages',
+    ];
+    static THINGS_TO_HIDE_ON_TIMELINE_SETTINGS = [
+        'showTypingNotifications',
+        'showRedactions',
+        'showReadReceipts',
+        'showJoinLeaves',
+        'showDisplaynameChanges',
         'showChatEffects',
+        'showAvatarChanges',
+    ];
+
+    static TIMELINE_SETTINGS = [
+        'TextualBody.enableBigEmoji',
+        'scrollToBottomOnMessageSent',
         'Pill.shouldShowPillAvatar',
-        'ctrlFForSearch',
     ];
 
     static GENERAL_SETTINGS = [
@@ -184,11 +196,36 @@ export default class PreferencesUserSettingsTab extends React.Component {
                     {this._renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
                 
 
+                

+                    {_t("Keybindings")}
+                    {this._renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
+                

+
+                

+                    {_t("Displaying time")}
+                    {this._renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
+                

+
                 

                     {_t("Composer")}
                     {this._renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
                 

 
+                

+                    {_t("Code blocks")}
+                    {this._renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
+                

+
+                

+                    {_t("Images, GIFs and videos")}
+                    {this._renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
+                

+
+                

+                    {_t("Hide things on the timeline")}
+                    {this._renderGroup(PreferencesUserSettingsTab.THINGS_TO_HIDE_ON_TIMELINE_SETTINGS)}
+                

+
                 

                     {_t("Timeline")}
                     {this._renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}

From 951a807e249d2049eeb5bba7c94876f0988cec2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 10 Mar 2021 15:34:50 +0100
Subject: [PATCH 0020/1270] i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/i18n/strings/en_EN.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 267721b533..4f07d8fde2 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1284,7 +1284,12 @@
     "Show tray icon and minimize window to it on close": "Show tray icon and minimize window to it on close",
     "Preferences": "Preferences",
     "Room list": "Room list",
+    "Keybindings": "Keybindings",
+    "Displaying time": "Displaying time",
     "Composer": "Composer",
+    "Code blocks": "Code blocks",
+    "Images, GIFs and videos": "Images, GIFs and videos",
+    "Hide things on the timeline": "Hide things on the timeline",
     "Timeline": "Timeline",
     "Autocomplete delay (ms)": "Autocomplete delay (ms)",
     "Read Marker lifetime (ms)": "Read Marker lifetime (ms)",

From cdf8f09ec256f8bd69e478ffc11ad26ff883c398 Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Sat, 20 Mar 2021 13:38:42 +0200
Subject: [PATCH 0021/1270] Remove unused import and run yarn i18n

---
 src/components/views/elements/ReplyThread.js | 1 -
 src/i18n/strings/en_EN.json                  | 3 +++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index eb29e52496..4129f1d14f 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -20,7 +20,6 @@ import * as sdk from '../../../index';
 import {_t} from '../../../languageHandler';
 import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
-import {wantsDateSeparator} from '../../../DateUtils';
 import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 63b19831bb..66b1843e64 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1500,6 +1500,9 @@
     "Seen by %(userName)s at %(dateTime)s": "Seen by %(userName)s at %(dateTime)s",
     "Seen by %(displayName)s (%(userName)s) at %(dateTime)s": "Seen by %(displayName)s (%(userName)s) at %(dateTime)s",
     "Replying": "Replying",
+    "%(senderName)s sent an image": "%(senderName)s sent an image",
+    "%(senderName)s sent a video": "%(senderName)s sent a video",
+    "%(senderName)s uploaded a file": "%(senderName)s uploaded a file",
     "Room %(name)s": "Room %(name)s",
     "Recently visited rooms": "Recently visited rooms",
     "No recently visited rooms": "No recently visited rooms",

From 3df9557df2f886db13185872641b2f763baf41aa Mon Sep 17 00:00:00 2001
From: Ayush PS 
Date: Wed, 24 Mar 2021 14:00:09 +0530
Subject: [PATCH 0022/1270] Dial Pad UI fix

---
 res/css/views/voip/_DialPad.scss            | 1 +
 res/css/views/voip/_DialPadContextMenu.scss | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.scss
index 0c7bff0ce8..fd7c5f56f6 100644
--- a/res/css/views/voip/_DialPad.scss
+++ b/res/css/views/voip/_DialPad.scss
@@ -30,6 +30,7 @@ limitations under the License.
     text-align: center;
     vertical-align: middle;
     line-height: 40px;
+    color: #15191e;
 }
 
 .mx_DialPad_deleteButton, .mx_DialPad_dialButton {
diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index 520f51cf93..c400060b6c 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -27,9 +27,11 @@ limitations under the License.
 }
 
 .mx_DialPadContextMenu_dialled {
-    height: 1em;
+    height: 1.5em;
     font-size: 18px;
     font-weight: 600;
+    max-width: 150px;
+    overflow: auto;
 }
 
 .mx_DialPadContextMenu_dialPad {

From 1488457c3322b6d5dd6ef7882d5b14d9bf49e20f Mon Sep 17 00:00:00 2001
From: Ayush PS 
Date: Thu, 25 Mar 2021 01:31:45 +0530
Subject: [PATCH 0023/1270] Added the class -button-bg-color for all themes

---
 res/css/views/voip/_DialPad.scss               | 3 +--
 res/themes/dark/css/_dark.scss                 | 2 ++
 res/themes/legacy-dark/css/_legacy-dark.scss   | 1 +
 res/themes/legacy-light/css/_legacy-light.scss | 2 ++
 res/themes/light/css/_light.scss               | 2 ++
 5 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.scss
index fd7c5f56f6..483b131bfe 100644
--- a/res/css/views/voip/_DialPad.scss
+++ b/res/css/views/voip/_DialPad.scss
@@ -23,14 +23,13 @@ limitations under the License.
 .mx_DialPad_button {
     width: 40px;
     height: 40px;
-    background-color: $theme-button-bg-color;
+    background-color: $dialpad-button-bg-color;
     border-radius: 40px;
     font-size: 18px;
     font-weight: 600;
     text-align: center;
     vertical-align: middle;
     line-height: 40px;
-    color: #15191e;
 }
 
 .mx_DialPad_deleteButton, .mx_DialPad_dialButton {
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 7a751ad9c1..42d592c1e1 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -114,6 +114,8 @@ $voipcall-plinth-color: #21262c;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
+$dialpad-button-bg-color: #545454;
+
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $bg-color;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index 764b8f302a..ae98141d06 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -111,6 +111,7 @@ $voipcall-plinth-color: #f2f5f8;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
+$dialpad-button-bg-color: #545454;
 
 $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 9ad154dd93..4313e3c0b6 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -178,6 +178,8 @@ $voipcall-plinth-color: #f2f5f8;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
+$dialpad-button-bg-color: #e3e8f0;
+
 
 $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 25fbd0201b..81330d07c9 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -169,6 +169,8 @@ $voipcall-plinth-color: #f2f5f8;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
+$dialpad-button-bg-color: #e3e8f0;
+
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: #ffffff;

From ace3a62bacefe27dbbe77a2aeb3633528353d361 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 13 Apr 2021 14:52:26 +0100
Subject: [PATCH 0024/1270] Allow click inserting mentions into the edit
 composer too

---
 src/components/structures/TimelinePanel.js    | 48 +++++++++++++------
 .../views/rooms/BasicMessageComposer.tsx      | 19 ++++++++
 .../views/rooms/EditMessageComposer.js        |  8 ++++
 .../views/rooms/SendMessageComposer.js        | 23 +--------
 4 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 12f5d6e890..093e20b8b6 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -450,21 +450,41 @@ class TimelinePanel extends React.Component {
     };
 
     onAction = payload => {
-        if (payload.action === 'ignore_state_changed') {
-            this.forceUpdate();
-        }
-        if (payload.action === "edit_event") {
-            const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
-            this.setState({editState}, () => {
-                if (payload.event && this._messagePanel.current) {
-                    this._messagePanel.current.scrollToEventIfNeeded(
-                        payload.event.getId(),
-                    );
+        switch (payload.action) {
+            case "ignore_state_changed":
+                this.forceUpdate();
+                break;
+
+            case "edit_event": {
+                const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
+                this.setState({editState}, () => {
+                    if (payload.event && this._messagePanel.current) {
+                        this._messagePanel.current.scrollToEventIfNeeded(
+                            payload.event.getId(),
+                        );
+                    }
+                });
+                break;
+            }
+
+            case "insert_mention": {
+                if (this.state.editState) {
+                    dis.dispatch({
+                        ...payload,
+                        action: "insert_mention_edit_composer",
+                    });
+                } else {
+                    dis.dispatch({
+                        ...payload,
+                        action: "insert_mention_send_composer",
+                    });
                 }
-            });
-        }
-        if (payload.action === "scroll_to_bottom") {
-            this.jumpToLiveTimeline();
+                break;
+            }
+
+            case "scroll_to_bottom":
+                this.jumpToLiveTimeline();
+                break;
         }
     };
 
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index 9d9e3a1ba0..b8ebde75cc 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -713,4 +713,23 @@ export default class BasicMessageEditor extends React.Component
     focus() {
         this.editorRef.current.focus();
     }
+
+    public insertMention(userId: string) {
+        const {model} = this.props;
+        const {partCreator} = model;
+        const member = this.props.room.getMember(userId);
+        const displayName = member ?
+            member.rawDisplayName : userId;
+        const caret = this.getCaret();
+        const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
+        // index is -1 if there are no parts but we only care for if this would be the part in position 0
+        const insertIndex = position.index > 0 ? position.index : 0;
+        const parts = partCreator.createMentionParts(insertIndex, displayName, userId);
+        model.transform(() => {
+            const addedLen = model.insert(parts, position);
+            return model.positionForOffset(caret.offset + addedLen, true);
+        });
+        // refocus on composer, as we just clicked "Mention"
+        this.focus();
+    }
 }
diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index b006fe8c8d..1c2b3aed1c 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -120,6 +120,7 @@ export default class EditMessageComposer extends React.Component {
             saveDisabled: true,
         };
         this._createEditorModel();
+        this.dispatcherRef = dis.register(this.onAction);
     }
 
     _setEditorRef = ref => {
@@ -235,6 +236,7 @@ export default class EditMessageComposer extends React.Component {
         // then when mounting the editor again with the same editor state,
         // it will set the cursor at the end.
         this.props.editState.setEditorState(caret, parts);
+        dis.unregister(this.dispatcherRef);
     }
 
     _createEditorModel() {
@@ -278,6 +280,12 @@ export default class EditMessageComposer extends React.Component {
         });
     };
 
+    onAction = payload => {
+        if (payload.action === "insert_mention_edit_composer" && this._editorRef) {
+            this._editorRef.insertMention(payload.user_id);
+        }
+    };
+
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (

diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 75bc943146..aaeadffae1 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -482,8 +482,8 @@ export default class SendMessageComposer extends React.Component {
             case Action.FocusComposer:
                 this._editorRef && this._editorRef.focus();
                 break;
-            case 'insert_mention':
-                this._insertMention(payload.user_id);
+            case 'insert_mention_send_composer':
+                this._editorRef && this._editorRef.insertMention(payload.user_id);
                 break;
             case 'quote':
                 this._insertQuotedMessage(payload.event);
@@ -494,25 +494,6 @@ export default class SendMessageComposer extends React.Component {
         }
     };
 
-    _insertMention(userId) {
-        const {model} = this;
-        const {partCreator} = model;
-        const member = this.props.room.getMember(userId);
-        const displayName = member ?
-            member.rawDisplayName : userId;
-        const caret = this._editorRef.getCaret();
-        const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
-        // index is -1 if there are no parts but we only care for if this would be the part in position 0
-        const insertIndex = position.index > 0 ? position.index : 0;
-        const parts = partCreator.createMentionParts(insertIndex, displayName, userId);
-        model.transform(() => {
-            const addedLen = model.insert(parts, position);
-            return model.positionForOffset(caret.offset + addedLen, true);
-        });
-        // refocus on composer, as we just clicked "Mention"
-        this._editorRef && this._editorRef.focus();
-    }
-
     _insertQuotedMessage(event) {
         const {model} = this;
         const {partCreator} = model;

From 5f59e399582a958374a8bf7d634bb1ea19d77f95 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 13 Apr 2021 15:09:37 +0100
Subject: [PATCH 0025/1270] Apply the same to quoting & inserting of emoji then
 consolidate

---
 src/components/structures/TimelinePanel.js    |  7 ++--
 .../views/context_menus/MessageContextMenu.js |  2 +-
 src/components/views/messages/TextualBody.js  |  4 +-
 src/components/views/right_panel/UserInfo.tsx |  4 +-
 .../views/rooms/BasicMessageComposer.tsx      | 29 ++++++++++++-
 .../views/rooms/EditMessageComposer.js        | 10 ++++-
 src/components/views/rooms/EventTile.js       |  4 +-
 src/components/views/rooms/MessageComposer.js |  4 +-
 .../views/rooms/SendMessageComposer.js        | 42 ++++---------------
 src/dispatcher/actions.ts                     |  5 +++
 .../payloads/ComposerInsertPayload.ts         | 42 +++++++++++++++++++
 src/editor/model.ts                           |  2 +-
 12 files changed, 105 insertions(+), 50 deletions(-)
 create mode 100644 src/dispatcher/payloads/ComposerInsertPayload.ts

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 093e20b8b6..c7e252d667 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -467,16 +467,17 @@ class TimelinePanel extends React.Component {
                 break;
             }
 
-            case "insert_mention": {
+            case "composer_insert": {
+                // re-dispatch to the correct composer
                 if (this.state.editState) {
                     dis.dispatch({
                         ...payload,
-                        action: "insert_mention_edit_composer",
+                        action: "edit_composer_insert",
                     });
                 } else {
                     dis.dispatch({
                         ...payload,
-                        action: "insert_mention_send_composer",
+                        action: "send_composer_insert",
                     });
                 }
                 break;
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 56f070ba36..8c23906c68 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -233,7 +233,7 @@ export default class MessageContextMenu extends React.Component {
 
     onQuoteClick = () => {
         dis.dispatch({
-            action: 'quote',
+            action: "composer_insert",
             event: this.props.mxEvent,
         });
         this.closeMenu();
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 353f40b6a9..83f6c80937 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -390,8 +390,8 @@ export default class TextualBody extends React.Component {
     onEmoteSenderClick = event => {
         const mxEvent = this.props.mxEvent;
         dis.dispatch({
-            action: 'insert_mention',
-            user_id: mxEvent.getSender(),
+            action: "composer_insert",
+            userId: mxEvent.getSender(),
         });
     };
 
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index b862cc84d4..61eaa54639 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -360,8 +360,8 @@ const UserOptionsSection: React.FC<{
 
             const onInsertPillButton = function() {
                 dis.dispatch({
-                    action: 'insert_mention',
-                    user_id: member.userId,
+                    action: "composer_insert",
+                    userId: member.userId,
                 });
             };
 
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index b8ebde75cc..ebf97a1d09 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -18,6 +18,7 @@ limitations under the License.
 import classNames from 'classnames';
 import React, {createRef, ClipboardEvent} from 'react';
 import {Room} from 'matrix-js-sdk/src/models/room';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 import EMOTICON_REGEX from 'emojibase-regex/emoticon';
 
 import EditorModel from '../../../editor/model';
@@ -32,7 +33,7 @@ import {
 import {getCaretOffsetAndText, getRangeForSelection} from '../../../editor/dom';
 import Autocomplete, {generateCompletionDomId} from '../rooms/Autocomplete';
 import {getAutoCompleteCreator} from '../../../editor/parts';
-import {parsePlainTextMessage} from '../../../editor/deserialize';
+import {parseEvent, parsePlainTextMessage} from '../../../editor/deserialize';
 import {renderModel} from '../../../editor/render';
 import TypingStore from "../../../stores/TypingStore";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -732,4 +733,30 @@ export default class BasicMessageEditor extends React.Component
         // refocus on composer, as we just clicked "Mention"
         this.focus();
     }
+
+    public insertQuotedMessage(event: MatrixEvent) {
+        const {model} = this.props;
+        const {partCreator} = model;
+        const quoteParts = parseEvent(event, partCreator, {isQuotedMessage: true});
+        // add two newlines
+        quoteParts.push(partCreator.newline());
+        quoteParts.push(partCreator.newline());
+        model.transform(() => {
+            const addedLen = model.insert(quoteParts, model.positionForOffset(0));
+            return model.positionForOffset(addedLen, true);
+        });
+        // refocus on composer, as we just clicked "Quote"
+        this.focus();
+    }
+
+    public insertPlaintext(text: string) {
+        const {model} = this.props;
+        const {partCreator} = model;
+        const caret = this.getCaret();
+        const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
+        model.transform(() => {
+            const addedLen = model.insert([partCreator.plain(text)], position);
+            return model.positionForOffset(caret.offset + addedLen, true);
+        });
+    }
 }
diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index 1c2b3aed1c..39fafe486c 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -281,8 +281,14 @@ export default class EditMessageComposer extends React.Component {
     };
 
     onAction = payload => {
-        if (payload.action === "insert_mention_edit_composer" && this._editorRef) {
-            this._editorRef.insertMention(payload.user_id);
+        if (payload.action === "edit_composer_insert" && this._editorRef) {
+            if (payload.user_id) {
+                this._editorRef.insertMention(payload.userId);
+            } else if (payload.event) {
+                this._editorRef.insertQuotedMessage(payload.event);
+            } else if (payload.text) {
+                this._editorRef.insertPlaintext(payload.text);
+            }
         }
     };
 
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index d51f4c00f1..fe4fd95d24 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -644,8 +644,8 @@ export default class EventTile extends React.Component {
     onSenderProfileClick = event => {
         const mxEvent = this.props.mxEvent;
         dis.dispatch({
-            action: 'insert_mention',
-            user_id: mxEvent.getSender(),
+            action: "composer_insert",
+            userId: mxEvent.getSender(),
         });
     };
 
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index b7078766fb..09b9fb4a36 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -312,8 +312,8 @@ export default class MessageComposer extends React.Component {
 
     addEmoji(emoji) {
         dis.dispatch({
-            action: "insert_emoji",
-            emoji,
+            action: "composer_insert",
+            text: emoji,
         });
     }
 
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index aaeadffae1..ab6aac8be8 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -482,44 +482,18 @@ export default class SendMessageComposer extends React.Component {
             case Action.FocusComposer:
                 this._editorRef && this._editorRef.focus();
                 break;
-            case 'insert_mention_send_composer':
-                this._editorRef && this._editorRef.insertMention(payload.user_id);
-                break;
-            case 'quote':
-                this._insertQuotedMessage(payload.event);
-                break;
-            case 'insert_emoji':
-                this._insertEmoji(payload.emoji);
+            case "send_composer_insert":
+                if (payload.userId) {
+                    this._editorRef && this._editorRef.insertMention(payload.userId);
+                } else if (payload.event) {
+                    this._editorRef && this._editorRef.insertQuotedMessage(payload.event);
+                } else if (payload.text) {
+                    this._editorRef && this._editorRef.insertPlaintext(payload.emoji);
+                }
                 break;
         }
     };
 
-    _insertQuotedMessage(event) {
-        const {model} = this;
-        const {partCreator} = model;
-        const quoteParts = parseEvent(event, partCreator, {isQuotedMessage: true});
-        // add two newlines
-        quoteParts.push(partCreator.newline());
-        quoteParts.push(partCreator.newline());
-        model.transform(() => {
-            const addedLen = model.insert(quoteParts, model.positionForOffset(0));
-            return model.positionForOffset(addedLen, true);
-        });
-        // refocus on composer, as we just clicked "Quote"
-        this._editorRef && this._editorRef.focus();
-    }
-
-    _insertEmoji = (emoji) => {
-        const {model} = this;
-        const {partCreator} = model;
-        const caret = this._editorRef.getCaret();
-        const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
-        model.transform(() => {
-            const addedLen = model.insert([partCreator.plain(emoji)], position);
-            return model.positionForOffset(caret.offset + addedLen, true);
-        });
-    };
-
     _onPaste = (event) => {
         const {clipboardData} = event;
         // Prioritize text on the clipboard over files as Office on macOS puts a bitmap
diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts
index cd32c3743f..0a01e02b9a 100644
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@@ -138,4 +138,9 @@ export enum Action {
      * Fired when an upload is cancelled by the user. Should be used with UploadCanceledPayload.
      */
     UploadCanceled = "upload_canceled",
+
+    /**
+     * Inserts content into the active composer. Should be used with ComposerInsertPayload
+     */
+    ComposerInsert = "composer_insert",
 }
diff --git a/src/dispatcher/payloads/ComposerInsertPayload.ts b/src/dispatcher/payloads/ComposerInsertPayload.ts
new file mode 100644
index 0000000000..9702855432
--- /dev/null
+++ b/src/dispatcher/payloads/ComposerInsertPayload.ts
@@ -0,0 +1,42 @@
+/*
+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 { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+import { ActionPayload } from "../payloads";
+import { Action } from "../actions";
+
+interface IBaseComposerInsertPayload extends ActionPayload {
+    action: Action.ComposerInsert,
+}
+
+interface IComposerInsertMentionPayload extends IBaseComposerInsertPayload {
+    userId: string;
+}
+
+interface IComposerInsertQuotePayload extends IBaseComposerInsertPayload {
+    event: MatrixEvent;
+}
+
+interface IComposerInsertPlaintextPayload extends IBaseComposerInsertPayload {
+    text: string;
+}
+
+export type ComposerInsertPayload =
+    IComposerInsertMentionPayload |
+    IComposerInsertQuotePayload |
+    IComposerInsertPlaintextPayload;
+
diff --git a/src/editor/model.ts b/src/editor/model.ts
index 2e70b872e9..8c4a2dbd0d 100644
--- a/src/editor/model.ts
+++ b/src/editor/model.ts
@@ -390,7 +390,7 @@ export default class EditorModel {
         return addLen;
     }
 
-    positionForOffset(totalOffset: number, atPartEnd: boolean) {
+    positionForOffset(totalOffset: number, atPartEnd = false) {
         let currentOffset = 0;
         const index = this._parts.findIndex(part => {
             const partLen = part.text.length;

From 4af7935e35ebb78b128550931c9fe635a90547b4 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 13 Apr 2021 15:11:46 +0100
Subject: [PATCH 0026/1270] fix typos

---
 src/components/views/rooms/EditMessageComposer.js | 2 +-
 src/components/views/rooms/SendMessageComposer.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index 39fafe486c..628e030ddb 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -282,7 +282,7 @@ export default class EditMessageComposer extends React.Component {
 
     onAction = payload => {
         if (payload.action === "edit_composer_insert" && this._editorRef) {
-            if (payload.user_id) {
+            if (payload.userId) {
                 this._editorRef.insertMention(payload.userId);
             } else if (payload.event) {
                 this._editorRef.insertQuotedMessage(payload.event);
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index ab6aac8be8..14893a6bd2 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -488,7 +488,7 @@ export default class SendMessageComposer extends React.Component {
                 } else if (payload.event) {
                     this._editorRef && this._editorRef.insertQuotedMessage(payload.event);
                 } else if (payload.text) {
-                    this._editorRef && this._editorRef.insertPlaintext(payload.emoji);
+                    this._editorRef && this._editorRef.insertPlaintext(payload.text);
                 }
                 break;
         }

From 86b6fc3473279e56905a9190abe689f620bd3a92 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 13 Apr 2021 15:15:11 +0100
Subject: [PATCH 0027/1270] delint

---
 src/components/views/rooms/SendMessageComposer.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 14893a6bd2..efb3dd3754 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -30,7 +30,6 @@ import {
 import {CommandPartCreator} from '../../../editor/parts';
 import BasicMessageComposer from "./BasicMessageComposer";
 import ReplyThread from "../elements/ReplyThread";
-import {parseEvent} from '../../../editor/deserialize';
 import {findEditableEvent} from '../../../utils/EventUtils';
 import SendHistoryManager from "../../../SendHistoryManager";
 import {CommandCategories, getCommand} from '../../../SlashCommands';

From 61a260cd405eacac4c52777bd048657a9fda3702 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 18 Apr 2021 15:40:56 +0200
Subject: [PATCH 0028/1270] Format mxid

---
 res/css/views/messages/_SenderProfile.scss    | 12 ++++++
 .../views/messages/SenderProfile.js           | 43 ++++++++++++++-----
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss
index 655cb39489..e3a38bad6d 100644
--- a/res/css/views/messages/_SenderProfile.scss
+++ b/res/css/views/messages/_SenderProfile.scss
@@ -15,6 +15,18 @@ limitations under the License.
 */
 
 .mx_SenderProfile_name {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.mx_SenderProfile_displayName {
     font-weight: 600;
 }
 
+.mx_SenderProfile_mxid {
+    font-weight: 600;
+    font-family: monospace;
+    font-size: 1rem;
+    color: gray;
+}
diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js
index bd10526799..264d4ed3de 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -89,7 +89,21 @@ export default class SenderProfile extends React.Component {
     render() {
         const {mxEvent} = this.props;
         const colorClass = getUserNameColorClass(mxEvent.getSender());
-        const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+
+        let disambiguate;
+        let displayName;
+        let mxid;
+
+        const sender = mxEvent.sender;
+        if (sender) {
+            disambiguate = sender.disambiguate;
+            displayName = sender.rawDisplayName;
+            mxid = sender.userId;
+        } else {
+            disambiguate = false;
+            displayName = mxEvent.getSender();
+            mxid = mxEvent.getSender();
+        }
         const {msgtype} = mxEvent.getContent();
 
         if (msgtype === 'm.emote') {
@@ -108,20 +122,29 @@ export default class SenderProfile extends React.Component {
             />;
         }
 
-        const nameElem = name || '';
-
-        // Name + flair
-        const nameFlair = 
-            
-                { nameElem }
+        const displayNameElement = (
+            
+                { displayName || '' }
             
-            { flair }
-        ;
+        );
+
+        let mxidElement;
+        if (disambiguate) {
+            mxidElement = (
+                
+                    { `[${mxid || ""}]` }
+                
+            );
+        }
 
         return (
             

                 

-                    { nameFlair }
+                    

+                        { displayNameElement }
+                        { mxidElement }
+                        { flair }
+                    

                 

             

         );

From 39eb487f49718453ac152d97119f764527a67821 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 20 Apr 2021 11:09:03 +0200
Subject: [PATCH 0029/1270] TS conversion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../{SenderProfile.js => SenderProfile.tsx}   | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)
 rename src/components/views/messages/{SenderProfile.js => SenderProfile.tsx} (82%)

diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.tsx
similarity index 82%
rename from src/components/views/messages/SenderProfile.js
rename to src/components/views/messages/SenderProfile.tsx
index 264d4ed3de..fa635eaedb 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -15,26 +15,37 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import Flair from '../elements/Flair.js';
 import FlairStore from '../../../stores/FlairStore';
 import {getUserNameColorClass} from '../../../utils/FormattingUtils';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import MatrixEvent from "matrix-js-sdk/src/models/event";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+    onClick(): void;
+    enableFlair: boolean;
+}
+
+interface IState {
+    userGroups;
+    relatedGroups;
+}
 
 @replaceableComponent("views.messages.SenderProfile")
-export default class SenderProfile extends React.Component {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired, // event whose sender we're showing
-        onClick: PropTypes.func,
-    };
-
+export default class SenderProfile extends React.Component {
     static contextType = MatrixClientContext;
+    unmounted: boolean;
 
-    state = {
-        userGroups: null,
-        relatedGroups: [],
-    };
+    constructor(props: IProps) {
+        super(props)
+
+        this.state = {
+            userGroups: null,
+            relatedGroups: [],
+        };
+    }
 
     componentDidMount() {
         this.unmounted = false;
@@ -89,28 +100,17 @@ export default class SenderProfile extends React.Component {
     render() {
         const {mxEvent} = this.props;
         const colorClass = getUserNameColorClass(mxEvent.getSender());
-
-        let disambiguate;
-        let displayName;
-        let mxid;
-
-        const sender = mxEvent.sender;
-        if (sender) {
-            disambiguate = sender.disambiguate;
-            displayName = sender.rawDisplayName;
-            mxid = sender.userId;
-        } else {
-            disambiguate = false;
-            displayName = mxEvent.getSender();
-            mxid = mxEvent.getSender();
-        }
         const {msgtype} = mxEvent.getContent();
 
+        const disambiguate = mxEvent.sender?.disambiguate;
+        const displayName = mxEvent.sender?.rawDisplayName || mxEvent.getSender() || "";
+        const mxid = mxEvent.sender?.userId || mxEvent.getSender() || "";
+
         if (msgtype === 'm.emote') {
             return ; // emote message must include the name so don't duplicate it
         }
 
-        let flair = 
;
+        let flair;
         if (this.props.enableFlair) {
             const displayedGroups = this._getDisplayedGroups(
                 this.state.userGroups, this.state.relatedGroups,
@@ -124,7 +124,7 @@ export default class SenderProfile extends React.Component {
 
         const displayNameElement = (
             
-                { displayName || '' }
+                { displayName }
             
         );
 
@@ -132,7 +132,7 @@ export default class SenderProfile extends React.Component {
         if (disambiguate) {
             mxidElement = (
                 
-                    { `[${mxid || ""}]` }
+                    { `[${mxid}]` }
                 
             );
         }

From faca498523460e59215bbe819521fcda01069729 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 20 Apr 2021 11:12:16 +0200
Subject: [PATCH 0030/1270] Don't use gap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_SenderProfile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss
index e3a38bad6d..d7763cda08 100644
--- a/res/css/views/messages/_SenderProfile.scss
+++ b/res/css/views/messages/_SenderProfile.scss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_SenderProfile_name {
     display: flex;
     align-items: center;
-    gap: 5px;
 }
 
 .mx_SenderProfile_displayName {
@@ -29,4 +28,5 @@ limitations under the License.
     font-family: monospace;
     font-size: 1rem;
     color: gray;
+    margin-left: 5px;
 }

From 4e1409dc2c7258816e51efb204a09ef608055117 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 20 Apr 2021 11:40:50 +0200
Subject: [PATCH 0031/1270] Add private

Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
 src/components/views/messages/SenderProfile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index fa635eaedb..f0dd77f746 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -36,7 +36,7 @@ interface IState {
 @replaceableComponent("views.messages.SenderProfile")
 export default class SenderProfile extends React.Component {
     static contextType = MatrixClientContext;
-    unmounted: boolean;
+    private unmounted: boolean;
 
     constructor(props: IProps) {
         super(props)

From ffcd79f4a3215c1153e50ec599a8cd18b2d1e5a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 21 Apr 2021 17:34:03 +0200
Subject: [PATCH 0032/1270] Remove brackets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/SenderProfile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index f0dd77f746..b2bfe00168 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -132,7 +132,7 @@ export default class SenderProfile extends React.Component {
         if (disambiguate) {
             mxidElement = (
                 
-                    { `[${mxid}]` }
+                    { mxid }
                 
             );
         }

From eee1294374c568ee3e9c956b5fb3acaf537918a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 21 Apr 2021 17:37:25 +0200
Subject: [PATCH 0033/1270] Make both have the same baseline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_SenderProfile.scss      | 5 -----
 src/components/views/messages/SenderProfile.tsx | 8 +++-----
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss
index d7763cda08..14e8f6583f 100644
--- a/res/css/views/messages/_SenderProfile.scss
+++ b/res/css/views/messages/_SenderProfile.scss
@@ -14,11 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SenderProfile_name {
-    display: flex;
-    align-items: center;
-}
-
 .mx_SenderProfile_displayName {
     font-weight: 600;
 }
diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index b2bfe00168..70040e4ef7 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -140,11 +140,9 @@ export default class SenderProfile extends React.Component {
         return (
             

                 

-                    

-                        { displayNameElement }
-                        { mxidElement }
-                        { flair }
-                    

+                    { displayNameElement }
+                    { mxidElement }
+                    { flair }
                 

             

         );

From 9658a760c8bd96dd91498d064e7898c5a70fe19f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 21 Apr 2021 17:41:21 +0200
Subject: [PATCH 0034/1270] Use timestamp color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_SenderProfile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss
index 14e8f6583f..378d9e6f1a 100644
--- a/res/css/views/messages/_SenderProfile.scss
+++ b/res/css/views/messages/_SenderProfile.scss
@@ -22,6 +22,6 @@ limitations under the License.
     font-weight: 600;
     font-family: monospace;
     font-size: 1rem;
-    color: gray;
+    color: $event-timestamp-color;
     margin-left: 5px;
 }

From 55365e632b524015f3dca528e18d2c593861bf0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Thu, 22 Apr 2021 07:52:39 +0200
Subject: [PATCH 0035/1270] Use the correct selector in E2EE tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 test/end-to-end-tests/src/usecases/timeline.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/end-to-end-tests/src/usecases/timeline.js b/test/end-to-end-tests/src/usecases/timeline.js
index 3889dce108..01dc618571 100644
--- a/test/end-to-end-tests/src/usecases/timeline.js
+++ b/test/end-to-end-tests/src/usecases/timeline.js
@@ -122,7 +122,7 @@ function getAllEventTiles(session) {
 }
 
 async function getMessageFromEventTile(eventTile) {
-    const senderElement = await eventTile.$(".mx_SenderProfile_name");
+    const senderElement = await eventTile.$(".mx_SenderProfile_displayName");
     const className = await (await eventTile.getProperty("className")).jsonValue();
     const classNames = className.split(" ");
     const bodyElement = await eventTile.$(".mx_EventTile_body");

From 3201ed2f0fe0e378c741d57d9a147d79b267b842 Mon Sep 17 00:00:00 2001
From: Ayush PS 
Date: Mon, 26 Apr 2021 01:40:10 +0530
Subject: [PATCH 0036/1270] Added color scheme for the numbers

---
 res/css/views/voip/_DialPadContextMenu.scss  | 2 +-
 res/themes/dark/css/_dark.scss               | 3 ++-
 res/themes/legacy-dark/css/_legacy-dark.scss | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index c400060b6c..9879b7da1c 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -30,7 +30,7 @@ limitations under the License.
     height: 1.5em;
     font-size: 18px;
     font-weight: 600;
-    max-width: 150px;
+    max-width: 155px;
     overflow: auto;
 }
 
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 42d592c1e1..b83bd52f76 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -114,7 +114,8 @@ $voipcall-plinth-color: #21262c;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
-$dialpad-button-bg-color: #545454;
+$dialpad-button-bg-color: #6F7882;
+;
 
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index ae98141d06..ff85375d35 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -111,7 +111,8 @@ $voipcall-plinth-color: #f2f5f8;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
-$dialpad-button-bg-color: #545454;
+$dialpad-button-bg-color: #6F7882;
+;
 
 $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $roomlist-button-bg-color;

From fa534e4755df403ee23f82ecd420b94c8c184d79 Mon Sep 17 00:00:00 2001
From: Germain Souquet 
Date: Tue, 27 Apr 2021 14:47:56 +0100
Subject: [PATCH 0037/1270] Add room intro warning when e2ee is not enabled

---
 res/css/views/rooms/_NewRoomIntro.scss      | 20 ++++++++++++++++++++
 src/components/views/rooms/NewRoomIntro.tsx | 20 ++++++++++++++++++++
 src/i18n/strings/en_EN.json                 |  1 +
 3 files changed, 41 insertions(+)

diff --git a/res/css/views/rooms/_NewRoomIntro.scss b/res/css/views/rooms/_NewRoomIntro.scss
index 9c2a428cb3..e9d80c48c9 100644
--- a/res/css/views/rooms/_NewRoomIntro.scss
+++ b/res/css/views/rooms/_NewRoomIntro.scss
@@ -69,4 +69,24 @@ limitations under the License.
         font-size: $font-15px;
         color: $secondary-fg-color;
     }
+
+    .mx_NewRoomIntro_message:not(:first-child) {
+        padding-top: 1em;
+        margin-top: 1em;
+        border-top: 1px solid currentColor;
+    }
+
+    .mx_NewRoomIntro_message[role=alert]::before {
+        --size: 25px;
+        content: "!";
+        float: left;
+        border-radius: 50%;
+        width: var(--size);
+        height: var(--size);
+        line-height: var(--size);
+        text-align: center;
+        background: $button-danger-bg-color;
+        color: #fff;
+        margin-right: calc(var(--size) / 2);
+    }
 }
diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx
index 3f6054304d..9b003ade89 100644
--- a/src/components/views/rooms/NewRoomIntro.tsx
+++ b/src/components/views/rooms/NewRoomIntro.tsx
@@ -31,6 +31,14 @@ import dis from "../../../dispatcher/dispatcher";
 import SpaceStore from "../../../stores/SpaceStore";
 import {showSpaceInvite} from "../../../utils/space";
 
+import { privateShouldBeEncrypted } from "../../../createRoom";
+
+function hasExpectedEncryptionSettings(room): boolean {
+    const isEncrypted: boolean = room._client.isRoomEncrypted(room.roomId);
+    const isPublic: boolean = room.getJoinRule() === "public";
+    return isPublic || !privateShouldBeEncrypted() || isEncrypted;
+}
+
 const NewRoomIntro = () => {
     const cli = useContext(MatrixClientContext);
     const {room, roomId} = useContext(RoomContext);
@@ -168,6 +176,18 @@ const NewRoomIntro = () => {
 
     return 

         { body }
+
+        { !hasExpectedEncryptionSettings(room) && 

+            {_t("Messages in this room are not end-to-end encrypted. " +
+                    "Messages sent in an unencrypted room can be seen by the server and third parties. " +
+                    "Learn more about encryption.", {},
+            {
+                a: sub => {sub},
+            })}
+
+        
}
     
;
 };
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index c6f7a8d25e..7ea9227938 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1490,6 +1490,7 @@
     "Invite to just this room": "Invite to just this room",
     "Add a photo, so people can easily spot your room.": "Add a photo, so people can easily spot your room.",
     "This is the start of .": "This is the start of .",
+    "Messages in this room are not end-to-end encrypted. Messages sent in an unencrypted room can be seen by the server and third parties. Learn more about encryption.": "Messages in this room are not end-to-end encrypted. Messages sent in an unencrypted room can be seen by the server and third parties. Learn more about encryption.",
     "No pinned messages.": "No pinned messages.",
     "Loading...": "Loading...",
     "Pinned Messages": "Pinned Messages",

From 7509481bb9339e038027efa6564df9746b73518a Mon Sep 17 00:00:00 2001
From: Ayush PS 
Date: Wed, 28 Apr 2021 02:46:43 +0530
Subject: [PATCH 0038/1270] Added the LTR support for the dialpad

---
 res/css/views/voip/_DialPadContextMenu.scss        | 14 ++++++++++++--
 .../views/context_menus/DialpadContextMenu.tsx     | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index 9879b7da1c..c01ce0f2d9 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -30,8 +30,18 @@ limitations under the License.
     height: 1.5em;
     font-size: 18px;
     font-weight: 600;
-    max-width: 155px;
-    overflow: auto;
+    max-width: 150px;
+    border: none;
+    margin: 0px;
+  
+}
+.mx_DialPadContextMenu_dialled input{
+    font-size: 18px;
+    font-weight: 600;
+    overflow: hidden;
+    text-align: left;
+    direction: rtl;
+    background-color: rgb(0, 0, 0, 0);
 }
 
 .mx_DialPadContextMenu_dialPad {
diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx
index 17abce0c61..0a1d8184f2 100644
--- a/src/components/views/context_menus/DialpadContextMenu.tsx
+++ b/src/components/views/context_menus/DialpadContextMenu.tsx
@@ -18,6 +18,7 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import Field from "../elements/Field";
 import Dialpad from '../voip/DialPad';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
@@ -44,13 +45,23 @@ export default class DialpadContextMenu extends React.Component
         this.setState({value: this.state.value + digit});
     }
 
+    onChange = (ev) => {
+        this.setState({value: ev.target.value});
+    }
+    
+
     render() {
         return 
             

                 

                     {_t("Dial pad")}
                 

-                
{this.state.value}

+                

+                    
+                
             

             

             


From bd602e7089c0fb71a12deb3ed5c43f7ab4fa1763 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Thu, 29 Apr 2021 18:13:06 -0400
Subject: [PATCH 0039/1270] Hide world readable history option in encrypted
 rooms

Signed-off-by: Robin Townsend 
---
 .../tabs/room/SecurityRoomSettingsTab.tsx     | 50 +++++++++++--------
 src/i18n/strings/en_EN.json                   |  4 +-
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index 02bbcfb751..21b132bac7 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -324,6 +324,33 @@ export default class SecurityRoomSettingsTab extends React.Component
                 

@@ -334,28 +361,7 @@ export default class SecurityRoomSettingsTab extends React.Component
             

         );
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 85e8e54258..37ecfa51a8 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1396,11 +1396,11 @@
     "Only people who have been invited": "Only people who have been invited",
     "Anyone who knows the room's link, apart from guests": "Anyone who knows the room's link, apart from guests",
     "Anyone who knows the room's link, including guests": "Anyone who knows the room's link, including guests",
-    "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.",
-    "Anyone": "Anyone",
     "Members only (since the point in time of selecting this option)": "Members only (since the point in time of selecting this option)",
     "Members only (since they were invited)": "Members only (since they were invited)",
     "Members only (since they joined)": "Members only (since they joined)",
+    "Anyone": "Anyone",
+    "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.",
     "Who can read history?": "Who can read history?",
     "Security & Privacy": "Security & Privacy",
     "Once enabled, encryption cannot be disabled.": "Once enabled, encryption cannot be disabled.",

From 192c0c4941a1aecad61b372d94c1759641e20b7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 30 Apr 2021 11:01:34 +0200
Subject: [PATCH 0040/1270] Fix method name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../settings/tabs/user/PreferencesUserSettingsTab.tsx  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index 24e4d8099e..bc2c120654 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -236,12 +236,12 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
 
                 

                     {_t("Keybindings")}
-                    {this._renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
                 

 
                 

                     {_t("Displaying time")}
-                    {this._renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
                 

 
                 

@@ -251,17 +251,17 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
 
                 

                     {_t("Code blocks")}
-                    {this._renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
                 

 
                 

                     {_t("Images, GIFs and videos")}
-                    {this._renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
                 

 
                 

                     {_t("Hide things on the timeline")}
-                    {this._renderGroup(PreferencesUserSettingsTab.THINGS_TO_HIDE_ON_TIMELINE_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.THINGS_TO_HIDE_ON_TIMELINE_SETTINGS)}
                 

 
                 


From 2c7139fb4de1ca37bb674718651d02cd2c4fcba4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 30 Apr 2021 11:03:22 +0200
Subject: [PATCH 0041/1270] Merge timeline section into one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../tabs/user/PreferencesUserSettingsTab.tsx        | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index bc2c120654..404bc974be 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -71,7 +71,7 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
         'autoplayGifsAndVideos',
         'showImages',
     ];
-    static THINGS_TO_HIDE_ON_TIMELINE_SETTINGS = [
+    static TIMELINE_SETTINGS = [
         'showTypingNotifications',
         'showRedactions',
         'showReadReceipts',
@@ -79,14 +79,10 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
         'showDisplaynameChanges',
         'showChatEffects',
         'showAvatarChanges',
-    ];
-
-    static TIMELINE_SETTINGS = [
+        'Pill.shouldShowPillAvatar',
         'TextualBody.enableBigEmoji',
         'scrollToBottomOnMessageSent',
-        'Pill.shouldShowPillAvatar',
     ];
-
     static GENERAL_SETTINGS = [
         'TagPanel.enableTagPanel',
         'promptBeforeInviteUnknownUsers',
@@ -259,11 +255,6 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
                     {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
                 

 
-                

-                    {_t("Hide things on the timeline")}
-                    {this.renderGroup(PreferencesUserSettingsTab.THINGS_TO_HIDE_ON_TIMELINE_SETTINGS)}
-                

-
                 

                     {_t("Timeline")}
                     {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}

From 70c8c6477248466c2bdf0528da709124d886d8c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 30 Apr 2021 11:03:55 +0200
Subject: [PATCH 0042/1270] Rename to Keyboard shortcuts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../views/settings/tabs/user/PreferencesUserSettingsTab.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index 404bc974be..7dc25d1879 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -231,7 +231,7 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
                 

 
                 

-                    {_t("Keybindings")}
+                    {_t("Keyboard shortcuts")}
                     {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
                 

 

From 5f6895487f31668cc76f35c5d504533c0caafcdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 30 Apr 2021 11:09:35 +0200
Subject: [PATCH 0043/1270] Rename ctrl+f
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/settings/Settings.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts
index 2a26eeac13..2912f0a8ee 100644
--- a/src/settings/Settings.ts
+++ b/src/settings/Settings.ts
@@ -384,7 +384,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
     },
     "ctrlFForSearch": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: isMac ? _td("Use Command + F to search") : _td("Use Ctrl + F to search"),
+        displayName: isMac ? _td("Use Command + F to search current room") : _td("Use Ctrl + F to search current room"),
         default: false,
     },
     "MessageComposerInput.ctrlEnterToSend": {

From e52fd3791e18d5e42ce5f2d2a50904d4430ffacc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 30 Apr 2021 11:10:45 +0200
Subject: [PATCH 0044/1270] i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/i18n/strings/en_EN.json | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 69e77cf1bc..2e21016933 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -823,8 +823,8 @@
     "Enable big emoji in chat": "Enable big emoji in chat",
     "Send typing notifications": "Send typing notifications",
     "Show typing notifications": "Show typing notifications",
-    "Use Command + F to search": "Use Command + F to search",
-    "Use Ctrl + F to search": "Use Ctrl + F to search",
+    "Use Command + F to search current room": "Use Command + F to search current room",
+    "Use Ctrl + F to search current room": "Use Ctrl + F to search current room",
     "Use Command + Enter to send a message": "Use Command + Enter to send a message",
     "Use Ctrl + Enter to send a message": "Use Ctrl + Enter to send a message",
     "Automatically replace plain text Emoji": "Automatically replace plain text Emoji",
@@ -1296,12 +1296,11 @@
     "Show tray icon and minimize window to it on close": "Show tray icon and minimize window to it on close",
     "Preferences": "Preferences",
     "Room list": "Room list",
-    "Keybindings": "Keybindings",
+    "Keyboard shortcuts": "Keyboard shortcuts",
     "Displaying time": "Displaying time",
     "Composer": "Composer",
     "Code blocks": "Code blocks",
     "Images, GIFs and videos": "Images, GIFs and videos",
-    "Hide things on the timeline": "Hide things on the timeline",
     "Timeline": "Timeline",
     "Autocomplete delay (ms)": "Autocomplete delay (ms)",
     "Read Marker lifetime (ms)": "Read Marker lifetime (ms)",

From 330f222dd1a9df7aafe4488110be747d03fc5515 Mon Sep 17 00:00:00 2001
From: Tulir Asokan 
Date: Sat, 1 May 2021 16:11:30 +0300
Subject: [PATCH 0045/1270] Remove redundant code and move
 presentableTextForFile out of MFileBody

Signed-off-by: Tulir Asokan 
---
 src/components/views/messages/MFileBody.js    | 62 +++++++++---------
 .../views/messages/MImageReplyBody.js         | 24 +++----
 src/components/views/rooms/EventTile.tsx      | 37 +----------
 src/components/views/rooms/ReplyPreview.js    |  8 ++-
 src/components/views/rooms/ReplyTile.js       | 64 ++-----------------
 5 files changed, 55 insertions(+), 140 deletions(-)

diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 8f464e08bd..5be4468a28 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -89,6 +89,35 @@ function computedStyle(element) {
     return cssText;
 }
 
+/**
+ * Extracts a human readable label for the file attachment to use as
+ * link text.
+ *
+ * @param {Object} content The "content" key of the matrix event.
+ * @param {boolean} withSize Whether to include size information. Default true.
+ * @return {string} the human readable link text for the attachment.
+ */
+export function presentableTextForFile(content, withSize = true) {
+    let linkText = _t("Attachment");
+    if (content.body && content.body.length > 0) {
+        // The content body should be the name of the file including a
+        // file extension.
+        linkText = content.body;
+    }
+
+    if (content.info && content.info.size && withSize) {
+        // If we know the size of the file then add it as human readable
+        // string to the end of the link text so that the user knows how
+        // big a file they are downloading.
+        // The content.info also contains a MIME-type but we don't display
+        // it since it is "ugly", users generally aren't aware what it
+        // means and the type of the attachment can usually be inferrered
+        // from the file extension.
+        linkText += ' (' + filesize(content.info.size) + ')';
+    }
+    return linkText;
+}
+
 @replaceableComponent("views.messages.MFileBody")
 export default class MFileBody extends React.Component {
     static propTypes = {
@@ -119,35 +148,6 @@ export default class MFileBody extends React.Component {
         this._dummyLink = createRef();
     }
 
-    /**
-     * Extracts a human readable label for the file attachment to use as
-     * link text.
-     *
-     * @param {Object} content The "content" key of the matrix event.
-     * @param {boolean} withSize Whether to include size information. Default true.
-     * @return {string} the human readable link text for the attachment.
-     */
-    presentableTextForFile(content, withSize = true) {
-        let linkText = _t("Attachment");
-        if (content.body && content.body.length > 0) {
-            // The content body should be the name of the file including a
-            // file extension.
-            linkText = content.body;
-        }
-
-        if (content.info && content.info.size && withSize) {
-            // If we know the size of the file then add it as human readable
-            // string to the end of the link text so that the user knows how
-            // big a file they are downloading.
-            // The content.info also contains a MIME-type but we don't display
-            // it since it is "ugly", users generally aren't aware what it
-            // means and the type of the attachment can usually be inferrered
-            // from the file extension.
-            linkText += ' (' + filesize(content.info.size) + ')';
-        }
-        return linkText;
-    }
-
     _getContentUrl() {
         const media = mediaFromContent(this.props.mxEvent.getContent());
         return media.srcHttp;
@@ -161,7 +161,7 @@ export default class MFileBody extends React.Component {
 
     render() {
         const content = this.props.mxEvent.getContent();
-        const text = this.presentableTextForFile(content);
+        const text = presentableTextForFile(content);
         const isEncrypted = content.file !== undefined;
         const fileName = content.body && content.body.length > 0 ? content.body : _t("Attachment");
         const contentUrl = this._getContentUrl();
@@ -173,7 +173,7 @@ export default class MFileBody extends React.Component {
             placeholder = (
                 

                     
-                    {this.presentableTextForFile(content, false)}
+                    {presentableTextForFile(content, false)}
                 

             );
         }
diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js
index cdc78e46e8..5ace22a560 100644
--- a/src/components/views/messages/MImageReplyBody.js
+++ b/src/components/views/messages/MImageReplyBody.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Tulir Asokan 
+Copyright 2020-2021 Tulir Asokan 
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import { _td } from "../../../languageHandler";
+import {_td} from "../../../languageHandler";
 import * as sdk from "../../../index";
 import MImageBody from './MImageBody';
-import MFileBody from "./MFileBody";
+import {presentableTextForFile} from "./MFileBody";
 
 export default class MImageReplyBody extends MImageBody {
     onClick(ev) {
@@ -31,7 +31,7 @@ export default class MImageReplyBody extends MImageBody {
 
     // Don't show "Download this_file.png ..."
     getFileBody() {
-        return MFileBody.prototype.presentableTextForFile.call(this, this.props.mxEvent.getContent());
+        return presentableTextForFile(this.props.mxEvent.getContent());
     }
 
     render() {
@@ -45,15 +45,17 @@ export default class MImageReplyBody extends MImageBody {
         const thumbnail = this._messageContent(contentUrl, this._getThumbUrl(), content);
         const fileBody = this.getFileBody();
         const SenderProfile = sdk.getComponent('messages.SenderProfile');
-        const sender = ;
+        const sender = ;
 
         return 

-            
{ thumbnail }

-            
{ sender }

-            
{ fileBody }

+            
{thumbnail}

+            
{sender}

+            
{fileBody}

         
;
     }
 }
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 19c5a7acaa..4411f94f02 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -247,7 +247,7 @@ interface IProps {
     // It could also be done by subclassing EventTile, but that'd be quite
     // boiilerplatey.  So just make the necessary render decisions conditional
     // for now.
-    tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
+    tileShape?: 'notif' | 'file_grid';
 
     // show twelve hour timestamps
     isTwelveHour?: boolean;
@@ -940,7 +940,7 @@ export default class EventTile extends React.Component {
         }
 
         if (needsSenderProfile) {
-            if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') {
+            if (!this.props.tileShape) {
                 sender =  {
                 );
             }
 
-            case 'reply':
-            case 'reply_preview': {
-                let thread;
-                if (this.props.tileShape === 'reply_preview') {
-                    thread = ReplyThread.makeThread(
-                        this.props.mxEvent,
-                        this.props.onHeightChanged,
-                        this.props.permalinkCreator,
-                        this.replyThread,
-                    );
-                }
-                return (
-                    

-                        { ircTimestamp }
-                        { avatar }
-                        { sender }
-                        { ircPadlock }
-                        

-                            { groupTimestamp }
-                            { groupPadlock }
-                            { thread }
-                            
-                        

-                    

-                );
-            }
             default: {
                 const thread = ReplyThread.makeThread(
                     this.props.mxEvent,
diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js
index 56a6609cc7..222fcea552 100644
--- a/src/components/views/rooms/ReplyPreview.js
+++ b/src/components/views/rooms/ReplyPreview.js
@@ -87,9 +87,11 @@ export default class ReplyPreview extends React.Component {
                 

                 

                 

-                    
+                    
                 

             

         
;
diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js
index 95503493f7..336c5a721b 100644
--- a/src/components/views/rooms/ReplyTile.js
+++ b/src/components/views/rooms/ReplyTile.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Tulir Asokan 
+Copyright 2020-2021 Tulir Asokan 
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,42 +25,8 @@ import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import {MatrixClient} from 'matrix-js-sdk';
 
-import { objectHasDiff } from '../../../utils/objects';
-
-const eventTileTypes = {
-    'm.room.message': 'messages.MessageEvent',
-    'm.sticker': 'messages.MessageEvent',
-    'm.call.invite': 'messages.TextualEvent',
-    'm.call.answer': 'messages.TextualEvent',
-    'm.call.hangup': 'messages.TextualEvent',
-};
-
-const stateEventTileTypes = {
-    'm.room.aliases': 'messages.TextualEvent',
-    // 'm.room.aliases': 'messages.RoomAliasesEvent', // too complex
-    'm.room.canonical_alias': 'messages.TextualEvent',
-    'm.room.create': 'messages.RoomCreate',
-    'm.room.member': 'messages.TextualEvent',
-    'm.room.name': 'messages.TextualEvent',
-    'm.room.avatar': 'messages.RoomAvatarEvent',
-    'm.room.third_party_invite': 'messages.TextualEvent',
-    'm.room.history_visibility': 'messages.TextualEvent',
-    'm.room.encryption': 'messages.TextualEvent',
-    'm.room.topic': 'messages.TextualEvent',
-    'm.room.power_levels': 'messages.TextualEvent',
-    'm.room.pinned_events': 'messages.TextualEvent',
-    'm.room.server_acl': 'messages.TextualEvent',
-    'im.vector.modular.widgets': 'messages.TextualEvent',
-    'm.room.tombstone': 'messages.TextualEvent',
-    'm.room.join_rules': 'messages.TextualEvent',
-    'm.room.guest_access': 'messages.TextualEvent',
-    'm.room.related_groups': 'messages.TextualEvent',
-};
-
-function getHandlerTile(ev) {
-    const type = ev.getType();
-    return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
-}
+import {objectHasDiff} from '../../../utils/objects';
+import {getHandlerTile} from "./EventTile";
 
 class ReplyTile extends React.Component {
     static contextTypes = {
@@ -94,7 +60,7 @@ class ReplyTile extends React.Component {
             return true;
         }
 
-        return !this._propsEqual(this.props, nextProps);
+        return objectHasDiff(this.props, nextProps);
     }
 
     componentWillUnmount() {
@@ -108,28 +74,6 @@ class ReplyTile extends React.Component {
         }
     }
 
-    _propsEqual(objA, objB) {
-        const keysA = Object.keys(objA);
-        const keysB = Object.keys(objB);
-
-        if (keysA.length !== keysB.length) {
-            return false;
-        }
-
-        for (let i = 0; i < keysA.length; i++) {
-            const key = keysA[i];
-
-            if (!objB.hasOwnProperty(key)) {
-                return false;
-            }
-
-            if (objA[key] !== objB[key]) {
-                return false;
-            }
-        }
-        return true;
-    }
-
     onClick(e) {
         // This allows the permalink to be opened in a new tab/window or copied as
         // matrix.to, but also for it to enable routing within Riot when clicked.

From bebcb32e8fb4270632c4c2a2a85a2271a8b121b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 2 May 2021 16:23:35 +0200
Subject: [PATCH 0046/1270] Add dragCallbacks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallView.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 6745713845..65547bb814 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -49,6 +49,13 @@ interface IProps {
         // This is sort of a proxy for a number of things but we currently have no
         // need to control those things separately, so this is simpler.
         pipMode?: boolean;
+
+        // Callbacks for dragging the CallView in PIP mode
+        dragCallbacks?: {
+            onStartMoving: (event: React.MouseEvent) => void;
+            onMoving: (event: React.MouseEvent) => void;
+            onEndMoving: () => void;
+        }
 }
 
 interface IState {

From 8948c7419cdbd587550e20720ea0bb6f11a44358 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 2 May 2021 16:24:47 +0200
Subject: [PATCH 0047/1270] Call dragCallbacks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallView.tsx | 30 ++++++++++++++++----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 65547bb814..c35e62448e 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -623,19 +623,27 @@ export default class CallView extends React.Component {
                 ;
             }
 
-            header = 

-                
-                    
-                
-                

-                    
{callRoom.name}

-                    

-                        {callTypeText}
-                        {secondaryCallInfo}
+            header = (
+                

+                    
+                        
+                    
+                    

+                        
{callRoom.name}

+                        

+                            {callTypeText}
+                            {secondaryCallInfo}
+                        

                     

+                    {headerControls}
                 

-                {headerControls}
-            
;
+            );
             myClassName = 'mx_CallView_pip';
         }
 

From c97bbe11a93eb9c49ce45b4f1a4c2df280b344a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 2 May 2021 16:26:03 +0200
Subject: [PATCH 0048/1270] Prep state and props for dragging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index d31afddec9..8dca5314e5 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -50,6 +50,13 @@ interface IState {
     // Any other call we're displaying: only if the user is on two calls and not viewing either of the rooms
     // they belong to
     secondaryCall: MatrixCall;
+
+    // Position of the CallPreview
+    translationX: number;
+    translationY: number;
+
+    // True if the CallPreview is being dragged
+    moving: boolean;
 }
 
 // Splits a list of calls into one 'primary' one and a list
@@ -106,9 +113,17 @@ export default class CallPreview extends React.Component {
             roomId,
             primaryCall: primaryCall,
             secondaryCall: secondaryCalls[0],
+            translationX: 0,
+            translationY: 0,
+            moving: false,
         };
     }
 
+    private initX = 0;
+    private initY = 0;
+    private lastX = 0;
+    private lastY = 0;
+
     public componentDidMount() {
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         this.dispatcherRef = dis.register(this.onAction);

From f64a9501955e5506b09e35009003133edf268dc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 2 May 2021 16:26:41 +0200
Subject: [PATCH 0049/1270] Prep basic methods for dragging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 8dca5314e5..68fcef6747 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -184,6 +184,29 @@ export default class CallPreview extends React.Component {
         });
     }
 
+    private onStartMoving = (event: React.MouseEvent) => {
+        this.setState({moving: true});
+
+        this.initX = event.pageX - this.lastX;
+        this.initY = event.pageY - this.lastY;
+    }
+
+    private onMoving = (event: React.MouseEvent) => {
+        if (!this.state.moving) return;
+
+        this.lastX = event.pageX - this.initX;
+        this.lastY = event.pageY - this.initY;
+
+        this.setState({
+            translationX: this.lastX,
+            translationY: this.lastY,
+        });
+    }
+
+    private onEndMoving = () => {
+        this.setState({moving: false});
+    }
+
     public render() {
         if (this.state.primaryCall) {
             return (

From 11222e7a467a6e58007ae14e539856a21251bd20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 2 May 2021 16:26:54 +0200
Subject: [PATCH 0050/1270] Wire up dragging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 68fcef6747..499cdfb526 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -209,8 +209,26 @@ export default class CallPreview extends React.Component {
 
     public render() {
         if (this.state.primaryCall) {
+            const translatePixelsX = this.state.translationX + "px";
+            const translatePixelsY = this.state.translationY + "px";
+            const style = {
+                transform: `translateX(${translatePixelsX})
+                            translateY(${translatePixelsY})`,
+            };
+
             return (
-                
+                

+                    
+                

             );
         }
 

From b42872daa409d27ad4634d2418fee2bfa7dccfea Mon Sep 17 00:00:00 2001
From: Ayush PS 
Date: Sun, 2 May 2021 22:10:15 +0530
Subject: [PATCH 0051/1270] Fixed the Dial Pad and finalized the changes

---
 res/css/views/voip/_DialPadContextMenu.scss          |  5 +++--
 .../views/context_menus/DialpadContextMenu.tsx       | 12 +++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index c01ce0f2d9..31327113cf 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -33,14 +33,15 @@ limitations under the License.
     max-width: 150px;
     border: none;
     margin: 0px;
-  
 }
-.mx_DialPadContextMenu_dialled input{
+.mx_DialPadContextMenu_dialled input {
     font-size: 18px;
     font-weight: 600;
     overflow: hidden;
+    max-width: 150px;
     text-align: left;
     direction: rtl;
+    padding: 8px 0px;
     background-color: rgb(0, 0, 0, 0);
 }
 
diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx
index 0a1d8184f2..8879629055 100644
--- a/src/components/views/context_menus/DialpadContextMenu.tsx
+++ b/src/components/views/context_menus/DialpadContextMenu.tsx
@@ -48,7 +48,7 @@ export default class DialpadContextMenu extends React.Component
     onChange = (ev) => {
         this.setState({value: ev.target.value});
     }
-    
+
 
     render() {
         return 
@@ -56,12 +56,10 @@ export default class DialpadContextMenu extends React.Component
                 

                     {_t("Dial pad")}
                 

-                

-                    
-                
+                
             

             

             


From 241e626e96a85fcf48a028f3af418ccd14e5235f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 2 May 2021 20:55:05 +0200
Subject: [PATCH 0052/1270] Don't listen for onMouseLeave
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This would cause problems because the moving element wouldn't catch up with the user

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallView.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index c35e62448e..23a4fcca59 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -629,7 +629,6 @@ export default class CallView extends React.Component {
                     onMouseDown={this.props.dragCallbacks?.onStartMoving}
                     onMouseMove={this.props.dragCallbacks?.onMoving}
                     onMouseUp={this.props.dragCallbacks?.onEndMoving}
-                    onMouseLeave={this.props.dragCallbacks?.onEndMoving}
                 >
                     
                         

From 53b8fd3072f8dddcb4e5e8b44da6d77c3a1e6ac3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 2 May 2021 20:57:18 +0200
Subject: [PATCH 0053/1270] Listen for mousemove on document scale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 499cdfb526..17e2e9cf1a 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -126,12 +126,14 @@ export default class CallPreview extends React.Component {
 
     public componentDidMount() {
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
+        document.addEventListener("mousemove", this.onMoving);
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
     }
 
     public componentWillUnmount() {
         MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
+        document.removeEventListener("mousemove", this.onMoving);
         if (this.roomStoreToken) {
             this.roomStoreToken.remove();
         }
@@ -191,7 +193,7 @@ export default class CallPreview extends React.Component {
         this.initY = event.pageY - this.lastY;
     }
 
-    private onMoving = (event: React.MouseEvent) => {
+    private onMoving = (event: React.MouseEvent | MouseEvent) => {
         if (!this.state.moving) return;
 
         this.lastX = event.pageX - this.initX;

From fca5347668465341ef0757c56de0adb78235741a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 2 May 2021 21:17:59 +0200
Subject: [PATCH 0054/1270] Add preventDefault() and stopPropagation()
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This avoids text being selected while dragging

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 17e2e9cf1a..761458cb4c 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -187,6 +187,9 @@ export default class CallPreview extends React.Component {
     }
 
     private onStartMoving = (event: React.MouseEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+
         this.setState({moving: true});
 
         this.initX = event.pageX - this.lastX;
@@ -194,6 +197,9 @@ export default class CallPreview extends React.Component {
     }
 
     private onMoving = (event: React.MouseEvent | MouseEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+
         if (!this.state.moving) return;
 
         this.lastX = event.pageX - this.initX;

From 51e80dd17228f5645c0b7bbab42206a0bffa43fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 07:50:21 +0200
Subject: [PATCH 0055/1270] Remove onMoving listner from CallView
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is not necessary since we already listen for it in CallPreview

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallView.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 23a4fcca59..cbedfb3a3d 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -53,7 +53,6 @@ interface IProps {
         // Callbacks for dragging the CallView in PIP mode
         dragCallbacks?: {
             onStartMoving: (event: React.MouseEvent) => void;
-            onMoving: (event: React.MouseEvent) => void;
             onEndMoving: () => void;
         }
 }
@@ -627,7 +626,6 @@ export default class CallView extends React.Component {
                 

                     

From 7042eb38ddb7f838b2fe8dc952aef7c02f45e3e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 08:12:54 +0200
Subject: [PATCH 0056/1270] Listen for mouseup on the document
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 2 ++
 src/components/views/voip/CallView.tsx    | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 761458cb4c..aa2e71339e 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -127,6 +127,7 @@ export default class CallPreview extends React.Component {
     public componentDidMount() {
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         document.addEventListener("mousemove", this.onMoving);
+        document.addEventListener("mouseup", this.onEndMoving);
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
     }
@@ -134,6 +135,7 @@ export default class CallPreview extends React.Component {
     public componentWillUnmount() {
         MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
         document.removeEventListener("mousemove", this.onMoving);
+        document.removeEventListener("mouseup", this.onEndMoving);
         if (this.roomStoreToken) {
             this.roomStoreToken.remove();
         }
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index cbedfb3a3d..1f555e5227 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -626,7 +626,6 @@ export default class CallView extends React.Component {
                 

                     
                         

From 24bf1b22a440ef810fac33b975015c65d1a3f03d Mon Sep 17 00:00:00 2001
From: Ayush PS 
Date: Mon, 3 May 2021 13:54:42 +0530
Subject: [PATCH 0057/1270] Removes the override on the Bubble Container

---
 res/css/views/rooms/_EventTile.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 2b3e179c54..5e110f9c6d 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -123,8 +123,6 @@ $left-gutter: 64px;
     .mx_EventTile_line {
         margin-right: 0;
         grid-column: 1 / 3;
-        // override default padding of mx_EventTile_line so that we can be centered
-        padding: 0 !important;
     }
 
     .mx_EventTile_msgOption {

From adcdd72a0838e1eddd736cbafb0cb1883cfdf1bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 15:07:25 +0200
Subject: [PATCH 0058/1270] preventDefault() and stopPropagation() only if
 moving
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index aa2e71339e..3b7a297841 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -199,11 +199,11 @@ export default class CallPreview extends React.Component {
     }
 
     private onMoving = (event: React.MouseEvent | MouseEvent) => {
+        if (!this.state.moving) return;
+
         event.preventDefault();
         event.stopPropagation();
 
-        if (!this.state.moving) return;
-
         this.lastX = event.pageX - this.initX;
         this.lastY = event.pageY - this.initY;
 

From 0851cf4415f3dd04502326909cee1b6400ea73ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 15:16:08 +0200
Subject: [PATCH 0059/1270] Simplifie things
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 6 +-----
 src/components/views/voip/CallView.tsx    | 9 +++------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 3b7a297841..153258d2c8 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -232,11 +232,7 @@ export default class CallPreview extends React.Component {
                         call={this.state.primaryCall}
                         secondaryCall={this.state.secondaryCall}
                         pipMode={true}
-                        dragCallbacks={{
-                            onStartMoving: this.onStartMoving,
-                            onMoving: this.onMoving,
-                            onEndMoving: this.onEndMoving,
-                        }}
+                        onMouseDownOnHeader={this.onStartMoving}
                     />
                 

             );
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 1f555e5227..e8d3666c53 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -50,11 +50,8 @@ interface IProps {
         // need to control those things separately, so this is simpler.
         pipMode?: boolean;
 
-        // Callbacks for dragging the CallView in PIP mode
-        dragCallbacks?: {
-            onStartMoving: (event: React.MouseEvent) => void;
-            onEndMoving: () => void;
-        }
+        // Used for dragging the PiP CallView
+        onMouseDownOnHeader?: (event: React.MouseEvent) => void;
 }
 
 interface IState {
@@ -625,7 +622,7 @@ export default class CallView extends React.Component {
             header = (
                 

                     
                         

From b8cb72345ccbe115ba3bdb861467ee139ecff20d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 15:39:00 +0200
Subject: [PATCH 0060/1270] Remove unnecessary margin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/voip/_CallView.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index 7292e325df..18e7c215cb 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -39,7 +39,6 @@ limitations under the License.
 .mx_CallView_pip {
     width: 320px;
     padding-bottom: 8px;
-    margin-top: 10px;
     background-color: $voipcall-plinth-color;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
     border-radius: 8px;

From fe5fb1885fc95243a9964942877268f7e6eef993 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 15:39:24 +0200
Subject: [PATCH 0061/1270] Add styling for CallPreview and make it fixed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/voip/_CallPreview.scss | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 res/css/views/voip/_CallPreview.scss

diff --git a/res/css/views/voip/_CallPreview.scss b/res/css/views/voip/_CallPreview.scss
new file mode 100644
index 0000000000..92348fb465
--- /dev/null
+++ b/res/css/views/voip/_CallPreview.scss
@@ -0,0 +1,21 @@
+/*
+Copyright 2021 Šimon Brandner 
+
+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_CallPreview {
+    position: fixed;
+    left: 0;
+    top: 0;
+}

From 7faf9eb4ccd56dfe9ab308964471a5ff099c805b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 15:39:37 +0200
Subject: [PATCH 0062/1270] Use styling for CallPreview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/_components.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 0057f8a8fc..c476e577df 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -254,6 +254,7 @@
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_CallViewForRoom.scss";
+@import "./views/voip/_CallPreview.scss";
 @import "./views/voip/_DialPad.scss";
 @import "./views/voip/_DialPadContextMenu.scss";
 @import "./views/voip/_DialPadModal.scss";

From 76f503666c5e7594751302a5a5fabc9babc8a64e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 15:40:12 +0200
Subject: [PATCH 0063/1270] Add default offset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 153258d2c8..74e1815631 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -29,6 +29,9 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import { Action } from '../../../dispatcher/actions';
 
+const DEFAULT_X_OFFSET = 64;
+const DEFAULT_Y_OFFSET = 64;
+
 const SHOW_CALL_IN_STATES = [
     CallState.Connected,
     CallState.InviteSent,
@@ -113,16 +116,16 @@ export default class CallPreview extends React.Component {
             roomId,
             primaryCall: primaryCall,
             secondaryCall: secondaryCalls[0],
-            translationX: 0,
-            translationY: 0,
+            translationX: DEFAULT_X_OFFSET,
+            translationY: DEFAULT_Y_OFFSET,
             moving: false,
         };
     }
 
     private initX = 0;
     private initY = 0;
-    private lastX = 0;
-    private lastY = 0;
+    private lastX = DEFAULT_X_OFFSET;
+    private lastY = DEFAULT_Y_OFFSET;
 
     public componentDidMount() {
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);

From 2c9231641b57ea7d5fa577c9aa9445347360665f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 15:40:59 +0200
Subject: [PATCH 0064/1270] Add ref to callViewWrapper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 74e1815631..4a0ccc93b9 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { createRef } from 'react';
 
 import CallView from "./CallView";
 import RoomViewStore from '../../../stores/RoomViewStore';
@@ -122,6 +122,8 @@ export default class CallPreview extends React.Component {
         };
     }
 
+    private callViewWrapper = createRef();
+
     private initX = 0;
     private initY = 0;
     private lastX = DEFAULT_X_OFFSET;
@@ -230,7 +232,11 @@ export default class CallPreview extends React.Component {
             };
 
             return (
-                

+                

                     
Date: Mon, 3 May 2021 15:43:13 +0200
Subject: [PATCH 0065/1270] Add semicolons to event listeners
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 4a0ccc93b9..366b0d30b3 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -191,7 +191,7 @@ export default class CallPreview extends React.Component {
             primaryCall: primaryCall,
             secondaryCall: secondaryCalls[0],
         });
-    }
+    };
 
     private onStartMoving = (event: React.MouseEvent) => {
         event.preventDefault();
@@ -201,7 +201,7 @@ export default class CallPreview extends React.Component {
 
         this.initX = event.pageX - this.lastX;
         this.initY = event.pageY - this.lastY;
-    }
+    };
 
     private onMoving = (event: React.MouseEvent | MouseEvent) => {
         if (!this.state.moving) return;
@@ -216,11 +216,11 @@ export default class CallPreview extends React.Component {
             translationX: this.lastX,
             translationY: this.lastY,
         });
-    }
+    };
 
     private onEndMoving = () => {
         this.setState({moving: false});
-    }
+    };
 
     public render() {
         if (this.state.primaryCall) {

From d8d380c74de6ff27d9e0b6c764e1db35b583119e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 17:22:45 +0200
Subject: [PATCH 0066/1270] Always keep the PiP CallView on the screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 25 +++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 366b0d30b3..74d43dcb19 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -209,8 +209,29 @@ export default class CallPreview extends React.Component {
         event.preventDefault();
         event.stopPropagation();
 
-        this.lastX = event.pageX - this.initX;
-        this.lastY = event.pageY - this.initY;
+        const width = this.callViewWrapper.current.clientWidth;
+        const height = this.callViewWrapper.current.clientHeight;
+
+        const precalculatedLastX = event.pageX - this.initX;
+        const precalculatedLastY = event.pageY - this.initY;
+
+        // Avoid overflow on the x axis
+        if (precalculatedLastX + width >= window.innerWidth) {
+            this.lastX = window.innerWidth - width;
+        } else if (precalculatedLastX <= 0) {
+            this.lastX = 0;
+        } else {
+            this.lastX = precalculatedLastX;
+        }
+
+        // Avoid overflow on the y axis
+        if (precalculatedLastY + height >= window.innerHeight) {
+            this.lastY = window.innerHeight - height;
+        } else if (precalculatedLastY <= 0) {
+            this.lastY = 0;
+        } else {
+            this.lastY = precalculatedLastY;
+        }
 
         this.setState({
             translationX: this.lastX,

From be2da6376e1c5b3a6be2c23a3bfbe89766e5bbc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 17:49:55 +0200
Subject: [PATCH 0067/1270] Simplifie translation code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 25 ++++++++++++-----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 74d43dcb19..9a9ebd5e92 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -126,8 +126,6 @@ export default class CallPreview extends React.Component {
 
     private initX = 0;
     private initY = 0;
-    private lastX = DEFAULT_X_OFFSET;
-    private lastY = DEFAULT_Y_OFFSET;
 
     public componentDidMount() {
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
@@ -199,8 +197,8 @@ export default class CallPreview extends React.Component {
 
         this.setState({moving: true});
 
-        this.initX = event.pageX - this.lastX;
-        this.initY = event.pageY - this.lastY;
+        this.initX = event.pageX - this.state.translationX;
+        this.initY = event.pageY - this.state.translationY;
     };
 
     private onMoving = (event: React.MouseEvent | MouseEvent) => {
@@ -215,27 +213,30 @@ export default class CallPreview extends React.Component {
         const precalculatedLastX = event.pageX - this.initX;
         const precalculatedLastY = event.pageY - this.initY;
 
+        let translationX;
+        let translationY;
+
         // Avoid overflow on the x axis
         if (precalculatedLastX + width >= window.innerWidth) {
-            this.lastX = window.innerWidth - width;
+            translationX = window.innerWidth - width;
         } else if (precalculatedLastX <= 0) {
-            this.lastX = 0;
+            translationX = 0;
         } else {
-            this.lastX = precalculatedLastX;
+            translationX = precalculatedLastX;
         }
 
         // Avoid overflow on the y axis
         if (precalculatedLastY + height >= window.innerHeight) {
-            this.lastY = window.innerHeight - height;
+            translationY = window.innerHeight - height;
         } else if (precalculatedLastY <= 0) {
-            this.lastY = 0;
+            translationY = 0;
         } else {
-            this.lastY = precalculatedLastY;
+            translationY = precalculatedLastY;
         }
 
         this.setState({
-            translationX: this.lastX,
-            translationY: this.lastY,
+            translationX: translationX,
+            translationY: translationY,
         });
     };
 

From 0bf2b01f84ec490ca48b8d07172202dab7907dcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 18:11:02 +0200
Subject: [PATCH 0068/1270] Keep PiP in the window when resizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 41 ++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 9a9ebd5e92..410b60dcb6 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -29,6 +29,9 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import { Action } from '../../../dispatcher/actions';
 
+const PIP_VIEW_WIDTH = 320;
+const PIP_VIEW_HEIGHT = 180;
+
 const DEFAULT_X_OFFSET = 64;
 const DEFAULT_Y_OFFSET = 64;
 
@@ -116,7 +119,7 @@ export default class CallPreview extends React.Component {
             roomId,
             primaryCall: primaryCall,
             secondaryCall: secondaryCalls[0],
-            translationX: DEFAULT_X_OFFSET,
+            translationX: window.innerWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH,
             translationY: DEFAULT_Y_OFFSET,
             moving: false,
         };
@@ -131,6 +134,7 @@ export default class CallPreview extends React.Component {
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         document.addEventListener("mousemove", this.onMoving);
         document.addEventListener("mouseup", this.onEndMoving);
+        window.addEventListener("resize", this.onWindowSizeChanged);
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
     }
@@ -139,6 +143,7 @@ export default class CallPreview extends React.Component {
         MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
         document.removeEventListener("mousemove", this.onMoving);
         document.removeEventListener("mouseup", this.onEndMoving);
+        window.removeEventListener("resize", this.onWindowSizeChanged);
         if (this.roomStoreToken) {
             this.roomStoreToken.remove();
         }
@@ -146,6 +151,40 @@ export default class CallPreview extends React.Component {
         SettingsStore.unwatchSetting(this.settingsWatcherRef);
     }
 
+    private onWindowSizeChanged = () => {
+        const width = this.callViewWrapper.current.clientWidth || PIP_VIEW_WIDTH;
+        const height = this.callViewWrapper.current.clientHeight || PIP_VIEW_HEIGHT;
+
+        const precalculatedLastX = this.state.translationX;
+        const precalculatedLastY = this.state.translationY;
+
+        let translationX;
+        let translationY;
+
+        // Avoid overflow on the x axis
+        if (precalculatedLastX + width >= window.innerWidth) {
+            translationX = window.innerWidth - width;
+        } else if (precalculatedLastX <= 0) {
+            translationX = 0;
+        } else {
+            translationX = precalculatedLastX;
+        }
+
+        // Avoid overflow on the y axis
+        if (precalculatedLastY + height >= window.innerHeight) {
+            translationY = window.innerHeight - height;
+        } else if (precalculatedLastY <= 0) {
+            translationY = 0;
+        } else {
+            translationY = precalculatedLastY;
+        }
+
+        this.setState({
+            translationX: translationX,
+            translationY: translationY,
+        });
+    }
+
     private onRoomViewStoreUpdate = (payload) => {
         if (RoomViewStore.getRoomId() === this.state.roomId) return;
 

From 941a6e1c1bb48f2214638768f17018f4f0b4e77f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 18:16:36 +0200
Subject: [PATCH 0069/1270] Don't duplicate code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 67 +++++++----------------
 1 file changed, 19 insertions(+), 48 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 410b60dcb6..9ab2b9441a 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -152,36 +152,37 @@ export default class CallPreview extends React.Component {
     }
 
     private onWindowSizeChanged = () => {
+        this.setTranslation(this.state.translationX, this.state.translationY);
+    }
+
+    private setTranslation(inTranslationX: number, inTranslationY: number) {
         const width = this.callViewWrapper.current.clientWidth || PIP_VIEW_WIDTH;
         const height = this.callViewWrapper.current.clientHeight || PIP_VIEW_HEIGHT;
 
-        const precalculatedLastX = this.state.translationX;
-        const precalculatedLastY = this.state.translationY;
-
-        let translationX;
-        let translationY;
+        let outTranslationX;
+        let outTranslationY;
 
         // Avoid overflow on the x axis
-        if (precalculatedLastX + width >= window.innerWidth) {
-            translationX = window.innerWidth - width;
-        } else if (precalculatedLastX <= 0) {
-            translationX = 0;
+        if (inTranslationX + width >= window.innerWidth) {
+            outTranslationX = window.innerWidth - width;
+        } else if (inTranslationX <= 0) {
+            outTranslationX = 0;
         } else {
-            translationX = precalculatedLastX;
+            outTranslationX = inTranslationX;
         }
 
         // Avoid overflow on the y axis
-        if (precalculatedLastY + height >= window.innerHeight) {
-            translationY = window.innerHeight - height;
-        } else if (precalculatedLastY <= 0) {
-            translationY = 0;
+        if (inTranslationY + height >= window.innerHeight) {
+            outTranslationY = window.innerHeight - height;
+        } else if (inTranslationY <= 0) {
+            outTranslationY = 0;
         } else {
-            translationY = precalculatedLastY;
+            outTranslationY = inTranslationY;
         }
 
         this.setState({
-            translationX: translationX,
-            translationY: translationY,
+            translationX: outTranslationX,
+            translationY: outTranslationY,
         });
     }
 
@@ -246,37 +247,7 @@ export default class CallPreview extends React.Component {
         event.preventDefault();
         event.stopPropagation();
 
-        const width = this.callViewWrapper.current.clientWidth;
-        const height = this.callViewWrapper.current.clientHeight;
-
-        const precalculatedLastX = event.pageX - this.initX;
-        const precalculatedLastY = event.pageY - this.initY;
-
-        let translationX;
-        let translationY;
-
-        // Avoid overflow on the x axis
-        if (precalculatedLastX + width >= window.innerWidth) {
-            translationX = window.innerWidth - width;
-        } else if (precalculatedLastX <= 0) {
-            translationX = 0;
-        } else {
-            translationX = precalculatedLastX;
-        }
-
-        // Avoid overflow on the y axis
-        if (precalculatedLastY + height >= window.innerHeight) {
-            translationY = window.innerHeight - height;
-        } else if (precalculatedLastY <= 0) {
-            translationY = 0;
-        } else {
-            translationY = precalculatedLastY;
-        }
-
-        this.setState({
-            translationX: translationX,
-            translationY: translationY,
-        });
+        this.setTranslation(event.pageX - this.initX, event.pageY - this.initY);
     };
 
     private onEndMoving = () => {

From 889b90fbc3cd564f6c6717d365f37e5fc21c2f79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 18:33:24 +0200
Subject: [PATCH 0070/1270] Fix const values
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 9ab2b9441a..b3e66f09b3 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -29,11 +29,11 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import { Action } from '../../../dispatcher/actions';
 
-const PIP_VIEW_WIDTH = 320;
-const PIP_VIEW_HEIGHT = 180;
+const PIP_VIEW_WIDTH = 336;
+const PIP_VIEW_HEIGHT = 232;
 
-const DEFAULT_X_OFFSET = 64;
-const DEFAULT_Y_OFFSET = 64;
+const DEFAULT_X_OFFSET = 16;
+const DEFAULT_Y_OFFSET = 48;
 
 const SHOW_CALL_IN_STATES = [
     CallState.Connected,

From f79339c2dadd86bac266c7f0eab7e3eb0317b479 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 18:36:11 +0200
Subject: [PATCH 0071/1270] Add missing semicolon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index b3e66f09b3..60153732d8 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -153,7 +153,7 @@ export default class CallPreview extends React.Component {
 
     private onWindowSizeChanged = () => {
         this.setTranslation(this.state.translationX, this.state.translationY);
-    }
+    };
 
     private setTranslation(inTranslationX: number, inTranslationY: number) {
         const width = this.callViewWrapper.current.clientWidth || PIP_VIEW_WIDTH;

From 9755da6f0915c8a3dec9726c33f60f4468f88037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 3 May 2021 19:59:51 +0200
Subject: [PATCH 0072/1270] Add ?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/CallPreview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 60153732d8..1b7c7f6e48 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -156,8 +156,8 @@ export default class CallPreview extends React.Component {
     };
 
     private setTranslation(inTranslationX: number, inTranslationY: number) {
-        const width = this.callViewWrapper.current.clientWidth || PIP_VIEW_WIDTH;
-        const height = this.callViewWrapper.current.clientHeight || PIP_VIEW_HEIGHT;
+        const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH;
+        const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT;
 
         let outTranslationX;
         let outTranslationY;

From 73b9ad41da12e1092a850efa32c4e6a296342103 Mon Sep 17 00:00:00 2001
From: Jaiwanth 
Date: Wed, 5 May 2021 12:38:44 +0530
Subject: [PATCH 0073/1270] Navigate to room with maximum notifications when
 clicked on already selected space

---
 src/stores/SpaceStore.tsx                         | 15 +++++++++++++--
 .../notifications/SpaceNotificationState.ts       |  5 +++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 43822007c9..7c0f8cf59b 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -120,8 +120,19 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
      * should not be done when the space switch is done implicitly due to another event like switching room.
      */
     public async setActiveSpace(space: Room | null, contextSwitch = true) {
-        if (space === this.activeSpace || (space && !space?.isSpaceRoom())) return;
-
+        if (space && !space?.isSpaceRoom()) return;
+        if (space === this.activeSpace) {
+            const notificationState = this.getNotificationState(space.roomId);
+            if (notificationState.count) {
+                const roomId = notificationState.getRoomWithMaxNotifications();
+                defaultDispatcher.dispatch({
+                    action: "view_room",
+                    room_id: roomId,
+                    context_switch: true,
+                });
+            }
+            return;
+        }
         this._activeSpace = space;
         this.emit(UPDATE_SELECTED_SPACE, this.activeSpace);
         this.emit(SUGGESTED_ROOMS, this._suggestedRooms = []);
diff --git a/src/stores/notifications/SpaceNotificationState.ts b/src/stores/notifications/SpaceNotificationState.ts
index 61a9701a07..fb04648a2a 100644
--- a/src/stores/notifications/SpaceNotificationState.ts
+++ b/src/stores/notifications/SpaceNotificationState.ts
@@ -53,6 +53,11 @@ export class SpaceNotificationState extends NotificationState {
         this.calculateTotalState();
     }
 
+    public getRoomWithMaxNotifications() {
+        return this.rooms.reduce((prev, curr) =>
+            (prev._notificationCounts.total > curr._notificationCounts.total ? prev : curr)).roomId;
+    }
+
     public destroy() {
         super.destroy();
         for (const state of Object.values(this.states)) {

From bcd1005e3c2ef17e8d6b9212a72d238a639ecbfa Mon Sep 17 00:00:00 2001
From: Jaiwanth 
Date: Wed, 5 May 2021 13:01:14 +0530
Subject: [PATCH 0074/1270] Check truthiness of space

---
 src/stores/SpaceStore.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 7c0f8cf59b..d72ee93956 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -121,7 +121,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
      */
     public async setActiveSpace(space: Room | null, contextSwitch = true) {
         if (space && !space?.isSpaceRoom()) return;
-        if (space === this.activeSpace) {
+        if (space && space === this.activeSpace) {
             const notificationState = this.getNotificationState(space.roomId);
             if (notificationState.count) {
                 const roomId = notificationState.getRoomWithMaxNotifications();

From d3fc047b584836cc2a272c521a6a859eacf89290 Mon Sep 17 00:00:00 2001
From: Jaiwanth 
Date: Wed, 5 May 2021 13:24:06 +0530
Subject: [PATCH 0075/1270] Handle home space

---
 src/stores/SpaceStore.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index d72ee93956..5e6d4c8488 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -132,7 +132,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
                 });
             }
             return;
-        }
+        } else if (space === this.activeSpace) return;
+
         this._activeSpace = space;
         this.emit(UPDATE_SELECTED_SPACE, this.activeSpace);
         this.emit(SUGGESTED_ROOMS, this._suggestedRooms = []);

From 49b61d512f26182e5992b3f2b24193e5e16ff70f Mon Sep 17 00:00:00 2001
From: Jaiwanth 
Date: Wed, 5 May 2021 13:46:11 +0530
Subject: [PATCH 0076/1270] Replicate same behaviour for the home space

---
 src/stores/SpaceStore.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 5e6d4c8488..d307c56889 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -121,8 +121,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
      */
     public async setActiveSpace(space: Room | null, contextSwitch = true) {
         if (space && !space?.isSpaceRoom()) return;
-        if (space && space === this.activeSpace) {
-            const notificationState = this.getNotificationState(space.roomId);
+        if (space === this.activeSpace) {
+            const notificationState = this.getNotificationState(space ? space.roomId : HOME_SPACE);
             if (notificationState.count) {
                 const roomId = notificationState.getRoomWithMaxNotifications();
                 defaultDispatcher.dispatch({
@@ -132,7 +132,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
                 });
             }
             return;
-        } else if (space === this.activeSpace) return;
+        }
 
         this._activeSpace = space;
         this.emit(UPDATE_SELECTED_SPACE, this.activeSpace);

From f367d617c506325237b4f56b76a97819e5f715f8 Mon Sep 17 00:00:00 2001
From: Ayush PS 
Date: Fri, 7 May 2021 14:37:28 +0530
Subject: [PATCH 0077/1270] Added the extra classes

---
 res/css/views/rooms/_EventTile.scss     | 7 +++++++
 src/components/views/rooms/EventTile.js | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 5e110f9c6d..35a5d8fc15 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -123,11 +123,18 @@ $left-gutter: 64px;
     .mx_EventTile_line {
         margin-right: 0;
         grid-column: 1 / 3;
+        // override default padding of mx_EventTile_line so that we can be centered
+        padding: 0 !important;
     }
 
     .mx_EventTile_msgOption {
         grid-column: 2;
     }
+
+    .hidden {
+        // override the overriden padding for hidden events
+        padding-left: 64px !important;
+    }
 }
 
 .mx_EventTile_reply {
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index f6fb83c064..9e8f66705c 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -1101,7 +1101,7 @@ export default class EventTile extends React.Component {
                         { ircTimestamp }
                         { sender }
                         { ircPadlock }
-                        

+                        

                             { groupTimestamp }
                             { groupPadlock }
                             { thread }

From c84338704393d0598eaa30a29fda21ec52a950de Mon Sep 17 00:00:00 2001
From: Ayush PS 
Date: Fri, 7 May 2021 18:32:38 +0530
Subject: [PATCH 0078/1270] Merge branch 'develop' into Bubble-bericht

---
 .eslintrc.js                                  |   1 -
 .gitignore                                    |   1 +
 CHANGELOG.md                                  | 118 +++
 README.md                                     |   2 +-
 package.json                                  |  19 +-
 res/css/_components.scss                      |   3 +
 res/css/structures/_RoomStatusBar.scss        |  97 ++-
 res/css/structures/_SpacePanel.scss           |  33 +-
 res/css/structures/_SpaceRoomDirectory.scss   | 108 +--
 res/css/structures/_SpaceRoomView.scss        | 108 +--
 .../dialogs/_AddExistingToSpaceDialog.scss    | 195 +++--
 res/css/views/elements/_AccessibleButton.scss |   8 +-
 res/css/views/elements/_ImageView.scss        |   3 +-
 res/css/views/elements/_ProgressBar.scss      |   2 +-
 res/css/views/messages/_MFileBody.scss        |   8 +-
 .../views/messages/_MVoiceMessageBody.scss    |  19 +
 res/css/views/messages/_MessageActionBar.scss |   8 +
 .../views/messages/_ReactionsRowButton.scss   |   4 +
 res/css/views/rooms/_EventTile.scss           |   4 -
 .../views/rooms/_VoiceRecordComposerTile.scss |  62 +-
 .../tabs/user/_HelpUserSettingsTab.scss       |  31 +
 .../voice_messages/_PlayPauseButton.scss      |  51 ++
 .../voice_messages/_PlaybackContainer.scss    |  53 ++
 res/css/views/voip/_CallView.scss             |  16 +-
 res/css/views/voip/_VideoFeed.scss            |  24 +-
 res/img/element-icons/pause.svg               |   4 +
 res/img/element-icons/play.svg                |   3 +
 res/img/element-icons/retry.svg               |   3 +
 res/img/element-icons/trashcan.svg            |   3 +
 res/themes/dark/css/_dark.scss                |  20 +-
 res/themes/legacy-dark/css/_legacy-dark.scss  |  20 +-
 .../legacy-light/css/_legacy-light.scss       |  29 +-
 res/themes/light/css/_light.scss              |  31 +-
 scripts/compare-file.js                       |  10 -
 scripts/gen-i18n.js                           | 304 --------
 scripts/prune-i18n.js                         |  68 --
 src/@types/global.d.ts                        |  22 +-
 src/Avatar.ts                                 |  15 +-
 src/BasePlatform.ts                           |   2 +-
 src/CallHandler.tsx                           | 119 +--
 src/CallMediaHandler.js                       |   5 +-
 src/GroupAddressPicker.js                     |  18 +-
 src/IdentityAuthClient.js                     |   2 +-
 src/KeyBindingsManager.ts                     |   6 +-
 src/Login.ts                                  |   7 +-
 src/PasswordReset.js                          |   2 +-
 src/Resend.js                                 |  10 +-
 ...calarAuthClient.js => ScalarAuthClient.ts} |  64 +-
 src/SlashCommands.tsx                         |   4 +-
 src/{Terms.js => Terms.ts}                    |  46 +-
 src/TextForEvent.js                           |  18 +-
 src/Unread.js                                 |   2 +-
 src/VoipUserMapper.ts                         |   6 +-
 ...exDialog.js => ManageEventIndexDialog.tsx} |  34 +-
 .../dialogs/security/CreateKeyBackupDialog.js |   8 +-
 .../security/CreateSecretStorageDialog.js     |  10 +-
 .../dialogs/security/ExportE2eKeysDialog.js   |   7 +-
 .../dialogs/security/ImportE2eKeysDialog.js   |  56 +-
 src/components/structures/FilePanel.js        |   8 +-
 src/components/structures/GroupFilterPanel.js |  20 +-
 src/components/structures/GroupView.js        |  95 +--
 src/components/structures/LeftPanel.tsx       |   4 +-
 src/components/structures/LoggedInView.tsx    |  20 +
 src/components/structures/MatrixChat.tsx      |   4 +-
 src/components/structures/MessagePanel.js     |  26 +-
 src/components/structures/RightPanel.js       |   5 +-
 src/components/structures/RoomSearch.tsx      |  21 +-
 src/components/structures/RoomStatusBar.js    | 155 ++--
 src/components/structures/RoomView.tsx        |  12 +-
 src/components/structures/ScrollPanel.js      |  26 +-
 .../structures/SpaceRoomDirectory.tsx         | 190 +++--
 src/components/structures/SpaceRoomView.tsx   | 189 ++++-
 src/components/structures/TimelinePanel.js    |  20 +-
 src/components/structures/auth/Login.tsx      |   4 +-
 .../structures/auth/Registration.tsx          |   4 +-
 .../auth/{SoftLogout.js => SoftLogout.tsx}    |  49 +-
 .../auth/InteractiveAuthEntryComponents.js    |   4 +-
 src/components/views/avatars/MemberAvatar.tsx |   4 +-
 src/components/views/avatars/RoomAvatar.tsx   |  11 +-
 .../views/context_menus/MessageContextMenu.js |  93 +--
 .../dialogs/AddExistingToSpaceDialog.tsx      | 310 +++++---
 .../views/dialogs/BugReportDialog.js          |   2 +-
 .../views/dialogs/ChangelogDialog.js          |   2 +-
 .../views/dialogs/ConfirmWipeDeviceDialog.js  |   9 +-
 .../views/dialogs/DevtoolsDialog.js           |  94 +--
 .../views/dialogs/IncomingSasDialog.js        |   2 +-
 .../dialogs/IntegrationsDisabledDialog.js     |   9 +-
 .../dialogs/IntegrationsImpossibleDialog.js   |   9 +-
 src/components/views/dialogs/InviteDialog.tsx |   2 +-
 .../dialogs/KeySignatureUploadFailedDialog.js |  10 +-
 .../views/dialogs/MessageEditHistoryDialog.js |   8 +-
 .../views/dialogs/RoomSettingsDialog.js       |   8 +-
 .../views/dialogs/ServerPickerDialog.tsx      |   6 +-
 .../dialogs/SessionRestoreErrorDialog.js      |   2 +-
 .../views/dialogs/StorageEvictedDialog.js     |  10 +-
 .../views/dialogs/UserSettingsDialog.js       |   8 +-
 .../dialogs/VerificationRequestDialog.js      |  12 +-
 .../dialogs/WidgetOpenIDPermissionsDialog.js  |   9 +-
 .../ConfirmDestroyCrossSigningDialog.js       |   9 +-
 .../security/RestoreKeyBackupDialog.js        |  59 +-
 src/components/views/elements/ActionButton.js |   4 +-
 src/components/views/elements/AppTile.js      |   2 +-
 .../views/elements/EditableItemList.js        |  26 +-
 src/components/views/elements/EditableText.js |  16 +-
 src/components/views/elements/ImageView.tsx   | 197 +++--
 .../views/elements/LabelledToggleSwitch.js    |   8 +-
 .../views/elements/LanguageDropdown.js        |   6 +-
 src/components/views/elements/Pill.js         |  24 +-
 .../views/elements/PowerSelector.js           |  15 +-
 .../views/elements/RoomAliasField.js          |  23 +-
 .../views/elements/ServerPicker.tsx           |   4 +-
 src/components/views/elements/TintableSvg.js  |  14 +-
 .../views/groups/GroupMemberList.js           |  12 +-
 .../views/groups/GroupPublicityToggle.js      |   6 +-
 src/components/views/groups/GroupRoomList.js  |  13 +-
 .../views/messages/EditHistoryMessage.js      |   1 -
 src/components/views/messages/MImageBody.js   |  35 +-
 .../messages/MKeyVerificationConclusion.js    |   4 +-
 .../views/messages/MVoiceMessageBody.tsx      | 106 +++
 .../views/messages/MVoiceOrAudioBody.tsx      |  39 +
 .../views/messages/MessageActionBar.js        | 125 ++-
 src/components/views/messages/MessageEvent.js |   6 +-
 .../views/messages/ReactionsRowButton.js      |   3 +-
 src/components/views/messages/TextualBody.js  |  11 +-
 src/components/views/right_panel/UserInfo.tsx |  18 +-
 .../views/room_settings/AliasSettings.js      |  17 +-
 .../room_settings/RoomProfileSettings.js      |  34 +-
 .../views/room_settings/UrlPreviewSettings.js |  14 +-
 src/components/views/rooms/EntityTile.js      |   7 +-
 .../rooms/{EventTile.js => EventTile.tsx}     | 461 ++++++-----
 .../views/rooms/LinkPreviewWidget.js          |   4 +-
 src/components/views/rooms/MemberList.js      |   5 +-
 ...MessageComposer.js => MessageComposer.tsx} | 160 ++--
 .../views/rooms/NotificationBadge.tsx         |   2 +-
 src/components/views/rooms/PinnedEventTile.js |  13 +-
 .../views/rooms/PinnedEventsPanel.js          |  20 +-
 .../views/rooms/ReadReceiptMarker.js          |   3 +-
 src/components/views/rooms/ReplyPreview.js    |   9 +-
 src/components/views/rooms/RoomDetailRow.js   |   8 +-
 src/components/views/rooms/RoomList.tsx       |   8 +-
 .../views/rooms/RoomListNumResults.tsx        |   6 +-
 src/components/views/rooms/RoomSublist.tsx    |   8 +-
 src/components/views/rooms/RoomTile.tsx       |  69 +-
 .../views/rooms/SendMessageComposer.js        |   5 +-
 src/components/views/rooms/Stickerpicker.js   |  38 +-
 ...MemberInfo.js => ThirdPartyMemberInfo.tsx} |  26 +-
 .../views/rooms/VoiceRecordComposerTile.tsx   | 231 ++++--
 src/components/views/settings/ChangeAvatar.js |   2 +-
 .../views/settings/ChangePassword.js          |   4 +-
 .../views/settings/CrossSigningPanel.js       |   2 +-
 src/components/views/settings/DevicesPanel.js |   2 +-
 ...eAdvancedPanel.js => E2eAdvancedPanel.tsx} |   0
 ...EventIndexPanel.js => EventIndexPanel.tsx} | 140 ++--
 .../views/settings/Notifications.js           |  34 +-
 .../views/settings/ProfileSettings.js         |   8 +-
 .../{SetIdServer.js => SetIdServer.tsx}       |  78 +-
 .../views/settings/account/EmailAddresses.js  |  39 +-
 .../views/settings/account/PhoneNumbers.js    |  21 +-
 .../tabs/room/GeneralRoomSettingsTab.js       |  12 +-
 .../tabs/room/NotificationSettingsTab.js      |   6 +-
 ...ettingsTab.js => RolesRoomSettingsTab.tsx} |  71 +-
 ...ingsTab.js => SecurityRoomSettingsTab.tsx} | 144 ++--
 .../tabs/user/GeneralUserSettingsTab.js       |  19 +-
 ...SettingsTab.js => HelpUserSettingsTab.tsx} | 159 ++--
 ...tingsTab.js => MjolnirUserSettingsTab.tsx} |  54 +-
 ...sTab.js => PreferencesUserSettingsTab.tsx} |  64 +-
 .../tabs/user/SecurityUserSettingsTab.js      |  21 +-
 .../tabs/user/VoiceUserSettingsTab.js         |  12 +-
 .../views/spaces/SpaceTreeLevel.tsx           |   6 +-
 .../verification/VerificationCancelled.js     |  16 +-
 src/components/views/voice_messages/Clock.tsx |  10 +-
 .../voice_messages/LiveRecordingClock.tsx     |   8 +-
 .../voice_messages/LiveRecordingWaveform.tsx  |   8 +-
 .../views/voice_messages/PlayPauseButton.tsx  |  61 ++
 .../views/voice_messages/PlaybackClock.tsx    |  71 ++
 .../views/voice_messages/PlaybackWaveform.tsx |  68 ++
 .../voice_messages/RecordingPlayback.tsx      |  62 ++
 .../views/voice_messages/Waveform.tsx         |  17 +-
 src/components/views/voip/AudioFeed.tsx       |  97 +++
 .../views/voip/AudioFeedArrayForCall.tsx      |  60 ++
 src/components/views/voip/CallPreview.tsx     |  24 +-
 src/components/views/voip/CallView.tsx        | 162 +++-
 src/components/views/voip/CallViewForRoom.tsx |  16 +-
 src/components/views/voip/IncomingCallBox.tsx |   6 +-
 src/components/views/voip/VideoFeed.tsx       | 125 ++-
 src/customisations/Media.ts                   |   7 +
 src/editor/autocomplete.ts                    |   6 +-
 src/editor/model.ts                           |   2 +-
 src/editor/parts.ts                           |  43 +-
 src/editor/serialize.ts                       |   8 +-
 src/i18n/strings/cs.json                      | 163 ++--
 src/i18n/strings/da.json                      |   6 +-
 src/i18n/strings/de_DE.json                   | 140 ++--
 src/i18n/strings/en_EN.json                   |  68 +-
 src/i18n/strings/en_US.json                   |  10 +-
 src/i18n/strings/eo.json                      |  32 +-
 src/i18n/strings/es.json                      |  25 +-
 src/i18n/strings/et.json                      |  25 +-
 src/i18n/strings/fa.json                      | 322 +++++++-
 src/i18n/strings/fr.json                      |  37 +-
 src/i18n/strings/gl.json                      |  25 +-
 src/i18n/strings/hu.json                      |  25 +-
 src/i18n/strings/it.json                      |  25 +-
 src/i18n/strings/nl.json                      |  25 +-
 src/i18n/strings/ru.json                      |   3 +-
 src/i18n/strings/sq.json                      |  24 +-
 src/i18n/strings/sv.json                      |  25 +-
 src/i18n/strings/tzm.json                     | 121 ++-
 src/i18n/strings/zh_Hant.json                 |  25 +-
 src/indexing/BaseEventIndexManager.ts         |   6 +-
 src/indexing/EventIndex.js                    |  37 +-
 .../{EventIndexPeg.js => EventIndexPeg.ts}    |  19 +-
 src/linkify-matrix.js                         |   2 +-
 src/mjolnir/{BanList.js => BanList.ts}        |   0
 src/mjolnir/{ListRule.js => ListRule.ts}      |   0
 src/mjolnir/{Mjolnir.js => Mjolnir.ts}        |   0
 src/settings/Settings.ts                      |   5 +-
 src/stores/BreadcrumbsStore.ts                |   2 +-
 src/stores/CustomRoomTagStore.js              |   4 +-
 src/stores/GroupFilterOrderStore.js           |   8 +-
 src/stores/RoomViewStore.tsx                  |  19 +-
 src/stores/SpaceStore.tsx                     | 172 +++--
 src/stores/{TypingStore.js => TypingStore.ts} |  24 +-
 src/stores/VoiceRecordingStore.ts             |   2 +
 ...{WidgetEchoStore.js => WidgetEchoStore.ts} |  39 +-
 .../notifications/StaticNotificationState.ts  |   2 +
 src/stores/room-list/RoomListStore.ts         |  22 +-
 src/stores/room-list/algorithms/Algorithm.ts  |   9 +-
 .../algorithms/tag-sorting/RecentAlgorithm.ts | 140 ++--
 .../room-list/filters/VisibilityProvider.ts   |   8 +-
 ...scoveryUtils.js => AutoDiscoveryUtils.tsx} |  32 +-
 src/utils/DMRoomMap.ts                        |   9 +
 src/utils/ErrorUtils.js                       |   6 -
 src/utils/{MatrixGlob.js => MatrixGlob.ts}    |   0
 src/utils/MegolmExportEncryption.js           |   3 +-
 .../{StorageManager.js => StorageManager.ts}  |  12 +-
 src/utils/{Timer.js => Timer.ts}              |  70 +-
 src/utils/{TypeUtils.js => TypeUtils.ts}      |   0
 src/utils/arrays.ts                           |  26 +-
 ...ctor.js => ElementPermalinkConstructor.ts} |  24 +-
 ...Constructor.js => PermalinkConstructor.ts} |   0
 .../{Permalinks.js => Permalinks.ts}          | 167 ++--
 ...tructor.js => SpecPermalinkConstructor.ts} |   0
 src/utils/space.tsx                           |   1 +
 src/voice/Playback.ts                         | 147 ++++
 src/voice/PlaybackClock.ts                    |  78 ++
 src/voice/VoiceRecording.ts                   |  69 +-
 test/CallHandler-test.ts                      | 214 ++++++
 test/ScalarAuthClient-test.js                 |   2 +-
 test/autocomplete/QueryMatcher-test.js        |   2 +-
 .../dialogs/AccessSecretStorageDialog-test.js |  24 +-
 .../elements/MemberEventListSummary-test.js   |   9 +-
 .../components/views/rooms/MemberList-test.js |   2 +-
 test/components/views/rooms/RoomList-test.js  |  10 +-
 test/editor/deserialize-test.js               |   2 +-
 test/end-to-end-tests/src/session.js          |   8 +-
 test/end-to-end-tests/yarn.lock               |   6 +-
 test/stores/SpaceStore-test.ts                | 714 ++++++++++++++++++
 test/test-utils.js                            |  32 +-
 test/utils/MegolmExportEncryption-test.js     |  30 +-
 test/utils/ShieldUtils-test.js                |   6 +-
 test/utils/arrays-test.ts                     |  33 +
 test/utils/test-utils.ts                      |  33 +
 yarn.lock                                     | 113 ++-
 264 files changed, 7383 insertions(+), 3268 deletions(-)
 create mode 100644 res/css/views/messages/_MVoiceMessageBody.scss
 create mode 100644 res/css/views/voice_messages/_PlayPauseButton.scss
 create mode 100644 res/css/views/voice_messages/_PlaybackContainer.scss
 create mode 100644 res/img/element-icons/pause.svg
 create mode 100644 res/img/element-icons/play.svg
 create mode 100644 res/img/element-icons/retry.svg
 create mode 100644 res/img/element-icons/trashcan.svg
 delete mode 100644 scripts/compare-file.js
 delete mode 100755 scripts/gen-i18n.js
 delete mode 100755 scripts/prune-i18n.js
 rename src/{ScalarAuthClient.js => ScalarAuthClient.ts} (84%)
 rename src/{Terms.js => Terms.ts} (87%)
 rename src/async-components/views/dialogs/eventindex/{ManageEventIndexDialog.js => ManageEventIndexDialog.tsx} (90%)
 rename src/components/structures/auth/{SoftLogout.js => SoftLogout.tsx} (92%)
 create mode 100644 src/components/views/messages/MVoiceMessageBody.tsx
 create mode 100644 src/components/views/messages/MVoiceOrAudioBody.tsx
 rename src/components/views/rooms/{EventTile.js => EventTile.tsx} (79%)
 rename src/components/views/rooms/{MessageComposer.js => MessageComposer.tsx} (80%)
 rename src/components/views/rooms/{ThirdPartyMemberInfo.js => ThirdPartyMemberInfo.tsx} (91%)
 rename src/components/views/settings/{E2eAdvancedPanel.js => E2eAdvancedPanel.tsx} (100%)
 rename src/components/views/settings/{EventIndexPanel.js => EventIndexPanel.tsx} (65%)
 rename src/components/views/settings/{SetIdServer.js => SetIdServer.tsx} (89%)
 rename src/components/views/settings/tabs/room/{RolesRoomSettingsTab.js => RolesRoomSettingsTab.tsx} (89%)
 rename src/components/views/settings/tabs/room/{SecurityRoomSettingsTab.js => SecurityRoomSettingsTab.tsx} (79%)
 rename src/components/views/settings/tabs/user/{HelpUserSettingsTab.js => HelpUserSettingsTab.tsx} (64%)
 rename src/components/views/settings/tabs/user/{MjolnirUserSettingsTab.js => MjolnirUserSettingsTab.tsx} (90%)
 rename src/components/views/settings/tabs/user/{PreferencesUserSettingsTab.js => PreferencesUserSettingsTab.tsx} (80%)
 create mode 100644 src/components/views/voice_messages/PlayPauseButton.tsx
 create mode 100644 src/components/views/voice_messages/PlaybackClock.tsx
 create mode 100644 src/components/views/voice_messages/PlaybackWaveform.tsx
 create mode 100644 src/components/views/voice_messages/RecordingPlayback.tsx
 create mode 100644 src/components/views/voip/AudioFeed.tsx
 create mode 100644 src/components/views/voip/AudioFeedArrayForCall.tsx
 rename src/indexing/{EventIndexPeg.js => EventIndexPeg.ts} (94%)
 rename src/mjolnir/{BanList.js => BanList.ts} (100%)
 rename src/mjolnir/{ListRule.js => ListRule.ts} (100%)
 rename src/mjolnir/{Mjolnir.js => Mjolnir.ts} (100%)
 rename src/stores/{TypingStore.js => TypingStore.ts} (84%)
 rename src/stores/{WidgetEchoStore.js => WidgetEchoStore.ts} (71%)
 rename src/utils/{AutoDiscoveryUtils.js => AutoDiscoveryUtils.tsx} (91%)
 rename src/utils/{MatrixGlob.js => MatrixGlob.ts} (100%)
 rename src/utils/{StorageManager.js => StorageManager.ts} (96%)
 rename src/utils/{Timer.js => Timer.ts} (60%)
 rename src/utils/{TypeUtils.js => TypeUtils.ts} (100%)
 rename src/utils/permalinks/{ElementPermalinkConstructor.js => ElementPermalinkConstructor.ts} (82%)
 rename src/utils/permalinks/{PermalinkConstructor.js => PermalinkConstructor.ts} (100%)
 rename src/utils/permalinks/{Permalinks.js => Permalinks.ts} (76%)
 rename src/utils/permalinks/{SpecPermalinkConstructor.js => SpecPermalinkConstructor.ts} (100%)
 create mode 100644 src/voice/Playback.ts
 create mode 100644 src/voice/PlaybackClock.ts
 create mode 100644 test/CallHandler-test.ts
 create mode 100644 test/stores/SpaceStore-test.ts
 create mode 100644 test/utils/test-utils.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index 99695b7a03..4959b133a0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,7 +15,6 @@ module.exports = {
         "prefer-promise-reject-errors": "off",
         "no-async-promise-executor": "off",
         "quotes": "off",
-        "indent": "off",
     },
 
     overrides: [{
diff --git a/.gitignore b/.gitignore
index e1dd7726e1..50aa10fbfd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 /*.log
 package-lock.json
 
+/coverage
 /node_modules
 /lib
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec73756ff9..d459b4e94a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,121 @@
+Changes in [3.19.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.19.0) (2021-04-26)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.19.0-rc.1...v3.19.0)
+
+ * Upgrade to JS SDK 10.0.0
+ * [Release] Dynamic max and min zoom in the new ImageView
+   [\#5927](https://github.com/matrix-org/matrix-react-sdk/pull/5927)
+ * [Release] Add a WheelEvent normalization function
+   [\#5911](https://github.com/matrix-org/matrix-react-sdk/pull/5911)
+ * Add a WheelEvent normalization function
+   [\#5904](https://github.com/matrix-org/matrix-react-sdk/pull/5904)
+ * [Release] Use floats for image background opacity
+   [\#5907](https://github.com/matrix-org/matrix-react-sdk/pull/5907)
+
+Changes in [3.19.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.19.0-rc.1) (2021-04-21)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.18.0...v3.19.0-rc.1)
+
+ * Upgrade to JS SDK 10.0.0-rc.1
+ * Translations update from Weblate
+   [\#5896](https://github.com/matrix-org/matrix-react-sdk/pull/5896)
+ * Fix sticky tags header in room list
+   [\#5895](https://github.com/matrix-org/matrix-react-sdk/pull/5895)
+ * Fix spaces filtering sometimes lagging behind or behaving oddly
+   [\#5893](https://github.com/matrix-org/matrix-react-sdk/pull/5893)
+ * Fix issue with spaces context switching looping and breaking
+   [\#5894](https://github.com/matrix-org/matrix-react-sdk/pull/5894)
+ * Improve RoomList render time when filtering
+   [\#5874](https://github.com/matrix-org/matrix-react-sdk/pull/5874)
+ * Avoid being stuck in a space
+   [\#5891](https://github.com/matrix-org/matrix-react-sdk/pull/5891)
+ * [Spaces] Context switching
+   [\#5795](https://github.com/matrix-org/matrix-react-sdk/pull/5795)
+ * Warn when you attempt to leave room that you are the only member of
+   [\#5415](https://github.com/matrix-org/matrix-react-sdk/pull/5415)
+ * Ensure PersistedElement are unmounted on application logout
+   [\#5884](https://github.com/matrix-org/matrix-react-sdk/pull/5884)
+ * Add missing space in seshat dialog and the corresponding string
+   [\#5866](https://github.com/matrix-org/matrix-react-sdk/pull/5866)
+ * A tiny change to make the Add existing rooms dialog a little nicer
+   [\#5885](https://github.com/matrix-org/matrix-react-sdk/pull/5885)
+ * Remove weird margin from the file panel
+   [\#5889](https://github.com/matrix-org/matrix-react-sdk/pull/5889)
+ * Trigger lazy loading when filtering using spaces
+   [\#5882](https://github.com/matrix-org/matrix-react-sdk/pull/5882)
+ * Fix typo in method call in add existing to space dialog
+   [\#5883](https://github.com/matrix-org/matrix-react-sdk/pull/5883)
+ * New Image View fixes/improvements
+   [\#5872](https://github.com/matrix-org/matrix-react-sdk/pull/5872)
+ * Limit voice recording length
+   [\#5871](https://github.com/matrix-org/matrix-react-sdk/pull/5871)
+ * Clean up add existing to space dialog and include DMs in it too
+   [\#5881](https://github.com/matrix-org/matrix-react-sdk/pull/5881)
+ * Fix unknown slash command error exploding
+   [\#5853](https://github.com/matrix-org/matrix-react-sdk/pull/5853)
+ * Switch to a spec conforming email validation Regexp
+   [\#5852](https://github.com/matrix-org/matrix-react-sdk/pull/5852)
+ * Cleanup unused state in MessageComposer
+   [\#5877](https://github.com/matrix-org/matrix-react-sdk/pull/5877)
+ * Pulse animation for voice messages recording state
+   [\#5869](https://github.com/matrix-org/matrix-react-sdk/pull/5869)
+ * Don't include invisible rooms in notify summary
+   [\#5875](https://github.com/matrix-org/matrix-react-sdk/pull/5875)
+ * Properly disable composer access when recording a voice message
+   [\#5870](https://github.com/matrix-org/matrix-react-sdk/pull/5870)
+ * Stabilise starting a DM with multiple people flow
+   [\#5862](https://github.com/matrix-org/matrix-react-sdk/pull/5862)
+ * Render msgOption only if showReadReceipts is enabled
+   [\#5864](https://github.com/matrix-org/matrix-react-sdk/pull/5864)
+ * Labs: Add quick/cheap "do not disturb" flag
+   [\#5873](https://github.com/matrix-org/matrix-react-sdk/pull/5873)
+ * Fix ReadReceipts animations
+   [\#5836](https://github.com/matrix-org/matrix-react-sdk/pull/5836)
+ * Add tooltips to message previews
+   [\#5859](https://github.com/matrix-org/matrix-react-sdk/pull/5859)
+ * IRC Layout fix layout spacing in replies
+   [\#5855](https://github.com/matrix-org/matrix-react-sdk/pull/5855)
+ * Move user to welcome_page if continuing with previous session
+   [\#5849](https://github.com/matrix-org/matrix-react-sdk/pull/5849)
+ * Improve image view
+   [\#5521](https://github.com/matrix-org/matrix-react-sdk/pull/5521)
+ * Add a button to reset personal encryption state during login
+   [\#5819](https://github.com/matrix-org/matrix-react-sdk/pull/5819)
+ * Fix js-sdk import in SlashCommands
+   [\#5850](https://github.com/matrix-org/matrix-react-sdk/pull/5850)
+ * Fix useRoomPowerLevels hook
+   [\#5854](https://github.com/matrix-org/matrix-react-sdk/pull/5854)
+ * Prevent state events being rendered with invalid state keys
+   [\#5851](https://github.com/matrix-org/matrix-react-sdk/pull/5851)
+ * Give server ACLs a name in 'roles & permissions' tab
+   [\#5838](https://github.com/matrix-org/matrix-react-sdk/pull/5838)
+ * Don't hide notification badge on the home space button as it has no menu
+   [\#5845](https://github.com/matrix-org/matrix-react-sdk/pull/5845)
+ * User Info hide disambiguation as we always show MXID anyway
+   [\#5843](https://github.com/matrix-org/matrix-react-sdk/pull/5843)
+ * Improve kick state to not show if the target was not joined to begin with
+   [\#5846](https://github.com/matrix-org/matrix-react-sdk/pull/5846)
+ * Fix space store wrongly switching to a non-space filter
+   [\#5844](https://github.com/matrix-org/matrix-react-sdk/pull/5844)
+ * Tweak appearance of invite reason
+   [\#5847](https://github.com/matrix-org/matrix-react-sdk/pull/5847)
+ * Update Inter font to v3.18
+   [\#5840](https://github.com/matrix-org/matrix-react-sdk/pull/5840)
+ * Enable sharing historical keys on invite
+   [\#5839](https://github.com/matrix-org/matrix-react-sdk/pull/5839)
+ * Add ability to hide post-login encryption setup with customisation point
+   [\#5834](https://github.com/matrix-org/matrix-react-sdk/pull/5834)
+ * Use LaTeX and TeX delimiters by default
+   [\#5515](https://github.com/matrix-org/matrix-react-sdk/pull/5515)
+ * Clone author's deps fork for Netlify previews
+   [\#5837](https://github.com/matrix-org/matrix-react-sdk/pull/5837)
+ * Show drop file UI only if dragging a file
+   [\#5827](https://github.com/matrix-org/matrix-react-sdk/pull/5827)
+ * Ignore punctuation when filtering rooms
+   [\#5824](https://github.com/matrix-org/matrix-react-sdk/pull/5824)
+ * Resizable CallView
+   [\#5710](https://github.com/matrix-org/matrix-react-sdk/pull/5710)
+
 Changes in [3.18.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0) (2021-04-12)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.18.0-rc.1...v3.18.0)
diff --git a/README.md b/README.md
index 73afe34df0..b3e96ef001 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ Platform Targets:
  * WebRTC features (VoIP and Video calling) are only available in Chrome & Firefox.
  * Mobile Web is not currently a target platform - instead please use the native
    iOS (https://github.com/matrix-org/matrix-ios-kit) and Android
-   (https://github.com/matrix-org/matrix-android-sdk) SDKs.
+   (https://github.com/matrix-org/matrix-android-sdk2) SDKs.
 
 All code lands on the `develop` branch - `master` is only used for stable releases.
 **Please file PRs against `develop`!!**
diff --git a/package.json b/package.json
index 7c190c68bf..be195e2e9e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -23,9 +23,7 @@
     "package.json"
   ],
   "bin": {
-    "reskindex": "scripts/reskindex.js",
-    "matrix-gen-i18n": "scripts/gen-i18n.js",
-    "matrix-prune-i18n": "scripts/prune-i18n.js"
+    "reskindex": "scripts/reskindex.js"
   },
   "main": "./src/index.js",
   "matrix_src_main": "./src/index.js",
@@ -35,7 +33,7 @@
     "prepublishOnly": "yarn build",
     "i18n": "matrix-gen-i18n",
     "prunei18n": "matrix-prune-i18n",
-    "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
+    "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
     "reskindex": "node scripts/reskindex.js -h header",
     "reskindex:watch": "node scripts/reskindex.js -h header -w",
     "rethemendex": "res/css/rethemendex.sh",
@@ -51,7 +49,8 @@
     "lint:types": "tsc --noEmit --jsx react",
     "lint:style": "stylelint 'res/css/**/*.scss'",
     "test": "jest",
-    "test:e2e": "./test/end-to-end-tests/run.sh --app-url http://localhost:8080"
+    "test:e2e": "./test/end-to-end-tests/run.sh --app-url http://localhost:8080",
+    "coverage": "yarn test --coverage"
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
@@ -133,6 +132,7 @@
     "@types/modernizr": "^3.5.3",
     "@types/node": "^14.14.22",
     "@types/pako": "^1.0.1",
+    "@types/parse5": "^6.0.0",
     "@types/qrcode": "^1.3.5",
     "@types/react": "^16.9",
     "@types/react-dom": "^16.9.10",
@@ -160,6 +160,7 @@
     "jest-fetch-mock": "^3.0.3",
     "matrix-mock-request": "^1.2.3",
     "matrix-react-test-utils": "^0.2.2",
+    "matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
     "react-test-renderer": "^16.14.0",
     "rimraf": "^3.0.2",
@@ -189,6 +190,12 @@
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!matrix-js-sdk).+$"
+    ],
+    "collectCoverageFrom": [
+      "/src/**/*.{js,ts,tsx}"
+    ],
+    "coverageReporters": [
+      "text"
     ]
   }
 }
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 253f97bf42..ec9592f3a1 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -161,6 +161,7 @@
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MVideoBody.scss";
+@import "./views/messages/_MVoiceMessageBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
 @import "./views/messages/_MjolnirBody.scss";
@@ -248,6 +249,8 @@
 @import "./views/toasts/_AnalyticsToast.scss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
 @import "./views/verification/_VerificationShowSas.scss";
+@import "./views/voice_messages/_PlayPauseButton.scss";
+@import "./views/voice_messages/_PlaybackContainer.scss";
 @import "./views/voice_messages/_Waveform.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
index 5bf2aee3ae..8cc00aba0f 100644
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomStatusBar {
+.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
     margin-left: 65px;
     min-height: 50px;
 }
@@ -68,6 +68,99 @@ limitations under the License.
     min-height: 58px;
 }
 
+.mx_RoomStatusBar_unsentMessages {
+    > div[role="alert"] {
+        // cheat some basic alignment
+        display: flex;
+        align-items: center;
+        min-height: 70px;
+        margin: 12px;
+        padding-left: 16px;
+        background-color: $header-panel-bg-color;
+        border-radius: 4px;
+    }
+
+    .mx_RoomStatusBar_unsentBadge {
+        margin-right: 12px;
+
+        .mx_NotificationBadge {
+            // Override sizing from the default badge
+            width: 24px !important;
+            height: 24px !important;
+            border-radius: 24px !important;
+
+            .mx_NotificationBadge_count {
+                font-size: $font-16px !important; // override default
+            }
+        }
+    }
+
+    .mx_RoomStatusBar_unsentTitle {
+        color: $warning-color;
+        font-size: $font-15px;
+    }
+
+    .mx_RoomStatusBar_unsentDescription {
+        font-size: $font-12px;
+    }
+
+    .mx_RoomStatusBar_unsentButtonBar {
+        flex-grow: 1;
+        text-align: right;
+        margin-right: 22px;
+        color: $muted-fg-color;
+
+        .mx_AccessibleButton {
+            padding: 5px 10px;
+            padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding
+            display: inline-block;
+            position: relative;
+
+            &:nth-child(2) {
+                border-left: 1px solid $resend-button-divider-color;
+            }
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 10px; // inset for regular button padding
+                background-color: $muted-fg-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+            }
+
+            &.mx_RoomStatusBar_unsentCancelAllBtn::before {
+                mask-image: url('$(res)/img/element-icons/trashcan.svg');
+                width: 12px;
+                height: 16px;
+                top: calc(50% - 8px); // text sizes are dynamic
+            }
+
+            &.mx_RoomStatusBar_unsentResendAllBtn {
+                padding-left: 34px; // 28px from above, but +6px to account for the wider icon
+
+                &::before {
+                    mask-image: url('$(res)/img/element-icons/retry.svg');
+                    width: 18px;
+                    height: 18px;
+                    top: calc(50% - 9px); // text sizes are dynamic
+                }
+            }
+        }
+
+        .mx_InlineSpinner {
+            vertical-align: middle;
+            margin-right: 5px;
+            top: 1px; // just to help the vertical alignment be slightly better
+
+            & + span {
+                margin-right: 10px; // same margin/padding as the rightmost button
+            }
+        }
+    }
+}
+
 .mx_RoomStatusBar_connectionLostBar img {
     padding-left: 10px;
     padding-right: 10px;
@@ -103,7 +196,7 @@ limitations under the License.
 }
 
 .mx_MatrixChat_useCompactLayout {
-    .mx_RoomStatusBar {
+    .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
         min-height: 40px;
     }
 
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 59f2ea947c..c433ccf275 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -79,6 +79,10 @@ $activeBorderColor: $secondary-fg-color;
     .mx_SpaceItem {
         display: inline-flex;
         flex-flow: wrap;
+
+        &.mx_SpaceItem_narrow {
+            align-self: baseline;
+        }
     }
 
     .mx_SpaceItem.collapsed {
@@ -233,7 +237,6 @@ $activeBorderColor: $secondary-fg-color;
 
     .mx_SpacePanel_badgeContainer {
         position: absolute;
-        height: 16px;
 
         // Create a flexbox to make aligning dot badges easier
         display: flex;
@@ -245,23 +248,37 @@ $activeBorderColor: $secondary-fg-color;
 
         .mx_NotificationBadge_dot {
             // make the smaller dot occupy the same width for centering
-            margin-left: 7px;
-            margin-right: 7px;
+            margin: 0 7px;
         }
     }
 
     &.collapsed {
         .mx_SpaceButton {
             .mx_SpacePanel_badgeContainer {
-                right: -3px;
-                top: -3px;
+                right: 0;
+                top: 0;
+
+                .mx_NotificationBadge {
+                    background-clip: padding-box;
+                }
+
+                .mx_NotificationBadge_dot {
+                    margin: 0 -1px 0 0;
+                    border: 3px solid $groupFilterPanel-bg-color;
+                }
+
+                .mx_NotificationBadge_2char,
+                .mx_NotificationBadge_3char {
+                    margin: -5px -5px 0 0;
+                    border: 2px solid $groupFilterPanel-bg-color;
+                }
             }
 
             &.mx_SpaceButton_active .mx_SpacePanel_badgeContainer {
                 // when we draw the selection border we move the relative bounds of our parent
                 // so update our position within the bounds of the parent to maintain position overall
-                right: -6px;
-                top: -6px;
+                right: -3px;
+                top: -3px;
             }
         }
     }
@@ -275,7 +292,7 @@ $activeBorderColor: $secondary-fg-color;
         .mx_SpaceButton:hover,
         .mx_SpaceButton:focus-within,
         .mx_SpaceButton_hasMenuOpen {
-            &:not(.mx_SpaceButton_home) {
+            &:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) {
                 // Hide the badge container on hover because it'll be a menu button
                 .mx_SpacePanel_badgeContainer {
                     width: 0;
diff --git a/res/css/structures/_SpaceRoomDirectory.scss b/res/css/structures/_SpaceRoomDirectory.scss
index dcceee6371..7925686bf1 100644
--- a/res/css/structures/_SpaceRoomDirectory.scss
+++ b/res/css/structures/_SpaceRoomDirectory.scss
@@ -26,7 +26,10 @@ limitations under the License.
     word-break: break-word;
     display: flex;
     flex-direction: column;
+}
 
+.mx_SpaceRoomDirectory,
+.mx_SpaceRoomView_landing {
     .mx_Dialog_title {
         display: flex;
 
@@ -56,65 +59,68 @@ limitations under the License.
         }
     }
 
-    .mx_Dialog_content {
-        .mx_AccessibleButton_kind_link {
-            padding: 0;
-        }
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+    }
 
-        .mx_SearchBox {
-            margin: 24px 0 16px;
-        }
+    .mx_SearchBox {
+        margin: 24px 0 16px;
+    }
 
-        .mx_SpaceRoomDirectory_noResults {
-            text-align: center;
+    .mx_SpaceRoomDirectory_noResults {
+        text-align: center;
 
-            > div {
-                font-size: $font-15px;
-                line-height: $font-24px;
-                color: $secondary-fg-color;
-            }
-        }
-
-        .mx_SpaceRoomDirectory_listHeader {
-            display: flex;
-            min-height: 32px;
-            align-items: center;
+        > div {
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $primary-fg-color;
+            color: $secondary-fg-color;
+        }
+    }
 
-            .mx_AccessibleButton {
-                padding: 2px 8px;
-                font-weight: normal;
+    .mx_SpaceRoomDirectory_listHeader {
+        display: flex;
+        min-height: 32px;
+        align-items: center;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $primary-fg-color;
 
-                & + .mx_AccessibleButton {
-                    margin-left: 16px;
-                }
-            }
+        .mx_AccessibleButton {
+            padding: 4px 12px;
+            font-weight: normal;
 
-            > span {
-                margin-left: auto;
+            & + .mx_AccessibleButton {
+                margin-left: 16px;
             }
         }
 
-        .mx_SpaceRoomDirectory_error {
-            position: relative;
-            font-weight: $font-semi-bold;
-            color: $notice-primary-color;
-            font-size: $font-15px;
-            line-height: $font-18px;
-            margin: 20px auto 12px;
-            padding-left: 24px;
-            width: max-content;
+        .mx_AccessibleButton_kind_danger_outline,
+        .mx_AccessibleButton_kind_primary_outline {
+            padding: 3px 12px; // to account for the 1px border
+        }
 
-            &::before {
-                content: "";
-                position: absolute;
-                height: 16px;
-                width: 16px;
-                left: 0;
-                background-image: url("$(res)/img/element-icons/warning-badge.svg");
-            }
+        > span {
+            margin-left: auto;
+        }
+    }
+
+    .mx_SpaceRoomDirectory_error {
+        position: relative;
+        font-weight: $font-semi-bold;
+        color: $notice-primary-color;
+        font-size: $font-15px;
+        line-height: $font-18px;
+        margin: 20px auto 12px;
+        padding-left: 24px;
+        width: max-content;
+
+        &::before {
+            content: "";
+            position: absolute;
+            height: 16px;
+            width: 16px;
+            left: 0;
+            background-image: url("$(res)/img/element-icons/warning-badge.svg");
         }
     }
 }
@@ -245,11 +251,17 @@ limitations under the License.
             grid-row: 1/3;
 
             .mx_AccessibleButton {
-                padding: 8px 18px;
+                line-height: $font-24px;
+                padding: 4px 16px;
                 display: inline-block;
                 visibility: hidden;
             }
 
+            .mx_AccessibleButton_kind_danger_outline,
+            .mx_AccessibleButton_kind_primary_outline {
+                padding: 3px 16px; // to account for the 1px border
+            }
+
             .mx_Checkbox {
                 display: inline-flex;
                 vertical-align: middle;
diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
index 269f16beb7..ff51e28b7b 100644
--- a/res/css/structures/_SpaceRoomView.scss
+++ b/res/css/structures/_SpaceRoomView.scss
@@ -81,6 +81,16 @@ $SpaceRoomViewInnerWidth: 428px;
             color: $secondary-fg-color;
             margin-top: 12px;
             margin-bottom: 24px;
+            max-width: $SpaceRoomViewInnerWidth;
+        }
+
+        .mx_AddExistingToSpace {
+            max-width: $SpaceRoomViewInnerWidth;
+
+            .mx_AddExistingToSpace_content {
+                height: calc(100vh - 360px);
+                max-height: 400px;
+            }
         }
 
         .mx_SpaceRoomView_buttons {
@@ -228,7 +238,8 @@ $SpaceRoomViewInnerWidth: 428px;
 
             .mx_SpaceRoomView_landing_inviteButton {
                 position: relative;
-                padding-left: 40px;
+                padding: 4px 18px 4px 40px;
+                line-height: $font-24px;
                 height: min-content;
 
                 &::before {
@@ -244,6 +255,27 @@ $SpaceRoomViewInnerWidth: 428px;
                     mask-image: url('$(res)/img/element-icons/room/invite.svg');
                 }
             }
+
+            .mx_SpaceRoomView_landing_settingsButton {
+                position: relative;
+                margin-left: 16px;
+                width: 24px;
+                height: 24px;
+
+                &::before {
+                    position: absolute;
+                    content: "";
+                    left: 0;
+                    top: 0;
+                    height: 24px;
+                    width: 24px;
+                    background: $tertiary-fg-color;
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    mask-image: url('$(res)/img/element-icons/settings.svg');
+                }
+            }
         }
 
         .mx_SpaceRoomView_landing_topic {
@@ -258,80 +290,6 @@ $SpaceRoomViewInnerWidth: 428px;
             background-color: $groupFilterPanel-bg-color;
         }
 
-        .mx_SpaceRoomView_landing_adminButtons {
-            margin-top: 24px;
-
-            .mx_AccessibleButton {
-                position: relative;
-                width: 160px;
-                height: 124px;
-                box-sizing: border-box;
-                padding: 72px 16px 0;
-                border-radius: 12px;
-                border: 1px solid $input-border-color;
-                margin-right: 28px;
-                margin-bottom: 20px;
-                font-size: $font-14px;
-                display: inline-block;
-                vertical-align: bottom;
-
-                &:last-child {
-                    margin-right: 0;
-                }
-
-                &:hover {
-                    background-color: rgba(141, 151, 165, 0.1);
-                }
-
-                &::before, &::after {
-                    position: absolute;
-                    content: "";
-                    left: 16px;
-                    top: 16px;
-                    height: 40px;
-                    width: 40px;
-                    border-radius: 20px;
-                }
-
-                &::after {
-                    mask-position: center;
-                    mask-size: 30px;
-                    mask-repeat: no-repeat;
-                    background: #ffffff; // white icon fill
-                }
-
-                &.mx_SpaceRoomView_landing_addButton {
-                    &::before {
-                        background-color: #ac3ba8;
-                    }
-
-                    &::after {
-                        mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
-                    }
-                }
-
-                &.mx_SpaceRoomView_landing_createButton {
-                    &::before {
-                        background-color: #368bd6;
-                    }
-
-                    &::after {
-                        mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
-                    }
-                }
-
-                &.mx_SpaceRoomView_landing_settingsButton {
-                    &::before {
-                        background-color: #5c56f5;
-                    }
-
-                    &::after {
-                        mask-image: url('$(res)/img/element-icons/settings.svg');
-                    }
-                }
-            }
-        }
-
         .mx_SearchBox {
             margin: 0 0 20px;
         }
diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
index 247df52b4a..524f107165 100644
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
@@ -21,6 +21,66 @@ limitations under the License.
     }
 }
 
+.mx_AddExistingToSpace {
+    .mx_SearchBox {
+        // To match the space around the title
+        margin: 0 0 15px 0;
+        flex-grow: 0;
+    }
+
+    .mx_AddExistingToSpace_content {
+        flex-grow: 1;
+    }
+
+    .mx_AddExistingToSpace_noResults {
+        display: block;
+        margin-top: 24px;
+    }
+
+    .mx_AddExistingToSpace_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_AddExistingToSpace_entry {
+            display: flex;
+            margin-top: 12px;
+
+            .mx_BaseAvatar {
+                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_image {
+            border-radius: 8px;
+        }
+    }
+}
+
 .mx_AddExistingToSpaceDialog {
     width: 480px;
     color: $primary-fg-color;
@@ -41,7 +101,7 @@ limitations under the License.
 
         .mx_BaseAvatar {
             display: inline-flex;
-            margin: 5px 16px 5px 5px;
+            margin: auto 16px auto 5px;
             vertical-align: middle;
         }
 
@@ -100,85 +160,32 @@ limitations under the License.
         }
     }
 
-    .mx_SearchBox {
-        // To match the space around the title
-        margin: 0 0 15px 0;
-        flex-grow: 0;
-    }
-
-    .mx_AddExistingToSpaceDialog_errorText {
-        font-weight: $font-semi-bold;
-        font-size: $font-12px;
-        line-height: $font-15px;
-        color: $notice-primary-color;
-        margin-bottom: 28px;
-    }
-
-    .mx_AddExistingToSpaceDialog_content {
-        flex-grow: 1;
-
-        .mx_AddExistingToSpaceDialog_noResults {
-            display: block;
-            margin-top: 24px;
-        }
-    }
-
-    .mx_AddExistingToSpaceDialog_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_AddExistingToSpaceDialog_entry {
-            display: flex;
-            margin-top: 12px;
-
-            .mx_BaseAvatar {
-                margin-right: 12px;
-            }
-
-            .mx_AddExistingToSpaceDialog_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_AddExistingToSpaceDialog_section_spaces {
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
+    .mx_AddExistingToSpace {
+        display: contents;
     }
 
     .mx_AddExistingToSpaceDialog_footer {
         display: flex;
-        margin-top: 32px;
+        margin-top: 20px;
 
         > span {
             flex-grow: 1;
-            font-size: $font-14px;
+            font-size: $font-12px;
             line-height: $font-15px;
-            font-weight: $font-semi-bold;
+            color: $secondary-fg-color;
 
-            .mx_AccessibleButton {
-                font-size: inherit;
-                display: inline-block;
+            .mx_ProgressBar {
+                height: 8px;
+                width: 100%;
+
+                @mixin ProgressBarBorderRadius 8px;
+            }
+
+            .mx_AddExistingToSpaceDialog_progressText {
+                margin-top: 8px;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $primary-fg-color;
             }
 
             > * {
@@ -186,8 +193,54 @@ limitations under the License.
             }
         }
 
+        .mx_AddExistingToSpaceDialog_error {
+            padding-left: 12px;
+
+            > img {
+                align-self: center;
+            }
+
+            .mx_AddExistingToSpaceDialog_errorHeading {
+                font-weight: $font-semi-bold;
+                font-size: $font-15px;
+                line-height: $font-18px;
+                color: $notice-primary-color;
+            }
+
+            .mx_AddExistingToSpaceDialog_errorCaption {
+                margin-top: 4px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $primary-fg-color;
+            }
+        }
+
         .mx_AccessibleButton {
             display: inline-block;
+            align-self: center;
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            padding: 8px 36px;
+        }
+
+        .mx_AddExistingToSpaceDialog_retryButton {
+            margin-left: 12px;
+            padding-left: 24px;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                background-color: $primary-fg-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/retry.svg');
+                width: 18px;
+                height: 18px;
+                left: 0;
+            }
         }
 
         .mx_AccessibleButton_kind_link {
diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss
index 0075dcb511..2997c83cfd 100644
--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@@ -76,12 +76,16 @@ limitations under the License.
     border: 1px solid $button-danger-bg-color;
 }
 
-.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled,
-.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
+.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
     color: $button-danger-disabled-fg-color;
     background-color: $button-danger-disabled-bg-color;
 }
 
+.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
+    color: $button-danger-disabled-bg-color;
+    border-color: $button-danger-disabled-bg-color;
+}
+
 .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
     padding: 5px 12px;
     color: $button-danger-fg-color;
diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 93ebcc2d56..71035dadc3 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -31,8 +31,7 @@ limitations under the License.
 
 .mx_ImageView_image {
     pointer-events: all;
-    max-width: 95%;
-    max-height: 95%;
+    flex-shrink: 0;
 }
 
 .mx_ImageView_panel {
diff --git a/res/css/views/elements/_ProgressBar.scss b/res/css/views/elements/_ProgressBar.scss
index 770978e921..c075ac74ff 100644
--- a/res/css/views/elements/_ProgressBar.scss
+++ b/res/css/views/elements/_ProgressBar.scss
@@ -21,7 +21,7 @@ progress.mx_ProgressBar {
     appearance: none;
     border: none;
 
-    @mixin ProgressBarBorderRadius "6px";
+    @mixin ProgressBarBorderRadius 6px;
     @mixin ProgressBarColour $progressbar-fg-color;
     @mixin ProgressBarBgColour $progressbar-bg-color;
     ::-webkit-progress-value {
diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.scss
index b45126acf8..c215d69ec2 100644
--- a/res/css/views/messages/_MFileBody.scss
+++ b/res/css/views/messages/_MFileBody.scss
@@ -61,9 +61,9 @@ limitations under the License.
 
 .mx_MFileBody_info {
     background-color: $message-body-panel-bg-color;
-    border-radius: 4px;
-    width: 270px;
-    padding: 8px;
+    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 {
@@ -82,7 +82,7 @@ limitations under the License.
             mask-position: center;
             mask-size: cover;
             mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
-            background-color: $message-body-panel-fg-color;
+            background-color: $message-body-panel-icon-fg-color;
             width: 13px;
             height: 15px;
 
diff --git a/res/css/views/messages/_MVoiceMessageBody.scss b/res/css/views/messages/_MVoiceMessageBody.scss
new file mode 100644
index 0000000000..3dfb98f778
--- /dev/null
+++ b/res/css/views/messages/_MVoiceMessageBody.scss
@@ -0,0 +1,19 @@
+/*
+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_MVoiceMessageBody {
+    display: inline-block; // makes the playback controls magically line up
+}
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index 1254b496b5..3ecbef0d1f 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -105,3 +105,11 @@ limitations under the License.
 .mx_MessageActionBar_optionsButton::after {
     mask-image: url('$(res)/img/element-icons/context-menu.svg');
 }
+
+.mx_MessageActionBar_resendButton::after {
+    mask-image: url('$(res)/img/element-icons/retry.svg');
+}
+
+.mx_MessageActionBar_cancelButton::after {
+    mask-image: url('$(res)/img/element-icons/trashcan.svg');
+}
diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index 7158ffc027..c132fa5a0f 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -34,6 +34,10 @@ limitations under the License.
         border-color: $reaction-row-button-selected-border-color;
     }
 
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+    }
+
     .mx_ReactionsRowButton_content {
         max-width: 100px;
         overflow: hidden;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 35a5d8fc15..a6ccde93d3 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -219,10 +219,6 @@ $left-gutter: 64px;
     color: $accent-fg-color;
 }
 
-.mx_EventTile_notSent {
-    color: $event-notsent-color;
-}
-
 .mx_EventTile_receiptSent,
 .mx_EventTile_receiptSending {
     // We don't use `position: relative` on the element because then it won't line
diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss
index 8100a03890..b87211a847 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss
@@ -35,44 +35,42 @@ limitations under the License.
     }
 }
 
-.mx_VoiceRecordComposerTile_waveformContainer {
-    padding: 5px;
-    padding-right: 4px; // there's 1px from the waveform itself, so account for that
-    padding-left: 15px; // +10px for the live circle, +5px for regular padding
-    background-color: $voice-record-waveform-bg-color;
-    border-radius: 12px;
-    margin-right: 12px; // isolate from stop button
+.mx_VoiceRecordComposerTile_delete {
+    width: 14px; // w&h are size of icon
+    height: 18px;
+    vertical-align: middle;
+    margin-right: 11px; // distance from left edge of waveform container (container has some margin too)
+    background-color: $voice-record-icon-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    mask-image: url('$(res)/img/element-icons/trashcan.svg');
+}
 
-    // Cheat at alignment a bit
-    display: flex;
-    align-items: center;
+.mx_VoiceRecordComposerTile_recording.mx_VoiceMessagePrimaryContainer {
+    // Note: remaining class properties are in the PlayerContainer CSS.
+
+    margin: 6px; // force the composer area to put a gutter around us
+    margin-right: 12px; // isolate from stop button
 
     position: relative; // important for the live circle
 
-    color: $voice-record-waveform-fg-color;
-    font-size: $font-14px;
+    &.mx_VoiceRecordComposerTile_recording {
+        // We are putting the circle in this padding, so we need +10px from the regular
+        // padding on the left side.
+        padding-left: 22px;
 
-    &::before {
-        animation: recording-pulse 2s infinite;
+        &::before {
+            animation: recording-pulse 2s infinite;
 
-        content: '';
-        background-color: $voice-record-live-circle-color;
-        width: 10px;
-        height: 10px;
-        position: absolute;
-        left: 8px;
-        top: 16px; // vertically center
-        border-radius: 10px;
-    }
-
-    .mx_Waveform_bar {
-        background-color: $voice-record-waveform-fg-color;
-    }
-
-    .mx_Clock {
-        padding-right: 8px; // isolate from waveform
-        padding-left: 10px; // isolate from live circle
-        width: 42px; // we're not using a monospace font, so fake it
+            content: '';
+            background-color: $voice-record-live-circle-color;
+            width: 10px;
+            height: 10px;
+            position: absolute;
+            left: 12px; // 12px from the left edge for container padding
+            top: 18px; // vertically center (middle align with clock)
+            border-radius: 10px;
+        }
     }
 }
 
diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
index 109edfff81..0f879d209e 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
@@ -22,3 +22,34 @@ limitations under the License.
 .mx_HelpUserSettingsTab span.mx_AccessibleButton {
     word-break: break-word;
 }
+
+.mx_HelpUserSettingsTab code {
+    word-break: break-all;
+    user-select: all;
+}
+
+.mx_HelpUserSettingsTab_accessToken {
+    display: flex;
+    justify-content: space-between;
+    border-radius: 5px;
+    border: solid 1px $light-fg-color;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    padding: 10px;
+}
+
+.mx_HelpUserSettingsTab_accessToken_copy {
+    flex-shrink: 0;
+    cursor: pointer;
+    margin-left: 20px;
+    display: inherit;
+}
+
+.mx_HelpUserSettingsTab_accessToken_copy > div {
+    mask-image: url($copy-button-url);
+    background-color: $message-action-bar-fg-color;
+    margin-left: 5px;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+}
diff --git a/res/css/views/voice_messages/_PlayPauseButton.scss b/res/css/views/voice_messages/_PlayPauseButton.scss
new file mode 100644
index 0000000000..6caedafa29
--- /dev/null
+++ b/res/css/views/voice_messages/_PlayPauseButton.scss
@@ -0,0 +1,51 @@
+/*
+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_PlayPauseButton {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    border-radius: 32px;
+    background-color: $voice-playback-button-bg-color;
+
+    &::before {
+        content: '';
+        position: absolute; // sizing varies by icon
+        background-color: $voice-playback-button-fg-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+    }
+
+    &.mx_PlayPauseButton_disabled::before {
+        opacity: 0.5;
+    }
+
+    &.mx_PlayPauseButton_play::before {
+        width: 13px;
+        height: 16px;
+        top: 8px; // center
+        left: 12px; // center
+        mask-image: url('$(res)/img/element-icons/play.svg');
+    }
+
+    &.mx_PlayPauseButton_pause::before {
+        width: 10px;
+        height: 12px;
+        top: 10px; // center
+        left: 11px; // center
+        mask-image: url('$(res)/img/element-icons/pause.svg');
+    }
+}
diff --git a/res/css/views/voice_messages/_PlaybackContainer.scss b/res/css/views/voice_messages/_PlaybackContainer.scss
new file mode 100644
index 0000000000..64e8f445e1
--- /dev/null
+++ b/res/css/views/voice_messages/_PlaybackContainer.scss
@@ -0,0 +1,53 @@
+/*
+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.
+*/
+
+// Dev note: there's no actual component called . These classes
+// are shared amongst multiple voice message components.
+
+// Container for live recording and playback controls
+.mx_VoiceMessagePrimaryContainer {
+    // 7px top and bottom for visual design. 12px left & right, but the waveform (right)
+    // has a 1px padding on it that we want to account for.
+    padding: 7px 12px 7px 11px;
+    background-color: $voice-record-waveform-bg-color;
+    border-radius: 12px;
+
+    // Cheat at alignment a bit
+    display: flex;
+    align-items: center;
+
+    color: $voice-record-waveform-fg-color;
+    font-size: $font-14px;
+    line-height: $font-24px;
+
+    .mx_Waveform {
+        .mx_Waveform_bar {
+            background-color: $voice-record-waveform-incomplete-fg-color;
+
+            &.mx_Waveform_bar_100pct {
+                // Small animation to remove the mechanical feel of progress
+                transition: background-color 250ms ease;
+                background-color: $voice-record-waveform-fg-color;
+            }
+        }
+    }
+
+    .mx_Clock {
+        width: 42px; // we're not using a monospace font, so fake it
+        padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
+        padding-left: 8px; // isolate from recording circle / play control
+    }
+}
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index d13272c8c0..0be75be28c 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_CallView {
     border-radius: 8px;
-    background-color: $voipcall-plinth-color;
+    background-color: $dark-panel-bg-color;
     padding-left: 8px;
     padding-right: 8px;
     // XXX: CallContainer sets pointer-events: none - should probably be set back in a better place
@@ -40,7 +40,8 @@ limitations under the License.
     width: 320px;
     padding-bottom: 8px;
     margin-top: 10px;
-    box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
+    background-color: $voipcall-plinth-color;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
     border-radius: 8px;
 
     .mx_CallView_voice {
@@ -64,14 +65,17 @@ limitations under the License.
     }
 }
 
-.mx_CallView_voice {
+.mx_CallView_content {
     position: relative;
     display: flex;
-    flex-direction: column;
+    border-radius: 8px;
+}
+
+.mx_CallView_voice {
     align-items: center;
     justify-content: center;
+    flex-direction: column;
     background-color: $inverted-bg-color;
-    border-radius: 8px;
 }
 
 .mx_CallView_voice_avatarsContainer {
@@ -108,9 +112,7 @@ limitations under the License.
 .mx_CallView_video {
     width: 100%;
     height: 100%;
-    position: relative;
     z-index: 30;
-    border-radius: 8px;
     overflow: hidden;
 }
 
diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss
index 8ead8bba3e..7d85ac264e 100644
--- a/res/css/views/voip/_VideoFeed.scss
+++ b/res/css/views/voip/_VideoFeed.scss
@@ -14,21 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_VideoFeed_voice {
+    // We don't want to collide with the call controls that have 52px of height
+    padding-bottom: 52px;
+    background-color: $inverted-bg-color;
+}
+
+
 .mx_VideoFeed_remote {
     width: 100%;
     height: 100%;
-    background-color: #000;
-    z-index: 50;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.mx_VideoFeed_video {
+        background-color: #000;
+    }
 }
 
 .mx_VideoFeed_local {
-    width: 25%;
-    height: 25%;
+    max-width: 25%;
+    max-height: 25%;
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: 100;
     border-radius: 4px;
+
+    &.mx_VideoFeed_video {
+        background-color: transparent;
+    }
 }
 
 .mx_VideoFeed_mirror {
diff --git a/res/img/element-icons/pause.svg b/res/img/element-icons/pause.svg
new file mode 100644
index 0000000000..293c0a10d8
--- /dev/null
+++ b/res/img/element-icons/pause.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/res/img/element-icons/play.svg b/res/img/element-icons/play.svg
new file mode 100644
index 0000000000..339e20b729
--- /dev/null
+++ b/res/img/element-icons/play.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/res/img/element-icons/retry.svg b/res/img/element-icons/retry.svg
new file mode 100644
index 0000000000..09448d6458
--- /dev/null
+++ b/res/img/element-icons/retry.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/res/img/element-icons/trashcan.svg b/res/img/element-icons/trashcan.svg
new file mode 100644
index 0000000000..f8fb8b5c46
--- /dev/null
+++ b/res/img/element-icons/trashcan.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 925d268eb0..2d0e3d2a8b 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -9,6 +9,7 @@ $header-panel-text-primary-color: #B9BEC6;
 $header-panel-text-secondary-color: #c8c8cd;
 $text-primary-color: #ffffff;
 $text-secondary-color: #B9BEC6;
+$quaternary-fg-color: #6F7882;
 $search-bg-color: #181b21;
 $search-placeholder-color: #61708b;
 $room-highlight-color: #343a46;
@@ -63,6 +64,8 @@ $input-invalid-border-color: $warning-color;
 
 $field-focused-label-bg-color: $bg-color;
 
+$resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
+
 // scrollbars
 $scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
 $scrollbar-track-color: transparent;
@@ -110,7 +113,7 @@ $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
-$voipcall-plinth-color: #21262c;
+$voipcall-plinth-color: #394049;
 
 // ********************
 
@@ -203,9 +206,18 @@ $breadcrumb-placeholder-bg-color: #272c35;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-$message-body-panel-bg-color: #21262c82;
-$message-body-panel-icon-bg-color: #8e99a4;
-$message-body-panel-fg-color: $primary-fg-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-bg-color: $tertiary-fg-color;
+
+$voice-record-stop-border-color: $quaternary-fg-color;
+$voice-record-waveform-bg-color: $message-body-panel-bg-color;
+$voice-record-waveform-fg-color: $message-body-panel-fg-color;
+$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
+$voice-record-icon-color: $quaternary-fg-color;
+$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
+$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index 28e6e22326..a852ad94e9 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -61,6 +61,8 @@ $input-invalid-border-color: $warning-color;
 
 $field-focused-label-bg-color: $bg-color;
 
+$resend-button-divider-color: $muted-fg-color;
+
 // scrollbars
 $scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
 $scrollbar-track-color: transparent;
@@ -107,7 +109,7 @@ $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
-$voipcall-plinth-color: #f2f5f8;
+$voipcall-plinth-color: #394049;
 
 // ********************
 
@@ -198,9 +200,19 @@ $breadcrumb-placeholder-bg-color: #272c35;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-$message-body-panel-bg-color: #21262c82;
-$message-body-panel-icon-bg-color: #8e99a4;
-$message-body-panel-fg-color: $primary-fg-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-bg-color: $secondary-fg-color;
+
+// See non-legacy dark for variable information
+$voice-record-stop-border-color: #6F7882;
+$voice-record-waveform-bg-color: $message-body-panel-bg-color;
+$voice-record-waveform-fg-color: $message-body-panel-fg-color;
+$voice-record-waveform-incomplete-fg-color: #6F7882;
+$voice-record-icon-color: #6F7882;
+$voice-playback-button-bg-color: $tertiary-fg-color;
+$voice-playback-button-fg-color: #21262C;
 
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 7b6bdad4a4..84666bc662 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -97,6 +97,8 @@ $input-invalid-border-color: $warning-color;
 
 $field-focused-label-bg-color: #ffffff;
 
+$resend-button-divider-color: $input-darker-bg-color;
+
 $button-bg-color: $accent-color;
 $button-fg-color: white;
 
@@ -174,7 +176,7 @@ $composer-e2e-icon-color: #91a1c0;
 $header-divider-color: #91a1c0;
 
 // this probably shouldn't have it's own colour
-$voipcall-plinth-color: #f2f5f8;
+$voipcall-plinth-color: #F4F6FA;
 
 // ********************
 
@@ -189,13 +191,6 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 
-// See non-legacy _light for variable information
-$voice-record-stop-border-color: #E3E8F0;
-$voice-record-stop-symbol-color: #ff4b55;
-$voice-record-waveform-bg-color: #E3E8F0;
-$voice-record-waveform-fg-color: $muted-fg-color;
-$voice-record-live-circle-color: #ff4b55;
-
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #fff;
@@ -328,9 +323,21 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-$message-body-panel-bg-color: #e3e8f082;
-$message-body-panel-icon-bg-color: #ffffff;
-$message-body-panel-fg-color: $muted-fg-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;
+
+// See non-legacy _light for variable information
+$voice-record-stop-symbol-color: #ff4b55;
+$voice-record-live-circle-color: #ff4b55;
+$voice-record-stop-border-color: #E3E8F0;
+$voice-record-waveform-bg-color: $message-body-panel-bg-color;
+$voice-record-waveform-fg-color: $message-body-panel-fg-color;
+$voice-record-waveform-incomplete-fg-color: #C1C6CD;
+$voice-record-icon-color: $tertiary-fg-color;
+$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
+$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 5b46138dae..c889f43d0b 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -21,6 +21,7 @@ $notice-primary-bg-color: rgba(255, 75, 85, 0.16);
 $primary-fg-color: #2e2f32;
 $secondary-fg-color: #737D8C;
 $tertiary-fg-color: #8D99A5;
+$quaternary-fg-color: #C1C6CD;
 $header-panel-bg-color: #f3f8fd;
 
 // typical text (dark-on-white in light skin)
@@ -91,6 +92,8 @@ $field-focused-label-bg-color: #ffffff;
 $button-bg-color: $accent-color;
 $button-fg-color: white;
 
+$resend-button-divider-color: $input-darker-bg-color;
+
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;
 
@@ -165,7 +168,7 @@ $composer-e2e-icon-color: #91A1C0;
 $header-divider-color: #91A1C0;
 
 // this probably shouldn't have it's own colour
-$voipcall-plinth-color: #f2f5f8;
+$voipcall-plinth-color: #F4F6FA;
 
 // ********************
 
@@ -180,12 +183,6 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 
-$voice-record-stop-border-color: #E3E8F0;
-$voice-record-stop-symbol-color: #ff4b55; // $warning-color, but without letting people change it in themes
-$voice-record-waveform-bg-color: #E3E8F0;
-$voice-record-waveform-fg-color: $muted-fg-color;
-$voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes
-
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #FFF;
@@ -325,9 +322,23 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-$message-body-panel-bg-color: #e3e8f082;
-$message-body-panel-icon-bg-color: #ffffff;
-$message-body-panel-fg-color: $muted-fg-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;
+
+// These two don't change between themes. They are the $warning-color, but we don't
+// want custom themes to affect them by accident.
+$voice-record-stop-symbol-color: #ff4b55;
+$voice-record-live-circle-color: #ff4b55;
+
+$voice-record-stop-border-color: #E3E8F0; // "Separator"
+$voice-record-waveform-bg-color: $message-body-panel-bg-color;
+$voice-record-waveform-fg-color: $message-body-panel-fg-color;
+$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
+$voice-record-icon-color: $tertiary-fg-color;
+$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
+$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;
diff --git a/scripts/compare-file.js b/scripts/compare-file.js
deleted file mode 100644
index f53275ebfa..0000000000
--- a/scripts/compare-file.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const fs = require("fs");
-
-if (process.argv.length < 4) throw new Error("Missing source and target file arguments");
-
-const sourceFile = fs.readFileSync(process.argv[2], 'utf8');
-const targetFile = fs.readFileSync(process.argv[3], 'utf8');
-
-if (sourceFile !== targetFile) {
-    throw new Error("Files do not match");
-}
diff --git a/scripts/gen-i18n.js b/scripts/gen-i18n.js
deleted file mode 100755
index 91733469f7..0000000000
--- a/scripts/gen-i18n.js
+++ /dev/null
@@ -1,304 +0,0 @@
-#!/usr/bin/env node
-
-/*
-Copyright 2017 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/**
- * Regenerates the translations en_EN file by walking the source tree and
- * parsing each file with the appropriate parser. Emits a JSON file with the
- * translatable strings mapped to themselves in the order they appeared
- * in the files and grouped by the file they appeared in.
- *
- * Usage: node scripts/gen-i18n.js
- */
-const fs = require('fs');
-const path = require('path');
-
-const walk = require('walk');
-
-const parser = require("@babel/parser");
-const traverse = require("@babel/traverse");
-
-const TRANSLATIONS_FUNCS = ['_t', '_td'];
-
-const INPUT_TRANSLATIONS_FILE = 'src/i18n/strings/en_EN.json';
-const OUTPUT_FILE = 'src/i18n/strings/en_EN.json';
-
-// NB. The sync version of walk is broken for single files so we walk
-// all of res rather than just res/home.html.
-// https://git.daplie.com/Daplie/node-walk/merge_requests/1 fixes it,
-// or if we get bored waiting for it to be merged, we could switch
-// to a project that's actively maintained.
-const SEARCH_PATHS = ['src', 'res'];
-
-function getObjectValue(obj, key) {
-    for (const prop of obj.properties) {
-        if (prop.key.type === 'Identifier' && prop.key.name === key) {
-            return prop.value;
-        }
-    }
-    return null;
-}
-
-function getTKey(arg) {
-    if (arg.type === 'Literal' || arg.type === "StringLiteral") {
-        return arg.value;
-    } else if (arg.type === 'BinaryExpression' && arg.operator === '+') {
-        return getTKey(arg.left) + getTKey(arg.right);
-    } else if (arg.type === 'TemplateLiteral') {
-        return arg.quasis.map((q) => {
-            return q.value.raw;
-        }).join('');
-    }
-    return null;
-}
-
-function getFormatStrings(str) {
-    // Match anything that starts with %
-    // We could make a regex that matched the full placeholder, but this
-    // would just not match invalid placeholders and so wouldn't help us
-    // detect the invalid ones.
-    // Also note that for simplicity, this just matches a % character and then
-    // anything up to the next % character (or a single %, or end of string).
-    const formatStringRe = /%([^%]+|%|$)/g;
-    const formatStrings = new Set();
-
-    let match;
-    while ( (match = formatStringRe.exec(str)) !== null ) {
-        const placeholder = match[1]; // Minus the leading '%'
-        if (placeholder === '%') continue; // Literal % is %%
-
-        const placeholderMatch = placeholder.match(/^\((.*?)\)(.)/);
-        if (placeholderMatch === null) {
-            throw new Error("Invalid format specifier: '"+match[0]+"'");
-        }
-        if (placeholderMatch.length < 3) {
-            throw new Error("Malformed format specifier");
-        }
-        const placeholderName = placeholderMatch[1];
-        const placeholderFormat = placeholderMatch[2];
-
-        if (placeholderFormat !== 's') {
-            throw new Error(`'${placeholderFormat}' used as format character: you probably meant 's'`);
-        }
-
-        formatStrings.add(placeholderName);
-    }
-
-    return formatStrings;
-}
-
-function getTranslationsJs(file) {
-    const contents = fs.readFileSync(file, { encoding: 'utf8' });
-
-    const trs = new Set();
-
-    try {
-        const plugins = [
-            // https://babeljs.io/docs/en/babel-parser#plugins
-            "classProperties",
-            "objectRestSpread",
-            "throwExpressions",
-            "exportDefaultFrom",
-            "decorators-legacy",
-        ];
-
-        if (file.endsWith(".js") || file.endsWith(".jsx")) {
-            // all JS is assumed to be flow or react
-            plugins.push("flow", "jsx");
-        } else if (file.endsWith(".ts")) {
-            // TS can't use JSX unless it's a TSX file (otherwise angle casts fail)
-            plugins.push("typescript");
-        } else if (file.endsWith(".tsx")) {
-            // When the file is a TSX file though, enable JSX parsing
-            plugins.push("typescript", "jsx");
-        }
-
-        const babelParsed = parser.parse(contents, {
-            allowImportExportEverywhere: true,
-            errorRecovery: true,
-            sourceFilename: file,
-            tokens: true,
-            plugins,
-        });
-        traverse.default(babelParsed, {
-            enter: (p) => {
-                const node = p.node;
-                if (p.isCallExpression() && node.callee && TRANSLATIONS_FUNCS.includes(node.callee.name)) {
-                    const tKey = getTKey(node.arguments[0]);
-
-                    // This happens whenever we call _t with non-literals (ie. whenever we've
-                    // had to use a _td to compensate) so is expected.
-                    if (tKey === null) return;
-
-                    // check the format string against the args
-                    // We only check _t: _td has no args
-                    if (node.callee.name === '_t') {
-                        try {
-                            const placeholders = getFormatStrings(tKey);
-                            for (const placeholder of placeholders) {
-                                if (node.arguments.length < 2) {
-                                    throw new Error(`Placeholder found ('${placeholder}') but no substitutions given`);
-                                }
-                                const value = getObjectValue(node.arguments[1], placeholder);
-                                if (value === null) {
-                                    throw new Error(`No value found for placeholder '${placeholder}'`);
-                                }
-                            }
-
-                            // Validate tag replacements
-                            if (node.arguments.length > 2) {
-                                const tagMap = node.arguments[2];
-                                for (const prop of tagMap.properties || []) {
-                                    if (prop.key.type === 'Literal') {
-                                        const tag = prop.key.value;
-                                        // RegExp same as in src/languageHandler.js
-                                        const regexp = new RegExp(`(<${tag}>(.*?)<\\/${tag}>|<${tag}>|<${tag}\\s*\\/>)`);
-                                        if (!tKey.match(regexp)) {
-                                            throw new Error(`No match for ${regexp} in ${tKey}`);
-                                        }
-                                    }
-                                }
-                            }
-
-                        } catch (e) {
-                            console.log();
-                            console.error(`ERROR: ${file}:${node.loc.start.line} ${tKey}`);
-                            console.error(e);
-                            process.exit(1);
-                        }
-                    }
-
-                    let isPlural = false;
-                    if (node.arguments.length > 1 && node.arguments[1].type === 'ObjectExpression') {
-                        const countVal = getObjectValue(node.arguments[1], 'count');
-                        if (countVal) {
-                            isPlural = true;
-                        }
-                    }
-
-                    if (isPlural) {
-                        trs.add(tKey + "|other");
-                        const plurals = enPlurals[tKey];
-                        if (plurals) {
-                            for (const pluralType of Object.keys(plurals)) {
-                                trs.add(tKey + "|" + pluralType);
-                            }
-                        }
-                    } else {
-                        trs.add(tKey);
-                    }
-                }
-            },
-        });
-    } catch (e) {
-        console.error(e);
-        process.exit(1);
-    }
-
-    return trs;
-}
-
-function getTranslationsOther(file) {
-    const contents = fs.readFileSync(file, { encoding: 'utf8' });
-
-    const trs = new Set();
-
-    // Taken from element-web src/components/structures/HomePage.js
-    const translationsRegex = /_t\(['"]([\s\S]*?)['"]\)/mg;
-    let matches;
-    while (matches = translationsRegex.exec(contents)) {
-        trs.add(matches[1]);
-    }
-    return trs;
-}
-
-// gather en_EN plural strings from the input translations file:
-// the en_EN strings are all in the source with the exception of
-// pluralised strings, which we need to pull in from elsewhere.
-const inputTranslationsRaw = JSON.parse(fs.readFileSync(INPUT_TRANSLATIONS_FILE, { encoding: 'utf8' }));
-const enPlurals = {};
-
-for (const key of Object.keys(inputTranslationsRaw)) {
-    const parts = key.split("|");
-    if (parts.length > 1) {
-        const plurals = enPlurals[parts[0]] || {};
-        plurals[parts[1]] = inputTranslationsRaw[key];
-        enPlurals[parts[0]] = plurals;
-    }
-}
-
-const translatables = new Set();
-
-const walkOpts = {
-    listeners: {
-        names: function(root, nodeNamesArray) {
-            // Sort the names case insensitively and alphabetically to
-            // maintain some sense of order between the different strings.
-            nodeNamesArray.sort((a, b) => {
-                a = a.toLowerCase();
-                b = b.toLowerCase();
-                if (a > b) return 1;
-                if (a < b) return -1;
-                return 0;
-            });
-        },
-        file: function(root, fileStats, next) {
-            const fullPath = path.join(root, fileStats.name);
-
-            let trs;
-            if (fileStats.name.endsWith('.js') || fileStats.name.endsWith('.ts') || fileStats.name.endsWith('.tsx')) {
-                trs = getTranslationsJs(fullPath);
-            } else if (fileStats.name.endsWith('.html')) {
-                trs = getTranslationsOther(fullPath);
-            } else {
-                return;
-            }
-            console.log(`${fullPath} (${trs.size} strings)`);
-            for (const tr of trs.values()) {
-                // Convert DOS line endings to unix
-                translatables.add(tr.replace(/\r\n/g, "\n"));
-            }
-        },
-    }
-};
-
-for (const path of SEARCH_PATHS) {
-    if (fs.existsSync(path)) {
-        walk.walkSync(path, walkOpts);
-    }
-}
-
-const trObj = {};
-for (const tr of translatables) {
-    if (tr.includes("|")) {
-        if (inputTranslationsRaw[tr]) {
-            trObj[tr] = inputTranslationsRaw[tr];
-        } else {
-            trObj[tr] = tr.split("|")[0];
-        }
-    } else {
-        trObj[tr] = tr;
-    }
-}
-
-fs.writeFileSync(
-    OUTPUT_FILE,
-    JSON.stringify(trObj, translatables.values(), 4) + "\n"
-);
-
-console.log();
-console.log(`Wrote ${translatables.size} strings to ${OUTPUT_FILE}`);
diff --git a/scripts/prune-i18n.js b/scripts/prune-i18n.js
deleted file mode 100755
index b4fe8d69f5..0000000000
--- a/scripts/prune-i18n.js
+++ /dev/null
@@ -1,68 +0,0 @@
-#!/usr/bin/env node
-
-/*
-Copyright 2017 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/*
- * Looks through all the translation files and removes any strings
- * which don't appear in en_EN.json.
- * Use this if you remove a translation, but merge any outstanding changes
- * from weblate first or you'll need to resolve the conflict in weblate.
- */
-
-const fs = require('fs');
-const path = require('path');
-
-const I18NDIR = 'src/i18n/strings';
-
-const enStringsRaw = JSON.parse(fs.readFileSync(path.join(I18NDIR, 'en_EN.json')));
-
-const enStrings = new Set();
-for (const str of Object.keys(enStringsRaw)) {
-    const parts = str.split('|');
-    if (parts.length > 1) {
-        enStrings.add(parts[0]);
-    } else {
-        enStrings.add(str);
-    }
-}
-
-for (const filename of fs.readdirSync(I18NDIR)) {
-    if (filename === 'en_EN.json') continue;
-    if (filename === 'basefile.json') continue;
-    if (!filename.endsWith('.json')) continue;
-
-    const trs = JSON.parse(fs.readFileSync(path.join(I18NDIR, filename)));
-    const oldLen = Object.keys(trs).length;
-    for (const tr of Object.keys(trs)) {
-        const parts = tr.split('|');
-        const trKey = parts.length > 1 ? parts[0] : tr;
-        if (!enStrings.has(trKey)) {
-            delete trs[tr];
-        }
-    }
-
-    const removed = oldLen - Object.keys(trs).length;
-    if (removed > 0) {
-        console.log(`${filename}: removed ${removed} translations`);
-        // XXX: This is totally relying on the impl serialising the JSON object in the
-        // same order as they were parsed from the file. JSON.stringify() has a specific argument
-        // that can be used to control the order, but JSON.parse() lacks any kind of equivalent.
-        // Empirically this does maintain the order on my system, so I'm going to leave it like
-        // this for now.
-        fs.writeFileSync(path.join(I18NDIR, filename), JSON.stringify(trs, undefined, 4) + "\n");
-    }
-}
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 41257c21f0..e8f2f1bc08 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -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.
@@ -39,7 +39,9 @@ import {ModalWidgetStore} from "../stores/ModalWidgetStore";
 import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 import VoipUserMapper from "../VoipUserMapper";
 import {SpaceStoreClass} from "../stores/SpaceStore";
-import {VoiceRecording} from "../voice/VoiceRecording";
+import TypingStore from "../stores/TypingStore";
+import { EventIndexPeg } from "../indexing/EventIndexPeg";
+import {VoiceRecordingStore} from "../stores/VoiceRecordingStore";
 
 declare global {
     interface Window {
@@ -71,12 +73,16 @@ declare global {
         mxModalWidgetStore: ModalWidgetStore;
         mxVoipUserMapper: VoipUserMapper;
         mxSpaceStore: SpaceStoreClass;
-        mxVoiceRecorder: typeof VoiceRecording;
+        mxVoiceRecordingStore: VoiceRecordingStore;
+        mxTypingStore: TypingStore;
+        mxEventIndexPeg: EventIndexPeg;
     }
 
     interface Document {
         // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess
         hasStorageAccess?: () => Promise;
+        // https://developer.mozilla.org/en-US/docs/Web/API/Document/requestStorageAccess
+        requestStorageAccess?: () => Promise;
 
         // Safari & IE11 only have this prefixed: we used prefixed versions
         // previously so let's continue to support them for now
@@ -112,6 +118,16 @@ declare global {
 
     interface HTMLAudioElement {
         type?: string;
+        // sinkId & setSinkId are experimental and typescript doesn't know about them
+        sinkId: string;
+        setSinkId(outputId: string);
+    }
+
+    interface HTMLVideoElement {
+        type?: string;
+        // sinkId & setSinkId are experimental and typescript doesn't know about them
+        sinkId: string;
+        setSinkId(outputId: string);
     }
 
     interface Element {
diff --git a/src/Avatar.ts b/src/Avatar.ts
index 76c88faa1c..a6499c688e 100644
--- a/src/Avatar.ts
+++ b/src/Avatar.ts
@@ -20,6 +20,7 @@ import {Room} from "matrix-js-sdk/src/models/room";
 
 import DMRoomMap from './utils/DMRoomMap';
 import {mediaFromMxc} from "./customisations/Media";
+import SettingsStore from "./settings/SettingsStore";
 
 export type ResizeMethod = "crop" | "scale";
 
@@ -27,11 +28,7 @@ export type ResizeMethod = "crop" | "scale";
 export function avatarUrlForMember(member: RoomMember, width: number, height: number, resizeMethod: ResizeMethod) {
     let url: string;
     if (member?.getMxcAvatarUrl()) {
-        url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
-            Math.floor(width * window.devicePixelRatio),
-            Math.floor(height * window.devicePixelRatio),
-            resizeMethod,
-        );
+        url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod);
     }
     if (!url) {
         // member can be null here currently since on invites, the JS SDK
@@ -44,11 +41,7 @@ export function avatarUrlForMember(member: RoomMember, width: number, height: nu
 
 export function avatarUrlForUser(user: User, width: number, height: number, resizeMethod?: ResizeMethod) {
     if (!user.avatarUrl) return null;
-    return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(
-        Math.floor(width * window.devicePixelRatio),
-        Math.floor(height * window.devicePixelRatio),
-        resizeMethod,
-    );
+    return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(width, height, resizeMethod);
 }
 
 function isValidHexColor(color: string): boolean {
@@ -151,7 +144,7 @@ export function avatarUrlForRoom(room: Room, width: number, height: number, resi
     }
 
     // space rooms cannot be DMs so skip the rest
-    if (room.isSpaceRoom()) return null;
+    if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) return null;
 
     let otherMember = null;
     const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
diff --git a/src/BasePlatform.ts b/src/BasePlatform.ts
index b6012d7597..5483ea6874 100644
--- a/src/BasePlatform.ts
+++ b/src/BasePlatform.ts
@@ -258,7 +258,7 @@ export default abstract class BasePlatform {
         return null;
     }
 
-    setLanguage(preferredLangs: string[]) {}
+    async setLanguage(preferredLangs: string[]) {}
 
     setSpellCheckLanguages(preferredLangs: string[]) {}
 
diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx
index be687a4474..0268ebfe46 100644
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@@ -59,7 +59,6 @@ import {MatrixClientPeg} from './MatrixClientPeg';
 import PlatformPeg from './PlatformPeg';
 import Modal from './Modal';
 import { _t } from './languageHandler';
-import { createNewMatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import dis from './dispatcher/dispatcher';
 import WidgetUtils from './utils/WidgetUtils';
 import WidgetEchoStore from './stores/WidgetEchoStore';
@@ -86,6 +85,9 @@ import { Action } from './dispatcher/actions';
 import VoipUserMapper from './VoipUserMapper';
 import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from './widgets/ManagedHybrid';
 import { randomUppercaseString, randomLowercaseString } from "matrix-js-sdk/src/randomstring";
+import EventEmitter from 'events';
+import SdkConfig from './SdkConfig';
+import { ensureDMExists, findDMForUser } from './createRoom';
 
 export const PROTOCOL_PSTN = 'm.protocol.pstn';
 export const PROTOCOL_PSTN_PREFIXED = 'im.vector.protocol.pstn';
@@ -137,22 +139,12 @@ export enum PlaceCallType {
     ScreenSharing = 'screensharing',
 }
 
-function getRemoteAudioElement(): HTMLAudioElement {
-    // this needs to be somewhere at the top of the DOM which
-    // always exists to avoid audio interruptions.
-    // Might as well just use DOM.
-    const remoteAudioElement = document.getElementById("remoteAudio") as HTMLAudioElement;
-    if (!remoteAudioElement) {
-        console.error(
-            "Failed to find remoteAudio element - cannot play audio!" +
-            "You need to add an 

                 ),
                 button: _t("Trust"),
-            });
+                });
             const [confirmed] = await finished;
             if (confirmed) {
                 // eslint-disable-next-line react-hooks/rules-of-hooks
diff --git a/src/KeyBindingsManager.ts b/src/KeyBindingsManager.ts
index d862f10c02..aac14bde20 100644
--- a/src/KeyBindingsManager.ts
+++ b/src/KeyBindingsManager.ts
@@ -231,8 +231,10 @@ export class KeyBindingsManager {
     /**
      * Finds a matching KeyAction for a given KeyboardEvent
      */
-    private getAction(getters: KeyBindingGetter[], ev: KeyboardEvent | React.KeyboardEvent)
-        : T | undefined {
+    private getAction(
+        getters: KeyBindingGetter[],
+        ev: KeyboardEvent | React.KeyboardEvent,
+    ): T | undefined {
         for (const getter of getters) {
             const bindings = getter();
             const binding = bindings.find(it => isKeyComboMatch(ev, it.keyCombo, isMac));
diff --git a/src/Login.ts b/src/Login.ts
index db3c4c11e4..d584df7dfe 100644
--- a/src/Login.ts
+++ b/src/Login.ts
@@ -1,9 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -59,7 +56,7 @@ export type LoginFlow = ISSOFlow | IPasswordFlow;
 // TODO: Move this to JS SDK
 /* eslint-disable camelcase */
 interface ILoginParams {
-    identifier?: string;
+    identifier?: object;
     password?: string;
     token?: string;
     device_id?: string;
diff --git a/src/PasswordReset.js b/src/PasswordReset.js
index 6fe6ca82cc..88ae00d088 100644
--- a/src/PasswordReset.js
+++ b/src/PasswordReset.js
@@ -54,7 +54,7 @@ export default class PasswordReset {
             return res;
         }, function(err) {
             if (err.errcode === 'M_THREEPID_NOT_FOUND') {
-                 err.message = _t('This email address was not found');
+                err.message = _t('This email address was not found');
             } else if (err.httpStatus) {
                 err.message = err.message + ` (Status ${err.httpStatus})`;
             }
diff --git a/src/Resend.js b/src/Resend.js
index bf69e59c1a..f1e5fb38f5 100644
--- a/src/Resend.js
+++ b/src/Resend.js
@@ -21,11 +21,11 @@ import { EventStatus } from 'matrix-js-sdk/src/models/event';
 
 export default class Resend {
     static resendUnsentEvents(room) {
-        room.getPendingEvents().filter(function(ev) {
+        return Promise.all(room.getPendingEvents().filter(function(ev) {
             return ev.status === EventStatus.NOT_SENT;
-        }).forEach(function(event) {
-            Resend.resend(event);
-        });
+        }).map(function(event) {
+            return Resend.resend(event);
+        }));
     }
 
     static cancelUnsentEvents(room) {
@@ -38,7 +38,7 @@ export default class Resend {
 
     static resend(event) {
         const room = MatrixClientPeg.get().getRoom(event.getRoomId());
-        MatrixClientPeg.get().resendEvent(event, room).then(function(res) {
+        return MatrixClientPeg.get().resendEvent(event, room).then(function(res) {
             dis.dispatch({
                 action: 'message_sent',
                 event: event,
diff --git a/src/ScalarAuthClient.js b/src/ScalarAuthClient.ts
similarity index 84%
rename from src/ScalarAuthClient.js
rename to src/ScalarAuthClient.ts
index 200b4fd7b9..a09c3494a8 100644
--- a/src/ScalarAuthClient.js
+++ b/src/ScalarAuthClient.ts
@@ -1,6 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2016, 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,13 +16,14 @@ limitations under the License.
 
 import url from 'url';
 import SettingsStore from "./settings/SettingsStore";
-import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
+import { Service, startTermsFlow, TermsInteractionCallback, TermsNotSignedError } from './Terms';
 import {MatrixClientPeg} from "./MatrixClientPeg";
 import request from "browser-request";
 
 import SdkConfig from "./SdkConfig";
 import {WidgetType} from "./widgets/WidgetType";
 import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 // The version of the integration manager API we're intending to work with
 const imApiVersion = "1.1";
@@ -31,9 +31,11 @@ const imApiVersion = "1.1";
 // TODO: Generify the name of this class and all components within - it's not just for Scalar.
 
 export default class ScalarAuthClient {
-    constructor(apiUrl, uiUrl) {
-        this.apiUrl = apiUrl;
-        this.uiUrl = uiUrl;
+    private scalarToken: string;
+    private termsInteractionCallback: TermsInteractionCallback;
+    private isDefaultManager: boolean;
+
+    constructor(private apiUrl: string, private uiUrl: string) {
         this.scalarToken = null;
         // `undefined` to allow `startTermsFlow` to fallback to a default
         // callback if this is unset.
@@ -46,7 +48,7 @@ export default class ScalarAuthClient {
         this.isDefaultManager = apiUrl === configApiUrl && configUiUrl === uiUrl;
     }
 
-    _writeTokenToStore() {
+    private writeTokenToStore() {
         window.localStorage.setItem("mx_scalar_token_at_" + this.apiUrl, this.scalarToken);
         if (this.isDefaultManager) {
             // We remove the old token from storage to migrate upwards. This is safe
@@ -56,7 +58,7 @@ export default class ScalarAuthClient {
         }
     }
 
-    _readTokenFromStore() {
+    private readTokenFromStore(): string {
         let token = window.localStorage.getItem("mx_scalar_token_at_" + this.apiUrl);
         if (!token && this.isDefaultManager) {
             token = window.localStorage.getItem("mx_scalar_token");
@@ -64,33 +66,33 @@ export default class ScalarAuthClient {
         return token;
     }
 
-    _readToken() {
+    private readToken(): string {
         if (this.scalarToken) return this.scalarToken;
-        return this._readTokenFromStore();
+        return this.readTokenFromStore();
     }
 
     setTermsInteractionCallback(callback) {
         this.termsInteractionCallback = callback;
     }
 
-    connect() {
+    connect(): Promise {
         return this.getScalarToken().then((tok) => {
             this.scalarToken = tok;
         });
     }
 
-    hasCredentials() {
+    hasCredentials(): boolean {
         return this.scalarToken != null; // undef or null
     }
 
     // Returns a promise that resolves to a scalar_token string
-    getScalarToken() {
-        const token = this._readToken();
+    getScalarToken(): Promise {
+        const token = this.readToken();
 
         if (!token) {
             return this.registerForToken();
         } else {
-            return this._checkToken(token).catch((e) => {
+            return this.checkToken(token).catch((e) => {
                 if (e instanceof TermsNotSignedError) {
                     // retrying won't help this
                     throw e;
@@ -100,7 +102,7 @@ export default class ScalarAuthClient {
         }
     }
 
-    _getAccountName(token) {
+    private getAccountName(token: string): Promise {
         const url = this.apiUrl + "/account";
 
         return new Promise(function(resolve, reject) {
@@ -125,8 +127,8 @@ export default class ScalarAuthClient {
         });
     }
 
-    _checkToken(token) {
-        return this._getAccountName(token).then(userId => {
+    private checkToken(token: string): Promise {
+        return this.getAccountName(token).then(userId => {
             const me = MatrixClientPeg.get().getUserId();
             if (userId !== me) {
                 throw new Error("Scalar token is owned by someone else: " + me);
@@ -154,7 +156,7 @@ export default class ScalarAuthClient {
                 parsedImRestUrl.pathname = '';
                 return startTermsFlow([new Service(
                     SERVICE_TYPES.IM,
-                    parsedImRestUrl.format(),
+                    url.format(parsedImRestUrl),
                     token,
                 )], this.termsInteractionCallback).then(() => {
                     return token;
@@ -165,22 +167,22 @@ export default class ScalarAuthClient {
         });
     }
 
-    registerForToken() {
+    registerForToken(): Promise {
         // Get openid bearer token from the HS as the first part of our dance
         return MatrixClientPeg.get().getOpenIdToken().then((tokenObject) => {
             // Now we can send that to scalar and exchange it for a scalar token
             return this.exchangeForScalarToken(tokenObject);
         }).then((token) => {
             // Validate it (this mostly checks to see if the IM needs us to agree to some terms)
-            return this._checkToken(token);
+            return this.checkToken(token);
         }).then((token) => {
             this.scalarToken = token;
-            this._writeTokenToStore();
+            this.writeTokenToStore();
             return token;
         });
     }
 
-    exchangeForScalarToken(openidTokenObject) {
+    exchangeForScalarToken(openidTokenObject: any): Promise {
         const scalarRestUrl = this.apiUrl;
 
         return new Promise(function(resolve, reject) {
@@ -194,7 +196,7 @@ export default class ScalarAuthClient {
                 if (err) {
                     reject(err);
                 } else if (response.statusCode / 100 !== 2) {
-                    reject({statusCode: response.statusCode});
+                    reject(new Error(`Scalar request failed: ${response.statusCode}`));
                 } else if (!body || !body.scalar_token) {
                     reject(new Error("Missing scalar_token in response"));
                 } else {
@@ -204,7 +206,7 @@ export default class ScalarAuthClient {
         });
     }
 
-    getScalarPageTitle(url) {
+    getScalarPageTitle(url: string): Promise {
         let scalarPageLookupUrl = this.apiUrl + '/widgets/title_lookup';
         scalarPageLookupUrl = this.getStarterLink(scalarPageLookupUrl);
         scalarPageLookupUrl += '&curl=' + encodeURIComponent(url);
@@ -218,7 +220,7 @@ export default class ScalarAuthClient {
                 if (err) {
                     reject(err);
                 } else if (response.statusCode / 100 !== 2) {
-                    reject({statusCode: response.statusCode});
+                    reject(new Error(`Scalar request failed: ${response.statusCode}`));
                 } else if (!body) {
                     reject(new Error("Missing page title in response"));
                 } else {
@@ -240,10 +242,10 @@ export default class ScalarAuthClient {
      * @param  {string} widgetId   The widget ID to disable assets for
      * @return {Promise}           Resolves on completion
      */
-    disableWidgetAssets(widgetType: WidgetType, widgetId) {
+    disableWidgetAssets(widgetType: WidgetType, widgetId: string): Promise {
         let url = this.apiUrl + '/widgets/set_assets_state';
         url = this.getStarterLink(url);
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve, reject) => {
             request({
                 method: 'GET', // XXX: Actions shouldn't be GET requests
                 uri: url,
@@ -257,7 +259,7 @@ export default class ScalarAuthClient {
                 if (err) {
                     reject(err);
                 } else if (response.statusCode / 100 !== 2) {
-                    reject({statusCode: response.statusCode});
+                    reject(new Error(`Scalar request failed: ${response.statusCode}`));
                 } else if (!body) {
                     reject(new Error("Failed to set widget assets state"));
                 } else {
@@ -267,7 +269,7 @@ export default class ScalarAuthClient {
         });
     }
 
-    getScalarInterfaceUrlForRoom(room, screen, id) {
+    getScalarInterfaceUrlForRoom(room: Room, screen: string, id: string): string {
         const roomId = room.roomId;
         const roomName = room.name;
         let url = this.uiUrl;
@@ -284,7 +286,7 @@ export default class ScalarAuthClient {
         return url;
     }
 
-    getStarterLink(starterLinkUrl) {
+    getStarterLink(starterLinkUrl: string): string {
         return starterLinkUrl + "?scalar_token=" + encodeURIComponent(this.scalarToken);
     }
 }
diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx
index 6ce1439164..4a7b37b5e5 100644
--- a/src/SlashCommands.tsx
+++ b/src/SlashCommands.tsx
@@ -38,7 +38,7 @@ 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 } from "parse5";
+import { parseFragment as parseHtml, Element as ChildElement } from "parse5";
 import BugReportDialog from "./components/views/dialogs/BugReportDialog";
 import { ensureDMExists } from "./createRoom";
 import { ViewUserPayload } from "./dispatcher/payloads/ViewUserPayload";
@@ -856,7 +856,7 @@ export const Commands = [
                 // some superfast regex over the text so we don't have to.
                 const embed = parseHtml(widgetUrl);
                 if (embed && embed.childNodes && embed.childNodes.length === 1) {
-                    const iframe = embed.childNodes[0];
+                    const iframe = embed.childNodes[0] as ChildElement;
                     if (iframe.tagName.toLowerCase() === 'iframe' && iframe.attrs) {
                         const srcAttr = iframe.attrs.find(a => a.name === 'src');
                         console.log("Pulling URL out of iframe (embed code)");
diff --git a/src/Terms.js b/src/Terms.ts
similarity index 87%
rename from src/Terms.js
rename to src/Terms.ts
index 6ae89f9a2c..1bdff36cbc 100644
--- a/src/Terms.js
+++ b/src/Terms.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@ limitations under the License.
 import classNames from 'classnames';
 
 import {MatrixClientPeg} from './MatrixClientPeg';
-import * as sdk from './';
+import * as sdk from '.';
 import Modal from './Modal';
 
 export class TermsNotSignedError extends Error {}
@@ -32,13 +32,30 @@ export class Service {
      * @param {string} baseUrl The Base URL of the service (ie. before '/_matrix')
      * @param {string} accessToken The user's access token for the service
      */
-    constructor(serviceType, baseUrl, accessToken) {
-        this.serviceType = serviceType;
-        this.baseUrl = baseUrl;
-        this.accessToken = accessToken;
+    constructor(public serviceType: string, public baseUrl: string, public accessToken: string) {
     }
 }
 
+interface Policy {
+    // @ts-ignore: No great way to express indexed types together with other keys
+    version: string;
+    [lang: string]: {
+        url: string;
+    };
+}
+type Policies = {
+    [policy: string]: Policy,
+};
+
+export type TermsInteractionCallback = (
+    policiesAndServicePairs: {
+        service: Service,
+        policies: Policies,
+    }[],
+    agreedUrls: string[],
+    extraClassNames?: string,
+) => Promise;
+
 /**
  * Start a flow where the user is presented with terms & conditions for some services
  *
@@ -51,8 +68,8 @@ export class Service {
  *     if they cancel.
  */
 export async function startTermsFlow(
-    services,
-    interactionCallback = dialogTermsInteractionCallback,
+    services: Service[],
+    interactionCallback: TermsInteractionCallback = dialogTermsInteractionCallback,
 ) {
     const termsPromises = services.map(
         (s) => MatrixClientPeg.get().getTerms(s.serviceType, s.baseUrl),
@@ -77,7 +94,7 @@ export async function startTermsFlow(
      * }
      */
 
-    const terms = await Promise.all(termsPromises);
+    const terms: { policies: Policies }[] = await Promise.all(termsPromises);
     const policiesAndServicePairs = terms.map((t, i) => { return { 'service': services[i], 'policies': t.policies }; });
 
     // fetch the set of agreed policy URLs from account data
@@ -158,10 +175,13 @@ export async function startTermsFlow(
 }
 
 export function dialogTermsInteractionCallback(
-    policiesAndServicePairs,
-    agreedUrls,
-    extraClassNames,
-) {
+    policiesAndServicePairs: {
+        service: Service,
+        policies: { [policy: string]: Policy },
+    }[],
+    agreedUrls: string[],
+    extraClassNames?: string,
+): Promise {
     return new Promise((resolve, reject) => {
         console.log("Terms that need agreement", policiesAndServicePairs);
         const TermsDialog = sdk.getComponent("views.dialogs.TermsDialog");
diff --git a/src/TextForEvent.js b/src/TextForEvent.js
index a6787c647d..86f9ff20f4 100644
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@@ -547,17 +547,23 @@ function textForMjolnirEvent(event) {
 
     // else the entity !== prevEntity - count as a removal & add
     if (USER_RULE_TYPES.includes(event.getType())) {
-        return _t("%(senderName)s changed a rule that was banning users matching %(oldGlob)s to matching " +
+        return _t(
+            "%(senderName)s changed a rule that was banning users matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
-            {senderName, oldGlob: prevEntity, newGlob: entity, reason});
+            {senderName, oldGlob: prevEntity, newGlob: entity, reason},
+        );
     } else if (ROOM_RULE_TYPES.includes(event.getType())) {
-        return _t("%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching " +
+        return _t(
+            "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
-            {senderName, oldGlob: prevEntity, newGlob: entity, reason});
+            {senderName, oldGlob: prevEntity, newGlob: entity, reason},
+        );
     } else if (SERVER_RULE_TYPES.includes(event.getType())) {
-        return _t("%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching " +
+        return _t(
+            "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
-            {senderName, oldGlob: prevEntity, newGlob: entity, reason});
+            {senderName, oldGlob: prevEntity, newGlob: entity, reason},
+        );
     }
 
     // Unknown type. We'll say something but we shouldn't end up here.
diff --git a/src/Unread.js b/src/Unread.js
index ddf225ac64..12c15eb6af 100644
--- a/src/Unread.js
+++ b/src/Unread.js
@@ -45,7 +45,7 @@ export function eventTriggersUnreadCount(ev) {
 }
 
 export function doesRoomHaveUnreadMessages(room) {
-    const myUserId = MatrixClientPeg.get().credentials.userId;
+    const myUserId = MatrixClientPeg.get().getUserId();
 
     // get the most recent read receipt sent by our account.
     // N.B. this is NOT a read marker (RM, aka "read up to marker"),
diff --git a/src/VoipUserMapper.ts b/src/VoipUserMapper.ts
index 4f5613b4a8..e5bed2e812 100644
--- a/src/VoipUserMapper.ts
+++ b/src/VoipUserMapper.ts
@@ -57,7 +57,11 @@ export default class VoipUserMapper {
         if (!virtualRoom) return null;
         const virtualRoomEvent = virtualRoom.getAccountData(VIRTUAL_ROOM_EVENT_TYPE);
         if (!virtualRoomEvent || !virtualRoomEvent.getContent()) return null;
-        return virtualRoomEvent.getContent()['native_room'] || null;
+        const nativeRoomID = virtualRoomEvent.getContent()['native_room'];
+        const nativeRoom = MatrixClientPeg.get().getRoom(nativeRoomID);
+        if (!nativeRoom || nativeRoom.getMyMembership() !== 'join') return null;
+
+        return nativeRoomID;
     }
 
     public isVirtualRoom(room: Room): boolean {
diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
similarity index 90%
rename from src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js
rename to src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
index be3368b87b..0710c513da 100644
--- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js
+++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
@@ -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.
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import * as sdk from '../../../../index';
-import PropTypes from 'prop-types';
 import { _t } from '../../../../languageHandler';
 import SdkConfig from '../../../../SdkConfig';
 import SettingsStore from "../../../../settings/SettingsStore";
@@ -26,14 +25,23 @@ import {formatBytes, formatCountLong} from "../../../../utils/FormattingUtils";
 import EventIndexPeg from "../../../../indexing/EventIndexPeg";
 import {SettingLevel} from "../../../../settings/SettingLevel";
 
+interface IProps {
+    onFinished: (confirmed: boolean) => void;
+}
+
+interface IState {
+    eventIndexSize: number;
+    eventCount: number;
+    crawlingRoomsCount: number;
+    roomCount: number;
+    currentRoom: string;
+    crawlerSleepTime: number;
+}
+
 /*
  * Allows the user to introspect the event index state and disable it.
  */
-export default class ManageEventIndexDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
+export default class ManageEventIndexDialog extends React.Component {
     constructor(props) {
         super(props);
 
@@ -84,7 +92,7 @@ export default class ManageEventIndexDialog extends React.Component {
         }
     }
 
-    async componentDidMount(): void {
+    async componentDidMount(): Promise {
         let eventIndexSize = 0;
         let crawlingRoomsCount = 0;
         let roomCount = 0;
@@ -123,14 +131,14 @@ export default class ManageEventIndexDialog extends React.Component {
         });
     }
 
-    _onDisable = async () => {
+    private onDisable = async () => {
         Modal.createTrackedDialogAsync("Disable message search", "Disable message search",
             import("./DisableEventIndexDialog"),
             null, null, /* priority = */ false, /* static = */ true,
         );
     };
 
-    _onCrawlerSleepTimeChange = (e) => {
+    private onCrawlerSleepTimeChange = (e) => {
         this.setState({crawlerSleepTime: e.target.value});
         SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
     };
@@ -144,7 +152,7 @@ export default class ManageEventIndexDialog extends React.Component {
             crawlerState = _t("Not currently indexing messages for any room.");
         } else {
             crawlerState = (
-                    _t("Currently indexing: %(currentRoom)s", { currentRoom: this.state.currentRoom })
+                _t("Currently indexing: %(currentRoom)s", { currentRoom: this.state.currentRoom })
             );
         }
 
@@ -169,7 +177,7 @@ export default class ManageEventIndexDialog extends React.Component {
                         label={_t('Message downloading sleep time(ms)')}
                         type='number'
                         value={this.state.crawlerSleepTime}
-                        onChange={this._onCrawlerSleepTimeChange} />
+                        onChange={this.onCrawlerSleepTimeChange} />
                 

             

         );
@@ -188,7 +196,7 @@ export default class ManageEventIndexDialog extends React.Component {
                     onPrimaryButtonClick={this.props.onFinished}
                     primaryButtonClass="primary"
                     cancelButton={_t("Disable")}
-                    onCancel={this._onDisable}
+                    onCancel={this.onDisable}
                     cancelButtonClass="danger"
                 />
             
diff --git a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
index 863ee2b427..549494b5cb 100644
--- a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
+++ b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
@@ -310,7 +310,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return 

             
{_t(
-                "Please enter your Security Phrase a second time to confirm.",
+                "Enter your Security Phrase a second time to confirm it.",
             )}

             

                 

@@ -498,9 +498,9 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                 title={this._titleForPhase(this.state.phase)}
                 hasCancel={[PHASE_PASSPHRASE, PHASE_DONE].includes(this.state.phase)}
             >
-            

-                {content}
-            

+                

+                    {content}
+                

             
         );
     }
diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
index 84cb58536a..6d5703a768 100644
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
@@ -647,7 +647,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         }
         return 
             
{_t(
-                "Enter your recovery passphrase a second time to confirm it.",
+                "Enter your Security Phrase a second time to confirm it.",
             )}

             

                 
@@ -856,9 +856,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
                 fixedWidth={false}
             >
-            

-                {content}
-            

+                

+                    {content}
+                

             
         );
     }
diff --git a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
index eeb68b94bd..60f2ca9168 100644
--- a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
@@ -170,8 +170,11 @@ export default class ExportE2eKeysDialog extends React.Component {
                         

                     

                     

-                        
                         

                         

                             

-                               

-                                   
-                               

-                               

-                                   
-                               

+                                

+                                    
+                                

+                                

+                                    
+                                

                             

                             

-                               

-                                   
-                               

-                               

-                                   
-                               

+                                

+                                    
+                                

+                                

+                                    
+                                

                             

                         

                     

diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index 32db5c251c..d5e4b092e2 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -200,10 +200,10 @@ class FilePanel extends React.Component {
                 previousPhase={RightPanelPhases.RoomSummary}
             >
                 

-                { _t("You must register to use this functionality",
-                    {},
-                    { 'a': (sub) => { sub } })
-                }
+                    { _t("You must register to use this functionality",
+                        {},
+                        { 'a': (sub) => { sub } })
+                    }
                 

             ;
         } else if (this.noRoom) {
diff --git a/src/components/structures/GroupFilterPanel.js b/src/components/structures/GroupFilterPanel.js
index 976b2d81a5..7c050e7433 100644
--- a/src/components/structures/GroupFilterPanel.js
+++ b/src/components/structures/GroupFilterPanel.js
@@ -153,17 +153,17 @@ class GroupFilterPanel extends React.Component {
                     type="draggable-TagTile"
                 >
                     { (provided, snapshot) => (
-                            

-                                { this.renderGlobalIcon() }
-                                { tags }
-                                

-                                    {createButton}
-                                

-                                { provided.placeholder }
+                        

+                            { this.renderGlobalIcon() }
+                            { tags }
+                            

+                                {createButton}
                             

+                            { provided.placeholder }
+                        

                     ) }
                 
             
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index ed6167cbe7..3ab009d7b8 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -43,7 +43,7 @@ import {mediaFromMxc} from "../../customisations/Media";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 
 const LONG_DESC_PLACEHOLDER = _td(
-`
HTML for your community's page

+    `
HTML for your community's page

 

     Use the long description to introduce new members to the community, or distribute
     some important links
@@ -110,14 +110,16 @@ class CategoryRoomList extends React.Component {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createTrackedDialog(
                         'Failed to add the following room to the group summary',
-                        '', ErrorDialog,
-                    {
-                        title: _t(
-                            "Failed to add the following rooms to the summary of %(groupId)s:",
-                            {groupId: this.props.groupId},
-                        ),
-                        description: errorList.join(", "),
-                    });
+                        '',
+                        ErrorDialog,
+                        {
+                            title: _t(
+                                "Failed to add the following rooms to the summary of %(groupId)s:",
+                                {groupId: this.props.groupId},
+                            ),
+                            description: errorList.join(", "),
+                        },
+                    );
                 });
             },
         }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
@@ -146,8 +148,8 @@ class CategoryRoomList extends React.Component {
         let catHeader = 
;
         if (this.props.category && this.props.category.profile) {
             catHeader = 

-            { this.props.category.profile.name }
-        
;
+                { this.props.category.profile.name }
+            
;
         }
         return 

             { catHeader }
@@ -190,13 +192,14 @@ class FeaturedRoom extends React.Component {
             Modal.createTrackedDialog(
                 'Failed to remove room from group summary',
                 '', ErrorDialog,
-            {
-                title: _t(
-                    "Failed to remove the room from the summary of %(groupId)s",
-                    {groupId: this.props.groupId},
-                ),
-                description: _t("The room '%(roomName)s' could not be removed from the summary.", {roomName}),
-            });
+                {
+                    title: _t(
+                        "Failed to remove the room from the summary of %(groupId)s",
+                        {groupId: this.props.groupId},
+                    ),
+                    description: _t("The room '%(roomName)s' could not be removed from the summary.", {roomName}),
+                },
+            );
         });
     };
 
@@ -283,13 +286,14 @@ class RoleUserList extends React.Component {
                     Modal.createTrackedDialog(
                         'Failed to add the following users to the community summary',
                         '', ErrorDialog,
-                    {
-                        title: _t(
-                            "Failed to add the following users to the summary of %(groupId)s:",
-                            {groupId: this.props.groupId},
-                        ),
-                        description: errorList.join(", "),
-                    });
+                        {
+                            title: _t(
+                                "Failed to add the following users to the summary of %(groupId)s:",
+                                {groupId: this.props.groupId},
+                            ),
+                            description: errorList.join(", "),
+                        },
+                    );
                 });
             },
         }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
@@ -299,11 +303,11 @@ class RoleUserList extends React.Component {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const addButton = this.props.editing ?
             (
-                 
-                 

-                     { _t('Add a User') }
-                 

-             ) : 
;
+                
+                

+                    { _t('Add a User') }
+                

+            ) : 
;
         const userNodes = this.props.users.map((u) => {
             return 
-                { _t("Leave %(groupName)s?", {groupName: this.props.groupId}) }
-                { warnings }
+                    { _t("Leave %(groupName)s?", {groupName: this.props.groupId}) }
+                    { warnings }
                 
             ),
             button: _t("Leave"),
@@ -1055,10 +1061,11 @@ export default class GroupView extends React.Component {
             return null;
         }
 
-        const membershipButtonClasses = classnames([
-            'mx_RoomHeader_textButton',
-            'mx_GroupView_textButton',
-        ],
+        const membershipButtonClasses = classnames(
+            [
+                'mx_RoomHeader_textButton',
+                'mx_GroupView_textButton',
+            ],
             membershipButtonExtraClasses,
         );
 
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index e4762e35ad..7f9ef7516e 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -347,7 +347,7 @@ export default class LeftPanel extends React.Component {
             if (element) {
                 classes = element.classList;
             }
-        } while (element && !cssClasses.some(c => classes.contains(c)));
+        } while (element && (!cssClasses.some(c => classes.contains(c)) || element.offsetParent === null));
 
         if (element) {
             element.focus();
@@ -416,7 +416,7 @@ export default class LeftPanel extends React.Component {
 
         const roomList = ;
 }
 
 /**
@@ -160,6 +164,7 @@ class LoggedInView extends React.Component {
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
             usageLimitDismissed: false,
+            activeCalls: [],
         };
 
         // stash the MatrixClient in case we log out before we are unmounted
@@ -175,6 +180,7 @@ class LoggedInView extends React.Component {
 
     componentDidMount() {
         document.addEventListener('keydown', this._onNativeKeyDown, false);
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.onCallsChanged);
 
         this._updateServerNoticeEvents();
 
@@ -199,6 +205,7 @@ class LoggedInView extends React.Component {
 
     componentWillUnmount() {
         document.removeEventListener('keydown', this._onNativeKeyDown, false);
+        CallHandler.sharedInstance().removeListener(CallHandlerEvent.CallsChanged, this.onCallsChanged);
         this._matrixClient.removeListener("accountData", this.onAccountData);
         this._matrixClient.removeListener("sync", this.onSync);
         this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
@@ -206,6 +213,12 @@ class LoggedInView extends React.Component {
         this.resizer.detach();
     }
 
+    private onCallsChanged = () => {
+        this.setState({
+            activeCalls: CallHandler.sharedInstance().getAllActiveCalls(),
+        });
+    };
+
     // Child components assume that the client peg will not be null, so give them some
     // sort of assurance here by only allowing a re-render if the client is truthy.
     //
@@ -661,6 +674,12 @@ class LoggedInView extends React.Component {
             bodyClasses += ' mx_MatrixChat_useCompactLayout';
         }
 
+        const audioFeedArraysForCalls = this.state.activeCalls.map((call) => {
+            return (
+                
+            );
+        });
+
         return (
             
                 
 {
                 
                 
                 
+                {audioFeedArraysForCalls}
             
         );
     }
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 078b296295..e330dc7d38 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -1094,7 +1094,7 @@ export default class MatrixChat extends React.PureComponent {
 
     private leaveRoomWarnings(roomId: string) {
         const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
-        const isSpace = roomToLeave?.isSpaceRoom();
+        const isSpace = SettingsStore.getValue("feature_spaces") && roomToLeave?.isSpaceRoom();
         // Show a warning if there are additional complications.
         const warnings = [];
 
@@ -1133,7 +1133,7 @@ export default class MatrixChat extends React.PureComponent {
         const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
         const warnings = this.leaveRoomWarnings(roomId);
 
-        const isSpace = roomToLeave?.isSpaceRoom();
+        const isSpace = SettingsStore.getValue("feature_spaces") && roomToLeave?.isSpaceRoom();
         Modal.createTrackedDialog(isSpace ? "Leave space" : "Leave room", '', QuestionDialog, {
             title: isSpace ? _t("Leave space") : _t("Leave room"),
             description: (
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 132d9ab4c3..c93f07fa0f 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -427,8 +427,10 @@ export default class MessagePanel extends React.Component {
             // we get a new DOM node (restarting the animation) when the ghost
             // moves to a different event.
             return (
-                
  • 
+                
  • 
                     { hr }
                 
    • 
             );
@@ -1014,13 +1016,13 @@ class CreationGrouper {
 
         ret.push(
             
-                 { eventTiles }
+                { eventTiles }
             ,
         );
 
@@ -1222,11 +1224,11 @@ class MemberGrouper {
 
         ret.push(
             
-                 { eventTiles }
+                { eventTiles }
             ,
         );
 
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 5bcb3b2450..d8c763eabd 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -35,6 +35,7 @@ import {Action} from "../../dispatcher/actions";
 import RoomSummaryCard from "../views/right_panel/RoomSummaryCard";
 import WidgetCard from "../views/right_panel/WidgetCard";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import SettingsStore from "../../settings/SettingsStore";
 
 @replaceableComponent("structures.RightPanel")
 export default class RightPanel extends React.Component {
@@ -85,7 +86,9 @@ export default class RightPanel extends React.Component {
                 return RightPanelPhases.GroupMemberList;
             }
             return rps.groupPanelPhase;
-        } else if (this.props.room?.isSpaceRoom() && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase)) {
+        } else if (SettingsStore.getValue("feature_spaces") && this.props.room?.isSpaceRoom()
+            && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase)
+        ) {
             return RightPanelPhases.SpaceMemberList;
         } else if (userForPanel) {
             // XXX FIXME AAAAAARGH: What is going on with this class!? It takes some of its state
diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
index a64feed42c..34682877e0 100644
--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.tsx
@@ -17,6 +17,8 @@ limitations under the License.
 import * as React from "react";
 import { createRef } from "react";
 import classNames from "classnames";
+import { Room } from "matrix-js-sdk/src/models/room";
+
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
 import { ActionPayload } from "../../dispatcher/payloads";
@@ -26,7 +28,7 @@ import RoomListStore from "../../stores/room-list/RoomListStore";
 import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
 import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import {replaceableComponent} from "../../utils/replaceableComponent";
-import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
+import SpaceStore, {UPDATE_SELECTED_SPACE, UPDATE_TOP_LEVEL_SPACES} from "../../stores/SpaceStore";
 
 interface IProps {
     isMinimized: boolean;
@@ -40,6 +42,7 @@ interface IProps {
 interface IState {
     query: string;
     focused: boolean;
+    inSpaces: boolean;
 }
 
 @replaceableComponent("structures.RoomSearch")
@@ -54,11 +57,13 @@ export default class RoomSearch extends React.PureComponent {
         this.state = {
             query: "",
             focused: false,
+            inSpaces: false,
         };
 
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         // clear filter when changing spaces, in future we may wish to maintain a filter per-space
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.clearInput);
+        SpaceStore.instance.on(UPDATE_TOP_LEVEL_SPACES, this.onSpaces);
     }
 
     public componentDidUpdate(prevProps: Readonly, prevState: Readonly): void {
@@ -79,8 +84,15 @@ export default class RoomSearch extends React.PureComponent {
     public componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
+        SpaceStore.instance.off(UPDATE_TOP_LEVEL_SPACES, this.onSpaces);
     }
 
+    private onSpaces = (spaces: Room[]) => {
+        this.setState({
+            inSpaces: spaces.length > 0,
+        });
+    };
+
     private onAction = (payload: ActionPayload) => {
         if (payload.action === 'view_room' && payload.clear_search) {
             this.clearInput();
@@ -152,6 +164,11 @@ export default class RoomSearch extends React.PureComponent {
             'mx_RoomSearch_inputExpanded': this.state.query || this.state.focused,
         });
 
+        let placeholder = _t("Filter");
+        if (this.state.inSpaces) {
+            placeholder = _t("Filter all spaces");
+        }
+
         let icon = (
             
    
         );
@@ -165,7 +182,7 @@ export default class RoomSearch extends React.PureComponent {
                 onBlur={this.onBlur}
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
-                placeholder={_t("Filter")}
+                placeholder={placeholder}
                 autoComplete="off"
             />
         );
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 54b6fee233..b2f0c70bd7 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015-2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,16 +20,20 @@ import { _t, _td } from '../../languageHandler';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import Resend from '../../Resend';
 import dis from '../../dispatcher/dispatcher';
-import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
+import {messageForResourceLimitError} from '../../utils/ErrorUtils';
 import {Action} from "../../dispatcher/actions";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import {EventStatus} from "matrix-js-sdk/src/models/event";
+import NotificationBadge from "../views/rooms/NotificationBadge";
+import {StaticNotificationState} from "../../stores/notifications/StaticNotificationState";
+import AccessibleButton from "../views/elements/AccessibleButton";
+import InlineSpinner from "../views/elements/InlineSpinner";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
 const STATUS_BAR_EXPANDED_LARGE = 2;
 
-function getUnsentMessages(room) {
+export function getUnsentMessages(room) {
     if (!room) { return []; }
     return room.getPendingEvents().filter(function(ev) {
         return ev.status === EventStatus.NOT_SENT;
@@ -76,6 +80,7 @@ export default class RoomStatusBar extends React.Component {
         syncState: MatrixClientPeg.get().getSyncState(),
         syncStateData: MatrixClientPeg.get().getSyncStateData(),
         unsentMessages: getUnsentMessages(this.props.room),
+        isResending: false,
     };
 
     componentDidMount() {
@@ -109,7 +114,10 @@ export default class RoomStatusBar extends React.Component {
     };
 
     _onResendAllClick = () => {
-        Resend.resendUnsentEvents(this.props.room);
+        Resend.resendUnsentEvents(this.props.room).then(() => {
+            this.setState({isResending: false});
+        });
+        this.setState({isResending: true});
         dis.fire(Action.FocusComposer);
     };
 
@@ -120,9 +128,10 @@ export default class RoomStatusBar extends React.Component {
 
     _onRoomLocalEchoUpdated = (event, room, oldEventId, oldStatus) => {
         if (room.roomId !== this.props.room.roomId) return;
-
+        const messages = getUnsentMessages(this.props.room);
         this.setState({
-            unsentMessages: getUnsentMessages(this.props.room),
+            unsentMessages: messages,
+            isResending: messages.length > 0 && this.state.isResending,
         });
     };
 
@@ -141,7 +150,7 @@ export default class RoomStatusBar extends React.Component {
     _getSize() {
         if (this._shouldShowConnectionError()) {
             return STATUS_BAR_EXPANDED;
-        } else if (this.state.unsentMessages.length > 0) {
+        } else if (this.state.unsentMessages.length > 0 || this.state.isResending) {
             return STATUS_BAR_EXPANDED_LARGE;
         }
         return STATUS_BAR_HIDDEN;
@@ -162,7 +171,6 @@ export default class RoomStatusBar extends React.Component {
 
     _getUnsentMessageContent() {
         const unsentMessages = this.state.unsentMessages;
-        if (!unsentMessages.length) return null;
 
         let title;
 
@@ -192,89 +200,92 @@ export default class RoomStatusBar extends React.Component {
         } else if (resourceLimitError) {
             title = messageForResourceLimitError(
                 resourceLimitError.data.limit_type,
-                resourceLimitError.data.admin_contact, {
-                'monthly_active_user': _td(
-                    "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. " +
-                    "Please contact your service administrator to continue using the service.",
-                ),
-                'hs_disabled': _td(
-                    "Your message wasn't sent because this homeserver has been blocked by it's administrator. " +
-                    "Please contact your service administrator to continue using the service.",
-                ),
-                '': _td(
-                    "Your message wasn't sent because this homeserver has exceeded a resource limit. " +
-                    "Please contact your service administrator to continue using the service.",
-                ),
-            });
-        } else if (
-            unsentMessages.length === 1 &&
-            unsentMessages[0].error &&
-            unsentMessages[0].error.data &&
-            unsentMessages[0].error.data.error
-        ) {
-            title = messageForSendError(unsentMessages[0].error.data) || unsentMessages[0].error.data.error;
+                resourceLimitError.data.admin_contact,
+                {
+                    'monthly_active_user': _td(
+                        "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. " +
+                        "Please contact your service administrator to continue using the service.",
+                    ),
+                    'hs_disabled': _td(
+                        "Your message wasn't sent because this homeserver has been blocked by it's administrator. " +
+                        "Please contact your service administrator to continue using the service.",
+                    ),
+                    '': _td(
+                        "Your message wasn't sent because this homeserver has exceeded a resource limit. " +
+                        "Please contact your service administrator to continue using the service.",
+                    ),
+                },
+            );
         } else {
-            title = _t('%(count)s of your messages have not been sent.', { count: unsentMessages.length });
+            title = _t('Some of your messages have not been sent');
         }
 
-        const content = _t("%(count)s Resend all or cancel all " +
-            "now. You can also select individual messages to resend or cancel.",
-            { count: unsentMessages.length },
-            {
-                'resendText': (sub) =>
-                    { sub },
-                'cancelText': (sub) =>
-                    { sub },
-            },
-        );
+        let buttonRow = <>
+            
+                {_t("Delete all")}
+            
+            
+                {_t("Retry all")}
+            
+        ;
+        if (this.state.isResending) {
+            buttonRow = <>
+                
+                {/* span for css */}
+                {_t("Sending")}
+            ;
+        }
 
-        return 
    
-            
-            
    
-                
    
-                    { title }
-                
    
-                
    
-                    { content }
+        return <>
+            
    
+                
    
+                    
    
+                        
+                    
    
+                    
    
+                        
    
+                            { title }
+                        
    
+                        
    
+                            { _t("You can select all or individual messages to retry or delete") }
+                        
    
+                    
    
+                    
    
+                        {buttonRow}
+                    
    
                 
    
             
    
-        
    ;
+        ;
     }
 
-    // return suitable content for the main (text) part of the status bar.
-    _getContent() {
+    render() {
         if (this._shouldShowConnectionError()) {
             return (
-                
    
-                    /!\ 
-                    
    
-                        
    
-                            { _t('Connectivity to the server has been lost.') }
-                        
    
-                        
    
-                            { _t('Sent messages will be stored until your connection has returned.') }
+                
    
+                    
    
+                        
    
+                            /!\ 
+                            
    
+                                
    
+                                    {_t('Connectivity to the server has been lost.')}
+                                
    
+                                
    
+                                    {_t('Sent messages will be stored until your connection has returned.')}
+                                
    
+                            
    
                         
    
                     
    
                 
    
             );
         }
 
-        if (this.state.unsentMessages.length > 0) {
+        if (this.state.unsentMessages.length > 0 || this.state.isResending) {
             return this._getUnsentMessageContent();
         }
 
         return null;
     }
-
-    render() {
-        const content = this._getContent();
-
-        return (
-            
    
-                
    
-                    { content }
-                
    
-            
    
-        );
-    }
 }
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 7168b7d139..58a87e6641 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -190,6 +190,9 @@ export interface IState {
     rejectError?: Error;
     hasPinnedWidgets?: boolean;
     dragCounter: number;
+    // whether or not a spaces context switch brought us here,
+    // if it did we don't want the room to be marked as read as soon as it is loaded.
+    wasContextSwitch?: boolean;
 }
 
 @replaceableComponent("structures.RoomView")
@@ -326,6 +329,7 @@ export default class RoomView extends React.Component {
             shouldPeek: this.state.matrixClientIsReady && RoomViewStore.shouldPeek(),
             showingPinned: SettingsStore.getValue("PinnedEvents.isOpen", roomId),
             showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
+            wasContextSwitch: RoomViewStore.getWasContextSwitch(),
         };
 
         if (!initial && this.state.shouldPeek && !newState.shouldPeek) {
@@ -1746,7 +1750,10 @@ export default class RoomView extends React.Component {
         }
 
         const myMembership = this.state.room.getMyMembership();
-        if (myMembership === "invite" && !this.state.room.isSpaceRoom()) { // SpaceRoomView handles invites itself
+        if (myMembership === "invite"
+            // SpaceRoomView handles invites itself
+            && (!SettingsStore.getValue("feature_spaces") || !this.state.room.isSpaceRoom())
+        ) {
             if (this.state.joining || this.state.rejecting) {
                 return (
                     
@@ -1888,7 +1895,7 @@ export default class RoomView extends React.Component {
                     room={this.state.room}
                 />
             );
-            if (!this.state.canPeek && !this.state.room?.isSpaceRoom()) {
+            if (!this.state.canPeek && (!SettingsStore.getValue("feature_spaces") || !this.state.room?.isSpaceRoom())) {
                 return (
                     
    
                         { previewBar }
@@ -2014,6 +2021,7 @@ export default class RoomView extends React.Component {
                 timelineSet={this.state.room.getUnfilteredTimelineSet()}
                 showReadReceipts={this.state.showReadReceipts}
                 manageReadReceipts={!this.state.isPeeking}
+                sendReadReceiptOnLoad={!this.state.wasContextSwitch}
                 manageReadMarkers={!this.state.isPeeking}
                 hidden={hideMessagePanel}
                 highlightedEventId={highlightedEventId}
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 976734680c..5c5062633d 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -525,7 +525,7 @@ export default class ScrollPanel extends React.Component {
      */
     scrollRelative = mult => {
         const scrollNode = this._getScrollNode();
-        const delta = mult * scrollNode.clientHeight * 0.5;
+        const delta = mult * scrollNode.clientHeight * 0.9;
         scrollNode.scrollBy(0, delta);
         this._saveScrollState();
     };
@@ -884,16 +884,20 @@ export default class ScrollPanel extends React.Component {
 
         // give the 
       an explicit role=list because Safari+VoiceOver seems to think an ordered-list with
         // list-style-type: none; is no longer a list
-        return (
-                    { this.props.fixedChildren }
-                    
      
-                        
        
-                            { this.props.children }
-                        
      
-                    
      
-                      
-            );
+                className={`mx_ScrollPanel ${this.props.className}`}
+                style={this.props.style}
+            >
+                { this.props.fixedChildren }
+                
      
+                    
        
+                        { this.props.children }
+                    
      
+                
      
+            
+        );
     }
 }
diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index 930cfa15a9..74415cc58f 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useMemo, useState} from "react";
+import React, {ReactNode, useMemo, useState} from "react";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClient} from "matrix-js-sdk/src/client";
 import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
@@ -24,7 +24,7 @@ import {sortBy} from "lodash";
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import dis from "../../dispatcher/dispatcher";
 import {_t} from "../../languageHandler";
-import AccessibleButton from "../views/elements/AccessibleButton";
+import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
 import BaseDialog from "../views/dialogs/BaseDialog";
 import Spinner from "../views/elements/Spinner";
 import SearchBox from "./SearchBox";
@@ -39,11 +39,14 @@ import {mediaFromMxc} from "../../customisations/Media";
 import InfoTooltip from "../views/elements/InfoTooltip";
 import TextWithTooltip from "../views/elements/TextWithTooltip";
 import {useStateToggle} from "../../hooks/useStateToggle";
+import {getOrder} from "../../stores/SpaceStore";
+import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 
 interface IHierarchyProps {
     space: Room;
     initialText?: string;
     refreshToken?: any;
+    additionalButtons?: ReactNode;
     showRoom(room: ISpaceSummaryRoom, viaServers?: string[], autoJoin?: boolean): void;
 }
 
@@ -106,8 +109,16 @@ const Tile: React.FC = ({
     const cliRoom = cli.getRoom(room.room_id);
     const myMembership = cliRoom?.getMyMembership();
 
-    const onPreviewClick = () => onViewRoomClick(false);
-    const onJoinClick = () => onViewRoomClick(true);
+    const onPreviewClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        onViewRoomClick(false);
+    }
+    const onJoinClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        onViewRoomClick(true);
+    }
 
     let button;
     if (myMembership === "join") {
@@ -136,7 +147,7 @@ const Tile: React.FC = ({
 
     let url: string;
     if (room.avatar_url) {
-        url = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(Math.floor(20 * window.devicePixelRatio));
+        url = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(20);
     }
 
     let description = _t("%(count)s members", { count: room.num_joined_members });
@@ -254,7 +265,11 @@ export const HierarchyLevel = ({
     const space = cli.getRoom(spaceId);
     const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
 
-    const sortedChildren = sortBy([...(relations.get(spaceId)?.values() || [])], ev => ev.content.order || null);
+    const children = Array.from(relations.get(spaceId)?.values() || []);
+    const sortedChildren = sortBy(children, ev => {
+        // XXX: Space Summary API doesn't give the child origin_server_ts but once it does we should use it for sorting
+        return getOrder(ev.content.order, null, ev.state_key);
+    });
     const [subspaces, childRooms] = sortedChildren.reduce((result, ev: ISpaceSummaryEvent) => {
         const roomId = ev.state_key;
         if (!rooms.has(roomId)) return result;
@@ -312,11 +327,12 @@ export const HierarchyLevel = ({
 
 // mutate argument refreshToken to force a reload
 export const useSpaceSummary = (cli: MatrixClient, space: Room, refreshToken?: any): [
+    null,
     ISpaceSummaryRoom[],
-    Map>,
-    Map>,
-    Map>,
-] | [] => {
+    Map>?,
+    Map>?,
+    Map>?,
+] | [Error] => {
     // TODO pagination
     return useAsyncMemo(async () => {
         try {
@@ -336,13 +352,12 @@ export const useSpaceSummary = (cli: MatrixClient, space: Room, refreshToken?: a
                 }
             });
 
-            return [data.rooms as ISpaceSummaryRoom[], parentChildRelations, viaMap, childParentRelations];
+            return [null, data.rooms as ISpaceSummaryRoom[], parentChildRelations, viaMap, childParentRelations];
         } catch (e) {
             console.error(e); // TODO
+            return [e];
         }
-
-        return [];
-    }, [space, refreshToken], []);
+    }, [space, refreshToken], [undefined]);
 };
 
 export const SpaceHierarchy: React.FC = ({
@@ -350,6 +365,7 @@ export const SpaceHierarchy: React.FC = ({
     initialText = "",
     showRoom,
     refreshToken,
+    additionalButtons,
     children,
 }) => {
     const cli = MatrixClientPeg.get();
@@ -358,7 +374,7 @@ export const SpaceHierarchy: React.FC = ({
 
     const [selected, setSelected] = useState(new Map>()); // Map>
 
-    const [rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space, refreshToken);
+    const [summaryError, rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space, refreshToken);
 
     const roomsMap = useMemo(() => {
         if (!rooms) return null;
@@ -397,6 +413,10 @@ export const SpaceHierarchy: React.FC = ({
     const [removing, setRemoving] = useState(false);
     const [saving, setSaving] = useState(false);
 
+    if (summaryError) {
+        return 
      {_t("Your server does not support showing space hierarchies.")}
      ;
+    }
+
     let content;
     if (roomsMap) {
         const numRooms = Array.from(roomsMap.values()).filter(r => r.room_type !== RoomType.Space).length;
@@ -411,78 +431,83 @@ export const SpaceHierarchy: React.FC = ({
             countsStr = _t("%(count)s rooms", { count: numRooms, numSpaces });
         }
 
-        let editSection;
+        let manageButtons;
         if (space.getMyMembership() === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
             const selectedRelations = Array.from(selected.keys()).flatMap(parentId => {
                 return [...selected.get(parentId).values()].map(childId => [parentId, childId]) as [string, string][];
             });
 
-            let buttons;
-            if (selectedRelations.length) {
-                const selectionAllSuggested = selectedRelations.every(([parentId, childId]) => {
-                    return parentChildMap.get(parentId)?.get(childId)?.content.suggested;
-                });
+            const selectionAllSuggested = selectedRelations.every(([parentId, childId]) => {
+                return parentChildMap.get(parentId)?.get(childId)?.content.suggested;
+            });
 
-                const disabled = removing || saving;
+            const disabled = !selectedRelations.length || removing || saving;
 
-                buttons = <>
-                     {
-                            setRemoving(true);
-                            try {
-                                for (const [parentId, childId] of selectedRelations) {
-                                    await cli.sendStateEvent(parentId, EventType.SpaceChild, {}, childId);
-                                    parentChildMap.get(parentId).get(childId).content = {};
-                                    parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
-                                }
-                            } catch (e) {
-                                setError(_t("Failed to remove some rooms. Try again later"));
-                            }
-                            setRemoving(false);
-                        }}
-                        kind="danger_outline"
-                        disabled={disabled}
-                    >
-                        { removing ? _t("Removing...") : _t("Remove") }
-                    
-                     {
-                            setSaving(true);
-                            try {
-                                for (const [parentId, childId] of selectedRelations) {
-                                    const suggested = !selectionAllSuggested;
-                                    const existingContent = parentChildMap.get(parentId)?.get(childId)?.content;
-                                    if (!existingContent || existingContent.suggested === suggested) continue;
-
-                                    const content = {
-                                        ...existingContent,
-                                        suggested: !selectionAllSuggested,
-                                    };
-
-                                    await cli.sendStateEvent(parentId, EventType.SpaceChild, content, childId);
-
-                                    parentChildMap.get(parentId).get(childId).content = content;
-                                    parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
-                                }
-                            } catch (e) {
-                                setError("Failed to update some suggestions. Try again later");
-                            }
-                            setSaving(false);
-                        }}
-                        kind="primary_outline"
-                        disabled={disabled}
-                    >
-                        { saving
-                            ? _t("Saving...")
-                            : (selectionAllSuggested ? _t("Mark as not suggested") : _t("Mark as suggested"))
-                        }
-                    
-                ;
+            let Button: React.ComponentType> = AccessibleButton;
+            let props = {};
+            if (!selectedRelations.length) {
+                Button = AccessibleTooltipButton;
+                props = {
+                    tooltip: _t("Select a room below first"),
+                    yOffset: -40,
+                };
             }
 
-            editSection = 
-                { buttons }
-            ;
+            manageButtons = <>
+                
+                
+            ;
         }
 
         let results;
@@ -528,7 +553,10 @@ export const SpaceHierarchy: React.FC = ({
         content = <>
             
      
                 { countsStr }
-                { editSection }
+                
+                    { additionalButtons }
+                    { manageButtons }
+                
             
      
             { error && 
      
                 { error }
@@ -538,10 +566,8 @@ export const SpaceHierarchy: React.FC = ({
                 { children }
             
         ;
-    } else if (!rooms) {
-        content = ;
     } else {
-        content = 
      {_t("Your server does not support showing space hierarchies.")}
      ;
+        content = ;
     }
 
     // TODO loading state/error state
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index 31358a3731..5db54815b7 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -51,6 +51,15 @@ import MemberAvatar from "../views/avatars/MemberAvatar";
 import {useStateToggle} from "../../hooks/useStateToggle";
 import SpaceStore from "../../stores/SpaceStore";
 import FacePile from "../views/elements/FacePile";
+import {AddExistingToSpace} from "../views/dialogs/AddExistingToSpaceDialog";
+import {sleep} from "../../utils/promise";
+import {calculateRoomVia} from "../../utils/permalinks/Permalinks";
+import {ChevronFace, ContextMenuButton, useContextMenu} from "./ContextMenu";
+import IconizedContextMenu, {
+    IconizedContextMenuOption,
+    IconizedContextMenuOptionList,
+} from "../views/context_menus/IconizedContextMenu";
+import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 
 interface IProps {
     space: Room;
@@ -214,6 +223,67 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
     
      ;
 };
 
+const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => {
+    const cli = useContext(MatrixClientContext);
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu;
+    if (menuDisplayed) {
+        const rect = handle.current.getBoundingClientRect();
+        contextMenu = 
+            
+                 {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        closeMenu();
+
+                        if (await showCreateNewRoom(cli, space)) {
+                            onNewRoomAdded();
+                        }
+                    }}
+                />
+                 {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        closeMenu();
+
+                        const [added] = await showAddExistingRooms(cli, space);
+                        if (added) {
+                            onNewRoomAdded();
+                        }
+                    }}
+                />
+            
+        ;
+    }
+
+    return <>
+        
+            { _t("Add") }
+        
+        { contextMenu }
+    ;
+};
+
 const SpaceLanding = ({ space }) => {
     const cli = useContext(MatrixClientContext);
     const myMembership = useMyRoomMembership(space);
@@ -238,32 +308,20 @@ const SpaceLanding = ({ space }) => {
 
     const [refreshToken, forceUpdate] = useStateToggle(false);
 
-    let addRoomButtons;
+    let addRoomButton;
     if (canAddRooms) {
-        addRoomButtons = 
-             {
-                const [added] = await showAddExistingRooms(cli, space);
-                if (added) {
-                    forceUpdate();
-                }
-            }}>
-                { _t("Add existing rooms & spaces") }
-            
-             {
-                showCreateNewRoom(cli, space);
-            }}>
-                { _t("Create a new room") }
-            
-        ;
+        addRoomButton = ;
     }
 
     let settingsButton;
     if (shouldShowSpaceSettings(cli, space)) {
-        settingsButton =  {
-            showSpaceSettings(cli, space);
-        }}>
-            { _t("Settings") }
-        ;
+        settingsButton =  {
+                showSpaceSettings(cli, space);
+            }}
+            title={_t("Settings")}
+        />;
     }
 
     const onMembersClick = () => {
@@ -290,17 +348,19 @@ const SpaceLanding = ({ space }) => {
             
             
             { inviteButton }
+            { settingsButton }
         
    
         
    
             
         
    
         
    
-        
    
-            { addRoomButtons }
-            { settingsButton }
-        
    
 
-        
+        
     
    ;
 };
 
@@ -354,7 +414,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
     let buttonLabel = _t("Skip for now");
     if (roomNames.some(name => name.trim())) {
         onClick = onNextClick;
-        buttonLabel = busy ? _t("Creating rooms...") : _t("Continue")
+        buttonLabel = busy ? _t("Creating rooms...") : _t("Continue");
     }
 
     return 
    
@@ -376,6 +436,74 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
     
    ;
 };
 
+const SpaceAddExistingRooms = ({ space, onFinished }) => {
+    const [selectedToAdd, setSelectedToAdd] = useState(new Set());
+
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+
+    let onClick = onFinished;
+    let buttonLabel = _t("Skip for now");
+    if (selectedToAdd.size > 0) {
+        onClick = async () => {
+            setBusy(true);
+
+            for (const room of selectedToAdd) {
+                const via = calculateRoomVia(room);
+                try {
+                    await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async e => {
+                        if (e.errcode === "M_LIMIT_EXCEEDED") {
+                            await sleep(e.data.retry_after_ms);
+                            return SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
+                        }
+
+                        throw e;
+                    });
+                } catch (e) {
+                    console.error("Failed to add rooms to space", e);
+                    setError(_t("Failed to add rooms to space"));
+                    break;
+                }
+            }
+            setBusy(false);
+        };
+        buttonLabel = busy ? _t("Adding...") : _t("Add");
+    }
+
+    return 
    
+        
    { _t("What do you want to organise?") }
    
+        
    
+            { _t("Pick rooms or conversations to add. This is just a space for you, " +
+                "no one will be informed. You can add more later.") }
+        
    
+
+        { error && 
    { error }
     }
+
+         {
+                if (checked) {
+                    selectedToAdd.add(room);
+                } else {
+                    selectedToAdd.delete(room);
+                }
+                setSelectedToAdd(new Set(selectedToAdd));
+            }}
+        />
+
+        
    
+            
+                { buttonLabel }
+            
+        
    
+    
    ;
+};
+
 const SpaceSetupPublicShare = ({ space, onFinished }) => {
     return 
    
         
    { _t("Share %(name)s", { name: space.name }) }
    
@@ -659,7 +787,7 @@ export default class SpaceRoomView extends React.PureComponent {
                 return  {
-                        this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
+                        this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateExistingRooms });
                     }}
                 />;
             case Phase.PrivateInvite:
@@ -675,6 +803,11 @@ export default class SpaceRoomView extends React.PureComponent {
                         "You can add more later too, including already existing ones.")}
                     onFinished={() => this.setState({ phase: Phase.Landing })}
                 />;
+            case Phase.PrivateExistingRooms:
+                return  this.setState({ phase: Phase.Landing })}
+                />;
         }
     }
 
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 12f5d6e890..8cc344f66b 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -68,6 +68,7 @@ class TimelinePanel extends React.Component {
         showReadReceipts: PropTypes.bool,
         // Enable managing RRs and RMs. These require the timelineSet to have a room.
         manageReadReceipts: PropTypes.bool,
+        sendReadReceiptOnLoad: PropTypes.bool,
         manageReadMarkers: PropTypes.bool,
 
         // true to give the component a 'display: none' style.
@@ -126,6 +127,7 @@ class TimelinePanel extends React.Component {
         // event tile heights. (See _unpaginateEvents)
         timelineCap: Number.MAX_VALUE,
         className: 'mx_RoomView_messagePanel',
+        sendReadReceiptOnLoad: true,
     };
 
     constructor(props) {
@@ -785,8 +787,10 @@ class TimelinePanel extends React.Component {
             return;
         }
         const lastDisplayedEvent = this.state.events[lastDisplayedIndex];
-        this._setReadMarker(lastDisplayedEvent.getId(),
-                            lastDisplayedEvent.getTs());
+        this._setReadMarker(
+            lastDisplayedEvent.getId(),
+            lastDisplayedEvent.getTs(),
+        );
 
         // the read-marker should become invisible, so that if the user scrolls
         // down, they don't see it.
@@ -872,7 +876,7 @@ class TimelinePanel extends React.Component {
             // The messagepanel knows where the RM is, so we must have loaded
             // the relevant event.
             this._messagePanel.current.scrollToEvent(this.state.readMarkerEventId,
-                                                 0, 1/3);
+                0, 1/3);
             return;
         }
 
@@ -1044,12 +1048,14 @@ class TimelinePanel extends React.Component {
                 }
                 if (eventId) {
                     this._messagePanel.current.scrollToEvent(eventId, pixelOffset,
-                                                         offsetBase);
+                        offsetBase);
                 } else {
                     this._messagePanel.current.scrollToBottom();
                 }
 
-                this.sendReadReceipt();
+                if (this.props.sendReadReceiptOnLoad) {
+                    this.sendReadReceipt();
+                }
             });
         };
 
@@ -1418,8 +1424,8 @@ class TimelinePanel extends React.Component {
             ['PREPARED', 'CATCHUP'].includes(this.state.clientSyncState)
         );
         const events = this.state.firstVisibleEventIndex
-              ? this.state.events.slice(this.state.firstVisibleEventIndex)
-              : this.state.events;
+            ? this.state.events.slice(this.state.firstVisibleEventIndex)
+            : this.state.events;
         return (
              void,
+}
+
+interface IState {
+    loginView: number;
+    keyBackupNeeded: boolean;
+    busy: boolean;
+    password: string;
+    errorText: string;
+    flows: LoginFlow[];
+}
+
+@replaceableComponent("structures.auth.SoftLogout")
+export default class SoftLogout extends React.Component {
+    constructor(props) {
+        super(props);
 
         this.state = {
             loginView: LOGIN_VIEW.LOADING,
             keyBackupNeeded: true, // assume we do while we figure it out (see componentDidMount)
-
             busy: false,
             password: "",
             errorText: "",
+            flows: [],
         };
     }
 
@@ -72,7 +83,7 @@ export default class SoftLogout extends React.Component {
             return;
         }
 
-        this._initLogin();
+        this.initLogin();
 
         const cli = MatrixClientPeg.get();
         if (cli.isCryptoEnabled()) {
@@ -94,7 +105,7 @@ export default class SoftLogout extends React.Component {
         });
     };
 
-    async _initLogin() {
+    private async initLogin() {
         const queryParams = this.props.realQueryParams;
         const hasAllParams = queryParams && queryParams['loginToken'];
         if (hasAllParams) {
@@ -189,7 +200,7 @@ export default class SoftLogout extends React.Component {
         });
     }
 
-    _renderSignInSection() {
+    private renderSignInSection() {
         if (this.state.loginView === LOGIN_VIEW.LOADING) {
             const Spinner = sdk.getComponent("elements.Spinner");
             return ;
@@ -247,7 +258,7 @@ export default class SoftLogout extends React.Component {
             } // else we already have a message and should use it (key backup warning)
 
             const loginType = this.state.loginView === LOGIN_VIEW.CAS ? "cas" : "sso";
-            const flow = this.state.flows.find(flow => flow.type === "m.login." + loginType);
+            const flow = this.state.flows.find(flow => flow.type === "m.login." + loginType) as ISSOFlow;
 
             return (
                 
    
@@ -289,7 +300,7 @@ export default class SoftLogout extends React.Component {
 
                     
    {_t("Sign in")}
    
                     
    
-                        {this._renderSignInSection()}
+                        {this.renderSignInSection()}
                     
    
 
                     
    {_t("Clear personal data")}
    
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js
index 6cbecd22ee..e34349c474 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.js
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.js
@@ -169,7 +169,7 @@ export class PasswordAuthEntry extends React.Component {
                         { submitButtonOrSpinner }
                     
    
                 
-            { errorSection }
+                { errorSection }
             
    
         );
     }
@@ -375,7 +375,7 @@ export class TermsAuthEntry extends React.Component {
         if (this.props.showContinue !== false) {
             // XXX: button classes
             submitButton = ;
+                onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")};
         }
 
         return (
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index c79cbc0d32..3205ca372c 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -68,8 +68,8 @@ export default class MemberAvatar extends React.Component {
             let imageUrl = null;
             if (props.member.getMxcAvatarUrl()) {
                 imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
-                    Math.floor(props.width * window.devicePixelRatio),
-                    Math.floor(props.height * window.devicePixelRatio),
+                    props.width,
+                    props.height,
                     props.resizeMethod,
                 );
             }
diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index ad0eb45a52..4693d907ba 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -93,8 +93,8 @@ export default class RoomAvatar extends React.Component {
         let oobAvatar = null;
         if (props.oobData.avatarUrl) {
             oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp(
-                Math.floor(props.width * window.devicePixelRatio),
-                Math.floor(props.height * window.devicePixelRatio),
+                props.width,
+                props.height,
                 props.resizeMethod,
             );
         }
@@ -109,12 +109,7 @@ export default class RoomAvatar extends React.Component {
     private static getRoomAvatarUrl(props: IProps): string {
         if (!props.room) return null;
 
-        return Avatar.avatarUrlForRoom(
-            props.room,
-            Math.floor(props.width * window.devicePixelRatio),
-            Math.floor(props.height * window.devicePixelRatio),
-            props.resizeMethod,
-        );
+        return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod);
     }
 
     private onRoomAvatarClick = () => {
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index f86cd26f32..35efd12c9c 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -1,8 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016, 2018, 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -34,7 +32,7 @@ import {MenuItem} from "../../structures/ContextMenu";
 import {EventType} from "matrix-js-sdk/src/@types/event";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-function canCancel(eventStatus) {
+export function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
 }
 
@@ -98,21 +96,6 @@ export default class MessageContextMenu extends React.Component {
         return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
     }
 
-    onResendClick = () => {
-        Resend.resend(this.props.mxEvent);
-        this.closeMenu();
-    };
-
-    onResendEditClick = () => {
-        Resend.resend(this.props.mxEvent.replacingEvent());
-        this.closeMenu();
-    };
-
-    onResendRedactionClick = () => {
-        Resend.resend(this.props.mxEvent.localRedactionEvent());
-        this.closeMenu();
-    };
-
     onResendReactionsClick = () => {
         for (const reaction of this._getUnsentReactions()) {
             Resend.resend(reaction);
@@ -170,29 +153,6 @@ export default class MessageContextMenu extends React.Component {
         this.closeMenu();
     };
 
-    onCancelSendClick = () => {
-        const mxEvent = this.props.mxEvent;
-        const editEvent = mxEvent.replacingEvent();
-        const redactEvent = mxEvent.localRedactionEvent();
-        const pendingReactions = this._getPendingReactions();
-
-        if (editEvent && canCancel(editEvent.status)) {
-            Resend.removeFromQueue(editEvent);
-        }
-        if (redactEvent && canCancel(redactEvent.status)) {
-            Resend.removeFromQueue(redactEvent);
-        }
-        if (pendingReactions.length) {
-            for (const reaction of pendingReactions) {
-                Resend.removeFromQueue(reaction);
-            }
-        }
-        if (canCancel(mxEvent.status)) {
-            Resend.removeFromQueue(this.props.mxEvent);
-        }
-        this.closeMenu();
-    };
-
     onForwardClick = () => {
         if (this.props.onCloseDialog) this.props.onCloseDialog();
         dis.dispatch({
@@ -285,20 +245,9 @@ export default class MessageContextMenu extends React.Component {
         const me = cli.getUserId();
         const mxEvent = this.props.mxEvent;
         const eventStatus = mxEvent.status;
-        const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
-        const redactStatus = mxEvent.localRedactionEvent() && mxEvent.localRedactionEvent().status;
         const unsentReactionsCount = this._getUnsentReactions().length;
-        const pendingReactionsCount = this._getPendingReactions().length;
-        const allowCancel = canCancel(mxEvent.status) ||
-            canCancel(editStatus) ||
-            canCancel(redactStatus) ||
-            pendingReactionsCount !== 0;
-        let resendButton;
-        let resendEditButton;
         let resendReactionsButton;
-        let resendRedactionButton;
         let redactButton;
-        let cancelButton;
         let forwardButton;
         let pinButton;
         let unhidePreviewButton;
@@ -309,22 +258,6 @@ export default class MessageContextMenu extends React.Component {
         // status is SENT before remote-echo, null after
         const isSent = !eventStatus || eventStatus === EventStatus.SENT;
         if (!mxEvent.isRedacted()) {
-            if (eventStatus === EventStatus.NOT_SENT) {
-                resendButton = (
-                    
-                        { _t('Resend') }
-                    
-                );
-            }
-
-            if (editStatus === EventStatus.NOT_SENT) {
-                resendEditButton = (
-                    
-                        { _t('Resend edit') }
-                    
-                );
-            }
-
             if (unsentReactionsCount !== 0) {
                 resendReactionsButton = (
                     
@@ -334,14 +267,6 @@ export default class MessageContextMenu extends React.Component {
             }
         }
 
-        if (redactStatus === EventStatus.NOT_SENT) {
-            resendRedactionButton = (
-                
-                    { _t('Resend removal') }
-                
-            );
-        }
-
         if (isSent && this.state.canRedact) {
             redactButton = (
                 
@@ -350,14 +275,6 @@ export default class MessageContextMenu extends React.Component {
             );
         }
 
-        if (allowCancel) {
-            cancelButton = (
-                
-                    { _t('Cancel Sending') }
-                
-            );
-        }
-
         if (isContentActionable(mxEvent)) {
             forwardButton = (
                 
@@ -433,7 +350,7 @@ export default class MessageContextMenu extends React.Component {
                 >
                     { _t('Source URL') }
                 
-          );
+            );
         }
 
         if (this.props.collapseReplyThread) {
@@ -455,12 +372,8 @@ export default class MessageContextMenu extends React.Component {
 
         return (
             
    
-                { resendButton }
-                { resendEditButton }
                 { resendReactionsButton }
-                { resendRedactionButton }
                 { redactButton }
-                { cancelButton }
                 { forwardButton }
                 { pinButton }
                 { viewSourceButton }
diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
index 0f58a624f3..a33248200c 100644
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from "react";
+import React, {useContext, useMemo, useState} from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClient} from "matrix-js-sdk/src/client";
@@ -29,10 +29,13 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import {getDisplayAliasForRoom} from "../../../Rooms";
 import AccessibleButton from "../elements/AccessibleButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {allSettled} from "../../../utils/promise";
+import {sleep} from "../../../utils/promise";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import {calculateRoomVia} from "../../../utils/permalinks/Permalinks";
 import StyledCheckbox from "../elements/StyledCheckbox";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import ProgressBar from "../elements/ProgressBar";
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -41,45 +44,128 @@ interface IProps extends IDialogProps {
 }
 
 const Entry = ({ room, checked, onChange }) => {
-    return 
    
+    return 
    ;
+        { room.name }
+         onChange(e.target.checked) : null}
+            checked={checked}
+            disabled={!onChange}
+        />
+    ;
 };
 
-const AddExistingToSpaceDialog: React.FC = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
+interface IAddExistingToSpaceProps {
+    space: Room;
+    selected: Set;
+    onChange(checked: boolean, room: Room): void;
+}
+
+export const AddExistingToSpace: React.FC = ({ space, selected, onChange }) => {
+    const cli = useContext(MatrixClientContext);
+    const visibleRooms = useMemo(() => sortRooms(cli.getVisibleRooms()), [cli]);
+
     const [query, setQuery] = useState("");
     const lcQuery = query.toLowerCase();
 
-    const [selectedSpace, setSelectedSpace] = useState(space);
-    const [selectedToAdd, setSelectedToAdd] = useState(new Set());
-
     const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
     const existingSubspacesSet = new Set(existingSubspaces);
     const existingRoomsSet = new Set(SpaceStore.instance.getChildRooms(space.roomId));
 
-    const joinRule = selectedSpace.getJoinRule();
-    const [spaces, rooms, dms] = cli.getVisibleRooms().reduce((arr, room) => {
+    const joinRule = space.getJoinRule();
+    const [spaces, rooms, dms] = visibleRooms.reduce((arr, room) => {
         if (room.getMyMembership() !== "join") return arr;
         if (!room.name.toLowerCase().includes(lcQuery)) return arr;
 
         if (room.isSpaceRoom()) {
-            if (room !== space && room !== selectedSpace && !existingSubspacesSet.has(room)) {
+            if (room !== space && !existingSubspacesSet.has(room)) {
                 arr[0].push(room);
             }
-        } else if (!existingRoomsSet.has(room) && joinRule !== "public") {
-            // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones.
-            arr[DMRoomMap.shared().getUserIdForRoomId(room.roomId) ? 2 : 1].push(room);
+        } else if (!existingRoomsSet.has(room)) {
+            if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
+                arr[1].push(room);
+            } else if (joinRule !== "public") {
+                // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones.
+                arr[2].push(room);
+            }
         }
         return arr;
     }, [[], [], []]);
 
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState("");
+    return 
    
+        
+        
+            { rooms.length > 0 ? (
+                
    
+                    
    { _t("Rooms") }
    
+                    { rooms.map(room => {
+                        return  {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                
    
+            ) : undefined }
+
+            { spaces.length > 0 ? (
+                
    
+                    
    { _t("Spaces") }
    
+                    { spaces.map(space => {
+                        return  {
+                                onChange(checked, space);
+                            } : null}
+                        />;
+                    }) }
+                
    
+            ) : null }
+
+            { dms.length > 0 ? (
+                
    
+                    
    { _t("Direct Messages") }
    
+                    { dms.map(room => {
+                        return  {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                
    
+            ) : null }
+
+            { spaces.length + rooms.length + dms.length < 1 ? 
+                { _t("No results") }
+             : undefined }
+            
+    
    ;
+};
+
+const AddExistingToSpaceDialog: React.FC = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
+    const [selectedSpace, setSelectedSpace] = useState(space);
+    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
+    const [selectedToAdd, setSelectedToAdd] = useState(new Set());
+
+    const [progress, setProgress] = useState(null);
+    const [error, setError] = useState(null);
 
     let spaceOptionSection;
-    if (existingSubspacesSet.size > 0) {
+    if (existingSubspaces.length > 0) {
         const options = [space, ...existingSubspaces].map((space) => {
             const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
                 mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
@@ -116,116 +202,106 @@ const AddExistingToSpaceDialog: React.FC = ({ matrixClient: cli, space,
         
    
     ;
 
-    return 
-        { error && 
    { error }
     }
+    const addRooms = async () => {
+        setError(null);
+        setProgress(0);
 
-        
-        
-            { rooms.length > 0 ? (
-                
    
-                    
    { _t("Rooms") }
    
-                    { rooms.map(room => {
-                        return  {
-                                if (checked) {
-                                    selectedToAdd.add(room);
-                                } else {
-                                    selectedToAdd.delete(room);
-                                }
-                                setSelectedToAdd(new Set(selectedToAdd));
-                            }}
-                        />;
-                    }) }
-                
    
-            ) : undefined }
+        let error;
 
-            { spaces.length > 0 ? (
-                
    
-                    
    { _t("Spaces") }
    
-                    { spaces.map(space => {
-                        return  {
-                                if (checked) {
-                                    selectedToAdd.add(space);
-                                } else {
-                                    selectedToAdd.delete(space);
-                                }
-                                setSelectedToAdd(new Set(selectedToAdd));
-                            }}
-                        />;
-                    }) }
-                
    
-            ) : null }
+        for (const room of selectedToAdd) {
+            const via = calculateRoomVia(room);
+            try {
+                await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async e => {
+                    if (e.errcode === "M_LIMIT_EXCEEDED") {
+                        await sleep(e.data.retry_after_ms);
+                        return SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
+                    }
 
-            { dms.length > 0 ? (
-                
    
-                    
    { _t("Direct Messages") }
    
-                    { dms.map(space => {
-                        return  {
-                                if (checked) {
-                                    selectedToAdd.add(space);
-                                } else {
-                                    selectedToAdd.delete(space);
-                                }
-                                setSelectedToAdd(new Set(selectedToAdd));
-                            }}
-                        />;
-                    }) }
-                
    
-            ) : null }
+                    throw e;
+                });
+                setProgress(i => i + 1);
+            } catch (e) {
+                console.error("Failed to add rooms to space", e);
+                setError(error = e);
+                break;
+            }
+        }
 
-            { spaces.length + rooms.length + dms.length < 1 ? 
-                { _t("No results") }
-             : undefined }
-            
+        if (!error) {
+            onFinished(true);
+        }
+    };
 
-        
    
+    const busy = progress !== null;
+
+    let footer;
+    if (error) {
+        footer = <>
+            
+
+            
+                
    { _t("Not all selected were added") }
    
+                
    { _t("Try again") }
    
+                
+
+            
+                { _t("Retry") }
+            
+        ;
+    } else if (busy) {
+        footer = 
+            
+            
    
+                { _t("Adding rooms... (%(progress)s out of %(count)s)", {
+                    count: selectedToAdd.size,
+                    progress,
+                }) }
+            
    
+            ;
+    } else {
+        footer = <>
             
-                
    { _t("Don't want to add an existing room?") }
    
+                
    { _t("Want to add a new room instead?") }
    
                  onCreateRoomClick(cli, space)} kind="link">
                     { _t("Create a new room") }
                 
                 
 
-             {
-                    setBusy(true);
-                    try {
-                        await allSettled(Array.from(selectedToAdd).map((room) =>
-                            SpaceStore.instance.addRoomToSpace(space, room.roomId, calculateRoomVia(room))));
-                        onFinished(true);
-                    } catch (e) {
-                        console.error("Failed to add rooms to space", e);
-                        setError(_t("Failed to add rooms to space"));
-                    }
-                    setBusy(false);
-                }}
-            >
-                { busy ? _t("Adding...") : _t("Add") }
+            
+                { _t("Add") }
             
+        ;
+    }
+
+    return 
+        
+             {
+                    if (checked) {
+                        selectedToAdd.add(room);
+                    } else {
+                        selectedToAdd.delete(room);
+                    }
+                    setSelectedToAdd(new Set(selectedToAdd));
+                } : null}
+            />
+        
+
+        
    
+            { footer }
         
    
         ;
 };
diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
index 8948c14c7c..cbe0130649 100644
--- a/src/components/views/dialogs/BugReportDialog.js
+++ b/src/components/views/dialogs/BugReportDialog.js
@@ -184,7 +184,7 @@ export default class BugReportDialog extends React.Component {
 
         return (
             
                 
    
diff --git a/src/components/views/dialogs/ChangelogDialog.js b/src/components/views/dialogs/ChangelogDialog.js
index 50bc13cff5..efbeba3977 100644
--- a/src/components/views/dialogs/ChangelogDialog.js
+++ b/src/components/views/dialogs/ChangelogDialog.js
@@ -95,7 +95,7 @@ export default class ChangelogDialog extends React.Component {
                 description={content}
                 button={_t("Update")}
                 onFinished={this.props.onFinished}
-                />
+            />
         );
     }
 }
diff --git a/src/components/views/dialogs/ConfirmWipeDeviceDialog.js b/src/components/views/dialogs/ConfirmWipeDeviceDialog.js
index 4faaad0f7e..333e1522f1 100644
--- a/src/components/views/dialogs/ConfirmWipeDeviceDialog.js
+++ b/src/components/views/dialogs/ConfirmWipeDeviceDialog.js
@@ -39,9 +39,12 @@ export default class ConfirmWipeDeviceDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            
+            
                 
    
                     
    
                         {_t(
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 9f5513e0a3..8a035263cc 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -70,8 +70,16 @@ class GenericEditor extends React.PureComponent {
     }
 
     textInput(id, label) {
-        return ;
+        return ;
     }
 }
 
@@ -155,7 +163,7 @@ export class SendCustomEvent extends GenericEditor {
                 
    
 
                 
+                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
             
    
             
    
                 
@@ -239,7 +247,7 @@ class SendAccountData extends GenericEditor {
                 
    
 
                 
+                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
             
    
             
    
                 
@@ -315,15 +323,15 @@ class FilteredList extends React.PureComponent {
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return 
    
             
+                type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
+                className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
+                // force re-render so that autoFocus is applied when this component is re-used
+                key={this.props.children[0] ? this.props.children[0].key : ''} />
 
             
+                getChildCount={this.getChildCount}
+                truncateAt={this.state.truncateAt}
+                createOverflowElement={this.createOverflowElement} />
         
    ;
     }
 }
@@ -647,7 +655,7 @@ function VerificationRequest({txnId, request}) {
 
         /* Note that request.timeout is a getter, so its value changes */
         const id = setInterval(() => {
-           setRequestTimeout(request.timeout);
+            setRequestTimeout(request.timeout);
         }, 500);
 
         return () => { clearInterval(id); };
@@ -941,35 +949,35 @@ class SettingsExplorer extends React.Component {
                         />
                         
-                            
-                                
-                                
-                                
-                            
+                                
+                                    
+                                    
+                                    
+                                
-                            {allSettings.map(i => (
-                                
-                                    
+                                        
-                                    
-                                    
-                                
-                            ))}
+                                            
+                                        
+                                        
+                                        
+                                    
+                                ))}
                             
    
                             
    {_t("Setting ID")}{_t("Value")}{_t("Value in this room")}
    {_t("Setting ID")}{_t("Value")}{_t("Value in this room")}
    
                                 
                             
    
-                                         this.onViewClick(e, i)}>
-                                            {i}
-                                        
-                                         this.onEditClick(e, i)}
-                                           className='mx_DevTools_SettingsExplorer_edit'
-                                        >
+                                {allSettings.map(i => (
+                                    
    
+                                             this.onViewClick(e, i)}>
+                                                {i}
+                                            
+                                             this.onEditClick(e, i)}
+                                                className='mx_DevTools_SettingsExplorer_edit'
+                                            >
                                             ✏
-                                        
-                                    
-                                        {this.renderSettingValue(SettingsStore.getValue(i))}
-                                    
-                                        
-                                            {this.renderSettingValue(SettingsStore.getValue(i, room.roomId))}
-                                        
-                                    
    
+                                            {this.renderSettingValue(SettingsStore.getValue(i))}
+                                        
+                                            
+                                                {this.renderSettingValue(SettingsStore.getValue(i, room.roomId))}
+                                            
+                                        
    
                         
    
                     
    
@@ -998,11 +1006,11 @@ class SettingsExplorer extends React.Component {
                         
    
                             
-                                
-                                    
-                                    
-                                    
-                                
+                                    
+                                        
+                                        
+                                        
+                                    
                                     {LEVEL_ORDER.map(lvl => (
diff --git a/src/components/views/dialogs/IncomingSasDialog.js b/src/components/views/dialogs/IncomingSasDialog.js
index f18b7a9d0c..5df02d7a6f 100644
--- a/src/components/views/dialogs/IncomingSasDialog.js
+++ b/src/components/views/dialogs/IncomingSasDialog.js
@@ -130,7 +130,7 @@ export default class IncomingSasDialog extends React.Component {
         const oppProfile = this.state.opponentProfile;
         if (oppProfile) {
             const url = oppProfile.avatar_url
-                ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(Math.floor(48 * window.devicePixelRatio))
+                ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(48)
                 : null;
             profile = 
    
                 
+            
                 
    
                     
    {_t("Enable 'Manage Integrations' in Settings to do this.")}
    
                 
    
diff --git a/src/components/views/dialogs/IntegrationsImpossibleDialog.js b/src/components/views/dialogs/IntegrationsImpossibleDialog.js
index 9bc9d02ba6..e14d40aaef 100644
--- a/src/components/views/dialogs/IntegrationsImpossibleDialog.js
+++ b/src/components/views/dialogs/IntegrationsImpossibleDialog.js
@@ -37,9 +37,12 @@ export default class IntegrationsImpossibleDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            
+            
                 
    
                     
    
                         {_t(
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 2ebc84ec7c..ec9c71ccbe 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -1312,7 +1312,7 @@ export default class InviteDialog extends React.PureComponent
             {success ?
-              {_t("Upload completed")} :
-              cancelled ?
-                {_t("Cancelled signature upload")} :
-                {_t("Unable to upload")}}
+                {_t("Upload completed")} :
+                cancelled ?
+                    {_t("Cancelled signature upload")} :
+                    {_t("Unable to upload")}}
             
+            
                 {content}
             
         );
diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js
index 9c2f23ef22..b6c4d42243 100644
--- a/src/components/views/dialogs/RoomSettingsDialog.js
+++ b/src/components/views/dialogs/RoomSettingsDialog.js
@@ -116,8 +116,12 @@ export default class RoomSettingsDialog extends React.Component {
 
         const roomName = MatrixClientPeg.get().getRoom(this.props.roomId).name;
         return (
-            
+            
                 
    
                     
                 
    
diff --git a/src/components/views/dialogs/ServerPickerDialog.tsx b/src/components/views/dialogs/ServerPickerDialog.tsx
index 4abc0a88b1..62a2b95c68 100644
--- a/src/components/views/dialogs/ServerPickerDialog.tsx
+++ b/src/components/views/dialogs/ServerPickerDialog.tsx
@@ -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.
@@ -110,7 +110,7 @@ export default class ServerPickerDialog extends React.PureComponent
diff --git a/src/components/views/dialogs/SessionRestoreErrorDialog.js b/src/components/views/dialogs/SessionRestoreErrorDialog.js
index 50d7fbea09..43e73a2f83 100644
--- a/src/components/views/dialogs/SessionRestoreErrorDialog.js
+++ b/src/components/views/dialogs/SessionRestoreErrorDialog.js
@@ -98,7 +98,7 @@ export default class SessionRestoreErrorDialog extends React.Component {
                         "may be incompatible with this version. Close this window and return " +
                         "to the more recent version.",
                         { brand },
-                     ) }
    
+                    ) }
    
 
                     
    { _t(
                         "Clearing your browser's storage may fix the problem, but will sign you " +
diff --git a/src/components/views/dialogs/StorageEvictedDialog.js b/src/components/views/dialogs/StorageEvictedDialog.js
index 15c5347644..1e17ab1738 100644
--- a/src/components/views/dialogs/StorageEvictedDialog.js
+++ b/src/components/views/dialogs/StorageEvictedDialog.js
@@ -45,10 +45,12 @@ export default class StorageEvictedDialog extends React.Component {
         let logRequest;
         if (SdkConfig.get().bug_report_endpoint_url) {
             logRequest = _t(
-                "To help us prevent this in future, please send us logs.", {},
-            {
-                a: text => {text},
-            });
+                "To help us prevent this in future, please send us logs.",
+                {},
+                {
+                    a: text => {text},
+                },
+            );
         }
 
         return (
diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js
index eb9eaeb5dd..e7f6953589 100644
--- a/src/components/views/dialogs/UserSettingsDialog.js
+++ b/src/components/views/dialogs/UserSettingsDialog.js
@@ -155,8 +155,12 @@ export default class UserSettingsDialog extends React.Component {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         return (
-            
+            
                 
    
                     
                 
    
diff --git a/src/components/views/dialogs/VerificationRequestDialog.js b/src/components/views/dialogs/VerificationRequestDialog.js
index 205597a1c4..9281275e6a 100644
--- a/src/components/views/dialogs/VerificationRequestDialog.js
+++ b/src/components/views/dialogs/VerificationRequestDialog.js
@@ -52,11 +52,13 @@ export default class VerificationRequestDialog extends React.Component {
         const title = request && request.isSelfVerification ?
             _t("Verify other login") : _t("Verification Request");
 
-        return 
+        return 
             
+            
                 
    
                     
    
                         {_t("The widget will verify your user ID, but won't be able to perform actions for you:")}
diff --git a/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js b/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js
index 43fb25f152..e71983b074 100644
--- a/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js
+++ b/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js
@@ -40,10 +40,11 @@ export default class ConfirmDestroyCrossSigningDialog extends React.Component {
 
         return (
             
+                className='mx_ConfirmDestroyCrossSigningDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Destroy cross-signing keys?")}
+            >
                 
    
                     
    
                         {_t(
diff --git a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
index 1fafe03d95..4ac15ab5a3 100644
--- a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
@@ -373,21 +373,24 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 {_t(
                     "If you've forgotten your Security Phrase you can "+
                     "use your Security Key or " +
-                    "set up new recovery options"
-                , {}, {
-                    button1: s => 
-                        {s}
-                    ,
-                    button2: s => 
-                        {s}
-                    ,
-                })}
+                    "set up new recovery options",
+                    {},
+                    {
+                        button1: s => 
+                            {s}
+                        ,
+                        button2: s => 
+                            {s}
+                        ,
+                    })}
             
    ;
         } else {
             title = _t("Enter Security Key");
@@ -435,15 +438,17 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 
    
                 {_t(
                     "If you've forgotten your Security Key you can "+
-                    ""
-                , {}, {
-                    button: s => 
-                        {s}
-                    ,
-                })}
+                    "",
+                    {},
+                    {
+                        button: s => 
+                            {s}
+                        ,
+                    },
+                )}
             
    ;
         }
 
@@ -452,9 +457,9 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 onFinished={this.props.onFinished}
                 title={title}
             >
-            
    
-                {content}
-            
    
+                
    
+                    {content}
+                
    
                 
         );
     }
diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.js
index 1714891cb5..9903c631b2 100644
--- a/src/components/views/elements/ActionButton.js
+++ b/src/components/views/elements/ActionButton.js
@@ -70,8 +70,8 @@ export default class ActionButton extends React.Component {
         }
 
         const icon = this.props.iconPath ?
-                () :
-                undefined;
+            () :
+            undefined;
 
         const classNames = ["mx_RoleButton"];
         if (this.props.className) {
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index e206fda797..b898ad2ebc 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -109,7 +109,7 @@ export default class AppTile extends React.Component {
         const childContentProtocol = u.protocol;
         if (parentContentProtocol === 'https:' && childContentProtocol !== 'https:') {
             console.warn("Refusing to load mixed-content app:",
-            parentContentProtocol, childContentProtocol, window.location, this.props.app.url);
+                parentContentProtocol, childContentProtocol, window.location, this.props.app.url);
             return true;
         }
         return false;
diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.js
index ff62f169fa..d8ec5af278 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.js
@@ -65,12 +65,18 @@ export class EditableItem extends React.Component {
                     
                         {_t("Are you sure?")}
                     
-                    
+                    
                         {_t("Yes")}
                     
-                    
+                    
                         {_t("No")}
                     
                 
    
@@ -121,11 +127,15 @@ export default class EditableItemList extends React.Component {
 
     _renderNewItemField() {
         return (
-            
+            
+                    autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
+                    list={this.props.suggestionsListId} />
                 
                     {_t("Add")}
                 
diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js
index 638fd02553..7c38ac1777 100644
--- a/src/components/views/elements/EditableText.js
+++ b/src/components/views/elements/EditableText.js
@@ -221,13 +221,15 @@ export default class EditableText extends React.Component {
             ;
         } else {
             // show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
-            editableEl = 
    ;
+            editableEl = 
    ;
         }
 
         return editableEl;
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index cbced07bfe..05d487a9eb 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -34,16 +34,15 @@ import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"
 import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import {normalizeWheelEvent} from "../../../utils/Mouse";
 
-const MIN_ZOOM = 100;
-const MAX_ZOOM = 300;
+// Max scale to keep gaps around the image
+const MAX_SCALE = 0.95;
 // This is used for the buttons
-const ZOOM_STEP = 10;
+const ZOOM_STEP = 0.10;
 // This is used for mouse wheel events
-const ZOOM_COEFFICIENT = 0.5;
+const ZOOM_COEFFICIENT = 0.0025;
 // If we have moved only this much we can zoom
 const ZOOM_DISTANCE = 10;
 
-
 interface IProps {
     src: string, // the source of the image being displayed
     name?: string, // the main title ('name') for the image
@@ -62,8 +61,10 @@ interface IProps {
 }
 
 interface IState {
-    rotation: number,
     zoom: number,
+    minZoom: number,
+    maxZoom: number,
+    rotation: number,
     translationX: number,
     translationY: number,
     moving: boolean,
@@ -75,8 +76,10 @@ export default class ImageView extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            zoom: 0,
+            minZoom: MAX_SCALE,
+            maxZoom: MAX_SCALE,
             rotation: 0,
-            zoom: MIN_ZOOM,
             translationX: 0,
             translationY: 0,
             moving: false,
@@ -87,6 +90,8 @@ export default class ImageView extends React.Component {
     // XXX: Refs to functional components
     private contextMenuButton = createRef();
     private focusLock = createRef();
+    private imageWrapper = createRef();
+    private image = createRef();
 
     private initX = 0;
     private initY = 0;
@@ -99,12 +104,89 @@ export default class ImageView extends React.Component {
         // We have to use addEventListener() because the listener
         // needs to be passive in order to work with Chromium
         this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
+        // We want to recalculate zoom whenever the window's size changes
+        window.addEventListener("resize", this.calculateZoom);
+        // After the image loads for the first time we want to calculate the zoom
+        this.image.current.addEventListener("load", this.calculateZoom);
+        // Try to precalculate the zoom from width and height props
+        this.calculateZoom();
     }
 
     componentWillUnmount() {
         this.focusLock.current.removeEventListener('wheel', this.onWheel);
+        window.removeEventListener("resize", this.calculateZoom);
+        this.image.current.removeEventListener("load", this.calculateZoom);
     }
 
+    private calculateZoom = () => {
+        const image = this.image.current;
+        const imageWrapper = this.imageWrapper.current;
+
+        const width = this.props.width || image.naturalWidth;
+        const height = this.props.height || image.naturalHeight;
+
+        const zoomX = imageWrapper.clientWidth / width;
+        const zoomY = imageWrapper.clientHeight / height;
+
+        // If the image is smaller in both dimensions set its the zoom to 1 to
+        // display it in its original size
+        if (zoomX >= 1 && zoomY >= 1) {
+            this.setState({
+                zoom: 1,
+                minZoom: 1,
+                maxZoom: 1,
+            });
+            return;
+        }
+        // We set minZoom to the min of the zoomX and zoomY to avoid overflow in
+        // any direction. We also multiply by MAX_SCALE to get a gap around the
+        // image by default
+        const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE;
+
+        if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom});
+        this.setState({
+            minZoom: minZoom,
+            maxZoom: 1,
+        });
+    }
+
+    private zoom(delta: number) {
+        const newZoom = this.state.zoom + delta;
+
+        if (newZoom <= this.state.minZoom) {
+            this.setState({
+                zoom: this.state.minZoom,
+                translationX: 0,
+                translationY: 0,
+            });
+            return;
+        }
+        if (newZoom >= this.state.maxZoom) {
+            this.setState({zoom: this.state.maxZoom});
+            return;
+        }
+
+        this.setState({
+            zoom: newZoom,
+        });
+    }
+
+    private onWheel = (ev: WheelEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        const {deltaY} = normalizeWheelEvent(ev);
+        this.zoom(-(deltaY * ZOOM_COEFFICIENT));
+    };
+
+    private onZoomInClick = () => {
+        this.zoom(ZOOM_STEP);
+    };
+
+    private onZoomOutClick = () => {
+        this.zoom(-ZOOM_STEP);
+    };
+
     private onKeyDown = (ev: KeyboardEvent) => {
         if (ev.key === Key.ESCAPE) {
             ev.stopPropagation();
@@ -113,31 +195,6 @@ export default class ImageView extends React.Component {
         }
     };
 
-    private onWheel = (ev: WheelEvent) => {
-        ev.stopPropagation();
-        ev.preventDefault();
-
-        const {deltaY} = normalizeWheelEvent(ev);
-        const newZoom = this.state.zoom - (deltaY * ZOOM_COEFFICIENT);
-
-        if (newZoom <= MIN_ZOOM) {
-            this.setState({
-                zoom: MIN_ZOOM,
-                translationX: 0,
-                translationY: 0,
-            });
-            return;
-        }
-        if (newZoom >= MAX_ZOOM) {
-            this.setState({zoom: MAX_ZOOM});
-            return;
-        }
-
-        this.setState({
-            zoom: newZoom,
-        });
-    };
-
     private onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
         const rotationDegrees = cur - 90;
@@ -150,31 +207,6 @@ export default class ImageView extends React.Component {
         this.setState({ rotation: rotationDegrees });
     };
 
-    private onZoomInClick = () => {
-        if (this.state.zoom >= MAX_ZOOM) {
-            this.setState({zoom: MAX_ZOOM});
-            return;
-        }
-
-        this.setState({
-            zoom: this.state.zoom + ZOOM_STEP,
-        });
-    };
-
-    private onZoomOutClick = () => {
-        if (this.state.zoom <= MIN_ZOOM) {
-            this.setState({
-                zoom: MIN_ZOOM,
-                translationX: 0,
-                translationY: 0,
-            });
-            return;
-        }
-        this.setState({
-            zoom: this.state.zoom - ZOOM_STEP,
-        });
-    };
-
     private onDownloadClick = () => {
         const a = document.createElement("a");
         a.href = this.props.src;
@@ -217,8 +249,8 @@ export default class ImageView extends React.Component {
         if (ev.button !== 0) return;
 
         // Zoom in if we are completely zoomed out
-        if (this.state.zoom === MIN_ZOOM) {
-            this.setState({zoom: MAX_ZOOM});
+        if (this.state.zoom === this.state.minZoom) {
+            this.setState({zoom: this.state.maxZoom});
             return;
         }
 
@@ -251,7 +283,7 @@ export default class ImageView extends React.Component {
             Math.abs(this.state.translationY - this.previousY) < ZOOM_DISTANCE
         ) {
             this.setState({
-                zoom: MIN_ZOOM,
+                zoom: this.state.minZoom,
                 translationX: 0,
                 translationY: 0,
             });
@@ -286,17 +318,20 @@ export default class ImageView extends React.Component {
 
     render() {
         const showEventMeta = !!this.props.mxEvent;
+        const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
 
         let cursor;
         if (this.state.moving) {
             cursor= "grabbing";
-        } else if (this.state.zoom === MIN_ZOOM) {
+        } else if (zoomingDisabled) {
+            cursor = "default";
+        } else if (this.state.zoom === this.state.minZoom) {
             cursor = "zoom-in";
         } else {
             cursor = "zoom-out";
         }
         const rotationDegrees = this.state.rotation + "deg";
-        const zoomPercentage = this.state.zoom/100;
+        const zoom = this.state.zoom;
         const translatePixelsX = this.state.translationX + "px";
         const translatePixelsY = this.state.translationY + "px";
         // The order of the values is important!
@@ -308,7 +343,7 @@ export default class ImageView extends React.Component {
             transition: this.state.moving ? null : "transform 200ms ease 0s",
             transform: `translateX(${translatePixelsX})
                         translateY(${translatePixelsY})
-                        scale(${zoomPercentage})
+                        scale(${zoom})
                         rotate(${rotationDegrees})`,
         };
 
@@ -380,6 +415,25 @@ export default class ImageView extends React.Component {
             );
         }
 
+        let zoomOutButton;
+        let zoomInButton;
+        if (!zoomingDisabled) {
+            zoomOutButton = (
+                
+                
+            );
+            zoomInButton = (
+                
+                
+            );
+        }
+
         return (
              {
                             title={_t("Rotate Left")}
                             onClick={ this.onRotateCounterClockwiseClick }>
                         
-                        
-                        
-                        
-                        
+                        {zoomOutButton}
+                        {zoomInButton}
                          {
                         {this.renderContextMenu()}
                     
    
                 
    
-                
    
+                
    
                     {this.props.label};
-        let secondPart = ;
+        let secondPart = ;
 
         if (this.props.toggleInFront) {
             const temp = firstPart;
diff --git a/src/components/views/elements/LanguageDropdown.js b/src/components/views/elements/LanguageDropdown.js
index 2e961be700..b8734c5afb 100644
--- a/src/components/views/elements/LanguageDropdown.js
+++ b/src/components/views/elements/LanguageDropdown.js
@@ -60,10 +60,10 @@ export default class LanguageDropdown extends React.Component {
             // doesn't know this, therefore we do this.
             const language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
             if (language) {
-              this.props.onOptionChange(language);
+                this.props.onOptionChange(language);
             } else {
-              const language = languageHandler.normalizeLanguageKey(languageHandler.getLanguageFromBrowser());
-              this.props.onOptionChange(language);
+                const language = languageHandler.normalizeLanguageKey(languageHandler.getLanguageFromBrowser());
+                this.props.onOptionChange(language);
             }
         }
     }
diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index a8e16813e6..ace41db39d 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -225,19 +225,19 @@ class Pill extends React.Component {
             }
                 break;
             case Pill.TYPE_USER_MENTION: {
-                    // If this user is not a member of this room, default to the empty member
-                    const member = this.state.member;
-                    if (member) {
-                        userId = member.userId;
-                        member.rawDisplayName = member.rawDisplayName || '';
-                        linkText = member.rawDisplayName;
-                        if (this.props.shouldShowPillAvatar) {
-                            avatar = 
    
-                   
    
                                 
    {_t("Level")}{_t("Settable at global")}{_t("Settable at room")}
    {_t("Level")}{_t("Settable at global")}{_t("Settable at room")}
    
                                     
                                 
    
                 
    {_t("Homeserver feature support:")}
                             {homeserverSupportsCrossSigning ? _t("exists") : _t("not found")}
                         
    
+                    
                 
                 {errorSection}
                 {actionRow}
diff --git a/src/components/views/settings/DevicesPanel.js b/src/components/views/settings/DevicesPanel.js
index e7d300b0f8..b1ad605a37 100644
--- a/src/components/views/settings/DevicesPanel.js
+++ b/src/components/views/settings/DevicesPanel.js
@@ -214,7 +214,7 @@ export default class DevicesPanel extends React.Component {
         const deleteButton = this.state.deleting ?
              :
             
-               { _t("Delete %(count)s sessions", {count: this.state.selectedDevices.length}) }
+                { _t("Delete %(count)s sessions", {count: this.state.selectedDevices.length})}
             ;
 
         const classes = classNames(this.props.className, "mx_DevicesPanel");
diff --git a/src/components/views/settings/E2eAdvancedPanel.js b/src/components/views/settings/E2eAdvancedPanel.tsx
similarity index 100%
rename from src/components/views/settings/E2eAdvancedPanel.js
rename to src/components/views/settings/E2eAdvancedPanel.tsx
diff --git a/src/components/views/settings/EventIndexPanel.js b/src/components/views/settings/EventIndexPanel.tsx
similarity index 65%
rename from src/components/views/settings/EventIndexPanel.js
rename to src/components/views/settings/EventIndexPanel.tsx
index d1a02de16d..fa84063ee8 100644
--- a/src/components/views/settings/EventIndexPanel.js
+++ b/src/components/views/settings/EventIndexPanel.tsx
@@ -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.
@@ -28,10 +28,17 @@ import {SettingLevel} from "../../../settings/SettingLevel";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import SeshatResetDialog from '../dialogs/SeshatResetDialog';
 
+interface IState {
+    enabling: boolean;
+    eventIndexSize: number;
+    roomCount: number;
+    eventIndexingEnabled: boolean;
+}
+
 @replaceableComponent("views.settings.EventIndexPanel")
-export default class EventIndexPanel extends React.Component {
-    constructor() {
-        super();
+export default class EventIndexPanel extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
 
         this.state = {
             enabling: false,
@@ -68,7 +75,7 @@ export default class EventIndexPanel extends React.Component {
         }
     }
 
-    async componentDidMount(): void {
+    componentDidMount(): void {
         this.updateState();
     }
 
@@ -102,8 +109,10 @@ export default class EventIndexPanel extends React.Component {
         });
     }
 
-    _onManage = async () => {
+    private onManage = async () => {
         Modal.createTrackedDialogAsync('Message search', 'Message search',
+            // @ts-ignore: TS doesn't seem to like the type of this now that it
+            // has also been converted to TS as well, but I can't figure out why...
             import('../../../async-components/views/dialogs/eventindex/ManageEventIndexDialog'),
             {
                 onFinished: () => {},
@@ -111,7 +120,7 @@ export default class EventIndexPanel extends React.Component {
         );
     }
 
-    _onEnable = async () => {
+    private onEnable = async () => {
         this.setState({
             enabling: true,
         });
@@ -123,14 +132,13 @@ export default class EventIndexPanel extends React.Component {
         await this.updateState();
     }
 
-    _confirmEventStoreReset = () => {
-        const self = this;
+    private confirmEventStoreReset = () => {
         const { close } = Modal.createDialog(SeshatResetDialog, {
             onFinished: async (success) => {
                 if (success) {
                     await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, false);
                     await EventIndexPeg.deleteEventIndex();
-                    await self._onEnable();
+                    await this.onEnable();
                     close();
                 }
             },
@@ -145,20 +153,19 @@ export default class EventIndexPanel extends React.Component {
         if (EventIndexPeg.get() !== null) {
             eventIndexingSettings = (
                 
    
-                    
    
-                        {_t("Securely cache encrypted messages locally for them " +
-                            "to appear in search results, using %(size)s to store messages from %(rooms)s rooms.",
-                            {
-                                size: formatBytes(this.state.eventIndexSize, 0),
-                                // This drives the singular / plural string
-                                // selection for "room" / "rooms" only.
-                                count: this.state.roomCount,
-                                rooms: formatCountLong(this.state.roomCount),
-                            },
-                        )}
-                    
    
+                    
    {_t(
+                        "Securely cache encrypted messages locally for them " +
+                        "to appear in search results, using %(size)s to store messages from %(rooms)s rooms.",
+                        {
+                            size: formatBytes(this.state.eventIndexSize, 0),
+                            // This drives the singular / plural string
+                            // selection for "room" / "rooms" only.
+                            count: this.state.roomCount,
+                            rooms: formatCountLong(this.state.roomCount),
+                        },
+                    )}
    
                     
    
-                        
+                        
                             {_t("Manage")}
                         
                     
    
@@ -167,13 +174,13 @@ export default class EventIndexPanel extends React.Component {
         } else if (!this.state.eventIndexingEnabled && EventIndexPeg.supportIsInstalled()) {
             eventIndexingSettings = (
                 
    
-                    
    
-                        {_t( "Securely cache encrypted messages locally for them to " +
-                             "appear in search results.")}
-                    
    
+                    
    {_t(
+                        "Securely cache encrypted messages locally for them to " +
+                        "appear in search results.",
+                    )}
    
                     
    
                         
+                            onClick={this.onEnable}>
                             {_t("Enable")}
                         
                         {this.state.enabling ?  : 
    }
@@ -188,40 +195,36 @@ export default class EventIndexPanel extends React.Component {
             );
 
             eventIndexingSettings = (
-                
    
+                
    {_t(
+                    "%(brand)s is missing some components required for securely " +
+                    "caching encrypted messages locally. If you'd like to " +
+                    "experiment with this feature, build a custom %(brand)s Desktop " +
+                    "with search components added.",
                     {
-                        _t( "%(brand)s is missing some components required for securely " +
-                            "caching encrypted messages locally. If you'd like to " +
-                            "experiment with this feature, build a custom %(brand)s Desktop " +
-                            "with search components added.",
-                            {
-                                brand,
-                            },
-                            {
-                                'nativeLink': (sub) => {sub},
-                            },
-                        )
-                    }
-                
    
+                        brand,
+                    },
+                    {
+                        nativeLink: sub => {sub},
+                    },
+                )}
    
             );
         } else if (!EventIndexPeg.platformHasSupport()) {
             eventIndexingSettings = (
-                
    
+                
    {_t(
+                    "%(brand)s can't securely cache encrypted messages locally " +
+                    "while running in a web browser. Use %(brand)s Desktop " +
+                    "for encrypted messages to appear in search results.",
                     {
-                        _t( "%(brand)s can't securely cache encrypted messages locally " +
-                            "while running in a web browser. Use %(brand)s Desktop " +
-                            "for encrypted messages to appear in search results.",
-                            {
-                                brand,
-                            },
-                            {
-                                'desktopLink': (sub) => {sub},
-                            },
-                        )
-                    }
-                
    
+                        brand,
+                    },
+                    {
+                        desktopLink: sub => {sub},
+                    },
+                )}
    
             );
         } else {
             eventIndexingSettings = (
@@ -233,19 +236,18 @@ export default class EventIndexPanel extends React.Component {
                         }
                     
    
                     {EventIndexPeg.error && (
-                    
    
-                        {_t("Advanced")}
-                        
-                            {EventIndexPeg.error.message}
-                        
-                        
    
-                            
-                                {_t("Reset")}
-                            
-                        
    
-                    
    
+                        
    
+                            {_t("Advanced")}
+                            
+                                {EventIndexPeg.error.message}
+                            
+                            
    
+                                
+                                    {_t("Reset")}
+                                
+                            
    
+                        
    
                     )}
-
                 
    
             );
         }
diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js
index 25fe434994..5756536085 100644
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
@@ -100,7 +100,7 @@ export default class Notifications extends React.Component {
         MatrixClientPeg.get().setPushRuleEnabled(
             'global', self.state.masterPushRule.kind, self.state.masterPushRule.rule_id, !checked,
         ).then(function() {
-           self._refreshFromServer();
+            self._refreshFromServer();
         });
     };
 
@@ -580,12 +580,12 @@ export default class Notifications extends React.Component {
                         "vectorRuleId": "_keywords",
                         "description": (
                             
-                            { _t('Messages containing keywords',
-                                {},
-                                { 'span': (sub) =>
-                                    {sub},
-                                },
-                            )}
+                                { _t('Messages containing keywords',
+                                    {},
+                                    { 'span': (sub) =>
+                                        {sub},
+                                    },
+                                )}
                             
                         ),
                         "vectorState": self.state.vectorContentRules.vectorState,
@@ -743,8 +743,8 @@ export default class Notifications extends React.Component {
 
     emailNotificationsRow(address, label) {
         return ;
+            onChange={this.onEnableEmailNotificationsChange.bind(this, address)}
+            label={label} key={`emailNotif_${label}`} />;
     }
 
     render() {
@@ -757,8 +757,8 @@ export default class Notifications extends React.Component {
         let masterPushRuleDiv;
         if (this.state.masterPushRule) {
             masterPushRuleDiv = ;
+                onChange={this.onEnableNotificationsChange}
+                label={_t('Enable notifications for this account')} />;
         }
 
         let clearNotificationsButton;
@@ -874,16 +874,16 @@ export default class Notifications extends React.Component {
                     { spinner }
 
                     
+                        onChange={this.onEnableDesktopNotificationsChange}
+                        label={_t('Enable desktop notifications for this session')} />
 
                     
+                        onChange={this.onEnableDesktopNotificationBodyChange}
+                        label={_t('Show message in desktop notification')} />
 
                     
+                        onChange={this.onEnableAudioNotificationsChange}
+                        label={_t('Enable audible notifications for this session')} />
 
                     { emailNotificationsRows }
 
diff --git a/src/components/views/settings/ProfileSettings.js b/src/components/views/settings/ProfileSettings.js
index 971b868751..9ecf369eba 100644
--- a/src/components/views/settings/ProfileSettings.js
+++ b/src/components/views/settings/ProfileSettings.js
@@ -170,8 +170,12 @@ export default class ProfileSettings extends React.Component {
                 noValidate={true}
                 className="mx_ProfileSettings_profileForm"
             >
-                
+                
                 
    
                     
    
                         {_t("Profile")}
diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.tsx
similarity index 89%
rename from src/components/views/settings/SetIdServer.js
rename to src/components/views/settings/SetIdServer.tsx
index fa2a36476d..05d1f83387 100644
--- a/src/components/views/settings/SetIdServer.js
+++ b/src/components/views/settings/SetIdServer.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,7 +16,6 @@ limitations under the License.
 
 import url from 'url';
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -28,6 +27,7 @@ import {abbreviateUrl, unabbreviateUrl} from "../../../utils/UrlUtils";
 import { getDefaultIdentityServerUrl, doesIdentityServerHaveTerms } from '../../../utils/IdentityServerUtils';
 import {timeout} from "../../../utils/promise";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { ActionPayload } from '../../../dispatcher/payloads';
 
 // We'll wait up to this long when checking for 3PID bindings on the IS.
 const REACHABILITY_TIMEOUT = 10000; // ms
@@ -59,16 +59,28 @@ async function checkIdentityServerUrl(u) {
     }
 }
 
-@replaceableComponent("views.settings.SetIdServer")
-export default class SetIdServer extends React.Component {
-    static propTypes = {
-        // Whether or not the ID server is missing terms. This affects the text
-        // shown to the user.
-        missingTerms: PropTypes.bool,
-    };
+interface IProps {
+    // Whether or not the ID server is missing terms. This affects the text
+    // shown to the user.
+    missingTerms: boolean;
+}
 
-    constructor() {
-        super();
+interface IState {
+    defaultIdServer?: string;
+    currentClientIdServer: string;
+    idServer?: string;
+    error?: string;
+    busy: boolean;
+    disconnectBusy: boolean;
+    checking: boolean;
+}
+
+@replaceableComponent("views.settings.SetIdServer")
+export default class SetIdServer extends React.Component {
+    private dispatcherRef: string;
+
+    constructor(props) {
+        super(props);
 
         let defaultIdServer = '';
         if (!MatrixClientPeg.get().getIdentityServerUrl() && getDefaultIdentityServerUrl()) {
@@ -96,7 +108,7 @@ export default class SetIdServer extends React.Component {
         dis.unregister(this.dispatcherRef);
     }
 
-    onAction = (payload) => {
+    private onAction = (payload: ActionPayload) => {
         // We react to changes in the ID server in the event the user is staring at this form
         // when changing their identity server on another device.
         if (payload.action !== "id_server_changed") return;
@@ -106,13 +118,13 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _onIdentityServerChanged = (ev) => {
+    private onIdentityServerChanged = (ev) => {
         const u = ev.target.value;
 
         this.setState({idServer: u});
     };
 
-    _getTooltip = () => {
+    private getTooltip = () => {
         if (this.state.checking) {
             const InlineSpinner = sdk.getComponent('views.elements.InlineSpinner');
             return 
    
@@ -126,11 +138,11 @@ export default class SetIdServer extends React.Component {
         }
     };
 
-    _idServerChangeEnabled = () => {
+    private idServerChangeEnabled = () => {
         return !!this.state.idServer && !this.state.busy;
     };
 
-    _saveIdServer = (fullUrl) => {
+    private saveIdServer = (fullUrl) => {
         // Account data change will update localstorage, client, etc through dispatcher
         MatrixClientPeg.get().setAccountData("m.identity_server", {
             base_url: fullUrl,
@@ -143,7 +155,7 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _checkIdServer = async (e) => {
+    private checkIdServer = async (e) => {
         e.preventDefault();
         const { idServer, currentClientIdServer } = this.state;
 
@@ -166,14 +178,14 @@ export default class SetIdServer extends React.Component {
                 // Double check that the identity server even has terms of service.
                 const hasTerms = await doesIdentityServerHaveTerms(fullUrl);
                 if (!hasTerms) {
-                    const [confirmed] = await this._showNoTermsWarning(fullUrl);
+                    const [confirmed] = await this.showNoTermsWarning(fullUrl);
                     save = confirmed;
                 }
 
                 // Show a general warning, possibly with details about any bound
                 // 3PIDs that would be left behind.
                 if (save && currentClientIdServer && fullUrl !== currentClientIdServer) {
-                    const [confirmed] = await this._showServerChangeWarning({
+                    const [confirmed] = await this.showServerChangeWarning({
                         title: _t("Change identity server"),
                         unboundMessage: _t(
                             "Disconnect from the identity server  and " +
@@ -189,7 +201,7 @@ export default class SetIdServer extends React.Component {
                 }
 
                 if (save) {
-                    this._saveIdServer(fullUrl);
+                    this.saveIdServer(fullUrl);
                 }
             } catch (e) {
                 console.error(e);
@@ -204,7 +216,7 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _showNoTermsWarning(fullUrl) {
+    private showNoTermsWarning(fullUrl) {
         const QuestionDialog = sdk.getComponent("views.dialogs.QuestionDialog");
         const { finished } = Modal.createTrackedDialog('No Terms Warning', '', QuestionDialog, {
             title: _t("Identity server has no terms of service"),
@@ -223,10 +235,10 @@ export default class SetIdServer extends React.Component {
         return finished;
     }
 
-    _onDisconnectClicked = async () => {
+    private onDisconnectClicked = async () => {
         this.setState({disconnectBusy: true});
         try {
-            const [confirmed] = await this._showServerChangeWarning({
+            const [confirmed] = await this.showServerChangeWarning({
                 title: _t("Disconnect identity server"),
                 unboundMessage: _t(
                     "Disconnect from the identity server ?", {},
@@ -235,14 +247,14 @@ export default class SetIdServer extends React.Component {
                 button: _t("Disconnect"),
             });
             if (confirmed) {
-                this._disconnectIdServer();
+                this.disconnectIdServer();
             }
         } finally {
             this.setState({disconnectBusy: false});
         }
     };
 
-    async _showServerChangeWarning({ title, unboundMessage, button }) {
+    private async showServerChangeWarning({ title, unboundMessage, button }) {
         const { currentClientIdServer } = this.state;
 
         let threepids = [];
@@ -318,7 +330,7 @@ export default class SetIdServer extends React.Component {
         return finished;
     }
 
-    _disconnectIdServer = () => {
+    private disconnectIdServer = () => {
         // Account data change will update localstorage, client, etc through dispatcher
         MatrixClientPeg.get().setAccountData("m.identity_server", {
             base_url: null, // clear
@@ -371,7 +383,7 @@ export default class SetIdServer extends React.Component {
 
         let discoSection;
         if (idServerUrl) {
-            let discoButtonContent = _t("Disconnect");
+            let discoButtonContent: React.ReactNode = _t("Disconnect");
             let discoBodyText = _t(
                 "Disconnecting from your identity server will mean you " +
                 "won't be discoverable by other users and you won't be " +
@@ -391,14 +403,14 @@ export default class SetIdServer extends React.Component {
             }
             discoSection = 
    
                 {discoBodyText}
-                
+                
                     {discoButtonContent}
                 
             
    ;
         }
 
         return (
-            
+            
                 
                     {sectionTitle}
                 
@@ -411,15 +423,15 @@ export default class SetIdServer extends React.Component {
                     autoComplete="off"
                     placeholder={this.state.defaultIdServer}
                     value={this.state.idServer}
-                    onChange={this._onIdentityServerChanged}
-                    tooltipContent={this._getTooltip()}
+                    onChange={this.onIdentityServerChanged}
+                    tooltipContent={this.getTooltip()}
                     tooltipClassName="mx_SetIdServer_tooltip"
                     disabled={this.state.busy}
                     forceValidity={this.state.error ? false : null}
                 />
                 {_t("Change")}
                 {discoSection}
             
diff --git a/src/components/views/settings/account/EmailAddresses.js b/src/components/views/settings/account/EmailAddresses.js
index 1ebd374173..a36369cf88 100644
--- a/src/components/views/settings/account/EmailAddresses.js
+++ b/src/components/views/settings/account/EmailAddresses.js
@@ -90,12 +90,18 @@ export class ExistingEmailAddress extends React.Component {
                     
                         {_t("Remove %(email)s?", {email: this.props.email.address} )}
                     
-                    
+                    
                         {_t("Remove")}
                     
-                    
+                    
                         {_t("Cancel")}
                     
                 
    
@@ -228,21 +234,28 @@ export default class EmailAddresses extends React.Component {
         );
         if (this.state.verifying) {
             addButton = (
-              
    
-                  
    {_t("We've sent you an email to verify your address. Please follow the instructions there and then click the button below.")}
    
-                  
-                      {_t("Continue")}
-                  
-              
    
+                
    
+                    
    {_t("We've sent you an email to verify your address. Please follow the instructions there and then click the button below.")}
    
+                    
+                        {_t("Continue")}
+                    
+                
    
             );
         }
 
         return (
             
    
                 {existingEmailElements}
-                
    
+                
                     
                         {_t("Remove %(phone)s?", {phone: this.props.msisdn.address})}
                     
-                    
+                    
                         {_t("Remove")}
                     
-                    
+                    
                         {_t("Cancel")}
                     
                 
    
@@ -246,8 +252,11 @@ export default class PhoneNumbers extends React.Component {
                             value={this.state.newPhoneNumberCode}
                             onChange={this._onChangeNewPhoneNumberCode}
                         />
-                        
+                        
                             {_t("Continue")}
                         
                     
diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
index cd4a043622..139cfd5fbd 100644
--- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
@@ -80,9 +80,11 @@ export default class GeneralRoomSettingsTab extends React.Component {
             flairSection = <>
                 {_t("Flair")}
                 
    
-                    
+                    
                 
    
             ;
         }
@@ -97,8 +99,8 @@ export default class GeneralRoomSettingsTab extends React.Component {
                 
    {_t("Room Addresses")}
    
                 
    
                     
+                        canSetCanonicalAlias={canSetCanonical} canSetAliases={canSetAliases}
+                        canonicalAliasEvent={canonicalAliasEv} aliasEvents={aliasEvents} />
                 
    
                 
    {_t("Other")}
    
                 { flairSection }
diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.js b/src/components/views/settings/tabs/room/NotificationSettingsTab.js
index baefb5ae20..fa56fa2cb6 100644
--- a/src/components/views/settings/tabs/room/NotificationSettingsTab.js
+++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.js
@@ -155,7 +155,7 @@ export default class NotificationsSettingsTab extends React.Component {
                     
    
                         {_t("Notification sound")}: {this.state.currentSound}
    
                         
-                                {_t("Reset")}
+                            {_t("Reset")}
                         
                     
    
                     
    
@@ -167,11 +167,11 @@ export default class NotificationsSettingsTab extends React.Component {
                         {currentUploadedFile}
 
                         
-                                {_t("Browse")}
+                            {_t("Browse")}
                         
 
                         
-                                {_t("Save")}
+                            {_t("Save")}
                         
                         
    
                     
    
diff --git a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.js b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
similarity index 89%
rename from src/components/views/settings/tabs/room/RolesRoomSettingsTab.js
rename to src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
index 59a175906d..4fa521f598 100644
--- a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t, _td} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
@@ -23,6 +22,9 @@ import AccessibleButton from "../../../elements/AccessibleButton";
 import Modal from "../../../../../Modal";
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
 import {EventType} from "matrix-js-sdk/src/@types/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
 
 const plEventsToLabels = {
     // These will be translated for us later.
@@ -63,15 +65,15 @@ function parseIntWithDefault(val, def) {
     return isNaN(res) ? def : res;
 }
 
-export class BannedUser extends React.Component {
-    static propTypes = {
-        canUnban: PropTypes.bool,
-        member: PropTypes.object.isRequired, // js-sdk RoomMember
-        by: PropTypes.string.isRequired,
-        reason: PropTypes.string,
-    };
+interface IBannedUserProps {
+    canUnban?: boolean;
+    member: RoomMember;
+    by: string;
+    reason?: string;
+}
 
-    _onUnbanClick = (e) => {
+export class BannedUser extends React.Component {
+    private onUnbanClick = (e) => {
         MatrixClientPeg.get().unban(this.props.member.roomId, this.props.member.userId).catch((err) => {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to unban: " + err);
@@ -87,8 +89,10 @@ export class BannedUser extends React.Component {
 
         if (this.props.canUnban) {
             unbanButton = (
-                
+                
                     { _t('Unban') }
                 
             );
@@ -107,29 +111,29 @@ export class BannedUser extends React.Component {
     }
 }
 
-@replaceableComponent("views.settings.tabs.room.RolesRoomSettingsTab")
-export default class RolesRoomSettingsTab extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-    };
+interface IProps {
+    roomId: string;
+}
 
-    componentDidMount(): void {
-        MatrixClientPeg.get().on("RoomState.members", this._onRoomMembership);
+@replaceableComponent("views.settings.tabs.room.RolesRoomSettingsTab")
+export default class RolesRoomSettingsTab extends React.Component {
+    componentDidMount() {
+        MatrixClientPeg.get().on("RoomState.members", this.onRoomMembership);
     }
 
-    componentWillUnmount(): void {
+    componentWillUnmount() {
         const client = MatrixClientPeg.get();
         if (client) {
-            client.removeListener("RoomState.members", this._onRoomMembership);
+            client.removeListener("RoomState.members", this.onRoomMembership);
         }
     }
 
-    _onRoomMembership = (event, state, member) => {
+    private onRoomMembership = (event: MatrixEvent, state: RoomState, member: RoomMember) => {
         if (state.roomId !== this.props.roomId) return;
         this.forceUpdate();
     };
 
-    _populateDefaultPlEvents(eventsSection, stateLevel, eventsLevel) {
+    private populateDefaultPlEvents(eventsSection: Record, stateLevel: number, eventsLevel: number) {
         for (const desiredEvent of Object.keys(plEventsToShow)) {
             if (!(desiredEvent in eventsSection)) {
                 eventsSection[desiredEvent] = (plEventsToShow[desiredEvent].isState ? stateLevel : eventsLevel);
@@ -137,7 +141,7 @@ export default class RolesRoomSettingsTab extends React.Component {
         }
     }
 
-    _onPowerLevelsChanged = (value, powerLevelKey) => {
+    private onPowerLevelsChanged = (inputValue: string, powerLevelKey: string) => {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const plEvent = room.currentState.getStateEvents('m.room.power_levels', '');
@@ -148,7 +152,7 @@ export default class RolesRoomSettingsTab extends React.Component {
 
         const eventsLevelPrefix = "event_levels_";
 
-        value = parseInt(value);
+        const value = parseInt(inputValue);
 
         if (powerLevelKey.startsWith(eventsLevelPrefix)) {
             // deep copy "events" object, Object.assign itself won't deep copy
@@ -182,7 +186,7 @@ export default class RolesRoomSettingsTab extends React.Component {
         });
     };
 
-    _onUserPowerLevelChanged = (value, powerLevelKey) => {
+    private onUserPowerLevelChanged = (value: string, powerLevelKey: string) => {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const plEvent = room.currentState.getStateEvents('m.room.power_levels', '');
@@ -266,7 +270,7 @@ export default class RolesRoomSettingsTab extends React.Component {
             currentUserLevel = defaultUserLevel;
         }
 
-        this._populateDefaultPlEvents(
+        this.populateDefaultPlEvents(
             eventsLevels,
             parseIntWithDefault(plContent.state_default, powerLevelDescriptors.state_default.defaultValue),
             parseIntWithDefault(plContent.events_default, powerLevelDescriptors.events_default.defaultValue),
@@ -288,7 +292,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                             label={user}
                             key={user}
                             powerLevelKey={user} // Will be sent as the second parameter to `onChange`
-                            onChange={this._onUserPowerLevelChanged}
+                            onChange={this.onUserPowerLevelChanged}
                         />,
                     );
                 } else if (userLevels[user] < defaultUserLevel) { // muted
@@ -299,7 +303,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                             label={user}
                             key={user}
                             powerLevelKey={user} // Will be sent as the second parameter to `onChange`
-                            onChange={this._onUserPowerLevelChanged}
+                            onChange={this.onUserPowerLevelChanged}
                         />,
                     );
                 }
@@ -345,8 +349,9 @@ export default class RolesRoomSettingsTab extends React.Component {
                             if (sender) bannedBy = sender.name;
                             return (
                                 
+                                    member={member} reason={banEvent.reason}
+                                    by={bannedBy}
+                                />
                             );
                         })}
                     
@@ -373,7 +378,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                     usersDefault={defaultUserLevel}
                     disabled={!canChangeLevels || currentUserLevel < value}
                     powerLevelKey={key} // Will be sent as the second parameter to `onChange`
-                    onChange={this._onPowerLevelsChanged}
+                    onChange={this.onPowerLevelsChanged}
                 />
             
    ;
         });
@@ -398,7 +403,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                         usersDefault={defaultUserLevel}
                         disabled={!canChangeLevels || currentUserLevel < eventsLevels[eventType]}
                         powerLevelKey={"event_levels_" + eventType}
-                        onChange={this._onPowerLevelsChanged}
+                        onChange={this.onPowerLevelsChanged}
                     />
                 
    
             );
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
similarity index 79%
rename from src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
rename to src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index ce883c6d23..02bbcfb751 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import {_t} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
@@ -26,64 +26,92 @@ import StyledRadioGroup from '../../../elements/StyledRadioGroup';
 import {SettingLevel} from "../../../../../settings/SettingLevel";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import {UIFeature} from "../../../../../settings/UIFeature";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+
+// Knock and private are reserved keywords which are not yet implemented.
+enum JoinRule {
+    Public = "public",
+    Knock = "knock",
+    Invite = "invite",
+    Private = "private",
+}
+
+enum GuestAccess {
+    CanJoin = "can_join",
+    Forbidden = "forbidden",
+}
+
+enum HistoryVisibility {
+    Invited = "invited",
+    Joined = "joined",
+    Shared = "shared",
+    WorldReadable = "world_readable",
+}
+
+interface IProps {
+    roomId: string;
+}
+
+interface IState {
+    joinRule: JoinRule;
+    guestAccess: GuestAccess;
+    history: HistoryVisibility;
+    hasAliases: boolean;
+    encrypted: boolean;
+}
 
 @replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab")
-export default class SecurityRoomSettingsTab extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-    };
-
-    constructor() {
-        super();
+export default class SecurityRoomSettingsTab extends React.Component {
+    constructor(props) {
+        super(props);
 
         this.state = {
-            joinRule: "invite",
-            guestAccess: "can_join",
-            history: "shared",
+            joinRule: JoinRule.Invite,
+            guestAccess: GuestAccess.CanJoin,
+            history: HistoryVisibility.Shared,
             hasAliases: false,
             encrypted: false,
         };
     }
 
     // TODO: [REACT-WARNING] Move this to constructor
-    async UNSAFE_componentWillMount(): void { // eslint-disable-line camelcase
-        MatrixClientPeg.get().on("RoomState.events", this._onStateEvent);
+    async UNSAFE_componentWillMount() { // eslint-disable-line camelcase
+        MatrixClientPeg.get().on("RoomState.events", this.onStateEvent);
 
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         const state = room.currentState;
 
-        const joinRule = this._pullContentPropertyFromEvent(
+        const joinRule: JoinRule = this.pullContentPropertyFromEvent(
             state.getStateEvents("m.room.join_rules", ""),
             'join_rule',
-            'invite',
+            JoinRule.Invite,
         );
-        const guestAccess = this._pullContentPropertyFromEvent(
+        const guestAccess: GuestAccess = this.pullContentPropertyFromEvent(
             state.getStateEvents("m.room.guest_access", ""),
             'guest_access',
-            'forbidden',
+            GuestAccess.Forbidden,
         );
-        const history = this._pullContentPropertyFromEvent(
+        const history: HistoryVisibility = this.pullContentPropertyFromEvent(
             state.getStateEvents("m.room.history_visibility", ""),
             'history_visibility',
-            'shared',
+            HistoryVisibility.Shared,
         );
         const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
         this.setState({joinRule, guestAccess, history, encrypted});
-        const hasAliases = await this._hasAliases();
+        const hasAliases = await this.hasAliases();
         this.setState({hasAliases});
     }
 
-    _pullContentPropertyFromEvent(event, key, defaultValue) {
+    private pullContentPropertyFromEvent(event: MatrixEvent, key: string, defaultValue: T): T {
         if (!event || !event.getContent()) return defaultValue;
         return event.getContent()[key] || defaultValue;
     }
 
-    componentWillUnmount(): void {
-        MatrixClientPeg.get().removeListener("RoomState.events", this._onStateEvent);
+    componentWillUnmount() {
+        MatrixClientPeg.get().removeListener("RoomState.events", this.onStateEvent);
     }
 
-    _onStateEvent = (e) => {
+    private onStateEvent = (e: MatrixEvent) => {
         const refreshWhenTypes = [
             'm.room.join_rules',
             'm.room.guest_access',
@@ -93,7 +121,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         if (refreshWhenTypes.includes(e.getType())) this.forceUpdate();
     };
 
-    _onEncryptionChange = (e) => {
+    private onEncryptionChange = (e: React.ChangeEvent) => {
         Modal.createTrackedDialog('Enable encryption', '', QuestionDialog, {
             title: _t('Enable encryption?'),
             description: _t(
@@ -102,10 +130,9 @@ export default class SecurityRoomSettingsTab extends React.Component {
                 "may prevent many bots and bridges from working correctly. Learn more about encryption.",
                 {},
                 {
-                    'a': (sub) => {
-                        return {sub};
-                    },
+                    a: sub => {sub},
                 },
             ),
             onFinished: (confirm) => {
@@ -127,12 +154,12 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _fixGuestAccess = (e) => {
+    private fixGuestAccess = (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
 
-        const joinRule = "invite";
-        const guestAccess = "can_join";
+        const joinRule = JoinRule.Invite;
+        const guestAccess = GuestAccess.CanJoin;
 
         const beforeJoinRule = this.state.joinRule;
         const beforeGuestAccess = this.state.guestAccess;
@@ -149,7 +176,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _onRoomAccessRadioToggle = (roomAccess) => {
+    private onRoomAccessRadioToggle = (roomAccess: string) => {
         //                         join_rule
         //                      INVITE  |  PUBLIC
         //        ----------------------+----------------
@@ -163,20 +190,20 @@ export default class SecurityRoomSettingsTab extends React.Component {
         // invite them, you clearly want them to join, whether they're a
         // guest or not.  In practice, guest_access should probably have
         // been implemented as part of the join_rules enum.
-        let joinRule = "invite";
-        let guestAccess = "can_join";
+        let joinRule = JoinRule.Invite;
+        let guestAccess = GuestAccess.CanJoin;
 
         switch (roomAccess) {
             case "invite_only":
                 // no change - use defaults above
                 break;
             case "public_no_guests":
-                joinRule = "public";
-                guestAccess = "forbidden";
+                joinRule = JoinRule.Public;
+                guestAccess = GuestAccess.Forbidden;
                 break;
             case "public_with_guests":
-                joinRule = "public";
-                guestAccess = "can_join";
+                joinRule = JoinRule.Public;
+                guestAccess = GuestAccess.CanJoin;
                 break;
         }
 
@@ -195,7 +222,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _onHistoryRadioToggle = (history) => {
+    private onHistoryRadioToggle = (history: HistoryVisibility) => {
         const beforeHistory = this.state.history;
         this.setState({history: history});
         MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.history_visibility", {
@@ -206,11 +233,11 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _updateBlacklistDevicesFlag = (checked) => {
+    private updateBlacklistDevicesFlag = (checked: boolean) => {
         MatrixClientPeg.get().getRoom(this.props.roomId).setBlacklistUnverifiedDevices(checked);
     };
 
-    async _hasAliases() {
+    private async hasAliases(): Promise {
         const cli = MatrixClientPeg.get();
         if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
             const response = await cli.unstableGetLocalAliases(this.props.roomId);
@@ -224,7 +251,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         }
     }
 
-    _renderRoomAccess() {
+    private renderRoomAccess() {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const joinRule = this.state.joinRule;
@@ -240,7 +267,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
                     
                     
                         {_t("Guests cannot join this room even if explicitly invited.")} 
-                        {_t("Click here to fix")}
+                        {_t("Click here to fix")}
                     
                 
    
             );
@@ -265,7 +292,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
                 ;
         }
@@ -356,7 +383,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         let historySection = (<>
             {_t("Who can read history?")}
             
    
-                {this._renderHistory()}
+                {this.renderHistory()}
             
    
         );
         if (!SettingsStore.getValue(UIFeature.RoomHistorySettings)) {
@@ -373,15 +400,16 @@ export default class SecurityRoomSettingsTab extends React.Component {
                         
    
                             {_t("Once enabled, encryption cannot be disabled.")}
                         
    
-                        
+                        
                     
    
                     {encryptionSettings}
                 
    
 
                 {_t("Who can access this room?")}
                 
    
-                    {this._renderRoomAccess()}
+                    {this.renderRoomAccess()}
                 
    
 
                 {historySection}
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
index b1ad9f3d23..5118414903 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@@ -192,7 +192,11 @@ export default class GeneralUserSettingsTab extends React.Component {
 
         SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLanguage);
         this.setState({language: newLanguage});
-        PlatformPeg.get().reload();
+        const platform = PlatformPeg.get();
+        if (platform) {
+            platform.setLanguage(newLanguage);
+            platform.reload();
+        }
     };
 
     _onSpellCheckLanguagesChange = (languages) => {
@@ -319,8 +323,11 @@ export default class GeneralUserSettingsTab extends React.Component {
         return (
             
    
                 {_t("Language and region")}
-                
+                
             
    
         );
     }
@@ -329,8 +336,10 @@ export default class GeneralUserSettingsTab extends React.Component {
         return (
             
    
                 {_t("Spell check dictionaries")}
-                
+                
             
    
         );
     }
diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.js b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
similarity index 64%
rename from src/components/views/settings/tabs/user/HelpUserSettingsTab.js
rename to src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
index e16ee686f5..3fa0be478c 100644
--- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,27 +15,37 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t, getCurrentLanguage} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
+import AccessibleTooltipButton from '../../../elements/AccessibleTooltipButton';
 import SdkConfig from "../../../../../SdkConfig";
 import createRoom from "../../../../../createRoom";
 import Modal from "../../../../../Modal";
-import * as sdk from "../../../../../";
+import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
 import UpdateCheckButton from "../../UpdateCheckButton";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+import { copyPlaintext } from "../../../../../utils/strings";
+import * as ContextMenu from "../../../../structures/ContextMenu";
+import { toRightOf } from "../../../../structures/ContextMenu";
+
+interface IProps {
+    closeSettingsFn: () => {};
+}
+
+interface IState {
+    appVersion: string;
+    canUpdate: boolean;
+}
 
 @replaceableComponent("views.settings.tabs.user.HelpUserSettingsTab")
-export default class HelpUserSettingsTab extends React.Component {
-    static propTypes = {
-        closeSettingsFn: PropTypes.func.isRequired,
-    };
+export default class HelpUserSettingsTab extends React.Component {
+    protected closeCopiedTooltip: () => void;
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             appVersion: null,
@@ -53,7 +62,13 @@ export default class HelpUserSettingsTab extends React.Component {
         });
     }
 
-    _onClearCacheAndReload = (e) => {
+    componentWillUnmount() {
+        // if the Copied tooltip is open then get rid of it, there are ways to close the modal which wouldn't close
+        // the tooltip otherwise, such as pressing Escape
+        if (this.closeCopiedTooltip) this.closeCopiedTooltip();
+    }
+
+    private onClearCacheAndReload = (e) => {
         if (!PlatformPeg.get()) return;
 
         // Dev note: please keep this log line, it's useful when troubleshooting a MatrixClient suddenly
@@ -65,7 +80,7 @@ export default class HelpUserSettingsTab extends React.Component {
         });
     };
 
-    _onBugReport = (e) => {
+    private onBugReport = (e) => {
         const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
         if (!BugReportDialog) {
             return;
@@ -73,7 +88,7 @@ export default class HelpUserSettingsTab extends React.Component {
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
     };
 
-    _onStartBotChat = (e) => {
+    private onStartBotChat = (e) => {
         this.props.closeSettingsFn();
         createRoom({
             dmUserId: SdkConfig.get().welcomeUserId,
@@ -81,7 +96,7 @@ export default class HelpUserSettingsTab extends React.Component {
         });
     };
 
-    _showSpoiler = (event) => {
+    private showSpoiler = (event) => {
         const target = event.target;
         target.innerHTML = target.getAttribute('data-spoiler');
 
@@ -93,7 +108,7 @@ export default class HelpUserSettingsTab extends React.Component {
         selection.addRange(range);
     };
 
-    _renderLegal() {
+    private renderLegal() {
         const tocLinks = SdkConfig.get().terms_and_conditions_links;
         if (!tocLinks) return null;
 
@@ -114,7 +129,7 @@ export default class HelpUserSettingsTab extends React.Component {
         );
     }
 
-    _renderCredits() {
+    private renderCredits() {
         // Note: This is not translated because it is legal text.
         // Also,   is ugly but necessary.
         return (
@@ -122,34 +137,48 @@ export default class HelpUserSettingsTab extends React.Component {
                 {_t("Credits")}
                 
             
    
         );
     }
 
+    onAccessTokenCopyClick = async (e) => {
+        e.preventDefault();
+        const target = e.target; // copy target before we go async and React throws it away
+
+        const successful = await copyPlaintext(MatrixClientPeg.get().getAccessToken());
+        const buttonRect = target.getBoundingClientRect();
+        const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
+        const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
+            ...toRightOf(buttonRect, 2),
+            message: successful ? _t('Copied!') : _t('Failed to copy'),
+        });
+        this.closeCopiedTooltip = target.onmouseleave = close;
+    }
+
     render() {
         const brand = SdkConfig.get().brand;
 
@@ -188,7 +217,7 @@ export default class HelpUserSettingsTab extends React.Component {
                         },
                     )}
                     
    
-                        
+                        
                             {_t("Chat with %(brand)s Bot", { brand })}
                         
                     
    
@@ -212,28 +241,27 @@ export default class HelpUserSettingsTab extends React.Component {
                 
    
                     {_t('Bug reporting')}
                     
    
-                        {
-                            _t( "If you've submitted a bug via GitHub, debug logs can help " +
-                                "us track down the problem. Debug logs contain application " +
-                                "usage data including your username, the IDs or aliases of " +
-                                "the rooms or groups you have visited and the usernames of " +
-                                "other users. They do not contain messages.",
-                            )
-                        }
+                        {_t(
+                            "If you've submitted a bug via GitHub, debug logs can help " +
+                            "us track down the problem. Debug logs contain application " +
+                            "usage data including your username, the IDs or aliases of " +
+                            "the rooms or groups you have visited and the usernames of " +
+                            "other users. They do not contain messages.",
+                        )}
                         
    
-                            
+                            
                                 {_t("Submit debug logs")}
                             
                         
    
-                        {
-                            _t( "To report a Matrix-related security issue, please read the Matrix.org " +
-                                "Security Disclosure Policy.", {},
-                                {
-                                    'a': (sub) =>
-                                        {sub},
-                                })
-                        }
+                        {_t(
+                            "To report a Matrix-related security issue, please read the Matrix.org " +
+                            "Security Disclosure Policy.", {},
+                            {
+                                a: sub => {sub},
+                            },
+                        )}
                     
    
                 
    
             );
@@ -260,20 +288,29 @@ export default class HelpUserSettingsTab extends React.Component {
                         {updateButton}
                     
    
                 
    
-                {this._renderLegal()}
-                {this._renderCredits()}
+                {this.renderLegal()}
+                {this.renderCredits()}
                 
    
                     {_t("Advanced")}
                     
    
                         {_t("Homeserver is")} {MatrixClientPeg.get().getHomeserverUrl()}
    
                         {_t("Identity Server is")} {MatrixClientPeg.get().getIdentityServerUrl()}
    
-                        {_t("Access Token:") + ' '}
-                        
-                            <{ _t("click to reveal") }>
-                        
+                        
    
+                        
    
+                            {_t("Access Token")}
    
+                            {_t("Your access token gives full access to your account."
+                               + " Do not share it with anyone." )}
+                            
    
+                                {MatrixClientPeg.get().getAccessToken()}
+                                
+                            
    
+                        

    
                         
    
-                            
+                            
                                 {_t("Clear cache and reload")}
                             
                         
    
diff --git a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
similarity index 90%
rename from src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js
rename to src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
index 91f6728a7a..6997defea9 100644
--- a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,10 +25,16 @@ import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../../index";
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
 
+interface IState {
+    busy: boolean;
+    newPersonalRule: string;
+    newList: string;
+}
+
 @replaceableComponent("views.settings.tabs.user.MjolnirUserSettingsTab")
-export default class MjolnirUserSettingsTab extends React.Component {
-    constructor() {
-        super();
+export default class MjolnirUserSettingsTab extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
 
         this.state = {
             busy: false,
@@ -37,15 +43,15 @@ export default class MjolnirUserSettingsTab extends React.Component {
         };
     }
 
-    _onPersonalRuleChanged = (e) => {
+    private onPersonalRuleChanged = (e) => {
         this.setState({newPersonalRule: e.target.value});
     };
 
-    _onNewListChanged = (e) => {
+    private onNewListChanged = (e) => {
         this.setState({newList: e.target.value});
     };
 
-    _onAddPersonalRule = async (e) => {
+    private onAddPersonalRule = async (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -72,7 +78,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     };
 
-    _onSubscribeList = async (e) => {
+    private onSubscribeList = async (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -94,7 +100,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     };
 
-    async _removePersonalRule(rule: ListRule) {
+    private async removePersonalRule(rule: ListRule) {
         this.setState({busy: true});
         try {
             const list = Mjolnir.sharedInstance().getPersonalList();
@@ -112,7 +118,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     }
 
-    async _unsubscribeFromList(list: BanList) {
+    private async unsubscribeFromList(list: BanList) {
         this.setState({busy: true});
         try {
             await Mjolnir.sharedInstance().unsubscribeFromList(list.roomId);
@@ -130,7 +136,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     }
 
-    _viewListRules(list: BanList) {
+    private viewListRules(list: BanList) {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
         const room = MatrixClientPeg.get().getRoom(list.roomId);
@@ -161,7 +167,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         });
     }
 
-    _renderPersonalBanListRules() {
+    private renderPersonalBanListRules() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         const list = Mjolnir.sharedInstance().getPersonalList();
@@ -174,7 +180,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
                 
  • 
                      this._removePersonalRule(rule)}
+                        onClick={() => this.removePersonalRule(rule)}
                         disabled={this.state.busy}
                     >
                         {_t("Remove")}
@@ -192,7 +198,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         );
     }
 
-    _renderSubscribedBanLists() {
+    private renderSubscribedBanLists() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         const personalList = Mjolnir.sharedInstance().getPersonalList();
@@ -209,14 +215,14 @@ export default class MjolnirUserSettingsTab extends React.Component {
                 
  • 
                      this._unsubscribeFromList(list)}
+                        onClick={() => this.unsubscribeFromList(list)}
                         disabled={this.state.busy}
                     >
                         {_t("Unsubscribe")}
                      
                      this._viewListRules(list)}
+                        onClick={() => this.viewListRules(list)}
                         disabled={this.state.busy}
                     >
                         {_t("View rules")}
@@ -271,21 +277,21 @@ export default class MjolnirUserSettingsTab extends React.Component {
                         )}
                     
    • 
                     
    
-                        {this._renderPersonalBanListRules()}
+                        {this.renderPersonalBanListRules()}
                     
    
                     
    
-                        
    
+                        
                             
                             
                                 {_t("Ignore")}
@@ -303,20 +309,20 @@ export default class MjolnirUserSettingsTab extends React.Component {
                         )}
                     
    
                     
    
-                        {this._renderSubscribedBanLists()}
+                        {this.renderSubscribedBanLists()}
                     
    
                     
    
-                        
+                        
                             
                             
                                 {_t("Subscribe")}
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
similarity index 80%
rename from src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
rename to src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index 0cd3dd6698..f02c5c9ce0 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,10 +23,24 @@ import Field from "../../../elements/Field";
 import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
 import {SettingLevel} from "../../../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+
+interface IState {
+    autoLaunch: boolean;
+    autoLaunchSupported: boolean;
+    warnBeforeExit: boolean;
+    warnBeforeExitSupported: boolean;
+    alwaysShowMenuBarSupported: boolean;
+    alwaysShowMenuBar: boolean;
+    minimizeToTraySupported: boolean;
+    minimizeToTray: boolean;
+    autocompleteDelay: string;
+    readMarkerInViewThresholdMs: string;
+    readMarkerOutOfViewThresholdMs: string;
+}
 
 @replaceableComponent("views.settings.tabs.user.PreferencesUserSettingsTab")
-export default class PreferencesUserSettingsTab extends React.Component {
+export default class PreferencesUserSettingsTab extends React.Component<{}, IState> {
     static ROOM_LIST_SETTINGS = [
         'breadcrumbs',
     ];
@@ -68,8 +82,8 @@ export default class PreferencesUserSettingsTab extends React.Component {
         // Autocomplete delay (niche text box)
     ];
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             autoLaunch: false,
@@ -89,7 +103,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         };
     }
 
-    async componentDidMount(): void {
+    async componentDidMount() {
         const platform = PlatformPeg.get();
 
         const autoLaunchSupported = await platform.supportsAutoLaunch();
@@ -128,38 +142,38 @@ export default class PreferencesUserSettingsTab extends React.Component {
         });
     }
 
-    _onAutoLaunchChange = (checked) => {
+    private onAutoLaunchChange = (checked: boolean) => {
         PlatformPeg.get().setAutoLaunchEnabled(checked).then(() => this.setState({autoLaunch: checked}));
     };
 
-    _onWarnBeforeExitChange = (checked) => {
+    private onWarnBeforeExitChange = (checked: boolean) => {
         PlatformPeg.get().setWarnBeforeExit(checked).then(() => this.setState({warnBeforeExit: checked}));
     }
 
-    _onAlwaysShowMenuBarChange = (checked) => {
+    private onAlwaysShowMenuBarChange = (checked: boolean) => {
         PlatformPeg.get().setAutoHideMenuBarEnabled(!checked).then(() => this.setState({alwaysShowMenuBar: checked}));
     };
 
-    _onMinimizeToTrayChange = (checked) => {
+    private onMinimizeToTrayChange = (checked: boolean) => {
         PlatformPeg.get().setMinimizeToTrayEnabled(checked).then(() => this.setState({minimizeToTray: checked}));
     };
 
-    _onAutocompleteDelayChange = (e) => {
+    private onAutocompleteDelayChange = (e: React.ChangeEvent) => {
         this.setState({autocompleteDelay: e.target.value});
         SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    _onReadMarkerInViewThresholdMs = (e) => {
+    private onReadMarkerInViewThresholdMs = (e: React.ChangeEvent) => {
         this.setState({readMarkerInViewThresholdMs: e.target.value});
         SettingsStore.setValue("readMarkerInViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    _onReadMarkerOutOfViewThresholdMs = (e) => {
+    private onReadMarkerOutOfViewThresholdMs = (e: React.ChangeEvent) => {
         this.setState({readMarkerOutOfViewThresholdMs: e.target.value});
         SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    _renderGroup(settingIds) {
+    private renderGroup(settingIds: string[]): React.ReactNodeArray {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
         return settingIds.filter(SettingsStore.isEnabled).map(i => {
             return ;
@@ -171,7 +185,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.autoLaunchSupported) {
             autoLaunchOption = ;
         }
 
@@ -179,7 +193,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.warnBeforeExitSupported) {
             warnBeforeExitOption = ;
         }
 
@@ -187,7 +201,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.alwaysShowMenuBarSupported) {
             autoHideMenuOption = ;
         }
 
@@ -195,7 +209,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.minimizeToTraySupported) {
             minimizeToTrayOption = ;
         }
 
@@ -205,22 +219,22 @@ export default class PreferencesUserSettingsTab extends React.Component {
 
                 
    
                     {_t("Room list")}
-                    {this._renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
                 
    
 
                 
    
                     {_t("Composer")}
-                    {this._renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
                 
    
 
                 
    
                     {_t("Timeline")}
-                    {this._renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
                 
    
 
                 
    
                     {_t("General")}
-                    {this._renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
                     {minimizeToTrayOption}
                     {autoHideMenuOption}
                     {autoLaunchOption}
@@ -229,17 +243,17 @@ export default class PreferencesUserSettingsTab extends React.Component {
                         label={_t('Autocomplete delay (ms)')}
                         type='number'
                         value={this.state.autocompleteDelay}
-                        onChange={this._onAutocompleteDelayChange} />
+                        onChange={this.onAutocompleteDelayChange} />
                     
+                        onChange={this.onReadMarkerInViewThresholdMs} />
                     
+                        onChange={this.onReadMarkerOutOfViewThresholdMs} />
                 
    
             
    
         );
diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
index 8a70811399..53ed511b0a 100644
--- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
@@ -255,15 +255,18 @@ export default class SecurityUserSettingsTab extends React.Component {
     _renderIgnoredUsers() {
         const {waitingUnignored, ignoredUserIds} = this.state;
 
-        if (!ignoredUserIds || ignoredUserIds.length === 0) return null;
-
-        const userIds = ignoredUserIds
-            .map((u) => );
+        const userIds = !ignoredUserIds?.length
+            ? _t('You have no ignored users.')
+            : ignoredUserIds.map((u) => {
+                return (
+                    
+                );
+            });
 
         return (
             
    
diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
index d8adab55f6..362059f8ed 100644
--- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
@@ -176,8 +176,8 @@ export default class VoiceUserSettingsTab extends React.Component {
                 const defaultDevice = getDefaultDevice(audioOutputs);
                 speakerDropdown = (
                     
+                        value={this.state.activeAudioOutput || defaultDevice}
+                        onChange={this._setAudioOutput}>
                         {this._renderDeviceOptions(audioOutputs, 'audioOutput')}
                     
                 );
@@ -188,8 +188,8 @@ export default class VoiceUserSettingsTab extends React.Component {
                 const defaultDevice = getDefaultDevice(audioInputs);
                 microphoneDropdown = (
                     
+                        value={this.state.activeAudioInput || defaultDevice}
+                        onChange={this._setAudioInput}>
                         {this._renderDeviceOptions(audioInputs, 'audioInput')}
                     
                 );
@@ -200,8 +200,8 @@ export default class VoiceUserSettingsTab extends React.Component {
                 const defaultDevice = getDefaultDevice(videoInputs);
                 webcamDropdown = (
                     
+                        value={this.state.activeVideoInput || defaultDevice}
+                        onChange={this._setVideoInput}>
                         {this._renderDeviceOptions(videoInputs, 'videoInput')}
                     
                 );
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 6825d84013..e48e1d5dc2 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -297,15 +297,19 @@ export class SpaceItem extends React.PureComponent {
         const isActive = activeSpaces.includes(space);
         const itemClasses = classNames({
             "mx_SpaceItem": true,
+            "mx_SpaceItem_narrow": isNarrow,
             "collapsed": collapsed,
             "hasSubSpaces": childSpaces && childSpaces.length,
         });
+
+        const isInvite = space.getMyMembership() === "invite";
         const classes = classNames("mx_SpaceButton", {
             mx_SpaceButton_active: isActive,
             mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition,
             mx_SpaceButton_narrow: isNarrow,
+            mx_SpaceButton_invite: isInvite,
         });
-        const notificationState = space.getMyMembership() === "invite"
+        const notificationState = isInvite
             ? StaticNotificationState.forSymbol("!", NotificationColor.Red)
             : SpaceStore.instance.getNotificationState(space.roomId);
 
diff --git a/src/components/views/verification/VerificationCancelled.js b/src/components/views/verification/VerificationCancelled.js
index 0bbaea1804..c57094d9b5 100644
--- a/src/components/views/verification/VerificationCancelled.js
+++ b/src/components/views/verification/VerificationCancelled.js
@@ -29,14 +29,14 @@ export default class VerificationCancelled extends React.Component {
     render() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return 
    
-                
    {_t(
-                    "The other party cancelled the verification.",
-                )}
    
-                
+            
    {_t(
+                "The other party cancelled the verification.",
+            )}
    
+            
         
    ;
     }
 }
diff --git a/src/components/views/voice_messages/Clock.tsx b/src/components/views/voice_messages/Clock.tsx
index 6c256957e9..23e6762c52 100644
--- a/src/components/views/voice_messages/Clock.tsx
+++ b/src/components/views/voice_messages/Clock.tsx
@@ -29,14 +29,20 @@ interface IState {
  * displayed, making it possible to see "82:29".
  */
 @replaceableComponent("views.voice_messages.Clock")
-export default class Clock extends React.PureComponent {
+export default class Clock extends React.Component {
     public constructor(props) {
         super(props);
     }
 
+    shouldComponentUpdate(nextProps: Readonly, nextState: Readonly, nextContext: any): boolean {
+        const currentFloor = Math.floor(this.props.seconds);
+        const nextFloor = Math.floor(nextProps.seconds);
+        return currentFloor !== nextFloor;
+    }
+
     public render() {
         const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0');
-        const seconds = Math.round(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
+        const seconds = Math.floor(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
         return {minutes}:{seconds};
     }
 }
diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx
index 5e9006c6ab..b82539eb16 100644
--- a/src/components/views/voice_messages/LiveRecordingClock.tsx
+++ b/src/components/views/voice_messages/LiveRecordingClock.tsx
@@ -31,7 +31,7 @@ interface IState {
  * A clock for a live recording.
  */
 @replaceableComponent("views.voice_messages.LiveRecordingClock")
-export default class LiveRecordingClock extends React.Component {
+export default class LiveRecordingClock extends React.PureComponent {
     public constructor(props) {
         super(props);
 
@@ -39,12 +39,6 @@ export default class LiveRecordingClock extends React.Component
         this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
     }
 
-    shouldComponentUpdate(nextProps: Readonly, nextState: Readonly, nextContext: any): boolean {
-        const currentFloor = Math.floor(this.state.seconds);
-        const nextFloor = Math.floor(nextState.seconds);
-        return currentFloor !== nextFloor;
-    }
-
     private onRecordingUpdate = (update: IRecordingUpdate) => {
         this.setState({seconds: update.timeSeconds});
     };
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
index c1f5e97fff..aab89f6ab1 100644
--- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import {IRecordingUpdate, VoiceRecording} from "../../../voice/VoiceRecording";
+import {IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording} from "../../../voice/VoiceRecording";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {arrayFastResample, arraySeed} from "../../../utils/arrays";
 import {percentageOf} from "../../../utils/numbers";
@@ -29,8 +29,6 @@ interface IState {
     heights: number[];
 }
 
-const DOWNSAMPLE_TARGET = 35; // number of bars we want
-
 /**
  * A waveform which shows the waveform of a live recording
  */
@@ -39,14 +37,14 @@ export default class LiveRecordingWaveform extends React.PureComponent {
         // The waveform and the downsample target are pretty close, so we should be fine to
         // do this, despite the docs on arrayFastResample.
-        const bars = arrayFastResample(Array.from(update.waveform), DOWNSAMPLE_TARGET);
+        const bars = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
         this.setState({
             // The incoming data is between zero and one, but typically even screaming into a
             // microphone won't send you over 0.6, so we artificially adjust the gain for the
diff --git a/src/components/views/voice_messages/PlayPauseButton.tsx b/src/components/views/voice_messages/PlayPauseButton.tsx
new file mode 100644
index 0000000000..1f87eb012d
--- /dev/null
+++ b/src/components/views/voice_messages/PlayPauseButton.tsx
@@ -0,0 +1,61 @@
+/*
+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 React, {ReactNode} from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {_t} from "../../../languageHandler";
+import {Playback, PlaybackState} from "../../../voice/Playback";
+import classNames from "classnames";
+
+interface IProps {
+    // Playback instance to manipulate. Cannot change during the component lifecycle.
+    playback: Playback;
+
+    // The playback phase to render. Able to change during the component lifecycle.
+    playbackPhase: PlaybackState;
+}
+
+/**
+ * Displays a play/pause button (activating the play/pause function of the recorder)
+ * to be displayed in reference to a recording.
+ */
+@replaceableComponent("views.voice_messages.PlayPauseButton")
+export default class PlayPauseButton extends React.PureComponent {
+    public constructor(props) {
+        super(props);
+    }
+
+    private onClick = async () => {
+        await this.props.playback.toggle();
+    };
+
+    public render(): ReactNode {
+        const isPlaying = this.props.playback.isPlaying;
+        const isDisabled = this.props.playbackPhase === PlaybackState.Decoding;
+        const classes = classNames('mx_PlayPauseButton', {
+            'mx_PlayPauseButton_play': !isPlaying,
+            'mx_PlayPauseButton_pause': isPlaying,
+            'mx_PlayPauseButton_disabled': isDisabled,
+        });
+        return ;
+    }
+}
diff --git a/src/components/views/voice_messages/PlaybackClock.tsx b/src/components/views/voice_messages/PlaybackClock.tsx
new file mode 100644
index 0000000000..2e8ec9a3e7
--- /dev/null
+++ b/src/components/views/voice_messages/PlaybackClock.tsx
@@ -0,0 +1,71 @@
+/*
+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 React from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Clock from "./Clock";
+import {Playback, PlaybackState} from "../../../voice/Playback";
+import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+
+interface IProps {
+    playback: Playback;
+}
+
+interface IState {
+    seconds: number;
+    durationSeconds: number;
+    playbackPhase: PlaybackState;
+}
+
+/**
+ * A clock for a playback of a recording.
+ */
+@replaceableComponent("views.voice_messages.PlaybackClock")
+export default class PlaybackClock extends React.PureComponent {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            seconds: this.props.playback.clockInfo.timeSeconds,
+            // we track the duration on state because we won't really know what the clip duration
+            // is until the first time update, and as a PureComponent we are trying to dedupe state
+            // updates as much as possible. This is just the easiest way to avoid a forceUpdate() or
+            // member property to track "did we get a duration".
+            durationSeconds: this.props.playback.clockInfo.durationSeconds,
+            playbackPhase: PlaybackState.Stopped, // assume not started, so full clock
+        };
+        this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);
+        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
+    }
+
+    private onPlaybackUpdate = (ev: PlaybackState) => {
+        // Convert Decoding -> Stopped because we don't care about the distinction here
+        if (ev === PlaybackState.Decoding) ev = PlaybackState.Stopped;
+        this.setState({playbackPhase: ev});
+    };
+
+    private onTimeUpdate = (time: number[]) => {
+        this.setState({seconds: time[0], durationSeconds: time[1]});
+    };
+
+    public render() {
+        let seconds = this.state.seconds;
+        if (this.state.playbackPhase === PlaybackState.Stopped) {
+            seconds = this.state.durationSeconds;
+        }
+        return ;
+    }
+}
diff --git a/src/components/views/voice_messages/PlaybackWaveform.tsx b/src/components/views/voice_messages/PlaybackWaveform.tsx
new file mode 100644
index 0000000000..123af5dfa5
--- /dev/null
+++ b/src/components/views/voice_messages/PlaybackWaveform.tsx
@@ -0,0 +1,68 @@
+/*
+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 React from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {arraySeed, arrayTrimFill} from "../../../utils/arrays";
+import Waveform from "./Waveform";
+import {Playback, PLAYBACK_WAVEFORM_SAMPLES} from "../../../voice/Playback";
+import {percentageOf} from "../../../utils/numbers";
+
+interface IProps {
+    playback: Playback;
+}
+
+interface IState {
+    heights: number[];
+    progress: number;
+}
+
+/**
+ * A waveform which shows the waveform of a previously recorded recording
+ */
+@replaceableComponent("views.voice_messages.PlaybackWaveform")
+export default class PlaybackWaveform extends React.PureComponent {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            heights: this.toHeights(this.props.playback.waveform),
+            progress: 0, // default no progress
+        };
+
+        this.props.playback.waveformData.onUpdate(this.onWaveformUpdate);
+        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
+    }
+
+    private toHeights(waveform: number[]) {
+        const seed = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
+        return arrayTrimFill(waveform, PLAYBACK_WAVEFORM_SAMPLES, seed);
+    }
+
+    private onWaveformUpdate = (waveform: number[]) => {
+        this.setState({heights: this.toHeights(waveform)});
+    };
+
+    private onTimeUpdate = (time: number[]) => {
+        // Track percentages to very coarse precision, otherwise 0.002 ends up highlighting a bar.
+        const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(1));
+        this.setState({progress});
+    };
+
+    public render() {
+        return ;
+    }
+}
diff --git a/src/components/views/voice_messages/RecordingPlayback.tsx b/src/components/views/voice_messages/RecordingPlayback.tsx
new file mode 100644
index 0000000000..776997cec2
--- /dev/null
+++ b/src/components/views/voice_messages/RecordingPlayback.tsx
@@ -0,0 +1,62 @@
+/*
+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 {Playback, PlaybackState} from "../../../voice/Playback";
+import React, {ReactNode} from "react";
+import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import PlaybackWaveform from "./PlaybackWaveform";
+import PlayPauseButton from "./PlayPauseButton";
+import PlaybackClock from "./PlaybackClock";
+
+interface IProps {
+    // Playback instance to render. Cannot change during component lifecycle: create
+    // an all-new component instead.
+    playback: Playback;
+}
+
+interface IState {
+    playbackPhase: PlaybackState;
+}
+
+export default class RecordingPlayback extends React.PureComponent {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            playbackPhase: PlaybackState.Decoding, // default assumption
+        };
+
+        // We don't need to de-register: the class handles this for us internally
+        this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);
+
+        // Don't wait for the promise to complete - it will emit a progress update when it
+        // is done, and it's not meant to take long anyhow.
+        // noinspection JSIgnoredPromiseFromCall
+        this.props.playback.prepare();
+    }
+
+    private onPlaybackUpdate = (ev: PlaybackState) => {
+        this.setState({playbackPhase: ev});
+    };
+
+    public render(): ReactNode {
+        return 
    
+            
+            
+            
+        
    
+    }
+}
diff --git a/src/components/views/voice_messages/Waveform.tsx b/src/components/views/voice_messages/Waveform.tsx
index 5fa68dcadc..840a5a12b3 100644
--- a/src/components/views/voice_messages/Waveform.tsx
+++ b/src/components/views/voice_messages/Waveform.tsx
@@ -16,9 +16,11 @@ limitations under the License.
 
 import React from "react";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import classNames from "classnames";
 
 interface IProps {
     relHeights: number[]; // relative heights (0-1)
+    progress: number; // percent complete, 0-1, default 100%
 }
 
 interface IState {
@@ -28,9 +30,16 @@ interface IState {
  * A simple waveform component. This renders bars (centered vertically) for each
  * height provided in the component properties. Updating the properties will update
  * the rendered waveform.
+ *
+ * For CSS purposes, a mx_Waveform_bar_100pct class is added when the bar should be
+ * "filled", as a demonstration of the progress property.
  */
 @replaceableComponent("views.voice_messages.Waveform")
 export default class Waveform extends React.PureComponent {
+    public static defaultProps = {
+        progress: 1,
+    };
+
     public constructor(props) {
         super(props);
     }
@@ -38,7 +47,13 @@ export default class Waveform extends React.PureComponent {
     public render() {
         return 
    
             {this.props.relHeights.map((h, i) => {
-                return ;
+                const progress = this.props.progress;
+                const isCompleteBar = (i / this.props.relHeights.length) <= progress && progress > 0;
+                const classes = classNames({
+                    'mx_Waveform_bar': true,
+                    'mx_Waveform_bar_100pct': isCompleteBar,
+                });
+                return ;
             })}
         
    ;
     }
diff --git a/src/components/views/voip/AudioFeed.tsx b/src/components/views/voip/AudioFeed.tsx
new file mode 100644
index 0000000000..c78f0c0fc8
--- /dev/null
+++ b/src/components/views/voip/AudioFeed.tsx
@@ -0,0 +1,97 @@
+/*
+Copyright 2021 Šimon Brandner 
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {createRef} from 'react';
+import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
+import { logger } from 'matrix-js-sdk/src/logger';
+import CallMediaHandler from "../../../CallMediaHandler";
+
+interface IProps {
+    feed: CallFeed,
+}
+
+export default class AudioFeed extends React.Component {
+    private element = createRef();
+
+    componentDidMount() {
+        this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
+        this.playMedia();
+    }
+
+    componentWillUnmount() {
+        this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
+        this.stopMedia();
+    }
+
+    private playMedia() {
+        const element = this.element.current;
+        const audioOutput = CallMediaHandler.getAudioOutput();
+
+        if (audioOutput) {
+            try {
+                // This seems quite unreliable in Chrome, although I haven't yet managed to make a jsfiddle where
+                // it fails.
+                // It seems reliable if you set the sink ID after setting the srcObject and then set the sink ID
+                // back to the default after the call is over - Dave
+                element.setSinkId(audioOutput);
+            } catch (e) {
+                console.error("Couldn't set requested audio output device: using default", e);
+                logger.warn("Couldn't set requested audio output device: using default", e);
+            }
+        }
+
+        element.muted = false;
+        element.srcObject = this.props.feed.stream;
+        element.autoplay = true;
+
+        try {
+            // A note on calling methods on media elements:
+            // We used to have queues per media element to serialise all calls on those elements.
+            // The reason given for this was that load() and play() were racing. However, we now
+            // never call load() explicitly so this seems unnecessary. However, serialising every
+            // operation was causing bugs where video would not resume because some play command
+            // had got stuck and all media operations were queued up behind it. If necessary, we
+            // should serialise the ones that need to be serialised but then be able to interrupt
+            // them with another load() which will cancel the pending one, but since we don't call
+            // load() explicitly, it shouldn't be a problem. - Dave
+            element.play()
+        } catch (e) {
+            logger.info("Failed to play media element with feed", this.props.feed, e);
+        }
+    }
+
+    private stopMedia() {
+        const element = this.element.current;
+
+        element.pause();
+        element.src = null;
+
+        // As per comment in componentDidMount, setting the sink ID back to the
+        // default once the call is over makes setSinkId work reliably. - Dave
+        // Since we are not using the same element anymore, the above doesn't
+        // seem to be necessary - Šimon
+    }
+
+    private onNewStream = () => {
+        this.playMedia();
+    };
+
+    render() {
+        return (
+            
    ;
 
+        const avatarSize = this.props.pipMode ? 76 : 160;
+
         // The 'content' for the call, ie. the videos for a video call and profile picture
         // for voice calls (fills the bg)
         let contentView: React.ReactNode;
@@ -482,11 +492,13 @@ export default class CallView extends React.Component {
         const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
         let holdTransferContent;
         if (transfereeCall) {
-            const transferTargetRoom = MatrixClientPeg.get().getRoom(CallHandler.roomIdForCall(this.props.call));
+            const transferTargetRoom = MatrixClientPeg.get().getRoom(
+                CallHandler.sharedInstance().roomIdForCall(this.props.call),
+            );
             const transferTargetName = transferTargetRoom ? transferTargetRoom.name : _t("unknown person");
 
             const transfereeRoom = MatrixClientPeg.get().getRoom(
-                CallHandler.roomIdForCall(transfereeCall),
+                CallHandler.sharedInstance().roomIdForCall(transfereeCall),
             );
             const transfereeName = transfereeRoom ? transfereeRoom.name : _t("unknown person");
 
@@ -522,41 +534,85 @@ export default class CallView extends React.Component {
             
    ;
         }
 
-        if (this.props.call.type === CallType.Video) {
-            let localVideoFeed = null;
-            let onHoldBackground = null;
-            const backgroundStyle: CSSProperties = {};
-            const containerClasses = classNames({
-                mx_CallView_video: true,
-                mx_CallView_video_hold: isOnHold,
-            });
-            if (isOnHold) {
+        // This is a bit messy. I can't see a reason to have two onHold/transfer screens
+        if (isOnHold || transfereeCall) {
+            if (this.props.call.type === CallType.Video) {
+                const containerClasses = classNames({
+                    mx_CallView_content: true,
+                    mx_CallView_video: true,
+                    mx_CallView_video_hold: isOnHold,
+                });
+                let onHoldBackground = null;
+                const backgroundStyle: CSSProperties = {};
                 const backgroundAvatarUrl = avatarUrlForMember(
-                    // is it worth getting the size of the div to pass here?
+                // is it worth getting the size of the div to pass here?
                     this.props.call.getOpponentMember(), 1024, 1024, 'crop',
                 );
                 backgroundStyle.backgroundImage = 'url(' + backgroundAvatarUrl + ')';
                 onHoldBackground = 
    ;
-            }
-            if (!this.state.vidMuted) {
-                localVideoFeed = ;
-            }
 
-            contentView = 
    
-                {onHoldBackground}
-                
-                {localVideoFeed}
-                {holdTransferContent}
-                {callControls}
-            
    ;
-        } else {
-            const avatarSize = this.props.pipMode ? 76 : 160;
+                contentView = (
+                    
    
+                        {onHoldBackground}
+                        {holdTransferContent}
+                        {callControls}
+                    
    
+                );
+            } else {
+                const classes = classNames({
+                    mx_CallView_content: true,
+                    mx_CallView_voice: true,
+                    mx_CallView_voice_hold: isOnHold,
+                });
+
+                contentView =(
+                    
    
+                        
    
+                            
    
+                                
+                            
    
+                        
    
+                        {holdTransferContent}
+                        {callControls}
+                    
    
+                );
+            }
+        } else if (this.props.call.noIncomingFeeds()) {
+            // Here we're reusing the css classes from voice on hold, because
+            // I am lazy. If this gets merged, the CallView might be subject
+            // to change anyway - I might take an axe to this file in order to
+            // try to get other things working
             const classes = classNames({
+                mx_CallView_content: true,
                 mx_CallView_voice: true,
-                mx_CallView_voice_hold: isOnHold,
             });
 
+            const feeds = this.props.call.getLocalFeeds().map((feed, i) => {
+                // Here we check to hide local audio feeds to achieve the same UI/UX
+                // as before. But once again this might be subject to change
+                if (feed.isVideoMuted()) return;
+                return (
+                    
+                );
+            });
+
+            // Saying "Connecting" here isn't really true, but the best thing
+            // I can come up with, but this might be subject to change as well
             contentView = 
    
+                {feeds}
                 
    
                     
    
                          {
                         />
                     
    
                 
    
-                {holdTransferContent}
+                
    {_t("Connecting")}
    
+                {callControls}
+            
    ;
+        } else {
+            const containerClasses = classNames({
+                mx_CallView_content: true,
+                mx_CallView_video: true,
+            });
+
+            // TODO: Later the CallView should probably be reworked to support
+            // any number of feeds but now we can always expect there to be two
+            // feeds. This is because the js-sdk ignores any new incoming streams
+            const feeds = this.state.feeds.map((feed, i) => {
+                // Here we check to hide local audio feeds to achieve the same UI/UX
+                // as before. But once again this might be subject to change
+                if (feed.isVideoMuted() && feed.isLocal()) return;
+                return (
+                    
+                );
+            });
+
+            contentView = 
    
+                {feeds}
                 {callControls}
             
    ;
         }
diff --git a/src/components/views/voip/CallViewForRoom.tsx b/src/components/views/voip/CallViewForRoom.tsx
index 878b6af20f..0c785f758d 100644
--- a/src/components/views/voip/CallViewForRoom.tsx
+++ b/src/components/views/voip/CallViewForRoom.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import React from 'react';
-import CallHandler from '../../../CallHandler';
+import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
 import CallView from './CallView';
 import dis from '../../../dispatcher/dispatcher';
 import {Resizable} from "re-resizable";
@@ -54,24 +54,30 @@ export default class CallViewForRoom extends React.Component {
 
     public componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.CallChangeRoom, this.updateCall);
     }
 
     public componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
+        CallHandler.sharedInstance().removeListener(CallHandlerEvent.CallChangeRoom, this.updateCall);
     }
 
     private onAction = (payload) => {
         switch (payload.action) {
             case 'call_state': {
-                const newCall = this.getCall();
-                if (newCall !== this.state.call) {
-                    this.setState({call: newCall});
-                }
+                this.updateCall();
                 break;
             }
         }
     };
 
+    private updateCall = () => {
+        const newCall = this.getCall();
+        if (newCall !== this.state.call) {
+            this.setState({call: newCall});
+        }
+    };
+
     private getCall(): MatrixCall {
         const call = CallHandler.sharedInstance().getCallForRoom(this.props.roomId);
 
diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx
index 0ca2a196c2..2abdc0641d 100644
--- a/src/components/views/voip/IncomingCallBox.tsx
+++ b/src/components/views/voip/IncomingCallBox.tsx
@@ -72,7 +72,7 @@ export default class IncomingCallBox extends React.Component {
         e.stopPropagation();
         dis.dispatch({
             action: 'answer',
-            room_id: CallHandler.roomIdForCall(this.state.incomingCall),
+            room_id: CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall),
         });
     };
 
@@ -80,7 +80,7 @@ export default class IncomingCallBox extends React.Component {
         e.stopPropagation();
         dis.dispatch({
             action: 'reject',
-            room_id: CallHandler.roomIdForCall(this.state.incomingCall),
+            room_id: CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall),
         });
     };
 
@@ -91,7 +91,7 @@ export default class IncomingCallBox extends React.Component {
 
         let room = null;
         if (this.state.incomingCall) {
-            room = MatrixClientPeg.get().getRoom(CallHandler.roomIdForCall(this.state.incomingCall));
+            room = MatrixClientPeg.get().getRoom(CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall));
         }
 
         const caller = room ? room.name : _t("Unknown caller");
diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx
index 2981fb6c04..d22fa055ce 100644
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -18,52 +18,102 @@ import classnames from 'classnames';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import React, {createRef} from 'react';
 import SettingsStore from "../../../settings/SettingsStore";
+import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
+import { logger } from 'matrix-js-sdk/src/logger';
+import MemberAvatar from "../avatars/MemberAvatar"
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-export enum VideoFeedType {
-    Local,
-    Remote,
-}
-
 interface IProps {
     call: MatrixCall,
 
-    type: VideoFeedType,
+    feed: CallFeed,
+
+    // Whether this call view is for picture-in-picture mode
+    // otherwise, it's the larger call view when viewing the room the call is in.
+    // This is sort of a proxy for a number of things but we currently have no
+    // need to control those things separately, so this is simpler.
+    pipMode?: boolean;
 
     // a callback which is called when the video element is resized
     // due to a change in video metadata
     onResize?: (e: Event) => void,
 }
 
-@replaceableComponent("views.voip.VideoFeed")
-export default class VideoFeed extends React.Component {
-    private vid = createRef();
+interface IState {
+    audioMuted: boolean;
+    videoMuted: boolean;
+}
 
-    componentDidMount() {
-        this.vid.current.addEventListener('resize', this.onResize);
-        this.setVideoElement();
+@replaceableComponent("views.voip.VideoFeed")
+export default class VideoFeed extends React.Component {
+    private element = createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            audioMuted: this.props.feed.isAudioMuted(),
+            videoMuted: this.props.feed.isVideoMuted(),
+        };
     }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.call !== prevProps.call) {
-            this.setVideoElement();
-        }
+    componentDidMount() {
+        this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
+        this.playMedia();
     }
 
     componentWillUnmount() {
-        this.vid.current.removeEventListener('resize', this.onResize);
+        this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
+        this.element.current?.removeEventListener('resize', this.onResize);
+        this.stopMedia();
     }
 
-    private setVideoElement() {
-        if (this.props.type === VideoFeedType.Local) {
-            this.props.call.setLocalVideoElement(this.vid.current);
-        } else {
-            this.props.call.setRemoteVideoElement(this.vid.current);
+    private playMedia() {
+        const element = this.element.current;
+        if (!element) return;
+        // We play audio in AudioFeed, not here
+        element.muted = true;
+        element.srcObject = this.props.feed.stream;
+        element.autoplay = true;
+        try {
+            // A note on calling methods on media elements:
+            // We used to have queues per media element to serialise all calls on those elements.
+            // The reason given for this was that load() and play() were racing. However, we now
+            // never call load() explicitly so this seems unnecessary. However, serialising every
+            // operation was causing bugs where video would not resume because some play command
+            // had got stuck and all media operations were queued up behind it. If necessary, we
+            // should serialise the ones that need to be serialised but then be able to interrupt
+            // them with another load() which will cancel the pending one, but since we don't call
+            // load() explicitly, it shouldn't be a problem. - Dave
+            element.play()
+        } catch (e) {
+            logger.info("Failed to play media element with feed", this.props.feed, e);
         }
     }
 
-    onResize = (e) => {
-        if (this.props.onResize) {
+    private stopMedia() {
+        const element = this.element.current;
+        if (!element) return;
+
+        element.pause();
+        element.src = null;
+
+        // As per comment in componentDidMount, setting the sink ID back to the
+        // default once the call is over makes setSinkId work reliably. - Dave
+        // Since we are not using the same element anymore, the above doesn't
+        // seem to be necessary - Šimon
+    }
+
+    private onNewStream = () => {
+        this.setState({
+            audioMuted: this.props.feed.isAudioMuted(),
+            videoMuted: this.props.feed.isVideoMuted(),
+        });
+        this.playMedia();
+    };
+
+    private onResize = (e) => {
+        if (this.props.onResize && !this.props.feed.isLocal()) {
             this.props.onResize(e);
         }
     };
@@ -71,14 +121,33 @@ export default class VideoFeed extends React.Component {
     render() {
         const videoClasses = {
             mx_VideoFeed: true,
-            mx_VideoFeed_local: this.props.type === VideoFeedType.Local,
-            mx_VideoFeed_remote: this.props.type === VideoFeedType.Remote,
+            mx_VideoFeed_local: this.props.feed.isLocal(),
+            mx_VideoFeed_remote: !this.props.feed.isLocal(),
+            mx_VideoFeed_voice: this.state.videoMuted,
+            mx_VideoFeed_video: !this.state.videoMuted,
             mx_VideoFeed_mirror: (
-                this.props.type === VideoFeedType.Local &&
+                this.props.feed.isLocal() &&
                 SettingsStore.getValue('VideoView.flipVideoHorizontally')
             ),
         };
 
-        return 
    
             
    
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ed49fb6b44..6f2a4e8aee 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1458,7 +1458,6 @@
     "Encrypting your message...": "Encrypting your message...",
     "Your message was sent": "Your message was sent",
     "Failed to send": "Failed to send",
-    "Please select the destination room for this message": "Please select the destination room for this message",
     "Scroll to most recent messages": "Scroll to most recent messages",
     "Close preview": "Close preview",
     "and %(count)s others...|other": "and %(count)s others...",
diff --git a/src/stores/RoomViewStore.tsx b/src/stores/RoomViewStore.tsx
index fe2e0a66b2..37162c8ae7 100644
--- a/src/stores/RoomViewStore.tsx
+++ b/src/stores/RoomViewStore.tsx
@@ -53,8 +53,6 @@ const INITIAL_STATE = {
     // Any error that has occurred during loading
     roomLoadError: null,
 
-    forwardingEvent: null,
-
     quotingEvent: null,
 
     replyingToEvent: null,
@@ -149,11 +147,6 @@ class RoomViewStore extends Store {
             case 'on_logged_out':
                 this.reset();
                 break;
-            case 'forward_event':
-                this.setState({
-                    forwardingEvent: payload.event,
-                });
-                break;
             case 'reply_to_event':
                 // If currently viewed room does not match the room in which we wish to reply then change rooms
                 // this can happen when performing a search across all rooms
@@ -186,7 +179,6 @@ class RoomViewStore extends Store {
                 roomAlias: payload.room_alias,
                 initialEventId: payload.event_id,
                 isInitialEventHighlighted: payload.highlighted,
-                forwardingEvent: null,
                 roomLoading: false,
                 roomLoadError: null,
                 // should peek by default
@@ -206,14 +198,6 @@ class RoomViewStore extends Store {
                 newState.replyingToEvent = payload.replyingToEvent;
             }
 
-            if (this.state.forwardingEvent) {
-                dis.dispatch({
-                    action: 'send_event',
-                    room_id: newState.roomId,
-                    event: this.state.forwardingEvent,
-                });
-            }
-
             this.setState(newState);
 
             if (payload.auto_join) {
@@ -419,11 +403,6 @@ class RoomViewStore extends Store {
         return this.state.joinError;
     }
 
-    // The mxEvent if one is about to be forwarded
-    public getForwardingEvent() {
-        return this.state.forwardingEvent;
-    }
-
     // The mxEvent if one is currently being replied to/quoted
     public getQuotingEvent() {
         return this.state.replyingToEvent;

From 44b143c8c3063be7ca2bf24e6cfdb81be9351c75 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 8 May 2021 21:17:05 -0400
Subject: [PATCH 0083/1270] Match requested avatar size to displayed size

Reduces the blurriness of avatars in the EventTilePreview.

Signed-off-by: Robin Townsend 
---
 src/components/views/elements/EventTilePreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index b15fbbed2b..95f9a97058 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -61,7 +61,7 @@ interface IState {
     message: string;
 }
 
-const AVATAR_SIZE = 32;
+const AVATAR_SIZE = 30;
 
 @replaceableComponent("views.elements.EventTilePreview")
 export default class EventTilePreview extends React.Component {

From e46bc931781095447a1929938a5cb5bdbdb7de4d Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 8 May 2021 21:22:31 -0400
Subject: [PATCH 0084/1270] Fall back to MXID when no display name is present

MemberAvatar requires a display name, or else it refuses to render.

Signed-off-by: Robin Townsend 
---
 src/components/views/elements/EventTilePreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index 95f9a97058..6d2ea687de 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -101,7 +101,7 @@ export default class EventTilePreview extends React.Component {
 
         // Fake it more
         event.sender = {
-            name: this.props.displayName,
+            name: this.props.displayName || this.props.userId,
             userId: this.props.userId,
             getAvatarUrl: (..._) => {
                 return Avatar.avatarUrlForUser(

From 219c983d191d9172e3c68aa11b1765f91ac5c6cd Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sun, 9 May 2021 10:58:44 -0400
Subject: [PATCH 0085/1270] Use import instead of sdk.getComponent

Signed-off-by: Robin Townsend 
---
 src/components/views/context_menus/MessageContextMenu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index e069bba975..fc2c366b07 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -31,6 +31,7 @@ import { isContentActionable } from '../../../utils/EventUtils';
 import {MenuItem} from "../../structures/ContextMenu";
 import {EventType} from "matrix-js-sdk/src/@types/event";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import ForwardDialog from "../dialogs/ForwardDialog";
 
 export function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -154,7 +155,6 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onForwardClick = () => {
-        const ForwardDialog = sdk.getComponent("dialogs.ForwardDialog");
         Modal.createTrackedDialog('Forward Message', '', ForwardDialog, {
             cli: MatrixClientPeg.get(),
             event: this.props.mxEvent,

From c96888c9cba48dfb1d318b2cfb89cd699c6a8529 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 10 May 2021 00:38:01 -0400
Subject: [PATCH 0086/1270] Make ForwardDialog more readable

Signed-off-by: Robin Townsend 
---
 .../views/dialogs/ForwardDialog.tsx           | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index ce38a783b3..b1f558dfef 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -39,6 +39,7 @@ const AVATAR_SIZE = 30;
 
 interface IProps extends IDialogProps {
     cli: MatrixClient;
+    // The event to forward
     event: MatrixEvent;
 }
 
@@ -116,7 +117,7 @@ const ForwardDialog: React.FC = ({ cli, event, onFinished }) => {
     });
     mockEvent.sender = {
         name: profileInfo.displayname || userId,
-        userId: userId,
+        userId,
         getAvatarUrl: (..._) => {
             return avatarUrlForUser(
                 { avatarUrl: profileInfo.avatar_url },
@@ -179,28 +180,28 @@ const ForwardDialog: React.FC = ({ cli, event, onFinished }) => {
                 { rooms.length > 0 ? (
                     
    
                         
    { _t("Rooms") }
    
-                        { rooms.map(room => {
-                            return 
+                             cli.sendEvent(room.roomId, event.getType(), event.getContent())}
-                            />;
-                        }) }
+                            />,
+                        ) }
                     
    
                 ) : undefined }
 
                 { dms.length > 0 ? (
                     
    
                         
    { _t("Direct Messages") }
    
-                        { dms.map(room => {
-                            return 
+                             cli.sendEvent(room.roomId, event.getType(), event.getContent())}
-                            />;
-                        }) }
+                            />,
+                        ) }
                     
    
-                ) : null }
+                ) : undefined }
 
                 { rooms.length + dms.length < 1 ? 
                     { _t("No results") }

From 100efb1a90c92ac6a8771787cd2564f218507550 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 10 May 2021 00:40:54 -0400
Subject: [PATCH 0087/1270] Fix ForwardDialog crashing when rendering reply

Signed-off-by: Robin Townsend 
---
 src/components/views/context_menus/MessageContextMenu.js | 1 +
 src/components/views/dialogs/ForwardDialog.tsx           | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index fc2c366b07..002542bf88 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -158,6 +158,7 @@ export default class MessageContextMenu extends React.Component {
         Modal.createTrackedDialog('Forward Message', '', ForwardDialog, {
             cli: MatrixClientPeg.get(),
             event: this.props.mxEvent,
+            permalinkCreator: this.props.permalinkCreator,
         }, 'mx_Dialog_forwardmessage');
         this.closeMenu();
     };
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index b1f558dfef..5cb5d68745 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -33,6 +33,7 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import AccessibleButton from "../elements/AccessibleButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import DMRoomMap from "../../../utils/DMRoomMap";
+import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 
 const AVATAR_SIZE = 30;
@@ -41,6 +42,9 @@ interface IProps extends IDialogProps {
     cli: MatrixClient;
     // The event to forward
     event: MatrixEvent;
+    // We need a permalink creator for the source room to pass through to EventTile
+    // in case the event is a reply (even though the user can't get at the link)
+    permalinkCreator: RoomPermalinkCreator;
 }
 
 interface IEntryProps {
@@ -97,7 +101,7 @@ const Entry: React.FC = ({ room, send }) => {
     
    ;
 };
 
-const ForwardDialog: React.FC = ({ cli, event, onFinished }) => {
+const ForwardDialog: React.FC = ({ cli, event, permalinkCreator, onFinished }) => {
     const userId = cli.getUserId();
     const [profileInfo, setProfileInfo] = useState({});
     useEffect(() => {
@@ -113,7 +117,7 @@ const ForwardDialog: React.FC = ({ cli, event, onFinished }) => {
             age: 97,
         },
         event_id: "$9999999999999999999999999999999999999999999",
-        room_id: "!999999999999999999:example.org",
+        room_id: event.getRoomId(),
     });
     mockEvent.sender = {
         name: profileInfo.displayname || userId,
@@ -165,6 +169,7 @@ const ForwardDialog: React.FC = ({ cli, event, onFinished }) => {
                 mxEvent={mockEvent}
                 layout={previewLayout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                permalinkCreator={permalinkCreator}
             />
         
    
         
    

From eb07f1fb86de32944b8a0375beec89abdeef63d0 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 10 May 2021 00:54:00 -0400
Subject: [PATCH 0088/1270] Test that ForwardDialog can render replies

Previously ForwardDialog was not giving its EventTile message preview
the information it needed to render a ReplyThread. This was a bit tricky
to fix since we were pulling a fake event out of thin air, so this
ensures it doesn't regress.

Signed-off-by: Robin Townsend 
---
 .../views/dialogs/ForwardDialog-test.js       | 64 ++++++++++++++-----
 test/test-utils.js                            |  1 +
 2 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/test/components/views/dialogs/ForwardDialog-test.js b/test/components/views/dialogs/ForwardDialog-test.js
index cabcbb0325..af325ab8f0 100644
--- a/test/components/views/dialogs/ForwardDialog-test.js
+++ b/test/components/views/dialogs/ForwardDialog-test.js
@@ -24,44 +24,51 @@ import {act} from "react-dom/test-utils";
 import * as TestUtils from "../../../test-utils";
 import {MatrixClientPeg} from "../../../../src/MatrixClientPeg";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
+import {RoomPermalinkCreator} from "../../../../src/utils/permalinks/Permalinks";
 import ForwardDialog from "../../../../src/components/views/dialogs/ForwardDialog";
 
 configure({ adapter: new Adapter() });
 
 describe("ForwardDialog", () => {
-    let client;
-    let wrapper;
-
-    const message = TestUtils.mkMessage({
-        room: "!111111111111111111:example.org",
+    const sourceRoom = "!111111111111111111:example.org";
+    const defaultMessage = TestUtils.mkMessage({
+        room: sourceRoom,
         user: "@alice:example.org",
         msg: "Hello world!",
         event: true,
     });
+    const defaultRooms = ["a", "A", "b"].map(name => TestUtils.mkStubRoom(name, name));
 
-    beforeEach(async () => {
-        TestUtils.stubClient();
-        DMRoomMap.makeShared();
-        client = MatrixClientPeg.get();
-        client.getVisibleRooms = jest.fn().mockReturnValue(
-            ["a", "A", "b"].map(name => TestUtils.mkStubRoom(name, name)),
-        );
-        client.getUserId = jest.fn().mockReturnValue("@bob:example.org");
+    const mountForwardDialog = async (message = defaultMessage, rooms = defaultRooms) => {
+        const client = MatrixClientPeg.get();
+        client.getVisibleRooms = jest.fn().mockReturnValue(rooms);
 
+        let wrapper;
         await act(async () => {
             wrapper = mount(
                 ,
             );
             // Wait one tick for our profile data to load so the state update happens within act
             await new Promise(resolve => setImmediate(resolve));
         });
+
+        return wrapper;
+    };
+
+    beforeEach(() => {
+        TestUtils.stubClient();
+        DMRoomMap.makeShared();
+        MatrixClientPeg.get().getUserId = jest.fn().mockReturnValue("@bob:example.org");
     });
 
-    it("shows a preview with us as the sender", () => {
+    it("shows a preview with us as the sender", async () => {
+        const wrapper = await mountForwardDialog();
+
         const previewBody = wrapper.find(".mx_EventTile_body");
         expect(previewBody.text()).toBe("Hello world!");
 
@@ -70,7 +77,9 @@ describe("ForwardDialog", () => {
         expect(previewAvatar.prop("title")).toBe("@bob:example.org");
     });
 
-    it("filters the rooms", () => {
+    it("filters the rooms", async () => {
+        const wrapper = await mountForwardDialog();
+
         const roomsBefore = wrapper.find(".mx_ForwardList_entry");
         expect(roomsBefore).toHaveLength(3);
 
@@ -83,10 +92,12 @@ describe("ForwardDialog", () => {
     });
 
     it("tracks message sending progress across multiple rooms", async () => {
+        const wrapper = await mountForwardDialog();
+
         // Make sendEvent require manual resolution so we can see the sending state
         let finishSend;
         let cancelSend;
-        client.sendEvent = jest.fn(() => new Promise((resolve, reject) => {
+        MatrixClientPeg.get().sendEvent = jest.fn(() => new Promise((resolve, reject) => {
             finishSend = resolve;
             cancelSend = reject;
         }));
@@ -121,4 +132,25 @@ describe("ForwardDialog", () => {
         });
         expect(secondRoom.find(".mx_AccessibleButton").text()).toBe("Sent");
     });
+
+    it("can render replies", async () => {
+        const replyMessage = TestUtils.mkEvent({
+            type: "m.room.message",
+            room: "!111111111111111111:example.org",
+            user: "@alice:example.org",
+            content: {
+                msgtype: "m.text",
+                body: "> <@bob:example.org> Hi Alice!\n\nHi Bob!",
+                "m.relates_to": {
+                    "m.in_reply_to": {
+                        event_id: "$2222222222222222222222222222222222222222222",
+                    },
+                },
+            },
+            event: true,
+        });
+
+        const wrapper = await mountForwardDialog(replyMessage);
+        expect(wrapper.find("ReplyThread")).toBeTruthy();
+    });
 });
diff --git a/test/test-utils.js b/test/test-utils.js
index 985e9f804b..8c9c62844a 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -236,6 +236,7 @@ export function mkStubRoom(roomId = null, name) {
         getPendingEvents: () => [],
         getLiveTimeline: () => stubTimeline,
         getUnfilteredTimelineSet: () => null,
+        findEventById: () => null,
         getAccountData: () => null,
         hasMembershipState: () => null,
         getVersion: () => '1',

From 35cf0e1c7efbd4f627e8fcc00cd8f8b96daf1b8e Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 10 May 2021 01:02:12 -0400
Subject: [PATCH 0089/1270] Find components by name rather than class in
 ForwardDialog test

It makes things shorter and more readable!

Signed-off-by: Robin Townsend 
---
 .../views/dialogs/ForwardDialog-test.js       | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/test/components/views/dialogs/ForwardDialog-test.js b/test/components/views/dialogs/ForwardDialog-test.js
index af325ab8f0..f181157d09 100644
--- a/test/components/views/dialogs/ForwardDialog-test.js
+++ b/test/components/views/dialogs/ForwardDialog-test.js
@@ -80,15 +80,13 @@ describe("ForwardDialog", () => {
     it("filters the rooms", async () => {
         const wrapper = await mountForwardDialog();
 
-        const roomsBefore = wrapper.find(".mx_ForwardList_entry");
-        expect(roomsBefore).toHaveLength(3);
+        expect(wrapper.find("Entry")).toHaveLength(3);
 
-        const searchInput = wrapper.find(".mx_SearchBox input");
+        const searchInput = wrapper.find("SearchBox input");
         searchInput.instance().value = "a";
         searchInput.simulate("change");
 
-        const roomsAfter = wrapper.find(".mx_ForwardList_entry");
-        expect(roomsAfter).toHaveLength(2);
+        expect(wrapper.find("Entry")).toHaveLength(2);
     });
 
     it("tracks message sending progress across multiple rooms", async () => {
@@ -102,35 +100,31 @@ describe("ForwardDialog", () => {
             cancelSend = reject;
         }));
 
-        const firstRoom = wrapper.find(".mx_ForwardList_entry").first();
-        expect(firstRoom.find(".mx_AccessibleButton").text()).toBe("Send");
+        const firstButton = wrapper.find("Entry AccessibleButton").first();
+        expect(firstButton.text()).toBe("Send");
 
-        act(() => {
-            firstRoom.find(".mx_AccessibleButton").simulate("click");
-        });
-        expect(firstRoom.find(".mx_AccessibleButton").text()).toBe("Sending…");
+        act(() => { firstButton.simulate("click"); });
+        expect(firstButton.text()).toBe("Sending…");
 
         await act(async () => {
             cancelSend();
             // Wait one tick for the button to realize the send failed
             await new Promise(resolve => setImmediate(resolve));
         });
-        expect(firstRoom.find(".mx_AccessibleButton").text()).toBe("Failed to send");
+        expect(firstButton.text()).toBe("Failed to send");
 
-        const secondRoom = wrapper.find(".mx_ForwardList_entry").at(1);
-        expect(secondRoom.find(".mx_AccessibleButton").text()).toBe("Send");
+        const secondButton = wrapper.find("Entry AccessibleButton").at(1);
+        expect(secondButton.text()).toBe("Send");
 
-        act(() => {
-            secondRoom.find(".mx_AccessibleButton").simulate("click");
-        });
-        expect(secondRoom.find(".mx_AccessibleButton").text()).toBe("Sending…");
+        act(() => { secondButton.simulate("click"); });
+        expect(secondButton.text()).toBe("Sending…");
 
         await act(async () => {
             finishSend();
             // Wait one tick for the button to realize the send succeeded
             await new Promise(resolve => setImmediate(resolve));
         });
-        expect(secondRoom.find(".mx_AccessibleButton").text()).toBe("Sent");
+        expect(secondButton.text()).toBe("Sent");
     });
 
     it("can render replies", async () => {

From 09ba74a8514fd907e758f1af24c795fa78ce8643 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 10 May 2021 01:04:25 -0400
Subject: [PATCH 0090/1270] Disable forward buttons for rooms without send
 permissions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…and add a tooltip to explain why they can't accept forwarded messages.
It was chosen to disable the buttons rather than hide the entries from
the list, since hiding them without explanation could cause confusion.

Signed-off-by: Robin Townsend 
---
 .../views/dialogs/ForwardDialog.tsx           | 76 ++++++++++++-------
 1 file changed, 47 insertions(+), 29 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 5cb5d68745..fd10a88d93 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -31,6 +31,7 @@ import EventTile from "../rooms/EventTile";
 import SearchBox from "../../structures/SearchBox";
 import RoomAvatar from "../avatars/RoomAvatar";
 import AccessibleButton from "../elements/AccessibleButton";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
@@ -63,41 +64,58 @@ enum SendState {
 const Entry: React.FC = ({ room, send }) => {
     const [sendState, setSendState] = useState(SendState.CanSend);
 
-    let label;
-    let className;
-    if (sendState === SendState.CanSend) {
-        label = _t("Send");
-        className = "mx_ForwardList_canSend";
-    } else if (sendState === SendState.Sending) {
-        label = _t("Sending…");
-        className = "mx_ForwardList_sending";
-    } else if (sendState === SendState.Sent) {
-        label = _t("Sent");
-        className = "mx_ForwardList_sent";
+    let button;
+    if (room.maySendMessage()) {
+        let label;
+        let className;
+        if (sendState === SendState.CanSend) {
+            label = _t("Send");
+            className = "mx_ForwardList_canSend";
+        } else if (sendState === SendState.Sending) {
+            label = _t("Sending…");
+            className = "mx_ForwardList_sending";
+        } else if (sendState === SendState.Sent) {
+            label = _t("Sent");
+            className = "mx_ForwardList_sent";
+        } else {
+            label = _t("Failed to send");
+            className = "mx_ForwardList_sendFailed";
+        }
+
+        button =
+             {
+                    setSendState(SendState.Sending);
+                    try {
+                        await send();
+                        setSendState(SendState.Sent);
+                    } catch (e) {
+                        setSendState(SendState.Failed);
+                    }
+                }}
+                disabled={sendState !== SendState.CanSend}
+            >
+                { label }
+            ;
     } else {
-        label = _t("Failed to send");
-        className = "mx_ForwardList_sendFailed";
+        button =
+             {}}
+                disabled={true}
+                title={_t("You do not have permission to post to this room")}
+            >
+                { _t("Send") }
+            ;
     }
 
     return 
    
         
         { room.name }
-         {
-                setSendState(SendState.Sending);
-                try {
-                    await send();
-                    setSendState(SendState.Sent);
-                } catch (e) {
-                    setSendState(SendState.Failed);
-                }
-            }}
-            disabled={sendState !== SendState.CanSend}
-        >
-            { label }
-        
+        { button }
     
    ;
 };
 

From eb779cd3d8db279e9cf91134b1aa5bbf4326662c Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 10 May 2021 01:07:42 -0400
Subject: [PATCH 0091/1270] Test that forward buttons are disabled for rooms
 without permission

Signed-off-by: Robin Townsend 
---
 test/components/views/dialogs/ForwardDialog-test.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/test/components/views/dialogs/ForwardDialog-test.js b/test/components/views/dialogs/ForwardDialog-test.js
index f181157d09..706d47acdc 100644
--- a/test/components/views/dialogs/ForwardDialog-test.js
+++ b/test/components/views/dialogs/ForwardDialog-test.js
@@ -147,4 +147,17 @@ describe("ForwardDialog", () => {
         const wrapper = await mountForwardDialog(replyMessage);
         expect(wrapper.find("ReplyThread")).toBeTruthy();
     });
+
+    it("disables buttons for rooms without send permissions", async () => {
+        const readOnlyRoom = TestUtils.mkStubRoom("a", "a");
+        readOnlyRoom.maySendMessage = jest.fn().mockReturnValue(false);
+        const rooms = [readOnlyRoom, TestUtils.mkStubRoom("b", "b")];
+
+        const wrapper = await mountForwardDialog(undefined, rooms);
+
+        const firstButton = wrapper.find("Entry AccessibleButton").first();
+        expect(firstButton.prop("disabled")).toBe(true);
+        const secondButton = wrapper.find("Entry AccessibleButton").last();
+        expect(secondButton.prop("disabled")).toBe(false);
+    });
 });

From 5c10e1e5744e7c8b753304e4994c172f4ba493c3 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 10 May 2021 01:16:37 -0400
Subject: [PATCH 0092/1270] Fix lints

Signed-off-by: Robin Townsend 
---
 test/components/views/dialogs/ForwardDialog-test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/components/views/dialogs/ForwardDialog-test.js b/test/components/views/dialogs/ForwardDialog-test.js
index 706d47acdc..2f062a84cc 100644
--- a/test/components/views/dialogs/ForwardDialog-test.js
+++ b/test/components/views/dialogs/ForwardDialog-test.js
@@ -133,8 +133,8 @@ describe("ForwardDialog", () => {
             room: "!111111111111111111:example.org",
             user: "@alice:example.org",
             content: {
-                msgtype: "m.text",
-                body: "> <@bob:example.org> Hi Alice!\n\nHi Bob!",
+                "msgtype": "m.text",
+                "body": "> <@bob:example.org> Hi Alice!\n\nHi Bob!",
                 "m.relates_to": {
                     "m.in_reply_to": {
                         event_id: "$2222222222222222222222222222222222222222222",

From bfba2b0b6f09b7d470a6274d07053d0d854f7cd0 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 10 May 2021 11:16:51 -0400
Subject: [PATCH 0093/1270] Push ForwardDialog scrollbar into the gutter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…to give more space between it and the buttons.

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index a3aa08d04f..a447b93cae 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -48,6 +48,8 @@ limitations under the License.
 
         .mx_ForwardList_content {
             flex-grow: 1;
+            // Push the scrollbar into the gutter
+            margin-right: -6px;
         }
 
         .mx_ForwardList_noResults {
@@ -56,6 +58,8 @@ limitations under the License.
         }
 
         .mx_ForwardList_section {
+            margin-right: 6px;
+
             &:not(:first-child) {
                 margin-top: 24px;
             }

From 503301aa89e3a8378d9e48c95b37ec19ab4d5e89 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 10 May 2021 13:00:06 -0400
Subject: [PATCH 0094/1270] Make rooms in ForwardDialog clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…so that you can jump to a room easily once you've forwarded a message
there.

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss     | 29 ++++++----
 .../views/dialogs/ForwardDialog.tsx           | 53 ++++++++++++-------
 .../views/dialogs/ForwardDialog-test.js       | 10 ++--
 3 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index a447b93cae..30a4cfcacf 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -74,23 +74,30 @@ limitations under the License.
 
             .mx_ForwardList_entry {
                 display: flex;
+                justify-content: space-between;
                 margin-top: 12px;
 
-                .mx_BaseAvatar {
+                .mx_ForwardList_roomButton {
+                    display: flex;
                     margin-right: 12px;
-                }
-
-                .mx_ForwardList_entry_name {
-                    font-size: $font-15px;
-                    line-height: 30px;
                     flex-grow: 1;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    margin-right: 12px;
+                    min-width: 0;
+
+                    .mx_BaseAvatar {
+                        margin-right: 12px;
+                    }
+
+                    .mx_ForwardList_entry_name {
+                        font-size: $font-15px;
+                        line-height: 30px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        margin-right: 12px;
+                    }
                 }
 
-                .mx_AccessibleButton {
+                .mx_ForwardList_sendButton {
                     &.mx_ForwardList_sending, &.mx_ForwardList_sent {
                         &::before {
                             content: '';
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index fd10a88d93..ed6973cd4a 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -21,6 +21,7 @@ import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClient} from "matrix-js-sdk/src/client";
 
 import {_t} from "../../../languageHandler";
+import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
 import {UIFeature} from "../../../settings/UIFeature";
 import {Layout} from "../../../settings/Layout";
@@ -50,8 +51,9 @@ interface IProps extends IDialogProps {
 
 interface IEntryProps {
     room: Room;
-    // Callback to forward the message to this room
-    send(): Promise;
+    event: MatrixEvent;
+    cli: MatrixClient;
+    onFinished(success: boolean): void;
 }
 
 enum SendState {
@@ -61,9 +63,26 @@ enum SendState {
     Failed,
 }
 
-const Entry: React.FC = ({ room, send }) => {
+const Entry: React.FC = ({ room, event, cli, onFinished }) => {
     const [sendState, setSendState] = useState(SendState.CanSend);
 
+    const jumpToRoom = () => {
+        dis.dispatch({
+            action: "view_room",
+            room_id: room.roomId,
+        });
+        onFinished(true);
+    };
+    const send = async () => {
+        setSendState(SendState.Sending);
+        try {
+            await cli.sendEvent(room.roomId, event.getType(), event.getContent());
+            setSendState(SendState.Sent);
+        } catch (e) {
+            setSendState(SendState.Failed);
+        }
+    };
+
     let button;
     if (room.maySendMessage()) {
         let label;
@@ -85,16 +104,8 @@ const Entry: React.FC = ({ room, send }) => {
         button =
              {
-                    setSendState(SendState.Sending);
-                    try {
-                        await send();
-                        setSendState(SendState.Sent);
-                    } catch (e) {
-                        setSendState(SendState.Failed);
-                    }
-                }}
+                className={`mx_ForwardList_sendButton ${className}`}
+                onClick={send}
                 disabled={sendState !== SendState.CanSend}
             >
                 { label }
@@ -103,7 +114,7 @@ const Entry: React.FC = ({ room, send }) => {
         button =
              {}}
                 disabled={true}
                 title={_t("You do not have permission to post to this room")}
@@ -113,8 +124,10 @@ const Entry: React.FC = ({ room, send }) => {
     }
 
     return 
    
-        
-        { room.name }
+        
+            
+            { room.name }
+        
         { button }
     
    ;
 };
@@ -207,7 +220,9 @@ const ForwardDialog: React.FC = ({ cli, event, permalinkCreator, onFinis
                              cli.sendEvent(room.roomId, event.getType(), event.getContent())}
+                                event={event}
+                                cli={cli}
+                                onFinished={onFinished}
                             />,
                         ) }
                     
    
@@ -220,7 +235,9 @@ const ForwardDialog: React.FC = ({ cli, event, permalinkCreator, onFinis
                              cli.sendEvent(room.roomId, event.getType(), event.getContent())}
+                                event={event}
+                                cli={cli}
+                                onFinished={onFinished}
                             />,
                         ) }
                     
    
diff --git a/test/components/views/dialogs/ForwardDialog-test.js b/test/components/views/dialogs/ForwardDialog-test.js
index 2f062a84cc..331ee9d131 100644
--- a/test/components/views/dialogs/ForwardDialog-test.js
+++ b/test/components/views/dialogs/ForwardDialog-test.js
@@ -100,7 +100,7 @@ describe("ForwardDialog", () => {
             cancelSend = reject;
         }));
 
-        const firstButton = wrapper.find("Entry AccessibleButton").first();
+        const firstButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").first();
         expect(firstButton.text()).toBe("Send");
 
         act(() => { firstButton.simulate("click"); });
@@ -113,8 +113,8 @@ describe("ForwardDialog", () => {
         });
         expect(firstButton.text()).toBe("Failed to send");
 
-        const secondButton = wrapper.find("Entry AccessibleButton").at(1);
-        expect(secondButton.text()).toBe("Send");
+        const secondButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").at(1);
+        expect(secondButton.render().text()).toBe("Send");
 
         act(() => { secondButton.simulate("click"); });
         expect(secondButton.text()).toBe("Sending…");
@@ -155,9 +155,9 @@ describe("ForwardDialog", () => {
 
         const wrapper = await mountForwardDialog(undefined, rooms);
 
-        const firstButton = wrapper.find("Entry AccessibleButton").first();
+        const firstButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").first();
         expect(firstButton.prop("disabled")).toBe(true);
-        const secondButton = wrapper.find("Entry AccessibleButton").last();
+        const secondButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").last();
         expect(secondButton.prop("disabled")).toBe(false);
     });
 });

From 7efbd2d930cc93dffdabe10f84bc320f58cf23c5 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 10 May 2021 13:57:47 -0400
Subject: [PATCH 0095/1270] Hide unencrypted badge from ForwardDialog preview

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 30a4cfcacf..9bd0bd2879 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -35,6 +35,12 @@ limitations under the License.
         .mx_EventTile_msgOption {
             display: none;
         }
+
+        // When forwarding messages from encrypted rooms, EventTile will complain
+        // that our preview is unencrypted, which doesn't actually matter
+        .mx_EventTile_e2eIcon_unencrypted {
+            display: none;
+        }
     }
 
     .mx_ForwardList {

From 14f94c388306c64d6ee47aed6e5f2b7ee482720d Mon Sep 17 00:00:00 2001
From: Jaiwanth 
Date: Tue, 11 May 2021 10:41:31 +0530
Subject: [PATCH 0096/1270] Remove excessive null check

Co-authored-by: Travis Ralston 
---
 src/stores/SpaceStore.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index d307c56889..d906157435 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -120,7 +120,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
      * should not be done when the space switch is done implicitly due to another event like switching room.
      */
     public async setActiveSpace(space: Room | null, contextSwitch = true) {
-        if (space && !space?.isSpaceRoom()) return;
+        if (!space?.isSpaceRoom()) return;
         if (space === this.activeSpace) {
             const notificationState = this.getNotificationState(space ? space.roomId : HOME_SPACE);
             if (notificationState.count) {

From 07a952a1bbca35fcd57e130d45ddc5e45d13fde6 Mon Sep 17 00:00:00 2001
From: Jaiwanth 
Date: Tue, 11 May 2021 11:01:28 +0530
Subject: [PATCH 0097/1270] Update src/stores/SpaceStore.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Šimon Brandner 
---
 src/stores/SpaceStore.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index d906157435..2f52061783 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -120,7 +120,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
      * should not be done when the space switch is done implicitly due to another event like switching room.
      */
     public async setActiveSpace(space: Room | null, contextSwitch = true) {
-        if (!space?.isSpaceRoom()) return;
+        if (space && !space.isSpaceRoom()) return;
         if (space === this.activeSpace) {
             const notificationState = this.getNotificationState(space ? space.roomId : HOME_SPACE);
             if (notificationState.count) {

From 3e8863fc9af0d5932c3393d0156ab6063baee524 Mon Sep 17 00:00:00 2001
From: Jaiwanth 
Date: Tue, 11 May 2021 13:00:42 +0530
Subject: [PATCH 0098/1270] Adjust behaviour for the home space

---
 src/stores/SpaceStore.tsx                            |  5 ++++-
 .../notifications/SummarizedNotificationState.ts     | 12 +++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index edc6bbef77..b1993d9625 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -118,7 +118,10 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
     public async setActiveSpace(space: Room | null, contextSwitch = true) {
         if (space && !space.isSpaceRoom()) return;
         if (space === this.activeSpace) {
-            const notificationState = this.getNotificationState(space ? space.roomId : HOME_SPACE);
+            const notificationState = space
+                ? this.getNotificationState(space.roomId)
+                : RoomNotificationStateStore.instance.globalState;
+
             if (notificationState.count) {
                 const roomId = notificationState.getRoomWithMaxNotifications();
                 defaultDispatcher.dispatch({
diff --git a/src/stores/notifications/SummarizedNotificationState.ts b/src/stores/notifications/SummarizedNotificationState.ts
index 372da74f36..4a3473792a 100644
--- a/src/stores/notifications/SummarizedNotificationState.ts
+++ b/src/stores/notifications/SummarizedNotificationState.ts
@@ -16,6 +16,8 @@ limitations under the License.
 
 import { NotificationColor } from "./NotificationColor";
 import { NotificationState } from "./NotificationState";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomNotificationState } from "./RoomNotificationState";
 
 /**
  * Summarizes a number of states into a unique snapshot. To populate, call
@@ -25,11 +27,13 @@ import { NotificationState } from "./NotificationState";
  */
 export class SummarizedNotificationState extends NotificationState {
     private totalStatesWithUnread = 0;
+    unreadRooms: Room[];
 
     constructor() {
         super();
         this._symbol = null;
         this._count = 0;
+        this.unreadRooms = [];
         this._color = NotificationColor.None;
     }
 
@@ -37,6 +41,11 @@ export class SummarizedNotificationState extends NotificationState {
         return this.totalStatesWithUnread;
     }
 
+    public getRoomWithMaxNotifications() {
+        return this.unreadRooms.reduce((prev, curr) =>
+            (prev._notificationCounts.total > curr._notificationCounts.total ? prev : curr)).roomId;
+    }
+
     /**
      * Append a notification state to this snapshot, taking the loudest NotificationColor
      * of the two. By default this will not adopt the symbol of the other notification
@@ -45,7 +54,7 @@ export class SummarizedNotificationState extends NotificationState {
      * @param includeSymbol If true, the notification state's symbol will be taken if one
      * is present.
      */
-    public add(other: NotificationState, includeSymbol = false) {
+    public add(other: RoomNotificationState, includeSymbol = false) {
         if (other.symbol && includeSymbol) {
             this._symbol = other.symbol;
         }
@@ -56,6 +65,7 @@ export class SummarizedNotificationState extends NotificationState {
             this._color = other.color;
         }
         if (other.hasUnreadCount) {
+            this.unreadRooms.push(other.room);
             this.totalStatesWithUnread++;
         }
     }

From e798b36f1db8ea73c81fcc1626e1af31014c0800 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sun, 16 May 2021 08:39:22 -0400
Subject: [PATCH 0099/1270] Decorate forward dialog room avatars

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss      | 2 +-
 src/components/views/dialogs/ForwardDialog.tsx | 4 ++--
 test/test-utils.js                             | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 9bd0bd2879..2a72ea4ffb 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -89,7 +89,7 @@ limitations under the License.
                     flex-grow: 1;
                     min-width: 0;
 
-                    .mx_BaseAvatar {
+                    .mx_DecoratedRoomAvatar {
                         margin-right: 12px;
                     }
 
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index ed6973cd4a..1ef4841851 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -30,7 +30,7 @@ import BaseDialog from "./BaseDialog";
 import {avatarUrlForUser} from "../../../Avatar";
 import EventTile from "../rooms/EventTile";
 import SearchBox from "../../structures/SearchBox";
-import RoomAvatar from "../avatars/RoomAvatar";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import AccessibleButton from "../elements/AccessibleButton";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
@@ -125,7 +125,7 @@ const Entry: React.FC = ({ room, event, cli, onFinished }) => {
 
     return 
    
         
-            
+            
             { room.name }
         
         { button }
diff --git a/test/test-utils.js b/test/test-utils.js
index 8c9c62844a..a2ccf84728 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -253,6 +253,7 @@ export function mkStubRoom(roomId = null, name) {
         tags: {},
         setBlacklistUnverifiedDevices: jest.fn(),
         on: jest.fn(),
+        off: jest.fn(),
         removeListener: jest.fn(),
         getDMInviter: jest.fn(),
         name,

From 00d093b4ffb83e4d100b706757e0e44a8f1fb376 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 19 May 2021 08:56:14 +0100
Subject: [PATCH 0100/1270] yarn lock

---
 yarn.lock | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 19c0646d32..57b1198019 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2180,6 +2180,11 @@ blueimp-canvas-to-blob@^3.28.0:
   resolved "https://registry.yarnpkg.com/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.28.0.tgz#c8ab4dc6bb08774a7f273798cdf94b0776adf6c8"
   integrity sha512-5q+YHzgGsuHQ01iouGgJaPJXod2AzTxJXmVv90PpGrRxU7G7IqgPqWXz+PBmt3520jKKi6irWbNV87DicEa7wg==
 
+blurhash@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.3.tgz#dc325af7da836d07a0861d830bdd63694382483e"
+  integrity sha512-yUhPJvXexbqbyijCIE/T2NCXcj9iNPhWmOKbPTuR/cm7Q5snXYIfnVnz6m7MWOXxODMz/Cr3UcVkRdHiuDVRDw==
+
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"

From 83224dc7b66b6d3b51d6d58568759611726b0d04 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Wed, 19 May 2021 13:32:27 -0400
Subject: [PATCH 0101/1270] Ensure forward list room decorations are aligned

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 2a72ea4ffb..6fcd7d881a 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -82,6 +82,7 @@ limitations under the License.
                 display: flex;
                 justify-content: space-between;
                 margin-top: 12px;
+                height: 32px;
 
                 .mx_ForwardList_roomButton {
                     display: flex;

From 6cb6c7f3d0c538ac5e0742c806849d33ec685631 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Wed, 19 May 2021 13:33:48 -0400
Subject: [PATCH 0102/1270] Combine forward dialog room and DM lists

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss     |  2 +-
 .../views/dialogs/ForwardDialog.tsx           | 46 ++++---------------
 2 files changed, 9 insertions(+), 39 deletions(-)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 6fcd7d881a..47ab219150 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -63,7 +63,7 @@ limitations under the License.
             margin-top: 24px;
         }
 
-        .mx_ForwardList_section {
+        .mx_ForwardList_results {
             margin-right: 6px;
 
             &:not(:first-child) {
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 1ef4841851..b7a176cfce 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -34,7 +34,6 @@ import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import AccessibleButton from "../elements/AccessibleButton";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import DMRoomMap from "../../../utils/DMRoomMap";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 
@@ -162,26 +161,15 @@ const ForwardDialog: React.FC = ({ cli, event, permalinkCreator, onFinis
         getMxcAvatarUrl: () => profileInfo.avatar_url,
     };
 
-    const visibleRooms = useMemo(() => sortRooms(
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase();
+
+    const rooms = useMemo(() => sortRooms(
         cli.getVisibleRooms().filter(
             room => room.getMyMembership() === "join" &&
                 !(SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()),
         ),
-    ), [cli]);
-
-    const [query, setQuery] = useState("");
-    const lcQuery = query.toLowerCase();
-
-    const [rooms, dms] = visibleRooms.reduce((arr, room) => {
-        if (room.name.toLowerCase().includes(lcQuery)) {
-            if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
-                arr[1].push(room);
-            } else {
-                arr[0].push(room);
-            }
-        }
-        return arr;
-    }, [[], []]);
+    ), [cli]).filter(room => room.name.toLowerCase().includes(lcQuery));
 
     const previewLayout = SettingsStore.getValue("layout");
 
@@ -214,8 +202,7 @@ const ForwardDialog: React.FC = ({ cli, event, permalinkCreator, onFinis
             />
             
                 { rooms.length > 0 ? (
-                    
    
-                        
    { _t("Rooms") }
    
+                    
    
                         { rooms.map(room =>
                              = ({ cli, event, permalinkCreator, onFinis
                             />,
                         ) }
                     
    
-                ) : undefined }
-
-                { dms.length > 0 ? (
-                    
    
-                        
    { _t("Direct Messages") }
    
-                        { dms.map(room =>
-                            ,
-                        ) }
-                    
    
-                ) : undefined }
-
-                { rooms.length + dms.length < 1 ? 
+                ) : 
                     { _t("No results") }
-                 : undefined }
+                 }
             
         
    
     ;

From bf2d26ef21664e427540ff4cb29c89c7f14dcb70 Mon Sep 17 00:00:00 2001
From: Jaiwanth 
Date: Thu, 20 May 2021 10:55:22 +0530
Subject: [PATCH 0103/1270] Modify to navigate only on notification dots click

---
 src/components/views/spaces/SpacePanel.tsx    |  6 +++-
 .../views/spaces/SpaceTreeLevel.tsx           |  6 +++-
 src/stores/SpaceStore.tsx                     | 35 ++++++++++---------
 .../notifications/SpaceNotificationState.ts   |  5 ++-
 .../SummarizedNotificationState.ts            | 12 +++----
 5 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 411b0f9b5e..74fd01954d 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -74,7 +74,11 @@ const SpaceButton: React.FC = ({
     let notifBadge;
     if (notificationState) {
         notifBadge = 
    
-            
+             SpaceStore.instance.setActiveRoomInSpace(space)}
+                forceCount={false}
+                notification={notificationState}
+            />
         
    ;
     }
 
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index e48e1d5dc2..d8569a0387 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -326,7 +326,11 @@ export class SpaceItem extends React.PureComponent {
         let notifBadge;
         if (notificationState) {
             notifBadge = 
    
-                
+                 SpaceStore.instance.setActiveRoomInSpace(space)}
+                    forceCount={false}
+                    notification={notificationState}
+                />
             
    ;
         }
 
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index b1993d9625..e154463408 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -108,6 +108,24 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         return this._suggestedRooms;
     }
 
+    public async setActiveRoomInSpace(space: Room | null) {
+        if (space && !space.isSpaceRoom()) return;
+        if (space !== this.activeSpace) await this.setActiveSpace(space);
+
+        const notificationState = space
+            ? this.getNotificationState(space.roomId)
+            : RoomNotificationStateStore.instance.globalState;
+
+        if (notificationState.count) {
+            const roomId = notificationState.getFirstRoomWithNotifications();
+            defaultDispatcher.dispatch({
+                    action: "view_room",
+                    room_id: roomId,
+                    context_switch: true,
+            });
+        }
+    }
+
     /**
      * Sets the active space, updates room list filters,
      * optionally switches the user's room back to where they were when they last viewed that space.
@@ -116,22 +134,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
      * should not be done when the space switch is done implicitly due to another event like switching room.
      */
     public async setActiveSpace(space: Room | null, contextSwitch = true) {
-        if (space && !space.isSpaceRoom()) return;
-        if (space === this.activeSpace) {
-            const notificationState = space
-                ? this.getNotificationState(space.roomId)
-                : RoomNotificationStateStore.instance.globalState;
-
-            if (notificationState.count) {
-                const roomId = notificationState.getRoomWithMaxNotifications();
-                defaultDispatcher.dispatch({
-                    action: "view_room",
-                    room_id: roomId,
-                    context_switch: true,
-                });
-            }
-            return;
-        }
+        if (space === this.activeSpace || (space && !space.isSpaceRoom())) return;
 
         this._activeSpace = space;
         this.emit(UPDATE_SELECTED_SPACE, this.activeSpace);
diff --git a/src/stores/notifications/SpaceNotificationState.ts b/src/stores/notifications/SpaceNotificationState.ts
index fb04648a2a..cdb9f2d06a 100644
--- a/src/stores/notifications/SpaceNotificationState.ts
+++ b/src/stores/notifications/SpaceNotificationState.ts
@@ -53,9 +53,8 @@ export class SpaceNotificationState extends NotificationState {
         this.calculateTotalState();
     }
 
-    public getRoomWithMaxNotifications() {
-        return this.rooms.reduce((prev, curr) =>
-            (prev._notificationCounts.total > curr._notificationCounts.total ? prev : curr)).roomId;
+    public getFirstRoomWithNotifications() {
+        return this.rooms.find((room) => room._notificationCounts.total > 0).roomId;
     }
 
     public destroy() {
diff --git a/src/stores/notifications/SummarizedNotificationState.ts b/src/stores/notifications/SummarizedNotificationState.ts
index 4a3473792a..ec6db1015d 100644
--- a/src/stores/notifications/SummarizedNotificationState.ts
+++ b/src/stores/notifications/SummarizedNotificationState.ts
@@ -16,7 +16,6 @@ limitations under the License.
 
 import { NotificationColor } from "./NotificationColor";
 import { NotificationState } from "./NotificationState";
-import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomNotificationState } from "./RoomNotificationState";
 
 /**
@@ -27,13 +26,13 @@ import { RoomNotificationState } from "./RoomNotificationState";
  */
 export class SummarizedNotificationState extends NotificationState {
     private totalStatesWithUnread = 0;
-    unreadRooms: Room[];
+    private unreadRoomId: string;
 
     constructor() {
         super();
         this._symbol = null;
         this._count = 0;
-        this.unreadRooms = [];
+        this.unreadRoomId = null;
         this._color = NotificationColor.None;
     }
 
@@ -41,9 +40,8 @@ export class SummarizedNotificationState extends NotificationState {
         return this.totalStatesWithUnread;
     }
 
-    public getRoomWithMaxNotifications() {
-        return this.unreadRooms.reduce((prev, curr) =>
-            (prev._notificationCounts.total > curr._notificationCounts.total ? prev : curr)).roomId;
+    public getFirstRoomWithNotifications() {
+        return this.unreadRoomId;
     }
 
     /**
@@ -65,7 +63,7 @@ export class SummarizedNotificationState extends NotificationState {
             this._color = other.color;
         }
         if (other.hasUnreadCount) {
-            this.unreadRooms.push(other.room);
+            this.unreadRoomId = !this.unreadRoomId ? other.room.roomId : this.unreadRoomId;
             this.totalStatesWithUnread++;
         }
     }

From c21445c406fd077e17fd17661590739069a82995 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 20 May 2021 13:23:17 +0100
Subject: [PATCH 0104/1270] switch from MatrixClientPeg in ContentMessages for
 consistency

---
 src/ContentMessages.tsx                 | 19 +++++++++----------
 src/components/structures/UploadBar.tsx |  5 ++++-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 65b6f1aba4..ba84b30733 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -18,7 +18,6 @@ limitations under the License.
 
 import React from "react";
 import dis from './dispatcher/dispatcher';
-import {MatrixClientPeg} from './MatrixClientPeg';
 import {MatrixClient} from "matrix-js-sdk/src/client";
 import * as sdk from './index';
 import { _t } from './languageHandler';
@@ -344,7 +343,7 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
         });
         (prom as IAbortablePromise).abort = () => {
             canceled = true;
-            if (uploadPromise) MatrixClientPeg.get().cancelUpload(uploadPromise);
+            if (uploadPromise) matrixClient.cancelUpload(uploadPromise);
         };
         return prom;
     } else {
@@ -362,7 +361,7 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
         });
         promise1.abort = () => {
             canceled = true;
-            MatrixClientPeg.get().cancelUpload(basePromise);
+            matrixClient.cancelUpload(basePromise);
         };
         return promise1;
     }
@@ -372,9 +371,9 @@ export default class ContentMessages {
     private inprogress: IUpload[] = [];
     private mediaConfig: IMediaConfig = null;
 
-    sendStickerContentToRoom(url: string, roomId: string, info: string, text: string, matrixClient: MatrixClient) {
+    sendStickerContentToRoom(url: string, roomId: string, info: object, text: string, matrixClient: MatrixClient) {
         const startTime = CountlyAnalytics.getTimestamp();
-        const prom = MatrixClientPeg.get().sendStickerMessage(roomId, url, info, text).catch((e) => {
+        const prom = matrixClient.sendStickerMessage(roomId, url, info, text).catch((e) => {
             console.warn(`Failed to send content with URL ${url} to room ${roomId}`, e);
             throw e;
         });
@@ -416,7 +415,7 @@ export default class ContentMessages {
 
         if (!this.mediaConfig) { // hot-path optimization to not flash a spinner if we don't need to
             const modal = Modal.createDialog(Spinner, null, 'mx_Dialog_spinner');
-            await this.ensureMediaConfigFetched();
+            await this.ensureMediaConfigFetched(matrixClient);
             modal.close();
         }
 
@@ -471,7 +470,7 @@ export default class ContentMessages {
         return this.inprogress.filter(u => !u.canceled);
     }
 
-    cancelUpload(promise: Promise) {
+    cancelUpload(promise: Promise, matrixClient: MatrixClient) {
         let upload: IUpload;
         for (let i = 0; i < this.inprogress.length; ++i) {
             if (this.inprogress[i].promise === promise) {
@@ -481,7 +480,7 @@ export default class ContentMessages {
         }
         if (upload) {
             upload.canceled = true;
-            MatrixClientPeg.get().cancelUpload(upload.promise);
+            matrixClient.cancelUpload(upload.promise);
             dis.dispatch({action: Action.UploadCanceled, upload});
         }
     }
@@ -623,11 +622,11 @@ export default class ContentMessages {
         return true;
     }
 
-    private ensureMediaConfigFetched() {
+    private ensureMediaConfigFetched(matrixClient: MatrixClient) {
         if (this.mediaConfig !== null) return;
 
         console.log("[Media Config] Fetching");
-        return MatrixClientPeg.get().getMediaConfig().then((config) => {
+        return matrixClient.getMediaConfig().then((config) => {
             console.log("[Media Config] Fetched config:", config);
             return config;
         }).catch(() => {
diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx
index e19e312f58..269c615698 100644
--- a/src/components/structures/UploadBar.tsx
+++ b/src/components/structures/UploadBar.tsx
@@ -26,6 +26,7 @@ import ProgressBar from "../views/elements/ProgressBar";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import { IUpload } from "../../models/IUpload";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
 
 interface IProps {
     room: Room;
@@ -38,6 +39,8 @@ interface IState {
 
 @replaceableComponent("structures.UploadBar")
 export default class UploadBar extends React.Component {
+    static contextType = MatrixClientContext;
+
     private dispatcherRef: string;
     private mounted: boolean;
 
@@ -82,7 +85,7 @@ export default class UploadBar extends React.Component {
 
     private onCancelClick = (ev) => {
         ev.preventDefault();
-        ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload.promise);
+        ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload.promise, this.context);
     };
 
     render() {

From ba7604fd44679d020335160ed5f30f20f294184b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 20 May 2021 13:24:19 +0100
Subject: [PATCH 0105/1270] fix types around sending stickers

---
 src/components/structures/RoomView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index c0f3c59457..1595bc6c53 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -1196,7 +1196,7 @@ export default class RoomView extends React.Component {
         });
     };
 
-    private injectSticker(url, info, text) {
+    private injectSticker(url: string, info: object, text: string) {
         if (this.context.isGuest()) {
             dis.dispatch({action: 'require_registration'});
             return;

From 563e6433b9eec30ec404abed1cbfcf2bb2279119 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 20 May 2021 15:47:11 +0100
Subject: [PATCH 0106/1270] Don't store blurhash in state, its immutable and
 pointless

---
 src/components/views/messages/MImageBody.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 14043b95f3..34320f1b31 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -60,7 +60,6 @@ export default class MImageBody extends React.Component {
         this.onClick = this.onClick.bind(this);
         this._isGif = this._isGif.bind(this);
 
-        const imageInfo = this.props.mxEvent.getContent().info;
 
         this.state = {
             decryptedUrl: null,
@@ -72,7 +71,6 @@ export default class MImageBody extends React.Component {
             loadedImageDimensions: null,
             hover: false,
             showImage: SettingsStore.getValue("showImages"),
-            blurhash: imageInfo ? imageInfo['xyz.amorgan.blurhash'] : null, // TODO: Use `blurhash` when MSC2448 lands.
         };
 
         this._image = createRef();
@@ -442,8 +440,9 @@ export default class MImageBody extends React.Component {
 
     // Overidden by MStickerBody
     getPlaceholder(width, height) {
-        if (!this.state.blurhash) return null;
-        return ;
+        const blurhash = this.props.mxEvent.getContent().info['xyz.amorgan.blurhash'];
+        if (!blurhash) return null;
+        return ;
     }
 
     // Overidden by MStickerBody

From 8368b864406453d35c3d47b096a2febd9a83273c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 14:52:27 +0100
Subject: [PATCH 0107/1270] Wire up local blurhash encoding

---
 src/ContentMessages.tsx | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index ba84b30733..9d9709a04d 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -17,6 +17,8 @@ limitations under the License.
 */
 
 import React from "react";
+import { encode } from "blurhash";
+
 import dis from './dispatcher/dispatcher';
 import {MatrixClient} from "matrix-js-sdk/src/client";
 import * as sdk from './index';
@@ -47,6 +49,10 @@ const MAX_HEIGHT = 600;
 //                  5669 px (x-axis)      , 5669 px (y-axis)      , per metre
 const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
+const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC 2448
+const BLURHASH_X_COMPONENTS = 8;
+const BLURHASH_Y_COMPONENTS = 8;
+
 export class UploadCanceledError extends Error {}
 
 type ThumbnailableElement = HTMLImageElement | HTMLVideoElement;
@@ -77,6 +83,7 @@ interface IThumbnail {
         };
         w: number;
         h: number;
+        [BLURHASH_FIELD]: string;
     };
     thumbnail: Blob;
 }
@@ -124,7 +131,16 @@ function createThumbnail(
         const canvas = document.createElement("canvas");
         canvas.width = targetWidth;
         canvas.height = targetHeight;
-        canvas.getContext("2d").drawImage(element, 0, 0, targetWidth, targetHeight);
+        const context = canvas.getContext("2d");
+        context.drawImage(element, 0, 0, targetWidth, targetHeight);
+        const imageData = context.getImageData(0, 0, targetWidth, targetHeight);
+        const blurhash = encode(
+            imageData.data,
+            imageData.width,
+            imageData.height,
+            BLURHASH_X_COMPONENTS,
+            BLURHASH_Y_COMPONENTS,
+        );
         canvas.toBlob(function(thumbnail) {
             resolve({
                 info: {
@@ -136,8 +152,9 @@ function createThumbnail(
                     },
                     w: inputWidth,
                     h: inputHeight,
+                    [BLURHASH_FIELD]: blurhash,
                 },
-                thumbnail: thumbnail,
+                thumbnail,
             });
         }, mimeType);
     });
@@ -338,7 +355,6 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
             if (file.type) {
                 encryptInfo.mimetype = file.type;
             }
-            // TODO: Blurhash for encrypted media?
             return {"file": encryptInfo};
         });
         (prom as IAbortablePromise).abort = () => {
@@ -349,15 +365,11 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
     } else {
         const basePromise = matrixClient.uploadContent(file, {
             progressHandler: progressHandler,
-            onlyContentUri: false,
         });
-        const promise1 = basePromise.then(function(body) {
+        const promise1 = basePromise.then(function(url) {
             if (canceled) throw new UploadCanceledError();
             // If the attachment isn't encrypted then include the URL directly.
-            return {
-                "url": body.content_uri,
-                "blurhash": body["xyz.amorgan.blurhash"], // TODO: Use `body.blurhash` when MSC2448 lands
-            };
+            return { url };
         });
         promise1.abort = () => {
             canceled = true;
@@ -565,7 +577,6 @@ export default class ContentMessages {
             return upload.promise.then(function(result) {
                 content.file = result.file;
                 content.url = result.url;
-                content.info['xyz.amorgan.blurhash'] = result.blurhash; // TODO: Use `blurhash` when MSC2448 lands
             });
         }).then(() => {
             // Await previous message being sent into the room

From 6672cbcf8029f93a3e5b89724ec4346404fb5de0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 15:29:17 +0100
Subject: [PATCH 0108/1270] fix typo

---
 src/ContentMessages.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 9d9709a04d..626e5cbf69 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -49,7 +49,7 @@ const MAX_HEIGHT = 600;
 //                  5669 px (x-axis)      , 5669 px (y-axis)      , per metre
 const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
-const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC 2448
+const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448
 const BLURHASH_X_COMPONENTS = 8;
 const BLURHASH_Y_COMPONENTS = 8;
 

From 7a045021514788f67c52bf6324e9bf16fceb42cc Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Fri, 21 May 2021 12:41:29 -0400
Subject: [PATCH 0109/1270] Iterate on forward dialog design feedback

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss     | 80 ++++++++++------
 .../views/dialogs/ForwardDialog.tsx           | 93 +++++++++++--------
 .../elements/AccessibleTooltipButton.tsx      |  6 +-
 src/i18n/strings/en_EN.json                   |  6 +-
 .../views/dialogs/ForwardDialog-test.js       | 12 +--
 5 files changed, 116 insertions(+), 81 deletions(-)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 47ab219150..1eb37e09da 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -23,7 +23,15 @@ limitations under the License.
     min-height: 0;
     height: 80vh;
 
-    .mx_ForwardDialog_preview {
+    > h3 {
+        margin: 0 0 6px;
+        color: $secondary-fg-color;
+        font-size: $font-12px;
+        font-weight: $font-semi-bold;
+        line-height: $font-15px;
+    }
+
+    > .mx_ForwardDialog_preview {
         max-height: 30%;
         flex-shrink: 0;
         overflow: scroll;
@@ -43,7 +51,14 @@ limitations under the License.
         }
     }
 
-    .mx_ForwardList {
+    > hr {
+        width: 100%;
+        border: none;
+        border-top: 1px solid $input-border-color;
+        margin: 12px 0;
+    }
+
+    > .mx_ForwardList {
         display: contents;
 
         .mx_SearchBox {
@@ -54,8 +69,6 @@ limitations under the License.
 
         .mx_ForwardList_content {
             flex-grow: 1;
-            // Push the scrollbar into the gutter
-            margin-right: -6px;
         }
 
         .mx_ForwardList_noResults {
@@ -64,30 +77,24 @@ limitations under the License.
         }
 
         .mx_ForwardList_results {
-            margin-right: 6px;
-
             &: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_ForwardList_entry {
                 display: flex;
                 justify-content: space-between;
-                margin-top: 12px;
                 height: 32px;
+                padding: 6px;
+                border-radius: 8px;
+
+                &:hover {
+                    background-color: $groupFilterPanel-bg-color;
+                }
 
                 .mx_ForwardList_roomButton {
                     display: flex;
                     margin-right: 12px;
-                    flex-grow: 1;
                     min-width: 0;
 
                     .mx_DecoratedRoomAvatar {
@@ -105,26 +112,39 @@ limitations under the License.
                 }
 
                 .mx_ForwardList_sendButton {
-                    &.mx_ForwardList_sending, &.mx_ForwardList_sent {
-                        &::before {
-                            content: '';
-                            display: inline-block;
-                            background-color: $button-primary-bg-color;
-                            mask-position: center;
-                            mask-repeat: no-repeat;
-                            mask-size: 14px;
-                            width: 14px;
-                            height: 14px;
-                            margin-right: 5px;
-                        }
+                    position: relative;
+
+                    &:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
+                        // Hide the "Send" label while preserving button size
+                        visibility: hidden;
                     }
 
-                    &.mx_ForwardList_sending::before {
+                    .mx_ForwardList_sendIcon, .mx_NotificationBadge {
+                        position: absolute;
+                    }
+
+                    .mx_NotificationBadge {
+                        opacity: 0.4;
+                    }
+
+                    &.mx_ForwardList_sending .mx_ForwardList_sendIcon {
+                        background-color: $button-primary-bg-color;
                         mask-image: url('$(res)/img/element-icons/circle-sending.svg');
+                        mask-position: center;
+                        mask-repeat: no-repeat;
+                        mask-size: 14px;
+                        width: 14px;
+                        height: 14px;
                     }
 
-                    &.mx_ForwardList_sent::before {
+                    &.mx_ForwardList_sent .mx_ForwardList_sendIcon {
+                        background-color: $button-primary-bg-color;
                         mask-image: url('$(res)/img/element-icons/circle-sent.svg');
+                        mask-position: center;
+                        mask-repeat: no-repeat;
+                        mask-size: 14px;
+                        width: 14px;
+                        height: 14px;
                     }
                 }
             }
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index b7a176cfce..3448e636d9 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -31,9 +31,11 @@ import {avatarUrlForUser} from "../../../Avatar";
 import EventTile from "../rooms/EventTile";
 import SearchBox from "../../structures/SearchBox";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import AccessibleButton from "../elements/AccessibleButton";
+import {Alignment} from '../elements/Tooltip';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
+import NotificationBadge from "../rooms/NotificationBadge";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 
@@ -82,52 +84,60 @@ const Entry: React.FC = ({ room, event, cli, onFinished }) => {
         }
     };
 
-    let button;
-    if (room.maySendMessage()) {
-        let label;
-        let className;
-        if (sendState === SendState.CanSend) {
-            label = _t("Send");
-            className = "mx_ForwardList_canSend";
-        } else if (sendState === SendState.Sending) {
-            label = _t("Sending…");
-            className = "mx_ForwardList_sending";
-        } else if (sendState === SendState.Sent) {
-            label = _t("Sent");
-            className = "mx_ForwardList_sent";
+    let className;
+    let disabled = false;
+    let title;
+    let icon;
+    if (sendState === SendState.CanSend) {
+        className = "mx_ForwardList_canSend";
+        if (room.maySendMessage()) {
+            title = _t("Send");
         } else {
-            label = _t("Failed to send");
-            className = "mx_ForwardList_sendFailed";
+            disabled = true;
+            title = _t("You do not have permission to do this");
         }
-
-        button =
-            
-                { label }
-            ;
+    } else if (sendState === SendState.Sending) {
+        className = "mx_ForwardList_sending";
+        disabled = true;
+        title = _t("Sending…");
+        icon = 
    ;
+    } else if (sendState === SendState.Sent) {
+        className = "mx_ForwardList_sent";
+        disabled = true;
+        title = _t("Sent");
+        icon = 
    ;
     } else {
-        button =
-             {}}
-                disabled={true}
-                title={_t("You do not have permission to post to this room")}
-            >
-                { _t("Send") }
-            ;
+        className = "mx_ForwardList_sendFailed";
+        disabled = true;
+        title = _t("Failed to send");
+        icon = ;
     }
 
     return 
    
-        
+        
             
             { room.name }
-        
-        { button }
+        
+        
+            
    { _t("Send") }
    
+            { icon }
+            
     
    ;
 };
 
@@ -180,6 +190,7 @@ const ForwardDialog: React.FC = ({ cli, event, permalinkCreator, onFinis
         onFinished={onFinished}
         fixedWidth={false}
     >
+        
    { _t("Message preview") }
    
         
     = ({ cli, event, permalinkCreator, onFinis
                 permalinkCreator={permalinkCreator}
             />
         
    
+        
    
         
    
-            
    { _t("Forward to") }
    
              {
@@ -28,6 +28,7 @@ interface ITooltipProps extends React.ComponentProps {
     tooltipClassName?: string;
     forceHide?: boolean;
     yOffset?: number;
+    alignment?: Alignment;
 }
 
 interface IState {
@@ -66,13 +67,14 @@ export default class AccessibleTooltipButton extends React.PureComponent : 
    ;
         return (
             debug logs to help us track down the problem.": "PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.",
     "Report a bug": "Report a bug",
     "Please view existing bugs on Github first. No match? Start a new one.": "Please view existing bugs on Github first. No match? Start a new one.",
+    "You do not have permission to do this": "You do not have permission to do this",
     "Sending…": "Sending…",
     "Sent": "Sent",
+    "Open link": "Open link",
     "Forward message": "Forward message",
-    "Forward to": "Forward to",
-    "Filter your rooms and DMs": "Filter your rooms and DMs",
+    "Message preview": "Message preview",
+    "Search for rooms or people": "Search for rooms or people",
     "Confirm abort of host creation": "Confirm abort of host creation",
     "Are you sure you wish to abort creation of the host? The process cannot be continued.": "Are you sure you wish to abort creation of the host? The process cannot be continued.",
     "Abort": "Abort",
diff --git a/test/components/views/dialogs/ForwardDialog-test.js b/test/components/views/dialogs/ForwardDialog-test.js
index 331ee9d131..ce62b4fa7c 100644
--- a/test/components/views/dialogs/ForwardDialog-test.js
+++ b/test/components/views/dialogs/ForwardDialog-test.js
@@ -101,30 +101,30 @@ describe("ForwardDialog", () => {
         }));
 
         const firstButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").first();
-        expect(firstButton.text()).toBe("Send");
+        expect(firstButton.render().is(".mx_ForwardList_canSend")).toBe(true);
 
         act(() => { firstButton.simulate("click"); });
-        expect(firstButton.text()).toBe("Sending…");
+        expect(firstButton.render().is(".mx_ForwardList_sending")).toBe(true);
 
         await act(async () => {
             cancelSend();
             // Wait one tick for the button to realize the send failed
             await new Promise(resolve => setImmediate(resolve));
         });
-        expect(firstButton.text()).toBe("Failed to send");
+        expect(firstButton.render().is(".mx_ForwardList_sendFailed")).toBe(true);
 
         const secondButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").at(1);
-        expect(secondButton.render().text()).toBe("Send");
+        expect(secondButton.render().is(".mx_ForwardList_canSend")).toBe(true);
 
         act(() => { secondButton.simulate("click"); });
-        expect(secondButton.text()).toBe("Sending…");
+        expect(secondButton.render().is(".mx_ForwardList_sending")).toBe(true);
 
         await act(async () => {
             finishSend();
             // Wait one tick for the button to realize the send succeeded
             await new Promise(resolve => setImmediate(resolve));
         });
-        expect(secondButton.text()).toBe("Sent");
+        expect(secondButton.render().is(".mx_ForwardList_sent")).toBe(true);
     });
 
     it("can render replies", async () => {

From cd460a2555026fe0ceaf8bb53d31af7ad6405b64 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Fri, 21 May 2021 12:59:13 -0400
Subject: [PATCH 0110/1270] Adjust forward dialog copy

Signed-off-by: Robin Townsend 
---
 src/components/views/dialogs/ForwardDialog.tsx | 2 +-
 src/i18n/strings/en_EN.json                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 3448e636d9..ff08ce43df 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -94,7 +94,7 @@ const Entry: React.FC = ({ room, event, cli, onFinished }) => {
             title = _t("Send");
         } else {
             disabled = true;
-            title = _t("You do not have permission to do this");
+            title = _t("You don't have permission to do this");
         }
     } else if (sendState === SendState.Sending) {
         className = "mx_ForwardList_sending";
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ebe5f54f61..ceb48852c5 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2202,7 +2202,7 @@
     "PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.": "PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.",
     "Report a bug": "Report a bug",
     "Please view existing bugs on Github first. No match? Start a new one.": "Please view existing bugs on Github first. No match? Start a new one.",
-    "You do not have permission to do this": "You do not have permission to do this",
+    "You don't have permission to do this": "You don't have permission to do this",
     "Sending…": "Sending…",
     "Sent": "Sent",
     "Open link": "Open link",

From 3ed421dacf5e9df2f346dcfd549b69555bf6707b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:04:22 +0100
Subject: [PATCH 0111/1270] Tweak blurhash size

---
 src/ContentMessages.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 626e5cbf69..0914bff41a 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -50,8 +50,8 @@ const MAX_HEIGHT = 600;
 const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
 const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448
-const BLURHASH_X_COMPONENTS = 8;
-const BLURHASH_Y_COMPONENTS = 8;
+const BLURHASH_X_COMPONENTS = 6;
+const BLURHASH_Y_COMPONENTS = 6;
 
 export class UploadCanceledError extends Error {}
 

From 254697644e956e032451b11c500de46d49410564 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:04:36 +0100
Subject: [PATCH 0112/1270] Fix video thumbnailer

---
 src/ContentMessages.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 0914bff41a..98a4554a07 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -237,7 +237,8 @@ function infoForImageFile(matrixClient, roomId, imageFile) {
 }
 
 /**
- * Load a file into a newly created video element.
+ * Load a file into a newly created video element and pull some strings
+ * in an attempt to guarantee the first frame will be showing.
  *
  * @param {File} videoFile The file to load in an video element.
  * @return {Promise} A promise that resolves with the video image element.
@@ -246,20 +247,25 @@ function loadVideoElement(videoFile): Promise {
     return new Promise((resolve, reject) => {
         // Load the file into an html element
         const video = document.createElement("video");
+        video.preload = "metadata";
+        video.playsInline = true;
+        video.muted = true;
 
         const reader = new FileReader();
 
         reader.onload = function(ev) {
-            video.src = ev.target.result as string;
-
-            // Once ready, returns its size
             // Wait until we have enough data to thumbnail the first frame.
-            video.onloadeddata = function() {
+            video.onloadeddata = async function() {
                 resolve(video);
+                video.pause();
             };
             video.onerror = function(e) {
                 reject(e);
             };
+
+            video.src = ev.target.result as string;
+            video.load();
+            video.play();
         };
         reader.onerror = function(e) {
             reject(e);

From dbca9b4625fbde6c32edef7522f2a2668b484829 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:19:41 +0100
Subject: [PATCH 0113/1270] use const for blurhash field

---
 src/ContentMessages.tsx                     | 2 +-
 src/components/views/messages/MImageBody.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 98a4554a07..44bb3edca9 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -49,7 +49,7 @@ const MAX_HEIGHT = 600;
 //                  5669 px (x-axis)      , 5669 px (y-axis)      , per metre
 const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
-const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448
+export const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448
 const BLURHASH_X_COMPONENTS = 6;
 const BLURHASH_Y_COMPONENTS = 6;
 
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 34320f1b31..6062375243 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -30,6 +30,7 @@ import InlineSpinner from '../elements/InlineSpinner';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromContent} from "../../../customisations/Media";
 import BlurhashPlaceholder from "../elements/BlurhashPlaceholder";
+import {BLURHASH_FIELD} from "../../../ContentMessages";
 
 @replaceableComponent("views.messages.MImageBody")
 export default class MImageBody extends React.Component {
@@ -440,7 +441,7 @@ export default class MImageBody extends React.Component {
 
     // Overidden by MStickerBody
     getPlaceholder(width, height) {
-        const blurhash = this.props.mxEvent.getContent().info['xyz.amorgan.blurhash'];
+        const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
         if (!blurhash) return null;
         return ;
     }

From 3a2e5389f6ccad7fc1ed3e039544d3fe596a104a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:20:00 +0100
Subject: [PATCH 0114/1270] Support blurhash for video posters

---
 src/components/views/messages/MVideoBody.tsx | 67 +++++++++++++++++---
 1 file changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 2efdce506e..44b246f0ad 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -16,6 +16,8 @@ limitations under the License.
 */
 
 import React from 'react';
+import { decode } from "blurhash";
+
 import MFileBody from './MFileBody';
 import { decryptFile } from '../../../utils/DecryptFile';
 import { _t } from '../../../languageHandler';
@@ -23,6 +25,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import InlineSpinner from '../elements/InlineSpinner';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromContent} from "../../../customisations/Media";
+import {BLURHASH_FIELD} from "../../../ContentMessages";
 
 interface IProps {
     /* the MatrixEvent to show */
@@ -37,6 +40,8 @@ interface IState {
     decryptedBlob: Blob|null,
     error: any|null,
     fetchingData: boolean,
+    posterLoading: boolean;
+    blurhashUrl: string;
 }
 
 @replaceableComponent("views.messages.MVideoBody")
@@ -51,10 +56,12 @@ export default class MVideoBody extends React.PureComponent {
             decryptedThumbnailUrl: null,
             decryptedBlob: null,
             error: null,
+            posterLoading: false,
+            blurhashUrl: null,
         }
     }
 
-    thumbScale(fullWidth: number, fullHeight: number, thumbWidth: number, thumbHeight: number) {
+    thumbScale(fullWidth: number, fullHeight: number, thumbWidth = 480, thumbHeight = 360) {
         if (!fullWidth || !fullHeight) {
             // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
             // log this because it's spammy
@@ -92,8 +99,11 @@ export default class MVideoBody extends React.PureComponent {
     private getThumbUrl(): string|null {
         const content = this.props.mxEvent.getContent();
         const media = mediaFromContent(content);
-        if (media.isEncrypted) {
+
+        if (media.isEncrypted && this.state.decryptedThumbnailUrl) {
             return this.state.decryptedThumbnailUrl;
+        } else if (this.state.posterLoading) {
+            return this.state.blurhashUrl;
         } else if (media.hasThumbnail) {
             return media.thumbnailHttp;
         } else {
@@ -101,18 +111,57 @@ export default class MVideoBody extends React.PureComponent {
         }
     }
 
+    private loadBlurhash() {
+        const info = this.props.mxEvent.getContent()?.info;
+        if (!info[BLURHASH_FIELD]) return;
+
+        const canvas = document.createElement("canvas");
+
+        let width = info.w;
+        let height = info.h;
+        const scale = this.thumbScale(info.w, info.h);
+        if (scale) {
+            width = Math.floor(info.w * scale);
+            height = Math.floor(info.h * scale);
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+
+        const pixels = decode(info[BLURHASH_FIELD], width, height);
+        const ctx = canvas.getContext("2d");
+        const imgData = ctx.createImageData(width, height);
+        imgData.data.set(pixels);
+        ctx.putImageData(imgData, 0, 0);
+
+        this.setState({
+            blurhashUrl: canvas.toDataURL(),
+            posterLoading: true,
+        });
+
+        const content = this.props.mxEvent.getContent();
+        const media = mediaFromContent(content);
+        if (media.hasThumbnail) {
+            const image = new Image();
+            image.onload = () => {
+                this.setState({ posterLoading: false });
+            };
+            image.src = media.thumbnailHttp;
+        }
+    }
+
     async componentDidMount() {
         const autoplay = SettingsStore.getValue("autoplayGifsAndVideos") as boolean;
         const content = this.props.mxEvent.getContent();
+        this.loadBlurhash();
+
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);
-            if (content.info && content.info.thumbnail_file) {
-                thumbnailPromise = decryptFile(
-                    content.info.thumbnail_file,
-                ).then(function(blob) {
-                    return URL.createObjectURL(blob);
-                });
+            if (content?.info?.thumbnail_file) {
+                thumbnailPromise = decryptFile(content.info.thumbnail_file)
+                    .then(blob => URL.createObjectURL(blob));
             }
+
             try {
                 const thumbnailUrl = await thumbnailPromise;
                 if (autoplay) {
@@ -218,7 +267,7 @@ export default class MVideoBody extends React.PureComponent {
         let poster = null;
         let preload = "metadata";
         if (content.info) {
-            const scale = this.thumbScale(content.info.w, content.info.h, 480, 360);
+            const scale = this.thumbScale(content.info.w, content.info.h);
             if (scale) {
                 width = Math.floor(content.info.w * scale);
                 height = Math.floor(content.info.h * scale);

From 9c599b567df828ed5e888c846aa080b93c535ae2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:39:38 +0100
Subject: [PATCH 0115/1270] Fix alignment of image blurhashes and interplay
 with spinners

---
 src/components/views/messages/MImageBody.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6062375243..8d3f1c4c10 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -372,10 +372,7 @@ export default class MImageBody extends React.Component {
         let placeholder = null;
         let gifLabel = null;
 
-        // e2e image hasn't been decrypted yet
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
-            placeholder = ;
-        } else if (!this.state.imgLoaded) {
+        if (!this.state.imgLoaded) {
             placeholder = this.getPlaceholder(maxWidth, maxHeight);
         }
 
@@ -414,9 +411,7 @@ export default class MImageBody extends React.Component {
                         // Constrain width here so that spinner appears central to the loaded thumbnail
                         maxWidth: infoWidth + "px",
                     }}>
-                        
    
-                            { placeholder }
-                        
    
+                        { placeholder }
                     
    
                 }
 
@@ -442,8 +437,10 @@ export default class MImageBody extends React.Component {
     // Overidden by MStickerBody
     getPlaceholder(width, height) {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
-        if (!blurhash) return null;
-        return ;
+        if (blurhash) return ;
+        return 
    
+            
+        
    ;
     }
 
     // Overidden by MStickerBody

From 3f9b6caacd76608cb1d22403442460223ab7090a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:46:18 +0100
Subject: [PATCH 0116/1270] fix missing rounded corners on blurhash placeholder

---
 res/css/views/messages/_MImageBody.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 1c773c2f06..d04b3d5c93 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+$timelineImageBorderRadius: 4px;
+
 .mx_MImageBody {
     display: block;
     margin-right: 34px;
@@ -25,7 +27,11 @@ limitations under the License.
     height: 100%;
     left: 0;
     top: 0;
-    border-radius: 4px;
+    border-radius: $timelineImageBorderRadius;
+
+    > canvas {
+        border-radius: $timelineImageBorderRadius;
+    }
 }
 
 .mx_MImageBody_thumbnail_container {

From cbc31b43a42481350c2188869d22ae784009a6c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sat, 22 May 2021 20:23:07 +0200
Subject: [PATCH 0117/1270] Add icons for silencing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/img/voip/silence.svg    | 3 +++
 res/img/voip/un-silence.svg | 4 ++++
 2 files changed, 7 insertions(+)
 create mode 100644 res/img/voip/silence.svg
 create mode 100644 res/img/voip/un-silence.svg

diff --git a/res/img/voip/silence.svg b/res/img/voip/silence.svg
new file mode 100644
index 0000000000..332932dfff
--- /dev/null
+++ b/res/img/voip/silence.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/res/img/voip/un-silence.svg b/res/img/voip/un-silence.svg
new file mode 100644
index 0000000000..c00b366f84
--- /dev/null
+++ b/res/img/voip/un-silence.svg
@@ -0,0 +1,4 @@
+
+
+
+

From 21fb81d4a2727b17f347470e56e2bde54532e343 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sat, 22 May 2021 20:23:24 +0200
Subject: [PATCH 0118/1270] Export AudioIDs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/CallHandler.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx
index 0268ebfe46..a0a13e484d 100644
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@@ -99,7 +99,7 @@ const CHECK_PROTOCOLS_ATTEMPTS = 3;
 // (and store the ID of their native room)
 export const VIRTUAL_ROOM_EVENT_TYPE = 'im.vector.is_virtual_room';
 
-enum AudioID {
+export enum AudioID {
     Ring = 'ringAudio',
     Ringback = 'ringbackAudio',
     CallEnd = 'callendAudio',

From c678211a4290ecf7caeb6db4d49bab5d7784436a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sat, 22 May 2021 20:24:20 +0200
Subject: [PATCH 0119/1270] Add styling for silencing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/voip/_CallContainer.scss | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss
index 8262075559..168a8bb74b 100644
--- a/res/css/views/voip/_CallContainer.scss
+++ b/res/css/views/voip/_CallContainer.scss
@@ -98,5 +98,29 @@ limitations under the License.
                 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');
+        }
     }
 }

From b08b36c14f6d182f74b5bc758a83a5a6ba10d7a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sat, 22 May 2021 20:24:36 +0200
Subject: [PATCH 0120/1270] Add silencing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/voip/IncomingCallBox.tsx | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx
index 2abdc0641d..a0660318bc 100644
--- a/src/components/views/voip/IncomingCallBox.tsx
+++ b/src/components/views/voip/IncomingCallBox.tsx
@@ -21,17 +21,20 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import { ActionPayload } from '../../../dispatcher/payloads';
-import CallHandler from '../../../CallHandler';
+import CallHandler, { AudioID } from '../../../CallHandler';
 import RoomAvatar from '../avatars/RoomAvatar';
 import FormButton from '../elements/FormButton';
 import { CallState } from 'matrix-js-sdk/src/webrtc/call';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
+import classNames from 'classnames';
 
 interface IProps {
 }
 
 interface IState {
     incomingCall: any;
+    silenced: boolean;
 }
 
 @replaceableComponent("views.voip.IncomingCallBox")
@@ -44,6 +47,7 @@ export default class IncomingCallBox extends React.Component {
         this.dispatcherRef = dis.register(this.onAction);
         this.state = {
             incomingCall: null,
+            silenced: false,
         };
     }
 
@@ -58,6 +62,7 @@ export default class IncomingCallBox extends React.Component {
                 if (call && call.state === CallState.Ringing) {
                     this.setState({
                         incomingCall: call,
+                        silenced: false, // Reset silenced state for new call
                     });
                 } else {
                     this.setState({
@@ -84,6 +89,13 @@ export default class IncomingCallBox extends React.Component {
         });
     };
 
+    private onSilenceClick: React.MouseEventHandler = (e) => {
+        e.stopPropagation();
+        const newState = !this.state.silenced
+        this.setState({silenced: newState});
+        newState ? CallHandler.sharedInstance().pause(AudioID.Ring) : CallHandler.sharedInstance().play(AudioID.Ring);
+    }
+
     public render() {
         if (!this.state.incomingCall) {
             return null;
@@ -107,6 +119,12 @@ export default class IncomingCallBox extends React.Component {
             }
         }
 
+        const silenceClass = classNames({
+            "mx_IncomingCallBox_iconButton": true,
+            "mx_IncomingCallBox_unSilence": this.state.silenced,
+            "mx_IncomingCallBox_silence": !this.state.silenced,
+        });
+
         return 
    
             
    
                  {
                     
    {caller}
    
                     
    {incomingCallText}
    
                 
    
+                
             
    
             
    
                 
Date: Sat, 22 May 2021 20:24:41 +0200
Subject: [PATCH 0121/1270] i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/i18n/strings/en_EN.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d6eef99dbf..555518dbb6 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -903,6 +903,8 @@
     "Incoming voice call": "Incoming voice call",
     "Incoming video call": "Incoming video call",
     "Incoming call": "Incoming call",
+    "Sound on": "Sound on",
+    "Silence call": "Silence call",
     "Decline": "Decline",
     "Accept": "Accept",
     "Pause": "Pause",

From 44e14a7d4305639b928e3a78a0b6f368f33f8424 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 May 2021 10:06:17 +0100
Subject: [PATCH 0122/1270] Support blurhashes on stickers

---
 src/components/views/messages/MStickerBody.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.js
index 54eb7649b4..d3dea2bfa4 100644
--- a/src/components/views/messages/MStickerBody.js
+++ b/src/components/views/messages/MStickerBody.js
@@ -18,6 +18,7 @@ import React from 'react';
 import MImageBody from './MImageBody';
 import * as sdk from '../../../index';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {BLURHASH_FIELD} from "../../../ContentMessages";
 
 @replaceableComponent("views.messages.MStickerBody")
 export default class MStickerBody extends MImageBody {
@@ -41,7 +42,8 @@ export default class MStickerBody extends MImageBody {
 
     // Placeholder to show in place of the sticker image if
     // img onLoad hasn't fired yet.
-    getPlaceholder() {
+    getPlaceholder(width, height) {
+        if (this.props.mxEvent.getContent().info[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
         const TintableSVG = sdk.getComponent('elements.TintableSvg');
         return ;
     }

From 400917623ce24f37b4eb12fda5769531f7c635c5 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 24 May 2021 08:33:28 -0400
Subject: [PATCH 0123/1270] Make myself the copyright holder for forward dialog
 code

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss           | 2 +-
 src/components/views/dialogs/ForwardDialog.tsx      | 2 +-
 test/components/views/dialogs/ForwardDialog-test.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 1eb37e09da..593fe12531 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 Robin Townsend.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index ff08ce43df..66b4b49997 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 Robin Townsend.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/test/components/views/dialogs/ForwardDialog-test.js b/test/components/views/dialogs/ForwardDialog-test.js
index ce62b4fa7c..fddba1d5ae 100644
--- a/test/components/views/dialogs/ForwardDialog-test.js
+++ b/test/components/views/dialogs/ForwardDialog-test.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 Robin Townsend.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

From 6ced61b7096ed31cd00ada688495235fa61b9df8 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 24 May 2021 08:34:03 -0400
Subject: [PATCH 0124/1270] Use camelCase

Signed-off-by: Robin Townsend 
---
 src/components/views/context_menus/MessageContextMenu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 5494b0a32f..4120f7be9e 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -161,7 +161,7 @@ export default class MessageContextMenu extends React.Component {
             cli: MatrixClientPeg.get(),
             event: this.props.mxEvent,
             permalinkCreator: this.props.permalinkCreator,
-        }, 'mx_Dialog_forwardmessage');
+        }, 'mx_Dialog_forwardMessage');
         this.closeMenu();
     };
 

From 121ed5eba996f41ce78c8b789278d196443e53b1 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 24 May 2021 08:51:04 -0400
Subject: [PATCH 0125/1270] Pass Matrix client around as matrixClient

Signed-off-by: Robin Townsend 
---
 .../views/context_menus/MessageContextMenu.js          |  2 +-
 src/components/views/dialogs/ForwardDialog.tsx         | 10 +++++-----
 test/components/views/dialogs/ForwardDialog-test.js    |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 4120f7be9e..08fc5844ec 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -158,7 +158,7 @@ export default class MessageContextMenu extends React.Component {
 
     onForwardClick = () => {
         Modal.createTrackedDialog('Forward Message', '', ForwardDialog, {
-            cli: MatrixClientPeg.get(),
+            matrixClient: MatrixClientPeg.get(),
             event: this.props.mxEvent,
             permalinkCreator: this.props.permalinkCreator,
         }, 'mx_Dialog_forwardMessage');
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 66b4b49997..3087ce51a1 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -42,7 +42,7 @@ import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/Recent
 const AVATAR_SIZE = 30;
 
 interface IProps extends IDialogProps {
-    cli: MatrixClient;
+    matrixClient: MatrixClient;
     // The event to forward
     event: MatrixEvent;
     // We need a permalink creator for the source room to pass through to EventTile
@@ -53,7 +53,7 @@ interface IProps extends IDialogProps {
 interface IEntryProps {
     room: Room;
     event: MatrixEvent;
-    cli: MatrixClient;
+    matrixClient: MatrixClient;
     onFinished(success: boolean): void;
 }
 
@@ -64,7 +64,7 @@ enum SendState {
     Failed,
 }
 
-const Entry: React.FC = ({ room, event, cli, onFinished }) => {
+const Entry: React.FC = ({ room, event, matrixClient: cli, onFinished }) => {
     const [sendState, setSendState] = useState(SendState.CanSend);
 
     const jumpToRoom = () => {
@@ -141,7 +141,7 @@ const Entry: React.FC = ({ room, event, cli, onFinished }) => {
     
    ;
 };
 
-const ForwardDialog: React.FC = ({ cli, event, permalinkCreator, onFinished }) => {
+const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCreator, onFinished }) => {
     const userId = cli.getUserId();
     const [profileInfo, setProfileInfo] = useState({});
     useEffect(() => {
@@ -219,7 +219,7 @@ const ForwardDialog: React.FC = ({ cli, event, permalinkCreator, onFinis
                                 key={room.roomId}
                                 room={room}
                                 event={event}
-                                cli={cli}
+                                matrixClient={cli}
                                 onFinished={onFinished}
                             />,
                         ) }
diff --git a/test/components/views/dialogs/ForwardDialog-test.js b/test/components/views/dialogs/ForwardDialog-test.js
index fddba1d5ae..004954c713 100644
--- a/test/components/views/dialogs/ForwardDialog-test.js
+++ b/test/components/views/dialogs/ForwardDialog-test.js
@@ -47,7 +47,7 @@ describe("ForwardDialog", () => {
         await act(async () => {
             wrapper = mount(
                 
Date: Mon, 24 May 2021 08:55:08 -0400
Subject: [PATCH 0126/1270] Give forward dialog send buttons an accessible
 label

Signed-off-by: Robin Townsend 
---
 src/components/views/dialogs/ForwardDialog.tsx | 6 +++---
 src/i18n/strings/en_EN.json                    | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 3087ce51a1..59475b1b51 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -99,13 +99,13 @@ const Entry: React.FC = ({ room, event, matrixClient: cli, onFinish
     } else if (sendState === SendState.Sending) {
         className = "mx_ForwardList_sending";
         disabled = true;
-        title = _t("Sending…");
-        icon = 
    ;
+        title = _t("Sending");
+        icon = 
    ;
     } else if (sendState === SendState.Sent) {
         className = "mx_ForwardList_sent";
         disabled = true;
         title = _t("Sent");
-        icon = 
    ;
+        icon = 
    ;
     } else {
         className = "mx_ForwardList_sendFailed";
         disabled = true;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index c2c6aa9e6d..817765ca69 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2203,7 +2203,7 @@
     "Report a bug": "Report a bug",
     "Please view existing bugs on Github first. No match? Start a new one.": "Please view existing bugs on Github first. No match? Start a new one.",
     "You don't have permission to do this": "You don't have permission to do this",
-    "Sending…": "Sending…",
+    "Sending": "Sending",
     "Sent": "Sent",
     "Open link": "Open link",
     "Forward message": "Forward message",
@@ -2668,7 +2668,6 @@
     "Some of your messages have not been sent": "Some of your messages have not been sent",
     "Delete all": "Delete all",
     "Retry all": "Retry all",
-    "Sending": "Sending",
     "You can select all or individual messages to retry or delete": "You can select all or individual messages to retry or delete",
     "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
     "Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.",

From 42ffc5c9e8ffd1673f14268a18c83bed31378984 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 May 2021 18:08:43 +0100
Subject: [PATCH 0127/1270] Add support to keyboard shortcuts dialog for
 [digits]

---
 src/accessibility/KeyboardShortcuts.tsx | 3 +++
 src/i18n/strings/en_EN.json             | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/accessibility/KeyboardShortcuts.tsx b/src/accessibility/KeyboardShortcuts.tsx
index 2a3e576e31..1cd5408210 100644
--- a/src/accessibility/KeyboardShortcuts.tsx
+++ b/src/accessibility/KeyboardShortcuts.tsx
@@ -57,6 +57,8 @@ export enum Modifiers {
 
 // Meta-modifier: isMac ? CMD : CONTROL
 export const CMD_OR_CTRL = isMac ? Modifiers.COMMAND : Modifiers.CONTROL;
+// Meta-key representing the digits [0-9] often found at the top of standard keyboard layouts
+export const DIGITS = "digits";
 
 interface IKeybind {
     modifiers?: Modifiers[];
@@ -319,6 +321,7 @@ const alternateKeyName: Record = {
     [Key.SPACE]: _td("Space"),
     [Key.HOME]: _td("Home"),
     [Key.END]: _td("End"),
+    [DIGITS]: _td("[number]"),
 };
 const keyIcon: Record = {
     [Key.ARROW_UP]: "↑",
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 7ceb039822..251c70e241 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2973,5 +2973,6 @@
     "Esc": "Esc",
     "Enter": "Enter",
     "Space": "Space",
-    "End": "End"
+    "End": "End",
+    "[number]": "[number]"
 }

From 63ae84a72ed441853bb0c95857afc755eefe8486 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 May 2021 18:23:04 +0100
Subject: [PATCH 0128/1270] Wire space switch shortcut via dispatcher to
 prevent app load explosion due to skinning

---
 src/dispatcher/actions.ts                     |  5 ++++
 src/dispatcher/payloads/SwitchSpacePayload.ts | 27 +++++++++++++++++++
 src/stores/SpaceStore.tsx                     |  7 +++++
 3 files changed, 39 insertions(+)
 create mode 100644 src/dispatcher/payloads/SwitchSpacePayload.ts

diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts
index cd32c3743f..79e1edeee9 100644
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@@ -138,4 +138,9 @@ export enum Action {
      * Fired when an upload is cancelled by the user. Should be used with UploadCanceledPayload.
      */
     UploadCanceled = "upload_canceled",
+
+    /**
+     * Switches space. Should be used with SwitchSpacePayload.
+     */
+    SwitchSpace = "switch_space",
 }
diff --git a/src/dispatcher/payloads/SwitchSpacePayload.ts b/src/dispatcher/payloads/SwitchSpacePayload.ts
new file mode 100644
index 0000000000..04eb744334
--- /dev/null
+++ b/src/dispatcher/payloads/SwitchSpacePayload.ts
@@ -0,0 +1,27 @@
+/*
+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 { ActionPayload } from "../payloads";
+import { Action } from "../actions";
+
+export interface SwitchSpacePayload extends ActionPayload {
+    action: Action.SwitchSpace;
+
+    /**
+     * The number of the space to switch to, 1-indexed, 0 is Home.
+     */
+    num: number;
+}
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 40997d30a8..0d09357fc1 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -33,6 +33,7 @@ import {EnhancedMap, mapDiff} from "../utils/maps";
 import {setHasDiff} from "../utils/sets";
 import {ISpaceSummaryEvent, ISpaceSummaryRoom} from "../components/structures/SpaceRoomDirectory";
 import RoomViewStore from "./RoomViewStore";
+import {Action} from "../dispatcher/actions";
 
 interface IState {}
 
@@ -565,6 +566,12 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
                     this.setActiveSpace(null, false);
                 }
                 break;
+            case Action.SwitchSpace:
+                if (payload.num === 0) {
+                    this.setActiveSpace(null);
+                } else if (this.spacePanelSpaces.length >= payload.num) {
+                    this.setActiveSpace(this.spacePanelSpaces[payload.num - 1]);
+                }
         }
     }
 

From a757f589bdee45417425561ce296e639465da0b8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 May 2021 21:57:59 +0100
Subject: [PATCH 0129/1270] post-merge fixup

---
 src/components/views/rooms/BasicMessageComposer.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index a8a33af867..31651d807d 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -726,9 +726,8 @@ export default class BasicMessageEditor extends React.Component
             member.rawDisplayName : userId;
         const caret = this.getCaret();
         const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
-        // index is -1 if there are no parts but we only care for if this would be the part in position 0
-        const insertIndex = position.index > 0 ? position.index : 0;
-        const parts = partCreator.createMentionParts(insertIndex, displayName, userId);
+        // Insert suffix only if the caret is at the start of the composer
+        const parts = partCreator.createMentionParts(caret.offset === 0, displayName, userId);
         model.transform(() => {
             const addedLen = model.insert(parts, position);
             return model.positionForOffset(caret.offset + addedLen, true);

From 4a5c634d82e46088d618466edadffc1151ca2bcb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 May 2021 22:02:50 +0100
Subject: [PATCH 0130/1270] Iterate PR

---
 src/components/structures/TimelinePanel.js         |  3 ++-
 .../views/context_menus/MessageContextMenu.js      |  6 ++++--
 src/components/views/messages/TextualBody.js       |  6 ++++--
 src/components/views/right_panel/UserInfo.tsx      |  5 +++--
 src/components/views/rooms/EventTile.tsx           |  6 ++++--
 src/components/views/rooms/MessageComposer.tsx     | 14 ++++++++------
 6 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 0972eeb0fb..d6d29e1cde 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -39,6 +39,7 @@ import {UIFeature} from "../../settings/UIFeature";
 import {objectHasDiff} from "../../utils/objects";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import { arrayFastClone } from "../../utils/arrays";
+import {Action} from "../../dispatcher/actions";
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
@@ -470,7 +471,7 @@ class TimelinePanel extends React.Component {
                 break;
             }
 
-            case "composer_insert": {
+            case Action.ComposerInsert: {
                 // re-dispatch to the correct composer
                 if (this.state.editState) {
                     dis.dispatch({
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 1cc4ce6dfb..cb4632b2ac 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -31,6 +31,8 @@ import { isContentActionable } from '../../../utils/EventUtils';
 import {MenuItem} from "../../structures/ContextMenu";
 import {EventType} from "matrix-js-sdk/src/@types/event";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload";
+import {Action} from "../../../dispatcher/actions";
 
 export function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -199,8 +201,8 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onQuoteClick = () => {
-        dis.dispatch({
-            action: "composer_insert",
+        dis.dispatch({
+            action: Action.ComposerInsert,
             event: this.props.mxEvent,
         });
         this.closeMenu();
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index bd5aa8d356..cb8a73ae9a 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -36,6 +36,8 @@ import {toRightOf} from "../../structures/ContextMenu";
 import {copyPlaintext} from "../../../utils/strings";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload";
+import {Action} from "../../../dispatcher/actions";
 
 @replaceableComponent("views.messages.TextualBody")
 export default class TextualBody extends React.Component {
@@ -389,8 +391,8 @@ export default class TextualBody extends React.Component {
 
     onEmoteSenderClick = event => {
         const mxEvent = this.props.mxEvent;
-        dis.dispatch({
-            action: "composer_insert",
+        dis.dispatch({
+            action: Action.ComposerInsert,
             userId: mxEvent.getSender(),
         });
     };
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index c4a9a4fe34..e4303864d3 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -66,6 +66,7 @@ import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRight
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
 import {mediaFromMxc} from "../../../customisations/Media";
+import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload";
 
 export interface IDevice {
     deviceId: string;
@@ -366,8 +367,8 @@ const UserOptionsSection: React.FC<{
             };
 
             const onInsertPillButton = function() {
-                dis.dispatch({
-                    action: "composer_insert",
+                dis.dispatch({
+                    action: Action.ComposerInsert,
                     userId: member.userId,
                 });
             };
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index c03ecb4a77..db8cf67930 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -46,6 +46,8 @@ import { EditorStateTransfer } from "../../../utils/EditorStateTransfer";
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
 import NotificationBadge from "./NotificationBadge";
+import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload";
+import { Action } from '../../../dispatcher/actions';
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -698,8 +700,8 @@ export default class EventTile extends React.Component {
 
     onSenderProfileClick = event => {
         const mxEvent = this.props.mxEvent;
-        dis.dispatch({
-            action: "composer_insert",
+        dis.dispatch({
+            action: Action.ComposerInsert,
             userId: mxEvent.getSender(),
         });
     };
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index fdc2a9411e..dc3e2658c0 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -15,16 +15,16 @@ limitations under the License.
 */
 import React from 'react';
 import classNames from 'classnames';
-import { _t } from '../../../languageHandler';
+import {_t} from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {RoomMember} from "matrix-js-sdk/src/models/room-member";
 import dis from '../../../dispatcher/dispatcher';
-import { ActionPayload } from "../../../dispatcher/payloads";
+import {ActionPayload} from "../../../dispatcher/payloads";
 import Stickerpicker from './Stickerpicker';
-import { makeRoomPermalink, RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
+import {makeRoomPermalink, RoomPermalinkCreator} from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -39,8 +39,10 @@ import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
 import {RecordingState} from "../../../voice/VoiceRecording";
 import Tooltip, {Alignment} from "../elements/Tooltip";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
-import { E2EStatus } from '../../../utils/ShieldUtils';
+import {E2EStatus} from '../../../utils/ShieldUtils';
 import SendMessageComposer from "./SendMessageComposer";
+import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload";
+import {Action} from "../../../dispatcher/actions";
 
 interface IComposerAvatarProps {
     me: object;
@@ -317,8 +319,8 @@ export default class MessageComposer extends React.Component {
     }
 
     addEmoji(emoji) {
-        dis.dispatch({
-            action: "composer_insert",
+        dis.dispatch({
+            action: Action.ComposerInsert,
             text: emoji,
         });
     }

From 1ffbaee560a94b6a310993d4a6ddc3e19ce05d90 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 26 May 2021 14:14:55 +0100
Subject: [PATCH 0131/1270] update style of imports in all modified files

---
 src/components/structures/TimelinePanel.js    | 20 +++++-----
 .../views/context_menus/MessageContextMenu.js | 14 +++----
 src/components/views/messages/TextualBody.js  | 20 +++++-----
 src/components/views/right_panel/UserInfo.tsx | 38 +++++++++----------
 .../views/rooms/BasicMessageComposer.tsx      | 30 +++++++--------
 .../views/rooms/EditMessageComposer.js        | 22 +++++------
 .../views/rooms/MessageComposer.tsx           | 36 +++++++++---------
 .../views/rooms/SendMessageComposer.js        | 20 +++++-----
 src/editor/model.ts                           | 10 ++---
 9 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index d6d29e1cde..c815b69abc 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -18,14 +18,14 @@ limitations under the License.
 */
 
 import SettingsStore from "../../settings/SettingsStore";
-import {LayoutPropType} from "../../settings/Layout";
-import React, {createRef} from 'react';
+import { LayoutPropType } from "../../settings/Layout";
+import React, { createRef } from 'react';
 import ReactDOM from "react-dom";
 import PropTypes from 'prop-types';
-import {EventTimeline} from "matrix-js-sdk/src/models/event-timeline";
-import {TimelineWindow} from "matrix-js-sdk/src/timeline-window";
+import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
+import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
 import { _t } from '../../languageHandler';
-import {MatrixClientPeg} from "../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 import UserActivity from "../../UserActivity";
 import Modal from "../../Modal";
 import dis from "../../dispatcher/dispatcher";
@@ -34,12 +34,12 @@ import { Key } from '../../Keyboard';
 import Timer from '../../utils/Timer';
 import shouldHideEvent from '../../shouldHideEvent';
 import EditorStateTransfer from '../../utils/EditorStateTransfer';
-import {haveTileForEvent} from "../views/rooms/EventTile";
-import {UIFeature} from "../../settings/UIFeature";
-import {objectHasDiff} from "../../utils/objects";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { haveTileForEvent } from "../views/rooms/EventTile";
+import { UIFeature } from "../../settings/UIFeature";
+import { objectHasDiff } from "../../utils/objects";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 import { arrayFastClone } from "../../utils/arrays";
-import {Action} from "../../dispatcher/actions";
+import { Action } from "../../dispatcher/actions";
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index cb4632b2ac..9576d71e16 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -17,9 +17,9 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {EventStatus} from 'matrix-js-sdk/src/models/event';
+import { EventStatus } from 'matrix-js-sdk/src/models/event';
 
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -28,11 +28,11 @@ import Resend from '../../../Resend';
 import SettingsStore from '../../../settings/SettingsStore';
 import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
-import {MenuItem} from "../../structures/ContextMenu";
-import {EventType} from "matrix-js-sdk/src/@types/event";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload";
-import {Action} from "../../../dispatcher/actions";
+import { MenuItem } from "../../structures/ContextMenu";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
+import { Action } from "../../../dispatcher/actions";
 
 export function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 1c1f64ff37..eb4516b37a 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -16,12 +16,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import highlight from 'highlight.js';
 import * as HtmlUtils from '../../../HtmlUtils';
-import {formatDate} from '../../../DateUtils';
+import { formatDate } from '../../../DateUtils';
 import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import dis from '../../../dispatcher/dispatcher';
@@ -29,16 +29,16 @@ import { _t } from '../../../languageHandler';
 import * as ContextMenu from '../../structures/ContextMenu';
 import SettingsStore from "../../../settings/SettingsStore";
 import ReplyThread from "../elements/ReplyThread";
-import {pillifyLinks, unmountPills} from '../../../utils/pillify';
-import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
-import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
-import {toRightOf} from "../../structures/ContextMenu";
-import {copyPlaintext} from "../../../utils/strings";
+import { pillifyLinks, unmountPills } from '../../../utils/pillify';
+import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
+import { isPermalinkHost } from "../../../utils/permalinks/Permalinks";
+import { toRightOf } from "../../structures/ContextMenu";
+import { copyPlaintext } from "../../../utils/strings";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import UIStore from "../../../stores/UIStore";
-import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload";
-import {Action} from "../../../dispatcher/actions";
+import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
+import { Action } from "../../../dispatcher/actions";
 
 @replaceableComponent("views.messages.TextualBody")
 export default class TextualBody extends React.Component {
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 06f0fbff6a..1a9f95d4c4 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -17,18 +17,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import {MatrixClient} from 'matrix-js-sdk/src/client';
-import {RoomMember} from 'matrix-js-sdk/src/models/room-member';
-import {User} from 'matrix-js-sdk/src/models/user';
-import {Room} from 'matrix-js-sdk/src/models/room';
-import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
-import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
+import { User } from 'matrix-js-sdk/src/models/user';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 
 import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
-import {_t} from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import createRoom, { findDMForUser, privateShouldBeEncrypted } from '../../../createRoom';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -37,20 +37,20 @@ import SettingsStore from "../../../settings/SettingsStore";
 import RoomViewStore from "../../../stores/RoomViewStore";
 import MultiInviter from "../../../utils/MultiInviter";
 import GroupStore from "../../../stores/GroupStore";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import E2EIcon from "../rooms/E2EIcon";
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
-import {textualPowerLevel} from '../../../Roles';
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+import { textualPowerLevel } from '../../../Roles';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
 import EncryptionPanel from "./EncryptionPanel";
-import {useAsyncMemo} from '../../../hooks/useAsyncMemo';
-import {legacyVerifyUser, verifyDevice, verifyUser} from '../../../verification';
-import {Action} from "../../../dispatcher/actions";
+import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
+import { legacyVerifyUser, verifyDevice, verifyUser } from '../../../verification';
+import { Action } from "../../../dispatcher/actions";
 import { USER_SECURITY_TAB } from "../dialogs/UserSettingsDialog";
-import {useIsEncrypted} from "../../../hooks/useIsEncrypted";
+import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
 import BaseCard from "./BaseCard";
-import {E2EStatus} from "../../../utils/ShieldUtils";
+import { E2EStatus } from "../../../utils/ShieldUtils";
 import ImageView from "../elements/ImageView";
 import Spinner from "../elements/Spinner";
 import PowerSelector from "../elements/PowerSelector";
@@ -65,9 +65,9 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { mediaFromMxc } from "../../../customisations/Media";
 import UIStore from "../../../stores/UIStore";
-import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload";
+import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 
 export interface IDevice {
     deviceId: string;
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index 31651d807d..3ab3865fb1 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -16,39 +16,39 @@ limitations under the License.
 */
 
 import classNames from 'classnames';
-import React, {createRef, ClipboardEvent} from 'react';
-import {Room} from 'matrix-js-sdk/src/models/room';
-import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
+import React, { createRef, ClipboardEvent } from 'react';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import EMOTICON_REGEX from 'emojibase-regex/emoticon';
 
 import EditorModel from '../../../editor/model';
 import HistoryManager from '../../../editor/history';
-import {Caret, setSelection} from '../../../editor/caret';
+import { Caret, setSelection } from '../../../editor/caret';
 import {
     formatRangeAsQuote,
     formatRangeAsCode,
     toggleInlineFormat,
     replaceRangeAndMoveCaret,
 } from '../../../editor/operations';
-import {getCaretOffsetAndText, getRangeForSelection} from '../../../editor/dom';
-import Autocomplete, {generateCompletionDomId} from '../rooms/Autocomplete';
-import {getAutoCompleteCreator} from '../../../editor/parts';
-import {parseEvent, parsePlainTextMessage} from '../../../editor/deserialize';
-import {renderModel} from '../../../editor/render';
+import { getCaretOffsetAndText, getRangeForSelection } from '../../../editor/dom';
+import Autocomplete, { generateCompletionDomId } from '../rooms/Autocomplete';
+import { getAutoCompleteCreator } from '../../../editor/parts';
+import { parseEvent, parsePlainTextMessage } from '../../../editor/deserialize';
+import { renderModel } from '../../../editor/render';
 import TypingStore from "../../../stores/TypingStore";
 import SettingsStore from "../../../settings/SettingsStore";
-import {Key} from "../../../Keyboard";
-import {EMOTICON_TO_EMOJI} from "../../../emoji";
-import {CommandCategories, CommandMap, parseCommandString} from "../../../SlashCommands";
+import { Key } from "../../../Keyboard";
+import { EMOTICON_TO_EMOJI } from "../../../emoji";
+import { CommandCategories, CommandMap, parseCommandString } from "../../../SlashCommands";
 import Range from "../../../editor/range";
 import MessageComposerFormatBar from "./MessageComposerFormatBar";
 import DocumentOffset from "../../../editor/offset";
-import {IDiff} from "../../../editor/diff";
+import { IDiff } from "../../../editor/diff";
 import AutocompleteWrapperModel from "../../../editor/autocomplete";
 import DocumentPosition from "../../../editor/position";
-import {ICompletion} from "../../../autocomplete/Autocompleter";
+import { ICompletion } from "../../../autocomplete/Autocompleter";
 import { AutocompleteAction, getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindingsManager';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent}  from "../../../utils/replaceableComponent";
 
 // matches emoticons which follow the start of a line or whitespace
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index 7128085c1c..e11b3836d9 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -16,25 +16,25 @@ limitations under the License.
 */
 import React from 'react';
 import * as sdk from '../../../index';
-import {_t, _td} from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
 import EditorModel from '../../../editor/model';
-import {getCaretOffsetAndText} from '../../../editor/dom';
-import {htmlSerializeIfNeeded, textSerialize, containsEmote, stripEmoteCommand} from '../../../editor/serialize';
-import {findEditableEvent} from '../../../utils/EventUtils';
-import {parseEvent} from '../../../editor/deserialize';
-import {CommandPartCreator} from '../../../editor/parts';
+import { getCaretOffsetAndText } from '../../../editor/dom';
+import { htmlSerializeIfNeeded, textSerialize, containsEmote, stripEmoteCommand } from '../../../editor/serialize';
+import { findEditableEvent } from '../../../utils/EventUtils';
+import { parseEvent } from '../../../editor/deserialize';
+import { CommandPartCreator } from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
 import classNames from 'classnames';
-import {EventStatus} from 'matrix-js-sdk/src/models/event';
+import { EventStatus } from 'matrix-js-sdk/src/models/event';
 import BasicMessageComposer from "./BasicMessageComposer";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {CommandCategories, getCommand} from '../../../SlashCommands';
-import {Action} from "../../../dispatcher/actions";
+import { CommandCategories, getCommand } from '../../../SlashCommands';
+import { Action } from "../../../dispatcher/actions";
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {getKeyBindingsManager, MessageComposerAction} from '../../../KeyBindingsManager';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindingsManager';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SendHistoryManager from '../../../SendHistoryManager';
 import Modal from '../../../Modal';
 
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index dc3e2658c0..f7d562fca0 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -15,34 +15,34 @@ limitations under the License.
 */
 import React from 'react';
 import classNames from 'classnames';
-import {_t} from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { _t } from '../../../languageHandler';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import dis from '../../../dispatcher/dispatcher';
-import {ActionPayload} from "../../../dispatcher/payloads";
+import { ActionPayload } from "../../../dispatcher/payloads";
 import Stickerpicker from './Stickerpicker';
-import {makeRoomPermalink, RoomPermalinkCreator} from '../../../utils/permalinks/Permalinks';
+import { makeRoomPermalink, RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
-import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
+import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ReplyPreview from "./ReplyPreview";
-import {UIFeature} from "../../../settings/UIFeature";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { UIFeature } from "../../../settings/UIFeature";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
-import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
-import {RecordingState} from "../../../voice/VoiceRecording";
-import Tooltip, {Alignment} from "../elements/Tooltip";
+import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
+import { RecordingState } from "../../../voice/VoiceRecording";
+import Tooltip, { Alignment } from "../elements/Tooltip";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
-import {E2EStatus} from '../../../utils/ShieldUtils';
+import { E2EStatus } from '../../../utils/ShieldUtils';
 import SendMessageComposer from "./SendMessageComposer";
-import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload";
-import {Action} from "../../../dispatcher/actions";
+import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
+import { Action } from "../../../dispatcher/actions";
 
 interface IComposerAvatarProps {
     me: object;
@@ -318,7 +318,7 @@ export default class MessageComposer extends React.Component {
         }
     }
 
-    addEmoji(emoji) {
+    addEmoji(emoji: string) {
         dis.dispatch({
             action: Action.ComposerInsert,
             text: emoji,
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 44cd94460e..10ef91c689 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -27,26 +27,26 @@ import {
     startsWith,
     stripPrefix,
 } from '../../../editor/serialize';
-import {CommandPartCreator} from '../../../editor/parts';
+import { CommandPartCreator } from '../../../editor/parts';
 import BasicMessageComposer from "./BasicMessageComposer";
 import ReplyThread from "../elements/ReplyThread";
-import {findEditableEvent} from '../../../utils/EventUtils';
+import { findEditableEvent } from '../../../utils/EventUtils';
 import SendHistoryManager from "../../../SendHistoryManager";
-import {CommandCategories, getCommand} from '../../../SlashCommands';
+import { CommandCategories, getCommand } from '../../../SlashCommands';
 import * as sdk from '../../../index';
 import Modal from '../../../Modal';
-import {_t, _td} from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import RateLimitedFunc from '../../../ratelimitedfunc';
-import {Action} from "../../../dispatcher/actions";
-import {containsEmoji} from "../../../effects/utils";
-import {CHAT_EFFECTS} from '../../../effects';
+import { Action } from "../../../dispatcher/actions";
+import { containsEmoji } from "../../../effects/utils";
+import { CHAT_EFFECTS } from '../../../effects';
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import EMOJI_REGEX from 'emojibase-regex';
-import {getKeyBindingsManager, MessageComposerAction} from '../../../KeyBindingsManager';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindingsManager';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SettingsStore from '../../../settings/SettingsStore';
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
diff --git a/src/editor/model.ts b/src/editor/model.ts
index c57e06c657..7925a43164 100644
--- a/src/editor/model.ts
+++ b/src/editor/model.ts
@@ -15,13 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {diffAtCaret, diffDeletion, IDiff} from "./diff";
-import DocumentPosition, {IPosition} from "./position";
+import { diffAtCaret, diffDeletion, IDiff } from "./diff";
+import DocumentPosition, { IPosition } from "./position";
 import Range from "./range";
-import {SerializedPart, Part, PartCreator} from "./parts";
-import AutocompleteWrapperModel, {ICallback} from "./autocomplete";
+import { SerializedPart, Part, PartCreator } from "./parts";
+import AutocompleteWrapperModel, { ICallback } from "./autocomplete";
 import DocumentOffset from "./offset";
-import {Caret} from "./caret";
+import { Caret } from "./caret";
 
 /**
  * @callback ModelCallback

From 264ab925cd5da1abee7e5bde9b5be0611b3d75a1 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 26 May 2021 14:21:28 +0100
Subject: [PATCH 0132/1270] delint

---
 src/components/views/rooms/BasicMessageComposer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index 3ab3865fb1..981ff1b4ae 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -48,7 +48,7 @@ import AutocompleteWrapperModel from "../../../editor/autocomplete";
 import DocumentPosition from "../../../editor/position";
 import { ICompletion } from "../../../autocomplete/Autocompleter";
 import { AutocompleteAction, getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindingsManager';
-import { replaceableComponent}  from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // matches emoticons which follow the start of a line or whitespace
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');

From f75fb3b3499c8a886b81d5a84e86596c5659b918 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 27 May 2021 15:51:25 +0100
Subject: [PATCH 0133/1270] Add footer and privacy note to the start dm dialog

---
 res/css/views/dialogs/_InviteDialog.scss      | 61 ++++++++++++++++++-
 src/components/views/dialogs/InviteDialog.tsx | 58 ++++++++++++++++--
 src/i18n/strings/en_EN.json                   |  3 +
 3 files changed, 116 insertions(+), 6 deletions(-)

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index d8ff56663a..a33871eca5 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -82,6 +82,14 @@ limitations under the License.
         text-transform: uppercase;
     }
 
+    > p {
+        margin: 0;
+    }
+
+    > span {
+        color: $primary-fg-color;
+    }
+
     .mx_InviteDialog_subname {
         margin-bottom: 10px;
         margin-top: -10px; // HACK: Positioning with margins is bad
@@ -90,6 +98,49 @@ limitations under the License.
     }
 }
 
+.mx_InviteDialog_footer {
+    border-top: 1px solid $input-border-color;
+
+    > h3 {
+        margin: 8px 0;
+        font-size: $font-12px;
+        color: $muted-fg-color;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    .mx_InviteDialog_footer_link {
+        display: flex;
+        justify-content: space-between;
+        border-radius: 4px;
+        border: solid 1px $input-border-color;
+        padding: 8px;
+
+        > a {
+            text-decoration: none;
+            flex-shrink: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .mx_InviteDialog_footer_link_copy {
+        flex-shrink: 0;
+        cursor: pointer;
+        margin-left: 20px;
+        display: inherit;
+
+        > div {
+            mask-image: url($copy-button-url);
+            background-color: $message-action-bar-fg-color;
+            margin-left: 5px;
+            width: 20px;
+            height: 20px;
+            background-repeat: no-repeat;
+        }
+    }
+}
+
 .mx_InviteDialog_roomTile {
     cursor: pointer;
     padding: 5px 10px;
@@ -212,15 +263,21 @@ limitations under the License.
 
 .mx_InviteDialog {
     // Prevent the dialog from jumping around randomly when elements change.
-    height: 590px;
+    height: 600px;
     padding-left: 20px; // the design wants some padding on the left
+    display: flex;
+    flex-direction: column;
+
+    .mx_InviteDialog_content {
+        overflow: hidden;
+    }
 }
 
 .mx_InviteDialog_userSections {
     margin-top: 10px;
     overflow-y: auto;
     padding-right: 45px;
-    height: 455px; // mx_InviteDialog's height minus some for the upper elements
+    height: calc(100% - 190px); // mx_InviteDialog's height minus some for the upper elements
 }
 
 // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index ec9c71ccbe..22763ceda2 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -47,6 +47,11 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../../customisations/Media";
 import {getAddressType} from "../../../UserAddress";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {copyPlaintext, selectText} from "../../../utils/strings";
+import * as ContextMenu from "../../structures/ContextMenu";
+import {toRightOf} from "../../structures/ContextMenu";
+import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -349,6 +354,7 @@ export default class InviteDialog extends React.PureComponent void;
     _debounceTimer: NodeJS.Timeout = null; // actually number because we're in the browser
     _editorRef: any = null;
 
@@ -400,6 +406,12 @@ export default class InviteDialog extends React.PureComponent {
         this.setState({consultFirst: ev.target.checked});
     }
@@ -1232,6 +1244,25 @@ export default class InviteDialog extends React.PureComponent;
         }
 
-
         let title;
         let helpText;
         let buttonText;
         let goButtonFn;
-        let consultSection;
+        let extraSection;
+        let footer;
         let keySharingWarning = ;
 
         const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer);
@@ -1310,6 +1341,24 @@ export default class InviteDialog extends React.PureComponent
+                { _t("Some results may be hidden for privacy.") }
+                
    { _t("If you can’t see who you’re looking for, send them your invite link below.") }
    
+            
    ;
+            const link = makeUserPermalink(MatrixClientPeg.get().getUserId());
+            footer = 
    
+                
    { _t("Or send invite link") }
    
+                
+            
    
         } else if (this.props.kind === KIND_INVITE) {
             const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
             const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom();
@@ -1371,7 +1420,7 @@ export default class InviteDialog extends React.PureComponent
+            footer = 
    
                 
    
-                    {consultSection}
+                    {footer}
                 
    
             
         );
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 1b04ae3b89..9767d7ac76 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2246,6 +2246,9 @@
     "Start a conversation with someone using their name or username (like ).": "Start a conversation with someone using their name or username (like ).",
     "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here": "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here",
     "Go": "Go",
+    "Some results may be hidden for privacy.": "Some results may be hidden for privacy.",
+    "If you can’t see who you’re looking for, send them your invite link below.": "If you can’t see who you’re looking for, send them your invite link below.",
+    "Or send invite link": "Or send invite link",
     "Unnamed Space": "Unnamed Space",
     "Invite to %(roomName)s": "Invite to %(roomName)s",
     "Invite someone using their name, email address, username (like ) or share this space.": "Invite someone using their name, email address, username (like ) or share this space.",

From 2c750fcb7a3bc7317b4b8b0e6013aa3f43e584a8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 28 May 2021 12:48:12 +0100
Subject: [PATCH 0134/1270] Fix overflow issue in suggestion tiles

---
 res/css/views/dialogs/_InviteDialog.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index a33871eca5..4016e7d2e3 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -193,6 +193,7 @@ limitations under the License.
 
     .mx_InviteDialog_roomTile_nameStack {
         display: inline-block;
+        overflow: hidden;
     }
 
     .mx_InviteDialog_roomTile_name {
@@ -208,6 +209,13 @@ limitations under the License.
         margin-left: 7px;
     }
 
+    .mx_InviteDialog_roomTile_name,
+    .mx_InviteDialog_roomTile_userId {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     .mx_InviteDialog_roomTile_time {
         text-align: right;
         font-size: $font-12px;

From ea263937095053bf10ded22c2e0a7ec3da8e7cb5 Mon Sep 17 00:00:00 2001
From: Nique Woodhouse 
Date: Fri, 28 May 2021 13:00:18 +0100
Subject: [PATCH 0135/1270] Styling amends to accommodate the invite dialog
 footer

---
 res/css/views/dialogs/_InviteDialog.scss      | 34 ++++++++++++++-----
 src/components/views/dialogs/InviteDialog.tsx |  4 +--
 src/i18n/strings/en_EN.json                   |  2 +-
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index a33871eca5..bda576c44e 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -73,7 +73,7 @@ limitations under the License.
 }
 
 .mx_InviteDialog_section {
-    padding-bottom: 10px;
+    padding-bottom: 4px;
 
     h3 {
         font-size: $font-12px;
@@ -98,11 +98,25 @@ limitations under the License.
     }
 }
 
+.mx_InviteDialog_section_hidden_suggestions_disclaimer {
+    padding: 8px 0 16px 0;
+    font-size: $font-14px;
+
+    > span {
+        color: $primary-fg-color;
+        font-weight: 600;
+    }
+
+    > p {
+        margin:0;
+    }
+}
+
 .mx_InviteDialog_footer {
     border-top: 1px solid $input-border-color;
 
     > h3 {
-        margin: 8px 0;
+        margin: 12px 0;
         font-size: $font-12px;
         color: $muted-fg-color;
         font-weight: bold;
@@ -113,7 +127,7 @@ limitations under the License.
         display: flex;
         justify-content: space-between;
         border-radius: 4px;
-        border: solid 1px $input-border-color;
+        border: solid 1px $light-fg-color;  
         padding: 8px;
 
         > a {
@@ -274,17 +288,21 @@ limitations under the License.
 }
 
 .mx_InviteDialog_userSections {
-    margin-top: 10px;
+    margin-top: 4px;
     overflow-y: auto;
-    padding-right: 45px;
-    height: calc(100% - 190px); // mx_InviteDialog's height minus some for the upper elements
+    padding: 0px 45px 4px 0px;
+    height: calc(100% - 175px); // mx_InviteDialog's height minus some for the upper  and lower elements
 }
 
+
 // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
 // for the user section gets weird.
-.mx_InviteDialog_helpText,
 .mx_InviteDialog_addressBar {
-    margin-right: 45px;
+    margin: 8px 45px 0px 0px;
+}
+
+.mx_InviteDialog_helpText {
+    margin:0px;
 }
 
 .mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 22763ceda2..081004fa74 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -1341,8 +1341,8 @@ export default class InviteDialog extends React.PureComponent
-                { _t("Some results may be hidden for privacy.") }
+            extraSection = 
    
+                { _t("Some suggestions may be hidden for privacy.") }
                 
    { _t("If you can’t see who you’re looking for, send them your invite link below.") }
    
             
    ;
             const link = makeUserPermalink(MatrixClientPeg.get().getUserId());
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9767d7ac76..8f5082e88a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2246,7 +2246,7 @@
     "Start a conversation with someone using their name or username (like ).": "Start a conversation with someone using their name or username (like ).",
     "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here": "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click here",
     "Go": "Go",
-    "Some results may be hidden for privacy.": "Some results may be hidden for privacy.",
+    "Some suggestions may be hidden for privacy.": "Some suggestions may be hidden for privacy.",
     "If you can’t see who you’re looking for, send them your invite link below.": "If you can’t see who you’re looking for, send them your invite link below.",
     "Or send invite link": "Or send invite link",
     "Unnamed Space": "Unnamed Space",

From 36e43270ca6acd79ad5244ec83b96344fd766592 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 28 May 2021 13:08:05 +0100
Subject: [PATCH 0136/1270] Apply suggestions from code review

---
 res/css/views/dialogs/_InviteDialog.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 0d78589db2..bae086c7d5 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -108,7 +108,7 @@ limitations under the License.
     }
 
     > p {
-        margin:0;
+        margin: 0;
     }
 }
 
@@ -298,7 +298,7 @@ limitations under the License.
 .mx_InviteDialog_userSections {
     margin-top: 4px;
     overflow-y: auto;
-    padding: 0px 45px 4px 0px;
+    padding: 0 45px 4px 0;
     height: calc(100% - 175px); // mx_InviteDialog's height minus some for the upper  and lower elements
 }
 
@@ -306,11 +306,11 @@ limitations under the License.
 // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
 // for the user section gets weird.
 .mx_InviteDialog_addressBar {
-    margin: 8px 45px 0px 0px;
+    margin: 8px 45px 0 0;
 }
 
 .mx_InviteDialog_helpText {
-    margin:0px;
+    margin: 0;
 }
 
 .mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {

From caaef630776a07c69654393a37bd62bb56398566 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 28 May 2021 13:11:48 +0100
Subject: [PATCH 0137/1270] delint1

---
 res/css/views/dialogs/_InviteDialog.scss | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index bae086c7d5..8c0421b989 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -17,6 +17,9 @@ limitations under the License.
 .mx_InviteDialog_addressBar {
     display: flex;
     flex-direction: row;
+    // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
+    // for the user section gets weird.
+    margin: 8px 45px 0 0;
 
     .mx_InviteDialog_editor {
         flex: 1;
@@ -127,7 +130,7 @@ limitations under the License.
         display: flex;
         justify-content: space-between;
         border-radius: 4px;
-        border: solid 1px $light-fg-color;  
+        border: solid 1px $light-fg-color;
         padding: 8px;
 
         > a {
@@ -302,13 +305,6 @@ limitations under the License.
     height: calc(100% - 175px); // mx_InviteDialog's height minus some for the upper  and lower elements
 }
 
-
-// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
-// for the user section gets weird.
-.mx_InviteDialog_addressBar {
-    margin: 8px 45px 0 0;
-}
-
 .mx_InviteDialog_helpText {
     margin: 0;
 }

From 91b7f2551312c405257421221b4d237a3bd96682 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 28 May 2021 13:51:54 +0100
Subject: [PATCH 0138/1270] delint2

---
 src/components/views/dialogs/InviteDialog.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 7cee61d579..ef7a31a177 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -408,9 +408,6 @@ export default class InviteDialog extends React.PureComponent
Date: Sat, 29 May 2021 01:37:19 -0500
Subject: [PATCH 0139/1270] Don't include via when sharing room alias

Signed-off-by: Aaron Raimist 
---
 src/utils/permalinks/Permalinks.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/permalinks/Permalinks.ts b/src/utils/permalinks/Permalinks.ts
index d87c826cc2..cecd79dd53 100644
--- a/src/utils/permalinks/Permalinks.ts
+++ b/src/utils/permalinks/Permalinks.ts
@@ -149,7 +149,7 @@ export class RoomPermalinkCreator {
             // Prefer to use canonical alias for permalink if possible
             const alias = this.room.getCanonicalAlias();
             if (alias) {
-                return getPermalinkConstructor().forRoom(alias, this._serverCandidates);
+                return getPermalinkConstructor().forRoom(alias);
             }
         }
         return getPermalinkConstructor().forRoom(this.roomId, this._serverCandidates);

From ccdd2311f447111f4cf56725834ba08be78abc08 Mon Sep 17 00:00:00 2001
From: Aaron Raimist 
Date: Sat, 29 May 2021 01:38:41 -0500
Subject: [PATCH 0140/1270] Make "share this room" use aliases if possible

Signed-off-by: Aaron Raimist 
---
 src/utils/permalinks/Permalinks.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/permalinks/Permalinks.ts b/src/utils/permalinks/Permalinks.ts
index cecd79dd53..2f268aaa0c 100644
--- a/src/utils/permalinks/Permalinks.ts
+++ b/src/utils/permalinks/Permalinks.ts
@@ -293,16 +293,16 @@ export function makeRoomPermalink(roomId: string): string {
 
     // If the roomId isn't actually a room ID, don't try to list the servers.
     // Aliases are already routable, and don't need extra information.
-    if (roomId[0] !== '!') return getPermalinkConstructor().forRoom(roomId, []);
+    if (roomId[0] !== '!') return getPermalinkConstructor().forShareableRoom(roomId, []);
 
     const client = MatrixClientPeg.get();
     const room = client.getRoom(roomId);
     if (!room) {
-        return getPermalinkConstructor().forRoom(roomId, []);
+        return getPermalinkConstructor().forShareableRoom(roomId, []);
     }
     const permalinkCreator = new RoomPermalinkCreator(room);
     permalinkCreator.load();
-    return permalinkCreator.forRoom();
+    return permalinkCreator.forShareableRoom();
 }
 
 export function makeGroupPermalink(groupId: string): string {

From 73c66c36dd540dbc7da74f6532b9445b8a4124e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sat, 29 May 2021 21:16:02 +0200
Subject: [PATCH 0141/1270] Add basic CallEvent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/CallEvent.tsx | 59 +++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/components/views/messages/CallEvent.tsx

diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
new file mode 100644
index 0000000000..42b3ce6b0f
--- /dev/null
+++ b/src/components/views/messages/CallEvent.tsx
@@ -0,0 +1,59 @@
+/*
+Copyright 2021 Šimon Brandner 
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { _t } from '../../../languageHandler';
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+interface IState {
+
+}
+
+export default class RoomCreate extends React.Component {
+    private isVoice(): boolean {
+        const event = this.props.mxEvent;
+
+        // 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;
+        }
+
+        return isVoice;
+    }
+
+    render() {
+        const event = this.props.mxEvent;
+        const sender = event.sender ? event.sender.name : event.getSender();
+
+        return (
+            
    
+                
    
+                    {sender}
+                
    
+                
    
+                    { this.isVoice() ? _t("Voice call") : _t("Video call") }
+                
    
+            
    
+        );
+    }
+}

From eaa3645238cf9b2f1b65cdd0c57181a702075f3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sat, 29 May 2021 21:16:25 +0200
Subject: [PATCH 0142/1270] Hook up CallEvent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/rooms/EventTile.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 67df5a84ba..71a7e39eba 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -52,10 +52,7 @@ const eventTileTypes = {
     [EventType.Sticker]: 'messages.MessageEvent',
     [EventType.KeyVerificationCancel]: 'messages.MKeyVerificationConclusion',
     [EventType.KeyVerificationDone]: 'messages.MKeyVerificationConclusion',
-    [EventType.CallInvite]: 'messages.TextualEvent',
-    [EventType.CallAnswer]: 'messages.TextualEvent',
-    [EventType.CallHangup]: 'messages.TextualEvent',
-    [EventType.CallReject]: 'messages.TextualEvent',
+    [EventType.CallInvite]: 'messages.CallEvent',
 };
 
 const stateEventTileTypes = {
@@ -821,6 +818,7 @@ export default class EventTile extends React.Component {
             (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) ||
             (eventType === EventType.RoomCreate) ||
             (eventType === EventType.RoomEncryption) ||
+            (eventType === EventType.CallInvite) ||
             (tileHandler === "messages.MJitsiWidgetEvent");
         let isInfoMessage = (
             !isBubbleMessage && eventType !== EventType.RoomMessage &&

From cd67d50a85c668f3d1548875e8526e03852b69c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sat, 29 May 2021 21:22:58 +0200
Subject: [PATCH 0143/1270] Add basic CallEvent styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_CallEvent.scss | 33 ++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 res/css/views/messages/_CallEvent.scss

diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
new file mode 100644
index 0000000000..cc465555e8
--- /dev/null
+++ b/res/css/views/messages/_CallEvent.scss
@@ -0,0 +1,33 @@
+/*
+Copyright 2021 Šimon Brandner 
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CallEvent {
+    display: flex;
+    flex-direction: column;
+
+    background-color: $dark-panel-bg-color;
+    padding: 10px;
+    border-radius: 8px;
+    margin: 10px auto;
+    max-width: 75%;
+    box-sizing: border-box;
+
+    .mx_CallEvent_sender {}
+
+    .mx_CallEvent_type {
+
+    }
+}

From 3ac63b03a63a885ea21e0237a16927dd02a7e5ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sat, 29 May 2021 21:23:15 +0200
Subject: [PATCH 0144/1270] Use styling for CallEvent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/_components.scss                    | 1 +
 src/components/views/messages/CallEvent.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/res/css/_components.scss b/res/css/_components.scss
index c8985cbb51..8a6f9a9ab1 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -156,6 +156,7 @@
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
 @import "./views/messages/_EventTileBubble.scss";
+@import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 42b3ce6b0f..37a624222d 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -46,7 +46,7 @@ export default class RoomCreate extends React.Component {
         const sender = event.sender ? event.sender.name : event.getSender();
 
         return (
-            
    
+            
    
                 
    
                     {sender}
                 
    

From 320ceb50364c356561b4253afa6041c528bd68b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 30 May 2021 12:41:56 +0200
Subject: [PATCH 0145/1270] Add POC TimelineCallEventStore
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/stores/TimelineCallEventStore.ts | 95 ++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 src/stores/TimelineCallEventStore.ts

diff --git a/src/stores/TimelineCallEventStore.ts b/src/stores/TimelineCallEventStore.ts
new file mode 100644
index 0000000000..4c2acbd34c
--- /dev/null
+++ b/src/stores/TimelineCallEventStore.ts
@@ -0,0 +1,95 @@
+/*
+Copyright 2021 Šimon Brandner 
+
+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 EventEmitter from "events";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+const IGNORED_EVENTS = [
+    EventType.CallNegotiate,
+    EventType.CallCandidates,
+];
+
+export enum TimelineCallEventStoreEvent {
+    CallsChanged = "calls_changed"
+}
+
+export enum TimelineCallState {
+    Invite = "invited",
+    Answered = "answered",
+    Ended = "ended",
+    Rejected = "rejected",
+    Unknown = "unknown"
+}
+
+const EVENT_TYPE_TO_TIMELINE_CALL_STATE = new Map([
+    [EventType.CallInvite, TimelineCallState.Invite],
+    [EventType.CallSelectAnswer, TimelineCallState.Answered],
+    [EventType.CallHangup, TimelineCallState.Ended],
+    [EventType.CallReject, TimelineCallState.Rejected],
+]);
+
+export interface TimelineCall {
+    state: TimelineCallState;
+    date: Date;
+}
+
+/**
+ * This gathers call events and creates objects for them accordingly, these can then be retrieved by CallEvent
+ */
+export default class TimelineCallEventStore extends EventEmitter {
+    private calls: Map = new Map();
+    private static internalInstance: TimelineCallEventStore;
+
+    public static get instance(): TimelineCallEventStore {
+        if (!TimelineCallEventStore.internalInstance) {
+            TimelineCallEventStore.internalInstance = new TimelineCallEventStore;
+        }
+
+        return TimelineCallEventStore.internalInstance;
+    }
+
+    public clear() {
+        this.calls.clear();
+    }
+
+    public getInfoByCallId(callId: string): TimelineCall {
+        return this.calls.get(callId);
+    }
+
+    private getCallState(type: EventType): TimelineCallState {
+        return EVENT_TYPE_TO_TIMELINE_CALL_STATE.get(type);
+    }
+
+    public addEvent(event: MatrixEvent) {
+        if (IGNORED_EVENTS.includes(event.getType())) return;
+
+        const callId = event.getContent().call_id;
+        const date = event.getDate();
+        const state = this.getCallState(event.getType());
+
+
+        if (date < this.calls.get(callId)?.date) return;
+        if (!state) return;
+
+        this.calls.set(callId, {
+            state: state,
+            date: date,
+        });
+
+        this.emit(TimelineCallEventStoreEvent.CallsChanged, this.calls)
+    }
+}

From 4ae92d8adc4b5d27695c3fccb0486f4c21bc0c14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 30 May 2021 12:42:23 +0200
Subject: [PATCH 0146/1270] Hook up TimelineCallEventStore and add Avatar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_CallEvent.scss      | 14 ++++--
 src/components/structures/MessagePanel.js   |  3 ++
 src/components/views/messages/CallEvent.tsx | 54 ++++++++++++++++++---
 3 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index cc465555e8..dfff484734 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -16,7 +16,8 @@ limitations under the License.
 
 .mx_CallEvent {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: center;
 
     background-color: $dark-panel-bg-color;
     padding: 10px;
@@ -25,9 +26,16 @@ limitations under the License.
     max-width: 75%;
     box-sizing: border-box;
 
-    .mx_CallEvent_sender {}
+    .mx_CallEvent_content {
+        display: flex;
+        flex-direction: column;
 
-    .mx_CallEvent_type {
+        .mx_CallEvent_sender {
 
+        }
+
+        .mx_CallEvent_type {
+
+        }
     }
 }
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index d1071a9e19..e2bb3135cf 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -26,6 +26,7 @@ import * as sdk from '../../index';
 
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
+import TimelineCallEventStore from "../../stores/TimelineCallEventStore";
 import {Layout, LayoutPropType} from "../../settings/Layout";
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
@@ -529,6 +530,8 @@ export default class MessagePanel extends React.Component {
             const last = (mxEv === lastShownEvent);
             const {nextEvent, nextTile} = this._getNextEventInfo(this.props.events, i);
 
+            TimelineCallEventStore.instance.addEvent(mxEv);
+
             if (grouper) {
                 if (grouper.shouldGroup(mxEv)) {
                     grouper.add(mxEv);
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 37a624222d..e8e6642776 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -18,16 +18,45 @@ import React from 'react';
 
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from '../../../languageHandler';
+import TimelineCallEventStore, {
+    TimelineCall as TimelineCallSt,
+    TimelineCallEventStoreEvent,
+    TimelineCallState,
+} from "../../../stores/TimelineCallEventStore";
+import MemberAvatar from '../avatars/MemberAvatar';
 
 interface IProps {
     mxEvent: MatrixEvent;
 }
 
 interface IState {
-
+    callState: TimelineCallState;
 }
 
-export default class RoomCreate extends React.Component {
+export default class CallEvent extends React.Component {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            callState: null,
+        }
+    }
+
+    componentDidMount() {
+        TimelineCallEventStore.instance.addListener(TimelineCallEventStoreEvent.CallsChanged, this.onCallsChanged);
+    }
+
+    componentWillUnmount() {
+        TimelineCallEventStore.instance.removeListener(TimelineCallEventStoreEvent.CallsChanged, this.onCallsChanged);
+    }
+
+    private onCallsChanged = (calls: Map) => {
+        const callId = this.props.mxEvent.getContent().call_id;
+        const call = calls.get(callId);
+        if (!call) return;
+        this.setState({callState: call.state});
+    }
+
     private isVoice(): boolean {
         const event = this.props.mxEvent;
 
@@ -44,14 +73,23 @@ export default class RoomCreate extends React.Component {
     render() {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
+        const state = this.state.callState;
 
         return (
-            
    
-                
    
-                    {sender}
-                
    
-                
    
-                    { this.isVoice() ? _t("Voice call") : _t("Video call") }
+            
    
+                
+                
    
+                    
    
+                        {sender}
+                    
    
+                    
    
+                        { this.isVoice() ? _t("Voice call") : _t("Video call") }
+                        { state ? state : TimelineCallState.Unknown }
+                    
    
                 
    
             
    
         );

From 31d16d4277d2b8cd7d1821d95db47d81320f4e20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 30 May 2021 15:06:54 +0200
Subject: [PATCH 0147/1270] Fix ignoring events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/stores/TimelineCallEventStore.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/stores/TimelineCallEventStore.ts b/src/stores/TimelineCallEventStore.ts
index 4c2acbd34c..4689183adf 100644
--- a/src/stores/TimelineCallEventStore.ts
+++ b/src/stores/TimelineCallEventStore.ts
@@ -18,11 +18,6 @@ import EventEmitter from "events";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-const IGNORED_EVENTS = [
-    EventType.CallNegotiate,
-    EventType.CallCandidates,
-];
-
 export enum TimelineCallEventStoreEvent {
     CallsChanged = "calls_changed"
 }
@@ -75,7 +70,7 @@ export default class TimelineCallEventStore extends EventEmitter {
     }
 
     public addEvent(event: MatrixEvent) {
-        if (IGNORED_EVENTS.includes(event.getType())) return;
+        if (!Array.from(EVENT_TYPE_TO_TIMELINE_CALL_STATE.keys()).includes(event.getType())) return;
 
         const callId = event.getContent().call_id;
         const date = event.getDate();

From 8dc0e2a7abd52c11f7a8253a56879b89b3c6d0ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 30 May 2021 16:26:46 +0200
Subject: [PATCH 0148/1270] Add CallEventGrouper as a replacement for
 TimeLineCallEventStore
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../structures/CallEventGrouper.tsx           | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/components/structures/CallEventGrouper.tsx

diff --git a/src/components/structures/CallEventGrouper.tsx b/src/components/structures/CallEventGrouper.tsx
new file mode 100644
index 0000000000..5bc2fb4a03
--- /dev/null
+++ b/src/components/structures/CallEventGrouper.tsx
@@ -0,0 +1,53 @@
+/*
+Copyright 2021 Šimon Brandner 
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+export interface TimelineCallState {
+    callId?: string;
+    isVoice: boolean;
+}
+
+export default class CallEventGrouper {
+    invite: MatrixEvent;
+
+    private isVoice(): boolean {
+        const invite = this.invite;
+
+        // FIXME: Find a better way to determine this from the event?
+        let isVoice = true;
+        if (
+            invite.getContent().offer && invite.getContent().offer.sdp &&
+            invite.getContent().offer.sdp.indexOf('m=video') !== -1
+        ) {
+            isVoice = false;
+        }
+
+        return isVoice;
+    }
+
+    public add(event: MatrixEvent) {
+        if (event.getType() === EventType.CallInvite) this.invite = event;
+    }
+
+    public getState(): TimelineCallState {
+        return {
+            isVoice: this.isVoice(),
+        }
+    }
+}

From 85bcf8ed521e380718f6f018a7da75ee3b0c9208 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 30 May 2021 16:28:30 +0200
Subject: [PATCH 0149/1270] Hook up CallEventGrouper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/MessagePanel.js   | 23 +++++-
 src/components/views/messages/CallEvent.tsx | 51 +-----------
 src/components/views/rooms/EventTile.tsx    |  5 ++
 src/stores/TimelineCallEventStore.ts        | 90 ---------------------
 4 files changed, 29 insertions(+), 140 deletions(-)
 delete mode 100644 src/stores/TimelineCallEventStore.ts

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index e2bb3135cf..ab5fe01e47 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -26,7 +26,6 @@ import * as sdk from '../../index';
 
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
-import TimelineCallEventStore from "../../stores/TimelineCallEventStore";
 import {Layout, LayoutPropType} from "../../settings/Layout";
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
@@ -36,6 +35,7 @@ import DMRoomMap from "../../utils/DMRoomMap";
 import NewRoomIntro from "../views/rooms/NewRoomIntro";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import defaultDispatcher from '../../dispatcher/dispatcher';
+import CallEventGrouper from "./CallEventGrouper";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -210,6 +210,9 @@ export default class MessagePanel extends React.Component {
 
         this._showTypingNotificationsWatcherRef =
             SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
+
+        // A map of 
+        this._callEventGroupers = new Map();
     }
 
     componentDidMount() {
@@ -530,7 +533,20 @@ export default class MessagePanel extends React.Component {
             const last = (mxEv === lastShownEvent);
             const {nextEvent, nextTile} = this._getNextEventInfo(this.props.events, i);
 
-            TimelineCallEventStore.instance.addEvent(mxEv);
+            if (
+                mxEv.getType().indexOf("m.call.") === 0 ||
+                mxEv.getType().indexOf("org.matrix.call.") === 0
+            ) {
+                const callId = mxEv.getContent().call_id;
+                if (this._callEventGroupers.has(callId)) {
+                    this._callEventGroupers.get(callId).add(mxEv);
+                } else {
+                    const callEventGrouper = new CallEventGrouper();
+                    callEventGrouper.add(mxEv);
+
+                    this._callEventGroupers.set(callId, callEventGrouper);
+                }
+            }
 
             if (grouper) {
                 if (grouper.shouldGroup(mxEv)) {
@@ -646,6 +662,8 @@ export default class MessagePanel extends React.Component {
         // it's successful: we received it.
         isLastSuccessful = isLastSuccessful && mxEv.getSender() === MatrixClientPeg.get().getUserId();
 
+        const callState = this._callEventGroupers.get(mxEv.getContent().call_id)?.getState();
+
         // use txnId as key if available so that we don't remount during sending
         ret.push(
             
  • 
                 
             
    • ,
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index e8e6642776..182645c048 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -18,62 +18,18 @@ import React from 'react';
 
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from '../../../languageHandler';
-import TimelineCallEventStore, {
-    TimelineCall as TimelineCallSt,
-    TimelineCallEventStoreEvent,
-    TimelineCallState,
-} from "../../../stores/TimelineCallEventStore";
 import MemberAvatar from '../avatars/MemberAvatar';
+import { TimelineCallState } from '../../structures/CallEventGrouper';
 
 interface IProps {
     mxEvent: MatrixEvent;
-}
-
-interface IState {
     callState: TimelineCallState;
 }
 
-export default class CallEvent extends React.Component {
-    constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            callState: null,
-        }
-    }
-
-    componentDidMount() {
-        TimelineCallEventStore.instance.addListener(TimelineCallEventStoreEvent.CallsChanged, this.onCallsChanged);
-    }
-
-    componentWillUnmount() {
-        TimelineCallEventStore.instance.removeListener(TimelineCallEventStoreEvent.CallsChanged, this.onCallsChanged);
-    }
-
-    private onCallsChanged = (calls: Map) => {
-        const callId = this.props.mxEvent.getContent().call_id;
-        const call = calls.get(callId);
-        if (!call) return;
-        this.setState({callState: call.state});
-    }
-
-    private isVoice(): boolean {
-        const event = this.props.mxEvent;
-
-        // 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;
-        }
-
-        return isVoice;
-    }
-
+export default class CallEvent extends React.Component {
     render() {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
-        const state = this.state.callState;
 
         return (
             
    
@@ -87,8 +43,7 @@ export default class CallEvent extends React.Component {
                         {sender}
                     
    
                     
    
-                        { this.isVoice() ? _t("Voice call") : _t("Video call") }
-                        { state ? state : TimelineCallState.Unknown }
+                        { this.props.callState.isVoice ? _t("Voice call") : _t("Video call") }
                     
    
                 
    
             
    
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 71a7e39eba..eb76354975 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -46,6 +46,7 @@ import { EditorStateTransfer } from "../../../utils/EditorStateTransfer";
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
 import NotificationBadge from "./NotificationBadge";
+import { TimelineCallState } from "../../structures/CallEventGrouper";
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -274,6 +275,9 @@ interface IProps {
 
     // Helper to build permalinks for the room
     permalinkCreator?: RoomPermalinkCreator;
+
+    // CallEventGrouper for this event
+    callState?: TimelineCallState;
 }
 
 interface IState {
@@ -1139,6 +1143,7 @@ export default class EventTile extends React.Component {
                                 showUrlPreview={this.props.showUrlPreview}
                                 permalinkCreator={this.props.permalinkCreator}
                                 onHeightChanged={this.props.onHeightChanged}
+                                callState={this.props.callState}
                             />
                             { keyRequestInfo }
                             { reactionsRow }
diff --git a/src/stores/TimelineCallEventStore.ts b/src/stores/TimelineCallEventStore.ts
deleted file mode 100644
index 4689183adf..0000000000
--- a/src/stores/TimelineCallEventStore.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
-Copyright 2021 Šimon Brandner 
-
-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 EventEmitter from "events";
-import { EventType } from "matrix-js-sdk/src/@types/event";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-
-export enum TimelineCallEventStoreEvent {
-    CallsChanged = "calls_changed"
-}
-
-export enum TimelineCallState {
-    Invite = "invited",
-    Answered = "answered",
-    Ended = "ended",
-    Rejected = "rejected",
-    Unknown = "unknown"
-}
-
-const EVENT_TYPE_TO_TIMELINE_CALL_STATE = new Map([
-    [EventType.CallInvite, TimelineCallState.Invite],
-    [EventType.CallSelectAnswer, TimelineCallState.Answered],
-    [EventType.CallHangup, TimelineCallState.Ended],
-    [EventType.CallReject, TimelineCallState.Rejected],
-]);
-
-export interface TimelineCall {
-    state: TimelineCallState;
-    date: Date;
-}
-
-/**
- * This gathers call events and creates objects for them accordingly, these can then be retrieved by CallEvent
- */
-export default class TimelineCallEventStore extends EventEmitter {
-    private calls: Map = new Map();
-    private static internalInstance: TimelineCallEventStore;
-
-    public static get instance(): TimelineCallEventStore {
-        if (!TimelineCallEventStore.internalInstance) {
-            TimelineCallEventStore.internalInstance = new TimelineCallEventStore;
-        }
-
-        return TimelineCallEventStore.internalInstance;
-    }
-
-    public clear() {
-        this.calls.clear();
-    }
-
-    public getInfoByCallId(callId: string): TimelineCall {
-        return this.calls.get(callId);
-    }
-
-    private getCallState(type: EventType): TimelineCallState {
-        return EVENT_TYPE_TO_TIMELINE_CALL_STATE.get(type);
-    }
-
-    public addEvent(event: MatrixEvent) {
-        if (!Array.from(EVENT_TYPE_TO_TIMELINE_CALL_STATE.keys()).includes(event.getType())) return;
-
-        const callId = event.getContent().call_id;
-        const date = event.getDate();
-        const state = this.getCallState(event.getType());
-
-
-        if (date < this.calls.get(callId)?.date) return;
-        if (!state) return;
-
-        this.calls.set(callId, {
-            state: state,
-            date: date,
-        });
-
-        this.emit(TimelineCallEventStoreEvent.CallsChanged, this.calls)
-    }
-}

From 5e8df0372490b6ce594642c4789d3553184030e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 30 May 2021 16:56:53 +0200
Subject: [PATCH 0150/1270] Fix styling a bit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_CallEvent.scss      | 9 ++++-----
 src/components/views/messages/CallEvent.tsx | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index dfff484734..49ff5f08c0 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -29,13 +29,12 @@ limitations under the License.
     .mx_CallEvent_content {
         display: flex;
         flex-direction: column;
-
-        .mx_CallEvent_sender {
-
-        }
+        margin-right: 10px; // To match mx_CallEvent
 
         .mx_CallEvent_type {
-
+            font-weight: 400;
+            color: gray;
+            line-height: $font-14px;
         }
     }
 }
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 182645c048..e419e87bd2 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -39,7 +39,7 @@ export default class CallEvent extends React.Component {
                     height={32}
                 />
                 
    
-                    
    
+                    
    
                         {sender}
                     
    
                     
    

From f94230c29205e1fb0847641045ce936ca9c3d02e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 30 May 2021 16:59:24 +0200
Subject: [PATCH 0151/1270] Fix css
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_CallEvent.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index 49ff5f08c0..907e99d3ea 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -29,7 +29,7 @@ limitations under the License.
     .mx_CallEvent_content {
         display: flex;
         flex-direction: column;
-        margin-right: 10px; // To match mx_CallEvent
+        margin-left: 10px; // To match mx_CallEvent
 
         .mx_CallEvent_type {
             font-weight: 400;

From 20c5735e96cc6d2ef338bf3f42ea70bec60ae535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 30 May 2021 17:00:33 +0200
Subject: [PATCH 0152/1270] Add getCallById()
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/CallHandler.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx
index 90a631ab7f..c9a237f300 100644
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@@ -301,6 +301,12 @@ export default class CallHandler extends EventEmitter {
         }, true);
     }
 
+    public getCallById(callId: string): MatrixCall {
+        for (const call of this.calls.values()) {
+            if (call.callId === callId) return call;
+        }
+    }
+
     getCallForRoom(roomId: string): MatrixCall {
         return this.calls.get(roomId) || null;
     }

From d05b1798b80266ea9ce7e05899d084d92cb938f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 30 May 2021 19:35:51 +0200
Subject: [PATCH 0153/1270] Add callId
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/CallEventGrouper.tsx b/src/components/structures/CallEventGrouper.tsx
index 5bc2fb4a03..3b6d18310c 100644
--- a/src/components/structures/CallEventGrouper.tsx
+++ b/src/components/structures/CallEventGrouper.tsx
@@ -19,12 +19,13 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 export interface TimelineCallState {
-    callId?: string;
+    callId: string;
     isVoice: boolean;
 }
 
 export default class CallEventGrouper {
     invite: MatrixEvent;
+    callId: string;
 
     private isVoice(): boolean {
         const invite = this.invite;
@@ -43,11 +44,13 @@ export default class CallEventGrouper {
 
     public add(event: MatrixEvent) {
         if (event.getType() === EventType.CallInvite) this.invite = event;
+        this.callId = event.getContent().call_id;
     }
 
     public getState(): TimelineCallState {
         return {
             isVoice: this.isVoice(),
+            callId: this.callId,
         }
     }
 }

From 5e4a10ab84d56f3b427738b17834cd34b997094d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 07:55:55 +0200
Subject: [PATCH 0154/1270] Reorganize HTML
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_CallEvent.scss      | 19 +++++++++------
 src/components/views/messages/CallEvent.tsx | 27 ++++++++++++---------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index 907e99d3ea..683cbb7331 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -26,15 +26,20 @@ limitations under the License.
     max-width: 75%;
     box-sizing: border-box;
 
-    .mx_CallEvent_content {
+    .mx_CallEvent_info {
         display: flex;
-        flex-direction: column;
-        margin-left: 10px; // To match mx_CallEvent
+        flex-direction: row;
 
-        .mx_CallEvent_type {
-            font-weight: 400;
-            color: gray;
-            line-height: $font-14px;
+        .mx_CallEvent_info_basic {
+            display: flex;
+            flex-direction: column;
+            margin-left: 10px; // To match mx_CallEvent
+
+            .mx_CallEvent_type {
+                font-weight: 400;
+                color: gray;
+                line-height: $font-14px;
+            }
         }
     }
 }
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index e419e87bd2..05b046f939 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -31,21 +31,26 @@ export default class CallEvent extends React.Component {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
 
+        let content;
+
         return (
             
    
-                
-                
    
-                    
    
-                        {sender}
-                    
    
-                    
    
-                        { this.props.callState.isVoice ? _t("Voice call") : _t("Video call") }
+                
    
+                    
+                    
    
+                        
    
+                            { sender }
+                        
    
+                        
    
+                            { this.props.callState.isVoice ? _t("Voice call") : _t("Video call") }
+                        
    
                     
    
                 
    
+                { content }
             
    
         );
     }

From 8eb24d0d747ba9f5c20ad1ce2a05a7ca0593d46f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 08:01:34 +0200
Subject: [PATCH 0155/1270] Rename callState to timelineCallState
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/CallEvent.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 05b046f939..68e153546f 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -23,7 +23,8 @@ import { TimelineCallState } from '../../structures/CallEventGrouper';
 
 interface IProps {
     mxEvent: MatrixEvent;
-    callState: TimelineCallState;
+    timelineCallState: TimelineCallState;
+}
 }
 
 export default class CallEvent extends React.Component {
@@ -46,7 +47,7 @@ export default class CallEvent extends React.Component {
                             { sender }
                         
    
                         
    
-                            { this.props.callState.isVoice ? _t("Voice call") : _t("Video call") }
+                            { this.props.timelineCallState.isVoice ? _t("Voice call") : _t("Video call") }
                         
    
                     
    
                 
    

From dac741d8b9b3cc6263d0e4f6068adf39663285a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 09:30:37 +0200
Subject: [PATCH 0156/1270] Another rewrite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 90 +++++++++++++++++++
 .../structures/CallEventGrouper.tsx           | 56 ------------
 src/components/structures/MessagePanel.js     |  4 +-
 src/components/views/messages/CallEvent.tsx   | 34 +++++--
 src/components/views/rooms/EventTile.tsx      |  6 +-
 5 files changed, 124 insertions(+), 66 deletions(-)
 create mode 100644 src/components/structures/CallEventGrouper.ts
 delete mode 100644 src/components/structures/CallEventGrouper.tsx

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
new file mode 100644
index 0000000000..41e67f580d
--- /dev/null
+++ b/src/components/structures/CallEventGrouper.ts
@@ -0,0 +1,90 @@
+/*
+Copyright 2021 Šimon Brandner 
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { CallEvent, CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import CallHandler from '../../CallHandler';
+import { EventEmitter } from 'events';
+
+export enum CallEventGrouperState {
+    Incoming = "incoming",
+    Ended = "ended",
+}
+
+export enum CallEventGrouperEvent {
+    StateChanged = "state_changed",
+}
+
+export default class CallEventGrouper extends EventEmitter {
+    invite: MatrixEvent;
+    call: MatrixCall;
+    state: CallEventGrouperState;
+
+    public answerCall() {
+        this.call?.answer();
+    }
+
+    public rejectCall() {
+        this.call?.reject();
+    }
+
+    public callBack() {
+
+    }
+
+    public isVoice(): boolean {
+        const invite = this.invite;
+
+        // FIXME: Find a better way to determine this from the event?
+        let isVoice = true;
+        if (
+            invite.getContent().offer && invite.getContent().offer.sdp &&
+            invite.getContent().offer.sdp.indexOf('m=video') !== -1
+        ) {
+            isVoice = false;
+        }
+
+        return isVoice;
+    }
+
+    public getState() {
+        return this.state;
+    }
+
+    private setCallListeners() {
+        this.call.addListener(CallEvent.State, this.setCallState);
+    }
+
+    private setCallState = () => {
+        if (this.call?.state === CallState.Ringing) {
+            this.state = CallEventGrouperState.Incoming;
+        }
+        this.emit(CallEventGrouperEvent.StateChanged, this.state);
+    }
+
+    public add(event: MatrixEvent) {
+        if (event.getType() === EventType.CallInvite) this.invite = event;
+
+        if (this.call) return;
+        const callId = event.getContent().call_id;
+        this.call = CallHandler.sharedInstance().getCallById(callId);
+        if (!this.call) return;
+        this.setCallListeners();
+        this.setCallState();
+    }
+}
diff --git a/src/components/structures/CallEventGrouper.tsx b/src/components/structures/CallEventGrouper.tsx
deleted file mode 100644
index 3b6d18310c..0000000000
--- a/src/components/structures/CallEventGrouper.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
-Copyright 2021 Šimon Brandner 
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-
-import { EventType } from "matrix-js-sdk/src/@types/event";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-
-export interface TimelineCallState {
-    callId: string;
-    isVoice: boolean;
-}
-
-export default class CallEventGrouper {
-    invite: MatrixEvent;
-    callId: string;
-
-    private isVoice(): boolean {
-        const invite = this.invite;
-
-        // FIXME: Find a better way to determine this from the event?
-        let isVoice = true;
-        if (
-            invite.getContent().offer && invite.getContent().offer.sdp &&
-            invite.getContent().offer.sdp.indexOf('m=video') !== -1
-        ) {
-            isVoice = false;
-        }
-
-        return isVoice;
-    }
-
-    public add(event: MatrixEvent) {
-        if (event.getType() === EventType.CallInvite) this.invite = event;
-        this.callId = event.getContent().call_id;
-    }
-
-    public getState(): TimelineCallState {
-        return {
-            isVoice: this.isVoice(),
-            callId: this.callId,
-        }
-    }
-}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index ab5fe01e47..b6d9f619c8 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -662,7 +662,7 @@ export default class MessagePanel extends React.Component {
         // it's successful: we received it.
         isLastSuccessful = isLastSuccessful && mxEv.getSender() === MatrixClientPeg.get().getUserId();
 
-        const callState = this._callEventGroupers.get(mxEv.getContent().call_id)?.getState();
+        const callEventGrouper = this._callEventGroupers.get(mxEv.getContent().call_id);
 
         // use txnId as key if available so that we don't remount during sending
         ret.push(
@@ -696,7 +696,7 @@ export default class MessagePanel extends React.Component {
                         layout={this.props.layout}
                         enableFlair={this.props.enableFlair}
                         showReadReceipts={this.props.showReadReceipts}
-                        callState={callState}
+                        callEventGrouper={callEventGrouper}
                     />
                 
             ,
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 68e153546f..88b1498272 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -19,15 +19,39 @@ import React from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
-import { TimelineCallState } from '../../structures/CallEventGrouper';
+import CallEventGrouper, { CallEventGrouperEvent, CallEventGrouperState } from '../../structures/CallEventGrouper';
+import FormButton from '../elements/FormButton';
 
 interface IProps {
     mxEvent: MatrixEvent;
-    timelineCallState: TimelineCallState;
-}
+    callEventGrouper: CallEventGrouper;
 }
 
-export default class CallEvent extends React.Component {
+interface IState {
+    callState: CallEventGrouperState;
+}
+
+export default class CallEvent extends React.Component {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            callState: this.props.callEventGrouper.getState(),
+        }
+    }
+
+    componentDidMount() {
+        this.props.callEventGrouper.addListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
+    }
+
+    componentWillUnmount() {
+        this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
+    }
+
+    private onStateChanged = (newState: CallEventGrouperState) => {
+        this.setState({callState: newState});
+    }
+
     render() {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
@@ -47,7 +71,7 @@ export default class CallEvent extends React.Component {
                             { sender }
                         
    
                         
    
-                            { this.props.timelineCallState.isVoice ? _t("Voice call") : _t("Video call") }
+                            { this.props.callEventGrouper.isVoice() ? _t("Voice call") : _t("Video call") }
                         
    
                     
    
                 
    
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index eb76354975..930be62fbf 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -46,7 +46,7 @@ import { EditorStateTransfer } from "../../../utils/EditorStateTransfer";
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
 import NotificationBadge from "./NotificationBadge";
-import { TimelineCallState } from "../../structures/CallEventGrouper";
+import CallEventGrouper from "../../structures/CallEventGrouper";
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -277,7 +277,7 @@ interface IProps {
     permalinkCreator?: RoomPermalinkCreator;
 
     // CallEventGrouper for this event
-    callState?: TimelineCallState;
+    callEventGrouper?: CallEventGrouper;
 }
 
 interface IState {
@@ -1143,7 +1143,7 @@ export default class EventTile extends React.Component {
                                 showUrlPreview={this.props.showUrlPreview}
                                 permalinkCreator={this.props.permalinkCreator}
                                 onHeightChanged={this.props.onHeightChanged}
-                                callState={this.props.callState}
+                                callEventGrouper={this.props.callEventGrouper}
                             />
                             { keyRequestInfo }
                             { reactionsRow }

From 30365ca1ad2293562cc41ae926b483555353b6a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 10:03:17 +0200
Subject: [PATCH 0157/1270] Allow picking up calls from the timeline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts |  6 +++---
 src/components/views/messages/CallEvent.tsx   | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 41e67f580d..ab89e48ec6 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -35,15 +35,15 @@ export default class CallEventGrouper extends EventEmitter {
     call: MatrixCall;
     state: CallEventGrouperState;
 
-    public answerCall() {
+    public answerCall = () => {
         this.call?.answer();
     }
 
-    public rejectCall() {
+    public rejectCall = () => {
         this.call?.reject();
     }
 
-    public callBack() {
+    public callBack = () => {
 
     }
 
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 88b1498272..0806934420 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -57,6 +57,25 @@ export default class CallEvent extends React.Component {
         const sender = event.sender ? event.sender.name : event.getSender();
 
         let content;
+        if (this.state.callState === CallEventGrouperState.Incoming) {
+            content = (
+                
    
+                    
+                    
    
+                    
+                
    
+            );
+        }
 
         return (
             
    

From 86402e9788fa5b9fb6f65db8263ced9e241a2387 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 10:03:23 +0200
Subject: [PATCH 0158/1270] Add some styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_CallEvent.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index 683cbb7331..e41cb7becf 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -18,6 +18,7 @@ limitations under the License.
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: space-between;
 
     background-color: $dark-panel-bg-color;
     padding: 10px;
@@ -29,6 +30,7 @@ limitations under the License.
     .mx_CallEvent_info {
         display: flex;
         flex-direction: row;
+        align-items: center;
 
         .mx_CallEvent_info_basic {
             display: flex;
@@ -42,4 +44,9 @@ limitations under the License.
             }
         }
     }
+
+    .mx_CallEvent_content {
+        display: flex;
+        flex-direction: row;
+    }
 }

From 6b72c13e34d8a3ea5d06d5823603f270b496d940 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 10:06:03 +0200
Subject: [PATCH 0159/1270] Add some call states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index ab89e48ec6..2c08d7b047 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -23,6 +23,11 @@ import { EventEmitter } from 'events';
 
 export enum CallEventGrouperState {
     Incoming = "incoming",
+    Connecting = "connecting",
+    Connected = "connected",
+    Ringing = "ringing",
+    Missed = "missed",
+    Rejected = "rejected",
     Ended = "ended",
 }
 

From f96e25d833d04cdfa2c3fb53e3b5560e392d86e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 10:11:48 +0200
Subject: [PATCH 0160/1270] Simply use call states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 16 ++--------------
 src/components/views/messages/CallEvent.tsx   |  7 ++++---
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 2c08d7b047..5184ddc1bb 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -21,16 +21,6 @@ import { CallEvent, CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call"
 import CallHandler from '../../CallHandler';
 import { EventEmitter } from 'events';
 
-export enum CallEventGrouperState {
-    Incoming = "incoming",
-    Connecting = "connecting",
-    Connected = "connected",
-    Ringing = "ringing",
-    Missed = "missed",
-    Rejected = "rejected",
-    Ended = "ended",
-}
-
 export enum CallEventGrouperEvent {
     StateChanged = "state_changed",
 }
@@ -38,7 +28,7 @@ export enum CallEventGrouperEvent {
 export default class CallEventGrouper extends EventEmitter {
     invite: MatrixEvent;
     call: MatrixCall;
-    state: CallEventGrouperState;
+    state: CallState;
 
     public answerCall = () => {
         this.call?.answer();
@@ -76,9 +66,7 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     private setCallState = () => {
-        if (this.call?.state === CallState.Ringing) {
-            this.state = CallEventGrouperState.Incoming;
-        }
+        this.state = this.call.state
         this.emit(CallEventGrouperEvent.StateChanged, this.state);
     }
 
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 0806934420..c4126639a7 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -19,8 +19,9 @@ import React from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
-import CallEventGrouper, { CallEventGrouperEvent, CallEventGrouperState } from '../../structures/CallEventGrouper';
+import CallEventGrouper, { CallEventGrouperEvent } from '../../structures/CallEventGrouper';
 import FormButton from '../elements/FormButton';
+import { CallState } from 'matrix-js-sdk/src/webrtc/call';
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -28,7 +29,7 @@ interface IProps {
 }
 
 interface IState {
-    callState: CallEventGrouperState;
+    callState: CallState;
 }
 
 export default class CallEvent extends React.Component {
@@ -57,7 +58,7 @@ export default class CallEvent extends React.Component {
         const sender = event.sender ? event.sender.name : event.getSender();
 
         let content;
-        if (this.state.callState === CallEventGrouperState.Incoming) {
+        if (this.state.callState === CallState.Ringing) {
             content = (
                 
    
                     
Date: Tue, 1 Jun 2021 10:33:44 +0200
Subject: [PATCH 0161/1270] Manage some more call states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 14 +++++++++--
 src/components/views/messages/CallEvent.tsx   | 23 +++++++++++++++++--
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 5184ddc1bb..c654c08636 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -25,6 +25,13 @@ export enum CallEventGrouperEvent {
     StateChanged = "state_changed",
 }
 
+const SUPPORTED_STATES = [
+    CallState.Connected,
+    CallState.Connecting,
+    CallState.Ended,
+    CallState.Ringing,
+];
+
 export default class CallEventGrouper extends EventEmitter {
     invite: MatrixEvent;
     call: MatrixCall;
@@ -66,12 +73,15 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     private setCallState = () => {
-        this.state = this.call.state
-        this.emit(CallEventGrouperEvent.StateChanged, this.state);
+        if (SUPPORTED_STATES.includes(this.call.state)) {
+            this.state = this.call.state;
+            this.emit(CallEventGrouperEvent.StateChanged, this.state);
+        }
     }
 
     public add(event: MatrixEvent) {
         if (event.getType() === EventType.CallInvite) this.invite = event;
+        if (event.getType() === EventType.CallHangup) this.state = CallState.Ended;
 
         if (this.call) return;
         const callId = event.getContent().call_id;
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index c4126639a7..d5f26389c2 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -32,6 +32,12 @@ interface IState {
     callState: CallState;
 }
 
+const TEXTUAL_STATES = new Map([
+    [CallState.Connected, _t("Connected")],
+    [CallState.Connecting, _t("Connecting")],
+    [CallState.Ended, _t("This call has ended")],
+]);
+
 export default class CallEvent extends React.Component {
     constructor(props: IProps) {
         super(props);
@@ -49,7 +55,7 @@ export default class CallEvent extends React.Component {
         this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
     }
 
-    private onStateChanged = (newState: CallEventGrouperState) => {
+    private onStateChanged = (newState: CallState) => {
         this.setState({callState: newState});
     }
 
@@ -57,8 +63,9 @@ export default class CallEvent extends React.Component {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
 
+        const state = this.state.callState;
         let content;
-        if (this.state.callState === CallState.Ringing) {
+        if (state === CallState.Ringing) {
             content = (
                 
    
                      {
                     />
                 
    
             );
+        } else if (Array.from(TEXTUAL_STATES.keys()).includes(state)) {
+            content = (
+                
    
+                    { TEXTUAL_STATES.get(state) }
+                
    
+            );
+        } else {
+            content = (
+                
    
+                    { _t("The call is in an unknown state!") }
+                
    
+            );
         }
 
         return (

From 8c67b96a0f3672edaea4e283b62f1caa777015e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 10:42:21 +0200
Subject: [PATCH 0162/1270] Save all events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index c654c08636..84f178b75f 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -33,10 +33,14 @@ const SUPPORTED_STATES = [
 ];
 
 export default class CallEventGrouper extends EventEmitter {
-    invite: MatrixEvent;
+    events: Array = [];
     call: MatrixCall;
     state: CallState;
 
+    private get invite(): MatrixEvent {
+        return this.events.find((event) => event.getType() === EventType.CallInvite);
+    }
+
     public answerCall = () => {
         this.call?.answer();
     }
@@ -80,10 +84,11 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     public add(event: MatrixEvent) {
-        if (event.getType() === EventType.CallInvite) this.invite = event;
-        if (event.getType() === EventType.CallHangup) this.state = CallState.Ended;
+        this.events.push(event);
+        const type = event.getType();
 
-        if (this.call) return;
+        if (type === EventType.CallHangup) this.state = CallState.Ended;
+        else if (type === EventType.CallReject) this.state = CallState.Ended;
         const callId = event.getContent().call_id;
         this.call = CallHandler.sharedInstance().getCallById(callId);
         if (!this.call) return;

From 67a052e46ae9e40a175d84f9a702db8bd18e491c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 10:55:03 +0200
Subject: [PATCH 0163/1270] Reorganize things and do some fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 84f178b75f..5bf7d45f59 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -73,26 +73,30 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     private setCallListeners() {
+        if (!this.call) return;
         this.call.addListener(CallEvent.State, this.setCallState);
     }
 
     private setCallState = () => {
-        if (SUPPORTED_STATES.includes(this.call.state)) {
+        if (SUPPORTED_STATES.includes(this.call?.state)) {
             this.state = this.call.state;
-            this.emit(CallEventGrouperEvent.StateChanged, this.state);
+        } else {
+            const lastEvent = this.events[this.events.length - 1];
+            const lastEventType = lastEvent.getType();
+
+            if (lastEventType === EventType.CallHangup) this.state = CallState.Ended;
+            else if (lastEventType === EventType.CallReject) this.state = CallState.Ended;
         }
+        this.emit(CallEventGrouperEvent.StateChanged, this.state);
     }
 
     public add(event: MatrixEvent) {
-        this.events.push(event);
-        const type = event.getType();
-
-        if (type === EventType.CallHangup) this.state = CallState.Ended;
-        else if (type === EventType.CallReject) this.state = CallState.Ended;
         const callId = event.getContent().call_id;
-        this.call = CallHandler.sharedInstance().getCallById(callId);
-        if (!this.call) return;
-        this.setCallListeners();
+        this.events.push(event);
+        if (!this.call) {
+            this.call = CallHandler.sharedInstance().getCallById(callId);
+            this.setCallListeners();
+        }
         this.setCallState();
     }
 }

From 79ec655e660aaf6b512f664abd996d3802727a7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 10:58:17 +0200
Subject: [PATCH 0164/1270] Fix translations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/CallEvent.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index d5f26389c2..a048faf6b0 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
 import CallEventGrouper, { CallEventGrouperEvent } from '../../structures/CallEventGrouper';
 import FormButton from '../elements/FormButton';
@@ -33,9 +33,9 @@ interface IState {
 }
 
 const TEXTUAL_STATES = new Map([
-    [CallState.Connected, _t("Connected")],
-    [CallState.Connecting, _t("Connecting")],
-    [CallState.Ended, _t("This call has ended")],
+    [CallState.Connected, _td("Connected")],
+    [CallState.Connecting, _td("Connecting")],
+    [CallState.Ended, _td("This call has ended")],
 ]);
 
 export default class CallEvent extends React.Component {
@@ -92,7 +92,7 @@ export default class CallEvent extends React.Component {
         } else {
             content = (
                 
    
-                    { _t("The call is in an unknown state!") }
+                    { "The call is in an unknown state!" }
                 
    
             );
         }

From 5b3967a486815fff26f508857ff5eb863a6ea3c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 11:01:10 +0200
Subject: [PATCH 0165/1270] Add handling for invite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 5bf7d45f59..08f91f42bf 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -86,6 +86,7 @@ export default class CallEventGrouper extends EventEmitter {
 
             if (lastEventType === EventType.CallHangup) this.state = CallState.Ended;
             else if (lastEventType === EventType.CallReject) this.state = CallState.Ended;
+            else if (lastEventType === EventType.CallInvite) this.state = CallState.Connecting;
         }
         this.emit(CallEventGrouperEvent.StateChanged, this.state);
     }

From 078599798374551e11f8511037f62b44f6977e5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 11:28:45 +0200
Subject: [PATCH 0166/1270] Handle missed calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_CallEvent.scss        |  5 ++++
 src/components/structures/CallEventGrouper.ts | 23 +++++++++++++++----
 src/components/views/messages/CallEvent.tsx   | 21 ++++++++++++-----
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index e41cb7becf..9f61295a5a 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -48,5 +48,10 @@ limitations under the License.
     .mx_CallEvent_content {
         display: flex;
         flex-direction: row;
+        align-items: center;
+
+        .mx_CallEvent_content_callBack {
+            margin-left: 10px; // To match mx_callEvent
+        }
     }
 }
diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 08f91f42bf..5a3e5720e3 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -17,9 +17,11 @@ limitations under the License.
 
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { CallEvent, CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import { CallEvent, CallState, CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import CallHandler from '../../CallHandler';
 import { EventEmitter } from 'events';
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import defaultDispatcher from "../../dispatcher/dispatcher";
 
 export enum CallEventGrouperEvent {
     StateChanged = "state_changed",
@@ -32,10 +34,14 @@ const SUPPORTED_STATES = [
     CallState.Ringing,
 ];
 
+export enum CustomCallState {
+    Missed = "missed",
+}
+
 export default class CallEventGrouper extends EventEmitter {
     events: Array = [];
     call: MatrixCall;
-    state: CallState;
+    state: CallState | CustomCallState;
 
     private get invite(): MatrixEvent {
         return this.events.find((event) => event.getType() === EventType.CallInvite);
@@ -50,7 +56,11 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     public callBack = () => {
-
+        defaultDispatcher.dispatch({
+            action: 'place_call',
+            type: this.isVoice ? CallType.Voice : CallType.Video,
+            room_id: this.events[0]?.getRoomId(),
+        });
     }
 
     public isVoice(): boolean {
@@ -68,7 +78,7 @@ export default class CallEventGrouper extends EventEmitter {
         return isVoice;
     }
 
-    public getState() {
+    public getState(): CallState | CustomCallState {
         return this.state;
     }
 
@@ -86,7 +96,10 @@ export default class CallEventGrouper extends EventEmitter {
 
             if (lastEventType === EventType.CallHangup) this.state = CallState.Ended;
             else if (lastEventType === EventType.CallReject) this.state = CallState.Ended;
-            else if (lastEventType === EventType.CallInvite) this.state = CallState.Connecting;
+            else if (lastEventType === EventType.CallInvite && this.call) this.state = CallState.Connecting;
+            else if (this.invite?.sender?.userId !== MatrixClientPeg.get().getUserId()) {
+                this.state = CustomCallState.Missed;
+            }
         }
         this.emit(CallEventGrouperEvent.StateChanged, this.state);
     }
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index a048faf6b0..fbc653a8ca 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -19,7 +19,7 @@ import React from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t, _td } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
-import CallEventGrouper, { CallEventGrouperEvent } from '../../structures/CallEventGrouper';
+import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper';
 import FormButton from '../elements/FormButton';
 import { CallState } from 'matrix-js-sdk/src/webrtc/call';
 
@@ -29,10 +29,10 @@ interface IProps {
 }
 
 interface IState {
-    callState: CallState;
+    callState: CallState | CustomCallState;
 }
 
-const TEXTUAL_STATES = new Map([
+const TEXTUAL_STATES: Map = new Map([
     [CallState.Connected, _td("Connected")],
     [CallState.Connecting, _td("Connecting")],
     [CallState.Ended, _td("This call has ended")],
@@ -69,14 +69,11 @@ export default class CallEvent extends React.Component {
             content = (
                 
    
                     
-                    
    
                      {
                     { TEXTUAL_STATES.get(state) }
                 
    
             );
+        } else if (state === CustomCallState.Missed) {
+            content = (
+                
    
+                    { _t("You missed this call") }
+                    
+                
    
+            );
         } else {
             content = (
                 
    

From 79f51adf2534e449d53e51c8a201fee8184ff6f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 11:38:17 +0200
Subject: [PATCH 0167/1270] Delete old call tile handlers that are replaced by
 CallEventGrouper and CallEvent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/TextForEvent.js | 76 ---------------------------------------------
 1 file changed, 76 deletions(-)

diff --git a/src/TextForEvent.js b/src/TextForEvent.js
index 86f9ff20f4..e8e75e196f 100644
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@@ -288,78 +288,6 @@ function textForCanonicalAliasEvent(ev) {
     });
 }
 
-function textForCallAnswerEvent(event) {
-    const senderName = event.sender ? event.sender.name : _t('Someone');
-    const supported = MatrixClientPeg.get().supportsVoip() ? '' : _t('(not supported by this browser)');
-    return _t('%(senderName)s answered the call.', {senderName}) + ' ' + supported;
-}
-
-function textForCallHangupEvent(event) {
-    const senderName = event.sender ? event.sender.name : _t('Someone');
-    const eventContent = event.getContent();
-    let reason = "";
-    if (!MatrixClientPeg.get().supportsVoip()) {
-        reason = _t('(not supported by this browser)');
-    } else if (eventContent.reason) {
-        if (eventContent.reason === "ice_failed") {
-            // We couldn't establish a connection at all
-            reason = _t('(could not connect media)');
-        } else if (eventContent.reason === "ice_timeout") {
-            // We established a connection but it died
-            reason = _t('(connection failed)');
-        } else if (eventContent.reason === "user_media_failed") {
-            // The other side couldn't open capture devices
-            reason = _t("(their device couldn't start the camera / microphone)");
-        } else if (eventContent.reason === "unknown_error") {
-            // An error code the other side doesn't have a way to express
-            // (as opposed to an error code they gave but we don't know about,
-            // in which case we show the error code)
-            reason = _t("(an error occurred)");
-        } else if (eventContent.reason === "invite_timeout") {
-            reason = _t('(no answer)');
-        } else if (eventContent.reason === "user hangup" || eventContent.reason === "user_hangup") {
-            // workaround for https://github.com/vector-im/element-web/issues/5178
-            // it seems Android randomly sets a reason of "user hangup" which is
-            // interpreted as an error code :(
-            // https://github.com/vector-im/riot-android/issues/2623
-            // Also the correct hangup code as of VoIP v1 (with underscore)
-            reason = '';
-        } else {
-            reason = _t('(unknown failure: %(reason)s)', {reason: eventContent.reason});
-        }
-    }
-    return _t('%(senderName)s ended the call.', {senderName}) + ' ' + reason;
-}
-
-function textForCallRejectEvent(event) {
-    const senderName = event.sender ? event.sender.name : _t('Someone');
-    return _t('%(senderName)s declined the call.', {senderName});
-}
-
-function textForCallInviteEvent(event) {
-    const senderName = event.sender ? event.sender.name : _t('Someone');
-    // FIXME: Find a better way to determine this from the event?
-    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});
-    } else if (isVoice && !isSupported) {
-        return _t("%(senderName)s placed a voice call. (not supported by this browser)", {senderName});
-    } else if (!isVoice && isSupported) {
-        return _t("%(senderName)s placed a video call.", {senderName});
-    } else if (!isVoice && !isSupported) {
-        return _t("%(senderName)s placed a video call. (not supported by this browser)", {senderName});
-    }
-}
-
 function textForThreePidInviteEvent(event) {
     const senderName = event.sender ? event.sender.name : event.getSender();
 
@@ -573,10 +501,6 @@ function textForMjolnirEvent(event) {
 
 const handlers = {
     'm.room.message': textForMessageEvent,
-    'm.call.invite': textForCallInviteEvent,
-    'm.call.answer': textForCallAnswerEvent,
-    'm.call.hangup': textForCallHangupEvent,
-    'm.call.reject': textForCallRejectEvent,
 };
 
 const stateHandlers = {

From 527723c63045fa108953be195d379725f690db83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 11:51:05 +0200
Subject: [PATCH 0168/1270] Remove unused import
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/TextForEvent.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/TextForEvent.js b/src/TextForEvent.js
index e8e75e196f..a89b282753 100644
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@@ -13,7 +13,6 @@ 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 {MatrixClientPeg} from './MatrixClientPeg';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
 import {isValid3pidInvite} from "./RoomInvite";

From 91288ab5259701d0c5fe0497c89d5952a7239695 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 11:51:34 +0200
Subject: [PATCH 0169/1270] i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/i18n/strings/en_EN.json | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3d6fcb8643..bcf1bdf6d7 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -533,20 +533,6 @@
     "%(senderName)s changed the main and alternative addresses for this room.": "%(senderName)s changed the main and alternative addresses for this room.",
     "%(senderName)s changed the addresses for this room.": "%(senderName)s changed the addresses for this room.",
     "Someone": "Someone",
-    "(not supported by this browser)": "(not supported by this browser)",
-    "%(senderName)s answered the call.": "%(senderName)s answered the call.",
-    "(could not connect media)": "(could not connect media)",
-    "(connection failed)": "(connection failed)",
-    "(their device couldn't start the camera / microphone)": "(their device couldn't start the camera / microphone)",
-    "(an error occurred)": "(an error occurred)",
-    "(no answer)": "(no answer)",
-    "(unknown failure: %(reason)s)": "(unknown failure: %(reason)s)",
-    "%(senderName)s ended the call.": "%(senderName)s ended the call.",
-    "%(senderName)s declined the call.": "%(senderName)s declined the call.",
-    "%(senderName)s placed a voice call.": "%(senderName)s placed a voice call.",
-    "%(senderName)s placed a voice call. (not supported by this browser)": "%(senderName)s placed a voice call. (not supported by this browser)",
-    "%(senderName)s placed a video call.": "%(senderName)s placed a video call.",
-    "%(senderName)s placed a video call. (not supported by this browser)": "%(senderName)s placed a video call. (not supported by this browser)",
     "%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.": "%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.",
     "%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.": "%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.",
     "%(senderName)s made future room history visible to all room members, from the point they are invited.": "%(senderName)s made future room history visible to all room members, from the point they are invited.",
@@ -1813,6 +1799,10 @@
     "You cancelled verification.": "You cancelled verification.",
     "Verification cancelled": "Verification cancelled",
     "Compare emoji": "Compare emoji",
+    "Connected": "Connected",
+    "This call has ended": "This call has ended",
+    "You missed this call": "You missed this call",
+    "Call back": "Call back",
     "Sunday": "Sunday",
     "Monday": "Monday",
     "Tuesday": "Tuesday",

From 9b904cdee897ed681d5a1c29941a29f3a8389e8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 13:39:05 +0200
Subject: [PATCH 0170/1270] Remove empty line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/MessagePanel.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index b6d9f619c8..1b2025848c 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -543,7 +543,6 @@ export default class MessagePanel extends React.Component {
                 } else {
                     const callEventGrouper = new CallEventGrouper();
                     callEventGrouper.add(mxEv);
-
                     this._callEventGroupers.set(callId, callEventGrouper);
                 }
             }

From f1e780e6428b0c9f633e7039d50549da1acf3f4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 13:40:25 +0200
Subject: [PATCH 0171/1270] Improved missed calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 5a3e5720e3..c53efadd7a 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -82,6 +82,13 @@ export default class CallEventGrouper extends EventEmitter {
         return this.state;
     }
 
+    /**
+     * Returns true if there are only events from the other side - we missed the call
+     */
+    private wasThisCallMissed(): boolean {
+        return !this.events.some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId());
+    }
+
     private setCallListeners() {
         if (!this.call) return;
         this.call.addListener(CallEvent.State, this.setCallState);
@@ -94,12 +101,10 @@ export default class CallEventGrouper extends EventEmitter {
             const lastEvent = this.events[this.events.length - 1];
             const lastEventType = lastEvent.getType();
 
-            if (lastEventType === EventType.CallHangup) this.state = CallState.Ended;
+            if (this.wasThisCallMissed()) this.state = CustomCallState.Missed;
+            else if (lastEventType === EventType.CallHangup) this.state = CallState.Ended;
             else if (lastEventType === EventType.CallReject) this.state = CallState.Ended;
             else if (lastEventType === EventType.CallInvite && this.call) this.state = CallState.Connecting;
-            else if (this.invite?.sender?.userId !== MatrixClientPeg.get().getUserId()) {
-                this.state = CustomCallState.Missed;
-            }
         }
         this.emit(CallEventGrouperEvent.StateChanged, this.state);
     }

From 795dfa7206084a1b38d87cbddd269c6817fbfc83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 14:28:00 +0200
Subject: [PATCH 0172/1270] Allow custom classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/InfoTooltip.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx
index d49090dbae..9eea0a96dc 100644
--- a/src/components/views/elements/InfoTooltip.tsx
+++ b/src/components/views/elements/InfoTooltip.tsx
@@ -24,6 +24,7 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface ITooltipProps {
     tooltip?: React.ReactNode;
+    className?: string,
     tooltipClassName?: string;
 }
 
@@ -53,7 +54,7 @@ export default class InfoTooltip extends React.PureComponent : 
    ;
         return (
-            
    
+            
    
                 
                 {children}
                 {tip}

From 3a0b6eb466f0872af9bd917530dc02ef4fec635f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 14:40:08 +0200
Subject: [PATCH 0173/1270] Add a warning icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/img/element-icons/warning.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 res/img/element-icons/warning.svg

diff --git a/res/img/element-icons/warning.svg b/res/img/element-icons/warning.svg
new file mode 100644
index 0000000000..eef5193140
--- /dev/null
+++ b/res/img/element-icons/warning.svg
@@ -0,0 +1,3 @@
+
+
+

From 2a22f03a6ac920b4808c84e5107ade2badbe7595 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 14:40:27 +0200
Subject: [PATCH 0174/1270] Support InfoTooltip kinds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/elements/_InfoTooltip.scss      |  7 +++++++
 src/components/views/elements/InfoTooltip.tsx | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/res/css/views/elements/_InfoTooltip.scss b/res/css/views/elements/_InfoTooltip.scss
index 5858a60629..5329e7f1f8 100644
--- a/res/css/views/elements/_InfoTooltip.scss
+++ b/res/css/views/elements/_InfoTooltip.scss
@@ -30,5 +30,12 @@ limitations under the License.
     mask-position: center;
     content: '';
     vertical-align: middle;
+}
+
+.mx_InfoTooltip_icon_info::before {
     mask-image: url('$(res)/img/element-icons/info.svg');
 }
+
+.mx_InfoTooltip_icon_warning::before {
+    mask-image: url('$(res)/img/element-icons/warning.svg');
+}
diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx
index 9eea0a96dc..ca592b1849 100644
--- a/src/components/views/elements/InfoTooltip.tsx
+++ b/src/components/views/elements/InfoTooltip.tsx
@@ -22,10 +22,16 @@ import Tooltip, {Alignment} from './Tooltip';
 import {_t} from "../../../languageHandler";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+export enum InfoTooltipKind {
+    Info = "info",
+    Warning = "warning",
+}
+
 interface ITooltipProps {
     tooltip?: React.ReactNode;
     className?: string,
     tooltipClassName?: string;
+    kind?: InfoTooltipKind;
 }
 
 interface IState {
@@ -54,8 +60,12 @@ export default class InfoTooltip extends React.PureComponent
-                
+                
                 {children}
                 {tip}
             
    

From 70a5715b3d79438588b048692f4e9ad5f0fa1e41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 14:46:41 +0200
Subject: [PATCH 0175/1270] Support hangup reasons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 res/css/views/messages/_CallEvent.scss        |   4 +
 src/components/structures/CallEventGrouper.ts |   4 +
 src/components/views/messages/CallEvent.tsx   | 104 +++++++++++++-----
 3 files changed, 87 insertions(+), 25 deletions(-)

diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index 9f61295a5a..2e36daccfa 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -53,5 +53,9 @@ limitations under the License.
         .mx_CallEvent_content_callBack {
             margin-left: 10px; // To match mx_callEvent
         }
+
+        .mx_CallEvent_content_tooltip {
+            margin-right: 5px;
+        }
     }
 }
diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index c53efadd7a..15de2dcaf7 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -82,6 +82,10 @@ export default class CallEventGrouper extends EventEmitter {
         return this.state;
     }
 
+    public getHangupReason(): string | null {
+        return this.events.find((event) => event.getType() === EventType.CallHangup)?.getContent()?.reason;
+    }
+
     /**
      * Returns true if there are only events from the other side - we missed the call
      */
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index fbc653a8ca..a4c0d02797 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -22,6 +22,7 @@ import MemberAvatar from '../avatars/MemberAvatar';
 import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper';
 import FormButton from '../elements/FormButton';
 import { CallState } from 'matrix-js-sdk/src/webrtc/call';
+import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -35,7 +36,6 @@ interface IState {
 const TEXTUAL_STATES: Map = new Map([
     [CallState.Connected, _td("Connected")],
     [CallState.Connecting, _td("Connecting")],
-    [CallState.Ended, _td("This call has ended")],
 ]);
 
 export default class CallEvent extends React.Component {
@@ -59,53 +59,107 @@ export default class CallEvent extends React.Component {
         this.setState({callState: newState});
     }
 
-    render() {
-        const event = this.props.mxEvent;
-        const sender = event.sender ? event.sender.name : event.getSender();
-
-        const state = this.state.callState;
-        let content;
+    private renderContent(state: CallState | CustomCallState): JSX.Element {
         if (state === CallState.Ringing) {
-            content = (
+            return (
                 
    
                     
                     
                 
    
             );
-        } else if (Array.from(TEXTUAL_STATES.keys()).includes(state)) {
-            content = (
+        }
+        if (state === CallState.Ended) {
+            const hangupReason = this.props.callEventGrouper.getHangupReason();
+
+            if (["user_hangup", "user hangup"].includes(hangupReason) || !hangupReason) {
+                // workaround for https://github.com/vector-im/element-web/issues/5178
+                // it seems Android randomly sets a reason of "user hangup" which is
+                // interpreted as an error code :(
+                // https://github.com/vector-im/riot-android/issues/2623
+                // Also the correct hangup code as of VoIP v1 (with underscore)
+                // Also, if we don't have a reason
+                return (
+                    
    
+                        { _t("This call has ended") }
+                    
    
+                );
+            }
+
+            let reason;
+            if (hangupReason === "ice_failed") {
+                // We couldn't establish a connection at all
+                reason = _t("Could not connect media");
+            } else if (hangupReason === "ice_timeout") {
+                // We established a connection but it died
+                reason = _t("Connection failed");
+            } else if (hangupReason === "user_media_failed") {
+                // The other side couldn't open capture devices
+                reason = _t("Their device couldn't start the camera or microphone");
+            } else if (hangupReason === "unknown_error") {
+                // An error code the other side doesn't have a way to express
+                // (as opposed to an error code they gave but we don't know about,
+                // in which case we show the error code)
+                reason = _t("An unknown error occurred");
+            } else if (hangupReason === "invite_timeout") {
+                reason = _t("No answer");
+            } else {
+                reason = _t('Unknown failure: %(reason)s)', {reason: hangupReason});
+            }
+
+            return (
+                
    
+                    
+                    { _t("This call has failed") }
+                
    
+            );
+        }
+        if (Array.from(TEXTUAL_STATES.keys()).includes(state)) {
+            return (
                 
    
                     { TEXTUAL_STATES.get(state) }
                 
    
             );
-        } else if (state === CustomCallState.Missed) {
-            content = (
+        }
+        if (state === CustomCallState.Missed) {
+            return (
                 
    
                     { _t("You missed this call") }
                     
                 
    
             );
-        } else {
-            content = (
-                
    
-                    { "The call is in an unknown state!" }
-                
    
-            );
         }
 
+        // XXX: Should we translate this?
+        return (
+            
    
+                { "The call is in an unknown state!" }
+            
    
+        );
+    }
+
+    render() {
+        const event = this.props.mxEvent;
+        const sender = event.sender ? event.sender.name : event.getSender();
+        const callType = this.props.callEventGrouper.isVoice() ? _t("Voice call") : _t("Video call");
+        const content = this.renderContent(this.state.callState);
+
         return (
             
    
                 
    
@@ -119,7 +173,7 @@ export default class CallEvent extends React.Component {
                             { sender }
                         
    
                         
    
-                            { this.props.callEventGrouper.isVoice() ? _t("Voice call") : _t("Video call") }
+                            { callType }
                         
    
                     
    
                 
    

From c03f0fb13df5a4e14c0801f69c70897bdca7114e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 14:47:46 +0200
Subject: [PATCH 0176/1270] i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/i18n/strings/en_EN.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bcf1bdf6d7..573f22a7f3 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1801,6 +1801,13 @@
     "Compare emoji": "Compare emoji",
     "Connected": "Connected",
     "This call has ended": "This call has ended",
+    "Could not connect media": "Could not connect media",
+    "Connection failed": "Connection failed",
+    "Their device couldn't start the camera or microphone": "Their device couldn't start the camera or microphone",
+    "An unknown error occurred": "An unknown error occurred",
+    "No answer": "No answer",
+    "Unknown failure: %(reason)s)": "Unknown failure: %(reason)s)",
+    "This call has failed": "This call has failed",
     "You missed this call": "You missed this call",
     "Call back": "Call back",
     "Sunday": "Sunday",

From 9db280bbe66c913541991f385c41f6b457bb70f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 15:31:46 +0200
Subject: [PATCH 0177/1270] Listen for CallsChanged
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This should avoid delays and such

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 15de2dcaf7..339b9359c2 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -18,7 +18,7 @@ limitations under the License.
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { CallEvent, CallState, CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
-import CallHandler from '../../CallHandler';
+import CallHandler, { CallHandlerEvent } from '../../CallHandler';
 import { EventEmitter } from 'events';
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import defaultDispatcher from "../../dispatcher/dispatcher";
@@ -43,6 +43,12 @@ export default class CallEventGrouper extends EventEmitter {
     call: MatrixCall;
     state: CallState | CustomCallState;
 
+    constructor() {
+        super();
+
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.setCall)
+    }
+
     private get invite(): MatrixEvent {
         return this.events.find((event) => event.getType() === EventType.CallInvite);
     }
@@ -95,10 +101,10 @@ export default class CallEventGrouper extends EventEmitter {
 
     private setCallListeners() {
         if (!this.call) return;
-        this.call.addListener(CallEvent.State, this.setCallState);
+        this.call.addListener(CallEvent.State, this.setState);
     }
 
-    private setCallState = () => {
+    private setState = () => {
         if (SUPPORTED_STATES.includes(this.call?.state)) {
             this.state = this.call.state;
         } else {
@@ -113,13 +119,17 @@ export default class CallEventGrouper extends EventEmitter {
         this.emit(CallEventGrouperEvent.StateChanged, this.state);
     }
 
-    public add(event: MatrixEvent) {
-        const callId = event.getContent().call_id;
-        this.events.push(event);
+    private setCall = () => {
+        const callId = this.events[0].getContent().call_id;
         if (!this.call) {
             this.call = CallHandler.sharedInstance().getCallById(callId);
             this.setCallListeners();
         }
-        this.setCallState();
+        this.setState();
+    }
+
+    public add(event: MatrixEvent) {
+        this.events.push(event);
+        this.setState();
     }
 }

From 6b9e2042c37e3a8fce251586dcff71859ca057a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 16:28:57 +0200
Subject: [PATCH 0178/1270] Use a Set instead of an Array
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 339b9359c2..267f8edacf 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -39,7 +39,7 @@ export enum CustomCallState {
 }
 
 export default class CallEventGrouper extends EventEmitter {
-    events: Array = [];
+    events: Set = new Set();
     call: MatrixCall;
     state: CallState | CustomCallState;
 
@@ -50,7 +50,7 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     private get invite(): MatrixEvent {
-        return this.events.find((event) => event.getType() === EventType.CallInvite);
+        return [...this.events].find((event) => event.getType() === EventType.CallInvite);
     }
 
     public answerCall = () => {
@@ -65,7 +65,7 @@ export default class CallEventGrouper extends EventEmitter {
         defaultDispatcher.dispatch({
             action: 'place_call',
             type: this.isVoice ? CallType.Voice : CallType.Video,
-            room_id: this.events[0]?.getRoomId(),
+            room_id: [...this.events][0]?.getRoomId(),
         });
     }
 
@@ -89,14 +89,14 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     public getHangupReason(): string | null {
-        return this.events.find((event) => event.getType() === EventType.CallHangup)?.getContent()?.reason;
+        return [...this.events].find((event) => event.getType() === EventType.CallHangup)?.getContent()?.reason;
     }
 
     /**
      * Returns true if there are only events from the other side - we missed the call
      */
     private wasThisCallMissed(): boolean {
-        return !this.events.some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId());
+        return ![...this.events].some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId());
     }
 
     private setCallListeners() {
@@ -108,7 +108,7 @@ export default class CallEventGrouper extends EventEmitter {
         if (SUPPORTED_STATES.includes(this.call?.state)) {
             this.state = this.call.state;
         } else {
-            const lastEvent = this.events[this.events.length - 1];
+            const lastEvent = [...this.events][this.events.size - 1];
             const lastEventType = lastEvent.getType();
 
             if (this.wasThisCallMissed()) this.state = CustomCallState.Missed;
@@ -120,7 +120,7 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     private setCall = () => {
-        const callId = this.events[0].getContent().call_id;
+        const callId = [...this.events][0].getContent().call_id;
         if (!this.call) {
             this.call = CallHandler.sharedInstance().getCallById(callId);
             this.setCallListeners();
@@ -129,7 +129,7 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     public add(event: MatrixEvent) {
-        this.events.push(event);
+        this.events.add(event);
         this.setState();
     }
 }

From 3bf28e3a6bd0fba78d956b1aff3e46cd2de2af5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Tue, 1 Jun 2021 16:29:52 +0200
Subject: [PATCH 0179/1270] Remove Ended from SUPPORTED_STATES
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 267f8edacf..4d32d48fb3 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -30,7 +30,6 @@ export enum CallEventGrouperEvent {
 const SUPPORTED_STATES = [
     CallState.Connected,
     CallState.Connecting,
-    CallState.Ended,
     CallState.Ringing,
 ];
 

From 0c5e8ef381815725656c6619364fb54089a53137 Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Tue, 1 Jun 2021 16:13:01 +0100
Subject: [PATCH 0180/1270] Upgrade matrix-js-sdk to 11.2.0-rc.1

---
 package.json | 2 +-
 yarn.lock    | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 13047b69cf..108a61cdaf 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "11.2.0-rc.1",
     "matrix-widget-api": "^0.1.0-beta.14",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index 0ff235a660..1b07d4502b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5673,9 +5673,10 @@ mathml-tag-names@^2.1.3:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
-  version "11.1.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/acb9bc8cc5234326a7583514a8e120a4ac42eedc"
+matrix-js-sdk@11.2.0-rc.1:
+  version "11.2.0-rc.1"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-11.2.0-rc.1.tgz#339259d892ce08195864c1130780dd0b3d996af3"
+  integrity sha512-ACFONqdRqiPIj7aWf7G4f/2d0S/hfouIH6tdkFGDbizbWJCmqXRJ8EN2gmu0F3A6GGDo0+k9cqaeMf3Y1KIM8w==
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"

From d02f462df9a3cd0a336aea733c2992abcbc07b2d Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Tue, 1 Jun 2021 16:18:25 +0100
Subject: [PATCH 0181/1270] Prepare changelog for v3.23.0-rc.1

---
 CHANGELOG.md | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3d9afd51d..a3abd1f32b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,101 @@
+Changes in [3.23.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.23.0-rc.1) (2021-06-01)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.22.0...v3.23.0-rc.1)
+
+ * Upgrade to JS SDK 11.2.0-rc.1
+ * Translations update from Weblate
+   [\#6128](https://github.com/matrix-org/matrix-react-sdk/pull/6128)
+ * Fix all DMs wrongly appearing in room list when `m.direct` is changed
+   [\#6122](https://github.com/matrix-org/matrix-react-sdk/pull/6122)
+ * Update way of checking for registration disabled
+   [\#6123](https://github.com/matrix-org/matrix-react-sdk/pull/6123)
+ * Fix the ability to remove avatar from a space via settings
+   [\#6126](https://github.com/matrix-org/matrix-react-sdk/pull/6126)
+ * Switch to stable endpoint/fields for MSC2858
+   [\#6125](https://github.com/matrix-org/matrix-react-sdk/pull/6125)
+ * Clear stored editor state when canceling editing using a shortcut
+   [\#6117](https://github.com/matrix-org/matrix-react-sdk/pull/6117)
+ * Respect newlines in space topics
+   [\#6124](https://github.com/matrix-org/matrix-react-sdk/pull/6124)
+ * Add url param `defaultUsername` to prefill the login username field
+   [\#5674](https://github.com/matrix-org/matrix-react-sdk/pull/5674)
+ * Bump ws from 7.4.2 to 7.4.6
+   [\#6115](https://github.com/matrix-org/matrix-react-sdk/pull/6115)
+ * Sticky headers repositioning without layout trashing
+   [\#6110](https://github.com/matrix-org/matrix-react-sdk/pull/6110)
+ * Handle user_busy in voip calls
+   [\#6112](https://github.com/matrix-org/matrix-react-sdk/pull/6112)
+ * Avoid showing warning modals from the invite dialog after it unmounts
+   [\#6105](https://github.com/matrix-org/matrix-react-sdk/pull/6105)
+ * Fix misleading child counts in spaces
+   [\#6109](https://github.com/matrix-org/matrix-react-sdk/pull/6109)
+ * Close creation menu when expanding space panel via expand hierarchy
+   [\#6090](https://github.com/matrix-org/matrix-react-sdk/pull/6090)
+ * Prevent having duplicates in pending room state
+   [\#6108](https://github.com/matrix-org/matrix-react-sdk/pull/6108)
+ * Update reactions row on event decryption
+   [\#6106](https://github.com/matrix-org/matrix-react-sdk/pull/6106)
+ * Destroy playback instance on voice message unmount
+   [\#6101](https://github.com/matrix-org/matrix-react-sdk/pull/6101)
+ * Fix message preview not up to date
+   [\#6102](https://github.com/matrix-org/matrix-react-sdk/pull/6102)
+ * Convert some Flow typed files to TS (round 2)
+   [\#6076](https://github.com/matrix-org/matrix-react-sdk/pull/6076)
+ * Remove unused middlePanelResized event listener
+   [\#6086](https://github.com/matrix-org/matrix-react-sdk/pull/6086)
+ * Fix accessing currentState on an invalid joinedRoom
+   [\#6100](https://github.com/matrix-org/matrix-react-sdk/pull/6100)
+ * Remove Promise allSettled polyfill as js-sdk uses it directly
+   [\#6097](https://github.com/matrix-org/matrix-react-sdk/pull/6097)
+ * Prevent DecoratedRoomAvatar to update its state for the same value
+   [\#6099](https://github.com/matrix-org/matrix-react-sdk/pull/6099)
+ * Skip generatePreview if event is not part of the live timeline
+   [\#6098](https://github.com/matrix-org/matrix-react-sdk/pull/6098)
+ * fix sticky headers when results num get displayed
+   [\#6095](https://github.com/matrix-org/matrix-react-sdk/pull/6095)
+ * Improve addEventsToTimeline performance scoping WhoIsTypingTile::setState
+   [\#6094](https://github.com/matrix-org/matrix-react-sdk/pull/6094)
+ * Safeguards to prevent layout trashing for window dimensions
+   [\#6092](https://github.com/matrix-org/matrix-react-sdk/pull/6092)
+ * Use local room state to render space hierarchy if the room is known
+   [\#6089](https://github.com/matrix-org/matrix-react-sdk/pull/6089)
+ * Add spinner in UserMenu to list pending long running actions
+   [\#6085](https://github.com/matrix-org/matrix-react-sdk/pull/6085)
+ * Stop overscroll in Firefox Nightly for macOS
+   [\#6093](https://github.com/matrix-org/matrix-react-sdk/pull/6093)
+ * Move SettingsStore watchers/monitors over to ES6 maps for performance
+   [\#6063](https://github.com/matrix-org/matrix-react-sdk/pull/6063)
+ * Bump libolm version.
+   [\#6080](https://github.com/matrix-org/matrix-react-sdk/pull/6080)
+ * Improve styling of the message action bar
+   [\#6066](https://github.com/matrix-org/matrix-react-sdk/pull/6066)
+ * Improve explore rooms when no results are found
+   [\#6070](https://github.com/matrix-org/matrix-react-sdk/pull/6070)
+ * Remove logo spinner
+   [\#6078](https://github.com/matrix-org/matrix-react-sdk/pull/6078)
+ * Fix add reaction prompt showing even when user is not joined to room
+   [\#6073](https://github.com/matrix-org/matrix-react-sdk/pull/6073)
+ * Vectorize spinners
+   [\#5680](https://github.com/matrix-org/matrix-react-sdk/pull/5680)
+ * Fix handling of via servers for suggested rooms
+   [\#6077](https://github.com/matrix-org/matrix-react-sdk/pull/6077)
+ * Upgrade showChatEffects to room-level setting exposure
+   [\#6075](https://github.com/matrix-org/matrix-react-sdk/pull/6075)
+ * Delete RoomView dead code
+   [\#6071](https://github.com/matrix-org/matrix-react-sdk/pull/6071)
+ * Reduce noise in tests
+   [\#6074](https://github.com/matrix-org/matrix-react-sdk/pull/6074)
+ * Fix room name issues in right panel summary card
+   [\#6069](https://github.com/matrix-org/matrix-react-sdk/pull/6069)
+ * Cache normalized room name
+   [\#6072](https://github.com/matrix-org/matrix-react-sdk/pull/6072)
+ * Update MemberList to reflect changes for invite permission change
+   [\#6061](https://github.com/matrix-org/matrix-react-sdk/pull/6061)
+ * Delete RoomView dead code
+   [\#6065](https://github.com/matrix-org/matrix-react-sdk/pull/6065)
+ * Show subspace rooms count even if it is 0 for consistency
+   [\#6067](https://github.com/matrix-org/matrix-react-sdk/pull/6067)
+
 Changes in [3.22.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.22.0) (2021-05-24)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.22.0-rc.1...v3.22.0)

From 300b0016d60fd3f3b0527e68f987df3731f2feb0 Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Tue, 1 Jun 2021 16:18:26 +0100
Subject: [PATCH 0182/1270] v3.23.0-rc.1

---
 package.json | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 108a61cdaf..4f6a023383 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.22.0",
+  "version": "3.23.0-rc.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -25,7 +25,7 @@
   "bin": {
     "reskindex": "scripts/reskindex.js"
   },
-  "main": "./src/index.js",
+  "main": "./lib/index.js",
   "matrix_src_main": "./src/index.js",
   "matrix_lib_main": "./lib/index.js",
   "matrix_lib_typings": "./lib/index.d.ts",
@@ -200,5 +200,6 @@
     "coverageReporters": [
       "text"
     ]
-  }
+  },
+  "typings": "./lib/index.d.ts"
 }

From 0b7d3f007aece9a15d53e53f0f953fa203da8457 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 1 Jun 2021 17:30:57 +0100
Subject: [PATCH 0183/1270] Remove react-beautiful-dnd

---
 package.json                                  |   1 -
 src/components/structures/GroupFilterPanel.js |  32 ++---
 src/components/structures/LoggedInView.tsx    |  65 ++-------
 src/components/views/elements/DNDTagTile.js   |  32 ++---
 .../views/groups/GroupPublicityToggle.js      |   4 +-
 src/components/views/groups/GroupTile.js      |  44 +-----
 test/components/views/rooms/RoomList-test.js  |   5 +-
 yarn.lock                                     | 130 +-----------------
 8 files changed, 36 insertions(+), 277 deletions(-)

diff --git a/package.json b/package.json
index 13047b69cf..270c86ddba 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,6 @@
     "qs": "^6.9.6",
     "re-resizable": "^6.9.0",
     "react": "^16.14.0",
-    "react-beautiful-dnd": "^4.0.1",
     "react-dom": "^16.14.0",
     "react-focus-lock": "^2.5.0",
     "react-transition-group": "^4.4.1",
diff --git a/src/components/structures/GroupFilterPanel.js b/src/components/structures/GroupFilterPanel.js
index 2ff91e4976..f1c28d588a 100644
--- a/src/components/structures/GroupFilterPanel.js
+++ b/src/components/structures/GroupFilterPanel.js
@@ -24,7 +24,6 @@ import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
 import { _t } from '../../languageHandler';
 
-import { Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
@@ -83,7 +82,7 @@ class GroupFilterPanel extends React.Component {
         }
     };
 
-    onMouseDown = e => {
+    onClick = e => {
         // only dispatch if its not a no-op
         if (this.state.selectedTags.length > 0) {
             dis.dispatch({action: 'deselect_tags'});
@@ -151,28 +150,15 @@ class GroupFilterPanel extends React.Component {
         return 
    
             
-                
-                    { (provided, snapshot) => (
-                        
    
-                            { this.renderGlobalIcon() }
-                            { tags }
-                            
    
-                                {createButton}
-                            
    
-                            { provided.placeholder }
-                        
    
-                    ) }
-                    
+                
    
+                    { this.renderGlobalIcon() }
+                    { tags }
+                    
    
+                        { createButton }
+                    
    
+                
    
                 
         
    ;
     }
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index ad5c759f0d..f5df99d8c9 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -19,7 +19,6 @@ limitations under the License.
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
-import { DragDropContext } from 'react-beautiful-dnd';
 
 import {Key} from '../../Keyboard';
 import PageTypes from '../../PageTypes';
@@ -569,50 +568,6 @@ class LoggedInView extends React.Component {
         }
     };
 
-    _onDragEnd = (result) => {
-        // Dragged to an invalid destination, not onto a droppable
-        if (!result.destination) {
-            return;
-        }
-
-        const dest = result.destination.droppableId;
-
-        if (dest === 'tag-panel-droppable') {
-            // Could be "GroupTile +groupId:domain"
-            const draggableId = result.draggableId.split(' ').pop();
-
-            // Dispatch synchronously so that the GroupFilterPanel receives an
-            // optimistic update from GroupFilterOrderStore before the previous
-            // state is shown.
-            dis.dispatch(TagOrderActions.moveTag(
-                this._matrixClient,
-                draggableId,
-                result.destination.index,
-            ), true);
-        } else if (dest.startsWith('room-sub-list-droppable_')) {
-            this._onRoomTileEndDrag(result);
-        }
-    };
-
-    _onRoomTileEndDrag = (result) => {
-        let newTag = result.destination.droppableId.split('_')[1];
-        let prevTag = result.source.droppableId.split('_')[1];
-        if (newTag === 'undefined') newTag = undefined;
-        if (prevTag === 'undefined') prevTag = undefined;
-
-        const roomId = result.draggableId.split('_')[1];
-
-        const oldIndex = result.source.index;
-        const newIndex = result.destination.index;
-
-        dis.dispatch(RoomListActions.tagRoom(
-            this._matrixClient,
-            this._matrixClient.getRoom(roomId),
-            prevTag, newTag,
-            oldIndex, newIndex,
-        ), true);
-    };
-
     render() {
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserView = sdk.getComponent('structures.UserView');
@@ -679,17 +634,15 @@ class LoggedInView extends React.Component {
                     aria-hidden={this.props.hideToSRUsers}
                 >
                     
-                    
-                        
    
-                            { SettingsStore.getValue("feature_spaces") ?  : null }
-                            
-                            
-                            { pageElement }
-                        
    
-                        
+                    
    
+                        { SettingsStore.getValue("feature_spaces") ?  : null }
+                        
+                        
+                        { pageElement }
+                    
    
                 
    
                 
                 
diff --git a/src/components/views/elements/DNDTagTile.js b/src/components/views/elements/DNDTagTile.js
index 67572d4508..eaaa0f183b 100644
--- a/src/components/views/elements/DNDTagTile.js
+++ b/src/components/views/elements/DNDTagTile.js
@@ -18,7 +18,6 @@ limitations under the License.
 import TagTile from './TagTile';
 
 import React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 import { ContextMenu, toRightOf, useContextMenu } from "../../structures/ContextMenu";
 import * as sdk from '../../../index';
 
@@ -35,28 +34,13 @@ export default function DNDTagTile(props) {
             
         );
     }
-    return 
    
-        
-            {(provided, snapshot) => (
-                
    
-                    
-                
    
-            )}
-            
+    return <>
+        
         {contextMenu}
-    
    ;
+    ;
 }
diff --git a/src/components/views/groups/GroupPublicityToggle.js b/src/components/views/groups/GroupPublicityToggle.js
index c06d827550..6bef141cb8 100644
--- a/src/components/views/groups/GroupPublicityToggle.js
+++ b/src/components/views/groups/GroupPublicityToggle.js
@@ -66,9 +66,7 @@ export default class GroupPublicityToggle extends React.Component {
     render() {
         const GroupTile = sdk.getComponent('groups.GroupTile');
         return 
    
-            
+            
             
diff --git a/src/components/views/groups/GroupTile.js b/src/components/views/groups/GroupTile.js
index 42a977fb79..ce42662462 100644
--- a/src/components/views/groups/GroupTile.js
+++ b/src/components/views/groups/GroupTile.js
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Draggable, Droppable } from 'react-beautiful-dnd';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import FlairStore from '../../../stores/FlairStore';
@@ -24,8 +23,6 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../../customisations/Media";
 
-function nop() {}
-
 @replaceableComponent("views.groups.GroupTile")
 class GroupTile extends React.Component {
     static propTypes = {
@@ -34,7 +31,6 @@ class GroupTile extends React.Component {
         showDescription: PropTypes.bool,
         // Height of the group avatar in pixels
         avatarHeight: PropTypes.number,
-        draggable: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -42,7 +38,6 @@ class GroupTile extends React.Component {
     static defaultProps = {
         showDescription: true,
         avatarHeight: 50,
-        draggable: true,
     };
 
     state = {
@@ -57,7 +52,7 @@ class GroupTile extends React.Component {
         });
     }
 
-    onMouseDown = e => {
+    onClick = e => {
         e.preventDefault();
         dis.dispatch({
             action: 'view_group',
@@ -78,7 +73,7 @@ class GroupTile extends React.Component {
             ? mediaFromMxc(profile.avatarUrl).getSquareThumbnailHttp(avatarHeight)
             : null;
 
-        let avatarElement = (
+        const avatarElement = (
             
    
                 
             
    
         );
-        if (this.props.draggable) {
-            const avatarClone = avatarElement;
-            avatarElement = (
-                
-                    { (droppableProvided, droppableSnapshot) => (
-                        
    
-                            
-                                { (provided, snapshot) => (
-                                    
    
-                                        
    
-                                            {avatarClone}
-                                        
    
-                                        { /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
-                                        { provided.placeholder ? avatarClone : 
     }
-                                    
    
-                                ) }
-                            
-                        
    
-                    ) }
-                
-            );
-        }
 
-        // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
-        // instead of onClick. Otherwise we experience https://github.com/vector-im/element-web/issues/6156
-        return 
+        return 
             { avatarElement }
             
    
                 
    { name }
    
diff --git a/test/components/views/rooms/RoomList-test.js b/test/components/views/rooms/RoomList-test.js
index bfb8e1afd4..6aad6a90fd 100644
--- a/test/components/views/rooms/RoomList-test.js
+++ b/test/components/views/rooms/RoomList-test.js
@@ -6,7 +6,6 @@ import * as TestUtils from '../../../test-utils';
 
 import {MatrixClientPeg} from '../../../../src/MatrixClientPeg';
 import sdk from '../../../skinned-sdk';
-import { DragDropContext } from 'react-beautiful-dnd';
 
 import dis from '../../../../src/dispatcher/dispatcher';
 import DMRoomMap from '../../../../src/utils/DMRoomMap';
@@ -68,9 +67,7 @@ describe('RoomList', () => {
         const RoomList = sdk.getComponent('views.rooms.RoomList');
         const WrappedRoomList = TestUtils.wrapInMatrixClientContext(RoomList);
         root = ReactDOM.render(
-            
-                 {}} />
-            ,
+             {}} />,
             parentDiv,
         );
         ReactTestUtils.findRenderedComponentWithType(root, RoomList);
diff --git a/yarn.lock b/yarn.lock
index 0ff235a660..2c84237730 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1017,7 +1017,7 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -2114,14 +2114,6 @@ babel-preset-jest@^26.6.2:
     babel-plugin-jest-hoist "^26.6.2"
     babel-preset-current-node-syntax "^1.0.0"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -2645,11 +2637,6 @@ core-js@^1.0.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
   integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
-core-js@^2.4.0:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4215,13 +4202,6 @@ highlight.js@^10.5.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.5.0.tgz#3f09fede6a865757378f2d9ebdcbc15ba268f98f"
   integrity sha512-xTmvd9HiIHR6L53TMC7TKolEj65zG1XU+Onr8oi86mYa+nLcIbxTTWkpW7CsEwv/vK7u1zb8alZIMLDqqN6KTw==
 
-hoist-non-react-statics@^3.3.0:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -4430,13 +4410,6 @@ internal-slot@^1.0.2:
     has "^1.0.3"
     side-channel "^1.0.2"
 
-invariant@^2.2.2, invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -5556,11 +5529,6 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash-es@^4.2.1:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.20.tgz#29f6332eefc60e849f869c264bc71126ad61e8f7"
-  integrity sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA==
-
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
@@ -5581,7 +5549,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.2.1:
+lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5749,11 +5717,6 @@ mdurl@~1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
 
-memoize-one@^3.0.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
-  integrity sha512-YqVh744GsMlZu6xkhGslPSqSurOv6P+kLN2J3ysBZfagLcL5FdRK/0UpgLoL8hwjjEvvAVkjJZyFP+1T6p1vgA==
-
 meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -6374,11 +6337,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-performance-now@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
-  integrity sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=
-
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -6597,7 +6555,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6674,12 +6632,7 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
-raf-schd@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-2.1.2.tgz#ec622b5167f2912089f054dc03ebd5bcf33c8f62"
-  integrity sha512-Orl0IEvMtUCgPddgSxtxreK77UiQz4nPYJy9RggVzu4mKsZkQWiAaG1y9HlYWdvm9xtN348xRaT37qkvL/+A+g==
-
-raf@^3.1.0, raf@^3.4.1:
+raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -6706,22 +6659,6 @@ re-resizable@^6.9.0:
   dependencies:
     fast-memoize "^2.5.1"
 
-react-beautiful-dnd@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-4.0.1.tgz#3b0a49bf6be75af351176c904f012611dd292b81"
-  integrity sha512-d73RMu4QOFCyjUELLWFyY/EuclnfqulI9pECx+2gIuJvV0ycf1uR88o+1x0RSB9ILD70inHMzCBKNkWVbbt+vA==
-  dependencies:
-    babel-runtime "^6.26.0"
-    invariant "^2.2.2"
-    memoize-one "^3.0.1"
-    prop-types "^15.6.0"
-    raf-schd "^2.1.0"
-    react-motion "^0.5.2"
-    react-redux "^5.0.6"
-    redux "^3.7.2"
-    redux-thunk "^2.2.0"
-    reselect "^3.0.1"
-
 react-clientside-effect@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.3.tgz#95c95f520addfb71743608b990bfe01eb002012b"
@@ -6751,7 +6688,7 @@ react-focus-lock@^2.5.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
-react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
+react-is@^16.13.1, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -6761,33 +6698,6 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
-react-lifecycles-compat@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
-react-motion@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
-  integrity sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==
-  dependencies:
-    performance-now "^0.2.0"
-    prop-types "^15.5.8"
-    raf "^3.1.0"
-
-react-redux@^5.0.6:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.2.tgz#b19cf9e21d694422727bf798e934a916c4080f57"
-  integrity sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    hoist-non-react-statics "^3.3.0"
-    invariant "^2.2.4"
-    loose-envify "^1.1.0"
-    prop-types "^15.6.1"
-    react-is "^16.6.0"
-    react-lifecycles-compat "^3.0.0"
-
 react-test-renderer@^16.0.0-0, react-test-renderer@^16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
@@ -6908,21 +6818,6 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux-thunk@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
-  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
-
-redux@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
-  integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
-  dependencies:
-    lodash "^4.2.1"
-    lodash-es "^4.2.1"
-    loose-envify "^1.1.0"
-    symbol-observable "^1.0.3"
-
 reflect.ownkeys@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
@@ -6940,11 +6835,6 @@ regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -7102,11 +6992,6 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
-reselect@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
-  integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
-
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -7813,11 +7698,6 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-symbol-observable@^1.0.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
-  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
-
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"

From b032422c6a536b856d7d105dd593a804b245c933 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Tue, 1 Jun 2021 17:37:31 -0400
Subject: [PATCH 0184/1270] Fix whitespace lints

Signed-off-by: Robin Townsend 
---
 src/components/views/dialogs/ForwardDialog.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 59475b1b51..58759d7d42 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -184,13 +184,13 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr
     const previewLayout = SettingsStore.getValue("layout");
 
     return 
-        
    { _t("Message preview") }
    
+        
    {_t("Message preview")}
    
         
     = ({ matrixClient: cli, event, permalinkCr
         
    
             
Date: Tue, 1 Jun 2021 17:56:46 -0400
Subject: [PATCH 0185/1270] Match forward dialog send failed indicator color
 with button

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 593fe12531..fc59259ca2 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -124,7 +124,8 @@ limitations under the License.
                     }
 
                     .mx_NotificationBadge {
-                        opacity: 0.4;
+                        // Match the failed to send indicator's color with the disabled button
+                        background-color: $button-danger-disabled-fg-color;
                     }
 
                     &.mx_ForwardList_sending .mx_ForwardList_sendIcon {

From c78167977a49421156f62d995cf5aab97801a758 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Tue, 1 Jun 2021 17:57:26 -0400
Subject: [PATCH 0186/1270] Remove unused class

Signed-off-by: Robin Townsend 
---
 src/components/views/context_menus/MessageContextMenu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 08fc5844ec..442470bb52 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -161,7 +161,7 @@ export default class MessageContextMenu extends React.Component {
             matrixClient: MatrixClientPeg.get(),
             event: this.props.mxEvent,
             permalinkCreator: this.props.permalinkCreator,
-        }, 'mx_Dialog_forwardMessage');
+        });
         this.closeMenu();
     };
 

From 4ef69fcbf6cd5bb90261759eff4cd3e720a96f14 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Tue, 1 Jun 2021 18:09:51 -0400
Subject: [PATCH 0187/1270] Use settings hooks in forward dialog

...to dynamically watch for layout changes.

Signed-off-by: Robin Townsend 
---
 src/components/views/dialogs/ForwardDialog.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 58759d7d42..2c4920da4b 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -22,7 +22,7 @@ import {MatrixClient} from "matrix-js-sdk/src/client";
 
 import {_t} from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
-import SettingsStore from "../../../settings/SettingsStore";
+import {useSettingValue, useFeatureEnabled} from "../../../hooks/useSettings";
 import {UIFeature} from "../../../settings/UIFeature";
 import {Layout} from "../../../settings/Layout";
 import {IDialogProps} from "./IDialogProps";
@@ -174,14 +174,16 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr
     const [query, setQuery] = useState("");
     const lcQuery = query.toLowerCase();
 
+    const spacesEnabled = useFeatureEnabled("feature_spaces");
+    const flairEnabled = useFeatureEnabled(UIFeature.Flair);
+    const previewLayout = useSettingValue("layout");
+
     const rooms = useMemo(() => sortRooms(
         cli.getVisibleRooms().filter(
             room => room.getMyMembership() === "join" &&
-                !(SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()),
+                !(spacesEnabled && room.isSpaceRoom()),
         ),
-    ), [cli]).filter(room => room.name.toLowerCase().includes(lcQuery));
-
-    const previewLayout = SettingsStore.getValue("layout");
+    ), [cli, spacesEnabled]).filter(room => room.name.toLowerCase().includes(lcQuery));
 
     return  = ({ matrixClient: cli, event, permalinkCr
             
         
    

From 59660df0cbe74dbe39ada90e4296d427e5375bbc Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Tue, 1 Jun 2021 20:17:20 -0400
Subject: [PATCH 0188/1270] Use a QueryMatcher for forward dialog filtering

This also allows us to filter by room aliases.

Signed-off-by: Robin Townsend 
---
 src/components/views/dialogs/ForwardDialog.tsx | 15 ++++++++++++---
 src/hooks/useSettings.ts                       |  4 ++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 2c4920da4b..cba292ea25 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -38,6 +38,7 @@ import {StaticNotificationState} from "../../../stores/notifications/StaticNotif
 import NotificationBadge from "../rooms/NotificationBadge";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import QueryMatcher from "../../../autocomplete/QueryMatcher";
 
 const AVATAR_SIZE = 30;
 
@@ -176,14 +177,22 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr
 
     const spacesEnabled = useFeatureEnabled("feature_spaces");
     const flairEnabled = useFeatureEnabled(UIFeature.Flair);
-    const previewLayout = useSettingValue("layout");
+    const previewLayout = useSettingValue("layout");
 
-    const rooms = useMemo(() => sortRooms(
+    let rooms = useMemo(() => sortRooms(
         cli.getVisibleRooms().filter(
             room => room.getMyMembership() === "join" &&
                 !(spacesEnabled && room.isSpaceRoom()),
         ),
-    ), [cli, spacesEnabled]).filter(room => room.name.toLowerCase().includes(lcQuery));
+    ), [cli, spacesEnabled]);
+
+    if (lcQuery) {
+        rooms = new QueryMatcher(rooms, {
+            keys: ["name"],
+            funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
+            shouldMatchWordsOnly: false,
+        }).match(lcQuery);
+    }
 
     return (settingName: string, roomId: string = null, e
 };
 
 // Hook to fetch whether a feature is enabled and dynamically update when that changes
-export const useFeatureEnabled = (featureName: string, roomId: string = null) => {
-    const [enabled, setEnabled] = useState(SettingsStore.getValue(featureName, roomId));
+export const useFeatureEnabled = (featureName: string, roomId: string = null): boolean => {
+    const [enabled, setEnabled] = useState(SettingsStore.getValue(featureName, roomId));
 
     useEffect(() => {
         const ref = SettingsStore.watchSetting(featureName, roomId, () => {

From 992861a1cd821c2d7564fd644b4294220f54ff96 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Tue, 1 Jun 2021 20:36:28 -0400
Subject: [PATCH 0189/1270] Fix forward dialog tests

Signed-off-by: Robin Townsend 
---
 test/test-utils.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/test-utils.js b/test/test-utils.js
index c82885b5f0..6053924103 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -265,6 +265,8 @@ export function mkStubRoom(roomId = null, name) {
         isSpaceRoom: jest.fn(() => false),
         getUnreadNotificationCount: jest.fn(() => 0),
         getEventReadUpTo: jest.fn(() => null),
+        getCanonicalAlias: jest.fn(),
+        getAltAliases: jest.fn().mockReturnValue([]),
         timeline: [],
     };
 }

From 521b2445a8fe4c197a0655ec50bf08b0dd0e86dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 2 Jun 2021 10:18:32 +0200
Subject: [PATCH 0190/1270] Refactoring and fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 72 +++++++++----------
 src/components/views/messages/CallEvent.tsx   |  6 +-
 2 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 4d32d48fb3..8455eae0cd 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { CallEvent, CallState, CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
@@ -38,9 +37,9 @@ export enum CustomCallState {
 }
 
 export default class CallEventGrouper extends EventEmitter {
-    events: Set = new Set();
-    call: MatrixCall;
-    state: CallState | CustomCallState;
+    private events: Set = new Set();
+    private call: MatrixCall;
+    public state: CallState | CustomCallState;
 
     constructor() {
         super();
@@ -52,6 +51,30 @@ export default class CallEventGrouper extends EventEmitter {
         return [...this.events].find((event) => event.getType() === EventType.CallInvite);
     }
 
+    private get hangup(): MatrixEvent {
+        return [...this.events].find((event) => event.getType() === EventType.CallHangup);
+    }
+
+    public get isVoice(): boolean {
+        const invite = this.invite;
+        if (!invite) return;
+
+        // FIXME: Find a better way to determine this from the event?
+        if (invite.getContent()?.offer?.sdp?.indexOf('m=video') !== -1) return false;
+        return true;
+    }
+
+    public get hangupReason(): string | null {
+        return this.hangup?.getContent()?.reason;
+    }
+
+    /**
+     * Returns true if there are only events from the other side - we missed the call
+     */
+    private get callWasMissed(): boolean {
+        return ![...this.events].some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId());
+    }
+
     public answerCall = () => {
         this.call?.answer();
     }
@@ -68,35 +91,6 @@ export default class CallEventGrouper extends EventEmitter {
         });
     }
 
-    public isVoice(): boolean {
-        const invite = this.invite;
-
-        // FIXME: Find a better way to determine this from the event?
-        let isVoice = true;
-        if (
-            invite.getContent().offer && invite.getContent().offer.sdp &&
-            invite.getContent().offer.sdp.indexOf('m=video') !== -1
-        ) {
-            isVoice = false;
-        }
-
-        return isVoice;
-    }
-
-    public getState(): CallState | CustomCallState {
-        return this.state;
-    }
-
-    public getHangupReason(): string | null {
-        return [...this.events].find((event) => event.getType() === EventType.CallHangup)?.getContent()?.reason;
-    }
-
-    /**
-     * Returns true if there are only events from the other side - we missed the call
-     */
-    private wasThisCallMissed(): boolean {
-        return ![...this.events].some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId());
-    }
 
     private setCallListeners() {
         if (!this.call) return;
@@ -110,7 +104,7 @@ export default class CallEventGrouper extends EventEmitter {
             const lastEvent = [...this.events][this.events.size - 1];
             const lastEventType = lastEvent.getType();
 
-            if (this.wasThisCallMissed()) this.state = CustomCallState.Missed;
+            if (this.callWasMissed) this.state = CustomCallState.Missed;
             else if (lastEventType === EventType.CallHangup) this.state = CallState.Ended;
             else if (lastEventType === EventType.CallReject) this.state = CallState.Ended;
             else if (lastEventType === EventType.CallInvite && this.call) this.state = CallState.Connecting;
@@ -119,16 +113,16 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     private setCall = () => {
+        if (this.call) return;
+
         const callId = [...this.events][0].getContent().call_id;
-        if (!this.call) {
-            this.call = CallHandler.sharedInstance().getCallById(callId);
-            this.setCallListeners();
-        }
+        this.call = CallHandler.sharedInstance().getCallById(callId);
+        this.setCallListeners();
         this.setState();
     }
 
     public add(event: MatrixEvent) {
         this.events.add(event);
-        this.setState();
+        this.setCall();
     }
 }
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index a4c0d02797..597c2feba8 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -43,7 +43,7 @@ export default class CallEvent extends React.Component {
         super(props);
 
         this.state = {
-            callState: this.props.callEventGrouper.getState(),
+            callState: this.props.callEventGrouper.state,
         }
     }
 
@@ -77,7 +77,7 @@ export default class CallEvent extends React.Component {
             );
         }
         if (state === CallState.Ended) {
-            const hangupReason = this.props.callEventGrouper.getHangupReason();
+            const hangupReason = this.props.callEventGrouper.hangupReason;
 
             if (["user_hangup", "user hangup"].includes(hangupReason) || !hangupReason) {
                 // workaround for https://github.com/vector-im/element-web/issues/5178
@@ -157,7 +157,7 @@ export default class CallEvent extends React.Component {
     render() {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
-        const callType = this.props.callEventGrouper.isVoice() ? _t("Voice call") : _t("Video call");
+        const callType = this.props.callEventGrouper.isVoice ? _t("Voice call") : _t("Video call");
         const content = this.renderContent(this.state.callState);
 
         return (

From 78229a2fd0af3e11e05abc59040334d6d5bd8920 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 2 Jun 2021 10:20:11 +0200
Subject: [PATCH 0191/1270] Support user busy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/CallEvent.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 597c2feba8..e8e9afd2ee 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -110,6 +110,8 @@ export default class CallEvent extends React.Component {
                 reason = _t("An unknown error occurred");
             } else if (hangupReason === "invite_timeout") {
                 reason = _t("No answer");
+            } else if (hangupReason === "user_busy") {
+                reason = _t("The user you called is busy.");
             } else {
                 reason = _t('Unknown failure: %(reason)s)', {reason: hangupReason});
             }

From b202f997e33acd017511477ea98cc504b9589ee9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 2 Jun 2021 10:30:17 +0200
Subject: [PATCH 0192/1270] Refactor setState()
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/structures/CallEventGrouper.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 8455eae0cd..ab1444d4fa 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -55,6 +55,10 @@ export default class CallEventGrouper extends EventEmitter {
         return [...this.events].find((event) => event.getType() === EventType.CallHangup);
     }
 
+    private get reject(): MatrixEvent {
+        return [...this.events].find((event) => event.getType() === EventType.CallReject);
+    }
+
     public get isVoice(): boolean {
         const invite = this.invite;
         if (!invite) return;
@@ -101,13 +105,10 @@ export default class CallEventGrouper extends EventEmitter {
         if (SUPPORTED_STATES.includes(this.call?.state)) {
             this.state = this.call.state;
         } else {
-            const lastEvent = [...this.events][this.events.size - 1];
-            const lastEventType = lastEvent.getType();
-
             if (this.callWasMissed) this.state = CustomCallState.Missed;
-            else if (lastEventType === EventType.CallHangup) this.state = CallState.Ended;
-            else if (lastEventType === EventType.CallReject) this.state = CallState.Ended;
-            else if (lastEventType === EventType.CallInvite && this.call) this.state = CallState.Connecting;
+            else if (this.reject) this.state = CallState.Ended;
+            else if (this.hangup) this.state = CallState.Ended;
+            else if (this.invite && this.call) this.state = CallState.Connecting;
         }
         this.emit(CallEventGrouperEvent.StateChanged, this.state);
     }

From 3331e7bfbe8e5cf2b5b9b22779209636a23f6d15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 2 Jun 2021 10:42:58 +0200
Subject: [PATCH 0193/1270] Use enums where possible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/CallEvent.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index e8e9afd2ee..85b9e7f365 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -21,7 +21,7 @@ import { _t, _td } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
 import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper';
 import FormButton from '../elements/FormButton';
-import { CallState } from 'matrix-js-sdk/src/webrtc/call';
+import { CallErrorCode, CallState } from 'matrix-js-sdk/src/webrtc/call';
 import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
 
 interface IProps {
@@ -79,7 +79,7 @@ export default class CallEvent extends React.Component {
         if (state === CallState.Ended) {
             const hangupReason = this.props.callEventGrouper.hangupReason;
 
-            if (["user_hangup", "user hangup"].includes(hangupReason) || !hangupReason) {
+            if ([CallErrorCode.UserHangup, "user hangup"].includes(hangupReason) || !hangupReason) {
                 // workaround for https://github.com/vector-im/element-web/issues/5178
                 // it seems Android randomly sets a reason of "user hangup" which is
                 // interpreted as an error code :(
@@ -94,13 +94,13 @@ export default class CallEvent extends React.Component {
             }
 
             let reason;
-            if (hangupReason === "ice_failed") {
+            if (hangupReason === CallErrorCode.IceFailed) {
                 // We couldn't establish a connection at all
                 reason = _t("Could not connect media");
             } else if (hangupReason === "ice_timeout") {
                 // We established a connection but it died
                 reason = _t("Connection failed");
-            } else if (hangupReason === "user_media_failed") {
+            } else if (hangupReason === CallErrorCode.NoUserMedia) {
                 // The other side couldn't open capture devices
                 reason = _t("Their device couldn't start the camera or microphone");
             } else if (hangupReason === "unknown_error") {
@@ -108,9 +108,9 @@ export default class CallEvent extends React.Component {
                 // (as opposed to an error code they gave but we don't know about,
                 // in which case we show the error code)
                 reason = _t("An unknown error occurred");
-            } else if (hangupReason === "invite_timeout") {
+            } else if (hangupReason === CallErrorCode.InviteTimeout) {
                 reason = _t("No answer");
-            } else if (hangupReason === "user_busy") {
+            } else if (hangupReason === CallErrorCode.UserBusy) {
                 reason = _t("The user you called is busy.");
             } else {
                 reason = _t('Unknown failure: %(reason)s)', {reason: hangupReason});

From bc3c759feb2d3f062d0dbc9489e5741fa7d8af13 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 2 Jun 2021 11:33:25 +0100
Subject: [PATCH 0194/1270] Add temporary mechanism for managing communities
 without dnd

---
 .../context_menus/_TagTileContextMenu.scss    |  9 ++++
 src/components/structures/MyGroups.js         |  3 +-
 .../views/context_menus/TagTileContextMenu.js | 49 ++++++++++++++-----
 src/components/views/elements/DNDTagTile.js   |  2 +-
 src/components/views/groups/GroupTile.js      | 23 +++++++++
 src/i18n/strings/en_EN.json                   |  4 +-
 6 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss
index 8929c8906e..d707f4ce7c 100644
--- a/res/css/views/context_menus/_TagTileContextMenu.scss
+++ b/res/css/views/context_menus/_TagTileContextMenu.scss
@@ -38,6 +38,15 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/view-community.svg');
 }
 
+.mx_TagTileContextMenu_moveUp::before {
+    transform: rotate(180deg);
+    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+}
+
+.mx_TagTileContextMenu_moveDown::before {
+    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+}
+
 .mx_TagTileContextMenu_hideCommunity::before {
     mask-image: url('$(res)/img/element-icons/hide.svg');
 }
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index 1fab6c4348..d0a2fbff41 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -82,8 +82,7 @@ export default class MyGroups extends React.Component {
                         
    
                         
    
                             { _t(
-                                "To set up a filter, drag a community avatar over to the filter panel on " +
-                                "the far left hand side of the screen. You can click on an avatar in the " +
+                                "You can click on an avatar in the " +
                                 "filter panel at any time to see only the rooms and people associated " +
                                 "with that community.",
                             ) }
diff --git a/src/components/views/context_menus/TagTileContextMenu.js b/src/components/views/context_menus/TagTileContextMenu.js
index 8dea62690c..4e381643ba 100644
--- a/src/components/views/context_menus/TagTileContextMenu.js
+++ b/src/components/views/context_menus/TagTileContextMenu.js
@@ -23,45 +23,70 @@ import TagOrderActions from '../../../actions/TagOrderActions';
 import {MenuItem} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
 
 @replaceableComponent("views.context_menus.TagTileContextMenu")
 export default class TagTileContextMenu extends React.Component {
     static propTypes = {
         tag: PropTypes.string.isRequired,
+        index: PropTypes.number.isRequired,
         /* callback called when the menu is dismissed */
         onFinished: PropTypes.func.isRequired,
     };
 
     static contextType = MatrixClientContext;
 
-    constructor() {
-        super();
-
-        this._onViewCommunityClick = this._onViewCommunityClick.bind(this);
-        this._onRemoveClick = this._onRemoveClick.bind(this);
-    }
-
-    _onViewCommunityClick() {
+    _onViewCommunityClick = () => {
         dis.dispatch({
             action: 'view_group',
             group_id: this.props.tag,
         });
         this.props.onFinished();
-    }
+    };
 
-    _onRemoveClick() {
+    _onRemoveClick = () => {
         dis.dispatch(TagOrderActions.removeTag(this.context, this.props.tag));
         this.props.onFinished();
-    }
+    };
+
+    _onMoveUp = () => {
+        dis.dispatch(TagOrderActions.moveTag(this.context, this.props.tag, this.props.index - 1));
+        this.props.onFinished();
+    };
+
+    _onMoveDown = () => {
+        dis.dispatch(TagOrderActions.moveTag(this.context, this.props.tag, this.props.index + 1));
+        this.props.onFinished();
+    };
 
     render() {
+        let moveUp;
+        let moveDown;
+        if (this.props.index > 0) {
+            moveUp = (
+                
+                    { _t("Move up") }
+                
+            );
+        }
+        if (this.props.index < (GroupFilterOrderStore.getOrderedTags() || []).length - 1) {
+            moveDown = (
+                
+                    { _t("Move down") }
+                
+            );
+        }
+
         return 
    
             
                 { _t('View Community') }
             
+            { (moveUp || moveDown) ? 
     : null }
+            { moveUp }
+            { moveDown }
             
    
             
-                { _t('Hide') }
+                { _t("Unpin") }
             
         
    ;
     }
diff --git a/src/components/views/elements/DNDTagTile.js b/src/components/views/elements/DNDTagTile.js
index eaaa0f183b..2e88d37882 100644
--- a/src/components/views/elements/DNDTagTile.js
+++ b/src/components/views/elements/DNDTagTile.js
@@ -30,7 +30,7 @@ export default function DNDTagTile(props) {
         const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
         contextMenu = (
             
-                
+                
             
         );
     }
diff --git a/src/components/views/groups/GroupTile.js b/src/components/views/groups/GroupTile.js
index ce42662462..dd8366bbe0 100644
--- a/src/components/views/groups/GroupTile.js
+++ b/src/components/views/groups/GroupTile.js
@@ -22,6 +22,9 @@ import FlairStore from '../../../stores/FlairStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../../customisations/Media";
+import { _t } from "../../../languageHandler";
+import TagOrderActions from "../../../actions/TagOrderActions";
+import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
 
 @replaceableComponent("views.groups.GroupTile")
 class GroupTile extends React.Component {
@@ -60,6 +63,18 @@ class GroupTile extends React.Component {
         });
     };
 
+    onPinClick = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        dis.dispatch(TagOrderActions.moveTag(this.context, this.props.groupId, 0));
+    };
+
+    onUnpinClick = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        dis.dispatch(TagOrderActions.removeTag(this.context, this.props.groupId));
+    };
+
     render() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -90,6 +105,14 @@ class GroupTile extends React.Component {
                 
    { name }
    
                 { descElement }
                 
    { this.props.groupId }
    
+                { !(GroupFilterOrderStore.getOrderedTags() || []).includes(this.props.groupId)
+                    ? 
+                        { _t("Pin") }
+                    
+                    : 
+                        { _t("Unpin") }
+                    
+                }
             
    
         ;
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3d6fcb8643..85647a17e5 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2477,6 +2477,8 @@
     "Update status": "Update status",
     "Set status": "Set status",
     "Set a new status...": "Set a new status...",
+    "Move up": "Move up",
+    "Move down": "Move down",
     "View Community": "View Community",
     "Unable to start audio streaming.": "Unable to start audio streaming.",
     "Failed to start livestream": "Failed to start livestream",
@@ -2623,7 +2625,7 @@
     "%(count)s messages deleted.|one": "%(count)s message deleted.",
     "Your Communities": "Your Communities",
     "Did you know: you can use communities to filter your %(brand)s experience!": "Did you know: you can use communities to filter your %(brand)s experience!",
-    "To set up a filter, drag a community avatar over to the filter panel on the far left hand side of the screen. You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.": "To set up a filter, drag a community avatar over to the filter panel on the far left hand side of the screen. You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.",
+    "You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.": "You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.",
     "Error whilst fetching joined communities": "Error whilst fetching joined communities",
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",

From 35948374e91d4cf6e3110de4218d043be9ff4db0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 2 Jun 2021 11:56:49 +0100
Subject: [PATCH 0195/1270] remove unused imports

---
 src/components/structures/LoggedInView.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index f5df99d8c9..388616c55e 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -29,8 +29,6 @@ import dis from '../../dispatcher/dispatcher';
 import { IMatrixClientCreds } from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
 
-import TagOrderActions from '../../actions/TagOrderActions';
-import RoomListActions from '../../actions/RoomListActions';
 import ResizeHandle from '../views/elements/ResizeHandle';
 import {Resizer, CollapseDistributor} from '../../resizer';
 import MatrixClientContext from "../../contexts/MatrixClientContext";

From 079a5c10ad8191d6d3c357400c948253b0738997 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 2 Jun 2021 16:43:38 +0100
Subject: [PATCH 0196/1270] Respect space ordering field in m.tag for top level
 spaces

---
 .../structures/SpaceRoomDirectory.tsx         |  4 +--
 src/stores/SpaceStore.tsx                     | 33 ++++++++++++++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index 8d59fe6c68..2b4fb24c1b 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -39,7 +39,7 @@ import {mediaFromMxc} from "../../customisations/Media";
 import InfoTooltip from "../views/elements/InfoTooltip";
 import TextWithTooltip from "../views/elements/TextWithTooltip";
 import {useStateToggle} from "../../hooks/useStateToggle";
-import {getOrder} from "../../stores/SpaceStore";
+import {getChildOrder} from "../../stores/SpaceStore";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import {linkifyElement} from "../../HtmlUtils";
 
@@ -286,7 +286,7 @@ export const HierarchyLevel = ({
     const children = Array.from(relations.get(spaceId)?.values() || []);
     const sortedChildren = sortBy(children, ev => {
         // XXX: Space Summary API doesn't give the child origin_server_ts but once it does we should use it for sorting
-        return getOrder(ev.content.order, null, ev.state_key);
+        return getChildOrder(ev.content.order, null, ev.state_key);
     });
     const [subspaces, childRooms] = sortedChildren.reduce((result, ev: ISpaceSummaryEvent) => {
         const roomId = ev.state_key;
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 40997d30a8..1333fc5d37 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -33,6 +33,7 @@ import {EnhancedMap, mapDiff} from "../utils/maps";
 import {setHasDiff} from "../utils/sets";
 import {ISpaceSummaryEvent, ISpaceSummaryRoom} from "../components/structures/SpaceRoomDirectory";
 import RoomViewStore from "./RoomViewStore";
+import { arrayHasOrderChange } from "../utils/arrays";
 
 interface IState {}
 
@@ -60,8 +61,16 @@ const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces,
     }, [[], []]);
 };
 
+const SpaceTagOrderingField = "org.matrix.mscXXXX.space";
+
+const getSpaceTagOrdering = (space: Room): number | undefined => {
+    return space?.getAccountData(EventType.Tag)?.getContent()?.tags?.[SpaceTagOrderingField]?.order;
+};
+
+const sortRootSpaces = (spaces: Room[]): Room[] => sortBy(spaces, [getSpaceTagOrdering, "roomId"]);
+
 // For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
-export const getOrder = (order: string, creationTs: number, roomId: string): Array>> => {
+export const getChildOrder = (order: string, creationTs: number, roomId: string): Array>> => {
     let validatedOrder: string = null;
 
     if (typeof order === "string" && Array.from(order).every((c: string) => {
@@ -214,7 +223,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
             const roomId = ev.getStateKey();
             const childRoom = this.matrixClient?.getRoom(roomId);
             const createTs = childRoom?.currentState.getStateEvents(EventType.RoomCreate, "")?.getTs();
-            return getOrder(ev.getContent().order, createTs, roomId);
+            return getChildOrder(ev.getContent().order, createTs, roomId);
         }).map(ev => {
             return this.matrixClient.getRoom(ev.getStateKey());
         }).filter(room => {
@@ -326,7 +335,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         //     rootSpaces.push(space);
         // });
 
-        this.rootSpaces = rootSpaces;
+        this.rootSpaces = sortRootSpaces(rootSpaces);
         this.parentMap = backrefs;
 
         // if the currently selected space no longer exists, remove its selection
@@ -338,7 +347,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces);
 
         // build initial state of invited spaces as we would have missed the emitted events about the room at launch
-        this._invitedSpaces = new Set(invitedSpaces);
+        this._invitedSpaces = new Set(sortRootSpaces(invitedSpaces));
         this.emit(UPDATE_INVITED_SPACES, this.invitedSpaces);
     }, 100, {trailing: true, leading: true});
 
@@ -472,6 +481,20 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         }
     };
 
+    private onRoomAccountData = (ev: MatrixEvent, room: Room, lastEv?: MatrixEvent) => {
+        if (!room.isSpaceRoom() || ev.getType() !== EventType.Tag) return;
+
+        const order = ev.getContent()?.tags?.[SpaceTagOrderingField]?.order;
+        const lastOrder = lastEv?.getContent()?.tags?.[SpaceTagOrderingField]?.order;
+        if (order !== lastOrder) {
+            const rootSpaces = sortRootSpaces(this.rootSpaces);
+            if (arrayHasOrderChange(this.rootSpaces, rootSpaces)) {
+                this.rootSpaces = rootSpaces;
+                this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces);
+            }
+        }
+    };
+
     private onRoomState = (ev: MatrixEvent) => {
         const room = this.matrixClient.getRoom(ev.getRoomId());
         if (!room) return;
@@ -516,6 +539,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         if (this.matrixClient) {
             this.matrixClient.removeListener("Room", this.onRoom);
             this.matrixClient.removeListener("Room.myMembership", this.onRoom);
+            this.matrixClient.removeListener("Room.accountData", this.onRoomAccountData);
             this.matrixClient.removeListener("RoomState.events", this.onRoomState);
         }
         await this.reset();
@@ -525,6 +549,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         if (!SettingsStore.getValue("feature_spaces")) return;
         this.matrixClient.on("Room", this.onRoom);
         this.matrixClient.on("Room.myMembership", this.onRoom);
+        this.matrixClient.on("Room.accountData", this.onRoomAccountData);
         this.matrixClient.on("RoomState.events", this.onRoomState);
 
         await this.onSpaceUpdate(); // trigger an initial update

From e0572acb14adff8ca84cf0725279bc2ff92be4eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 2 Jun 2021 19:22:22 +0200
Subject: [PATCH 0197/1270] Write tests for CallEventGrouper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../structures/CallEventGrouper-test.ts       | 124 ++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 test/components/structures/CallEventGrouper-test.ts

diff --git a/test/components/structures/CallEventGrouper-test.ts b/test/components/structures/CallEventGrouper-test.ts
new file mode 100644
index 0000000000..98a5a16a22
--- /dev/null
+++ b/test/components/structures/CallEventGrouper-test.ts
@@ -0,0 +1,124 @@
+import "../../skinned-sdk";
+import { stubClient } from '../../test-utils';
+import { MatrixClientPeg } from '../../../src/MatrixClientPeg';
+import { MatrixClient } from 'matrix-js-sdk';
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import CallEventGrouper, { CustomCallState } from "../../../src/components/structures/CallEventGrouper";
+import { CallState } from "matrix-js-sdk/src/webrtc/call";
+
+const MY_USER_ID = "@me:here";
+const THEIR_USER_ID = "@they:here";
+
+let client: MatrixClient;
+
+describe('CallEventGrouper', () => {
+    beforeEach(() => {
+        stubClient();
+        client = MatrixClientPeg.get();
+        client.getUserId = () => {
+            return MY_USER_ID;
+        };
+    });
+
+    it("detects a missed call", () => {
+        const grouper = new CallEventGrouper();
+
+        grouper.add({
+            getContent: () => {
+                return {
+                    call_id: "callId",
+                };
+            },
+            getType: () => {
+                return EventType.CallInvite;
+            },
+            sender: {
+                userId: THEIR_USER_ID,
+            },
+        });
+
+        expect(grouper.state).toBe(CustomCallState.Missed);
+    });
+
+    it("detects an ended call", () => {
+        const grouperHangup = new CallEventGrouper();
+        const grouperReject = new CallEventGrouper();
+
+        grouperHangup.add({
+            getContent: () => {
+                return {
+                    call_id: "callId",
+                };
+            },
+            getType: () => {
+                return EventType.CallInvite;
+            },
+            sender: {
+                userId: MY_USER_ID,
+            },
+        });
+        grouperHangup.add({
+            getContent: () => {
+                return {
+                    call_id: "callId",
+                };
+            },
+            getType: () => {
+                return EventType.CallHangup;
+            },
+            sender: {
+                userId: THEIR_USER_ID,
+            },
+        });
+
+        grouperReject.add({
+            getContent: () => {
+                return {
+                    call_id: "callId",
+                };
+            },
+            getType: () => {
+                return EventType.CallInvite;
+            },
+            sender: {
+                userId: MY_USER_ID,
+            },
+        });
+        grouperReject.add({
+            getContent: () => {
+                return {
+                    call_id: "callId",
+                };
+            },
+            getType: () => {
+                return EventType.CallReject;
+            },
+            sender: {
+                userId: THEIR_USER_ID,
+            },
+        });
+
+        expect(grouperHangup.state).toBe(CallState.Ended);
+        expect(grouperReject.state).toBe(CallState.Ended);
+    });
+
+    it("detects call type", () => {
+        const grouper = new CallEventGrouper();
+
+        grouper.add({
+            getContent: () => {
+                return {
+                    call_id: "callId",
+                    offer: {
+                        sdp: "this is definitely an SDP m=video",
+                    },
+                };
+            },
+            getType: () => {
+                return EventType.CallInvite;
+            },
+        });
+
+        expect(grouper.isVoice).toBe(false);
+    });
+});

From 1c92e3168394280eaafddad84a242338ffdd0284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Wed, 2 Jun 2021 19:27:57 +0200
Subject: [PATCH 0198/1270] Add missing license header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../structures/CallEventGrouper-test.ts          | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/test/components/structures/CallEventGrouper-test.ts b/test/components/structures/CallEventGrouper-test.ts
index 98a5a16a22..5719d92902 100644
--- a/test/components/structures/CallEventGrouper-test.ts
+++ b/test/components/structures/CallEventGrouper-test.ts
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 Šimon Brandner 
+
+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 "../../skinned-sdk";
 import { stubClient } from '../../test-utils';
 import { MatrixClientPeg } from '../../../src/MatrixClientPeg';

From c1a763fb4f866268bc70c8ef44905cc75563703d Mon Sep 17 00:00:00 2001
From: zopieux 
Date: Wed, 2 Jun 2021 23:47:21 +0000
Subject: [PATCH 0199/1270] Translated using Weblate (French)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fr/
---
 src/i18n/strings/fr.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/strings/fr.json b/src/i18n/strings/fr.json
index 5a8208f50b..ff48785427 100644
--- a/src/i18n/strings/fr.json
+++ b/src/i18n/strings/fr.json
@@ -2868,7 +2868,7 @@
     "The %(capability)s capability": "La capacité %(capability)s",
     "See %(eventType)s events posted to your active room": "Voir les événements %(eventType)s publiés dans votre salon actuel",
     "Send %(eventType)s events as you in your active room": "Envoie des événements %(eventType)s sous votre nom dans votre salon actuel",
-    "See %(eventType)s events posted to this room": "Voir les événements %(eventType)s publiés dans ce salon",
+    "See %(eventType)s events posted to this room": "Voir les événements %(eventType)s envoyés dans ce salon",
     "Send %(eventType)s events as you in this room": "Envoie des événements %(eventType)s sous votre nom dans ce salon",
     "Send stickers to your active room as you": "Envoie des autocollants sous votre nom dans le salon actuel",
     "Continue with %(ssoButtons)s": "Continuer avec %(ssoButtons)s",
@@ -2930,7 +2930,7 @@
     "Don't miss a reply": "Ne ratez pas une réponse",
     "See %(msgtype)s messages posted to your active room": "Voir les messages de type %(msgtype)s publiés dans le salon actuel",
     "See %(msgtype)s messages posted to this room": "Voir les messages de type %(msgtype)s publiés dans ce salon",
-    "Send %(msgtype)s messages as you in this room": "Envoie des messages de type%(msgtype)s sous votre nom dans ce salon",
+    "Send %(msgtype)s messages as you in this room": "Envoie les messages de type %(msgtype)s sous votre nom dans ce salon",
     "Send %(msgtype)s messages as you in your active room": "Envoie des messages de type %(msgtype)s sous votre nom dans votre salon actif",
     "See general files posted to your active room": "Voir les fichiers postés dans votre salon actuel",
     "See general files posted to this room": "Voir les fichiers postés dans ce salon",

From b4f8c66f7b2645a83b660478b006b7d0414f4b00 Mon Sep 17 00:00:00 2001
From: Miquel Lionel 
Date: Wed, 2 Jun 2021 23:37:33 +0000
Subject: [PATCH 0200/1270] Translated using Weblate (French)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fr/
---
 src/i18n/strings/fr.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/i18n/strings/fr.json b/src/i18n/strings/fr.json
index ff48785427..e94dbd6c1f 100644
--- a/src/i18n/strings/fr.json
+++ b/src/i18n/strings/fr.json
@@ -2842,7 +2842,7 @@
     "Change the topic of your active room": "Changer le sujet dans le salon actuel",
     "Change the topic of this room": "Changer le sujet de ce salon",
     "Send stickers into this room": "Envoyer des autocollants dans ce salon",
-    "Remain on your screen when viewing another room, when running": "Reste sur votre écran quand vous regardez un autre salon lors de l’appel",
+    "Remain on your screen when viewing another room, when running": "Reste sur votre écran lors de l'appel quand vous regardez un autre salon",
     "Takes the call in the current room off hold": "Reprend l’appel en attente dans ce salon",
     "Places the call in the current room on hold": "Met l’appel dans ce salon en attente",
     "Prepends (╯°□°）╯︵ ┻━┻ to a plain-text message": "Ajoute (╯°□°）╯︵ ┻━┻ en préfixe du message",
@@ -2861,7 +2861,7 @@
     "Send videos as you in this room": "Envoie des vidéos sous votre nom dans ce salon",
     "See images posted to this room": "Voir les images publiées dans ce salon",
     "See images posted to your active room": "Voir les images publiées dans votre salon actif",
-    "See messages posted to your active room": "Voir les messages publiés dans votre salon actif",
+    "See messages posted to your active room": "Voir les messages envoyés dans le salon actuel",
     "See messages posted to this room": "Voir les messages publiés dans ce salon",
     "Send messages as you in your active room": "Envoie des messages sous votre nom dans votre salon actif",
     "Send messages as you in this room": "Envoie des messages sous votre nom dans ce salon",
@@ -3034,7 +3034,7 @@
     "Send text messages as you in this room": "Envoyez des messages textuels sous votre nom dans ce salon",
     "See when the name changes in your active room": "Suivre les changements de nom dans le salon actif",
     "Change which room, message, or user you're viewing": "Changer le salon, message, ou la personne que vous visualisez",
-    "Change which room you're viewing": "Changer le salon que vous visualisez",
+    "Change which room you're viewing": "Changer le salon que vous êtes en train de lire",
     "Remain on your screen while running": "Reste sur votre écran pendant l’exécution",
     "%(senderName)s has updated the widget layout": "%(senderName)s a mis à jour la disposition du widget",
     "Converts the DM to a room": "Transforme la conversation privée en salon",

From 9f1e1c24205fdc76125f7f1e4351b939b6b7d7b6 Mon Sep 17 00:00:00 2001
From: c-cal 
Date: Tue, 1 Jun 2021 15:37:08 +0000
Subject: [PATCH 0201/1270] Translated using Weblate (French)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fr/
---
 src/i18n/strings/fr.json | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/i18n/strings/fr.json b/src/i18n/strings/fr.json
index e94dbd6c1f..7f3614bf90 100644
--- a/src/i18n/strings/fr.json
+++ b/src/i18n/strings/fr.json
@@ -1873,7 +1873,7 @@
     "This user has not verified all of their sessions.": "Cet utilisateur n’a pas vérifié toutes ses sessions.",
     "You have verified this user. This user has verified all of their sessions.": "Vous avez vérifié cet utilisateur. Cet utilisateur a vérifié toutes ses sessions.",
     "Someone is using an unknown session": "Quelqu’un utilise une session inconnue",
-    "Mod": "Modo",
+    "Mod": "Modérateur",
     "Your key share request has been sent - please check your other sessions for key share requests.": "Votre demande de partage de clé a été envoyée − vérifiez les demandes de partage de clé sur vos autres sessions.",
     "Key share requests are sent to your other sessions automatically. If you rejected or dismissed the key share request on your other sessions, click here to request the keys for this session again.": "Les demandes de partage de clé sont envoyées à vos autres sessions automatiquement. Si vous avez rejeté ou ignoré la demande de partage de clé sur vos autres sessions, cliquez ici pour redemander les clés pour cette session.",
     "If your other sessions do not have the key for this message you will not be able to decrypt them.": "Si vos autres sessions n’ont pas la clé pour ce message vous ne pourrez pas le déchiffrer.",
@@ -3111,7 +3111,7 @@
     "No permissions": "Aucune permission",
     "Remove from Space": "Supprimer de l’espace",
     "Undo": "Annuler",
-    "Your message wasn't sent because this homeserver has been blocked by it's administrator. Please contact your service administrator to continue using the service.": "Votre message n’a pas été envoyé car ce serveur d’accueil a été banni par son administrateur. Merci de contacter votre administrateur de service pour poursuivre l’usage de ce service.",
+    "Your message wasn't sent because this homeserver has been blocked by it's administrator. Please contact your service administrator to continue using the service.": "Votre message n’a pas été envoyé car ce serveur d’accueil a été bloqué par son administrateur. Merci de contacter votre administrateur de service pour continuer à utiliser le service.",
     "Are you sure you want to leave the space '%(spaceName)s'?": "Êtes-vous sûr de vouloir quitter l’espace « %(spaceName)s » ?",
     "This space is not public. You will not be able to rejoin without an invite.": "Cet espace n’est pas public. Vous ne pourrez pas le rejoindre sans invitation.",
     "Start audio stream": "Démarrer une diffusion audio",
@@ -3352,5 +3352,11 @@
     "sends space invaders": "Envoie les Space Invaders",
     "Sends the given message with a space themed effect": "Envoyer le message avec un effet lié au thème de l’espace",
     "See when people join, leave, or are invited to your active room": "Afficher quand des personnes rejoignent, partent, ou sont invités dans votre salon actif",
-    "Kick, ban, or invite people to your active room, and make you leave": "Expulser, bannir ou inviter des personnes dans votre salon actif et en partir"
+    "Kick, ban, or invite people to your active room, and make you leave": "Expulser, bannir ou inviter des personnes dans votre salon actif et en partir",
+    "Currently joining %(count)s rooms|one": "Vous êtes en train de rejoindre %(count)s salon",
+    "Currently joining %(count)s rooms|other": "Vous êtes en train de rejoindre %(count)s salons",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Essayez d'autres mots ou vérifiez les fautes de frappe. Certains salons peuvent ne pas être visibles car ils sont privés et vous devez être invité pour les rejoindre.",
+    "No results for \"%(query)s\"": "Aucun résultat pour « %(query)s »",
+    "The user you called is busy.": "L’utilisateur que vous avez appelé est indisponible.",
+    "User Busy": "Utilisateur indisponible"
 }

From 3f12b7280d801ac505caec71d2a2c095ab68d3c9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 3 Jun 2021 08:31:06 +0100
Subject: [PATCH 0202/1270] Make AutoHideScrollbar pass through all unknown
 props

---
 .../structures/AutoHideScrollbar.tsx           | 18 +++++++++++-------
 .../structures/IndicatorScrollbar.js           | 11 +++++++----
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/structures/AutoHideScrollbar.tsx b/src/components/structures/AutoHideScrollbar.tsx
index 66f998b616..e5fa124fed 100644
--- a/src/components/structures/AutoHideScrollbar.tsx
+++ b/src/components/structures/AutoHideScrollbar.tsx
@@ -15,9 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, {HTMLAttributes} from "react";
 
-interface IProps {
+interface IProps extends HTMLAttributes {
     className?: string;
     onScroll?: () => void;
     onWheel?: () => void;
@@ -52,14 +52,18 @@ export default class AutoHideScrollbar extends React.Component {
     }
 
     public render() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { className, onScroll, onWheel, style, tabIndex, wrappedRef, children, ...otherProps } = this.props;
+
         return (
    
-            { this.props.children }
+            { children }
         
    );
     }
 }
diff --git a/src/components/structures/IndicatorScrollbar.js b/src/components/structures/IndicatorScrollbar.js
index 51a3b287f0..25dcaeed39 100644
--- a/src/components/structures/IndicatorScrollbar.js
+++ b/src/components/structures/IndicatorScrollbar.js
@@ -185,21 +185,24 @@ export default class IndicatorScrollbar extends React.Component {
     };
 
     render() {
+        // eslint-disable-next-line no-unused-vars
+        const { children, trackHorizontalOverflow, verticalScrollsHorizontally, ...otherProps } = this.props;
+
         const leftIndicatorStyle = {left: this.state.leftIndicatorOffset};
         const rightIndicatorStyle = {right: this.state.rightIndicatorOffset};
-        const leftOverflowIndicator = this.props.trackHorizontalOverflow
+        const leftOverflowIndicator = trackHorizontalOverflow
             ? 
     : null;
-        const rightOverflowIndicator = this.props.trackHorizontalOverflow
+        const rightOverflowIndicator = trackHorizontalOverflow
             ? 
     : null;
 
         return (
             { leftOverflowIndicator }
-            { this.props.children }
+            { children }
             { rightOverflowIndicator }
         );
     }

From e334ce81920723832c9260b0f009df88805e22a1 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 3 Jun 2021 08:32:36 +0100
Subject: [PATCH 0203/1270] First cut of space panel drag-and-drop ordering

---
 package.json                                  |   2 +
 res/css/structures/_SpacePanel.scss           |   7 +-
 src/components/views/spaces/SpacePanel.tsx    | 136 +++++++++++-------
 .../views/spaces/SpaceTreeLevel.tsx           |  27 ++--
 src/stores/SpaceStore.tsx                     |  71 +++++++--
 yarn.lock                                     | 100 ++++++++++++-
 6 files changed, 263 insertions(+), 80 deletions(-)

diff --git a/package.json b/package.json
index 270c86ddba..2d2506e1df 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "qs": "^6.9.6",
     "re-resizable": "^6.9.0",
     "react": "^16.14.0",
+    "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^16.14.0",
     "react-focus-lock": "^2.5.0",
     "react-transition-group": "^4.4.1",
@@ -135,6 +136,7 @@
     "@types/parse5": "^6.0.0",
     "@types/qrcode": "^1.3.5",
     "@types/react": "^16.9",
+    "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^16.9.10",
     "@types/react-transition-group": "^4.4.0",
     "@types/sanitize-html": "^2.3.1",
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index c433ccf275..e64057d16c 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -31,7 +31,6 @@ $activeBorderColor: $secondary-fg-color;
     // Create another flexbox so the Panel fills the container
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
 
     .mx_SpacePanel_spaceTreeWrapper {
         flex: 1;
@@ -69,6 +68,12 @@ $activeBorderColor: $secondary-fg-color;
         cursor: pointer;
     }
 
+    .mx_SpaceItem_dragging {
+        .mx_SpaceButton_toggleCollapse {
+            visibility: hidden;
+        }
+    }
+
     .mx_SpaceTreeLevel {
         display: flex;
         flex-direction: column;
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index eb63b21f0e..27f097e9d4 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import React, { useEffect, useState } from "react";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import classNames from "classnames";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 import {_t} from "../../../languageHandler";
 import RoomAvatar from "../avatars/RoomAvatar";
@@ -204,58 +205,89 @@ const SpacePanel = () => {
     };
 
     const activeSpaces = activeSpace ? [activeSpace] : [];
-    const expandCollapseButtonTitle = isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel");
-    // TODO drag and drop for re-arranging order
-    return 
-        {({onKeyDownHandler}) => (
-            
      
-                
-                    
      
-                         SpaceStore.instance.setActiveSpace(null)}
-                            selected={!activeSpace}
-                            tooltip={_t("All rooms")}
-                            notificationState={RoomNotificationStateStore.instance.globalState}
-                            isNarrow={isPanelCollapsed}
+    return (
+         {
+            if (!result.destination) return; // dropped outside the list
+            SpaceStore.instance.moveRootSpace(result.source.index, result.destination.index);
+        }}>
+            
+                {({onKeyDownHandler}) => (
+                    
        
+                        
+                            {(provided, snapshot) => (
+                                
+                                    
        
+                                         SpaceStore.instance.setActiveSpace(null)}
+                                            selected={!activeSpace}
+                                            tooltip={_t("All rooms")}
+                                            notificationState={RoomNotificationStateStore.instance.globalState}
+                                            isNarrow={isPanelCollapsed}
+                                        />
+                                        { invites.map(s => (
+                                             setPanelCollapsed(false)}
+                                            />
+                                        )) }
+                                        { spaces.map((s, i) => (
+                                            
+                                                {(provided, snapshot) => (
+                                                     setPanelCollapsed(false)}
+                                                    />
+                                                )}
+                                            
+                                        )) }
+                                        { provided.placeholder }
+                                    
        
+                                     {
+                                            if (!isPanelCollapsed) setPanelCollapsed(true);
+                                            openMenu();
+                                        }}
+                                        isNarrow={isPanelCollapsed}
+                                    />
+                                        
+                            )}
+                                
+                         setPanelCollapsed(!isPanelCollapsed)}
+                            title={isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel")}
                         />
-                        { invites.map(s =>  setPanelCollapsed(false)}
-                        />) }
-                        { spaces.map(s =>  setPanelCollapsed(false)}
-                        />) }
-                    
      
-                     {
-                            if (!isPanelCollapsed) setPanelCollapsed(true);
-                            openMenu();
-                        }}
-                        isNarrow={isPanelCollapsed}
-                    />
-                      
-                 setPanelCollapsed(!isPanelCollapsed)}
-                    title={expandCollapseButtonTitle}
-                />
-                { contextMenu }
-            
    
-        )}
-        
+                        { contextMenu }
+                    
+                )}
+            
+        
+    );
 };
 
 export default SpacePanel;
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index f34baf256b..7ac863b239 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, {InputHTMLAttributes, LegacyRef} from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
 
@@ -49,13 +49,14 @@ import {EventType} from "matrix-js-sdk/src/@types/event";
 import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
 import {NotificationColor} from "../../../stores/notifications/NotificationColor";
 
-interface IItemProps {
+interface IItemProps extends InputHTMLAttributes {
     space?: Room;
     activeSpaces: Room[];
     isNested?: boolean;
     isPanelCollapsed?: boolean;
     onExpand?: Function;
     parents?: Set;
+    innerRef?: LegacyRef;
 }
 
 interface IItemState {
@@ -300,18 +301,18 @@ export class SpaceItem extends React.PureComponent {
     }
 
     render() {
-        const {space, activeSpaces, isNested} = this.props;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { space, activeSpaces, isNested, isPanelCollapsed, onExpand, parents, innerRef,
+            ...otherProps } = this.props;
 
-        const forceCollapsed = this.props.isPanelCollapsed;
-        const isNarrow = this.props.isPanelCollapsed;
-        const collapsed = this.state.collapsed || forceCollapsed;
+        const collapsed = this.state.collapsed || isPanelCollapsed;
 
         const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId)
-            .filter(s => !this.props.parents?.has(s.roomId));
+            .filter(s => !parents?.has(s.roomId));
         const isActive = activeSpaces.includes(space);
-        const itemClasses = classNames({
+        const itemClasses = classNames(this.props.className, {
             "mx_SpaceItem": true,
-            "mx_SpaceItem_narrow": isNarrow,
+            "mx_SpaceItem_narrow": isPanelCollapsed,
             "collapsed": collapsed,
             "hasSubSpaces": childSpaces && childSpaces.length,
         });
@@ -320,7 +321,7 @@ export class SpaceItem extends React.PureComponent {
         const classes = classNames("mx_SpaceButton", {
             mx_SpaceButton_active: isActive,
             mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition,
-            mx_SpaceButton_narrow: isNarrow,
+            mx_SpaceButton_narrow: isPanelCollapsed,
             mx_SpaceButton_invite: isInvite,
         });
         const notificationState = isInvite
@@ -333,7 +334,7 @@ export class SpaceItem extends React.PureComponent {
                 spaces={childSpaces}
                 activeSpaces={activeSpaces}
                 isNested={true}
-                parents={new Set(this.props.parents).add(this.props.space.roomId)}
+                parents={new Set(parents).add(space.roomId)}
             />;
         }
 
@@ -353,7 +354,7 @@ export class SpaceItem extends React.PureComponent {
             /> : null;
 
         let button;
-        if (isNarrow) {
+        if (isPanelCollapsed) {
             button = (
                  {
         }
 
         return (
-            
  • 
+            
  • 
                 { button }
                 { childItems }
             
    • 
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 1333fc5d37..9ef961ce2d 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -63,12 +63,6 @@ const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces,
 
 const SpaceTagOrderingField = "org.matrix.mscXXXX.space";
 
-const getSpaceTagOrdering = (space: Room): number | undefined => {
-    return space?.getAccountData(EventType.Tag)?.getContent()?.tags?.[SpaceTagOrderingField]?.order;
-};
-
-const sortRootSpaces = (spaces: Room[]): Room[] => sortBy(spaces, [getSpaceTagOrdering, "roomId"]);
-
 // For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
 export const getChildOrder = (order: string, creationTs: number, roomId: string): Array>> => {
     let validatedOrder: string = null;
@@ -104,6 +98,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
     private _activeSpace?: Room = null;
     private _suggestedRooms: ISuggestedRoom[] = [];
     private _invitedSpaces = new Set();
+    private spaceOrderLocalEchoMap = new Map();
 
     public get invitedSpaces(): Room[] {
         return Array.from(this._invitedSpaces);
@@ -335,7 +330,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         //     rootSpaces.push(space);
         // });
 
-        this.rootSpaces = sortRootSpaces(rootSpaces);
+        this.rootSpaces = this.sortRootSpaces(rootSpaces);
         this.parentMap = backrefs;
 
         // if the currently selected space no longer exists, remove its selection
@@ -347,7 +342,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces);
 
         // build initial state of invited spaces as we would have missed the emitted events about the room at launch
-        this._invitedSpaces = new Set(sortRootSpaces(invitedSpaces));
+        this._invitedSpaces = new Set(this.sortRootSpaces(invitedSpaces));
         this.emit(UPDATE_INVITED_SPACES, this.invitedSpaces);
     }, 100, {trailing: true, leading: true});
 
@@ -484,17 +479,22 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
     private onRoomAccountData = (ev: MatrixEvent, room: Room, lastEv?: MatrixEvent) => {
         if (!room.isSpaceRoom() || ev.getType() !== EventType.Tag) return;
 
+        this.spaceOrderLocalEchoMap.delete(room.roomId); // clear any local echo
         const order = ev.getContent()?.tags?.[SpaceTagOrderingField]?.order;
         const lastOrder = lastEv?.getContent()?.tags?.[SpaceTagOrderingField]?.order;
         if (order !== lastOrder) {
-            const rootSpaces = sortRootSpaces(this.rootSpaces);
-            if (arrayHasOrderChange(this.rootSpaces, rootSpaces)) {
-                this.rootSpaces = rootSpaces;
-                this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces);
-            }
+            this.notifyIfOrderChanged();
         }
     };
 
+    private notifyIfOrderChanged(): void {
+        const rootSpaces = this.sortRootSpaces(this.rootSpaces);
+        if (arrayHasOrderChange(this.rootSpaces, rootSpaces)) {
+            this.rootSpaces = rootSpaces;
+            this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces);
+        }
+    }
+
     private onRoomState = (ev: MatrixEvent) => {
         const room = this.matrixClient.getRoom(ev.getRoomId());
         if (!room) return;
@@ -624,6 +624,51 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         }
         childSpaces.forEach(s => this.traverseSpace(s.roomId, fn, includeRooms, newPath));
     }
+
+    private getSpaceTagOrdering = (space: Room): number | undefined => {
+        if (this.spaceOrderLocalEchoMap.has(space.roomId)) return this.spaceOrderLocalEchoMap.get(space.roomId);
+        return space.tags?.[SpaceTagOrderingField]?.order;
+    };
+
+    private sortRootSpaces(spaces: Room[]): Room[] {
+        return sortBy(spaces, [this.getSpaceTagOrdering, "roomId"]);
+    }
+
+    public moveRootSpace(fromIndex: number, toIndex: number): void {
+        if (
+            fromIndex < 0 || toIndex < 0 ||
+            fromIndex > this.rootSpaces.length || toIndex > this.rootSpaces.length ||
+            fromIndex === toIndex
+        ) {
+            return;
+        }
+        const space = this.rootSpaces[fromIndex];
+        const orders = this.rootSpaces.map(this.getSpaceTagOrdering);
+
+        let prevOrder = orders[toIndex - 1];
+        let nextOrder = orders[toIndex]; // accounts for downwards displacement of existing inhabitant of this index
+
+        if (prevOrder === undefined && nextOrder === undefined) {
+            // TODO WHAT A PAIN
+        }
+
+        prevOrder = prevOrder || 0.0;
+        nextOrder = nextOrder || 1.0;
+
+        if (prevOrder !== nextOrder) {
+            const order = prevOrder + ((nextOrder - prevOrder) / 2);
+            this.spaceOrderLocalEchoMap.set(space.roomId, order);
+            this.matrixClient.setRoomAccountData(space.roomId, EventType.Tag, {
+                tags: {
+                    ...space.tags,
+                    [SpaceTagOrderingField]: { order },
+                },
+            });
+            this.notifyIfOrderChanged();
+        } else {
+            // TODO REBUILD
+        }
+    }
 }
 
 export default class SpaceStore {
diff --git a/yarn.lock b/yarn.lock
index 2c84237730..7e24c220e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1024,6 +1024,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.9.2":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.7", "@babel/template@^7.3.3":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
@@ -1504,6 +1511,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -1620,6 +1635,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/react-beautiful-dnd@^13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz#e60d3d965312fcf1516894af92dc3e9249587db4"
+  integrity sha512-by80tJ8aTTDXT256Gl+RfLRtFjYbUWOnZuEigJgNsJrSEGxvFe5eY6k3g4VIvf0M/6+xoLgfYWoWonlOo6Wqdg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.9.10":
   version "16.9.10"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.10.tgz#4485b0bec3d41f856181b717f45fd7831101156f"
@@ -1627,6 +1649,16 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-redux@^7.1.16":
+  version "7.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
+  integrity sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-transition-group@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
@@ -2696,6 +2728,13 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-select@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.2.tgz#8b52b6714ed3a80d8221ec971c543f3b12653286"
@@ -4202,6 +4241,13 @@ highlight.js@^10.5.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.5.0.tgz#3f09fede6a865757378f2d9ebdcbc15ba268f98f"
   integrity sha512-xTmvd9HiIHR6L53TMC7TKolEj65zG1XU+Onr8oi86mYa+nLcIbxTTWkpW7CsEwv/vK7u1zb8alZIMLDqqN6KTw==
 
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -5717,6 +5763,11 @@ mdurl@~1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -6632,6 +6683,11 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+raf-schd@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
+
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -6659,6 +6715,19 @@ re-resizable@^6.9.0:
   dependencies:
     fast-memoize "^2.5.1"
 
+react-beautiful-dnd@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d"
+  integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.2.0"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
+
 react-clientside-effect@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.3.tgz#95c95f520addfb71743608b990bfe01eb002012b"
@@ -6688,7 +6757,7 @@ react-focus-lock@^2.5.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
-react-is@^16.13.1, react-is@^16.8.1, react-is@^16.8.6:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -6698,6 +6767,18 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-redux@^7.2.0:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
+  integrity sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/react-redux" "^7.1.16"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 react-test-renderer@^16.0.0-0, react-test-renderer@^16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
@@ -6818,6 +6899,13 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux@^4.0.0, redux@^4.0.4:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.0.tgz#eb049679f2f523c379f1aff345c8612f294c88d4"
+  integrity sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 reflect.ownkeys@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
@@ -7765,6 +7853,11 @@ through@^2.3.6:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
+tiny-invariant@^1.0.6:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
 tmatch@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/tmatch/-/tmatch-2.0.1.tgz#0c56246f33f30da1b8d3d72895abaf16660f38cf"
@@ -8070,6 +8163,11 @@ use-callback-ref@^1.2.1:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
   integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
 
+use-memo-one@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
+  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+
 use-sidecar@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.4.tgz#38398c3723727f9f924bed2343dfa3db6aaaee46"

From dbaa394d65c640581f3ef89f52aba13e4801cc3a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 3 Jun 2021 08:54:30 +0100
Subject: [PATCH 0204/1270] i18n

---
 src/i18n/strings/en_EN.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 85647a17e5..2a5297122f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1018,9 +1018,9 @@
     "You can change these anytime.": "You can change these anytime.",
     "Creating...": "Creating...",
     "Create": "Create",
+    "All rooms": "All rooms",
     "Expand space panel": "Expand space panel",
     "Collapse space panel": "Collapse space panel",
-    "All rooms": "All rooms",
     "Click to copy": "Click to copy",
     "Copied!": "Copied!",
     "Failed to copy": "Failed to copy",

From 0c97d90fb98f08204c1d7853e0c0f6c30820e5a3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 3 Jun 2021 16:44:28 +0100
Subject: [PATCH 0205/1270] Iterate PR based on feedback

---
 res/css/views/dialogs/_InviteDialog.scss      |  6 +++++-
 src/components/views/dialogs/InviteDialog.tsx | 16 +++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 8c0421b989..2e48b5d8e9 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -302,7 +302,11 @@ limitations under the License.
     margin-top: 4px;
     overflow-y: auto;
     padding: 0 45px 4px 0;
-    height: calc(100% - 175px); // mx_InviteDialog's height minus some for the upper  and lower elements
+    height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
+}
+
+.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
+    height: calc(100% - 175px);
 }
 
 .mx_InviteDialog_helpText {
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 5cbcb12c4f..557ea416a8 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
+import classNames from 'classnames';
+
 import {_t, _td} from "../../../languageHandler";
 import * as sdk from "../../../index";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -1252,7 +1254,7 @@ export default class InviteDialog extends React.PureComponent {
         e.preventDefault();
         const target = e.target; // copy target before we go async and React throws it away
 
@@ -1264,7 +1266,7 @@ export default class InviteDialog extends React.PureComponent
+                    >
+                        
    
+                    
                 
    
             
    
         } else if (this.props.kind === KIND_INVITE) {
@@ -1437,7 +1441,9 @@ export default class InviteDialog extends React.PureComponent
Date: Fri, 4 Jun 2021 07:42:17 +0200
Subject: [PATCH 0206/1270] Return null
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/CallHandler.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx
index 15008a640a..9a1c416cdb 100644
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@@ -305,6 +305,7 @@ export default class CallHandler extends EventEmitter {
         for (const call of this.calls.values()) {
             if (call.callId === callId) return call;
         }
+        return null;
     }
 
     getCallForRoom(roomId: string): MatrixCall {

From 3b2d6d442f96d80f4cb6f5de210e248545272eca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Fri, 4 Jun 2021 07:43:30 +0200
Subject: [PATCH 0207/1270] Translate unknown call state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/CallEvent.tsx | 3 +--
 src/i18n/strings/en_EN.json                 | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 85b9e7f365..6139a2df6b 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -148,10 +148,9 @@ export default class CallEvent extends React.Component {
             );
         }
 
-        // XXX: Should we translate this?
         return (
             
    
-                { "The call is in an unknown state!" }
+                { _t("The call is in an unknown state!") }
             
    
         );
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 573f22a7f3..2db181285a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1810,6 +1810,7 @@
     "This call has failed": "This call has failed",
     "You missed this call": "You missed this call",
     "Call back": "Call back",
+    "The call is in an unknown state!": "The call is in an unknown state!",
     "Sunday": "Sunday",
     "Monday": "Monday",
     "Tuesday": "Tuesday",

From 48bd6583ed3e1431a995074dcb50ca47146f61a0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 4 Jun 2021 11:34:54 +0100
Subject: [PATCH 0208/1270] Fix unpinning of pinned messages

---
 src/components/views/right_panel/PinnedMessagesCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx
index a3f1f2d9df..55809ee02b 100644
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -155,7 +155,7 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
 
         // show them in reverse, with latest pinned at the top
         content = pinnedEvents.filter(Boolean).reverse().map(ev => (
-            
+             onUnpinClicked(ev)} />
         ));
     } else {
         content = 
    

From 93f41ce0ab484172a76f0e07e4036eace2fe9bce Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 4 Jun 2021 11:35:17 +0100
Subject: [PATCH 0209/1270] Actually finish the empty state for the pinned
 messages card

---
 .../right_panel/_PinnedMessagesCard.scss      | 55 +++++++++++++++++++
 .../views/right_panel/PinnedMessagesCard.tsx  | 17 +++++-
 src/i18n/strings/en_EN.json                   |  6 +-
 3 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss
index b6b8238bed..785aee09ca 100644
--- a/res/css/views/right_panel/_PinnedMessagesCard.scss
+++ b/res/css/views/right_panel/_PinnedMessagesCard.scss
@@ -32,4 +32,59 @@ limitations under the License.
             margin-right: 6px;
         }
     }
+
+    .mx_PinnedMessagesCard_empty {
+        display: flex;
+        height: 100%;
+
+        > div {
+            height: max-content;
+            text-align: center;
+            margin: auto 40px;
+
+            .mx_PinnedMessagesCard_MessageActionBar {
+                pointer-events: none;
+                display: flex;
+                height: 32px;
+                line-height: $font-24px;
+                border-radius: 8px;
+                background: $primary-bg-color;
+                border: 1px solid $input-border-color;
+                padding: 1px;
+                width: max-content;
+                margin: 0 auto;
+                box-sizing: border-box;
+
+                .mx_MessageActionBar_maskButton {
+                    display: inline-block;
+                    position: relative;
+                }
+
+                .mx_MessageActionBar_optionsButton {
+                    background: $roomlist-button-bg-color;
+                    border-radius: 6px;
+                    z-index: 1;
+
+                    &::after {
+                        background-color: $primary-fg-color;
+                    }
+                }
+            }
+
+            > h2 {
+                font-weight: $font-semi-bold;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $primary-fg-color;
+                margin-top: 24px;
+                margin-bottom: 20px;
+            }
+
+            > span {
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $secondary-fg-color;
+            }
+        }
+    }
 }
diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx
index 55809ee02b..3a4dc9cc92 100644
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -158,9 +158,20 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
              onUnpinClicked(ev)} />
         ));
     } else {
-        content = 
    
-            
    {_t("You’re all caught up")}
    
-            
    {_t("You have no visible notifications.")}
    
+        content = 
    
+            
    
+                
    
+                    
    
+                    
    
+                    
    
+                
    
+
+                
    { _t("Nothing pinned, yet") }
    
+                { _t("If you have permissions, open the menu on any message and select " +
+                    "Pin to stick them here.", {}, {
+                        b: sub => { sub },
+                }) }
+            
    
         
    ;
     }
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9e85ea28c8..302c8709fa 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1717,8 +1717,8 @@
     "The homeserver the user you’re verifying is connected to": "The homeserver the user you’re verifying is connected to",
     "Yours, or the other users’ internet connection": "Yours, or the other users’ internet connection",
     "Yours, or the other users’ session": "Yours, or the other users’ session",
-    "You’re all caught up": "You’re all caught up",
-    "You have no visible notifications.": "You have no visible notifications.",
+    "Nothing pinned, yet": "Nothing pinned, yet",
+    "If you have permissions, open the menu on any message and select Pin to stick them here.": "If you have permissions, open the menu on any message and select Pin to stick them here.",
     "Pinned messages": "Pinned messages",
     "Room Info": "Room Info",
     "You can only pin up to %(count)s widgets|other": "You can only pin up to %(count)s widgets",
@@ -2628,6 +2628,8 @@
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",
     "Communities are changing to Spaces": "Communities are changing to Spaces",
+    "You’re all caught up": "You’re all caught up",
+    "You have no visible notifications.": "You have no visible notifications.",
     "%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.": "%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.",
     "%(brand)s failed to get the public room list.": "%(brand)s failed to get the public room list.",
     "The homeserver may be unavailable or overloaded.": "The homeserver may be unavailable or overloaded.",

From 31604c13c04f1a0738038725718889ca9d47ca0a Mon Sep 17 00:00:00 2001
From: David Baker 
Date: Fri, 4 Jun 2021 16:52:50 +0100
Subject: [PATCH 0210/1270] Lint the typescript tests

Turns out we hadn't told eslint to lint .ts in tests/

Also fix all the lint errors, including removing a use of assert that
had randomly crept in.
---
 .eslintrc.js                    |  2 +-
 test/CallHandler-test.ts        |  1 -
 test/KeyBindingsManager-test.ts | 98 ++++++++++++++++-----------------
 test/stores/SpaceStore-test.ts  |  2 +-
 4 files changed, 50 insertions(+), 53 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 9ae51f9bc5..c759eae9e3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -18,7 +18,7 @@ module.exports = {
     },
 
     overrides: [{
-        "files": ["src/**/*.{ts,tsx}"],
+        "files": ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
         "extends": ["matrix-org/ts"],
         "rules": {
             // We're okay being explicit at the moment
diff --git a/test/CallHandler-test.ts b/test/CallHandler-test.ts
index 12316ac01c..4c3dd25fb4 100644
--- a/test/CallHandler-test.ts
+++ b/test/CallHandler-test.ts
@@ -25,7 +25,6 @@ import DMRoomMap from '../src/utils/DMRoomMap';
 import EventEmitter from 'events';
 import SdkConfig from '../src/SdkConfig';
 import { ActionPayload } from '../src/dispatcher/payloads';
-import { Actions } from '../src/notifications/types';
 import { Action } from '../src/dispatcher/actions';
 
 const REAL_ROOM_ID = '$room1:example.org';
diff --git a/test/KeyBindingsManager-test.ts b/test/KeyBindingsManager-test.ts
index 41614b61fa..694efac7b5 100644
--- a/test/KeyBindingsManager-test.ts
+++ b/test/KeyBindingsManager-test.ts
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import { isKeyComboMatch, KeyCombo } from '../src/KeyBindingsManager';
-const assert = require('assert');
 
 function mockKeyEvent(key: string, modifiers?: {
     ctrlKey?: boolean,
@@ -28,7 +27,7 @@ function mockKeyEvent(key: string, modifiers?: {
         ctrlKey: modifiers?.ctrlKey ?? false,
         altKey: modifiers?.altKey ?? false,
         shiftKey: modifiers?.shiftKey ?? false,
-        metaKey: modifiers?.metaKey ?? false
+        metaKey: modifiers?.metaKey ?? false,
     } as KeyboardEvent;
 }
 
@@ -37,9 +36,8 @@ describe('KeyBindingsManager', () => {
         const combo1: KeyCombo = {
             key: 'k',
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k'), combo1, false), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n'), combo1, false), false);
-
+        expect(isKeyComboMatch(mockKeyEvent('k'), combo1, false)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('n'), combo1, false)).toBe(false);
     });
 
     it('should match key + modifier key combo', () => {
@@ -47,38 +45,38 @@ describe('KeyBindingsManager', () => {
             key: 'k',
             ctrlKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, false), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k'), combo, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true }), combo, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true, metaKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, false)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k'), combo, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true }), combo, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true, metaKey: true }), combo, false)).toBe(false);
 
         const combo2: KeyCombo = {
             key: 'k',
             metaKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo2, false), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { metaKey: true }), combo2, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k'), combo2, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { altKey: true, metaKey: true }), combo2, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo2, false)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('n', { metaKey: true }), combo2, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k'), combo2, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { altKey: true, metaKey: true }), combo2, false)).toBe(false);
 
         const combo3: KeyCombo = {
             key: 'k',
             altKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { altKey: true }), combo3, false), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { altKey: true }), combo3, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k'), combo3, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo3, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { altKey: true }), combo3, false)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('n', { altKey: true }), combo3, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k'), combo3, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo3, false)).toBe(false);
 
         const combo4: KeyCombo = {
             key: 'k',
             shiftKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true }), combo4, false), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { shiftKey: true }), combo4, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k'), combo4, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true, ctrlKey: true }), combo4, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true }), combo4, false)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('n', { shiftKey: true }), combo4, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k'), combo4, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { shiftKey: true, ctrlKey: true }), combo4, false)).toBe(false);
     });
 
     it('should match key + multiple modifiers key combo', () => {
@@ -87,11 +85,11 @@ describe('KeyBindingsManager', () => {
             ctrlKey: true,
             altKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, false), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true, altKey: true }), combo, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true, shiftKey: true }), combo,
-            false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, false)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true, altKey: true }), combo, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true, shiftKey: true }), combo,
+            false)).toBe(false);
 
         const combo2: KeyCombo = {
             key: 'k',
@@ -99,13 +97,13 @@ describe('KeyBindingsManager', () => {
             shiftKey: true,
             altKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, shiftKey: true, altKey: true }), combo2,
-            false), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true, shiftKey: true, altKey: true }), combo2,
-            false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo2, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k',
-            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo2, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, shiftKey: true, altKey: true }), combo2,
+            false)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true, shiftKey: true, altKey: true }), combo2,
+            false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, metaKey: true }), combo2, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k',
+            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo2, false)).toBe(false);
 
         const combo3: KeyCombo = {
             key: 'k',
@@ -114,12 +112,12 @@ describe('KeyBindingsManager', () => {
             altKey: true,
             metaKey: true,
         };
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k',
-            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo3, false), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n',
-            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo3, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k',
-            { ctrlKey: true, shiftKey: true, altKey: true }), combo3, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k',
+            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo3, false)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('n',
+            { ctrlKey: true, shiftKey: true, altKey: true, metaKey: true }), combo3, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('k',
+            { ctrlKey: true, shiftKey: true, altKey: true }), combo3, false)).toBe(false);
     });
 
     it('should match ctrlOrMeta key combo', () => {
@@ -128,13 +126,13 @@ describe('KeyBindingsManager', () => {
             ctrlOrCmd: true,
         };
         // PC:
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, false), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo, false), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, false)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo, false)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, false)).toBe(false);
         // MAC:
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo, true), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, true), false);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, true), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { metaKey: true }), combo, true)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true }), combo, true)).toBe(false);
+        expect(isKeyComboMatch(mockKeyEvent('n', { ctrlKey: true }), combo, true)).toBe(false);
     });
 
     it('should match advanced ctrlOrMeta key combo', () => {
@@ -144,10 +142,10 @@ describe('KeyBindingsManager', () => {
             altKey: true,
         };
         // PC:
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, false), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { metaKey: true, altKey: true }), combo, false), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, false)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { metaKey: true, altKey: true }), combo, false)).toBe(false);
         // MAC:
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { metaKey: true, altKey: true }), combo, true), true);
-        assert.strictEqual(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, true), false);
+        expect(isKeyComboMatch(mockKeyEvent('k', { metaKey: true, altKey: true }), combo, true)).toBe(true);
+        expect(isKeyComboMatch(mockKeyEvent('k', { ctrlKey: true, altKey: true }), combo, true)).toBe(false);
     });
 });
diff --git a/test/stores/SpaceStore-test.ts b/test/stores/SpaceStore-test.ts
index 20c48c29db..01bd528b87 100644
--- a/test/stores/SpaceStore-test.ts
+++ b/test/stores/SpaceStore-test.ts
@@ -21,7 +21,7 @@ import "../skinned-sdk"; // Must be first for skinning to work
 import SpaceStore, {
     UPDATE_INVITED_SPACES,
     UPDATE_SELECTED_SPACE,
-    UPDATE_TOP_LEVEL_SPACES
+    UPDATE_TOP_LEVEL_SPACES,
 } from "../../src/stores/SpaceStore";
 import { resetAsyncStoreWithClient, setupAsyncStoreWithClient } from "../utils/test-utils";
 import { mkEvent, mkStubRoom, stubClient } from "../test-utils";

From 40d2f8228f4d2a3f7f386d320c42ae1970932ee4 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 5 Jun 2021 01:16:52 -0400
Subject: [PATCH 0211/1270] Fix watching settings

An accidental variable shadowing was preventing setting watcher
callbacks from being fired.

Signed-off-by: Robin Townsend 
---
 src/settings/WatchManager.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/settings/WatchManager.ts b/src/settings/WatchManager.ts
index 56f911f180..744d75b136 100644
--- a/src/settings/WatchManager.ts
+++ b/src/settings/WatchManager.ts
@@ -63,8 +63,7 @@ export class WatchManager {
 
         if (!inRoomId) {
             // Fire updates to all the individual room watchers too, as they probably care about the change higher up.
-            const callbacks = Array.from(roomWatchers.values()).flat(1);
-            callbacks.push(...callbacks);
+            callbacks.push(...Array.from(roomWatchers.values()).flat(1));
         } else if (roomWatchers.has(IRRELEVANT_ROOM)) {
             callbacks.push(...roomWatchers.get(IRRELEVANT_ROOM));
         }

From 48d3e41351bd869c232176d956d8254d17f5dc77 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 5 Jun 2021 01:23:51 -0400
Subject: [PATCH 0212/1270] Cache frequently used settings values in
 RoomContext

Signed-off-by: Robin Townsend 
---
 src/components/structures/RoomView.tsx | 64 +++++++++++++++++++++-----
 src/contexts/RoomContext.ts            |  6 ++-
 2 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 5ffc2fd0da..fa67013ccb 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -155,7 +155,6 @@ export interface IState {
     canPeek: boolean;
     showApps: boolean;
     isPeeking: boolean;
-    showReadReceipts: boolean;
     showRightPanel: boolean;
     // error object, as from the matrix client/server API
     // If we failed to load information about the room,
@@ -183,6 +182,11 @@ export interface IState {
     canReact: boolean;
     canReply: boolean;
     layout: Layout;
+    showReadReceipts: boolean;
+    showRedactions: boolean;
+    showJoinLeaves: boolean;
+    showAvatarChanges: boolean;
+    showDisplaynameChanges: boolean;
     matrixClientIsReady: boolean;
     showUrlPreview?: boolean;
     e2eStatus?: E2EStatus;
@@ -200,8 +204,7 @@ export default class RoomView extends React.Component {
     private readonly dispatcherRef: string;
     private readonly roomStoreToken: EventSubscription;
     private readonly rightPanelStoreToken: EventSubscription;
-    private readonly showReadReceiptsWatchRef: string;
-    private readonly layoutWatcherRef: string;
+    private settingWatchers: string[];
 
     private unmounted = false;
     private permalinkCreators: Record = {};
@@ -232,7 +235,6 @@ export default class RoomView extends React.Component {
             canPeek: false,
             showApps: false,
             isPeeking: false,
-            showReadReceipts: true,
             showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
             joining: false,
             atEndOfLiveTimeline: true,
@@ -242,6 +244,11 @@ export default class RoomView extends React.Component {
             canReact: false,
             canReply: false,
             layout: SettingsStore.getValue("layout"),
+            showReadReceipts: true,
+            showRedactions: true,
+            showJoinLeaves: true,
+            showAvatarChanges: true,
+            showDisplaynameChanges: true,
             matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
             dragCounter: 0,
         };
@@ -268,9 +275,11 @@ export default class RoomView extends React.Component {
         WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
         WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
 
-        this.showReadReceiptsWatchRef = SettingsStore.watchSetting("showReadReceipts", null,
-            this.onReadReceiptsChange);
-        this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, this.onLayoutChange);
+        this.settingWatchers = [
+            SettingsStore.watchSetting("layout", null, () =>
+                this.setState({ layout: SettingsStore.getValue("layout") }),
+            ),
+        ];
     }
 
     private onWidgetStoreUpdate = () => {
@@ -327,9 +336,42 @@ export default class RoomView extends React.Component {
             // we should only peek once we have a ready client
             shouldPeek: this.state.matrixClientIsReady && RoomViewStore.shouldPeek(),
             showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
+            showRedactions: SettingsStore.getValue("showRedactions", roomId),
+            showJoinLeaves: SettingsStore.getValue("showJoinLeaves", roomId),
+            showAvatarChanges: SettingsStore.getValue("showAvatarChanges", roomId),
+            showDisplaynameChanges: SettingsStore.getValue("showDisplaynameChanges", roomId),
             wasContextSwitch: RoomViewStore.getWasContextSwitch(),
         };
 
+        // Add watchers for each of the settings we just looked up
+        this.settingWatchers = this.settingWatchers.concat([
+            SettingsStore.watchSetting("showReadReceipts", null, () =>
+                this.setState({
+                    showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
+                }),
+            ),
+            SettingsStore.watchSetting("showRedactions", null, () =>
+                this.setState({
+                    showRedactions: SettingsStore.getValue("showRedactions", roomId),
+                }),
+            ),
+            SettingsStore.watchSetting("showJoinLeaves", null, () =>
+                this.setState({
+                    showJoinLeaves: SettingsStore.getValue("showJoinLeaves", roomId),
+                }),
+            ),
+            SettingsStore.watchSetting("showAvatarChanges", null, () =>
+                this.setState({
+                    showAvatarChanges: SettingsStore.getValue("showAvatarChanges", roomId),
+                }),
+            ),
+            SettingsStore.watchSetting("showDisplaynameChanges", null, () =>
+                this.setState({
+                    showDisplaynameChanges: SettingsStore.getValue("showDisplaynameChanges", roomId),
+                }),
+            ),
+        ]);
+
         if (!initial && this.state.shouldPeek && !newState.shouldPeek) {
             // Stop peeking because we have joined this room now
             this.context.stopPeeking();
@@ -638,10 +680,6 @@ export default class RoomView extends React.Component {
             );
         }
 
-        if (this.showReadReceiptsWatchRef) {
-            SettingsStore.unwatchSetting(this.showReadReceiptsWatchRef);
-        }
-
         // cancel any pending calls to the rate_limited_funcs
         this.updateRoomMembers.cancelPendingCall();
 
@@ -649,7 +687,9 @@ export default class RoomView extends React.Component {
         // console.log("Tinter.tint from RoomView.unmount");
         // Tinter.tint(); // reset colourscheme
 
-        SettingsStore.unwatchSetting(this.layoutWatcherRef);
+        for (const watcher of this.settingWatchers) {
+            SettingsStore.unwatchSetting(watcher);
+        }
     }
 
     private onUserScroll = () => {
diff --git a/src/contexts/RoomContext.ts b/src/contexts/RoomContext.ts
index e925f8624b..1efa1c03e7 100644
--- a/src/contexts/RoomContext.ts
+++ b/src/contexts/RoomContext.ts
@@ -31,7 +31,6 @@ const RoomContext = createContext({
     canPeek: false,
     showApps: false,
     isPeeking: false,
-    showReadReceipts: true,
     showRightPanel: true,
     joining: false,
     atEndOfLiveTimeline: true,
@@ -41,6 +40,11 @@ const RoomContext = createContext({
     canReact: false,
     canReply: false,
     layout: Layout.Group,
+    showReadReceipts: true,
+    showRedactions: true,
+    showJoinLeaves: true,
+    showAvatarChanges: true,
+    showDisplaynameChanges: true,
     matrixClientIsReady: false,
     dragCounter: 0,
 });

From 13196b8146919f8ef781904d02c1edfd5f376dfe Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 5 Jun 2021 01:25:01 -0400
Subject: [PATCH 0213/1270] Prefer cached settings values in shouldHideEvent

Signed-off-by: Robin Townsend 
---
 src/shouldHideEvent.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/shouldHideEvent.ts b/src/shouldHideEvent.ts
index 2a47b9c417..31d610b28b 100644
--- a/src/shouldHideEvent.ts
+++ b/src/shouldHideEvent.ts
@@ -17,6 +17,7 @@
 import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 
 import SettingsStore from "./settings/SettingsStore";
+import {IState} from "./components/structures/RoomView";
 
 interface IDiff {
     isMemberEvent: boolean;
@@ -47,11 +48,18 @@ function memberEventDiff(ev: MatrixEvent): IDiff {
     return diff;
 }
 
-export default function shouldHideEvent(ev: MatrixEvent): boolean {
-    // Wrap getValue() for readability. Calling the SettingsStore can be
-    // fairly resource heavy, so the checks below should avoid hitting it
-    // where possible.
-    const isEnabled = (name) => SettingsStore.getValue(name, ev.getRoomId());
+/**
+ * Determines whether the given event should be hidden from timelines.
+ * @param ev The event
+ * @param ctx An optional RoomContext to pull cached settings values from to avoid
+ *     hitting the settings store
+ */
+export default function shouldHideEvent(ev: MatrixEvent, ctx?: IState): boolean {
+    // Accessing the settings store directly can be expensive if done frequently,
+    // so we should prefer using cached values if a RoomContext is available
+    const isEnabled = ctx ?
+        name => ctx[name] :
+        name => SettingsStore.getValue(name, ev.getRoomId());
 
     // Hide redacted events
     if (ev.isRedacted() && !isEnabled('showRedactions')) return true;

From 3bf8e54d7f37477868c1fa229449749bd02f2894 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 5 Jun 2021 01:25:43 -0400
Subject: [PATCH 0214/1270] Use cached RoomContext settings values throughout
 rooms

Signed-off-by: Robin Townsend 
---
 src/components/structures/MessagePanel.js  | 5 ++++-
 src/components/structures/RoomView.tsx     | 2 +-
 src/components/structures/TimelinePanel.js | 5 ++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 6709fef814..bca62e7b2f 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -26,6 +26,7 @@ import * as sdk from '../../index';
 
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
+import RoomContext from "../../contexts/RoomContext";
 import {Layout, LayoutPropType} from "../../settings/Layout";
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
@@ -152,6 +153,8 @@ export default class MessagePanel extends React.Component {
         enableFlair: PropTypes.bool,
     };
 
+    static contextType = RoomContext;
+
     constructor(props) {
         super(props);
 
@@ -381,7 +384,7 @@ export default class MessagePanel extends React.Component {
         // Always show highlighted event
         if (this.props.highlightedEventId === mxEv.getId()) return true;
 
-        return !shouldHideEvent(mxEv);
+        return !shouldHideEvent(mxEv, this.context);
     }
 
     _readMarkerForEvent(eventId, isLastEvent) {
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index fa67013ccb..b80d909a94 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -859,7 +859,7 @@ export default class RoomView extends React.Component {
             // update unread count when scrolled up
             if (!this.state.searchResults && this.state.atEndOfLiveTimeline) {
                 // no change
-            } else if (!shouldHideEvent(ev)) {
+            } else if (!shouldHideEvent(ev, this.state)) {
                 this.setState((state, props) => {
                     return {numUnreadMessages: state.numUnreadMessages + 1};
                 });
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 6300c7532e..c5ae2e87ba 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -26,6 +26,7 @@ import {EventTimeline} from "matrix-js-sdk/src/models/event-timeline";
 import {TimelineWindow} from "matrix-js-sdk/src/timeline-window";
 import { _t } from '../../languageHandler';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
+import RoomContext from "../../contexts/RoomContext";
 import UserActivity from "../../UserActivity";
 import Modal from "../../Modal";
 import dis from "../../dispatcher/dispatcher";
@@ -122,6 +123,8 @@ class TimelinePanel extends React.Component {
         layout: LayoutPropType,
     }
 
+    static contextType = RoomContext;
+
     // a map from room id to read marker event timestamp
     static roomReadMarkerTsMap = {};
 
@@ -1285,7 +1288,7 @@ class TimelinePanel extends React.Component {
 
             const shouldIgnore = !!ev.status || // local echo
                 (ignoreOwn && ev.sender && ev.sender.userId == myUserId);   // own message
-            const isWithoutTile = !haveTileForEvent(ev) || shouldHideEvent(ev);
+            const isWithoutTile = !haveTileForEvent(ev) || shouldHideEvent(ev, this.context);
 
             if (isWithoutTile || !node) {
                 // don't start counting if the event should be ignored,

From c24b239478aef6e4e19e3651a9f8376753f17f12 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 5 Jun 2021 13:36:25 +0000
Subject: [PATCH 0215/1270] Bump ws from 6.2.1 to 6.2.2 in
 /test/end-to-end-tests

Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2.
- [Release notes](https://github.com/websockets/ws/releases)
- [Commits](https://github.com/websockets/ws/commits)

---
updated-dependencies:
- dependency-name: ws
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] 
---
 test/end-to-end-tests/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/end-to-end-tests/yarn.lock b/test/end-to-end-tests/yarn.lock
index 97b348fe50..bc942c4f51 100644
--- a/test/end-to-end-tests/yarn.lock
+++ b/test/end-to-end-tests/yarn.lock
@@ -760,9 +760,9 @@ wrappy@1:
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
 ws@^6.1.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
+  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
   dependencies:
     async-limiter "~1.0.0"
 

From f63a92b5cf4c420ddcc652d587dee5fc446bfdd2 Mon Sep 17 00:00:00 2001
From: random 
Date: Fri, 4 Jun 2021 09:24:41 +0000
Subject: [PATCH 0216/1270] Translated using Weblate (Italian)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/
---
 src/i18n/strings/it.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json
index 585ee8ba3a..c83800e82a 100644
--- a/src/i18n/strings/it.json
+++ b/src/i18n/strings/it.json
@@ -3375,5 +3375,11 @@
     "Kick, ban, or invite people to your active room, and make you leave": "Buttare fuori, bandire o invitare persone nella tua stanza attiva e farti uscire",
     "See when people join, leave, or are invited to this room": "Vedere quando le persone entrano, escono o sono invitate in questa stanza",
     "Kick, ban, or invite people to this room, and make you leave": "Buttare fuori, bandire o invitare persone in questa stanza e farti uscire",
-    "See when people join, leave, or are invited to your active room": "Vedere quando le persone entrano, escono o sono invitate nella tua stanza attiva"
+    "See when people join, leave, or are invited to your active room": "Vedere quando le persone entrano, escono o sono invitate nella tua stanza attiva",
+    "Currently joining %(count)s rooms|one": "Stai entrando in %(count)s stanza",
+    "Currently joining %(count)s rooms|other": "Stai entrando in %(count)s stanze",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Prova parole diverse o controlla errori di battitura. Alcuni risultati potrebbero non essere visibili dato che sono privati e ti servirebbe un invito per unirti.",
+    "No results for \"%(query)s\"": "Nessun risultato per \"%(query)s\"",
+    "The user you called is busy.": "L'utente che hai chiamato è occupato.",
+    "User Busy": "Utente occupato"
 }

From a85e251f0a6ceb0444e3f2de41471803ba07602c Mon Sep 17 00:00:00 2001
From: iaiz 
Date: Tue, 1 Jun 2021 21:21:42 +0000
Subject: [PATCH 0217/1270] Translated using Weblate (Spanish)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/es/
---
 src/i18n/strings/es.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/es.json b/src/i18n/strings/es.json
index 60f5d06bec..5e8e57bacd 100644
--- a/src/i18n/strings/es.json
+++ b/src/i18n/strings/es.json
@@ -3315,5 +3315,11 @@
     "See when people join, leave, or are invited to your active room": "Ver cuando alguien se una, salga o se le invite a tu sala activa",
     "Kick, ban, or invite people to this room, and make you leave": "Expulsar, vetar o invitar personas a esta sala, y hacerte salir de ella",
     "Kick, ban, or invite people to your active room, and make you leave": "Expulsar, vetar o invitar a gente a tu sala activa, o hacerte salir",
-    "See when people join, leave, or are invited to this room": "Ver cuando alguien se une, sale o se le invita a la sala"
+    "See when people join, leave, or are invited to this room": "Ver cuando alguien se une, sale o se le invita a la sala",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Prueba con sinónimos o revisa si te has equivocado al escribir. Puede que algunos resultados no sean visibles si son privados y necesites que te inviten para verlos.",
+    "Currently joining %(count)s rooms|one": "Entrando en %(count)s sala",
+    "Currently joining %(count)s rooms|other": "Entrando en %(count)s salas",
+    "No results for \"%(query)s\"": "Ningún resultado para «%(query)s»",
+    "The user you called is busy.": "La persona a la que has llamado está ocupada.",
+    "User Busy": "Persona ocupada"
 }

From d7de5dfe833cd1ea46faa6c0fcd5e273435d5404 Mon Sep 17 00:00:00 2001
From: libexus 
Date: Fri, 4 Jun 2021 13:47:33 +0000
Subject: [PATCH 0218/1270] Translated using Weblate (German)

Currently translated at 99.4% (2962 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/
---
 src/i18n/strings/de_DE.json | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index dcc5343af4..9d1c1fa071 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -3343,5 +3343,14 @@
     "Your feedback will help make spaces better. The more detail you can go into, the better.": "Dein Feedback hilfst uns, die Spaces zu verbessern. Je genauer, desto besser.",
     "If you leave, %(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.": "Durchs Verlassen lädt %(brand)s mit deaktivierten Spaces neu. Danach kannst du Communities und Custom Tags wieder verwenden.",
     "sends space invaders": "sendet Space Invaders",
-    "Sends the given message with a space themed effect": "Sendet die Nachricht mit Raumschiffen"
+    "Sends the given message with a space themed effect": "Sendet die Nachricht mit Raumschiffen",
+    "Space Autocomplete": "Spaces automatisch vervollständigen",
+    "Currently joining %(count)s rooms|one": "Betrete %(count)s Raum",
+    "Currently joining %(count)s rooms|other": "Betrete %(count)s Räume",
+    "Go to my space": "Zu meinem Space",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Überprüfe auf Tippfehler oder verwende andere Suchbegriffe. Beachte, dass Ergebnisse aus privaten Räumen, in die du nicht eingeladen wurdest, nicht angezeigt werden.",
+    "See when people join, leave, or are invited to this room": "Anzeigen, wenn Leute eingeladen werden oder den Raum betreten und verlassen",
+    "The user you called is busy.": "Der angerufene Benutzer ist momentan beschäftigt.",
+    "User Busy": "Benutzer beschäftigt",
+    "No results for \"%(query)s\"": "Keine Ergebnisse für \"%(query)s\""
 }

From 7abd8957a5e2ff0be597d6435aea5f3f16a80e4a Mon Sep 17 00:00:00 2001
From: Jeff Huang 
Date: Wed, 2 Jun 2021 02:39:11 +0000
Subject: [PATCH 0219/1270] Translated using Weblate (Chinese (Traditional))

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hant/
---
 src/i18n/strings/zh_Hant.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json
index 5c27fb3878..053839f937 100644
--- a/src/i18n/strings/zh_Hant.json
+++ b/src/i18n/strings/zh_Hant.json
@@ -3378,5 +3378,11 @@
     "See when people join, leave, or are invited to your active room": "檢視人們何時加入、離開或被邀請至您活躍的聊天室",
     "Kick, ban, or invite people to your active room, and make you leave": "踢除、封鎖或邀請人們到您作用中的聊天室，然後讓您離開",
     "See when people join, leave, or are invited to this room": "檢視人們何時加入、離開或被邀請至此聊天室",
-    "Kick, ban, or invite people to this room, and make you leave": "踢除、封鎖或邀請人們到此聊天室，然後讓您離開"
+    "Kick, ban, or invite people to this room, and make you leave": "踢除、封鎖或邀請人們到此聊天室，然後讓您離開",
+    "Currently joining %(count)s rooms|one": "目前正在加入 %(count)s 個聊天室",
+    "Currently joining %(count)s rooms|other": "目前正在加入 %(count)s 個聊天室",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "嘗試不同的詞或是檢查拼字。某些結果可能不可見，因為其為私人的，您必須要有邀請才能加入。",
+    "No results for \"%(query)s\"": "「%(query)s」沒有結果",
+    "The user you called is busy.": "您想要通話的使用者目前忙碌中。",
+    "User Busy": "使用者忙碌"
 }

From 2533a9f52eb334bdb316ad9ebba4824693f940cb Mon Sep 17 00:00:00 2001
From: LinAGKar 
Date: Tue, 1 Jun 2021 18:33:41 +0000
Subject: [PATCH 0220/1270] Translated using Weblate (Swedish)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sv/
---
 src/i18n/strings/sv.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/sv.json b/src/i18n/strings/sv.json
index a50c039e9e..f026e0fe02 100644
--- a/src/i18n/strings/sv.json
+++ b/src/i18n/strings/sv.json
@@ -3305,5 +3305,11 @@
     "See when people join, leave, or are invited to your active room": "Se när folk går med, lämnar eller bjuds in till ditt aktiva rum",
     "Kick, ban, or invite people to your active room, and make you leave": "Kicka, banna eller bjuda in folk till ditt aktiva rum, och tvinga dig att lämna",
     "See when people join, leave, or are invited to this room": "Se när folk går med, lämnar eller bjuds in till det här rummet",
-    "Kick, ban, or invite people to this room, and make you leave": "Kicka, banna eller bjuda in folk till det här rummet, och tvinga dig att lämna"
+    "Kick, ban, or invite people to this room, and make you leave": "Kicka, banna eller bjuda in folk till det här rummet, och tvinga dig att lämna",
+    "Currently joining %(count)s rooms|one": "Går just nu med i %(count)s rum",
+    "Currently joining %(count)s rooms|other": "Går just nu med i %(count)s rum",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Testa andra ord eller kolla efter felskrivningar. Vissa resultat kanske inte visas för att de är privata och du behöver en inbjudan för att gå med i dem.",
+    "No results for \"%(query)s\"": "Inga resultat för \"%(query)s\"",
+    "The user you called is busy.": "Användaren du ringde är upptagen.",
+    "User Busy": "Användare upptagen"
 }

From 6243e693d6c3a14e28bc4c3ecada911a17859a80 Mon Sep 17 00:00:00 2001
From: jelv 
Date: Wed, 2 Jun 2021 09:39:49 +0000
Subject: [PATCH 0221/1270] Translated using Weblate (Dutch)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/
---
 src/i18n/strings/nl.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json
index 16f74e7b2d..7299e9d161 100644
--- a/src/i18n/strings/nl.json
+++ b/src/i18n/strings/nl.json
@@ -3261,5 +3261,11 @@
     "See when people join, leave, or are invited to your active room": "Zie wanneer personen deelnemen, vertrekken of worden uitgenodigd in uw actieve gesprek",
     "Kick, ban, or invite people to your active room, and make you leave": "Verwijder, verban of nodig personen uit voor uw actieve gesprek en uzelf laten vertrekken",
     "See when people join, leave, or are invited to this room": "Zie wanneer personen deelnemen, vertrekken of worden uitgenodigd voor dit gesprek",
-    "Kick, ban, or invite people to this room, and make you leave": "Verwijder, verban of verwijder personen uit dit gesprek en uzelf laten vertrekken"
+    "Kick, ban, or invite people to this room, and make you leave": "Verwijder, verban of verwijder personen uit dit gesprek en uzelf laten vertrekken",
+    "Currently joining %(count)s rooms|one": "Momenteel aan het toetreden tot %(count)s gesprek",
+    "Currently joining %(count)s rooms|other": "Momenteel aan het toetreden tot %(count)s gesprekken",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Probeer andere woorden of controleer op typefouten. Sommige resultaten zijn mogelijk niet zichtbaar omdat ze privé zijn of u een uitnodiging nodig heeft om deel te nemen.",
+    "No results for \"%(query)s\"": "Geen resultaten voor \"%(query)s\"",
+    "The user you called is busy.": "De gebruiker die u belde is bezet.",
+    "User Busy": "Gebruiker Bezet"
 }

From fe9644baca95f5e658684eeb5e3dd09d83c4491f Mon Sep 17 00:00:00 2001
From: Ihor Hordiichuk 
Date: Wed, 2 Jun 2021 00:41:15 +0000
Subject: [PATCH 0222/1270] Translated using Weblate (Ukrainian)

Currently translated at 49.2% (1467 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/
---
 src/i18n/strings/uk.json | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/i18n/strings/uk.json b/src/i18n/strings/uk.json
index db5ce9b360..64ba84b678 100644
--- a/src/i18n/strings/uk.json
+++ b/src/i18n/strings/uk.json
@@ -267,8 +267,8 @@
     "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s, %(day)s %(monthName)s %(fullYear)s %(time)s",
     "Who would you like to add to this community?": "Кого ви хочете додати до цієї спільноти?",
     "Where this page includes identifiable information, such as a room, user or group ID, that data is removed before being sent to the server.": "Там, де ця сторінка містить ототожненну інформацію, як-от назва кімнати, користувача чи групи, ці дані будуть вилучені перед надсиланням на сервер.",
-    "Call in Progress": "Іде виклик",
-    "A call is currently being placed!": "Зараз іде виклик!",
+    "Call in Progress": "Триває виклик",
+    "A call is currently being placed!": "Зараз триває виклик!",
     "A call is already in progress!": "Вже здійснюється дзвінок!",
     "Permission Required": "Потрібен дозвіл",
     "You do not have permission to start a conference call in this room": "У вас немає дозволу, щоб розпочати дзвінок-конференцію в цій кімнаті",
@@ -1602,5 +1602,7 @@
     "Share Link to User": "Поділитися посиланням на користувача",
     "Messages here are end-to-end encrypted. Verify %(displayName)s in their profile - tap on their avatar.": "Повідомлення тут захищено наскрізним шифруванням. Підтвердьте %(displayName)s у їхньому профілі — натиснувши на їх аватар.",
     "Open": "Відкрити",
-    "In reply to ": "У відповідь на "
+    "In reply to ": "У відповідь на ",
+    "The user you called is busy.": "Користувач, якого ви викликаєте, зайнятий.",
+    "User Busy": "Користувач зайнятий"
 }

From f5b02ecbf55323af1dcdd057da79ba0801495193 Mon Sep 17 00:00:00 2001
From: XoseM 
Date: Thu, 3 Jun 2021 06:53:34 +0000
Subject: [PATCH 0223/1270] Translated using Weblate (Galician)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/gl/
---
 src/i18n/strings/gl.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/gl.json b/src/i18n/strings/gl.json
index 12a2dcd8c3..abb4776a55 100644
--- a/src/i18n/strings/gl.json
+++ b/src/i18n/strings/gl.json
@@ -3375,5 +3375,11 @@
     "See when people join, leave, or are invited to your active room": "Mira cando alguén se une, sae ou é convidada á túa sala activa",
     "Kick, ban, or invite people to your active room, and make you leave": "Expulsa, veta ou convida a persoas á túa sala activa, e fai que saias",
     "See when people join, leave, or are invited to this room": "Mira cando se une alguén, sae ou é convidada a esta sala",
-    "Kick, ban, or invite people to this room, and make you leave": "Expulsa, veta, ou convida persoas a esta sala, e fai que saias"
+    "Kick, ban, or invite people to this room, and make you leave": "Expulsa, veta, ou convida persoas a esta sala, e fai que saias",
+    "Currently joining %(count)s rooms|one": "Neste intre estás en %(count)s sala",
+    "Currently joining %(count)s rooms|other": "Neste intre estás en %(count)s salas",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Intentao con outras palabras e fíxate nos erros de escritura. Algúns resultados poderían non ser visibles porque son privados e precisas un convite.",
+    "No results for \"%(query)s\"": "Sen resultados para \"%(query)s\"",
+    "The user you called is busy.": "A persoa á que chamas está ocupada.",
+    "User Busy": "Usuaria ocupada"
 }

From af2d902830c7ab2dd656152bef924602142d4406 Mon Sep 17 00:00:00 2001
From: Besnik Bleta 
Date: Wed, 2 Jun 2021 08:30:52 +0000
Subject: [PATCH 0224/1270] Translated using Weblate (Albanian)

Currently translated at 99.6% (2970 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sq/
---
 src/i18n/strings/sq.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/sq.json b/src/i18n/strings/sq.json
index bd294093f9..bbeffefda3 100644
--- a/src/i18n/strings/sq.json
+++ b/src/i18n/strings/sq.json
@@ -3361,5 +3361,12 @@
     "sends space invaders": "dërgon pushtues hapësire",
     "Sends the given message with a space themed effect": "E dërgon mesazhin e dhënë me një efekt teme hapësinore",
     "See when people join, leave, or are invited to your active room": "Shihni kur persona vijnë, ikin ose janë ftuar në dhomën tuaj aktive",
-    "See when people join, leave, or are invited to this room": "Shihni kur persona vijnë, ikin ose janë ftuar në këtë dhomë"
+    "See when people join, leave, or are invited to this room": "Shihni kur persona vijnë, ikin ose janë ftuar në këtë dhomë",
+    "Space Autocomplete": "Vetëplotësim Hapësire",
+    "Currently joining %(count)s rooms|one": "Aktualisht duke hyrë në %(count)s dhomë",
+    "Currently joining %(count)s rooms|other": "Aktualisht duke hyrë në %(count)s dhoma",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Provoni fjalë të ndryshme, ose kontrolloni për gabime shkrimi. Disa përfundime mund të mos jenë të dukshme, ngaqë janë private dhe ju duhet një ftesë për të marrë pjesë në to.",
+    "No results for \"%(query)s\"": "S’ka përfundime për \"%(query)s\"",
+    "The user you called is busy.": "Përdoruesi që thirrët është i zënë.",
+    "User Busy": "Përdoruesi Është i Zënë"
 }

From 3bdc84bb5d164e37f69a9f45e7ee34f7dcb51089 Mon Sep 17 00:00:00 2001
From: waclaw66 
Date: Wed, 2 Jun 2021 06:54:33 +0000
Subject: [PATCH 0225/1270] Translated using Weblate (Czech)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/
---
 src/i18n/strings/cs.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json
index 75472b4d38..a84a10f21c 100644
--- a/src/i18n/strings/cs.json
+++ b/src/i18n/strings/cs.json
@@ -3292,5 +3292,11 @@
     "See when people join, leave, or are invited to your active room": "Zjistěte, kdy se lidé připojí, odejdou nebo jsou pozváni do vaší aktivní místnosti",
     "Kick, ban, or invite people to this room, and make you leave": "Vykopnout, vykázat, pozvat lidi do této místnosti nebo odejít",
     "Kick, ban, or invite people to your active room, and make you leave": "Vykopnout, vykázat, pozvat lidi do vaší aktivní místnosti nebo odejít",
-    "See when people join, leave, or are invited to this room": "Zjistěte, kdy se lidé připojí, odejdou nebo jsou pozváni do této místnosti"
+    "See when people join, leave, or are invited to this room": "Zjistěte, kdy se lidé připojí, odejdou nebo jsou pozváni do této místnosti",
+    "Currently joining %(count)s rooms|one": "Momentálně se připojuje %(count)s místnost",
+    "Currently joining %(count)s rooms|other": "Momentálně se připojuje %(count)s místností",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Vyzkoušejte jiná slova nebo zkontrolujte překlepy. Některé výsledky nemusí být viditelné, protože jsou soukromé a potřebujete k nim pozvánku.",
+    "No results for \"%(query)s\"": "Žádné výsledky pro \"%(query)s\"",
+    "The user you called is busy.": "Volaný uživatel je zaneprázdněn.",
+    "User Busy": "Uživatel zaneprázdněn"
 }

From 261c91211fa0ad914e59ed27cdbd411ca1de65d5 Mon Sep 17 00:00:00 2001
From: Szimszon 
Date: Wed, 2 Jun 2021 06:12:00 +0000
Subject: [PATCH 0226/1270] Translated using Weblate (Hungarian)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/
---
 src/i18n/strings/hu.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/hu.json b/src/i18n/strings/hu.json
index a6e9992866..e1ccfb288d 100644
--- a/src/i18n/strings/hu.json
+++ b/src/i18n/strings/hu.json
@@ -3370,5 +3370,11 @@
     "See when people join, leave, or are invited to your active room": "Emberek belépésének, távozásának vagy meghívásának a megjelenítése az aktív szobájában",
     "Kick, ban, or invite people to your active room, and make you leave": "Kirúgni, kitiltani vagy meghívni embereket az aktív szobába és, hogy ön elhagyja a szobát",
     "See when people join, leave, or are invited to this room": "Emberek belépésének, távozásának vagy meghívásának a megjelenítése ebben a szobában",
-    "Kick, ban, or invite people to this room, and make you leave": "Kirúgni, kitiltani vagy meghívni embereket ebbe a szobába és, hogy ön elhagyja a szobát"
+    "Kick, ban, or invite people to this room, and make you leave": "Kirúgni, kitiltani vagy meghívni embereket ebbe a szobába és, hogy ön elhagyja a szobát",
+    "Currently joining %(count)s rooms|one": "%(count)s szobába lép be",
+    "Currently joining %(count)s rooms|other": "%(count)s szobába lép be",
+    "No results for \"%(query)s\"": "Nincs találat ehhez: %(query)s",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Próbáljon ki más szavakat vagy keressen elgépelést. Néhány találat azért nem látszik, mert privát és meghívóra van szüksége, hogy csatlakozhasson.",
+    "The user you called is busy.": "A hívott felhasználó foglalt.",
+    "User Busy": "Felhasználó foglalt"
 }

From 0de8e9b201107ca76d2271d2091f586ba8a00899 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Priit=20J=C3=B5er=C3=BC=C3=BCt?= 
Date: Tue, 1 Jun 2021 17:36:31 +0000
Subject: [PATCH 0227/1270] Translated using Weblate (Estonian)

Currently translated at 99.8% (2974 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/
---
 src/i18n/strings/et.json | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json
index 5e8d744cca..a8e267fb01 100644
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -3345,5 +3345,14 @@
     "Send and receive voice messages": "Saada ja võta vastu häälsõnumeid",
     "Your feedback will help make spaces better. The more detail you can go into, the better.": "Sinu tagasiside aitab teha kogukonnakeskuseid paremaks. Mida detailsemalt sa oma arvamust kirjeldad, seda parem.",
     "If you leave, %(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.": "Kui sa lahkud, siis käivitame %(brand)s uuesti nii, et kogukonnakeskused ei ole kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid saavad jälle olema kasutusel.",
-    "Message search initialisation failed": "Sõnumite otsingu alustamine ei õnnestunud"
+    "Message search initialisation failed": "Sõnumite otsingu alustamine ei õnnestunud",
+    "sends space invaders": "korraldab ühe pisikese tulnukate vallutusretke",
+    "Sends the given message with a space themed effect": "Saadab antud sõnumi kosmoseteemalise efektiga",
+    "Go to my space": "Palun vaata minu kogukonnakeskust",
+    "User Busy": "Kasutaja on hõivatud",
+    "The user you called is busy.": "Kasutaja, kellele sa helistasid, on hõivatud.",
+    "No results for \"%(query)s\"": "Päringule „%(query)s“ pole vastuseid",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Proovi muid otsingusõnu või kontrolli, et neis polnud trükivigu. Kuna mõned otsingutulemused on privaatsed ja sa vajad kutset nende nägemiseks, siis kõiki tulemusi siin ei pruugi näha olla.",
+    "Currently joining %(count)s rooms|other": "Parasjagu liitun %(count)s jututoaga",
+    "Currently joining %(count)s rooms|one": "Parasjagu liitun %(count)s jututoaga"
 }

From 0ecc97eb4b830f3cbaa09ee8c21617ca5eb5e067 Mon Sep 17 00:00:00 2001
From: Thibault Martin 
Date: Thu, 3 Jun 2021 07:09:49 +0000
Subject: [PATCH 0228/1270] Translated using Weblate (French)

Currently translated at 100.0% (2979 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fr/
---
 src/i18n/strings/fr.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/fr.json b/src/i18n/strings/fr.json
index 7f3614bf90..e199e094e7 100644
--- a/src/i18n/strings/fr.json
+++ b/src/i18n/strings/fr.json
@@ -2842,7 +2842,7 @@
     "Change the topic of your active room": "Changer le sujet dans le salon actuel",
     "Change the topic of this room": "Changer le sujet de ce salon",
     "Send stickers into this room": "Envoyer des autocollants dans ce salon",
-    "Remain on your screen when viewing another room, when running": "Reste sur votre écran lors de l'appel quand vous regardez un autre salon",
+    "Remain on your screen when viewing another room, when running": "Reste sur votre écran lors de l’appel quand vous regardez un autre salon",
     "Takes the call in the current room off hold": "Reprend l’appel en attente dans ce salon",
     "Places the call in the current room on hold": "Met l’appel dans ce salon en attente",
     "Prepends (╯°□°）╯︵ ┻━┻ to a plain-text message": "Ajoute (╯°□°）╯︵ ┻━┻ en préfixe du message",

From 442d7f7a02ee6a0e0c3600e37aed08c289e6b32b Mon Sep 17 00:00:00 2001
From: Trendyne 
Date: Thu, 3 Jun 2021 09:58:35 +0000
Subject: [PATCH 0229/1270] Translated using Weblate (Icelandic)

Currently translated at 22.4% (668 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/is/
---
 src/i18n/strings/is.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/is.json b/src/i18n/strings/is.json
index 35f5342b30..e8718c941a 100644
--- a/src/i18n/strings/is.json
+++ b/src/i18n/strings/is.json
@@ -720,5 +720,13 @@
     "%(count)s messages deleted.|one": "%(count)s skilaboð eytt.",
     "%(count)s messages deleted.|other": "%(count)s skilaboðum eytt.",
     "Message deleted on %(date)s": "Skilaboð eytt á %(date)s",
-    "Message edits": "Skilaboðs breytingar"
+    "Message edits": "Skilaboðs breytingar",
+    "List options": "Lista valkosti",
+    "Create a Group Chat": "Búa Til Hópspjall",
+    "Explore Public Rooms": "Kanna Almenningsherbergi",
+    "Explore public rooms": "Kanna almenningsherbergi",
+    "Explore all public rooms": "Kanna öll almenningsherbergi",
+    "Liberate your communication": "Frelsaðu samskipti þín",
+    "Welcome to ": "Velkomin til ",
+    "Welcome to %(appName)s": "Velkomin til %(appName)s"
 }

From 0f64f4d692f36287ace222eb13e07244fa6e1c63 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 5 Jun 2021 10:49:44 -0400
Subject: [PATCH 0230/1270] Fix MessagePanel tests

Signed-off-by: Robin Townsend 
---
 test/components/structures/MessagePanel-test.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index 5b466b4bb0..4f7fca1759 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -51,8 +51,20 @@ class WrappedMessagePanel extends React.Component {
     };
 
     render() {
+        const roomContext = {
+            room,
+            roomId: room.roomId,
+            canReact: true,
+            canReply: true,
+            showReadReceipts: true,
+            showRedactions: false,
+            showJoinLeaves: false,
+            showAvatarChanges: false,
+            showDisplaynameChanges: true,
+        };
+
         return 
-            
+            
                 
             
         ;

From bbd5fab7b5345f3147f8392907fb114129b6c74e Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 5 Jun 2021 11:15:06 -0400
Subject: [PATCH 0231/1270] Fix type check

As TypeScript points out, you can only set an id on HTML elements, not
arbitrary components.

Signed-off-by: Robin Townsend 
---
 src/components/views/dialogs/ForwardDialog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index cba292ea25..355c92240e 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -214,7 +214,7 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr
             />
         
    
         
    
-        
    
+        
    
              = ({ matrixClient: cli, event, permalinkCr
                 autoComplete={true}
                 autoFocus={true}
             />
-            
+            
                 { rooms.length > 0 ? (
                     
    
                         { rooms.map(room =>

From b06da16a8567e74b90ef74b860e23f6c04399d89 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 5 Jun 2021 13:20:27 -0400
Subject: [PATCH 0232/1270] Fix jumping to bottom without a highlighted event

Signed-off-by: Robin Townsend 
---
 src/components/structures/RoomView.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 5ffc2fd0da..135057dbb1 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -1526,10 +1526,19 @@ export default class RoomView extends React.Component {
 
     // jump down to the bottom of this room, where new events are arriving
     private jumpToLiveTimeline = () => {
-        dis.dispatch({
-            action: 'view_room',
-            room_id: this.state.room.roomId,
-        });
+        if (this.state.initialEventId && this.state.isInitialEventHighlighted) {
+            // If we were viewing a highlighted event, firing view_room without
+            // an event will take care of both clearing the URL fragment and
+            // jumping to the bottom
+            dis.dispatch({
+                action: 'view_room',
+                room_id: this.state.room.roomId,
+            });
+        } else {
+            // Otherwise we have to jump manually
+            this.messagePanel.jumpToLiveTimeline();
+            dis.fire(Action.FocusComposer);
+        }
     };
 
     // jump up to wherever our read marker is

From 17edfec3aa5adf594dec54672c3d8c4332c91a8c Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 5 Jun 2021 21:08:44 -0400
Subject: [PATCH 0233/1270] Make it easier to pan images in the lightbox

Previously, if you were dragging an image and your cursor outpaced the
edge of the image as it was moving, panning would abruptly stop. This
moves a few of the lightbox event listeners one level up to the image
wrapper to ensure that all drag movements are detected, even if they
don't end over the image's current position.

Signed-off-by: Robin Townsend 
---
 res/css/views/elements/_ImageView.scss      |  6 +++---
 src/components/views/elements/ImageView.tsx | 10 ++++++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 71035dadc3..da23957b36 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -22,6 +22,7 @@ limitations under the License.
 }
 
 .mx_ImageView_image_wrapper {
+    pointer-events: initial;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -30,7 +31,6 @@ limitations under the License.
 }
 
 .mx_ImageView_image {
-    pointer-events: all;
     flex-shrink: 0;
 }
 
@@ -43,7 +43,7 @@ limitations under the License.
 }
 
 .mx_ImageView_info_wrapper {
-    pointer-events: all;
+    pointer-events: initial;
     padding-left: 32px;
     display: flex;
     flex-direction: row;
@@ -63,7 +63,7 @@ limitations under the License.
 
 .mx_ImageView_toolbar {
     padding-right: 16px;
-    pointer-events: all;
+    pointer-events: initial;
     display: flex;
     align-items: center;
 }
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index df73e1a8cb..d2f09917ad 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -471,7 +471,12 @@ export default class ImageView extends React.Component {
                 
    
                 
    
+                    ref={this.imageWrapper}
+                    onMouseDown={this.props.onFinished}
+                    onMouseMove={this.onMoving}
+                    onMouseUp={this.onEndMoving}
+                    onMouseLeave={this.onEndMoving}
+                >
                      {
                         className="mx_ImageView_image"
                         draggable={true}
                         onMouseDown={this.onStartMoving}
-                        onMouseMove={this.onMoving}
-                        onMouseUp={this.onEndMoving}
-                        onMouseLeave={this.onEndMoving}
                     />
                 
    
             

From e891d18fa264491fe81fbbcd893fa5c9fdc1d51a Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 5 Jun 2021 21:41:28 -0400
Subject: [PATCH 0234/1270] Add my email to my copyright notices

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss           | 2 +-
 src/components/views/dialogs/ForwardDialog.tsx      | 2 +-
 test/components/views/dialogs/ForwardDialog-test.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index fc59259ca2..7422d39626 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2021 Robin Townsend.
+Copyright 2021 Robin Townsend 
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 355c92240e..e97958973b 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2021 Robin Townsend.
+Copyright 2021 Robin Townsend 
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/test/components/views/dialogs/ForwardDialog-test.js b/test/components/views/dialogs/ForwardDialog-test.js
index 004954c713..c50fb073bf 100644
--- a/test/components/views/dialogs/ForwardDialog-test.js
+++ b/test/components/views/dialogs/ForwardDialog-test.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2021 Robin Townsend.
+Copyright 2021 Robin Townsend 
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

From 43921500d3459896a8a220c870a2b46d49d34303 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sat, 5 Jun 2021 22:21:10 -0400
Subject: [PATCH 0235/1270] Revert "Match requested avatar size to displayed
 size"

This reverts commit 44b143c8c3063be7ca2bf24e6cfdb81be9351c75.
---
 src/components/views/elements/EventTilePreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index 6d2ea687de..77db94b5dd 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -61,7 +61,7 @@ interface IState {
     message: string;
 }
 
-const AVATAR_SIZE = 30;
+const AVATAR_SIZE = 32;
 
 @replaceableComponent("views.elements.EventTilePreview")
 export default class EventTilePreview extends React.Component {

From ea2120bdfdb6b75b25973fb89e63df5dc2a9b72b Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sun, 6 Jun 2021 01:55:01 -0400
Subject: [PATCH 0236/1270] Fix timestamps

7f835908468dc10848e3e9dcb071f08c7f8132b9 changed timestamps to be hidden
at the DOM level, not the CSS level. We can keep that approach, we just
need to ensure they still get shown at the right times.

Signed-off-by: Robin Townsend 
---
 res/css/views/rooms/_EventTile.scss           | 21 +------------------
 src/components/structures/MessagePanel.js     | 10 +--------
 .../views/dialogs/MessageEditHistoryDialog.js |  2 +-
 src/components/views/elements/ReplyThread.js  |  6 +++++-
 src/components/views/rooms/EventTile.tsx      |  6 +++++-
 src/components/views/rooms/ReplyPreview.js    |  2 +-
 .../views/rooms/SearchResultTile.js           |  2 ++
 7 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 51d9e1cc9d..c8b4138f27 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -85,12 +85,11 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile_isEditing .mx_MessageTimestamp {
-    visibility: hidden !important;
+    visibility: hidden;
 }
 
 .mx_EventTile .mx_MessageTimestamp {
     display: block;
-    visibility: hidden;
     white-space: nowrap;
     left: 0px;
     text-align: center;
@@ -142,29 +141,11 @@ $left-gutter: 64px;
     line-height: 57px !important;
 }
 
-.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
-    visibility: visible;
-}
-
 .mx_EventTile_selected > div > a > .mx_MessageTimestamp {
     left: 3px;
     width: auto;
 }
 
-// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-// The first set is to handle the 'group layout' (default) and the second for the IRC layout
-.mx_EventTile_last > div > a > .mx_MessageTimestamp,
-.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
-.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
-.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
-    visibility: visible;
-}
-
 .mx_EventTile:hover .mx_MessageActionBar,
 .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
 [data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 6709fef814..e64d3770d4 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -19,7 +19,6 @@ limitations under the License.
 import React, {createRef} from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import shouldHideEvent from '../../shouldHideEvent';
 import {wantsDateSeparator} from '../../DateUtils';
 import * as sdk from '../../index';
@@ -854,13 +853,6 @@ export default class MessagePanel extends React.Component {
 
         const style = this.props.hidden ? { display: 'none' } : {};
 
-        const className = classNames(
-            this.props.className,
-            {
-                "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
-            },
-        );
-
         let whoIsTyping;
         if (this.props.room && !this.props.tileShape && this.state.showTypingNotifications) {
             whoIsTyping = (
                 
-                
      {this._renderEdits()}
    
+                
      {this._renderEdits()}
    
                 );
         }
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index bbced5328f..81ed360b17 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -46,6 +46,8 @@ export default class ReplyThread extends React.Component {
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
         // Specifies which layout to use.
         layout: LayoutPropType,
+        // Whether to always show a timestamp
+        alwaysShowTimestamps: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -212,7 +214,7 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout, alwaysShowTimestamps) {
         if (!ReplyThread.getParentEventId(parentEv)) {
             return null;
         }
@@ -222,6 +224,7 @@ export default class ReplyThread extends React.Component {
             ref={ref}
             permalinkCreator={permalinkCreator}
             layout={layout}
+            alwaysShowTimestamps={alwaysShowTimestamps}
         />;
     }
 
@@ -386,6 +389,7 @@ export default class ReplyThread extends React.Component {
                     isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
                     layout={this.props.layout}
+                    alwaysShowTimestamps={this.props.alwaysShowTimestamps}
                     enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                     replacingEventId={ev.replacingEventId()}
                 />
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 8cec067c39..e1e3b04f36 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -975,7 +975,8 @@ export default class EventTile extends React.Component {
             onFocusChange={this.onActionBarFocusChange}
         /> : undefined;
 
-        const showTimestamp = this.props.mxEvent.getTs() && (this.props.alwaysShowTimestamps || this.state.hover);
+        const showTimestamp = this.props.mxEvent.getTs() &&
+            (this.props.alwaysShowTimestamps || this.props.last || this.state.hover || this.state.actionBarFocused);
         const timestamp = showTimestamp ?
              : null;
 
@@ -1108,6 +1109,8 @@ export default class EventTile extends React.Component {
                         this.props.onHeightChanged,
                         this.props.permalinkCreator,
                         this.replyThread,
+                        null,
+                        this.props.alwaysShowTimestamps || this.state.hover,
                     );
                 }
                 return (
@@ -1139,6 +1142,7 @@ export default class EventTile extends React.Component {
                     this.props.permalinkCreator,
                     this.replyThread,
                     this.props.layout,
+                    this.props.alwaysShowTimestamps || this.state.hover,
                 );
 
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js
index d7f8c74d73..5835eb9f36 100644
--- a/src/components/views/rooms/ReplyPreview.js
+++ b/src/components/views/rooms/ReplyPreview.js
@@ -89,7 +89,7 @@ export default class ReplyPreview extends React.Component {
                 
    
                 
    
                 ];
+        const alwaysShowTimestamps = SettingsStore.getValue("alwaysShowTimestamps");
 
         const timeline = result.context.getTimeline();
         for (let j = 0; j < timeline.length; j++) {
@@ -67,6 +68,7 @@ export default class SearchResultTile extends React.Component {
                         highlightLink={this.props.resultLink}
                         onHeightChanged={this.props.onHeightChanged}
                         isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
+                        alwaysShowTimestamps={alwaysShowTimestamps}
                         enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                     />
                 ));

From 1c8e34114318e472d7deee6ecc8dd99e2e6baa7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 6 Jun 2021 08:09:41 +0200
Subject: [PATCH 0237/1270] Reset all translation vars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Not doing this would result in jumps because everything would get out of sync

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index df73e1a8cb..1b1decd6d5 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -283,6 +283,10 @@ export default class ImageView extends React.Component {
                 translationX: 0,
                 translationY: 0,
             });
+            this.lastX = 0;
+            this.lastY = 0;
+            this.initX = 0;
+            this.initY = 0;
         }
         this.setState({moving: false});
     };

From c0964b69b73af9de4759b2f45d97caf0d6c98b59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 6 Jun 2021 08:14:43 +0200
Subject: [PATCH 0238/1270] Remove redundant vars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 1b1decd6d5..d6256f7dd2 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -95,8 +95,6 @@ export default class ImageView extends React.Component {
 
     private initX = 0;
     private initY = 0;
-    private lastX = 0;
-    private lastY = 0;
     private previousX = 0;
     private previousY = 0;
 
@@ -253,8 +251,8 @@ export default class ImageView extends React.Component {
         this.setState({moving: true});
         this.previousX = this.state.translationX;
         this.previousY = this.state.translationY;
-        this.initX = ev.pageX - this.lastX;
-        this.initY = ev.pageY - this.lastY;
+        this.initX = ev.pageX - this.state.translationX;
+        this.initY = ev.pageY - this.state.translationY;
     };
 
     private onMoving = (ev: React.MouseEvent) => {
@@ -263,11 +261,9 @@ export default class ImageView extends React.Component {
 
         if (!this.state.moving) return;
 
-        this.lastX = ev.pageX - this.initX;
-        this.lastY = ev.pageY - this.initY;
         this.setState({
-            translationX: this.lastX,
-            translationY: this.lastY,
+            translationX: ev.pageX - this.initX,
+            translationY: ev.pageY - this.initY,
         });
     };
 
@@ -283,8 +279,6 @@ export default class ImageView extends React.Component {
                 translationX: 0,
                 translationY: 0,
             });
-            this.lastX = 0;
-            this.lastY = 0;
             this.initX = 0;
             this.initY = 0;
         }

From 28be581af18615ec24c4a664744ccae3a110696f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 6 Jun 2021 08:51:07 +0200
Subject: [PATCH 0239/1270] Take image rotation into account when zooming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 31 +++++++++++++--------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index d6256f7dd2..d4870a569b 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -97,29 +97,36 @@ export default class ImageView extends React.Component {
     private initY = 0;
     private previousX = 0;
     private previousY = 0;
+    private rotation = 0;
 
     componentDidMount() {
         // We have to use addEventListener() because the listener
         // needs to be passive in order to work with Chromium
         this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
         // We want to recalculate zoom whenever the window's size changes
-        window.addEventListener("resize", this.calculateZoom);
+        window.addEventListener("resize", this.calculateZoomAndRotate);
         // After the image loads for the first time we want to calculate the zoom
-        this.image.current.addEventListener("load", this.calculateZoom);
+        this.image.current.addEventListener("load", this.calculateZoomAndRotate);
     }
 
     componentWillUnmount() {
         this.focusLock.current.removeEventListener('wheel', this.onWheel);
-        window.removeEventListener("resize", this.calculateZoom);
-        this.image.current.removeEventListener("load", this.calculateZoom);
+        window.removeEventListener("resize", this.calculateZoomAndRotate);
+        this.image.current.removeEventListener("load", this.calculateZoomAndRotate);
     }
 
-    private calculateZoom = () => {
+    private calculateZoomAndRotate = () => {
         const image = this.image.current;
         const imageWrapper = this.imageWrapper.current;
 
-        const zoomX = imageWrapper.clientWidth / image.naturalWidth;
-        const zoomY = imageWrapper.clientHeight / image.naturalHeight;
+        const landscape = this.rotation % 180 === 0;
+
+        // If the image is rotated take it into account
+        const width = landscape ? image.naturalWidth : image.naturalHeight;
+        const height = landscape ? image.naturalHeight : image.naturalWidth;
+
+        const zoomX = imageWrapper.clientWidth / width;
+        const zoomY = imageWrapper.clientHeight / height;
 
         // If the image is smaller in both dimensions set its the zoom to 1 to
         // display it in its original size
@@ -128,6 +135,7 @@ export default class ImageView extends React.Component {
                 zoom: 1,
                 minZoom: 1,
                 maxZoom: 1,
+                rotation: this.rotation,
             });
             return;
         }
@@ -140,6 +148,7 @@ export default class ImageView extends React.Component {
         this.setState({
             minZoom: minZoom,
             maxZoom: 1,
+            rotation: this.rotation,
         });
     }
 
@@ -190,14 +199,14 @@ export default class ImageView extends React.Component {
 
     private onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
-        const rotationDegrees = cur - 90;
-        this.setState({ rotation: rotationDegrees });
+        this.rotation = cur - 90;
+        this.calculateZoomAndRotate();
     };
 
     private onRotateClockwiseClick = () => {
         const cur = this.state.rotation;
-        const rotationDegrees = cur + 90;
-        this.setState({ rotation: rotationDegrees });
+        this.rotation = cur + 90;
+        this.calculateZoomAndRotate();
     };
 
     private onDownloadClick = () => {

From c3fdd733570550fcd48473834009bf6bafafeaac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 6 Jun 2021 08:56:12 +0200
Subject: [PATCH 0240/1270] Avoid multiple setState() calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index d4870a569b..c4ec3497e4 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -144,11 +144,14 @@ export default class ImageView extends React.Component {
         // image by default
         const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE;
 
-        if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom});
+        // If zoom is smaller than minZoom don't go beneath that value
+        const zoom = (this.state.zoom <= this.state.minZoom) ? minZoom : this.state.zoom;
+
         this.setState({
             minZoom: minZoom,
             maxZoom: 1,
             rotation: this.rotation,
+            zoom: zoom,
         });
     }
 

From ba0f6766caefb700324a0a4441e0427689b8faf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Sun, 6 Jun 2021 09:02:30 +0200
Subject: [PATCH 0241/1270] Update curly braces styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 131 ++++++++++----------
 1 file changed, 66 insertions(+), 65 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index c4ec3497e4..948e005978 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -19,20 +19,20 @@ limitations under the License.
 import React, { createRef } from 'react';
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
-import {Key} from "../../../Keyboard";
+import { Key } from "../../../Keyboard";
 import FocusLock from "react-focus-lock";
 import MemberAvatar from "../avatars/MemberAvatar";
-import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
-import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
+import { aboveLeftOf, ContextMenu } from '../../structures/ContextMenu';
 import MessageTimestamp from "../messages/MessageTimestamp";
 import SettingsStore from "../../../settings/SettingsStore";
-import {formatFullDate} from "../../../DateUtils";
+import { formatFullDate } from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {normalizeWheelEvent} from "../../../utils/Mouse";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { normalizeWheelEvent } from "../../../utils/Mouse";
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -167,7 +167,7 @@ export default class ImageView extends React.Component {
             return;
         }
         if (newZoom >= this.state.maxZoom) {
-            this.setState({zoom: this.state.maxZoom});
+            this.setState({ zoom: this.state.maxZoom });
             return;
         }
 
@@ -256,11 +256,11 @@ export default class ImageView extends React.Component {
 
         // Zoom in if we are completely zoomed out
         if (this.state.zoom === this.state.minZoom) {
-            this.setState({zoom: this.state.maxZoom});
+            this.setState({ zoom: this.state.maxZoom });
             return;
         }
 
-        this.setState({moving: true});
+        this.setState({ moving: true });
         this.previousX = this.state.translationX;
         this.previousY = this.state.translationY;
         this.initX = ev.pageX - this.state.translationX;
@@ -294,7 +294,7 @@ export default class ImageView extends React.Component {
             this.initX = 0;
             this.initY = 0;
         }
-        this.setState({moving: false});
+        this.setState({ moving: false });
     };
 
     private renderContextMenu() {
@@ -302,14 +302,14 @@ export default class ImageView extends React.Component {
         if (this.state.contextMenuDisplayed) {
             contextMenu = (
                 
                     
                 
             );
@@ -347,10 +347,10 @@ export default class ImageView extends React.Component {
         const style = {
             cursor: cursor,
             transition: this.state.moving ? null : "transform 200ms ease 0s",
-            transform: `translateX(${translatePixelsX})
-                        translateY(${translatePixelsY})
-                        scale(${zoom})
-                        rotate(${rotationDegrees})`,
+            transform: `translateX(${ translatePixelsX })
+                        translateY(${ translatePixelsY })
+                        scale(${ zoom })
+                        rotate(${ rotationDegrees })`,
         };
 
         let info;
@@ -365,37 +365,38 @@ export default class ImageView extends React.Component {
             const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
             const sender = (
                 
    
-                    {senderName}
+                    { senderName }
                 
    
             );
             const messageTimestamp = (
                 
                     
                 
             );
             const avatar = (
                 
             );
 
             info = (
                 
    
-                    {avatar}
+                    { avatar }
                     
    
-                        {sender}
-                        {messageTimestamp}
+                        { sender }
+                        { messageTimestamp }
                     
    
                 
    
             );
@@ -413,10 +414,10 @@ export default class ImageView extends React.Component {
             contextMenuButton = (
                 
             );
         }
@@ -427,14 +428,14 @@ export default class ImageView extends React.Component {
             zoomOutButton = (
                 
+                    title={ _t("Zoom out") }
+                    onClick={ this.onZoomOutClick }>
                 
             );
             zoomInButton = (
                 
                 
             );
@@ -442,57 +443,57 @@ export default class ImageView extends React.Component {
 
         return (
             
                 
    
-                    {info}
+                    { info }
                     
    
                         
                         
                         
+                            title={ _t("Rotate Right") }
+                            onClick={ this.onRotateClockwiseClick }>
                         
-                        {zoomOutButton}
-                        {zoomInButton}
+                        { zoomOutButton }
+                        { zoomInButton }
                         
                         
-                        {contextMenuButton}
+                        { contextMenuButton }
                         
                         
-                        {this.renderContextMenu()}
+                        { this.renderContextMenu() }
                     
    
                 
    
                 
    
+                    ref={ this.imageWrapper }>
                     
                 
    
                 

From 903d4d252a0c2ac6043ec24251d4c446f33d7990 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sun, 6 Jun 2021 23:06:56 -0400
Subject: [PATCH 0242/1270] Add optimized function to determine whether event
 has text to display

Signed-off-by: Robin Townsend 
---
 src/TextForEvent.js                       | 274 ++++++++++++----------
 src/components/structures/MessagePanel.js |   9 +-
 src/components/views/rooms/EventTile.tsx  |   4 +-
 3 files changed, 155 insertions(+), 132 deletions(-)

diff --git a/src/TextForEvent.js b/src/TextForEvent.js
index 86f9ff20f4..22ce0dd9cf 100644
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@@ -21,6 +21,10 @@ import SettingsStore from "./settings/SettingsStore";
 import {ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES} from "./mjolnir/BanList";
 import {WIDGET_LAYOUT_EVENT_TYPE} from "./stores/widgets/WidgetLayoutStore";
 
+// 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 textForMemberEvent(ev) {
     // XXX: SYJS-16 "sender is sometimes null for join messages"
     const senderName = ev.sender ? ev.sender.name : ev.getSender();
@@ -28,84 +32,84 @@ function textForMemberEvent(ev) {
     const prevContent = ev.getPrevContent();
     const content = ev.getContent();
 
-    const reason = content.reason ? (_t('Reason') + ': ' + content.reason) : '';
+    const getReason = () => content.reason ? (_t('Reason') + ': ' + content.reason) : '';
     switch (content.membership) {
         case 'invite': {
             const threePidContent = content.third_party_invite;
             if (threePidContent) {
                 if (threePidContent.display_name) {
-                    return _t('%(targetName)s accepted the invitation for %(displayName)s.', {
+                    return () => _t('%(targetName)s accepted the invitation for %(displayName)s.', {
                         targetName,
                         displayName: threePidContent.display_name,
                     });
                 } else {
-                    return _t('%(targetName)s accepted an invitation.', {targetName});
+                    return () => _t('%(targetName)s accepted an invitation.', {targetName});
                 }
             } else {
-                return _t('%(senderName)s invited %(targetName)s.', {senderName, targetName});
+                return () => _t('%(senderName)s invited %(targetName)s.', {senderName, targetName});
             }
         }
         case 'ban':
-            return _t('%(senderName)s banned %(targetName)s.', {senderName, targetName}) + ' ' + reason;
+            return () => _t('%(senderName)s banned %(targetName)s.', {senderName, targetName}) + ' ' + getReason();
         case 'join':
             if (prevContent && prevContent.membership === 'join') {
                 if (prevContent.displayname && content.displayname && prevContent.displayname !== content.displayname) {
-                    return _t('%(oldDisplayName)s changed their display name to %(displayName)s.', {
+                    return () => _t('%(oldDisplayName)s changed their display name to %(displayName)s.', {
                         oldDisplayName: prevContent.displayname,
                         displayName: content.displayname,
                     });
                 } else if (!prevContent.displayname && content.displayname) {
-                    return _t('%(senderName)s set their display name to %(displayName)s.', {
+                    return () => _t('%(senderName)s set their display name to %(displayName)s.', {
                         senderName: ev.getSender(),
                         displayName: content.displayname,
                     });
                 } else if (prevContent.displayname && !content.displayname) {
-                    return _t('%(senderName)s removed their display name (%(oldDisplayName)s).', {
+                    return () => _t('%(senderName)s removed their display name (%(oldDisplayName)s).', {
                         senderName,
                         oldDisplayName: prevContent.displayname,
                     });
                 } else if (prevContent.avatar_url && !content.avatar_url) {
-                    return _t('%(senderName)s removed their profile picture.', {senderName});
+                    return () => _t('%(senderName)s removed their profile picture.', {senderName});
                 } else if (prevContent.avatar_url && content.avatar_url &&
                     prevContent.avatar_url !== content.avatar_url) {
-                    return _t('%(senderName)s changed their profile picture.', {senderName});
+                    return () => _t('%(senderName)s changed their profile picture.', {senderName});
                 } else if (!prevContent.avatar_url && content.avatar_url) {
-                    return _t('%(senderName)s set a profile picture.', {senderName});
+                    return () => _t('%(senderName)s set a profile picture.', {senderName});
                 } else if (SettingsStore.getValue("showHiddenEventsInTimeline")) {
                     // This is a null rejoin, it will only be visible if the Labs option is enabled
-                    return _t("%(senderName)s made no change.", {senderName});
+                    return () => _t("%(senderName)s made no change.", {senderName});
                 } else {
-                    return "";
+                    return null;
                 }
             } else {
                 if (!ev.target) console.warn("Join message has no target! -- " + ev.getContent().state_key);
-                return _t('%(targetName)s joined the room.', {targetName});
+                return () => _t('%(targetName)s joined the room.', {targetName});
             }
         case 'leave':
             if (ev.getSender() === ev.getStateKey()) {
                 if (prevContent.membership === "invite") {
-                    return _t('%(targetName)s rejected the invitation.', {targetName});
+                    return () => _t('%(targetName)s rejected the invitation.', {targetName});
                 } else {
-                    return _t('%(targetName)s left the room.', {targetName});
+                    return () => _t('%(targetName)s left the room.', {targetName});
                 }
             } else if (prevContent.membership === "ban") {
-                return _t('%(senderName)s unbanned %(targetName)s.', {senderName, targetName});
+                return () => _t('%(senderName)s unbanned %(targetName)s.', {senderName, targetName});
             } else if (prevContent.membership === "invite") {
-                return _t('%(senderName)s withdrew %(targetName)s\'s invitation.', {
+                return () => _t('%(senderName)s withdrew %(targetName)s\'s invitation.', {
                     senderName,
                     targetName,
-                }) + ' ' + reason;
+                }) + ' ' + getReason();
             } else if (prevContent.membership === "join") {
-                return _t('%(senderName)s kicked %(targetName)s.', {senderName, targetName}) + ' ' + reason;
+                return () => _t('%(senderName)s kicked %(targetName)s.', {senderName, targetName}) + ' ' + getReason();
             } else {
-                return "";
+                return null;
             }
     }
 }
 
 function textForTopicEvent(ev) {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
-    return _t('%(senderDisplayName)s changed the topic to "%(topic)s".', {
+    return () => _t('%(senderDisplayName)s changed the topic to "%(topic)s".', {
         senderDisplayName,
         topic: ev.getContent().topic,
     });
@@ -115,16 +119,16 @@ function textForRoomNameEvent(ev) {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
 
     if (!ev.getContent().name || ev.getContent().name.trim().length === 0) {
-        return _t('%(senderDisplayName)s removed the room name.', {senderDisplayName});
+        return () => _t('%(senderDisplayName)s removed the room name.', {senderDisplayName});
     }
     if (ev.getPrevContent().name) {
-        return _t('%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.', {
+        return () => _t('%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.', {
             senderDisplayName,
             oldRoomName: ev.getPrevContent().name,
             newRoomName: ev.getContent().name,
         });
     }
-    return _t('%(senderDisplayName)s changed the room name to %(roomName)s.', {
+    return () => _t('%(senderDisplayName)s changed the room name to %(roomName)s.', {
         senderDisplayName,
         roomName: ev.getContent().name,
     });
@@ -132,19 +136,23 @@ function textForRoomNameEvent(ev) {
 
 function textForTombstoneEvent(ev) {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
-    return _t('%(senderDisplayName)s upgraded this room.', {senderDisplayName});
+    return () => _t('%(senderDisplayName)s upgraded this room.', {senderDisplayName});
 }
 
 function textForJoinRulesEvent(ev) {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     switch (ev.getContent().join_rule) {
         case "public":
-            return _t('%(senderDisplayName)s made the room public to whoever knows the link.', {senderDisplayName});
+            return () => _t('%(senderDisplayName)s made the room public to whoever knows the link.', {
+                senderDisplayName,
+            });
         case "invite":
-            return _t('%(senderDisplayName)s made the room invite only.', {senderDisplayName});
+            return () => _t('%(senderDisplayName)s made the room invite only.', {
+                senderDisplayName,
+            });
         default:
             // The spec supports "knock" and "private", however nothing implements these.
-            return _t('%(senderDisplayName)s changed the join rule to %(rule)s', {
+            return () => _t('%(senderDisplayName)s changed the join rule to %(rule)s', {
                 senderDisplayName,
                 rule: ev.getContent().join_rule,
             });
@@ -155,12 +163,12 @@ function textForGuestAccessEvent(ev) {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     switch (ev.getContent().guest_access) {
         case "can_join":
-            return _t('%(senderDisplayName)s has allowed guests to join the room.', {senderDisplayName});
+            return () => _t('%(senderDisplayName)s has allowed guests to join the room.', {senderDisplayName});
         case "forbidden":
-            return _t('%(senderDisplayName)s has prevented guests from joining the room.', {senderDisplayName});
+            return () => _t('%(senderDisplayName)s has prevented guests from joining the room.', {senderDisplayName});
         default:
             // There's no other options we can expect, however just for safety's sake we'll do this.
-            return _t('%(senderDisplayName)s changed guest access to %(rule)s', {
+            return () => _t('%(senderDisplayName)s changed guest access to %(rule)s', {
                 senderDisplayName,
                 rule: ev.getContent().guest_access,
             });
@@ -175,17 +183,17 @@ function textForRelatedGroupsEvent(ev) {
     const removed = prevGroups.filter((g) => !groups.includes(g));
 
     if (added.length && !removed.length) {
-        return _t('%(senderDisplayName)s enabled flair for %(groups)s in this room.', {
+        return () => _t('%(senderDisplayName)s enabled flair for %(groups)s in this room.', {
             senderDisplayName,
             groups: added.join(', '),
         });
     } else if (!added.length && removed.length) {
-        return _t('%(senderDisplayName)s disabled flair for %(groups)s in this room.', {
+        return () => _t('%(senderDisplayName)s disabled flair for %(groups)s in this room.', {
             senderDisplayName,
             groups: removed.join(', '),
         });
     } else if (added.length && removed.length) {
-        return _t('%(senderDisplayName)s enabled flair for %(newGroups)s and disabled flair for ' +
+        return () => _t('%(senderDisplayName)s enabled flair for %(newGroups)s and disabled flair for ' +
             '%(oldGroups)s in this room.', {
             senderDisplayName,
             newGroups: added.join(', '),
@@ -193,7 +201,7 @@ function textForRelatedGroupsEvent(ev) {
         });
     } else {
         // Don't bother rendering this change (because there were no changes)
-        return '';
+        return null;
     }
 }
 
@@ -207,11 +215,11 @@ function textForServerACLEvent(ev) {
         allow_ip_literals: !(prevContent.allow_ip_literals === false),
     };
 
-    let text = "";
+    let getText = null;
     if (prev.deny.length === 0 && prev.allow.length === 0) {
-        text = _t("%(senderDisplayName)s set the server ACLs for this room.", {senderDisplayName});
+        getText = () => _t("%(senderDisplayName)s set the server ACLs for this room.", {senderDisplayName});
     } else {
-        text = _t("%(senderDisplayName)s changed the server ACLs for this room.", {senderDisplayName});
+        getText = () => _t("%(senderDisplayName)s changed the server ACLs for this room.", {senderDisplayName});
     }
 
     if (!Array.isArray(current.allow)) {
@@ -220,21 +228,24 @@ function textForServerACLEvent(ev) {
 
     // If we know for sure everyone is banned, mark the room as obliterated
     if (current.allow.length === 0) {
-        return text + " " + _t("🎉 All servers are banned from participating! This room can no longer be used.");
+        return () => getText() + " " +
+            _t("🎉 All servers are banned from participating! This room can no longer be used.");
     }
 
-    return text;
+    return getText;
 }
 
 function textForMessageEvent(ev) {
-    const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
-    let message = senderDisplayName + ': ' + ev.getContent().body;
-    if (ev.getContent().msgtype === "m.emote") {
-        message = "* " + senderDisplayName + " " + message;
-    } else if (ev.getContent().msgtype === "m.image") {
-        message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
-    }
-    return message;
+    return () => {
+        const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+        let message = senderDisplayName + ': ' + ev.getContent().body;
+        if (ev.getContent().msgtype === "m.emote") {
+            message = "* " + senderDisplayName + " " + message;
+        } else if (ev.getContent().msgtype === "m.image") {
+            message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
+        }
+        return message;
+    };
 }
 
 function textForCanonicalAliasEvent(ev) {
@@ -248,96 +259,100 @@ function textForCanonicalAliasEvent(ev) {
 
     if (!removedAltAliases.length && !addedAltAliases.length) {
         if (newAlias) {
-            return _t('%(senderName)s set the main address for this room to %(address)s.', {
+            return () => _t('%(senderName)s set the main address for this room to %(address)s.', {
                 senderName: senderName,
                 address: ev.getContent().alias,
             });
         } else if (oldAlias) {
-            return _t('%(senderName)s removed the main address for this room.', {
+            return () => _t('%(senderName)s removed the main address for this room.', {
                 senderName: senderName,
             });
         }
     } else if (newAlias === oldAlias) {
         if (addedAltAliases.length && !removedAltAliases.length) {
-            return _t('%(senderName)s added the alternative addresses %(addresses)s for this room.', {
+            return () => _t('%(senderName)s added the alternative addresses %(addresses)s for this room.', {
                 senderName: senderName,
                 addresses: addedAltAliases.join(", "),
                 count: addedAltAliases.length,
             });
         } if (removedAltAliases.length && !addedAltAliases.length) {
-            return _t('%(senderName)s removed the alternative addresses %(addresses)s for this room.', {
+            return () => _t('%(senderName)s removed the alternative addresses %(addresses)s for this room.', {
                 senderName: senderName,
                 addresses: removedAltAliases.join(", "),
                 count: removedAltAliases.length,
             });
         } if (removedAltAliases.length && addedAltAliases.length) {
-            return _t('%(senderName)s changed the alternative addresses for this room.', {
+            return () => _t('%(senderName)s changed the alternative addresses for this room.', {
                 senderName: senderName,
             });
         }
     } else {
         // both alias and alt_aliases where modified
-        return _t('%(senderName)s changed the main and alternative addresses for this room.', {
+        return () => _t('%(senderName)s changed the main and alternative addresses for this room.', {
             senderName: senderName,
         });
     }
     // in case there is no difference between the two events,
     // say something as we can't simply hide the tile from here
-    return _t('%(senderName)s changed the addresses for this room.', {
+    return () => _t('%(senderName)s changed the addresses for this room.', {
         senderName: senderName,
     });
 }
 
 function textForCallAnswerEvent(event) {
-    const senderName = event.sender ? event.sender.name : _t('Someone');
-    const supported = MatrixClientPeg.get().supportsVoip() ? '' : _t('(not supported by this browser)');
-    return _t('%(senderName)s answered the call.', {senderName}) + ' ' + supported;
+    return () => {
+        const senderName = event.sender ? event.sender.name : _t('Someone');
+        const supported = MatrixClientPeg.get().supportsVoip() ? '' : _t('(not supported by this browser)');
+        return _t('%(senderName)s answered the call.', {senderName}) + ' ' + supported;
+    };
 }
 
 function textForCallHangupEvent(event) {
-    const senderName = event.sender ? event.sender.name : _t('Someone');
+    const getSenderName = () => event.sender ? event.sender.name : _t('Someone');
     const eventContent = event.getContent();
-    let reason = "";
+    let getReason = () => "";
     if (!MatrixClientPeg.get().supportsVoip()) {
-        reason = _t('(not supported by this browser)');
+        getReason = () => _t('(not supported by this browser)');
     } else if (eventContent.reason) {
         if (eventContent.reason === "ice_failed") {
             // We couldn't establish a connection at all
-            reason = _t('(could not connect media)');
+            getReason = () => _t('(could not connect media)');
         } else if (eventContent.reason === "ice_timeout") {
             // We established a connection but it died
-            reason = _t('(connection failed)');
+            getReason = () => _t('(connection failed)');
         } else if (eventContent.reason === "user_media_failed") {
             // The other side couldn't open capture devices
-            reason = _t("(their device couldn't start the camera / microphone)");
+            getReason = () => _t("(their device couldn't start the camera / microphone)");
         } else if (eventContent.reason === "unknown_error") {
             // An error code the other side doesn't have a way to express
             // (as opposed to an error code they gave but we don't know about,
             // in which case we show the error code)
-            reason = _t("(an error occurred)");
+            getReason = () => _t("(an error occurred)");
         } else if (eventContent.reason === "invite_timeout") {
-            reason = _t('(no answer)');
+            getReason = () => _t('(no answer)');
         } else if (eventContent.reason === "user hangup" || eventContent.reason === "user_hangup") {
             // workaround for https://github.com/vector-im/element-web/issues/5178
             // it seems Android randomly sets a reason of "user hangup" which is
             // interpreted as an error code :(
             // https://github.com/vector-im/riot-android/issues/2623
             // Also the correct hangup code as of VoIP v1 (with underscore)
-            reason = '';
+            getReason = () => '';
         } else {
-            reason = _t('(unknown failure: %(reason)s)', {reason: eventContent.reason});
+            getReason = () => _t('(unknown failure: %(reason)s)', {reason: eventContent.reason});
         }
     }
-    return _t('%(senderName)s ended the call.', {senderName}) + ' ' + reason;
+    return () => _t('%(senderName)s ended the call.', {senderName: getSenderName()}) + ' ' + getReason();
 }
 
 function textForCallRejectEvent(event) {
-    const senderName = event.sender ? event.sender.name : _t('Someone');
-    return _t('%(senderName)s declined the call.', {senderName});
+    return () => {
+        const senderName = event.sender ? event.sender.name : _t('Someone');
+        return _t('%(senderName)s declined the call.', {senderName});
+    };
 }
 
 function textForCallInviteEvent(event) {
-    const senderName = event.sender ? event.sender.name : _t('Someone');
+    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 &&
@@ -350,13 +365,21 @@ function textForCallInviteEvent(event) {
     // 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});
+        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});
+        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});
+        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});
+        return () => _t("%(senderName)s placed a video call. (not supported by this browser)", {
+            senderName: getSenderName(),
+        });
     }
 }
 
@@ -364,14 +387,13 @@ function textForThreePidInviteEvent(event) {
     const senderName = event.sender ? event.sender.name : event.getSender();
 
     if (!isValid3pidInvite(event)) {
-        const targetDisplayName = event.getPrevContent().display_name || _t("Someone");
-        return _t('%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.', {
+        return () => _t('%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.', {
             senderName,
-            targetDisplayName,
+            targetDisplayName: event.getPrevContent().display_name || _t("Someone"),
         });
     }
 
-    return _t('%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.', {
+    return () => _t('%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.', {
         senderName,
         targetDisplayName: event.getContent().display_name,
     });
@@ -381,17 +403,17 @@ function textForHistoryVisibilityEvent(event) {
     const senderName = event.sender ? event.sender.name : event.getSender();
     switch (event.getContent().history_visibility) {
         case 'invited':
-            return _t('%(senderName)s made future room history visible to all room members, '
+            return () => _t('%(senderName)s made future room history visible to all room members, '
                 + 'from the point they are invited.', {senderName});
         case 'joined':
-            return _t('%(senderName)s made future room history visible to all room members, '
+            return () => _t('%(senderName)s made future room history visible to all room members, '
                 + 'from the point they joined.', {senderName});
         case 'shared':
-            return _t('%(senderName)s made future room history visible to all room members.', {senderName});
+            return () => _t('%(senderName)s made future room history visible to all room members.', {senderName});
         case 'world_readable':
-            return _t('%(senderName)s made future room history visible to anyone.', {senderName});
+            return () => _t('%(senderName)s made future room history visible to anyone.', {senderName});
         default:
-            return _t('%(senderName)s made future room history visible to unknown (%(visibility)s).', {
+            return () => _t('%(senderName)s made future room history visible to unknown (%(visibility)s).', {
                 senderName,
                 visibility: event.getContent().history_visibility,
             });
@@ -403,7 +425,7 @@ function textForPowerEvent(event) {
     const senderName = event.sender ? event.sender.name : event.getSender();
     if (!event.getPrevContent() || !event.getPrevContent().users ||
         !event.getContent() || !event.getContent().users) {
-        return '';
+        return null;
     }
     const userDefault = event.getContent().users_default || 0;
     // Construct set of userIds
@@ -418,35 +440,35 @@ function textForPowerEvent(event) {
             if (users.indexOf(userId) === -1) users.push(userId);
         },
     );
-    const diff = [];
-    // XXX: This is also surely broken for i18n
+    const diffs = [];
     users.forEach((userId) => {
         // Previous power level
         const from = event.getPrevContent().users[userId];
         // Current power level
         const to = event.getContent().users[userId];
         if (to !== from) {
-            diff.push(
-                _t('%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s', {
-                    userId,
-                    fromPowerLevel: Roles.textualPowerLevel(from, userDefault),
-                    toPowerLevel: Roles.textualPowerLevel(to, userDefault),
-                }),
-            );
+            diffs.push({ userId, from, to });
         }
     });
-    if (!diff.length) {
-        return '';
+    if (!diffs.length) {
+        return null;
     }
-    return _t('%(senderName)s changed the power level of %(powerLevelDiffText)s.', {
+    // XXX: This is also surely broken for i18n
+    return () => _t('%(senderName)s changed the power level of %(powerLevelDiffText)s.', {
         senderName,
-        powerLevelDiffText: diff.join(", "),
+        powerLevelDiffText: diffs.map(diff =>
+            _t('%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s', {
+                userId: diff.userId,
+                fromPowerLevel: Roles.textualPowerLevel(diff.from, userDefault),
+                toPowerLevel: Roles.textualPowerLevel(diff.to, userDefault),
+            }),
+        ).join(", "),
     });
 }
 
 function textForPinnedEvent(event) {
     const senderName = event.sender ? event.sender.name : event.getSender();
-    return _t("%(senderName)s changed the pinned messages for the room.", {senderName});
+    return () => _t("%(senderName)s changed the pinned messages for the room.", {senderName});
 }
 
 function textForWidgetEvent(event) {
@@ -464,16 +486,16 @@ function textForWidgetEvent(event) {
     // equivalent to that condition.
     if (url) {
         if (prevUrl) {
-            return _t('%(widgetName)s widget modified by %(senderName)s', {
+            return () => _t('%(widgetName)s widget modified by %(senderName)s', {
                 widgetName, senderName,
             });
         } else {
-            return _t('%(widgetName)s widget added by %(senderName)s', {
+            return () => _t('%(widgetName)s widget added by %(senderName)s', {
                 widgetName, senderName,
             });
         }
     } else {
-        return _t('%(widgetName)s widget removed by %(senderName)s', {
+        return () => _t('%(widgetName)s widget removed by %(senderName)s', {
             widgetName, senderName,
         });
     }
@@ -481,7 +503,7 @@ function textForWidgetEvent(event) {
 
 function textForWidgetLayoutEvent(event) {
     const senderName = event.sender?.name || event.getSender();
-    return _t("%(senderName)s has updated the widget layout", {senderName});
+    return () => _t("%(senderName)s has updated the widget layout", {senderName});
 }
 
 function textForMjolnirEvent(event) {
@@ -492,74 +514,74 @@ function textForMjolnirEvent(event) {
     // Rule removed
     if (!entity) {
         if (USER_RULE_TYPES.includes(event.getType())) {
-            return _t("%(senderName)s removed the rule banning users matching %(glob)s",
+            return () => _t("%(senderName)s removed the rule banning users matching %(glob)s",
                 {senderName, glob: prevEntity});
         } else if (ROOM_RULE_TYPES.includes(event.getType())) {
-            return _t("%(senderName)s removed the rule banning rooms matching %(glob)s",
+            return () => _t("%(senderName)s removed the rule banning rooms matching %(glob)s",
                 {senderName, glob: prevEntity});
         } else if (SERVER_RULE_TYPES.includes(event.getType())) {
-            return _t("%(senderName)s removed the rule banning servers matching %(glob)s",
+            return () => _t("%(senderName)s removed the rule banning servers matching %(glob)s",
                 {senderName, glob: prevEntity});
         }
 
         // Unknown type. We'll say something, but we shouldn't end up here.
-        return _t("%(senderName)s removed a ban rule matching %(glob)s", {senderName, glob: prevEntity});
+        return () => _t("%(senderName)s removed a ban rule matching %(glob)s", {senderName, glob: prevEntity});
     }
 
     // Invalid rule
-    if (!recommendation || !reason) return _t(`%(senderName)s updated an invalid ban rule`, {senderName});
+    if (!recommendation || !reason) return () => _t(`%(senderName)s updated an invalid ban rule`, {senderName});
 
     // Rule updated
     if (entity === prevEntity) {
         if (USER_RULE_TYPES.includes(event.getType())) {
-            return _t("%(senderName)s updated the rule banning users matching %(glob)s for %(reason)s",
+            return () => _t("%(senderName)s updated the rule banning users matching %(glob)s for %(reason)s",
                 {senderName, glob: entity, reason});
         } else if (ROOM_RULE_TYPES.includes(event.getType())) {
-            return _t("%(senderName)s updated the rule banning rooms matching %(glob)s for %(reason)s",
+            return () => _t("%(senderName)s updated the rule banning rooms matching %(glob)s for %(reason)s",
                 {senderName, glob: entity, reason});
         } else if (SERVER_RULE_TYPES.includes(event.getType())) {
-            return _t("%(senderName)s updated the rule banning servers matching %(glob)s for %(reason)s",
+            return () => _t("%(senderName)s updated the rule banning servers matching %(glob)s for %(reason)s",
                 {senderName, glob: entity, reason});
         }
 
         // Unknown type. We'll say something but we shouldn't end up here.
-        return _t("%(senderName)s updated a ban rule matching %(glob)s for %(reason)s",
+        return () => _t("%(senderName)s updated a ban rule matching %(glob)s for %(reason)s",
             {senderName, glob: entity, reason});
     }
 
     // New rule
     if (!prevEntity) {
         if (USER_RULE_TYPES.includes(event.getType())) {
-            return _t("%(senderName)s created a rule banning users matching %(glob)s for %(reason)s",
+            return () => _t("%(senderName)s created a rule banning users matching %(glob)s for %(reason)s",
                 {senderName, glob: entity, reason});
         } else if (ROOM_RULE_TYPES.includes(event.getType())) {
-            return _t("%(senderName)s created a rule banning rooms matching %(glob)s for %(reason)s",
+            return () => _t("%(senderName)s created a rule banning rooms matching %(glob)s for %(reason)s",
                 {senderName, glob: entity, reason});
         } else if (SERVER_RULE_TYPES.includes(event.getType())) {
-            return _t("%(senderName)s created a rule banning servers matching %(glob)s for %(reason)s",
+            return () => _t("%(senderName)s created a rule banning servers matching %(glob)s for %(reason)s",
                 {senderName, glob: entity, reason});
         }
 
         // Unknown type. We'll say something but we shouldn't end up here.
-        return _t("%(senderName)s created a ban rule matching %(glob)s for %(reason)s",
+        return () => _t("%(senderName)s created a ban rule matching %(glob)s for %(reason)s",
             {senderName, glob: entity, reason});
     }
 
     // else the entity !== prevEntity - count as a removal & add
     if (USER_RULE_TYPES.includes(event.getType())) {
-        return _t(
+        return () => _t(
             "%(senderName)s changed a rule that was banning users matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
             {senderName, oldGlob: prevEntity, newGlob: entity, reason},
         );
     } else if (ROOM_RULE_TYPES.includes(event.getType())) {
-        return _t(
+        return () => _t(
             "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
             {senderName, oldGlob: prevEntity, newGlob: entity, reason},
         );
     } else if (SERVER_RULE_TYPES.includes(event.getType())) {
-        return _t(
+        return () => _t(
             "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
             {senderName, oldGlob: prevEntity, newGlob: entity, reason},
@@ -567,7 +589,7 @@ function textForMjolnirEvent(event) {
     }
 
     // Unknown type. We'll say something but we shouldn't end up here.
-    return _t("%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s " +
+    return () => _t("%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s " +
         "for %(reason)s", {senderName, oldGlob: prevEntity, newGlob: entity, reason});
 }
 
@@ -604,8 +626,12 @@ for (const evType of ALL_RULE_TYPES) {
     stateHandlers[evType] = textForMjolnirEvent;
 }
 
+export function hasText(ev) {
+    const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
+    return Boolean(handler?.(ev));
+}
+
 export function textForEvent(ev) {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
-    if (handler) return handler(ev);
-    return '';
+    return handler?.(ev)?.() || '';
 }
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index bca62e7b2f..d040944833 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -30,7 +30,7 @@ import RoomContext from "../../contexts/RoomContext";
 import {Layout, LayoutPropType} from "../../settings/Layout";
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
-import {textForEvent} from "../../TextForEvent";
+import {hasText} from "../../TextForEvent";
 import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
 import DMRoomMap from "../../utils/DMRoomMap";
 import NewRoomIntro from "../views/rooms/NewRoomIntro";
@@ -1180,11 +1180,8 @@ class MemberGrouper {
 
     add(ev) {
         if (ev.getType() === 'm.room.member') {
-            // We'll just double check that it's worth our time to do so, through an
-            // ugly hack. If textForEvent returns something, we should group it for
-            // rendering but if it doesn't then we'll exclude it.
-            const renderText = textForEvent(ev);
-            if (!renderText || renderText.trim().length === 0) return; // quietly ignore
+            // We can ignore any events that don't actually have a message to display
+            if (!hasText(ev)) return;
         }
         this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
             ev.getId(),
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 8cec067c39..fda2906f07 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -25,7 +25,7 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import ReplyThread from "../elements/ReplyThread";
 import { _t } from '../../../languageHandler';
-import * as TextForEvent from "../../../TextForEvent";
+import { hasText } from "../../../TextForEvent";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -1200,7 +1200,7 @@ export function haveTileForEvent(e) {
     const handler = getHandlerTile(e);
     if (handler === undefined) return false;
     if (handler === 'messages.TextualEvent') {
-        return TextForEvent.textForEvent(e) !== '';
+        return hasText(e);
     } else if (handler === 'messages.RoomCreate') {
         return Boolean(e.getContent()['predecessor']);
     } else {

From 1e574307d0a74c498429c6e2a22f07c61369550b Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sun, 6 Jun 2021 23:08:47 -0400
Subject: [PATCH 0243/1270] Cache lowBandwidth setting to speed up BaseAvatar

Signed-off-by: Robin Townsend 
---
 src/components/structures/RoomView.tsx      |  5 +++++
 src/components/views/avatars/BaseAvatar.tsx | 15 +++++++++++----
 src/contexts/RoomContext.ts                 |  1 +
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index b80d909a94..e4dc90f141 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -182,6 +182,7 @@ export interface IState {
     canReact: boolean;
     canReply: boolean;
     layout: Layout;
+    lowBandwidth: boolean;
     showReadReceipts: boolean;
     showRedactions: boolean;
     showJoinLeaves: boolean;
@@ -244,6 +245,7 @@ export default class RoomView extends React.Component {
             canReact: false,
             canReply: false,
             layout: SettingsStore.getValue("layout"),
+            lowBandwidth: SettingsStore.getValue("lowBandwidth"),
             showReadReceipts: true,
             showRedactions: true,
             showJoinLeaves: true,
@@ -279,6 +281,9 @@ export default class RoomView extends React.Component {
             SettingsStore.watchSetting("layout", null, () =>
                 this.setState({ layout: SettingsStore.getValue("layout") }),
             ),
+            SettingsStore.watchSetting("lowBandwidth", null, () =>
+                this.setState({ lowBandwidth: SettingsStore.getValue("lowBandwidth") }),
+            ),
         ];
     }
 
diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx
index 8ce05e0a55..6949c14636 100644
--- a/src/components/views/avatars/BaseAvatar.tsx
+++ b/src/components/views/avatars/BaseAvatar.tsx
@@ -22,6 +22,7 @@ import classNames from 'classnames';
 import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
+import RoomContext from "../../../contexts/RoomContext";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import {toPx} from "../../../utils/units";
@@ -44,12 +45,12 @@ interface IProps {
     className?: string;
 }
 
-const calculateUrls = (url, urls) => {
+const calculateUrls = (url, urls, lowBandwidth) => {
     // work out the full set of urls to try to load. This is formed like so:
     // imageUrls: [ props.url, ...props.urls ]
 
     let _urls = [];
-    if (!SettingsStore.getValue("lowBandwidth")) {
+    if (!lowBandwidth) {
         _urls = urls || [];
 
         if (url) {
@@ -63,7 +64,13 @@ const calculateUrls = (url, urls) => {
 };
 
 const useImageUrl = ({url, urls}): [string, () => void] => {
-    const [imageUrls, setUrls] = useState(calculateUrls(url, urls));
+    // Since this is a hot code path and the settings store can be slow, we
+    // use the cached lowBandwidth value from the room context if it exists
+    const roomContext = useContext(RoomContext);
+    const lowBandwidth = roomContext ?
+        roomContext.lowBandwidth : SettingsStore.getValue("lowBandwidth");
+
+    const [imageUrls, setUrls] = useState(calculateUrls(url, urls, lowBandwidth));
     const [urlsIndex, setIndex] = useState(0);
 
     const onError = useCallback(() => {
@@ -71,7 +78,7 @@ const useImageUrl = ({url, urls}): [string, () => void] => {
     }, []);
 
     useEffect(() => {
-        setUrls(calculateUrls(url, urls));
+        setUrls(calculateUrls(url, urls, lowBandwidth));
         setIndex(0);
     }, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
 
diff --git a/src/contexts/RoomContext.ts b/src/contexts/RoomContext.ts
index 1efa1c03e7..3464f952a6 100644
--- a/src/contexts/RoomContext.ts
+++ b/src/contexts/RoomContext.ts
@@ -40,6 +40,7 @@ const RoomContext = createContext({
     canReact: false,
     canReply: false,
     layout: Layout.Group,
+    lowBandwidth: false,
     showReadReceipts: true,
     showRedactions: true,
     showJoinLeaves: true,

From 21ff1f521fa191308852429214d2697ee35adda8 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Sun, 6 Jun 2021 23:14:26 -0400
Subject: [PATCH 0244/1270] Fix i18n strings

Signed-off-by: Robin Townsend 
---
 src/i18n/strings/en_EN.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9e85ea28c8..5108ea7fe2 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -556,8 +556,8 @@
     "%(senderName)s made future room history visible to all room members.": "%(senderName)s made future room history visible to all room members.",
     "%(senderName)s made future room history visible to anyone.": "%(senderName)s made future room history visible to anyone.",
     "%(senderName)s made future room history visible to unknown (%(visibility)s).": "%(senderName)s made future room history visible to unknown (%(visibility)s).",
-    "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s",
     "%(senderName)s changed the power level of %(powerLevelDiffText)s.": "%(senderName)s changed the power level of %(powerLevelDiffText)s.",
+    "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s",
     "%(senderName)s changed the pinned messages for the room.": "%(senderName)s changed the pinned messages for the room.",
     "%(widgetName)s widget modified by %(senderName)s": "%(widgetName)s widget modified by %(senderName)s",
     "%(widgetName)s widget added by %(senderName)s": "%(widgetName)s widget added by %(senderName)s",

From b2b95257a8571edde2cf1a7ed110eb1a65652252 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 08:54:41 +0100
Subject: [PATCH 0245/1270] Convert RoomAliasField to Typescript

---
 src/components/views/elements/Field.tsx       |  7 +-
 .../{RoomAliasField.js => RoomAliasField.tsx} | 75 ++++++++++---------
 src/i18n/strings/en_EN.json                   |  2 +-
 3 files changed, 48 insertions(+), 36 deletions(-)
 rename src/components/views/elements/{RoomAliasField.js => RoomAliasField.tsx} (67%)

diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 59d9a11596..1373c2df0e 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -29,6 +29,11 @@ function getId() {
     return `${BASE_ID}_${count++}`;
 }
 
+export interface IValidateOpts {
+    focused?: boolean;
+    allowEmpty?: boolean;
+}
+
 interface IProps {
     // The field's ID, which binds the input and label together. Immutable.
     id?: string;
@@ -180,7 +185,7 @@ export default class Field extends React.PureComponent {
         }
     };
 
-    public async validate({ focused, allowEmpty = true }: {focused?: boolean, allowEmpty?: boolean}) {
+    public async validate({ focused, allowEmpty = true }: IValidateOpts) {
         if (!this.props.onValidate) {
             return;
         }
diff --git a/src/components/views/elements/RoomAliasField.js b/src/components/views/elements/RoomAliasField.tsx
similarity index 67%
rename from src/components/views/elements/RoomAliasField.js
rename to src/components/views/elements/RoomAliasField.tsx
index 813dd8b5cc..7eff529c46 100644
--- a/src/components/views/elements/RoomAliasField.js
+++ b/src/components/views/elements/RoomAliasField.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,67 +13,74 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
+import React, { createRef } from "react";
+
 import { _t } from '../../../languageHandler';
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import withValidation from './Validation';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Field, { IValidateOpts } from "./Field";
+
+interface IProps {
+    domain: string;
+    value: string;
+    label?: string;
+    placeholder?: string;
+    onChange?(value: string): void;
+}
+
+interface IState {
+    isValid: boolean;
+}
 
 // Controlled form component wrapping Field for inputting a room alias scoped to a given domain
 @replaceableComponent("views.elements.RoomAliasField")
-export default class RoomAliasField extends React.PureComponent {
-    static propTypes = {
-        domain: PropTypes.string.isRequired,
-        onChange: PropTypes.func,
-        value: PropTypes.string.isRequired,
+export default class RoomAliasField extends React.PureComponent {
+    private fieldRef = createRef();
+
+    public state = {
+        isValid: true,
     };
 
-    constructor(props) {
-        super(props);
-        this.state = {isValid: true};
-    }
-
-    _asFullAlias(localpart) {
+    private asFullAlias(localpart: string): string {
         return `#${localpart}:${this.props.domain}`;
     }
 
     render() {
-        const Field = sdk.getComponent('views.elements.Field');
         const poundSign = (#);
         const aliasPostfix = ":" + this.props.domain;
         const domain = ({aliasPostfix});
         const maxlength = 255 - this.props.domain.length - 2;   // 2 for # and :
         return (
              this._fieldRef = ref}
-                onValidate={this._onValidate}
-                placeholder={_t("e.g. my-room")}
-                onChange={this._onChange}
+                ref={this.fieldRef}
+                onValidate={this.onValidate}
+                placeholder={this.props.placeholder || _t("e.g. my-room")}
+                onChange={this.onChange}
                 value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)}
                 maxLength={maxlength}
             />
         );
     }
 
-    _onChange = (ev) => {
+    private onChange = (ev) => {
         if (this.props.onChange) {
-            this.props.onChange(this._asFullAlias(ev.target.value));
+            this.props.onChange(this.asFullAlias(ev.target.value));
         }
     };
 
-    _onValidate = async (fieldState) => {
-        const result = await this._validationRules(fieldState);
+    private onValidate = async (fieldState) => {
+        const result = await this.validationRules(fieldState);
         this.setState({isValid: result.valid});
         return result;
     };
 
-    _validationRules = withValidation({
+    private validationRules = withValidation({
         rules: [
             {
                 key: "safeLocalpart",
@@ -81,7 +88,7 @@ export default class RoomAliasField extends React.PureComponent {
                     if (!value) {
                         return true;
                     }
-                    const fullAlias = this._asFullAlias(value);
+                    const fullAlias = this.asFullAlias(value);
                     // XXX: FIXME https://github.com/matrix-org/matrix-doc/issues/668
                     return !value.includes("#") && !value.includes(":") && !value.includes(",") &&
                         encodeURI(fullAlias) === fullAlias;
@@ -90,7 +97,7 @@ export default class RoomAliasField extends React.PureComponent {
             }, {
                 key: "required",
                 test: async ({ value, allowEmpty }) => allowEmpty || !!value,
-                invalid: () => _t("Please provide a room address"),
+                invalid: () => _t("Please provide an address"),
             }, {
                 key: "taken",
                 final: true,
@@ -100,7 +107,7 @@ export default class RoomAliasField extends React.PureComponent {
                     }
                     const client = MatrixClientPeg.get();
                     try {
-                        await client.getRoomIdForAlias(this._asFullAlias(value));
+                        await client.getRoomIdForAlias(this.asFullAlias(value));
                         // we got a room id, so the alias is taken
                         return false;
                     } catch (err) {
@@ -120,11 +127,11 @@ export default class RoomAliasField extends React.PureComponent {
         return this.state.isValid;
     }
 
-    validate(options) {
-        return this._fieldRef.validate(options);
+    validate(options: IValidateOpts) {
+        return this.fieldRef.current?.validate(options);
     }
 
     focus() {
-        this._fieldRef.focus();
+        this.fieldRef.current?.focus();
     }
 }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9e85ea28c8..02662aa508 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2014,7 +2014,7 @@
     "Room address": "Room address",
     "e.g. my-room": "e.g. my-room",
     "Some characters not allowed": "Some characters not allowed",
-    "Please provide a room address": "Please provide a room address",
+    "Please provide an address": "Please provide an address",
     "This address is available to use": "This address is available to use",
     "This address is already in use": "This address is already in use",
     "Server Options": "Server Options",

From 8c34a8461ee64949b670715cafac5948bedbca57 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 08:57:39 +0100
Subject: [PATCH 0246/1270] Add way to specify address during public space
 creation

---
 res/css/views/spaces/_SpaceBasicSettings.scss |  2 +-
 .../views/spaces/SpaceCreateMenu.tsx          | 45 +++++++++++++++----
 src/i18n/strings/en_EN.json                   |  2 +
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.scss
index 204ccab2b7..e6e06e7181 100644
--- a/res/css/views/spaces/_SpaceBasicSettings.scss
+++ b/res/css/views/spaces/_SpaceBasicSettings.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_SpaceBasicSettings {
     .mx_Field {
-        margin: 32px 0;
+        margin: 24px 0;
     }
 
     .mx_SpaceBasicSettings_avatarContainer {
diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx
index 0ebf511018..a65b53a045 100644
--- a/src/components/views/spaces/SpaceCreateMenu.tsx
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@@ -33,6 +33,7 @@ import {USER_LABS_TAB} from "../dialogs/UserSettingsDialog";
 import Field from "../elements/Field";
 import withValidation from "../elements/Validation";
 import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import RoomAliasField from "../elements/RoomAliasField";
 
 const SpaceCreateMenuType = ({ title, description, className, onClick }) => {
     return (
@@ -58,6 +59,11 @@ const spaceNameValidator = withValidation({
     ],
 });
 
+const nameToAlias = (name: string, domain: string): string => {
+    const localpart = name.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9_-]+/gi, "");
+    return `#${localpart}:${domain}`;
+};
+
 const SpaceCreateMenu = ({ onFinished }) => {
     const cli = useContext(MatrixClientContext);
     const [visibility, setVisibility] = useState(null);
@@ -65,6 +71,8 @@ const SpaceCreateMenu = ({ onFinished }) => {
 
     const [name, setName] = useState("");
     const spaceNameField = useRef();
+    const [alias, setAlias] = useState("");
+    const spaceAliasField = useRef();
     const [avatar, setAvatar] = useState(null);
     const [topic, setTopic] = useState("");
 
@@ -80,6 +88,13 @@ const SpaceCreateMenu = ({ onFinished }) => {
             setBusy(false);
             return;
         }
+        // validate the space name alias field but do not require it
+        if (visibility === Visibility.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) {
+            spaceAliasField.current.focus();
+            spaceAliasField.current.validate({ allowEmpty: true, focused: true });
+            setBusy(false);
+            return;
+        }
 
         const initialState: IStateEvent[] = [
             {
@@ -97,12 +112,6 @@ const SpaceCreateMenu = ({ onFinished }) => {
                 content: { url },
             });
         }
-        if (topic) {
-            initialState.push({
-                type: EventType.RoomTopic,
-                content: { topic },
-            });
-        }
 
         try {
             await createRoom({
@@ -110,7 +119,6 @@ const SpaceCreateMenu = ({ onFinished }) => {
                     preset: visibility === Visibility.Public ? Preset.PublicChat : Preset.PrivateChat,
                     name,
                     creation_content: {
-                        // Based on MSC1840
                         [RoomCreateTypeField]: RoomType.Space,
                     },
                     initial_state: initialState,
@@ -119,6 +127,8 @@ const SpaceCreateMenu = ({ onFinished }) => {
                         events_default: 100,
                         ...Visibility.Public ? { invite: 0 } : {},
                     },
+                    room_alias_name: alias ? alias.substr(1, alias.indexOf(":") - 1) : undefined,
+                    topic,
                 },
                 spinner: false,
                 encryption: false,
@@ -157,6 +167,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
             
         ;
     } else {
+        const domain = cli.getDomain();
         body = 
              {
                     label={_t("Name")}
                     autoFocus={true}
                     value={name}
-                    onChange={ev => setName(ev.target.value)}
+                    onChange={ev => {
+                        const newName = ev.target.value;
+                        if (!alias || alias === nameToAlias(name, domain)) {
+                            setAlias(nameToAlias(newName, domain));
+                        }
+                        setName(newName);
+                    }}
                     ref={spaceNameField}
                     onValidate={spaceNameValidator}
                     disabled={busy}
                 />
 
+                { visibility === Visibility.Public
+                    ? 
+                    : null
+                }
+
                 
Date: Mon, 7 Jun 2021 08:59:57 +0100
Subject: [PATCH 0247/1270] Stash

---
 src/stores/SpaceStore.tsx | 62 +++++++++++++++++++++++++--------------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 9ef961ce2d..5e09b617a7 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -61,8 +61,6 @@ const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces,
     }, [[], []]);
 };
 
-const SpaceTagOrderingField = "org.matrix.mscXXXX.space";
-
 // For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
 export const getChildOrder = (order: string, creationTs: number, roomId: string): Array>> => {
     let validatedOrder: string = null;
@@ -98,7 +96,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
     private _activeSpace?: Room = null;
     private _suggestedRooms: ISuggestedRoom[] = [];
     private _invitedSpaces = new Set();
-    private spaceOrderLocalEchoMap = new Map();
+    private spaceOrderLocalEchoMap = new Map();
 
     public get invitedSpaces(): Room[] {
         return Array.from(this._invitedSpaces);
@@ -477,11 +475,11 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
     };
 
     private onRoomAccountData = (ev: MatrixEvent, room: Room, lastEv?: MatrixEvent) => {
-        if (!room.isSpaceRoom() || ev.getType() !== EventType.Tag) return;
+        if (!room.isSpaceRoom() || ev.getType() !== EventType.SpaceOrder) return;
 
         this.spaceOrderLocalEchoMap.delete(room.roomId); // clear any local echo
-        const order = ev.getContent()?.tags?.[SpaceTagOrderingField]?.order;
-        const lastOrder = lastEv?.getContent()?.tags?.[SpaceTagOrderingField]?.order;
+        const order = ev.getContent()?.order;
+        const lastOrder = lastEv?.getContent()?.order;
         if (order !== lastOrder) {
             this.notifyIfOrderChanged();
         }
@@ -625,15 +623,21 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         childSpaces.forEach(s => this.traverseSpace(s.roomId, fn, includeRooms, newPath));
     }
 
-    private getSpaceTagOrdering = (space: Room): number | undefined => {
+    private getSpaceTagOrdering = (space: Room): string | undefined => {
         if (this.spaceOrderLocalEchoMap.has(space.roomId)) return this.spaceOrderLocalEchoMap.get(space.roomId);
-        return space.tags?.[SpaceTagOrderingField]?.order;
+        const order = space.getAccountData(EventType.SpaceOrder)?.getContent()?.order;
+        return typeof order === "string" ? order : undefined;
     };
 
     private sortRootSpaces(spaces: Room[]): Room[] {
         return sortBy(spaces, [this.getSpaceTagOrdering, "roomId"]);
     }
 
+    private setRootSpaceOrder(space: Room, order: string): void {
+        this.spaceOrderLocalEchoMap.set(space.roomId, order);
+        this.matrixClient.setRoomAccountData(space.roomId, EventType.SpaceOrder, { order });
+    }
+
     public moveRootSpace(fromIndex: number, toIndex: number): void {
         if (
             fromIndex < 0 || toIndex < 0 ||
@@ -645,29 +649,43 @@ export class SpaceStoreClass extends AsyncStoreWithClient {
         const space = this.rootSpaces[fromIndex];
         const orders = this.rootSpaces.map(this.getSpaceTagOrdering);
 
-        let prevOrder = orders[toIndex - 1];
-        let nextOrder = orders[toIndex]; // accounts for downwards displacement of existing inhabitant of this index
+        let prevOrder: string;
+        let nextOrder: string;
 
-        if (prevOrder === undefined && nextOrder === undefined) {
-            // TODO WHAT A PAIN
+        if (toIndex > fromIndex) {
+            prevOrder = toIndex >= 0 ? orders[toIndex] : "aaaaa";
+            nextOrder = toIndex <= orders.length ? orders[toIndex + 1] : "zzzzz";
+        } else {
+            // accounts for downwards displacement of existing inhabitant of this index
+            prevOrder = toIndex > 0 ? orders[toIndex - 1] : "aaaaa";
+            nextOrder = toIndex < orders.length ? orders[toIndex] : "zzzzz";
         }
+        console.log("@@ start", {fromIndex, toIndex, orders, prevOrder, nextOrder});
 
-        prevOrder = prevOrder || 0.0;
-        nextOrder = nextOrder || 1.0;
+        if (prevOrder === undefined) {
+            const firstUndefinedIndex = orders.indexOf(undefined);
+            const numUndefined = orders.length - firstUndefinedIndex;
+            const lastOrder = orders[firstUndefinedIndex - 1];
+            console.log("@@ precalc", {firstUndefinedIndex, numUndefined, lastOrder});
+            nextOrder = lastOrder + step;
+            for (let i = firstUndefinedIndex; i < toIndex; i++, nextOrder += step) {
+                console.log("@@ preset", {i, nextOrder});
+                this.setRootSpaceOrder(this.rootSpaces[i], nextOrder);
+            }
+
+            prevOrder = nextOrder;
+            nextOrder += step;
+        }
 
         if (prevOrder !== nextOrder) {
             const order = prevOrder + ((nextOrder - prevOrder) / 2);
-            this.spaceOrderLocalEchoMap.set(space.roomId, order);
-            this.matrixClient.setRoomAccountData(space.roomId, EventType.Tag, {
-                tags: {
-                    ...space.tags,
-                    [SpaceTagOrderingField]: { order },
-                },
-            });
-            this.notifyIfOrderChanged();
+            console.log("@@ set", {prevOrder, nextOrder, order});
+            this.setRootSpaceOrder(space, order);
         } else {
             // TODO REBUILD
         }
+
+        this.notifyIfOrderChanged();
     }
 }
 

From 31d308a1fbdd94176a8a3ea43e1e20f5b41590db Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 09:22:47 +0100
Subject: [PATCH 0248/1270] Fix Stickerpicker context menu

---
 .../views/context_menus/WidgetContextMenu.tsx | 46 ++++++++++++-------
 src/components/views/elements/AppTile.js      |  2 +
 src/components/views/rooms/Stickerpicker.js   |  6 +--
 src/stores/widgets/WidgetLayoutStore.ts       |  2 +-
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/components/views/context_menus/WidgetContextMenu.tsx b/src/components/views/context_menus/WidgetContextMenu.tsx
index 623fe04f2f..068bfd6497 100644
--- a/src/components/views/context_menus/WidgetContextMenu.tsx
+++ b/src/components/views/context_menus/WidgetContextMenu.tsx
@@ -40,6 +40,8 @@ interface IProps extends React.ComponentProps {
     showUnpin?: boolean;
     // override delete handler
     onDeleteClick?(): void;
+    // override edit handler
+    onEditClick?(): void;
 }
 
 const WidgetContextMenu: React.FC = ({
@@ -47,6 +49,7 @@ const WidgetContextMenu: React.FC = ({
     app,
     userWidget,
     onDeleteClick,
+    onEditClick,
     showUnpin,
     ...props
 }) => {
@@ -89,12 +92,16 @@ const WidgetContextMenu: React.FC = ({
 
     let editButton;
     if (canModify && WidgetUtils.isManagedByManager(app)) {
-        const onEditClick = () => {
-            WidgetUtils.editWidget(room, app);
+        const _onEditClick = () => {
+            if (onEditClick) {
+                onEditClick();
+            } else {
+                WidgetUtils.editWidget(room, app);
+            }
             onFinished();
         };
 
-        editButton = ;
+        editButton = ;
     }
 
     let snapshotButton;
@@ -116,24 +123,29 @@ const WidgetContextMenu: React.FC = ({
 
     let deleteButton;
     if (onDeleteClick || canModify) {
-        const onDeleteClickDefault = () => {
-            // Show delete confirmation dialog
-            Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
-                title: _t("Delete Widget"),
-                description: _t(
-                    "Deleting a widget removes it for all users in this room." +
-                    " Are you sure you want to delete this widget?"),
-                button: _t("Delete widget"),
-                onFinished: (confirmed) => {
-                    if (!confirmed) return;
-                    WidgetUtils.setRoomWidget(roomId, app.id);
-                },
-            });
+        const _onDeleteClick = () => {
+            if (onDeleteClick) {
+                onDeleteClick();
+            } else {
+                // Show delete confirmation dialog
+                Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
+                    title: _t("Delete Widget"),
+                    description: _t(
+                        "Deleting a widget removes it for all users in this room." +
+                        " Are you sure you want to delete this widget?"),
+                    button: _t("Delete widget"),
+                    onFinished: (confirmed) => {
+                        if (!confirmed) return;
+                        WidgetUtils.setRoomWidget(roomId, app.id);
+                    },
+                });
+            }
+
             onFinished();
         };
 
         deleteButton = ;
     }
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index b898ad2ebc..ad5cbfa6b3 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -417,6 +417,8 @@ export default class AppTile extends React.Component {
                     onFinished={this._closeContextMenu}
                     showUnpin={!this.props.userWidget}
                     userWidget={this.props.userWidget}
+                    onEditClick={this.props.onEditClick}
+                    onDeleteClick={this.props.onDeleteClick}
                 />
             );
         }
diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
index 3d2300b83c..b9aaee7a57 100644
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@@ -367,7 +367,7 @@ export default class Stickerpicker extends React.PureComponent {
     /**
      * Launch the integration manager on the stickers integration page
      */
-    _launchManageIntegrations() {
+    _launchManageIntegrations = () => {
         // TODO: Open the right integration manager for the widget
         if (SettingsStore.getValue("feature_many_integration_managers")) {
             IntegrationManagers.sharedInstance().openAll(
@@ -382,7 +382,7 @@ export default class Stickerpicker extends React.PureComponent {
                 this.state.widgetId,
             );
         }
-    }
+    };
 
     render() {
         let stickerPicker;
@@ -401,7 +401,7 @@ export default class Stickerpicker extends React.PureComponent {
                     key="controls_hide_stickers"
                     className={className}
                     onClick={this._onHideStickersClick}
-                    active={this.state.showStickers}
+                    active={this.state.showStickers.toString()}
                     title={_t("Hide Stickers")}
                 >
                 ;
diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts
index f5734d74c5..b74da98c9c 100644
--- a/src/stores/widgets/WidgetLayoutStore.ts
+++ b/src/stores/widgets/WidgetLayoutStore.ts
@@ -332,7 +332,7 @@ export class WidgetLayoutStore extends ReadyWatchingStore {
     }
 
     public getContainerWidgets(room: Room, container: Container): IApp[] {
-        return this.byRoom[room.roomId]?.[container]?.ordered || [];
+        return this.byRoom[room?.roomId]?.[container]?.ordered || [];
     }
 
     public isInContainer(room: Room, widget: IApp, container: Container): boolean {

From a6ddffe74c8f081e4a99ea087cfa51622a5c9769 Mon Sep 17 00:00:00 2001
From: Germain Souquet 
Date: Mon, 7 Jun 2021 09:26:42 +0100
Subject: [PATCH 0249/1270] Add scroll token to file and notif event tiles

---
 src/components/structures/MessagePanel.js |  5 -----
 src/components/views/rooms/EventTile.tsx  | 22 ++++++++++++++--------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 6709fef814..19bf27b1d2 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -616,10 +616,6 @@ export default class MessagePanel extends React.Component {
         const eventId = mxEv.getId();
         const highlight = (eventId === this.props.highlightedEventId);
 
-        // we can't use local echoes as scroll tokens, because their event IDs change.
-        // Local echos have a send "status".
-        const scrollToken = mxEv.status ? undefined : eventId;
-
         const readReceipts = this._readReceiptsByEvent[eventId];
 
         let isLastSuccessful = false;
@@ -651,7 +647,6 @@ export default class MessagePanel extends React.Component {
             
                  {
             permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
         }
 
+        const scrollToken = this.props.mxEvent.status
+            ? undefined
+            : this.props.mxEvent.getId();
+
         let avatar;
         let sender;
         let avatarSize;
@@ -1046,7 +1050,7 @@ export default class EventTile extends React.Component {
             case 'notif': {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
                 return (
-                    
+                    
                 );
             }
             case 'file_grid': {
                 return (
-                    
+                    
                 );
             }
 
@@ -1111,7 +1115,7 @@ export default class EventTile extends React.Component {
                     );
                 }
                 return (
-                    
    
+                    
  • 
                         { ircTimestamp }
                         { avatar }
                         { sender }
@@ -1129,7 +1133,7 @@ export default class EventTile extends React.Component {
                                 showUrlPreview={false}
                             />
                         
    • 
-                    
    
+                    
                 );
             }
             default: {
@@ -1143,13 +1147,15 @@ export default class EventTile extends React.Component {
 
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return (
-                    React.createElement(this.props.as || "div", {
+                    React.createElement(this.props.as || "li", {
                         "ref": this.ref,
                         "className": classes,
                         "tabIndex": -1,
                         "aria-live": ariaLive,
                         "aria-atomic": "true",
-                        "data-scroll-tokens": this.props["data-scroll-tokens"],
+                        // we can't use local echoes as scroll tokens, because their event IDs change.
+                        // Local echos have a send "status".
+                        "data-scroll-tokens": scrollToken,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
                     }, [

From d2ce670d3ec2c4c01653b3150d9b1d610bdec9e7 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 10:56:10 +0100
Subject: [PATCH 0250/1270] Remove unused code

---
 src/utils/Accessibility.js | 28 ----------------------------
 1 file changed, 28 deletions(-)
 delete mode 100644 src/utils/Accessibility.js

diff --git a/src/utils/Accessibility.js b/src/utils/Accessibility.js
deleted file mode 100644
index f4909f971b..0000000000
--- a/src/utils/Accessibility.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/**
- * Automatically focuses the captured reference when receiving a non-null
- * object. Useful in scenarios where componentDidMount does not have a
- * useful reference to an element, but one needs to focus the element on
- * first render. Example usage: ref={focusCapturedRef}
- * @param {function} ref The React reference to focus on, if not null
- */
-export function focusCapturedRef(ref) {
-    if (ref) {
-        ref.focus();
-    }
-}

From 9315a87ebfa9adacb0cf638fca65a687378c9b43 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 10:57:11 +0100
Subject: [PATCH 0251/1270] Convert EventIndex to Typescript

---
 src/indexing/BaseEventIndexManager.ts         |  10 +-
 src/indexing/{EventIndex.js => EventIndex.ts} | 177 ++++++++++--------
 2 files changed, 106 insertions(+), 81 deletions(-)
 rename src/indexing/{EventIndex.js => EventIndex.ts} (87%)

diff --git a/src/indexing/BaseEventIndexManager.ts b/src/indexing/BaseEventIndexManager.ts
index 6349f31524..debcb213ca 100644
--- a/src/indexing/BaseEventIndexManager.ts
+++ b/src/indexing/BaseEventIndexManager.ts
@@ -35,7 +35,7 @@ export interface MatrixProfile {
 export interface CrawlerCheckpoint {
     roomId: string;
     token: string;
-    fullCrawl: boolean;
+    fullCrawl?: boolean;
     direction: string;
 }
 
@@ -73,14 +73,14 @@ export interface EventAndProfile {
 export interface LoadArgs {
     roomId: string;
     limit: number;
-    fromEvent: string;
-    direction: string;
+    fromEvent?: string;
+    direction?: string;
 }
 
 export interface IndexStats {
     size: number;
-    event_count: number;
-    room_count: number;
+    eventCount: number;
+    roomCount: number;
 }
 
 /**
diff --git a/src/indexing/EventIndex.js b/src/indexing/EventIndex.ts
similarity index 87%
rename from src/indexing/EventIndex.js
rename to src/indexing/EventIndex.ts
index 33f2d594ae..b6289969bd 100644
--- a/src/indexing/EventIndex.js
+++ b/src/indexing/EventIndex.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,33 +14,42 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { EventEmitter } from "events";
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
+import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
+import { RoomState } from 'matrix-js-sdk/src/models/room-state';
+import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
+
 import PlatformPeg from "../PlatformPeg";
-import {MatrixClientPeg} from "../MatrixClientPeg";
-import {RoomMember} from 'matrix-js-sdk/src/models/room-member';
-import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
-import {sleep} from "../utils/promise";
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import { sleep } from "../utils/promise";
 import SettingsStore from "../settings/SettingsStore";
-import {EventEmitter} from "events";
-import {SettingLevel} from "../settings/SettingLevel";
+import { SettingLevel } from "../settings/SettingLevel";
+import {CrawlerCheckpoint, LoadArgs, SearchArgs} from "./BaseEventIndexManager";
+
+// The time in ms that the crawler will wait loop iterations if there
+// have not been any checkpoints to consume in the last iteration.
+const CRAWLER_IDLE_TIME = 5000;
+
+// The maximum number of events our crawler should fetch in a single crawl.
+const EVENTS_PER_CRAWL = 100;
+
+interface ICrawler {
+    cancel(): void;
+}
 
 /*
  * Event indexing class that wraps the platform specific event indexing.
  */
 export default class EventIndex extends EventEmitter {
-    constructor() {
-        super();
-        this.crawlerCheckpoints = [];
-        // The time in ms that the crawler will wait loop iterations if there
-        // have not been any checkpoints to consume in the last iteration.
-        this._crawlerIdleTime = 5000;
-        // The maximum number of events our crawler should fetch in a single
-        // crawl.
-        this._eventsPerCrawl = 100;
-        this._crawler = null;
-        this._currentCheckpoint = null;
-    }
+    private crawlerCheckpoints: CrawlerCheckpoint[] = [];
+    private crawler: ICrawler = null;
+    private currentCheckpoint: CrawlerCheckpoint = null;
 
-    async init() {
+    public async init() {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
         this.crawlerCheckpoints = await indexManager.loadCheckpoints();
@@ -52,7 +61,7 @@ export default class EventIndex extends EventEmitter {
     /**
      * Register event listeners that are necessary for the event index to work.
      */
-    registerListeners() {
+    public registerListeners() {
         const client = MatrixClientPeg.get();
 
         client.on('sync', this.onSync);
@@ -66,7 +75,7 @@ export default class EventIndex extends EventEmitter {
     /**
      * Remove the event index specific event listeners.
      */
-    removeListeners() {
+    public removeListeners() {
         const client = MatrixClientPeg.get();
         if (client === null) return;
 
@@ -81,7 +90,7 @@ export default class EventIndex extends EventEmitter {
     /**
      * Get crawler checkpoints for the encrypted rooms and store them in the index.
      */
-    async addInitialCheckpoints() {
+    public async addInitialCheckpoints() {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         const client = MatrixClientPeg.get();
         const rooms = client.getRooms();
@@ -102,14 +111,14 @@ export default class EventIndex extends EventEmitter {
             const timeline = room.getLiveTimeline();
             const token = timeline.getPaginationToken("b");
 
-            const backCheckpoint = {
+            const backCheckpoint: CrawlerCheckpoint = {
                 roomId: room.roomId,
                 token: token,
                 direction: "b",
                 fullCrawl: true,
             };
 
-            const forwardCheckpoint = {
+            const forwardCheckpoint: CrawlerCheckpoint = {
                 roomId: room.roomId,
                 token: token,
                 direction: "f",
@@ -146,7 +155,7 @@ export default class EventIndex extends EventEmitter {
      *     - Every other sync, tell the event index to commit all the queued up
      *         live events
      */
-    onSync = async (state, prevState, data) => {
+    private onSync = async (state: string, prevState: string, data: object) => {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
         if (prevState === "PREPARED" && state === "SYNCING") {
@@ -176,7 +185,15 @@ export default class EventIndex extends EventEmitter {
      * otherwise we save their event id and wait for them in the Event.decrypted
      * listener.
      */
-    onRoomTimeline = async (ev, room, toStartOfTimeline, removed, data) => {
+    private onRoomTimeline = async (
+        ev: MatrixEvent,
+        room: Room,
+        toStartOfTimeline: boolean,
+        removed: boolean,
+        data: {
+            liveEvent: boolean;
+        },
+    ) => {
         const client = MatrixClientPeg.get();
 
         // We only index encrypted rooms locally.
@@ -194,7 +211,7 @@ export default class EventIndex extends EventEmitter {
         await this.addLiveEventToIndex(ev);
     }
 
-    onRoomStateEvent = async (ev, state) => {
+    private onRoomStateEvent = async (ev: MatrixEvent, state: RoomState) => {
         if (!MatrixClientPeg.get().isRoomEncrypted(state.roomId)) return;
 
         if (ev.getType() === "m.room.encryption" && !await this.isRoomIndexed(state.roomId)) {
@@ -209,7 +226,7 @@ export default class EventIndex extends EventEmitter {
      * Checks if the event was marked for addition in the Room.timeline
      * listener, if so queues it up to be added to the index.
      */
-    onEventDecrypted = async (ev, err) => {
+    private onEventDecrypted = async (ev: MatrixEvent, err: Error) => {
         // If the event isn't in our live event set, ignore it.
         if (err) return;
         await this.addLiveEventToIndex(ev);
@@ -220,7 +237,7 @@ export default class EventIndex extends EventEmitter {
      *
      * Removes a redacted event from our event index.
      */
-    onRedaction = async (ev, room) => {
+    private onRedaction = async (ev: MatrixEvent, room: Room) => {
         // We only index encrypted rooms locally.
         if (!MatrixClientPeg.get().isRoomEncrypted(room.roomId)) return;
         const indexManager = PlatformPeg.get().getEventIndexingManager();
@@ -238,7 +255,7 @@ export default class EventIndex extends EventEmitter {
      * Listens for timeline resets that are caused by a limited timeline to
      * re-add checkpoints for rooms that need to be crawled again.
      */
-    onTimelineReset = async (room, timelineSet, resetAllTimelines) => {
+    private onTimelineReset = async (room: Room, timelineSet: EventTimelineSet, resetAllTimelines: boolean) => {
         if (room === null) return;
         if (!MatrixClientPeg.get().isRoomEncrypted(room.roomId)) return;
 
@@ -258,7 +275,7 @@ export default class EventIndex extends EventEmitter {
      * @returns {bool} Returns true if the event can be indexed, false
      * otherwise.
      */
-    isValidEvent(ev) {
+    private isValidEvent(ev: MatrixEvent) {
         const isUsefulType = ["m.room.message", "m.room.name", "m.room.topic"].includes(ev.getType());
         const validEventType = isUsefulType && !ev.isRedacted() && !ev.isDecryptionFailure();
 
@@ -282,7 +299,7 @@ export default class EventIndex extends EventEmitter {
         return validEventType && validMsgType && hasContentValue;
     }
 
-    eventToJson(ev) {
+    private eventToJson(ev: MatrixEvent) {
         const jsonEvent = ev.toJSON();
         const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
 
@@ -314,7 +331,7 @@ export default class EventIndex extends EventEmitter {
      *
      * @param {MatrixEvent} ev The event that should be added to the index.
      */
-    async addLiveEventToIndex(ev) {
+    private async addLiveEventToIndex(ev: MatrixEvent) {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
         if (!this.isValidEvent(ev)) return;
@@ -333,11 +350,11 @@ export default class EventIndex extends EventEmitter {
      * Emmit that the crawler has changed the checkpoint that it's currently
      * handling.
      */
-    emitNewCheckpoint() {
+    private emitNewCheckpoint() {
         this.emit("changedCheckpoint", this.currentRoom());
     }
 
-    async addEventsFromLiveTimeline(timeline) {
+    private async addEventsFromLiveTimeline(timeline: EventTimeline) {
         const events = timeline.getEvents();
 
         for (let i = 0; i < events.length; i++) {
@@ -346,7 +363,7 @@ export default class EventIndex extends EventEmitter {
         }
     }
 
-    async addRoomCheckpoint(roomId, fullCrawl = false) {
+    private async addRoomCheckpoint(roomId: string, fullCrawl = false) {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
@@ -396,16 +413,16 @@ export default class EventIndex extends EventEmitter {
      * crawl, otherwise create a new checkpoint and push it to the
      * crawlerCheckpoints queue so we go through them in a round-robin way.
      */
-    async crawlerFunc() {
+    private async crawlerFunc() {
         let cancelled = false;
 
         const client = MatrixClientPeg.get();
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
-        this._crawler = {};
-
-        this._crawler.cancel = () => {
-            cancelled = true;
+        this.crawler = {
+            cancel: () => {
+                cancelled = true;
+            },
         };
 
         let idle = false;
@@ -417,11 +434,11 @@ export default class EventIndex extends EventEmitter {
             sleepTime = Math.max(sleepTime, 100);
 
             if (idle) {
-                sleepTime = this._crawlerIdleTime;
+                sleepTime = CRAWLER_IDLE_TIME;
             }
 
-            if (this._currentCheckpoint !== null) {
-                this._currentCheckpoint = null;
+            if (this.currentCheckpoint !== null) {
+                this.currentCheckpoint = null;
                 this.emitNewCheckpoint();
             }
 
@@ -440,7 +457,7 @@ export default class EventIndex extends EventEmitter {
                 continue;
             }
 
-            this._currentCheckpoint = checkpoint;
+            this.currentCheckpoint = checkpoint;
             this.emitNewCheckpoint();
 
             idle = false;
@@ -454,8 +471,11 @@ export default class EventIndex extends EventEmitter {
 
             try {
                 res = await client.createMessagesRequest(
-                    checkpoint.roomId, checkpoint.token, this._eventsPerCrawl,
-                    checkpoint.direction);
+                    checkpoint.roomId,
+                    checkpoint.token,
+                    EVENTS_PER_CRAWL,
+                    checkpoint.direction,
+                );
             } catch (e) {
                 if (e.httpStatus === 403) {
                     console.log("EventIndex: Removing checkpoint as we don't have ",
@@ -612,23 +632,23 @@ export default class EventIndex extends EventEmitter {
             }
         }
 
-        this._crawler = null;
+        this.crawler = null;
     }
 
     /**
      * Start the crawler background task.
      */
-    startCrawler() {
-        if (this._crawler !== null) return;
+    public startCrawler() {
+        if (this.crawler !== null) return;
         this.crawlerFunc();
     }
 
     /**
      * Stop the crawler background task.
      */
-    stopCrawler() {
-        if (this._crawler === null) return;
-        this._crawler.cancel();
+    public stopCrawler() {
+        if (this.crawler === null) return;
+        this.crawler.cancel();
     }
 
     /**
@@ -637,7 +657,7 @@ export default class EventIndex extends EventEmitter {
      * This removes all the MatrixClient event listeners, stops the crawler
      * task, and closes the index.
      */
-    async close() {
+    public async close() {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         this.removeListeners();
         this.stopCrawler();
@@ -654,7 +674,7 @@ export default class EventIndex extends EventEmitter {
      * @return {Promise<[SearchResult]>} A promise that will resolve to an array
      * of search results once the search is done.
      */
-    async search(searchArgs) {
+    public async search(searchArgs: SearchArgs) {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         return indexManager.searchEventIndex(searchArgs);
     }
@@ -680,11 +700,16 @@ export default class EventIndex extends EventEmitter {
      * @returns {Promise} Resolves to an array of events that
      * contain URLs.
      */
-    async loadFileEvents(room, limit = 10, fromEvent = null, direction = EventTimeline.BACKWARDS) {
+    public async loadFileEvents(
+        room: Room,
+        limit = 10,
+        fromEvent: string = null,
+        direction: string = EventTimeline.BACKWARDS,
+    ) {
         const client = MatrixClientPeg.get();
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
-        const loadArgs = {
+        const loadArgs: LoadArgs = {
             roomId: room.roomId,
             limit: limit,
         };
@@ -772,13 +797,13 @@ export default class EventIndex extends EventEmitter {
      * @returns {Promise} Resolves to true if events were added to the
      * timeline, false otherwise.
      */
-    async populateFileTimeline(
-        timelineSet,
-        timeline,
-        room,
+    public async populateFileTimeline(
+        timelineSet: EventTimelineSet,
+        timeline: EventTimeline,
+        room: Room,
         limit = 10,
-        fromEvent = null,
-        direction = EventTimeline.BACKWARDS,
+        fromEvent: string = null,
+        direction: string = EventTimeline.BACKWARDS,
     ) {
         const matrixEvents = await this.loadFileEvents(room, limit, fromEvent, direction);
 
@@ -837,7 +862,7 @@ export default class EventIndex extends EventEmitter {
      * @returns {Promise} Resolves to a boolean which is true if more
      * events were successfully retrieved.
      */
-    paginateTimelineWindow(room, timelineWindow, direction, limit) {
+    public paginateTimelineWindow(room: Room, timelineWindow: TimelineWindow, direction: string, limit: number) {
         const tl = timelineWindow.getTimelineIndex(direction);
 
         if (!tl) return Promise.resolve(false);
@@ -871,7 +896,7 @@ export default class EventIndex extends EventEmitter {
      * @return {Promise} A promise that will resolve to the index
      * statistics.
      */
-    async getStats() {
+    public async getStats() {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         return indexManager.getStats();
     }
@@ -885,7 +910,7 @@ export default class EventIndex extends EventEmitter {
      * @return {Promise} Returns true if the index contains events for
      * the given room, false otherwise.
      */
-    async isRoomIndexed(roomId) {
+    public async isRoomIndexed(roomId) {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         return indexManager.isRoomIndexed(roomId);
     }
@@ -896,21 +921,21 @@ export default class EventIndex extends EventEmitter {
      * @returns {Room} A MatrixRoom that is being currently crawled, null
      * if no room is currently being crawled.
      */
-    currentRoom() {
-        if (this._currentCheckpoint === null && this.crawlerCheckpoints.length === 0) {
+    public currentRoom() {
+        if (this.currentCheckpoint === null && this.crawlerCheckpoints.length === 0) {
             return null;
         }
 
         const client = MatrixClientPeg.get();
 
-        if (this._currentCheckpoint !== null) {
-            return client.getRoom(this._currentCheckpoint.roomId);
+        if (this.currentCheckpoint !== null) {
+            return client.getRoom(this.currentCheckpoint.roomId);
         } else {
             return client.getRoom(this.crawlerCheckpoints[0].roomId);
         }
     }
 
-    crawlingRooms() {
+    public crawlingRooms() {
         const totalRooms = new Set();
         const crawlingRooms = new Set();
 
@@ -918,14 +943,14 @@ export default class EventIndex extends EventEmitter {
             crawlingRooms.add(checkpoint.roomId);
         });
 
-        if (this._currentCheckpoint !== null) {
-            crawlingRooms.add(this._currentCheckpoint.roomId);
+        if (this.currentCheckpoint !== null) {
+            crawlingRooms.add(this.currentCheckpoint.roomId);
         }
 
         const client = MatrixClientPeg.get();
         const rooms = client.getRooms();
 
-        const isRoomEncrypted = (room) => {
+        const isRoomEncrypted = (room: Room) => {
             return client.isRoomEncrypted(room.roomId);
         };
 
@@ -934,6 +959,6 @@ export default class EventIndex extends EventEmitter {
             totalRooms.add(room.roomId);
         });
 
-        return {crawlingRooms, totalRooms};
+        return { crawlingRooms, totalRooms };
     }
 }

From 3431ebb9957cb8424eb2ee32b4f87d445a6daf6b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 10:57:25 +0100
Subject: [PATCH 0252/1270] Convert AsyncWrapper to Typescript

---
 src/{AsyncWrapper.js => AsyncWrapper.tsx} | 63 ++++++++++++-----------
 1 file changed, 34 insertions(+), 29 deletions(-)
 rename src/{AsyncWrapper.js => AsyncWrapper.tsx} (59%)

diff --git a/src/AsyncWrapper.js b/src/AsyncWrapper.tsx
similarity index 59%
rename from src/AsyncWrapper.js
rename to src/AsyncWrapper.tsx
index 359828b312..1d3c42e60b 100644
--- a/src/AsyncWrapper.js
+++ b/src/AsyncWrapper.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,52 +14,63 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import * as sdk from './index';
-import PropTypes from 'prop-types';
+import React, { ComponentType } from "react";
+
 import { _t } from './languageHandler';
+import { IDialogProps } from "./components/views/dialogs/IDialogProps";
+import BaseDialog from "./components/views/dialogs/BaseDialog";
+import DialogButtons from "./components/views/elements/DialogButtons";
+import Spinner from "./components/views/elements/Spinner";
+
+type AsyncImport = { default: T };
+
+interface IProps extends IDialogProps {
+    // A promise which resolves with the real component
+    prom: Promise>;
+}
+
+interface IState {
+    component?: ComponentType;
+    error?: Error;
+}
 
 /**
  * Wrap an asynchronous loader function with a react component which shows a
  * spinner until the real component loads.
  */
-export default class AsyncWrapper extends React.Component {
-    static propTypes = {
-        /** A promise which resolves with the real component
-         */
-        prom: PropTypes.object.isRequired,
-    };
+export default class AsyncWrapper extends React.Component {
+    private unmounted = false;
 
-    state = {
+    public state = {
         component: null,
         error: null,
     };
 
     componentDidMount() {
-        this._unmounted = false;
         // XXX: temporary logging to try to diagnose
         // https://github.com/vector-im/element-web/issues/3148
         console.log('Starting load of AsyncWrapper for modal');
         this.props.prom.then((result) => {
-            if (this._unmounted) {
-                return;
-            }
+            if (this.unmounted) return;
+
             // Take the 'default' member if it's there, then we support
             // passing in just an import()ed module, since ES6 async import
             // always returns a module *namespace*.
-            const component = result.default ? result.default : result;
-            this.setState({component});
+            const component = (result as AsyncImport).default
+                ? (result as AsyncImport).default
+                : result as ComponentType;
+            this.setState({ component });
         }).catch((e) => {
             console.warn('AsyncWrapper promise failed', e);
-            this.setState({error: e});
+            this.setState({ error: e });
         });
     }
 
     componentWillUnmount() {
-        this._unmounted = true;
+        this.unmounted = true;
     }
 
-    _onWrapperCancelClick = () => {
+    private onWrapperCancelClick = () => {
         this.props.onFinished(false);
     };
 
@@ -69,20 +79,15 @@ export default class AsyncWrapper extends React.Component {
             const Component = this.state.component;
             return ;
         } else if (this.state.error) {
-            const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            return 
-                {_t("Unable to load! Check your network connectivity and try again.")}
+            return 
+                { _t("Unable to load! Check your network connectivity and try again.") }
                 
             ;
         } else {
             // show a spinner until the component is loaded.
-            const Spinner = sdk.getComponent("elements.Spinner");
             return ;
         }
     }

From b2d9dd7214c5f72add24d79c32b763b7c916187c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 10:57:39 +0100
Subject: [PATCH 0253/1270] Convert LifecycleStore to Typescript

---
 .../{LifecycleStore.js => LifecycleStore.ts}  | 50 ++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)
 rename src/stores/{LifecycleStore.js => LifecycleStore.ts} (62%)

diff --git a/src/stores/LifecycleStore.js b/src/stores/LifecycleStore.ts
similarity index 62%
rename from src/stores/LifecycleStore.js
rename to src/stores/LifecycleStore.ts
index a12bac7dd6..5381fc58ed 100644
--- a/src/stores/LifecycleStore.js
+++ b/src/stores/LifecycleStore.ts
@@ -1,7 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2017-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,11 +13,18 @@ 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 { Store } from 'flux/utils';
+
 import dis from '../dispatcher/dispatcher';
-import {Store} from 'flux/utils';
+import { ActionPayload } from "../dispatcher/payloads";
+
+interface IState {
+    deferredAction: any;
+}
 
 const INITIAL_STATE = {
-    deferred_action: null,
+    deferredAction: null,
 };
 
 /**
@@ -27,39 +32,38 @@ const INITIAL_STATE = {
  * store that listens for actions and updates its state accordingly, informing any
  * listeners (views) of state changes.
  */
-class LifecycleStore extends Store {
+class LifecycleStore extends Store {
+    private state: IState = INITIAL_STATE;
+
     constructor() {
         super(dis);
-
-        // Initialise state
-        this._state = INITIAL_STATE;
     }
 
-    _setState(newState) {
-        this._state = Object.assign(this._state, newState);
+    private setState(newState: Partial) {
+        this.state = Object.assign(this.state, newState);
         this.__emitChange();
     }
 
-    __onDispatch(payload) {
+    protected __onDispatch(payload: ActionPayload) {
         switch (payload.action) {
             case 'do_after_sync_prepared':
-                this._setState({
-                    deferred_action: payload.deferred_action,
+                this.setState({
+                    deferredAction: payload.deferred_action,
                 });
                 break;
             case 'cancel_after_sync_prepared':
-                this._setState({
-                    deferred_action: null,
+                this.setState({
+                    deferredAction: null,
                 });
                 break;
-            case 'sync_state': {
+            case 'syncstate': {
                 if (payload.state !== 'PREPARED') {
                     break;
                 }
-                if (!this._state.deferred_action) break;
-                const deferredAction = Object.assign({}, this._state.deferred_action);
-                this._setState({
-                    deferred_action: null,
+                if (!this.state.deferredAction) break;
+                const deferredAction = Object.assign({}, this.state.deferredAction);
+                this.setState({
+                    deferredAction: null,
                 });
                 dis.dispatch(deferredAction);
                 break;
@@ -71,8 +75,8 @@ class LifecycleStore extends Store {
         }
     }
 
-    reset() {
-        this._state = Object.assign({}, INITIAL_STATE);
+    private reset() {
+        this.state = Object.assign({}, INITIAL_STATE);
     }
 }
 

From c8b3acb7e4a23d5cd654a2d7234d9f3a5b62405d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 10:57:46 +0100
Subject: [PATCH 0254/1270] Convert utils to Typescript

---
 src/utils/{UrlUtils.js => UrlUtils.ts} |  6 +++---
 src/utils/{humanize.js => humanize.ts} | 22 +++++++++++-----------
 2 files changed, 14 insertions(+), 14 deletions(-)
 rename src/utils/{UrlUtils.js => UrlUtils.ts} (88%)
 rename src/utils/{humanize.js => humanize.ts} (83%)

diff --git a/src/utils/UrlUtils.js b/src/utils/UrlUtils.ts
similarity index 88%
rename from src/utils/UrlUtils.js
rename to src/utils/UrlUtils.ts
index 7b207c128e..6f441ff98e 100644
--- a/src/utils/UrlUtils.js
+++ b/src/utils/UrlUtils.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,7 +22,7 @@ import url from "url";
  * @param {string} u The url to be abbreviated
  * @returns {string} The abbreviated url
  */
-export function abbreviateUrl(u) {
+export function abbreviateUrl(u: string): string {
     if (!u) return '';
 
     const parsedUrl = url.parse(u);
@@ -37,7 +37,7 @@ export function abbreviateUrl(u) {
     return u;
 }
 
-export function unabbreviateUrl(u) {
+export function unabbreviateUrl(u: string): string {
     if (!u) return '';
 
     let longUrl = u;
diff --git a/src/utils/humanize.js b/src/utils/humanize.ts
similarity index 83%
rename from src/utils/humanize.js
rename to src/utils/humanize.ts
index 6e6f17f8f4..55bdbf760b 100644
--- a/src/utils/humanize.js
+++ b/src/utils/humanize.ts
@@ -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.
@@ -14,22 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {_t} from "../languageHandler";
+import { _t } from "../languageHandler";
+
+// These are the constants we use for when to break the text
+const MILLISECONDS_RECENT = 15000;
+const MILLISECONDS_1_MIN = 75000;
+const MINUTES_UNDER_1_HOUR = 45;
+const MINUTES_1_HOUR = 75;
+const HOURS_UNDER_1_DAY = 23;
+const HOURS_1_DAY = 26;
 
 /**
  * Converts a timestamp into human-readable, translated, text.
  * @param {number} timeMillis The time in millis to compare against.
  * @returns {string} The humanized time.
  */
-export function humanizeTime(timeMillis) {
-    // These are the constants we use for when to break the text
-    const MILLISECONDS_RECENT = 15000;
-    const MILLISECONDS_1_MIN = 75000;
-    const MINUTES_UNDER_1_HOUR = 45;
-    const MINUTES_1_HOUR = 75;
-    const HOURS_UNDER_1_DAY = 23;
-    const HOURS_1_DAY = 26;
-
+export function humanizeTime(timeMillis: number): string {
     const now = (new Date()).getTime();
     let msAgo = now - timeMillis;
     const minutes = Math.abs(Math.ceil(msAgo / 60000));

From 50d3e04bdabc2cfd6d23381f18de11d4c7ef1287 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 10:58:22 +0100
Subject: [PATCH 0255/1270] Convert MatrixActionCreators to Typescript

---
 ...ionCreators.js => MatrixActionCreators.ts} | 125 +++++++++++-------
 1 file changed, 77 insertions(+), 48 deletions(-)
 rename src/actions/{MatrixActionCreators.js => MatrixActionCreators.ts} (68%)

diff --git a/src/actions/MatrixActionCreators.js b/src/actions/MatrixActionCreators.ts
similarity index 68%
rename from src/actions/MatrixActionCreators.js
rename to src/actions/MatrixActionCreators.ts
index 93a4fcf07c..33e72becd2 100644
--- a/src/actions/MatrixActionCreators.js
+++ b/src/actions/MatrixActionCreators.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import dis from '../dispatcher/dispatcher';
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
+
+import dis from "../dispatcher/dispatcher";
+import {ActionPayload} from "../dispatcher/payloads";
 
 // TODO: migrate from sync_state to MatrixActions.sync so that more js-sdk events
 //       become dispatches in the same place.
@@ -27,7 +33,7 @@ import dis from '../dispatcher/dispatcher';
  * @param {string} prevState the previous sync state.
  * @returns {Object} an action of type MatrixActions.sync.
  */
-function createSyncAction(matrixClient, state, prevState) {
+function createSyncAction(matrixClient: MatrixClient, state: string, prevState: string): ActionPayload {
     return {
         action: 'MatrixActions.sync',
         state,
@@ -53,7 +59,7 @@ function createSyncAction(matrixClient, state, prevState) {
  * @param {MatrixEvent} accountDataEvent the account data event.
  * @returns {AccountDataAction} an action of type MatrixActions.accountData.
  */
-function createAccountDataAction(matrixClient, accountDataEvent) {
+function createAccountDataAction(matrixClient: MatrixClient, accountDataEvent: MatrixEvent): ActionPayload {
     return {
         action: 'MatrixActions.accountData',
         event: accountDataEvent,
@@ -81,7 +87,11 @@ function createAccountDataAction(matrixClient, accountDataEvent) {
  * @param {Room} room the room where account data was changed
  * @returns {RoomAccountDataAction} an action of type MatrixActions.Room.accountData.
  */
-function createRoomAccountDataAction(matrixClient, accountDataEvent, room) {
+function createRoomAccountDataAction(
+    matrixClient: MatrixClient,
+    accountDataEvent: MatrixEvent,
+    room: Room,
+): ActionPayload {
     return {
         action: 'MatrixActions.Room.accountData',
         event: accountDataEvent,
@@ -106,7 +116,7 @@ function createRoomAccountDataAction(matrixClient, accountDataEvent, room) {
  * @param {Room} room the Room that was stored.
  * @returns {RoomAction} an action of type `MatrixActions.Room`.
  */
-function createRoomAction(matrixClient, room) {
+function createRoomAction(matrixClient: MatrixClient, room: Room): ActionPayload {
     return { action: 'MatrixActions.Room', room };
 }
 
@@ -127,7 +137,7 @@ function createRoomAction(matrixClient, room) {
  * @param {Room} room the Room whose tags were changed.
  * @returns {RoomTagsAction} an action of type `MatrixActions.Room.tags`.
  */
-function createRoomTagsAction(matrixClient, roomTagsEvent, room) {
+function createRoomTagsAction(matrixClient: MatrixClient, roomTagsEvent: MatrixEvent, room: Room): ActionPayload {
     return { action: 'MatrixActions.Room.tags', room };
 }
 
@@ -140,7 +150,7 @@ function createRoomTagsAction(matrixClient, roomTagsEvent, room) {
  * @param {Room} room the room the receipt happened in.
  * @returns {Object} an action of type MatrixActions.Room.receipt.
  */
-function createRoomReceiptAction(matrixClient, event, room) {
+function createRoomReceiptAction(matrixClient: MatrixClient, event: MatrixEvent, room: Room): ActionPayload {
     return {
         action: 'MatrixActions.Room.receipt',
         event,
@@ -178,7 +188,17 @@ function createRoomReceiptAction(matrixClient, event, room) {
  * @param {EventTimeline} data.timeline the timeline being altered.
  * @returns {RoomTimelineAction} an action of type `MatrixActions.Room.timeline`.
  */
-function createRoomTimelineAction(matrixClient, timelineEvent, room, toStartOfTimeline, removed, data) {
+function createRoomTimelineAction(
+    matrixClient: MatrixClient,
+    timelineEvent: MatrixEvent,
+    room: Room,
+    toStartOfTimeline: boolean,
+    removed: boolean,
+    data: {
+        liveEvent: boolean;
+        timeline: EventTimeline;
+    },
+): ActionPayload {
     return {
         action: 'MatrixActions.Room.timeline',
         event: timelineEvent,
@@ -208,8 +228,13 @@ function createRoomTimelineAction(matrixClient, timelineEvent, room, toStartOfTi
  * @param {string} oldMembership the previous membership, can be null.
  * @returns {RoomMembershipAction} an action of type `MatrixActions.Room.myMembership`.
  */
-function createSelfMembershipAction(matrixClient, room, membership, oldMembership) {
-    return { action: 'MatrixActions.Room.myMembership', room, membership, oldMembership};
+function createSelfMembershipAction(
+    matrixClient: MatrixClient,
+    room: Room,
+    membership: string,
+    oldMembership: string,
+): ActionPayload {
+    return { action: 'MatrixActions.Room.myMembership', room, membership, oldMembership };
 }
 
 /**
@@ -228,61 +253,65 @@ function createSelfMembershipAction(matrixClient, room, membership, oldMembershi
  * @param {MatrixEvent} event the matrix event that was decrypted.
  * @returns {EventDecryptedAction} an action of type `MatrixActions.Event.decrypted`.
  */
-function createEventDecryptedAction(matrixClient, event) {
+function createEventDecryptedAction(matrixClient: MatrixClient, event: MatrixEvent): ActionPayload {
     return { action: 'MatrixActions.Event.decrypted', event };
 }
 
+type Listener = () => void;
+type ActionCreator = (matrixClient: MatrixClient, ...args: any) => ActionPayload;
+
+// A list of callbacks to call to unregister all listeners added
+let matrixClientListenersStop: Listener[] = [];
+
+/**
+ * Start listening to events of type eventName on matrixClient and when they are emitted,
+ * dispatch an action created by the actionCreator function.
+ * @param {MatrixClient} matrixClient a MatrixClient to register a listener with.
+ * @param {string} eventName the event to listen to on MatrixClient.
+ * @param {function} actionCreator a function that should return an action to dispatch
+ *                                 when given the MatrixClient as an argument as well as
+ *                                 arguments emitted in the MatrixClient event.
+ */
+function addMatrixClientListener(matrixClient: MatrixClient, eventName: string, actionCreator: ActionCreator): void {
+    const listener: Listener = (...args) => {
+        const payload = actionCreator(matrixClient, ...args);
+        if (payload) {
+            dis.dispatch(payload, true);
+        }
+    };
+    matrixClient.on(eventName, listener);
+    matrixClientListenersStop.push(() => {
+        matrixClient.removeListener(eventName, listener);
+    });
+}
+
 /**
  * This object is responsible for dispatching actions when certain events are emitted by
  * the given MatrixClient.
  */
 export default {
-    // A list of callbacks to call to unregister all listeners added
-    _matrixClientListenersStop: [],
-
     /**
      * Start listening to certain events from the MatrixClient and dispatch actions when
      * they are emitted.
      * @param {MatrixClient} matrixClient the MatrixClient to listen to events from
      */
-    start(matrixClient) {
-        this._addMatrixClientListener(matrixClient, 'sync', createSyncAction);
-        this._addMatrixClientListener(matrixClient, 'accountData', createAccountDataAction);
-        this._addMatrixClientListener(matrixClient, 'Room.accountData', createRoomAccountDataAction);
-        this._addMatrixClientListener(matrixClient, 'Room', createRoomAction);
-        this._addMatrixClientListener(matrixClient, 'Room.tags', createRoomTagsAction);
-        this._addMatrixClientListener(matrixClient, 'Room.receipt', createRoomReceiptAction);
-        this._addMatrixClientListener(matrixClient, 'Room.timeline', createRoomTimelineAction);
-        this._addMatrixClientListener(matrixClient, 'Room.myMembership', createSelfMembershipAction);
-        this._addMatrixClientListener(matrixClient, 'Event.decrypted', createEventDecryptedAction);
-    },
-
-    /**
-     * Start listening to events of type eventName on matrixClient and when they are emitted,
-     * dispatch an action created by the actionCreator function.
-     * @param {MatrixClient} matrixClient a MatrixClient to register a listener with.
-     * @param {string} eventName the event to listen to on MatrixClient.
-     * @param {function} actionCreator a function that should return an action to dispatch
-     *                                 when given the MatrixClient as an argument as well as
-     *                                 arguments emitted in the MatrixClient event.
-     */
-    _addMatrixClientListener(matrixClient, eventName, actionCreator) {
-        const listener = (...args) => {
-            const payload = actionCreator(matrixClient, ...args);
-            if (payload) {
-                dis.dispatch(payload, true);
-            }
-        };
-        matrixClient.on(eventName, listener);
-        this._matrixClientListenersStop.push(() => {
-            matrixClient.removeListener(eventName, listener);
-        });
+    start(matrixClient: MatrixClient) {
+        addMatrixClientListener(matrixClient, 'sync', createSyncAction);
+        addMatrixClientListener(matrixClient, 'accountData', createAccountDataAction);
+        addMatrixClientListener(matrixClient, 'Room.accountData', createRoomAccountDataAction);
+        addMatrixClientListener(matrixClient, 'Room', createRoomAction);
+        addMatrixClientListener(matrixClient, 'Room.tags', createRoomTagsAction);
+        addMatrixClientListener(matrixClient, 'Room.receipt', createRoomReceiptAction);
+        addMatrixClientListener(matrixClient, 'Room.timeline', createRoomTimelineAction);
+        addMatrixClientListener(matrixClient, 'Room.myMembership', createSelfMembershipAction);
+        addMatrixClientListener(matrixClient, 'Event.decrypted', createEventDecryptedAction);
     },
 
     /**
      * Stop listening to events.
      */
     stop() {
-        this._matrixClientListenersStop.forEach((stopListener) => stopListener());
+        matrixClientListenersStop.forEach((stopListener) => stopListener());
+        matrixClientListenersStop = [];
     },
 };

From f6e4943bef403230b0d99d4d0c7a07b1b138978f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 11:01:38 +0100
Subject: [PATCH 0256/1270] Convert RoomAliasCache to Typescript

---
 src/{RoomAliasCache.js => RoomAliasCache.ts} | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)
 rename src/{RoomAliasCache.js => RoomAliasCache.ts} (81%)

diff --git a/src/RoomAliasCache.js b/src/RoomAliasCache.ts
similarity index 81%
rename from src/RoomAliasCache.js
rename to src/RoomAliasCache.ts
index bb511ba4d7..c318db2d3f 100644
--- a/src/RoomAliasCache.js
+++ b/src/RoomAliasCache.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,12 +24,12 @@ limitations under the License.
  * A similar thing could also be achieved via `pushState` with a state object,
  * but keeping it separate like this seems easier in case we do want to extend.
  */
-const aliasToIDMap = new Map();
+const aliasToIDMap = new Map();
 
-export function storeRoomAliasInCache(alias, id) {
+export function storeRoomAliasInCache(alias: string, id: string): void {
     aliasToIDMap.set(alias, id);
 }
 
-export function getCachedRoomIDForAlias(alias) {
+export function getCachedRoomIDForAlias(alias: string): string {
     return aliasToIDMap.get(alias);
 }

From 2525db6fb131ce760673463000895ed73f9d1ef8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 11:03:39 +0100
Subject: [PATCH 0257/1270] Convert Resend to Typescript

---
 src/{Resend.js => Resend.ts} | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)
 rename src/{Resend.js => Resend.ts} (70%)

diff --git a/src/Resend.js b/src/Resend.ts
similarity index 70%
rename from src/Resend.js
rename to src/Resend.ts
index f1e5fb38f5..38b84a28e0 100644
--- a/src/Resend.js
+++ b/src/Resend.ts
@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 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.
@@ -15,35 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event';
+import { Room } from 'matrix-js-sdk/src/models/room';
+
+import { MatrixClientPeg } from './MatrixClientPeg';
 import dis from './dispatcher/dispatcher';
-import { EventStatus } from 'matrix-js-sdk/src/models/event';
 
 export default class Resend {
-    static resendUnsentEvents(room) {
-        return Promise.all(room.getPendingEvents().filter(function(ev) {
+    static resendUnsentEvents(room: Room): Promise {
+        return Promise.all(room.getPendingEvents().filter(function(ev: MatrixEvent) {
             return ev.status === EventStatus.NOT_SENT;
-        }).map(function(event) {
+        }).map(function(event: MatrixEvent) {
             return Resend.resend(event);
         }));
     }
 
-    static cancelUnsentEvents(room) {
-        room.getPendingEvents().filter(function(ev) {
+    static cancelUnsentEvents(room: Room): void {
+        room.getPendingEvents().filter(function(ev: MatrixEvent) {
             return ev.status === EventStatus.NOT_SENT;
-        }).forEach(function(event) {
+        }).forEach(function(event: MatrixEvent) {
             Resend.removeFromQueue(event);
         });
     }
 
-    static resend(event) {
+    static resend(event: MatrixEvent): Promise {
         const room = MatrixClientPeg.get().getRoom(event.getRoomId());
         return MatrixClientPeg.get().resendEvent(event, room).then(function(res) {
             dis.dispatch({
                 action: 'message_sent',
                 event: event,
             });
-        }, function(err) {
+        }, function(err: Error) {
             // XXX: temporary logging to try to diagnose
             // https://github.com/vector-im/element-web/issues/3148
             console.log('Resend got send failure: ' + err.name + '(' + err + ')');
@@ -55,7 +56,7 @@ export default class Resend {
         });
     }
 
-    static removeFromQueue(event) {
+    static removeFromQueue(event: MatrixEvent): void {
         MatrixClientPeg.get().cancelPendingEvent(event);
     }
 }

From ae04b2ce4ac0ea4ee425d848903aa5b5ec9db82f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 11:06:30 +0100
Subject: [PATCH 0258/1270] Fix Dialog/Modal types defn

---
 src/components/views/dialogs/IDialogProps.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/IDialogProps.ts b/src/components/views/dialogs/IDialogProps.ts
index 1027ca7607..b294fdafe1 100644
--- a/src/components/views/dialogs/IDialogProps.ts
+++ b/src/components/views/dialogs/IDialogProps.ts
@@ -15,5 +15,5 @@ limitations under the License.
 */
 
 export interface IDialogProps {
-    onFinished: (bool) => void;
+    onFinished(...args: any): void;
 }

From 4cc95dd1841111e93a18d1a7a8630abed681449b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 11:20:35 +0100
Subject: [PATCH 0259/1270] Make skinning less upset

---
 src/AsyncWrapper.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/AsyncWrapper.tsx b/src/AsyncWrapper.tsx
index 1d3c42e60b..3bbef71093 100644
--- a/src/AsyncWrapper.tsx
+++ b/src/AsyncWrapper.tsx
@@ -16,11 +16,9 @@ limitations under the License.
 
 import React, { ComponentType } from "react";
 
+import * as sdk from './index';
 import { _t } from './languageHandler';
 import { IDialogProps } from "./components/views/dialogs/IDialogProps";
-import BaseDialog from "./components/views/dialogs/BaseDialog";
-import DialogButtons from "./components/views/elements/DialogButtons";
-import Spinner from "./components/views/elements/Spinner";
 
 type AsyncImport = { default: T };
 
@@ -79,6 +77,8 @@ export default class AsyncWrapper extends React.Component {
             const Component = this.state.component;
             return ;
         } else if (this.state.error) {
+            const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             return 
                 { _t("Unable to load! Check your network connectivity and try again.") }
                  {
             ;
         } else {
             // show a spinner until the component is loaded.
+            const Spinner = sdk.getComponent("elements.Spinner");
             return ;
         }
     }

From 6693c39709fb5fae664ce27e20343dfca347d278 Mon Sep 17 00:00:00 2001
From: Germain Souquet 
Date: Mon, 7 Jun 2021 12:17:29 +0100
Subject: [PATCH 0260/1270] make event list summary a list item

---
 src/components/views/elements/EventListSummary.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index 1d3b6e8764..86d3e082ad 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -63,9 +63,9 @@ const EventListSummary: React.FC = ({
     // If we are only given few events then just pass them through
     if (events.length < threshold) {
         return (
-            
    
+            
  • 
                 { children }
-            
    • 
+            
         );
     }
 

From ea6904ce2a10e9aa368db43a900ea95fbb134911 Mon Sep 17 00:00:00 2001
From: Germain 
Date: Mon, 7 Jun 2021 12:37:11 +0100
Subject: [PATCH 0261/1270] Fix local echo comment for scroll tokens

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/EventTile.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 0796475bf8..ff310e1c43 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -906,6 +906,8 @@ export default class EventTile extends React.Component {
             permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
         }
 
+        // we can't use local echoes as scroll tokens, because their event IDs change.
+        // Local echos have a send "status".
         const scrollToken = this.props.mxEvent.status
             ? undefined
             : this.props.mxEvent.getId();
@@ -1153,8 +1155,6 @@ export default class EventTile extends React.Component {
                         "tabIndex": -1,
                         "aria-live": ariaLive,
                         "aria-atomic": "true",
-                        // we can't use local echoes as scroll tokens, because their event IDs change.
-                        // Local echos have a send "status".
                         "data-scroll-tokens": scrollToken,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),

From f3aa5056730c1bc94ca4988f0abacba30d4348ab Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 14:14:31 +0100
Subject: [PATCH 0262/1270] Add warning to private space creation flow

---
 res/css/structures/_SpaceRoomView.scss      | 39 +++++++++++++++++++++
 src/components/structures/SpaceRoomView.tsx |  4 +++
 src/i18n/strings/en_EN.json                 |  2 ++
 3 files changed, 45 insertions(+)

diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
index 4bc4af467c..12762cbc9d 100644
--- a/res/css/structures/_SpaceRoomView.scss
+++ b/res/css/structures/_SpaceRoomView.scss
@@ -365,6 +365,45 @@ $SpaceRoomViewInnerWidth: 428px;
         }
     }
 
+    .mx_SpaceRoomView_betaWarning {
+        padding: 12px 12px 12px 54px;
+        position: relative;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        width: 432px;
+        border-radius: 8px;
+        background-color: $info-plinth-bg-color;
+        color: $secondary-fg-color;
+        box-sizing: border-box;
+
+        > h3 {
+            font-weight: $font-semi-bold;
+            font-size: inherit;
+            line-height: inherit;
+            margin: 0;
+        }
+
+        > p {
+            font-size: inherit;
+            line-height: inherit;
+            margin: 0;
+        }
+
+        &::before {
+            mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            content: '';
+            width: 20px;
+            height: 20px;
+            position: absolute;
+            top: 14px;
+            left: 14px;
+            background-color: $secondary-fg-color;
+        }
+    }
+
     .mx_SpaceRoomView_inviteTeammates {
         // XXX remove this when spaces leaves Beta
         .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index 06d2bda16e..276f4ae6ca 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -587,6 +587,10 @@ const SpaceSetupPrivateScope = ({ space, justCreatedOpts, onFinished }) => {
             
    { _t("Me and my teammates") }
    
             
    { _t("A private space for you and your teammates") }
    
         
+        
    
+            
    { _t("Teammates might not be able to view or join any private rooms you make.") }
    
+            
    { _t("We're working on this as part of the beta, but just want to let you know.") }
    
+        
    
         
     
    ;
 };
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9e85ea28c8..16cfcccd11 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2723,6 +2723,8 @@
     "A private space to organise your rooms": "A private space to organise your rooms",
     "Me and my teammates": "Me and my teammates",
     "A private space for you and your teammates": "A private space for you and your teammates",
+    "Teammates might not be able to view or join any private rooms you make.": "Teammates might not be able to view or join any private rooms you make.",
+    "We're working on this as part of the beta, but just want to let you know.": "We're working on this as part of the beta, but just want to let you know.",
     "Failed to invite the following users to your space: %(csvUsers)s": "Failed to invite the following users to your space: %(csvUsers)s",
     "Inviting...": "Inviting...",
     "Invite your teammates": "Invite your teammates",

From 67c9fe1e070d41192d9ff8553523c5834ff9f38c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 7 Jun 2021 15:25:57 +0200
Subject: [PATCH 0263/1270] Revert "Update curly braces styling"

This reverts commit ba0f6766caefb700324a0a4441e0427689b8faf7.
---
 src/components/views/elements/ImageView.tsx | 131 ++++++++++----------
 1 file changed, 65 insertions(+), 66 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 948e005978..c4ec3497e4 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -19,20 +19,20 @@ limitations under the License.
 import React, { createRef } from 'react';
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
-import { Key } from "../../../Keyboard";
+import {Key} from "../../../Keyboard";
 import FocusLock from "react-focus-lock";
 import MemberAvatar from "../avatars/MemberAvatar";
-import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
-import { aboveLeftOf, ContextMenu } from '../../structures/ContextMenu';
+import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
 import MessageTimestamp from "../messages/MessageTimestamp";
 import SettingsStore from "../../../settings/SettingsStore";
-import { formatFullDate } from "../../../DateUtils";
+import {formatFullDate} from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { normalizeWheelEvent } from "../../../utils/Mouse";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {normalizeWheelEvent} from "../../../utils/Mouse";
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -167,7 +167,7 @@ export default class ImageView extends React.Component {
             return;
         }
         if (newZoom >= this.state.maxZoom) {
-            this.setState({ zoom: this.state.maxZoom });
+            this.setState({zoom: this.state.maxZoom});
             return;
         }
 
@@ -256,11 +256,11 @@ export default class ImageView extends React.Component {
 
         // Zoom in if we are completely zoomed out
         if (this.state.zoom === this.state.minZoom) {
-            this.setState({ zoom: this.state.maxZoom });
+            this.setState({zoom: this.state.maxZoom});
             return;
         }
 
-        this.setState({ moving: true });
+        this.setState({moving: true});
         this.previousX = this.state.translationX;
         this.previousY = this.state.translationY;
         this.initX = ev.pageX - this.state.translationX;
@@ -294,7 +294,7 @@ export default class ImageView extends React.Component {
             this.initX = 0;
             this.initY = 0;
         }
-        this.setState({ moving: false });
+        this.setState({moving: false});
     };
 
     private renderContextMenu() {
@@ -302,14 +302,14 @@ export default class ImageView extends React.Component {
         if (this.state.contextMenuDisplayed) {
             contextMenu = (
                 
                     
                 
             );
@@ -347,10 +347,10 @@ export default class ImageView extends React.Component {
         const style = {
             cursor: cursor,
             transition: this.state.moving ? null : "transform 200ms ease 0s",
-            transform: `translateX(${ translatePixelsX })
-                        translateY(${ translatePixelsY })
-                        scale(${ zoom })
-                        rotate(${ rotationDegrees })`,
+            transform: `translateX(${translatePixelsX})
+                        translateY(${translatePixelsY})
+                        scale(${zoom})
+                        rotate(${rotationDegrees})`,
         };
 
         let info;
@@ -365,38 +365,37 @@ export default class ImageView extends React.Component {
             const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
             const sender = (
                 
    
-                    { senderName }
+                    {senderName}
                 
    
             );
             const messageTimestamp = (
                 
                     
                 
             );
             const avatar = (
                 
             );
 
             info = (
                 
    
-                    { avatar }
+                    {avatar}
                     
    
-                        { sender }
-                        { messageTimestamp }
+                        {sender}
+                        {messageTimestamp}
                     
    
                 
    
             );
@@ -414,10 +413,10 @@ export default class ImageView extends React.Component {
             contextMenuButton = (
                 
             );
         }
@@ -428,14 +427,14 @@ export default class ImageView extends React.Component {
             zoomOutButton = (
                 
+                    title={_t("Zoom out")}
+                    onClick={this.onZoomOutClick}>
                 
             );
             zoomInButton = (
                 
                 
             );
@@ -443,57 +442,57 @@ export default class ImageView extends React.Component {
 
         return (
             
                 
    
-                    { info }
+                    {info}
                     
    
                         
                         
                         
+                            title={_t("Rotate Right")}
+                            onClick={this.onRotateClockwiseClick}>
                         
-                        { zoomOutButton }
-                        { zoomInButton }
+                        {zoomOutButton}
+                        {zoomInButton}
                         
                         
-                        { contextMenuButton }
+                        {contextMenuButton}
                         
                         
-                        { this.renderContextMenu() }
+                        {this.renderContextMenu()}
                     
    
                 
    
                 
    
+                    ref={this.imageWrapper}>
                     
                 
    
                 

From 5880cb3b5f032f2a274fc1bcdd4a32b9ba31b8e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 7 Jun 2021 15:26:54 +0200
Subject: [PATCH 0264/1270] Better wording
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index c4ec3497e4..ebff886bb3 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -144,7 +144,7 @@ export default class ImageView extends React.Component {
         // image by default
         const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE;
 
-        // If zoom is smaller than minZoom don't go beneath that value
+        // If zoom is smaller than minZoom don't go below that value
         const zoom = (this.state.zoom <= this.state.minZoom) ? minZoom : this.state.zoom;
 
         this.setState({

From 0918ebad0adf697a52354e8fc837a5b35ac56f46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 7 Jun 2021 15:28:37 +0200
Subject: [PATCH 0265/1270] calculateZoomAndRotate -> setZoomAndRotation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index ebff886bb3..b5162c6084 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -104,18 +104,18 @@ export default class ImageView extends React.Component {
         // needs to be passive in order to work with Chromium
         this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
         // We want to recalculate zoom whenever the window's size changes
-        window.addEventListener("resize", this.calculateZoomAndRotate);
+        window.addEventListener("resize", this.setZoomAndRotation);
         // After the image loads for the first time we want to calculate the zoom
-        this.image.current.addEventListener("load", this.calculateZoomAndRotate);
+        this.image.current.addEventListener("load", this.setZoomAndRotation);
     }
 
     componentWillUnmount() {
         this.focusLock.current.removeEventListener('wheel', this.onWheel);
-        window.removeEventListener("resize", this.calculateZoomAndRotate);
-        this.image.current.removeEventListener("load", this.calculateZoomAndRotate);
+        window.removeEventListener("resize", this.setZoomAndRotation);
+        this.image.current.removeEventListener("load", this.setZoomAndRotation);
     }
 
-    private calculateZoomAndRotate = () => {
+    private setZoomAndRotation = () => {
         const image = this.image.current;
         const imageWrapper = this.imageWrapper.current;
 
@@ -203,13 +203,13 @@ export default class ImageView extends React.Component {
     private onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
         this.rotation = cur - 90;
-        this.calculateZoomAndRotate();
+        this.setZoomAndRotation();
     };
 
     private onRotateClockwiseClick = () => {
         const cur = this.state.rotation;
         this.rotation = cur + 90;
-        this.calculateZoomAndRotate();
+        this.setZoomAndRotation();
     };
 
     private onDownloadClick = () => {

From 2e47a1176f6dd883d2b68b6d35cc13d590c52fa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 7 Jun 2021 15:39:11 +0200
Subject: [PATCH 0266/1270] Get rid of weird rotation prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 29 ++++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index b5162c6084..e0991a1023 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -97,29 +97,34 @@ export default class ImageView extends React.Component {
     private initY = 0;
     private previousX = 0;
     private previousY = 0;
-    private rotation = 0;
 
     componentDidMount() {
         // We have to use addEventListener() because the listener
         // needs to be passive in order to work with Chromium
         this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
         // We want to recalculate zoom whenever the window's size changes
-        window.addEventListener("resize", this.setZoomAndRotation);
+        window.addEventListener("resize", this.recalculateZoom);
         // After the image loads for the first time we want to calculate the zoom
-        this.image.current.addEventListener("load", this.setZoomAndRotation);
+        this.image.current.addEventListener("load", this.recalculateZoom);
     }
 
     componentWillUnmount() {
         this.focusLock.current.removeEventListener('wheel', this.onWheel);
-        window.removeEventListener("resize", this.setZoomAndRotation);
-        this.image.current.removeEventListener("load", this.setZoomAndRotation);
+        window.removeEventListener("resize", this.recalculateZoom);
+        this.image.current.removeEventListener("load", this.recalculateZoom);
     }
 
-    private setZoomAndRotation = () => {
+    private recalculateZoom = () => {
+        this.setZoomAndRotation();
+    }
+
+    private setZoomAndRotation = (inputRotation?: number) => {
         const image = this.image.current;
         const imageWrapper = this.imageWrapper.current;
 
-        const landscape = this.rotation % 180 === 0;
+        const rotation = inputRotation || this.state.rotation;
+
+        const landscape = rotation % 180 === 0;
 
         // If the image is rotated take it into account
         const width = landscape ? image.naturalWidth : image.naturalHeight;
@@ -135,7 +140,7 @@ export default class ImageView extends React.Component {
                 zoom: 1,
                 minZoom: 1,
                 maxZoom: 1,
-                rotation: this.rotation,
+                rotation: rotation,
             });
             return;
         }
@@ -150,7 +155,7 @@ export default class ImageView extends React.Component {
         this.setState({
             minZoom: minZoom,
             maxZoom: 1,
-            rotation: this.rotation,
+            rotation: rotation,
             zoom: zoom,
         });
     }
@@ -202,14 +207,12 @@ export default class ImageView extends React.Component {
 
     private onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
-        this.rotation = cur - 90;
-        this.setZoomAndRotation();
+        this.setZoomAndRotation(cur - 90);
     };
 
     private onRotateClockwiseClick = () => {
         const cur = this.state.rotation;
-        this.rotation = cur + 90;
-        this.setZoomAndRotation();
+        this.setZoomAndRotation(cur + 90);
     };
 
     private onDownloadClick = () => {

From b5d271759f227a03f1905759dcab4c92149cc15e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 7 Jun 2021 15:43:43 +0200
Subject: [PATCH 0267/1270] Why would I format this myself if eslint can do it
 for me?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 26 ++++++++++-----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index e0991a1023..d0dcb1fa00 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -19,20 +19,20 @@ limitations under the License.
 import React, { createRef } from 'react';
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
-import {Key} from "../../../Keyboard";
+import { Key } from "../../../Keyboard";
 import FocusLock from "react-focus-lock";
 import MemberAvatar from "../avatars/MemberAvatar";
-import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
-import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
+import { aboveLeftOf, ContextMenu } from '../../structures/ContextMenu';
 import MessageTimestamp from "../messages/MessageTimestamp";
 import SettingsStore from "../../../settings/SettingsStore";
-import {formatFullDate} from "../../../DateUtils";
+import { formatFullDate } from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {normalizeWheelEvent} from "../../../utils/Mouse";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { normalizeWheelEvent } from "../../../utils/Mouse";
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -172,7 +172,7 @@ export default class ImageView extends React.Component {
             return;
         }
         if (newZoom >= this.state.maxZoom) {
-            this.setState({zoom: this.state.maxZoom});
+            this.setState({ zoom: this.state.maxZoom });
             return;
         }
 
@@ -185,7 +185,7 @@ export default class ImageView extends React.Component {
         ev.stopPropagation();
         ev.preventDefault();
 
-        const {deltaY} = normalizeWheelEvent(ev);
+        const { deltaY } = normalizeWheelEvent(ev);
         this.zoom(-(deltaY * ZOOM_COEFFICIENT));
     };
 
@@ -259,11 +259,11 @@ export default class ImageView extends React.Component {
 
         // Zoom in if we are completely zoomed out
         if (this.state.zoom === this.state.minZoom) {
-            this.setState({zoom: this.state.maxZoom});
+            this.setState({ zoom: this.state.maxZoom });
             return;
         }
 
-        this.setState({moving: true});
+        this.setState({ moving: true });
         this.previousX = this.state.translationX;
         this.previousY = this.state.translationY;
         this.initX = ev.pageX - this.state.translationX;
@@ -297,7 +297,7 @@ export default class ImageView extends React.Component {
             this.initX = 0;
             this.initY = 0;
         }
-        this.setState({moving: false});
+        this.setState({ moving: false });
     };
 
     private renderContextMenu() {

From 255f9967109ae6024dbfbab0dd5581968691dbac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 7 Jun 2021 15:46:03 +0200
Subject: [PATCH 0268/1270] landscape -> imageIsNotFlipped
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index d0dcb1fa00..298951428f 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -124,11 +124,11 @@ export default class ImageView extends React.Component {
 
         const rotation = inputRotation || this.state.rotation;
 
-        const landscape = rotation % 180 === 0;
+        const imageIsNotFlipped = rotation % 180 === 0;
 
         // If the image is rotated take it into account
-        const width = landscape ? image.naturalWidth : image.naturalHeight;
-        const height = landscape ? image.naturalHeight : image.naturalWidth;
+        const width = imageIsNotFlipped ? image.naturalWidth : image.naturalHeight;
+        const height = imageIsNotFlipped ? image.naturalHeight : image.naturalWidth;
 
         const zoomX = imageWrapper.clientWidth / width;
         const zoomY = imageWrapper.clientHeight / height;

From 20a3dd67d6b3029c75adac9da58f162aed5aa1bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 7 Jun 2021 16:12:06 +0200
Subject: [PATCH 0269/1270] Some more styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/elements/ImageView.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 298951428f..630280120c 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -368,7 +368,7 @@ export default class ImageView extends React.Component {
             const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
             const sender = (
                 
    
-                    {senderName}
+                    { senderName }
                 
    
             );
             const messageTimestamp = (
@@ -395,10 +395,10 @@ export default class ImageView extends React.Component {
 
             info = (
                 
    
-                    {avatar}
+                    { avatar }
                     
    
-                        {sender}
-                        {messageTimestamp}
+                        { sender }
+                        { messageTimestamp }
                     
    
                 
    
             );
@@ -438,7 +438,7 @@ export default class ImageView extends React.Component {
                 
+                    onClick={this.onZoomInClick}>
                 
             );
         }
@@ -454,7 +454,7 @@ export default class ImageView extends React.Component {
                 ref={this.focusLock}
             >
                 
    
-                    {info}
+                    { info }
                     
    
                          {
                             title={_t("Rotate Right")}
                             onClick={this.onRotateClockwiseClick}>
                         
-                        {zoomOutButton}
-                        {zoomInButton}
+                        { zoomOutButton }
+                        { zoomInButton }
                         
                         
-                        {contextMenuButton}
+                        { contextMenuButton }
                         
                         
-                        {this.renderContextMenu()}
+                        { this.renderContextMenu() }
                     
    
                 
    
                 
    
Date: Mon, 7 Jun 2021 15:48:55 +0100
Subject: [PATCH 0270/1270] Convert EditableItemList & AliasSettings to
 Typescript

---
 ...itableItemList.js => EditableItemList.tsx} | 133 +++++++++--------
 .../{AliasSettings.js => AliasSettings.tsx}   | 134 ++++++++++--------
 2 files changed, 146 insertions(+), 121 deletions(-)
 rename src/components/views/elements/{EditableItemList.js => EditableItemList.tsx} (54%)
 rename src/components/views/room_settings/{AliasSettings.js => AliasSettings.tsx} (78%)

diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.tsx
similarity index 54%
rename from src/components/views/elements/EditableItemList.js
rename to src/components/views/elements/EditableItemList.tsx
index d8ec5af278..89e2e1b8a0 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2017, 2019 New Vector Ltd.
+Copyright 2017-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,48 +14,48 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import {_t} from '../../../languageHandler';
+import React from "react";
+
+import { _t } from '../../../languageHandler';
 import Field from "./Field";
 import AccessibleButton from "./AccessibleButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-export class EditableItem extends React.Component {
-    static propTypes = {
-        index: PropTypes.number,
-        value: PropTypes.string,
-        onRemove: PropTypes.func,
+interface IItemProps {
+    index?: number;
+    value?: string;
+    onRemove?(index: number): void;
+}
+
+interface IItemState {
+    verifyRemove: boolean;
+}
+
+export class EditableItem extends React.Component {
+    public state = {
+        verifyRemove: false,
     };
 
-    constructor() {
-        super();
-
-        this.state = {
-            verifyRemove: false,
-        };
-    }
-
-    _onRemove = (e) => {
+    private onRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({verifyRemove: true});
+        this.setState({ verifyRemove: true });
     };
 
-    _onDontRemove = (e) => {
+    private onDontRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({verifyRemove: false});
+        this.setState({ verifyRemove: false });
     };
 
-    _onActuallyRemove = (e) => {
+    private onActuallyRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
         if (this.props.onRemove) this.props.onRemove(this.props.index);
-        this.setState({verifyRemove: false});
+        this.setState({ verifyRemove: false });
     };
 
     render() {
@@ -66,14 +66,14 @@ export class EditableItem extends React.Component {
                         {_t("Are you sure?")}
                     
                     
                         {_t("Yes")}
                     
                     
@@ -85,59 +85,68 @@ export class EditableItem extends React.Component {
 
         return (
             
    
-                
    
+                
    
                 {this.props.value}
             
    
         );
     }
 }
 
+interface IProps {
+    id: string;
+    items: string[];
+    itemsLabel?: string;
+    noItemsLabel?: string;
+    placeholder?: string;
+    newItem?: string;
+    canEdit?: boolean;
+    canRemove?: boolean;
+    suggestionsListId?: string;
+    onItemAdded?(item: string): void;
+    onItemRemoved?(index: number): void;
+    onNewItemChanged?(item: string): void;
+}
+
 @replaceableComponent("views.elements.EditableItemList")
-export default class EditableItemList extends React.Component {
-    static propTypes = {
-        id: PropTypes.string.isRequired,
-        items: PropTypes.arrayOf(PropTypes.string).isRequired,
-        itemsLabel: PropTypes.string,
-        noItemsLabel: PropTypes.string,
-        placeholder: PropTypes.string,
-        newItem: PropTypes.string,
-
-        onItemAdded: PropTypes.func,
-        onItemRemoved: PropTypes.func,
-        onNewItemChanged: PropTypes.func,
-
-        canEdit: PropTypes.bool,
-        canRemove: PropTypes.bool,
-    };
-
-    _onItemAdded = (e) => {
+export default class EditableItemList
     extends React.PureComponent {
+    protected onItemAdded = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
         if (this.props.onItemAdded) this.props.onItemAdded(this.props.newItem);
     };
 
-    _onItemRemoved = (index) => {
+    protected onItemRemoved = (index) => {
         if (this.props.onItemRemoved) this.props.onItemRemoved(index);
     };
 
-    _onNewItemChanged = (e) => {
+    protected onNewItemChanged = (e) => {
         if (this.props.onNewItemChanged) this.props.onNewItemChanged(e.target.value);
     };
 
-    _renderNewItemField() {
+    protected renderNewItemField() {
         return (
             
-                
-                
-                    {_t("Add")}
+                
+                
+                    { _t("Add") }
                 
             
         );
@@ -153,19 +162,21 @@ export default class EditableItemList extends React.Component {
                 key={item}
                 index={index}
                 value={item}
-                onRemove={this._onItemRemoved}
+                onRemove={this.onItemRemoved}
             />;
         });
 
         const editableItemsSection = this.props.canRemove ? editableItems : 
      {editableItems}
    ;
         const label = this.props.items.length > 0 ? this.props.itemsLabel : this.props.noItemsLabel;
 
-        return (
    
-            
    
-                { label }
+        return (
+            
    
+                
    
+                    { label }
+                
    
+                { editableItemsSection }
+                { this.props.canEdit ? this.renderNewItemField() : 
     }
             
    
-            { editableItemsSection }
-            { this.props.canEdit ? this._renderNewItemField() : 
     }
-        
    );
+        );
     }
 }
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.tsx
similarity index 78%
rename from src/components/views/room_settings/AliasSettings.js
rename to src/components/views/room_settings/AliasSettings.tsx
index 80e0099ab3..d6e79c4ee9 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2018, 2019 New Vector Ltd
+Copyright 2016-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,59 +14,60 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React, { ChangeEvent, createRef } from "react";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 import EditableItemList from "../elements/EditableItemList";
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import * as sdk from "../../../index";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
+import Spinner from "../elements/Spinner";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import AccessibleButton from "../elements/AccessibleButton";
 import Modal from "../../../Modal";
 import RoomPublishSetting from "./RoomPublishSetting";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import RoomAliasField from "../elements/RoomAliasField";
 
-class EditableAliasesList extends EditableItemList {
-    constructor(props) {
-        super(props);
+interface IEditableAliasesListProps {
+    domain?: string;
+}
 
-        this._aliasField = createRef();
-    }
+class EditableAliasesList extends EditableItemList {
+    private aliasField = createRef();
 
-    _onAliasAdded = async () => {
-        await this._aliasField.current.validate({ allowEmpty: false });
+    private onAliasAdded = async () => {
+        await this.aliasField.current.validate({ allowEmpty: false });
 
-        if (this._aliasField.current.isValid) {
+        if (this.aliasField.current.isValid) {
             if (this.props.onItemAdded) this.props.onItemAdded(this.props.newItem);
             return;
         }
 
-        this._aliasField.current.focus();
-        this._aliasField.current.validate({ allowEmpty: false, focused: true });
+        this.aliasField.current.focus();
+        this.aliasField.current.validate({ allowEmpty: false, focused: true });
     };
 
-    _renderNewItemField() {
+    protected renderNewItemField() {
         // if we don't need the RoomAliasField,
-        // we don't need to overriden version of _renderNewItemField
+        // we don't need to overriden version of renderNewItemField
         if (!this.props.domain) {
-            return super._renderNewItemField();
+            return super.renderNewItemField();
         }
-        const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
-        const onChange = (alias) => this._onNewItemChanged({target: {value: alias}});
+        const onChange = (alias) => this.onNewItemChanged({target: {value: alias}});
         return (
             
    
                 
-                
+                
                     { _t("Add") }
                 
             
@@ -75,15 +75,27 @@ class EditableAliasesList extends EditableItemList {
     }
 }
 
-@replaceableComponent("views.room_settings.AliasSettings")
-export default class AliasSettings extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        canSetCanonicalAlias: PropTypes.bool.isRequired,
-        canSetAliases: PropTypes.bool.isRequired,
-        canonicalAliasEvent: PropTypes.object, // MatrixEvent
-    };
+interface IProps {
+    roomId: string;
+    canSetCanonicalAlias: boolean;
+    canSetAliases: boolean;
+    canonicalAliasEvent?: MatrixEvent;
+    aliasEvents?: MatrixEvent[];
+}
 
+interface IState {
+    altAliases: string[];
+    localAliases: string[];
+    canonicalAlias?: string;
+    updatingCanonicalAlias: boolean;
+    localAliasesLoading: boolean;
+    detailsOpen: boolean;
+    newAlias?: string;
+    newAltAlias?: string;
+}
+
+@replaceableComponent("views.room_settings.AliasSettings")
+export default class AliasSettings extends React.Component {
     static defaultProps = {
         canSetAliases: false,
         canSetCanonicalAlias: false,
@@ -122,7 +134,7 @@ export default class AliasSettings extends React.Component {
         }
     }
 
-    async loadLocalAliases() {
+    private async loadLocalAliases() {
         this.setState({ localAliasesLoading: true });
         try {
             const cli = MatrixClientPeg.get();
@@ -139,7 +151,7 @@ export default class AliasSettings extends React.Component {
         }
     }
 
-    changeCanonicalAlias(alias) {
+    private changeCanonicalAlias(alias: string) {
         if (!this.props.canSetCanonicalAlias) return;
 
         const oldAlias = this.state.canonicalAlias;
@@ -170,7 +182,7 @@ export default class AliasSettings extends React.Component {
         });
     }
 
-    changeAltAliases(altAliases) {
+    private changeAltAliases(altAliases: string[]) {
         if (!this.props.canSetCanonicalAlias) return;
 
         this.setState({
@@ -181,7 +193,7 @@ export default class AliasSettings extends React.Component {
         const eventContent = {};
 
         if (this.state.canonicalAlias) {
-            eventContent.alias = this.state.canonicalAlias;
+            eventContent["alias"] = this.state.canonicalAlias;
         }
         if (altAliases) {
             eventContent["alt_aliases"] = altAliases;
@@ -202,11 +214,11 @@ export default class AliasSettings extends React.Component {
         });
     }
 
-    onNewAliasChanged = (value) => {
-        this.setState({newAlias: value});
+    private onNewAliasChanged = (value: string) => {
+        this.setState({ newAlias: value });
     };
 
-    onLocalAliasAdded = (alias) => {
+    private onLocalAliasAdded = (alias: string) => {
         if (!alias || alias.length === 0) return; // ignore attempts to create blank aliases
 
         const localDomain = MatrixClientPeg.get().getDomain();
@@ -232,7 +244,7 @@ export default class AliasSettings extends React.Component {
         });
     };
 
-    onLocalAliasDeleted = (index) => {
+    private onLocalAliasDeleted = (index: number) => {
         const alias = this.state.localAliases[index];
         // TODO: In future, we should probably be making sure that the alias actually belongs
         // to this room. See https://github.com/vector-im/element-web/issues/7353
@@ -261,7 +273,7 @@ export default class AliasSettings extends React.Component {
         });
     };
 
-    onLocalAliasesToggled = (event) => {
+    private onLocalAliasesToggled = (event: ChangeEvent) => {
         // expanded
         if (event.target.open) {
             // if local aliases haven't been preloaded yet at component mount
@@ -269,37 +281,37 @@ export default class AliasSettings extends React.Component {
                 this.loadLocalAliases();
             }
         }
-        this.setState({detailsOpen: event.target.open});
+        this.setState({ detailsOpen: event.currentTarget.open });
     };
 
-    onCanonicalAliasChange = (event) => {
+    private onCanonicalAliasChange = (event: ChangeEvent) => {
         this.changeCanonicalAlias(event.target.value);
     };
 
-    onNewAltAliasChanged = (value) => {
-        this.setState({newAltAlias: value});
+    private onNewAltAliasChanged = (value: string) => {
+        this.setState({ newAltAlias: value });
     }
 
-    onAltAliasAdded = (alias) => {
+    private onAltAliasAdded = (alias: string) => {
         const altAliases = this.state.altAliases.slice();
         if (!altAliases.some(a => a.trim() === alias.trim())) {
             altAliases.push(alias.trim());
             this.changeAltAliases(altAliases);
-            this.setState({newAltAlias: ""});
+            this.setState({ newAltAlias: "" });
         }
     }
 
-    onAltAliasDeleted = (index) => {
+    private onAltAliasDeleted = (index: number) => {
         const altAliases = this.state.altAliases.slice();
         altAliases.splice(index, 1);
         this.changeAltAliases(altAliases);
     }
 
-    _getAliases() {
-        return this.state.altAliases.concat(this._getLocalNonAltAliases());
+    private getAliases() {
+        return this.state.altAliases.concat(this.getLocalNonAltAliases());
     }
 
-    _getLocalNonAltAliases() {
+    private getLocalNonAltAliases() {
         const {altAliases} = this.state;
         return this.state.localAliases.filter(alias => !altAliases.includes(alias));
     }
@@ -320,7 +332,7 @@ export default class AliasSettings extends React.Component {
             >
                 
                 {
-                    this._getAliases().map((alias, i) => {
+                    this.getAliases().map((alias, i) => {
                         if (alias === this.state.canonicalAlias) found = true;
                         return (
                             
    
         );

From a895b083a2947e4befe22a2b9c49f22ca0ac8698 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" 
Date: Mon, 7 Jun 2021 16:21:53 +0100
Subject: [PATCH 0271/1270] Fix notif panel timestamp padding

This restores some space around the timestamp in the notif panel. We were
previously relying somewhat randomly on the presence on empty flair elements to
create space.

Fixes https://github.com/vector-im/element-web/issues/17580
---
 res/css/structures/_NotificationPanel.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index 1258ace069..e54feca175 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -82,7 +82,6 @@ limitations under the License.
     color: $primary-fg-color;
     font-size: $font-12px;
     display: inline;
-    padding-left: 0px;
 }
 
 .mx_NotificationPanel .mx_EventTile_senderDetails {
@@ -103,6 +102,7 @@ limitations under the License.
     visibility: visible;
     position: initial;
     display: inline;
+    padding-left: 5px;
 }
 
 .mx_NotificationPanel .mx_EventTile_line {

From 4725a9e8fa954b3858f4dd8e8d4212f6a0d61488 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 16:42:59 +0100
Subject: [PATCH 0272/1270] Extract useRoomState hook into hooks directory

---
 .../views/right_panel/PinnedMessagesCard.tsx  | 19 +--------
 src/hooks/useRoomState.ts                     | 40 +++++++++++++++++++
 2 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 src/hooks/useRoomState.ts

diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx
index a3f1f2d9df..ad62619593 100644
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -28,6 +28,7 @@ import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import PinningUtils from "../../../utils/PinningUtils";
 import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
 import PinnedEventTile from "../rooms/PinnedEventTile";
+import { useRoomState } from "../../../hooks/useRoomState";
 
 interface IProps {
     room: Room;
@@ -75,24 +76,6 @@ export const useReadPinnedEvents = (room: Room): Set => {
     return readPinnedEvents;
 };
 
-const useRoomState = (room: Room, mapper: (state: RoomState) => T): T => {
-    const [value, setValue] = useState(room ? mapper(room.currentState) : undefined);
-
-    const update = useCallback(() => {
-        if (!room) return;
-        setValue(mapper(room.currentState));
-    }, [room, mapper]);
-
-    useEventEmitter(room?.currentState, "RoomState.events", update);
-    useEffect(() => {
-        update();
-        return () => {
-            setValue(undefined);
-        };
-    }, [update]);
-    return value;
-};
-
 const PinnedMessagesCard = ({ room, onClose }: IProps) => {
     const cli = useContext(MatrixClientContext);
     const canUnpin = useRoomState(room, state => state.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli));
diff --git a/src/hooks/useRoomState.ts b/src/hooks/useRoomState.ts
new file mode 100644
index 0000000000..ded51c3900
--- /dev/null
+++ b/src/hooks/useRoomState.ts
@@ -0,0 +1,40 @@
+/*
+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 { useCallback, useEffect, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
+
+import { useEventEmitter } from "./useEventEmitter";
+
+// Hook to simplify watching Matrix Room state
+export const useRoomState = (room: Room, mapper: (state: RoomState) => T): T => {
+    const [value, setValue] = useState(room ? mapper(room.currentState) : undefined);
+
+    const update = useCallback(() => {
+        if (!room) return;
+        setValue(mapper(room.currentState));
+    }, [room, mapper]);
+
+    useEventEmitter(room?.currentState, "RoomState.events", update);
+    useEffect(() => {
+        update();
+        return () => {
+            setValue(undefined);
+        };
+    }, [update]);
+    return value;
+};

From 296186b844d286062e0fe2e401320d267bb2717b Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" 
Date: Mon, 7 Jun 2021 16:21:53 +0100
Subject: [PATCH 0273/1270] Fix notif panel timestamp padding

This restores some space around the timestamp in the notif panel. We were
previously relying somewhat randomly on the presence on empty flair elements to
create space.

Fixes https://github.com/vector-im/element-web/issues/17580
---
 res/css/structures/_NotificationPanel.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index 1258ace069..e54feca175 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -82,7 +82,6 @@ limitations under the License.
     color: $primary-fg-color;
     font-size: $font-12px;
     display: inline;
-    padding-left: 0px;
 }
 
 .mx_NotificationPanel .mx_EventTile_senderDetails {
@@ -103,6 +102,7 @@ limitations under the License.
     visibility: visible;
     position: initial;
     display: inline;
+    padding-left: 5px;
 }
 
 .mx_NotificationPanel .mx_EventTile_line {

From dd089bf9696a7c5ad0b765bc41e5bf1d9a351466 Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Mon, 7 Jun 2021 17:03:05 +0100
Subject: [PATCH 0274/1270] Upgrade matrix-js-sdk to 11.2.0

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 4f6a023383..5ee56ec8cf 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "11.2.0-rc.1",
+    "matrix-js-sdk": "11.2.0",
     "matrix-widget-api": "^0.1.0-beta.14",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index 1b07d4502b..5e324b7ad2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5673,10 +5673,10 @@ mathml-tag-names@^2.1.3:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
-matrix-js-sdk@11.2.0-rc.1:
-  version "11.2.0-rc.1"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-11.2.0-rc.1.tgz#339259d892ce08195864c1130780dd0b3d996af3"
-  integrity sha512-ACFONqdRqiPIj7aWf7G4f/2d0S/hfouIH6tdkFGDbizbWJCmqXRJ8EN2gmu0F3A6GGDo0+k9cqaeMf3Y1KIM8w==
+matrix-js-sdk@11.2.0:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-11.2.0.tgz#b49f1ebbb671f5a8ec76eec3b21eeda97f10fb31"
+  integrity sha512-YsdAQNPsvoWL3fKI2fb6evO81UKfSt+hYDkBOIylzb3AA/RtUsjtSNXcT4f6BsQIVTh6xAhEjPVoMfKORchf1Q==
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"

From 187a3671110f181c8129b1f1dd47e110621cd8a0 Mon Sep 17 00:00:00 2001
From: Germain Souquet 
Date: Mon, 7 Jun 2021 17:11:14 +0100
Subject: [PATCH 0275/1270] Add prop to alwaysShowTimestamps on TimelinePanel

---
 src/components/structures/NotificationPanel.tsx | 1 +
 src/components/structures/TimelinePanel.js      | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx
index b4f13f6b37..6c22835447 100644
--- a/src/components/structures/NotificationPanel.tsx
+++ b/src/components/structures/NotificationPanel.tsx
@@ -50,6 +50,7 @@ export default class NotificationPanel extends React.PureComponent {
                     showUrlPreview={false}
                     tileShape="notif"
                     empty={emptyState}
+                    alwaysShowTimestamps={true}
                 />
             );
         } else {
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 6300c7532e..a8b0dc88dd 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -120,6 +120,9 @@ class TimelinePanel extends React.Component {
 
         // which layout to use
         layout: LayoutPropType,
+
+        // whether to always show timestamps for an event
+        alwaysShowTimestamps: PropTypes.bool,
     }
 
     // a map from room id to read marker event timestamp
@@ -1440,7 +1443,7 @@ class TimelinePanel extends React.Component {
                 onFillRequest={this.onMessageListFillRequest}
                 onUnfillRequest={this.onMessageListUnfillRequest}
                 isTwelveHour={this.state.isTwelveHour}
-                alwaysShowTimestamps={this.state.alwaysShowTimestamps}
+                alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.alwaysShowTimestamps}
                 className={this.props.className}
                 tileShape={this.props.tileShape}
                 resizeNotifier={this.props.resizeNotifier}

From 2983b3ace21f55cf36efddecea9851918d336fd9 Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Mon, 7 Jun 2021 17:41:18 +0100
Subject: [PATCH 0276/1270] Prepare changelog for v3.23.0

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3abd1f32b..94c9530941 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+Changes in [3.23.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.23.0) (2021-06-07)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.23.0-rc.1...v3.23.0)
+
+ * Upgrade to JS SDK 11.2.0
+ * [Release] Fix notif panel timestamp padding
+   [\#6158](https://github.com/matrix-org/matrix-react-sdk/pull/6158)
+
 Changes in [3.23.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.23.0-rc.1) (2021-06-01)
 ===============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.22.0...v3.23.0-rc.1)

From a3dac02e4c1b4a5d632c34ad35e634cd23e59813 Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Mon, 7 Jun 2021 17:41:18 +0100
Subject: [PATCH 0277/1270] v3.23.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5ee56ec8cf..17067df933 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.23.0-rc.1",
+  "version": "3.23.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From bcd0ba8d456f93c45ab57f8b769ece0815227571 Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Mon, 7 Jun 2021 17:42:46 +0100
Subject: [PATCH 0278/1270] Resetting package fields for development

---
 package.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 17067df933..dee4013006 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "bin": {
     "reskindex": "scripts/reskindex.js"
   },
-  "main": "./lib/index.js",
+  "main": "./src/index.js",
   "matrix_src_main": "./src/index.js",
   "matrix_lib_main": "./lib/index.js",
   "matrix_lib_typings": "./lib/index.d.ts",
@@ -200,6 +200,5 @@
     "coverageReporters": [
       "text"
     ]
-  },
-  "typings": "./lib/index.d.ts"
+  }
 }

From 8ccdf9a3e8a038def7c6be8e920839f26dae2f83 Mon Sep 17 00:00:00 2001
From: RiotRobot 
Date: Mon, 7 Jun 2021 17:43:27 +0100
Subject: [PATCH 0279/1270] Reset matrix-js-sdk back to develop branch

---
 package.json | 2 +-
 yarn.lock    | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index dee4013006..2bff2a7b13 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "11.2.0",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "matrix-widget-api": "^0.1.0-beta.14",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index 5e324b7ad2..97179550c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5673,10 +5673,9 @@ mathml-tag-names@^2.1.3:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
-matrix-js-sdk@11.2.0:
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
   version "11.2.0"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-11.2.0.tgz#b49f1ebbb671f5a8ec76eec3b21eeda97f10fb31"
-  integrity sha512-YsdAQNPsvoWL3fKI2fb6evO81UKfSt+hYDkBOIylzb3AA/RtUsjtSNXcT4f6BsQIVTh6xAhEjPVoMfKORchf1Q==
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/35ecbed29d16982deff27a8c37b05167738225a2"
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"

From ed80db73d4209a518cb8828fa55aa0aec60dcd96 Mon Sep 17 00:00:00 2001
From: Tirifto 
Date: Sun, 6 Jun 2021 17:19:04 +0000
Subject: [PATCH 0280/1270] Translated using Weblate (Esperanto)

Currently translated at 99.9% (2978 of 2979 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/eo/
---
 src/i18n/strings/eo.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/eo.json b/src/i18n/strings/eo.json
index fc8c00fd19..1aa5ba8a52 100644
--- a/src/i18n/strings/eo.json
+++ b/src/i18n/strings/eo.json
@@ -3320,5 +3320,11 @@
     "Reset event store": "Restarigi deponejon de okazoj",
     "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Se vi tamen tion faras, sciu ke neniu el viaj mesaĝoj foriĝos, sed via sperto pri serĉado povas malboniĝi momente, dum la indekso estas refarata",
     "You most likely do not want to reset your event index store": "Plej probable, vi ne volas restarigi vian deponejon de indeksoj de okazoj",
-    "Reset event store?": "Ĉu restarigi deponejon de okazoj?"
+    "Reset event store?": "Ĉu restarigi deponejon de okazoj?",
+    "Currently joining %(count)s rooms|one": "Nun aliĝante al %(count)s ĉambro",
+    "Currently joining %(count)s rooms|other": "Nun aliĝante al %(count)s ĉambroj",
+    "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Provu aliajn vortojn aŭ kontorolu, ĉu vi ne tajperaris. Iuj rezultoj eble ne videblos, ĉar ili estas privataj kaj vi bezonus inviton por aliĝi.",
+    "No results for \"%(query)s\"": "Neniuj rezultoj por «%(query)s»",
+    "The user you called is busy.": "La uzanto, kiun vi vokis, estas okupata.",
+    "User Busy": "Uzanto estas okupata"
 }

From 4185185cdc9e97231ca8f25ca4c9a5041429225c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 7 Jun 2021 19:42:48 +0200
Subject: [PATCH 0281/1270] Reduce number of DOM elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 src/components/views/messages/SenderProfile.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index a51f50525d..df75de34ba 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -146,12 +146,10 @@ export default class SenderProfile extends React.Component {
         }
 
         return (
-            
    
-                
    
-                    { displayNameElement }
-                    { mxidElement }
-                    { flair }
-                
    
+            
    
+                { displayNameElement }
+                { mxidElement }
+                { flair }
             
    
         );
     }

From b39c615abc6f2787decfcd5ed4c38ae6ea01d072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= 
Date: Mon, 7 Jun 2021 19:44:58 +0200
Subject: [PATCH 0282/1270] Reorder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner 
---
 .../views/messages/SenderProfile.tsx          | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index df75de34ba..872dc132b9 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -118,18 +118,6 @@ export default class SenderProfile extends React.Component {
             return null; // emote message must include the name so don't duplicate it
         }
 
-        let flair;
-        if (this.props.enableFlair) {
-            const displayedGroups = this._getDisplayedGroups(
-                this.state.userGroups, this.state.relatedGroups,
-            );
-
-            flair = ;
-        }
-
         const displayNameElement = (
             
                 { displayName }
@@ -145,6 +133,18 @@ export default class SenderProfile extends React.Component {
             );
         }
 
+        let flair;
+        if (this.props.enableFlair) {
+            const displayedGroups = this._getDisplayedGroups(
+                this.state.userGroups, this.state.relatedGroups,
+            );
+
+            flair = ;
+        }
+
         return (
             
    
                 { displayNameElement }

From a5bf17ff659eeb8f3d915163217d9c8574d53f54 Mon Sep 17 00:00:00 2001
From: Aaron Raimist 
Date: Mon, 7 Jun 2021 16:54:36 -0500
Subject: [PATCH 0283/1270] Revert incorrect change to forShareableRoom

Signed-off-by: Aaron Raimist 
---
 src/utils/permalinks/Permalinks.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/permalinks/Permalinks.ts b/src/utils/permalinks/Permalinks.ts
index 2f268aaa0c..c2f95defd6 100644
--- a/src/utils/permalinks/Permalinks.ts
+++ b/src/utils/permalinks/Permalinks.ts
@@ -293,12 +293,12 @@ export function makeRoomPermalink(roomId: string): string {
 
     // If the roomId isn't actually a room ID, don't try to list the servers.
     // Aliases are already routable, and don't need extra information.
-    if (roomId[0] !== '!') return getPermalinkConstructor().forShareableRoom(roomId, []);
+    if (roomId[0] !== '!') return getPermalinkConstructor().forRoom(roomId, []);
 
     const client = MatrixClientPeg.get();
     const room = client.getRoom(roomId);
     if (!room) {
-        return getPermalinkConstructor().forShareableRoom(roomId, []);
+        return getPermalinkConstructor().forRoom(roomId, []);
     }
     const permalinkCreator = new RoomPermalinkCreator(room);
     permalinkCreator.load();

From 773af6c7be6244775b3c2da79e38921381b401a9 Mon Sep 17 00:00:00 2001
From: Aaron Raimist 
Date: Mon, 7 Jun 2021 16:54:50 -0500
Subject: [PATCH 0284/1270] Fix test

Signed-off-by: Aaron Raimist 
---
 test/utils/permalinks/Permalinks-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/utils/permalinks/Permalinks-test.js b/test/utils/permalinks/Permalinks-test.js
index 0bd4466d97..3c4982b465 100644
--- a/test/utils/permalinks/Permalinks-test.js
+++ b/test/utils/permalinks/Permalinks-test.js
@@ -34,7 +34,7 @@ function mockRoom(roomId, members, serverACL) {
 
     return {
         roomId,
-        getCanonicalAlias: () => roomId,
+        getCanonicalAlias: () => null,
         getJoinedMembers: () => members,
         getMember: (userId) => members.find(m => m.userId === userId),
         currentState: {

From 946416cf8756ac94d0229f038e561f9215ca695f Mon Sep 17 00:00:00 2001
From: Aaron Raimist 
Date: Mon, 7 Jun 2021 17:09:43 -0500
Subject: [PATCH 0285/1270] Make serverCandidates optional

Signed-off-by: Aaron Raimist 
---
 src/utils/permalinks/PermalinkConstructor.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/utils/permalinks/PermalinkConstructor.ts b/src/utils/permalinks/PermalinkConstructor.ts
index 25855eb024..986d20d4d1 100644
--- a/src/utils/permalinks/PermalinkConstructor.ts
+++ b/src/utils/permalinks/PermalinkConstructor.ts
@@ -19,11 +19,11 @@ limitations under the License.
  * TODO: Convert this to a real TypeScript interface
  */
 export default class PermalinkConstructor {
-    forEvent(roomId: string, eventId: string, serverCandidates: string[]): string {
+    forEvent(roomId: string, eventId: string, serverCandidates: string[] = []): string {
         throw new Error("Not implemented");
     }
 
-    forRoom(roomIdOrAlias: string, serverCandidates: string[]): string {
+    forRoom(roomIdOrAlias: string, serverCandidates: string[] = []): string {
         throw new Error("Not implemented");
     }
 
@@ -73,12 +73,12 @@ export class PermalinkParts {
         return new PermalinkParts(null, null, null, groupId, null);
     }
 
-    static forRoom(roomIdOrAlias: string, viaServers: string[]): PermalinkParts {
-        return new PermalinkParts(roomIdOrAlias, null, null, null, viaServers || []);
+    static forRoom(roomIdOrAlias: string, viaServers: string[] = []): PermalinkParts {
+        return new PermalinkParts(roomIdOrAlias, null, null, null, viaServers);
     }
 
-    static forEvent(roomId: string, eventId: string, viaServers: string[]): PermalinkParts {
-        return new PermalinkParts(roomId, eventId, null, null, viaServers || []);
+    static forEvent(roomId: string, eventId: string, viaServers: string[] = []): PermalinkParts {
+        return new PermalinkParts(roomId, eventId, null, null, viaServers);
     }
 
     get primaryEntityId(): string {

From 5e3ad621892786890692c987d95f74881bebe232 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 7 Jun 2021 19:03:04 -0400
Subject: [PATCH 0286/1270] Remove mysterious dot from EventTilePreviews

It was a bullet point, since EventTiles now get created as li by
default :P

Signed-off-by: Robin Townsend 
---
 src/components/views/elements/EventTilePreview.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index 77db94b5dd..20d6cbaeb3 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -128,6 +128,7 @@ export default class EventTilePreview extends React.Component {
                 mxEvent={event}
                 layout={this.props.layout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                as="div"
             />
         
    ;
     }

From a8dab04d5eed882f90244f0a5b1ec54cbfaaea58 Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 7 Jun 2021 19:10:45 -0400
Subject: [PATCH 0287/1270] Remove mystery dot from forward dialog preview

It was a bullet point, since EventTiles now get created as li by default
:P

Signed-off-by: Robin Townsend 
---
 src/components/views/dialogs/ForwardDialog.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index e97958973b..b89485943a 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -211,6 +211,7 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr
                 layout={previewLayout}
                 enableFlair={flairEnabled}
                 permalinkCreator={permalinkCreator}
+                as="div"
             />
         
    
         
    

From b00ad63a35fa2aa18c0ca04b803b34e252fa270c Mon Sep 17 00:00:00 2001
From: Robin Townsend 
Date: Mon, 7 Jun 2021 19:16:00 -0400
Subject: [PATCH 0288/1270] Fix whitespace nitpick

Signed-off-by: Robin Townsend 
---
 src/components/views/dialogs/ForwardDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index b89485943a..1c90dca432 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -201,7 +201,7 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr
         onFinished={onFinished}
         fixedWidth={false}
     >
-        
    {_t("Message preview")}
    
+        
    { _t("Message preview") }
    
         
    
Date: Mon, 7 Jun 2021 19:19:14 -0400
Subject: [PATCH 0289/1270] Hide download links from forward dialog preview

since trying to interact with them is pointless.

Signed-off-by: Robin Townsend 
---
 res/css/views/dialogs/_ForwardDialog.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 7422d39626..1976a43ab9 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -49,6 +49,11 @@ limitations under the License.
         .mx_EventTile_e2eIcon_unencrypted {
             display: none;
         }
+
+        // We also hide download links to not encourage users to try interacting
+        .mx_MFileBody_download {
+            display: none;
+        }
     }
 
     > hr {

From 26a030abcd76daf27c9f360000e20d54fc65cb19 Mon Sep 17 00:00:00 2001
From: David Baker 
Date: Tue, 8 Jun 2021 12:40:38 +0100
Subject: [PATCH 0290/1270] Better handling for widgets that fail to load

---
 src/components/views/elements/AppTile.js | 40 +++++++++++++++++-------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index b898ad2ebc..91ffbf2c27 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -47,9 +47,14 @@ export default class AppTile extends React.Component {
 
         // The key used for PersistedElement
         this._persistKey = getPersistKey(this.props.app.id);
-        this._sgWidget = new StopGapWidget(this.props);
-        this._sgWidget.on("preparing", this._onWidgetPrepared);
-        this._sgWidget.on("ready", this._onWidgetReady);
+        try {
+            this._sgWidget = new StopGapWidget(this.props);
+            this._sgWidget.on("preparing", this._onWidgetPrepared);
+            this._sgWidget.on("ready", this._onWidgetReady);
+        } catch (e) {
+            console.log("Failed to construct widget", e);
+            this._sgWidget = null;
+        }
         this.iframe = null; // ref to the iframe (callback style)
 
         this.state = this._getNewState(props);
@@ -97,7 +102,7 @@ export default class AppTile extends React.Component {
             // Force the widget to be non-persistent (able to be deleted/forgotten)
             ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
             PersistedElement.destroyElement(this._persistKey);
-            this._sgWidget.stop();
+            if (this._sgWidget) this._sgWidget.stop();
         }
 
         this.setState({ hasPermissionToLoad });
@@ -117,7 +122,7 @@ export default class AppTile extends React.Component {
 
     componentDidMount() {
         // Only fetch IM token on mount if we're showing and have permission to load
-        if (this.state.hasPermissionToLoad) {
+        if (this._sgWidget && this.state.hasPermissionToLoad) {
             this._startWidget();
         }
 
@@ -146,10 +151,15 @@ export default class AppTile extends React.Component {
         if (this._sgWidget) {
             this._sgWidget.stop();
         }
-        this._sgWidget = new StopGapWidget(newProps);
-        this._sgWidget.on("preparing", this._onWidgetPrepared);
-        this._sgWidget.on("ready", this._onWidgetReady);
-        this._startWidget();
+        try {
+            this._sgWidget = new StopGapWidget(newProps);
+            this._sgWidget.on("preparing", this._onWidgetPrepared);
+            this._sgWidget.on("ready", this._onWidgetReady);
+            this._startWidget();
+        } catch (e) {
+            console.log("Failed to construct widget", e);
+            this._sgWidget = null;
+        }
     }
 
     _startWidget() {
@@ -161,7 +171,7 @@ export default class AppTile extends React.Component {
     _iframeRefChange = (ref) => {
         this.iframe = ref;
         if (ref) {
-            this._sgWidget.start(ref);
+            if (this._sgWidget) this._sgWidget.start(ref);
         } else {
             this._resetWidget(this.props);
         }
@@ -209,7 +219,7 @@ export default class AppTile extends React.Component {
         // Delete the widget from the persisted store for good measure.
         PersistedElement.destroyElement(this._persistKey);
 
-        this._sgWidget.stop({forceDestroy: true});
+        if (this._sgWidget) this._sgWidget.stop({forceDestroy: true});
     }
 
     _onWidgetPrepared = () => {
@@ -340,7 +350,13 @@ export default class AppTile extends React.Component {
                 
             
    
         );
-        if (!this.state.hasPermissionToLoad) {
+        if (this._sgWidget === null) {
+            appTileBody = (
+                
    
+                    
+                
    
+            );
+        } else if (!this.state.hasPermissionToLoad) {
             // only possible for room widgets, can assert this.props.room here
             const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
             appTileBody = (

From 5c62728d13ac23721c7747c10929e38fa4f2458b Mon Sep 17 00:00:00 2001
From: Germain Souquet 
Date: Tue, 8 Jun 2021 12:52:32 +0100
Subject: [PATCH 0291/1270] Migrate end to end tests pipeline to GitHub Actions

---
 .github/workflows/end-to-end-tests.yml | 32 ++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 .github/workflows/end-to-end-tests.yml

diff --git a/.github/workflows/end-to-end-tests.yml b/.github/workflows/end-to-end-tests.yml
new file mode 100644
index 0000000000..271ea06529
--- /dev/null
+++ b/.github/workflows/end-to-end-tests.yml
@@ -0,0 +1,32 @@
+name: "end-to-end_tests"
+on: [push]
+jobs:
+    "end-to-end_tests":
+        runs-on: ubuntu-latest
+        defaults:
+            run:
+                shell: bash
+                working-directory: ${{ github.workspace }}
+        container:
+            image: vectorim/element-web-ci-e2etests-env:latest
+            env:
+                CI_PACKAGE: true
+                GITHUB_HEAD_REF: ${{ github.head_ref }}
+                GITHUB_BASE_REF: ${{ github.base_ref }}
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v2
+            - name: End-to-End tests
+              run: ./scripts/ci/end-to-end-tests.sh
+            - name: Archive logs
+              uses: actions/upload-artifact@v2
+              with:
+                path: |
+                    test/end-to-end-tests/logs/**/*
+                    test/end-to-end-tests/synapse/installations/consent/homeserver.log
+                retention-days: 14
+            - name: Archive performance benchmark
+              uses: actions/upload-artifact@v2
+              with:
+                name: performance-entries.json
+                path: test/end-to-end-tests/performance-entries.json

From 90a58380fd3732f250f63de65a4d542b0a0a6837 Mon Sep 17 00:00:00 2001
From: David Baker 
Date: Tue, 8 Jun 2021 16:15:20 +0100
Subject: [PATCH 0292/1270] Make it translateable

And also the other one that I copied from
---
 src/components/views/elements/AppTile.js | 4 ++--
 src/i18n/strings/en_EN.json              | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 91ffbf2c27..4028909167 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -353,7 +353,7 @@ export default class AppTile extends React.Component {
         if (this._sgWidget === null) {
             appTileBody = (
                 
    
-                    
+                    
                 
    
             );
         } else if (!this.state.hasPermissionToLoad) {
@@ -380,7 +380,7 @@ export default class AppTile extends React.Component {
             if (this.isMixedContent()) {
                 appTileBody = (
                     
    
-                        
+                        
                     
    
                 );
             } else {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9e85ea28c8..64613d0d88 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1926,6 +1926,8 @@
     "Widgets do not use message encryption.": "Widgets do not use message encryption.",
     "Widget added by": "Widget added by",
     "This widget may use cookies.": "This widget may use cookies.",
+    "Error loading Widget": "Error loading Widget",
+    "Error - Mixed content": "Error - Mixed content",
     "Popout widget": "Popout widget",
     "Use the Desktop app to see all encrypted files": "Use the Desktop app to see all encrypted files",
     "Use the Desktop app to search encrypted messages": "Use the Desktop app to search encrypted messages",

From 9454a4e6c79f0ecfa5ebd91bd7af689e478ca559 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:28:02 +0100
Subject: [PATCH 0293/1270] Convert AdvancedRoomSettingsTab to Typescript

---
 ...ingsTab.js => AdvancedRoomSettingsTab.tsx} | 87 ++++++++++---------
 1 file changed, 47 insertions(+), 40 deletions(-)
 rename src/components/views/settings/tabs/room/{AdvancedRoomSettingsTab.js => AdvancedRoomSettingsTab.tsx} (73%)

diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
similarity index 73%
rename from src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js
rename to src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
index 28aad65129..f587210095 100644
--- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,68 +15,75 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import {_t} from "../../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
-import * as sdk from "../../../../..";
+
+import { _t } from "../../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
+import RoomUpgradeDialog from "../../../dialogs/RoomUpgradeDialog";
+import DevtoolsDialog from "../../../dialogs/DevtoolsDialog";
 import Modal from "../../../../../Modal";
 import dis from "../../../../../dispatcher/dispatcher";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+
+interface IProps {
+    roomId: string;
+    closeSettingsFn(): void;
+}
+
+interface IRecommendedVersion {
+    version: string;
+    needsUpgrade: boolean;
+    urgent: boolean;
+}
+
+interface IState {
+    upgradeRecommendation?: IRecommendedVersion;
+    oldRoomId?: string;
+    oldEventId?: string;
+    upgraded?: boolean;
+}
 
 @replaceableComponent("views.settings.tabs.room.AdvancedRoomSettingsTab")
-export default class AdvancedRoomSettingsTab extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        closeSettingsFn: PropTypes.func.isRequired,
-    };
-
-    constructor(props) {
-        super(props);
+export default class AdvancedRoomSettingsTab extends React.Component {
+    constructor(props, context) {
+        super(props, context);
 
         this.state = {
             // This is eventually set to the value of room.getRecommendedVersion()
             upgradeRecommendation: null,
         };
-    }
 
-    // TODO: [REACT-WARNING] Move this to constructor
-    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
         // we handle lack of this object gracefully later, so don't worry about it failing here.
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         room.getRecommendedVersion().then((v) => {
             const tombstone = room.currentState.getStateEvents("m.room.tombstone", "");
 
-            const additionalStateChanges = {};
+            const additionalStateChanges: Partial = {};
             const createEvent = room.currentState.getStateEvents("m.room.create", "");
             const predecessor = createEvent ? createEvent.getContent().predecessor : null;
             if (predecessor && predecessor.room_id) {
-                additionalStateChanges['oldRoomId'] = predecessor.room_id;
-                additionalStateChanges['oldEventId'] = predecessor.event_id;
-                additionalStateChanges['hasPreviousRoom'] = true;
+                additionalStateChanges.oldRoomId = predecessor.room_id;
+                additionalStateChanges.oldEventId = predecessor.event_id;
             }
 
-
             this.setState({
-                upgraded: tombstone && tombstone.getContent().replacement_room,
+                upgraded: !!tombstone?.getContent().replacement_room,
                 upgradeRecommendation: v,
                 ...additionalStateChanges,
             });
         });
     }
 
-    _upgradeRoom = (e) => {
-        const RoomUpgradeDialog = sdk.getComponent('dialogs.RoomUpgradeDialog');
+    private upgradeRoom = (e) => {
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, {room: room});
     };
 
-    _openDevtools = (e) => {
-        const DevtoolsDialog = sdk.getComponent('dialogs.DevtoolsDialog');
+    private openDevtools = (e) => {
         Modal.createDialog(DevtoolsDialog, {roomId: this.props.roomId});
     };
 
-    _onOldRoomClicked = (e) => {
+    private onOldRoomClicked = (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -113,7 +120,7 @@ export default class AdvancedRoomSettingsTab extends React.Component {
                             },
                         )}
                     
    
-                    
+                    
                         {_t("Upgrade this room to the recommended room version")}
                     
                 
    
@@ -121,13 +128,13 @@ export default class AdvancedRoomSettingsTab extends React.Component {
         }
 
         let oldRoomLink;
-        if (this.state.hasPreviousRoom) {
+        if (this.state.oldRoomId) {
             let name = _t("this room");
             const room = MatrixClientPeg.get().getRoom(this.props.roomId);
             if (room && room.name) name = room.name;
             oldRoomLink = (
-                
-                    {_t("View older messages in %(roomName)s.", {roomName: name})}
+                
+                    { _t("View older messages in %(roomName)s.", { roomName: name }) }
                 
             );
         }
@@ -139,23 +146,23 @@ export default class AdvancedRoomSettingsTab extends React.Component {
                     {_t("Room information")}
                     
    
                         {_t("Internal room ID:")} 
-                        {this.props.roomId}
+                        { this.props.roomId }
                     
    
-                    {unfederatableSection}
+                    { unfederatableSection }
                 
    
                 
    
                     {_t("Room version")}
                     
    
                         {_t("Room version:")} 
-                        {room.getVersion()}
+                        { room.getVersion() }
                     
    
-                    {oldRoomLink}
-                    {roomUpgradeButton}
+                    { oldRoomLink }
+                    { roomUpgradeButton }
                 
    
                 
    
-                    {_t("Developer options")}
-                    
-                        {_t("Open Devtools")}
+                    { _t("Developer options") }
+                    
+                        { _t("Open Devtools") }
                     
                 
    
             
    

From 8d4ac90265839a98aeb83277834ef8673fc2b97e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:28:37 +0100
Subject: [PATCH 0294/1270] Convert RoomPublishSetting and LabelledToggleSwitch
 to Typescript

---
 ...ggleSwitch.js => LabelledToggleSwitch.tsx} | 47 +++++++++----------
 ...blishSetting.js => RoomPublishSetting.tsx} | 47 ++++++++++++-------
 2 files changed, 51 insertions(+), 43 deletions(-)
 rename src/components/views/elements/{LabelledToggleSwitch.js => LabelledToggleSwitch.tsx} (63%)
 rename src/components/views/room_settings/{RoomPublishSetting.js => RoomPublishSetting.tsx} (62%)

diff --git a/src/components/views/elements/LabelledToggleSwitch.js b/src/components/views/elements/LabelledToggleSwitch.tsx
similarity index 63%
rename from src/components/views/elements/LabelledToggleSwitch.js
rename to src/components/views/elements/LabelledToggleSwitch.tsx
index ef60eeed7b..957e3dbc97 100644
--- a/src/components/views/elements/LabelledToggleSwitch.js
+++ b/src/components/views/elements/LabelledToggleSwitch.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,38 +14,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from "prop-types";
+import React from "react";
+
 import ToggleSwitch from "./ToggleSwitch";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    // The value for the toggle switch
+    value: boolean;
+    // The translated label for the switch
+    label: string;
+    // Whether or not to disable the toggle switch
+    disabled?: boolean;
+    // True to put the toggle in front of the label
+    // Default false.
+    toggleInFront?: boolean;
+    // Additional class names to append to the switch. Optional.
+    className?: string;
+    // The function to call when the value changes
+    onChange(checked: boolean): void;
+}
+
 @replaceableComponent("views.elements.LabelledToggleSwitch")
-export default class LabelledToggleSwitch extends React.Component {
-    static propTypes = {
-        // The value for the toggle switch
-        value: PropTypes.bool.isRequired,
-
-        // The function to call when the value changes
-        onChange: PropTypes.func.isRequired,
-
-        // The translated label for the switch
-        label: PropTypes.string.isRequired,
-
-        // Whether or not to disable the toggle switch
-        disabled: PropTypes.bool,
-
-        // True to put the toggle in front of the label
-        // Default false.
-        toggleInFront: PropTypes.bool,
-
-        // Additional class names to append to the switch. Optional.
-        className: PropTypes.string,
-    };
-
+export default class LabelledToggleSwitch extends React.PureComponent {
     render() {
         // This is a minimal version of a SettingsFlag
 
-        let firstPart = {this.props.label};
+        let firstPart = { this.props.label };
         let secondPart =  {
+    public state = {
+        isRoomPublished: false,
+    };
 
-    onRoomPublishChange = (e) => {
+    private onRoomPublishChange = (e) => {
         const valueBefore = this.state.isRoomPublished;
         const newValue = !valueBefore;
         this.setState({isRoomPublished: newValue});
@@ -52,11 +62,14 @@ export default class RoomPublishSetting extends React.PureComponent {
     render() {
         const client = MatrixClientPeg.get();
 
-        return ();
+        return (
+            
+        );
     }
 }

From 13a2f779b962e8498ae09d9675a91baeca3cd671 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:29:06 +0100
Subject: [PATCH 0295/1270] improve defaults for useRoomState and
 useStateToggle hooks

---
 src/hooks/useRoomState.ts   | 5 ++++-
 src/hooks/useStateToggle.ts | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useRoomState.ts b/src/hooks/useRoomState.ts
index ded51c3900..11ac7de49e 100644
--- a/src/hooks/useRoomState.ts
+++ b/src/hooks/useRoomState.ts
@@ -20,8 +20,11 @@ import { RoomState } from "matrix-js-sdk/src/models/room-state";
 
 import { useEventEmitter } from "./useEventEmitter";
 
+type Mapper = (roomState: RoomState) => T;
+const defaultMapper: Mapper = (roomState: RoomState) => roomState;
+
 // Hook to simplify watching Matrix Room state
-export const useRoomState = (room: Room, mapper: (state: RoomState) => T): T => {
+export const useRoomState = (room: Room, mapper: Mapper = defaultMapper): T => {
     const [value, setValue] = useState(room ? mapper(room.currentState) : undefined);
 
     const update = useCallback(() => {
diff --git a/src/hooks/useStateToggle.ts b/src/hooks/useStateToggle.ts
index b50a923234..33701c4f16 100644
--- a/src/hooks/useStateToggle.ts
+++ b/src/hooks/useStateToggle.ts
@@ -18,7 +18,7 @@ import {Dispatch, SetStateAction, useState} from "react";
 
 // Hook to simplify toggling of a boolean state value
 // Returns value, method to toggle boolean value and method to set the boolean value
-export const useStateToggle = (initialValue: boolean): [boolean, () => void, Dispatch>] => {
+export const useStateToggle = (initialValue = false): [boolean, () => void, Dispatch>] => {
     const [value, setValue] = useState(initialValue);
     const toggleValue = () => {
         setValue(!value);

From 5c85ee1ea03097325680ed4574006c559fcccaa9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:30:46 +0100
Subject: [PATCH 0296/1270] Make AdvancedRoomSettingsTab space-aware

---
 .../views/settings/tabs/room/AdvancedRoomSettingsTab.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
index f587210095..7e7d9cba90 100644
--- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
@@ -76,7 +76,7 @@ export default class AdvancedRoomSettingsTab extends React.Component {
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
-        Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, {room: room});
+        Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, { room });
     };
 
     private openDevtools = (e) => {
@@ -143,7 +143,9 @@ export default class AdvancedRoomSettingsTab extends React.Component
                 
    {_t("Advanced")}
    
                 
    
-                    {_t("Room information")}
+                    
+                        { room?.isSpaceRoom() ? _t("Space information") : _t("Room information") }
+                    
                     
    
                         {_t("Internal room ID:")} 
                         { this.props.roomId }

From 78debcc93b99eea96f270cbff8a5266a10a52db5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:31:39 +0100
Subject: [PATCH 0297/1270] Add method to disable StyledRadioGroup and wrap
 description in element with a className

---
 .../views/elements/StyledRadioGroup.tsx         | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/StyledRadioGroup.tsx b/src/components/views/elements/StyledRadioGroup.tsx
index 6b9e992f92..744b6f2059 100644
--- a/src/components/views/elements/StyledRadioGroup.tsx
+++ b/src/components/views/elements/StyledRadioGroup.tsx
@@ -34,10 +34,19 @@ interface IProps {
     definitions: IDefinition[];
     value?: T; // if not provided no options will be selected
     outlined?: boolean;
+    disabled?: boolean;
     onChange(newValue: T): void;
 }
 
-function StyledRadioGroup({name, definitions, value, className, outlined, onChange}: IProps) {
+function StyledRadioGroup({
+    name,
+    definitions,
+    value,
+    className,
+    outlined,
+    disabled,
+    onChange,
+}: IProps) {
     const _onChange = e => {
         onChange(e.target.value);
     };
@@ -50,12 +59,12 @@ function StyledRadioGroup({name, definitions, value, className
                 checked={d.checked !== undefined ? d.checked : d.value === value}
                 name={name}
                 value={d.value}
-                disabled={d.disabled}
+                disabled={disabled || d.disabled}
                 outlined={outlined}
             >
-                {d.label}
+                { d.label }
             
-            {d.description}
+            { d.description ? { d.description } : null }
         )}
     ;
 }

From fdecba2fe54a5bfd4e5b9e6974e1fd9467858539 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:32:43 +0100
Subject: [PATCH 0298/1270] Make AliasSettings space-aware, remove stale unused
 props

---
 .../views/room_settings/AliasSettings.tsx     | 34 ++++++++++++++-----
 .../tabs/room/GeneralRoomSettingsTab.js       |  3 +-
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/views/room_settings/AliasSettings.tsx b/src/components/views/room_settings/AliasSettings.tsx
index d6e79c4ee9..6f83d64eaf 100644
--- a/src/components/views/room_settings/AliasSettings.tsx
+++ b/src/components/views/room_settings/AliasSettings.tsx
@@ -80,7 +80,7 @@ interface IProps {
     canSetCanonicalAlias: boolean;
     canSetAliases: boolean;
     canonicalAliasEvent?: MatrixEvent;
-    aliasEvents?: MatrixEvent[];
+    hidePublishSetting?: boolean;
 }
 
 interface IState {
@@ -99,7 +99,6 @@ export default class AliasSettings extends React.Component {
     static defaultProps = {
         canSetAliases: false,
         canSetCanonicalAlias: false,
-        aliasEvents: [],
     };
 
     constructor(props) {
@@ -317,7 +316,9 @@ export default class AliasSettings extends React.Component {
     }
 
     render() {
-        const localDomain = MatrixClientPeg.get().getDomain();
+        const cli = MatrixClientPeg.get();
+        const localDomain = cli.getDomain();
+        const isSpaceRoom = cli.getRoom(this.props.roomId)?.isSpaceRoom();
 
         let found = false;
         const canonicalValue = this.state.canonicalAlias || "";
@@ -363,7 +364,9 @@ export default class AliasSettings extends React.Component {
                 canEdit={this.props.canSetAliases}
                 onItemAdded={this.onLocalAliasAdded}
                 onItemRemoved={this.onLocalAliasDeleted}
-                noItemsLabel={_t('This room has no local addresses')}
+                noItemsLabel={isSpaceRoom
+                    ? _t("This space has no local addresses")
+                    : _t("This room has no local addresses")}
                 placeholder={_t('Local address')}
                 domain={localDomain}
             />);
@@ -372,10 +375,20 @@ export default class AliasSettings extends React.Component {
         return (
             
    
                 {_t("Published Addresses")}
-                
    {_t("Published addresses can be used by anyone on any server to join your room. " +
-                    "To publish an address, it needs to be set as a local address first.")}
    
-                {canonicalAliasSection}
-                
+                
    
+                    { isSpaceRoom
+                        ? _t("Published addresses can be used by anyone on any server to join your space.")
+                        : _t("Published addresses can be used by anyone on any server to join your room.")}
+                     
+                    { _t("To publish an address, it needs to be set as a local address first.") }
+                
    
+                { canonicalAliasSection }
+                { this.props.hidePublishSetting
+                    ? null
+                    :  }
                 
                     {this.getLocalNonAltAliases().map(alias => {
                         return
    ; }); From 48e090abccd3ffe3d65bbe8a3ab3c7b9a21594cb Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 17 Jun 2021 10:20:43 +0100 Subject: [PATCH 0435/1270] Remove unnecessary comment --- test/end-to-end-tests/src/scenarios/e2e-encryption.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/end-to-end-tests/src/scenarios/e2e-encryption.js b/test/end-to-end-tests/src/scenarios/e2e-encryption.js index ed5c598032..b20874fdaf 100644 --- a/test/end-to-end-tests/src/scenarios/e2e-encryption.js +++ b/test/end-to-end-tests/src/scenarios/e2e-encryption.js @@ -40,7 +40,7 @@ module.exports = async function e2eEncryptionScenarios(alice, bob) { // the logs get a bit messy here, but that's fine enough for debugging (hopefully) const [bobSas, aliceSas] = await Promise.all([bobSasPromise, aliceSasPromise]); assert.deepEqual(bobSas, aliceSas); - await measureStop(bob, "mx_VerifyE2EEUser"); // + await measureStop(bob, "mx_VerifyE2EEUser"); bob.log.done(`done (match for ${bobSas.join(", ")})`); const aliceMessage = "Guess what I just heard?!"; await sendMessage(alice, aliceMessage); From cce4ccb15735a40994536c496ddba590306db44c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Jun 2021 11:37:06 +0100 Subject: [PATCH 0436/1270] Fix types in SlashCommands which assumed something was a promise but it wasn't --- src/SlashCommands.tsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 4a7b37b5e5..9700c57d67 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -150,6 +150,10 @@ function success(promise?: Promise) { return {promise}; } +function successSync(value: any) { + return success(Promise.resolve(value)); +} + /* Disable the "unexpected this" error for these commands - all of the run * functions are called with `this` bound to the Command instance. */ @@ -160,7 +164,7 @@ export const Commands = [ args: '', description: _td('Sends the given message as a spoiler'), runFn: function(roomId, message) { - return success(ContentHelpers.makeHtmlMessage( + return successSync(ContentHelpers.makeHtmlMessage( message, `${message}`, )); @@ -176,7 +180,7 @@ export const Commands = [ if (args) { message = message + ' ' + args; } - return success(ContentHelpers.makeTextMessage(message)); + return successSync(ContentHelpers.makeTextMessage(message)); }, category: CommandCategories.messages, }), @@ -189,7 +193,7 @@ export const Commands = [ if (args) { message = message + ' ' + args; } - return success(ContentHelpers.makeTextMessage(message)); + return successSync(ContentHelpers.makeTextMessage(message)); }, category: CommandCategories.messages, }), @@ -202,7 +206,7 @@ export const Commands = [ if (args) { message = message + ' ' + args; } - return success(ContentHelpers.makeTextMessage(message)); + return successSync(ContentHelpers.makeTextMessage(message)); }, category: CommandCategories.messages, }), @@ -215,7 +219,7 @@ export const Commands = [ if (args) { message = message + ' ' + args; } - return success(ContentHelpers.makeTextMessage(message)); + return successSync(ContentHelpers.makeTextMessage(message)); }, category: CommandCategories.messages, }), @@ -224,7 +228,7 @@ export const Commands = [ args: '', description: _td('Sends a message as plain text, without interpreting it as markdown'), runFn: function(roomId, messages) { - return success(ContentHelpers.makeTextMessage(messages)); + return successSync(ContentHelpers.makeTextMessage(messages)); }, category: CommandCategories.messages, }), @@ -233,7 +237,7 @@ export const Commands = [ args: '', description: _td('Sends a message as html, without interpreting it as markdown'), runFn: function(roomId, messages) { - return success(ContentHelpers.makeHtmlMessage(messages, messages)); + return successSync(ContentHelpers.makeHtmlMessage(messages, messages)); }, category: CommandCategories.messages, }), @@ -978,7 +982,7 @@ export const Commands = [ args: '', runFn: function(roomId, args) { if (!args) return reject(this.getUserId()); - return success(ContentHelpers.makeHtmlMessage(args, textToHtmlRainbow(args))); + return successSync(ContentHelpers.makeHtmlMessage(args, textToHtmlRainbow(args))); }, category: CommandCategories.messages, }), @@ -988,7 +992,7 @@ export const Commands = [ args: '', runFn: function(roomId, args) { if (!args) return reject(this.getUserId()); - return success(ContentHelpers.makeHtmlEmote(args, textToHtmlRainbow(args))); + return successSync(ContentHelpers.makeHtmlEmote(args, textToHtmlRainbow(args))); }, category: CommandCategories.messages, }), From 9e2ab0d432d5ef7facae1ecccdf25dd71b0baeca Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Thu, 17 Jun 2021 07:35:40 -0400 Subject: [PATCH 0437/1270] Fix import whitespace in TextForEvent Signed-off-by: Robin Townsend --- src/TextForEvent.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts index 652a1d6e54..5275ff0a63 100644 --- a/src/TextForEvent.ts +++ b/src/TextForEvent.ts @@ -13,15 +13,15 @@ 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 {MatrixEvent} from "matrix-js-sdk/src/models/event"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; -import {MatrixClientPeg} from './MatrixClientPeg'; +import { MatrixClientPeg } from './MatrixClientPeg'; import { _t } from './languageHandler'; import * as Roles from './Roles'; -import {isValid3pidInvite} from "./RoomInvite"; +import { isValid3pidInvite } from "./RoomInvite"; import SettingsStore from "./settings/SettingsStore"; -import {ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES} from "./mjolnir/BanList"; -import {WIDGET_LAYOUT_EVENT_TYPE} from "./stores/widgets/WidgetLayoutStore"; +import { ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES } from "./mjolnir/BanList"; +import { WIDGET_LAYOUT_EVENT_TYPE } from "./stores/widgets/WidgetLayoutStore"; // 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 From f929d2ee5f59d158a644609bec18147580753f65 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Jun 2021 14:06:03 +0100 Subject: [PATCH 0438/1270] Typescript fixes due to MatrixEvent being TSified --- src/Avatar.ts | 22 ++++-- src/autocomplete/UserProvider.tsx | 2 +- src/components/views/dialogs/InviteDialog.tsx | 16 ++-- .../views/right_panel/EncryptionInfo.tsx | 9 ++- src/components/views/right_panel/UserInfo.tsx | 73 ++++++++++--------- .../views/right_panel/VerificationPanel.tsx | 13 ++-- .../payloads/SetRightPanelPhasePayload.ts | 3 +- 7 files changed, 78 insertions(+), 60 deletions(-) diff --git a/src/Avatar.ts b/src/Avatar.ts index a6499c688e..8ea0b0c9fa 100644 --- a/src/Avatar.ts +++ b/src/Avatar.ts @@ -14,18 +14,23 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {RoomMember} from "matrix-js-sdk/src/models/room-member"; -import {User} from "matrix-js-sdk/src/models/user"; -import {Room} from "matrix-js-sdk/src/models/room"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import { User } from "matrix-js-sdk/src/models/user"; +import { Room } from "matrix-js-sdk/src/models/room"; import DMRoomMap from './utils/DMRoomMap'; -import {mediaFromMxc} from "./customisations/Media"; +import { mediaFromMxc } from "./customisations/Media"; import SettingsStore from "./settings/SettingsStore"; export type ResizeMethod = "crop" | "scale"; // Not to be used for BaseAvatar urls as that has similar default avatar fallback already -export function avatarUrlForMember(member: RoomMember, width: number, height: number, resizeMethod: ResizeMethod) { +export function avatarUrlForMember( + member: RoomMember, + width: number, + height: number, + resizeMethod: ResizeMethod, +): string { let url: string; if (member?.getMxcAvatarUrl()) { url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod); @@ -39,7 +44,12 @@ export function avatarUrlForMember(member: RoomMember, width: number, height: nu return url; } -export function avatarUrlForUser(user: User, width: number, height: number, resizeMethod?: ResizeMethod) { +export function avatarUrlForUser( + user: Pick, + width: number, + height: number, + resizeMethod?: ResizeMethod, +): string | null { if (!user.avatarUrl) return null; return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(width, height, resizeMethod); } diff --git a/src/autocomplete/UserProvider.tsx b/src/autocomplete/UserProvider.tsx index 3cf43d0b84..f3f79cb33b 100644 --- a/src/autocomplete/UserProvider.tsx +++ b/src/autocomplete/UserProvider.tsx @@ -28,7 +28,7 @@ import {MatrixClientPeg} from '../MatrixClientPeg'; import MatrixEvent from "matrix-js-sdk/src/models/event"; import Room from "matrix-js-sdk/src/models/room"; -import RoomMember from "matrix-js-sdk/src/models/room-member"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import RoomState from "matrix-js-sdk/src/models/room-state"; import EventTimeline from "matrix-js-sdk/src/models/event-timeline"; import {makeUserPermalink} from "../utils/permalinks/Permalinks"; diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 778744b783..ffca9a88a7 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -153,8 +153,8 @@ class ThreepidMember extends Member { } interface IDMUserTileProps { - member: RoomMember; - onRemove(member: RoomMember): void; + member: Member; + onRemove(member: Member): void; } class DMUserTile extends React.PureComponent { @@ -168,7 +168,7 @@ class DMUserTile extends React.PureComponent { render() { const avatarSize = 20; - const avatar = this.props.member.isEmail + const avatar = (this.props.member as ThreepidMember).isEmail ? { } interface IDMRoomTileProps { - member: RoomMember; + member: Member; lastActiveTs: number; - onToggle(member: RoomMember): void; + onToggle(member: Member): void; highlightWord: string; isSelected: boolean; } @@ -270,7 +270,7 @@ class DMRoomTile extends React.PureComponent { } const avatarSize = 36; - const avatar = this.props.member.isEmail + const avatar = (this.props.member as ThreepidMember).isEmail ? @@ -298,7 +298,7 @@ class DMRoomTile extends React.PureComponent { ); - const caption = this.props.member.isEmail + const caption = (this.props.member as ThreepidMember).isEmail ? _t("Invite by email") : this.highlightName(this.props.member.userId); @@ -334,7 +334,7 @@ interface IInviteDialogProps { } interface IInviteDialogState { - targets: RoomMember[]; // array of Member objects (see interface above) + targets: Member[]; // array of Member objects (see interface above) filterText: string; recents: { user: Member, userId: string }[]; numRecentsShown: number; diff --git a/src/components/views/right_panel/EncryptionInfo.tsx b/src/components/views/right_panel/EncryptionInfo.tsx index aa51965ac6..db59a88967 100644 --- a/src/components/views/right_panel/EncryptionInfo.tsx +++ b/src/components/views/right_panel/EncryptionInfo.tsx @@ -17,8 +17,9 @@ limitations under the License. import React from "react"; import * as sdk from "../../../index"; -import {_t} from "../../../languageHandler"; -import {RoomMember} from "matrix-js-sdk/src/models/room-member"; +import { _t } from "../../../languageHandler"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import { User } from "matrix-js-sdk/src/models/user"; export const PendingActionSpinner = ({text}) => { const Spinner = sdk.getComponent('elements.Spinner'); @@ -31,7 +32,7 @@ export const PendingActionSpinner = ({text}) => { interface IProps { waitingForOtherParty: boolean; waitingForNetwork: boolean; - member: RoomMember; + member: RoomMember | User; onStartVerification: () => Promise; isRoomEncrypted: boolean; inDialog: boolean; @@ -55,7 +56,7 @@ const EncryptionInfo: React.FC = ({ text = _t("Accept on your other login…"); } else { text = _t("Waiting for %(displayName)s to accept…", { - displayName: member.displayName || member.name || member.userId, + displayName: (member as User).displayName || (member as RoomMember).name || member.userId, }); } } else { diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index d6c97f9cf2..e280c209f5 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -146,7 +146,7 @@ async function openDMForUser(matrixClient: MatrixClient, userId: string) { type SetUpdating = (updating: boolean) => void; -function useHasCrossSigningKeys(cli: MatrixClient, member: RoomMember, canVerify: boolean, setUpdating: SetUpdating) { +function useHasCrossSigningKeys(cli: MatrixClient, member: User, canVerify: boolean, setUpdating: SetUpdating) { return useAsyncMemo(async () => { if (!canVerify) { return undefined; @@ -971,7 +971,7 @@ interface IRoomPermissions { canInvite: boolean; } -function useRoomPermissions(cli: MatrixClient, room: Room, user: User): IRoomPermissions { +function useRoomPermissions(cli: MatrixClient, room: Room, user: RoomMember): IRoomPermissions { const [roomPermissions, setRoomPermissions] = useState({ // modifyLevelMax is the max PL we can set this user to, typically min(their PL, our PL) && canSetPL modifyLevelMax: -1, @@ -1028,7 +1028,7 @@ function useRoomPermissions(cli: MatrixClient, room: Room, user: User): IRoomPer } const PowerLevelSection: React.FC<{ - user: User; + user: RoomMember; room: Room; roomPermissions: IRoomPermissions; powerLevels: IPowerLevelsContent; @@ -1037,7 +1037,7 @@ const PowerLevelSection: React.FC<{ return (); } else { const powerLevelUsersDefault = powerLevels.users_default || 0; - const powerLevel = parseInt(user.powerLevel, 10); + const powerLevel = user.powerLevel; const role = textualPowerLevel(powerLevel, powerLevelUsersDefault); return (
    @@ -1048,13 +1048,13 @@ const PowerLevelSection: React.FC<{ }; const PowerLevelEditor: React.FC<{ - user: User; + user: RoomMember; room: Room; roomPermissions: IRoomPermissions; }> = ({user, room, roomPermissions}) => { const cli = useContext(MatrixClientContext); - const [selectedPowerLevel, setSelectedPowerLevel] = useState(parseInt(user.powerLevel, 10)); + const [selectedPowerLevel, setSelectedPowerLevel] = useState(user.powerLevel); const onPowerChange = useCallback(async (powerLevelStr: string) => { const powerLevel = parseInt(powerLevelStr, 10); setSelectedPowerLevel(powerLevel); @@ -1231,7 +1231,7 @@ const BasicUserInfo: React.FC<{ setPendingUpdateCount(pendingUpdateCount - 1); }, [pendingUpdateCount]); - const roomPermissions = useRoomPermissions(cli, room, member); + const roomPermissions = useRoomPermissions(cli, room, member as RoomMember); const onSynapseDeactivate = useCallback(async () => { const {finished} = Modal.createTrackedDialog('Synapse User Deactivation', '', QuestionDialog, { @@ -1275,12 +1275,26 @@ const BasicUserInfo: React.FC<{ ); } + let memberDetails; let adminToolsContainer; - if (room && member.roomId) { + if (room && (member as RoomMember).roomId) { + // hide the Roles section for DMs as it doesn't make sense there + if (!DMRoomMap.shared().getUserIdForRoomId((member as RoomMember).roomId)) { + memberDetails =
    +

    { _t("Role") }

    + +
    ; + } + adminToolsContainer = ( @@ -1309,20 +1323,6 @@ const BasicUserInfo: React.FC<{ spinner = ; } - let memberDetails; - // hide the Roles section for DMs as it doesn't make sense there - if (room && member.roomId && !DMRoomMap.shared().getUserIdForRoomId(member.roomId)) { - memberDetails =
    -

    { _t("Role") }

    - -
    ; - } - // only display the devices list if our client supports E2E const cryptoEnabled = cli.isCryptoEnabled(); @@ -1349,8 +1349,7 @@ const BasicUserInfo: React.FC<{ const setUpdating = (updating) => { setPendingUpdateCount(count => count + (updating ? 1 : -1)); }; - const hasCrossSigningKeys = - useHasCrossSigningKeys(cli, member, canVerify, setUpdating ); + const hasCrossSigningKeys = useHasCrossSigningKeys(cli, member as User, canVerify, setUpdating); const showDeviceListSpinner = devices === undefined; if (canVerify) { @@ -1359,9 +1358,9 @@ const BasicUserInfo: React.FC<{ verifyButton = ( { if (hasCrossSigningKeys) { - verifyUser(member); + verifyUser(member as User); } else { - legacyVerifyUser(member); + legacyVerifyUser(member as User); } }}> {_t("Verify")} @@ -1409,7 +1408,7 @@ const BasicUserInfo: React.FC<{ @@ -1428,13 +1427,15 @@ const UserInfoHeader: React.FC<{ const cli = useContext(MatrixClientContext); const onMemberAvatarClick = useCallback(() => { - const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl; + const avatarUrl = (member as RoomMember).getMxcAvatarUrl + ? (member as RoomMember).getMxcAvatarUrl() + : (member as User).avatarUrl; if (!avatarUrl) return; const httpUrl = mediaFromMxc(avatarUrl).srcHttp; const params = { src: httpUrl, - name: member.name, + name: (member as RoomMember).name || (member as User).displayName, }; Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true); @@ -1446,13 +1447,13 @@ const UserInfoHeader: React.FC<{
    + urls={(member as User).avatarUrl ? [(member as User).avatarUrl] : undefined} />
    @@ -1469,7 +1470,11 @@ const UserInfoHeader: React.FC<{ presenceCurrentlyActive = member.user.currentlyActive; if (SettingsStore.getValue("feature_custom_status")) { - statusMessage = member.user._unstable_statusMessage; + if ((member as RoomMember).user) { + statusMessage = member.user.unstable_statusMessage; + } else { + statusMessage = (member as unknown as User).unstable_statusMessage; + } } } @@ -1500,7 +1505,7 @@ const UserInfoHeader: React.FC<{ e2eIcon = ; } - const displayName = member.rawDisplayName || member.displayname; + const displayName = (member as RoomMember).rawDisplayName || (member as GroupMember).displayname; return { avatarElement } diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx index ac01c953b9..edfe0e3483 100644 --- a/src/components/views/right_panel/VerificationPanel.tsx +++ b/src/components/views/right_panel/VerificationPanel.tsx @@ -22,6 +22,7 @@ import {verificationMethods} from 'matrix-js-sdk/src/crypto'; import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode"; import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import {RoomMember} from "matrix-js-sdk/src/models/room-member"; +import { User } from "matrix-js-sdk/src/models/user"; import {ReciprocateQRCode} from "matrix-js-sdk/src/crypto/verification/QRCode"; import {SAS} from "matrix-js-sdk/src/crypto/verification/SAS"; @@ -51,7 +52,7 @@ enum VerificationPhase { interface IProps { layout: string; request: VerificationRequest; - member: RoomMember; + member: RoomMember | User; phase: VerificationPhase; onClose: () => void; isRoomEncrypted: boolean; @@ -134,7 +135,7 @@ export default class VerificationPanel extends React.PureComponent

    {_t("Verify by scanning")}

    {_t("Ask %(displayName)s to scan your code:", { - displayName: member.displayName || member.name || member.userId, + displayName: (member as User).displayName || (member as RoomMember).name || member.userId, })}

    @@ -205,7 +206,7 @@ export default class VerificationPanel extends React.PureComponent Date: Thu, 17 Jun 2021 14:11:44 +0100 Subject: [PATCH 0439/1270] Add new layout switcher UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Quirin Götz --- .../tabs/user/AppearanceUserSettingsTab.tsx | 110 ++++++++++++++++-- src/settings/Layout.ts | 4 +- src/settings/Settings.tsx | 8 ++ .../NewLayoutSwitcherController.ts | 26 +++++ 4 files changed, 137 insertions(+), 11 deletions(-) create mode 100644 src/settings/controllers/NewLayoutSwitcherController.ts diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 9e27ed968e..bc31f750c3 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -37,6 +37,8 @@ import StyledRadioGroup from "../../../elements/StyledRadioGroup"; import { SettingLevel } from "../../../../../settings/SettingLevel"; import { UIFeature } from "../../../../../settings/UIFeature"; import { Layout } from "../../../../../settings/Layout"; +import classNames from 'classnames'; +import StyledRadioButton from '../../../elements/StyledRadioButton'; import { replaceableComponent } from "../../../../../utils/replaceableComponent"; import { compare } from "../../../../../utils/strings"; @@ -235,6 +237,19 @@ export default class AppearanceUserSettingsTab extends React.Component): void => { + let layout; + switch (e.target.value) { + case "irc": layout = Layout.IRC; break; + case "group": layout = Layout.Group; break; + case "bubble": layout = Layout.Bubble; break; + } + + this.setState({ layout: layout }); + + SettingsStore.setValue("layout", null, SettingLevel.DEVICE, layout); + }; + private onIRCLayoutChange = (enabled: boolean) => { if (enabled) { this.setState({layout: Layout.IRC}); @@ -367,6 +382,77 @@ export default class AppearanceUserSettingsTab extends React.Component; } + private renderLayoutSection = () => { + return
    + { _t("Message layout") } + +
    +
    + + + { "IRC" } + +
    +
    +
    + + + {_t("Modern")} + +
    +
    +
    + + + {_t("Message bubbles")} + +
    +
    +
    ; + } + private renderAdvancedSection() { if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null; @@ -390,14 +476,17 @@ export default class AppearanceUserSettingsTab extends React.Component - this.onIRCLayoutChange(ev.target.checked)} - > - {_t("Enable experimental, compact IRC style layout")} - + + { !SettingsStore.getValue("feature_new_layout_switcher") ? + this.onIRCLayoutChange(ev.target.checked)} + > + {_t("Enable experimental, compact IRC style layout")} + : null + } {_t("Appearance Settings only affect this %(brand)s session.", { brand })}
    - {this.renderThemeSection()} - {this.renderFontSection()} - {this.renderAdvancedSection()} + { this.renderThemeSection() } + { SettingsStore.getValue("feature_new_layout_switcher") ? this.renderLayoutSection() : null } + { this.renderFontSection() } + { this.renderAdvancedSection() }
    ); } diff --git a/src/settings/Layout.ts b/src/settings/Layout.ts index 3a42b2b510..d4e1f06c0a 100644 --- a/src/settings/Layout.ts +++ b/src/settings/Layout.ts @@ -1,5 +1,6 @@ /* Copyright 2021 Šimon Brandner +Copyright 2021 Quirin Götz Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -19,7 +20,8 @@ import PropTypes from 'prop-types'; /* TODO: This should be later reworked into something more generic */ export enum Layout { IRC = "irc", - Group = "group" + Group = "group", + Bubble = "bubble", } /* We need this because multiple components are still using JavaScript */ diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 155d039572..87edf886e0 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -41,6 +41,7 @@ import { Layout } from "./Layout"; import ReducedMotionController from './controllers/ReducedMotionController'; import IncompatibleController from "./controllers/IncompatibleController"; import SdkConfig from "../SdkConfig"; +import NewLayoutSwitcherController from './controllers/NewLayoutSwitcherController'; // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times const LEVELS_ROOM_SETTINGS = [ @@ -285,6 +286,13 @@ export const SETTINGS: {[setting: string]: ISetting} = { displayName: _td("Show info about bridges in room settings"), default: false, }, + "feature_new_layout_switcher": { + isFeature: true, + supportedLevels: LEVELS_FEATURE, + displayName: _td("Explore new ways switching layouts (including a new bubble layout)"), + default: false, + controller: new NewLayoutSwitcherController(), + }, "RoomList.backgroundImage": { supportedLevels: LEVELS_ACCOUNT_SETTINGS, default: null, diff --git a/src/settings/controllers/NewLayoutSwitcherController.ts b/src/settings/controllers/NewLayoutSwitcherController.ts new file mode 100644 index 0000000000..b1d6cac55e --- /dev/null +++ b/src/settings/controllers/NewLayoutSwitcherController.ts @@ -0,0 +1,26 @@ +/* +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 SettingController from "./SettingController"; +import { SettingLevel } from "../SettingLevel"; +import SettingsStore from "../SettingsStore"; +import { Layout } from "../Layout"; + +export default class NewLayoutSwitcherController extends SettingController { + public onChange(level: SettingLevel, roomId: string, newValue: any) { + // On disabling switch back to Layout.Group if Layout.Bubble + if (!newValue && SettingsStore.getValue("layout") == Layout.Bubble) { + SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Group); + } + } +} From 02e72d8b042883f42a14e72319d1e21c2fa03e75 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Jun 2021 14:24:53 +0100 Subject: [PATCH 0440/1270] Fix more type definitions --- src/autocomplete/UserProvider.tsx | 18 +++++++++--------- .../views/dialogs/DevtoolsDialog.tsx | 2 +- .../views/elements/MemberEventListSummary.tsx | 6 +++--- .../views/messages/SenderProfile.tsx | 6 +++--- src/components/views/rooms/EventTile.tsx | 2 +- .../settings/tabs/room/BridgeSettingsTab.tsx | 2 +- src/indexing/EventIndex.ts | 2 +- src/stores/WidgetEchoStore.ts | 4 ++-- src/stores/widgets/StopGapWidget.ts | 4 ++-- src/stores/widgets/StopGapWidgetDriver.ts | 6 ++---- src/utils/DMRoomMap.ts | 13 +++++++------ 11 files changed, 32 insertions(+), 33 deletions(-) diff --git a/src/autocomplete/UserProvider.tsx b/src/autocomplete/UserProvider.tsx index f3f79cb33b..687b477133 100644 --- a/src/autocomplete/UserProvider.tsx +++ b/src/autocomplete/UserProvider.tsx @@ -20,19 +20,19 @@ limitations under the License. import React from 'react'; import { _t } from '../languageHandler'; import AutocompleteProvider from './AutocompleteProvider'; -import {PillCompletion} from './Components'; +import { PillCompletion } from './Components'; import * as sdk from '../index'; import QueryMatcher from './QueryMatcher'; -import {sortBy} from 'lodash'; -import {MatrixClientPeg} from '../MatrixClientPeg'; +import { sortBy } from 'lodash'; +import { MatrixClientPeg } from '../MatrixClientPeg'; -import MatrixEvent from "matrix-js-sdk/src/models/event"; -import Room from "matrix-js-sdk/src/models/room"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { Room } from "matrix-js-sdk/src/models/room"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; -import RoomState from "matrix-js-sdk/src/models/room-state"; -import EventTimeline from "matrix-js-sdk/src/models/event-timeline"; -import {makeUserPermalink} from "../utils/permalinks/Permalinks"; -import {ICompletion, ISelectionRange} from "./Autocompleter"; +import { RoomState } from "matrix-js-sdk/src/models/room-state"; +import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline"; +import { makeUserPermalink } from "../utils/permalinks/Permalinks"; +import { ICompletion, ISelectionRange } from "./Autocompleter"; const USER_REGEX = /\B@\S*/g; diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx index fdbf6a36fc..2690eb67d7 100644 --- a/src/components/views/dialogs/DevtoolsDialog.tsx +++ b/src/components/views/dialogs/DevtoolsDialog.tsx @@ -525,11 +525,11 @@ class RoomStateExplorer extends React.PureComponent { diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx index 0290ef6d83..f10884ce9d 100644 --- a/src/components/views/elements/MemberEventListSummary.tsx +++ b/src/components/views/elements/MemberEventListSummary.tsx @@ -24,7 +24,7 @@ import { _t } from '../../../languageHandler'; import { formatCommaSeparatedList } from '../../../utils/FormattingUtils'; import { isValid3pidInvite } from "../../../RoomInvite"; import EventListSummary from "./EventListSummary"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; interface IProps { // An array of member events to summarise @@ -303,7 +303,7 @@ export default class MemberEventListSummary extends React.Component { return res; } - private static getTransitionSequence(events: MatrixEvent[]) { + private static getTransitionSequence(events: IUserEvents[]) { return events.map(MemberEventListSummary.getTransition); } @@ -315,7 +315,7 @@ export default class MemberEventListSummary extends React.Component { * @returns {string?} the transition type given to this event. This defaults to `null` * if a transition is not recognised. */ - private static getTransition(e: MatrixEvent): TransitionType { + private static getTransition(e: IUserEvents): TransitionType { if (e.mxEvent.getType() === 'm.room.third_party_invite') { // Handle 3pid invites the same as invites so they get bundled together if (!isValid3pidInvite(e.mxEvent)) { diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx index 805f842fbc..883b2bd8a7 100644 --- a/src/components/views/messages/SenderProfile.tsx +++ b/src/components/views/messages/SenderProfile.tsx @@ -17,10 +17,10 @@ import React from 'react'; import Flair from '../elements/Flair.js'; import FlairStore from '../../../stores/FlairStore'; -import {getUserNameColorClass} from '../../../utils/FormattingUtils'; +import { getUserNameColorClass } from '../../../utils/FormattingUtils'; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; -import MatrixEvent from "matrix-js-sdk/src/models/event"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; interface IProps { mxEvent: MatrixEvent; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 85b9cac2c4..8add7ae3b5 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -376,7 +376,7 @@ export default class EventTile extends React.Component { EventType.RoomMessage, EventType.RoomMessageEncrypted, ]; - if (!simpleSendableEvents.includes(this.props.mxEvent.getType())) return false; + if (!simpleSendableEvents.includes(this.props.mxEvent.getType() as EventType)) return false; // Default case return true; diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx b/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx index 8d886a191e..428c10b338 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx @@ -44,7 +44,7 @@ export default class BridgeSettingsTab extends React.Component { return ; } - static getBridgeStateEvents(roomId: string) { + static getBridgeStateEvents(roomId: string): MatrixEvent[] { const client = MatrixClientPeg.get(); const roomState = client.getRoom(roomId).currentState; diff --git a/src/indexing/EventIndex.ts b/src/indexing/EventIndex.ts index b6289969bd..c36f96f368 100644 --- a/src/indexing/EventIndex.ts +++ b/src/indexing/EventIndex.ts @@ -300,7 +300,7 @@ export default class EventIndex extends EventEmitter { } private eventToJson(ev: MatrixEvent) { - const jsonEvent = ev.toJSON(); + const jsonEvent: any = ev.toJSON(); const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent; if (ev.isEncrypted()) { diff --git a/src/stores/WidgetEchoStore.ts b/src/stores/WidgetEchoStore.ts index 09120d6108..0b0be50541 100644 --- a/src/stores/WidgetEchoStore.ts +++ b/src/stores/WidgetEchoStore.ts @@ -16,8 +16,8 @@ limitations under the License. import EventEmitter from 'events'; import { IWidget } from 'matrix-widget-api'; -import MatrixEvent from "matrix-js-sdk/src/models/event"; -import {WidgetType} from "../widgets/WidgetType"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { WidgetType } from "../widgets/WidgetType"; /** * Acts as a place to get & set widget state, storing local echo state and diff --git a/src/stores/widgets/StopGapWidget.ts b/src/stores/widgets/StopGapWidget.ts index 397d637125..6dcaf7abd7 100644 --- a/src/stores/widgets/StopGapWidget.ts +++ b/src/stores/widgets/StopGapWidget.ts @@ -51,7 +51,7 @@ import ThemeWatcher from "../../settings/watchers/ThemeWatcher"; import {getCustomTheme} from "../../theme"; import CountlyAnalytics from "../../CountlyAnalytics"; import { ElementWidgetCapabilities } from "./ElementWidgetCapabilities"; -import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { MatrixEvent, IEvent } from "matrix-js-sdk/src/models/event"; import { ELEMENT_CLIENT_ID } from "../../identifiers"; import { getUserLanguage } from "../../languageHandler"; @@ -415,7 +415,7 @@ export class StopGapWidget extends EventEmitter { private feedEvent(ev: MatrixEvent) { if (!this.messaging) return; - const raw = ev.event; + const raw = ev.event as IEvent; this.messaging.feedEvent(raw).catch(e => { console.error("Error sending event to widget: ", e); }); diff --git a/src/stores/widgets/StopGapWidgetDriver.ts b/src/stores/widgets/StopGapWidgetDriver.ts index 25e81c47a2..9d477a38bf 100644 --- a/src/stores/widgets/StopGapWidgetDriver.ts +++ b/src/stores/widgets/StopGapWidgetDriver.ts @@ -145,7 +145,7 @@ export class StopGapWidgetDriver extends WidgetDriver { return {roomId, eventId: r.event_id}; } - public async readRoomEvents(eventType: string, msgtype: string | undefined, limit: number): Promise { + public async readRoomEvents(eventType: string, msgtype: string | undefined, limit: number): Promise { limit = limit > 0 ? Math.min(limit, 25) : 25; // arbitrary choice const client = MatrixClientPeg.get(); @@ -167,9 +167,7 @@ export class StopGapWidgetDriver extends WidgetDriver { return results.map(e => e.event); } - public async readStateEvents( - eventType: string, stateKey: string | undefined, limit: number, - ): Promise { + public async readStateEvents(eventType: string, stateKey: string | undefined, limit: number): Promise { limit = limit > 0 ? Math.min(limit, 100) : 100; // arbitrary choice const client = MatrixClientPeg.get(); diff --git a/src/utils/DMRoomMap.ts b/src/utils/DMRoomMap.ts index b166674043..9214d22036 100644 --- a/src/utils/DMRoomMap.ts +++ b/src/utils/DMRoomMap.ts @@ -14,11 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {MatrixClientPeg} from '../MatrixClientPeg'; -import {uniq} from "lodash"; -import {Room} from "matrix-js-sdk/src/models/room"; -import {Event} from "matrix-js-sdk/src/models/event"; -import {MatrixClient} from "matrix-js-sdk/src/client"; +import { uniq } from "lodash"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { MatrixClient } from "matrix-js-sdk/src/client"; + +import { MatrixClientPeg } from '../MatrixClientPeg'; /** * Class that takes a Matrix Client and flips the m.direct map @@ -35,7 +36,7 @@ export default class DMRoomMap { private roomToUser: {[key: string]: string} = null; private userToRooms: {[key: string]: string[]} = null; private hasSentOutPatchDirectAccountDataPatch: boolean; - private mDirectEvent: Event; + private mDirectEvent: MatrixEvent; constructor(matrixClient) { this.matrixClient = matrixClient; From 9f83846ecc78c3682f07bc88e25726e814ac821d Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 17 Jun 2021 14:35:33 +0100 Subject: [PATCH 0441/1270] Remove redundant word from GitHub Actions workflow --- .github/workflows/develop.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml index 4e8cdff139..6410bd28fa 100644 --- a/.github/workflows/develop.yml +++ b/.github/workflows/develop.yml @@ -1,4 +1,4 @@ -name: Develop jobs +name: Develop on: push: branches: [develop] From 3e38d92fa4be9b3bd549376ba14e309d47ef1916 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Jun 2021 14:49:27 +0100 Subject: [PATCH 0442/1270] Fix up some more type defs --- src/components/structures/RoomView.tsx | 3 ++- src/components/views/messages/MVoiceMessageBody.tsx | 3 ++- .../views/settings/tabs/room/BridgeSettingsTab.tsx | 5 +---- src/hooks/useAccountData.ts | 6 +++--- src/stores/widgets/StopGapWidgetDriver.ts | 2 +- src/utils/DMRoomMap.ts | 2 +- src/utils/WidgetUtils.ts | 2 +- 7 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index c9645515bf..1e3adcb518 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -25,6 +25,7 @@ import React, { createRef } from 'react'; import classNames from 'classnames'; import { Room } from "matrix-js-sdk/src/models/room"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { SearchResult } from "matrix-js-sdk/src/models/search-result"; import { EventSubscription } from "fbemitter"; import shouldHideEvent from '../../shouldHideEvent'; @@ -142,7 +143,7 @@ export interface IState { searchResults?: XOR<{}, { count: number; highlights: string[]; - results: MatrixEvent[]; + results: SearchResult[]; next_batch: string; // eslint-disable-line camelcase }>; searchHighlights?: string[]; diff --git a/src/components/views/messages/MVoiceMessageBody.tsx b/src/components/views/messages/MVoiceMessageBody.tsx index d65de7697a..a7e3b1cd86 100644 --- a/src/components/views/messages/MVoiceMessageBody.tsx +++ b/src/components/views/messages/MVoiceMessageBody.tsx @@ -24,6 +24,7 @@ import {_t} from "../../../languageHandler"; import {mediaFromContent} from "../../../customisations/Media"; import {decryptFile} from "../../../utils/DecryptFile"; import RecordingPlayback from "../voice_messages/RecordingPlayback"; +import {IMediaEventContent} from "../../../customisations/models/IMediaEventContent"; interface IProps { mxEvent: MatrixEvent; @@ -45,7 +46,7 @@ export default class MVoiceMessageBody extends React.PureComponent { const client = MatrixClientPeg.get(); const roomState = client.getRoom(roomId).currentState; - return BRIDGE_EVENT_TYPES.map(typeName => { - const events = roomState.events.get(typeName); - return events ? Array.from(events.values()) : []; - }).flat(1); + return BRIDGE_EVENT_TYPES.map(typeName => roomState.getStateEvents(typeName)).flat(1); } render() { diff --git a/src/hooks/useAccountData.ts b/src/hooks/useAccountData.ts index fe71ed9ecd..0384b3bf77 100644 --- a/src/hooks/useAccountData.ts +++ b/src/hooks/useAccountData.ts @@ -21,11 +21,11 @@ import {Room} from "matrix-js-sdk/src/models/room"; import {useEventEmitter} from "./useEventEmitter"; -const tryGetContent = (ev?: MatrixEvent) => ev ? ev.getContent() : undefined; +const tryGetContent = (ev?: MatrixEvent) => ev ? ev.getContent() : undefined; // Hook to simplify listening to Matrix account data export const useAccountData = (cli: MatrixClient, eventType: string) => { - const [value, setValue] = useState(() => tryGetContent(cli.getAccountData(eventType))); + const [value, setValue] = useState(() => tryGetContent(cli.getAccountData(eventType))); const handler = useCallback((event) => { if (event.getType() !== eventType) return; @@ -38,7 +38,7 @@ export const useAccountData = (cli: MatrixClient, eventType: strin // Hook to simplify listening to Matrix room account data export const useRoomAccountData = (room: Room, eventType: string) => { - const [value, setValue] = useState(() => tryGetContent(room.getAccountData(eventType))); + const [value, setValue] = useState(() => tryGetContent(room.getAccountData(eventType))); const handler = useCallback((event) => { if (event.getType() !== eventType) return; diff --git a/src/stores/widgets/StopGapWidgetDriver.ts b/src/stores/widgets/StopGapWidgetDriver.ts index 9d477a38bf..5218e4a0bc 100644 --- a/src/stores/widgets/StopGapWidgetDriver.ts +++ b/src/stores/widgets/StopGapWidgetDriver.ts @@ -176,7 +176,7 @@ export class StopGapWidgetDriver extends WidgetDriver { if (!client || !roomId || !room) throw new Error("Not in a room or not attached to a client"); const results: MatrixEvent[] = []; - const state = room.currentState.events.get(eventType); + const state: Map = room.currentState.events.get(eventType); if (state) { if (stateKey === "" || !!stateKey) { const forKey = state.get(stateKey); diff --git a/src/utils/DMRoomMap.ts b/src/utils/DMRoomMap.ts index 9214d22036..aceee1d0a5 100644 --- a/src/utils/DMRoomMap.ts +++ b/src/utils/DMRoomMap.ts @@ -36,7 +36,7 @@ export default class DMRoomMap { private roomToUser: {[key: string]: string} = null; private userToRooms: {[key: string]: string[]} = null; private hasSentOutPatchDirectAccountDataPatch: boolean; - private mDirectEvent: MatrixEvent; + private mDirectEvent: object; constructor(matrixClient) { this.matrixClient = matrixClient; diff --git a/src/utils/WidgetUtils.ts b/src/utils/WidgetUtils.ts index c67f3bad13..7ff0529363 100644 --- a/src/utils/WidgetUtils.ts +++ b/src/utils/WidgetUtils.ts @@ -392,7 +392,7 @@ export default class WidgetUtils { } const widgets = client.getAccountData('m.widgets'); if (!widgets) return; - const userWidgets: IWidgetEvent[] = widgets.getContent() || {}; + const userWidgets: Record = widgets.getContent() || {}; Object.entries(userWidgets).forEach(([key, widget]) => { if (widget.content && widget.content.type === "m.integration_manager") { delete userWidgets[key]; From e4250e254c7253dc1679b0e9ae84065a35fa6b61 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Thu, 17 Jun 2021 09:52:15 -0400 Subject: [PATCH 0443/1270] Propertly thread showHiddenEventsInTimeline through groupers --- src/components/structures/MessagePanel.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index b8d3f4f830..16563bd4e9 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -537,7 +537,7 @@ export default class MessagePanel extends React.Component { if (grouper) { if (grouper.shouldGroup(mxEv)) { - grouper.add(mxEv); + grouper.add(mxEv, this.context?.showHiddenEventsInTimeline); continue; } else { // not part of group, so get the group tiles, close the @@ -1167,10 +1167,10 @@ class MemberGrouper { return isMembershipChange(ev); } - add(ev) { + add(ev, showHiddenEvents) { if (ev.getType() === 'm.room.member') { // We can ignore any events that don't actually have a message to display - if (!hasText(ev, this.context?.showHiddenEventsInTimeline)) return; + if (!hasText(ev, showHiddenEvents)) return; } this.readMarker = this.readMarker || this.panel._readMarkerForEvent( ev.getId(), From ab3ccecc967208f7847669d3ba1678ea9f42ed9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 15:52:55 +0200 Subject: [PATCH 0444/1270] Use UIStore MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 730910e0e2..13c272bebb 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -27,6 +27,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import {replaceableComponent} from "../../../utils/replaceableComponent"; +import UIStore from '../../../stores/UIStore'; const PIP_VIEW_WIDTH = 336; const PIP_VIEW_HEIGHT = 232; @@ -118,7 +119,7 @@ export default class CallPreview extends React.Component { roomId, primaryCall: primaryCall, secondaryCall: secondaryCalls[0], - translationX: window.innerWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH, + translationX: UIStore.instance.windowWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH, translationY: DEFAULT_Y_OFFSET, moving: false, }; @@ -164,8 +165,8 @@ export default class CallPreview extends React.Component { let outTranslationY; // Avoid overflow on the x axis - if (inTranslationX + width >= window.innerWidth) { - outTranslationX = window.innerWidth - width; + if (inTranslationX + width >= UIStore.instance.windowWidth) { + outTranslationX = UIStore.instance.windowWidth - width; } else if (inTranslationX <= 0) { outTranslationX = 0; } else { @@ -173,8 +174,8 @@ export default class CallPreview extends React.Component { } // Avoid overflow on the y axis - if (inTranslationY + height >= window.innerHeight) { - outTranslationY = window.innerHeight - height; + if (inTranslationY + height >= UIStore.instance.windowHeight) { + outTranslationY = UIStore.instance.windowHeight - height; } else if (inTranslationY <= 0) { outTranslationY = 0; } else { From 7c6161d83ad60df8e332656ca0389ce90797ec3e Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 16 Jun 2021 18:00:06 +0100 Subject: [PATCH 0445/1270] Stop requesting null next replies from the server A recent change (47e007e08f9bedaf47cf59a63c9bd04219195d76) introduced a regression where we failed to check whether a reply thread has a next reply. This meant that we would end up sending `/context/undefined` requests to the server for every reply thread on every room view. Fixes https://github.com/vector-im/element-web/issues/17563 Regressed by https://github.com/matrix-org/matrix-react-sdk/pull/6079 --- src/components/views/elements/ReplyThread.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 81ed360b17..a9b24a306b 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -297,6 +297,7 @@ export default class ReplyThread extends React.Component { } async getEvent(eventId) { + if (!eventId) return null; const event = this.room.findEventById(eventId); if (event) return event; From 0367b5bcced808ce75e19f0a7669f3ab5b61524c Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 17 Jun 2021 08:45:09 +0100 Subject: [PATCH 0446/1270] remove stray bullet point in reply preview --- src/components/views/elements/ReplyThread.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 81ed360b17..0f6aef37eb 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -392,6 +392,7 @@ export default class ReplyThread extends React.Component { alwaysShowTimestamps={this.props.alwaysShowTimestamps} enableFlair={SettingsStore.getValue(UIFeature.Flair)} replacingEventId={ev.replacingEventId()} + as="div" />
    ; }); From 1597b2a971bb3e0194c4a8cf8bb5530923f17438 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 16 Jun 2021 10:01:23 +0100 Subject: [PATCH 0447/1270] Keep composer reply when scrolling away from a highlighted event --- src/components/structures/RoomView.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index fe90d2f873..c0ce6ba4c9 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -701,6 +701,7 @@ export default class RoomView extends React.Component { room_id: this.state.room.roomId, event_id: this.state.initialEventId, highlighted: false, + replyingToEvent: this.state.replyToEvent, }); } } From 2e73647a85b0717f911d3a138d2676767c75d703 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Jun 2021 15:18:52 +0100 Subject: [PATCH 0448/1270] Fix tests by updating private field names and spies --- src/Searching.js | 2 +- src/utils/DMRoomMap.ts | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/Searching.js b/src/Searching.js index 2b17aee054..596dd2f3d4 100644 --- a/src/Searching.js +++ b/src/Searching.js @@ -468,7 +468,7 @@ function restoreEncryptionInfo(searchResultSlice = []) { ev.event.curve25519Key, ev.event.ed25519Key, ); - ev._forwardingCurve25519KeyChain = ev.event.forwardingCurve25519KeyChain; + ev.forwardingCurve25519KeyChain = ev.event.forwardingCurve25519KeyChain; delete ev.event.curve25519Key; delete ev.event.ed25519Key; diff --git a/src/utils/DMRoomMap.ts b/src/utils/DMRoomMap.ts index aceee1d0a5..3e554f145d 100644 --- a/src/utils/DMRoomMap.ts +++ b/src/utils/DMRoomMap.ts @@ -16,7 +16,6 @@ limitations under the License. import { uniq } from "lodash"; import { Room } from "matrix-js-sdk/src/models/room"; -import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { MatrixClient } from "matrix-js-sdk/src/client"; import { MatrixClientPeg } from '../MatrixClientPeg'; @@ -31,15 +30,13 @@ import { MatrixClientPeg } from '../MatrixClientPeg'; export default class DMRoomMap { private static sharedInstance: DMRoomMap; - private matrixClient: MatrixClient; // TODO: convert these to maps private roomToUser: {[key: string]: string} = null; private userToRooms: {[key: string]: string[]} = null; private hasSentOutPatchDirectAccountDataPatch: boolean; private mDirectEvent: object; - constructor(matrixClient) { - this.matrixClient = matrixClient; + constructor(private readonly matrixClient: MatrixClient) { // see onAccountData this.hasSentOutPatchDirectAccountDataPatch = false; From 017e0ba40f118685faf1f8fd54fbbd73a1df7731 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Jun 2021 15:23:29 +0100 Subject: [PATCH 0449/1270] fix more private field accesses in tests --- test/DecryptionFailureTracker-test.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/test/DecryptionFailureTracker-test.js b/test/DecryptionFailureTracker-test.js index 7a6a42ef55..bc751ba44e 100644 --- a/test/DecryptionFailureTracker-test.js +++ b/test/DecryptionFailureTracker-test.js @@ -30,9 +30,7 @@ function createFailedDecryptionEvent() { const event = new MatrixEvent({ event_id: "event-id-" + Math.random().toString(16).slice(2), }); - event._setClearData( - event._badEncryptedMessage(":("), - ); + event.setClearData(event.badEncryptedMessage(":(")); return event; } @@ -67,7 +65,7 @@ describe('DecryptionFailureTracker', function() { tracker.eventDecrypted(decryptedEvent, err); // Indicate successful decryption: clear data can be anything where the msgtype is not m.bad.encrypted - decryptedEvent._setClearData({}); + decryptedEvent.setClearData({}); tracker.eventDecrypted(decryptedEvent, null); // Pretend "now" is Infinity From 7b6c3aec63e494e9a92bfaee6381ac3a04625154 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 16:33:00 +0200 Subject: [PATCH 0450/1270] Change some styling to better match the designs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 11 +++++++++-- src/components/views/messages/CallEvent.tsx | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 2e36daccfa..146bd0e883 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -21,7 +21,7 @@ limitations under the License. justify-content: space-between; background-color: $dark-panel-bg-color; - padding: 10px; + padding: 12px 16px 12px 12px; border-radius: 8px; margin: 10px auto; max-width: 75%; @@ -37,10 +37,17 @@ limitations under the License. flex-direction: column; margin-left: 10px; // To match mx_CallEvent + .mx_CallEvent_sender { + font-weight: 600; + font-size: 1.5rem; + line-height: 1.8rem; + } + .mx_CallEvent_type { font-weight: 400; color: gray; - line-height: $font-14px; + font-size: 1.2rem; + line-height: 1.5rem; } } } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 6139a2df6b..cff7a46931 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -170,7 +170,7 @@ export default class CallEvent extends React.Component { height={32} />
    -
    +
    { sender }
    From 02e655933088e06eafc821f6f8e4964639b78aee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 17:04:56 +0200 Subject: [PATCH 0451/1270] Set text color to secondary-fg-color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 146bd0e883..5168514110 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -56,6 +56,7 @@ limitations under the License. display: flex; flex-direction: row; align-items: center; + color: $secondary-fg-color; .mx_CallEvent_content_callBack { margin-left: 10px; // To match mx_callEvent From 7d90612371a31f699d879366262f84fd1082bd9b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Jun 2021 16:22:40 +0100 Subject: [PATCH 0452/1270] Iterate PR --- res/css/views/beta/_BetaCard.scss | 93 +++++++++++-------- src/components/views/beta/BetaCard.tsx | 49 +++++----- .../views/elements/SettingsFlag.tsx | 10 +- src/i18n/strings/en_EN.json | 8 +- src/settings/Settings.tsx | 11 ++- src/settings/SettingsStore.ts | 10 ++ 6 files changed, 107 insertions(+), 74 deletions(-) diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss index fd87b1c824..1a8241b65f 100644 --- a/res/css/views/beta/_BetaCard.scss +++ b/res/css/views/beta/_BetaCard.scss @@ -19,55 +19,68 @@ limitations under the License. padding: 24px; background-color: $settings-profile-placeholder-bg-color; border-radius: 8px; - display: flex; box-sizing: border-box; - > div { - .mx_BetaCard_title { - font-weight: $font-semi-bold; - font-size: $font-18px; - line-height: $font-22px; - color: $primary-fg-color; - margin: 4px 0 14px; + .mx_BetaCard_columns { + display: flex; - .mx_BetaCard_betaPill { - margin-left: 12px; + > div { + .mx_BetaCard_title { + font-weight: $font-semi-bold; + font-size: $font-18px; + line-height: $font-22px; + color: $primary-fg-color; + margin: 4px 0 14px; + + .mx_BetaCard_betaPill { + margin-left: 12px; + } + } + + .mx_BetaCard_caption { + font-size: $font-15px; + line-height: $font-20px; + color: $secondary-fg-color; + margin-bottom: 20px; + } + + .mx_BetaCard_buttons .mx_AccessibleButton { + display: block; + margin: 12px 0; + padding: 7px 40px; + width: auto; + } + + .mx_BetaCard_disclaimer { + font-size: $font-12px; + line-height: $font-15px; + color: $secondary-fg-color; + margin-top: 20px; } } - .mx_BetaCard_caption { - font-size: $font-15px; - line-height: $font-20px; - color: $secondary-fg-color; - margin-bottom: 20px; - } - - .mx_BetaCard_buttons .mx_AccessibleButton { - display: block; - margin: 12px 0; - padding: 7px 40px; - width: auto; - } - - .mx_BetaCard_disclaimer { - font-size: $font-12px; - line-height: $font-15px; - color: $secondary-fg-color; - margin-top: 20px; - } - - .mx_BetaCard_relatedSettings { - summary + .mx_SettingsFlag { - margin-top: 4px; - } + > img { + margin: auto 0 auto 20px; + width: 300px; + object-fit: contain; + height: 100%; } } - > img { - margin: auto 0 auto 20px; - width: 300px; - object-fit: contain; - height: 100%; + .mx_BetaCard_relatedSettings { + .mx_SettingsFlag { + margin: 16px 0 0; + font-size: $font-15px; + line-height: $font-24px; + color: $primary-fg-color; + + .mx_SettingsFlag_microcopy { + margin-top: 4px; + font-size: $font-12px; + line-height: $font-15px; + color: $secondary-fg-color; + } + } } } diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx index 56770c3385..aa4fe49f63 100644 --- a/src/components/views/beta/BetaCard.tsx +++ b/src/components/views/beta/BetaCard.tsx @@ -83,32 +83,33 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => { } return
    -
    -

    - { titleOverride || _t(title) } - -

    - { _t(caption) } -
    - { feedbackButton } - SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)} - kind={feedbackButton ? "primary_outline" : "primary"} - > - { value ? _t("Leave the beta") : _t("Join the beta") } - +
    +
    +

    + { titleOverride || _t(title) } + +

    + { _t(caption) } +
    + { feedbackButton } + SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)} + kind={feedbackButton ? "primary_outline" : "primary"} + > + { value ? _t("Leave the beta") : _t("Join the beta") } + +
    + { disclaimer &&
    + { disclaimer(value) } +
    }
    - { disclaimer &&
    - { disclaimer(value) } -
    } - { extraSettings &&
    - { _t("Experimental options") } - { extraSettings.map(key => ( - - )) } -
    } +
    - + { extraSettings &&
    + { extraSettings.map(key => ( + + )) } +
    }
    ; }; diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx index 4f885ab47d..24a21e1a33 100644 --- a/src/components/views/elements/SettingsFlag.tsx +++ b/src/components/views/elements/SettingsFlag.tsx @@ -77,9 +77,10 @@ export default class SettingsFlag extends React.Component { public render() { const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level); - let label = this.props.label; - if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level); - else label = _t(label); + const label = this.props.label + ? _t(this.props.label) + : SettingsStore.getDisplayName(this.props.name, this.props.level); + const description = SettingsStore.getDescription(this.props.name); if (this.props.useCheckbox) { return { disabled={this.props.disabled || !canChange} aria-label={label} /> + { description &&
    + { description } +
    }
    ); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 044e3a3079..179b58b617 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -793,9 +793,10 @@ "You can leave the beta any time from settings or tapping on a beta badge, like the one above.": "You can leave the beta any time from settings or tapping on a beta badge, like the one above.", "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.", "Your feedback will help make spaces better. The more detail you can go into, the better.": "Your feedback will help make spaces better. The more detail you can go into, the better.", - "Use an all rooms space instead of a home space.": "Use an all rooms space instead of a home space.", - "Show DMs for joined/invited members in the space.": "Show DMs for joined/invited members in the space.", - "Show notification badges for DMs in spaces.": "Show notification badges for DMs in spaces.", + "Show all rooms in Home": "Show all rooms in Home", + "Show people in spaces": "Show people in spaces", + "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.": "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.", + "Show notification badges for DMs in Spaces.": "Show notification badges for DMs in Spaces.", "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode", "Send and receive voice messages": "Send and receive voice messages", "Render LaTeX maths in messages": "Render LaTeX maths in messages", @@ -2510,7 +2511,6 @@ "Beta": "Beta", "Leave the beta": "Leave the beta", "Join the beta": "Join the beta", - "Experimental options": "Experimental options", "Avatar": "Avatar", "This room is public": "This room is public", "Away": "Away", diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index a291cd1fba..af026f4103 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -94,6 +94,9 @@ export interface ISetting { [level: SettingLevel]: string; }; + // Optional description which will be shown as microCopy under SettingsFlags + description?: string; + // The supported levels are required. Preferably, use the preset arrays // at the top of this file to define this rather than a custom array. supportedLevels?: SettingLevel[]; @@ -176,19 +179,21 @@ export const SETTINGS: {[setting: string]: ISetting} = { }, }, "feature_spaces.all_rooms": { - displayName: _td("Use an all rooms space instead of a home space."), + displayName: _td("Show all rooms in Home"), supportedLevels: LEVELS_FEATURE, default: true, controller: new ReloadOnChangeController(), }, "feature_spaces.space_member_dms": { - displayName: _td("Show DMs for joined/invited members in the space."), + displayName: _td("Show people in spaces"), + description: _td("If disabled, you can still add Direct Messages to Personal Spaces. " + + "If enabled, you'll automatically see everyone who is a member of the Space."), supportedLevels: LEVELS_FEATURE, default: true, controller: new ReloadOnChangeController(), }, "feature_spaces.space_dm_badges": { - displayName: _td("Show notification badges for DMs in spaces."), + displayName: _td("Show notification badges for DMs in Spaces."), supportedLevels: LEVELS_FEATURE, default: false, controller: new ReloadOnChangeController(), diff --git a/src/settings/SettingsStore.ts b/src/settings/SettingsStore.ts index e1e300e185..44f3d5d838 100644 --- a/src/settings/SettingsStore.ts +++ b/src/settings/SettingsStore.ts @@ -248,6 +248,16 @@ export default class SettingsStore { return _t(displayName as string); } + /** + * Gets the translated description for a given setting + * @param {string} settingName The setting to look up. + * @return {String} The description for the setting, or null if not found. + */ + public static getDescription(settingName: string) { + if (!SETTINGS[settingName]?.description) return null; + return _t(SETTINGS[settingName].description); + } + /** * Determines if a setting is also a feature. * @param {string} settingName The setting to look up. From 512c05465698f839b79da373effe86b56759638e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 17:55:18 +0200 Subject: [PATCH 0453/1270] Add call type icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 28 ++++++++++++++++++++- src/components/views/messages/CallEvent.tsx | 10 +++++++- 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 5168514110..b4e2c15dbd 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -45,9 +45,35 @@ limitations under the License. .mx_CallEvent_type { font-weight: 400; - color: gray; + color: $secondary-fg-color; font-size: 1.2rem; line-height: 1.5rem; + display: flex; + align-items: center; + + .mx_CallEvent_type_icon { + height: 13px; + width: 13px; + margin-right: 5px; + + &::before { + content: ''; + position: absolute; + height: 13px; + width: 13px; + background-color: $tertiary-fg-color; + mask-repeat: no-repeat; + mask-size: contain; + } + } + + .mx_CallEvent_type_icon_voice::before { + mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); + } + + .mx_CallEvent_type_icon_video::before { + mask-image: url('$(res)/img/element-icons/call/video-call.svg'); + } } } } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index cff7a46931..00b62e4482 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -23,6 +23,7 @@ import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../ import FormButton from '../elements/FormButton'; import { CallErrorCode, CallState } from 'matrix-js-sdk/src/webrtc/call'; import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip'; +import classNames from 'classnames'; interface IProps { mxEvent: MatrixEvent; @@ -158,8 +159,14 @@ export default class CallEvent extends React.Component { render() { const event = this.props.mxEvent; const sender = event.sender ? event.sender.name : event.getSender(); - const callType = this.props.callEventGrouper.isVoice ? _t("Voice call") : _t("Video call"); + const isVoice = this.props.callEventGrouper.isVoice; + const callType = isVoice ? _t("Voice call") : _t("Video call"); const content = this.renderContent(this.state.callState); + const callTypeIconClass = classNames({ + mx_CallEvent_type_icon: true, + mx_CallEvent_type_icon_voice: isVoice, + mx_CallEvent_type_icon_video: !isVoice, + }) return (
    @@ -174,6 +181,7 @@ export default class CallEvent extends React.Component { { sender }
    +
    { callType }
    From a781d6f1283f4558d8f65d1a776effbb41ae527d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 18:13:52 +0200 Subject: [PATCH 0454/1270] Adjust padding and line-height a bit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index b4e2c15dbd..d3405c7492 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -21,7 +21,7 @@ limitations under the License. justify-content: space-between; background-color: $dark-panel-bg-color; - padding: 12px 16px 12px 12px; + padding: 10px 16px 12px 10px; border-radius: 8px; margin: 10px auto; max-width: 75%; @@ -40,7 +40,7 @@ limitations under the License. .mx_CallEvent_sender { font-weight: 600; font-size: 1.5rem; - line-height: 1.8rem; + line-height: 1.9rem; } .mx_CallEvent_type { From 88ba24f36219a59e66efb85c187c1d615c54e120 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 18:34:58 +0200 Subject: [PATCH 0455/1270] Fix bugs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallContainer.scss | 4 ++-- res/css/views/voip/_VideoFeed.scss | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss index 8262075559..e51f20ff99 100644 --- a/res/css/views/voip/_CallContainer.scss +++ b/res/css/views/voip/_CallContainer.scss @@ -30,8 +30,8 @@ limitations under the License. pointer-events: initial; // restore pointer events so the user can leave/interact cursor: pointer; - .mx_CallView_video { - width: 350px; + .mx_VideoFeed_remote.mx_VideoFeed_voice { + min-height: 150px; } .mx_VideoFeed_local { diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index 7d85ac264e..4a3fbdf597 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -15,8 +15,6 @@ limitations under the License. */ .mx_VideoFeed_voice { - // We don't want to collide with the call controls that have 52px of height - padding-bottom: 52px; background-color: $inverted-bg-color; } From 1394e5b0a4a950cb8f2a17758b09fc72862493a2 Mon Sep 17 00:00:00 2001 From: Ayush PS Date: Fri, 18 Jun 2021 00:12:39 +0530 Subject: [PATCH 0456/1270] Updated changes for the tile Signed-off-by: Ayush PS --- res/css/views/rooms/_EventTile.scss | 5 ----- src/components/views/rooms/EventTile.tsx | 6 +++--- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index a6ccde93d3..5d1dd04383 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -130,11 +130,6 @@ $left-gutter: 64px; .mx_EventTile_msgOption { grid-column: 2; } - - .hidden { - // override the overriden padding for hidden events - padding-left: 64px !important; - } } .mx_EventTile_reply { diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 533aa6cfab..35ccefde1e 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -824,7 +824,7 @@ export default class EventTile extends React.Component { let tileHandler = getHandlerTile(this.props.mxEvent); // Info messages are basically information about commands processed on a room - const isBubbleMessage = eventType.startsWith("m.key.verification") || + let isBubbleMessage = eventType.startsWith("m.key.verification") || (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) || (eventType === EventType.RoomCreate) || (eventType === EventType.RoomEncryption) || @@ -840,6 +840,7 @@ export default class EventTile extends React.Component { // duplicate of the thing they are replacing). if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(this.props.mxEvent)) { tileHandler = "messages.ViewSourceEvent"; + isBubbleMessage = false; // Reuse info message avatar and sender profile styling isInfoMessage = true; } @@ -1135,8 +1136,7 @@ export default class EventTile extends React.Component { { ircTimestamp } { sender } { ircPadlock } -
    +
    { groupTimestamp } { groupPadlock } { thread } From a687391b98d638e69983e5d814bcb73bfe52a381 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 17 Jun 2021 14:21:01 -0600 Subject: [PATCH 0457/1270] Switch order --- src/components/views/messages/TextualBody.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 00e7d3d301..cb6a4f14b6 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -261,8 +261,8 @@ export default class TextualBody extends React.Component { //console.info("shouldComponentUpdate: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview); // exploit that events are immutable :) - return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() || - nextProps.mxEvent !== this.props.mxEvent || + return (nextProps.mxEvent !== this.props.mxEvent || + nextProps.mxEvent.getId() !== this.props.mxEvent.getId() || nextProps.highlights !== this.props.highlights || nextProps.replacingEventId !== this.props.replacingEventId || nextProps.highlightLink !== this.props.highlightLink || From 98e0200b4a17fc80b1865ae25bdfec80de0bc161 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 17 Jun 2021 14:21:50 -0600 Subject: [PATCH 0458/1270] Function name --- src/components/views/rooms/EventTile.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index d1b596a709..4dd8fff636 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -335,7 +335,7 @@ export default class EventTile extends React.Component { // The Relations model from the JS SDK for reactions to `mxEvent` reactions: this.getReactions(), - mxEvent: this.mxEvent.getSnapshotCopy(), // snapshot up front to verify it all works + mxEvent: this.mxEvent.toSnapshot(), // snapshot up front to verify it all works hover: false, }; @@ -497,7 +497,7 @@ export default class EventTile extends React.Component { // a second state update to re-render child components, which ultimately calls didUpdate // again, so we break that loop with a reference check first (faster than comparing events). if (this.state.mxEvent === prevState.mxEvent && !this.state?.mxEvent.isEquivalentTo(this.props.mxEvent)) { - this.setState({mxEvent: this.props.mxEvent.getSnapshotCopy()}); + this.setState({mxEvent: this.props.mxEvent.toSnapshot()}); } } From d22617c422ebabc88435bb8a8421b0b347d5e7c0 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 18 Jun 2021 12:44:15 +0100 Subject: [PATCH 0459/1270] More specific type definition and adhering to code style better --- src/components/structures/SpaceRoomView.tsx | 4 +- src/components/structures/UserMenu.tsx | 6 +-- .../structures/auth/Registration.tsx | 2 +- .../views/dialogs/BetaFeedbackDialog.tsx | 4 +- .../views/dialogs/ConfirmUserActionDialog.tsx | 6 --- .../views/dialogs/DeactivateAccountDialog.tsx | 2 +- .../views/dialogs/UserSettingsDialog.tsx | 46 +++++++++---------- .../security/CreateCrossSigningDialog.tsx | 6 +-- .../security/SetupEncryptionDialog.tsx | 10 ++-- src/components/views/right_panel/UserInfo.tsx | 4 +- .../views/spaces/SpaceCreateMenu.tsx | 4 +- src/stores/SetupEncryptionStore.ts | 40 ++++++++-------- src/toasts/UnverifiedSessionToast.ts | 4 +- 13 files changed, 66 insertions(+), 72 deletions(-) diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 36da384e69..aad770888b 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -59,7 +59,7 @@ import IconizedContextMenu, { } from "../views/context_menus/IconizedContextMenu"; import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import {BetaPill} from "../views/beta/BetaCard"; -import { USER_TAB } from "../views/dialogs/UserSettingsDialog"; +import { UserTab } from "../views/dialogs/UserSettingsDialog"; import SettingsStore from "../../settings/SettingsStore"; import dis from "../../dispatcher/dispatcher"; import Modal from "../../Modal"; @@ -166,7 +166,7 @@ const SpaceInfo = ({ space }) => { const onBetaClick = () => { defaultDispatcher.dispatch({ action: Action.ViewUserSettings, - initialTabId: USER_TAB.LABS, + initialTabId: UserTab.Labs, }); }; diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index d942c71c4a..3cf0dc5f84 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -26,7 +26,7 @@ import { ActionPayload } from "../../dispatcher/payloads"; import { Action } from "../../dispatcher/actions"; import { _t } from "../../languageHandler"; import { ContextMenuButton } from "./ContextMenu"; -import { USER_TAB } from "../views/dialogs/UserSettingsDialog"; +import { UserTab } from "../views/dialogs/UserSettingsDialog"; import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload"; import FeedbackDialog from "../views/dialogs/FeedbackDialog"; import Modal from "../../Modal"; @@ -408,12 +408,12 @@ export default class UserMenu extends React.Component { this.onSettingsOpen(e, USER_TAB.NOTIFICATIONS)} + onClick={(e) => this.onSettingsOpen(e, UserTab.Notifications)} /> this.onSettingsOpen(e, USER_TAB.SECURITY)} + onClick={(e) => this.onSettingsOpen(e, UserTab.Security)} /> { ); } - private onUIAuthFinished = async (success, response) => { + private onUIAuthFinished = async (success: boolean, response: any) => { if (!success) { let msg = response.message || response.toString(); // can we give a better error message? diff --git a/src/components/views/dialogs/BetaFeedbackDialog.tsx b/src/components/views/dialogs/BetaFeedbackDialog.tsx index 85fe81ef4e..1c2dab4bfc 100644 --- a/src/components/views/dialogs/BetaFeedbackDialog.tsx +++ b/src/components/views/dialogs/BetaFeedbackDialog.tsx @@ -29,7 +29,7 @@ import InfoDialog from "./InfoDialog"; import AccessibleButton from "../elements/AccessibleButton"; import defaultDispatcher from "../../../dispatcher/dispatcher"; import {Action} from "../../../dispatcher/actions"; -import { USER_TAB } from "./UserSettingsDialog"; +import { UserTab } from "./UserSettingsDialog"; interface IProps extends IDialogProps { featureId: string; @@ -70,7 +70,7 @@ const BetaFeedbackDialog: React.FC = ({featureId, onFinished}) => { onFinished(false); defaultDispatcher.dispatch({ action: Action.ViewUserSettings, - initialTabId: USER_TAB.LABS, + initialTabId: UserTab.Labs, }); }}> { _t("To leave the beta, visit your settings.") } diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.tsx b/src/components/views/dialogs/ConfirmUserActionDialog.tsx index 13be70dbab..c91dcba95c 100644 --- a/src/components/views/dialogs/ConfirmUserActionDialog.tsx +++ b/src/components/views/dialogs/ConfirmUserActionDialog.tsx @@ -58,12 +58,6 @@ export default class ConfirmUserActionDialog extends React.Component { askReason: false, }; - constructor(props) { - super(props); - - this.reasonField = null; - } - public onOk = (): void => { let reason; if (this.reasonField) { diff --git a/src/components/views/dialogs/DeactivateAccountDialog.tsx b/src/components/views/dialogs/DeactivateAccountDialog.tsx index 4e64a354bb..cf88802340 100644 --- a/src/components/views/dialogs/DeactivateAccountDialog.tsx +++ b/src/components/views/dialogs/DeactivateAccountDialog.tsx @@ -115,7 +115,7 @@ export default class DeactivateAccountDialog extends React.Component { + private onUIAuthComplete = (auth: any): void => { MatrixClientPeg.get().deactivateAccount(auth, this.state.shouldErase).then(r => { // Deactivation worked - logout & close this dialog Analytics.trackEvent('Account', 'Deactivate Account'); diff --git a/src/components/views/dialogs/UserSettingsDialog.tsx b/src/components/views/dialogs/UserSettingsDialog.tsx index 921aece7f4..1a62a4ff22 100644 --- a/src/components/views/dialogs/UserSettingsDialog.tsx +++ b/src/components/views/dialogs/UserSettingsDialog.tsx @@ -19,7 +19,7 @@ import React from 'react'; import TabbedView, {Tab} from "../../structures/TabbedView"; import {_t, _td} from "../../../languageHandler"; import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab"; -import SettingsStore from "../../../settings/SettingsStore"; +import SettingsStore, { CallbackFn } from "../../../settings/SettingsStore"; import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab"; import AppearanceUserSettingsTab from "../settings/tabs/user/AppearanceUserSettingsTab"; import SecurityUserSettingsTab from "../settings/tabs/user/SecurityUserSettingsTab"; @@ -34,17 +34,17 @@ import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab import {UIFeature} from "../../../settings/UIFeature"; import {replaceableComponent} from "../../../utils/replaceableComponent"; -export enum USER_TAB { - GENERAL = "USER_GENERAL_TAB", - APPEARANCE = "USER_APPEARANCE_TAB", - FLAIR = "USER_FLAIR_TAB", - NOTIFICATIONS = "USER_NOTIFICATIONS_TAB", - PREFERENCES = "USER_PREFERENCES_TAB", - VOICE = "USER_VOICE_TAB", - SECURITY = "USER_SECURITY_TAB", - LABS = "USER_LABS_TAB", - MJOLNIR = "USER_MJOLNIR_TAB", - HELP = "USER_HELP_TAB", +export enum UserTab { + General = "USER_GENERAL_TAB", + Appearance = "USER_APPEARANCE_TAB", + Flair = "USER_FLAIR_TAB", + Notifications = "USER_NOTIFICATIONS_TAB", + Preferences = "USER_PREFERENCES_TAB", + Voice = "USER_VOICE_TAB", + Security = "USER_SECURITY_TAB", + Labs = "USER_LABS_TAB", + Mjolnir = "USER_MJOLNIR_TAB", + Help = "USER_HELP_TAB", } interface IProps { @@ -76,7 +76,7 @@ export default class UserSettingsDialog extends React.Component SettingsStore.unwatchSetting(this.mjolnirWatcher); } - private mjolnirChanged = (settingName, roomId, atLevel, newValue: boolean) => { + private mjolnirChanged: CallbackFn = (settingName, roomId, atLevel, newValue) => { // We can cheat because we know what levels a feature is tracked at, and how it is tracked this.setState({mjolnirEnabled: newValue}); } @@ -85,33 +85,33 @@ export default class UserSettingsDialog extends React.Component const tabs = []; tabs.push(new Tab( - USER_TAB.GENERAL, + UserTab.General, _td("General"), "mx_UserSettingsDialog_settingsIcon", , )); tabs.push(new Tab( - USER_TAB.APPEARANCE, + UserTab.Appearance, _td("Appearance"), "mx_UserSettingsDialog_appearanceIcon", , )); if (SettingsStore.getValue(UIFeature.Flair)) { tabs.push(new Tab( - USER_TAB.FLAIR, + UserTab.Flair, _td("Flair"), "mx_UserSettingsDialog_flairIcon", , )); } tabs.push(new Tab( - USER_TAB.NOTIFICATIONS, + UserTab.Notifications, _td("Notifications"), "mx_UserSettingsDialog_bellIcon", , )); tabs.push(new Tab( - USER_TAB.PREFERENCES, + UserTab.Preferences, _td("Preferences"), "mx_UserSettingsDialog_preferencesIcon", , @@ -119,7 +119,7 @@ export default class UserSettingsDialog extends React.Component if (SettingsStore.getValue(UIFeature.Voip)) { tabs.push(new Tab( - USER_TAB.VOICE, + UserTab.Voice, _td("Voice & Video"), "mx_UserSettingsDialog_voiceIcon", , @@ -127,7 +127,7 @@ export default class UserSettingsDialog extends React.Component } tabs.push(new Tab( - USER_TAB.SECURITY, + UserTab.Security, _td("Security & Privacy"), "mx_UserSettingsDialog_securityIcon", , @@ -137,7 +137,7 @@ export default class UserSettingsDialog extends React.Component || SettingsStore.getFeatureSettingNames().some(k => SettingsStore.getBetaInfo(k)) ) { tabs.push(new Tab( - USER_TAB.LABS, + UserTab.Labs, _td("Labs"), "mx_UserSettingsDialog_labsIcon", , @@ -145,14 +145,14 @@ export default class UserSettingsDialog extends React.Component } if (this.state.mjolnirEnabled) { tabs.push(new Tab( - USER_TAB.MJOLNIR, + UserTab.Mjolnir, _td("Ignored users"), "mx_UserSettingsDialog_mjolnirIcon", , )); } tabs.push(new Tab( - USER_TAB.HELP, + UserTab.Help, _td("Help & About"), "mx_UserSettingsDialog_helpIcon", this.props.onFinished(true)} />, diff --git a/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx b/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx index 7770da3049..840390f6fb 100644 --- a/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx +++ b/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx @@ -34,7 +34,7 @@ interface IProps { interface IState { error: Error | null; - canUploadKeysWithPasswordOnly: boolean | null; + canUploadKeysWithPasswordOnly?: boolean; accountPassword: string; } @@ -45,7 +45,7 @@ interface IState { */ @replaceableComponent("views.dialogs.security.CreateCrossSigningDialog") export default class CreateCrossSigningDialog extends React.PureComponent { - constructor(props) { + constructor(props: IProps) { super(props); this.state = { @@ -90,7 +90,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent => { + private doBootstrapUIAuth = async (makeRequest: (authData: any) => void): Promise => { if (this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) { await makeRequest({ type: 'm.login.password', diff --git a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx index b86b89cede..19c7af01ff 100644 --- a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx +++ b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx @@ -18,11 +18,11 @@ import React from 'react'; import SetupEncryptionBody from '../../../structures/auth/SetupEncryptionBody'; import BaseDialog from '../BaseDialog'; import { _t } from '../../../../languageHandler'; -import { SetupEncryptionStore, PHASE } from '../../../../stores/SetupEncryptionStore'; +import { SetupEncryptionStore, Phase } from '../../../../stores/SetupEncryptionStore'; import {replaceableComponent} from "../../../../utils/replaceableComponent"; -function iconFromPhase(phase: PHASE) { - if (phase === PHASE.DONE) { +function iconFromPhase(phase: Phase) { + if (phase === Phase.Done) { return require("../../../../../res/img/e2e/verified.svg"); } else { return require("../../../../../res/img/e2e/warning.svg"); @@ -34,14 +34,14 @@ interface IProps { } interface IState { - icon: PHASE; + icon: Phase; } @replaceableComponent("views.dialogs.security.SetupEncryptionDialog") export default class SetupEncryptionDialog extends React.Component { private store: SetupEncryptionStore; - constructor(props) { + constructor(props: IProps) { super(props); this.store = SetupEncryptionStore.sharedInstance(); diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index fe77ac0377..03954bad56 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -48,7 +48,7 @@ import EncryptionPanel from "./EncryptionPanel"; import { useAsyncMemo } from '../../../hooks/useAsyncMemo'; import { legacyVerifyUser, verifyDevice, verifyUser } from '../../../verification'; import { Action } from "../../../dispatcher/actions"; -import { USER_TAB } from "../dialogs/UserSettingsDialog"; +import { UserTab } from "../dialogs/UserSettingsDialog"; import { useIsEncrypted } from "../../../hooks/useIsEncrypted"; import BaseCard from "./BaseCard"; import { E2EStatus } from "../../../utils/ShieldUtils"; @@ -1381,7 +1381,7 @@ const BasicUserInfo: React.FC<{ { dis.dispatch({ action: Action.ViewUserSettings, - initialTabId: USER_TAB.SECURITY, + initialTabId: UserTab.Security, }); }}> { _t("Edit devices") } diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx index 95bbabbe53..977cd4a9aa 100644 --- a/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/src/components/views/spaces/SpaceCreateMenu.tsx @@ -29,7 +29,7 @@ import AccessibleButton from "../elements/AccessibleButton"; import {BetaPill} from "../beta/BetaCard"; import defaultDispatcher from "../../../dispatcher/dispatcher"; import {Action} from "../../../dispatcher/actions"; -import { USER_TAB } from "../dialogs/UserSettingsDialog"; +import { UserTab } from "../dialogs/UserSettingsDialog"; import Field from "../elements/Field"; import withValidation from "../elements/Validation"; import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView"; @@ -224,7 +224,7 @@ const SpaceCreateMenu = ({ onFinished }) => { onFinished(); defaultDispatcher.dispatch({ action: Action.ViewUserSettings, - initialTabId: USER_TAB.LABS, + initialTabId: UserTab.Labs, }); }} /> { body } diff --git a/src/stores/SetupEncryptionStore.ts b/src/stores/SetupEncryptionStore.ts index 86e8b7afc3..88385d0399 100644 --- a/src/stores/SetupEncryptionStore.ts +++ b/src/stores/SetupEncryptionStore.ts @@ -22,18 +22,18 @@ import { MatrixClientPeg } from '../MatrixClientPeg'; import { accessSecretStorage, AccessCancelledError } from '../SecurityManager'; import { PHASE_DONE as VERIF_PHASE_DONE } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; -export enum PHASE { - LOADING = 0, - INTRO = 1, - BUSY = 2, - DONE = 3, // final done stage, but still showing UX - CONFIRM_SKIP = 4, - FINISHED = 5, // UX can be closed +export enum Phase { + Loading = 0, + Intro = 1, + Busy = 2, + Done = 3, // final done stage, but still showing UX + ConfirmSkip = 4, + Finished = 5, // UX can be closed } export class SetupEncryptionStore extends EventEmitter { private started: boolean; - public phase: PHASE; + public phase: Phase; public verificationRequest: VerificationRequest; public backupInfo: IKeyBackupVersion; public keyId: string; @@ -50,7 +50,7 @@ export class SetupEncryptionStore extends EventEmitter { return; } this.started = true; - this.phase = PHASE.LOADING; + this.phase = Phase.Loading; this.verificationRequest = null; this.backupInfo = null; @@ -110,15 +110,15 @@ export class SetupEncryptionStore extends EventEmitter { if (!this.hasDevicesToVerifyAgainst && !this.keyInfo) { // skip before we can even render anything. - this.phase = PHASE.FINISHED; + this.phase = Phase.Finished; } else { - this.phase = PHASE.INTRO; + this.phase = Phase.Intro; } this.emit("update"); } public async usePassPhrase(): Promise { - this.phase = PHASE.BUSY; + this.phase = Phase.Busy; this.emit("update"); const cli = MatrixClientPeg.get(); try { @@ -147,7 +147,7 @@ export class SetupEncryptionStore extends EventEmitter { }); if (cli.getCrossSigningId()) { - this.phase = PHASE.DONE; + this.phase = Phase.Done; this.emit("update"); } } catch (e) { @@ -155,7 +155,7 @@ export class SetupEncryptionStore extends EventEmitter { console.log(e); } // this will throw if the user hits cancel, so ignore - this.phase = PHASE.INTRO; + this.phase = Phase.Intro; this.emit("update"); } } @@ -164,7 +164,7 @@ export class SetupEncryptionStore extends EventEmitter { if (userId !== MatrixClientPeg.get().getUserId()) return; const publicKeysTrusted = MatrixClientPeg.get().getCrossSigningId(); if (publicKeysTrusted) { - this.phase = PHASE.DONE; + this.phase = Phase.Done; this.emit("update"); } } @@ -185,28 +185,28 @@ export class SetupEncryptionStore extends EventEmitter { // cross signing to be ready to use, so wait for the user trust status to // change (or change to DONE if it's already ready). const publicKeysTrusted = MatrixClientPeg.get().getCrossSigningId(); - this.phase = publicKeysTrusted ? PHASE.DONE : PHASE.BUSY; + this.phase = publicKeysTrusted ? Phase.Done : Phase.Busy; this.emit("update"); } } public skip(): void { - this.phase = PHASE.CONFIRM_SKIP; + this.phase = Phase.ConfirmSkip; this.emit("update"); } public skipConfirm(): void { - this.phase = PHASE.FINISHED; + this.phase = Phase.Finished; this.emit("update"); } public returnAfterSkip(): void { - this.phase = PHASE.INTRO; + this.phase = Phase.Intro; this.emit("update"); } public done(): void { - this.phase = PHASE.FINISHED; + this.phase = Phase.Finished; this.emit("update"); // async - ask other clients for keys, if necessary MatrixClientPeg.get().crypto.cancelAndResendAllOutgoingKeyRequests(); diff --git a/src/toasts/UnverifiedSessionToast.ts b/src/toasts/UnverifiedSessionToast.ts index 8e3fa7c8a7..05425b93c0 100644 --- a/src/toasts/UnverifiedSessionToast.ts +++ b/src/toasts/UnverifiedSessionToast.ts @@ -21,7 +21,7 @@ import DeviceListener from '../DeviceListener'; import ToastStore from "../stores/ToastStore"; import GenericToast from "../components/views/toasts/GenericToast"; import { Action } from "../dispatcher/actions"; -import { USER_TAB } from "../components/views/dialogs/UserSettingsDialog"; +import { UserTab } from "../components/views/dialogs/UserSettingsDialog"; function toastKey(deviceId: string) { return "unverified_session_" + deviceId; @@ -34,7 +34,7 @@ export const showToast = async (deviceId: string) => { DeviceListener.sharedInstance().dismissUnverifiedSessions([deviceId]); dis.dispatch({ action: Action.ViewUserSettings, - initialTabId: USER_TAB.SECURITY, + initialTabId: UserTab.Security, }); }; From fcda0604e0ff1bf6531f1fd45f8c50b4145f6fa1 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 18 Jun 2021 12:48:31 +0100 Subject: [PATCH 0460/1270] Fix RoomMember import --- src/components/views/dialogs/ConfirmUserActionDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.tsx b/src/components/views/dialogs/ConfirmUserActionDialog.tsx index c91dcba95c..05f8c63ace 100644 --- a/src/components/views/dialogs/ConfirmUserActionDialog.tsx +++ b/src/components/views/dialogs/ConfirmUserActionDialog.tsx @@ -16,7 +16,7 @@ limitations under the License. import React from 'react'; import { MatrixClient } from 'matrix-js-sdk/src/client'; -import RoomMember from "matrix-js-sdk/src/models/room-member.js"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import { GroupMemberType } from '../../../groups'; From 538165d51580805170e4230ba7ded0862f1f89bd Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 18 Jun 2021 14:05:12 +0100 Subject: [PATCH 0461/1270] Fix phase enum usage in JS modules as well https://github.com/matrix-org/matrix-react-sdk/pull/6185 converted `SetupEncryptionStore` to TS, including moving the phase states to an enum. The calling JS modules were forgotten, so they got a bit confused. Fixes https://github.com/vector-im/element-web/issues/17689 Regressed by https://github.com/matrix-org/matrix-react-sdk/pull/6185 --- .../structures/auth/CompleteSecurity.js | 19 ++++++------------ .../structures/auth/SetupEncryptionBody.js | 20 ++++++------------- 2 files changed, 12 insertions(+), 27 deletions(-) diff --git a/src/components/structures/auth/CompleteSecurity.js b/src/components/structures/auth/CompleteSecurity.js index 49fcf20415..654dd9b6c8 100644 --- a/src/components/structures/auth/CompleteSecurity.js +++ b/src/components/structures/auth/CompleteSecurity.js @@ -18,14 +18,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { _t } from '../../../languageHandler'; import * as sdk from '../../../index'; -import { - SetupEncryptionStore, - PHASE_LOADING, - PHASE_INTRO, - PHASE_BUSY, - PHASE_DONE, - PHASE_CONFIRM_SKIP, -} from '../../../stores/SetupEncryptionStore'; +import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore'; import SetupEncryptionBody from "./SetupEncryptionBody"; import {replaceableComponent} from "../../../utils/replaceableComponent"; @@ -61,18 +54,18 @@ export default class CompleteSecurity extends React.Component { let icon; let title; - if (phase === PHASE_LOADING) { + if (phase === Phase.Loading) { return null; - } else if (phase === PHASE_INTRO) { + } else if (phase === Phase.Intro) { icon = ; title = _t("Verify this login"); - } else if (phase === PHASE_DONE) { + } else if (phase === Phase.Done) { icon = ; title = _t("Session verified"); - } else if (phase === PHASE_CONFIRM_SKIP) { + } else if (phase === Phase.ConfirmSkip) { icon = ; title = _t("Are you sure?"); - } else if (phase === PHASE_BUSY) { + } else if (phase === Phase.Busy) { icon = ; title = _t("Verify this login"); } else { diff --git a/src/components/structures/auth/SetupEncryptionBody.js b/src/components/structures/auth/SetupEncryptionBody.js index 803df19d00..90137e084c 100644 --- a/src/components/structures/auth/SetupEncryptionBody.js +++ b/src/components/structures/auth/SetupEncryptionBody.js @@ -21,15 +21,7 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg'; import Modal from '../../../Modal'; import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDialog'; import * as sdk from '../../../index'; -import { - SetupEncryptionStore, - PHASE_LOADING, - PHASE_INTRO, - PHASE_BUSY, - PHASE_DONE, - PHASE_CONFIRM_SKIP, - PHASE_FINISHED, -} from '../../../stores/SetupEncryptionStore'; +import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore'; import {replaceableComponent} from "../../../utils/replaceableComponent"; function keyHasPassphrase(keyInfo) { @@ -63,7 +55,7 @@ export default class SetupEncryptionBody extends React.Component { _onStoreUpdate = () => { const store = SetupEncryptionStore.sharedInstance(); - if (store.phase === PHASE_FINISHED) { + if (store.phase === Phase.Finished) { this.props.onFinished(); return; } @@ -136,7 +128,7 @@ export default class SetupEncryptionBody extends React.Component { onClose={this.props.onFinished} member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)} />; - } else if (phase === PHASE_INTRO) { + } else if (phase === Phase.Intro) { const store = SetupEncryptionStore.sharedInstance(); let recoveryKeyPrompt; if (store.keyInfo && keyHasPassphrase(store.keyInfo)) { @@ -174,7 +166,7 @@ export default class SetupEncryptionBody extends React.Component {
    ); - } else if (phase === PHASE_DONE) { + } else if (phase === Phase.Done) { let message; if (this.state.backupInfo) { message =

    {_t( @@ -200,7 +192,7 @@ export default class SetupEncryptionBody extends React.Component {

    ); - } else if (phase === PHASE_CONFIRM_SKIP) { + } else if (phase === Phase.ConfirmSkip) { return (

    {_t( @@ -224,7 +216,7 @@ export default class SetupEncryptionBody extends React.Component {

    ); - } else if (phase === PHASE_BUSY || phase === PHASE_LOADING) { + } else if (phase === Phase.Busy || phase === Phase.Loading) { const Spinner = sdk.getComponent('views.elements.Spinner'); return ; } else { From 9b6195317ec1445c6d86e183409132d3cc88f36a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 18 Jun 2021 16:14:54 +0200 Subject: [PATCH 0462/1270] Improve padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index d3405c7492..1597cf4b87 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -40,14 +40,15 @@ limitations under the License. .mx_CallEvent_sender { font-weight: 600; font-size: 1.5rem; - line-height: 1.9rem; + line-height: 1.8rem; + margin-bottom: 3px; } .mx_CallEvent_type { font-weight: 400; color: $secondary-fg-color; font-size: 1.2rem; - line-height: 1.5rem; + line-height: $font-13px; display: flex; align-items: center; From 62de75ab0077b55b526f0e5d6682aca4a7ef9ace Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 18 Jun 2021 16:19:57 +0200 Subject: [PATCH 0463/1270] Increase height MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 1597cf4b87..1804462d4f 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -21,16 +21,17 @@ limitations under the License. justify-content: space-between; background-color: $dark-panel-bg-color; - padding: 10px 16px 12px 10px; border-radius: 8px; margin: 10px auto; max-width: 75%; box-sizing: border-box; + height: 60px; .mx_CallEvent_info { display: flex; flex-direction: row; align-items: center; + margin-left: 12px; .mx_CallEvent_info_basic { display: flex; @@ -84,6 +85,7 @@ limitations under the License. flex-direction: row; align-items: center; color: $secondary-fg-color; + margin-right: 16px; .mx_CallEvent_content_callBack { margin-left: 10px; // To match mx_callEvent From 9cce5ef10f116a13167a04ae42954adc8569c1f3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 15:31:12 +0100 Subject: [PATCH 0464/1270] Consolidate types with js-sdk changes --- src/Avatar.ts | 3 +-- src/components/structures/RoomView.tsx | 8 ++------ 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/Avatar.ts b/src/Avatar.ts index 8ea0b0c9fa..4c4bd1c265 100644 --- a/src/Avatar.ts +++ b/src/Avatar.ts @@ -17,13 +17,12 @@ limitations under the License. import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { User } from "matrix-js-sdk/src/models/user"; import { Room } from "matrix-js-sdk/src/models/room"; +import { ResizeMethod } from "matrix-js-sdk/src/@types/partials"; import DMRoomMap from './utils/DMRoomMap'; import { mediaFromMxc } from "./customisations/Media"; import SettingsStore from "./settings/SettingsStore"; -export type ResizeMethod = "crop" | "scale"; - // Not to be used for BaseAvatar urls as that has similar default avatar fallback already export function avatarUrlForMember( member: RoomMember, diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 1e3adcb518..d9f2d5231b 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -23,7 +23,7 @@ limitations under the License. import React, { createRef } from 'react'; import classNames from 'classnames'; -import { Room } from "matrix-js-sdk/src/models/room"; +import { IRecommendedVersion, Room } from "matrix-js-sdk/src/models/room"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { SearchResult } from "matrix-js-sdk/src/models/search-result"; import { EventSubscription } from "fbemitter"; @@ -172,11 +172,7 @@ export interface IState { // We load this later by asking the js-sdk to suggest a version for us. // This object is the result of Room#getRecommendedVersion() - upgradeRecommendation?: { - version: string; - needsUpgrade: boolean; - urgent: boolean; - }; + upgradeRecommendation?: IRecommendedVersion; canReact: boolean; canReply: boolean; layout: Layout; From 707ecd8786da8897877c1a950492b41a931242b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 18 Jun 2021 17:03:48 +0200 Subject: [PATCH 0465/1270] Don't highlight bubble events MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 3af266caee..fdf933626f 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -130,6 +130,13 @@ $hover-select-border: 4px; .mx_EventTile_msgOption { grid-column: 2; } + + &:hover { + .mx_EventTile_line { + // To avoid bubble events being highlighted + background-color: inherit !important; + } + } } .mx_EventTile_reply { From 058cbbbd0c6c2534e390d000844ccde74683f690 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 16:13:55 +0100 Subject: [PATCH 0466/1270] Fix imports --- src/autocomplete/Autocompleter.ts | 7 ++-- src/autocomplete/NotifProvider.tsx | 3 +- src/autocomplete/RoomProvider.tsx | 12 +++--- src/components/views/avatars/BaseAvatar.tsx | 9 +++-- src/components/views/avatars/GroupAvatar.tsx | 7 ++-- src/components/views/avatars/MemberAvatar.tsx | 10 ++--- src/components/views/avatars/RoomAvatar.tsx | 12 +++--- src/components/views/elements/RoomName.tsx | 8 ++-- .../views/rooms/WhoIsTypingTile.tsx | 2 +- src/customisations/Media.ts | 9 +++-- src/utils/ShieldUtils.ts | 39 ++++++++++--------- 11 files changed, 62 insertions(+), 56 deletions(-) diff --git a/src/autocomplete/Autocompleter.ts b/src/autocomplete/Autocompleter.ts index 5409825f45..ea8eddbb8d 100644 --- a/src/autocomplete/Autocompleter.ts +++ b/src/autocomplete/Autocompleter.ts @@ -15,8 +15,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {ReactElement} from 'react'; -import Room from 'matrix-js-sdk/src/models/room'; +import { ReactElement } from 'react'; +import { Room } from 'matrix-js-sdk/src/models/room'; + import CommandProvider from './CommandProvider'; import CommunityProvider from './CommunityProvider'; import DuckDuckGoProvider from './DuckDuckGoProvider'; @@ -24,7 +25,7 @@ import RoomProvider from './RoomProvider'; import UserProvider from './UserProvider'; import EmojiProvider from './EmojiProvider'; import NotifProvider from './NotifProvider'; -import {timeout} from "../utils/promise"; +import { timeout } from "../utils/promise"; import AutocompleteProvider, {ICommand} from "./AutocompleteProvider"; import SettingsStore from "../settings/SettingsStore"; import SpaceProvider from "./SpaceProvider"; diff --git a/src/autocomplete/NotifProvider.tsx b/src/autocomplete/NotifProvider.tsx index 0bc7ead097..827f4aa885 100644 --- a/src/autocomplete/NotifProvider.tsx +++ b/src/autocomplete/NotifProvider.tsx @@ -15,7 +15,8 @@ limitations under the License. */ import React from 'react'; -import Room from "matrix-js-sdk/src/models/room"; +import { Room } from "matrix-js-sdk/src/models/room"; + import AutocompleteProvider from './AutocompleteProvider'; import { _t } from '../languageHandler'; import {MatrixClientPeg} from '../MatrixClientPeg'; diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx index ad55b19101..a82a757a78 100644 --- a/src/autocomplete/RoomProvider.tsx +++ b/src/autocomplete/RoomProvider.tsx @@ -17,16 +17,16 @@ limitations under the License. */ import React from "react"; -import {uniqBy, sortBy} from "lodash"; -import Room from "matrix-js-sdk/src/models/room"; +import { uniqBy, sortBy } from "lodash"; +import { Room } from "matrix-js-sdk/src/models/room"; import { _t } from '../languageHandler'; import AutocompleteProvider from './AutocompleteProvider'; -import {MatrixClientPeg} from '../MatrixClientPeg'; +import { MatrixClientPeg } from '../MatrixClientPeg'; import QueryMatcher from './QueryMatcher'; -import {PillCompletion} from './Components'; -import {makeRoomPermalink} from "../utils/permalinks/Permalinks"; -import {ICompletion, ISelectionRange} from "./Autocompleter"; +import { PillCompletion } from './Components'; +import { makeRoomPermalink } from "../utils/permalinks/Permalinks"; +import { ICompletion, ISelectionRange } from "./Autocompleter"; import RoomAvatar from '../components/views/avatars/RoomAvatar'; import SettingsStore from "../settings/SettingsStore"; diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx index 6949c14636..f98f8c88a1 100644 --- a/src/components/views/avatars/BaseAvatar.tsx +++ b/src/components/views/avatars/BaseAvatar.tsx @@ -17,16 +17,17 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {useCallback, useContext, useEffect, useState} from 'react'; +import React, { useCallback, useContext, useEffect, useState } from 'react'; import classNames from 'classnames'; +import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials'; + import * as AvatarLogic from '../../../Avatar'; import SettingsStore from "../../../settings/SettingsStore"; import AccessibleButton from '../elements/AccessibleButton'; import RoomContext from "../../../contexts/RoomContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -import {useEventEmitter} from "../../../hooks/useEventEmitter"; -import {toPx} from "../../../utils/units"; -import {ResizeMethod} from "../../../Avatar"; +import { useEventEmitter } from "../../../hooks/useEventEmitter"; +import { toPx } from "../../../utils/units"; import { _t } from '../../../languageHandler'; interface IProps { diff --git a/src/components/views/avatars/GroupAvatar.tsx b/src/components/views/avatars/GroupAvatar.tsx index 3734ba9504..13dbbfec09 100644 --- a/src/components/views/avatars/GroupAvatar.tsx +++ b/src/components/views/avatars/GroupAvatar.tsx @@ -15,10 +15,11 @@ limitations under the License. */ import React from 'react'; +import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials'; + import BaseAvatar from './BaseAvatar'; -import {replaceableComponent} from "../../../utils/replaceableComponent"; -import {mediaFromMxc} from "../../../customisations/Media"; -import {ResizeMethod} from "../../../Avatar"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { mediaFromMxc } from "../../../customisations/Media"; export interface IProps { groupId?: string; diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 3205ca372c..862563a8b4 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -16,14 +16,14 @@ limitations under the License. */ import React from 'react'; -import {RoomMember} from "matrix-js-sdk/src/models/room-member"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials'; import dis from "../../../dispatcher/dispatcher"; -import {Action} from "../../../dispatcher/actions"; +import { Action } from "../../../dispatcher/actions"; import BaseAvatar from "./BaseAvatar"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; -import {mediaFromMxc} from "../../../customisations/Media"; -import {ResizeMethod} from "../../../Avatar"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { mediaFromMxc } from "../../../customisations/Media"; interface IProps extends Omit, "name" | "idName" | "url"> { member: RoomMember; diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx index 4693d907ba..bd820509c5 100644 --- a/src/components/views/avatars/RoomAvatar.tsx +++ b/src/components/views/avatars/RoomAvatar.tsx @@ -13,17 +13,17 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import React, {ComponentProps} from 'react'; -import Room from 'matrix-js-sdk/src/models/room'; +import React, { ComponentProps } from 'react'; +import { Room } from 'matrix-js-sdk/src/models/room'; +import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials'; import BaseAvatar from './BaseAvatar'; import ImageView from '../elements/ImageView'; -import {MatrixClientPeg} from '../../../MatrixClientPeg'; +import { MatrixClientPeg } from '../../../MatrixClientPeg'; import Modal from '../../../Modal'; import * as Avatar from '../../../Avatar'; -import {ResizeMethod} from "../../../Avatar"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; -import {mediaFromMxc} from "../../../customisations/Media"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { mediaFromMxc } from "../../../customisations/Media"; interface IProps extends Omit, "name" | "idName" | "url" | "onClick"> { // Room may be left unset here, but if it is, diff --git a/src/components/views/elements/RoomName.tsx b/src/components/views/elements/RoomName.tsx index 9178155d19..cdd83aedc2 100644 --- a/src/components/views/elements/RoomName.tsx +++ b/src/components/views/elements/RoomName.tsx @@ -14,10 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {useEffect, useState} from "react"; -import {Room} from "matrix-js-sdk/src/models/room"; +import React, { useEffect, useState } from "react"; +import { Room } from "matrix-js-sdk/src/models/room"; -import {useEventEmitter} from "../../../hooks/useEventEmitter"; +import { useEventEmitter } from "../../../hooks/useEventEmitter"; interface IProps { room: Room; @@ -34,7 +34,7 @@ const RoomName = ({ room, children }: IProps): JSX.Element => { }, [room]); if (children) return children(name); - return name || ""; + return <>{ name || "" }; }; export default RoomName; diff --git a/src/components/views/rooms/WhoIsTypingTile.tsx b/src/components/views/rooms/WhoIsTypingTile.tsx index 3a1d2051b4..93078ff645 100644 --- a/src/components/views/rooms/WhoIsTypingTile.tsx +++ b/src/components/views/rooms/WhoIsTypingTile.tsx @@ -16,7 +16,7 @@ limitations under the License. */ import React from 'react'; -import Room from "matrix-js-sdk/src/models/room"; +import { Room } from "matrix-js-sdk/src/models/room"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; diff --git a/src/customisations/Media.ts b/src/customisations/Media.ts index f9d957b60c..37e91fc54b 100644 --- a/src/customisations/Media.ts +++ b/src/customisations/Media.ts @@ -14,10 +14,11 @@ * limitations under the License. */ -import {MatrixClientPeg} from "../MatrixClientPeg"; -import {IMediaEventContent, IPreparedMedia, prepEventContentAsMedia} from "./models/IMediaEventContent"; -import {ResizeMethod} from "../Avatar"; -import {MatrixClient} from "matrix-js-sdk/src/client"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import { ResizeMethod } from "matrix-js-sdk/src/@types/partials"; + +import { MatrixClientPeg } from "../MatrixClientPeg"; +import { IMediaEventContent, IPreparedMedia, prepEventContentAsMedia } from "./models/IMediaEventContent"; // Populate this class with the details of your customisations when copying it. diff --git a/src/utils/ShieldUtils.ts b/src/utils/ShieldUtils.ts index 5fe653fed0..c855b81bf8 100644 --- a/src/utils/ShieldUtils.ts +++ b/src/utils/ShieldUtils.ts @@ -1,30 +1,31 @@ +/* +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 { MatrixClient } from "matrix-js-sdk/src/client"; +import { Room } from "matrix-js-sdk/src/models/room"; + import DMRoomMap from './DMRoomMap'; -/* For now, a cut-down type spec for the client */ -interface Client { - getUserId: () => string; - checkUserTrust: (userId: string) => { - isCrossSigningVerified: () => boolean - wasCrossSigningVerified: () => boolean - }; - getStoredDevicesForUser: (userId: string) => [{ deviceId: string }]; - checkDeviceTrust: (userId: string, deviceId: string) => { - isVerified: () => boolean - }; -} - -interface Room { - getEncryptionTargetMembers: () => Promise<[{userId: string}]>; - roomId: string; -} - export enum E2EStatus { Warning = "warning", Verified = "verified", Normal = "normal" } -export async function shieldStatusForRoom(client: Client, room: Room): Promise { +export async function shieldStatusForRoom(client: MatrixClient, room: Room): Promise { const members = (await room.getEncryptionTargetMembers()).map(({userId}) => userId); const inDMMap = !!DMRoomMap.shared().getUserIdForRoomId(room.roomId); From 3b7c92fd9ee02961566eb52471f5883cbe12db8a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 16:18:42 +0100 Subject: [PATCH 0467/1270] Use new js-sdk types properly --- src/components/structures/RoomView.tsx | 4 ++-- src/mjolnir/BanList.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index d9f2d5231b..bfc7a1972d 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -23,7 +23,7 @@ limitations under the License. import React, { createRef } from 'react'; import classNames from 'classnames'; -import { IRecommendedVersion, Room } from "matrix-js-sdk/src/models/room"; +import { IRecommendedVersion, NotificationCountType, Room } from "matrix-js-sdk/src/models/room"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { SearchResult } from "matrix-js-sdk/src/models/search-result"; import { EventSubscription } from "fbemitter"; @@ -2054,7 +2054,7 @@ export default class RoomView extends React.Component { if (!this.state.atEndOfLiveTimeline && !this.state.searchResults) { const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton'); jumpToBottom = ( 0} + highlight={this.state.room.getUnreadNotificationCount(NotificationCountType.Highlight) > 0} numUnreadMessages={this.state.numUnreadMessages} onScrollToBottomClick={this.jumpToLiveTimeline} roomId={this.state.roomId} diff --git a/src/mjolnir/BanList.ts b/src/mjolnir/BanList.ts index 21cd5d4cf7..89eec89500 100644 --- a/src/mjolnir/BanList.ts +++ b/src/mjolnir/BanList.ts @@ -92,7 +92,7 @@ export class BanList { if (!room) return; for (const eventType of ALL_RULE_TYPES) { - const events = room.currentState.getStateEvents(eventType, undefined); + const events = room.currentState.getStateEvents(eventType); for (const ev of events) { if (!ev.getStateKey()) continue; From 0ae4e7b11de934dcd28645f55f73646722b507ee Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 16:21:46 +0100 Subject: [PATCH 0468/1270] Fix typescript types --- src/SlashCommands.tsx | 7 +++--- .../views/right_panel/EncryptionPanel.tsx | 23 ++++++++++--------- src/components/views/right_panel/UserInfo.tsx | 4 ++-- src/components/views/rooms/NewRoomIntro.tsx | 21 +++++++++-------- src/dispatcher/payloads/ViewUserPayload.ts | 3 ++- src/stores/RoomViewStore.tsx | 2 +- .../room-list/filters/SpaceFilterCondition.ts | 2 +- src/utils/WidgetUtils.ts | 23 ++++++++++--------- 8 files changed, 44 insertions(+), 41 deletions(-) diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 9700c57d67..bd2133f3d9 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -17,8 +17,8 @@ See the License for the specific language governing permissions and limitations under the License. */ - import * as React from 'react'; +import { User } from "matrix-js-sdk/src/models/user"; import * as ContentHelpers from 'matrix-js-sdk/src/content-helpers'; import {MatrixClientPeg} from './MatrixClientPeg'; @@ -1019,9 +1019,8 @@ export const Commands = [ const member = MatrixClientPeg.get().getRoom(roomId).getMember(userId); dis.dispatch({ action: Action.ViewUser, - // XXX: We should be using a real member object and not assuming what the - // receiver wants. - member: member || {userId}, + // XXX: We should be using a real member object and not assuming what the receiver wants. + member: member || { userId } as User, }); return success(); }, diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index c237a4ade6..3a26427246 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -14,28 +14,29 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {useCallback, useEffect, useState} from "react"; +import React, { useCallback, useEffect, useState } from "react"; +import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import { User } from "matrix-js-sdk/src/models/user"; +import { PHASE_REQUESTED, PHASE_UNSENT } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import EncryptionInfo from "./EncryptionInfo"; import VerificationPanel from "./VerificationPanel"; -import {MatrixClientPeg} from "../../../MatrixClientPeg"; -import {ensureDMExists} from "../../../createRoom"; -import {useEventEmitter} from "../../../hooks/useEventEmitter"; +import { MatrixClientPeg } from "../../../MatrixClientPeg"; +import { ensureDMExists } from "../../../createRoom"; +import { useEventEmitter } from "../../../hooks/useEventEmitter"; import Modal from "../../../Modal"; -import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import * as sdk from "../../../index"; -import {_t} from "../../../languageHandler"; -import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; -import {RoomMember} from "matrix-js-sdk/src/models/room-member"; +import { _t } from "../../../languageHandler"; import dis from "../../../dispatcher/dispatcher"; -import {Action} from "../../../dispatcher/actions"; -import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; +import { Action } from "../../../dispatcher/actions"; +import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; // cancellation codes which constitute a key mismatch const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"]; interface IProps { - member: RoomMember; + member: RoomMember | User; onClose: () => void; verificationRequest: VerificationRequest; verificationRequestPromise: Promise; diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 0b37fb9dd6..8833cb6862 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -1594,7 +1594,7 @@ const UserInfo: React.FC = ({ content = ( @@ -1605,7 +1605,7 @@ const UserInfo: React.FC = ({ content = ( } - member={member} + member={member as User | RoomMember} onClose={onEncryptionPanelClose} isRoomEncrypted={isRoomEncrypted} /> diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx index 3bf9a9db33..2b2958e3f3 100644 --- a/src/components/views/rooms/NewRoomIntro.tsx +++ b/src/components/views/rooms/NewRoomIntro.tsx @@ -14,25 +14,26 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {useContext} from "react"; -import {EventType} from "matrix-js-sdk/src/@types/event"; +import React, { useContext } from "react"; +import { EventType } from "matrix-js-sdk/src/@types/event"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { User } from "matrix-js-sdk/src/models/user"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import RoomContext from "../../../contexts/RoomContext"; import DMRoomMap from "../../../utils/DMRoomMap"; -import {_t} from "../../../languageHandler"; +import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; -import MiniAvatarUploader, {AVATAR_SIZE} from "../elements/MiniAvatarUploader"; +import MiniAvatarUploader, { AVATAR_SIZE } from "../elements/MiniAvatarUploader"; import RoomAvatar from "../avatars/RoomAvatar"; import defaultDispatcher from "../../../dispatcher/dispatcher"; -import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload"; -import {Action} from "../../../dispatcher/actions"; +import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload"; +import { Action } from "../../../dispatcher/actions"; import dis from "../../../dispatcher/dispatcher"; import SpaceStore from "../../../stores/SpaceStore"; -import {showSpaceInvite} from "../../../utils/space"; - +import { showSpaceInvite } from "../../../utils/space"; import { privateShouldBeEncrypted } from "../../../createRoom"; - import EventTileBubble from "../messages/EventTileBubble"; import { ROOM_SECURITY_TAB } from "../dialogs/RoomSettingsDialog"; @@ -61,7 +62,7 @@ const NewRoomIntro = () => { defaultDispatcher.dispatch({ action: Action.ViewUser, // XXX: We should be using a real member object and not assuming what the receiver wants. - member: member || {userId: dmPartner}, + member: member || { userId: dmPartner } as User, }); }} /> diff --git a/src/dispatcher/payloads/ViewUserPayload.ts b/src/dispatcher/payloads/ViewUserPayload.ts index c2838d0dbb..c4d73aea6a 100644 --- a/src/dispatcher/payloads/ViewUserPayload.ts +++ b/src/dispatcher/payloads/ViewUserPayload.ts @@ -15,6 +15,7 @@ limitations under the License. */ import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import { User } from "matrix-js-sdk/src/models/user"; import { ActionPayload } from "../payloads"; import { Action } from "../actions"; @@ -25,5 +26,5 @@ export interface ViewUserPayload extends ActionPayload { * The member to view. May be null or falsy to indicate that no member * should be shown (hide whichever relevant components). */ - member?: RoomMember; + member?: RoomMember | User; } diff --git a/src/stores/RoomViewStore.tsx b/src/stores/RoomViewStore.tsx index cc3eafffcd..87978df471 100644 --- a/src/stores/RoomViewStore.tsx +++ b/src/stores/RoomViewStore.tsx @@ -276,7 +276,7 @@ class RoomViewStore extends Store { const address = this.state.roomAlias || this.state.roomId; const viaServers = this.state.viaServers || []; try { - await retry(() => cli.joinRoom(address, { + await retry(() => cli.joinRoom(address, { viaServers, ...payload.opts, }), NUM_JOIN_RETRY, (err) => { diff --git a/src/stores/room-list/filters/SpaceFilterCondition.ts b/src/stores/room-list/filters/SpaceFilterCondition.ts index 6a06bee0d8..79e258927d 100644 --- a/src/stores/room-list/filters/SpaceFilterCondition.ts +++ b/src/stores/room-list/filters/SpaceFilterCondition.ts @@ -29,7 +29,7 @@ import { setHasDiff } from "../../../utils/sets"; * + All DMs */ export class SpaceFilterCondition extends EventEmitter implements IFilterCondition, IDestroyable { - private roomIds = new Set(); + private roomIds = new Set(); private space: Room = null; public get kind(): FilterKind { diff --git a/src/utils/WidgetUtils.ts b/src/utils/WidgetUtils.ts index 7ff0529363..926278a20a 100644 --- a/src/utils/WidgetUtils.ts +++ b/src/utils/WidgetUtils.ts @@ -16,19 +16,20 @@ limitations under the License. */ import * as url from "url"; +import { Capability, IWidget, IWidgetData, MatrixCapabilities } from "matrix-widget-api"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; -import {MatrixClientPeg} from '../MatrixClientPeg'; +import { MatrixClientPeg } from '../MatrixClientPeg'; import SdkConfig from "../SdkConfig"; import dis from '../dispatcher/dispatcher'; import WidgetEchoStore from '../stores/WidgetEchoStore'; import SettingsStore from "../settings/SettingsStore"; -import {IntegrationManagers} from "../integrations/IntegrationManagers"; -import {Room} from "matrix-js-sdk/src/models/room"; -import {WidgetType} from "../widgets/WidgetType"; -import {objectClone} from "./objects"; -import {_t} from "../languageHandler"; -import {Capability, IWidget, IWidgetData, MatrixCapabilities} from "matrix-widget-api"; -import {IApp} from "../stores/WidgetStore"; +import { IntegrationManagers } from "../integrations/IntegrationManagers"; +import { WidgetType } from "../widgets/WidgetType"; +import { objectClone } from "./objects"; +import { _t } from "../languageHandler"; +import { IApp } from "../stores/WidgetStore"; // How long we wait for the state event echo to come back from the server // before waitFor[Room/User]Widget rejects its promise @@ -377,9 +378,9 @@ export default class WidgetUtils { return widgets.filter(w => w.content && w.content.type === "m.integration_manager"); } - static getRoomWidgetsOfType(room: Room, type: WidgetType): IWidgetEvent[] { - const widgets = WidgetUtils.getRoomWidgets(room); - return (widgets || []).filter(w => { + static getRoomWidgetsOfType(room: Room, type: WidgetType): MatrixEvent[] { + const widgets = WidgetUtils.getRoomWidgets(room) || []; + return widgets.filter(w => { const content = w.getContent(); return content.url && type.matches(content.type); }); From 233e2aa425266791f99c99aeb4f77f827c986ff9 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 16:22:31 +0100 Subject: [PATCH 0469/1270] Fix bugs identified by the typescripting --- src/components/views/rooms/AuxPanel.tsx | 12 ++++++------ src/components/views/rooms/RoomTile.tsx | 4 ++-- src/stores/CommunityPrototypeStore.ts | 13 ++++++++++--- src/stores/SpaceStore.tsx | 12 +++++++++--- 4 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx index 74609cca13..f6cc0f4d45 100644 --- a/src/components/views/rooms/AuxPanel.tsx +++ b/src/components/views/rooms/AuxPanel.tsx @@ -15,10 +15,12 @@ limitations under the License. */ import React from 'react'; -import { MatrixClientPeg } from "../../../MatrixClientPeg"; -import { Room } from 'matrix-js-sdk/src/models/room' -import AppsDrawer from './AppsDrawer'; import classNames from 'classnames'; +import { lexicographicCompare } from 'matrix-js-sdk/src/utils'; +import { Room } from 'matrix-js-sdk/src/models/room' + +import { MatrixClientPeg } from "../../../MatrixClientPeg"; +import AppsDrawer from './AppsDrawer'; import RateLimitedFunc from '../../../ratelimitedfunc'; import SettingsStore from "../../../settings/SettingsStore"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; @@ -106,9 +108,7 @@ export default class AuxPanel extends React.Component { if (this.props.room && SettingsStore.getValue("feature_state_counters")) { const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter'); - stateEvs.sort((a, b) => { - return a.getStateKey() < b.getStateKey(); - }); + stateEvs.sort((a, b) => lexicographicCompare(a.getStateKey(), b.getStateKey())); for (const ev of stateEvs) { const title = ev.getContent().title; diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index aae182eca4..310ff29010 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -119,7 +119,7 @@ export default class RoomTile extends React.PureComponent { }; private onLocalEchoUpdated = (ev: MatrixEvent, room: Room) => { - if (!room?.roomId === this.props.room.roomId) return; + if (room?.roomId !== this.props.room.roomId) return; this.setState({hasUnsentEvents: this.countUnsentEvents() > 0}); }; @@ -316,7 +316,7 @@ export default class RoomTile extends React.PureComponent { 0, )); } else { - console.warn(`Unexpected tag ${tagId} applied to ${this.props.room.room_id}`); + console.warn(`Unexpected tag ${tagId} applied to ${this.props.room.roomId}`); } if ((ev as React.KeyboardEvent).key === Key.ENTER) { diff --git a/src/stores/CommunityPrototypeStore.ts b/src/stores/CommunityPrototypeStore.ts index 023845c9ee..a6f4574a58 100644 --- a/src/stores/CommunityPrototypeStore.ts +++ b/src/stores/CommunityPrototypeStore.ts @@ -107,8 +107,9 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient { const pl = generalChat.currentState.getStateEvents("m.room.power_levels", ""); if (!pl) return this.isAdminOf(communityId); + const plContent = pl.getContent(); - const invitePl = isNullOrUndefined(pl.invite) ? 50 : Number(pl.invite); + const invitePl = isNullOrUndefined(plContent.invite) ? 50 : Number(plContent.invite); return invitePl <= myMember.powerLevel; } @@ -159,10 +160,16 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient { if (SettingsStore.getValue("feature_communities_v2_prototypes")) { const data = this.matrixClient.getAccountData("im.vector.group_info." + roomId); if (data && data.getContent()) { - return {displayName: data.getContent().name, avatarMxc: data.getContent().avatar_url}; + return { + displayName: data.getContent().name, + avatarMxc: data.getContent().avatar_url, + }; } } - return {displayName: room.name, avatarMxc: room.avatar_url}; + return { + displayName: room.name, + avatarMxc: room.getMxcAvatarUrl(), + }; } protected async onReady(): Promise { diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index 40997d30a8..9463949aff 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -133,7 +133,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { // if the space being selected is an invite then always view that invite // else if the last viewed room in this space is joined then view that // else view space home or home depending on what is being clicked on - if (space?.getMyMembership !== "invite" && + if (space?.getMyMembership() !== "invite" && this.matrixClient?.getRoom(roomId)?.getMyMembership() === "join" ) { defaultDispatcher.dispatch({ @@ -423,8 +423,14 @@ export class SpaceStoreClass extends AsyncStoreWithClient { parent = this.rootSpaces.find(s => this.spaceFilteredRooms.get(s.roomId)?.has(roomId)); } if (!parent) { - const parents = Array.from(this.parentMap.get(roomId) || []); - parent = parents.find(p => this.matrixClient.getRoom(p)); + const parentIds = Array.from(this.parentMap.get(roomId) || []); + for (const parentId of parentIds) { + const room = this.matrixClient.getRoom(parentId); + if (room) { + parent = room; + break; + } + } } // don't trigger a context switch when we are switching a space to match the chosen room From ab94b284b8325f5da9cf7e662a6f92288b887149 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 16:29:10 +0100 Subject: [PATCH 0470/1270] Updates around the use of private fields out of class --- src/components/views/rooms/NewRoomIntro.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx index 2b2958e3f3..cae86846d9 100644 --- a/src/components/views/rooms/NewRoomIntro.tsx +++ b/src/components/views/rooms/NewRoomIntro.tsx @@ -37,8 +37,8 @@ import { privateShouldBeEncrypted } from "../../../createRoom"; import EventTileBubble from "../messages/EventTileBubble"; import { ROOM_SECURITY_TAB } from "../dialogs/RoomSettingsDialog"; -function hasExpectedEncryptionSettings(room): boolean { - const isEncrypted: boolean = room._client?.isRoomEncrypted(room.roomId); +function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean { + const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId); const isPublic: boolean = room.getJoinRule() === "public"; return isPublic || !privateShouldBeEncrypted() || isEncrypted; } @@ -195,7 +195,7 @@ const NewRoomIntro = () => { return
    - { !hasExpectedEncryptionSettings(room) && ( + { !hasExpectedEncryptionSettings(cli, room) && ( Date: Fri, 18 Jun 2021 17:29:12 +0200 Subject: [PATCH 0471/1270] Add PR template MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .github/PULL_REQUEST_TEMPLATE.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .github/PULL_REQUEST_TEMPLATE.md diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000000..c9d11f02c8 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,3 @@ + + + From 77a4d345bda4791bfec1b8fee643e2b29441a1c2 Mon Sep 17 00:00:00 2001 From: David Teller Date: Fri, 18 Jun 2021 18:09:02 +0200 Subject: [PATCH 0472/1270] Submitting abuse reports to moderators (#6213) This patch is part of MSC3215. It implements `feature_report_to_moderator` to let end-users send report to room moderators instead of homeserver administrators. This only works if the room has been setup for moderation, something that does not have a UX yet. Signed-off-by: David Teller --- .../views/dialogs/ReportEventDialog.js | 149 ------ .../views/dialogs/ReportEventDialog.tsx | 445 ++++++++++++++++++ src/i18n/strings/en_EN.json | 18 +- src/settings/Settings.tsx | 7 + 4 files changed, 468 insertions(+), 151 deletions(-) delete mode 100644 src/components/views/dialogs/ReportEventDialog.js create mode 100644 src/components/views/dialogs/ReportEventDialog.tsx diff --git a/src/components/views/dialogs/ReportEventDialog.js b/src/components/views/dialogs/ReportEventDialog.js deleted file mode 100644 index 5454b97287..0000000000 --- a/src/components/views/dialogs/ReportEventDialog.js +++ /dev/null @@ -1,149 +0,0 @@ -/* -Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import React, {PureComponent} from 'react'; -import * as sdk from '../../../index'; -import { _t } from '../../../languageHandler'; -import PropTypes from "prop-types"; -import {MatrixEvent} from "matrix-js-sdk/src/models/event"; -import {MatrixClientPeg} from "../../../MatrixClientPeg"; -import SdkConfig from '../../../SdkConfig'; -import Markdown from '../../../Markdown'; -import {replaceableComponent} from "../../../utils/replaceableComponent"; - -/* - * A dialog for reporting an event. - */ -@replaceableComponent("views.dialogs.ReportEventDialog") -export default class ReportEventDialog extends PureComponent { - static propTypes = { - mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired, - onFinished: PropTypes.func.isRequired, - }; - - constructor(props) { - super(props); - - this.state = { - reason: "", - busy: false, - err: null, - }; - } - - _onReasonChange = ({target: {value: reason}}) => { - this.setState({ reason }); - }; - - _onCancel = () => { - this.props.onFinished(false); - }; - - _onSubmit = async () => { - if (!this.state.reason || !this.state.reason.trim()) { - this.setState({ - err: _t("Please fill why you're reporting."), - }); - return; - } - - this.setState({ - busy: true, - err: null, - }); - - try { - const ev = this.props.mxEvent; - await MatrixClientPeg.get().reportEvent(ev.getRoomId(), ev.getId(), -100, this.state.reason.trim()); - this.props.onFinished(true); - } catch (e) { - this.setState({ - busy: false, - err: e.message, - }); - } - }; - - render() { - const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); - const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); - const Loader = sdk.getComponent('elements.Spinner'); - const Field = sdk.getComponent('elements.Field'); - - let error = null; - if (this.state.err) { - error =
    - {this.state.err} -
    ; - } - - let progress = null; - if (this.state.busy) { - progress = ( -
    - -
    - ); - } - - const adminMessageMD = - SdkConfig.get().reportEvent && - SdkConfig.get().reportEvent.adminMessageMD; - let adminMessage; - if (adminMessageMD) { - const html = new Markdown(adminMessageMD).toHTML({ externalLinks: true }); - adminMessage =

    ; - } - - return ( - -

    -

    - { - _t("Reporting this message will send its unique 'event ID' to the administrator of " + - "your homeserver. If messages in this room are encrypted, your homeserver " + - "administrator will not be able to read the message text or view any files or images.") - } -

    - {adminMessage} - - {progress} - {error} -
    - - - ); - } -} diff --git a/src/components/views/dialogs/ReportEventDialog.tsx b/src/components/views/dialogs/ReportEventDialog.tsx new file mode 100644 index 0000000000..8271239f7f --- /dev/null +++ b/src/components/views/dialogs/ReportEventDialog.tsx @@ -0,0 +1,445 @@ +/* +Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import * as sdk from '../../../index'; +import { _t } from '../../../languageHandler'; +import { ensureDMExists } from "../../../createRoom"; +import { IDialogProps } from "./IDialogProps"; +import {MatrixEvent} from "matrix-js-sdk/src/models/event"; +import {MatrixClientPeg} from "../../../MatrixClientPeg"; +import SdkConfig from '../../../SdkConfig'; +import Markdown from '../../../Markdown'; +import {replaceableComponent} from "../../../utils/replaceableComponent"; +import SettingsStore from "../../../settings/SettingsStore"; +import StyledRadioButton from "../elements/StyledRadioButton"; + +interface IProps extends IDialogProps { + mxEvent: MatrixEvent; +} + +interface IState { + // A free-form text describing the abuse. + reason: string; + busy: boolean; + err?: string; + // If we know it, the nature of the abuse, as specified by MSC3215. + nature?: EXTENDED_NATURE; +} + + +const MODERATED_BY_STATE_EVENT_TYPE = [ + "org.matrix.msc3215.room.moderation.moderated_by", + /** + * Unprefixed state event. Not ready for prime time. + * + * "m.room.moderation.moderated_by" + */ +]; + +const ABUSE_EVENT_TYPE = "org.matrix.msc3215.abuse.report"; + +// Standard abuse natures. +enum NATURE { + DISAGREEMENT = "org.matrix.msc3215.abuse.nature.disagreement", + TOXIC = "org.matrix.msc3215.abuse.nature.toxic", + ILLEGAL = "org.matrix.msc3215.abuse.nature.illegal", + SPAM = "org.matrix.msc3215.abuse.nature.spam", + OTHER = "org.matrix.msc3215.abuse.nature.other", +} + +enum NON_STANDARD_NATURE { + // Non-standard abuse nature. + // It should never leave the client - we use it to fallback to + // server-wide abuse reporting. + ADMIN = "non-standard.abuse.nature.admin" +} + +type EXTENDED_NATURE = NATURE | NON_STANDARD_NATURE; + +type Moderation = { + // The id of the moderation room. + moderationRoomId: string; + // The id of the bot in charge of forwarding abuse reports to the moderation room. + moderationBotUserId: string; +} +/* + * A dialog for reporting an event. + * + * The actual content of the dialog will depend on two things: + * + * 1. Is `feature_report_to_moderators` enabled? + * 2. Does the room support moderation as per MSC3215, i.e. is there + * a well-formed state event `m.room.moderation.moderated_by` + * /`org.matrix.msc3215.room.moderation.moderated_by`? + */ +@replaceableComponent("views.dialogs.ReportEventDialog") +export default class ReportEventDialog extends React.Component { + // If the room supports moderation, the moderation information. + private moderation?: Moderation; + + constructor(props: IProps) { + super(props); + + let moderatedByRoomId = null; + let moderatedByUserId = null; + + if (SettingsStore.getValue("feature_report_to_moderators")) { + // The client supports reporting to moderators. + // Does the room support it, too? + + // Extract state events to determine whether we should display + const client = MatrixClientPeg.get(); + const room = client.getRoom(props.mxEvent.getRoomId()); + + for (const stateEventType of MODERATED_BY_STATE_EVENT_TYPE) { + const stateEvent = room.currentState.getStateEvents(stateEventType, stateEventType); + if (!stateEvent) { + continue; + } + if (Array.isArray(stateEvent)) { + // Internal error. + throw new TypeError(`getStateEvents(${stateEventType}, ${stateEventType}) ` + + "should return at most one state event"); + } + const event = stateEvent.event; + if (!("content" in event) || typeof event["content"] != "object") { + // The room is improperly configured. + // Display this debug message for the sake of moderators. + console.debug("Moderation error", "state event", stateEventType, + "should have an object field `content`, got", event); + continue; + } + const content = event["content"]; + if (!("room_id" in content) || typeof content["room_id"] != "string") { + // The room is improperly configured. + // Display this debug message for the sake of moderators. + console.debug("Moderation error", "state event", stateEventType, + "should have a string field `content.room_id`, got", event); + continue; + } + if (!("user_id" in content) || typeof content["user_id"] != "string") { + // The room is improperly configured. + // Display this debug message for the sake of moderators. + console.debug("Moderation error", "state event", stateEventType, + "should have a string field `content.user_id`, got", event); + continue; + } + moderatedByRoomId = content["room_id"]; + moderatedByUserId = content["user_id"]; + } + + if (moderatedByRoomId && moderatedByUserId) { + // The room supports moderation. + this.moderation = { + moderationRoomId: moderatedByRoomId, + moderationBotUserId: moderatedByUserId, + }; + } + } + + this.state = { + // A free-form text describing the abuse. + reason: "", + busy: false, + err: null, + // If specified, the nature of the abuse, as specified by MSC3215. + nature: null, + }; + } + + // The user has written down a freeform description of the abuse. + private onReasonChange = ({target: {value: reason}}): void => { + this.setState({ reason }); + }; + + // The user has clicked on a nature. + private onNatureChosen = (e: React.FormEvent): void => { + this.setState({ nature: e.currentTarget.value as EXTENDED_NATURE}); + }; + + // The user has clicked "cancel". + private onCancel = (): void => { + this.props.onFinished(false); + }; + + // The user has clicked "submit". + private onSubmit = async () => { + let reason = this.state.reason || ""; + reason = reason.trim(); + if (this.moderation) { + // This room supports moderation. + // We need a nature. + // If the nature is `NATURE.OTHER` or `NON_STANDARD_NATURE.ADMIN`, we also need a `reason`. + if (!this.state.nature || + ((this.state.nature == NATURE.OTHER || this.state.nature == NON_STANDARD_NATURE.ADMIN) + && !reason) + ) { + this.setState({ + err: _t("Please fill why you're reporting."), + }); + return; + } + } else { + // This room does not support moderation. + // We need a `reason`. + if (!reason) { + this.setState({ + err: _t("Please fill why you're reporting."), + }); + return; + } + } + + this.setState({ + busy: true, + err: null, + }); + + try { + const client = MatrixClientPeg.get(); + const ev = this.props.mxEvent; + if (this.moderation && this.state.nature != NON_STANDARD_NATURE.ADMIN) { + const nature: NATURE = this.state.nature; + + // Report to moderators through to the dedicated bot, + // as configured in the room's state events. + const dmRoomId = await ensureDMExists(client, this.moderation.moderationBotUserId); + await client.sendEvent(dmRoomId, ABUSE_EVENT_TYPE, { + event_id: ev.getId(), + room_id: ev.getRoomId(), + moderated_by_id: this.moderation.moderationRoomId, + nature, + reporter: client.getUserId(), + comment: this.state.reason.trim(), + }); + } else { + // Report to homeserver admin through the dedicated Matrix API. + await client.reportEvent(ev.getRoomId(), ev.getId(), -100, this.state.reason.trim()); + } + this.props.onFinished(true); + } catch (e) { + this.setState({ + busy: false, + err: e.message, + }); + } + }; + + render() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); + const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); + const Loader = sdk.getComponent('elements.Spinner'); + const Field = sdk.getComponent('elements.Field'); + + let error = null; + if (this.state.err) { + error =
    + {this.state.err} +
    ; + } + + let progress = null; + if (this.state.busy) { + progress = ( +
    + +
    + ); + } + + const adminMessageMD = + SdkConfig.get().reportEvent && + SdkConfig.get().reportEvent.adminMessageMD; + let adminMessage; + if (adminMessageMD) { + const html = new Markdown(adminMessageMD).toHTML({ externalLinks: true }); + adminMessage =

    ; + } + + if (this.moderation) { + // Display report-to-moderator dialog. + // We let the user pick a nature. + const client = MatrixClientPeg.get(); + const homeServerName = SdkConfig.get()["validated_server_config"].hsName; + let subtitle; + switch (this.state.nature) { + case NATURE.DISAGREEMENT: + subtitle = _t("What this user is writing is wrong.\n" + + "This will be reported to the room moderators."); + break; + case NATURE.TOXIC: + subtitle = _t("This user is displaying toxic behaviour, " + + "for instance by insulting other users or sharing " + + " adult-only content in a family-friendly room " + + " or otherwise violating the rules of this room.\n" + + "This will be reported to the room moderators."); + break; + case NATURE.ILLEGAL: + subtitle = _t("This user is displaying illegal behaviour, " + + "for instance by doxing people or threatening violence.\n" + + "This will be reported to the room moderators who may escalate this to legal authorities."); + break; + case NATURE.SPAM: + subtitle = _t("This user is spamming the room with ads, links to ads or to propaganda.\n" + + "This will be reported to the room moderators."); + break; + case NON_STANDARD_NATURE.ADMIN: + if (client.isRoomEncrypted(this.props.mxEvent.getRoomId())) { + subtitle = _t("This room is dedicated to illegal or toxic content " + + "or the moderators fail to moderate illegal or toxic content.\n" + + "This will be reported to the administrators of %(homeserver)s. " + + "The administrators will NOT be able to read the encrypted content of this room.", + { homeserver: homeServerName }); + } else { + subtitle = _t("This room is dedicated to illegal or toxic content " + + "or the moderators fail to moderate illegal or toxic content.\n" + + " This will be reported to the administrators of %(homeserver)s.", + { homeserver: homeServerName }); + } + break; + case NATURE.OTHER: + subtitle = _t("Any other reason. Please describe the problem.\n" + + "This will be reported to the room moderators."); + break; + default: + subtitle = _t("Please pick a nature and describe what makes this message abusive."); + break; + } + + return ( + +

    + + {_t('Disagree')} + + + {_t('Toxic Behaviour')} + + + {_t('Illegal Content')} + + + {_t('Spam or propaganda')} + + + {_t('Report the entire room')} + + + {_t('Other')} + +

    + {subtitle} +

    + + {progress} + {error} +
    + + + ); + } + // Report to homeserver admin. + // Currently, the API does not support natures. + return ( + +
    +

    + { + _t("Reporting this message will send its unique 'event ID' to the administrator of " + + "your homeserver. If messages in this room are encrypted, your homeserver " + + "administrator will not be able to read the message text or view any files " + + "or images.") + } +

    + {adminMessage} + + {progress} + {error} +
    + +     + ); + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 8c4262fe44..b88dc79da5 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -784,6 +784,7 @@ "%(senderName)s: %(reaction)s": "%(senderName)s: %(reaction)s", "%(senderName)s: %(stickerName)s": "%(senderName)s: %(stickerName)s", "Change notification settings": "Change notification settings", + "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators": "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators", "Spaces prototype. Incompatible with Communities, Communities v2 and Custom Tags. Requires compatible homeserver for some features.": "Spaces prototype. Incompatible with Communities, Communities v2 and Custom Tags. Requires compatible homeserver for some features.", "Spaces": "Spaces", "Spaces are a new way to group rooms and people.": "Spaces are a new way to group rooms and people.", @@ -2318,9 +2319,23 @@ "Just a heads up, if you don't add an email and forget your password, you could permanently lose access to your account.": "Just a heads up, if you don't add an email and forget your password, you could permanently lose access to your account.", "Email (optional)": "Email (optional)", "Please fill why you're reporting.": "Please fill why you're reporting.", + "What this user is writing is wrong.\nThis will be reported to the room moderators.": "What this user is writing is wrong.\nThis will be reported to the room moderators.", + "This user is displaying toxic behaviour, for instance by insulting other users or sharing adult-only content in a family-friendly room or otherwise violating the rules of this room.\nThis will be reported to the room moderators.": "This user is displaying toxic behaviour, for instance by insulting other users or sharing adult-only content in a family-friendly room or otherwise violating the rules of this room.\nThis will be reported to the room moderators.", + "This user is displaying illegal behaviour, for instance by doxing people or threatening violence.\nThis will be reported to the room moderators who may escalate this to legal authorities.": "This user is displaying illegal behaviour, for instance by doxing people or threatening violence.\nThis will be reported to the room moderators who may escalate this to legal authorities.", + "This user is spamming the room with ads, links to ads or to propaganda.\nThis will be reported to the room moderators.": "This user is spamming the room with ads, links to ads or to propaganda.\nThis will be reported to the room moderators.", + "This room is dedicated to illegal or toxic content or the moderators fail to moderate illegal or toxic content.\nThis will be reported to the administrators of %(homeserver)s. The administrators will NOT be able to read the encrypted content of this room.": "This room is dedicated to illegal or toxic content or the moderators fail to moderate illegal or toxic content.\nThis will be reported to the administrators of %(homeserver)s. The administrators will NOT be able to read the encrypted content of this room.", + "This room is dedicated to illegal or toxic content or the moderators fail to moderate illegal or toxic content.\n This will be reported to the administrators of %(homeserver)s.": "This room is dedicated to illegal or toxic content or the moderators fail to moderate illegal or toxic content.\n This will be reported to the administrators of %(homeserver)s.", + "Any other reason. Please describe the problem.\nThis will be reported to the room moderators.": "Any other reason. Please describe the problem.\nThis will be reported to the room moderators.", + "Please pick a nature and describe what makes this message abusive.": "Please pick a nature and describe what makes this message abusive.", + "Report Content": "Report Content", + "Disagree": "Disagree", + "Toxic Behaviour": "Toxic Behaviour", + "Illegal Content": "Illegal Content", + "Spam or propaganda": "Spam or propaganda", + "Report the entire room": "Report the entire room", + "Send report": "Send report", "Report Content to Your Homeserver Administrator": "Report Content to Your Homeserver Administrator", "Reporting this message will send its unique 'event ID' to the administrator of your homeserver. If messages in this room are encrypted, your homeserver administrator will not be able to read the message text or view any files or images.": "Reporting this message will send its unique 'event ID' to the administrator of your homeserver. If messages in this room are encrypted, your homeserver administrator will not be able to read the message text or view any files or images.", - "Send report": "Send report", "Room Settings - %(roomName)s": "Room Settings - %(roomName)s", "Failed to upgrade room": "Failed to upgrade room", "The room upgrade could not be completed": "The room upgrade could not be completed", @@ -2487,7 +2502,6 @@ "Share Message": "Share Message", "Source URL": "Source URL", "Collapse Reply Thread": "Collapse Reply Thread", - "Report Content": "Report Content", "Clear status": "Clear status", "Update status": "Update status", "Set status": "Set status", diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 155d039572..97f1beb979 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -131,6 +131,13 @@ export interface ISetting { } export const SETTINGS: {[setting: string]: ISetting} = { + "feature_report_to_moderators": { + isFeature: true, + displayName: _td("Report to moderators prototype. " + + "In rooms that support moderation, the `report` button will let you report abuse to room moderators"), + supportedLevels: LEVELS_FEATURE, + default: false, + }, "feature_spaces": { isFeature: true, displayName: _td("Spaces prototype. Incompatible with Communities, Communities v2 and Custom Tags. " + From 8a3dc1bbdf6e5482e54b8bf159911a1b273a2e18 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 17:56:18 +0100 Subject: [PATCH 0473/1270] fix tests --- test/components/structures/MessagePanel-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js index 8f0242eb30..d32970a278 100644 --- a/test/components/structures/MessagePanel-test.js +++ b/test/components/structures/MessagePanel-test.js @@ -42,7 +42,7 @@ import DMRoomMap from "../../../src/utils/DMRoomMap"; configure({ adapter: new Adapter() }); let client; -const room = new Matrix.Room(); +const room = new Matrix.Room("!roomId:server_name"); // wrap MessagePanel with a component which provides the MatrixClient in the context. class WrappedMessagePanel extends React.Component { From 946317ddf87bdb0178a7bf92824204e00a27166f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 18 Jun 2021 19:04:55 +0200 Subject: [PATCH 0474/1270] Move moving out of state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 13c272bebb..865a3f34af 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -60,9 +60,6 @@ interface IState { // Position of the CallPreview translationX: number; translationY: number; - - // True if the CallPreview is being dragged - moving: boolean; } // Splits a list of calls into one 'primary' one and a list @@ -121,7 +118,6 @@ export default class CallPreview extends React.Component { secondaryCall: secondaryCalls[0], translationX: UIStore.instance.windowWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH, translationY: DEFAULT_Y_OFFSET, - moving: false, }; } @@ -129,6 +125,7 @@ export default class CallPreview extends React.Component { private initX = 0; private initY = 0; + private moving = false; public componentDidMount() { CallHandler.sharedInstance().addListener(CallHandlerEvent.CallChangeRoom, this.updateCalls); @@ -240,14 +237,14 @@ export default class CallPreview extends React.Component { event.preventDefault(); event.stopPropagation(); - this.setState({moving: true}); + this.moving = true; this.initX = event.pageX - this.state.translationX; this.initY = event.pageY - this.state.translationY; }; private onMoving = (event: React.MouseEvent | MouseEvent) => { - if (!this.state.moving) return; + if (!this.moving) return; event.preventDefault(); event.stopPropagation(); @@ -256,7 +253,7 @@ export default class CallPreview extends React.Component { }; private onEndMoving = () => { - this.setState({moving: false}); + this.moving = false; }; public render() { From 958d4df957f065d321c08e04e73428c5020a6455 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 18:32:45 +0100 Subject: [PATCH 0475/1270] Naive attempt at improving our end-to-end tests in Github Actions --- .github/workflows/develop.yml | 7 +++++-- ...d-tests.sh => prepare-end-to-end-tests.sh} | 11 +---------- scripts/ci/run-end-to-end-tests.sh | 19 +++++++++++++++++++ 3 files changed, 25 insertions(+), 12 deletions(-) rename scripts/ci/{end-to-end-tests.sh => prepare-end-to-end-tests.sh} (65%) create mode 100755 scripts/ci/run-end-to-end-tests.sh diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml index 6410bd28fa..3c3807e33b 100644 --- a/.github/workflows/develop.yml +++ b/.github/workflows/develop.yml @@ -11,10 +11,13 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v2 - - name: End-to-End tests - run: ./scripts/ci/end-to-end-tests.sh + - name: Prepare End-to-End tests + run: ./scripts/ci/prepare-end-to-end-tests.sh + - name: Run End-to-End tests + run: ./scripts/ci/run-end-to-end-tests.sh - name: Archive logs uses: actions/upload-artifact@v2 + if: ${{ always() }} with: path: | test/end-to-end-tests/logs/**/* diff --git a/scripts/ci/end-to-end-tests.sh b/scripts/ci/prepare-end-to-end-tests.sh similarity index 65% rename from scripts/ci/end-to-end-tests.sh rename to scripts/ci/prepare-end-to-end-tests.sh index edb8870d8e..147e1f6445 100755 --- a/scripts/ci/end-to-end-tests.sh +++ b/scripts/ci/prepare-end-to-end-tests.sh @@ -1,8 +1,4 @@ #!/bin/bash -# -# script which is run by the CI build (after `yarn test`). -# -# clones element-web develop and runs the tests against our version of react-sdk. set -ev @@ -19,7 +15,7 @@ cd element-web element_web_dir=`pwd` CI_PACKAGE=true yarn build cd .. -# run end to end tests +# prepare end to end tests pushd test/end-to-end-tests ln -s $element_web_dir element/element-web # PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ./install.sh @@ -28,9 +24,4 @@ echo "--- Install synapse & other dependencies" ./install.sh # install static webserver to server symlinked local copy of element ./element/install-webserver.sh -rm -r logs || true -mkdir logs -echo "+++ Running end-to-end tests" -TESTS_STARTED=1 -./run.sh --no-sandbox --log-directory logs/ popd diff --git a/scripts/ci/run-end-to-end-tests.sh b/scripts/ci/run-end-to-end-tests.sh new file mode 100755 index 0000000000..3c99391fc7 --- /dev/null +++ b/scripts/ci/run-end-to-end-tests.sh @@ -0,0 +1,19 @@ +#!/bin/bash + +set -ev + +handle_error() { + EXIT_CODE=$? + exit $EXIT_CODE +} + +trap 'handle_error' ERR + +# run end to end tests +pushd test/end-to-end-tests +rm -r logs || true +mkdir logs +echo "--- Running end-to-end tests" +TESTS_STARTED=1 +./run.sh --no-sandbox --log-directory logs/ +popd From 6271c5c3d8344e1c135f8f0736089e5d9945f39d Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 18 Jun 2021 18:59:22 +0100 Subject: [PATCH 0476/1270] first iteration for message bubble layout --- res/css/_components.scss | 1 + res/css/views/messages/_MImageBody.scss | 1 - res/css/views/messages/_ReactionsRow.scss | 1 + res/css/views/rooms/_EventBubbleTile.scss | 149 ++++ res/css/views/rooms/_EventTile.scss | 769 +++++++++--------- .../views/elements/EventListSummary.tsx | 8 +- src/components/views/messages/UnknownBody.js | 3 +- src/components/views/rooms/EventTile.tsx | 17 +- 8 files changed, 559 insertions(+), 390 deletions(-) create mode 100644 res/css/views/rooms/_EventBubbleTile.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 56403ea190..67831e4a60 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -194,6 +194,7 @@ @import "./views/rooms/_EditMessageComposer.scss"; @import "./views/rooms/_EntityTile.scss"; @import "./views/rooms/_EventTile.scss"; +@import "./views/rooms/_EventBubbleTile.scss"; @import "./views/rooms/_GroupLayout.scss"; @import "./views/rooms/_IRCLayout.scss"; @import "./views/rooms/_JumpToBottomButton.scss"; diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 1c773c2f06..6ac6767ffa 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -16,7 +16,6 @@ limitations under the License. .mx_MImageBody { display: block; - margin-right: 34px; } .mx_MImageBody_thumbnail { diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss index e05065eb02..b2bca6dfb3 100644 --- a/res/css/views/messages/_ReactionsRow.scss +++ b/res/css/views/messages/_ReactionsRow.scss @@ -26,6 +26,7 @@ limitations under the License. height: 24px; vertical-align: middle; margin-left: 4px; + margin-right: 4px; &::before { content: ''; diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss new file mode 100644 index 0000000000..28dce730ff --- /dev/null +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -0,0 +1,149 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_EventTile[data-layout=bubble] { + + --avatarSize: 32px; + --gutterSize: 7px; + --cornerRadius: 5px; + + --maxWidth: 70%; + + position: relative; + margin-top: var(--gutterSize); + margin-left: var(--avatarSize); + margin-right: var(--avatarSize); + padding: 2px 0; + + &:hover { + background: rgb(242, 242, 242); + } + + .mx_SenderProfile, + .mx_EventTile_line { + width: fit-content; + max-width: 70%; + background: var(--backgroundColor); + } + + .mx_SenderProfile { + display: none; + padding: var(--gutterSize) var(--gutterSize) 0 var(--gutterSize); + border-top-left-radius: var(--cornerRadius); + border-top-right-radius: var(--cornerRadius); + } + + .mx_EventTile_line { + padding: var(--gutterSize); + border-radius: var(--cornerRadius); + } + + /* + .mx_SenderProfile + .mx_EventTile_line { + padding-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + */ + + .mx_EventTile_avatar { + position: absolute; + top: 0; + img { + border: 2px solid #fff; + border-radius: 50%; + } + } + + &[data-self=true] { + .mx_EventTile_line { + float: right; + } + .mx_ReactionsRow { + float: right; + clear: right; + display: flex; + + /* Moving the "add reaction button" before the reactions */ + > :last-child { + order: -1; + } + } + .mx_EventTile_avatar { + right: calc(-1 * var(--avatarSize)); + } + --backgroundColor: #F8FDFC; + } + + &:not([data-self=true]) { + .mx_EventTile_avatar { + left: calc(-1 * var(--avatarSize)); + } + --backgroundColor: #F7F8F9; + } + + &.mx_EventTile_bubbleContainer, + &.mx_EventTile_info, + & ~ .mx_EventListSummary[data-expanded=false] { + + --backgroundColor: transparent; + + display: flex; + align-items: center; + justify-content: center; + + .mx_EventTile_avatar { + position: static; + order: -1; + } + } + + & ~ .mx_EventListSummary { + --maxWidth: 95%; + .mx_EventListSummary_toggle { + float: none; + margin: 0; + order: 9; + } + } + + & + .mx_EventListSummary { + .mx_EventTile { + margin-top: 0; + padding: 0; + } + } + + .mx_EventListSummary_toggle { + margin-right: 55px; + } + + .mx_EventTile_line { + display: flex; + gap: var(--gutterSize); + > a { + order: 999; /* always display the timestamp as the last item */ + align-self: flex-end; + } + } + + .mx_EventTile_readAvatars { + position: absolute; + right: 0; + bottom: 0; + } + +} diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 3af266caee..303118d57c 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -1,6 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd -Copyright 2020 The Matrix.org Foundation C.I.C. +Copyright 2020-2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -18,101 +18,382 @@ limitations under the License. $left-gutter: 64px; $hover-select-border: 4px; -.mx_EventTile { +.mx_EventTile:not([data-layout=bubble]) { max-width: 100%; clear: both; padding-top: 18px; font-size: $font-14px; position: relative; -} -.mx_EventTile.mx_EventTile_info { - padding-top: 1px; -} - -.mx_EventTile_avatar { - top: 14px; - left: 8px; - cursor: pointer; - user-select: none; -} - -.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { - top: $font-6px; - left: $left-gutter; -} - -.mx_EventTile_continuation { - padding-top: 0px !important; - - &.mx_EventTile_isEditing { - padding-top: 5px !important; - margin-top: -5px; + .mx_EventTile.mx_EventTile_info { + padding-top: 1px; } -} -.mx_EventTile_isEditing { - background-color: $header-panel-bg-color; -} + .mx_EventTile_avatar { + top: 14px; + left: 8px; + cursor: pointer; + user-select: none; + } -.mx_EventTile .mx_SenderProfile { - color: $primary-fg-color; - font-size: $font-14px; - display: inline-block; /* anti-zalgo, with overflow hidden */ - overflow: hidden; - cursor: pointer; - padding-bottom: 0px; - padding-top: 0px; - margin: 0px; - /* the next three lines, along with overflow hidden, truncate long display names */ - white-space: nowrap; - text-overflow: ellipsis; - max-width: calc(100% - $left-gutter); -} + .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { + top: $font-6px; + left: $left-gutter; + } -.mx_EventTile .mx_SenderProfile .mx_Flair { - opacity: 0.7; - margin-left: 5px; - display: inline-block; - vertical-align: top; - overflow: hidden; - user-select: none; + .mx_EventTile_continuation { + padding-top: 0px !important; - img { - vertical-align: -2px; - margin-right: 2px; + &.mx_EventTile_isEditing { + padding-top: 5px !important; + margin-top: -5px; + } + } + + .mx_EventTile_isEditing { + background-color: $header-panel-bg-color; + } + + .mx_EventTile .mx_SenderProfile { + color: $primary-fg-color; + font-size: $font-14px; + display: inline-block; /* anti-zalgo, with overflow hidden */ + overflow: hidden; + cursor: pointer; + padding-bottom: 0px; + padding-top: 0px; + margin: 0px; + /* the next three lines, along with overflow hidden, truncate long display names */ + white-space: nowrap; + text-overflow: ellipsis; + max-width: calc(100% - $left-gutter); + } + + .mx_EventTile .mx_SenderProfile .mx_Flair { + opacity: 0.7; + margin-left: 5px; + display: inline-block; + vertical-align: top; + overflow: hidden; + user-select: none; + + img { + vertical-align: -2px; + margin-right: 2px; + border-radius: 8px; + } + } + + .mx_EventTile_isEditing .mx_MessageTimestamp { + visibility: hidden; + } + + .mx_EventTile .mx_MessageTimestamp { + display: block; + white-space: nowrap; + left: 0px; + text-align: center; + user-select: none; + } + + .mx_EventTile_continuation .mx_EventTile_line { + clear: both; + } + + .mx_EventTile_line, .mx_EventTile_reply { + position: relative; + padding-left: $left-gutter; border-radius: 8px; } -} -.mx_EventTile_isEditing .mx_MessageTimestamp { - visibility: hidden; -} + .mx_RoomView_timeline_rr_enabled, + // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter + .mx_EventListSummary { + .mx_EventTile_line { + /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ + margin-right: 110px; + } + } -.mx_EventTile .mx_MessageTimestamp { - display: block; - white-space: nowrap; - left: 0px; - text-align: center; - user-select: none; -} + .mx_EventTile_reply { + margin-right: 10px; + } -.mx_EventTile_continuation .mx_EventTile_line { - clear: both; -} + .mx_EventTile_selected > div > a > .mx_MessageTimestamp { + left: calc(-$hover-select-border); + } -.mx_EventTile_line, .mx_EventTile_reply { - position: relative; - padding-left: $left-gutter; - border-radius: 8px; -} + .mx_EventTile:hover .mx_MessageActionBar, + .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar, + [data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar, + .mx_EventTile.focus-visible:focus-within .mx_MessageActionBar { + visibility: visible; + } -.mx_RoomView_timeline_rr_enabled, -// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter -.mx_EventListSummary { - .mx_EventTile_line { - /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ - margin-right: 110px; + /* this is used for the tile for the event which is selected via the URL. + * TODO: ultimately we probably want some transition on here. + */ + .mx_EventTile_selected > .mx_EventTile_line { + border-left: $accent-color 4px solid; + padding-left: calc($left-gutter - $hover-select-border); + background-color: $event-selected-color; + } + + .mx_EventTile_highlight, + .mx_EventTile_highlight .markdown-body { + color: $event-highlight-fg-color; + + .mx_EventTile_line { + background-color: $event-highlight-bg-color; + } + } + + .mx_EventTile_info .mx_EventTile_line { + padding-left: calc($left-gutter + 18px); + } + + .mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { + padding-left: calc($left-gutter + 18px - $hover-select-border); + } + + .mx_EventTile:hover .mx_EventTile_line, + .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line, + .mx_EventTile.focus-visible:focus-within .mx_EventTile_line { + background-color: $event-selected-color; + } + + .mx_EventTile_searchHighlight { + background-color: $accent-color; + color: $accent-fg-color; + border-radius: 5px; + padding-left: 2px; + padding-right: 2px; + cursor: pointer; + } + + .mx_EventTile_searchHighlight a { + background-color: $accent-color; + color: $accent-fg-color; + } + + .mx_EventTile_receiptSent, + .mx_EventTile_receiptSending { + // We don't use `position: relative` on the element because then it won't line + // up with the other read receipts + + &::before { + background-color: $tertiary-fg-color; + mask-repeat: no-repeat; + mask-position: center; + mask-size: 14px; + width: 14px; + height: 14px; + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + } + } + .mx_EventTile_receiptSent::before { + mask-image: url('$(res)/img/element-icons/circle-sent.svg'); + } + .mx_EventTile_receiptSending::before { + mask-image: url('$(res)/img/element-icons/circle-sending.svg'); + } + + .mx_EventTile_contextual { + opacity: 0.4; + } + + .mx_EventTile_msgOption { + float: right; + text-align: right; + position: relative; + width: 90px; + + /* Hack to stop the height of this pushing the messages apart. + Replaces margin-top: -6px. This interacts better with a read + marker being in between. Content overflows. */ + height: 1px; + + margin-right: 10px; + } + + .mx_EventTile_msgOption a { + text-decoration: none; + } + + /* 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; + } + + .mx_EventTile_e2eIcon { + position: absolute; + top: 6px; + left: 44px; + width: 14px; + height: 14px; + display: block; + bottom: 0; + right: 0; + opacity: 0.2; + background-repeat: no-repeat; + background-size: contain; + + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } + + &::before { + background-color: #ffffff; + mask-image: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; + } + } + + .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } + opacity: 1; + } + + .mx_EventTile_e2eIcon_unknown { + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } + opacity: 1; + } + + .mx_EventTile_e2eIcon_unencrypted { + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } + opacity: 1; + } + + .mx_EventTile_e2eIcon_unauthenticated { + &::after { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $composer-e2e-icon-color; + } + opacity: 1; + } + + .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, + .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, + .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { + padding-left: calc($left-gutter - $hover-select-border); + } + + .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { + border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid; + } + + .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { + border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid; + } + + .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { + border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid; + } + + .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, + .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, + .mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { + padding-left: calc($left-gutter + 18px - $hover-select-border); + } + + /* End to end encryption stuff */ + .mx_EventTile:hover .mx_EventTile_e2eIcon { + opacity: 1; + } + + // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) + .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, + .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, + .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { + left: calc(-$hover-select-border); + } + + // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) + .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, + .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon, + .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon { + display: block; + left: 41px; + } + + .mx_EventTile_tileError { + color: red; + text-align: center; + + // Remove some of the default tile padding so that the error is centered + margin-right: 0; + .mx_EventTile_line { + padding-left: 0; + margin-right: 0; + } + + .mx_EventTile_line span { + padding: 4px 8px; + } + + a { + margin-left: 1em; + } + } + + .mx_MImageBody { + margin-right: 34px; } } @@ -132,121 +413,6 @@ $hover-select-border: 4px; } } -.mx_EventTile_reply { - margin-right: 10px; -} - -/* HACK to override line-height which is already marked important elsewhere */ -.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { - font-size: 48px !important; - line-height: 57px !important; -} - -.mx_EventTile_selected > div > a > .mx_MessageTimestamp { - left: calc(-$hover-select-border); -} - -.mx_EventTile:hover .mx_MessageActionBar, -.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar, -[data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar, -.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar { - visibility: visible; -} - -/* this is used for the tile for the event which is selected via the URL. - * TODO: ultimately we probably want some transition on here. - */ -.mx_EventTile_selected > .mx_EventTile_line { - border-left: $accent-color 4px solid; - padding-left: calc($left-gutter - $hover-select-border); - background-color: $event-selected-color; -} - -.mx_EventTile_highlight, -.mx_EventTile_highlight .markdown-body { - color: $event-highlight-fg-color; - - .mx_EventTile_line { - background-color: $event-highlight-bg-color; - } -} - -.mx_EventTile_info .mx_EventTile_line { - padding-left: calc($left-gutter + 18px); -} - -.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { - padding-left: calc($left-gutter + 18px - $hover-select-border); -} - -.mx_EventTile:hover .mx_EventTile_line, -.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line, -.mx_EventTile.focus-visible:focus-within .mx_EventTile_line { - background-color: $event-selected-color; -} - -.mx_EventTile_searchHighlight { - background-color: $accent-color; - color: $accent-fg-color; - border-radius: 5px; - padding-left: 2px; - padding-right: 2px; - cursor: pointer; -} - -.mx_EventTile_searchHighlight a { - background-color: $accent-color; - color: $accent-fg-color; -} - -.mx_EventTile_receiptSent, -.mx_EventTile_receiptSending { - // We don't use `position: relative` on the element because then it won't line - // up with the other read receipts - - &::before { - background-color: $tertiary-fg-color; - mask-repeat: no-repeat; - mask-position: center; - mask-size: 14px; - width: 14px; - height: 14px; - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - } -} -.mx_EventTile_receiptSent::before { - mask-image: url('$(res)/img/element-icons/circle-sent.svg'); -} -.mx_EventTile_receiptSending::before { - mask-image: url('$(res)/img/element-icons/circle-sending.svg'); -} - -.mx_EventTile_contextual { - opacity: 0.4; -} - -.mx_EventTile_msgOption { - float: right; - text-align: right; - position: relative; - width: 90px; - - /* Hack to stop the height of this pushing the messages apart. - Replaces margin-top: -6px. This interacts better with a read - marker being in between. Content overflows. */ - height: 1px; - - margin-right: 10px; -} - -.mx_EventTile_msgOption a { - text-decoration: none; -} - .mx_EventTile_readAvatars { position: relative; display: inline-block; @@ -277,180 +443,10 @@ $hover-select-border: 4px; position: absolute; } -/* 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; -} - -.mx_EventTile_e2eIcon { - position: absolute; - top: 6px; - left: 44px; - width: 14px; - height: 14px; - display: block; - bottom: 0; - right: 0; - opacity: 0.2; - background-repeat: no-repeat; - background-size: contain; - - &::before, &::after { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - } - - &::before { - background-color: #ffffff; - mask-image: url('$(res)/img/e2e/normal.svg'); - mask-repeat: no-repeat; - mask-position: center; - mask-size: 90%; - } -} - -.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { - &::after { - mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; - } - opacity: 1; -} - -.mx_EventTile_e2eIcon_unknown { - &::after { - mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; - } - opacity: 1; -} - -.mx_EventTile_e2eIcon_unencrypted { - &::after { - mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; - } - opacity: 1; -} - -.mx_EventTile_e2eIcon_unauthenticated { - &::after { - mask-image: url('$(res)/img/e2e/normal.svg'); - background-color: $composer-e2e-icon-color; - } - opacity: 1; -} - -.mx_EventTile_keyRequestInfo { - font-size: $font-12px; -} - -.mx_EventTile_keyRequestInfo_text { - opacity: 0.5; -} - -.mx_EventTile_keyRequestInfo_text a { - color: $primary-fg-color; - text-decoration: underline; - cursor: pointer; -} - -.mx_EventTile_keyRequestInfo_tooltip_contents p { - text-align: auto; - margin-left: 3px; - margin-right: 3px; -} - -.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child { - margin-top: 0px; -} - -.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child { - margin-bottom: 0px; -} - -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, -.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { - padding-left: calc($left-gutter - $hover-select-border); -} - -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid; -} - -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid; -} - -.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { - border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid; -} - -.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, -.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, -.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { - padding-left: calc($left-gutter + 18px - $hover-select-border); -} - -/* End to end encryption stuff */ -.mx_EventTile:hover .mx_EventTile_e2eIcon { - opacity: 1; -} - -// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, -.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { - left: calc(-$hover-select-border); -} - -// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon, -.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon { - display: block; - left: 41px; +/* HACK to override line-height which is already marked important elsewhere */ +.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { + font-size: 48px !important; + line-height: 57px !important; } .mx_EventTile_content .mx_EventTile_edited { @@ -601,24 +597,33 @@ $hover-select-border: 4px; /* end of overrides */ -.mx_EventTile_tileError { - color: red; - text-align: center; - // Remove some of the default tile padding so that the error is centered - margin-right: 0; - .mx_EventTile_line { - padding-left: 0; - margin-right: 0; - } +.mx_EventTile_keyRequestInfo { + font-size: $font-12px; +} - .mx_EventTile_line span { - padding: 4px 8px; - } +.mx_EventTile_keyRequestInfo_text { + opacity: 0.5; +} - a { - margin-left: 1em; - } +.mx_EventTile_keyRequestInfo_text a { + color: $primary-fg-color; + text-decoration: underline; + cursor: pointer; +} + +.mx_EventTile_keyRequestInfo_tooltip_contents p { + text-align: auto; + margin-left: 3px; + margin-right: 3px; +} + +.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child { + margin-top: 0px; +} + +.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child { + margin-bottom: 0px; } @media only screen and (max-width: 480px) { diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx index 86d3e082ad..3c64337367 100644 --- a/src/components/views/elements/EventListSummary.tsx +++ b/src/components/views/elements/EventListSummary.tsx @@ -63,7 +63,7 @@ const EventListSummary: React.FC = ({ // If we are only given few events then just pass them through if (events.length < threshold) { return ( -
  • +
  • { children }
    • ); @@ -92,7 +92,7 @@ const EventListSummary: React.FC = ({ } return ( -
  • +
  • { expanded ? _t('collapse') : _t('expand') } @@ -101,4 +101,8 @@ const EventListSummary: React.FC = ({ ); }; +EventListSummary.defaultProps = { + startExpanded: false, +}; + export default EventListSummary; diff --git a/src/components/views/messages/UnknownBody.js b/src/components/views/messages/UnknownBody.js index 786facc340..fdf0387a69 100644 --- a/src/components/views/messages/UnknownBody.js +++ b/src/components/views/messages/UnknownBody.js @@ -17,11 +17,12 @@ limitations under the License. import React, {forwardRef} from "react"; -export default forwardRef(({mxEvent}, ref) => { +export default forwardRef(({mxEvent, children}, ref) => { const text = mxEvent.getContent().body; return ( { text } + { children } ); }); diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 85b9cac2c4..a76cc04660 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -29,7 +29,7 @@ import { hasText } from "../../../TextForEvent"; import * as sdk from "../../../index"; import dis from '../../../dispatcher/dispatcher'; import SettingsStore from "../../../settings/SettingsStore"; -import {Layout} from "../../../settings/Layout"; +import { Layout } from "../../../settings/Layout"; import {formatTime} from "../../../DateUtils"; import {MatrixClientPeg} from '../../../MatrixClientPeg'; import {ALL_RULE_TYPES} from "../../../mjolnir/BanList"; @@ -988,8 +988,13 @@ export default class EventTile extends React.Component { onFocusChange={this.onActionBarFocusChange} /> : undefined; - const showTimestamp = this.props.mxEvent.getTs() && - (this.props.alwaysShowTimestamps || this.props.last || this.state.hover || this.state.actionBarFocused); + const showTimestamp = this.props.mxEvent.getTs() + && (this.props.alwaysShowTimestamps + || this.props.last + || this.state.hover + || this.state.actionBarFocused) + || this.props.layout === Layout.Bubble; + const timestamp = showTimestamp ? : null; @@ -1168,6 +1173,8 @@ export default class EventTile extends React.Component { this.props.alwaysShowTimestamps || this.state.hover, ); + const isOwnEvent = this.props.mxEvent.sender.userId === MatrixClientPeg.get().getUserId(); + // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers return ( React.createElement(this.props.as || "li", { @@ -1177,6 +1184,8 @@ export default class EventTile extends React.Component { "aria-live": ariaLive, "aria-atomic": "true", "data-scroll-tokens": scrollToken, + "data-layout": this.props.layout, + "data-self": isOwnEvent, "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), }, [ @@ -1198,9 +1207,9 @@ export default class EventTile extends React.Component { onHeightChanged={this.props.onHeightChanged} /> { keyRequestInfo } - { reactionsRow } { actionBar }
    • , + reactionsRow, msgOption, avatar, From 4ff25c5978484289d085466d0e60f3cbb23fabd9 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 19:16:39 +0100 Subject: [PATCH 0477/1270] Add jq to e2e tests Dockerfile --- scripts/ci/Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/ci/Dockerfile b/scripts/ci/Dockerfile index 3fdd0d7bf6..1d1425c865 100644 --- a/scripts/ci/Dockerfile +++ b/scripts/ci/Dockerfile @@ -3,6 +3,6 @@ # docker push vectorim/element-web-ci-e2etests-env:latest FROM node:14-buster RUN apt-get update -RUN apt-get -y install build-essential python3-dev libffi-dev python-pip python-setuptools sqlite3 libssl-dev python-virtualenv libjpeg-dev libxslt1-dev uuid-runtime +RUN apt-get -y install jq build-essential python3-dev libffi-dev python-pip python-setuptools sqlite3 libssl-dev python-virtualenv libjpeg-dev libxslt1-dev uuid-runtime # dependencies for chrome (installed by puppeteer) RUN apt-get -y install gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget From 61929e3fc2857140e12f7405cb5c3188d7327cf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 18 Jun 2021 19:43:19 +0200 Subject: [PATCH 0478/1270] Implement snapping MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 60 +++++++++++++++++++---- 1 file changed, 50 insertions(+), 10 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 865a3f34af..e5a0487a4a 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -32,8 +32,12 @@ import UIStore from '../../../stores/UIStore'; const PIP_VIEW_WIDTH = 336; const PIP_VIEW_HEIGHT = 232; -const DEFAULT_X_OFFSET = 16; -const DEFAULT_Y_OFFSET = 48; +const PADDING = { + top: 58, + bottom: 58, + left: 76, + right: 8, +} const SHOW_CALL_IN_STATES = [ CallState.Connected, @@ -44,6 +48,7 @@ const SHOW_CALL_IN_STATES = [ CallState.WaitLocalMedia, ]; + interface IProps { } @@ -116,8 +121,8 @@ export default class CallPreview extends React.Component { roomId, primaryCall: primaryCall, secondaryCall: secondaryCalls[0], - translationX: UIStore.instance.windowWidth - DEFAULT_X_OFFSET - PIP_VIEW_WIDTH, - translationY: DEFAULT_Y_OFFSET, + translationX: UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH, + translationY: UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH, }; } @@ -132,7 +137,7 @@ export default class CallPreview extends React.Component { this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); document.addEventListener("mousemove", this.onMoving); document.addEventListener("mouseup", this.onEndMoving); - window.addEventListener("resize", this.onWindowSizeChanged); + window.addEventListener("resize", this.snap); this.dispatcherRef = dis.register(this.onAction); MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); } @@ -142,7 +147,7 @@ export default class CallPreview extends React.Component { MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold); document.removeEventListener("mousemove", this.onMoving); document.removeEventListener("mouseup", this.onEndMoving); - window.removeEventListener("resize", this.onWindowSizeChanged); + window.removeEventListener("resize", this.snap); if (this.roomStoreToken) { this.roomStoreToken.remove(); } @@ -150,10 +155,6 @@ export default class CallPreview extends React.Component { SettingsStore.unwatchSetting(this.settingsWatcherRef); } - private onWindowSizeChanged = () => { - this.setTranslation(this.state.translationX, this.state.translationY); - }; - private setTranslation(inTranslationX: number, inTranslationY: number) { const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH; const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT; @@ -185,6 +186,44 @@ export default class CallPreview extends React.Component { }); } + private snap = () => { + const translationX = this.state.translationX; + const translationY = this.state.translationY; + // We subtract the PiP size from the window size in order to calculate + // the position to snap to from the PiP center and not its top-left + // corner + const windowWidth = ( + UIStore.instance.windowWidth - + (this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH) + ); + const windowHeight = ( + UIStore.instance.windowHeight - + (this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT) + ); + + if (translationX >= windowWidth / 2 && translationY >= windowHeight / 2) { + this.setState({ + translationX: windowWidth - PADDING.right, + translationY: windowHeight - PADDING.bottom, + }); + } else if (translationX >= windowWidth / 2 && translationY <= windowHeight / 2) { + this.setState({ + translationX: windowWidth - PADDING.right, + translationY: PADDING.top, + }); + } else if (translationX <= windowWidth / 2 && translationY >= windowHeight / 2) { + this.setState({ + translationX: PADDING.left, + translationY: windowHeight - PADDING.bottom, + }); + } else { + this.setState({ + translationX: PADDING.left, + translationY: PADDING.top, + }); + } + } + private onRoomViewStoreUpdate = (payload) => { if (RoomViewStore.getRoomId() === this.state.roomId) return; @@ -253,6 +292,7 @@ export default class CallPreview extends React.Component { }; private onEndMoving = () => { + this.snap(); this.moving = false; }; From 39ca2844bde3ecfecd9d4e6956654b047331d552 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 19 Jun 2021 10:10:27 +0200 Subject: [PATCH 0479/1270] Add AnimationUtils MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/utils/AnimationUtils.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/utils/AnimationUtils.ts diff --git a/src/utils/AnimationUtils.ts b/src/utils/AnimationUtils.ts new file mode 100644 index 0000000000..9654bdeb11 --- /dev/null +++ b/src/utils/AnimationUtils.ts @@ -0,0 +1,19 @@ +/* +Copyright 2021 Šimon Brandner + +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. +*/ + +export function lerp(start: number, end: number, amt: number) { + return (1 - amt) * start + amt * end; +} From c8cf23b87c1c649a4a03b89ea8dd61f26f20c7ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 19 Jun 2021 12:21:24 +0200 Subject: [PATCH 0480/1270] Implement LERP MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/voip/CallPreview.tsx | 96 +++++++++++++---------- 1 file changed, 54 insertions(+), 42 deletions(-) diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index e5a0487a4a..210569ed05 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -28,10 +28,14 @@ import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call' import { MatrixClientPeg } from '../../../MatrixClientPeg'; import {replaceableComponent} from "../../../utils/replaceableComponent"; import UIStore from '../../../stores/UIStore'; +import { lerp } from '../../../utils/AnimationUtils'; const PIP_VIEW_WIDTH = 336; const PIP_VIEW_HEIGHT = 232; +const MOVING_AMT = 0.2; +const SNAPPING_AMT = 0.05; + const PADDING = { top: 58, bottom: 58, @@ -107,6 +111,12 @@ export default class CallPreview extends React.Component { private roomStoreToken: any; private dispatcherRef: string; private settingsWatcherRef: string; + private callViewWrapper = createRef(); + private initX = 0; + private initY = 0; + private desiredTranslationX = UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH; + private desiredTranslationY = UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH; + private moving = false; constructor(props: IProps) { super(props); @@ -126,12 +136,6 @@ export default class CallPreview extends React.Component { }; } - private callViewWrapper = createRef(); - - private initX = 0; - private initY = 0; - private moving = false; - public componentDidMount() { CallHandler.sharedInstance().addListener(CallHandlerEvent.CallChangeRoom, this.updateCalls); this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); @@ -155,40 +159,52 @@ export default class CallPreview extends React.Component { SettingsStore.unwatchSetting(this.settingsWatcherRef); } + private animationCallback = () => { + // If the PiP isn't being dragged and there is only a tiny difference in + // the desiredTranslation and translation, quit the animationCallback + // loop. If that is the case, it means the PiP has snapped into its + // position and there is nothing to do. Not doing this would cause an + // infinite loop + if ( + !this.moving && + Math.abs(this.state.translationX - this.desiredTranslationX) <= 1 && + Math.abs(this.state.translationY - this.desiredTranslationY) <= 1 + ) return; + + const amt = this.moving ? MOVING_AMT : SNAPPING_AMT; + this.setState({ + translationX: lerp(this.state.translationX, this.desiredTranslationX, amt), + translationY: lerp(this.state.translationY, this.desiredTranslationY, amt), + }); + requestAnimationFrame(this.animationCallback); + } + private setTranslation(inTranslationX: number, inTranslationY: number) { const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH; const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT; - let outTranslationX; - let outTranslationY; - // Avoid overflow on the x axis if (inTranslationX + width >= UIStore.instance.windowWidth) { - outTranslationX = UIStore.instance.windowWidth - width; + this.desiredTranslationX = UIStore.instance.windowWidth - width; } else if (inTranslationX <= 0) { - outTranslationX = 0; + this.desiredTranslationX = 0; } else { - outTranslationX = inTranslationX; + this.desiredTranslationX = inTranslationX; } // Avoid overflow on the y axis if (inTranslationY + height >= UIStore.instance.windowHeight) { - outTranslationY = UIStore.instance.windowHeight - height; + this.desiredTranslationY = UIStore.instance.windowHeight - height; } else if (inTranslationY <= 0) { - outTranslationY = 0; + this.desiredTranslationY = 0; } else { - outTranslationY = inTranslationY; + this.desiredTranslationY = inTranslationY; } - - this.setState({ - translationX: outTranslationX, - translationY: outTranslationY, - }); } private snap = () => { - const translationX = this.state.translationX; - const translationY = this.state.translationY; + const translationX = this.desiredTranslationX; + const translationY = this.desiredTranslationY; // We subtract the PiP size from the window size in order to calculate // the position to snap to from the PiP center and not its top-left // corner @@ -202,26 +218,22 @@ export default class CallPreview extends React.Component { ); if (translationX >= windowWidth / 2 && translationY >= windowHeight / 2) { - this.setState({ - translationX: windowWidth - PADDING.right, - translationY: windowHeight - PADDING.bottom, - }); + this.desiredTranslationX = windowWidth - PADDING.right; + this.desiredTranslationY = windowHeight - PADDING.bottom; } else if (translationX >= windowWidth / 2 && translationY <= windowHeight / 2) { - this.setState({ - translationX: windowWidth - PADDING.right, - translationY: PADDING.top, - }); + this.desiredTranslationX = windowWidth - PADDING.right; + this.desiredTranslationY = PADDING.top; } else if (translationX <= windowWidth / 2 && translationY >= windowHeight / 2) { - this.setState({ - translationX: PADDING.left, - translationY: windowHeight - PADDING.bottom, - }); + this.desiredTranslationX = PADDING.left; + this.desiredTranslationY = windowHeight - PADDING.bottom; } else { - this.setState({ - translationX: PADDING.left, - translationY: PADDING.top, - }); + this.desiredTranslationX = PADDING.left; + this.desiredTranslationY = PADDING.top; } + + // We start animating here because we want the PiP to move when we're + // resizing the window + requestAnimationFrame(this.animationCallback); } private onRoomViewStoreUpdate = (payload) => { @@ -277,9 +289,9 @@ export default class CallPreview extends React.Component { event.stopPropagation(); this.moving = true; - - this.initX = event.pageX - this.state.translationX; - this.initY = event.pageY - this.state.translationY; + this.initX = event.pageX - this.desiredTranslationX; + this.initY = event.pageY - this.desiredTranslationY; + requestAnimationFrame(this.animationCallback); }; private onMoving = (event: React.MouseEvent | MouseEvent) => { @@ -292,8 +304,8 @@ export default class CallPreview extends React.Component { }; private onEndMoving = () => { - this.snap(); this.moving = false; + this.snap(); }; public render() { From be10e77704b1635dc514b7b98201b7ee11b24d10 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Sat, 19 Jun 2021 15:37:06 +0100 Subject: [PATCH 0481/1270] Improve typing of Event Index Manager / Seshat --- src/indexing/BaseEventIndexManager.ts | 78 +++++++++++++-------------- src/indexing/EventIndex.ts | 16 +++--- 2 files changed, 47 insertions(+), 47 deletions(-) diff --git a/src/indexing/BaseEventIndexManager.ts b/src/indexing/BaseEventIndexManager.ts index debcb213ca..9478b2987b 100644 --- a/src/indexing/BaseEventIndexManager.ts +++ b/src/indexing/BaseEventIndexManager.ts @@ -17,7 +17,7 @@ limitations under the License. // The following interfaces take their names and member names from seshat and the spec /* eslint-disable camelcase */ -export interface MatrixEvent { +export interface IMatrixEvent { type: string; sender: string; content: {}; @@ -27,37 +27,37 @@ export interface MatrixEvent { roomId: string; } -export interface MatrixProfile { +export interface IMatrixProfile { avatar_url: string; displayname: string; } -export interface CrawlerCheckpoint { +export interface ICrawlerCheckpoint { roomId: string; token: string; fullCrawl?: boolean; direction: string; } -export interface ResultContext { - events_before: [MatrixEvent]; - events_after: [MatrixEvent]; - profile_info: Map; +export interface IResultContext { + events_before: [IMatrixEvent]; + events_after: [IMatrixEvent]; + profile_info: Map; } -export interface ResultsElement { +export interface IResultsElement { rank: number; - result: MatrixEvent; - context: ResultContext; + result: IMatrixEvent; + context: IResultContext; } -export interface SearchResult { +export interface ISearchResult { count: number; - results: [ResultsElement]; + results: [IResultsElement]; highlights: [string]; } -export interface SearchArgs { +export interface ISearchArgs { search_term: string; before_limit: number; after_limit: number; @@ -65,19 +65,19 @@ export interface SearchArgs { room_id?: string; } -export interface EventAndProfile { - event: MatrixEvent; - profile: MatrixProfile; +export interface IEventAndProfile { + event: IMatrixEvent; + profile: IMatrixProfile; } -export interface LoadArgs { +export interface ILoadArgs { roomId: string; limit: number; fromEvent?: string; direction?: string; } -export interface IndexStats { +export interface IIndexStats { size: number; eventCount: number; roomCount: number; @@ -119,13 +119,13 @@ export default abstract class BaseEventIndexManager { * Queue up an event to be added to the index. * * @param {MatrixEvent} ev The event that should be added to the index. - * @param {MatrixProfile} profile The profile of the event sender at the + * @param {IMatrixProfile} profile The profile of the event sender at the * time of the event receival. * * @return {Promise} A promise that will resolve when the was queued up for * addition. */ - async addEventToIndex(ev: MatrixEvent, profile: MatrixProfile): Promise { + async addEventToIndex(ev: IMatrixEvent, profile: IMatrixProfile): Promise { throw new Error("Unimplemented"); } @@ -160,10 +160,10 @@ export default abstract class BaseEventIndexManager { /** * Get statistical information of the index. * - * @return {Promise} A promise that will resolve to the index + * @return {Promise} A promise that will resolve to the index * statistics. */ - async getStats(): Promise { + async getStats(): Promise { throw new Error("Unimplemented"); } @@ -203,13 +203,13 @@ export default abstract class BaseEventIndexManager { /** * Search the event index using the given term for matching events. * - * @param {SearchArgs} searchArgs The search configuration for the search, + * @param {ISearchArgs} searchArgs The search configuration for the search, * sets the search term and determines the search result contents. * - * @return {Promise<[SearchResult]>} A promise that will resolve to an array + * @return {Promise<[ISearchResult]>} A promise that will resolve to an array * of search results once the search is done. */ - async searchEventIndex(searchArgs: SearchArgs): Promise { + async searchEventIndex(searchArgs: ISearchArgs): Promise { throw new Error("Unimplemented"); } @@ -218,12 +218,12 @@ export default abstract class BaseEventIndexManager { * * This is used to add a batch of events to the index. * - * @param {[EventAndProfile]} events The list of events and profiles that + * @param {[IEventAndProfile]} events The list of events and profiles that * should be added to the event index. - * @param {[CrawlerCheckpoint]} checkpoint A new crawler checkpoint that + * @param {[ICrawlerCheckpoint]} checkpoint A new crawler checkpoint that * should be stored in the index which should be used to continue crawling * the room. - * @param {[CrawlerCheckpoint]} oldCheckpoint The checkpoint that was used + * @param {[ICrawlerCheckpoint]} oldCheckpoint The checkpoint that was used * to fetch the current batch of events. This checkpoint will be removed * from the index. * @@ -231,9 +231,9 @@ export default abstract class BaseEventIndexManager { * were already added to the index, false otherwise. */ async addHistoricEvents( - events: [EventAndProfile], - checkpoint: CrawlerCheckpoint | null, - oldCheckpoint: CrawlerCheckpoint | null, + events: IEventAndProfile[], + checkpoint: ICrawlerCheckpoint | null, + oldCheckpoint: ICrawlerCheckpoint | null, ): Promise { throw new Error("Unimplemented"); } @@ -241,36 +241,36 @@ export default abstract class BaseEventIndexManager { /** * Add a new crawler checkpoint to the index. * - * @param {CrawlerCheckpoint} checkpoint The checkpoint that should be added + * @param {ICrawlerCheckpoint} checkpoint The checkpoint that should be added * to the index. * * @return {Promise} A promise that will resolve once the checkpoint has * been stored. */ - async addCrawlerCheckpoint(checkpoint: CrawlerCheckpoint): Promise { + async addCrawlerCheckpoint(checkpoint: ICrawlerCheckpoint): Promise { throw new Error("Unimplemented"); } /** * Add a new crawler checkpoint to the index. * - * @param {CrawlerCheckpoint} checkpoint The checkpoint that should be + * @param {ICrawlerCheckpoint} checkpoint The checkpoint that should be * removed from the index. * * @return {Promise} A promise that will resolve once the checkpoint has * been removed. */ - async removeCrawlerCheckpoint(checkpoint: CrawlerCheckpoint): Promise { + async removeCrawlerCheckpoint(checkpoint: ICrawlerCheckpoint): Promise { throw new Error("Unimplemented"); } /** * Load the stored checkpoints from the index. * - * @return {Promise<[CrawlerCheckpoint]>} A promise that will resolve to an + * @return {Promise<[ICrawlerCheckpoint]>} A promise that will resolve to an * array of crawler checkpoints once they have been loaded from the index. */ - async loadCheckpoints(): Promise<[CrawlerCheckpoint]> { + async loadCheckpoints(): Promise { throw new Error("Unimplemented"); } @@ -286,11 +286,11 @@ export default abstract class BaseEventIndexManager { * @param {string} args.direction The direction to which we should continue * loading events from. This is used only if fromEvent is used as well. * - * @return {Promise<[EventAndProfile]>} A promise that will resolve to an + * @return {Promise<[IEventAndProfile]>} A promise that will resolve to an * array of Matrix events that contain mxc URLs accompanied with the * historic profile of the sender. */ - async loadFileEvents(args: LoadArgs): Promise<[EventAndProfile]> { + async loadFileEvents(args: ILoadArgs): Promise { throw new Error("Unimplemented"); } diff --git a/src/indexing/EventIndex.ts b/src/indexing/EventIndex.ts index c36f96f368..978a2ac813 100644 --- a/src/indexing/EventIndex.ts +++ b/src/indexing/EventIndex.ts @@ -28,7 +28,7 @@ import { MatrixClientPeg } from "../MatrixClientPeg"; import { sleep } from "../utils/promise"; import SettingsStore from "../settings/SettingsStore"; import { SettingLevel } from "../settings/SettingLevel"; -import {CrawlerCheckpoint, LoadArgs, SearchArgs} from "./BaseEventIndexManager"; +import { ICrawlerCheckpoint, ILoadArgs, ISearchArgs } from "./BaseEventIndexManager"; // The time in ms that the crawler will wait loop iterations if there // have not been any checkpoints to consume in the last iteration. @@ -45,9 +45,9 @@ interface ICrawler { * Event indexing class that wraps the platform specific event indexing. */ export default class EventIndex extends EventEmitter { - private crawlerCheckpoints: CrawlerCheckpoint[] = []; + private crawlerCheckpoints: ICrawlerCheckpoint[] = []; private crawler: ICrawler = null; - private currentCheckpoint: CrawlerCheckpoint = null; + private currentCheckpoint: ICrawlerCheckpoint = null; public async init() { const indexManager = PlatformPeg.get().getEventIndexingManager(); @@ -111,14 +111,14 @@ export default class EventIndex extends EventEmitter { const timeline = room.getLiveTimeline(); const token = timeline.getPaginationToken("b"); - const backCheckpoint: CrawlerCheckpoint = { + const backCheckpoint: ICrawlerCheckpoint = { roomId: room.roomId, token: token, direction: "b", fullCrawl: true, }; - const forwardCheckpoint: CrawlerCheckpoint = { + const forwardCheckpoint: ICrawlerCheckpoint = { roomId: room.roomId, token: token, direction: "f", @@ -668,13 +668,13 @@ export default class EventIndex extends EventEmitter { /** * Search the event index using the given term for matching events. * - * @param {SearchArgs} searchArgs The search configuration for the search, + * @param {ISearchArgs} searchArgs The search configuration for the search, * sets the search term and determines the search result contents. * * @return {Promise<[SearchResult]>} A promise that will resolve to an array * of search results once the search is done. */ - public async search(searchArgs: SearchArgs) { + public async search(searchArgs: ISearchArgs) { const indexManager = PlatformPeg.get().getEventIndexingManager(); return indexManager.searchEventIndex(searchArgs); } @@ -709,7 +709,7 @@ export default class EventIndex extends EventEmitter { const client = MatrixClientPeg.get(); const indexManager = PlatformPeg.get().getEventIndexingManager(); - const loadArgs: LoadArgs = { + const loadArgs: ILoadArgs = { roomId: room.roomId, limit: limit, }; From a2a515841138a3c545b6a44477df3e9ef3992b93 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Sat, 19 Jun 2021 15:37:48 +0100 Subject: [PATCH 0482/1270] Fix View Source accessing renamed private field on MatrixEvent --- src/components/structures/ViewSource.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js index 6fe99dd464..b69a92dd61 100644 --- a/src/components/structures/ViewSource.js +++ b/src/components/structures/ViewSource.js @@ -55,7 +55,7 @@ export default class ViewSource extends React.Component { viewSourceContent() { const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit const isEncrypted = mxEvent.isEncrypted(); - const decryptedEventSource = mxEvent._clearEvent; // FIXME: _clearEvent is private + const decryptedEventSource = mxEvent.clearEvent; // FIXME: clearEvent is private const originalEventSource = mxEvent.event; if (isEncrypted) { From 2c5ddea1d9687bfe7ce406741e824074be56ddfb Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Sat, 19 Jun 2021 15:57:07 +0100 Subject: [PATCH 0483/1270] Fix ConfirmUserActionDialog returning an input field rather than text --- src/components/views/dialogs/ConfirmUserActionDialog.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.tsx b/src/components/views/dialogs/ConfirmUserActionDialog.tsx index 05f8c63ace..5cdb4c664b 100644 --- a/src/components/views/dialogs/ConfirmUserActionDialog.tsx +++ b/src/components/views/dialogs/ConfirmUserActionDialog.tsx @@ -38,7 +38,7 @@ interface IProps { // be the string entered. askReason?: boolean; danger?: boolean; - onFinished: (success: boolean, reason?: HTMLInputElement) => void; + onFinished: (success: boolean, reason?: string) => void; } /* @@ -59,11 +59,7 @@ export default class ConfirmUserActionDialog extends React.Component { }; public onOk = (): void => { - let reason; - if (this.reasonField) { - reason = this.reasonField.current; - } - this.props.onFinished(true, reason); + this.props.onFinished(true, this.reasonField.current?.value); }; public onCancel = (): void => { From 21a960acc7f1b0a55d307e9c2dc1906a60d11e2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 19 Jun 2021 17:53:00 +0200 Subject: [PATCH 0484/1270] Fix timestamp issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_IRCLayout.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 8e5a26b333..5e61c3b8a3 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -29,6 +29,7 @@ $irc-line-height: $font-18px; // timestamps are links which shouldn't be underlined > a { text-decoration: none; + min-width: 45px; } display: flex; From ccfc7fe42119eb9986ab01d3d3efa69ea0297888 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 19 Jun 2021 19:30:19 +0200 Subject: [PATCH 0485/1270] Make call silencing more flexible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/CallHandler.tsx | 36 ++++++++++++++++++- src/components/views/voip/IncomingCallBox.tsx | 20 ++++++++--- 2 files changed, 51 insertions(+), 5 deletions(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 2f508191d6..131b2ac579 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -99,7 +99,7 @@ const CHECK_PROTOCOLS_ATTEMPTS = 3; // (and store the ID of their native room) export const VIRTUAL_ROOM_EVENT_TYPE = 'im.vector.is_virtual_room'; -export enum AudioID { +enum AudioID { Ring = 'ringAudio', Ringback = 'ringbackAudio', CallEnd = 'callendAudio', @@ -142,6 +142,7 @@ export enum PlaceCallType { export enum CallHandlerEvent { CallsChanged = "calls_changed", CallChangeRoom = "call_change_room", + SilencedCallsChanged = "silenced_calls_changed", } export default class CallHandler extends EventEmitter { @@ -164,6 +165,8 @@ export default class CallHandler extends EventEmitter { // do the async lookup when we get new information and then store these mappings here private assertedIdentityNativeUsers = new Map(); + private silencedCalls = new Map(); // callId -> silenced + static sharedInstance() { if (!window.mxCallHandler) { window.mxCallHandler = new CallHandler() @@ -224,6 +227,33 @@ export default class CallHandler extends EventEmitter { } } + public silenceCall(callId: string) { + this.silencedCalls.set(callId, true); + this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); + + // Don't pause audio if we have calls which are still ringing + if (this.areAnyCallsUnsilenced()) return; + this.pause(AudioID.Ring); + } + + public unSilenceCall(callId: string) { + this.silencedCalls.set(callId, false); + this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); + this.play(AudioID.Ring); + } + + public isCallSilenced(callId: string): boolean { + return this.silencedCalls.get(callId); + } + + /** + * Returns true if there is at least one unsilenced call + * @returns {boolean} + */ + private areAnyCallsUnsilenced(): boolean { + return [...this.silencedCalls.values()].includes(false); + } + private async checkProtocols(maxTries) { try { const protocols = await MatrixClientPeg.get().getThirdpartyProtocols(); @@ -616,6 +646,8 @@ export default class CallHandler extends EventEmitter { private removeCallForRoom(roomId: string) { console.log("Removing call for room ", roomId); + this.silencedCalls.delete(this.calls.get(roomId).callId); + this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); this.calls.delete(roomId); this.emit(CallHandlerEvent.CallsChanged, this.calls); } @@ -825,6 +857,8 @@ export default class CallHandler extends EventEmitter { console.log("Adding call for room ", mappedRoomId); this.calls.set(mappedRoomId, call) this.emit(CallHandlerEvent.CallsChanged, this.calls); + this.silencedCalls.set(call.callId, false); + this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); this.setCallListeners(call); // get ready to send encrypted events in the room, so if the user does answer diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx index a0660318bc..cce4687f90 100644 --- a/src/components/views/voip/IncomingCallBox.tsx +++ b/src/components/views/voip/IncomingCallBox.tsx @@ -21,7 +21,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg'; import dis from '../../../dispatcher/dispatcher'; import { _t } from '../../../languageHandler'; import { ActionPayload } from '../../../dispatcher/payloads'; -import CallHandler, { AudioID } from '../../../CallHandler'; +import CallHandler, { CallHandlerEvent } from '../../../CallHandler'; import RoomAvatar from '../avatars/RoomAvatar'; import FormButton from '../elements/FormButton'; import { CallState } from 'matrix-js-sdk/src/webrtc/call'; @@ -51,8 +51,13 @@ export default class IncomingCallBox extends React.Component { }; } + componentDidMount = () => { + CallHandler.sharedInstance().addListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged); + } + public componentWillUnmount() { dis.unregister(this.dispatcherRef); + CallHandler.sharedInstance().removeListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged); } private onAction = (payload: ActionPayload) => { @@ -73,6 +78,12 @@ export default class IncomingCallBox extends React.Component { } }; + private onSilencedCallsChanged = () => { + const callId = this.state.incomingCall?.callId; + if (!callId) return; + this.setState({ silenced: CallHandler.sharedInstance().isCallSilenced(callId) }); + } + private onAnswerClick: React.MouseEventHandler = (e) => { e.stopPropagation(); dis.dispatch({ @@ -91,9 +102,10 @@ export default class IncomingCallBox extends React.Component { private onSilenceClick: React.MouseEventHandler = (e) => { e.stopPropagation(); - const newState = !this.state.silenced - this.setState({silenced: newState}); - newState ? CallHandler.sharedInstance().pause(AudioID.Ring) : CallHandler.sharedInstance().play(AudioID.Ring); + const callId = this.state.incomingCall.callId; + this.state.silenced ? + CallHandler.sharedInstance().unSilenceCall(callId): + CallHandler.sharedInstance().silenceCall(callId); } public render() { From 401fe1d05bc8ab9f9086bbcd8e5e1daa6ca469da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 19 Jun 2021 20:02:51 +0200 Subject: [PATCH 0486/1270] Add call silencing to CallEvent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 24 +++++++++++++++++++ src/components/structures/CallEventGrouper.ts | 22 ++++++++++++++--- src/components/views/messages/CallEvent.tsx | 22 ++++++++++++++++- 3 files changed, 64 insertions(+), 4 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 1804462d4f..1bf62af22e 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -94,5 +94,29 @@ limitations under the License. .mx_CallEvent_content_tooltip { margin-right: 5px; } + + .mx_CallEvent_iconButton { + display: inline-flex; + margin-right: 16px; + + &::before { + content: ''; + + height: 16px; + width: 16px; + background-color: $icon-button-color; + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; + } + } + + .mx_CallEvent_silence::before { + mask-image: url('$(res)/img/voip/silence.svg'); + } + + .mx_CallEvent_unSilence::before { + mask-image: url('$(res)/img/voip/un-silence.svg'); + } } } diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index ab1444d4fa..c71d1a032a 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -24,6 +24,7 @@ import defaultDispatcher from "../../dispatcher/dispatcher"; export enum CallEventGrouperEvent { StateChanged = "state_changed", + SilencedChanged = "silenced_changed", } const SUPPORTED_STATES = [ @@ -44,7 +45,8 @@ export default class CallEventGrouper extends EventEmitter { constructor() { super(); - CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.setCall) + CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.setCall); + CallHandler.sharedInstance().addListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged); } private get invite(): MatrixEvent { @@ -79,6 +81,15 @@ export default class CallEventGrouper extends EventEmitter { return ![...this.events].some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId()); } + private get callId(): string { + return [...this.events][0].getContent().call_id; + } + + private onSilencedCallsChanged = () => { + const newState = CallHandler.sharedInstance().isCallSilenced(this.callId); + this.emit(CallEventGrouperEvent.SilencedChanged, newState) + } + public answerCall = () => { this.call?.answer(); } @@ -95,6 +106,12 @@ export default class CallEventGrouper extends EventEmitter { }); } + public toggleSilenced = () => { + const silenced = CallHandler.sharedInstance().isCallSilenced(this.callId); + silenced ? + CallHandler.sharedInstance().unSilenceCall(this.callId) : + CallHandler.sharedInstance().silenceCall(this.callId); + } private setCallListeners() { if (!this.call) return; @@ -116,8 +133,7 @@ export default class CallEventGrouper extends EventEmitter { private setCall = () => { if (this.call) return; - const callId = [...this.events][0].getContent().call_id; - this.call = CallHandler.sharedInstance().getCallById(callId); + this.call = CallHandler.sharedInstance().getCallById(this.callId); this.setCallListeners(); this.setState(); } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 00b62e4482..4710391050 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -24,6 +24,7 @@ import FormButton from '../elements/FormButton'; import { CallErrorCode, CallState } from 'matrix-js-sdk/src/webrtc/call'; import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip'; import classNames from 'classnames'; +import AccessibleTooltipButton from '../elements/AccessibleTooltipButton'; interface IProps { mxEvent: MatrixEvent; @@ -32,6 +33,7 @@ interface IProps { interface IState { callState: CallState | CustomCallState; + silenced: boolean; } const TEXTUAL_STATES: Map = new Map([ @@ -45,25 +47,43 @@ export default class CallEvent extends React.Component { this.state = { callState: this.props.callEventGrouper.state, + silenced: false, } } componentDidMount() { this.props.callEventGrouper.addListener(CallEventGrouperEvent.StateChanged, this.onStateChanged); + this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged); } componentWillUnmount() { this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged); + this.props.callEventGrouper.removeListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged); } + private onSilencedChanged = (newState) => { + this.setState({ silenced: newState }); + }; + private onStateChanged = (newState: CallState) => { this.setState({callState: newState}); - } + }; private renderContent(state: CallState | CustomCallState): JSX.Element { if (state === CallState.Ringing) { + const silenceClass = classNames({ + "mx_CallEvent_iconButton": true, + "mx_CallEvent_unSilence": this.state.silenced, + "mx_CallEvent_silence": !this.state.silenced, + }); + return (
    + Date: Sat, 19 Jun 2021 19:41:45 +0100 Subject: [PATCH 0487/1270] Convert crypto index to TS --- src/rageshake/submit-rageshake.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/rageshake/submit-rageshake.ts b/src/rageshake/submit-rageshake.ts index 08d8ccfd13..64d7405f17 100644 --- a/src/rageshake/submit-rageshake.ts +++ b/src/rageshake/submit-rageshake.ts @@ -86,8 +86,8 @@ async function collectBugReport(opts: IOpts = {}, gzipLogs = true) { body.append('cross_signing_key', client.getCrossSigningId()); // add cross-signing status information - const crossSigning = client.crypto._crossSigningInfo; - const secretStorage = client.crypto._secretStorage; + const crossSigning = client.crypto.crossSigningInfo; + const secretStorage = client.crypto.secretStorage; body.append("cross_signing_ready", String(await client.isCrossSigningReady())); body.append("cross_signing_supported_by_hs", From 9344adb2d2e9419fa5238e6a03cf863380c621fc Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sat, 19 Jun 2021 13:38:19 -0600 Subject: [PATCH 0488/1270] Revert "Partially restore immutable event objects at the rendering layer" --- src/components/views/messages/TextualBody.js | 3 +- src/components/views/rooms/EventTile.tsx | 124 ++++++++----------- 2 files changed, 50 insertions(+), 77 deletions(-) diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index c67001cc87..ebc4ce7ce8 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -263,8 +263,7 @@ export default class TextualBody extends React.Component { //console.info("shouldComponentUpdate: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview); // exploit that events are immutable :) - return (nextProps.mxEvent !== this.props.mxEvent || - nextProps.mxEvent.getId() !== this.props.mxEvent.getId() || + return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() || nextProps.highlights !== this.props.highlights || nextProps.replacingEventId !== this.props.replacingEventId || nextProps.highlightLink !== this.props.highlightLink || diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 07c6427992..0099bf73fb 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -300,9 +300,6 @@ interface IState { // The Relations model from the JS SDK for reactions to `mxEvent` reactions: Relations; - // Our snapshotted/local copy of the props.mxEvent, for local echo reasons - mxEvent: MatrixEvent; - hover: boolean; } @@ -337,8 +334,6 @@ export default class EventTile extends React.Component { // The Relations model from the JS SDK for reactions to `mxEvent` reactions: this.getReactions(), - mxEvent: this.mxEvent.toSnapshot(), // snapshot up front to verify it all works - hover: false, }; @@ -355,10 +350,6 @@ export default class EventTile extends React.Component { this.ref = React.createRef(); } - private get mxEvent(): MatrixEvent { - return this.state?.mxEvent ?? this.props.mxEvent; - } - /** * When true, the tile qualifies for some sort of special read receipt. This could be a 'sending' * or 'sent' receipt, for example. @@ -367,16 +358,16 @@ export default class EventTile extends React.Component { private get isEligibleForSpecialReceipt() { // First, if there are other read receipts then just short-circuit this. if (this.props.readReceipts && this.props.readReceipts.length > 0) return false; - if (!this.mxEvent) return false; + if (!this.props.mxEvent) return false; // Sanity check (should never happen, but we shouldn't explode if it does) - const room = this.context.getRoom(this.mxEvent.getRoomId()); + const room = this.context.getRoom(this.props.mxEvent.getRoomId()); if (!room) return false; // Quickly check to see if the event was sent by us. If it wasn't, it won't qualify for // special read receipts. const myUserId = MatrixClientPeg.get().getUserId(); - if (this.mxEvent.getSender() !== myUserId) return false; + if (this.props.mxEvent.getSender() !== myUserId) return false; // Finally, determine if the type is relevant to the user. This notably excludes state // events and pretty much anything that can't be sent by the composer as a message. For @@ -387,7 +378,7 @@ export default class EventTile extends React.Component { EventType.RoomMessage, EventType.RoomMessageEncrypted, ]; - if (!simpleSendableEvents.includes(this.mxEvent.getType() as EventType)) return false; + if (!simpleSendableEvents.includes(this.props.mxEvent.getType() as EventType)) return false; // Default case return true; @@ -429,7 +420,7 @@ export default class EventTile extends React.Component { // TODO: [REACT-WARNING] Move into constructor // eslint-disable-next-line camelcase UNSAFE_componentWillMount() { - this.verifyEvent(this.mxEvent); + this.verifyEvent(this.props.mxEvent); } componentDidMount() { @@ -459,21 +450,11 @@ export default class EventTile extends React.Component { } shouldComponentUpdate(nextProps, nextState) { - // If the echo changed meaningfully, update. - if (!this.state.mxEvent?.isEquivalentTo(nextProps.mxEvent)) { - return true; - } - if (objectHasDiff(this.state, nextState)) { return true; } - if (!this.propsEqual(this.props, nextProps)) { - return true; - } - - // Always assume there's no significant change. - return false; + return !this.propsEqual(this.props, nextProps); } componentWillUnmount() { @@ -494,18 +475,11 @@ export default class EventTile extends React.Component { this.context.on("Room.receipt", this.onRoomReceipt); this.isListeningForReceipts = true; } - - // Update the state again if the snapshot needs updating. Note that this will fire - // a second state update to re-render child components, which ultimately calls didUpdate - // again, so we break that loop with a reference check first (faster than comparing events). - if (this.state.mxEvent === prevState.mxEvent && !this.state?.mxEvent.isEquivalentTo(this.props.mxEvent)) { - this.setState({mxEvent: this.props.mxEvent.toSnapshot()}); - } } private onRoomReceipt = (ev, room) => { // ignore events for other rooms - const tileRoom = MatrixClientPeg.get().getRoom(this.mxEvent.getRoomId()); + const tileRoom = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId()); if (room !== tileRoom) return; if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt && !this.isListeningForReceipts) { @@ -529,19 +503,19 @@ export default class EventTile extends React.Component { // we need to re-verify the sending device. // (we call onHeightChanged in verifyEvent to handle the case where decryption // has caused a change in size of the event tile) - this.verifyEvent(this.mxEvent); + this.verifyEvent(this.props.mxEvent); this.forceUpdate(); }; private onDeviceVerificationChanged = (userId, device) => { - if (userId === this.mxEvent.getSender()) { - this.verifyEvent(this.mxEvent); + if (userId === this.props.mxEvent.getSender()) { + this.verifyEvent(this.props.mxEvent); } }; private onUserVerificationChanged = (userId, _trustStatus) => { - if (userId === this.mxEvent.getSender()) { - this.verifyEvent(this.mxEvent); + if (userId === this.props.mxEvent.getSender()) { + this.verifyEvent(this.props.mxEvent); } }; @@ -648,11 +622,11 @@ export default class EventTile extends React.Component { } shouldHighlight() { - const actions = this.context.getPushActionsForEvent(this.mxEvent.replacingEvent() || this.mxEvent); + const actions = this.context.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent); if (!actions || !actions.tweaks) { return false; } // don't show self-highlights from another of our clients - if (this.mxEvent.getSender() === this.context.credentials.userId) { + if (this.props.mxEvent.getSender() === this.context.credentials.userId) { return false; } @@ -667,7 +641,7 @@ export default class EventTile extends React.Component { getReadAvatars() { if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) { - return ; + return ; } // return early if there are no read receipts @@ -754,7 +728,7 @@ export default class EventTile extends React.Component { } onSenderProfileClick = event => { - const mxEvent = this.mxEvent; + const mxEvent = this.props.mxEvent; dis.dispatch({ action: Action.ComposerInsert, userId: mxEvent.getSender(), @@ -771,7 +745,7 @@ export default class EventTile extends React.Component { // Cancel any outgoing key request for this event and resend it. If a response // is received for the request with the required keys, the event could be // decrypted successfully. - this.context.cancelAndResendEventRoomKeyRequest(this.mxEvent); + this.context.cancelAndResendEventRoomKeyRequest(this.props.mxEvent); }; onPermalinkClicked = e => { @@ -780,14 +754,14 @@ export default class EventTile extends React.Component { e.preventDefault(); dis.dispatch({ action: 'view_room', - event_id: this.mxEvent.getId(), + event_id: this.props.mxEvent.getId(), highlighted: true, - room_id: this.mxEvent.getRoomId(), + room_id: this.props.mxEvent.getRoomId(), }); }; private renderE2EPadlock() { - const ev = this.mxEvent; + const ev = this.props.mxEvent; // event could not be decrypted if (ev.getContent().msgtype === 'm.bad.encrypted') { @@ -846,7 +820,7 @@ export default class EventTile extends React.Component { ) { return null; } - const eventId = this.mxEvent.getId(); + const eventId = this.props.mxEvent.getId(); return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction"); }; @@ -865,13 +839,13 @@ export default class EventTile extends React.Component { const SenderProfile = sdk.getComponent('messages.SenderProfile'); const MemberAvatar = sdk.getComponent('avatars.MemberAvatar'); - //console.info("EventTile showUrlPreview for %s is %s", this.mxEvent.getId(), this.props.showUrlPreview); + //console.info("EventTile showUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview); - const content = this.mxEvent.getContent(); + const content = this.props.mxEvent.getContent(); const msgtype = content.msgtype; - const eventType = this.mxEvent.getType(); + const eventType = this.props.mxEvent.getType(); - let tileHandler = getHandlerTile(this.mxEvent); + let tileHandler = getHandlerTile(this.props.mxEvent); // Info messages are basically information about commands processed on a room const isBubbleMessage = eventType.startsWith("m.key.verification") || @@ -888,7 +862,7 @@ export default class EventTile extends React.Component { // source tile when there's no regular tile for an event and also for // replace relations (which otherwise would display as a confusing // duplicate of the thing they are replacing). - if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(this.mxEvent)) { + if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(this.props.mxEvent)) { tileHandler = "messages.ViewSourceEvent"; // Reuse info message avatar and sender profile styling isInfoMessage = true; @@ -907,8 +881,8 @@ export default class EventTile extends React.Component { const EventTileType = sdk.getComponent(tileHandler); const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1); - const isRedacted = isMessageEvent(this.mxEvent) && this.props.isRedacted; - const isEncryptionFailure = this.mxEvent.isDecryptionFailure(); + const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted; + const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure(); const isEditing = !!this.props.editState; const classes = classNames({ @@ -938,14 +912,14 @@ export default class EventTile extends React.Component { let permalink = "#"; if (this.props.permalinkCreator) { - permalink = this.props.permalinkCreator.forEvent(this.mxEvent.getId()); + permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId()); } // we can't use local echoes as scroll tokens, because their event IDs change. // Local echos have a send "status". - const scrollToken = this.mxEvent.status + const scrollToken = this.props.mxEvent.status ? undefined - : this.mxEvent.getId(); + : this.props.mxEvent.getId(); let avatar; let sender; @@ -975,15 +949,15 @@ export default class EventTile extends React.Component { needsSenderProfile = true; } - if (this.mxEvent.sender && avatarSize) { + if (this.props.mxEvent.sender && avatarSize) { let member; // set member to receiver (target) if it is a 3PID invite // so that the correct avatar is shown as the text is // `$target accepted the invitation for $email` - if (this.mxEvent.getContent().third_party_invite) { - member = this.mxEvent.target; + if (this.props.mxEvent.getContent().third_party_invite) { + member = this.props.mxEvent.target; } else { - member = this.mxEvent.sender; + member = this.props.mxEvent.sender; } avatar = (
    @@ -998,17 +972,17 @@ export default class EventTile extends React.Component { if (needsSenderProfile) { if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') { sender = ; } else { - sender = ; + sender = ; } } const MessageActionBar = sdk.getComponent('messages.MessageActionBar'); const actionBar = !isEditing ? { onFocusChange={this.onActionBarFocusChange} /> : undefined; - const showTimestamp = this.mxEvent.getTs() && + const showTimestamp = this.props.mxEvent.getTs() && (this.props.alwaysShowTimestamps || this.props.last || this.state.hover || this.state.actionBarFocused); const timestamp = showTimestamp ? - : null; + : null; const keyRequestHelpText =
    @@ -1059,7 +1033,7 @@ export default class EventTile extends React.Component { if (!isRedacted) { const ReactionsRow = sdk.getComponent('messages.ReactionsRow'); reactionsRow = ; } @@ -1067,7 +1041,7 @@ export default class EventTile extends React.Component { const linkedTimestamp = { timestamp } ; @@ -1086,7 +1060,7 @@ export default class EventTile extends React.Component { switch (this.props.tileShape) { case 'notif': { - const room = this.context.getRoom(this.mxEvent.getRoomId()); + const room = this.context.getRoom(this.props.mxEvent.getRoomId()); return React.createElement(this.props.as || "li", { "className": classes, "aria-live": ariaLive, @@ -1108,7 +1082,7 @@ export default class EventTile extends React.Component {
    ,
    { }, [
    { let thread; if (this.props.tileShape === 'reply_preview') { thread = ReplyThread.makeThread( - this.mxEvent, + this.props.mxEvent, this.props.onHeightChanged, this.props.permalinkCreator, this.replyThread, @@ -1176,7 +1150,7 @@ export default class EventTile extends React.Component { { groupPadlock } { thread } { } default: { const thread = ReplyThread.makeThread( - this.mxEvent, + this.props.mxEvent, this.props.onHeightChanged, this.props.permalinkCreator, this.replyThread, @@ -1216,7 +1190,7 @@ export default class EventTile extends React.Component { { groupPadlock } { thread } Date: Fri, 18 Jun 2021 16:48:23 +0000 Subject: [PATCH 0489/1270] Translated using Weblate (German) Currently translated at 99.4% (2977 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/ --- src/i18n/strings/de_DE.json | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json index 9d1c1fa071..3eb0996792 100644 --- a/src/i18n/strings/de_DE.json +++ b/src/i18n/strings/de_DE.json @@ -1321,7 +1321,7 @@ "Disconnect from the identity server ?": "Verbindung zum Identitätsserver trennen?", "Add Email Address": "E-Mail-Adresse hinzufügen", "Add Phone Number": "Telefonnummer hinzufügen", - "Changes the avatar of the current room": "Ändert den Avatar für diesen Raum", + "Changes the avatar of the current room": "Ändert den Avatar des Raums", "Deactivate account": "Benutzerkonto deaktivieren", "Show previews/thumbnails for images": "Vorschauen für Bilder", "View": "Vorschau", @@ -1388,7 +1388,7 @@ "Backup key stored: ": "Backup Schlüssel gespeichert: ", "Clear notifications": "Benachrichtigungen löschen", "Disconnect from the identity server and connect to instead?": "Vom Identitätsserver trennen, und stattdessen eine Verbindung zu aufbauen?", - "The identity server you have chosen does not have any terms of service.": "Der von dir gewählte Identitätsserver hat keine Nutzungsbedingungen.", + "The identity server you have chosen does not have any terms of service.": "Der von dir gewählte Identitätsserver gibt keine Nutzungsbedingungen an.", "Disconnect identity server": "Verbindung zum Identitätsserver trennen", "contact the administrators of identity server ": "Administration des Identitätsservers kontaktieren", "wait and try again later": "warte und versuche es später erneut", @@ -1634,7 +1634,7 @@ "Show rooms with unread notifications first": "Räume mit ungelesenen Benachrichtigungen zuerst zeigen", "Show shortcuts to recently viewed rooms above the room list": "Kürzlich besuchte Räume anzeigen", "Use Single Sign On to continue": "Einmalanmeldung zum Fortfahren nutzen", - "Confirm adding this email address by using Single Sign On to prove your identity.": "Bestätige das Hinzufügen dieser E-Mail-Adresse durch Single Sign-on, um deine Identität nachzuweisen.", + "Confirm adding this email address by using Single Sign On to prove your identity.": "Bestätige die neue E-Mail-Adresse mit Single-Sign-On, um deine Identität nachzuweisen.", "Single Sign On": "Einmalanmeldung", "Confirm adding email": "Hinzugefügte E-Mail-Addresse bestätigen", "Confirm adding this phone number by using Single Sign On to prove your identity.": "Bestätige die hinzugefügte Telefonnummer, indem du deine Identität mittels der Einmalanmeldung nachweist.", @@ -3102,7 +3102,7 @@ "Your public space": "Dein öffentlicher Space", "You can change this later": "Du kannst die Sichtbarkeit später ändern", "Invite only, best for yourself or teams": "Nur Eingeladene können beitreten - am besten für dich selbst oder Teams", - "Open space for anyone, best for communities": "Öffne den Space für alle - am Besten für Communities", + "Open space for anyone, best for communities": "Öffne den Space für alle - am besten für Communities", "Private": "Privat", "Public": "Öffentlich", "Spaces are new ways to group rooms and people. To join an existing space you’ll need an invite": "Spaces sind ein neuer Weg Räume und Leute zu gruppieren. Um einen bestehenden Space zu betreten brauchst du eine Einladung", @@ -3302,7 +3302,7 @@ "Join the beta": "Beta beitreten", "Leave the beta": "Beta verlassen", "Beta": "Beta", - "Tap for more info": "Klicke für mehr Infos", + "Tap for more info": "Für mehr Infos hier klicken", "Spaces is a beta feature": "Spaces sind noch in der Entwicklung und möglicherweise instabil", "Want to add a new room instead?": "Willst du einen neuen Raum hinzufügen?", "Adding rooms... (%(progress)s out of %(count)s)|one": "Raum wird hinzugefügt...", @@ -3352,5 +3352,21 @@ "See when people join, leave, or are invited to this room": "Anzeigen, wenn Leute eingeladen werden oder den Raum betreten und verlassen", "The user you called is busy.": "Der angerufene Benutzer ist momentan beschäftigt.", "User Busy": "Benutzer beschäftigt", - "No results for \"%(query)s\"": "Keine Ergebnisse für \"%(query)s\"" + "No results for \"%(query)s\"": "Keine Ergebnisse für \"%(query)s\"", + "Some suggestions may be hidden for privacy.": "Um deine Privatsphäre zu schützen, werden einige Vorschläge möglicherweise ausgeblendet.", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "Dieser Raum ist offenbar nicht verschlüsselt. Das kann an einem veralteten Gerät oder an manchen Verfahren wie E-Mail-Einladungen liegen. Verschlüsselung aktivieren.", + "We're working on this as part of the beta, but just want to let you know.": "Dies ist noch Teil der Beta, wir wollten dir es aber schon jetzt zeigen.", + "Or send invite link": "Oder versende einen Einladungslink", + "If you can't see who you’re looking for, send them your invite link below.": "Niemanden gefunden? Sende ihnen stattdessen einen Einladungslink.", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "Du kannst, sofern du die Berechtigung dazu hast, Nachrichten in ihrem Menü hier anpinnen.", + "Search for rooms or people": "Räume oder Leute suchen", + "Forward message": "Nachricht weiterleiten", + "Open link": "Link öffnen", + "Sent": "Gesendet", + "You don't have permission to do this": "Du bist dazu nicht berechtigt", + "Error loading Widget": "Fehler beim Laden des Widgets", + "Pinned messages": "Angeheftete Nachrichten", + "Nothing pinned, yet": "Es ist nichts angepinnt. Noch nicht.", + "End-to-end encryption isn't enabled": "Ende-zu-Ende-Verschlüsselung ist deaktiviert", + "See when people join, leave, or are invited to your active room": "Anzeigen, wenn Leute den aktuellen Raum betreten, verlassen oder in ihn eingeladen werden" } From c4b252d941fda74b6b027d5d10e49d04c3fd1e2d Mon Sep 17 00:00:00 2001 From: Bamstam Date: Wed, 16 Jun 2021 15:22:07 +0000 Subject: [PATCH 0490/1270] Translated using Weblate (German) Currently translated at 99.4% (2977 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/ --- src/i18n/strings/de_DE.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json index 3eb0996792..e86025dc83 100644 --- a/src/i18n/strings/de_DE.json +++ b/src/i18n/strings/de_DE.json @@ -709,7 +709,7 @@ "Error saving email notification preferences": "Fehler beim Speichern der E-Mail-Benachrichtigungseinstellungen", "Tuesday": "Dienstag", "Enter keywords separated by a comma:": "Gib die Schlüsselwörter durch einen Beistrich getrennt ein:", - "Forward Message": "Nachricht weiterleiten", + "Forward Message": "Weiterleiten", "You have successfully set a password and an email address!": "Du hast erfolgreich ein Passwort und eine E-Mail-Adresse gesetzt!", "Remove %(name)s from the directory?": "Soll der Raum %(name)s aus dem Verzeichnis entfernt werden?", "%(brand)s uses many advanced browser features, some of which are not available or experimental in your current browser.": "%(brand)s nutzt zahlreiche fortgeschrittene Browser-Funktionen, die teilweise in deinem aktuell verwendeten Browser noch nicht verfügbar sind oder sich noch im experimentellen Status befinden.", From 3d34e8e8075c0211abd8565892ad71edb6de5a9f Mon Sep 17 00:00:00 2001 From: Michael Sasser Date: Wed, 16 Jun 2021 15:14:41 +0000 Subject: [PATCH 0491/1270] Translated using Weblate (German) Currently translated at 99.4% (2977 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/ --- src/i18n/strings/de_DE.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json index e86025dc83..90530b5b07 100644 --- a/src/i18n/strings/de_DE.json +++ b/src/i18n/strings/de_DE.json @@ -1635,7 +1635,7 @@ "Show shortcuts to recently viewed rooms above the room list": "Kürzlich besuchte Räume anzeigen", "Use Single Sign On to continue": "Einmalanmeldung zum Fortfahren nutzen", "Confirm adding this email address by using Single Sign On to prove your identity.": "Bestätige die neue E-Mail-Adresse mit Single-Sign-On, um deine Identität nachzuweisen.", - "Single Sign On": "Einmalanmeldung", + "Single Sign On": "Single Sign-on", "Confirm adding email": "Hinzugefügte E-Mail-Addresse bestätigen", "Confirm adding this phone number by using Single Sign On to prove your identity.": "Bestätige die hinzugefügte Telefonnummer, indem du deine Identität mittels der Einmalanmeldung nachweist.", "Click the button below to confirm adding this phone number.": "Klicke unten die Schaltfläche, um die hinzugefügte Telefonnummer zu bestätigen.", From 3b39eca70ff7b5ac4ead3f1a34ceb7cbf4f40874 Mon Sep 17 00:00:00 2001 From: iaiz Date: Wed, 16 Jun 2021 13:19:42 +0000 Subject: [PATCH 0492/1270] Translated using Weblate (Spanish) Currently translated at 100.0% (2993 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/es/ --- src/i18n/strings/es.json | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/i18n/strings/es.json b/src/i18n/strings/es.json index 5e8e57bacd..c1fb8e6542 100644 --- a/src/i18n/strings/es.json +++ b/src/i18n/strings/es.json @@ -82,7 +82,7 @@ "Fill screen": "Llenar pantalla", "Filter room members": "Filtrar miembros de la sala", "Forget room": "Olvidar sala", - "For security, this session has been signed out. Please sign in again.": "Por seguridad, esta sesión ha sido cerrada. Por favor inicia sesión nuevamente.", + "For security, this session has been signed out. Please sign in again.": "Esta sesión ha sido cerrada. Por favor, inicia sesión de nuevo.", "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s de %(fromPowerLevel)s a %(toPowerLevel)s", "Guests cannot join this room even if explicitly invited.": "Los invitados no pueden unirse a esta sala incluso si se les invita explícitamente.", "Hangup": "Colgar", @@ -168,7 +168,7 @@ "Search": "Buscar", "Search failed": "Falló la búsqueda", "Seen by %(userName)s at %(dateTime)s": "Visto por %(userName)s el %(dateTime)s", - "Send Reset Email": "Enviar correo electrónico de restauración", + "Send Reset Email": "Enviar correo de restauración", "%(senderDisplayName)s sent an image.": "%(senderDisplayName)s envió una imagen.", "%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.": "%(senderName)s invitó a %(targetDisplayName)s a unirse a la sala.", "Server error": "Error del servidor", @@ -2021,7 +2021,7 @@ "Your Matrix account on ": "Su cuenta de Matrix en ", "No identity server is configured: add one in server settings to reset your password.": "No hay ningún servidor de identidad configurado: añada uno en la configuración del servidor para poder restablecer su contraseña.", "Sign in instead": "Iniciar sesión", - "A verification email will be sent to your inbox to confirm setting your new password.": "Se enviará un correo electrónico de verificación a su bandeja de entrada para confirmar la configuración de su nueva contraseña.", + "A verification email will be sent to your inbox to confirm setting your new password.": "Te enviaremos un correo electrónico de verificación para cambiar tu contraseña.", "Your password has been reset.": "Su contraseña ha sido restablecida.", "You have been logged out of all sessions and will no longer receive push notifications. To re-enable notifications, sign in again on each device.": "Ha cerrado todas las sesiones y ya no recibirá más notificaciones push. Para volver a activar las notificaciones, inicie sesión de nuevo en cada dispositivo.", "Set a new password": "Elegir una nueva contraseña", @@ -3321,5 +3321,23 @@ "Currently joining %(count)s rooms|other": "Entrando en %(count)s salas", "No results for \"%(query)s\"": "Ningún resultado para «%(query)s»", "The user you called is busy.": "La persona a la que has llamado está ocupada.", - "User Busy": "Persona ocupada" + "User Busy": "Persona ocupada", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "Normalmente tus mensajes privados están cifrados, pero esta sala no lo está. Esto puede ser debido a un dispositivo o método no soportado, como las invitaciones por correo. Activa el cifrado en ajustes.", + "End-to-end encryption isn't enabled": "El cifrado de extremo a extremo no está activado", + "If you can't see who you’re looking for, send them your invite link below.": "Si no encuentras abajo a quien buscas, envíale tu enlace de invitación.", + "Teammates might not be able to view or join any private rooms you make.": "Las personas de tu equipo no podrán ver o unirse a ninguna sala privada que crees.", + "We're working on this as part of the beta, but just want to let you know.": "Estamos trabajando en ello como parte de la beta, pero te lo queríamos contar.", + "Or send invite link": "O envía un enlace de invitación", + "Some suggestions may be hidden for privacy.": "Puede que se hayan ocultado algunas sugerencias por motivos de privacidad.", + "Search for rooms or people": "Busca salas o gente", + "Message preview": "Vista previa del mensaje", + "Forward message": "Reenviar mensaje", + "Open link": "Abrir enlace", + "Sent": "Enviado", + "You don't have permission to do this": "No tienes permisos para hacer eso", + "Error - Mixed content": "Error - Contenido mezclado", + "Error loading Widget": "Error al cargar el widget", + "Pinned messages": "Mensajes fijados", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "Si tienes permisos, abre el menú de cualquier mensaje y selecciona Fijar para colocarlo aquí.", + "Nothing pinned, yet": "Nada fijado, todavía" } From 103577f0e6fe5eaa6835314fdaba9693c5b07dd3 Mon Sep 17 00:00:00 2001 From: Szimszon Date: Tue, 15 Jun 2021 19:52:03 +0000 Subject: [PATCH 0493/1270] Translated using Weblate (Hungarian) Currently translated at 100.0% (2993 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/ --- src/i18n/strings/hu.json | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/i18n/strings/hu.json b/src/i18n/strings/hu.json index b290f20076..cb749f12a5 100644 --- a/src/i18n/strings/hu.json +++ b/src/i18n/strings/hu.json @@ -3376,5 +3376,22 @@ "No results for \"%(query)s\"": "Nincs találat ehhez: %(query)s", "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Próbáljon ki más szavakat vagy keressen elgépelést. Néhány találat azért nem látszik, mert privát és meghívóra van szüksége, hogy csatlakozhasson.", "The user you called is busy.": "A hívott felhasználó foglalt.", - "User Busy": "Felhasználó foglalt" + "User Busy": "Felhasználó foglalt", + "If you can't see who you’re looking for, send them your invite link below.": "Ha nem található a keresett személy, küldje el az alábbi hivatkozást neki.", + "Some suggestions may be hidden for privacy.": "Adatvédelem miatt néhány javaslat esetleg rejtve van.", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "Ha van hozzá jogosultsága, nyissa meg a menüt bármelyik üzenetben és válassza a Kitűz menüpontot a kitűzéshez.", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "A személyes beszélgetések általában titkosítottak, de ez a szoba nem az. Ez azért lehet, mert nem támogatott eszköz vagy mód használt mint például e-mail meghívók. Titkosítás engedélyezése a beállításokban.", + "We're working on this as part of the beta, but just want to let you know.": "A béta funkció ezen részén dolgozunk, csak tudatni szerettük volna.", + "Teammates might not be able to view or join any private rooms you make.": "Csapattagok lehet, hogy nem láthatják vagy léphetnek be az ön által készített privát szobákba.", + "Or send invite link": "Vagy meghívó link küldése", + "Search for rooms or people": "Szobák vagy emberek keresése", + "Forward message": "Üzenet továbbítása", + "Open link": "Hivatkozás megnyitása", + "Sent": "Elküldve", + "You don't have permission to do this": "Nincs jogosultsága ehhez", + "Error - Mixed content": "Hiba - Vegyes tartalom", + "Error loading Widget": "Kisalkalmazás betöltési hiba", + "Pinned messages": "Kitűzött üzenetek", + "Nothing pinned, yet": "Semmi sincs kitűzve egyenlőre", + "End-to-end encryption isn't enabled": "Végpontok közötti titkosítás nincs engedélyezve" } From ed306d74562f3be4454d8cfc6a7a8efa54ea7673 Mon Sep 17 00:00:00 2001 From: jelv Date: Wed, 16 Jun 2021 11:39:17 +0000 Subject: [PATCH 0494/1270] Translated using Weblate (Dutch) Currently translated at 100.0% (2993 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/ --- src/i18n/strings/nl.json | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json index 7299e9d161..1818a64e54 100644 --- a/src/i18n/strings/nl.json +++ b/src/i18n/strings/nl.json @@ -1177,7 +1177,7 @@ "Homeserver URL": "Thuisserver-URL", "Identity Server URL": "Identiteitsserver-URL", "Free": "Gratis", - "Join millions for free on the largest public server": "Doe mee met miljoenen anderen op de grootste openbare server", + "Join millions for free on the largest public server": "Neem deel aan de grootste openbare server met miljoenen anderen", "Premium": "Premium", "Premium hosting for organisations Learn more": "Premium hosting voor organisaties Lees meer", "Other": "Overige", @@ -1513,7 +1513,7 @@ "View": "Bekijken", "Find a room…": "Zoek een gesprek…", "Find a room… (e.g. %(exampleRoom)s)": "Zoek een gesprek… (bv. %(exampleRoom)s)", - "If you can't find the room you're looking for, ask for an invite or Create a new room.": "Als u het gesprek dat u zoekt niet kunt vinden, vraag dan een uitnodiging, of Maak een nieuw gesprek aan.", + "If you can't find the room you're looking for, ask for an invite or Create a new room.": "Als u het gesprek dat u zoekt niet kunt vinden, vraag dan een uitnodiging of maak een nieuw gesprek aan.", "Explore rooms": "Gesprekken ontdekken", "Show previews/thumbnails for images": "Miniaturen voor afbeeldingen tonen", "Clear cache and reload": "Cache wissen en herladen", @@ -1932,7 +1932,7 @@ "Jump to first unread room.": "Ga naar het eerste ongelezen gesprek.", "Jump to first invite.": "Ga naar de eerste uitnodiging.", "Session verified": "Sessie geverifieerd", - "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Uw nieuwe sessie is nu geverifieerd. U heeft nu toegang tot uw versleutelde berichten, en deze sessie zal voor andere gebruikers als vertrouwd gemarkeerd worden.", + "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Uw nieuwe sessie is nu geverifieerd. U heeft nu toegang tot uw versleutelde berichten en deze sessie zal voor andere gebruikers als vertrouwd gemarkeerd worden.", "Your new session is now verified. Other users will see it as trusted.": "Uw nieuwe sessie is nu geverifieerd. Ze zal voor andere gebruikers als vertrouwd gemarkeerd worden.", "Without completing security on this session, it won’t have access to encrypted messages.": "Als u de beveiliging van deze sessie niet vervolledigt, zal ze geen toegang hebben tot uw versleutelde berichten.", "Go Back": "Terugkeren", @@ -3267,5 +3267,23 @@ "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Probeer andere woorden of controleer op typefouten. Sommige resultaten zijn mogelijk niet zichtbaar omdat ze privé zijn of u een uitnodiging nodig heeft om deel te nemen.", "No results for \"%(query)s\"": "Geen resultaten voor \"%(query)s\"", "The user you called is busy.": "De gebruiker die u belde is bezet.", - "User Busy": "Gebruiker Bezet" + "User Busy": "Gebruiker Bezet", + "We're working on this as part of the beta, but just want to let you know.": "We werken hieraan als onderdeel van de beta, maar we willen het u gewoon laten weten.", + "Teammates might not be able to view or join any private rooms you make.": "Teamgenoten zijn mogelijk niet in staat zijn om privégesprekken die u maakt te bekijken of er lid van te worden.", + "Or send invite link": "Of verstuur uw uitnodigingslink", + "If you can't see who you’re looking for, send them your invite link below.": "Als u niet kunt vinden wie u zoekt, stuur ze dan uw uitnodigingslink hieronder.", + "Some suggestions may be hidden for privacy.": "Sommige suggesties kunnen om privacyredenen verborgen zijn.", + "Search for rooms or people": "Zoek naar gesprekken of personen", + "Message preview": "Voorbeeld van bericht", + "Forward message": "Bericht doorsturen", + "Open link": "Koppeling openen", + "Sent": "Verstuurd", + "You don't have permission to do this": "U heeft geen rechten om dit te doen", + "Error - Mixed content": "Fout - Gemengde inhoud", + "Error loading Widget": "Fout bij laden Widget", + "Pinned messages": "Vastgeprikte berichten", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "Als u de rechten heeft, open dan het menu op elk bericht en selecteer Vastprikken om ze hier te zetten.", + "Nothing pinned, yet": "Nog niks vastgeprikt", + "End-to-end encryption isn't enabled": "Eind-tot-eind-versleuteling is uitgeschakeld", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "Uw privéberichten zijn normaal gesproken versleuteld, maar dit gesprek niet. Meestal is dit te wijten aan een niet-ondersteund apparaat of methode die wordt gebruikt, zoals e-mailuitnodigingen. Versleuting inschakelen in instellingen." } From 3ddb103dd6e2a494f87e57a7547a985322dbf708 Mon Sep 17 00:00:00 2001 From: LinAGKar Date: Thu, 17 Jun 2021 08:20:23 +0000 Subject: [PATCH 0495/1270] Translated using Weblate (Swedish) Currently translated at 100.0% (2993 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sv/ --- src/i18n/strings/sv.json | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/i18n/strings/sv.json b/src/i18n/strings/sv.json index f026e0fe02..6033b561bd 100644 --- a/src/i18n/strings/sv.json +++ b/src/i18n/strings/sv.json @@ -3311,5 +3311,23 @@ "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Testa andra ord eller kolla efter felskrivningar. Vissa resultat kanske inte visas för att de är privata och du behöver en inbjudan för att gå med i dem.", "No results for \"%(query)s\"": "Inga resultat för \"%(query)s\"", "The user you called is busy.": "Användaren du ringde är upptagen.", - "User Busy": "Användare upptagen" + "User Busy": "Användare upptagen", + "We're working on this as part of the beta, but just want to let you know.": "Vi jobbar på detta som en del av betan, men vi ville låta dig veta.", + "Teammates might not be able to view or join any private rooms you make.": "Teammedlemmar kanske inte kan se eller gå med i privata rum du skapar.", + "Or send invite link": "Eller skicka inbjudningslänk", + "If you can't see who you’re looking for, send them your invite link below.": "Om du inte kan se den du letar efter, skicka dem din inbjudningslänk nedan.", + "Some suggestions may be hidden for privacy.": "Vissa förslag kan vara dolda av sekretesskäl.", + "Search for rooms or people": "Sök efter rum eller personer", + "Message preview": "Meddelandeförhandsvisning", + "Forward message": "Vidarebefordra meddelande", + "Open link": "Öppna länk", + "Sent": "Skickat", + "You don't have permission to do this": "Du har inte behörighet att göra detta", + "Error - Mixed content": "Fel - blandat innehåll", + "Error loading Widget": "Fel vid laddning av widget", + "Pinned messages": "Fästa meddelanden", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "Om du har behörighet, öppna menyn på ett meddelande och välj Fäst för att fösta dem här.", + "Nothing pinned, yet": "Inget fäst än", + "End-to-end encryption isn't enabled": "Totalsträckskryptering är inte aktiverat", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "Dina privata meddelanden är normalt krypterade, men det här rummet är inte det. Oftast så beror detta på att en enhet eller metod som används ej stöds, som e-postinbjudningar. Aktivera kryptering i inställningarna." } From a9d33cbe1f258b8b37dcbfaa8c401c51bd79b95f Mon Sep 17 00:00:00 2001 From: Percy Date: Wed, 16 Jun 2021 16:00:16 +0000 Subject: [PATCH 0496/1270] Translated using Weblate (Chinese (Simplified)) Currently translated at 100.0% (2993 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hans/ --- src/i18n/strings/zh_Hans.json | 40 +++++++++++++++++++++++++---------- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/src/i18n/strings/zh_Hans.json b/src/i18n/strings/zh_Hans.json index 3267060d64..7aa0d75539 100644 --- a/src/i18n/strings/zh_Hans.json +++ b/src/i18n/strings/zh_Hans.json @@ -510,8 +510,8 @@ "Restricted": "受限用户", "To use it, just wait for autocomplete results to load and tab through them.": "若要使用自动补全，只要等待自动补全结果加载完成，按 Tab 键切换即可。", "%(oldDisplayName)s changed their display name to %(displayName)s.": "%(oldDisplayName)s 将他们的昵称修改成了 %(displayName)s 。", - "Stickerpack": "贴图集", - "You don't currently have any stickerpacks enabled": "你目前没有启用任何贴图集", + "Stickerpack": "贴纸包", + "You don't currently have any stickerpacks enabled": "你目前未启用任何贴纸包", "Key request sent.": "已发送密钥共享请求。", "You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the room it will be impossible to regain privileges.": "如果你是房间中最后一位有权限的用户，在你降低自己的权限等级后将无法撤回此修改，因为你将无法重新获得权限。", "You will not be able to undo this change as you are promoting the user to have the same power level as yourself.": "你将无法撤回此修改，因为你正在将此用户的滥权等级提升至与你相同。", @@ -1071,10 +1071,10 @@ "Ignored users": "已忽略的用户", "Bulk options": "批量选择", "Key backup": "密钥备份", - "Security & Privacy": "安全与隐私", + "Security & Privacy": "隐私安全", "Missing media permissions, click the button below to request.": "缺少媒体权限，点击下面的按钮以请求权限。", "Request media permissions": "请求媒体权限", - "Voice & Video": "语音与视频", + "Voice & Video": "语音视频", "Room information": "聊天室信息", "Internal room ID:": "内部聊天室 ID：", "Room version": "聊天室版本", @@ -1566,7 +1566,7 @@ "If you don't want to use to discover and be discoverable by existing contacts you know, enter another identity server below.": "如果你不想使用 以发现你认识的现存联系人并被其发现，请在下方输入另一个身份服务器。", "Identity Server": "身份服务器", "You are not currently using an identity server. To discover and be discoverable by existing contacts you know, add one below.": "你现在没有使用身份服务器。若想发现你认识的现存联系人并被其发现，请在下方添加一个身份服务器。", - "Disconnecting from your identity server will mean you won't be discoverable by other users and you won't be able to invite others by email or phone.": "从你的身份服务器断开连接意味着你将不可被别的用户发现，同时你也将不能用邮箱或电话邀请别人。", + "Disconnecting from your identity server will mean you won't be discoverable by other users and you won't be able to invite others by email or phone.": "断开身份服务器连接意味着你将无法被其他用户发现，同时你也将无法使用电子邮件或电话邀请别人。", "Using an identity server is optional. If you choose not to use an identity server, you won't be discoverable by other users and you won't be able to invite others by email or phone.": "使用身份服务器是可选的。如果你选择不使用身份服务器，你将不能被别的用户发现，也不能用邮箱或电话邀请别人。", "Do not use an identity server": "不使用身份服务器", "Enter a new identity server": "输入一个新的身份服务器", @@ -1686,9 +1686,9 @@ "Cannot connect to integration manager": "不能连接到集成管理器", "The integration manager is offline or it cannot reach your homeserver.": "此集成管理器为离线状态或者其不能访问你的主服务器。", "check your browser plugins for anything that might block the identity server (such as Privacy Badger)": "检查你的浏览器是否安装有可能屏蔽身份服务器的插件（例如 Privacy Badger）", - "Use an Integration Manager (%(serverName)s) to manage bots, widgets, and sticker packs.": "使用集成管理器 （%(serverName)s） 以管理机器人、挂件和贴图集。", - "Use an Integration Manager to manage bots, widgets, and sticker packs.": "使用集成管理器以管理机器人、挂件和贴图集。", - "Manage integrations": "管理集成", + "Use an Integration Manager (%(serverName)s) to manage bots, widgets, and sticker packs.": "使用集成管理器 （%(serverName)s） 以管理机器人、挂件和贴纸包。", + "Use an Integration Manager to manage bots, widgets, and sticker packs.": "使用集成管理器以管理机器人、挂件和贴纸包。", + "Manage integrations": "集成管理", "Integration Managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.": "集成管理器接收配置数据，并可以以你的名义修改挂件、发送聊天室邀请及设置权限级别。", "Use between %(min)s pt and %(max)s pt": "请使用介于 %(min)s pt 和 %(max)s pt 之间的大小", "Deactivate account": "停用账号", @@ -1995,7 +1995,7 @@ "Verify this device to mark it as trusted. Trusting this device gives you and other users extra peace of mind when using end-to-end encrypted messages.": "验证此设备以将其标记为已信任。在收发端对端加密消息时，信任设备可让你与其他用户更加放心。", "Verifying this device will mark it as trusted, and users who have verified with you will trust this device.": "验证此设备会将其标记为已信任，与此同时，其他验证了你的用户也会信任此设备。", "Integrations are disabled": "集成已禁用", - "Enable 'Manage Integrations' in Settings to do this.": "在设置中启用「管理集成」以执行此操作。", + "Enable 'Manage Integrations' in Settings to do this.": "在设置中启用「管理管理」以执行此操作。", "Integrations not allowed": "集成未被允许", "Your %(brand)s doesn't allow you to use an Integration Manager to do this. Please contact an admin.": "你的 %(brand)s 不允许你使用集成管理器来完成此操作。请联系管理员。", "To continue, use Single Sign On to prove your identity.": "要继续，请使用单点登录证明你的身份。", @@ -2077,7 +2077,7 @@ "Integration Manager": "集成管理器", "Find others by phone or email": "通过电话或邮箱寻找别人", "Be found by phone or email": "通过电话或邮箱被寻找", - "Use bots, bridges, widgets and sticker packs": "使用机器人、桥接、挂件和贴图集", + "Use bots, bridges, widgets and sticker packs": "使用机器人、桥接、挂件和贴纸包", "Terms of Service": "服务协议", "To continue you need to accept the terms of this service.": "要继续，你需要接受此服务协议。", "Service": "服务", @@ -3280,5 +3280,23 @@ "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "尝试不同的单词或检查拼写错误。某些结果可能不可见，因为它们属于私有的，你需要一个邀请才能加入。", "No results for \"%(query)s\"": "「%(query)s」没有结果", "The user you called is busy.": "你所拨打的用户正在忙碌中。", - "User Busy": "用户正在忙" + "User Busy": "用户正在忙", + "We're working on this as part of the beta, but just want to let you know.": "我们正在研究让它成为测试版的一部分，但只想让你找到。", + "Teammates might not be able to view or join any private rooms you make.": "队友可能无法查看或加入你所创建的任何一个私有聊天室。", + "Or send invite link": "或发送邀请链接", + "If you can't see who you’re looking for, send them your invite link below.": "如果你找不到你正在寻找的人，请在下方向他们发送你的邀请链接。", + "Some suggestions may be hidden for privacy.": "出于隐私考虑，部分建议可能会被隐藏。", + "Search for rooms or people": "搜索聊天室或用户", + "Message preview": "消息预览", + "Forward message": "转发消息", + "Open link": "打开链接", + "Sent": "已发送", + "You don't have permission to do this": "你无权执行此操作", + "Error - Mixed content": "错误 - 混合内容", + "Error loading Widget": "加载挂件时发生错误", + "Pinned messages": "已置顶的消息", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "如果你拥有权限，请打开任何消息的菜单并选择置顶将它们粘贴至此。", + "Nothing pinned, yet": "没有置顶", + "End-to-end encryption isn't enabled": "未启用端对端加密", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "你的私人信息通常是被加密的，但此聊天室并未加密。一般而言，这可能是因为使用了不受支持的设备或方法，如电子邮件邀请。在设置中启用加密。" } From c0bc019e660c973e7707f680125330ca9718c853 Mon Sep 17 00:00:00 2001 From: Jeff Huang Date: Wed, 16 Jun 2021 02:14:34 +0000 Subject: [PATCH 0497/1270] Translated using Weblate (Chinese (Traditional)) Currently translated at 100.0% (2993 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hant/ --- src/i18n/strings/zh_Hant.json | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json index 053839f937..d9429fc1c3 100644 --- a/src/i18n/strings/zh_Hant.json +++ b/src/i18n/strings/zh_Hant.json @@ -3384,5 +3384,22 @@ "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "嘗試不同的詞或是檢查拼字。某些結果可能不可見，因為其為私人的，您必須要有邀請才能加入。", "No results for \"%(query)s\"": "「%(query)s」沒有結果", "The user you called is busy.": "您想要通話的使用者目前忙碌中。", - "User Busy": "使用者忙碌" + "User Busy": "使用者忙碌", + "We're working on this as part of the beta, but just want to let you know.": "我們正將此作為測試版的一部分來處理，但只是想讓您知道。", + "Teammates might not be able to view or join any private rooms you make.": "隊友可能無法檢視或加入您建立的任何私人聊天室。", + "Or send invite link": "或傳送邀請連結", + "If you can't see who you’re looking for, send them your invite link below.": "如果您看不到您要找的人，請在下方向他們傳送您的邀請連結。", + "Some suggestions may be hidden for privacy.": "出於隱私考量，可能會隱藏一些建議。", + "Search for rooms or people": "搜尋聊天室或夥伴", + "Forward message": "轉寄訊息", + "Open link": "開啟連結", + "Sent": "已傳送", + "You don't have permission to do this": "您無權執行此動作", + "Error - Mixed content": "錯誤 - 混合內容", + "Error loading Widget": "載入小工具時發生錯誤", + "Pinned messages": "已釘選的訊息", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "如果您有權限，請開啟任何訊息的選單，並選取釘選以將它們貼到這裡。", + "Nothing pinned, yet": "尚未釘選任何東西", + "End-to-end encryption isn't enabled": "端到端加密未啟用", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "您的私人訊息通常是被加密的，但此聊天室不是。一般來說，這可能是因為使用了不支援的裝置或方法，例如電子郵件邀請。在設定中啟用加密。" } From 1013c1ec2953d77951d2c3797c97c903e89142b3 Mon Sep 17 00:00:00 2001 From: random Date: Thu, 17 Jun 2021 08:27:19 +0000 Subject: [PATCH 0498/1270] Translated using Weblate (Italian) Currently translated at 100.0% (2993 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/ --- src/i18n/strings/it.json | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json index c83800e82a..207ff24d58 100644 --- a/src/i18n/strings/it.json +++ b/src/i18n/strings/it.json @@ -3381,5 +3381,22 @@ "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Prova parole diverse o controlla errori di battitura. Alcuni risultati potrebbero non essere visibili dato che sono privati e ti servirebbe un invito per unirti.", "No results for \"%(query)s\"": "Nessun risultato per \"%(query)s\"", "The user you called is busy.": "L'utente che hai chiamato è occupato.", - "User Busy": "Utente occupato" + "User Busy": "Utente occupato", + "We're working on this as part of the beta, but just want to let you know.": "Stiamo lavorando a questo come parte della beta, ma vogliamo almeno fartelo sapere.", + "Teammates might not be able to view or join any private rooms you make.": "I tuoi compagni potrebbero non riuscire a vedere o unirsi a qualsiasi stanza privata che crei.", + "Or send invite link": "O manda un collegamento di invito", + "If you can't see who you’re looking for, send them your invite link below.": "Se non vedi chi stai cercando, mandagli il collegamento di invito sottostante.", + "Some suggestions may be hidden for privacy.": "Alcuni suggerimenti potrebbero essere nascosti per privacy.", + "Search for rooms or people": "Cerca stanze o persone", + "Forward message": "Inoltra messaggio", + "Open link": "Apri collegamento", + "Sent": "Inviato", + "You don't have permission to do this": "Non hai il permesso per farlo", + "Error - Mixed content": "Errore - Contenuto misto", + "Error loading Widget": "Errore di caricamento del widget", + "Nothing pinned, yet": "Non c'è ancora nulla di ancorato", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "Se ne hai il permesso, apri il menu di qualsiasi messaggio e seleziona Fissa per ancorarlo qui.", + "Pinned messages": "Messaggi ancorati", + "End-to-end encryption isn't enabled": "La crittografia end-to-end non è attiva", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "I tuoi messaggi privati normalmente sono cifrati, ma questa stanza non lo è. Di solito ciò è dovuto ad un dispositivo non supportato o dal metodo usato, come gli inviti per email. Attiva la crittografia nelle impostazioni." } From f1a8c838f63ca9085ad042b6d2026308112cd0cd Mon Sep 17 00:00:00 2001 From: waclaw66 Date: Wed, 16 Jun 2021 07:16:47 +0000 Subject: [PATCH 0499/1270] Translated using Weblate (Czech) Currently translated at 100.0% (2993 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/ --- src/i18n/strings/cs.json | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json index a84a10f21c..27235665aa 100644 --- a/src/i18n/strings/cs.json +++ b/src/i18n/strings/cs.json @@ -3298,5 +3298,23 @@ "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Vyzkoušejte jiná slova nebo zkontrolujte překlepy. Některé výsledky nemusí být viditelné, protože jsou soukromé a potřebujete k nim pozvánku.", "No results for \"%(query)s\"": "Žádné výsledky pro \"%(query)s\"", "The user you called is busy.": "Volaný uživatel je zaneprázdněn.", - "User Busy": "Uživatel zaneprázdněn" + "User Busy": "Uživatel zaneprázdněn", + "We're working on this as part of the beta, but just want to let you know.": "Pracujeme na tom v rámci beta verze, ale jen vás o tom chceme informovat.", + "Teammates might not be able to view or join any private rooms you make.": "Je možné, že spolupracovníci nebudou moci zobrazit soukromé místnosti, které jste vytvořili, nebo se k nim připojit.", + "Or send invite link": "Nebo pošlete pozvánku", + "If you can't see who you’re looking for, send them your invite link below.": "Pokud jste nenašli, koho hledáte, pošlete mu odkaz na pozvánku níže.", + "Some suggestions may be hidden for privacy.": "Některé návrhy mohou být z důvodu ochrany soukromí skryty.", + "Search for rooms or people": "Hledat místnosti nebo osoby", + "Message preview": "Náhled zprávy", + "Forward message": "Přeposlat zprávu", + "Open link": "Otevřít odkaz", + "Sent": "Odesláno", + "You don't have permission to do this": "K tomu nemáte povolení", + "Error - Mixed content": "Chyba - Smíšený obsah", + "Error loading Widget": "Chyba při načítání widgetu", + "Pinned messages": "Připnuté zprávy", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "Pokud máte oprávnění, otevřete nabídku na libovolné zprávě a výběrem možnosti Připnout je sem vložte.", + "Nothing pinned, yet": "Zatím není nic připnuto", + "End-to-end encryption isn't enabled": "Není povoleno koncové šifrování", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "Vaše soukromé zprávy jsou obvykle šifrované, ale tato místnost není. Obvykle je to způsobeno nepodporovaným zařízením nebo použitou metodou, například emailovými pozvánkami. Zapněte šifrování v nastavení." } From fcf31240e319f0e4b76b05d427473c3900b8c23e Mon Sep 17 00:00:00 2001 From: XoseM Date: Wed, 16 Jun 2021 06:03:11 +0000 Subject: [PATCH 0500/1270] Translated using Weblate (Galician) Currently translated at 100.0% (2993 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/gl/ --- src/i18n/strings/gl.json | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/i18n/strings/gl.json b/src/i18n/strings/gl.json index abb4776a55..b880c5b548 100644 --- a/src/i18n/strings/gl.json +++ b/src/i18n/strings/gl.json @@ -3381,5 +3381,22 @@ "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Intentao con outras palabras e fíxate nos erros de escritura. Algúns resultados poderían non ser visibles porque son privados e precisas un convite.", "No results for \"%(query)s\"": "Sen resultados para \"%(query)s\"", "The user you called is busy.": "A persoa á que chamas está ocupada.", - "User Busy": "Usuaria ocupada" + "User Busy": "Usuaria ocupada", + "We're working on this as part of the beta, but just want to let you know.": "Estamos traballando nesto como parte da beta, só queriamos que o soubeses.", + "Teammates might not be able to view or join any private rooms you make.": "As outras compañeiras de grupo poderían non ver ou unirse ás salas privadas que creas.", + "Or send invite link": "Ou envía ligazón de convite", + "If you can't see who you’re looking for, send them your invite link below.": "Se non podes a quen estás a buscar, envíalle ti esta ligazón de convite.", + "Some suggestions may be hidden for privacy.": "Algunhas suxestións poderían estar agochadas por privacidade.", + "Search for rooms or people": "Busca salas ou persoas", + "Forward message": "Reenviar mensaxe", + "Open link": "Abrir ligazón", + "Sent": "Enviado", + "You don't have permission to do this": "Non tes permiso para facer isto", + "Error - Mixed content": "Erro - Contido variado", + "Error loading Widget": "Erro ao cargar o Widget", + "Pinned messages": "Mensaxes fixadas", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "Se tes permisos, abre o menú en calquera mensaxe e elixe Fixar para pegalos aquí.", + "Nothing pinned, yet": "Nada fixado, por agora", + "End-to-end encryption isn't enabled": "Non está activado o cifrado de extremo-a-extremo", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "As túas mensaxes privadas normalmente están cifradas, pero esta sala non. Habitualmente esto é debido a que se utiliza un dispositivo ou métodos no soportados, como convites por email. Activa o cifrado nos axustes." } From e7b05963802f9eb6b8b1192c9a9e95dfa8958ff0 Mon Sep 17 00:00:00 2001 From: Besnik Bleta Date: Wed, 16 Jun 2021 10:14:11 +0000 Subject: [PATCH 0501/1270] Translated using Weblate (Albanian) Currently translated at 99.7% (2985 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sq/ --- src/i18n/strings/sq.json | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/i18n/strings/sq.json b/src/i18n/strings/sq.json index 4996decbaf..b2101151e1 100644 --- a/src/i18n/strings/sq.json +++ b/src/i18n/strings/sq.json @@ -3370,5 +3370,21 @@ "The user you called is busy.": "Përdoruesi që thirrët është i zënë.", "User Busy": "Përdoruesi Është i Zënë", "Kick, ban, or invite people to your active room, and make you leave": "Përzini, dëboni, ose ftoni persona te dhoma juaj aktive, dhe bëni largimin tuaj", - "Kick, ban, or invite people to this room, and make you leave": "Përzini, dëboni, ose ftoni persona në këtë dhomë, dhe bëni largimin tuaj" + "Kick, ban, or invite people to this room, and make you leave": "Përzini, dëboni, ose ftoni persona në këtë dhomë, dhe bëni largimin tuaj", + "We're working on this as part of the beta, but just want to let you know.": "Po merremi me këtë, si pjesë e versionit beta, thjesht duam ta dini.", + "Teammates might not be able to view or join any private rooms you make.": "Anëtarët e ekipit mund të mos jenë në gjendje të shohin ose hyjnë në çfarëdo dhome private që krijoni.", + "Or send invite link": "Ose dërgoni një lidhje ftese", + "If you can't see who you’re looking for, send them your invite link below.": "Nëse s’e shihni atë që po kërkoni, dërgojini nga më poshtë një lidhje ftese.", + "Some suggestions may be hidden for privacy.": "Disa sugjerime mund të jenë fshehur, për arsye privatësie.", + "Search for rooms or people": "Kërkoni për dhoma ose persona", + "Forward message": "Përcille mesazhin", + "Open link": "Hape lidhjen", + "You don't have permission to do this": "S’keni leje ta bëni këtë", + "Error - Mixed content": "Gabim - Lëndë e përzierë", + "Error loading Widget": "Gabim në ngarkim Widget-i", + "Pinned messages": "Mesazhe të fiksuar", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "Nëse keni leje, hapni menunë për çfarëdo mesazhi dhe përzgjidhni Fiksoje, për ta ngjitur këtu.", + "Nothing pinned, yet": "Ende pa fiksuar gjë", + "End-to-end encryption isn't enabled": "Fshehtëzimi skaj-më-skaj s’është i aktivizuar", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "Mesazhet tuaja private normalisht fshehtëzohen, por kjo dhomë nuk fshehtëzohet. Zakonisht kjo vjen si pasojë e përdorimit të një pajisjeje apo metode të pambuluar, bie fjala, ftesa me email. Aktivizoni fshehtëzimin që nga rregullimet." } From d33cfd6869e61e79b2f1d7d8f9da30dfbec9a943 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Priit=20J=C3=B5er=C3=BC=C3=BCt?= Date: Fri, 18 Jun 2021 21:35:18 +0000 Subject: [PATCH 0502/1270] Translated using Weblate (Estonian) Currently translated at 99.8% (2988 of 2993 strings) Translation: Element Web/matrix-react-sdk Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/ --- src/i18n/strings/et.json | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json index a8e267fb01..9454efd956 100644 --- a/src/i18n/strings/et.json +++ b/src/i18n/strings/et.json @@ -126,7 +126,7 @@ "Explore Public Rooms": "Sirvi avalikke jututubasid", "Explore": "Uuri", "Filter rooms…": "Filtreeri jututubasid…", - "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Liites kokku kasutajaid ja jututubasid loo oma kogukond! Loo kogukonna koduleht, et märkida oma koht Matrix'i universumis.", + "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Liites kokku kasutajaid ja jututubasid loo oma kogukond! Kogukonna kodulehega tähistad oma koha Matrix'i universumis.", "Explore rooms": "Uuri jututubasid", "If you've joined lots of rooms, this might take a while": "Kui oled liitunud paljude jututubadega, siis see võib natuke aega võtta", "If disabled, messages from encrypted rooms won't appear in search results.": "Kui see seadistus pole kasutusel, siis krüptitud jututubade sõnumeid otsing ei vaata.", @@ -2218,7 +2218,7 @@ "%(brand)s can't securely cache encrypted messages locally while running in a web browser. Use %(brand)s Desktop for encrypted messages to appear in search results.": "%(brand)s ei võimalda veebibrauseris töötades krüptitud sõnumeid turvaliselt puhverdada. Selleks, et krüptitud sõnumeid saaks otsida, kasuta %(brand)s Desktop rakendust Matrix'i kliendina.", "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Krüptitud sõnumid kasutavad läbivat krüptimist. Ainult sinul ja saaja(te)l on võtmed selliste sõnumite lugemiseks.", "Unable to load key backup status": "Võtmete varunduse oleku laadimine ei õnnestunud", - "Restore from Backup": "Taasta varundusest", + "Restore from Backup": "Taasta varukoopiast", "This session is backing up your keys. ": "See sessioon varundab sinu krüptovõtmeid. ", "This session is not backing up your keys, but you do have an existing backup you can restore from and add to going forward.": "See sessioon ei varunda sinu krüptovõtmeid, aga sul on olemas varundus, millest saad taastada ning millele saad võtmeid lisada.", "Success": "Õnnestus", @@ -3298,7 +3298,7 @@ "You have no ignored users.": "Sa ei ole veel kedagi eiranud.", "Play": "Esita", "Pause": "Peata", - "Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. Learn more.": "Kas sa tahaksid katsetada? Sa tutvud meie rakenduse uuendustega teistest varem ja võib-olla isegi saad mõjutada arenduse lõpptulemust. Lisateavet liad siit.", + "Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. Learn more.": "Kas sa tahaksid katsetada? Sa tutvud meie rakenduse uuendustega teistest varem ja võib-olla isegi saad mõjutada arenduse lõpptulemust. Lisateavet leiad siit.", "This is an experimental feature. For now, new users receiving an invite will have to open the invite on to actually join.": "See on katseline funktsionaalsus. Seetõttu uued kutse saanud kasutajad peavad tegelikuks liitumiseks avama kutse siin .", "To join %(spaceName)s, turn on the Spaces beta": "%(spaceName)s kogukonnakeskusega liitumiseks lülita sisse vastav katseline funktsionaalsus", "To view %(spaceName)s, turn on the Spaces beta": "%(spaceName)s kogukonnakeskuse vaatamiseks lülita sisse vastav katseline funktsionaalsus", @@ -3327,9 +3327,9 @@ "Please enter a name for the space": "Palun sisesta kogukonnakeskuse nimi", "Connecting": "Kõne on ühendamisel", "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)": "Kasuta võrdõigusvõrku 1:1 kõnede jaoks (kui sa P2P-võrgu sisse lülitad, siis teine osapool ilmselt näeb sinu IP-aadressi)", - "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Rakenduse beetaversioon on saadaval veebirakendusena, töölauarakendusena ja Androidi jaoks. Kõik funtsionaalsused ei pruugi sinu koduserveri poolt olla toetatud.", + "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Rakenduse beetaversioon on saadaval veebirakendusena, töölauarakendusena ja Androidi jaoks. Kõik funktsionaalsused ei pruugi sinu koduserveri poolt olla toetatud.", "You can leave the beta any time from settings or tapping on a beta badge, like the one above.": "Sa võid beetaversiooni kasutamise lõpetada niipea, kui tahad. Selleks klõpsi beeta-silti, mida näed siin samas ülal.", - "%(brand)s will reload with Spaces enabled. Communities and custom tags will be hidden.": "Käivitame %(brand)s uuesti nii, et kogukonnakeskused on kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid on siis välja lülitatud.", + "%(brand)s will reload with Spaces enabled. Communities and custom tags will be hidden.": "Käivitame %(brand)s'i uuesti nii, et kogukonnakeskused on kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid on siis välja lülitatud.", "%(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.": "Käivitame %(brand)s uuesti nii, et kogukonnakeskused ei ole kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid saavad jälle olema kasutusel.", "Beta available for web, desktop and Android. Thank you for trying the beta.": "Rakenduse beetaversioon on saadaval veebirakendusena, töölauarakendusena ja Androidi jaoks. Tänud, et oled huviline katsetama meie rakendust.", "Spaces are a new way to group rooms and people.": "Kogukonnakeskused on uus viis jututubade ja inimeste ühendamiseks.", @@ -3344,7 +3344,7 @@ "Add reaction": "Lisa reaktsioon", "Send and receive voice messages": "Saada ja võta vastu häälsõnumeid", "Your feedback will help make spaces better. The more detail you can go into, the better.": "Sinu tagasiside aitab teha kogukonnakeskuseid paremaks. Mida detailsemalt sa oma arvamust kirjeldad, seda parem.", - "If you leave, %(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.": "Kui sa lahkud, siis käivitame %(brand)s uuesti nii, et kogukonnakeskused ei ole kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid saavad jälle olema kasutusel.", + "If you leave, %(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.": "Kui sa lahkud, siis käivitame %(brand)s'i uuesti nii, et kogukonnakeskused ei ole kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid saavad jälle olema kasutusel.", "Message search initialisation failed": "Sõnumite otsingu alustamine ei õnnestunud", "sends space invaders": "korraldab ühe pisikese tulnukate vallutusretke", "Sends the given message with a space themed effect": "Saadab antud sõnumi kosmoseteemalise efektiga", @@ -3354,5 +3354,22 @@ "No results for \"%(query)s\"": "Päringule „%(query)s“ pole vastuseid", "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Proovi muid otsingusõnu või kontrolli, et neis polnud trükivigu. Kuna mõned otsingutulemused on privaatsed ja sa vajad kutset nende nägemiseks, siis kõiki tulemusi siin ei pruugi näha olla.", "Currently joining %(count)s rooms|other": "Parasjagu liitun %(count)s jututoaga", - "Currently joining %(count)s rooms|one": "Parasjagu liitun %(count)s jututoaga" + "Currently joining %(count)s rooms|one": "Parasjagu liitun %(count)s jututoaga", + "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. Enable encryption in settings.": "Sinu isiklikud sõnumid on tavaliselt läbivalt krüptitud, aga see jututuba ei ole. Tavaliselt on põhjuseks, et kasutusel on mõni seade või meetod nagu e-posti põhised kutsed, mis krüptimist veel ei toeta. Läbiva krüptimise saad sisse lülitada seadistustes.", + "We're working on this as part of the beta, but just want to let you know.": "Me küll alles arendame seda beetafunktsionaalsust, aga soovime, et sa sellest juba teaksid.", + "Teammates might not be able to view or join any private rooms you make.": "Kui muudad jututoa privaatseks, siis sinu kaaslased ei pruugi seda näha ega temaga liituda.", + "If you can't see who you’re looking for, send them your invite link below.": "Kui sa ei leia otsitavaid, siis saada neile kutse.", + "Or send invite link": "Või saada kutse link", + "If you have permissions, open the menu on any message and select Pin to stick them here.": "Kui sul on vastavad õigused olemas, siis ava sõnumi juuresolev menüü ning püsisõnumi tekitamiseks vali Klammerda.", + "Pinned messages": "Klammerdatud sõnumid", + "Nothing pinned, yet": "Klammerdatud sõnumeid veel pole", + "End-to-end encryption isn't enabled": "Läbiv krüptimine pole kasutusel", + "Some suggestions may be hidden for privacy.": "Mõned soovitused võivad privaatsusseadistuste tõttu olla peidetud.", + "Search for rooms or people": "Otsi jututubasid või inimesi", + "Forward message": "Edasta sõnum", + "Open link": "Ava link", + "Sent": "Saadetud", + "You don't have permission to do this": "Sul puuduvad selleks toiminguks õigused", + "Error - Mixed content": "Viga - erinev sisu", + "Error loading Widget": "Viga vidina laadimisel" } From d0ea842f1e0aa3bbd3d99009c2ce31284c76eacf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 20 Jun 2021 10:29:08 +0200 Subject: [PATCH 0503/1270] Remove sorting by index as it is already done here: https://github.com/matrix-org/matrix-react-sdk/blob/e9ea3cad76173c5e5b8f4d7d618a3d8a17548102/src/autocomplete/QueryMatcher.ts#L120 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/autocomplete/RoomProvider.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx index ad55b19101..04dc9720e6 100644 --- a/src/autocomplete/RoomProvider.tsx +++ b/src/autocomplete/RoomProvider.tsx @@ -32,15 +32,6 @@ import SettingsStore from "../settings/SettingsStore"; const ROOM_REGEX = /\B#\S*/g; -function score(query: string, space: string) { - const index = space.indexOf(query); - if (index === -1) { - return Infinity; - } else { - return index; - } -} - function matcherObject(room: Room, displayedAlias: string, matchName = "") { return { room, @@ -106,7 +97,6 @@ export default class RoomProvider extends AutocompleteProvider { const matchedString = command[0]; completions = this.matcher.match(matchedString, limit); completions = sortBy(completions, [ - (c) => score(matchedString, c.displayedAlias), (c) => c.displayedAlias.length, ]); completions = uniqBy(completions, (match) => match.room); From 7bf230e66502679c3f9894e8e642b215e48fd30d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 20 Jun 2021 10:41:36 +0200 Subject: [PATCH 0504/1270] Prefer canonical aliases over non-canonical ones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/autocomplete/RoomProvider.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx index 04dc9720e6..f784a57821 100644 --- a/src/autocomplete/RoomProvider.tsx +++ b/src/autocomplete/RoomProvider.tsx @@ -32,6 +32,11 @@ import SettingsStore from "../settings/SettingsStore"; const ROOM_REGEX = /\B#\S*/g; +// Prefer canonical aliases over non-canonical ones +function canonicalScore(displayedAlias: string, room: Room): number { + return displayedAlias === room.getCanonicalAlias() ? 0 : 1; +} + function matcherObject(room: Room, displayedAlias: string, matchName = "") { return { room, @@ -97,6 +102,7 @@ export default class RoomProvider extends AutocompleteProvider { const matchedString = command[0]; completions = this.matcher.match(matchedString, limit); completions = sortBy(completions, [ + (c) => canonicalScore(c.displayedAlias, c.room), (c) => c.displayedAlias.length, ]); completions = uniqBy(completions, (match) => match.room); From 6c64f564e4ccba567564edfaeb9417fcefa9e05b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 18:32:45 +0100 Subject: [PATCH 0505/1270] Naive attempt at improving our end-to-end tests in Github Actions --- .github/workflows/develop.yml | 7 +++++-- ...d-tests.sh => prepare-end-to-end-tests.sh} | 11 +---------- scripts/ci/run-end-to-end-tests.sh | 19 +++++++++++++++++++ 3 files changed, 25 insertions(+), 12 deletions(-) rename scripts/ci/{end-to-end-tests.sh => prepare-end-to-end-tests.sh} (65%) create mode 100755 scripts/ci/run-end-to-end-tests.sh diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml index 6410bd28fa..3c3807e33b 100644 --- a/.github/workflows/develop.yml +++ b/.github/workflows/develop.yml @@ -11,10 +11,13 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v2 - - name: End-to-End tests - run: ./scripts/ci/end-to-end-tests.sh + - name: Prepare End-to-End tests + run: ./scripts/ci/prepare-end-to-end-tests.sh + - name: Run End-to-End tests + run: ./scripts/ci/run-end-to-end-tests.sh - name: Archive logs uses: actions/upload-artifact@v2 + if: ${{ always() }} with: path: | test/end-to-end-tests/logs/**/* diff --git a/scripts/ci/end-to-end-tests.sh b/scripts/ci/prepare-end-to-end-tests.sh similarity index 65% rename from scripts/ci/end-to-end-tests.sh rename to scripts/ci/prepare-end-to-end-tests.sh index edb8870d8e..147e1f6445 100755 --- a/scripts/ci/end-to-end-tests.sh +++ b/scripts/ci/prepare-end-to-end-tests.sh @@ -1,8 +1,4 @@ #!/bin/bash -# -# script which is run by the CI build (after `yarn test`). -# -# clones element-web develop and runs the tests against our version of react-sdk. set -ev @@ -19,7 +15,7 @@ cd element-web element_web_dir=`pwd` CI_PACKAGE=true yarn build cd .. -# run end to end tests +# prepare end to end tests pushd test/end-to-end-tests ln -s $element_web_dir element/element-web # PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ./install.sh @@ -28,9 +24,4 @@ echo "--- Install synapse & other dependencies" ./install.sh # install static webserver to server symlinked local copy of element ./element/install-webserver.sh -rm -r logs || true -mkdir logs -echo "+++ Running end-to-end tests" -TESTS_STARTED=1 -./run.sh --no-sandbox --log-directory logs/ popd diff --git a/scripts/ci/run-end-to-end-tests.sh b/scripts/ci/run-end-to-end-tests.sh new file mode 100755 index 0000000000..3c99391fc7 --- /dev/null +++ b/scripts/ci/run-end-to-end-tests.sh @@ -0,0 +1,19 @@ +#!/bin/bash + +set -ev + +handle_error() { + EXIT_CODE=$? + exit $EXIT_CODE +} + +trap 'handle_error' ERR + +# run end to end tests +pushd test/end-to-end-tests +rm -r logs || true +mkdir logs +echo "--- Running end-to-end tests" +TESTS_STARTED=1 +./run.sh --no-sandbox --log-directory logs/ +popd From e79b7d7adb7b8f5214d0b498cd555957ccc5f1ba Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Sat, 19 Jun 2021 15:37:48 +0100 Subject: [PATCH 0506/1270] Fix View Source accessing renamed private field on MatrixEvent --- src/components/structures/ViewSource.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js index 6fe99dd464..b69a92dd61 100644 --- a/src/components/structures/ViewSource.js +++ b/src/components/structures/ViewSource.js @@ -55,7 +55,7 @@ export default class ViewSource extends React.Component { viewSourceContent() { const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit const isEncrypted = mxEvent.isEncrypted(); - const decryptedEventSource = mxEvent._clearEvent; // FIXME: _clearEvent is private + const decryptedEventSource = mxEvent.clearEvent; // FIXME: clearEvent is private const originalEventSource = mxEvent.event; if (isEncrypted) { From 2d9e97a3e13bb481431f812178c47f6c75e395c6 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 09:47:46 +0100 Subject: [PATCH 0507/1270] Fix branch matching to work with GitHub Actions and BuildKite --- scripts/fetchdep.sh | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index fe1f49c361..9844fdc9db 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -22,15 +22,18 @@ clone() { } # Try the PR author's branch in case it exists on the deps as well. -# First we check if BUILDKITE_BRANCH is defined, +# First we check if GITHUB_HEAD_REF is defined, +# Then we check if BUILDKITE_BRANCH is defined, # if it isn't we can assume this is a Netlify build -if [ -z ${BUILDKITE_BRANCH+x} ]; then +if [ -n ${GITHUB_HEAD_REF+x} ]; then + head=$GITHUB_HEAD_REF +elif [ -n ${BUILDKITE_BRANCH+x} ]; then + head=$BUILDKITE_BRANCH +else # Netlify doesn't give us info about the fork so we have to get it from GitHub API apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/" apiEndpoint+=$REVIEW_ID head=$(curl $apiEndpoint | jq -r '.head.label') -else - head=$BUILDKITE_BRANCH fi # If head is set, it will contain either: @@ -39,12 +42,18 @@ fi # We can split on `:` into an array to check. BRANCH_ARRAY=(${head//:/ }) if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then - clone $deforg $defrepo $BUILDKITE_BRANCH + clone $deforg $defrepo $head elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then clone ${BRANCH_ARRAY[0]} $defrepo ${BRANCH_ARRAY[1]} fi + # Try the target branch of the push or PR. -clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH +if [ -n ${GITHUB_BASE_REF+x} ]; then + clone $deforg $defrepo $GITHUB_BASE_REF +elif [ -n ${BUILDKITE_PULL_REQUEST_BASE_BRANCH+x} ]; then + clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH +fi + # Try HEAD which is the branch name in Netlify (not BRANCH which is pull/xxxx/head for PR builds) clone $deforg $defrepo $HEAD # Use the default branch as the last resort. From 9756a99220a34a1a4bae9c0b15c14871ef161818 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 12:14:30 +0100 Subject: [PATCH 0508/1270] Migrate TruncatedList to TypeScript --- .../{TruncatedList.js => TruncatedList.tsx} | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) rename src/components/views/elements/{TruncatedList.js => TruncatedList.tsx} (65%) diff --git a/src/components/views/elements/TruncatedList.js b/src/components/views/elements/TruncatedList.tsx similarity index 65% rename from src/components/views/elements/TruncatedList.js rename to src/components/views/elements/TruncatedList.tsx index 0509775545..395caa9222 100644 --- a/src/components/views/elements/TruncatedList.js +++ b/src/components/views/elements/TruncatedList.tsx @@ -16,31 +16,29 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import { _t } from '../../../languageHandler'; import {replaceableComponent} from "../../../utils/replaceableComponent"; -@replaceableComponent("views.elements.TruncatedList") -export default class TruncatedList extends React.Component { - static propTypes = { - // The number of elements to show before truncating. If negative, no truncation is done. - truncateAt: PropTypes.number, - // The className to apply to the wrapping div - className: PropTypes.string, - // A function that returns the children to be rendered into the element. - // function getChildren(start: number, end: number): Array - // The start element is included, the end is not (as in `slice`). - // If omitted, the React child elements will be used. This parameter can be used - // to avoid creating unnecessary React elements. - getChildren: PropTypes.func, - // A function that should return the total number of child element available. - // Required if getChildren is supplied. - getChildCount: PropTypes.func, - // A function which will be invoked when an overflow element is required. - // This will be inserted after the children. - createOverflowElement: PropTypes.func, - }; +interface IProps { + // The number of elements to show before truncating. If negative, no truncation is done. + truncateAt?: number; + // The className to apply to the wrapping div + className?: string; + // A function that returns the children to be rendered into the element. + // The start element is included, the end is not (as in `slice`). + // If omitted, the React child elements will be used. This parameter can be used + // to avoid creating unnecessary React elements. + getChildren?: (start: number, end: number) => Array; + // A function that should return the total number of child element available. + // Required if getChildren is supplied. + getChildCount?: () => number; + // A function which will be invoked when an overflow element is required. + // This will be inserted after the children. + createOverflowElement?: (overflowCount: number, totalCount: number) => React.ReactNode; +} +@replaceableComponent("views.elements.TruncatedList") +export default class TruncatedList extends React.Component { static defaultProps ={ truncateAt: 2, createOverflowElement(overflowCount, totalCount) { @@ -50,7 +48,7 @@ export default class TruncatedList extends React.Component { }, }; - _getChildren(start, end) { + private getChildren(start: number, end: number): Array { if (this.props.getChildren && this.props.getChildCount) { return this.props.getChildren(start, end); } else { @@ -63,7 +61,7 @@ export default class TruncatedList extends React.Component { } } - _getChildCount() { + private getChildCount(): number { if (this.props.getChildren && this.props.getChildCount) { return this.props.getChildCount(); } else { @@ -73,10 +71,10 @@ export default class TruncatedList extends React.Component { } } - render() { + public render() { let overflowNode = null; - const totalChildren = this._getChildCount(); + const totalChildren = this.getChildCount(); let upperBound = totalChildren; if (this.props.truncateAt >= 0) { const overflowCount = totalChildren - this.props.truncateAt; @@ -87,7 +85,7 @@ export default class TruncatedList extends React.Component { upperBound = this.props.truncateAt; } } - const childNodes = this._getChildren(0, upperBound); + const childNodes = this.getChildren(0, upperBound); return (
    From d2595dcd61876d9f1def0b5e197918588692c07b Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 12:29:59 +0100 Subject: [PATCH 0509/1270] use TruncatedList to improve ForwardDialog rendering time --- .../views/dialogs/ForwardDialog.tsx | 37 ++++++++++++++----- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index a83f3f177c..b04fd9ef76 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/src/components/views/dialogs/ForwardDialog.tsx @@ -39,6 +39,9 @@ import NotificationBadge from "../rooms/NotificationBadge"; import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"; import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm"; import QueryMatcher from "../../../autocomplete/QueryMatcher"; +import TruncatedList from "../elements/TruncatedList"; +import EntityTile from "../rooms/EntityTile"; +import BaseAvatar from "../avatars/BaseAvatar"; const AVATAR_SIZE = 30; @@ -195,6 +198,17 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr }).match(lcQuery); } + const [truncateAt, setTruncateAt] = useState(20); + function overflowTile(overflowCount, totalCount) { + const text = _t("and %(count)s others...", { count: overflowCount }); + return ( + + } name={text} presenceState="online" suppressOnHover={true} + onClick={() => setTruncateAt(totalCount)} /> + ); + } + return = ({ matrixClient: cli, event, permalinkCr { rooms.length > 0 ? (
    - { rooms.map(room => - , - ) } + rooms.slice(start, end).map(room => + , + )} + getChildCount={() => rooms.length} + />
    ) : { _t("No results") } From ca123d3c4daaf18e8ab0dcd9ced019fcd6762f37 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 14:05:56 +0100 Subject: [PATCH 0510/1270] Migrate MKeyVerificationRequest to TypeScript --- ...Request.js => MKeyVerificationRequest.tsx} | 64 +++++++++---------- 1 file changed, 29 insertions(+), 35 deletions(-) rename src/components/views/messages/{MKeyVerificationRequest.js => MKeyVerificationRequest.tsx} (77%) diff --git a/src/components/views/messages/MKeyVerificationRequest.js b/src/components/views/messages/MKeyVerificationRequest.tsx similarity index 77% rename from src/components/views/messages/MKeyVerificationRequest.js rename to src/components/views/messages/MKeyVerificationRequest.tsx index 988606a766..df35c47706 100644 --- a/src/components/views/messages/MKeyVerificationRequest.js +++ b/src/components/views/messages/MKeyVerificationRequest.tsx @@ -15,41 +15,40 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; -import {MatrixClientPeg} from '../../../MatrixClientPeg'; +import { MatrixEvent } from 'matrix-js-sdk/src'; +import { MatrixClientPeg } from '../../../MatrixClientPeg'; import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; -import {getNameForEventRoom, userLabelForEventRoom} +import { getNameForEventRoom, userLabelForEventRoom } from '../../../utils/KeyVerificationStateObserver'; import dis from "../../../dispatcher/dispatcher"; -import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; -import {Action} from "../../../dispatcher/actions"; +import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { Action } from "../../../dispatcher/actions"; import EventTileBubble from "./EventTileBubble"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; + +interface IProps { + mxEvent: MatrixEvent +} @replaceableComponent("views.messages.MKeyVerificationRequest") -export default class MKeyVerificationRequest extends React.Component { - constructor(props) { - super(props); - this.state = {}; - } - - componentDidMount() { +export default class MKeyVerificationRequest extends React.Component { + public componentDidMount() { const request = this.props.mxEvent.verificationRequest; if (request) { - request.on("change", this._onRequestChanged); + request.on("change", this.onRequestChanged); } } - componentWillUnmount() { + public componentWillUnmount() { const request = this.props.mxEvent.verificationRequest; if (request) { - request.off("change", this._onRequestChanged); + request.off("change", this.onRequestChanged); } } - _openRequest = () => { - const {verificationRequest} = this.props.mxEvent; + private openRequest = () => { + const { verificationRequest } = this.props.mxEvent; const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId); dis.dispatch({ action: Action.SetRightPanelPhase, @@ -58,15 +57,15 @@ export default class MKeyVerificationRequest extends React.Component { }); }; - _onRequestChanged = () => { + private onRequestChanged = () => { this.forceUpdate(); }; - _onAcceptClicked = async () => { + private onAcceptClicked = async () => { const request = this.props.mxEvent.verificationRequest; if (request) { try { - this._openRequest(); + this.openRequest(); await request.accept(); } catch (err) { console.error(err.message); @@ -74,7 +73,7 @@ export default class MKeyVerificationRequest extends React.Component { } }; - _onRejectClicked = async () => { + private onRejectClicked = async () => { const request = this.props.mxEvent.verificationRequest; if (request) { try { @@ -85,7 +84,7 @@ export default class MKeyVerificationRequest extends React.Component { } }; - _acceptedLabel(userId) { + private acceptedLabel(userId: string) { const client = MatrixClientPeg.get(); const myUserId = client.getUserId(); if (userId === myUserId) { @@ -95,7 +94,7 @@ export default class MKeyVerificationRequest extends React.Component { } } - _cancelledLabel(userId) { + private cancelledLabel(userId: string) { const client = MatrixClientPeg.get(); const myUserId = client.getUserId(); const {cancellationCode} = this.props.mxEvent.verificationRequest; @@ -115,7 +114,7 @@ export default class MKeyVerificationRequest extends React.Component { } } - render() { + public render() { const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); const FormButton = sdk.getComponent("elements.FormButton"); @@ -134,11 +133,11 @@ export default class MKeyVerificationRequest extends React.Component { let stateLabel; const accepted = request.ready || request.started || request.done; if (accepted) { - stateLabel = ( - {this._acceptedLabel(request.receivingUserId)} + stateLabel = ( + {this.acceptedLabel(request.receivingUserId)} ); } else if (request.cancelled) { - stateLabel = this._cancelledLabel(request.cancellingUserId); + stateLabel = this.cancelledLabel(request.cancellingUserId); } else if (request.accepting) { stateLabel = _t("Accepting …"); } else if (request.declining) { @@ -153,8 +152,8 @@ export default class MKeyVerificationRequest extends React.Component { subtitle = userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId()); if (request.canAccept) { stateNode = (
    - - + +
    ); } } else { // request sent by us @@ -174,8 +173,3 @@ export default class MKeyVerificationRequest extends React.Component { return null; } } - -MKeyVerificationRequest.propTypes = { - /* the MatrixEvent to show */ - mxEvent: PropTypes.object.isRequired, -}; From adb42b792782b5151773089bc5243c6563718a8c Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 14:16:37 +0100 Subject: [PATCH 0511/1270] Deprecate FormButton to use AccessibleButton everywhere --- res/css/_components.scss | 1 - res/css/structures/_ToastContainer.scss | 3 +- res/css/views/elements/_FormButton.scss | 42 ------------------- res/css/views/right_panel/_UserInfo.scss | 10 ----- .../views/right_panel/_VerificationPanel.scss | 2 +- res/css/views/spaces/_SpaceBasicSettings.scss | 2 +- src/components/views/elements/FormButton.js | 28 ------------- .../messages/MKeyVerificationRequest.tsx | 9 ++-- .../views/right_panel/VerificationPanel.tsx | 20 +++------ src/components/views/toasts/GenericToast.tsx | 10 +++-- src/components/views/voip/IncomingCallBox.tsx | 16 +++---- 11 files changed, 31 insertions(+), 112 deletions(-) delete mode 100644 res/css/views/elements/_FormButton.scss delete mode 100644 src/components/views/elements/FormButton.js diff --git a/res/css/_components.scss b/res/css/_components.scss index 56403ea190..ec3af8655e 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -123,7 +123,6 @@ @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"; @import "./views/elements/_InfoTooltip.scss"; @import "./views/elements/_InlineSpinner.scss"; diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index 09f834a6e3..14e4c01389 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -134,8 +134,9 @@ limitations under the License. .mx_Toast_buttons { float: right; display: flex; + gap: 5px; - .mx_FormButton { + .mx_AccessibleButton { min-width: 96px; box-sizing: border-box; } diff --git a/res/css/views/elements/_FormButton.scss b/res/css/views/elements/_FormButton.scss deleted file mode 100644 index eda201ff03..0000000000 --- a/res/css/views/elements/_FormButton.scss +++ /dev/null @@ -1,42 +0,0 @@ -/* -Copyright 2019 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_FormButton { - line-height: $font-16px; - padding: 5px 15px; - font-size: $font-12px; - height: min-content; - - &:not(:last-child) { - margin-right: 8px; - } - - &.mx_AccessibleButton_kind_primary { - color: $accent-color; - background-color: $accent-bg-color; - } - - &.mx_AccessibleButton_kind_danger { - color: $notice-primary-color; - background-color: $notice-primary-bg-color; - } - - &.mx_AccessibleButton_kind_secondary { - color: $secondary-fg-color; - border: 1px solid $secondary-fg-color; - background-color: unset; - } -} diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 87420ae4e7..6632ccddf9 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -259,16 +259,6 @@ limitations under the License. .mx_AccessibleButton.mx_AccessibleButton_hasKind { padding: 8px 18px; - - &.mx_AccessibleButton_kind_primary { - color: $accent-color; - background-color: $accent-bg-color; - } - - &.mx_AccessibleButton_kind_danger { - color: $notice-primary-color; - background-color: $notice-primary-bg-color; - } } .mx_VerificationShowSas .mx_AccessibleButton, diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss index a8466a1626..12148b09de 100644 --- a/res/css/views/right_panel/_VerificationPanel.scss +++ b/res/css/views/right_panel/_VerificationPanel.scss @@ -58,7 +58,7 @@ limitations under the License. } .mx_VerificationPanel_reciprocate_section { - .mx_FormButton { + .mx_AccessibleButton { width: 100%; box-sizing: border-box; padding: 10px; diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.scss index 204ccab2b7..32454b9530 100644 --- a/res/css/views/spaces/_SpaceBasicSettings.scss +++ b/res/css/views/spaces/_SpaceBasicSettings.scss @@ -73,7 +73,7 @@ limitations under the License. } } - .mx_FormButton { + .mx_AccessibleButton { padding: 8px 22px; margin-left: auto; display: block; diff --git a/src/components/views/elements/FormButton.js b/src/components/views/elements/FormButton.js deleted file mode 100644 index f6b4c986f5..0000000000 --- a/src/components/views/elements/FormButton.js +++ /dev/null @@ -1,28 +0,0 @@ -/* -Copyright 2019 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - -http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import React from 'react'; -import AccessibleButton from "./AccessibleButton"; - -export default function FormButton(props) { - const {className, label, kind, ...restProps} = props; - const newClassName = (className || "") + " mx_FormButton"; - const allProps = Object.assign({}, restProps, - {className: newClassName, kind: kind || "primary", children: [label]}); - return React.createElement(AccessibleButton, allProps); -} - -FormButton.propTypes = AccessibleButton.propTypes; diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx index df35c47706..69467cfa50 100644 --- a/src/components/views/messages/MKeyVerificationRequest.tsx +++ b/src/components/views/messages/MKeyVerificationRequest.tsx @@ -116,7 +116,6 @@ export default class MKeyVerificationRequest extends React.Component { public render() { const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); - const FormButton = sdk.getComponent("elements.FormButton"); const {mxEvent} = this.props; const request = mxEvent.verificationRequest; @@ -152,8 +151,12 @@ export default class MKeyVerificationRequest extends React.Component { subtitle = userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId()); if (request.canAccept) { stateNode = (
    - - + + {_t("Decline")} + + + {_t("Accept")} +
    ); } } else { // request sent by us diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx index edfe0e3483..ce39141391 100644 --- a/src/components/views/right_panel/VerificationPanel.tsx +++ b/src/components/views/right_panel/VerificationPanel.tsx @@ -195,14 +195,7 @@ export default class VerificationPanel extends React.PureComponent

    {description}

    - - + onClick={this.onReciprocateYesClick} />
    ; } else { diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx index 209babbf9d..ae01e8bfb7 100644 --- a/src/components/views/toasts/GenericToast.tsx +++ b/src/components/views/toasts/GenericToast.tsx @@ -15,8 +15,8 @@ limitations under the License. */ import React, {ReactNode} from "react"; +import AccessibleButton from "../elements/AccessibleButton"; -import FormButton from "../elements/FormButton"; import {XOR} from "../../../@types/common"; export interface IProps { @@ -50,8 +50,12 @@ const GenericToast: React.FC> = ({ {detailContent}
    - {onReject && rejectLabel && } - + {onReject && rejectLabel && + {rejectLabel} + } + + {acceptLabel} +
    ; }; diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx index a0660318bc..10b102832d 100644 --- a/src/components/views/voip/IncomingCallBox.tsx +++ b/src/components/views/voip/IncomingCallBox.tsx @@ -23,7 +23,7 @@ import { _t } from '../../../languageHandler'; import { ActionPayload } from '../../../dispatcher/payloads'; import CallHandler, { AudioID } from '../../../CallHandler'; import RoomAvatar from '../avatars/RoomAvatar'; -import FormButton from '../elements/FormButton'; +import AccesibleButton from '../elements/AccessibleButton'; import { CallState } from 'matrix-js-sdk/src/webrtc/call'; import {replaceableComponent} from "../../../utils/replaceableComponent"; import AccessibleTooltipButton from '../elements/AccessibleTooltipButton'; @@ -143,19 +143,21 @@ export default class IncomingCallBox extends React.Component { />
    - + > + {_t("Decline")} +
    - + > + {_t("Accept")} +
    ; } From 7f635c68c519e0df9ba20e34c8f278ea33b20720 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 14:50:21 +0100 Subject: [PATCH 0512/1270] Migrate SearchBar to TypeScript --- src/components/structures/RoomView.tsx | 9 +-- .../rooms/{SearchBar.js => SearchBar.tsx} | 69 ++++++++++++++----- 2 files changed, 55 insertions(+), 23 deletions(-) rename src/components/views/rooms/{SearchBar.js => SearchBar.tsx} (55%) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 1e3adcb518..c1dcb81e08 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -60,7 +60,7 @@ import ScrollPanel from "./ScrollPanel"; import TimelinePanel from "./TimelinePanel"; import ErrorBoundary from "../views/elements/ErrorBoundary"; import RoomPreviewBar from "../views/rooms/RoomPreviewBar"; -import SearchBar from "../views/rooms/SearchBar"; +import SearchBar, { SearchScope } from "../views/rooms/SearchBar"; import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar"; import AuxPanel from "../views/rooms/AuxPanel"; import RoomHeader from "../views/rooms/RoomHeader"; @@ -82,6 +82,7 @@ import SpaceRoomView from "./SpaceRoomView"; import { IOpts } from "../../createRoom"; import { replaceableComponent } from "../../utils/replaceableComponent"; import UIStore from "../../stores/UIStore"; +import Search from '../views/emojipicker/Search'; const DEBUG = false; let debuglog = function(msg: string) {}; @@ -139,7 +140,7 @@ export interface IState { draggingFile: boolean; searching: boolean; searchTerm?: string; - searchScope?: "All" | "Room"; + searchScope?: SearchScope; searchResults?: XOR<{}, { count: number; highlights: string[]; @@ -1267,7 +1268,7 @@ export default class RoomView extends React.Component { }); } - private onSearch = (term: string, scope) => { + private onSearch = (term: string, scope: SearchScope) => { this.setState({ searchTerm: term, searchScope: scope, @@ -1288,7 +1289,7 @@ export default class RoomView extends React.Component { this.searchId = new Date().getTime(); let roomId; - if (scope === "Room") roomId = this.state.room.roomId; + if (scope === SearchScope.Room) roomId = this.state.room.roomId; debuglog("sending search request"); const searchPromise = eventSearch(term, roomId); diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.tsx similarity index 55% rename from src/components/views/rooms/SearchBar.js rename to src/components/views/rooms/SearchBar.tsx index 029516c932..de99305d81 100644 --- a/src/components/views/rooms/SearchBar.js +++ b/src/components/views/rooms/SearchBar.tsx @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {createRef} from 'react'; +import React, {createRef, RefObject} from 'react'; import AccessibleButton from "../elements/AccessibleButton"; import classNames from "classnames"; import { _t } from '../../../languageHandler'; @@ -23,27 +23,42 @@ import {Key} from "../../../Keyboard"; import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice"; import {replaceableComponent} from "../../../utils/replaceableComponent"; +interface IProps { + onCancelClick: () => void; + onSearch: (query: string, scope: string) => void; + searchInProgress?: boolean; + isRoomEncrypted?: boolean; +} + +interface IState { + scope: SearchScope; +} + +export enum SearchScope { + Room = "Room", + All = "All", +} + @replaceableComponent("views.rooms.SearchBar") -export default class SearchBar extends React.Component { - constructor(props) { +export default class SearchBar extends React.Component { + private searchTerm: RefObject = createRef(); + + constructor(props: IProps) { super(props); - - this._search_term = createRef(); - this.state = { - scope: 'Room', + scope: SearchScope.Room, }; } - onThisRoomClick = () => { - this.setState({ scope: 'Room' }, () => this._searchIfQuery()); + public onThisRoomClick = () => { + this.setState({ scope: SearchScope.Room }, () => this._searchIfQuery()); }; - onAllRoomsClick = () => { - this.setState({ scope: 'All' }, () => this._searchIfQuery()); + public onAllRoomsClick = () => { + this.setState({ scope: SearchScope.All }, () => this._searchIfQuery()); }; - onSearchChange = (e) => { + public onSearchChange = (e: React.KeyboardEvent) => { switch (e.key) { case Key.ENTER: this.onSearch(); @@ -55,13 +70,13 @@ export default class SearchBar extends React.Component { }; _searchIfQuery() { - if (this._search_term.current.value) { + if (this.searchTerm.current.value) { this.onSearch(); } } onSearch = () => { - this.props.onSearch(this._search_term.current.value, this.state.scope); + this.props.onSearch(this.searchTerm.current.value, this.state.scope); }; render() { @@ -69,25 +84,41 @@ export default class SearchBar extends React.Component { mx_SearchBar_searching: this.props.searchInProgress, }); const thisRoomClasses = classNames("mx_SearchBar_button", { - mx_SearchBar_unselected: this.state.scope !== 'Room', + mx_SearchBar_unselected: this.state.scope !== SearchScope.Room, }); const allRoomsClasses = classNames("mx_SearchBar_button", { - mx_SearchBar_unselected: this.state.scope !== 'All', + mx_SearchBar_unselected: this.state.scope !== SearchScope.All, }); return ( <>
    - + {_t("This Room")} - + {_t("All Rooms")}
    - +
    From 7825c30bf773185c967c61ef3cb2a448bdf8f791 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 15:41:47 +0100 Subject: [PATCH 0513/1270] Improve event index initialisation failure message in search bar for supported platforms --- .../views/elements/DesktopBuildsNotice.tsx | 19 ++++++++++++++++++- src/i18n/strings/en_EN.json | 1 + 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/DesktopBuildsNotice.tsx b/src/components/views/elements/DesktopBuildsNotice.tsx index fd1c7848aa..e5e94d4bd4 100644 --- a/src/components/views/elements/DesktopBuildsNotice.tsx +++ b/src/components/views/elements/DesktopBuildsNotice.tsx @@ -14,10 +14,15 @@ See the License for the specific language governing permissions and limitations under the License. */ +import React from "react"; import EventIndexPeg from "../../../indexing/EventIndexPeg"; import { _t } from "../../../languageHandler"; import SdkConfig from "../../../SdkConfig"; -import React from "react"; + +import dis from "../../../dispatcher/dispatcher"; +import { Action } from "../../../dispatcher/actions"; +import { UserTab } from "../dialogs/UserSettingsDialog"; + export enum WarningKind { Files, @@ -33,6 +38,18 @@ export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) { if (!isRoomEncrypted) return null; if (EventIndexPeg.get()) return null; + if (EventIndexPeg.error) { + return _t("Message search initialisation failed, check your settings for more information", {}, { + a: sub => ( { + evt.preventDefault(); + dis.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Security, + }); + }}>{sub}), + }); + } + const {desktopBuilds, brand} = SdkConfig.get(); let text = null; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b88dc79da5..37f6416460 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1933,6 +1933,7 @@ "Error loading Widget": "Error loading Widget", "Error - Mixed content": "Error - Mixed content", "Popout widget": "Popout widget", + "Message search initialisation failed, check your settings for more information": "Message search initialisation failed, check your settings for more information", "Use the Desktop app to see all encrypted files": "Use the Desktop app to see all encrypted files", "Use the Desktop app to search encrypted messages": "Use the Desktop app to search encrypted messages", "This version of %(brand)s does not support viewing some encrypted files": "This version of %(brand)s does not support viewing some encrypted files", From 88d25ad6af058d098f147553e7289606cf57a38d Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 15:44:09 +0100 Subject: [PATCH 0514/1270] Fix typo in default import name --- src/components/views/voip/IncomingCallBox.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx index 10b102832d..cd1a3afd10 100644 --- a/src/components/views/voip/IncomingCallBox.tsx +++ b/src/components/views/voip/IncomingCallBox.tsx @@ -23,7 +23,7 @@ import { _t } from '../../../languageHandler'; import { ActionPayload } from '../../../dispatcher/payloads'; import CallHandler, { AudioID } from '../../../CallHandler'; import RoomAvatar from '../avatars/RoomAvatar'; -import AccesibleButton from '../elements/AccessibleButton'; +import AccessibleButton from '../elements/AccessibleButton'; import { CallState } from 'matrix-js-sdk/src/webrtc/call'; import {replaceableComponent} from "../../../utils/replaceableComponent"; import AccessibleTooltipButton from '../elements/AccessibleTooltipButton'; @@ -143,21 +143,21 @@ export default class IncomingCallBox extends React.Component { />
    - {_t("Decline")} - +
    - {_t("Accept")} - +
    ; } From c4e4dadc139472d78c20124f3fbb1e5e40a9d7f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 21 Jun 2021 16:49:10 +0200 Subject: [PATCH 0515/1270] Migrate from FormButton to AccessibleButton MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/CallEvent.tsx | 23 ++++++++++++--------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 4710391050..a6263e408f 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -20,7 +20,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { _t, _td } from '../../../languageHandler'; import MemberAvatar from '../avatars/MemberAvatar'; import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper'; -import FormButton from '../elements/FormButton'; +import AccessibleButton from '../elements/AccessibleButton'; import { CallErrorCode, CallState } from 'matrix-js-sdk/src/webrtc/call'; import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip'; import classNames from 'classnames'; @@ -84,16 +84,18 @@ export default class CallEvent extends React.Component { onClick={this.props.callEventGrouper.toggleSilenced} title={this.state.silenced ? _t("Sound on"): _t("Silence call")} /> - - + { _t("Decline") } + + + > + { _t("Accept") } +
    ); } @@ -159,12 +161,13 @@ export default class CallEvent extends React.Component { return (
    { _t("You missed this call") } - + > + { _t("Call back") } +
    ); } From 202cb0f5d81b971148b2375af32424d853940c35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 21 Jun 2021 17:05:36 +0200 Subject: [PATCH 0516/1270] Fix styling of buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 7 ++++++- src/components/views/messages/CallEvent.tsx | 4 +++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 1bf62af22e..d83dfb39ad 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -87,7 +87,12 @@ limitations under the License. color: $secondary-fg-color; margin-right: 16px; - .mx_CallEvent_content_callBack { + .mx_CallEvent_content_button { + height: 24px; + padding: 0px 12px; + } + + .mx_CallEvent_content_button_callBack { margin-left: 10px; // To match mx_callEvent } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index a6263e408f..bb219c458d 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -85,12 +85,14 @@ export default class CallEvent extends React.Component { title={this.state.silenced ? _t("Sound on"): _t("Silence call")} /> { _t("Decline") } @@ -162,7 +164,7 @@ export default class CallEvent extends React.Component {
    { _t("You missed this call") } From ca5f8f97bb80d4cdeaee584b7e9ba0c83207a2b2 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 16:18:13 +0100 Subject: [PATCH 0517/1270] Branch matching support for forked repository on GitHub actions --- scripts/fetchdep.sh | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index 9844fdc9db..02af402951 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -36,13 +36,19 @@ else head=$(curl $apiEndpoint | jq -r '.head.label') fi -# If head is set, it will contain either: +# If head is set, it will contain on BuilKite either: # * "branch" when the author's branch and target branch are in the same repo # * "fork:branch" when the author's branch is in their fork or if this is a Netlify build # We can split on `:` into an array to check. +# For GitHub Actions we need to inspect GITHUB_REPOSITORY and GITHUB_ACTOR +# to determine whether the branch is from a fork or not BRANCH_ARRAY=(${head//:/ }) if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then - clone $deforg $defrepo $head + if [[ "$GITHUB_REPOSITORY" = "$deforg/$defrepo" ]]; then + clone $deforg $defrepo $head + else + clone $GITHUB_ACTOR $defrepo $head + fi elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then clone ${BRANCH_ARRAY[0]} $defrepo ${BRANCH_ARRAY[1]} fi From 174a43f1ef901168f69f535515eedb8e6c7f864c Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Mon, 21 Jun 2021 16:37:49 +0100 Subject: [PATCH 0518/1270] Upgrade matrix-js-sdk to 12.0.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 644793e265..4a4a326a89 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "katex": "^0.12.0", "linkifyjs": "^2.1.9", "lodash": "^4.17.20", - "matrix-js-sdk": "12.0.0-rc.1", + "matrix-js-sdk": "12.0.0", "matrix-widget-api": "^0.1.0-beta.14", "minimist": "^1.2.5", "opus-recorder": "^8.0.3", diff --git a/yarn.lock b/yarn.lock index 14cd11d769..82ee9a070e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5711,10 +5711,10 @@ mathml-tag-names@^2.1.3: resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3" integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg== -matrix-js-sdk@12.0.0-rc.1: - version "12.0.0-rc.1" - resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.0.0-rc.1.tgz#b94a72f0549f3000763efb8c7b6fa1f8808e56f6" - integrity sha512-bzozc4w9dF6Dl8xXXLXMpe3FqL/ncczKdB9Y8dL1mPaujVrmLWAai+BYmC9/c4SIw+1zUap9P5W16ej3z7prig== +matrix-js-sdk@12.0.0: + version "12.0.0" + resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.0.0.tgz#8ee7cc37661476341d0c792a1a12bc78b19f9fdd" + integrity sha512-DHeq87Sx9Dv37FYyvZkmA1VYsQUNaVgc3QzMUkFwoHt1T4EZzgyYpdsp3uYruJzUW0ACvVJcwFdrU4e1VS97dQ== dependencies: "@babel/runtime" "^7.12.5" another-json "^0.2.0" From ddbf0fa77fd798495ce3c5940e4c4f44a607d766 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Mon, 21 Jun 2021 16:46:20 +0100 Subject: [PATCH 0519/1270] Prepare changelog for v3.24.0 --- CHANGELOG.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a14a0f308e..0f979b4802 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,15 @@ +Changes in [3.24.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.24.0) (2021-06-21) +===================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.24.0-rc.1...v3.24.0) + + * Upgrade to JS SDK 12.0.0 + * [Release] Keep composer reply when scrolling away from a highlighted event + [\#6211](https://github.com/matrix-org/matrix-react-sdk/pull/6211) + * [Release] Remove stray bullet point in reply preview + [\#6210](https://github.com/matrix-org/matrix-react-sdk/pull/6210) + * [Release] Stop requesting null next replies from the server + [\#6209](https://github.com/matrix-org/matrix-react-sdk/pull/6209) + Changes in [3.24.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.24.0-rc.1) (2021-06-15) =============================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.23.0...v3.24.0-rc.1) From d89710defe12a133cfbc9fee664996dcc17761e2 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Mon, 21 Jun 2021 16:53:20 +0100 Subject: [PATCH 0520/1270] v3.24.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4a4a326a89..d592d426a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.24.0-rc.1", + "version": "3.24.0", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { From 54c3832b5b9dde5981eb1934f599e7b75eac00e8 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Mon, 21 Jun 2021 16:54:41 +0100 Subject: [PATCH 0521/1270] Resetting package fields for development --- package.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d592d426a6..f232d4301b 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "bin": { "reskindex": "scripts/reskindex.js" }, - "main": "./lib/index.js", + "main": "./src/index.js", "matrix_src_main": "./src/index.js", "matrix_lib_main": "./lib/index.js", "matrix_lib_typings": "./lib/index.d.ts", @@ -197,6 +197,5 @@ "coverageReporters": [ "text" ] - }, - "typings": "./lib/index.d.ts" + } } From 903f898beeb1e1ddbc3de960197b1b5cc16e36d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 21 Jun 2021 18:28:30 +0200 Subject: [PATCH 0522/1270] Remove ComposerInsertPayload as this is a JS file MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/context_menus/MessageContextMenu.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index 2fb2ac4d0e..5a1da1376d 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -33,7 +33,6 @@ import { EventType } from "matrix-js-sdk/src/@types/event"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard"; import ForwardDialog from "../dialogs/ForwardDialog"; -import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload"; import { Action } from "../../../dispatcher/actions"; export function canCancel(eventStatus) { @@ -201,7 +200,7 @@ export default class MessageContextMenu extends React.Component { }; onQuoteClick = () => { - dis.dispatch({ + dis.dispatch({ action: Action.ComposerInsert, event: this.props.mxEvent, }); From dda4c8ec4c9fc5e00c5d9cc5525433acbf8539d9 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 21 Jun 2021 21:04:29 +0100 Subject: [PATCH 0523/1270] Move Promise::allSettled typing from react-sdk to js-sdk --- src/@types/global.d.ts | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 0c6b63dd33..7eff341095 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -113,19 +113,6 @@ declare global { usageDetails?: {[key: string]: number}; } - export interface ISettledFulfilled { - status: "fulfilled"; - value: T; - } - export interface ISettledRejected { - status: "rejected"; - reason: any; - } - - interface PromiseConstructor { - allSettled(promises: Promise[]): Promise | ISettledRejected>>; - } - interface HTMLAudioElement { type?: string; // sinkId & setSinkId are experimental and typescript doesn't know about them From de4065719475d6f9d6214406ffbbbfd2a393f1c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 22 Jun 2021 09:12:41 +0200 Subject: [PATCH 0524/1270] Don't show room if we don't click on buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/RoomDirectory.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx index 1e0605f263..eb7208f98d 100644 --- a/src/components/structures/RoomDirectory.tsx +++ b/src/components/structures/RoomDirectory.tsx @@ -337,11 +337,10 @@ export default class RoomDirectory extends React.Component { } private onRoomClicked = (room: IRoom, ev: ButtonEvent) => { + // If room was shift-clicked, remove it from the room directory if (ev.shiftKey && !this.state.selectedCommunityId) { ev.preventDefault(); this.removeFromDirectory(room); - } else { - this.showRoom(room); } }; From a59deeb49165429acc91032280bf8205d2b013e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 22 Jun 2021 09:16:45 +0200 Subject: [PATCH 0525/1270] Add onClick handlers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/RoomDirectory.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx index eb7208f98d..731e2387cc 100644 --- a/src/components/structures/RoomDirectory.tsx +++ b/src/components/structures/RoomDirectory.tsx @@ -589,12 +589,23 @@ export default class RoomDirectory extends React.Component { onMouseDown={(ev) => {ev.preventDefault();}} className="mx_RoomDirectory_roomDescription" > -
    { name }
      -
    { ev.stopPropagation(); } } +
    this.onRoomClicked(room, ev)} + > + { name } +
      +
    this.onRoomClicked(room, ev)} dangerouslySetInnerHTML={{ __html: topic }} /> -
    { getDisplayAliasForRoom(room) }
    +
    this.onRoomClicked(room, ev)} + > + { getDisplayAliasForRoom(room) } +
    ,
    this.onRoomClicked(room, ev)} From deb075777d4d59cefff26c98c7149651eb729540 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 08:17:09 +0100 Subject: [PATCH 0526/1270] Upgrade @types/react and @types/react-dom --- package.json | 4 ++-- yarn.lock | 26 ++++++++++++++++++++------ 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index f232d4301b..8ebb90f342 100644 --- a/package.json +++ b/package.json @@ -132,8 +132,8 @@ "@types/pako": "^1.0.1", "@types/parse5": "^6.0.0", "@types/qrcode": "^1.3.5", - "@types/react": "^16.9", - "@types/react-dom": "^16.9.10", + "@types/react": "^17.0.2", + "@types/react-dom": "^17.0.2", "@types/react-transition-group": "^4.4.0", "@types/sanitize-html": "^2.3.1", "@types/zxcvbn": "^4.4.0", diff --git a/yarn.lock b/yarn.lock index 952d08d0f6..4f17b63337 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1620,12 +1620,12 @@ dependencies: "@types/node" "*" -"@types/react-dom@^16.9.10": - version "16.9.10" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.10.tgz#4485b0bec3d41f856181b717f45fd7831101156f" - integrity sha512-ItatOrnXDMAYpv6G8UCk2VhbYVTjZT9aorLtA/OzDN9XJ2GKcfam68jutoAcILdRjsRUO8qb7AmyObF77Q8QFw== +"@types/react-dom@^17.0.2": + version "17.0.8" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.8.tgz#3180de6d79bf53762001ad854e3ce49f36dd71fc" + integrity sha512-0ohAiJAx1DAUEcY9UopnfwCE9sSMDGnY/oXjWMax6g3RpzmTt2GMyMVAXcbn0mo8XAff0SbQJl2/SBU+hjSZ1A== dependencies: - "@types/react" "^16" + "@types/react" "*" "@types/react-transition-group@^4.4.0": version "4.4.0" @@ -1634,7 +1634,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16", "@types/react@^16.14", "@types/react@^16.9": +"@types/react@*", "@types/react@^16.14": version "16.14.2" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c" integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ== @@ -1642,6 +1642,15 @@ "@types/prop-types" "*" csstype "^3.0.2" +"@types/react@^17.0.2": + version "17.0.11" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451" + integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/sanitize-html@^2.3.1": version "2.3.1" resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.3.1.tgz#094d696b83b7394b016e96342bbffa6a028795ce" @@ -1649,6 +1658,11 @@ dependencies: htmlparser2 "^6.0.0" +"@types/scheduler@*": + version "0.16.1" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275" + integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA== + "@types/stack-utils@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" From 066ef18db2eb56561bb5736b58c95b41426cb244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 22 Jun 2021 09:24:42 +0200 Subject: [PATCH 0527/1270] Replace onClick by onMouseDown MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/RoomDirectory.tsx | 45 ++++++++++----------- 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx index 731e2387cc..62944a9d98 100644 --- a/src/components/structures/RoomDirectory.tsx +++ b/src/components/structures/RoomDirectory.tsx @@ -567,11 +567,11 @@ export default class RoomDirectory extends React.Component { let avatarUrl = null; if (room.avatar_url) avatarUrl = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(32); + // We use onMouseDown instead of onClick, so that we can avoid text getting selected return [ -
    this.onRoomClicked(room, ev)} - // cancel onMouseDown otherwise shift-clicking highlights text - onMouseDown={(ev) => {ev.preventDefault();}} +
    this.onRoomClicked(room, ev)} className="mx_RoomDirectory_roomAvatar" > { url={avatarUrl} />
    , -
    this.onRoomClicked(room, ev)} - // cancel onMouseDown otherwise shift-clicking highlights text - onMouseDown={(ev) => {ev.preventDefault();}} +
    this.onRoomClicked(room, ev)} className="mx_RoomDirectory_roomDescription" >
    this.onRoomClicked(room, ev)} + onMouseDown={(ev) => this.onRoomClicked(room, ev)} > { name }
     
    this.onRoomClicked(room, ev)} + onMouseDown={(ev) => this.onRoomClicked(room, ev)} dangerouslySetInnerHTML={{ __html: topic }} />
    this.onRoomClicked(room, ev)} + onMouseDown={(ev) => this.onRoomClicked(room, ev)} > { getDisplayAliasForRoom(room) }
    , -
    this.onRoomClicked(room, ev)} - // cancel onMouseDown otherwise shift-clicking highlights text - onMouseDown={(ev) => {ev.preventDefault();}} +
    this.onRoomClicked(room, ev)} className="mx_RoomDirectory_roomMemberCount" > { room.num_joined_members }
    , -
    this.onRoomClicked(room, ev)} +
    this.onRoomClicked(room, ev)} // cancel onMouseDown otherwise shift-clicking highlights text - onMouseDown={(ev) => {ev.preventDefault();}} className="mx_RoomDirectory_preview" > - {previewButton} + { previewButton }
    , -
    this.onRoomClicked(room, ev)} - // cancel onMouseDown otherwise shift-clicking highlights text - onMouseDown={(ev) => {ev.preventDefault();}} +
    this.onRoomClicked(room, ev)} className="mx_RoomDirectory_join" > - {joinOrViewButton} + { joinOrViewButton }
    , ]; } From 8090d2b583f33f4baf5bf8b8dbb2ff1c6cdfa1de Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 09:31:15 +0100 Subject: [PATCH 0528/1270] Fix branch matching for BuildKite --- scripts/fetchdep.sh | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index 02af402951..246add7e31 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -25,18 +25,20 @@ clone() { # First we check if GITHUB_HEAD_REF is defined, # Then we check if BUILDKITE_BRANCH is defined, # if it isn't we can assume this is a Netlify build -if [ -n ${GITHUB_HEAD_REF+x} ]; then - head=$GITHUB_HEAD_REF -elif [ -n ${BUILDKITE_BRANCH+x} ]; then - head=$BUILDKITE_BRANCH +if [ -z ${BUILDKITE_BRANCH+x} ]; then + if [ -z ${GITHUB_HEAD_REF+x} ]; then + # Netlify doesn't give us info about the fork so we have to get it from GitHub API + apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/" + apiEndpoint+=$REVIEW_ID + head=$(curl $apiEndpoint | jq -r '.head.label') + else + head=$GITHUB_HEAD_REF + fi else - # Netlify doesn't give us info about the fork so we have to get it from GitHub API - apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/" - apiEndpoint+=$REVIEW_ID - head=$(curl $apiEndpoint | jq -r '.head.label') + head=$BUILDKITE_BRANCH fi -# If head is set, it will contain on BuilKite either: +# If head is set, it will contain on BuildKite either: # * "branch" when the author's branch and target branch are in the same repo # * "fork:branch" when the author's branch is in their fork or if this is a Netlify build # We can split on `:` into an array to check. @@ -44,11 +46,16 @@ fi # to determine whether the branch is from a fork or not BRANCH_ARRAY=(${head//:/ }) if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then - if [[ "$GITHUB_REPOSITORY" = "$deforg/$defrepo" ]]; then - clone $deforg $defrepo $head + if [ -z ${BUILDKITE_BRANCH+x} ]; then + if [[ "$GITHUB_REPOSITORY" == "$deforg"* ]]; then + clone $deforg $defrepo $GITHUB_HEAD_REF + else + clone $GITHUB_ACTOR $defrepo $GITHUB_HEAD_REF + fi else - clone $GITHUB_ACTOR $defrepo $head + clone $deforg $defrepo $BUILDKITE_BRANCH fi + elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then clone ${BRANCH_ARRAY[0]} $defrepo ${BRANCH_ARRAY[1]} fi From 3c725692704a3cecfe721c011ec4b076e816f491 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 09:53:58 +0100 Subject: [PATCH 0529/1270] Fix modal opening race condition Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> React 17 is hitting a race condition when a modal is closing and is trying to open another one within the same tick. A proper long term fix would be using React.createPortal to avoid manually mounting and unmounting new React roots --- src/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Modal.tsx b/src/Modal.tsx index ce11c571b6..2f2d5a2d52 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -385,7 +385,7 @@ export class ModalManager {
    ); - ReactDOM.render(dialog, ModalManager.getOrCreateContainer()); + setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer())); } else { // This is safe to call repeatedly if we happen to do that ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateContainer()); From e9d87478e2c6a4b48658de90fb70862f74ca52bb Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 22 Jun 2021 10:06:31 +0100 Subject: [PATCH 0530/1270] Spaces before/after curlies Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/toasts/GenericToast.tsx | 4 ++-- src/components/views/voip/IncomingCallBox.tsx | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx index ae01e8bfb7..45b65ae1fb 100644 --- a/src/components/views/toasts/GenericToast.tsx +++ b/src/components/views/toasts/GenericToast.tsx @@ -51,10 +51,10 @@ const GenericToast: React.FC> = ({
    {onReject && rejectLabel && - {rejectLabel} + { rejectLabel } } - {acceptLabel} + { acceptLabel }
    ; diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx index cd1a3afd10..c09043da24 100644 --- a/src/components/views/voip/IncomingCallBox.tsx +++ b/src/components/views/voip/IncomingCallBox.tsx @@ -148,7 +148,7 @@ export default class IncomingCallBox extends React.Component { onClick={this.onRejectClick} kind="danger" > - {_t("Decline")} + { _t("Decline") }
    { onClick={this.onAnswerClick} kind="primary" > - {_t("Accept")} + { _t("Accept") }
    ; } } - From db9ffe9b3ebb4c07b645808c3048fe76df9ab8c3 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 10:18:09 +0100 Subject: [PATCH 0531/1270] Fix AccessibleButton label for VerificationRequest --- .../views/right_panel/VerificationPanel.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx index ce39141391..d3f2ba8cbf 100644 --- a/src/components/views/right_panel/VerificationPanel.tsx +++ b/src/components/views/right_panel/VerificationPanel.tsx @@ -209,13 +209,19 @@ export default class VerificationPanel extends React.PureComponent
    + onClick={this.onReciprocateNoClick} + > + { _t("No") } + + onClick={this.onReciprocateYesClick} + > + { _t("Yes") } +
    ; } else { From 3d3c4284555ab95a9bc798844c16db517b0f111b Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 10:26:49 +0100 Subject: [PATCH 0532/1270] Fix DesktopBuildsNotice return type --- src/components/structures/RoomView.tsx | 1 - .../views/elements/DesktopBuildsNotice.tsx | 23 +++++++++++-------- src/components/views/rooms/SearchBar.tsx | 20 ++++++++-------- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index c1dcb81e08..a4338e832a 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -82,7 +82,6 @@ import SpaceRoomView from "./SpaceRoomView"; import { IOpts } from "../../createRoom"; import { replaceableComponent } from "../../utils/replaceableComponent"; import UIStore from "../../stores/UIStore"; -import Search from '../views/emojipicker/Search'; const DEBUG = false; let debuglog = function(msg: string) {}; diff --git a/src/components/views/elements/DesktopBuildsNotice.tsx b/src/components/views/elements/DesktopBuildsNotice.tsx index e5e94d4bd4..426554f31e 100644 --- a/src/components/views/elements/DesktopBuildsNotice.tsx +++ b/src/components/views/elements/DesktopBuildsNotice.tsx @@ -18,7 +18,6 @@ import React from "react"; import EventIndexPeg from "../../../indexing/EventIndexPeg"; import { _t } from "../../../languageHandler"; import SdkConfig from "../../../SdkConfig"; - import dis from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; import { UserTab } from "../dialogs/UserSettingsDialog"; @@ -39,15 +38,19 @@ export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) { if (EventIndexPeg.get()) return null; if (EventIndexPeg.error) { - return _t("Message search initialisation failed, check your settings for more information", {}, { - a: sub => ( { - evt.preventDefault(); - dis.dispatch({ - action: Action.ViewUserSettings, - initialTabId: UserTab.Security, - }); - }}>{sub}), - }); + return <> + {_t("Message search initialisation failed, check your settings for more information", {}, { + a: sub => ( { + evt.preventDefault(); + dis.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Security, + }); + }}> + {sub} + ), + })} + ; } const {desktopBuilds, brand} = SdkConfig.get(); diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx index de99305d81..47994f5251 100644 --- a/src/components/views/rooms/SearchBar.tsx +++ b/src/components/views/rooms/SearchBar.tsx @@ -15,13 +15,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {createRef, RefObject} from 'react'; +import React, { createRef, RefObject } from 'react'; import AccessibleButton from "../elements/AccessibleButton"; import classNames from "classnames"; import { _t } from '../../../languageHandler'; import {Key} from "../../../Keyboard"; import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; interface IProps { onCancelClick: () => void; @@ -50,15 +50,15 @@ export default class SearchBar extends React.Component { }; } - public onThisRoomClick = () => { - this.setState({ scope: SearchScope.Room }, () => this._searchIfQuery()); + private onThisRoomClick = () => { + this.setState({ scope: SearchScope.Room }, () => this.searchIfQuery()); }; - public onAllRoomsClick = () => { - this.setState({ scope: SearchScope.All }, () => this._searchIfQuery()); + private onAllRoomsClick = () => { + this.setState({ scope: SearchScope.All }, () => this.searchIfQuery()); }; - public onSearchChange = (e: React.KeyboardEvent) => { + private onSearchChange = (e: React.KeyboardEvent) => { switch (e.key) { case Key.ENTER: this.onSearch(); @@ -69,17 +69,17 @@ export default class SearchBar extends React.Component { } }; - _searchIfQuery() { + private searchIfQuery(): void { if (this.searchTerm.current.value) { this.onSearch(); } } - onSearch = () => { + private onSearch = (): void => { this.props.onSearch(this.searchTerm.current.value, this.state.scope); }; - render() { + public render() { const searchButtonClasses = classNames("mx_SearchBar_searchButton", { mx_SearchBar_searching: this.props.searchInProgress, }); From dd58c9f413abd9a4c654e19c675f54864f24143b Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 10:52:33 +0100 Subject: [PATCH 0533/1270] Add TruncatedList in AddExistingToSpaceDialog --- .../dialogs/AddExistingToSpaceDialog.tsx | 39 ++++++++++++++----- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx index 822ffc2827..8997e4a5f8 100644 --- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx +++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx @@ -39,6 +39,9 @@ import ProgressBar from "../elements/ProgressBar"; import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; import QueryMatcher from "../../../autocomplete/QueryMatcher"; +import TruncatedList from "../elements/TruncatedList"; +import EntityTile from "../rooms/EntityTile"; +import BaseAvatar from "../avatars/BaseAvatar"; interface IProps extends IDialogProps { matrixClient: MatrixClient; @@ -204,6 +207,17 @@ export const AddExistingToSpace: React.FC = ({ setSelectedToAdd(new Set(selectedToAdd)); } : null; + const [truncateAt, setTruncateAt] = useState(20); + function overflowTile(overflowCount, totalCount) { + const text = _t("and %(count)s others...", { count: overflowCount }); + return ( + + } name={text} presenceState="online" suppressOnHover={true} + onClick={() => setTruncateAt(totalCount)} /> + ); + } + return
    = ({ { rooms.length > 0 ? (

    { _t("Rooms") }

    - { rooms.map(room => { - return { - onChange(checked, room); - } : null} - />; - }) } + rooms.slice(start, end).map(room => + { + onChange(checked, room); + } : null} + />, + )} + getChildCount={() => rooms.length} + />
    ) : undefined } From 66b3feb802b913b9500ee38c8807f2535eb4ec99 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 11:50:00 +0100 Subject: [PATCH 0534/1270] Fix keyboard accessibility of the space panel --- .../views/elements/AccessibleButton.tsx | 6 + .../views/spaces/SpaceTreeLevel.tsx | 145 +++++++++++------- 2 files changed, 98 insertions(+), 53 deletions(-) diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index e634057a21..05bcca24b2 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -62,6 +62,8 @@ export default function AccessibleButton({ disabled, inputRef, className, + onKeyDown, + onKeyUp, ...restProps }: IProps) { const newProps: IAccessibleButtonProps = restProps; @@ -83,6 +85,8 @@ export default function AccessibleButton({ if (e.key === Key.SPACE) { e.stopPropagation(); e.preventDefault(); + } else { + onKeyDown?.(e); } }; newProps.onKeyUp = (e) => { @@ -94,6 +98,8 @@ export default function AccessibleButton({ if (e.key === Key.ENTER) { e.stopPropagation(); e.preventDefault(); + } else { + onKeyUp?.(e); } }; } diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index f34baf256b..b3577e436a 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -14,23 +14,22 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { createRef } from "react"; import classNames from "classnames"; -import {Room} from "matrix-js-sdk/src/models/room"; +import { Room } from "matrix-js-sdk/src/models/room"; import RoomAvatar from "../avatars/RoomAvatar"; import SpaceStore from "../../../stores/SpaceStore"; import SpaceTreeLevelLayoutStore from "../../../stores/SpaceTreeLevelLayoutStore"; import NotificationBadge from "../rooms/NotificationBadge"; -import {RovingAccessibleButton} from "../../../accessibility/roving/RovingAccessibleButton"; -import {RovingAccessibleTooltipButton} from "../../../accessibility/roving/RovingAccessibleTooltipButton"; +import { RovingAccessibleTooltipButton } from "../../../accessibility/roving/RovingAccessibleTooltipButton"; import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList, } from "../context_menus/IconizedContextMenu"; -import {_t} from "../../../languageHandler"; -import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton"; -import {toRightOf} from "../../structures/ContextMenu"; +import { _t } from "../../../languageHandler"; +import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton"; +import { toRightOf } from "../../structures/ContextMenu"; import { shouldShowSpaceSettings, showAddExistingRooms, @@ -39,15 +38,16 @@ import { showSpaceSettings, } from "../../../utils/space"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -import AccessibleButton, {ButtonEvent} from "../elements/AccessibleButton"; +import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import defaultDispatcher from "../../../dispatcher/dispatcher"; -import {Action} from "../../../dispatcher/actions"; +import { Action } from "../../../dispatcher/actions"; import RoomViewStore from "../../../stores/RoomViewStore"; -import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; -import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; -import {EventType} from "matrix-js-sdk/src/@types/event"; -import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState"; -import {NotificationColor} from "../../../stores/notifications/NotificationColor"; +import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; +import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { EventType } from "matrix-js-sdk/src/@types/event"; +import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState"; +import { NotificationColor } from "../../../stores/notifications/NotificationColor"; +import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager"; interface IItemProps { space?: Room; @@ -61,11 +61,14 @@ interface IItemProps { interface IItemState { collapsed: boolean; contextMenuPosition: Pick; + childSpaces: Room[]; } export class SpaceItem extends React.PureComponent { static contextType = MatrixClientContext; + private buttonRef = createRef(); + constructor(props) { super(props); @@ -78,14 +81,36 @@ export class SpaceItem extends React.PureComponent { this.state = { collapsed: collapsed, contextMenuPosition: null, + childSpaces: this.childSpaces, }; + + SpaceStore.instance.on(this.props.space.roomId, this.onSpaceUpdate); } - private toggleCollapse(evt) { - if (this.props.onExpand && this.state.collapsed) { + componentWillUnmount() { + SpaceStore.instance.off(this.props.space.roomId, this.onSpaceUpdate); + } + + private onSpaceUpdate = () => { + this.setState({ + childSpaces: this.childSpaces, + }); + }; + + private get childSpaces() { + return SpaceStore.instance.getChildSpaces(this.props.space.roomId) + .filter(s => !this.props.parents?.has(s.roomId)); + } + + private get isCollapsed() { + return this.state.collapsed || this.props.isPanelCollapsed; + } + + private toggleCollapse = evt => { + if (this.props.onExpand && this.isCollapsed) { this.props.onExpand(); } - const newCollapsedState = !this.state.collapsed; + const newCollapsedState = !this.isCollapsed; SpaceTreeLevelLayoutStore.instance.setSpaceCollapsedState( this.props.space.roomId, @@ -96,7 +121,7 @@ export class SpaceItem extends React.PureComponent { // don't bubble up so encapsulating button for space // doesn't get triggered evt.stopPropagation(); - } + }; private onContextMenu = (ev: React.MouseEvent) => { if (this.props.space.getMyMembership() !== "join") return; @@ -111,6 +136,43 @@ export class SpaceItem extends React.PureComponent { }); } + private onKeyDown = (ev: React.KeyboardEvent) => { + let handled = true; + const action = getKeyBindingsManager().getRoomListAction(ev); + const hasChildren = this.state.childSpaces?.length; + switch (action) { + case RoomListAction.CollapseSection: + if (hasChildren && !this.isCollapsed) { + this.toggleCollapse(ev); + } else { + const parentItem = this.buttonRef?.current?.parentElement?.parentElement; + const parentButton = parentItem?.previousElementSibling as HTMLElement; + parentButton?.focus(); + } + break; + + case RoomListAction.ExpandSection: + if (hasChildren) { + if (this.isCollapsed) { + this.toggleCollapse(ev); + } else { + const childLevel = this.buttonRef?.current?.nextElementSibling; + const firstSpaceItemChild = childLevel?.querySelector(".mx_SpaceItem"); + firstSpaceItemChild?.querySelector(".mx_SpaceButton")?.focus(); + } + } + break; + + default: + handled = false; + } + + if (handled) { + ev.stopPropagation(); + ev.preventDefault(); + } + }; + private onClick = (ev: React.MouseEvent) => { ev.preventDefault(); ev.stopPropagation(); @@ -302,18 +364,15 @@ export class SpaceItem extends React.PureComponent { render() { const {space, activeSpaces, isNested} = this.props; - const forceCollapsed = this.props.isPanelCollapsed; const isNarrow = this.props.isPanelCollapsed; - const collapsed = this.state.collapsed || forceCollapsed; + const collapsed = this.isCollapsed; - const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId) - .filter(s => !this.props.parents?.has(s.roomId)); const isActive = activeSpaces.includes(space); const itemClasses = classNames({ "mx_SpaceItem": true, "mx_SpaceItem_narrow": isNarrow, "collapsed": collapsed, - "hasSubSpaces": childSpaces && childSpaces.length, + "hasSubSpaces": this.state.childSpaces?.length, }); const isInvite = space.getMyMembership() === "invite"; @@ -328,9 +387,9 @@ export class SpaceItem extends React.PureComponent { : SpaceStore.instance.getNotificationState(space.roomId); let childItems; - if (childSpaces && !collapsed) { + if (this.state.childSpaces?.length && !collapsed) { childItems = { const avatarSize = isNested ? 24 : 32; - const toggleCollapseButton = childSpaces && childSpaces.length ? + const toggleCollapseButton = this.state.childSpaces?.length ? this.toggleCollapse(evt)} + onClick={this.toggleCollapse} /> : null; - let button; - if (isNarrow) { - button = ( + return ( +
  • { toggleCollapseButton }
    + { !isNarrow && { space.name } } { notifBadge } { this.renderContextMenu() }
    - ); - } else { - button = ( - - { toggleCollapseButton } -
    - - { space.name } - { notifBadge } - { this.renderContextMenu() } -
    -     - ); - } - return ( -
  • - { button } { childItems }
    • ); From 1f0fdb95cd2f52731cc1ca2253a249a00fe8a83c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 11:59:04 +0100 Subject: [PATCH 0535/1270] Improve accessibility of subspaces in the space panel --- src/components/views/spaces/SpaceTreeLevel.tsx | 3 +++ src/i18n/strings/en_EN.json | 2 ++ 2 files changed, 5 insertions(+) diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index b3577e436a..cbc1cab86b 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -409,6 +409,8 @@ export class SpaceItem extends React.PureComponent { : null; return ( @@ -420,6 +422,7 @@ export class SpaceItem extends React.PureComponent { onContextMenu={this.onContextMenu} forceHide={!isNarrow || !!this.state.contextMenuPosition} role="treeitem" + aria-expanded={!collapsed} inputRef={this.buttonRef} onKeyDown={this.onKeyDown} > diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b88dc79da5..a2fb93dc17 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1038,6 +1038,8 @@ "Manage & explore rooms": "Manage & explore rooms", "Explore rooms": "Explore rooms", "Space options": "Space options", + "Expand": "Expand", + "Collapse": "Collapse", "Remove": "Remove", "This bridge was provisioned by .": "This bridge was provisioned by .", "This bridge is managed by .": "This bridge is managed by .", From 27d255f30e1fd023bc6a2f18bf368e007d83989a Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 12:27:54 +0100 Subject: [PATCH 0536/1270] Reduce audio waveform layout trashing --- .../views/voice_messages/_PlaybackContainer.scss | 4 ++++ src/components/views/voice_messages/Waveform.tsx | 15 ++++++++++----- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/res/css/views/voice_messages/_PlaybackContainer.scss b/res/css/views/voice_messages/_PlaybackContainer.scss index 20def16d6a..944378fb19 100644 --- a/res/css/views/voice_messages/_PlaybackContainer.scss +++ b/res/css/views/voice_messages/_PlaybackContainer.scss @@ -33,9 +33,13 @@ limitations under the License. font-size: $font-14px; line-height: $font-24px; + contain: content; + .mx_Waveform { .mx_Waveform_bar { background-color: $voice-record-waveform-incomplete-fg-color; + height: 100%; + transform: scaleY(max(0.05, var(--barHeight))); &.mx_Waveform_bar_100pct { // Small animation to remove the mechanical feel of progress diff --git a/src/components/views/voice_messages/Waveform.tsx b/src/components/views/voice_messages/Waveform.tsx index 840a5a12b3..ae880933e6 100644 --- a/src/components/views/voice_messages/Waveform.tsx +++ b/src/components/views/voice_messages/Waveform.tsx @@ -34,16 +34,19 @@ interface IState { * For CSS purposes, a mx_Waveform_bar_100pct class is added when the bar should be * "filled", as a demonstration of the progress property. */ + +import { CSSProperties } from "react"; + +export interface WaveformCSSProperties extends CSSProperties { + '--barHeight': number; +} + @replaceableComponent("views.voice_messages.Waveform") export default class Waveform extends React.PureComponent { public static defaultProps = { progress: 1, }; - public constructor(props) { - super(props); - } - public render() { return
    {this.props.relHeights.map((h, i) => { @@ -53,7 +56,9 @@ export default class Waveform extends React.PureComponent { 'mx_Waveform_bar': true, 'mx_Waveform_bar_100pct': isCompleteBar, }); - return ; + return ; })}
    ; } From a85c6c67e059a92b4c57dda42cd88217cb3b3c3f Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 12:28:23 +0100 Subject: [PATCH 0537/1270] Make waveform update match the screen refresh rate --- .../views/rooms/VoiceRecordComposerTile.tsx | 69 ++++++++++++++++--- .../voice_messages/LiveRecordingClock.tsx | 49 ------------- .../voice_messages/LiveRecordingWaveform.tsx | 60 ---------------- 3 files changed, 59 insertions(+), 119 deletions(-) delete mode 100644 src/components/views/voice_messages/LiveRecordingClock.tsx delete mode 100644 src/components/views/voice_messages/LiveRecordingWaveform.tsx diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index 20d8c9c5d4..6fe6a5ab1c 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -15,19 +15,26 @@ limitations under the License. */ import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; -import {_t} from "../../../languageHandler"; +import { _t } from "../../../languageHandler"; import React, {ReactNode} from "react"; -import {RecordingState, VoiceRecording} from "../../../voice/VoiceRecording"; +import { + IRecordingUpdate, + RECORDING_PLAYBACK_SAMPLES, + RecordingState, + VoiceRecording, +} from "../../../voice/VoiceRecording"; import {Room} from "matrix-js-sdk/src/models/room"; -import {MatrixClientPeg} from "../../../MatrixClientPeg"; +import { MatrixClientPeg } from "../../../MatrixClientPeg"; import classNames from "classnames"; -import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; -import LiveRecordingClock from "../voice_messages/LiveRecordingClock"; -import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore"; +import Waveform from "../voice_messages/Waveform"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { arrayFastResample, arraySeed } from "../../../utils/arrays"; +import { percentageOf } from "../../../utils/numbers"; +import Clock from "../voice_messages/Clock"; +import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore"; import {UPDATE_EVENT} from "../../../stores/AsyncStore"; import RecordingPlayback from "../voice_messages/RecordingPlayback"; -import {MsgType} from "matrix-js-sdk/src/@types/event"; +import { MsgType } from "matrix-js-sdk/src/@types/event"; import Modal from "../../../Modal"; import ErrorDialog from "../dialogs/ErrorDialog"; import CallMediaHandler from "../../../CallMediaHandler"; @@ -39,6 +46,8 @@ interface IProps { interface IState { recorder?: VoiceRecording; recordingPhase?: RecordingState; + relHeights: number[]; + seconds: number; } /** @@ -46,18 +55,58 @@ interface IState { */ @replaceableComponent("views.rooms.VoiceRecordComposerTile") export default class VoiceRecordComposerTile extends React.PureComponent { + private waveform: number[] = []; + private seconds = 0; + private scheduledAnimationFrame = false; + public constructor(props) { super(props); this.state = { recorder: null, // no recording started by default + seconds: 0, + relHeights: arraySeed(0, RECORDING_PLAYBACK_SAMPLES), }; } + public componentDidUpdate(prevProps, prevState) { + if (!prevState.recorder && this.state.recorder) { + this.state.recorder.liveData.onUpdate(this.onRecordingUpdate); + } + } + public async componentWillUnmount() { await VoiceRecordingStore.instance.disposeRecording(); } + private onRecordingUpdate = (update: IRecordingUpdate): void => { + this.waveform = update.waveform; + this.seconds = update.timeSeconds; + + if (this.scheduledAnimationFrame) { + return; + } + + this.scheduledAnimationFrame = true; + // The audio recorder flushes data faster than the screen refresh rate + // Using requestAnimationFrame makes sure that we only flush the data + // to react once per tick to avoid unneeded work. + requestAnimationFrame(() => { + // The waveform and the downsample target are pretty close, so we should be fine to + // do this, despite the docs on arrayFastResample. + const bars = arrayFastResample(Array.from(this.waveform), RECORDING_PLAYBACK_SAMPLES); + this.setState({ + // The incoming data is between zero and one, but typically even screaming into a + // microphone won't send you over 0.6, so we artificially adjust the gain for the + // waveform. This results in a slightly more cinematic/animated waveform for the + // user. + relHeights: bars.map(b => percentageOf(b, 0, 0.50)), + seconds: this.seconds, + }); + this.scheduledAnimationFrame = false; + }); + } + // called by composer public async send() { if (!this.state.recorder) { @@ -178,8 +227,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent - - + +
    ; } diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx deleted file mode 100644 index b82539eb16..0000000000 --- a/src/components/views/voice_messages/LiveRecordingClock.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* -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 React from "react"; -import {IRecordingUpdate, VoiceRecording} from "../../../voice/VoiceRecording"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; -import Clock from "./Clock"; - -interface IProps { - recorder: VoiceRecording; -} - -interface IState { - seconds: number; -} - -/** - * A clock for a live recording. - */ -@replaceableComponent("views.voice_messages.LiveRecordingClock") -export default class LiveRecordingClock extends React.PureComponent { - public constructor(props) { - super(props); - - this.state = {seconds: 0}; - this.props.recorder.liveData.onUpdate(this.onRecordingUpdate); - } - - private onRecordingUpdate = (update: IRecordingUpdate) => { - this.setState({seconds: update.timeSeconds}); - }; - - public render() { - return ; - } -} diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx deleted file mode 100644 index aab89f6ab1..0000000000 --- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/* -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 React from "react"; -import {IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording} from "../../../voice/VoiceRecording"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; -import {arrayFastResample, arraySeed} from "../../../utils/arrays"; -import {percentageOf} from "../../../utils/numbers"; -import Waveform from "./Waveform"; - -interface IProps { - recorder: VoiceRecording; -} - -interface IState { - heights: number[]; -} - -/** - * A waveform which shows the waveform of a live recording - */ -@replaceableComponent("views.voice_messages.LiveRecordingWaveform") -export default class LiveRecordingWaveform extends React.PureComponent { - public constructor(props) { - super(props); - - this.state = {heights: arraySeed(0, RECORDING_PLAYBACK_SAMPLES)}; - this.props.recorder.liveData.onUpdate(this.onRecordingUpdate); - } - - private onRecordingUpdate = (update: IRecordingUpdate) => { - // The waveform and the downsample target are pretty close, so we should be fine to - // do this, despite the docs on arrayFastResample. - const bars = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES); - this.setState({ - // The incoming data is between zero and one, but typically even screaming into a - // microphone won't send you over 0.6, so we artificially adjust the gain for the - // waveform. This results in a slightly more cinematic/animated waveform for the - // user. - heights: bars.map(b => percentageOf(b, 0, 0.50)), - }); - }; - - public render() { - return ; - } -} From a7daf558bb8f911eaedbf96cd7b8564869624e92 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 22 Jun 2021 13:03:55 +0100 Subject: [PATCH 0538/1270] Use proper capitalisation for Buildkite Co-authored-by: J. Ryan Stinnett --- scripts/fetchdep.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index 246add7e31..c7d8daeda5 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -38,7 +38,7 @@ else head=$BUILDKITE_BRANCH fi -# If head is set, it will contain on BuildKite either: +# If head is set, it will contain on Buildkite either: # * "branch" when the author's branch and target branch are in the same repo # * "fork:branch" when the author's branch is in their fork or if this is a Netlify build # We can split on `:` into an array to check. From 660f3900f8a1369a1dabea3d8e273a5c4861e673 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 14:11:41 +0100 Subject: [PATCH 0539/1270] Change if statement syntax to use positive expressions --- scripts/fetchdep.sh | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index c7d8daeda5..55f068e49d 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -25,17 +25,15 @@ clone() { # First we check if GITHUB_HEAD_REF is defined, # Then we check if BUILDKITE_BRANCH is defined, # if it isn't we can assume this is a Netlify build -if [ -z ${BUILDKITE_BRANCH+x} ]; then - if [ -z ${GITHUB_HEAD_REF+x} ]; then - # Netlify doesn't give us info about the fork so we have to get it from GitHub API - apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/" - apiEndpoint+=$REVIEW_ID - head=$(curl $apiEndpoint | jq -r '.head.label') - else - head=$GITHUB_HEAD_REF - fi -else +if [ -n "$BUILDKITE_BRANCH" ]; then head=$BUILDKITE_BRANCH +elif [ -n "$GITHUB_HEAD_REF" ]; then + head=$GITHUB_HEAD_REF +else + # Netlify doesn't give us info about the fork so we have to get it from GitHub API + apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/" + apiEndpoint+=$REVIEW_ID + head=$(curl $apiEndpoint | jq -r '.head.label') fi # If head is set, it will contain on Buildkite either: @@ -46,7 +44,8 @@ fi # to determine whether the branch is from a fork or not BRANCH_ARRAY=(${head//:/ }) if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then - if [ -z ${BUILDKITE_BRANCH+x} ]; then + + if [ -n "$GITHUB_HEAD_REF" ]; then if [[ "$GITHUB_REPOSITORY" == "$deforg"* ]]; then clone $deforg $defrepo $GITHUB_HEAD_REF else @@ -61,9 +60,9 @@ elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then fi # Try the target branch of the push or PR. -if [ -n ${GITHUB_BASE_REF+x} ]; then +if [ -n $GITHUB_BASE_REF ]; then clone $deforg $defrepo $GITHUB_BASE_REF -elif [ -n ${BUILDKITE_PULL_REQUEST_BASE_BRANCH+x} ]; then +elif [ -n $BUILDKITE_PULL_REQUEST_BASE_BRANCH ]; then clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH fi From c42f0fd2e4774c60283e33c0233f93993604184f Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 14:17:11 +0100 Subject: [PATCH 0540/1270] split GITHUB_REPOSITORY rather than using GITHUB_ACTOR --- scripts/fetchdep.sh | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index 55f068e49d..7d893a6039 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -49,7 +49,8 @@ if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then if [[ "$GITHUB_REPOSITORY" == "$deforg"* ]]; then clone $deforg $defrepo $GITHUB_HEAD_REF else - clone $GITHUB_ACTOR $defrepo $GITHUB_HEAD_REF + REPO_ARRAY=(${GITHUB_REPOSITORY//\// }) + clone $REPO_ARRAY[0] $defrepo $GITHUB_HEAD_REF fi else clone $deforg $defrepo $BUILDKITE_BRANCH From ded738ce8c820cffb9b2a49f659e5febf130e4f1 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 22 Jun 2021 14:57:44 +0100 Subject: [PATCH 0541/1270] Add spaces around curlies Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/SearchBar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx index 47994f5251..d71bb8da73 100644 --- a/src/components/views/rooms/SearchBar.tsx +++ b/src/components/views/rooms/SearchBar.tsx @@ -19,8 +19,8 @@ import React, { createRef, RefObject } from 'react'; import AccessibleButton from "../elements/AccessibleButton"; import classNames from "classnames"; import { _t } from '../../../languageHandler'; -import {Key} from "../../../Keyboard"; -import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice"; +import { Key } from "../../../Keyboard"; +import DesktopBuildsNotice, { WarningKind } from "../elements/DesktopBuildsNotice"; import { replaceableComponent } from "../../../utils/replaceableComponent"; interface IProps { @@ -95,7 +95,7 @@ export default class SearchBar extends React.Component {
    { {_t("This Room")} Date: Tue, 22 Jun 2021 15:29:53 +0100 Subject: [PATCH 0542/1270] remove spurious full stop --- src/i18n/strings/en_EN.json | 2 +- src/settings/Settings.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 179b58b617..a9a0d15ac4 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -796,7 +796,7 @@ "Show all rooms in Home": "Show all rooms in Home", "Show people in spaces": "Show people in spaces", "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.": "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.", - "Show notification badges for DMs in Spaces.": "Show notification badges for DMs in Spaces.", + "Show notification badges for DMs in Spaces": "Show notification badges for DMs in Spaces", "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode", "Send and receive voice messages": "Send and receive voice messages", "Render LaTeX maths in messages": "Render LaTeX maths in messages", diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index af026f4103..3937b7d821 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -193,7 +193,7 @@ export const SETTINGS: {[setting: string]: ISetting} = { controller: new ReloadOnChangeController(), }, "feature_spaces.space_dm_badges": { - displayName: _td("Show notification badges for DMs in Spaces."), + displayName: _td("Show notification badges for DMs in Spaces"), supportedLevels: LEVELS_FEATURE, default: false, controller: new ReloadOnChangeController(), From fca2feaae8ad83cdef7eb1d426873e33bc3e9c00 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 16:09:33 +0100 Subject: [PATCH 0543/1270] make github env variable check first as it is new home for ci --- scripts/fetchdep.sh | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index 7d893a6039..0b15db6a23 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -25,10 +25,10 @@ clone() { # First we check if GITHUB_HEAD_REF is defined, # Then we check if BUILDKITE_BRANCH is defined, # if it isn't we can assume this is a Netlify build -if [ -n "$BUILDKITE_BRANCH" ]; then - head=$BUILDKITE_BRANCH -elif [ -n "$GITHUB_HEAD_REF" ]; then +if [ -n "$GITHUB_HEAD_REF" ]; then head=$GITHUB_HEAD_REF +elif [ -n "$BUILDKITE_BRANCH" ]; then + head=$BUILDKITE_BRANCH else # Netlify doesn't give us info about the fork so we have to get it from GitHub API apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/" From b092686453604cb37df602e6fcc796418688c022 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 16:14:01 +0100 Subject: [PATCH 0544/1270] improve comment grammar --- scripts/fetchdep.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index 0b15db6a23..0990af70ce 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -24,7 +24,7 @@ clone() { # Try the PR author's branch in case it exists on the deps as well. # First we check if GITHUB_HEAD_REF is defined, # Then we check if BUILDKITE_BRANCH is defined, -# if it isn't we can assume this is a Netlify build +# if they aren't we can assume this is a Netlify build if [ -n "$GITHUB_HEAD_REF" ]; then head=$GITHUB_HEAD_REF elif [ -n "$BUILDKITE_BRANCH" ]; then From 6d92953311ed49567a0dad80e2ff81df9cbcd417 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 17:22:38 +0100 Subject: [PATCH 0545/1270] Convert bunch of utils to TS --- ...tateTransfer.js => EditorStateTransfer.ts} | 30 ++++---- src/utils/{ErrorUtils.js => ErrorUtils.tsx} | 16 +++-- src/utils/{EventUtils.js => EventUtils.ts} | 17 +++-- ...yServerUtils.js => IdentityServerUtils.ts} | 11 +-- ...ssageDiffUtils.js => MessageDiffUtils.tsx} | 68 ++++++++++--------- .../{PinningUtils.js => PinningUtils.ts} | 4 +- src/utils/{Receipt.js => Receipt.ts} | 6 +- .../{ResizeNotifier.js => ResizeNotifier.ts} | 45 ++++++------ ...eMatrixClient.js => createMatrixClient.ts} | 21 +++--- 9 files changed, 120 insertions(+), 98 deletions(-) rename src/utils/{EditorStateTransfer.js => EditorStateTransfer.ts} (58%) rename src/utils/{ErrorUtils.js => ErrorUtils.tsx} (84%) rename src/utils/{EventUtils.js => EventUtils.ts} (85%) rename src/utils/{IdentityServerUtils.js => IdentityServerUtils.ts} (82%) rename src/utils/{MessageDiffUtils.js => MessageDiffUtils.tsx} (84%) rename src/utils/{PinningUtils.js => PinningUtils.ts} (89%) rename src/utils/{Receipt.js => Receipt.ts} (83%) rename src/utils/{ResizeNotifier.js => ResizeNotifier.ts} (62%) rename src/utils/{createMatrixClient.js => createMatrixClient.ts} (76%) diff --git a/src/utils/EditorStateTransfer.js b/src/utils/EditorStateTransfer.ts similarity index 58% rename from src/utils/EditorStateTransfer.js rename to src/utils/EditorStateTransfer.ts index c7782a9ea8..42e1a316d6 100644 --- a/src/utils/EditorStateTransfer.js +++ b/src/utils/EditorStateTransfer.ts @@ -1,5 +1,5 @@ /* -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2019 - 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,36 +14,40 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; + +import { SerializedPart } from "../editor/parts"; +import { Caret } from "../editor/caret"; + /** * Used while editing, to pass the event, and to preserve editor state * from one editor instance to another when remounting the editor * upon receiving the remote echo for an unsent event. */ export default class EditorStateTransfer { - constructor(event) { - this._event = event; - this._serializedParts = null; - this.caret = null; - } + private serializedParts: SerializedPart[] = null; + private caret: Caret = null; - setEditorState(caret, serializedParts) { - this._caret = caret; - this._serializedParts = serializedParts; + constructor(private readonly event: MatrixEvent) {} + + setEditorState(caret: Caret, serializedParts: SerializedPart[]) { + this.caret = caret; + this.serializedParts = serializedParts; } hasEditorState() { - return !!this._serializedParts; + return !!this.serializedParts; } getSerializedParts() { - return this._serializedParts; + return this.serializedParts; } getCaret() { - return this._caret; + return this.caret; } getEvent() { - return this._event; + return this.event; } } diff --git a/src/utils/ErrorUtils.js b/src/utils/ErrorUtils.tsx similarity index 84% rename from src/utils/ErrorUtils.js rename to src/utils/ErrorUtils.tsx index b5bd5b0af0..c39ee21f09 100644 --- a/src/utils/ErrorUtils.js +++ b/src/utils/ErrorUtils.tsx @@ -1,5 +1,5 @@ /* -Copyright 2018 New Vector Ltd +Copyright 2018 - 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,7 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { _t, _td } from '../languageHandler'; +import React, { ReactNode } from "react"; +import { MatrixError } from "matrix-js-sdk/src/http-api"; + +import { _t, _td, Tags, TranslatedString } from '../languageHandler'; /** * Produce a translated error message for a @@ -30,7 +33,12 @@ import { _t, _td } from '../languageHandler'; * for any tags in the strings apart from 'a' * @returns {*} Translated string or react component */ -export function messageForResourceLimitError(limitType, adminContact, strings, extraTranslations) { +export function messageForResourceLimitError( + limitType: string, + adminContact: string, + strings: Record, + extraTranslations?: Tags, +): TranslatedString { let errString = strings[limitType]; if (errString === undefined) errString = strings['']; @@ -49,7 +57,7 @@ export function messageForResourceLimitError(limitType, adminContact, strings, e } } -export function messageForSyncError(err) { +export function messageForSyncError(err: MatrixError | Error): ReactNode { if (err.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') { const limitError = messageForResourceLimitError( err.data.limit_type, diff --git a/src/utils/EventUtils.js b/src/utils/EventUtils.ts similarity index 85% rename from src/utils/EventUtils.js rename to src/utils/EventUtils.ts index be21896417..3d9c60d9cd 100644 --- a/src/utils/EventUtils.js +++ b/src/utils/EventUtils.ts @@ -1,5 +1,5 @@ /* -Copyright 2019 New Vector Ltd +Copyright 2019 - 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,9 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { EventStatus } from 'matrix-js-sdk/src/models/event'; -import {MatrixClientPeg} from '../MatrixClientPeg'; +import { Room } from 'matrix-js-sdk/src/models/room'; +import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event'; + +import { MatrixClientPeg } from '../MatrixClientPeg'; import shouldHideEvent from "../shouldHideEvent"; + /** * Returns whether an event should allow actions like reply, reactions, edit, etc. * which effectively checks whether it's a regular message that has been sent and that we @@ -25,7 +28,7 @@ import shouldHideEvent from "../shouldHideEvent"; * @param {MatrixEvent} mxEvent The event to check * @returns {boolean} true if actionable */ -export function isContentActionable(mxEvent) { +export function isContentActionable(mxEvent: MatrixEvent): boolean { const { status: eventStatus } = mxEvent; // status is SENT before remote-echo, null after @@ -45,7 +48,7 @@ export function isContentActionable(mxEvent) { return false; } -export function canEditContent(mxEvent) { +export function canEditContent(mxEvent: MatrixEvent): boolean { if (mxEvent.status === EventStatus.CANCELLED || mxEvent.getType() !== "m.room.message" || mxEvent.isRedacted()) { return false; } @@ -56,7 +59,7 @@ export function canEditContent(mxEvent) { mxEvent.getSender() === MatrixClientPeg.get().getUserId(); } -export function canEditOwnEvent(mxEvent) { +export function canEditOwnEvent(mxEvent: MatrixEvent): boolean { // for now we only allow editing // your own events. So this just call through // In the future though, moderators will be able to @@ -67,7 +70,7 @@ export function canEditOwnEvent(mxEvent) { } const MAX_JUMP_DISTANCE = 100; -export function findEditableEvent(room, isForward, fromEventId = undefined) { +export function findEditableEvent(room: Room, isForward: boolean, fromEventId: string = undefined): MatrixEvent { const liveTimeline = room.getLiveTimeline(); const events = liveTimeline.getEvents().concat(room.getPendingEvents()); const maxIdx = events.length - 1; diff --git a/src/utils/IdentityServerUtils.js b/src/utils/IdentityServerUtils.ts similarity index 82% rename from src/utils/IdentityServerUtils.js rename to src/utils/IdentityServerUtils.ts index 5ece308954..2476adca19 100644 --- a/src/utils/IdentityServerUtils.js +++ b/src/utils/IdentityServerUtils.ts @@ -1,5 +1,5 @@ /* -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2019 - 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -15,14 +15,15 @@ limitations under the License. */ import { SERVICE_TYPES } from 'matrix-js-sdk/src/service-types'; + import SdkConfig from '../SdkConfig'; import {MatrixClientPeg} from '../MatrixClientPeg'; -export function getDefaultIdentityServerUrl() { +export function getDefaultIdentityServerUrl(): string { return SdkConfig.get()['validated_server_config']['isUrl']; } -export function useDefaultIdentityServer() { +export function useDefaultIdentityServer(): void { const url = getDefaultIdentityServerUrl(); // Account data change will update localstorage, client, etc through dispatcher MatrixClientPeg.get().setAccountData("m.identity_server", { @@ -30,7 +31,7 @@ export function useDefaultIdentityServer() { }); } -export async function doesIdentityServerHaveTerms(fullUrl) { +export async function doesIdentityServerHaveTerms(fullUrl: string): Promise { let terms; try { terms = await MatrixClientPeg.get().getTerms(SERVICE_TYPES.IS, fullUrl); @@ -46,7 +47,7 @@ export async function doesIdentityServerHaveTerms(fullUrl) { return terms && terms["policies"] && (Object.keys(terms["policies"]).length > 0); } -export function doesAccountDataHaveIdentityServer() { +export function doesAccountDataHaveIdentityServer(): boolean { const event = MatrixClientPeg.get().getAccountData("m.identity_server"); return event && event.getContent() && event.getContent()['base_url']; } diff --git a/src/utils/MessageDiffUtils.js b/src/utils/MessageDiffUtils.tsx similarity index 84% rename from src/utils/MessageDiffUtils.js rename to src/utils/MessageDiffUtils.tsx index 7398173fdd..b5d5e31432 100644 --- a/src/utils/MessageDiffUtils.js +++ b/src/utils/MessageDiffUtils.tsx @@ -1,5 +1,5 @@ /* -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2019 - 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,31 +14,33 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; +import React, { ReactNode } from 'react'; import classNames from 'classnames'; -import DiffMatchPatch from 'diff-match-patch'; -import {DiffDOM} from "diff-dom"; -import { checkBlockNode, bodyToHtml } from "../HtmlUtils"; +import { diff_match_patch as DiffMatchPatch } from 'diff-match-patch'; +import { Action, DiffDOM, IDiff } from "diff-dom"; +import { IContent } from "matrix-js-sdk/src/models/event"; + +import { bodyToHtml, checkBlockNode, IOptsReturnString } from "../HtmlUtils"; const decodeEntities = (function() { let textarea = null; - return function(string) { + return function(str: string): string { if (!textarea) { textarea = document.createElement("textarea"); } - textarea.innerHTML = string; + textarea.innerHTML = str; return textarea.value; }; })(); -function textToHtml(text) { +function textToHtml(text: string): string { const container = document.createElement("div"); container.textContent = text; return container.innerHTML; } -function getSanitizedHtmlBody(content) { - const opts = { +function getSanitizedHtmlBody(content: IContent): string { + const opts: IOptsReturnString = { stripReplyFallback: true, returnString: true, }; @@ -57,21 +59,21 @@ function getSanitizedHtmlBody(content) { } } -function wrapInsertion(child) { +function wrapInsertion(child: Node): HTMLElement { const wrapper = document.createElement(checkBlockNode(child) ? "div" : "span"); wrapper.className = "mx_EditHistoryMessage_insertion"; wrapper.appendChild(child); return wrapper; } -function wrapDeletion(child) { +function wrapDeletion(child: Node): HTMLElement { const wrapper = document.createElement(checkBlockNode(child) ? "div" : "span"); wrapper.className = "mx_EditHistoryMessage_deletion"; wrapper.appendChild(child); return wrapper; } -function findRefNodes(root, route, isAddition) { +function findRefNodes(root: Node, route: number[], isAddition = false) { let refNode = root; let refParentNode; const end = isAddition ? route.length - 1 : route.length; @@ -79,7 +81,7 @@ function findRefNodes(root, route, isAddition) { refParentNode = refNode; refNode = refNode.childNodes[route[i]]; } - return {refNode, refParentNode}; + return { refNode, refParentNode }; } function diffTreeToDOM(desc) { @@ -101,7 +103,7 @@ function diffTreeToDOM(desc) { } } -function insertBefore(parent, nextSibling, child) { +function insertBefore(parent: Node, nextSibling: Node | null, child: Node): void { if (nextSibling) { parent.insertBefore(child, nextSibling); } else { @@ -109,7 +111,7 @@ function insertBefore(parent, nextSibling, child) { } } -function isRouteOfNextSibling(route1, route2) { +function isRouteOfNextSibling(route1: number[], route2: number[]): boolean { // routes are arrays with indices, // to be interpreted as a path in the dom tree @@ -127,7 +129,7 @@ function isRouteOfNextSibling(route1, route2) { return route2[lastD1Idx] >= route1[lastD1Idx]; } -function adjustRoutes(diff, remainingDiffs) { +function adjustRoutes(diff: IDiff, remainingDiffs: IDiff[]): void { if (diff.action === "removeTextElement" || diff.action === "removeElement") { // as removed text is not removed from the html, but marked as deleted, // we need to readjust indices that assume the current node has been removed. @@ -140,14 +142,14 @@ function adjustRoutes(diff, remainingDiffs) { } } -function stringAsTextNode(string) { +function stringAsTextNode(string: string): Text { return document.createTextNode(decodeEntities(string)); } -function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) { +function renderDifferenceInDOM(originalRootNode: Node, diff: IDiff, diffMathPatch: DiffMatchPatch): void { const {refNode, refParentNode} = findRefNodes(originalRootNode, diff.route); switch (diff.action) { - case "replaceElement": { + case Action.ReplaceElement: { const container = document.createElement("span"); const delNode = wrapDeletion(diffTreeToDOM(diff.oldValue)); const insNode = wrapInsertion(diffTreeToDOM(diff.newValue)); @@ -156,22 +158,22 @@ function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) { refNode.parentNode.replaceChild(container, refNode); break; } - case "removeTextElement": { + case Action.RemoveTextElement: { const delNode = wrapDeletion(stringAsTextNode(diff.value)); refNode.parentNode.replaceChild(delNode, refNode); break; } - case "removeElement": { + case Action.RemoveElement: { const delNode = wrapDeletion(diffTreeToDOM(diff.element)); refNode.parentNode.replaceChild(delNode, refNode); break; } - case "modifyTextElement": { + case Action.ModifyTextElement: { const textDiffs = diffMathPatch.diff_main(diff.oldValue, diff.newValue); diffMathPatch.diff_cleanupSemantic(textDiffs); const container = document.createElement("span"); for (const [modifier, text] of textDiffs) { - let textDiffNode = stringAsTextNode(text); + let textDiffNode: Node = stringAsTextNode(text); if (modifier < 0) { textDiffNode = wrapDeletion(textDiffNode); } else if (modifier > 0) { @@ -182,12 +184,12 @@ function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) { refNode.parentNode.replaceChild(container, refNode); break; } - case "addElement": { + case Action.AddElement: { const insNode = wrapInsertion(diffTreeToDOM(diff.element)); insertBefore(refParentNode, refNode, insNode); break; } - case "addTextElement": { + case Action.AddTextElement: { // XXX: sometimes diffDOM says insert a newline when there shouldn't be one // but we must insert the node anyway so that we don't break the route child IDs. // See https://github.com/fiduswriter/diffDOM/issues/100 @@ -197,11 +199,11 @@ function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) { } // e.g. when changing a the href of a link, // show the link with old href as removed and with the new href as added - case "removeAttribute": - case "addAttribute": - case "modifyAttribute": { + case Action.RemoveAttribute: + case Action.AddAttribute: + case Action.ModifyAttribute: { const delNode = wrapDeletion(refNode.cloneNode(true)); - const updatedNode = refNode.cloneNode(true); + const updatedNode = refNode.cloneNode(true) as HTMLElement; if (diff.action === "addAttribute" || diff.action === "modifyAttribute") { updatedNode.setAttribute(diff.name, diff.newValue); } else { @@ -220,12 +222,12 @@ function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) { } } -function routeIsEqual(r1, r2) { +function routeIsEqual(r1: number[], r2: number[]): boolean { return r1.length === r2.length && !r1.some((e, i) => e !== r2[i]); } // workaround for https://github.com/fiduswriter/diffDOM/issues/90 -function filterCancelingOutDiffs(originalDiffActions) { +function filterCancelingOutDiffs(originalDiffActions: IDiff[]): IDiff[] { const diffActions = originalDiffActions.slice(); for (let i = 0; i < diffActions.length; ++i) { @@ -252,7 +254,7 @@ function filterCancelingOutDiffs(originalDiffActions) { * @param {object} editContent the content for the edit message * @return {object} a react element similar to what `bodyToHtml` returns */ -export function editBodyDiffToHtml(originalContent, editContent) { +export function editBodyDiffToHtml(originalContent: IContent, editContent: IContent): ReactNode { // wrap the body in a div, DiffDOM needs a root element const originalBody = `
    ${getSanitizedHtmlBody(originalContent)}
    `; const editBody = `
    ${getSanitizedHtmlBody(editContent)}
    `; diff --git a/src/utils/PinningUtils.js b/src/utils/PinningUtils.ts similarity index 89% rename from src/utils/PinningUtils.js rename to src/utils/PinningUtils.ts index 90d26cc988..ec1eeccf1f 100644 --- a/src/utils/PinningUtils.js +++ b/src/utils/PinningUtils.ts @@ -14,13 +14,15 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; + export default class PinningUtils { /** * Determines if the given event may be pinned. * @param {MatrixEvent} event The event to check. * @return {boolean} True if the event may be pinned, false otherwise. */ - static isPinnable(event) { + static isPinnable(event: MatrixEvent): boolean { if (!event) return false; if (event.getType() !== "m.room.message") return false; if (event.isRedacted()) return false; diff --git a/src/utils/Receipt.js b/src/utils/Receipt.ts similarity index 83% rename from src/utils/Receipt.js rename to src/utils/Receipt.ts index d88c67fb18..2a626decc4 100644 --- a/src/utils/Receipt.js +++ b/src/utils/Receipt.ts @@ -1,5 +1,5 @@ /* -Copyright 2016 OpenMarket Ltd +Copyright 2016 - 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,6 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; + /** * Given MatrixEvent containing receipts, return the first * read receipt from the given user ID, or null if no such @@ -23,7 +25,7 @@ limitations under the License. * @param {string} userId A user ID * @returns {Object} Read receipt */ -export function findReadReceiptFromUserId(receiptEvent, userId) { +export function findReadReceiptFromUserId(receiptEvent: MatrixEvent, userId: string): object | null { const receiptKeys = Object.keys(receiptEvent.getContent()); for (let i = 0; i < receiptKeys.length; ++i) { const rcpt = receiptEvent.getContent()[receiptKeys[i]]; diff --git a/src/utils/ResizeNotifier.js b/src/utils/ResizeNotifier.ts similarity index 62% rename from src/utils/ResizeNotifier.js rename to src/utils/ResizeNotifier.ts index 4d46d10f6c..8bb7f52e57 100644 --- a/src/utils/ResizeNotifier.js +++ b/src/utils/ResizeNotifier.ts @@ -1,5 +1,5 @@ /* -Copyright 2019 New Vector Ltd +Copyright 2019 - 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -22,59 +22,58 @@ limitations under the License. * Fires when the middle panel has been resized by a pixel. * @event module:utils~ResizeNotifier#"middlePanelResizedNoisy" */ + import { EventEmitter } from "events"; import { throttle } from "lodash"; export default class ResizeNotifier extends EventEmitter { - constructor() { - super(); - // with default options, will call fn once at first call, and then every x ms - // if there was another call in that timespan - this._throttledMiddlePanel = throttle(() => this.emit("middlePanelResized"), 200); - this._isResizing = false; - } + private _isResizing = false; - get isResizing() { + // with default options, will call fn once at first call, and then every x ms + // if there was another call in that timespan + private throttledMiddlePanel = throttle(() => this.emit("middlePanelResized"), 200); + + public get isResizing() { return this._isResizing; } - startResizing() { + public startResizing() { this._isResizing = true; this.emit("isResizing", true); } - stopResizing() { + public stopResizing() { this._isResizing = false; this.emit("isResizing", false); } - _noisyMiddlePanel() { + private noisyMiddlePanel() { this.emit("middlePanelResizedNoisy"); } - _updateMiddlePanel() { - this._throttledMiddlePanel(); - this._noisyMiddlePanel(); + private updateMiddlePanel() { + this.throttledMiddlePanel(); + this.noisyMiddlePanel(); } // can be called in quick succession - notifyLeftHandleResized() { + public notifyLeftHandleResized() { // don't emit event for own region - this._updateMiddlePanel(); + this.updateMiddlePanel(); } // can be called in quick succession - notifyRightHandleResized() { - this._updateMiddlePanel(); + public notifyRightHandleResized() { + this.updateMiddlePanel(); } - notifyTimelineHeightChanged() { - this._updateMiddlePanel(); + public notifyTimelineHeightChanged() { + this.updateMiddlePanel(); } // can be called in quick succession - notifyWindowResized() { - this._updateMiddlePanel(); + public notifyWindowResized() { + this.updateMiddlePanel(); } } diff --git a/src/utils/createMatrixClient.js b/src/utils/createMatrixClient.ts similarity index 76% rename from src/utils/createMatrixClient.js rename to src/utils/createMatrixClient.ts index f5e196d846..caaf75616d 100644 --- a/src/utils/createMatrixClient.js +++ b/src/utils/createMatrixClient.ts @@ -1,5 +1,5 @@ /* -Copyright 2017 Vector Creations Ltd +Copyright 2017 - 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,10 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {createClient} from "matrix-js-sdk/src/matrix"; -import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store"; -import {WebStorageSessionStore} from "matrix-js-sdk/src/store/session/webstorage"; -import {IndexedDBStore} from "matrix-js-sdk/src/store/indexeddb"; +import { createClient, ICreateClientOpts } from "matrix-js-sdk/src/matrix"; +import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store"; +import { WebStorageSessionStore } from "matrix-js-sdk/src/store/session/webstorage"; +import { IndexedDBStore } from "matrix-js-sdk/src/store/indexeddb"; const localStorage = window.localStorage; @@ -41,8 +41,8 @@ try { * * @returns {MatrixClient} the newly-created MatrixClient */ -export default function createMatrixClient(opts) { - const storeOpts = { +export default function createMatrixClient(opts: ICreateClientOpts) { + const storeOpts: Partial = { useAuthorizationHeader: true, }; @@ -65,9 +65,10 @@ export default function createMatrixClient(opts) { ); } - opts = Object.assign(storeOpts, opts); - - return createClient(opts); + return createClient({ + ...storeOpts, + ...opts, + }); } createMatrixClient.indexedDbWorkerScript = null; From a839d0f3963eb00f22db2f205c4d285d34125a3a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 17:23:13 +0100 Subject: [PATCH 0546/1270] More typescript conversion --- package.json | 1 + src/@types/diff-dom.ts | 50 +++++++++++++++++ ...Tracker.js => DecryptionFailureTracker.ts} | 53 ++++++++++--------- src/HtmlUtils.tsx | 50 +++++++++-------- src/{Rooms.js => Rooms.ts} | 16 +++--- src/{Unread.js => Unread.ts} | 47 +++++++++------- src/components/structures/MatrixChat.tsx | 2 +- src/components/views/rooms/AuxPanel.tsx | 2 +- src/components/views/rooms/EventTile.tsx | 27 +++++----- src/components/views/rooms/RoomList.tsx | 2 +- src/components/views/rooms/RoomSublist.tsx | 2 +- src/languageHandler.tsx | 2 +- yarn.lock | 5 ++ 13 files changed, 166 insertions(+), 93 deletions(-) create mode 100644 src/@types/diff-dom.ts rename src/{DecryptionFailureTracker.js => DecryptionFailureTracker.ts} (80%) rename src/{Rooms.js => Rooms.ts} (89%) rename src/{Unread.js => Unread.ts} (75%) diff --git a/package.json b/package.json index f232d4301b..756604269d 100644 --- a/package.json +++ b/package.json @@ -123,6 +123,7 @@ "@sinonjs/fake-timers": "^7.0.2", "@types/classnames": "^2.2.11", "@types/counterpart": "^0.18.1", + "@types/diff-match-patch": "^1.0.5", "@types/flux": "^3.1.9", "@types/jest": "^26.0.20", "@types/linkifyjs": "^2.1.3", diff --git a/src/@types/diff-dom.ts b/src/@types/diff-dom.ts new file mode 100644 index 0000000000..884ee6126d --- /dev/null +++ b/src/@types/diff-dom.ts @@ -0,0 +1,50 @@ +/* +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. +*/ + +declare module "diff-dom" { + enum Action { + AddElement = "addElement", + AddTextElement = "addTextElement", + RemoveTextElement = "removeTextElement", + RemoveElement = "removeElement", + ReplaceElement = "replaceElement", + ModifyTextElement = "modifyTextElement", + AddAttribute = "addAttribute", + RemoveAttribute = "removeAttribute", + ModifyAttribute = "modifyAttribute", + } + + export interface IDiff { + action: Action; + name: string; + text?: string; + route: number[]; + value: string; + element: unknown; + oldValue: string; + newValue: string; + } + + interface IOpts { + } + + export class DiffDOM { + public constructor(opts?: IOpts); + public apply(tree: unknown, diffs: IDiff[]): unknown; + public undo(tree: unknown, diffs: IDiff[]): unknown; + public diff(a: HTMLElement | string, b: HTMLElement | string): IDiff[]; + } +} diff --git a/src/DecryptionFailureTracker.js b/src/DecryptionFailureTracker.ts similarity index 80% rename from src/DecryptionFailureTracker.js rename to src/DecryptionFailureTracker.ts index b02a5e937b..960d844e9e 100644 --- a/src/DecryptionFailureTracker.js +++ b/src/DecryptionFailureTracker.ts @@ -1,5 +1,5 @@ /* -Copyright 2018 New Vector Ltd +Copyright 2018 - 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,34 +14,40 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { MatrixError } from "matrix-js-sdk/src/http-api"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; + export class DecryptionFailure { - constructor(failedEventId, errorCode) { - this.failedEventId = failedEventId; - this.errorCode = errorCode; + public readonly ts: number; + + constructor(public readonly failedEventId: string, public readonly errorCode: string) { this.ts = Date.now(); } } +type Fn = (count: number, trackedErrCode: string) => void; +type ErrCodeMapFn = (errcode: string) => string; + export class DecryptionFailureTracker { // Array of items of type DecryptionFailure. Every `CHECK_INTERVAL_MS`, this list // is checked for failures that happened > `GRACE_PERIOD_MS` ago. Those that did // are accumulated in `failureCounts`. - failures = []; + public failures: DecryptionFailure[] = []; // A histogram of the number of failures that will be tracked at the next tracking // interval, split by failure error code. - failureCounts = { + public failureCounts: Record = { // [errorCode]: 42 }; // Event IDs of failures that were tracked previously - trackedEventHashMap = { + public trackedEventHashMap: Record = { // [eventId]: true }; // Set to an interval ID when `start` is called - checkInterval = null; - trackInterval = null; + public checkInterval: NodeJS.Timeout = null; + public trackInterval: NodeJS.Timeout = null; // Spread the load on `Analytics` by tracking at a low frequency, `TRACK_INTERVAL_MS`. static TRACK_INTERVAL_MS = 60000; @@ -67,7 +73,7 @@ export class DecryptionFailureTracker { * @param {function?} errorCodeMapFn The function used to map error codes to the * trackedErrorCode. If not provided, the `.code` of errors will be used. */ - constructor(fn, errorCodeMapFn) { + constructor(private readonly fn: Fn, private readonly errorCodeMapFn?: ErrCodeMapFn) { if (!fn || typeof fn !== 'function') { throw new Error('DecryptionFailureTracker requires tracking function'); } @@ -75,9 +81,6 @@ export class DecryptionFailureTracker { if (errorCodeMapFn && typeof errorCodeMapFn !== 'function') { throw new Error('DecryptionFailureTracker second constructor argument should be a function'); } - - this._trackDecryptionFailure = fn; - this._mapErrorCode = errorCodeMapFn; } // loadTrackedEventHashMap() { @@ -88,7 +91,7 @@ export class DecryptionFailureTracker { // localStorage.setItem('mx-decryption-failure-event-id-hashes', JSON.stringify(this.trackedEventHashMap)); // } - eventDecrypted(e, err) { + public eventDecrypted(e: MatrixEvent, err: MatrixError | Error): void { if (err) { this.addDecryptionFailure(new DecryptionFailure(e.getId(), err.code)); } else { @@ -97,18 +100,18 @@ export class DecryptionFailureTracker { } } - addDecryptionFailure(failure) { + public addDecryptionFailure(failure: DecryptionFailure): void { this.failures.push(failure); } - removeDecryptionFailuresForEvent(e) { + public removeDecryptionFailuresForEvent(e: MatrixEvent): void { this.failures = this.failures.filter((f) => f.failedEventId !== e.getId()); } /** * Start checking for and tracking failures. */ - start() { + public start(): void { this.checkInterval = setInterval( () => this.checkFailures(Date.now()), DecryptionFailureTracker.CHECK_INTERVAL_MS, @@ -123,7 +126,7 @@ export class DecryptionFailureTracker { /** * Clear state and stop checking for and tracking failures. */ - stop() { + public stop(): void { clearInterval(this.checkInterval); clearInterval(this.trackInterval); @@ -132,11 +135,11 @@ export class DecryptionFailureTracker { } /** - * Mark failures that occured before nowTs - GRACE_PERIOD_MS as failures that should be + * Mark failures that occurred before nowTs - GRACE_PERIOD_MS as failures that should be * tracked. Only mark one failure per event ID. * @param {number} nowTs the timestamp that represents the time now. */ - checkFailures(nowTs) { + public checkFailures(nowTs: number): void { const failuresGivenGrace = []; const failuresNotReady = []; while (this.failures.length > 0) { @@ -175,10 +178,10 @@ export class DecryptionFailureTracker { const dedupedFailures = dedupedFailuresMap.values(); - this._aggregateFailures(dedupedFailures); + this.aggregateFailures(dedupedFailures); } - _aggregateFailures(failures) { + private aggregateFailures(failures: DecryptionFailure[]): void { for (const failure of failures) { const errorCode = failure.errorCode; this.failureCounts[errorCode] = (this.failureCounts[errorCode] || 0) + 1; @@ -189,12 +192,12 @@ export class DecryptionFailureTracker { * If there are failures that should be tracked, call the given trackDecryptionFailure * function with the number of failures that should be tracked. */ - trackFailures() { + public trackFailures(): void { for (const errorCode of Object.keys(this.failureCounts)) { if (this.failureCounts[errorCode] > 0) { - const trackedErrorCode = this._mapErrorCode ? this._mapErrorCode(errorCode) : errorCode; + const trackedErrorCode = this.errorCodeMapFn ? this.errorCodeMapFn(errorCode) : errorCode; - this._trackDecryptionFailure(this.failureCounts[errorCode], trackedErrorCode); + this.fn(this.failureCounts[errorCode], trackedErrorCode); this.failureCounts[errorCode] = 0; } } diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index ef5ac383e3..5803029030 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -17,11 +17,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; +import React, { ReactNode } from 'react'; import sanitizeHtml from 'sanitize-html'; -import { IExtendedSanitizeOptions } from './@types/sanitize-html'; +import cheerio from 'cheerio'; import * as linkify from 'linkifyjs'; -import linkifyMatrix from './linkify-matrix'; import _linkifyElement from 'linkifyjs/element'; import _linkifyString from 'linkifyjs/string'; import classNames from 'classnames'; @@ -29,13 +28,15 @@ import EMOJIBASE_REGEX from 'emojibase-regex'; import url from 'url'; import katex from 'katex'; import { AllHtmlEntities } from 'html-entities'; -import SettingsStore from './settings/SettingsStore'; -import cheerio from 'cheerio'; +import { IContent } from 'matrix-js-sdk/src/models/event'; -import {tryTransformPermalinkToLocalHref} from "./utils/permalinks/Permalinks"; -import {SHORTCODE_TO_EMOJI, getEmojiFromUnicode} from "./emoji"; +import { IExtendedSanitizeOptions } from './@types/sanitize-html'; +import linkifyMatrix from './linkify-matrix'; +import SettingsStore from './settings/SettingsStore'; +import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks"; +import { SHORTCODE_TO_EMOJI, getEmojiFromUnicode } from "./emoji"; import ReplyThread from "./components/views/elements/ReplyThread"; -import {mediaFromMxc} from "./customisations/Media"; +import { mediaFromMxc } from "./customisations/Media"; linkifyMatrix(linkify); @@ -66,7 +67,7 @@ export const PERMITTED_URL_SCHEMES = ['http', 'https', 'ftp', 'mailto', 'magnet' * need emojification. * unicodeToImage uses this function. */ -function mightContainEmoji(str: string) { +function mightContainEmoji(str: string): boolean { return SURROGATE_PAIR_PATTERN.test(str) || SYMBOL_PATTERN.test(str); } @@ -76,7 +77,7 @@ function mightContainEmoji(str: string) { * @param {String} char The emoji character * @return {String} The shortcode (such as :thumbup:) */ -export function unicodeToShortcode(char: string) { +export function unicodeToShortcode(char: string): string { const data = getEmojiFromUnicode(char); return (data && data.shortcodes ? `:${data.shortcodes[0]}:` : ''); } @@ -87,7 +88,7 @@ export function unicodeToShortcode(char: string) { * @param {String} shortcode The shortcode (such as :thumbup:) * @return {String} The emoji character; null if none exists */ -export function shortcodeToUnicode(shortcode: string) { +export function shortcodeToUnicode(shortcode: string): string { shortcode = shortcode.slice(1, shortcode.length - 1); const data = SHORTCODE_TO_EMOJI.get(shortcode); return data ? data.unicode : null; @@ -124,13 +125,13 @@ export function processHtmlForSending(html: string): string { * Given an untrusted HTML string, return a React node with an sanitized version * of that HTML. */ -export function sanitizedHtmlNode(insaneHtml: string) { +export function sanitizedHtmlNode(insaneHtml: string): ReactNode { const saneHtml = sanitizeHtml(insaneHtml, sanitizeHtmlParams); return
    ; } -export function getHtmlText(insaneHtml: string) { +export function getHtmlText(insaneHtml: string): string { return sanitizeHtml(insaneHtml, { allowedTags: [], allowedAttributes: {}, @@ -148,7 +149,7 @@ export function getHtmlText(insaneHtml: string) { * other places we need to sanitise URLs. * @return true if permitted, otherwise false */ -export function isUrlPermitted(inputUrl: string) { +export function isUrlPermitted(inputUrl: string): boolean { try { const parsed = url.parse(inputUrl); if (!parsed.protocol) return false; @@ -351,13 +352,6 @@ class HtmlHighlighter extends BaseHighlighter { } } -interface IContent { - format?: string; - // eslint-disable-next-line camelcase - formatted_body?: string; - body: string; -} - interface IOpts { highlightLink?: string; disableBigEmoji?: boolean; @@ -367,6 +361,14 @@ interface IOpts { ref?: React.Ref; } +export interface IOptsReturnNode extends IOpts { + returnString: false; +} + +export interface IOptsReturnString extends IOpts { + returnString: true; +} + /* turn a matrix event body into html * * content: 'content' of the MatrixEvent @@ -380,6 +382,8 @@ interface IOpts { * opts.forComposerQuote: optional param to lessen the url rewriting done by sanitization, for quoting into composer * opts.ref: React ref to attach to any React components returned (not compatible with opts.returnString) */ +export function bodyToHtml(content: IContent, highlights: string[], opts: IOptsReturnString): string; +export function bodyToHtml(content: IContent, highlights: string[], opts: IOptsReturnNode): ReactNode; export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts = {}) { const isHtmlMessage = content.format === "org.matrix.custom.html" && content.formatted_body; let bodyHasEmoji = false; @@ -523,7 +527,7 @@ export function linkifyElement(element: HTMLElement, options = linkifyMatrix.opt * @param {object} [options] Options for linkifyString. Default: linkifyMatrix.options * @returns {string} */ -export function linkifyAndSanitizeHtml(dirtyHtml: string, options = linkifyMatrix.options) { +export function linkifyAndSanitizeHtml(dirtyHtml: string, options = linkifyMatrix.options): string { return sanitizeHtml(linkifyString(dirtyHtml, options), sanitizeHtmlParams); } @@ -534,7 +538,7 @@ export function linkifyAndSanitizeHtml(dirtyHtml: string, options = linkifyMatri * @param {Node} node * @returns {bool} */ -export function checkBlockNode(node: Node) { +export function checkBlockNode(node: Node): boolean { switch (node.nodeName) { case "H1": case "H2": diff --git a/src/Rooms.js b/src/Rooms.ts similarity index 89% rename from src/Rooms.js rename to src/Rooms.ts index 955498faaa..19d1c9ee05 100644 --- a/src/Rooms.js +++ b/src/Rooms.ts @@ -1,5 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd +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. @@ -14,7 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {MatrixClientPeg} from './MatrixClientPeg'; +import { Room } from "matrix-js-sdk/src/models/room"; + +import { MatrixClientPeg } from './MatrixClientPeg'; /** * Given a room object, return the alias we should use for it, @@ -25,11 +27,11 @@ import {MatrixClientPeg} from './MatrixClientPeg'; * @param {Object} room The room object * @returns {string} A display alias for the given room */ -export function getDisplayAliasForRoom(room) { +export function getDisplayAliasForRoom(room: Room): string { return room.getCanonicalAlias() || room.getAltAliases()[0]; } -export function looksLikeDirectMessageRoom(room, myUserId) { +export function looksLikeDirectMessageRoom(room: Room, myUserId: string): boolean { const myMembership = room.getMyMembership(); const me = room.getMember(myUserId); @@ -48,7 +50,7 @@ export function looksLikeDirectMessageRoom(room, myUserId) { return false; } -export function guessAndSetDMRoom(room, isDirect) { +export function guessAndSetDMRoom(room: Room, isDirect: boolean): Promise { let newTarget; if (isDirect) { const guessedUserId = guessDMRoomTargetId( @@ -70,7 +72,7 @@ export function guessAndSetDMRoom(room, isDirect) { this room as a DM room * @returns {object} A promise */ -export function setDMRoom(roomId, userId) { +export function setDMRoom(roomId: string, userId: string): Promise { if (MatrixClientPeg.get().isGuest()) { return Promise.resolve(); } @@ -114,7 +116,7 @@ export function setDMRoom(roomId, userId) { * @param {string} myUserId User ID of the current user * @returns {string} User ID of the user that the room is probably a DM with */ -function guessDMRoomTargetId(room, myUserId) { +function guessDMRoomTargetId(room: Room, myUserId: string): string { let oldestTs; let oldestUser; diff --git a/src/Unread.js b/src/Unread.ts similarity index 75% rename from src/Unread.js rename to src/Unread.ts index 25c425aa9a..b733f4175a 100644 --- a/src/Unread.js +++ b/src/Unread.ts @@ -1,5 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd +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. @@ -14,9 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {MatrixClientPeg} from "./MatrixClientPeg"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { EventType, MsgType } from "matrix-js-sdk/src/@types/event"; + +import { MatrixClientPeg } from "./MatrixClientPeg"; import shouldHideEvent from './shouldHideEvent'; -import {haveTileForEvent} from "./components/views/rooms/EventTile"; +import { haveTileForEvent } from "./components/views/rooms/EventTile"; /** * Returns true iff this event arriving in a room should affect the room's @@ -25,28 +29,33 @@ import {haveTileForEvent} from "./components/views/rooms/EventTile"; * @param {Object} ev The event * @returns {boolean} True if the given event should affect the unread message count */ -export function eventTriggersUnreadCount(ev) { +export function eventTriggersUnreadCount(ev: MatrixEvent): boolean { if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) { return false; - } else if (ev.getType() == 'm.room.member') { - return false; - } else if (ev.getType() == 'm.room.third_party_invite') { - return false; - } else if (ev.getType() == 'm.call.answer' || ev.getType() == 'm.call.hangup') { - return false; - } else if (ev.getType() == 'm.room.message' && ev.getContent().msgtype == 'm.notify') { - return false; - } else if (ev.getType() == 'm.room.aliases' || ev.getType() == 'm.room.canonical_alias') { - return false; - } else if (ev.getType() == 'm.room.server_acl') { - return false; - } else if (ev.isRedacted()) { - return false; } + + switch (ev.getType()) { + case EventType.RoomMember: + case EventType.RoomThirdPartyInvite: + case EventType.CallAnswer: + case EventType.CallHangup: + case EventType.RoomAliases: + case EventType.RoomCanonicalAlias: + case EventType.RoomServerAcl: + return false; + + case EventType.RoomMessage: + if (ev.getContent().msgtype === MsgType.Notice) { + return false; + } + break; + } + + if (ev.isRedacted()) return false; return haveTileForEvent(ev); } -export function doesRoomHaveUnreadMessages(room) { +export function doesRoomHaveUnreadMessages(room: Room): boolean { const myUserId = MatrixClientPeg.get().getUserId(); // get the most recent read receipt sent by our account. diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 0af2d3d635..27d628fecf 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -1461,7 +1461,7 @@ export default class MatrixChat extends React.PureComponent { }); const dft = new DecryptionFailureTracker((total, errorCode) => { - Analytics.trackEvent('E2E', 'Decryption failure', errorCode, total); + Analytics.trackEvent('E2E', 'Decryption failure', errorCode, String(total)); CountlyAnalytics.instance.track("decryption_failure", { errorCode }, null, { sum: total }); }, (errorCode) => { // Map JS-SDK error codes to tracker codes for aggregation diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx index 74609cca13..cb01df05d1 100644 --- a/src/components/views/rooms/AuxPanel.tsx +++ b/src/components/views/rooms/AuxPanel.tsx @@ -23,7 +23,7 @@ import RateLimitedFunc from '../../../ratelimitedfunc'; import SettingsStore from "../../../settings/SettingsStore"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import { UIFeature } from "../../../settings/UIFeature"; -import { ResizeNotifier } from "../../../utils/ResizeNotifier"; +import ResizeNotifier from "../../../utils/ResizeNotifier"; import CallViewForRoom from '../voip/CallViewForRoom'; import { objectHasDiff } from "../../../utils/objects"; import { replaceableComponent } from "../../../utils/replaceableComponent"; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 0099bf73fb..3d674efe04 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -17,7 +17,6 @@ limitations under the License. import React from 'react'; import classNames from "classnames"; - import { EventType } from "matrix-js-sdk/src/@types/event"; import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event"; import { Relations } from "matrix-js-sdk/src/models/relations"; @@ -29,24 +28,24 @@ import { hasText } from "../../../TextForEvent"; import * as sdk from "../../../index"; import dis from '../../../dispatcher/dispatcher'; import SettingsStore from "../../../settings/SettingsStore"; -import {Layout} from "../../../settings/Layout"; -import {formatTime} from "../../../DateUtils"; -import {MatrixClientPeg} from '../../../MatrixClientPeg'; -import {ALL_RULE_TYPES} from "../../../mjolnir/BanList"; +import { Layout } from "../../../settings/Layout"; +import { formatTime } from "../../../DateUtils"; +import { MatrixClientPeg } from '../../../MatrixClientPeg'; +import { ALL_RULE_TYPES } from "../../../mjolnir/BanList"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -import {E2E_STATE} from "./E2EIcon"; -import {toRem} from "../../../utils/units"; -import {WidgetType} from "../../../widgets/WidgetType"; +import { E2E_STATE } from "./E2EIcon"; +import { toRem } from "../../../utils/units"; +import { WidgetType } from "../../../widgets/WidgetType"; import RoomAvatar from "../avatars/RoomAvatar"; -import {WIDGET_LAYOUT_EVENT_TYPE} from "../../../stores/widgets/WidgetLayoutStore"; -import {objectHasDiff} from "../../../utils/objects"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { WIDGET_LAYOUT_EVENT_TYPE } from "../../../stores/widgets/WidgetLayoutStore"; +import { objectHasDiff } from "../../../utils/objects"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; import Tooltip from "../elements/Tooltip"; -import { EditorStateTransfer } from "../../../utils/EditorStateTransfer"; +import EditorStateTransfer from "../../../utils/EditorStateTransfer"; import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks'; -import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState"; +import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState"; import NotificationBadge from "./NotificationBadge"; -import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload"; +import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload"; import { Action } from '../../../dispatcher/actions'; const eventTileTypes = { diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 5a1c3a24b3..d277a69907 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -22,7 +22,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event"; import { _t, _td } from "../../../languageHandler"; import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex"; -import { ResizeNotifier } from "../../../utils/ResizeNotifier"; +import ResizeNotifier from "../../../utils/ResizeNotifier"; import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore"; import RoomViewStore from "../../../stores/RoomViewStore"; import { ITagMap } from "../../../stores/room-list/algorithms/models"; diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index ba8bbffbcc..61166b4230 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -45,7 +45,7 @@ import { ActionPayload } from "../../../dispatcher/payloads"; import { Enable, Resizable } from "re-resizable"; import { Direction } from "re-resizable/lib/resizer"; import { polyfillTouchEvent } from "../../../@types/polyfill"; -import { ResizeNotifier } from "../../../utils/ResizeNotifier"; +import ResizeNotifier from "../../../utils/ResizeNotifier"; import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore"; import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore"; import { arrayFastClone, arrayHasOrderChange } from "../../../utils/arrays"; diff --git a/src/languageHandler.tsx b/src/languageHandler.tsx index 16950dc008..cc129fb6b9 100644 --- a/src/languageHandler.tsx +++ b/src/languageHandler.tsx @@ -112,7 +112,7 @@ export interface IVariables { [key: string]: SubstitutionValue; } -type Tags = Record; +export type Tags = Record; export type TranslatedString = string | React.ReactNode; diff --git a/yarn.lock b/yarn.lock index 952d08d0f6..5bd409e612 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1479,6 +1479,11 @@ resolved "https://registry.yarnpkg.com/@types/counterpart/-/counterpart-0.18.1.tgz#b1b784d9e54d9879f0a8cb12f2caedab65430fe8" integrity sha512-PRuFlBBkvdDOtxlIASzTmkEFar+S66Ek48NVVTWMUjtJAdn5vyMSN8y6IZIoIymGpR36q2nZbIYazBWyFxL+IQ== +"@types/diff-match-patch@^1.0.32": + version "1.0.32" + resolved "https://registry.yarnpkg.com/@types/diff-match-patch/-/diff-match-patch-1.0.32.tgz#d9c3b8c914aa8229485351db4865328337a3d09f" + integrity sha512-bPYT5ECFiblzsVzyURaNhljBH2Gh1t9LowgUwciMrNAhFewLkHT2H0Mto07Y4/3KCOGZHRQll3CTtQZ0X11D/A== + "@types/events@^3.0.0": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" From 4a667942368305799e34ac8b0ea7d569a5207a36 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 17:26:19 +0100 Subject: [PATCH 0547/1270] update copy --- src/i18n/strings/en_EN.json | 2 +- src/settings/Settings.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index a9a0d15ac4..17160a6b89 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -796,7 +796,7 @@ "Show all rooms in Home": "Show all rooms in Home", "Show people in spaces": "Show people in spaces", "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.": "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.", - "Show notification badges for DMs in Spaces": "Show notification badges for DMs in Spaces", + "Show notification badges for People in Spaces": "Show notification badges for People in Spaces", "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode", "Send and receive voice messages": "Send and receive voice messages", "Render LaTeX maths in messages": "Render LaTeX maths in messages", diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 3937b7d821..f22882abc4 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -193,7 +193,7 @@ export const SETTINGS: {[setting: string]: ISetting} = { controller: new ReloadOnChangeController(), }, "feature_spaces.space_dm_badges": { - displayName: _td("Show notification badges for DMs in Spaces"), + displayName: _td("Show notification badges for People in Spaces"), supportedLevels: LEVELS_FEATURE, default: false, controller: new ReloadOnChangeController(), From 28c61cca2798f0c41fea47a468057a4a9ecf2c58 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 17:56:52 +0100 Subject: [PATCH 0548/1270] Remove pinned resolution for @types/react to 16.x --- package.json | 3 --- yarn.lock | 10 +--------- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/package.json b/package.json index 8ebb90f342..9ca1224baa 100644 --- a/package.json +++ b/package.json @@ -167,9 +167,6 @@ "typescript": "^4.1.3", "walk": "^2.3.14" }, - "resolutions": { - "**/@types/react": "^16.14" - }, "jest": { "testEnvironment": "./__test-utils__/environment.js", "testMatch": [ diff --git a/yarn.lock b/yarn.lock index 4f17b63337..b19a188014 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1634,15 +1634,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.14": - version "16.14.2" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c" - integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ== - dependencies: - "@types/prop-types" "*" - csstype "^3.0.2" - -"@types/react@^17.0.2": +"@types/react@*", "@types/react@^17.0.2": version "17.0.11" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451" integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA== From cd04fb76dc3dd2aa4b921e61a367015fd104f7df Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 18:01:29 +0100 Subject: [PATCH 0549/1270] Fix type error --- src/stores/SpaceStore.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index d371086b45..f11589485a 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -335,7 +335,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { // rootSpaces.push(space); // }); - this.orphanedRooms = new Set(orphanedRooms); + this.orphanedRooms = new Set(orphanedRooms.map(r => r.roomId)); this.rootSpaces = rootSpaces; this.parentMap = backrefs; From cecf0ce299b7208fc2fe03e54c7c7adbeb06a98d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 20:41:26 +0100 Subject: [PATCH 0550/1270] Convert MessagePanel, TimelinePanel, ScrollPanel, and more to Typescript --- src/@types/global.d.ts | 32 +- .../structures/AutoHideScrollbar.tsx | 6 +- .../{MessagePanel.js => MessagePanel.tsx} | 723 +++++++++--------- .../structures/NotificationPanel.tsx | 3 +- src/components/structures/RoomDirectory.tsx | 17 +- src/components/structures/RoomView.tsx | 7 +- .../{ScrollPanel.js => ScrollPanel.tsx} | 431 ++++++----- .../{TimelinePanel.js => TimelinePanel.tsx} | 637 ++++++++------- .../views/dialogs/ForwardDialog.tsx | 33 +- .../{ErrorBoundary.js => ErrorBoundary.tsx} | 35 +- .../views/elements/EventListSummary.tsx | 14 +- .../views/elements/EventTilePreview.tsx | 11 +- .../views/elements/MemberEventListSummary.tsx | 14 +- .../{DateSeparator.js => DateSeparator.tsx} | 26 +- ...ErrorBoundary.js => TileErrorBoundary.tsx} | 28 +- src/components/views/rooms/EventTile.tsx | 18 +- 16 files changed, 1087 insertions(+), 948 deletions(-) rename src/components/structures/{MessagePanel.js => MessagePanel.tsx} (64%) rename src/components/structures/{ScrollPanel.js => ScrollPanel.tsx} (73%) rename src/components/structures/{TimelinePanel.js => TimelinePanel.tsx} (75%) rename src/components/views/elements/{ErrorBoundary.js => ErrorBoundary.tsx} (80%) rename src/components/views/messages/{DateSeparator.js => DateSeparator.tsx} (82%) rename src/components/views/messages/{TileErrorBoundary.js => TileErrorBoundary.tsx} (77%) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 7eff341095..f75c17aaf4 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -16,6 +16,7 @@ limitations under the License. import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first import * as ModernizrStatic from "modernizr"; + import ContentMessages from "../ContentMessages"; import { IMatrixClientPeg } from "../MatrixClientPeg"; import ToastStore from "../stores/ToastStore"; @@ -23,25 +24,25 @@ import DeviceListener from "../DeviceListener"; import { RoomListStoreClass } from "../stores/room-list/RoomListStore"; import { PlatformPeg } from "../PlatformPeg"; import RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore"; -import {IntegrationManagers} from "../integrations/IntegrationManagers"; -import {ModalManager} from "../Modal"; +import { IntegrationManagers } from "../integrations/IntegrationManagers"; +import { ModalManager } from "../Modal"; import SettingsStore from "../settings/SettingsStore"; -import {ActiveRoomObserver} from "../ActiveRoomObserver"; -import {Notifier} from "../Notifier"; -import type {Renderer} from "react-dom"; +import { ActiveRoomObserver } from "../ActiveRoomObserver"; +import { Notifier } from "../Notifier"; +import type { Renderer } from "react-dom"; import RightPanelStore from "../stores/RightPanelStore"; import WidgetStore from "../stores/WidgetStore"; import CallHandler from "../CallHandler"; -import {Analytics} from "../Analytics"; +import { Analytics } from "../Analytics"; import CountlyAnalytics from "../CountlyAnalytics"; import UserActivity from "../UserActivity"; -import {ModalWidgetStore} from "../stores/ModalWidgetStore"; +import { ModalWidgetStore } from "../stores/ModalWidgetStore"; import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore"; import VoipUserMapper from "../VoipUserMapper"; -import {SpaceStoreClass} from "../stores/SpaceStore"; +import { SpaceStoreClass } from "../stores/SpaceStore"; import TypingStore from "../stores/TypingStore"; import { EventIndexPeg } from "../indexing/EventIndexPeg"; -import {VoiceRecordingStore} from "../stores/VoiceRecordingStore"; +import { VoiceRecordingStore } from "../stores/VoiceRecordingStore"; import PerformanceMonitor from "../performance"; import UIStore from "../stores/UIStore"; import { SetupEncryptionStore } from "../stores/SetupEncryptionStore"; @@ -127,11 +128,24 @@ declare global { setSinkId(outputId: string); } + // Add Chrome-specific `instant` ScrollBehaviour + type _ScrollBehavior = ScrollBehavior | "instant"; + + interface _ScrollOptions { + behavior?: _ScrollBehavior; + } + + interface _ScrollIntoViewOptions extends _ScrollOptions { + block?: ScrollLogicalPosition; + inline?: ScrollLogicalPosition; + } + interface Element { // Safari & IE11 only have this prefixed: we used prefixed versions // previously so let's continue to support them for now webkitRequestFullScreen(options?: FullscreenOptions): Promise; msRequestFullscreen(options?: FullscreenOptions): Promise; + scrollIntoView(arg?: boolean | _ScrollIntoViewOptions): void; } interface Error { diff --git a/src/components/structures/AutoHideScrollbar.tsx b/src/components/structures/AutoHideScrollbar.tsx index 66f998b616..3b7fee3a08 100644 --- a/src/components/structures/AutoHideScrollbar.tsx +++ b/src/components/structures/AutoHideScrollbar.tsx @@ -15,12 +15,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { WheelEvent } from "react"; interface IProps { className?: string; - onScroll?: () => void; - onWheel?: () => void; + onScroll?: (event: Event) => void; + onWheel?: (event: WheelEvent) => void; style?: React.CSSProperties tabIndex?: number, wrappedRef?: (ref: HTMLDivElement) => void; diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.tsx similarity index 64% rename from src/components/structures/MessagePanel.js rename to src/components/structures/MessagePanel.tsx index eb9611a6fc..492d9d9a53 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.tsx @@ -1,7 +1,5 @@ /* -Copyright 2016 OpenMarket Ltd -Copyright 2018 New Vector Ltd -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2016 - 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. @@ -16,32 +14,46 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {createRef} from 'react'; +import React, { createRef, KeyboardEvent, ReactNode, SyntheticEvent, TransitionEvent } from 'react'; import ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; -import shouldHideEvent from '../../shouldHideEvent'; -import {wantsDateSeparator} from '../../DateUtils'; -import * as sdk from '../../index'; +import { Room } from 'matrix-js-sdk/src/models/room'; +import { EventType } from 'matrix-js-sdk/src/@types/event'; +import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; +import { Relations } from "matrix-js-sdk/src/models/relations"; +import { RoomMember } from 'matrix-js-sdk/src/models/room-member'; -import {MatrixClientPeg} from '../../MatrixClientPeg'; +import shouldHideEvent from '../../shouldHideEvent'; +import { wantsDateSeparator } from '../../DateUtils'; +import { MatrixClientPeg } from '../../MatrixClientPeg'; import SettingsStore from '../../settings/SettingsStore'; import RoomContext from "../../contexts/RoomContext"; -import {Layout, LayoutPropType} from "../../settings/Layout"; -import {_t} from "../../languageHandler"; -import {haveTileForEvent} from "../views/rooms/EventTile"; -import {hasText} from "../../TextForEvent"; +import { Layout } from "../../settings/Layout"; +import { _t } from "../../languageHandler"; +import EventTile, { haveTileForEvent, IReadReceiptProps, TileShape } from "../views/rooms/EventTile"; +import { hasText } from "../../TextForEvent"; import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer"; import DMRoomMap from "../../utils/DMRoomMap"; import NewRoomIntro from "../views/rooms/NewRoomIntro"; -import {replaceableComponent} from "../../utils/replaceableComponent"; +import { replaceableComponent } from "../../utils/replaceableComponent"; import defaultDispatcher from '../../dispatcher/dispatcher'; +import WhoIsTypingTile from '../views/rooms/WhoIsTypingTile'; +import ScrollPanel, { IScrollState } from "./ScrollPanel"; +import EventListSummary from '../views/elements/EventListSummary'; +import MemberEventListSummary from '../views/elements/MemberEventListSummary'; +import DateSeparator from '../views/messages/DateSeparator'; +import ErrorBoundary from '../views/elements/ErrorBoundary'; +import ResizeNotifier from "../../utils/ResizeNotifier"; +import Spinner from "../views/elements/Spinner"; +import TileErrorBoundary from '../views/messages/TileErrorBoundary'; +import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks"; +import EditorStateTransfer from "../../utils/EditorStateTransfer"; const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes -const continuedTypes = ['m.sticker', 'm.room.message']; +const continuedTypes = [EventType.Sticker, EventType.RoomMessage]; // check if there is a previous event and it has the same sender as this event // and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL -function shouldFormContinuation(prevEvent, mxEvent) { +function shouldFormContinuation(prevEvent: MatrixEvent, mxEvent: MatrixEvent): boolean { // sanity check inputs if (!prevEvent || !prevEvent.sender || !mxEvent.sender) return false; // check if within the max continuation period @@ -52,8 +64,8 @@ function shouldFormContinuation(prevEvent, mxEvent) { // Some events should appear as continuations from previous events of different types. if (mxEvent.getType() !== prevEvent.getType() && - (!continuedTypes.includes(mxEvent.getType()) || - !continuedTypes.includes(prevEvent.getType()))) return false; + (!continuedTypes.includes(mxEvent.getType() as EventType) || + !continuedTypes.includes(prevEvent.getType() as EventType))) return false; // Check if the sender is the same and hasn't changed their displayname/avatar between these events if (mxEvent.sender.userId !== prevEvent.sender.userId || @@ -66,96 +78,161 @@ function shouldFormContinuation(prevEvent, mxEvent) { return true; } -const isMembershipChange = (e) => e.getType() === 'm.room.member' || e.getType() === 'm.room.third_party_invite'; +const isMembershipChange = (e: MatrixEvent): boolean => { + return e.getType() === EventType.RoomMember || e.getType() === EventType.RoomThirdPartyInvite; +} + +interface IProps { + // the list of MatrixEvents to display + events: MatrixEvent[]; + + // true to give the component a 'display: none' style. + hidden?: boolean; + + // true to show a spinner at the top of the timeline to indicate + // back-pagination in progress + backPaginating?: boolean; + + // true to show a spinner at the end of the timeline to indicate + // forward-pagination in progress + forwardPaginating?: boolean; + + // ID of an event to highlight. If undefined, no event will be highlighted. + highlightedEventId?: string; + + // The room these events are all in together, if any. + // (The notification panel won't have a room here, for example.) + room?: Room; + + // Should we show URL Previews + showUrlPreview?: boolean; + + // event after which we should show a read marker + readMarkerEventId?: string; + + // whether the read marker should be visible + readMarkerVisible?: boolean; + + // the userid of our user. This is used to suppress the read marker + // for pending messages. + ourUserId?: string; + + // true to suppress the date at the start of the timeline + suppressFirstDateSeparator?: boolean; + + // whether to show read receipts + showReadReceipts?: boolean; + + // true if updates to the event list should cause the scroll panel to + // scroll down when we are at the bottom of the window. See ScrollPanel + // for more details. + stickyBottom?: boolean; + + // className for the panel + className: string; + + // shape parameter to be passed to EventTiles + tileShape?: TileShape; + + // show twelve hour timestamps + isTwelveHour?: boolean; + + // show timestamps always + alwaysShowTimestamps?: boolean; + + // whether to show reactions for an event + showReactions?: boolean; + + // which layout to use + layout?: Layout; + + // whether or not to show flair at all + enableFlair?: boolean; + + resizeNotifier: ResizeNotifier; + permalinkCreator?: RoomPermalinkCreator; + editState?: EditorStateTransfer; + + // callback which is called when the panel is scrolled. + onScroll?(event: Event): void; + + // callback which is called when the user interacts with the room timeline + onUserScroll(event: SyntheticEvent): void; + + // callback which is called when more content is needed. + onFillRequest?(backwards: boolean): Promise; + + // helper function to access relations for an event + onUnfillRequest?(backwards: boolean, scrollToken: string): void; + + getRelationsForEvent?(eventId: string, relationType: string, eventType: string): Relations; +} + +interface IState { + ghostReadMarkers: string[]; + showTypingNotifications: boolean; +} + +interface IReadReceiptForUser { + lastShownEventId: string; + receipt: IReadReceiptProps; +} /* (almost) stateless UI component which builds the event tiles in the room timeline. */ @replaceableComponent("structures.MessagePanel") -export default class MessagePanel extends React.Component { - static propTypes = { - // true to give the component a 'display: none' style. - hidden: PropTypes.bool, - - // true to show a spinner at the top of the timeline to indicate - // back-pagination in progress - backPaginating: PropTypes.bool, - - // true to show a spinner at the end of the timeline to indicate - // forward-pagination in progress - forwardPaginating: PropTypes.bool, - - // the list of MatrixEvents to display - events: PropTypes.array.isRequired, - - // ID of an event to highlight. If undefined, no event will be highlighted. - highlightedEventId: PropTypes.string, - - // The room these events are all in together, if any. - // (The notification panel won't have a room here, for example.) - room: PropTypes.object, - - // Should we show URL Previews - showUrlPreview: PropTypes.bool, - - // event after which we should show a read marker - readMarkerEventId: PropTypes.string, - - // whether the read marker should be visible - readMarkerVisible: PropTypes.bool, - - // the userid of our user. This is used to suppress the read marker - // for pending messages. - ourUserId: PropTypes.string, - - // true to suppress the date at the start of the timeline - suppressFirstDateSeparator: PropTypes.bool, - - // whether to show read receipts - showReadReceipts: PropTypes.bool, - - // true if updates to the event list should cause the scroll panel to - // scroll down when we are at the bottom of the window. See ScrollPanel - // for more details. - stickyBottom: PropTypes.bool, - - // callback which is called when the panel is scrolled. - onScroll: PropTypes.func, - - // callback which is called when the user interacts with the room timeline - onUserScroll: PropTypes.func, - - // callback which is called when more content is needed. - onFillRequest: PropTypes.func, - - // className for the panel - className: PropTypes.string.isRequired, - - // shape parameter to be passed to EventTiles - tileShape: PropTypes.string, - - // show twelve hour timestamps - isTwelveHour: PropTypes.bool, - - // show timestamps always - alwaysShowTimestamps: PropTypes.bool, - - // helper function to access relations for an event - getRelationsForEvent: PropTypes.func, - - // whether to show reactions for an event - showReactions: PropTypes.bool, - - // which layout to use - layout: LayoutPropType, - - // whether or not to show flair at all - enableFlair: PropTypes.bool, - }; - +export default class MessagePanel extends React.Component { static contextType = RoomContext; - constructor(props) { - super(props); + // opaque readreceipt info for each userId; used by ReadReceiptMarker + // to manage its animations + private readonly readReceiptMap: Record = {}; + + // Track read receipts by event ID. For each _shown_ event ID, we store + // the list of read receipts to display: + // [ + // { + // userId: string, + // member: RoomMember, + // ts: number, + // }, + // ] + // This is recomputed on each render. It's only stored on the component + // for ease of passing the data around since it's computed in one pass + // over all events. + private readReceiptsByEvent: Record = {}; + + // Track read receipts by user ID. For each user ID we've ever shown a + // a read receipt for, we store an object: + // { + // lastShownEventId: string, + // receipt: { + // userId: string, + // member: RoomMember, + // ts: number, + // }, + // } + // so that we can always keep receipts displayed by reverting back to + // the last shown event for that user ID when needed. This may feel like + // it duplicates the receipt storage in the room, but at this layer, we + // are tracking _shown_ event IDs, which the JS SDK knows nothing about. + // This is recomputed on each render, using the data from the previous + // render as our fallback for any user IDs we can't match a receipt to a + // displayed event in the current render cycle. + private readReceiptsByUserId: Record = {}; + + private readonly showHiddenEventsInTimeline: boolean; + private isMounted = false; + + private readMarkerNode = createRef(); + private whoIsTyping = createRef(); + private scrollPanel = createRef(); + + private readonly showTypingNotificationsWatcherRef: string; + private eventNodes: Record; + + constructor(props, context) { + super(props, context); this.state = { // previous positions the read marker has been in, so we can @@ -164,65 +241,21 @@ export default class MessagePanel extends React.Component { showTypingNotifications: SettingsStore.getValue("showTypingNotifications"), }; - // opaque readreceipt info for each userId; used by ReadReceiptMarker - // to manage its animations - this._readReceiptMap = {}; - - // Track read receipts by event ID. For each _shown_ event ID, we store - // the list of read receipts to display: - // [ - // { - // userId: string, - // member: RoomMember, - // ts: number, - // }, - // ] - // This is recomputed on each render. It's only stored on the component - // for ease of passing the data around since it's computed in one pass - // over all events. - this._readReceiptsByEvent = {}; - - // Track read receipts by user ID. For each user ID we've ever shown a - // a read receipt for, we store an object: - // { - // lastShownEventId: string, - // receipt: { - // userId: string, - // member: RoomMember, - // ts: number, - // }, - // } - // so that we can always keep receipts displayed by reverting back to - // the last shown event for that user ID when needed. This may feel like - // it duplicates the receipt storage in the room, but at this layer, we - // are tracking _shown_ event IDs, which the JS SDK knows nothing about. - // This is recomputed on each render, using the data from the previous - // render as our fallback for any user IDs we can't match a receipt to a - // displayed event in the current render cycle. - this._readReceiptsByUserId = {}; - // Cache hidden events setting on mount since Settings is expensive to // query, and we check this in a hot code path. - this._showHiddenEventsInTimeline = - SettingsStore.getValue("showHiddenEventsInTimeline"); + this.showHiddenEventsInTimeline = SettingsStore.getValue("showHiddenEventsInTimeline"); - this._isMounted = false; - - this._readMarkerNode = createRef(); - this._whoIsTyping = createRef(); - this._scrollPanel = createRef(); - - this._showTypingNotificationsWatcherRef = + this.showTypingNotificationsWatcherRef = SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange); } componentDidMount() { - this._isMounted = true; + this.isMounted = true; } componentWillUnmount() { - this._isMounted = false; - SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef); + this.isMounted = false; + SettingsStore.unwatchSetting(this.showTypingNotificationsWatcherRef); } componentDidUpdate(prevProps, prevState) { @@ -235,14 +268,14 @@ export default class MessagePanel extends React.Component { } } - onShowTypingNotificationsChange = () => { + private onShowTypingNotificationsChange = (): void => { this.setState({ showTypingNotifications: SettingsStore.getValue("showTypingNotifications"), }); }; /* get the DOM node representing the given event */ - getNodeForEventId(eventId) { + public getNodeForEventId(eventId: string): HTMLElement { if (!this.eventNodes) { return undefined; } @@ -252,8 +285,8 @@ export default class MessagePanel extends React.Component { /* return true if the content is fully scrolled down right now; else false. */ - isAtBottom() { - return this._scrollPanel.current && this._scrollPanel.current.isAtBottom(); + public isAtBottom(): boolean { + return this.scrollPanel.current?.isAtBottom(); } /* get the current scroll state. See ScrollPanel.getScrollState for @@ -261,8 +294,8 @@ export default class MessagePanel extends React.Component { * * returns null if we are not mounted. */ - getScrollState() { - return this._scrollPanel.current ? this._scrollPanel.current.getScrollState() : null; + public getScrollState(): IScrollState { + return this.scrollPanel.current?.getScrollState() ?? null; } // returns one of: @@ -271,15 +304,15 @@ export default class MessagePanel extends React.Component { // -1: read marker is above the window // 0: read marker is within the window // +1: read marker is below the window - getReadMarkerPosition() { - const readMarker = this._readMarkerNode.current; - const messageWrapper = this._scrollPanel.current; + public getReadMarkerPosition(): number { + const readMarker = this.readMarkerNode.current; + const messageWrapper = this.scrollPanel.current; if (!readMarker || !messageWrapper) { return null; } - const wrapperRect = ReactDOM.findDOMNode(messageWrapper).getBoundingClientRect(); + const wrapperRect = (ReactDOM.findDOMNode(messageWrapper) as HTMLElement).getBoundingClientRect(); const readMarkerRect = readMarker.getBoundingClientRect(); // the read-marker pretends to have zero height when it is actually @@ -295,17 +328,17 @@ export default class MessagePanel extends React.Component { /* jump to the top of the content. */ - scrollToTop() { - if (this._scrollPanel.current) { - this._scrollPanel.current.scrollToTop(); + public scrollToTop(): void { + if (this.scrollPanel.current) { + this.scrollPanel.current.scrollToTop(); } } /* jump to the bottom of the content. */ - scrollToBottom() { - if (this._scrollPanel.current) { - this._scrollPanel.current.scrollToBottom(); + public scrollToBottom(): void { + if (this.scrollPanel.current) { + this.scrollPanel.current.scrollToBottom(); } } @@ -314,9 +347,9 @@ export default class MessagePanel extends React.Component { * * @param {number} mult: -1 to page up, +1 to page down */ - scrollRelative(mult) { - if (this._scrollPanel.current) { - this._scrollPanel.current.scrollRelative(mult); + public scrollRelative(mult: number): void { + if (this.scrollPanel.current) { + this.scrollPanel.current.scrollRelative(mult); } } @@ -325,9 +358,9 @@ export default class MessagePanel extends React.Component { * * @param {KeyboardEvent} ev: the keyboard event to handle */ - handleScrollKey(ev) { - if (this._scrollPanel.current) { - this._scrollPanel.current.handleScrollKey(ev); + public handleScrollKey(ev: KeyboardEvent): void { + if (this.scrollPanel.current) { + this.scrollPanel.current.handleScrollKey(ev); } } @@ -341,38 +374,41 @@ export default class MessagePanel extends React.Component { * node (specifically, the bottom of it) will be positioned. If omitted, it * defaults to 0. */ - scrollToEvent(eventId, pixelOffset, offsetBase) { - if (this._scrollPanel.current) { - this._scrollPanel.current.scrollToToken(eventId, pixelOffset, offsetBase); + public scrollToEvent(eventId: string, pixelOffset: number, offsetBase: number): void { + if (this.scrollPanel.current) { + this.scrollPanel.current.scrollToToken(eventId, pixelOffset, offsetBase); } } - scrollToEventIfNeeded(eventId) { + public scrollToEventIfNeeded(eventId: string): void { const node = this.eventNodes[eventId]; if (node) { - node.scrollIntoView({block: "nearest", behavior: "instant"}); + node.scrollIntoView({ + block: "nearest", + behavior: "instant", + }); } } /* check the scroll state and send out pagination requests if necessary. */ - checkFillState() { - if (this._scrollPanel.current) { - this._scrollPanel.current.checkFillState(); + public checkFillState(): void { + if (this.scrollPanel.current) { + this.scrollPanel.current.checkFillState(); } } - _isUnmounting = () => { - return !this._isMounted; + private isUnmounting = (): boolean => { + return !this.isMounted; }; // TODO: Implement granular (per-room) hide options - _shouldShowEvent(mxEv) { + public shouldShowEvent(mxEv: MatrixEvent): boolean { if (mxEv.sender && MatrixClientPeg.get().isUserIgnored(mxEv.sender.userId)) { return false; // ignored = no show (only happens if the ignore happens after an event was received) } - if (this._showHiddenEventsInTimeline) { + if (this.showHiddenEventsInTimeline) { return true; } @@ -386,7 +422,7 @@ export default class MessagePanel extends React.Component { return !shouldHideEvent(mxEv, this.context); } - _readMarkerForEvent(eventId, isLastEvent) { + public readMarkerForEvent(eventId: string, isLastEvent: boolean): ReactNode { const visible = !isLastEvent && this.props.readMarkerVisible; if (this.props.readMarkerEventId === eventId) { @@ -405,7 +441,7 @@ export default class MessagePanel extends React.Component { return (
  • @@ -424,8 +460,8 @@ export default class MessagePanel extends React.Component { // transition (ie. the read markers do but the event tiles do not) // and TransitionGroup requires that all its children are Transitions. const hr =
    ; @@ -445,7 +481,7 @@ export default class MessagePanel extends React.Component { return null; } - _collectGhostReadMarker = (node) => { + private collectGhostReadMarker = (node: HTMLElement): void => { if (node) { // now the element has appeared, change the style which will trigger the CSS transition requestAnimationFrame(() => { @@ -455,15 +491,15 @@ export default class MessagePanel extends React.Component { } }; - _onGhostTransitionEnd = (ev) => { + private onGhostTransitionEnd = (ev: TransitionEvent): void => { // we can now clean up the ghost element - const finishedEventId = ev.target.dataset.eventid; + const finishedEventId = (ev.target as HTMLElement).dataset.eventid; this.setState({ ghostReadMarkers: this.state.ghostReadMarkers.filter(eid => eid !== finishedEventId), }); }; - _getNextEventInfo(arr, i) { + private getNextEventInfo(arr: MatrixEvent[], i: number): { nextEvent: MatrixEvent, nextTile: MatrixEvent } { const nextEvent = i < arr.length - 1 ? arr[i + 1] : null; @@ -472,16 +508,16 @@ export default class MessagePanel extends React.Component { // when rendering the tile. The shouldShowEvent function is pretty quick at what // it does, so this should have no significant cost even when a room is used for // not-chat purposes. - const nextTile = arr.slice(i + 1).find(e => this._shouldShowEvent(e)); + const nextTile = arr.slice(i + 1).find(e => this.shouldShowEvent(e)); - return {nextEvent, nextTile}; + return { nextEvent, nextTile }; } - get _roomHasPendingEdit() { + private get roomHasPendingEdit(): string { return this.props.room && localStorage.getItem(`mx_edit_room_${this.props.room.roomId}`); } - _getEventTiles() { + private getEventTiles(): ReactNode[] { this.eventNodes = {}; let i; @@ -497,7 +533,7 @@ export default class MessagePanel extends React.Component { let lastShownNonLocalEchoIndex = -1; for (i = this.props.events.length-1; i >= 0; i--) { const mxEv = this.props.events[i]; - if (!this._shouldShowEvent(mxEv)) { + if (!this.shouldShowEvent(mxEv)) { continue; } @@ -521,18 +557,18 @@ export default class MessagePanel extends React.Component { // Note: the EventTile might still render a "sent/sending receipt" independent of // this information. When not providing read receipt information, the tile is likely // to assume that sent receipts are to be shown more often. - this._readReceiptsByEvent = {}; + this.readReceiptsByEvent = {}; if (this.props.showReadReceipts) { - this._readReceiptsByEvent = this._getReadReceiptsByShownEvent(); + this.readReceiptsByEvent = this.getReadReceiptsByShownEvent(); } - let grouper = null; + let grouper: BaseGrouper = null; for (i = 0; i < this.props.events.length; i++) { const mxEv = this.props.events[i]; const eventId = mxEv.getId(); const last = (mxEv === lastShownEvent); - const {nextEvent, nextTile} = this._getNextEventInfo(this.props.events, i); + const { nextEvent, nextTile } = this.getNextEventInfo(this.props.events, i); if (grouper) { if (grouper.shouldGroup(mxEv)) { @@ -553,26 +589,25 @@ export default class MessagePanel extends React.Component { } } if (!grouper) { - const wantTile = this._shouldShowEvent(mxEv); + const wantTile = this.shouldShowEvent(mxEv); const isGrouped = false; if (wantTile) { - // make sure we unpack the array returned by _getTilesForEvent, + // make sure we unpack the array returned by getTilesForEvent, // otherwise react will auto-generate keys and we will end up // replacing all of the DOM elements every time we paginate. - ret.push(...this._getTilesForEvent(prevEvent, mxEv, last, isGrouped, - nextEvent, nextTile)); + ret.push(...this.getTilesForEvent(prevEvent, mxEv, last, isGrouped, nextEvent, nextTile)); prevEvent = mxEv; } - const readMarker = this._readMarkerForEvent(eventId, i >= lastShownNonLocalEchoIndex); + const readMarker = this.readMarkerForEvent(eventId, i >= lastShownNonLocalEchoIndex); if (readMarker) ret.push(readMarker); } } - if (!this.props.editState && this._roomHasPendingEdit) { + if (!this.props.editState && this.roomHasPendingEdit) { defaultDispatcher.dispatch({ action: "edit_event", - event: this.props.room.findEventById(this._roomHasPendingEdit), + event: this.props.room.findEventById(this.roomHasPendingEdit), }); } @@ -583,10 +618,14 @@ export default class MessagePanel extends React.Component { return ret; } - _getTilesForEvent(prevEvent, mxEv, last, isGrouped=false, nextEvent, nextEventWithTile) { - const TileErrorBoundary = sdk.getComponent('messages.TileErrorBoundary'); - const EventTile = sdk.getComponent('rooms.EventTile'); - const DateSeparator = sdk.getComponent('messages.DateSeparator'); + public getTilesForEvent( + prevEvent: MatrixEvent, + mxEv: MatrixEvent, + last = false, + isGrouped = false, + nextEvent?: MatrixEvent, + nextEventWithTile?: MatrixEvent, + ): ReactNode[] { const ret = []; const isEditing = this.props.editState && @@ -601,7 +640,7 @@ export default class MessagePanel extends React.Component { } // do we need a date separator since the last event? - const wantsDateSeparator = this._wantsDateSeparator(prevEvent, eventDate); + const wantsDateSeparator = this.wantsDateSeparator(prevEvent, eventDate); if (wantsDateSeparator && !isGrouped) { const dateSeparator =
    • ; ret.push(dateSeparator); @@ -609,7 +648,7 @@ export default class MessagePanel extends React.Component { let willWantDateSeparator = false; if (nextEvent) { - willWantDateSeparator = this._wantsDateSeparator(mxEv, nextEvent.getDate() || new Date()); + willWantDateSeparator = this.wantsDateSeparator(mxEv, nextEvent.getDate() || new Date()); } // is this a continuation of the previous message? @@ -618,12 +657,12 @@ export default class MessagePanel extends React.Component { const eventId = mxEv.getId(); const highlight = (eventId === this.props.highlightedEventId); - const readReceipts = this._readReceiptsByEvent[eventId]; + const readReceipts = this.readReceiptsByEvent[eventId]; let isLastSuccessful = false; const isSentState = s => !s || s === 'sent'; const isSent = isSentState(mxEv.getAssociatedStatus()); - const hasNextEvent = nextEvent && this._shouldShowEvent(nextEvent); + const hasNextEvent = nextEvent && this.shouldShowEvent(nextEvent); if (!hasNextEvent && isSent) { isLastSuccessful = true; } else if (hasNextEvent && isSent && !isSentState(nextEvent.getAssociatedStatus())) { @@ -649,18 +688,18 @@ export default class MessagePanel extends React.Component { { if (!r.userId || r.type !== "m.read" || r.userId === myUserId) { return; // ignore non-read receipts and receipts from self. @@ -721,13 +760,13 @@ export default class MessagePanel extends React.Component { // Get an object that maps from event ID to a list of read receipts that // should be shown next to that event. If a hidden event has read receipts, // they are folded into the receipts of the last shown event. - _getReadReceiptsByShownEvent() { + private getReadReceiptsByShownEvent(): Record { const receiptsByEvent = {}; const receiptsByUserId = {}; let lastShownEventId; for (const event of this.props.events) { - if (this._shouldShowEvent(event)) { + if (this.shouldShowEvent(event)) { lastShownEventId = event.getId(); } if (!lastShownEventId) { @@ -735,7 +774,7 @@ export default class MessagePanel extends React.Component { } const existingReceipts = receiptsByEvent[lastShownEventId] || []; - const newReceipts = this._getReadReceiptsForEvent(event); + const newReceipts = this.getReadReceiptsForEvent(event); receiptsByEvent[lastShownEventId] = existingReceipts.concat(newReceipts); // Record these receipts along with their last shown event ID for @@ -754,16 +793,16 @@ export default class MessagePanel extends React.Component { // someone which had one in the last. By looking through our previous // mapping of receipts by user ID, we can cover recover any receipts // that would have been lost by using the same event ID from last time. - for (const userId in this._readReceiptsByUserId) { + for (const userId in this.readReceiptsByUserId) { if (receiptsByUserId[userId]) { continue; } - const { lastShownEventId, receipt } = this._readReceiptsByUserId[userId]; + const { lastShownEventId, receipt } = this.readReceiptsByUserId[userId]; const existingReceipts = receiptsByEvent[lastShownEventId] || []; receiptsByEvent[lastShownEventId] = existingReceipts.concat(receipt); receiptsByUserId[userId] = { lastShownEventId, receipt }; } - this._readReceiptsByUserId = receiptsByUserId; + this.readReceiptsByUserId = receiptsByUserId; // After grouping receipts by shown events, do another pass to sort each // receipt list. @@ -776,21 +815,21 @@ export default class MessagePanel extends React.Component { return receiptsByEvent; } - _collectEventNode = (eventId, node) => { + private collectEventNode = (eventId: string, node: EventTile): void => { this.eventNodes[eventId] = node?.ref?.current; } // once dynamic content in the events load, make the scrollPanel check the // scroll offsets. - _onHeightChanged = () => { - const scrollPanel = this._scrollPanel.current; + public onHeightChanged = (): void => { + const scrollPanel = this.scrollPanel.current; if (scrollPanel) { scrollPanel.checkScroll(); } }; - _onTypingShown = () => { - const scrollPanel = this._scrollPanel.current; + private onTypingShown = (): void => { + const scrollPanel = this.scrollPanel.current; // this will make the timeline grow, so checkScroll scrollPanel.checkScroll(); if (scrollPanel && scrollPanel.getScrollState().stuckAtBottom) { @@ -798,8 +837,8 @@ export default class MessagePanel extends React.Component { } }; - _onTypingHidden = () => { - const scrollPanel = this._scrollPanel.current; + private onTypingHidden = (): void => { + const scrollPanel = this.scrollPanel.current; if (scrollPanel) { // as hiding the typing notifications doesn't // update the scrollPanel, we tell it to apply @@ -811,12 +850,12 @@ export default class MessagePanel extends React.Component { } }; - updateTimelineMinHeight() { - const scrollPanel = this._scrollPanel.current; + public updateTimelineMinHeight(): void { + const scrollPanel = this.scrollPanel.current; if (scrollPanel) { const isAtBottom = scrollPanel.isAtBottom(); - const whoIsTyping = this._whoIsTyping.current; + const whoIsTyping = this.whoIsTyping.current; const isTypingVisible = whoIsTyping && whoIsTyping.isVisible(); // when messages get added to the timeline, // but somebody else is still typing, @@ -828,18 +867,14 @@ export default class MessagePanel extends React.Component { } } - onTimelineReset() { - const scrollPanel = this._scrollPanel.current; + public onTimelineReset(): void { + const scrollPanel = this.scrollPanel.current; if (scrollPanel) { scrollPanel.clearPreventShrinking(); } } render() { - const ErrorBoundary = sdk.getComponent('elements.ErrorBoundary'); - const ScrollPanel = sdk.getComponent("structures.ScrollPanel"); - const WhoIsTypingTile = sdk.getComponent("rooms.WhoIsTypingTile"); - const Spinner = sdk.getComponent("elements.Spinner"); let topSpinner; let bottomSpinner; if (this.props.backPaginating) { @@ -855,9 +890,9 @@ export default class MessagePanel extends React.Component { if (this.props.room && !this.props.tileShape && this.state.showTypingNotifications) { whoIsTyping = ( + onShown={this.onTypingShown} + onHidden={this.onTypingHidden} + ref={this.whoIsTyping} /> ); } @@ -873,11 +908,10 @@ export default class MessagePanel extends React.Component { return ( { topSpinner } - { this._getEventTiles() } + { this.getEventTiles() } { whoIsTyping } { bottomSpinner } @@ -895,6 +929,31 @@ export default class MessagePanel extends React.Component { } } +abstract class BaseGrouper { + static canStartGroup = (panel: MessagePanel, ev: MatrixEvent): boolean => true; + + public events: MatrixEvent[] = []; + // events that we include in the group but then eject out and place above the group. + public ejectedEvents: MatrixEvent[] = []; + public readMarker: ReactNode; + + constructor( + public readonly panel: MessagePanel, + public readonly event: MatrixEvent, + public readonly prevEvent: MatrixEvent, + public readonly lastShownEvent: MatrixEvent, + public readonly nextEvent?: MatrixEvent, + public readonly nextEventTile?: MatrixEvent, + ) { + this.readMarker = panel.readMarkerForEvent(event.getId(), event === lastShownEvent); + } + + public abstract shouldGroup(ev: MatrixEvent): boolean; + public abstract add(ev: MatrixEvent): void; + public abstract getTiles(): ReactNode[]; + public abstract getNewPrevEvent(): MatrixEvent; +} + /* Grouper classes determine when events can be grouped together in a summary. * Groupers should have the following methods: * - canStartGroup (static): determines if a new group should be started with the @@ -910,36 +969,21 @@ export default class MessagePanel extends React.Component { // Wrap initial room creation events into an EventListSummary // Grouping only events sent by the same user that sent the `m.room.create` and only until // the first non-state event or membership event which is not regarding the sender of the `m.room.create` event -class CreationGrouper { - static canStartGroup = function(panel, ev) { - return ev.getType() === "m.room.create"; +class CreationGrouper extends BaseGrouper { + static canStartGroup = function(panel: MessagePanel, ev: MatrixEvent): boolean { + return ev.getType() === EventType.RoomCreate; }; - constructor(panel, createEvent, prevEvent, lastShownEvent) { - this.panel = panel; - this.createEvent = createEvent; - this.prevEvent = prevEvent; - this.lastShownEvent = lastShownEvent; - this.events = []; - // events that we include in the group but then eject out and place - // above the group. - this.ejectedEvents = []; - this.readMarker = panel._readMarkerForEvent( - createEvent.getId(), - createEvent === lastShownEvent, - ); - } - - shouldGroup(ev) { + public shouldGroup(ev: MatrixEvent): boolean { const panel = this.panel; - const createEvent = this.createEvent; - if (!panel._shouldShowEvent(ev)) { + const createEvent = this.event; + if (!panel.shouldShowEvent(ev)) { return true; } - if (panel._wantsDateSeparator(this.createEvent, ev.getDate())) { + if (panel.wantsDateSeparator(this.event, ev.getDate())) { return false; } - if (ev.getType() === "m.room.member" + if (ev.getType() === EventType.RoomMember && (ev.getStateKey() !== createEvent.getSender() || ev.getContent()["membership"] !== "join")) { return false; } @@ -949,37 +993,35 @@ class CreationGrouper { return false; } - add(ev) { + public add(ev: MatrixEvent): void { const panel = this.panel; - this.readMarker = this.readMarker || panel._readMarkerForEvent( + this.readMarker = this.readMarker || panel.readMarkerForEvent( ev.getId(), ev === this.lastShownEvent, ); - if (!panel._shouldShowEvent(ev)) { + if (!panel.shouldShowEvent(ev)) { return; } - if (ev.getType() === "m.room.encryption") { + if (ev.getType() === EventType.RoomEncryption) { this.ejectedEvents.push(ev); } else { this.events.push(ev); } } - getTiles() { + public getTiles(): ReactNode[] { // If we don't have any events to group, don't even try to group them. The logic // below assumes that we have a group of events to deal with, but we might not if // the events we were supposed to group were redacted. if (!this.events || !this.events.length) return []; - const DateSeparator = sdk.getComponent('messages.DateSeparator'); - const EventListSummary = sdk.getComponent('views.elements.EventListSummary'); const panel = this.panel; const ret = []; const isGrouped = true; - const createEvent = this.createEvent; + const createEvent = this.event; const lastShownEvent = this.lastShownEvent; - if (panel._wantsDateSeparator(this.prevEvent, createEvent.getDate())) { + if (panel.wantsDateSeparator(this.prevEvent, createEvent.getDate())) { const ts = createEvent.getTs(); ret.push(
    • , @@ -987,13 +1029,13 @@ class CreationGrouper { } // If this m.room.create event should be shown (room upgrade) then show it before the summary - if (panel._shouldShowEvent(createEvent)) { + if (panel.shouldShowEvent(createEvent)) { // pass in the createEvent as prevEvent as well so no extra DateSeparator is rendered - ret.push(...panel._getTilesForEvent(createEvent, createEvent)); + ret.push(...panel.getTilesForEvent(createEvent, createEvent)); } for (const ejected of this.ejectedEvents) { - ret.push(...panel._getTilesForEvent( + ret.push(...panel.getTilesForEvent( createEvent, ejected, createEvent === lastShownEvent, isGrouped, )); } @@ -1003,7 +1045,7 @@ class CreationGrouper { // of EventListSummary, render each member event as if the previous // one was itself. This way, the timestamp of the previous event === the // timestamp of the current event, and no DateSeparator is inserted. - return panel._getTilesForEvent(e, e, e === lastShownEvent, isGrouped); + return panel.getTilesForEvent(e, e, e === lastShownEvent, isGrouped); }).reduce((a, b) => a.concat(b), []); // Get sender profile from the latest event in the summary as the m.room.create doesn't contain one const ev = this.events[this.events.length - 1]; @@ -1023,7 +1065,7 @@ class CreationGrouper { @@ -1038,62 +1080,59 @@ class CreationGrouper { return ret; } - getNewPrevEvent() { - return this.createEvent; + public getNewPrevEvent(): MatrixEvent { + return this.event; } } -class RedactionGrouper { - static canStartGroup = function(panel, ev) { - return panel._shouldShowEvent(ev) && ev.isRedacted(); +class RedactionGrouper extends BaseGrouper { + static canStartGroup = function(panel: MessagePanel, ev: MatrixEvent): boolean { + return panel.shouldShowEvent(ev) && ev.isRedacted(); } - constructor(panel, ev, prevEvent, lastShownEvent, nextEvent, nextEventTile) { - this.panel = panel; - this.readMarker = panel._readMarkerForEvent( - ev.getId(), - ev === lastShownEvent, - ); + constructor( + panel: MessagePanel, + ev: MatrixEvent, + prevEvent: MatrixEvent, + lastShownEvent: MatrixEvent, + nextEvent: MatrixEvent, + nextEventTile: MatrixEvent, + ) { + super(panel, ev, prevEvent, lastShownEvent, nextEvent, nextEventTile); this.events = [ev]; - this.prevEvent = prevEvent; - this.lastShownEvent = lastShownEvent; - this.nextEvent = nextEvent; - this.nextEventTile = nextEventTile; } - shouldGroup(ev) { + public shouldGroup(ev: MatrixEvent): boolean { // absorb hidden events so that they do not break up streams of messages & redaction events being grouped - if (!this.panel._shouldShowEvent(ev)) { + if (!this.panel.shouldShowEvent(ev)) { return true; } - if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) { + if (this.panel.wantsDateSeparator(this.events[0], ev.getDate())) { return false; } return ev.isRedacted(); } - add(ev) { - this.readMarker = this.readMarker || this.panel._readMarkerForEvent( + public add(ev: MatrixEvent): void { + this.readMarker = this.readMarker || this.panel.readMarkerForEvent( ev.getId(), ev === this.lastShownEvent, ); - if (!this.panel._shouldShowEvent(ev)) { + if (!this.panel.shouldShowEvent(ev)) { return; } this.events.push(ev); } - getTiles() { + public getTiles(): ReactNode[] { if (!this.events || !this.events.length) return []; - const DateSeparator = sdk.getComponent('messages.DateSeparator'); - const EventListSummary = sdk.getComponent('views.elements.EventListSummary'); const isGrouped = true; const panel = this.panel; const ret = []; const lastShownEvent = this.lastShownEvent; - if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) { + if (panel.wantsDateSeparator(this.prevEvent, this.events[0].getDate())) { const ts = this.events[0].getTs(); ret.push(
    • , @@ -1104,11 +1143,11 @@ class RedactionGrouper { this.prevEvent ? this.events[0].getId() : "initial" ); - const senders = new Set(); + const senders = new Set(); let eventTiles = this.events.map((e, i) => { senders.add(e.sender); const prevEvent = i === 0 ? this.prevEvent : this.events[i - 1]; - return panel._getTilesForEvent( + return panel.getTilesForEvent( prevEvent, e, e === lastShownEvent, isGrouped, this.nextEvent, this.nextEventTile); }).reduce((a, b) => a.concat(b), []); @@ -1121,7 +1160,7 @@ class RedactionGrouper { key={key} threshold={2} events={this.events} - onToggle={panel._onHeightChanged} // Update scroll state + onToggle={panel.onHeightChanged} // Update scroll state summaryMembers={Array.from(senders)} summaryText={_t("%(count)s messages deleted.", { count: eventTiles.length })} > @@ -1136,61 +1175,58 @@ class RedactionGrouper { return ret; } - getNewPrevEvent() { + public getNewPrevEvent(): MatrixEvent { return this.events[this.events.length - 1]; } } // Wrap consecutive member events in a ListSummary, ignore if redacted -class MemberGrouper { - static canStartGroup = function(panel, ev) { - return panel._shouldShowEvent(ev) && isMembershipChange(ev); +class MemberGrouper extends BaseGrouper { + static canStartGroup = function(panel: MessagePanel, ev: MatrixEvent): boolean { + return panel.shouldShowEvent(ev) && isMembershipChange(ev); } - constructor(panel, ev, prevEvent, lastShownEvent) { - this.panel = panel; - this.readMarker = panel._readMarkerForEvent( - ev.getId(), - ev === lastShownEvent, - ); - this.events = [ev]; - this.prevEvent = prevEvent; - this.lastShownEvent = lastShownEvent; + constructor( + public readonly panel: MessagePanel, + public readonly event: MatrixEvent, + public readonly prevEvent: MatrixEvent, + public readonly lastShownEvent: MatrixEvent, + ) { + super(panel, event, prevEvent, lastShownEvent); + this.events = [event]; } - shouldGroup(ev) { - if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) { + public shouldGroup(ev: MatrixEvent): boolean { + if (this.panel.wantsDateSeparator(this.events[0], ev.getDate())) { return false; } return isMembershipChange(ev); } - add(ev) { - if (ev.getType() === 'm.room.member') { + public add(ev: MatrixEvent): void { + if (ev.getType() === EventType.RoomMember) { // We can ignore any events that don't actually have a message to display if (!hasText(ev)) return; } - this.readMarker = this.readMarker || this.panel._readMarkerForEvent( + this.readMarker = this.readMarker || this.panel.readMarkerForEvent( ev.getId(), ev === this.lastShownEvent, ); this.events.push(ev); } - getTiles() { + public getTiles(): ReactNode[] { // If we don't have any events to group, don't even try to group them. The logic // below assumes that we have a group of events to deal with, but we might not if // the events we were supposed to group were redacted. if (!this.events || !this.events.length) return []; - const DateSeparator = sdk.getComponent('messages.DateSeparator'); - const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary'); const isGrouped = true; const panel = this.panel; const lastShownEvent = this.lastShownEvent; const ret = []; - if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) { + if (panel.wantsDateSeparator(this.prevEvent, this.events[0].getDate())) { const ts = this.events[0].getTs(); ret.push(
    • , @@ -1218,7 +1254,7 @@ class MemberGrouper { // of MemberEventListSummary, render each member event as if the previous // one was itself. This way, the timestamp of the previous event === the // timestamp of the current event, and no DateSeparator is inserted. - return panel._getTilesForEvent(e, e, e === lastShownEvent, isGrouped); + return panel.getTilesForEvent(e, e, e === lastShownEvent, isGrouped); }).reduce((a, b) => a.concat(b), []); if (eventTiles.length === 0) { @@ -1226,9 +1262,10 @@ class MemberGrouper { } ret.push( - { eventTiles } @@ -1242,7 +1279,7 @@ class MemberGrouper { return ret; } - getNewPrevEvent() { + public getNewPrevEvent(): MatrixEvent { return this.events[0]; } } diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx index 6c22835447..8c8fab7ece 100644 --- a/src/components/structures/NotificationPanel.tsx +++ b/src/components/structures/NotificationPanel.tsx @@ -22,6 +22,7 @@ import BaseCard from "../views/right_panel/BaseCard"; import { replaceableComponent } from "../../utils/replaceableComponent"; import TimelinePanel from "./TimelinePanel"; import Spinner from "../views/elements/Spinner"; +import { TileShape } from "../views/rooms/EventTile"; interface IProps { onClose(): void; @@ -48,7 +49,7 @@ export default class NotificationPanel extends React.PureComponent { manageReadMarkers={false} timelineSet={timelineSet} showUrlPreview={false} - tileShape="notif" + tileShape={TileShape.Notif} empty={emptyState} alwaysShowTimestamps={true} /> diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx index 1e0605f263..7770b32f04 100644 --- a/src/components/structures/RoomDirectory.tsx +++ b/src/components/structures/RoomDirectory.tsx @@ -207,9 +207,9 @@ export default class RoomDirectory extends React.Component { this.getMoreRooms(); }; - private getMoreRooms() { - if (this.state.selectedCommunityId) return Promise.resolve(); // no more rooms - if (!MatrixClientPeg.get()) return Promise.resolve(); + private getMoreRooms(): Promise { + if (this.state.selectedCommunityId) return Promise.resolve(false); // no more rooms + if (!MatrixClientPeg.get()) return Promise.resolve(false); this.setState({ loading: true, @@ -239,12 +239,12 @@ export default class RoomDirectory extends React.Component { // if the filter or server has changed since this request was sent, // throw away the result (don't even clear the busy flag // since we must still have a request in flight) - return; + return false; } if (this.unmounted) { // if we've been unmounted, we don't care either. - return; + return false; } if (this.state.filterString) { @@ -264,14 +264,13 @@ export default class RoomDirectory extends React.Component { filterString != this.state.filterString || roomServer != this.state.roomServer || nextBatch != this.nextBatch) { - // as above: we don't care about errors for old - // requests either - return; + // as above: we don't care about errors for old requests either + return false; } if (this.unmounted) { // if we've been unmounted, we don't care either. - return; + return false; } console.error("Failed to get publicRooms: %s", JSON.stringify(err)); diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 885851e8e6..338da29875 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1125,7 +1125,7 @@ export default class RoomView extends React.Component { } } - private onSearchResultsFillRequest = (backwards: boolean) => { + private onSearchResultsFillRequest = (backwards: boolean): Promise => { if (!backwards) { return Promise.resolve(false); } @@ -1291,7 +1291,7 @@ export default class RoomView extends React.Component { this.handleSearchResult(searchPromise); }; - private handleSearchResult(searchPromise: Promise) { + private handleSearchResult(searchPromise: Promise): Promise { // keep a record of the current search id, so that if the search terms // change before we get a response, we can ignore the results. const localSearchId = this.searchId; @@ -1304,7 +1304,7 @@ export default class RoomView extends React.Component { debuglog("search complete"); if (this.unmounted || !this.state.searching || this.searchId != localSearchId) { console.error("Discarding stale search results"); - return; + return false; } // postgres on synapse returns us precise details of the strings @@ -1336,6 +1336,7 @@ export default class RoomView extends React.Component { description: ((error && error.message) ? error.message : _t("Server may be unavailable, overloaded, or search timed out :(")), }); + return false; }).finally(() => { this.setState({ searchInProgress: false, diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.tsx similarity index 73% rename from src/components/structures/ScrollPanel.js rename to src/components/structures/ScrollPanel.tsx index f6e1530537..b8e0cdbc34 100644 --- a/src/components/structures/ScrollPanel.js +++ b/src/components/structures/ScrollPanel.tsx @@ -1,5 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd +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. @@ -14,17 +14,18 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {createRef} from "react"; -import PropTypes from 'prop-types'; +import React, { createRef, CSSProperties, ReactNode, SyntheticEvent, KeyboardEvent } from "react"; + import Timer from '../../utils/Timer'; import AutoHideScrollbar from "./AutoHideScrollbar"; -import {replaceableComponent} from "../../utils/replaceableComponent"; -import {getKeyBindingsManager, RoomAction} from "../../KeyBindingsManager"; +import { replaceableComponent } from "../../utils/replaceableComponent"; +import { getKeyBindingsManager, RoomAction } from "../../KeyBindingsManager"; +import ResizeNotifier from "../../utils/ResizeNotifier"; const DEBUG_SCROLL = false; // The amount of extra scroll distance to allow prior to unfilling. -// See _getExcessHeight. +// See getExcessHeight. const UNPAGINATION_PADDING = 6000; // The number of milliseconds to debounce calls to onUnfillRequest, to prevent // many scroll events causing many unfilling requests. @@ -43,6 +44,75 @@ if (DEBUG_SCROLL) { debuglog = function() {}; } +interface IProps { + /* stickyBottom: if set to true, then once the user hits the bottom of + * the list, any new children added to the list will cause the list to + * scroll down to show the new element, rather than preserving the + * existing view. + */ + stickyBottom?: boolean; + + /* startAtBottom: if set to true, the view is assumed to start + * scrolled to the bottom. + * XXX: It's likely this is unnecessary and can be derived from + * stickyBottom, but I'm adding an extra parameter to ensure + * behaviour stays the same for other uses of ScrollPanel. + * If so, let's remove this parameter down the line. + */ + startAtBottom?: boolean; + + /* className: classnames to add to the top-level div + */ + className?: string; + + /* style: styles to add to the top-level div + */ + style?: CSSProperties; + + /* resizeNotifier: ResizeNotifier to know when middle column has changed size + */ + resizeNotifier?: ResizeNotifier; + + /* fixedChildren: allows for children to be passed which are rendered outside + * of the wrapper + */ + fixedChildren?: ReactNode; + + /* onFillRequest(backwards): a callback which is called on scroll when + * the user nears the start (backwards = true) or end (backwards = + * false) of the list. + * + * This should return a promise; no more calls will be made until the + * promise completes. + * + * The promise should resolve to true if there is more data to be + * retrieved in this direction (in which case onFillRequest may be + * called again immediately), or false if there is no more data in this + * directon (at this time) - which will stop the pagination cycle until + * the user scrolls again. + */ + onFillRequest?(backwards: boolean): Promise; + + /* onUnfillRequest(backwards): a callback which is called on scroll when + * there are children elements that are far out of view and could be removed + * without causing pagination to occur. + * + * This function should accept a boolean, which is true to indicate the back/top + * of the panel and false otherwise, and a scroll token, which refers to the + * first element to remove if removing from the front/bottom, and last element + * to remove if removing from the back/top. + */ + onUnfillRequest?(backwards: boolean, scrollToken: string): void; + + /* onScroll: a callback which is called whenever any scroll happens. + */ + onScroll?(event: Event): void; + + /* onUserScroll: callback which is called when the user interacts with the room timeline + */ + onUserScroll?(event: SyntheticEvent): void; +} + /* This component implements an intelligent scrolling list. * * It wraps a list of
  • children; when items are added to the start or end @@ -84,97 +154,54 @@ if (DEBUG_SCROLL) { * offset as normal. */ +export interface IScrollState { + stuckAtBottom: boolean; + trackedNode?: HTMLElement; + trackedScrollToken?: string; + bottomOffset?: number; + pixelOffset?: number; +} + +interface IPreventShrinkingState { + offsetFromBottom: number; + offsetNode: HTMLElement; +} + @replaceableComponent("structures.ScrollPanel") -export default class ScrollPanel extends React.Component { - static propTypes = { - /* stickyBottom: if set to true, then once the user hits the bottom of - * the list, any new children added to the list will cause the list to - * scroll down to show the new element, rather than preserving the - * existing view. - */ - stickyBottom: PropTypes.bool, - - /* startAtBottom: if set to true, the view is assumed to start - * scrolled to the bottom. - * XXX: It's likely this is unnecessary and can be derived from - * stickyBottom, but I'm adding an extra parameter to ensure - * behaviour stays the same for other uses of ScrollPanel. - * If so, let's remove this parameter down the line. - */ - startAtBottom: PropTypes.bool, - - /* onFillRequest(backwards): a callback which is called on scroll when - * the user nears the start (backwards = true) or end (backwards = - * false) of the list. - * - * This should return a promise; no more calls will be made until the - * promise completes. - * - * The promise should resolve to true if there is more data to be - * retrieved in this direction (in which case onFillRequest may be - * called again immediately), or false if there is no more data in this - * directon (at this time) - which will stop the pagination cycle until - * the user scrolls again. - */ - onFillRequest: PropTypes.func, - - /* onUnfillRequest(backwards): a callback which is called on scroll when - * there are children elements that are far out of view and could be removed - * without causing pagination to occur. - * - * This function should accept a boolean, which is true to indicate the back/top - * of the panel and false otherwise, and a scroll token, which refers to the - * first element to remove if removing from the front/bottom, and last element - * to remove if removing from the back/top. - */ - onUnfillRequest: PropTypes.func, - - /* onScroll: a callback which is called whenever any scroll happens. - */ - onScroll: PropTypes.func, - - /* onUserScroll: callback which is called when the user interacts with the room timeline - */ - onUserScroll: PropTypes.func, - - /* className: classnames to add to the top-level div - */ - className: PropTypes.string, - - /* style: styles to add to the top-level div - */ - style: PropTypes.object, - - /* resizeNotifier: ResizeNotifier to know when middle column has changed size - */ - resizeNotifier: PropTypes.object, - - /* fixedChildren: allows for children to be passed which are rendered outside - * of the wrapper - */ - fixedChildren: PropTypes.node, - }; - +export default class ScrollPanel extends React.Component { static defaultProps = { stickyBottom: true, startAtBottom: true, - onFillRequest: function(backwards) { return Promise.resolve(false); }, - onUnfillRequest: function(backwards, scrollToken) {}, + onFillRequest: function(backwards: boolean) { return Promise.resolve(false); }, + onUnfillRequest: function(backwards: boolean, scrollToken: string) {}, onScroll: function() {}, }; - constructor(props) { - super(props); + private readonly pendingFillRequests: Record<"b" | "f", boolean> = { + b: null, + f: null, + }; + private readonly itemlist = createRef(); + private unmounted = false; + private scrollTimeout: Timer; + private isFilling: boolean; + private fillRequestWhileRunning: boolean; + private scrollState: IScrollState; + private preventShrinkingState: IPreventShrinkingState; + private unfillDebouncer: NodeJS.Timeout; + private bottomGrowth: number; + private pages: number; + private heightUpdateInProgress: boolean; + private divScroll: HTMLDivElement; - this._pendingFillRequests = {b: null, f: null}; + constructor(props, context) { + super(props, context); if (this.props.resizeNotifier) { this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize); } this.resetScrollState(); - - this._itemlist = createRef(); } componentDidMount() { @@ -203,18 +230,18 @@ export default class ScrollPanel extends React.Component { } } - onScroll = ev => { + private onScroll = ev => { // skip scroll events caused by resizing if (this.props.resizeNotifier && this.props.resizeNotifier.isResizing) return; - debuglog("onScroll", this._getScrollNode().scrollTop); - this._scrollTimeout.restart(); - this._saveScrollState(); + debuglog("onScroll", this.getScrollNode().scrollTop); + this.scrollTimeout.restart(); + this.saveScrollState(); this.updatePreventShrinking(); this.props.onScroll(ev); this.checkFillState(); }; - onResize = () => { + private onResize = () => { debuglog("onResize"); this.checkScroll(); // update preventShrinkingState if present @@ -225,11 +252,11 @@ export default class ScrollPanel extends React.Component { // after an update to the contents of the panel, check that the scroll is // where it ought to be, and set off pagination requests if necessary. - checkScroll = () => { + public checkScroll = () => { if (this.unmounted) { return; } - this._restoreSavedScrollState(); + this.restoreSavedScrollState(); this.checkFillState(); }; @@ -238,8 +265,8 @@ export default class ScrollPanel extends React.Component { // note that this is independent of the 'stuckAtBottom' state - it is simply // about whether the content is scrolled down right now, irrespective of // whether it will stay that way when the children update. - isAtBottom = () => { - const sn = this._getScrollNode(); + public isAtBottom = () => { + const sn = this.getScrollNode(); // fractional values (both too big and too small) // for scrollTop happen on certain browsers/platforms // when scrolled all the way down. E.g. Chrome 72 on debian. @@ -278,10 +305,10 @@ export default class ScrollPanel extends React.Component { // |#########| - | // |#########| | // `---------' - - _getExcessHeight(backwards) { - const sn = this._getScrollNode(); - const contentHeight = this._getMessagesHeight(); - const listHeight = this._getListHeight(); + private getExcessHeight(backwards: boolean): number { + const sn = this.getScrollNode(); + const contentHeight = this.getMessagesHeight(); + const listHeight = this.getListHeight(); const clippedHeight = contentHeight - listHeight; const unclippedScrollTop = sn.scrollTop + clippedHeight; @@ -293,13 +320,13 @@ export default class ScrollPanel extends React.Component { } // check the scroll state and send out backfill requests if necessary. - checkFillState = async (depth=0) => { + public checkFillState = async (depth = 0): Promise => { if (this.unmounted) { return; } const isFirstCall = depth === 0; - const sn = this._getScrollNode(); + const sn = this.getScrollNode(); // if there is less than a screenful of messages above or below the // viewport, try to get some more messages. @@ -330,17 +357,17 @@ export default class ScrollPanel extends React.Component { // do make a note when a new request comes in while already running one, // so we can trigger a new chain of calls once done. if (isFirstCall) { - if (this._isFilling) { - debuglog("_isFilling: not entering while request is ongoing, marking for a subsequent request"); - this._fillRequestWhileRunning = true; + if (this.isFilling) { + debuglog("isFilling: not entering while request is ongoing, marking for a subsequent request"); + this.fillRequestWhileRunning = true; return; } - debuglog("_isFilling: setting"); - this._isFilling = true; + debuglog("isFilling: setting"); + this.isFilling = true; } - const itemlist = this._itemlist.current; - const firstTile = itemlist && itemlist.firstElementChild; + const itemlist = this.itemlist.current; + const firstTile = itemlist && itemlist.firstElementChild as HTMLElement; const contentTop = firstTile && firstTile.offsetTop; const fillPromises = []; @@ -348,13 +375,13 @@ export default class ScrollPanel extends React.Component { // try backward filling if (!firstTile || (sn.scrollTop - contentTop) < sn.clientHeight) { // need to back-fill - fillPromises.push(this._maybeFill(depth, true)); + fillPromises.push(this.maybeFill(depth, true)); } // if scrollTop gets to 2 screens from the end (so 1 screen below viewport), // try forward filling if ((sn.scrollHeight - sn.scrollTop) < sn.clientHeight * 2) { // need to forward-fill - fillPromises.push(this._maybeFill(depth, false)); + fillPromises.push(this.maybeFill(depth, false)); } if (fillPromises.length) { @@ -365,26 +392,26 @@ export default class ScrollPanel extends React.Component { } } if (isFirstCall) { - debuglog("_isFilling: clearing"); - this._isFilling = false; + debuglog("isFilling: clearing"); + this.isFilling = false; } - if (this._fillRequestWhileRunning) { - this._fillRequestWhileRunning = false; + if (this.fillRequestWhileRunning) { + this.fillRequestWhileRunning = false; this.checkFillState(); } }; // check if unfilling is possible and send an unfill request if necessary - _checkUnfillState(backwards) { - let excessHeight = this._getExcessHeight(backwards); + private checkUnfillState(backwards: boolean): void { + let excessHeight = this.getExcessHeight(backwards); if (excessHeight <= 0) { return; } const origExcessHeight = excessHeight; - const tiles = this._itemlist.current.children; + const tiles = this.itemlist.current.children; // The scroll token of the first/last tile to be unpaginated let markerScrollToken = null; @@ -413,11 +440,11 @@ export default class ScrollPanel extends React.Component { if (markerScrollToken) { // Use a debouncer to prevent multiple unfill calls in quick succession // This is to make the unfilling process less aggressive - if (this._unfillDebouncer) { - clearTimeout(this._unfillDebouncer); + if (this.unfillDebouncer) { + clearTimeout(this.unfillDebouncer); } - this._unfillDebouncer = setTimeout(() => { - this._unfillDebouncer = null; + this.unfillDebouncer = setTimeout(() => { + this.unfillDebouncer = null; debuglog("unfilling now", backwards, origExcessHeight); this.props.onUnfillRequest(backwards, markerScrollToken); }, UNFILL_REQUEST_DEBOUNCE_MS); @@ -425,9 +452,9 @@ export default class ScrollPanel extends React.Component { } // check if there is already a pending fill request. If not, set one off. - _maybeFill(depth, backwards) { + private maybeFill(depth: number, backwards: boolean): Promise { const dir = backwards ? 'b' : 'f'; - if (this._pendingFillRequests[dir]) { + if (this.pendingFillRequests[dir]) { debuglog("Already a "+dir+" fill in progress - not starting another"); return; } @@ -436,7 +463,7 @@ export default class ScrollPanel extends React.Component { // onFillRequest can end up calling us recursively (via onScroll // events) so make sure we set this before firing off the call. - this._pendingFillRequests[dir] = true; + this.pendingFillRequests[dir] = true; // wait 1ms before paginating, because otherwise // this will block the scroll event handler for +700ms @@ -445,13 +472,13 @@ export default class ScrollPanel extends React.Component { return new Promise(resolve => setTimeout(resolve, 1)).then(() => { return this.props.onFillRequest(backwards); }).finally(() => { - this._pendingFillRequests[dir] = false; + this.pendingFillRequests[dir] = false; }).then((hasMoreResults) => { if (this.unmounted) { return; } // Unpaginate once filling is complete - this._checkUnfillState(!backwards); + this.checkUnfillState(!backwards); debuglog(""+dir+" fill complete; hasMoreResults:"+hasMoreResults); if (hasMoreResults) { @@ -477,7 +504,7 @@ export default class ScrollPanel extends React.Component { * the number of pixels the bottom of the tracked child is above the * bottom of the scroll panel. */ - getScrollState = () => this.scrollState; + public getScrollState = (): IScrollState => this.scrollState; /* reset the saved scroll state. * @@ -491,35 +518,35 @@ export default class ScrollPanel extends React.Component { * no use if no children exist yet, or if you are about to replace the * child list.) */ - resetScrollState = () => { + public resetScrollState = (): void => { this.scrollState = { stuckAtBottom: this.props.startAtBottom, }; - this._bottomGrowth = 0; - this._pages = 0; - this._scrollTimeout = new Timer(100); - this._heightUpdateInProgress = false; + this.bottomGrowth = 0; + this.pages = 0; + this.scrollTimeout = new Timer(100); + this.heightUpdateInProgress = false; }; /** * jump to the top of the content. */ - scrollToTop = () => { - this._getScrollNode().scrollTop = 0; - this._saveScrollState(); + public scrollToTop = (): void => { + this.getScrollNode().scrollTop = 0; + this.saveScrollState(); }; /** * jump to the bottom of the content. */ - scrollToBottom = () => { + public scrollToBottom = (): void => { // the easiest way to make sure that the scroll state is correctly // saved is to do the scroll, then save the updated state. (Calculating // it ourselves is hard, and we can't rely on an onScroll callback // happening, since there may be no user-visible change here). - const sn = this._getScrollNode(); + const sn = this.getScrollNode(); sn.scrollTop = sn.scrollHeight; - this._saveScrollState(); + this.saveScrollState(); }; /** @@ -527,18 +554,18 @@ export default class ScrollPanel extends React.Component { * * @param {number} mult: -1 to page up, +1 to page down */ - scrollRelative = mult => { - const scrollNode = this._getScrollNode(); + public scrollRelative = (mult: number): void => { + const scrollNode = this.getScrollNode(); const delta = mult * scrollNode.clientHeight * 0.9; scrollNode.scrollBy(0, delta); - this._saveScrollState(); + this.saveScrollState(); }; /** * Scroll up/down in response to a scroll key * @param {object} ev the keyboard event */ - handleScrollKey = ev => { + public handleScrollKey = (ev: KeyboardEvent) => { let isScrolling = false; const roomAction = getKeyBindingsManager().getRoomAction(ev); switch (roomAction) { @@ -575,17 +602,17 @@ export default class ScrollPanel extends React.Component { * node (specifically, the bottom of it) will be positioned. If omitted, it * defaults to 0. */ - scrollToToken = (scrollToken, pixelOffset, offsetBase) => { + public scrollToToken = (scrollToken: string, pixelOffset: number, offsetBase: number): void => { pixelOffset = pixelOffset || 0; offsetBase = offsetBase || 0; - // set the trackedScrollToken so we can get the node through _getTrackedNode + // set the trackedScrollToken so we can get the node through getTrackedNode this.scrollState = { stuckAtBottom: false, trackedScrollToken: scrollToken, }; - const trackedNode = this._getTrackedNode(); - const scrollNode = this._getScrollNode(); + const trackedNode = this.getTrackedNode(); + const scrollNode = this.getScrollNode(); if (trackedNode) { // set the scrollTop to the position we want. // note though, that this might not succeed if the combination of offsetBase and pixelOffset @@ -595,34 +622,34 @@ export default class ScrollPanel extends React.Component { // enough so it ends up in the top of the viewport. debuglog("scrollToken: setting scrollTop", {offsetBase, pixelOffset, offsetTop: trackedNode.offsetTop}); scrollNode.scrollTop = (trackedNode.offsetTop - (scrollNode.clientHeight * offsetBase)) + pixelOffset; - this._saveScrollState(); + this.saveScrollState(); } }; - _saveScrollState() { + private saveScrollState(): void { if (this.props.stickyBottom && this.isAtBottom()) { this.scrollState = { stuckAtBottom: true }; debuglog("saved stuckAtBottom state"); return; } - const scrollNode = this._getScrollNode(); + const scrollNode = this.getScrollNode(); const viewportBottom = scrollNode.scrollHeight - (scrollNode.scrollTop + scrollNode.clientHeight); - const itemlist = this._itemlist.current; + const itemlist = this.itemlist.current; const messages = itemlist.children; let node = null; // TODO: do a binary search here, as items are sorted by offsetTop // loop backwards, from bottom-most message (as that is the most common case) - for (let i = messages.length-1; i >= 0; --i) { - if (!messages[i].dataset.scrollTokens) { + for (let i = messages.length - 1; i >= 0; --i) { + if (!(messages[i] as HTMLElement).dataset.scrollTokens) { continue; } node = messages[i]; // break at the first message (coming from the bottom) // that has it's offsetTop above the bottom of the viewport. - if (this._topFromBottom(node) > viewportBottom) { + if (this.topFromBottom(node) > viewportBottom) { // Use this node as the scrollToken break; } @@ -634,7 +661,7 @@ export default class ScrollPanel extends React.Component { } const scrollToken = node.dataset.scrollTokens.split(',')[0]; debuglog("saving anchored scroll state to message", node && node.innerText, scrollToken); - const bottomOffset = this._topFromBottom(node); + const bottomOffset = this.topFromBottom(node); this.scrollState = { stuckAtBottom: false, trackedNode: node, @@ -644,35 +671,35 @@ export default class ScrollPanel extends React.Component { }; } - async _restoreSavedScrollState() { + private async restoreSavedScrollState(): Promise { const scrollState = this.scrollState; if (scrollState.stuckAtBottom) { - const sn = this._getScrollNode(); + const sn = this.getScrollNode(); if (sn.scrollTop !== sn.scrollHeight) { sn.scrollTop = sn.scrollHeight; } } else if (scrollState.trackedScrollToken) { - const itemlist = this._itemlist.current; - const trackedNode = this._getTrackedNode(); + const itemlist = this.itemlist.current; + const trackedNode = this.getTrackedNode(); if (trackedNode) { - const newBottomOffset = this._topFromBottom(trackedNode); + const newBottomOffset = this.topFromBottom(trackedNode); const bottomDiff = newBottomOffset - scrollState.bottomOffset; - this._bottomGrowth += bottomDiff; + this.bottomGrowth += bottomDiff; scrollState.bottomOffset = newBottomOffset; - const newHeight = `${this._getListHeight()}px`; + const newHeight = `${this.getListHeight()}px`; if (itemlist.style.height !== newHeight) { itemlist.style.height = newHeight; } debuglog("balancing height because messages below viewport grew by", bottomDiff); } } - if (!this._heightUpdateInProgress) { - this._heightUpdateInProgress = true; + if (!this.heightUpdateInProgress) { + this.heightUpdateInProgress = true; try { - await this._updateHeight(); + await this.updateHeight(); } finally { - this._heightUpdateInProgress = false; + this.heightUpdateInProgress = false; } } else { debuglog("not updating height because request already in progress"); @@ -680,11 +707,11 @@ export default class ScrollPanel extends React.Component { } // need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content? - async _updateHeight() { + private async updateHeight(): Promise { // wait until user has stopped scrolling - if (this._scrollTimeout.isRunning()) { + if (this.scrollTimeout.isRunning()) { debuglog("updateHeight waiting for scrolling to end ... "); - await this._scrollTimeout.finished(); + await this.scrollTimeout.finished(); } else { debuglog("updateHeight getting straight to business, no scrolling going on."); } @@ -694,14 +721,14 @@ export default class ScrollPanel extends React.Component { return; } - const sn = this._getScrollNode(); - const itemlist = this._itemlist.current; - const contentHeight = this._getMessagesHeight(); + const sn = this.getScrollNode(); + const itemlist = this.itemlist.current; + const contentHeight = this.getMessagesHeight(); const minHeight = sn.clientHeight; const height = Math.max(minHeight, contentHeight); - this._pages = Math.ceil(height / PAGE_SIZE); - this._bottomGrowth = 0; - const newHeight = `${this._getListHeight()}px`; + this.pages = Math.ceil(height / PAGE_SIZE); + this.bottomGrowth = 0; + const newHeight = `${this.getListHeight()}px`; const scrollState = this.scrollState; if (scrollState.stuckAtBottom) { @@ -713,7 +740,7 @@ export default class ScrollPanel extends React.Component { } debuglog("updateHeight to", newHeight); } else if (scrollState.trackedScrollToken) { - const trackedNode = this._getTrackedNode(); + const trackedNode = this.getTrackedNode(); // if the timeline has been reloaded // this can be called before scrollToBottom or whatever has been called // so don't do anything if the node has disappeared from @@ -735,17 +762,17 @@ export default class ScrollPanel extends React.Component { } } - _getTrackedNode() { + private getTrackedNode(): HTMLElement { const scrollState = this.scrollState; const trackedNode = scrollState.trackedNode; if (!trackedNode || !trackedNode.parentElement) { let node; - const messages = this._itemlist.current.children; + const messages = this.itemlist.current.children; const scrollToken = scrollState.trackedScrollToken; for (let i = messages.length-1; i >= 0; --i) { - const m = messages[i]; + const m = messages[i] as HTMLElement; // 'data-scroll-tokens' is a DOMString of comma-separated scroll tokens // There might only be one scroll token if (m.dataset.scrollTokens && @@ -768,45 +795,45 @@ export default class ScrollPanel extends React.Component { return scrollState.trackedNode; } - _getListHeight() { - return this._bottomGrowth + (this._pages * PAGE_SIZE); + private getListHeight(): number { + return this.bottomGrowth + (this.pages * PAGE_SIZE); } - _getMessagesHeight() { - const itemlist = this._itemlist.current; - const lastNode = itemlist.lastElementChild; + private getMessagesHeight(): number { + const itemlist = this.itemlist.current; + const lastNode = itemlist.lastElementChild as HTMLElement; const lastNodeBottom = lastNode ? lastNode.offsetTop + lastNode.clientHeight : 0; - const firstNodeTop = itemlist.firstElementChild ? itemlist.firstElementChild.offsetTop : 0; + const firstNodeTop = itemlist.firstElementChild ? (itemlist.firstElementChild as HTMLElement).offsetTop : 0; // 18 is itemlist padding return lastNodeBottom - firstNodeTop + (18 * 2); } - _topFromBottom(node) { + private topFromBottom(node: HTMLElement): number { // current capped height - distance from top = distance from bottom of container to top of tracked element - return this._itemlist.current.clientHeight - node.offsetTop; + return this.itemlist.current.clientHeight - node.offsetTop; } /* get the DOM node which has the scrollTop property we care about for our * message panel. */ - _getScrollNode() { + private getScrollNode(): HTMLDivElement { if (this.unmounted) { // this shouldn't happen, but when it does, turn the NPE into // something more meaningful. - throw new Error("ScrollPanel._getScrollNode called when unmounted"); + throw new Error("ScrollPanel.getScrollNode called when unmounted"); } - if (!this._divScroll) { + if (!this.divScroll) { // Likewise, we should have the ref by this point, but if not // turn the NPE into something meaningful. - throw new Error("ScrollPanel._getScrollNode called before AutoHideScrollbar ref collected"); + throw new Error("ScrollPanel.getScrollNode called before AutoHideScrollbar ref collected"); } - return this._divScroll; + return this.divScroll; } - _collectScroll = divScroll => { - this._divScroll = divScroll; + private collectScroll = (divScroll: HTMLDivElement) => { + this.divScroll = divScroll; }; /** @@ -814,15 +841,15 @@ export default class ScrollPanel extends React.Component { anything below it changes, by calling updatePreventShrinking, to keep the same minimum bottom offset, effectively preventing the timeline to shrink. */ - preventShrinking = () => { - const messageList = this._itemlist.current; + public preventShrinking = (): void => { + const messageList = this.itemlist.current; const tiles = messageList && messageList.children; if (!messageList) { return; } let lastTileNode; for (let i = tiles.length - 1; i >= 0; i--) { - const node = tiles[i]; + const node = tiles[i] as HTMLElement; if (node.dataset.scrollTokens) { lastTileNode = node; break; @@ -841,8 +868,8 @@ export default class ScrollPanel extends React.Component { }; /** Clear shrinking prevention. Used internally, and when the timeline is reloaded. */ - clearPreventShrinking = () => { - const messageList = this._itemlist.current; + public clearPreventShrinking = (): void => { + const messageList = this.itemlist.current; const balanceElement = messageList && messageList.parentElement; if (balanceElement) balanceElement.style.paddingBottom = null; this.preventShrinkingState = null; @@ -857,11 +884,11 @@ export default class ScrollPanel extends React.Component { from the bottom of the marked tile grows larger than what it was when marking. */ - updatePreventShrinking = () => { + public updatePreventShrinking = (): void => { if (this.preventShrinkingState) { - const sn = this._getScrollNode(); + const sn = this.getScrollNode(); const scrollState = this.scrollState; - const messageList = this._itemlist.current; + const messageList = this.itemlist.current; const {offsetNode, offsetFromBottom} = this.preventShrinkingState; // element used to set paddingBottom to balance the typing notifs disappearing const balanceElement = messageList.parentElement; @@ -898,13 +925,15 @@ export default class ScrollPanel extends React.Component { // list-style-type: none; is no longer a list return ( + className={`mx_ScrollPanel ${this.props.className}`} + style={this.props.style} + > { this.props.fixedChildren }
    -
      +
        { this.props.children }
    diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.tsx similarity index 75% rename from src/components/structures/TimelinePanel.js rename to src/components/structures/TimelinePanel.tsx index 03d0b5c6d7..c2e7a6f346 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.tsx @@ -1,8 +1,5 @@ /* -Copyright 2016 OpenMarket Ltd -Copyright 2017 Vector Creations Ltd -Copyright 2019 New Vector Ltd -Copyright 2019-2020 The Matrix.org Foundation C.I.C. +Copyright 2016 - 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. @@ -17,13 +14,16 @@ See the License for the specific language governing permissions and limitations under the License. */ -import SettingsStore from "../../settings/SettingsStore"; -import { LayoutPropType } from "../../settings/Layout"; -import React, { createRef } from 'react'; +import React, { createRef, ReactNode, SyntheticEvent } from 'react'; import ReactDOM from "react-dom"; -import PropTypes from 'prop-types'; +import { Room } from "matrix-js-sdk/src/models/room"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { TimelineSet } from "matrix-js-sdk/src/models/event-timeline-set"; import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline"; import { TimelineWindow } from "matrix-js-sdk/src/timeline-window"; + +import SettingsStore from "../../settings/SettingsStore"; +import { Layout } from "../../settings/Layout"; import { _t } from '../../languageHandler'; import { MatrixClientPeg } from "../../MatrixClientPeg"; import RoomContext from "../../contexts/RoomContext"; @@ -35,11 +35,19 @@ import { Key } from '../../Keyboard'; import Timer from '../../utils/Timer'; import shouldHideEvent from '../../shouldHideEvent'; import EditorStateTransfer from '../../utils/EditorStateTransfer'; -import { haveTileForEvent } from "../views/rooms/EventTile"; +import { haveTileForEvent, TileShape } from "../views/rooms/EventTile"; import { UIFeature } from "../../settings/UIFeature"; import { replaceableComponent } from "../../utils/replaceableComponent"; import { arrayFastClone } from "../../utils/arrays"; import { Action } from "../../dispatcher/actions"; +import MessagePanel from "./MessagePanel"; +import { SyncState } from 'matrix-js-sdk/src/sync.api'; +import { IScrollState } from "./ScrollPanel"; +import { ActionPayload } from "../../dispatcher/payloads"; +import { EventType } from 'matrix-js-sdk/src/@types/event'; +import ResizeNotifier from "../../utils/ResizeNotifier"; +import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks"; +import Spinner from "../views/elements/Spinner"; const PAGINATE_SIZE = 20; const INITIAL_SIZE = 20; @@ -47,90 +55,159 @@ const READ_RECEIPT_INTERVAL_MS = 500; const DEBUG = false; -let debuglog = function() {}; +let debuglog = function(...s: any[]) {}; if (DEBUG) { // using bind means that we get to keep useful line numbers in the console debuglog = console.log.bind(console); } +interface IProps { + // The js-sdk EventTimelineSet object for the timeline sequence we are + // representing. This may or may not have a room, depending on what it's + // a timeline representing. If it has a room, we maintain RRs etc for + // that room. + timelineSet: TimelineSet; + showReadReceipts?: boolean; + // Enable managing RRs and RMs. These require the timelineSet to have a room. + manageReadReceipts?: boolean; + sendReadReceiptOnLoad?: boolean; + manageReadMarkers?: boolean; + + // true to give the component a 'display: none' style. + hidden?: boolean; + + // ID of an event to highlight. If undefined, no event will be highlighted. + // typically this will be either 'eventId' or undefined. + highlightedEventId?: string; + + // id of an event to jump to. If not given, will go to the end of the live timeline. + eventId?: string; + + // where to position the event given by eventId, in pixels from the bottom of the viewport. + // If not given, will try to put the event half way down the viewport. + eventPixelOffset?: number; + + // Should we show URL Previews + showUrlPreview?: boolean; + + // maximum number of events to show in a timeline + timelineCap?: number; + + // classname to use for the messagepanel + className?: string; + + // shape property to be passed to EventTiles + tileShape?: TileShape; + + // placeholder to use if the timeline is empty + empty?: ReactNode; + + // whether to show reactions for an event + showReactions?: boolean; + + // which layout to use + layout?: Layout; + + // whether to always show timestamps for an event + alwaysShowTimestamps?: boolean; + + resizeNotifier?: ResizeNotifier; + editState?: EditorStateTransfer; + permalinkCreator?: RoomPermalinkCreator; + membersLoaded?: boolean; + + // callback which is called when the panel is scrolled. + onScroll?(event: Event): void; + + // callback which is called when the user interacts with the room timeline + onUserScroll?(event: SyntheticEvent): void; + + // callback which is called when the read-up-to mark is updated. + onReadMarkerUpdated?(): void; + + // callback which is called when we wish to paginate the timeline window. + onPaginationRequest?(timelineWindow: TimelineWindow, direction: string, size: number): Promise, +} + +interface IState { + events: MatrixEvent[]; + liveEvents: MatrixEvent[]; + // track whether our room timeline is loading + timelineLoading: boolean; + + // the index of the first event that is to be shown + firstVisibleEventIndex: number; + + // canBackPaginate == false may mean: + // + // * we haven't (successfully) loaded the timeline yet, or: + // + // * we have got to the point where the room was created, or: + // + // * the server indicated that there were no more visible events + // (normally implying we got to the start of the room), or: + // + // * we gave up asking the server for more events + canBackPaginate: boolean; + + // canForwardPaginate == false may mean: + // + // * we haven't (successfully) loaded the timeline yet + // + // * we have got to the end of time and are now tracking the live + // timeline, or: + // + // * the server indicated that there were no more visible events + // (not sure if this ever happens when we're not at the live + // timeline), or: + // + // * we are looking at some historical point, but gave up asking + // the server for more events + canForwardPaginate: boolean; + + // start with the read-marker visible, so that we see its animated + // disappearance when switching into the room. + readMarkerVisible: boolean; + + readMarkerEventId: string; + + backPaginating: boolean; + forwardPaginating: boolean; + + // cache of matrixClient.getSyncState() (but from the 'sync' event) + clientSyncState: SyncState; + + // should the event tiles have twelve hour times + isTwelveHour: boolean; + + // always show timestamps on event tiles? + alwaysShowTimestamps: boolean; + + // how long to show the RM for when it's visible in the window + readMarkerInViewThresholdMs: number; + + // how long to show the RM for when it's scrolled off-screen + readMarkerOutOfViewThresholdMs: number; + + editState?: EditorStateTransfer; +} + +interface IEventIndexOpts { + ignoreOwn?: boolean; + allowPartial?: boolean; +} + /* * Component which shows the event timeline in a room view. * * Also responsible for handling and sending read receipts. */ @replaceableComponent("structures.TimelinePanel") -class TimelinePanel extends React.Component { - static propTypes = { - // The js-sdk EventTimelineSet object for the timeline sequence we are - // representing. This may or may not have a room, depending on what it's - // a timeline representing. If it has a room, we maintain RRs etc for - // that room. - timelineSet: PropTypes.object.isRequired, - - showReadReceipts: PropTypes.bool, - // Enable managing RRs and RMs. These require the timelineSet to have a room. - manageReadReceipts: PropTypes.bool, - sendReadReceiptOnLoad: PropTypes.bool, - manageReadMarkers: PropTypes.bool, - - // true to give the component a 'display: none' style. - hidden: PropTypes.bool, - - // ID of an event to highlight. If undefined, no event will be highlighted. - // typically this will be either 'eventId' or undefined. - highlightedEventId: PropTypes.string, - - // id of an event to jump to. If not given, will go to the end of the - // live timeline. - eventId: PropTypes.string, - - // where to position the event given by eventId, in pixels from the - // bottom of the viewport. If not given, will try to put the event - // half way down the viewport. - eventPixelOffset: PropTypes.number, - - // Should we show URL Previews - showUrlPreview: PropTypes.bool, - - // callback which is called when the panel is scrolled. - onScroll: PropTypes.func, - - // callback which is called when the user interacts with the room timeline - onUserScroll: PropTypes.func, - - // callback which is called when the read-up-to mark is updated. - onReadMarkerUpdated: PropTypes.func, - - // callback which is called when we wish to paginate the timeline - // window. - onPaginationRequest: PropTypes.func, - - // maximum number of events to show in a timeline - timelineCap: PropTypes.number, - - // classname to use for the messagepanel - className: PropTypes.string, - - // shape property to be passed to EventTiles - tileShape: PropTypes.string, - - // placeholder to use if the timeline is empty - empty: PropTypes.node, - - // whether to show reactions for an event - showReactions: PropTypes.bool, - - // which layout to use - layout: LayoutPropType, - - // whether to always show timestamps for an event - alwaysShowTimestamps: PropTypes.bool, - } - +class TimelinePanel extends React.Component { static contextType = RoomContext; // a map from room id to read marker event timestamp - static roomReadMarkerTsMap = {}; + static roomReadMarkerTsMap: Record = {}; static defaultProps = { // By default, disable the timelineCap in favour of unpaginating based on @@ -140,16 +217,21 @@ class TimelinePanel extends React.Component { sendReadReceiptOnLoad: true, }; - constructor(props) { - super(props); + private lastRRSentEventId: string = undefined; + private lastRMSentEventId: string = undefined; + + private readonly messagePanel = createRef(); + private readonly dispatcherRef: string; + private timelineWindow?: TimelineWindow; + private unmounted = false; + private readReceiptActivityTimer: Timer; + private readMarkerActivityTimer: Timer; + + constructor(props, context) { + super(props, context); debuglog("TimelinePanel: mounting"); - this.lastRRSentEventId = undefined; - this.lastRMSentEventId = undefined; - - this._messagePanel = createRef(); - // XXX: we could track RM per TimelineSet rather than per Room. // but for now we just do it per room for simplicity. let initialReadMarker = null; @@ -158,82 +240,41 @@ class TimelinePanel extends React.Component { if (readmarker) { initialReadMarker = readmarker.getContent().event_id; } else { - initialReadMarker = this._getCurrentReadReceipt(); + initialReadMarker = this.getCurrentReadReceipt(); } } this.state = { events: [], liveEvents: [], - timelineLoading: true, // track whether our room timeline is loading - - // the index of the first event that is to be shown + timelineLoading: true, firstVisibleEventIndex: 0, - - // canBackPaginate == false may mean: - // - // * we haven't (successfully) loaded the timeline yet, or: - // - // * we have got to the point where the room was created, or: - // - // * the server indicated that there were no more visible events - // (normally implying we got to the start of the room), or: - // - // * we gave up asking the server for more events canBackPaginate: false, - - // canForwardPaginate == false may mean: - // - // * we haven't (successfully) loaded the timeline yet - // - // * we have got to the end of time and are now tracking the live - // timeline, or: - // - // * the server indicated that there were no more visible events - // (not sure if this ever happens when we're not at the live - // timeline), or: - // - // * we are looking at some historical point, but gave up asking - // the server for more events canForwardPaginate: false, - - // start with the read-marker visible, so that we see its animated - // disappearance when switching into the room. readMarkerVisible: true, - readMarkerEventId: initialReadMarker, - backPaginating: false, forwardPaginating: false, - - // cache of matrixClient.getSyncState() (but from the 'sync' event) clientSyncState: MatrixClientPeg.get().getSyncState(), - - // should the event tiles have twelve hour times isTwelveHour: SettingsStore.getValue("showTwelveHourTimestamps"), - - // always show timestamps on event tiles? alwaysShowTimestamps: SettingsStore.getValue("alwaysShowTimestamps"), - - // how long to show the RM for when it's visible in the window readMarkerInViewThresholdMs: SettingsStore.getValue("readMarkerInViewThresholdMs"), - - // how long to show the RM for when it's scrolled off-screen readMarkerOutOfViewThresholdMs: SettingsStore.getValue("readMarkerOutOfViewThresholdMs"), }; this.dispatcherRef = dis.register(this.onAction); - MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline); - MatrixClientPeg.get().on("Room.timelineReset", this.onRoomTimelineReset); - MatrixClientPeg.get().on("Room.redaction", this.onRoomRedaction); + const cli = MatrixClientPeg.get(); + cli.on("Room.timeline", this.onRoomTimeline); + cli.on("Room.timelineReset", this.onRoomTimelineReset); + cli.on("Room.redaction", this.onRoomRedaction); // same event handler as Room.redaction as for both we just do forceUpdate - MatrixClientPeg.get().on("Room.redactionCancelled", this.onRoomRedaction); - MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt); - MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated); - MatrixClientPeg.get().on("Room.accountData", this.onAccountData); - MatrixClientPeg.get().on("Event.decrypted", this.onEventDecrypted); - MatrixClientPeg.get().on("Event.replaced", this.onEventReplaced); - MatrixClientPeg.get().on("sync", this.onSync); + cli.on("Room.redactionCancelled", this.onRoomRedaction); + cli.on("Room.receipt", this.onRoomReceipt); + cli.on("Room.localEchoUpdated", this.onLocalEchoUpdated); + cli.on("Room.accountData", this.onAccountData); + cli.on("Event.decrypted", this.onEventDecrypted); + cli.on("Event.replaced", this.onEventReplaced); + cli.on("sync", this.onSync); } // TODO: [REACT-WARNING] Move into constructor @@ -246,7 +287,7 @@ class TimelinePanel extends React.Component { this.updateReadMarkerOnUserActivity(); } - this._initTimeline(this.props); + this.initTimeline(this.props); } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event @@ -272,7 +313,7 @@ class TimelinePanel extends React.Component { if (differentEventId || differentHighlightedEventId) { console.log("TimelinePanel switching to eventId " + newProps.eventId + " (was " + this.props.eventId + ")"); - return this._initTimeline(newProps); + return this.initTimeline(newProps); } } @@ -282,13 +323,13 @@ class TimelinePanel extends React.Component { // // (We could use isMounted, but facebook have deprecated that.) this.unmounted = true; - if (this._readReceiptActivityTimer) { - this._readReceiptActivityTimer.abort(); - this._readReceiptActivityTimer = null; + if (this.readReceiptActivityTimer) { + this.readReceiptActivityTimer.abort(); + this.readReceiptActivityTimer = null; } - if (this._readMarkerActivityTimer) { - this._readMarkerActivityTimer.abort(); - this._readMarkerActivityTimer = null; + if (this.readMarkerActivityTimer) { + this.readMarkerActivityTimer.abort(); + this.readMarkerActivityTimer = null; } dis.unregister(this.dispatcherRef); @@ -308,7 +349,7 @@ class TimelinePanel extends React.Component { } } - onMessageListUnfillRequest = (backwards, scrollToken) => { + private onMessageListUnfillRequest = (backwards: boolean, scrollToken: string): void => { // If backwards, unpaginate from the back (i.e. the start of the timeline) const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS; debuglog("TimelinePanel: unpaginating events in direction", dir); @@ -327,21 +368,30 @@ class TimelinePanel extends React.Component { if (count > 0) { debuglog("TimelinePanel: Unpaginating", count, "in direction", dir); - this._timelineWindow.unpaginate(count, backwards); + this.timelineWindow.unpaginate(count, backwards); - // We can now paginate in the unpaginated direction - const canPaginateKey = (backwards) ? 'canBackPaginate' : 'canForwardPaginate'; - const { events, liveEvents, firstVisibleEventIndex } = this._getEvents(); - this.setState({ - [canPaginateKey]: true, + const { events, liveEvents, firstVisibleEventIndex } = this.getEvents(); + const newState: Partial = { events, liveEvents, firstVisibleEventIndex, - }); + } + + // We can now paginate in the unpaginated direction + if (backwards) { + newState.canBackPaginate = true; + } else { + newState.canForwardPaginate = true; + } + this.setState(newState); } }; - onPaginationRequest = (timelineWindow, direction, size) => { + private onPaginationRequest = ( + timelineWindow: TimelineWindow, + direction: string, + size: number, + ): Promise => { if (this.props.onPaginationRequest) { return this.props.onPaginationRequest(timelineWindow, direction, size); } else { @@ -350,8 +400,8 @@ class TimelinePanel extends React.Component { }; // set off a pagination request. - onMessageListFillRequest = backwards => { - if (!this._shouldPaginate()) return Promise.resolve(false); + private onMessageListFillRequest = (backwards: boolean): Promise => { + if (!this.shouldPaginate()) return Promise.resolve(false); const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS; const canPaginateKey = backwards ? 'canBackPaginate' : 'canForwardPaginate'; @@ -362,9 +412,9 @@ class TimelinePanel extends React.Component { return Promise.resolve(false); } - if (!this._timelineWindow.canPaginate(dir)) { + if (!this.timelineWindow.canPaginate(dir)) { debuglog("TimelinePanel: can't", dir, "paginate any further"); - this.setState({[canPaginateKey]: false}); + this.setState({ [canPaginateKey]: false }); return Promise.resolve(false); } @@ -374,15 +424,15 @@ class TimelinePanel extends React.Component { } debuglog("TimelinePanel: Initiating paginate; backwards:"+backwards); - this.setState({[paginatingKey]: true}); + this.setState({ [paginatingKey]: true }); - return this.onPaginationRequest(this._timelineWindow, dir, PAGINATE_SIZE).then((r) => { + return this.onPaginationRequest(this.timelineWindow, dir, PAGINATE_SIZE).then((r) => { if (this.unmounted) { return; } debuglog("TimelinePanel: paginate complete backwards:"+backwards+"; success:"+r); - const { events, liveEvents, firstVisibleEventIndex } = this._getEvents(); - const newState = { + const { events, liveEvents, firstVisibleEventIndex } = this.getEvents(); + const newState: Partial = { [paginatingKey]: false, [canPaginateKey]: r, events, @@ -395,7 +445,7 @@ class TimelinePanel extends React.Component { const otherDirection = backwards ? EventTimeline.FORWARDS : EventTimeline.BACKWARDS; const canPaginateOtherWayKey = backwards ? 'canForwardPaginate' : 'canBackPaginate'; if (!this.state[canPaginateOtherWayKey] && - this._timelineWindow.canPaginate(otherDirection)) { + this.timelineWindow.canPaginate(otherDirection)) { debuglog('TimelinePanel: can now', otherDirection, 'paginate again'); newState[canPaginateOtherWayKey] = true; } @@ -406,9 +456,9 @@ class TimelinePanel extends React.Component { // has in memory because we never gave the component a chance to scroll // itself into the right place return new Promise((resolve) => { - this.setState(newState, () => { + this.setState(newState, () => { // we can continue paginating in the given direction if: - // - _timelineWindow.paginate says we can + // - timelineWindow.paginate says we can // - we're paginating forwards, or we won't be trying to // paginate backwards past the first visible event resolve(r && (!backwards || firstVisibleEventIndex === 0)); @@ -417,7 +467,7 @@ class TimelinePanel extends React.Component { }); }; - onMessageListScroll = e => { + private onMessageListScroll = e => { if (this.props.onScroll) { this.props.onScroll(e); } @@ -428,18 +478,18 @@ class TimelinePanel extends React.Component { // it goes back off the top of the screen (presumably because the user // clicks on the 'jump to bottom' button), we need to re-enable it. if (rmPosition < 0) { - this.setState({readMarkerVisible: true}); + this.setState({ readMarkerVisible: true }); } // if read marker position goes between 0 and -1/1, // (and user is active), switch timeout - const timeout = this._readMarkerTimeout(rmPosition); + const timeout = this.readMarkerTimeout(rmPosition); // NO-OP when timeout already has set to the given value - this._readMarkerActivityTimer.changeTimeout(timeout); + this.readMarkerActivityTimer.changeTimeout(timeout); } }; - onAction = payload => { + private onAction = (payload: ActionPayload): void => { switch (payload.action) { case "ignore_state_changed": this.forceUpdate(); @@ -447,9 +497,9 @@ class TimelinePanel extends React.Component { case "edit_event": { const editState = payload.event ? new EditorStateTransfer(payload.event) : null; - this.setState({editState}, () => { - if (payload.event && this._messagePanel.current) { - this._messagePanel.current.scrollToEventIfNeeded( + this.setState({ editState }, () => { + if (payload.event && this.messagePanel.current) { + this.messagePanel.current.scrollToEventIfNeeded( payload.event.getId(), ); } @@ -479,7 +529,16 @@ class TimelinePanel extends React.Component { } }; - onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => { + private onRoomTimeline = ( + ev: MatrixEvent, + room: Room, + toStartOfTimeline: boolean, + removed: boolean, + data: { + timeline: EventTimeline; + liveEvent?: boolean; + }, + ): void => { // ignore events for other timeline sets if (data.timeline.getTimelineSet() !== this.props.timelineSet) return; @@ -487,9 +546,9 @@ class TimelinePanel extends React.Component { // updates from pagination will happen when the paginate completes. if (toStartOfTimeline || !data || !data.liveEvent) return; - if (!this._messagePanel.current) return; + if (!this.messagePanel.current) return; - if (!this._messagePanel.current.getScrollState().stuckAtBottom) { + if (!this.messagePanel.current.getScrollState().stuckAtBottom) { // we won't load this event now, because we don't want to push any // events off the other end of the timeline. But we need to note // that we can now paginate. @@ -506,13 +565,13 @@ class TimelinePanel extends React.Component { // timeline window. // // see https://github.com/vector-im/vector-web/issues/1035 - this._timelineWindow.paginate(EventTimeline.FORWARDS, 1, false).then(() => { + this.timelineWindow.paginate(EventTimeline.FORWARDS, 1, false).then(() => { if (this.unmounted) { return; } - const { events, liveEvents, firstVisibleEventIndex } = this._getEvents(); + const { events, liveEvents, firstVisibleEventIndex } = this.getEvents(); const lastLiveEvent = liveEvents[liveEvents.length - 1]; - const updatedState = { + const updatedState: Partial = { events, liveEvents, firstVisibleEventIndex, @@ -537,15 +596,15 @@ class TimelinePanel extends React.Component { // we know we're stuckAtBottom, so we can advance the RM // immediately, to save a later render cycle - this._setReadMarker(lastLiveEvent.getId(), lastLiveEvent.getTs(), true); + this.setReadMarker(lastLiveEvent.getId(), lastLiveEvent.getTs(), true); updatedState.readMarkerVisible = false; updatedState.readMarkerEventId = lastLiveEvent.getId(); callRMUpdated = true; } } - this.setState(updatedState, () => { - this._messagePanel.current.updateTimelineMinHeight(); + this.setState(updatedState, () => { + this.messagePanel.current.updateTimelineMinHeight(); if (callRMUpdated) { this.props.onReadMarkerUpdated(); } @@ -553,17 +612,17 @@ class TimelinePanel extends React.Component { }); }; - onRoomTimelineReset = (room, timelineSet) => { + private onRoomTimelineReset = (room: Room, timelineSet: TimelineSet): void => { if (timelineSet !== this.props.timelineSet) return; - if (this._messagePanel.current && this._messagePanel.current.isAtBottom()) { - this._loadTimeline(); + if (this.messagePanel.current && this.messagePanel.current.isAtBottom()) { + this.loadTimeline(); } }; - canResetTimeline = () => this._messagePanel.current && this._messagePanel.current.isAtBottom(); + public canResetTimeline = () => this.messagePanel?.current.isAtBottom(); - onRoomRedaction = (ev, room) => { + private onRoomRedaction = (ev: MatrixEvent, room: Room): void => { if (this.unmounted) return; // ignore events for other rooms @@ -574,7 +633,7 @@ class TimelinePanel extends React.Component { this.forceUpdate(); }; - onEventReplaced = (replacedEvent, room) => { + private onEventReplaced = (replacedEvent: MatrixEvent, room: Room): void => { if (this.unmounted) return; // ignore events for other rooms @@ -585,7 +644,7 @@ class TimelinePanel extends React.Component { this.forceUpdate(); }; - onRoomReceipt = (ev, room) => { + private onRoomReceipt = (ev: MatrixEvent, room: Room): void => { if (this.unmounted) return; // ignore events for other rooms @@ -594,22 +653,22 @@ class TimelinePanel extends React.Component { this.forceUpdate(); }; - onLocalEchoUpdated = (ev, room, oldEventId) => { + private onLocalEchoUpdated = (ev: MatrixEvent, room: Room, oldEventId: string): void => { if (this.unmounted) return; // ignore events for other rooms if (room !== this.props.timelineSet.room) return; - this._reloadEvents(); + this.reloadEvents(); }; - onAccountData = (ev, room) => { + private onAccountData = (ev: MatrixEvent, room: Room): void => { if (this.unmounted) return; // ignore events for other rooms if (room !== this.props.timelineSet.room) return; - if (ev.getType() !== "m.fully_read") return; + if (ev.getType() !== EventType.FullyRead) return; // XXX: roomReadMarkerTsMap not updated here so it is now inconsistent. Replace // this mechanism of determining where the RM is relative to the view-port with @@ -619,7 +678,7 @@ class TimelinePanel extends React.Component { }, this.props.onReadMarkerUpdated); }; - onEventDecrypted = ev => { + private onEventDecrypted = (ev: MatrixEvent): void => { // Can be null for the notification timeline, etc. if (!this.props.timelineSet.room) return; @@ -634,46 +693,46 @@ class TimelinePanel extends React.Component { } }; - onSync = (state, prevState, data) => { - this.setState({clientSyncState: state}); + private onSync = (clientSyncState: SyncState, prevState: SyncState, data: object): void => { + this.setState({ clientSyncState }); }; - _readMarkerTimeout(readMarkerPosition) { + private readMarkerTimeout(readMarkerPosition: number): number { return readMarkerPosition === 0 ? this.state.readMarkerInViewThresholdMs : this.state.readMarkerOutOfViewThresholdMs; } - async updateReadMarkerOnUserActivity() { - const initialTimeout = this._readMarkerTimeout(this.getReadMarkerPosition()); - this._readMarkerActivityTimer = new Timer(initialTimeout); + private async updateReadMarkerOnUserActivity(): Promise { + const initialTimeout = this.readMarkerTimeout(this.getReadMarkerPosition()); + this.readMarkerActivityTimer = new Timer(initialTimeout); - while (this._readMarkerActivityTimer) { //unset on unmount - UserActivity.sharedInstance().timeWhileActiveRecently(this._readMarkerActivityTimer); + while (this.readMarkerActivityTimer) { //unset on unmount + UserActivity.sharedInstance().timeWhileActiveRecently(this.readMarkerActivityTimer); try { - await this._readMarkerActivityTimer.finished(); + await this.readMarkerActivityTimer.finished(); } catch (e) { continue; /* aborted */ } // outside of try/catch to not swallow errors this.updateReadMarker(); } } - async updateReadReceiptOnUserActivity() { - this._readReceiptActivityTimer = new Timer(READ_RECEIPT_INTERVAL_MS); - while (this._readReceiptActivityTimer) { //unset on unmount - UserActivity.sharedInstance().timeWhileActiveNow(this._readReceiptActivityTimer); + private async updateReadReceiptOnUserActivity(): Promise { + this.readReceiptActivityTimer = new Timer(READ_RECEIPT_INTERVAL_MS); + while (this.readReceiptActivityTimer) { //unset on unmount + UserActivity.sharedInstance().timeWhileActiveNow(this.readReceiptActivityTimer); try { - await this._readReceiptActivityTimer.finished(); + await this.readReceiptActivityTimer.finished(); } catch (e) { continue; /* aborted */ } // outside of try/catch to not swallow errors this.sendReadReceipt(); } } - sendReadReceipt = () => { + private sendReadReceipt = (): void => { if (SettingsStore.getValue("lowBandwidth")) return; - if (!this._messagePanel.current) return; + if (!this.messagePanel.current) return; if (!this.props.manageReadReceipts) return; // This happens on user_activity_end which is delayed, and it's // very possible have logged out within that timeframe, so check @@ -684,8 +743,8 @@ class TimelinePanel extends React.Component { let shouldSendRR = true; - const currentRREventId = this._getCurrentReadReceipt(true); - const currentRREventIndex = this._indexForEventId(currentRREventId); + const currentRREventId = this.getCurrentReadReceipt(true); + const currentRREventIndex = this.indexForEventId(currentRREventId); // We want to avoid sending out read receipts when we are looking at // events in the past which are before the latest RR. // @@ -700,11 +759,11 @@ class TimelinePanel extends React.Component { // the user eventually hits the live timeline. // if (currentRREventId && currentRREventIndex === null && - this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) { + this.timelineWindow.canPaginate(EventTimeline.FORWARDS)) { shouldSendRR = false; } - const lastReadEventIndex = this._getLastDisplayedEventIndex({ + const lastReadEventIndex = this.getLastDisplayedEventIndex({ ignoreOwn: true, }); if (lastReadEventIndex === null) { @@ -778,7 +837,7 @@ class TimelinePanel extends React.Component { // if the read marker is on the screen, we can now assume we've caught up to the end // of the screen, so move the marker down to the bottom of the screen. - updateReadMarker = () => { + private updateReadMarker = (): void => { if (!this.props.manageReadMarkers) return; if (this.getReadMarkerPosition() === 1) { // the read marker is at an event below the viewport, @@ -788,7 +847,7 @@ class TimelinePanel extends React.Component { // move the RM to *after* the message at the bottom of the screen. This // avoids a problem whereby we never advance the RM if there is a huge // message which doesn't fit on the screen. - const lastDisplayedIndex = this._getLastDisplayedEventIndex({ + const lastDisplayedIndex = this.getLastDisplayedEventIndex({ allowPartial: true, }); @@ -796,7 +855,7 @@ class TimelinePanel extends React.Component { return; } const lastDisplayedEvent = this.state.events[lastDisplayedIndex]; - this._setReadMarker( + this.setReadMarker( lastDisplayedEvent.getId(), lastDisplayedEvent.getTs(), ); @@ -815,13 +874,13 @@ class TimelinePanel extends React.Component { // advance the read marker past any events we sent ourselves. - _advanceReadMarkerPastMyEvents() { + private advanceReadMarkerPastMyEvents(): void { if (!this.props.manageReadMarkers) return; - // we call `_timelineWindow.getEvents()` rather than using + // we call `timelineWindow.getEvents()` rather than using // `this.state.liveEvents`, because React batches the update to the // latter, so it may not have been updated yet. - const events = this._timelineWindow.getEvents(); + const events = this.timelineWindow.getEvents(); // first find where the current RM is let i; @@ -846,22 +905,22 @@ class TimelinePanel extends React.Component { i--; const ev = events[i]; - this._setReadMarker(ev.getId(), ev.getTs()); + this.setReadMarker(ev.getId(), ev.getTs()); } /* jump down to the bottom of this room, where new events are arriving */ - jumpToLiveTimeline = () => { + public jumpToLiveTimeline = (): void => { // if we can't forward-paginate the existing timeline, then there // is no point reloading it - just jump straight to the bottom. // // Otherwise, reload the timeline rather than trying to paginate // through all of space-time. - if (this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) { - this._loadTimeline(); + if (this.timelineWindow.canPaginate(EventTimeline.FORWARDS)) { + this.loadTimeline(); } else { - if (this._messagePanel.current) { - this._messagePanel.current.scrollToBottom(); + if (this.messagePanel.current) { + this.messagePanel.current.scrollToBottom(); } } }; @@ -869,22 +928,22 @@ class TimelinePanel extends React.Component { /* scroll to show the read-up-to marker. We put it 1/3 of the way down * the container. */ - jumpToReadMarker = () => { + public jumpToReadMarker = (): void => { if (!this.props.manageReadMarkers) return; - if (!this._messagePanel.current) return; + if (!this.messagePanel.current) return; if (!this.state.readMarkerEventId) return; // we may not have loaded the event corresponding to the read-marker - // into the _timelineWindow. In that case, attempts to scroll to it + // into the timelineWindow. In that case, attempts to scroll to it // will fail. // // a quick way to figure out if we've loaded the relevant event is // simply to check if the messagepanel knows where the read-marker is. - const ret = this._messagePanel.current.getReadMarkerPosition(); + const ret = this.messagePanel.current.getReadMarkerPosition(); if (ret !== null) { // The messagepanel knows where the RM is, so we must have loaded // the relevant event. - this._messagePanel.current.scrollToEvent(this.state.readMarkerEventId, + this.messagePanel.current.scrollToEvent(this.state.readMarkerEventId, 0, 1/3); return; } @@ -892,15 +951,15 @@ class TimelinePanel extends React.Component { // Looks like we haven't loaded the event corresponding to the read-marker. // As with jumpToLiveTimeline, we want to reload the timeline around the // read-marker. - this._loadTimeline(this.state.readMarkerEventId, 0, 1/3); + this.loadTimeline(this.state.readMarkerEventId, 0, 1/3); }; /* update the read-up-to marker to match the read receipt */ - forgetReadMarker = () => { + public forgetReadMarker = (): void => { if (!this.props.manageReadMarkers) return; - const rmId = this._getCurrentReadReceipt(); + const rmId = this.getCurrentReadReceipt(); // see if we know the timestamp for the rr event const tl = this.props.timelineSet.getTimelineForEvent(rmId); @@ -912,17 +971,17 @@ class TimelinePanel extends React.Component { } } - this._setReadMarker(rmId, rmTs); + this.setReadMarker(rmId, rmTs); }; /* return true if the content is fully scrolled down and we are * at the end of the live timeline. */ - isAtEndOfLiveTimeline = () => { - return this._messagePanel.current - && this._messagePanel.current.isAtBottom() - && this._timelineWindow - && !this._timelineWindow.canPaginate(EventTimeline.FORWARDS); + public isAtEndOfLiveTimeline = (): boolean => { + return this.messagePanel.current + && this.messagePanel.current.isAtBottom() + && this.timelineWindow + && !this.timelineWindow.canPaginate(EventTimeline.FORWARDS); } @@ -931,9 +990,9 @@ class TimelinePanel extends React.Component { * * returns null if we are not mounted. */ - getScrollState = () => { - if (!this._messagePanel.current) { return null; } - return this._messagePanel.current.getScrollState(); + public getScrollState = (): IScrollState => { + if (!this.messagePanel.current) { return null; } + return this.messagePanel.current.getScrollState(); }; // returns one of: @@ -942,11 +1001,11 @@ class TimelinePanel extends React.Component { // -1: read marker is above the window // 0: read marker is visible // +1: read marker is below the window - getReadMarkerPosition = () => { + public getReadMarkerPosition = (): number => { if (!this.props.manageReadMarkers) return null; - if (!this._messagePanel.current) return null; + if (!this.messagePanel.current) return null; - const ret = this._messagePanel.current.getReadMarkerPosition(); + const ret = this.messagePanel.current.getReadMarkerPosition(); if (ret !== null) { return ret; } @@ -965,7 +1024,7 @@ class TimelinePanel extends React.Component { return null; }; - canJumpToReadMarker = () => { + public canJumpToReadMarker = (): boolean => { // 1. Do not show jump bar if neither the RM nor the RR are set. // 3. We want to show the bar if the read-marker is off the top of the screen. // 4. Also, if pos === null, the event might not be paginated - show the unread bar @@ -980,19 +1039,19 @@ class TimelinePanel extends React.Component { * * We pass it down to the scroll panel. */ - handleScrollKey = ev => { - if (!this._messagePanel.current) { return; } + public handleScrollKey = ev => { + if (!this.messagePanel.current) { return; } // jump to the live timeline on ctrl-end, rather than the end of the // timeline window. if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey && ev.key === Key.END) { this.jumpToLiveTimeline(); } else { - this._messagePanel.current.handleScrollKey(ev); + this.messagePanel.current.handleScrollKey(ev); } }; - _initTimeline(props) { + private initTimeline(props: IProps): void { const initialEvent = props.eventId; const pixelOffset = props.eventPixelOffset; @@ -1003,7 +1062,7 @@ class TimelinePanel extends React.Component { offsetBase = 0.5; } - return this._loadTimeline(initialEvent, pixelOffset, offsetBase); + return this.loadTimeline(initialEvent, pixelOffset, offsetBase); } /** @@ -1019,34 +1078,32 @@ class TimelinePanel extends React.Component { * @param {number?} offsetBase the reference point for the pixelOffset. 0 * means the top of the container, 1 means the bottom, and fractional * values mean somewhere in the middle. If omitted, it defaults to 0. - * - * returns a promise which will resolve when the load completes. */ - _loadTimeline(eventId, pixelOffset, offsetBase) { - this._timelineWindow = new TimelineWindow( + private loadTimeline(eventId?: string, pixelOffset?: number, offsetBase?: number): void { + this.timelineWindow = new TimelineWindow( MatrixClientPeg.get(), this.props.timelineSet, {windowLimit: this.props.timelineCap}); const onLoaded = () => { // clear the timeline min-height when // (re)loading the timeline - if (this._messagePanel.current) { - this._messagePanel.current.onTimelineReset(); + if (this.messagePanel.current) { + this.messagePanel.current.onTimelineReset(); } - this._reloadEvents(); + this.reloadEvents(); // If we switched away from the room while there were pending // outgoing events, the read-marker will be before those events. // We need to skip over any which have subsequently been sent. - this._advanceReadMarkerPastMyEvents(); + this.advanceReadMarkerPastMyEvents(); this.setState({ - canBackPaginate: this._timelineWindow.canPaginate(EventTimeline.BACKWARDS), - canForwardPaginate: this._timelineWindow.canPaginate(EventTimeline.FORWARDS), + canBackPaginate: this.timelineWindow.canPaginate(EventTimeline.BACKWARDS), + canForwardPaginate: this.timelineWindow.canPaginate(EventTimeline.FORWARDS), timelineLoading: false, }, () => { // initialise the scroll state of the message panel - if (!this._messagePanel.current) { + if (!this.messagePanel.current) { // this shouldn't happen - we know we're mounted because // we're in a setState callback, and we know // timelineLoading is now false, so render() should have @@ -1056,10 +1113,10 @@ class TimelinePanel extends React.Component { return; } if (eventId) { - this._messagePanel.current.scrollToEvent(eventId, pixelOffset, + this.messagePanel.current.scrollToEvent(eventId, pixelOffset, offsetBase); } else { - this._messagePanel.current.scrollToBottom(); + this.messagePanel.current.scrollToBottom(); } if (this.props.sendReadReceiptOnLoad) { @@ -1121,10 +1178,10 @@ class TimelinePanel extends React.Component { if (timeline) { // This is a hot-path optimization by skipping a promise tick // by repeating a no-op sync branch in TimelineSet.getTimelineForEvent & MatrixClient.getEventTimeline - this._timelineWindow.load(eventId, INITIAL_SIZE); // in this branch this method will happen in sync time + this.timelineWindow.load(eventId, INITIAL_SIZE); // in this branch this method will happen in sync time onLoaded(); } else { - const prom = this._timelineWindow.load(eventId, INITIAL_SIZE); + const prom = this.timelineWindow.load(eventId, INITIAL_SIZE); this.setState({ events: [], liveEvents: [], @@ -1139,17 +1196,17 @@ class TimelinePanel extends React.Component { // handle the completion of a timeline load or localEchoUpdate, by // reloading the events from the timelinewindow and pending event list into // the state. - _reloadEvents() { + private reloadEvents(): void { // we might have switched rooms since the load started - just bin // the results if so. if (this.unmounted) return; - this.setState(this._getEvents()); + this.setState(this.getEvents()); } // get the list of events from the timeline window and the pending event list - _getEvents() { - const events = this._timelineWindow.getEvents(); + private getEvents(): Pick { + const events: MatrixEvent[] = this.timelineWindow.getEvents(); // `arrayFastClone` performs a shallow copy of the array // we want the last event to be decrypted first but displayed last @@ -1161,14 +1218,14 @@ class TimelinePanel extends React.Component { client.decryptEventIfNeeded(event); }); - const firstVisibleEventIndex = this._checkForPreJoinUISI(events); + const firstVisibleEventIndex = this.checkForPreJoinUISI(events); // Hold onto the live events separately. The read receipt and read marker // should use this list, so that they don't advance into pending events. const liveEvents = [...events]; // if we're at the end of the live timeline, append the pending events - if (!this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) { + if (!this.timelineWindow.canPaginate(EventTimeline.FORWARDS)) { events.push(...this.props.timelineSet.getPendingEvents()); } @@ -1189,7 +1246,7 @@ class TimelinePanel extends React.Component { * undecryptable event that was sent while the user was not in the room. If no * such events were found, then it returns 0. */ - _checkForPreJoinUISI(events) { + private checkForPreJoinUISI(events: MatrixEvent[]): number { const room = this.props.timelineSet.room; if (events.length === 0 || !room || @@ -1253,7 +1310,7 @@ class TimelinePanel extends React.Component { return 0; } - _indexForEventId(evId) { + private indexForEventId(evId: string): number | null { for (let i = 0; i < this.state.events.length; ++i) { if (evId == this.state.events[i].getId()) { return i; @@ -1262,15 +1319,14 @@ class TimelinePanel extends React.Component { return null; } - _getLastDisplayedEventIndex(opts) { - opts = opts || {}; + private getLastDisplayedEventIndex(opts: IEventIndexOpts = {}): number | null { const ignoreOwn = opts.ignoreOwn || false; const allowPartial = opts.allowPartial || false; - const messagePanel = this._messagePanel.current; + const messagePanel = this.messagePanel.current; if (!messagePanel) return null; - const messagePanelNode = ReactDOM.findDOMNode(messagePanel); + const messagePanelNode = ReactDOM.findDOMNode(messagePanel) as HTMLElement; if (!messagePanelNode) return null; // sometimes this happens for fresh rooms/post-sync const wrapperRect = messagePanelNode.getBoundingClientRect(); const myUserId = MatrixClientPeg.get().credentials.userId; @@ -1347,7 +1403,7 @@ class TimelinePanel extends React.Component { * SDK. * @return {String} the event ID */ - _getCurrentReadReceipt(ignoreSynthesized) { + private getCurrentReadReceipt(ignoreSynthesized = false): string { const client = MatrixClientPeg.get(); // the client can be null on logout if (client == null) { @@ -1358,7 +1414,7 @@ class TimelinePanel extends React.Component { return this.props.timelineSet.room.getEventReadUpTo(myUserId, ignoreSynthesized); } - _setReadMarker(eventId, eventTs, inhibitSetState) { + private setReadMarker(eventId: string, eventTs: number, inhibitSetState = false): void { const roomId = this.props.timelineSet.room.roomId; // don't update the state (and cause a re-render) if there is @@ -1383,7 +1439,7 @@ class TimelinePanel extends React.Component { }, this.props.onReadMarkerUpdated); } - _shouldPaginate() { + private shouldPaginate(): boolean { // don't try to paginate while events in the timeline are // still being decrypted. We don't render events while they're // being decrypted, so they don't take up space in the timeline. @@ -1394,12 +1450,9 @@ class TimelinePanel extends React.Component { }); } - getRelationsForEvent = (...args) => this.props.timelineSet.getRelationsForEvent(...args); + private getRelationsForEvent = (...args) => this.props.timelineSet.getRelationsForEvent(...args); render() { - const MessagePanel = sdk.getComponent("structures.MessagePanel"); - const Loader = sdk.getComponent("elements.Spinner"); - // just show a spinner while the timeline loads. // // put it in a div of the right class (mx_RoomView_messagePanel) so @@ -1414,7 +1467,7 @@ class TimelinePanel extends React.Component { if (this.state.timelineLoading) { return (
    - +
    ); } @@ -1435,7 +1488,7 @@ class TimelinePanel extends React.Component { // forwards, otherwise if somebody hits the bottom of the loaded // events when viewing historical messages, we get stuck in a loop // of paginating our way through the entire history of the room. - const stickyBottom = !this._timelineWindow.canPaginate(EventTimeline.FORWARDS); + const stickyBottom = !this.timelineWindow.canPaginate(EventTimeline.FORWARDS); // If the state is PREPARED or CATCHUP, we're still waiting for the js-sdk to sync with // the HS and fetch the latest events, so we are effectively forward paginating. @@ -1448,7 +1501,7 @@ class TimelinePanel extends React.Component { : this.state.events; return (
    • ; + unfederatableSection =
    { _t('This room is not accessible by remote Matrix servers') }
    ; } let roomUpgradeButton; @@ -110,7 +111,7 @@ export default class AdvancedRoomSettingsTab extends React.Component

    - {_t( + { _t( "Warning: Upgrading a room will not automatically migrate room members " + "to the new version of the room. We'll post a link to the new room in the old " + "version of the room - room members will have to click this link to join the new room.", @@ -118,10 +119,10 @@ export default class AdvancedRoomSettingsTab extends React.Component {sub}, "i": (sub) => {sub}, }, - )} + ) }

    - {_t("Upgrade this room to the recommended room version")} + { _t("Upgrade this room to the recommended room version") }
    ); @@ -141,21 +142,21 @@ export default class AdvancedRoomSettingsTab extends React.Component -
    {_t("Advanced")}
    +
    { _t("Advanced") }
    { room?.isSpaceRoom() ? _t("Space information") : _t("Room information") }
    - {_t("Internal room ID:")}  + { _t("Internal room ID:") }  { this.props.roomId }
    { unfederatableSection }
    - {_t("Room version")} + { _t("Room version") }
    - {_t("Room version:")}  + { _t("Room version:") }  { room.getVersion() }
    { oldRoomLink } diff --git a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx index db0a180846..3afdc629e4 100644 --- a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx +++ b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx @@ -90,7 +90,7 @@ const SpaceSettingsGeneralTab = ({ matrixClient: cli, space, onFinished }: IProp }; return
    -
    {_t("General")}
    +
    { _t("General") }
    { _t("Edit settings relating to your space.") }
    diff --git a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx index 2f80ad97a6..263823603b 100644 --- a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx +++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx @@ -137,7 +137,7 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space }: IProps) => { } return
    -
    {_t("Visibility")}
    +
    { _t("Visibility") }
    { error &&
    { error }
    } From 9dc8493a5c845336dafc774193353d08e1ef5971 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 22:07:42 +0100 Subject: [PATCH 0555/1270] Hide communities invites and the community autocompleter when Spaces Beta is enabled --- src/autocomplete/Autocompleter.ts | 3 ++- src/components/views/rooms/RoomList.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/autocomplete/Autocompleter.ts b/src/autocomplete/Autocompleter.ts index ea8eddbb8d..7f3f5d2c01 100644 --- a/src/autocomplete/Autocompleter.ts +++ b/src/autocomplete/Autocompleter.ts @@ -55,13 +55,14 @@ const PROVIDERS = [ EmojiProvider, NotifProvider, CommandProvider, - CommunityProvider, DuckDuckGoProvider, ]; // as the spaces feature is device configurable only, and toggling it refreshes the page, we can do this here if (SettingsStore.getValue("feature_spaces")) { PROVIDERS.push(SpaceProvider); +} else { + PROVIDERS.push(CommunityProvider); } // Providers will get rejected if they take longer than this. diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 5a1c3a24b3..704c3cf620 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -466,6 +466,7 @@ export default class RoomList extends React.PureComponent { } private renderCommunityInvites(): ReactComponentElement[] { + if (SettingsStore.getValue("feature_spaces")) return []; // TODO: Put community invites in a more sensible place (not in the room list) // See https://github.com/vector-im/element-web/issues/14456 return MatrixClientPeg.get().getGroups().filter(g => { From 83296b74404c6a6e594c9bd382bbb9d37f4248ab Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 22:19:01 +0100 Subject: [PATCH 0556/1270] Fix typing --- src/hooks/useRoomState.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/hooks/useRoomState.ts b/src/hooks/useRoomState.ts index 11ac7de49e..e778acf8a9 100644 --- a/src/hooks/useRoomState.ts +++ b/src/hooks/useRoomState.ts @@ -24,7 +24,10 @@ type Mapper = (roomState: RoomState) => T; const defaultMapper: Mapper = (roomState: RoomState) => roomState; // Hook to simplify watching Matrix Room state -export const useRoomState = (room: Room, mapper: Mapper = defaultMapper): T => { +export const useRoomState = ( + room: Room, + mapper: Mapper = defaultMapper as Mapper, +): T => { const [value, setValue] = useState(room ? mapper(room.currentState) : undefined); const update = useCallback(() => { From e0ac200e27197617d9be4df78ef957441fed2fde Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 22:23:09 +0100 Subject: [PATCH 0557/1270] Iterate PR --- src/DecryptionFailureTracker.ts | 4 ++-- src/HtmlUtils.tsx | 4 ++-- src/utils/EditorStateTransfer.ts | 10 +++++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/DecryptionFailureTracker.ts b/src/DecryptionFailureTracker.ts index 960d844e9e..07c0c546fe 100644 --- a/src/DecryptionFailureTracker.ts +++ b/src/DecryptionFailureTracker.ts @@ -25,7 +25,7 @@ export class DecryptionFailure { } } -type Fn = (count: number, trackedErrCode: string) => void; +type TrackingFn = (count: number, trackedErrCode: string) => void; type ErrCodeMapFn = (errcode: string) => string; export class DecryptionFailureTracker { @@ -73,7 +73,7 @@ export class DecryptionFailureTracker { * @param {function?} errorCodeMapFn The function used to map error codes to the * trackedErrorCode. If not provided, the `.code` of errors will be used. */ - constructor(private readonly fn: Fn, private readonly errorCodeMapFn?: ErrCodeMapFn) { + constructor(private readonly fn: TrackingFn, private readonly errorCodeMapFn?: ErrCodeMapFn) { if (!fn || typeof fn !== 'function') { throw new Error('DecryptionFailureTracker requires tracking function'); } diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 5803029030..983538d65b 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -505,7 +505,7 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts * @param {object} [options] Options for linkifyString. Default: linkifyMatrix.options * @returns {string} Linkified string */ -export function linkifyString(str: string, options = linkifyMatrix.options) { +export function linkifyString(str: string, options = linkifyMatrix.options): string { return _linkifyString(str, options); } @@ -516,7 +516,7 @@ export function linkifyString(str: string, options = linkifyMatrix.options) { * @param {object} [options] Options for linkifyElement. Default: linkifyMatrix.options * @returns {object} */ -export function linkifyElement(element: HTMLElement, options = linkifyMatrix.options) { +export function linkifyElement(element: HTMLElement, options = linkifyMatrix.options): HTMLElement { return _linkifyElement(element, options); } diff --git a/src/utils/EditorStateTransfer.ts b/src/utils/EditorStateTransfer.ts index 42e1a316d6..ba303f9b73 100644 --- a/src/utils/EditorStateTransfer.ts +++ b/src/utils/EditorStateTransfer.ts @@ -30,24 +30,24 @@ export default class EditorStateTransfer { constructor(private readonly event: MatrixEvent) {} - setEditorState(caret: Caret, serializedParts: SerializedPart[]) { + public setEditorState(caret: Caret, serializedParts: SerializedPart[]) { this.caret = caret; this.serializedParts = serializedParts; } - hasEditorState() { + public hasEditorState() { return !!this.serializedParts; } - getSerializedParts() { + public getSerializedParts() { return this.serializedParts; } - getCaret() { + public getCaret() { return this.caret; } - getEvent() { + public getEvent() { return this.event; } } From ffaa19ef2c27f361c8fcc0367e491dca528e697b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 22:27:12 +0100 Subject: [PATCH 0558/1270] fix typing --- .../views/dialogs/ForwardDialog.tsx | 31 ++++++++++--------- .../views/elements/EventTilePreview.tsx | 9 +++--- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index a83f3f177c..6fbed6fc8b 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/src/components/views/dialogs/ForwardDialog.tsx @@ -14,30 +14,31 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {useMemo, useState, useEffect} from "react"; +import React, { useMemo, useState, useEffect } from "react"; import classnames from "classnames"; -import {MatrixEvent} from "matrix-js-sdk/src/models/event"; -import {Room} from "matrix-js-sdk/src/models/room"; -import {MatrixClient} from "matrix-js-sdk/src/client"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; -import {_t} from "../../../languageHandler"; +import { _t } from "../../../languageHandler"; import dis from "../../../dispatcher/dispatcher"; -import {useSettingValue, useFeatureEnabled} from "../../../hooks/useSettings"; -import {UIFeature} from "../../../settings/UIFeature"; -import {Layout} from "../../../settings/Layout"; -import {IDialogProps} from "./IDialogProps"; +import { useSettingValue, useFeatureEnabled } from "../../../hooks/useSettings"; +import { UIFeature } from "../../../settings/UIFeature"; +import { Layout } from "../../../settings/Layout"; +import { IDialogProps } from "./IDialogProps"; import BaseDialog from "./BaseDialog"; -import {avatarUrlForUser} from "../../../Avatar"; +import { avatarUrlForUser } from "../../../Avatar"; import EventTile from "../rooms/EventTile"; import SearchBox from "../../structures/SearchBox"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; -import {Alignment} from '../elements/Tooltip'; +import { Alignment } from '../elements/Tooltip'; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; -import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState"; +import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState"; import NotificationBadge from "../rooms/NotificationBadge"; -import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"; -import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm"; +import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; +import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm"; import QueryMatcher from "../../../autocomplete/QueryMatcher"; const AVATAR_SIZE = 30; @@ -171,7 +172,7 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr ); }, getMxcAvatarUrl: () => profileInfo.avatar_url, - }; + } as RoomMember; const [query, setQuery] = useState(""); const lcQuery = query.toLowerCase(); diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index cf3b7a6e61..366d918bcf 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -17,13 +17,14 @@ limitations under the License. import React from 'react'; import classnames from 'classnames'; import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; +import { RoomMember } from 'matrix-js-sdk/src/models/room-member'; import * as Avatar from '../../../Avatar'; import EventTile from '../rooms/EventTile'; import SettingsStore from "../../../settings/SettingsStore"; -import {Layout} from "../../../settings/Layout"; -import {UIFeature} from "../../../settings/UIFeature"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { Layout } from "../../../settings/Layout"; +import { UIFeature } from "../../../settings/UIFeature"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; interface IProps { /** @@ -110,7 +111,7 @@ export default class EventTilePreview extends React.Component { ); }, getMxcAvatarUrl: () => this.props.avatarUrl, - }; + } as RoomMember; return event; } From 38d0ab3c447409e6ce2130a8be1a4f1eac1ad622 Mon Sep 17 00:00:00 2001 From: Aaron Raimist Date: Tue, 22 Jun 2021 22:35:47 -0500 Subject: [PATCH 0559/1270] Do not honor string power levels Signed-off-by: Aaron Raimist --- src/TextForEvent.ts | 18 +++++++++++++----- .../tabs/room/RolesRoomSettingsTab.tsx | 1 + 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts index 649c53664e..62f73082ed 100644 --- a/src/TextForEvent.ts +++ b/src/TextForEvent.ts @@ -427,7 +427,8 @@ function textForPowerEvent(event): () => string | null { !event.getContent() || !event.getContent().users) { return null; } - const userDefault = event.getContent().users_default || 0; + const previousUserDefault = event.getPrevContent().users_default || 0; + const currentUserDefault = event.getContent().users_default || 0; // Construct set of userIds const users = []; Object.keys(event.getContent().users).forEach( @@ -443,9 +444,16 @@ function textForPowerEvent(event): () => string | null { const diffs = []; users.forEach((userId) => { // Previous power level - const from = event.getPrevContent().users[userId]; + var from = event.getPrevContent().users[userId]; + if (!Number.isInteger(from)) { + from = previousUserDefault; + } // Current power level - const to = event.getContent().users[userId]; + var to = event.getContent().users[userId]; + if (!Number.isInteger(to)) { + to = currentUserDefault; + } + if (from === previousUserDefault && to === currentUserDefault) { return; } if (to !== from) { diffs.push({ userId, from, to }); } @@ -459,8 +467,8 @@ function textForPowerEvent(event): () => string | null { powerLevelDiffText: diffs.map(diff => _t('%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s', { userId: diff.userId, - fromPowerLevel: Roles.textualPowerLevel(diff.from, userDefault), - toPowerLevel: Roles.textualPowerLevel(diff.to, userDefault), + fromPowerLevel: Roles.textualPowerLevel(diff.from, previousUserDefault), + toPowerLevel: Roles.textualPowerLevel(diff.to, currentUserDefault), }), ).join(", "), }); diff --git a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx index 19ebe2a77e..75e6cc3a3d 100644 --- a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx @@ -284,6 +284,7 @@ export default class RolesRoomSettingsTab extends React.Component { const mutedUsers = []; Object.keys(userLevels).forEach((user) => { + if (!Number.isInteger(userLevels[user])) { return; } const canChange = userLevels[user] < currentUserLevel && canChangeLevels; if (userLevels[user] > defaultUserLevel) { // privileged privilegedUsers.push( From 9d723cd1b697462ecd940c1264329c162e544b66 Mon Sep 17 00:00:00 2001 From: Aaron Raimist Date: Tue, 22 Jun 2021 22:48:01 -0500 Subject: [PATCH 0560/1270] lint Signed-off-by: Aaron Raimist --- src/TextForEvent.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts index 62f73082ed..e162b09ed4 100644 --- a/src/TextForEvent.ts +++ b/src/TextForEvent.ts @@ -444,12 +444,12 @@ function textForPowerEvent(event): () => string | null { const diffs = []; users.forEach((userId) => { // Previous power level - var from = event.getPrevContent().users[userId]; + let from = event.getPrevContent().users[userId]; if (!Number.isInteger(from)) { from = previousUserDefault; } // Current power level - var to = event.getContent().users[userId]; + let to = event.getContent().users[userId]; if (!Number.isInteger(to)) { to = currentUserDefault; } From 9bceb40820baaab07f5a222641777ecc98f5ba96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 09:26:33 +0200 Subject: [PATCH 0561/1270] CallMediaHandler -> MediaDeviceHandler MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/CallMediaHandler.js | 85 ---------------- src/MediaDeviceHandler.ts | 96 +++++++++++++++++++ src/components/structures/LoggedInView.tsx | 4 +- .../views/rooms/VoiceRecordComposerTile.tsx | 6 +- .../tabs/user/VoiceUserSettingsTab.js | 24 ++--- src/components/views/voip/AudioFeed.tsx | 4 +- src/voice/VoiceRecording.ts | 4 +- 7 files changed, 117 insertions(+), 106 deletions(-) delete mode 100644 src/CallMediaHandler.js create mode 100644 src/MediaDeviceHandler.ts diff --git a/src/CallMediaHandler.js b/src/CallMediaHandler.js deleted file mode 100644 index 634f0bb336..0000000000 --- a/src/CallMediaHandler.js +++ /dev/null @@ -1,85 +0,0 @@ -/* - Copyright 2017 Michael Telatynski <7t3chguy@gmail.com> - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ - -import SettingsStore from "./settings/SettingsStore"; -import {SettingLevel} from "./settings/SettingLevel"; -import {setMatrixCallAudioInput, setMatrixCallVideoInput} from "matrix-js-sdk/src/matrix"; - -export default { - hasAnyLabeledDevices: async function() { - const devices = await navigator.mediaDevices.enumerateDevices(); - return devices.some(d => !!d.label); - }, - - getDevices: function() { - // Only needed for Electron atm, though should work in modern browsers - // once permission has been granted to the webapp - return navigator.mediaDevices.enumerateDevices().then(function(devices) { - const audiooutput = []; - const audioinput = []; - const videoinput = []; - - devices.forEach((device) => { - switch (device.kind) { - case 'audiooutput': audiooutput.push(device); break; - case 'audioinput': audioinput.push(device); break; - case 'videoinput': videoinput.push(device); break; - } - }); - - // console.log("Loaded WebRTC Devices", mediaDevices); - return { - audiooutput, - audioinput, - videoinput, - }; - }, (error) => { console.log('Unable to refresh WebRTC Devices: ', error); }); - }, - - loadDevices: function() { - const audioDeviceId = SettingsStore.getValue("webrtc_audioinput"); - const videoDeviceId = SettingsStore.getValue("webrtc_videoinput"); - - setMatrixCallAudioInput(audioDeviceId); - setMatrixCallVideoInput(videoDeviceId); - }, - - setAudioOutput: function(deviceId) { - SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId); - }, - - setAudioInput: function(deviceId) { - SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId); - setMatrixCallAudioInput(deviceId); - }, - - setVideoInput: function(deviceId) { - SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId); - setMatrixCallVideoInput(deviceId); - }, - - getAudioOutput: function() { - return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audiooutput"); - }, - - getAudioInput: function() { - return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audioinput"); - }, - - getVideoInput: function() { - return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_videoinput"); - }, -}; diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts new file mode 100644 index 0000000000..96fd764b98 --- /dev/null +++ b/src/MediaDeviceHandler.ts @@ -0,0 +1,96 @@ +/* +Copyright 2017 Michael Telatynski <7t3chguy@gmail.com> +Copyright 2021 Šimon Brandner + +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 SettingsStore from "./settings/SettingsStore"; +import { SettingLevel } from "./settings/SettingLevel"; +import { setMatrixCallAudioInput, setMatrixCallVideoInput } from "matrix-js-sdk/src/matrix"; + +interface IMediaDevices { + audioOutput: Array; + audioInput: Array; + videoInput: Array; +} + +export default class MediaDeviceHandler { + static async hasAnyLabeledDevices(): Promise { + const devices = await navigator.mediaDevices.enumerateDevices(); + return devices.some(d => Boolean(d.label)); + } + + static async getDevices(): Promise { + // Only needed for Electron atm, though should work in modern browsers + // once permission has been granted to the webapp + + try { + const devices = await navigator.mediaDevices.enumerateDevices(); + + const audioOutput = []; + const audioInput = []; + const videoInput = []; + + devices.forEach((device) => { + switch (device.kind) { + case 'audiooutput': audioOutput.push(device); break; + case 'audioinput': audioInput.push(device); break; + case 'videoinput': videoInput.push(device); break; + } + }); + + return { + audioOutput: audioOutput, + audioInput: audioInput, + videoInput: videoInput, + }; + } catch (error) { + console.log('Unable to refresh WebRTC Devices: ', error); + } + } + + static loadDevices() { + const audioDeviceId = SettingsStore.getValue("webrtc_audioinput"); + const videoDeviceId = SettingsStore.getValue("webrtc_videoinput"); + + setMatrixCallAudioInput(audioDeviceId); + setMatrixCallVideoInput(videoDeviceId); + } + + static setAudioOutput(deviceId: string) { + SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId); + } + + static setAudioInput(deviceId: string) { + SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId); + setMatrixCallAudioInput(deviceId); + } + + static setVideoInput(deviceId: string) { + SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId); + setMatrixCallVideoInput(deviceId); + } + + static getAudioOutput(): string { + return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audiooutput"); + } + + static getAudioInput(): string { + return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audioinput"); + } + + static getVideoInput(): string { + return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_videoinput"); + } +} diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index e3d6b1ab9c..5ad67232a4 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -22,7 +22,7 @@ import { MatrixClient } from 'matrix-js-sdk/src/client'; import {Key} from '../../Keyboard'; import PageTypes from '../../PageTypes'; -import CallMediaHandler from '../../CallMediaHandler'; +import MediaDeviceHandler from '../../MediaDeviceHandler'; import { fixupColorFonts } from '../../utils/FontManager'; import * as sdk from '../../index'; import dis from '../../dispatcher/dispatcher'; @@ -167,7 +167,7 @@ class LoggedInView extends React.Component { // stash the MatrixClient in case we log out before we are unmounted this._matrixClient = this.props.matrixClient; - CallMediaHandler.loadDevices(); + MediaDeviceHandler.loadDevices(); fixupColorFonts(); diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index 20d8c9c5d4..122ba0ca0b 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -30,7 +30,7 @@ import RecordingPlayback from "../voice_messages/RecordingPlayback"; import {MsgType} from "matrix-js-sdk/src/@types/event"; import Modal from "../../../Modal"; import ErrorDialog from "../dialogs/ErrorDialog"; -import CallMediaHandler from "../../../CallMediaHandler"; +import MediaDeviceHandler from "../../../MediaDeviceHandler"; interface IProps { room: Room; @@ -129,8 +129,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js index 362059f8ed..962f1fcd44 100644 --- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js @@ -18,7 +18,7 @@ limitations under the License. import React from 'react'; import {_t} from "../../../../../languageHandler"; import SdkConfig from "../../../../../SdkConfig"; -import CallMediaHandler from "../../../../../CallMediaHandler"; +import MediaDeviceHandler from "../../../../../MediaDeviceHandler"; import Field from "../../../elements/Field"; import AccessibleButton from "../../../elements/AccessibleButton"; import {MatrixClientPeg} from "../../../../../MatrixClientPeg"; @@ -41,7 +41,7 @@ export default class VoiceUserSettingsTab extends React.Component { } async componentDidMount() { - const canSeeDeviceLabels = await CallMediaHandler.hasAnyLabeledDevices(); + const canSeeDeviceLabels = await MediaDeviceHandler.hasAnyLabeledDevices(); if (canSeeDeviceLabels) { this._refreshMediaDevices(); } @@ -49,10 +49,10 @@ export default class VoiceUserSettingsTab extends React.Component { _refreshMediaDevices = async (stream) => { this.setState({ - mediaDevices: await CallMediaHandler.getDevices(), - activeAudioOutput: CallMediaHandler.getAudioOutput(), - activeAudioInput: CallMediaHandler.getAudioInput(), - activeVideoInput: CallMediaHandler.getVideoInput(), + mediaDevices: await MediaDeviceHandler.getDevices(), + activeAudioOutput: MediaDeviceHandler.getAudioOutput(), + activeAudioInput: MediaDeviceHandler.getAudioInput(), + activeVideoInput: MediaDeviceHandler.getVideoInput(), }); if (stream) { // kill stream (after we've enumerated the devices, otherwise we'd get empty labels again) @@ -100,21 +100,21 @@ export default class VoiceUserSettingsTab extends React.Component { }; _setAudioOutput = (e) => { - CallMediaHandler.setAudioOutput(e.target.value); + MediaDeviceHandler.setAudioOutput(e.target.value); this.setState({ activeAudioOutput: e.target.value, }); }; _setAudioInput = (e) => { - CallMediaHandler.setAudioInput(e.target.value); + MediaDeviceHandler.setAudioInput(e.target.value); this.setState({ activeAudioInput: e.target.value, }); }; _setVideoInput = (e) => { - CallMediaHandler.setVideoInput(e.target.value); + MediaDeviceHandler.setVideoInput(e.target.value); this.setState({ activeVideoInput: e.target.value, }); @@ -171,7 +171,7 @@ export default class VoiceUserSettingsTab extends React.Component { } }; - const audioOutputs = this.state.mediaDevices.audiooutput.slice(0); + const audioOutputs = this.state.mediaDevices.audioOutput.slice(0); if (audioOutputs.length > 0) { const defaultDevice = getDefaultDevice(audioOutputs); speakerDropdown = ( @@ -183,7 +183,7 @@ export default class VoiceUserSettingsTab extends React.Component { ); } - const audioInputs = this.state.mediaDevices.audioinput.slice(0); + const audioInputs = this.state.mediaDevices.audioInput.slice(0); if (audioInputs.length > 0) { const defaultDevice = getDefaultDevice(audioInputs); microphoneDropdown = ( @@ -195,7 +195,7 @@ export default class VoiceUserSettingsTab extends React.Component { ); } - const videoInputs = this.state.mediaDevices.videoinput.slice(0); + const videoInputs = this.state.mediaDevices.videoInput.slice(0); if (videoInputs.length > 0) { const defaultDevice = getDefaultDevice(videoInputs); webcamDropdown = ( diff --git a/src/components/views/voip/AudioFeed.tsx b/src/components/views/voip/AudioFeed.tsx index c78f0c0fc8..80d658e7ee 100644 --- a/src/components/views/voip/AudioFeed.tsx +++ b/src/components/views/voip/AudioFeed.tsx @@ -17,7 +17,7 @@ limitations under the License. import React, {createRef} from 'react'; import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed'; import { logger } from 'matrix-js-sdk/src/logger'; -import CallMediaHandler from "../../../CallMediaHandler"; +import MediaDeviceHandler from "../../../MediaDeviceHandler"; interface IProps { feed: CallFeed, @@ -38,7 +38,7 @@ export default class AudioFeed extends React.Component { private playMedia() { const element = this.element.current; - const audioOutput = CallMediaHandler.getAudioOutput(); + const audioOutput = MediaDeviceHandler.getAudioOutput(); if (audioOutput) { try { diff --git a/src/voice/VoiceRecording.ts b/src/voice/VoiceRecording.ts index fde5779fa2..8f9e03bb8e 100644 --- a/src/voice/VoiceRecording.ts +++ b/src/voice/VoiceRecording.ts @@ -17,7 +17,7 @@ limitations under the License. import * as Recorder from 'opus-recorder'; import encoderPath from 'opus-recorder/dist/encoderWorker.min.js'; import {MatrixClient} from "matrix-js-sdk/src/client"; -import CallMediaHandler from "../CallMediaHandler"; +import MediaDeviceHandler from "../MediaDeviceHandler"; import {SimpleObservable} from "matrix-widget-api"; import {clamp, percentageOf, percentageWithin} from "../utils/numbers"; import EventEmitter from "events"; @@ -97,7 +97,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable { audio: { channelCount: CHANNELS, noiseSuppression: true, // browsers ignore constraints they can't honour - deviceId: CallMediaHandler.getAudioInput(), + deviceId: MediaDeviceHandler.getAudioInput(), }, }); this.recorderContext = createAudioContext({ From 057f46ad9d10370416af0ad951858f17c1caff55 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 23 Jun 2021 08:44:48 +0100 Subject: [PATCH 0562/1270] fix dependency and lockfile mismatch --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bb703c33f0..6b369e9c27 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "@sinonjs/fake-timers": "^7.0.2", "@types/classnames": "^2.2.11", "@types/counterpart": "^0.18.1", - "@types/diff-match-patch": "^1.0.5", + "@types/diff-match-patch": "^1.0.32", "@types/flux": "^3.1.9", "@types/jest": "^26.0.20", "@types/linkifyjs": "^2.1.3", From 58151d71c5b806ece26345ba2fc37d3a5dbe7a3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 09:56:37 +0200 Subject: [PATCH 0563/1270] Handle mid-call output changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/MediaDeviceHandler.ts | 27 ++++++++++++++++--- .../tabs/user/VoiceUserSettingsTab.js | 6 ++--- src/components/views/voip/AudioFeed.tsx | 18 ++++++++++--- 3 files changed, 40 insertions(+), 11 deletions(-) diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts index 96fd764b98..8780cea359 100644 --- a/src/MediaDeviceHandler.ts +++ b/src/MediaDeviceHandler.ts @@ -18,6 +18,7 @@ limitations under the License. import SettingsStore from "./settings/SettingsStore"; import { SettingLevel } from "./settings/SettingLevel"; import { setMatrixCallAudioInput, setMatrixCallVideoInput } from "matrix-js-sdk/src/matrix"; +import EventEmitter from 'events'; interface IMediaDevices { audioOutput: Array; @@ -25,7 +26,22 @@ interface IMediaDevices { videoInput: Array; } -export default class MediaDeviceHandler { +export enum MediaDeviceHandlerEvent { + AudioOutputChanged = "audio_output_changed", + AudioInputChanged = "audio_input_changed", + VideoInputChanged = "video_input_changed", +} + +export default class MediaDeviceHandler extends EventEmitter { + private static internalInstance; + + public static get instance(): MediaDeviceHandler { + if (!MediaDeviceHandler.internalInstance) { + MediaDeviceHandler.internalInstance = new MediaDeviceHandler(); + } + return MediaDeviceHandler.internalInstance; + } + static async hasAnyLabeledDevices(): Promise { const devices = await navigator.mediaDevices.enumerateDevices(); return devices.some(d => Boolean(d.label)); @@ -68,18 +84,21 @@ export default class MediaDeviceHandler { setMatrixCallVideoInput(videoDeviceId); } - static setAudioOutput(deviceId: string) { + public setAudioOutput(deviceId: string) { SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId); + this.emit(MediaDeviceHandlerEvent.AudioOutputChanged, deviceId); } - static setAudioInput(deviceId: string) { + public setAudioInput(deviceId: string) { SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId); setMatrixCallAudioInput(deviceId); + this.emit(MediaDeviceHandlerEvent.AudioInputChanged, deviceId); } - static setVideoInput(deviceId: string) { + public setVideoInput(deviceId: string) { SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId); setMatrixCallVideoInput(deviceId); + this.emit(MediaDeviceHandlerEvent.VideoInputChanged, deviceId); } static getAudioOutput(): string { diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js index 962f1fcd44..f730406eed 100644 --- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js @@ -100,21 +100,21 @@ export default class VoiceUserSettingsTab extends React.Component { }; _setAudioOutput = (e) => { - MediaDeviceHandler.setAudioOutput(e.target.value); + MediaDeviceHandler.instance.setAudioOutput(e.target.value); this.setState({ activeAudioOutput: e.target.value, }); }; _setAudioInput = (e) => { - MediaDeviceHandler.setAudioInput(e.target.value); + MediaDeviceHandler.instance.setAudioInput(e.target.value); this.setState({ activeAudioInput: e.target.value, }); }; _setVideoInput = (e) => { - MediaDeviceHandler.setVideoInput(e.target.value); + MediaDeviceHandler.instance.setVideoInput(e.target.value); this.setState({ activeVideoInput: e.target.value, }); diff --git a/src/components/views/voip/AudioFeed.tsx b/src/components/views/voip/AudioFeed.tsx index 80d658e7ee..d29caf789e 100644 --- a/src/components/views/voip/AudioFeed.tsx +++ b/src/components/views/voip/AudioFeed.tsx @@ -17,7 +17,7 @@ limitations under the License. import React, {createRef} from 'react'; import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed'; import { logger } from 'matrix-js-sdk/src/logger'; -import MediaDeviceHandler from "../../../MediaDeviceHandler"; +import MediaDeviceHandler, { MediaDeviceHandlerEvent } from "../../../MediaDeviceHandler"; interface IProps { feed: CallFeed, @@ -27,19 +27,25 @@ export default class AudioFeed extends React.Component { private element = createRef(); componentDidMount() { + MediaDeviceHandler.instance.addListener( + MediaDeviceHandlerEvent.AudioOutputChanged, + this.onAudioOutputChanged, + ); this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream); this.playMedia(); } componentWillUnmount() { + MediaDeviceHandler.instance.removeListener( + MediaDeviceHandlerEvent.AudioOutputChanged, + this.onAudioOutputChanged, + ); this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream); this.stopMedia(); } - private playMedia() { + private onAudioOutputChanged = (audioOutput: string) => { const element = this.element.current; - const audioOutput = MediaDeviceHandler.getAudioOutput(); - if (audioOutput) { try { // This seems quite unreliable in Chrome, although I haven't yet managed to make a jsfiddle where @@ -52,7 +58,11 @@ export default class AudioFeed extends React.Component { logger.warn("Couldn't set requested audio output device: using default", e); } } + } + private playMedia() { + const element = this.element.current; + this.onAudioOutputChanged(MediaDeviceHandler.getAudioOutput()); element.muted = false; element.srcObject = this.props.feed.stream; element.autoplay = true; From 6c9e0e54e989eb2a1ea0d04645be6bc415380c12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 10:27:51 +0200 Subject: [PATCH 0564/1270] Iterate PR MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/MediaDeviceHandler.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts index 8780cea359..b8b00963b6 100644 --- a/src/MediaDeviceHandler.ts +++ b/src/MediaDeviceHandler.ts @@ -42,12 +42,12 @@ export default class MediaDeviceHandler extends EventEmitter { return MediaDeviceHandler.internalInstance; } - static async hasAnyLabeledDevices(): Promise { + public static async hasAnyLabeledDevices(): Promise { const devices = await navigator.mediaDevices.enumerateDevices(); return devices.some(d => Boolean(d.label)); } - static async getDevices(): Promise { + public static async getDevices(): Promise { // Only needed for Electron atm, though should work in modern browsers // once permission has been granted to the webapp @@ -76,7 +76,7 @@ export default class MediaDeviceHandler extends EventEmitter { } } - static loadDevices() { + public static loadDevices(): void { const audioDeviceId = SettingsStore.getValue("webrtc_audioinput"); const videoDeviceId = SettingsStore.getValue("webrtc_videoinput"); @@ -84,32 +84,32 @@ export default class MediaDeviceHandler extends EventEmitter { setMatrixCallVideoInput(videoDeviceId); } - public setAudioOutput(deviceId: string) { + public setAudioOutput(deviceId: string): void { SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId); this.emit(MediaDeviceHandlerEvent.AudioOutputChanged, deviceId); } - public setAudioInput(deviceId: string) { + public setAudioInput(deviceId: string): void { SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId); setMatrixCallAudioInput(deviceId); this.emit(MediaDeviceHandlerEvent.AudioInputChanged, deviceId); } - public setVideoInput(deviceId: string) { + public setVideoInput(deviceId: string): void { SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId); setMatrixCallVideoInput(deviceId); this.emit(MediaDeviceHandlerEvent.VideoInputChanged, deviceId); } - static getAudioOutput(): string { + public static getAudioOutput(): string { return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audiooutput"); } - static getAudioInput(): string { + public static getAudioInput(): string { return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audioinput"); } - static getVideoInput(): string { + public static getVideoInput(): string { return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_videoinput"); } } From a6367c079620d95141ddcd45c99952d250818568 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 23 Jun 2021 09:33:38 +0100 Subject: [PATCH 0565/1270] Reintroduce LiveRecording components for maintenance reasons --- .../views/rooms/VoiceRecordComposerTile.tsx | 8 ++--- src/components/views/voice_messages/Clock.tsx | 4 +-- .../voice_messages/LiveRecordingClock.tsx | 26 +++++++++++++++++ .../voice_messages/LiveRecordingWaveform.tsx | 29 +++++++++++++++++++ .../views/voice_messages/Waveform.tsx | 4 +-- 5 files changed, 63 insertions(+), 8 deletions(-) create mode 100644 src/components/views/voice_messages/LiveRecordingClock.tsx create mode 100644 src/components/views/voice_messages/LiveRecordingWaveform.tsx diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index 6fe6a5ab1c..5868eed02d 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -26,11 +26,11 @@ import { import {Room} from "matrix-js-sdk/src/models/room"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import classNames from "classnames"; -import Waveform from "../voice_messages/Waveform"; +import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { arrayFastResample, arraySeed } from "../../../utils/arrays"; import { percentageOf } from "../../../utils/numbers"; -import Clock from "../voice_messages/Clock"; +import LiveRecordingClock from "../voice_messages/LiveRecordingClock"; import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore"; import {UPDATE_EVENT} from "../../../stores/AsyncStore"; import RecordingPlayback from "../voice_messages/RecordingPlayback"; @@ -227,8 +227,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent - - + +
    ; } diff --git a/src/components/views/voice_messages/Clock.tsx b/src/components/views/voice_messages/Clock.tsx index 23e6762c52..1e78cc7bbd 100644 --- a/src/components/views/voice_messages/Clock.tsx +++ b/src/components/views/voice_messages/Clock.tsx @@ -15,9 +15,9 @@ limitations under the License. */ import React from "react"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; -interface IProps { +export interface IProps { seconds: number; } diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx new file mode 100644 index 0000000000..f88bb63ac7 --- /dev/null +++ b/src/components/views/voice_messages/LiveRecordingClock.tsx @@ -0,0 +1,26 @@ +/* +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 React from "react"; +import Clock, { IProps as IClockProps } from "./Clock"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; + +/** + * A clock for a live recording. + */ +@replaceableComponent("views.voice_messages.LiveRecordingClock") +export default class LiveRecordingClock extends React.PureComponent { + public render() { + return ; + } +} diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx new file mode 100644 index 0000000000..3d3169d764 --- /dev/null +++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx @@ -0,0 +1,29 @@ +/* +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 React from "react"; +import Waveform, { IProps as IWaveformProps } from "./Waveform"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; + +/** + * A waveform which shows the waveform of a live recording + */ +@replaceableComponent("views.voice_messages.LiveRecordingWaveform") +export default class LiveRecordingWaveform extends React.PureComponent { + public static defaultProps = { + progress: 1, + }; + public render() { + return ; + } +} diff --git a/src/components/views/voice_messages/Waveform.tsx b/src/components/views/voice_messages/Waveform.tsx index ae880933e6..5a4447065a 100644 --- a/src/components/views/voice_messages/Waveform.tsx +++ b/src/components/views/voice_messages/Waveform.tsx @@ -15,10 +15,10 @@ limitations under the License. */ import React from "react"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; import classNames from "classnames"; -interface IProps { +export interface IProps { relHeights: number[]; // relative heights (0-1) progress: number; // percent complete, 0-1, default 100% } From 95624b3fa62e4e223911720faf5da99739ac1493 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 10:37:15 +0200 Subject: [PATCH 0566/1270] Add some docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/MediaDeviceHandler.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts index b8b00963b6..10099bc7b8 100644 --- a/src/MediaDeviceHandler.ts +++ b/src/MediaDeviceHandler.ts @@ -76,6 +76,9 @@ export default class MediaDeviceHandler extends EventEmitter { } } + /** + * Retrieves devices from the SettingsStore and tells the js-sdk to use them + */ public static loadDevices(): void { const audioDeviceId = SettingsStore.getValue("webrtc_audioinput"); const videoDeviceId = SettingsStore.getValue("webrtc_videoinput"); @@ -89,12 +92,22 @@ export default class MediaDeviceHandler extends EventEmitter { this.emit(MediaDeviceHandlerEvent.AudioOutputChanged, deviceId); } + /** + * This will not change the device that a potential call uses. The call will + * need to be ended and started again for this change to take effect + * @param {string} deviceId + */ public setAudioInput(deviceId: string): void { SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId); setMatrixCallAudioInput(deviceId); this.emit(MediaDeviceHandlerEvent.AudioInputChanged, deviceId); } + /** + * This will not change the device that a potential call uses. The call will + * need to be ended and started again for this change to take effect + * @param {string} deviceId + */ public setVideoInput(deviceId: string): void { SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId); setMatrixCallVideoInput(deviceId); From 1bef985d46b507f1c0971e4b1ab54381d1c83e3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 10:39:10 +0200 Subject: [PATCH 0567/1270] Remove emmiting that isn't useful for us now MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/MediaDeviceHandler.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts index 10099bc7b8..e0375df1a4 100644 --- a/src/MediaDeviceHandler.ts +++ b/src/MediaDeviceHandler.ts @@ -28,8 +28,6 @@ interface IMediaDevices { export enum MediaDeviceHandlerEvent { AudioOutputChanged = "audio_output_changed", - AudioInputChanged = "audio_input_changed", - VideoInputChanged = "video_input_changed", } export default class MediaDeviceHandler extends EventEmitter { @@ -100,7 +98,6 @@ export default class MediaDeviceHandler extends EventEmitter { public setAudioInput(deviceId: string): void { SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId); setMatrixCallAudioInput(deviceId); - this.emit(MediaDeviceHandlerEvent.AudioInputChanged, deviceId); } /** @@ -111,7 +108,6 @@ export default class MediaDeviceHandler extends EventEmitter { public setVideoInput(deviceId: string): void { SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId); setMatrixCallVideoInput(deviceId); - this.emit(MediaDeviceHandlerEvent.VideoInputChanged, deviceId); } public static getAudioOutput(): string { From 0e582c425cfb62bfef1147d7a306199d5992ab86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 10:42:19 +0200 Subject: [PATCH 0568/1270] Make this look nicer Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com> --- src/MediaDeviceHandler.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts index e0375df1a4..45ebcd22eb 100644 --- a/src/MediaDeviceHandler.ts +++ b/src/MediaDeviceHandler.ts @@ -64,11 +64,7 @@ export default class MediaDeviceHandler extends EventEmitter { } }); - return { - audioOutput: audioOutput, - audioInput: audioInput, - videoInput: videoInput, - }; + return { audioOutput, audioInput, videoInput }; } catch (error) { console.log('Unable to refresh WebRTC Devices: ', error); } From 4ab9758b671d408f47399fe744290f41507b02ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 10:43:49 +0200 Subject: [PATCH 0569/1270] log -> warn MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/MediaDeviceHandler.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts index 45ebcd22eb..49ef123def 100644 --- a/src/MediaDeviceHandler.ts +++ b/src/MediaDeviceHandler.ts @@ -66,7 +66,7 @@ export default class MediaDeviceHandler extends EventEmitter { return { audioOutput, audioInput, videoInput }; } catch (error) { - console.log('Unable to refresh WebRTC Devices: ', error); + console.warn('Unable to refresh WebRTC Devices: ', error); } } From cdb97d549493e755922b45ff9d1526a9c9f9c5ba Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 23 Jun 2021 12:29:00 +0100 Subject: [PATCH 0570/1270] Fix trashcan.svg by exporting it with its viewbox then fix sizing and alignment of consumers --- res/css/structures/_RoomStatusBar.scss | 11 ++++------- res/css/views/rooms/_VoiceRecordComposerTile.scss | 6 +++--- res/img/element-icons/trashcan.svg | 4 ++-- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss index 8cc00aba0f..a09aa9e3a5 100644 --- a/res/css/structures/_RoomStatusBar.scss +++ b/res/css/structures/_RoomStatusBar.scss @@ -112,7 +112,7 @@ limitations under the License. .mx_AccessibleButton { padding: 5px 10px; - padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding + padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding display: inline-block; position: relative; @@ -128,13 +128,13 @@ limitations under the License. mask-repeat: no-repeat; mask-position: center; mask-size: contain; + width: 18px; + height: 18px; + top: calc(50% - 9px); // text sizes are dynamic } &.mx_RoomStatusBar_unsentCancelAllBtn::before { mask-image: url('$(res)/img/element-icons/trashcan.svg'); - width: 12px; - height: 16px; - top: calc(50% - 8px); // text sizes are dynamic } &.mx_RoomStatusBar_unsentResendAllBtn { @@ -142,9 +142,6 @@ limitations under the License. &::before { mask-image: url('$(res)/img/element-icons/retry.svg'); - width: 18px; - height: 18px; - top: calc(50% - 9px); // text sizes are dynamic } } } diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss index a3ee104bd8..5501ab343e 100644 --- a/res/css/views/rooms/_VoiceRecordComposerTile.scss +++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss @@ -36,10 +36,10 @@ limitations under the License. } .mx_VoiceRecordComposerTile_delete { - width: 14px; // w&h are size of icon - height: 18px; + width: 24px; + height: 24px; vertical-align: middle; - margin-right: 11px; // distance from left edge of waveform container (container has some margin too) + margin-right: 8px; // distance from left edge of waveform container (container has some margin too) background-color: $voice-record-icon-color; mask-repeat: no-repeat; mask-size: contain; diff --git a/res/img/element-icons/trashcan.svg b/res/img/element-icons/trashcan.svg index f8fb8b5c46..4106f0bd60 100644 --- a/res/img/element-icons/trashcan.svg +++ b/res/img/element-icons/trashcan.svg @@ -1,3 +1,3 @@ - - + + From a8dfc4488ffd51f36d23e16e92d26b2d3750a328 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 23 Jun 2021 14:47:24 +0100 Subject: [PATCH 0571/1270] Convert more of js-sdk crypto and fix underscored field accesses --- src/SecurityManager.ts | 5 +++-- src/components/views/dialogs/DevtoolsDialog.tsx | 2 +- src/components/views/settings/CrossSigningPanel.js | 4 ++-- src/components/views/settings/SecureBackupPanel.js | 2 +- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/SecurityManager.ts b/src/SecurityManager.ts index 09c8d30614..1ba0d6439b 100644 --- a/src/SecurityManager.ts +++ b/src/SecurityManager.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { ICryptoCallbacks, IDeviceTrustLevel, ISecretStorageKeyInfo } from 'matrix-js-sdk/src/matrix'; +import { ICryptoCallbacks, ISecretStorageKeyInfo } from 'matrix-js-sdk/src/matrix'; import { MatrixClient } from 'matrix-js-sdk/src/client'; import Modal from './Modal'; import * as sdk from './index'; @@ -28,6 +28,7 @@ import AccessSecretStorageDialog from './components/views/dialogs/security/Acces import RestoreKeyBackupDialog from './components/views/dialogs/security/RestoreKeyBackupDialog'; import SettingsStore from "./settings/SettingsStore"; import SecurityCustomisations from "./customisations/Security"; +import { DeviceTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning'; // This stores the secret storage private keys in memory for the JS SDK. This is // only meant to act as a cache to avoid prompting the user multiple times @@ -244,7 +245,7 @@ async function onSecretRequested( deviceId: string, requestId: string, name: string, - deviceTrust: IDeviceTrustLevel, + deviceTrust: DeviceTrustLevel, ): Promise { console.log("onSecretRequested", userId, deviceId, requestId, name, deviceTrust); const client = MatrixClientPeg.get(); diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx index 2690eb67d7..b1749b370a 100644 --- a/src/components/views/dialogs/DevtoolsDialog.tsx +++ b/src/components/views/dialogs/DevtoolsDialog.tsx @@ -766,7 +766,7 @@ class VerificationExplorer extends React.PureComponent { render() { const cli = this.context; const room = this.props.room; - const inRoomChannel = cli.crypto._inRoomVerificationRequests; + const inRoomChannel = cli.crypto.inRoomVerificationRequests; const inRoomRequests = (inRoomChannel._requestsByRoomId || new Map()).get(room.roomId) || new Map(); return (
    diff --git a/src/components/views/settings/CrossSigningPanel.js b/src/components/views/settings/CrossSigningPanel.js index 0cd1a64ada..43a13a48a7 100644 --- a/src/components/views/settings/CrossSigningPanel.js +++ b/src/components/views/settings/CrossSigningPanel.js @@ -79,8 +79,8 @@ export default class CrossSigningPanel extends React.PureComponent { async _getUpdatedStatus() { const cli = MatrixClientPeg.get(); const pkCache = cli.getCrossSigningCacheCallbacks(); - const crossSigning = cli.crypto._crossSigningInfo; - const secretStorage = cli.crypto._secretStorage; + const crossSigning = cli.crypto.crossSigningInfo; + const secretStorage = cli.crypto.secretStorage; const crossSigningPublicKeysOnDevice = crossSigning.getId(); const crossSigningPrivateKeysInStorage = await crossSigning.isStoredInSecretStorage(secretStorage); const masterPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("master")); diff --git a/src/components/views/settings/SecureBackupPanel.js b/src/components/views/settings/SecureBackupPanel.js index 4f3eb0bdf6..abfd18f0d3 100644 --- a/src/components/views/settings/SecureBackupPanel.js +++ b/src/components/views/settings/SecureBackupPanel.js @@ -131,7 +131,7 @@ export default class SecureBackupPanel extends React.PureComponent { async _getUpdatedDiagnostics() { const cli = MatrixClientPeg.get(); - const secretStorage = cli.crypto._secretStorage; + const secretStorage = cli.crypto.secretStorage; const backupKeyStored = !!(await cli.isKeyBackupKeyStored()); const backupKeyFromCache = await cli.crypto.getSessionBackupPrivateKey(); From 99c442cea78f2e0ff3666f127d1260be2bf313e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 13:45:55 +0200 Subject: [PATCH 0572/1270] Convert MemberList to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../rooms/{MemberList.js => MemberList.tsx} | 292 +++++++++++------- 1 file changed, 174 insertions(+), 118 deletions(-) rename src/components/views/rooms/{MemberList.js => MemberList.tsx} (64%) diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.tsx similarity index 64% rename from src/components/views/rooms/MemberList.js rename to src/components/views/rooms/MemberList.tsx index cb50f0fff3..5353eb94ed 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.tsx @@ -2,6 +2,7 @@ Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd Copyright 2017, 2018 New Vector Ltd +Copyright 2021 Šimon Brandner Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -20,17 +21,28 @@ import React from 'react'; import { _t } from '../../../languageHandler'; import SdkConfig from '../../../SdkConfig'; import dis from '../../../dispatcher/dispatcher'; -import {isValid3pidInvite} from "../../../RoomInvite"; -import rate_limited_func from "../../../ratelimitedfunc"; -import {MatrixClientPeg} from "../../../MatrixClientPeg"; -import * as sdk from "../../../index"; -import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore"; +import { isValid3pidInvite } from "../../../RoomInvite"; +import rateLimitedFunction from "../../../ratelimitedfunc"; +import { MatrixClientPeg } from "../../../MatrixClientPeg"; +import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore"; import BaseCard from "../right_panel/BaseCard"; -import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; +import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; import RoomAvatar from "../avatars/RoomAvatar"; import RoomName from "../elements/RoomName"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; import SettingsStore from "../../../settings/SettingsStore"; +import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; +import { Room } from 'matrix-js-sdk/src/models/room'; +import { RoomMember } from 'matrix-js-sdk/src/models/room-member'; +import { RoomState } from 'matrix-js-sdk/src/models/room-state'; +import { User } from "matrix-js-sdk/src/models/user"; +import TruncatedList from '../elements/TruncatedList'; +import Spinner from "../elements/Spinner"; +import SearchBox from "../../structures/SearchBox"; +import AccessibleButton from '../elements/AccessibleButton'; +import EntityTile from "./EntityTile"; +import MemberTile from "./MemberTile"; +import BaseAvatar from '../avatars/BaseAvatar'; const INITIAL_LOAD_NUM_MEMBERS = 30; const INITIAL_LOAD_NUM_INVITED = 5; @@ -40,41 +52,62 @@ const SHOW_MORE_INCREMENT = 100; // matches all ASCII punctuation: !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~ const SORT_REGEX = /[\x21-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]+/g; +interface IProps { + roomId: string; + onClose(): void; +} + +interface IState { + loading: boolean; + members: Array; + filteredJoinedMembers: Array; + filteredInvitedMembers: Array; + canInvite: boolean; + truncateAtJoined: number; + truncateAtInvited: number; + searchQuery: string; +} + @replaceableComponent("views.rooms.MemberList") -export default class MemberList extends React.Component { +export default class MemberList extends React.Component { + private showPresence = true; + private mounted = false; + private collator: Intl.Collator; + private sortNames = new Map(); // RoomMember -> sortName + constructor(props) { super(props); const cli = MatrixClientPeg.get(); if (cli.hasLazyLoadMembersEnabled()) { // show an empty list - this.state = this._getMembersState([]); + this.state = this.getMembersState([]); } else { - this.state = this._getMembersState(this.roomMembers()); + this.state = this.getMembersState(this.roomMembers()); } cli.on("Room", this.onRoom); // invites & joining after peek const enablePresenceByHsUrl = SdkConfig.get()["enable_presence_by_hs_url"]; const hsUrl = MatrixClientPeg.get().baseUrl; - this._showPresence = true; + this.showPresence = true; if (enablePresenceByHsUrl && enablePresenceByHsUrl[hsUrl] !== undefined) { - this._showPresence = enablePresenceByHsUrl[hsUrl]; + this.showPresence = enablePresenceByHsUrl[hsUrl]; } } // eslint-disable-next-line camelcase UNSAFE_componentWillMount() { const cli = MatrixClientPeg.get(); - this._mounted = true; + this.mounted = true; if (cli.hasLazyLoadMembersEnabled()) { - this._showMembersAccordingToMembershipWithLL(); + this.showMembersAccordingToMembershipWithLL(); cli.on("Room.myMembership", this.onMyMembership); } else { - this._listenForMembersChanges(); + this.listenForMembersChanges(); } } - _listenForMembersChanges() { + private listenForMembersChanges(): void { const cli = MatrixClientPeg.get(); cli.on("RoomState.members", this.onRoomStateMember); cli.on("RoomMember.name", this.onRoomMemberName); @@ -89,7 +122,7 @@ export default class MemberList extends React.Component { } componentWillUnmount() { - this._mounted = false; + this.mounted = false; const cli = MatrixClientPeg.get(); if (cli) { cli.removeListener("RoomState.members", this.onRoomStateMember); @@ -103,7 +136,7 @@ export default class MemberList extends React.Component { } // cancel any pending calls to the rate_limited_funcs - this._updateList.cancelPendingCall(); + this.updateList.cancelPendingCall(); } /** @@ -111,7 +144,7 @@ export default class MemberList extends React.Component { * show a spinner and load the members if the user is joined, * or show the members available so far if the user is invited */ - async _showMembersAccordingToMembershipWithLL() { + private async showMembersAccordingToMembershipWithLL(): Promise { const cli = MatrixClientPeg.get(); if (cli.hasLazyLoadMembersEnabled()) { const cli = MatrixClientPeg.get(); @@ -122,31 +155,31 @@ export default class MemberList extends React.Component { try { await room.loadMembersIfNeeded(); } catch (ex) {/* already logged in RoomView */} - if (this._mounted) { - this.setState(this._getMembersState(this.roomMembers())); - this._listenForMembersChanges(); + if (this.mounted) { + this.setState(this.getMembersState(this.roomMembers())); + this.listenForMembersChanges(); } } else { // show the members we already have loaded - this.setState(this._getMembersState(this.roomMembers())); + this.setState(this.getMembersState(this.roomMembers())); } } } - get canInvite() { + private get canInvite(): boolean { const cli = MatrixClientPeg.get(); const room = cli.getRoom(this.props.roomId); return room && room.canInvite(cli.getUserId()); } - _getMembersState(members) { - // set the state after determining _showPresence to make sure it's - // taken into account while rerendering + private getMembersState(members: Array): IState { + // set the state after determining showPresence to make sure it's + // taken into account while rendering return { loading: false, members: members, - filteredJoinedMembers: this._filterMembers(members, 'join'), - filteredInvitedMembers: this._filterMembers(members, 'invite'), + filteredJoinedMembers: this.filterMembers(members, 'join'), + filteredInvitedMembers: this.filterMembers(members, 'invite'), canInvite: this.canInvite, // ideally we'd size this to the page height, but @@ -157,72 +190,72 @@ export default class MemberList extends React.Component { }; } - onUserPresenceChange = (event, user) => { + private onUserPresenceChange = (event: MatrixEvent, user: User): void => { // Attach a SINGLE listener for global presence changes then locate the // member tile and re-render it. This is more efficient than every tile // ever attaching their own listener. const tile = this.refs[user.userId]; // console.log(`Got presence update for ${user.userId}. hasTile=${!!tile}`); if (tile) { - this._updateList(); // reorder the membership list + this.updateList(); // reorder the membership list } }; - onRoom = room => { + private onRoom = (room: Room): void => { if (room.roomId !== this.props.roomId) { return; } // We listen for room events because when we accept an invite // we need to wait till the room is fully populated with state // before refreshing the member list else we get a stale list. - this._showMembersAccordingToMembershipWithLL(); + this.showMembersAccordingToMembershipWithLL(); }; - onMyMembership = (room, membership, oldMembership) => { + private onMyMembership = (room: Room, membership: string, oldMembership: string): void => { if (room.roomId === this.props.roomId && membership === "join") { - this._showMembersAccordingToMembershipWithLL(); + this.showMembersAccordingToMembershipWithLL(); } }; - onRoomStateMember = (ev, state, member) => { + private onRoomStateMember = (ev: MatrixEvent, state: RoomState, member: RoomMember): void => { if (member.roomId !== this.props.roomId) { return; } - this._updateList(); + this.updateList(); }; - onRoomMemberName = (ev, member) => { + private onRoomMemberName = (ev: MatrixEvent, member: RoomMember): void => { if (member.roomId !== this.props.roomId) { return; } - this._updateList(); + this.updateList(); }; - onRoomStateEvent = (event, state) => { + private onRoomStateEvent = (event: MatrixEvent, state: RoomState): void => { if (event.getRoomId() === this.props.roomId && event.getType() === "m.room.third_party_invite") { - this._updateList(); + this.updateList(); } if (this.canInvite !== this.state.canInvite) this.setState({ canInvite: this.canInvite }); }; - _updateList = rate_limited_func(() => { - this._updateListNow(); + private updateList = rateLimitedFunction(() => { + this.updateListNow(); }, 500); - _updateListNow() { - // console.log("Updating memberlist"); - const newState = { + private updateListNow(): void { + const members = this.roomMembers() + + this.setState({ loading: false, - members: this.roomMembers(), - }; - newState.filteredJoinedMembers = this._filterMembers(newState.members, 'join', this.state.searchQuery); - newState.filteredInvitedMembers = this._filterMembers(newState.members, 'invite', this.state.searchQuery); - this.setState(newState); + members: members, + filteredJoinedMembers: this.filterMembers(members, 'join', this.state.searchQuery), + filteredInvitedMembers: this.filterMembers(members, 'invite', this.state.searchQuery), + }); } - getMembersWithUser() { + private getMembersWithUser(): Array { if (!this.props.roomId) return []; const cli = MatrixClientPeg.get(); const room = cli.getRoom(this.props.roomId); @@ -230,15 +263,18 @@ export default class MemberList extends React.Component { const allMembers = Object.values(room.currentState.members); - allMembers.forEach(function(member) { + allMembers.forEach((member) => { // work around a race where you might have a room member object - // before the user object exists. This may or may not cause + // before the user object exists. This may or may not cause // https://github.com/vector-im/vector-web/issues/186 - if (member.user === null) { + if (!member.user) { member.user = cli.getUser(member.userId); } - member.sortName = (member.name[0] === '@' ? member.name.substr(1) : member.name).replace(SORT_REGEX, ""); + this.sortNames.set( + member, + (member.name[0] === '@' ? member.name.substr(1) : member.name).replace(SORT_REGEX, ""), + ); // XXX: this user may have no lastPresenceTs value! // the right solution here is to fix the race rather than leave it as 0 @@ -247,7 +283,7 @@ export default class MemberList extends React.Component { return allMembers; } - roomMembers() { + private roomMembers(): Array { const allMembers = this.getMembersWithUser(); const filteredAndSortedMembers = allMembers.filter((m) => { return ( @@ -255,23 +291,21 @@ export default class MemberList extends React.Component { ); }); const language = SettingsStore.getValue("language"); - this.collator = new Intl.Collator(language, { sensitivity: 'base', usePunctuation: true }); + this.collator = new Intl.Collator(language, { sensitivity: 'base', ignorePunctuation: false }); filteredAndSortedMembers.sort(this.memberSort); return filteredAndSortedMembers; } - _createOverflowTileJoined = (overflowCount, totalCount) => { - return this._createOverflowTile(overflowCount, totalCount, this._showMoreJoinedMemberList); + private createOverflowTileJoined = (overflowCount: number, totalCount: number): JSX.Element => { + return this.createOverflowTile(overflowCount, totalCount, this.showMoreJoinedMemberList); }; - _createOverflowTileInvited = (overflowCount, totalCount) => { - return this._createOverflowTile(overflowCount, totalCount, this._showMoreInvitedMemberList); + private createOverflowTileInvited = (overflowCount: number, totalCount: number): JSX.Element => { + return this.createOverflowTile(overflowCount, totalCount, this.showMoreInvitedMemberList); }; - _createOverflowTile = (overflowCount, totalCount, onClick) => { + private createOverflowTile = (overflowCount: number, totalCount: number, onClick: () => void): JSX.Element=> { // For now we'll pretend this is any entity. It should probably be a separate tile. - const EntityTile = sdk.getComponent("rooms.EntityTile"); - const BaseAvatar = sdk.getComponent("avatars.BaseAvatar"); const text = _t("and %(count)s others...", { count: overflowCount }); return ( { + private showMoreJoinedMemberList = (): void => { this.setState({ truncateAtJoined: this.state.truncateAtJoined + SHOW_MORE_INCREMENT, }); }; - _showMoreInvitedMemberList = () => { + private showMoreInvitedMemberList = (): void => { this.setState({ truncateAtInvited: this.state.truncateAtInvited + SHOW_MORE_INCREMENT, }); }; - memberString(member) { + /** + * SHOULD ONLY BE USED BY TESTS + */ + public memberString(member: RoomMember): string { if (!member) { return "(null)"; } else { const u = member.user; - return "(" + member.name + ", " + member.powerLevel + ", " + (u ? u.lastActiveAgo : "") + ", " + (u ? u.getLastActiveTs() : "") + ", " + (u ? u.currentlyActive : "") + ", " + (u ? u.presence : "") + ")"; + return ( + "(" + + member.name + + ", " + + member.powerLevel + + ", " + + (u ? u.lastActiveAgo : "") + + ", " + + (u ? u.getLastActiveTs() : "") + + ", " + + (u ? u.currentlyActive : "") + + ", " + + (u ? u.presence : "") + + ")" + ); } } // returns negative if a comes before b, // returns 0 if a and b are equivalent in ordering // returns positive if a comes after b. - memberSort = (memberA, memberB) => { + private memberSort = (memberA: RoomMember, memberB: RoomMember): number => { // order by presence, with "active now" first. // ...and then by power level // ...and then by last active @@ -325,7 +376,7 @@ export default class MemberList extends React.Component { if (!userA && userB) return 1; // First by presence - if (this._showPresence) { + if (this.showPresence) { const convertPresence = (p) => p === 'unavailable' ? 'online' : p; const presenceIndex = p => { const order = ['active', 'online', 'offline']; @@ -349,31 +400,31 @@ export default class MemberList extends React.Component { } // Third by last active - if (this._showPresence && userA.getLastActiveTs() !== userB.getLastActiveTs()) { + if (this.showPresence && userA.getLastActiveTs() !== userB.getLastActiveTs()) { // console.log("Comparing on last active timestamp - returning"); return userB.getLastActiveTs() - userA.getLastActiveTs(); } // Fourth by name (alphabetical) - return this.collator.compare(memberA.sortName, memberB.sortName); + return this.collator.compare(this.sortNames.get(memberA), this.sortNames.get(memberB)); }; - onSearchQueryChanged = searchQuery => { + private onSearchQueryChanged = (searchQuery: string): void => { this.setState({ searchQuery, - filteredJoinedMembers: this._filterMembers(this.state.members, 'join', searchQuery), - filteredInvitedMembers: this._filterMembers(this.state.members, 'invite', searchQuery), + filteredJoinedMembers: this.filterMembers(this.state.members, 'join', searchQuery), + filteredInvitedMembers: this.filterMembers(this.state.members, 'invite', searchQuery), }); }; - _onPending3pidInviteClick = inviteEvent => { + private onPending3pidInviteClick = (inviteEvent: MatrixEvent): void => { dis.dispatch({ action: 'view_3pid_invite', event: inviteEvent, }); }; - _filterMembers(members, membership, query) { + private filterMembers(members: Array, membership: string, query?: string): Array { return members.filter((m) => { if (query) { query = query.toLowerCase(); @@ -389,7 +440,7 @@ export default class MemberList extends React.Component { }); } - _getPending3PidInvites() { + private getPending3PidInvites(): Array { // include 3pid invites (m.room.third_party_invite) state events. // The HS may have already converted these into m.room.member invites so // we shouldn't add them if the 3pid invite state key (token) is in the @@ -409,42 +460,40 @@ export default class MemberList extends React.Component { } } - _makeMemberTiles(members) { - const MemberTile = sdk.getComponent("rooms.MemberTile"); - const EntityTile = sdk.getComponent("rooms.EntityTile"); - + private makeMemberTiles(members: Array) { return members.map((m) => { - if (m.userId) { + if (m instanceof RoomMember) { // Is a Matrix invite - return ; + return ; } else { // Is a 3pid invite return this._onPending3pidInviteClick(m)} />; + onClick={() => this.onPending3pidInviteClick(m)} />; } }); } - _getChildrenJoined = (start, end) => this._makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end)); - - _getChildCountJoined = () => this.state.filteredJoinedMembers.length; - - _getChildrenInvited = (start, end) => { - let targets = this.state.filteredInvitedMembers; - if (end > this.state.filteredInvitedMembers.length) { - targets = targets.concat(this._getPending3PidInvites()); - } - - return this._makeMemberTiles(targets.slice(start, end)); + private getChildrenJoined = (start: number, end: number): Array => { + return this.makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end)) }; - _getChildCountInvited = () => { - return this.state.filteredInvitedMembers.length + (this._getPending3PidInvites() || []).length; + private getChildCountJoined = (): number => this.state.filteredJoinedMembers.length; + + private getChildrenInvited = (start: number, end: number): Array => { + let targets = this.state.filteredInvitedMembers; + if (end > this.state.filteredInvitedMembers.length) { + targets = targets.concat(this.getPending3PidInvites()); + } + + return this.makeMemberTiles(targets.slice(start, end)); + }; + + private getChildCountInvited = (): number => { + return this.state.filteredInvitedMembers.length + (this.getPending3PidInvites() || []).length; } render() { if (this.state.loading) { - const Spinner = sdk.getComponent("elements.Spinner"); return ; } - const SearchBox = sdk.getComponent('structures.SearchBox'); - const TruncatedList = sdk.getComponent("elements.TruncatedList"); - const cli = MatrixClientPeg.get(); const room = cli.getRoom(this.props.roomId); let inviteButton; @@ -470,22 +516,30 @@ export default class MemberList extends React.Component { inviteButtonText = _t("Invite to this space"); } - const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); - inviteButton = - + inviteButton = ( + { inviteButtonText } - ; + + ); } let invitedHeader; let invitedSection; - if (this._getChildCountInvited() > 0) { + if (this.getChildCountInvited() > 0) { invitedHeader =

    { _t("Invited") }

    ; - invitedSection = ; + invitedSection = ( + + ); } const footer = ( @@ -517,17 +571,19 @@ export default class MemberList extends React.Component { previousPhase={previousPhase} >
    - + { invitedHeader } { invitedSection }
    ; } - onInviteButtonClick = () => { + onInviteButtonClick = (): void => { if (MatrixClientPeg.get().isGuest()) { dis.dispatch({action: 'require_registration'}); return; From 0df6200dd0f5ac87c5897a4d7f014ce2d93afed0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 14:32:41 +0200 Subject: [PATCH 0573/1270] Convert MemberList-test to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- ...MemberList-test.js => MemberList-test.tsx} | 53 +++++++++++++------ 1 file changed, 37 insertions(+), 16 deletions(-) rename test/components/views/rooms/{MemberList-test.js => MemberList-test.tsx} (88%) diff --git a/test/components/views/rooms/MemberList-test.js b/test/components/views/rooms/MemberList-test.tsx similarity index 88% rename from test/components/views/rooms/MemberList-test.js rename to test/components/views/rooms/MemberList-test.tsx index 28fead770c..8012c43c4b 100644 --- a/test/components/views/rooms/MemberList-test.js +++ b/test/components/views/rooms/MemberList-test.tsx @@ -1,21 +1,36 @@ +/* +Copyright 2021 Šimon Brandner + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + import React from 'react'; import ReactTestUtils from 'react-dom/test-utils'; import ReactDOM from 'react-dom'; import * as TestUtils from '../../../test-utils'; - -import {MatrixClientPeg} from '../../../../src/MatrixClientPeg'; import sdk from '../../../skinned-sdk'; - -import {Room, RoomMember, User} from 'matrix-js-sdk'; - +import { MatrixClientPeg } from '../../../../src/MatrixClientPeg'; +import { Room } from 'matrix-js-sdk/src/models/room'; +import { RoomMember } from 'matrix-js-sdk/src/models/room-member'; +import { User } from "matrix-js-sdk/src/models/user"; import { compare } from "../../../../src/utils/strings"; +import MemberList from "../../../../src/components/views/rooms/MemberList"; function generateRoomId() { return '!' + Math.random().toString().slice(2, 10) + ':domain'; } - describe('MemberList', () => { function createRoom(opts) { const room = new Room(generateRoomId(), null, client.getUserId()); @@ -97,13 +112,19 @@ describe('MemberList', () => { memberListRoom.currentState.members[member.userId] = member; } - const MemberList = sdk.getComponent('views.rooms.MemberList'); const WrappedMemberList = TestUtils.wrapInMatrixClientContext(MemberList); const gatherWrappedRef = (r) => { memberList = r; }; - root = ReactDOM.render(, parentDiv); + root = ReactDOM.render( + ( + + ), + parentDiv, + ); }); afterEach((done) => { @@ -213,8 +234,8 @@ describe('MemberList', () => { }); // Bypass all the event listeners and skip to the good part - memberList._showPresence = enablePresence; - memberList._updateListNow(); + memberList.showPresence = enablePresence; + memberList.updateListNow(); const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile); expectOrderedByPresenceAndPowerLevel(tiles, enablePresence); @@ -225,7 +246,7 @@ describe('MemberList', () => { // Bypass all the event listeners and skip to the good part memberList._showPresence = enablePresence; - memberList._updateListNow(); + memberList.updateListNow(); const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile); expectOrderedByPresenceAndPowerLevel(tiles, enablePresence); @@ -254,8 +275,8 @@ describe('MemberList', () => { }); // Bypass all the event listeners and skip to the good part - memberList._showPresence = enablePresence; - memberList._updateListNow(); + memberList.showPresence = enablePresence; + memberList.updateListNow(); const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile); expectOrderedByPresenceAndPowerLevel(tiles, enablePresence); @@ -273,8 +294,8 @@ describe('MemberList', () => { }); // Bypass all the event listeners and skip to the good part - memberList._showPresence = enablePresence; - memberList._updateListNow(); + memberList.showPresence = enablePresence; + memberList.updateListNow(); const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile); expectOrderedByPresenceAndPowerLevel(tiles, enablePresence); From b7a821a9e4d7bbe99f767b2fb86850936d99ebed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 14:59:36 +0200 Subject: [PATCH 0574/1270] .tsx can also be tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6b369e9c27..f87abf9e44 100644 --- a/package.json +++ b/package.json @@ -172,7 +172,7 @@ "jest": { "testEnvironment": "./__test-utils__/environment.js", "testMatch": [ - "/test/**/*-test.[jt]s" + "/test/**/*-test.[jt]s?(x)" ], "setupFiles": [ "jest-canvas-mock" From 5d93216c94f1f76a99fd30b4bbcd73459446ee2a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 23 Jun 2021 16:10:47 +0100 Subject: [PATCH 0575/1270] Decrease e2e shield fill mask size so that it doesn't overlap --- res/css/structures/_ToastContainer.scss | 2 +- res/css/views/messages/_common_CryptoEvent.scss | 2 +- res/css/views/rooms/_E2EIcon.scss | 4 ++-- res/css/views/rooms/_EventTile.scss | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index 14e4c01389..35d6087a1b 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -71,7 +71,7 @@ limitations under the License. &::before { background-color: #ffffff; mask-image: url('$(res)/img/e2e/normal.svg'); - mask-size: 90%; + mask-size: 80%; } &::after { diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss index 4faa4b594f..bcc40f1181 100644 --- a/res/css/views/messages/_common_CryptoEvent.scss +++ b/res/css/views/messages/_common_CryptoEvent.scss @@ -21,7 +21,7 @@ limitations under the License. mask-image: url('$(res)/img/e2e/normal.svg'); mask-repeat: no-repeat; mask-position: center; - mask-size: 90%; + mask-size: 80%; } &.mx_cryptoEvent_icon::after { diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss index a3473dedec..68ad44cf6a 100644 --- a/res/css/views/rooms/_E2EIcon.scss +++ b/res/css/views/rooms/_E2EIcon.scss @@ -45,7 +45,7 @@ limitations under the License. mask-image: url('$(res)/img/e2e/normal.svg'); mask-repeat: no-repeat; mask-position: center; - mask-size: 90%; + mask-size: 80%; } // transparent-looking border surrounding the shield for when overlain over avatars @@ -59,7 +59,7 @@ limitations under the License. } // shrink the infill of the badge &::before { - mask-size: 65%; + mask-size: 60%; } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 3af266caee..27a83e58f8 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -345,7 +345,7 @@ $hover-select-border: 4px; mask-image: url('$(res)/img/e2e/normal.svg'); mask-repeat: no-repeat; mask-position: center; - mask-size: 90%; + mask-size: 80%; } } From e696a1d5dc4d6848e47caf64e0c0c58bda659c8a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 23 Jun 2021 10:31:08 -0600 Subject: [PATCH 0576/1270] Update membership reason handling, including leave reason displaying Incorporates ideas from https://github.com/matrix-org/matrix-react-sdk/pull/6198 --- src/TextForEvent.ts | 47 +++++++++++++++++++++++-------------- src/i18n/strings/en_EN.json | 6 ++++- 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts index 649c53664e..55a7813c6f 100644 --- a/src/TextForEvent.ts +++ b/src/TextForEvent.ts @@ -31,8 +31,8 @@ function textForMemberEvent(ev): () => string | null { const targetName = ev.target ? ev.target.name : ev.getStateKey(); const prevContent = ev.getPrevContent(); const content = ev.getContent(); + const reason = content.reason; - const getReason = () => content.reason ? (_t('Reason') + ': ' + content.reason) : ''; switch (content.membership) { case 'invite': { const threePidContent = content.third_party_invite; @@ -43,14 +43,16 @@ function textForMemberEvent(ev): () => string | null { displayName: threePidContent.display_name, }); } else { - return () => _t('%(targetName)s accepted an invitation.', {targetName}); + return () => _t('%(targetName)s accepted an invitation.', { targetName }); } } else { - return () => _t('%(senderName)s invited %(targetName)s.', {senderName, targetName}); + return () => _t('%(senderName)s invited %(targetName)s.', { senderName, targetName }); } } case 'ban': - return () => _t('%(senderName)s banned %(targetName)s.', {senderName, targetName}) + ' ' + getReason(); + return () => reason + ? _t('%(senderName)s banned %(targetName)s. Reason: %(reason)s', { senderName, targetName, reason }) + : _t('%(senderName)s banned %(targetName)s.', { senderName, targetName }); case 'join': if (prevContent && prevContent.membership === 'join') { if (prevContent.displayname && content.displayname && prevContent.displayname !== content.displayname) { @@ -69,38 +71,49 @@ function textForMemberEvent(ev): () => string | null { oldDisplayName: prevContent.displayname, }); } else if (prevContent.avatar_url && !content.avatar_url) { - return () => _t('%(senderName)s removed their profile picture.', {senderName}); + return () => _t('%(senderName)s removed their profile picture.', { senderName }); } else if (prevContent.avatar_url && content.avatar_url && prevContent.avatar_url !== content.avatar_url) { - return () => _t('%(senderName)s changed their profile picture.', {senderName}); + return () => _t('%(senderName)s changed their profile picture.', { senderName }); } else if (!prevContent.avatar_url && content.avatar_url) { - return () => _t('%(senderName)s set a profile picture.', {senderName}); + return () => _t('%(senderName)s set a profile picture.', { senderName }); } else if (SettingsStore.getValue("showHiddenEventsInTimeline")) { // This is a null rejoin, it will only be visible if the Labs option is enabled - return () => _t("%(senderName)s made no change.", {senderName}); + return () => _t("%(senderName)s made no change.", { senderName }); } else { return null; } } else { if (!ev.target) console.warn("Join message has no target! -- " + ev.getContent().state_key); - return () => _t('%(targetName)s joined the room.', {targetName}); + return () => _t('%(targetName)s joined the room.', { targetName }); } case 'leave': if (ev.getSender() === ev.getStateKey()) { if (prevContent.membership === "invite") { - return () => _t('%(targetName)s rejected the invitation.', {targetName}); + return () => _t('%(targetName)s rejected the invitation.', { targetName }); } else { - return () => _t('%(targetName)s left the room.', {targetName}); + return () => reason + ? _t('%(targetName)s left the room. Reason: %(reason)s', { targetName, reason }) + : _t('%(targetName)s left the room.', { targetName }); } } else if (prevContent.membership === "ban") { - return () => _t('%(senderName)s unbanned %(targetName)s.', {senderName, targetName}); + return () => _t('%(senderName)s unbanned %(targetName)s.', { senderName, targetName }); } else if (prevContent.membership === "invite") { - return () => _t('%(senderName)s withdrew %(targetName)s\'s invitation.', { - senderName, - targetName, - }) + ' ' + getReason(); + return () => reason + ? _t('%(senderName)s withdrew %(targetName)s\'s invitation. Reason: %(reason)s', { + senderName, + targetName, + reason, + }) + : _t('%(senderName)s withdrew %(targetName)s\'s invitation.', { senderName, targetName }) } else if (prevContent.membership === "join") { - return () => _t('%(senderName)s kicked %(targetName)s.', {senderName, targetName}) + ' ' + getReason(); + return () => reason + ? _t('%(senderName)s kicked %(targetName)s. Reason: %(reason)s', { + senderName, + targetName, + reason, + }) + : _t('%(senderName)s kicked %(targetName)s.', { senderName, targetName }); } else { return null; } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7751c2eb32..5bee2e2f2c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -489,10 +489,10 @@ "Converts the room to a DM": "Converts the room to a DM", "Converts the DM to a room": "Converts the DM to a room", "Displays action": "Displays action", - "Reason": "Reason", "%(targetName)s accepted the invitation for %(displayName)s.": "%(targetName)s accepted the invitation for %(displayName)s.", "%(targetName)s accepted an invitation.": "%(targetName)s accepted an invitation.", "%(senderName)s invited %(targetName)s.": "%(senderName)s invited %(targetName)s.", + "%(senderName)s banned %(targetName)s. Reason: %(reason)s": "%(senderName)s banned %(targetName)s. Reason: %(reason)s", "%(senderName)s banned %(targetName)s.": "%(senderName)s banned %(targetName)s.", "%(oldDisplayName)s changed their display name to %(displayName)s.": "%(oldDisplayName)s changed their display name to %(displayName)s.", "%(senderName)s set their display name to %(displayName)s.": "%(senderName)s set their display name to %(displayName)s.", @@ -503,9 +503,12 @@ "%(senderName)s made no change.": "%(senderName)s made no change.", "%(targetName)s joined the room.": "%(targetName)s joined the room.", "%(targetName)s rejected the invitation.": "%(targetName)s rejected the invitation.", + "%(targetName)s left the room. Reason: %(reason)s": "%(targetName)s left the room. Reason: %(reason)s", "%(targetName)s left the room.": "%(targetName)s left the room.", "%(senderName)s unbanned %(targetName)s.": "%(senderName)s unbanned %(targetName)s.", + "%(senderName)s withdrew %(targetName)s's invitation. Reason: %(reason)s": "%(senderName)s withdrew %(targetName)s's invitation. Reason: %(reason)s", "%(senderName)s withdrew %(targetName)s's invitation.": "%(senderName)s withdrew %(targetName)s's invitation.", + "%(senderName)s kicked %(targetName)s. Reason: %(reason)s": "%(senderName)s kicked %(targetName)s. Reason: %(reason)s", "%(senderName)s kicked %(targetName)s.": "%(senderName)s kicked %(targetName)s.", "%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s changed the topic to \"%(topic)s\".", "%(senderDisplayName)s removed the room name.": "%(senderDisplayName)s removed the room name.", @@ -1410,6 +1413,7 @@ "Failed to unban": "Failed to unban", "Unban": "Unban", "Banned by %(displayName)s": "Banned by %(displayName)s", + "Reason": "Reason", "Error changing power level requirement": "Error changing power level requirement", "An error occurred changing the room's power level requirements. Ensure you have sufficient permissions and try again.": "An error occurred changing the room's power level requirements. Ensure you have sufficient permissions and try again.", "Error changing power level": "Error changing power level", From e290fdaabcb0259b26412b34b3ec4cd11e76164a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 23 Jun 2021 11:21:56 -0600 Subject: [PATCH 0577/1270] Update widget-api for https://github.com/matrix-org/matrix-react-sdk/pull/6178 --- package.json | 2 +- yarn.lock | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 6b369e9c27..bc79b791d4 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "linkifyjs": "^2.1.9", "lodash": "^4.17.20", "matrix-js-sdk": "12.0.0", - "matrix-widget-api": "^0.1.0-beta.14", + "matrix-widget-api": "^0.1.0-beta.15", "minimist": "^1.2.5", "opus-recorder": "^8.0.3", "pako": "^2.0.3", diff --git a/yarn.lock b/yarn.lock index 32ca30a996..3bcb8de404 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1334,6 +1334,7 @@ "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz": version "3.2.3" + uid cc332fdd25c08ef0e40f4d33fc3f822a0f98b6f4 resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz#cc332fdd25c08ef0e40f4d33fc3f822a0f98b6f4" "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents": @@ -5772,10 +5773,10 @@ matrix-react-test-utils@^0.2.3: "@babel/traverse" "^7.13.17" walk "^2.3.14" -matrix-widget-api@^0.1.0-beta.14: - version "0.1.0-beta.14" - resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-0.1.0-beta.14.tgz#e38beed71c5ebd62c1ac1d79ef262d7150b42c70" - integrity sha512-5tC6LO1vCblKg/Hfzf5U1eHPz1nHUZIobAm3gkEKV5vpYPgRpr8KdkLiGB78VZid0tB17CVtAb4VKI8CQ3lhAQ== +matrix-widget-api@^0.1.0-beta.15: + version "0.1.0-beta.15" + resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-0.1.0-beta.15.tgz#b02511f93fe1a3634868b6e246d736107f182745" + integrity sha512-sWmtb8ZarSbHVbk5ni7IHBR9jOh7m1+5R4soky0fEO9VKl+MN7skT0+qNux3J9WuUAu2D80dZW9xPUT9cxfxbg== dependencies: "@types/events" "^3.0.0" events "^3.2.0" From d5acfc6cf453915deed0bf6ac6bca2b5920d73f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 23 Jun 2021 17:27:53 +0200 Subject: [PATCH 0578/1270] Convert EntityTile to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../rooms/{EntityTile.js => EntityTile.tsx} | 94 ++++++++++--------- 1 file changed, 49 insertions(+), 45 deletions(-) rename src/components/views/rooms/{EntityTile.js => EntityTile.tsx} (75%) diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.tsx similarity index 75% rename from src/components/views/rooms/EntityTile.js rename to src/components/views/rooms/EntityTile.tsx index a92d87643c..53c5900fbf 100644 --- a/src/components/views/rooms/EntityTile.js +++ b/src/components/views/rooms/EntityTile.tsx @@ -16,14 +16,19 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; -import PropTypes from 'prop-types'; -import * as sdk from '../../../index'; +import React, { createRef } from 'react'; import AccessibleButton from '../elements/AccessibleButton'; -import { _t } from '../../../languageHandler'; +import { _td } from '../../../languageHandler'; import classNames from "classnames"; import E2EIcon from './E2EIcon'; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import BaseAvatar from '../avatars/BaseAvatar'; +import PresenceLabel from "./PresenceLabel"; + +const PowerLabel: Record = { + "admin": _td("Admin"), + "moderator": _td("Mod"), +} const PRESENCE_CLASS = { "offline": "mx_EntityTile_offline", @@ -31,14 +36,14 @@ const PRESENCE_CLASS = { "unavailable": "mx_EntityTile_unavailable", }; -function presenceClassForMember(presenceState, lastActiveAgo, showPresence) { +function presenceClassForMember(presenceState: string, lastActiveAgo: number, showPresence: boolean) { if (showPresence === false) { return 'mx_EntityTile_online_beenactive'; } // offline is split into two categories depending on whether we have // a last_active_ago for them. - if (presenceState == 'offline') { + if (presenceState === 'offline') { if (lastActiveAgo) { return PRESENCE_CLASS['offline'] + '_beenactive'; } else { @@ -51,29 +56,34 @@ function presenceClassForMember(presenceState, lastActiveAgo, showPresence) { } } -@replaceableComponent("views.rooms.EntityTile") -class EntityTile extends React.Component { - static propTypes = { - name: PropTypes.string, - title: PropTypes.string, - avatarJsx: PropTypes.any, // - className: PropTypes.string, - presenceState: PropTypes.string, - presenceLastActiveAgo: PropTypes.number, - presenceLastTs: PropTypes.number, - presenceCurrentlyActive: PropTypes.bool, - showInviteButton: PropTypes.bool, - shouldComponentUpdate: PropTypes.func, - onClick: PropTypes.func, - suppressOnHover: PropTypes.bool, - showPresence: PropTypes.bool, - subtextLabel: PropTypes.string, - e2eStatus: PropTypes.string, - }; +interface IProps { + name?: string, + title?: string, + avatarJsx?: JSX.Element, // + className?: string, + presenceState?: string, + presenceLastActiveAgo?: number, + presenceLastTs?: number, + presenceCurrentlyActive?: boolean, + showInviteButton?: boolean, + shouldComponentUpdate?(nextProps: IProps, nextState: IState): boolean, + onClick?(): void, + suppressOnHover?: boolean, + showPresence?: boolean, + subtextLabel?: string, + e2eStatus?: string, + powerStatus?: string, +} +interface IState { + hover: boolean; +} + +@replaceableComponent("views.rooms.EntityTile") +export default class EntityTile extends React.Component { static defaultProps = { - shouldComponentUpdate: function(nextProps, nextState) { return true; }, - onClick: function() {}, + shouldComponentUpdate: (nextProps: IProps, nextState: IState) => { return true; }, + onClick: () => {}, presenceState: "offline", presenceLastActiveAgo: 0, presenceLastTs: 0, @@ -81,12 +91,17 @@ class EntityTile extends React.Component { suppressOnHover: false, showPresence: true, }; + private container = createRef(); - state = { - hover: false, - }; + constructor(props: IProps) { + super(props); - shouldComponentUpdate(nextProps, nextState) { + this.state = { + hover: false, + }; + } + + shouldComponentUpdate(nextProps: IProps, nextState: IState) { if (this.state.hover !== nextState.hover) return true; return this.props.shouldComponentUpdate(nextProps, nextState); } @@ -110,7 +125,6 @@ class EntityTile extends React.Component { const activeAgo = this.props.presenceLastActiveAgo ? (Date.now() - (this.props.presenceLastTs - this.props.presenceLastActiveAgo)) : -1; - const PresenceLabel = sdk.getComponent("rooms.PresenceLabel"); let presenceLabel = null; if (this.props.showPresence) { presenceLabel = {powerText}
    ; } @@ -168,14 +179,12 @@ class EntityTile extends React.Component { e2eIcon = ; } - const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); - const av = this.props.avatarJsx ||