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 + }}> +
+ +
+
+ +
+ + { + + this.openDialogImage = false + }} + > + ${translate("general.close")} + +
` } }