Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-15 19:55:49 +00:00
Code Issues Projects Releases Wiki Activity

fix some bugs

Browse Source
This commit is contained in:
PhilReact 2023-09-08 18:59:29 -05:00
parent 9f0e482183
commit ad716b5286
2 changed files with 78 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
plugins/plugins/core/components/ChatPage.js
View File

@ -2143,7 +2143,7 @@ class ChatPage extends LitElement {
const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature) const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature)
if (findMessage) { if (findMessage) {
findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' }) findMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
const findElement = findMessage.shadowRoot.querySelector('.message-parent') const findElement = findMessage.shadowRoot.querySelector('.message-parent')
if (findElement) { if (findElement) {
findElement.classList.add('blink-bg') findElement.classList.add('blink-bg')
@ -2969,11 +2969,8 @@ class ChatPage extends LitElement {
} }
async addToUpdateMessageHashmap(array){ 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 = {} const newObj = {}
@ -2985,9 +2982,9 @@ const originalScrollHeight = viewElement.scrollHeight;
...this.updateMessageHash, ...this.updateMessageHash,
...newObj ...newObj
} }
this.requestUpdate()
await this.getUpdateComplete() await this.getUpdateComplete()
// const heightDifference = viewElement.scrollHeight - originalScrollHeight;
// viewElement.scrollTop = originalScrollTop + heightDifference;
} }
async clearUpdateMessageHashmap(){ async clearUpdateMessageHashmap(){
@ -3194,7 +3191,10 @@ const originalScrollHeight = viewElement.scrollHeight;
viewElement.scrollTop = viewElement.scrollHeight viewElement.scrollTop = viewElement.scrollHeight
} else { } else {
this.messagesRendered = [...this.messagesRendered, newMessage] this.messagesRendered = {
messages: [newMessage],
type: 'new',
}
await this.getUpdateComplete() await this.getUpdateComplete()
this.showNewMessageBar() this.showNewMessageBar()

99
plugins/plugins/core/components/ChatScroller.js
View File

@ -238,7 +238,10 @@ class ChatScroller extends LitElement {
updateMessageHash: { type: Object }, updateMessageHash: { type: Object },
messagesToRender: { type: Array }, messagesToRender: { type: Array },
oldMessages: { 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._upObserverhandler = this._upObserverhandler.bind(this)
this.newListMessages = this.newListMessages.bind(this) this.newListMessages = this.newListMessages.bind(this)
this._downObserverHandler = this._downObserverHandler.bind(this) this._downObserverHandler = this._downObserverHandler.bind(this)
this.replaceMessagesWithUpdate = this.replaceMessagesWithUpdate.bind(this)
this.__bottomObserverForFetchingMessagesHandler = this.__bottomObserverForFetchingMessagesHandler.bind(this) this.__bottomObserverForFetchingMessagesHandler = this.__bottomObserverForFetchingMessagesHandler.bind(this)
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") 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.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
this.messagesToRender = [] this.messagesToRender = []
this.disableFetching = false this.disableFetching = false
this.isLoadingBefore = false
this.isLoadingAfter = false
} }
addSeenMessage(val) { addSeenMessage(val) {
@ -282,6 +288,12 @@ class ChatScroller extends LitElement {
lastGroupedMessage.sender === newMessage.sender && lastGroupedMessage.sender === newMessage.sender &&
!lastGroupedMessage.repliedToData; !lastGroupedMessage.repliedToData;
} }
clearLoaders(){
this.isLoadingBefore = false
this.isLoadingAfter = false
this.disableFetching = false
}
addNewMessage(newMessage) { addNewMessage(newMessage) {
const lastGroupedMessage = this.messagesToRender[this.messagesToRender.length - 1]; const lastGroupedMessage = this.messagesToRender[this.messagesToRender.length - 1];
@ -293,13 +305,13 @@ class ChatScroller extends LitElement {
...newMessage ...newMessage
}); });
} }
this.clearLoaders()
this.requestUpdate(); this.requestUpdate();
this.disableFetching = false
} }
async newListMessages(newMessages, message) { async newListMessages(newMessages, message) {
this.disableFetching = true
console.log('sup') console.log('sup')
let data = [] let data = []
const copy = [...newMessages] const copy = [...newMessages]
@ -319,11 +331,10 @@ class ChatScroller extends LitElement {
console.log({data}) console.log({data})
this.messagesToRender = data this.messagesToRender = data
this.disableFetching = false this.clearLoaders()
this.requestUpdate() 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"); const viewElement = this.shadowRoot.querySelector("#viewElement");
previousScrollTop = viewElement.scrollTop; previousScrollTop = viewElement.scrollTop;
previousScrollHeight = viewElement.scrollHeight; previousScrollHeight = viewElement.scrollHeight;
this.disableFetching = true
console.log('sup', type); console.log('sup', type);
const copy = [...this.messagesToRender] const copy = [...this.messagesToRender]
@ -386,20 +397,16 @@ class ChatScroller extends LitElement {
if (type === 'initial') { if (type === 'initial') {
this.viewElement.scrollTop = this.viewElement.scrollHeight this.viewElement.scrollTop = this.viewElement.scrollHeight
this.setIsLoadingMessages(false);
} else { }
this.setIsLoadingMessages(false); this.clearLoaders()
}
this.disableFetching = false
} }
async prependOldMessages(oldMessages) { async prependOldMessages(oldMessages) {
console.log('2', { oldMessages }); console.log('2', { oldMessages });
this.disableFetching = true
if (!this.messagesToRender) this.messagesToRender = []; // Ensure it's initialized if (!this.messagesToRender) this.messagesToRender = []; // Ensure it's initialized
let currentMessageGroup = null; let currentMessageGroup = null;
@ -444,17 +451,22 @@ class ChatScroller extends LitElement {
totalMessagesCount = 80; totalMessagesCount = 80;
} }
} }
this.clearLoaders()
this.requestUpdate(); this.requestUpdate(); // await new Promise((res)=> {
this.setIsLoadingMessages(false); // setTimeout(()=> {
this.disableFetching = false // res()
// }, 5000)
// })
} }
async replaceMessagesWithUpdate(updatedMessages) { async replaceMessagesWithUpdate(updatedMessages) {
const viewElement = this.shadowRoot.querySelector("#viewElement"); const viewElement = this.shadowRoot.querySelector("#viewElement");
if (!viewElement) return; // Ensure the element exists if (!viewElement) return; // Ensure the element exists
const isUserAtBottom = (viewElement.scrollTop + viewElement.clientHeight) === viewElement.scrollHeight;
const previousScrollTop = viewElement.scrollTop; const previousScrollTop = viewElement.scrollTop;
const previousScrollHeight = viewElement.scrollHeight; const previousScrollHeight = viewElement.scrollHeight;
@ -473,15 +485,34 @@ class ChatScroller extends LitElement {
}); });
this.messagesToRender = newMessagesToRender; this.messagesToRender = newMessagesToRender;
this.requestUpdate();
console.log('await this.updateComplete 1')
await this.updateComplete; 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 // Adjust scroll position based on the difference in scroll heights
const newScrollHeight = viewElement.scrollHeight; const newScrollHeight = viewElement.scrollHeight;
viewElement.scrollTop = previousScrollTop + (newScrollHeight - previousScrollHeight); viewElement.scrollTop = viewElement.scrollTop + (newScrollHeight - viewElement.scrollHeight);
}
this.clearUpdateMessageHashmap(); this.clearUpdateMessageHashmap();
this.disableFetching = false; this.clearLoaders()
} }
@ -505,7 +536,7 @@ class ChatScroller extends LitElement {
const newScrollHeight = viewElement.scrollHeight; const newScrollHeight = viewElement.scrollHeight;
viewElement.scrollTop = previousScrollTop + (newScrollHeight - previousScrollHeight); viewElement.scrollTop = previousScrollTop + (newScrollHeight - previousScrollHeight);
this.clearUpdateMessageHashmap() this.clearUpdateMessageHashmap()
this.disableFetching = false this.clearLoaders()
} }
@ -571,7 +602,7 @@ class ChatScroller extends LitElement {
return html` return html`
${this.isLoadingMessages ? html` ${this.isLoadingBefore ? html`
<div class="spinnerContainer"> <div class="spinnerContainer">
<paper-spinner-lite active></paper-spinner-lite> <paper-spinner-lite active></paper-spinner-lite>
</div> </div>
@ -616,7 +647,7 @@ class ChatScroller extends LitElement {
<div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div> <div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div>
<div style=${"height: 1px;"} id='downObserver'></div> <div style=${"height: 1px;"} id='downObserver'></div>
${this.isLoadingMessages ? html` ${this.isLoadingAfter ? html`
<div class="spinnerContainer"> <div class="spinnerContainer">
<paper-spinner-lite active></paper-spinner-lite> <paper-spinner-lite active></paper-spinner-lite>
</div> </div>
@ -649,6 +680,12 @@ class ChatScroller extends LitElement {
console.log('true', this.messagesToRender) console.log('true', this.messagesToRender)
return true return true
} }
if(changedProperties.has('isLoadingBefore')){
return true
}
if(changedProperties.has('isLoadingAfter')){
return true
}
// Only update element if prop1 changed. // Only update element if prop1 changed.
return changedProperties.has('messages') return changedProperties.has('messages')
} }
@ -732,10 +769,11 @@ class ChatScroller extends LitElement {
_upObserverhandler(entries) { _upObserverhandler(entries) {
if (entries[0].isIntersecting) { if (entries[0].isIntersecting) {
if (this.isLoadingMessages || this.disableFetching) { if (this.disableFetching) {
return return
} }
this.setIsLoadingMessages(true) this.disableFetching = true
this.isLoadingBefore = true
let _scrollElement = entries[0].target.nextElementSibling let _scrollElement = entries[0].target.nextElementSibling
this._getOldMessage(_scrollElement) this._getOldMessage(_scrollElement)
} }
@ -755,7 +793,8 @@ class ChatScroller extends LitElement {
} }
if (!entries[0].isIntersecting) { if (!entries[0].isIntersecting) {
} else { } else {
this.setIsLoadingMessages(true) this.disableFetching = true
this.isLoadingAfter = true
let _scrollElement = entries[0].target.previousElementSibling let _scrollElement = entries[0].target.previousElementSibling
this._getAfterMessages(_scrollElement) this._getAfterMessages(_scrollElement)
} }