more idimatic VC formatting, better presentation of preview

src/lib/formatters.js

@@ -169,9 +169,11 @@ export function fullFormatter(style, data, values, key, stack) {
       el = CallMessage;
       // Video call messages do not have content.
       values = null;
-      attr.callState = this.callState;
-      attr.incoming = this.isResponse;
-      attr.duration = this.callDuration;
+      if (data) {
+        attr.callState = data.state;
+        attr.incoming = data.incoming;
+        attr.duration = data.duration;
+      }
       break;
     default:
       if (!el) {
@@ -257,10 +259,11 @@ export function previewFormatter(style, data, values, key) {
       break;
     case 'VC':
       el = CallStatus;
-      attr.callState = this.callState;
-      attr.incoming = this.previewIsResponse;
-      attr.duration = this.callDuration;
-      attr.success = true; // FIXME: use actuall call completion status instead of TRUE.
+      if (data) {
+        attr.callState = data.state;
+        attr.incoming = data.incoming;
+        attr.duration = data.duration;
+      }
       values = null;
       break;
     case 'QQ':

src/views/messages-view.jsx

@@ -26,7 +26,6 @@ import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../constan
 import { blobToBase64, fileToBase64, imageScaled, makeImageUrl } from '../lib/blob-helpers.js';
 import HashNavigation from '../lib/navigation.js';
 import { bytesToHumanSize, shortDateFormat } from '../lib/strformat.js';
-import { isVideoCall } from '../lib/utils.js';
 
 // Run timer with this frequency (ms) for checking notification queue.
 const NOTIFICATION_EXEC_INTERVAL = 300;
@@ -1137,15 +1136,12 @@ class MessagesView extends React.Component {
               );
               prevDate = thisDate;
             }
-            const duration = msg.head ? msg.head['webrtc-duration'] : undefined;
             messageNodes.push(
               <ChatMessage
                 tinode={this.props.tinode}
                 content={msg.content}
-                mimeType={msg.head ? msg.head.mime : null}
+                mimeType={msg.head && msg.head.mime}
                 timestamp={msg.ts}
-                callState={msg.head ? msg.head.webrtc : null}
-                duration={duration}
                 response={isReply}
                 seq={msg.seq}
                 isGroup={groupTopic}

src/widgets/call-status.jsx

@@ -1,19 +1,30 @@
 // The counter of unread messages in the topic.
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { secondsToTime } from '../lib/strformat.js';
 
 // Props:
 //  incoming: true | false.
 //  success: true | false.
 export default class CallStatus extends React.PureComponent {
   render() {
-    const icon2 = [['call_received', 'call_missed'],['call_made', 'call_missed_outgoing']]
-      [this.props.incoming ? 0 : 1][this.props.success ? 0 : 1] || 'question_mark';
-
+    const isCallDropped = this.props.callState == 'disconnected';
+    const icon2 = this.props.incoming ?
+      (isCallDropped ? 'call_missed' : 'call_received') :
+      (isCallDropped ? 'call_missed_outgoing' : 'call_made');
+    const duration = isCallDropped ? (
+        this.props.incoming ?
+        <FormattedMessage id="call_missed" defaultMessage="missed" description="Label for cancelled incoming call" /> :
+        <FormattedMessage id="call_cancelled" defaultMessage="cancelled" description="Label for cancelled outgoing call" />
+      ) :
+      <span>{secondsToTime(this.props.duration / 1000)}</span>;
     return (
-      <div className="composed-material">
-        <i className="material-icons">call</i><i className="material-icons second">{icon2}</i>
-        {this.props.callState}
-      </div>
+      <>
+        <div className="composed-material">
+          <i className="material-icons">call</i><i className="material-icons second">{icon2}</i>
+        </div> {duration}
+      </>
     );
   }
 };

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 { isVideoCall, sanitizeUrl } from '../lib/utils.js';
+import { sanitizeUrl } from '../lib/utils.js';
 
 class BaseChatMessage extends React.PureComponent {
   constructor(props) {
@@ -34,11 +34,6 @@ class BaseChatMessage extends React.PureComponent {
       viewportWidth: props.viewportWidth,
       authorizeURL: props.tinode.authorizeURL.bind(props.tinode),
 
-      // Video call related bits.
-      callState: props.callState,
-      isResponse: props.response,
-      callDuration: props.duration,
-
       onImagePreview: this.handleImagePreview,
       onFormButtonClick: this.handleFormButtonClick,
       onQuoteClick: this.handleQuoteClick

src/widgets/contact-list.jsx

@@ -77,7 +77,6 @@ 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) {
@@ -85,7 +84,6 @@ class ContactList extends React.Component {
             if (msg) {
               forwarded = msg.head ? msg.head.forwarded : null;
               deliveryStatus = msg._status || c.msgStatus(msg, true);
-              previewIsVideoCall = msg.head ? (msg.head.webrtc !== undefined) : null;
               previewIsResponse = msg.from != this.props.myUserId;
               if (msg.content) {
                 preview = typeof msg.content == 'string' ?
@@ -102,7 +100,6 @@ 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}