-
Notifications
You must be signed in to change notification settings - Fork 1
iRec recordApi refactor
Esta es la version que veniamos usando segun cursoirec
:
var recordApi = {
initialize: function(callback){
uglyLog('en recordApi');
//referencia al boton
recordApi.button = $('#record');
//referencia al reloj
recordApi.clock = $('#record-time');
//inicializar estado
recordApi.isRecording = false;
//inicializar variable para el timer
recordApi.timer = null;
//referencia al directorio "audio"
fileApi.getDir('audio', function(err, dir){
if(err) {
console.log(err);
return;
}
recordApi.audioDir = dir;
callback && callback();
});
},
nuevaGrabacion: function(guiaId, callback){
var fileName = guid();
var onError = function(err) {
callback && callback(err, null);
}
var onFile = function(fileEntry) {
recordApi.entrevista = {
id: fileName,
audioPath: fileEntry.nativeURL,
interview: guiaId,
start: null,
stop: null,
tags: []
};
recordApi.recordFile = fileEntry.nativeURL;
callback && callback(null, fileEntry);
}
recordApi.audioDir.getFile(fileName, {create:true}, onFile, onError);
},
createTagButton: function(ref) {
var button = $('<button />')
.addClass("ui-btn ui-btn-inline ui-mini")
.text('+')
.click(function(e){
if(!recordApi.isRecording) {
return;
}
console.log('tag ' + ref + ' @ ' + new Date());
recordApi.entrevista.tags.push({ref: ref, time: new Date()});
});
return button;
},
updateClock: function(){
var recordTime = ((new Date() - recordApi.entrevista.start) / 1000) << 0;
recordApi.clock.text(clockFormat(recordTime));
},
record: function(){
recordApi.media = new Media(recordApi.recordFile, recordApi.onStop, recordApi.onError, recordApi.onStatus);
recordApi.media.startRecord();
},
stop: function(){
recordApi.media.stopRecord();
},
onStop: function(){
console.log('recordApi.onStop');
recordApi.media.release();
recordApi.media = null;
recordApi.entrevista.stop = new Date();
entrevistas.agregar(recordApi.entrevista, function(entrevista){
$('#revision').data('entrevistaIdx',entrevistas.lista.length - 1);
$(':mobile-pagecontainer').pagecontainer('change','#revision');
});
// mediaApi.load(recordApi.recordFile);
},
onError: function(err){
console.log('Recording error');
console.log(err);
},
onStatus: function(status){
switch(status) {
case Media.MEDIA_NONE: console.log('Status change: idle');
break;
case Media.MEDIA_STARTING:
console.log('Status change: starting');
break;
case Media.MEDIA_RUNNING:
console.log('Status change: running');
recordApi.timer = setInterval(recordApi.updateClock,500);
recordApi.isRecording = true;
recordApi.entrevista.start = new Date();
recordApi.button.css('background-color','red');
recordApi.button.text('Detener');
$.mobile.loading('hide');
break;
case Media.MEDIA_PAUSED: console.log('Status change: paused');
break;
case Media.MEDIA_STOPPED:
console.log('Status change: stopped');
clearInterval(recordApi.timer);
recordApi.timer = null;
recordApi.isRecording = false;
recordApi.button.css('background-color', '#333');
recordApi.button.text('Grabar');
break;
default: console.log('unknown status');
}
}
}
En recordApi cambiamos pocas cosas, ya estaba bastante pulido, pero agregamos un par de metodos:
var recordApi = {
initialize: function(callback){
//referencia al boton
recordApi.button = $('#record');
//referencia al reloj
recordApi.clock = $('#record-time');
//inicializar estado
recordApi.isRecording = false;
//inicializar variable para el interval
recordApi.interval = null;
//referencia al directorio "audio"
fileApi.getDir('audio', function(err, dir){
if(err) {
console.log(err);
return;
}
recordApi.audioDir = dir;
callback && callback();
});
},
nuevaGrabacion: function(guiaId, callback){
var fileName = guid();
var onError = function(err) {
callback && callback(err, null);
}
var onFile = function(fileEntry) {
recordApi.entrevista = {
id: fileName,
nombre: $('#titulo-entrevista').text(),
audioPath: fileEntry.nativeURL,
interview: guiaId,
start: null,
stop: null,
tags: []
};
recordApi.recordFile = fileEntry.nativeURL;
callback && callback(null, fileEntry);
}
recordApi.audioDir.getFile(fileName, {create:true}, onFile, onError);
},
tildeContestado: function(){
var mark = $('<div />')
.addClass("ui-input-btn ui-btn ui-btn-inline ui-icon-check ui-btn-icon-notext ui-corner-all")
.css("float","right")
.text(" ");
return mark;
},
createTagButton: function(ref) {
var button = $('<button />')
.addClass("ui-btn ui-btn-inline ui-mini")
.text('+')
.click(function(e){
if(!recordApi.isRecording) {
return;
}
console.log('tag ' + ref + ' @ ' + new Date());
$(this).parent().append(recordApi.tildeContestado());
recordApi.entrevista.tags.push({ref: ref, time: new Date()});
});
return button;
},
updateClock: function(){
var recordTime = ((new Date() - recordApi.entrevista.start) / 1000) << 0;
recordApi.clock.text(clockFormat(recordTime));
},
record: function(){
recordApi.media = new Media(recordApi.recordFile, recordApi.onStop, recordApi.onError, recordApi.onStatus);
recordApi.media.startRecord();
},
stop: function(){
recordApi.media.stopRecord();
},
onStop: function(){
console.log('recordApi.onStop');
$.mobile.loading('show');
recordApi.media.release();
recordApi.media = null;
recordApi.entrevista.stop = new Date();
entrevistas.agregar(recordApi.entrevista, function(entrevista){
//falta nombre de la revision
$('#revision').data('entrevistaIdx',entrevistas.lista.length - 1);
$(':mobile-pagecontainer').pagecontainer('change','#revision');
});
},
onError: function(err){
console.log('Recording error');
console.log(err);
},
onStatus: function(status){
switch(status) {
case Media.MEDIA_NONE: console.log('Status change: idle');
break;
case Media.MEDIA_STARTING:
console.log('Status change: starting');
break;
case Media.MEDIA_RUNNING:
console.log('Status change: running');
recordApi.interval = setInterval(recordApi.updateClock,500);
recordApi.isRecording = true;
recordApi.entrevista.start = new Date();
recordApi.button.css('background-color','red');
recordApi.button.text('Detener');
$.mobile.loading('hide');
break;
case Media.MEDIA_PAUSED: console.log('Status change: paused');
break;
case Media.MEDIA_STOPPED:
console.log('Status change: stopped');
clearInterval(recordApi.interval);
recordApi.interval = null;
recordApi.isRecording = false;
recordApi.button.css('background-color', '#333');
recordApi.button.text('Grabar');
break;
default: console.log('unknown status');
}
}
}
Cambio minimo pero necesario, agregar una propiedad nombre
al metadato de la entrevista. El nombre lo sacaremos del titulo de la vista, luego veremos de donde sale este titulo:
nuevaGrabacion: function(guiaId, callback){
var fileName = guid();
var onError = function(err) {
callback && callback(err, null);
}
var onFile = function(fileEntry) {
recordApi.entrevista = {
id: fileName,
nombre: $('#titulo-entrevista').text(), // <--
audioPath: fileEntry.nativeURL,
interview: guiaId,
start: null,
stop: null,
tags: []
};
recordApi.recordFile = fileEntry.nativeURL;
callback && callback(null, fileEntry);
}
recordApi.audioDir.getFile(fileName, {create:true}, onFile, onError);
},
Crea y devuelve un icono de check para agregar a las preguntas que son contestadas (http://demos.jquerymobile.com/1.4.5/icons/):
tildeContestado: function(){
var mark = $('<div />')
.addClass("ui-input-btn ui-btn ui-btn-inline ui-icon-check ui-btn-icon-notext ui-corner-all")
.css("float","right")
.text(" ");
return mark;
},
Crea y devuelve un boton para generar tags a medida que estamos tomando la entrevista. El nombre es el mismo que el metodo que tenemos en revisionApi
pero la funcionalidad es distinta en el boton:
createTagButton: function(ref) {
var button = $('<button />')
.addClass("ui-btn ui-btn-inline ui-mini")
.text('+')
.click(function(e){
if(!recordApi.isRecording) {
return;
}
console.log('tag ' + ref + ' @ ' + new Date());
$(this).parent().append(recordApi.tildeContestado());
recordApi.entrevista.tags.push({ref: ref, time: new Date()});
});
return button;
},
Solo agregamos $.mobile.loading('show')
para mostrar el spinner que luego sacaremos cuando se cargue la pagina de revision:
onStop: function(){
console.log('recordApi.onStop');
$.mobile.loading('show');
recordApi.media.release();
recordApi.media = null;
recordApi.entrevista.stop = new Date();
entrevistas.agregar(recordApi.entrevista, function(entrevista){
$('#revision').data('entrevistaIdx',entrevistas.lista.length - 1);
$(':mobile-pagecontainer').pagecontainer('change','#revision');
});
},
En el proximo paso vamos a limpiar los helpers que dejamos en helpers.js
- Repaso y conceptos basicos
- Ejercicios para repasar
- Problematica de desarrollo mobile
- Phonegap
- Requerimientos e instalacion
- Phonegap CLI
- [Primeros ejercicios con Phonegap](Ejercicio Phonegap)
- Plugins
- Hello world
- Estructura de un proyecto Phonegap
- Plugin Device
- Debugging
- Incorporando un framework CSS
- Plugin Vibration
- Sumando partes
- Plugin Battery Status
- Un poco de jQuery
- jQuery Mobile
- Navegacion
- Plugin Dashboard
- Revision de Plugin Dashboard
- Paginas extra
- ToDo
- Persistencia
- ToDo Persistente
- Plugin Camera
- Opciones de camara
- App Mi Galeria
- Revision de Galeria
- Plugin File
- Escribir y leer texto
- Escribir archivos binarios
- Guardando fotos
- Debugger: weinre
- Inspeccionar con weinre
- Phonegap Developer App
- Refactor de apps
- Plugin Media
- Pruebas con audio
- Control y monitoreo de audio
- Encapsular play/pausa
- Hacks
- Formato de tiempos
- Grabar y reproducir
- Proyecto Integrador
- Revision de interfaz
- Interfaz basica
- Entrevista: modelo
- Funcionalidad: revision
- Seleccion de framework
- iRec: navegacion
- iRec: fileApi
- iRec: guias
- iRec: entrevistas
- iRec: recordApi
- iRec: helpers
- iRec: mediaApi
- iRec: inicializar paginas
- iRec: refactor
- iRec: mediaApi refactor
- iRec: recordApi refactor
- iRec: helpers
- iRec: guias.js
- iRec: entrevistas.js
- iRec: crear guias
- iRec: re-inicializando
- iRec: re-ordenando
- iRec: pendientes
- iRec: reporte ux
- iRec:revision: volver
- iRec:entrevista: volver
- iRec:revision: cambios
- iRec:revision: stop
- iRec:revision: Rew 10"
- iRec:revision: tag Go
- iRec: limpieza
- Firma de apps
- Android
- Generacion de key
- Firma de apk
- Alineacion de zip
- Firmar con Phonegap
- iOS
- Detalles finales
- Config.xml
- Iconos
- Splash