Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-27 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix scrolling down when in old messages

Browse Source
This commit is contained in:
PhilReact 2023-09-14 23:42:21 -05:00
parent 063b4649b2
commit 47d2332fa6
3 changed files with 74 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1472,7 +1472,7 @@ class ChatPage extends LitElement {
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=${chatLimit}&reverse=true&haschatreference=false&encoding=BASE64` url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=${chatLimit}&reverse=true&haschatreference=false&encoding=BASE64`
}) })
this.processMessages(getInitialMessages, true, isUnread)
} else { } else {
getInitialMessages = await parentEpml.request('apiCall', { getInitialMessages = await parentEpml.request('apiCall', {
@ -2098,6 +2098,36 @@ class ChatPage extends LitElement {
document.addEventListener('keydown', this.initialChat) document.addEventListener('keydown', this.initialChat)
document.addEventListener('paste', this.pasteImage) document.addEventListener('paste', this.pasteImage)
let callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.isPageVisible = true
if (this.chatId) {
window.parent.reduxStore.dispatch(window.parent.reduxAction.addChatLastSeen({
key: this.chatId,
timestamp: Date.now()
}))
}
} else {
this.isPageVisible = false
}
})
}
let options = {
root: null,
rootMargin: '0px',
threshold: 0.5
}
// Create the observer with the callback function and options
this.observer = new IntersectionObserver(callback, options)
const mainContainer = this.shadowRoot.querySelector('.main-container')
this.observer.observe(mainContainer)
} }
disconnectedCallback() { disconnectedCallback() {
@ -2127,13 +2157,6 @@ class ChatPage extends LitElement {
document.removeEventListener('keydown', this.initialChat) document.removeEventListener('keydown', this.initialChat)
document.removeEventListener('paste', this.pasteImage) document.removeEventListener('paste', this.pasteImage)
if (this.chatId) {
window.parent.reduxStore.dispatch(window.parent.reduxAction.addChatLastSeen({
key: this.chatId,
timestamp: Date.now()
}))
}
} }
initialChat(e) { initialChat(e) {
@ -2353,7 +2376,6 @@ class ChatPage extends LitElement {
this.webSocket.close(1000, 'switch chat') this.webSocket.close(1000, 'switch chat')
this.webSocket = '' this.webSocket = ''
} }
console.log('this.webSocket', this.webSocket)
this.pageNumber = 1 this.pageNumber = 1
const getAddressPublicKey = () => { const getAddressPublicKey = () => {
@ -2496,7 +2518,6 @@ class ChatPage extends LitElement {
} }
async updated(changedProperties) { async updated(changedProperties) {
console.log({changedProperties})
if (changedProperties && changedProperties.has('userLanguage')) { if (changedProperties && changedProperties.has('userLanguage')) {
const userLang = changedProperties.get('userLanguage') const userLang = changedProperties.get('userLanguage')
if (userLang) { if (userLang) {
@ -2514,11 +2535,18 @@ class ChatPage extends LitElement {
} }
} }
if(changedProperties && changedProperties.has('chatId') && this.webSocket){ if(changedProperties && changedProperties.has('chatId') && this.webSocket){
const previousChatId = changedProperties.get('chatId');
this.isLoadingMessages = true this.isLoadingMessages = true
this.initUpdate() this.initUpdate()
if (previousChatId) {
window.parent.reduxStore.dispatch(window.parent.reduxAction.addChatLastSeen({
key: previousChatId,
timestamp: Date.now()
}))
}
} }
} }
@ -3071,7 +3099,7 @@ class ChatPage extends LitElement {
async processMessages(messages, isInitial, isUnread) { async processMessages(messages, isInitial, isUnread, count) {
const isReceipient = this.chatId.includes('direct') const isReceipient = this.chatId.includes('direct')
let decodedMessages = [] let decodedMessages = []
if(!this.webWorkerDecodeMessages){ if(!this.webWorkerDecodeMessages){
@ -3135,10 +3163,12 @@ class ChatPage extends LitElement {
if(isUnread){ if(isUnread){
this.messagesRendered = { this.messagesRendered = {
messages: this._messages, messages: this._messages,
type: 'initialLastSeen', type: 'initialLastSeen',
lastReadMessageTimestamp lastReadMessageTimestamp,
count
} }
window.parent.reduxStore.dispatch(window.parent.reduxAction.addChatLastSeen({ window.parent.reduxStore.dispatch(window.parent.reduxAction.addChatLastSeen({
@ -3156,7 +3186,6 @@ class ChatPage extends LitElement {
setTimeout(() => this.downElementObserver(), 500) setTimeout(() => this.downElementObserver(), 500)
} else { } else {
console.log('decodedmsg', decodedMessages)
queue.push(() => replaceMessagesEdited({ queue.push(() => replaceMessagesEdited({
decodedMessages: decodedMessages, decodedMessages: decodedMessages,
@ -3222,18 +3251,7 @@ class ChatPage extends LitElement {
*/ */
async renderNewMessage(newMessage) { async renderNewMessage(newMessage) {
console.log('newMessage', newMessage)
if (newMessage.chatReference) { if (newMessage.chatReference) {
// const findOriginalMessageIndex = this.messagesRendered.findIndex(msg => msg.signature === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference))
// if (findOriginalMessageIndex !== -1 && this.messagesRendered[findOriginalMessageIndex].sender === newMessage.sender) {
// const newMessagesRendered = [...this.messagesRendered]
// newMessagesRendered[findOriginalMessageIndex] = {
// ...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName,
// sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp
// }
// this.messagesRendered = newMessagesRendered
// await this.getUpdateComplete()
// }
this.messagesRendered = { this.messagesRendered = {
messages: [newMessage], messages: [newMessage],
type: 'update', type: 'update',
@ -3360,6 +3378,7 @@ class ChatPage extends LitElement {
this.lastReadMessageTimestamp = await chatLastSeen.getItem(this.chatId) || 0 this.lastReadMessageTimestamp = await chatLastSeen.getItem(this.chatId) || 0
if (noInitial) return if (noInitial) return
let getInitialMessages = [] let getInitialMessages = []
let count = 0
let isUnread = false let isUnread = false
const chatId = this.chatId const chatId = this.chatId
@ -3383,6 +3402,13 @@ class ChatPage extends LitElement {
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=${chatLimitHalf}&reverse=false&after=${lastReadMessageTimestamp - 1000}&haschatreference=false&encoding=BASE64` url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=${chatLimitHalf}&reverse=false&after=${lastReadMessageTimestamp - 1000}&haschatreference=false&encoding=BASE64`
}) })
getInitialMessages = [...getInitialMessagesBefore, ...getInitialMessagesAfter] getInitialMessages = [...getInitialMessagesBefore, ...getInitialMessagesAfter]
const lastMessage = getInitialMessagesAfter.at(-1)
if(lastMessage){
count = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages/count?after=${lastMessage.timestamp}&involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=false`
})
}
} else { } else {
getInitialMessages = await parentEpml.request('apiCall', { getInitialMessages = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
@ -3392,7 +3418,7 @@ class ChatPage extends LitElement {
this.processMessages(getInitialMessages, true, isUnread) this.processMessages(getInitialMessages, true, isUnread, count)
initial = initial + 1 initial = initial + 1
@ -3409,9 +3435,9 @@ class ChatPage extends LitElement {
// Closed Event // Closed Event
this.webSocket.onclose = (e) => { this.webSocket.onclose = (e) => {
clearTimeout(directSocketTimeout) clearTimeout(directSocketTimeout)
console.log('e', e)
if (e.reason === 'switch chat') return if (e.reason === 'switch chat') return
console.log('not coming in')
restartDirectWebSocket() restartDirectWebSocket()
} }
@ -3445,7 +3471,7 @@ class ChatPage extends LitElement {
let groupId = Number(gId) let groupId = Number(gId)
let initial = 0 let initial = 0
let count = 0
let groupSocketTimeout let groupSocketTimeout
let myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] let myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
@ -3503,6 +3529,14 @@ class ChatPage extends LitElement {
url: `/chat/messages?txGroupId=${groupId}&limit=${chatLimitHalf}&reverse=false&after=${lastReadMessageTimestamp - 1000}&haschatreference=false&encoding=BASE64` url: `/chat/messages?txGroupId=${groupId}&limit=${chatLimitHalf}&reverse=false&after=${lastReadMessageTimestamp - 1000}&haschatreference=false&encoding=BASE64`
}) })
getInitialMessages = [...getInitialMessagesBefore, ...getInitialMessagesAfter] getInitialMessages = [...getInitialMessagesBefore, ...getInitialMessagesAfter]
const lastMessage = getInitialMessagesAfter.at(-1)
if(lastMessage){
count = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages/count?after=${lastMessage.timestamp}&txGroupId=${groupId}&limit=20&reverse=false`
})
}
} else { } else {
getInitialMessages = await parentEpml.request('apiCall', { getInitialMessages = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
@ -3513,7 +3547,7 @@ class ChatPage extends LitElement {
this.processMessages(getInitialMessages, true, isUnread) this.processMessages(getInitialMessages, true, isUnread, count)
initial = initial + 1 initial = initial + 1
} else { } else {

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

@ -325,7 +325,6 @@ class ChatScroller extends LitElement {
} }
async newListMessages(newMessages, message) { async newListMessages(newMessages, message) {
let data = [] let data = []
const copy = [...newMessages] const copy = [...newMessages]
copy.forEach(newMessage => { copy.forEach(newMessage => {
@ -341,7 +340,10 @@ class ChatScroller extends LitElement {
} }
}); });
// const getCount = await parentEpml.request('apiCall', {
// type: 'api',
// url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=${chatLimit}&reverse=true&before=${scrollElement.messageObj.timestamp}&haschatreference=false&encoding=BASE64`
// })
this.messagesToRender = data this.messagesToRender = data
this.clearLoaders() this.clearLoaders()
this.requestUpdate() this.requestUpdate()
@ -356,9 +358,8 @@ class ChatScroller extends LitElement {
} }
async newListMessagesUnreadMessages(newMessages, message, lastReadMessageTimestamp) { async newListMessagesUnreadMessages(newMessages, message, lastReadMessageTimestamp, count) {
const viewElement = this.shadowRoot.querySelector("#viewElement");
let data = []; let data = [];
const copy = [...newMessages]; const copy = [...newMessages];
@ -391,7 +392,9 @@ class ChatScroller extends LitElement {
}); });
} }
}); });
if(count > 0){
this.disableAddingNewMessages = true
}
this.messagesToRender = data; this.messagesToRender = data;
this.clearLoaders(); this.clearLoaders();
this.requestUpdate(); this.requestUpdate();
@ -563,7 +566,6 @@ class ChatScroller extends LitElement {
async replaceMessagesWithUpdateByArray(updatedMessagesArray) { async replaceMessagesWithUpdateByArray(updatedMessagesArray) {
console.log({updatedMessagesArray, messages: this.messagesToRender})
let previousScrollTop; let previousScrollTop;
let previousScrollHeight; let previousScrollHeight;
@ -596,7 +598,7 @@ class ChatScroller extends LitElement {
} else if (this.messages.type === 'initialLastSeen') { } else if (this.messages.type === 'initialLastSeen') {
this.newListMessagesUnreadMessages(this.messages.messages, 'initialLastSeen', this.messages.lastReadMessageTimestamp) this.newListMessagesUnreadMessages(this.messages.messages, 'initialLastSeen', this.messages.lastReadMessageTimestamp, this.messages.count)
} }
else if (this.messages.type === 'new') this.addNewMessages(this.messages.messages) else if (this.messages.type === 'new') this.addNewMessages(this.messages.messages)

1
plugins/plugins/core/components/ChatTextEditor copy.js
View File

@ -163,7 +163,6 @@ class ChatTextEditor extends LitElement {
} }
render() { render() {
console.log('here here')
let scrollHeightBool = false; let scrollHeightBool = false;
try { try {
if (this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 && this.shadowRoot.querySelector(".chat-editor").contentDocument.body.querySelector("#chatbarId").innerHTML.trim() !== "") { if (this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 && this.shadowRoot.querySelector(".chat-editor").contentDocument.body.querySelector("#chatbarId").innerHTML.trim() !== "") {