No indication the photo was taken

No indication that photo is captured on verify photo page

ECOM-1473

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)
 

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 );

lms/templates/verify_student/face_photo_step.underscore

@@ -57,12 +57,13 @@
 
     <% if ( nextStepTitle ) { %>
     <nav class="nav-wizard" id="face_next_button_nav">
-      <a id="next_step_button" class="next action-primary is-disabled right" aria-hidden="true" aria-disabled="true" title="Next">
+      <button id="next_step_button" class="next action-primary is-disabled right" aria-disabled="true" title="Next">
+      <span class="sr" id="photo_message"></span>
         <%- _.sprintf(
           gettext( "Next: %(nextStepTitle)s" ),
           { nextStepTitle: nextStepTitle }
         ) %>
-      </a>
+      </button>
     </nav>
 
     <% } %>

lms/templates/verify_student/id_photo_step.underscore

@@ -48,12 +48,12 @@
 
     <% if ( nextStepTitle ) { %>
     <nav class="nav-wizard" id="face_next_button_nav">
-      <a id="next_step_button" class="next action-primary is-disabled right" aria-hidden="true" title="Next">
+      <button id="next_step_button" class="next action-primary is-disabled right" aria-hidden="true" title="Next">
         <%- _.sprintf(
           gettext( "Next: %(nextStepTitle)s" ),
           { nextStepTitle: nextStepTitle }
         ) %>
-      </a>
+      </button>
     </nav>
     <% } %>
   </div>

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}'
   ></div>
   </section>
 </div>

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}'
     ></div>
 
     % if is_active:

lms/templates/verify_student/review_photos_step.underscore

@@ -66,9 +66,9 @@
 
       <ol class="wizard-steps">
         <li class="wizard-step step-proceed">
-          <a id="next_step_button" class="next action-primary right" aria-hidden="true" aria-disabled="true" title="Confirmation">
+          <button id="next_step_button" class="next action-primary right" aria-hidden="true" aria-disabled="true" title="Confirmation">
             <%- gettext( "Confirm" ) %>
-          </a>
+          </button>
         </li>
       </ol>
     </nav>

lms/templates/verify_student/webcam_photo.underscore

@@ -21,11 +21,13 @@
 
 <div class="controls photo-controls">
   <div class="control control-retake is-hidden" id="webcam_reset_button">
-    <a class="action action-redo" tabindex=1><%- gettext( "Retake Photo" ) %></a>
+    <button class="action action-redo"><%- gettext( "Retake Photo" ) %></button>
   </div>
   <div class="control control-do is-hidden" id="webcam_capture_button">
-    <a class="action action-do" tabindex=1>
+    <button class="action action-do">
       <i class="icon fa fa-camera" aria-hidden="true"></i> <span class="sr"><%- gettext( "Take Photo" ) %></span>
-    </a>
+    </button>
   </div>
+  <audio id="webcam_capture_sound"></audio>
+
 </div>