2016-11-03 21:42:26 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2017-04-26 15:48:03 +03:00
|
|
|
Copyright 2017 Vector Creations Ltd
|
2018-08-03 20:02:09 +03:00
|
|
|
Copyright 2017, 2018 New Vector Ltd
|
2016-11-03 21:42:26 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import * as Matrix from 'matrix-js-sdk';
|
|
|
|
import React from 'react';
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2018-02-14 19:40:58 +03:00
|
|
|
import { DragDropContext } from 'react-beautiful-dnd';
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2017-12-01 13:44:00 +03:00
|
|
|
import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
|
2016-11-03 21:42:26 +03:00
|
|
|
import Notifier from '../../Notifier';
|
|
|
|
import PageTypes from '../../PageTypes';
|
2017-04-28 20:21:22 +03:00
|
|
|
import CallMediaHandler from '../../CallMediaHandler';
|
2016-11-03 21:42:26 +03:00
|
|
|
import sdk from '../../index';
|
2017-01-25 17:59:18 +03:00
|
|
|
import dis from '../../dispatcher';
|
2017-05-15 16:56:05 +03:00
|
|
|
import sessionStore from '../../stores/SessionStore';
|
2017-05-31 17:13:27 +03:00
|
|
|
import MatrixClientPeg from '../../MatrixClientPeg';
|
2017-10-29 10:43:52 +03:00
|
|
|
import SettingsStore from "../../settings/SettingsStore";
|
2018-08-07 19:04:37 +03:00
|
|
|
import RoomListStore from "../../stores/RoomListStore";
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2018-02-14 19:40:58 +03:00
|
|
|
import TagOrderActions from '../../actions/TagOrderActions';
|
|
|
|
import RoomListActions from '../../actions/RoomListActions';
|
2018-09-24 18:07:42 +03:00
|
|
|
import ResizeHandle from '../views/elements/ResizeHandle';
|
2019-01-21 22:32:57 +03:00
|
|
|
import {Resizer, CollapseDistributor} from '../../resizer';
|
2018-08-07 19:04:37 +03:00
|
|
|
// We need to fetch each pinned message individually (if we don't already have it)
|
|
|
|
// so each pinned message may trigger a request. Limit the number per room for sanity.
|
|
|
|
// NB. this is just for server notices rather than pinned messages in general.
|
|
|
|
const MAX_PINNED_NOTICES_PER_ROOM = 2;
|
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
/**
|
|
|
|
* This is what our MatrixChat shows when we are logged in. The precise view is
|
|
|
|
* determined by the page_type property.
|
|
|
|
*
|
|
|
|
* Currently it's very tightly coupled with MatrixChat. We should try to do
|
|
|
|
* something about that.
|
2016-11-03 21:54:30 +03:00
|
|
|
*
|
|
|
|
* Components mounted below us can access the matrix client via the react context.
|
2016-11-03 21:42:26 +03:00
|
|
|
*/
|
2017-12-06 18:01:16 +03:00
|
|
|
const LoggedInView = React.createClass({
|
2016-11-03 21:42:26 +03:00
|
|
|
displayName: 'LoggedInView',
|
|
|
|
|
|
|
|
propTypes: {
|
2017-12-26 04:03:18 +03:00
|
|
|
matrixClient: PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
|
|
|
|
page_type: PropTypes.string.isRequired,
|
|
|
|
onRoomCreated: PropTypes.func,
|
|
|
|
onUserSettingsClose: PropTypes.func,
|
2016-11-03 21:42:26 +03:00
|
|
|
|
2017-04-28 15:22:55 +03:00
|
|
|
// Called with the credentials of a registered user (if they were a ROU that
|
|
|
|
// transitioned to PWLU)
|
2017-12-26 04:03:18 +03:00
|
|
|
onRegistered: PropTypes.func,
|
2018-12-18 12:34:26 +03:00
|
|
|
collapsedRhs: PropTypes.bool,
|
2017-02-03 14:48:24 +03:00
|
|
|
|
2018-10-19 22:30:38 +03:00
|
|
|
// Used by the RoomView to handle joining rooms
|
|
|
|
viaServers: PropTypes.arrayOf(PropTypes.string),
|
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
// and lots and lots of other stuff.
|
|
|
|
},
|
|
|
|
|
2016-11-03 21:54:30 +03:00
|
|
|
childContextTypes: {
|
2017-12-26 04:03:18 +03:00
|
|
|
matrixClient: PropTypes.instanceOf(Matrix.MatrixClient),
|
|
|
|
authCache: PropTypes.object,
|
2016-11-03 21:54:30 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getChildContext: function() {
|
|
|
|
return {
|
|
|
|
matrixClient: this._matrixClient,
|
2017-02-21 04:03:22 +03:00
|
|
|
authCache: {
|
|
|
|
auth: {},
|
|
|
|
lastUpdate: 0,
|
|
|
|
},
|
2016-11-03 21:54:30 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2017-06-01 05:00:30 +03:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
// use compact timeline view
|
2017-10-29 10:43:52 +03:00
|
|
|
useCompactLayout: SettingsStore.getValue('useCompactLayout'),
|
2018-08-07 19:04:37 +03:00
|
|
|
// any currently active server notice events
|
|
|
|
serverNoticeEvents: [],
|
2017-06-01 05:00:30 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2018-09-24 18:07:42 +03:00
|
|
|
componentDidMount: function() {
|
2018-10-16 19:43:40 +03:00
|
|
|
this.resizer = this._createResizer();
|
|
|
|
this.resizer.attach();
|
|
|
|
this._loadResizerPreferences();
|
2018-09-24 18:07:42 +03:00
|
|
|
},
|
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
componentWillMount: function() {
|
2016-11-03 21:54:30 +03:00
|
|
|
// stash the MatrixClient in case we log out before we are unmounted
|
|
|
|
this._matrixClient = this.props.matrixClient;
|
|
|
|
|
2017-05-25 03:01:40 +03:00
|
|
|
CallMediaHandler.loadDevices();
|
2017-04-28 20:21:22 +03:00
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
document.addEventListener('keydown', this._onKeyDown);
|
2017-05-15 16:56:05 +03:00
|
|
|
|
|
|
|
this._sessionStore = sessionStore;
|
2017-05-16 13:52:51 +03:00
|
|
|
this._sessionStoreToken = this._sessionStore.addListener(
|
2017-05-15 19:17:32 +03:00
|
|
|
this._setStateFromSessionStore,
|
2017-05-16 13:52:51 +03:00
|
|
|
);
|
2017-05-15 16:56:05 +03:00
|
|
|
this._setStateFromSessionStore();
|
2017-06-05 18:08:03 +03:00
|
|
|
|
2018-08-07 19:04:37 +03:00
|
|
|
this._updateServerNoticeEvents();
|
|
|
|
|
2017-06-01 05:00:30 +03:00
|
|
|
this._matrixClient.on("accountData", this.onAccountData);
|
2018-08-03 16:54:52 +03:00
|
|
|
this._matrixClient.on("sync", this.onSync);
|
2018-08-07 19:04:37 +03:00
|
|
|
this._matrixClient.on("RoomState.events", this.onRoomStateEvents);
|
2016-11-03 21:42:26 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
|
|
|
document.removeEventListener('keydown', this._onKeyDown);
|
2017-06-01 05:00:30 +03:00
|
|
|
this._matrixClient.removeListener("accountData", this.onAccountData);
|
2018-08-07 19:04:37 +03:00
|
|
|
this._matrixClient.removeListener("sync", this.onSync);
|
|
|
|
this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
|
2017-05-16 13:52:51 +03:00
|
|
|
if (this._sessionStoreToken) {
|
|
|
|
this._sessionStoreToken.remove();
|
2017-05-15 19:17:32 +03:00
|
|
|
}
|
2018-10-16 19:43:40 +03:00
|
|
|
this.resizer.detach();
|
2016-11-03 21:42:26 +03:00
|
|
|
},
|
|
|
|
|
2017-05-31 17:13:27 +03:00
|
|
|
// Child components assume that the client peg will not be null, so give them some
|
|
|
|
// sort of assurance here by only allowing a re-render if the client is truthy.
|
|
|
|
//
|
|
|
|
// This is required because `LoggedInView` maintains its own state and if this state
|
|
|
|
// updates after the client peg has been made null (during logout), then it will
|
|
|
|
// attempt to re-render and the children will throw errors.
|
|
|
|
shouldComponentUpdate: function() {
|
|
|
|
return Boolean(MatrixClientPeg.get());
|
2016-11-03 21:42:26 +03:00
|
|
|
},
|
|
|
|
|
2017-03-22 18:06:52 +03:00
|
|
|
canResetTimelineInRoom: function(roomId) {
|
|
|
|
if (!this.refs.roomView) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return this.refs.roomView.canResetTimeline();
|
|
|
|
},
|
|
|
|
|
2017-05-15 16:56:05 +03:00
|
|
|
_setStateFromSessionStore() {
|
|
|
|
this.setState({
|
|
|
|
userHasGeneratedPassword: Boolean(this._sessionStore.getCachedPassword()),
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2018-10-16 19:43:40 +03:00
|
|
|
_createResizer() {
|
|
|
|
const classNames = {
|
|
|
|
handle: "mx_ResizeHandle",
|
|
|
|
vertical: "mx_ResizeHandle_vertical",
|
2019-01-21 22:32:57 +03:00
|
|
|
reverse: "mx_ResizeHandle_reverse",
|
2018-10-16 19:43:40 +03:00
|
|
|
};
|
|
|
|
const collapseConfig = {
|
|
|
|
toggleSize: 260 - 50,
|
2018-11-26 18:45:55 +03:00
|
|
|
onCollapsed: (collapsed) => {
|
|
|
|
if (collapsed) {
|
2019-01-31 12:15:27 +03:00
|
|
|
dis.dispatch({action: "hide_left_panel"}, true);
|
2018-11-26 18:45:55 +03:00
|
|
|
window.localStorage.setItem("mx_lhs_size", '0');
|
2019-01-31 12:15:27 +03:00
|
|
|
} else {
|
|
|
|
dis.dispatch({action: "show_left_panel"}, true);
|
2018-10-16 19:43:40 +03:00
|
|
|
}
|
|
|
|
},
|
2018-11-26 18:45:55 +03:00
|
|
|
onResized: (size) => {
|
2018-10-31 14:09:53 +03:00
|
|
|
window.localStorage.setItem("mx_lhs_size", '' + size);
|
2018-10-16 19:43:40 +03:00
|
|
|
},
|
|
|
|
};
|
|
|
|
const resizer = new Resizer(
|
|
|
|
this.resizeContainer,
|
|
|
|
CollapseDistributor,
|
|
|
|
collapseConfig);
|
|
|
|
resizer.setClassNames(classNames);
|
|
|
|
return resizer;
|
|
|
|
},
|
|
|
|
|
|
|
|
_loadResizerPreferences() {
|
2019-01-22 18:40:11 +03:00
|
|
|
let lhsSize = window.localStorage.getItem("mx_lhs_size");
|
2018-10-16 19:43:40 +03:00
|
|
|
if (lhsSize !== null) {
|
2019-01-22 18:40:11 +03:00
|
|
|
lhsSize = parseInt(lhsSize, 10);
|
|
|
|
} else {
|
|
|
|
lhsSize = 350;
|
2018-10-16 19:43:40 +03:00
|
|
|
}
|
2019-01-22 18:40:11 +03:00
|
|
|
this.resizer.forHandleAt(0).resize(lhsSize);
|
2018-10-16 19:43:40 +03:00
|
|
|
},
|
|
|
|
|
2017-06-01 05:00:30 +03:00
|
|
|
onAccountData: function(event) {
|
|
|
|
if (event.getType() === "im.vector.web.settings") {
|
|
|
|
this.setState({
|
2017-06-05 18:08:03 +03:00
|
|
|
useCompactLayout: event.getContent().useCompactLayout,
|
2017-06-01 05:00:30 +03:00
|
|
|
});
|
|
|
|
}
|
2017-09-15 05:16:56 +03:00
|
|
|
if (event.getType() === "m.ignored_user_list") {
|
|
|
|
dis.dispatch({action: "ignore_state_changed"});
|
|
|
|
}
|
2017-06-01 05:00:30 +03:00
|
|
|
},
|
|
|
|
|
2018-08-03 16:54:52 +03:00
|
|
|
onSync: function(syncState, oldSyncState, data) {
|
2019-01-21 22:32:57 +03:00
|
|
|
const oldErrCode = (
|
|
|
|
this.state.syncErrorData &&
|
|
|
|
this.state.syncErrorData.error &&
|
|
|
|
this.state.syncErrorData.error.errcode
|
|
|
|
);
|
2018-08-03 20:02:09 +03:00
|
|
|
const newErrCode = data && data.error && data.error.errcode;
|
|
|
|
if (syncState === oldSyncState && oldErrCode === newErrCode) return;
|
2018-08-03 16:54:52 +03:00
|
|
|
|
|
|
|
if (syncState === 'ERROR') {
|
|
|
|
this.setState({
|
|
|
|
syncErrorData: data,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.setState({
|
|
|
|
syncErrorData: null,
|
|
|
|
});
|
|
|
|
}
|
2018-08-07 19:04:37 +03:00
|
|
|
|
|
|
|
if (oldSyncState === 'PREPARED' && syncState === 'SYNCING') {
|
|
|
|
this._updateServerNoticeEvents();
|
|
|
|
}
|
2018-08-03 16:54:52 +03:00
|
|
|
},
|
|
|
|
|
2018-08-07 19:04:37 +03:00
|
|
|
onRoomStateEvents: function(ev, state) {
|
|
|
|
const roomLists = RoomListStore.getRoomLists();
|
2018-08-13 15:53:38 +03:00
|
|
|
if (roomLists['m.server_notice'] && roomLists['m.server_notice'].some(r => r.roomId === ev.getRoomId())) {
|
2018-08-07 19:04:37 +03:00
|
|
|
this._updateServerNoticeEvents();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_updateServerNoticeEvents: async function() {
|
|
|
|
const roomLists = RoomListStore.getRoomLists();
|
|
|
|
if (!roomLists['m.server_notice']) return [];
|
2018-09-24 18:07:42 +03:00
|
|
|
|
2018-08-07 19:04:37 +03:00
|
|
|
const pinnedEvents = [];
|
|
|
|
for (const room of roomLists['m.server_notice']) {
|
|
|
|
const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
|
|
|
|
|
|
|
|
if (!pinStateEvent || !pinStateEvent.getContent().pinned) continue;
|
2018-09-24 18:07:42 +03:00
|
|
|
|
2018-08-07 19:04:37 +03:00
|
|
|
const pinnedEventIds = pinStateEvent.getContent().pinned.slice(0, MAX_PINNED_NOTICES_PER_ROOM);
|
|
|
|
for (const eventId of pinnedEventIds) {
|
|
|
|
const timeline = await this._matrixClient.getEventTimeline(room.getUnfilteredTimelineSet(), eventId, 0);
|
|
|
|
const ev = timeline.getEvents().find(ev => ev.getId() === eventId);
|
|
|
|
if (ev) pinnedEvents.push(ev);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.setState({
|
|
|
|
serverNoticeEvents: pinnedEvents,
|
|
|
|
});
|
|
|
|
},
|
2018-09-24 18:07:42 +03:00
|
|
|
|
2018-08-07 19:04:37 +03:00
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
_onKeyDown: function(ev) {
|
|
|
|
/*
|
|
|
|
// Remove this for now as ctrl+alt = alt-gr so this breaks keyboards which rely on alt-gr for numbers
|
|
|
|
// Will need to find a better meta key if anyone actually cares about using this.
|
|
|
|
if (ev.altKey && ev.ctrlKey && ev.keyCode > 48 && ev.keyCode < 58) {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_indexed_room',
|
|
|
|
roomIndex: ev.keyCode - 49,
|
|
|
|
});
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
*/
|
|
|
|
|
2017-07-12 19:12:57 +03:00
|
|
|
let handled = false;
|
2017-12-01 13:44:00 +03:00
|
|
|
const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
|
2016-11-03 21:42:26 +03:00
|
|
|
|
|
|
|
switch (ev.keyCode) {
|
|
|
|
case KeyCode.UP:
|
|
|
|
case KeyCode.DOWN:
|
2017-04-23 02:49:14 +03:00
|
|
|
if (ev.altKey && !ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const action = ev.keyCode == KeyCode.UP ?
|
2016-11-03 21:42:26 +03:00
|
|
|
'view_prev_room' : 'view_next_room';
|
|
|
|
dis.dispatch({action: action});
|
|
|
|
handled = true;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case KeyCode.PAGE_UP:
|
|
|
|
case KeyCode.PAGE_DOWN:
|
2017-04-23 02:49:14 +03:00
|
|
|
if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
|
|
|
|
this._onScrollKeyPressed(ev);
|
|
|
|
handled = true;
|
|
|
|
}
|
2016-11-03 21:42:26 +03:00
|
|
|
break;
|
|
|
|
|
|
|
|
case KeyCode.HOME:
|
|
|
|
case KeyCode.END:
|
2017-04-23 02:49:14 +03:00
|
|
|
if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
|
2016-11-03 21:42:26 +03:00
|
|
|
this._onScrollKeyPressed(ev);
|
|
|
|
handled = true;
|
|
|
|
}
|
|
|
|
break;
|
2017-07-12 15:51:55 +03:00
|
|
|
case KeyCode.KEY_K:
|
2017-07-12 19:12:57 +03:00
|
|
|
if (ctrlCmdOnly) {
|
2017-07-12 15:51:55 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'focus_room_filter',
|
|
|
|
});
|
2017-07-12 19:12:57 +03:00
|
|
|
handled = true;
|
2017-07-12 15:51:55 +03:00
|
|
|
}
|
|
|
|
break;
|
2016-11-03 21:42:26 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (handled) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-01-21 22:32:57 +03:00
|
|
|
/**
|
|
|
|
* dispatch a page-up/page-down/etc to the appropriate component
|
|
|
|
* @param {Object} ev The key event
|
|
|
|
*/
|
2016-11-03 21:42:26 +03:00
|
|
|
_onScrollKeyPressed: function(ev) {
|
|
|
|
if (this.refs.roomView) {
|
|
|
|
this.refs.roomView.handleScrollKey(ev);
|
2017-04-23 03:00:44 +03:00
|
|
|
}
|
2016-11-03 21:42:26 +03:00
|
|
|
},
|
|
|
|
|
2018-02-14 19:40:58 +03:00
|
|
|
_onDragEnd: function(result) {
|
|
|
|
// Dragged to an invalid destination, not onto a droppable
|
|
|
|
if (!result.destination) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const dest = result.destination.droppableId;
|
|
|
|
|
|
|
|
if (dest === 'tag-panel-droppable') {
|
|
|
|
// Could be "GroupTile +groupId:domain"
|
|
|
|
const draggableId = result.draggableId.split(' ').pop();
|
|
|
|
|
|
|
|
// Dispatch synchronously so that the TagPanel receives an
|
|
|
|
// optimistic update from TagOrderStore before the previous
|
|
|
|
// state is shown.
|
|
|
|
dis.dispatch(TagOrderActions.moveTag(
|
|
|
|
this._matrixClient,
|
|
|
|
draggableId,
|
|
|
|
result.destination.index,
|
|
|
|
), true);
|
|
|
|
} else if (dest.startsWith('room-sub-list-droppable_')) {
|
|
|
|
this._onRoomTileEndDrag(result);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_onRoomTileEndDrag: function(result) {
|
|
|
|
let newTag = result.destination.droppableId.split('_')[1];
|
|
|
|
let prevTag = result.source.droppableId.split('_')[1];
|
|
|
|
if (newTag === 'undefined') newTag = undefined;
|
|
|
|
if (prevTag === 'undefined') prevTag = undefined;
|
|
|
|
|
|
|
|
const roomId = result.draggableId.split('_')[1];
|
|
|
|
|
|
|
|
const oldIndex = result.source.index;
|
|
|
|
const newIndex = result.destination.index;
|
|
|
|
|
|
|
|
dis.dispatch(RoomListActions.tagRoom(
|
|
|
|
this._matrixClient,
|
|
|
|
this._matrixClient.getRoom(roomId),
|
|
|
|
prevTag, newTag,
|
|
|
|
oldIndex, newIndex,
|
|
|
|
), true);
|
|
|
|
},
|
|
|
|
|
2018-09-28 01:11:57 +03:00
|
|
|
_onMouseDown: function(ev) {
|
2018-05-29 15:16:39 +03:00
|
|
|
// When the panels are disabled, clicking on them results in a mouse event
|
|
|
|
// which bubbles to certain elements in the tree. When this happens, close
|
|
|
|
// any settings page that is currently open (user/room/group).
|
2018-07-27 20:58:11 +03:00
|
|
|
if (this.props.leftDisabled && this.props.rightDisabled) {
|
|
|
|
const targetClasses = new Set(ev.target.className.split(' '));
|
|
|
|
if (
|
2018-07-27 20:53:36 +03:00
|
|
|
targetClasses.has('mx_MatrixChat') ||
|
|
|
|
targetClasses.has('mx_MatrixChat_middlePanel') ||
|
|
|
|
targetClasses.has('mx_RoomView')
|
2018-07-27 20:58:11 +03:00
|
|
|
) {
|
2018-09-28 01:11:57 +03:00
|
|
|
this.setState({
|
|
|
|
mouseDown: {
|
|
|
|
x: ev.pageX,
|
|
|
|
y: ev.pageY,
|
|
|
|
},
|
|
|
|
});
|
2018-07-27 20:58:11 +03:00
|
|
|
}
|
2018-05-29 15:16:39 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-09-28 01:11:57 +03:00
|
|
|
_onMouseUp: function(ev) {
|
|
|
|
if (!this.state.mouseDown) return;
|
|
|
|
|
|
|
|
const deltaX = ev.pageX - this.state.mouseDown.x;
|
|
|
|
const deltaY = ev.pageY - this.state.mouseDown.y;
|
|
|
|
const distance = Math.sqrt((deltaX * deltaX) + (deltaY + deltaY));
|
|
|
|
const maxRadius = 5; // People shouldn't be straying too far, hopefully
|
|
|
|
|
|
|
|
// Note: we track how far the user moved their mouse to help
|
|
|
|
// combat against https://github.com/vector-im/riot-web/issues/7158
|
|
|
|
|
|
|
|
if (distance < maxRadius) {
|
|
|
|
// This is probably a real click, and not a drag
|
|
|
|
dis.dispatch({ action: 'close_settings' });
|
|
|
|
}
|
|
|
|
|
|
|
|
// Always clear the mouseDown state to ensure we don't accidentally
|
|
|
|
// use stale values due to the mouseDown checks.
|
|
|
|
this.setState({mouseDown: null});
|
|
|
|
},
|
|
|
|
|
2018-10-19 16:22:28 +03:00
|
|
|
_setResizeContainerRef(div) {
|
|
|
|
this.resizeContainer = div;
|
|
|
|
},
|
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
render: function() {
|
2017-04-26 15:48:03 +03:00
|
|
|
const LeftPanel = sdk.getComponent('structures.LeftPanel');
|
|
|
|
const RoomView = sdk.getComponent('structures.RoomView');
|
|
|
|
const UserSettings = sdk.getComponent('structures.UserSettings');
|
|
|
|
const HomePage = sdk.getComponent('structures.HomePage');
|
2017-06-05 18:51:50 +03:00
|
|
|
const GroupView = sdk.getComponent('structures.GroupView');
|
2017-06-28 15:56:18 +03:00
|
|
|
const MyGroups = sdk.getComponent('structures.MyGroups');
|
2017-04-26 15:48:03 +03:00
|
|
|
const MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
|
2018-05-15 15:15:40 +03:00
|
|
|
const CookieBar = sdk.getComponent('globals.CookieBar');
|
2017-04-26 15:48:03 +03:00
|
|
|
const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
|
2017-06-03 17:10:05 +03:00
|
|
|
const UpdateCheckBar = sdk.getComponent('globals.UpdateCheckBar');
|
2017-05-05 18:31:33 +03:00
|
|
|
const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
|
2018-08-03 16:54:52 +03:00
|
|
|
const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
|
2017-04-26 15:48:03 +03:00
|
|
|
|
2019-01-21 22:32:57 +03:00
|
|
|
let pageElement;
|
2016-11-03 21:42:26 +03:00
|
|
|
|
|
|
|
switch (this.props.page_type) {
|
|
|
|
case PageTypes.RoomView:
|
2019-01-21 22:32:57 +03:00
|
|
|
pageElement = <RoomView
|
2016-11-03 21:42:26 +03:00
|
|
|
ref='roomView'
|
|
|
|
autoJoin={this.props.autoJoin}
|
2017-04-28 15:22:55 +03:00
|
|
|
onRegistered={this.props.onRegistered}
|
2016-11-03 21:42:26 +03:00
|
|
|
thirdPartyInvite={this.props.thirdPartyInvite}
|
|
|
|
oobData={this.props.roomOobData}
|
2018-10-19 22:30:38 +03:00
|
|
|
viaServers={this.props.viaServers}
|
2016-11-03 21:42:26 +03:00
|
|
|
eventPixelOffset={this.props.initialEventPixelOffset}
|
2017-05-24 20:04:04 +03:00
|
|
|
key={this.props.currentRoomId || 'roomview'}
|
2017-10-25 13:09:48 +03:00
|
|
|
disabled={this.props.middleDisabled}
|
2018-12-17 17:30:39 +03:00
|
|
|
collapsedRhs={this.props.collapsedRhs}
|
2016-11-03 21:42:26 +03:00
|
|
|
ConferenceHandler={this.props.ConferenceHandler}
|
2017-01-20 17:22:27 +03:00
|
|
|
/>;
|
2016-11-03 21:42:26 +03:00
|
|
|
break;
|
2019-01-17 12:29:37 +03:00
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
case PageTypes.UserSettings:
|
2019-01-21 22:32:57 +03:00
|
|
|
pageElement = <UserSettings
|
2018-05-29 15:16:39 +03:00
|
|
|
onClose={this.props.onCloseAllSettings}
|
2016-11-03 21:42:26 +03:00
|
|
|
brand={this.props.config.brand}
|
2017-01-20 17:22:27 +03:00
|
|
|
/>;
|
2016-11-03 21:42:26 +03:00
|
|
|
break;
|
|
|
|
|
2017-06-28 15:56:18 +03:00
|
|
|
case PageTypes.MyGroups:
|
2019-01-21 22:32:57 +03:00
|
|
|
pageElement = <MyGroups />;
|
2017-06-28 15:56:18 +03:00
|
|
|
break;
|
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
case PageTypes.RoomDirectory:
|
2019-01-29 17:34:58 +03:00
|
|
|
// handled by MatrixChat for now
|
2016-11-03 21:42:26 +03:00
|
|
|
break;
|
2016-11-13 17:10:46 +03:00
|
|
|
|
|
|
|
case PageTypes.HomePage:
|
2017-07-07 12:41:59 +03:00
|
|
|
{
|
2019-01-21 22:32:57 +03:00
|
|
|
pageElement = <HomePage
|
2017-07-07 12:41:59 +03:00
|
|
|
homePageUrl={this.props.config.welcomePageUrl}
|
|
|
|
/>;
|
|
|
|
}
|
2016-11-13 17:10:46 +03:00
|
|
|
break;
|
|
|
|
|
2016-11-03 21:42:26 +03:00
|
|
|
case PageTypes.UserView:
|
2019-01-21 22:32:57 +03:00
|
|
|
pageElement = null; // deliberately null for now
|
2018-10-31 14:09:53 +03:00
|
|
|
// TODO: fix/remove UserView
|
|
|
|
// right_panel = <RightPanel disabled={this.props.rightDisabled} />;
|
2016-11-03 21:42:26 +03:00
|
|
|
break;
|
2017-06-05 18:51:50 +03:00
|
|
|
case PageTypes.GroupView:
|
2019-01-21 22:32:57 +03:00
|
|
|
pageElement = <GroupView
|
2017-06-05 18:51:50 +03:00
|
|
|
groupId={this.props.currentGroupId}
|
2017-11-06 21:02:50 +03:00
|
|
|
isNew={this.props.currentGroupIsNew}
|
2018-12-17 17:30:39 +03:00
|
|
|
collapsedRhs={this.props.collapsedRhs}
|
2017-06-27 12:05:05 +03:00
|
|
|
/>;
|
2017-06-05 18:51:50 +03:00
|
|
|
break;
|
2016-11-03 21:42:26 +03:00
|
|
|
}
|
|
|
|
|
2018-08-16 12:35:27 +03:00
|
|
|
const usageLimitEvent = this.state.serverNoticeEvents.find((e) => {
|
2018-08-22 19:54:02 +03:00
|
|
|
return (
|
|
|
|
e && e.getType() === 'm.room.message' &&
|
|
|
|
e.getContent()['server_notice_type'] === 'm.server_notice.usage_limit_reached'
|
|
|
|
);
|
2018-08-07 19:04:37 +03:00
|
|
|
});
|
|
|
|
|
2017-06-03 17:10:05 +03:00
|
|
|
let topBar;
|
2017-05-26 12:34:36 +03:00
|
|
|
const isGuest = this.props.matrixClient.isGuest();
|
2018-08-15 19:03:54 +03:00
|
|
|
if (this.state.syncErrorData && this.state.syncErrorData.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
|
|
|
|
topBar = <ServerLimitBar kind='hard'
|
|
|
|
adminContact={this.state.syncErrorData.error.data.admin_contact}
|
|
|
|
limitType={this.state.syncErrorData.error.data.limit_type}
|
|
|
|
/>;
|
2018-08-16 12:35:27 +03:00
|
|
|
} else if (usageLimitEvent) {
|
2018-08-15 19:03:54 +03:00
|
|
|
topBar = <ServerLimitBar kind='soft'
|
2018-08-16 12:35:27 +03:00
|
|
|
adminContact={usageLimitEvent.getContent().admin_contact}
|
|
|
|
limitType={usageLimitEvent.getContent().limit_type}
|
2018-08-15 19:03:54 +03:00
|
|
|
/>;
|
2018-08-03 16:54:52 +03:00
|
|
|
} else if (this.props.showCookieBar &&
|
2018-05-16 17:53:43 +03:00
|
|
|
this.props.config.piwik
|
|
|
|
) {
|
|
|
|
const policyUrl = this.props.config.piwik.policyUrl || null;
|
2018-05-16 17:49:23 +03:00
|
|
|
topBar = <CookieBar policyUrl={policyUrl} />;
|
2018-05-15 15:15:40 +03:00
|
|
|
} else if (this.props.hasNewVersion) {
|
2016-11-03 21:42:26 +03:00
|
|
|
topBar = <NewVersionBar version={this.props.version} newVersion={this.props.newVersion}
|
2017-06-03 17:10:05 +03:00
|
|
|
releaseNotes={this.props.newVersionReleaseNotes}
|
2016-11-03 21:42:26 +03:00
|
|
|
/>;
|
2017-06-03 17:10:05 +03:00
|
|
|
} else if (this.props.checkingForUpdate) {
|
2017-06-11 21:12:40 +03:00
|
|
|
topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
|
2017-05-15 16:56:05 +03:00
|
|
|
} else if (this.state.userHasGeneratedPassword) {
|
2017-05-05 18:31:33 +03:00
|
|
|
topBar = <PasswordNagBar />;
|
2019-01-21 22:32:57 +03:00
|
|
|
} else if (
|
|
|
|
!isGuest && Notifier.supportsDesktopNotifications() &&
|
|
|
|
!Notifier.isEnabled() && !Notifier.isToolbarHidden()
|
|
|
|
) {
|
2016-11-03 21:42:26 +03:00
|
|
|
topBar = <MatrixToolbar />;
|
|
|
|
}
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
let bodyClasses = 'mx_MatrixChat';
|
2016-11-03 21:42:26 +03:00
|
|
|
if (topBar) {
|
|
|
|
bodyClasses += ' mx_MatrixChat_toolbarShowing';
|
|
|
|
}
|
2017-06-01 05:00:30 +03:00
|
|
|
if (this.state.useCompactLayout) {
|
|
|
|
bodyClasses += ' mx_MatrixChat_useCompactLayout';
|
|
|
|
}
|
2016-11-03 21:42:26 +03:00
|
|
|
|
|
|
|
return (
|
2018-09-28 01:11:57 +03:00
|
|
|
<div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers} onMouseDown={this._onMouseDown} onMouseUp={this._onMouseUp}>
|
2017-10-11 19:56:17 +03:00
|
|
|
{ topBar }
|
2018-02-14 19:40:58 +03:00
|
|
|
<DragDropContext onDragEnd={this._onDragEnd}>
|
2018-10-19 16:22:28 +03:00
|
|
|
<div ref={this._setResizeContainerRef} className={bodyClasses}>
|
2018-02-14 19:40:58 +03:00
|
|
|
<LeftPanel
|
2019-01-25 20:47:57 +03:00
|
|
|
toolbarShown={!!topBar}
|
2019-01-31 12:15:27 +03:00
|
|
|
collapsed={this.props.collapseLhs || false}
|
2018-02-14 19:40:58 +03:00
|
|
|
disabled={this.props.leftDisabled}
|
|
|
|
/>
|
2019-01-21 22:32:57 +03:00
|
|
|
<ResizeHandle />
|
|
|
|
{ pageElement }
|
2018-02-14 19:40:58 +03:00
|
|
|
</div>
|
|
|
|
</DragDropContext>
|
2016-11-03 21:42:26 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|
2017-12-06 18:01:16 +03:00
|
|
|
|
2018-01-19 16:34:56 +03:00
|
|
|
export default LoggedInView;
|