mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
WIP
This commit is contained in:
AlphaX-Projects
parent
919c5924a4
commit
4e71765cbb
@ -30,6 +30,7 @@ class ChatPage extends LitElement {
|
||||
messages: { type: Array },
|
||||
_messages: { type: Array },
|
||||
newMessages: { type: Array },
|
||||
hideMessages: { type: Array },
|
||||
chatId: { type: String },
|
||||
myAddress: { type: String },
|
||||
isReceipient: { type: Boolean },
|
||||
@ -121,6 +122,7 @@ class ChatPage extends LitElement {
|
||||
this.messages = []
|
||||
this._messages = []
|
||||
this.newMessages = []
|
||||
this.hideMessages = []
|
||||
this._publicKey = { key: '', hasPubKey: false }
|
||||
this.messageSignature = ''
|
||||
this._initialMessages = []
|
||||
@ -246,11 +248,16 @@ class ChatPage extends LitElement {
|
||||
}).then(res => {
|
||||
this.balance = res
|
||||
})
|
||||
parentEpml.subscribe('frame_paste_menu_switch', async res => {
|
||||
parentEpml.request('apiCall', {
|
||||
url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}`
|
||||
}).then(response => {
|
||||
this.hideMessages = response
|
||||
console.log(response)
|
||||
})
|
||||
|
||||
parentEpml.subscribe('frame_paste_menu_switch', async res => {
|
||||
res = JSON.parse(res)
|
||||
if (res.isOpen === false && this.isPasteMenuOpen === true) {
|
||||
|
||||
this.pasteToTextBox(textarea)
|
||||
this.isPasteMenuOpen = false
|
||||
}
|
||||
@ -320,7 +327,7 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
// TODO: Determine number of initial messages by screen height...
|
||||
this._messages.length <= 15 ? adjustMessages() : this._initialMessages = this._messages.splice(this._messages.length - 15);
|
||||
this._messages.length <= 2 ? adjustMessages() : this._initialMessages = this._messages.splice(this._messages.length - 2);
|
||||
|
||||
this.isLoadingMessages = false
|
||||
setTimeout(() => this.downElementObserver(), 500)
|
||||
@ -367,25 +374,35 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
if (messageObj.sender === this.myAddress) {
|
||||
nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}`
|
||||
nameMenu = `<mwc-icon class="iconsRight">more_horiz</mwc-icon>`
|
||||
} else {
|
||||
nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}"></name-menu>`
|
||||
nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}" messagesignatur="${messageObj.signature}"></name-menu>`
|
||||
}
|
||||
|
||||
levelFounder = `<level-founder checkleveladdress="${messageObj.sender}"></level-founder>`
|
||||
|
||||
return `
|
||||
<li class="clearfix">
|
||||
<div class="message-data ${messageObj.sender === this.selectedAddress.address ? "align-right" : ""}">
|
||||
<span class="message-data-name">${nameMenu}</span>
|
||||
<span class="message-data-level">${levelFounder}</span>
|
||||
<span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span>
|
||||
<span class="hide float-right"><mwc-icon class="iconsRight padright5">add_reaction</mwc-icon><mwc-icon class="iconsRight padright5">reply</mwc-icon><mwc-icon class="iconsRight">more_horiz</mwc-icon></span>
|
||||
</div>
|
||||
<div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.selectedAddress.address ? "float:right;" : "float:left;"} margin:3px;">${avatarImg}</div>
|
||||
<div class="message ${messageObj.sender === this.selectedAddress.address ? "my-message float-right" : "other-message float-left"}">${this.emojiPicker.parse(escape(messageObj.decodedMessage))}</div>
|
||||
</li>
|
||||
`
|
||||
const hidmes = this.hideMessages
|
||||
let hideit = hidmes.includes(messageObj.sender)
|
||||
|
||||
if ( hideit === true ) {
|
||||
return `
|
||||
<li class="clearfix"></li>
|
||||
`
|
||||
} else {
|
||||
return `
|
||||
<li class="clearfix">
|
||||
<div class="message-data ${messageObj.sender === this.myAddress ? "" : ""}">
|
||||
<span class="message-data-name" style="${messageObj.sender === this.myAddress ? "color: #03a9f4;" : "color: var(--black);"}">${messageObj.senderName ? messageObj.senderName : messageObj.sender}</span>
|
||||
<span class="message-data-level">${levelFounder}</span>
|
||||
<span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span>
|
||||
<span class="hide float-right">${nameMenu}</span>
|
||||
</div>
|
||||
<div class="message-data-avatar" style="width: 42px; height: 42px; ${messageObj.sender === this.myAddress ? "float:left;" : "float:left;"} margin: 3px;">${avatarImg}</div>
|
||||
<div id="messageContent" class="message ${messageObj.sender === this.myAddress ? "my-message float-left" : "other-message float-left"}">${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}</div>
|
||||
<div class="message-data-react"></div>
|
||||
</li>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
renderNewMessage(newMessage) {
|
||||
@ -422,29 +439,22 @@ class ChatPage extends LitElement {
|
||||
|
||||
if (this.isReceipient === true) {
|
||||
// direct chat
|
||||
|
||||
if (encodedMessageObj.isEncrypted === true && this._publicKey.hasPubKey === true) {
|
||||
|
||||
let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, this._publicKey.key, encodedMessageObj.reference)
|
||||
decodedMessageObj = { ...encodedMessageObj, decodedMessage }
|
||||
} else if (encodedMessageObj.isEncrypted === false) {
|
||||
|
||||
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!" }
|
||||
}
|
||||
|
||||
} else {
|
||||
// group chat
|
||||
|
||||
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data)
|
||||
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray)
|
||||
decodedMessageObj = { ...encodedMessageObj, decodedMessage }
|
||||
}
|
||||
|
||||
return decodedMessageObj
|
||||
}
|
||||
|
||||
@ -1027,6 +1037,12 @@ class ChatPage extends LitElement {
|
||||
};
|
||||
this.chatEditor = new ChatEditor(editorConfig);
|
||||
}
|
||||
|
||||
getApiKey() {
|
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
|
||||
let apiKey = myNode.apiKey
|
||||
return apiKey
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('chat-page', ChatPage)
|
||||
|
||||
@ -18,8 +18,9 @@ class ChatScroller extends LitElement {
|
||||
getOldMessage: { attribute: false },
|
||||
emojiPicker: { attribute: false },
|
||||
escapeHTML: { attribute: false },
|
||||
initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props )
|
||||
messages: { type: Array }
|
||||
initialMessages: { type: Array },
|
||||
messages: { type: Array },
|
||||
hideMessages: { type: Array }
|
||||
}
|
||||
}
|
||||
|
||||
@ -69,9 +70,9 @@ class ChatScroller extends LitElement {
|
||||
}
|
||||
|
||||
.message-data {
|
||||
width: 90%;
|
||||
background: transparent;
|
||||
width: 92%;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.message-data:hover .hide {
|
||||
@ -80,7 +81,6 @@ class ChatScroller extends LitElement {
|
||||
}
|
||||
|
||||
.message-data-name {
|
||||
color: var(--black);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -98,6 +98,14 @@ class ChatScroller extends LitElement {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.message-data-react {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.message-data-react-item {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: black;
|
||||
padding: 12px 10px;
|
||||
@ -140,8 +148,13 @@ class ChatScroller extends LitElement {
|
||||
}
|
||||
|
||||
.my-message {
|
||||
background: #ddd;
|
||||
border: 2px #ccc solid;
|
||||
background: #d1d1d1;
|
||||
border: 2px solid #cecece;
|
||||
}
|
||||
|
||||
.my-message:after {
|
||||
border-bottom-color: #d1d1d1;
|
||||
left: 7%;
|
||||
}
|
||||
|
||||
.other-message {
|
||||
@ -201,6 +214,7 @@ class ChatScroller extends LitElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.messages = []
|
||||
this.hideMessages = []
|
||||
this._upObserverhandler = this._upObserverhandler.bind(this)
|
||||
this.isLoading = false
|
||||
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
|
||||
@ -217,6 +231,7 @@ class ChatScroller extends LitElement {
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.getHideMessages()
|
||||
this.viewElement = this.shadowRoot.getElementById('viewElement')
|
||||
this.upObserverElement = this.shadowRoot.getElementById('upObserver')
|
||||
this.downObserverElement = this.shadowRoot.getElementById('downObserver')
|
||||
@ -228,65 +243,80 @@ class ChatScroller extends LitElement {
|
||||
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
|
||||
}
|
||||
|
||||
async getHideMessages() {
|
||||
const hideMessages = await parentEpml.request('apiCall', {
|
||||
url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}`
|
||||
})
|
||||
this.hideMessages = hideMessages
|
||||
}
|
||||
|
||||
chatMessageTemplate(messageObj) {
|
||||
let avatarImg = '';
|
||||
let nameMenu = '';
|
||||
let levelFounder = '';
|
||||
const hidmes = this.hideMessages
|
||||
|
||||
let avatarImg = ''
|
||||
let nameMenu = ''
|
||||
let levelFounder = ''
|
||||
let hideit = hidmes.includes(messageObj.sender)
|
||||
|
||||
if (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/${messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
|
||||
avatarImg = `<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/${messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`
|
||||
avatarImg = `<img src="${avatarUrl}" style="max-width:100%; max-height:100%;" onerror="this.onerror=null; this.src='/img/incognito.png';" />`
|
||||
}
|
||||
|
||||
if (messageObj.sender === this.myAddress) {
|
||||
nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}`
|
||||
nameMenu = `<mwc-icon class="iconsRight">more_horiz</mwc-icon>`
|
||||
} else {
|
||||
nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}"></name-menu>`
|
||||
nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}" messagesignatur="${messageObj.signature}"></name-menu>`
|
||||
}
|
||||
|
||||
levelFounder = `<level-founder checkleveladdress="${messageObj.sender}"></level-founder>`
|
||||
|
||||
return `
|
||||
<li class="clearfix">
|
||||
<div class="message-data ${messageObj.sender === this.myAddress ? "align-right" : ""}">
|
||||
<span class="message-data-name">${nameMenu}</span>
|
||||
<span class="message-data-level">${levelFounder}</span>
|
||||
<span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span>
|
||||
<span class="hide float-right"><mwc-icon class="iconsRight padright5">add_reaction</mwc-icon><mwc-icon class="iconsRight padright5">reply</mwc-icon><mwc-icon class="iconsRight">more_horiz</mwc-icon></span>
|
||||
</div>
|
||||
<div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.myAddress ? "float:right;" : "float:left;"} margin:3px;">${avatarImg}</div>
|
||||
<div id="messageContent" class="message ${messageObj.sender === this.myAddress ? "my-message float-right" : "other-message float-left"}">${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}</div>
|
||||
</li>
|
||||
`
|
||||
if ( hideit === true ) {
|
||||
return `
|
||||
<li class="clearfix"></li>
|
||||
`
|
||||
} else {
|
||||
return `
|
||||
<li class="clearfix">
|
||||
<div class="message-data ${messageObj.sender === this.myAddress ? "" : ""}">
|
||||
<span class="message-data-name" style="${messageObj.sender === this.myAddress ? "color: #03a9f4;" : "color: var(--black);"}">${messageObj.senderName ? messageObj.senderName : messageObj.sender}</span>
|
||||
<span class="message-data-level">${levelFounder}</span>
|
||||
<span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span>
|
||||
<span class="hide float-right">${nameMenu}</span>
|
||||
</div>
|
||||
<div class="message-data-avatar" style="width: 42px; height: 42px; ${messageObj.sender === this.myAddress ? "float:left;" : "float:left;"} margin: 3px;">${avatarImg}</div>
|
||||
<div id="messageContent" class="message ${messageObj.sender === this.myAddress ? "my-message float-left" : "other-message float-left"}">${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}</div>
|
||||
<div class="message-data-react"></div>
|
||||
</li>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
renderChatMessages(messages) {
|
||||
messages.forEach(message => {
|
||||
const li = document.createElement('li');
|
||||
li.innerHTML = this.chatMessageTemplate(message);
|
||||
const li = document.createElement('li')
|
||||
li.innerHTML = this.chatMessageTemplate(message)
|
||||
li.id = message.signature;
|
||||
this.downObserverElement.before(li);
|
||||
});
|
||||
this.downObserverElement.before(li)
|
||||
})
|
||||
}
|
||||
|
||||
renderOldMessages(listOfOldMessages) {
|
||||
let { oldMessages, scrollElement } = listOfOldMessages;
|
||||
|
||||
let _oldMessages = oldMessages.reverse();
|
||||
let { oldMessages, scrollElement } = listOfOldMessages
|
||||
let _oldMessages = oldMessages.reverse()
|
||||
_oldMessages.forEach(oldMessage => {
|
||||
const li = document.createElement('li');
|
||||
li.innerHTML = this.chatMessageTemplate(oldMessage);
|
||||
li.id = oldMessage.signature;
|
||||
this.upObserverElement.after(li);
|
||||
scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
|
||||
});
|
||||
const li = document.createElement('li')
|
||||
li.innerHTML = this.chatMessageTemplate(oldMessage)
|
||||
li.id = oldMessage.signature
|
||||
this.upObserverElement.after(li)
|
||||
scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' })
|
||||
})
|
||||
}
|
||||
|
||||
_getOldMessage(_scrollElement) {
|
||||
let listOfOldMessages = this.getOldMessage(_scrollElement)
|
||||
|
||||
if (listOfOldMessages) {
|
||||
this.renderOldMessages(listOfOldMessages)
|
||||
}
|
||||
@ -295,7 +325,6 @@ class ChatScroller extends LitElement {
|
||||
_upObserverhandler(entries) {
|
||||
if (entries[0].isIntersecting) {
|
||||
let _scrollElement = entries[0].target.nextElementSibling
|
||||
|
||||
this._getOldMessage(_scrollElement)
|
||||
}
|
||||
}
|
||||
@ -305,11 +334,16 @@ class ChatScroller extends LitElement {
|
||||
root: this.viewElement,
|
||||
rootMargin: '0px',
|
||||
threshold: 1
|
||||
};
|
||||
|
||||
}
|
||||
const observer = new IntersectionObserver(this._upObserverhandler, options)
|
||||
observer.observe(this.upObserverElement)
|
||||
}
|
||||
|
||||
getApiKey() {
|
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
|
||||
let apiKey = myNode.apiKey
|
||||
return apiKey
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('chat-scroller', ChatScroller)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user