|
|
|
@ -93,6 +93,7 @@ class ChatSideNavHeads extends LitElement {
|
|
|
|
|
} |
|
|
|
|
imageHTMLRes.onload = () => { |
|
|
|
|
this.isImageLoaded = true; |
|
|
|
|
this.requestUpdate(); |
|
|
|
|
} |
|
|
|
|
imageHTMLRes.onerror = () => {
|
|
|
|
|
if (this.imageFetches < 4) { |
|
|
|
@ -101,36 +102,67 @@ class ChatSideNavHeads extends LitElement {
|
|
|
|
|
imageHTMLRes.src = imageUrl; |
|
|
|
|
}, 500); |
|
|
|
|
} else { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.isImageLoaded = false |
|
|
|
|
this.isImageLoaded = false |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
console.log(imageHTMLRes, "here8") |
|
|
|
|
return imageHTMLRes; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
let avatarImg = ''; |
|
|
|
|
let backupAvatarImg = '' |
|
|
|
|
if(this.chatInfo.name){ |
|
|
|
|
console.log(9, 'chat side nav head'); |
|
|
|
|
console.log(this.isImageLoaded, 'Is image loaded'); |
|
|
|
|
console.log(this.chatInfo, 'Chat Info Here'); |
|
|
|
|
let avatarImg = "" |
|
|
|
|
if (this.chatInfo.name) { |
|
|
|
|
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.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`; |
|
|
|
|
avatarImg= this.createImage(avatarUrl) |
|
|
|
|
|
|
|
|
|
avatarImg = this.createImage(avatarUrl) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return html` |
|
|
|
|
<li @click=${() => this.getUrl(this.chatInfo)} class="clearfix"> |
|
|
|
|
${this.isImageLoaded ? html`${avatarImg}` : html`` } |
|
|
|
|
${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` : html`` } |
|
|
|
|
${!this.isImageLoaded && this.chatInfo.name ? html`<div style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''} |
|
|
|
|
${!this.isImageLoaded && this.chatInfo.groupName ? html`<div style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''} |
|
|
|
|
<div> |
|
|
|
|
<div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> </div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
` |
|
|
|
|
${this.isImageLoaded ? html`${avatarImg}` : html``} |
|
|
|
|
${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName |
|
|
|
|
? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` |
|
|
|
|
: html``} |
|
|
|
|
${!this.isImageLoaded && this.chatInfo.name |
|
|
|
|
? html`<div
|
|
|
|
|
style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url |
|
|
|
|
? "var(--chatHeadBgActive)" |
|
|
|
|
: "var(--chatHeadBg)"}; color: ${this.activeChatHeadUrl === |
|
|
|
|
this.chatInfo.url |
|
|
|
|
? "var(--chatHeadTextActive)" |
|
|
|
|
: "var(--chatHeadText)"}; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize" |
|
|
|
|
> |
|
|
|
|
${this.chatInfo.name.charAt(0)} |
|
|
|
|
</div>` |
|
|
|
|
: ""} |
|
|
|
|
${!this.isImageLoaded && this.chatInfo.groupName |
|
|
|
|
? html`<div
|
|
|
|
|
style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url |
|
|
|
|
? "var(--chatHeadBgActive)" |
|
|
|
|
: "var(--chatHeadBg)"}; color: ${this.activeChatHeadUrl === this.chatInfo.url |
|
|
|
|
? "var(--chatHeadTextActive)" |
|
|
|
|
: "var(--chatHeadText)"}; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize" |
|
|
|
|
> |
|
|
|
|
${this.chatInfo.groupName.charAt(0)} |
|
|
|
|
</div>` |
|
|
|
|
: ""} |
|
|
|
|
<div> |
|
|
|
|
<div class="name"> |
|
|
|
|
<span style="float:left; padding-left: 8px; color: var(--chat-group);"> |
|
|
|
|
${this.chatInfo.groupName |
|
|
|
|
? this.chatInfo.groupName |
|
|
|
|
: this.chatInfo.name !== undefined |
|
|
|
|
? this.chatInfo.name |
|
|
|
|
: this.chatInfo.address.substr(0, 15)} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
` |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
firstUpdated() { |
|
|
|
@ -154,6 +186,12 @@ class ChatSideNavHeads extends LitElement {
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
updated(changedProperties) { |
|
|
|
|
if (changedProperties && changedProperties.has("avatarImg")) { |
|
|
|
|
console.log(this.avatarImg, "avatarImg"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
shouldUpdate(changedProperties) { |
|
|
|
|
if(changedProperties.has('activeChatHeadUrl')){ |
|
|
|
|
return true |
|
|
|
@ -161,6 +199,9 @@ class ChatSideNavHeads extends LitElement {
|
|
|
|
|
if(changedProperties.has('chatInfo')){ |
|
|
|
|
return true |
|
|
|
|
} |
|
|
|
|
if(changedProperties.has('isImageLoaded')){ |
|
|
|
|
return true |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|