2015-11-30 20:15:57 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2017-02-17 14:44:56 +03:00
|
|
|
Copyright 2017 Vector Creations Ltd
|
2019-01-09 19:27:41 +03:00
|
|
|
Copyright 2018, 2019 New Vector Ltd
|
2019-06-10 12:24:06 +03:00
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
2015-11-30 20:15:57 +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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
// TODO: This component is enormous! There's several things which could stand-alone:
|
|
|
|
// - Search results component
|
|
|
|
// - Drag and drop
|
|
|
|
|
2019-12-08 15:16:17 +03:00
|
|
|
import React, {createRef} from 'react';
|
2019-04-02 12:50:17 +03:00
|
|
|
import classNames from 'classnames';
|
2020-09-07 19:32:03 +03:00
|
|
|
import {Room} from "matrix-js-sdk/src/models/room";
|
|
|
|
import {MatrixEvent} from "matrix-js-sdk/src/models/event";
|
|
|
|
import {EventSubscription} from "fbemitter";
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
import shouldHideEvent from '../../shouldHideEvent';
|
|
|
|
import {_t} from '../../languageHandler';
|
|
|
|
import {RoomPermalinkCreator} from '../../utils/permalinks/Permalinks';
|
|
|
|
import ResizeNotifier from '../../utils/ResizeNotifier';
|
2019-04-01 18:42:41 +03:00
|
|
|
import ContentMessages from '../../ContentMessages';
|
2019-04-02 12:50:17 +03:00
|
|
|
import Modal from '../../Modal';
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as sdk from '../../index';
|
2019-04-02 12:50:17 +03:00
|
|
|
import CallHandler from '../../CallHandler';
|
2020-05-14 05:41:41 +03:00
|
|
|
import dis from '../../dispatcher/dispatcher';
|
2019-04-02 12:50:17 +03:00
|
|
|
import Tinter from '../../Tinter';
|
2020-09-08 13:05:33 +03:00
|
|
|
import rateLimitedFunc from '../../ratelimitedfunc';
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as ObjectUtils from '../../ObjectUtils';
|
2019-05-09 17:17:54 +03:00
|
|
|
import * as Rooms from '../../Rooms';
|
2020-05-29 12:44:08 +03:00
|
|
|
import eventSearch, {searchPagination} from '../../Searching';
|
2020-05-13 12:38:32 +03:00
|
|
|
import {isOnlyCtrlOrCmdIgnoreShiftKeyEvent, isOnlyCtrlOrCmdKeyEvent, Key} from '../../Keyboard';
|
2018-10-30 20:13:17 +03:00
|
|
|
import MainSplit from './MainSplit';
|
|
|
|
import RightPanel from './RightPanel';
|
2019-01-17 12:29:37 +03:00
|
|
|
import RoomViewStore from '../../stores/RoomViewStore';
|
2017-09-07 19:08:36 +03:00
|
|
|
import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
|
2018-07-03 13:16:44 +03:00
|
|
|
import WidgetEchoStore from '../../stores/WidgetEchoStore';
|
2020-07-28 20:53:43 +03:00
|
|
|
import SettingsStore from "../../settings/SettingsStore";
|
2019-03-27 22:14:31 +03:00
|
|
|
import AccessibleButton from "../views/elements/AccessibleButton";
|
2019-12-06 03:47:18 +03:00
|
|
|
import RightPanelStore from "../../stores/RightPanelStore";
|
2019-12-21 00:43:06 +03:00
|
|
|
import {haveTileForEvent} from "../views/rooms/EventTile";
|
2019-12-17 20:26:12 +03:00
|
|
|
import RoomContext from "../../contexts/RoomContext";
|
2020-03-22 12:41:14 +03:00
|
|
|
import MatrixClientContext from "../../contexts/MatrixClientContext";
|
2020-09-07 19:32:03 +03:00
|
|
|
import {E2EStatus, shieldStatusForRoom} from '../../utils/ShieldUtils';
|
2020-06-03 04:07:46 +03:00
|
|
|
import {Action} from "../../dispatcher/actions";
|
2020-07-28 20:53:43 +03:00
|
|
|
import {SettingLevel} from "../../settings/SettingLevel";
|
2020-09-08 12:19:51 +03:00
|
|
|
import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
|
2020-09-07 19:32:03 +03:00
|
|
|
import {IMatrixClientCreds} from "../../MatrixClientPeg";
|
|
|
|
import ScrollPanel from "./ScrollPanel";
|
|
|
|
import TimelinePanel from "./TimelinePanel";
|
|
|
|
import ErrorBoundary from "../views/elements/ErrorBoundary";
|
|
|
|
import RoomPreviewBar from "../views/rooms/RoomPreviewBar";
|
|
|
|
import ForwardMessage from "../views/rooms/ForwardMessage";
|
|
|
|
import SearchBar from "../views/rooms/SearchBar";
|
|
|
|
import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
|
|
|
|
import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel";
|
|
|
|
import AuxPanel from "../views/rooms/AuxPanel";
|
|
|
|
import RoomHeader from "../views/rooms/RoomHeader";
|
|
|
|
import TintableSvg from "../views/elements/TintableSvg";
|
2020-09-08 17:22:23 +03:00
|
|
|
import type * as ConferenceHandler from '../../VectorConferenceHandler';
|
|
|
|
import {XOR} from "../../@types/common";
|
2020-09-12 04:49:48 +03:00
|
|
|
import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
|
2017-05-24 18:56:13 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const DEBUG = false;
|
2020-09-07 19:32:03 +03:00
|
|
|
let debuglog = function(msg: string) {};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2017-07-12 12:21:43 +03:00
|
|
|
const BROWSER_SUPPORTS_SANDBOX = 'sandbox' in document.createElement('iframe');
|
|
|
|
|
2016-02-10 21:27:40 +03:00
|
|
|
if (DEBUG) {
|
2016-01-04 19:28:32 +03:00
|
|
|
// using bind means that we get to keep useful line numbers in the console
|
2017-06-27 19:39:29 +03:00
|
|
|
debuglog = console.log.bind(console);
|
2016-01-04 19:28:32 +03:00
|
|
|
}
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
interface IProps {
|
2020-09-08 17:22:23 +03:00
|
|
|
ConferenceHandler?: ConferenceHandler;
|
2020-09-07 19:32:03 +03:00
|
|
|
|
2020-09-12 04:49:48 +03:00
|
|
|
threepidInvite: IThreepidInvite,
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
// Any data about the room that would normally come from the homeserver
|
|
|
|
// but has been passed out-of-band, eg. the room name and avatar URL
|
|
|
|
// from an email invite (a workaround for the fact that we can't
|
|
|
|
// get this information from the HS using an email invite).
|
|
|
|
// Fields:
|
|
|
|
// * name (string) The room's name
|
|
|
|
// * avatarUrl (string) The mxc:// avatar URL for the room
|
|
|
|
// * inviterName (string) The display name of the person who
|
|
|
|
// * invited us to the room
|
2020-09-08 17:22:23 +03:00
|
|
|
oobData?: {
|
|
|
|
name?: string;
|
|
|
|
avatarUrl?: string;
|
|
|
|
inviterName?: string;
|
|
|
|
};
|
2020-09-07 19:32:03 +03:00
|
|
|
|
|
|
|
// Servers the RoomView can use to try and assist joins
|
|
|
|
viaServers?: string[];
|
|
|
|
|
|
|
|
autoJoin?: boolean;
|
|
|
|
disabled?: boolean;
|
|
|
|
resizeNotifier: ResizeNotifier;
|
|
|
|
|
|
|
|
// Called with the credentials of a registered user (if they were a ROU that transitioned to PWLU)
|
|
|
|
onRegistered?(credentials: IMatrixClientCreds): void;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface IState {
|
|
|
|
room?: Room;
|
|
|
|
roomId?: string;
|
|
|
|
roomAlias?: string;
|
|
|
|
roomLoading: boolean;
|
|
|
|
peekLoading: boolean;
|
|
|
|
shouldPeek: boolean;
|
|
|
|
// used to trigger a rerender in TimelinePanel once the members are loaded,
|
|
|
|
// so RR are rendered again (now with the members available), ...
|
|
|
|
membersLoaded: boolean;
|
|
|
|
// The event to be scrolled to initially
|
|
|
|
initialEventId?: string;
|
|
|
|
// The offset in pixels from the event with which to scroll vertically
|
|
|
|
initialEventPixelOffset?: number;
|
|
|
|
// Whether to highlight the event scrolled to
|
|
|
|
isInitialEventHighlighted?: boolean;
|
|
|
|
forwardingEvent?: MatrixEvent;
|
|
|
|
numUnreadMessages: number;
|
|
|
|
draggingFile: boolean;
|
|
|
|
searching: boolean;
|
|
|
|
searchTerm?: string;
|
|
|
|
searchScope?: "All" | "Room";
|
2020-09-08 17:22:23 +03:00
|
|
|
searchResults?: XOR<{}, {
|
|
|
|
count: number;
|
|
|
|
highlights: string[];
|
|
|
|
results: MatrixEvent[];
|
|
|
|
next_batch: string; // eslint-disable-line camelcase
|
|
|
|
}>;
|
2020-09-07 19:32:03 +03:00
|
|
|
searchHighlights?: string[];
|
|
|
|
searchInProgress?: boolean;
|
|
|
|
callState?: string;
|
|
|
|
guestsCanJoin: boolean;
|
|
|
|
canPeek: boolean;
|
|
|
|
showApps: boolean;
|
|
|
|
isAlone: boolean;
|
|
|
|
isPeeking: boolean;
|
|
|
|
showingPinned: boolean;
|
|
|
|
showReadReceipts: boolean;
|
|
|
|
showRightPanel: boolean;
|
|
|
|
// error object, as from the matrix client/server API
|
|
|
|
// If we failed to load information about the room,
|
|
|
|
// store the error here.
|
|
|
|
roomLoadError?: Error;
|
|
|
|
// Have we sent a request to join the room that we're waiting to complete?
|
|
|
|
joining: boolean;
|
|
|
|
// this is true if we are fully scrolled-down, and are looking at
|
|
|
|
// the end of the live timeline. It has the effect of hiding the
|
|
|
|
// 'scroll to bottom' knob, among a couple of other things.
|
|
|
|
atEndOfLiveTimeline: boolean;
|
|
|
|
// used by componentDidUpdate to avoid unnecessary checks
|
|
|
|
atEndOfLiveTimelineInit: boolean;
|
|
|
|
showTopUnreadMessagesBar: boolean;
|
|
|
|
auxPanelMaxHeight?: number;
|
|
|
|
statusBarVisible: boolean;
|
|
|
|
// We load this later by asking the js-sdk to suggest a version for us.
|
|
|
|
// This object is the result of Room#getRecommendedVersion()
|
2020-09-08 17:22:23 +03:00
|
|
|
upgradeRecommendation?: {
|
|
|
|
version: string;
|
|
|
|
needsUpgrade: boolean;
|
|
|
|
urgent: boolean;
|
|
|
|
};
|
2020-09-07 19:32:03 +03:00
|
|
|
canReact: boolean;
|
|
|
|
canReply: boolean;
|
|
|
|
useIRCLayout: boolean;
|
|
|
|
matrixClientIsReady: boolean;
|
|
|
|
showUrlPreview?: boolean;
|
|
|
|
e2eStatus?: E2EStatus;
|
|
|
|
displayConfCallNotification?: boolean;
|
|
|
|
rejecting?: boolean;
|
|
|
|
rejectError?: Error;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default class RoomView extends React.Component<IProps, IState> {
|
|
|
|
private readonly dispatcherRef: string;
|
|
|
|
private readonly roomStoreToken: EventSubscription;
|
|
|
|
private readonly rightPanelStoreToken: EventSubscription;
|
|
|
|
private readonly showReadReceiptsWatchRef: string;
|
|
|
|
private readonly layoutWatcherRef: string;
|
|
|
|
|
|
|
|
private unmounted = false;
|
|
|
|
private permalinkCreators: Record<string, RoomPermalinkCreator> = {};
|
|
|
|
private searchId: number;
|
|
|
|
|
|
|
|
private roomView = createRef<HTMLElement>();
|
|
|
|
private searchResultsPanel = createRef<ScrollPanel>();
|
|
|
|
private messagePanel: TimelinePanel;
|
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
static contextType = MatrixClientContext;
|
|
|
|
|
2020-08-29 14:51:37 +03:00
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
2020-03-22 12:41:14 +03:00
|
|
|
|
|
|
|
const llMembers = this.context.hasLazyLoadMembersEnabled();
|
2020-08-29 14:14:16 +03:00
|
|
|
this.state = {
|
2016-06-14 16:38:45 +03:00
|
|
|
roomId: null,
|
|
|
|
roomLoading: true,
|
2017-06-05 11:52:39 +03:00
|
|
|
peekLoading: false,
|
2017-06-16 20:24:07 +03:00
|
|
|
shouldPeek: true,
|
2018-09-17 20:27:25 +03:00
|
|
|
membersLoaded: !llMembers,
|
2015-11-30 20:15:57 +03:00
|
|
|
numUnreadMessages: 0,
|
|
|
|
draggingFile: false,
|
|
|
|
searching: false,
|
|
|
|
searchResults: null,
|
2015-12-15 02:37:34 +03:00
|
|
|
callState: null,
|
2016-01-13 16:22:58 +03:00
|
|
|
guestsCanJoin: false,
|
2016-01-18 20:39:23 +03:00
|
|
|
canPeek: false,
|
2017-05-17 23:15:57 +03:00
|
|
|
showApps: false,
|
2017-10-12 06:15:00 +03:00
|
|
|
isAlone: false,
|
2017-10-12 03:43:24 +03:00
|
|
|
isPeeking: false,
|
2018-05-27 04:32:23 +03:00
|
|
|
showingPinned: false,
|
2020-03-20 12:29:59 +03:00
|
|
|
showReadReceipts: true,
|
2020-03-20 03:18:24 +03:00
|
|
|
showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
|
2017-09-15 17:07:09 +03:00
|
|
|
joining: false,
|
2016-02-03 11:03:10 +03:00
|
|
|
atEndOfLiveTimeline: true,
|
2020-09-07 19:32:03 +03:00
|
|
|
atEndOfLiveTimelineInit: false,
|
2016-02-24 20:26:34 +03:00
|
|
|
showTopUnreadMessagesBar: false,
|
2017-01-23 18:01:39 +03:00
|
|
|
statusBarVisible: false,
|
2019-07-31 02:46:21 +03:00
|
|
|
canReact: false,
|
|
|
|
canReply: false,
|
2020-06-16 19:55:19 +03:00
|
|
|
useIRCLayout: SettingsStore.getValue("useIRCLayout"),
|
2020-05-19 15:17:34 +03:00
|
|
|
matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
|
2019-07-31 02:46:21 +03:00
|
|
|
};
|
|
|
|
|
2019-01-17 12:29:37 +03:00
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
2020-03-22 12:41:14 +03:00
|
|
|
this.context.on("Room", this.onRoom);
|
|
|
|
this.context.on("Room.timeline", this.onRoomTimeline);
|
|
|
|
this.context.on("Room.name", this.onRoomName);
|
|
|
|
this.context.on("Room.accountData", this.onRoomAccountData);
|
|
|
|
this.context.on("RoomState.events", this.onRoomStateEvents);
|
|
|
|
this.context.on("RoomState.members", this.onRoomStateMember);
|
|
|
|
this.context.on("Room.myMembership", this.onMyMembership);
|
|
|
|
this.context.on("accountData", this.onAccountData);
|
|
|
|
this.context.on("crypto.keyBackupStatus", this.onKeyBackupStatus);
|
|
|
|
this.context.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
|
|
|
|
this.context.on("userTrustStatusChanged", this.onUserVerificationChanged);
|
2020-04-09 14:43:30 +03:00
|
|
|
this.context.on("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
|
2017-05-24 18:56:13 +03:00
|
|
|
// Start listening for RoomViewStore updates
|
2020-09-07 19:32:03 +03:00
|
|
|
this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
|
|
|
|
this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate);
|
2020-05-26 17:56:16 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
WidgetEchoStore.on('update', this.onWidgetEchoStoreUpdate);
|
|
|
|
this.showReadReceiptsWatchRef = SettingsStore.watchSetting("showReadReceipts", null,
|
|
|
|
this.onReadReceiptsChange);
|
|
|
|
this.layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-10-04 08:20:00 +03:00
|
|
|
|
2020-08-29 14:51:37 +03:00
|
|
|
// TODO: [REACT-WARNING] Move into constructor
|
2020-09-07 19:32:03 +03:00
|
|
|
// eslint-disable-next-line camelcase
|
2020-08-29 14:51:37 +03:00
|
|
|
UNSAFE_componentWillMount() {
|
2020-09-07 19:32:03 +03:00
|
|
|
this.onRoomViewStoreUpdate(true);
|
2020-08-29 14:51:37 +03:00
|
|
|
}
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onReadReceiptsChange = () => {
|
2020-03-20 12:29:59 +03:00
|
|
|
this.setState({
|
|
|
|
showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId),
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2020-03-20 12:29:59 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRoomViewStoreUpdate = (initial?: boolean) => {
|
2017-05-24 18:56:13 +03:00
|
|
|
if (this.unmounted) {
|
|
|
|
return;
|
2016-06-14 13:37:04 +03:00
|
|
|
}
|
2019-01-17 12:29:37 +03:00
|
|
|
|
|
|
|
if (!initial && this.state.roomId !== RoomViewStore.getRoomId()) {
|
2017-09-11 19:57:52 +03:00
|
|
|
// RoomView explicitly does not support changing what room
|
|
|
|
// is being viewed: instead it should just be re-mounted when
|
|
|
|
// switching rooms. Therefore, if the room ID changes, we
|
|
|
|
// ignore this. We either need to do this or add code to handle
|
|
|
|
// saving the scroll position (otherwise we end up saving the
|
2017-09-11 20:39:30 +03:00
|
|
|
// scroll position against the wrong room).
|
|
|
|
|
|
|
|
// Given that doing the setState here would cause a bunch of
|
|
|
|
// unnecessary work, we just ignore the change since we know
|
|
|
|
// that if the current room ID has changed from what we thought
|
|
|
|
// it was, it means we're about to be unmounted.
|
2017-09-11 19:57:52 +03:00
|
|
|
return;
|
|
|
|
}
|
2019-01-17 12:29:37 +03:00
|
|
|
|
2020-03-20 12:29:59 +03:00
|
|
|
const roomId = RoomViewStore.getRoomId();
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
const newState: Pick<IState, any> = {
|
2020-03-20 12:29:59 +03:00
|
|
|
roomId,
|
2019-01-17 12:29:37 +03:00
|
|
|
roomAlias: RoomViewStore.getRoomAlias(),
|
|
|
|
roomLoading: RoomViewStore.isRoomLoading(),
|
|
|
|
roomLoadError: RoomViewStore.getRoomLoadError(),
|
|
|
|
joining: RoomViewStore.isJoining(),
|
|
|
|
initialEventId: RoomViewStore.getInitialEventId(),
|
|
|
|
isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
|
|
|
|
forwardingEvent: RoomViewStore.getForwardingEvent(),
|
2020-05-19 15:17:34 +03:00
|
|
|
// we should only peek once we have a ready client
|
|
|
|
shouldPeek: this.state.matrixClientIsReady && RoomViewStore.shouldPeek(),
|
2020-03-20 12:29:59 +03:00
|
|
|
showingPinned: SettingsStore.getValue("PinnedEvents.isOpen", roomId),
|
|
|
|
showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
|
2017-06-08 16:17:49 +03:00
|
|
|
};
|
|
|
|
|
2020-03-31 12:37:56 +03:00
|
|
|
if (!initial && this.state.shouldPeek && !newState.shouldPeek) {
|
|
|
|
// Stop peeking because we have joined this room now
|
|
|
|
this.context.stopPeeking();
|
|
|
|
}
|
|
|
|
|
2020-08-03 18:02:26 +03:00
|
|
|
// Temporary logging to diagnose https://github.com/vector-im/element-web/issues/4307
|
2017-06-14 18:53:21 +03:00
|
|
|
console.log(
|
|
|
|
'RVS update:',
|
|
|
|
newState.roomId,
|
|
|
|
newState.roomAlias,
|
|
|
|
'loading?', newState.roomLoading,
|
|
|
|
'joining?', newState.joining,
|
2017-06-16 20:24:07 +03:00
|
|
|
'initial?', initial,
|
|
|
|
'shouldPeek?', newState.shouldPeek,
|
2017-06-14 18:53:21 +03:00
|
|
|
);
|
|
|
|
|
2017-06-14 18:48:34 +03:00
|
|
|
// NB: This does assume that the roomID will not change for the lifetime of
|
|
|
|
// the RoomView instance
|
|
|
|
if (initial) {
|
2020-03-22 12:41:14 +03:00
|
|
|
newState.room = this.context.getRoom(newState.roomId);
|
2017-09-08 20:11:13 +03:00
|
|
|
if (newState.room) {
|
2020-09-07 19:32:03 +03:00
|
|
|
newState.showApps = this.shouldShowApps(newState.room);
|
|
|
|
this.onRoomLoaded(newState.room);
|
2017-09-08 20:11:13 +03:00
|
|
|
}
|
2017-06-14 18:48:34 +03:00
|
|
|
}
|
|
|
|
|
2017-09-08 15:39:22 +03:00
|
|
|
if (this.state.roomId === null && newState.roomId !== null) {
|
|
|
|
// Get the scroll state for the new room
|
2017-09-07 19:08:36 +03:00
|
|
|
|
|
|
|
// If an event ID wasn't specified, default to the one saved for this room
|
2017-09-07 19:16:32 +03:00
|
|
|
// in the scroll state store. Assume initialEventPixelOffset should be set.
|
2017-09-07 19:08:36 +03:00
|
|
|
if (!newState.initialEventId) {
|
2020-04-20 04:14:08 +03:00
|
|
|
const roomScrollState = RoomScrollStateStore.getScrollState(newState.roomId);
|
2017-09-07 19:08:36 +03:00
|
|
|
if (roomScrollState) {
|
|
|
|
newState.initialEventId = roomScrollState.focussedEvent;
|
|
|
|
newState.initialEventPixelOffset = roomScrollState.pixelOffset;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-06-08 17:38:58 +03:00
|
|
|
// Clear the search results when clicking a search result (which changes the
|
2017-06-08 17:47:41 +03:00
|
|
|
// currently scrolled to event, this.state.initialEventId).
|
|
|
|
if (this.state.initialEventId !== newState.initialEventId) {
|
2017-06-08 16:17:49 +03:00
|
|
|
newState.searchResults = null;
|
|
|
|
}
|
|
|
|
|
2017-09-08 19:06:46 +03:00
|
|
|
this.setState(newState);
|
|
|
|
// At this point, newState.roomId could be null (e.g. the alias might not
|
|
|
|
// have been resolved yet) so anything called here must handle this case.
|
2017-09-08 19:39:10 +03:00
|
|
|
|
2017-09-08 19:06:46 +03:00
|
|
|
// We pass the new state into this function for it to read: it needs to
|
|
|
|
// observe the new state but we don't want to put it in the setState
|
|
|
|
// callback because this would prevent the setStates from being batched,
|
|
|
|
// ie. cause it to render RoomView twice rather than the once that is necessary.
|
|
|
|
if (initial) {
|
2020-09-07 19:32:03 +03:00
|
|
|
this.setupRoom(newState.room, newState.roomId, newState.joining, newState.shouldPeek);
|
2017-09-08 19:06:46 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-06-14 13:37:04 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private getRoomId = () => {
|
|
|
|
// According to `onRoomViewStoreUpdate`, `state.roomId` can be null
|
2019-02-12 11:59:38 +03:00
|
|
|
// if we have a room alias we haven't resolved yet. To work around this,
|
|
|
|
// first we'll try the room object if it's there, and then fallback to
|
|
|
|
// the bare room ID. (We may want to update `state.roomId` after
|
|
|
|
// resolving aliases, so we could always trust it.)
|
|
|
|
return this.state.room ? this.state.room.roomId : this.state.roomId;
|
2020-09-07 19:32:03 +03:00
|
|
|
};
|
2019-02-12 11:59:38 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private getPermalinkCreatorForRoom(room: Room) {
|
|
|
|
if (this.permalinkCreators[room.roomId]) return this.permalinkCreators[room.roomId];
|
2019-04-09 21:01:09 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
this.permalinkCreators[room.roomId] = new RoomPermalinkCreator(room);
|
2019-04-12 19:38:39 +03:00
|
|
|
if (this.state.room && room.roomId === this.state.room.roomId) {
|
|
|
|
// We want to watch for changes in the creator for the primary room in the view, but
|
|
|
|
// don't need to do so for search results.
|
2020-09-07 19:32:03 +03:00
|
|
|
this.permalinkCreators[room.roomId].start();
|
2019-04-12 19:38:39 +03:00
|
|
|
} else {
|
2020-09-07 19:32:03 +03:00
|
|
|
this.permalinkCreators[room.roomId].load();
|
2019-04-12 19:38:39 +03:00
|
|
|
}
|
2020-09-07 19:32:03 +03:00
|
|
|
return this.permalinkCreators[room.roomId];
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-04-09 21:01:09 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private stopAllPermalinkCreators() {
|
|
|
|
if (!this.permalinkCreators) return;
|
|
|
|
for (const roomId of Object.keys(this.permalinkCreators)) {
|
|
|
|
this.permalinkCreators[roomId].stop();
|
2019-04-09 21:01:09 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-04-09 21:01:09 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onWidgetEchoStoreUpdate = () => {
|
2018-07-03 13:16:44 +03:00
|
|
|
this.setState({
|
2020-09-07 19:32:03 +03:00
|
|
|
showApps: this.shouldShowApps(this.state.room),
|
2018-07-03 13:16:44 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2018-07-03 13:16:44 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private setupRoom(room: Room, roomId: string, joining: boolean, shouldPeek: boolean) {
|
2016-01-07 19:22:17 +03:00
|
|
|
// if this is an unknown room then we're in one of three states:
|
|
|
|
// - This is a room we can peek into (search engine) (we can /peek)
|
|
|
|
// - This is a room we can publicly join or were invited to. (we can /join)
|
|
|
|
// - This is a room we cannot join at all. (no action can help us)
|
|
|
|
// We can't try to /join because this may implicitly accept invites (!)
|
|
|
|
// We can /peek though. If it fails then we present the join UI. If it
|
|
|
|
// succeeds then great, show the preview (but we still may be able to /join!).
|
2016-06-14 13:37:04 +03:00
|
|
|
// Note that peeking works by room ID and room ID only, as opposed to joining
|
|
|
|
// which must be by alias or invite wherever possible (peeking currently does
|
|
|
|
// not work over federation).
|
2016-01-27 10:54:15 +03:00
|
|
|
|
2017-06-15 13:49:16 +03:00
|
|
|
// NB. We peek if we have never seen the room before (i.e. js-sdk does not know
|
|
|
|
// about it). We don't peek in the historical case where we were joined but are
|
|
|
|
// now not joined because the js-sdk peeking API will clobber our historical room,
|
|
|
|
// making it impossible to indicate a newly joined room.
|
2017-09-08 19:56:53 +03:00
|
|
|
if (!joining && roomId) {
|
2016-06-20 18:30:51 +03:00
|
|
|
if (this.props.autoJoin) {
|
|
|
|
this.onJoinButtonClicked();
|
2017-09-08 19:56:53 +03:00
|
|
|
} else if (!room && shouldPeek) {
|
2019-11-26 04:14:03 +03:00
|
|
|
console.info("Attempting to peek into room %s", roomId);
|
2017-06-05 11:52:39 +03:00
|
|
|
this.setState({
|
|
|
|
peekLoading: true,
|
2017-10-12 03:43:24 +03:00
|
|
|
isPeeking: true, // this will change to false if peeking fails
|
2017-06-05 11:52:39 +03:00
|
|
|
});
|
2020-03-22 12:41:14 +03:00
|
|
|
this.context.peekInRoom(roomId).then((room) => {
|
2018-02-08 13:01:24 +03:00
|
|
|
if (this.unmounted) {
|
|
|
|
return;
|
|
|
|
}
|
2016-02-10 21:27:40 +03:00
|
|
|
this.setState({
|
2016-06-20 18:30:51 +03:00
|
|
|
room: room,
|
2017-06-05 11:52:39 +03:00
|
|
|
peekLoading: false,
|
2016-02-10 21:27:40 +03:00
|
|
|
});
|
2020-09-07 19:32:03 +03:00
|
|
|
this.onRoomLoaded(room);
|
2020-02-26 02:11:07 +03:00
|
|
|
}).catch((err) => {
|
2018-02-08 13:01:24 +03:00
|
|
|
if (this.unmounted) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-10-12 16:24:20 +03:00
|
|
|
// Stop peeking if anything went wrong
|
|
|
|
this.setState({
|
|
|
|
isPeeking: false,
|
|
|
|
});
|
2017-10-25 13:09:48 +03:00
|
|
|
|
2016-06-20 18:30:51 +03:00
|
|
|
// This won't necessarily be a MatrixError, but we duck-type
|
|
|
|
// here and say if it's got an 'errcode' key with the right value,
|
|
|
|
// it means we can't peek.
|
2020-02-26 02:11:07 +03:00
|
|
|
if (err.errcode === "M_GUEST_ACCESS_FORBIDDEN" || err.errcode === 'M_FORBIDDEN') {
|
2016-06-20 18:30:51 +03:00
|
|
|
// This is fine: the room just isn't peekable (we assume).
|
|
|
|
this.setState({
|
2017-06-05 11:52:39 +03:00
|
|
|
peekLoading: false,
|
2016-06-20 18:30:51 +03:00
|
|
|
});
|
|
|
|
} else {
|
|
|
|
throw err;
|
|
|
|
}
|
2018-02-08 13:01:24 +03:00
|
|
|
});
|
2018-07-12 16:19:25 +03:00
|
|
|
} else if (room) {
|
|
|
|
// Stop peeking because we have joined this room previously
|
2020-03-22 12:41:14 +03:00
|
|
|
this.context.stopPeeking();
|
2018-07-12 16:19:25 +03:00
|
|
|
this.setState({isPeeking: false});
|
2016-06-20 18:30:51 +03:00
|
|
|
}
|
2016-02-10 21:27:40 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private shouldShowApps(room: Room) {
|
2017-07-12 12:21:43 +03:00
|
|
|
if (!BROWSER_SUPPORTS_SANDBOX) return false;
|
|
|
|
|
2017-10-26 21:17:13 +03:00
|
|
|
// Check if user has previously chosen to hide the app drawer for this
|
|
|
|
// room. If so, do not show apps
|
2017-11-16 16:19:36 +03:00
|
|
|
const hideWidgetDrawer = localStorage.getItem(
|
2017-10-26 21:17:13 +03:00
|
|
|
room.roomId + "_hide_widget_drawer");
|
2017-10-25 02:21:46 +03:00
|
|
|
|
2020-04-09 23:47:20 +03:00
|
|
|
// This is confusing, but it means to say that we default to the tray being
|
|
|
|
// hidden unless the user clicked to open it.
|
|
|
|
return hideWidgetDrawer === "false";
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-06-13 16:19:06 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
componentDidMount() {
|
2020-09-07 19:32:03 +03:00
|
|
|
const call = this.getCallForRoom();
|
2017-10-11 19:56:17 +03:00
|
|
|
const callState = call ? call.call_state : "ended";
|
2016-10-17 16:03:37 +03:00
|
|
|
this.setState({
|
2017-10-11 19:56:17 +03:00
|
|
|
callState: callState,
|
2016-10-17 16:03:37 +03:00
|
|
|
});
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateConfCallNotification();
|
2016-10-17 16:03:37 +03:00
|
|
|
|
2017-04-29 08:25:30 +03:00
|
|
|
window.addEventListener('beforeunload', this.onPageUnload);
|
2019-03-28 19:56:12 +03:00
|
|
|
if (this.props.resizeNotifier) {
|
|
|
|
this.props.resizeNotifier.on("middlePanelResized", this.onResize);
|
|
|
|
}
|
2016-10-17 16:03:37 +03:00
|
|
|
this.onResize();
|
|
|
|
|
2020-04-14 17:24:41 +03:00
|
|
|
document.addEventListener("keydown", this.onNativeKeyDown);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-10-17 16:03:37 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
2016-03-08 01:27:35 +03:00
|
|
|
return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
|
|
|
|
!ObjectUtils.shallowEqual(this.state, nextState));
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-03-08 01:27:35 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
componentDidUpdate() {
|
2020-09-07 19:32:03 +03:00
|
|
|
if (this.roomView.current) {
|
|
|
|
const roomView = this.roomView.current;
|
2016-10-17 16:03:37 +03:00
|
|
|
if (!roomView.ondrop) {
|
|
|
|
roomView.addEventListener('drop', this.onDrop);
|
|
|
|
roomView.addEventListener('dragover', this.onDragOver);
|
|
|
|
roomView.addEventListener('dragleave', this.onDragLeaveOrEnd);
|
|
|
|
roomView.addEventListener('dragend', this.onDragLeaveOrEnd);
|
|
|
|
}
|
|
|
|
}
|
2019-03-28 18:50:17 +03:00
|
|
|
|
|
|
|
// Note: We check the ref here with a flag because componentDidMount, despite
|
|
|
|
// documentation, does not define our messagePanel ref. It looks like our spinner
|
|
|
|
// in render() prevents the ref from being set on first mount, so we try and
|
|
|
|
// catch the messagePanel when it does mount. Because we only want the ref once,
|
|
|
|
// we use a boolean flag to avoid duplicate work.
|
2020-09-07 19:32:03 +03:00
|
|
|
if (this.messagePanel && !this.state.atEndOfLiveTimelineInit) {
|
2019-03-26 23:22:48 +03:00
|
|
|
this.setState({
|
|
|
|
atEndOfLiveTimelineInit: true,
|
2020-09-07 19:32:03 +03:00
|
|
|
atEndOfLiveTimeline: this.messagePanel.isAtEndOfLiveTimeline(),
|
2019-03-26 23:22:48 +03:00
|
|
|
});
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-10-17 16:03:37 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
componentWillUnmount() {
|
2016-01-11 14:38:04 +03:00
|
|
|
// set a boolean to say we've been unmounted, which any pending
|
|
|
|
// promises can use to throw away their results.
|
|
|
|
//
|
|
|
|
// (We could use isMounted, but facebook have deprecated that.)
|
|
|
|
this.unmounted = true;
|
|
|
|
|
2016-11-04 12:28:35 +03:00
|
|
|
// update the scroll map before we get unmounted
|
2017-09-08 15:39:22 +03:00
|
|
|
if (this.state.roomId) {
|
2020-09-07 19:32:03 +03:00
|
|
|
RoomScrollStateStore.setScrollState(this.state.roomId, this.getScrollState());
|
2017-09-08 15:39:22 +03:00
|
|
|
}
|
2016-11-04 12:28:35 +03:00
|
|
|
|
2020-03-31 14:51:03 +03:00
|
|
|
if (this.state.shouldPeek) {
|
|
|
|
this.context.stopPeeking();
|
|
|
|
}
|
|
|
|
|
2019-02-21 17:44:20 +03:00
|
|
|
// stop tracking room changes to format permalinks
|
2020-09-07 19:32:03 +03:00
|
|
|
this.stopAllPermalinkCreators();
|
2019-02-21 17:44:20 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
if (this.roomView.current) {
|
2016-01-15 18:23:02 +03:00
|
|
|
// disconnect the D&D event listeners from the room view. This
|
|
|
|
// is really just for hygiene - we're going to be
|
2015-12-18 13:19:07 +03:00
|
|
|
// deleted anyway, so it doesn't matter if the event listeners
|
|
|
|
// don't get cleaned up.
|
2020-09-07 19:32:03 +03:00
|
|
|
const roomView = this.roomView.current;
|
2016-01-15 18:23:02 +03:00
|
|
|
roomView.removeEventListener('drop', this.onDrop);
|
|
|
|
roomView.removeEventListener('dragover', this.onDragOver);
|
|
|
|
roomView.removeEventListener('dragleave', this.onDragLeaveOrEnd);
|
|
|
|
roomView.removeEventListener('dragend', this.onDragLeaveOrEnd);
|
2015-11-30 20:15:57 +03:00
|
|
|
}
|
2019-01-17 12:29:37 +03:00
|
|
|
dis.unregister(this.dispatcherRef);
|
2020-03-22 12:41:14 +03:00
|
|
|
if (this.context) {
|
|
|
|
this.context.removeListener("Room", this.onRoom);
|
|
|
|
this.context.removeListener("Room.timeline", this.onRoomTimeline);
|
|
|
|
this.context.removeListener("Room.name", this.onRoomName);
|
|
|
|
this.context.removeListener("Room.accountData", this.onRoomAccountData);
|
|
|
|
this.context.removeListener("RoomState.events", this.onRoomStateEvents);
|
|
|
|
this.context.removeListener("Room.myMembership", this.onMyMembership);
|
|
|
|
this.context.removeListener("RoomState.members", this.onRoomStateMember);
|
|
|
|
this.context.removeListener("accountData", this.onAccountData);
|
|
|
|
this.context.removeListener("crypto.keyBackupStatus", this.onKeyBackupStatus);
|
|
|
|
this.context.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
|
|
|
|
this.context.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
|
2020-04-09 14:43:30 +03:00
|
|
|
this.context.removeListener("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
|
2015-11-30 20:15:57 +03:00
|
|
|
}
|
2015-12-13 07:32:48 +03:00
|
|
|
|
2017-04-29 08:25:30 +03:00
|
|
|
window.removeEventListener('beforeunload', this.onPageUnload);
|
2019-03-28 19:56:12 +03:00
|
|
|
if (this.props.resizeNotifier) {
|
|
|
|
this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
|
|
|
|
}
|
2016-01-08 06:22:38 +03:00
|
|
|
|
2020-04-14 17:24:41 +03:00
|
|
|
document.removeEventListener("keydown", this.onNativeKeyDown);
|
2016-10-17 16:03:37 +03:00
|
|
|
|
2017-06-01 20:01:30 +03:00
|
|
|
// Remove RoomStore listener
|
2020-09-07 19:32:03 +03:00
|
|
|
if (this.roomStoreToken) {
|
|
|
|
this.roomStoreToken.remove();
|
2017-06-01 20:01:30 +03:00
|
|
|
}
|
2020-03-20 03:18:24 +03:00
|
|
|
// Remove RightPanelStore listener
|
2020-09-07 19:32:03 +03:00
|
|
|
if (this.rightPanelStoreToken) {
|
|
|
|
this.rightPanelStoreToken.remove();
|
2020-03-20 03:18:24 +03:00
|
|
|
}
|
2017-06-01 20:01:30 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
WidgetEchoStore.removeListener('update', this.onWidgetEchoStoreUpdate);
|
2018-07-03 13:16:44 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
if (this.showReadReceiptsWatchRef) {
|
|
|
|
SettingsStore.unwatchSetting(this.showReadReceiptsWatchRef);
|
2020-03-20 12:29:59 +03:00
|
|
|
}
|
|
|
|
|
2016-08-10 15:39:47 +03:00
|
|
|
// cancel any pending calls to the rate_limited_funcs
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateRoomMembers.cancelPendingCall();
|
2016-08-10 15:39:47 +03:00
|
|
|
|
2016-04-16 03:00:10 +03:00
|
|
|
// no need to do this as Dir & Settings are now overlays. It just burnt CPU.
|
|
|
|
// console.log("Tinter.tint from RoomView.unmount");
|
|
|
|
// Tinter.tint(); // reset colourscheme
|
2020-05-26 17:56:16 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
SettingsStore.unwatchSetting(this.layoutWatcherRef);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2020-05-26 17:56:16 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onLayoutChange = () => {
|
2020-05-26 17:56:16 +03:00
|
|
|
this.setState({
|
2020-06-16 19:55:19 +03:00
|
|
|
useIRCLayout: SettingsStore.getValue("useIRCLayout"),
|
2020-05-26 17:56:16 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRightPanelStoreUpdate = () => {
|
2020-03-20 03:18:24 +03:00
|
|
|
this.setState({
|
|
|
|
showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2020-03-20 03:18:24 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onPageUnload = event => {
|
2019-04-01 18:42:41 +03:00
|
|
|
if (ContentMessages.sharedInstance().getCurrentUploads().length > 0) {
|
2017-04-29 08:25:30 +03:00
|
|
|
return event.returnValue =
|
2017-05-23 17:16:31 +03:00
|
|
|
_t("You seem to be uploading files, are you sure you want to quit?");
|
2020-09-07 19:32:03 +03:00
|
|
|
} else if (this.getCallForRoom() && this.state.callState !== 'ended') {
|
2017-05-03 18:36:57 +03:00
|
|
|
return event.returnValue =
|
2017-05-23 17:16:31 +03:00
|
|
|
_t("You seem to be in a call, are you sure you want to quit?");
|
2017-04-29 08:25:30 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2017-04-29 08:25:30 +03:00
|
|
|
|
2020-04-14 17:24:41 +03:00
|
|
|
// we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
|
2020-09-07 19:32:03 +03:00
|
|
|
private onNativeKeyDown = ev => {
|
2016-11-08 21:04:22 +03:00
|
|
|
let handled = false;
|
2017-12-01 13:44:00 +03:00
|
|
|
const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
|
2016-10-17 16:03:37 +03:00
|
|
|
|
2019-12-16 20:14:03 +03:00
|
|
|
switch (ev.key) {
|
|
|
|
case Key.D:
|
2016-11-08 21:04:22 +03:00
|
|
|
if (ctrlCmdOnly) {
|
2016-10-17 16:03:37 +03:00
|
|
|
this.onMuteAudioClick();
|
|
|
|
handled = true;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
2019-12-16 20:14:03 +03:00
|
|
|
case Key.E:
|
2016-11-08 21:04:22 +03:00
|
|
|
if (ctrlCmdOnly) {
|
2016-10-17 16:03:37 +03:00
|
|
|
this.onMuteVideoClick();
|
|
|
|
handled = true;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (handled) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-10-17 16:03:37 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onReactKeyDown = ev => {
|
2020-04-14 17:24:41 +03:00
|
|
|
let handled = false;
|
|
|
|
|
|
|
|
switch (ev.key) {
|
2020-03-25 05:35:17 +03:00
|
|
|
case Key.ESCAPE:
|
2020-04-14 17:24:41 +03:00
|
|
|
if (!ev.altKey && !ev.ctrlKey && !ev.shiftKey && !ev.metaKey) {
|
2020-09-07 19:32:03 +03:00
|
|
|
this.messagePanel.forgetReadMarker();
|
2020-04-14 17:24:41 +03:00
|
|
|
this.jumpToLiveTimeline();
|
|
|
|
handled = true;
|
|
|
|
}
|
2020-03-25 05:35:17 +03:00
|
|
|
break;
|
2020-05-13 12:38:32 +03:00
|
|
|
case Key.PAGE_UP:
|
|
|
|
if (!ev.altKey && !ev.ctrlKey && ev.shiftKey && !ev.metaKey) {
|
|
|
|
this.jumpToReadMarker();
|
|
|
|
handled = true;
|
|
|
|
}
|
|
|
|
break;
|
2020-09-18 14:32:33 +03:00
|
|
|
case Key.U: // Mac returns lowercase
|
2020-05-13 12:38:32 +03:00
|
|
|
case Key.U.toUpperCase():
|
|
|
|
if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev) && ev.shiftKey) {
|
2020-08-29 14:14:16 +03:00
|
|
|
dis.dispatch({ action: "upload_file" });
|
2020-05-13 12:38:32 +03:00
|
|
|
handled = true;
|
|
|
|
}
|
|
|
|
break;
|
2016-10-17 16:03:37 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (handled) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-10-17 16:03:37 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onAction = payload => {
|
2015-11-30 20:15:57 +03:00
|
|
|
switch (payload.action) {
|
|
|
|
case 'message_send_failed':
|
|
|
|
case 'message_sent':
|
2020-09-07 19:32:03 +03:00
|
|
|
this.checkIfAlone(this.state.room);
|
2015-11-30 20:15:57 +03:00
|
|
|
break;
|
2018-01-04 21:41:47 +03:00
|
|
|
case 'post_sticker_message':
|
2020-09-07 19:32:03 +03:00
|
|
|
this.injectSticker(
|
|
|
|
payload.data.content.url,
|
|
|
|
payload.data.content.info,
|
|
|
|
payload.data.description || payload.data.name);
|
|
|
|
break;
|
2017-12-03 22:44:59 +03:00
|
|
|
case 'picture_snapshot':
|
2020-09-07 19:32:03 +03:00
|
|
|
ContentMessages.sharedInstance().sendContentListToRoom(
|
|
|
|
[payload.file], this.state.room.roomId, this.context);
|
2019-09-10 10:38:51 +03:00
|
|
|
break;
|
2019-02-25 03:44:55 +03:00
|
|
|
case 'notifier_enabled':
|
2015-12-02 21:16:16 +03:00
|
|
|
case 'upload_started':
|
|
|
|
case 'upload_finished':
|
2019-04-08 19:53:39 +03:00
|
|
|
case 'upload_canceled':
|
2015-11-30 20:15:57 +03:00
|
|
|
this.forceUpdate();
|
|
|
|
break;
|
2020-09-07 19:32:03 +03:00
|
|
|
case 'call_state': {
|
2015-12-15 02:37:34 +03:00
|
|
|
// don't filter out payloads for room IDs other than props.room because
|
|
|
|
// we may be interested in the conf 1:1 room
|
|
|
|
|
|
|
|
if (!payload.room_id) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
const call = this.getCallForRoom();
|
|
|
|
let callState = "ended";
|
2015-12-15 02:37:34 +03:00
|
|
|
|
|
|
|
if (call) {
|
|
|
|
callState = call.call_state;
|
2015-11-30 20:15:57 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
// possibly remove the conf call notification if we're now in
|
|
|
|
// the conf
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateConfCallNotification();
|
2015-12-15 02:37:34 +03:00
|
|
|
|
|
|
|
this.setState({
|
2017-05-17 23:15:57 +03:00
|
|
|
callState: callState,
|
2015-12-15 02:37:34 +03:00
|
|
|
});
|
2017-05-17 23:15:57 +03:00
|
|
|
break;
|
2020-09-07 19:32:03 +03:00
|
|
|
}
|
2017-05-17 23:15:57 +03:00
|
|
|
case 'appsDrawer':
|
|
|
|
this.setState({
|
2017-06-28 14:21:05 +03:00
|
|
|
showApps: payload.show,
|
2017-05-17 23:15:57 +03:00
|
|
|
});
|
2015-11-30 20:15:57 +03:00
|
|
|
break;
|
2019-09-09 11:34:08 +03:00
|
|
|
case 'reply_to_event':
|
|
|
|
if (this.state.searchResults && payload.event.getRoomId() === this.state.roomId && !this.unmounted) {
|
|
|
|
this.onCancelSearchClick();
|
|
|
|
}
|
|
|
|
break;
|
2020-02-29 02:12:10 +03:00
|
|
|
case 'quote':
|
|
|
|
if (this.state.searchResults) {
|
|
|
|
const roomId = payload.event.getRoomId();
|
|
|
|
if (roomId === this.state.roomId) {
|
|
|
|
this.onCancelSearchClick();
|
|
|
|
}
|
|
|
|
|
|
|
|
setImmediate(() => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_room',
|
|
|
|
room_id: roomId,
|
|
|
|
deferred_action: payload,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
break;
|
2020-05-19 15:17:34 +03:00
|
|
|
case 'sync_state':
|
|
|
|
if (!this.state.matrixClientIsReady) {
|
|
|
|
this.setState({
|
|
|
|
matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
|
|
|
|
}, () => {
|
|
|
|
// send another "initial" RVS update to trigger peeking if needed
|
2020-09-07 19:32:03 +03:00
|
|
|
this.onRoomViewStoreUpdate(true);
|
2020-05-19 15:17:34 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
break;
|
2015-11-30 20:15:57 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRoomTimeline = (ev: MatrixEvent, room: Room, toStartOfTimeline: boolean, removed, data) => {
|
2016-01-11 14:38:04 +03:00
|
|
|
if (this.unmounted) return;
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2016-01-27 10:54:15 +03:00
|
|
|
// ignore events for other rooms
|
2016-09-09 04:09:12 +03:00
|
|
|
if (!room) return;
|
2016-04-12 21:25:07 +03:00
|
|
|
if (!this.state.room || room.roomId != this.state.room.roomId) return;
|
2016-01-27 10:54:15 +03:00
|
|
|
|
2016-09-09 00:48:44 +03:00
|
|
|
// ignore events from filtered timelines
|
|
|
|
if (data.timeline.getTimelineSet() !== room.getUnfilteredTimelineSet()) return;
|
|
|
|
|
2016-07-18 12:47:03 +03:00
|
|
|
if (ev.getType() === "org.matrix.room.preview_urls") {
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updatePreviewUrlVisibility(room);
|
2016-07-18 03:35:42 +03:00
|
|
|
}
|
|
|
|
|
2019-02-01 21:14:11 +03:00
|
|
|
if (ev.getType() === "m.room.encryption") {
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateE2EStatus(room);
|
2019-02-01 21:14:11 +03:00
|
|
|
}
|
|
|
|
|
2016-01-27 10:54:15 +03:00
|
|
|
// ignore anything but real-time updates at the end of the room:
|
|
|
|
// updates from pagination will happen when the paginate completes.
|
|
|
|
if (toStartOfTimeline || !data || !data.liveEvent) return;
|
2015-11-30 20:15:57 +03:00
|
|
|
|
|
|
|
// no point handling anything while we're waiting for the join to finish:
|
|
|
|
// we'll only be showing a spinner.
|
|
|
|
if (this.state.joining) return;
|
|
|
|
|
2020-03-22 12:41:14 +03:00
|
|
|
if (ev.getSender() !== this.context.credentials.userId) {
|
2015-11-30 20:15:57 +03:00
|
|
|
// update unread count when scrolled up
|
2016-02-03 11:03:10 +03:00
|
|
|
if (!this.state.searchResults && this.state.atEndOfLiveTimeline) {
|
2016-01-27 10:54:15 +03:00
|
|
|
// no change
|
2017-10-29 10:43:52 +03:00
|
|
|
} else if (!shouldHideEvent(ev)) {
|
2016-04-18 03:34:45 +03:00
|
|
|
this.setState((state, props) => {
|
2016-01-27 10:54:15 +03:00
|
|
|
return {numUnreadMessages: state.numUnreadMessages + 1};
|
|
|
|
});
|
2015-11-30 20:15:57 +03:00
|
|
|
}
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-01-18 22:56:35 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRoomName = (room: Room) => {
|
2017-02-17 14:44:56 +03:00
|
|
|
if (this.state.room && room.roomId == this.state.room.roomId) {
|
|
|
|
this.forceUpdate();
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2017-02-17 14:44:56 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onKeyBackupStatus = () => {
|
2019-01-03 00:32:14 +03:00
|
|
|
// Key backup status changes affect whether the in-room recovery
|
|
|
|
// reminder is displayed.
|
2018-12-07 00:39:59 +03:00
|
|
|
this.forceUpdate();
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2018-12-07 00:39:59 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
public canResetTimeline = () => {
|
|
|
|
if (!this.messagePanel) {
|
2017-03-22 18:06:52 +03:00
|
|
|
return true;
|
|
|
|
}
|
2020-09-07 19:32:03 +03:00
|
|
|
return this.messagePanel.canResetTimeline();
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2017-03-22 18:06:52 +03:00
|
|
|
|
2016-02-10 21:27:40 +03:00
|
|
|
// called when state.room is first initialised (either at initial load,
|
|
|
|
// after a successful peek, or after we join the room).
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRoomLoaded = (room: Room) => {
|
|
|
|
this.calculatePeekRules(room);
|
|
|
|
this.updatePreviewUrlVisibility(room);
|
|
|
|
this.loadMembersIfJoined(room);
|
|
|
|
this.calculateRecommendedVersion(room);
|
|
|
|
this.updateE2EStatus(room);
|
|
|
|
this.updatePermissions(room);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-01-29 03:21:33 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private async calculateRecommendedVersion(room: Room) {
|
2019-01-29 03:21:33 +03:00
|
|
|
this.setState({
|
|
|
|
upgradeRecommendation: await room.getRecommendedVersion(),
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2018-09-13 19:43:24 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private async loadMembersIfJoined(room: Room) {
|
2018-09-13 19:43:24 +03:00
|
|
|
// lazy load members if enabled
|
2020-03-22 12:41:14 +03:00
|
|
|
if (this.context.hasLazyLoadMembersEnabled()) {
|
2018-09-13 19:43:24 +03:00
|
|
|
if (room && room.getMyMembership() === 'join') {
|
2018-09-14 19:35:16 +03:00
|
|
|
try {
|
|
|
|
await room.loadMembersIfNeeded();
|
|
|
|
if (!this.unmounted) {
|
2018-09-17 20:27:25 +03:00
|
|
|
this.setState({membersLoaded: true});
|
2018-09-14 19:35:16 +03:00
|
|
|
}
|
2018-09-17 21:01:55 +03:00
|
|
|
} catch (err) {
|
2018-09-13 19:43:24 +03:00
|
|
|
const errorMessage = `Fetching room members for ${room.roomId} failed.` +
|
|
|
|
" Room members will appear incomplete.";
|
|
|
|
console.error(errorMessage);
|
|
|
|
console.error(err);
|
2018-09-14 19:35:16 +03:00
|
|
|
}
|
2018-09-13 19:43:24 +03:00
|
|
|
}
|
2017-03-01 18:41:13 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-03-01 18:41:13 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private calculatePeekRules(room: Room) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const guestAccessEvent = room.currentState.getStateEvents("m.room.guest_access", "");
|
2016-01-18 23:05:33 +03:00
|
|
|
if (guestAccessEvent && guestAccessEvent.getContent().guest_access === "can_join") {
|
|
|
|
this.setState({
|
2017-10-11 19:56:17 +03:00
|
|
|
guestsCanJoin: true,
|
2016-01-18 23:05:33 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const historyVisibility = room.currentState.getStateEvents("m.room.history_visibility", "");
|
2016-01-18 23:05:33 +03:00
|
|
|
if (historyVisibility && historyVisibility.getContent().history_visibility === "world_readable") {
|
|
|
|
this.setState({
|
2017-10-11 19:56:17 +03:00
|
|
|
canPeek: true,
|
2016-01-18 23:05:33 +03:00
|
|
|
});
|
2016-01-18 20:39:23 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-01-18 20:39:23 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private updatePreviewUrlVisibility({roomId}: Room) {
|
2018-06-22 20:44:54 +03:00
|
|
|
// URL Previews in E2EE rooms can be a privacy leak so use a different setting which is per-room explicit
|
2020-03-22 12:41:14 +03:00
|
|
|
const key = this.context.isRoomEncrypted(roomId) ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled';
|
2016-07-18 03:35:42 +03:00
|
|
|
this.setState({
|
2018-06-22 20:44:54 +03:00
|
|
|
showUrlPreview: SettingsStore.getValue(key, roomId),
|
2016-07-18 03:35:42 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-07-18 03:35:42 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRoom = (room: Room) => {
|
2017-05-24 18:56:13 +03:00
|
|
|
if (!room || room.roomId !== this.state.roomId) {
|
|
|
|
return;
|
2016-02-04 14:29:00 +03:00
|
|
|
}
|
2017-05-24 18:56:13 +03:00
|
|
|
this.setState({
|
|
|
|
room: room,
|
|
|
|
}, () => {
|
2020-09-07 19:32:03 +03:00
|
|
|
this.onRoomLoaded(room);
|
2017-05-24 18:56:13 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-02-04 14:29:00 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onDeviceVerificationChanged = (userId: string, device: object) => {
|
2019-02-01 16:35:03 +03:00
|
|
|
const room = this.state.room;
|
|
|
|
if (!room.currentState.getMember(userId)) {
|
|
|
|
return;
|
|
|
|
}
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateE2EStatus(room);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-02-01 16:35:03 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onUserVerificationChanged = (userId: string, trustStatus: object) => {
|
2020-01-15 16:57:29 +03:00
|
|
|
const room = this.state.room;
|
2020-01-24 22:11:57 +03:00
|
|
|
if (!room || !room.currentState.getMember(userId)) {
|
2020-01-15 16:57:29 +03:00
|
|
|
return;
|
|
|
|
}
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateE2EStatus(room);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2020-01-15 16:57:29 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onCrossSigningKeysChanged = () => {
|
2020-04-09 14:43:30 +03:00
|
|
|
const room = this.state.room;
|
|
|
|
if (room) {
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateE2EStatus(room);
|
2020-04-09 14:43:30 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2020-04-09 14:43:30 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private async updateE2EStatus(room: Room) {
|
2020-03-22 12:41:14 +03:00
|
|
|
if (!this.context.isRoomEncrypted(room.roomId)) {
|
2019-02-01 19:52:27 +03:00
|
|
|
return;
|
|
|
|
}
|
2020-03-22 12:41:14 +03:00
|
|
|
if (!this.context.isCryptoEnabled()) {
|
2019-04-08 18:26:54 +03:00
|
|
|
// If crypto is not currently enabled, we aren't tracking devices at all,
|
|
|
|
// so we don't know what the answer is. Let's error on the safe side and show
|
|
|
|
// a warning for this case.
|
|
|
|
this.setState({
|
2020-09-07 19:32:03 +03:00
|
|
|
e2eStatus: E2EStatus.Warning,
|
2019-04-08 18:26:54 +03:00
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
2020-01-15 16:57:29 +03:00
|
|
|
|
2020-01-16 19:31:50 +03:00
|
|
|
/* At this point, the user has encryption on and cross-signing on */
|
2019-12-13 20:57:26 +03:00
|
|
|
this.setState({
|
2020-03-30 12:18:47 +03:00
|
|
|
e2eStatus: await shieldStatusForRoom(this.context, room),
|
2019-02-01 16:35:03 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-02-01 16:35:03 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private updateTint() {
|
2017-10-11 19:56:17 +03:00
|
|
|
const room = this.state.room;
|
2016-01-08 06:22:38 +03:00
|
|
|
if (!room) return;
|
|
|
|
|
2016-04-16 03:00:10 +03:00
|
|
|
console.log("Tinter.tint from updateTint");
|
2018-10-23 07:15:28 +03:00
|
|
|
const colorScheme = SettingsStore.getValue("roomColor", room.roomId);
|
|
|
|
Tinter.tint(colorScheme.primary_color, colorScheme.secondary_color);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-01-08 06:22:38 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onAccountData = (event: MatrixEvent) => {
|
2018-06-22 21:17:55 +03:00
|
|
|
const type = event.getType();
|
|
|
|
if ((type === "org.matrix.preview_urls" || type === "im.vector.web.settings") && this.state.room) {
|
|
|
|
// non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updatePreviewUrlVisibility(this.state.room);
|
2016-07-20 20:14:16 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-07-20 20:14:16 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRoomAccountData = (event: MatrixEvent, room: Room) => {
|
2016-07-20 14:03:13 +03:00
|
|
|
if (room.roomId == this.state.roomId) {
|
2018-06-22 21:17:55 +03:00
|
|
|
const type = event.getType();
|
|
|
|
if (type === "org.matrix.room.color_scheme") {
|
2018-10-23 07:15:28 +03:00
|
|
|
const colorScheme = event.getContent();
|
2016-01-08 06:22:38 +03:00
|
|
|
// XXX: we should validate the event
|
2016-04-16 03:00:10 +03:00
|
|
|
console.log("Tinter.tint from onRoomAccountData");
|
2018-10-23 07:15:28 +03:00
|
|
|
Tinter.tint(colorScheme.primary_color, colorScheme.secondary_color);
|
2018-06-22 21:17:55 +03:00
|
|
|
} else if (type === "org.matrix.room.preview_urls" || type === "im.vector.web.settings") {
|
|
|
|
// non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updatePreviewUrlVisibility(room);
|
2016-07-18 03:35:42 +03:00
|
|
|
}
|
2016-01-08 06:22:38 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-01-08 06:22:38 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRoomStateEvents = (ev: MatrixEvent, state) => {
|
2019-07-31 02:46:21 +03:00
|
|
|
// ignore if we don't have a room yet
|
|
|
|
if (!this.state.room || this.state.room.roomId !== state.roomId) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updatePermissions(this.state.room);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-07-31 02:46:21 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRoomStateMember = (ev: MatrixEvent, state, member) => {
|
2016-04-12 21:25:07 +03:00
|
|
|
// ignore if we don't have a room yet
|
|
|
|
if (!this.state.room) {
|
|
|
|
return;
|
2015-12-22 18:38:23 +03:00
|
|
|
}
|
|
|
|
|
2016-04-12 21:25:07 +03:00
|
|
|
// ignore members in other rooms
|
|
|
|
if (member.roomId !== this.state.room.roomId) {
|
2015-11-30 20:15:57 +03:00
|
|
|
return;
|
|
|
|
}
|
2016-04-12 21:25:07 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateRoomMembers(member);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-07-26 20:15:26 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onMyMembership = (room: Room, membership: string, oldMembership: string) => {
|
2018-09-17 20:14:52 +03:00
|
|
|
if (room.roomId === this.state.roomId) {
|
2017-09-15 17:07:09 +03:00
|
|
|
this.forceUpdate();
|
2020-09-07 19:32:03 +03:00
|
|
|
this.loadMembersIfJoined(room);
|
|
|
|
this.updatePermissions(room);
|
2019-07-31 02:46:21 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-07-31 02:46:21 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private updatePermissions(room: Room) {
|
2019-07-31 02:46:21 +03:00
|
|
|
if (room) {
|
2020-03-22 12:41:14 +03:00
|
|
|
const me = this.context.getUserId();
|
2019-07-31 02:46:21 +03:00
|
|
|
const canReact = room.getMyMembership() === "join" && room.currentState.maySendEvent("m.reaction", me);
|
|
|
|
const canReply = room.maySendMessage();
|
|
|
|
|
|
|
|
this.setState({canReact, canReply});
|
2017-02-17 18:50:30 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-02-17 18:50:30 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
// rate limited because a power level change will emit an event for every member in the room.
|
2020-09-08 13:05:33 +03:00
|
|
|
private updateRoomMembers = rateLimitedFunc((dueToMember) => {
|
2016-10-26 15:09:53 +03:00
|
|
|
// a member state changed in this room
|
2016-10-26 17:32:09 +03:00
|
|
|
// refresh the conf call notification state
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateConfCallNotification();
|
|
|
|
this.updateDMState();
|
2019-03-13 23:06:34 +03:00
|
|
|
|
|
|
|
let memberCountInfluence = 0;
|
|
|
|
if (dueToMember && dueToMember.membership === "invite" && this.state.room.getInvitedMemberCount() === 0) {
|
|
|
|
// A member got invited, but the room hasn't detected that change yet. Influence the member
|
|
|
|
// count by 1 to counteract this.
|
|
|
|
memberCountInfluence = 1;
|
|
|
|
}
|
2020-09-07 19:32:03 +03:00
|
|
|
this.checkIfAlone(this.state.room, memberCountInfluence);
|
2019-03-13 23:06:34 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateE2EStatus(this.state.room);
|
2020-08-29 14:14:16 +03:00
|
|
|
}, 500);
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private checkIfAlone(room: Room, countInfluence?: number) {
|
2017-10-12 06:15:00 +03:00
|
|
|
let warnedAboutLonelyRoom = false;
|
|
|
|
if (localStorage) {
|
2020-09-08 17:22:23 +03:00
|
|
|
warnedAboutLonelyRoom = Boolean(localStorage.getItem('mx_user_alone_warned_' + this.state.room.roomId));
|
2017-10-12 06:15:00 +03:00
|
|
|
}
|
|
|
|
if (warnedAboutLonelyRoom) {
|
|
|
|
if (this.state.isAlone) this.setState({isAlone: false});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-03-13 23:06:34 +03:00
|
|
|
let joinedOrInvitedMemberCount = room.getJoinedMemberCount() + room.getInvitedMemberCount();
|
|
|
|
if (countInfluence) joinedOrInvitedMemberCount += countInfluence;
|
2018-08-22 19:05:36 +03:00
|
|
|
this.setState({isAlone: joinedOrInvitedMemberCount === 1});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-10-12 06:15:00 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private updateConfCallNotification() {
|
2017-10-11 19:56:17 +03:00
|
|
|
const room = this.state.room;
|
2015-11-30 20:15:57 +03:00
|
|
|
if (!room || !this.props.ConferenceHandler) {
|
|
|
|
return;
|
|
|
|
}
|
2017-10-11 19:56:17 +03:00
|
|
|
const confMember = room.getMember(
|
|
|
|
this.props.ConferenceHandler.getConferenceUserIdForRoom(room.roomId),
|
2015-11-30 20:15:57 +03:00
|
|
|
);
|
|
|
|
|
|
|
|
if (!confMember) {
|
|
|
|
return;
|
|
|
|
}
|
2017-10-11 19:56:17 +03:00
|
|
|
const confCall = this.props.ConferenceHandler.getConferenceCallForRoom(confMember.roomId);
|
2015-11-30 20:15:57 +03:00
|
|
|
|
|
|
|
// A conf call notification should be displayed if there is an ongoing
|
|
|
|
// conf call but this cilent isn't a part of it.
|
|
|
|
this.setState({
|
|
|
|
displayConfCallNotification: (
|
|
|
|
(!confCall || confCall.call_state === "ended") &&
|
|
|
|
confMember.membership === "join"
|
2017-10-11 19:56:17 +03:00
|
|
|
),
|
2015-11-30 20:15:57 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private updateDMState() {
|
2018-08-02 12:42:05 +03:00
|
|
|
const room = this.state.room;
|
|
|
|
if (room.getMyMembership() != "join") {
|
2018-02-20 17:10:34 +03:00
|
|
|
return;
|
|
|
|
}
|
2018-08-02 12:42:19 +03:00
|
|
|
const dmInviter = room.getDMInviter();
|
2018-07-12 20:39:52 +03:00
|
|
|
if (dmInviter) {
|
2018-08-02 12:42:19 +03:00
|
|
|
Rooms.setDMRoom(room.roomId, dmInviter);
|
2018-02-20 17:10:34 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2018-02-20 17:10:34 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onSearchResultsFillRequest = (backwards: boolean) => {
|
2017-01-20 17:22:27 +03:00
|
|
|
if (!backwards) {
|
2017-07-12 16:02:00 +03:00
|
|
|
return Promise.resolve(false);
|
2017-01-20 17:22:27 +03:00
|
|
|
}
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2015-12-22 21:15:32 +03:00
|
|
|
if (this.state.searchResults.next_batch) {
|
2016-01-04 19:28:32 +03:00
|
|
|
debuglog("requesting more search results");
|
2020-05-29 12:44:08 +03:00
|
|
|
const searchPromise = searchPagination(this.state.searchResults);
|
2020-09-07 19:32:03 +03:00
|
|
|
return this.handleSearchResult(searchPromise);
|
2015-12-22 18:18:50 +03:00
|
|
|
} else {
|
2016-01-04 19:28:32 +03:00
|
|
|
debuglog("no more search results");
|
2017-07-12 16:02:00 +03:00
|
|
|
return Promise.resolve(false);
|
2015-12-22 18:18:50 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onInviteButtonClick = () => {
|
2017-10-12 06:15:00 +03:00
|
|
|
// call AddressPickerDialog
|
2019-01-17 12:29:37 +03:00
|
|
|
dis.dispatch({
|
2017-10-12 06:15:00 +03:00
|
|
|
action: 'view_invite',
|
|
|
|
roomId: this.state.room.roomId,
|
|
|
|
});
|
|
|
|
this.setState({isAlone: false}); // there's a good chance they'll invite someone
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2017-10-12 06:15:00 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onStopAloneWarningClick = () => {
|
2017-10-12 06:15:00 +03:00
|
|
|
if (localStorage) {
|
2020-09-07 19:32:03 +03:00
|
|
|
localStorage.setItem('mx_user_alone_warned_' + this.state.room.roomId, String(true));
|
2017-10-12 06:15:00 +03:00
|
|
|
}
|
|
|
|
this.setState({isAlone: false});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2017-10-12 06:15:00 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onJoinButtonClicked = () => {
|
2017-04-28 15:22:55 +03:00
|
|
|
// If the user is a ROU, allow them to transition to a PWLU
|
2020-03-22 12:41:14 +03:00
|
|
|
if (this.context && this.context.isGuest()) {
|
2017-05-24 18:56:13 +03:00
|
|
|
// Join this room once the user has registered and logged in
|
2019-02-11 17:33:19 +03:00
|
|
|
// (If we failed to peek, we may not have a valid room object.)
|
2019-01-17 12:29:37 +03:00
|
|
|
dis.dispatch({
|
2017-05-24 18:56:13 +03:00
|
|
|
action: 'do_after_sync_prepared',
|
|
|
|
deferred_action: {
|
2019-01-30 17:45:42 +03:00
|
|
|
action: 'view_room',
|
2020-09-07 19:32:03 +03:00
|
|
|
room_id: this.getRoomId(),
|
2017-05-24 18:56:13 +03:00
|
|
|
},
|
|
|
|
});
|
2016-02-04 14:49:10 +03:00
|
|
|
|
2017-05-25 19:04:42 +03:00
|
|
|
// Don't peek whilst registering otherwise getPendingEventList complains
|
|
|
|
// Do this by indicating our intention to join
|
|
|
|
|
2019-01-30 15:13:09 +03:00
|
|
|
// XXX: ILAG is disabled for now,
|
2020-08-03 18:02:26 +03:00
|
|
|
// see https://github.com/vector-im/element-web/issues/8222
|
2019-01-30 15:13:09 +03:00
|
|
|
dis.dispatch({action: 'require_registration'});
|
|
|
|
// dis.dispatch({
|
|
|
|
// action: 'will_join',
|
|
|
|
// });
|
|
|
|
|
|
|
|
// const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
|
|
|
|
// const close = Modal.createTrackedDialog('Set MXID', '', SetMxIdDialog, {
|
|
|
|
// homeserverUrl: cli.getHomeserverUrl(),
|
|
|
|
// onFinished: (submitted, credentials) => {
|
|
|
|
// if (submitted) {
|
|
|
|
// this.props.onRegistered(credentials);
|
|
|
|
// } else {
|
|
|
|
// dis.dispatch({
|
|
|
|
// action: 'cancel_after_sync_prepared',
|
|
|
|
// });
|
|
|
|
// dis.dispatch({
|
|
|
|
// action: 'cancel_join',
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
// onDifferentServerClicked: (ev) => {
|
|
|
|
// dis.dispatch({action: 'start_registration'});
|
|
|
|
// close();
|
|
|
|
// },
|
|
|
|
// onLoginClick: (ev) => {
|
|
|
|
// dis.dispatch({action: 'start_login'});
|
|
|
|
// close();
|
|
|
|
// },
|
|
|
|
// }).close;
|
|
|
|
// return;
|
2019-01-30 17:45:42 +03:00
|
|
|
} else {
|
|
|
|
Promise.resolve().then(() => {
|
2020-09-12 04:49:48 +03:00
|
|
|
const signUrl = this.props.threepidInvite?.signUrl;
|
2019-01-30 17:45:42 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'join_room',
|
|
|
|
opts: { inviteSignUrl: signUrl, viaServers: this.props.viaServers },
|
|
|
|
});
|
|
|
|
return Promise.resolve();
|
|
|
|
});
|
2016-02-04 14:49:10 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-02-04 14:49:10 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onMessageListScroll = ev => {
|
|
|
|
if (this.messagePanel.isAtEndOfLiveTimeline()) {
|
2016-02-10 21:27:40 +03:00
|
|
|
this.setState({
|
|
|
|
numUnreadMessages: 0,
|
|
|
|
atEndOfLiveTimeline: true,
|
|
|
|
});
|
2017-10-11 19:56:17 +03:00
|
|
|
} else {
|
2016-02-10 21:27:40 +03:00
|
|
|
this.setState({
|
|
|
|
atEndOfLiveTimeline: false,
|
|
|
|
});
|
2015-12-18 02:04:32 +03:00
|
|
|
}
|
2020-09-07 19:32:03 +03:00
|
|
|
this.updateTopUnreadMessagesBar();
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onDragOver = ev => {
|
2015-11-30 20:15:57 +03:00
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
|
|
|
|
ev.dataTransfer.dropEffect = 'none';
|
|
|
|
|
2017-12-18 15:51:01 +03:00
|
|
|
const items = [...ev.dataTransfer.items];
|
2017-12-18 13:20:18 +03:00
|
|
|
if (items.length >= 1) {
|
2017-12-18 15:51:01 +03:00
|
|
|
const isDraggingFiles = items.every(function(item) {
|
2017-12-18 13:20:18 +03:00
|
|
|
return item.kind == 'file';
|
|
|
|
});
|
|
|
|
|
|
|
|
if (isDraggingFiles) {
|
2017-10-11 19:56:17 +03:00
|
|
|
this.setState({ draggingFile: true });
|
2015-11-30 20:15:57 +03:00
|
|
|
ev.dataTransfer.dropEffect = 'copy';
|
|
|
|
}
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onDrop = ev => {
|
2015-11-30 20:15:57 +03:00
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
2019-04-01 18:42:41 +03:00
|
|
|
ContentMessages.sharedInstance().sendContentListToRoom(
|
2020-03-22 12:41:14 +03:00
|
|
|
ev.dataTransfer.files, this.state.room.roomId, this.context,
|
2019-04-01 18:42:41 +03:00
|
|
|
);
|
2017-10-11 19:56:17 +03:00
|
|
|
this.setState({ draggingFile: false });
|
2020-06-03 04:07:46 +03:00
|
|
|
dis.fire(Action.FocusComposer);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onDragLeaveOrEnd = ev => {
|
2015-11-30 20:15:57 +03:00
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
2017-10-11 19:56:17 +03:00
|
|
|
this.setState({ draggingFile: false });
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private injectSticker(url, info, text) {
|
2020-03-22 12:41:14 +03:00
|
|
|
if (this.context.isGuest()) {
|
2019-01-17 12:29:37 +03:00
|
|
|
dis.dispatch({action: 'require_registration'});
|
2018-01-04 12:53:26 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-03-22 12:41:14 +03:00
|
|
|
ContentMessages.sharedInstance().sendStickerContentToRoom(url, this.state.room.roomId, info, text, this.context)
|
2019-11-18 13:03:05 +03:00
|
|
|
.then(undefined, (error) => {
|
2018-03-29 18:46:22 +03:00
|
|
|
if (error.name === "UnknownDeviceError") {
|
|
|
|
// Let the staus bar handle this
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2018-01-04 12:53:26 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onSearch = (term: string, scope) => {
|
2015-12-18 14:11:41 +03:00
|
|
|
this.setState({
|
|
|
|
searchTerm: term,
|
|
|
|
searchScope: scope,
|
2015-12-22 21:15:32 +03:00
|
|
|
searchResults: {},
|
2015-12-18 14:11:41 +03:00
|
|
|
searchHighlights: [],
|
|
|
|
});
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2015-12-22 18:18:50 +03:00
|
|
|
// if we already have a search panel, we need to tell it to forget
|
|
|
|
// about its scroll state.
|
2020-09-07 19:32:03 +03:00
|
|
|
if (this.searchResultsPanel.current) {
|
|
|
|
this.searchResultsPanel.current.resetScrollState();
|
2015-12-22 18:18:50 +03:00
|
|
|
}
|
|
|
|
|
2015-12-22 21:15:32 +03:00
|
|
|
// make sure that we don't end up showing results from
|
|
|
|
// an aborted search by keeping a unique id.
|
|
|
|
//
|
|
|
|
// todo: should cancel any previous search requests.
|
|
|
|
this.searchId = new Date().getTime();
|
|
|
|
|
2019-11-12 17:39:26 +03:00
|
|
|
let roomId;
|
2019-11-13 18:21:26 +03:00
|
|
|
if (scope === "Room") roomId = this.state.room.roomId;
|
2015-12-22 21:15:32 +03:00
|
|
|
|
2016-01-05 18:51:16 +03:00
|
|
|
debuglog("sending search request");
|
2019-11-12 17:39:26 +03:00
|
|
|
const searchPromise = eventSearch(term, roomId);
|
2020-09-07 19:32:03 +03:00
|
|
|
this.handleSearchResult(searchPromise);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-12-18 14:11:41 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private handleSearchResult(searchPromise: Promise<any>) {
|
2016-01-04 19:54:27 +03:00
|
|
|
// keep a record of the current search id, so that if the search terms
|
|
|
|
// change before we get a response, we can ignore the results.
|
2017-10-11 19:56:17 +03:00
|
|
|
const localSearchId = this.searchId;
|
2015-12-11 06:22:44 +03:00
|
|
|
|
2015-12-22 21:15:32 +03:00
|
|
|
this.setState({
|
|
|
|
searchInProgress: true,
|
|
|
|
});
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
return searchPromise.then((results) => {
|
2016-01-04 19:28:32 +03:00
|
|
|
debuglog("search complete");
|
2020-09-07 19:32:03 +03:00
|
|
|
if (this.unmounted || !this.state.searching || this.searchId != localSearchId) {
|
2015-12-11 06:22:44 +03:00
|
|
|
console.error("Discarding stale search results");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-01-05 18:28:32 +03:00
|
|
|
// postgres on synapse returns us precise details of the strings
|
|
|
|
// which actually got matched for highlighting.
|
|
|
|
//
|
|
|
|
// In either case, we want to highlight the literal search term
|
|
|
|
// whether it was used by the search engine or not.
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
let highlights = results.highlights;
|
2020-09-07 19:32:03 +03:00
|
|
|
if (highlights.indexOf(this.state.searchTerm) < 0) {
|
|
|
|
highlights = highlights.concat(this.state.searchTerm);
|
2016-01-05 18:28:32 +03:00
|
|
|
}
|
2015-12-18 14:11:41 +03:00
|
|
|
|
2015-12-22 21:15:32 +03:00
|
|
|
// For overlapping highlights,
|
2015-12-18 14:11:41 +03:00
|
|
|
// favour longer (more specific) terms first
|
2016-01-08 16:25:03 +03:00
|
|
|
highlights = highlights.sort(function(a, b) {
|
2017-10-11 19:56:17 +03:00
|
|
|
return b.length - a.length;
|
2019-02-04 23:25:26 +03:00
|
|
|
});
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
this.setState({
|
2015-12-18 14:11:41 +03:00
|
|
|
searchHighlights: highlights,
|
2015-12-22 21:15:32 +03:00
|
|
|
searchResults: results,
|
2015-11-30 20:15:57 +03:00
|
|
|
});
|
2020-09-07 19:32:03 +03:00
|
|
|
}, (error) => {
|
2017-10-11 19:56:17 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2020-04-09 18:04:14 +03:00
|
|
|
console.error("Search failed", error);
|
2017-08-10 17:17:52 +03:00
|
|
|
Modal.createTrackedDialog('Search failed', '', ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Search failed"),
|
2020-09-07 19:32:03 +03:00
|
|
|
description: ((error && error.message) ? error.message :
|
|
|
|
_t("Server may be unavailable, overloaded, or search timed out :(")),
|
2015-11-30 20:15:57 +03:00
|
|
|
});
|
2020-09-07 19:32:03 +03:00
|
|
|
}).finally(() => {
|
|
|
|
this.setState({
|
2017-10-11 19:56:17 +03:00
|
|
|
searchInProgress: false,
|
2015-12-11 05:25:33 +03:00
|
|
|
});
|
2015-12-22 21:15:32 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-12-18 14:11:41 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private getSearchResultTiles() {
|
2017-10-11 19:56:17 +03:00
|
|
|
const SearchResultTile = sdk.getComponent('rooms.SearchResultTile');
|
|
|
|
const Spinner = sdk.getComponent("elements.Spinner");
|
2016-03-21 02:51:43 +03:00
|
|
|
|
2015-12-22 18:18:50 +03:00
|
|
|
// XXX: todo: merge overlapping results somehow?
|
|
|
|
// XXX: why doesn't searching on name work?
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const ret = [];
|
2015-12-22 21:15:32 +03:00
|
|
|
|
2016-03-21 02:51:43 +03:00
|
|
|
if (this.state.searchInProgress) {
|
|
|
|
ret.push(<li key="search-spinner">
|
2020-09-07 19:32:03 +03:00
|
|
|
<Spinner />
|
|
|
|
</li>);
|
2016-03-21 02:51:43 +03:00
|
|
|
}
|
|
|
|
|
2015-12-22 21:15:32 +03:00
|
|
|
if (!this.state.searchResults.next_batch) {
|
|
|
|
if (this.state.searchResults.results.length == 0) {
|
2015-12-22 18:18:50 +03:00
|
|
|
ret.push(<li key="search-top-marker">
|
2020-09-07 19:32:03 +03:00
|
|
|
<h2 className="mx_RoomView_topMarker">{ _t("No results") }</h2>
|
|
|
|
</li>,
|
2020-03-22 12:41:14 +03:00
|
|
|
);
|
2015-12-22 18:18:50 +03:00
|
|
|
} else {
|
|
|
|
ret.push(<li key="search-top-marker">
|
2020-09-07 19:32:03 +03:00
|
|
|
<h2 className="mx_RoomView_topMarker">{ _t("No more results") }</h2>
|
|
|
|
</li>,
|
2020-03-22 12:41:14 +03:00
|
|
|
);
|
2015-12-21 15:39:10 +03:00
|
|
|
}
|
2015-12-22 18:18:50 +03:00
|
|
|
}
|
2015-12-21 15:39:10 +03:00
|
|
|
|
2016-04-02 02:36:19 +03:00
|
|
|
// once dynamic content in the search results load, make the scrollPanel check
|
2016-02-22 20:19:04 +03:00
|
|
|
// the scroll offsets.
|
2019-03-06 14:27:16 +03:00
|
|
|
const onHeightChanged = () => {
|
2020-09-07 19:32:03 +03:00
|
|
|
const scrollPanel = this.searchResultsPanel.current;
|
2016-02-22 20:19:04 +03:00
|
|
|
if (scrollPanel) {
|
|
|
|
scrollPanel.checkScroll();
|
|
|
|
}
|
2017-01-20 17:22:27 +03:00
|
|
|
};
|
2016-02-22 20:19:04 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
let lastRoomId;
|
2015-12-10 16:58:06 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
for (let i = this.state.searchResults.results.length - 1; i >= 0; i--) {
|
|
|
|
const result = this.state.searchResults.results[i];
|
2015-12-22 21:15:32 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const mxEv = result.context.getEvent();
|
|
|
|
const roomId = mxEv.getRoomId();
|
2020-03-22 12:41:14 +03:00
|
|
|
const room = this.context.getRoom(roomId);
|
2020-06-19 00:45:42 +03:00
|
|
|
if (!room) {
|
|
|
|
// if we do not have the room in js-sdk stores then hide it as we cannot easily show it
|
|
|
|
// As per the spec, an all rooms search can create this condition,
|
|
|
|
// it happens with Seshat but not Synapse.
|
2020-06-19 00:49:39 +03:00
|
|
|
// It will make the result count not match the displayed count.
|
2020-06-19 00:45:42 +03:00
|
|
|
console.log("Hiding search result from an unknown room", roomId);
|
|
|
|
continue;
|
|
|
|
}
|
2015-12-18 19:42:46 +03:00
|
|
|
|
2019-12-21 00:43:06 +03:00
|
|
|
if (!haveTileForEvent(mxEv)) {
|
2015-12-22 18:18:50 +03:00
|
|
|
// XXX: can this ever happen? It will make the result count
|
|
|
|
// not match the displayed count.
|
|
|
|
continue;
|
|
|
|
}
|
2015-12-18 19:42:46 +03:00
|
|
|
|
2015-12-22 18:18:50 +03:00
|
|
|
if (this.state.searchScope === 'All') {
|
2020-06-19 00:45:42 +03:00
|
|
|
if (roomId !== lastRoomId) {
|
2016-01-06 19:46:29 +03:00
|
|
|
ret.push(<li key={mxEv.getId() + "-room"}>
|
2020-09-07 19:32:03 +03:00
|
|
|
<h2>{ _t("Room") }: { room.name }</h2>
|
|
|
|
</li>);
|
2015-12-22 18:18:50 +03:00
|
|
|
lastRoomId = roomId;
|
2015-11-30 20:15:57 +03:00
|
|
|
}
|
2015-12-22 18:18:50 +03:00
|
|
|
}
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const resultLink = "#/room/"+roomId+"/"+mxEv.getId();
|
2016-02-17 22:50:04 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
ret.push(<SearchResultTile
|
|
|
|
key={mxEv.getId()}
|
|
|
|
searchResult={result}
|
|
|
|
searchHighlights={this.state.searchHighlights}
|
|
|
|
resultLink={resultLink}
|
|
|
|
permalinkCreator={this.getPermalinkCreatorForRoom(room)}
|
|
|
|
onHeightChanged={onHeightChanged}
|
|
|
|
/>);
|
2015-11-30 20:15:57 +03:00
|
|
|
}
|
2015-12-22 18:18:50 +03:00
|
|
|
return ret;
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-12-22 18:18:50 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onPinnedClick = () => {
|
2018-05-27 04:32:23 +03:00
|
|
|
const nowShowingPinned = !this.state.showingPinned;
|
|
|
|
const roomId = this.state.room.roomId;
|
|
|
|
this.setState({showingPinned: nowShowingPinned, searching: false});
|
|
|
|
SettingsStore.setValue("PinnedEvents.isOpen", roomId, SettingLevel.ROOM_DEVICE, nowShowingPinned);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2017-09-29 00:32:51 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onSettingsClick = () => {
|
2020-09-08 12:19:51 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: Action.SetRightPanelPhase,
|
|
|
|
phase: RightPanelPhases.RoomSummary,
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onCancelClick = () => {
|
2016-04-16 03:00:10 +03:00
|
|
|
console.log("updateTint from onCancelClick");
|
2016-01-08 06:22:38 +03:00
|
|
|
this.updateTint();
|
2017-06-16 18:12:52 +03:00
|
|
|
if (this.state.forwardingEvent) {
|
2019-01-17 12:29:37 +03:00
|
|
|
dis.dispatch({
|
2017-06-16 18:12:52 +03:00
|
|
|
action: 'forward_event',
|
|
|
|
event: null,
|
|
|
|
});
|
|
|
|
}
|
2020-06-03 04:07:46 +03:00
|
|
|
dis.fire(Action.FocusComposer);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onLeaveClick = () => {
|
2019-01-17 12:29:37 +03:00
|
|
|
dis.dispatch({
|
2015-12-13 16:49:28 +03:00
|
|
|
action: 'leave_room',
|
2016-04-12 21:25:07 +03:00
|
|
|
room_id: this.state.room.roomId,
|
2015-12-13 16:49:28 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-12-16 19:06:29 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onForgetClick = () => {
|
2020-07-13 18:35:03 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'forget_room',
|
|
|
|
room_id: this.state.room.roomId,
|
2015-12-16 19:06:29 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-12-13 16:49:28 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRejectButtonClicked = ev => {
|
2015-11-30 20:15:57 +03:00
|
|
|
this.setState({
|
2017-10-11 19:56:17 +03:00
|
|
|
rejecting: true,
|
2015-11-30 20:15:57 +03:00
|
|
|
});
|
2020-09-07 19:32:03 +03:00
|
|
|
this.context.leave(this.state.roomId).then(() => {
|
2019-01-17 12:29:37 +03:00
|
|
|
dis.dispatch({ action: 'view_next_room' });
|
2020-09-07 19:32:03 +03:00
|
|
|
this.setState({
|
2017-10-11 19:56:17 +03:00
|
|
|
rejecting: false,
|
2015-11-30 20:15:57 +03:00
|
|
|
});
|
2020-09-07 19:32:03 +03:00
|
|
|
}, (error) => {
|
2016-02-15 21:59:44 +03:00
|
|
|
console.error("Failed to reject invite: %s", error);
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const msg = error.message ? error.message : JSON.stringify(error);
|
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2017-08-10 17:17:52 +03:00
|
|
|
Modal.createTrackedDialog('Failed to reject invite', '', ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Failed to reject invite"),
|
|
|
|
description: msg,
|
2016-02-15 21:59:44 +03:00
|
|
|
});
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
this.setState({
|
2015-11-30 20:15:57 +03:00
|
|
|
rejecting: false,
|
2017-10-11 19:56:17 +03:00
|
|
|
rejectError: error,
|
2015-11-30 20:15:57 +03:00
|
|
|
});
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRejectAndIgnoreClick = async () => {
|
2020-01-23 14:50:59 +03:00
|
|
|
this.setState({
|
|
|
|
rejecting: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
try {
|
2020-03-22 12:41:14 +03:00
|
|
|
const myMember = this.state.room.getMember(this.context.getUserId());
|
2020-01-23 14:50:59 +03:00
|
|
|
const inviteEvent = myMember.events.member;
|
2020-03-22 12:41:14 +03:00
|
|
|
const ignoredUsers = this.context.getIgnoredUsers();
|
2020-01-23 14:50:59 +03:00
|
|
|
ignoredUsers.push(inviteEvent.getSender()); // de-duped internally in the js-sdk
|
2020-03-22 12:41:14 +03:00
|
|
|
await this.context.setIgnoredUsers(ignoredUsers);
|
2020-01-23 14:50:59 +03:00
|
|
|
|
2020-03-22 12:41:14 +03:00
|
|
|
await this.context.leave(this.state.roomId);
|
2020-01-23 14:50:59 +03:00
|
|
|
dis.dispatch({ action: 'view_next_room' });
|
|
|
|
this.setState({
|
|
|
|
rejecting: false,
|
|
|
|
});
|
|
|
|
} catch (error) {
|
|
|
|
console.error("Failed to reject invite: %s", error);
|
|
|
|
|
|
|
|
const msg = error.message ? error.message : JSON.stringify(error);
|
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
Modal.createTrackedDialog('Failed to reject invite', '', ErrorDialog, {
|
|
|
|
title: _t("Failed to reject invite"),
|
|
|
|
description: msg,
|
|
|
|
});
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
this.setState({
|
2020-01-23 14:50:59 +03:00
|
|
|
rejecting: false,
|
|
|
|
rejectError: error,
|
|
|
|
});
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2020-01-23 14:50:59 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onRejectThreepidInviteButtonClicked = ev => {
|
2016-03-11 13:20:52 +03:00
|
|
|
// We can reject 3pid invites in the same way that we accept them,
|
|
|
|
// using /leave rather than /join. In the short term though, we
|
|
|
|
// just ignore them.
|
|
|
|
// https://github.com/vector-im/vector-web/issues/1134
|
2020-06-09 05:33:21 +03:00
|
|
|
dis.fire(Action.ViewRoomDirectory);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-03-10 18:56:58 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onSearchClick = () => {
|
2019-02-24 05:57:13 +03:00
|
|
|
this.setState({
|
|
|
|
searching: !this.state.searching,
|
|
|
|
showingPinned: false,
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onCancelSearchClick = () => {
|
2015-12-18 19:42:46 +03:00
|
|
|
this.setState({
|
|
|
|
searching: false,
|
|
|
|
searchResults: null,
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-12-18 19:42:46 +03:00
|
|
|
|
2016-02-03 11:03:10 +03:00
|
|
|
// jump down to the bottom of this room, where new events are arriving
|
2020-09-07 19:32:03 +03:00
|
|
|
private jumpToLiveTimeline = () => {
|
|
|
|
this.messagePanel.jumpToLiveTimeline();
|
2020-06-03 04:07:46 +03:00
|
|
|
dis.fire(Action.FocusComposer);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-12-18 19:42:46 +03:00
|
|
|
|
2016-02-24 20:26:34 +03:00
|
|
|
// jump up to wherever our read marker is
|
2020-09-07 19:32:03 +03:00
|
|
|
private jumpToReadMarker = () => {
|
|
|
|
this.messagePanel.jumpToReadMarker();
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-02-24 20:26:34 +03:00
|
|
|
|
|
|
|
// update the read marker to match the read-receipt
|
2020-09-07 19:32:03 +03:00
|
|
|
private forgetReadMarker = ev => {
|
2016-04-13 14:46:36 +03:00
|
|
|
ev.stopPropagation();
|
2020-09-07 19:32:03 +03:00
|
|
|
this.messagePanel.forgetReadMarker();
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-02-24 20:26:34 +03:00
|
|
|
|
|
|
|
// decide whether or not the top 'unread messages' bar should be shown
|
2020-09-07 19:32:03 +03:00
|
|
|
private updateTopUnreadMessagesBar = () => {
|
|
|
|
if (!this.messagePanel) {
|
2016-02-24 20:26:34 +03:00
|
|
|
return;
|
2017-01-20 17:22:27 +03:00
|
|
|
}
|
2016-02-24 20:26:34 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
const showBar = this.messagePanel.canJumpToReadMarker();
|
2016-03-10 18:55:03 +03:00
|
|
|
if (this.state.showTopUnreadMessagesBar != showBar) {
|
2019-03-12 18:33:05 +03:00
|
|
|
this.setState({showTopUnreadMessagesBar: showBar});
|
2016-03-10 18:55:03 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-02-24 20:26:34 +03:00
|
|
|
|
2015-12-11 00:34:10 +03:00
|
|
|
// get the current scroll position of the room, so that it can be
|
2016-02-01 19:31:12 +03:00
|
|
|
// restored when we switch back to it.
|
|
|
|
//
|
2020-09-07 19:32:03 +03:00
|
|
|
private getScrollState() {
|
|
|
|
const messagePanel = this.messagePanel;
|
2015-12-22 18:18:50 +03:00
|
|
|
if (!messagePanel) return null;
|
|
|
|
|
2016-02-04 19:17:03 +03:00
|
|
|
// if we're following the live timeline, we want to return null; that
|
|
|
|
// means that, if we switch back, we will jump to the read-up-to mark.
|
|
|
|
//
|
|
|
|
// That should be more intuitive than slavishly preserving the current
|
|
|
|
// scroll state, in the case where the room advances in the meantime
|
|
|
|
// (particularly in the case that the user reads some stuff on another
|
|
|
|
// device).
|
|
|
|
//
|
|
|
|
if (this.state.atEndOfLiveTimeline) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const scrollState = messagePanel.getScrollState();
|
2015-12-18 19:42:46 +03:00
|
|
|
|
2019-10-04 01:00:08 +03:00
|
|
|
// getScrollState on TimelinePanel *may* return null, so guard against that
|
|
|
|
if (!scrollState || scrollState.stuckAtBottom) {
|
2016-02-01 19:31:12 +03:00
|
|
|
// we don't really expect to be in this state, but it will
|
2016-02-03 11:03:10 +03:00
|
|
|
// occasionally happen when no scroll state has been set on the
|
|
|
|
// messagePanel (ie, we didn't have an initial event (so it's
|
|
|
|
// probably a new room), there has been no user-initiated scroll, and
|
|
|
|
// no read-receipts have arrived to update the scroll position).
|
|
|
|
//
|
|
|
|
// Return null, which will cause us to scroll to last unread on
|
|
|
|
// reload.
|
2016-02-01 19:31:12 +03:00
|
|
|
return null;
|
2015-12-10 19:26:36 +03:00
|
|
|
}
|
2016-02-01 19:31:12 +03:00
|
|
|
|
|
|
|
return {
|
2016-02-03 11:03:10 +03:00
|
|
|
focussedEvent: scrollState.trackedScrollToken,
|
2016-02-01 19:31:12 +03:00
|
|
|
pixelOffset: scrollState.pixelOffset,
|
|
|
|
};
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-12-10 19:26:36 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onResize = () => {
|
2015-12-13 07:32:48 +03:00
|
|
|
// It seems flexbox doesn't give us a way to constrain the auxPanel height to have
|
|
|
|
// a minimum of the height of the video element, whilst also capping it from pushing out the page
|
|
|
|
// so we have to do it via JS instead. In this implementation we cap the height by putting
|
|
|
|
// a maxHeight on the underlying remote video tag.
|
2016-01-10 16:03:37 +03:00
|
|
|
|
2016-01-15 18:53:53 +03:00
|
|
|
// header + footer + status + give us at least 120px of scrollback at all times.
|
2017-10-11 19:56:17 +03:00
|
|
|
let auxPanelMaxHeight = window.innerHeight -
|
2020-08-21 18:29:07 +03:00
|
|
|
(54 + // height of RoomHeader
|
2016-01-15 17:22:17 +03:00
|
|
|
36 + // height of the status area
|
2020-08-21 18:29:07 +03:00
|
|
|
51 + // minimum height of the message compmoser
|
2019-02-04 23:25:26 +03:00
|
|
|
120); // amount of desired scrollback
|
2016-01-10 16:03:37 +03:00
|
|
|
|
|
|
|
// XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
|
|
|
|
// but it's better than the video going missing entirely
|
|
|
|
if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
|
|
|
|
|
2016-03-08 15:16:34 +03:00
|
|
|
this.setState({auxPanelMaxHeight: auxPanelMaxHeight});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-12-13 07:32:48 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onFullscreenClick = () => {
|
2019-01-17 12:29:37 +03:00
|
|
|
dis.dispatch({
|
2015-12-15 03:01:47 +03:00
|
|
|
action: 'video_fullscreen',
|
2017-10-11 19:56:17 +03:00
|
|
|
fullscreen: true,
|
2015-12-15 03:01:47 +03:00
|
|
|
}, true);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-12-15 03:01:47 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onMuteAudioClick = () => {
|
|
|
|
const call = this.getCallForRoom();
|
2015-12-15 02:37:34 +03:00
|
|
|
if (!call) {
|
|
|
|
return;
|
|
|
|
}
|
2017-10-11 19:56:17 +03:00
|
|
|
const newState = !call.isMicrophoneMuted();
|
2015-12-15 02:37:34 +03:00
|
|
|
call.setMicrophoneMuted(newState);
|
2016-10-17 16:03:37 +03:00
|
|
|
this.forceUpdate(); // TODO: just update the voip buttons
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-12-15 02:37:34 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onMuteVideoClick = () => {
|
|
|
|
const call = this.getCallForRoom();
|
2015-12-15 02:37:34 +03:00
|
|
|
if (!call) {
|
|
|
|
return;
|
|
|
|
}
|
2017-10-11 19:56:17 +03:00
|
|
|
const newState = !call.isLocalVideoMuted();
|
2015-12-15 02:37:34 +03:00
|
|
|
call.setLocalVideoMuted(newState);
|
2016-10-17 16:03:37 +03:00
|
|
|
this.forceUpdate(); // TODO: just update the voip buttons
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-12-15 02:37:34 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onStatusBarVisible = () => {
|
2017-01-26 20:03:01 +03:00
|
|
|
if (this.unmounted) return;
|
2017-01-23 18:01:39 +03:00
|
|
|
this.setState({
|
|
|
|
statusBarVisible: true,
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2017-01-23 18:01:39 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private onStatusBarHidden = () => {
|
2018-01-05 15:03:46 +03:00
|
|
|
// This is currently not desired as it is annoying if it keeps expanding and collapsing
|
2019-01-22 16:50:31 +03:00
|
|
|
if (this.unmounted) return;
|
2017-01-23 18:01:39 +03:00
|
|
|
this.setState({
|
|
|
|
statusBarVisible: false,
|
2019-01-22 16:50:31 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2017-01-23 18:01:39 +03:00
|
|
|
|
2016-04-05 15:14:11 +03:00
|
|
|
/**
|
|
|
|
* called by the parent component when PageUp/Down/etc is pressed.
|
|
|
|
*
|
|
|
|
* We pass it down to the scroll panel.
|
|
|
|
*/
|
2020-09-07 19:32:03 +03:00
|
|
|
private handleScrollKey = ev => {
|
2017-10-11 19:56:17 +03:00
|
|
|
let panel;
|
2020-09-07 19:32:03 +03:00
|
|
|
if (this.searchResultsPanel.current) {
|
|
|
|
panel = this.searchResultsPanel.current;
|
|
|
|
} else if (this.messagePanel) {
|
|
|
|
panel = this.messagePanel;
|
2016-04-05 15:14:11 +03:00
|
|
|
}
|
|
|
|
|
2017-11-16 16:19:36 +03:00
|
|
|
if (panel) {
|
2016-04-05 15:14:11 +03:00
|
|
|
panel.handleScrollKey(ev);
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-04-05 15:14:11 +03:00
|
|
|
|
2016-04-12 21:25:07 +03:00
|
|
|
/**
|
|
|
|
* get any current call for this room
|
|
|
|
*/
|
2020-09-07 19:32:03 +03:00
|
|
|
private getCallForRoom() {
|
2016-04-12 21:25:07 +03:00
|
|
|
if (!this.state.room) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return CallHandler.getCallForRoom(this.state.room.roomId);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-04-12 21:25:07 +03:00
|
|
|
|
2016-03-08 15:16:34 +03:00
|
|
|
// this has to be a proper method rather than an unnamed function,
|
|
|
|
// otherwise react calls it with null on each update.
|
2020-09-07 19:32:03 +03:00
|
|
|
private gatherTimelinePanelRef = r => {
|
|
|
|
this.messagePanel = r;
|
2017-11-16 16:19:36 +03:00
|
|
|
if (r) {
|
2020-09-07 19:32:03 +03:00
|
|
|
console.log("updateTint from RoomView.gatherTimelinePanelRef");
|
2016-03-08 15:16:34 +03:00
|
|
|
this.updateTint();
|
2016-01-17 06:59:31 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-01-17 06:59:31 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
private getOldRoom() {
|
2019-03-27 04:22:24 +03:00
|
|
|
const createEvent = this.state.room.currentState.getStateEvents("m.room.create", "");
|
|
|
|
if (!createEvent || !createEvent.getContent()['predecessor']) return null;
|
|
|
|
|
2020-03-22 12:41:14 +03:00
|
|
|
return this.context.getRoom(createEvent.getContent()['predecessor']['room_id']);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-03-27 04:22:24 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
getHiddenHighlightCount() {
|
|
|
|
const oldRoom = this.getOldRoom();
|
2019-03-27 04:22:24 +03:00
|
|
|
if (!oldRoom) return 0;
|
|
|
|
return oldRoom.getUnreadNotificationCount('highlight');
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-03-27 04:22:24 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
onHiddenHighlightsClick = () => {
|
|
|
|
const oldRoom = this.getOldRoom();
|
2019-03-27 04:22:24 +03:00
|
|
|
if (!oldRoom) return;
|
|
|
|
dis.dispatch({action: "view_room", room_id: oldRoom.roomId});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-03-27 04:22:24 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
render() {
|
2016-02-10 21:27:40 +03:00
|
|
|
if (!this.state.room) {
|
2020-05-22 13:18:14 +03:00
|
|
|
const loading = !this.state.matrixClientIsReady || this.state.roomLoading || this.state.peekLoading;
|
2019-04-15 19:49:00 +03:00
|
|
|
if (loading) {
|
2020-05-19 15:17:34 +03:00
|
|
|
// Assume preview loading if we don't have a ready client or a room ID (still resolving the alias)
|
|
|
|
const previewLoading = !this.state.matrixClientIsReady || !this.state.roomId || this.state.peekLoading;
|
2017-05-30 13:21:33 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_RoomView">
|
2019-10-02 19:28:03 +03:00
|
|
|
<ErrorBoundary>
|
|
|
|
<RoomPreviewBar
|
|
|
|
canPreview={false}
|
2020-05-19 15:17:34 +03:00
|
|
|
previewLoading={previewLoading && !this.state.roomLoadError}
|
2019-10-02 19:28:03 +03:00
|
|
|
error={this.state.roomLoadError}
|
|
|
|
loading={loading}
|
|
|
|
joining={this.state.joining}
|
|
|
|
oobData={this.props.oobData}
|
|
|
|
/>
|
|
|
|
</ErrorBoundary>
|
2017-05-30 13:21:33 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else {
|
2020-09-07 19:32:03 +03:00
|
|
|
let inviterName = undefined;
|
2017-05-30 13:21:33 +03:00
|
|
|
if (this.props.oobData) {
|
|
|
|
inviterName = this.props.oobData.inviterName;
|
|
|
|
}
|
2020-09-12 04:49:48 +03:00
|
|
|
const invitedEmail = this.props.threepidInvite?.toEmail;
|
2016-03-01 21:23:57 +03:00
|
|
|
|
2017-05-30 13:21:33 +03:00
|
|
|
// We have no room object for this room, only the ID.
|
|
|
|
// We've got to this room by following a link, possibly a third party invite.
|
2017-06-16 13:10:55 +03:00
|
|
|
const roomAlias = this.state.roomAlias;
|
2017-05-30 13:21:33 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_RoomView">
|
2019-10-02 19:28:03 +03:00
|
|
|
<ErrorBoundary>
|
2020-05-19 15:17:34 +03:00
|
|
|
<RoomPreviewBar
|
|
|
|
onJoinClick={this.onJoinButtonClicked}
|
2019-10-02 19:28:03 +03:00
|
|
|
onForgetClick={this.onForgetClick}
|
|
|
|
onRejectClick={this.onRejectThreepidInviteButtonClicked}
|
|
|
|
canPreview={false} error={this.state.roomLoadError}
|
|
|
|
roomAlias={roomAlias}
|
|
|
|
joining={this.state.joining}
|
|
|
|
inviterName={inviterName}
|
|
|
|
invitedEmail={invitedEmail}
|
|
|
|
oobData={this.props.oobData}
|
2020-09-12 04:49:48 +03:00
|
|
|
signUrl={this.props.threepidInvite?.signUrl}
|
2019-10-02 19:28:03 +03:00
|
|
|
room={this.state.room}
|
|
|
|
/>
|
|
|
|
</ErrorBoundary>
|
2017-05-30 13:21:33 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2015-11-30 20:15:57 +03:00
|
|
|
}
|
|
|
|
|
2018-08-22 18:35:58 +03:00
|
|
|
const myMembership = this.state.room.getMyMembership();
|
|
|
|
if (myMembership == 'invite') {
|
2015-11-30 20:15:57 +03:00
|
|
|
if (this.state.joining || this.state.rejecting) {
|
|
|
|
return (
|
2019-10-02 19:28:03 +03:00
|
|
|
<ErrorBoundary>
|
|
|
|
<RoomPreviewBar
|
2019-04-15 19:49:00 +03:00
|
|
|
canPreview={false}
|
|
|
|
error={this.state.roomLoadError}
|
|
|
|
joining={this.state.joining}
|
|
|
|
rejecting={this.state.rejecting}
|
|
|
|
/>
|
2019-10-02 19:28:03 +03:00
|
|
|
</ErrorBoundary>
|
2015-11-30 20:15:57 +03:00
|
|
|
);
|
|
|
|
} else {
|
2020-03-22 12:41:14 +03:00
|
|
|
const myUserId = this.context.credentials.userId;
|
2018-08-22 18:35:58 +03:00
|
|
|
const myMember = this.state.room.getMember(myUserId);
|
2020-05-10 13:17:21 +03:00
|
|
|
const inviteEvent = myMember ? myMember.events.member : null;
|
|
|
|
let inviterName = _t("Unknown");
|
|
|
|
if (inviteEvent) {
|
|
|
|
inviterName = inviteEvent.sender ? inviteEvent.sender.name : inviteEvent.getSender();
|
|
|
|
}
|
2016-01-18 20:39:23 +03:00
|
|
|
|
|
|
|
// We deliberately don't try to peek into invites, even if we have permission to peek
|
|
|
|
// as they could be a spam vector.
|
|
|
|
// XXX: in future we could give the option of a 'Preview' button which lets them view anyway.
|
2016-01-18 23:15:12 +03:00
|
|
|
|
2016-03-17 21:38:25 +03:00
|
|
|
// We have a regular invite for this room.
|
2015-11-30 20:15:57 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_RoomView">
|
2019-10-02 19:28:03 +03:00
|
|
|
<ErrorBoundary>
|
2020-01-23 14:50:59 +03:00
|
|
|
<RoomPreviewBar
|
|
|
|
onJoinClick={this.onJoinButtonClicked}
|
2019-10-02 19:28:03 +03:00
|
|
|
onForgetClick={this.onForgetClick}
|
|
|
|
onRejectClick={this.onRejectButtonClicked}
|
2020-01-23 14:50:59 +03:00
|
|
|
onRejectAndIgnoreClick={this.onRejectAndIgnoreClick}
|
2019-10-02 19:28:03 +03:00
|
|
|
inviterName={inviterName}
|
|
|
|
canPreview={false}
|
|
|
|
joining={this.state.joining}
|
|
|
|
room={this.state.room}
|
|
|
|
/>
|
|
|
|
</ErrorBoundary>
|
2015-11-30 20:15:57 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-02-08 19:43:08 +03:00
|
|
|
}
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2016-02-08 19:43:08 +03:00
|
|
|
// We have successfully loaded this room, and are not previewing.
|
|
|
|
// Display the "normal" room view.
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
const call = this.getCallForRoom();
|
2017-10-11 19:56:17 +03:00
|
|
|
let inCall = false;
|
2016-02-08 21:04:54 +03:00
|
|
|
if (call && (this.state.callState !== 'ended' && this.state.callState !== 'ringing')) {
|
|
|
|
inCall = true;
|
|
|
|
}
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
const scrollheaderClasses = classNames({
|
2016-02-08 19:43:08 +03:00
|
|
|
mx_RoomView_scrollheader: true,
|
|
|
|
});
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
let statusBar;
|
2017-01-26 21:07:42 +03:00
|
|
|
let isStatusAreaExpanded = true;
|
2016-02-08 19:43:08 +03:00
|
|
|
|
2019-04-01 18:42:41 +03:00
|
|
|
if (ContentMessages.sharedInstance().getCurrentUploads().length > 0) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const UploadBar = sdk.getComponent('structures.UploadBar');
|
2017-01-20 17:22:27 +03:00
|
|
|
statusBar = <UploadBar room={this.state.room} />;
|
2016-02-08 19:43:08 +03:00
|
|
|
} else if (!this.state.searchResults) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const RoomStatusBar = sdk.getComponent('structures.RoomStatusBar');
|
2017-01-26 21:07:42 +03:00
|
|
|
isStatusAreaExpanded = this.state.statusBarVisible;
|
2016-02-08 21:04:54 +03:00
|
|
|
statusBar = <RoomStatusBar
|
|
|
|
room={this.state.room}
|
2017-10-12 06:15:00 +03:00
|
|
|
sentMessageAndIsAlone={this.state.isAlone}
|
2016-02-08 21:04:54 +03:00
|
|
|
hasActiveCall={inCall}
|
2018-10-15 23:35:36 +03:00
|
|
|
isPeeking={myMembership !== "join"}
|
2017-10-12 06:15:00 +03:00
|
|
|
onInviteClick={this.onInviteButtonClick}
|
|
|
|
onStopWarningClick={this.onStopAloneWarningClick}
|
2017-01-23 18:01:39 +03:00
|
|
|
onVisible={this.onStatusBarVisible}
|
|
|
|
onHidden={this.onStatusBarHidden}
|
|
|
|
/>;
|
2016-02-08 19:43:08 +03:00
|
|
|
}
|
2015-11-30 20:15:57 +03:00
|
|
|
|
2019-01-29 03:21:33 +03:00
|
|
|
const roomVersionRecommendation = this.state.upgradeRecommendation;
|
2018-08-17 16:54:43 +03:00
|
|
|
const showRoomUpgradeBar = (
|
2019-01-29 03:21:33 +03:00
|
|
|
roomVersionRecommendation &&
|
|
|
|
roomVersionRecommendation.needsUpgrade &&
|
2020-03-22 12:41:14 +03:00
|
|
|
this.state.room.userMayUpgradeRoom(this.context.credentials.userId)
|
2018-08-17 16:54:43 +03:00
|
|
|
);
|
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
const hiddenHighlightCount = this.getHiddenHighlightCount();
|
2019-03-27 04:22:24 +03:00
|
|
|
|
2017-04-21 14:56:59 +03:00
|
|
|
let aux = null;
|
2019-04-10 18:49:45 +03:00
|
|
|
let previewBar;
|
2017-05-30 13:20:41 +03:00
|
|
|
let hideCancel = false;
|
2019-12-06 03:47:18 +03:00
|
|
|
let forceHideRightPanel = false;
|
2020-09-07 19:32:03 +03:00
|
|
|
if (this.state.forwardingEvent) {
|
2017-06-16 18:12:52 +03:00
|
|
|
aux = <ForwardMessage onCancelClick={this.onCancelClick} />;
|
2017-04-21 14:56:59 +03:00
|
|
|
} else if (this.state.searching) {
|
2017-05-30 13:20:41 +03:00
|
|
|
hideCancel = true; // has own cancel
|
2020-09-07 19:32:03 +03:00
|
|
|
aux = <SearchBar
|
|
|
|
searchInProgress={this.state.searchInProgress}
|
|
|
|
onCancelClick={this.onCancelSearchClick}
|
|
|
|
onSearch={this.onSearch}
|
|
|
|
/>;
|
2018-08-17 16:54:43 +03:00
|
|
|
} else if (showRoomUpgradeBar) {
|
2019-01-29 03:21:33 +03:00
|
|
|
aux = <RoomUpgradeWarningBar room={this.state.room} recommendation={roomVersionRecommendation} />;
|
2018-08-17 16:54:43 +03:00
|
|
|
hideCancel = true;
|
2017-09-29 00:32:51 +03:00
|
|
|
} else if (this.state.showingPinned) {
|
|
|
|
hideCancel = true; // has own cancel
|
2017-09-29 02:00:26 +03:00
|
|
|
aux = <PinnedEventsPanel room={this.state.room} onCancelClick={this.onPinnedClick} />;
|
2018-08-22 18:35:58 +03:00
|
|
|
} else if (myMembership !== "join") {
|
2016-03-18 19:06:36 +03:00
|
|
|
// We do have a room object for this room, but we're not currently in it.
|
|
|
|
// We may have a 3rd party invite to it.
|
2020-09-07 19:32:03 +03:00
|
|
|
let inviterName = undefined;
|
2016-03-10 18:56:58 +03:00
|
|
|
if (this.props.oobData) {
|
|
|
|
inviterName = this.props.oobData.inviterName;
|
|
|
|
}
|
2020-09-12 04:49:48 +03:00
|
|
|
const invitedEmail = this.props.threepidInvite?.toEmail;
|
2017-05-30 13:20:41 +03:00
|
|
|
hideCancel = true;
|
2019-04-10 18:49:45 +03:00
|
|
|
previewBar = (
|
2020-09-07 19:32:03 +03:00
|
|
|
<RoomPreviewBar
|
|
|
|
onJoinClick={this.onJoinButtonClicked}
|
|
|
|
onForgetClick={this.onForgetClick}
|
|
|
|
onRejectClick={this.onRejectThreepidInviteButtonClicked}
|
|
|
|
joining={this.state.joining}
|
|
|
|
inviterName={inviterName}
|
|
|
|
invitedEmail={invitedEmail}
|
|
|
|
oobData={this.props.oobData}
|
|
|
|
canPreview={this.state.canPeek}
|
|
|
|
room={this.state.room}
|
2016-02-09 19:55:03 +03:00
|
|
|
/>
|
2016-02-08 19:43:08 +03:00
|
|
|
);
|
2019-04-12 13:47:52 +03:00
|
|
|
if (!this.state.canPeek) {
|
|
|
|
return (
|
|
|
|
<div className="mx_RoomView">
|
|
|
|
{ previewBar }
|
|
|
|
</div>
|
|
|
|
);
|
2019-04-17 20:29:39 +03:00
|
|
|
} else {
|
2019-12-06 03:47:18 +03:00
|
|
|
forceHideRightPanel = true;
|
2019-04-12 13:47:52 +03:00
|
|
|
}
|
2019-03-27 04:22:24 +03:00
|
|
|
} else if (hiddenHighlightCount > 0) {
|
|
|
|
aux = (
|
2020-09-07 19:32:03 +03:00
|
|
|
<AccessibleButton
|
|
|
|
element="div"
|
|
|
|
className="mx_RoomView_auxPanel_hiddenHighlights"
|
|
|
|
onClick={this.onHiddenHighlightsClick}
|
|
|
|
>
|
2019-03-27 04:22:24 +03:00
|
|
|
{_t(
|
|
|
|
"You have %(count)s unread notifications in a prior version of this room.",
|
|
|
|
{count: hiddenHighlightCount},
|
|
|
|
)}
|
2019-03-27 22:14:31 +03:00
|
|
|
</AccessibleButton>
|
2019-03-27 04:22:24 +03:00
|
|
|
);
|
2016-02-08 19:43:08 +03:00
|
|
|
}
|
2015-12-18 20:23:46 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const auxPanel = (
|
2020-09-02 13:13:00 +03:00
|
|
|
<AuxPanel
|
|
|
|
room={this.state.room}
|
|
|
|
fullHeight={false}
|
|
|
|
userId={this.context.credentials.userId}
|
|
|
|
conferenceHandler={this.props.ConferenceHandler}
|
|
|
|
draggingFile={this.state.draggingFile}
|
|
|
|
displayConfCallNotification={this.state.displayConfCallNotification}
|
|
|
|
maxHeight={this.state.auxPanelMaxHeight}
|
|
|
|
showApps={this.state.showApps}
|
|
|
|
hideAppsDrawer={false}
|
|
|
|
onResize={this.onResize}
|
|
|
|
resizeNotifier={this.props.resizeNotifier}
|
|
|
|
>
|
2016-02-23 18:46:27 +03:00
|
|
|
{ aux }
|
|
|
|
</AuxPanel>
|
|
|
|
);
|
2015-12-15 03:01:47 +03:00
|
|
|
|
2018-10-27 06:50:35 +03:00
|
|
|
let messageComposer; let searchInfo;
|
2017-10-11 19:56:17 +03:00
|
|
|
const canSpeak = (
|
2016-02-08 19:43:08 +03:00
|
|
|
// joined and not showing search results
|
2018-10-15 23:26:02 +03:00
|
|
|
myMembership === 'join' && !this.state.searchResults
|
2016-02-08 19:43:08 +03:00
|
|
|
);
|
|
|
|
if (canSpeak) {
|
2020-01-06 03:13:16 +03:00
|
|
|
const MessageComposer = sdk.getComponent('rooms.MessageComposer');
|
|
|
|
messageComposer =
|
|
|
|
<MessageComposer
|
|
|
|
room={this.state.room}
|
|
|
|
callState={this.state.callState}
|
|
|
|
disabled={this.props.disabled}
|
|
|
|
showApps={this.state.showApps}
|
|
|
|
e2eStatus={this.state.e2eStatus}
|
2020-07-31 15:02:40 +03:00
|
|
|
resizeNotifier={this.props.resizeNotifier}
|
2020-09-07 19:32:03 +03:00
|
|
|
permalinkCreator={this.getPermalinkCreatorForRoom(this.state.room)}
|
2020-01-06 03:13:16 +03:00
|
|
|
/>;
|
2016-02-08 19:43:08 +03:00
|
|
|
}
|
2015-12-15 02:37:34 +03:00
|
|
|
|
2016-02-08 19:43:08 +03:00
|
|
|
// TODO: Why aren't we storing the term/scope/count in this format
|
|
|
|
// in this.state if this is what RoomHeader desires?
|
|
|
|
if (this.state.searchResults) {
|
|
|
|
searchInfo = {
|
2017-10-11 19:56:17 +03:00
|
|
|
searchTerm: this.state.searchTerm,
|
|
|
|
searchScope: this.state.searchScope,
|
|
|
|
searchCount: this.state.searchResults.count,
|
2016-02-08 19:43:08 +03:00
|
|
|
};
|
|
|
|
}
|
2015-12-15 02:37:34 +03:00
|
|
|
|
2016-02-08 21:04:54 +03:00
|
|
|
if (inCall) {
|
2020-07-08 18:30:50 +03:00
|
|
|
let zoomButton; let videoMuteButton;
|
2016-02-08 19:43:08 +03:00
|
|
|
|
|
|
|
if (call.type === "video") {
|
|
|
|
zoomButton = (
|
2017-10-11 19:56:17 +03:00
|
|
|
<div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={_t("Fill screen")}>
|
2020-09-07 19:32:03 +03:00
|
|
|
<TintableSvg
|
|
|
|
src={require("../../../res/img/element-icons/call/fullscreen.svg")}
|
|
|
|
width="29"
|
|
|
|
height="22"
|
|
|
|
style={{ marginTop: 1, marginRight: 4 }}
|
|
|
|
/>
|
2016-02-08 19:43:08 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
videoMuteButton =
|
|
|
|
<div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
|
2020-09-07 19:32:03 +03:00
|
|
|
<TintableSvg
|
|
|
|
src={call.isLocalVideoMuted() ?
|
|
|
|
require("../../../res/img/element-icons/call/video-muted.svg") :
|
|
|
|
require("../../../res/img/element-icons/call/video-call.svg")}
|
|
|
|
alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")}
|
|
|
|
width=""
|
|
|
|
height="27"
|
|
|
|
/>
|
2017-01-20 17:22:27 +03:00
|
|
|
</div>;
|
2015-12-15 02:37:34 +03:00
|
|
|
}
|
2020-07-08 18:30:50 +03:00
|
|
|
const voiceMuteButton =
|
2016-02-08 19:43:08 +03:00
|
|
|
<div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
|
2020-09-07 19:32:03 +03:00
|
|
|
<TintableSvg
|
|
|
|
src={call.isMicrophoneMuted() ?
|
|
|
|
require("../../../res/img/element-icons/call/voice-muted.svg") :
|
|
|
|
require("../../../res/img/element-icons/call/voice-unmuted.svg")}
|
|
|
|
alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
|
|
|
|
width="21"
|
|
|
|
height="26"
|
|
|
|
/>
|
2017-01-20 17:22:27 +03:00
|
|
|
</div>;
|
2015-12-15 02:37:34 +03:00
|
|
|
|
2016-02-08 21:04:54 +03:00
|
|
|
// wrap the existing status bar into a 'callStatusBar' which adds more knobs.
|
2016-02-08 19:43:08 +03:00
|
|
|
statusBar =
|
|
|
|
<div className="mx_RoomView_callStatusBar">
|
|
|
|
{ voiceMuteButton }
|
|
|
|
{ videoMuteButton }
|
|
|
|
{ zoomButton }
|
|
|
|
{ statusBar }
|
2017-01-20 17:22:27 +03:00
|
|
|
</div>;
|
2016-02-08 19:43:08 +03:00
|
|
|
}
|
2016-02-01 19:31:12 +03:00
|
|
|
|
2016-02-08 19:43:08 +03:00
|
|
|
// if we have search results, we keep the messagepanel (so that it preserves its
|
|
|
|
// scroll state), but hide it.
|
2017-10-11 19:56:17 +03:00
|
|
|
let searchResultsPanel;
|
|
|
|
let hideMessagePanel = false;
|
2016-02-08 19:43:08 +03:00
|
|
|
|
|
|
|
if (this.state.searchResults) {
|
2019-01-15 20:45:56 +03:00
|
|
|
// show searching spinner
|
|
|
|
if (this.state.searchResults.results === undefined) {
|
2020-09-07 19:32:03 +03:00
|
|
|
searchResultsPanel = (
|
|
|
|
<div className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner" />
|
|
|
|
);
|
2019-01-15 20:45:56 +03:00
|
|
|
} else {
|
|
|
|
searchResultsPanel = (
|
2020-06-16 02:51:11 +03:00
|
|
|
<ScrollPanel
|
2020-09-07 19:32:03 +03:00
|
|
|
ref={this.searchResultsPanel}
|
2020-06-16 02:51:11 +03:00
|
|
|
className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel mx_GroupLayout"
|
2019-01-15 20:45:56 +03:00
|
|
|
onFillRequest={this.onSearchResultsFillRequest}
|
2019-03-18 16:05:56 +03:00
|
|
|
resizeNotifier={this.props.resizeNotifier}
|
2019-01-15 20:45:56 +03:00
|
|
|
>
|
2020-09-07 19:32:03 +03:00
|
|
|
<li className={scrollheaderClasses} />
|
2019-01-15 20:45:56 +03:00
|
|
|
{ this.getSearchResultTiles() }
|
|
|
|
</ScrollPanel>
|
|
|
|
);
|
|
|
|
}
|
2016-02-08 19:43:08 +03:00
|
|
|
hideMessagePanel = true;
|
|
|
|
}
|
2015-12-22 18:18:50 +03:00
|
|
|
|
2017-06-08 17:47:41 +03:00
|
|
|
const shouldHighlight = this.state.isInitialEventHighlighted;
|
2017-06-08 16:17:49 +03:00
|
|
|
let highlightedEventId = null;
|
|
|
|
if (this.state.forwardingEvent) {
|
|
|
|
highlightedEventId = this.state.forwardingEvent.getId();
|
|
|
|
} else if (shouldHighlight) {
|
2017-06-08 17:47:41 +03:00
|
|
|
highlightedEventId = this.state.initialEventId;
|
2017-06-08 16:17:49 +03:00
|
|
|
}
|
|
|
|
|
2020-05-26 17:56:16 +03:00
|
|
|
const messagePanelClassNames = classNames(
|
|
|
|
"mx_RoomView_messagePanel",
|
|
|
|
{
|
|
|
|
"mx_IRCLayout": this.state.useIRCLayout,
|
|
|
|
"mx_GroupLayout": !this.state.useIRCLayout,
|
|
|
|
});
|
|
|
|
|
2019-11-26 04:14:03 +03:00
|
|
|
// console.info("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
|
2017-10-11 19:56:17 +03:00
|
|
|
const messagePanel = (
|
2019-12-08 15:16:17 +03:00
|
|
|
<TimelinePanel
|
2020-09-07 19:32:03 +03:00
|
|
|
ref={this.gatherTimelinePanelRef}
|
2017-08-30 15:32:07 +03:00
|
|
|
timelineSet={this.state.room.getUnfilteredTimelineSet()}
|
2020-03-20 12:29:59 +03:00
|
|
|
showReadReceipts={this.state.showReadReceipts}
|
2017-10-12 03:43:24 +03:00
|
|
|
manageReadReceipts={!this.state.isPeeking}
|
|
|
|
manageReadMarkers={!this.state.isPeeking}
|
2017-08-30 15:32:07 +03:00
|
|
|
hidden={hideMessagePanel}
|
|
|
|
highlightedEventId={highlightedEventId}
|
|
|
|
eventId={this.state.initialEventId}
|
|
|
|
eventPixelOffset={this.state.initialEventPixelOffset}
|
2017-10-11 19:56:17 +03:00
|
|
|
onScroll={this.onMessageListScroll}
|
2020-09-07 19:32:03 +03:00
|
|
|
onReadMarkerUpdated={this.updateTopUnreadMessagesBar}
|
2017-10-11 19:56:17 +03:00
|
|
|
showUrlPreview = {this.state.showUrlPreview}
|
2020-05-26 17:56:16 +03:00
|
|
|
className={messagePanelClassNames}
|
2018-09-17 20:27:25 +03:00
|
|
|
membersLoaded={this.state.membersLoaded}
|
2020-09-07 19:32:03 +03:00
|
|
|
permalinkCreator={this.getPermalinkCreatorForRoom(this.state.room)}
|
2019-03-12 18:36:12 +03:00
|
|
|
resizeNotifier={this.props.resizeNotifier}
|
2019-05-21 19:23:19 +03:00
|
|
|
showReactions={true}
|
2020-05-26 17:56:16 +03:00
|
|
|
useIRCLayout={this.state.useIRCLayout}
|
2016-02-10 21:27:40 +03:00
|
|
|
/>);
|
2016-02-08 19:43:08 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
let topUnreadMessagesBar = null;
|
2019-12-26 23:32:25 +03:00
|
|
|
// Do not show TopUnreadMessagesBar if we have search results showing, it makes no sense
|
|
|
|
if (this.state.showTopUnreadMessagesBar && !this.state.searchResults) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
|
2020-09-07 19:32:03 +03:00
|
|
|
topUnreadMessagesBar = (
|
|
|
|
<TopUnreadMessagesBar onScrollUpClick={this.jumpToReadMarker} onCloseClick={this.forgetReadMarker} />
|
|
|
|
);
|
2016-02-24 20:26:34 +03:00
|
|
|
}
|
2019-01-22 16:50:16 +03:00
|
|
|
let jumpToBottom;
|
2019-12-26 23:32:25 +03:00
|
|
|
// Do not show JumpToBottomButton if we have search results showing, it makes no sense
|
|
|
|
if (!this.state.atEndOfLiveTimeline && !this.state.searchResults) {
|
2019-01-22 16:50:16 +03:00
|
|
|
const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton');
|
|
|
|
jumpToBottom = (<JumpToBottomButton
|
2020-07-03 21:27:55 +03:00
|
|
|
highlight={this.state.room.getUnreadNotificationCount('highlight') > 0}
|
2019-01-22 16:50:16 +03:00
|
|
|
numUnreadMessages={this.state.numUnreadMessages}
|
|
|
|
onScrollToBottomClick={this.jumpToLiveTimeline}
|
|
|
|
/>);
|
|
|
|
}
|
2017-10-25 17:15:49 +03:00
|
|
|
|
2020-09-07 19:32:03 +03:00
|
|
|
const statusBarAreaClass = classNames("mx_RoomView_statusArea", {
|
|
|
|
"mx_RoomView_statusArea_expanded": isStatusAreaExpanded,
|
|
|
|
});
|
|
|
|
|
|
|
|
const fadableSectionClasses = classNames("mx_RoomView_body", "mx_fadable", {
|
|
|
|
"mx_fadable_faded": this.props.disabled,
|
|
|
|
});
|
2016-02-24 20:26:34 +03:00
|
|
|
|
2020-03-20 03:18:24 +03:00
|
|
|
const showRightPanel = !forceHideRightPanel && this.state.room && this.state.showRightPanel;
|
2019-12-06 03:47:18 +03:00
|
|
|
const rightPanel = showRightPanel
|
2020-08-28 12:45:20 +03:00
|
|
|
? <RightPanel room={this.state.room} resizeNotifier={this.props.resizeNotifier} />
|
2019-12-06 03:47:18 +03:00
|
|
|
: null;
|
2018-10-30 20:13:17 +03:00
|
|
|
|
2020-03-20 12:29:59 +03:00
|
|
|
const timelineClasses = classNames("mx_RoomView_timeline", {
|
|
|
|
mx_RoomView_timeline_rr_enabled: this.state.showReadReceipts,
|
|
|
|
});
|
|
|
|
|
2020-04-14 17:24:41 +03:00
|
|
|
const mainClasses = classNames("mx_RoomView", {
|
|
|
|
mx_RoomView_inCall: inCall,
|
|
|
|
});
|
|
|
|
|
2016-02-08 19:43:08 +03:00
|
|
|
return (
|
2019-12-17 20:26:12 +03:00
|
|
|
<RoomContext.Provider value={this.state}>
|
2020-09-07 19:32:03 +03:00
|
|
|
<main className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
|
2019-12-17 20:26:12 +03:00
|
|
|
<ErrorBoundary>
|
|
|
|
<RoomHeader
|
|
|
|
room={this.state.room}
|
|
|
|
searchInfo={searchInfo}
|
|
|
|
oobData={this.props.oobData}
|
|
|
|
inRoom={myMembership === 'join'}
|
|
|
|
onSearchClick={this.onSearchClick}
|
|
|
|
onSettingsClick={this.onSettingsClick}
|
|
|
|
onPinnedClick={this.onPinnedClick}
|
|
|
|
onCancelClick={(aux && !hideCancel) ? this.onCancelClick : null}
|
|
|
|
onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
|
|
|
|
onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
|
|
|
|
e2eStatus={this.state.e2eStatus}
|
|
|
|
/>
|
2020-09-02 14:00:35 +03:00
|
|
|
<MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
|
2019-12-17 20:26:12 +03:00
|
|
|
<div className={fadableSectionClasses}>
|
|
|
|
{auxPanel}
|
2020-03-20 12:29:59 +03:00
|
|
|
<div className={timelineClasses}>
|
2019-12-17 20:26:12 +03:00
|
|
|
{topUnreadMessagesBar}
|
|
|
|
{jumpToBottom}
|
|
|
|
{messagePanel}
|
|
|
|
{searchResultsPanel}
|
2019-10-02 19:28:03 +03:00
|
|
|
</div>
|
2019-12-17 20:26:12 +03:00
|
|
|
<div className={statusBarAreaClass}>
|
|
|
|
<div className="mx_RoomView_statusAreaBox">
|
|
|
|
<div className="mx_RoomView_statusAreaBox_line" />
|
|
|
|
{statusBar}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{previewBar}
|
|
|
|
{messageComposer}
|
2018-10-30 20:13:17 +03:00
|
|
|
</div>
|
2019-12-17 20:26:12 +03:00
|
|
|
</MainSplit>
|
|
|
|
</ErrorBoundary>
|
|
|
|
</main>
|
|
|
|
</RoomContext.Provider>
|
2016-02-08 19:43:08 +03:00
|
|
|
);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
|
|
|
}
|