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;
+      if (data) {
-      attr.incoming = this.isResponse;
+        attr.callState = data.state;
-      attr.duration = this.callDuration;
+        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;
+      if (data) {
-      attr.incoming = this.previewIsResponse;
+        attr.callState = data.state;
-      attr.duration = this.callDuration;
+        attr.incoming = data.incoming;
-      attr.success = true; // FIXME: use actuall call completion status instead of TRUE.
+        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']]
+    const isCallDropped = this.props.callState == 'disconnected';
-      [this.props.incoming ? 0 : 1][this.props.success ? 0 : 1] || 'question_mark';
+    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>
+        <div className="composed-material">
-        {this.props.callState}
+          <i className="material-icons">call</i><i className="material-icons second">{icon2}</i>
-      </div>
+        </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}

umd/index.dev.js

@@ -2627,9 +2627,13 @@ function fullFormatter(style, data, values, key, stack) {
     case 'VC':
       el = _widgets_call_message_jsx__WEBPACK_IMPORTED_MODULE_4__["default"];
       values = null;
-      attr.callState = this.callState;
+
-      attr.incoming = this.isResponse;
+      if (data) {
-      attr.duration = this.callDuration;
+        attr.callState = data.state;
+        attr.incoming = data.incoming;
+        attr.duration = data.duration;
+      }
+
       break;
 
     default:
@@ -2739,11 +2743,13 @@ function previewFormatter(style, data, values, key) {
 
     case 'VC':
       el = _widgets_call_status_jsx__WEBPACK_IMPORTED_MODULE_5__["default"];
-      attr.callState = this.callState;
+
-      attr.incoming = this.previewIsResponse;
+      if (data) {
-      attr.duration = this.callDuration;
+        attr.callState = data.state;
-      ;
+        attr.incoming = data.incoming;
-      attr.success = true;
+        attr.duration = data.duration;
+      }
+
       values = null;
       break;
 
@@ -5401,8 +5407,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
 /* harmony import */ var _lib_navigation_js__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../lib/navigation.js */ "./src/lib/navigation.js");
 /* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
-/* harmony import */ var _lib_utils_js__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../lib/utils.js */ "./src/lib/utils.js");
-
 
 
 
@@ -6576,14 +6580,11 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
               prevDate = thisDate;
             }
 
-            const duration = msg.head ? msg.head['webrtc-duration'] : undefined;
             messageNodes.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_chat_message_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], {
               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,
@@ -11576,17 +11577,36 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-intl */ "react-intl");
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
+
+
 
 class CallStatus extends (react__WEBPACK_IMPORTED_MODULE_0___default().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';
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    const icon2 = this.props.incoming ? isCallDropped ? 'call_missed' : 'call_received' : isCallDropped ? 'call_missed_outgoing' : 'call_made';
+    const duration = isCallDropped ? this.props.incoming ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "call_missed",
+      defaultMessage: [{
+        "type": 0,
+        "value": "missed"
+      }]
+    }) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "call_cancelled",
+      defaultMessage: [{
+        "type": 0,
+        "value": "cancelled"
+      }]
+    }) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_2__.secondsToTime)(this.props.duration / 1000));
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "composed-material"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons"
     }, "call"), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons second"
-    }, icon2), this.props.callState);
+    }, icon2)), " ", duration);
   }
 
 }
@@ -11647,9 +11667,6 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
       formatMessage: props.intl.formatMessage.bind(props.intl),
       viewportWidth: props.viewportWidth,
       authorizeURL: props.tinode.authorizeURL.bind(props.tinode),
-      callState: props.callState,
-      isResponse: props.response,
-      callDuration: props.duration,
       onImagePreview: this.handleImagePreview,
       onFormButtonClick: this.handleFormButtonClick,
       onQuoteClick: this.handleQuoteClick
@@ -12310,7 +12327,6 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
           const comment = Array.isArray(c.private) ? c.private.join(',') : c.private ? c.private.comment : null;
           let preview;
           let forwarded;
-          let previewIsVideoCall;
           let previewIsResponse;
           let deliveryStatus;
 
@@ -12320,7 +12336,6 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
             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) {
@@ -12335,7 +12350,6 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
             avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_5__.makeImageUrl)(c.public ? c.public.photo : null),
             comment: comment,
             preview: preview,
-            previewIsVideoCall: previewIsVideoCall,
             previewIsResponse: previewIsResponse,
             forwarded: forwarded,
             received: deliveryStatus,