AlphaX
/
qortal-ui
forked from Qortal/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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.
Simplifying-installation-and-linkage
AlphaX-Projects 2 years ago
parent
4e71765cbb
commit
8b22b603b2
7 changed files with 105 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 4
      qortal-ui-core/package.json
  3. 2
      qortal-ui-plugins/package.json
  4. 64
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  5. 105
      qortal-ui-plugins/plugins/core/components/ChatScroller.js
  6. 26
      qortal-ui-plugins/plugins/core/components/NameMenu.js
  7. 27
      qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js

2
package.json
Unescape View File

@ -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",

4
qortal-ui-core/package.json
Unescape View File

@ -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",

2
qortal-ui-plugins/package.json
Unescape View File

@ -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"

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

@ -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,28 +357,28 @@ class ChatPage extends LitElement {
* @property sender and other info..
*/
chatMessageTemplate(messageObj) {
let avatarImg = '';
let nameMenu = '';
let levelFounder = '';
const hidemsg = this.hideMessages
let avatarImg = ''
let nameMenu = ''
let levelFounder = ''
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];
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 = `<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>`
const hidmes = this.hideMessages
let hideit = hidmes.includes(messageObj.sender)
if ( hideit === true ) {
return `
<li class="clearfix"></li>
@ -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)

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

@ -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)

26
qortal-ui-plugins/plugins/core/components/NameMenu.js
Unescape View File

@ -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()

27
qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
Unescape View File

@ -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")

Write Preview
Loading…
Cancel
Save