Merge pull request #20589 from dmarcos/bug1022880

Bug 1022880 - [Camera] Add focus state color to the continuous auto focu...

apps/camera/js/lib/camera/camera.js

@@ -424,8 +424,8 @@ Camera.prototype.configureFocus = function() {
   this.focus.onAutoFocusChanged = this.onAutoFocusChanged;
 };
 
-Camera.prototype.onAutoFocusChanged = function() {
-  this.set('focus', 'autofocus');
+Camera.prototype.onAutoFocusChanged = function(state) {
+  this.set('focus', state);
 };
 
 Camera.prototype.onFacesDetected = function(faces) {
@@ -771,9 +771,8 @@ Camera.prototype.takePicture = function(options) {
     takePicture();
   }
 
-  function onFocused(err) {
-    var focus = err ? 'fail' : 'focused';
-    self.set('focus', focus);
+  function onFocused(state) {
+    self.set('focus', state);
     takePicture();
   }
 
@@ -821,14 +820,10 @@ Camera.prototype.updateFocusArea = function(rect, done) {
   var self = this;
   this.set('focus', 'focusing');
   this.focus.updateFocusArea(rect, focusDone);
-  function focusDone(error) {
-    if (error) {
-      self.set('focus', 'fail');
-    } else {
-      self.set('focus', 'focused');
-    }
+  function focusDone(state) {
+    self.set('focus', state);
     if (done) {
-      done(error);
+      done(state);
     }
   }
 };

apps/camera/js/lib/camera/focus.js

@@ -103,6 +103,7 @@ Focus.prototype.clearFaceDetection = function() {
 
 Focus.prototype.suspendFaceDetection = function(ms, delay) {
   var self = this;
+  delay = delay || 0;
   clearTimeout(this.faceDetectionSuspended);
   clearTimeout(this.faceDetectionSuspensionTimer);
   this.faceDetectionSuspensionTimer = setTimeout(suspendFaceDetection, delay);
@@ -136,9 +137,17 @@ Focus.prototype.suspendContinuousFocus = function(ms) {
   this.continuousModeTimer = setTimeout(this.resumeContinuousFocus, ms);
 };
 
-Focus.prototype.onAutoFocusMoving = function(state) {
-  if (state) {
-    this.onAutoFocusChanged(state);
+Focus.prototype.onAutoFocusMoving = function(moving) {
+  var self = this;
+  if (moving) {
+    this.onAutoFocusChanged('focusing');
+    this.mozCamera.autoFocus(onFocused);
+    return;
+  }
+  function onFocused(state) {
+    state = state ? 'focused' : 'fail';
+    self.onAutoFocusChanged(state);
+    self.mozCamera.resumeContinuousFocus();
   }
 };
 
@@ -203,9 +212,7 @@ Focus.prototype.focusOnLargestFace = function(faces) {
 
   if (!facesAlreadyDetected) {
     this.detectedFaces = detectedFaces;
-    this.suspendFaceDetection(2000, 2000);
     if (!this.faceFocused) {
-      this.stopContinuousFocus();
       // First face in the array is the one we focus on (largest area on image)
       this.updateFocusArea(detectedFaces[0].bounds, focusDone);
     }
@@ -215,6 +222,7 @@ Focus.prototype.focusOnLargestFace = function(faces) {
   function focusDone(error) {
     self.faceFocused = true;
     self.suspendContinuousFocus(4000);
+    self.suspendFaceDetection(2000);
   }
 
 };
@@ -259,7 +267,7 @@ Focus.prototype.focus = function(done) {
   function onFocused(success) {
     if (success) {
       self.focused = true;
-      done();
+      done('focused');
     } else {
       self.focused = false;
       done('failed');
@@ -315,20 +323,15 @@ Focus.prototype.updateFocusArea = function(rect, done) {
     done('touchToFocusNotAvailable');
     return;
   }
-
+  this.stopContinuousFocus();
   this.stopFaceDetection();
   this.mozCamera.setFocusAreas([rect]);
   this.mozCamera.setMeteringAreas([rect]);
-  if (this.mozCamera.focusMode === 'continuous-picture') {
-    this.mozCamera.resumeContinuousFocus();
-  }
   // Disables flash temporarily so it doesn't go off while focusing
   this.mozCamera.flashMode = 'off';
   // Call auto focus to focus on focus area.
   this.focus(focusDone);
   function focusDone(state) {
-    self.startFaceDetection();
-    self.suspendFaceDetection(2000, 0);
     // Restores previous flash mode
     self.mozCamera.flashMode = previousFlashMode;
     done(state);

apps/camera/js/views/focus.js

@@ -39,6 +39,9 @@ module.exports = View.extend({
   },
 
   setPosition: function(x, y) {
+    if (this.fadeOutTimer) {
+      clearTimeout(this.fadeOutTimer);
+    }
     this.el.style.left = x + 'px';
     this.el.style.top = y + 'px';
   },
@@ -51,9 +54,6 @@ module.exports = View.extend({
 
   fadeOut: function() {
     var self = this;
-    if (this.fadeOutTimer) {
-      clearTimeout(this.fadeOutTimer);
-    }
     this.fadeOutTimer = setTimeout(hide, this.fadeTime);
     function hide() {
       self.reset();

apps/camera/style/focus-ring.css

@@ -21,7 +21,7 @@
  */
 
 .focus[mode="fixed"],
-.focus[state="none"] {
+.focus[mode="none"] {
   opacity: 0;
 }
 
@@ -33,7 +33,6 @@
 
 .focus[state="focusing"],
 .focus[state="focused"],
-.focus[state="autofocus"],
 .focus[state="fail"] {
   opacity: 0.8;
 }
@@ -62,34 +61,18 @@
   content: "\e615";
 }
 
-/**
- * state="autofocus"
- */
-
-.focus[state="autofocus"] {
-  animation: 0.2s pulse 1 ease-in forwards;
-}
-
-@keyframes pulse {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.2); }
-  100% { transform: scale(1); }
-}
-
-.focus[state="autofocus"] .focus-ring:before {
-  opacity: 1;
-}
-
-.focus[state="autofocus"] .focus-ring:after {
-  opacity: 0;
-}
-
 /**
  * state="focusing"
  */
 
 .focus[state="focusing"] {
-  animation: 0.2s pulse 1 ease-in forwards;
+  animation: 0.35s ring-animation 1 ease-in forwards;
+}
+
+@keyframes ring-animation {
+  0% { transform: rotate(0deg) scale(1); }
+  50% { transform: rotate(60deg) scale(1.1); }
+  100% { transform: rotate(45deg) scale(1); }
 }
 
 .focus[state="focusing"] .focus-ring:before {
@@ -104,6 +87,10 @@
  * state="focused"
  */
 
+.focus[state="focused"] {
+  transform: rotate(45deg) scale(0.8478);
+  transition-duration: 0.1s;
+}
 
 .focus[state="focused"] .focus-ring{
   color: #afff3d;
@@ -121,6 +108,11 @@
  * state="fail"
  */
 
+.focus[state="fail"] {
+  transform: rotate(45deg) scale(1);
+  transition-duration: 0.1s;
+}
+
 .focus[state="fail"] .focus-ring{
   color: #ff0000;
 }
@@ -131,4 +123,4 @@
 
 .focus[state="fail"] .focus-ring:after{
   opacity: 1;
-}
+}

apps/camera/test/unit/lib/camera/camera_test.js

@@ -1033,7 +1033,7 @@ suite('lib/camera/camera', function() {
     });
 
     test('Should set the focus state to the passed value', function() {
-      this.camera.onAutoFocusChanged();
+      this.camera.onAutoFocusChanged('autofocus');
       assert.ok(this.camera.set.calledWith('focus', 'autofocus'));
     });
   });

apps/camera/test/unit/lib/camera/focus_test.js

@@ -510,7 +510,7 @@ suite('lib/camera/focus', function() {
       this.mozCamera.autoFocus.callsArgWith(0, 'success');
       this.focus.focus(onFocused);
       assert.ok(this.mozCamera.autoFocus.called);
-      assert.ok(onFocused.calledWith(undefined));
+      assert.ok(onFocused.calledWith('focused'));
       assert.ok(this.focus.focused);
     });
 
@@ -614,11 +614,15 @@ suite('lib/camera/focus', function() {
   suite('Focus#updateFocusArea()', function() {
     setup(function() {
       this.focus.focus = sinon.spy();
+      this.focus.stopContinuousFocus = sinon.spy();
+      this.focus.stopFaceDetection = sinon.spy();
     });
 
     test('it returns without doing anything if touch to focus disabled', function() {
       this.focus.touchFocus = false;
       this.focus.updateFocusArea();
+      assert.ok(!this.focus.stopContinuousFocus.called);
+      assert.ok(!this.focus.stopFaceDetection.called);
       assert.ok(!this.focus.mozCamera.setFocusAreas.called);
       assert.ok(!this.focus.mozCamera.setMeteringAreas.called);
       assert.ok(!this.focus.focus.called);
@@ -627,18 +631,13 @@ suite('lib/camera/focus', function() {
     test('it updates focus area if touch to focus is enabled', function() {
       this.focus.touchFocus = true;
       this.focus.updateFocusArea();
+      assert.ok(this.focus.stopContinuousFocus.called);
+      assert.ok(this.focus.stopFaceDetection.called);
       assert.ok(this.focus.mozCamera.setFocusAreas.called);
       assert.ok(this.focus.mozCamera.setMeteringAreas.called);
       assert.ok(this.focus.focus.called);
     });
 
-    test('it focus mode is continuous-picture we have to resume continuous focus', function() {
-      this.focus.touchFocus = true;
-      this.focus.mozCamera.focusMode = 'continuous-picture';
-      this.focus.updateFocusArea();
-      assert.ok(this.focus.mozCamera.resumeContinuousFocus.called);
-    });
-
   });
 
 });