compose: Add support for Jitsi audio calls.

Fixes #12207.

web/src/compose.js

@@ -75,12 +75,34 @@ export function compute_show_video_chat_button() {
     return true;
 }
 
+export function update_audio_and_video_chat_button_display() {
+    update_audio_chat_button_display();
+    update_video_chat_button_display();
+}
+
 export function update_video_chat_button_display() {
     const show_video_chat_button = compute_show_video_chat_button();
     $("#below-compose-content .video_link").toggle(show_video_chat_button);
     $(".message-edit-feature-group .video_link").toggle(show_video_chat_button);
 }
 
+export function compute_show_audio_chat_button() {
+    const available_providers = page_params.realm_available_video_chat_providers;
+    if (
+        available_providers.jitsi_meet &&
+        page_params.realm_video_chat_provider === available_providers.jitsi_meet.id
+    ) {
+        return true;
+    }
+    return false;
+}
+
+export function update_audio_chat_button_display() {
+    const show_audio_chat_button = compute_show_audio_chat_button();
+    $("#below-compose-content .audio_link").toggle(show_audio_chat_button);
+    $(".message-edit-feature-group .audio_link").toggle(show_audio_chat_button);
+}
+
 export function clear_invites() {
     $(
         `#compose_banners .${CSS.escape(compose_banner.CLASSNAMES.recipient_not_subscribed)}`,
@@ -429,6 +451,7 @@ export function initialize() {
     setup_compose_actions_hooks();
 
     $("#below-compose-content .video_link").toggle(compute_show_video_chat_button());
+    $("#below-compose-content .audio_link").toggle(compute_show_audio_chat_button());
 
     $("#compose-textarea").on("keydown", (event) => {
         compose_ui.handle_keydown(event, $("#compose-textarea").expectOne());
@@ -643,6 +666,19 @@ export function initialize() {
         generate_and_insert_audio_or_video_call_link($(e.target), false);
     });
 
+    $("body").on("click", ".audio_link", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const show_audio_chat_button = compute_show_audio_chat_button();
+
+        if (!show_audio_chat_button) {
+            return;
+        }
+
+        generate_and_insert_audio_or_video_call_link($(e.target), true);
+    });
+
     $("body").on("click", ".time_pick", (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -887,6 +923,29 @@ function generate_and_insert_audio_or_video_call_link($target_element, is_audio_
         // TODO: Use `new URL` to generate the URLs here.
         const video_call_id = util.random_int(100000000000000, 999999999999999);
         const video_call_link = page_params.jitsi_server_url + "/" + video_call_id;
-        insert_video_call_url(video_call_link, $target_textarea);
+        if (is_audio_call) {
+            insert_audio_call_url(
+                video_call_link + "#config.startWithVideoMuted=true",
+                $target_textarea,
+            );
+        } else {
+            /* Because Jitsi remembers what last call type you joined
+               in browser local storage, we need to specify that video
+               should not be muted in the video call case, or your
+               next call will also join without video after joining an
+               audio-only call.
+
+               This has the annoying downside that it requires users
+               who have a personal preference to disable video every
+               time, but Jitsi's UI makes that very easy to do, and
+               that inconvenience is probably less important than letting
+               the person organizing a call specify their intended
+               call type (video vs audio).
+           */
+            insert_video_call_url(
+                video_call_link + "#config.startWithVideoMuted=false",
+                $target_textarea,
+            );
+        }
     }
 }

web/src/message_edit.js

@@ -459,6 +459,9 @@ function edit_message($row, raw_content) {
     $form
         .find(".message-edit-feature-group .video_link")
         .toggle(compose.compute_show_video_chat_button());
+    $form
+        .find(".message-edit-feature-group .audio_link")
+        .toggle(compose.compute_show_audio_chat_button());
     upload.feature_check($(`#edit_form_${CSS.escape(rows.id($row))} .compose_upload_file`));
 
     const $message_edit_content = $row.find("textarea.message_edit_content");

web/src/server_events_dispatch.js

@@ -228,7 +228,7 @@ export function dispatch_normal_event(event) {
                 enable_spectator_access: noop,
                 signup_notifications_stream_id: noop,
                 emails_restricted_to_domains: noop,
-                video_chat_provider: compose.update_video_chat_button_display,
+                video_chat_provider: compose.update_audio_and_video_chat_button_display,
                 giphy_rating: giphy.update_giphy_rating,
                 waiting_period_threshold: noop,
                 want_advertise_in_communities_directory: noop,

web/templates/compose_control_buttons.hbs

@@ -6,6 +6,7 @@
     <a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a>
     <a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
     <a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
+    <a role="button" class="compose_control_button fa fa-phone audio_link" aria-label="{{t 'Add audio call' }}" tabindex=0 data-tippy-content="{{t 'Add audio call' }}"></a>
     <a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a>
     <a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tooltip-template-id="add-global-time-tooltip" data-tippy-maxWidth="none"></a>
     <div class="compose_control_button_container {{#unless giphy_enabled }}hide{{/unless}}" data-tippy-content="{{t 'Add GIF' }}">

web/tests/compose_video.test.js

@@ -127,7 +127,7 @@ test("videos", ({override}) => {
         handler(ev);
         // video link ids consist of 15 random digits
         const video_link_regex =
-            /\[translated: Join video call\.]\(https:\/\/meet.jit.si\/\d{15}\)/;
+            /\[translated: Join video call\.]\(https:\/\/meet.jit.si\/\d{15}#config.startWithVideoMuted=false\)/;
         assert.ok(called);
         assert.match(syntax_to_insert, video_link_regex);
     })();