(TBR)added 2 new custom plugins for jingle

Author: PawBud

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

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

@@ -3,7 +3,6 @@ import { _converse } from '@converse/headless/core';
 import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
 import { html } from "lit";
 import { until } from 'lit/directives/until.js';
-import { JINGLE_CALL_STATUS } from "../../jingle/constants.js";
 
 
 async function getStandaloneButtons (promise) {
@@ -44,7 +43,7 @@ export default (o) => {
                 </div>
             </div>
             <div>
-                ${(o.model.get('jingle_status') === JINGLE_CALL_STATUS.PENDING) ? html`<button type="button" class="btn btn-success">Calling...</button>` : ''}
+              <converse-chat-header-call-notification></converse-chat-header-call-notification>
             </div>
             <div class="chatbox-title__buttons row no-gutters">
                 ${ until(tpl_dropdown_btns(), '') }

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

@@ -0,0 +1,30 @@
+import { CustomElement } from 'shared/components/element.js';
+import { _converse, api } from "@converse/headless/core";
+import { JINGLE_CALL_STATUS } from "./constants.js";
+import tpl_header_button from "./templates/header-button.js";
+
+export default class ChatHeaderCallNotification extends CustomElement {
+    
+    initialize() {
+        this.model = _converse.chatboxes.get(this.jid);
+        this.listenTo(this.model, 'change:jingle_status', this.requestUpdate);
+    }
+    
+    render() {
+        return tpl_header_button(this);
+    }
+
+    toggleJingleCallStatus() {
+        const jingle_status = this.model.get('jingle_status');
+        if ( jingle_status === JINGLE_CALL_STATUS.PENDING || jingle_status === JINGLE_CALL_STATUS.ACTIVE) {
+            this.model.save('jingle_status', JINGLE_CALL_STATUS.ENDED);
+            return;
+        }
+        if (!jingle_status || jingle_status === JINGLE_CALL_STATUS.ENDED) {
+            this.model.save('jingle_status', JINGLE_CALL_STATUS.PENDING);
+            return;
+        }
+    }
+}
+
+api.elements.define('converse-chat-header-call-notification', ChatHeaderCallNotification);

src/plugins/jingle/index.js

@@ -4,11 +4,10 @@
  * @license Mozilla Public License (MPLv2)
  */
 
-import { _converse, converse } from '@converse/headless/core';
+import { _converse, converse } from '@converse/headless/core.js';
 import 'plugins/modal/index.js';
-import { __ } from 'i18n';
+import './toolbar-button.js';
 import { html } from "lit";
-import { startJingleCall } from "./utils.js";
 
 
 converse.plugins.add('converse-jingle', {
@@ -30,13 +29,10 @@ converse.plugins.add('converse-jingle', {
          */
         _converse.api.listen.on('getToolbarButtons', (toolbar_el, buttons) => {
             if (!this.is_groupchat) {
-                const color = '--chat-toolbar-btn-color';
-                const i18n_start_call = __('Start a call');
                 buttons.push(html`
-                    <button class="toggle-call" @click=${startJingleCall(toolbar_el.model.get('jid'))} title="${i18n_start_call}">
-                        <converse-icon color="var(${color})" class="fa fa-phone" size="1em"></converse-icon>
-                    </button>`
-                );
+                  <converse-jingle-toolbar-button jid=${toolbar_el.model.get('jid')}>
+                  </converse-jingle-toolbar-button>
+                `);
             }
 
            return buttons;

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

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+import { JINGLE_CALL_STATUS } from '../constants';
+
+export default (el) => {
+    return html`
+        <div>
+            ${ (el.model.get('jingle_status')) === JINGLE_CALL_STATUS.PENDING ? html`<span class="badge bg-secondary">Calling...</span>` : html``}
+        </div>
+    `;
+}

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

@@ -0,0 +1,14 @@
+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 i18n_start_call = __('Start a call');
+    const jingle_status = el.model.get('jingle_status');
+    return html`
+        <button class="toggle-call" @click=${el.toggleJingleCallStatus()} title="${i18n_start_call}">
+            <converse-icon id="temp" color="var(${( jingle_status ||jingle_status === JINGLE_CALL_STATUS.PENDING ||  jingle_status === JINGLE_CALL_STATUS.ACTIVE ) ? end_call_color : call_color })" class="fa fa-phone" size="1em"></converse-icon>
+        </button>`
+}

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

@@ -0,0 +1,36 @@
+import { CustomElement } from 'shared/components/element.js';
+import { _converse, api } from "@converse/headless/core";
+import { JINGLE_CALL_STATUS } from "./constants.js";
+import tpl_toolbar_button from "./templates/toolbar-button.js";
+
+export default class JingleToolbarButton 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_toolbar_button(this);
+    }
+
+    toggleJingleCallStatus() {
+        const jingle_status = this.model.get('jingle_status');
+        if ( jingle_status === JINGLE_CALL_STATUS.PENDING || jingle_status === JINGLE_CALL_STATUS.ACTIVE) {
+            this.model.save('jingle_status', JINGLE_CALL_STATUS.ENDED);
+            return;
+        }
+        if (!jingle_status || jingle_status === JINGLE_CALL_STATUS.ENDED) {
+            this.model.save('jingle_status', JINGLE_CALL_STATUS.PENDING);
+            return;
+        }
+    }
+}
+
+api.elements.define('converse-jingle-toolbar-button', JingleToolbarButton);