UI Done for the image caption modal
This commit is contained in:
Justin Ferrari
parent
a525fbc3b4
commit
9c021cca5c
@ -91,42 +91,42 @@
|
||||
"selectfile": "Select file",
|
||||
"dragfile": "Drag and drop backup here"
|
||||
},
|
||||
"settings":{
|
||||
"generalinfo":"General Account Info",
|
||||
"address":"Address",
|
||||
"publickey":"Public Key",
|
||||
"settings":"Settings",
|
||||
"account":"Account",
|
||||
"security":"Security",
|
||||
"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_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_2":"Generate login QR code",
|
||||
"notifications":"Notifications",
|
||||
"accountsecurity":"Account Security",
|
||||
"password":"Password",
|
||||
"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)",
|
||||
"block":"Block Notifications (Coming Soon...)",
|
||||
"playsound":"Play Sound",
|
||||
"shownotifications":"Show Notifications",
|
||||
"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",
|
||||
"addcustomnode":"Add Custom Node",
|
||||
"addandsave":"Add And Save",
|
||||
"protocol":"Protocol",
|
||||
"domain":"Domain",
|
||||
"port":"Port",
|
||||
"import":"Import Nodes",
|
||||
"export":"Export Nodes",
|
||||
"deletecustomnode":"Remove All Custom Nodes",
|
||||
"warning":"Your existing nodes will be deleted and from backup new created.",
|
||||
"snack1":"Successfully deleted and added standard nodes",
|
||||
"snack2":"UI conected to node",
|
||||
"snack3":"Successfully added and saved custom node",
|
||||
"snack4":"Nodes successfully saved as",
|
||||
"snack5":"Nodes successfully imported"
|
||||
"settings": {
|
||||
"generalinfo": "General Account Info",
|
||||
"address": "Address",
|
||||
"publickey": "Public Key",
|
||||
"settings": "Settings",
|
||||
"account": "Account",
|
||||
"security": "Security",
|
||||
"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_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_2": "Generate login QR code",
|
||||
"notifications": "Notifications",
|
||||
"accountsecurity": "Account Security",
|
||||
"password": "Password",
|
||||
"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)",
|
||||
"block": "Block Notifications (Coming Soon...)",
|
||||
"playsound": "Play Sound",
|
||||
"shownotifications": "Show Notifications",
|
||||
"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",
|
||||
"addcustomnode": "Add Custom Node",
|
||||
"addandsave": "Add And Save",
|
||||
"protocol": "Protocol",
|
||||
"domain": "Domain",
|
||||
"port": "Port",
|
||||
"import": "Import Nodes",
|
||||
"export": "Export Nodes",
|
||||
"deletecustomnode": "Remove All Custom Nodes",
|
||||
"warning": "Your existing nodes will be deleted and from backup new created.",
|
||||
"snack1": "Successfully deleted and added standard nodes",
|
||||
"snack2": "UI conected to node",
|
||||
"snack3": "Successfully added and saved custom node",
|
||||
"snack4": "Nodes successfully saved as",
|
||||
"snack5": "Nodes successfully imported"
|
||||
},
|
||||
"appinfo": {
|
||||
"blockheight": "Block Height",
|
||||
@ -487,7 +487,8 @@
|
||||
"cchange25": "Edit Message",
|
||||
"cchange26": "File size exceeds 5 MB",
|
||||
"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": {
|
||||
"wcchange1": "Welcome to Q-Chat",
|
||||
|
||||
@ -55,13 +55,20 @@ class ChatPage extends LitElement {
|
||||
repliedToMessageObj: { type: Object },
|
||||
editedMessageObj: { type: Object },
|
||||
iframeHeight: { type: Number },
|
||||
chatMessageSize: { type: Number},
|
||||
imageFile: {type: Object}
|
||||
chatMessageSize: { type: Number },
|
||||
imageFile: { type: Object },
|
||||
caption: { type: String }
|
||||
}
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
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 {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@ -194,6 +201,41 @@ class ChatPage extends LitElement {
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@ -334,13 +376,46 @@ class ChatPage extends LitElement {
|
||||
input[type=file]::-webkit-file-upload-button {
|
||||
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() {
|
||||
super()
|
||||
this.getMessageConfig = this.getMessageConfig.bind(this)
|
||||
this.getOldMessage = this.getOldMessage.bind(this)
|
||||
this._sendMessage = this._sendMessage.bind(this)
|
||||
this.insertImage = this.insertImage.bind(this)
|
||||
@ -371,6 +446,7 @@ class ChatPage extends LitElement {
|
||||
this.chatMessageSize = 0
|
||||
this.imageFile = null
|
||||
this.uid = new ShortUniqueId()
|
||||
this.caption = ""
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -392,29 +468,45 @@ class ChatPage extends LitElement {
|
||||
</div>
|
||||
` :
|
||||
this.renderChatScroller(this._initialMessages)}
|
||||
<mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile} @closed=${()=> {
|
||||
this.imageFile = null
|
||||
<mwc-dialog
|
||||
id="showDialogPublicKey"
|
||||
?open=${this.imageFile}
|
||||
@closed=${()=> {
|
||||
this.chatEditor.enable();
|
||||
this.caption = "";
|
||||
this.imageFile = null;
|
||||
}}>
|
||||
<div class="dialog-header"></div>
|
||||
<div class="dialog-container">
|
||||
<div class="dialog-container mdc-dialog mdc-dialog__surface">
|
||||
${this.imageFile && html`
|
||||
<img src=${URL.createObjectURL(this.imageFile)} />
|
||||
<img src=${URL.createObjectURL(this.imageFile)} alt="dialog-img" class="dialog-image" />
|
||||
`}
|
||||
</div>
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
class="red"
|
||||
@click=${()=> {
|
||||
this._sendMessage({
|
||||
type: 'image',
|
||||
imageFile: this.imageFile,
|
||||
caption: 'This is a caption'
|
||||
})
|
||||
}}
|
||||
>
|
||||
send
|
||||
</mwc-button>
|
||||
<!-- 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>
|
||||
${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
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
@ -424,8 +516,22 @@ class ChatPage extends LitElement {
|
||||
this.imageFile = null
|
||||
}}
|
||||
>
|
||||
${translate("general.close")}
|
||||
</mwc-button>
|
||||
${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-dialog>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
||||
@ -539,21 +645,17 @@ class ChatPage extends LitElement {
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
|
||||
insertImage(file){
|
||||
|
||||
if(file.type.includes('image')){
|
||||
this.imageFile = file
|
||||
|
||||
this.chatEditor.disable();
|
||||
return
|
||||
}
|
||||
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange28"))
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
async firstUpdated() {
|
||||
|
||||
@ -562,8 +664,6 @@ class ChatPage extends LitElement {
|
||||
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
|
||||
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
|
||||
this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM');
|
||||
console.log(this.chatMessageInput);
|
||||
console.log(this.mirrorChatInput.clientHeight);
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (!this.chatEditor.content.body.matches(':focus')) {
|
||||
// WARNING: Deprecated methods from KeyBoard Event
|
||||
@ -681,12 +781,20 @@ class ChatPage extends LitElement {
|
||||
if (changedProperties && changedProperties.has('chatMessageSize')) {
|
||||
console.log(this.chatMessageSize, "Chat Message Size");
|
||||
}
|
||||
if(changedProperties && changedProperties.has("imageFile")) {
|
||||
this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption');
|
||||
this.chatbarCaption.focus();
|
||||
}
|
||||
}
|
||||
|
||||
calculateIFrameHeight(height) {
|
||||
this.iframeHeight = height;
|
||||
}
|
||||
|
||||
onCaptionChange(e) {
|
||||
this.caption = e;
|
||||
}
|
||||
|
||||
changeLanguage() {
|
||||
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||
|
||||
@ -803,14 +911,12 @@ class ChatPage extends LitElement {
|
||||
|
||||
if (isInitial) {
|
||||
|
||||
|
||||
|
||||
const replacedMessages = await replaceMessagesEdited({
|
||||
decodedMessages: decodedMessages,
|
||||
parentEpml,
|
||||
isReceipient: isReceipient,
|
||||
decodeMessageFunc: this.decodeMessage,
|
||||
_publicKey: this._publicKey
|
||||
parentEpml,
|
||||
isReceipient: isReceipient,
|
||||
decodeMessageFunc: this.decodeMessage,
|
||||
_publicKey: this._publicKey
|
||||
})
|
||||
|
||||
this._messages = replacedMessages.sort(function (a, b) {
|
||||
@ -818,17 +924,11 @@ class ChatPage extends LitElement {
|
||||
- b.timestamp
|
||||
})
|
||||
|
||||
|
||||
|
||||
// TODO: Determine number of initial messages by screen height...
|
||||
this._initialMessages = this._messages
|
||||
|
||||
|
||||
this.messagesRendered = this._initialMessages
|
||||
|
||||
|
||||
this.isLoadingMessages = false
|
||||
setTimeout(() => this.downElementObserver(), 500)
|
||||
this._initialMessages = this._messages;
|
||||
this.messagesRendered = this._initialMessages;
|
||||
this.isLoadingMessages = false;
|
||||
setTimeout(() => this.downElementObserver(), 500);
|
||||
} else {
|
||||
const replacedMessages = await replaceMessagesEdited({
|
||||
decodedMessages: decodedMessages,
|
||||
@ -838,28 +938,19 @@ class ChatPage extends LitElement {
|
||||
_publicKey: this._publicKey
|
||||
})
|
||||
|
||||
|
||||
const renderEachMessage = replacedMessages.map(async(msg)=> {
|
||||
await this.renderNewMessage(msg)
|
||||
})
|
||||
await Promise.all(renderEachMessage)
|
||||
|
||||
|
||||
// this.newMessages = this.newMessages.concat(_newMessages)
|
||||
this.messagesRendered = [...this.messagesRendered].sort(function (a, b) {
|
||||
return a.timestamp
|
||||
- b.timestamp
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
getMessageConfig() {
|
||||
const textAreaElement = this.shadowRoot.getElementById('messageBox');
|
||||
return textAreaElement.value;
|
||||
}
|
||||
|
||||
getMessageSize(message){
|
||||
try {
|
||||
const messageText = message;
|
||||
@ -1031,41 +1122,39 @@ class ChatPage extends LitElement {
|
||||
*
|
||||
*/
|
||||
decodeMessage(encodedMessageObj, isReceipient, _publicKey ) {
|
||||
let isReceipientVar
|
||||
let _publicKeyVar
|
||||
let isReceipientVar;
|
||||
let _publicKeyVar;
|
||||
try {
|
||||
isReceipientVar = this.isReceipient === undefined ? isReceipient : this.isReceipient;
|
||||
_publicKeyVar = this._publicKey === undefined ? _publicKey : this._publicKey
|
||||
_publicKeyVar = this._publicKey === undefined ? _publicKey : this._publicKey;
|
||||
} catch (error) {
|
||||
isReceipientVar = isReceipient
|
||||
_publicKeyVar = _publicKey
|
||||
isReceipientVar = isReceipient;
|
||||
_publicKeyVar = _publicKey;
|
||||
}
|
||||
|
||||
let decodedMessageObj = {}
|
||||
let decodedMessageObj = {};
|
||||
|
||||
if (isReceipientVar === true) {
|
||||
// direct chat
|
||||
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)
|
||||
decodedMessageObj = { ...encodedMessageObj, decodedMessage }
|
||||
let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, _publicKeyVar.key, encodedMessageObj.reference);
|
||||
decodedMessageObj = { ...encodedMessageObj, decodedMessage };
|
||||
} else if (encodedMessageObj.isEncrypted === false && encodedMessageObj.data) {
|
||||
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data)
|
||||
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray)
|
||||
decodedMessageObj = { ...encodedMessageObj, decodedMessage }
|
||||
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data);
|
||||
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray);
|
||||
decodedMessageObj = { ...encodedMessageObj, decodedMessage };
|
||||
} else {
|
||||
|
||||
decodedMessageObj = { ...encodedMessageObj, decodedMessage: "Cannot Decrypt Message!" }
|
||||
decodedMessageObj = { ...encodedMessageObj, decodedMessage: "Cannot Decrypt Message!" };
|
||||
}
|
||||
|
||||
} else {
|
||||
// group chat
|
||||
|
||||
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data)
|
||||
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray)
|
||||
decodedMessageObj = { ...encodedMessageObj, decodedMessage }
|
||||
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data);
|
||||
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray);
|
||||
decodedMessageObj = { ...encodedMessageObj, decodedMessage };
|
||||
}
|
||||
|
||||
return decodedMessageObj
|
||||
return decodedMessageObj;
|
||||
}
|
||||
|
||||
async fetchChatMessages(chatId) {
|
||||
@ -1321,7 +1410,7 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
const blob = b64toBlob(str, 'image/png');
|
||||
|
||||
await new Promise(resolve =>{
|
||||
await new Promise(resolve => {
|
||||
new Compressor( blob, {
|
||||
quality: 0.6,
|
||||
maxWidth: 500,
|
||||
@ -1342,24 +1431,24 @@ class ChatPage extends LitElement {
|
||||
try {
|
||||
|
||||
|
||||
await publishData({
|
||||
registeredName: userName ,
|
||||
file : compressedFile ,
|
||||
service: 'IMAGE',
|
||||
identifier : identifier,
|
||||
parentEpml,
|
||||
metaData: undefined,
|
||||
uploadType: 'file',
|
||||
selectedAddress: this.selectedAddress
|
||||
})
|
||||
await publishData({
|
||||
registeredName: userName,
|
||||
file : compressedFile,
|
||||
service: 'IMAGE',
|
||||
identifier : identifier,
|
||||
parentEpml,
|
||||
metaData: undefined,
|
||||
uploadType: 'file',
|
||||
selectedAddress: this.selectedAddress
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
console.error(error);
|
||||
}
|
||||
typeMessage = 'edit';
|
||||
let chatReference = outSideMsg.editedMessageObj.reference;
|
||||
|
||||
if(outSideMsg.editedMessageObj.chatReference){
|
||||
chatReference = outSideMsg.editedMessageObj.chatReference
|
||||
chatReference = outSideMsg.editedMessageObj.chatReference;
|
||||
}
|
||||
|
||||
let message = "";
|
||||
@ -1389,9 +1478,9 @@ class ChatPage extends LitElement {
|
||||
return;
|
||||
}
|
||||
const id = this.uid();
|
||||
const identifier = `qchat_${id}`
|
||||
let compressedFile = ''
|
||||
await new Promise(resolve =>{
|
||||
const identifier = `qchat_${id}`;
|
||||
let compressedFile = '';
|
||||
await new Promise(resolve => {
|
||||
new Compressor( outSideMsg.imageFile, {
|
||||
quality: .6,
|
||||
maxWidth: 500,
|
||||
@ -1408,41 +1497,38 @@ class ChatPage extends LitElement {
|
||||
})
|
||||
})
|
||||
|
||||
const fileSize = compressedFile.size
|
||||
if(fileSize > 5000000){
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange26"))
|
||||
const fileSize = compressedFile.size;
|
||||
if (fileSize > 5000000) {
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange26"));
|
||||
this.isLoading = false;
|
||||
this.chatEditor.enable();
|
||||
return
|
||||
return;
|
||||
}
|
||||
console.log({userName, identifier })
|
||||
|
||||
await publishData({
|
||||
registeredName: userName,
|
||||
file : compressedFile,
|
||||
service: 'IMAGE',
|
||||
identifier : identifier,
|
||||
parentEpml,
|
||||
metaData: undefined,
|
||||
uploadType: 'file',
|
||||
selectedAddress: this.selectedAddress
|
||||
})
|
||||
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);
|
||||
|
||||
|
||||
|
||||
await publishData({
|
||||
registeredName: userName,
|
||||
file : compressedFile,
|
||||
service: 'IMAGE',
|
||||
identifier : identifier,
|
||||
parentEpml,
|
||||
metaData: undefined,
|
||||
uploadType: 'file',
|
||||
selectedAddress: this.selectedAddress
|
||||
})
|
||||
|
||||
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
|
||||
@ -1857,7 +1943,6 @@ class ChatPage extends LitElement {
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
const event = events[i]
|
||||
editor.content.body.addEventListener(event, async function (e) {
|
||||
console.log("hello world12")
|
||||
if (e.type === 'click') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -1900,12 +1985,9 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
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.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML);
|
||||
|
||||
// Handle Enter
|
||||
if (e.keyCode === 13 && !e.shiftKey) {
|
||||
|
||||
@ -1985,7 +2067,6 @@ class ChatPage extends LitElement {
|
||||
};
|
||||
|
||||
const editorConfig = {
|
||||
getMessageConfig: this.getMessageConfig,
|
||||
getMessageSize: this.getMessageSize,
|
||||
calculateIFrameHeight: this.calculateIFrameHeight,
|
||||
mirrorElement: this.mirrorChatInput,
|
||||
|
||||
@ -210,41 +210,39 @@ class MessageTemplate extends LitElement {
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
const hidemsg = this.hideMessages
|
||||
let message = ""
|
||||
let reactions = []
|
||||
let repliedToData = null
|
||||
let image = null
|
||||
let isImageDeleted = false
|
||||
const hidemsg = this.hideMessages;
|
||||
let message = "";
|
||||
let reactions = [];
|
||||
let repliedToData = null;
|
||||
let image = null;
|
||||
let isImageDeleted = false;
|
||||
try {
|
||||
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage)
|
||||
message = parsedMessageObj.messageText
|
||||
repliedToData = this.messageObj.repliedToData
|
||||
isImageDeleted = parsedMessageObj.isImageDeleted
|
||||
reactions = parsedMessageObj.reactions || []
|
||||
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
|
||||
message = parsedMessageObj.messageText;
|
||||
repliedToData = this.messageObj.repliedToData;
|
||||
isImageDeleted = parsedMessageObj.isImageDeleted;
|
||||
reactions = parsedMessageObj.reactions || [];
|
||||
if(parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0){
|
||||
image = parsedMessageObj.images[0]
|
||||
image = parsedMessageObj.images[0];
|
||||
}
|
||||
} catch (error) {
|
||||
message = this.messageObj.decodedMessage
|
||||
message = this.messageObj.decodedMessage;
|
||||
}
|
||||
let avatarImg = ''
|
||||
let imageHTML = ''
|
||||
let imageHTMLDialog = ''
|
||||
let imageUrl = ''
|
||||
let nameMenu = ''
|
||||
let levelFounder = ''
|
||||
let hideit = hidemsg.includes(this.messageObj.sender)
|
||||
|
||||
let avatarImg = '';
|
||||
let imageHTML = '';
|
||||
let imageHTMLDialog = '';
|
||||
let imageUrl = '';
|
||||
let nameMenu = '';
|
||||
let levelFounder = '';
|
||||
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) {
|
||||
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 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';" />`
|
||||
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 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';" />`;
|
||||
} else {
|
||||
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 imageHTMLRes = new Image();
|
||||
imageHTMLRes.src = imageUrl;
|
||||
imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer"
|
||||
imageHTMLRes.onclick= ()=> {
|
||||
imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
|
||||
imageHTMLRes.onclick= () => {
|
||||
this.openDialogImage = true
|
||||
}
|
||||
imageHTMLRes.onerror = ()=> {
|
||||
|
||||
};
|
||||
imageHTMLRes.onerror = () => {
|
||||
console.log('inputRef', this.imageFetches)
|
||||
if(this.imageFetches < 4){
|
||||
|
||||
if (this.imageFetches < 4) {
|
||||
setTimeout(()=> {
|
||||
this.imageFetches = this.imageFetches + 1
|
||||
|
||||
imageHTMLRes.src = imageUrl
|
||||
}, 500)
|
||||
|
||||
this.imageFetches = this.imageFetches + 1;
|
||||
imageHTMLRes.src = imageUrl;
|
||||
}, 500);
|
||||
} 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.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
|
||||
imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}`
|
||||
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 (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;
|
||||
imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}`;
|
||||
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) {
|
||||
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 {
|
||||
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 {
|
||||
const parsedMsg = JSON.parse(repliedToData.decodedMessage)
|
||||
repliedToData.decodedMessage = parsedMsg
|
||||
const parsedMsg = JSON.parse(repliedToData.decodedMessage);
|
||||
repliedToData.decodedMessage = parsedMsg;
|
||||
} catch (error) {
|
||||
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
return hideit ? html`<li class="clearfix"></li>` : html`
|
||||
@ -331,8 +318,7 @@ class MessageTemplate extends LitElement {
|
||||
type: 'delete',
|
||||
name: image.name,
|
||||
identifier: image.identifier,
|
||||
editedMessageObj: this.messageObj,
|
||||
|
||||
editedMessageObj: this.messageObj,
|
||||
})}
|
||||
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
@ -385,16 +371,16 @@ class MessageTemplate extends LitElement {
|
||||
toblockaddress=${this.messageObj.sender}
|
||||
>
|
||||
</chat-modals>
|
||||
<mwc-dialog id="showDialogPublicKey" ?open=${this.openDialogImage} @closed=${()=> {
|
||||
this.openDialogImage = false
|
||||
}}>
|
||||
<div class="dialog-header" >
|
||||
|
||||
</div>
|
||||
<mwc-dialog
|
||||
id="showDialogPublicKey"
|
||||
?open=${this.openDialogImage}
|
||||
@closed=${()=> {
|
||||
this.openDialogImage = false
|
||||
}}>
|
||||
<div class="dialog-header"></div>
|
||||
<div class="dialog-container imageContainer">
|
||||
${imageHTMLDialog}
|
||||
${imageHTMLDialog}
|
||||
</div>
|
||||
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
@ -404,7 +390,7 @@ class MessageTemplate extends LitElement {
|
||||
this.openDialogImage = false
|
||||
}}
|
||||
>
|
||||
${translate("general.close")}
|
||||
${translate("general.close")}
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
`
|
||||
|
||||
@ -156,11 +156,6 @@ export const publishData = async ({
|
||||
})
|
||||
return uploadDataRes
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
await validate()
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user