Bug 985596 Set up initial desktop conversation window. r=dmose

adamroach · Apr 2, 2014 · fd16e4f · fd16e4f
1 parent 52d4dba
commit fd16e4f
Show file tree

Hide file tree

Showing 12 changed files with 302 additions and 272 deletions.
diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
@@ -1335,6 +1335,8 @@ pref("shumway.disabled", true);
 // (This is intentionally on the high side; see bug 746055.)
 pref("image.mem.max_decoded_image_kb", 256000);
 
+pref("loop.server", "http://localhost:5000");
+
 // Default social providers
 pref("social.enabled", true);
 pref("social.activeProviders", "{\"chrome://browser/content/loop/\":1}");

diff --git a/browser/components/loop/LoopService.js b/browser/components/loop/LoopService.js
@@ -11,7 +11,7 @@ Cu.import("resource://gre/modules/MozSocialAPI.jsm");
 Cu.import("resource://gre/modules/SocialService.jsm");
 
 //const loopServerUri = "http://loop.dev.mozaws.net";
-const loopServerUri = "http://localhost:5000";
+const loopServerUri = Services.prefs.getCharPref("loop.server");
 const pushServerUri = "wss://push.services.mozilla.com";
 const channelID = "8b1081ce-9b35-42b5-b8f5-3ff8cb813a50";
 
@@ -67,10 +67,6 @@ LoopService.prototype = {
         this.websocket.sendMsg(JSON.stringify({messageType: "register", channelID: channelID}));
         break;
       case "register":
-        dump("\n\nPush url is: " + msg.pushEndpoint + "\n");
-        Cu.reportError("Push url is: " + msg.pushEndpoint);
-try {
-
         this.registerXhr = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
                              .createInstance(Ci.nsIXMLHttpRequest);
         // XXX Sync!
@@ -80,26 +76,20 @@ try {
         this.registerXhr.sendAsBinary(JSON.stringify({simple_push_url: msg.pushEndpoint}));
         this.callXhr = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
                              .createInstance(Ci.nsIXMLHttpRequest);
-        // XXX Sync!
-//        this.callXhr.open('POST', loopServerUri + "/call-url/", false);
-//        this.callXhr.setRequestHeader('Content-Type', 'application/json');
-//        this.callXhr.sendAsBinary(JSON.stringify({remote_id: "fake", valid_duration: 86400}));
-} catch (x) {
-  Cu.reportError(x);
-}
         break;
       case "notification":
-        if (channelID === channelID) {
-          Cu.reportError("Notification!");
-          SocialService.getProvider("chrome://browser/content/loop/", this.openChat.bind(this));
-        }
+        msg.updates.forEach(function(update) {
+          if (update.channelID === channelID) {
+            SocialService.getProvider("chrome://browser/content/loop/", this.openChat.bind(this, update.version));
+          }
+        }.bind(this));
         break;
     }
   },
 
-  openChat: function(provider) {
+  openChat: function(version, provider) {
     let mostRecent = Services.wm.getMostRecentWindow("navigator:browser");
-    openChatWindow(mostRecent, provider, "chrome://browser/content/loop/conversation.html");
+    openChatWindow(mostRecent, provider, "chrome://browser/content/loop/conversation.html#start/" + version);
   }
 };
 

diff --git a/browser/components/loop/content/conversation.html b/browser/components/loop/content/conversation.html
@@ -10,10 +10,24 @@
     <link rel="stylesheet" type="text/css" href="shared/css/conversation.css">
  </head>
   <body onload="loop.conversation.init();">
+    <div id="conversation" class="conversation">
+      <div class="media nested">
+        <div class="remote">
+          <div id="incoming"></div>
+        </div>
+        <div class="local">
+          <div id="outgoing"></div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="shared/libs/sdk.js"></script>
     <script type="text/javascript" src="shared/libs/jquery-2.1.0.js"></script>
     <script type="text/javascript" src="shared/libs/lodash-2.4.1.js"></script>
     <script type="text/javascript" src="shared/libs/backbone-1.1.2.js"></script>
-    <script type="text/javascript" src="js/client.js"></script>
+    <script type="text/javascript" src="shared/js/client.js"></script>
+    <script type="text/javascript" src="shared/js/models.js"></script>
+    <script type="text/javascript" src="shared/js/router.js"></script>
+    <script type="text/javascript" src="shared/js/views.js"></script>
     <script type="text/javascript" src="js/conversation.js"></script>
   </body>
 </html>
diff --git a/browser/components/loop/content/js/client.js b/browser/components/loop/content/js/client.js
diff --git a/browser/components/loop/content/js/conversation.js b/browser/components/loop/content/js/conversation.js
@@ -3,36 +3,130 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /*global loop*/
-// XXX This file needs unit testing
+
+Components.utils.import("resource://gre/modules/Services.jsm");
 
 var loop = loop || {};
