Bug 999171 - Implement a progress indicator to show progress when the…

… viewfinder has not loaded

apps/camera/index.html

@@ -11,6 +11,7 @@
     <!-- <link rel="stylesheet" type="text/css" href="/shared/style/buttons.css" /> -->
     <!-- <link rel="stylesheet" type="text/css" href="/shared/style/action_menu.css" /> -->
     <!-- <link rel="stylesheet" type="text/css" href="/shared/style/headers.css" /> -->
+    <!-- <link rel="stylesheet" type="text/css" href="/shared/style/progress_activity.css" /> -->
 
     <!--
       The following scripts are lazy loaded but left here to ensure

apps/camera/js/app.js

@@ -6,9 +6,9 @@ define(function(require, exports, module) {
  */
 
 var NotificationView = require('views/notification');
+var LoadingView = require('views/loading-screen');
 var ViewfinderView = require('views/viewfinder');
 var orientation = require('lib/orientation');
-var ControlsView = require('views/controls');
 var FocusRing = require('views/focus-ring');
 var ZoomBarView = require('views/zoom-bar');
 var bindAll = require('lib/bind-all');
@@ -48,6 +48,7 @@ function App(options) {
   this.win = options.win;
   this.doc = options.doc;
   this.require = options.require || window.requirejs;
+  this.LoadingView = options.LoadingView || LoadingView; // test hook
   this.inSecureMode = (this.win.location.hash === '#secure');
   this.controllers = options.controllers;
   this.geolocation = options.geolocation;
@@ -71,6 +72,7 @@ App.prototype.boot = function() {
   this.runControllers();
   this.injectViews();
   this.booted = true;
+  this.showLoading();
   debug('booted');
 };
 
@@ -116,7 +118,6 @@ App.prototype.initializeViews = function() {
   debug('initializing views');
   this.views.viewfinder = new ViewfinderView();
   this.views.focusRing = new FocusRing();
-  this.views.controls = new ControlsView();
   this.views.hud = new HudView();
   this.views.zoomBar = new ZoomBarView();
   this.views.notification = new NotificationView();
@@ -132,7 +133,6 @@ App.prototype.injectViews = function() {
   debug('injecting views');
   this.views.viewfinder.appendTo(this.el);
   this.views.focusRing.appendTo(this.el);
-  this.views.controls.appendTo(this.el);
   this.views.hud.appendTo(this.el);
   this.views.zoomBar.appendTo(this.el);
   this.views.notification.appendTo(this.el);
@@ -213,6 +213,7 @@ App.prototype.onCriticalPathDone = function() {
   var took = Date.now() - start;
 
   console.log('critical-path took %s', took + 'ms');
+  this.clearLoading();
   this.loadController(this.controllers.previewGallery);
   this.loadController(this.controllers.storage);
   this.loadController(this.controllers.confirm);
@@ -303,4 +304,36 @@ App.prototype.localize = function(key) {
   return (l10n && l10n.get(key)) || key;
 };
 
+/**
+ * Shows the loading screen after the
+ * number of ms defined in config.js
+ *
+ * @private
+ */
+App.prototype.showLoading = function() {
+  debug('show loading');
+  var ms = this.settings.loadingScreen.get('delay');
+  var self = this;
+  clearTimeout(this.loadingTimout);
+  setTimeout(function() {
+    self.views.loading = new self.LoadingView();
+    self.views.loading.appendTo(self.el).show();
+    debug('loading shown');
+  }, ms);
+};
+
+/**
+ * Clears the loadings screen, or
+ * any pending loading screen.
+ *
+ * @private
+ */
+App.prototype.clearLoading = function() {
+  var view = this.views.loading;
+  clearTimeout(this.loadingTimout);
+  if (!view) { return; }
+  view.hide(view.destroy);
+  debug('loading cleared');
+};
+
 });

apps/camera/js/config/config.js

@@ -90,6 +90,10 @@ module.exports = {
     maxPixelSizeScaleFactor: 2.5
   },
 
+  loadingScreen: {
+    delay: 600
+  },
+
   mode: {
     options: [
       {

apps/camera/js/controllers/controls.js

@@ -10,6 +10,7 @@ define(function(require, exports, module) {
  */
 
 var debug = require('debug')('controller:controls');
+var ControlsView = require('views/controls');
 var bindAll = require('lib/bind-all');
 
 /**
@@ -29,7 +30,8 @@ function ControlsController(app) {
   bindAll(this);
   this.app = app;
   this.activity = app.activity;
-  this.controls = app.views.controls;
+  this.view = app.views.controls || new ControlsView();
+  this.app.views.controls = this.view;
   this.bindEvents();
   this.configure();
   debug('initialized');
@@ -41,23 +43,23 @@ function ControlsController(app) {
  * @private
  */
 ControlsController.prototype.bindEvents = function() {
-  this.app.settings.mode.on('change:selected', this.controls.setter('mode'));
+  this.app.settings.mode.on('change:selected', this.view.setter('mode'));
   this.app.settings.mode.on('change:options', this.configureMode);
 
   // App
   this.app.on('change:recording', this.onRecordingChange);
   this.app.on('camera:shutter', this.captureHighlightOff);
-  this.app.on('camera:busy', this.controls.disable);
+  this.app.on('camera:busy', this.view.disable);
   this.app.on('timer:started', this.onTimerStarted);
   this.app.on('newthumbnail', this.onNewThumbnail);
   this.app.on('timer:cleared', this.restore);
   this.app.on('camera:ready', this.restore);
 
-  // Controls
-  this.controls.on('click:thumbnail', this.app.firer('preview'));
-  this.controls.on('click:switch', this.onSwitchButtonClick);
-  this.controls.on('click:cancel', this.onCancelButtonClick);
-  this.controls.on('click:capture', this.onCaptureClick);
+  // View
+  this.view.on('click:thumbnail', this.app.firer('preview'));
+  this.view.on('click:switch', this.onSwitchButtonClick);
+  this.view.on('click:cancel', this.onCancelButtonClick);
+  this.view.on('click:capture', this.onCaptureClick);
 
   debug('events bound');
 };
@@ -74,18 +76,26 @@ ControlsController.prototype.configure = function() {
   // The gallery button should not
   // be shown if an activity is pending
   // or the application is in 'secure mode'.
-  this.controls.set('cancel', isCancellable);
-  this.controls.set('mode', initialMode);
+  this.view.set('cancel', isCancellable);
+  this.view.set('mode', initialMode);
+
+  // Disable view until camera
+  // 'ready' enables it.
+  this.view.set('faded');
+  this.view.disable();
 
   this.configureMode();
 
+  // Put it in the DOM
+  this.view.appendTo(this.app.el);
+
   debug('cancelable: %s', isCancellable);
   debug('mode: %s', initialMode);
 };
 
 ControlsController.prototype.configureMode = function() {
   var isSwitchable = this.app.settings.mode.get('options').length > 1;
-  this.controls.set('switchable', isSwitchable);
+  this.view.set('switchable', isSwitchable);
 };
 
 /**
@@ -114,7 +124,7 @@ ControlsController.prototype.onCaptureClick = function() {
  * @private
  */
 ControlsController.prototype.onRecordingChange = function(recording) {
-  this.controls.set('recording', recording);
+  this.view.set('recording', recording);
   if (!recording) { this.onRecordingEnd(); }
 };
 
@@ -137,9 +147,9 @@ ControlsController.prototype.onRecordingEnd = function() {
  */
 ControlsController.prototype.onNewThumbnail = function(thumbnailBlob) {
   if (thumbnailBlob) {
-    this.controls.setThumbnail(thumbnailBlob);
+    this.view.setThumbnail(thumbnailBlob);
   } else {
-    this.controls.removeThumbnail();
+    this.view.removeThumbnail();
   }
 };
 
@@ -152,7 +162,7 @@ ControlsController.prototype.onNewThumbnail = function(thumbnailBlob) {
  */
 ControlsController.prototype.onTimerStarted = function() {
   this.captureHighlightOn();
-  this.controls.disable();
+  this.view.disable();
 };
 
 /**
@@ -163,7 +173,8 @@ ControlsController.prototype.onTimerStarted = function() {
  */
 ControlsController.prototype.restore = function() {
   this.captureHighlightOff();
-  this.controls.enable();
+  this.view.unset('faded');
+  this.view.enable();
 };
 
 /**
@@ -173,7 +184,7 @@ ControlsController.prototype.restore = function() {
  * @private
  */
 ControlsController.prototype.captureHighlightOn = function() {
-  this.controls.set('capture-active', true);
+  this.view.set('capture-active');
 };
 
 /**
@@ -183,7 +194,7 @@ ControlsController.prototype.captureHighlightOn = function() {
  * @private
  */
 ControlsController.prototype.captureHighlightOff = function() {
-  this.controls.set('capture-active', false);
+  this.view.unset('capture-active');
 };
 
 /**
@@ -193,7 +204,7 @@ ControlsController.prototype.captureHighlightOff = function() {
  * @private
  */
 ControlsController.prototype.onSwitchButtonClick = function() {
-  this.controls.disable();
+  this.view.disable();
   this.app.settings.mode.next();
 };
 
@@ -210,9 +221,7 @@ ControlsController.prototype.onCancelButtonClick = function() {
  */
 ControlsController.prototype.onGalleryButtonClick = function(event) {
   event.stopPropagation();
-
   var MozActivity = window.MozActivity;
-  var controls = this.controls;
 
   // Can't launch the gallery if the lockscreen is locked.
   // The button shouldn't even be visible in this case, but
@@ -227,8 +236,8 @@ ControlsController.prototype.onGalleryButtonClick = function(event) {
 
   // Wait 2000ms before re-enabling the
   // Gallery to be launched (Bug 957709)
-  controls.disable();
-  setTimeout(controls.enable, 2000);
+  this.view.disable();
+  setTimeout(this.view.enable, 2000);
 };
 
 });

apps/camera/js/vendor/view.js

@@ -37,7 +37,7 @@ define(function(require, exports, module) {
     this.els = {};
 
     if (!this.el.className) {
-      if (this.name) this.el.className += ' ' + this.name;
+      if (this.name) this.el.className = this.name;
       if (this.className) this.el.className += ' ' + this.className;
     }