fixing display of avatars by URL

src/widgets/avatar-upload.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 import LetterTile from './letter-tile.jsx';
 import LoadSpinner from './load-spinner.jsx';
 
+import { sanitizeImageUrl } from '../lib/utils.js';
+
 import { AVATAR_SIZE } from '../config.js';
 
 export default class AvatarUpload extends React.Component {
@@ -42,7 +44,7 @@ export default class AvatarUpload extends React.Component {
             <i className="material-icons">clear</i>
           </a>}
         {this.state.source ?
-          <img src={this.state.source} className="preview" /> :
+          <img src={this.props.tinode.authorizeURL(sanitizeImageUrl(this.state.source))} className="preview" /> :
           this.props.readOnly && this.props.uid ?
             <div className="avatar-box">
               <LetterTile

src/widgets/chip-input.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Chip from './chip.jsx';
 
-import { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } 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={makeImageDataUrl(item.public ? item.public.photo : null)}
+          avatar={makeImageUrl(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 { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } 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={makeImageDataUrl(c.public ? c.public.photo : null)}
+              avatar={makeImageUrl(c.public ? c.public.photo : null)}
               comment={comment}
               preview={preview}
               received={deliveryStatus}

src/widgets/cropper.jsx

@@ -129,10 +129,12 @@ export default class Cropper extends React.Component {
     });
 
     // Initial zoom level fills the bounding box at the smallest image dimension and overflows the largest, i.e. "fill" not "fit".
-    let zoom = Math.max((this.bBoxRect.width / imgRect.width), (this.bBoxRect.height / imgRect.height));
+    const zoom = Math.max(this.bBoxRect.width / imgRect.width, this.bBoxRect.height / imgRect.height);
     // Converting from viewport coordinates to container, then panning.
-    let panX = (this.cutoutRect.left - this.bBoxRect.left) - ((imgRect.width - this.cutoutRect.width) / 2);
-    let panY = (this.cutoutRect.top - this.bBoxRect.top) - ((imgRect.height - this.cutoutRect.height) / 2);
+    const panX = this.cutoutRect.left - this.bBoxRect.left -
+      (imgRect.width - this.cutoutRect.width) / 2;
+    const panY = this.cutoutRect.top - this.bBoxRect.top -
+      (imgRect.height - this.cutoutRect.height) / 2;
 
     this.positionAll(panX, panY, zoom);
   }

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 { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } 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={makeImageDataUrl(sub.public ? sub.public.photo : null) || true}
+            avatar={makeImageUrl(sub.public ? sub.public.photo : null) || true}
             title={sub.public ? sub.public.fn : null} />
         </div>
       );

src/widgets/letter-tile.jsx

@@ -23,7 +23,7 @@ export default class LetterTile extends React.PureComponent {
     } else if (this.props.avatar) {
       // If avatar image is invalid, show a placeholder.
       avatar = <img className="avatar" alt="avatar" src={this.props.avatar}
-        onError={(e)=>{e.target.onerror = null; e.target.src="/img/broken_image.png"}} />;
+        onError={(e)=>{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />;
     } else {
       avatar = null;
     }

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 { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } 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={makeImageDataUrl(this.props.userAvatar ? this.props.userAvatar : null)} /></ul> : null}
+            avatar={makeImageUrl(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">

src/widgets/side-navbar.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
-
 import LetterTile from './letter-tile.jsx';
 import ButtonBack from './button-back.jsx';
 import ContactBadges from './contact-badges.jsx';
 import MenuContacts from './menu-contacts.jsx';
 import MenuStart from './menu-start.jsx';
 
+import { sanitizeImageUrl } from '../lib/utils.js';
+
 export default class SideNavbar extends React.PureComponent {
   render() {
     const icon_badges = [];
@@ -15,13 +16,17 @@ export default class SideNavbar extends React.PureComponent {
         icon_badges.push({icon: b, color: 'badge-inv'});
       });
     }
+    let avatar = null;
+    if (this.props.tinode) {
+      avatar = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar));
+    }
     return (
         <div id="side-caption-panel" className="caption-panel">
           {this.props.onCancel ? <ButtonBack onBack={this.props.onCancel} /> : null}
-          {this.props.avatar ?
+          {avatar ?
             <div id="self-avatar" className="avatar-box">
               <LetterTile
-                avatar={this.props.avatar}
+                avatar={avatar}
                 topic={this.props.myUserId}
                 title={this.props.title} />
             </div>