show sock broken_image when the image is invalid

src/config.js

@@ -32,6 +32,9 @@ export const REM_SIZE = 13;
 // a square of this size.
 export const AVATAR_SIZE = 128;
 
+// Size of the broken_image shown in MessagesView
+export const BROKEN_IMAGE_SIZE = 48;
+
 // Number of chat messages to fetch in one call.
 export const MESSAGES_PAGE = 24;
 

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.15.12-rc1";
+export const PACKAGE_VERSION = "0.15.12-rc3";

src/widgets/chat-message.jsx

@@ -146,7 +146,7 @@ export default class ChatMessage extends React.Component {
 };
 
 // Convert Drafty object to a tree of React elements.
-import { REM_SIZE } from '../config.js';
+import { BROKEN_IMAGE_SIZE, REM_SIZE } from '../config.js';
 import { fitImageSize } from '../lib/blob-helpers.js';
 
 function draftyFormatter(style, data, values, key) {
@@ -162,7 +162,9 @@ function draftyFormatter(style, data, values, key) {
           attr.onClick = this.handlePreviewImage;
           let dim = fitImageSize(data.width, data.height,
             Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 36), REM_SIZE * 24, false);
-          attr.style = dim ? { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' } : null;
+          dim = dim || {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
+          attr.style = { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' };
+          attr.src = attr.src || 'img/broken_image.png';
         }
         break;
       case 'BN':

src/widgets/image-preview.jsx

@@ -23,19 +23,21 @@ export default class ImagePreview extends React.PureComponent {
     if (!this.props.content) {
       return null;
     }
-    var instance = this;
+    const instance = this;
-    var dim = fitImageSize(this.props.content.width, this.props.content.height,
+    const dim = fitImageSize(this.props.content.width, this.props.content.height,
       this.state.width, this.state.height, false);
-    var size = dim ? { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' } :
+    const size = dim ? { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' } :
       ((this.props.content.width > this.props.content.height) ? {width: '100%'} : {height: '100%'});
     size.maxWidth = '100%';
     size.maxHeight = '100%';
 
-    var filename = this.props.content.filename;
+    let filename = this.props.content.filename;
-    var maxlength = (this.props.content.width / REM_SIZE) | 0;
+    const maxlength = (this.props.content.width / REM_SIZE) | 0;
     if (filename.length > maxlength) {
       filename = filename.slice(0, maxlength-2) + '...' + filename.slice(2-maxlength);
     }
+    const width = this.props.content.width || '-';
+    const height = this.props.content.height || '-';
     return (
       <div id="image-preview" onClick={this.props.onClose}>
         <div id="image-preview-caption-panel">
@@ -52,7 +54,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}</span></div>
+            <div><span title={this.props.content.filename}>{filename ? filename : '-'}</span></div>
           </div>
           <div>
             <div><b><FormattedMessage id="label_content_type" defaultMessage="Content type:"
@@ -62,7 +64,7 @@ export default class ImagePreview extends React.PureComponent {
           <div>
             <div><b><FormattedMessage id="label_size" defaultMessage="Size:"
               description="Label for file size" /></b></div>
-            <div>{this.props.content.width} &times; {this.props.content.height} px; {bytesToHumanSize(this.props.content.size)}</div>
+            <div>{width} &times; {height} px; {bytesToHumanSize(this.props.content.size)}</div>
           </div>
         </div>
       </div>