2019-01-13 19:34:38 +00:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
import { PureComponent } from 'react';
|
|
|
|
|
2019-05-06 19:30:38 +00:00
|
|
|
import { getLocalizedDateFormatter } from '../../base/i18n';
|
2019-10-15 14:08:23 +00:00
|
|
|
import { MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../constants';
|
|
|
|
|
2019-05-06 19:30:38 +00:00
|
|
|
/**
|
|
|
|
* Formatter string to display the message timestamp.
|
|
|
|
*/
|
|
|
|
const TIMESTAMP_FORMAT = 'H:mm';
|
|
|
|
|
2019-01-13 19:34:38 +00:00
|
|
|
/**
|
|
|
|
* The type of the React {@code Component} props of {@code AbstractChatMessage}.
|
|
|
|
*/
|
|
|
|
export type Props = {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The representation of a chat message.
|
|
|
|
*/
|
|
|
|
message: Object,
|
|
|
|
|
2019-05-06 18:21:41 +00:00
|
|
|
/**
|
|
|
|
* Whether or not the avatar image of the participant which sent the message
|
|
|
|
* should be displayed.
|
|
|
|
*/
|
|
|
|
showAvatar: boolean,
|
|
|
|
|
2019-05-03 19:41:09 +00:00
|
|
|
/**
|
|
|
|
* Whether or not the name of the participant which sent the message should
|
|
|
|
* be displayed.
|
|
|
|
*/
|
|
|
|
showDisplayName: boolean,
|
|
|
|
|
2019-05-06 18:21:41 +00:00
|
|
|
/**
|
|
|
|
* Whether or not the time at which the message was sent should be
|
|
|
|
* displayed.
|
|
|
|
*/
|
|
|
|
showTimestamp: boolean,
|
|
|
|
|
2022-03-03 17:29:38 +00:00
|
|
|
/**
|
|
|
|
* Whether current participant is currently knocking in the lobby room.
|
|
|
|
*/
|
|
|
|
knocking: boolean,
|
|
|
|
|
2019-01-13 19:34:38 +00:00
|
|
|
/**
|
|
|
|
* Invoked to receive translated strings.
|
|
|
|
*/
|
|
|
|
t: Function
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Abstract component to display a chat message.
|
|
|
|
*/
|
2019-05-03 19:41:09 +00:00
|
|
|
export default class AbstractChatMessage<P: Props> extends PureComponent<P> {
|
2019-05-06 19:30:38 +00:00
|
|
|
/**
|
|
|
|
* Returns the timestamp to display for the message.
|
|
|
|
*
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
_getFormattedTimestamp() {
|
|
|
|
return getLocalizedDateFormatter(new Date(this.props.message.timestamp))
|
|
|
|
.format(TIMESTAMP_FORMAT);
|
|
|
|
}
|
2019-10-07 12:35:04 +00:00
|
|
|
|
2019-10-09 08:34:01 +00:00
|
|
|
/**
|
2021-03-16 15:59:33 +00:00
|
|
|
* Generates the message text to be rendered in the component.
|
2019-10-09 08:34:01 +00:00
|
|
|
*
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
_getMessageText() {
|
|
|
|
const { message } = this.props;
|
|
|
|
|
2019-10-15 14:08:23 +00:00
|
|
|
return message.messageType === MESSAGE_TYPE_ERROR
|
2019-10-09 08:34:01 +00:00
|
|
|
? this.props.t('chat.error', {
|
|
|
|
error: message.message
|
|
|
|
})
|
|
|
|
: message.message;
|
|
|
|
}
|
|
|
|
|
2019-10-07 12:35:04 +00:00
|
|
|
/**
|
|
|
|
* Returns the message that is displayed as a notice for private messages.
|
|
|
|
*
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
_getPrivateNoticeMessage() {
|
|
|
|
const { message, t } = this.props;
|
|
|
|
|
|
|
|
return t('chat.privateNotice', {
|
2019-10-15 14:08:23 +00:00
|
|
|
recipient: message.messageType === MESSAGE_TYPE_LOCAL ? message.recipient : t('chat.you')
|
2019-10-07 12:35:04 +00:00
|
|
|
});
|
|
|
|
}
|
2019-05-03 19:41:09 +00:00
|
|
|
}
|