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 {