diff --git a/img/chain.png b/img/chain.png
new file mode 100644
index 00000000..79eb8e15
Binary files /dev/null and b/img/chain.png differ
diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js
index 6f32da0b..3fc91ac6 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js
@@ -1644,6 +1644,7 @@ class ChatPage extends LitElement {
e.preventDefault();
const item_list = await navigator.clipboard.read();
+ console.log({item_list})
let image_type; // we will feed this later
const item = item_list.find( item => // choose the one item holding our image
item.types.some( type => { // does this item have our type
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
index 52456c95..b2da0d5e 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
@@ -347,4 +347,10 @@ export const chatStyles = css`
.message-parent:hover .image-delete-icon {
visibility: visible;
}
+
+ .imageContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
`
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index be2c9acb..e7ad2452 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -163,7 +163,8 @@ class MessageTemplate extends LitElement {
setRepliedToMessageObj: { type: Function },
setEditedMessageObj: { type: Function },
focusChatEditor: { type: Function },
- sendMessage: { type: Function }
+ sendMessage: { type: Function },
+ openDialogImage: {type: Function}
}
}
@@ -174,6 +175,8 @@ class MessageTemplate extends LitElement {
this.openDialogBlockUser = false
this.showBlockAddressIcon = false
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
+ this.imageFetches = 0
+ this.openDialogImage = false
}
static styles = [chatStyles]
@@ -205,7 +208,9 @@ class MessageTemplate extends LitElement {
}
}
+
render() {
+
const hidemsg = this.hideMessages
let message = ""
let reactions = []
@@ -226,6 +231,7 @@ class MessageTemplate extends LitElement {
}
let avatarImg = ''
let imageHTML = ''
+ let imageUrl = ''
let nameMenu = ''
let levelFounder = ''
let hideit = hidemsg.includes(this.messageObj.sender)
@@ -242,11 +248,42 @@ class MessageTemplate extends LitElement {
avatarImg = html`
`
}
+ const myFunction=()=>{
+ console.log('hello error')
+ }
+
+
+
if(image){
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
- const imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}`
- imageHTML = html`
`
+ 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)"
+ ;
+ }
+
+ }
}
@@ -336,6 +373,28 @@ class MessageTemplate extends LitElement {
toblockaddress=${this.messageObj.sender}
>
+ {
+ this.openDialogImage = false
+ }}>
+
+
+
![](${imageUrl})
+
+
+ {
+
+ this.openDialogImage = false
+ }}
+ >
+ ${translate("general.close")}
+
+
`
}
}