more idimatic VC formatting, better presentation of preview

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}