jiti-meet/react/features/chat/components/web/ChatMessage.js

132 lines
4.3 KiB
JavaScript
Raw Normal View History

// @flow
import React from 'react';
import { translate } from '../../../base/i18n';
import Message from '../../../base/react/components/web/Message';
import { connect } from '../../../base/redux';
2019-10-15 14:08:23 +00:00
import { MESSAGE_TYPE_LOCAL } from '../../constants';
import AbstractChatMessage, { type Props } from '../AbstractChatMessage';
import PrivateMessageButton from './PrivateMessageButton';
/**
* Renders a single chat message.
*/
class ChatMessage extends AbstractChatMessage<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { message, t, knocking } = this.props;
return (
<div
className = 'chatmessage-wrapper'
id = { this.props.message.messageId }
tabIndex = { -1 }>
<div
className = { `chatmessage ${message.privateMessage ? 'privatemessage' : ''} ${
message.lobbyChat && !knocking ? 'lobbymessage' : ''}` }>
2019-10-22 07:56:42 +00:00
<div className = 'replywrapper'>
<div className = 'messagecontent'>
{ this.props.showDisplayName && this._renderDisplayName() }
<div className = 'usermessage'>
<span className = 'sr-only'>
{ this.props.message.displayName === this.props.message.recipient
? t('chat.messageAccessibleTitleMe')
: t('chat.messageAccessibleTitle',
{ user: this.props.message.displayName }) }
</span>
<Message text = { this._getMessageText() } />
2019-10-22 07:56:42 +00:00
</div>
{ (message.privateMessage || (message.lobbyChat && !knocking))
&& this._renderPrivateNotice() }
2019-10-07 12:35:04 +00:00
</div>
{ (message.privateMessage || (message.lobbyChat && !knocking))
&& message.messageType !== MESSAGE_TYPE_LOCAL
2019-10-22 07:56:42 +00:00
&& (
<div
className = { `messageactions ${
message.lobbyChat ? 'lobbychatmessageactions' : ''}` }>
2019-10-22 07:56:42 +00:00
<PrivateMessageButton
isLobbyMessage = { message.lobbyChat }
2019-10-22 07:56:42 +00:00
participantID = { message.id }
reply = { true }
showLabel = { false } />
</div>
) }
</div>
</div>
{ this.props.showTimestamp && this._renderTimestamp() }
</div>
);
}
_getFormattedTimestamp: () => string;
2019-10-09 08:34:01 +00:00
_getMessageText: () => string;
2019-10-07 12:35:04 +00:00
_getPrivateNoticeMessage: () => string;
/**
* Renders the display name of the sender.
*
* @returns {React$Element<*>}
*/
_renderDisplayName() {
return (
<div
aria-hidden = { true }
className = 'display-name'>
{ this.props.message.displayName }
</div>
);
}
2019-10-07 12:35:04 +00:00
/**
* Renders the message privacy notice.
*
* @returns {React$Element<*>}
*/
_renderPrivateNotice() {
return (
<div className = 'privatemessagenotice'>
{ this._getPrivateNoticeMessage() }
</div>
);
}
/**
* Renders the time at which the message was sent.
*
* @returns {React$Element<*>}
*/
_renderTimestamp() {
return (
<div className = 'timestamp'>
{ this._getFormattedTimestamp() }
</div>
);
}
}
/**
* Maps part of the Redux store to the props of this component.
*
* @param {Object} state - The Redux state.
* @returns {Props}
*/
function _mapStateToProps(state: Object): $Shape<Props> {
const { knocking } = state['features/lobby'];
return {
knocking
};
}
export default translate(connect(_mapStateToProps)(ChatMessage));