Bug 1133943: add necessary actions to start sharing a browser tab and pass respective parameters to the OpenTok SDK. r=Standard8

browser/components/loop/content/shared/js/activeRoomStore.js

@@ -128,7 +128,9 @@ loop.store.ActiveRoomStore = (function() {
         "windowUnload",
         "leaveRoom",
         "feedbackComplete",
-        "videoDimensionsChanged"
+        "videoDimensionsChanged",
+        "startScreenShare",
+        "endScreenShare"
       ]);
     },
 
@@ -393,6 +395,49 @@ loop.store.ActiveRoomStore = (function() {
       this.setStoreState({receivingScreenShare: actionData.receiving});
     },
 
+    /**
+     * Initiates a screen sharing publisher.
+     *
+     * @param {sharedActions.StartScreenShare} actionData
+     */
+    startScreenShare: function(actionData) {
+      this.dispatchAction(new sharedActions.ScreenSharingState({
+        state: SCREEN_SHARE_STATES.PENDING
+      }));
+
+      var options = {
+        videoSource: actionData.type
+      };
+      if (options.videoSource === "browser") {
+        this._mozLoop.getActiveTabWindowId(function(err, windowId) {
+          if (err || !windowId) {
+            this.dispatchAction(new sharedActions.ScreenSharingState({
+              state: SCREEN_SHARE_STATES.INACTIVE
+            }));
+            return;
+          }
+          options.constraints = {
+            browserWindow: windowId,
+            scrollWithPage: true
+          };
+          this._sdkDriver.startScreenShare(options);
+        }.bind(this));
+      } else {
+        this._sdkDriver.startScreenShare(options);
+      }
+    },
+
+    /**
+     * Ends an active screenshare session.
+     */
+    endScreenShare: function() {
+      if (this._sdkDriver.endScreenShare()) {
+        this.dispatchAction(new sharedActions.ScreenSharingState({
+          state: SCREEN_SHARE_STATES.INACTIVE
+        }));
+      }
+    },
+
     /**
      * Handles recording when a remote peer has connected to the servers.
      */

browser/components/loop/content/shared/js/otSdkDriver.js

@@ -31,9 +31,7 @@ loop.OTSdkDriver = (function() {
 
       this.dispatcher.register(this, [
         "setupStreamElements",
-        "setMute",
+        "setMute"
-        "startScreenShare",
-        "endScreenShare"
       ]);
   };
 
@@ -88,14 +86,21 @@ loop.OTSdkDriver = (function() {
 
     /**
      * Initiates a screen sharing publisher.
+     *
+     * options items:
+     *  - {String}  videoSource    The type of screen to share. Values of 'screen',
+     *                             'window', 'application' and 'browser' are
+     *                             currently supported.
+     *  - {mixed}   browserWindow  The unique identifier of a browser window. May
+     *                             be passed when `videoSource` is 'browser'.
+     *  - {Boolean} scrollWithPage Flag to signal that scrolling a page should
+     *                             update the stream. May be passed when
+     *                             `videoSource` is 'browser'.
+     *
+     * @param {Object} options Hash containing options for the SDK
      */
-    startScreenShare: function(actionData) {
+    startScreenShare: function(options) {
-      this.dispatcher.dispatch(new sharedActions.ScreenSharingState({
+      var config = _.extend(this._getCopyPublisherConfig(), options);
-        state: SCREEN_SHARE_STATES.PENDING
-      }));
-
-      var config = this._getCopyPublisherConfig();
-      config.videoSource = actionData.type;
 
       this.screenshare = this.sdk.initPublisher(this.getScreenShareElementFunc(),
         config);
@@ -104,20 +109,21 @@ loop.OTSdkDriver = (function() {
     },
 
     /**
-     * Ends an active screenshare session.
+     * Ends an active screenshare session. Return `true` when an active screen-
+     * sharing session was ended or `false` when no session is active.
+     *
+     * @type {Boolean}
      */
     endScreenShare: function() {
       if (!this.screenshare) {
-        return;
+        return false;
       }
 
       this.session.unpublish(this.screenshare);
       this.screenshare.off("accessAllowed accessDenied");
       this.screenshare.destroy();
       delete this.screenshare;
-      this.dispatcher.dispatch(new sharedActions.ScreenSharingState({
+      return true;
-        state: SCREEN_SHARE_STATES.INACTIVE
-      }));
     },
 
     /**

browser/components/loop/test/shared/activeRoomStore_test.js

@@ -31,13 +31,16 @@ describe("loop.store.ActiveRoomStore", function () {
         on: sinon.stub(),
         off: sinon.stub()
       },
-      setScreenShareState: sinon.stub()
+      setScreenShareState: sinon.stub(),
+      getActiveTabWindowId: sandbox.stub().callsArgWith(0, null, 42)
     };
 
     fakeSdkDriver = {
       connectSession: sandbox.stub(),
       disconnectSession: sandbox.stub(),
-      forceDisconnectAll: sandbox.stub().callsArg(0)
+      forceDisconnectAll: sandbox.stub().callsArg(0),
+      startScreenShare: sandbox.stub(),
+      endScreenShare: sandbox.stub().returns(true)
     };
 
     fakeMultiplexGum = {
@@ -690,6 +693,60 @@ describe("loop.store.ActiveRoomStore", function () {
     });
   });
 
+  describe("#startScreenShare", function() {
+    it("should set the state to 'pending'", function() {
+      store.startScreenShare(new sharedActions.StartScreenShare({
+        type: "window"
+      }));
+
+      sinon.assert.calledOnce(dispatcher.dispatch);
+      sinon.assert.calledWith(dispatcher.dispatch,
+        new sharedActions.ScreenSharingState({
+          state: SCREEN_SHARE_STATES.PENDING
+        }));
+    });
+
+    it("should invoke the SDK driver with the correct options for window sharing", function() {
+      store.startScreenShare(new sharedActions.StartScreenShare({
+        type: "window"
+      }));
+
+      sinon.assert.calledOnce(fakeSdkDriver.startScreenShare);
+      sinon.assert.calledWith(fakeSdkDriver.startScreenShare, {
+        videoSource: "window"
+      });
+    });
+
+    it("should invoke the SDK driver with the correct options for tab sharing", function() {
+      store.startScreenShare(new sharedActions.StartScreenShare({
+        type: "browser"
+      }));
+
+      sinon.assert.calledOnce(fakeMozLoop.getActiveTabWindowId);
+
+      sinon.assert.calledOnce(fakeSdkDriver.startScreenShare);
+      sinon.assert.calledWith(fakeSdkDriver.startScreenShare, {
+        videoSource: "browser",
+        constraints: {
+          browserWindow: 42,
+          scrollWithPage: true
+        }
+      });
+    })
+  });
+
+  describe("#endScreenShare", function() {
+    it("should set the state to 'inactive'", function() {
+      store.endScreenShare();
+
+      sinon.assert.calledOnce(dispatcher.dispatch);
+      sinon.assert.calledWith(dispatcher.dispatch,
+        new sharedActions.ScreenSharingState({
+          state: SCREEN_SHARE_STATES.INACTIVE
+        }));
+    });
+  });
+
   describe("#remotePeerConnected", function() {
     it("should set the state to `HAS_PARTICIPANTS`", function() {
       store.remotePeerConnected();

browser/components/loop/test/shared/otSdkDriver_test.js

@@ -138,26 +138,18 @@ describe("loop.OTSdkDriver", function () {
       };
     });
 
-    it("should dispatch a `ScreenSharingState` action", function() {
-      driver.startScreenShare(new sharedActions.StartScreenShare({
-        type: "window"
-      }));
-
-      sinon.assert.calledOnce(dispatcher.dispatch);
-      sinon.assert.calledWithExactly(dispatcher.dispatch,
-        new sharedActions.ScreenSharingState({
-          state: SCREEN_SHARE_STATES.PENDING
-        }));
-    });
-
     it("should initialize a publisher", function() {
-      driver.startScreenShare(new sharedActions.StartScreenShare({
+      // We're testing with `videoSource` set to 'browser', not 'window', as it
-        type: "window"
+      // has multiple options.
-      }));
+      var options = {
+        videoSource: "browser",
+        browserWindow: 42,
+        scrollWithPage: true
+      };
+      driver.startScreenShare(options);
 
       sinon.assert.calledOnce(sdk.initPublisher);
-      sinon.assert.calledWithMatch(sdk.initPublisher,
+      sinon.assert.calledWithMatch(sdk.initPublisher, fakeElement, options);
-        fakeElement, {videoSource: "window"});
     });
   });
 
@@ -165,9 +157,9 @@ describe("loop.OTSdkDriver", function () {
     beforeEach(function() {
       driver.getScreenShareElementFunc = function() {};
 
-      driver.startScreenShare(new sharedActions.StartScreenShare({
+      driver.startScreenShare({
-        type: "window"
+        videoSource: "window"
-      }));
+      });
 
       sandbox.stub(dispatcher, "dispatch");
 
@@ -181,20 +173,10 @@ describe("loop.OTSdkDriver", function () {
     });
 
     it("should destroy the share", function() {
-      driver.endScreenShare(new sharedActions.EndScreenShare());
+      expect(driver.endScreenShare()).to.equal(true);
 
       sinon.assert.calledOnce(publisher.destroy);
     });
-
-    it("should dispatch a `ScreenSharingState` action", function() {
-      driver.endScreenShare(new sharedActions.EndScreenShare());
-
-      sinon.assert.calledOnce(dispatcher.dispatch);
-      sinon.assert.calledWithExactly(dispatcher.dispatch,
-        new sharedActions.ScreenSharingState({
-          state: SCREEN_SHARE_STATES.INACTIVE
-        }));
-    });
   });
 
   describe("#connectSession", function() {
@@ -617,9 +599,9 @@ describe("loop.OTSdkDriver", function () {
 
       driver.getScreenShareElementFunc = function() {};
 
-      driver.startScreenShare(new sharedActions.StartScreenShare({
+      driver.startScreenShare({
-        type: "window"
+        videoSource: "window"
-      }));
+      });
 
       sandbox.stub(dispatcher, "dispatch");
     });