|
|
|
@ -1,11 +1,15 @@
|
|
|
|
|
import { LitElement, html, css } from 'lit' |
|
|
|
|
import { render } from 'lit/html.js' |
|
|
|
|
import { Epml } from '../../../epml.js' |
|
|
|
|
import localForage from "localforage"; |
|
|
|
|
import { translate} from 'lit-translate'; |
|
|
|
|
|
|
|
|
|
import '@material/mwc-icon' |
|
|
|
|
|
|
|
|
|
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) |
|
|
|
|
|
|
|
|
|
const chatLastSeen = localForage.createInstance({ |
|
|
|
|
name: "chat-last-seen", |
|
|
|
|
}); |
|
|
|
|
class ChatHead extends LitElement { |
|
|
|
|
static get properties() { |
|
|
|
|
return { |
|
|
|
@ -15,7 +19,8 @@ class ChatHead extends LitElement {
|
|
|
|
|
iconName: { type: String }, |
|
|
|
|
activeChatHeadUrl: { type: String }, |
|
|
|
|
isImageLoaded: { type: Boolean }, |
|
|
|
|
setActiveChatHeadUrl: {attribute: false} |
|
|
|
|
setActiveChatHeadUrl: {attribute: false}, |
|
|
|
|
lastReadMessageTimestamp: {type: Number} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -24,9 +29,13 @@ class ChatHead extends LitElement {
|
|
|
|
|
li { |
|
|
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
padding: 7px 5px 7px 5px; |
|
|
|
|
padding: 10px 5px 10px 5px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
width: 100%; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: flex-start; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
li:hover { |
|
|
|
@ -44,12 +53,21 @@ class ChatHead extends LitElement {
|
|
|
|
|
color: var(--chat-group); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.about { |
|
|
|
|
margin-top: 8px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.about { |
|
|
|
|
padding-left: 8px; |
|
|
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
width: 100%; |
|
|
|
|
margin: 0px; |
|
|
|
|
} |
|
|
|
|
.inner-container { |
|
|
|
|
display: flex; |
|
|
|
|
width: calc(100% - 45px); |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.status { |
|
|
|
@ -64,6 +82,13 @@ class ChatHead extends LitElement {
|
|
|
|
|
clear: both; |
|
|
|
|
height: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.name { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
` |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -82,9 +107,11 @@ class ChatHead extends LitElement {
|
|
|
|
|
this.activeChatHeadUrl = '' |
|
|
|
|
this.isImageLoaded = false |
|
|
|
|
this.imageFetches = 0 |
|
|
|
|
this.lastReadMessageTimestamp = 0 |
|
|
|
|
this.loggedInAddress = window.parent.reduxStore.getState().app.selectedAddress.address |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
createImage(imageUrl) { |
|
|
|
|
createImage(imageUrl) { |
|
|
|
|
const imageHTMLRes = new Image(); |
|
|
|
|
imageHTMLRes.src = imageUrl; |
|
|
|
|
imageHTMLRes.style= "width:40px; height:40px; float: left; border-radius:50%"; |
|
|
|
@ -99,7 +126,7 @@ class ChatHead extends LitElement {
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.imageFetches = this.imageFetches + 1; |
|
|
|
|
imageHTMLRes.src = imageUrl; |
|
|
|
|
}, 500); |
|
|
|
|
}, 750); |
|
|
|
|
} else { |
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -109,32 +136,61 @@ class ChatHead extends LitElement {
|
|
|
|
|
return imageHTMLRes; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
let avatarImg = ''; |
|
|
|
|
let backupAvatarImg = '' |
|
|
|
|
let isUnread = false |
|
|
|
|
|
|
|
|
|
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) |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(this.lastReadMessageTimestamp && this.chatInfo.timestamp){ |
|
|
|
|
if(this.lastReadMessageTimestamp < this.chatInfo.timestamp){ |
|
|
|
|
isUnread = true |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(this.activeChatHeadUrl === this.chatInfo.url){ |
|
|
|
|
isUnread = false |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(this.chatInfo.sender === this.loggedInAddress){ |
|
|
|
|
isUnread = false |
|
|
|
|
} |
|
|
|
|
return html` |
|
|
|
|
<li @click=${() => this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}"> |
|
|
|
|
${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:40px; height:40px; 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:40px; height:40px; 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>`: ''} |
|
|
|
|
${!this.isImageLoaded && this.chatInfo.name ? html`<div style="width:40px; height:40px; flex-shrink: 0; 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:40px; height:40px; flex-shrink: 0; 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 class="inner-container"> |
|
|
|
|
<div class="about"> |
|
|
|
|
<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> <mwc-icon style="float:right; padding: 0 1rem; color: var(--chat-group);">${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}</mwc-icon> </div> |
|
|
|
|
<div class="name"><span style="font-weight: bold;float:left; padding-left: 8px; color: var(--chat-group);font-size:14px;word-break:${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? 'break-word': 'break-all'}">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> <mwc-icon style="font-size:18px; color: var(--chat-group);">${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}</mwc-icon> </div> |
|
|
|
|
</div> |
|
|
|
|
<div class="about" style="margin-top:7px"> |
|
|
|
|
<div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);font-size:14px"></span> |
|
|
|
|
<div style="color: var(--black); display: flex;font-size: 12px; align-items:center"> |
|
|
|
|
<div style="width: 8px; height: 8px;border-radius: 50%;background: ${isUnread ? 'var(--error)' : 'none'} ; margin-right:5px;"></div> |
|
|
|
|
<message-time style="display: ${(this.chatInfo.timestamp && this.chatInfo.timestamp > 100000) ? 'block' : 'none'}" timestamp=${this.chatInfo.timestamp}></message-time> |
|
|
|
|
<span style="font-size:12px;color:var(--black);display: ${(!this.chatInfo.timestamp || this.chatInfo.timestamp > 100000) ? 'none' : 'block'}">${translate('chatpage.cchange90')}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</li> |
|
|
|
|
` |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
firstUpdated() { |
|
|
|
|
async firstUpdated() { |
|
|
|
|
let configLoaded = false |
|
|
|
|
this.lastReadMessageTimestamp = await chatLastSeen.getItem(this.chatInfo.url) || 0 |
|
|
|
|
parentEpml.ready().then(() => { |
|
|
|
|
parentEpml.subscribe('selected_address', async selectedAddress => { |
|
|
|
|
this.selectedAddress = {} |
|
|
|
@ -142,6 +198,15 @@ class ChatHead extends LitElement {
|
|
|
|
|
if (!selectedAddress || Object.entries(selectedAddress).length === 0) return |
|
|
|
|
this.selectedAddress = selectedAddress |
|
|
|
|
}) |
|
|
|
|
parentEpml.subscribe('chat_last_seen', async chatList => { |
|
|
|
|
const parsedChatList = JSON.parse(chatList) |
|
|
|
|
const findChatSeen = parsedChatList.find(chat=> chat.key === this.chatInfo.url) |
|
|
|
|
|
|
|
|
|
if(findChatSeen && this.lastReadMessageTimestamp !== findChatSeen.timestamp){ |
|
|
|
|
this.lastReadMessageTimestamp = findChatSeen.timestamp |
|
|
|
|
this.requestUpdate() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
parentEpml.subscribe('config', c => { |
|
|
|
|
if (!configLoaded) { |
|
|
|
|
configLoaded = true |
|
|
|
@ -156,7 +221,18 @@ class ChatHead extends LitElement {
|
|
|
|
|
if(changedProperties.has('activeChatHeadUrl')){ |
|
|
|
|
return true |
|
|
|
|
} |
|
|
|
|
if(changedProperties.has('lastReadMessageTimestamp')){ |
|
|
|
|
return true |
|
|
|
|
} |
|
|
|
|
if(changedProperties.has('chatInfo')){ |
|
|
|
|
|
|
|
|
|
const prevChatInfo = changedProperties.get('chatInfo') |
|
|
|
|
|
|
|
|
|
if(prevChatInfo.address !== this.chatInfo.address){ |
|
|
|
|
|
|
|
|
|
this.isImageLoaded = false |
|
|
|
|
this.requestUpdate() |
|
|
|
|
} |
|
|
|
|
return true |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|