Merge pull request #95 from PhillipLangMartinez/bugfix/load-chat-image

fix reaction bug and load image

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -2144,7 +2144,8 @@ class ChatPage extends LitElement {
             const findOriginalMessageIndex = this.messagesRendered.findIndex(msg=> msg.reference === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference) )
             if(findOriginalMessageIndex !== -1){
                 const newMessagesRendered = [...this.messagesRendered]
-                newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, editedTimestamp: newMessage.timestamp }
+                newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName,
+					sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp }
                 this.messagesRendered = newMessagesRendered
             await this.getUpdateComplete();
             }

qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@@ -421,6 +421,10 @@ export const chatStyles = css`
 		height: 40vh;
 	}
 
+	.hideImg {
+		visibility: hidden;
+	}
+
 	.image-deleted-msg {
 		font-family: Roboto, sans-serif;
 		font-size: 14px;
@@ -659,5 +663,46 @@ export const chatStyles = css`
 		100%	        { background-color:rgba(var(--menuactivergb), 0)}
 	}
 
+	.smallLoading,
+  .smallLoading:after {
+      border-radius: 50%;
+      width: 2px;
+      height: 2px;
+  }
+
+  .smallLoading {
+      border-width: 0.8em;
+      border-style: solid;
+      border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2)
+      rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
+      font-size: 30px;
+      position: relative;
+      text-indent: -9999em;
+      transform: translateZ(0px);
+      animation: 1.1s linear 0s infinite normal none running loadingAnimation;
+  }
+
+  @-webkit-keyframes loadingAnimation {
+      0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      100% {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
+  }
+
+  @keyframes loadingAnimation {
+      0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      100% {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
+  }
+  
 
 `

qortal-ui-plugins/plugins/core/components/ChatScroller.js

@@ -418,15 +418,12 @@ class MessageTemplate extends LitElement {
                 setTimeout(() => {
                     this.imageFetches = this.imageFetches + 1;
                     imageHTMLRes.src = imageUrl;
-                }, 500);
+                }, 2000);
             } else {
-                imageHTMLRes.src = '/img/chain.png';
+                setTimeout(() => {
-                imageHTMLRes.style= "max-width:45vh; max-height:20vh; border-radius: 5px; filter: opacity(0.5)";
+                    this.imageFetches = this.imageFetches + 1;
-                imageHTMLRes.onclick= () => {
+                    imageHTMLRes.src = imageUrl;
-                    
+                }, 6000);
-                }
-
-                this.isImageLoaded = true
             }
         };
         return imageHTMLRes;
@@ -472,6 +469,7 @@ class MessageTemplate extends LitElement {
         }
         const escapedMessage = this.escapeHTML(message)
         const replacedMessage = escapedMessage.replace(new RegExp('\r?\n','g'), '<br />');
+       
         return hideit ? html`<li class="clearfix"></li>` : html`
             <li 
             class="clearfix message-parent" 
@@ -577,7 +575,7 @@ class MessageTemplate extends LitElement {
                                             </p>
                                     </div>
                                     `}
-                                    ${image && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
+                                    ${image  && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
                                         <div 
                                         @click=${()=> {
                                             this.viewImage = true
@@ -591,16 +589,26 @@ class MessageTemplate extends LitElement {
                                            
                                         </div>
                                     ` : html``}
+                                    ${!this.isImageLoaded && image && this.viewImage ? html`
+                                        <div style="display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute">
+                                        <div class=${`smallLoading`}></div>
+                                        </div>
+                                        
+                                    `: ''}
                                     ${image && !isImageDeleted && (this.viewImage || this.myAddress === this.messageObj.sender) ? html`
                                         <div 
-                                        class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
+                                        class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : '', !this.isImageLoaded ? 'hideImg': ''].join(' ')}
                                         style=${this.isFirstMessage && "margin-top: 10px;"}>
-                                            ${imageHTML}<vaadin-icon
+                                            ${imageHTML}
+                                            ${this.myAddress === this.messageObj.sender ? html`
+                                            <vaadin-icon
                                             @click=${() => {
                                                 this.openDeleteImage = true;
                                                 this.chatE
                                                 }}
                                             class="image-delete-icon"  icon="vaadin:close" slot="icon"></vaadin-icon>
+                                            ` : ''}
+                                           
                                         </div>
                                     ` : image && isImageDeleted ? html`
                                         <p class="image-deleted-msg">This image has been deleted</p>
@@ -637,7 +645,7 @@ class MessageTemplate extends LitElement {
                                                         ${edited}
                                                     </span>
                                                     `
-                                                : null
+                                                : ''
                                             }
                                             <message-time timestamp=${this.messageObj.timestamp}></message-time>
                                         </div>
@@ -847,7 +855,6 @@ class ChatMenu extends LitElement {
             console.log({error})
         }
     }
-
     render() {
         return html` 
             <div class="container">

qortal-ui-plugins/plugins/utils/replace-messages-edited.js

@@ -21,9 +21,12 @@ export const replaceMessagesEdited = async ({
 				let responseItem = { ...response[0] }
                 const decodeResponseItem = decodeMessageFunc(responseItem, isReceipient, _publicKey)
 				delete decodeResponseItem.timestamp
+				console.log({msg})
 				msgItem = {
 					...msg,
 					...decodeResponseItem,
+					senderName: msg.senderName,
+					sender: msg.sender,
 					editedTimestamp: response[0].timestamp,
 				}
 			}