From 22ca790f51d54cba738ed0f05bd071e2f83bff71 Mon Sep 17 00:00:00 2001 From: Phillip Date: Tue, 13 Jun 2023 13:30:23 +0300 Subject: [PATCH] added tab notification and fixed websocket q-chat --- core/src/components/login-view/login-view.js | 7 +- core/src/components/show-plugin.js | 99 +- core/src/redux/app/actions/app-core.js | 15 +- core/src/redux/app/app-action-types.js | 4 +- core/src/redux/app/app-reducer.js | 39 +- plugins/plugins/core/components/ChatPage.js | 1522 +++++++++-------- .../plugins/core/components/ChatScroller.js | 704 ++++---- .../core/components/qdn-action-types.js | 5 +- .../plugins/core/qdn/browser/browser.src.js | 32 + plugins/plugins/core/streams/streams.js | 44 +- 10 files changed, 1355 insertions(+), 1116 deletions(-) diff --git a/core/src/components/login-view/login-view.js b/core/src/components/login-view/login-view.js index c29be5ab..24bef336 100644 --- a/core/src/components/login-view/login-view.js +++ b/core/src/components/login-view/login-view.js @@ -15,7 +15,7 @@ import './login-section.js' import '../qort-theme-toggle.js' import settings from '../../functional-components/settings-page.js' -import { addAutoLoadImageChat, removeAutoLoadImageChat, addChatLastSeen, allowQAPPAutoAuth, removeQAPPAutoAuth, removeQAPPAutoLists, allowQAPPAutoLists } from '../../redux/app/app-actions.js' +import { addAutoLoadImageChat, removeAutoLoadImageChat, addChatLastSeen, allowQAPPAutoAuth, removeQAPPAutoAuth, removeQAPPAutoLists, allowQAPPAutoLists, addTabInfo, setTabNotifications, setNewTab } from '../../redux/app/app-actions.js' window.reduxStore = store window.reduxAction = { @@ -25,7 +25,10 @@ window.reduxAction = { allowQAPPAutoAuth: allowQAPPAutoAuth, removeQAPPAutoAuth: removeQAPPAutoAuth, allowQAPPAutoLists: allowQAPPAutoLists, - removeQAPPAutoLists: removeQAPPAutoLists + removeQAPPAutoLists: removeQAPPAutoLists, + addTabInfo: addTabInfo, + setTabNotifications: setTabNotifications, + setNewTab: setNewTab } const animationDuration = 0.7 // Seconds diff --git a/core/src/components/show-plugin.js b/core/src/components/show-plugin.js index 06bb247c..df00889d 100644 --- a/core/src/components/show-plugin.js +++ b/core/src/components/show-plugin.js @@ -6,9 +6,13 @@ import { addPluginRoutes } from '../plugins/addPluginRoutes.js' import { repeat } from 'lit/directives/repeat.js'; import ShortUniqueId from 'short-unique-id'; import { setNewTab } from '../redux/app/app-actions.js' +import localForage from "localforage"; import '@material/mwc-icon' +const chatLastSeen = localForage.createInstance({ + name: "chat-last-seen", +}); class ShowPlugin extends connect(store)(LitElement) { static get properties() { return { @@ -20,6 +24,9 @@ class ShowPlugin extends connect(store)(LitElement) { currentTab: { type: Number }, tabs: { type: Array }, theme: { type: String, reflect: true }, + tabInfo: { type: Object }, + chatLastSeen: { type: Array }, + chatHeads: { type: Array } } } @@ -50,7 +57,7 @@ class ShowPlugin extends connect(store)(LitElement) { } .hideIframe { - visibility: hidden; + display: none; position: absolute; zIndex: -10; } @@ -58,7 +65,7 @@ class ShowPlugin extends connect(store)(LitElement) { .showIframe { zIndex: 1; position: relative; - visibility: visible; + display: block; } .tabs { @@ -155,6 +162,20 @@ class ShowPlugin extends connect(store)(LitElement) { color: #999; --mdc-icon-size: 20px; } + + .count { + position: absolute; + background: red; + color: white; + padding: 5px; + font-size: 12px; + border-radius: 50%; + height: 10px; + width: 10px; + display: flex; + justify-content: center; + align-items: center; + } ` } @@ -165,6 +186,9 @@ class ShowPlugin extends connect(store)(LitElement) { this.tabs = [] this.uid = new ShortUniqueId() this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' + this.tabInfo = {} + this.chatLastSeen = [] + this.chatHeads = [] } async getUpdateComplete() { @@ -189,9 +213,44 @@ class ShowPlugin extends connect(store)(LitElement) { return myPlug === undefined ? 'about:blank' : `${window.location.origin}/plugin/${myPlug.domain}/${myPlug.page}${this.linkParam}` } + return html`
- ${this.tabs.map((tab, index) => html` + ${this.tabs.map((tab, index) => { + let title = '' + let count = 0 + if (tab.myPlugObj && tab.myPlugObj.title) { + title = tab.myPlugObj.title + } + if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) { + title = this.tabInfo[tab.id].name + } + if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) { + count = this.tabInfo[tab.id].count + } + + if (tab.myPlugObj && tab.myPlugObj.url === 'q-chat') { + for (const chat of this.chatHeads) { + + const lastReadMessage = this.chatLastSeen.find((ch) => { + let id + if (chat.groupId === 0) { + id = chat.groupId + } else if (chat.groupId) { + id = chat.groupId + } else { + id = chat.address + } + + return ch.key.includes(id) + }) + if (lastReadMessage && lastReadMessage.timestamp < chat.timestamp) { + count = count + 1 + } + } + + } + return html`
this.currentTab = index} @@ -200,15 +259,20 @@ class ShowPlugin extends connect(store)(LitElement) {
${tab.myPlugObj && tab.myPlugObj.mwcicon}
+ ${count ? html` +
${count}
+ ` : ''} +
       - ${tab.myPlugObj && tab.myPlugObj.title} + ${title}      
{ this.removeTab(index) }}>x
- `)}    + ` + })}