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/plugins/chat/model.js

@@ -228,6 +228,7 @@ const ChatBox = ModelWithContact.extend({
                 !this.handleChatMarker(attrs) &&
                 !(await this.handleRetraction(attrs))
         ) {
+            const message_retraction = await api.hook('onMessage', this, { retract: false });
             this.setEditable(attrs, attrs.time);
 
             if (attrs['chat_state'] && attrs.sender === 'them') {

src/headless/plugins/chat/utils.js

@@ -125,8 +125,8 @@ export async function handleMessageStanza (stanza) {
         return log.error(attrs.message);
     }
     // XXX: Need to take XEP-428 <fallback> into consideration
-    const has_body = !!(attrs.body || attrs.plaintext)
-    const chatbox = await api.chats.get(attrs.contact_jid, { 'nickname': attrs.nick }, has_body);
+    const should_create = !!(attrs.body || attrs.plaintext || attrs.jingle_propose)
+    const chatbox = await api.chats.get(attrs.contact_jid, { 'nickname': attrs.nick }, should_create);
     await chatbox?.queueMessage(attrs);
     /**
      * @typedef { Object } MessageData

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

@@ -297,7 +297,7 @@ describe("Chatboxes", function () {
 
 
             it("can contain a button for starting a call",
-                    mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
+                    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,73 @@
+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;
+const u = converse.env.utils;
+
+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 ) {
+            this.model.save('jingle_status', JINGLE_CALL_STATUS.ENDED);
+            const initiator_stanza = this.model.messages.findWhere({ 'media': 'audio' });
+            const propose_id = initiator_stanza.attributes.propose_id;
+            const message_id = u.getUniqueId();
+            api.send(
+                $msg({
+                'from': _converse.bare_jid,
+                'to': this.jid,
+                'type': 'chat',
+                id: message_id
+                }).c('retract', { 'xmlns': Strophe.NS.JINGLEMESSAGE, 'id': propose_id })
+                .c('reason', { 'xmlns': Strophe.NS.JINGLE })
+                .c('cancel', {}).up()
+                .t('Retracted').up().up()
+                .c('store', { 'xmlns': Strophe.NS.HINTS })
+            );
+            const attrs = {
+                'from': _converse.bare_jid,
+                'to': this.jid,
+                'type': 'chat',
+                'retract_id': propose_id, 
+                'msg_id': message_id
+            }
+            this.model.messages.create(attrs);
+            return;
+        }
+        if ( 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('finish', {'xmlns': Strophe.NS.JINGLEMESSAGE, 'id': this.getAttribute('id')})
+            .c('reason', {'xmlns': Strophe.NS.JINGLE})  
+                .c('success', {}).up()
+                .t('Success').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,52 @@
+/**
+ * @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, handleRetraction } 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);
+        api.listen.on('onMessage', handleRetraction);
+    },
+});

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 = __('End Call');
+    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>`
+}