2016-02-08 21:04:54 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2018-08-03 20:02:09 +03:00
|
|
|
Copyright 2017, 2018 New Vector Ltd
|
2019-12-20 03:45:24 +03:00
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
2016-02-08 21:04:54 +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.
|
|
|
|
*/
|
|
|
|
|
2017-05-23 17:16:31 +03:00
|
|
|
import React from 'react';
|
2019-08-30 12:34:59 +03:00
|
|
|
import createReactClass from 'create-react-class';
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2017-11-09 18:58:15 +03:00
|
|
|
import Matrix from 'matrix-js-sdk';
|
2018-08-16 15:31:17 +03:00
|
|
|
import { _t, _td } from '../../languageHandler';
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as sdk from '../../index';
|
2019-12-21 00:13:46 +03:00
|
|
|
import {MatrixClientPeg} from '../../MatrixClientPeg';
|
2017-11-09 18:58:15 +03:00
|
|
|
import Resend from '../../Resend';
|
2020-05-14 05:41:41 +03:00
|
|
|
import dis from '../../dispatcher/dispatcher';
|
2019-12-19 16:25:43 +03:00
|
|
|
import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
|
2020-06-03 04:07:46 +03:00
|
|
|
import {Action} from "../../dispatcher/actions";
|
2017-01-20 19:51:35 +03:00
|
|
|
|
2017-01-23 18:01:39 +03:00
|
|
|
const STATUS_BAR_HIDDEN = 0;
|
|
|
|
const STATUS_BAR_EXPANDED = 1;
|
|
|
|
const STATUS_BAR_EXPANDED_LARGE = 2;
|
|
|
|
|
2017-11-09 18:58:15 +03:00
|
|
|
function getUnsentMessages(room) {
|
|
|
|
if (!room) { return []; }
|
|
|
|
return room.getPendingEvents().filter(function(ev) {
|
|
|
|
return ev.status === Matrix.EventStatus.NOT_SENT;
|
|
|
|
});
|
2018-10-27 06:50:35 +03:00
|
|
|
}
|
2017-11-09 18:58:15 +03:00
|
|
|
|
2019-12-20 03:45:24 +03:00
|
|
|
export default createReactClass({
|
2016-02-08 21:04:54 +03:00
|
|
|
displayName: 'RoomStatusBar',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
// the room this statusbar is representing.
|
2017-12-26 04:03:18 +03:00
|
|
|
room: PropTypes.object.isRequired,
|
2017-10-12 06:15:00 +03:00
|
|
|
// This is true when the user is alone in the room, but has also sent a message.
|
|
|
|
// Used to suggest to the user to invite someone
|
2017-12-26 04:03:18 +03:00
|
|
|
sentMessageAndIsAlone: PropTypes.bool,
|
2017-10-12 06:15:00 +03:00
|
|
|
|
2016-02-08 21:04:54 +03:00
|
|
|
// true if there is an active call in this room (means we show
|
|
|
|
// the 'Active Call' text in the status bar if there is nothing
|
|
|
|
// more interesting)
|
2017-12-26 04:03:18 +03:00
|
|
|
hasActiveCall: PropTypes.bool,
|
2016-02-09 14:36:57 +03:00
|
|
|
|
2018-10-15 23:35:36 +03:00
|
|
|
// true if the room is being peeked at. This affects components that shouldn't
|
|
|
|
// logically be shown when peeking, such as a prompt to invite people to a room.
|
|
|
|
isPeeking: PropTypes.bool,
|
|
|
|
|
2016-02-09 14:36:57 +03:00
|
|
|
// callback for when the user clicks on the 'resend all' button in the
|
|
|
|
// 'unsent messages' bar
|
2017-12-26 04:03:18 +03:00
|
|
|
onResendAllClick: PropTypes.func,
|
2016-02-09 14:36:57 +03:00
|
|
|
|
2016-03-21 19:49:07 +03:00
|
|
|
// callback for when the user clicks on the 'cancel all' button in the
|
|
|
|
// 'unsent messages' bar
|
2017-12-26 04:03:18 +03:00
|
|
|
onCancelAllClick: PropTypes.func,
|
2016-03-21 19:49:07 +03:00
|
|
|
|
2017-10-12 06:15:00 +03:00
|
|
|
// callback for when the user clicks on the 'invite others' button in the
|
|
|
|
// 'you are alone' bar
|
2017-12-26 04:03:18 +03:00
|
|
|
onInviteClick: PropTypes.func,
|
2017-10-12 06:15:00 +03:00
|
|
|
|
|
|
|
// callback for when the user clicks on the 'stop warning me' button in the
|
|
|
|
// 'you are alone' bar
|
2017-12-26 04:03:18 +03:00
|
|
|
onStopWarningClick: PropTypes.func,
|
2017-10-12 06:15:00 +03:00
|
|
|
|
2016-02-23 14:06:16 +03:00
|
|
|
// callback for when we do something that changes the size of the
|
|
|
|
// status bar. This is used to trigger a re-layout in the parent
|
|
|
|
// component.
|
2017-12-26 04:03:18 +03:00
|
|
|
onResize: PropTypes.func,
|
2017-01-23 18:01:39 +03:00
|
|
|
|
|
|
|
// callback for when the status bar can be hidden from view, as it is
|
|
|
|
// not displaying anything
|
2017-12-26 04:03:18 +03:00
|
|
|
onHidden: PropTypes.func,
|
2017-02-02 20:48:47 +03:00
|
|
|
|
2017-01-23 18:01:39 +03:00
|
|
|
// callback for when the status bar is displaying something and should
|
|
|
|
// be visible
|
2017-12-26 04:03:18 +03:00
|
|
|
onVisible: PropTypes.func,
|
2016-02-08 21:04:54 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
syncState: MatrixClientPeg.get().getSyncState(),
|
2018-08-03 20:02:09 +03:00
|
|
|
syncStateData: MatrixClientPeg.get().getSyncStateData(),
|
2017-11-11 18:57:20 +03:00
|
|
|
unsentMessages: getUnsentMessages(this.props.room),
|
2016-02-08 21:04:54 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2020-03-31 23:14:17 +03:00
|
|
|
componentDidMount: function() {
|
2016-02-08 21:04:54 +03:00
|
|
|
MatrixClientPeg.get().on("sync", this.onSyncStateChange);
|
2017-12-06 22:02:26 +03:00
|
|
|
MatrixClientPeg.get().on("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
|
2016-02-08 21:04:54 +03:00
|
|
|
|
2017-03-28 11:30:41 +03:00
|
|
|
this._checkSize();
|
|
|
|
},
|
2017-01-23 18:01:39 +03:00
|
|
|
|
2017-03-28 11:30:41 +03:00
|
|
|
componentDidUpdate: function() {
|
|
|
|
this._checkSize();
|
2016-02-23 14:06:16 +03:00
|
|
|
},
|
|
|
|
|
2016-02-08 21:04:54 +03:00
|
|
|
componentWillUnmount: function() {
|
2016-02-16 00:50:39 +03:00
|
|
|
// we may have entirely lost our client as we're logging out before clicking login on the guest bar...
|
2017-10-11 19:56:17 +03:00
|
|
|
const client = MatrixClientPeg.get();
|
2016-02-23 19:17:50 +03:00
|
|
|
if (client) {
|
|
|
|
client.removeListener("sync", this.onSyncStateChange);
|
2017-12-06 22:02:26 +03:00
|
|
|
client.removeListener("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
|
2016-02-16 00:50:39 +03:00
|
|
|
}
|
2016-02-08 21:04:54 +03:00
|
|
|
},
|
|
|
|
|
2018-08-03 20:02:09 +03:00
|
|
|
onSyncStateChange: function(state, prevState, data) {
|
2016-02-08 21:04:54 +03:00
|
|
|
if (state === "SYNCING" && prevState === "SYNCING") {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.setState({
|
2017-10-11 19:56:17 +03:00
|
|
|
syncState: state,
|
2018-08-03 20:02:09 +03:00
|
|
|
syncStateData: data,
|
2016-02-08 21:04:54 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-11-09 18:58:15 +03:00
|
|
|
_onResendAllClick: function() {
|
|
|
|
Resend.resendUnsentEvents(this.props.room);
|
2020-06-03 04:07:46 +03:00
|
|
|
dis.fire(Action.FocusComposer);
|
2017-11-09 18:58:15 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
_onCancelAllClick: function() {
|
|
|
|
Resend.cancelUnsentEvents(this.props.room);
|
2020-06-03 04:07:46 +03:00
|
|
|
dis.fire(Action.FocusComposer);
|
2017-11-09 18:58:15 +03:00
|
|
|
},
|
|
|
|
|
2017-12-06 22:02:26 +03:00
|
|
|
_onRoomLocalEchoUpdated: function(event, room, oldEventId, oldStatus) {
|
2017-11-09 18:58:15 +03:00
|
|
|
if (room.roomId !== this.props.room.roomId) return;
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
unsentMessages: getUnsentMessages(this.props.room),
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-03-28 11:30:41 +03:00
|
|
|
// Check whether current size is greater than 0, if yes call props.onVisible
|
2017-10-11 19:56:17 +03:00
|
|
|
_checkSize: function() {
|
2018-01-02 00:15:26 +03:00
|
|
|
if (this._getSize()) {
|
|
|
|
if (this.props.onVisible) this.props.onVisible();
|
|
|
|
} else {
|
|
|
|
if (this.props.onHidden) this.props.onHidden();
|
2017-03-28 11:30:41 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-01-23 18:01:39 +03:00
|
|
|
// We don't need the actual height - just whether it is likely to have
|
|
|
|
// changed - so we use '0' to indicate normal size, and other values to
|
|
|
|
// indicate other sizes.
|
2017-03-28 11:30:41 +03:00
|
|
|
_getSize: function() {
|
2018-08-03 20:02:09 +03:00
|
|
|
if (this._shouldShowConnectionError() ||
|
2017-10-12 06:15:00 +03:00
|
|
|
this.props.hasActiveCall ||
|
|
|
|
this.props.sentMessageAndIsAlone
|
2017-02-22 17:03:30 +03:00
|
|
|
) {
|
2017-01-23 18:01:39 +03:00
|
|
|
return STATUS_BAR_EXPANDED;
|
2017-11-09 18:58:15 +03:00
|
|
|
} else if (this.state.unsentMessages.length > 0) {
|
2017-01-23 18:01:39 +03:00
|
|
|
return STATUS_BAR_EXPANDED_LARGE;
|
2016-02-23 14:06:16 +03:00
|
|
|
}
|
2017-01-23 18:01:39 +03:00
|
|
|
return STATUS_BAR_HIDDEN;
|
|
|
|
},
|
2016-02-23 14:06:16 +03:00
|
|
|
|
2016-02-09 17:42:32 +03:00
|
|
|
// return suitable content for the image on the left of the status bar.
|
2018-11-12 18:10:43 +03:00
|
|
|
_getIndicator: function() {
|
2016-02-09 17:42:32 +03:00
|
|
|
if (this.props.hasActiveCall) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
2016-02-09 17:42:32 +03:00
|
|
|
return (
|
2019-01-11 04:37:28 +03:00
|
|
|
<TintableSvg src={require("../../../res/img/sound-indicator.svg")} width="23" height="20" />
|
2016-02-09 17:42:32 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-08-03 20:02:09 +03:00
|
|
|
if (this._shouldShowConnectionError()) {
|
2016-02-18 21:16:48 +03:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2016-02-09 17:42:32 +03:00
|
|
|
return null;
|
|
|
|
},
|
|
|
|
|
2018-08-03 20:02:09 +03:00
|
|
|
_shouldShowConnectionError: function() {
|
2019-01-22 16:49:41 +03:00
|
|
|
// no conn bar trumps the "some not sent" msg since you can't resend without
|
2018-08-03 20:02:09 +03:00
|
|
|
// a connection!
|
|
|
|
// There's one situation in which we don't show this 'no connection' bar, and that's
|
2018-08-15 19:03:54 +03:00
|
|
|
// if it's a resource limit exceeded error: those are shown in the top bar.
|
2018-08-03 20:02:09 +03:00
|
|
|
const errorIsMauError = Boolean(
|
|
|
|
this.state.syncStateData &&
|
|
|
|
this.state.syncStateData.error &&
|
2018-10-27 06:50:35 +03:00
|
|
|
this.state.syncStateData.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED',
|
2018-08-03 20:02:09 +03:00
|
|
|
);
|
|
|
|
return this.state.syncState === "ERROR" && !errorIsMauError;
|
|
|
|
},
|
|
|
|
|
2017-12-06 22:04:29 +03:00
|
|
|
_getUnsentMessageContent: function() {
|
2017-11-09 18:58:15 +03:00
|
|
|
const unsentMessages = this.state.unsentMessages;
|
|
|
|
if (!unsentMessages.length) return null;
|
|
|
|
|
|
|
|
let title;
|
|
|
|
|
2020-05-28 18:59:27 +03:00
|
|
|
let consentError = null;
|
|
|
|
let resourceLimitError = null;
|
|
|
|
for (const m of unsentMessages) {
|
|
|
|
if (m.error && m.error.errcode === 'M_CONSENT_NOT_GIVEN') {
|
|
|
|
consentError = m.error;
|
|
|
|
break;
|
|
|
|
} else if (m.error && m.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
|
|
|
|
resourceLimitError = m.error;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (consentError) {
|
|
|
|
title = _t(
|
|
|
|
"You can't send any messages until you review and agree to " +
|
|
|
|
"<consentLink>our terms and conditions</consentLink>.",
|
2017-11-16 18:59:16 +03:00
|
|
|
{},
|
|
|
|
{
|
2020-05-28 18:59:27 +03:00
|
|
|
'consentLink': (sub) =>
|
|
|
|
<a href={consentError.data && consentError.data.consent_uri} target="_blank">
|
|
|
|
{ sub }
|
|
|
|
</a>,
|
2017-11-16 18:59:16 +03:00
|
|
|
},
|
2017-11-09 18:58:15 +03:00
|
|
|
);
|
2020-05-28 18:59:27 +03:00
|
|
|
} else if (resourceLimitError) {
|
|
|
|
title = messageForResourceLimitError(
|
|
|
|
resourceLimitError.data.limit_type,
|
|
|
|
resourceLimitError.data.admin_contact, {
|
|
|
|
'monthly_active_user': _td(
|
|
|
|
"Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. " +
|
|
|
|
"Please <a>contact your service administrator</a> to continue using the service.",
|
|
|
|
),
|
|
|
|
'': _td(
|
|
|
|
"Your message wasn't sent because this homeserver has exceeded a resource limit. " +
|
|
|
|
"Please <a>contact your service administrator</a> to continue using the service.",
|
|
|
|
),
|
|
|
|
});
|
|
|
|
} else if (
|
|
|
|
unsentMessages.length === 1 &&
|
|
|
|
unsentMessages[0].error &&
|
|
|
|
unsentMessages[0].error.data &&
|
|
|
|
unsentMessages[0].error.data.error
|
|
|
|
) {
|
|
|
|
title = messageForSendError(unsentMessages[0].error.data) || unsentMessages[0].error.data.error;
|
2017-11-09 18:58:15 +03:00
|
|
|
} else {
|
2020-05-28 18:59:27 +03:00
|
|
|
title = _t('%(count)s of your messages have not been sent.', { count: unsentMessages.length });
|
2017-11-09 18:58:15 +03:00
|
|
|
}
|
|
|
|
|
2020-05-28 18:59:27 +03:00
|
|
|
const content = _t("%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> " +
|
|
|
|
"now. You can also select individual messages to resend or cancel.",
|
|
|
|
{ count: unsentMessages.length },
|
|
|
|
{
|
|
|
|
'resendText': (sub) =>
|
|
|
|
<a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this._onResendAllClick}>{ sub }</a>,
|
|
|
|
'cancelText': (sub) =>
|
|
|
|
<a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this._onCancelAllClick}>{ sub }</a>,
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
2017-11-09 18:58:15 +03:00
|
|
|
return <div className="mx_RoomStatusBar_connectionLostBar">
|
2019-11-19 16:42:35 +03:00
|
|
|
<img src={require("../../../res/img/feather-customised/warning-triangle.svg")} width="24" height="24" title={_t("Warning")} alt="" />
|
2018-06-27 17:19:27 +03:00
|
|
|
<div>
|
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar_title">
|
|
|
|
{ title }
|
|
|
|
</div>
|
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar_desc">
|
|
|
|
{ content }
|
|
|
|
</div>
|
2017-11-09 18:58:15 +03:00
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
2016-02-09 17:42:32 +03:00
|
|
|
// return suitable content for the main (text) part of the status bar.
|
2019-05-19 18:31:25 +03:00
|
|
|
_getContent: function() {
|
2018-08-03 20:02:09 +03:00
|
|
|
if (this._shouldShowConnectionError()) {
|
2016-02-08 21:04:54 +03:00
|
|
|
return (
|
2016-02-09 17:42:32 +03:00
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar">
|
2019-11-19 16:42:35 +03:00
|
|
|
<img src={require("../../../res/img/feather-customised/warning-triangle.svg")} width="24" height="24" title="/!\ " alt="/!\ " />
|
2018-06-29 11:46:01 +03:00
|
|
|
<div>
|
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar_title">
|
|
|
|
{ _t('Connectivity to the server has been lost.') }
|
|
|
|
</div>
|
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar_desc">
|
|
|
|
{ _t('Sent messages will be stored until your connection has returned.') }
|
|
|
|
</div>
|
2016-02-08 21:04:54 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-11-09 18:58:15 +03:00
|
|
|
if (this.state.unsentMessages.length > 0) {
|
|
|
|
return this._getUnsentMessageContent();
|
2016-02-08 21:04:54 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.props.hasActiveCall) {
|
|
|
|
return (
|
2016-02-09 17:42:32 +03:00
|
|
|
<div className="mx_RoomStatusBar_callBar">
|
2017-10-11 19:56:17 +03:00
|
|
|
<b>{ _t('Active call') }</b>
|
2016-02-08 21:04:54 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-10-12 06:15:00 +03:00
|
|
|
// If you're alone in the room, and have sent a message, suggest to invite someone
|
2018-10-15 23:35:36 +03:00
|
|
|
if (this.props.sentMessageAndIsAlone && !this.props.isPeeking) {
|
2017-10-12 06:15:00 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_RoomStatusBar_isAlone">
|
2017-11-13 22:19:33 +03:00
|
|
|
{ _t("There's no one else here! Would you like to <inviteText>invite others</inviteText> " +
|
|
|
|
"or <nowarnText>stop warning about the empty room</nowarnText>?",
|
|
|
|
{},
|
|
|
|
{
|
|
|
|
'inviteText': (sub) =>
|
|
|
|
<a className="mx_RoomStatusBar_resend_link" key="invite" onClick={this.props.onInviteClick}>{ sub }</a>,
|
|
|
|
'nowarnText': (sub) =>
|
|
|
|
<a className="mx_RoomStatusBar_resend_link" key="nowarn" onClick={this.props.onStopWarningClick}>{ sub }</a>,
|
|
|
|
},
|
2017-10-12 06:15:00 +03:00
|
|
|
) }
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-02-09 17:42:32 +03:00
|
|
|
return null;
|
2016-02-08 21:04:54 +03:00
|
|
|
},
|
2016-02-09 17:42:32 +03:00
|
|
|
|
|
|
|
render: function() {
|
2017-10-11 19:56:17 +03:00
|
|
|
const content = this._getContent();
|
2018-11-12 18:10:43 +03:00
|
|
|
const indicator = this._getIndicator();
|
2016-02-09 17:42:32 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="mx_RoomStatusBar">
|
|
|
|
<div className="mx_RoomStatusBar_indicator">
|
2017-10-11 19:56:17 +03:00
|
|
|
{ indicator }
|
2016-02-09 17:42:32 +03:00
|
|
|
</div>
|
2018-10-02 14:55:24 +03:00
|
|
|
<div role="alert">
|
|
|
|
{ content }
|
|
|
|
</div>
|
2016-02-09 17:42:32 +03:00
|
|
|
</div>
|
|
|
|
);
|
2016-07-15 18:10:27 +03:00
|
|
|
},
|
2016-02-08 21:04:54 +03:00
|
|
|
});
|