From e0c809374026276265290e3ff884f2f8f63b2ed5 Mon Sep 17 00:00:00 2001 From: PhilReact Date: Fri, 22 Sep 2023 23:38:48 -0500 Subject: [PATCH] bug fixes and ability to repost --- plugins/plugins/core/components/ChatImage.js | 2 +- plugins/plugins/core/components/ChatPage.js | 189 +++++++++++------- .../components/ChatRightPanelResources.js | 45 ++++- .../plugins/core/components/ChatScroller.js | 7 +- .../plugins/core/components/ReusableImage.js | 8 +- plugins/plugins/utils/id-generation.js | 14 ++ 6 files changed, 178 insertions(+), 87 deletions(-) create mode 100644 plugins/plugins/utils/id-generation.js diff --git a/plugins/plugins/core/components/ChatImage.js b/plugins/plugins/core/components/ChatImage.js index 39aadd91..71a84c45 100644 --- a/plugins/plugins/core/components/ChatImage.js +++ b/plugins/plugins/core/components/ChatImage.js @@ -212,7 +212,7 @@ getMyNode(){ } // check if progress is 100% and clear interval if true - if (res?.status === 'READY') { + if (res.status === 'READY') { clearInterval(intervalId) this.status = res this.isReady = true diff --git a/plugins/plugins/core/components/ChatPage.js b/plugins/plugins/core/components/ChatPage.js index 817be13e..d06c1a3d 100644 --- a/plugins/plugins/core/components/ChatPage.js +++ b/plugins/plugins/core/components/ChatPage.js @@ -48,6 +48,7 @@ import '@polymer/paper-dialog/paper-dialog.js' import '@polymer/paper-spinner/paper-spinner-lite.js' import { RequestQueue } from '../../utils/queue.js' import { modalHelper } from '../../utils/publish-modal.js' +import { generateIdFromAddresses } from '../../utils/id-generation.js' const chatLastSeen = localForage.createInstance({ name: "chat-last-seen", @@ -1384,8 +1385,29 @@ class ChatPage extends LitElement { this.addToQueue = this.addToQueue.bind(this) this.processQueue = this.processQueue.bind(this) this.isInProcessQueue = false + this.nodeUrl = this.getNodeUrl(); + this.myNode = this.getMyNode(); } + getNodeUrl() { + const myNode = + window.parent.reduxStore.getState().app.nodeConfig.knownNodes[ + window.parent.reduxStore.getState().app.nodeConfig.node + ]; + + const nodeUrl = + myNode.protocol + '://' + myNode.domain + ':' + myNode.port; + return nodeUrl; + } + getMyNode() { + const myNode = + window.parent.reduxStore.getState().app.nodeConfig.knownNodes[ + window.parent.reduxStore.getState().app.nodeConfig.node + ]; + + return myNode; + } + setOpenGifModal(value) { this.openGifModal = value } @@ -1498,7 +1520,6 @@ class ChatPage extends LitElement { render() { - console.log('this.chatId', this.chatId, this._chatId) return html`
-
+
{ + if(+this._chatId === 0 || this.isReceipient)return + this._toggle() + }} style=${`height: 100%; display: flex; align-items: center;flex-grow: 1; cursor: pointer; cursor: ${+this._chatId === 0 || this.isReceipient ? 'default': 'pointer'}; user-select: none`}> ${this.isReceipient ? '' : +this._chatId === 0 ? html`

Qortal General Chat

` : html` @@ -1691,7 +1715,7 @@ class ChatPage extends LitElement {
${this.imageFile && html` - dialog-img + dialog-img `}
@@ -2380,6 +2405,11 @@ class ChatPage extends LitElement { } insertFile(file) { + if(file.identifier){ + this.imageFile = file + this.currentEditor = 'newChat' + return + }else if (file.type.includes('image')) { this.imageFile = file this.currentEditor = 'newChat' @@ -3900,7 +3930,9 @@ class ChatPage extends LitElement { const stringifyMessageObject = JSON.stringify(messageObject) return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference, isForward: false, isReceipient, _chatId, _publicKey, messageQueue}) } else if (outSideMsg && outSideMsg.type === 'image') { - this.isUploadingImage = true + if(!this.imageFile.identifier){ + this.isUploadingImage = true + } const userName = await getName(this.selectedAddress.address) if (!userName) { parentEpml.request('showSnackBar', get("chatpage.cchange27")) @@ -3909,78 +3941,94 @@ class ChatPage extends LitElement { this.imageFile = null return } - const arbitraryFeeData = await modalHelper.getArbitraryFee() - const res = await modalHelper.showModalAndWaitPublish( - { - feeAmount: arbitraryFeeData.feeToShow + + + let service = "QCHAT_IMAGE" + let name = userName + let identifier + if(this.imageFile.identifier){ + identifier = this.imageFile.identifier + name = this.imageFile.name + service = this.imageFile.service + } else { + const arbitraryFeeData = await modalHelper.getArbitraryFee() + const res = await modalHelper.showModalAndWaitPublish( + { + feeAmount: arbitraryFeeData.feeToShow + } + ); + if (res.action !== 'accept') throw new Error('User declined publish') + + if (this.webWorkerFile) { + this.webWorkerFile.terminate() + this.webWorkerFile = null } - ); - if (res.action !== 'accept') throw new Error('User declined publish') - - if (this.webWorkerFile) { - this.webWorkerFile.terminate() - this.webWorkerFile = null - } - - this.webWorkerFile = new WebWorkerFile() - - const image = this.imageFile - const id = this.uid.rnd() - const groupPart = this.isReceipient ? `direct_${this._chatId.slice(-15)}` : `group_${this._chatId}` - const identifier = `qchat_${groupPart}_${id}` - let compressedFile = '' - await new Promise(resolve => { - new Compressor(image, { - quality: .6, - maxWidth: 1200, - mimeType: 'image/webp', - success(result) { - const file = new File([result], "name", { - type: 'image/webp' - }) - compressedFile = file - resolve() - }, - error(err) { - }, + + this.webWorkerFile = new WebWorkerFile() + const image = this.imageFile + const id = this.uid.rnd() + let groupPart + if(this.isReceipient){ + groupPart = `direct_${generateIdFromAddresses(this._chatId, this.selectedAddress.address)}` + } else { + groupPart = `group_${this._chatId}` + } + identifier = `qchat_${groupPart}_${id}` + let compressedFile = '' + await new Promise(resolve => { + new Compressor(image, { + quality: .6, + maxWidth: 1200, + mimeType: 'image/webp', + success(result) { + const file = new File([result], "name", { + type: 'image/webp' + }) + compressedFile = file + resolve() + }, + error(err) { + }, + }) }) - }) - const fileSize = compressedFile.size - if (fileSize > 500000) { - parentEpml.request('showSnackBar', get("chatpage.cchange26")) - this.isLoading = false - this.isUploadingImage = false - return + const fileSize = compressedFile.size + if (fileSize > 500000) { + parentEpml.request('showSnackBar', get("chatpage.cchange26")) + this.isLoading = false + this.isUploadingImage = false + return + } + + try { + + await publishData({ + registeredName: userName, + file: compressedFile, + service: 'QCHAT_IMAGE', + identifier: identifier, + parentEpml, + metaData: undefined, + uploadType: 'file', + selectedAddress: this.selectedAddress, + worker: this.webWorkerFile, + withFee: true, + feeAmount: arbitraryFeeData.fee + }) + this.isUploadingImage = false + this.removeImage() + } catch (error) { + this.isLoading = false + this.isUploadingImage = false + return + } + } - - try { - - await publishData({ - registeredName: userName, - file: compressedFile, - service: 'QCHAT_IMAGE', - identifier: identifier, - parentEpml, - metaData: undefined, - uploadType: 'file', - selectedAddress: this.selectedAddress, - worker: this.webWorkerFile, - withFee: true, - feeAmount: arbitraryFeeData.fee - }) - this.isUploadingImage = false - this.removeImage() - } catch (error) { - this.isLoading = false - this.isUploadingImage = false - return - } - + const messageObject = { messageText: trimmedMessage, images: [{ - service: "QCHAT_IMAGE", - name: userName, + service: service, + name: name, identifier: identifier, }], isImageDeleted: false, @@ -3988,6 +4036,7 @@ class ChatPage extends LitElement { version: 3 } const stringifyMessageObject = JSON.stringify(messageObject) + this.removeImage() return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference: undefined, isForward: false, isReceipient, _chatId, _publicKey, messageQueue}) } else if (outSideMsg && outSideMsg.type === 'gif') { const userName = await getName(this.selectedAddress.address) diff --git a/plugins/plugins/core/components/ChatRightPanelResources.js b/plugins/plugins/core/components/ChatRightPanelResources.js index cb5f3703..64e16fbe 100644 --- a/plugins/plugins/core/components/ChatRightPanelResources.js +++ b/plugins/plugins/core/components/ChatRightPanelResources.js @@ -21,6 +21,7 @@ import { translateUnsafeHTML, registerTranslateConfig, } from 'lit-translate'; +import { generateIdFromAddresses } from '../../utils/id-generation'; const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }); @@ -51,7 +52,8 @@ class ChatRightPanelResources extends LitElement { images: { type: Array }, viewImage: { type: Boolean }, autoView: {type: Boolean}, - onlyMyImages: {type: Boolean} + onlyMyImages: {type: Boolean}, + repost: {attribute: false} }; } @@ -77,6 +79,8 @@ class ChatRightPanelResources extends LitElement { this.viewImage = false; this.myName = window.parent.reduxStore.getState().app.accountInfo.names[0].name; + this.myAddress = + window.parent.reduxStore.getState().app.selectedAddress.address; this.autoView =false this.onlyMyImages = true } @@ -237,18 +241,18 @@ class ChatRightPanelResources extends LitElement { font-family: Montserrat, sans-serif; font-weight: 600; color: var(--black); + padding-left: 5px; } `; } async getMoreImages(reset) { try { - console.log({reset}) if(reset){ this.images = [] } const groupPart = this.isReceipient - ? `direct_${this._chatId.slice(-15)}` + ? `direct_${generateIdFromAddresses(this._chatId, this.myAddress)}` : `group_${this._chatId}`; let offset = reset ? 0 : this.images.length; @@ -282,7 +286,6 @@ class ChatRightPanelResources extends LitElement { } async updated(changedProperties) { - console.log({ changedProperties }); if (changedProperties && changedProperties.has('_chatId')) { this.images = []; this.getMoreImages(true); @@ -315,7 +318,6 @@ class ChatRightPanelResources extends LitElement { if (!entries[0].isIntersecting) { return; } else { - console.log('hello', this.images) if (this.images.length < 20) { return; } @@ -340,7 +342,6 @@ class ChatRightPanelResources extends LitElement { } render() { - console.log('hello resources3', this.images); return html`
@@ -368,7 +369,7 @@ class ChatRightPanelResources extends LitElement {
${this.images.map((image) => { - return html``; + return html``; })}
@@ -407,7 +408,9 @@ class ImageParent extends LitElement { images: { type: Array }, viewImage: { type: Boolean }, image: { type: Object }, - autoView: {type: Boolean} + autoView: {type: Boolean}, + repost: {attribute: false}, + isImgLoaded: {type: Boolean} }; } @@ -425,7 +428,7 @@ class ImageParent extends LitElement { this.btnDisable = false; this.errorMessage = ''; this.successMessage = ''; - + this.isImgLoaded = false this.images = []; this.viewImage = false; this.myName = @@ -584,6 +587,17 @@ class ImageParent extends LitElement { .image-container { display: flex; } + .repost-btn { + margin-top: 4px; + max-height: 28px; + padding: 5px 5px; + font-size: 14px; + background-color: #03a9f4; + color: white; + border: 1px solid transparent; + border-radius: 3px; + cursor: pointer; + } `; } @@ -599,6 +613,11 @@ class ImageParent extends LitElement { } } + onLoad(){ + this.isImgLoaded = true + this.requestUpdate() + } + render() { return html` ${!this.autoView && !this.viewImage && this.myName !== this.image.name @@ -639,8 +658,14 @@ class ImageParent extends LitElement { service: this.image.service, identifier: this.image.identifier, }} + .onLoad=${()=> this.onLoad()} > - < + ${this.isImgLoaded ? html` +
+ +
+ ` : ''} +
` : ''} diff --git a/plugins/plugins/core/components/ChatScroller.js b/plugins/plugins/core/components/ChatScroller.js index c19c3b41..6fdd3a8b 100644 --- a/plugins/plugins/core/components/ChatScroller.js +++ b/plugins/plugins/core/components/ChatScroller.js @@ -732,7 +732,7 @@ class ChatScroller extends LitElement { ` )}
this.chatId.includes(item._chatId)).length > 0 ? 'height: 1px' : 'height: 1px; margin-top: -100px'} + style=${this.messageQueue.filter((item) => this.chatId.includes(item._chatId)).length > 0 ? 'height: 1px' : 'height: 1px'} id="bottomObserverForFetchingMessages" >
@@ -745,7 +745,7 @@ class ChatScroller extends LitElement {
` : ''} - ${repeat( + ${!this.disableAddingNewMessages ? repeat( this.messageQueue.filter((item) => this.chatId.includes(item._chatId) ), @@ -787,7 +787,7 @@ class ChatScroller extends LitElement { ?isInProgress=${true} > ` - )} + ): ''} `; } @@ -934,6 +934,7 @@ class ChatScroller extends LitElement { if (this.messagesToRender.length === 0 || this.disableFetching) { return; } + if(!this.disableAddingNewMessages) return if ( !entries[0].isIntersecting || !entries[0].target || diff --git a/plugins/plugins/core/components/ReusableImage.js b/plugins/plugins/core/components/ReusableImage.js index 9b5feb9c..c21c96e2 100644 --- a/plugins/plugins/core/components/ReusableImage.js +++ b/plugins/plugins/core/components/ReusableImage.js @@ -27,7 +27,7 @@ export class ResuableImage extends LitElement { status: { type: Object }, missingData: {type: Boolean}, openDialogImage: { type: Boolean }, - + onLoad: {attribute: false} }; } @@ -182,6 +182,7 @@ export class ResuableImage extends LitElement { ); if (response && response.data && response.data.status === 'READY') { this.status = response.data; + this.onLoad() return; } const intervalId = setInterval(async () => { @@ -230,13 +231,14 @@ export class ResuableImage extends LitElement { } // check if progress is 100% and clear interval if true - if (res?.status === 'READY') { + if (res.status === 'READY') { + this.onLoad() clearInterval(intervalId); this.status = res; this.isReady = true; } - if(res?.status === 'MISSING_DATA'){ + if(res.status === 'MISSING_DATA'){ this.status = res this.missingData = true clearInterval(intervalId) diff --git a/plugins/plugins/utils/id-generation.js b/plugins/plugins/utils/id-generation.js new file mode 100644 index 00000000..88323156 --- /dev/null +++ b/plugins/plugins/utils/id-generation.js @@ -0,0 +1,14 @@ +export function simpleHash(str) { + let hash = 0; + for (let i = 0; i < str.length; i++) { + hash = (hash << 5) - hash + str.charCodeAt(i); + hash = hash & hash; // Convert to 32bit integer + } + return hash.toString(); +} + +export function generateIdFromAddresses(address1, address2) { + // Sort addresses lexicographically and concatenate + const sortedAddresses = [address1, address2].sort().join(''); + return simpleHash(sortedAddresses); +} \ No newline at end of file