Merge pull request #95 from PhillipLangMartinez/bugfix/load-chat-image
fix reaction bug and load image
This commit is contained in:
AlphaX-Projects
GitHub
commit
c22feb1479
@ -2144,7 +2144,8 @@ class ChatPage extends LitElement {
|
||||
const findOriginalMessageIndex = this.messagesRendered.findIndex(msg=> msg.reference === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference) )
|
||||
if(findOriginalMessageIndex !== -1){
|
||||
const newMessagesRendered = [...this.messagesRendered]
|
||||
newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, editedTimestamp: newMessage.timestamp }
|
||||
newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName,
|
||||
sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp }
|
||||
this.messagesRendered = newMessagesRendered
|
||||
await this.getUpdateComplete();
|
||||
}
|
||||
|
||||
@ -421,6 +421,10 @@ export const chatStyles = css`
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.hideImg {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.image-deleted-msg {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
@ -659,5 +663,46 @@ export const chatStyles = css`
|
||||
100% { background-color:rgba(var(--menuactivergb), 0)}
|
||||
}
|
||||
|
||||
.smallLoading,
|
||||
.smallLoading:after {
|
||||
border-radius: 50%;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.smallLoading {
|
||||
border-width: 0.8em;
|
||||
border-style: solid;
|
||||
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2)
|
||||
rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
|
||||
font-size: 30px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0px);
|
||||
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
|
||||
@ -418,15 +418,12 @@ class MessageTemplate extends LitElement {
|
||||
setTimeout(() => {
|
||||
this.imageFetches = this.imageFetches + 1;
|
||||
imageHTMLRes.src = imageUrl;
|
||||
}, 500);
|
||||
}, 2000);
|
||||
} else {
|
||||
imageHTMLRes.src = '/img/chain.png';
|
||||
imageHTMLRes.style= "max-width:45vh; max-height:20vh; border-radius: 5px; filter: opacity(0.5)";
|
||||
imageHTMLRes.onclick= () => {
|
||||
|
||||
}
|
||||
|
||||
this.isImageLoaded = true
|
||||
setTimeout(() => {
|
||||
this.imageFetches = this.imageFetches + 1;
|
||||
imageHTMLRes.src = imageUrl;
|
||||
}, 6000);
|
||||
}
|
||||
};
|
||||
return imageHTMLRes;
|
||||
@ -472,6 +469,7 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
const escapedMessage = this.escapeHTML(message)
|
||||
const replacedMessage = escapedMessage.replace(new RegExp('\r?\n','g'), '<br />');
|
||||
|
||||
return hideit ? html`<li class="clearfix"></li>` : html`
|
||||
<li
|
||||
class="clearfix message-parent"
|
||||
@ -577,7 +575,7 @@ class MessageTemplate extends LitElement {
|
||||
</p>
|
||||
</div>
|
||||
`}
|
||||
${image && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
|
||||
${image && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
|
||||
<div
|
||||
@click=${()=> {
|
||||
this.viewImage = true
|
||||
@ -591,16 +589,26 @@ class MessageTemplate extends LitElement {
|
||||
|
||||
</div>
|
||||
` : html``}
|
||||
${!this.isImageLoaded && image && this.viewImage ? html`
|
||||
<div style="display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute">
|
||||
<div class=${`smallLoading`}></div>
|
||||
</div>
|
||||
|
||||
`: ''}
|
||||
${image && !isImageDeleted && (this.viewImage || this.myAddress === this.messageObj.sender) ? html`
|
||||
<div
|
||||
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
|
||||
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : '', !this.isImageLoaded ? 'hideImg': ''].join(' ')}
|
||||
style=${this.isFirstMessage && "margin-top: 10px;"}>
|
||||
${imageHTML}<vaadin-icon
|
||||
${imageHTML}
|
||||
${this.myAddress === this.messageObj.sender ? html`
|
||||
<vaadin-icon
|
||||
@click=${() => {
|
||||
this.openDeleteImage = true;
|
||||
this.chatE
|
||||
}}
|
||||
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
|
||||
` : ''}
|
||||
|
||||
</div>
|
||||
` : image && isImageDeleted ? html`
|
||||
<p class="image-deleted-msg">This image has been deleted</p>
|
||||
@ -637,7 +645,7 @@ class MessageTemplate extends LitElement {
|
||||
${edited}
|
||||
</span>
|
||||
`
|
||||
: null
|
||||
: ''
|
||||
}
|
||||
<message-time timestamp=${this.messageObj.timestamp}></message-time>
|
||||
</div>
|
||||
@ -847,7 +855,6 @@ class ChatMenu extends LitElement {
|
||||
console.log({error})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="container">
|
||||
|
||||
@ -21,9 +21,12 @@ export const replaceMessagesEdited = async ({
|
||||
let responseItem = { ...response[0] }
|
||||
const decodeResponseItem = decodeMessageFunc(responseItem, isReceipient, _publicKey)
|
||||
delete decodeResponseItem.timestamp
|
||||
console.log({msg})
|
||||
msgItem = {
|
||||
...msg,
|
||||
...decodeResponseItem,
|
||||
senderName: msg.senderName,
|
||||
sender: msg.sender,
|
||||
editedTimestamp: response[0].timestamp,
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user