upload img feedback

qortal-ui-core/language/us.json

@@ -488,7 +488,9 @@
       "cchange26": "File size exceeds 5 MB",
       "cchange27": "A registered name is required to send images",
       "cchange28": "This file is not an image",
-      "cchange29": "Maximum message size is 1000 bytes"
+      "cchange29": "Maximum message size is 1000 bytes",
+      "cchange30": "Uploading image. This may take up to one minute.",
+      "cchange31": "Deleting image. This may take up to one minute."
    },
    "welcomepage": {
       "wcchange1": "Welcome to Q-Chat",

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

@@ -59,7 +59,8 @@ class ChatPage extends LitElement {
             editedMessageObj: { type: Object },
             iframeHeight: { type: Number },
             chatMessageSize: { type: Number},
-            imageFile: {type: Object}
+            imageFile: {type: Object},
+            isUploadingImage: {type: Boolean}
         }
     }
 
@@ -337,6 +338,86 @@ class ChatPage extends LitElement {
         input[type=file]::-webkit-file-upload-button { 
             cursor: pointer; 
         }   
+
+        .dialogCustom {
+				position: fixed;
+    				z-index: 10000;
+    				display: flex;
+    				justify-content: center;
+    				flex-direction: column;
+    				align-items: center;
+    				top: 10px;
+    				right: 20px;
+                    user-select: none;
+			}
+
+        .dialogCustom p {
+            color: var(--black)
+        }
+        .row {
+				display: flex;
+				width: 100%;
+				align-items: center;
+			}
+
+            .between {
+				justify-content: space-between;
+			}
+
+        .dialogCustomInner {
+				min-width: 300px;
+				height: 40px;
+				background-color: var(--white);
+				box-shadow: var(--mdc-dialog-box-shadow, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));
+				padding: 10px;
+				border-radius: 4px;
+			}
+			.dialogCustomInner ul {
+				padding-left: 0px
+			}
+			.dialogCustomInner li {
+				margin-bottom: 10px;
+			}
+            .marginLoader {
+                margin-right: 8px;
+            }
+            .smallLoading,
+			.smallLoading:after {
+				border-radius: 50%;
+				width: 2px;
+				height: 2px;
+			}
+			.smallLoading {
+				border-width: 0.6em;
+				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: 10px;
+				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);
+				}
+			}
         
         `
     }
@@ -538,6 +619,31 @@ class ChatPage extends LitElement {
                     </div>
                 </div>
             </div>
+            ${(this.isUploadingImage || this.isDeletingImage) ? html`
+					<div class="dialogCustom">
+                    <div class="dialogCustomInner">
+						<div class="dialog-container">
+						
+								<div class="row between">
+									
+									<div class=${`smallLoading marginLoader`}></div>
+                                    <p>
+                                    ${this.isDeletingImage ?
+                                        translate("chatpage.cchange31") : translate("chatpage.cchange30")}
+										
+									</p>
+								</div>
+
+								
+							
+						</div>
+						
+					</div>
+                                    
+			</div>
+                                </div>
+			`: ''}			
+		
         </div>
         `
     }
@@ -1298,6 +1404,7 @@ class ChatPage extends LitElement {
         }
 
         if(outSideMsg && outSideMsg.type === 'delete'){
+            this.isDeletingImage = true
             const userName = outSideMsg.name
             const identifier = outSideMsg.identifier
             let compressedFile = ''
@@ -1356,6 +1463,7 @@ class ChatPage extends LitElement {
             selectedAddress: this.selectedAddress,
             worker: new WebWorkerImage()
                    })
