Merge pull request #91 from PhillipLangMartinez/bugfix/revert-no-avatar-img-fix-old-messages

fix old messages, avatar, 404 imgs, name color

qortal-ui-core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "qortal-ui-core",
-	"version": "2.2.5",
+	"version": "3.0.0",
 	"description": "Qortal Project - decentralize the world - Data storage, communications, web hosting, decentralized trading, complete infrastructure for the future blockchain-based Internet",
 	"keywords": [
 		"QORT",
@@ -17,7 +17,7 @@
 	"author": "QORTAL <admin@qortal.org>",
 	"license": "GPL-3.0",
 	"dependencies": {
-		"@hapi/hapi": "21.1.0",
+		"@hapi/hapi": "21.2.0",
 		"@hapi/inert": "7.0.0",
 		"sass": "1.57.1"
 	},
@@ -53,17 +53,17 @@
 		"@polymer/paper-spinner": "3.0.2",
 		"@polymer/paper-toast": "3.0.1",
 		"@polymer/paper-tooltip": "3.0.1",
-		"@rollup/plugin-alias": "4.0.2",
+		"@rollup/plugin-alias": "4.0.3",
 		"@rollup/plugin-babel": "6.0.3",
-		"@rollup/plugin-commonjs": "24.0.0",
+		"@rollup/plugin-commonjs": "24.0.1",
 		"@rollup/plugin-node-resolve": "15.0.1",
 		"@rollup/plugin-replace": "5.0.2",
 		"@rollup/plugin-terser": "0.3.0",
-		"@vaadin/button": "23.3.3",
+		"@vaadin/button": "23.3.5",
-		"@vaadin/grid": "23.3.3",
+		"@vaadin/grid": "23.3.5",
-		"@vaadin/icons": "23.3.3",
+		"@vaadin/icons": "23.3.5",
-		"@vaadin/password-field": "23.3.3",
+		"@vaadin/password-field": "23.3.5",
-		"@vaadin/tooltip": "23.3.3",
+		"@vaadin/tooltip": "23.3.5",
 		"asmcrypto.js": "2.3.2",
 		"bcryptjs": "2.4.3",
 		"epml": "0.3.3",
@@ -73,7 +73,7 @@
 		"pwa-helpers": "0.9.1",
 		"redux": "4.2.0",
 		"redux-thunk": "2.4.2",
-		"rollup": "3.10.0",
+		"rollup": "3.10.1",
 		"rollup-plugin-node-globals": "1.4.0",
 		"rollup-plugin-progress": "1.1.2",
 		"rollup-plugin-scss": "3.0.0",

qortal-ui-plugins/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "qortal-ui-plugins",
-	"version": "2.2.5",
+	"version": "3.0.0",
 	"description": "Qortal Project - decentralize the world - Data storage, communications, web hosting, decentralized trading, complete infrastructure for the future blockchain-based Internet",
 	"keywords": [
 		"QORT",
@@ -63,24 +63,24 @@
 		"@polymer/paper-slider": "3.0.1",
 		"@polymer/paper-spinner": "3.0.2",
 		"@polymer/paper-tooltip": "3.0.1",
-		"@rollup/plugin-alias": "4.0.2",
+		"@rollup/plugin-alias": "4.0.3",
 		"@rollup/plugin-babel": "6.0.3",
-		"@rollup/plugin-commonjs": "24.0.0",
+		"@rollup/plugin-commonjs": "24.0.1",
 		"@rollup/plugin-node-resolve": "15.0.1",
 		"@rollup/plugin-replace": "5.0.2",
 		"@rollup/plugin-terser": "0.3.0",
-		"@vaadin/avatar": "23.3.3",
+		"@vaadin/avatar": "23.3.5",
-		"@vaadin/button": "23.3.3",
+		"@vaadin/button": "23.3.5",
-		"@vaadin/grid": "23.3.3",
+		"@vaadin/grid": "23.3.5",
-		"@vaadin/icons": "23.3.3",
+		"@vaadin/icons": "23.3.5",
-		"@vaadin/tooltip": "23.3.3",
+		"@vaadin/tooltip": "23.3.5",
 		"epml": "0.3.3",
 		"file-saver": "2.0.5",
-		"highcharts": "10.3.2",
+		"highcharts": "10.3.3",
 		"html-escaper": "3.0.3",
 		"lit": "2.6.1",
 		"lit-translate": "2.0.1",
-		"rollup": "3.10.0",
+		"rollup": "3.10.1",
 		"rollup-plugin-node-globals": "1.4.0",
 		"rollup-plugin-progress": "1.1.2",
 		"rollup-plugin-web-worker-loader": "1.6.1"

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

@@ -1613,7 +1613,7 @@ class ChatPage extends LitElement {
 
         const isRecipient = this.chatId.includes('direct') === true ? true : false;
         const groupId = this.chatId.split('/')[1];
-        if(!isRecipient && groupId !== 0){
+        if(!isRecipient && groupId.toString() !== '0'){
 
             try {
                 const getMembers = await parentEpml.request("apiCall", {

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

@@ -77,8 +77,8 @@ export const chatStyles = css`
 	}
 
 	.message-data-my-name {
-		color: #cf21e8;
+		color: var(--mdc-theme-primary);
-		text-shadow: 0 0 3px #cf21e8;
+		text-shadow: 0 0 3px var(--mdc-theme-primary);
 	}
 
 	.message-data-time {

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

@@ -52,7 +52,8 @@ class ChatScroller extends LitElement {
             userName: { type: String },
             selectedHead: { type: Object },
             goToRepliedMessage: { attribute: false },
-            getOldMessageAfter: {attribute: false}
+            getOldMessageAfter: {attribute: false},
+            listSeenMessages: {type: Array}
         }
     }
 
@@ -67,6 +68,11 @@ class ChatScroller extends LitElement {
         this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")   
         this.openTipUser = false;
         this.openUserInfo = false;
+        this.listSeenMessages= []
+    }
+
+    addSeenMessage(val){
+        this.listSeenMessages.push(val)
     }
 
     render() {
@@ -138,6 +144,8 @@ class ChatScroller extends LitElement {
                             .setUserName=${(val) => this.setUserName(val)}
                             id=${message.reference}
                             .goToRepliedMessage=${this.goToRepliedMessage}
+                            .addSeenMessage=${(val)=> this.addSeenMessage(val)}
+                            .listSeenMessages=${this.listSeenMessages}
                             >
                             </message-template>`
                     )
@@ -284,6 +292,9 @@ class MessageTemplate extends LitElement {
             setUserName: { attribute: false },
             openTipUser:{ type: Boolean },
             goToRepliedMessage: { attribute: false },
+            listSeenMessages: {type: Array},
+            addSeenMessage: {attribute: false},
+            
         }
     }
 
@@ -300,7 +311,7 @@ class MessageTemplate extends LitElement {
         this.isFirstMessage = false
         this.isSingleMessageInGroup = false
         this.isLastMessageInGroup = false
-        this.viewImage = false
+        this.viewImage =  false
     }
 
     static styles = [chatStyles]
@@ -331,6 +342,12 @@ class MessageTemplate extends LitElement {
         }
     }
 
+    firstUpdated(){
+        if(this.listSeenMessages.includes(this.messageObj.reference)){
+            this.viewImage =  true
+        }
+    }
+
     render() {
         const hidemsg = this.hideMessages;
         let message = "";
@@ -381,9 +398,9 @@ class MessageTemplate extends LitElement {
             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.messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
-            avatarImg = html`<img src="${avatarUrl}" style="max-width:100%; max-height:100%;" onerror="this.onerror=null; this.src='/img/qortal-chat-logo.png';" />`;
+            avatarImg = html`<img src="${avatarUrl}" style="max-width:100%; max-height:100%;" onerror="this.onerror=null; this.src='/img/incognito.png';" />`;
         } else {
-            avatarImg = html`<img src='/img/qortal-chat-logo.png'  style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
+            avatarImg = html`<img src='/img/incognito.png'  style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
         }
   
      const createImage = (imageUrl) => {
@@ -455,7 +472,6 @@ 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" 
@@ -558,14 +574,14 @@ class MessageTemplate extends LitElement {
                   ]))}
                                         ` : ''}
                                         
-                                            <!-- ${repliedToData.decodedMessage.messageText} -->
+                                            </p>
-                                        </p>
                                     </div>
                                     `}
                                     ${image && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
                                         <div 
                                         @click=${()=> {
                                             this.viewImage = true
+                                            this.addSeenMessage(this.messageObj.reference)
                                         }}
                                         class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
                                         style=${this.isFirstMessage && "margin-top: 10px;"}>
@@ -599,6 +615,9 @@ class MessageTemplate extends LitElement {
                                         ${version.toString() === '1' ? html`
                                         ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
                                         ` : ''}
+                                        ${version.toString() === '0' ? html`
+                                        ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
+                                        ` : ''}
                                         <div 
                                             style=${isEdited 
                                             ? "justify-content: space-between;" 

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

@@ -158,12 +158,12 @@ class LevelFounder extends LitElement {
 
     renderLevel() {
         let adresslevel = this.memberInfo.level;
-        return html `
+        return adresslevel ? html `
             <img id="level-img" src=${`/img/badges/level-${adresslevel}.png`} alt=${`badge-${adresslevel}`} class="message-data-level" />
             <paper-tooltip class="level-img-tooltip" for="level-img" position="top" >
             ${translate("mintingpage.mchange27")} ${adresslevel}
             </paper-tooltip>
-        `
+        ` : ''
     }
 
     _textMenu(event) {

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

@@ -85,7 +85,7 @@ export class UserInfo extends LitElement {
           ${!this.isImageLoaded && this.selectedHead && !this.selectedHead.name ? 
             html`
               <div class="avatar-container">
-                <img src="/img/qortal-chat-logo.png" alt="avatar" />
+                <img src="/img/incognito.png" alt="avatar" />
               </div>`
             : ""}
         <div class="user-info-header">

qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js

@@ -272,7 +272,7 @@ class NameRegistration extends LitElement {
         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 url = `${nodeUrl}/arbitrary/THUMBNAIL/${name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`;
-        return html`<img src="${url}" onerror="this.onerror=null; this.src='/img/qortal-chat-logo.png';">`
+        return html`<img src="${url}" onerror="this.onerror=null; this.src='/img/incognito.png';">`
     }
 
     renderAvatarButton(nameObj) {

qortal-ui-plugins/plugins/core/qdn/websites.src.js

@@ -243,7 +243,7 @@ class Websites extends LitElement {
                     <mwc-tab label="${translate("websitespage.schange2")}" icon="desktop_windows" @click="${(e) => this.displayTabContent('followed')}"></mwc-tab>
                     <mwc-tab label="${translate("websitespage.schange3")}" icon="block" @click="${(e) => this.displayTabContent('blocked')}"></mwc-tab>
                 </mwc-tab-bar>
-                <z id="tabs-1-content">
+                <div id="tabs-1-content">
                     <div id="tab-browse-content">
 	                  <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
         	                <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("websitespage.schange1")}</h2>
@@ -703,7 +703,7 @@ class Websites extends LitElement {
         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 url = `${nodeUrl}/arbitrary/THUMBNAIL/${name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
-        return html`<a class="visitSite" href="browser/index.html?name=${name}&service=${this.service}"><img src="${url}" onerror="this.src='/img/qortal-chat-logo.png';"></a>`
+        return html`<a class="visitSite" href="browser/index.html?name=${name}&service=${this.service}"><img src="${url}" onerror="this.src='/img/incognito.png';"></a>`
     }
 
     renderRelayModeText() {

qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list.src.js

@@ -534,7 +534,7 @@ class SponsorshipList extends LitElement {
 										${sponsorship?.name ? html`
 											<img  src=${sponsorship.url}
 												class="avatar-img"
-												onerror="this.src='/img/qortal-chat-logo.png'"
+												onerror="this.src='/img/incognito.png'"
 											/>
 										` : ''}		
 										${sponsorship?.name || sponsorship.address}