Skip to content

iRec revision stop button

Christian Gastrell edited this page Jul 7, 2015 · 2 revisions

En algun momento dudamos en sacar este boton, pero creo que esta bien que el usuario pueda detener la reproduccion y que todo vuelva a 0.

La funcionalidad es muy simple, en el handler de pagecreate de #revision vamos a agregar la inicializacion del boton #stop que, si mal no recuerdo, ya lo tenemos en el HTML:

<button id="stop" class="ui-btn ui-btn-inline ui-mini">Stop</button>

El handler de pagecreate de #revision es donde agregamos la inicializacion del boton volver. Ahora agregamos dentro de pagecreate la inicializacion del boton #stop:

  // este es el codigo de pausa, solo de referencia, no lo copien
  $('#pausa').click(function(e){
    e.preventDefault();
    revisionApi.pausa();
  });

  // este es el codigo de stop
  $('#stop').on('click', function(e){
    e.preventDefault();
    revisionApi.stop();
  });

Es simple, cuando hacemos click queremos detener el comportamiento por defecto del boton y simplemente llamar a revisionApi.stop(), que no existe, asi que vamos a agregarlo.

Agreguen un metodo en el objeto revisionApi que se llame stop():

  stop: function() {
    revisionApi.audio.stop();
  },

Nuevamente sucede que revisionApi tiene, ademas, un handler para cuando la reproduccion se detiene, entonces no necesitamos agregar mas codigo al metodo stop(), el resto se ejecutara en revisionApi.onSuccess() (si, el nombre es malisimo, pero es el que tenia y no lo refactoreamos en su momento). El handler revisionApi.onSuccess() tiene este codigo, que necesita un minimo cambio:

  onSuccess: function(){
    if(revisionApi.interval) {
      clearInterval(revisionApi.interval);
      revisionApi.currentTime.text("00:00");
      revisionApi.interval = null;
      revisionApi.isPlaying = false;
    }

    console.log('media stop/played/rec success');
  },

Los cambios son pocos: sacamos las 3 lineas que resetean los indicadores fuera del if y agregamos una llamada para cambiar todos los botones de tag al estado en el cual todavia no fueron escuchados:

  onSuccess: function(){
    if(revisionApi.interval) {
      clearInterval(revisionApi.interval);
    }
    revisionApi.currentTime.text("00:00");
    revisionApi.interval = null;
    revisionApi.isPlaying = false;

    // volver los botones al color original
    $('button.tag').css('background-color', revisionApi.colorTagPendiente);

    console.log('media stop/played/rec success');
  },

Con la siguiente correccion volveremos a estos archivos ya que vamos a agregar la funcionalidad al boton para retroceder 10 segundos durante la revision

  1. Repaso y conceptos basicos
  2. Ejercicios para repasar
  3. Problematica de desarrollo mobile
  4. Phonegap
  5. Requerimientos e instalacion
  6. Phonegap CLI
  7. [Primeros ejercicios con Phonegap](Ejercicio Phonegap)
  8. Plugins
  9. Hello world
  10. Estructura de un proyecto Phonegap
  11. Plugin Device
  12. Debugging
  13. Incorporando un framework CSS
  14. Plugin Vibration
  15. Sumando partes
  16. Plugin Battery Status
  17. Un poco de jQuery
  18. jQuery Mobile
  19. Navegacion
  20. Plugin Dashboard
  21. Revision de Plugin Dashboard
  22. Paginas extra
  23. ToDo
  24. Persistencia
  25. ToDo Persistente
  26. Plugin Camera
  27. Opciones de camara
  28. App Mi Galeria
  29. Revision de Galeria
  30. Plugin File
  31. Escribir y leer texto
  32. Escribir archivos binarios
  33. Guardando fotos
  34. Debugger: weinre
  35. Inspeccionar con weinre
  36. Phonegap Developer App
  37. Refactor de apps
  38. Plugin Media
  39. Pruebas con audio
  40. Control y monitoreo de audio
  41. Encapsular play/pausa
  42. Hacks
  43. Formato de tiempos
  44. Grabar y reproducir
  45. Proyecto Integrador
  46. Revision de interfaz
  47. Interfaz basica
  48. Entrevista: modelo
  49. Funcionalidad: revision
  50. Seleccion de framework
  51. iRec: navegacion
  52. iRec: fileApi
  53. iRec: guias
  54. iRec: entrevistas
  55. iRec: recordApi
  56. iRec: helpers
  57. iRec: mediaApi
  58. iRec: inicializar paginas
  59. iRec: refactor
  60. iRec: mediaApi refactor
  61. iRec: recordApi refactor
  62. iRec: helpers
  63. iRec: guias.js
  64. iRec: entrevistas.js
  65. iRec: crear guias
  66. iRec: re-inicializando
  67. iRec: re-ordenando
  68. iRec: pendientes
  69. iRec: reporte ux
  70. iRec:revision: volver
  71. iRec:entrevista: volver
  72. iRec:revision: cambios
  73. iRec:revision: stop
  74. iRec:revision: Rew 10"
  75. iRec:revision: tag Go
  76. iRec: limpieza
  77. Firma de apps
  78. Android
  79. Generacion de key
  80. Firma de apk
  81. Alineacion de zip
  82. Firmar con Phonegap
  83. iOS
  84. Detalles finales
  85. Config.xml
  86. Iconos
  87. Splash
Clone this wiki locally