Bug 1020451 Implement basic accept/reject call buttons so that video isn't shown before the call is accepted. r=Standard8

browser/components/loop/MozLoopService.jsm

@@ -350,7 +350,7 @@ let MozLoopServiceInternal = {
       return;
     }
 
-    this.openChatWindow(null, "LooP", "about:loopconversation#start/" + version);
+    this.openChatWindow(null, "LooP", "about:loopconversation#incoming/" + version);
   },
 
   /**

browser/components/loop/content/js/conversation.js

@@ -18,6 +18,48 @@ loop.conversation = (function(OT, mozL10n) {
    */
   var router;
 
+  /**
+   * Incoming call view.
+   * @type {loop.shared.views.BaseView}
+   */
+  var IncomingCallView = sharedViews.BaseView.extend({
+    template: _.template([
+      '<h2 data-l10n-id="incoming_call"></h2>',
+      '<p>',
+      '  <button class="btn btn-success btn-accept"',
+      '           data-l10n-id="accept_button"></button>',
+      '  <button class="btn btn-error btn-decline"',
+      '           data-l10n-id="decline_button"></button>',
+      '</p>'
+    ].join("")),
+
+    className: "incoming-call",
+
+    events: {
+      "click .btn-accept": "handleAccept",
+      "click .btn-decline": "handleDecline"
+    },
+
+    /**
+     * User clicked on the "accept" button.
+     * @param  {MouseEvent} event
+     */
+    handleAccept: function(event) {
+      event.preventDefault();
+      this.model.trigger("accept");
+    },
+
+    /**
+     * User clicked on the "decline" button.
+     * @param  {MouseEvent} event
+     */
+    handleDecline: function(event) {
+      event.preventDefault();
+      // XXX For now, we just close the window.
+      window.close();
+    }
+  });
+
   /**
    * Call ended view.
    * @type {loop.shared.views.BaseView}
@@ -53,7 +95,8 @@ loop.conversation = (function(OT, mozL10n) {
    */
   var ConversationRouter = loop.desktopRouter.DesktopConversationRouter.extend({
     routes: {
-      "start/:version": "start",
+      "incoming/:version": "incoming",
+      "call/accept": "accept",
       "call/ongoing": "conversation",
       "call/ended": "ended"
     },
@@ -73,16 +116,23 @@ loop.conversation = (function(OT, mozL10n) {
     },
 
     /**
-     * start is the initial route that does any necessary prompting and set
-     * up for the call.
+     * Incoming call route.
      *
      * @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.
+    incoming: function(loopVersion) {
       this._conversation.set({loopVersion: loopVersion});
+      this._conversation.once("accept", function() {
+        this.navigate("call/accept", {trigger: true});
+      }.bind(this));
+      this.loadView(new IncomingCallView({model: this._conversation}));
+    },
+
+    /**
+     * Accepts an incoming call.
+     */
+    accept: function() {
       this._conversation.initiate({
         baseServerUrl: window.navigator.mozLoop.serverUrl,
         outgoing: false
@@ -134,6 +184,7 @@ loop.conversation = (function(OT, mozL10n) {
   return {
     ConversationRouter: ConversationRouter,
     EndedCallView: EndedCallView,
+    IncomingCallView: IncomingCallView,
     init: init
   };
 })(window.OT, document.mozL10n);

browser/components/loop/content/shared/css/conversation.css

@@ -55,3 +55,19 @@
 .call-ended p {
   text-align: center;
 }
+
+/* Incoming call */
+.incoming-call {
+  text-align: center;
+  min-height: 200px;
+}
+
+.incoming-call h2 {
+  font-size: 1.5em;
+  font-weight: normal;
+  margin-top: 3em;
+}
+
+.incoming-call button {
+  margin-right: .2em;
+}

browser/components/loop/content/shared/css/readme.html

@@ -166,6 +166,16 @@
     <p class="message">Oops! This is a warning.</p>
   </div>
 
+  <h2>Incoming call</h2>
+
+  <div class="incoming-call">
+    <h2>Incoming call</h2>
+    <p>
+      <button class="btn btn-success btn-accept">Accept</button>
+      <button class="btn btn-error btn-decline">Decline</button>
+    </p>
+  </div>
+
   <script>
   window.onload = function() {
     [].forEach.call(document.querySelectorAll("video"), function(video) {

browser/components/loop/test/desktop-local/conversation_test.js

@@ -54,15 +54,25 @@ describe("loop.conversation", function() {
         sandbox.stub(router, "loadView");
       });
 
-      describe("#start", function() {
+      describe("#incoming", function() {
         it("should set the loopVersion on the conversation model", function() {
-          router.start("fakeVersion");
+          router.incoming("fakeVersion");
 
           expect(conversation.get("loopVersion")).to.equal("fakeVersion");
         });
 
+        it("should display the incoming call view", function() {
+          router.incoming("fakeVersion");
+
+          sinon.assert.calledOnce(router.loadView);
+          sinon.assert.calledWithExactly(router.loadView,
+            sinon.match.instanceOf(loop.conversation.IncomingCallView));
+        });
+      });
+
+      describe("#accept", function() {
         it("should initiate the conversation", function() {
-          router.start("fakeVersion");
+          router.accept();
 
           sinon.assert.calledOnce(conversation.initiate);
           sinon.assert.calledWithExactly(conversation.initiate, {
@@ -172,4 +182,34 @@ describe("loop.conversation", function() {
       });
     });
   });
+
+  describe("IncomingCallView", function() {
+    var conversation, view;
+
+    beforeEach(function() {
+      conversation = new loop.shared.models.ConversationModel({}, {sdk: {}});
+      view = new loop.conversation.IncomingCallView({model: conversation});
+    });
+
+    describe("#handleAccept", function() {
+      it("should trigger an 'accept' conversation model event" ,
+        function(done) {
+          conversation.once("accept", function() {
+            done();
+          });
+
+          view.handleAccept({preventDefault: sandbox.spy()});
+        });
+    });
+
+    describe("#handleDecline", function() {
+      it("should close the window", function() {
+        sandbox.stub(window, "close");
+
+        view.handleDecline({preventDefault: sandbox.spy()});
+
+        sinon.assert.calledOnce(window.close);
+      });
+    });
+  });
 });

browser/locales/en-US/chrome/browser/loop/loop.properties

@@ -11,3 +11,6 @@ stop=Stop
 call_has_ended=Your call has ended.
 close_window=Close this window
 do_not_disturb=Do not disturb
+incoming_call=Incoming call
+accept_button=Accept
+decline_button=Decline