jschulthess/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

max img size and img popup

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-11-03 10:36:31 +02:00
parent 0c04aa7c88
commit 44e5689fb6
4 changed files with 61 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
qortal-ui-core/language/us.json
View File

@ -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",

28
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -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,

2
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
View File

@ -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 {

62
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -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`<img src='/img/incognito.png' style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
}
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`<img src="/auhoetuh/atouehtoueh" style="max-width:45vh; max-height:40vh; border-radius: 5px" onerror="myFunction()" />`
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 {
</div>
<div class="dialog-container imageContainer">
<img src=${imageUrl} style="height: 80vh ; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px" />
${imageHTMLDialog}
</div>
<mwc-button