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

added reactions

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-10-30 01:00:31 +03:00
parent ce7eb44197
commit b73b9a0ab2
3 changed files with 123 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -315,7 +315,6 @@ class ChatPage extends LitElement {
// Attach Event Handler
this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler));
window.addEventListener('storage', () => {
const checkLanguage = localStorage.getItem('qortalLanguage')
use(checkLanguage)
@ -429,6 +428,7 @@ class ChatPage extends LitElement {
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
.setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
.focusChatEditor=${() => this.focusChatEditor()}
.sendMessage=${(val)=> this._sendMessage(val)}
>
</chat-scroller>`
}
@ -991,7 +991,7 @@ class ChatPage extends LitElement {
// Add to the messages... TODO: Save messages to localstorage and fetch from it to make it persistent...
}
_sendMessage() {
_sendMessage(outSideMsg) {
// have params to determine if it's a reply or not
// have variable to determine if it's a response, holds signature in constructor
// need original message signature
@ -1007,9 +1007,58 @@ class ChatPage extends LitElement {
const sanitizedMessage = messageText.replace(/&nbsp;/gi, ' ').replace(/<br\s*[\/]?>/gi, '\n');
const trimmedMessage = sanitizedMessage.trim();
if(outSideMsg && outSideMsg.type === 'reaction'){
typeMessage = 'edit'
let chatReference = outSideMsg.editedMessageObj.reference
if(outSideMsg.editedMessageObj.chatReference){
chatReference = outSideMsg.editedMessageObj.chatReference
}
if (/^\s*$/.test(trimmedMessage)) {
let message = ""
try {
const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage)
message = parsedMessageObj
} catch (error) {
message = outSideMsg.editedMessageObj.decodedMessage
}
let reactions = message.reactions || []
const findEmojiIndex = reactions.findIndex((reaction)=> reaction.type === outSideMsg.reaction)
if(findEmojiIndex !== -1){
let users = reactions[findEmojiIndex].users || []
const findUserIndex = users.find((user)=> user === this.selectedAddress.address )
if(findUserIndex !== -1){
users.splice(findUserIndex, 1)
} else {
users.push(this.selectedAddress.address)
}
reactions[findEmojiIndex] = {
...reactions[findEmojiIndex],
qty: users.length,
users
}
if(users.length === 0){
reactions.splice(findEmojiIndex, 1)
}
} else {
reactions = [...reactions, {
type: outSideMsg.reaction,
qty: 1,
users: [this.selectedAddress.address]
}]
}
const messageObject = {
...message,
reactions
}
const stringifyMessageObject = JSON.stringify(messageObject)
this.sendMessage(stringifyMessageObject, typeMessage, chatReference);
} else if (/^\s*$/.test(trimmedMessage)) {
this.isLoading = false;
this.chatEditor.enable();
} else if (trimmedMessage.length >= 256) {
@ -1046,7 +1095,7 @@ class ChatPage extends LitElement {
message = parsedMessageObj
} catch (error) {
message = this.messageObj.decodedMessage
message = this.editedMessageObj.decodedMessage
}
const messageObject = {
...message,

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

@ -320,4 +320,13 @@ export const chatStyles = css`
padding: 3px 8px;
box-shadow: rgba(77, 77, 82, 0.2) 0px 7px 29px 0px;
}
.reactions-bg {
background-color: #3C4048;
border-radius: 10px;
padding: 4px;
color: white;
margin-right: 10px;
cursor: pointer
}
`

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

@ -13,6 +13,8 @@ import '@vaadin/icon';
import '@material/mwc-button';
import '@material/mwc-dialog';
import '@material/mwc-icon';
import { EmojiPicker } from 'emoji-picker-js';
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
class ChatScroller extends LitElement {
@ -27,7 +29,8 @@ class ChatScroller extends LitElement {
hideMessages: { type: Array },
setRepliedToMessageObj: { type: Function },
setEditedMessageObj: { type: Function },
focusChatEditor: { type: Function }
focusChatEditor: { type: Function },
sendMessage: { type: Function}
}
}
@ -44,8 +47,6 @@ class ChatScroller extends LitElement {
render() {
console.log({messages: this.messages})
return html`
<ul id="viewElement" class="chat-list clearfix">
<div id="upObserver"></div>
@ -61,6 +62,7 @@ class ChatScroller extends LitElement {
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor}
.sendMessage=${this.sendMessage}
>
</message-template>`
)}
@ -82,11 +84,6 @@ class ChatScroller extends LitElement {
return changedProperties.has('messages');
}
async updated(changedProperties) {
console.log({changedProperties})
}
async firstUpdated() {
this.viewElement = this.shadowRoot.getElementById('viewElement')
this.upObserverElement = this.shadowRoot.getElementById('upObserver')
@ -166,6 +163,7 @@ class MessageTemplate extends LitElement {
setRepliedToMessageObj: { type: Function },
setEditedMessageObj: { type: Function },
focusChatEditor: { type: Function },
sendMessage: { type: Function }
}
}
@ -210,11 +208,14 @@ class MessageTemplate extends LitElement {
render() {
const hidemsg = this.hideMessages
let message = ""
let reactions = []
let repliedToData = null
try {
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage)
message = parsedMessageObj.messageText
repliedToData = this.messageObj.repliedToData
reactions = parsedMessageObj.reactions || []
} catch (error) {
message = this.messageObj.decodedMessage
}
@ -269,6 +270,16 @@ class MessageTemplate extends LitElement {
`}
<div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
</div>
<div>
${reactions.map((reaction)=> {
return html`<span @click=${() => this.sendMessage({
type: 'reaction',
editedMessageObj: this.messageObj,
reaction: reaction.type,
})} class="reactions-bg" >${reaction.type} ${reaction.qty}</span>`
})}
</div>
<chat-menu
tabindex="0"
@ -285,6 +296,7 @@ class MessageTemplate extends LitElement {
.focusChatEditor=${this.focusChatEditor}
.myAddress=${this.myAddress}
@blur=${() => this.showBlockIconFunc(false)}
.sendMessage=${this.sendMessage}
>
</chat-menu>
</div>
@ -317,7 +329,9 @@ class ChatMenu extends LitElement {
setRepliedToMessageObj: { type: Function },
setEditedMessageObj: { type: Function },
focusChatEditor: { type: Function },
myAddress: { type: Object }
myAddress: { type: Object },
emojiPicker: { attribute: false },
sendMessage: {type: Function}
}
}
@ -342,6 +356,34 @@ class ChatMenu extends LitElement {
}
}
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">
@ -360,6 +402,15 @@ class ChatMenu extends LitElement {
}}">
<vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon>
</div>
<div
class="menu-icon tooltip reaction"
data-text="${translate("blockpage.bcchange13")}"
@click=${(e) => {
this.emojiPicker.togglePicker(e.target)
}}
>
<vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>
</div>
${this.myAddress === this.originalMessage.sender ? (
html`
<div