More UI tweaks (calls).

1. Localize video call messages.
2. Display call message previews correctly.

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';
+}

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 {
         <FormattedMessage id="deleted_content"
           defaultMessage="content deleted" description="Shown when messages are deleted" />
       </i></>
-    } 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";
+      const text = this.props.response ?
-      content = <><i className="material-icons" style={{color:this.props.content == "disconnected" ? "red" : "green"}}>{direction}</i>{text}
+        <FormattedMessage id="calls_incoming"
-        (<FormattedDuration seconds={this.props.duration / 1000} format="{hours} {minutes} {seconds}" />)
+          defaultMessage="Incoming Call" description="Incoming call label" /> :
+        <FormattedMessage id="calls_outgoing"
+          defaultMessage="Outgoing Call" description="Outgoing call label" />;
+      const isCallDropped = this.props.content == "disconnected";
+      content = <><i className="material-icons" style={{color: isCallDropped ? "red" : "green"}}>{direction}</i>{text}
+        { !isCallDropped ?
+          [' (', <FormattedDuration seconds={this.props.duration / 1000} format="{hours} {minutes} {seconds}" />, ')'] :
+          null}
       </>
     } else if (typeof content != 'string') {
       content = <><i className="material-icons gray">warning_amber</i> <i className="gray">

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}

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 = <><i className='material-icons'>{this.props.previewIsResponse ? 'call_received' : 'call_made'}</i>
+                  <i className='material-icons'>video_call</i></>;
+    } 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,

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 {
           <div className="video-container-panel">
             <div className="video-elem">
               <video id="localVideo" ref={this.localRef} autoPlay muted playsInline></video>
-              <div className="video-title">You</div>
+              <div className="video-title">
+                <FormattedMessage id="calls_you_label"
+                  defaultMessage="You" description="Shown over the local video screen" />
+              </div>
             </div>
             <div className="video-elem">
               <video id="remoteVideo" ref={this.remoteRef} autoPlay playsInline></video>