Always render avatar via lit-html

Fixes #2244 by checking if image already is in the `data:` format.

src/converse-chatboxviews.js

@@ -5,7 +5,7 @@
  */
 import './components/converse.js';
 import "@converse/headless/converse-chatboxes";
-import tpl_avatar from "templates/avatar.svg";
+import tpl_avatar from "templates/avatar.js";
 import tpl_background_logo from "templates/background_logo.js";
 import tpl_converse from "templates/converse.js";
 import { Overview } from "@converse/skeletor/src/overview";
@@ -30,11 +30,10 @@ const AvatarMixin = {
                 'classes': avatar_el.getAttribute('class'),
                 'width': avatar_el.getAttribute('width'),
                 'height': avatar_el.getAttribute('height'),
+                'image_type':  this.model.vcard.get('image_type'),
+                'image':  this.model.vcard.get('image')
             }
-            const image_type = this.model.vcard.get('image_type');
-            const image = this.model.vcard.get('image');
-            data['image'] = "data:" + image_type + ";base64," + image;
-            avatar_el.outerHTML = tpl_avatar(data);
+            avatar_el.outerHTML = u.getElementFromTemplateResult(tpl_avatar(data)).outerHTML;
         }
     },
 };

src/templates/avatar.js

 import { html } from "lit-html";
 
+const getImgHref = (image, image_type) => {
+    return image.startsWith('data:') ? image : `data:${image_type};base64,${image}`;
+}
+
 export default  (o) => html`
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="${o.classes}" width="${o.width}" height="${o.height}">
-        <image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" href="data:${o.image_type};base64,${o.image}"/>
+    <svg xmlns="http://www.w3.org/2000/svg" class="avatar ${o.classes}" width="${o.width}" height="${o.height}">
+        <image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" href="${getImgHref(o.image, o.image_type)}"/>
     </svg>`;
+

src/templates/avatar.svg

-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="{{{o.classes}}}" width="{{{o.width}}}" height="{{{o.height}}}">
-    <image width="{{{o.width}}}" height="{{{o.height}}}" preserveAspectRatio="xMidYMid meet" href="{{{o.image}}}"/>
-</svg>

src/templates/directives/avatar.js

-import xss from "xss/dist/xss";
-import { directive, html } from "lit-html";
-import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
-
-
-const whitelist_opts = {
-    'whiteList': {
-        'svg': ['xmlns', 'class', 'width', 'height'],
-        'image': ['width', 'height', 'preserveAspectRatio', 'href']
-    }
-};
-const tpl_svg = (o) => xss.filterXSS(`<image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" href="${o.image}"/>`, whitelist_opts);
-
-const tpl_avatar = (o) => html`
-    <svg xmlns="http://www.w3.org/2000/svg" class="avatar ${o.classes}" width="${o.width}" height="${o.height}">
-        ${ unsafeSVG(tpl_svg(o)) }
-    </svg>
-`;
+import tpl_avatar from '../avatar.js';
+import { directive } from "lit-html";
 
 
 export const renderAvatar = directive(o => part => {
     const data = {
-        'classes': o.classes || '',
+        'classes': o.classes ? `${o.classes} avatar` : 'avatar',
         'height': o.width || 36,
         'image': o.image,
+        'image_type': o.image_type,
         'width': o.height || 36,
     }
     part.setValue(tpl_avatar(data));

src/utils/html.js

@@ -177,10 +177,14 @@ u.applyDragResistance = function (value, default_value) {
 };
 
 
+/**
+ * Return the height of the passed in DOM element,
+ * based on the heights of its children.
+ * @method u#calculateElementHeight
+ * @param {HTMLElement} el
+ * @returns {integer}
+ */
 u.calculateElementHeight = function (el) {
-    /* Return the height of the passed in DOM element,
-     * based on the heights of its children.
-     */
     return Array.from(el.children).reduce((result, child) => result + child.offsetHeight, 0);
 }