Updates #1999 - Demarcate first unread message

Author: deleolajide

CHANGES.md

@@ -21,6 +21,7 @@ Soon we'll deprecate the latter, so prepare now.
 - #1896: Don't send receipts for messages fetched from the archive
 - #1937: Editing a message removes the mentions highlight
 - #1963: Mentions are visually incorrect when used in message replies
+- #1999: Demarcate first unread message
 - #2002: fix rendering of `muc_roomid_policy_hint`
 - #2006: fix rendering of emojis in case `use_system_emojis == false`
 - Allow ignoring of bootstrap modules at build using environment variable. For xample: `export BOOTSTRAP_IGNORE_MODULES="Modal,Dropdown" && make dist`

package-lock.json

@@ -1296,6 +1296,8 @@ describe("Chatboxes", function () {
             await _converse.handleMessageStanza(msg);
             await u.waitUntil(() => view.model.messages.length);
             expect(view.model.get('num_unread')).toBe(1);
+            const msgid = view.model.messages.last().get('id');
+            expect(view.model.get('first_unread_id')).toBe(msgid);
             done();
         }));
 
@@ -1329,9 +1331,12 @@ describe("Chatboxes", function () {
             await mock.openChatBoxFor(_converse, sender_jid);
             const chatbox = _converse.chatboxes.get(sender_jid);
             _converse.windowState = 'hidden';
-            _converse.handleMessageStanza(msgFactory());
+            const msg = msgFactory();
+            _converse.handleMessageStanza(msg);
             await u.waitUntil(() => chatbox.messages.length);
             expect(chatbox.get('num_unread')).toBe(1);
+            const msgid = chatbox.messages.last().get('id');
+            expect(chatbox.get('first_unread_id')).toBe(msgid);
             done();
         }));
 
@@ -1347,9 +1352,12 @@ describe("Chatboxes", function () {
             const chatbox = _converse.chatboxes.get(sender_jid);
             chatbox.save('scrolled', true);
             _converse.windowState = 'hidden';
-            _converse.handleMessageStanza(msgFactory());
+            const msg = msgFactory();
+            _converse.handleMessageStanza(msg);
             await u.waitUntil(() => chatbox.messages.length);
             expect(chatbox.get('num_unread')).toBe(1);
+            const msgid = chatbox.messages.last().get('id');
+            expect(chatbox.get('first_unread_id')).toBe(msgid);
             done();
         }));
 
@@ -1364,9 +1372,12 @@ describe("Chatboxes", function () {
             await mock.openChatBoxFor(_converse, sender_jid);
             const chatbox = _converse.chatboxes.get(sender_jid);
             _converse.windowState = 'hidden';
-            _converse.handleMessageStanza(msgFactory());
+            const msg = msgFactory();
+            _converse.handleMessageStanza(msg);
             await u.waitUntil(() => chatbox.messages.length);
             expect(chatbox.get('num_unread')).toBe(1);
+            const msgid = chatbox.messages.last().get('id');
+            expect(chatbox.get('first_unread_id')).toBe(msgid);
             _converse.saveWindowState(null, 'focus');
             expect(chatbox.get('num_unread')).toBe(0);
             done();
@@ -1384,11 +1395,15 @@ describe("Chatboxes", function () {
             const chatbox = _converse.chatboxes.get(sender_jid);
             chatbox.save('scrolled', true);
             _converse.windowState = 'hidden';
-            _converse.handleMessageStanza(msgFactory());
+            const msg = msgFactory();
+            _converse.handleMessageStanza(msg);
             await u.waitUntil(() => chatbox.messages.length);
             expect(chatbox.get('num_unread')).toBe(1);
+            const msgid = chatbox.messages.last().get('id');
+            expect(chatbox.get('first_unread_id')).toBe(msgid);
             _converse.saveWindowState(null, 'focus');
             expect(chatbox.get('num_unread')).toBe(1);
+            expect(chatbox.get('first_unread_id')).toBe(msgid);
             done();
         }));
     });

spec/chatbox.js

@@ -145,7 +145,7 @@ converse.plugins.add('converse-message-view', {
                     return this.renderFileUploadProgresBar();
                 }
                 const isValidChange = prop => Object.prototype.hasOwnProperty.call(this.model.changed, prop);
-                const props = ['moderated', 'retracted', 'correcting', 'message', 'type', 'upload', 'received', 'editable'];
+                const props = ['moderated', 'retracted', 'correcting', 'message', 'type', 'upload', 'received', 'editable', 'first_unread'];
                 if (props.filter(isValidChange).length) {
                     await this.debouncedRender();
                 }

src/converse-message-view.js

@@ -1110,11 +1110,29 @@ converse.plugins.add('converse-chat', {
                     return;
                 }
                 if (utils.isNewMessage(message) && this.isHidden()) {
+                    this.setFirstUnreadMsgId(message);
                     this.save({'num_unread': this.get('num_unread') + 1});
                     _converse.incrementMsgCounter();
                 }
             },
 
+            /**
+             * Sets the msgid of the first unread realtime message in a ChatBox.
+             * @param {_converse.Message} message
+             */
+            setFirstUnreadMsgId (message) {
+                if (this.get('num_unread') == 0) {
+                    const first_unread_id = this.get('first_unread_id');
+
+                    if (first_unread_id) {
+                      const msg = this.messages.get(first_unread_id);
+                      if (msg) msg.save("first_unread", false);
+                    }
+                    message.save("first_unread", true);
+                    this.save({'first_unread_id': message.get('id')});
+                }
+            },
+
             clearUnreadMsgCounter () {
                 u.safeSave(this, {'num_unread': 0});
             },

src/headless/converse-chat.js

@@ -2387,6 +2387,7 @@ converse.plugins.add('converse-muc', {
                 const body = message.get('message');
                 if (!body) { return; }
                 if (u.isNewMessage(message) && this.isHidden()) {
+                    this.setFirstUnreadMsgId(message);
                     const settings = {'num_unread_general': this.get('num_unread_general') + 1};
                     if (this.isUserMentioned(message)) {
                         settings.num_unread = this.get('num_unread') + 1;

src/headless/converse-muc.js

@@ -4,6 +4,9 @@
     <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
     {[ } ]}
     <div class="chat-msg__content chat-msg__content--{{{o.sender}}} {{{o.is_me_message ? 'chat-msg__content--action' : ''}}}">
+        {[ if (o.first_unread) { ]}
+            <div class="message date-separator"><hr class="separator"><span class="separator-text">{{{o.__('unread messages')}}}</span></div>
+        {[ } ]}
         <span class="chat-msg__heading">
             {[ if (o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}
             <span class="chat-msg__author">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>