Fixed Avatar Bug + Fixed User Info Translations

qortal-ui-core/language/us.json

@@ -557,7 +557,10 @@
       "cchange53": "Receiver cannot be empty!",
       "cchange54": "Invalid Receiver!",
       "cchange55": "Transaction Successful!",
-      "cchange56": "Transaction Failed!"
+      "cchange56": "Transaction Failed!",
+      "cchange57": "User Info",
+      "cchange58": "SEND MESSAGE",
+      "cchange59": "TIP USER"
    },
    "welcomepage": {
       "wcchange1": "Welcome to Q-Chat",

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

@@ -280,8 +280,6 @@ class ChatRightPanel extends LitElement {
     }
 
 	render() {
-        console.log('this.groupMembers', this.groupMembers);
-        console.log(28, "Chat Right Panel Here");
         const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
 		return html`
         <div class="container">
@@ -360,7 +358,7 @@ class ChatRightPanel extends LitElement {
                 ?disabled="${this.isLoading}">
                 </vaadin-icon>
                 <div class="user-info-header">
-                ${translate("grouppage.gchange35")}
+                ${translate("chatpage.cchange57")}
                 </div>
                 <div 
                     class="send-message-button" 
@@ -372,7 +370,7 @@ class ChatRightPanel extends LitElement {
                         this.openUserInfo = false
                     }   
                 }">
-                    ${translate("grouppage.gchange56")}
+                    ${translate("chatpage.cchange58")}
                 </div>
                     <div 
                     style=${"margin-top: 5px;"} 
@@ -382,7 +380,7 @@ class ChatRightPanel extends LitElement {
                         this.openUserInfo = false
                         this.chatEditor.disable();
                     }}>
-                        ${translate("grouppage.gchange57")}
+                        ${translate("chatpage.cchange59")}
                     </div>
                 <div ?hidden="${!this.isLoading || this.message === ""}" style="text-align: right; height: 36px;">
                     <span ?hidden="${!this.isLoading}">

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

@@ -33,7 +33,7 @@ class ChatScroller extends LitElement {
             focusChatEditor: { attribute: false },
             sendMessage: { attribute: false },
             sendMessageForward: { attribute: false },
-            showLastMessageRefScroller: { type: Function },
+            showLastMessageRefScroller: { attribute: false },
             emojiPicker: { attribute: false },
             isLoadingMessages: { type: Boolean},
             setIsLoadingMessages: { attribute: false },
@@ -62,8 +62,6 @@ class ChatScroller extends LitElement {
     }
 
     render() {
-        console.log(6, "chat scroller here");
-        console.log(this.openTipUser, "openTipUser here");
         let formattedMessages = this.messages.reduce((messageArray, message, index) => {
             const lastGroupedMessage = messageArray[messageArray.length - 1];
             let timestamp;

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

@@ -93,6 +93,7 @@ class ChatSideNavHeads extends LitElement {
         }
         imageHTMLRes.onload = () => {
             this.isImageLoaded = true;
+            this.requestUpdate();
         }
         imageHTMLRes.onerror = () => {   
             if (this.imageFetches < 4) {
@@ -101,33 +102,64 @@ class ChatSideNavHeads extends LitElement {
                     imageHTMLRes.src = imageUrl;
                 }, 500);
             } else {
-               
-
                this.isImageLoaded = false
             }
         };
+        console.log(imageHTMLRes, "here8")
         return imageHTMLRes;
       }
 
     render() {
-        let avatarImg = '';
-        let backupAvatarImg = ''
+        console.log(9, 'chat side nav head');
+        console.log(this.isImageLoaded, 'Is image loaded');
+        console.log(this.chatInfo, 'Chat Info Here');
+        let avatarImg = ""
         if (this.chatInfo.name) {
             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 avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
            avatarImg = this.createImage(avatarUrl)
-          
         }
 
         return html`
             <li @click=${() => this.getUrl(this.chatInfo)} class="clearfix">
       ${this.isImageLoaded ? html`${avatarImg}` : html``}
-                ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` : html`` }
-                ${!this.isImageLoaded && this.chatInfo.name ? html`<div  style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''}
-                ${!this.isImageLoaded && this.chatInfo.groupName ? html`<div  style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''}
+      ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName
+        ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>`
+        : html``}
+      ${!this.isImageLoaded && this.chatInfo.name
+        ? html`<div
+            style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url
+              ? "var(--chatHeadBgActive)"
+              : "var(--chatHeadBg)"}; color: ${this.activeChatHeadUrl ===
+            this.chatInfo.url
+              ? "var(--chatHeadTextActive)"
+              : "var(--chatHeadText)"}; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize"
+          >
+            ${this.chatInfo.name.charAt(0)}
+          </div>`
+        : ""}
+      ${!this.isImageLoaded && this.chatInfo.groupName
+        ? html`<div
+            style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url
+              ? "var(--chatHeadBgActive)"
+              : "var(--chatHeadBg)"}; color: ${this.activeChatHeadUrl === this.chatInfo.url
+              ? "var(--chatHeadTextActive)"
+              : "var(--chatHeadText)"}; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize"
+          >
+            ${this.chatInfo.groupName.charAt(0)}
+          </div>`
+        : ""}
       <div>
-                    <div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> </div>
+        <div class="name">
+          <span style="float:left; padding-left: 8px; color: var(--chat-group);">
+            ${this.chatInfo.groupName
+              ? this.chatInfo.groupName
+              : this.chatInfo.name !== undefined
+              ? this.chatInfo.name
+              : this.chatInfo.address.substr(0, 15)}
+          </span>
+        </div>
       </div>
     </li>
     `
@@ -154,6 +186,12 @@ class ChatSideNavHeads extends LitElement {
         
     }
 
+    updated(changedProperties) {
+        if (changedProperties && changedProperties.has("avatarImg")) {
+            console.log(this.avatarImg, "avatarImg");
+        }
+    }
+
     shouldUpdate(changedProperties) {
         if(changedProperties.has('activeChatHeadUrl')){
             return true
@@ -161,6 +199,9 @@ class ChatSideNavHeads extends LitElement {
         if(changedProperties.has('chatInfo')){
             return true
         }
+        if(changedProperties.has('isImageLoaded')){
+            return true
+        }
         
         return false
       }

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

@@ -236,7 +236,6 @@ export class TipUser extends LitElement {
     }
 
   render() {
-    console.log(7, "Tip User Here");
     return html`
       <div class="tip-user-header">      
         <img src="/img/qort.png" width="32" height="32">