Make sure unread messages are cleared when showing a chat

src/headless/plugins/roster/utils.js

@@ -55,10 +55,8 @@ async function populateRoster (ignore_cache=false) {
 
 
 function updateUnreadCounter (chatbox) {
-    const contact = _converse.roster && _converse.roster.findWhere({'jid': chatbox.get('jid')});
-    if (contact !== undefined) {
-        contact.save({'num_unread': chatbox.get('num_unread')});
-    }
+    const contact = _converse.roster?.findWhere({'jid': chatbox.get('jid')});
+    contact?.save({'num_unread': chatbox.get('num_unread')});
 }
 
 function registerPresenceHandler () {

src/plugins/chatview/chat.js

@@ -61,6 +61,7 @@ export default class ChatView extends BaseChatView {
 
     afterShown () {
         this.model.setChatState(_converse.ACTIVE);
+        this.model.clearUnreadMsgCounter();
         this.maybeFocus();
     }
 }

src/plugins/chatview/tests/unreads.js

@@ -90,7 +90,7 @@ describe("A ChatBox's Unread Message Count", function () {
         done();
     }));
 
-    it("is cleared when ChatBoxView was scrolled down and the window become focused",
+    it("is cleared when the chat was scrolled down and the window become focused",
             mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
 
         await mock.waitForRoster(_converse, 'current', 1);
@@ -116,6 +116,24 @@ describe("A ChatBox's Unread Message Count", function () {
         done();
     }));
 
+    it("is cleared when the chat was hidden in fullscreen mode and then becomes visible",
+            mock.initConverse(['chatBoxesFetched'], {'view_mode': 'fullscreen'},
+            async function (done, _converse) {
+
+        await mock.waitForRoster(_converse, 'current', 1);
+        const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+        await mock.openChatBoxFor(_converse, sender_jid);
+        const chatbox = _converse.chatboxes.get(sender_jid);
+        chatbox.save({'hidden': true});
+        _converse.handleMessageStanza(mock.createChatMessage(_converse, sender_jid, 'This message will be unread'));
+        await u.waitUntil(() => chatbox.messages.length);
+        expect(chatbox.get('num_unread')).toBe(1);
+        chatbox.save({'hidden': false});
+        await u.waitUntil(() => chatbox.get('num_unread') === 0);
+        chatbox.close();
+        done();
+    }));
+
     it("is not cleared when ChatBoxView was scrolled up and the windows become focused",
             mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
 

src/plugins/headlines-view/view.js

@@ -18,7 +18,6 @@ class HeadlinesView extends BaseChatView {
         this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
         this.listenTo(this.model, 'change:hidden', () => this.afterShown());
         this.listenTo(this.model, 'destroy', this.remove);
-        this.listenTo(this.model, 'show', this.show);
         this.listenTo(this.model.messages, 'add', this.requestUpdate);
         this.listenTo(this.model.messages, 'remove', this.requestUpdate);
         this.listenTo(this.model.messages, 'reset', this.requestUpdate);
@@ -54,8 +53,8 @@ class HeadlinesView extends BaseChatView {
         return [];
     }
 
-    afterShown () { // eslint-disable-line class-methods-use-this
-        return;
+    afterShown () {
+        this.model.clearUnreadMsgCounter();
     }
 }
 

src/plugins/muc-views/muc.js

@@ -19,7 +19,6 @@ export default class MUCView extends BaseChatView {
 
         this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
         this.listenTo(this.model, 'change:composing_spoiler', this.requestUpdateMessageForm);
-        this.listenTo(this.model, 'show', this.show);
         this.listenTo(this.model.session, 'change:connection_status', this.onConnectionStatusChanged);
         this.listenTo(this.model.session, 'change:view', this.requestUpdate);
 

src/shared/chat/templates/unfurl.js

@@ -1,6 +1,8 @@
 import { converse } from "@converse/headless/core";
 import { getURI } from 'utils/html.js';
 import { html } from 'lit';
+import { isImageDomainAllowed, } from 'utils/html';
+
 const u = converse.env.utils;
 
 function isValidURL (url) {
@@ -9,7 +11,7 @@ function isValidURL (url) {
 }
 
 function isValidImage (image) {
-    return image && u.isImageDomainAllowed(image) && isValidURL(image);
+    return image && isImageDomainAllowed(image) && isValidURL(image);
 }
 
 const tpl_url_wrapper = (o, wrapped_template) =>