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 ffb5b43c..a8e88b97 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -1681,23 +1681,22 @@ class ChatPage extends LitElement { editorConfig.getMessageSize(editorConfig.mirrorElement.value) if (e.type === 'click') { - e.preventDefault(); e.stopPropagation(); } if (e.type === 'paste') { - 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 - if( type.startsWith( 'image/' ) ) { - image_type = type; // store which kind of image type it is - return true; - } - } ) + item.types.some( type => { // does this item have our type + if (type.startsWith( 'image/')) { + image_type = type; // store which kind of image type it is + return true; + } + }) ); const blob = item && await item.getType( image_type ); var file = new File([blob], "name", { @@ -1705,14 +1704,10 @@ class ChatPage extends LitElement { }); editorConfig.insertImage(file) - navigator.clipboard.readText().then(clipboardText => { - let escapedText = editorConfig.escape(clipboardText); - editor.insertText(escapedText); }).catch(err => { - // Fallback if everything fails... let textData = (e.originalEvent || e).clipboardData.getData('text/plain'); editor.insertText(textData); diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index aea9d27e..77c144cd 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -364,4 +364,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 8c719642..242d3416 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)" + ; + } + + } } @@ -342,6 +379,28 @@ class MessageTemplate extends LitElement { toblockaddress=${this.messageObj.sender} > + { + this.openDialogImage = false + }}> +
+ +
+
+ +
+ + { + + this.openDialogImage = false + }} + > + ${translate("general.close")} + +
` } }