Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-27 15:55:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
AlphaX-Projects 2022-06-07 20:42:28 +02:00
parent 919c5924a4
commit 4e71765cbb
2 changed files with 119 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -30,6 +30,7 @@ class ChatPage extends LitElement {
messages: { type: Array }, messages: { type: Array },
_messages: { type: Array }, _messages: { type: Array },
newMessages: { type: Array }, newMessages: { type: Array },
hideMessages: { type: Array },
chatId: { type: String }, chatId: { type: String },
myAddress: { type: String }, myAddress: { type: String },
isReceipient: { type: Boolean }, isReceipient: { type: Boolean },
@ -121,6 +122,7 @@ class ChatPage extends LitElement {
this.messages = [] this.messages = []
this._messages = [] this._messages = []
this.newMessages = [] this.newMessages = []
this.hideMessages = []
this._publicKey = { key: '', hasPubKey: false } this._publicKey = { key: '', hasPubKey: false }
this.messageSignature = '' this.messageSignature = ''
this._initialMessages = [] this._initialMessages = []
@ -246,11 +248,16 @@ class ChatPage extends LitElement {
}).then(res => { }).then(res => {
this.balance = 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) res = JSON.parse(res)
if (res.isOpen === false && this.isPasteMenuOpen === true) { if (res.isOpen === false && this.isPasteMenuOpen === true) {
this.pasteToTextBox(textarea) this.pasteToTextBox(textarea)
this.isPasteMenuOpen = false this.isPasteMenuOpen = false
} }
@ -320,7 +327,7 @@ class ChatPage extends LitElement {
} }
// TODO: Determine number of initial messages by screen height... // 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 this.isLoadingMessages = false
setTimeout(() => this.downElementObserver(), 500) setTimeout(() => this.downElementObserver(), 500)
@ -367,25 +374,35 @@ class ChatPage extends LitElement {
} }
if (messageObj.sender === this.myAddress) { if (messageObj.sender === this.myAddress) {
nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}` nameMenu = `<mwc-icon class="iconsRight">more_horiz</mwc-icon>`
} else { } 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>` levelFounder = `<level-founder checkleveladdress="${messageObj.sender}"></level-founder>`
return ` const hidmes = this.hideMessages
<li class="clearfix"> let hideit = hidmes.includes(messageObj.sender)
<div class="message-data ${messageObj.sender === this.selectedAddress.address ? "align-right" : ""}">
<span class="message-data-name">${nameMenu}</span> if ( hideit === true ) {
<span class="message-data-level">${levelFounder}</span> return `
<span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span> <li class="clearfix"></li>
<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> } else {
<div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.selectedAddress.address ? "float:right;" : "float:left;"} margin:3px;">${avatarImg}</div> return `
<div class="message ${messageObj.sender === this.selectedAddress.address ? "my-message float-right" : "other-message float-left"}">${this.emojiPicker.parse(escape(messageObj.decodedMessage))}</div> <li class="clearfix">
</li> <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) { renderNewMessage(newMessage) {
@ -422,29 +439,22 @@ class ChatPage extends LitElement {
if (this.isReceipient === true) { if (this.isReceipient === true) {
// direct chat // direct chat
if (encodedMessageObj.isEncrypted === true && this._publicKey.hasPubKey === true) { 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) let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, this._publicKey.key, encodedMessageObj.reference)
decodedMessageObj = { ...encodedMessageObj, decodedMessage } decodedMessageObj = { ...encodedMessageObj, decodedMessage }
} else if (encodedMessageObj.isEncrypted === false) { } else if (encodedMessageObj.isEncrypted === false) {
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) let bytesArray = window.parent.Base58.decode(encodedMessageObj.data)
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) let decodedMessage = new TextDecoder('utf-8').decode(bytesArray)
decodedMessageObj = { ...encodedMessageObj, decodedMessage } decodedMessageObj = { ...encodedMessageObj, decodedMessage }
} else { } else {
decodedMessageObj = { ...encodedMessageObj, decodedMessage: "Cannot Decrypt Message!" } decodedMessageObj = { ...encodedMessageObj, decodedMessage: "Cannot Decrypt Message!" }
} }
} else { } else {
// group chat // group chat
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) let bytesArray = window.parent.Base58.decode(encodedMessageObj.data)
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) let decodedMessage = new TextDecoder('utf-8').decode(bytesArray)
decodedMessageObj = { ...encodedMessageObj, decodedMessage } decodedMessageObj = { ...encodedMessageObj, decodedMessage }
} }
return decodedMessageObj return decodedMessageObj
} }
@ -1027,6 +1037,12 @@ class ChatPage extends LitElement {
}; };
this.chatEditor = new ChatEditor(editorConfig); 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) window.customElements.define('chat-page', ChatPage)

