Qortal
/
qortal-ui
mirror of https://github.com/qortal/qortal-ui
4
1
Fork 4
Code Issues Projects Releases Wiki Activity
Browse Source

added tab notification and fixed websocket q-chat

pull/176/head
Phillip 1 year ago
parent
02a78173a3
commit
22ca790f51
10 changed files with 1355 additions and 1116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      core/src/components/login-view/login-view.js
  2. 99
      core/src/components/show-plugin.js
  3. 15
      core/src/redux/app/actions/app-core.js
  4. 4
      core/src/redux/app/app-action-types.js
  5. 39
      core/src/redux/app/app-reducer.js
  6. 1522
      plugins/plugins/core/components/ChatPage.js
  7. 704
      plugins/plugins/core/components/ChatScroller.js
  8. 5
      plugins/plugins/core/components/qdn-action-types.js
  9. 32
      plugins/plugins/core/qdn/browser/browser.src.js
  10. 44
      plugins/plugins/core/streams/streams.js

7
core/src/components/login-view/login-view.js
Unescape View File

@ -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

99
core/src/components/show-plugin.js
Unescape View File

@ -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`
<div class="tabs">
${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`
<div
class="tab ${this.currentTab === index ? 'active' : ''}"
@click=${() => this.currentTab = index}
@ -200,15 +259,20 @@ class ShowPlugin extends connect(store)(LitElement) {
<div class="${this.currentTab === index ? "iconActive" : "iconInactive"}">
<mwc-icon>${tab.myPlugObj && tab.myPlugObj.mwcicon}</mwc-icon>
</div>
${count ? html`
<div class="count">${count}</div>
` : ''}
<div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
${tab.myPlugObj && tab.myPlugObj.title}
${title}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="close" @click=${() => { this.removeTab(index) }}>x</div>
</div>
</div>
`)}&nbsp;&nbsp;&nbsp;
`
})}&nbsp;&nbsp;&nbsp;
<button
class="add-tab-button"
title="Add Tab"
@ -227,7 +291,7 @@ class ShowPlugin extends connect(store)(LitElement) {
${repeat(this.tabs, (tab) => tab.id, (tab, index) => html`
<div class=${this.currentTab === index ? "showIframe" : "hideIframe"}>
<iframe src="${plugSrc(tab.myPlugObj)}" id="showPluginFrame${index}" style="width:100%;
<iframe src="${plugSrc(tab.myPlugObj)}" data-id=${tab.id} id="showPluginFrame${index}" style="width:100%;
height:calc(var(--window-height) - 102px);
border:0;
padding:0;
@ -321,7 +385,7 @@ class ShowPlugin extends connect(store)(LitElement) {
this.tabs = copiedTabs
}
stateChanged(state) {
async stateChanged(state) {
const split = state.app.url.split('/')
const newRegisteredUrls = state.app.registeredUrls
@ -352,6 +416,23 @@ class ShowPlugin extends connect(store)(LitElement) {
if (newLinkParam !== this.linkParam) {
this.linkParam = newLinkParam
}
if (this.tabInfo !== state.app.tabInfo) {
this.tabInfo = state.app.tabInfo
}
if (this.chatLastSeen !== state.app.chatLastSeen) {
this.chatLastSeen = state.app.chatLastSeen
}
if (state.app.chatHeads !== this.unModifiedChatHeads) {
let chatHeads = []
if (state.app.chatHeads && state.app.chatHeads.groups) {
chatHeads = [...chatHeads, ...state.app.chatHeads.groups]
}
if (state.app.chatHeads && state.app.chatHeads.direct) {
chatHeads = [...chatHeads, ...state.app.chatHeads.direct]
}
this.chatHeads = chatHeads
this.unModifiedChatHeads = state.app.chatHeads
}
if (state.app.newTab) {
const newTab = state.app.newTab
@ -623,8 +704,8 @@ class NavBar extends connect(store)(LitElement) {
<div class="app-list">
${repeat(this.myMenuList, (plugin) => plugin.url, (plugin, index) => html`
<div class="app-icon" @click=${() => {
this.changePage(plugin)
}}>
this.changePage(plugin)
}}>
<div class="app-icon-box">
<mwc-icon class="menuIcon">${plugin.mwcicon}</mwc-icon>
</div>

15
core/src/redux/app/actions/app-core.js
Unescape View File

@ -1,5 +1,5 @@
// Core App Actions here...
import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB } from '../app-action-types.js'
import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB, ADD_TAB_INFO, SET_TAB_NOTIFICATIONS } from '../app-action-types.js'
export const doUpdateBlockInfo = (blockObj) => {
return (dispatch, getState) => {
@ -127,3 +127,16 @@ export const setNewTab = (payload) => {
}
}
export const addTabInfo = (payload) => {
return {
type: ADD_TAB_INFO,
payload
}
}
export const setTabNotifications = (payload) => {
return {
type: SET_TAB_NOTIFICATIONS,
payload
}
}

4
core/src/redux/app/app-action-types.js
Unescape View File

@ -25,4 +25,6 @@ export const ALLOW_QAPP_AUTO_LISTS = 'ALLOW_QAPP_AUTO_LISTS'
export const REMOVE_QAPP_AUTO_LISTS = 'REMOVE_QAPP_AUTO_LISTS'
export const SET_CHAT_LAST_SEEN = 'SET_CHAT_LAST_SEEN'
export const ADD_CHAT_LAST_SEEN = 'ADD_CHAT_LAST_SEEN'
export const SET_NEW_TAB = 'SET_NEW_TAB'
export const SET_NEW_TAB = 'SET_NEW_TAB'
export const ADD_TAB_INFO = 'ADD_TAB_INFO'
export const SET_TAB_NOTIFICATIONS = 'SET_TAB_NOTIFICATIONS'

39
core/src/redux/app/app-reducer.js
Unescape View File

@ -1,6 +1,6 @@
// Loading state, login state, isNavDrawOpen state etc. None of this needs to be saved to localstorage.
import { loadStateFromLocalStorage, saveStateToLocalStorage } from '../../localStorageHelpers.js'
import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB } from './app-action-types.js'
import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB, ADD_TAB_INFO, SET_TAB_NOTIFICATIONS } from './app-action-types.js'
import { initWorkersReducer } from './reducers/init-workers.js'
import { loginReducer } from './reducers/login-reducer.js'
import { setNode, addNode } from './reducers/manage-node.js'
@ -47,7 +47,8 @@ const INITIAL_STATE = {
qAPPAutoAuth: loadStateFromLocalStorage('qAPPAutoAuth') || false,
qAPPAutoLists: loadStateFromLocalStorage('qAPPAutoLists') || false,
chatLastSeen: [],
newTab: null
newTab: null,
tabInfo: {}
}
export default (state = INITIAL_STATE, action) => {
@ -228,6 +229,40 @@ export default (state = INITIAL_STATE, action) => {
newTab: action.payload
}
}
case ADD_TAB_INFO: {
const newTabInfo = action.payload
if (state.tabInfo[newTabInfo.id] && state.tabInfo[newTabInfo.id].name && newTabInfo.name === state.tabInfo[newTabInfo.id].name) break
return {
...state,
tabInfo: {
...state.tabInfo,
[newTabInfo.id]: {
...newTabInfo,
count: 0
}
}
}
}
case SET_TAB_NOTIFICATIONS: {
const count = action.payload.count
const name = action.payload.name
const newTabInfo = {}
Object.keys(state.tabInfo).forEach((key) => {
const tab = state.tabInfo[key]
if (tab.name == name) {
newTabInfo[key] = {
...tab,
count
}
} else {
newTabInfo[key] = tab
}
})
return {
...state,
tabInfo: newTabInfo
}
}
default:
return state

