adding support for out of band avatars

src/lib/blob-helpers.js

@@ -6,10 +6,15 @@ import { bytesToHumanSize } from './strformat.js'
 export const SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/gif', 'image/png', 'image/svg', 'image/svg+xml'];
 export const MIME_EXTENSIONS         = ['jpg',        'gif',       'png',       'svg',       'svg'];
 
-// Make a data URL from public.photo
-export function makeImageUrl(photo) {
-  return (photo && photo.type && photo.data) ?
-    'data:image/' + photo.type + ';base64,' + photo.data : null;
+// Make a data: URL from public.photo
+export function makeImageDataUrl(photo) {
+  if (photo) {
+    if (photo.data && photo.type) {
+      return 'data:image/' + photo.type + ';base64,' + photo.data;
+    }
+    return photo.ref;
+  }
+  return null;
 }
 
 // Calculate linear dimensions for scaling image down to fit under a certain size.

src/lib/utils.js

@@ -19,23 +19,35 @@ export function updateFavicon(count) {
   document.title = (count > 0 ? '('+count+') ' : '') + 'Tinode';
 }
 
-// Create theCard which represents topic 'public' info.
-export function theCard(fn, imageDataUrl) {
+// Create theCard which represents user's or topic's "public" info.
+export function theCard(fn, imageUrl, imageMimeType) {
   let card = null;
+  fn = fn && fn.trim();
 
-  if ((fn && fn.trim()) || imageDataUrl) {
-    card = {};
-    if (fn) {
-      card.fn = fn.trim();
-    }
-    if (imageDataUrl) {
-      const dataStart = imageDataUrl.indexOf(',');
-      card.photo = dataStart >= 0 ? {
-        data: imageDataUrl.substring(dataStart+1),
-        type: 'jpg'
-      } : imageDataUrl;
-    }
+  if (fn) {
+    card = {
+      fn: fn
+    };
   }
+
+  if (imageUrl) {
+    card = card || {};
+    let mimeType = imageMimeType;
+    // Is this a data URL "data:[<mediatype>][;base64],<data>"?
+    const matches = /^data:(image\/[-a-z0-9+.]+)(;base64)?,/i.exec(imageUrl);
+    if (matches) {
+      mimeType = matches[1];
+      card.photo = {
+        data: imageUrl.substring(imageUrl.indexOf(',') + 1)
+      };
+    } else {
+      card.photo = {
+        ref: imageUrl
+      };
+    }
+    card.photo.type = (mimeType || 'image/jpeg').substring('image/'.length);
+  }
+
   return card;
 }