Push-to-Talk Support for Jitsi

package.json

@@ -151,7 +151,7 @@
     "mocha": "^5.0.5",
     "react-addons-test-utils": "^15.4.0",
     "require-json": "0.0.1",
-    "rimraf": "^2.4.3",
+    "rimraf": "^2.6.2",
     "sinon": "^5.0.7",
     "source-map-loader": "^0.2.3",
     "stylelint": "^9.10.1",

res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss

@@ -18,6 +18,20 @@ limitations under the License.
     margin-right: 100px; // align with the rest of the fields
 }
 
+.mx_Shortcut {
+    height: 30px;
+}
+
+.mx_Shortcut_label {
+    margin-left: 30px;
+}
+
+.mx_VoiceUserSettingsTab .mx_ShortcutSet {
+    float: right;
+    width: 48px;
+    margin-right: 17px;
+}
+
 .mx_VoiceUserSettingsTab_missingMediaPermissions {
     margin-bottom: 15px;
 }

src/FromWidgetPostMessageApi.js

@@ -24,10 +24,11 @@ import MatrixClientPeg from "./MatrixClientPeg";
 import RoomViewStore from "./stores/RoomViewStore";
 import { showIntegrationsManager } from './integrations/integrations';
 
-const WIDGET_API_VERSION = '0.0.2'; // Current API version
+const WIDGET_API_VERSION = '0.0.3'; // Current API version
 const SUPPORTED_WIDGET_API_VERSIONS = [
     '0.0.1',
     '0.0.2',
+    '0.0.3',
 ];
 const INBOUND_API_NAME = 'fromWidget';
 

src/PushToTalk.js

@@ -0,0 +1,83 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import PlatformPeg from './PlatformPeg';
+import ActiveWidgetStore from './stores/ActiveWidgetStore';
+import SettingsStore, { SettingLevel } from './settings/SettingsStore';
+
+export default class PushToTalk {
+    static id = "pushToTalk";
+
+    static start(keybinding) {
+        // Call starting, start listening for keys
+        const currentPTTState = SettingsStore.getValue(this.id);
+        currentPTTState.isInCall = true;
+        SettingsStore.setValue(this.id, null, SettingLevel.DEVICE, currentPTTState);
+        this.setKeybinding(keybinding);
+    }
+
+    static stop() {
+        // Call finished, stop listening for keys
+        const currentPTTState = SettingsStore.getValue(this.id);
+        currentPTTState.isInCall = false;
+        SettingsStore.setValue(this.id, null, SettingLevel.DEVICE, currentPTTState);
+        this.removeKeybinding();
+    }
+
+    static setKeybinding(keybinding) {
+        // Add keybinding listener
+        PlatformPeg.get().addGlobalKeybinding(this.id, keybinding, () => {
+            const widgetId = ActiveWidgetStore.getPersistentWidgetId();
+
+            // Only try to un/mute if jitsi is onscreen
+            if (widgetId === null || widgetId === undefined) {
+                return;
+            }
+
+            const widgetMessaging = ActiveWidgetStore.getWidgetMessaging(widgetId);
+
+            // Toggle mic if in toggle mode, else just activate mic
+            if (SettingsStore.getValue(this.id).toggle) {
+                widgetMessaging.toggleJitsiAudio();
+            } else {
+                widgetMessaging.unmuteJitsiAudio();
+            }
+        }, () => {
+            // No release functionality if toggle mode is enabled
+            if (SettingsStore.getValue(this.id).toggle === true) {
+                return;
+            }
+
+            const widgetId = ActiveWidgetStore.getPersistentWidgetId();
+
+            // Only try to un/mute if jitsi is onscreen
+            if (widgetId === null || widgetId === undefined) {
+                return;
+            }
+
+            const widgetMessaging = ActiveWidgetStore.getWidgetMessaging(widgetId);
+            widgetMessaging.muteJitsiAudio();
+        });
+        PlatformPeg.get().startListeningKeys();
+    }
+
+    static removeKeybinding() {
+        // Remove keybinding listener
+        const keybinding = SettingsStore.getValue(this.id).keybinding;
+        PlatformPeg.get().removeGlobalKeybinding(this.id, keybinding);
+        PlatformPeg.get().stopListeningKeys();
+    }
+}

src/WidgetMessaging.js

@@ -104,6 +104,45 @@ export default class WidgetMessaging {
             });
     }
 
+    /**
+     * Toggle Jitsi Audio Mute
+     * @return {Promise} To be resolved when action completed
+     */
+    toggleJitsiAudio() {
+        return this.messageToWidget({
+            api: OUTBOUND_API_NAME,
+            action: "audioToggle",
+        }).then((response) => {
+            return response.success;
+        });
+    }
+
+    /**
+     * Jitsi Audio Mute
+     * @return {Promise} To be resolved when action completed
+     */
+    muteJitsiAudio() {
+        return this.messageToWidget({
+            api: OUTBOUND_API_NAME,
+            action: "audioMute",
+        }).then((response) => {
+            return response.success;
+        });
+    }
+
+    /**
+     * Jitsi Audio Unmute
+     * @return {Promise} To be resolved when action completed
+     */
+    unmuteJitsiAudio() {
+        return this.messageToWidget({
+            api: OUTBOUND_API_NAME,
+            action: "audioUnmute",
+        }).then((response) => {
+            return response.success;
+        });
+    }
+
     sendVisibility(visible) {
         return this.messageToWidget({
             api: OUTBOUND_API_NAME,

src/components/views/elements/PersistedElement.js

@@ -17,8 +17,10 @@ limitations under the License.
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-
 import ResizeObserver from 'resize-observer-polyfill';
+import SettingsStore from '../../../settings/SettingsStore';
+
+import PushToTalk from '../../../PushToTalk';
 
 import dis from '../../../dispatcher';
 
@@ -112,6 +114,11 @@ export default class PersistedElement extends React.Component {
     }
 
     componentDidMount() {
+        // Start Push-To-Talk service when Jitsi widget is mounted
+        if (this.props.persistKey.includes('jitsi') && SettingsStore.getValue(PushToTalk.id).enabled) {
+            PushToTalk.start(SettingsStore.getValue(PushToTalk.id).keybinding);
+        }
+
         this.updateChild();
     }
 
@@ -124,6 +131,11 @@ export default class PersistedElement extends React.Component {
         this.resizeObserver.disconnect();
         window.removeEventListener('resize', this._repositionChild);
         dis.unregister(this._dispatcherRef);
+
+        // Stop Push-To-Talk service when Jitsi widget is unmounted
+        if (this.props.persistKey.includes('jitsi') && SettingsStore.getValue(PushToTalk.id).enabled) {
+            PushToTalk.stop();
+        }
     }
 
     _onAction(payload) {