diff --git a/qortal-ui-plugins/plugins/core/components/ChatModals.js b/qortal-ui-plugins/plugins/core/components/ChatModals.js index c9daf3b4..a41f6748 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatModals.js +++ b/qortal-ui-plugins/plugins/core/components/ChatModals.js @@ -366,7 +366,6 @@ class ChatModals extends LitElement {

{ - console.log("here500"); this._sendMessage(); } }>${translate('welcomepage.wcchange6')} diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 76f9a726..2b2384fc 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -54,8 +54,9 @@ class ChatPage extends LitElement { _initialMessages: { type: Array }, isUserDown: { type: Boolean }, isPasteMenuOpen: { type: Boolean }, - showNewMesssageBar: { attribute: false }, - hideNewMesssageBar: { attribute: false }, + showNewMessageBar: { attribute: false }, + hideNewMessageBar: { attribute: false }, + setOpenPrivateMessage: { attribute: false }, chatEditorPlaceholder: { type: String }, messagesRendered: { type: Array }, repliedToMessageObj: { type: Object }, @@ -75,6 +76,8 @@ class ChatPage extends LitElement { openForwardOpen: {type: Boolean }, userFound: { type: Array }, userFoundModalOpen: { type: Boolean }, + webWorker: { type: Object }, + webWorkerImage: { type: Object } } } @@ -693,10 +696,12 @@ class ChatPage extends LitElement { name: "", selected: false } + this.webWorker = null; + this.webWorkerImage = null; } render() { - console.log(25, 'here'); + console.log(5, 'Chat Page Here'); return html`
@@ -799,7 +804,7 @@ class ChatPage extends LitElement { .onClickFunc=${() => { this.chatEditorNewChat.resetValue(); this.removeImage(); - } } + }} style=${(this.imageFile && !this.isUploadingImage) ? "display: block" : "display: none"}>
@@ -983,6 +988,18 @@ class ChatPage extends LitElement { ` } + connectedCallback() { + super.connectedCallback(); + this.webWorker = new WebWorker(); + this.webWorkerImage = new WebWorkerImage(); + } + + disconnectedCallback() { + super.disconnectedCallback(); + this.webWorker.terminate(); + this.webWorkerImage.terminate(); + } + async userSearch() { const nameValue = this.shadowRoot.getElementById('sendTo').value; if (!nameValue) { @@ -1009,7 +1026,7 @@ class ChatPage extends LitElement { let err4string = get("chatpage.cchange35"); parentEpml.request('showSnackBar', `${err4string}`) } - } + } setForwardProperties(forwardedMessage){ this.openForwardOpen = true @@ -1175,9 +1192,6 @@ class ChatPage extends LitElement { } } - if (changedProperties && changedProperties.has('forwardActiveChatHeadUrl')) { - console.log(this.forwardActiveChatHeadUrl, "forwardActiveChatHeadUrl here"); - } } async renderPlaceholder() { @@ -1224,6 +1238,7 @@ class ChatPage extends LitElement { ?isLoadingMessages=${this.isLoadingOldMessages} .setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)} .setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)} + .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} > ` @@ -1435,7 +1450,7 @@ class ChatPage extends LitElement { this.messagesRendered = [...this.messagesRendered, newMessage] await this.getUpdateComplete(); - this.showNewMesssageBar(); + this.showNewMessageBar(); } } @@ -1673,7 +1688,6 @@ class ChatPage extends LitElement { } async _sendMessage(outSideMsg) { - if(this.isReceipient){ let hasPublicKey = true if(!this._publicKey.hasPubKey){ @@ -1714,7 +1728,7 @@ class ChatPage extends LitElement { // create new var called repliedToData and use that to modify the UI // find specific object property in local let typeMessage = 'regular'; - + let workerImage; this.isLoading = true; this.chatEditor.disable(); this.chatEditorNewChat.disable() @@ -1747,26 +1761,32 @@ class ChatPage extends LitElement { const identifier = outSideMsg.identifier let compressedFile = '' var str = "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg=="; + + if (this.webWorkerImage) { + workerImage = this.webWorkerImage; + } else { + this.webWorkerImage = new WebWorkerImage(); + } - const b64toBlob = (b64Data, contentType='', sliceSize=512) => { - const byteCharacters = atob(b64Data); - const byteArrays = []; - - for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { - const slice = byteCharacters.slice(offset, offset + sliceSize); - - const byteNumbers = new Array(slice.length); - for (let i = 0; i < slice.length; i++) { - byteNumbers[i] = slice.charCodeAt(i); - } - - const byteArray = new Uint8Array(byteNumbers); - byteArrays.push(byteArray); + const b64toBlob = (b64Data, contentType='', sliceSize=512) => { + const byteCharacters = atob(b64Data); + const byteArrays = []; + + for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { + const slice = byteCharacters.slice(offset, offset + sliceSize); + + const byteNumbers = new Array(slice.length); + for (let i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + const byteArray = new Uint8Array(byteNumbers); + byteArrays.push(byteArray); + } + + const blob = new Blob(byteArrays, {type: contentType}); + return blob; } - - const blob = new Blob(byteArrays, {type: contentType}); - return blob; - } const blob = b64toBlob(str, 'image/png'); await new Promise(resolve => { new Compressor(blob, { @@ -1795,7 +1815,7 @@ class ChatPage extends LitElement { metaData: undefined, uploadType: 'file', selectedAddress: this.selectedAddress, - worker: new WebWorkerImage() + worker: workerImage }) this.isDeletingImage = false } catch (error) { @@ -1839,6 +1859,13 @@ class ChatPage extends LitElement { this.chatEditorNewChat.enable() return; } + + if (this.webWorkerImage) { + workerImage = this.webWorkerImage; + } else { + this.webWorkerImage = new WebWorkerImage(); + } + const image = this.imageFile const id = this.uid(); const identifier = `qchat_${id}`; @@ -1878,7 +1905,7 @@ class ChatPage extends LitElement { metaData: undefined, uploadType: 'file', selectedAddress: this.selectedAddress, - worker: new WebWorkerImage() + worker: workerImage }); this.isUploadingImage = false; this.imageFile = null; @@ -2162,28 +2189,35 @@ class ChatPage extends LitElement { const _computePow = async (chatBytes, isForward) => { const difficulty = this.balance === 0 ? 12 : 8; + const path = window.parent.location.origin + '/memory-pow/memory-pow.wasm.full' - const worker = new WebWorker(); - let nonce = null - let chatBytesArray = null + + let worker; + + if (this.webWorker) { + worker = this.webWorker; + } else { + this.webWorker = new WebWorker(); + } + + let nonce = null; + + let chatBytesArray = null; + await new Promise((res, rej) => { worker.postMessage({chatBytes, path, difficulty}); - worker.onmessage = e => { - worker.terminate() - chatBytesArray = e.data.chatBytesArray - nonce = e.data.nonce - res() - + chatBytesArray = e.data.chatBytesArray; + nonce = e.data.nonce; + res(); } - }) + }); let _response = await parentEpml.request('sign_chat', { nonce: this.selectedAddress.nonce, chatBytesArray: chatBytesArray, chatNonce: nonce }); - getSendChatResponse(_response, isForward); }; @@ -2232,7 +2266,7 @@ class ChatPage extends LitElement { if (entries[0].isIntersecting) { this.setIsUserDown(true) - this.hideNewMesssageBar() + this.hideNewMessageBar() } else { this.setIsUserDown(false) diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 4b644c79..1d054bab 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -446,4 +446,52 @@ export const chatStyles = css` width: 100%; justify-content: center } + + .delete-image-msg { + font-family: Livvic, sans-serif; + font-size: 20px; + color: var(--chat-bubble-msg-color); + letter-spacing: 0.3px; + font-weight: 300; + text-align: center; + } + + .modal-button-row { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + } + + .modal-button { + font-family: Roboto, sans-serif; + font-size: 16px; + color: var(--mdc-theme-primary); + background-color: transparent; + padding: 8px 10px; + border-radius: 5px; + border: none; + transition: all 0.3s ease-in-out; + } + + .modal-button-red { + font-family: Roboto, sans-serif; + font-size: 16px; + color: #F44336; + background-color: transparent; + padding: 8px 10px; + border-radius: 5px; + border: none; + transition: all 0.3s ease-in-out; + } + + .modal-button-red:hover { + cursor: pointer; + background-color: #f4433663; + } + + .modal-button:hover { + cursor: pointer; + background-color: #03a8f475; + } ` diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 39f9a01d..d900ed69 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -36,7 +36,8 @@ class ChatScroller extends LitElement { isLoadingMessages: { type: Boolean}, setIsLoadingMessages: {attribute: false}, chatId: { type: String }, - setForwardProperties: {attribute: false}, + setForwardProperties: { attribute: false }, + setOpenPrivateMessage: { attribute: false }, } } @@ -48,17 +49,27 @@ class ChatScroller extends LitElement { this._upObserverhandler = this._upObserverhandler.bind(this) this._downObserverHandler = this._downObserverHandler.bind(this) this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address - this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") + this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") } render() { - console.log({messages: this.messages}) - let formattedMessages = this.messages.reduce((messageArray, message) => { + let formattedMessages = this.messages.reduce((messageArray, message, index) => { const lastGroupedMessage = messageArray[messageArray.length - 1]; let timestamp; let sender; let repliedToData; + + let firstMessageInChat; + + if (index === 0) { + firstMessageInChat = true; + } else { + firstMessageInChat = false; + } + + message = {...message, firstMessageInChat} + if (lastGroupedMessage) { timestamp = lastGroupedMessage.timestamp; sender = lastGroupedMessage.sender; @@ -105,6 +116,7 @@ class ChatScroller extends LitElement { ?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1} .setToggledMessage=${this.setToggledMessage} .setForwardProperties=${this.setForwardProperties} + .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} > ` ) @@ -132,21 +144,18 @@ class ChatScroller extends LitElement { return true; } - setToggledMessage(message){ - toggledMessage = message + setToggledMessage (message) { + toggledMessage = message; } - async firstUpdated() { this.emojiPicker.on('emoji', selection => { this.sendMessage({ type: 'reaction', - editedMessageObj: toggledMessage, + editedMessageObj: toggledMessage, reaction: selection.emoji, - - - }) + }) }); this.viewElement = this.shadowRoot.getElementById('viewElement'); this.upObserverElement = this.shadowRoot.getElementById('upObserver'); @@ -217,22 +226,24 @@ class MessageTemplate extends LitElement { emojiPicker: { attribute: false }, escapeHTML: { attribute: false }, hideMessages: { type: Array }, - openDialogPrivateMessage: {type: Boolean}, - openDialogBlockUser: {type: Boolean}, + openDialogPrivateMessage: { type: Boolean }, + openDialogBlockUser: { type: Boolean }, showBlockAddressIcon: { type: Boolean }, - setRepliedToMessageObj: {attribute: false}, - setEditedMessageObj: {attribute: false}, - focusChatEditor: {attribute: false}, - sendMessage: {attribute: false}, - sendMessageForward: {attribute: false}, - openDialogImage: {attribute: false}, + setRepliedToMessageObj: { attribute: false }, + setEditedMessageObj: { attribute: false }, + focusChatEditor: { attribute: false }, + sendMessage: { attribute: false }, + sendMessageForward: { attribute: false }, + openDialogImage: { attribute: false }, + openDeleteImage: { type: Boolean }, isImageLoaded: { type: Boolean }, isFirstMessage: { type: Boolean }, isSingleMessageInGroup: { type: Boolean }, isLastMessageInGroup: { type: Boolean }, setToggledMessage: {attribute: false}, setForwardProperties: {attribute: false}, - viewImage: {type: Boolean} + viewImage: {type: Boolean}, + setOpenPrivateMessage : { attribute: false } } } @@ -477,12 +488,10 @@ class MessageTemplate extends LitElement { class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')} style=${this.isFirstMessage && "margin-top: 10px;"}> ${imageHTML} this.sendMessage({ - type: 'delete', - name: image.name, - identifier: image.identifier, - editedMessageObj: this.messageObj, - })} + @click=${() => { + this.openDeleteImage = true; + this.chatE + }} class="image-delete-icon" icon="vaadin:close" slot="icon">
` : image && isImageDeleted ? html` @@ -527,6 +536,8 @@ class MessageTemplate extends LitElement { .emojiPicker=${this.emojiPicker} .setToggledMessage=${this.setToggledMessage} .setForwardProperties=${this.setForwardProperties} + ?firstMessageInChat=${this.messageObj.firstMessageInChat} + .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} >
@@ -580,6 +591,31 @@ class MessageTemplate extends LitElement { ${translate("general.close")} + { + this.openDeleteImage = false; + }}> +
+

Are you sure you want to delete this image?

+
+ +
` } } @@ -601,11 +637,13 @@ class ChatMenu extends LitElement { focusChatEditor: {attribute: false}, myAddress: { type: Object }, emojiPicker: { attribute: false }, - sendMessage: {attribute: false}, - version: {type: String}, - setToggledMessage: {attribute: false}, - sendMessageForward: {attribute: false}, - setForwardProperties: {attribute: false} + sendMessage: { attribute: false }, + version: { type: String }, + setToggledMessage: { attribute: false }, + sendMessageForward: { attribute: false }, + setForwardProperties: { attribute: false }, + firstMessageInChat: { type: Boolean }, + setOpenPrivateMessage: { attribute: false } } } @@ -684,7 +722,7 @@ class ChatMenu extends LitElement { return html`
-