|
|
|
@ -60,14 +60,14 @@ class ChatPage extends LitElement {
|
|
|
|
|
repliedToMessageObj: { type: Object }, |
|
|
|
|
editedMessageObj: { type: Object }, |
|
|
|
|
iframeHeight: { type: Number }, |
|
|
|
|
// chatMessageSize: { type: Number},
|
|
|
|
|
imageFile: { type: Object }, |
|
|
|
|
isUploadingImage: { type: Boolean }, |
|
|
|
|
chatEditor: { type: Object }, |
|
|
|
|
chatEditorNewChat: { type: Object }, |
|
|
|
|
userLanguage: { type: String }, |
|
|
|
|
lastMessageRefVisible: { type: Boolean }, |
|
|
|
|
isLoadingOldMessages: {type: Boolean} |
|
|
|
|
isLoadingOldMessages: {type: Boolean}, |
|
|
|
|
isEditMessageOpen: { type: Boolean } |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -121,14 +121,13 @@ class ChatPage extends LitElement {
|
|
|
|
|
flex-direction: row; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 10px 20px 8px 10px; |
|
|
|
|
padding: 10px 10px 8px 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.repliedTo-subcontainer { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
gap: 15px; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
@ -137,7 +136,7 @@ class ChatPage extends LitElement {
|
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
gap: 5px; |
|
|
|
|
width: 92%; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.senderName { |
|
|
|
@ -153,6 +152,7 @@ class ChatPage extends LitElement {
|
|
|
|
|
overflow: hidden; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
margin: 0; |
|
|
|
|
width: 800px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.reply-icon { |
|
|
|
@ -160,15 +160,6 @@ class ChatPage extends LitElement {
|
|
|
|
|
color: var(--mdc-theme-primary); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.checkmark-icon { |
|
|
|
|
width: 30px; |
|
|
|
|
color: var(--mdc-theme-primary); |
|
|
|
|
margin: 0 8px; |
|
|
|
|
} |
|
|
|
|
.checkmark-icon:hover { |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.close-icon { |
|
|
|
|
color: #676b71; |
|
|
|
|
width: 18px; |
|
|
|
@ -523,9 +514,7 @@ class ChatPage extends LitElement {
|
|
|
|
|
this.getOldMessage = this.getOldMessage.bind(this) |
|
|
|
|
this._sendMessage = this._sendMessage.bind(this) |
|
|
|
|
this.insertImage = this.insertImage.bind(this) |
|
|
|
|
// this.getMessageSize = this.getMessageSize.bind(this)
|
|
|
|
|
this._downObserverhandler = this._downObserverhandler.bind(this) |
|
|
|
|
// this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this)
|
|
|
|
|
this.selectedAddress = {} |
|
|
|
|
this.chatId = '' |
|
|
|
|
this.myAddress = '' |
|
|
|
@ -547,11 +536,11 @@ class ChatPage extends LitElement {
|
|
|
|
|
this.repliedToMessageObj = null |
|
|
|
|
this.editedMessageObj = null |
|
|
|
|
this.iframeHeight = 42 |
|
|
|
|
// this.chatMessageSize = 0
|
|
|
|
|
this.imageFile = null |
|
|
|
|
this.uid = new ShortUniqueId() |
|
|
|
|
this.userLanguage = "" |
|
|
|
|
this.lastMessageRefVisible = false |
|
|
|
|
this.isEditMessageOpen = false |
|
|
|
|
this.emojiPicker = new EmojiPicker({ |
|
|
|
|
style: "twemoji", |
|
|
|
|
twemojiBaseUrl: '/emoji/', |
|
|
|
@ -645,7 +634,7 @@ class ChatPage extends LitElement {
|
|
|
|
|
.mirrorChatInput=${this.mirrorChatInput} |
|
|
|
|
?isLoading=${this.isLoading} |
|
|
|
|
?isLoadingMessages=${this.isLoadingMessages} |
|
|
|
|
>
|
|
|
|
|
?isEditMessageOpen=${this.isEditMessageOpen}>
|
|
|
|
|
</chat-text-editor> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -666,7 +655,7 @@ class ChatPage extends LitElement {
|
|
|
|
|
`: ''}
|
|
|
|
|
<wrapper-modal
|
|
|
|
|
.removeImage=${() => this.removeImage()}
|
|
|
|
|
style=${this.imageFile ? "display: block" : "display: none"}> |
|
|
|
|
style=${(this.imageFile && !this.isUploadingImage) ? "display: block" : "display: none"}> |
|
|
|
|
<div> |
|
|
|
|
<div class="dialog-container"> |
|
|
|
|
${this.imageFile && html` |
|
|
|
@ -688,13 +677,7 @@ class ChatPage extends LitElement {
|
|
|
|
|
</chat-text-editor> |
|
|
|
|
</div> |
|
|
|
|
<div class="modal-button-row"> |
|
|
|
|
<button |
|
|
|
|
class="modal-button-red" |
|
|
|
|
@click=${()=>{ |
|
|
|
|
this.imageFile = null |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<button class="modal-button-red" @click=${() => this.removeImage()}> |
|
|
|
|
${translate("chatpage.cchange33")} |
|
|
|
|
</button> |
|
|
|
|
<button |
|
|
|
@ -753,22 +736,6 @@ class ChatPage extends LitElement {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
async firstUpdated() { |
|
|
|
|
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
|
|
|
|
|
|
|
|
|
|
// document.addEventListener('keydown', (e) => {
|
|
|
|
|
// if (!this.chatEditor.content.body.matches(':focus')) {
|
|
|
|
|
// // WARNING: Deprecated methods from KeyBoard Event
|
|
|
|
|
// if (e.code === "Space" || e.keyCode === 32 || e.which === 32) {
|
|
|
|
|
// this.chatEditor.insertText(' ');
|
|
|
|
|
// } else if (inputKeyCodes.includes(e.keyCode)) {
|
|
|
|
|
// this.chatEditor.insertText(e.key);
|
|
|
|
|
// return this.chatEditor.focus();
|
|
|
|
|
// } else {
|
|
|
|
|
// return this.chatEditor.focus();
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
window.addEventListener('storage', () => {
|
|
|
|
|
const checkLanguage = localStorage.getItem('qortalLanguage'); |
|
|
|
|
use(checkLanguage); |
|
|
|
@ -846,6 +813,12 @@ class ChatPage extends LitElement {
|
|
|
|
|
await new Promise(r => setTimeout(r, 100)); |
|
|
|
|
this.chatEditorPlaceholder = this.isReceipient === true ? `Message ${this._chatId}` : `${get("chatpage.cchange8")}`; |
|
|
|
|
} |
|
|
|
|
// if (changedProperties && changedProperties.has('isEditMessageOpen')) {
|
|
|
|
|
// console.log(this.isEditMessageOpen, "1111");
|
|
|
|
|
// }
|
|
|
|
|
if (changedProperties && changedProperties.has('imageFile')) { |
|
|
|
|
console.log(this.imageFile, "1111"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
async renderPlaceholder() { |
|
|
|
@ -1048,8 +1021,8 @@ class ChatPage extends LitElement {
|
|
|
|
|
|
|
|
|
|
closeEditMessageContainer() { |
|
|
|
|
this.editedMessageObj = null; |
|
|
|
|
this.isEditMessageOpen = !this.isEditMessageOpen; |
|
|
|
|
this.chatEditor.resetValue(); |
|
|
|
|
this.requestUpdate(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
closeRepliedToContainer() { |
|
|
|
@ -1496,11 +1469,11 @@ class ChatPage extends LitElement {
|
|
|
|
|
if (fileSize > 500000) { |
|
|
|
|
parentEpml.request('showSnackBar', get("chatpage.cchange26")); |
|
|
|
|
this.isLoading = false; |
|
|
|
|
this.isUploadingImage = false; |
|
|
|
|
this.chatEditor.enable(); |
|
|
|
|
this.chatEditorNewChat.enable() |
|
|
|
|
this.chatEditorNewChat.enable(); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
await publishData({ |
|
|
|
|
registeredName: userName, |
|
|
|
@ -1512,15 +1485,16 @@ class ChatPage extends LitElement {
|
|
|
|
|
uploadType: 'file', |
|
|
|
|
selectedAddress: this.selectedAddress, |
|
|
|
|
worker: new WebWorkerImage() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.isUploadingImage = false |
|
|
|
|
}); |
|
|
|
|
this.isUploadingImage = false; |
|
|
|
|
this.imageFile = null; |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error(error) |
|
|
|
|
this.isLoading = false; |
|
|
|
|
this.isUploadingImage = false; |
|
|
|
|
this.chatEditor.enable(); |
|
|
|
|
this.chatEditorNewChat.enable() |
|
|
|
|
return |
|
|
|
|
this.chatEditorNewChat.enable(); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
const messageTextWithImage = this.chatEditorNewChat.mirror.value; |
|
|
|
|
// Format and Sanitize Message
|
|
|
|
@ -1536,7 +1510,7 @@ class ChatPage extends LitElement {
|
|
|
|
|
isImageDeleted: false, |
|
|
|
|
repliedTo: '', |
|
|
|
|
version: 1 |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
const stringifyMessageObject = JSON.stringify(messageObject); |
|
|
|
|
this.sendMessage(stringifyMessageObject, typeMessage); |
|
|
|
|
} else if (outSideMsg && outSideMsg.type === 'reaction') { |
|
|
|
@ -1596,13 +1570,6 @@ class ChatPage extends LitElement {
|
|
|
|
|
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) { |
|
|
|
|
let chatReference = this.repliedToMessageObj.reference |
|
|
|
|
|
|
|
|
|