1522
plugins/plugins/core/components/ChatPage.js
View File

File diff suppressed because it is too large Load Diff

704
plugins/plugins/core/components/ChatScroller.js
View File

File diff suppressed because it is too large Load Diff

5
plugins/plugins/core/components/qdn-action-types.js
Unescape View File

@ -44,4 +44,7 @@ export const ENCRYPT_DATA = 'ENCRYPT_DATA'
export const DECRYPT_DATA = 'DECRYPT_DATA'
// SAVE_FILE
export const SAVE_FILE = 'SAVE_FILE'
export const SAVE_FILE = 'SAVE_FILE'
//SET_TAB_NOTIFICATIONS
export const SET_TAB_NOTIFICATIONS = 'SET_TAB_NOTIFICATIONS'

32
plugins/plugins/core/qdn/browser/browser.src.js
Unescape View File

@ -892,10 +892,42 @@ class WebBrowser extends LitElement {
this.service = data.service;
this.identifier = data.identifier;
this.displayUrl = url;
const frame = window.frameElement
let tabId = ""
if (frame && frame.dataset.id) {
tabId = frame.dataset.id
}
if (data.name === 'Q-Mail') {
localStorage.setItem("Q-Mail-last-visited", Date.now())
}
window.parent.reduxStore.dispatch(window.parent.reduxAction.addTabInfo({
name: data.name,
service: data.service,
id: tabId ? tabId : ""
}))
return;
case actions.SET_TAB_NOTIFICATIONS: {
const { count } = data
if (isNaN(count)) {
response['error'] = 'count is not a number'
break
}
if (count === undefined) {
response['error'] = 'missing count'
break
}
window.parent.reduxStore.dispatch(window.parent.reduxAction.setTabNotifications({
name: this.name,
count: count
}))
response = true
break
}
case actions.PUBLISH_QDN_RESOURCE: {
// optional fields: encrypt:boolean recipientPublicKey:string

44
plugins/plugins/core/streams/streams.js
Unescape View File

@ -115,6 +115,7 @@ let closeGracefully = false
let onceLoggedIn = false
let retryOnClose = false
let canPing = false
let timeoutId
parentEpml.subscribe('logged_in', async isLoggedIn => {
@ -127,18 +128,16 @@ parentEpml.subscribe('logged_in', async isLoggedIn => {
if (window.parent.location.protocol === "https:") {
activeChatSocketLink = `wss://${nodeUrl}/websockets/chat/active/${window.parent.reduxStore.getState().app.selectedAddress.address}`;
activeChatSocketLink = `wss://${nodeUrl}/websockets/chat/active/${window.parent.reduxStore.getState().app.selectedAddress.address}?encoding=BASE64`;
} else {
activeChatSocketLink = `ws://${nodeUrl}/websockets/chat/active/${window.parent.reduxStore.getState().app.selectedAddress.address}`;
activeChatSocketLink = `ws://${nodeUrl}/websockets/chat/active/${window.parent.reduxStore.getState().app.selectedAddress.address}?encoding=BASE64`;
}
const activeChatSocket = new WebSocket(activeChatSocketLink);
// Open Connection
activeChatSocket.onopen = () => {
console.log(`[SOCKET]: Connected.`);
socketObject = activeChatSocket
initial = initial + 1
@ -147,28 +146,26 @@ parentEpml.subscribe('logged_in', async isLoggedIn => {
// Message Event
activeChatSocket.onmessage = (e) => {
if (e.data === 'pong') {
clearTimeout(timeoutId);
activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 45000)
return
}
try {
chatHeadWatcher(JSON.parse(e.data))
} catch (error) {
}
chatHeadWatcher(JSON.parse(e.data))
}
// Closed Event
activeChatSocket.onclose = () => {
console.log(`[SOCKET]: CLOSED`);
clearInterval(activeChatSocketTimeout)
if (closeGracefully === false && initial <= 52) {
if (initial <= 52) {
parentEpml.request('showSnackBar', "Connection to the Qortal Core was lost, is your Core running ?")
retryOnClose = true
setTimeout(pingActiveChatSocket, 10000)
initial = initial + 1
} else {
parentEpml.request('showSnackBar', "Cannot connect to the Qortal Core, restart UI and Core!")
}
if (closeGracefully === false) {
retryOnClose = true
setTimeout(pingActiveChatSocket, 10000)
}
}
@ -188,18 +185,21 @@ parentEpml.subscribe('logged_in', async isLoggedIn => {
initChatHeadSocket()
onceLoggedIn = true
activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 295000)
activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 45000)
} else if (retryOnClose) {
retryOnClose = false
clearTimeout(activeChatSocketTimeout)
initChatHeadSocket()
onceLoggedIn = true
activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 295000)
activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 45000)
} else if (canPing) {
socketObject.send('ping')
activeChatSocketTimeout = setTimeout(pingActiveChatSocket, 295000)
timeoutId = setTimeout(() => {
socketObject.close();
clearTimeout(activeChatSocketTimeout)
}, 5000);
}
} else {

Write Preview
Loading…
Cancel
Save