# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1692112605 -7200
# Node ID 855729ef75f2acb26f65d7a5839700d54483acc8
# Parent  5c47038700883bd319c7b55db7820d4408ffaa64
browser (calls): improve call buttons:

- following template change, there are now a call button for video and one for audio, and
  no more "switch" button, this is more intuitive
- search items have been customised with a 3 dots menu to show a dropdown, which let
  select the "video" or "audio" call mode. By defaut, a click on a search item will do a
  video call.

diff -r 5c4703870088 -r 855729ef75f2 libervia/web/pages/calls/_browser/__init__.py
--- a/libervia/web/pages/calls/_browser/__init__.py	Tue Aug 15 17:14:53 2023 +0200
+++ b/libervia/web/pages/calls/_browser/__init__.py	Tue Aug 15 17:16:45 2023 +0200
@@ -45,9 +45,16 @@
 
         # call/hang up buttons
         self._call_mode = VIDEO
-        self.call_button_tpl = Template("call/call_button.html")
-        self._update_call_button()
-        document["toggle_call_mode_btn"].bind("click", self.switch_call_mode)
+        document["video_call_btn"].bind(
+            "click",
+            lambda __: aio.run(self.make_call())
+
+        )
+        document["audio_call_btn"].bind(
+            "click",
+            lambda __: aio.run(self.make_call(video=False))
+
+        )
         document["hangup_btn"].bind("click", lambda __: aio.run(self.hang_up()))
 
         # other buttons
@@ -67,7 +74,24 @@
 
         # search
         self.jid_search = JidSearch(
-            document["search"], document["contacts"], click_cb=self._on_entity_click
+            document["search"],
+            document["contacts"],
+            click_cb=self._on_entity_click,
+            template="call/search_item.html",
+            options={
+                "no_group": True,
+                "extra_cb": {
+                    ".dropdown-trigger": lambda evt, item: aio.run(
+                        self.on_entity_action(evt, "menu", item)
+                    ),
+                    ".click-to-video": lambda evt, item: aio.run(
+                        self.on_entity_action(evt, VIDEO, item)
+                    ),
+                    ".click-to-audio": lambda evt, item: aio.run(
+                        self.on_entity_action(evt, AUDIO, item)
+                    ),
+                }
+            }
         )
 
         # incoming call dialog
@@ -114,7 +138,6 @@
             if self._call_mode == mode:
                 return
             self._call_mode = mode
-            self._update_call_button()
             with_video = mode == VIDEO
             for elt in self.call_box_elt.select(".is-video-only"):
                 if with_video:
@@ -124,16 +147,6 @@
         else:
             raise ValueError("Invalid call mode")
 
-    def switch_call_mode(self, ev):
-        self.call_mode = AUDIO if self.call_mode == VIDEO else VIDEO
-
-    def _update_call_button(self):
-        new_button = self.call_button_tpl.get_elt({"call_mode": self.call_mode})
-        new_button.bind(
-            "click", lambda __: aio.run(self.make_call(video=not self.call_mode == AUDIO))
-        )
-        document["call_btn"].replaceWith(new_button)
-
     def _on_action_new(
         self, action_data_s: str, action_id: str, security_limit: int, profile: str
     ) -> None:
@@ -261,6 +274,7 @@
         @param audio: True if an audio flux is required
         @param video: True if a video flux is required
         """
+        self.call_mode = VIDEO if video else AUDIO
         try:
             callee_jid = JID(document["search"].value.strip())
             if not callee_jid.is_valid:
@@ -467,6 +481,17 @@
 
         await self.make_call()
 
+    async def on_entity_action(self, evt, action: str, item: dict) -> None:
+        """Handle extra actions on search items"""
+        evt.stopPropagation()
+        if action == "menu":
+            evt.currentTarget.parent.classList.toggle("is-active")
+        elif action in (VIDEO, AUDIO):
+            document["search"].value = item["entity"]
+            # we want the dropdown to be inactive
+            evt.currentTarget.closest(".dropdown").classList.remove("is-active")
+            await self.make_call(video=action==VIDEO)
+
 
 CallUI()
 loading.remove_loading_screen()