Load avatar data over HTTP if available in vCard EXTVAL

Author: edshot99

src/headless/plugins/vcard/parsers.js

@@ -12,6 +12,7 @@ export async function parseVCardResultStanza(iq) {
         fullname: iq.querySelector(':scope > vCard FN')?.textContent,
         image: iq.querySelector(':scope > vCard PHOTO BINVAL')?.textContent,
         image_type: iq.querySelector(':scope > vCard PHOTO TYPE')?.textContent,
+        image_url: iq.querySelector(':scope > vCard PHOTO EXTVAL')?.textContent,
         nickname: iq.querySelector(':scope > vCard NICKNAME')?.textContent,
         role: iq.querySelector(':scope > vCard ROLE')?.textContent,
         stanza: iq, // TODO: remove?
@@ -21,7 +22,10 @@ export async function parseVCardResultStanza(iq) {
         vcard_error: undefined,
         image_hash: undefined,
     };
-    if (result.image) {
+    if (result.image_url) {
+        result['image_url'] = result.image_url;
+    }
+    else if (result.image) {
         const buffer = u.base64ToArrayBuffer(result.image);
         const ab = await crypto.subtle.digest('SHA-1', buffer);
         result['image_hash'] = u.arrayBufferToHex(ab);

src/headless/plugins/vcard/types.ts

@@ -10,6 +10,7 @@ export interface VCardResult {
     image?: string;
     image_hash?: string;
     image_type?: string;
+    image_url?: string;
     nickname?: string;
     role?: string;
     stanza: Element;
@@ -25,6 +26,7 @@ export type VCardData = {
     role?: string;
     email?: string;
     url?: string;
+    image_url?: string;
     image_type?: string;
     image?: string;
 };

src/headless/plugins/vcard/utils.js

@@ -39,13 +39,14 @@ export function createStanza(type, jid, vcard_el) {
  * @param {MUCOccupant} occupant
  */
 export function onOccupantAvatarChanged(occupant) {
+    const url = occupant.get('image_url');
     const hash = occupant.get('image_hash');
     const vcards = [];
     if (occupant.get('jid')) {
         vcards.push(_converse.state.vcards.get(occupant.get('jid')));
     }
     vcards.push(_converse.state.vcards.get(occupant.get('from')));
-    vcards.forEach((v) => hash && v && v?.get('image_hash') !== hash && api.vcard.update(v, true));
+    vcards.forEach((v) => hash && v && (v?.get('image_url') !== url || v?.get('image_hash') !== hash) && api.vcard.update(v, true));
 }
 
 /**

src/shared/avatar/avatar.js

@@ -29,23 +29,25 @@ export default class Avatar extends CustomElement {
     }
 
     render() {
+        let image_url;
         let image_type;
         let image;
         let data_uri;
         if (this.pickerdata) {
             image_type = this.pickerdata.image_type;
             data_uri = this.pickerdata.data_uri;
         } else {
+            image_url = this.model?.vcard?.get('image_url');
             image_type = this.model?.vcard?.get('image_type');
             image = this.model?.vcard?.get('image');
         }
 
-        if (image_type && (image || data_uri)) {
+        if (image_type && (image_url || image || data_uri)) {
             return tplAvatar({
                 classes: this.getAttribute('class'),
                 height: this.height,
                 width: this.width,
-                image: data_uri || `data:${image_type};base64,${image}`,
+                image: image_url || data_uri || `data:${image_type};base64,${image}`,
                 image_type,
                 alt_text: __('The profile picture of %1$s', this.name),
             });

src/shared/avatar/templates/avatar.js

@@ -5,7 +5,12 @@ import { html, nothing } from 'lit';
  * @param {string} image_type
  */
 const getImgHref = (image, image_type) => {
-    return image.startsWith('data:') ? image : `data:${image_type};base64,${image}`;
+    if (image.startsWith('https:') || image.startsWith('data:')) {
+        return image;
+    }
+    else {
+        return `data:${image_type};base64,${image}`;
+    }
 };
 
 export default (o) => {