|
|
|
@ -76,66 +76,27 @@ class ChatScroller extends LitElement { |
|
|
|
return html` |
|
|
|
return html` |
|
|
|
<ul id="viewElement" class="chat-list clearfix"> |
|
|
|
<ul id="viewElement" class="chat-list clearfix"> |
|
|
|
<div id="upObserver"></div> |
|
|
|
<div id="upObserver"></div> |
|
|
|
${formattedMessages.map((formattedMessage)=> { |
|
|
|
${formattedMessages.map((formattedMessage) => { |
|
|
|
|
|
|
|
return repeat( |
|
|
|
return repeat( |
|
|
|
|
|
|
|
formattedMessage.messages, |
|
|
|
formattedMessage.messages, |
|
|
|
(message) => message.reference, |
|
|
|
(message) => message.reference, |
|
|
|
(message, indexMessage) => html` |
|
|
|
(message, indexMessage) => html` |
|
|
|
<message-template
|
|
|
|
<message-template
|
|
|
|
.emojiPicker=${this.emojiPicker}
|
|
|
|
.emojiPicker=${this.emojiPicker}
|
|
|
|
.escapeHTML=${this.escapeHTML}
|
|
|
|
.escapeHTML=${this.escapeHTML}
|
|
|
|
.messageObj=${message}
|
|
|
|
.messageObj=${message}
|
|
|
|
.hideMessages=${this.hideMessages} |
|
|
|
.hideMessages=${this.hideMessages} |
|
|
|
.setRepliedToMessageObj=${this.setRepliedToMessageObj} |
|
|
|
.setRepliedToMessageObj=${this.setRepliedToMessageObj} |
|
|
|
.setEditedMessageObj=${this.setEditedMessageObj} |
|
|
|
.setEditedMessageObj=${this.setEditedMessageObj} |
|
|
|
.focusChatEditor=${this.focusChatEditor} |
|
|
|
.focusChatEditor=${this.focusChatEditor} |
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
?isfirstmessage=${indexMessage === 0} |
|
|
|
?isFirstMessage=${indexMessage === 0} |
|
|
|
?isSingleMessageInGroup=${formattedMessage.messages.length > 1} |
|
|
|
?isSingleMessageInGroup=${formattedMessage.messages.length > 1} |
|
|
|
> |
|
|
|
?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1} |
|
|
|
</message-template>` |
|
|
|
> |
|
|
|
) |
|
|
|
</message-template>` |
|
|
|
|
|
|
|
) |
|
|
|
})} |
|
|
|
})} |
|
|
|
<!-- ${repeat( |
|
|
|
|
|
|
|
testMessages, |
|
|
|
|
|
|
|
(testMessage)=> testMessage.signature, |
|
|
|
|
|
|
|
(testMessage)=> { |
|
|
|
|
|
|
|
return repeat( |
|
|
|
|
|
|
|
testMessage.messages, |
|
|
|
|
|
|
|
(message) => message.reference, |
|
|
|
|
|
|
|
(message, indexMessage) => html` |
|
|
|
|
|
|
|
<message-template
|
|
|
|
|
|
|
|
.emojiPicker=${this.emojiPicker}
|
|
|
|
|
|
|
|
.escapeHTML=${this.escapeHTML}
|
|
|
|
|
|
|
|
.messageObj=${message}
|
|
|
|
|
|
|
|
.hideMessages=${this.hideMessages} |
|
|
|
|
|
|
|
.setRepliedToMessageObj=${this.setRepliedToMessageObj} |
|
|
|
|
|
|
|
.setEditedMessageObj=${this.setEditedMessageObj} |
|
|
|
|
|
|
|
.focusChatEditor=${this.focusChatEditor} |
|
|
|
|
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
|
|
|
|
?isfirstmessage=${indexMessage === 0} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</message-template>` |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
)} --> |
|
|
|
|
|
|
|
<!-- ${repeat( |
|
|
|
|
|
|
|
this.messages, |
|
|
|
|
|
|
|
(message) => message.reference, |
|
|
|
|
|
|
|
(message) => html` |
|
|
|
|
|
|
|
<message-template
|
|
|
|
|
|
|
|
.emojiPicker=${this.emojiPicker}
|
|
|
|
|
|
|
|
.escapeHTML=${this.escapeHTML}
|
|
|
|
|
|
|
|
.messageObj=${message}
|
|
|
|
|
|
|
|
.hideMessages=${this.hideMessages} |
|
|
|
|
|
|
|
.setRepliedToMessageObj=${this.setRepliedToMessageObj} |
|
|
|
|
|
|
|
.setEditedMessageObj=${this.setEditedMessageObj} |
|
|
|
|
|
|
|
.focusChatEditor=${this.focusChatEditor} |
|
|
|
|
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</message-template>` |
|
|
|
|
|
|
|
)} --> |
|
|
|
|
|
|
|
<div id='downObserver'></div> |
|
|
|
<div id='downObserver'></div> |
|
|
|
<div class='last-message-ref'> |
|
|
|
<div class='last-message-ref'> |
|
|
|
<vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => { |
|
|
|
<vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => { |
|
|
|
@ -234,10 +195,11 @@ class MessageTemplate extends LitElement { |
|
|
|
setEditedMessageObj: { type: Function }, |
|
|
|
setEditedMessageObj: { type: Function }, |
|
|
|
focusChatEditor: { type: Function }, |
|
|
|
focusChatEditor: { type: Function }, |
|
|
|
sendMessage: { type: Function }, |
|
|
|
sendMessage: { type: Function }, |
|
|
|
openDialogImage: {type: Function}, |
|
|
|
openDialogImage: { type: Function }, |
|
|
|
isImageLoaded: {type: Boolean}, |
|
|
|
isImageLoaded: { type: Boolean }, |
|
|
|
isFirstMessage: {type: Boolean}, |
|
|
|
isFirstMessage: { type: Boolean }, |
|
|
|
isSingleMessageInGroup: {type: Boolean} |
|
|
|
isSingleMessageInGroup: { type: Boolean }, |
|
|
|
|
|
|
|
isLastMessageInGroup: { type: Boolean }, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -253,6 +215,7 @@ class MessageTemplate extends LitElement { |
|
|
|
this.isImageLoaded = false |
|
|
|
this.isImageLoaded = false |
|
|
|
this.isFirstMessage = false |
|
|
|
this.isFirstMessage = false |
|
|
|
this.isSingleMessageInGroup = false |
|
|
|
this.isSingleMessageInGroup = false |
|
|
|
|
|
|
|
this.isLastMessageInGroup = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
static styles = [chatStyles] |
|
|
|
static styles = [chatStyles] |
|
|
|
@ -284,22 +247,22 @@ class MessageTemplate extends LitElement { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
render() { |
|
|
|
console.log('isFirst', this.isFirstMessage) |
|
|
|
console.log('isFirst', this.isFirstMessage); |
|
|
|
const hidemsg = this.hideMessages |
|
|
|
console.log("is single message in group", this.isSingleMessageInGroup); |
|
|
|
let message = "" |
|
|
|
const hidemsg = this.hideMessages; |
|
|
|
let reactions = [] |
|
|
|
let message = ""; |
|
|
|
let repliedToData = null |
|
|
|
let reactions = []; |
|
|
|
let image = null |
|
|
|
let repliedToData = null; |
|
|
|
let isImageDeleted = false |
|
|
|
let image = null; |
|
|
|
|
|
|
|
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) { |
|
|
|
@ -324,21 +287,20 @@ class MessageTemplate extends LitElement { |
|
|
|
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;" />` |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const createImage=(imageUrl)=>{ |
|
|
|
const createImage = (imageUrl) => { |
|
|
|
const imageHTMLRes = new Image(); |
|
|
|
const imageHTMLRes = new Image(); |
|
|
|
imageHTMLRes.src = imageUrl; |
|
|
|
imageHTMLRes.src = imageUrl; |
|
|
|
imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer"; |
|
|
|
imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer"; |
|
|
|
imageHTMLRes.onclick= () => { |
|
|
|
imageHTMLRes.onclick= () => { |
|
|
|
this.openDialogImage = true |
|
|
|
this.openDialogImage = true; |
|
|
|
} |
|
|
|
} |
|
|
|
imageHTMLRes.onload = ()=> { |
|
|
|
imageHTMLRes.onload = () => { |
|
|
|
this.isImageLoaded = true |
|
|
|
this.isImageLoaded = 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); |
|
|
|
@ -379,71 +341,112 @@ class MessageTemplate extends LitElement { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return hideit ? html`<li class="clearfix"></li>` : html` |
|
|
|
return hideit ? html`<li class="clearfix"></li>` : html` |
|
|
|
<li class="clearfix message-parent"> |
|
|
|
<li
|
|
|
|
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}"> |
|
|
|
class="clearfix message-parent"
|
|
|
|
<span class="message-data-name">${nameMenu}</span> |
|
|
|
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false && reactions.length === 0) ?
|
|
|
|
<span class="message-data-level">${levelFounder}</span> |
|
|
|
'padding-bottom: 0;'
|
|
|
|
<span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span> |
|
|
|
: null}
|
|
|
|
</div> |
|
|
|
${this.isFirstMessage && 'margin-top: 20px;'}"> |
|
|
|
<div class="message-data-avatar"> |
|
|
|
${this.isFirstMessage ? ( |
|
|
|
${avatarImg} |
|
|
|
html` |
|
|
|
</div> |
|
|
|
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}"> |
|
|
|
<div class="message-container"> |
|
|
|
<span class="message-data-name">${nameMenu}</span> |
|
|
|
<div class="message-subcontainer"> |
|
|
|
<span class="message-data-level">${levelFounder}</span> |
|
|
|
${repliedToData && html` |
|
|
|
<span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span> |
|
|
|
<div class="original-message"> |
|
|
|
</div> |
|
|
|
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p> |
|
|
|
` |
|
|
|
<p class="replied-message">${repliedToData.decodedMessage.messageText}</p> |
|
|
|
) : null} |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
class="message-container"
|
|
|
|
|
|
|
|
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) && 'margin-bottom: 0'}"> |
|
|
|
|
|
|
|
<div class="message-subcontainer1"> |
|
|
|
|
|
|
|
${(this.isSingleMessageInGroup === false ||
|
|
|
|
|
|
|
|
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true))
|
|
|
|
|
|
|
|
? ( |
|
|
|
|
|
|
|
html` |
|
|
|
|
|
|
|
<div class="message-data-avatar"> |
|
|
|
|
|
|
|
${avatarImg} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
` |
|
|
|
|
|
|
|
) :
|
|
|
|
|
|
|
|
html` |
|
|
|
|
|
|
|
<div class="message-data-avatar"></div> |
|
|
|
`}
|
|
|
|
`}
|
|
|
|
${image && !isImageDeleted ? html` |
|
|
|
<div
|
|
|
|
<div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}> |
|
|
|
class="${`message-subcontainer2
|
|
|
|
${imageHTML}<vaadin-icon |
|
|
|
${((this.isFirstMessage === true && this.isSingleMessageInGroup === false) ||
|
|
|
|
|
|
|
|
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) &&
|
|
|
|
|
|
|
|
'message-triangle'}`}"
|
|
|
|
|
|
|
|
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'margin-bottom: 0;' : null} |
|
|
|
|
|
|
|
${(this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === false)
|
|
|
|
|
|
|
|
? 'border-radius: 25px 25px 25px 0px;' |
|
|
|
|
|
|
|
: (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) |
|
|
|
|
|
|
|
? 'border-radius: 8px 25px 25px 8px;' |
|
|
|
|
|
|
|
: (this.isFirstMessage === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
|
|
|
|
|
|
|
|
? 'border-radius: 27px 25px 25px 12px;' |
|
|
|
|
|
|
|
: (this.isSingleMessageInGroup === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ?
|
|
|
|
|
|
|
|
'border-radius: 10px 25px 25px 0;'
|
|
|
|
|
|
|
|
: null |
|
|
|
|
|
|
|
}"> |
|
|
|
|
|
|
|
${repliedToData && html` |
|
|
|
|
|
|
|
<div class="original-message"> |
|
|
|
|
|
|
|
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p> |
|
|
|
|
|
|
|
<p class="replied-message">${repliedToData.decodedMessage.messageText}</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
`}
|
|
|
|
|
|
|
|
${image && !isImageDeleted ? html` |
|
|
|
|
|
|
|
<div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}> |
|
|
|
|
|
|
|
${imageHTML}<vaadin-icon |
|
|
|
|
|
|
|
@click=${() => this.sendMessage({ |
|
|
|
|
|
|
|
type: 'delete', |
|
|
|
|
|
|
|
name: image.name, |
|
|
|
|
|
|
|
identifier: image.identifier, |
|
|
|
|
|
|
|
editedMessageObj: this.messageObj, |
|
|
|
|
|
|
|
})} |
|
|
|
|
|
|
|
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
` : html``}
|
|
|
|
|
|
|
|
<div id="messageContent" class="message"> |
|
|
|
|
|
|
|
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<chat-menu
|
|
|
|
|
|
|
|
tabindex="0" |
|
|
|
|
|
|
|
class="chat-hover" |
|
|
|
|
|
|
|
style="${this.showBlockAddressIcon ? 'display: block;' : null} ${this.isFirstMessage && 'top: -50px'}" |
|
|
|
|
|
|
|
toblockaddress="${this.messageObj.sender}"
|
|
|
|
|
|
|
|
.showPrivateMessageModal=${() => this.showPrivateMessageModal()} |
|
|
|
|
|
|
|
.showBlockUserModal=${() => this.showBlockUserModal()} |
|
|
|
|
|
|
|
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} |
|
|
|
|
|
|
|
.showBlockAddressIcon=${this.showBlockAddressIcon} |
|
|
|
|
|
|
|
.originalMessage=${{...this.messageObj, message}} |
|
|
|
|
|
|
|
.setRepliedToMessageObj=${this.setRepliedToMessageObj} |
|
|
|
|
|
|
|
.setEditedMessageObj=${this.setEditedMessageObj} |
|
|
|
|
|
|
|
.focusChatEditor=${this.focusChatEditor} |
|
|
|
|
|
|
|
.myAddress=${this.myAddress} |
|
|
|
|
|
|
|
@blur=${() => this.showBlockIconFunc(false)} |
|
|
|
|
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</chat-menu> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="message-reactions" style="${reactions.length > 0 &&
|
|
|
|
|
|
|
|
'margin-top: 10px; margin-bottom: 5px;'}"> |
|
|
|
|
|
|
|
${reactions.map((reaction)=> { |
|
|
|
|
|
|
|
return html` |
|
|
|
|
|
|
|
<span
|
|
|
|
@click=${() => this.sendMessage({ |
|
|
|
@click=${() => this.sendMessage({ |
|
|
|
type: 'delete', |
|
|
|
type: 'reaction', |
|
|
|
name: image.name, |
|
|
|
editedMessageObj: this.messageObj, |
|
|
|
identifier: image.identifier, |
|
|
|
reaction: reaction.type, |
|
|
|
editedMessageObj: this.messageObj, |
|
|
|
})}
|
|
|
|
|
|
|
|
class="reactions-bg"> |
|
|
|
|
|
|
|
${reaction.type} ${reaction.qty} |
|
|
|
|
|
|
|
</span>` |
|
|
|
})} |
|
|
|
})} |
|
|
|
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
` : html``}
|
|
|
|
|
|
|
|
<div id="messageContent" class="message"> |
|
|
|
|
|
|
|
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="message-reactions"> |
|
|
|
|
|
|
|
${reactions.map((reaction)=> { |
|
|
|
|
|
|
|
return html` |
|
|
|
|
|
|
|
<span
|
|
|
|
|
|
|
|
@click=${() => this.sendMessage({ |
|
|
|
|
|
|
|
type: 'reaction', |
|
|
|
|
|
|
|
editedMessageObj: this.messageObj, |
|
|
|
|
|
|
|
reaction: reaction.type, |
|
|
|
|
|
|
|
})}
|
|
|
|
|
|
|
|
class="reactions-bg"> |
|
|
|
|
|
|
|
${reaction.type} ${reaction.qty} |
|
|
|
|
|
|
|
</span>` |
|
|
|
|
|
|
|
})} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<chat-menu
|
|
|
|
|
|
|
|
tabindex="0" |
|
|
|
|
|
|
|
class="chat-hover" |
|
|
|
|
|
|
|
style=${this.showBlockAddressIcon && "display: block"} |
|
|
|
|
|
|
|
toblockaddress="${this.messageObj.sender}"
|
|
|
|
|
|
|
|
.showPrivateMessageModal=${() => this.showPrivateMessageModal()} |
|
|
|
|
|
|
|
.showBlockUserModal=${() => this.showBlockUserModal()} |
|
|
|
|
|
|
|
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} |
|
|
|
|
|
|
|
.showBlockAddressIcon=${this.showBlockAddressIcon} |
|
|
|
|
|
|
|
.originalMessage=${{...this.messageObj, message}} |
|
|
|
|
|
|
|
.setRepliedToMessageObj=${this.setRepliedToMessageObj} |
|
|
|
|
|
|
|
.setEditedMessageObj=${this.setEditedMessageObj} |
|
|
|
|
|
|
|
.focusChatEditor=${this.focusChatEditor} |
|
|
|
|
|
|
|
.myAddress=${this.myAddress} |
|
|
|
|
|
|
|
@blur=${() => this.showBlockIconFunc(false)} |
|
|
|
|
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</chat-menu> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
|
Justin Ferrari
2 years ago