diff --git a/package.json b/package.json index fb902aa9..46ff65ad 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "electron-log": "4.4.7" }, "devDependencies": { - "electron": "17.4.7", + "electron": "19.0.4", "electron-builder": "23.0.3", "electron-notarize": "1.2.1", "electron-packager": "15.5.1", diff --git a/qortal-ui-core/package.json b/qortal-ui-core/package.json index e9a16d8b..5ce8830e 100644 --- a/qortal-ui-core/package.json +++ b/qortal-ui-core/package.json @@ -19,7 +19,7 @@ "dependencies": { "@hapi/hapi": "20.2.2", "@hapi/inert": "6.0.5", - "sass": "1.52.2" + "sass": "1.52.3" }, "devDependencies": { "@babel/core": "7.18.2", @@ -72,7 +72,7 @@ "random-sentence-generator": "0.0.8", "redux": "4.2.0", "redux-thunk": "2.4.1", - "rollup": "2.75.5", + "rollup": "2.75.6", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-postcss": "4.0.2", "rollup-plugin-progress": "1.1.2", diff --git a/qortal-ui-plugins/package.json b/qortal-ui-plugins/package.json index 0a067d30..44ed5491 100644 --- a/qortal-ui-plugins/package.json +++ b/qortal-ui-plugins/package.json @@ -53,7 +53,7 @@ "html-escaper": "3.0.3", "lit": "2.2.5", "lit-translate": "2.0.1", - "rollup": "2.75.5", + "rollup": "2.75.6", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-progress": "1.1.2", "rollup-plugin-terser": "7.0.2" diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 6ccf4753..b3424aa5 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -122,7 +122,7 @@ class ChatPage extends LitElement { this.messages = [] this._messages = [] this.newMessages = [] - this.hideMessages = [] + this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") this._publicKey = { key: '', hasPubKey: false } this.messageSignature = '' this._initialMessages = [] @@ -248,16 +248,11 @@ class ChatPage extends LitElement { }).then(res => { this.balance = 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 } @@ -327,7 +322,7 @@ class ChatPage extends LitElement { } // TODO: Determine number of initial messages by screen height... - this._messages.length <= 2 ? adjustMessages() : this._initialMessages = this._messages.splice(this._messages.length - 2); + this._messages.length <= 15 ? adjustMessages() : this._initialMessages = this._messages.splice(this._messages.length - 15); this.isLoadingMessages = false setTimeout(() => this.downElementObserver(), 500) @@ -362,27 +357,27 @@ class ChatPage extends LitElement { * @property sender and other info.. */ chatMessageTemplate(messageObj) { - let avatarImg = ''; - let nameMenu = ''; - let levelFounder = ''; + const hidemsg = this.hideMessages - 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 = ``; - } - - if (messageObj.sender === this.myAddress) { - nameMenu = `more_horiz` - } else { - nameMenu = `` - } + let avatarImg = '' + let nameMenu = '' + let levelFounder = '' + let hideit = hidemsg.includes(messageObj.sender) levelFounder = `` - const hidmes = this.hideMessages - 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 = `` + } + + if (messageObj.sender === this.myAddress) { + nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}` + } else { + nameMenu = `` + } if ( hideit === true ) { return ` @@ -391,15 +386,13 @@ class ChatPage extends LitElement { } else { return `
  • -
    - ${messageObj.senderName ? messageObj.senderName : messageObj.sender} +
    + ${nameMenu} ${levelFounder} - ${nameMenu}
    -
    ${avatarImg}
    -
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    -
    +
    ${avatarImg}
    +
    ${this.emojiPicker.parse(escape(messageObj.decodedMessage))}
  • ` } @@ -439,22 +432,29 @@ 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 } @@ -1037,12 +1037,6 @@ 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 62984562..b48ea99b 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -18,7 +18,7 @@ class ChatScroller extends LitElement { getOldMessage: { attribute: false }, emojiPicker: { attribute: false }, escapeHTML: { attribute: false }, - initialMessages: { type: Array }, + initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props ) messages: { type: Array }, hideMessages: { type: Array } } @@ -75,22 +75,11 @@ class ChatScroller extends LitElement { margin-left: 50px; } - .message-data:hover .hide { - color: #03a9f4; - display: inline; - } - .message-data-name { + color: var(--black); cursor: pointer; } - .message-data-level { - color: #03a9f4; - font-size: 13px; - padding-left: 8px; - padding-bottom: 4px; - } - .message-data-time { color: #a8aab1; font-size: 13px; @@ -98,12 +87,11 @@ class ChatScroller extends LitElement { padding-bottom: 4px; } - .message-data-react { - margin-left: 50px; - } - - .message-data-react-item { - padding-left: 6px; + .message-data-level { + color: #03a9f4; + font-size: 13px; + padding-left: 8px; + padding-bottom: 4px; } .message { @@ -149,7 +137,7 @@ class ChatScroller extends LitElement { .my-message { background: #d1d1d1; - border: 2px solid #cecece; + border: 2px solid #eeeeee; } .my-message:after { @@ -167,10 +155,6 @@ class ChatScroller extends LitElement { left: 7%; } - .hide { - display: none; - } - .align-left { text-align: left; } @@ -187,10 +171,6 @@ class ChatScroller extends LitElement { float: right; } - .padright5 { - padding-right: 5px; - } - .clearfix:after { visibility: hidden; display: block; @@ -203,21 +183,16 @@ class ChatScroller extends LitElement { img { border-radius: 25%; } - - .iconsRight { - color: #a8aab1; - --mdc-icon-size: 18px; - } ` } constructor() { super() this.messages = [] - this.hideMessages = [] this._upObserverhandler = this._upObserverhandler.bind(this) this.isLoading = false this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address + this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") } @@ -231,7 +206,6 @@ 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') @@ -243,20 +217,15 @@ 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) { - const hidmes = this.hideMessages + const hidemsg = this.hideMessages let avatarImg = '' let nameMenu = '' let levelFounder = '' - let hideit = hidmes.includes(messageObj.sender) + let hideit = hidemsg.includes(messageObj.sender) + + levelFounder = `` if (messageObj.senderName) { const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] @@ -266,13 +235,11 @@ class ChatScroller extends LitElement { } if (messageObj.sender === this.myAddress) { - nameMenu = `more_horiz` + nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}` } else { - nameMenu = `` + nameMenu = `` } - levelFounder = `` - if ( hideit === true ) { return `
  • @@ -281,14 +248,12 @@ class ChatScroller extends LitElement { return `
  • - ${messageObj.senderName ? messageObj.senderName : messageObj.sender} + ${nameMenu} ${levelFounder} - ${nameMenu}
    -
    ${avatarImg}
    +
    ${avatarImg}
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    -
  • ` } @@ -296,27 +261,29 @@ class ChatScroller extends LitElement { 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) } @@ -325,6 +292,7 @@ class ChatScroller extends LitElement { _upObserverhandler(entries) { if (entries[0].isIntersecting) { let _scrollElement = entries[0].target.nextElementSibling + this._getOldMessage(_scrollElement) } } @@ -334,16 +302,11 @@ 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) diff --git a/qortal-ui-plugins/plugins/core/components/NameMenu.js b/qortal-ui-plugins/plugins/core/components/NameMenu.js index 4f2bb65b..79ae1826 100644 --- a/qortal-ui-plugins/plugins/core/components/NameMenu.js +++ b/qortal-ui-plugins/plugins/core/components/NameMenu.js @@ -22,7 +22,6 @@ class NameMenu extends LitElement { return { toblockaddress: { type: String, attribute: true }, nametodialog: { type: String, attribute: true }, - messagesignatur: { type: String, attribute: true }, chatBlockedAdresses: { type: Array }, selectedAddress: { type: Object }, config: { type: Object }, @@ -118,9 +117,8 @@ class NameMenu extends LitElement { .dropdown-content { display: none; position: absolute; - bottom: -75px; - right: 25px; - text-align: center; + bottom: 25px; + left: 10px; background-color: var(--white); min-width: 200px; overflow: auto; @@ -174,15 +172,6 @@ class NameMenu extends LitElement { resize: none; background: #eee; } - - .iconsRight { - color: #a8aab1; - --mdc-icon-size: 18px; - } - - .padright5 { - padding-right: 5px; - } ` } @@ -200,8 +189,8 @@ class NameMenu extends LitElement { render() { return html`