Merge pull request #112 from PhillipLangMartinez/bugfix/remove-logs-messages

Bugfix/remove logs messages

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,7 +84,8 @@
 		"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"

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}
         }
     }
 
@@ -891,6 +892,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) {
@@ -941,7 +948,6 @@ class ChatPage extends LitElement {
                     </div>
                 </div>
                 ` : null}
-               
                 <div>
                     ${this.isLoadingMessages ? 
                         html`
@@ -959,6 +965,9 @@ class ChatPage extends LitElement {
                         ` : 
                         this.renderChatScroller()}
                 </div>
+                ${this.isLoadingGoToRepliedMessage && this.isLoadingGoToRepliedMessage.loading ? html`
+                <div style="position: fixed; top:${parseInt(this.isLoadingGoToRepliedMessage.top)}px;left: ${parseInt(this.isLoadingGoToRepliedMessage.left)}px" class=${`smallLoading marginLoader`}></div>
+                ` : ''}
                 <div class="chat-text-area" style="${`${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
             
                     <div 
@@ -1320,7 +1329,6 @@ class ChatPage extends LitElement {
                     name: name ? name : undefined
                   }
                 } catch (error) {
-                    console.log(error)
                 }
         
                 return memberItem
@@ -1329,7 +1337,6 @@ class ChatPage extends LitElement {
             this.groupMembers = membersWithName
             this.pageNumber = this.pageNumber + 1
         } catch (error) {
-          console.error(error)
         }
     }
 
@@ -1337,6 +1344,7 @@ class ChatPage extends LitElement {
 
     async connectedCallback() {
         super.connectedCallback();
+        await this.initUpdate()
         this.webWorker = new WebWorker();
         this.webWorkerImage = new WebWorkerImage();
         await this.getUpdateCompleteTextEditor();
@@ -1417,10 +1425,23 @@ class ChatPage extends LitElement {
 
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.webWorker.terminate();
+        if(this.webSocket){
-        this.webWorkerImage.terminate();
+            this.webSocket.close(1000, 'switch chat')
-        this.editor.destroy()
+            this.webSocket= ''
-        this.editorImage.destroy()
+        }
+        if(this.webWorker){
+            this.webWorker.terminate();
+        }
+        if(this.webWorkerImage){
+            this.webWorkerImage.terminate();
+        }
+        if(this.editor){
+            this.editor.destroy()
+        }
+        if(this.editorImage){
+            this.editorImage.destroy()
+        }
+        
         document.removeEventListener('keydown', this.initialChat);
         document.removeEventListener('paste', this.pasteImage);
     }
@@ -1485,10 +1506,12 @@ class ChatPage extends LitElement {
                 }
             }
         }   
+
     }
 
-   async goToRepliedMessage(message){
+   async goToRepliedMessage(message, clickedOnMessage){
     const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.reference)
+    
     if(findMessage){
         findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' })
         const findElement = findMessage.shadowRoot.querySelector('.message-parent')
@@ -1507,11 +1530,29 @@ class ChatPage extends LitElement {
         return
     } 
 
+  
+
+    
     if((message.timestamp -  this.messagesRendered[0].timestamp)  < 86400000){
+        const findOriginalMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(clickedOnMessage.reference)
+    if(findOriginalMessage){
+        const messageClientRect = findOriginalMessage.getBoundingClientRect()
+        this.isLoadingGoToRepliedMessage = {
+            ...this.isLoadingGoToRepliedMessage,
+            loading: true,
+            left: messageClientRect.left,
+            top: messageClientRect.top,
+            offsetHeight: findOriginalMessage.offsetHeight
+        }
+    }
        await this.getOldMessageDynamic(0, this.messagesRendered[0].timestamp, message.timestamp - 7200000)
        const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.reference)
     if(findMessage){
-        findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        this.isLoadingGoToRepliedMessage =   {
+            ...this.isLoadingGoToRepliedMessage,
+            loading: false
+        }
+        findMessage.scrollIntoView({block: 'center' })
         const findElement = findMessage.shadowRoot.querySelector('.message-parent')
         if(findElement){
             findElement.classList.add('blink-bg')
@@ -1522,7 +1563,10 @@ class ChatPage extends LitElement {
         
         return
     }
-
+    this.isLoadingGoToRepliedMessage = {
+        ...this.isLoadingGoToRepliedMessage,
+        loading: false
+    }
     let errorMsg = get("chatpage.cchange66")
     parentEpml.request('showSnackBar', `${errorMsg}`)
     
@@ -1556,7 +1600,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}`)
             }
@@ -1585,7 +1628,6 @@ class ChatPage extends LitElement {
             const stringifyMessageObject = JSON.stringify(message);
             this.sendMessage(stringifyMessageObject, undefined, '', true)
         } catch (error) {
-            console.log({error});
         }
     }
 
@@ -1615,10 +1657,6 @@ class ChatPage extends LitElement {
     }
 
     async initUpdate(){
-        if(this.webSocket){
-            this.webSocket.close()
-            this.webSocket= ''
-        }
         this.pageNumber = 1
         const getAddressPublicKey = () => {
 
@@ -1688,7 +1726,6 @@ class ChatPage extends LitElement {
                         name: name ? name : undefined
                       }
                     } catch (error) {
-                        console.log(error)
                     }
             
                     return memberItem
@@ -1703,7 +1740,6 @@ class ChatPage extends LitElement {
                         name: name ? name : undefined
                       }
                     } catch (error) {
-                        console.log(error)
                     }
             
                     return memberItem
@@ -1713,7 +1749,6 @@ class ChatPage extends LitElement {
                 this.groupMembers = membersWithName
                 this.groupInfo = getGroupInfo
             } catch (error) {
-                console.error(error)
             }
         }
         
@@ -1748,7 +1783,7 @@ class ChatPage extends LitElement {
         if(isEnabledChatEnter){
             this.isEnabledChatEnter = isEnabledChatEnter === 'false' ? false : true 
         }
-    await this.initUpdate()
+    
     }
 
     async updated(changedProperties) {
@@ -1760,16 +1795,13 @@ class ChatPage extends LitElement {
             }       
         }
 
-        if (changedProperties && changedProperties.has('chatId') && changedProperties.get('chatId')) {
-           await this.initUpdate()
-        }
 
      
         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)
             }
         }
@@ -1844,7 +1876,7 @@ class ChatPage extends LitElement {
             .setSelectedHead=${(val) => 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)}
             >
             </chat-scroller>
@@ -2270,7 +2302,7 @@ class ChatPage extends LitElement {
 
     async fetchChatMessages(chatId) {
 
-        const initDirect = async (cid) => {
+        const initDirect = async (cid, noInitial) => {
             let initial = 0
 
             let directSocketTimeout
@@ -2290,17 +2322,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) {
@@ -2332,8 +2362,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
@@ -2348,8 +2380,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
@@ -2382,7 +2423,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) {
@@ -2417,8 +2458,10 @@ class ChatPage extends LitElement {
             }
 
             // Closed Event
-            this.webSocket.onclose = () => {
+            this.webSocket.onclose = (e) => {
                 clearTimeout(groupSocketTimeout)
+                if(e.reason === 'switch chat') return
+                restartGroupWebSocket()
             }
 
             // Error Event
@@ -2482,7 +2525,6 @@ class ChatPage extends LitElement {
                         this._publicKey.hasPubKey = false
                     }
                 } catch (error) {
-                    console.error(error);
                 }
 
                 if(!hasPublicKey || !this._publicKey.hasPubKey){

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;
@@ -474,7 +473,6 @@ class MessageTemplate extends LitElement {
                 const parsedMsg =  JSON.parse(repliedToData.decodedMessage);
                 repliedToData.decodedMessage = parsedMsg;
             } catch (error) {
-                console.error(error);
             }
             
         }
@@ -563,7 +561,7 @@ class MessageTemplate extends LitElement {
                                 ${repliedToData && html`
                                     <div class="original-message" 
                                     @click=${()=> {
-                                        this.goToRepliedMessage(repliedToData)
+                                        this.goToRepliedMessage(repliedToData, this.messageObj)
                                     }}>
                                         <p  
                                             style=${"cursor: pointer; margin: 0 0 5px 0;"} 
@@ -913,7 +911,6 @@ class ChatMenu extends LitElement {
             this.setForwardProperties(stringifyMessageObject)
            
         } catch (error) {
-            console.log({error})
         }
     }
     render() {
@@ -931,7 +928,6 @@ class ChatMenu extends LitElement {
                         this.setToggledMessage(this.originalMessage)
                         this.emojiPicker.togglePicker(e.target)
                     } catch (error) {
-                        console.log({error})
                     }
                     
                     }}

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`
             <div 
              class=${["chatbar-container", "chatbar-buttons", this.iframeId !=="_chatEditorDOM" && 'hide-styling'].join(" ")}

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'
@@ -389,26 +393,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 +511,6 @@ class Chat extends LitElement {
             }
             this.userFoundModalOpen = true;
         } catch (error) {
-            console.error(error);
             let err4string = get("chatpage.cchange35");
             parentEpml.request('showSnackBar', `${err4string}`)
         }
@@ -767,7 +751,6 @@ class Chat extends LitElement {
             })
             this.groupInvites = pendingGroupInvites;
         } catch (error) {
-            console.error(error);
             let err4string = get("chatpage.cchange61");
             parentEpml.request('showSnackBar', `${err4string}`)
         }
@@ -876,9 +859,10 @@ class Chat extends LitElement {
     }
 
     setChatHeads(chatObj) {
-
+        const chatObjGroups = Array.isArray(chatObj.groups) ? chatObj.groups  : [];
-        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}` })
+        const chatObjDirect = Array.isArray(chatObj.direct) ? chatObj.direct : [];
-        let directList = chatObj.direct.map(dc => {
+        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) => {

qortal-ui-plugins/plugins/utils/replace-messages-edited.js

@@ -21,7 +21,7 @@ export const replaceMessagesEdited = async ({
 				let responseItem = { ...response[0] }
                 const decodeResponseItem = decodeMessageFunc(responseItem, isReceipient, _publicKey)
 				delete decodeResponseItem.timestamp
-				console.log({msg})
+		
 				msgItem = {
 					...msg,
 					...decodeResponseItem,
@@ -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