Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-24 03:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-11-09 18:17:20 +02:00
commit 51ecb6b8bf
5 changed files with 322 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
qortal-ui-core/language/us.json
View File

@ -91,42 +91,42 @@
"selectfile": "Select file", "selectfile": "Select file",
"dragfile": "Drag and drop backup here" "dragfile": "Drag and drop backup here"
}, },
"settings":{ "settings": {
"generalinfo":"General Account Info", "generalinfo": "General Account Info",
"address":"Address", "address": "Address",
"publickey":"Public Key", "publickey": "Public Key",
"settings":"Settings", "settings": "Settings",
"account":"Account", "account": "Account",
"security":"Security", "security": "Security",
"qr_login_menu_item":"QR Login", "qr_login_menu_item": "QR Login",
"qr_login_description_1":"Scan this code to unlock your wallet on other device using the same password which you logged in with.", "qr_login_description_1": "Scan this code to unlock your wallet on other device using the same password which you logged in with.",
"qr_login_description_2":"Choose a password which you will use to unlock your wallet on other device after scanning the QR code.", "qr_login_description_2": "Choose a password which you will use to unlock your wallet on other device after scanning the QR code.",
"qr_login_button_1":"Show login QR code", "qr_login_button_1": "Show login QR code",
"qr_login_button_2":"Generate login QR code", "qr_login_button_2": "Generate login QR code",
"notifications":"Notifications", "notifications": "Notifications",
"accountsecurity":"Account Security", "accountsecurity": "Account Security",
"password":"Password", "password": "Password",
"download":"Download Backup File", "download": "Download Backup File",
"choose":"Please choose a password to encrypt your backup with. (This can be the same as the one you logged in with, or different)", "choose": "Please choose a password to encrypt your backup with. (This can be the same as the one you logged in with, or different)",
"block":"Block Notifications (Coming Soon...)", "block": "Block Notifications (Coming Soon...)",
"playsound":"Play Sound", "playsound": "Play Sound",
"shownotifications":"Show Notifications", "shownotifications": "Show Notifications",
"nodeurl":"Node Url", "nodeurl": "Node Url",
"nodehint":"Select a node from the default list of nodes above or add a custom node to the list above by clicking on the button below", "nodehint": "Select a node from the default list of nodes above or add a custom node to the list above by clicking on the button below",
"addcustomnode":"Add Custom Node", "addcustomnode": "Add Custom Node",
"addandsave":"Add And Save", "addandsave": "Add And Save",
"protocol":"Protocol", "protocol": "Protocol",
"domain":"Domain", "domain": "Domain",
"port":"Port", "port": "Port",
"import":"Import Nodes", "import": "Import Nodes",
"export":"Export Nodes", "export": "Export Nodes",
"deletecustomnode":"Remove All Custom Nodes", "deletecustomnode": "Remove All Custom Nodes",
"warning":"Your existing nodes will be deleted and from backup new created.", "warning": "Your existing nodes will be deleted and from backup new created.",
"snack1":"Successfully deleted and added standard nodes", "snack1": "Successfully deleted and added standard nodes",
"snack2":"UI conected to node", "snack2": "UI conected to node",
"snack3":"Successfully added and saved custom node", "snack3": "Successfully added and saved custom node",
"snack4":"Nodes successfully saved as", "snack4": "Nodes successfully saved as",
"snack5":"Nodes successfully imported" "snack5": "Nodes successfully imported"
}, },
"appinfo": { "appinfo": {
"blockheight": "Block Height", "blockheight": "Block Height",
@ -490,7 +490,8 @@
"cchange28": "This file is not an image", "cchange28": "This file is not an image",
"cchange29": "Maximum message size is 1000 bytes", "cchange29": "Maximum message size is 1000 bytes",
"cchange30": "Uploading image. This may take up to one minute.", "cchange30": "Uploading image. This may take up to one minute.",
"cchange31": "Deleting image. This may take up to one minute." "cchange31": "Deleting image. This may take up to one minute.",
"cchange33": "Cancel"
}, },
"welcomepage": { "welcomepage": {
"wcchange1": "Welcome to Q-Chat", "wcchange1": "Welcome to Q-Chat",

371
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -61,11 +61,18 @@ class ChatPage extends LitElement {
chatMessageSize: { type: Number}, chatMessageSize: { type: Number},
imageFile: {type: Object}, imageFile: {type: Object},
isUploadingImage: {type: Boolean} isUploadingImage: {type: Boolean}
caption: { type: String }
} }
} }
static get styles() { static get styles() {
return css` return css`
* {
/* Styling mdc dialog native props */
--mdc-dialog-min-width: 300px;
--mdc-dialog-box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -123,12 +130,14 @@ class ChatPage extends LitElement {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 15px; gap: 15px;
width: 100%;
} }
.repliedTo-message { .repliedTo-message {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
width: 95%;
} }
@ -140,6 +149,10 @@ class ChatPage extends LitElement {
} }
.original-message { .original-message {
color: black;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 0; margin: 0;
} }
@ -198,6 +211,41 @@ class ChatPage extends LitElement {
color: var(--black); color: var(--black);
} }
.emoji-button-caption {
width: 45px;
height: 40px;
padding-top: 4px;
border: none;
outline: none;
background: transparent;
cursor: pointer;
max-height: 40px;
color: var(--black);
}
.caption-container {
width: 100%;
display: flex;
height: auto;
overflow: hidden;
justify-content: center;
}
.chatbar-caption {
font-family: Roboto, sans-serif;
width: 70%;
margin-right: 10px;
outline: none;
align-items: center;
font-size: 18px;
resize: none;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid #cac8c8;
padding: 3px;
}
.message-size-container { .message-size-container {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -419,12 +467,45 @@ class ChatPage extends LitElement {
} }
} }
.mdc-dialog .mdc-dialog__surface {
border-radius: 10px;
}
/* Add Image Modal Dialog Styling */
.dialog-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
padding: 18px 18px 0 18px;
gap: 15px;
}
.dialog-container:after {
position: absolute;
content: "";
bottom: -15px;
height: 1px;
width: 95%;
background: #dddddd;
}
.dialog-image {
width: 100%;
border-radius: 0;
}
.red {
--mdc-theme-primary: #F44336;
}
` `
} }
constructor() { constructor() {
super() super()
this.getMessageConfig = this.getMessageConfig.bind(this)
this.getOldMessage = this.getOldMessage.bind(this) this.getOldMessage = this.getOldMessage.bind(this)
this._sendMessage = this._sendMessage.bind(this) this._sendMessage = this._sendMessage.bind(this)
this.insertImage = this.insertImage.bind(this) this.insertImage = this.insertImage.bind(this)
@ -455,6 +536,7 @@ class ChatPage extends LitElement {
this.chatMessageSize = 0 this.chatMessageSize = 0
this.imageFile = null this.imageFile = null
this.uid = new ShortUniqueId() this.uid = new ShortUniqueId()
this.caption = ""
} }
render() { render() {
@ -476,40 +558,74 @@ class ChatPage extends LitElement {
</div> </div>
` : ` :
this.renderChatScroller(this._initialMessages)} this.renderChatScroller(this._initialMessages)}
<mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile} @closed=${()=> { <mwc-dialog
this.imageFile = null id="showDialogPublicKey"
?open=${this.imageFile}
@closed=${() => {
this.chatEditor.enable();
this.caption = "";
this.imageFile = null;
}}> }}>
<div class="dialog-header"></div> <div class="dialog-header"></div>
<div class="dialog-container"> <div class="dialog-container mdc-dialog mdc-dialog__surface">
${this.imageFile && html` ${this.imageFile && html`
<img src=${URL.createObjectURL(this.imageFile)} /> <img src=${URL.createObjectURL(this.imageFile)} alt="dialog-img" class="dialog-image" />
`} `}
</div> <!-- Replace by reusable chatbar component -->
<mwc-button <div class="caption-container">
slot="primaryAction" <textarea @change=${(e) => this.onCaptionChange(e.target.value)} .value=${this.caption} placeholder="Caption" class="chatbar-caption" tabindex='1' rows="1"></textarea>
dialogAction="cancel" <div style="display:flex; ${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'margin-bottom: 5px' : "margin-bottom: 0"}">
class="red" ${this.isLoading === false ? html`
@click=${()=> { <img
this._sendMessage({ src="/img/qchat-send-message-icon.svg"
type: 'image', alt="send-icon"
imageFile: this.imageFile, class="send-icon"
caption: 'This is a caption' @click=${()=> {
}) this._sendMessage({
}} type: 'image',
> imageFile: this.imageFile,
send caption: this.caption,
</mwc-button> })
}} />
` :
html`
<paper-spinner-lite active></paper-spinner-lite>
`}
</div>
</div>
${this.chatMessageSize >= 750 ?
html`
<div class="message-size-container">
<div class="message-size" style="${this.chatMessageSize >= 1000 && 'color: #bd1515'}">
${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
</div>
</div>
` :
html``}
</div>
<mwc-button <mwc-button
slot="primaryAction" slot="primaryAction"
dialogAction="cancel" dialogAction="cancel"
class="red" class="red"
@click=${()=>{ @click=${()=>{
this.imageFile = null
this.imageFile = null
}} }}
> >
${translate("general.close")} ${translate("chatpage.cchange33")}
</mwc-button> </mwc-button>
<mwc-button
slot="primaryAction"
dialogAction="cancel"
@click=${()=> {
this._sendMessage({
type: 'image',
imageFile: this.imageFile,
caption: this.caption,
})
}}
>
${translate("chatpage.cchange9")}
</mwc-button>
</mwc-dialog> </mwc-dialog>
</div> </div>
<div class="chat-text-area" style="${`height: ${this.iframeHeight}px; ${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}"> <div class="chat-text-area" style="${`height: ${this.iframeHeight}px; ${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
@ -567,7 +683,7 @@ class ChatPage extends LitElement {
</div> </div>
</div> </div>
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}> <iframe id="_chatEditorDOM" style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
</iframe> </iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`} ${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
@ -648,13 +764,11 @@ class ChatPage extends LitElement {
` `
} }
insertImage(file){ insertImage(file){
if(file.type.includes('image')){ if(file.type.includes('image')){
this.imageFile = file this.imageFile = file
this.chatEditor.disable();
return return
} }
@ -662,8 +776,6 @@ class ChatPage extends LitElement {
} }
async firstUpdated() { async firstUpdated() {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
@ -671,8 +783,6 @@ class ChatPage extends LitElement {
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM'); this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM');
console.log(this.chatMessageInput);
console.log(this.mirrorChatInput.clientHeight);
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (!this.chatEditor.content.body.matches(':focus')) { if (!this.chatEditor.content.body.matches(':focus')) {
// WARNING: Deprecated methods from KeyBoard Event // WARNING: Deprecated methods from KeyBoard Event
@ -790,12 +900,20 @@ class ChatPage extends LitElement {
if (changedProperties && changedProperties.has('chatMessageSize')) { if (changedProperties && changedProperties.has('chatMessageSize')) {
console.log(this.chatMessageSize, "Chat Message Size"); console.log(this.chatMessageSize, "Chat Message Size");
} }
if(changedProperties && changedProperties.has("imageFile")) {
this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption');
this.chatbarCaption.focus();
}
} }
calculateIFrameHeight(height) { calculateIFrameHeight(height) {
this.iframeHeight = height; this.iframeHeight = height;
} }
onCaptionChange(e) {
this.caption = e;
}
changeLanguage() { changeLanguage() {
const checkLanguage = localStorage.getItem('qortalLanguage') const checkLanguage = localStorage.getItem('qortalLanguage')
@ -912,14 +1030,12 @@ class ChatPage extends LitElement {
if (isInitial) { if (isInitial) {
const replacedMessages = await replaceMessagesEdited({ const replacedMessages = await replaceMessagesEdited({
decodedMessages: decodedMessages, decodedMessages: decodedMessages,
parentEpml, parentEpml,
isReceipient: isReceipient, isReceipient: isReceipient,
decodeMessageFunc: this.decodeMessage, decodeMessageFunc: this.decodeMessage,
_publicKey: this._publicKey _publicKey: this._publicKey
}) })
this._messages = replacedMessages.sort(function (a, b) { this._messages = replacedMessages.sort(function (a, b) {
@ -927,17 +1043,11 @@ class ChatPage extends LitElement {
- b.timestamp - b.timestamp
}) })
// TODO: Determine number of initial messages by screen height... // TODO: Determine number of initial messages by screen height...
this._initialMessages = this._messages this._initialMessages = this._messages;
this.messagesRendered = this._initialMessages;
this.isLoadingMessages = false;
this.messagesRendered = this._initialMessages setTimeout(() => this.downElementObserver(), 500);
this.isLoadingMessages = false
setTimeout(() => this.downElementObserver(), 500)
} else { } else {
const replacedMessages = await replaceMessagesEdited({ const replacedMessages = await replaceMessagesEdited({
decodedMessages: decodedMessages, decodedMessages: decodedMessages,
@ -947,28 +1057,19 @@ class ChatPage extends LitElement {
_publicKey: this._publicKey _publicKey: this._publicKey
}) })
const renderEachMessage = replacedMessages.map(async(msg)=> { const renderEachMessage = replacedMessages.map(async(msg)=> {
await this.renderNewMessage(msg) await this.renderNewMessage(msg)
}) })
await Promise.all(renderEachMessage) await Promise.all(renderEachMessage)
// this.newMessages = this.newMessages.concat(_newMessages) // this.newMessages = this.newMessages.concat(_newMessages)
this.messagesRendered = [...this.messagesRendered].sort(function (a, b) { this.messagesRendered = [...this.messagesRendered].sort(function (a, b) {
return a.timestamp return a.timestamp
- b.timestamp - b.timestamp
}) })
} }
} }
getMessageConfig() {
const textAreaElement = this.shadowRoot.getElementById('messageBox');
return textAreaElement.value;
}
getMessageSize(message){ getMessageSize(message){
try { try {
const messageText = message; const messageText = message;
@ -1140,41 +1241,39 @@ class ChatPage extends LitElement {
* *
*/ */
decodeMessage(encodedMessageObj, isReceipient, _publicKey ) { decodeMessage(encodedMessageObj, isReceipient, _publicKey ) {
let isReceipientVar let isReceipientVar;
let _publicKeyVar let _publicKeyVar;
try { try {
isReceipientVar = this.isReceipient === undefined ? isReceipient : this.isReceipient; isReceipientVar = this.isReceipient === undefined ? isReceipient : this.isReceipient;
_publicKeyVar = this._publicKey === undefined ? _publicKey : this._publicKey _publicKeyVar = this._publicKey === undefined ? _publicKey : this._publicKey;
} catch (error) { } catch (error) {
isReceipientVar = isReceipient isReceipientVar = isReceipient;
_publicKeyVar = _publicKey _publicKeyVar = _publicKey;
} }
let decodedMessageObj = {} let decodedMessageObj = {};
if (isReceipientVar === true) { if (isReceipientVar === true) {
// direct chat // direct chat
if (encodedMessageObj.isEncrypted === true && _publicKeyVar.hasPubKey === true && encodedMessageObj.data) { if (encodedMessageObj.isEncrypted === true && _publicKeyVar.hasPubKey === true && encodedMessageObj.data) {
let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, _publicKeyVar.key, encodedMessageObj.reference) let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, _publicKeyVar.key, encodedMessageObj.reference);
decodedMessageObj = { ...encodedMessageObj, decodedMessage } decodedMessageObj = { ...encodedMessageObj, decodedMessage };
} else if (encodedMessageObj.isEncrypted === false && encodedMessageObj.data) { } else if (encodedMessageObj.isEncrypted === false && encodedMessageObj.data) {
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) let bytesArray = window.parent.Base58.decode(encodedMessageObj.data);
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) let decodedMessage = new TextDecoder('utf-8').decode(bytesArray);
decodedMessageObj = { ...encodedMessageObj, decodedMessage } decodedMessageObj = { ...encodedMessageObj, decodedMessage };
} else { } else {
decodedMessageObj = { ...encodedMessageObj, decodedMessage: "Cannot Decrypt Message!" };
decodedMessageObj = { ...encodedMessageObj, decodedMessage: "Cannot Decrypt Message!" }
} }
} else { } else {
// group chat // group chat
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data);
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) let decodedMessage = new TextDecoder('utf-8').decode(bytesArray);
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) decodedMessageObj = { ...encodedMessageObj, decodedMessage };
decodedMessageObj = { ...encodedMessageObj, decodedMessage }
} }
return decodedMessageObj return decodedMessageObj;
} }
async fetchChatMessages(chatId) { async fetchChatMessages(chatId) {
@ -1388,16 +1487,17 @@ class ChatPage extends LitElement {
const getName = async (recipient)=> { const getName = async (recipient)=> {
try { try {
const getNames = await parentEpml.request("apiCall", { const getNames = await parentEpml.request("apiCall", {
type: "api", type: "api",
url: `/names/address/${recipient}`, url: `/names/address/${recipient}`,
}) });
if(Array.isArray(getNames) && getNames.length > 0 ){
if (Array.isArray(getNames) && getNames.length > 0 ) {
return getNames[0].name return getNames[0].name
} else { } else {
return '' return ''
} }
} catch (error) { } catch (error) {
return "" return ""
} }
@ -1431,7 +1531,7 @@ class ChatPage extends LitElement {
} }
const blob = b64toBlob(str, 'image/png'); const blob = b64toBlob(str, 'image/png');
await new Promise(resolve =>{ await new Promise(resolve => {
new Compressor( blob, { new Compressor( blob, {
quality: 0.6, quality: 0.6,
maxWidth: 500, maxWidth: 500,
@ -1450,18 +1550,16 @@ class ChatPage extends LitElement {
}) })
}) })
try { try {
await publishData({ await publishData({
registeredName: userName , registeredName: userName,
file : compressedFile , file : compressedFile,
service: 'IMAGE', service: 'IMAGE',
identifier : identifier, identifier: identifier,
parentEpml, parentEpml,
metaData: undefined, metaData: undefined,
uploadType: 'file', uploadType: 'file',
selectedAddress: this.selectedAddress, selectedAddress: this.selectedAddress,
worker: new WebWorkerImage() worker: new WebWorkerImage()
}) })
this.isDeletingImage = false this.isDeletingImage = false
} catch (error) { } catch (error) {
@ -1474,7 +1572,7 @@ class ChatPage extends LitElement {
let chatReference = outSideMsg.editedMessageObj.reference; let chatReference = outSideMsg.editedMessageObj.reference;
if(outSideMsg.editedMessageObj.chatReference){ if(outSideMsg.editedMessageObj.chatReference){
chatReference = outSideMsg.editedMessageObj.chatReference chatReference = outSideMsg.editedMessageObj.chatReference;
} }
let message = ""; let message = "";
@ -1504,9 +1602,9 @@ class ChatPage extends LitElement {
return; return;
} }
const id = this.uid(); const id = this.uid();
const identifier = `qchat_${id}` const identifier = `qchat_${id}`;
let compressedFile = '' let compressedFile = '';
await new Promise(resolve =>{ await new Promise(resolve => {
new Compressor( outSideMsg.imageFile, { new Compressor( outSideMsg.imageFile, {
quality: .6, quality: .6,
maxWidth: 500, maxWidth: 500,
@ -1523,66 +1621,63 @@ class ChatPage extends LitElement {
}) })
}) })
const fileSize = compressedFile.size const fileSize = compressedFile.size;
if(fileSize > 5000000){ if (fileSize > 5000000) {
parentEpml.request('showSnackBar', get("chatpage.cchange26")) parentEpml.request('showSnackBar', get("chatpage.cchange26"));
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
return return;
} }
try { try {
await publishData({ await publishData({
registeredName: userName, registeredName: userName,
file : compressedFile, file : compressedFile,
service: 'IMAGE', service: 'IMAGE',
identifier : identifier, identifier : identifier,
parentEpml, parentEpml,
metaData: undefined, metaData: undefined,
uploadType: 'file', uploadType: 'file',
selectedAddress: this.selectedAddress, selectedAddress: this.selectedAddress,
worker: new WebWorkerImage() worker: new WebWorkerImage()
}) })
this.isUploadingImage = false this.isUploadingImage = false
} catch (error) { } catch (error) {
console.error(error) console.error(error)
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
return return
} }
const messageObject = {
messageText: outSideMsg.caption,
images: [{
service: "IMAGE",
name: userName,
identifier: identifier
}],
isImageDeleted: false,
repliedTo: '',
version: 1
}
const stringifyMessageObject = JSON.stringify(messageObject);
this.sendMessage(stringifyMessageObject, typeMessage);
} else if (outSideMsg && outSideMsg.type === 'reaction') {
typeMessage = 'edit';
let chatReference = outSideMsg.editedMessageObj.reference;
const messageObject = { if (outSideMsg.editedMessageObj.chatReference) {
messageText: outSideMsg.caption, chatReference = outSideMsg.editedMessageObj.chatReference;
images: [{
service: "IMAGE",
name: userName,
identifier: identifier
}],
isImageDeleted: false,
repliedTo: '',
version: 1
}
const stringifyMessageObject = JSON.stringify(messageObject)
this.sendMessage(stringifyMessageObject, typeMessage);
} else if(outSideMsg && outSideMsg.type === 'reaction'){
typeMessage = 'edit'
let chatReference = outSideMsg.editedMessageObj.reference
if(outSideMsg.editedMessageObj.chatReference){
chatReference = outSideMsg.editedMessageObj.chatReference
} }
let message = "" let message = "";
try { try {
const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage) const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
message = parsedMessageObj message = parsedMessageObj;
} catch (error) { } catch (error) {
message = outSideMsg.editedMessageObj.decodedMessage message = outSideMsg.editedMessageObj.decodedMessage;
} }
let reactions = message.reactions || [] let reactions = message.reactions || []
@ -2038,12 +2133,9 @@ class ChatPage extends LitElement {
} }
if (e.type === 'keydown') { if (e.type === 'keydown') {
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); editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML); editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML);
// Handle Enter // Handle Enter
if (e.keyCode === 13 && !e.shiftKey) { if (e.keyCode === 13 && !e.shiftKey) {
@ -2123,7 +2215,6 @@ class ChatPage extends LitElement {
}; };
const editorConfig = { const editorConfig = {
getMessageConfig: this.getMessageConfig,
getMessageSize: this.getMessageSize, getMessageSize: this.getMessageSize,
calculateIFrameHeight: this.calculateIFrameHeight, calculateIFrameHeight: this.calculateIFrameHeight,
mirrorElement: this.mirrorChatInput, mirrorElement: this.mirrorChatInput,

2
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
View File

@ -375,6 +375,6 @@ export const chatStyles = css`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 80vh; height: 100%;
} }
` `

