# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1687939755 -7200
# Node ID fb31d3dba0c30cb7de437e5413b89bda4e807cb6
# Parent  3c384b51b2a1bb9612fe41cf76bb901a8cf6d144
browser (chat): add marker for new messages when page is not visible

diff -r 3c384b51b2a1 -r fb31d3dba0c3 libervia/web/pages/chat/_browser/__init__.py
--- a/libervia/web/pages/chat/_browser/__init__.py	Wed Jun 28 10:09:14 2023 +0200
+++ b/libervia/web/pages/chat/_browser/__init__.py	Wed Jun 28 10:09:15 2023 +0200
@@ -24,6 +24,7 @@
         self.message_tpl = Template("chat/message.html")
         self.url_preview_control_tpl = Template("components/url_preview_control.html")
         self.url_preview_tpl = Template("components/url_preview.html")
+        self.new_messages_marker_elt = Template("chat/new_messages_marker.html").get_elt()
 
         self.messages_elt = document["messages"]
 
@@ -126,7 +127,12 @@
         extra: dict,
         profile: str,
     ) -> None:
-        log.info(f"on_message_new: [{from_jid} -> {to_jid}] {message_data}, {extra=}")
+        # FIXME: visibilityState doesn't detect OS events such as `Alt + Tab`, using focus
+        #   event may help to get those use cases, but it gives false positives.
+        if document.visibilityState == "hidden" and self.new_messages_marker_elt.parent is None:
+            # the page is not visible, and we have no new messages marker yet, so we add
+            # it
+            self.messages_elt <= self.new_messages_marker_elt
         xhtml_data = extra.get("xhtml")
         if not xhtml_data:
             xhtml = None
@@ -339,6 +345,15 @@
         modal.classList.remove("is-active")
 
 
+    def handle_visibility_change(self, evt):
+        if (
+            document.visibilityState == "hidden"
+            and self.new_messages_marker_elt.parent is not None
+        ):
+            # if there is a new messages marker, we remove it
+            self.new_messages_marker_elt.remove()
+
+
 libervia_web_chat = LiberviaWebChat()
 
 document["message_input"].bind(
@@ -348,6 +363,9 @@
 document["send_button"].bind("click", lambda __: libervia_web_chat.send_message())
 document["attach_button"].bind("click", libervia_web_chat.on_attach_button_click)
 document["file_input"].bind("change", libervia_web_chat.on_file_selected)
+
+document.bind("visibilitychange", libervia_web_chat.handle_visibility_change)
+
 bridge.register_signal("message_new", libervia_web_chat._on_message_new)
 
 libervia_web_chat.make_attachments_dynamic()