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

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

@ -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",

269
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,39 +558,73 @@ 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" />
`} `}
<!-- Replace by reusable chatbar component -->
<div class="caption-container">
<textarea @change=${(e) => this.onCaptionChange(e.target.value)} .value=${this.caption} placeholder="Caption" class="chatbar-caption" tabindex='1' rows="1"></textarea>
<div style="display:flex; ${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'margin-bottom: 5px' : "margin-bottom: 0"}">
${this.isLoading === false ? html`
<img
src="/img/qchat-send-message-icon.svg"
alt="send-icon"
class="send-icon"
@click=${()=> {
this._sendMessage({
type: 'image',
imageFile: this.imageFile,
caption: this.caption,
})
}} />
` :
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> </div>
<mwc-button <mwc-button
slot="primaryAction" slot="primaryAction"
dialogAction="cancel" dialogAction="cancel"
class="red" class="red"
@click=${()=>{ @click=${()=>{
this._sendMessage({ this.imageFile = null
type: 'image',
imageFile: this.imageFile,
caption: 'This is a caption'
})
}} }}
> >
send ${translate("chatpage.cchange33")}
</mwc-button> </mwc-button>
<mwc-button <mwc-button
slot="primaryAction" slot="primaryAction"
dialogAction="cancel" dialogAction="cancel"
class="red"
@click=${()=> { @click=${()=> {
this._sendMessage({
this.imageFile = null type: 'image',
imageFile: this.imageFile,
caption: this.caption,
})
}} }}
> >
${translate("general.close")} ${translate("chatpage.cchange9")}
</mwc-button> </mwc-button>
</mwc-dialog> </mwc-dialog>
</div> </div>
@ -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,8 +1030,6 @@ class ChatPage extends LitElement {
if (isInitial) { if (isInitial) {
const replacedMessages = await replaceMessagesEdited({ const replacedMessages = await replaceMessagesEdited({
decodedMessages: decodedMessages, decodedMessages: decodedMessages,
parentEpml, parentEpml,
@ -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 ""
} }
@ -1450,8 +1550,6 @@ class ChatPage extends LitElement {
}) })
}) })
try { try {
await publishData({ await publishData({
registeredName: userName, registeredName: userName,
file : compressedFile, file : compressedFile,
@ -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,8 +1602,8 @@ 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,
@ -1523,12 +1621,12 @@ 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 {
@ -1551,7 +1649,6 @@ class ChatPage extends LitElement {
this.chatEditor.enable(); this.chatEditor.enable();
return return
} }
const messageObject = { const messageObject = {
messageText: outSideMsg.caption, messageText: outSideMsg.caption,
images: [{ images: [{
@ -1563,26 +1660,24 @@ class ChatPage extends LitElement {
repliedTo: '', repliedTo: '',
version: 1 version: 1
} }
const stringifyMessageObject = JSON.stringify(messageObject) const stringifyMessageObject = JSON.stringify(messageObject);
this.sendMessage(stringifyMessageObject, typeMessage); this.sendMessage(stringifyMessageObject, typeMessage);
} else if (outSideMsg && outSideMsg.type === 'reaction') { } else if (outSideMsg && outSideMsg.type === 'reaction') {
typeMessage = 'edit' typeMessage = 'edit';
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 = "";
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%;
} }
` `

96
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,7 +327,7 @@ 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
} }
@ -339,15 +338,12 @@ class MessageTemplate extends LitElement {
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= () => {
@ -355,36 +351,29 @@ class MessageTemplate extends LitElement {
this.isImageLoaded = true this.isImageLoaded = true
} }
};
return imageHTMLRes;
} }
return imageHTMLRes
}
if (image) { if (image) {
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;
imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}` imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}`;
imageHTML = createImage(imageUrl) imageHTML = createImage(imageUrl);
imageHTMLDialog = createImage(imageUrl) imageHTMLDialog = createImage(imageUrl);
imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px" 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);
} }
} }
@ -415,7 +404,6 @@ class MessageTemplate extends LitElement {
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
id="showDialogPublicKey"
?open=${this.openDialogImage}
@closed=${()=> {
this.openDialogImage = false this.openDialogImage = false
}}> }}>
<div class="dialog-header" > <div class="dialog-header"></div>
</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"

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()