Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-05-29 20:56:59 +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

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

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

@ -55,13 +55,20 @@ class ChatPage extends LitElement {
repliedToMessageObj: { type: Object }, repliedToMessageObj: { type: Object },
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;
@ -334,13 +376,46 @@ class ChatPage extends LitElement {
input[type=file]::-webkit-file-upload-button { input[type=file]::-webkit-file-upload-button {
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" />
`} `}
</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()} />
}) ` :
}} html`
> <paper-spinner-lite active></paper-spinner-lite>
send `}
</mwc-button> </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"
@ -424,8 +516,22 @@ class ChatPage extends LitElement {
this.imageFile = null this.imageFile = null
}} }}
> >
${translate("general.close")} ${translate("chatpage.cchange29")}
</mwc-button> </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-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"}`}">
@ -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,21 +645,17 @@ 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
} }
parentEpml.request('showSnackBar', get("chatpage.cchange28")) parentEpml.request('showSnackBar', get("chatpage.cchange28"))
} }
async firstUpdated() { async firstUpdated() {
@ -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,14 +911,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) {
@ -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) {
@ -1321,7 +1410,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,
@ -1342,24 +1431,24 @@ 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
}) })
} 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,9 +1478,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,
@ -1408,41 +1497,38 @@ 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({
registeredName: userName,
await publishData({ file : compressedFile,
registeredName: userName, service: 'IMAGE',
file : compressedFile, identifier : identifier,
service: 'IMAGE', parentEpml,
identifier : identifier, metaData: undefined,
parentEpml, uploadType: 'file',
metaData: undefined, selectedAddress: this.selectedAddress
uploadType: 'file', })
selectedAddress: this.selectedAddress
}) const messageObject = {
const messageObject = { messageText: outSideMsg.caption,
messageText: outSideMsg.caption, images: [{
images: [{ service: "IMAGE",
service: "IMAGE", name: userName,
name: userName, identifier: identifier
identifier: identifier }],
}], isImageDeleted: false,
isImageDeleted: false, 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
@ -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,

134
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) {
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);
} }
} }
return hideit ? html`<li class="clearfix"></li>` : html` return hideit ? html`<li class="clearfix"></li>` : html`
@ -331,8 +318,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>
@ -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
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"
@ -404,7 +390,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

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