Move video call message state and duration to head.

'webrtc' header for state.
'webrtc-duration' header for duration.

Content is now Drafty.videoCall() / VC.

src/widgets/call-status.jsx

@@ -11,7 +11,7 @@ export default class CallStatus extends React.PureComponent {
 
     return (
       <div className="composed-material">
-        <i class="material-icons">call</i><i class="material-icons second">{icon2}</i>
+        <i className="material-icons">call</i><i className="material-icons second">{icon2}</i>
       </div>
     );
   }

src/widgets/chat-message.jsx

@@ -5,10 +5,10 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { Drafty, Tinode } from 'tinode-sdk';
 
 import Attachment from './attachment.jsx';
-import CallMessage from './call-message.jsx';
 import LetterTile from './letter-tile.jsx';
 import ReceivedMarker from './received-marker.jsx'
 
+import { CALL_MESSAGE_MIME_TYPE } from '../constants.js'
 import { fullFormatter } from '../lib/formatters.js';
 import { isVideoCall, sanitizeUrl } from '../lib/utils.js';
 
@@ -34,6 +34,12 @@ class BaseChatMessage extends React.PureComponent {
       formatMessage: props.intl.formatMessage.bind(props.intl),
       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
@@ -120,7 +126,7 @@ class BaseChatMessage extends React.PureComponent {
 
     let content = this.props.content;
     const attachments = [];
-    if (this.props.mimeType == Drafty.getContentType() && Drafty.isValid(content)) {
+    if ([Drafty.getContentType(), CALL_MESSAGE_MIME_TYPE].includes(this.props.mimeType) && Drafty.isValid(content)) {
       Drafty.attachments(content, (att, i) => {
         if (att.mime == 'application/json') {
           // Don't show json objects as attachments.
@@ -147,12 +153,6 @@ class BaseChatMessage extends React.PureComponent {
         <FormattedMessage id="deleted_content"
           defaultMessage="content deleted" description="Shown when messages are deleted" />
       </i></>
-    } else if (isVideoCall(this.props.mimeType)) {
-      // Video call message.
-      content = <CallMessage
-        content={this.props.content}
-        response={this.props.response}
-        duration={this.props.duration} />
     } else if (typeof content != 'string') {
       content = <><i className="material-icons gray">warning_amber</i> <i className="gray">
         <FormattedMessage id="invalid_content"

src/widgets/contact.jsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
-import CallStatus from './call-status.jsx';
 import ContactBadges from './contact-badges.jsx';
 import LetterTile from './letter-tile.jsx';
 import UnreadBadge from './unread-badge.jsx';
@@ -71,16 +70,11 @@ class Contact extends React.Component {
 
     // The this.props.preview contains alreay shortened Drafty or string.
     let preview;
-    if (this.props.previewIsVideoCall) {
-      // TODO: use words to describe call status and duration.
-      preview = <CallStatus
-        incoming={this.props.previewIsResponse}
-        success={true} />; // FIXME: use actuall call completion status instead of TRUE.
-    } else if (typeof this.props.preview == 'string') {
+    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,
-        {formatMessage: this.props.intl.formatMessage}));
+        {formatMessage: this.props.intl.formatMessage, previewIsResponse: this.props.previewIsResponse}));
     } else if (this.props.preview) {
       preview =
         <><i className="material-icons gray">warning_amber</i> <i className="gray">