added the call button at the chat header.

Author: PawBud

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/templates/chat-head.js

@@ -3,6 +3,7 @@ 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) {
@@ -42,6 +43,9 @@ export default (o) => {
                     ${ (o.type !== _converse.HEADLINES_TYPE) ? html`<a class="user show-msg-author-modal" @click=${o.showUserDetailsModal}>${ display_name }</a>` : display_name }
                 </div>
             </div>
+            <div>
+                ${(o.model.get('jingle_status') === JINGLE_CALL_STATUS.PENDING) ? html`<button type="button" class="btn btn-success">Calling...</button>` : ''}
+            </div>
             <div class="chatbox-title__buttons row no-gutters">
                 ${ until(tpl_dropdown_btns(), '') }
                 ${ until(tpl_standalone_btns(), '') }

src/plugins/jingle/index.js

@@ -4,11 +4,11 @@
  * @license Mozilla Public License (MPLv2)
  */
 
-import { _converse, converse, api } from '@converse/headless/core';
+import { _converse, converse } from '@converse/headless/core';
 import 'plugins/modal/index.js';
 import { __ } from 'i18n';
 import { html } from "lit";
-import AddJingleModal from "./modal/jingle-call-modal.js"
+import { startJingleCall } from "./utils.js";
 
 
 converse.plugins.add('converse-jingle', {
@@ -24,16 +24,16 @@ converse.plugins.add('converse-jingle', {
      */
     dependencies: ['converse-chatview'],
 
-    initialize: function (o) {
+    initialize: function () {
         /* The initialize function gets called as soon as the plugin is
          * loaded by converse.js's plugin machinery.
          */
-        _converse.api.listen.on('getToolbarButtons', (buttons) => {
+        _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=${(ev) => api.modal.show(AddJingleModal, { 'model': o.model }, ev)} title="${i18n_start_call}">
+                    <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>`
                 );