From 44e5689fb6acc9b3fdf8c6a391018a029032a98a Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Thu, 3 Nov 2022 10:36:31 +0200 Subject: [PATCH] max img size and img popup --- qortal-ui-core/language/us.json | 4 +- .../plugins/core/components/ChatPage.js | 28 +++++++-- .../core/components/ChatScroller-css.js | 2 + .../plugins/core/components/ChatScroller.js | 62 ++++++++++--------- 4 files changed, 61 insertions(+), 35 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 8f0b9c8e..a26d6f21 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -484,7 +484,9 @@ "cchange22": "Loading Messages...", "cchange23": "Cannot Decrypt Message!", "cchange24": "Maximum Characters per message is 255", - "cchange25": "Edit Message" + "cchange25": "Edit Message", + "cchange26": "File size exceeds 5 MB", + "cchange27": "A registered name is required to send images" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 3fc91ac6..a15f406f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -1129,7 +1129,8 @@ class ChatPage extends LitElement { }) }) try { - console.log({userName, compressedFile, identifier, selectedAddress: this.selectedAddress}) + + await publishData({ registeredName: userName , file : compressedFile , @@ -1171,13 +1172,21 @@ class ChatPage extends LitElement { } else if(outSideMsg && outSideMsg.type === 'image'){ + + const userName = await getName(this.selectedAddress.address) + if(!userName){ + parentEpml.request('showSnackBar', get("chatpage.cchange27")) + this.isLoading = false; + this.chatEditor.enable(); + return + } const id = this.uid(); const identifier = `qchat_${id}` let compressedFile = '' await new Promise(resolve =>{ new Compressor( outSideMsg.imageFile, { - quality: 0.6, + quality: .6, maxWidth: 500, success(result){ const file = new File([result], "name", { @@ -1191,10 +1200,19 @@ class ChatPage extends LitElement { }, }) }) - + + const fileSize = compressedFile.size + if(fileSize > 5000000){ + parentEpml.request('showSnackBar', get("chatpage.cchange26")) + this.isLoading = false; + this.chatEditor.enable(); + return + } + console.log({userName, identifier }) + await publishData({ - registeredName: userName , - file : compressedFile , + registeredName: userName, + file : compressedFile, service: 'IMAGE', identifier : identifier, parentEpml, diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index b2da0d5e..9ef4e943 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -15,6 +15,8 @@ export const chatStyles = css` scrollbar-color: var(--thumbBG) var(--scrollbarBG); --mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-secondary: var(--mdc-theme-primary); + --mdc-dialog-max-width: 85vw; + --mdc-dialog-max-height: 95vh; } * :focus-visible { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index e7ad2452..d2f99701 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -231,6 +231,7 @@ class MessageTemplate extends LitElement { } let avatarImg = '' let imageHTML = '' + let imageHTMLDialog = '' let imageUrl = '' let nameMenu = '' let levelFounder = '' @@ -248,8 +249,34 @@ class MessageTemplate extends LitElement { avatarImg = html`` } - const myFunction=()=>{ - console.log('hello error') + const createImage=(imageUrl)=>{ + const imageHTMLRes = new Image(); + imageHTMLRes.src = imageUrl; + imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer" + imageHTMLRes.onclick= ()=> { + this.openDialogImage = true + } + let p = 0 + imageHTMLRes.onerror = ()=> { + + console.log('inputRef', this.imageFetches) + if(this.imageFetches < 4){ + + setTimeout(()=> { + this.imageFetches = this.imageFetches + 1 + + imageHTMLRes.src = imageUrl + }, 500) + + } else { + imageHTMLRes.src = '/img/chain.png' + imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; filter: opacity(0.5)" + ; + } + + } + + return imageHTMLRes } @@ -258,32 +285,9 @@ class MessageTemplate extends LitElement { const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}` - imageHTML = html`` - imageHTML = new Image(); - imageHTML.src = imageUrl; - imageHTML.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer" - imageHTML.onclick= ()=> { - this.openDialogImage = true - } - let p = 0 - imageHTML.onerror = ()=> { - - console.log('inputRef', this.imageFetches) - if(this.imageFetches < 4){ - - setTimeout(()=> { - this.imageFetches = this.imageFetches + 1 - - imageHTML.src = imageUrl - }, 500) - - } else { - imageHTML.src = '/img/chain.png' - imageHTML.style= "max-width:45vh; max-height:40vh; border-radius: 5px; filter: opacity(0.5)" - ; - } - - } + imageHTML = createImage(imageUrl) + imageHTMLDialog = createImage(imageUrl) + imageHTMLDialog.style= "height: 80vh ; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px" } @@ -380,7 +384,7 @@ class MessageTemplate extends LitElement {
- + ${imageHTMLDialog}