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

Show MUC avatar

Browse Source
This commit is contained in:
JC Brand 2022-04-19 21:54:10 +02:00
parent 2a9a01bc32
commit 699326547a
4 changed files with 39 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/headless/plugins/vcard/index.js
View File

@ -65,9 +65,6 @@ converse.plugins.add('converse-vcard', {
},
initialize () {
/* The initialize function gets called as soon as the plugin is
* loaded by converse.js's plugin machinery.
*/
api.promises.add('VCardsInitialized');
_converse.VCard = VCard;

3
src/plugins/chatview/utils.js
View File

@ -1,7 +1,6 @@
import { __ } from 'i18n';
import { _converse } from "@converse/headless/core";
import { _converse, api } from "@converse/headless/core";
import { html } from 'lit';
import { api } from "@converse/headless/core";
export function clearHistory (jid) {
if (_converse.router.history.getFragment() === `converse/chat?jid=${jid}`) {

58
src/plugins/muc-views/heading.js
View File

@ -1,55 +1,48 @@
import { ElementView } from '@converse/skeletor/src/element.js';
import MUCInviteModal from './modals/muc-invite.js';
import NicknameModal from './modals/nickname.js';
import RoomDetailsModal from './modals/muc-details.js';
import debounce from 'lodash-es/debounce';
import tpl_muc_head from './templates/muc-head.js';
import { CustomElement } from 'shared/components/element.js';
import { Model } from '@converse/skeletor/src/model.js';
import { __ } from 'i18n';
import { _converse, api, converse } from "@converse/headless/core";
import { _converse, api, converse } from "@converse/headless/core.js";
import { destroyMUC, showModeratorToolsModal } from './utils.js';
import {
getHeadingDropdownItem,
getHeadingStandaloneButton,
} from 'plugins/chatview/utils.js';
import { render } from 'lit';
import './styles/muc-head.scss';
export default class MUCHeading extends ElementView {
export default class MUCHeading extends CustomElement {
async connectedCallback () {
super.connectedCallback();
async initialize () {
this.model = _converse.chatboxes.get(this.getAttribute('jid'));
this.debouncedRender = debounce(this.render, 100);
this.listenTo(this.model, 'change', this.debouncedRender);
this.listenTo(this.model, 'change', () => this.requestUpdate());
this.listenTo(this.model, 'vcard:add', () => this.requestUpdate());
this.listenTo(this.model, 'vcard:change', () => this.requestUpdate());
const user_settings = await _converse.api.user.settings.getModel();
this.listenTo(user_settings, 'change:mucs_with_hidden_subject', this.debouncedRender);
this.user_settings = await _converse.api.user.settings.getModel();
this.listenTo(this.user_settings, 'change:mucs_with_hidden_subject', () => this.requestUpdate());
await this.model.initialized;
this.listenTo(this.model.features, 'change:open', this.debouncedRender);
this.listenTo(this.model.features, 'change:open', () => this.requestUpdate());
this.model.occupants.forEach(o => this.onOccupantAdded(o));
this.listenTo(this.model.occupants, 'add', this.onOccupantAdded);
this.listenTo(this.model.occupants, 'change:affiliation', this.onOccupantAffiliationChanged);
this.render();
this.requestUpdate();
}
async render () {
const tpl = await this.generateHeadingTemplate();
render(tpl, this);
render () {
return (this.model && this.user_settings) ? tpl_muc_head(this) : '';
}
onOccupantAdded (occupant) {
if (occupant.get('jid') === _converse.bare_jid) {
this.debouncedRender();
this.requestUpdate();
}
}
onOccupantAffiliationChanged (occupant) {
if (occupant.get('jid') === _converse.bare_jid) {
this.debouncedRender();
this.requestUpdate();
}
}
@ -188,28 +181,9 @@ export default class MUCHeading extends ElementView {
if (chatview) {
return _converse.api.hook('getHeadingButtons', chatview, buttons);
} else {
return buttons; // Happens during tests
return Promise.resolve(buttons); // Happens during tests
}
}
/**
* Returns the groupchat heading TemplateResult to be rendered.
*/
async generateHeadingTemplate () {
const subject_hidden = await this.model.isSubjectHidden();
const heading_btns = await this.getHeadingButtons(subject_hidden);
const standalone_btns = heading_btns.filter(b => b.standalone);
const dropdown_btns = heading_btns.filter(b => !b.standalone);
return tpl_muc_head(
Object.assign(this.model.toJSON(), {
_converse,
subject_hidden,
'dropdown_btns': dropdown_btns.map(b => getHeadingDropdownItem(b)),
'standalone_btns': standalone_btns.map(b => getHeadingStandaloneButton(b)),
'title': this.model.getDisplayName()
})
);
}
}
api.elements.define('converse-muc-heading', MUCHeading);

29
src/plugins/muc-views/templates/muc-head.js
View File

@ -1,28 +1,43 @@
import 'shared/components/dropdown.js';
import 'shared/components/rich-text.js';
import { __ } from 'i18n';
import { _converse, api } from "@converse/headless/core";
import { _converse, api } from "@converse/headless/core.js";
import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
import { html } from "lit";
import { until } from 'lit/directives/until.js';
const tpl_standalone_btns = (o) => o.standalone_btns.reverse().map(b => until(b, ''));
export default (o) => {
export default (el) => {
const o = el.model.toJSON();
const subject_hidden = el.user_settings?.get('mucs_with_hidden_subject', [])?.includes(el.model.get('jid'));
const i18n_hide_topic = __('Hide the groupchat topic');
const i18n_bookmarked = __('This groupchat is bookmarked');
const subject = o.subject ? o.subject.text : '';
const show_subject = (subject && !o.subject_hidden);
const show_subject = (subject && !subject_hidden);
const muc_vcard = el.model.vcard?.get('image');
return html`
<div class="chatbox-title ${ show_subject ? '' : "chatbox-title--no-desc"}">
${ muc_vcard && muc_vcard !== _converse.DEFAULT_IMAGE ? html`
<converse-avatar class="avatar align-self-center"
.data=${el.model.vcard?.attributes}
nonce=${el.model.vcard?.get('vcard_updated')}
height="40" width="40"></converse-avatar>` : ''
}
<div class="chatbox-title--row">
${ (!_converse.api.settings.get("singleton")) ? html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
<div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ o.title }
<div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ el.model.getDisplayName() }
${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' }
</div>
</div>
<div class="chatbox-title__buttons row no-gutters">
${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' }
${ o.dropdown_btns.length ? html`<converse-dropdown class="dropleft" color="var(--chatroom-head-color)" .items=${o.dropdown_btns}></converse-dropdown>` : '' }
${ until(el.getHeadingButtons(subject_hidden).then((buttons) => {
const dropdown_btns = buttons.filter(b => !b.standalone).map(b => getHeadingDropdownItem(b));
return html`
${ buttons.filter(b => b.standalone).reverse().map(b => until(getHeadingStandaloneButton(b), '')) }
${ dropdown_btns.length ? html`<converse-dropdown class="dropleft" color="var(--chatroom-head-color)" .items=${dropdown_btns}></converse-dropdown>` : '' }`
}), '') }
</div>
</div>
${ show_subject ? html`<p class="chat-head__desc" title="${i18n_hide_topic}">