mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-04-24 20:07:51 +00:00
Merge pull request #127 from PhillipLangMartinez/feature/new-editor-file-import
Feature/new editor file import
This commit is contained in:
AlphaX-Projects
GitHub
commit
a43dc63a7b
BIN
img/attachment-icon.png
Normal file
BIN
img/attachment-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
qortal-ui-core/font/WorkSans.ttf
Normal file
BIN
qortal-ui-core/font/WorkSans.ttf
Normal file
Binary file not shown.
@ -26,6 +26,13 @@
|
||||
url(Montserrat.ttf) format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'WorkSans';
|
||||
src: local('WorkSans'),
|
||||
local('WorkSans'),
|
||||
url(WorkSans.ttf) format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
src: local('Raleway'),
|
||||
@ -77,7 +84,8 @@
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
font-size: 24px;
|
||||
/* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
|
||||
@ -581,6 +581,14 @@
|
||||
"cchange72": "other",
|
||||
"cchange73": "s",
|
||||
"cchange74": "reacted with",
|
||||
"cchange75": "Uploading attachment. This may take up to one minute.",
|
||||
"cchange76": "Deleting attachment. This may take up to one minute.",
|
||||
"cchange77": "Attachment size exceeds 1 MB",
|
||||
"cchange78": "Are you sure you want to delete this image?",
|
||||
"cchange79": "Are you sure you want to delete this attachment?",
|
||||
"cchange80": "This image has been deleted",
|
||||
"cchange81": "This image type is not supported",
|
||||
"cchange82": "This attachment has been deleted",
|
||||
"cchange90": "No messages"
|
||||
},
|
||||
"welcomepage": {
|
||||
|
||||
@ -86,7 +86,8 @@
|
||||
"rollup": "3.15.0",
|
||||
"rollup-plugin-node-globals": "1.4.0",
|
||||
"rollup-plugin-progress": "1.1.2",
|
||||
"rollup-plugin-web-worker-loader": "1.6.1"
|
||||
"rollup-plugin-web-worker-loader": "1.6.1",
|
||||
"axios": "1.3.2"
|
||||
|
||||
},
|
||||
"engines": {
|
||||
|
||||
@ -39,7 +39,7 @@ import { replaceMessagesEdited } from '../../utils/replace-messages-edited.js';
|
||||
import { publishData } from '../../utils/publish-image.js';
|
||||
import { EmojiPicker } from 'emoji-picker-js';
|
||||
import WebWorker from 'web-worker:./computePowWorker.js';
|
||||
import WebWorkerImage from 'web-worker:./computePowWorkerImage.js';
|
||||
import WebWorkerFile from 'web-worker:./computePowWorkerFile.js';
|
||||
import '@polymer/paper-dialog/paper-dialog.js'
|
||||
|
||||
const chatLastSeen = localForage.createInstance({
|
||||
@ -77,7 +77,11 @@ class ChatPage extends LitElement {
|
||||
editedMessageObj: { type: Object },
|
||||
iframeHeight: { type: Number },
|
||||
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 },
|
||||
@ -94,7 +98,7 @@ class ChatPage extends LitElement {
|
||||
userFound: { type: Array },
|
||||
userFoundModalOpen: { type: Boolean },
|
||||
webWorker: { type: Object },
|
||||
webWorkerImage: { type: Object },
|
||||
webWorkerFile: { type: Object },
|
||||
myTrimmedMeassage: { type: String },
|
||||
editor: {type: Object},
|
||||
currentEditor: {type: String},
|
||||
@ -823,6 +827,30 @@ class ChatPage extends LitElement {
|
||||
cursor: pointer;
|
||||
color: #4e5054;
|
||||
}
|
||||
|
||||
.attachment-icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background-color: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
.attachment-icon {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.attachment-name {
|
||||
font-family: Work Sans, sans-serif;
|
||||
font-size: 20px;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
margin: 0px;
|
||||
letter-spacing: 1px;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
@ -830,7 +858,7 @@ class ChatPage extends LitElement {
|
||||
super()
|
||||
this.getOldMessage = this.getOldMessage.bind(this)
|
||||
this._sendMessage = this._sendMessage.bind(this)
|
||||
this.insertImage = this.insertImage.bind(this)
|
||||
this.insertFile = this.insertFile.bind(this)
|
||||
this.pasteImage = this.pasteImage.bind(this)
|
||||
this.toggleEnableChatEnter = this.toggleEnableChatEnter.bind(this)
|
||||
this._downObserverhandler = this._downObserverhandler.bind(this)
|
||||
@ -861,6 +889,7 @@ class ChatPage extends LitElement {
|
||||
this.editedMessageObj = null
|
||||
this.iframeHeight = 42
|
||||
this.imageFile = null
|
||||
this.attachment = null
|
||||
this.uid = new ShortUniqueId()
|
||||
this.userLanguage = ""
|
||||
this.lastMessageRefVisible = false
|
||||
@ -888,7 +917,7 @@ class ChatPage extends LitElement {
|
||||
selected: false
|
||||
}
|
||||
this.webWorker = null;
|
||||
this.webWorkerImage = null;
|
||||
this.webWorkerFile = null;
|
||||
this.currentEditor = '_chatEditorDOM'
|
||||
this.initialChat = this.initialChat.bind(this)
|
||||
this.isEnabledChatEnter = true
|
||||
@ -1030,8 +1059,8 @@ class ChatPage extends LitElement {
|
||||
class="close-icon"
|
||||
icon="vaadin:close-big"
|
||||
slot="icon"
|
||||
@click=${() => this.closeEditMessageContainer()}
|
||||
></vaadin-icon>
|
||||
@click=${() => this.closeEditMessageContainer()}>
|
||||
</vaadin-icon>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
@ -1042,7 +1071,7 @@ class ChatPage extends LitElement {
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
.imageFile=${this.imageFile}
|
||||
.insertImage=${this.insertImage}
|
||||
.insertFile=${this.insertFile}
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
?isLoading=${this.isLoading}
|
||||
?isLoadingMessages=${this.isLoadingMessages}
|
||||
@ -1074,6 +1103,20 @@ class ChatPage extends LitElement {
|
||||
</div>
|
||||
</div>
|
||||
`: ''}
|
||||
${(this.isUploadingAttachment || this.isDeletingAttachment) ? html`
|
||||
<div class="dialogCustom">
|
||||
<div class="dialogCustomInner">
|
||||
<div class="dialog-container-loader">
|
||||
<div class=${`smallLoading marginLoader`}></div>
|
||||
<p>
|
||||
${this.isDeletingAttachment ?
|
||||
translate("chatpage.cchange76") : translate("chatpage.cchange75")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`: ''}
|
||||
<wrapper-modal
|
||||
.onClickFunc=${() => {
|
||||
this.removeImage();
|
||||
@ -1091,7 +1134,7 @@ class ChatPage extends LitElement {
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
.imageFile=${this.imageFile}
|
||||
.insertImage=${this.insertImage}
|
||||
.insertFile=${this.insertFile}
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
?isLoading=${this.isLoading}
|
||||
?isLoadingMessages=${this.isLoadingMessages}
|
||||
@ -1114,7 +1157,58 @@ class ChatPage extends LitElement {
|
||||
const chatTextEditor = this.shadowRoot.getElementById('chatTextCaption')
|
||||
chatTextEditor.sendMessageFunc({
|
||||
type: 'image',
|
||||
imageFile: this.imageFile,
|
||||
})
|
||||
}}
|
||||
>
|
||||
${translate("chatpage.cchange9")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wrapper-modal>
|
||||
<wrapper-modal
|
||||
.onClickFunc=${() => {
|
||||
this.removeAttachment();
|
||||
}}
|
||||
style=${this.attachment && !this.isUploadingAttachment ? "visibility: visible; z-index: 50" : "visibility: hidden; z-index: -100"}>
|
||||
<div>
|
||||
<div class="dialog-container">
|
||||
${this.attachment && html`
|
||||
<div class="attachment-icon-container">
|
||||
<img src="/img/attachment-icon.png" alt="attachment-icon" class="attachment-icon" />
|
||||
</div>
|
||||
`}
|
||||
<p class="attachment-name">${this.attachment && this.attachment.name}</p>
|
||||
<div class="caption-container">
|
||||
<chat-text-editor
|
||||
iframeId="newAttachmentChat"
|
||||
?hasGlobalEvents=${false}
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
.imageFile=${this.imageFile}
|
||||
.attachment=${this.attachment}
|
||||
.insertFile=${this.insertFile}
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
?isLoading=${this.isLoading}
|
||||
?isLoadingMessages=${this.isLoadingMessages}
|
||||
id="chatAttachmentId"
|
||||
.editor=${this.editorAttachment}
|
||||
.updatePlaceholder=${(editor, value)=> this.updatePlaceholder(editor, value)}
|
||||
>
|
||||
</chat-text-editor>
|
||||
</div>
|
||||
<div class="modal-button-row">
|
||||
<button class="modal-button-red" @click=${() => {
|
||||
this.removeAttachment();
|
||||
}}>
|
||||
${translate("chatpage.cchange33")}
|
||||
</button>
|
||||
<button
|
||||
class="modal-button"
|
||||
@click=${() => {
|
||||
const chatTextEditor = this.shadowRoot.getElementById('chatAttachmentId');
|
||||
chatTextEditor.sendMessageFunc({
|
||||
type: 'attachment',
|
||||
})
|
||||
}}
|
||||
>
|
||||
@ -1346,11 +1440,12 @@ class ChatPage extends LitElement {
|
||||
super.connectedCallback();
|
||||
await this.initUpdate()
|
||||
this.webWorker = new WebWorker();
|
||||
this.webWorkerImage = new WebWorkerImage();
|
||||
this.webWorkerFile = new WebWorkerFile();
|
||||
await this.getUpdateCompleteTextEditor();
|
||||
|
||||
const elementChatId = this.shadowRoot.getElementById('_chatEditorDOM').shadowRoot.getElementById('_chatEditorDOM')
|
||||
const elementChatImageId = this.shadowRoot.getElementById('chatTextCaption').shadowRoot.getElementById('newChat')
|
||||
const elementChatId = this.shadowRoot.getElementById('_chatEditorDOM').shadowRoot.getElementById('_chatEditorDOM');
|
||||
const elementChatImageId = this.shadowRoot.getElementById('chatTextCaption').shadowRoot.getElementById('newChat');
|
||||
const elementChatAttachmentId = this.shadowRoot.getElementById('chatAttachmentId').shadowRoot.getElementById('newAttachmentChat');
|
||||
this.editor = new Editor({
|
||||
onUpdate: ()=> {
|
||||
this.shadowRoot.getElementById('_chatEditorDOM').getMessageSize(this.editor.getJSON())
|
||||
@ -1410,8 +1505,34 @@ class ChatPage extends LitElement {
|
||||
'Enter':() => {
|
||||
const chatTextEditor = this.shadowRoot.getElementById('chatTextCaption')
|
||||
chatTextEditor.sendMessageFunc({
|
||||
type: 'image',
|
||||
imageFile: this.imageFile,
|
||||
type: 'image'
|
||||
})
|
||||
return true
|
||||
}
|
||||
}
|
||||
}})
|
||||
]
|
||||
})
|
||||
|
||||
this.editorAttachment = new Editor({
|
||||
onUpdate: () => {
|
||||
this.shadowRoot.getElementById('chatAttachmentId').getMessageSize(this.editorAttachment.getJSON())
|
||||
},
|
||||
element: elementChatAttachmentId,
|
||||
extensions: [
|
||||
StarterKit,
|
||||
Underline,
|
||||
Highlight,
|
||||
Placeholder.configure({
|
||||
placeholder: 'Write something …',
|
||||
}),
|
||||
Extension.create({
|
||||
addKeyboardShortcuts:()=> {
|
||||
return {
|
||||
'Enter':()=> {
|
||||
const chatTextEditor = this.shadowRoot.getElementById('chatAttachmentId')
|
||||
chatTextEditor.sendMessageFunc({
|
||||
type: 'attachment'
|
||||
})
|
||||
return true
|
||||
}
|
||||
@ -1510,7 +1631,7 @@ class ChatPage extends LitElement {
|
||||
this.insertImage(file);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
let errorMsg = get("chatpage.cchange70")
|
||||
let errorMsg = get("chatpage.cchange81")
|
||||
parentEpml.request('showSnackBar', `${errorMsg}`)
|
||||
}
|
||||
} else {
|
||||
@ -1648,19 +1769,29 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
|
||||
insertImage(file) {
|
||||
insertFile(file) {
|
||||
if (file.type.includes('image')) {
|
||||
this.imageFile = file;
|
||||
this.currentEditor = 'newChat'
|
||||
this.currentEditor = 'newChat';
|
||||
return;
|
||||
} else {
|
||||
this.attachment = file;
|
||||
this.currentEditor = "newAttachmentChat";
|
||||
return;
|
||||
}
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange28"));
|
||||
// parentEpml.request('showSnackBar', get("chatpage.cchange28"));
|
||||
}
|
||||
|
||||
removeImage() {
|
||||
this.imageFile = null;
|
||||
this.resetChatEditor()
|
||||
this.currentEditor = '_chatEditorDOM'
|
||||
this.resetChatEditor();
|
||||
this.currentEditor = '_chatEditorDOM';
|
||||
}
|
||||
|
||||
removeAttachment() {
|
||||
this.attachment = null;
|
||||
this.resetChatEditor();
|
||||
this.currentEditor = '_chatEditorDOM';
|
||||
}
|
||||
|
||||
changeMsgInput(id) {
|
||||
@ -1817,7 +1948,6 @@ class ChatPage extends LitElement {
|
||||
this.editor.setEditable(true)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async getName (recipient) {
|
||||
@ -2519,6 +2649,9 @@ class ChatPage extends LitElement {
|
||||
if(this.currentEditor === 'newChat'){
|
||||
this.editorImage.commands.setContent('')
|
||||
}
|
||||
if(this.currentEditor === 'newAttachmentChat'){
|
||||
this.editorAttachment.commands.setContent('')
|
||||
}
|
||||
}
|
||||
|
||||
async _sendMessage(outSideMsg, msg) {
|
||||
@ -2561,6 +2694,7 @@ class ChatPage extends LitElement {
|
||||
// find specific object property in local
|
||||
let typeMessage = 'regular';
|
||||
let workerImage;
|
||||
let workerAttachment;
|
||||
this.isLoading = true;
|
||||
const trimmedMessage = msg
|
||||
|
||||
@ -2589,10 +2723,10 @@ class ChatPage extends LitElement {
|
||||
let compressedFile = ''
|
||||
var str = "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg==";
|
||||
|
||||
if (this.webWorkerImage) {
|
||||
workerImage = this.webWorkerImage;
|
||||
if (this.webWorkerFile) {
|
||||
workerImage = this.webWorkerFile;
|
||||
} else {
|
||||
this.webWorkerImage = new WebWorkerImage();
|
||||
this.webWorkerFile = new WebWorkerFile();
|
||||
}
|
||||
|
||||
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
|
||||
@ -2670,10 +2804,97 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
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();
|
||||
}
|
||||
else if (outSideMsg && outSideMsg.type === 'image') {
|
||||
|
||||
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_ATTACHMENT',
|
||||
identifier: identifier,
|
||||
parentEpml,
|
||||
metaData: undefined,
|
||||
uploadType: 'file',
|
||||
selectedAddress: this.selectedAddress,
|
||||
worker: workerAttachment
|
||||
})
|
||||
this.isDeletingAttachment = false
|
||||
} catch (error) {
|
||||
this.isLoading = false;
|
||||
return
|
||||
}
|
||||
typeMessage = 'edit';
|
||||
let chatReference = outSideMsg.editedMessageObj.reference;
|
||||
|
||||
if(outSideMsg.editedMessageObj.chatReference){
|
||||
chatReference = outSideMsg.editedMessageObj.chatReference;
|
||||
}
|
||||
|
||||
let message = "";
|
||||
try {
|
||||
const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
|
||||
message = parsedMessageObj;
|
||||
|
||||
} catch (error) {
|
||||
message = outSideMsg.editedMessageObj.decodedMessage;
|
||||
}
|
||||
const messageObject = {
|
||||
...message,
|
||||
isAttachmentDeleted: true
|
||||
}
|
||||
const stringifyMessageObject = JSON.stringify(messageObject);
|
||||
this.sendMessage(stringifyMessageObject, typeMessage, chatReference);
|
||||
} else if (outSideMsg && outSideMsg.type === 'image') {
|
||||
this.isUploadingImage = true;
|
||||
const userName = await getName(this.selectedAddress.address);
|
||||
if (!userName) {
|
||||
@ -2684,10 +2905,10 @@ class ChatPage extends LitElement {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.webWorkerImage) {
|
||||
workerImage = this.webWorkerImage;
|
||||
if (this.webWorkerFile) {
|
||||
workerImage = this.webWorkerFile;
|
||||
} else {
|
||||
this.webWorkerImage = new WebWorkerImage();
|
||||
this.webWorkerFile = new WebWorkerFile();
|
||||
}
|
||||
|
||||
const image = this.imageFile
|
||||
@ -2730,15 +2951,14 @@ class ChatPage extends LitElement {
|
||||
worker: workerImage
|
||||
});
|
||||
this.isUploadingImage = false;
|
||||
this.removeImage()
|
||||
this.removeImage();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
this.isLoading = false;
|
||||
this.isUploadingImage = false;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
const messageObject = {
|
||||
messageText: trimmedMessage,
|
||||
images: [{
|
||||
@ -2752,6 +2972,67 @@ class ChatPage extends LitElement {
|
||||
};
|
||||
const stringifyMessageObject = JSON.stringify(messageObject);
|
||||
this.sendMessage(stringifyMessageObject, typeMessage);
|
||||
}
|
||||
else if (outSideMsg && outSideMsg.type === 'attachment') {
|
||||
this.isUploadingAttachment = true;
|
||||
const userName = await getName(this.selectedAddress.address);
|
||||
if (!userName) {
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange27"));
|
||||
this.isLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.webWorkerFile) {
|
||||
workerAttachment = this.webWorkerFile;
|
||||
} else {
|
||||
this.webWorkerFile = new WebWorkerFile();
|
||||
}
|
||||
|
||||
const attachment = this.attachment;
|
||||
const id = this.uid();
|
||||
const identifier = `qchat_${id}`;
|
||||
const fileSize = attachment.size;
|
||||
if (fileSize > 1000000) {
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange77"));
|
||||
this.isLoading = false;
|
||||
this.isUploadingAttachment = false;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await publishData({
|
||||
registeredName: userName,
|
||||
file : attachment,
|
||||
service: 'QCHAT_ATTACHMENT',
|
||||
identifier : identifier,
|
||||
parentEpml,
|
||||
metaData: undefined,
|
||||
uploadType: 'file',
|
||||
selectedAddress: this.selectedAddress,
|
||||
worker: workerAttachment
|
||||
});
|
||||
this.isUploadingAttachment = false;
|
||||
this.removeAttachment();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
this.isLoading = false;
|
||||
this.isUploadingAttachment = false;
|
||||
return;
|
||||
}
|
||||
const messageObject = {
|
||||
messageText: trimmedMessage,
|
||||
attachments: [{
|
||||
service: 'QCHAT_ATTACHMENT',
|
||||
name: userName,
|
||||
identifier: identifier,
|
||||
attachmentName: attachment.name,
|
||||
attachmentSize: attachment.size
|
||||
}],
|
||||
isAttachmentDeleted: false,
|
||||
repliedTo: '',
|
||||
version: 2
|
||||
};
|
||||
const stringifyMessageObject = JSON.stringify(messageObject);
|
||||
this.sendMessage(stringifyMessageObject, typeMessage);
|
||||
} else if (outSideMsg && outSideMsg.type === 'reaction') {
|
||||
const userName = await getName(this.selectedAddress.address);
|
||||
typeMessage = 'edit';
|
||||
|
||||
@ -86,6 +86,7 @@ export const chatStyles = css`
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-top: 2px;
|
||||
}
|
||||
@ -97,6 +98,7 @@ export const chatStyles = css`
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-top: 2px;
|
||||
}
|
||||
@ -644,6 +646,7 @@ export const chatStyles = css`
|
||||
white-space: pre-wrap;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.replied-message pre code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
@ -651,12 +654,10 @@ export const chatStyles = css`
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
||||
.replied-message img {
|
||||
width: 1.7em;
|
||||
height: 1.5em;
|
||||
margin: 0px;
|
||||
|
||||
}
|
||||
|
||||
.replied-message blockquote {
|
||||
@ -670,6 +671,79 @@ export const chatStyles = css`
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.attachment-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
padding: 5px 0 10px 0;
|
||||
gap: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.attachment-icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background-color: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
.attachment-icon {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.attachment-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.attachment-name {
|
||||
font-family: Work Sans, sans-serif;
|
||||
font-size: 16px;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
margin: 0;
|
||||
letter-spacing: 0.4px;
|
||||
padding: 5px 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.attachment-size {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
margin: 0;
|
||||
letter-spacing: 0.3px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
position: relative;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
width: 19px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.download-icon:hover::before {
|
||||
background-color: rgb(161 158 158 / 41%);
|
||||
}
|
||||
|
||||
|
||||
.download-icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
padding: 18px;
|
||||
background-color: transparent;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.edited-message-style {
|
||||
font-family: "Work Sans", sans-serif;
|
||||
font-style: italic;
|
||||
|
||||
@ -6,6 +6,7 @@ import {unsafeHTML} from 'lit/directives/unsafe-html.js';
|
||||
import { chatStyles } from './ChatScroller-css.js'
|
||||
import { Epml } from "../../../epml";
|
||||
import { cropAddress } from "../../utils/cropAddress";
|
||||
import { roundToNearestDecimal } from '../../utils/roundToNearestDecimal.js';
|
||||
import './LevelFounder.js';
|
||||
import './NameMenu.js';
|
||||
import './ChatModals.js';
|
||||
@ -18,7 +19,9 @@ import '@material/mwc-button';
|
||||
import '@material/mwc-dialog';
|
||||
import '@material/mwc-icon';
|
||||
import { EmojiPicker } from 'emoji-picker-js';
|
||||
import { generateHTML } from '@tiptap/core'
|
||||
import { generateHTML } from '@tiptap/core';
|
||||
import { saveAs } from 'file-saver';
|
||||
import axios from "axios";
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import Underline from '@tiptap/extension-underline';
|
||||
import Highlight from '@tiptap/extension-highlight'
|
||||
@ -82,7 +85,6 @@ class ChatScroller extends LitElement {
|
||||
let timestamp;
|
||||
let sender;
|
||||
let repliedToData;
|
||||
|
||||
let firstMessageInChat;
|
||||
|
||||
if (index === 0) {
|
||||
@ -281,6 +283,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 },
|
||||
@ -344,6 +347,22 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
async downloadAttachment(attachment) {
|
||||
|
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
|
||||
|
||||
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
|
||||
try{
|
||||
axios.get(`${nodeUrl}/arbitrary/QCHAT_ATTACHMENT/${attachment.name}/${attachment.identifier}?apiKey=${myNode.apiKey}`, { responseType: 'blob'})
|
||||
.then(response =>{
|
||||
let filename = attachment.attachmentName;
|
||||
let blob = new Blob([response.data], { type:"application/octet-stream" });
|
||||
saveAs(blob , filename);
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
firstUpdated(){
|
||||
const autoSeeChatList = window.parent.reduxStore.getState().app?.autoLoadImageChats
|
||||
if(autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.reference)){
|
||||
@ -366,9 +385,11 @@ 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
|
||||
let attachment = null;
|
||||
try {
|
||||
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
|
||||
if(parsedMessageObj.version.toString() === '2'){
|
||||
@ -383,10 +404,14 @@ 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';
|
||||
isEdited = parsedMessageObj.isEdited && true;
|
||||
if (parsedMessageObj.attachments && Array.isArray(parsedMessageObj.attachments) && parsedMessageObj.attachments.length > 0) {
|
||||
attachment = parsedMessageObj.attachments[0];
|
||||
}
|
||||
if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) {
|
||||
image = parsedMessageObj.images[0];
|
||||
}
|
||||
@ -448,7 +473,6 @@ class MessageTemplate extends LitElement {
|
||||
imageHTMLDialog = createImage(imageUrl)
|
||||
imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
nameMenu = html`
|
||||
@ -597,7 +621,6 @@ class MessageTemplate extends LitElement {
|
||||
<div style="display:flex;width:100%;height:100%;justify-content:center;align-items:center;cursor:pointer;color:var(--black)">
|
||||
${translate("chatpage.cchange40")}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
` : html``}
|
||||
${!this.isImageLoaded && image && this.viewImage ? html`
|
||||
@ -621,8 +644,53 @@ class MessageTemplate extends LitElement {
|
||||
|
||||
</div>
|
||||
` : image && isImageDeleted ? html`
|
||||
<p class="image-deleted-msg">This image has been deleted</p>
|
||||
<p class="image-deleted-msg">${translate("chatpage.cchange80")}</p>
|
||||
` : html``}
|
||||
${attachment && !isAttachmentDeleted ?
|
||||
html`
|
||||
<div @click=${async () => await this.downloadAttachment(attachment)} class="attachment-container">
|
||||
<div class="attachment-icon-container">
|
||||
<img
|
||||
src="/img/attachment-icon.png"
|
||||
alt="attachment-icon"
|
||||
class="attachment-icon" />
|
||||
</div>
|
||||
<div class="attachment-info">
|
||||
<p class="attachment-name">
|
||||
${attachment && attachment.attachmentName}
|
||||
</p>
|
||||
<p class="attachment-size">
|
||||
${roundToNearestDecimal(attachment.attachmentSize)} mb
|
||||
</p>
|
||||
</div>
|
||||
<vaadin-icon
|
||||
icon="vaadin:download-alt"
|
||||
slot="icon"
|
||||
class="download-icon">
|
||||
</vaadin-icon>
|
||||
${this.myAddress === this.messageObj.sender
|
||||
? html`
|
||||
<vaadin-icon
|
||||
@click=${(e) => {
|
||||
e.stopPropagation();
|
||||
this.openDeleteAttachment = true;
|
||||
}}
|
||||
class="image-delete-icon" icon="vaadin:close" slot="icon">
|
||||
</vaadin-icon>
|
||||
` : html``}
|
||||
</div>
|
||||
`
|
||||
: attachment && isAttachmentDeleted ?
|
||||
html`
|
||||
<div class="attachment-container">
|
||||
<div class="attachment-info">
|
||||
<p style=${"font-style: italic;"} class="attachment-name">
|
||||
${translate("chatpage.cchange82")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: html``}
|
||||
<div
|
||||
id="messageContent"
|
||||
class="message"
|
||||
@ -794,7 +862,7 @@ class MessageTemplate extends LitElement {
|
||||
this.openDeleteImage = false;
|
||||
}}>
|
||||
<div class="delete-image-msg">
|
||||
<p>Are you sure you want to delete this image?</p>
|
||||
<p>${translate("chatpage.cchange78")}</p>
|
||||
</div>
|
||||
<div class="modal-button-row" @click=${() => this.openDeleteImage = false}>
|
||||
<button class="modal-button-red">
|
||||
@ -812,6 +880,34 @@ class MessageTemplate extends LitElement {
|
||||
</button>
|
||||
</div>
|
||||
</mwc-dialog>
|
||||
<mwc-dialog
|
||||
hideActions
|
||||
?open=${this.openDeleteAttachment}
|
||||
@closed=${()=> {
|
||||
this.openDeleteAttachment = false;
|
||||
}}>
|
||||
<div class="delete-image-msg">
|
||||
<p>${translate("chatpage.cchange79")}</p>
|
||||
</div>
|
||||
<div class="modal-button-row" @click=${() => this.openDeleteAttachment = false}>
|
||||
<button class="modal-button-red">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="modal-button"
|
||||
@click=${() => {
|
||||
this.sendMessage({
|
||||
type: 'deleteAttachment',
|
||||
attachment: attachment,
|
||||
name: attachment.name,
|
||||
identifier: attachment.identifier,
|
||||
editedMessageObj: this.messageObj,
|
||||
})}
|
||||
}>
|
||||
Yes
|
||||
</button>
|
||||
</div>
|
||||
</mwc-dialog>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,6 +15,8 @@ class ChatTextEditor extends LitElement {
|
||||
isLoadingMessages: { type: Boolean },
|
||||
_sendMessage: { attribute: false },
|
||||
placeholder: { type: String },
|
||||
attachment: { type: Object },
|
||||
insertFile: { attribute: false },
|
||||
imageFile: { type: Object },
|
||||
insertImage: { attribute: false },
|
||||
iframeHeight: { type: Number },
|
||||
@ -482,15 +484,18 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
||||
<div class="file-picker-input-container">
|
||||
<input
|
||||
@change="${e => {
|
||||
this.insertImage(e.target.files[0]);
|
||||
const filePickerInput = this.shadowRoot.getElementById('file-picker')
|
||||
this.insertFile(e.target.files[0]);
|
||||
const filePickerInput = this.shadowRoot.getElementById('file-picker');
|
||||
if (filePickerInput) {
|
||||
filePickerInput.value = ""
|
||||
filePickerInput.value = "";
|
||||
}
|
||||
}
|
||||
}"
|
||||
id="file-picker"
|
||||
class="file-picker-input" type="file" name="myImage" accept="image/*" />
|
||||
class="file-picker-input"
|
||||
type="file"
|
||||
name="myImage"
|
||||
accept="image/*, .doc, .docx, .pdf, .zip, .pdf, .txt, .odt, .ods, .xls, .xlsx, .ppt, .pptx" />
|
||||
</div>
|
||||
</div>
|
||||
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
|
||||
@ -523,7 +528,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
||||
html`
|
||||
<div
|
||||
style="margin-bottom: 10px;
|
||||
${this.iframeId === 'newChat'
|
||||
${(this.iframeId === 'newChat' || this.iframeId === "newAttachmentChat")
|
||||
? 'display: none;'
|
||||
: 'display: flex;'}">
|
||||
${this.isLoading === false ? html`
|
||||
@ -692,6 +697,19 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
||||
repliedTo: '',
|
||||
version: 2
|
||||
};
|
||||
} else if (this.attachment && this.iframeId === 'newAttachmentChat') {
|
||||
messageObject = {
|
||||
messageText: trimmedMessage,
|
||||
attachments: [{
|
||||
service: "QCHAT_ATTACHMENT",
|
||||
name: '123456789123456789123456789',
|
||||
identifier: '123456',
|
||||
attachmentName: "123456789123456789123456789",
|
||||
attachmentSize: "123456"
|
||||
}],
|
||||
repliedTo: '',
|
||||
version: 2
|
||||
};
|
||||
} else {
|
||||
messageObject = {
|
||||
messageText: trimmedMessage,
|
||||
|
||||
4
qortal-ui-plugins/plugins/utils/roundToNearestDecimal.js
Normal file
4
qortal-ui-plugins/plugins/utils/roundToNearestDecimal.js
Normal file
@ -0,0 +1,4 @@
|
||||
export function roundToNearestDecimal(num) {
|
||||
const mb = num / 1000000;
|
||||
return Math.round(mb * 10) / 10;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user