Merge branch 'feature/implement-logic-edit-reply-messages' of https://github.com/PhillipLangMartinez/qortal-ui into feature/implement-UI-edit-reply-messages

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);

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;
+	}
 `

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`<img src='/img/incognito.png'  style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
         }
 
+     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`<img src="${imageUrl}" style="max-width:45vh; max-height:40vh; border-radius: 5px" onerror="this.onerror=null; this.src='/img/incognito.png';" />`
+             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)"
+                    ;
+                }
+               
+            }
         }
      
 
@@ -342,6 +379,28 @@ class MessageTemplate extends LitElement {
                 toblockaddress=${this.messageObj.sender}
             >
             </chat-modals>
+            <mwc-dialog id="showDialogPublicKey"    ?open=${this.openDialogImage}  @closed=${()=> {
+                this.openDialogImage = false
+            }}>
+					<div class="dialog-header" >
+						
+					</div>
+					<div class="dialog-container imageContainer">
+					<img src=${imageUrl} style="height: 80vh ; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px" />
+					</div>
+                 
+					<mwc-button
+						slot="primaryAction"
+						dialogAction="cancel"
+						class="red"
+						@click=${()=>{
+							
+						this.openDialogImage = false
+						}}
+					>
+					${translate("general.close")}
+					</mwc-button>
+				</mwc-dialog>
         `
     }
 }