Merge pull request #21354 from justindarc/bug1031012-v2.0

Bug 1031012 - [B2G][Camera]Self-timer cannot be canceled

apps/camera/js/controllers/controls.js

@@ -50,9 +50,7 @@ ControlsController.prototype.bindEvents = function() {
   this.app.on('change:recording', this.onRecordingChange);
   this.app.on('camera:shutter', this.captureHighlightOff);
   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);
 
   // View
@@ -61,6 +59,11 @@ ControlsController.prototype.bindEvents = function() {
   this.view.on('click:cancel', this.onCancelButtonClick);
   this.view.on('click:capture', this.onCaptureClick);
 
+  // Timer
+  this.app.on('timer:started', this.onTimerStarted);
+  this.app.on('timer:cleared', this.onTimerStopped);
+  this.app.on('timer:ended', this.onTimerStopped);
+
   debug('events bound');
 };
 
@@ -156,13 +159,25 @@ ControlsController.prototype.onNewThumbnail = function(thumbnailBlob) {
 /**
  * Forces the capture button to
  * look pressed while the timer is
- * counting down and disables buttons.
+ * counting down and hides controls.
  *
  * @private
  */
 ControlsController.prototype.onTimerStarted = function() {
   this.captureHighlightOn();
-  this.view.disable();
+  this.view.set('timer', 'active');
+};
+
+/**
+ * Forces the capture button to
+ * look unpressed when the timer
+ * stops and shows controls.
+ *
+ * @private
+ */
+ControlsController.prototype.onTimerStopped = function() {
+  this.captureHighlightOff();
+  this.view.set('timer', 'inactive');
 };
 
 /**

apps/camera/js/controllers/viewfinder.js

@@ -288,7 +288,7 @@ ViewfinderController.prototype.onZoomChanged = function(zoom) {
 };
 
 ViewfinderController.prototype.onViewfinderClicked = function(e) {
-  if (!this.touchFocusEnabled) {
+  if (!this.touchFocusEnabled || this.app.get('timerActive')) {
     return;
   }
   var focusPoint = {

apps/camera/style/controls.css

@@ -35,6 +35,7 @@
   flex: 1;
   align-items: center;
   -moz-user-select: none;
+  transition: opacity 100ms;
 }
 
 /** Left
@@ -62,6 +63,20 @@
   justify-content: flex-start;
 }
 
+/**
+ * Timer
+ */
+
+.controls[data-timer="active"] {
+  pointer-events: none;
+}
+
+.controls[data-timer="active"] .controls-left,
+.controls[data-timer="active"] .controls-right {
+  opacity: 0;
+  transition-duration: 300ms;
+}
+
 /** Controls Button
  ---------------------------------------------------------*/
 

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

@@ -107,8 +107,13 @@ suite('controllers/controls', function() {
       assert.isTrue(this.app.on.calledWith('camera:ready', this.controller.restore));
     });
 
+    test('Should hide the controls when the timer is started', function() {
+      assert.isTrue(this.app.on.calledWith('timer:started', this.controller.onTimerStarted));
+    });
+
     test('Should restore the controls when the timer is cleared', function() {
-      assert.isTrue(this.app.on.calledWith('timer:cleared', this.controller.restore));
+      assert.isTrue(this.app.on.calledWith('timer:cleared', this.controller.onTimerStopped));
+      assert.isTrue(this.app.on.calledWith('timer:ended', this.controller.onTimerStopped));
     });
 
     test('Should disable the view intitially until camera is ready', function() {