From 4e71765cbbed25c19da4efc5216a0050264a1ebc Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Tue, 7 Jun 2022 20:42:28 +0200 Subject: [PATCH] WIP --- .../plugins/core/components/ChatPage.js | 64 +++++---- .../plugins/core/components/ChatScroller.js | 124 +++++++++++------- 2 files changed, 119 insertions(+), 69 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 15bd28a1..6ccf4753 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -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 = `more_horiz` } else { - nameMenu = `` + nameMenu = `` } levelFounder = `` - return ` -
  • -
    - ${nameMenu} - ${levelFounder} - - add_reactionreplymore_horiz -
    -
    ${avatarImg}
    -
    ${this.emojiPicker.parse(escape(messageObj.decodedMessage))}
    -
    • - ` + const hidmes = this.hideMessages + let hideit = hidmes.includes(messageObj.sender) + + if ( hideit === true ) { + return ` +
  • + ` + } else { + return ` +
  • +
    + ${messageObj.senderName ? messageObj.senderName : messageObj.sender} + ${levelFounder} + + ${nameMenu} +
    +
    ${avatarImg}
    +
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    +
    +
    • + ` + } } 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) diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 71871114..62984562 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -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 = ``; + 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 = `` } if (messageObj.sender === this.myAddress) { - nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}` + nameMenu = `more_horiz` } else { - nameMenu = `` + nameMenu = `` } levelFounder = `` - return ` -
  • -
    - ${nameMenu} - ${levelFounder} - - add_reactionreplymore_horiz -
    -
    ${avatarImg}
    -
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    -
    • - ` + if ( hideit === true ) { + return ` +
  • + ` + } else { + return ` +
  • +
    + ${messageObj.senderName ? messageObj.senderName : messageObj.sender} + ${levelFounder} + + ${nameMenu} +
    +
    ${avatarImg}
    +
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    +
    +
    • + ` + } } 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)