added a toggling button in the centre of the chat-header

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,9 +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>
-            </div>
-            <div>
-              <converse-chat-header-call-notification></converse-chat-header-call-notification>
+                <converse-call-notification class="d-flex flex-row-reverse justify-content-center chatbox-call-status" jid=${o.model.get('jid')}></converse-call-notification>
             </div>
             <div class="chatbox-title__buttons row no-gutters">
                 ${ until(tpl_dropdown_btns(), '') }

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

@@ -1,30 +1,32 @@
 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";
+import { JINGLE_CALL_STATUS } from "./constants.js";
 
-export default class ChatHeaderCallNotification extends CustomElement {
+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);
+        this.listenTo(this.model, 'change:jingle_status', () => this.requestUpdate());
     }
 
     render() {
         return tpl_header_button(this);
     }
 
-    toggleJingleCallStatus() {
+    endCall() {
         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);
+api.elements.define('converse-call-notification', CallNotification);

src/plugins/jingle/index.js

@@ -6,6 +6,7 @@
 
 import { _converse, converse } from '@converse/headless/core.js';
 import 'plugins/modal/index.js';
+import "./chat-header-notification.js";
 import './toolbar-button.js';
 import { html } from "lit";
 

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

@@ -1,10 +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>
+            <span><button @click=${ o.endCall }>${ button }</button></span>
+        </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>
-            ${ (el.model.get('jingle_status')) === JINGLE_CALL_STATUS.PENDING ? html`<span class="badge bg-secondary">Calling...</span>` : html``}
+            ${(jingle_status === JINGLE_CALL_STATUS.PENDING) ? html`Calling...` : '' }
+        </div>
+        <div>
+            ${(jingle_status === JINGLE_CALL_STATUS.PENDING) ? tpl_active_call(el) : '' }
+            ${(jingle_status === JINGLE_CALL_STATUS.ENDED) ? html`Call Ended` :  '' }
         </div>
     `;
 }

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

@@ -5,10 +5,18 @@ 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');
+    let button_color, i18n_start_call;
+    if (jingle_status === JINGLE_CALL_STATUS.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(${( 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 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/toolbar-button.js

@@ -13,7 +13,7 @@ export default class JingleToolbarButton extends CustomElement {
 
     initialize() {
         this.model = _converse.chatboxes.get(this.jid);
-        this.listenTo(this.model, 'change:jingle_status', this.requestUpdate);
+        this.listenTo(this.model, 'change:jingle_status', () => this.requestUpdate());
     }
 
     render() {