adding support for out of band avatars

src/views/acc-general-view.jsx

@@ -9,7 +9,7 @@ import InPlaceEdit from '../widgets/in-place-edit.jsx';
 import TagManager from '../widgets/tag-manager.jsx';
 
 import { MAX_TITLE_LENGTH } from '../config.js';
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 import { arrayEqual, asEmail, asPhone, theCard } from '../lib/utils.js';
 
 export default class AccGeneralView extends React.Component {
@@ -19,7 +19,7 @@ export default class AccGeneralView extends React.Component {
     const me = this.props.tinode.getMeTopic();
     this.state = {
       fullName: me.public ? me.public.fn : undefined,
-      avatar: makeImageUrl(me.public ? me.public.photo : null),
+      avatar: makeImageDataUrl(me.public ? me.public.photo : null),
       tags: me.tags(),
       credentials: me.getCredentials() || [],
       addCredActive: false,

src/views/edit-account-view.jsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import AvatarUpload from '../widgets/avatar-upload.jsx';
 
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 
 export default class EditAccountView extends React.Component {
   constructor(props) {
@@ -13,7 +13,7 @@ export default class EditAccountView extends React.Component {
     const me = this.props.tinode.getMeTopic();
     this.state = {
       fullName: me.public ? me.public.fn : undefined,
-      avatar: makeImageUrl(me.public ? me.public.photo : null)
+      avatar: makeImageDataUrl(me.public ? me.public.photo : null)
     };
   }
 

src/views/info-view.jsx

@@ -17,7 +17,7 @@ import TagManager from '../widgets/tag-manager.jsx';
 
 import { MAX_TITLE_LENGTH, NO_ACCESS_MODE } from '../config.js';
 
-import { makeImageUrl } from '../lib/blob-helpers.js';
+import { makeImageDataUrl } from '../lib/blob-helpers.js';
 import { arrayEqual, theCard } from '../lib/utils.js';
 
 const messages = defineMessages({
@@ -227,7 +227,7 @@ class InfoView extends React.Component {
       muted: acs && acs.isMuted(),
 
       fullName: topic.public ? topic.public.fn : undefined,
-      avatar: makeImageUrl(topic.public ? topic.public.photo : null),
+      avatar: makeImageDataUrl(topic.public ? topic.public.photo : null),
       private: topic.private ? topic.private.comment : null,
       address: topic.name,
       groupTopic: topic.isGroupType(),

src/views/messages-view.jsx

@@ -18,7 +18,7 @@ import SendMessage from '../widgets/send-message.jsx';
 import { DEFAULT_P2P_ACCESS_MODE, IMAGE_PREVIEW_DIM, KEYPRESS_DELAY, MESSAGES_PAGE,
   MAX_EXTERN_ATTACHMENT_SIZE, MAX_IMAGE_DIM, MAX_INBAND_ATTACHMENT_SIZE, READ_DELAY } from '../config.js';
 import { SUPPORTED_IMAGE_FORMATS, blobToBase64, filePasted, fileToBase64,
-  imageScaled, makeImageUrl } from '../lib/blob-helpers.js';
+  imageScaled, makeImageDataUrl } from '../lib/blob-helpers.js';
 import HashNavigation from '../lib/navigation.js';
 import { bytesToHumanSize, shortDateFormat } from '../lib/strformat.js';
 
@@ -261,7 +261,7 @@ class MessagesView extends React.Component {
         if (topic.public) {
           Object.assign(nextState, {
             title: topic.public.fn,
-            avatar: makeImageUrl(topic.public.photo)
+            avatar: makeImageDataUrl(topic.public.photo)
           });
         } else {
           Object.assign(nextState, {
@@ -391,7 +391,7 @@ class MessagesView extends React.Component {
     if (desc.public) {
       this.setState({
         title: desc.public.fn,
-        avatar: makeImageUrl(desc.public.photo)
+        avatar: makeImageDataUrl(desc.public.photo)
       });
     } else {
       this.setState({
@@ -856,7 +856,7 @@ class MessagesView extends React.Component {
             const user = topic.userDesc(thisFrom);
             if (user && user.public) {
               userName = user.public.fn;
-              userAvatar = makeImageUrl(user.public.photo);
+              userAvatar = makeImageDataUrl(user.public.photo);
             }
             userFrom = thisFrom;
             chatBoxClass='chat-box group';

src/views/tinode-web.jsx

@@ -18,7 +18,7 @@ import SidepanelView from './sidepanel-view.jsx';
 import { API_KEY, APP_NAME, DEFAULT_P2P_ACCESS_MODE, LOGGING_ENABLED,
   MEDIA_BREAKPOINT, RECEIVED_DELAY } from '../config.js';
 import { PACKAGE_VERSION } from '../version.js';
-import { base64ReEncode, makeImageUrl } from '../lib/blob-helpers.js';
+import { base64ReEncode, makeImageDataUrl } from '../lib/blob-helpers.js';
 import { detectServerAddress, isLocalHost, isSecureConnection } from '../lib/host-name.js';
 import LocalStorageUtil from '../lib/local-storage.js';
 import HashNavigation from '../lib/navigation.js';
@@ -641,7 +641,7 @@ class TinodeWeb extends React.Component {
       if (desc.public) {
         this.setState({
           sidePanelTitle: desc.public.fn,
-          sidePanelAvatar: makeImageUrl(desc.public.photo)
+          sidePanelAvatar: makeImageDataUrl(desc.public.photo)
         });
       }
       if (desc.acs) {