Merge pull request #18047 from wilsonpage/991844

Bug 991844 - [Camera][Buri] Blue highlight Ring around Camera doesn't properly

apps/camera/js/controllers/controls.js

@@ -16,10 +16,14 @@ var bindAll = require('lib/bind-all');
  * Exports
  */
 
-exports = module.exports = function(app) {
-  return new ControlsController(app);
-};
+module.exports = function(app) { return new ControlsController(app); };
+module.exports.ControlsController = ControlsController;
 
+/**
+ * Initialize a new `ControlsController`
+ *
+ * @param {App} app
+ */
 function ControlsController(app) {
   debug('initializing');
   bindAll(this);
@@ -31,24 +35,38 @@ function ControlsController(app) {
   debug('initialized');
 }
 
+/**
+ * Event bindings.
+ *
+ * @private
+ */
 ControlsController.prototype.bindEvents = function() {
   this.app.settings.mode.on('change:selected', this.controls.setter('mode'));
-  this.app.on('newthumbnail', this.onNewThumbnail);
-  this.app.on('camera:ready', this.controls.enable);
-  this.app.on('camera:busy', this.controls.disable);
+
+  // App
   this.app.on('change:recording', this.onRecordingChange);
-  this.app.on('camera:timeupdate', this.controls.setVideoTimer);
-  this.controls.on('click:capture', this.onCaptureClick);
-  this.controls.on('click:gallery', this.onGalleryButtonClick);
+  this.app.on('camera:shutter', this.captureHighlightOff);
+  this.app.on('camera:busy', this.controls.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:gallery', this.onGalleryButtonClick);
   this.controls.on('click:switch', this.onSwitchButtonClick);
   this.controls.on('click:cancel', this.onCancelButtonClick);
-  this.app.on('timer:started', this.onTimerStarted);
-  this.app.on('timer:cleared', this.restore);
-  this.app.on('camera:shutter', this.restore);
+  this.controls.on('click:capture', this.onCaptureClick);
+
   debug('events bound');
 };
 
+/**
+ * Initial configuration.
+ *
+ * @private
+ */
 ControlsController.prototype.configure = function() {
   var isSwitchable = this.app.settings.mode.get('options').length > 1;
   var initialMode = this.app.settings.mode.selected('key');
@@ -83,17 +101,31 @@ ControlsController.prototype.configure = function() {
  * @private
  */
 ControlsController.prototype.onCaptureClick = function() {
-  this.controls.set('capture-active', true);
-  this.app.fire('capture');
+  this.captureHighlightOn();
+  this.app.emit('capture');
 };
 
+/**
+ * Set the recording attribute on
+ * the view to allow it to style
+ * accordingly.
+ *
+ * @param  {Boolean} recording
+ * @private
+ */
 ControlsController.prototype.onRecordingChange = function(recording) {
   this.controls.set('recording', recording);
   if (!recording) { this.onRecordingEnd(); }
 };
 
+/**
+ * Remove the capture highlight,
+ * once recording has finished.
+ *
+ * @private
+ */
 ControlsController.prototype.onRecordingEnd = function() {
-  this.controls.set('capture-active', false);
+  this.captureHighlightOff();
 };
 
 /**
@@ -119,7 +151,7 @@ ControlsController.prototype.onNewThumbnail = function(thumbnailBlob) {
  * @private
  */
 ControlsController.prototype.onTimerStarted = function() {
-  this.controls.set('capture-active', true);
+  this.captureHighlightOn();
   this.controls.disable();
 };
 
@@ -130,10 +162,36 @@ ControlsController.prototype.onTimerStarted = function() {
  * @private
  */
 ControlsController.prototype.restore = function() {
-  this.controls.set('capture-active', false);
+  this.captureHighlightOff();
   this.controls.enable();
 };
 
+/**
+ * Make the capture button
+ * appear pressed.
+ *
+ * @private
+ */
+ControlsController.prototype.captureHighlightOn = function() {
+  this.controls.set('capture-active', true);
+};
+
+/**
+ * Remove the pressed apperance
+ * from the capture button.
+ *
+ * @private
+ */
+ControlsController.prototype.captureHighlightOff = function() {
+  this.controls.set('capture-active', false);
+};
+
+/**
+ * Switch to the next capture
+ * mode: 'picture' or 'video'.
+ *
+ * @private
+ */
 ControlsController.prototype.onSwitchButtonClick = function() {
   this.controls.disable();
   this.app.settings.mode.next();

apps/camera/style/controls.css

@@ -307,10 +307,12 @@
 
 /**
  * :active,
+ * recording=true,
  * capture-active=true & mode=picture
  */
 
 .capture-button:active .inner-circle,
+[recording=true] .capture-button .inner-circle,
 [capture-active=true] .capture-button .inner-circle {
   background-color: #00caf2;
   color: white;
@@ -326,11 +328,14 @@
 }
 
 /**
- * mode=video & :active
+ * mode=video & :active,
+ * mode=video & capture-active=true,
+ * mode=vide & recording=true
  */
 
 .controls[mode=video] .capture-button:active .inner-circle,
-.controls[mode=video][capture-active=true] .capture-button .inner-circle {
+.controls[mode=video][capture-active=true] .capture-button .inner-circle,
+.controls[mode=video][recording=true] .capture-button .inner-circle {
   background-color: #D92E2E;
 }
 
@@ -351,10 +356,12 @@
 
 /**
  * :active,
+ * recording=true,
  * capture-active=true & mode=picture
  */
 
 .capture-button:active .center:before,
+[recording=true] .capture-button .center:before,
 [capture-active=true] .capture-button .center:before {
   color: white;
 }
@@ -375,10 +382,13 @@
 }
 
 /**
- * mode=video & recording=true
+ * mode=video & :active,
+ * mode=video & recording=true,
+ * mode=vide & capture-active=true
  */
 
 .controls[mode=video] .capture-button:active .center:before,
+.controls[mode=video][recording=true] .capture-button .center:before,
 .controls[mode=video][capture-active=true] .capture-button .center:before {
   border-radius: 3px;
   background-color: white;

apps/camera/test/unit/controllers/controls_test.js

@@ -41,6 +41,11 @@ suite('controllers/controls', function() {
     this.app.settings.mode.get
       .withArgs('options')
       .returns([{ key: 'picture' }, { key: 'video' }]);
+
+    // Aliases
+    this.controls = this.app.views.controls;
+
+    this.controller = new this.ControlsController(this.app);
   });
 
   suite('ControlsController()', function() {
@@ -58,13 +63,11 @@ suite('controllers/controls', function() {
 
     test('Should show the gallery if no pending activity' +
          'and not in \'secureMode\'', function() {
-      this.controller = new this.ControlsController(this.app);
       assert.isTrue(this.app.views.controls.set.calledWith('gallery', true));
     });
 
     test('Should *not* show the cancel button when ' +
          '*not* within a \'pick\' activity', function() {
-      this.controller = new this.ControlsController(this.app);
       assert.isTrue(this.app.views.controls.set.calledWith('cancel', false));
     });
 
@@ -110,9 +113,38 @@ suite('controllers/controls', function() {
     });
 
     test('Should call the preview when click on thumbnail', function() {
-      this.controller = new this.ControlsController(this.app);
-      this.controller.bindEvents();
       assert.ok(this.app.views.controls.on.calledWith('click:thumbnail'));
     });
+
+    test('Should remove the capture button highlight when shutter fires', function() {
+      assert.isTrue(this.app.on.calledWith('camera:shutter', this.controller.captureHighlightOff));
+    });
+
+    test('Should disable the controls when the camera is busy', function() {
+      assert.isTrue(this.app.on.calledWith('camera:busy', this.controls.disable));
+    });
+
+    test('Should restore the controls when the camera is \'ready\'', function() {
+      assert.isTrue(this.app.on.calledWith('camera:ready', this.controller.restore));
+    });
+
+    test('Should restore the controls when the timer is cleared', function() {
+      assert.isTrue(this.app.on.calledWith('timer:cleared', this.controller.restore));
+    });
+  });
+
+  suite('ControlsController#onCaptureClick', function() {
+    setup(function() {
+      sinon.spy(this.controller, 'captureHighlightOn');
+      this.controller.onCaptureClick();
+    });
+
+    test('Should highlight the capture button', function() {
+      assert.isTrue(this.controller.captureHighlightOn.calledOnce);
+    });
+
+    test('Should fire a \'capture\' event on the app', function() {
+      assert.isTrue(this.app.emit.calledWith('capture'));
+    });
   });
 });