diff --git a/src/components/chat_content.js b/src/components/chat_content.js index 9ef6a789a..eeacc6a89 100644 --- a/src/components/chat_content.js +++ b/src/components/chat_content.js @@ -1,4 +1,5 @@ import "./message-history"; +import debounce from 'lodash/debounce'; import { CustomElement } from './element.js'; import { _converse, api } from "@converse/headless/core"; import { html } from 'lit-element'; @@ -13,6 +14,7 @@ export default class ChatContent extends CustomElement { connectedCallback () { super.connectedCallback(); + this.debouncedScrolldown = debounce(this.scrollDown, 100); this.model = _converse.chatboxes.get(this.jid); this.listenTo(this.model.messages, 'add', this.requestUpdate); this.listenTo(this.model.messages, 'change', this.requestUpdate); @@ -43,6 +45,10 @@ export default class ChatContent extends CustomElement { `; } + updated () { + !this.model.get('scrolled') && this.debouncedScrolldown(); + } + scrollDown () { if (this.scrollTo) { const behavior = this.scrollTop ? 'smooth' : 'auto'; diff --git a/src/plugins/chatview/view.js b/src/plugins/chatview/view.js index fb4180198..3a97732eb 100644 --- a/src/plugins/chatview/view.js +++ b/src/plugins/chatview/view.js @@ -61,7 +61,6 @@ export default class ChatView extends BaseChatView { // Need to be registered after render has been called. this.listenTo(this.model.messages, 'add', this.onMessageAdded); - this.listenTo(this.model.messages, 'rendered', this.maybeScrollDown); this.listenTo(this.model, 'change:show_help_messages', this.renderHelpMessages); await this.model.messages.fetched; @@ -202,22 +201,6 @@ export default class ChatView extends BaseChatView { return {}; } - /** - * Scrolls the chat down, *if* appropriate. - * - * Will only scroll down if we have received a message from - * ourselves, or if the chat was scrolled down before (i.e. the - * `scrolled` flag is `false`); - * @param { _converse.Message|_converse.ChatRoomMessage } [message] - * - An optional message that serves as the cause for needing to scroll down. - */ - maybeScrollDown (message) { - const new_own_msg = !message?.get('is_archived') && message?.get('sender') === 'me'; - if ((new_own_msg || !this.model.get('scrolled')) && !this.model.isHidden()) { - this.debouncedScrollDown(); - } - } - /** * Given a message element, determine wether it should be * marked as a followup message to the previous element. diff --git a/src/plugins/dragresize/components/dragresize.js b/src/plugins/dragresize/components/dragresize.js index ff596bfb4..c8c02800b 100644 --- a/src/plugins/dragresize/components/dragresize.js +++ b/src/plugins/dragresize/components/dragresize.js @@ -5,7 +5,7 @@ import { CustomElement } from 'components/element.js'; class ConverseDragResize extends CustomElement { render () { // eslint-disable-line class-methods-use-this - return tpl_dragresize(this); + return tpl_dragresize(); } } diff --git a/src/plugins/headlines-view/view.js b/src/plugins/headlines-view/view.js index 355ca224b..c8a834e6f 100644 --- a/src/plugins/headlines-view/view.js +++ b/src/plugins/headlines-view/view.js @@ -32,7 +32,6 @@ class HeadlinesView extends BaseChatView { // Need to be registered after render has been called. this.listenTo(this.model.messages, 'add', this.onMessageAdded); this.listenTo(this.model.messages, 'remove', this.renderChatHistory); - this.listenTo(this.model.messages, 'rendered', this.maybeScrollDown); this.listenTo(this.model.messages, 'reset', this.renderChatHistory); await this.model.messages.fetched; diff --git a/src/plugins/muc-views/muc.js b/src/plugins/muc-views/muc.js index 9d6d0093a..5b22eefe8 100644 --- a/src/plugins/muc-views/muc.js +++ b/src/plugins/muc-views/muc.js @@ -95,7 +95,6 @@ export default class MUCView extends BaseChatView { this.listenTo(this.model, 'show', this.show); this.listenTo(this.model.features, 'change:moderated', this.renderBottomPanel); this.listenTo(this.model.features, 'change:open', this.renderHeading); - this.listenTo(this.model.messages, 'rendered', this.maybeScrollDown); this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting); this.listenTo(this.model.session, 'change:connection_status', this.onConnectionStatusChanged);