Prechádzať zdrojové kódy

(TBR)added 2 new custom plugins for jingle

Sanskar Bajpai 3 rokov pred
rodič
commit
70a49d3961

+ 1 - 0
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

+ 1 - 0
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

+ 1 - 2
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(), '') }

+ 30 - 0
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);

+ 5 - 9
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;

+ 0 - 18
src/plugins/jingle/modal/jingle-call-modal.js

@@ -1,18 +0,0 @@
-import BootstrapModal from "plugins/modal/base.js";
-import tpl_start_jingle_call from "../templates/jingle-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_start_jingle_call();
-    }
-});

+ 10 - 0
src/plugins/jingle/templates/header-button.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>
+    `;
+}

+ 0 - 27
src/plugins/jingle/templates/jingle-call.js

@@ -1,27 +0,0 @@
-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>
-    `;
-}

+ 14 - 0
src/plugins/jingle/templates/toolbar-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>`
+}

+ 36 - 0
src/plugins/jingle/toolbar-button.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);

+ 0 - 7
src/plugins/jingle/utils.js

@@ -1,7 +0,0 @@
-import { _converse } from "@converse/headless/core";
-import { JINGLE_CALL_STATUS } from "./constants.js";
-
-export function startJingleCall(jid) {
-    const model = _converse.chatboxes.get(jid);
-    model.save('jingle_status', JINGLE_CALL_STATUS.PENDING);
-}

+ 1 - 0
src/shared/styles/themes/classic.scss

@@ -73,6 +73,7 @@
     --chat-head-color: var(--green);
     --chat-head-text-color: white;
     --chat-toolbar-btn-color: var(--green);
+    --chat-toolbar-btn-close-color: var(--dark-red);
     --chat-toolbar-btn-disabled-color: gray;
 
     --toolbar-btn-text-color: white;