{
{
if (payload.screenAfterLogin) {
this.screenAfterLogin = payload.screenAfterLogin;
}
- this.setStateForNewView({
- view: Views.LOGIN,
- });
- this.notifyNewScreen('login');
- ThemeController.isLogin = true;
- this.themeWatcher.recheck();
+ this.viewLogin();
break;
case 'start_password_recovery':
this.setStateForNewView({
@@ -697,10 +690,10 @@ export default class MatrixChat extends React.PureComponent {
}
case Action.ViewRoomDirectory: {
if (SpaceStore.instance.activeSpace) {
- Modal.createTrackedDialog("Space room directory", "", SpaceRoomDirectory, {
- space: SpaceStore.instance.activeSpace,
- initialText: payload.initialText,
- }, "mx_SpaceRoomDirectory_dialogWrapper", false, true);
+ defaultDispatcher.dispatch({
+ action: "view_room",
+ room_id: SpaceStore.instance.activeSpace.roomId,
+ });
} else {
const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
@@ -935,7 +928,6 @@ export default class MatrixChat extends React.PureComponent {
page_type: PageTypes.RoomView,
threepidInvite: roomInfo.threepid_invite,
roomOobData: roomInfo.oob_data,
- viaServers: roomInfo.via_servers,
ready: true,
roomJustCreatedOpts: roomInfo.justCreatedOpts,
}, () => {
@@ -976,6 +968,9 @@ export default class MatrixChat extends React.PureComponent {
}
private viewWelcome() {
+ if (shouldUseLoginForWelcome(SdkConfig.get())) {
+ return this.viewLogin();
+ }
this.setStateForNewView({
view: Views.WELCOME,
});
@@ -984,6 +979,16 @@ export default class MatrixChat extends React.PureComponent {
this.themeWatcher.recheck();
}
+ private viewLogin(otherState?: any) {
+ this.setStateForNewView({
+ view: Views.LOGIN,
+ ...otherState,
+ });
+ this.notifyNewScreen('login');
+ ThemeController.isLogin = true;
+ this.themeWatcher.recheck();
+ }
+
private viewHome(justRegistered = false) {
// The home page requires the "logged in" view, so we'll set that.
this.setStateForNewView({
@@ -1140,11 +1145,17 @@ export default class MatrixChat extends React.PureComponent {
}
private forgetRoom(roomId: string) {
+ const room = MatrixClientPeg.get().getRoom(roomId);
MatrixClientPeg.get().forget(roomId).then(() => {
// Switch to home page if we're currently viewing the forgotten room
if (this.state.currentRoomId === roomId) {
dis.dispatch({ action: "view_home_page" });
}
+
+ // We have to manually update the room list because the forgotten room will not
+ // be notified to us, therefore the room list will have no other way of knowing
+ // the room is forgotten.
+ RoomListStore.instance.manualRoomUpdate(room, RoomUpdateCause.RoomRemoved);
}).catch((err) => {
const errCode = err.errcode || _td("unknown error code");
Modal.createTrackedDialog("Failed to forget room", '', ErrorDialog, {
@@ -1299,17 +1310,13 @@ export default class MatrixChat extends React.PureComponent {
* Called when the session is logged out
*/
private onLoggedOut() {
- this.notifyNewScreen('login');
- this.setStateForNewView({
- view: Views.LOGIN,
+ this.viewLogin({
ready: false,
collapseLhs: false,
currentRoomId: null,
});
this.subTitleStatus = '';
this.setPageSubtitle();
- ThemeController.isLogin = true;
- this.themeWatcher.recheck();
}
/**
@@ -1547,7 +1554,7 @@ export default class MatrixChat extends React.PureComponent {
} else if (request.pending) {
ToastStore.sharedInstance().addOrReplaceToast({
key: 'verifreq_' + request.channel.transactionId,
- title: request.isSelfVerification ? _t("Self-verification request") : _t("Verification Request"),
+ title: _t("Verification requested"),
icon: "verification",
props: {request},
component: sdk.getComponent("toasts.VerificationRequestToast"),
@@ -1649,7 +1656,7 @@ export default class MatrixChat extends React.PureComponent {
let cli = MatrixClientPeg.get();
if (!cli) {
const {hsUrl, isUrl} = this.props.serverConfig;
- cli = Matrix.createClient({
+ cli = createClient({
baseUrl: hsUrl,
idBaseUrl: isUrl,
});
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 439bdbcef5..41a3015721 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -23,7 +23,6 @@ import classNames from 'classnames';
import shouldHideEvent from '../../shouldHideEvent';
import {wantsDateSeparator} from '../../DateUtils';
import * as sdk from '../../index';
-import dis from "../../dispatcher/dispatcher";
import {MatrixClientPeg} from '../../MatrixClientPeg';
import SettingsStore from '../../settings/SettingsStore';
@@ -47,6 +46,9 @@ function shouldFormContinuation(prevEvent, mxEvent) {
// check if within the max continuation period
if (mxEvent.getTs() - prevEvent.getTs() > CONTINUATION_MAX_INTERVAL) return false;
+ // As we summarise redactions, do not continue a redacted event onto a non-redacted one and vice-versa
+ if (mxEvent.isRedacted() !== prevEvent.isRedacted()) return false;
+
// Some events should appear as continuations from previous events of different types.
if (mxEvent.getType() !== prevEvent.getType() &&
(!continuedTypes.includes(mxEvent.getType()) ||
@@ -210,13 +212,11 @@ export default class MessagePanel extends React.Component {
componentDidMount() {
this._isMounted = true;
- this.dispatcherRef = dis.register(this.onAction);
}
componentWillUnmount() {
this._isMounted = false;
SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
- dis.unregister(this.dispatcherRef);
}
componentDidUpdate(prevProps, prevState) {
@@ -229,14 +229,6 @@ export default class MessagePanel extends React.Component {
}
}
- onAction = (payload) => {
- switch (payload.action) {
- case "scroll_to_bottom":
- this.scrollToBottom();
- break;
- }
- }
-
onShowTypingNotificationsChange = () => {
this.setState({
showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
@@ -463,6 +455,20 @@ export default class MessagePanel extends React.Component {
});
};
+ _getNextEventInfo(arr, i) {
+ const nextEvent = i < arr.length - 1
+ ? arr[i + 1]
+ : null;
+
+ // The next event with tile is used to to determine the 'last successful' flag
+ // 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));
+
+ return {nextEvent, nextTile};
+ }
+
_getEventTiles() {
this.eventNodes = {};
@@ -514,6 +520,7 @@ export default class MessagePanel extends React.Component {
const mxEv = this.props.events[i];
const eventId = mxEv.getId();
const last = (mxEv === lastShownEvent);
+ const {nextEvent, nextTile} = this._getNextEventInfo(this.props.events, i);
if (grouper) {
if (grouper.shouldGroup(mxEv)) {
@@ -530,22 +537,12 @@ export default class MessagePanel extends React.Component {
for (const Grouper of groupers) {
if (Grouper.canStartGroup(this, mxEv)) {
- grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent);
+ grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent, nextEvent, nextTile);
}
}
if (!grouper) {
const wantTile = this._shouldShowEvent(mxEv);
if (wantTile) {
- const nextEvent = i < this.props.events.length - 1
- ? this.props.events[i + 1]
- : null;
-
- // The next event with tile is used to to determine the 'last successful' flag
- // 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 = this.props.events.slice(i + 1).find(e => this._shouldShowEvent(e));
-
// 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.
@@ -1038,6 +1035,103 @@ class CreationGrouper {
}
}
+class RedactionGrouper {
+ static canStartGroup = function(panel, ev) {
+ return panel._shouldShowEvent(ev) && ev.isRedacted();
+ }
+
+ constructor(panel, ev, prevEvent, lastShownEvent, nextEvent, nextEventTile) {
+ this.panel = panel;
+ this.readMarker = panel._readMarkerForEvent(
+ ev.getId(),
+ ev === lastShownEvent,
+ );
+ this.events = [ev];
+ this.prevEvent = prevEvent;
+ this.lastShownEvent = lastShownEvent;
+ this.nextEvent = nextEvent;
+ this.nextEventTile = nextEventTile;
+ }
+
+ shouldGroup(ev) {
+ // absorb hidden events so that they do not break up streams of messages & redaction events being grouped
+ if (!this.panel._shouldShowEvent(ev)) {
+ return true;
+ }
+ if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
+ return false;
+ }
+ return ev.isRedacted();
+ }
+
+ add(ev) {
+ this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
+ ev.getId(),
+ ev === this.lastShownEvent,
+ );
+ if (!this.panel._shouldShowEvent(ev)) {
+ return;
+ }
+ this.events.push(ev);
+ }
+
+ getTiles() {
+ 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 lastShownEvent = this.lastShownEvent;
+
+ if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
+ const ts = this.events[0].getTs();
+ ret.push(
+
+ { eventTiles }
+ ,
+ );
+
+ if (this.readMarker) {
+ ret.push(this.readMarker);
+ }
+
+ return ret;
+ }
+
+ getNewPrevEvent() {
+ return this.events[this.events.length - 1];
+ }
+}
+
// Wrap consecutive member events in a ListSummary, ignore if redacted
class MemberGrouper {
static canStartGroup = function(panel, ev) {
@@ -1148,4 +1242,4 @@ class MemberGrouper {
}
// all the grouper classes that we use
-const groupers = [CreationGrouper, MemberGrouper];
+const groupers = [CreationGrouper, MemberGrouper, RedactionGrouper];
diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
index fda09f9774..a64feed42c 100644
--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.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.
@@ -20,17 +20,21 @@ import classNames from "classnames";
import defaultDispatcher from "../../dispatcher/dispatcher";
import { _t } from "../../languageHandler";
import { ActionPayload } from "../../dispatcher/payloads";
-import { Key } from "../../Keyboard";
import AccessibleButton from "../views/elements/AccessibleButton";
import { Action } from "../../dispatcher/actions";
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";
interface IProps {
isMinimized: boolean;
- onVerticalArrow(ev: React.KeyboardEvent): void;
- onEnter(ev: React.KeyboardEvent): boolean;
+ onKeyDown(ev: React.KeyboardEvent): void;
+ /**
+ * @returns true if a room has been selected and the search field should be cleared
+ */
+ onSelectRoom(): boolean;
}
interface IState {
@@ -53,6 +57,8 @@ export default class RoomSearch extends React.PureComponent {
};
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);
}
public componentDidUpdate(prevProps: Readonly, prevState: Readonly): void {
@@ -72,6 +78,7 @@ export default class RoomSearch extends React.PureComponent {
public componentWillUnmount() {
defaultDispatcher.unregister(this.dispatcherRef);
+ SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
}
private onAction = (payload: ActionPayload) => {
@@ -108,18 +115,26 @@ export default class RoomSearch extends React.PureComponent {
};
private onKeyDown = (ev: React.KeyboardEvent) => {
- if (ev.key === Key.ESCAPE) {
- this.clearInput();
- defaultDispatcher.fire(Action.FocusComposer);
- } else if (ev.key === Key.ARROW_UP || ev.key === Key.ARROW_DOWN) {
- this.props.onVerticalArrow(ev);
- } else if (ev.key === Key.ENTER) {
- const shouldClear = this.props.onEnter(ev);
- if (shouldClear) {
- // wrap in set immediate to delay it so that we don't clear the filter & then change room
- setImmediate(() => {
- this.clearInput();
- });
+ const action = getKeyBindingsManager().getRoomListAction(ev);
+ switch (action) {
+ case RoomListAction.ClearSearch:
+ this.clearInput();
+ defaultDispatcher.fire(Action.FocusComposer);
+ break;
+ case RoomListAction.NextRoom:
+ case RoomListAction.PrevRoom:
+ // we don't handle these actions here put pass the event on to the interested party (LeftPanel)
+ this.props.onKeyDown(ev);
+ break;
+ case RoomListAction.SelectRoom: {
+ const shouldClear = this.props.onSelectRoom();
+ if (shouldClear) {
+ // wrap in set immediate to delay it so that we don't clear the filter & then change room
+ setImmediate(() => {
+ this.clearInput();
+ });
+ }
+ break;
}
}
};
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 8b70998be0..54b6fee233 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -16,7 +16,6 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import Matrix from 'matrix-js-sdk';
import { _t, _td } from '../../languageHandler';
import {MatrixClientPeg} from '../../MatrixClientPeg';
import Resend from '../../Resend';
@@ -24,6 +23,7 @@ import dis from '../../dispatcher/dispatcher';
import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
import {Action} from "../../dispatcher/actions";
import {replaceableComponent} from "../../utils/replaceableComponent";
+import {EventStatus} from "matrix-js-sdk/src/models/event";
const STATUS_BAR_HIDDEN = 0;
const STATUS_BAR_EXPANDED = 1;
@@ -32,7 +32,7 @@ const STATUS_BAR_EXPANDED_LARGE = 2;
function getUnsentMessages(room) {
if (!room) { return []; }
return room.getPendingEvents().filter(function(ev) {
- return ev.status === Matrix.EventStatus.NOT_SENT;
+ return ev.status === EventStatus.NOT_SENT;
});
}
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 706cd5ded8..a180afba29 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -40,7 +40,6 @@ import Tinter from '../../Tinter';
import rateLimitedFunc from '../../ratelimitedfunc';
import * as Rooms from '../../Rooms';
import eventSearch, { searchPagination } from '../../Searching';
-import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent, Key } from '../../Keyboard';
import MainSplit from './MainSplit';
import RightPanel from './RightPanel';
import RoomViewStore from '../../stores/RoomViewStore';
@@ -79,6 +78,7 @@ import Notifier from "../../Notifier";
import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
+import { getKeyBindingsManager, RoomAction } from '../../KeyBindingsManager';
import { objectHasDiff } from "../../utils/objects";
import SpaceRoomView from "./SpaceRoomView";
import { IOpts } from "../../createRoom";
@@ -112,10 +112,6 @@ interface IProps {
inviterName?: string;
};
- // Servers the RoomView can use to try and assist joins
- viaServers?: string[];
-
- autoJoin?: boolean;
resizeNotifier: ResizeNotifier;
justCreatedOpts?: IOpts;
@@ -450,9 +446,7 @@ export default class RoomView extends React.Component {
// now not joined because the js-sdk peeking API will clobber our historical room,
// making it impossible to indicate a newly joined room.
if (!joining && roomId) {
- if (this.props.autoJoin) {
- this.onJoinButtonClicked();
- } else if (!room && shouldPeek) {
+ if (!room && shouldPeek) {
console.info("Attempting to peek into room %s", roomId);
this.setState({
peekLoading: true,
@@ -668,26 +662,20 @@ export default class RoomView extends React.Component {
private onReactKeyDown = ev => {
let handled = false;
- switch (ev.key) {
- case Key.ESCAPE:
- if (!ev.altKey && !ev.ctrlKey && !ev.shiftKey && !ev.metaKey) {
- this.messagePanel.forgetReadMarker();
- this.jumpToLiveTimeline();
- handled = true;
- }
+ const action = getKeyBindingsManager().getRoomAction(ev);
+ switch (action) {
+ case RoomAction.DismissReadMarker:
+ this.messagePanel.forgetReadMarker();
+ this.jumpToLiveTimeline();
+ handled = true;
break;
- case Key.PAGE_UP:
- if (!ev.altKey && !ev.ctrlKey && ev.shiftKey && !ev.metaKey) {
- this.jumpToReadMarker();
- handled = true;
- }
+ case RoomAction.JumpToOldestUnread:
+ this.jumpToReadMarker();
+ handled = true;
break;
- case Key.U: // Mac returns lowercase
- case Key.U.toUpperCase():
- if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev) && ev.shiftKey) {
- dis.dispatch({ action: "upload_file" }, true);
- handled = true;
- }
+ case RoomAction.UploadFile:
+ dis.dispatch({ action: "upload_file" }, true);
+ handled = true;
break;
}
@@ -1123,7 +1111,7 @@ export default class RoomView extends React.Component {
const signUrl = this.props.threepidInvite?.signUrl;
dis.dispatch({
action: 'join_room',
- opts: { inviteSignUrl: signUrl, viaServers: this.props.viaServers },
+ opts: { inviteSignUrl: signUrl },
_type: "unknown", // TODO: instrumentation
});
return Promise.resolve();
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 3a9b2b8a77..976734680c 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -16,10 +16,10 @@ limitations under the License.
import React, {createRef} from "react";
import PropTypes from 'prop-types';
-import { Key } from '../../Keyboard';
import Timer from '../../utils/Timer';
import AutoHideScrollbar from "./AutoHideScrollbar";
import {replaceableComponent} from "../../utils/replaceableComponent";
+import {getKeyBindingsManager, RoomAction} from "../../KeyBindingsManager";
const DEBUG_SCROLL = false;
@@ -535,29 +535,19 @@ export default class ScrollPanel extends React.Component {
* @param {object} ev the keyboard event
*/
handleScrollKey = ev => {
- switch (ev.key) {
- case Key.PAGE_UP:
- if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
- this.scrollRelative(-1);
- }
+ const roomAction = getKeyBindingsManager().getRoomAction(ev);
+ switch (roomAction) {
+ case RoomAction.ScrollUp:
+ this.scrollRelative(-1);
break;
-
- case Key.PAGE_DOWN:
- if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
- this.scrollRelative(1);
- }
+ case RoomAction.RoomScrollDown:
+ this.scrollRelative(1);
break;
-
- case Key.HOME:
- if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
- this.scrollToTop();
- }
+ case RoomAction.JumpToFirstMessage:
+ this.scrollToTop();
break;
-
- case Key.END:
- if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
- this.scrollToBottom();
- }
+ case RoomAction.JumpToLatestMessage:
+ this.scrollToBottom();
break;
}
};
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index 6daa8526bc..abeb858274 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -32,6 +32,8 @@ export default class SearchBox extends React.Component {
onKeyDown: PropTypes.func,
className: PropTypes.string,
placeholder: PropTypes.string.isRequired,
+ autoFocus: PropTypes.bool,
+ initialValue: PropTypes.string,
// If true, the search box will focus and clear itself
// on room search focus action (it would be nicer to take
@@ -49,7 +51,7 @@ export default class SearchBox extends React.Component {
this._search = createRef();
this.state = {
- searchTerm: "",
+ searchTerm: this.props.initialValue || "",
blurred: true,
};
}
@@ -158,6 +160,7 @@ export default class SearchBox extends React.Component {
onBlur={this._onBlur}
placeholder={ placeholder }
autoComplete="off"
+ autoFocus={this.props.autoFocus}
/>
{ clearButton }
diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index 9ee16558d3..930cfa15a9 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -14,32 +14,37 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, {useMemo, useRef, useState} from "react";
-import Room from "matrix-js-sdk/src/models/room";
-import MatrixEvent from "matrix-js-sdk/src/models/event";
+import React, {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";
+import classNames from "classnames";
+import {sortBy} from "lodash";
import {MatrixClientPeg} from "../../MatrixClientPeg";
import dis from "../../dispatcher/dispatcher";
import {_t} from "../../languageHandler";
import AccessibleButton from "../views/elements/AccessibleButton";
import BaseDialog from "../views/dialogs/BaseDialog";
-import FormButton from "../views/elements/FormButton";
+import Spinner from "../views/elements/Spinner";
import SearchBox from "./SearchBox";
import RoomAvatar from "../views/avatars/RoomAvatar";
import RoomName from "../views/elements/RoomName";
import {useAsyncMemo} from "../../hooks/useAsyncMemo";
-import {shouldShowSpaceSettings} from "../../utils/space";
import {EnhancedMap} from "../../utils/maps";
import StyledCheckbox from "../views/elements/StyledCheckbox";
import AutoHideScrollbar from "./AutoHideScrollbar";
import BaseAvatar from "../views/avatars/BaseAvatar";
import {mediaFromMxc} from "../../customisations/Media";
+import InfoTooltip from "../views/elements/InfoTooltip";
+import TextWithTooltip from "../views/elements/TextWithTooltip";
+import {useStateToggle} from "../../hooks/useStateToggle";
-interface IProps {
+interface IHierarchyProps {
space: Room;
initialText?: string;
- onFinished(): void;
+ refreshToken?: any;
+ showRoom(room: ISpaceSummaryRoom, viaServers?: string[], autoJoin?: boolean): void;
}
/* eslint-disable camelcase */
@@ -72,227 +77,131 @@ export interface ISpaceSummaryEvent {
}
/* eslint-enable camelcase */
-interface ISubspaceProps {
- space: ISpaceSummaryRoom;
- event?: MatrixEvent;
- editing?: boolean;
- onPreviewClick?(): void;
- queueAction?(action: IAction): void;
- onJoinClick?(): void;
+interface ITileProps {
+ room: ISpaceSummaryRoom;
+ suggested?: boolean;
+ selected?: boolean;
+ numChildRooms?: number;
+ hasPermissions?: boolean;
+ onViewRoomClick(autoJoin: boolean): void;
+ onToggleClick?(): void;
}
-const SubSpace: React.FC
- { leftPanel }
+ { SettingsStore.getValue("feature_spaces") ?
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index f0a3778a2b..532b1f4225 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -1,8 +1,5 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2017-2019 New Vector Ltd
-Copyright 2019, 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.
@@ -18,8 +15,7 @@ limitations under the License.
*/
import React, { createRef } from 'react';
-// @ts-ignore - XXX: no idea why this import fails
-import * as Matrix from "matrix-js-sdk";
+import { createClient } from "matrix-js-sdk/src/matrix";
import { InvalidStoreError } from "matrix-js-sdk/src/errors";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -82,9 +78,12 @@ import {UIFeature} from "../../settings/UIFeature";
import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
import DialPadModal from "../views/voip/DialPadModal";
import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
+import { shouldUseLoginForWelcome } from "../../utils/pages";
import SpaceStore from "../../stores/SpaceStore";
-import SpaceRoomDirectory from "./SpaceRoomDirectory";
import {replaceableComponent} from "../../utils/replaceableComponent";
+import RoomListStore from "../../stores/room-list/RoomListStore";
+import {RoomUpdateCause} from "../../stores/room-list/models";
+import defaultDispatcher from "../../dispatcher/dispatcher";
/** constants for MatrixChat.state.view */
export enum Views {
@@ -203,7 +202,6 @@ interface IState {
ready: boolean;
threepidInvite?: IThreepidInvite,
roomOobData?: object;
- viaServers?: string[];
pendingInitialSync?: boolean;
justRegistered?: boolean;
roomJustCreatedOpts?: IOpts;
@@ -607,12 +605,7 @@ export default class MatrixChat extends React.PureComponent
-
-};
-
-interface IAction {
- event: MatrixEvent;
- suggested: boolean;
- removed: boolean;
-}
-
-interface IRoomTileProps {
- room: ISpaceSummaryRoom;
- event?: MatrixEvent;
- editing?: boolean;
- onPreviewClick(): void;
- queueAction?(action: IAction): void;
- onJoinClick?(): void;
-}
-
-const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinClick }: IRoomTileProps) => {
- const name = room.name || room.canonical_alias || room.aliases?.[0] || _t("Unnamed Room");
-
- const evContent = event?.getContent();
- const [suggested, _setSuggested] = useState(evContent?.suggested);
- const [removed, _setRemoved] = useState(!evContent?.via);
+ const [showChildren, toggleShowChildren] = useStateToggle(true);
const cli = MatrixClientPeg.get();
const cliRoom = cli.getRoom(room.room_id);
const myMembership = cliRoom?.getMyMembership();
- let actions;
- if (editing && queueAction) {
- if (event && cli.getRoom(event.getRoomId())?.currentState.maySendStateEvent(event.getType(), cli.getUserId())) {
- const setSuggested = () => {
- _setSuggested(v => {
- queueAction({
- event,
- removed,
- suggested: !v,
- });
- return !v;
- });
- };
+ const onPreviewClick = () => onViewRoomClick(false);
+ const onJoinClick = () => onViewRoomClick(true);
- const setRemoved = () => {
- _setRemoved(v => {
- queueAction({
- event,
- removed: !v,
- suggested,
- });
- return !v;
- });
- };
+ let button;
+ if (myMembership === "join") {
+ button =
-
-
- { actions }
-
-
- { children }
-
-
+ { name }
+ { suggestedSection }
+
-
-
- { name }
-
-
- { room.topic }
-
+ { description }
- { room.num_joined_members }
-
-
- { actions }
+ { button }
+ { checkbox }
- { content }
-
+ let childToggle;
+ let childSection;
+ if (children) {
+ // the chevron is purposefully a div rather than a button as it should be ignored for a11y
+ childToggle = {
+ ev.stopPropagation();
+ toggleShowChildren();
+ }}
+ />;
+ if (showChildren) {
+ childSection =
- { content }
- ;
+ return <>
+
+ { content }
+ { childToggle }
+
+ { childSection }
+ ;
};
export const showRoom = (room: ISpaceSummaryRoom, viaServers?: string[], autoJoin = false) => {
@@ -325,99 +234,337 @@ export const showRoom = (room: ISpaceSummaryRoom, viaServers?: string[], autoJoi
interface IHierarchyLevelProps {
spaceId: string;
rooms: Map;
- editing?: boolean;
- relations: EnhancedMap;
+ relations: Map>;
parents: Set;
- queueAction?(action: IAction): void;
- onPreviewClick(roomId: string): void;
- onRemoveFromSpaceClick?(roomId: string): void;
- onJoinClick?(roomId: string): void;
+ selectedMap?: Map>;
+ onViewRoomClick(roomId: string, autoJoin: boolean): void;
+ onToggleClick?(parentId: string, childId: string): void;
}
export const HierarchyLevel = ({
spaceId,
rooms,
- editing,
relations,
parents,
- onPreviewClick,
- onJoinClick,
- queueAction,
+ selectedMap,
+ onViewRoomClick,
+ onToggleClick,
}: IHierarchyLevelProps) => {
const cli = MatrixClientPeg.get();
const space = cli.getRoom(spaceId);
- // TODO respect order
- const [subspaces, childRooms] = relations.get(spaceId)?.reduce((result, roomId: string) => {
- if (!rooms.has(roomId)) return result; // TODO wat
+ const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
+
+ const sortedChildren = sortBy([...(relations.get(spaceId)?.values() || [])], ev => ev.content.order || null);
+ const [subspaces, childRooms] = sortedChildren.reduce((result, ev: ISpaceSummaryEvent) => {
+ const roomId = ev.state_key;
+ if (!rooms.has(roomId)) return result;
result[rooms.get(roomId).room_type === RoomType.Space ? 0 : 1].push(roomId);
return result;
}, [[], []]) || [[], []];
- // Don't render this subspace if it has no rooms we can show
- // TODO this is broken - as a space may have subspaces we still need to show
- // if (!childRooms.length) return null;
-
- const userId = cli.getUserId();
-
const newParents = new Set(parents).add(spaceId);
return
{
childRooms.map(roomId => (
- {
- onPreviewClick(roomId);
+ suggested={relations.get(spaceId)?.get(roomId)?.content.suggested}
+ selected={selectedMap?.get(spaceId)?.has(roomId)}
+ onViewRoomClick={(autoJoin) => {
+ onViewRoomClick(roomId, autoJoin);
}}
- onJoinClick={onJoinClick ? () => {
- onJoinClick(roomId);
- } : undefined}
+ hasPermissions={hasPermissions}
+ onToggleClick={onToggleClick ? () => onToggleClick(spaceId, roomId) : undefined}
/>
))
}
{
subspaces.filter(roomId => !newParents.has(roomId)).map(roomId => (
- {
- onPreviewClick(roomId);
- }}
- onJoinClick={() => {
- onJoinClick(roomId);
+ room={rooms.get(roomId)}
+ numChildRooms={Array.from(relations.get(roomId)?.values() || [])
+ .filter(ev => rooms.get(ev.state_key)?.room_type !== RoomType.Space).length}
+ suggested={relations.get(spaceId)?.get(roomId)?.content.suggested}
+ selected={selectedMap?.get(spaceId)?.has(roomId)}
+ onViewRoomClick={(autoJoin) => {
+ onViewRoomClick(roomId, autoJoin);
}}
+ hasPermissions={hasPermissions}
+ onToggleClick={onToggleClick ? () => onToggleClick(spaceId, roomId) : undefined}
>
+
))
}
};
-const SpaceRoomDirectory: React.FC = ({ space, initialText = "", onFinished }) => {
+// mutate argument refreshToken to force a reload
+export const useSpaceSummary = (cli: MatrixClient, space: Room, refreshToken?: any): [
+ ISpaceSummaryRoom[],
+ Map>,
+ Map>,
+ Map>,
+] | [] => {
// TODO pagination
- const cli = MatrixClientPeg.get();
- const [query, setQuery] = useState(initialText);
- const [isEditing, setIsEditing] = useState(false);
+ return useAsyncMemo(async () => {
+ try {
+ const data = await cli.getSpaceSummary(space.roomId);
+ const parentChildRelations = new EnhancedMap>();
+ const childParentRelations = new EnhancedMap>();
+ const viaMap = new EnhancedMap>();
+ data.events.map((ev: ISpaceSummaryEvent) => {
+ if (ev.type === EventType.SpaceChild) {
+ parentChildRelations.getOrCreate(ev.room_id, new Map()).set(ev.state_key, ev);
+ childParentRelations.getOrCreate(ev.state_key, new Set()).add(ev.room_id);
+ }
+ if (Array.isArray(ev.content["via"])) {
+ const set = viaMap.getOrCreate(ev.state_key, new Set());
+ ev.content["via"].forEach(via => set.add(via));
+ }
+ });
+
+ return [data.rooms as ISpaceSummaryRoom[], parentChildRelations, viaMap, childParentRelations];
+ } catch (e) {
+ console.error(e); // TODO
+ }
+
+ return [];
+ }, [space, refreshToken], []);
+};
+
+export const SpaceHierarchy: React.FC = ({
+ space,
+ initialText = "",
+ showRoom,
+ refreshToken,
+ children,
+}) => {
+ const cli = MatrixClientPeg.get();
+ const userId = cli.getUserId();
+ const [query, setQuery] = useState(initialText);
+
+ const [selected, setSelected] = useState(new Map>()); // Map>
+
+ const [rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space, refreshToken);
+
+ const roomsMap = useMemo(() => {
+ if (!rooms) return null;
+ const lcQuery = query.toLowerCase().trim();
+
+ const roomsMap = new Map(rooms.map(r => [r.room_id, r]));
+ if (!lcQuery) return roomsMap;
+
+ const directMatches = rooms.filter(r => {
+ return r.name?.toLowerCase().includes(lcQuery) || r.topic?.toLowerCase().includes(lcQuery);
+ });
+
+ // Walk back up the tree to find all parents of the direct matches to show their place in the hierarchy
+ const visited = new Set();
+ const queue = [...directMatches.map(r => r.room_id)];
+ while (queue.length) {
+ const roomId = queue.pop();
+ visited.add(roomId);
+ childParentMap.get(roomId)?.forEach(parentId => {
+ if (!visited.has(parentId)) {
+ queue.push(parentId);
+ }
+ });
+ }
+
+ // Remove any mappings for rooms which were not visited in the walk
+ Array.from(roomsMap.keys()).forEach(roomId => {
+ if (!visited.has(roomId)) {
+ roomsMap.delete(roomId);
+ }
+ });
+ return roomsMap;
+ }, [rooms, childParentMap, query]);
+
+ const [error, setError] = useState("");
+ const [removing, setRemoving] = useState(false);
+ const [saving, setSaving] = useState(false);
+
+ let content;
+ if (roomsMap) {
+ const numRooms = Array.from(roomsMap.values()).filter(r => r.room_type !== RoomType.Space).length;
+ const numSpaces = roomsMap.size - numRooms - 1; // -1 at the end to exclude the space we are looking at
+
+ let countsStr;
+ if (numSpaces > 1) {
+ countsStr = _t("%(count)s rooms and %(numSpaces)s spaces", { count: numRooms, numSpaces });
+ } else if (numSpaces > 0) {
+ countsStr = _t("%(count)s rooms and 1 space", { count: numRooms, numSpaces });
+ } else {
+ countsStr = _t("%(count)s rooms", { count: numRooms, numSpaces });
+ }
+
+ let editSection;
+ 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 disabled = 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"))
+ }
+
+ ;
+ }
+
+ editSection =
+ { buttons }
+ ;
+ }
+
+ let results;
+ if (roomsMap.size) {
+ const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
+
+ results = <>
+ {
+ setError("");
+ if (!selected.has(parentId)) {
+ setSelected(new Map(selected.set(parentId, new Set([childId]))));
+ return;
+ }
+
+ const parentSet = selected.get(parentId);
+ if (!parentSet.has(childId)) {
+ setSelected(new Map(selected.set(parentId, new Set([...parentSet, childId]))));
+ return;
+ }
+
+ parentSet.delete(childId);
+ setSelected(new Map(selected.set(parentId, new Set(parentSet))));
+ } : undefined}
+ onViewRoomClick={(roomId, autoJoin) => {
+ showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), autoJoin);
+ }}
+ />
+ { children &&
} + ; + } else { + results =
+ { results }
+ { children }
+
+ ;
+ } else if (!rooms) {
+ content = = ({ space, onFinished, initialText }) => {
const onCreateRoomClick = () => {
dis.dispatch({
action: 'view_create_room',
@@ -426,134 +573,40 @@ const SpaceRoomDirectory: React.FC = ({ space, initialText = "", onFinis
onFinished();
};
- // stored within a ref as we don't need to re-render when it changes
- const pendingActions = useRef(new Map());
-
- let adminButton;
- if (shouldShowSpaceSettings(cli, space)) { // TODO this is an imperfect test
- const onManageButtonClicked = () => {
- setIsEditing(true);
- };
-
- const onSaveButtonClicked = () => {
- // TODO setBusy
- pendingActions.current.forEach(({event, suggested, removed}) => {
- const content = {
- ...event.getContent(),
- suggested,
- };
-
- if (removed) {
- delete content["via"];
- }
-
- cli.sendStateEvent(event.getRoomId(), event.getType(), content, event.getStateKey());
- });
- setIsEditing(false);
- };
-
- if (isEditing) {
- adminButton =
- ;
- } else {
- adminButton = ();
- const viaMap = new EnhancedMap>();
- data.events.map((ev: ISpaceSummaryEvent) => {
- if (ev.type === EventType.SpaceChild) {
- parentChildRelations.getOrCreate(ev.room_id, []).push(ev.state_key);
- }
- if (Array.isArray(ev.content["via"])) {
- const set = viaMap.getOrCreate(ev.state_key, new Set());
- ev.content["via"].forEach(via => set.add(via));
- }
- });
-
- return [data.rooms, parentChildRelations, viaMap];
- } catch (e) {
- console.error(e); // TODO
- }
-
- return [];
- }, [space], []);
-
- const roomsMap = useMemo(() => {
- if (!rooms) return null;
- const lcQuery = query.toLowerCase();
-
- const filteredRooms = rooms.filter(r => {
- return r.room_type === RoomType.Space // always include spaces to allow filtering of sub-space rooms
- || r.name?.toLowerCase().includes(lcQuery)
- || r.topic?.toLowerCase().includes(lcQuery);
- });
-
- return new Map(filteredRooms.map(r => [r.room_id, r]));
- // const root = rooms.get(space.roomId);
- }, [rooms, query]);
-
const title =
- ;
- const explanation =
- _t("If you can't find the room you're looking for, ask for an invite or Create a new room.", null,
- {a: sub => {
- return {sub} ;
- }},
- );
- let content;
- if (roomsMap) {
- content =
- {
- pendingActions.current.set(action.event.room_id, action);
- }}
- onPreviewClick={roomId => {
- showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), false);
- onFinished();
- }}
- onJoinClick={(roomId) => {
- showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), true);
- onFinished();
- }}
- />
- ;
- }
-
- // TODO loading state/error state
return (
);
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index 0b0f2a2ac9..31358a3731 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -15,8 +15,9 @@ limitations under the License.
*/
import React, {RefObject, useContext, useRef, useState} from "react";
-import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
+import {EventType} from "matrix-js-sdk/src/@types/event";
import {Room} from "matrix-js-sdk/src/models/room";
+import {EventSubscription} from "fbemitter";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import RoomAvatar from "../views/avatars/RoomAvatar";
@@ -25,13 +26,11 @@ import AccessibleButton from "../views/elements/AccessibleButton";
import RoomName from "../views/elements/RoomName";
import RoomTopic from "../views/elements/RoomTopic";
import InlineSpinner from "../views/elements/InlineSpinner";
-import FormButton from "../views/elements/FormButton";
import {inviteMultipleToRoom, showRoomInviteDialog} from "../../RoomInvite";
import {useRoomMembers} from "../../hooks/useRoomMembers";
import createRoom, {IOpts, Preset} from "../../createRoom";
import Field from "../views/elements/Field";
import {useEventEmitter} from "../../hooks/useEventEmitter";
-import StyledRadioGroup from "../views/elements/StyledRadioGroup";
import withValidation from "../views/elements/Validation";
import * as Email from "../../email";
import defaultDispatcher from "../../dispatcher/dispatcher";
@@ -42,18 +41,16 @@ import ErrorBoundary from "../views/elements/ErrorBoundary";
import {ActionPayload} from "../../dispatcher/payloads";
import RightPanel from "./RightPanel";
import RightPanelStore from "../../stores/RightPanelStore";
-import {EventSubscription} from "fbemitter";
import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
import {SetRightPanelPhasePayload} from "../../dispatcher/payloads/SetRightPanelPhasePayload";
import {useStateArray} from "../../hooks/useStateArray";
import SpacePublicShare from "../views/spaces/SpacePublicShare";
import {showAddExistingRooms, showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space";
-import {HierarchyLevel, ISpaceSummaryEvent, ISpaceSummaryRoom, showRoom} from "./SpaceRoomDirectory";
-import {useAsyncMemo} from "../../hooks/useAsyncMemo";
-import {EnhancedMap} from "../../utils/maps";
-import AutoHideScrollbar from "./AutoHideScrollbar";
+import {showRoom, SpaceHierarchy} from "./SpaceRoomDirectory";
import MemberAvatar from "../views/avatars/MemberAvatar";
import {useStateToggle} from "../../hooks/useStateToggle";
+import SpaceStore from "../../stores/SpaceStore";
+import FacePile from "../views/elements/FacePile";
interface IProps {
space: Room;
@@ -66,6 +63,7 @@ interface IProps {
interface IState {
phase: Phase;
showRightPanel: boolean;
+ myMembership: string;
}
enum Phase {
@@ -94,10 +92,47 @@ const useMyRoomMembership = (room: Room) => {
return membership;
};
+const SpaceInfo = ({ space }) => {
+ const joinRule = space.getJoinRule();
+
+ let visibilitySection;
+ if (joinRule === "public") {
+ visibilitySection =
+ { _t("Public space") }
+ ;
+ } else {
+ visibilitySection =
+ { _t("Private space") }
+ ;
+ }
+
+ return {
+ setBusy(true);
+ onRejectButtonClicked();
+ }}
+ >
+ { _t("Reject") }
+
+ {
+ setBusy(true);
+ onJoinButtonClicked();
+ }}
+ >
+ { _t("Accept") }
+
;
} else {
- joinButtons = {
+ setBusy(true);
+ onJoinButtonClicked();
+ }}
+ >
+ { _t("Join") }
+
+ )
}
- let visibilitySection;
- if (space.getJoinRule() === "public") {
- visibilitySection =
- { _t("Public space") }
- ;
- } else {
- visibilitySection =
- { _t("Private space") }
- ;
+ if (busy) {
+ joinButtons = (null);
-
+const SpaceSetupPrivateScope = ({ space, onFinished }) => {
return
-
- ,
- },
- ]}
- />
-
-
;
};
@@ -547,17 +537,26 @@ export default class SpaceRoomView extends React.PureComponent {
this.state = {
phase,
showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
+ myMembership: this.props.space.getMyMembership(),
};
this.dispatcherRef = defaultDispatcher.register(this.onAction);
this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate);
+ this.context.on("Room.myMembership", this.onMyMembership);
}
componentWillUnmount() {
defaultDispatcher.unregister(this.dispatcherRef);
this.rightPanelStoreToken.remove();
+ this.context.off("Room.myMembership", this.onMyMembership);
}
+ private onMyMembership = (room: Room, myMembership: string) => {
+ if (room.roomId === this.props.space.roomId) {
+ this.setState({ myMembership });
+ }
+ };
+
private onRightPanelStoreUpdate = () => {
this.setState({
showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
@@ -594,10 +593,45 @@ export default class SpaceRoomView extends React.PureComponent {
}
};
+ private goToFirstRoom = async () => {
+ // TODO actually go to the first room
+
+ const childRooms = SpaceStore.instance.getChildRooms(this.props.space.roomId);
+ if (childRooms.length) {
+ const room = childRooms[0];
+ defaultDispatcher.dispatch({
+ action: "view_room",
+ room_id: room.roomId,
+ });
+ return;
+ }
+
+ let suggestedRooms = SpaceStore.instance.suggestedRooms;
+ if (SpaceStore.instance.activeSpace !== this.props.space) {
+ // the space store has the suggested rooms loaded for a different space, fetch the right ones
+ suggestedRooms = (await SpaceStore.instance.fetchSuggestedRooms(this.props.space, 1)).rooms;
+ }
+
+ if (suggestedRooms.length) {
+ const room = suggestedRooms[0];
+ defaultDispatcher.dispatch({
+ action: "view_room",
+ room_id: room.room_id,
+ oobData: {
+ avatarUrl: room.avatar_url,
+ name: room.name || room.canonical_alias || room.aliases.pop() || _t("Empty room"),
+ },
+ });
+ return;
+ }
+
+ this.setState({ phase: Phase.Landing });
+ };
+
private renderBody() {
switch (this.state.phase) {
case Phase.Landing:
- if (this.props.space.getMyMembership() === "join") {
+ if (this.state.myMembership === "join") {
return {
case Phase.PublicCreateRooms:
return this.setState({ phase: Phase.PublicShare })}
/>;
case Phase.PublicShare:
- return this.setState({ phase: Phase.Landing })}
- />;
+ return {
this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
}}
@@ -634,7 +671,8 @@ export default class SpaceRoomView extends React.PureComponent {
return this.setState({ phase: Phase.Landing })}
/>;
}
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index f32b8ed0a9..12f5d6e890 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -22,8 +22,8 @@ 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";
-import * as Matrix from "matrix-js-sdk";
+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 UserActivity from "../../UserActivity";
@@ -463,6 +463,9 @@ class TimelinePanel extends React.Component {
}
});
}
+ if (payload.action === "scroll_to_bottom") {
+ this.jumpToLiveTimeline();
+ }
};
onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
@@ -1007,7 +1010,7 @@ class TimelinePanel extends React.Component {
* returns a promise which will resolve when the load completes.
*/
_loadTimeline(eventId, pixelOffset, offsetBase) {
- this._timelineWindow = new Matrix.TimelineWindow(
+ this._timelineWindow = new TimelineWindow(
MatrixClientPeg.get(), this.props.timelineSet,
{windowLimit: this.props.timelineCap});
diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx
index 4a1fd4313d..e19e312f58 100644
--- a/src/components/structures/UploadBar.tsx
+++ b/src/components/structures/UploadBar.tsx
@@ -43,7 +43,11 @@ export default class UploadBar extends React.Component {
constructor(props) {
super(props);
- this.state = {uploadsHere: []};
+
+ // Set initial state to any available upload in this room - we might be mounting
+ // earlier than the first progress event, so should show something relevant.
+ const uploadsHere = this.getUploadsInRoom();
+ this.state = {currentUpload: uploadsHere[0], uploadsHere};
}
componentDidMount() {
@@ -56,6 +60,11 @@ export default class UploadBar extends React.Component {
dis.unregister(this.dispatcherRef);
}
+ private getUploadsInRoom(): IUpload[] {
+ const uploads = ContentMessages.sharedInstance().getCurrentUploads();
+ return uploads.filter(u => u.roomId === this.props.room.roomId);
+ }
+
private onAction = (payload: ActionPayload) => {
switch (payload.action) {
case Action.UploadStarted:
@@ -64,8 +73,7 @@ export default class UploadBar extends React.Component {
case Action.UploadCanceled:
case Action.UploadFailed: {
if (!this.mounted) return;
- const uploads = ContentMessages.sharedInstance().getCurrentUploads();
- const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId);
+ const uploadsHere = this.getUploadsInRoom();
this.setState({currentUpload: uploadsHere[0], uploadsHere});
break;
}
diff --git a/src/components/structures/UserView.js b/src/components/structures/UserView.js
index dc05193ece..6b472783bb 100644
--- a/src/components/structures/UserView.js
+++ b/src/components/structures/UserView.js
@@ -17,13 +17,14 @@ limitations under the License.
import React from "react";
import PropTypes from "prop-types";
-import Matrix from "matrix-js-sdk";
import {MatrixClientPeg} from "../../MatrixClientPeg";
import * as sdk from "../../index";
import Modal from '../../Modal';
import { _t } from '../../languageHandler';
import HomePage from "./HomePage";
import {replaceableComponent} from "../../utils/replaceableComponent";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
@replaceableComponent("structures.UserView")
export default class UserView extends React.Component {
@@ -68,8 +69,8 @@ export default class UserView extends React.Component {
this.setState({loading: false});
return;
}
- const fakeEvent = new Matrix.MatrixEvent({type: "m.room.member", content: profileInfo});
- const member = new Matrix.RoomMember(null, this.props.userId);
+ const fakeEvent = new MatrixEvent({type: "m.room.member", content: profileInfo});
+ const member = new RoomMember(null, this.props.userId);
member.setMembershipEvent(fakeEvent);
this.setState({member, loading: false});
}
diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index be9be4db81..6fe99dd464 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -176,8 +176,8 @@ export default class ViewSource extends React.Component {
return (
{
}
const {hsUrl, isUrl} = serverConfig;
- const cli = Matrix.createClient({
+ const cli = createClient({
baseUrl: hsUrl,
idBaseUrl: isUrl,
});
diff --git a/src/components/structures/auth/SetupEncryptionBody.js b/src/components/structures/auth/SetupEncryptionBody.js
index e246b9cbd0..803df19d00 100644
--- a/src/components/structures/auth/SetupEncryptionBody.js
+++ b/src/components/structures/auth/SetupEncryptionBody.js
@@ -155,15 +155,14 @@ export default class SetupEncryptionBody extends React.Component {
let verifyButton;
if (store.hasDevicesToVerifyAgainst) {
verifyButton =
- { _t("Verify with another session") }
+ { _t("Use another login") }
;
}
return (
{
+ render() {
+ return (
+
+
+ );
+ }
+}
diff --git a/src/components/views/dialogs/SpaceSettingsDialog.tsx b/src/components/views/dialogs/SpaceSettingsDialog.tsx
index f6bf5b87e6..83f5d7141b 100644
--- a/src/components/views/dialogs/SpaceSettingsDialog.tsx
+++ b/src/components/views/dialogs/SpaceSettingsDialog.tsx
@@ -28,7 +28,6 @@ import {getTopic} from "../elements/RoomTopic";
import {avatarUrlForRoom} from "../../../Avatar";
import ToggleSwitch from "../elements/ToggleSwitch";
import AccessibleButton from "../elements/AccessibleButton";
-import FormButton from "../elements/FormButton";
import Modal from "../../../Modal";
import defaultDispatcher from "../../../dispatcher/dispatcher";
import {allSettled} from "../../../utils/promise";
@@ -127,23 +126,24 @@ const SpaceSettingsDialog: React.FC = ({ matrixClient: cli, space, onFin
{
defaultDispatcher.dispatch({
action: "leave_room",
room_id: space.roomId,
});
}}
- />
+ >
+ { _t("Leave Space") }
+
Modal.createDialog(DevtoolsDialog, {roomId: space.roomId})}>
@@ -152,7 +152,9 @@ const SpaceSettingsDialog: React.FC = ({ matrixClient: cli, space, onFin
{ _t("Cancel") }
-
+ { busy ? _t("Saving...") : _t("Save Changes") }
+
;
diff --git a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js b/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
index 07e29adcff..618b0b4347 100644
--- a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
+++ b/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
@@ -17,7 +17,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
-import {Room} from "matrix-js-sdk";
+import {Room} from "matrix-js-sdk/src/models/room";
import * as sdk from '../../../index';
import {dialogTermsInteractionCallback, TermsNotSignedError} from "../../../Terms";
import classNames from 'classnames';
diff --git a/src/components/views/dialogs/TermsDialog.js b/src/components/views/dialogs/TermsDialog.js
index 72e6c3f3a0..e8625ec6cb 100644
--- a/src/components/views/dialogs/TermsDialog.js
+++ b/src/components/views/dialogs/TermsDialog.js
@@ -20,8 +20,8 @@ import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import { _t, pickBestLanguage } from '../../../languageHandler';
-import Matrix from 'matrix-js-sdk';
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
class TermsCheckbox extends React.PureComponent {
static propTypes = {
@@ -85,22 +85,22 @@ export default class TermsDialog extends React.PureComponent {
_nameForServiceType(serviceType, host) {
switch (serviceType) {
- case Matrix.SERVICE_TYPES.IS:
+ case SERVICE_TYPES.IS:
return boolean;
+}
+
+interface IState {
+ recoveryKey: string;
+ recoveryKeyValid: boolean | null;
+ recoveryKeyCorrect: boolean | null;
+ recoveryKeyFileError: boolean | null;
+ forceRecoveryKey: boolean;
+ passPhrase: string;
+ keyMatches: boolean | null;
+}
+
/*
* Access Secure Secret Storage by requesting the user's passphrase.
*/
-export default class AccessSecretStorageDialog extends React.PureComponent {
- static propTypes = {
- // { passphrase, pubkey }
- keyInfo: PropTypes.object.isRequired,
- // Function from one of { passphrase, recoveryKey } -> boolean
- checkPrivateKey: PropTypes.func.isRequired,
- }
+export default class AccessSecretStorageDialog extends React.PureComponent {
+ private fileUpload = React.createRef();
constructor(props) {
super(props);
- this._fileUpload = React.createRef();
-
this.state = {
recoveryKey: "",
recoveryKeyValid: null,
@@ -61,21 +69,21 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
};
}
- _onCancel = () => {
+ private onCancel = () => {
this.props.onFinished(false);
- }
+ };
- _onUseRecoveryKeyClick = () => {
+ private onUseRecoveryKeyClick = () => {
this.setState({
forceRecoveryKey: true,
});
- }
+ };
- _validateRecoveryKeyOnChange = debounce(() => {
- this._validateRecoveryKey();
+ private validateRecoveryKeyOnChange = debounce(async () => {
+ await this.validateRecoveryKey();
}, VALIDATION_THROTTLE_MS);
- async _validateRecoveryKey() {
+ private async validateRecoveryKey() {
if (this.state.recoveryKey === '') {
this.setState({
recoveryKeyValid: null,
@@ -102,27 +110,27 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
}
}
- _onRecoveryKeyChange = (e) => {
+ private onRecoveryKeyChange = (ev: ChangeEvent) => {
this.setState({
- recoveryKey: e.target.value,
+ recoveryKey: ev.target.value,
recoveryKeyFileError: null,
});
// also clear the file upload control so that the user can upload the same file
// the did before (otherwise the onchange wouldn't fire)
- if (this._fileUpload.current) this._fileUpload.current.value = null;
+ if (this.fileUpload.current) this.fileUpload.current.value = null;
// We don't use Field's validation here because a) we want it in a separate place rather
// than in a tooltip and b) we want it to display feedback based on the uploaded file
// as well as the text box. Ideally we would refactor Field's validation logic so we could
// re-use some of it.
- this._validateRecoveryKeyOnChange();
- }
+ this.validateRecoveryKeyOnChange();
+ };
- _onRecoveryKeyFileChange = async e => {
- if (e.target.files.length === 0) return;
+ private onRecoveryKeyFileChange = async (ev: ChangeEvent) => {
+ if (ev.target.files.length === 0) return;
- const f = e.target.files[0];
+ const f = ev.target.files[0];
if (f.size > KEY_FILE_MAX_SIZE) {
this.setState({
@@ -140,7 +148,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
recoveryKeyFileError: null,
recoveryKey: contents.trim(),
});
- this._validateRecoveryKey();
+ await this.validateRecoveryKey();
} else {
this.setState({
recoveryKeyFileError: true,
@@ -150,14 +158,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
});
}
}
+ };
+
+ private onRecoveryKeyFileUploadClick = () => {
+ this.fileUpload.current.click();
}
- _onRecoveryKeyFileUploadClick = () => {
- this._fileUpload.current.click();
- }
-
- _onPassPhraseNext = async (e) => {
- e.preventDefault();
+ private onPassPhraseNext = async (ev: FormEvent) => {
+ ev.preventDefault();
if (this.state.passPhrase.length <= 0) return;
@@ -169,10 +177,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
} else {
this.setState({ keyMatches });
}
- }
+ };
- _onRecoveryKeyNext = async (e) => {
- e.preventDefault();
+ private onRecoveryKeyNext = async (ev: FormEvent) => {
+ ev.preventDefault();
if (!this.state.recoveryKeyValid) return;
@@ -184,16 +192,16 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
} else {
this.setState({ keyMatches });
}
- }
+ };
- _onPassPhraseChange = (e) => {
+ private onPassPhraseChange = (ev: ChangeEvent) => {
this.setState({
- passPhrase: e.target.value,
+ passPhrase: ev.target.value,
keyMatches: null,
});
- }
+ };
- getKeyValidationText() {
+ private getKeyValidationText(): string {
if (this.state.recoveryKeyFileError) {
return _t("Wrong file type");
} else if (this.state.recoveryKeyCorrect) {
@@ -208,7 +216,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
}
render() {
- const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+ // Caution: Making this an import will break tests.
+ const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
const hasPassphrase = (
this.props.keyInfo &&
@@ -244,18 +253,18 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
{
button: s =>
{s}
,
},
)}
-
);
}
diff --git a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
index ca28ca094c..1fafe03d95 100644
--- a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
@@ -19,7 +19,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import * as sdk from '../../../../index';
import {MatrixClientPeg} from '../../../../MatrixClientPeg';
-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
import { _t } from '../../../../languageHandler';
import { accessSecretStorage } from '../../../../SecurityManager';
diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
new file mode 100644
index 0000000000..e223744352
--- /dev/null
+++ b/src/components/views/elements/FacePile.tsx
@@ -0,0 +1,66 @@
+/*
+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, { HTMLAttributes } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { sortBy } from "lodash";
+
+import MemberAvatar from "../avatars/MemberAvatar";
+import { _t } from "../../../languageHandler";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import { useRoomMembers } from "../../../hooks/useRoomMembers";
+
+const DEFAULT_NUM_FACES = 5;
+
+interface IProps extends HTMLAttributes {
+ room: Room;
+ onlyKnownUsers?: boolean;
+ numShown?: number;
+}
+
+const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
+
+const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IProps) => {
+ let members = useRoomMembers(room);
+
+ // sort users with an explicit avatar first
+ const iteratees = [member => !!member.getMxcAvatarUrl()];
+ if (onlyKnownUsers) {
+ members = members.filter(isKnownMember);
+ } else {
+ // sort known users first
+ iteratees.unshift(member => isKnownMember(member));
+ }
+ if (members.length < 1) return null;
+
+ const shownMembers = sortBy(members, iteratees).slice(0, numShown);
+ return = ({
brandClass = `mx_SSOButton_brand_${brandName}`;
icon = 
;
} else if (typeof idp?.icon === "string" && idp.icon.startsWith("mxc://")) {
- const src = mediaFromMxc(idp.icon).getSquareThumbnailHttp(24);
+ const src = mediaFromMxc(idp.icon, matrixClient).getSquareThumbnailHttp(24);
icon = 
;
}
diff --git a/src/components/views/elements/TextWithTooltip.js b/src/components/views/elements/TextWithTooltip.js
index e4ad234ae2..0bd491768c 100644
--- a/src/components/views/elements/TextWithTooltip.js
+++ b/src/components/views/elements/TextWithTooltip.js
@@ -46,12 +46,14 @@ export default class TextWithTooltip extends React.Component {
render() {
const Tooltip = sdk.getComponent("elements.Tooltip");
+ const {class: className, children, tooltip, tooltipClass, ...props} = this.props;
+
return (
-
- {this.props.children}
+
+ {children}
{this.state.hover && = ({
let text: string;
if (waitingForOtherParty) {
if (isSelfVerification) {
- text = _t("Waiting for you to accept on your other session…");
+ text = _t("Accept on your other login…");
} else {
text = _t("Waiting for %(displayName)s to accept…", {
displayName: member.displayName || member.name || member.userId,
diff --git a/src/components/views/room_settings/RelatedGroupSettings.js b/src/components/views/room_settings/RelatedGroupSettings.js
index f82e238722..272ecd1228 100644
--- a/src/components/views/room_settings/RelatedGroupSettings.js
+++ b/src/components/views/room_settings/RelatedGroupSettings.js
@@ -16,7 +16,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import Modal from '../../../Modal';
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index 5ab2b82a32..9d9e3a1ba0 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -46,6 +46,7 @@ import {IDiff} from "../../../editor/diff";
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";
// matches emoticons which follow the start of a line or whitespace
@@ -93,6 +94,7 @@ interface IProps {
placeholder?: string;
label?: string;
initialCaret?: DocumentOffset;
+ disabled?: boolean;
onChange?();
onPaste?(event: ClipboardEvent, model: EditorModel): boolean;
@@ -421,105 +423,101 @@ export default class BasicMessageEditor extends React.Component
private onKeyDown = (event: React.KeyboardEvent) => {
const model = this.props.model;
- const modKey = IS_MAC ? event.metaKey : event.ctrlKey;
let handled = false;
- // format bold
- if (modKey && event.key === Key.B) {
- this.onFormatAction(Formatting.Bold);
- handled = true;
- // format italics
- } else if (modKey && event.key === Key.I) {
- this.onFormatAction(Formatting.Italics);
- handled = true;
- // format quote
- } else if (modKey && event.key === Key.GREATER_THAN) {
- this.onFormatAction(Formatting.Quote);
- handled = true;
- // redo
- } else if ((!IS_MAC && modKey && event.key === Key.Y) ||
- (IS_MAC && modKey && event.shiftKey && event.key === Key.Z)) {
- if (this.historyManager.canRedo()) {
- const {parts, caret} = this.historyManager.redo();
- // pass matching inputType so historyManager doesn't push echo
- // when invoked from rerender callback.
- model.reset(parts, caret, "historyRedo");
- }
- handled = true;
- // undo
- } else if (modKey && event.key === Key.Z) {
- if (this.historyManager.canUndo()) {
- const {parts, caret} = this.historyManager.undo(this.props.model);
- // pass matching inputType so historyManager doesn't push echo
- // when invoked from rerender callback.
- model.reset(parts, caret, "historyUndo");
- }
- handled = true;
- // insert newline on Shift+Enter
- } else if (event.key === Key.ENTER && (event.shiftKey || (IS_MAC && event.altKey))) {
- this.insertText("\n");
- handled = true;
- // move selection to start of composer
- } else if (modKey && event.key === Key.HOME && !event.shiftKey) {
- setSelection(this.editorRef.current, model, {
- index: 0,
- offset: 0,
- });
- handled = true;
- // move selection to end of composer
- } else if (modKey && event.key === Key.END && !event.shiftKey) {
- setSelection(this.editorRef.current, model, {
- index: model.parts.length - 1,
- offset: model.parts[model.parts.length - 1].text.length,
- });
- handled = true;
- // autocomplete or enter to send below shouldn't have any modifier keys pressed.
- } else {
- const metaOrAltPressed = event.metaKey || event.altKey;
- const modifierPressed = metaOrAltPressed || event.shiftKey;
- if (model.autoComplete && model.autoComplete.hasCompletions()) {
- const autoComplete = model.autoComplete;
- switch (event.key) {
- case Key.ARROW_UP:
- if (!modifierPressed) {
- autoComplete.onUpArrow(event);
- handled = true;
- }
- break;
- case Key.ARROW_DOWN:
- if (!modifierPressed) {
- autoComplete.onDownArrow(event);
- handled = true;
- }
- break;
- case Key.TAB:
- if (!metaOrAltPressed) {
- autoComplete.onTab(event);
- handled = true;
- }
- break;
- case Key.ESCAPE:
- if (!modifierPressed) {
- autoComplete.onEscape(event);
- handled = true;
- }
- break;
- default:
- return; // don't preventDefault on anything else
- }
- } else if (event.key === Key.TAB) {
- this.tabCompleteName(event);
+ const action = getKeyBindingsManager().getMessageComposerAction(event);
+ switch (action) {
+ case MessageComposerAction.FormatBold:
+ this.onFormatAction(Formatting.Bold);
handled = true;
- } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
- this.formatBarRef.current.hide();
- }
+ break;
+ case MessageComposerAction.FormatItalics:
+ this.onFormatAction(Formatting.Italics);
+ handled = true;
+ break;
+ case MessageComposerAction.FormatQuote:
+ this.onFormatAction(Formatting.Quote);
+ handled = true;
+ break;
+ case MessageComposerAction.EditRedo:
+ if (this.historyManager.canRedo()) {
+ const {parts, caret} = this.historyManager.redo();
+ // pass matching inputType so historyManager doesn't push echo
+ // when invoked from rerender callback.
+ model.reset(parts, caret, "historyRedo");
+ }
+ handled = true;
+ break;
+ case MessageComposerAction.EditUndo:
+ if (this.historyManager.canUndo()) {
+ const {parts, caret} = this.historyManager.undo(this.props.model);
+ // pass matching inputType so historyManager doesn't push echo
+ // when invoked from rerender callback.
+ model.reset(parts, caret, "historyUndo");
+ }
+ handled = true;
+ break;
+ case MessageComposerAction.NewLine:
+ this.insertText("\n");
+ handled = true;
+ break;
+ case MessageComposerAction.MoveCursorToStart:
+ setSelection(this.editorRef.current, model, {
+ index: 0,
+ offset: 0,
+ });
+ handled = true;
+ break;
+ case MessageComposerAction.MoveCursorToEnd:
+ setSelection(this.editorRef.current, model, {
+ index: model.parts.length - 1,
+ offset: model.parts[model.parts.length - 1].text.length,
+ });
+ handled = true;
+ break;
}
+ if (handled) {
+ event.preventDefault();
+ event.stopPropagation();
+ return;
+ }
+
+ const autocompleteAction = getKeyBindingsManager().getAutocompleteAction(event);
+ if (model.autoComplete && model.autoComplete.hasCompletions()) {
+ const autoComplete = model.autoComplete;
+ switch (autocompleteAction) {
+ case AutocompleteAction.CompleteOrPrevSelection:
+ case AutocompleteAction.PrevSelection:
+ autoComplete.selectPreviousSelection();
+ handled = true;
+ break;
+ case AutocompleteAction.CompleteOrNextSelection:
+ case AutocompleteAction.NextSelection:
+ autoComplete.selectNextSelection();
+ handled = true;
+ break;
+ case AutocompleteAction.Cancel:
+ autoComplete.onEscape(event);
+ handled = true;
+ break;
+ default:
+ return; // don't preventDefault on anything else
+ }
+ } else if (autocompleteAction === AutocompleteAction.CompleteOrPrevSelection
+ || autocompleteAction === AutocompleteAction.CompleteOrNextSelection) {
+ // there is no current autocomplete window, try to open it
+ this.tabCompleteName();
+ handled = true;
+ } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
+ this.formatBarRef.current.hide();
+ }
+
if (handled) {
event.preventDefault();
event.stopPropagation();
}
};
- private async tabCompleteName(event: React.KeyboardEvent) {
+ private async tabCompleteName() {
try {
await new Promise(resolve => this.setState({showVisualBell: false}, resolve));
const {model} = this.props;
@@ -542,7 +540,7 @@ export default class BasicMessageEditor extends React.Component
// Don't try to do things with the autocomplete if there is none shown
if (model.autoComplete) {
- await model.autoComplete.onTab(event);
+ await model.autoComplete.startSelection();
if (!model.autoComplete.hasSelection()) {
this.setState({showVisualBell: true});
model.autoComplete.close();
@@ -672,6 +670,9 @@ export default class BasicMessageEditor extends React.Component
});
const classes = classNames("mx_BasicMessageComposer_input", {
"mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
+
+ // TODO: @@ TravisR: This doesn't work properly. The composer resets in a strange way.
+ "mx_BasicMessageComposer_input_disabled": this.props.disabled,
});
const shortcuts = {
@@ -704,6 +705,7 @@ export default class BasicMessageEditor extends React.Component
aria-expanded={Boolean(this.state.autoComplete)}
aria-activedescendant={completionIndex >= 0 ? generateCompletionDomId(completionIndex) : undefined}
dir="auto"
+ aria-disabled={this.props.disabled}
/>
);
}
diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index 6ecb2bd549..b006fe8c8d 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -27,13 +27,12 @@ import {parseEvent} from '../../../editor/deserialize';
import {PartCreator} from '../../../editor/parts';
import EditorStateTransfer from '../../../utils/EditorStateTransfer';
import classNames from 'classnames';
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
import BasicMessageComposer from "./BasicMessageComposer";
-import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {Action} from "../../../dispatcher/actions";
-import SettingsStore from "../../../settings/SettingsStore";
import CountlyAnalytics from "../../../CountlyAnalytics";
+import {getKeyBindingsManager, MessageComposerAction} from '../../../KeyBindingsManager';
import {replaceableComponent} from "../../../utils/replaceableComponent";
function _isReply(mxEvent) {
@@ -136,38 +135,41 @@ export default class EditMessageComposer extends React.Component {
if (this._editorRef.isComposing(event)) {
return;
}
- if (event.metaKey || event.altKey || event.shiftKey) {
- return;
- }
- const ctrlEnterToSend = !!SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend');
- const send = ctrlEnterToSend ? event.key === Key.ENTER && isOnlyCtrlOrCmdKeyEvent(event)
- : event.key === Key.ENTER;
- if (send) {
- this._sendEdit();
- event.preventDefault();
- } else if (event.key === Key.ESCAPE) {
- this._cancelEdit();
- } else if (event.key === Key.ARROW_UP) {
- if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) {
- return;
- }
- const previousEvent = findEditableEvent(this._getRoom(), false, this.props.editState.getEvent().getId());
- if (previousEvent) {
- dis.dispatch({action: 'edit_event', event: previousEvent});
+ const action = getKeyBindingsManager().getMessageComposerAction(event);
+ switch (action) {
+ case MessageComposerAction.Send:
+ this._sendEdit();
event.preventDefault();
+ break;
+ case MessageComposerAction.CancelEditing:
+ this._cancelEdit();
+ break;
+ case MessageComposerAction.EditPrevMessage: {
+ if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) {
+ return;
+ }
+ const previousEvent = findEditableEvent(this._getRoom(), false,
+ this.props.editState.getEvent().getId());
+ if (previousEvent) {
+ dis.dispatch({action: 'edit_event', event: previousEvent});
+ event.preventDefault();
+ }
+ break;
}
- } else if (event.key === Key.ARROW_DOWN) {
- if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) {
- return;
+ case MessageComposerAction.EditNextMessage: {
+ if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) {
+ return;
+ }
+ const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
+ if (nextEvent) {
+ dis.dispatch({action: 'edit_event', event: nextEvent});
+ } else {
+ dis.dispatch({action: 'edit_event', event: null});
+ dis.fire(Action.FocusComposer);
+ }
+ event.preventDefault();
+ break;
}
- const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
- if (nextEvent) {
- dis.dispatch({action: 'edit_event', event: nextEvent});
- } else {
- dis.dispatch({action: 'edit_event', event: null});
- dis.fire(Action.FocusComposer);
- }
- event.preventDefault();
}
}
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index cbe3252c2b..d51f4c00f1 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -28,7 +28,7 @@ import * as sdk from "../../../index";
import dis from '../../../dispatcher/dispatcher';
import SettingsStore from "../../../settings/SettingsStore";
import {Layout, LayoutPropType} from "../../../settings/Layout";
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
import {formatTime} from "../../../DateUtils";
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
@@ -936,7 +936,7 @@ export default class EventTile extends React.Component {
);
const TooltipButton = sdk.getComponent('elements.TooltipButton');
- const keyRequestInfo = isEncryptionFailure ?
+ const keyRequestInfo = isEncryptionFailure && !isRedacted ?
+ { children }
+
;
+ }
}
- return } + ; + } else { + results =
+
;
+ }
+
+ content = <>
+ { _t("No results found") }
+{ _t("You may want to try a different search or check for typos.") }
+
+ { countsStr }
+ { editSection }
+
+ { error &&
+ { error }
+
}
+ {_t("Your server does not support showing space hierarchies.")}
; + } + + // TODO loading state/error state + return <> +{ _t("Explore rooms") }
- { explanation }
+ { _t("If you can't find the room you're looking for, ask for an invite or create a new room.",
+ null,
+ {a: sub => {
+ return {sub} ;
+ }},
+ ) }
- {
+ showRoom(room, viaServers, autoJoin);
+ onFinished();
+ }}
+ initialText={initialText}
+ >
+
+ { _t("Create room") }
+
+
- { adminButton }
-
- { content }
+
+ { visibilitySection }
+ { joinRule === "public" &&
+ {(count) => count > 0 ? (
+ {
+ defaultDispatcher.dispatch({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.RoomMemberList,
+ refireParams: { space },
+ });
+ }}
+ >
+ { _t("%(count)s members", { count }) }
+
+ ) : null}
+ }
+
+};
+
const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
const cli = useContext(MatrixClientContext);
const myMembership = useMyRoomMembership(space);
+ const [busy, setBusy] = useState(false);
+
let inviterSection;
let joinButtons;
if (myMembership === "invite") {
@@ -121,22 +156,41 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
}
joinButtons = <>
-
@@ -145,26 +199,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
-
{(topic, ref) =>
+ { space.getJoinRule() === "public" && {
- showRoomInviteDialog(space.roomId);
- }}>
- { _t("Invite people") }
+ {
+ showRoomInviteDialog(space.roomId);
+ }}
+ >
+ { _t("Invite") }
);
}
const canAddRooms = myMembership === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
- const [_, forceUpdate] = useStateToggle(false); // TODO
+ const [refreshToken, forceUpdate] = useStateToggle(false);
let addRoomButtons;
if (canAddRooms) {
@@ -226,50 +266,13 @@ const SpaceLanding = ({ space }) => {
;
}
- const [loading, roomsMap, relations, numRooms] = useAsyncMemo(async () => {
- try {
- const data = await cli.getSpaceSummary(space.roomId, undefined, myMembership !== "join");
-
- const parentChildRelations = new EnhancedMap();
- data.events.map((ev: ISpaceSummaryEvent) => {
- if (ev.type === EventType.SpaceChild) {
- parentChildRelations.getOrCreate(ev.room_id, []).push(ev.state_key);
- }
- });
-
- const roomsMap = new Map(data.rooms.map(r => [r.room_id, r]));
- const numRooms = data.rooms.filter(r => r.room_type !== RoomType.Space).length;
- return [false, roomsMap, parentChildRelations, numRooms];
- } catch (e) {
- console.error(e); // TODO
- }
-
- return [false];
- }, [space, _], [true]);
-
- let previewRooms;
- if (roomsMap) {
- previewRooms =
- {
- showRoom(roomsMap.get(roomId), [], false); // TODO
- }}
- />
- ;
- } else if (loading) {
- previewRooms = ({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.RoomMemberList,
+ refireParams: { space },
+ });
+ };
return
- {(count) => count > 0 ? (
- {
- defaultDispatcher.dispatch({
- action: Action.SetRightPanelPhase,
- phase: RightPanelPhases.RoomMemberList,
- refireParams: { space },
- });
- }}
- >
- { _t("%(count)s members", { count }) }
-
- ) : null}
-
};
- if (shouldShowSpaceSettings(cli, space)) {
- if (space.getJoinRule() === "public") {
- return _t("Your public space
;
};
@@ -337,6 +321,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
placeholder={placeholders[i]}
value={roomNames[i]}
onChange={ev => setRoomName(i, ev.target.value)}
+ autoFocus={i === 2}
/>;
});
@@ -369,7 +354,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("Next")
+ buttonLabel = busy ? _t("Creating rooms...") : _t("Continue")
}
return
- { visibilitySection }
-
- {(count) => count > 0 ? (
- {
- defaultDispatcher.dispatch({
- action: Action.SetRightPanelPhase,
- phase: RightPanelPhases.RoomMemberList,
- refireParams: { space },
- });
- }}
- >
- { _t("%(count)s members", { count }) }
-
- ) : null}
-
-
+
@@ -172,6 +207,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
}
{ joinButtons }
@@ -186,17 +222,21 @@ const SpaceLanding = ({ space }) => {
let inviteButton;
if (myMembership === "join" && space.canInvite(userId)) {
inviteButton = (
-
-
- { myMembership === "join" ? _t("Rooms") : _t("Default Rooms")}
- { numRooms } -{_t("Your server does not support showing space hierarchies.")}
; - } + const onMembersClick = () => { + defaultDispatcher.dispatch{ name }
-
+
- { inviteButton }
{ addRoomButtons }
{ settingsButton }
- { previewRooms }
+
@@ -380,61 +365,55 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
{ fields }
;
};
const SpaceSetupPublicShare = ({ space, onFinished }) => {
return
-
-
;
};
-const SpaceSetupPrivateScope = ({ onFinished }) => {
- const [option, setOption] = useState{ _t("Share your public space") }
-{ _t("At the moment only you can see it.") }
+ { _t("Share %(name)s", { name: space.name }) }
+
+ { _t("It's just you at the moment, it will be even better with others.") }
+
-
-
+ { _t("Go to my first room") }
+
{ _t("Who are you working with?") }
-{ _t("Ensure the right people have access to the space.") }
-
- { _t("Just Me") }
-{ _t("A private space just for you") }
- ,
- }, {
- value: "meAndMyTeammates",
- className: "mx_SpaceRoomView_privateScope_meAndMyTeammatesButton",
- label: { _t("Me and my teammates") }
-{ _t("A private space for you and your teammates") }
-
- onFinished(option !== "justMe")} />
+ { onFinished(false) }}
+ >
+
+ { onFinished(true) }}
+ >
+
;
};
@@ -464,6 +443,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
onChange={ev => setEmailAddress(i, ev.target.value)}
ref={fieldRefs[i]}
onValidate={validateEmailRules}
+ autoFocus={i === 0}
/>;
});
@@ -501,9 +481,18 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
setBusy(false);
};
+ let onClick = onFinished;
+ let buttonLabel = _t("Skip for now");
+ if (emailAddresses.some(name => name.trim())) {
+ onClick = onNextClick;
+ buttonLabel = busy ? _t("Inviting...") : _t("Continue")
+ }
+
return
+ { _t("Make sure the right people have access to %(name)s", { name: space.name }) }
+
+ { _t("Just me") }
+{ _t("A private space to organise your rooms") }
+ { _t("Me and my teammates") }
+{ _t("A private space for you and your teammates") }
+ { _t("Invite your teammates") }
-{ _t("Ensure the right people have access to the space.") }
+
+ { _t("Make sure the right people have access. You can invite more later.") }
+
{ error && { error }
}
{ fields }
@@ -518,8 +507,9 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
- {_t("Skip for now")}
-
+ { buttonLabel }
+
-
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index 32bdddb82a..9d004de2ec 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import Matrix from 'matrix-js-sdk';
+import {createClient} from 'matrix-js-sdk/src/matrix';
import React, {ReactNode} from 'react';
import {MatrixClient} from "matrix-js-sdk/src/client";
@@ -181,7 +181,7 @@ export default class Registration extends React.ComponentRoom ID: {roomId}
- Event ID: {eventId}
+ Room ID: {roomId}
+ Event ID: {eventId}
{isEditing ? this.editSourceContent() : this.viewSourceContent()}
{_t( - "Verify this login to access your encrypted messages and " + - "prove to others that this login is really you.", + "Verify your identity to access encrypted messages and prove your identity to others.", )}
@@ -205,8 +204,8 @@ export default class SetupEncryptionBody extends React.Component {
return (
{
if (onClick) {
return (
= ({ matrixClient: cli, space,
const existingRoomsSet = new Set(existingRooms);
const rooms = cli.getVisibleRooms().filter(room => {
return !existingRoomsSet.has(room) // not already in space
+ && !room.isSpaceRoom() // not a space itself
&& room.name.toLowerCase().includes(lcQuery) // contains query
&& !DMRoomMap.shared().getUserIdForRoomId(room.roomId); // not a DM
});
@@ -109,7 +109,7 @@ const AddExistingToSpaceDialog: React.FC = ({ matrixClient: cli, space,
const title =
;
@@ -127,29 +127,9 @@ const AddExistingToSpaceDialog: React.FC = ({ matrixClient: cli, space,
className="mx_textinput_icon mx_textinput_search"
placeholder={ _t("Filter your rooms and spaces") }
onSearch={setQuery}
+ autoComplete={true}
/>
- { spaces.length > 0 ? (
-
= ({ matrixClient: cli, space,
) : undefined }
+ { spaces.length > 0 ? (
+ = ({ matrixClient: cli, space,
- {
setBusy(true);
@@ -199,7 +200,9 @@ const AddExistingToSpaceDialog: React.FC = ({ matrixClient: cli, space,
}
setBusy(false);
}}
- />
+ >
+ { busy ? _t("Adding...") : _t("Add") }
+
;
};
diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.js b/src/components/views/dialogs/ConfirmUserActionDialog.js
index 8cfd28986b..8059b9172a 100644
--- a/src/components/views/dialogs/ConfirmUserActionDialog.js
+++ b/src/components/views/dialogs/ConfirmUserActionDialog.js
@@ -16,7 +16,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import { GroupMemberType } from '../../../groups';
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index dfcc5d6dfb..9f5513e0a3 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -19,7 +19,6 @@ import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import SyntaxHighlight from '../elements/SyntaxHighlight';
import { _t } from '../../../languageHandler';
-import { Room, MatrixEvent } from "matrix-js-sdk";
import Field from "../elements/Field";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {useEventEmitter} from "../../../hooks/useEventEmitter";
@@ -39,6 +38,8 @@ import SettingsStore, {LEVEL_ORDER} from "../../../settings/SettingsStore";
import Modal from "../../../Modal";
import ErrorDialog from "./ErrorDialog";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
class GenericEditor extends React.PureComponent {
// static propTypes = {onBack: PropTypes.func.isRequired};
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 9aef421d5a..a274f96a17 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -29,7 +29,9 @@ import dis from "../../../dispatcher/dispatcher";
import IdentityAuthClient from "../../../IdentityAuthClient";
import Modal from "../../../Modal";
import {humanizeTime} from "../../../utils/humanize";
-import createRoom, {canEncryptToAllUsers, findDMForUser, privateShouldBeEncrypted} from "../../../createRoom";
+import createRoom, {
+ canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted,
+} from "../../../createRoom";
import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
import {Key} from "../../../Keyboard";
import {Action} from "../../../dispatcher/actions";
@@ -43,6 +45,7 @@ import {Room} from "matrix-js-sdk/src/models/room";
import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import {replaceableComponent} from "../../../utils/replaceableComponent";
import {mediaFromMxc} from "../../../customisations/Media";
+import {getAddressType} from "../../../UserAddress";
// we have a number of types defined from the Matrix spec which can't reasonably be altered here.
/* eslint-disable camelcase */
@@ -331,6 +334,7 @@ interface IInviteDialogState {
threepidResultsMixin: { user: Member, userId: string}[];
canUseIdentityServer: boolean;
tryingIdentityServer: boolean;
+ consultFirst: boolean;
// These two flags are used for the 'Go' button to communicate what is going on.
busy: boolean,
@@ -379,6 +383,7 @@ export default class InviteDialog extends React.PureComponent {
+ this.setState({consultFirst: ev.target.checked});
+ }
+
static buildRecents(excludedTargetIds: Set): {userId: string, user: RoomMember, lastActive: number}[] {
const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
@@ -673,19 +682,20 @@ export default class InviteDialog extends React.PureComponent {
+ _inviteUsers = async () => {
const startTime = CountlyAnalytics.getTimestamp();
this.setState({busy: true});
this._convertFilter();
const targets = this._convertFilter();
const targetIds = targets.map(t => t.userId);
- const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+ const cli = MatrixClientPeg.get();
+ const room = cli.getRoom(this.props.roomId);
if (!room) {
console.error("Failed to find the room to invite users to");
this.setState({
@@ -695,12 +705,34 @@ export default class InviteDialog extends React.PureComponent {
+ try {
+ const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
if (!this._shouldAbortAfterInviteError(result)) { // handles setting error message too
this.props.onFinished();
}
- }).catch(err => {
+
+ if (cli.isRoomEncrypted(this.props.roomId) &&
+ SettingsStore.getValue("feature_room_history_key_sharing")) {
+ const visibilityEvent = room.currentState.getStateEvents(
+ "m.room.history_visibility", "",
+ );
+ const visibility = visibilityEvent && visibilityEvent.getContent() &&
+ visibilityEvent.getContent().history_visibility;
+ if (visibility == "world_readable" || visibility == "shared") {
+ const invitedUsers = [];
+ for (const [addr, state] of Object.entries(result.states)) {
+ if (state === "invited" && getAddressType(addr) === "mx-user-id") {
+ invitedUsers.push(addr);
+ }
+ }
+ console.log("Sharing history with", invitedUsers);
+ cli.sendSharedHistoryKeys(
+ this.props.roomId, invitedUsers,
+ );
+ }
+ }
+ } catch (err) {
console.error(err);
this.setState({
busy: false,
@@ -708,7 +740,7 @@ export default class InviteDialog extends React.PureComponent {
@@ -721,16 +753,34 @@ export default class InviteDialog extends React.PureComponent {
- let filterText = this.state.filterText;
- const targets = this.state.targets.map(t => t); // cheap clone for mutation
- const idx = targets.indexOf(member);
- if (idx >= 0) {
- targets.splice(idx, 1);
- } else {
- targets.push(member);
- filterText = ""; // clear the filter when the user accepts a suggestion
- }
- this.setState({targets, filterText});
+ if (!this.state.busy) {
+ let filterText = this.state.filterText;
+ const targets = this.state.targets.map(t => t); // cheap clone for mutation
+ const idx = targets.indexOf(member);
+ if (idx >= 0) {
+ targets.splice(idx, 1);
+ } else {
+ targets.push(member);
+ filterText = ""; // clear the filter when the user accepts a suggestion
+ }
+ this.setState({targets, filterText});
- if (this._editorRef && this._editorRef.current) {
- this._editorRef.current.focus();
+ if (this._editorRef && this._editorRef.current) {
+ this._editorRef.current.focus();
+ }
}
};
@@ -1189,10 +1241,13 @@ export default class InviteDialog extends React.PureComponent
+ ![]({require("../../../../res/img/element-icons/info.svg")})
+ {" " + _t("Invited people will be able to read old messages.")}
+ ;
+ }
+ }
} else if (this.props.kind === KIND_CALL_TRANSFER) {
title = _t("Transfer");
buttonText = _t("Transfer");
goButtonFn = this._transferCall;
+ consultSection =
+ {keySharingWarning}
{this._renderIdentityServerWarning()}
);
diff --git a/src/components/views/dialogs/ReportEventDialog.js b/src/components/views/dialogs/ReportEventDialog.js
index 67ed0f8f53..5454b97287 100644
--- a/src/components/views/dialogs/ReportEventDialog.js
+++ b/src/components/views/dialogs/ReportEventDialog.js
@@ -18,7 +18,7 @@ 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";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import SdkConfig from '../../../SdkConfig';
import Markdown from '../../../Markdown';
diff --git a/src/components/views/dialogs/SeshatResetDialog.tsx b/src/components/views/dialogs/SeshatResetDialog.tsx
new file mode 100644
index 0000000000..135f5d8197
--- /dev/null
+++ b/src/components/views/dialogs/SeshatResetDialog.tsx
@@ -0,0 +1,54 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import {_t} from "../../../languageHandler";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+import {IDialogProps} from "./IDialogProps";
+
+@replaceableComponent("views.dialogs.SeshatResetDialog")
+export default class SeshatResetDialog extends React.PureComponent{_t( - "Without completing security on this session, it won’t have " + - "access to encrypted messages.", + "Without verifying, you won’t have access to all your messages " + + "and may appear as untrusted to others.", )}
-
{ _t("Add existing spaces/rooms") }
+{ _t("Add existing rooms") }
{ spaceOptionSection }
- {
- if (checked) {
- selectedToAdd.add(space);
- } else {
- selectedToAdd.delete(space);
- }
- setSelectedToAdd(new Set(selectedToAdd));
- }}
- />;
- }) }
-
- ) : null }
-
{ rooms.length > 0 ? (
{ _t("Spaces") }
- { spaces.map(space => { - return{ _t("Rooms") }
@@ -171,6 +151,27 @@ const AddExistingToSpaceDialog: React.FC
+ {
+ if (checked) {
+ selectedToAdd.add(space);
+ } else {
+ selectedToAdd.delete(space);
+ }
+ setSelectedToAdd(new Set(selectedToAdd));
+ }}
+ />;
+ }) }
+
+ ) : null }
+
{ spaces.length + rooms.length < 1 ?
{ _t("No results") }
: undefined }
@@ -184,8 +185,8 @@ const AddExistingToSpaceDialog: React.FC{ _t("Spaces") }
+ { spaces.map(space => { + return
+ {" " + _t("Invited people will be able to read old messages.")}
+ ;
+ }
+ }
} else if (this.props.kind === KIND_CALL_TRANSFER) {
title = _t("Transfer");
buttonText = _t("Transfer");
goButtonFn = this._transferCall;
+ consultSection =
+
+
;
} else {
console.error("Unknown kind of InviteDialog: " + this.props.kind);
}
@@ -1319,12 +1401,14 @@ export default class InviteDialog extends React.PureComponent{this.state.errorText}
{this._renderSection('recents')}
{this._renderSection('suggestions')}
+ {consultSection}
+
+
+ {_t("You most likely do not want to reset your event index store")}
+
+ {_t("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",
+ )}
+
{ _t("Make this space private") }
setJoinRule(checked ? "private" : "invite")}
+ checked={joinRule !== "public"}
+ onChange={checked => setJoinRule(checked ? "invite" : "public")}
disabled={!canSetJoinRule}
aria-label={_t("Make this space private")}
/>
- {_t("Identity Server")}
({host})
;
- case Matrix.SERVICE_TYPES.IM:
+ case SERVICE_TYPES.IM:
return ({host})
{_t("Integration Manager")}
({host})
;
}
}
_summaryForServiceType(serviceType) {
switch (serviceType) {
- case Matrix.SERVICE_TYPES.IS:
+ case SERVICE_TYPES.IS:
return ({host})
{_t("Find others by phone or email")}
{_t("Be found by phone or email")}
;
- case Matrix.SERVICE_TYPES.IM:
+ case SERVICE_TYPES.IM:
return {_t("Be found by phone or email")}
{_t("Use bots, bridges, widgets and sticker packs")}
;
diff --git a/src/components/views/dialogs/VerificationRequestDialog.js b/src/components/views/dialogs/VerificationRequestDialog.js
index 308dc6d622..205597a1c4 100644
--- a/src/components/views/dialogs/VerificationRequestDialog.js
+++ b/src/components/views/dialogs/VerificationRequestDialog.js
@@ -50,7 +50,7 @@ export default class VerificationRequestDialog extends React.Component {
const member = this.props.member ||
otherUserId && MatrixClientPeg.get().getUser(otherUserId);
const title = request && request.isSelfVerification ?
- _t("Verify other session") : _t("Verification Request");
+ _t("Verify other login") : _t("Verification Request");
return
+
+};
+
+export default FacePile;
diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index e61d312305..a8e16813e6 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -17,7 +17,8 @@ import React from 'react';
import * as sdk from '../../../index';
import dis from '../../../dispatcher/dispatcher';
import classNames from 'classnames';
-import { Room, RoomMember } from 'matrix-js-sdk';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
import PropTypes from 'prop-types';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import FlairStore from "../../../stores/FlairStore";
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 2e0cc50435..870803995d 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -21,7 +21,7 @@ import {_t} from '../../../languageHandler';
import PropTypes from 'prop-types';
import dis from '../../../dispatcher/dispatcher';
import {wantsDateSeparator} from '../../../DateUtils';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
import SettingsStore from "../../../settings/SettingsStore";
import {LayoutPropType} from "../../../settings/Layout";
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index 4e41db0ae7..a9eb04d4ec 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -73,7 +73,7 @@ const SSOButton: React.FC
+ { shownMembers.map(member => {
+ return
+ ;
+ }) }
+
+ { onlyKnownUsers &&
+ { _t("%(count)s people you know have already joined", { count: members.length }) }
+ }
+
{ keyRequestInfoContent }
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index ccf097c4fd..b7078766fb 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -33,6 +33,7 @@ import WidgetStore from "../../../stores/WidgetStore";
import {UPDATE_EVENT} from "../../../stores/AsyncStore";
import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
function ComposerAvatar(props) {
const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -187,6 +188,7 @@ export default class MessageComposer extends React.Component {
hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room),
joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room),
isComposerEmpty: true,
+ haveRecording: false,
};
}
@@ -325,6 +327,10 @@ export default class MessageComposer extends React.Component {
});
}
+ onVoiceUpdate = (haveRecording: boolean) => {
+ this.setState({haveRecording});
+ };
+
render() {
const controls = [
this.state.me ? {
const cli = useContext(MatrixClientContext);
@@ -100,17 +102,48 @@ const NewRoomIntro = () => {
});
}
- let buttons;
- if (room.canInvite(cli.getUserId())) {
- const onInviteClick = () => {
- dis.dispatch({ action: "view_invite", roomId });
- };
+ let parentSpace;
+ if (
+ SpaceStore.instance.activeSpace?.canInvite(cli.getUserId()) &&
+ SpaceStore.instance.getSpaceFilteredRoomIds(SpaceStore.instance.activeSpace).has(room.roomId)
+ ) {
+ parentSpace = SpaceStore.instance.activeSpace;
+ }
+ let buttons;
+ if (parentSpace) {
buttons =
;
}
const avatarUrl = room.currentState.getStateEvents(EventType.RoomAvatar, "")?.getContent()?.url;
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index 4378154d8f..963e94ebbb 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -20,6 +20,7 @@ import React, { ReactComponentElement } from "react";
import { Dispatcher } from "flux";
import { Room } from "matrix-js-sdk/src/models/room";
import * as fbEmitter from "fbemitter";
+import { EventType } from "matrix-js-sdk/src/@types/event";
import { _t, _td } from "../../../languageHandler";
import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
@@ -48,9 +49,8 @@ import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../con
import AccessibleButton from "../elements/AccessibleButton";
import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
import CallHandler from "../../../CallHandler";
-import SpaceStore, { SUGGESTED_ROOMS } from "../../../stores/SpaceStore";
-import { showAddExistingRooms, showCreateNewRoom } from "../../../utils/space";
-import { EventType } from "matrix-js-sdk/src/@types/event";
+import SpaceStore, {SUGGESTED_ROOMS} from "../../../stores/SpaceStore";
+import {showAddExistingRooms, showCreateNewRoom, showSpaceInvite} from "../../../utils/space";
import {replaceableComponent} from "../../../utils/replaceableComponent";
import RoomAvatar from "../avatars/RoomAvatar";
import { ISpaceSummaryRoom } from "../../structures/SpaceRoomDirectory";
@@ -62,6 +62,7 @@ interface IProps {
onResize: () => void;
resizeNotifier: ResizeNotifier;
isMinimized: boolean;
+ activeSpace: Room;
}
interface IState {
@@ -194,8 +195,8 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
: _t("You do not have permissions to add rooms to this space")}
/>
-
+ {
+ showSpaceInvite(parentSpace);
+ }}
+ >
+ {_t("Invite to %(spaceName)s", { spaceName: parentSpace.name })}
+
+ { room.canInvite(cli.getUserId()) && {
+ dis.dispatch({ action: "view_invite", roomId });
+ }}
+ >
+ {_t("Invite to just this room")}
+ }
+
;
+ } else if (room.canInvite(cli.getUserId())) {
+ buttons =
+ {
+ dis.dispatch({ action: "view_invite", roomId });
+ }}
+ >
{_t("Invite to this room")}
-
+
+
+ {_t("Invite people")}
+ }
+
+ {_t("Explore rooms")}
;
} else if (Object.values(this.state.sublists).some(list => list.length > 0)) {
diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
index eb821809d9..74052e8ba1 100644
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@@ -51,6 +51,7 @@ import { objectExcluding, objectHasDiff } from "../../../utils/objects";
import ExtraTile from "./ExtraTile";
import { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
import IconizedContextMenu from "../context_menus/IconizedContextMenu";
+import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
import {replaceableComponent} from "../../../utils/replaceableComponent";
const SHOW_N_BUTTON_HEIGHT = 28; // As defined by CSS
@@ -470,18 +471,19 @@ export default class RoomSublist extends React.Component{ _t("Quick actions") }
+ { this.props.activeSpace.canInvite(MatrixClientPeg.get().getUserId()) &&
+
;
+ }
+
+ public render() {
+ const classes = classNames({
+ 'mx_MessageComposer_button': !this.state.recorder,
+ 'mx_MessageComposer_voiceMessage': !this.state.recorder,
+ 'mx_VoiceRecordComposerTile_stop': !!this.state.recorder,
+ });
+
+ let tooltip = _t("Record a voice message");
+ if (!!this.state.recorder) {
+ // TODO: @@ TravisR: Change to match behaviour
+ tooltip = _t("Stop & send recording");
+ }
+
+ return (<>
+ {this.renderWaveformArea()}
+
{
@@ -208,6 +223,31 @@ export default class EventIndexPanel extends React.Component {
}
);
+ } else {
+ eventIndexingSettings = (
+
+
+ );
}
return eventIndexingSettings;
diff --git a/src/components/views/settings/discovery/EmailAddresses.js b/src/components/views/settings/discovery/EmailAddresses.js
index 0493597537..b8d91aae2a 100644
--- a/src/components/views/settings/discovery/EmailAddresses.js
+++ b/src/components/views/settings/discovery/EmailAddresses.js
@@ -203,6 +203,7 @@ export class EmailAddress extends React.Component {
className="mx_ExistingEmailAddress_confirmBtn"
kind="primary_sm"
onClick={this.onContinueClick}
+ disabled={this.state.continueDisabled}
>
{_t("Complete")}
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
index 314acf5d65..b1ad9f3d23 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@@ -32,7 +32,7 @@ import * as sdk from "../../../../..";
import Modal from "../../../../../Modal";
import dis from "../../../../../dispatcher/dispatcher";
import {Service, startTermsFlow} from "../../../../../Terms";
-import {SERVICE_TYPES} from "matrix-js-sdk";
+import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
import IdentityAuthClient from "../../../../../IdentityAuthClient";
import {abbreviateUrl} from "../../../../../utils/UrlUtils";
import { getThreepidsWithBindStatus } from '../../../../../boundThreepids';
@@ -206,10 +206,10 @@ export default class GeneralUserSettingsTab extends React.Component {
_onPasswordChangeError = (err) => {
// TODO: Figure out a design that doesn't involve replacing the current dialog
- let errMsg = err.error || "";
+ let errMsg = err.error || err.message || "";
if (err.httpStatus === 403) {
errMsg = _t("Failed to change password. Is your password correct?");
- } else if (err.httpStatus) {
+ } else if (!errMsg) {
errMsg += ` (HTTP status ${err.httpStatus})`;
}
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
index 238f875e22..0cd3dd6698 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
@@ -74,6 +74,8 @@ export default class PreferencesUserSettingsTab extends React.Component {
this.state = {
autoLaunch: false,
autoLaunchSupported: false,
+ warnBeforeExit: true,
+ warnBeforeExitSupported: false,
alwaysShowMenuBar: true,
alwaysShowMenuBarSupported: false,
minimizeToTray: true,
@@ -96,6 +98,12 @@ export default class PreferencesUserSettingsTab extends React.Component {
autoLaunch = await platform.getAutoLaunchEnabled();
}
+ const warnBeforeExitSupported = await platform.supportsWarnBeforeExit();
+ let warnBeforeExit = false;
+ if (warnBeforeExitSupported) {
+ warnBeforeExit = await platform.shouldWarnBeforeExit();
+ }
+
const alwaysShowMenuBarSupported = await platform.supportsAutoHideMenuBar();
let alwaysShowMenuBar = true;
if (alwaysShowMenuBarSupported) {
@@ -111,6 +119,8 @@ export default class PreferencesUserSettingsTab extends React.Component {
this.setState({
autoLaunch,
autoLaunchSupported,
+ warnBeforeExit,
+ warnBeforeExitSupported,
alwaysShowMenuBarSupported,
alwaysShowMenuBar,
minimizeToTraySupported,
@@ -122,6 +132,10 @@ export default class PreferencesUserSettingsTab extends React.Component {
PlatformPeg.get().setAutoLaunchEnabled(checked).then(() => this.setState({autoLaunch: checked}));
};
+ _onWarnBeforeExitChange = (checked) => {
+ PlatformPeg.get().setWarnBeforeExit(checked).then(() => this.setState({warnBeforeExit: checked}));
+ }
+
_onAlwaysShowMenuBarChange = (checked) => {
PlatformPeg.get().setAutoHideMenuBarEnabled(!checked).then(() => this.setState({alwaysShowMenuBar: checked}));
};
@@ -161,6 +175,14 @@ export default class PreferencesUserSettingsTab extends React.Component {
label={_t('Start automatically after system login')} />;
}
+ let warnBeforeExitOption = null;
+ if (this.state.warnBeforeExitSupported) {
+ warnBeforeExitOption =
+ {this.state.enabling
+ ?
+
+ )}
+
+ {_t("Advanced")}
+
+ {EventIndexPeg.error.message}
+
+
+
{ _t("Create a space") }
{ _t("Spaces are new ways to group rooms and people. " + - "To join an existing space you’ll need an invite") }
+ "To join an existing space you'll need an invite.") }{ - _t("Give it a photo, name and description to help you identify it.") + _t("Add some details to help people recognise it.") } { - _t("You can change these at any point.") + _t("You can change these anytime.") }