chat history ui added and tests as well

src/headless/plugins/chat/model.js

@@ -229,6 +229,7 @@ const ChatBox = ModelWithContact.extend({
                 !(await this.handleRetraction(attrs))
         ) {
             const { handled } = await api.hook('onMessage', this, { handled: false, attrs });
+            debugger
             if (handled) return;
 
             this.setEditable(attrs, attrs.time);

src/plugins/jingle/index.js

@@ -1,5 +1,5 @@
 /**
- * @description Converse.js plugin which adds XEP-0166 Jingle
+ * @description Converse.js plugin which uses XEP-0353, XEP-0166 & XEP-0167
  * @copyright 2022, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
@@ -11,6 +11,7 @@ import './toolbar-button.js';
 import { JINGLE_CALL_STATUS } from './constants.js';
 import { html } from "lit";
 import { parseJingleMessage, handleRetraction, getJingleTemplate } from './utils.js';
+import './jingle-message-history.js';
 
 const { Strophe } = converse.env;
 

src/plugins/jingle/jingle-message-history.js

@@ -0,0 +1,30 @@
+import { CustomElement } from 'shared/components/element.js';
+import { _converse, api } from "@converse/headless/core";
+import tpl_jingle_message_history from "./templates/jingle-chat-history.js";
+import { finishCall } from './utils.js';
+import { JINGLE_CALL_STATUS } from "./constants.js";
+
+export default class JingleMessageHistory extends CustomElement {
+
+    static properties = {
+        'jid': { type: String }
+    };
+
+    initialize() {
+        this.model = _converse.chatboxes.get(this.jid);
+        this.listenTo(this.model, 'change:jingle_status', () => this.requestUpdate());
+    }
+    
+    render() {
+        const jid = this.jid;
+        return tpl_jingle_message_history(this);
+    }
+    
+    endCall() {
+        this.model.save('jingle_status', JINGLE_CALL_STATUS.ENDED);
+        finishCall(this);
+        return;
+    }
+}
+
+api.elements.define('converse-jingle-message', JingleMessageHistory);

src/plugins/jingle/templates/jingle-chat-history.js

@@ -0,0 +1,58 @@
+import '../../../shared/avatar/avatar.js';
+import { __ } from 'i18n';
+import { html } from "lit";
+
+// const ended_call = __('Call Ended');
+const pending_call = __('Initiated a call with');
+// const finished_call = __('Finished call');
+
+function calling(el) {
+    const i18n_end_call = __('End Call');
+    return html`
+    <div class="message separator">
+    <hr class="separator">
+        <span class="separator-text">
+            ${pending_call} 
+            <a class="show-msg-author-modal">
+                <converse-avatar
+                    class="avatar align-self-center"
+                    height="40" width="40">
+                </converse-avatar>
+            </a>
+            <a>
+            <button class="end-call" @click=${el.endCall} title="${i18n_end_call}">
+                End Call
+            </button>
+            </a>
+        </span>
+    </div>`
+}
+
+// function finishedCall() {
+//     return html`<div class="message separator">
+//     <a class="show-msg-author-modal">
+//         <converse-avatar
+//         class="avatar align-self-center"
+//         height="40" width="40">
+//         </converse-avatar>
+//     </a>
+//     <span>${finishedCall}</span>
+// </div>`
+// }
+
+// function retractedCall() {
+//     return html`<div class="message separator">
+//     <a class="show-msg-author-modal">
+//         <converse-avatar
+//         class="avatar align-self-center"
+//         height="40" width="40">
+//         </converse-avatar>
+//     </a>
+//     <span>${ended_call}</span>
+// </div>`
+// }
+
+
+export default (el) => {
+    return calling(el);
+}

src/plugins/jingle/templates/jingle_chat_history.js

@@ -1,42 +0,0 @@
-import '../../../shared/avatar/avatar.js';
-import { __ } from 'i18n';
-import { html } from "lit";
-
-const ended_call = __('Call Ended');
-const pending_call = __('Initiated a call');
-const finished_call = __('Finished call');
-
-function calling(el) {
-    return html`
-    <div class="message separator">
-    <div>
-            <a class="show-msg-author-modal">
-            <converse-avatar
-            class="avatar align-self-center"
-            height="40" width="40">
-            </converse-avatar>
-        </a>
-    </div>
-    <span class="separator-text">${ pending_call} at ${el.get('time')}</span>
-    <hr class="separator">
-    <span class="separator-text">End Call</span>
-    </div>`
-}
-
-function finishedCall(o) {
-    return html`<div class="message separator"><hr class="separator"><span class="separator-text">${ finished_call } at ${o.time}</span></div>`
-}
-
-function retractedCall(o) {
-    return html`<div class="message separator"><hr class="separator"><span class="separator-text">${ ended_call } at ${o.time}</span></div>`
-}
-
-
-export default (o) => {
-    return html`
-    ${(o.get('jingle_status') === 'incoming_call' && o.get('jingle_status') != undefined) ? html`${calling(o)}` : html`
-    ${(o.get('jingle_status') === 'retracted' && o.get('jingle_status') != undefined) ? html`${retractedCall(o)}` : html`
-    ${ (o.get('jingle_status') === 'call_ended' && o.get('jingle_status') != undefined) ? html`${finishedCall(o)}` : html``}
-    `}
-    `}
-`}

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

@@ -6,17 +6,17 @@ 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;
+    let button_color, i18n_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');
+        i18n_call = __('Stop the call');
     }
     else {
         button_color = call_color;
-        i18n_start_call = __('Start a call');
+        i18n_call = __('Start a call');
     }
     return html`
-        <button class="toggle-call" @click=${el.toggleJingleCallStatus} title="${i18n_start_call}">
+        <button class="toggle-call" @click=${el.toggleJingleCallStatus} title="${i18n_call}">
             <converse-icon id="temp" color="var(${ button_color })" class="fa fa-phone" size="1em"></converse-icon>
         </button>`
 }

src/plugins/jingle/tests/jingle-chat-history.js

@@ -1,20 +1,32 @@
-/*global mock, converse */
+/* global mock */
 
-const { u } = converse.env;
+describe("A jingle chat history message", function () {
 
-describe("A jingle chat message", function () {
+    it("has been shown in the chat",
+    mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
 
-    it("will be displayed on the initiator's",
-        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 jingle_chat_history_component = view.querySelector('converse-jingle-message');
+    expect(jingle_chat_history_component).not.toBe(undefined);
+    }));
 
-                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 initiator_message = await u.waitUntil(() => view.querySelectorAll('converse-message-history converse-chat-message .chat-msg__text ')?.textContent === 'Initiated a Call at');
-                expect(initiator_message).toBe().not(undefined);
-            }));
+    fit("has the 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();
+    const chatbox = view.model;
+    const end_call_button = view.querySelector('converse-jingle-message button .end-call');
+    expect(end_call_button).not.toBe(undefined);
+    expect(chatbox.get('jingle_status')).toBe(_converse.JINGLE_CALL_STATUS.ENDED);
+    }));
 });

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

