From ad716b528644a10537a5a542fcfab6542f1fdec2 Mon Sep 17 00:00:00 2001 From: PhilReact Date: Fri, 8 Sep 2023 18:59:29 -0500 Subject: [PATCH] fix some bugs --- plugins/plugins/core/components/ChatPage.js | 18 ++-- .../plugins/core/components/ChatScroller.js | 99 +++++++++++++------ 2 files changed, 78 insertions(+), 39 deletions(-) diff --git a/plugins/plugins/core/components/ChatPage.js b/plugins/plugins/core/components/ChatPage.js index 1d256e69..2fce10fd 100644 --- a/plugins/plugins/core/components/ChatPage.js +++ b/plugins/plugins/core/components/ChatPage.js @@ -2143,7 +2143,7 @@ class ChatPage extends LitElement { const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature) if (findMessage) { - findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' }) + findMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) const findElement = findMessage.shadowRoot.querySelector('.message-parent') if (findElement) { findElement.classList.add('blink-bg') @@ -2969,11 +2969,8 @@ class ChatPage extends LitElement { } async addToUpdateMessageHashmap(array){ - const chatscrollerEl = this.shadowRoot.querySelector('chat-scroller') - if(!chatscrollerEl) return - const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement') - const originalScrollTop = viewElement.scrollTop; -const originalScrollHeight = viewElement.scrollHeight; + + const newObj = {} @@ -2985,9 +2982,9 @@ const originalScrollHeight = viewElement.scrollHeight; ...this.updateMessageHash, ...newObj } + this.requestUpdate() await this.getUpdateComplete() -// const heightDifference = viewElement.scrollHeight - originalScrollHeight; -// viewElement.scrollTop = originalScrollTop + heightDifference; + } async clearUpdateMessageHashmap(){ @@ -3194,7 +3191,10 @@ const originalScrollHeight = viewElement.scrollHeight; viewElement.scrollTop = viewElement.scrollHeight } else { - this.messagesRendered = [...this.messagesRendered, newMessage] + this.messagesRendered = { + messages: [newMessage], + type: 'new', + } await this.getUpdateComplete() this.showNewMessageBar() diff --git a/plugins/plugins/core/components/ChatScroller.js b/plugins/plugins/core/components/ChatScroller.js index 8ea34681..dc614d95 100644 --- a/plugins/plugins/core/components/ChatScroller.js +++ b/plugins/plugins/core/components/ChatScroller.js @@ -238,7 +238,10 @@ class ChatScroller extends LitElement { updateMessageHash: { type: Object }, messagesToRender: { type: Array }, oldMessages: { type: Array }, - clearUpdateMessageHashmap: { attribute: false} + clearUpdateMessageHashmap: { attribute: false}, + disableFetching: {type: Boolean}, + isLoadingBefore: {type: Boolean}, + isLoadingAfter: {type: Boolean} } } @@ -256,6 +259,7 @@ class ChatScroller extends LitElement { this._upObserverhandler = this._upObserverhandler.bind(this) this.newListMessages = this.newListMessages.bind(this) this._downObserverHandler = this._downObserverHandler.bind(this) + this.replaceMessagesWithUpdate = this.replaceMessagesWithUpdate.bind(this) this.__bottomObserverForFetchingMessagesHandler = this.__bottomObserverForFetchingMessagesHandler.bind(this) this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") @@ -265,6 +269,8 @@ class ChatScroller extends LitElement { this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' this.messagesToRender = [] this.disableFetching = false + this.isLoadingBefore = false + this.isLoadingAfter = false } addSeenMessage(val) { @@ -282,6 +288,12 @@ class ChatScroller extends LitElement { lastGroupedMessage.sender === newMessage.sender && !lastGroupedMessage.repliedToData; } + + clearLoaders(){ + this.isLoadingBefore = false + this.isLoadingAfter = false + this.disableFetching = false + } addNewMessage(newMessage) { const lastGroupedMessage = this.messagesToRender[this.messagesToRender.length - 1]; @@ -293,13 +305,13 @@ class ChatScroller extends LitElement { ...newMessage }); } - + this.clearLoaders() this.requestUpdate(); - this.disableFetching = false + } async newListMessages(newMessages, message) { - this.disableFetching = true + console.log('sup') let data = [] const copy = [...newMessages] @@ -319,11 +331,10 @@ class ChatScroller extends LitElement { console.log({data}) this.messagesToRender = data - this.disableFetching = false + this.clearLoaders() this.requestUpdate() - await this.updateComplete() + await this.updateComplete - this.setIsLoadingMessages(false); @@ -342,7 +353,7 @@ class ChatScroller extends LitElement { const viewElement = this.shadowRoot.querySelector("#viewElement"); previousScrollTop = viewElement.scrollTop; previousScrollHeight = viewElement.scrollHeight; - this.disableFetching = true + console.log('sup', type); const copy = [...this.messagesToRender] @@ -386,20 +397,16 @@ class ChatScroller extends LitElement { if (type === 'initial') { this.viewElement.scrollTop = this.viewElement.scrollHeight - this.setIsLoadingMessages(false); + - } else { - this.setIsLoadingMessages(false); - - } - this.disableFetching = false + } + this.clearLoaders() } async prependOldMessages(oldMessages) { console.log('2', { oldMessages }); - this.disableFetching = true if (!this.messagesToRender) this.messagesToRender = []; // Ensure it's initialized let currentMessageGroup = null; @@ -444,17 +451,22 @@ class ChatScroller extends LitElement { totalMessagesCount = 80; } } - - this.requestUpdate(); - this.setIsLoadingMessages(false); - this.disableFetching = false + this.clearLoaders() + this.requestUpdate(); // await new Promise((res)=> { + // setTimeout(()=> { + // res() + // }, 5000) + // }) + } async replaceMessagesWithUpdate(updatedMessages) { + const viewElement = this.shadowRoot.querySelector("#viewElement"); if (!viewElement) return; // Ensure the element exists - + const isUserAtBottom = (viewElement.scrollTop + viewElement.clientHeight) === viewElement.scrollHeight; + const previousScrollTop = viewElement.scrollTop; const previousScrollHeight = viewElement.scrollHeight; @@ -473,15 +485,34 @@ class ChatScroller extends LitElement { }); this.messagesToRender = newMessagesToRender; - + this.requestUpdate(); + console.log('await this.updateComplete 1') await this.updateComplete; - + console.log('await this.updateComplete 2') + + // Adjust scroll position based on the difference in scroll heights + // await new Promise((res)=> { + // setTimeout(()=> { + // res() + // }, 5000) + // }) + // const newScrollHeight = viewElement.scrollHeight; + // viewElement.scrollTop = previousScrollTop + (newScrollHeight - previousScrollHeight); + // viewElement.scrollTop = viewElement.scrollHeight - viewElement.clientHeight; + // const newScrollHeight = viewElement.scrollHeight; + // viewElement.scrollTop = viewElement.scrollTop + (newScrollHeight - viewElement.scrollHeight); + // If the user was at the bottom before the update, keep them at the bottom + if (isUserAtBottom) { + viewElement.scrollTop = viewElement.scrollHeight - viewElement.clientHeight; + } else { // Adjust scroll position based on the difference in scroll heights const newScrollHeight = viewElement.scrollHeight; - viewElement.scrollTop = previousScrollTop + (newScrollHeight - previousScrollHeight); + viewElement.scrollTop = viewElement.scrollTop + (newScrollHeight - viewElement.scrollHeight); + } + this.clearUpdateMessageHashmap(); - this.disableFetching = false; + this.clearLoaders() } @@ -505,7 +536,7 @@ class ChatScroller extends LitElement { const newScrollHeight = viewElement.scrollHeight; viewElement.scrollTop = previousScrollTop + (newScrollHeight - previousScrollHeight); this.clearUpdateMessageHashmap() - this.disableFetching = false + this.clearLoaders() } @@ -571,7 +602,7 @@ class ChatScroller extends LitElement { return html` - ${this.isLoadingMessages ? html` + ${this.isLoadingBefore ? html`
@@ -616,7 +647,7 @@ class ChatScroller extends LitElement {
- ${this.isLoadingMessages ? html` + ${this.isLoadingAfter ? html`
@@ -649,6 +680,12 @@ class ChatScroller extends LitElement { console.log('true', this.messagesToRender) return true } + if(changedProperties.has('isLoadingBefore')){ + return true + } + if(changedProperties.has('isLoadingAfter')){ + return true + } // Only update element if prop1 changed. return changedProperties.has('messages') } @@ -732,10 +769,11 @@ class ChatScroller extends LitElement { _upObserverhandler(entries) { if (entries[0].isIntersecting) { - if (this.isLoadingMessages || this.disableFetching) { + if (this.disableFetching) { return } - this.setIsLoadingMessages(true) + this.disableFetching = true + this.isLoadingBefore = true let _scrollElement = entries[0].target.nextElementSibling this._getOldMessage(_scrollElement) } @@ -755,7 +793,8 @@ class ChatScroller extends LitElement { } if (!entries[0].isIntersecting) { } else { - this.setIsLoadingMessages(true) + this.disableFetching = true + this.isLoadingAfter = true let _scrollElement = entries[0].target.previousElementSibling this._getAfterMessages(_scrollElement) }