diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 38f36797..77087bb4 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -489,7 +489,9 @@ "cchange27": "A registered name is required to send images", "cchange28": "This file is not an image", "cchange29": "Maximum message size is 1000 bytes", - "cchange30": "Cancel" + "cchange30": "Uploading image. This may take up to one minute.", + "cchange31": "Deleting image. This may take up to one minute.", + "cchange33": "Cancel" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 9450c412..a01ef691 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -58,8 +58,9 @@ class ChatPage extends LitElement { repliedToMessageObj: { type: Object }, editedMessageObj: { type: Object }, iframeHeight: { type: Number }, - chatMessageSize: { type: Number }, - imageFile: { type: Object }, + chatMessageSize: { type: Number}, + imageFile: {type: Object}, + isUploadingImage: {type: Boolean}, caption: { type: String } } } @@ -386,6 +387,86 @@ class ChatPage extends LitElement { cursor: pointer; } + .dialogCustom { + position: fixed; + z-index: 10000; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + top: 10px; + right: 20px; + user-select: none; + } + + .dialogCustom p { + color: var(--black) + } + .row { + display: flex; + width: 100%; + align-items: center; + } + + .between { + justify-content: space-between; + } + + .dialogCustomInner { + min-width: 300px; + height: 40px; + background-color: var(--white); + box-shadow: var(--mdc-dialog-box-shadow, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)); + padding: 10px; + border-radius: 4px; + } + .dialogCustomInner ul { + padding-left: 0px + } + .dialogCustomInner li { + margin-bottom: 10px; + } + .marginLoader { + margin-right: 8px; + } + .smallLoading, + .smallLoading:after { + border-radius: 50%; + width: 2px; + height: 2px; + } + .smallLoading { + border-width: 0.6em; + border-style: solid; + border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) + rgba(3, 169, 244, 0.2) rgb(3, 169, 244); + font-size: 10px; + position: relative; + text-indent: -9999em; + transform: translateZ(0px); + animation: 1.1s linear 0s infinite normal none running loadingAnimation; + } + @-webkit-keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + @keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + .mdc-dialog .mdc-dialog__surface { border-radius: 10px; } @@ -530,7 +611,7 @@ class ChatPage extends LitElement { this.imageFile = null }} > - ${translate("chatpage.cchange30")} + ${translate("chatpage.cchange33")} + ${(this.isUploadingImage || this.isDeletingImage) ? html` +
+
+
+ +
+ +
+

+ ${this.isDeletingImage ? + translate("chatpage.cchange31") : translate("chatpage.cchange30")} + +

+
+ + + +
+ +
+ +
+ + `: ''} + ` } @@ -1398,6 +1504,7 @@ class ChatPage extends LitElement { } if(outSideMsg && outSideMsg.type === 'delete'){ + this.isDeletingImage = true const userName = outSideMsg.name const identifier = outSideMsg.identifier let compressedFile = '' @@ -1454,11 +1561,12 @@ class ChatPage extends LitElement { selectedAddress: this.selectedAddress, worker: new WebWorkerImage() }) - } catch (error) { - console.error(error) - this.isLoading = false; - this.chatEditor.enable(); - return + this.isDeletingImage = false + } catch (error) { + console.error(error) + this.isLoading = false; + this.chatEditor.enable(); + return } typeMessage = 'edit'; let chatReference = outSideMsg.editedMessageObj.reference; @@ -1485,7 +1593,7 @@ class ChatPage extends LitElement { } else if (outSideMsg && outSideMsg.type === 'image') { - + this.isUploadingImage = true; const userName = await getName(this.selectedAddress.address); if (!userName) { parentEpml.request('showSnackBar', get("chatpage.cchange27")); @@ -1520,6 +1628,7 @@ class ChatPage extends LitElement { this.chatEditor.enable(); return; } + try { await publishData({ registeredName: userName, @@ -1532,6 +1641,8 @@ class ChatPage extends LitElement { selectedAddress: this.selectedAddress, worker: new WebWorkerImage() }) + + this.isUploadingImage = false } catch (error) { console.error(error) this.isLoading = false; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 66bddb43..0e92dfcb 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -356,6 +356,10 @@ export const chatStyles = css` .image-container { display: flex; } + .defaultSize { + width:45vh; + height:40vh + } .image-delete-icon { margin-left: 5px; height: 20px; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 8180d967..7b55c825 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -47,10 +47,80 @@ class ChatScroller extends LitElement { render() { + console.log({messages: this.messages}) + + let formattedMessages = this.messages.reduce((messageArray, message)=> { + const lastGroupedMessage = messageArray[messageArray.length - 1] + let timestamp + let sender + let repliedToData + if(lastGroupedMessage){ + timestamp = lastGroupedMessage.timestamp + sender = lastGroupedMessage.sender + repliedToData = lastGroupedMessage.repliedToData + } + const isSameGroup = Math.abs(timestamp - message.timestamp) < 600000 && sender === message.sender && !repliedToData + + if(isSameGroup){ + messageArray[messageArray.length - 1].messages = [...(messageArray[messageArray.length - 1]?.messages || []), message] + } else { + messageArray.push({ + messages: [message], + ...message + }) + } + return messageArray + }, []) + + console.log({formattedMessages}) return html`