From 648db552e7943f7bb57a6129945bfdb6df46f6e1 Mon Sep 17 00:00:00 2001 From: Phillip Date: Thu, 2 Feb 2023 10:19:52 +0200 Subject: [PATCH 1/3] fix bug that when a user clicks on a notification and goes back to the app it correctly show the chat page. before it would have an infinite spinner --- .../notification-actions/new-message.js | 5 +-- .../core/messaging/q-chat/q-chat.src.js | 39 ++++++++++++++++--- 2 files changed, 35 insertions(+), 9 deletions(-) diff --git a/qortal-ui-core/src/notifications/notification-actions/new-message.js b/qortal-ui-core/src/notifications/notification-actions/new-message.js index faaaad32..f430fdd2 100644 --- a/qortal-ui-core/src/notifications/notification-actions/new-message.js +++ b/qortal-ui-core/src/notifications/notification-actions/new-message.js @@ -2,7 +2,6 @@ import { store } from '../../store.js' import { doPageUrl } from '../../redux/app/app-actions.js' export const newMessage = (data) => { - const alert = playSound(data.sound) // Should I show notification ? @@ -18,7 +17,7 @@ export const newMessage = (data) => { } notify.onclick = (e) => { - const pageUrl = `/app/q-chat/${data.req.url}` + const pageUrl = `/app/q-chat/?chat=${data.req.url}` store.dispatch(doPageUrl(pageUrl)) } } else { @@ -26,7 +25,7 @@ export const newMessage = (data) => { const notify = new Notification(data.title, data.options) notify.onclick = (e) => { - const pageUrl = `/app/q-chat/${data.req.url}` + const pageUrl = `/app/q-chat/?chat=${data.req.url}` store.dispatch(doPageUrl(pageUrl)) } } diff --git a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js index a8b268e5..fbe12aa5 100644 --- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js +++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js @@ -29,7 +29,7 @@ import StarterKit from '@tiptap/starter-kit' import Underline from '@tiptap/extension-underline'; import Placeholder from '@tiptap/extension-placeholder' import { Editor, Extension } from '@tiptap/core' - +import Highlight from '@tiptap/extension-highlight' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) class Chat extends LitElement { @@ -55,7 +55,7 @@ class Chat extends LitElement { userFoundModalOpen: { type: Boolean }, userSelected: { type: Object }, editor: {type: Object}, - groupInvites: { type: Array } + groupInvites: { type: Array }, } } @@ -118,6 +118,7 @@ class Chat extends LitElement { } async connectedCallback() { + super.connectedCallback(); await this.getUpdateCompleteTextEditor(); @@ -147,15 +148,36 @@ class Chat extends LitElement { }}) ] }) + + this.unsubscribeStore = window.parent.reduxStore.subscribe(() => { + try { + + if(window.parent.location && window.parent.location.search){ + const queryString = window.parent.location.search; + const params = new URLSearchParams(queryString); + const chat = params.get("chat") + if(chat && chat !== this.activeChatHeadUrl){ + let url = window.parent.location.href; + let newUrl = url.split("?")[0]; + window.parent.history.pushState({}, "", newUrl); + this.setActiveChatHeadUrl(chat) + } + } + } catch (error) { + console.error(error) + } + + }); } disconnectedCallback() { super.disconnectedCallback(); - this.editor.destroy() - + this.editor.destroy(); + this.unsubscribeStore(); } + updatePlaceholder(editor, text){ editor.extensionManager.extensions.forEach((extension) => { if (extension.name === "placeholder") { @@ -215,7 +237,7 @@ class Chat extends LitElement {
- ${window.parent.location.pathname !== "/app/q-chat" || this.activeChatHeadUrl ? html`${this.renderChatPage(this.chatId)}` : html`${this.renderChatWelcomePage()}`} + ${this.activeChatHeadUrl ? html`${this.renderChatPage()}` : html`${this.renderChatWelcomePage()}`}
@@ -367,6 +389,8 @@ class Chat extends LitElement { ` } + + async firstUpdated() { this.changeLanguage(); this.changeTheme(); @@ -482,8 +506,11 @@ class Chat extends LitElement { }) }) parentEpml.imReady() + } + + setOpenPrivateMessage(props) { this.openPrivateMessage = props.open; this.shadowRoot.getElementById("sendTo").value = props.name @@ -839,7 +866,7 @@ class Chat extends LitElement { }) } - renderChatPage(chatId) { + renderChatPage() { // Check for the chat ID from and render chat messages // Else render Welcome to Q-CHat From e07884c1e1a718485de3760a4c04581a33167d05 Mon Sep 17 00:00:00 2001 From: Phillip Date: Fri, 3 Feb 2023 16:07:14 +0200 Subject: [PATCH 2/3] last message timestamp with red dot --- qortal-ui-core/language/us.json | 3 +- qortal-ui-core/package.json | 5 +- qortal-ui-core/src/components/app-view.js | 18 ++++ .../src/components/login-view/login-view.js | 6 +- qortal-ui-core/src/plugins/streams.js | 5 ++ .../src/redux/app/actions/app-core.js | 15 +++- .../src/redux/app/app-action-types.js | 4 +- qortal-ui-core/src/redux/app/app-reducer.js | 42 ++++++++- .../plugins/core/components/ChatHead.js | 88 ++++++++++++++++--- .../plugins/core/components/ChatPage.js | 18 ++-- .../plugins/core/components/TimeAgo.js | 3 +- 11 files changed, 178 insertions(+), 29 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 55ad9dd7..6f625f02 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -579,7 +579,8 @@ "cchange71": "and", "cchange72": "other", "cchange73": "s", - "cchange74": "reacted with" + "cchange74": "reacted with", + "cchange90": "No messages" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", diff --git a/qortal-ui-core/package.json b/qortal-ui-core/package.json index 5515942d..8e4f2ad3 100644 --- a/qortal-ui-core/package.json +++ b/qortal-ui-core/package.json @@ -77,9 +77,10 @@ "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-progress": "1.1.2", "rollup-plugin-scss": "3.0.0", - "rollup-plugin-web-worker-loader": "1.6.1" + "rollup-plugin-web-worker-loader": "1.6.1", + "localforage": "1.10.0" }, "engines": { "node": ">=16.17.1" } -} \ No newline at end of file +} diff --git a/qortal-ui-core/src/components/app-view.js b/qortal-ui-core/src/components/app-view.js index cffc315f..60d02813 100644 --- a/qortal-ui-core/src/components/app-view.js +++ b/qortal-ui-core/src/components/app-view.js @@ -4,6 +4,11 @@ import { store } from '../store.js' import { Epml } from '../epml.js' import { addTradeBotRoutes } from '../tradebot/addTradeBotRoutes.js' import { get, translate, translateUnsafeHTML } from 'lit-translate' +import localForage from "localforage"; + +const chatLastSeen = localForage.createInstance({ + name: "chat-last-seen", +}); import '@polymer/paper-icon-button/paper-icon-button.js' import '@polymer/paper-progress/paper-progress.js' @@ -27,6 +32,7 @@ import './user-info-view/user-info-view.js' import '../functional-components/side-menu.js' import '../functional-components/side-menu-item.js' import './start-minting.js' +import { setChatLastSeen } from '../redux/app/app-actions.js' const parentEpml = new Epml({type: 'WINDOW', source: window.parent}) @@ -1386,6 +1392,17 @@ class AppView extends connect(store)(LitElement) { } } + const getChatLastSeen=async() => { + let items = []; + + await chatLastSeen.iterate(function(value, key, iterationNumber) { + + items.push({key, timestamp: value}); + }) + store.dispatch(setChatLastSeen(items)) + return items; + } + await getOpenTradesBTC() await appDelay(1000) await getOpenTradesLTC() @@ -1397,6 +1414,7 @@ class AppView extends connect(store)(LitElement) { await getOpenTradesRVN() await appDelay(1000) await getOpenTradesARRR() + await getChatLastSeen() } async getNodeType() { diff --git a/qortal-ui-core/src/components/login-view/login-view.js b/qortal-ui-core/src/components/login-view/login-view.js index aadc1973..ebdf31f2 100644 --- a/qortal-ui-core/src/components/login-view/login-view.js +++ b/qortal-ui-core/src/components/login-view/login-view.js @@ -14,12 +14,14 @@ import './login-section.js' import '../qort-theme-toggle.js' import settings from '../../functional-components/settings-page.js' -import { addAutoLoadImageChat, removeAutoLoadImageChat } from '../../redux/app/app-actions.js' +import { addAutoLoadImageChat, removeAutoLoadImageChat, addChatLastSeen } from '../../redux/app/app-actions.js' window.reduxStore = store window.reduxAction = { addAutoLoadImageChat: addAutoLoadImageChat, - removeAutoLoadImageChat: removeAutoLoadImageChat + removeAutoLoadImageChat: removeAutoLoadImageChat, + addChatLastSeen: addChatLastSeen + } const animationDuration = 0.7 // Seconds diff --git a/qortal-ui-core/src/plugins/streams.js b/qortal-ui-core/src/plugins/streams.js index ad6696d1..9cb6c3f7 100644 --- a/qortal-ui-core/src/plugins/streams.js +++ b/qortal-ui-core/src/plugins/streams.js @@ -9,6 +9,7 @@ const CHAT_HEADS_STREAM_NAME = 'chat_heads' const NODE_CONFIG_STREAM_NAME = 'node_config' const COPY_MENU_SWITCH = 'copy_menu_switch' const FRAME_PASTE_MENU_SWITCH = 'frame_paste_menu_switch' +const CHAT_LAST_SEEN = 'chat_last_seen' export const loggedInStream = new EpmlStream(LOGIN_STREAM_NAME, () => store.getState().app.loggedIn) export const configStream = new EpmlStream(CONFIG_STREAM_NAME, () => store.getState().config) @@ -18,6 +19,7 @@ export const chatHeadsStateStream = new EpmlStream(CHAT_HEADS_STREAM_NAME, () => export const nodeConfigStream = new EpmlStream(NODE_CONFIG_STREAM_NAME, () => store.getState().app.nodeConfig) export const copyMenuSwitchStream = new EpmlStream(COPY_MENU_SWITCH, () => store.getState().app.copyMenuSwitch) export const framePasteMenuSwitchStream = new EpmlStream(FRAME_PASTE_MENU_SWITCH, () => store.getState().app.framePasteMenuSwitch) +export const chatLastSeenStream = new EpmlStream(CHAT_LAST_SEEN, () => store.getState().app.chatLastSeen) let oldState = { @@ -46,6 +48,9 @@ store.subscribe(() => { if (oldState.app.framePasteMenuSwitch !== state.app.framePasteMenuSwitch) { framePasteMenuSwitchStream.emit(state.app.framePasteMenuSwitch) } + if (oldState.app.chatLastSeen !== state.app.chatLastSeen) { + chatLastSeenStream.emit(state.app.chatLastSeen) + } if (oldState.app.selectedAddress !== state.app.selectedAddress) { selectedAddressStream.emit({ diff --git a/qortal-ui-core/src/redux/app/actions/app-core.js b/qortal-ui-core/src/redux/app/actions/app-core.js index d91c2fa2..894f2c2e 100644 --- a/qortal-ui-core/src/redux/app/actions/app-core.js +++ b/qortal-ui-core/src/redux/app/actions/app-core.js @@ -1,5 +1,5 @@ // Core App Actions here... -import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT } from '../app-action-types.js' +import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN } from '../app-action-types.js' export const doUpdateBlockInfo = (blockObj) => { return (dispatch, getState) => { @@ -120,3 +120,16 @@ export const removeAutoLoadImageChat = (payload) => { } } +export const setChatLastSeen = (payload) => { + return { + type: SET_CHAT_LAST_SEEN, + payload + } +} +export const addChatLastSeen = (payload) => { + return { + type: ADD_CHAT_LAST_SEEN, + payload + } +} + diff --git a/qortal-ui-core/src/redux/app/app-action-types.js b/qortal-ui-core/src/redux/app/app-action-types.js index b0bb7813..518d4cd7 100644 --- a/qortal-ui-core/src/redux/app/app-action-types.js +++ b/qortal-ui-core/src/redux/app/app-action-types.js @@ -21,4 +21,6 @@ export const COPY_MENU_SWITCH = 'COPY_MENU_SWITCH' export const PASTE_MENU_SWITCH = 'PASTE_MENU_SWITCH' export const FRAME_PASTE_MENU_SWITCH = 'FRAME_PASTE_MENU_SWITCH' export const ADD_AUTO_LOAD_IMAGES_CHAT = 'ADD_AUTO_LOAD_IMAGES_CHAT' -export const REMOVE_AUTO_LOAD_IMAGES_CHAT = 'REMOVE_AUTO_LOAD_IMAGES_CHAT' \ No newline at end of file +export const REMOVE_AUTO_LOAD_IMAGES_CHAT = 'REMOVE_AUTO_LOAD_IMAGES_CHAT' +export const SET_CHAT_LAST_SEEN = 'SET_CHAT_LAST_SEEN' +export const ADD_CHAT_LAST_SEEN = 'ADD_CHAT_LAST_SEEN' diff --git a/qortal-ui-core/src/redux/app/app-reducer.js b/qortal-ui-core/src/redux/app/app-reducer.js index 6f3d8e1d..68a48675 100644 --- a/qortal-ui-core/src/redux/app/app-reducer.js +++ b/qortal-ui-core/src/redux/app/app-reducer.js @@ -1,9 +1,14 @@ // 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, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT } 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, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN } 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' +import localForage from "localforage"; +const chatLastSeen = localForage.createInstance({ + name: "chat-last-seen", +}); + const INITIAL_STATE = { loggedIn: false, @@ -44,7 +49,8 @@ const INITIAL_STATE = { isOpen: false, elementId: '' }, - autoLoadImageChats: loadStateFromLocalStorage('autoLoadImageChats') || [] + autoLoadImageChats: loadStateFromLocalStorage('autoLoadImageChats') || [], + chatLastSeen: [] } export default (state = INITIAL_STATE, action) => { @@ -169,6 +175,38 @@ export default (state = INITIAL_STATE, action) => { autoLoadImageChats: updatedState } } + case SET_CHAT_LAST_SEEN: { + return { + ...state, + chatLastSeen: action.payload + } + } + case ADD_CHAT_LAST_SEEN: { + const chatId = action.payload.key + const timestamp = action.payload.timestamp + if(!chatId || !timestamp) return state + let newChatLastSeen = [...state.chatLastSeen] + const findChatIndex = state.chatLastSeen.findIndex((chat)=> chat.key === chatId) + if(findChatIndex !== -1){ + + newChatLastSeen[findChatIndex] = { + key: chatId, + timestamp, + } + } + if(findChatIndex === -1){ + + newChatLastSeen = [...newChatLastSeen, { + key: chatId, + timestamp, + }] + } + chatLastSeen.setItem(chatId, timestamp) + return { + ...state, + chatLastSeen: newChatLastSeen + } + } default: return state diff --git a/qortal-ui-plugins/plugins/core/components/ChatHead.js b/qortal-ui-plugins/plugins/core/components/ChatHead.js index c28a583f..7b706e0c 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatHead.js +++ b/qortal-ui-plugins/plugins/core/components/ChatHead.js @@ -1,11 +1,15 @@ import { LitElement, html, css } from 'lit' import { render } from 'lit/html.js' import { Epml } from '../../../epml.js' +import localForage from "localforage"; +import { translate} from 'lit-translate'; import '@material/mwc-icon' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) - +const chatLastSeen = localForage.createInstance({ + name: "chat-last-seen", +}); class ChatHead extends LitElement { static get properties() { return { @@ -15,7 +19,8 @@ class ChatHead extends LitElement { iconName: { type: String }, activeChatHeadUrl: { type: String }, isImageLoaded: { type: Boolean }, - setActiveChatHeadUrl: {attribute: false} + setActiveChatHeadUrl: {attribute: false}, + lastReadMessageTimestamp: {type: Number} } } @@ -24,9 +29,13 @@ class ChatHead extends LitElement { li { width: 100%; - padding: 7px 5px 7px 5px; + padding: 10px 5px 10px 5px; cursor: pointer; width: 100%; + box-sizing: border-box; + display: flex; + align-items: flex-start; + } li:hover { @@ -44,12 +53,21 @@ class ChatHead extends LitElement { color: var(--chat-group); } - .about { - margin-top: 8px; - } + .about { - padding-left: 8px; + + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + margin: 0px; + } + .inner-container { + display: flex; + width: calc(100% - 45px); + flex-direction: column; + justify-content: center; } .status { @@ -64,6 +82,13 @@ class ChatHead extends LitElement { clear: both; height: 0; } + + .name { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + } ` } @@ -82,6 +107,7 @@ class ChatHead extends LitElement { this.activeChatHeadUrl = '' this.isImageLoaded = false this.imageFetches = 0 + this.lastReadMessageTimestamp = 0 } createImage(imageUrl) { @@ -108,33 +134,59 @@ class ChatHead extends LitElement { }; return imageHTMLRes; } + updated(){ + } render() { let avatarImg = ''; let backupAvatarImg = '' + let isUnread = false + 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) - } + if(this.lastReadMessageTimestamp && this.chatInfo.timestamp){ + if(this.lastReadMessageTimestamp < this.chatInfo.timestamp){ + isUnread = true + } + } + + if(this.activeChatHeadUrl === this.chatInfo.url){ + isUnread = false + } + return html`
  • this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}"> ${this.isImageLoaded ? html`${avatarImg}` : html`` } ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`account_circle` : html`` } - ${!this.isImageLoaded && this.chatInfo.name ? html`
    ${this.chatInfo.name.charAt(0)}
    `: ''} - ${!this.isImageLoaded && this.chatInfo.groupName ? html`
    ${this.chatInfo.groupName.charAt(0)}
    `: ''} + ${!this.isImageLoaded && this.chatInfo.name ? html`
    ${this.chatInfo.name.charAt(0)}
    `: ''} + ${!this.isImageLoaded && this.chatInfo.groupName ? html`
    ${this.chatInfo.groupName.charAt(0)}
    `: ''} +
    -
    ${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} ${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}
    +
    ${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} ${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}
    +
    +
    +
    +
    + + ${translate('chatpage.cchange90')} +
    +
    +
    +
    +
    • ` } - firstUpdated() { + async firstUpdated() { let configLoaded = false + this.lastReadMessageTimestamp = await chatLastSeen.getItem(this.chatInfo.url) || 0 parentEpml.ready().then(() => { parentEpml.subscribe('selected_address', async selectedAddress => { this.selectedAddress = {} @@ -142,6 +194,15 @@ class ChatHead extends LitElement { if (!selectedAddress || Object.entries(selectedAddress).length === 0) return this.selectedAddress = selectedAddress }) + parentEpml.subscribe('chat_last_seen', async chatList => { + const parsedChatList = JSON.parse(chatList) + const findChatSeen = parsedChatList.find(chat=> chat.key === this.chatInfo.url) + + if(findChatSeen && this.lastReadMessageTimestamp !== findChatSeen.timestamp){ + this.lastReadMessageTimestamp = findChatSeen.timestamp + this.requestUpdate() + } + }) parentEpml.subscribe('config', c => { if (!configLoaded) { configLoaded = true @@ -156,6 +217,9 @@ class ChatHead extends LitElement { if(changedProperties.has('activeChatHeadUrl')){ return true } + if(changedProperties.has('lastReadMessageTimestamp')){ + return true + } if(changedProperties.has('chatInfo')){ return true } diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 91691e05..8aacdc1b 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -10,7 +10,7 @@ import Highlight from '@tiptap/extension-highlight' import {unsafeHTML} from 'lit/directives/unsafe-html.js'; import { Editor, Extension } from '@tiptap/core' -// import localForage from "localforage"; +import localForage from "localforage"; registerTranslateConfig({ loader: lang => fetch(`/language/${lang}.json`).then(res => res.json()) }); @@ -42,9 +42,9 @@ import WebWorker from 'web-worker:./computePowWorker.js'; import WebWorkerImage from 'web-worker:./computePowWorkerImage.js'; import '@polymer/paper-dialog/paper-dialog.js' -// const messagesCache = localForage.createInstance({ -// name: "messages-cache", -// }); +const chatLastSeen = localForage.createInstance({ + name: "chat-last-seen", +}); const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -1444,6 +1444,14 @@ class ChatPage extends LitElement { document.removeEventListener('keydown', this.initialChat); document.removeEventListener('paste', this.pasteImage); + if(this.messagesRendered.length !== 0){ + window.parent.reduxStore.dispatch( window.parent.reduxAction.addChatLastSeen({ + key: this.chatId, + timestamp: Date.now() + })) + + } + } initialChat(e) { @@ -1465,9 +1473,7 @@ class ChatPage extends LitElement { const handleTransferIntoURL = (dataTransfer) => { try { const [firstItem] = dataTransfer.items; - console.log({firstItem}); const blob = firstItem.getAsFile(); - console.log({blob}); return blob; } catch (error) { console.log(error); diff --git a/qortal-ui-plugins/plugins/core/components/TimeAgo.js b/qortal-ui-plugins/plugins/core/components/TimeAgo.js index ca3633b7..66164179 100644 --- a/qortal-ui-plugins/plugins/core/components/TimeAgo.js +++ b/qortal-ui-plugins/plugins/core/components/TimeAgo.js @@ -19,7 +19,7 @@ class TimeAgo extends LitElement { updated(changedProps) { changedProps.forEach((OldProp, name) => { - if (name === 'timeIso') { + if (name === 'timeIso' || name === 'timestamp') { this.renderTime(this.timestamp) } }); @@ -35,7 +35,6 @@ class TimeAgo extends LitElement { } render() { - return html` ` From fe9af1dc828f07e0bfc8b2975e94b64d801b39f1 Mon Sep 17 00:00:00 2001 From: Phillip Date: Sat, 4 Feb 2023 17:34:43 +0200 Subject: [PATCH 3/3] fix avatar issue --- .../plugins/core/components/ChatHead.js | 22 ++++++++++++++----- .../core/messaging/q-chat/q-chat.src.js | 8 +++---- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatHead.js b/qortal-ui-plugins/plugins/core/components/ChatHead.js index 7b706e0c..61a30fb2 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatHead.js +++ b/qortal-ui-plugins/plugins/core/components/ChatHead.js @@ -108,9 +108,10 @@ class ChatHead extends LitElement { this.isImageLoaded = false this.imageFetches = 0 this.lastReadMessageTimestamp = 0 + this.loggedInAddress = window.parent.reduxStore.getState().app.selectedAddress.address } - createImage(imageUrl) { + createImage(imageUrl) { const imageHTMLRes = new Image(); imageHTMLRes.src = imageUrl; imageHTMLRes.style= "width:40px; height:40px; float: left; border-radius:50%"; @@ -125,7 +126,7 @@ class ChatHead extends LitElement { setTimeout(() => { this.imageFetches = this.imageFetches + 1; imageHTMLRes.src = imageUrl; - }, 500); + }, 750); } else { @@ -134,9 +135,9 @@ class ChatHead extends LitElement { }; return imageHTMLRes; } - updated(){ - } + + render() { let avatarImg = ''; let backupAvatarImg = '' @@ -158,7 +159,10 @@ class ChatHead extends LitElement { if(this.activeChatHeadUrl === this.chatInfo.url){ isUnread = false } - + + if(this.chatInfo.sender === this.loggedInAddress){ + isUnread = false + } return html`
  • this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}"> ${this.isImageLoaded ? html`${avatarImg}` : html`` } @@ -221,6 +225,14 @@ class ChatHead extends LitElement { return true } if(changedProperties.has('chatInfo')){ + + const prevChatInfo = changedProperties.get('chatInfo') + + if(prevChatInfo.address !== this.chatInfo.address){ + + this.isImageLoaded = false + this.requestUpdate() + } return true } diff --git a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js index fbe12aa5..872802d6 100644 --- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js +++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js @@ -8,6 +8,7 @@ import { Epml } from '../../../../epml.js'; import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'; import { qchatStyles } from './q-chat-css.src.js' import WebWorker from 'web-worker:./computePowWorker.src.js'; +import {repeat} from 'lit/directives/repeat.js'; registerTranslateConfig({ loader: lang => fetch(`/language/${lang}.json`).then(res => res.json()) @@ -856,14 +857,11 @@ class Chat extends LitElement { } renderChatHead(chatHeadArr) { - - let tempUrl = document.location.href - let splitedUrl = decodeURI(tempUrl).split('?') - // let activeChatHeadUrl = splitedUrl[1] === undefined ? '' : splitedUrl[1] - + return chatHeadArr.map(eachChatHead => { return html` this.setActiveChatHeadUrl(val)} chatInfo=${JSON.stringify(eachChatHead)}>` }) + } renderChatPage() {