Update Q-Chat

Messages from blocked users no more display. Reload message list after block or unblock a user. Revert 3 dot menu , gives error for emoji.
2025-02-11 17:55:51 +00:00 · 2022-06-10 10:54:38 +02:00 · 2022-06-10 10:54:38 +02:00 · 8b22b603b2
commit 8b22b603b2
parent 4e71765cbb
7 changed files with 108 additions and 128 deletions
--- 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",
--- 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",
--- 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"
--- 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 = `<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 = `<mwc-icon class="iconsRight">more_horiz</mwc-icon>`
-        } else {
-            nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}" messagesignatur="${messageObj.signature}"></name-menu>`
-        }
+        let avatarImg = ''
+        let nameMenu = ''
+        let levelFounder = ''
+        let hideit = hidemsg.includes(messageObj.sender)

        levelFounder = `<level-founder checkleveladdress="${messageObj.sender}"></level-founder>`

-        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 = `<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 = `<span style="color: #03a9f4;">${messageObj.senderName ? messageObj.senderName : messageObj.sender}</span>`
+        } else {
+            nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}"></name-menu>`
+        }

        if ( hideit === true ) {
            return `
@ -391,15 +386,13 @@ class ChatPage extends LitElement {
        } 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>
+                    <div class="message-data ${messageObj.sender === this.selectedAddress.address ? "" : ""}">
+                        <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">${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>
+                    <div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.selectedAddress.address ? "float:left;" : "float:left;"} margin:3px;">${avatarImg}</div>
+                    <div class="message ${messageObj.sender === this.selectedAddress.address ? "my-message float-left" : "other-message float-left"}">${this.emojiPicker.parse(escape(messageObj.decodedMessage))}</div>
                </li>
            `
        }
@ -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)
--- 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 = `<level-founder checkleveladdress="${messageObj.sender}"></level-founder>`

        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 = `<mwc-icon class="iconsRight">more_horiz</mwc-icon>`
+            nameMenu = `<span style="color: #03a9f4;">${messageObj.senderName ? messageObj.senderName : messageObj.sender}</span>`
        } else {
-            nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}" messagesignatur="${messageObj.signature}"></name-menu>`
+            nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}"></name-menu>`
        }

-        levelFounder = `<level-founder checkleveladdress="${messageObj.sender}"></level-founder>`
-
        if ( hideit === true ) {
            return `
                <li class="clearfix"></li>
@ -281,14 +248,12 @@ class ChatScroller extends LitElement {
            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-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">${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 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>
            `
        }
@ -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)
--- 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`
            <div class="dropdown">
-                <a class="block" id="myNameMenu" href="#" @click="${() => this.myMenu()}"><mwc-icon class="iconsRight">more_horiz</mwc-icon></a>
-                <paper-tooltip class="custom" for="myNameMenu" position="top">${translate("blockpage.bcchange7")}</paper-tooltip>
+                <a class="block" id="myNameMenu" href="#" @click="${() => this.myMenu()}">${this.nametodialog}</a>
+                <paper-tooltip class="custom" for="myNameMenu" position="right">${translate("blockpage.bcchange7")}</paper-tooltip>
                <div id="myDropdown" class="dropdown-content">
                    <span>${this.nametodialog}</span>
                    <hr style="color: var(--nav-text-color); border-radius: 90%;">
@ -361,6 +350,12 @@ class NameMenu extends LitElement {
        }
    }

+    relMessages() {
+        setTimeout(() => {
+            window.location.href = window.location.href.split( '#' )[0]
+        }, 500)
+    }
+
    async getChatBlockedAdresses() {
        const chatBlockedAdresses = await parentEpml.request('apiCall', {
            url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}`
@ -397,6 +392,7 @@ class NameMenu extends LitElement {
                labelText: `${err1string}`,
                dismiss: true
            })
+            this.relMessages()
        } else {
            this.closeMenu()
            this.shadowRoot.querySelector('#blockNameDialog').close()
--- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
+++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
@ -420,6 +420,7 @@ class Chat extends LitElement {
        this.changeLanguage()
        this.changeTheme()
        this.getChatBlockedList()
+        this.getLocalBlockedList()

        setInterval(() => {
            this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]")
@ -549,6 +550,31 @@ class Chat extends LitElement {
        return html`${translate("chatpage.cchange9")}`
    }

+    relMessages() {
+        setTimeout(() => {
+            window.location.href = window.location.href.split( '#' )[0]
+        }, 500)
+    }
+
+    getLocalBlockedList() {
+        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 blockedAddressesUrl = `${nodeUrl}/lists/blockedAddresses?apiKey=${this.getApiKey()}`
+
+        localStorage.removeItem("MessageBlockedAddresses")
+
+        var hidelist = []
+
+        fetch(blockedAddressesUrl).then(response => {
+            return response.json()
+        }).then(data => {
+            data.map(item => {
+                hidelist.push(item)
+            })
+            localStorage.setItem("MessageBlockedAddresses", JSON.stringify(hidelist))
+        })
+    }
+
    getChatBlockedList() {
        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
        const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
@ -610,6 +636,7 @@ class Chat extends LitElement {
                labelText: `${err2string}`,
                dismiss: true
            })
+            this.relMessages()
        }
        else {
            let err3string = get("chatpage.cchange17")