diff --git a/src/components/messages/MessageViewer.vue b/src/components/messages/MessageViewer.vue index e279772..f9e0336 100644 --- a/src/components/messages/MessageViewer.vue +++ b/src/components/messages/MessageViewer.vue @@ -146,6 +146,12 @@ export default { unmounted() { this.messagesSubscription?.unsubscribe(); }, + activated() { + + // update read state when coming back to message viewer + Database.NodeMessagesReadState.touch(this.nodeId); + + }, methods: { async sendMessage() { @@ -216,9 +222,15 @@ export default { // update messages in ui this.messages = messages.map((message) => message.toJSON()); - // auto scroll to bottom if we want to + // check if we should auto scroll on new message if(this.autoScrollOnNewMessage){ + + // auto scroll to bottom if we want to this.scrollMessagesToBottom(); + + // update read state since we auto scrolled to bottom of new messages + Database.NodeMessagesReadState.touch(this.nodeId); + } }, @@ -241,6 +253,11 @@ export default { // we want to auto scroll if user is at bottom of messages list this.autoScrollOnNewMessage = isAtBottom; + // update read state since we scrolled to bottom + if(isAtBottom){ + Database.NodeMessagesReadState.touch(this.nodeId); + } + }, scrollMessagesToBottom: function() { this.$nextTick(() => { diff --git a/src/js/Database.js b/src/js/Database.js index d28cbd7..6aff864 100644 --- a/src/js/Database.js +++ b/src/js/Database.js @@ -99,6 +99,22 @@ async function initDatabase(nodeId) { }, } }, + node_messages_read_state: { + schema: { + version: 0, + primaryKey: 'id', + type: 'object', + properties: { + id: { + type: 'string', + maxLength: 10, + }, + timestamp: { + type: 'integer', + }, + }, + } + }, }); } @@ -314,8 +330,21 @@ class TraceRoute { } +class NodeMessagesReadState { + + // update the read state of messages for the provided node id + static async touch(nodeId) { + return await database.node_messages_read_state.upsert({ + id: nodeId.toString(), + timestamp: Date.now(), + }); + } + +} + export default { initDatabase, Message, TraceRoute, + NodeMessagesReadState, };