2019-04-26 14:14:30 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 New Vector Ltd
|
2019-07-29 14:13:23 +03:00
|
|
|
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
2019-04-26 14:14:30 +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 React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2019-04-29 17:16:16 +03:00
|
|
|
|
2019-04-26 14:14:30 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
|
|
|
import sdk from '../../../index';
|
2019-04-29 17:16:16 +03:00
|
|
|
import dis from '../../../dispatcher';
|
2019-04-26 14:14:30 +03:00
|
|
|
import Modal from '../../../Modal';
|
|
|
|
import { createMenu } from '../../structures/ContextualMenu';
|
2019-05-15 17:53:49 +03:00
|
|
|
import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
|
2019-07-29 14:13:23 +03:00
|
|
|
import MatrixClientPeg from "../../../MatrixClientPeg";
|
2019-04-26 14:14:30 +03:00
|
|
|
|
|
|
|
export default class MessageActionBar extends React.PureComponent {
|
|
|
|
static propTypes = {
|
|
|
|
mxEvent: PropTypes.object.isRequired,
|
2019-05-08 20:16:27 +03:00
|
|
|
// The Relations model from the JS SDK for reactions to `mxEvent`
|
|
|
|
reactions: PropTypes.object,
|
2019-04-26 14:14:30 +03:00
|
|
|
permalinkCreator: PropTypes.object,
|
2019-05-07 14:06:50 +03:00
|
|
|
getTile: PropTypes.func,
|
|
|
|
getReplyThread: PropTypes.func,
|
2019-04-26 14:14:30 +03:00
|
|
|
onFocusChange: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
2019-07-29 14:13:23 +03:00
|
|
|
state = {
|
|
|
|
canReact: true,
|
|
|
|
canReply: true,
|
|
|
|
};
|
|
|
|
|
2019-06-10 14:49:31 +03:00
|
|
|
componentDidMount() {
|
|
|
|
this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
|
2019-07-29 14:13:23 +03:00
|
|
|
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
2019-07-29 14:28:30 +03:00
|
|
|
if (room) {
|
|
|
|
room.on("RoomMember.powerLevel", this.onPermissionsChange);
|
|
|
|
room.on("RoomMember.membership", this.onPermissionsChange);
|
|
|
|
this.onPermissionsChange();
|
|
|
|
}
|
2019-06-10 14:49:31 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.props.mxEvent.removeListener("Event.decrypted", this.onDecrypted);
|
2019-07-29 14:13:23 +03:00
|
|
|
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
2019-07-29 14:28:30 +03:00
|
|
|
if (room) {
|
|
|
|
room.removeListener("RoomMember.powerLevel", this.onPermissionsChange);
|
|
|
|
room.removeListener("RoomMember.membership", this.onPermissionsChange);
|
|
|
|
}
|
2019-07-29 14:13:23 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
onPermissionsChange() {
|
|
|
|
const cli = MatrixClientPeg.get();
|
|
|
|
const room = cli.getRoom(this.props.mxEvent.getRoomId());
|
2019-07-29 14:28:30 +03:00
|
|
|
if (room) {
|
|
|
|
const me = cli.credentials.userId;
|
|
|
|
const canReact = room.getMyMembership() === "join" && room.currentState.maySendEvent("m.reaction", me);
|
|
|
|
const canReply = room.maySendMessage();
|
2019-07-29 14:13:23 +03:00
|
|
|
|
2019-07-29 14:28:30 +03:00
|
|
|
this.setState({canReact, canReply});
|
|
|
|
}
|
2019-06-10 14:49:31 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
onDecrypted = () => {
|
|
|
|
// When an event decrypts, it is likely to change the set of available
|
|
|
|
// actions, so we force an update to check again.
|
|
|
|
this.forceUpdate();
|
2019-07-29 14:13:23 +03:00
|
|
|
};
|
2019-06-10 14:49:31 +03:00
|
|
|
|
2019-04-26 14:14:30 +03:00
|
|
|
onFocusChange = (focused) => {
|
|
|
|
if (!this.props.onFocusChange) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.props.onFocusChange(focused);
|
2019-07-29 14:13:23 +03:00
|
|
|
};
|
2019-04-26 14:14:30 +03:00
|
|
|
|
2019-06-19 17:08:49 +03:00
|
|
|
onCryptoClick = () => {
|
2019-04-26 14:14:30 +03:00
|
|
|
const event = this.props.mxEvent;
|
|
|
|
Modal.createTrackedDialogAsync('Encrypted Event Dialog', '',
|
|
|
|
import('../../../async-components/views/dialogs/EncryptedEventDialog'),
|
|
|
|
{event},
|
|
|
|
);
|
2019-07-29 14:13:23 +03:00
|
|
|
};
|
2019-04-26 14:14:30 +03:00
|
|
|
|
2019-04-29 17:16:16 +03:00
|
|
|
onReplyClick = (ev) => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'reply_to_event',
|
|
|
|
event: this.props.mxEvent,
|
|
|
|
});
|
2019-07-29 14:13:23 +03:00
|
|
|
};
|
2019-04-29 17:16:16 +03:00
|
|
|
|
2019-05-06 18:41:15 +03:00
|
|
|
onEditClick = (ev) => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'edit_event',
|
|
|
|
event: this.props.mxEvent,
|
|
|
|
});
|
2019-07-29 14:13:23 +03:00
|
|
|
};
|
2019-05-06 18:41:15 +03:00
|
|
|
|
2019-04-29 17:16:16 +03:00
|
|
|
onOptionsClick = (ev) => {
|
2019-04-26 14:14:30 +03:00
|
|
|
const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
|
|
|
|
const buttonRect = ev.target.getBoundingClientRect();
|
|
|
|
|
2019-05-07 14:06:50 +03:00
|
|
|
const { getTile, getReplyThread } = this.props;
|
|
|
|
const tile = getTile && getTile();
|
|
|
|
const replyThread = getReplyThread && getReplyThread();
|
2019-04-26 14:14:30 +03:00
|
|
|
|
|
|
|
let e2eInfoCallback = null;
|
|
|
|
if (this.props.mxEvent.isEncrypted()) {
|
2019-06-19 17:08:49 +03:00
|
|
|
e2eInfoCallback = () => this.onCryptoClick();
|
2019-04-26 14:14:30 +03:00
|
|
|
}
|
|
|
|
|
2019-06-10 18:29:20 +03:00
|
|
|
const menuOptions = {
|
2019-04-26 14:14:30 +03:00
|
|
|
mxEvent: this.props.mxEvent,
|
2019-06-10 18:12:23 +03:00
|
|
|
chevronFace: "none",
|
2019-04-26 14:14:30 +03:00
|
|
|
permalinkCreator: this.props.permalinkCreator,
|
|
|
|
eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined,
|
|
|
|
collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined,
|
|
|
|
e2eInfoCallback: e2eInfoCallback,
|
|
|
|
onFinished: () => {
|
|
|
|
this.onFocusChange(false);
|
|
|
|
},
|
2019-06-10 18:29:20 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
// The window X and Y offsets are to adjust position when zoomed in to page
|
|
|
|
const buttonRight = buttonRect.right + window.pageXOffset;
|
|
|
|
const buttonBottom = buttonRect.bottom + window.pageYOffset;
|
|
|
|
const buttonTop = buttonRect.top + window.pageYOffset;
|
|
|
|
// Align the right edge of the menu to the right edge of the button
|
|
|
|
menuOptions.right = window.innerWidth - buttonRight;
|
|
|
|
// Align the menu vertically on whichever side of the button has more
|
|
|
|
// space available.
|
|
|
|
if (buttonBottom < window.innerHeight / 2) {
|
|
|
|
menuOptions.top = buttonBottom;
|
|
|
|
} else {
|
|
|
|
menuOptions.bottom = window.innerHeight - buttonTop;
|
|
|
|
}
|
|
|
|
|
|
|
|
createMenu(MessageContextMenu, menuOptions);
|
2019-04-26 14:14:30 +03:00
|
|
|
|
|
|
|
this.onFocusChange(true);
|
2019-07-29 14:13:23 +03:00
|
|
|
};
|
2019-04-26 14:14:30 +03:00
|
|
|
|
2019-06-19 16:45:01 +03:00
|
|
|
renderReactButton() {
|
2019-06-25 17:10:41 +03:00
|
|
|
const ReactMessageAction = sdk.getComponent('messages.ReactMessageAction');
|
|
|
|
const { mxEvent, reactions } = this.props;
|
|
|
|
|
|
|
|
return <ReactMessageAction
|
|
|
|
mxEvent={mxEvent}
|
|
|
|
reactions={reactions}
|
|
|
|
onFocusChange={this.onFocusChange}
|
2019-06-19 16:45:01 +03:00
|
|
|
/>;
|
|
|
|
}
|
|
|
|
|
2019-04-29 18:11:23 +03:00
|
|
|
render() {
|
2019-06-19 16:45:01 +03:00
|
|
|
let reactButton;
|
2019-04-29 18:11:23 +03:00
|
|
|
let replyButton;
|
2019-05-06 18:41:15 +03:00
|
|
|
let editButton;
|
2019-04-29 18:11:23 +03:00
|
|
|
|
2019-05-01 15:58:32 +03:00
|
|
|
if (isContentActionable(this.props.mxEvent)) {
|
2019-07-29 14:13:23 +03:00
|
|
|
if (this.state.canReact) {
|
|
|
|
reactButton = this.renderReactButton();
|
|
|
|
}
|
|
|
|
if (this.state.canReply) {
|
|
|
|
replyButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
|
|
|
|
title={_t("Reply")}
|
|
|
|
onClick={this.onReplyClick}
|
|
|
|
/>;
|
|
|
|
}
|
2019-05-15 17:53:49 +03:00
|
|
|
}
|
2019-07-17 18:56:15 +03:00
|
|
|
if (canEditContent(this.props.mxEvent)) {
|
2019-05-15 17:53:49 +03:00
|
|
|
editButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
|
|
|
|
title={_t("Edit")}
|
|
|
|
onClick={this.onEditClick}
|
|
|
|
/>;
|
2019-04-29 18:11:23 +03:00
|
|
|
}
|
|
|
|
|
2019-04-29 15:04:16 +03:00
|
|
|
return <div className="mx_MessageActionBar">
|
2019-06-19 16:45:01 +03:00
|
|
|
{reactButton}
|
2019-04-29 17:16:16 +03:00
|
|
|
{replyButton}
|
2019-05-06 18:41:15 +03:00
|
|
|
{editButton}
|
2019-04-30 20:09:10 +03:00
|
|
|
<span className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
|
2019-04-29 15:04:16 +03:00
|
|
|
title={_t("Options")}
|
2019-04-29 17:16:16 +03:00
|
|
|
onClick={this.onOptionsClick}
|
2019-04-29 15:04:16 +03:00
|
|
|
/>
|
|
|
|
</div>;
|
2019-04-26 14:14:30 +03:00
|
|
|
}
|
|
|
|
}
|