Fix rendering of SVG avatars

src/converse-chatview.js

@@ -1093,8 +1093,8 @@ converse.plugins.add('converse-chatview', {
             },
 
             toHTML () {
-                const vcard = this.model?.vcard,
-                      vcard_json = vcard ? vcard.toJSON() : {};
+                const vcard = this.model?.vcard;
+                const vcard_json = vcard ? vcard.toJSON() : {};
                 return tpl_user_details_modal(Object.assign(
                     this.model.toJSON(),
                     vcard_json, {

src/templates/avatar.js

@@ -2,5 +2,5 @@ import { html } from "lit-html";
 
 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" xlink:href="${o.image}"/>
+        <image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" href="data:${o.image_type};base64,${o.image}"/>
     </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" xlink:href="{{{o.image}}}"/>
+    <image width="{{{o.width}}}" height="{{{o.height}}}" preserveAspectRatio="xMidYMid meet" href="{{{o.image}}}"/>
 </svg>

src/templates/chatbox_head.js

@@ -18,7 +18,7 @@ export default (o) => {
         <div class="chatbox-title ${ o.status ? '' :  "chatbox-title--no-desc"}">
             <div class="chatbox-title--row">
                 ${ (!o._converse.api.settings.get("singleton")) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
-                ${ (o.type !== o._converse.HEADLINES_TYPE) ? avatar(Object.assign({}, o, avatar_data)) : '' }
+                ${ (o.type !== o._converse.HEADLINES_TYPE) ? html`<span class="mr-2">${avatar(Object.assign({}, o, avatar_data))}</span>` : '' }
                 <div class="chatbox-title__text" title="${o.jid}">
                     ${ o.url ? html`<a href="${o.url}" target="_blank" rel="noopener" class="user">${o.display_name}</a>` : o.display_name}
                 </div>

src/templates/directives/avatar.js

@@ -5,14 +5,14 @@ import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
 
 const whitelist_opts = {
     'whiteList': {
-        'svg': ['xmlns', 'xmlns:xlink', 'class', 'width', 'height'],
-        'image': ['width', 'height', 'preserveAspectRatio', 'xlink:href']
+        '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" xlink:href="${o.image}"/>`, whitelist_opts);
+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" xmlns:xlink="http://www.w3.org/1999/xlink" class="avatar ${o.classes}" width="${o.width}" height="${o.height}">
+    <svg xmlns="http://www.w3.org/2000/svg" class="avatar ${o.classes}" width="${o.width}" height="${o.height}">
         ${ unsafeSVG(tpl_svg(o)) }
     </svg>
 `;

src/templates/user_details_modal.js

@@ -38,8 +38,8 @@ const fingerprints = (o) => {
         <ul class="list-group fingerprints">
             <li class="list-group-item active">${i18n_fingerprints}</li>
             ${ devices.length ?
-                    devices.map(device => device_fingerprint(Object.assign({device}, o))) :
-                    html`<li class="list-group-item"> ${i18n_no_devices} </li>` }
+                devices.map(device => device_fingerprint(Object.assign({device}, o))) :
+                html`<li class="list-group-item"> ${i18n_no_devices} </li>` }
         </ul>
     `;
 }
@@ -65,7 +65,9 @@ export default (o) => {
     const i18n_url = __('URL');
     const avatar_data = {
         'alt_text': i18n_profile,
-        'extra_classes': 'mb-3'
+        'extra_classes': 'mb-3',
+        'height': '120',
+        'width': '120'
     }
 
     return html`
@@ -76,7 +78,7 @@ export default (o) => {
                     ${modal_header_close_button}
                 </div>
                 <div class="modal-body">
-                    ${ o.image ? avatar(Object.assign(avatar_data, o)) : '' }
+                    ${ o.image ? html`<div class="mb-4">${avatar(Object.assign(o, avatar_data))}</div>` : '' }
                     ${ o.fullname ? html`<p><label>${i18n_full_name}:</label> ${o.fullname}</p>` : '' }
                     <p><label>${i18n_address}:</label> <a href="xmpp:${o.jid}">${o.jid}</a></p>
                     ${ o.nickname ? html`<p><label>${i18n_nickname}:</label> ${o.nickname}</p>` : '' }