forked from Qortal/qortal-ui
Merge branch 'feature/persistent-data' into qchat-updates-integration
This commit is contained in:
commit
4aca3024dd
@ -121,7 +121,12 @@
|
||||
"import":"Knoten Importieren",
|
||||
"export":"Knoten Exportieren",
|
||||
"deletecustomnode":"Alle benutzerdefinierten Knoten entfernen",
|
||||
"warning":"Ihre bestehenden Knoten werden gelöscht und aus dem Backup neu erstellt."
|
||||
"warning":"Ihre bestehenden Knoten werden gelöscht und aus dem Backup neu erstellt.",
|
||||
"snack1":"Standardknoten erfolgreich gelöscht und hinzugefügt",
|
||||
"snack2":"UI mit Knoten verbunden",
|
||||
"snack3":"Benutzerdefinierter Knoten erfolgreich hinzugefügt und gespeichert",
|
||||
"snack4":"Knoten erfolgreich gespeichert als",
|
||||
"snack5":"Knoten erfolgreich importiert"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Blockhöhe",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Importar Nodos",
|
||||
"export":"Exportar Nodos",
|
||||
"deletecustomnode":"Eliminar todos los nodos personalizados",
|
||||
"warning":"Sus nodos existentes se eliminarán y se crearán nuevos a partir de la copia de seguridad."
|
||||
"warning":"Sus nodos existentes se eliminarán y se crearán nuevos a partir de la copia de seguridad.",
|
||||
"snack1":"Nodos estándar eliminados y agregados con éxito",
|
||||
"snack2":"UI conectada al nodo",
|
||||
"snack3":"Nodo personalizado agregado y guardado con éxito",
|
||||
"snack4":"Nodos guardados con éxito como",
|
||||
"snack5":"Nodos importados con éxito"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Altura del Bloque",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Importer des Noeuds",
|
||||
"export":"Exporter des Noeuds",
|
||||
"deletecustomnode":"Supprimer tous les noeuds personnalisés",
|
||||
"warning":"Vos noeuds existants seront supprimés et créés à partir de la sauvegarde."
|
||||
"warning":"Vos noeuds existants seront supprimés et créés à partir de la sauvegarde.",
|
||||
"snack1":"Noeuds standard supprimés et ajoutés avec succès",
|
||||
"snack2":"Interface utilisateur connectée au noeud",
|
||||
"snack3":"Noeud personnalisé ajouté et enregistré avec succès",
|
||||
"snack4":"Les noeuds ont été enregistrés avec succès sous",
|
||||
"snack5":"Les noeuds ont été importés avec succès"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Hauteur de bloc",
|
||||
|
@ -122,7 +122,12 @@
|
||||
"import":"आयात नोड्स",
|
||||
"export":"निर्यात नोड्स",
|
||||
"deletecustomnode":"सभी कस्टम नोड्स निकालें",
|
||||
"warning":"आपके मौजूदा नोड्स हटा दिए जाएंगे और बैकअप से नया बनाया जाएगा।"
|
||||
"warning":"आपके मौजूदा नोड्स हटा दिए जाएंगे और बैकअप से नया बनाया जाएगा।",
|
||||
"snack1":"मानक नोड्स को सफलतापूर्वक हटा दिया गया और जोड़ा गया",
|
||||
"snack2":"यूआई नोड से जुड़ा",
|
||||
"snack3":"कस्टम नोड को सफलतापूर्वक जोड़ा और सहेजा गया",
|
||||
"snack4":"नोड्स सफलतापूर्वक सहेजे गए",
|
||||
"snack5":"नोड्स सफलतापूर्वक आयात किए गए"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"ब्लॉक ऊँचाई",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Uvoz Čvorovi",
|
||||
"export":"Izvozni Čvorovi",
|
||||
"deletecustomnode":"Ukloni sve prilagođene čvorove",
|
||||
"warning":"Vaši postojeći čvorovi bit će izbrisani i novi će se stvoriti iz sigurnosne kopije."
|
||||
"warning":"Vaši postojeći čvorovi bit će izbrisani i novi će se stvoriti iz sigurnosne kopije.",
|
||||
"snack1":"Uspješno izbrisani i dodani standardni čvorovi",
|
||||
"snack2":"UI spojen na čvor",
|
||||
"snack3":"Uspješno dodan i spremljen prilagođeni čvor",
|
||||
"snack4":"Čvorovi su uspješno spremljeni kao",
|
||||
"snack5":"Čvorovi su uspješno uvezeni"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Visina bloka",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Csomópontok Importálása",
|
||||
"export":"Csomópontok Exportálása",
|
||||
"deletecustomnode":"Távolítsa el az összes egyéni csomópontot",
|
||||
"warning":"A meglévő csomópontok törlődnek, és a biztonsági másolatból újak jönnek létre."
|
||||
"warning":"A meglévő csomópontok törlődnek, és a biztonsági másolatból újak jönnek létre.",
|
||||
"snack1":"A szabványos csomópontok sikeresen törölve és hozzáadva",
|
||||
"snack2":"UI csatlakozik a csomóponthoz",
|
||||
"snack3":"Az egyéni csomópont sikeresen hozzáadva és mentve",
|
||||
"snack4":"A csomópontok sikeresen mentve másként",
|
||||
"snack5":"A csomópontok sikeresen importálva"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Blokk Magassága",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Importa Nodi",
|
||||
"export":"Esporta Nodi",
|
||||
"deletecustomnode":"Rimuovi tutti i nodi personalizzati",
|
||||
"warning":"I tuoi nodi esistenti verranno eliminati e dal backup verranno creati di nuovo."
|
||||
"warning":"I tuoi nodi esistenti verranno eliminati e dal backup verranno creati di nuovo.",
|
||||
"snack1":"Nodi standard eliminati e aggiunti con successo",
|
||||
"snack2":"Interfaccia utente collegata al nodo",
|
||||
"snack3":"Nodo personalizzato aggiunto e salvato con successo",
|
||||
"snack4":"Nodi salvati con successo come",
|
||||
"snack5":"Nodi importati correttamente"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Altezza blocco",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"노드 가져오기",
|
||||
"export":"노드 내보내기",
|
||||
"deletecustomnode":"모든 사용자 정의 노드 제거",
|
||||
"warning":"기존 노드가 삭제되고 백업에서 새로 생성됩니다."
|
||||
"warning":"기존 노드가 삭제되고 백업에서 새로 생성됩니다.",
|
||||
"snack1":"표준 노드를 성공적으로 삭제 및 추가했습니다.",
|
||||
"snack2":"노드에 연결된 UI",
|
||||
"snack3":"사용자 정의 노드를 성공적으로 추가하고 저장했습니다.",
|
||||
"snack4":"노드가 다음으로 성공적으로 저장되었습니다",
|
||||
"snack5":"노드를 성공적으로 가져왔습니다."
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"블록 높이",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Importer Noder",
|
||||
"export":"Eksporter Noder",
|
||||
"deletecustomnode":"Fjern alle egendefinerte noder",
|
||||
"warning":"Dine eksisterende noder vil bli slettet og nye opprettet fra sikkerhetskopien."
|
||||
"warning":"Dine eksisterende noder vil bli slettet og nye opprettet fra sikkerhetskopien.",
|
||||
"snack1":"Slettet og lagt til standardnoder",
|
||||
"snack2":"UI koblet til node",
|
||||
"snack3":"Egendefinert node er lagt til og lagret",
|
||||
"snack4":"Noder ble lagret som",
|
||||
"snack5":"Noder ble importert"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Blokkhøyde",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Importuj Węzły",
|
||||
"export":"Eksportuj Węzły",
|
||||
"deletecustomnode":"Usuń wszystkie niestandardowe węzły",
|
||||
"warning":"Twoje istniejące węzły zostaną usunięte, a z kopii zapasowej utworzone nowe."
|
||||
"warning":"Twoje istniejące węzły zostaną usunięte, a z kopii zapasowej utworzone nowe.",
|
||||
"snack1":"Pomyślnie usunięto i dodano standardowe węzły",
|
||||
"snack2":"Interfejs użytkownika połączony z węzłem",
|
||||
"snack3":"Pomyślnie dodano i zapisano niestandardowy węzeł",
|
||||
"snack4":"Węzły pomyślnie zapisane jako",
|
||||
"snack5":"Węzły pomyślnie zaimportowane"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Wysokość bloku",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Importar Nós",
|
||||
"export":"Exportar Nós",
|
||||
"deletecustomnode":"Remover todos os nós personalizados",
|
||||
"warning":"Seus nós existentes serão excluídos e do backup será criado."
|
||||
"warning":"Seus nós existentes serão excluídos e do backup será criado.",
|
||||
"snack1":"Nós padrão excluídos e adicionados com sucesso",
|
||||
"snack2":"UI conectada ao nó",
|
||||
"snack3":"Nó personalizado adicionado e salvo com sucesso",
|
||||
"snack4":"Nós salvos com sucesso como",
|
||||
"snack5":"Nós importados com sucesso"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Altura do Bloco",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Import Noduri",
|
||||
"export":"Export Noduri",
|
||||
"deletecustomnode":"Eliminati toate nodurile personalizate",
|
||||
"warning":"Nodurile dvs. existente vor fi sterse si din backup vor fi create noi."
|
||||
"warning":"Nodurile dvs. existente vor fi sterse si din backup vor fi create noi.",
|
||||
"snack1":"Noduri standard au fost sterse si adaugate cu succes",
|
||||
"snack2":"Interfata de utilizare conectata la nod",
|
||||
"snack3":"Nod personalizat adaugat si salvat cu succes",
|
||||
"snack4":"Nodurile au fost salvate cu succes ca",
|
||||
"snack5":"Nodurile au fost importate cu succes"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Dimensiunea blocului",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Uvoz Čvorova",
|
||||
"export":"Izvoz Čvorova",
|
||||
"deletecustomnode":"Uklonite sve prilagođene čvorove",
|
||||
"warning":"Vaši postojeći čvorovi će biti izbrisani, a iz rezervne kopije biće stvoreni novi."
|
||||
"warning":"Vaši postojeći čvorovi će biti izbrisani, a iz rezervne kopije biće stvoreni novi.",
|
||||
"snack1":"Uspešno su izbrisani i dodati standardni čvorovi",
|
||||
"snack2":"UI je povezan sa čvorom",
|
||||
"snack3":"Uspešno dodat i sačuvan prilagođeni čvor",
|
||||
"snack4":"Čvorovi su uspešno sačuvani kao",
|
||||
"snack5":"Čvorovi su uspešno uvezeni"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Visina Bloka",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"Импорт Узлов",
|
||||
"export":"Экспорт Узлов",
|
||||
"deletecustomnode":"Удалить все пользовательские узлы",
|
||||
"warning":"Существующие узлы будут удалены, а из резервной копии созданы новые."
|
||||
"warning":"Существующие узлы будут удалены, а из резервной копии созданы новые.",
|
||||
"snack1":"Успешно удалены и добавлены стандартные узлы",
|
||||
"snack2":"Пользовательский интерфейс, подключенный к узлу",
|
||||
"snack3":"Пользовательский узел успешно добавлен и сохранен",
|
||||
"snack4":"Узлы успешно сохранены как",
|
||||
"snack5":"Узлы успешно импортированы"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"Высота блока",
|
||||
|
@ -91,37 +91,42 @@
|
||||
"selectfile": "Select file",
|
||||
"dragfile": "Drag and drop backup here"
|
||||
},
|
||||
"settings": {
|
||||
"generalinfo": "General Account Info",
|
||||
"address": "Address",
|
||||
"publickey": "Public Key",
|
||||
"settings": "Settings",
|
||||
"account": "Account",
|
||||
"security": "Security",
|
||||
"qr_login_menu_item": "QR Login",
|
||||
"qr_login_description_1": "Scan this code to unlock your wallet on other device using the same password which you logged in with.",
|
||||
"qr_login_description_2": "Choose a password which you will use to unlock your wallet on other device after scanning the QR code.",
|
||||
"qr_login_button_1": "Show login QR code",
|
||||
"qr_login_button_2": "Generate login QR code",
|
||||
"notifications": "Notifications",
|
||||
"accountsecurity": "Account Security",
|
||||
"password": "Password",
|
||||
"download": "Download Backup File",
|
||||
"choose": "Please choose a password to encrypt your backup with. (This can be the same as the one you logged in with, or different)",
|
||||
"block": "Block Notifications (Coming Soon...)",
|
||||
"playsound": "Play Sound",
|
||||
"shownotifications": "Show Notifications",
|
||||
"nodeurl": "Node Url",
|
||||
"nodehint": "Select a node from the default list of nodes above or add a custom node to the list above by clicking on the button below",
|
||||
"addcustomnode": "Add Custom Node",
|
||||
"addandsave": "Add And Save",
|
||||
"protocol": "Protocol",
|
||||
"domain": "Domain",
|
||||
"port": "Port",
|
||||
"import": "Import Nodes",
|
||||
"export": "Export Nodes",
|
||||
"deletecustomnode": "Remove All Custom Nodes",
|
||||
"warning": "Your existing nodes will be deleted and from backup new created."
|
||||
"settings":{
|
||||
"generalinfo":"General Account Info",
|
||||
"address":"Address",
|
||||
"publickey":"Public Key",
|
||||
"settings":"Settings",
|
||||
"account":"Account",
|
||||
"security":"Security",
|
||||
"qr_login_menu_item":"QR Login",
|
||||
"qr_login_description_1":"Scan this code to unlock your wallet on other device using the same password which you logged in with.",
|
||||
"qr_login_description_2":"Choose a password which you will use to unlock your wallet on other device after scanning the QR code.",
|
||||
"qr_login_button_1":"Show login QR code",
|
||||
"qr_login_button_2":"Generate login QR code",
|
||||
"notifications":"Notifications",
|
||||
"accountsecurity":"Account Security",
|
||||
"password":"Password",
|
||||
"download":"Download Backup File",
|
||||
"choose":"Please choose a password to encrypt your backup with. (This can be the same as the one you logged in with, or different)",
|
||||
"block":"Block Notifications (Coming Soon...)",
|
||||
"playsound":"Play Sound",
|
||||
"shownotifications":"Show Notifications",
|
||||
"nodeurl":"Node Url",
|
||||
"nodehint":"Select a node from the default list of nodes above or add a custom node to the list above by clicking on the button below",
|
||||
"addcustomnode":"Add Custom Node",
|
||||
"addandsave":"Add And Save",
|
||||
"protocol":"Protocol",
|
||||
"domain":"Domain",
|
||||
"port":"Port",
|
||||
"import":"Import Nodes",
|
||||
"export":"Export Nodes",
|
||||
"deletecustomnode":"Remove All Custom Nodes",
|
||||
"warning":"Your existing nodes will be deleted and from backup new created.",
|
||||
"snack1":"Successfully deleted and added standard nodes",
|
||||
"snack2":"UI conected to node",
|
||||
"snack3":"Successfully added and saved custom node",
|
||||
"snack4":"Nodes successfully saved as",
|
||||
"snack5":"Nodes successfully imported"
|
||||
},
|
||||
"appinfo": {
|
||||
"blockheight": "Block Height",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"导入节点",
|
||||
"export":"导出节点",
|
||||
"deletecustomnode":"删除所有自定义节点",
|
||||
"warning":"您现有的节点将被删除并从备份中创建新的。"
|
||||
"warning":"您现有的节点将被删除并从备份中创建新的。",
|
||||
"snack1":"成功删除和添加标准节点",
|
||||
"snack2":"连接到节点的 UI",
|
||||
"snack3":"成功添加并保存自定义节点",
|
||||
"snack4":"节点成功保存为",
|
||||
"snack5":"节点成功导入"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"区块高度",
|
||||
|
@ -121,7 +121,12 @@
|
||||
"import":"導入節點",
|
||||
"export":"導出節點",
|
||||
"deletecustomnode":"刪除所有自定義節點",
|
||||
"warning":"您現有的節點將被刪除並從備份中創建新的。"
|
||||
"warning":"您現有的節點將被刪除並從備份中創建新的。",
|
||||
"snack1":"成功刪除和添加標準節點",
|
||||
"snack2":"連接到節點的 UI",
|
||||
"snack3":"成功添加並保存自定義節點",
|
||||
"snack4":"節點成功保存為",
|
||||
"snack5":"節點成功導入"
|
||||
},
|
||||
"appinfo":{
|
||||
"blockheight":"區塊高度",
|
||||
|
@ -19,7 +19,8 @@
|
||||
"dependencies": {
|
||||
"@material/mwc-list": "0.27.0",
|
||||
"@material/mwc-select": "0.27.0",
|
||||
"emoji-picker-js": "https://github.com/Qortal/emoji-picker-js"
|
||||
"emoji-picker-js": "https://github.com/Qortal/emoji-picker-js",
|
||||
"localforage": "^1.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.19.1",
|
||||
@ -62,4 +63,4 @@
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit'
|
||||
import { render } from 'lit/html.js'
|
||||
import { Epml } from '../../../epml.js'
|
||||
import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
|
||||
|
||||
import localForage from "localforage";
|
||||
registerTranslateConfig({
|
||||
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
|
||||
})
|
||||
@ -20,6 +20,10 @@ import '@material/mwc-button'
|
||||
import '@material/mwc-dialog'
|
||||
import '@material/mwc-icon'
|
||||
|
||||
const messagesCache = localForage.createInstance({
|
||||
name: "messages-cache",
|
||||
});
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
class ChatPage extends LitElement {
|
||||
@ -229,9 +233,12 @@ class ChatPage extends LitElement {
|
||||
`
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
async firstUpdated() {
|
||||
const keys = await messagesCache.keys()
|
||||
console.log({ keys })
|
||||
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
|
||||
|
||||
|
||||
// this.changeLanguage();
|
||||
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
|
||||
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
|
||||
@ -340,6 +347,20 @@ class ChatPage extends LitElement {
|
||||
parentEpml.imReady();
|
||||
}
|
||||
|
||||
async updated(changedProperties) {
|
||||
if (changedProperties.has('messagesRendered')) {
|
||||
let data = {}
|
||||
console.log('chatId', this._chatId)
|
||||
console.log(this.isReceipient)
|
||||
const chatReference1 = this.isReceipient ? 'direct' : 'group';
|
||||
const chatReference2 = this._chatId
|
||||
if (chatReference1 && chatReference2) {
|
||||
await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
changeLanguage() {
|
||||
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||
|
||||
@ -380,28 +401,64 @@ class ChatPage extends LitElement {
|
||||
|
||||
async getOldMessage(scrollElement) {
|
||||
|
||||
if (this._messages.length <= 15 && this._messages.length >= 1) { // 15 is the default number of messages...
|
||||
|
||||
let __msg = [...this._messages]
|
||||
this._messages = []
|
||||
this.messagesRendered = [...__msg, ...this.messagesRendered]
|
||||
|
||||
|
||||
if (this.isReceipient) {
|
||||
const getInitialMessages = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=20&reverse=true&before=${scrollElement.messageObj.timestamp}`,
|
||||
});
|
||||
|
||||
const decodeMsgs = getInitialMessages.map((eachMessage) => {
|
||||
|
||||
return this.decodeMessage(eachMessage)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
this.messagesRendered = [...decodeMsgs, ...this.messagesRendered].sort(function (a, b) {
|
||||
return a.timestamp
|
||||
- b.timestamp
|
||||
})
|
||||
await this.getUpdateComplete();
|
||||
|
||||
scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
|
||||
return { oldMessages: __msg, scrollElement: scrollElement }
|
||||
} else if (this._messages.length > 15) {
|
||||
this.messagesRendered = [...this._messages.splice(this._messages.length - 15), ...this.messagesRendered]
|
||||
await this.getUpdateComplete();
|
||||
|
||||
scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
|
||||
return { oldMessages: this._messages.splice(this._messages.length - 15), scrollElement: scrollElement }
|
||||
} else {
|
||||
const getInitialMessages = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=20&reverse=true&before=${scrollElement.messageObj.timestamp}`,
|
||||
});
|
||||
|
||||
|
||||
const decodeMsgs = getInitialMessages.map((eachMessage) => {
|
||||
|
||||
return this.decodeMessage(eachMessage)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
this.messagesRendered = [...decodeMsgs, ...this.messagesRendered].sort(function (a, b) {
|
||||
return a.timestamp
|
||||
- b.timestamp
|
||||
})
|
||||
await this.getUpdateComplete();
|
||||
|
||||
scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async processMessages(messages, isInitial) {
|
||||
async processMessages(messages, isInitial) {
|
||||
|
||||
if (isInitial) {
|
||||
|
||||
this.messages = messages.map((eachMessage) => {
|
||||
@ -417,7 +474,10 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
})
|
||||
|
||||
this._messages = [...this.messages]
|
||||
this._messages = [...this.messages].sort(function (a, b) {
|
||||
return a.timestamp
|
||||
- b.timestamp
|
||||
})
|
||||
|
||||
const adjustMessages = () => {
|
||||
|
||||
@ -427,47 +487,33 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
// TODO: Determine number of initial messages by screen height...
|
||||
this._messages.length <= 15 ? adjustMessages() : this._initialMessages = this._messages.splice(this._messages.length - 15);
|
||||
|
||||
this._initialMessages = this._messages
|
||||
|
||||
|
||||
this.messagesRendered = this._initialMessages
|
||||
|
||||
// try {
|
||||
// const viewElement = this.shadowRoot.querySelector('chat-scroller')
|
||||
// console.log({viewElement})
|
||||
// // viewElement.scrollTop = this.viewElement.scrollHeight + 50
|
||||
// } catch (error) {
|
||||
// console.error(error)
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
this.isLoadingMessages = false
|
||||
setTimeout(() => this.downElementObserver(), 500)
|
||||
} else {
|
||||
|
||||
let _newMessages = messages.map((eachMessage) => {
|
||||
if (eachMessage.isText === true) {
|
||||
let _eachMessage = this.decodeMessage(eachMessage)
|
||||
messages.forEach((eachMessage) => {
|
||||
|
||||
const _eachMessage = this.decodeMessage(eachMessage)
|
||||
|
||||
|
||||
this.renderNewMessage(_eachMessage)
|
||||
|
||||
if (this.messageSignature !== eachMessage.signature) {
|
||||
this.messageSignature = eachMessage.signature
|
||||
// What are we waiting for, send in the message immediately...
|
||||
this.renderNewMessage(_eachMessage)
|
||||
}
|
||||
return _eachMessage
|
||||
} else {
|
||||
let _eachMessage = this.decodeMessage(eachMessage)
|
||||
|
||||
if (this.messageSignature !== eachMessage.signature) {
|
||||
this.messageSignature = eachMessage.signature
|
||||
this.renderNewMessage(_eachMessage)
|
||||
}
|
||||
return _eachMessage
|
||||
}
|
||||
})
|
||||
|
||||
this.newMessages = this.newMessages.concat(_newMessages)
|
||||
|
||||
|
||||
// this.newMessages = this.newMessages.concat(_newMessages)
|
||||
this.messagesRendered = [...this.messagesRendered].sort(function (a, b) {
|
||||
return a.timestamp
|
||||
- b.timestamp
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@ -537,27 +583,27 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
async renderNewMessage(newMessage) {
|
||||
async renderNewMessage(newMessage) {
|
||||
|
||||
const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
|
||||
|
||||
if (newMessage.sender === this.selectedAddress.address) {
|
||||
|
||||
this.messagesRendered = [...this.messagesRendered, newMessage]
|
||||
await this.getUpdateComplete();
|
||||
this.messagesRendered = [...this.messagesRendered, newMessage]
|
||||
await this.getUpdateComplete();
|
||||
|
||||
viewElement.scrollTop = viewElement.scrollHeight;
|
||||
} else if (this.isUserDown) {
|
||||
|
||||
// Append the message and scroll to the bottom if user is down the page
|
||||
this.messagesRendered = [...this.messagesRendered, newMessage]
|
||||
await this.getUpdateComplete();
|
||||
this.messagesRendered = [...this.messagesRendered, newMessage]
|
||||
await this.getUpdateComplete();
|
||||
|
||||
viewElement.scrollTop = viewElement.scrollHeight;
|
||||
} else {
|
||||
|
||||
this.messagesRendered = [...this.messagesRendered, newMessage]
|
||||
await this.getUpdateComplete();
|
||||
this.messagesRendered = [...this.messagesRendered, newMessage]
|
||||
await this.getUpdateComplete();
|
||||
|
||||
this.showNewMesssageBar();
|
||||
}
|
||||
@ -601,7 +647,7 @@ class ChatPage extends LitElement {
|
||||
|
||||
async fetchChatMessages(chatId) {
|
||||
|
||||
const initDirect = (cid) => {
|
||||
const initDirect = async (cid) => {
|
||||
|
||||
let initial = 0
|
||||
|
||||
@ -621,6 +667,9 @@ class ChatPage extends LitElement {
|
||||
directSocketLink = `ws://${nodeUrl}/websockets/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const directSocket = new WebSocket(directSocketLink);
|
||||
|
||||
// Open Connection
|
||||
@ -630,13 +679,37 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
// Message Event
|
||||
directSocket.onmessage = (e) => {
|
||||
directSocket.onmessage = async (e) => {
|
||||
|
||||
if (initial === 0) {
|
||||
const isReceipient = this.chatId.includes('direct')
|
||||
|
||||
|
||||
const chatReference1 = isReceipient ? 'direct' : 'group';
|
||||
const chatReference2 = this.chatId.split('/')[1];
|
||||
const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`);
|
||||
|
||||
let getInitialMessages = []
|
||||
if (cachedData && cachedData.length !== 0) {
|
||||
const lastMessage = cachedData[cachedData.length - 1]
|
||||
const newMessages = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=true&after=${lastMessage.timestamp}`,
|
||||
});
|
||||
getInitialMessages = [...cachedData, ...newMessages]
|
||||
} else {
|
||||
getInitialMessages = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=true`,
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
this.processMessages(getInitialMessages, true)
|
||||
|
||||
this.isLoadingMessages = true
|
||||
this.processMessages(JSON.parse(e.data), true)
|
||||
initial = initial + 1
|
||||
|
||||
} else {
|
||||
|
||||
this.processMessages(JSON.parse(e.data), false)
|
||||
@ -692,12 +765,38 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
// Message Event
|
||||
groupSocket.onmessage = (e) => {
|
||||
groupSocket.onmessage = async (e) => {
|
||||
|
||||
if (initial === 0) {
|
||||
const isGroup = this.chatId.includes('group')
|
||||
const chatReference1 = isGroup ? 'group' : 'direct';
|
||||
const chatReference2 = this.chatId.split('/')[1];
|
||||
|
||||
const cachedData = await messagesCache.getItem(`${chatReference1}-${chatReference2}`);
|
||||
|
||||
let getInitialMessages = []
|
||||
if (cachedData && cachedData.length !== 0) {
|
||||
|
||||
const lastMessage = cachedData[cachedData.length - 1]
|
||||
|
||||
const newMessages = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/chat/messages?txGroupId=${groupId}&limit=20&reverse=true&after=${lastMessage.timestamp}`,
|
||||
});
|
||||
|
||||
getInitialMessages = [...cachedData, ...newMessages]
|
||||
} else {
|
||||
getInitialMessages = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/chat/messages?txGroupId=${groupId}&limit=20&reverse=true`,
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
this.processMessages(getInitialMessages, true)
|
||||
|
||||
this.isLoadingMessages = true
|
||||
this.processMessages(JSON.parse(e.data), true)
|
||||
initial = initial + 1
|
||||
} else {
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user