Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-05-30 21:27:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI Done for the image caption modal

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-08 16:45:21 -05:00
parent a525fbc3b4
commit 9c021cca5c
4 changed files with 309 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -487,7 +487,8 @@
"cchange25": "Edit Message", "cchange25": "Edit Message",
"cchange26": "File size exceeds 5 MB", "cchange26": "File size exceeds 5 MB",
"cchange27": "A registered name is required to send images", "cchange27": "A registered name is required to send images",
"cchange28": "This file is not an image" "cchange28": "This file is not an image",
"cchange29": "Cancel"
}, },
"welcomepage": { "welcomepage": {
"wcchange1": "Welcome to Q-Chat", "wcchange1": "Welcome to Q-Chat",

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

@ -56,12 +56,19 @@ class ChatPage extends LitElement {
editedMessageObj: { type: Object }, editedMessageObj: { type: Object },
iframeHeight: { type: Number }, iframeHeight: { type: Number },
chatMessageSize: { type: Number }, chatMessageSize: { type: Number },
imageFile: {type: Object} imageFile: { type: Object },
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;
} }
@ -194,6 +201,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;
@ -335,12 +377,45 @@ class ChatPage extends LitElement {
cursor: pointer; cursor: pointer;
} }
.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)
@ -371,6 +446,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() {
@ -392,29 +468,45 @@ 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()} />
` :
html`
<paper-spinner-lite active></paper-spinner-lite>
`} `}
</div> </div>
<mwc-button </div>
slot="primaryAction" ${this.chatMessageSize >= 750 ?
dialogAction="cancel" html`
class="red" <div class="message-size-container">
@click=${()=> { <div class="message-size" style="${this.chatMessageSize >= 1000 && 'color: #bd1515'}">
this._sendMessage({ ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
type: 'image', </div>
imageFile: this.imageFile, </div>
caption: 'This is a caption' ` :
}) html``}
}} </div>
>
send
</mwc-button>
<mwc-button <mwc-button
slot="primaryAction" slot="primaryAction"
dialogAction="cancel" dialogAction="cancel"
@ -424,7 +516,21 @@ class ChatPage extends LitElement {
this.imageFile = null this.imageFile = null
}} }}
> >
${translate("general.close")} ${translate("chatpage.cchange29")}
</mwc-button>
<mwc-button
slot="primaryAction"
dialogAction="cancel"
@click=${()=> {
// this._sendMessage({
// type: 'image',
// imageFile: this.imageFile,
// caption: 'This is a caption'
// })
console.log(this.caption);
}}
>
${translate("chatpage.cchange9")}
</mwc-button> </mwc-button>
</mwc-dialog> </mwc-dialog>
</div> </div>
@ -483,7 +589,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" />`}
@ -539,13 +645,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
} }
@ -553,8 +657,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...)
@ -562,8 +664,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
@ -681,12 +781,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')
@ -803,8 +911,6 @@ class ChatPage extends LitElement {
if (isInitial) { if (isInitial) {
const replacedMessages = await replaceMessagesEdited({ const replacedMessages = await replaceMessagesEdited({
decodedMessages: decodedMessages, decodedMessages: decodedMessages,
parentEpml, parentEpml,
@ -818,17 +924,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,
@ -838,28 +938,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;
@ -1031,41 +1122,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) {
@ -1353,13 +1442,13 @@ class ChatPage extends LitElement {
selectedAddress: this.selectedAddress selectedAddress: this.selectedAddress
}) })
} catch (error) { } catch (error) {
console.error(error) console.error(error);
} }
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 = "";
@ -1389,8 +1478,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,
@ -1408,15 +1497,13 @@ 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;
} }
console.log({userName, identifier })
await publishData({ await publishData({
registeredName: userName, registeredName: userName,
file : compressedFile, file : compressedFile,
@ -1427,6 +1514,7 @@ class ChatPage extends LitElement {
uploadType: 'file', uploadType: 'file',
selectedAddress: this.selectedAddress selectedAddress: this.selectedAddress
}) })
const messageObject = { const messageObject = {
messageText: outSideMsg.caption, messageText: outSideMsg.caption,
images: [{ images: [{
@ -1441,8 +1529,6 @@ class ChatPage extends LitElement {
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
@ -1857,7 +1943,6 @@ class ChatPage extends LitElement {
for (let i = 0; i < events.length; i++) { for (let i = 0; i < events.length; i++) {
const event = events[i] const event = events[i]
editor.content.body.addEventListener(event, async function (e) { editor.content.body.addEventListener(event, async function (e) {
console.log("hello world12")
if (e.type === 'click') { if (e.type === 'click') {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -1900,12 +1985,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) {
@ -1985,7 +2067,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,

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

@ -210,41 +210,39 @@ class MessageTemplate extends LitElement {
render() { render() {
const hidemsg = this.hideMessages;
const hidemsg = this.hideMessages let message = "";
let message = "" let reactions = [];
let reactions = [] let repliedToData = null;
let repliedToData = null 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;" />`
} }
@ -252,58 +250,47 @@ 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.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= () => {
} }
} }
};
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);
} }
} }
return hideit ? html`<li class="clearfix"></li>` : html` return hideit ? html`<li class="clearfix"></li>` : html`
@ -332,7 +319,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>
@ -385,16 +371,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

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