diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index e1111a8a94..91b91de90d 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -30,6 +30,7 @@ import {Notifier} from "../Notifier"; import type {Renderer} from "react-dom"; import RightPanelStore from "../stores/RightPanelStore"; import WidgetStore from "../stores/WidgetStore"; +import CallHandler from "../CallHandler"; declare global { interface Window { @@ -53,6 +54,7 @@ declare global { mxNotifier: typeof Notifier; mxRightPanelStore: RightPanelStore; mxWidgetStore: WidgetStore; + mxCallHandler: CallHandler; } interface Document { @@ -62,6 +64,9 @@ declare global { interface Navigator { userLanguage?: string; + // https://github.com/Microsoft/TypeScript/issues/19473 + // https://developer.mozilla.org/en-US/docs/Web/API/MediaSession + mediaSession: any; } interface StorageEstimate { diff --git a/src/CallHandler.js b/src/CallHandler.js deleted file mode 100644 index ad40332af5..0000000000 --- a/src/CallHandler.js +++ /dev/null @@ -1,526 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2017, 2018 New Vector Ltd -Copyright 2019, 2020 The Matrix.org Foundation C.I.C. - -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. -*/ - -/* - * Manages a list of all the currently active calls. - * - * This handler dispatches when voip calls are added/updated/removed from this list: - * { - * action: 'call_state' - * room_id: - * } - * - * To know the state of the call, this handler exposes a getter to - * obtain the call for a room: - * var call = CallHandler.getCall(roomId) - * var state = call.call_state; // ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing - * - * This handler listens for and handles the following actions: - * { - * action: 'place_call', - * type: 'voice|video', - * room_id: - * } - * - * { - * action: 'incoming_call' - * call: MatrixCall - * } - * - * { - * action: 'hangup' - * room_id: - * } - * - * { - * action: 'answer' - * room_id: - * } - */ - -import {MatrixClientPeg} from './MatrixClientPeg'; -import PlatformPeg from './PlatformPeg'; -import Modal from './Modal'; -import { _t } from './languageHandler'; -import Matrix from 'matrix-js-sdk'; -import dis from './dispatcher/dispatcher'; -import WidgetUtils from './utils/WidgetUtils'; -import WidgetEchoStore from './stores/WidgetEchoStore'; -import SettingsStore from './settings/SettingsStore'; -import {generateHumanReadableId} from "./utils/NamingUtils"; -import {Jitsi} from "./widgets/Jitsi"; -import {WidgetType} from "./widgets/WidgetType"; -import {SettingLevel} from "./settings/SettingLevel"; -import {base32} from "rfc4648"; - -import QuestionDialog from "./components/views/dialogs/QuestionDialog"; -import ErrorDialog from "./components/views/dialogs/ErrorDialog"; - -global.mxCalls = { - //room_id: MatrixCall -}; -const calls = global.mxCalls; -let ConferenceHandler = null; - -const audioPromises = {}; - -function play(audioId) { - // TODO: Attach an invisible element for this instead - // which listens? - const audio = document.getElementById(audioId); - if (audio) { - const playAudio = async () => { - try { - // This still causes the chrome debugger to break on promise rejection if - // the promise is rejected, even though we're catching the exception. - await audio.play(); - } catch (e) { - // This is usually because the user hasn't interacted with the document, - // or chrome doesn't think so and is denying the request. Not sure what - // we can really do here... - // https://github.com/vector-im/element-web/issues/7657 - console.log("Unable to play audio clip", e); - } - }; - if (audioPromises[audioId]) { - audioPromises[audioId] = audioPromises[audioId].then(()=>{ - audio.load(); - return playAudio(); - }); - } else { - audioPromises[audioId] = playAudio(); - } - } -} - -function pause(audioId) { - // TODO: Attach an invisible element for this instead - // which listens? - const audio = document.getElementById(audioId); - if (audio) { - if (audioPromises[audioId]) { - audioPromises[audioId] = audioPromises[audioId].then(()=>audio.pause()); - } else { - // pause doesn't actually return a promise, but might as well do this for symmetry with play(); - audioPromises[audioId] = audio.pause(); - } - } -} - -function _setCallListeners(call) { - call.on("error", function(err) { - console.error("Call error:", err); - if ( - MatrixClientPeg.get().getTurnServers().length === 0 && - SettingsStore.getValue("fallbackICEServerAllowed") === null - ) { - _showICEFallbackPrompt(); - return; - } - - Modal.createTrackedDialog('Call Failed', '', ErrorDialog, { - title: _t('Call Failed'), - description: err.message, - }); - }); - call.on("hangup", function() { - _setCallState(undefined, call.roomId, "ended"); - }); - // map web rtc states to dummy UI state - // ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing - call.on("state", function(newState, oldState) { - if (newState === "ringing") { - _setCallState(call, call.roomId, "ringing"); - pause("ringbackAudio"); - } else if (newState === "invite_sent") { - _setCallState(call, call.roomId, "ringback"); - play("ringbackAudio"); - } else if (newState === "ended" && oldState === "connected") { - _setCallState(undefined, call.roomId, "ended"); - pause("ringbackAudio"); - play("callendAudio"); - } else if (newState === "ended" && oldState === "invite_sent" && - (call.hangupParty === "remote" || - (call.hangupParty === "local" && call.hangupReason === "invite_timeout") - )) { - _setCallState(call, call.roomId, "busy"); - pause("ringbackAudio"); - play("busyAudio"); - Modal.createTrackedDialog('Call Handler', 'Call Timeout', ErrorDialog, { - title: _t('Call Timeout'), - description: _t('The remote side failed to pick up') + '.', - }); - } else if (oldState === "invite_sent") { - _setCallState(call, call.roomId, "stop_ringback"); - pause("ringbackAudio"); - } else if (oldState === "ringing") { - _setCallState(call, call.roomId, "stop_ringing"); - pause("ringbackAudio"); - } else if (newState === "connected") { - _setCallState(call, call.roomId, "connected"); - pause("ringbackAudio"); - } - }); -} - -function _setCallState(call, roomId, status) { - console.log( - `Call state in ${roomId} changed to ${status} (${call ? call.call_state : "-"})`, - ); - calls[roomId] = call; - - if (status === "ringing") { - play("ringAudio"); - } else if (call && call.call_state === "ringing") { - pause("ringAudio"); - } - - if (call) { - call.call_state = status; - } - dis.dispatch({ - action: 'call_state', - room_id: roomId, - state: status, - }); -} - -function _showICEFallbackPrompt() { - const cli = MatrixClientPeg.get(); - const code = sub => {sub}; - Modal.createTrackedDialog('No TURN servers', '', QuestionDialog, { - title: _t("Call failed due to misconfigured server"), - description:
-

{_t( - "Please ask the administrator of your homeserver " + - "(%(homeserverDomain)s) to configure a TURN server in " + - "order for calls to work reliably.", - { homeserverDomain: cli.getDomain() }, { code }, - )}

-

{_t( - "Alternatively, you can try to use the public server at " + - "turn.matrix.org, but this will not be as reliable, and " + - "it will share your IP address with that server. You can also manage " + - "this in Settings.", - null, { code }, - )}

-
, - button: _t('Try using turn.matrix.org'), - cancelButton: _t('OK'), - onFinished: (allow) => { - SettingsStore.setValue("fallbackICEServerAllowed", null, SettingLevel.DEVICE, allow); - cli.setFallbackICEServerAllowed(allow); - }, - }, null, true); -} - -function _onAction(payload) { - function placeCall(newCall) { - _setCallListeners(newCall); - if (payload.type === 'voice') { - newCall.placeVoiceCall(); - } else if (payload.type === 'video') { - newCall.placeVideoCall( - payload.remote_element, - payload.local_element, - ); - } else if (payload.type === 'screensharing') { - const screenCapErrorString = PlatformPeg.get().screenCaptureErrorString(); - if (screenCapErrorString) { - _setCallState(undefined, newCall.roomId, "ended"); - console.log("Can't capture screen: " + screenCapErrorString); - Modal.createTrackedDialog('Call Handler', 'Unable to capture screen', ErrorDialog, { - title: _t('Unable to capture screen'), - description: screenCapErrorString, - }); - return; - } - newCall.placeScreenSharingCall( - payload.remote_element, - payload.local_element, - ); - } else { - console.error("Unknown conf call type: %s", payload.type); - } - } - - switch (payload.action) { - case 'place_call': - { - if (callHandler.getAnyActiveCall()) { - Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, { - title: _t('Existing Call'), - description: _t('You are already in a call.'), - }); - return; // don't allow >1 call to be placed. - } - - // if the runtime env doesn't do VoIP, whine. - if (!MatrixClientPeg.get().supportsVoip()) { - Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, { - title: _t('VoIP is unsupported'), - description: _t('You cannot place VoIP calls in this browser.'), - }); - return; - } - - const room = MatrixClientPeg.get().getRoom(payload.room_id); - if (!room) { - console.error("Room %s does not exist.", payload.room_id); - return; - } - - const members = room.getJoinedMembers(); - if (members.length <= 1) { - Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, { - description: _t('You cannot place a call with yourself.'), - }); - return; - } else if (members.length === 2) { - console.info("Place %s call in %s", payload.type, payload.room_id); - const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), payload.room_id); - placeCall(call); - } else { // > 2 - dis.dispatch({ - action: "place_conference_call", - room_id: payload.room_id, - type: payload.type, - remote_element: payload.remote_element, - local_element: payload.local_element, - }); - } - } - break; - case 'place_conference_call': - console.info("Place conference call in %s", payload.room_id); - _startCallApp(payload.room_id, payload.type); - break; - case 'incoming_call': - { - if (callHandler.getAnyActiveCall()) { - // ignore multiple incoming calls. in future, we may want a line-1/line-2 setup. - // we avoid rejecting with "busy" in case the user wants to answer it on a different device. - // in future we could signal a "local busy" as a warning to the caller. - // see https://github.com/vector-im/vector-web/issues/1964 - return; - } - - // if the runtime env doesn't do VoIP, stop here. - if (!MatrixClientPeg.get().supportsVoip()) { - return; - } - - const call = payload.call; - _setCallListeners(call); - _setCallState(call, call.roomId, "ringing"); - } - break; - case 'hangup': - if (!calls[payload.room_id]) { - return; // no call to hangup - } - calls[payload.room_id].hangup(); - _setCallState(null, payload.room_id, "ended"); - break; - case 'answer': - if (!calls[payload.room_id]) { - return; // no call to answer - } - calls[payload.room_id].answer(); - _setCallState(calls[payload.room_id], payload.room_id, "connected"); - dis.dispatch({ - action: "view_room", - room_id: payload.room_id, - }); - break; - } -} - -async function _startCallApp(roomId, type) { - dis.dispatch({ - action: 'appsDrawer', - show: true, - }); - - const room = MatrixClientPeg.get().getRoom(roomId); - const currentJitsiWidgets = WidgetUtils.getRoomWidgetsOfType(room, WidgetType.JITSI); - - if (WidgetEchoStore.roomHasPendingWidgetsOfType(roomId, currentJitsiWidgets, WidgetType.JITSI)) { - Modal.createTrackedDialog('Call already in progress', '', ErrorDialog, { - title: _t('Call in Progress'), - description: _t('A call is currently being placed!'), - }); - return; - } - - if (currentJitsiWidgets.length > 0) { - console.warn( - "Refusing to start conference call widget in " + roomId + - " a conference call widget is already present", - ); - - if (WidgetUtils.canUserModifyWidgets(roomId)) { - Modal.createTrackedDialog('Already have Jitsi Widget', '', QuestionDialog, { - title: _t('End Call'), - description: _t('Remove the group call from the room?'), - button: _t('End Call'), - cancelButton: _t('Cancel'), - onFinished: (endCall) => { - if (endCall) { - WidgetUtils.setRoomWidget(roomId, currentJitsiWidgets[0].getContent()['id']); - } - }, - }); - } else { - Modal.createTrackedDialog('Already have Jitsi Widget', '', ErrorDialog, { - title: _t('Call in Progress'), - description: _t("You don't have permission to remove the call from the room"), - }); - } - return; - } - - const jitsiDomain = Jitsi.getInstance().preferredDomain; - const jitsiAuth = await Jitsi.getInstance().getJitsiAuth(); - let confId; - if (jitsiAuth === 'openidtoken-jwt') { - // Create conference ID from room ID - // For compatibility with Jitsi, use base32 without padding. - // More details here: - // https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification - confId = base32.stringify(Buffer.from(roomId), { pad: false }); - } else { - // Create a random human readable conference ID - confId = `JitsiConference${generateHumanReadableId()}`; - } - - let widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl({auth: jitsiAuth}); - - // TODO: Remove URL hacks when the mobile clients eventually support v2 widgets - const parsedUrl = new URL(widgetUrl); - parsedUrl.search = ''; // set to empty string to make the URL class use searchParams instead - parsedUrl.searchParams.set('confId', confId); - widgetUrl = parsedUrl.toString(); - - const widgetData = { - conferenceId: confId, - isAudioOnly: type === 'voice', - domain: jitsiDomain, - auth: jitsiAuth, - }; - - const widgetId = ( - 'jitsi_' + - MatrixClientPeg.get().credentials.userId + - '_' + - Date.now() - ); - - WidgetUtils.setRoomWidget(roomId, widgetId, WidgetType.JITSI, widgetUrl, 'Jitsi', widgetData).then(() => { - console.log('Jitsi widget added'); - }).catch((e) => { - if (e.errcode === 'M_FORBIDDEN') { - Modal.createTrackedDialog('Call Failed', '', ErrorDialog, { - title: _t('Permission Required'), - description: _t("You do not have permission to start a conference call in this room"), - }); - } - console.error(e); - }); -} - -// FIXME: Nasty way of making sure we only register -// with the dispatcher once -if (!global.mxCallHandler) { - dis.register(_onAction); - // add empty handlers for media actions, otherwise the media keys - // end up causing the audio elements with our ring/ringback etc - // audio clips in to play. - if (navigator.mediaSession) { - navigator.mediaSession.setActionHandler('play', function() {}); - navigator.mediaSession.setActionHandler('pause', function() {}); - navigator.mediaSession.setActionHandler('seekbackward', function() {}); - navigator.mediaSession.setActionHandler('seekforward', function() {}); - navigator.mediaSession.setActionHandler('previoustrack', function() {}); - navigator.mediaSession.setActionHandler('nexttrack', function() {}); - } -} - -const callHandler = { - getCallForRoom: function(roomId) { - let call = callHandler.getCall(roomId); - if (call) return call; - - if (ConferenceHandler) { - call = ConferenceHandler.getConferenceCallForRoom(roomId); - } - if (call) return call; - - return null; - }, - - getCall: function(roomId) { - return calls[roomId] || null; - }, - - getAnyActiveCall: function() { - const roomsWithCalls = Object.keys(calls); - for (let i = 0; i < roomsWithCalls.length; i++) { - if (calls[roomsWithCalls[i]] && - calls[roomsWithCalls[i]].call_state !== "ended") { - return calls[roomsWithCalls[i]]; - } - } - return null; - }, - - /** - * The conference handler is a module that deals with implementation-specific - * multi-party calling implementations. Element passes in its own which creates - * a one-to-one call with a freeswitch conference bridge. As of July 2018, - * the de-facto way of conference calling is a Jitsi widget, so this is - * deprecated. It reamins here for two reasons: - * 1. So Element still supports joining existing freeswitch conference calls - * (but doesn't support creating them). After a transition period, we can - * remove support for joining them too. - * 2. To hide the one-to-one rooms that old-style conferencing creates. This - * is much harder to remove: probably either we make Element leave & forget these - * rooms after we remove support for joining freeswitch conferences, or we - * accept that random rooms with cryptic users will suddently appear for - * anyone who's ever used conference calling, or we are stuck with this - * code forever. - * - * @param {object} confHandler The conference handler object - */ - setConferenceHandler: function(confHandler) { - ConferenceHandler = confHandler; - }, - - getConferenceHandler: function() { - return ConferenceHandler; - }, -}; -// Only things in here which actually need to be global are the -// calls list (done separately) and making sure we only register -// with the dispatcher once (which uses this mechanism but checks -// separately). This could be tidied up. -if (global.mxCallHandler === undefined) { - global.mxCallHandler = callHandler; -} - -export default global.mxCallHandler; diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx new file mode 100644 index 0000000000..62b91f938b --- /dev/null +++ b/src/CallHandler.tsx @@ -0,0 +1,487 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2017, 2018 New Vector Ltd +Copyright 2019, 2020 The Matrix.org Foundation C.I.C. + +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. +*/ + +/* + * Manages a list of all the currently active calls. + * + * This handler dispatches when voip calls are added/updated/removed from this list: + * { + * action: 'call_state' + * room_id: + * } + * + * To know the state of the call, this handler exposes a getter to + * obtain the call for a room: + * var call = CallHandler.getCall(roomId) + * var state = call.call_state; // ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing + * + * This handler listens for and handles the following actions: + * { + * action: 'place_call', + * type: 'voice|video', + * room_id: + * } + * + * { + * action: 'incoming_call' + * call: MatrixCall + * } + * + * { + * action: 'hangup' + * room_id: + * } + * + * { + * action: 'answer' + * room_id: + * } + */ + +import React from 'react'; + +import {MatrixClientPeg} from './MatrixClientPeg'; +import PlatformPeg from './PlatformPeg'; +import Modal from './Modal'; +import { _t } from './languageHandler'; +// @ts-ignore - XXX: tsc doesn't like this: our js-sdk imports are complex so this isn't surprising +import Matrix from 'matrix-js-sdk'; +import dis from './dispatcher/dispatcher'; +import WidgetUtils from './utils/WidgetUtils'; +import WidgetEchoStore from './stores/WidgetEchoStore'; +import SettingsStore from './settings/SettingsStore'; +import {generateHumanReadableId} from "./utils/NamingUtils"; +import {Jitsi} from "./widgets/Jitsi"; +import {WidgetType} from "./widgets/WidgetType"; +import {SettingLevel} from "./settings/SettingLevel"; +import { ActionPayload } from "./dispatcher/payloads"; +import {base32} from "rfc4648"; + +import QuestionDialog from "./components/views/dialogs/QuestionDialog"; +import ErrorDialog from "./components/views/dialogs/ErrorDialog"; + +// until we ts-ify the js-sdk voip code +type Call = any; + +export default class CallHandler { + private calls = new Map(); + private audioPromises = new Map>(); + + static sharedInstance() { + if (!window.mxCallHandler) { + window.mxCallHandler = new CallHandler() + } + + return window.mxCallHandler; + } + + constructor() { + dis.register(this.onAction); + // add empty handlers for media actions, otherwise the media keys + // end up causing the audio elements with our ring/ringback etc + // audio clips in to play. + if (navigator.mediaSession) { + navigator.mediaSession.setActionHandler('play', function() {}); + navigator.mediaSession.setActionHandler('pause', function() {}); + navigator.mediaSession.setActionHandler('seekbackward', function() {}); + navigator.mediaSession.setActionHandler('seekforward', function() {}); + navigator.mediaSession.setActionHandler('previoustrack', function() {}); + navigator.mediaSession.setActionHandler('nexttrack', function() {}); + } + } + + getCallForRoom(roomId: string): Call { + return this.calls.get(roomId) || null; + } + + getAnyActiveCall() { + const roomsWithCalls = Object.keys(this.calls); + for (let i = 0; i < roomsWithCalls.length; i++) { + if (this.calls.get(roomsWithCalls[i]) && + this.calls.get(roomsWithCalls[i]).call_state !== "ended") { + return this.calls.get(roomsWithCalls[i]); + } + } + return null; + } + + play(audioId: string) { + // TODO: Attach an invisible element for this instead + // which listens? + const audio = document.getElementById(audioId) as HTMLMediaElement; + if (audio) { + const playAudio = async () => { + try { + // This still causes the chrome debugger to break on promise rejection if + // the promise is rejected, even though we're catching the exception. + await audio.play(); + } catch (e) { + // This is usually because the user hasn't interacted with the document, + // or chrome doesn't think so and is denying the request. Not sure what + // we can really do here... + // https://github.com/vector-im/element-web/issues/7657 + console.log("Unable to play audio clip", e); + } + }; + if (this.audioPromises.has(audioId)) { + this.audioPromises.set(audioId, this.audioPromises.get(audioId).then(() => { + audio.load(); + return playAudio(); + })); + } else { + this.audioPromises.set(audioId, playAudio()); + } + } + } + + pause(audioId: string) { + // TODO: Attach an invisible element for this instead + // which listens? + const audio = document.getElementById(audioId) as HTMLMediaElement; + if (audio) { + if (this.audioPromises.has(audioId)) { + this.audioPromises.set(audioId, this.audioPromises.get(audioId).then(() => audio.pause())); + } else { + // pause doesn't return a promise, so just do it + audio.pause(); + } + } + } + + private setCallListeners(call: Call) { + call.on("error", (err) => { + console.error("Call error:", err); + if ( + MatrixClientPeg.get().getTurnServers().length === 0 && + SettingsStore.getValue("fallbackICEServerAllowed") === null + ) { + this.showICEFallbackPrompt(); + return; + } + + Modal.createTrackedDialog('Call Failed', '', ErrorDialog, { + title: _t('Call Failed'), + description: err.message, + }); + }); + call.on("hangup", () => { + this.setCallState(undefined, call.roomId, "ended"); + }); + // map web rtc states to dummy UI state + // ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing + call.on("state", (newState, oldState) => { + if (newState === "ringing") { + this.setCallState(call, call.roomId, "ringing"); + this.pause("ringbackAudio"); + } else if (newState === "invite_sent") { + this.setCallState(call, call.roomId, "ringback"); + this.play("ringbackAudio"); + } else if (newState === "ended" && oldState === "connected") { + this.setCallState(undefined, call.roomId, "ended"); + this.pause("ringbackAudio"); + this.play("callendAudio"); + } else if (newState === "ended" && oldState === "invite_sent" && + (call.hangupParty === "remote" || + (call.hangupParty === "local" && call.hangupReason === "invite_timeout") + )) { + this.setCallState(call, call.roomId, "busy"); + this.pause("ringbackAudio"); + this.play("busyAudio"); + Modal.createTrackedDialog('Call Handler', 'Call Timeout', ErrorDialog, { + title: _t('Call Timeout'), + description: _t('The remote side failed to pick up') + '.', + }); + } else if (oldState === "invite_sent") { + this.setCallState(call, call.roomId, "stop_ringback"); + this.pause("ringbackAudio"); + } else if (oldState === "ringing") { + this.setCallState(call, call.roomId, "stop_ringing"); + this.pause("ringbackAudio"); + } else if (newState === "connected") { + this.setCallState(call, call.roomId, "connected"); + this.pause("ringbackAudio"); + } + }); + } + + private setCallState(call: Call, roomId: string, status: string) { + console.log( + `Call state in ${roomId} changed to ${status} (${call ? call.call_state : "-"})`, + ); + this.calls.set(roomId, call); + + if (status === "ringing") { + this.play("ringAudio"); + } else if (call && call.call_state === "ringing") { + this.pause("ringAudio"); + } + + if (call) { + call.call_state = status; + } + dis.dispatch({ + action: 'call_state', + room_id: roomId, + state: status, + }); + } + + private showICEFallbackPrompt() { + const cli = MatrixClientPeg.get(); + const code = sub => {sub}; + Modal.createTrackedDialog('No TURN servers', '', QuestionDialog, { + title: _t("Call failed due to misconfigured server"), + description:
+

{_t( + "Please ask the administrator of your homeserver " + + "(%(homeserverDomain)s) to configure a TURN server in " + + "order for calls to work reliably.", + { homeserverDomain: cli.getDomain() }, { code }, + )}

+

{_t( + "Alternatively, you can try to use the public server at " + + "turn.matrix.org, but this will not be as reliable, and " + + "it will share your IP address with that server. You can also manage " + + "this in Settings.", + null, { code }, + )}

+
, + button: _t('Try using turn.matrix.org'), + cancelButton: _t('OK'), + onFinished: (allow) => { + SettingsStore.setValue("fallbackICEServerAllowed", null, SettingLevel.DEVICE, allow); + cli.setFallbackICEServerAllowed(allow); + }, + }, null, true); + } + + private onAction = (payload: ActionPayload) => { + const placeCall = (newCall) => { + this.setCallListeners(newCall); + if (payload.type === 'voice') { + newCall.placeVoiceCall(); + } else if (payload.type === 'video') { + newCall.placeVideoCall( + payload.remote_element, + payload.local_element, + ); + } else if (payload.type === 'screensharing') { + const screenCapErrorString = PlatformPeg.get().screenCaptureErrorString(); + if (screenCapErrorString) { + this.setCallState(undefined, newCall.roomId, "ended"); + console.log("Can't capture screen: " + screenCapErrorString); + Modal.createTrackedDialog('Call Handler', 'Unable to capture screen', ErrorDialog, { + title: _t('Unable to capture screen'), + description: screenCapErrorString, + }); + return; + } + newCall.placeScreenSharingCall( + payload.remote_element, + payload.local_element, + ); + } else { + console.error("Unknown conf call type: %s", payload.type); + } + } + + switch (payload.action) { + case 'place_call': + { + if (this.getAnyActiveCall()) { + Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, { + title: _t('Existing Call'), + description: _t('You are already in a call.'), + }); + return; // don't allow >1 call to be placed. + } + + // if the runtime env doesn't do VoIP, whine. + if (!MatrixClientPeg.get().supportsVoip()) { + Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, { + title: _t('VoIP is unsupported'), + description: _t('You cannot place VoIP calls in this browser.'), + }); + return; + } + + const room = MatrixClientPeg.get().getRoom(payload.room_id); + if (!room) { + console.error("Room %s does not exist.", payload.room_id); + return; + } + + const members = room.getJoinedMembers(); + if (members.length <= 1) { + Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, { + description: _t('You cannot place a call with yourself.'), + }); + return; + } else if (members.length === 2) { + console.info("Place %s call in %s", payload.type, payload.room_id); + const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), payload.room_id); + placeCall(call); + } else { // > 2 + dis.dispatch({ + action: "place_conference_call", + room_id: payload.room_id, + type: payload.type, + remote_element: payload.remote_element, + local_element: payload.local_element, + }); + } + } + break; + case 'place_conference_call': + console.info("Place conference call in %s", payload.room_id); + this.startCallApp(payload.room_id, payload.type); + break; + case 'incoming_call': + { + if (this.getAnyActiveCall()) { + // ignore multiple incoming calls. in future, we may want a line-1/line-2 setup. + // we avoid rejecting with "busy" in case the user wants to answer it on a different device. + // in future we could signal a "local busy" as a warning to the caller. + // see https://github.com/vector-im/vector-web/issues/1964 + return; + } + + // if the runtime env doesn't do VoIP, stop here. + if (!MatrixClientPeg.get().supportsVoip()) { + return; + } + + const call = payload.call; + this.setCallListeners(call); + this.setCallState(call, call.roomId, "ringing"); + } + break; + case 'hangup': + if (!this.calls.get(payload.room_id)) { + return; // no call to hangup + } + this.calls.get(payload.room_id).hangup(); + this.setCallState(null, payload.room_id, "ended"); + break; + case 'answer': + if (!this.calls.get(payload.room_id)) { + return; // no call to answer + } + this.calls.get(payload.room_id).answer(); + this.setCallState(this.calls.get(payload.room_id), payload.room_id, "connected"); + dis.dispatch({ + action: "view_room", + room_id: payload.room_id, + }); + break; + } + } + + private async startCallApp(roomId: string, type: string) { + dis.dispatch({ + action: 'appsDrawer', + show: true, + }); + + const room = MatrixClientPeg.get().getRoom(roomId); + const currentJitsiWidgets = WidgetUtils.getRoomWidgetsOfType(room, WidgetType.JITSI); + + if (WidgetEchoStore.roomHasPendingWidgetsOfType(roomId, currentJitsiWidgets, WidgetType.JITSI)) { + Modal.createTrackedDialog('Call already in progress', '', ErrorDialog, { + title: _t('Call in Progress'), + description: _t('A call is currently being placed!'), + }); + return; + } + + if (currentJitsiWidgets.length > 0) { + console.warn( + "Refusing to start conference call widget in " + roomId + + " a conference call widget is already present", + ); + + if (WidgetUtils.canUserModifyWidgets(roomId)) { + Modal.createTrackedDialog('Already have Jitsi Widget', '', QuestionDialog, { + title: _t('End Call'), + description: _t('Remove the group call from the room?'), + button: _t('End Call'), + cancelButton: _t('Cancel'), + onFinished: (endCall) => { + if (endCall) { + WidgetUtils.setRoomWidget(roomId, currentJitsiWidgets[0].getContent()['id']); + } + }, + }); + } else { + Modal.createTrackedDialog('Already have Jitsi Widget', '', ErrorDialog, { + title: _t('Call in Progress'), + description: _t("You don't have permission to remove the call from the room"), + }); + } + return; + } + + const jitsiDomain = Jitsi.getInstance().preferredDomain; + const jitsiAuth = await Jitsi.getInstance().getJitsiAuth(); + let confId; + if (jitsiAuth === 'openidtoken-jwt') { + // Create conference ID from room ID + // For compatibility with Jitsi, use base32 without padding. + // More details here: + // https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification + confId = base32.stringify(Buffer.from(roomId), { pad: false }); + } else { + // Create a random human readable conference ID + confId = `JitsiConference${generateHumanReadableId()}`; + } + + let widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl({auth: jitsiAuth}); + + // TODO: Remove URL hacks when the mobile clients eventually support v2 widgets + const parsedUrl = new URL(widgetUrl); + parsedUrl.search = ''; // set to empty string to make the URL class use searchParams instead + parsedUrl.searchParams.set('confId', confId); + widgetUrl = parsedUrl.toString(); + + const widgetData = { + conferenceId: confId, + isAudioOnly: type === 'voice', + domain: jitsiDomain, + auth: jitsiAuth, + }; + + const widgetId = ( + 'jitsi_' + + MatrixClientPeg.get().credentials.userId + + '_' + + Date.now() + ); + + WidgetUtils.setRoomWidget(roomId, widgetId, WidgetType.JITSI, widgetUrl, 'Jitsi', widgetData).then(() => { + console.log('Jitsi widget added'); + }).catch((e) => { + if (e.errcode === 'M_FORBIDDEN') { + Modal.createTrackedDialog('Call Failed', '', ErrorDialog, { + title: _t('Permission Required'), + description: _t("You do not have permission to start a conference call in this room"), + }); + } + console.error(e); + }); + } +} diff --git a/src/Rooms.js b/src/Rooms.js index 218e970f35..3da2b9bc14 100644 --- a/src/Rooms.js +++ b/src/Rooms.js @@ -26,58 +26,6 @@ export function getDisplayAliasForRoom(room) { return room.getCanonicalAlias() || room.getAltAliases()[0]; } -/** - * If the room contains only two members including the logged-in user, - * return the other one. Otherwise, return null. - */ -export function getOnlyOtherMember(room, myUserId) { - if (room.currentState.getJoinedMemberCount() === 2) { - return room.getJoinedMembers().filter(function(m) { - return m.userId !== myUserId; - })[0]; - } - - return null; -} - -function _isConfCallRoom(room, myUserId, conferenceHandler) { - if (!conferenceHandler) return false; - - const myMembership = room.getMyMembership(); - if (myMembership != "join") { - return false; - } - - const otherMember = getOnlyOtherMember(room, myUserId); - if (!otherMember) { - return false; - } - - if (conferenceHandler.isConferenceUser(otherMember.userId)) { - return true; - } - - return false; -} - -// Cache whether a room is a conference call. Assumes that rooms will always -// either will or will not be a conference call room. -const isConfCallRoomCache = { - // $roomId: bool -}; - -export function isConfCallRoom(room, myUserId, conferenceHandler) { - if (isConfCallRoomCache[room.roomId] !== undefined) { - return isConfCallRoomCache[room.roomId]; - } - - const result = _isConfCallRoom(room, myUserId, conferenceHandler); - - isConfCallRoomCache[room.roomId] = result; - - return result; -} - export function looksLikeDirectMessageRoom(room, myUserId) { const myMembership = room.getMyMembership(); const me = room.getMember(myUserId); diff --git a/src/TextForEvent.js b/src/TextForEvent.js index a76c1f59e6..f9cda23650 100644 --- a/src/TextForEvent.js +++ b/src/TextForEvent.js @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ import {MatrixClientPeg} from './MatrixClientPeg'; -import CallHandler from './CallHandler'; import { _t } from './languageHandler'; import * as Roles from './Roles'; import {isValid3pidInvite} from "./RoomInvite"; @@ -29,7 +28,6 @@ function textForMemberEvent(ev) { const prevContent = ev.getPrevContent(); const content = ev.getContent(); - const ConferenceHandler = CallHandler.getConferenceHandler(); const reason = content.reason ? (_t('Reason') + ': ' + content.reason) : ''; switch (content.membership) { case 'invite': { @@ -44,11 +42,7 @@ function textForMemberEvent(ev) { return _t('%(targetName)s accepted an invitation.', {targetName}); } } else { - if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) { - return _t('%(senderName)s requested a VoIP conference.', {senderName}); - } else { - return _t('%(senderName)s invited %(targetName)s.', {senderName, targetName}); - } + return _t('%(senderName)s invited %(targetName)s.', {senderName, targetName}); } } case 'ban': @@ -85,17 +79,11 @@ function textForMemberEvent(ev) { } } else { if (!ev.target) console.warn("Join message has no target! -- " + ev.getContent().state_key); - if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) { - return _t('VoIP conference started.'); - } else { - return _t('%(targetName)s joined the room.', {targetName}); - } + return _t('%(targetName)s joined the room.', {targetName}); } case 'leave': if (ev.getSender() === ev.getStateKey()) { - if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) { - return _t('VoIP conference finished.'); - } else if (prevContent.membership === "invite") { + if (prevContent.membership === "invite") { return _t('%(targetName)s rejected the invitation.', {targetName}); } else { return _t('%(targetName)s left the room.', {targetName}); diff --git a/src/VectorConferenceHandler.js b/src/VectorConferenceHandler.js deleted file mode 100644 index c10bc659ae..0000000000 --- a/src/VectorConferenceHandler.js +++ /dev/null @@ -1,135 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2019 The Matrix.org Foundation C.I.C. - -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 {createNewMatrixCall as jsCreateNewMatrixCall, Room} from "matrix-js-sdk"; -import CallHandler from './CallHandler'; -import {MatrixClientPeg} from "./MatrixClientPeg"; - -// FIXME: this is Element specific code, but will be removed shortly when we -// switch over to Jitsi entirely for video conferencing. - -// FIXME: This currently forces Element to try to hit the matrix.org AS for -// conferencing. This is bad because it prevents people running their own ASes -// from being used. This isn't permanent and will be customisable in the future: -// see the proposal at docs/conferencing.md for more info. -const USER_PREFIX = "fs_"; -const DOMAIN = "matrix.org"; - -export function ConferenceCall(matrixClient, groupChatRoomId) { - this.client = matrixClient; - this.groupRoomId = groupChatRoomId; - this.confUserId = getConferenceUserIdForRoom(this.groupRoomId); -} - -ConferenceCall.prototype.setup = function() { - const self = this; - return this._joinConferenceUser().then(function() { - return self._getConferenceUserRoom(); - }).then(function(room) { - // return a call for *this* room to be placed. We also tack on - // confUserId to speed up lookups (else we'd need to loop every room - // looking for a 1:1 room with this conf user ID!) - const call = jsCreateNewMatrixCall(self.client, room.roomId); - call.confUserId = self.confUserId; - call.groupRoomId = self.groupRoomId; - return call; - }); -}; - -ConferenceCall.prototype._joinConferenceUser = function() { - // Make sure the conference user is in the group chat room - const groupRoom = this.client.getRoom(this.groupRoomId); - if (!groupRoom) { - return Promise.reject("Bad group room ID"); - } - const member = groupRoom.getMember(this.confUserId); - if (member && member.membership === "join") { - return Promise.resolve(); - } - return this.client.invite(this.groupRoomId, this.confUserId); -}; - -ConferenceCall.prototype._getConferenceUserRoom = function() { - // Use an existing 1:1 with the conference user; else make one - const rooms = this.client.getRooms(); - let confRoom = null; - for (let i = 0; i < rooms.length; i++) { - const confUser = rooms[i].getMember(this.confUserId); - if (confUser && confUser.membership === "join" && - rooms[i].getJoinedMemberCount() === 2) { - confRoom = rooms[i]; - break; - } - } - if (confRoom) { - return Promise.resolve(confRoom); - } - return this.client.createRoom({ - preset: "private_chat", - invite: [this.confUserId], - }).then(function(res) { - return new Room(res.room_id, null, MatrixClientPeg.get().getUserId()); - }); -}; - -/** - * Check if this user ID is in fact a conference bot. - * @param {string} userId The user ID to check. - * @return {boolean} True if it is a conference bot. - */ -export function isConferenceUser(userId) { - if (userId.indexOf("@" + USER_PREFIX) !== 0) { - return false; - } - const base64part = userId.split(":")[0].substring(1 + USER_PREFIX.length); - if (base64part) { - const decoded = new Buffer(base64part, "base64").toString(); - // ! $STUFF : $STUFF - return /^!.+:.+/.test(decoded); - } - return false; -} - -export function getConferenceUserIdForRoom(roomId) { - // abuse browserify's core node Buffer support (strip padding ='s) - const base64RoomId = new Buffer(roomId).toString("base64").replace(/=/g, ""); - return "@" + USER_PREFIX + base64RoomId + ":" + DOMAIN; -} - -export function createNewMatrixCall(client, roomId) { - const confCall = new ConferenceCall( - client, roomId, - ); - return confCall.setup(); -} - -export function getConferenceCallForRoom(roomId) { - // search for a conference 1:1 call for this group chat room ID - const activeCall = CallHandler.getAnyActiveCall(); - if (activeCall && activeCall.confUserId) { - const thisRoomConfUserId = getConferenceUserIdForRoom( - roomId, - ); - if (thisRoomConfUserId === activeCall.confUserId) { - return activeCall; - } - } - return null; -} - -// TODO: Document this. -export const slot = 'conference'; diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 81b8da2cad..4dc2080895 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -85,7 +85,6 @@ interface IProps { threepidInvite?: IThreepidInvite; roomOobData?: object; currentRoomId: string; - ConferenceHandler?: object; collapseLhs: boolean; config: { piwik: { @@ -637,7 +636,6 @@ class LoggedInView extends React.Component { viaServers={this.props.viaServers} key={this.props.currentRoomId || 'roomview'} disabled={this.props.middleDisabled} - ConferenceHandler={this.props.ConferenceHandler} resizeNotifier={this.props.resizeNotifier} />; break; diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 3f4b3115af..e58cf0442e 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -149,7 +149,6 @@ interface IRoomInfo { interface IProps { // TODO type things better config: Record; serverConfig?: ValidatedServerConfig; - ConferenceHandler?: any; onNewScreen: (screen: string, replaceLast: boolean) => void; enableGuest?: boolean; // the queryParams extracted from the [real] query-string of the URI diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 8e9a7ab318..4927c6b712 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -69,7 +69,6 @@ import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel"; import AuxPanel from "../views/rooms/AuxPanel"; import RoomHeader from "../views/rooms/RoomHeader"; import TintableSvg from "../views/elements/TintableSvg"; -import type * as ConferenceHandler from '../../VectorConferenceHandler'; import {XOR} from "../../@types/common"; import { IThreepidInvite } from "../../stores/ThreepidInviteStore"; @@ -84,8 +83,6 @@ if (DEBUG) { } interface IProps { - ConferenceHandler?: ConferenceHandler; - threepidInvite: IThreepidInvite, // Any data about the room that would normally come from the homeserver @@ -181,7 +178,6 @@ export interface IState { matrixClientIsReady: boolean; showUrlPreview?: boolean; e2eStatus?: E2EStatus; - displayConfCallNotification?: boolean; rejecting?: boolean; rejectError?: Error; } @@ -488,8 +484,6 @@ export default class RoomView extends React.Component { callState: callState, }); - this.updateConfCallNotification(); - window.addEventListener('beforeunload', this.onPageUnload); if (this.props.resizeNotifier) { this.props.resizeNotifier.on("middlePanelResized", this.onResize); @@ -724,10 +718,6 @@ export default class RoomView extends React.Component { callState = call.call_state; } - // possibly remove the conf call notification if we're now in - // the conf - this.updateConfCallNotification(); - this.setState({ callState: callState, }); @@ -1018,9 +1008,6 @@ export default class RoomView extends React.Component { // rate limited because a power level change will emit an event for every member in the room. private updateRoomMembers = rateLimitedFunc((dueToMember) => { - // a member state changed in this room - // refresh the conf call notification state - this.updateConfCallNotification(); this.updateDMState(); let memberCountInfluence = 0; @@ -1049,30 +1036,6 @@ export default class RoomView extends React.Component { this.setState({isAlone: joinedOrInvitedMemberCount === 1}); } - private updateConfCallNotification() { - const room = this.state.room; - if (!room || !this.props.ConferenceHandler) { - return; - } - const confMember = room.getMember( - this.props.ConferenceHandler.getConferenceUserIdForRoom(room.roomId), - ); - - if (!confMember) { - return; - } - const confCall = this.props.ConferenceHandler.getConferenceCallForRoom(confMember.roomId); - - // A conf call notification should be displayed if there is an ongoing - // conf call but this cilent isn't a part of it. - this.setState({ - displayConfCallNotification: ( - (!confCall || confCall.call_state === "ended") && - confMember.membership === "join" - ), - }); - } - private updateDMState() { const room = this.state.room; if (room.getMyMembership() != "join") { @@ -1681,7 +1644,7 @@ export default class RoomView extends React.Component { if (!this.state.room) { return null; } - return CallHandler.getCallForRoom(this.state.room.roomId); + return CallHandler.sharedInstance().getCallForRoom(this.state.room.roomId); } // this has to be a proper method rather than an unnamed function, @@ -1925,9 +1888,7 @@ export default class RoomView extends React.Component { room={this.state.room} fullHeight={false} userId={this.context.credentials.userId} - conferenceHandler={this.props.ConferenceHandler} draggingFile={this.state.draggingFile} - displayConfCallNotification={this.state.displayConfCallNotification} maxHeight={this.state.auxPanelMaxHeight} showApps={this.state.showApps} hideAppsDrawer={false} diff --git a/src/components/views/rooms/AuxPanel.js b/src/components/views/rooms/AuxPanel.js index f2211dba5c..b7ed457a74 100644 --- a/src/components/views/rooms/AuxPanel.js +++ b/src/components/views/rooms/AuxPanel.js @@ -39,15 +39,9 @@ export default class AuxPanel extends React.Component { showApps: PropTypes.bool, // Render apps hideAppsDrawer: PropTypes.bool, // Do not display apps drawer and content (may still be rendered) - // Conference Handler implementation - conferenceHandler: PropTypes.object, - // set to true to show the file drop target draggingFile: PropTypes.bool, - // set to true to show the 'active conf call' banner - displayConfCallNotification: PropTypes.bool, - // maxHeight attribute for the aux panel and the video // therein maxHeight: PropTypes.number, @@ -161,39 +155,9 @@ export default class AuxPanel extends React.Component { ); } - let conferenceCallNotification = null; - if (this.props.displayConfCallNotification) { - let supportedText = ''; - let joinNode; - if (!MatrixClientPeg.get().supportsVoip()) { - supportedText = _t(" (unsupported)"); - } else { - joinNode = ( - { _t( - "Join as voice or video.", - {}, - { - 'voiceText': (sub) => { this.onConferenceNotificationClick(event, 'voice');}} href="#">{ sub }, - 'videoText': (sub) => { this.onConferenceNotificationClick(event, 'video');}} href="#">{ sub }, - }, - ) } - ); - } - // XXX: the translation here isn't great: appending ' (unsupported)' is likely to not make sense in many languages, - // but there are translations for this in the languages we do have so I'm leaving it for now. - conferenceCallNotification = ( -
- { _t("Ongoing conference call%(supportedText)s.", {supportedText: supportedText}) } -   - { joinNode } -
- ); - } - const callView = ( @@ -276,7 +240,6 @@ export default class AuxPanel extends React.Component { { appsDrawer } { fileDropTarget } { callView } - { conferenceCallNotification } { this.props.children } ); diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index 40b3b042b1..ae122a3783 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -24,7 +24,6 @@ import {isValid3pidInvite} from "../../../RoomInvite"; import rate_limited_func from "../../../ratelimitedfunc"; import {MatrixClientPeg} from "../../../MatrixClientPeg"; import * as sdk from "../../../index"; -import CallHandler from "../../../CallHandler"; import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore"; import BaseCard from "../right_panel/BaseCard"; import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; @@ -233,15 +232,10 @@ export default class MemberList extends React.Component { } roomMembers() { - const ConferenceHandler = CallHandler.getConferenceHandler(); - const allMembers = this.getMembersWithUser(); const filteredAndSortedMembers = allMembers.filter((m) => { return ( m.membership === 'join' || m.membership === 'invite' - ) && ( - !ConferenceHandler || - (ConferenceHandler && !ConferenceHandler.isConferenceUser(m.userId)) ); }); filteredAndSortedMembers.sort(this.memberSort); diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 81c2ae7a33..e6cd686e3c 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -87,7 +87,7 @@ VideoCallButton.propTypes = { function HangupButton(props) { const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const onHangupClick = () => { - const call = CallHandler.getCallForRoom(props.roomId); + const call = CallHandler.sharedInstance().getCallForRoom(props.roomId); if (!call) { return; } diff --git a/src/components/views/voip/CallContainer.tsx b/src/components/views/voip/CallContainer.tsx index 18a9c098d6..51925cb147 100644 --- a/src/components/views/voip/CallContainer.tsx +++ b/src/components/views/voip/CallContainer.tsx @@ -17,7 +17,6 @@ limitations under the License. import React from 'react'; import IncomingCallBox from './IncomingCallBox'; import CallPreview from './CallPreview'; -import * as VectorConferenceHandler from '../../../VectorConferenceHandler'; interface IProps { @@ -31,7 +30,7 @@ export default class CallContainer extends React.PureComponent { public render() { return
- +
; } } diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx index 4352fc95e4..9acbece8b3 100644 --- a/src/components/views/voip/CallPreview.tsx +++ b/src/components/views/voip/CallPreview.tsx @@ -26,10 +26,6 @@ import PersistentApp from "../elements/PersistentApp"; import SettingsStore from "../../../settings/SettingsStore"; interface IProps { - // A Conference Handler implementation - // Must have a function signature: - // getConferenceCallForRoom(roomId: string): MatrixCall - ConferenceHandler: any; } interface IState { @@ -47,7 +43,7 @@ export default class CallPreview extends React.Component { this.state = { roomId: RoomViewStore.getRoomId(), - activeCall: CallHandler.getAnyActiveCall(), + activeCall: CallHandler.sharedInstance().getAnyActiveCall(), }; } @@ -77,14 +73,14 @@ export default class CallPreview extends React.Component { // may hide the global CallView if the call it is tracking is dead case 'call_state': this.setState({ - activeCall: CallHandler.getAnyActiveCall(), + activeCall: CallHandler.sharedInstance().getAnyActiveCall(), }); break; } }; private onCallViewClick = () => { - const call = CallHandler.getAnyActiveCall(); + const call = CallHandler.sharedInstance().getAnyActiveCall(); if (call) { dis.dispatch({ action: 'view_room', @@ -94,7 +90,7 @@ export default class CallPreview extends React.Component { }; public render() { - const callForRoom = CallHandler.getCallForRoom(this.state.roomId); + const callForRoom = CallHandler.sharedInstance().getCallForRoom(this.state.roomId); const showCall = ( this.state.activeCall && this.state.activeCall.call_state === 'connected' && @@ -106,7 +102,6 @@ export default class CallPreview extends React.Component { ); diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 1d3a62984a..2ab291ae86 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -31,11 +31,6 @@ interface IProps { // room; if not, we will show any active call. room?: Room; - // A Conference Handler implementation - // Must have a function signature: - // getConferenceCallForRoom(roomId: string): MatrixCall - ConferenceHandler?: any; - // maxHeight style attribute for the video panel maxVideoHeight?: number; @@ -96,14 +91,13 @@ export default class CallView extends React.Component { if (this.props.room) { const roomId = this.props.room.roomId; - call = CallHandler.getCallForRoom(roomId) || - (this.props.ConferenceHandler ? this.props.ConferenceHandler.getConferenceCallForRoom(roomId) : null); + call = CallHandler.sharedInstance().getCallForRoom(roomId); if (this.call) { this.setState({ call: call }); } } else { - call = CallHandler.getAnyActiveCall(); + call = CallHandler.sharedInstance().getAnyActiveCall(); // Ignore calls if we can't get the room associated with them. // I think the underlying problem is that the js-sdk sends events // for calls before it has made the rooms available in the store, @@ -115,20 +109,19 @@ export default class CallView extends React.Component { } if (call) { - call.setLocalVideoElement(this.getVideoView().getLocalVideoElement()); - call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement()); - // always use a separate element for audio stream playback. - // this is to let us move CallView around the DOM without interrupting remote audio - // during playback, by having the audio rendered by a top-level