Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use converse-avatar and fix bug...

Browse Source 
where avatar didn't show in 1:1 chat heading (due to a race condition)
This commit is contained in:
JC Brand 2021-11-19 11:04:42 +01:00
parent f36c3fefdd
commit 8db12e61bf
3 changed files with 3 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/headless/plugins/vcard.js
View File

@ -181,6 +181,7 @@ converse.plugins.add('converse-vcard', {
model.vcard = _converse.vcards.create({'jid': jid});
}
model.vcard.on('change', () => model.trigger('vcard:change'));
model.trigger('vcard:add');
}

1
src/plugins/chatview/heading.js
View File

@ -12,6 +12,7 @@ export default class ChatHeading extends CustomElement {
initialize () {
this.model = _converse.chatboxes.get(this.getAttribute('jid'));
this.listenTo(this.model, 'change:status', this.requestUpdate);
this.listenTo(this.model, 'vcard:add', this.requestUpdate);
this.listenTo(this.model, 'vcard:change', this.requestUpdate);
if (this.model.contact) {
this.listenTo(this.model.contact, 'destroy', this.requestUpdate);

14
src/plugins/chatview/templates/chat-head.js
View File

@ -2,7 +2,6 @@ import { __ } from 'i18n';
import { _converse } from '@converse/headless/core';
import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
import { html } from "lit";
import { renderAvatar } from 'shared/directives/avatar.js';
import { until } from 'lit/directives/until.js';
@ -19,19 +18,8 @@ async function getDropdownButtons (promise) {
}
export default (o) => {
const vcard = o.model?.vcard;
const vcard_json = vcard ? vcard.toJSON() : {};
const i18n_profile = __("The User's Profile Image");
const avatar_data = Object.assign(
{
'alt_text': i18n_profile,
'extra_classes': '',
'height': 40,
'width': 40
},
vcard_json
);
const avatar = html`<span class="mr-2">${renderAvatar(avatar_data)}</span>`;
const avatar = html`<span title="${i18n_profile}"><converse-avatar class="avatar chat-msg__avatar" .model=${o.model.vcard} height="40" width="40"></converse-avatar></span>`;
const display_name = o.model.getDisplayName();
const tpl_dropdown_btns = () => getDropdownButtons(o.heading_buttons_promise)