WIP: Audio video capability

docs/source/configuration.rst

@@ -539,6 +539,7 @@ The core, and by default whitelisted, plugins are::
     converse-dragresize
     converse-fullscreen
     converse-headline
+    converse-jingle
     converse-mam
     converse-minimize
     converse-muc

docs/source/other_frameworks.rst

@@ -60,6 +60,7 @@ Below is an example code that wraps converse.js as an angular.js service.
             "converse-vcard",        // XEP-0054 VCard-temp
             "converse-register",     // XEP-0077 In-band registration
             "converse-ping",         // XEP-0199 XMPP Ping
+            "converse-jingle",       // XEP-0166 Support for the Jingle Protocol
             "converse-notification", // HTML5 Notifications
             "converse-minimize",     // Allows chatboxes to be minimized
             "converse-dragresize",   // Allows chatboxes to be resized by dragging them

karma.conf.js

@@ -64,6 +64,8 @@ module.exports = function(config) {
       { pattern: "src/plugins/controlbox/tests/controlbox.js", type: 'module' },
       { pattern: "src/plugins/controlbox/tests/login.js", type: 'module' },
       { pattern: "src/plugins/headlines-view/tests/headline.js", type: 'module' },
+      { pattern: "src/plugins/jingle/tests/ui.js", type: 'module' },
+      { pattern: "src/plugins/jingle/tests/message-initiation.js", type: 'module' },
       { pattern: "src/plugins/mam-views/tests/mam.js", type: 'module' },
       { pattern: "src/plugins/mam-views/tests/placeholder.js", type: 'module' },
       { pattern: "src/plugins/minimize/tests/minchats.js", type: 'module' },

src/converse.js

@@ -23,6 +23,7 @@ import "./plugins/controlbox/index.js";     // The control box
 import "./plugins/dragresize/index.js";     // Allows chat boxes to be resized by dragging them
 import "./plugins/fullscreen/index.js";
 import "./plugins/headlines-view/index.js";
+import "./plugins/jingle/index.js"          // Implements the jingle protocol
 import "./plugins/mam-views/index.js";
 import "./plugins/minimize/index.js";       // Allows chat boxes to be minimized
 import "./plugins/muc-views/index.js";      // Views related to MUC

src/headless/utils/core.js

@@ -24,7 +24,7 @@ export function isEmptyMessage (attrs) {
     return !attrs['oob_url'] &&
         !attrs['file'] &&
         !(attrs['is_encrypted'] && attrs['plaintext']) &&
-        !attrs['message'];
+        !attrs['message'] && !attrs['jingle_propose'];
 }
 
 /* We distinguish between UniView and MultiView instances.

src/plugins/chatview/heading.js

@@ -17,6 +17,7 @@ export default class ChatHeading extends CustomElement {
 
     initialize () {
         this.model = _converse.chatboxes.get(this.jid);
+        this.listenTo(this.model, 'change:jingle_status', this.requestUpdate);
         this.listenTo(this.model, 'change:status', this.requestUpdate);
         this.listenTo(this.model, 'vcard:add', this.requestUpdate);
         this.listenTo(this.model, 'vcard:change', this.requestUpdate);

src/plugins/chatview/styles/chat-head.scss

@@ -64,6 +64,10 @@
                 flex-wrap: nowrap;
                 padding: 0;
             }
+
+            .chatbox-call-status {
+                width: 80%;
+            }
 
             a, a:visited, a:hover, a:not([href]):not([tabindex]) {
                 &.chatbox-btn {

src/plugins/chatview/templates/chat-head.js

@@ -41,6 +41,7 @@ export default (o) => {
                 <div class="chatbox-title__text" title="${o.jid}">
                     ${ (o.type !== _converse.HEADLINES_TYPE) ? html`<a class="user show-msg-author-modal" @click=${o.showUserDetailsModal}>${ display_name }</a>` : display_name }
                 </div>
+                <converse-call-notification class="d-flex flex-row-reverse justify-content-center chatbox-call-status chatbox-title__text" jid=${o.model.get('jid')}></converse-call-notification>
             </div>
             <div class="chatbox-title__buttons row no-gutters">
                 ${ until(tpl_dropdown_btns(), '') }

src/plugins/chatview/tests/chatbox.js

@@ -296,8 +296,8 @@ describe("Chatboxes", function () {
             }));
 
 
-            it("can contain a button for starting a call",
-                    mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
+            fit("can contain a button for starting a call",
+                    mock.initConverse(['chatBoxesFetched'], { blacklisted_plugins: ['converse-jingle']}, async function (_converse) {
 
                 const { api } = _converse;
                 await mock.waitForRoster(_converse, 'current');

src/plugins/jingle/chat-header-notification.js

@@ -0,0 +1,45 @@
+import { CustomElement } from 'shared/components/element.js';
+import { _converse, api, converse } from "@converse/headless/core";
+import tpl_header_button from "./templates/header-button.js";
+import { JINGLE_CALL_STATUS } from "./constants.js";
+
+import './styles/jingle.scss';
+const { Strophe, $msg } = converse.env;
+
+export default class CallNotification extends CustomElement {
+
+    static get properties() {
+        return {
+            'jid': { type: String },
+        }
+    }
+
+    initialize() {
+        this.model = _converse.chatboxes.get(this.jid);
+        this.listenTo(this.model, 'change:jingle_status', () => this.requestUpdate());
+    }
+
+    render() {
+        return tpl_header_button(this);
+    }
+
+    endCall() {
+        const jingle_status = this.model.get('jingle_status');
+        if ( jingle_status === JINGLE_CALL_STATUS.OUTGOING_PENDING || jingle_status === JINGLE_CALL_STATUS.ACTIVE) {
+            this.model.save('jingle_status', JINGLE_CALL_STATUS.ENDED);
+            const stanza = $msg({
+                'from': _converse.bare_jid,
+                'to': this.jid,
+                'type': 'chat'
+            }).c('retract', {'xmlns': Strophe.NS.JINGLEMESSAGE, 'id': this.getAttribute('id')})
+            .c('reason', {'xmlns': Strophe.NS.JINGLE})
+                .c('cancel', {}).up()
+                .t('Retracted').up().up()
+                .c('store', {'xmlns': Strophe.NS.HINTS})
+            api.send(stanza);
+            return;
+        }
+    }
+}
+
+api.elements.define('converse-call-notification', CallNotification);

src/plugins/jingle/constants.js

@@ -0,0 +1,6 @@
+export const JINGLE_CALL_STATUS = {
+    INCOMING_PENDING:      0,
+    OUTGOING_PENDING:      1,
+    ACTIVE:       2,
+    ENDED:        3
+};

src/plugins/jingle/index.js

@@ -0,0 +1,51 @@
+/**
+ * @description Converse.js plugin which adds XEP-0166 Jingle
+ * @copyright 2022, the Converse.js contributors
+ * @license Mozilla Public License (MPLv2)
+ */
+
+import { _converse, converse, api } from '@converse/headless/core.js';
+import 'plugins/modal/index.js';
+import "./chat-header-notification.js";
+import './toolbar-button.js';
+import { JINGLE_CALL_STATUS } from './constants.js';
+import { html } from "lit";
+import { parseJingleMessage } from './utils.js';
+
+const { Strophe } = converse.env;
+
+Strophe.addNamespace('JINGLE', 'urn:xmpp:jingle:1');
+Strophe.addNamespace('JINGLEMESSAGE', 'urn:xmpp:jingle-message:1');
+Strophe.addNamespace('JINGLERTP', 'urn:xmpp:jingle:apps:rtp:1');
+
+converse.plugins.add('converse-jingle', {
+    /* Plugin dependencies are other plugins which might be
+     * overridden or relied upon, and therefore need to be loaded before
+     * this plugin.
+     *
+     * If the setting "strict_plugin_dependencies" is set to true,
+     * an error will be raised if the plugin is not found. By default it's
+     * false, which means these plugins are only loaded opportunistically.
+     *
+     * NB: These plugins need to have already been loaded via require.js.
+     */
+    dependencies: ['converse-chatview'],
+
+    initialize: function () {
+        /* The initialize function gets called as soon as the plugin is
+         * loaded by converse.js's plugin machinery.
+         */
+        _converse.JINGLE_CALL_STATUS = JINGLE_CALL_STATUS;
+        _converse.api.listen.on('getToolbarButtons', (toolbar_el, buttons) => {
+            if (!this.is_groupchat) {
+                buttons.push(html`
+                  <converse-jingle-toolbar-button jid=${toolbar_el.model.get('jid')}>
+                  </converse-jingle-toolbar-button>
+                `);
+            }
+
+           return buttons;
+        });
+        api.listen.on('parseMessage', parseJingleMessage);
+    },
+});

src/plugins/jingle/modal/jingle-incoming-call-modal.js

@@ -0,0 +1,18 @@
+import BootstrapModal from "plugins/modal/base.js";
+import tpl_incoming_call from "../templates/incoming-call.js";
+
+export default BootstrapModal.extend({
+    id: "start-jingle-call-modal",
+    persistent: true,
+
+    initialize () {
+        this.items = [];
+        this.loading_items = false;
+
+        BootstrapModal.prototype.initialize.apply(this, arguments);
+    },
+
+    toHTML () {
+        return tpl_incoming_call();
+    }
+});

src/plugins/jingle/styles/jingle.scss

@@ -0,0 +1,9 @@
+.conversejs {
+    .chatbox {
+        .chat-head {
+            .jingle-call-initiated-button{
+                color: var(--chat-head-text-color) !important;
+            }
+        }
+    }
+}

src/plugins/jingle/templates/header-button.js

@@ -0,0 +1,26 @@
+import { html } from 'lit';
+import { __ } from 'i18n';
+import { JINGLE_CALL_STATUS } from '../constants';
+
+const tpl_active_call = (o) => {
+    const button = __('Call Inititated');
+    return html`
+        <div>
+            <a class="jingle-call-initiated-button" @click=${ o.endCall }>${ button }</a>
+        </div>
+    `;
+}
+
+    // ${(jingle_status === JINGLE_CALL_STATUS.ACTIVE) ? html`${tpl_active_call(el)}` : html`` }
+export default (el) => {
+    const jingle_status = el.model.get('jingle_status');
+    return html`
+        <div>
+            ${(jingle_status === JINGLE_CALL_STATUS.OUTGOING_PENDING) ? html`Calling...` : '' }
+        </div>
+        <div>
+            ${(jingle_status === JINGLE_CALL_STATUS.OUTGOING_PENDING) ? tpl_active_call(el) : '' }
+            ${(jingle_status === JINGLE_CALL_STATUS.ENDED) ? html`Call Ended` :  '' }
+        </div>
+    `;
+}

src/plugins/jingle/templates/incoming-call.js

@@ -0,0 +1,27 @@
+import { html } from 'lit';
+import { __ } from 'i18n';
+
+const modal_close_button = html`<button type="button" class="btn btn-secondary" data-dismiss="modal">${__('Close')}</button>`;
+
+export default () => {
+    const i18n_modal_title = __('Jingle Call');
+    return html`
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="muc-list-modal-label">${i18n_modal_title}</h5>
+                </div>
+                <div class="modal-body d-flex flex-column">
+                    <span class="modal-alert"></span>
+                    <ul class="available-chatrooms list-group">
+                    </ul>
+                </div>
+                <div class="container text-center cl-2">
+                <button type="button" class="btn btn-success">Audio Call</button>
+                <button type="button" class="btn btn-primary">Video Call</button>
+                </div>
+                <div class="modal-footer">${modal_close_button}</div>
+            </div>
+        </div>
+    `;
+}

src/plugins/jingle/templates/toolbar-button.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+import { __ } from "i18n";
+import { JINGLE_CALL_STATUS } from '../constants';
+
+export default (el) => {
+    const call_color = '--chat-toolbar-btn-color';
+    const end_call_color = '--chat-toolbar-btn-close-color';
+    const jingle_status = el.model.get('jingle_status');
+    let button_color, i18n_start_call;
+    if (jingle_status === JINGLE_CALL_STATUS.OUTGOING_PENDING || jingle_status === JINGLE_CALL_STATUS.ACTIVE) {
+        button_color = end_call_color;
+        i18n_start_call = __('Stop the call');
+    }
+    else {
+        button_color = call_color;
+        i18n_start_call = __('Start a call');
+    }
+    return html`
+        <button class="toggle-call" @click=${el.toggleJingleCallStatus} title="${i18n_start_call}">
+            <converse-icon id="temp" color="var(${ button_color })" class="fa fa-phone" size="1em"></converse-icon>
+        </button>`
+}

src/plugins/jingle/tests/message-initiation.js

@@ -0,0 +1,58 @@
+/*global mock, converse */
+const u = converse.env.utils;
+const sizzle = converse.env.sizzle;
+
+const { Strophe } = converse.env;
+
+fdescribe("A Jingle Message Initiation Request", function () {
+
+    it("is sent when the user clicks the call button", mock.initConverse(
+        ['chatBoxesFetched'], {}, async function (_converse) {
+
+    await mock.waitForRoster(_converse, 'current', 1);
+    const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+    await mock.openChatBoxFor(_converse, contact_jid);
+    const view = _converse.chatboxviews.get(contact_jid);
+    const call_button = view.querySelector('converse-jingle-toolbar-button button');
+    call_button.click();
+    const sent_stanzas = _converse.connection.sent_stanzas;
+    const stanza = await u.waitUntil(() => sent_stanzas.filter(s => sizzle(`propose[xmlns='${Strophe.NS.JINGLEMESSAGE}']`, s).length).pop());
+    expect(Strophe.serialize(stanza)).toBe(
+        `<message from='${_converse.jid}'
+            to='${contact_jid}'
+            type='chat'>`+
+                `<propose xmlns='${Strophe.NS.JINGLEMESSAGE}' id='${stanza.getAttribute('id')}'>`+
+                    `<description xmlns='${Strophe.NS.JINGLERTP}' media='audio'/>`+
+                `</propose>`+
+            `<store xmlns='${Strophe.NS.HINTS}'/>`+
+        `</message>`);
+    }));
+
+
+    it("is ended when the user clicks the toolbar call button again or the chat header end call button", mock.initConverse(
+        ['chatBoxesFetched'], {}, async function (_converse) {
+
+    await mock.waitForRoster(_converse, 'current', 1);
+    const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+    await mock.openChatBoxFor(_converse, contact_jid);
+    const view = _converse.chatboxviews.get(contact_jid);
+    const call_button = view.querySelector('converse-jingle-toolbar-button button');
+    call_button.click();
+    call_button.click();
+    const sent_stanzas = _converse.connection.sent_stanzas;
+    const stanza = await u.waitUntil(() => sent_stanzas.filter(s => sizzle(`reason`, s).length).pop());
+    expect(Strophe.serialize(stanza)).toBe(
+        `<message from='${_converse.jid}'
+            to='${contact_jid}'
+            type='chat'>`+
+                `<retract xmlns='${Strophe.NS.JINGLEMESSAGE}' id='${stanza.getAttribute('id')}'>`+
+                    `<reason xmlns="${Strophe.NS.JINGLE}">`+
+                        `<cancel/>`+
+                        `<text>Retracted</text>`+
+                    `</reason>`+
+            `   </retract>`+
+            `<store xmlns='${Strophe.NS.HINTS}'/>`+
+        `</message>`
+    );
+    }));
+});

src/plugins/jingle/tests/ui.js

@@ -0,0 +1,42 @@
+/* global mock, converse */
+const u = converse.env.utils;
+
+describe("A Jingle Status", function () {
+
+    it("has been shown in the toolbar",
+            mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
+
+        await mock.waitForRoster(_converse, 'current');
+        await mock.openControlBox(_converse);
+        const contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+        spyOn(_converse.api, "trigger").and.callThrough();
+        // First check that the button does show
+        await mock.openChatBoxFor(_converse, contact_jid);
+        const view = _converse.chatboxviews.get(contact_jid);
+        const toolbar = view.querySelector('.chat-toolbar');
+        const call_button = toolbar.querySelector('converse-jingle-toolbar-button button');
+        // Now check that the state changes
+        // toggleJingleCallStatus
+        const chatbox = view.model;
+        call_button.click();
+        expect(chatbox.get('jingle_status')).toBe(_converse.JINGLE_CALL_STATUS.OUTGOING_PENDING);
+        }));
+
+    it("has been shown in the chat-header",
+        mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
+
+        await mock.waitForRoster(_converse, 'current');
+        await mock.openControlBox(_converse);
+        const contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+        spyOn(_converse.api, "trigger").and.callThrough();
+        await mock.openChatBoxFor(_converse, contact_jid);
+        const view = _converse.chatboxviews.get(contact_jid);
+        const chat_head = view.querySelector('.chatbox-title--row');
+        const chatbox = view.model;
+        chatbox.save('jingle_status', _converse.JINGLE_CALL_STATUS.OUTGOING_PENDING);
+        const header_notification = chat_head.querySelector('converse-call-notification');
+        const call_intialized = await u.waitUntil(() => header_notification.querySelector('.jingle-call-initiated-button'));
+        call_intialized.click();
+        expect(chatbox.get('jingle_status') === _converse.JINGLE_CALL_STATUS.ENDED);
+    }));
+});