diff --git a/src/lib/utils.js b/src/lib/utils.js index 4a867652..e18dd732 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -204,3 +204,8 @@ export function cancelablePromise(promise) { }, }; }; + +// Returns true if specified mime type represents a Tinode video call. +export function isVideoCall(mime) { + return mime == 'application/tinode-video-call'; +} diff --git a/src/widgets/chat-message.jsx b/src/widgets/chat-message.jsx index 952cda9a..ffa72635 100644 --- a/src/widgets/chat-message.jsx +++ b/src/widgets/chat-message.jsx @@ -9,7 +9,7 @@ import LetterTile from './letter-tile.jsx'; import ReceivedMarker from './received-marker.jsx' import { fullFormatter } from '../lib/formatters.js'; -import { sanitizeUrl } from '../lib/utils.js'; +import { isVideoCall, sanitizeUrl } from '../lib/utils.js'; class BaseChatMessage extends React.PureComponent { constructor(props) { @@ -147,12 +147,19 @@ class BaseChatMessage extends React.PureComponent { - } else if (this.props.mimeType == "application/tinode-video-call") { + } else if (isVideoCall(this.props.mimeType)) { // Video calls. const direction = this.props.response ? "call_received" : "call_made"; - const text = this.props.response ? "Incoming Call" : "Outgoing Call"; - content = <>{direction}{text} - () + const text = this.props.response ? + : + ; + const isCallDropped = this.props.content == "disconnected"; + content = <>{direction}{text} + { !isCallDropped ? + [' (', , ')'] : + null} } else if (typeof content != 'string') { content = <>warning_amber diff --git a/src/widgets/contact-list.jsx b/src/widgets/contact-list.jsx index 91da6479..5245d60e 100644 --- a/src/widgets/contact-list.jsx +++ b/src/widgets/contact-list.jsx @@ -10,6 +10,7 @@ import Contact from './contact.jsx'; import ContactAction from './contact-action.jsx'; import { makeImageUrl } from '../lib/blob-helpers.js'; +import { isVideoCall } from '../lib/utils.js' import { MESSAGE_PREVIEW_LENGTH } from '../config.js'; @@ -78,12 +79,16 @@ class ContactList extends React.Component { c.private.join(',') : (c.private ? c.private.comment : null); let preview; let forwarded; + let previewIsVideoCall; + let previewIsResponse; let deliveryStatus; if (!this.props.showMode && c.latestMessage) { const msg = c.latestMessage(true); if (msg) { forwarded = msg.head ? msg.head.forwarded : null; deliveryStatus = msg._status || c.msgStatus(msg, true); + previewIsVideoCall = msg.head ? isVideoCall(msg.head.mime) : null; + previewIsResponse = msg.from != this.props.myUserId; if (msg.content) { preview = typeof msg.content == 'string' ? msg.content.substr(0, MESSAGE_PREVIEW_LENGTH) : @@ -99,6 +104,8 @@ class ContactList extends React.Component { avatar={makeImageUrl(c.public ? c.public.photo : null)} comment={comment} preview={preview} + previewIsVideoCall={previewIsVideoCall} + previewIsResponse={previewIsResponse} forwarded={forwarded} received={deliveryStatus} unread={this.props.showUnread ? c.unread : 0} diff --git a/src/widgets/contact.jsx b/src/widgets/contact.jsx index 889086f7..378a118c 100644 --- a/src/widgets/contact.jsx +++ b/src/widgets/contact.jsx @@ -71,7 +71,10 @@ class Contact extends React.Component { // The this.props.preview contains alreay shortened Drafty or string. let preview; - if (typeof this.props.preview == 'string') { + if (this.props.previewIsVideoCall) { + preview = <>{this.props.previewIsResponse ? 'call_received' : 'call_made'} + video_call; + } else if (typeof this.props.preview == 'string') { preview = this.props.preview; } else if (Drafty.isValid(this.props.preview)) { preview = React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter, diff --git a/src/widgets/rtc-panel.jsx b/src/widgets/rtc-panel.jsx index a08e323b..a98b8460 100644 --- a/src/widgets/rtc-panel.jsx +++ b/src/widgets/rtc-panel.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { FormattedMessage } from 'react-intl'; import LetterTile from '../widgets/letter-tile.jsx'; @@ -363,7 +364,10 @@ export default class RtcPanel extends React.PureComponent {
-
You
+
+ +