From 7f26208e7f2deb922f8355cf23cf458dc9cc9d3a Mon Sep 17 00:00:00 2001 From: Phillip Date: Sat, 28 Jan 2023 00:41:03 +0200 Subject: [PATCH 1/8] improve lagginess in scroll --- .../plugins/core/components/ChatPage.js | 12 ++----- .../plugins/core/components/ChatScroller.js | 3 -- .../core/messaging/q-chat/q-chat.src.js | 35 ++++++------------- .../plugins/utils/replace-messages-edited.js | 3 -- 4 files changed, 12 insertions(+), 41 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 538240e9..f8566b18 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -1319,7 +1319,6 @@ class ChatPage extends LitElement { name: name ? name : undefined } } catch (error) { - console.log(error) } return memberItem @@ -1328,7 +1327,6 @@ class ChatPage extends LitElement { this.groupMembers = membersWithName this.pageNumber = this.pageNumber + 1 } catch (error) { - console.error(error) } } @@ -1506,7 +1504,6 @@ class ChatPage extends LitElement { this.userFoundModalOpen = true; } catch (error) { this.loading = false; - console.error(error); let err4string = get("chatpage.cchange35"); parentEpml.request('showSnackBar', `${err4string}`) } @@ -1535,7 +1532,6 @@ class ChatPage extends LitElement { const stringifyMessageObject = JSON.stringify(message); this.sendMessage(stringifyMessageObject, undefined, '', true) } catch (error) { - console.log({error}); } } @@ -1638,7 +1634,6 @@ class ChatPage extends LitElement { name: name ? name : undefined } } catch (error) { - console.log(error) } return memberItem @@ -1653,7 +1648,6 @@ class ChatPage extends LitElement { name: name ? name : undefined } } catch (error) { - console.log(error) } return memberItem @@ -1663,7 +1657,6 @@ class ChatPage extends LitElement { this.groupMembers = membersWithName this.groupInfo = getGroupInfo } catch (error) { - console.error(error) } } @@ -1716,10 +1709,10 @@ class ChatPage extends LitElement { if (changedProperties && changedProperties.has('isLoading')) { - if (this.isLoading === true && this.currentEditor === '_chatEditorDOM') { + if (this.isLoading === true && this.currentEditor === '_chatEditorDOM' && this.editor && this.editor.setEditable) { this.editor.setEditable(false) } - if (this.isLoading === false && this.currentEditor === '_chatEditorDOM') { + if (this.isLoading === false && this.currentEditor === '_chatEditorDOM' && this.editor && this.editor.setEditable) { this.editor.setEditable(true) } } @@ -2432,7 +2425,6 @@ class ChatPage extends LitElement { this._publicKey.hasPubKey = false } } catch (error) { - console.error(error); } if(!hasPublicKey || !this._publicKey.hasPubKey){ diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 62033e44..b94fd3f4 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -466,7 +466,6 @@ class MessageTemplate extends LitElement { const parsedMsg = JSON.parse(repliedToData.decodedMessage); repliedToData.decodedMessage = parsedMsg; } catch (error) { - console.error(error); } } @@ -856,7 +855,6 @@ class ChatMenu extends LitElement { this.setForwardProperties(stringifyMessageObject) } catch (error) { - console.log({error}) } } render() { @@ -874,7 +872,6 @@ class ChatMenu extends LitElement { this.setToggledMessage(this.originalMessage) this.emojiPicker.togglePicker(e.target) } catch (error) { - console.log({error}) } }} diff --git a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js index 11458bd6..8fce2d88 100644 --- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js +++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js @@ -1,5 +1,9 @@ import { LitElement, html, css } from 'lit'; import { render } from 'lit/html.js'; +import { passiveSupport } from 'passive-events-support/src/utils' +passiveSupport({ + events: ['touchstart'] + }) import { Epml } from '../../../../epml.js'; import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'; import { qchatStyles } from './q-chat-css.src.js' @@ -163,6 +167,7 @@ class Chat extends LitElement { } render() { + console.log('q-chat update') return html`
@@ -389,26 +394,7 @@ class Chat extends LitElement { this.shadowRoot.getElementById('messageBox').addEventListener('keydown', stopKeyEventPropagation); - // let typingTimer; - // let doneTypingInterval = 3000; - - // //on keyup, start the countdown - // nameInput.addEventListener('keyup', () => { - // clearTimeout(typingTimer); - // if (nameInput.value) { - // console.log("typing started!"); - // typingTimer = setTimeout(this.userSearch, doneTypingInterval); - // } - // }); - - const getDataFromURL = () => { - let tempUrl = document.location.href - let splitedUrl = decodeURI(tempUrl).split('?') - let urlData = splitedUrl[1] - if (urlData !== undefined) { - this.chatId = urlData - } - } + const runFunctionsAfterPageLoad = () => { // Functions to exec after render while waiting for page info... @@ -526,7 +512,6 @@ class Chat extends LitElement { } this.userFoundModalOpen = true; } catch (error) { - console.error(error); let err4string = get("chatpage.cchange35"); parentEpml.request('showSnackBar', `${err4string}`) } @@ -767,7 +752,6 @@ class Chat extends LitElement { }) this.groupInvites = pendingGroupInvites; } catch (error) { - console.error(error); let err4string = get("chatpage.cchange61"); parentEpml.request('showSnackBar', `${err4string}`) } @@ -876,9 +860,10 @@ class Chat extends LitElement { } setChatHeads(chatObj) { - - let groupList = chatObj.groups.map(group => group.groupId === 0 ? { groupId: group.groupId, url: `group/${group.groupId}`, groupName: "Qortal General Chat", timestamp: group.timestamp === undefined ? 2 : group.timestamp } : { ...group, timestamp: group.timestamp === undefined ? 1 : group.timestamp, url: `group/${group.groupId}` }) - let directList = chatObj.direct.map(dc => { + const chatObjGroups = Array.isArray(chatObj.groups) ? chatObj.groups : []; + const chatObjDirect = Array.isArray(chatObj.direct) ? chatObj.direct : []; + let groupList = chatObjGroups.map(group => group.groupId === 0 ? { groupId: group.groupId, url: `group/${group.groupId}`, groupName: "Qortal General Chat", timestamp: group.timestamp === undefined ? 2 : group.timestamp } : { ...group, timestamp: group.timestamp === undefined ? 1 : group.timestamp, url: `group/${group.groupId}` }) + let directList = chatObjDirect.map(dc => { return { ...dc, url: `direct/${dc.address}` } }) const compareNames = (a, b) => { diff --git a/qortal-ui-plugins/plugins/utils/replace-messages-edited.js b/qortal-ui-plugins/plugins/utils/replace-messages-edited.js index 7ee2cb06..5a55ff16 100644 --- a/qortal-ui-plugins/plugins/utils/replace-messages-edited.js +++ b/qortal-ui-plugins/plugins/utils/replace-messages-edited.js @@ -31,7 +31,6 @@ export const replaceMessagesEdited = async ({ } } } catch (error) { - console.log(error) } return msgItem @@ -42,7 +41,6 @@ export const replaceMessagesEdited = async ({ try { parsedMessageObj = JSON.parse(msg.decodedMessage) } catch (error) { - console.log('error') return msg } let msgItem = msg @@ -98,7 +96,6 @@ export const replaceMessagesEdited = async ({ } } } catch (error) { - console.log(error) } return msgItem From dba09d2a7d73c3e7bc08b8dd173ea86bdabf424a Mon Sep 17 00:00:00 2001 From: Phillip Date: Sun, 29 Jan 2023 00:27:01 +0200 Subject: [PATCH 2/8] add packages --- qortal-ui-plugins/package.json | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/qortal-ui-plugins/package.json b/qortal-ui-plugins/package.json index a891f694..7ab1011d 100644 --- a/qortal-ui-plugins/package.json +++ b/qortal-ui-plugins/package.json @@ -21,15 +21,16 @@ "@material/mwc-list": "0.27.0", "@material/mwc-select": "0.27.0", "@tiptap/core": "2.0.0-beta.209", + "@tiptap/extension-highlight": "2.0.0-beta.209", "@tiptap/extension-image": "2.0.0-beta.209", "@tiptap/extension-placeholder": "2.0.0-beta.209", "@tiptap/extension-underline": "2.0.0-beta.209", - "@tiptap/extension-highlight": "2.0.0-beta.209", "@tiptap/html": "2.0.0-beta.209", "@tiptap/starter-kit": "2.0.0-beta.209", "asmcrypto.js": "2.3.2", "compressorjs": "1.1.1", "emoji-picker-js": "https://github.com/Qortal/emoji-picker-js", + "localforage": "1.10.0", "prosemirror-commands": "1.5.0", "prosemirror-dropcursor": "1.6.1", "prosemirror-gapcursor": "1.3.1", @@ -40,7 +41,6 @@ "prosemirror-state": "1.4.2", "prosemirror-transform": "1.7.0", "prosemirror-view": "1.29.1", - "localforage": "1.10.0", "short-unique-id": "4.4.4" }, "devDependencies": { @@ -48,12 +48,12 @@ "@material/mwc-button": "0.27.0", "@material/mwc-checkbox": "0.27.0", "@material/mwc-dialog": "0.27.0", - "@material/mwc-fab": "0.27.0", "@material/mwc-formfield": "0.27.0", "@material/mwc-icon": "0.27.0", "@material/mwc-icon-button": "0.27.0", "@material/mwc-slider": "0.27.0", "@material/mwc-snackbar": "0.27.0", + "@material/mwc-fab": "0.27.0", "@material/mwc-tab": "0.27.0", "@material/mwc-tab-bar": "0.27.0", "@material/mwc-textfield": "0.27.0", @@ -84,9 +84,10 @@ "rollup": "3.10.1", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-progress": "1.1.2", - "rollup-plugin-web-worker-loader": "1.6.1" + "rollup-plugin-web-worker-loader": "1.6.1", + "passive-events-support": "1.0.33" }, "engines": { "node": ">=16.17.1" } -} \ No newline at end of file +} From 64319250a462614b16594e03b5434a1191b6e14c Mon Sep 17 00:00:00 2001 From: Phillip Date: Sun, 29 Jan 2023 00:29:47 +0200 Subject: [PATCH 3/8] remove log --- qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js | 1 - 1 file changed, 1 deletion(-) diff --git a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js index 8fce2d88..a8b268e5 100644 --- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js +++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js @@ -167,7 +167,6 @@ class Chat extends LitElement { } render() { - console.log('q-chat update') return html`
From d5fee6848938dfaed25b6e5d1ce088a09f646aed Mon Sep 17 00:00:00 2001 From: Phillip Date: Sun, 29 Jan 2023 22:00:16 +0200 Subject: [PATCH 4/8] refactor websockets for q-chat --- .../plugins/core/components/ChatPage.js | 40 +++++++++++-------- .../plugins/core/components/ChatTextEditor.js | 1 - .../plugins/utils/replace-messages-edited.js | 2 +- 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index f8566b18..2a170104 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -940,7 +940,6 @@ class ChatPage extends LitElement {
` : null} -
${this.isLoadingMessages ? html` @@ -1334,6 +1333,7 @@ class ChatPage extends LitElement { async connectedCallback() { super.connectedCallback(); + await this.initUpdate() this.webWorker = new WebWorker(); this.webWorkerImage = new WebWorkerImage(); await this.getUpdateCompleteTextEditor(); @@ -1413,6 +1413,10 @@ class ChatPage extends LitElement { disconnectedCallback() { super.disconnectedCallback(); + if(this.webSocket){ + this.webSocket.close(1000, 'switch chat') + this.webSocket= '' + } this.webWorker.terminate(); this.webWorkerImage.terminate(); this.editor.destroy() @@ -1561,10 +1565,6 @@ class ChatPage extends LitElement { } async initUpdate(){ - if(this.webSocket){ - this.webSocket.close() - this.webSocket= '' - } this.pageNumber = 1 const getAddressPublicKey = () => { @@ -1691,7 +1691,7 @@ class ChatPage extends LitElement { if(isEnabledChatEnter){ this.isEnabledChatEnter = isEnabledChatEnter === 'false' ? false : true } - await this.initUpdate() + } async updated(changedProperties) { @@ -1703,9 +1703,6 @@ class ChatPage extends LitElement { } } - if (changedProperties && changedProperties.has('chatId') && changedProperties.get('chatId')) { - await this.initUpdate() - } if (changedProperties && changedProperties.has('isLoading')) { @@ -2213,7 +2210,7 @@ class ChatPage extends LitElement { async fetchChatMessages(chatId) { - const initDirect = async (cid) => { + const initDirect = async (cid, noInitial) => { let initial = 0 let directSocketTimeout @@ -2233,17 +2230,15 @@ class ChatPage extends LitElement { } this.webSocket = new WebSocket(directSocketLink); - // Open Connection this.webSocket.onopen = () => { - setTimeout(pingDirectSocket, 50) } // Message Event this.webSocket.onmessage = async (e) => { if (initial === 0) { - + if(noInitial) return const cachedData = null let getInitialMessages = [] if (cachedData && cachedData.length !== 0) { @@ -2275,8 +2270,10 @@ class ChatPage extends LitElement { } // Closed Event - this.webSocket.onclose = () => { + this.webSocket.onclose = (e) => { clearTimeout(directSocketTimeout) + if(e.reason === 'switch chat') return + restartDirectWebSocket() } // Error Event @@ -2291,8 +2288,17 @@ class ChatPage extends LitElement { } }; + const restartDirectWebSocket = () => { + const noInitial = true + setTimeout(() => initDirect(chatId, noInitial), 50) + } + const restartGroupWebSocket = () => { + const noInitial = true + let groupChatId = Number(chatId) + setTimeout(() => initGroup(groupChatId, noInitial), 50) + } - const initGroup = (gId) => { + const initGroup = (gId, noInitial) => { let groupId = Number(gId) let initial = 0 @@ -2325,7 +2331,7 @@ class ChatPage extends LitElement { this.webSocket.onmessage = async (e) => { if (initial === 0) { - + if(noInitial) return const cachedData = null; let getInitialMessages = [] if (cachedData && cachedData.length !== 0) { @@ -2362,6 +2368,8 @@ class ChatPage extends LitElement { // Closed Event this.webSocket.onclose = () => { clearTimeout(groupSocketTimeout) + if(e.reason === 'switch chat') return + restartGroupWebSocket() } // Error Event diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index 6f1ce796..3c06df95 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -375,7 +375,6 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b } render() { - console.log('this.chatId2', this.chatId) return html`
Date: Sun, 29 Jan 2023 23:12:25 +0200 Subject: [PATCH 5/8] put in missing param --- qortal-ui-plugins/plugins/core/components/ChatPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 2a170104..eb1f7926 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -2366,7 +2366,7 @@ class ChatPage extends LitElement { } // Closed Event - this.webSocket.onclose = () => { + this.webSocket.onclose = (e) => { clearTimeout(groupSocketTimeout) if(e.reason === 'switch chat') return restartGroupWebSocket() From a19eea4ad7819b047a290f1f8ae4b3a50606c196 Mon Sep 17 00:00:00 2001 From: Phillip Date: Mon, 30 Jan 2023 00:27:02 +0200 Subject: [PATCH 6/8] add loader to goToReply --- .../plugins/core/components/ChatPage.js | 64 +++++++++++++++---- .../plugins/core/components/ChatScroller.js | 2 +- 2 files changed, 54 insertions(+), 12 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index eb1f7926..861cb419 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -103,7 +103,8 @@ class ChatPage extends LitElement { openUserInfo: { type: Boolean }, selectedHead: { type: Object }, userName: { type: String }, - goToRepliedMessage: {attribute: false} + goToRepliedMessage: {attribute: false}, + isLoadingGoToRepliedMessage: {type: Object} } } @@ -890,6 +891,12 @@ class ChatPage extends LitElement { this.currentEditor = '_chatEditorDOM' this.initialChat = this.initialChat.bind(this) this.isEnabledChatEnter = true + this.isLoadingGoToRepliedMessage = { + isLoading: false, + top: 0, + left: 0, + offsetHeight: 0 + } } _toggle(value) { @@ -957,6 +964,9 @@ class ChatPage extends LitElement { ` : this.renderChatScroller()}
+ ${this.isLoadingGoToRepliedMessage && this.isLoadingGoToRepliedMessage.loading ? html` +
+ ` : ''}
this.setSelectedHead(val)} ?openTipUser=${this.openTipUser} .selectedHead=${this.selectedHead} - .goToRepliedMessage=${(val)=> this.goToRepliedMessage(val)} + .goToRepliedMessage=${(val, val2)=> this.goToRepliedMessage(val, val2)} .getOldMessageAfter=${(val)=> this.getOldMessageAfter(val)} > diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index b94fd3f4..e9a9c895 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -554,7 +554,7 @@ class MessageTemplate extends LitElement { ${repliedToData && html`
{ - this.goToRepliedMessage(repliedToData) + this.goToRepliedMessage(repliedToData, this.messageObj) }}>

Date: Mon, 30 Jan 2023 00:56:17 +0200 Subject: [PATCH 7/8] remove log --- qortal-ui-plugins/plugins/core/components/ChatPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index d5118de7..91691e05 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -1535,7 +1535,6 @@ class ChatPage extends LitElement { if((message.timestamp - this.messagesRendered[0].timestamp) < 86400000){ const findOriginalMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(clickedOnMessage.reference) - console.log({clickedOnMessage, findOriginalMessage}) if(findOriginalMessage){ const messageClientRect = findOriginalMessage.getBoundingClientRect() this.isLoadingGoToRepliedMessage = { From b0b05eba805b3a036ce81b0ea4fcf0d6f3b8983e Mon Sep 17 00:00:00 2001 From: Phillip Date: Mon, 30 Jan 2023 01:42:08 +0200 Subject: [PATCH 8/8] remove log --- qortal-ui-plugins/plugins/core/components/ChatScroller.js | 1 - 1 file changed, 1 deletion(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 0d81986a..1337aef4 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -384,7 +384,6 @@ class MessageTemplate extends LitElement { repliedToData = this.messageObj.repliedToData; isImageDeleted = parsedMessageObj.isImageDeleted; reactions = parsedMessageObj.reactions || []; - console.log(reactions, 'reactions here'); version = parsedMessageObj.version; isForwarded = parsedMessageObj.type === 'forward'; isEdited = parsedMessageObj.isEdited && true;