From 7d6568ce79da40b87d9cd51e57a21405fbb172c9 Mon Sep 17 00:00:00 2001
From: Justin Ferrari <‘justinwesleyferrari@gmail.com’>
Date: Wed, 30 Nov 2022 14:17:29 -0500
Subject: [PATCH] Fixed the chat message size bug

---
 .../plugins/core/components/ChatPage.js       | 33 +++----
 .../plugins/core/components/ChatScroller.js   | 27 +++---
 .../plugins/core/components/ChatTextEditor.js | 89 ++++++++++++-------
 3 files changed, 78 insertions(+), 71 deletions(-)

diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js
index 5efa10a6..ecca8d3d 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js
@@ -59,7 +59,7 @@ class ChatPage extends LitElement {
             repliedToMessageObj: { type: Object },
             editedMessageObj: { type: Object },
             iframeHeight: { type: Number },
-            chatMessageSize: { type: Number},
+            // chatMessageSize: { type: Number},
             imageFile: { type: Object },
             isUploadingImage: { type: Boolean },
             chatEditor: { type:  Object },
@@ -545,7 +545,7 @@ class ChatPage extends LitElement {
         this.repliedToMessageObj = null
         this.editedMessageObj = null
         this.iframeHeight = 42
-        this.chatMessageSize = 0
+        // this.chatMessageSize = 0
         this.imageFile = null
         this.uid = new ShortUniqueId()
         this.userLanguage = ""
@@ -619,7 +619,7 @@ class ChatPage extends LitElement {
                                     </div>
                                 </div>
                             `}
-                        <div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}">
+                        <div class="chatbar">
                             <chat-text-editor
                                 ?hasGlobalEvents=${true}
                                 iframeId="_chatEditorDOM"
@@ -676,15 +676,6 @@ class ChatPage extends LitElement {
                                     ?isLoadingMessages=${this.isLoadingMessages}>
                                 </chat-text-editor>
                             </div>
-                                ${this.chatMessageSize >= 750 ? 
-                                html`
-                                <div class="message-size-container">
-                                    <div class="message-size" style="${this.chatMessageSize >= 1000 && 'color: #bd1515'}">
-                                        ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
-                                    </div>
-                                </div>
-                                ` : 
-                                html``}
                             <div class="modal-button-row">
                                 <button
                                     class="modal-button-red"
@@ -875,7 +866,7 @@ class ChatPage extends LitElement {
     }
 
     async getOldMessage(scrollElement) {
-
+        
         if (this.isReceipient) {
             const getInitialMessages = await parentEpml.request('apiCall', {
                 type: 'api',
@@ -1553,13 +1544,15 @@ class ChatPage extends LitElement {
             this.isLoading = false;
             this.chatEditor.enable();
             this.chatEditorNewChat.enable()
-        } else if (this.chatMessageSize >= 1000) {
-            this.isLoading = false;
-            this.chatEditor.enable();
-            this.chatEditorNewChat.enable()
-            let err1string = get("chatpage.cchange29");
-            parentEpml.request('showSnackBar', `${err1string}`);
-        } else if (this.repliedToMessageObj) {
+        } 
+        // else if (this.chatMessageSize >= 1000) {
+        //     this.isLoading = false;
+        //     this.chatEditor.enable();
+        //     this.chatEditorNewChat.enable()
+        //     let err1string = get("chatpage.cchange29");
+        //     parentEpml.request('showSnackBar', `${err1string}`);
+        // } 
+        else if (this.repliedToMessageObj) {
             let chatReference = this.repliedToMessageObj.reference
 
             if(this.repliedToMessageObj.chatReference){
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index 6f534672..7c5818f3 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -78,6 +78,7 @@ class ChatScroller extends LitElement {
             return messageArray;
         }, [])
 
+    
         return html`
             <ul id="viewElement" class="chat-list clearfix">
                 <div id="upObserver"></div>
@@ -136,8 +137,8 @@ class ChatScroller extends LitElement {
 
     _upObserverhandler(entries) {
         if (entries[0].isIntersecting) {
-            let _scrollElement = entries[0].target.nextElementSibling
-            this._getOldMessage(_scrollElement)
+            let _scrollElement = entries[0].target.nextElementSibling;
+            this._getOldMessage(_scrollElement);
         }
     }
 
@@ -155,9 +156,8 @@ class ChatScroller extends LitElement {
             rootMargin: '0px',
             threshold: 1
         };
-
-        const observer = new IntersectionObserver(this._upObserverhandler, options)
-        observer.observe(this.upObserverElement)
+        const observer = new IntersectionObserver(this._upObserverhandler, options);
+        observer.observe(this.upObserverElement);
     }
 
     downElementObserver() {
@@ -166,17 +166,13 @@ class ChatScroller extends LitElement {
         rootMargin: '0px',
         threshold: 1
     }
-
     // identify an element to observe
-    const elementToObserve = this.downObserverElement
-
+    const elementToObserve = this.downObserverElement;
     // passing it a callback function
-    const observer = new IntersectionObserver(this._downObserverHandler, options)
-
+    const observer = new IntersectionObserver(this._downObserverHandler, options);
     // call `observe()` on that MutationObserver instance,
     // passing it the element to observe, and the options object
-    observer.observe(elementToObserve)
-
+    observer.observe(elementToObserve);
     }
 }
 
@@ -577,16 +573,13 @@ class ChatMenu extends LitElement {
       this.emojiPicker.on('emoji', selection => {
         this.sendMessage({
             type: 'reaction',
-editedMessageObj: this.originalMessage,
+            editedMessageObj: this.originalMessage,
             reaction:  selection.emoji,
-         
-           
          })
         });
     }
     
     render() {
-        console.log('version', this.version)
         return html` 
             <div class="container">
             <div 
@@ -601,7 +594,7 @@ editedMessageObj: this.originalMessage,
                     }}
                >
                     <vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>
-                </div>
+                </div>                
                 <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange9")}" @click="${() => this.showPrivateMessageModal()}">   
                     <vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
                 </div>
diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
index 7d984763..52f6007f 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
@@ -21,6 +21,7 @@ class ChatTextEditor extends LitElement {
             setChatEditor: { attribute: false },
             iframeId: { type: String },
             hasGlobalEvents: { type: Boolean },
+            chatMessageSize: { type: Number },
             theme: {
                 type: String,
                 reflect: true
@@ -142,14 +143,14 @@ class ChatTextEditor extends LitElement {
         this.removeGlobalEventListener = this.removeGlobalEventListener.bind(this)
         this.initialChat = this.initialChat.bind(this)
         this.iframeHeight = 42
-        this.userName = window.parent.reduxStore.getState().app.accountInfo.names[0];
-        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light';
+        this.chatMessageSize = 0
+        this.userName = window.parent.reduxStore.getState().app.accountInfo.names[0]
+        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
 	}
 
 	render() {
-        console.log(this.theme)
 		return html`
-			 <div 
+            <div 
              class=${["chatbar-container", this.iframeId === "newChat" ? "chatbar-caption" : ""].join(" ")}
              style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'align-items: flex-end' : "align-items: center"}">
                 <div class="file-picker-container" @click=${(e) => {
@@ -176,17 +177,24 @@ class ChatTextEditor extends LitElement {
                 ${this.editedMessageObj ? (
                     html`
                     <div>
-                    ${this.isLoading === false ? html`
-                        <vaadin-icon
-                            class="checkmark-icon"
-                            icon="vaadin:check"
-                            slot="icon"
-                            @click=${() => this._sendMessage()}
-                            >
-                        </vaadin-icon>
-                        ` :
-                        html`
-                        <paper-spinner-lite active></paper-spinner-lite>
+                        ${this.isLoading === false ? html`
+                            <vaadin-icon
+                                class="checkmark-icon"
+                                icon="vaadin:check"
+                                slot="icon"
+                                @click=${() => {
+                                    if (this.chatMessageSize > 1000 ) {
+                                        parentEpml.request('showSnackBar', get("chatpage.cchange29"));
+                                        return;
+                                    }
+                                    this._sendMessage();
+                                    this.chatMessageSize = 0;
+                                }}
+                                >
+                            </vaadin-icon>
+                            ` :
+                            html`
+                            <paper-spinner-lite active></paper-spinner-lite>
                         `}
                     </div>
                         `
@@ -198,7 +206,15 @@ class ChatTextEditor extends LitElement {
                                 src="/img/qchat-send-message-icon.svg" 
                                 alt="send-icon" 
                                 class="send-icon" 
-                                @click=${() => this._sendMessage()} />
+                                @click=${() => {
+                                    if (this.chatMessageSize > 1000 ) {
+                                    parentEpml.request('showSnackBar', get("chatpage.cchange29"));
+                                    return;
+                                    }
+                                    this._sendMessage();
+                                    this.chatMessageSize = 0;
+                                }} 
+                                />
                             ` : 
                             html`
                                 <paper-spinner-lite active></paper-spinner-lite>
@@ -207,16 +223,16 @@ class ChatTextEditor extends LitElement {
                         `
                     }
                 </div>
-                ${this.chatMessageSize >= 750 ? 
-                    html`
-                    <div class="message-size-container">
-                        <div class="message-size" style="${this.chatMessageSize >= 1000 && 'color: #bd1515'}">
-                            ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
+                    ${this.chatMessageSize >= 750 ? 
+                        html`
+                        <div class="message-size-container">
+                            <div class="message-size" style="${this.chatMessageSize > 1000 && 'color: #bd1515'}">
+                                ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
+                            </div>
                         </div>
-                    </div>
-                    ` : 
+                        ` : 
                     html``}
-                </div>
+            </div>
 		`
 	}
 
@@ -257,7 +273,7 @@ class ChatTextEditor extends LitElement {
 
         window.addEventListener('storage', () => {
             const checkTheme = localStorage.getItem('qortalTheme');
-            const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId');
+            const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
             if (checkTheme === 'dark') {
                 this.theme = 'dark';
                 chatbar.style.cssText = "color:#ffffff;"
@@ -301,8 +317,7 @@ class ChatTextEditor extends LitElement {
             this.chatEditor.insertText(this.editedMessageObj.message)
         }
         if (changedProperties && changedProperties.has('placeholder')) {
-            console.log(this.placeholder, "here600");
-            const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId');
+            const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
             captionEditor.setAttribute('data-placeholder', this.placeholder);
         }
     }
@@ -356,6 +371,7 @@ class ChatTextEditor extends LitElement {
             const stringified = JSON.stringify(messageObject);
             const size =  new Blob([stringified]).size;
             this.chatMessageSize = size;
+            console.log(this.chatMessageSize, "here600");
 
         } catch (error) {
             console.error(error)
@@ -365,14 +381,13 @@ class ChatTextEditor extends LitElement {
 
     calculateIFrameHeight(height) {
         setTimeout(()=> {
-            const editorTest = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId').scrollHeight;
+            const editorTest = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId').scrollHeight;
             this.iframeHeight = editorTest + 20;
         }, 50)
     }
 
     initChatEditor() {
         const ChatEditor = function (editorConfig) {    
-            console.log(editorConfig.placeholder, "here5600");        
             const ChatEditor = function () {
                 const editor = this;
                 editor.init();
@@ -560,7 +575,7 @@ class ChatTextEditor extends LitElement {
                 
                 const editor = this;
 
-                const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keydown', 'blur', 'paste']
+                const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keyup', 'blur', 'paste']
 
                 for (let i = 0; i < events.length; i++) {
                     const event = events[i]
@@ -611,9 +626,11 @@ class ChatTextEditor extends LitElement {
                             return false;
                         }
 
-                        if (e.type === 'keydown') {
+                        if (e.type === 'keyup') {
+                            console.log(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML, "here 12");
+
                             editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
-                            editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML);
+                            editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML);
 
                              // Handle Enter
                             if (e.keyCode === 13 && !e.shiftKey) {
@@ -622,7 +639,7 @@ class ChatTextEditor extends LitElement {
                                 editor.updateMirror();
 
                                 if (editor.state() === 'false') return false;
-                                if(editorConfig.iframeId === 'newChat'){
+                                if (editorConfig.iframeId === 'newChat') {
                                     editorConfig.sendFunc(
                                         {
                                             type: 'image',
@@ -630,6 +647,10 @@ class ChatTextEditor extends LitElement {
                                         }
                                     );
                                 } else {
+                                    if (this.chatMessageSize > 1000 ) {
+                                        parentEpml.request('showSnackBar', get("chatpage.cchange29"));
+                                        return;
+                                    }
                                     editorConfig.sendFunc();
                                 }
                                 
@@ -704,7 +725,7 @@ class ChatTextEditor extends LitElement {
                 elemDiv.setAttribute('spellcheck', 'false');
                 elemDiv.setAttribute('data-placeholder', editorConfig.placeholder);
                 elemDiv.style.cssText = `width:100%; ${editorConfig.theme === "dark" ? "color:#ffffff;" : "color: #080808"}`;
-                elemDiv.id = 'testingId';
+                elemDiv.id = 'chatbarId';
                 editor.content.body.appendChild(elemDiv);
                 editor.contentDiv =  editor.frame.contentDocument.body.firstChild;
                 editor.styles();