From a525fbc3b4d7ff587fa9a6547c464f5d7730d5c7 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Fri, 4 Nov 2022 22:04:56 -0500 Subject: [PATCH] Added loader for messages + fixed message size UI --- .../plugins/core/components/ChatPage.js | 405 ++++++++++++------ 1 file changed, 267 insertions(+), 138 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index d25b29f4..37d522b6 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -165,8 +165,9 @@ class ChatPage extends LitElement { } .chat-text-area .typing-area .chatbar { - width: auto; + position: relative; display: flex; + flex-direction: column; justify-content: center; align-items: center; height: auto; @@ -174,6 +175,13 @@ class ChatPage extends LitElement { overflow-y: hidden; } + .chatbar-container { + width: 100%; + display: flex; + height: auto; + overflow: hidden; + } + .chat-text-area .typing-area .emoji-button { width: 45px; height: 40px; @@ -186,6 +194,98 @@ class ChatPage extends LitElement { color: var(--black); } + .message-size-container { + display: flex; + justify-content: flex-end; + width: 100%; + } + + .message-size { + font-family: Roboto, sans-serif; + font-size: 12px; + color: black; + } + + .lds-grid { + width: 120px; + height: 120px; + position: absolute; + left: 50%; + top: 40%; + } + + .lds-grid div { + position: absolute; + width: 34px; + height: 34px; + border-radius: 50%; + background: #03a9f4; + animation: lds-grid 1.2s linear infinite; + } + + .lds-grid div:nth-child(1) { + top: 4px; + left: 4px; + animation-delay: 0s; + } + + .lds-grid div:nth-child(2) { + top: 4px; + left: 48px; + animation-delay: -0.4s; + } + + .lds-grid div:nth-child(3) { + top: 4px; + left: 90px; + animation-delay: -0.8s; + } + + .lds-grid div:nth-child(4) { + top: 50px; + left: 4px; + animation-delay: -0.4s; + } + + .lds-grid div:nth-child(5) { + top: 50px; + left: 48px; + animation-delay: -0.8s; + } + + .lds-grid div:nth-child(6) { + top: 50px; + left: 90px; + animation-delay: -1.2s; + } + + .lds-grid div:nth-child(7) { + top: 95px; + left: 4px; + animation-delay: -0.8s; + } + + .lds-grid div:nth-child(8) { + top: 95px; + left: 48px; + animation-delay: -1.2s; + } + + .lds-grid div:nth-child(9) { + top: 95px; + left: 90px; + animation-delay: -1.6s; + } + + @keyframes lds-grid { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } + } + .float-left { float: left; } @@ -207,16 +307,19 @@ class ChatPage extends LitElement { width: 30px; margin-left: 5px; transition: all 0.1s ease-in-out; + cursor: pointer; } .send-icon:hover { filter: brightness(1.1); } + .file-picker-container { position: relative; height: 25px; width: 25px; } + .file-picker-input-container { position: absolute; top: 0px; @@ -229,14 +332,15 @@ class ChatPage extends LitElement { } input[type=file]::-webkit-file-upload-button { - cursor: pointer; -} + cursor: pointer; + } ` } constructor() { super() + this.getMessageConfig = this.getMessageConfig.bind(this) this.getOldMessage = this.getOldMessage.bind(this) this._sendMessage = this._sendMessage.bind(this) this.insertImage = this.insertImage.bind(this) @@ -264,7 +368,7 @@ class ChatPage extends LitElement { this.repliedToMessageObj = null this.editedMessageObj = null this.iframeHeight = 40 - this.chatMessageSize = 5 + this.chatMessageSize = 0 this.imageFile = null this.uid = new ShortUniqueId() } @@ -273,44 +377,56 @@ class ChatPage extends LitElement { return html`
- ${this.isLoadingMessages ? html`

${translate("chatpage.cchange22")}

` : this.renderChatScroller(this._initialMessages)} - { - this.imageFile = null - }}> -
-
-
- ${this.imageFile && html` - - `} - -
- { - this._sendMessage({ - type: 'image', - imageFile: this.imageFile, - caption: 'This is a caption' - }) - }} - > - send - - { - - this.imageFile = null - }} - > - ${translate("general.close")} - - + ${this.isLoadingMessages ? + html` +
+
+
+
+
+
+
+
+
+
+
+ ` : + this.renderChatScroller(this._initialMessages)} + { + this.imageFile = null + }}> +
+
+ ${this.imageFile && html` + + `} +
+ { + this._sendMessage({ + type: 'image', + imageFile: this.imageFile, + caption: 'This is a caption' + }) + }} + > + send + + { + + this.imageFile = null + }} + > + ${translate("general.close")} + +
@@ -348,58 +464,78 @@ class ChatPage extends LitElement { >
`} -
-
- this.closeEditMessageContainer()} +
+
- -
- -
- -
- - - - - ${this.editedMessageObj ? ( - html` -
- ${this.isLoading === false ? html` +
this._sendMessage()} - > + @click=${() => this.closeEditMessageContainer()} + > - ` : - html` - - `} +
+ +
- ` - ) : - html` -
- ${this.isLoading === false ? html`send-icon` : html``} + + + + ${this.editedMessageObj ? ( + html` +
+ ${this.isLoading === false ? html` + this._sendMessage()} + > + + ` : + html` + + `}
- ` - } + ` + ) : + html` +
+ ${this.isLoading === false ? html` + send-icon this._sendMessage()} /> + ` : + html` + + `} +
+ ` + } +
+ ${this.chatMessageSize >= 750 ? + html` +
+
+ ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} +
+
+ ` : + html``}
+
` } @@ -426,6 +562,8 @@ class ChatPage extends LitElement { this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM'); + console.log(this.chatMessageInput); + console.log(this.mirrorChatInput.clientHeight); document.addEventListener('keydown', (e) => { if (!this.chatEditor.content.body.matches(':focus')) { // WARNING: Deprecated methods from KeyBoard Event @@ -536,15 +674,16 @@ class ChatPage extends LitElement { if (chatReference1 && chatReference2) { await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered); } - } if (changedProperties && changedProperties.has('editedMessageObj')) { this.chatEditor.insertText(this.editedMessageObj.message) } + if (changedProperties && changedProperties.has('chatMessageSize')) { + console.log(this.chatMessageSize, "Chat Message Size"); + } } calculateIFrameHeight(height) { - console.log(height, "height here") this.iframeHeight = height; } @@ -716,63 +855,54 @@ class ChatPage extends LitElement { } } + getMessageConfig() { + const textAreaElement = this.shadowRoot.getElementById('messageBox'); + return textAreaElement.value; + } + getMessageSize(message){ try { - - const messageText = message + const messageText = message; // Format and Sanitize Message const sanitizedMessage = messageText.replace(/ /gi, ' ').replace(//gi, '\n'); const trimmedMessage = sanitizedMessage.trim(); let messageObject = {}; if (this.repliedToMessageObj) { - let chatReference = this.repliedToMessageObj.reference - - if(this.repliedToMessageObj.chatReference){ - chatReference = this.repliedToMessageObj.chatReference + let chatReference = this.repliedToMessageObj.reference; + if (this.repliedToMessageObj.chatReference) { + chatReference = this.repliedToMessageObj.chatReference; } - messageObject = { messageText: trimmedMessage, images: [''], repliedTo: chatReference, version: 1 } - } else if (this.editedMessageObj) { - - - - - let message = "" - try { - const parsedMessageObj = JSON.parse(this.editedMessageObj.decodedMessage) - message = parsedMessageObj - - } catch (error) { - message = this.messageObj.decodedMessage - } + let message = ""; + try { + const parsedMessageObj = JSON.parse(this.editedMessageObj.decodedMessage); + message = parsedMessageObj; + } catch (error) { + message = this.messageObj.decodedMessage + } messageObject = { ...message, messageText: trimmedMessage, - } - } else { messageObject = { messageText: trimmedMessage, images: [''], repliedTo: '', version: 1 - } - - + }; } - const stringified = JSON.stringify(messageObject) + const stringified = JSON.stringify(messageObject); const size = new Blob([stringified]).size; - this.chatMessageSize = size - + this.chatMessageSize = size; } catch (error) { console.error(error) @@ -1168,8 +1298,7 @@ class ChatPage extends LitElement { const userName = outSideMsg.name const identifier = outSideMsg.identifier let compressedFile = '' - var str = - "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg=="; + var str = "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg=="; const b64toBlob = (b64Data, contentType='', sliceSize=512) => { const byteCharacters = atob(b64Data); @@ -1226,42 +1355,38 @@ class ChatPage extends LitElement { } catch (error) { console.error(error) } - - - - typeMessage = 'edit' - let chatReference = outSideMsg.editedMessageObj.reference + typeMessage = 'edit'; + let chatReference = outSideMsg.editedMessageObj.reference; if(outSideMsg.editedMessageObj.chatReference){ chatReference = outSideMsg.editedMessageObj.chatReference } - let message = "" + let message = ""; try { - const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage) - message = parsedMessageObj + const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage); + message = parsedMessageObj; } catch (error) { - message = outSideMsg.editedMessageObj.decodedMessage + message = outSideMsg.editedMessageObj.decodedMessage; } const messageObject = { ...message, isImageDeleted: true } - const stringifyMessageObject = JSON.stringify(messageObject) + const stringifyMessageObject = JSON.stringify(messageObject); this.sendMessage(stringifyMessageObject, typeMessage, chatReference); } - else if(outSideMsg && outSideMsg.type === 'image'){ + else if (outSideMsg && outSideMsg.type === 'image') { - - const userName = await getName(this.selectedAddress.address) - if(!userName){ - parentEpml.request('showSnackBar', get("chatpage.cchange27")) + const userName = await getName(this.selectedAddress.address); + if (!userName) { + parentEpml.request('showSnackBar', get("chatpage.cchange27")); this.isLoading = false; this.chatEditor.enable(); - return + return; } const id = this.uid(); const identifier = `qchat_${id}` @@ -1732,8 +1857,7 @@ class ChatPage extends LitElement { for (let i = 0; i < events.length; i++) { const event = events[i] editor.content.body.addEventListener(event, async function (e) { - - editorConfig.getMessageSize(editorConfig.mirrorElement.value) + console.log("hello world12") if (e.type === 'click') { e.preventDefault(); e.stopPropagation(); @@ -1776,10 +1900,13 @@ class ChatPage extends LitElement { } if (e.type === 'keydown') { - console.log(editorConfig.mirrorElement.scrollHeight); + console.log("key pressed"); + console.log(editorConfig.getMessageConfig(), "this is the chat input value"); + console.log(editorConfig.editableElement.contentDocument.body.scrollHeight, "scroll height") + console.log(editorConfig.mirrorElement.clientHeight, "client height") editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); - - // Handle Enter + editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML); + // Handle Enter if (e.keyCode === 13 && !e.shiftKey) { // Update Mirror @@ -1858,6 +1985,7 @@ class ChatPage extends LitElement { }; const editorConfig = { + getMessageConfig: this.getMessageConfig, getMessageSize: this.getMessageSize, calculateIFrameHeight: this.calculateIFrameHeight, mirrorElement: this.mirrorChatInput, @@ -1869,7 +1997,8 @@ class ChatPage extends LitElement { placeholder: this.chatEditorPlaceholder, imageFile: this.imageFile, requestUpdate: this.requestUpdate, - insertImage: this.insertImage + insertImage: this.insertImage, + chatMessageSize: this.chatMessageSize }; this.chatEditor = new ChatEditor(editorConfig); }