diff --git a/lms/djangoapps/verify_student/views.py b/lms/djangoapps/verify_student/views.py index 841a8a0d3f..26a7392c66 100644 --- a/lms/djangoapps/verify_student/views.py +++ b/lms/djangoapps/verify_student/views.py @@ -58,6 +58,7 @@ from util.json_request import JsonResponse from util.date_utils import get_default_time_display from xmodule.modulestore.django import modulestore from xmodule.modulestore.exceptions import ItemNotFoundError, NoPathToItem +from staticfiles.storage import staticfiles_storage log = logging.getLogger(__name__) @@ -407,6 +408,7 @@ class PayAndVerifyView(View): ), 'already_verified': already_verified, 'verification_good_until': verification_good_until, + 'capture_sound': staticfiles_storage.url("audio/camera_capture.wav"), } return render_to_response("verify_student/pay_and_verify.html", context) @@ -1170,7 +1172,8 @@ class InCourseReverifyView(View): 'course_name': course.display_name_with_default, 'checkpoint_name': checkpoint.checkpoint_name, 'platform_name': settings.PLATFORM_NAME, - 'usage_id': usage_id + 'usage_id': usage_id, + 'capture_sound': staticfiles_storage.url("audio/camera_capture.wav"), } return render_to_response("verify_student/incourse_reverify.html", context) diff --git a/lms/static/audio/camera_capture.wav b/lms/static/audio/camera_capture.wav new file mode 100644 index 0000000000..666af8e9b5 Binary files /dev/null and b/lms/static/audio/camera_capture.wav differ diff --git a/lms/static/js/verify_student/views/webcam_photo_view.js b/lms/static/js/verify_student/views/webcam_photo_view.js index b0aac41718..835f571920 100644 --- a/lms/static/js/verify_student/views/webcam_photo_view.js +++ b/lms/static/js/verify_student/views/webcam_photo_view.js @@ -212,10 +212,15 @@ }, initialize: function( obj ) { + this.mainContainer = $('#pay-and-verify-container'); + if (!this.mainContainer){ + this.mainContainer = $('#incourse-reverify-container'); + } this.submitButton = obj.submitButton || ""; this.modelAttribute = obj.modelAttribute || ""; this.errorModel = obj.errorModel || null; this.backend = this.backends[obj.backendName] || obj.backend; + this.captureSoundPath = this.mainContainer.data('capture-sound'); this.backend.initialize({ wrapper: "#camera", @@ -254,11 +259,12 @@ $resetBtn.on( 'click', _.bind( this.reset, this ) ); $captureBtn.on( 'click', _.bind( this.capture, this ) ); - $resetBtn.on( 'keyup', _.bind( this.reset_by_enter, this ) ); - $captureBtn.on( 'keyup', _.bind( this.capture_by_enter, this ) ); + $resetBtn.on( 'keyup', _.bind( this.resetByEnter, this ) ); // Show the capture button $captureBtn.removeClass('is-hidden'); + $( "#webcam_capture_button", this.el ).removeClass('is-hidden'); + $( "#webcam_capture_sound", this.el ).attr('src', this.captureSoundPath); return this; }, @@ -276,14 +282,11 @@ // Go back to the initial button state $( "#webcam_reset_button", this.el ).addClass('is-hidden'); $( "#webcam_capture_button", this.el ).removeClass('is-hidden'); + $( this.submitButton ).attr('title', ''); }, - capture_by_enter: function(event){ - if(event.keyCode == key.enter){ - this.capture(); - } - }, - reset_by_enter: function(event){ + + resetByEnter: function(event){ if(event.keyCode == key.enter){ this.reset(); } @@ -306,6 +309,8 @@ // Enable the submit button this.setSubmitButtonEnabled( true ); + this.setSubmitButtonFocused(); + this.captureSound(); } }, @@ -336,6 +341,16 @@ .attr('aria-disabled', !isEnabled); }, + captureSound: function(){ + $( '#webcam_capture_sound' )[0].play(); + }, + + setSubmitButtonFocused: function(){ + $( this.submitButton ) + .trigger('focus') + .attr('title', gettext( 'Photo Captured successfully.')); + }, + isMobileDevice: function() { // Check whether user is using mobile device or not return ( navigator.userAgent.match(/(Android|iPad|iPhone|iPod)/g) ? true : false ); diff --git a/lms/templates/verify_student/face_photo_step.underscore b/lms/templates/verify_student/face_photo_step.underscore index 62f56fe6e5..89297c3805 100644 --- a/lms/templates/verify_student/face_photo_step.underscore +++ b/lms/templates/verify_student/face_photo_step.underscore @@ -57,12 +57,13 @@ <% if ( nextStepTitle ) { %> <% } %> diff --git a/lms/templates/verify_student/id_photo_step.underscore b/lms/templates/verify_student/id_photo_step.underscore index 9e348c3b76..7c24b5a76a 100644 --- a/lms/templates/verify_student/id_photo_step.underscore +++ b/lms/templates/verify_student/id_photo_step.underscore @@ -48,12 +48,12 @@ <% if ( nextStepTitle ) { %> <% } %> diff --git a/lms/templates/verify_student/incourse_reverify.html b/lms/templates/verify_student/incourse_reverify.html index 00e5ac5c4f..5814d9cf19 100644 --- a/lms/templates/verify_student/incourse_reverify.html +++ b/lms/templates/verify_student/incourse_reverify.html @@ -45,6 +45,7 @@ from verify_student.views import PayAndVerifyView data-course-key='${course_key}' data-platform-name='${platform_name}' data-usage-id='${usage_id}' + data-capture-sound='${capture_sound}' > diff --git a/lms/templates/verify_student/pay_and_verify.html b/lms/templates/verify_student/pay_and_verify.html index ac99eb2a53..ada5813309 100644 --- a/lms/templates/verify_student/pay_and_verify.html +++ b/lms/templates/verify_student/pay_and_verify.html @@ -76,6 +76,7 @@ from verify_student.views import PayAndVerifyView data-is-active='${is_active}' data-already-verified='${already_verified}' data-verification-good-until='${verification_good_until}' + data-capture-sound='${capture_sound}' > % if is_active: diff --git a/lms/templates/verify_student/review_photos_step.underscore b/lms/templates/verify_student/review_photos_step.underscore index 727c56a461..923c8ef2f7 100644 --- a/lms/templates/verify_student/review_photos_step.underscore +++ b/lms/templates/verify_student/review_photos_step.underscore @@ -66,9 +66,9 @@
  1. -
diff --git a/lms/templates/verify_student/webcam_photo.underscore b/lms/templates/verify_student/webcam_photo.underscore index 8e12108ac0..30ceb58687 100644 --- a/lms/templates/verify_student/webcam_photo.underscore +++ b/lms/templates/verify_student/webcam_photo.underscore @@ -21,11 +21,13 @@
+ +