Bug 974895: Added landing page for unsupported devices, r=Standard8.

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

@@ -332,7 +332,7 @@ loop.shared.views = (function(_, OT, l10n) {
   /**
    * Unsupported Browsers view.
    */
-  var UnsupportedView = BaseView.extend({
+  var UnsupportedBrowserView = BaseView.extend({
     template: _.template([
       '<div>',
       '  <h2 data-l10n-id="incompatible_browser"></h2>',
@@ -344,12 +344,26 @@ loop.shared.views = (function(_, OT, l10n) {
     ].join(""))
   });
 
+  /**
+   * Unsupported Browsers view.
+   */
+  var UnsupportedDeviceView = BaseView.extend({
+    template: _.template([
+      '<div>',
+      '  <h2 data-l10n-id="incompatible_device"></h2>',
+      '  <p data-l10n-id="sorry_device_unsupported"></p>',
+      '  <p data-l10n-id="use_firefox_windows_mac_linux"></p>',
+      '</div>'
+    ].join(""))
+  });
+
   return {
     L10nView: L10nView,
     BaseView: BaseView,
     ConversationView: ConversationView,
     NotificationListView: NotificationListView,
     NotificationView: NotificationView,
-    UnsupportedView: UnsupportedView
+    UnsupportedBrowserView: UnsupportedBrowserView,
+    UnsupportedDeviceView: UnsupportedDeviceView
   };
 })(_, window.OT, document.webL10n || document.mozL10n);

browser/components/loop/standalone/content/js/webapp.js

@@ -111,7 +111,8 @@ loop.webapp = (function($, _, OT) {
   var WebappRouter = loop.shared.router.BaseConversationRouter.extend({
     routes: {
       "":                    "home",
-      "unsupported":         "unsupported",
+      "unsupportedDevice":   "unsupportedDevice",
+      "unsupportedBrowser":  "unsupportedBrowser",
       "call/ongoing/:token": "loadConversation",
       "call/:token":         "initiate"
     },
@@ -153,8 +154,12 @@ loop.webapp = (function($, _, OT) {
       this.loadView(new HomeView());
     },
 
-    unsupported: function() {
-      this.loadView(new sharedViews.UnsupportedView());
+    unsupportedDevice: function() {
+      this.loadView(new sharedViews.UnsupportedDeviceView());
+    },
+
+    unsupportedBrowser: function() {
+      this.loadView(new sharedViews.UnsupportedBrowserView());
     },
 
     /**
@@ -192,23 +197,39 @@ loop.webapp = (function($, _, OT) {
     }
   });
 
+  /**
+   * Local helpers.
+   */
+  function WebappHelper() {
+    this._iOSRegex = /^(iPad|iPhone|iPod)/;
+  }
+
+  WebappHelper.prototype.isIOS = function isIOS(platform) {
+    return this._iOSRegex.test(platform);
+  };
+
   /**
    * App initialization.
    */
   function init() {
+    var helper = new WebappHelper();
     router = new WebappRouter({
       conversation: new sharedModels.ConversationModel({}, {sdk: OT}),
       notifier: new sharedViews.NotificationListView({el: "#messages"})
     });
     Backbone.history.start();
-    if (!OT.checkSystemRequirements())
-      router.navigate("unsupported", {trigger: true});
+    if (helper.isIOS(navigator.platform)) {
+      router.navigate("unsupportedDevice", {trigger: true});
+    } else if (!OT.checkSystemRequirements()) {
+      router.navigate("unsupportedBrowser", {trigger: true});
+    }
   }
 
   return {
     baseServerUrl: baseServerUrl,
     ConversationFormView: ConversationFormView,
     HomeView: HomeView,
+    WebappHelper: WebappHelper,
     init: init,
     WebappRouter: WebappRouter
   };

browser/components/loop/standalone/content/l10n/data.ini

@@ -10,6 +10,9 @@ welcome=Welcome to the Loop web client.
 incompatible_browser=Incompatible Browser
 powered_by_webrtc=The audio and video components of Loop are powered by WebRTC.
 use_latest_firefox.innerHTML=To use Loop, please use the latest version of <a href="{{ff_url}}">Firefox</a>.
+incompatible_device=Incompatible device
+sorry_device_unsupported=Sorry, Loop does not currently support your device.
+use_firefox_windows_mac_linux=Please open this page using the latest Firefox on Windows, Android, Mac or Linux.
 
 [fr]
 call_has_ended=L'appel est terminé.
@@ -23,4 +26,6 @@ welcome=Bienvenue sur Loop.
 incompatible_browser=Navigateur non supporté
 powered_by_webrtc=Les fonctionnalités audio et vidéo de Loop utilisent WebRTC.
 use_latest_firefox.innerHTML=Pour utiliser Loop, merci d'utiliser la dernière version de <a href="{{ff_url}}">Firefox</a>.
-
+incompatible_device=Plateforme non supportée
+sorry_device_unsupported=Désolé, Loop ne fonctionne actuellement pas sur votre appareil.
+use_firefox_windows_mac_linux=Merci d'ouvrir cette page avec une version récente de Firefox pour Windows, Android, Mac ou Linux.

browser/components/loop/test/standalone/webapp_test.js

@@ -30,17 +30,38 @@ describe("loop.webapp", function() {
   });
 
   describe("#init", function() {
-    it("should navigate to the unsupported route if the sdk detects the" +
-       "browser is unsupported", function() {
-      var WebappRouter = loop.webapp.WebappRouter;
-      sandbox.stub(window.OT, "checkSystemRequirements").returns(false);
+    var WebappRouter;
+
+    beforeEach(function() {
+      WebappRouter = loop.webapp.WebappRouter;
       sandbox.stub(WebappRouter.prototype, "navigate");
+    });
+
+    afterEach(function() {
+      Backbone.history.stop();
+    });
+
+    it("should navigate to the unsupportedDevice route if the sdk detects " +
+       "the device is running iOS", function() {
+      sandbox.stub(loop.webapp.WebappHelper.prototype, "isIOS").returns(true);
 
       loop.webapp.init();
 
       sinon.assert.calledOnce(WebappRouter.prototype.navigate);
       sinon.assert.calledWithExactly(WebappRouter.prototype.navigate,
-                                     "unsupported", {trigger: true});
+                                     "unsupportedDevice", {trigger: true});
+    });
+
+    it("should navigate to the unsupportedBrowser route if the sdk detects " +
+       "the browser is unsupported", function() {
+      sandbox.stub(loop.webapp.WebappHelper.prototype, "isIOS").returns(false);
+      sandbox.stub(window.OT, "checkSystemRequirements").returns(false);
+
+      loop.webapp.init();
+
+      sinon.assert.calledOnce(WebappRouter.prototype.navigate);
+      sinon.assert.calledWithExactly(WebappRouter.prototype.navigate,
+                                     "unsupportedBrowser", {trigger: true});
     });
   });
 
@@ -160,13 +181,23 @@ describe("loop.webapp", function() {
           });
       });
 
-      describe("#unsupported", function() {
-        it("should load the UnsupportedView", function() {
-          router.unsupported();
+      describe("#unsupportedDevice", function() {
+        it("should load the UnsupportedDeviceView", function() {
+          router.unsupportedDevice();
 
           sinon.assert.calledOnce(router.loadView);
           sinon.assert.calledWith(router.loadView,
-            sinon.match.instanceOf(sharedViews.UnsupportedView));
+            sinon.match.instanceOf(sharedViews.UnsupportedDeviceView));
+        });
+      });
+
+      describe("#unsupportedBrowser", function() {
+        it("should load the UnsupportedBrowserView", function() {
+          router.unsupportedBrowser();
+
+          sinon.assert.calledOnce(router.loadView);
+          sinon.assert.calledWith(router.loadView,
+            sinon.match.instanceOf(sharedViews.UnsupportedBrowserView));
         });
       });
     });
@@ -289,4 +320,25 @@ describe("loop.webapp", function() {
       });
     });
   });
+
+  describe("WebappHelper", function() {
+    var helper;
+
+    beforeEach(function() {
+      helper = new loop.webapp.WebappHelper();
+    });
+
+    describe("#isIOS", function() {
+      it("should detect iOS", function() {
+        expect(helper.isIOS("iPad")).eql(true);
+        expect(helper.isIOS("iPod")).eql(true);
+        expect(helper.isIOS("iPhone")).eql(true);
+        expect(helper.isIOS("iPhone Simulator")).eql(true);
+      });
+
+      it("shouldn't detect iOS with other platforms", function() {
+        expect(helper.isIOS("MacIntel")).eql(false);
+      });
+    });
+  });
 });