From f980196988c597f4357619d27fe4ecf4e108311e Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Thu, 8 Dec 2022 20:21:12 -0500 Subject: [PATCH 1/5] control chat with state --- .../plugins/core/components/ChatHead.js | 16 ++++- .../plugins/core/components/ChatPage.js | 62 ++++++++++++------- .../core/messaging/q-chat/q-chat.src.js | 32 ++++++---- 3 files changed, 70 insertions(+), 40 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatHead.js b/qortal-ui-plugins/plugins/core/components/ChatHead.js index a16b11fc..4e9c170c 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatHead.js +++ b/qortal-ui-plugins/plugins/core/components/ChatHead.js @@ -14,6 +14,7 @@ class ChatHead extends LitElement { iconName: { type: String }, activeChatHeadUrl: { type: String }, isImageLoaded: { type: Boolean }, + setActiveChatHeadUrl: {attribute: false} } } @@ -116,8 +117,6 @@ class ChatHead extends LitElement { } - - return html`
  • this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}"> ${this.isImageLoaded ? html`${avatarImg}` : html`` } @@ -150,8 +149,19 @@ class ChatHead extends LitElement { parentEpml.imReady() } + shouldUpdate(changedProperties) { + if(changedProperties.has('activeChatHeadUrl')){ + return true + } + if(changedProperties.has('chatInfo')){ + return true + } + + return false + } + getUrl(chatUrl) { - this.onPageNavigation(`/app/q-chat/${chatUrl}`) + this.setActiveChatHeadUrl(chatUrl) } onPageNavigation(pageUrl) { diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index ad197b91..09f40b0b 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -67,7 +67,8 @@ class ChatPage extends LitElement { userLanguage: { type: String }, lastMessageRefVisible: { type: Boolean }, isLoadingOldMessages: {type: Boolean}, - isEditMessageOpen: { type: Boolean } + isEditMessageOpen: { type: Boolean }, + webSocket: {attribute: false} } } @@ -746,13 +747,11 @@ class ChatPage extends LitElement { this.initChatEditor(); } - async firstUpdated() { - window.addEventListener('storage', () => { - const checkLanguage = localStorage.getItem('qortalLanguage'); - use(checkLanguage); - this.userLanguage = checkLanguage; - }) - + async initUpdate(){ + if(this.webSocket){ + this.webSocket.close() + this.webSocket= '' + } const getAddressPublicKey = () => { parentEpml.request('apiCall', { @@ -794,6 +793,16 @@ class ChatPage extends LitElement { // this.initChatEditor(); }, 100) + + } + + async firstUpdated() { + window.addEventListener('storage', () => { + const checkLanguage = localStorage.getItem('qortalLanguage'); + use(checkLanguage); + this.userLanguage = checkLanguage; + }) + parentEpml.ready().then(() => { parentEpml.subscribe('selected_address', async selectedAddress => { this.selectedAddress = {} @@ -817,10 +826,11 @@ class ChatPage extends LitElement { }) }) parentEpml.imReady(); + + await this.initUpdate() } async updated(changedProperties) { - if (changedProperties && changedProperties.has('userLanguage')) { const userLang = changedProperties.get('userLanguage') @@ -830,6 +840,10 @@ class ChatPage extends LitElement { } } + if (changedProperties && changedProperties.has('chatId') && changedProperties.get('chatId')) { + await this.initUpdate() + } + } async renderPlaceholder() { @@ -1151,22 +1165,22 @@ class ChatPage extends LitElement { directSocketLink = `ws://${nodeUrl}/websockets/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}`; } - const directSocket = new WebSocket(directSocketLink); + this.webSocket = new WebSocket(directSocketLink); // Open Connection - directSocket.onopen = () => { + this.webSocket.onopen = () => { setTimeout(pingDirectSocket, 50) } // Message Event - directSocket.onmessage = async (e) => { + this.webSocket.onmessage = async (e) => { if (initial === 0) { const isReceipient = this.chatId.includes('direct') - - const chatReference1 = isReceipient ? 'direct' : 'group'; - const chatReference2 = this.chatId.split('/')[1]; + // commented out code= localstorage persistance + // const chatReference1 = isReceipient ? 'direct' : 'group'; + // const chatReference2 = this.chatId.split('/')[1]; // const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`); const cachedData = null let getInitialMessages = [] @@ -1199,17 +1213,17 @@ class ChatPage extends LitElement { } // Closed Event - directSocket.onclose = () => { + this.webSocket.onclose = () => { clearTimeout(directSocketTimeout) } // Error Event - directSocket.onerror = (e) => { + this.webSocket.onerror = (e) => { clearTimeout(directSocketTimeout) } const pingDirectSocket = () => { - directSocket.send('ping') + this.webSocket.send('ping') directSocketTimeout = setTimeout(pingDirectSocket, 295000) } @@ -1237,16 +1251,16 @@ class ChatPage extends LitElement { groupSocketLink = `ws://${nodeUrl}/websockets/chat/messages?txGroupId=${groupId}`; } - const groupSocket = new WebSocket(groupSocketLink); + this.webSocket = new WebSocket(groupSocketLink); // Open Connection - groupSocket.onopen = () => { + this.webSocket.onopen = () => { setTimeout(pingGroupSocket, 50) } // Message Event - groupSocket.onmessage = async (e) => { + this.webSocket.onmessage = async (e) => { if (initial === 0) { const isGroup = this.chatId.includes('group') @@ -1288,17 +1302,17 @@ class ChatPage extends LitElement { } // Closed Event - groupSocket.onclose = () => { + this.webSocket.onclose = () => { clearTimeout(groupSocketTimeout) } // Error Event - groupSocket.onerror = (e) => { + this.webSocket.onerror = (e) => { clearTimeout(groupSocketTimeout) } const pingGroupSocket = () => { - groupSocket.send('ping') + this.webSocket.send('ping') groupSocketTimeout = setTimeout(pingGroupSocket, 295000) } diff --git 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 index 5de97d52..aa4daf8d 100644 --- 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 @@ -34,7 +34,8 @@ class Chat extends LitElement { balance: { type: Number }, theme: { type: String, reflect: true }, blockedUsers: { type: Array }, - blockedUserList: { type: Array } + blockedUserList: { type: Array }, + activeChatHeadUrl: {type: String} } } @@ -324,6 +325,13 @@ class Chat extends LitElement { this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' this.blockedUsers = [] this.blockedUserList = [] + this.activeChatHeadUrl = '' + + + } + + setActiveChatHeadUrl(url){ + this.activeChatHeadUrl = url } render() { @@ -349,7 +357,8 @@ class Chat extends LitElement { ${translate("chatpage.cchange5")} keyboard_arrow_down
    - ${window.parent.location.pathname !== "/app/q-chat" ? html`${this.renderChatPage(this.chatId)}` : html`${this.renderChatWelcomePage()}`} + + ${window.parent.location.pathname !== "/app/q-chat" || this.activeChatHeadUrl ? html`${this.renderChatPage(this.chatId)}` : html`${this.renderChatWelcomePage()}`}
    @@ -416,21 +425,15 @@ class Chat extends LitElement { } firstUpdated() { - this.changeLanguage() this.changeTheme() this.getChatBlockedList() this.getLocalBlockedList() - setInterval(() => { - this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]") - }, 1000) - const getBlockedUsers = async () => { let blockedUsers = await parentEpml.request('apiCall', { url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}` }) - this.blockedUsers = blockedUsers setTimeout(getBlockedUsers, 60000) } @@ -455,7 +458,7 @@ class Chat extends LitElement { const runFunctionsAfterPageLoad = () => { // Functions to exec after render while waiting for page info... - getDataFromURL() + // getDataFromURL() try { let key = `${window.parent.reduxStore.getState().app.selectedAddress.address.substr(0, 10)}_chat-heads` @@ -572,6 +575,8 @@ class Chat extends LitElement { hidelist.push(item) }) localStorage.setItem("MessageBlockedAddresses", JSON.stringify(hidelist)) + + this.blockedUserList = hidelist }) } @@ -604,6 +609,7 @@ class Chat extends LitElement { obj.push(noName) } localStorage.setItem("ChatBlockedAddresses", JSON.stringify(obj)) + this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]") }) }) }) @@ -681,20 +687,20 @@ class Chat extends LitElement { let tempUrl = document.location.href let splitedUrl = decodeURI(tempUrl).split('?') - let activeChatHeadUrl = splitedUrl[1] === undefined ? '' : splitedUrl[1] + // let activeChatHeadUrl = splitedUrl[1] === undefined ? '' : splitedUrl[1] return chatHeadArr.map(eachChatHead => { - return html`` + return html` this.setActiveChatHeadUrl(val)} chatInfo=${JSON.stringify(eachChatHead)}>` }) } renderChatPage(chatId) { + // Check for the chat ID from and render chat messages // Else render Welcome to Q-CHat // TODO: DONE: Do the above in the ChatPage - - return html`` + return html`` } setChatHeads(chatObj) { From 3105fbde132094cc7057482f6d606199fda58c32 Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Fri, 9 Dec 2022 22:45:19 -0500 Subject: [PATCH 2/5] scroll down when switching chat --- qortal-ui-plugins/plugins/core/components/ChatPage.js | 1 + qortal-ui-plugins/plugins/core/components/ChatScroller.js | 6 +++++- .../plugins/core/messaging/q-chat/q-chat.src.js | 4 +++- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 09f40b0b..07b6c9ea 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -876,6 +876,7 @@ class ChatPage extends LitElement { renderChatScroller() { return html` Date: Mon, 12 Dec 2022 19:01:48 -0500 Subject: [PATCH 3/5] forward msg feature version 1 --- qortal-ui-core/language/us.json | 6 +- .../plugins/core/components/ChatPage.js | 187 +++++++++++++++++- .../core/components/ChatScroller-css.js | 6 + .../plugins/core/components/ChatScroller.js | 86 +++++++- .../plugins/core/components/ChatSelect.js | 176 +++++++++++++++++ .../core/messaging/q-chat/q-chat.src.js | 2 +- 6 files changed, 449 insertions(+), 14 deletions(-) create mode 100644 qortal-ui-plugins/plugins/core/components/ChatSelect.js diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 2aa00796..c2bc9565 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -518,7 +518,11 @@ "bcchange10": "More", "bcchange11": "Reply", "bcchange12": "Edit", - "bcchange13": "Reaction" + "bcchange13": "Reaction", + "bcchange14": "Forward", + "bcchange15": "Message Forwarded", + "bcchange16": "Choose recipient", + "bcchange17": "FORWARDED" }, "grouppage": { "gchange1": "Qortal Groups", diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 07b6c9ea..7fc5d3b0 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -16,6 +16,7 @@ import './NameMenu.js'; import './TimeAgo.js'; import './ChatTextEditor'; import './WrapperModal'; +import './ChatSelect.js' import '@polymer/paper-spinner/paper-spinner-lite.js'; import '@material/mwc-button'; import '@material/mwc-dialog'; @@ -68,7 +69,10 @@ class ChatPage extends LitElement { lastMessageRefVisible: { type: Boolean }, isLoadingOldMessages: {type: Boolean}, isEditMessageOpen: { type: Boolean }, - webSocket: {attribute: false} + webSocket: {attribute: false}, + chatHeads: {type: Array}, + forwardActiveChatHeadUrl: {type: String}, + openForwardOpen: {type: Boolean} } } @@ -78,6 +82,15 @@ class ChatPage extends LitElement { scroll-behavior: smooth; } + .chat-head-container { + display: flex; + justify-content: flex-start; + flex-direction: column; + height: 50vh; + overflow-y: auto; + width: 100%; + } + .chat-container { display: grid; grid-template-rows: minmax(6%, 92vh) minmax(40px, auto); @@ -429,6 +442,11 @@ class ChatPage extends LitElement { height: 100%; } + .dialog-container-title { + color: var(--black); + font-size: 18px; + } + .dialog-container-loader { position: relative; display: flex; @@ -551,6 +569,7 @@ class ChatPage extends LitElement { 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.openForwardOpen = false } render() { @@ -705,11 +724,104 @@ class ChatPage extends LitElement { + { + this.openForwardOpen = false + this.forwardActiveChatHeadUrl = "" + } } + style=${this.openForwardOpen ? "display: block" : "display: none"}> +
    +
    +
    +

    ${translate("blockpage.bcchange16")}

    +
    +
    + ${this.chatHeads.map((item)=> { + return html` { + this.forwardActiveChatHeadUrl = val + }} chatInfo=${JSON.stringify(item)}>` + })} +
    + +
    + + +
    +
    +
    +     ` } - + setForwardProperties(forwardedMessage){ + this.openForwardOpen = true + this.forwardedMessage = forwardedMessage + } + + async sendForwardMessage(){ + let parsedMessageObj = {} + let publicKey = { + hasPubKey: false, + key: '' + } + try { + parsedMessageObj = JSON.parse(this.forwardedMessage); + + } catch (error) { + parsedMessageObj = {} + } + + try { + const res = await parentEpml.request('apiCall', { + type: 'api', + url: `/addresses/publickey/${this.forwardChatId}` + }) + if (res.error === 102) { + publicKey.key = '' + publicKey.hasPubKey = false + } else if (res !== false) { + publicKey.key = res + publicKey.hasPubKey = true + } else { + publicKey.key = '' + publicKey.hasPubKey = false + } + } catch (error) { + + } + + try { + const message = { + ...parsedMessageObj, + type: 'forward' + } + const stringifyMessageObject = JSON.stringify(message) + this.sendMessage(stringifyMessageObject, undefined, '', true, { + isReceipient: true, + chatId: 'Qdxha59Cm1Ty4QkKMBWPnKrNigcDCDk6eq', + publicKey: { + hasPubKey: false, + key: '' + } + }) + } catch (error) { + console.log({error}) + } + } showLastMessageRefScroller(props) { this.lastMessageRefVisible = props; @@ -884,10 +996,12 @@ class ChatPage extends LitElement { .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)} .focusChatEditor=${() => this.focusChatEditor()} .sendMessage=${(val) => this._sendMessage(val)} + .sendMessageForward=${(messageText, typeMessage, chatReference, isForward, forwardParams)=> this.sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams)} .showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)} .emojiPicker=${this.emojiPicker} ?isLoadingMessages=${this.isLoadingOldMessages} .setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)} + .setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)} >     ` @@ -1147,7 +1261,6 @@ class ChatPage extends LitElement { async fetchChatMessages(chatId) { const initDirect = async (cid) => { - let initial = 0 let directSocketTimeout @@ -1646,8 +1759,7 @@ class ChatPage extends LitElement { } } - async sendMessage(messageText, typeMessage, chatReference) { - + async sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams) { this.isLoading = true; let _reference = new Uint8Array(64); @@ -1695,7 +1807,55 @@ class ChatPage extends LitElement { } }; - const _computePow = async (chatBytes) => { + const sendForwardRequest = async () => { + const { publicKey } = forwardParams + + const isRecipient = this.forwardActiveChatHeadUrl.includes('direct') === true ? true : false; + + const chatId = this.forwardActiveChatHeadUrl.split('/')[1]; + this.openForwardOpen = false + if (isRecipient === true) { + let chatResponse = await parentEpml.request('chat', { + type: 18, + nonce: this.selectedAddress.nonce, + params: { + timestamp: Date.now(), + recipient: chatId, + recipientPublicKey: publicKey.key, + hasChatReference: 0, + chatReference: "", + message: messageText, + lastReference: reference, + proofOfWorkNonce: 0, + isEncrypted: publicKey.hasPubKey === false ? 0 : 1, + isText: 1 + } + }); + + _computePow(chatResponse, true) + } else { + let groupResponse = await parentEpml.request('chat', { + type: 181, + nonce: this.selectedAddress.nonce, + params: { + timestamp: Date.now(), + groupID: Number(chatId), + hasReceipient: 0, + hasChatReference: 0, + chatReference: chatReference, + message: messageText, + lastReference: reference, + proofOfWorkNonce: 0, + isEncrypted: 0, // Set default to not encrypted for groups + isText: 1 + } + }); + + _computePow(groupResponse, true) + } + }; + + const _computePow = async (chatBytes, isForward) => { const difficulty = this.balance === 0 ? 12 : 8; const path = window.parent.location.origin + '/memory-pow/memory-pow.wasm.full' const worker = new WebWorker(); @@ -1720,13 +1880,17 @@ class ChatPage extends LitElement { }); - getSendChatResponse(_response); + getSendChatResponse(_response, isForward); }; - const getSendChatResponse = (response) => { + const getSendChatResponse = (response, isForward) => { if (response === true) { this.chatEditor.resetValue(); this.chatEditorNewChat.resetValue() + if(isForward){ + let successString = get("blockpage.bcchange15"); + parentEpml.request('showSnackBar', `${successString}`); + } } else if (response.error) { parentEpml.request('showSnackBar', response.message); } else { @@ -1739,9 +1903,14 @@ class ChatPage extends LitElement { this.chatEditorNewChat.enable() this.closeEditMessageContainer() this.closeRepliedToContainer() + this.openForwardOpen = false + this.forwardActiveChatHeadUrl = "" }; - // Exec.. + if(isForward){ + sendForwardRequest(); + return + } sendMessageRequest(); } diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index d37a2d92..4b644c79 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -63,6 +63,12 @@ export const chatStyles = css` margin-bottom: 5px; } + .message-data-forward { + user-select: none; + color: var(--mainmenutext); + margin-bottom: 5px; + font-size: 12px; + } .message-data-my-name { color: #cf21e8; text-shadow: 0 0 3px #cf21e8; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 2893b3a5..204b302d 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -30,11 +30,13 @@ class ChatScroller extends LitElement { setEditedMessageObj: {attribute: false}, focusChatEditor: {attribute: false}, sendMessage: {attribute: false}, + sendMessageForward: {attribute: false}, showLastMessageRefScroller: { type: Function }, emojiPicker: { attribute: false }, isLoadingMessages: { type: Boolean}, setIsLoadingMessages: {attribute: false}, - chatId: { type: String } + chatId: { type: String }, + setForwardProperties: {attribute: false}, } } @@ -51,6 +53,7 @@ class ChatScroller extends LitElement { render() { + console.log({messages: this.messages}) let formattedMessages = this.messages.reduce((messageArray, message) => { const lastGroupedMessage = messageArray[messageArray.length - 1]; let timestamp; @@ -96,10 +99,12 @@ class ChatScroller extends LitElement { .setEditedMessageObj=${this.setEditedMessageObj} .focusChatEditor=${this.focusChatEditor} .sendMessage=${this.sendMessage} + .sendMessageForward=${this.sendMessageForward} ?isFirstMessage=${indexMessage === 0} ?isSingleMessageInGroup=${formattedMessage.messages.length > 1} ?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1} .setToggledMessage=${this.setToggledMessage} + .setForwardProperties=${this.setForwardProperties} > ` ) @@ -219,12 +224,14 @@ class MessageTemplate extends LitElement { setEditedMessageObj: {attribute: false}, focusChatEditor: {attribute: false}, sendMessage: {attribute: false}, + sendMessageForward: {attribute: false}, openDialogImage: {attribute: false}, isImageLoaded: { type: Boolean }, isFirstMessage: { type: Boolean }, isSingleMessageInGroup: { type: Boolean }, isLastMessageInGroup: { type: Boolean }, - setToggledMessage: {attribute: false} + setToggledMessage: {attribute: false}, + setForwardProperties: {attribute: false}, } } @@ -279,6 +286,7 @@ class MessageTemplate extends LitElement { let image = null; let isImageDeleted = false; let version = 0; + let isForwarded = false try { const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage); message = parsedMessageObj.messageText; @@ -286,6 +294,7 @@ class MessageTemplate extends LitElement { isImageDeleted = parsedMessageObj.isImageDeleted; reactions = parsedMessageObj.reactions || []; version = parsedMessageObj.version + isForwarded = parsedMessageObj.type === 'forward' if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) { image = parsedMessageObj.images[0]; } @@ -299,6 +308,7 @@ class MessageTemplate extends LitElement { let nameMenu = ''; let levelFounder = ''; let hideit = hidemsg.includes(this.messageObj.sender); + let forwarded = '' levelFounder = html``; if (this.messageObj.senderName) { @@ -352,6 +362,11 @@ class MessageTemplate extends LitElement { ${this.messageObj.senderName ? this.messageObj.senderName : cropAddress(this.messageObj.sender)} `; + forwarded = html` + + ${translate("blockpage.bcchange17")} + + `; if (repliedToData) { try { @@ -414,6 +429,14 @@ class MessageTemplate extends LitElement { ` : null } + ${isForwarded ? + html` + + ${forwarded} + + ` + : null + } ${this.isFirstMessage ? ( html` ${levelFounder} @@ -480,9 +503,11 @@ class MessageTemplate extends LitElement { .myAddress=${this.myAddress} @blur=${() => this.showBlockIconFunc(false)} .sendMessage=${this.sendMessage} + .sendMessageForward=${this.sendMessageForward} version=${version} .emojiPicker=${this.emojiPicker} .setToggledMessage=${this.setToggledMessage} + .setForwardProperties=${this.setForwardProperties} > @@ -559,7 +584,9 @@ class ChatMenu extends LitElement { emojiPicker: { attribute: false }, sendMessage: {attribute: false}, version: {type: String}, - setToggledMessage: {attribute: false} + setToggledMessage: {attribute: false}, + sendMessageForward: {attribute: false}, + setForwardProperties: {attribute: false} } } @@ -589,6 +616,51 @@ class ChatMenu extends LitElement { parentEpml.request('showSnackBar', `${errorMsg}`) } + async messageForwardFunc(){ + let parsedMessageObj = {} + let publicKey = { + hasPubKey: false, + key: '' + } + try { + parsedMessageObj = JSON.parse(this.originalMessage.decodedMessage); + + } catch (error) { + parsedMessageObj = {} + } + + try { + const res = await parentEpml.request('apiCall', { + type: 'api', + url: `/addresses/publickey/${this._chatId}` + }) + if (res.error === 102) { + publicKey.key = '' + publicKey.hasPubKey = false + } else if (res !== false) { + publicKey.key = res + publicKey.hasPubKey = true + } else { + publicKey.key = '' + publicKey.hasPubKey = false + } + } catch (error) { + + } + + try { + const message = { + ...parsedMessageObj, + type: 'forward' + } + const stringifyMessageObject = JSON.stringify(message) + this.setForwardProperties(stringifyMessageObject) + + } catch (error) { + console.log({error}) + } + } + render() { return html`
    @@ -610,6 +682,14 @@ class ChatMenu extends LitElement { }} > +
    +
    +
    diff --git a/qortal-ui-plugins/plugins/core/components/ChatSelect.js b/qortal-ui-plugins/plugins/core/components/ChatSelect.js new file mode 100644 index 00000000..be069a2b --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/ChatSelect.js @@ -0,0 +1,176 @@ +import { LitElement, html, css } from 'lit' +import { Epml } from '../../../epml.js' + +import '@material/mwc-icon' + +const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) + +class ChatSelect extends LitElement { + static get properties() { + return { + selectedAddress: { type: Object }, + config: { type: Object }, + chatInfo: { type: Object }, + iconName: { type: String }, + activeChatHeadUrl: { type: String }, + isImageLoaded: { type: Boolean }, + setActiveChatHeadUrl: {attribute: false} + } + } + + static get styles() { + return css` + ul { + list-style-type: none; + } + li { + padding: 10px 2px 20px 5px; + cursor: pointer; + width: 100%; + display: flex; + box-sizing: border-box; + } + + li:hover { + background-color: var(--menuhover); + } + + .active { + background: var(--menuactive); + border-left: 4px solid #3498db; + } + + .img-icon { + font-size:40px; + color: var(--chat-group); + } + + .about { + margin-top: 8px; + } + + .about { + padding-left: 8px; + } + + .status { + color: #92959e; + } + + .clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } + ` + } + + constructor() { + super() + this.selectedAddress = {} + this.config = { + user: { + node: { + + } + } + } + this.chatInfo = {} + this.iconName = '' + this.activeChatHeadUrl = '' + this.isImageLoaded = false + this.imageFetches = 0 + } + + createImage(imageUrl) { + const imageHTMLRes = new Image(); + imageHTMLRes.src = imageUrl; + imageHTMLRes.style= "width:40px; height:40px; float: left; border-radius:50%"; + imageHTMLRes.onclick= () => { + this.openDialogImage = true; + } + imageHTMLRes.onload = () => { + this.isImageLoaded = true; + } + imageHTMLRes.onerror = () => { + if (this.imageFetches < 4) { + setTimeout(() => { + this.imageFetches = this.imageFetches + 1; + imageHTMLRes.src = imageUrl; + }, 500); + } else { + + + this.isImageLoaded = false + } + }; + return imageHTMLRes; + } + + render() { + let avatarImg = ''; + let backupAvatarImg = '' + if(this.chatInfo.name){ + 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/${this.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`; + avatarImg= this.createImage(avatarUrl) + + } + + return html` +
  • this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}"> + ${this.isImageLoaded ? html`${avatarImg}` : html`` } + ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`account_circle` : html`` } + ${!this.isImageLoaded && this.chatInfo.name ? html`
    ${this.chatInfo.name.charAt(0)}
    `: ''} + ${!this.isImageLoaded && this.chatInfo.groupName ? html`
    ${this.chatInfo.groupName.charAt(0)}
    `: ''} +
    +
    ${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)}
    +
    +
    • + ` + } + + firstUpdated() { + let configLoaded = false + parentEpml.ready().then(() => { + parentEpml.subscribe('selected_address', async selectedAddress => { + this.selectedAddress = {} + selectedAddress = JSON.parse(selectedAddress) + if (!selectedAddress || Object.entries(selectedAddress).length === 0) return + this.selectedAddress = selectedAddress + }) + parentEpml.subscribe('config', c => { + if (!configLoaded) { + configLoaded = true + } + this.config = JSON.parse(c) + }) + }) + parentEpml.imReady() + } + + shouldUpdate(changedProperties) { + if(changedProperties.has('activeChatHeadUrl')){ + return true + } + if(changedProperties.has('chatInfo')){ + return true + } + + return false + } + + getUrl(chatUrl) { + this.setActiveChatHeadUrl(chatUrl) + } + + onPageNavigation(pageUrl) { + parentEpml.request('setPageUrl', pageUrl) + } +} + +window.customElements.define('chat-select', ChatSelect) diff --git 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 index d05083d3..9858766d 100644 --- 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 @@ -702,7 +702,7 @@ class Chat extends LitElement { // Else render Welcome to Q-CHat // TODO: DONE: Do the above in the ChatPage - return html`` + return html`` } setChatHeads(chatObj) { From ac4049cd259ff1aab183f04f0bceb1fb0c7b4f13 Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Mon, 12 Dec 2022 20:35:56 -0500 Subject: [PATCH 4/5] fix reactions --- qortal-ui-plugins/plugins/core/components/ChatPage.js | 4 +++- qortal-ui-plugins/plugins/core/components/computePowWorker.js | 1 - .../plugins/core/components/computePowWorkerImage.js | 3 +-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 7fc5d3b0..abc5cfcf 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -571,6 +571,8 @@ class ChatPage extends LitElement { }); this.openForwardOpen = false } + + render() { return html` @@ -1674,7 +1676,7 @@ class ChatPage extends LitElement { 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 ) + const findUserIndex = users.findIndex((user)=> user === this.selectedAddress.address ) if(findUserIndex !== -1){ users.splice(findUserIndex, 1) } else { diff --git a/qortal-ui-plugins/plugins/core/components/computePowWorker.js b/qortal-ui-plugins/plugins/core/components/computePowWorker.js index 96db8beb..2ed60a20 100644 --- a/qortal-ui-plugins/plugins/core/components/computePowWorker.js +++ b/qortal-ui-plugins/plugins/core/components/computePowWorker.js @@ -15,7 +15,6 @@ function sbrk(size, heap){ self.addEventListener('message', async e => { - console.log({data: e.data}) const response = await computePow(e.data.chatBytes, e.data.path, e.data.difficulty) postMessage(response) diff --git a/qortal-ui-plugins/plugins/core/components/computePowWorkerImage.js b/qortal-ui-plugins/plugins/core/components/computePowWorkerImage.js index e008361b..d9f5f662 100644 --- a/qortal-ui-plugins/plugins/core/components/computePowWorkerImage.js +++ b/qortal-ui-plugins/plugins/core/components/computePowWorkerImage.js @@ -17,7 +17,6 @@ function sbrk(size, heap){ self.addEventListener('message', async e => { - console.log({data: e.data}) const response = await computePow(e.data.convertedBytes, e.data.path) postMessage(response) @@ -75,7 +74,7 @@ const workBufferPtr = sbrk( }); } -console.log({path}) + loadWebAssembly(path) .then(wasmModule => { response = { From 20b08f3f21436629afb340b700f8ba3a8b119da6 Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Mon, 12 Dec 2022 21:22:37 -0500 Subject: [PATCH 5/5] remove reations from forwarded messages --- qortal-ui-plugins/plugins/core/components/ChatPage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index abc5cfcf..fbb48b94 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -811,6 +811,7 @@ class ChatPage extends LitElement { ...parsedMessageObj, type: 'forward' } + delete message.reactions const stringifyMessageObject = JSON.stringify(message) this.sendMessage(stringifyMessageObject, undefined, '', true, { isReceipient: true,