From 59986d8b7232d17179531d8b1ac762471f8416a4 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 15 Sep 2015 11:05:53 +0100
Subject: [PATCH] Pass the call around different CallViews to keep media
flowing
Previously, the CallView was attached to the RoomView, so you would get
a new CallView each time you changed the room and the one you changed
from would be destroyed. This would destroy media capture/playback as
the element was no longer in the DOM.
This is now fixed by having a "global" CallView which is attached at
the MatrixChat "page" level in the DOM hierarchy. This CallView isn't
scoped to a particular room; it will render any "active" call it can
find that *isn't the current room being displayed*. This has the side
effect of enforcing 1 call per app semantics as only the first active
call found is returned.
This fixes https://github.com/vector-im/vector-web/issues/31
This is unfinished (CSS for the global call view isn't done)
---
skins/base/views/pages/MatrixChat.js | 19 ++++++++++++++++--
src/CallHandler.js | 13 +++++++++++-
src/controllers/molecules/voip/CallView.js | 23 +++++++++++++++++++---
src/controllers/pages/MatrixChat.js | 8 ++++++++
4 files changed, 57 insertions(+), 6 deletions(-)
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js
index 1b756792..6b1ddb63 100644
--- a/skins/base/views/pages/MatrixChat.js
+++ b/skins/base/views/pages/MatrixChat.js
@@ -18,6 +18,7 @@ limitations under the License.
var React = require('react');
var ComponentBroker = require('../../../../src/ComponentBroker');
+var CallHandler = require('../../../../src/CallHandler');
var LeftPanel = ComponentBroker.get('organisms/LeftPanel');
var RoomView = ComponentBroker.get('organisms/RoomView');
@@ -29,8 +30,9 @@ var CreateRoom = ComponentBroker.get('organisms/CreateRoom');
var RoomDirectory = ComponentBroker.get('organisms/RoomDirectory');
var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
var Notifier = ComponentBroker.get('organisms/Notifier');
+var CallView = ComponentBroker.get('molecules/voip/CallView');
-var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
+var MatrixChatController = require('../../../../src/controllers/pages/MatrixChat');
// should be atomised
var Loader = require("react-loader");
@@ -53,7 +55,7 @@ module.exports = React.createClass({
render: function() {
if (this.state.logged_in && this.state.ready) {
- var page_element;
+ var page_element, call_element;
var right_panel = "";
switch (this.state.page_type) {
@@ -74,6 +76,17 @@ module.exports = React.createClass({
right_panel = <RightPanel/>
break;
}
+ // if we aren't viewing a room with an ongoing call, but there is an
+ // active call, show the call element - we need to do this to make
+ // audio/video not crap out
+ if (this.state.active_call && (
+ !this.state.currentRoom || !CallHandler.getCall(this.state.currentRoom))) {
+ console.log(
+ "Creating global CallView for active call in room %s",
+ this.state.active_call.roomId
+ );
+ call_element = <CallView className="mx_MatrixChat_callView"/>
+ }
if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
return (
@@ -81,6 +94,7 @@ module.exports = React.createClass({
<MatrixToolbar />
<div className="mx_MatrixChat mx_MatrixChat_toolbarShowing">
<LeftPanel selectedRoom={this.state.currentRoom} />
+ {call_element}
<main className="mx_MatrixChat_middlePanel">
{page_element}
</main>
@@ -93,6 +107,7 @@ module.exports = React.createClass({
return (
<div className="mx_MatrixChat">
<LeftPanel selectedRoom={this.state.currentRoom} />
+ {call_element}
<main className="mx_MatrixChat_middlePanel">
{page_element}
</main>
diff --git a/src/CallHandler.js b/src/CallHandler.js
index 42cc5d57..28fd77e7 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -106,7 +106,7 @@ function _setCallListeners(call) {
play("ringbackAudio");
}
else if (newState === "ended" && oldState === "connected") {
- _setCallState(call, call.roomId, "ended");
+ _setCallState(undefined, call.roomId, "ended");
pause("ringbackAudio");
play("callendAudio");
}
@@ -239,5 +239,16 @@ dis.register(function(payload) {
module.exports = {
getCall: function(roomId) {
return calls[roomId] || null;
+ },
+
+ getAnyActiveCall: function() {
+ var roomsWithCalls = Object.keys(calls);
+ for (var i = 0; i < roomsWithCalls.length; i++) {
+ if (calls[roomsWithCalls[i]] &&
+ calls[roomsWithCalls[i]].call_state !== "ended") {
+ return calls[roomsWithCalls[i]];
+ }
+ }
+ return null;
}
};
\ No newline at end of file
diff --git a/src/controllers/molecules/voip/CallView.js b/src/controllers/molecules/voip/CallView.js
index e43046a5..6e6f3482 100644
--- a/src/controllers/molecules/voip/CallView.js
+++ b/src/controllers/molecules/voip/CallView.js
@@ -17,6 +17,7 @@ limitations under the License.
'use strict';
var dis = require("../../../dispatcher");
var CallHandler = require("../../../CallHandler");
+var MatrixClientPeg = require("../../../MatrixClientPeg");
/*
* State vars:
@@ -24,14 +25,30 @@ var CallHandler = require("../../../CallHandler");
*
* Props:
* this.props.room = Room (JS SDK)
+ *
+ * Internal state:
+ * this._trackedRoom = (either from props.room or programatically set)
*/
module.exports = {
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
+ this._trackedRoom = null;
if (this.props.room) {
- this.showCall(this.props.room.roomId);
+ this._trackedRoom = this.props.room;
+ this.showCall(this._trackedRoom.roomId);
+ }
+ else {
+ var call = CallHandler.getAnyActiveCall();
+ if (call) {
+ console.log(
+ "Global CallView is now tracking active call in room %s",
+ call.roomId
+ );
+ this._trackedRoom = MatrixClientPeg.get().getRoom(call.roomId);
+ this.showCall(call.roomId);
+ }
}
},
@@ -41,8 +58,8 @@ module.exports = {
onAction: function(payload) {
// if we were given a room_id to track, don't handle anything else.
- if (payload.room_id && this.props.room &&
- this.props.room.roomId !== payload.room_id) {
+ if (payload.room_id && this._trackedRoom &&
+ this._trackedRoom.roomId !== payload.room_id) {
return;
}
if (payload.action !== 'call_state') {
diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js
index 08cc652d..b98f42c0 100644
--- a/src/controllers/pages/MatrixChat.js
+++ b/src/controllers/pages/MatrixChat.js
@@ -26,6 +26,7 @@ var dis = require("../../dispatcher");
var q = require("q");
var ComponentBroker = require('../../ComponentBroker');
+var CallHandler = require("../../CallHandler");
var Notifier = ComponentBroker.get('organisms/Notifier');
var MatrixTools = require('../../MatrixTools');
@@ -205,6 +206,13 @@ module.exports = {
case 'notifier_enabled':
this.forceUpdate();
break;
+ case 'call_state':
+ // listen for call state changes to prod the render method, which
+ // may hide the global CallView if the call it is tracking is dead
+ this.setState({
+ active_call: CallHandler.getAnyActiveCall()
+ });
+ break;
}
},