nicer message bubbles for calls

css/base.css

@@ -1727,6 +1727,15 @@ video {
   text-align: center;
 }
 
+.call-message {
+  display: flex;
+  flex-direction: row;
+}
+
+.call-message .duration {
+  font-weight: lighter;
+}
+
 /* Talk bubbles */
 .chat-box {
   list-style: none;
@@ -2419,6 +2428,9 @@ ul.tabbar li.active > a {
 .material-icons.small {
   font-size: 1rem;
 }
+.material-icons.medium {
+  font-size: 1.2rem;
+}
 .material-icons.big {
   font-size: 2.4rem;
 }

src/i18n/de.json

@@ -1377,7 +1377,7 @@
   },
   "calls_incoming": {
     "translation": "",
-    "defaultMessage": "Incoming Call",
+    "defaultMessage": "Incoming call",
     "description": "Incoming call label",
     "missing": true,
     "obsolete": false
@@ -1391,7 +1391,7 @@
   },
   "calls_outgoing": {
     "translation": "",
-    "defaultMessage": "Outgoing Call",
+    "defaultMessage": "Outgoing call",
     "description": "Outgoing call label",
     "missing": true,
     "obsolete": false
@@ -1416,5 +1416,11 @@
     "description": "Error message when the user tried to accept a new call without finishing pervious one",
     "missing": true,
     "obsolete": false
+  },
+  "call_cancelled": {
+    "translation": "",
+    "defaultMessage": "cancelled",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1377,21 +1377,21 @@
   },
   "calls_incoming": {
     "translation": "Incoming Call",
-    "defaultMessage": "Incoming Call",
+    "defaultMessage": "Incoming call",
     "description": "Incoming call label",
     "missing": false,
     "obsolete": false
   },
   "calls_incoming_title": {
-    "translation": "Incoming Call",
+    "translation": "Incoming call",
-    "defaultMessage": "Incoming Call",
+    "defaultMessage": "Incoming call",
     "description": "Incoming call title (Incoming call view)",
     "missing": false,
     "obsolete": true
   },
   "calls_outgoing": {
-    "translation": "Outgoing Call",
+    "translation": "Outgoing call",
-    "defaultMessage": "Outgoing Call",
+    "defaultMessage": "Outgoing call",
     "description": "Outgoing call label",
     "missing": false,
     "obsolete": false
@@ -1416,5 +1416,11 @@
     "description": "Error message when the user tried to accept a new call without finishing pervious one",
     "missing": false,
     "obsolete": false
+  },
+  "call_cancelled": {
+    "translation": "cancelled",
+    "defaultMessage": "cancelled",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1377,7 +1377,7 @@
   },
   "calls_incoming": {
     "translation": "",
-    "defaultMessage": "Incoming Call",
+    "defaultMessage": "Incoming call",
     "description": "Incoming call label",
     "missing": true,
     "obsolete": false
@@ -1391,7 +1391,7 @@
   },
   "calls_outgoing": {
     "translation": "",
-    "defaultMessage": "Outgoing Call",
+    "defaultMessage": "Outgoing call",
     "description": "Outgoing call label",
     "missing": true,
     "obsolete": false
@@ -1416,5 +1416,11 @@
     "description": "Error message when the user tried to accept a new call without finishing pervious one",
     "missing": true,
     "obsolete": false
+  },
+  "call_cancelled": {
+    "translation": "",
+    "defaultMessage": "cancelled",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -123,12 +123,15 @@
     "defaultMessage": "Update",
     "description": "Button [Update]"
   },
+  "call_cancelled": {
+    "defaultMessage": "cancelled"
+  },
   "calls_incoming": {
-    "defaultMessage": "Incoming Call",
+    "defaultMessage": "Incoming call",
     "description": "Incoming call label"
   },
   "calls_outgoing": {
-    "defaultMessage": "Outgoing Call",
+    "defaultMessage": "Outgoing call",
     "description": "Outgoing call label"
   },
   "calls_you_label": {

src/i18n/ko.json

@@ -1377,7 +1377,7 @@
   },
   "calls_incoming": {
     "translation": "",
-    "defaultMessage": "Incoming Call",
+    "defaultMessage": "Incoming call",
     "description": "Incoming call label",
     "missing": true,
     "obsolete": false
@@ -1391,7 +1391,7 @@
   },
   "calls_outgoing": {
     "translation": "",
-    "defaultMessage": "Outgoing Call",
+    "defaultMessage": "Outgoing call",
     "description": "Outgoing call label",
     "missing": true,
     "obsolete": false
@@ -1416,5 +1416,11 @@
     "description": "Error message when the user tried to accept a new call without finishing pervious one",
     "missing": true,
     "obsolete": false
+  },
+  "call_cancelled": {
+    "translation": "",
+    "defaultMessage": "cancelled",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1377,7 +1377,7 @@
   },
   "calls_incoming": {
     "translation": "",
-    "defaultMessage": "Incoming Call",
+    "defaultMessage": "Incoming call",
     "description": "Incoming call label",
     "missing": true,
     "obsolete": false
@@ -1391,7 +1391,7 @@
   },
   "calls_outgoing": {
     "translation": "",
-    "defaultMessage": "Outgoing Call",
+    "defaultMessage": "Outgoing call",
     "description": "Outgoing call label",
     "missing": true,
     "obsolete": false
@@ -1416,5 +1416,11 @@
     "description": "Error message when the user tried to accept a new call without finishing pervious one",
     "missing": true,
     "obsolete": false
+  },
+  "call_cancelled": {
+    "translation": "",
+    "defaultMessage": "cancelled",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1377,7 +1377,7 @@
   },
   "calls_incoming": {
     "translation": "",
-    "defaultMessage": "Incoming Call",
+    "defaultMessage": "Incoming call",
     "description": "Incoming call label",
     "missing": true,
     "obsolete": false
@@ -1391,7 +1391,7 @@
   },
   "calls_outgoing": {
     "translation": "",
-    "defaultMessage": "Outgoing Call",
+    "defaultMessage": "Outgoing call",
     "description": "Outgoing call label",
     "missing": true,
     "obsolete": false
@@ -1416,5 +1416,11 @@
     "description": "Error message when the user tried to accept a new call without finishing pervious one",
     "missing": true,
     "obsolete": false
+  },
+  "call_cancelled": {
+    "translation": "",
+    "defaultMessage": "cancelled",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1377,7 +1377,7 @@
   },
   "calls_incoming": {
     "translation": "",
-    "defaultMessage": "Incoming Call",
+    "defaultMessage": "Incoming call",
     "description": "Incoming call label",
     "missing": true,
     "obsolete": false
@@ -1391,7 +1391,7 @@
   },
   "calls_outgoing": {
     "translation": "",
-    "defaultMessage": "Outgoing Call",
+    "defaultMessage": "Outgoing call",
     "description": "Outgoing call label",
     "missing": true,
     "obsolete": false
@@ -1416,5 +1416,11 @@
     "description": "Error message when the user tried to accept a new call without finishing pervious one",
     "missing": true,
     "obsolete": false
+  },
+  "call_cancelled": {
+    "translation": "",
+    "defaultMessage": "cancelled",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1377,7 +1377,7 @@
   },
   "calls_incoming": {
     "translation": "",
-    "defaultMessage": "Incoming Call",
+    "defaultMessage": "Incoming call",
     "description": "Incoming call label",
     "missing": true,
     "obsolete": false
@@ -1391,7 +1391,7 @@
   },
   "calls_outgoing": {
     "translation": "",
-    "defaultMessage": "Outgoing Call",
+    "defaultMessage": "Outgoing call",
     "description": "Outgoing call label",
     "missing": true,
     "obsolete": false
@@ -1416,5 +1416,11 @@
     "description": "Error message when the user tried to accept a new call without finishing pervious one",
     "missing": true,
     "obsolete": false
+  },
+  "call_cancelled": {
+    "translation": "",
+    "defaultMessage": "cancelled",
+    "missing": true,
+    "obsolete": false
   }
 }

src/widgets/chat-message.jsx

@@ -5,12 +5,12 @@ 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 { fullFormatter } from '../lib/formatters.js';
 import { isVideoCall, sanitizeUrl } from '../lib/utils.js';
-import { secondsToTime } from '../lib/strformat.js';
 
 class BaseChatMessage extends React.PureComponent {
   constructor(props) {
@@ -148,17 +148,11 @@ class BaseChatMessage extends React.PureComponent {
           defaultMessage="content deleted" description="Shown when messages are deleted" />
       </i></>
     } else if (isVideoCall(this.props.mimeType)) {
-      // Video calls.
+      // Video call message.
-      const direction = this.props.response ? 'call_received' : 'call_made';
+      content = <CallMessage
-      const text = this.props.response ?
+        content={this.props.content}
-        <FormattedMessage id="calls_incoming"
+        response={this.props.response}
-          defaultMessage="Incoming Call" description="Incoming call label" /> :
+        duration={this.props.duration} />
-        <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 && this.props.duration ? [' (', secondsToTime(this.props.duration / 1000), ')'] : null}
-      </>
     } else if (typeof content != 'string') {
       content = <><i className="material-icons gray">warning_amber</i> <i className="gray">
         <FormattedMessage id="invalid_content"