Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/camera/js/views/confirm.js

@@ -0,0 +1,148 @@
+define(function(require, exports, module) {
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var debug = require('debug')('view:confirm');
+var addPanAndZoomHandlers = require('lib/panzoom');
+var orientation = require('lib/orientation');
+var MediaFrame = require('MediaFrame');
+var bind = require('lib/bind');
+var View = require('view');
+
+/**
+ * Exports
+ */
+
+module.exports = View.extend({
+  name: 'confirm',
+
+  initialize: function() {
+    this.on('destroy', this.onDestroy);
+  },
+
+  render: function() {
+    this.el.innerHTML = this.template();
+
+    // Get elements
+    this.els.mediaFrame = this.find('.js-media-frame');
+    this.els.retake = this.find('.js-retake');
+    this.els.select = this.find('.js-select');
+
+    // Disable buttons on this view by default
+    // until an image/video is displayed
+    this.disableButtons();
+
+    // Initialize the MediaFrame component
+    this.setupMediaFrame();
+
+    // Clean up
+    delete this.template;
+
+    debug('rendered');
+    return this.bindEvents();
+  },
+
+  bindEvents: function() {
+    bind(this.els.retake, 'click', this.onButtonClick);
+    bind(this.els.select, 'click', this.onButtonClick);
+    return this;
+  },
+
+  setupMediaFrame: function() {
+    this.mediaFrame = new MediaFrame(this.els.mediaFrame, true,
+                                     this.maxPreviewSize);
+    this.mediaFrame.video.onloading = this.onVideoLoading;
+    this.mediaFrame.video.onplaying = this.onVideoPlaying;
+    addPanAndZoomHandlers(this.mediaFrame);
+    window.addEventListener('resize', this.onResize);
+    return this;
+  },
+
+  onVideoLoading: function() {
+    this.emit('loadingvideo', 'loadingVideo');
+  },
+
+  onVideoPlaying: function() {
+    this.emit('playingvideo');
+  },
+
+  clearMediaFrame: function() {
+    this.mediaFrame.clear();
+    this.disableButtons();
+  },
+
+  hide: function() {
+    this.el.classList.add('hidden');
+    orientation.lock();
+  },
+
+  show: function() {
+    this.el.classList.remove('hidden');
+    orientation.unlock();
+  },
+
+  disableButtons: function() {
+    this.els.retake.setAttribute('disabled', true);
+    this.els.select.setAttribute('disabled', true);
+  },
+
+  enableButtons: function() {
+    this.els.retake.removeAttribute('disabled');
+    this.els.select.removeAttribute('disabled');
+  },
+
+  showImage: function(image) {
+    this.enableButtons();
+    this.mediaFrame.displayImage(
+      image.blob,
+      image.width,
+      image.height,
+      image.preview,
+      image.rotation,
+      image.mirrored);
+    return this;
+  },
+
+  showVideo: function(video) {
+    this.enableButtons();
+    this.mediaFrame.displayVideo(
+      video.blob,
+      video.poster.blob,
+      video.poster.width / video.poster.height,
+      video.rotation);
+    return this;
+  },
+
+  template: function() {
+    /*jshint maxlen:false*/
+    return '<div class="confirm-media-frame js-media-frame"></div>' +
+    '<footer id="confirm-controls" class="confirm-controls">' +
+      '<button class="retake-button js-retake" data-l10n-id="retake-button" ' +
+      'name="retake"></button>' +
+      '<button class="select-button test-confirm-select js-select" ' +
+      'data-l10n-id="select-button" name="select"></button></footer>';
+  },
+
+  onButtonClick: function(event) {
+    var el = event.currentTarget;
+    var name = el.getAttribute('name');
+    this.emit('click:' + name);
+  },
+
+  onResize: function() {
+    this.mediaFrame.resize();
+    if (this.mediaFrame.displayingVideo) {
+      this.mediaFrame.video.setPlayerSize();
+    }
+  },
+
+  onDestroy: function() {
+    window.removeEventListener('resize', this.onResize);
+    this.mediaFrame.clear();
+  }
+});
+
+});