corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1066502 Remove the backbone router from the Loop conversation window, use a react view for control. r=nperriault

Browse Source
This commit is contained in:
Mark Banner
2014-09-24 14:25:30 +01:00
parent a7ee095d09
commit f1f044bc5b
21 changed files with 757 additions and 1145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
browser/components/loop/content/js/conversation.js
View File

@@ -8,16 +8,11 @@
/* global loop:true, React */
var loop = loop || {};
loop.conversation = (function(OT, mozL10n) {
loop.conversation = (function(mozL10n) {
"use strict";
var sharedViews = loop.shared.views;
/**
* App router.
* @type {loop.desktopRouter.DesktopConversationRouter}
*/
var router;
var sharedViews = loop.shared.views,
sharedModels = loop.shared.models;
var IncomingCallView = React.createClass({displayName: 'IncomingCallView',
@@ -200,92 +195,183 @@ loop.conversation = (function(OT, mozL10n) {
});
/**
* Conversation router.
* This view manages the incoming conversation views - from
* call initiation through to the actual conversation and call end.
*
* Required options:
* - {loop.shared.models.ConversationModel} conversation Conversation model.
* - {loop.shared.models.NotificationCollection} notifications
*
* @type {loop.shared.router.BaseConversationRouter}
* At the moment, it does more than that, these parts need refactoring out.
*/
var ConversationRouter = loop.desktopRouter.DesktopConversationRouter.extend({
routes: {
"incoming/:callId": "incoming",
"call/accept": "accept",
"call/decline": "decline",
"call/ongoing": "conversation",
"call/declineAndBlock": "declineAndBlock",
"call/shutdown": "shutdown",
"call/feedback": "feedback"
var IncomingConversationView = React.createClass({displayName: 'IncomingConversationView',
propTypes: {
client: React.PropTypes.instanceOf(loop.Client).isRequired,
conversation: React.PropTypes.instanceOf(sharedModels.ConversationModel)
.isRequired,
notifications: React.PropTypes.instanceOf(sharedModels.NotificationCollection)
.isRequired,
sdk: React.PropTypes.object.isRequired
},
getInitialState: function() {
return {
callStatus: "start"
}
},
componentDidMount: function() {
this.props.conversation.on("accept", this.accept, this);
this.props.conversation.on("decline", this.decline, this);
this.props.conversation.on("declineAndBlock", this.declineAndBlock, this);
this.props.conversation.on("call:accepted", this.accepted, this);
this.props.conversation.on("change:publishedStream", this._checkConnected, this);
this.props.conversation.on("change:subscribedStream", this._checkConnected, this);
this.props.conversation.on("session:ended", this.endCall, this);
this.props.conversation.on("session:peer-hungup", this._onPeerHungup, this);
this.props.conversation.on("session:network-disconnected", this._onNetworkDisconnected, this);
this.props.conversation.on("session:connection-error", this._notifyError, this);
this.setupIncomingCall();
},
componentDidUnmount: function() {
this.props.conversation.off(null, null, this);
},
render: function() {
switch (this.state.callStatus) {
case "start": {
document.title = mozL10n.get("incoming_call_title2");
// XXX Don't render anything initially, though this should probably
// be some sort of pending view, whilst we connect the websocket.
return null;
}
case "incoming": {
document.title = mozL10n.get("incoming_call_title2");
return (
IncomingCallView({
model: this.props.conversation,
video: this.props.conversation.hasVideoStream("incoming")}
)
);
}
case "connected": {
// XXX This should be the caller id (bug 1020449)
document.title = mozL10n.get("incoming_call_title2");
var callType = this.props.conversation.get("selectedCallType");
return (
sharedViews.ConversationView({
initiate: true,
sdk: this.props.sdk,
model: this.props.conversation,
video: {enabled: callType !== "audio"}}
)
);
}
case "end": {
document.title = mozL10n.get("conversation_has_ended");
var feebackAPIBaseUrl = navigator.mozLoop.getLoopCharPref(
"feedback.baseUrl");
var appVersionInfo = navigator.mozLoop.appVersionInfo;
var feedbackClient = new loop.FeedbackAPIClient(feebackAPIBaseUrl, {
product: navigator.mozLoop.getLoopCharPref("feedback.product"),
platform: appVersionInfo.OS,
channel: appVersionInfo.channel,
version: appVersionInfo.version
});
return (
sharedViews.FeedbackView({
feedbackApiClient: feedbackClient,
onAfterFeedbackReceived: this.closeWindow.bind(this)}
)
);
}
case "close": {
window.close();
return (React.DOM.div(null));
}
}
},
/**
* @override {loop.shared.router.BaseConversationRouter.startCall}
* Notify the user that the connection was not possible
* @param {{code: number, message: string}} error
*/
startCall: function() {
this.navigate("call/ongoing", {trigger: true});
_notifyError: function(error) {
console.error(error);
this.props.notifications.errorL10n("connection_error_see_console_notification");
this.setState({callStatus: "end"});
},
/**
* @override {loop.shared.router.BaseConversationRouter.endCall}
* Peer hung up. Notifies the user and ends the call.
*
* Event properties:
* - {String} connectionId: OT session id
*/
endCall: function() {
navigator.mozLoop.releaseCallData(this._conversation.get("callId"));
this.navigate("call/feedback", {trigger: true});
_onPeerHungup: function() {
this.props.notifications.warnL10n("peer_ended_conversation2");
this.setState({callStatus: "end"});
},
shutdown: function() {
navigator.mozLoop.releaseCallData(this._conversation.get("callId"));
/**
* Network disconnected. Notifies the user and ends the call.
*/
_onNetworkDisconnected: function() {
this.props.notifications.warnL10n("network_disconnected");
this.setState({callStatus: "end"});
},
/**
* Incoming call route.
*
* @param {String} callId Identifier assigned by the LoopService
* to this incoming call.
*/
incoming: function(callId) {
setupIncomingCall: function() {
navigator.mozLoop.startAlerting();
this._conversation.once("accept", function() {
this.navigate("call/accept", {trigger: true});
}.bind(this));
this._conversation.once("decline", function() {
this.navigate("call/decline", {trigger: true});
}.bind(this));
this._conversation.once("declineAndBlock", function() {
this.navigate("call/declineAndBlock", {trigger: true});
}.bind(this));
this._conversation.once("call:incoming", this.startCall, this);
this._conversation.once("change:publishedStream", this._checkConnected, this);
this._conversation.once("change:subscribedStream", this._checkConnected, this);
var callData = navigator.mozLoop.getCallData(callId);
var callData = navigator.mozLoop.getCallData(this.props.conversation.get("callId"));
if (!callData) {
console.error("Failed to get the call data");
// XXX Not the ideal response, but bug 1047410 will be replacing
// this by better "call failed" UI.
this._notifications.errorL10n("cannot_start_call_session_not_ready");
this.props.notifications.errorL10n("cannot_start_call_session_not_ready");
return;
}
this._conversation.setIncomingSessionData(callData);
this._setupWebSocketAndCallView();
this.props.conversation.setIncomingSessionData(callData);
this._setupWebSocket();
},
/**
* Starts the actual conversation
*/
accepted: function() {
this.setState({callStatus: "connected"});
},
/**
* Moves the call to the end state
*/
endCall: function() {
navigator.mozLoop.releaseCallData(this.props.conversation.get("callId"));
this.setState({callStatus: "end"});
},
/**
* Used to set up the web socket connection and navigate to the
* call view if appropriate.
*/
_setupWebSocketAndCallView: function() {
_setupWebSocket: function() {
this._websocket = new loop.CallConnectionWebSocket({
url: this._conversation.get("progressURL"),
websocketToken: this._conversation.get("websocketToken"),
callId: this._conversation.get("callId"),
url: this.props.conversation.get("progressURL"),
websocketToken: this.props.conversation.get("websocketToken"),
callId: this.props.conversation.get("callId"),
});
this._websocket.promiseConnect().then(function() {
this.loadReactComponent(loop.conversation.IncomingCallView({
model: this._conversation,
video: this._conversation.hasVideoStream("incoming")
}));
this.setState({callStatus: "incoming"});
}.bind(this), function() {
this._handleSessionError();
return;
@@ -301,7 +387,7 @@ loop.conversation = (function(OT, mozL10n) {
_checkConnected: function() {
// Check we've had both local and remote streams connected before
// sending the media up message.
if (this._conversation.streamsConnected()) {
if (this.props.conversation.streamsConnected()) {
this._websocket.mediaUp();
}
},
@@ -337,6 +423,12 @@ loop.conversation = (function(OT, mozL10n) {
_abortIncomingCall: function() {
navigator.mozLoop.stopAlerting();
this._websocket.close();
// Having a timeout here lets the logging for the websocket complete and be
// displayed on the console if both are on.
setTimeout(this.closeWindow, 0);
},
closeWindow: function() {
window.close();
},
@@ -346,7 +438,7 @@ loop.conversation = (function(OT, mozL10n) {
accept: function() {
navigator.mozLoop.stopAlerting();
this._websocket.accept();
this._conversation.incoming();
this.props.conversation.accepted();
},
/**
@@ -354,13 +446,11 @@ loop.conversation = (function(OT, mozL10n) {
*/
_declineCall: function() {
this._websocket.decline();
navigator.mozLoop.releaseCallData(this._conversation.get("callId"));
// XXX Don't close the window straight away, but let any sends happen
// first. Ideally we'd wait to close the window until after we have a
// response from the server, to know that everything has completed
// successfully. However, that's quite difficult to ensure at the
// moment so we'll add it later.
setTimeout(window.close, 0);
navigator.mozLoop.releaseCallData(this.props.conversation.get("callId"));
this._websocket.close();
// Having a timeout here lets the logging for the websocket complete and be
// displayed on the console if both are on.
setTimeout(this.closeWindow, 0);
},
/**
@@ -379,8 +469,8 @@ loop.conversation = (function(OT, mozL10n) {
*/
declineAndBlock: function() {
navigator.mozLoop.stopAlerting();
var token = this._conversation.get("callToken");
this._client.deleteCallUrl(token, function(error) {
var token = this.props.conversation.get("callToken");
this.props.client.deleteCallUrl(token, function(error) {
// XXX The conversation window will be closed when this cb is triggered
// figure out if there is a better way to report the error to the user
// (bug 1048909).
@@ -389,62 +479,14 @@ loop.conversation = (function(OT, mozL10n) {
this._declineCall();
},
/**
* conversation is the route when the conversation is active. The start
* route should be navigated to first.
*/
conversation: function() {
if (!this._conversation.isSessionReady()) {
console.error("Error: navigated to conversation route without " +
"the start route to initialise the call first");
this._handleSessionError();
return;
}
var callType = this._conversation.get("selectedCallType");
var videoStream = callType === "audio" ? false : true;
/*jshint newcap:false*/
this.loadReactComponent(sharedViews.ConversationView({
initiate: true,
sdk: OT,
model: this._conversation,
video: {enabled: videoStream}
}));
},
/**
* Handles a error starting the session
*/
_handleSessionError: function() {
// XXX Not the ideal response, but bug 1047410 will be replacing
// this by better "call failed" UI.
this._notifications.errorL10n("cannot_start_call_session_not_ready");
this.props.notifications.errorL10n("cannot_start_call_session_not_ready");
},
/**
* Call has ended, display a feedback form.
*/
feedback: function() {
document.title = mozL10n.get("conversation_has_ended");
var feebackAPIBaseUrl = navigator.mozLoop.getLoopCharPref(
"feedback.baseUrl");
var appVersionInfo = navigator.mozLoop.appVersionInfo;
var feedbackClient = new loop.FeedbackAPIClient(feebackAPIBaseUrl, {
product: navigator.mozLoop.getLoopCharPref("feedback.product"),
platform: appVersionInfo.OS,
channel: appVersionInfo.channel,
version: appVersionInfo.version
});
this.loadReactComponent(sharedViews.FeedbackView({
feedbackApiClient: feedbackClient,
onAfterFeedbackReceived: window.close.bind(window)
}));
}
});
/**
@@ -457,44 +499,50 @@ loop.conversation = (function(OT, mozL10n) {
// Plug in an alternate client ID mechanism, as localStorage and cookies
// don't work in the conversation window
if (OT && OT.hasOwnProperty("overrideGuidStorage")) {
OT.overrideGuidStorage({
get: function(callback) {
callback(null, navigator.mozLoop.getLoopCharPref("ot.guid"));
},
set: function(guid, callback) {
navigator.mozLoop.setLoopCharPref("ot.guid", guid);
callback(null);
}
});
}
document.title = mozL10n.get("incoming_call_title2");
window.OT.overrideGuidStorage({
get: function(callback) {
callback(null, navigator.mozLoop.getLoopCharPref("ot.guid"));
},
set: function(guid, callback) {
navigator.mozLoop.setLoopCharPref("ot.guid", guid);
callback(null);
}
});
document.body.classList.add(loop.shared.utils.getTargetPlatform());
var client = new loop.Client();
router = new ConversationRouter({
client: client,
conversation: new loop.shared.models.ConversationModel(
{}, // Model attributes
{sdk: OT}), // Model dependencies
notifications: new loop.shared.models.NotificationCollection()
});
var conversation = new sharedModels.ConversationModel(
{}, // Model attributes
{sdk: window.OT} // Model dependencies
);
var notifications = new sharedModels.NotificationCollection();
window.addEventListener("unload", function(event) {
// Handle direct close of dialog box via [x] control.
navigator.mozLoop.releaseCallData(router._conversation.get("callId"));
navigator.mozLoop.releaseCallData(conversation.get("callId"));
});
Backbone.history.start();
// Obtain the callId and pass it to the conversation
var helper = new loop.shared.utils.Helper();
var locationHash = helper.locationHash();
if (locationHash) {
conversation.set("callId", locationHash.match(/\#incoming\/(.*)/)[1]);
}
React.renderComponent(IncomingConversationView({
client: client,
conversation: conversation,
notifications: notifications,
sdk: window.OT}
), document.querySelector('#main'));
}
return {
ConversationRouter: ConversationRouter,
IncomingConversationView: IncomingConversationView,
IncomingCallView: IncomingCallView,
init: init
};
})(window.OT, document.mozL10n);
})(document.mozL10n);
document.addEventListener('DOMContentLoaded', loop.conversation.init);