Merge branch 'next' into features

src/widgets/doc-preview.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import SendMessage from '../widgets/send-message.jsx';
 
-import { bytesToHumanSize } from '../lib/strformat.js';
+import { bytesToHumanSize, shortenFileName } from '../lib/strformat.js';
 
 // Get material icon name from mime type.
 function iconFromMime(mime) {
@@ -31,12 +31,14 @@ export default class DocPreview extends React.PureComponent {
     return (
       <div id="image-preview">
         <div id="image-preview-caption-panel">
-          <span>{this.props.content.filename}</span>
+          <span>{this.props.content.name}</span>
           <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
         </div>
         <div id="image-preview-container">
           <div className="flex-column narrow">
             <i className="material-icons gray">{iconFromMime(this.props.content.type)}</i>
+            <div><b><FormattedMessage id="label_file_name" defaultMessage="File name:"
+              description="Label for a file name" /></b> {shortenFileName(this.props.content.name, 24) || '-'}</div>
             <div><b><FormattedMessage id="label_content_type" defaultMessage="Content type:"
               description="Label for file content type (mime)" /></b> {this.props.content.type || 'application/octet-stream'}</div>
             <div><b><FormattedMessage id="label_size" defaultMessage="Size:"

src/widgets/image-preview.jsx

@@ -4,7 +4,7 @@ import SendMessage from '../widgets/send-message.jsx';
 
 import { REM_SIZE } from '../config.js';
 import { fitImageSize } from '../lib/blob-helpers.js';
-import { bytesToHumanSize } from '../lib/strformat.js';
+import { bytesToHumanSize, shortenFileName } from '../lib/strformat.js';
 
 export default class ImagePreview extends React.PureComponent {
   constructor(props) {
@@ -45,29 +45,27 @@ export default class ImagePreview extends React.PureComponent {
     size.maxWidth = '100%';
     size.maxHeight = '100%';
 
-    let filename = this.props.content.filename;
     // Average font aspect ratio is ~0.5; File name takes 1/3 of the viewport width.
     const maxlength = Math.max(((this.state.width / REM_SIZE / 1.5) | 0) - 2, 12);
-    if (filename.length > maxlength) {
-      filename = filename.slice(0, maxlength/2 - 1) + '…' + filename.slice(1 - maxlength/2);
-    }
+    const fname = shortenFileName(this.props.content.name, maxlength) || '-';
+
     const width = this.props.content.width || '-';
     const height = this.props.content.height || '-';
     return (
       <div id="image-preview">
         <div id="image-preview-caption-panel">
           {!this.props.onSendMessage ?
-            <a href={this.props.content.url} download={this.props.content.filename}>
+            <a href={this.props.content.url} download={this.props.content.name}>
               <i className="material-icons">file_download</i> <FormattedMessage
                 id="download_action" defaultMessage="download" description="Call to action [download]" />
             </a>
             :
-            <span>{this.props.content.filename}</span>
+            <span>{fname}</span>
           }
           <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
         </div>
         <div id="image-preview-container" ref={(node) => this.assignWidth(node)}>
-          <img src={this.props.content.url} style={size} className="image-preview" alt={this.props.content.filename} />
+          <img src={this.props.content.url} style={size} className="image-preview" alt={this.props.content.name} />
         </div>
         {this.props.onSendMessage ?
           <SendMessage
@@ -83,7 +81,7 @@ export default class ImagePreview extends React.PureComponent {
             <div>
               <div><b><FormattedMessage id="label_file_name" defaultMessage="File name:"
                 description="Label for a file name" /></b></div>
-              <div><span title={this.props.content.filename}>{filename ? filename : '-'}</span></div>
+              <div><span title={this.props.content.name}>{fname}</span></div>
             </div>
             <div>
               <div><b><FormattedMessage id="label_content_type" defaultMessage="Content type:"

src/widgets/lazy-image.jsx

@@ -0,0 +1,36 @@
+// Image with a placeholder which is replaced when the promise is resolved.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export default class LazyImage extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      src: 'img/placeholder.png',
+      style: Object.assign({padding: '4px'}, this.props.style),
+      className: this.props.className,
+      alt: this.props.alt,
+      onClick: this.props.onClick,
+    };
+  }
+
+  componentDidMount() {
+    this.props.whenDone
+      .then(data => this.setState({src: data.src, style: {...this.state.style, padding: 0}}))
+      .catch(() => this.setState({src: 'img/broken_image.png'}));
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.whenDone != this.props.whenDone) {
+      this.setState({src: 'img/placeholder.png', style: {...this.state.style, padding: '4px'}});
+      this.props.whenDone
+        .then(data => this.setState({src: data.src, style: {...this.state.style, padding: 0}}))
+        .catch(() => this.setState({src: 'img/broken_image.png'}));
+    }
+  }
+
+  render() {
+    return React.createElement('img', this.state);
+  }
+};

src/widgets/send-message.jsx

@@ -5,7 +5,7 @@ import { Drafty } from 'tinode-sdk';
 
 import { KEYPRESS_DELAY } from '../config.js';
 import { filePasted } from '../lib/blob-helpers.js';
-import { quoteFormatter } from '../lib/formatters.js';
+import { quoteFormatter, replyFormatter } from '../lib/formatters.js';
 
 const messages = defineMessages({
   messaging_disabled: {
@@ -59,6 +59,13 @@ class SendMessage extends React.PureComponent {
     if (this.messageEditArea) {
       this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
     }
+
+    this.setState({quote: this.props.replyTo ?
+      Drafty.format(this.props.replyTo.content, replyFormatter, {
+        formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
+        authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
+      }) :
+      null});
   }
 
   componentWillUnmount() {
@@ -67,10 +74,19 @@ class SendMessage extends React.PureComponent {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     if (this.messageEditArea) {
       this.messageEditArea.focus();
     }
+
+    if (prevProps.replyTo != this.props.replyTo) {
+      this.setState({quote: this.props.replyTo ?
+        Drafty.format(this.props.replyTo.content, replyFormatter, {
+          formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
+          authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
+        }) :
+        null});
+    }
   }
 
   handlePasteEvent(e) {
@@ -161,21 +177,14 @@ class SendMessage extends React.PureComponent {
         formatMessage(messages[this.props.messagePrompt]) :
         formatMessage(messages.type_new_message));
 
-    const quote = this.props.replyTo ?
-      Drafty.format(this.props.replyTo.content, quoteFormatter, {
-        formatMessage: formatMessage.bind(this.props.intl),
-        authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
-      }) :
-      null;
-
     return (
       <div id="send-message-wrapper">
-      {quote ?
+      {this.state.quote ?
         <div id="reply-quote-preview">
           <div className="cancel">
             <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
           </div>
-          {quote}
+          {this.state.quote}
         </div>
       :
       null}