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

Merge branch 'feature/implement-logic-edit-reply-messages' of https://github.com/PhillipLangMartinez/qortal-ui into feature/implement-UI-edit-reply-messages

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-30 14:19:50 -05:00
commit 5c292292ea
6 changed files with 98 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
qortal-ui-core/language/us.json
View File

@ -485,7 +485,7 @@
"cchange23": "Cannot Decrypt Message!",
"cchange24": "Maximum Characters per message is 255",
"cchange25": "Edit Message",
"cchange26": "File size exceeds 5 MB",
"cchange26": "File size exceeds 0.5 MB",
"cchange27": "A registered name is required to send images",
"cchange28": "This file is not an image",
"cchange29": "Maximum message size is 1000 bytes",

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

@ -24,6 +24,7 @@ import { replaceMessagesEdited } from '../../utils/replace-messages-edited.js';
import { publishData } from '../../utils/publish-image.js';
import WebWorker from 'web-worker:./computePowWorker.js';
import WebWorkerImage from 'web-worker:./computePowWorkerImage.js';
import { EmojiPicker } from 'emoji-picker-js';
// const messagesCache = localForage.createInstance({
@ -66,6 +67,7 @@ class ChatPage extends LitElement {
chatEditorNewChat: { type: Object },
userLanguage: { type: String },
lastMessageRefVisible: { type: Boolean },
isLoadingOldMessages: {type: Boolean}
}
}
@ -550,6 +552,15 @@ class ChatPage extends LitElement {
this.uid = new ShortUniqueId()
this.userLanguage = ""
this.lastMessageRefVisible = false
this.emojiPicker = new EmojiPicker({
style: "twemoji",
twemojiBaseUrl: '/emoji/',
showPreview: false,
showVariants: false,
showAnimation: false,
position: 'top-start',
boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
});
}
render() {
@ -853,11 +864,16 @@ class ChatPage extends LitElement {
.focusChatEditor=${() => this.focusChatEditor()}
.sendMessage=${(val) => this._sendMessage(val)}
.showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
.emojiPicker=${this.emojiPicker}
?isLoadingMessages=${this.isLoadingOldMessages}
.setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
>
</chat-scroller>
`
}
setIsLoadingMessages(val){
this.isLoadingOldMessages = val
}
async getUpdateComplete() {
await super.getUpdateComplete();
const marginElements = Array.from(this.shadowRoot.querySelectorAll('chat-scroller'));
@ -866,7 +882,7 @@ class ChatPage extends LitElement {
}
async getOldMessage(scrollElement) {
if (this.isReceipient) {
const getInitialMessages = await parentEpml.request('apiCall', {
type: 'api',
@ -889,10 +905,17 @@ class ChatPage extends LitElement {
return a.timestamp
- b.timestamp
})
this.isLoadingOldMessages = false
await this.getUpdateComplete();
const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'));
scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
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',
@ -916,9 +939,15 @@ class ChatPage extends LitElement {
return a.timestamp
- b.timestamp
})
this.isLoadingOldMessages = false
await this.getUpdateComplete();
scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
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' });
}
}
@ -1359,6 +1388,7 @@ class ChatPage extends LitElement {
const file = new File([result], "name", {
type: 'image/png'
});
compressedFile = file;
resolve();
},
@ -1371,7 +1401,7 @@ class ChatPage extends LitElement {
await publishData({
registeredName: userName,
file : compressedFile,
service: 'IMAGE',
service: 'QCHAT_IMAGE',
identifier: identifier,
parentEpml,
metaData: undefined,
@ -1442,7 +1472,7 @@ class ChatPage extends LitElement {
})
})
const fileSize = compressedFile.size;
if (fileSize > 5000000) {
if (fileSize > 500000) {
parentEpml.request('showSnackBar', get("chatpage.cchange26"));
this.isLoading = false;
this.chatEditor.enable();
@ -1454,7 +1484,7 @@ class ChatPage extends LitElement {
await publishData({
registeredName: userName,
file : compressedFile,
service: 'IMAGE',
service: 'QCHAT_IMAGE',
identifier : identifier,
parentEpml,
metaData: undefined,
@ -1478,7 +1508,7 @@ class ChatPage extends LitElement {
const messageObject = {
messageText: trimmedMessageWithImage,
images: [{
service: "IMAGE",
service: "QCHAT_IMAGE",
name: userName,
identifier: identifier
}],

5
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
View File

@ -435,4 +435,9 @@ export const chatStyles = css`
align-items: center;
height: 100%;
}
.spinnerContainer {
display: flex;
width: 100%;
justify-content: center
}
`

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

@ -17,6 +17,7 @@ import { EmojiPicker } from 'emoji-picker-js';
import { cropAddress } from "../../utils/cropAddress";
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
let toggledMessage = {}
class ChatScroller extends LitElement {
static get properties() {
return {
@ -30,6 +31,9 @@ class ChatScroller extends LitElement {
focusChatEditor: {attribute: false},
sendMessage: {attribute: false},
showLastMessageRefScroller: { type: Function },
emojiPicker: { attribute: false },
isLoadingMessages: { type: Boolean},
setIsLoadingMessages: {attribute: false}
}
}
@ -41,16 +45,7 @@ class ChatScroller extends LitElement {
this._upObserverhandler = this._upObserverhandler.bind(this)
this._downObserverHandler = this._downObserverHandler.bind(this)
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
this.emojiPicker = new EmojiPicker({
style: "twemoji",
twemojiBaseUrl: '/emoji/',
showPreview: false,
showVariants: false,
showAnimation: false,
position: 'top-start',
boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
});
this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
}
@ -77,9 +72,13 @@ class ChatScroller extends LitElement {
}
return messageArray;
}, [])
return html`
${this.isLoadingMessages ? html`
<div class="spinnerContainer">
<paper-spinner-lite active></paper-spinner-lite>
</div>
` : ''}
<ul id="viewElement" class="chat-list clearfix">
<div id="upObserver"></div>
${formattedMessages.map((formattedMessage) => {
@ -99,6 +98,7 @@ class ChatScroller extends LitElement {
?isFirstMessage=${indexMessage === 0}
?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1}
.setToggledMessage=${this.setToggledMessage}
>
</message-template>`
)
@ -109,6 +109,9 @@ class ChatScroller extends LitElement {
}
shouldUpdate(changedProperties) {
if(changedProperties.has('isLoadingMessages')){
return true
}
// Only update element if prop1 changed.
return changedProperties.has('messages');
}
@ -120,7 +123,22 @@ class ChatScroller extends LitElement {
return true;
}
setToggledMessage(message){
toggledMessage = message
}
async firstUpdated() {
this.emojiPicker.on('emoji', selection => {
this.sendMessage({
type: 'reaction',
editedMessageObj: toggledMessage,
reaction: selection.emoji,
})
});
this.viewElement = this.shadowRoot.getElementById('viewElement');
this.upObserverElement = this.shadowRoot.getElementById('upObserver');
this.downObserverElement = this.shadowRoot.getElementById('downObserver');
@ -137,6 +155,7 @@ class ChatScroller extends LitElement {
_upObserverhandler(entries) {
if (entries[0].isIntersecting) {
this.setIsLoadingMessages(true);
let _scrollElement = entries[0].target.nextElementSibling;
this._getOldMessage(_scrollElement);
}
@ -198,6 +217,7 @@ class MessageTemplate extends LitElement {
isFirstMessage: { type: Boolean },
isSingleMessageInGroup: { type: Boolean },
isLastMessageInGroup: { type: Boolean },
setToggledMessage: {attribute: false}
}
}
@ -237,7 +257,13 @@ class MessageTemplate extends LitElement {
}
showBlockIconFunc(bool) {
this.shadowRoot.querySelector(".chat-hover").focus({ preventScroll: true })
const chatHover = this.shadowRoot.querySelector(".chat-hover")
if(chatHover){
chatHover.querySelector(".chat-hover").focus({ preventScroll: true })
}
if(bool) {
this.showBlockAddressIcon = true;
} else {
@ -454,6 +480,8 @@ class MessageTemplate extends LitElement {
@blur=${() => this.showBlockIconFunc(false)}
.sendMessage=${this.sendMessage}
version=${version}
.emojiPicker=${this.emojiPicker}
.setToggledMessage=${this.setToggledMessage}
>
</chat-menu>
</div>
@ -529,7 +557,8 @@ class ChatMenu extends LitElement {
myAddress: { type: Object },
emojiPicker: { attribute: false },
sendMessage: {attribute: false},
version: {type: String}
version: {type: String},
setToggledMessage: {attribute: false}
}
}
@ -559,26 +588,6 @@ class ChatMenu extends LitElement {
parentEpml.request('showSnackBar', `${errorMsg}`)
}
firstUpdated () {
this.emojiPicker = new EmojiPicker({
style: "twemoji",
twemojiBaseUrl: '/emoji/',
showPreview: false,
showVariants: false,
showAnimation: false,
position: 'top-start',
boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
});
this.emojiPicker.on('emoji', selection => {
this.sendMessage({
type: 'reaction',
editedMessageObj: this.originalMessage,
reaction: selection.emoji,
})
});
}
render() {
return html`
<div class="container">
@ -590,7 +599,13 @@ class ChatMenu extends LitElement {
this.versionErrorSnack()
return
}
this.emojiPicker.togglePicker(e.target)
try {
this.setToggledMessage(this.originalMessage)
this.emojiPicker.togglePicker(e.target)
} catch (error) {
console.log({error})
}
}}
>
<vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>

3
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
View File

@ -266,7 +266,6 @@ class ChatTextEditor extends LitElement {
}
async firstUpdated() {
console.log(this.placeholder, "here500");
if (this.hasGlobalEvents) {
this.addGlobalEventListener();
}
@ -387,7 +386,7 @@ class ChatTextEditor extends LitElement {
}
initChatEditor() {
const ChatEditor = function (editorConfig) {
const ChatEditor = function (editorConfig) {
const ChatEditor = function () {
const editor = this;
editor.init();

10
qortal-ui-plugins/plugins/utils/replace-messages-edited.js
View File

@ -17,13 +17,9 @@ export const replaceMessagesEdited = async ({
url: `/chat/messages?chatreference=${msg.reference}&reverse=true${msgQuery}`,
})
console.log({response})
if (response && Array.isArray(response) && response.length !== 0) {
let responseItem = { ...response[0] }
console.log('right before')
const decodeResponseItem = decodeMessageFunc(responseItem, isReceipient, _publicKey)
console.log({decodeResponseItem})
delete decodeResponseItem.timestamp
msgItem = {
...msg,
@ -43,24 +39,20 @@ export const replaceMessagesEdited = async ({
try {
parsedMessageObj = JSON.parse(msg.decodedMessage)
} catch (error) {
console.log('error', {parsedMessageObj})
console.log('error')
return msg
}
console.log('noerror')
let msgItem = msg
try {
let msgQuery = `&involving=${msg.recipient}&involving=${msg.sender}`
if (!isReceipient) {
msgQuery = `&txGroupId=${msg.txGroupId}`
}
console.log({parsedMessageObj})
if (parsedMessageObj.repliedTo) {
const response = await parentEpml.request("apiCall", {
type: "api",
url: `/chat/messages?chatreference=${parsedMessageObj.repliedTo}&reverse=true${msgQuery}`,
})
console.log({response2: response})
if (
response &&
Array.isArray(response) &&