-loop.conversation = (function(_, __) {
+loop.conversation = (function(TB) {
   "use strict";
 
-  // XXX: baseApiUrl should be configurable (browser pref)
-  var baseApiUrl = "http://localhost:5000";
+  var baseServerUrl = Services.prefs.getCharPref("loop.server");
 
   /**
-   * Panel initialisation.
+   * App router.
+   * @type {loop.webapp.Router}
    */
-  function init() {
-    // Send a message to the server to get the call info
-    this.client = new loop.Client({
-      baseApiUrl: baseApiUrl
-    });
-
-    // Get the call information
-    this.client.requestCallsInfo(function(err, calls) {
-      if (err) {
-        console.error("Error getting call data: ", err);
+  var router;
+
+  /**
+   * Current conversation model instance.
+   * @type {loop.webapp.ConversationModel}
+   */
+  var conversation;
+
+  var ConversationRouter = loop.shared.router.BaseRouter.extend({
+    _conversation: undefined,
+    activeView: undefined,
+
+    routes: {
+      "start/:version": "start",
+      "call/ongoing": "conversation",
+      "call/ended": "ended"
+    },
+
+    /**
+     * Loads and render current active view.
+     *
+     * @param {loop.shared.BaseView} view View.
+     */
+    loadView : function(view) {
+      if (this.activeView) {
+        this.activeView.hide();
+      }
+      this.activeView = view.render().show();
+    },
+
+    initialize: function(options) {
+      options = options || {};
+      if (!options.conversation) {
+        throw new Error("missing required conversation");
+      }
+      this._conversation = options.conversation;
+
+      this.listenTo(this._conversation, "session:ready", this._onSessionReady);
+      this.listenTo(this._conversation, "session:ended", this._onSessionEnded);
+    },
+
+    /**
+     * Navigates to conversation when the call session is ready.
+     */
+    _onSessionReady: function() {
+      this.navigate("call/ongoing", {trigger: true});
+    },
+
+    /**
+     * Navigates to ended state when the call has ended
+     */
+    _onSessionEnded: function() {
+      this.navigate("call/ended", {trigger: true});
+    },
+
+    /**
+     * start is the initial route that does any necessary prompting and set
+     * up for the call.
+     *
+     * @param {String} loopVersion The version from the push notification, set
+     *                             by the router from the URL.
+     */
+    start: function(loopVersion) {
+      // XXX For now, we just kick the conversation straight away, bug 990678
+      // will implement the follow-ups.
+      this._conversation.set({loopVersion: loopVersion});
+      this._conversation.initiate({
+        baseServerUrl: baseServerUrl,
+        outgoing: false
+      });
+    },
+
+    /**
+     * conversation is the route when the conversation is active. The start
+     * route should be navigated to first.
+     */
+    conversation: function() {
+      if (!this._conversation.isSessionReady()) {
+        // XXX: notify user that something has gone wrong.
+        console.error("Error: navigated to conversation route without " +
+          "the start route to initialise the call first");
         return;
       }
 
-      console.log("Received Calls Data: ", calls);
-    });
+      this.loadView(
+        new loop.shared.views.ConversationView({
+          sdk: TB,
+          model: this._conversation
+      }));
+    },
+
+    /**
+     * ended does any necessary work to end the call.
+     */
+    ended: function() {
+      // XXX Later we implement the end-of call here (bug 974873)
+      window.close();
+    }
+  });
+
+  /**
+   * Panel initialisation.
+   */
+  function init() {
+    conversation = new loop.shared.models.ConversationModel();
+    router = new ConversationRouter({conversation: conversation});
+    Backbone.history.start();
   }
 
   return {
+    ConversationRouter: ConversationRouter,
     init: init
   };
-})(_);
+})(window.TB);
diff --git a/browser/components/loop/content/js/panel.js b/browser/components/loop/content/js/panel.js
@@ -3,13 +3,13 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /*global loop*/
+Components.utils.import("resource://gre/modules/Services.jsm");
 
 var loop = loop || {};
 loop.panel = (function(_, __) {
   "use strict";
 
-  // XXX: baseApiUrl should be configurable (browser pref)
-  var baseApiUrl = "http://localhost:5000",
+  var baseServerUrl = Services.prefs.getCharPref("loop.server"),
       panelView;
 
   /**
@@ -98,8 +98,8 @@ loop.panel = (function(_, __) {
     },
 
     initialize: function() {
-      this.client = new loop.Client({
-        baseApiUrl: baseApiUrl
+      this.client = new loop.shared.Client({
+        baseServerUrl: baseServerUrl
       });
       this.notificationCollection = new NotificationCollection();
       this.notificationListView = new NotificationListView({

diff --git a/browser/components/loop/content/panel.html b/browser/components/loop/content/panel.html
@@ -44,7 +44,7 @@
     <script type="text/javascript" src="shared/libs/jquery-2.1.0.js"></script>
     <script type="text/javascript" src="shared/libs/lodash-2.4.1.js"></script>
     <script type="text/javascript" src="shared/libs/backbone-1.1.2.js"></script>
-    <script type="text/javascript" src="js/client.js"></script>
+    <script type="text/javascript" src="shared/js/client.js"></script>
     <script type="text/javascript" src="js/panel.js"></script>
   </body>
 </html>