116
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -294,33 +294,32 @@ class MessageTemplate extends LitElement {
let image = null let image = null
let isImageDeleted = false let isImageDeleted = false
try { try {
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage) const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
message = parsedMessageObj.messageText message = parsedMessageObj.messageText;
repliedToData = this.messageObj.repliedToData repliedToData = this.messageObj.repliedToData;
isImageDeleted = parsedMessageObj.isImageDeleted isImageDeleted = parsedMessageObj.isImageDeleted;
reactions = parsedMessageObj.reactions || [] reactions = parsedMessageObj.reactions || [];
if(parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0){ if(parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0){
image = parsedMessageObj.images[0] image = parsedMessageObj.images[0];
} }
} catch (error) { } catch (error) {
message = this.messageObj.decodedMessage message = this.messageObj.decodedMessage;
} }
let avatarImg = '' let avatarImg = '';
let imageHTML = '' let imageHTML = '';
let imageHTMLDialog = '' let imageHTMLDialog = '';
let imageUrl = '' let imageUrl = '';
let nameMenu = '' let nameMenu = '';
let levelFounder = '' let levelFounder = '';
let hideit = hidemsg.includes(this.messageObj.sender) let hideit = hidemsg.includes(this.messageObj.sender);
levelFounder = html`<level-founder checkleveladdress="${this.messageObj.sender}"></level-founder>`;
levelFounder = html`<level-founder checkleveladdress="${this.messageObj.sender}"></level-founder>`
if (this.messageObj.senderName) { if (this.messageObj.senderName) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}` const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
avatarImg = html`<img src="${avatarUrl}" style="max-width:100%; max-height:100%;" onerror="this.onerror=null; this.src='/img/incognito.png';" />` avatarImg = html`<img src="${avatarUrl}" style="max-width:100%; max-height:100%;" onerror="this.onerror=null; this.src='/img/incognito.png';" />`;
} else { } else {
avatarImg = html`<img src='/img/incognito.png' style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />` avatarImg = html`<img src='/img/incognito.png' style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
} }
@ -328,8 +327,8 @@ class MessageTemplate extends LitElement {
const createImage=(imageUrl)=>{ const createImage=(imageUrl)=>{
const imageHTMLRes = new Image(); const imageHTMLRes = new Image();
imageHTMLRes.src = imageUrl; imageHTMLRes.src = imageUrl;
imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer" imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
imageHTMLRes.onclick= ()=> { imageHTMLRes.onclick= () => {
this.openDialogImage = true this.openDialogImage = true
} }
imageHTMLRes.onload = ()=> { imageHTMLRes.onload = ()=> {
@ -338,53 +337,43 @@ class MessageTemplate extends LitElement {
imageHTMLRes.onerror = ()=> { imageHTMLRes.onerror = ()=> {
console.log('inputRef', this.imageFetches) console.log('inputRef', this.imageFetches)
if(this.imageFetches < 4){ if (this.imageFetches < 4) {
setTimeout(()=> { setTimeout(()=> {
this.imageFetches = this.imageFetches + 1 this.imageFetches = this.imageFetches + 1;
imageHTMLRes.src = imageUrl;
imageHTMLRes.src = imageUrl }, 500);
}, 500)
} else { } else {
imageHTMLRes.src = '/img/chain.png' imageHTMLRes.src = '/img/chain.png';
imageHTMLRes.style= "max-width:45vh; max-height:20vh; border-radius: 5px; filter: opacity(0.5)"; imageHTMLRes.style= "max-width:45vh; max-height:20vh; border-radius: 5px; filter: opacity(0.5)";
imageHTMLRes.onclick= ()=> { imageHTMLRes.onclick= () => {
} }
this.isImageLoaded = true this.isImageLoaded = true
} }
};
} return imageHTMLRes;
return imageHTMLRes
} }
if (image) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
if(image){ imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}`;
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] imageHTML = createImage(imageUrl);
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port imageHTMLDialog = createImage(imageUrl);
imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}` imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
imageHTML = createImage(imageUrl)
imageHTMLDialog = createImage(imageUrl)
imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px"
} }
if (this.messageObj.sender === this.myAddress) { if (this.messageObj.sender === this.myAddress) {
nameMenu = html`<span style="color: #03a9f4;">${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>` nameMenu = html`<span style="color: #03a9f4;">${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>`;
} else { } else {
nameMenu = html`<span>${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>` nameMenu = html`<span>${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>`;
} }
if(repliedToData){ if (repliedToData) {
try { try {
const parsedMsg = JSON.parse(repliedToData.decodedMessage) const parsedMsg = JSON.parse(repliedToData.decodedMessage);
repliedToData.decodedMessage = parsedMsg repliedToData.decodedMessage = parsedMsg;
} catch (error) { } catch (error) {
console.error(error);
} }
} }
@ -414,8 +403,7 @@ class MessageTemplate extends LitElement {
type: 'delete', type: 'delete',
name: image.name, name: image.name,
identifier: image.identifier, identifier: image.identifier,
editedMessageObj: this.messageObj, editedMessageObj: this.messageObj,
})} })}
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon> class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
</div> </div>
@ -468,16 +456,16 @@ class MessageTemplate extends LitElement {
toblockaddress=${this.messageObj.sender} toblockaddress=${this.messageObj.sender}
> >
</chat-modals> </chat-modals>
<mwc-dialog id="showDialogPublicKey" ?open=${this.openDialogImage} @closed=${()=> { <mwc-dialog
this.openDialogImage = false id="showDialogPublicKey"
}}> ?open=${this.openDialogImage}
<div class="dialog-header" > @closed=${()=> {
this.openDialogImage = false
</div> }}>
<div class="dialog-header"></div>
<div class="dialog-container imageContainer"> <div class="dialog-container imageContainer">
${imageHTMLDialog} ${imageHTMLDialog}
</div> </div>
<mwc-button <mwc-button
slot="primaryAction" slot="primaryAction"
dialogAction="cancel" dialogAction="cancel"
@ -487,7 +475,7 @@ class MessageTemplate extends LitElement {
this.openDialogImage = false this.openDialogImage = false
}} }}
> >
${translate("general.close")} ${translate("general.close")}
</mwc-button> </mwc-button>
</mwc-dialog> </mwc-dialog>
` `

5
qortal-ui-plugins/plugins/utils/publish-image.js
View File

@ -133,11 +133,6 @@ export const publishData = async ({
}) })
return uploadDataRes return uploadDataRes
} }
} }
try { try {
await validate() await validate()