adding support for out of band avatars

src/widgets/avatar-upload.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import LetterTile from './letter-tile.jsx';
 
 import { AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE } from '../config.js';
-import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
+import { imageScaled, blobToBase64, makeImageDataUrl } from '../lib/blob-helpers.js';
 
 export default class AvatarUpload extends React.Component {
   constructor(props) {
@@ -28,7 +28,7 @@ export default class AvatarUpload extends React.Component {
       (mime, blob) => {
         // Convert blob to base64-encoded bits.
         blobToBase64(blob, (unused, base64bits) => {
-          const du = makeImageUrl({data: base64bits, type: mime});
+          const du = makeImageDataUrl({data: base64bits, type: mime});
           this.setState({dataUrl: du});
           this.props.onImageChanged(du);
         });

src/widgets/chip-input.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Chip from './chip.jsx';
 
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
 /* BEGIN ChipInput: group membership widget */
 export default class ChipInput extends React.Component {
@@ -119,7 +119,7 @@ export default class ChipInput extends React.Component {
       chips.push(
         <Chip
           onCancel={this.handleChipCancel}
-          avatar={makeImageUrl(item.public ? item.public.photo : null)}
+          avatar={makeImageDataUrl(item.public ? item.public.photo : null)}
           title={item.public ? item.public.fn : undefined}
           noAvatar={this.props.avatarDisabled}
           topic={item.user}

src/widgets/contact-list.jsx

@@ -9,7 +9,7 @@ import Tinode from 'tinode-sdk';
 import Contact from './contact.jsx';
 import ContactAction from './contact-action.jsx';
 
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
 import { MESSAGE_PREVIEW_LENGTH } from '../config.js';
 
@@ -90,7 +90,7 @@ class ContactList extends React.Component {
           contactNodes.push(
             <Contact
               title={c.public ? c.public.fn : null}
-              avatar={makeImageUrl(c.public ? c.public.photo : null)}
+              avatar={makeImageDataUrl(c.public ? c.public.photo : null)}
               comment={comment}
               preview={preview}
               received={deliveryStatus}

src/widgets/group-subs.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import { MAX_ONLINE_IN_TOPIC } from '../config.js'
 
 import LetterTile from './letter-tile.jsx';
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
 export default class GroupSubs extends React.Component {
   constructor(props) {
@@ -23,7 +23,7 @@ export default class GroupSubs extends React.Component {
         <div className="avatar-box" key={sub.user}>
           <LetterTile
             topic={sub.user}
-            avatar={makeImageUrl(sub.public ? sub.public.photo : null) || true}
+            avatar={makeImageDataUrl(sub.public ? sub.public.photo : null) || true}
             title={sub.public ? sub.public.fn : null} />
         </div>
       );

src/widgets/permissions-editor.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import CheckBox from './checkbox.jsx';
 import Contact from './contact.jsx';
 
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
 // Translatable permission names.
 const messages = defineMessages({
@@ -135,7 +135,7 @@ class PermissionsEditor extends React.Component {
           <ul className="contact-box"><Contact
             item={this.props.item}
             title={this.props.userTitle}
-            avatar={makeImageUrl(this.props.userAvatar ? this.props.userAvatar : null)} /></ul> : null}
+            avatar={makeImageDataUrl(this.props.userAvatar ? this.props.userAvatar : null)} /></ul> : null}
         <label className="small"><FormattedMessage id="title_permissions"
           defaultMessage="Permissions" description="Section title"/></label>
         <table className="permission-editor">