124
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -18,8 +18,9 @@ class ChatScroller extends LitElement {
getOldMessage: { attribute: false }, getOldMessage: { attribute: false },
emojiPicker: { attribute: false }, emojiPicker: { attribute: false },
escapeHTML: { attribute: false }, escapeHTML: { attribute: false },
initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props ) initialMessages: { type: Array },
messages: { type: Array } messages: { type: Array },
hideMessages: { type: Array }
} }
} }
@ -69,9 +70,9 @@ class ChatScroller extends LitElement {
} }
.message-data { .message-data {
width: 90%; width: 92%;
background: transparent;
margin-bottom: 15px; margin-bottom: 15px;
margin-left: 50px;
} }
.message-data:hover .hide { .message-data:hover .hide {
@ -80,7 +81,6 @@ class ChatScroller extends LitElement {
} }
.message-data-name { .message-data-name {
color: var(--black);
cursor: pointer; cursor: pointer;
} }
@ -98,6 +98,14 @@ class ChatScroller extends LitElement {
padding-bottom: 4px; padding-bottom: 4px;
} }
.message-data-react {
margin-left: 50px;
}
.message-data-react-item {
padding-left: 6px;
}
.message { .message {
color: black; color: black;
padding: 12px 10px; padding: 12px 10px;
@ -140,8 +148,13 @@ class ChatScroller extends LitElement {
} }
.my-message { .my-message {
background: #ddd; background: #d1d1d1;
border: 2px #ccc solid; border: 2px solid #cecece;
}
.my-message:after {
border-bottom-color: #d1d1d1;
left: 7%;
} }
.other-message { .other-message {
@ -201,6 +214,7 @@ class ChatScroller extends LitElement {
constructor() { constructor() {
super() super()
this.messages = [] this.messages = []
this.hideMessages = []
this._upObserverhandler = this._upObserverhandler.bind(this) this._upObserverhandler = this._upObserverhandler.bind(this)
this.isLoading = false this.isLoading = false
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
@ -217,6 +231,7 @@ class ChatScroller extends LitElement {
} }
firstUpdated() { firstUpdated() {
this.getHideMessages()
this.viewElement = this.shadowRoot.getElementById('viewElement') this.viewElement = this.shadowRoot.getElementById('viewElement')
this.upObserverElement = this.shadowRoot.getElementById('upObserver') this.upObserverElement = this.shadowRoot.getElementById('upObserver')
this.downObserverElement = this.shadowRoot.getElementById('downObserver') this.downObserverElement = this.shadowRoot.getElementById('downObserver')
@ -228,65 +243,80 @@ class ChatScroller extends LitElement {
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50 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) { chatMessageTemplate(messageObj) {
let avatarImg = ''; const hidmes = this.hideMessages
let nameMenu = '';
let levelFounder = ''; let avatarImg = ''
let nameMenu = ''
let levelFounder = ''
let hideit = hidmes.includes(messageObj.sender)
if (messageObj.senderName) { if (messageObj.senderName) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; 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 nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`; 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';" />`; 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) { if (messageObj.sender === this.myAddress) {
nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}` nameMenu = `<mwc-icon class="iconsRight">more_horiz</mwc-icon>`
} else { } 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>` levelFounder = `<level-founder checkleveladdress="${messageObj.sender}"></level-founder>`
return ` if ( hideit === true ) {
<li class="clearfix"> return `
<div class="message-data ${messageObj.sender === this.myAddress ? "align-right" : ""}"> <li class="clearfix"></li>
<span class="message-data-name">${nameMenu}</span> `
<span class="message-data-level">${levelFounder}</span> } else {
<span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span> return `
<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> <li class="clearfix">
</div> <div class="message-data ${messageObj.sender === this.myAddress ? "" : ""}">
<div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.myAddress ? "float:right;" : "float:left;"} margin:3px;">${avatarImg}</div> <span class="message-data-name" style="${messageObj.sender === this.myAddress ? "color: #03a9f4;" : "color: var(--black);"}">${messageObj.senderName ? messageObj.senderName : messageObj.sender}</span>
<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> <span class="message-data-level">${levelFounder}</span>
</li> <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) { renderChatMessages(messages) {
messages.forEach(message => { messages.forEach(message => {
const li = document.createElement('li'); const li = document.createElement('li')
li.innerHTML = this.chatMessageTemplate(message); li.innerHTML = this.chatMessageTemplate(message)
li.id = message.signature; li.id = message.signature;
this.downObserverElement.before(li); this.downObserverElement.before(li)
}); })
} }
renderOldMessages(listOfOldMessages) { renderOldMessages(listOfOldMessages) {
let { oldMessages, scrollElement } = listOfOldMessages; let { oldMessages, scrollElement } = listOfOldMessages
let _oldMessages = oldMessages.reverse()
let _oldMessages = oldMessages.reverse();
_oldMessages.forEach(oldMessage => { _oldMessages.forEach(oldMessage => {
const li = document.createElement('li'); const li = document.createElement('li')
li.innerHTML = this.chatMessageTemplate(oldMessage); li.innerHTML = this.chatMessageTemplate(oldMessage)
li.id = oldMessage.signature; li.id = oldMessage.signature
this.upObserverElement.after(li); this.upObserverElement.after(li)
scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' }); scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' })
}); })
} }
_getOldMessage(_scrollElement) { _getOldMessage(_scrollElement) {
let listOfOldMessages = this.getOldMessage(_scrollElement) let listOfOldMessages = this.getOldMessage(_scrollElement)
if (listOfOldMessages) { if (listOfOldMessages) {
this.renderOldMessages(listOfOldMessages) this.renderOldMessages(listOfOldMessages)
} }
@ -295,7 +325,6 @@ class ChatScroller extends LitElement {
_upObserverhandler(entries) { _upObserverhandler(entries) {
if (entries[0].isIntersecting) { if (entries[0].isIntersecting) {
let _scrollElement = entries[0].target.nextElementSibling let _scrollElement = entries[0].target.nextElementSibling
this._getOldMessage(_scrollElement) this._getOldMessage(_scrollElement)
} }
} }
@ -305,11 +334,16 @@ class ChatScroller extends LitElement {
root: this.viewElement, root: this.viewElement,
rootMargin: '0px', rootMargin: '0px',
threshold: 1 threshold: 1
}; }
const observer = new IntersectionObserver(this._upObserverhandler, options) const observer = new IntersectionObserver(this._upObserverhandler, options)
observer.observe(this.upObserverElement) 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) window.customElements.define('chat-scroller', ChatScroller)