From f0558e03a8aae2ef3e7e8a4c5506a6aa1947f678 Mon Sep 17 00:00:00 2001 From: Diego Marcos Date: Fri, 31 Jan 2014 00:52:51 -0800 Subject: [PATCH] Bug 961620 - Pick activity sends the first picture taken instead of the last one --- apps/camera/js/controllers/confirm.js | 119 ++++++++---------- apps/camera/js/views/confirm.js | 12 ++ apps/camera/style/app.css | 4 + .../test/unit/controllers/confirm_test.js | 11 +- 4 files changed, 67 insertions(+), 79 deletions(-) diff --git a/apps/camera/js/controllers/confirm.js b/apps/camera/js/controllers/confirm.js index 01a69723dc53..94363a73531e 100644 --- a/apps/camera/js/controllers/confirm.js +++ b/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,16 +40,30 @@ 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); }; /** @@ -56,86 +71,50 @@ ConfirmController.prototype.bindEvents = function() { * 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(); - } }; }); diff --git a/apps/camera/js/views/confirm.js b/apps/camera/js/views/confirm.js index 301cc08c4642..d339c98c7e5f 100644 --- a/apps/camera/js/views/confirm.js +++ b/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, diff --git a/apps/camera/style/app.css b/apps/camera/style/app.css index 409c5131572e..0aec13674713 100644 --- a/apps/camera/style/app.css +++ b/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; } \ No newline at end of file diff --git a/apps/camera/test/unit/controllers/confirm_test.js b/apps/camera/test/unit/controllers/confirm_test.js index da98eabe4626..bfc34f17b322 100644 --- a/apps/camera/test/unit/controllers/confirm_test.js +++ b/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); - }); - }); });