b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
103 lines
No EOL
3.9 KiB
JavaScript
103 lines
No EOL
3.9 KiB
JavaScript
define([
|
|
'require',
|
|
'exports',
|
|
'module',
|
|
'debug',
|
|
'lib/panzoom',
|
|
'lib/orientation',
|
|
'MediaFrame',
|
|
'lib/bind',
|
|
'view'
|
|
], function (require, exports, module) {
|
|
'use strict';
|
|
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');
|
|
module.exports = View.extend({
|
|
name: 'confirm',
|
|
initialize: function () {
|
|
this.on('destroy', this.onDestroy);
|
|
},
|
|
render: function () {
|
|
this.el.innerHTML = this.template();
|
|
this.els.mediaFrame = this.find('.js-media-frame');
|
|
this.els.retake = this.find('.js-retake');
|
|
this.els.select = this.find('.js-select');
|
|
this.disableButtons();
|
|
this.setupMediaFrame();
|
|
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 () {
|
|
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();
|
|
}
|
|
});
|
|
}); |