diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 9d77a5d7..f6a2ed92 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -574,7 +574,11 @@ "cchange65": "Uploading attachment. This may take up to one minute.", "cchange66": "Deleting attachment. This may take up to one minute.", "cchange67": "Attachment size exceeds 1 MB", - "cchange68": "edited" + "cchange68": "edited", + "cchange69": "Are you sure you want to delete this image?", + "cchange70": "Are you sure you want to delete this attachment?", + "cchange71": "This image has been deleted", + "cchange72": "This attachment has been deleted" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", diff --git a/qortal-ui-core/package.json b/qortal-ui-core/package.json index ba56c34c..8fee1ccf 100644 --- a/qortal-ui-core/package.json +++ b/qortal-ui-core/package.json @@ -1,6 +1,6 @@ { "name": "qortal-ui-core", - "version": "2.2.5", + "version": "3.0.0", "description": "Qortal Project - decentralize the world - Data storage, communications, web hosting, decentralized trading, complete infrastructure for the future blockchain-based Internet", "keywords": [ "QORT", @@ -17,7 +17,7 @@ "author": "QORTAL ", "license": "GPL-3.0", "dependencies": { - "@hapi/hapi": "21.1.0", + "@hapi/hapi": "21.2.0", "@hapi/inert": "7.0.0", "sass": "1.57.1" }, @@ -53,28 +53,28 @@ "@polymer/paper-spinner": "3.0.2", "@polymer/paper-toast": "3.0.1", "@polymer/paper-tooltip": "3.0.1", - "@rollup/plugin-alias": "4.0.2", + "@rollup/plugin-alias": "4.0.3", "@rollup/plugin-babel": "6.0.3", - "@rollup/plugin-commonjs": "24.0.0", + "@rollup/plugin-commonjs": "24.0.1", "@rollup/plugin-node-resolve": "15.0.1", "@rollup/plugin-replace": "5.0.2", "@rollup/plugin-terser": "0.3.0", - "@vaadin/button": "23.3.3", - "@vaadin/grid": "23.3.3", - "@vaadin/icons": "23.3.3", - "@vaadin/password-field": "23.3.3", - "@vaadin/tooltip": "23.3.3", + "@vaadin/button": "23.3.5", + "@vaadin/grid": "23.3.5", + "@vaadin/icons": "23.3.5", + "@vaadin/password-field": "23.3.5", + "@vaadin/tooltip": "23.3.5", "asmcrypto.js": "2.3.2", "bcryptjs": "2.4.3", "epml": "0.3.3", "file-saver": "2.0.5", - "lit": "2.6.0", + "lit": "2.6.1", "lit-translate": "2.0.1", "pwa-helpers": "0.9.1", "random-sentence-generator": "0.0.8", "redux": "4.2.0", "redux-thunk": "2.4.2", - "rollup": "3.9.1", + "rollup": "3.10.1", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-progress": "1.1.2", "rollup-plugin-scss": "3.0.0", diff --git a/qortal-ui-plugins/package.json b/qortal-ui-plugins/package.json index da44ec3b..d44522c5 100644 --- a/qortal-ui-plugins/package.json +++ b/qortal-ui-plugins/package.json @@ -1,6 +1,6 @@ { "name": "qortal-ui-plugins", - "version": "2.2.5", + "version": "3.0.0", "description": "Qortal Project - decentralize the world - Data storage, communications, web hosting, decentralized trading, complete infrastructure for the future blockchain-based Internet", "keywords": [ "QORT", @@ -64,24 +64,24 @@ "@polymer/paper-slider": "3.0.1", "@polymer/paper-spinner": "3.0.2", "@polymer/paper-tooltip": "3.0.1", - "@rollup/plugin-alias": "4.0.2", + "@rollup/plugin-alias": "4.0.3", "@rollup/plugin-babel": "6.0.3", - "@rollup/plugin-commonjs": "24.0.0", + "@rollup/plugin-commonjs": "24.0.1", "@rollup/plugin-node-resolve": "15.0.1", "@rollup/plugin-replace": "5.0.2", "@rollup/plugin-terser": "0.3.0", - "@vaadin/avatar": "23.3.3", - "@vaadin/button": "23.3.3", - "@vaadin/grid": "23.3.3", - "@vaadin/icons": "23.3.3", - "@vaadin/tooltip": "23.3.3", + "@vaadin/avatar": "23.3.5", + "@vaadin/button": "23.3.5", + "@vaadin/grid": "23.3.5", + "@vaadin/icons": "23.3.5", + "@vaadin/tooltip": "23.3.5", "epml": "0.3.3", "file-saver": "2.0.5", - "highcharts": "10.3.2", + "highcharts": "10.3.3", "html-escaper": "3.0.3", - "lit": "2.6.0", + "lit": "2.6.1", "lit-translate": "2.0.1", - "rollup": "3.9.1", + "rollup": "3.10.1", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-progress": "1.1.2", "rollup-plugin-web-worker-loader": "1.6.1" diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 05d76dd3..14f55fe0 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -79,7 +79,9 @@ class ChatPage extends LitElement { imageFile: { type: Object }, attachment: { type: Object }, isUploadingImage: { type: Boolean }, + isDeletingImage: { type: Boolean }, isUploadingAttachment: { type: Boolean }, + isDeletingAttachment: { type: Boolean }, userLanguage: { type: String }, lastMessageRefVisible: { type: Boolean }, isLoadingOldMessages: { type: Boolean }, @@ -1088,13 +1090,14 @@ class ChatPage extends LitElement { `: ''} - ${(this.isUploadingAttachment) ? html` + ${(this.isUploadingAttachment || this.isDeletingAttachment) ? html`

- ${translate("chatpage.cchange65")} + ${this.isDeletingAttachment ? + translate("chatpage.cchange66") : translate("chatpage.cchange65")}

@@ -2419,56 +2422,146 @@ class ChatPage extends LitElement { this.webWorkerFile = new WebWorkerFile(); } - const b64toBlob = (b64Data, contentType='', sliceSize=512) => { - const byteCharacters = atob(b64Data); - const byteArrays = []; - - for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { - const slice = byteCharacters.slice(offset, offset + sliceSize); - - const byteNumbers = new Array(slice.length); - for (let i = 0; i < slice.length; i++) { - byteNumbers[i] = slice.charCodeAt(i); + const b64toBlob = (b64Data, contentType='', sliceSize=512) => { + const byteCharacters = atob(b64Data); + const byteArrays = []; + + for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { + const slice = byteCharacters.slice(offset, offset + sliceSize); + + const byteNumbers = new Array(slice.length); + for (let i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + const byteArray = new Uint8Array(byteNumbers); + byteArrays.push(byteArray); } - - const byteArray = new Uint8Array(byteNumbers); - byteArrays.push(byteArray); + + const blob = new Blob(byteArrays, {type: contentType}); + return blob; } + const blob = b64toBlob(str, 'image/png'); + await new Promise(resolve => { + new Compressor(blob, { + quality: 0.6, + maxWidth: 500, + success(result) { + const file = new File([result], "name", { + type: 'image/png' + }); + + compressedFile = file; + resolve(); + }, + error(err) { + console.log(err.message); + }, + }) + }) + try { + await publishData({ + registeredName: userName, + file : compressedFile, + service: 'QCHAT_IMAGE', + identifier: identifier, + parentEpml, + metaData: undefined, + uploadType: 'file', + selectedAddress: this.selectedAddress, + worker: workerImage + }) + this.isDeletingImage = false + } catch (error) { + this.isLoading = false; + return + } + typeMessage = 'edit'; + let chatReference = outSideMsg.editedMessageObj.reference; + + if(outSideMsg.editedMessageObj.chatReference){ + chatReference = outSideMsg.editedMessageObj.chatReference; + } - const blob = new Blob(byteArrays, {type: contentType}); - return blob; - } - const blob = b64toBlob(str, 'image/png'); - await new Promise(resolve => { - new Compressor(blob, { - quality: 0.6, - maxWidth: 500, - success(result) { - const file = new File([result], "name", { - type: 'image/png' - }); - - compressedFile = file; - resolve(); - }, - error(err) { - console.log(err.message); - }, + let message = ""; + try { + const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage); + message = parsedMessageObj; + + } catch (error) { + message = outSideMsg.editedMessageObj.decodedMessage; + } + const messageObject = { + ...message, + isImageDeleted: true + } + const stringifyMessageObject = JSON.stringify(messageObject); + this.sendMessage(stringifyMessageObject, typeMessage, chatReference); + } else if (outSideMsg && outSideMsg.type === 'deleteAttachment') { + this.isDeletingAttachment = true; + let compressedFile = '' + var str = "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg=="; + const userName = outSideMsg.name; + const identifier = outSideMsg.identifier; + + if (this.webWorkerFile) { + workerAttachment = this.webWorkerFile; + } else { + this.webWorkerFile = new WebWorkerFile(); + } + + const b64toBlob = (b64Data, contentType='', sliceSize=512) => { + const byteCharacters = atob(b64Data); + const byteArrays = []; + + for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { + const slice = byteCharacters.slice(offset, offset + sliceSize); + + const byteNumbers = new Array(slice.length); + for (let i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + const byteArray = new Uint8Array(byteNumbers); + byteArrays.push(byteArray); + } + + const blob = new Blob(byteArrays, {type: contentType}); + return blob; + } + + const blob = b64toBlob(str, 'image/png'); + await new Promise(resolve => { + new Compressor(blob, { + quality: 0.6, + maxWidth: 500, + success(result) { + const file = new File([result], "name", { + type: 'image/png' + }); + + compressedFile = file; + resolve(); + }, + error(err) { + console.log(err.message); + }, + }) }) - }) + try { await publishData({ registeredName: userName, - file : compressedFile, - service: 'QCHAT_IMAGE', + file: compressedFile, + service: 'QCHAT_ATTACHMENT', identifier: identifier, parentEpml, metaData: undefined, uploadType: 'file', selectedAddress: this.selectedAddress, - worker: workerImage - }) - this.isDeletingImage = false + worker: workerAttachment + }) + this.isDeletingAttachment = false } catch (error) { this.isLoading = false; return @@ -2479,7 +2572,7 @@ class ChatPage extends LitElement { if(outSideMsg.editedMessageObj.chatReference){ chatReference = outSideMsg.editedMessageObj.chatReference; } - + let message = ""; try { const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage); @@ -2490,13 +2583,11 @@ class ChatPage extends LitElement { } const messageObject = { ...message, - isImageDeleted: true + isAttachmentDeleted: true } const stringifyMessageObject = JSON.stringify(messageObject); this.sendMessage(stringifyMessageObject, typeMessage, chatReference); - - } - else if (outSideMsg && outSideMsg.type === 'image') { + } else if (outSideMsg && outSideMsg.type === 'image') { this.isUploadingImage = true; const userName = await getName(this.selectedAddress.address); if (!userName) { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index da79a691..ea085627 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -649,11 +649,6 @@ export const chatStyles = css` cursor: pointer; } - .attachment-container:hover .download-icon::before { - background-color: rgb(161 158 158 / 41%); - } - - .attachment-icon-container { display: flex; @@ -704,6 +699,11 @@ export const chatStyles = css` background-color: transparent; } + .download-icon:hover::before { + background-color: rgb(161 158 158 / 41%); + } + + .download-icon::before { content: ""; position: absolute; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 17100219..28c4326d 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -71,7 +71,6 @@ class ChatScroller extends LitElement { } render() { - console.log(4, "here"); let formattedMessages = this.messages.reduce((messageArray, message, index) => { const lastGroupedMessage = messageArray[messageArray.length - 1]; let timestamp; @@ -262,6 +261,7 @@ class MessageTemplate extends LitElement { sendMessageForward: { attribute: false }, openDialogImage: { attribute: false }, openDeleteImage: { type: Boolean }, + openDeleteAttachment: { type: Boolean }, isImageLoaded: { type: Boolean }, isFirstMessage: { type: Boolean }, isSingleMessageInGroup: { type: Boolean }, @@ -337,7 +337,6 @@ class MessageTemplate extends LitElement { } render() { - console.log(this.messageObj, "message object here"); const hidemsg = this.hideMessages; let message = ""; let messageVersion2 = "" @@ -345,6 +344,7 @@ class MessageTemplate extends LitElement { let repliedToData = null; let image = null; let isImageDeleted = false; + let isAttachmentDeleted = false; let version = 0; let isForwarded = false let isEdited = false @@ -363,6 +363,7 @@ class MessageTemplate extends LitElement { message = parsedMessageObj.messageText; repliedToData = this.messageObj.repliedToData; isImageDeleted = parsedMessageObj.isImageDeleted; + isAttachmentDeleted = parsedMessageObj.isAttachmentDeleted; reactions = parsedMessageObj.reactions || []; version = parsedMessageObj.version isForwarded = parsedMessageObj.type === 'forward' @@ -588,16 +589,18 @@ class MessageTemplate extends LitElement {
- ${imageHTML} { - this.openDeleteImage = true; - }} - class="image-delete-icon" icon="vaadin:close" slot="icon"> + ${imageHTML} + { + this.openDeleteImage = true; + }} + class="image-delete-icon" icon="vaadin:close" slot="icon"> +
` : image && isImageDeleted ? html` -

This image has been deleted

+

${translate("chatpage.cchange71")}

` : html``} - ${attachment ? + ${attachment && !isAttachmentDeleted ? html`
await this.downloadAttachment(attachment)} class="attachment-container">
@@ -619,8 +622,28 @@ class MessageTemplate extends LitElement { slot="icon" class="download-icon"> + ${this.myAddress === this.messageObj.sender + ? html` + { + e.stopPropagation(); + this.openDeleteAttachment = true; + }} + class="image-delete-icon" icon="vaadin:close" slot="icon"> + + ` : html``}
` + : attachment && isAttachmentDeleted ? + html` +
+
+

+ ${translate("chatpage.cchange72")} +

+
+
+ ` : html``}
-

Are you sure you want to delete this image?

+

${translate("chatpage.cchange69")}

this.openDeleteImage = false}>
+ { + this.openDeleteAttachment = false; + }}> +
+

${translate("chatpage.cchange70")}

+
+
this.openDeleteAttachment = false}> + + +
+ ` } }