@@ -101,7 +101,7 @@ describe("A Jingle Message Initiation Request", function () {
     }));
     });
     
-    fdescribe("from the receiver's perspective", function () {
+    describe("from the receiver's perspective", function () {
 
         it("is received when the initiator clicks the call button", mock.initConverse(
             ['chatBoxesFetched'], { allow_non_roster_messaging: true }, async function (_converse) {

src/plugins/jingle/tests/ui.js

@@ -38,5 +38,6 @@ describe("A Jingle Status", function () {
         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);
-    }));
+        }));
+    
 });

src/plugins/jingle/utils.js

@@ -1,6 +1,6 @@
 import { converse, api, _converse } from '@converse/headless/core';
 import JingleCallModal from "./modal/jingle-incoming-call-modal.js";
-import tpl_jingle_chat_history from "./templates/jingle_chat_history.js";
+import { html } from 'lit';
 
 const { Strophe, sizzle, $msg } = converse.env;
 const u = converse.env.utils;
@@ -12,8 +12,8 @@ const u = converse.env.utils;
  * @param { Object } attrs
  */
 export function parseJingleMessage(stanza, attrs) {
-    if(isAJingleMessage(stanza) === true) {
-    const jingle_propose_type = getJingleProposeType(stanza);
+    if (isAJingleMessage(stanza) === true) {
+        const jingle_propose_type = getJingleProposeType(stanza);
         return {
             ...attrs, ...{
                 'jingle_propose': jingle_propose_type,
@@ -58,7 +58,7 @@ function getJingleRetractionId(stanza){
 }
 
 export function getJingleTemplate(model) {
-    return tpl_jingle_chat_history(model);
+    return html`<converse-jingle-message jid='${model.get('jingle_status')}'></converse-jingle-message>`;
 }
 
 export function jingleCallInitialized() {
@@ -84,15 +84,6 @@ export function retractCall(el) {
             .t('Retracted').up().up()
             .c('store', { 'xmlns': Strophe.NS.HINTS })
         );
-        const attrs = {
-            'from': _converse.bare_jid,
-            'to': el.jid,
-            'type': 'chat',
-            'jingle_retraction_id': jingle_propose_id, 
-            'msg_id': message_id,
-            'template_hook': 'getJingleTemplate'
-        }
-        el.model.messages.create(attrs);
 }
 
 /**