@@ -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")}
+
`
}
}
@@ -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`