mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-03-14 03:32:33 +00:00
Merge pull request #119 from PhillipLangMartinez/bugfix/click-on-notification-correct-chat
Bugfix/click on notification correct chat, add last seen message. fix avatar issue
This commit is contained in:
AlphaX-Projects
GitHub
commit
4edf96d13a
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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})
|
||||
|
||||
@ -1398,6 +1404,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()
|
||||
@ -1409,6 +1426,7 @@ class AppView extends connect(store)(LitElement) {
|
||||
await getOpenTradesRVN()
|
||||
await appDelay(1000)
|
||||
await getOpenTradesARRR()
|
||||
await getChatLastSeen()
|
||||
}
|
||||
|
||||
shBalanceTicker() {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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'
|
||||
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'
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,9 +107,11 @@ class ChatHead extends LitElement {
|
||||
this.activeChatHeadUrl = ''
|
||||
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%";
|
||||
@ -99,7 +126,7 @@ class ChatHead extends LitElement {
|
||||
setTimeout(() => {
|
||||
this.imageFetches = this.imageFetches + 1;
|
||||
imageHTMLRes.src = imageUrl;
|
||||
}, 500);
|
||||
}, 750);
|
||||
} else {
|
||||
|
||||
|
||||
@ -109,32 +136,61 @@ class ChatHead extends LitElement {
|
||||
return imageHTMLRes;
|
||||
}
|
||||
|
||||
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
if(this.chatInfo.sender === this.loggedInAddress){
|
||||
isUnread = false
|
||||
}
|
||||
return html`
|
||||
<li @click=${() => 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`<mwc-icon class="img-icon">account_circle</mwc-icon>` : html`` }
|
||||
${!this.isImageLoaded && this.chatInfo.name ? html`<div style="width:40px; height:40px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''}
|
||||
${!this.isImageLoaded && this.chatInfo.groupName ? html`<div style="width:40px; height:40px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''}
|
||||
${!this.isImageLoaded && this.chatInfo.name ? html`<div style="width:40px; height:40px; flex-shrink: 0; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''}
|
||||
${!this.isImageLoaded && this.chatInfo.groupName ? html`<div style="width:40px; height:40px; flex-shrink: 0; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''}
|
||||
<div class="inner-container">
|
||||
<div class="about">
|
||||
<div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> <mwc-icon style="float:right; padding: 0 1rem; color: var(--chat-group);">${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}</mwc-icon> </div>
|
||||
<div class="name"><span style="font-weight: bold;float:left; padding-left: 8px; color: var(--chat-group);font-size:14px;word-break:${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? 'break-word': 'break-all'}">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> <mwc-icon style="font-size:18px; color: var(--chat-group);">${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}</mwc-icon> </div>
|
||||
</div>
|
||||
<div class="about" style="margin-top:7px">
|
||||
<div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);font-size:14px"></span>
|
||||
<div style="color: var(--black); display: flex;font-size: 12px; align-items:center">
|
||||
<div style="width: 8px; height: 8px;border-radius: 50%;background: ${isUnread ? 'var(--error)' : 'none'} ; margin-right:5px;"></div>
|
||||
<message-time style="display: ${(this.chatInfo.timestamp && this.chatInfo.timestamp > 100000) ? 'block' : 'none'}" timestamp=${this.chatInfo.timestamp}></message-time>
|
||||
<span style="font-size:12px;color:var(--black);display: ${(!this.chatInfo.timestamp || this.chatInfo.timestamp > 100000) ? 'none' : 'block'}">${translate('chatpage.cchange90')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
`
|
||||
}
|
||||
|
||||
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 +198,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,7 +221,18 @@ class ChatHead extends LitElement {
|
||||
if(changedProperties.has('activeChatHeadUrl')){
|
||||
return true
|
||||
}
|
||||
if(changedProperties.has('lastReadMessageTimestamp')){
|
||||
return true
|
||||
}
|
||||
if(changedProperties.has('chatInfo')){
|
||||
|
||||
const prevChatInfo = changedProperties.get('chatInfo')
|
||||
|
||||
if(prevChatInfo.address !== this.chatInfo.address){
|
||||
|
||||
this.isImageLoaded = false
|
||||
this.requestUpdate()
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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`
|
||||
<time-ago datetime=${this.timeIso} format=${this.format}> </time-ago>
|
||||
`
|
||||
|
||||
@ -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())
|
||||
@ -31,7 +32,7 @@ import Placeholder from '@tiptap/extension-placeholder'
|
||||
import Highlight from '@tiptap/extension-highlight'
|
||||
|
||||
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 {
|
||||
@ -57,7 +58,7 @@ class Chat extends LitElement {
|
||||
userFoundModalOpen: { type: Boolean },
|
||||
userSelected: { type: Object },
|
||||
editor: {type: Object},
|
||||
groupInvites: { type: Array }
|
||||
groupInvites: { type: Array },
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,6 +121,7 @@ class Chat extends LitElement {
|
||||
}
|
||||
|
||||
async connectedCallback() {
|
||||
|
||||
super.connectedCallback();
|
||||
await this.getUpdateCompleteTextEditor();
|
||||
|
||||
@ -149,15 +151,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") {
|
||||
@ -217,7 +240,7 @@ class Chat extends LitElement {
|
||||
</div>
|
||||
<div class="chat-history">
|
||||
|
||||
${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()}`}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Start Chatting Dialog -->
|
||||
@ -369,6 +392,8 @@ class Chat extends LitElement {
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
|
||||
async firstUpdated() {
|
||||
this.changeLanguage();
|
||||
this.changeTheme();
|
||||
@ -484,8 +509,11 @@ class Chat extends LitElement {
|
||||
})
|
||||
})
|
||||
parentEpml.imReady()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
setOpenPrivateMessage(props) {
|
||||
this.openPrivateMessage = props.open;
|
||||
this.shadowRoot.getElementById("sendTo").value = props.name
|
||||
@ -831,17 +859,14 @@ 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`<chat-head activeChatHeadUrl=${this.activeChatHeadUrl} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)} chatInfo=${JSON.stringify(eachChatHead)}></chat-head>`
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
renderChatPage(chatId) {
|
||||
renderChatPage() {
|
||||
|
||||
// Check for the chat ID from and render chat messages
|
||||
// Else render Welcome to Q-CHat
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user