+                   this.isDeletingImage = false
             } catch (error) {
                 console.error(error)
                 this.isLoading = false;
@@ -1387,7 +1495,7 @@ class ChatPage extends LitElement {
 
         }
         else if (outSideMsg && outSideMsg.type === 'image') {
-
+            this.isUploadingImage = true;
             const userName = await getName(this.selectedAddress.address);
             if (!userName) {
                 parentEpml.request('showSnackBar', get("chatpage.cchange27"));
@@ -1422,7 +1530,7 @@ class ChatPage extends LitElement {
                 this.chatEditor.enable();
                 return
             }
-          console.log({userName, identifier })
+        
                 try {
                     await publishData({
                         registeredName: userName,
@@ -1435,6 +1543,8 @@ class ChatPage extends LitElement {
                 selectedAddress: this.selectedAddress,
                 worker: new WebWorkerImage()
                        })
+                
+                this.isUploadingImage = false
                 } catch (error) {
                     console.error(error)
                 this.isLoading = false;

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

@@ -352,6 +352,10 @@ export const chatStyles = css`
 	.image-container {
 		display: flex;
 	}
+	.defaultSize {
+		width:45vh; 
+		height:40vh
+	}
 	.image-delete-icon {
 		margin-left: 5px;
     height: 20px;

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

@@ -47,6 +47,32 @@ class ChatScroller extends LitElement {
 
 
     render() {
+        console.log({messages: this.messages})
+
+        let testMessages = this.messages.reduce((messageArray, message)=> {
+            const lastGroupedMessage = messageArray[messageArray.length - 1]
+            let timestamp
+            let sender
+            let repliedToData
+            if(lastGroupedMessage){
+                timestamp = lastGroupedMessage.timestamp
+                sender = lastGroupedMessage.sender
+                repliedToData = lastGroupedMessage.repliedToData
+            }
+            const isSameGroup = Math.abs(timestamp - message.timestamp) < 600000 && sender === message.sender && !repliedToData
+       
+            if(isSameGroup){
+                messageArray[messageArray.length - 1].messages = [...(messageArray[messageArray.length - 1]?.messages || []), message]
+            } else {
+                messageArray.push({
+                    messages: [message],
+                    ...message
+                })
+            }
+            return messageArray
+        }, [])
+
+        console.log({testMessages})
         return html`
             <ul id="viewElement" class="chat-list clearfix">
                 <div id="upObserver"></div>
@@ -164,7 +190,8 @@ class MessageTemplate extends LitElement {
             setEditedMessageObj: { type: Function },
             focusChatEditor: { type: Function },
             sendMessage: { type: Function },
-            openDialogImage: {type: Function}
+            openDialogImage: {type: Function},
+            isImageLoaded: {type: Boolean}
         }
     }
 
@@ -177,6 +204,7 @@ class MessageTemplate extends LitElement {
         this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
         this.imageFetches = 0
         this.openDialogImage = false
+        this.isImageLoaded = false
     }
 
     static styles = [chatStyles]
@@ -248,7 +276,7 @@ class MessageTemplate extends LitElement {
         } else {
             avatarImg = html`<img src='/img/incognito.png'  style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
         }
-
+  
      const createImage=(imageUrl)=>{
        const imageHTMLRes = new Image();
         imageHTMLRes.src = imageUrl;
@@ -256,6 +284,9 @@ class MessageTemplate extends LitElement {
         imageHTMLRes.onclick= ()=> {
             this.openDialogImage = true
         }
+        imageHTMLRes.onload = ()=> {
+            this.isImageLoaded = true
+        }
         imageHTMLRes.onerror = ()=> {   
  
             console.log('inputRef', this.imageFetches)
@@ -273,6 +304,8 @@ class MessageTemplate extends LitElement {
                 imageHTMLRes.onclick= ()=> {
                     
                 }
+
+                this.isImageLoaded = true
             }
            
         }
@@ -325,7 +358,7 @@ class MessageTemplate extends LitElement {
                             </div>
                             `}
                             ${image && !isImageDeleted ? html`
-                                <div class="image-container">
+                                <div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}>
                                     ${imageHTML}<vaadin-icon
                                     @click=${() => this.sendMessage({
                                     type: 'delete',