forked from Qortal/qortal-ui
fix reply if not in message array
This commit is contained in:
parent
37ae289466
commit
0a16625ca6
@ -28,6 +28,7 @@ html {
|
||||
--relaynodetxt: #646464;
|
||||
--menuhover: #eeeeee;
|
||||
--menuactive: #ebebeb;
|
||||
--menuactivergb: 235, 235, 235;
|
||||
--mainmenutext: #080808;
|
||||
--mainmenutexthover: #080808;
|
||||
--switchbackground: #666666;
|
||||
@ -82,6 +83,7 @@ html[theme="dark"] {
|
||||
--relaynodetxt: #d4d4d4;
|
||||
--menuhover: #008fd5;
|
||||
--menuactive: #008fd5;
|
||||
--menuactivergb: 0, 143, 213;
|
||||
--mainmenutext: #008fd5;
|
||||
--mainmenutexthover: #0f1a2e;
|
||||
--switchbackground: #eeeeee;
|
||||
|
||||
@ -571,7 +571,8 @@
|
||||
"cchange62": "Wrong Username and Address Inputted! Please try again!",
|
||||
"cchange63": "Enter Enabled",
|
||||
"cchange64": "Enter Disabled",
|
||||
"cchange65": "Please enter a recipient"
|
||||
"cchange65": "Please enter a recipient",
|
||||
"cchange66": "Cannot fetch replied-to message. Message is too old."
|
||||
|
||||
},
|
||||
"welcomepage": {
|
||||
|
||||
@ -102,7 +102,8 @@ class ChatPage extends LitElement {
|
||||
openTipUser: { type: Boolean },
|
||||
openUserInfo: { type: Boolean },
|
||||
selectedHead: { type: Object },
|
||||
userName: { type: String }
|
||||
userName: { type: String },
|
||||
goToRepliedMessage: {attribute: false}
|
||||
}
|
||||
}
|
||||
|
||||
@ -906,7 +907,6 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
setUserName(props) {
|
||||
console.log({props})
|
||||
this.userName = props.senderName ? props.senderName : props.sender;
|
||||
this.setSelectedHead(props);
|
||||
}
|
||||
@ -925,7 +925,6 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.userName, "username here");
|
||||
return html`
|
||||
<div class="main-container">
|
||||
<div
|
||||
@ -1434,6 +1433,49 @@ class ChatPage extends LitElement {
|
||||
|
||||
}
|
||||
|
||||
async goToRepliedMessage(message){
|
||||
const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.reference)
|
||||
if(findMessage){
|
||||
findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
const findElement = findMessage.shadowRoot.querySelector('.message-parent')
|
||||
if(findElement){
|
||||
findElement.classList.add('blink-bg')
|
||||
setTimeout(()=> {
|
||||
findElement.classList.remove('blink-bg')
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
if((message.timestamp - this.messagesRendered[0].timestamp) > 86400000){
|
||||
let errorMsg = get("chatpage.cchange66")
|
||||
parentEpml.request('showSnackBar', `${errorMsg}`)
|
||||
return
|
||||
}
|
||||
|
||||
if((message.timestamp - this.messagesRendered[0].timestamp) < 86400000){
|
||||
await this.getOldMessageDynamic(0, this.messagesRendered[0].timestamp, message.timestamp - 7200000)
|
||||
const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.reference)
|
||||
if(findMessage){
|
||||
findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
const findElement = findMessage.shadowRoot.querySelector('.message-parent')
|
||||
if(findElement){
|
||||
findElement.classList.add('blink-bg')
|
||||
setTimeout(()=> {
|
||||
findElement.classList.remove('blink-bg')
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
let errorMsg = get("chatpage.cchange66")
|
||||
parentEpml.request('showSnackBar', `${errorMsg}`)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async userSearch() {
|
||||
const nameValue = this.shadowRoot.getElementById('sendTo').value;
|
||||
if (!nameValue) {
|
||||
@ -1616,7 +1658,6 @@ class ChatPage extends LitElement {
|
||||
this.groupAdmin = membersAdminsWithName
|
||||
this.groupMembers = membersWithName
|
||||
this.groupInfo = getGroupInfo
|
||||
console.log({membersAdminsWithName})
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
@ -1749,6 +1790,8 @@ class ChatPage extends LitElement {
|
||||
.setSelectedHead=${(val) => this.setSelectedHead(val)}
|
||||
?openTipUser=${this.openTipUser}
|
||||
.selectedHead=${this.selectedHead}
|
||||
.goToRepliedMessage=${(val)=> this.goToRepliedMessage(val)}
|
||||
.getOldMessageAfter=${(val)=> this.getOldMessageAfter(val)}
|
||||
>
|
||||
</chat-scroller>
|
||||
`
|
||||
@ -1782,6 +1825,81 @@ class ChatPage extends LitElement {
|
||||
})
|
||||
}
|
||||
|
||||
async getOldMessageDynamic(limit, before, after) {
|
||||
|
||||
if (this.isReceipient) {
|
||||
const getInitialMessages = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=${limit}&reverse=true&before=${before}&after=${after}&haschatreference=false`,
|
||||
});
|
||||
|
||||
const decodeMsgs = getInitialMessages.map((eachMessage) => {
|
||||
return this.decodeMessage(eachMessage)
|
||||
})
|
||||
|
||||
|
||||
const replacedMessages = await replaceMessagesEdited({
|
||||
decodedMessages: decodeMsgs,
|
||||
parentEpml,
|
||||
isReceipient: this.isReceipient,
|
||||
decodeMessageFunc: this.decodeMessage,
|
||||
_publicKey: this._publicKey
|
||||
})
|
||||
this.messagesRendered = [...replacedMessages, ...this.messagesRendered].sort(function (a, b) {
|
||||
return a.timestamp
|
||||
- b.timestamp
|
||||
})
|
||||
this.isLoadingOldMessages = false
|
||||
await this.getUpdateComplete();
|
||||
const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
|
||||
|
||||
if(viewElement){
|
||||
viewElement.scrollTop = 200
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
const getInitialMessages = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=${limit}&reverse=true&before=${before}&after=${after}&haschatreference=false`,
|
||||
});
|
||||
|
||||
|
||||
const decodeMsgs = getInitialMessages.map((eachMessage) => {
|
||||
return this.decodeMessage(eachMessage)
|
||||
})
|
||||
|
||||
const replacedMessages = await replaceMessagesEdited({
|
||||
decodedMessages: decodeMsgs,
|
||||
parentEpml,
|
||||
isReceipient: this.isReceipient,
|
||||
decodeMessageFunc: this.decodeMessage,
|
||||
_publicKey: this._publicKey
|
||||
})
|
||||
|
||||
this.messagesRendered = [...replacedMessages, ...this.messagesRendered].sort(function (a, b) {
|
||||
return a.timestamp
|
||||
- b.timestamp
|
||||
})
|
||||
this.isLoadingOldMessages = false
|
||||
await this.getUpdateComplete();
|
||||
const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
|
||||
|
||||
if(viewElement){
|
||||
viewElement.scrollTop = 200
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async getOldMessage(scrollElement) {
|
||||
|
||||
if (this.isReceipient) {
|
||||
@ -1853,6 +1971,77 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
async getOldMessageAfter(scrollElement) {
|
||||
|
||||
if (this.isReceipient) {
|
||||
const getInitialMessages = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=20&reverse=true&afer=${scrollElement.messageObj.timestamp}&haschatreference=false`,
|
||||
});
|
||||
|
||||
const decodeMsgs = getInitialMessages.map((eachMessage) => {
|
||||
return this.decodeMessage(eachMessage)
|
||||
})
|
||||
|
||||
|
||||
const replacedMessages = await replaceMessagesEdited({
|
||||
decodedMessages: decodeMsgs,
|
||||
parentEpml,
|
||||
isReceipient: this.isReceipient,
|
||||
decodeMessageFunc: this.decodeMessage,
|
||||
_publicKey: this._publicKey
|
||||
})
|
||||
this.messagesRendered = [...this.messagesRendered, ...replacedMessages].sort(function (a, b) {
|
||||
return a.timestamp
|
||||
- b.timestamp
|
||||
})
|
||||
this.isLoadingOldMessages = false
|
||||
await this.getUpdateComplete();
|
||||
const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'));
|
||||
|
||||
const findElement = marginElements.find((item)=> item.messageObj.reference === scrollElement.messageObj.reference)
|
||||
|
||||
if(findElement){
|
||||
findElement.scrollIntoView({ behavior: 'auto', block: 'center' });
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
const getInitialMessages = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=20&reverse=true&after=${scrollElement.messageObj.timestamp}&haschatreference=false`,
|
||||
});
|
||||
|
||||
|
||||
const decodeMsgs = getInitialMessages.map((eachMessage) => {
|
||||
return this.decodeMessage(eachMessage)
|
||||
})
|
||||
|
||||
const replacedMessages = await replaceMessagesEdited({
|
||||
decodedMessages: decodeMsgs,
|
||||
parentEpml,
|
||||
isReceipient: this.isReceipient,
|
||||
decodeMessageFunc: this.decodeMessage,
|
||||
_publicKey: this._publicKey
|
||||
})
|
||||
|
||||
this.messagesRendered = [ ...this.messagesRendered, ...replacedMessages].sort(function (a, b) {
|
||||
return a.timestamp
|
||||
- b.timestamp
|
||||
})
|
||||
this.isLoadingOldMessages = false
|
||||
await this.getUpdateComplete();
|
||||
const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'));
|
||||
const findElement = marginElements.find((item)=> item.messageObj.reference === scrollElement.messageObj.reference)
|
||||
|
||||
if(findElement){
|
||||
findElement.scrollIntoView({ behavior: 'auto', block: 'center' });
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
async processMessages(messages, isInitial) {
|
||||
const isReceipient = this.chatId.includes('direct')
|
||||
const decodedMessages = messages.map((eachMessage) => {
|
||||
@ -2002,7 +2191,6 @@ class ChatPage extends LitElement {
|
||||
let decodedMessageObj = {};
|
||||
|
||||
if (isReceipientVar === true) {
|
||||
console.log('encoded', encodedMessageObj.isEncrypted, _publicKeyVar.hasPubKey,encodedMessageObj.data)
|
||||
// direct chat
|
||||
if (encodedMessageObj.isEncrypted === true && _publicKeyVar.hasPubKey === true && encodedMessageObj.data) {
|
||||
let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, _publicKeyVar.key, encodedMessageObj.reference);
|
||||
@ -2653,7 +2841,6 @@ class ChatPage extends LitElement {
|
||||
type: 'api',
|
||||
url: `/names/${userInput}`
|
||||
});
|
||||
console.log({validatedAddress, validatedUsername })
|
||||
|
||||
if (validatedAddress && validatedUsername.name) {
|
||||
userPubkey = await parentEpml.request('apiCall', {
|
||||
|
||||
@ -172,6 +172,7 @@ export const chatStyles = css`
|
||||
border-radius: 5px;
|
||||
padding: 8px 5px 8px 25px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.original-message:before {
|
||||
@ -187,6 +188,7 @@ export const chatStyles = css`
|
||||
.original-message-sender {
|
||||
margin: 0 0 5px 0;
|
||||
color: var(--mdc-theme-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.replied-message {
|
||||
@ -640,4 +642,14 @@ export const chatStyles = css`
|
||||
border-top: 2px solid rgba(#0D0D0D, 0.1);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.blink-bg{
|
||||
border-radius: 8px;
|
||||
animation: blinkingBackground 3s;
|
||||
}
|
||||
@keyframes blinkingBackground{
|
||||
0% { background-color: rgba(var(--menuactivergb), 1)}
|
||||
|
||||
100% { background-color:rgba(var(--menuactivergb), 0)}
|
||||
}
|
||||
`
|
||||
|
||||
@ -50,7 +50,9 @@ class ChatScroller extends LitElement {
|
||||
openTipUser: { type: Boolean },
|
||||
openUserInfo: { type: Boolean },
|
||||
userName: { type: String },
|
||||
selectedHead: { type: Object }
|
||||
selectedHead: { type: Object },
|
||||
goToRepliedMessage: { attribute: false },
|
||||
getOldMessageAfter: {attribute: false}
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,6 +103,7 @@ class ChatScroller extends LitElement {
|
||||
}
|
||||
return messageArray;
|
||||
}, [])
|
||||
|
||||
|
||||
return html`
|
||||
${this.isLoadingMessages ? html`
|
||||
@ -132,7 +135,10 @@ class ChatScroller extends LitElement {
|
||||
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
|
||||
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
|
||||
.setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
|
||||
.setUserName=${(val) => this.setUserName(val)}>
|
||||
.setUserName=${(val) => this.setUserName(val)}
|
||||
id=${message.reference}
|
||||
.goToRepliedMessage=${this.goToRepliedMessage}
|
||||
>
|
||||
</message-template>`
|
||||
)
|
||||
})}
|
||||
@ -195,6 +201,10 @@ class ChatScroller extends LitElement {
|
||||
this.getOldMessage(_scrollElement)
|
||||
}
|
||||
|
||||
_getOldMessageAfter(_scrollElement) {
|
||||
this.getOldMessageAfter(_scrollElement)
|
||||
}
|
||||
|
||||
_upObserverhandler(entries) {
|
||||
if (entries[0].isIntersecting) {
|
||||
if(this.messages.length < 20){
|
||||
@ -208,6 +218,8 @@ class ChatScroller extends LitElement {
|
||||
|
||||
_downObserverHandler(entries) {
|
||||
if (!entries[0].isIntersecting) {
|
||||
let _scrollElement = entries[0].target.previousElementSibling;
|
||||
// this._getOldMessageAfter(_scrollElement);
|
||||
this.showLastMessageRefScroller(true);
|
||||
} else {
|
||||
this.showLastMessageRefScroller(false);
|
||||
@ -270,7 +282,8 @@ class MessageTemplate extends LitElement {
|
||||
setOpenTipUser: { attribute: false },
|
||||
setOpenUserInfo: { attribute: false },
|
||||
setUserName: { attribute: false },
|
||||
openTipUser:{ type: Boolean }
|
||||
openTipUser:{ type: Boolean },
|
||||
goToRepliedMessage: { attribute: false },
|
||||
}
|
||||
}
|
||||
|
||||
@ -511,14 +524,13 @@ class MessageTemplate extends LitElement {
|
||||
) : null}
|
||||
</div>
|
||||
${repliedToData && html`
|
||||
<div class="original-message">
|
||||
<div class="original-message"
|
||||
@click=${()=> {
|
||||
this.goToRepliedMessage(repliedToData)
|
||||
}}>
|
||||
<p
|
||||
style=${this.myAddress === repliedToData.sender ? "cursor: auto;" : "cursor: pointer;"}
|
||||
@click=${() => {
|
||||
if (this.myAddress === repliedToData.sender) return;
|
||||
this.setOpenUserInfo(true);
|
||||
this.setUserName(repliedToData)
|
||||
}}
|
||||
|
||||
|
||||
class="original-message-sender">
|
||||
${repliedToData.senderName ?? cropAddress(repliedToData.sender)}
|
||||
</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user