Bug 961620 - Pick activity sends the first picture taken instead of t…

…he last one

apps/camera/js/controllers/confirm.js

@@ -31,6 +31,7 @@ function ConfirmController(app) {
   this.activity = app.activity;
   this.container = app.el;
   this.app = app;
+  this.camera = app.camera;
 
   // Allow these dependencies
   // to be injected if need be.
@@ -39,103 +40,81 @@ function ConfirmController(app) {
 
   bindAll(this);
   this.bindEvents();
+
   debug('initialized');
 }
 
+ConfirmController.prototype.renderView = function() {
+  if (this.confirmView) {
+    this.confirmView.show();
+    return;
+  }
+  this.confirmView = new this.ConfirmView();
+  this.confirmView.hide();
+  this.confirmView.render().appendTo(this.container);
+  this.confirmView.on('click:select', this.onSelectMedia);
+  this.confirmView.on('click:retake', this.confirmView.hide);
+  this.camera.resumePreview();
+};
+
 /**
  * Bind callbacks to required events.
  *
  */
 ConfirmController.prototype.bindEvents = function() {
-  this.app.on('newimage', this.onNewImage);
-  this.app.on('newvideo', this.onNewVideo);
+  this.app.on('newimage', this.onNewMedia);
+  this.app.on('newvideo', this.onNewMedia);
 };
 
 /**
  * When inside a 'pick' activity
  * will present the user with a
  * confirm overlay where they can
  * decide to 'select' or 'retake'
- * the photo.
+ * the photo or video
  *
  * @param  {Object} data
  *
  */
-ConfirmController.prototype.onNewImage = function(data) {
+ConfirmController.prototype.onNewMedia = function(newMedia) {
   if (!this.activity.active) { return; }
 
-  var confirm = new this.ConfirmView();
-  var activity = this.activity;
-  var camera = this.camera;
-  var blob = data.blob;
-
-  confirm
-    .render()
-    .appendTo(this.container)
-    .setupMediaFrame()
-    .on('click:select', onSelectClick)
-    .on('click:retake', onRetakeClick);
-
-  this.prepareBlob(blob, confirm.showImage);
-
-  function onSelectClick() {
-    var width = activity.data.width;
-    var height = activity.data.height;
-    var needsResizing = width || height;
-
-    if (!needsResizing) {
-      post(blob);
-      return;
-    }
-
-    resizeImage({
-      blob: blob,
-      width: width,
-      height: height
-    }, post);
-  }
-
-  function onRetakeClick() {
-    confirm.destroy();
-    camera.resumePreview();
-  }
-
-  function post(blob) {
-    activity.postResult({
-      type: 'image/jpeg',
-      blob: blob
-    });
+  this.newMedia = newMedia;
+  this.renderView();
+  if (newMedia.isVideo) { // Is video
+    this.confirmView.showVideo(newMedia);
+  } else { // Is Image
+    this.prepareBlob(this.newMedia.blob, this.confirmView.showImage);
   }
 };
 
-ConfirmController.prototype.onNewVideo = function(video) {
-  if (!this.activity.active) { return; }
-
-  var ConfirmView = this.ConfirmView;
-  var confirm = new ConfirmView();
+ConfirmController.prototype.onSelectMedia = function() {
+  var needsResizing;
   var activity = this.activity;
-  var camera = this.camera;
-
-  confirm
-    .render()
-    .appendTo(this.container)
-    .setupMediaFrame()
-    .showVideo(video)
-    .on('click:select', onSelectClick)
-    .on('click:retake', onRetakeClick);
-
-  function onSelectClick() {
-    activity.postResult({
-      type: 'video/3gpp',
-      blob: video.blob,
-      poster: video.poster.blob
-    });
+  var media = {
+    blob: this.newMedia.blob
+  };
+
+  if (this.newMedia.isVideo) { // Is Video
+    media.type = 'video/3gpp';
+    media.poster = this.newMedia.poster.blob;
+  } else { // Is Image
+    media.type = 'image/jpeg';
+    needsResizing = this.newMedia.width || this.newMedia.height;
+    if (needsResizing) {
+      resizeImage({
+        blob: this.newMedia.blob,
+        width: this.newMedia.width,
+        height: this.newMedia.height
+      }, function(newBlob) {
+        media.blob = newBlob;
+        activity.postResult(media);
+      });
+      return;
+    }
   }
+  activity.postResult(media);
 
-  function onRetakeClick() {
-    camera.resumePreview();
-    confirm.destroy();
-  }
 };
 
 });

apps/camera/js/views/confirm.js

@@ -24,6 +24,8 @@ module.exports = View.extend({
   render: function() {
     var l10n = navigator.mozL10n;
 
+    this.show();
+
     this.el.innerHTML = this.template({
       retake: l10n.get('retake-button'),
       select: l10n.get('select-button')
@@ -37,6 +39,8 @@ module.exports = View.extend({
     // Events
     bind(this.els.retake, 'click', this.onButtonClick);
     bind(this.els.select, 'click', this.onButtonClick);
+
+    this.setupMediaFrame();
     return this;
   },
 
@@ -46,6 +50,14 @@ module.exports = View.extend({
     return this;
   },
 
+  hide: function() {
+    this.el.classList.add('hidden');
+  },
+
+  show: function() {
+    this.el.classList.remove('hidden');
+  },
+
   showImage: function(image) {
     this.mediaFrame.displayImage(
       image.blob,

apps/camera/style/app.css

@@ -27,4 +27,8 @@ body[data-orientation=deg180] .rotates {
 
 body[data-orientation=deg270] .rotates {
   transform: rotate(-270deg)
+}
+
+.hidden {
+  display: none;
 }

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

@@ -46,19 +46,12 @@ suite('controllers/confirm', function() {
     });
   });
 
-  suite('ConfirmController#onNewImage()', function() {
+  suite('ConfirmController#onNewMedia()', function() {
     test('Should not do anything if there is no active activity', function() {
       this.app.activity.active = false;
-      this.controller.onNewImage({});
+      this.controller.onNewMedia({});
       assert.ok(this.app.ConfirmView.notCalled);
     });
   });
 
-  suite('ConfirmController#onNewVideo()', function() {
-    test('Should not do anything if there is no active activity', function() {
-      this.app.activity.active = false;
-      this.controller.onNewVideo({});
-      assert.ok(this.app.ConfirmView.notCalled);
-    });
-  });
 });