2016-11-03 21:42:26 +03:00
|
|
|
/*
|
2021-08-24 05:39:46 +03:00
|
|
|
Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
|
2016-11-03 21:42:26 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
2020-04-13 16:29:00 +03:00
|
|
|
import * as React from 'react';
|
|
|
|
import { MatrixClient } from 'matrix-js-sdk/src/client';
|
2021-07-20 00:43:11 +03:00
|
|
|
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2021-06-29 15:11:58 +03:00
|
|
|
import { Key } from '../../Keyboard';
|
2016-11-03 21:42:26 +03:00
|
|
|
import PageTypes from '../../PageTypes';
|
2021-06-23 10:26:33 +03:00
|
|
|
import MediaDeviceHandler from '../../MediaDeviceHandler';
|
2020-04-16 12:25:18 +03:00
|
|
|
import { fixupColorFonts } from '../../utils/FontManager';
|
2020-05-14 05:41:41 +03:00
|
|
|
import dis from '../../dispatcher/dispatcher';
|
2021-05-17 17:05:20 +03:00
|
|
|
import { IMatrixClientCreds } from '../../MatrixClientPeg';
|
2017-10-29 10:43:52 +03:00
|
|
|
import SettingsStore from "../../settings/SettingsStore";
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2018-09-24 18:07:42 +03:00
|
|
|
import ResizeHandle from '../views/elements/ResizeHandle';
|
2021-06-29 15:11:58 +03:00
|
|
|
import { Resizer, CollapseDistributor } from '../../resizer';
|
2019-12-17 20:26:12 +03:00
|
|
|
import MatrixClientContext from "../../contexts/MatrixClientContext";
|
2020-03-18 19:40:21 +03:00
|
|
|
import * as KeyboardShortcuts from "../../accessibility/KeyboardShortcuts";
|
2020-04-07 12:48:56 +03:00
|
|
|
import HomePage from "./HomePage";
|
2020-04-13 16:29:00 +03:00
|
|
|
import ResizeNotifier from "../../utils/ResizeNotifier";
|
2020-04-11 20:57:59 +03:00
|
|
|
import PlatformPeg from "../../PlatformPeg";
|
2020-03-20 23:38:20 +03:00
|
|
|
import { DefaultTagID } from "../../stores/room-list/models";
|
2020-05-23 00:27:19 +03:00
|
|
|
import {
|
|
|
|
showToast as showServerLimitToast,
|
2020-08-29 03:11:08 +03:00
|
|
|
hideToast as hideServerLimitToast,
|
2020-05-23 00:27:19 +03:00
|
|
|
} from "../../toasts/ServerLimitToast";
|
2020-06-03 04:07:46 +03:00
|
|
|
import { Action } from "../../dispatcher/actions";
|
2020-07-18 00:22:18 +03:00
|
|
|
import LeftPanel from "./LeftPanel";
|
2020-07-07 00:42:46 +03:00
|
|
|
import CallContainer from '../views/voip/CallContainer';
|
2020-07-06 19:57:40 +03:00
|
|
|
import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
|
2020-07-18 00:11:34 +03:00
|
|
|
import RoomListStore from "../../stores/room-list/RoomListStore";
|
2020-07-29 21:43:35 +03:00
|
|
|
import NonUrgentToastContainer from "./NonUrgentToastContainer";
|
2020-07-18 14:08:20 +03:00
|
|
|
import { ToggleRightPanelPayload } from "../../dispatcher/payloads/ToggleRightPanelPayload";
|
2021-07-01 21:54:05 +03:00
|
|
|
import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore";
|
2020-10-13 19:26:48 +03:00
|
|
|
import Modal from "../../Modal";
|
2020-10-20 13:03:03 +03:00
|
|
|
import { ICollapseConfig } from "../../resizer/distributors/collapse";
|
2021-01-14 12:53:20 +03:00
|
|
|
import HostSignupContainer from '../views/host_signup/HostSignupContainer';
|
2021-03-01 11:43:00 +03:00
|
|
|
import { getKeyBindingsManager, NavigationAction, RoomAction } from '../../KeyBindingsManager';
|
2021-03-01 20:54:53 +03:00
|
|
|
import { IOpts } from "../../createRoom";
|
2021-03-16 13:53:27 +03:00
|
|
|
import SpacePanel from "../views/spaces/SpacePanel";
|
2021-06-29 15:11:58 +03:00
|
|
|
import { replaceableComponent } from "../../utils/replaceableComponent";
|
2021-08-17 10:51:48 +03:00
|
|
|
import CallHandler from '../../CallHandler';
|
2021-04-27 12:59:08 +03:00
|
|
|
import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
|
|
|
|
import AudioFeedArrayForCall from '../views/voip/AudioFeedArrayForCall';
|
2021-06-24 19:51:11 +03:00
|
|
|
import { OwnProfileStore } from '../../stores/OwnProfileStore';
|
|
|
|
import { UPDATE_EVENT } from "../../stores/AsyncStore";
|
2021-07-03 12:51:23 +03:00
|
|
|
import RoomView from './RoomView';
|
|
|
|
import ToastContainer from './ToastContainer';
|
|
|
|
import MyGroups from "./MyGroups";
|
|
|
|
import UserView from "./UserView";
|
|
|
|
import GroupView from "./GroupView";
|
2021-07-12 14:51:46 +03:00
|
|
|
import BackdropPanel from "./BackdropPanel";
|
2021-07-15 10:26:49 +03:00
|
|
|
import SpaceStore from "../../stores/SpaceStore";
|
2021-08-17 19:56:19 +03:00
|
|
|
import classNames from 'classnames';
|
2021-08-23 17:57:24 +03:00
|
|
|
import GroupFilterPanel from './GroupFilterPanel';
|
|
|
|
import CustomRoomTagPanel from './CustomRoomTagPanel';
|
2021-08-24 05:39:46 +03:00
|
|
|
import { mediaFromMxc } from "../../customisations/Media";
|
2021-06-24 19:51:11 +03:00
|
|
|
|
2018-08-07 19:04:37 +03:00
|
|
|
// We need to fetch each pinned message individually (if we don't already have it)
|
|
|
|
// so each pinned message may trigger a request. Limit the number per room for sanity.
|
|
|
|
// NB. this is just for server notices rather than pinned messages in general.
|
|
|
|
const MAX_PINNED_NOTICES_PER_ROOM = 2;
|
|
|
|
|
2019-07-19 18:49:04 +03:00
|
|
|
function canElementReceiveInput(el) {
|
|
|
|
return el.tagName === "INPUT" ||
|
|
|
|
el.tagName === "TEXTAREA" ||
|
|
|
|
el.tagName === "SELECT" ||
|
|
|
|
!!el.getAttribute("contenteditable");
|
|
|
|
}
|
|
|
|
|
2020-04-13 16:29:00 +03:00
|
|
|
interface IProps {
|
|
|
|
matrixClient: MatrixClient;
|
2021-07-20 00:43:11 +03:00
|
|
|
// Called with the credentials of a registered user (if they were a ROU that
|
|
|
|
// transitioned to PWLU)
|
2020-05-26 00:59:15 +03:00
|
|
|
onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>;
|
2020-04-13 16:29:00 +03:00
|
|
|
hideToSRUsers: boolean;
|
|
|
|
resizeNotifier: ResizeNotifier;
|
2020-08-29 03:11:08 +03:00
|
|
|
// eslint-disable-next-line camelcase
|
2021-07-03 12:57:05 +03:00
|
|
|
page_type?: string;
|
|
|
|
autoJoin?: boolean;
|
2020-09-12 04:49:48 +03:00
|
|
|
threepidInvite?: IThreepidInvite;
|
2021-07-01 21:54:05 +03:00
|
|
|
roomOobData?: IOOBData;
|
2020-04-13 16:29:00 +03:00
|
|
|
currentRoomId: string;
|
|
|
|
collapseLhs: boolean;
|
|
|
|
config: {
|
|
|
|
piwik: {
|
|
|
|
policyUrl: string;
|
2021-07-02 01:23:03 +03:00
|
|
|
};
|
|
|
|
[key: string]: any;
|
2020-04-13 16:29:00 +03:00
|
|
|
};
|
|
|
|
currentUserId?: string;
|
|
|
|
currentGroupId?: string;
|
|
|
|
currentGroupIsNew?: boolean;
|
2020-11-02 20:24:47 +03:00
|
|
|
justRegistered?: boolean;
|
2021-03-01 20:54:53 +03:00
|
|
|
roomJustCreatedOpts?: IOpts;
|
2020-04-13 16:29:00 +03:00
|
|
|
}
|
2020-05-23 01:08:45 +03:00
|
|
|
|
2020-06-03 18:17:31 +03:00
|
|
|
interface IUsageLimit {
|
2021-03-05 18:01:48 +03:00
|
|
|
// "hs_disabled" is NOT a specced string, but is used in Synapse
|
|
|
|
// This is tracked over at https://github.com/matrix-org/synapse/issues/9237
|
2020-08-29 03:11:08 +03:00
|
|
|
// eslint-disable-next-line camelcase
|
2021-01-27 14:39:57 +03:00
|
|
|
limit_type: "monthly_active_user" | "hs_disabled" | string;
|
2020-08-29 03:11:08 +03:00
|
|
|
// eslint-disable-next-line camelcase
|
2020-06-03 18:17:31 +03:00
|
|
|
admin_contact?: string;
|
|
|
|
}
|
|
|
|
|
2020-04-13 16:29:00 +03:00
|
|
|
interface IState {
|
2020-06-03 18:17:31 +03:00
|
|
|
syncErrorData?: {
|
|
|
|
error: {
|
2021-03-05 18:01:48 +03:00
|
|
|
// This is not specced, but used in Synapse. See
|
|
|
|
// https://github.com/matrix-org/synapse/issues/9237#issuecomment-768238922
|
2020-06-03 18:17:31 +03:00
|
|
|
data: IUsageLimit;
|
|
|
|
errcode: string;
|
|
|
|
};
|
|
|
|
};
|
2021-02-23 15:51:47 +03:00
|
|
|
usageLimitDismissed: boolean;
|
2020-06-03 18:17:31 +03:00
|
|
|
usageLimitEventContent?: IUsageLimit;
|
2021-02-23 15:51:17 +03:00
|
|
|
usageLimitEventTs?: number;
|
2020-04-13 16:29:00 +03:00
|
|
|
useCompactLayout: boolean;
|
2021-04-27 12:59:08 +03:00
|
|
|
activeCalls: Array<MatrixCall>;
|
2021-08-23 20:26:57 +03:00
|
|
|
backgroundImage?: string;
|
2020-04-13 16:29:00 +03:00
|
|
|
}
|
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
/**
|
|
|
|
* This is what our MatrixChat shows when we are logged in. The precise view is
|
|
|
|
* determined by the page_type property.
|
|
|
|
*
|
|
|
|
* Currently it's very tightly coupled with MatrixChat. We should try to do
|
|
|
|
* something about that.
|
2016-11-03 21:54:30 +03:00
|
|
|
*
|
|
|
|
* Components mounted below us can access the matrix client via the react context.
|
2016-11-03 21:42:26 +03:00
|
|
|
*/
|
2021-03-09 05:35:10 +03:00
|
|
|
@replaceableComponent("structures.LoggedInView")
|
2020-06-25 16:14:02 +03:00
|
|
|
class LoggedInView extends React.Component<IProps, IState> {
|
2020-04-13 16:13:27 +03:00
|
|
|
static displayName = 'LoggedInView';
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2021-08-17 10:51:48 +03:00
|
|
|
private dispatcherRef: string;
|
2020-04-13 16:30:52 +03:00
|
|
|
protected readonly _matrixClient: MatrixClient;
|
|
|
|
protected readonly _roomView: React.RefObject<any>;
|
2021-08-24 14:05:46 +03:00
|
|
|
protected readonly _resizeContainer: React.RefObject<HTMLDivElement>;
|
|
|
|
protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
|
2021-01-15 14:42:30 +03:00
|
|
|
protected compactLayoutWatcherRef: string;
|
2021-08-20 16:55:52 +03:00
|
|
|
protected backgroundImageWatcherRef: string;
|
2020-04-13 16:30:52 +03:00
|
|
|
protected resizer: Resizer;
|
2020-04-13 16:29:00 +03:00
|
|
|
|
2020-04-13 16:13:27 +03:00
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
|
|
|
|
|
|
|
this.state = {
|
2020-04-13 16:29:00 +03:00
|
|
|
syncErrorData: undefined,
|
2017-06-01 05:00:30 +03:00
|
|
|
// use compact timeline view
|
2017-10-29 10:43:52 +03:00
|
|
|
useCompactLayout: SettingsStore.getValue('useCompactLayout'),
|
2021-02-23 15:51:47 +03:00
|
|
|
usageLimitDismissed: false,
|
2021-08-17 10:48:25 +03:00
|
|
|
activeCalls: CallHandler.sharedInstance().getAllActiveCalls(),
|
2017-06-01 05:00:30 +03:00
|
|
|
};
|
2018-09-24 18:07:42 +03:00
|
|
|
|
2016-11-03 21:54:30 +03:00
|
|
|
// stash the MatrixClient in case we log out before we are unmounted
|
|
|
|
this._matrixClient = this.props.matrixClient;
|
|
|
|
|
2021-06-23 10:26:33 +03:00
|
|
|
MediaDeviceHandler.loadDevices();
|
2017-04-28 20:21:22 +03:00
|
|
|
|
2021-01-15 14:42:30 +03:00
|
|
|
fixupColorFonts();
|
|
|
|
|
|
|
|
this._roomView = React.createRef();
|
|
|
|
this._resizeContainer = React.createRef();
|
2021-08-24 14:05:46 +03:00
|
|
|
this.resizeHandler = React.createRef();
|
2021-01-15 14:42:30 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2021-07-20 00:43:11 +03:00
|
|
|
document.addEventListener('keydown', this.onNativeKeyDown, false);
|
2021-08-17 10:51:48 +03:00
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
2017-05-15 16:56:05 +03:00
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
this.updateServerNoticeEvents();
|
2018-08-07 19:04:37 +03:00
|
|
|
|
2017-06-01 05:00:30 +03:00
|
|
|
this._matrixClient.on("accountData", this.onAccountData);
|
2018-08-03 16:54:52 +03:00
|
|
|
this._matrixClient.on("sync", this.onSync);
|
2021-01-15 14:42:30 +03:00
|
|
|
// Call `onSync` with the current state as well
|
|
|
|
this.onSync(
|
|
|
|
this._matrixClient.getSyncState(),
|
|
|
|
null,
|
|
|
|
this._matrixClient.getSyncStateData(),
|
|
|
|
);
|
2018-08-07 19:04:37 +03:00
|
|
|
this._matrixClient.on("RoomState.events", this.onRoomStateEvents);
|
2019-05-22 04:31:24 +03:00
|
|
|
|
2021-01-15 14:42:30 +03:00
|
|
|
this.compactLayoutWatcherRef = SettingsStore.watchSetting(
|
2020-07-03 14:06:00 +03:00
|
|
|
"useCompactLayout", null, this.onCompactLayoutChanged,
|
|
|
|
);
|
2021-08-20 16:55:52 +03:00
|
|
|
this.backgroundImageWatcherRef = SettingsStore.watchSetting(
|
|
|
|
"RoomList.backgroundImage", null, this.refreshBackgroundImage,
|
|
|
|
);
|
2020-07-03 14:06:00 +03:00
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
this.resizer = this.createResizer();
|
2020-04-13 16:13:27 +03:00
|
|
|
this.resizer.attach();
|
2021-06-24 19:51:11 +03:00
|
|
|
|
|
|
|
OwnProfileStore.instance.on(UPDATE_EVENT, this.refreshBackgroundImage);
|
2021-07-20 00:43:11 +03:00
|
|
|
this.loadResizerPreferences();
|
2021-08-17 20:45:52 +03:00
|
|
|
this.refreshBackgroundImage();
|
2020-04-13 16:13:27 +03:00
|
|
|
}
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2020-04-13 16:13:27 +03:00
|
|
|
componentWillUnmount() {
|
2021-07-20 00:43:11 +03:00
|
|
|
document.removeEventListener('keydown', this.onNativeKeyDown, false);
|
2021-08-17 10:51:48 +03:00
|
|
|
dis.unregister(this.dispatcherRef);
|
2017-06-01 05:00:30 +03:00
|
|
|
this._matrixClient.removeListener("accountData", this.onAccountData);
|
2018-08-07 19:04:37 +03:00
|
|
|
this._matrixClient.removeListener("sync", this.onSync);
|
|
|
|
this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
|
2021-06-24 19:51:11 +03:00
|
|
|
OwnProfileStore.instance.off(UPDATE_EVENT, this.refreshBackgroundImage);
|
2021-01-15 14:42:30 +03:00
|
|
|
SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
|
2021-08-20 16:55:52 +03:00
|
|
|
SettingsStore.unwatchSetting(this.backgroundImageWatcherRef);
|
2018-10-16 19:43:40 +03:00
|
|
|
this.resizer.detach();
|
2020-04-13 16:13:27 +03:00
|
|
|
}
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2021-06-24 19:51:11 +03:00
|
|
|
private refreshBackgroundImage = async (): Promise<void> => {
|
2021-08-24 05:39:46 +03:00
|
|
|
let backgroundImage = SettingsStore.getValue("RoomList.backgroundImage");
|
|
|
|
if (backgroundImage) {
|
|
|
|
// convert to http before going much further
|
|
|
|
backgroundImage = mediaFromMxc(backgroundImage).srcHttp;
|
|
|
|
} else {
|
|
|
|
backgroundImage = OwnProfileStore.instance.getHttpAvatarUrl();
|
|
|
|
}
|
|
|
|
this.setState({ backgroundImage });
|
2021-07-06 11:19:25 +03:00
|
|
|
};
|
2021-06-24 19:51:11 +03:00
|
|
|
|
2021-08-17 10:51:48 +03:00
|
|
|
private onAction = (payload): void => {
|
|
|
|
switch (payload.action) {
|
|
|
|
case 'call_state': {
|
|
|
|
const activeCalls = CallHandler.sharedInstance().getAllActiveCalls();
|
|
|
|
if (activeCalls !== this.state.activeCalls) {
|
|
|
|
this.setState({ activeCalls });
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2021-04-27 12:59:08 +03:00
|
|
|
};
|
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
public canResetTimelineInRoom = (roomId: string) => {
|
2019-12-08 15:16:17 +03:00
|
|
|
if (!this._roomView.current) {
|
2017-03-22 18:06:52 +03:00
|
|
|
return true;
|
|
|
|
}
|
2019-12-08 15:16:17 +03:00
|
|
|
return this._roomView.current.canResetTimeline();
|
2020-04-13 16:13:27 +03:00
|
|
|
};
|
2017-03-22 18:06:52 +03:00
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
private createResizer() {
|
|
|
|
let panelSize;
|
|
|
|
let panelCollapsed;
|
2020-10-20 13:03:03 +03:00
|
|
|
const collapseConfig: ICollapseConfig = {
|
2021-03-16 14:11:44 +03:00
|
|
|
// TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
|
|
|
|
toggleSize: 206 - 50,
|
2021-07-20 00:43:11 +03:00
|
|
|
onCollapsed: (collapsed) => {
|
|
|
|
panelCollapsed = collapsed;
|
|
|
|
if (collapsed) {
|
2021-06-29 15:11:58 +03:00
|
|
|
dis.dispatch({ action: "hide_left_panel" });
|
2018-11-26 18:45:55 +03:00
|
|
|
window.localStorage.setItem("mx_lhs_size", '0');
|
2019-01-31 12:15:27 +03:00
|
|
|
} else {
|
2021-06-29 15:11:58 +03:00
|
|
|
dis.dispatch({ action: "show_left_panel" });
|
2018-10-16 19:43:40 +03:00
|
|
|
}
|
|
|
|
},
|
2021-07-20 00:43:11 +03:00
|
|
|
onResized: (size) => {
|
|
|
|
panelSize = size;
|
2019-03-12 18:36:12 +03:00
|
|
|
this.props.resizeNotifier.notifyLeftHandleResized();
|
2018-10-16 19:43:40 +03:00
|
|
|
},
|
2020-09-02 14:00:35 +03:00
|
|
|
onResizeStart: () => {
|
|
|
|
this.props.resizeNotifier.startResizing();
|
|
|
|
},
|
|
|
|
onResizeStop: () => {
|
2021-07-20 00:43:11 +03:00
|
|
|
if (!panelCollapsed) window.localStorage.setItem("mx_lhs_size", '' + panelSize);
|
2020-09-02 14:00:35 +03:00
|
|
|
this.props.resizeNotifier.stopResizing();
|
|
|
|
},
|
2021-03-02 17:02:03 +03:00
|
|
|
isItemCollapsed: domNode => {
|
|
|
|
return domNode.classList.contains("mx_LeftPanel_minimized");
|
|
|
|
},
|
2021-08-24 14:05:46 +03:00
|
|
|
handler: this.resizeHandler.current,
|
2018-10-16 19:43:40 +03:00
|
|
|
};
|
2020-10-13 12:30:52 +03:00
|
|
|
const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
|
2020-10-20 13:03:03 +03:00
|
|
|
resizer.setClassNames({
|
|
|
|
handle: "mx_ResizeHandle",
|
|
|
|
vertical: "mx_ResizeHandle_vertical",
|
|
|
|
reverse: "mx_ResizeHandle_reverse",
|
|
|
|
});
|
2018-10-16 19:43:40 +03:00
|
|
|
return resizer;
|
2020-04-13 16:13:27 +03:00
|
|
|
}
|
2018-10-16 19:43:40 +03:00
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
private loadResizerPreferences() {
|
2020-04-13 16:29:00 +03:00
|
|
|
let lhsSize = parseInt(window.localStorage.getItem("mx_lhs_size"), 10);
|
|
|
|
if (isNaN(lhsSize)) {
|
2019-01-22 18:40:11 +03:00
|
|
|
lhsSize = 350;
|
2018-10-16 19:43:40 +03:00
|
|
|
}
|
2021-08-23 17:18:40 +03:00
|
|
|
this.resizer.forHandleWithId('lp-resizer').resize(lhsSize);
|
2020-04-13 16:13:27 +03:00
|
|
|
}
|
2018-10-16 19:43:40 +03:00
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
private onAccountData = (event: MatrixEvent) => {
|
2017-09-15 05:16:56 +03:00
|
|
|
if (event.getType() === "m.ignored_user_list") {
|
2021-06-29 15:11:58 +03:00
|
|
|
dis.dispatch({ action: "ignore_state_changed" });
|
2017-09-15 05:16:56 +03:00
|
|
|
}
|
2020-04-13 16:13:27 +03:00
|
|
|
};
|
2017-06-01 05:00:30 +03:00
|
|
|
|
2020-07-03 14:06:00 +03:00
|
|
|
onCompactLayoutChanged = (setting, roomId, level, valueAtLevel, newValue) => {
|
|
|
|
this.setState({
|
|
|
|
useCompactLayout: valueAtLevel,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-04-13 16:13:27 +03:00
|
|
|
onSync = (syncState, oldSyncState, data) => {
|
2019-01-21 22:32:57 +03:00
|
|
|
const oldErrCode = (
|
|
|
|
this.state.syncErrorData &&
|
|
|
|
this.state.syncErrorData.error &&
|
|
|
|
this.state.syncErrorData.error.errcode
|
|
|
|
);
|
2018-08-03 20:02:09 +03:00
|
|
|
const newErrCode = data && data.error && data.error.errcode;
|
|
|
|
if (syncState === oldSyncState && oldErrCode === newErrCode) return;
|
2018-08-03 16:54:52 +03:00
|
|
|
|
|
|
|
if (syncState === 'ERROR') {
|
|
|
|
this.setState({
|
|
|
|
syncErrorData: data,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.setState({
|
|
|
|
syncErrorData: null,
|
|
|
|
});
|
|
|
|
}
|
2018-08-07 19:04:37 +03:00
|
|
|
|
|
|
|
if (oldSyncState === 'PREPARED' && syncState === 'SYNCING') {
|
2021-07-20 00:43:11 +03:00
|
|
|
this.updateServerNoticeEvents();
|
2020-05-23 00:27:19 +03:00
|
|
|
} else {
|
2021-07-20 00:43:11 +03:00
|
|
|
this.calculateServerLimitToast(this.state.syncErrorData, this.state.usageLimitEventContent);
|
2018-08-07 19:04:37 +03:00
|
|
|
}
|
2020-04-13 16:13:27 +03:00
|
|
|
};
|
2018-08-03 16:54:52 +03:00
|
|
|
|
2020-04-13 16:13:27 +03:00
|
|
|
onRoomStateEvents = (ev, state) => {
|
2020-07-17 23:25:09 +03:00
|
|
|
const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
|
|
|
|
if (serverNoticeList && serverNoticeList.some(r => r.roomId === ev.getRoomId())) {
|
2021-07-20 00:43:11 +03:00
|
|
|
this.updateServerNoticeEvents();
|
2018-08-07 19:04:37 +03:00
|
|
|
}
|
2020-04-13 16:13:27 +03:00
|
|
|
};
|
2018-08-07 19:04:37 +03:00
|
|
|
|
2021-02-24 20:32:00 +03:00
|
|
|
private onUsageLimitDismissed = () => {
|
2021-02-23 15:51:47 +03:00
|
|
|
this.setState({
|
|
|
|
usageLimitDismissed: true,
|
|
|
|
});
|
2021-06-29 15:11:58 +03:00
|
|
|
};
|
2021-02-23 15:51:47 +03:00
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
private calculateServerLimitToast(syncError: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) {
|
2020-08-29 03:11:08 +03:00
|
|
|
const error = syncError && syncError.error && syncError.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED";
|
2020-05-23 00:27:19 +03:00
|
|
|
if (error) {
|
2020-08-29 03:11:08 +03:00
|
|
|
usageLimitEventContent = syncError.error.data;
|
2020-05-23 00:27:19 +03:00
|
|
|
}
|
|
|
|
|
2021-02-23 15:51:47 +03:00
|
|
|
// usageLimitDismissed is true when the user has explicitly hidden the toast
|
|
|
|
// and it will be reset to false if a *new* usage alert comes in.
|
|
|
|
if (usageLimitEventContent && this.state.usageLimitDismissed) {
|
|
|
|
showServerLimitToast(
|
|
|
|
usageLimitEventContent.limit_type,
|
2021-02-24 20:32:00 +03:00
|
|
|
this.onUsageLimitDismissed,
|
2021-02-23 15:51:47 +03:00
|
|
|
usageLimitEventContent.admin_contact,
|
|
|
|
error,
|
|
|
|
);
|
2020-05-23 00:27:19 +03:00
|
|
|
} else {
|
|
|
|
hideServerLimitToast();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
private updateServerNoticeEvents = async () => {
|
2020-07-17 23:25:09 +03:00
|
|
|
const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
|
|
|
|
if (!serverNoticeList) return [];
|
2018-09-24 18:07:42 +03:00
|
|
|
|
2020-05-23 00:27:19 +03:00
|
|
|
const events = [];
|
2021-02-23 16:00:05 +03:00
|
|
|
let pinnedEventTs = 0;
|
2020-07-17 23:25:09 +03:00
|
|
|
for (const room of serverNoticeList) {
|
2018-08-07 19:04:37 +03:00
|
|
|
const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
|
|
|
|
|
|
|
|
if (!pinStateEvent || !pinStateEvent.getContent().pinned) continue;
|
2021-02-23 16:00:05 +03:00
|
|
|
pinnedEventTs = pinStateEvent.getTs();
|
2018-09-24 18:07:42 +03:00
|
|
|
|
2018-08-07 19:04:37 +03:00
|
|
|
const pinnedEventIds = pinStateEvent.getContent().pinned.slice(0, MAX_PINNED_NOTICES_PER_ROOM);
|
|
|
|
for (const eventId of pinnedEventIds) {
|
2021-06-02 07:21:04 +03:00
|
|
|
const timeline = await this._matrixClient.getEventTimeline(room.getUnfilteredTimelineSet(), eventId);
|
2020-04-13 16:33:45 +03:00
|
|
|
const event = timeline.getEvents().find(ev => ev.getId() === eventId);
|
2020-05-23 00:27:19 +03:00
|
|
|
if (event) events.push(event);
|
2018-08-07 19:04:37 +03:00
|
|
|
}
|
|
|
|
}
|
2020-05-23 00:27:19 +03:00
|
|
|
|
2021-02-23 16:00:05 +03:00
|
|
|
if (pinnedEventTs && this.state.usageLimitEventTs > pinnedEventTs) {
|
|
|
|
// We've processed a newer event than this one, so ignore it.
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-05-23 00:27:19 +03:00
|
|
|
const usageLimitEvent = events.find((e) => {
|
|
|
|
return (
|
|
|
|
e && e.getType() === 'm.room.message' &&
|
|
|
|
e.getContent()['server_notice_type'] === 'm.server_notice.usage_limit_reached'
|
|
|
|
);
|
2018-08-07 19:04:37 +03:00
|
|
|
});
|
2020-06-03 18:17:31 +03:00
|
|
|
const usageLimitEventContent = usageLimitEvent && usageLimitEvent.getContent();
|
2021-07-20 00:43:11 +03:00
|
|
|
this.calculateServerLimitToast(this.state.syncErrorData, usageLimitEventContent);
|
2021-02-23 15:51:17 +03:00
|
|
|
this.setState({
|
|
|
|
usageLimitEventContent,
|
2021-02-23 16:00:05 +03:00
|
|
|
usageLimitEventTs: pinnedEventTs,
|
2021-02-23 15:51:17 +03:00
|
|
|
// This is a fresh toast, we can show toasts again
|
|
|
|
usageLimitDismissed: false,
|
|
|
|
});
|
2020-04-13 16:13:27 +03:00
|
|
|
};
|
2018-09-24 18:07:42 +03:00
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
private onPaste = (ev) => {
|
2019-07-19 18:49:04 +03:00
|
|
|
let canReceiveInput = false;
|
|
|
|
let element = ev.target;
|
|
|
|
// test for all parents because the target can be a child of a contenteditable element
|
|
|
|
while (!canReceiveInput && element) {
|
|
|
|
canReceiveInput = canElementReceiveInput(element);
|
|
|
|
element = element.parentElement;
|
|
|
|
}
|
|
|
|
if (!canReceiveInput) {
|
2019-07-23 10:44:17 +03:00
|
|
|
// refocusing during a paste event will make the
|
|
|
|
// paste end up in the newly focused element,
|
|
|
|
// so dispatch synchronously before paste happens
|
2021-07-08 18:36:31 +03:00
|
|
|
dis.fire(Action.FocusSendMessageComposer, true);
|
2019-07-19 18:49:04 +03:00
|
|
|
}
|
2020-04-13 16:13:27 +03:00
|
|
|
};
|
2019-07-19 18:49:04 +03:00
|
|
|
|
2019-07-17 17:50:05 +03:00
|
|
|
/*
|
|
|
|
SOME HACKERY BELOW:
|
|
|
|
React optimizes event handlers, by always attaching only 1 handler to the document for a given type.
|
|
|
|
It then internally determines the order in which React event handlers should be called,
|
|
|
|
emulating the capture and bubbling phases the DOM also has.
|
|
|
|
|
|
|
|
But, as the native handler for React is always attached on the document,
|
|
|
|
it will always run last for bubbling (first for capturing) handlers,
|
|
|
|
and thus React basically has its own event phases, and will always run
|
|
|
|
after (before for capturing) any native other event handlers (as they tend to be attached last).
|
|
|
|
|
|
|
|
So ideally one wouldn't mix React and native event handlers to have bubbling working as expected,
|
|
|
|
but we do need a native event handler here on the document,
|
|
|
|
to get keydown events when there is no focused element (target=body).
|
|
|
|
|
|
|
|
We also do need bubbling here to give child components a chance to call `stopPropagation()`,
|
|
|
|
for keydown events it can handle itself, and shouldn't be redirected to the composer.
|
|
|
|
|
|
|
|
So we listen with React on this component to get any events on focused elements, and get bubbling working as expected.
|
|
|
|
We also listen with a native listener on the document to get keydown events when no element is focused.
|
|
|
|
Bubbling is irrelevant here as the target is the body element.
|
|
|
|
*/
|
2021-07-20 00:43:11 +03:00
|
|
|
private onReactKeyDown = (ev) => {
|
2019-07-17 17:50:05 +03:00
|
|
|
// events caught while bubbling up on the root element
|
|
|
|
// of this component, so something must be focused.
|
2021-07-20 00:43:11 +03:00
|
|
|
this.onKeyDown(ev);
|
2020-04-13 16:13:27 +03:00
|
|
|
};
|
2019-07-17 17:50:05 +03:00
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
private onNativeKeyDown = (ev) => {
|
2019-07-17 17:50:05 +03:00
|
|
|
// only pass this if there is no focused element.
|
2021-07-20 00:43:11 +03:00
|
|
|
// if there is, onKeyDown will be called by the
|
2019-07-17 17:50:05 +03:00
|
|
|
// react keydown handler that respects the react bubbling order.
|
|
|
|
if (ev.target === document.body) {
|
2021-07-20 00:43:11 +03:00
|
|
|
this.onKeyDown(ev);
|
2019-07-17 17:50:05 +03:00
|
|
|
}
|
2020-04-13 16:13:27 +03:00
|
|
|
};
|
2018-08-07 19:04:37 +03:00
|
|
|
|
2021-07-20 00:43:11 +03:00
|
|
|
private onKeyDown = (ev) => {
|
2017-07-12 19:12:57 +03:00
|
|
|
let handled = false;
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2021-03-01 11:43:00 +03:00
|
|
|
const roomAction = getKeyBindingsManager().getRoomAction(ev);
|
2021-02-28 10:13:34 +03:00
|
|
|
switch (roomAction) {
|
2021-03-01 11:43:00 +03:00
|
|
|
case RoomAction.ScrollUp:
|
|
|
|
case RoomAction.RoomScrollDown:
|
|
|
|
case RoomAction.JumpToFirstMessage:
|
|
|
|
case RoomAction.JumpToLatestMessage:
|
2021-03-28 12:26:05 +03:00
|
|
|
// pass the event down to the scroll panel
|
2021-07-20 00:43:11 +03:00
|
|
|
this.onScrollKeyPressed(ev);
|
2021-02-28 10:13:34 +03:00
|
|
|
handled = true;
|
2016-11-03 21:42:26 +03:00
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case RoomAction.FocusSearch:
|
2021-02-28 10:13:34 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'focus_search',
|
|
|
|
});
|
|
|
|
handled = true;
|
2019-05-18 00:28:12 +03:00
|
|
|
break;
|
2021-02-28 10:13:34 +03:00
|
|
|
}
|
|
|
|
if (handled) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
return;
|
|
|
|
}
|
2020-03-18 19:40:21 +03:00
|
|
|
|
2021-03-01 11:43:00 +03:00
|
|
|
const navAction = getKeyBindingsManager().getNavigationAction(ev);
|
2021-02-28 10:13:34 +03:00
|
|
|
switch (navAction) {
|
2021-03-12 09:40:28 +03:00
|
|
|
case NavigationAction.FocusRoomSearch:
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'focus_room_filter',
|
|
|
|
});
|
|
|
|
handled = true;
|
2020-03-18 19:40:21 +03:00
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case NavigationAction.ToggleUserMenu:
|
2021-02-28 10:13:34 +03:00
|
|
|
dis.fire(Action.ToggleUserMenu);
|
|
|
|
handled = true;
|
2020-09-27 00:21:16 +03:00
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case NavigationAction.ToggleShortCutDialog:
|
2021-02-28 10:13:34 +03:00
|
|
|
KeyboardShortcuts.toggleDialog();
|
|
|
|
handled = true;
|
2020-03-19 22:07:33 +03:00
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case NavigationAction.GoToHome:
|
2021-02-28 10:13:34 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_home_page',
|
|
|
|
});
|
|
|
|
Modal.closeCurrentModal("homeKeyboardShortcut");
|
|
|
|
handled = true;
|
2020-03-19 22:07:33 +03:00
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case NavigationAction.ToggleRoomSidePanel:
|
2021-02-28 10:13:34 +03:00
|
|
|
if (this.props.page_type === "room_view" || this.props.page_type === "group_view") {
|
2020-07-18 14:08:20 +03:00
|
|
|
dis.dispatch<ToggleRightPanelPayload>({
|
|
|
|
action: Action.ToggleRightPanel,
|
2020-03-20 03:18:24 +03:00
|
|
|
type: this.props.page_type === "room_view" ? "room" : "group",
|
|
|
|
});
|
|
|
|
handled = true;
|
|
|
|
}
|
2020-04-11 20:57:59 +03:00
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case NavigationAction.SelectPrevRoom:
|
2021-02-28 10:13:34 +03:00
|
|
|
dis.dispatch<ViewRoomDeltaPayload>({
|
|
|
|
action: Action.ViewRoomDelta,
|
|
|
|
delta: -1,
|
|
|
|
unread: false,
|
|
|
|
});
|
|
|
|
handled = true;
|
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case NavigationAction.SelectNextRoom:
|
2021-02-28 10:13:34 +03:00
|
|
|
dis.dispatch<ViewRoomDeltaPayload>({
|
|
|
|
action: Action.ViewRoomDelta,
|
|
|
|
delta: 1,
|
|
|
|
unread: false,
|
|
|
|
});
|
|
|
|
handled = true;
|
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case NavigationAction.SelectPrevUnreadRoom:
|
2021-02-28 10:13:34 +03:00
|
|
|
dis.dispatch<ViewRoomDeltaPayload>({
|
|
|
|
action: Action.ViewRoomDelta,
|
|
|
|
delta: -1,
|
|
|
|
unread: true,
|
|
|
|
});
|
|
|
|
break;
|
2021-03-01 11:43:00 +03:00
|
|
|
case NavigationAction.SelectNextUnreadRoom:
|
2021-02-28 10:13:34 +03:00
|
|
|
dis.dispatch<ViewRoomDeltaPayload>({
|
|
|
|
action: Action.ViewRoomDelta,
|
|
|
|
delta: 1,
|
|
|
|
unread: true,
|
|
|
|
});
|
|
|
|
break;
|
2020-04-11 20:57:59 +03:00
|
|
|
default:
|
|
|
|
// if we do not have a handler for it, pass it to the platform which might
|
|
|
|
handled = PlatformPeg.get().onKeyDown(ev);
|
2016-11-03 21:42:26 +03:00
|
|
|
}
|
|
|
|
if (handled) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
2021-02-28 10:13:34 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const isModifier = ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
|
2021-05-11 12:59:22 +03:00
|
|
|
if (!isModifier && !ev.ctrlKey && !ev.metaKey) {
|
2020-03-14 01:21:34 +03:00
|
|
|
// The above condition is crafted to _allow_ characters with Shift
|
|
|
|
// already pressed (but not the Shift key down itself).
|
2019-07-17 17:53:12 +03:00
|
|
|
const isClickShortcut = ev.target !== document.body &&
|
2019-10-04 13:47:33 +03:00
|
|
|
(ev.key === Key.SPACE || ev.key === Key.ENTER);
|
2019-07-17 17:53:12 +03:00
|
|
|
|
2021-02-18 13:25:25 +03:00
|
|
|
// We explicitly allow alt to be held due to it being a common accent modifier.
|
|
|
|
// XXX: Forwarding Dead keys in this way does not work as intended but better to at least
|
|
|
|
// move focus to the composer so the user can re-type the dead key correctly.
|
|
|
|
const isPrintable = ev.key.length === 1 || ev.key === "Dead";
|
2019-12-02 13:01:08 +03:00
|
|
|
|
2021-02-18 13:25:25 +03:00
|
|
|
// If the user is entering a printable character outside of an input field
|
|
|
|
// redirect it to the composer for them.
|
|
|
|
if (!isClickShortcut && isPrintable && !canElementReceiveInput(ev.target)) {
|
2019-07-23 10:44:17 +03:00
|
|
|
// synchronous dispatch so we focus before key generates input
|
2021-07-08 18:36:31 +03:00
|
|
|
dis.fire(Action.FocusSendMessageComposer, true);
|
2019-07-15 19:12:45 +03:00
|
|
|
ev.stopPropagation();
|
2021-02-18 13:25:25 +03:00
|
|
|
// we should *not* preventDefault() here as that would prevent typing in the now-focused composer
|
2019-07-15 19:12:45 +03:00
|
|
|
}
|
2016-11-03 21:42:26 +03:00
|
|
|
}
|
2020-04-13 16:13:27 +03:00
|
|
|
};
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2019-01-21 22:32:57 +03:00
|
|
|
/**
|
|
|
|
* dispatch a page-up/page-down/etc to the appropriate component
|
|
|
|
* @param {Object} ev The key event
|
|
|
|
*/
|
2021-07-20 00:43:11 +03:00
|
|
|
private onScrollKeyPressed = (ev) => {
|
2019-12-08 15:16:17 +03:00
|
|
|
if (this._roomView.current) {
|
|
|
|
this._roomView.current.handleScrollKey(ev);
|
2017-04-23 03:00:44 +03:00
|
|
|
}
|
2020-04-13 16:13:27 +03:00
|
|
|
};
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2020-04-13 16:13:27 +03:00
|
|
|
render() {
|
2019-01-21 22:32:57 +03:00
|
|
|
let pageElement;
|
2016-11-03 21:42:26 +03:00
|
|
|
|
|
|
|
switch (this.props.page_type) {
|
|
|
|
case PageTypes.RoomView:
|
2019-01-21 22:32:57 +03:00
|
|
|
pageElement = <RoomView
|
2020-08-29 03:11:08 +03:00
|
|
|
ref={this._roomView}
|
|
|
|
onRegistered={this.props.onRegistered}
|
2020-09-12 04:49:48 +03:00
|
|
|
threepidInvite={this.props.threepidInvite}
|
2020-08-29 03:11:08 +03:00
|
|
|
oobData={this.props.roomOobData}
|
|
|
|
key={this.props.currentRoomId || 'roomview'}
|
|
|
|
resizeNotifier={this.props.resizeNotifier}
|
2021-03-01 20:54:53 +03:00
|
|
|
justCreatedOpts={this.props.roomJustCreatedOpts}
|
2020-08-29 03:11:08 +03:00
|
|
|
/>;
|
2016-11-03 21:42:26 +03:00
|
|
|
break;
|
2019-01-17 12:29:37 +03:00
|
|
|
|
2017-06-28 15:56:18 +03:00
|
|
|
case PageTypes.MyGroups:
|
2019-01-21 22:32:57 +03:00
|
|
|
pageElement = <MyGroups />;
|
2017-06-28 15:56:18 +03:00
|
|
|
break;
|
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
case PageTypes.RoomDirectory:
|
2019-01-29 17:34:58 +03:00
|
|
|
// handled by MatrixChat for now
|
2016-11-03 21:42:26 +03:00
|
|
|
break;
|
2016-11-13 17:10:46 +03:00
|
|
|
|
|
|
|
case PageTypes.HomePage:
|
2020-11-02 20:24:47 +03:00
|
|
|
pageElement = <HomePage justRegistered={this.props.justRegistered} />;
|
2016-11-13 17:10:46 +03:00
|
|
|
break;
|
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
case PageTypes.UserView:
|
2020-09-02 14:00:35 +03:00
|
|
|
pageElement = <UserView userId={this.props.currentUserId} resizeNotifier={this.props.resizeNotifier} />;
|
2016-11-03 21:42:26 +03:00
|
|
|
break;
|
2017-06-05 18:51:50 +03:00
|
|
|
case PageTypes.GroupView:
|
2019-01-21 22:32:57 +03:00
|
|
|
pageElement = <GroupView
|
2017-06-05 18:51:50 +03:00
|
|
|
groupId={this.props.currentGroupId}
|
2017-11-06 21:02:50 +03:00
|
|
|
isNew={this.props.currentGroupIsNew}
|
2020-09-02 14:00:35 +03:00
|
|
|
resizeNotifier={this.props.resizeNotifier}
|
2017-06-27 12:05:05 +03:00
|
|
|
/>;
|
2017-06-05 18:51:50 +03:00
|
|
|
break;
|
2016-11-03 21:42:26 +03:00
|
|
|
}
|
|
|
|
|
2021-08-20 14:03:08 +03:00
|
|
|
const wrapperClasses = classNames({
|
|
|
|
'mx_MatrixChat_wrapper': true,
|
|
|
|
'mx_MatrixChat_useCompactLayout': this.state.useCompactLayout,
|
|
|
|
});
|
2021-08-17 19:56:19 +03:00
|
|
|
const bodyClasses = classNames({
|
|
|
|
'mx_MatrixChat': true,
|
|
|
|
'mx_MatrixChat--with-avatar': this.state.backgroundImage,
|
|
|
|
});
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2021-04-27 12:59:08 +03:00
|
|
|
const audioFeedArraysForCalls = this.state.activeCalls.map((call) => {
|
|
|
|
return (
|
|
|
|
<AudioFeedArrayForCall call={call} key={call.callId} />
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
return (
|
2019-12-17 20:26:12 +03:00
|
|
|
<MatrixClientContext.Provider value={this._matrixClient}>
|
|
|
|
<div
|
2021-07-20 00:43:11 +03:00
|
|
|
onPaste={this.onPaste}
|
|
|
|
onKeyDown={this.onReactKeyDown}
|
2021-08-20 14:03:08 +03:00
|
|
|
className={wrapperClasses}
|
2019-12-17 20:26:12 +03:00
|
|
|
aria-hidden={this.props.hideToSRUsers}
|
|
|
|
>
|
|
|
|
<ToastContainer />
|
2021-08-19 17:10:09 +03:00
|
|
|
<div className={bodyClasses}>
|
2021-08-23 17:20:21 +03:00
|
|
|
<div className='mx_LeftPanel_wrapper'>
|
2021-08-23 17:57:24 +03:00
|
|
|
{ SettingsStore.getValue('TagPanel.enableTagPanel') &&
|
|
|
|
(<div className="mx_GroupFilterPanelContainer">
|
2021-08-23 20:26:57 +03:00
|
|
|
<BackdropPanel
|
|
|
|
blurMultiplier={0.5}
|
|
|
|
backgroundImage={this.state.backgroundImage}
|
|
|
|
/>
|
2021-08-23 17:57:24 +03:00
|
|
|
<GroupFilterPanel />
|
|
|
|
{ SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
|
|
|
|
</div>)
|
|
|
|
}
|
2021-08-23 20:26:57 +03:00
|
|
|
{ SpaceStore.spacesEnabled ? <>
|
|
|
|
<BackdropPanel
|
|
|
|
blurMultiplier={0.5}
|
|
|
|
backgroundImage={this.state.backgroundImage}
|
|
|
|
/>
|
|
|
|
<SpacePanel />
|
|
|
|
</> : null }
|
2021-08-19 17:10:09 +03:00
|
|
|
<BackdropPanel
|
|
|
|
backgroundImage={this.state.backgroundImage}
|
|
|
|
/>
|
2021-08-23 17:20:21 +03:00
|
|
|
<div
|
2021-08-23 20:26:57 +03:00
|
|
|
className="mx_LeftPanel_wrapper--user"
|
2021-08-24 14:05:46 +03:00
|
|
|
ref={this._resizeContainer}
|
|
|
|
style={{
|
|
|
|
maxWidth: this.props.collapseLhs ? getComputedStyle(document.documentElement)
|
|
|
|
.getPropertyValue('--room-list-collapsed-width') : undefined,
|
|
|
|
}}
|
2021-08-23 20:26:57 +03:00
|
|
|
>
|
2021-08-23 17:20:21 +03:00
|
|
|
<LeftPanel
|
|
|
|
isMinimized={this.props.collapseLhs || false}
|
|
|
|
resizeNotifier={this.props.resizeNotifier}
|
|
|
|
/>
|
|
|
|
</div>
|
2021-08-19 17:10:09 +03:00
|
|
|
</div>
|
2021-08-24 14:05:46 +03:00
|
|
|
<ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />
|
2021-08-20 16:57:22 +03:00
|
|
|
<div className="mx_RoomView_wrapper">
|
|
|
|
{ pageElement }
|
|
|
|
</div>
|
2021-06-01 19:30:57 +03:00
|
|
|
</div>
|
2019-12-17 20:26:12 +03:00
|
|
|
</div>
|
2020-07-07 00:42:46 +03:00
|
|
|
<CallContainer />
|
2020-07-29 21:43:35 +03:00
|
|
|
<NonUrgentToastContainer />
|
2021-01-14 12:53:20 +03:00
|
|
|
<HostSignupContainer />
|
2021-07-20 00:43:11 +03:00
|
|
|
{ audioFeedArraysForCalls }
|
2019-12-17 20:26:12 +03:00
|
|
|
</MatrixClientContext.Provider>
|
2016-11-03 21:42:26 +03:00
|
|
|
);
|
2020-04-13 16:13:27 +03:00
|
|
|
}
|
|
|
|
}
|
2017-12-06 18:01:16 +03:00
|
|
|
|
2018-01-19 16:34:56 +03:00
|
|
|
export default LoggedInView;
|