diff --git a/conversejs/custom/templates/muc-bottom-panel.js b/conversejs/custom/templates/muc-bottom-panel.js index 4733dbaf..23de86a8 100644 --- a/conversejs/custom/templates/muc-bottom-panel.js +++ b/conversejs/custom/templates/muc-bottom-panel.js @@ -102,6 +102,54 @@ const tplEmojiOnly = (o) => { ` } +class BackToLastMsg extends CustomElement { + static get properties () { + return { + jid: { type: String } + } + } + + show = false + + async connectedCallback () { + super.connectedCallback() + this.model = _converse.chatboxes.get(this.jid) + await this.model.initialized + + let scrolled = this.model.ui.get('scrolled') + let hasUnreadMsg = this.model.get('num_unread_general') > 0 + this.listenTo(this.model.ui, 'change:scrolled', () => { + scrolled = this.model.ui.get('scrolled') + this.show = scrolled && !hasUnreadMsg + this.requestUpdate() + }) + this.listenTo(this.model, 'change:num_unread_general', () => { + hasUnreadMsg = this.model.get('num_unread_general') > 0 + // Do not show the element if there is new messages since there is another element for that + this.show = scrolled && !hasUnreadMsg + this.requestUpdate() + }) + } + + onClick (ev) { + ev?.preventDefault() + const chatContainer = document.querySelector('converse-chat-content') + chatContainer?.scrollTo({ top: chatContainer.scrollHeight }) + } + + render () { + return this.show + ? html`
+ ▼ ${ + // eslint-disable-next-line no-undef + __(LOC_back_to_last_msg) + } ▼ +
` + : '' + } +} +api.elements.define('livechat-back-to-last-msg', BackToLastMsg) + const tplViewerMode = (o) => { if (!api.settings.get('livechat_enable_viewer_mode')) { return html`` @@ -165,6 +213,7 @@ export default (o) => { ${tplViewerMode(o)} ${tplSlowMode(o)} ${tplEmojiOnly(o)} + ${ mutedAnonymousMessage ? html`${mutedAnonymousMessage}` diff --git a/conversejs/loc.keys.js b/conversejs/loc.keys.js index 019c63bd..e4b72e89 100644 --- a/conversejs/loc.keys.js +++ b/conversejs/loc.keys.js @@ -1,4 +1,5 @@ // SPDX-FileCopyrightText: 2024 John Livingston +// SPDX-FileCopyrightText: 2025 Nicolas Chesnais // // SPDX-License-Identifier: AGPL-3.0-only @@ -68,7 +69,8 @@ const locKeys = [ 'announcements_message_type_standard', 'announcements_message_type_announcement', 'announcements_message_type_highlight', - 'announcements_message_type_warning' + 'announcements_message_type_warning', + 'back_to_last_msg' ] module.exports = locKeys diff --git a/languages/en.yml b/languages/en.yml index 154e9447..84d25b55 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -682,3 +682,4 @@ converse_theme_warning_description: | It is strongly recommanded to keep the "Peertube theme", in combinaison with the "Automatic color detection" feature. Otherwise some user may experience issues depending on the Peertube theme they use. +back_to_last_msg: Go back to last message diff --git a/languages/fr.yml b/languages/fr.yml index 8a71507d..b5885077 100644 --- a/languages/fr.yml +++ b/languages/fr.yml @@ -654,3 +654,4 @@ livechat_configuration_channel_no_duplicate_desc: "En activant cette option, le de modération modérera automatiquement les messages en double.\nCela signifie que si un⋅e utilisateur⋅rice envoie deux fois le même message en l'espace de X secondes, le deuxième message sera supprimé.\n" +back_to_last_msg: Retourner au dernier message